@charset "utf-8";


@import url('https://fonts.googleapis.com/css2?family=Encode+Sans:wght@100;200;300;400;500;600;700;800;900&display=swap');
@import url('https://fonts.googleapis.com/css2?family=Open+Sans:ital,wght@0,300;0,400;0,500;0,600;0,700;0,800;1,300;1,400;1,500;1,600;1,700;1,800&display=swap');


.primary-text { font-family: 'Encode Sans', Arial, Helvetica, sans-serif; }
.secondary-text { font-family: 'Open Sans', Arial, Helvetica, sans-serif; }


:root {

    --app-bg-color: #F7F7F7;

    --primary-color: #5865f2;
    --primary-color-800: #6874f1;
    --primary-color-700: #747ef0;
    --primary-color-500: #9fa6eb;
    --primary-color-200: #e5e7fd;
    --primary-color-100: #EEEFFE;
    --primary-color-rgb: 88, 101, 242;

    --secondary-color: #01c2a8; /*ff6600  02c4aa ff7b00 4c00ff*/
    --secondary-color-800: #03f0d0;
    --secondary-color-700: #4ffde6;
    --secondary-color-rgb: 1, 194, 168; /* 255, 102, 0   2, 196, 170    255, 123, 0 */

    --effect-color-rgb: 255, 241, 39; /* 255, 102, 0 */
    --effect-color2-rgb: 69, 243, 255; /* 69, 243, 255 */

    --color-white: #FFF;
    --color-black: #1C1E20;
    --color-white-rgb: 255, 255, 255;
    --color-black-rgb: 0, 0, 0;

    --text-white: #FFF;
    --text-black: #1C1E20;

    --color-notif-rgb: 0, 208, 180;
    --color-success-rgb: 0, 208, 180; /*198754 - 00D0B4*/
    --color-info-rgb: 13, 138, 240;
    --color-warning-rgb: 255, 193, 7;
    --color-danger-rgb: 220, 53, 69;

    --border-color: #CCC;
    --border-color-rgb: 0, 0, 0;

    --component-color-rgb: 88, 116, 242;
    --component-br-rgb: 100, 100, 100; /*border - grey scale*/
    --component-bg-rgb: 255, 255, 255; /*form input gb color*/
    --component-text: #222427;
    --component-color-effect-rgb: 1, 194, 168;

    --scroll-bar-color: #999; /* #CCC */
    --scroll-bar-color-hover: #BBB;
    --scroll-bar-bg-color: #DDD;

    --navigation-bg: 255,255,255;
    --nav-height-top: 0px; /*40px*/
    --nav-height-main: 65px; /*70px*/
    --nav-height-bottom: 0px; /*40px*/
    --nav-height: calc(var(--nav-height-top) + var(--nav-height-main) + var(--nav-height-bottom));
    --nav-height-decalage: 35px;


    --cover-height: 350px;
    --cover-height-add: 150px;
}


/*******/
*,
*::before,
*::after {
    margin: 0;
    padding: 0;
    font-family: 'Encode Sans', sans-serif, Arial, Helvetica;

    font-size: var(--text-size); line-height: calc(var(--text-size) + 0.2rem);
     /*color: var(--text-black);*/

    box-sizing: border-box;
    color-scheme: normal;/*normal light dark*/
}

/***** Scroll *****/
body,td,th {
	-webkit-font-smoothing: antialiased;
	-moz-osx-font-smoothing: grayscale;

    /*font-size: var(--text-size); */
    /*color: var(--text-black);*/
    /*line-height: calc( var(--text-size) + 9px ); */
}


/*
@media (prefers-color-scheme: light) {
    .element {
        color: black;
        background-color: white;
    }
}

@media (prefers-color-scheme: dark) {
    .element {
        color: white;
        background-color: black;
    }
}

.element {
    color: light-dark(black, white);
    background-color: light-dark(white, black);
}
*/


/* Scroll style for firefox */
/*html { scroll-behavior: smooth; scrollbar-width: thin; scrollbar-color: var(--scroll-bar-color) var(--scroll-bar-bg-color); }*/

/* Scroll style for all browers */
::-scrollbar { width: 10px;  }
::-webkit-scrollbar { width: 6px; }
::-webkit-scrollbar-track {
	box-shadow: inset 0 0 2px var(--scroll-bar-bg-color);
	background: var(--scroll-bar-bg-color);
	border-radius: 0 0 10px 10px;
}
::-webkit-scrollbar-thumb {
	background: var(--scroll-bar-color); 
	border-radius: 0 0 10px 10px;
}
::-webkit-scrollbar-thumb:hover {
	background: var(--scroll-bar-color-hover); 
}

/***** Tag *****/
.tag { 
    padding: 0.5rem 1rem;
    color: #FFF; font-size: 0.9rem;
    background-color: var(--primary-color); border-radius: 1rem;
}
.tag.grey { 
    color:  rgb(var(--color-black-rgb), 0.8); 
    background-color: rgb(var(--color-black-rgb), 0.1);
}
.tag.sm { padding: 0.2rem 1rem; font-size: 0.7rem; }



.color-notif { color: rgb(var(--color-notif-rgb), 1); }
.color-success { color: rgb(var(--color-success-rgb), 1); }
.color-info { color: rgb(var(--color-info-rgb), 1); }
.color-warning { color: rgb(var(--color-warning-rgb), 1); }
.color-danger { color: rgb(var(--color-danger-rgb), 1); }

.bg-color-notif { background-color: rgb(var(--color-notif-rgb), 1); }
.bg-color-success { background-color: rgb(var(--color-success-rgb), 1); }
.bg-color-info { background-color: rgb(var(--color-info-rgb), 1); }
.bg-color-warning { background-color: rgb(var(--color-warning-rgb), 1); }
.bg-color-danger { background-color: rgb(var(--color-danger-rgb), 1); }


/***** Link *****/
a         { font-size: 1rem; color: var(--primary-color); text-decoration:none; }
a:link    { text-decoration: none; }
a:visited { text-decoration: none; color: var(--primary-color); }
a:hover   { text-decoration: none; color: var(--primary-color); }
a:active  { text-decoration: none; color: var(--primary-color); }


a.Linkbreak         { text-decoration:none; line-height: inherit; }
a.Linkbreak:visited { text-decoration:none; }
a.Linkbreak:hover   { text-decoration:none; }
a.Linkbreak:active  { text-decoration:none; }


/***** Text color *****/
.text-primary-color { color: var(--primary-color); }
.text-primary-color-500 { color: var(--primary-color-500); }
.text-primary-color-700 { color: var(--primary-color-700); }
.text-primary-color-800 { color: var(--primary-color-800); }

.text-secondary-color { color: var(--secondary-color); }
.text-secondary-color-700 { color: var(--secondary-color-800); }
.text-secondary-color-800 { color: var(--secondary-color-700); }


.text-white { color: var(--text-white); }
.text-grey-100 { color: #EEEEEE; }
.text-grey-200 { color: #DDDDDD; }
.text-grey-300 { color: #CCCCCC; }
.text-grey-400 { color: #AAAAAA; }
.text-grey-500 { color: #888888; }
.text-grey-600 { color: #666666; }
.text-grey-700 { color: #444444; }
.text-grey-800 { color: #222222; }
.text-black { color: var(--text-black); }


/***** Background *****/
.bg-white { background-color: var(--color-white)!important; }
.bg-lighter { background-color: bisque!important; }
.bg-grey-50 { background-color: #F5F5F5!important; }
.bg-grey-100 { background-color: #EEEEEE!important; }
.bg-grey-200 { background-color: #DDDDDD!important; }
.bg-grey-300 { background-color: #CCCCCC!important; }
.bg-grey-400 { background-color: #AAAAAA!important; }
.bg-grey-500 { background-color: #888888!important; }
.bg-grey-600 { background-color: #666666!important; }
.bg-grey-700 { background-color: #444444!important; }
.bg-grey-800 { background-color: #222222!important; }
.bg-black { background-color: #1C1E20!important; }

.bg-color { background-color: rgb(var(--primary-color-rgb), 0.07)!important; }
.bg-color-800 { background-color: rgb(var(--primary-color-rgb), 0.8)!important; }
.bg-color-900 { background-color: rgb(var(--primary-color-rgb), 0.9)!important; }
.bg-color-1000 { background-color: rgb(var(--primary-color-rgb), 1)!important; }

.bg-color-secondary { background-color: rgb(var(--secondary-color-rgb), 0.07)!important; }
.bg-color-secondary-800 { background-color: rgb(var(--secondary-color-rgb), 0.8)!important; }
.bg-color-secondary-900 { background-color: rgb(var(--secondary-color-rgb), 0.9)!important; }
.bg-color-secondary-1000 { background-color: rgb(var(--secondary-color-rgb), 1)!important; }


hr { border: 0; border-top: 1px solid var(--color-black); }
hr.hr2 { border: 0; border-top: 2px solid var(--color-black); opacity: 0.9; }
hr.hr-white { border-top: 1px solid var(--color-white); }
hr.hr2-white { border-top: 2px solid var(--color-white); opacity: 0.9; }
hr.hr-vertical { min-height: 2rem; border: 0; border-right: 1px solid var(--color-black); }
hr.hr-vertical-white { min-height: 2rem; border: 0; border-right: 1px solid var(--color-white);  }
hr.w2 { border-width: 2px; }



.icon-white { filter: brightness(100); }


/***** Page Section *****/
.app { position: relative; }

/* ------------------------UI---------------------------------- */

/***** Navigation *****/
/* Nav */
.navigation {
	width: 100%; height: var(--nav-height); position: fixed; /*absolute fixed*/ z-index:10; /*overflow: hidden;*/ /*padding-top: 20px;*/
	background-color: rgba(var(--navigation-bg),1);
	box-shadow: 0px 1px 15px rgba(0, 0, 0, 0.2);
	color: #555; transition: 0.2s ease;
}
.change.navigation { height: calc(var(--nav-height) - var(--nav-height-decalage)); box-shadow: 0px 1px 60px rgba(0, 0, 0, 0.2); }

.navigation.transparent { 
    /*background: linear-gradient(180deg, rgba(0, 0, 0, 0.7) 20%, rgb(0, 0, 0, 0) 100%);
    box-shadow: 0px 1px 15px rgba(0, 0, 0, 0);*/
    box-shadow: none;
    background-color: transparent;
}
.navigation.transparent:hover { background-color: rgba(var(--navigation-bg),0); }
.change.navigation.transparent { background: none; background-color: rgba(var(--navigation-bg),1); box-shadow: 0px 1px 15px rgba(0, 0, 0, 0.2); }

.navigation-wrapper { 
    width: 100%; 
    margin: auto; position: relative;
}

.navigation-top {
    width: 100%; height: var(--nav-height-top);
    display: flex; align-items: center; justify-content: center;
    /*border-bottom: 2px solid var(--nav-line-color);*/
    transition: 0.2s ease all;
}

.navigation-main {
    width: 100%; height: var(--nav-height-main);
    display: flex; align-items: center; justify-content: right;
}

.navigation-bottom {
    width: 100%; height: var(--nav-height-bottom);
    display: flex; align-items: center; justify-content: center;
}

.navigation-split-left { width: 40%; float: left; }
.navigation-split-center { width: 0%; /*60%*/ float: left; }
.navigation-split-right { width: 60%; float: left; }

.nav ul { 
    display: flex; align-items: center; justify-content: center;
	list-style-type: none; margin: 0; padding: 0;
}
.nav li { position: relative; }
.nav li a {
    height: var(--nav-height-main); position: relative; display: flex; align-items: center;
    padding: 20px 14px; margin: 0 5px;
	font-size: 0.85rem; line-height: 1rem; 
    color: #444; font-weight: 800;
}

.nav li a:hover,
.nav li a.active,
.nav li .active,
.submenu.active {
    text-decoration: none;
    cursor: pointer;
    background: rgb(var(--color-white-rgb), 0.2); border-radius: 20px;
}


.user-profil-img { 
    width: calc(var(--size-xl) - 2px); padding: 2px;
    background-color: rgb(var(--navigation-bg), 1); border: 2px solid var(--secondary-color);
}

.nav-vertical-line { width: 1px; height: calc(var(--nav-height) - 40px); margin: 0 10px; background-color: var(--border-color); }
.nav-vertical-line2 { width: 2px; height: calc(var(--nav-height) - 40px); margin: 0 10px; background-color: var(--border-color); }



/* Sub menu */
.nav .sub-menu {
    min-width: 150px;
    padding: 5px 5px 10px 5px;
    visibility: hidden;
    opacity: 0;
    position: absolute;
    transition: all 0.2s ease;
    /*margin-top: 1rem;*/
    display: block;
    background-color: var(--color-white);
    box-shadow: 0px 1px 15px rgba(0, 0, 0, 0.1);

    display: block; 
	list-style-type: none;
}
.nav .sub-menu.flex { width: 100%; }

.nav ul li:hover > .sub-menu, .nav .sub-menu:hover {
    visibility: visible;
    opacity: 1; display: block;
}

.nav .sub-menu li {
    clear: both;width: 100%;
}

.nav .sub-menu li a {
    height: 2.2rem; display: block; 
    padding: 10px 14px; margin: 5px 5px;
	font-size: 0.85em; line-height: 0.85rem;
    color: #555; font-weight: 600;
}
.nav .sub-menu li a:hover { background-color: rgb(var(--primary-color-rgb), 0.05); color: var(--primary-color); }


.transparent .nav li a { color: var(--color-white); }
.transparent .nav li a:hover { opacity: 0.9; }

.change.transparent .nav li a { color: var(--primary-color); }
.change.transparent .nav li a:hover { opacity: 1; }



.navigation-search { 
    width: 100%; height: var(--nav-height-main); position: relative;
    background: linear-gradient(0deg, rgb(var(--primary-color-rgb), 0.08) 0%, rgb(var(--primary-color-rgb), 0) 70%);
    /*border: 1px solid var(--border-color);*/ border: 2px solid transparent;

    /*Style2*/
    /*border: none;*/
    border-bottom: 2px solid rgb(var(--primary-color-rgb), 0.5);

    transition: 0.05s ease;
    /* outline-style: solid; outline-color: rgb(var(--primary-color-rgb), 0.5); outline-width: 2px;  */
}
.navigation-search:hover { border: 2px solid rgb(var(--primary-color-rgb), 0.5); }
.navigation-search-field { 
    width: 100%; height: inherit; position: absolute; z-index: 2; 
    padding: 20px 20px 20px 25px; border: none; background-color: transparent; outline: none;
    /*background: url('../public/assets/icons/icon-search.svg'); background-size: 20px; background-position: 15px center; background-repeat: no-repeat;*/
    color: rgb(var(--primary-color-rgb), 0.9); font-weight: 600;
}
.navigation-search-effect { 
    width: 100%; height: var(--nav-height-main); position: absolute; z-index: 1;
    background: linear-gradient(0deg, rgb(var(--primary-color-rgb), 0.03) 0%, rgb(var(--primary-color-rgb), 0.03) 70%);
    transform: scale(0); transition: 0.2s ease;

    /*Style2*/
    /*background: linear-gradient(90deg, rgb(var(--primary-color-rgb), 0.06) 0%, rgb(var(--primary-color-rgb), 0) 70%);*/
}
.navigation-search:hover .navigation-search-effect {
    transform: scale(1);
}


/***** Navigation *****/



/***** Sidebar *****/
/*.sidebar {
    width: 100%;
}
.sidebar {
    width: 100%;
}*/


/* ------------------------UI---------------------------------- */



/* ------------------------Components---------------------------------- */

/***** Card *****/
/* Global */
.card {
    width: 100%;
    background-color: var(--color-white);
    border-radius: 20px;
    box-shadow: 1px 1px 30px rgb(0, 0, 0, 0.1);
}
.card-img {
    width: 90%; margin: 0 5%; border-radius: 20px; 
}
.card .title { 
    font-weight: 500; color: var(--color-black);
}

.square { width: calc(var(--size-medium) * 1.5); height: calc(var(--size-medium) * 1.5); background-color: rgb(0, 208, 180, 0.1); border-radius: 10px; overflow: hidden; }
.square-lg { width: var(--size-lg); height: var(--size-lg); background-color: rgb(0, 208, 180, 0.1); border-radius: 10px; overflow: hidden; }
.square-xl { width: var(--size-xl); height: var(--size-xl); background-color: rgb(0, 208, 180, 0.1); border-radius: 10px; overflow: hidden; }
.square-xxl { width: calc(var(--size-xl) * 1.7); height: calc(var(--size-xl) * 1.7); background-color: rgb(0, 208, 180, 0.1); border-radius: 30px; overflow: hidden; }


.card-message {
    width: 100%; display: flex; margin-bottom: 1rem;
}
.card-message .text-message {
    width: 100%; display: flex; align-items: center; margin-left: 1.5rem; padding: 1rem 1.4rem;
    border-radius: 5px 30px 30px 30px;
}


/* Produits */
/*.card-product {
    width: 100%;
    background-color: var(--color-white);
    border-radius: 20px;
    box-shadow: 1px 1px 30px rgb(0, 0, 0, 0.1);
}
.card-product-img {
    width: 90%; margin: 0 5%; border-radius: 20px; 
}
.card-product .title { 
    font-weight: 500; color: #000;
}*/

/***** Card *****/




/***** Widget *****/
.widget {
    width: 100%; position: relative;
    background-color: var(--color-white);
    border-radius: 20px;
    box-shadow: 1px 1px 30px rgb(0, 0, 0, 0.1);
}
.widget.border { border: 2px solid rgb(var(--border-color-rgb), 0.6)!important; transition: 0.2s ease; }
.widget.border:hover { border: 2px solid rgb(var(--border-color-rgb), 0.9)!important; }

.widget.border-light { border: 2px solid rgb(var(--border-color-rgb), 0.08)!important; transition: 0.2s ease; }
.widget.border-light:hover { border: 2px solid rgb(var(--border-color-rgb), 0.8)!important; }


.widget.fill {
    padding: 35px;
}
.widget.fill-x {
    padding-left: 25px; padding-right: 25px;
}
.widget.fill-y {
    padding-top: 25px; padding-bottom: 25px;
}
.widget-img { 
    width: 100%; position: relative;
    background-color: var(--color-white);
    border-radius: 1rem;
    box-shadow: 1px 1px 30px rgb(0, 0, 0, 0.1);
    overflow: hidden;
}
.widget-layer {
    width: 100%; height: 100%; 
    position: absolute; padding: 3rem; 
    background: linear-gradient(0deg, rgb(0, 0, 0, 0.7) 0%,  rgba(0, 0, 0, 0) 50%);
}
.widget-layer.fill { position: relative; height: auto; }
.widget-layer.white { background: linear-gradient(0deg, rgb(255, 255, 255, 0.92) 50%,  rgba(255, 255, 255, 0) 100%); }
.widget-layer.sm { 
    padding: 2rem;
    background: linear-gradient(0deg, rgb(0, 0, 0, 0.7) 0%,  rgba(0, 0, 0, 0) 80%);
} 
.widget-floating {
    width: 100%; height: 100%; 
    position: absolute; padding: 3rem;
}



.shadow-100 { box-shadow: 0 0 30px rgb(0, 0, 0, 0.025)!important; }
.shadow-200 { box-shadow: 0 0 30px rgb(0, 0, 0, 0.05)!important; }
.shadow-300 { box-shadow: 0 0 30px rgb(0, 0, 0, 0.075)!important; }
.shadow-400 { box-shadow: 0 0 30px rgb(0, 0, 0, 0.1)!important; }

.shadow-white-200 { box-shadow: 0 0 30px rgb(255, 255, 255, 0.05)!important; }
.shadow-white-400 { box-shadow: 0 0 30px rgb(255, 255, 255, 0.1)!important; }

.shadow-pop { box-shadow: 30px 40px 20px rgba(98, 2, 253, 0.1)!important; }
.shadow-pop-left { box-shadow: -30px 40px 20px rgba(98, 2, 253, 0.1)!important; }

.text-shadow-400 { text-shadow: 0 0 30px rgb(0, 0, 0, 0.1)!important; }



/***** Cover *****/
.cover {
    width: 100%; min-height: var(--cover-height); /*margin: 20px 1%;*/
    display: flex; align-items: center; justify-content: center; 
    background-color: #000; /*border-radius: 50px;*/
}
.cover-wide {
    width: 100%; min-height: calc(var(--cover-height) + var(--cover-height-add)*2); /*margin: 20px 1%;*/
    display: flex; align-items: center; justify-content: center;
    background-color: #000; /*border-radius: 50px;*/
}
.cover-wide.fix { height: calc(var(--cover-height) + var(--cover-height-add)*2); }
.cover-large {
    width: 100%; min-height: calc(var(--cover-height) + var(--cover-height-add)); /*margin: 20px 1%;*/
    display: flex; align-items: center; justify-content: center;
    background-color: #000; /*border-radius: 50px;*/
}
.cover-large.fix { height: calc(var(--cover-height) + var(--cover-height-add)) }
.cover-small {
    width: 98%; min-height: calc(var(--cover-height) - var(--cover-height-add)/2); margin: 20px 1%;
    display: flex; align-items: center; justify-content: center;
    background-color: #000; border-radius: 50px;
}
.cover-lil {
    width: 98%; min-height: calc(var(--cover-height) - var(--cover-height-add)); margin: 20px 1%;
    display: flex; align-items: center; justify-content: center;
    background-color: #000; border-radius: 50px;
}
.cover-zero {
    width: 98%; height: calc(var(--nav-height) + 5px); margin: 20px 1%;
    display: flex; align-items: center; justify-content: center;
    background-color: #000; border-radius: 50px;
}


/***** Button *****/
.btn-action { 
    width: auto; position: relative; padding: 0.66rem 0.66rem; margin: 0 1px;
    display: flex; align-items: center;
    border-radius: 18px;
}
.btn-action:hover, .btn-action.active { background-color: rgb(var(--primary-color-rgb), 0.1); cursor: pointer; }
.btn-action-icon { width: calc(var(--size-medium) - 2px); margin: auto; /*transition: 0.1s ease;*/ }
.btn-action-icon.black { filter: brightness(0); opacity: 0.8; }
.btn-action.sm .btn-action-icon { width: var(--size-sm); }
/* .btn-action:hover .btn-action-icon { transform: scale(0.9); } */

.btn-action span { display: none; position: relative; font-size: 0.85rem; font-weight: 700; color: rgb(var(--sidebar2-text-color), 0.6); }
.btn-action.tips:hover span {
    /*width: 8rem; display: block; position: absolute; z-index: 2; padding: 7px 15px; margin-left: -3.3rem;*/
    width: calc(var(--size-medium) * 6); display: block; position: absolute; z-index: 2; padding: 0.3rem 1rem; margin-left: calc(var(--size-medium) * -3); 
    top: calc(var(--size-medium) + 1.3rem);
    background-color: var(--color-white); border-radius: 18px; box-shadow: 0px 1px 15px rgba(0, 0, 0, 0.1);
    font-size: 0.7rem; font-weight: 700; color: var(--primary-color); text-align: center;
}
.btn-action.tips.bottom:hover span { top: calc(var(--size-medium) + 2.2rem); }
.btn-action.tips.left:hover span { margin-left: 0;}
.btn-action.tips.right:hover span { margin-left: 0; right: 0;}


.btn-action.show { 
    padding: 10px 20px 10px 15px;
    background-color: rgb(var(--primary-color-rgb), 0.1); border: 2px solid rgb(var(--primary-color-rgb), 0.05); border-radius: 26px;
}
.btn-action.show:hover { background-color: rgb(var(--secondary-color-rgb), 1); }
.btn-action.show span { display: block; padding-left: 10px; color: var(--primary-color); }
.btn-action.color { background-color: rgb(var(--primary-color-rgb), 0.95); box-shadow: 0px 1px 15px rgba(0, 0, 0, 0.2); } 
.btn-action.color:hover { background-color: rgb(var(--secondary-color-rgb), 1); }
.btn-action.color span, .btn-action.show:hover span { color: var(--color-white); }
.btn-action.color .btn-action-icon, .btn-action.show:hover .btn-action-icon { filter: brightness(100); }


.btn-flotting-icon { width: var(--size-xs); position: absolute; bottom: 0; right: -3px; padding: 1px; transition: 0.1s ease; }
.btn-action .btn-flotting-icon { background-color: rgb(var(--color-white-rgb), 0); border-radius: 20px;  }
.btn-action:hover .btn-flotting-icon { background-color: var(--color-white); border-radius: 20px; padding: 3px; transform: rotate(180deg);  }



/**/
.btn,
.btn-ultra { 
    width: auto; position: relative; padding: 0.7rem 1.3rem 0.7rem 1.15rem; margin: 0 3px;
    display: flex; align-items: center;
    background-color: rgb(var(--primary-color-rgb), 0.9); border: none; border-radius: 2.7rem;
    box-shadow: 0px 1px 15px rgba(0, 0, 0, 0.2);
    font-size: 0.85rem; font-weight: 700; color: var(--color-white); text-align: center;
    outline: 0; 
    transition: 0.15s ease;
}
.btn:hover,
.btn-ultra:hover { background-color: rgb(var(--primary-color-rgb), 1); cursor: pointer; box-shadow: 0 0 0 0.25rem rgba(var(--primary-color-rgb), 0.3); }

.btn-icon { 
    width: calc(var(--size-medium) - 3px); margin: 0 0.5rem 0 0;
    filter: brightness(100); transition: 0.1s ease;
}
.btn span,
.btn-ultra span { font-size: .8rem; line-height: 0.8rem; }


.btn.stroke,
.btn-ultra.stroke { 
    background-color: rgb(var(--color-white-rgb), 0.9); border: 2px solid rgb(var(--primary-color-rgb), 0.9);
    color: rgb(var(--primary-color-rgb), 0.9);
}

.btn.stroke.white,
.btn-ultra.stroke.white { 
    background-color: rgb(var(--color-white-rgb), 0); border: 2px solid rgb(var(--color-white-rgb), 0.9);
    color: rgb(var(--color-white-rgb), 0.9);
}


.btn-ultra { width: 8.5rem; height: 2.6rem; padding: 0 0; position: relative; overflow: hidden; }
.btn-ultra .btn-show,
.btn-ultra .btn-loading { 
    width: 100%; height: inherit; display: flex; align-items: center; justify-content: center; position: absolute; padding: 0 20px; top: 0rem;
    transition: 0.1s ease;
}
.btn-ultra.loading { background-color: var(--secondary-color); }
.btn-ultra .btn-loading {  position: absolute; top: 3rem; /*background-color: #01c2a8;*/ }
.btn-ultra.loading .btn-show { top: -3rem; opacity: 1; /*0.5*/ }
.btn-ultra.loading .btn-loading { top: 0rem; }

.btn:hover .btn-icon, .btn-ultra:hover .btn-icon, .btn-supra:hover .btn-icon  { transform: translateX(-3px); } 
.btn.tips:hover .btn-icon, .btn-ultra.tips:hover .btn-icon, .btn-supra.tips:hover .btn-icon  { transform: scale(0.9); }

.btn.tips { padding: 0.77rem 1.05rem; }
.btn-ultra.tips { width: calc(var(--size-medium) * 2.5); padding: 0.77rem 0; }
.btn-ultra.tips .btn-show {  padding: 0 0; }
.btn-ultra.tips:hover { overflow: unset; }
.btn.tips span, .btn-ultra.tips span, .btn-supra.tips span { display: none; }
.btn.tips .btn-icon, .btn-ultra.tips .btn-icon { margin: 0 0 0 0; }

.btn.tips:hover span, .btn-ultra.tips:hover span, .btn-supra.tips:hover span {
    width: calc(var(--size-medium) * 4); display: block; position: absolute; z-index: 2; padding: 0.3rem 1rem; margin-left: -2.35rem; 
    top: calc(var(--size-medium) + 1.8rem);
    background-color: var(--color-white); border-radius: 18px; box-shadow: 0px 1px 15px rgba(0, 0, 0, 0.1);
    font-size: 0.65rem; font-weight: 700; color: rgb(var(--color-black-rgb), 0.5); text-align: center;
}
.btn-ultra.tips:hover span { margin-left: 0; }
.btn-ultra.tips.loading:hover span { margin-left: 0; top: calc(var(--size-medium) + 5rem); }
.btn-supra.tips:hover span { margin-left: -1rem; top: 3.75rem; }



/**/
.btn-supra {
    position: relative; margin: 5px 5px;
    background-color: transparent; border: none; cursor: pointer;
}
.btn-supra-show-set { width: 3.7rem; height: 3.7rem; margin-bottom: 0.3rem; display: flex; align-items: center; justify-content: center; position: relative; }
.btn-supra-show {
    width: 3.7rem; height: 3.7rem; display: flex; align-items: center; justify-content: center;
    background-color: rgb(var(--primary-color-rgb), 0.9); border-radius: 50px; box-shadow: 0px 1px 15px rgba(0, 0, 0, 0.1);
    transition: 0.15s ease;
}

.btn-supra-animate {
    background: repeating-conic-gradient(from var(--a), rgb(var(--sidebar-color), 0.3) 0%, rgb(var(--effect-color2-rgb), 0.3) 5%, transparent 5%, transparent 40%, rgb(var(--sidebar-color), 0.3) 50%); 
    animation: animate 3s linear infinite;
    border-radius: 50px;
}
.btn-supra.color2 .btn-supra-animate {
    background: repeating-conic-gradient(from var(--a), rgb(var(--effect-color2-rgb), 0.5) 0%, rgb(var(--effect-color-rgb), 0) 5%, transparent 5%, transparent 40%, rgb(var(--effect-color2-rgb), 0.5) 50%);
}
.btn-supra.white .btn-supra-animate {
    background: repeating-conic-gradient(from var(--a), rgb(var(--sidebar-color), 0) 0%, rgb(var(--effect-color2-rgb), 0) 5%, transparent 5%, transparent 40%, rgb(var(--sidebar-color), 0) 50%);
}
.btn-supra.white:hover .btn-supra-animate, .btn-supra.white.active .btn-supra-animate {
    background: repeating-conic-gradient(from var(--a), rgb(var(--effect-color2-rgb), 0.15) 0%, rgb(var(--effect-color2-rgb), 0.15) 5%, transparent 5%, transparent 40%, rgb(var(--effect-color2-rgb), 0.15) 50%);
}

.btn-supra:hover .btn-supra-show, .btn-supra.active .btn-supra-show-set .btn-supra-show { 
    width: 3.2rem; height: 3.2rem;
    background-color: rgb(var(--primary-color-rgb), 1); box-shadow: 0px 1px 15px rgba(0, 0, 0, 0.2);
}

.btn-supra-icon { width: var(--size-medium); filter: brightness(100); }
.btn-supra span { color: rgb(var(--primary-color-rgb), 1); font-size: 0.8rem; font-weight: 600; }

.btn-circle { padding: 0.9rem; background-color: rgb(var(--component-color-effect-rgb), 0); border-radius: 50px; }
.btn-circle:hover { background-color: rgb(var(--component-color-effect-rgb), 0.1) }


/* btn sizes */
.btn-ultra.full { width: 100%; }
.btn.full { width: 100%; justify-content: center; }
.btn.sm { padding: 0.6rem 1.3rem 0.6rem 1rem; font-size: 0.75rem; }
.btn.lg { padding: 1rem 1.8rem 1.1rem 1.5rem; }
.btn.tips.sm { padding: 0.6rem 0.8rem; font-size: 0.75rem; }
.btn-ultra.sm { width: 7.5rem; height: 2.4rem; font-size: 0.75rem; }
.btn-ultra.lg { width: 100%; height: 3.4rem; font-size: 1.75rem; }
.btn-ultra.tips.sm { width: calc(var(--size-medium) * 2); padding: 0.77rem 0; }
.btn-ultra.tips.sm .btn-loading { padding: 0 10px; }
.btn-ultra.tips .btn-loading { padding: 0 13px; }
.btn.sm span,.btn-ultra.sm span { font-size: 0.75rem; }
.btn.lg span,.btn-ultra.lg span { font-size: 1.1rem; }
.btn.sm .btn-icon, .btn-ultra.sm .btn-icon, .btn-supra.sm .btn-icon { width: calc(var(--size-sm) - 4px); }
.btn.lg .btn-icon, .btn-ultra.lg .btn-icon, .btn-supra.lg .btn-icon { width: calc(var(--size-medium) - 1px); }


/* btn colors */
.btn.color2,
.btn-ultra.color2 { background-color: rgb(var(--secondary-color-rgb), 0.8); color: #111; }
.btn.color2:hover,
.btn-ultra.color2:hover { background-color: rgb(var(--secondary-color-rgb), 1); box-shadow: 0 0 0 0.25rem rgba(var(--secondary-color-rgb), 0.3); }
.btn.color2 .btn-icon,
.btn-ultra.color2 .btn-icon { filter: brightness(0); }

.btn-supra.color2 .btn-supra-show { background-color: rgb(var(--secondary-color-rgb), 1); box-shadow: 0px 1px 15px rgba(0, 0, 0, 0.05); }
.btn-supra.color2:hover .btn-supra-show,
.btn-supra.color2.active .btn-supra-show { background-color: rgb(var(--secondary-color-rgb), 1);  box-shadow: 0px 1px 15px rgba(0, 0, 0, 0.1); }
.btn-supra.color2 .btn-supra-icon { filter: brightness(100); opacity: 0.9; }
.btn-supra.color2 span { color: rgb(var(--secondary-color-rgb), 1); /* #000 */ }


.btn.light,
.btn-ultra.light,
.btn.light-reverse:hover,
.btn-ultra.light-reverse:hover { background-color: rgb(var(--primary-color-rgb), 0.08); color: rgb(var(--primary-color-rgb), 0.85); box-shadow: none; border: 2px solid rgb(var(--primary-color-rgb), 0.02); }
.btn.light:hover,
.btn-ultra.light:hover,
.btn.light-reverse,
.btn-ultra.light-reverse { background-color: rgb(var(--primary-color-rgb), 0); border: 2px solid rgb(var(--primary-color-rgb), 0.3); box-shadow: 0 0 0 0.25rem rgba(var(--primary-color-rgb), 0.1); }
.btn.light .btn-icon,
.btn-ultra.light .btn-icon { filter: none; opacity: 0.8; }

.btn-supra.light .btn-supra-show { background-color: var(--primary-color-100); box-shadow: 0px 1px 15px rgba(0, 0, 0, 0.02); }
.btn-supra.light:hover .btn-supra-show,
.btn-supra.light.active .btn-supra-show { background-color: var(--primary-color-200);  box-shadow: 0px 1px 15px rgba(0, 0, 0, 0.05); }
.btn-supra.light .btn-supra-icon { filter: none; opacity: 0.9; }
.btn-supra.light span { color: rgb(var(--primary-color-rgb), 1); /* #000 */ }


.btn.white,
.btn-ultra.white,
.btn-supra.white .btn-supra-show { background-color: rgb(var(--color-white-rgb), 0.1); color: rgb(var(--color-white-rgb), 0.85); box-shadow: none; border: 2px solid rgb(var(--color-white-rgb), 0.02); }
.btn.white:hover,
.btn-ultra.white:hover,
.btn-supra.white:hover .btn-supra-show,
.btn-supra.white2.active .btn-supra-show { background-color: rgb(var(--color-white-rgb), 0); border: 2px solid rgb(var(--color-white-rgb), 0.3); box-shadow: 0 0 0 0.25rem rgba(var(--color-white-rgb), 0.1); }
.btn.white .btn-icon,
.btn-ultra.white .btn-icon,
.btn-supra.white .btn-supra-icon { opacity: 0.8; }
.btn-supra.white span { color: var(--color-white); }



.btn.white2,
.btn-ultra.white2 { background-color: rgb(var(--color-white-rgb), 1); color: rgb(0, 0, 0, 0.85); box-shadow: none; border: 2px solid rgb(var(--color-white-rgb), 0.02); }
.btn.white2:hover,
.btn-ultra.white2:hover { background-color: rgb(var(--color-white-rgb), 1); border: 2px solid rgb(var(--color-white-rgb), 0.3); box-shadow: 0 0 0 0.5rem rgba(var(--color-white-rgb), 0.1); }
.btn.white2 .btn-icon,
.btn-ultra.white2 .btn-icon { filter: brightness(0); opacity: 0.8; }

.btn-supra.white2 .btn-supra-show { background-color: rgb(var(--color-white-rgb), 0.9); box-shadow: 0px 1px 15px rgba(0, 0, 0, 0.05); }
.btn-supra.white2:hover .btn-supra-show,
.btn-supra.white2.active .btn-supra-show { background-color: rgb(var(--color-white-rgb), 1);  box-shadow: 0px 1px 15px rgba(0, 0, 0, 0.1); }
.btn-supra.white2 .btn-supra-icon { filter: brightness(0); opacity: 0.9; }
.btn-supra.white2 span { color: var(--color-black); }



.btn.success,
.btn-ultra.success { background-color: rgb(var(--color-success-rgb), 0.8); color: var(--color-white); }
.btn.success:hover,
.btn-ultra.success:hover { background-color: rgb(var(--color-success-rgb), 1); box-shadow: 0 0 0 0.25rem rgba(var(--color-success-rgb), 0.3); }
.btn.success .btn-icon,
.btn-ultra.success .btn-icon { filter: brightness(100); }

.btn.info,
.btn-ultra.info { background-color: rgb(var( --color-info-rgb), 0.8); color: var(--color-white); }
.btn.info:hover,
.btn-ultra.info:hover { background-color: rgb(var( --color-info-rgb), 1); box-shadow: 0 0 0 0.25rem rgba(var( --color-info-rgb), 0.3); }
.btn.info .btn-icon,
.btn-ultra.info .btn-icon { filter: brightness(100); }

.btn.warning,
.btn-ultra.warning { background-color: rgb(var( --color-warning-rgb), 0.8); color: var(--color-white); text-shadow: 0 0 0 rgb(0, 0, 0, 0.2); }
.btn.warning:hover,
.btn-ultra.warning:hover { background-color: rgb(var( --color-warning-rgb), 1); box-shadow: 0 0 0 0.25rem rgba(var( --color-warning-rgb), 0.3); }
.btn.warning .btn-icon,
.btn-ultra.warning .btn-icon { filter: brightness(100); }

.btn.danger,
.btn-ultra.danger { background-color: rgb(var( --color-danger-rgb), 0.8); color: var(--color-white); }
.btn.danger:hover,
.btn-ultra.danger:hover { background-color: rgb(var( --color-danger-rgb), 1); box-shadow: 0 0 0 0.25rem rgba(var( --color-danger-rgb), 0.3); }
.btn.danger .btn-icon,
.btn-ultra.danger .btn-icon { filter: brightness(100); }



/***** Step *****/
.step {
    width: 100%; height: 0.8rem;
    background-color: rgb(var(--component-br-rgb), 0.1); border-radius: 2rem;
}
.step-bg { 
    width: 10%; height: inherit;
    background-color: rgb(var(--component-color-rgb), 1); border-radius: 2rem;
    background: linear-gradient(270deg, rgb(var(--component-color-rgb), 1), rgb(var(--component-color-effect-rgb), 0.6), rgb(var(--component-color-rgb), 1));
    background-size: 400% 400%; 
    -webkit-animation: AnimationName 4s ease infinite;
    -moz-animation: AnimationName 4s ease infinite;
    animation: AnimationName 4s ease infinite;
}



/***** Form *****/
form  {
    margin: 60px 0 0 0 !important;
}
.form{ margin: 0 0 0 0  !important; }


.form-field { 
    width: 100%; display: flex; 
    background-color: var(--color-white);
    border: solid 1px #CCC; border-radius: 10px;
    box-shadow: 0 0 10px rgba(0, 0, 0, 0.05);
}
.form-field.no-border { border: solid 1px transparent; }

.form-field:hover, .form-field.active { 
    /*box-shadow: 0 0 10px rgba(0, 0, 0, 0.1);*/
    border: solid 1px rgb(var(--component-color-rgb), 0.5);
    box-shadow: 0 0 0 0.4rem rgb(var(--component-color-rgb), 0.1);
}
.form-field span { 
    padding: 0 10px; display: flex; align-items: center; 
    background-color: rgb(var(--primary-color-rgb), 0.8); border-radius: 10px;
    color: var(--color-white); font-size: 0.85rem; font-weight: 700;
}
.form-field.color2 span  { 
    background-color: rgb(var(--secondary-color-rgb), 0.8); 
}

.form-input, .form-input-select { 
	width: 100%; float: left; padding: 0.8rem 5%;
	font-size: 1rem; line-height: 1rem; color: var(--component-text); font-weight: 600;
	background-color: transparent; border: none; outline: none; 
}
.form-input.lg, .form-input-select.lg { padding: 2.5rem 1.5rem 1.3rem 1.5rem; font-size: 1.1rem; line-height: 1.1rem; }
.form-input-select.lg { padding: 2rem 1.5rem; font-size: 1.2rem; line-height: 1.2rem; }


.form-field-floating { position: relative; }
.form-field-floating label { 
    width: 100%; position: absolute; left: 1.55rem; top: 0.85rem;
    font-size: 0.8rem; font-weight: 500; color: var(--component-text);
}
.form-field-floating label b { font-size: 0.8rem; }

/*
.form-floating {
    position: relative; display: flex; flex-direction: column-reverse;
}

.form-control, .form-select { 
    width: 100%; padding: 1.2rem 1rem; margin-top: 0.7rem;
    color: var(--component-text); font-size: 0.95rem; font-weight: 500;
    background-color: rgb(var(--component-bg-rgb), 1); border: 2px solid rgb(var(--component-br-rgb), 0.2);
    box-shadow: 0 0 0 0.4rem rgb(var(--component-br-rgb), 0.05);
    border-radius: 0.8rem; outline: 0;
}
.form-select {
    background-color: #fff;
    background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3e%3cpath fill='none' stroke='%23343a40' stroke-linecap='round' stroke-linejoin='round' stroke-width='2' d='m2 5 6 6 6-6'/%3e%3c/svg%3e");
    background-repeat: no-repeat;
    background-position: right 0.75rem center;
    background-size: 16px 12px;
    appearance: none;
}
.form-control:hover, .form-select:hover { 
    border: 2px solid rgb(var(--component-color-rgb), 0.2); box-shadow: 0 0 0 0.4rem rgb(var(--component-color-rgb), 0.1);
}
.form-control:focus {
    border: 2px solid rgb(var(--component-color-rgb), 0.5); box-shadow: 0 0 0 0.5rem rgb(var(--component-color-rgb), 0.2);
}

.form-floating label {
    color: var(--component-text); font-size: 0.95rem; font-weight: 500; font-style: italic; opacity: 0.7;
}
*/

/*.form-floating label {
    width: 100%; left: 0; top: 0.95rem; position: absolute;
    padding: 0 1rem;
}*/
/*.form-control:focus ~ .form-floating label,
.form-floating.active label,
.form-floating.active label span {
    top: 0.3rem;
    font-size: 0.8rem;
}*/



/*Custom file upload*/
input[class="file-upload1"] { display: none; }
input[id="file-upload1"] { display: none; }
input[id="file-upload2"] { display: none; }
input[id="file-upload3"] { display: none; }
input[id="file-upload4"] { display: none; }
input[id="file-upload5"] { display: none; }
input[id="file-upload6"] { display: none; }
input[id="file-upload7"] { display: none; }
input[id="file-upload8"] { display: none; }
input[id="file-upload9"] { display: none; }
input[id="file-upload10"] { display: none; }

input[id="file-upload-image1"] { display: none; }
input[id="file-upload-image2"] { display: none; }
input[id="file-upload-image3"] { display: none; }
input[id="file-upload-image4"] { display: none; }
input[id="file-upload-image5"] { display: none; }
input[id="file-upload-image6"] { display: none; }
input[id="file-upload-image7"] { display: none; }
input[id="file-upload-image8"] { display: none; }
input[id="file-upload-image9"] { display: none; }


/*
custom-upload -> file
custom-upload2 -> image
*/

.custom-upload, .custom-upload2 {
	width: 100%; height: 4.5rem; padding: 0 0; margin: 10px 0 0 0; display: block; position: relative;
	background-color: rgb(var(--color-black-rgb), 0.3); border-radius: 7px; box-shadow: 1px 1px 10px rgb(0, 0, 0, 0.15); 
	font-size: 1rem; cursor: pointer; color: #fff; overflow: hidden;
}
.custom-upload2 { background-color: rgb(var(--color-black-rgb), 0.3); }

.custom-upload:hover, .custom-upload.active {
    background-color: rgb(var(--component-color-rgb), 1);
}
.custom-upload2:hover, .custom-upload2.active {
    background-color: rgb(var(--secondary-color-rgb), 1);
}

.custom-upload-text { font-size: 0.95rem; font-weight: bold; }
.custom-upload-text-sm { font-size: 0.8rem; }
.custom-upload-icon, .custom-upload2-icon { width: var(--size-sm); filter: brightness(100); }
.custom-upload-img, .custom-upload2-img { 
    height: inherit; display: flex; align-items: center; justify-content: center;
    background-color: rgb(var( --color-white-rgb), 0.2); 
    font-size: 1.3rem; font-weight: 700;
}

.custom-upload-st1 { width: 100%; height: inherit; float: left; display: flex; align-items: center; } 
.custom-upload-st2,.custom-upload2-st2 { 
	width: 100%; height: inherit; padding: 0 0 0 0; float: left; position: absolute; display: flex; align-items: center;
	text-align: center; transition: 0.2s;
}

/**/
.basic-custom-upload {
	width: 100%; height: 14rem; padding: 1rem 2rem; display: flex; align-items: flex-end; 
	background-color: rgb(var(--color-black-rgb), 0.1); border-radius: 10px; 
}
/*.basic-custom-upload-img {
	width: 100%; margin-bottom: 20px; 
	background-color: #EEE; border-radius: 10px; box-shadow: 0px 0px 3px rgba(0, 0, 0, 0.1);
}*/


/**/
.super-custom-upload {
    width: 100%; height: auto; overflow: hidden;
    /*display: flex; align-items: center; justify-content: center; flex-direction: column;*/
    background-color: rgb(var(--component-color-rgb), 0.1); border: 2px dotted rgb(var(--component-color-rgb), 0.1); border-radius: 20px;
    color: rgb(var(--component-color-rgb), 0.8); text-align: center; transition: 0.2s ease;
}
.super-custom-upload-inner { width: 100%; height: auto; padding: 1.7rem 4rem 1.3rem 4rem; background-color: rgb(0, 0, 0, 0); transition: 0.2s ease; }
.super-custom-upload-btn { 
    width: 100%; position: relative; padding: 40%;
    margin: 1rem 0;
    /*width: 100%; display: flex; align-items: center;*/
    /*width: 10rem; height: 10rem;*/
    /*display: flex; align-items: center; justify-content: center;*/
    
    background-color: rgb(var(--component-color-rgb), 0.1);
    border: 4px dotted rgb(var(--component-color-rgb), 0.1); border-radius: 200px;
    transition: 0.2s ease; cursor: pointer;
}
.super-custom-upload-icon { width: 100%; transition: 0.15s ease; }
.super-custom-upload span { font-size: 0.9rem; }

/*
.super-custom-upload:hover {
}*/

.super-custom-upload:hover .super-custom-upload-btn {
    transform: scale(0.9);
    box-shadow: 1px 1px 30px rgb(var(--color-black-rgb), 0.05);
}
.super-custom-upload-btn:hover {
    background-color: rgb(var(--component-color-rgb), 0.15);
}
.super-custom-upload-btn:hover .super-custom-upload-icon { transform: scale(1.2); }
.super-custom-upload .super-custom-upload-inner h6 { font-size: 0.9rem; }
.super-custom-upload .super-custom-upload-inner span { font-size: 0.7rem; }

.super-custom-upload.active .super-custom-upload-inner {
    /*background-color: rgb(0, 0, 0, 0.5);*/
    background: linear-gradient(0deg, rgb(0, 0, 0, 0.5) 0%,  rgba(0, 0, 0, 0) 80%);
    /*padding: 6.5rem 5rem 1.5rem 5rem;*/
    /*padding: 1.7rem 5rem 1.3rem 5rem;*/
    color: rgb(var(--color-white-rgb), 0.8);
}
.super-custom-upload.active:hover .super-custom-upload-inner { 
    /*padding: 6rem 5rem 2rem 5rem;*/
    background: linear-gradient(0deg, rgb(0, 0, 0, 0.7) 0%,  rgba(0, 0, 0, 0.2) 80%);
}
.super-custom-upload.active .super-custom-upload-inner .super-custom-upload-btn {
    background-color: rgb(var(--secondary-color-rgb), 0.7);
    border: 2px dotted rgb(var(--color-white-rgb), 0.5);
    box-shadow: 1px 1px 30px rgb(var(--color-black-rgb), 0.05);
    transform: scale(0.6) translateY(4rem);
}
.super-custom-upload.active:hover .super-custom-upload-inner .super-custom-upload-btn { transform: scale(0.6) translateY(0); }
.super-custom-upload.active .super-custom-upload-inner .super-custom-upload-btn:hover { transform: scale(1) translateY(0); }
.super-custom-upload.active .super-custom-upload-inner .super-custom-upload-icon { filter: brightness(100);}
.super-custom-upload.active .super-custom-upload-inner h6 { font-size: 0.8rem; }
.super-custom-upload.active .super-custom-upload-inner span { font-size: 0.6rem; }



/*Custom checkbox and radio*/
.card-check {
    width: 100%; height: auto; margin-top: 0; position: relative; float: left; margin-bottom: 1rem;
	background-color: transparent;
    border: 2px solid rgb(var(--component-color-rgb), 0.2); box-shadow: 1px 1px 5px rgb(var(--component-color-rgb), 0.1); border-radius: 15px; 
	cursor: pointer; transition: 0.3s ease all; 
}
.card-check.widget { border: 2px solid transparent; }

.card-check.color { border: 2px solid rgb(var(--component-color-effect-rgb), 0.2); }
/*.card-check:hover { border: 2px solid rgb(var(--component-color-rgb), 0.2); box-shadow: 1px 1px 10px rgb(0, 0, 0, 0.15);  }*/
.card-check:hover, .card-check.active { 
	/*background-color: rgb(var(--component-color-rgb), 0.1); */  
    border: 2px solid rgb(var(--component-color-rgb), 0.6); box-shadow: 1px 1px 15px rgb(var(--component-color-rgb), 0.2);

    background: linear-gradient(270deg, rgb(var(--component-color-rgb), 0.05), rgb(var(--component-color-rgb), 0.1), rgb(var(--component-color-rgb), 0.05));
    background-size: 400% 400%; 
    -webkit-animation: AnimationName 4s ease infinite;
    -moz-animation: AnimationName 4s ease infinite;
    animation: AnimationName 4s ease infinite;
}
.card-check.color:hover, .card-check.color.active { 
    border: 2px solid rgb(var(--component-color-effect-rgb), 0.6); box-shadow: 1px 1px 15px rgb(var(--component-color-rgb), 0.2);
    background: linear-gradient(270deg, rgb(var(--component-color-effect-rgb), 0.01), rgb(var(--component-color-effect-rgb), 0.05), rgb(var(--component-color-effect-rgb), 0.01));
}




.card-check .form-check-label { width: 100%; display: flex; position: relative; padding: 1.1rem; cursor: pointer; }
.card-check .card-check-icon img { width: calc(var(--size-medium) + 0.6rem); margin: 0.2rem 0.8rem 0 0; /*filter: brightness(0); opacity: 0.3;*/ }
.card-check.color .card-check-icon img { width: calc(var(--size-medium) + 0.6rem); margin: 0.2rem 0.8rem 0 0; filter: brightness(0); opacity: 0.9; }
.card-check.single .card-check-icon img { width: calc(var(--size-medium) - 0.1rem); margin: 0rem 0.8rem 0 0; }
.card-check .card-check-text .form-check-input { position: absolute; right: 1rem; }
.card-check .card-check-text h6 { color: rgb(var(--color-black-rgb), 0.8); font-size: 0.95rem; line-height: 1.05rem; margin: 0 0 0.4rem 0; }
/*.card-check.active .card-check-text h6 { color: rgb(var(--component-color-rgb), 1);  }*/
.card-check.single .card-check-text h6 { line-height: 1.2rem; margin: 0 0 0 0; }
.card-check .card-check-text span { color: rgb(var(--color-black-rgb), 0.5); font-size: 0.8rem; line-height: 0.85rem; }

.card-check.sm .form-check-label { padding: 0.7rem; }
.card-check.sm .card-check-icon img { width: calc(var(--size-medium) + 0.2rem); margin: 0.15rem 0.6rem 0 0; }
.card-check.single.sm .card-check-icon img { width: calc(var(--size-sm) - 0.1rem); margin: 0rem 0.6rem 0 0; }
.card-check.sm .card-check-text .form-check-input { right: 0.7rem; transform: scale(0.8); }
.card-check.sm .card-check-text h6 { font-size: 0.85rem; line-height: 0.9rem; margin: 0 0 0.25rem 0;  }
.card-check.single.sm .card-check-text h6 { line-height: 1rem; margin: 0 0 0 0;  }
.card-check.sm .card-check-text span { font-size: 0.7rem; line-height: 0.75rem; }



/* ------------------------Components---------------------------------- */

/***** Table *****/
.table {
    width: 100%; text-align: left; 
    border-collapse: collapse;
    overflow: visible;
    position: relative;

    /*height: auto;
    background-color: transparent; border: 2px solid #000;*/
}
.table.separator {
    border-collapse: separate;
    border-spacing: 0 5px;
}

.table thead th {
    vertical-align: top; padding: 1.2rem 1.2rem;
    color: rgb(var(--color-black-rgb), 0.4); font-weight: 600;
}
.table thead th:hover { color: rgb(var(--color-black-rgb), 0.6); cursor: pointer; }

.table tbody tr { 
    /*padding: 25px 30px;*/
    /*border-radius: 50px;
    -webkit-box-shadow: 0px 0px 20px rgba(0, 0, 0, 0.05);
    -moz-box-shadow: 0px 0px 20px rgba(0, 0, 0, 0.05);
    box-shadow: 0px 0px 20px rgba(0, 0, 0, 0.08);
    */
    
    transition: 0.2s ease all;
}
.table tbody td  { padding: 10px 0; }
/*.table tbody tr td p, .table tbody tr td span { color: #DDD; }*/
/*.table tbody tr td { padding: 10px 0; border-bottom: 1px solid #CCC; }*/


.selection-item {  display: none; }
.selection .selection-item { width: 1%; display: table-cell; }


/*Style*/


.table.skin1 {
    border-collapse: separate;
    border-spacing: 0 1px;  background-color: rgb(var(--color-black-rgb), 0.1);
}
.table.skin1 thead tr, .table.skin1 tbody tr { background-color: var(--color-white); }
.table.skin1 tbody td { padding: 1.2rem 1.2rem; }
.table.skin1.sm tbody td, .table.skin1.sm tr th { padding: 0.9rem 0.9rem; font-size: 0.8rem; }
.table.skin1 tbody tr:hover { background-color: rgb(255, 255, 255, 0.8); }
.table.skin1 tbody tr.over-effect:hover { background-color: var(--color-white); box-shadow: 0px 1px 30px rgba(0, 0, 0, 0.1); }
.table.skin1 tbody tr .btn, .table.skin2 tbody tr .btn-ultra { opacity: 0.9; }
.table.skin1 tbody tr:hover .btn, .table.skin2 tbody tr:hover .btn-ultra { opacity: 1; }


.table.skin2 {
    border-collapse: separate;
    border-spacing: 0 2px;
}
.table.skin2 tbody tr { background-color: rgb(var(--color-black-rgb), 0.025); }
.table.skin2 tbody tr:hover { background-color: rgb(var(--color-black-rgb), 0.04); }
.table.skin2 tbody tr.over-effect:hover { background-color: var(--color-white); box-shadow: 0px 1px 30px rgba(0, 0, 0, 0.1); }
.table.skin2 thead th,
.table.skin2 tbody td { padding: 1.2rem 1.2rem; }
.table.skin2 tbody tr .btn, .table.skin2 tbody tr .btn-ultra { opacity: 0.9; }
.table.skin2 tbody tr:hover .btn, .table.skin2 tbody tr:hover .btn-ultra { opacity: 1; }

.table.skin2.color1 tbody tr { background-color: rgb(var(--primary-color-rgb), 0.03);  }
.table.skin2.color1 tbody tr:hover { background-color: rgb(var(--primary-color-rgb), 0.06); }

.table.skin2.color2 tbody tr { background-color: rgb(var(--color-info-rgb), 0.03);  }
.table.skin2.color2 tbody tr:hover { background-color: rgb(var(--color-info-rgb), 0.06); }

.table.skin2.color3 tbody tr { background-color: rgb(var(--color-warning-rgb), 0.03); }
.table.skin2.color3 tbody tr:hover { background-color: rgb(var(--color-warning-rgb), 0.06); }


.table.skin3 {
    border-collapse: separate;
    border-spacing: 0 10px; 
}
.table.skin3 tbody tr { /*background-color: rgb(var(--color-white-rgb), 1);*/ box-shadow: 0px 1px 30px rgba(0, 0, 0, 0.05); }
.table.skin3.rounded tbody tr { border-radius: 30px; }
.table.skin3 tbody tr:hover { box-shadow: 0px 1px 30px rgba(0, 0, 0, 0.1); }
.table.skin3 tbody tr.over-effect:hover { box-shadow: 0px 1px 30px rgba(0, 0, 0, 0.1); }
.table.skin3 thead th,
.table.skin3 tbody td { height: 100%; padding: 1.2rem 1.2rem; }
.table.skin3 tbody tr .btn, .table.skin3 tbody tr .btn-ultra { opacity: 0.9; }
.table.skin3 tbody tr:hover .btn, .table.skin3 tbody tr:hover .btn-ultra { opacity: 1; }

.table.skin3 tbody td { background-color: rgb(var(--color-white-rgb), 1);  }
.table.skin3.rounded tbody td:first-child { border-radius: 30px 0 0 30px; }
.table.skin3.rounded tbody td:last-child { border-radius: 0 30px 30px 0; }


.over-effect {
	outline-style: solid; outline-color: rgba(var(--component-color-effect-rgb), 0.2); outline-width: 0;
	transition: 0.15s ease all;
}
.over-effect:hover {
	outline-width: 3px;
	animation: animation-content-outline 1s infinite;
}
.over-effect.active {
	background: linear-gradient(90deg, rgb(var(--component-color-effect-rgb), 0.03) 0%,  rgba(var(--component-color-effect-rgb), 0.03) 100%);
    outline-width: 3px;
	animation: animation-content-outline 0.5s forwards; 
}

.over-effect-primary {
	outline-style: solid; outline-color: rgba(var(--primary-color-rgb), 0.1); outline-width: 0;
	transition: 0.15s ease all;
}
.over-effect-primary:hover {
	outline-width: 3px;
	animation: animation-content-outline 1s infinite;
}
.over-effect-primary.active {
	background: linear-gradient(90deg, rgb(var(--primary-color-rgb), 0.03) 0%,  rgba(var(--primary-color-rgb), 0.03) 100%);
    outline-width: 3px;
	animation: animation-content-outline 0.5s forwards; 
}




/*Circular stat*/
/* .flex-wrapper { display: flex; flex-flow: row nowrap; } */
.single-chart {
    width: 100%; position: relative; display: flex; align-items: center;
    justify-content: space-around ;
}

.chart-icon {
    width: 50%; position: absolute; padding: 1.3rem;
    background-color: var(--color-white);
    border-radius: 100px;
    box-shadow: 1px 1px 30px rgb(0, 0, 0, 0.1);
}

.circular-chart {
    display: block;
    margin: 10px auto;
    max-width: 90%;
    /*max-height: 250px;*/
}
.circle-bg {
    fill: none;
    stroke: rgb(0, 0, 0, 0.02);
    stroke-width: 2.8;
}
.circle-bg-shadow {
    fill: none;
    stroke: rgb(0, 0, 0, 0.03);
    stroke-width: 3; 
    
}
.circle-bg.white { stroke: rgb(255, 255, 255, 0.1); }
.circle {
    fill: none;
    stroke-width: 2.8;
    stroke-linecap: round;
    animation: progress 1s ease-out forwards;
}
@keyframes progress {
    0% {
        stroke-dasharray: 0 100;
    }
}
.circular-chart.statorange .circle { stroke: #ff9f00; }
.circular-chart.statgreen .circle { stroke: #01c2a8; }
.circular-chart.statblue .circle { stroke: #5865f2; }
.circular-chart.statred .circle { stroke: #FF2742; }
.circular-chart.statpurple .circle { stroke: #9e27ff; }
.percentage { fill: rgb(var(--color-black-rgb), 0.9); font-size: 0.5em; text-anchor: middle; }
.percentage.white { fill: rgb(var(--color-white-rgb), 0.9); font-size: 0.5em; text-anchor: middle; }


/* ---------------------------------------------------------- */
/***** Responsive *****/
@media screen and (max-width: 600px){

}

@media screen and (min-width: 600px){

}

@media screen and (min-width: 992px){

}

@media screen and (min-width: 1200px){

}

@media screen and (min-width: 1300px){

}

@media screen and (min-width: 1500px){


}

@media screen and (min-width: 1600px){

}

@media screen and (min-width: 1800px){

}

@media screen and (min-width: 2300px){

}

@media screen and (min-width: 3200px){

}