/* 
*
*
*   ADMIN PAGES CSS STYLE START
*
*
*/

body, h1, h2, h3, h4, h5{
  font-family: 'Manrope-Regular' !important;
}

.bg-green-100{
    background-color: #EBF7F7 !important;
}

ul.top-navbar{
    background: white;
    border-radius: 50px;
    border: #e2e3e4 solid 1px;
}

ul.top-navbar li a {
    font-size: 25px !important;
}
.bi.bi-chevron-down{
    font-size : 15px !important;
}
a.language span{
    font-size: 12px;
}
.search-control-input input{
    border: 1px solid #07A143 !important;
    border-radius: 50px !important;
    padding-left: 15px;
    background-color: #ffffff !important;
    color: #000000 !important;
}
.search-control-input span{
    padding-right: 10px !important;

}
.btn-add-new{
    background-color: #14452F;
    border: none !important;
    color: #ffffff;
    display: grid;
    align-content: center;
    justify-content: center;
}

.bg-white-light{
    background: white;
}
.border-gray{
    border: #e6e8ef 1px solid !important;
}
.navbar-brand .text{
    color: #909090 !important;
    font-size: 22px;
    line-height: 20px;
}
.aside-title{
    text-wrap: wrap;
}
.gray-text-dark{
    color: #3D414B !important;
}
.green-text-dark{
    color: #107C41 !important;
}
.green-text-background{
    background-color: #E7FFED;
}

.custom-height-sidebar{
    margin: 15px; border-radius: 7px; height: calc(100% - 30px);
    box-shadow: 0 0 12px 0px rgb(0 0 0 / 20%);
}
.container-fluid-custom{
    width: calc(100% - 50px); margin: 0 auto; min-height: 100vh; padding-top: 70px;
}

@media (max-width: 1200px){
    .custom-height-sidebar{
        margin: 0px 0px 0px -7px!important; border-radius: 7px; height: 100%;
    }
}

@media (max-width: 991px ) {
    .admin-navbar ul{
        flex-direction: row !important;
    }
    
}


.menu-ecole{
    background: white;
    box-shadow: 0px 3px 4px 0px #c4d3d3;
    margin-bottom: 3%;
}

.menu-ecole .brand-logo img{
    height: 50px !important;
}

.menu-ecole  .ecole-title h1{
    font-size: 23px !important;
    color: #000 !important;
}

.menu-ecole  .ecole-title span{   
    font-size: 23px;
    color: #a8a8a8;
}

.menu-ecole  .grey-text{
    color: #8B8F92  !important;
}

.menu-ecole  .grey-text i{
    color : black !important;
    height: 40px;
    border: 1px solid #1AB846;
    width: 40px;
    border-radius: 9px;
    display: grid;
    align-content: center;
}

.menu-ecole  .grey-bg-1{
    background-color: #D6D9E4;
}

.menu-ecole  button.grey-bg-1{
    color: #000 !important;
}

.menu-ecole  .nav-item a{
    color: #838A9C !important;
}

.menu-ecole  .nav-item.active a{
    background-color: #E7FFED;    
}

.menu-ecole  .nav-item.active .nav-link:after{
    border-bottom: #000 solid 2px !important;
}

.menu-ecole  .nav-item.active a span{
    color: #000 !important;
}

.school-informations .navbar-nav{
    flex-wrap: wrap !important;
}



.school-informations .navbar-nav{
    flex-wrap: wrap !important;
}

@media screen and (max-width: 768px) {
    .school-informations .navbar-nav .nav-item{
        margin-bottom: 2% !important;
        margin-left: 0 !important;
    }   

    .brand-logo-mini img{
        height: 70px !important;
        width: auto !important;
    }
    .menu-ecole{
        padding-top: 18%;
    }
}

@media screen and (min-width: 768px) and (max-width: 991px) { 
    .school-informations .navbar-nav .nav-item:last-child{
        margin-top: 2% !important;
    } 
    .brand-logo-mini img{
        height: 70px !important;
        width: auto !important;
    }
    .menu-ecole{
        padding-top: 5%;
    }
}

.bg-green-dark-v{
    background:#14452F !important;
    border: 1px solid #14452F !important
}

.bg-green-light-v{
    background-color: #E7FFED !important;
}

.ecole-sidebar-item .ecole-sidebar-icon{
    color : #D6D9E4 !important;
    border: solid 1px #D6D9E4 !important;
}

.ecole-sidebar-item .ecole-sidebar-menu{
    border: solid 1px #D6D9E4 !important;
}

.active-ecole-sidebar-item  .ecole-sidebar-icon{
    color : #FFFFFF !important;
    border: solid 1px #4FCE5D !important;
    background-color: #4FCE5D !important;
} 
.active-ecole-sidebar-item span{
  background-color: var(--green-dark1) !important;
  color: #fff !important;
}

.ecole-sidebar-item span{
  background-color: #E7FFED;
  color: #107C41;
  border: solid 1px #D6D9E4 !important;
}

.green-light-text{
    color : #07A143 !important;
}
.ecole-go-back{
    color: #07A143 !important;
    font-weight: 700;
    font-size: larger;
}
.ecole-session{
    background-color: #001736;
    border-radius: 15px;
    color: white;
    align-content: center;

}

.ecole-session select {
  background-color: #001736;
  border: none;
  color: #4FCE5D ;
}


.ecole-session span{
    color: #4FCE5D !important;
}
.ecole-session i{
    font-size: 10px !important;
}
.ecole-nav div{
    font-weight: bolder;
}
.ecole-nav button{
    background-color: #E7FFED !important;
    color: #07A143;
    border: 1px solid #07A143;
    font-weight: bolder;
    border-radius: 5px;
}

.horizontal-menu .top-navbar .navbar-brand-wrapper .navbar-brand img{
    height: 110px!important;
    width: 100% !important;
    object-fit: contain;
}

@media (max-width: 991px) {
    .horizontal-menu {
        position: relative!important;
        z-index: 10!important;
        top: 0;
        left: 0;
        right: 0;
    }
}

.horizontal-menu .bottom-navbar .page-navigation > .nav-item > .nav-link{
    text-align: left!important;
    padding: 20px 17px 20px 10px!important;
}

.custom-menu-notif{
    border-radius: 5px!important;
    background: #02162E!important;
    box-shadow: 0px 0px 8px 2px rgba(0, 0, 0, 0.70)!important;
}


:root{--blue-90:#11181d;--blue-80:#1f303e;--blue-70:#274863;--blue-60:#2c608a;--blue-50:#2378c3;--blue-40:#4f97d1;--blue-30:#73b3e7;--blue-20:#aacdec;--blue-10:#dbe8fb;--blue-5:#eff6fb;--blue-cool-90:#0f191c;--blue-cool-80:#14333d;--blue-cool-70:#224a58;--blue-cool-60:#2e6276;--blue-cool-50:#3a7d95;--blue-cool-40:#6499af;--blue-cool-30:#82b4c9;--blue-cool-20:#adcfdc;--blue-cool-10:#dae9ee;--blue-cool-5:#e7f2f5;--blue-warm-90:#13171f;--blue-warm-80:#252f3e;--blue-warm-70:#2f4668;--blue-warm-60:#345d96;--blue-warm-50:#4a77b4;--blue-warm-40:#7292c7;--blue-warm-30:#98afd2;--blue-warm-20:#c5d4eb;--blue-warm-10:#e1e7f1;--blue-warm-5:#ecf1f7;--blue-vivid-80:#112f4e;--blue-vivid-70:#0b4778;--blue-vivid-60:#005ea2;--blue-vivid-50:#0076d6;--blue-vivid-40:#2491ff;--blue-vivid-30:#58b4ff;--blue-vivid-20:#a1d3ff;--blue-vivid-10:#cfe8ff;--blue-vivid-5:#e8f5ff;--blue-cool-vivid-80:#002d3f;--blue-cool-vivid-70:#074b69;--blue-cool-vivid-60:#07648d;--blue-cool-vivid-50:#0d7ea2;--blue-cool-vivid-40:#28a0cb;--blue-cool-vivid-30:#59b9de;--blue-cool-vivid-20:#97d4ea;--blue-cool-vivid-10:#c3ebfa;--blue-cool-vivid-5:#e1f3f8;--blue-warm-vivid-90:#071d41;--blue-warm-vivid-80:#0c326f;--blue-warm-vivid-70:#1351b4;--blue-warm-vivid-60:#155bcb;--blue-warm-vivid-50:#2670e8;--blue-warm-vivid-40:#5992ed;--blue-warm-vivid-30:#81aefc;--blue-warm-vivid-20:#adcdff;--blue-warm-vivid-10:#d4e5ff;--blue-warm-vivid-5:#edf5ff;--blue-90-rgb:17,24,29;--blue-80-rgb:31,48,62;--blue-70-rgb:39,72,99;--blue-60-rgb:44,96,138;--blue-50-rgb:35,120,195;--blue-40-rgb:79,151,209;--blue-30-rgb:115,179,231;--blue-20-rgb:170,205,236;--blue-10-rgb:219,232,251;--blue-5-rgb:239,246,251;--blue-cool-90-rgb:15,25,28;--blue-cool-80-rgb:20,51,61;--blue-cool-70-rgb:34,74,88;--blue-cool-60-rgb:46,98,118;--blue-cool-50-rgb:58,125,149;--blue-cool-40-rgb:100,153,175;--blue-cool-30-rgb:130,180,201;--blue-cool-20-rgb:173,207,220;--blue-cool-10-rgb:218,233,238;--blue-cool-5-rgb:231,242,245;--blue-warm-90-rgb:19,23,31;--blue-warm-80-rgb:37,47,62;--blue-warm-70-rgb:47,70,104;--blue-warm-60-rgb:52,93,150;--blue-warm-50-rgb:74,119,180;--blue-warm-40-rgb:114,146,199;--blue-warm-30-rgb:152,175,210;--blue-warm-20-rgb:197,212,235;--blue-warm-10-rgb:225,231,241;--blue-warm-5-rgb:236,241,247;--blue-vivid-80-rgb:17,47,78;--blue-vivid-70-rgb:11,71,120;--blue-vivid-60-rgb:0,94,162;--blue-vivid-50-rgb:0,118,214;--blue-vivid-40-rgb:36,145,255;--blue-vivid-30-rgb:88,180,255;--blue-vivid-20-rgb:161,211,255;--blue-vivid-10-rgb:207,232,255;--blue-vivid-5-rgb:232,245,255;--blue-cool-vivid-80-rgb:0,45,63;--blue-cool-vivid-70-rgb:7,75,105;--blue-cool-vivid-60-rgb:7,100,141;--blue-cool-vivid-50-rgb:13,126,162;--blue-cool-vivid-40-rgb:40,160,203;--blue-cool-vivid-30-rgb:89,185,222;--blue-cool-vivid-20-rgb:151,212,234;--blue-cool-vivid-10-rgb:195,235,250;--blue-cool-vivid-5-rgb:225,243,248;--blue-warm-vivid-90-rgb:7,29,65;--blue-warm-vivid-80-rgb:12,50,111;--blue-warm-vivid-70-rgb:19,81,180;--blue-warm-vivid-60-rgb:21,91,203;--blue-warm-vivid-50-rgb:38,112,232;--blue-warm-vivid-40-rgb:89,146,237;--blue-warm-vivid-30-rgb:129,174,252;--blue-warm-vivid-20-rgb:173,205,255;--blue-warm-vivid-10-rgb:212,229,255;--blue-warm-vivid-5-rgb:237,245,255;--cyan-90:#111819;--cyan-80:#203133;--cyan-70:#2c4a4e;--cyan-60:#2a646d;--cyan-50:#168092;--cyan-40:#449dac;--cyan-30:#5dc0d1;--cyan-20:#99deea;--cyan-10:#ccecf2;--cyan-5:#e7f6f8;--cyan-90-rgb:17,24,25;--cyan-80-rgb:32,49,51;--cyan-70-rgb:44,74,78;--cyan-60-rgb:42,100,109;--cyan-50-rgb:22,128,146;--cyan-40-rgb:68,157,172;--cyan-30-rgb:93,192,209;--cyan-20-rgb:153,222,234;--cyan-10-rgb:204,236,242;--cyan-5-rgb:231,246,248;--cyan-vivid-80:#093b44;--cyan-vivid-70:#0e4f5c;--cyan-vivid-60:#00687d;--cyan-vivid-50:#0081a1;--cyan-vivid-40:#009ec1;--cyan-vivid-30:#00bde3;--cyan-vivid-20:#52daf2;--cyan-vivid-10:#a8f2ff;--cyan-vivid-5:#e5faff;--gold-90:#191714;--gold-80:#322d26;--gold-70:#4d4438;--gold-60:#6b5947;--gold-50:#8e704f;--gold-40:#ad8b65;--gold-30:#c7a97b;--gold-20:#dec69a;--gold-10:#f1e5cd;--gold-5:#f5f0e6;--gold-vivid-80:#3b2b15;--gold-vivid-70:#5c410a;--gold-vivid-60:#7a591a;--gold-vivid-50:#936f38;--gold-vivid-40:#c2850c;--gold-vivid-30:#e5a000;--gold-vivid-20:#ffbe2e;--gold-vivid-10:#ffe396;--gold-vivid-5:#fef0c8;--gold-90-rgb:25,23,20;--gold-80-rgb:50,45,38;--gold-70-rgb:77,68,56;--gold-60-rgb:107,89,71;--gold-50-rgb:142,112,79;--gold-40-rgb:173,139,101;--gold-30-rgb:199,169,123;--gold-20-rgb:222,198,154;--gold-10-rgb:241,229,205;--gold-5-rgb:245,240,230;--gold-vivid-80-rgb:59,43,21;--gold-vivid-70-rgb:92,65,10;--gold-vivid-60-rgb:122,89,26;--gold-vivid-50-rgb:147,111,56;--gold-vivid-40-rgb:194,133,12;--gold-vivid-30-rgb:229,160,0;--gold-vivid-20-rgb:255,190,46;--gold-vivid-10-rgb:255,227,150;--gold-vivid-5-rgb:254,240,200;--gray-90:#1b1b1b;--gray-80:#333;--gray-70:#555;--gray-60:#636363;--gray-50:#757575;--gray-40:#888;--gray-30:#adadad;--gray-20:#ccc;--gray-10:#e6e6e6;--gray-5:#f0f0f0;--gray-4:#f3f3f3;--gray-3:#f6f6f6;--gray-2:#f8f8f8;--gray-1:#fcfcfc;--gray-cool-90:#1c1d1f;--gray-cool-80:#2d2e2f;--gray-cool-70:#3d4551;--gray-cool-60:#565c65;--gray-cool-50:#71767a;--gray-cool-40:#8d9297;--gray-cool-30:#a9aeb1;--gray-cool-20:#c6cace;--gray-cool-10:#dfe1e2;--gray-cool-5:#edeff0;--gray-cool-4:#f1f3f6;--gray-cool-3:#f5f6f7;--gray-cool-2:#f7f9fa;--gray-cool-1:#fbfcfd;--gray-warm-90:#171716;--gray-warm-80:#2e2e2a;--gray-warm-70:#454540;--gray-warm-60:#5d5d52;--gray-warm-50:#76766a;--gray-warm-40:#929285;--gray-warm-30:#afaea2;--gray-warm-20:#cac9c0;--gray-warm-10:#e6e6e2;--gray-warm-5:#f0f0ec;--gray-warm-4:#f5f5f0;--gray-warm-3:#f6f6f2;--gray-warm-2:#f9f9f7;--gray-warm-1:#fcfcfb;--gray-90-rgb:27,27,27;--gray-80-rgb:51,51,51;--gray-70-rgb:85,85,85;--gray-60-rgb:99,99,99;--gray-50-rgb:117,117,117;--gray-40-rgb:136,136,136;--gray-30-rgb:173,173,173;--gray-20-rgb:204,204,204;--gray-10-rgb:230,230,230;--gray-5-rgb:240,240,240;--gray-4-rgb:243,243,243;--gray-3-rgb:246,246,246;--gray-2-rgb:248,248,248;--gray-1-rgb:252,252,252;--gray-cool-90-rgb:28,29,31;--gray-cool-80-rgb:45,46,47;--gray-cool-70-rgb:61,69,81;--gray-cool-60-rgb:86,92,101;--gray-cool-50-rgb:113,118,122;--gray-cool-40-rgb:141,146,151;--gray-cool-30-rgb:169,174,177;--gray-cool-20-rgb:198,202,206;--gray-cool-10-rgb:223,225,226;--gray-cool-5-rgb:237,239,240;--gray-cool-4-rgb:241,243,246;--gray-cool-3-rgb:245,246,247;--gray-cool-2-rgb:247,249,250;--gray-cool-1-rgb:251,252,253;--gray-warm-90-rgb:23,23,22;--gray-warm-80-rgb:46,46,42;--gray-warm-70-rgb:69,69,64;--gray-warm-60-rgb:93,93,82;--gray-warm-50-rgb:118,118,106;--gray-warm-40-rgb:146,146,133;--gray-warm-30-rgb:175,174,162;--gray-warm-20-rgb:202,201,192;--gray-warm-10-rgb:230,230,226;--gray-warm-5-rgb:240,240,236;--gray-warm-4-rgb:245,245,240;--gray-warm-3-rgb:246,246,242;--gray-warm-2-rgb:249,249,247;--gray-warm-1-rgb:252,252,251;--green-90:#161814;--green-80:#293021;--green-70:#3c4a29;--green-60:#4c6424;--green-50:#607f35;--green-40:#7d9b4e;--green-30:#9bb672;--green-20:#b8d293;--green-10:#dfeacd;--green-5:#eaf4dd;--green-cool-90:#1a1f1a;--green-cool-80:#28312a;--green-cool-70:#37493b;--green-cool-60:#446443;--green-cool-50:#4d8055;--green-cool-40:#5e9f69;--green-cool-30:#86b98e;--green-cool-20:#b4d0b9;--green-cool-10:#dbebde;--green-cool-5:#ecf3ec;--green-warm-90:#171712;--green-warm-80:#2d2f21;--green-warm-70:#45472f;--green-warm-60:#5a5f38;--green-warm-50:#6f7a41;--green-warm-40:#8a984b;--green-warm-30:#a6b557;--green-warm-20:#cbd17a;--green-warm-10:#e7eab7;--green-warm-5:#f1f4d7;--green-vivid-80:#243413;--green-vivid-70:#2f4a0b;--green-vivid-60:#466c04;--green-vivid-50:#538200;--green-vivid-40:#719f2a;--green-vivid-30:#7fb135;--green-vivid-20:#98d035;--green-vivid-10:#c5ee93;--green-vivid-5:#ddf9c7;--green-cool-vivid-80:#19311e;--green-cool-vivid-70:#154c21;--green-cool-vivid-60:#216e1f;--green-cool-vivid-50:#168821;--green-cool-vivid-40:#00a91c;--green-cool-vivid-30:#21c834;--green-cool-vivid-20:#70e17b;--green-cool-vivid-10:#b7f5bd;--green-cool-vivid-5:#e3f5e1;--green-warm-vivid-80:#38380b;--green-warm-vivid-70:#4b4e10;--green-warm-vivid-60:#5a6613;--green-warm-vivid-50:#6a7d00;--green-warm-vivid-40:#7e9c1d;--green-warm-vivid-30:#a3b72c;--green-warm-vivid-20:#c5d30a;--green-warm-vivid-10:#e7f434;--green-warm-vivid-5:#f5fbc1;--green-90-rgb:22,24,20;--green-80-rgb:41,48,33;--green-70-rgb:60,74,41;--green-60-rgb:76,100,36;--green-50-rgb:96,127,53;--green-40-rgb:125,155,78;--green-30-rgb:155,182,114;--green-20-rgb:184,210,147;--green-10-rgb:223,234,205;--green-5-rgb:234,244,221;--green-cool-90-rgb:26,31,26;--green-cool-80-rgb:40,49,42;--green-cool-70-rgb:55,73,59;--green-cool-60-rgb:68,100,67;--green-cool-50-rgb:77,128,85;--green-cool-40-rgb:94,159,105;--green-cool-30-rgb:134,185,142;--green-cool-20-rgb:180,208,185;--green-cool-10-rgb:219,235,222;--green-cool-5-rgb:236,243,236;--green-warm-90-rgb:23,23,18;--green-warm-80-rgb:45,47,33;--green-warm-70-rgb:69,71,47;--green-warm-60-rgb:90,95,56;--green-warm-50-rgb:111,122,65;--green-warm-40-rgb:138,152,75;--green-warm-30-rgb:166,181,87;--green-warm-20-rgb:203,209,122;--green-warm-10-rgb:231,234,183;--green-warm-5-rgb:241,244,215;--green-vivid-80-rgb:36,52,19;--green-vivid-70-rgb:47,74,11;--green-vivid-60-rgb:70,108,4;--green-vivid-50-rgb:83,130,0;--green-vivid-40-rgb:113,159,42;--green-vivid-30-rgb:127,177,53;--green-vivid-20-rgb:152,208,53;--green-vivid-10-rgb:197,238,147;--green-vivid-5-rgb:221,249,199;--green-cool-vivid-80-rgb:25,49,30;--green-cool-vivid-70-rgb:21,76,33;--green-cool-vivid-60-rgb:33,110,31;--green-cool-vivid-50-rgb:22,136,33;--green-cool-vivid-40-rgb:0,169,28;--green-cool-vivid-30-rgb:33,200,52;--green-cool-vivid-20-rgb:112,225,123;--green-cool-vivid-10-rgb:183,245,189;--green-cool-vivid-5-rgb:227,245,225;--green-warm-vivid-80-rgb:56,56,11;--green-warm-vivid-70-rgb:75,78,16;--green-warm-vivid-60-rgb:90,102,19;--green-warm-vivid-50-rgb:106,125,0;--green-warm-vivid-40-rgb:126,156,29;--green-warm-vivid-30-rgb:163,183,44;--green-warm-vivid-20-rgb:197,211,10;--green-warm-vivid-10-rgb:231,244,52;--green-warm-vivid-5-rgb:245,251,193;--indigo-90:#16171f;--indigo-80:#2b2c40;--indigo-70:#3d4076;--indigo-60:#4d52af;--indigo-50:#676cc8;--indigo-40:#8889db;--indigo-30:#a5a8eb;--indigo-20:#c5c5f3;--indigo-10:#e5e4fa;--indigo-5:#efeff8;--indigo-cool-90:#151622;--indigo-cool-80:#292d42;--indigo-cool-70:#374274;--indigo-cool-60:#3f57a6;--indigo-cool-50:#496fd8;--indigo-cool-40:#6b8ee8;--indigo-cool-30:#96abee;--indigo-cool-20:#bbc8f5;--indigo-cool-10:#e1e6f9;--indigo-cool-5:#eef0f9;--indigo-warm-90:#18161d;--indigo-warm-80:#2e2c40;--indigo-warm-70:#453c7b;--indigo-warm-60:#5e519e;--indigo-warm-50:#7665d1;--indigo-warm-40:#9287d8;--indigo-warm-30:#afa5e8;--indigo-warm-20:#cbc4f2;--indigo-warm-10:#e7e3fa;--indigo-warm-5:#f1eff7;--indigo-vivid-80:#212463;--indigo-vivid-70:#3333a3;--indigo-vivid-60:#4a50c4;--indigo-vivid-50:#656bd7;--indigo-vivid-40:#8289ff;--indigo-vivid-30:#a3a7fa;--indigo-vivid-20:#ccceff;--indigo-vivid-10:#e0e0ff;--indigo-vivid-5:#f0f0ff;--indigo-cool-vivid-80:#1b2b85;--indigo-cool-vivid-70:#222fbf;--indigo-cool-vivid-60:#3e4ded;--indigo-cool-vivid-50:#4866ff;--indigo-cool-vivid-40:#628ef4;--indigo-cool-vivid-30:#94adff;--indigo-cool-vivid-20:#b8c8ff;--indigo-cool-vivid-10:#dee5ff;--indigo-cool-vivid-5:#edf0ff;--indigo-warm-vivid-80:#261f5b;--indigo-warm-vivid-70:#3d2c9d;--indigo-warm-vivid-60:#5942d2;--indigo-warm-vivid-50:#745fe9;--indigo-warm-vivid-40:#967efb;--indigo-warm-vivid-30:#b69fff;--indigo-warm-vivid-20:#cfc4fd;--indigo-warm-vivid-10:#e4deff;--indigo-warm-vivid-5:#f5f2ff;--indigo-90-rgb:22,23,31;--indigo-80-rgb:43,44,64;--indigo-70-rgb:61,64,118;--indigo-60-rgb:77,82,175;--indigo-50-rgb:103,108,200;--indigo-40-rgb:136,137,219;--indigo-30-rgb:165,168,235;--indigo-20-rgb:197,197,243;--indigo-10-rgb:229,228,250;--indigo-5-rgb:239,239,248;--indigo-cool-90-rgb:21,22,34;--indigo-cool-80-rgb:41,45,66;--indigo-cool-70-rgb:55,66,116;--indigo-cool-60-rgb:63,87,166;--indigo-cool-50-rgb:73,111,216;--indigo-cool-40-rgb:107,142,232;--indigo-cool-30-rgb:150,171,238;--indigo-cool-20-rgb:187,200,245;--indigo-cool-10-rgb:225,230,249;--indigo-cool-5-rgb:238,240,249;--indigo-warm-90-rgb:24,22,29;--indigo-warm-80-rgb:46,44,64;--indigo-warm-70-rgb:69,60,123;--indigo-warm-60-rgb:94,81,158;--indigo-warm-50-rgb:118,101,209;--indigo-warm-40-rgb:146,135,216;--indigo-warm-30-rgb:175,165,232;--indigo-warm-20-rgb:203,196,242;--indigo-warm-10-rgb:231,227,250;--indigo-warm-5-rgb:241,239,247;--indigo-vivid-80-rgb:33,36,99;--indigo-vivid-70-rgb:51,51,163;--indigo-vivid-60-rgb:74,80,196;--indigo-vivid-50-rgb:101,107,215;--indigo-vivid-40-rgb:130,137,255;--indigo-vivid-30-rgb:163,167,250;--indigo-vivid-20-rgb:204,206,255;--indigo-vivid-10-rgb:224,224,255;--indigo-vivid-5-rgb:240,240,255;--indigo-cool-vivid-80-rgb:27,43,133;--indigo-cool-vivid-70-rgb:34,47,191;--indigo-cool-vivid-60-rgb:62,77,237;--indigo-cool-vivid-50-rgb:72,102,255;--indigo-cool-vivid-40-rgb:98,142,244;--indigo-cool-vivid-30-rgb:148,173,255;--indigo-cool-vivid-20-rgb:184,200,255;--indigo-cool-vivid-10-rgb:222,229,255;--indigo-cool-vivid-5-rgb:237,240,255;--indigo-warm-vivid-80-rgb:38,31,91;--indigo-warm-vivid-70-rgb:61,44,157;--indigo-warm-vivid-60-rgb:89,66,210;--indigo-warm-vivid-50-rgb:116,95,233;--indigo-warm-vivid-40-rgb:150,126,251;--indigo-warm-vivid-30-rgb:182,159,255;--indigo-warm-vivid-20-rgb:207,196,253;--indigo-warm-vivid-10-rgb:228,222,255;--indigo-warm-vivid-5-rgb:245,242,255;--magenta-90:#1b1617;--magenta-80:#402731;--magenta-70:#66364b;--magenta-60:#8b4566;--magenta-50:#c84281;--magenta-40:#e0699f;--magenta-30:#e895b3;--magenta-20:#f0bbcc;--magenta-10:#f6e1e8;--magenta-5:#f9f0f2;--magenta-vivid-80:#4f172e;--magenta-vivid-70:#731f44;--magenta-vivid-60:#ab2165;--magenta-vivid-50:#d72d79;--magenta-vivid-40:#fd4496;--magenta-vivid-30:#ff87b2;--magenta-vivid-20:#ffb4cf;--magenta-vivid-10:#ffddea;--magenta-vivid-5:#fff2f5;--magenta-90-rgb:27,22,23;--magenta-80-rgb:64,39,49;--magenta-70-rgb:102,54,75;--magenta-60-rgb:139,69,102;--magenta-50-rgb:200,66,129;--magenta-40-rgb:224,105,159;--magenta-30-rgb:232,149,179;--magenta-20-rgb:240,187,204;--magenta-10-rgb:246,225,232;--magenta-5-rgb:249,240,242;--magenta-vivid-80-rgb:79,23,46;--magenta-vivid-70-rgb:115,31,68;--magenta-vivid-60-rgb:171,33,101;--magenta-vivid-50-rgb:215,45,121;--magenta-vivid-40-rgb:253,68,150;--magenta-vivid-30-rgb:255,135,178;--magenta-vivid-20-rgb:255,180,207;--magenta-vivid-10-rgb:255,221,234;--magenta-vivid-5-rgb:255,242,245;--mint-90:#0d1a12;--mint-80:#193324;--mint-70:#204e34;--mint-60:#286846;--mint-50:#2e8367;--mint-40:#34a37e;--mint-30:#5abf95;--mint-20:#92d9bb;--mint-10:#c7efe2;--mint-5:#dbf6ed;--mint-cool-90:#111818;--mint-cool-80:#203131;--mint-cool-70:#2a4b45;--mint-cool-60:#376462;--mint-cool-50:#40807e;--mint-cool-40:#4f9e99;--mint-cool-30:#6fbab3;--mint-cool-20:#9bd4cf;--mint-cool-10:#c4eeeb;--mint-cool-5:#e0f7f6;--mint-vivid-80:#0d351e;--mint-vivid-70:#0c4e29;--mint-vivid-60:#146947;--mint-vivid-50:#008659;--mint-vivid-40:#00a871;--mint-vivid-30:#04c585;--mint-vivid-20:#0ceda6;--mint-vivid-10:#83fcd4;--mint-vivid-5:#c9fbeb;--mint-cool-vivid-80:#123131;--mint-cool-vivid-70:#0b4b3f;--mint-cool-vivid-60:#0f6460;--mint-cool-vivid-50:#008480;--mint-cool-vivid-40:#36a191;--mint-cool-vivid-30:#1dc2ae;--mint-cool-vivid-20:#40e0d0;--mint-cool-vivid-10:#7efbe1;--mint-cool-vivid-5:#d5fbf3;--mint-90-rgb:13,26,18;--mint-80-rgb:25,51,36;--mint-70-rgb:32,78,52;--mint-60-rgb:40,104,70;--mint-50-rgb:46,131,103;--mint-40-rgb:52,163,126;--mint-30-rgb:90,191,149;--mint-20-rgb:146,217,187;--mint-10-rgb:199,239,226;--mint-5-rgb:219,246,237;--mint-cool-90-rgb:17,24,24;--mint-cool-80-rgb:32,49,49;--mint-cool-70-rgb:42,75,69;--mint-cool-60-rgb:55,100,98;--mint-cool-50-rgb:64,128,126;--mint-cool-40-rgb:79,158,153;--mint-cool-30-rgb:111,186,179;--mint-cool-20-rgb:155,212,207;--mint-cool-10-rgb:196,238,235;--mint-cool-5-rgb:224,247,246;--mint-vivid-80-rgb:13,53,30;--mint-vivid-70-rgb:12,78,41;--mint-vivid-60-rgb:20,105,71;--mint-vivid-50-rgb:0,134,89;--mint-vivid-40-rgb:0,168,113;--mint-vivid-30-rgb:4,197,133;--mint-vivid-20-rgb:12,237,166;--mint-vivid-10-rgb:131,252,212;--mint-vivid-5-rgb:201,251,235;--mint-cool-vivid-80-rgb:18,49,49;--mint-cool-vivid-70-rgb:11,75,63;--mint-cool-vivid-60-rgb:15,100,96;--mint-cool-vivid-50-rgb:0,132,128;--mint-cool-vivid-40-rgb:54,161,145;--mint-cool-vivid-30-rgb:29,194,174;--mint-cool-vivid-20-rgb:64,224,208;--mint-cool-vivid-10-rgb:126,251,225;--mint-cool-vivid-5-rgb:213,251,243;--orange-90:#1b1614;--orange-80:#332d27;--orange-70:#524236;--orange-60:#775540;--orange-50:#a26739;--orange-40:#dd7533;--orange-30:#f09860;--orange-20:#f3bf90;--orange-10:#f2e4d4;--orange-5:#f6efe9;--orange-warm-90:#1c1615;--orange-warm-80:#3d2925;--orange-warm-70:#633a32;--orange-warm-60:#914734;--orange-warm-50:#bd5727;--orange-warm-40:#e17141;--orange-warm-30:#f3966d;--orange-warm-20:#f7bca2;--orange-warm-10:#fbe0d0;--orange-warm-5:#faeee5;--orange-vivid-80:#352313;--orange-vivid-70:#5f3617;--orange-vivid-60:#8c471c;--orange-vivid-50:#c05600;--orange-vivid-40:#e66f0e;--orange-vivid-30:#ff8c00;--orange-vivid-20:#ffbc78;--orange-vivid-10:#fce2c5;--orange-vivid-5:#fdf5e6;--orange-warm-vivid-80:#3d231d;--orange-warm-vivid-70:#782312;--orange-warm-vivid-60:#a72f10;--orange-warm-vivid-50:#cf4900;--orange-warm-vivid-40:#ff580a;--orange-warm-vivid-30:#fc906d;--orange-warm-vivid-20:#fbbaa7;--orange-warm-vivid-10:#ffe2d1;--orange-warm-vivid-5:#fff3ea;--orange-90-rgb:27,22,20;--orange-80-rgb:51,45,39;--orange-70-rgb:82,66,54;--orange-60-rgb:119,85,64;--orange-50-rgb:162,103,57;--orange-40-rgb:221,117,51;--orange-30-rgb:240,152,96;--orange-20-rgb:243,191,144;--orange-10-rgb:242,228,212;--orange-5-rgb:246,239,233;--orange-warm-90-rgb:28,22,21;--orange-warm-80-rgb:61,41,37;--orange-warm-70-rgb:99,58,50;--orange-warm-60-rgb:145,71,52;--orange-warm-50-rgb:189,87,39;--orange-warm-40-rgb:225,113,65;--orange-warm-30-rgb:243,150,109;--orange-warm-20-rgb:247,188,162;--orange-warm-10-rgb:251,224,208;--orange-warm-5-rgb:250,238,229;--orange-vivid-80-rgb:53,35,19;--orange-vivid-70-rgb:95,54,23;--orange-vivid-60-rgb:140,71,28;--orange-vivid-50-rgb:192,86,0;--orange-vivid-40-rgb:230,111,14;--orange-vivid-30-rgb:255,140,0;--orange-vivid-20-rgb:255,188,120;--orange-vivid-10-rgb:252,226,197;--orange-vivid-5-rgb:253,245,230;--orange-warm-vivid-80-rgb:61,35,29;--orange-warm-vivid-70-rgb:120,35,18;--orange-warm-vivid-60-rgb:167,47,16;--orange-warm-vivid-50-rgb:207,73,0;--orange-warm-vivid-40-rgb:255,88,10;--orange-warm-vivid-30-rgb:252,144,109;--orange-warm-vivid-20-rgb:251,186,167;--orange-warm-vivid-10-rgb:255,226,209;--orange-warm-vivid-5-rgb:255,243,234;--pure-100:#000;--pure-0:#fff;--pure-100-rgb:0,0,0;--pure-0-rgb:255,255,255;--red-90:#1b1616;--red-80:#3e2927;--red-70:#6f3331;--red-60:#a23737;--red-50:#d83933;--red-40:#e9695f;--red-30:#f2938c;--red-20:#f7bbb1;--red-10:#f8e1de;--red-5:#f9eeee;--red-cool-90:#1e1517;--red-cool-80:#40282c;--red-cool-70:#68363f;--red-cool-60:#9e394b;--red-cool-50:#cd425b;--red-cool-40:#e16b80;--red-cool-30:#e09aa6;--red-cool-20:#ecbec6;--red-cool-10:#f3e1e4;--red-cool-5:#f8eff1;--red-warm-90:#1f1c18;--red-warm-80:#332d29;--red-warm-70:#524236;--red-warm-60:#805039;--red-warm-50:#c3512c;--red-warm-40:#d27a56;--red-warm-30:#dca081;--red-warm-20:#ecc0a7;--red-warm-10:#f4e3db;--red-warm-5:#f6efea;--red-vivid-80:#5c1111;--red-vivid-70:#8b0a03;--red-vivid-60:#b50909;--red-vivid-50:#e52207;--red-vivid-40:#fb5a47;--red-vivid-30:#ff8d7b;--red-vivid-20:#fdb8ae;--red-vivid-10:#fde0db;--red-vivid-5:#fff3f2;--red-cool-vivid-80:#4f1c24;--red-cool-vivid-70:#822133;--red-cool-vivid-60:#b21d38;--red-cool-vivid-50:#e41d3d;--red-cool-vivid-40:#f45d79;--red-cool-vivid-30:#fd8ba0;--red-cool-vivid-20:#f8b9c5;--red-cool-vivid-10:#f8dfe2;--red-cool-vivid-5:#fff2f5;--red-warm-vivid-80:#3e2a1e;--red-warm-vivid-70:#63340f;--red-warm-vivid-60:#9c3d10;--red-warm-vivid-50:#d54309;--red-warm-vivid-40:#ef5e25;--red-warm-vivid-30:#f39268;--red-warm-vivid-20:#f6bd9c;--red-warm-vivid-10:#fce1d4;--red-warm-vivid-5:#fff5ee;--red-90-rgb:27,22,22;--red-80-rgb:62,41,39;--red-70-rgb:111,51,49;--red-60-rgb:162,55,55;--red-50-rgb:216,57,51;--red-40-rgb:233,105,95;--red-30-rgb:242,147,140;--red-20-rgb:247,187,177;--red-10-rgb:248,225,222;--red-5-rgb:249,238,238;--red-cool-90-rgb:30,21,23;--red-cool-80-rgb:64,40,44;--red-cool-70-rgb:104,54,63;--red-cool-60-rgb:158,57,75;--red-cool-50-rgb:205,66,91;--red-cool-40-rgb:225,107,128;--red-cool-30-rgb:224,154,166;--red-cool-20-rgb:236,190,198;--red-cool-10-rgb:243,225,228;--red-cool-5-rgb:248,239,241;--red-warm-90-rgb:31,28,24;--red-warm-80-rgb:51,45,41;--red-warm-70-rgb:82,66,54;--red-warm-60-rgb:128,80,57;--red-warm-50-rgb:195,81,44;--red-warm-40-rgb:210,122,86;--red-warm-30-rgb:220,160,129;--red-warm-20-rgb:236,192,167;--red-warm-10-rgb:244,227,219;--red-warm-5-rgb:246,239,234;--red-vivid-80-rgb:92,17,17;--red-vivid-70-rgb:139,10,3;--red-vivid-60-rgb:181,9,9;--red-vivid-50-rgb:229,34,7;--red-vivid-40-rgb:251,90,71;--red-vivid-30-rgb:255,141,123;--red-vivid-20-rgb:253,184,174;--red-vivid-10-rgb:253,224,219;--red-vivid-5-rgb:255,243,242;--red-cool-vivid-80-rgb:79,28,36;--red-cool-vivid-70-rgb:130,33,51;--red-cool-vivid-60-rgb:178,29,56;--red-cool-vivid-50-rgb:228,29,61;--red-cool-vivid-40-rgb:244,93,121;--red-cool-vivid-30-rgb:253,139,160;--red-cool-vivid-20-rgb:248,185,197;--red-cool-vivid-10-rgb:248,223,226;--red-cool-vivid-5-rgb:255,242,245;--red-warm-vivid-80-rgb:62,42,30;--red-warm-vivid-70-rgb:99,52,15;--red-warm-vivid-60-rgb:156,61,16;--red-warm-vivid-50-rgb:213,67,9;--red-warm-vivid-40-rgb:239,94,37;--red-warm-vivid-30-rgb:243,146,104;--red-warm-vivid-20-rgb:246,189,156;--red-warm-vivid-10-rgb:252,225,212;--red-warm-vivid-5-rgb:255,245,238;--violet-90:#18161d;--violet-80:#312b3f;--violet-70:#4c3d69;--violet-60:#665190;--violet-50:#8168b3;--violet-40:#9d84d2;--violet-30:#b8a2e3;--violet-20:#d0c3e9;--violet-10:#ebe3f9;--violet-5:#f4f1f9;--violet-warm-90:#1b151b;--violet-warm-80:#382936;--violet-warm-70:#5c395a;--violet-warm-60:#864381;--violet-warm-50:#b04abd;--violet-warm-40:#bf77c8;--violet-warm-30:#d29ad8;--violet-warm-20:#e2bee4;--violet-warm-10:#f6dff8;--violet-warm-5:#f8f0f9;--violet-vivid-80:#39215e;--violet-vivid-70:#54278f;--violet-vivid-60:#783cb9;--violet-vivid-50:#9355dc;--violet-vivid-40:#ad79e9;--violet-vivid-30:#c39deb;--violet-vivid-20:#d5bfff;--violet-vivid-10:#ede3ff;--violet-vivid-5:#f7f2ff;--violet-warm-vivid-80:#481441;--violet-warm-vivid-70:#711e6c;--violet-warm-vivid-60:#93348c;--violet-warm-vivid-50:#be32d0;--violet-warm-vivid-40:#d85bef;--violet-warm-vivid-30:#ee83ff;--violet-warm-vivid-20:#f4b2ff;--violet-warm-vivid-10:#fbdcff;--violet-warm-vivid-5:#fef2ff;--violet-90-rgb:24,22,29;--violet-80-rgb:49,43,63;--violet-70-rgb:76,61,105;--violet-60-rgb:102,81,144;--violet-50-rgb:129,104,179;--violet-40-rgb:157,132,210;--violet-30-rgb:184,162,227;--violet-20-rgb:208,195,233;--violet-10-rgb:235,227,249;--violet-5-rgb:244,241,249;--violet-warm-90-rgb:27,21,27;--violet-warm-80-rgb:56,41,54;--violet-warm-70-rgb:92,57,90;--violet-warm-60-rgb:134,67,129;--violet-warm-50-rgb:176,74,189;--violet-warm-40-rgb:191,119,200;--violet-warm-30-rgb:210,154,216;--violet-warm-20-rgb:226,190,228;--violet-warm-10-rgb:246,223,248;--violet-warm-5-rgb:248,240,249;--violet-vivid-80-rgb:57,33,94;--violet-vivid-70-rgb:84,39,143;--violet-vivid-60-rgb:120,60,185;--violet-vivid-50-rgb:147,85,220;--violet-vivid-40-rgb:173,121,233;--violet-vivid-30-rgb:195,157,235;--violet-vivid-20-rgb:213,191,255;--violet-vivid-10-rgb:237,227,255;--violet-vivid-5-rgb:247,242,255;--violet-warm-vivid-80-rgb:72,20,65;--violet-warm-vivid-70-rgb:113,30,108;--violet-warm-vivid-60-rgb:147,52,140;--violet-warm-vivid-50-rgb:190,50,208;--violet-warm-vivid-40-rgb:216,91,239;--violet-warm-vivid-30-rgb:238,131,255;--violet-warm-vivid-20-rgb:244,178,255;--violet-warm-vivid-10-rgb:251,220,255;--violet-warm-vivid-5-rgb:254,242,255;--yellow-90:#1a1614;--yellow-80:#332d27;--yellow-70:#504332;--yellow-60:#6b5a39;--yellow-50:#8a7237;--yellow-40:#a88f48;--yellow-30:#c9ab48;--yellow-20:#e6c74c;--yellow-10:#f5e6af;--yellow-5:#faf3d1;--yellow-vivid-80:#422d19;--yellow-vivid-70:#5c4809;--yellow-vivid-60:#776017;--yellow-vivid-50:#947100;--yellow-vivid-40:#b38c00;--yellow-vivid-30:#ddaa01;--yellow-vivid-20:#ffcd07;--yellow-vivid-10:#fee685;--yellow-vivid-5:#fff5c2;--yellow-90-rgb:26,22,20;--yellow-80-rgb:51,45,39;--yellow-70-rgb:80,67,50;--yellow-60-rgb:107,90,57;--yellow-50-rgb:138,114,55;--yellow-40-rgb:168,143,72;--yellow-30-rgb:201,171,72;--yellow-20-rgb:230,199,76;--yellow-10-rgb:245,230,175;--yellow-5-rgb:250,243,209;--yellow-vivid-80-rgb:66,45,25;--yellow-vivid-70-rgb:92,72,9;--yellow-vivid-60-rgb:119,96,23;--yellow-vivid-50-rgb:148,113,0;--yellow-vivid-40-rgb:179,140,0;--yellow-vivid-30-rgb:221,170,1;--yellow-vivid-20-rgb:255,205,7;--yellow-vivid-10-rgb:254,230,133;--yellow-vivid-5-rgb:255,245,194;--background:var(--background-light);--background-rgb:var(--background-light-rgb);--background-light:var(--pure-0);--background-light-rgb:var(--pure-0-rgb);--background-alternative:var(--gray-5);--background-alternative-rgb:var(--gray-5-rgb);--background-dark:var(--blue-warm-vivid-90);--background-dark-rgb:var(--blue-warm-vivid-90-rgb);--border-color:var(--gray-20);--border-color-alternative:var(--gray-40);--border-style:solid;--border-width:var(--surface-width-sm);--color:var(--color-light);--color-rgb:var(--color-light-rgb);--color-light:var(--gray-80);--color-light-rgb:var(--gray-80-rgb);--color-dark:var(--pure-0);--color-dark-rgb:var(--pure-0-rgb);--interactive:var(--interactive-light);--interactive-rgb:var(--interactive-light-rgb);--interactive-light:var(--blue-warm-vivid-70);--interactive-light-rgb:var(--blue-warm-vivid-70-rgb);--interactive-dark:var(--blue-warm-20);--interactive-dark-rgb:var(--blue-warm-20-rgb);--interactive-alternative:var(--green-cool-vivid-50);--interactive-alternative-rgb:var(--green-cool-vivid-50-rgb);--info:var(--blue-warm-vivid-60);--info-alternative:var(--blue-warm-vivid-10);--info-rgb:var(--blue-warm-vivid-60-rgb);--info-alternative-rgb:var(--blue-warm-vivid-10-rgb);--success:var(--green-cool-vivid-50);--success-alternative:var(--green-cool-vivid-5);--success-rgb:var(--green-cool-vivid-50-rgb);--success-alternative-rgb:var(--green-cool-vivid-5-rgb);--warning:var(--yellow-vivid-20);--warning-alternative:var(--yellow-vivid-5);--warning-rgb:var(--yellow-vivid-20-rgb);--warning-alternative-rgb:var(--yellow-vivid-5-rgb);--danger:var(--red-vivid-50);--danger-alternative:var(--red-vivid-10);--danger-rgb:var(--red-vivid-50-rgb);--danger-alternative-rgb:var(--red-vivid-20-rgb);--font-family-base:Rawline,Raleway,sans-serif;--surface-overlay-scrim:rgba(var(--rgb-secondary-09),var(--surface-opacity-md));--surface-overlay-text:linear-gradient(rgba(var(--rgb-secondary-01),var(--surface-opacity-none)),rgba(var(--rgb-secondary-09),var(--surface-opacity-default)));--visited:var(--visited-light);--visited-light:var(--blue-warm-vivid-80);--visited-dark:var(--gray-20);--disabled:var(--surface-opacity-md);--hover:var(--hover-light);--hover-light:var(--surface-opacity-xs);--hover-dark:var(--surface-opacity-sm);--hover-effect:linear-gradient(rgba(var(--interactive-rgb),var(--hover)),rgba(var(--interactive-rgb),var(--hover)));--pressed:var(--pressed-light);--pressed-light:var(--surface-opacity-md);--pressed-dark:var(--surface-opacity-lg);--pressed-effect:linear-gradient(rgba(var(--interactive-rgb),var(--pressed)),rgba(var(--interactive-rgb),var(--pressed)));--focus-style:dashed;--focus-color:var(--focus-color-light);--focus-color-light:var(--gold-vivid-40);--focus-color-dark:var(--gold-vivid-20);--focus:var(--focus-color);--focus-offset:var(--spacing-scale-half);--focus-width:var(--surface-width-lg);--active:var(--blue-warm-vivid-80);--active-rgb:var(--blue-warm-vivid-80-rgb);--selected:var(--blue-warm-vivid-50);--on:var(--blue-warm-vivid-40);--on-rgb:var(--blue-warm-vivid-40-rgb);--off:var(--gray-20);--off-rgb:var(--gray-20-rgb);--ondrag-border-color:var(--interactive);--ondrag-border-width:var(--surface-width-md);--ondrag-border-style:solid;--ondrag-shadow-offset-x:var(--surface-offset-none);--ondrag-shadow-offset-y:var(--surface-offset-md);--ondrag-shadow-blur:var(--surface-blur-lg);--ondrag-shadow-color:var(--interactive-rgb);--ondrag-shadow-opacity:var(--surface-opacity-sm);--ondrag-opacity:var(--surface-opacity-xl);--ondrag-rotate:-5deg;--ondrag-cursor:grabbing;--draggable-icon:grip-vertical;--draggable-cursor:grab;--dropzone-border-color:var(--interactive);--dropzone-border-width:var(--surface-width-sm);--dropzone-border-style:dashed;--ondrop-background:var(--interactive-rgb);--ondrop-opacity:var(--surface-opacity-sm);--ondrop-cursor:copy;--z-index-layer-0:0;--z-index-layer-1:1000;--z-index-layer-2:2000;--z-index-layer-3:3000;--z-index-layer-4:4000;--color-primary-pastel-01:#c5d4eb;--color-primary-pastel-02:#dbe8fb;--color-primary-lighten-01:#2670e8;--color-primary-lighten-02:#5992ed;--color-primary-default:#1351b4;--color-primary-darken-01:#0c326f;--color-primary-darken-02:#071d41;--color-secondary-01:#fff;--color-secondary-02:#f8f8f8;--color-secondary-03:#ededed;--color-secondary-04:#ccc;--color-secondary-05:#9e9d9d;--color-secondary-06:#888;--color-secondary-07:#555;--color-secondary-08:#333;--color-secondary-09:#000;--color-highlight:#268744;--color-support-01:#36a191;--color-support-02:#f2e317;--color-support-03:#db4800;--color-support-04:#a26739;--color-support-05:#40e0d0;--color-support-06:#48cbeb;--color-support-07:#c72487;--color-support-08:#63007f;--color-support-09:#f08080;--color-support-10:#ff8c00;--color-support-11:#fdf5e6;--icon-size-base:16px;--icon-size-xs:8px;--icon-size-sm:12px;--icon-size-lg:20px;--icon-size-2x:32px;--icon-size-3x:48px;--icon-size-4x:64px;--icon-size-5x:80px;--icon-size-6x:96px;--icon-size-7x:112px;--icon-size-8x:128px;--icon-size-9x:144px;--icon-size-10x:160px;--surface-width-none:0;--surface-width-sm:1px;--surface-width-md:2px;--surface-width-lg:4px;--surface-rounder-none:0;--surface-rounder-sm:4px;--surface-rounder-md:8px;--surface-rounder-lg:16px;--surface-rounder-pill:999em;--surface-opacity-none:0;--surface-opacity-default:1;--surface-opacity-xs:0.16;--surface-opacity-sm:0.3;--surface-opacity-md:0.45;--surface-opacity-lg:0.65;--surface-opacity-xl:0.85;--surface-border-solid-none:var(--surface-width-none) solid var(--color-secondary-06);--surface-border-solid-sm:var(--surface-width-sm) solid var(--color-secondary-06);--surface-border-solid-md:var(--surface-width-md) solid var(--color-secondary-06);--surface-border-solid-lg:var(--surface-width-lg) solid var(--color-secondary-06);--surface-border-dashed-none:var(--surface-width-none) dashed var(--color-secondary-06);--surface-border-dashed-sm:var(--surface-width-sm) dashed var(--color-secondary-06);--surface-border-dashed-md:var(--surface-width-md) dashed var(--color-secondary-06);--surface-border-dashed-lg:var(--surface-width-lg) dashed var(--color-secondary-06);--surface-blur-none:0;--surface-blur-sm:1px;--surface-blur-md:3px;--surface-blur-lg:6px;--surface-blur-xl:9px;--surface-offset-none:0;--surface-offset-sm:1px;--surface-offset-md:3px;--surface-offset-lg:6px;--surface-offset-xl:9px;--surface-offset-sm-n:-1px;--surface-offset-md-n:-3px;--surface-offset-lg-n:-6px;--surface-offset-xl-n:-9px;--surface-shadow-color:var(--rgb-secondary-09);--surface-shadow-none:none;--surface-shadow-sm:var(--surface-offset-none) var(--surface-offset-sm) var(--surface-blur-lg) rgba(var(--surface-shadow-color),var(--surface-opacity-xs));--surface-shadow-md:var(--surface-offset-none) var(--surface-offset-md) var(--surface-blur-lg) rgba(var(--surface-shadow-color),var(--surface-opacity-xs));--surface-shadow-lg:var(--surface-offset-none) var(--surface-offset-lg) var(--surface-blur-lg) rgba(var(--surface-shadow-color),var(--surface-opacity-xs));--surface-shadow-xl:var(--surface-offset-none) var(--surface-offset-xl) var(--surface-blur-lg) rgba(var(--surface-shadow-color),var(--surface-opacity-xs));--surface-shadow-sm-inset:var(--surface-offset-none) var(--surface-offset-sm-n) var(--surface-blur-lg) inset rgba(var(--surface-shadow-color),var(--surface-opacity-xs));--surface-shadow-md-inset:var(--surface-offset-none) var(--surface-offset-md-n) var(--surface-blur-lg) inset rgba(var(--surface-shadow-color),var(--surface-opacity-xs));--surface-shadow-lg-inset:var(--surface-offset-none) var(--surface-offset-lg-n) var(--surface-blur-lg) inset rgba(var(--surface-shadow-color),var(--surface-opacity-xs));--surface-shadow-xl-inset:var(--surface-offset-none) var(--surface-offset-xl-n) var(--surface-blur-lg) inset rgba(var(--surface-shadow-color),var(--surface-opacity-xs));--surface-shadow-sm-up:var(--surface-offset-none) var(--surface-offset-sm-n) var(--surface-blur-lg) rgba(var(--surface-shadow-color),var(--surface-opacity-xs));--surface-shadow-md-up:var(--surface-offset-none) var(--surface-offset-md-n) var(--surface-blur-lg) rgba(var(--surface-shadow-color),var(--surface-opacity-xs));--surface-shadow-lg-up:var(--surface-offset-none) var(--surface-offset-lg-n) var(--surface-blur-lg) rgba(var(--surface-shadow-color),var(--surface-opacity-xs));--surface-shadow-xl-up:var(--surface-offset-none) var(--surface-offset-xl-n) var(--surface-blur-lg) rgba(var(--surface-shadow-color),var(--surface-opacity-xs));--surface-shadow-sm-inset-up:var(--surface-offset-none) var(--surface-offset-sm) var(--surface-blur-lg) inset rgba(var(--surface-shadow-color),var(--surface-opacity-xs));--surface-shadow-md-inset-up:var(--surface-offset-none) var(--surface-offset-md) var(--surface-blur-lg) inset rgba(var(--surface-shadow-color),var(--surface-opacity-xs));--surface-shadow-lg-inset-up:var(--surface-offset-none) var(--surface-offset-lg) var(--surface-blur-lg) inset rgba(var(--surface-shadow-color),var(--surface-opacity-xs));--surface-shadow-xl-inset-up:var(--surface-offset-none) var(--surface-offset-xl) var(--surface-blur-lg) inset rgba(var(--surface-shadow-color),var(--surface-opacity-xs));--surface-shadow-sm-right:var(--surface-offset-sm) var(--surface-offset-none) var(--surface-blur-lg) rgba(var(--surface-shadow-color),var(--surface-opacity-xs));--surface-shadow-md-right:var(--surface-offset-md) var(--surface-offset-none) var(--surface-blur-lg) rgba(var(--surface-shadow-color),var(--surface-opacity-xs));--surface-shadow-lg-right:var(--surface-offset-lg) var(--surface-offset-none) var(--surface-blur-lg) rgba(var(--surface-shadow-color),var(--surface-opacity-xs));--surface-shadow-xl-right:var(--surface-offset-xl) var(--surface-offset-none) var(--surface-blur-lg) rgba(var(--surface-shadow-color),var(--surface-opacity-xs));--surface-shadow-sm-inset-right:var(--surface-offset-sm-n) var(--surface-offset-none) var(--surface-blur-lg) inset rgba(var(--surface-shadow-color),var(--surface-opacity-xs));--surface-shadow-md-inset-right:var(--surface-offset-md-n) var(--surface-offset-none) var(--surface-blur-lg) inset rgba(var(--surface-shadow-color),var(--surface-opacity-xs));--surface-shadow-lg-inset-right:var(--surface-offset-lg-n) var(--surface-offset-none) var(--surface-blur-lg) inset rgba(var(--surface-shadow-color),var(--surface-opacity-xs));--surface-shadow-xl-inset-right:var(--surface-offset-xl-n) var(--surface-offset-none) var(--surface-blur-lg) inset rgba(var(--surface-shadow-color),var(--surface-opacity-xs));--surface-shadow-sm-left:var(--surface-offset-sm-n) var(--surface-offset-none) var(--surface-blur-lg) rgba(var(--surface-shadow-color),var(--surface-opacity-xs));--surface-shadow-md-left:var(--surface-offset-md-n) var(--surface-offset-none) var(--surface-blur-lg) rgba(var(--surface-shadow-color),var(--surface-opacity-xs));--surface-shadow-lg-left:var(--surface-offset-lg-n) var(--surface-offset-none) var(--surface-blur-lg) rgba(var(--surface-shadow-color),var(--surface-opacity-xs));--surface-shadow-xl-left:var(--surface-offset-xl-n) var(--surface-offset-none) var(--surface-blur-lg) rgba(var(--surface-shadow-color),var(--surface-opacity-xs));--surface-shadow-sm-inset-left:var(--surface-offset-sm) var(--surface-offset-none) var(--surface-blur-lg) inset rgba(var(--surface-shadow-color),var(--surface-opacity-xs));--surface-shadow-md-inset-left:var(--surface-offset-md) var(--surface-offset-none) var(--surface-blur-lg) inset rgba(var(--surface-shadow-color),var(--surface-opacity-xs));--surface-shadow-lg-inset-left:var(--surface-offset-lg) var(--surface-offset-none) var(--surface-blur-lg) inset rgba(var(--surface-shadow-color),var(--surface-opacity-xs));--surface-shadow-xl-inset-left:var(--surface-offset-xl) var(--surface-offset-none) var(--surface-blur-lg) inset rgba(var(--surface-shadow-color),var(--surface-opacity-xs));--animation-ease:cubic-bezier(0.25,0.1,0.25,1);--animation-ease-in:cubic-bezier(0.42,0,1,1);--animation-ease-out:cubic-bezier(0,0,0.58,1);--animation-ease-in-out:cubic-bezier(0.42,0,0.58,1);--animation-ease-linear:cubic-bezier(0,0,1,1);--duration-very-fast:0.1s;--duration-fast:0.3s;--duration-moderate:0.5s;--duration-slow:0.8s;--duration-very-slow:1s;--font-weight-thin:100;--font-weight-extra-light:200;--font-weight-light:300;--font-weight-regular:400;--font-weight-medium:500;--font-weight-semi-bold:600;--font-weight-bold:700;--font-weight-extra-bold:800;--font-weight-black:900;--font-size-scale-base:14px;--font-size-scale-down-01:11.662px;--font-size-scale-down-02:9.716px;--font-size-scale-down-03:8.106px;--font-size-scale-up-01:16.8px;--font-size-scale-up-02:20.16px;--font-size-scale-up-03:24.192px;--font-size-scale-up-04:29.036px;--font-size-scale-up-05:34.832px;--font-size-scale-up-06:41.804px;--font-size-scale-up-07:50.162px;--font-size-scale-up-08:60.2px;--font-size-scale-up-09:72.24px;--font-size-scale-up-10:86.688px;--font-size-scale-up-11:104.02px;--font-line-height-low:1.15;--font-line-height-medium:1.45;--font-line-height-high:1.85;--grid-breakpoint-xs:0;--grid-breakpoint-xs-max-width:100%;--grid-breakpoint-sm:576px;--grid-breakpoint-sm-max-width:536px;--grid-breakpoint-md:992px;--grid-breakpoint-md-max-width:952px;--grid-breakpoint-lg:1280px;--grid-breakpoint-lg-max-width:1200px;--grid-breakpoint-xl:1600px;--grid-breakpoint-xl-max-width:1560px;--grid-portrait-maxwidth:100%;--grid-portrait-gutter:16px;--grid-portrait-columns:4;--grid-portrait-margin:8px;--grid-tablet-maxwidth:100%;--grid-tablet-gutter:24px;--grid-tablet-columns:8;--grid-tablet-margin:40px;--grid-desktop-maxwidth:1200px;--grid-desktop-gutter:24px;--grid-desktop-columns:12;--grid-desktop-margin:40px;--grid-tv-maxwidth:1520px;--grid-tv-gutter:40px;--grid-tv-columns:12;--grid-tv-margin:40px;--spacing-vertical-top:top;--spacing-vertical-center:center;--spacing-vertical-bottom:bottom;--spacing-horizontal-left:left;--spacing-horizontal-center:center;--spacing-horizontal-right:right;--spacing-scale-default:0;--spacing-scale-half:4px;--spacing-scale-base:8px;--spacing-scale-baseh:12px;--spacing-scale-2x:16px;--spacing-scale-2xh:20px;--spacing-scale-3x:24px;--spacing-scale-3xh:28px;--spacing-scale-4x:32px;--spacing-scale-4xh:36px;--spacing-scale-5x:40px;--spacing-scale-5xh:44px;--spacing-scale-6x:48px;--spacing-scale-6xh:52px;--spacing-scale-7x:56px;--spacing-scale-7xh:60px;--spacing-scale-8x:64px;--spacing-scale-8xh:68px;--spacing-scale-9x:72px;--spacing-scale-9xh:76px;--spacing-scale-10x:80px;--spacing-scale-10xh:84px;--rgb-primary-pastel-01:197,212,235;--rgb-primary-pastel-02:219,232,251;--rgb-primary-lighten-01:38,112,232;--rgb-primary-lighten-02:89,146,237;--rgb-primary-default:19,81,180;--rgb-primary-darken-01:12,50,111;--rgb-primary-darken-02:7,29,65;--rgb-secondary-01:255,255,255;--rgb-secondary-02:248,248,248;--rgb-secondary-03:237,237,237;--rgb-secondary-04:204,204,204;--rgb-secondary-05:158,157,157;--rgb-secondary-06:136,136,136;--rgb-secondary-07:85,85,85;--rgb-secondary-08:51,51,51;--rgb-secondary-09:0,0,0;--rgb-highlight:38,135,68;--rgb-support-01:54,161,145;--rgb-support-02:242,227,23;--rgb-support-03:219,72,0;--rgb-support-04:162,103,57;--rgb-support-05:64,224,208;--rgb-support-06:72,203,235;--rgb-support-07:199,36,135;--rgb-support-08:99,0,127;--rgb-support-09:240,128,128;--rgb-support-10:255,140,0;--rgb-support-11:253,245,230}*,:after,:before{box-sizing:border-box}html{text-size-adjust:100%;line-height:var(--font-line-height-medium)}
.br-checkbox {
  --checkbox-padding: var(--spacing-scale-base);
  --checkbox-size: 24px;
  display: block;
  line-height: 0px;
}
.br-checkbox label {
  color: var(--color);
  cursor: pointer;
  display: inline-block;
  font-weight: var(--font-weight-medium);
  line-height: 1.6em;
  min-height: var(--checkbox-size);
  padding-left: calc(var(--checkbox-size) + var(--checkbox-padding));
  position: relative;
}
.br-checkbox label:empty {
  padding-left: var(--checkbox-size);
}
.br-checkbox.hidden-label label {
  padding-left: calc(var(--checkbox-size) + var(--surface-width-md) * 2);
  text-indent: -10000px;
  white-space: nowrap;
  width: 0;
}
.br-checkbox.d-inline label {
  padding-right: var(--spacing-scale-4x);
}
.br-checkbox input {
  opacity: 0;
  position: absolute;
}
.br-checkbox input:focus-visible:checked + label::before,
.br-checkbox input:focus-visible + label::before, .br-checkbox input.focus-visible:checked + label::before,
.br-checkbox input.focus-visible + label::before {
  border-color: var(--focus) !important;
  box-shadow: 0 0 0 var(--surface-width-md) var(--focus);
  outline: none;
}
.br-checkbox input:hover:not(:disabled) + label::before {
  --interactive-rgb: var(--interactive-light-rgb);
  background-image: linear-gradient(rgba(var(--interactive-rgb), var(--hover)), rgba(var(--interactive-rgb), var(--hover)));
}
.br-checkbox input:disabled + label {
  cursor: not-allowed;
  opacity: var(--disabled);
}
.br-checkbox input:disabled + label * {
  pointer-events: none;
}
.br-checkbox input:disabled + label:hover::before {
  background-image: none;
}
.br-checkbox input + label {
  align-items: flex-start;
  cursor: pointer;
  display: inline-block;
  font-size: var(--font-size-scale-base);
  font-weight: var(--font-weight-medium);
  min-height: var(--spacing-scale-3x);
  position: relative;
}
.br-checkbox input + label::before {
  background: var(--background-light);
  border-color: var(--border-color);
  border-radius: 4px;
  border-style: solid;
  border-width: 1px;
  content: "";
  height: var(--checkbox-size);
  left: 0;
  position: absolute;
  width: var(--checkbox-size);
}
.br-checkbox input + label:empty {
  padding-left: var(--spacing-scale-3x);
}
.br-checkbox input[indeterminate] {
  color: var(--color-d);
}
.br-checkbox input[indeterminate] + label::before {
  --interactive-rgb: var(--color-rgb);
  background: var(--selected);
  border-color: var(--selected);
}
.br-checkbox input[indeterminate]:hover:not(:disabled) + label::before {
  --interactive-rgb: var(--color-dark-rgb);
}
.br-checkbox input:checked + label::after {
  border: solid var(--green);
  border-width: 0 3px 3px 0;
  content: "";
  height: var(--icon-size-sm);
  left: 8px;
  position: absolute;
  top: 4px;
  transform: rotate(45deg);
  width: 8px;
}
.br-checkbox input:checked[indeterminate] + label::after {
  border-color: var(--background-light);
  border-width: 0 0 3px;
  top: 2px;
  transform: none;
}
.br-checkbox input:invalid + label::before {
  --border-color: var(--danger);
  border-width: 2px;
}
.br-checkbox input:disabled + label::before {
  box-shadow: none;
}
.br-checkbox.is-small input[type=checkbox] + label, .br-checkbox.small input[type=checkbox] + label, .br-checkbox[small] input[type=checkbox] + label {
  line-height: var(--spacing-scale-2xh);
  min-height: var(--spacing-scale-2xh);
}
.br-checkbox.is-small input[type=checkbox] + label::before, .br-checkbox.small input[type=checkbox] + label::before, .br-checkbox[small] input[type=checkbox] + label::before {
  height: var(--spacing-scale-2xh);
  width: var(--spacing-scale-2xh);
}
.br-checkbox.is-small input[type=checkbox]:checked + label::after, .br-checkbox.small input[type=checkbox]:checked + label::after, .br-checkbox[small] input[type=checkbox]:checked + label::after {
  border-width: 0 2px 2px 0;
  height: var(--icon-size-sm);
  left: 7px;
  top: 6px;
  width: 6px;
}
.br-checkbox.is-small input[type=checkbox]:checked[indeterminate] + label::after, .br-checkbox.small input[type=checkbox]:checked[indeterminate] + label::after, .br-checkbox[small] input[type=checkbox]:checked[indeterminate] + label::after {
  border-color: var(--background-light);
  border-width: 0 0 3px;
  top: 2px;
  transform: none;
}
.br-checkbox.is-invalid:not(.is-inverted):not(.inverted):not([inverted]) input[type=checkbox] + label::before, .br-checkbox.invalid:not(.is-inverted):not(.inverted):not([inverted]) input[type=checkbox] + label::before, .br-checkbox[invalid]:not(.is-inverted):not(.inverted):not([inverted]) input[type=checkbox] + label::before {
  --border-color: var(--danger);
  border-width: 2px;
}
.br-checkbox.is-invalid:not(.is-inverted):not(.inverted):not([inverted]) input[type=checkbox]:focus-visible:checked + label::before,
.br-checkbox.is-invalid:not(.is-inverted):not(.inverted):not([inverted]) input[type=checkbox]:focus-visible + label::before, .br-checkbox.is-invalid:not(.is-inverted):not(.inverted):not([inverted]) input[type=checkbox].focus-visible:checked + label::before,
.br-checkbox.is-invalid:not(.is-inverted):not(.inverted):not([inverted]) input[type=checkbox].focus-visible + label::before, .br-checkbox.invalid:not(.is-inverted):not(.inverted):not([inverted]) input[type=checkbox]:focus-visible:checked + label::before,
.br-checkbox.invalid:not(.is-inverted):not(.inverted):not([inverted]) input[type=checkbox]:focus-visible + label::before, .br-checkbox.invalid:not(.is-inverted):not(.inverted):not([inverted]) input[type=checkbox].focus-visible:checked + label::before,
.br-checkbox.invalid:not(.is-inverted):not(.inverted):not([inverted]) input[type=checkbox].focus-visible + label::before, .br-checkbox[invalid]:not(.is-inverted):not(.inverted):not([inverted]) input[type=checkbox]:focus-visible:checked + label::before,
.br-checkbox[invalid]:not(.is-inverted):not(.inverted):not([inverted]) input[type=checkbox]:focus-visible + label::before, .br-checkbox[invalid]:not(.is-inverted):not(.inverted):not([inverted]) input[type=checkbox].focus-visible:checked + label::before,
.br-checkbox[invalid]:not(.is-inverted):not(.inverted):not([inverted]) input[type=checkbox].focus-visible + label::before {
  --border-color: var(--focus-color);
}
.br-checkbox.is-invalid:not(.is-inverted):not(.inverted):not([inverted]) input[type=checkbox]:checked + label::before, .br-checkbox.invalid:not(.is-inverted):not(.inverted):not([inverted]) input[type=checkbox]:checked + label::before, .br-checkbox[invalid]:not(.is-inverted):not(.inverted):not([inverted]) input[type=checkbox]:checked + label::before {
  --border-color: var(--danger);
}
.br-checkbox.is-valid:not(.is-inverted):not(.inverted):not([inverted]) input[type=checkbox] + label::before, .br-checkbox.valid:not(.is-inverted):not(.inverted):not([inverted]) input[type=checkbox] + label::before, .br-checkbox[valid]:not(.is-inverted):not(.inverted):not([inverted]) input[type=checkbox] + label::before {
  --border-color: var(--success);
  border-width: 2px;
}
.br-checkbox.is-valid:not(.is-inverted):not(.inverted):not([inverted]) input[type=checkbox]:focus-visible:checked + label::before,
.br-checkbox.is-valid:not(.is-inverted):not(.inverted):not([inverted]) input[type=checkbox]:focus-visible + label::before, .br-checkbox.is-valid:not(.is-inverted):not(.inverted):not([inverted]) input[type=checkbox].focus-visible:checked + label::before,
.br-checkbox.is-valid:not(.is-inverted):not(.inverted):not([inverted]) input[type=checkbox].focus-visible + label::before, .br-checkbox.valid:not(.is-inverted):not(.inverted):not([inverted]) input[type=checkbox]:focus-visible:checked + label::before,
.br-checkbox.valid:not(.is-inverted):not(.inverted):not([inverted]) input[type=checkbox]:focus-visible + label::before, .br-checkbox.valid:not(.is-inverted):not(.inverted):not([inverted]) input[type=checkbox].focus-visible:checked + label::before,
.br-checkbox.valid:not(.is-inverted):not(.inverted):not([inverted]) input[type=checkbox].focus-visible + label::before, .br-checkbox[valid]:not(.is-inverted):not(.inverted):not([inverted]) input[type=checkbox]:focus-visible:checked + label::before,
.br-checkbox[valid]:not(.is-inverted):not(.inverted):not([inverted]) input[type=checkbox]:focus-visible + label::before, .br-checkbox[valid]:not(.is-inverted):not(.inverted):not([inverted]) input[type=checkbox].focus-visible:checked + label::before,
.br-checkbox[valid]:not(.is-inverted):not(.inverted):not([inverted]) input[type=checkbox].focus-visible + label::before {
  --border-color: var(--focus-color);
}
.br-checkbox.is-valid:not(.is-inverted):not(.inverted):not([inverted]) input[type=checkbox]:checked + label::before, .br-checkbox.valid:not(.is-inverted):not(.inverted):not([inverted]) input[type=checkbox]:checked + label::before, .br-checkbox[valid]:not(.is-inverted):not(.inverted):not([inverted]) input[type=checkbox]:checked + label::before {
  --border-color: var(--success);
}
.br-checkbox.inverted,
.br-checkbox.inverted label, .br-checkbox.dark-mode,
.br-checkbox.dark-mode label {
  color: var(--color-dark);
}

.leftsize-card .br-checkbox input + label::before{
    margin-top: 16px!important;
}
.leftsize-card .br-checkbox input:checked + label::after {
    margin-top: 16px!important;
}

.leftsize-card{
    border-radius: 8px;
    /* background: var(--Color, #FFF); */
    /* box-shadow: 0px 0px 10px 1px rgba(0, 0, 0, 0.10);  */
    /* min-height: 545px; */
}

.leftsize-card .left-sidebar{
  position: inherit;
}

.option-menu-left{
    background: #E7FFED; padding: 15px 7px; border: 1px solid var(--gray-bg3, #D6D9E4); border-radius: 8px; width: calc(100% - 40px);
    font-size: larger;
}
.leftsize-card .br-checkbox input:checked ~ label .option-menu-left{
    background: #14452F!important;
    color: #fff;
}
.leftsize-card .br-checkbox input:checked + label::before{
    border: 1px solid #07A143 !important;
}
.leftsize-card .br-checkbox input:checked + label::after{
    border: solid #07A143 !important;
    border-width: 0 3px 3px 0!important;
}



/* Dropdown Button */
.dropbtn-prfl {
    background-color: #4CAF50;
    color: white;
    padding: 16px;
    font-size: 16px;
    border: none;
    }
    
    /* The container <div> - needed to position the dropdown content */
    .dropdown-prfl, .dropdown-prfl2 {
    position: relative;
    display: inline-block;
    z-index: auto!important;
    }
    
    /* Dropdown Content (Hidden by Default) */
    .dropdown-content-prfl {
      display: none;
      position: absolute;
      background-color: #fff;
      min-width: 190px;
      box-shadow: 0px 8px 16px 0px rgba(0,0,0,0.2);
      z-index: 999;
    }
    
    /* Links inside the dropdown */
    .dropdown-content-prfl a {
      color: black!important;
      padding: 12px 16px;
      text-decoration: none;
      display: block;
    }
    
    /* Change color of dropdown links on hover */
    .dropdown-content-prfl a:hover {background-color: rgba(0,0,0,0.2);}
    
    /* Show the dropdown menu on hover */
    .dropdown-prfl:hover .dropdown-content-prfl {display: block;}
    .active-menudd{
      display: block;
    }
    
    /* Change the background color of the dropdown button when the dropdown content is shown */
    .dropdown-prfl:hover .dropbtn-prfl {background-color: #3e8e41;}
  
    .coustom-btn-dropdown-table:hover{
      box-shadow: 0px 2px 8px 2px #CED4DA;
      text-decoration: none;
    }
  
    .coustom-btn-dropdown-table.dpdw-link{
      line-height: 7px!important;
    }
  
    .dpdw-link{
      padding: 15px 10px; width: 40px;
      height: 40px;
      background: var(--green);
      border: 2px solid var(--green);
      border-radius: 50%;
      color: #fff!important;
      display: inline-block;
      text-align: center;
      line-height: 15px;
    }
    
    .coustom-btn-dropdown-table.dropdown-toggle::after {
      display: none!important;
    }
    .resize-dorpmobile2{
      margin-left: -164px!important;
      background: #fff!important;
      min-width: 200px!important;
      margin-top: 0px!important;
    }
    .resize-dorpmobile3{
      margin-left: -50px!important;
      background: #fff!important;
      min-width: 200px!important;
      margin-top: 0px!important;
    }
  
  .dropdown-infos-profil{
      background-color: #3D414B;
    border: 1px solid #3D414B;
    box-shadow: 0px 1px 5px 2px #000000;
    margin-top: 7px;
  }
  
  .dropdown-infos-profil .dropdown-item {
      font-family: Raleway-Bold;
      font-size: 13px;
      text-align: left;
      color: #FFFFFF!important;
  }
  .dropdown-infos-profil2{
      background-color: #2A2D42;
    border: 1px solid #2A2D42;
    box-shadow: 0px 1px 5px 2px #000000;
      min-width: 250px;
      margin-left: -250px;
  }
  .dropdown-infos-profil2 .dropdown-item2 {
      font-family: Raleway-Bold;
      font-size: 13px;
      text-align: left;
      color: #333!important;
  }
  
  .dropdown-content-prfl .dropdown-item{
    font-family: Raleway-Bold;
    font-size: 13px;
    text-align: left;
  }
  .dropdown-toggle::after {
    display: none;
  }
  .dropdown-content-prfl .dropdown-item img{
    height: 24px;
  }
  .subgrid-title{
    font-family: 'Helvetica';
    font-style: normal;
    font-weight: 400;
    font-size: 13.2276px;
    line-height: 15px;
    color: #858891;
  }
  
  @-webkit-keyframes HideList {
    from {
      -webkit-transform: scaleY(1);
              transform: scaleY(1);
    }
    to {
      -webkit-transform: scaleY(0);
              transform: scaleY(0);
    }
  }
  
  @keyframes HideList {
    from {
      -webkit-transform: scaleY(1);
              transform: scaleY(1);
    }
    to {
      -webkit-transform: scaleY(0);
              transform: scaleY(0);
    }
  }
  
  .cta-dash-btn{
    font-family: 'Montserrat-Regular';
    font-size: 14px;
    font-weight: 700;
    line-height: 27px;
    letter-spacing: 0em;
    text-align: left;
    color: #333!important;
    border: 1px solid #4075DF!important;
    text-transform: capitalize!important;
    border-radius: 5px!important;
    background: #fff!important;
  }
  /*============End===========*/

  .stats-page-descript{
    font-family: HurmeGeometricSans1;
    font-size: 16px;
    font-weight: 400;
    line-height: 20px;
    letter-spacing: 0em;
    text-align: left;
    text-decoration: none!important;
  }
  .stats-page-descript img{
    margin-left: 7px;
  }
  
  .card-dash-csu{
    font-family: Arial;
    font-size: 13px;
    font-weight: 400;
    line-height: 18px;
    color: #333333;
    background-color: #FFFFFF;
    background-repeat: repeat;
    background-position: left top;
    border: 1px solid #F1F3F9;
    border-radius: 4px;
    box-shadow: 0px 1px 5px 0px #D4D8DE;
    position: relative;
    padding: 10px 15px;
    margin-bottom: 10px;
  }



#demo {
    margin: 20px auto;
    max-width: 960px;
  }
  #demo h1 {
    font-size: 2.4rem;
    line-height: 3.2rem;
    letter-spacing: 0;
    font-weight: 300;
    color: #212121;
    text-transform: inherit;
    margin-bottom: 1rem;
    text-align: center;
  }
  #demo h2 {
    font-size: 1.5rem;
    line-height: 2.8rem;
    letter-spacing: 0.01rem;
    font-weight: 400;
    color: #212121;
    text-align: center;
  }
  .shadow-z-1 {
    -webkit-box-shadow: 0 1px 1px 0 rgba(0, 0, 0, 0.12), 0 1px 2px 0 rgba(0, 0, 0, 0.12);
    -moz-box-shadow: 0 1px 1px 0 rgba(0, 0, 0, 0.12), 0 1px 2px 0 rgba(0, 0, 0, 0.12);
    box-shadow: 0 1px 1px 0 rgba(0, 0, 0, 0.12), 0 1px 1px 0 rgba(0, 0, 0, 0.12);
  }
  /* -- Material Design Table style -------------- */
  .table {
    width: 100%;
    max-width: 100%;
    margin-bottom: 2rem;
    background-color: #fff;
    color: #333;
  }
  .table > thead > tr,
  .table > tbody > tr,
  .table > tfoot > tr {
    -webkit-transition: all 0.3s ease;
    -o-transition: all 0.3s ease;
    transition: all 0.3s ease;
  }
  .table > thead > tr > th,
  .table > tbody > tr > th,
  .table > tfoot > tr > th,
  .table > thead > tr > td,
  .table > tbody > tr > td,
  .table > tfoot > tr > td {
    text-align: left;
    padding: 10px;
    vertical-align: middle!important;
    vertical-align: top;
    border-top: 0;
    -webkit-transition: all 0.3s ease;
    -o-transition: all 0.3s ease;
    transition: all 0.3s ease;
  }
  .table > thead > tr > th {
    font-weight: 400;
    color: #757575;
    vertical-align: bottom;
    border-bottom: 1px solid rgba(0, 0, 0, 0.12);
  }
  .table > caption + thead > tr:first-child > th,
  .table > colgroup + thead > tr:first-child > th,
  .table > thead:first-child > tr:first-child > th,
  .table > caption + thead > tr:first-child > td,
  .table > colgroup + thead > tr:first-child > td,
  .table > thead:first-child > tr:first-child > td {
    border-top: 0;
  }
  .table > tbody + tbody {
    border-top: 1px solid rgba(0, 0, 0, 0.12);
  }
  .table .table {
    background-color: #fff;
  }
  .table .no-border {
    border: 0;
  }
  .table-condensed > thead > tr > th,
  .table-condensed > tbody > tr > th,
  .table-condensed > tfoot > tr > th,
  .table-condensed > thead > tr > td,
  .table-condensed > tbody > tr > td,
  .table-condensed > tfoot > tr > td {
    padding: 0.8rem;
  }
  .table-bordered {
    border: 0;
  }
  .table-bordered > thead > tr > th,
  .table-bordered > tbody > tr > th,
  .table-bordered > tfoot > tr > th,
  .table-bordered > thead > tr > td,
  .table-bordered > tbody > tr > td,
  .table-bordered > tfoot > tr > td {
    border: 0;
    border-bottom: 1px solid #e0e0e0;
  }
  .table-bordered > thead > tr > th,
  .table-bordered > thead > tr > td {
    border-bottom-width: 2px;
  }
  .table-striped > tbody > tr:nth-child(odd) > td,
  .table-striped > tbody > tr:nth-child(odd) > th {
    background-color: #f5f5f5;
  }
  .table-hover > tbody > tr:hover > td,
  .table-hover > tbody > tr:hover > th {
    background-color: rgba(0, 0, 0, 0.12);
  }
  @media screen and (max-width: 768px) {
    .table-responsive-vertical > .table {
      margin-bottom: 0;
      background-color: transparent;
    }
    .table-responsive-vertical > .table > thead,
    .table-responsive-vertical > .table > tfoot {
      display: none;
    }
    .table-responsive-vertical > .table > tbody {
      display: block;
    }
    .table-responsive-vertical > .table > tbody > tr {
      display: block;
      border: 1px solid #e0e0e0;
      border-radius: 2px;
      margin-bottom: 1.6rem;
    }
    .table-responsive-vertical > .table > tbody > tr > td {
      background-color: #fff;
      display: block;
      /*vertical-align: middle;*/
      text-align: right;
    }
    .table-responsive-vertical > .table > tbody > tr > td[data-title]:before {
      content: attr(data-title);
      float: left;
      font-size: inherit;
      font-weight: 400;
      color: #757575;
      text-transform: uppercase;
      text-align: left;
    }
    .table-responsive-vertical.shadow-z-1 {
      -webkit-box-shadow: none;
      -moz-box-shadow: none;
      box-shadow: none;
    }
    .table-responsive-vertical.shadow-z-1 > .table > tbody > tr {
      border: none;
      -webkit-box-shadow: 0 1px 3px 0 rgba(0, 0, 0, 0.12), 0 1px 2px 0 rgba(0, 0, 0, 0.24);
      -moz-box-shadow: 0 1px 3px 0 rgba(0, 0, 0, 0.12), 0 1px 2px 0 rgba(0, 0, 0, 0.24);
      box-shadow: 0 1px 3px 0 rgba(0, 0, 0, 0.12), 0 1px 2px 0 rgba(0, 0, 0, 0.24);
    }
    .table-responsive-vertical > .table-bordered {
      border: 0;
    }
    .table-responsive-vertical > .table-bordered > tbody > tr > td {
      border: 0;
      border-bottom: 1px solid #e0e0e0;
    }
    .table-responsive-vertical > .table-bordered > tbody > tr > td:last-child {
      border-bottom: 0;
    }
    .table-responsive-vertical > .table-striped > tbody > tr > td,
    .table-responsive-vertical > .table-striped > tbody > tr:nth-child(odd) {
      background-color: #fff;
    }
    .table-responsive-vertical > .table-striped > tbody > tr > td:nth-child(odd) {
      background-color: #f5f5f5;
    }
    .table-responsive-vertical > .table-hover > tbody > tr:hover > td,
    .table-responsive-vertical > .table-hover > tbody > tr:hover {
      background-color: #fff;
    }
    .table-responsive-vertical > .table-hover > tbody > tr > td:hover {
      background-color: rgba(0, 0, 0, 0.12);
    }
  }
  .table-striped.table-mc-red > tbody > tr:nth-child(odd) > td,
  .table-striped.table-mc-red > tbody > tr:nth-child(odd) > th {
    background-color: #fde0dc;
  }
  .table-hover.table-mc-red > tbody > tr:hover > td,
  .table-hover.table-mc-red > tbody > tr:hover > th {
    background-color: #f9bdbb;
  }
  @media screen and (max-width: 767px) {
    .table-responsive-vertical .table-striped.table-mc-red > tbody > tr > td,
    .table-responsive-vertical .table-striped.table-mc-red > tbody > tr:nth-child(odd) {
      background-color: #fff;
    }
    .table-responsive-vertical .table-striped.table-mc-red > tbody > tr > td:nth-child(odd) {
      background-color: #fde0dc;
    }
    .table-responsive-vertical .table-hover.table-mc-red > tbody > tr:hover > td,
    .table-responsive-vertical .table-hover.table-mc-red > tbody > tr:hover {
      background-color: #fff;
    }
    .table-responsive-vertical .table-hover.table-mc-red > tbody > tr > td:hover {
      background-color: #f9bdbb;
    }
  }
  .table-striped.table-mc-pink > tbody > tr:nth-child(odd) > td,
  .table-striped.table-mc-pink > tbody > tr:nth-child(odd) > th {
    background-color: #fce4ec;
  }
  .table-hover.table-mc-pink > tbody > tr:hover > td,
  .table-hover.table-mc-pink > tbody > tr:hover > th {
    background-color: #f8bbd0;
  }
  @media screen and (max-width: 767px) {
    .table-responsive-vertical .table-striped.table-mc-pink > tbody > tr > td,
    .table-responsive-vertical .table-striped.table-mc-pink > tbody > tr:nth-child(odd) {
      background-color: #fff;
    }
    .table-responsive-vertical .table-striped.table-mc-pink > tbody > tr > td:nth-child(odd) {
      background-color: #fce4ec;
    }
    .table-responsive-vertical .table-hover.table-mc-pink > tbody > tr:hover > td,
    .table-responsive-vertical .table-hover.table-mc-pink > tbody > tr:hover {
      background-color: #fff;
    }
    .table-responsive-vertical .table-hover.table-mc-pink > tbody > tr > td:hover {
      background-color: #f8bbd0;
    }
  }
  .table-striped.table-mc-purple > tbody > tr:nth-child(odd) > td,
  .table-striped.table-mc-purple > tbody > tr:nth-child(odd) > th {
    background-color: #f3e5f5;
  }
  .table-hover.table-mc-purple > tbody > tr:hover > td,
  .table-hover.table-mc-purple > tbody > tr:hover > th {
    background-color: #e1bee7;
  }
  @media screen and (max-width: 767px) {
    .table-responsive-vertical .table-striped.table-mc-purple > tbody > tr > td,
    .table-responsive-vertical .table-striped.table-mc-purple > tbody > tr:nth-child(odd) {
      background-color: #fff;
    }
    .table-responsive-vertical .table-striped.table-mc-purple > tbody > tr > td:nth-child(odd) {
      background-color: #f3e5f5;
    }
    .table-responsive-vertical .table-hover.table-mc-purple > tbody > tr:hover > td,
    .table-responsive-vertical .table-hover.table-mc-purple > tbody > tr:hover {
      background-color: #fff;
    }
    .table-responsive-vertical .table-hover.table-mc-purple > tbody > tr > td:hover {
      background-color: #e1bee7;
    }
  }
  .table-striped.table-mc-deep-purple > tbody > tr:nth-child(odd) > td,
  .table-striped.table-mc-deep-purple > tbody > tr:nth-child(odd) > th {
    background-color: #ede7f6;
  }
  .table-hover.table-mc-deep-purple > tbody > tr:hover > td,
  .table-hover.table-mc-deep-purple > tbody > tr:hover > th {
    background-color: #d1c4e9;
  }
  @media screen and (max-width: 767px) {
    .table-responsive-vertical .table-striped.table-mc-deep-purple > tbody > tr > td,
    .table-responsive-vertical .table-striped.table-mc-deep-purple > tbody > tr:nth-child(odd) {
      background-color: #fff;
    }
    .table-responsive-vertical .table-striped.table-mc-deep-purple > tbody > tr > td:nth-child(odd) {
      background-color: #ede7f6;
    }
    .table-responsive-vertical .table-hover.table-mc-deep-purple > tbody > tr:hover > td,
    .table-responsive-vertical .table-hover.table-mc-deep-purple > tbody > tr:hover {
      background-color: #fff;
    }
    .table-responsive-vertical .table-hover.table-mc-deep-purple > tbody > tr > td:hover {
      background-color: #d1c4e9;
    }
  }
  .table-striped.table-mc-indigo > tbody > tr:nth-child(odd) > td,
  .table-striped.table-mc-indigo > tbody > tr:nth-child(odd) > th {
    background-color: #e8eaf6;
  }
  .table-hover.table-mc-indigo > tbody > tr:hover > td,
  .table-hover.table-mc-indigo > tbody > tr:hover > th {
    background-color: #c5cae9;
  }
  @media screen and (max-width: 767px) {
    .table-responsive-vertical .table-striped.table-mc-indigo > tbody > tr > td,
    .table-responsive-vertical .table-striped.table-mc-indigo > tbody > tr:nth-child(odd) {
      background-color: #fff;
    }
    .table-responsive-vertical .table-striped.table-mc-indigo > tbody > tr > td:nth-child(odd) {
      background-color: #e8eaf6;
    }
    .table-responsive-vertical .table-hover.table-mc-indigo > tbody > tr:hover > td,
    .table-responsive-vertical .table-hover.table-mc-indigo > tbody > tr:hover {
      background-color: #fff;
    }
    .table-responsive-vertical .table-hover.table-mc-indigo > tbody > tr > td:hover {
      background-color: #c5cae9;
    }
  }
  .table-striped.table-mc-blue > tbody > tr:nth-child(odd) > td,
  .table-striped.table-mc-blue > tbody > tr:nth-child(odd) > th {
    background-color: #e7e9fd;
  }
  .table-hover.table-mc-blue > tbody > tr:hover > td,
  .table-hover.table-mc-blue > tbody > tr:hover > th {
    background-color: #d0d9ff;
  }
  @media screen and (max-width: 767px) {
    .table-responsive-vertical .table-striped.table-mc-blue > tbody > tr > td,
    .table-responsive-vertical .table-striped.table-mc-blue > tbody > tr:nth-child(odd) {
      background-color: #fff;
    }
    .table-responsive-vertical .table-striped.table-mc-blue > tbody > tr > td:nth-child(odd) {
      background-color: #e7e9fd;
    }
    .table-responsive-vertical .table-hover.table-mc-blue > tbody > tr:hover > td,
    .table-responsive-vertical .table-hover.table-mc-blue > tbody > tr:hover {
      background-color: #fff;
    }
    .table-responsive-vertical .table-hover.table-mc-blue > tbody > tr > td:hover {
      background-color: #d0d9ff;
    }
  }
  .table-striped.table-mc-light-blue > tbody > tr:nth-child(odd) > td,
  .table-striped.table-mc-light-blue > tbody > tr:nth-child(odd) > th {
    background-color: #e1f5fe;
  }
  .table-hover.table-mc-light-blue > tbody > tr:hover > td,
  .table-hover.table-mc-light-blue > tbody > tr:hover > th {
    background-color: var(--light-green-bg);
  }
  @media screen and (max-width: 767px) {
    .table-responsive-vertical .table-striped.table-mc-light-blue > tbody > tr > td,
    .table-responsive-vertical .table-striped.table-mc-light-blue > tbody > tr:nth-child(odd) {
      background-color: #fff;
    }
    .table-responsive-vertical .table-striped.table-mc-light-blue > tbody > tr > td:nth-child(odd) {
      background-color: #e1f5fe;
    }
    .table-responsive-vertical .table-hover.table-mc-light-blue > tbody > tr:hover > td,
    .table-responsive-vertical .table-hover.table-mc-light-blue > tbody > tr:hover {
      background-color: #fff;
    }
    .table-responsive-vertical .table-hover.table-mc-light-blue > tbody > tr > td:hover {
      background-color: #b3e5fc;
    }
  }
  .table-striped.table-mc-cyan > tbody > tr:nth-child(odd) > td,
  .table-striped.table-mc-cyan > tbody > tr:nth-child(odd) > th {
    background-color: #e0f7fa;
  }
  .table-hover.table-mc-cyan > tbody > tr:hover > td,
  .table-hover.table-mc-cyan > tbody > tr:hover > th {
    background-color: #b2ebf2;
  }
  @media screen and (max-width: 767px) {
    .table-responsive-vertical .table-striped.table-mc-cyan > tbody > tr > td,
    .table-responsive-vertical .table-striped.table-mc-cyan > tbody > tr:nth-child(odd) {
      background-color: #fff;
    }
    .table-responsive-vertical .table-striped.table-mc-cyan > tbody > tr > td:nth-child(odd) {
      background-color: #e0f7fa;
    }
    .table-responsive-vertical .table-hover.table-mc-cyan > tbody > tr:hover > td,
    .table-responsive-vertical .table-hover.table-mc-cyan > tbody > tr:hover {
      background-color: #fff;
    }
    .table-responsive-vertical .table-hover.table-mc-cyan > tbody > tr > td:hover {
      background-color: #b2ebf2;
    }
  }
  .table-striped.table-mc-teal > tbody > tr:nth-child(odd) > td,
  .table-striped.table-mc-teal > tbody > tr:nth-child(odd) > th {
    background-color: #e0f2f1;
  }
  .table-hover.table-mc-teal > tbody > tr:hover > td,
  .table-hover.table-mc-teal > tbody > tr:hover > th {
    background-color: #b2dfdb;
  }
  @media screen and (max-width: 767px) {
    .table-responsive-vertical .table-striped.table-mc-teal > tbody > tr > td,
    .table-responsive-vertical .table-striped.table-mc-teal > tbody > tr:nth-child(odd) {
      background-color: #fff;
    }
    .table-responsive-vertical .table-striped.table-mc-teal > tbody > tr > td:nth-child(odd) {
      background-color: #e0f2f1;
    }
    .table-responsive-vertical .table-hover.table-mc-teal > tbody > tr:hover > td,
    .table-responsive-vertical .table-hover.table-mc-teal > tbody > tr:hover {
      background-color: #fff;
    }
    .table-responsive-vertical .table-hover.table-mc-teal > tbody > tr > td:hover {
      background-color: #b2dfdb;
    }
  }
  .table-striped.table-mc-green > tbody > tr:nth-child(odd) > td,
  .table-striped.table-mc-green > tbody > tr:nth-child(odd) > th {
    background-color: #d0f8ce;
  }
  .table-hover.table-mc-green > tbody > tr:hover > td,
  .table-hover.table-mc-green > tbody > tr:hover > th {
    background-color: #a3e9a4;
  }
  @media screen and (max-width: 767px) {
    .table-responsive-vertical .table-striped.table-mc-green > tbody > tr > td,
    .table-responsive-vertical .table-striped.table-mc-green > tbody > tr:nth-child(odd) {
      background-color: #fff;
    }
    .table-responsive-vertical .table-striped.table-mc-green > tbody > tr > td:nth-child(odd) {
      background-color: #d0f8ce;
    }
    .table-responsive-vertical .table-hover.table-mc-green > tbody > tr:hover > td,
    .table-responsive-vertical .table-hover.table-mc-green > tbody > tr:hover {
      background-color: #fff;
    }
    .table-responsive-vertical .table-hover.table-mc-green > tbody > tr > td:hover {
      background-color: #a3e9a4;
    }
  }
  .table-striped.table-mc-light-green > tbody > tr:nth-child(odd) > td,
  .table-striped.table-mc-light-green > tbody > tr:nth-child(odd) > th {
    background-color: #f1f8e9;
  }
  .table-hover.table-mc-light-green > tbody > tr:hover > td,
  .table-hover.table-mc-light-green > tbody > tr:hover > th {
    background-color: #dcedc8;
  }
  @media screen and (max-width: 767px) {
    .table-responsive-vertical .table-striped.table-mc-light-green > tbody > tr > td,
    .table-responsive-vertical .table-striped.table-mc-light-green > tbody > tr:nth-child(odd) {
      background-color: #fff;
    }
    .table-responsive-vertical .table-striped.table-mc-light-green > tbody > tr > td:nth-child(odd) {
      background-color: #f1f8e9;
    }
    .table-responsive-vertical .table-hover.table-mc-light-green > tbody > tr:hover > td,
    .table-responsive-vertical .table-hover.table-mc-light-green > tbody > tr:hover {
      background-color: #fff;
    }
    .table-responsive-vertical .table-hover.table-mc-light-green > tbody > tr > td:hover {
      background-color: #dcedc8;
    }
  }
  .table-striped.table-mc-lime > tbody > tr:nth-child(odd) > td,
  .table-striped.table-mc-lime > tbody > tr:nth-child(odd) > th {
    background-color: #f9fbe7;
  }
  .table-hover.table-mc-lime > tbody > tr:hover > td,
  .table-hover.table-mc-lime > tbody > tr:hover > th {
    background-color: #f0f4c3;
  }
  @media screen and (max-width: 767px) {
    .table-responsive-vertical .table-striped.table-mc-lime > tbody > tr > td,
    .table-responsive-vertical .table-striped.table-mc-lime > tbody > tr:nth-child(odd) {
      background-color: #fff;
    }
    .table-responsive-vertical .table-striped.table-mc-lime > tbody > tr > td:nth-child(odd) {
      background-color: #f9fbe7;
    }
    .table-responsive-vertical .table-hover.table-mc-lime > tbody > tr:hover > td,
    .table-responsive-vertical .table-hover.table-mc-lime > tbody > tr:hover {
      background-color: #fff;
    }
    .table-responsive-vertical .table-hover.table-mc-lime > tbody > tr > td:hover {
      background-color: #f0f4c3;
    }
  }
  .table-striped.table-mc-yellow > tbody > tr:nth-child(odd) > td,
  .table-striped.table-mc-yellow > tbody > tr:nth-child(odd) > th {
    background-color: #fffde7;
  }
  .table-hover.table-mc-yellow > tbody > tr:hover > td,
  .table-hover.table-mc-yellow > tbody > tr:hover > th {
    background-color: #fff9c4;
  }
  @media screen and (max-width: 767px) {
    .table-responsive-vertical .table-striped.table-mc-yellow > tbody > tr > td,
    .table-responsive-vertical .table-striped.table-mc-yellow > tbody > tr:nth-child(odd) {
      background-color: #fff;
    }
    .table-responsive-vertical .table-striped.table-mc-yellow > tbody > tr > td:nth-child(odd) {
      background-color: #fffde7;
    }
    .table-responsive-vertical .table-hover.table-mc-yellow > tbody > tr:hover > td,
    .table-responsive-vertical .table-hover.table-mc-yellow > tbody > tr:hover {
      background-color: #fff;
    }
    .table-responsive-vertical .table-hover.table-mc-yellow > tbody > tr > td:hover {
      background-color: #fff9c4;
    }
  }
  .table-striped.table-mc-amber > tbody > tr:nth-child(odd) > td,
  .table-striped.table-mc-amber > tbody > tr:nth-child(odd) > th {
    background-color: #fff8e1;
  }
  .table-hover.table-mc-amber > tbody > tr:hover > td,
  .table-hover.table-mc-amber > tbody > tr:hover > th {
    background-color: #ffecb3;
  }
  @media screen and (max-width: 767px) {
    .table-responsive-vertical .table-striped.table-mc-amber > tbody > tr > td,
    .table-responsive-vertical .table-striped.table-mc-amber > tbody > tr:nth-child(odd) {
      background-color: #fff;
    }
    .table-responsive-vertical .table-striped.table-mc-amber > tbody > tr > td:nth-child(odd) {
      background-color: #fff8e1;
    }
    .table-responsive-vertical .table-hover.table-mc-amber > tbody > tr:hover > td,
    .table-responsive-vertical .table-hover.table-mc-amber > tbody > tr:hover {
      background-color: #fff;
    }
    .table-responsive-vertical .table-hover.table-mc-amber > tbody > tr > td:hover {
      background-color: #ffecb3;
    }
  }
  .table-striped.table-mc-orange > tbody > tr:nth-child(odd) > td,
  .table-striped.table-mc-orange > tbody > tr:nth-child(odd) > th {
    background-color: #fff3e0;
  }
  .table-hover.table-mc-orange > tbody > tr:hover > td,
  .table-hover.table-mc-orange > tbody > tr:hover > th {
    background-color: #ffe0b2;
  }
  @media screen and (max-width: 767px) {
    .table-responsive-vertical .table-striped.table-mc-orange > tbody > tr > td,
    .table-responsive-vertical .table-striped.table-mc-orange > tbody > tr:nth-child(odd) {
      background-color: #fff;
    }
    .table-responsive-vertical .table-striped.table-mc-orange > tbody > tr > td:nth-child(odd) {
      background-color: #fff3e0;
    }
    .table-responsive-vertical .table-hover.table-mc-orange > tbody > tr:hover > td,
    .table-responsive-vertical .table-hover.table-mc-orange > tbody > tr:hover {
      background-color: #fff;
    }
    .table-responsive-vertical .table-hover.table-mc-orange > tbody > tr > td:hover {
      background-color: #ffe0b2;
    }
  }
  .table-striped.table-mc-deep-orange > tbody > tr:nth-child(odd) > td,
  .table-striped.table-mc-deep-orange > tbody > tr:nth-child(odd) > th {
    background-color: #fbe9e7;
  }
  .table-hover.table-mc-deep-orange > tbody > tr:hover > td,
  .table-hover.table-mc-deep-orange > tbody > tr:hover > th {
    background-color: #ffccbc;
  }
  @media screen and (max-width: 767px) {
    .table-responsive-vertical .table-striped.table-mc-deep-orange > tbody > tr > td,
    .table-responsive-vertical .table-striped.table-mc-deep-orange > tbody > tr:nth-child(odd) {
      background-color: #fff;
    }
    .table-responsive-vertical .table-striped.table-mc-deep-orange > tbody > tr > td:nth-child(odd) {
      background-color: #fbe9e7;
    }
    .table-responsive-vertical .table-hover.table-mc-deep-orange > tbody > tr:hover > td,
    .table-responsive-vertical .table-hover.table-mc-deep-orange > tbody > tr:hover {
      background-color: #fff;
    }
    .table-responsive-vertical .table-hover.table-mc-deep-orange > tbody > tr > td:hover {
      background-color: #ffccbc;
    }
  }
  table tr:nth-of-type(even) {
      background-color: transparent !important;
  }
  table tr{
    font-family: Muli-Regular;
    font-size: 14px;
  }
  thead th {
    font-family: Muli-Bold!important;
    font-size: 15px!important;
    color: #283346!important;
  }
  
  .page-link {
      margin: 0px 3px!important;
      font-family: Muli-Regular;
  }
  .page-item.active .page-link {
      z-index: 3;
      color: #fff;
      background-color: #007FFF!important;
      border-color:  #007FFF!important;
  }
  
  .action-tb-link img{
    height: 20px;
  }
  /**
  End Table
  **/

  .icon-action-tr{
    text-decoration: none;
    display: inline-block;
    padding: 0px 7px;
  }
  .icon-action-tr img, .dropdown-item img{
    height: 25px!important;
    width: 25px!important;
  }

  .filter-input-files{
    background: #fff!important; height: 45px!important; background: #fff!important; border-bottom: 1px solid #07A143!important; border-left: 1px solid #07A143!important; border-top: 1px solid #07A143!important; border-radius: 5px 0px 0px 5px!important;
  }
  .action-input-files{
    height: 45px!important; background: #fff!important; border-bottom: 1px solid #07A143!important; border-right: 1px solid #07A143!important; border-top: 1px solid #07A143!important; border-radius: 0px 5px 5px 0px!important;
  }
  .search-input-files{
    border-top: 1px solid #07A143!important;border-bottom: 1px solid #07A143!important;
    background: var(--Color, #FFF)!important; height: 45px!important; 
  }
  


/* checkbox - (toggle switch) style */
.switch1 {
    position: relative;
    display: inline-block;
    width: 50px;
    height: 25px;
  }
  
  /* hide custom checkbox and apply custom style to make toggle switch */
  .switch1 input {
    display: none;
  }
  .slider1 { /* style toggle switch itself */
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background-color: #FC3E4D;
  }
  .slider1::before { /* style toggle switch knob when OFF */
    position: absolute;
    content: "";
    height: 20px;
    width: 20px;
    left: 3px;
    bottom: 3px;
    background-color: #fff;
    transition: 0.4s;
    box-shadow: 0 1px 3px rgba(0,0,0,0.12), 0 1px 2px rgba(0,0,0,0.24);
    transition: all 0.3s cubic-bezier(.25,.8,.25,1);
  }
  .switch1 input[type="checkbox"]:checked + .slider1::before { /* style toggle switch knob when ON */
    -webkit-transform: translateX(22px);
    -ms-transform: translateX(22px);
    transform: translateX(22px);
  }
  .switch1 input[type="checkbox"]:checked + .slider1 { /* style toggle switch background when ON */
    background-color: #1AB846;
  }
  /* apply border-radius to switch */
  .slider1.round1 {
    border-radius: 34px;
  }
  .slider1.round1::before {
    border-radius: 50%;
  }

  .title-section{
    color: #000;
    font-family: HurmeGeometricSans1;
    font-size: 20px;
    font-style: normal;
    font-weight: 700;
    line-height: 22px;
    text-transform: uppercase !important;

  }
  .title-section h4  {
    text-transform: uppercase !important;
  }
  .tittle-section i{
    font-weight: 900;
    color: gray;
  }

  .default-button{
    border-radius: 6px;
    background: var(--Green, #07A143) !important; 
    padding: 10px 15px!important; 
    border-radius: 7px!important; 
    border: 1px solid #07A143 !important;
    color: white !important;
  }
  .default-button.bg-transparent{
    color: #07A143 !important;
  }
  .other-button{
    background: #d6d9e4 !important;
    border-color: #d6d9e4 !important;
    color: #001736 !important;
  }
  .footer-section{
    background: #fff; 
    padding: 20px 0px; 
    box-shadow: 0 3px 6px rgba(0,0,0,0.16), 0 3px 6px rgba(0,0,0,0.23);
    position: fixed;
    bottom: 0;
    width: 100%;
    z-index: 10;
    text-align: right;
    padding-right: 2%;
  }

  .body-wrapper .main-content{
    margin-bottom: 3%;
  }

  .navbar-nav .dropdown-menu .dropdown-item{
    border: 1px solid transparent;
  }
  .navbar-nav .dropdown-menu .dropdown-item:hover{
    background: #000!important;
    border: 1px solid #ddd;
  }
  
  .title-parameter-role {
    margin: 2px 15px;
    height: 18px;
    font-family: OpenSans-Regular;
    font-size: 14px;
    color: #282828;
  }
  .role-check-param {
    width: 22%;
    display: inline-block;
    text-align: right;
  }
  .role-check-param a {
    color: #6d8c98;
    font-size: 14px;
  }
  .role-check-param input {
    margin-top: 10px;
  }
  
  .item-detail-transaction input[type='checkbox'] {
    margin-right: 5px;
  }
  .item-card-transaction-detail {
    font-family: Arial;
    font-size: 13px;
    font-weight: 400;
    line-height: 18px;
    color: #333333;
    background-color: #ffffff;
    border: 1px solid #d6d9e4;
    border-radius: 1px;
    box-shadow: 0px 1px 5px 0px #d6d9e4;
    margin-bottom: 15px;
  }
  .card-item-detail-transaction {
    padding: 7px;
  }
  .item-detail-transaction {
    font-family: OpenSans-Regular;
    font-size: 13px;
    color: #292929;
    display: block;
    margin-top: 7px;
    margin-bottom: 5px;
    white-space: nowrap !important;
    overflow: hidden !important;
    text-overflow: ellipsis !important;
  }
  .list-group-item{
    background: transparent!important;
  }
  
  .list-group-flush > .list-group-item {
    border-color: #ddd;
  }
  .title-detail-transaction {
    font-family: OpenSans-Bold;
    font-size: 13px;
    color: #6d8c98;
    margin: 7px;
  }
  .card-target-parameter{
    background: #fff; padding: 7px;
  }

.modal-custom{
    border-radius: 15px;
    padding: 1%;
}

.modal-custom .close{
    background: transparent;
    border: 2px solid #838A9C;
    height: 2.2em;
    width: 2.2em;
    border-radius: 50%;
    color: #838A9C;
    /* font-size: 1.4em; */
    /* margin-right: 4%; */
    display: flex;
    justify-content: center ;
   
}

.modal-custom .close span, .modal-detail .close span{
    font-size: 3em;
    align-self: center;
}

.modal-custom h5{
    font-size: 17px;   
}
.modal-custom h5.modal-title{
  font-size: 30px;
  font-weight: 800;
}


.modal-custom .modal-footer button{
    width: 100%;
}

.form-group-input-file{
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    gap: 10px;
    height: 250px;
    padding: 20px;
    border: 2px dashed #A4ABBD;
    color: #222245;
    cursor: pointer;
    background : #f6f1f9;
    border-radius: 10px;
}

.form-group-input-file label{
    font-size: 20px;
    font-weight: bold;
    text-align: center;
    font-weight: 700;
}

.modal-custom input[type=file] {
    width: 350px;
    max-width: 100%;
    color: #107C41;
    padding: 8px;
    background-color: #fff;
    border: 1px solid #107C41;
}
  
.modal-custom input[type=file]:focus {
    outline: 2px dashed #107C41;
    outline-offset: 2px;
}
  
.modal-custom input[type=file]::file-selector-button {
    margin-right: 8px;
    border: none;
    background-color: #107C41;
    padding: 8px 12px;
    color: #fff;
    cursor: pointer;
}
  
.modal-custom input[type=file]::file-selector-button:hover {
    background-color: #107C41;
}
  
.leftsize-card .custom-height-sidebar{
  border-right: none;
  width: auto !important;
}

.sidebar-nav ul .sidebar-item .sidebar-link:hover span{
  background-color: rgba(41, 82, 255, 0.1);
    color: #2952ff;
}

.sidebar-nav ul .sidebar-item .sidebar-link:hover{
  background: none !important;
}

.cycle-card, .cap-card{
  margin-bottom: 10%;
}
.cycle-card h3, .cap-card h3{
  font-family: 'Arial';
  font-size: 1rem;
}

.cycle-card span, .profile-info span{
  color : #768b9e;
  font-size: 0.7rem;
}

.cycle-card h5, .cap-card h5, .profile-info h5{
  font-size: 1rem;
}

.cycle-card .cycle-info{
  display: grid;
  align-content: space-around;
  align-items: stretch;
  min-height: 210px;
}

.cycle-card .cycle-actions{
  display: grid;
  align-content: end;
  justify-content: end;
  margin-bottom: 6%;
  margin-top: 3%;
}

.btn.dropdown-toggle::after{
  display: none;
}

.cycle-card .cycle-actions span{
  text-align: end;
  color: black;
  font-size: 1.1rem;
}

.cap-card .card-dash-csu{
  position: relative;
}

.cap-card .card-dash-csu .btn-group .btn, .cycle-actions .btn-group{
  position: absolute;
  top: 0%;
  right: 0%;
}

.cap-card .cap-actions {
  display: flex;
  justify-content: space-between;
  margin-bottom: 2%;
  align-items: center;
}

.cap-card .cap-actions .switch-action{
  display: flex;
  justify-content: space-evenly;
}

.cap-card .cap-info {
  display: flex;
  align-items: stretch;
  min-height: 210px;
  flex-direction: column;
  justify-content: space-between;
  align-items: flex-start;
  width: 100%;
}

.success-modal .modal-body img{
  display: block;
  margin: auto;
  width: 55%;
}
.success-modal .modal-body .success-text{
  text-align: center;
  width: 72%;
  margin: auto;
  color: black;;
}
.success-modal .modal-body .success-text h2{
  font-size: 2.75em;
}
.success-modal .modal-body .success-text p{
  line-height: 1.8;
    font-weight: 500;
    font-size: 22px;
}
.success-modal .modal-footer button{
  background-color: #001736;
  font-weight: 400;
  font-size: 1.5em;
  border-radius: 10px;
}
.modal-detail .modal-dialog{
  margin-right: 0%;
}

.modal-detail .close{
  position: absolute;
  top: 50%;
  left: -5%;
  background: black;
  color: white;
  width: 4em;
  height: 4em;
  border-radius: 50%;
  border: 1em solid #e2e3e4;
  display: flex;
  justify-content: center ;
  z-index: 1;
}

.modal-detail .btn-add{
  background-color: #001736;
  color: white;
}

.modal-detail .btn-edit{
  background-color: #d6d9e4;
  border: 1px solid #001736;
  color: #001736;
}

.modal-detail .btn-save{
  background-color: #07A143;
  border: 1px solid #07A143;
  color: #fff;
}


.modal-detail .btn i{
  font-size: 1em;
}

.modal-detail .btn-add, .modal-detail .btn-edit{
  border-radius: 10px;
  font-size: 1.5em;
  font-weight: 600;
}

.div-table{
  border: 1px solid #d6d9e4;
  border-top-left-radius: 10px;
  border-top-right-radius: 10px;
}

.div-table thead{
  border-bottom: 1px solid #d6d9e4;
}

.custom-modal-button button{
  width: 30% !important;
  border-radius: 10px;
}

.btn-cancel{
  background-color: #d6d9e4 !important;  
  border: 1px solid #d6d9e4 !important;  
  color: var(--dark) !important;
}

.btn-dark{
  background-color: var(--dark) !important;  
  border: 1px solid var(--dark) !important;  
  color: white !important;
}

.text-success1 {
  color: var(--green) !important;
}

.cap-card .row::after{
  content: "";
  display: block;
  /* background: red; */
  height: 5px;
  width: 100%;
}

.bb-color-success::after{
  background: green;
}

.bb-color-danger::after{
  background: red;
}
.bb-color-warning::after{
  background: yellow;
}

.cap-card .row{
  padding: 2% 0 0 0 !important;
  /* margin: 0 !important; */
}

.cap-card{
  margin-bottom: 10px !important;
}

.cap-card .cap-info span{
  color: #a59898;
  font-size: 17px;
}

.cap-card .cap-info .nb-Scap span{
  border: solid 1px #a59898;
  border-radius: 30px;
  padding: 5%;
  display: block;
  text-align: center;
}

.cap-card .cap-actions div span{
  color: #a59898;
  font-size: 1em;
}

.customRadio input[type="radio"] {
  position: absolute;
  left: -9999px;
}

.customRadio input[type="radio"]+label {
  position: relative;
  padding: 3px 0 0 40px;
  cursor: pointer;
  color: black;
  font-weight: 700;
}

.customRadio input[type="radio"]+label:before {
  content: '';
  background: #fff;
  border: 2px solid #107c41;
  height: 25px;
  width: 25px;
  border-radius: 50%;
  position: absolute;
  top: 0;
  left: 0;
}

.customRadio input[type="radio"]+label:after {
  content: '';
  background: #107c41;
  width: 15px;
  height: 15px;
  border-radius: 50%;
  position: absolute;
  top: 5px;
  left: 5px;
  opacity: 0;
  transform: scale(2);
  transition: transform 0.3s linear, opacity 0.3s linear;
}

.customRadio input[type="radio"]:checked+label:after {
  opacity: 1;
  transform: scale(1);
}

.customRadio input[type="radio"]:checked+label{
  color: #107c41;
}

.customRadio{
  width: 50%;
  background: white;
  padding: 2%;
  margin-bottom: 2%;
  border-radius: 14px;
}

#login-page .input-group{
  background-color: white;
  border-radius: 25px;  
  border: 1px solid #d7d7d7;
}

#login-page .input-group input{
  border: none;
}
 
#login-page .input-group .input-group-prepend .input-group-text, #login-page .input-group .input-group-append .input-group-text{
  background: none;
  border: none;
  color: #d7d7d7;
  font-size: 20px;
}

#login-page .input-group .input-group-prepend .input-group-text{
  color: #000;
}

#login-page .body-wrapper{
  /* width: 50%; */
  text-align: center;
  height: 90%;
  align-content: center;
  margin: 0 auto;
}
#login-page h5{
  font-weight: 500;
  line-height: 2;
}
#login-page h3{
  font-size: 3em;
  text-align: center;
}
#login-page .body-wrapper img.top-login-image{
  display: none;
}
#login-page .body-wrapper{
  display: flex;
  flex-direction: column;
  justify-content: center;
  height: 100%;
  margin: 0 auto !important;
  padding-bottom: 100px;
}

#login-page .design-login{
  background-color: white;
  display: flex;
  justify-content: center;
  flex-direction: column;
  align-items: center;
}

#login-page img {
  width: 75%;
  display: block;
  margin: 0 auto;
}

#login-page .design-login div h2{
  width: 90%;
  text-align: center;
  margin: 0 auto;
  font-size: 3em;
  font-family: 'Manrope-Bold';
}

#login-page .footer-section{
  background: #14452f;
  box-shadow: none;
  width: 100%; 
  position: absolute;
  bottom: 0;
  right: 0;
  left: 0;
}

#login-page .footer-section div{
  color: #fff;
}
#login-page .footer-section div a{
  color: white;
  font-weight: 900;
}



@media screen and (max-width: 767px) {
  #login-page .design-login{
    display: none;
  }
  #login-page .body-wrapper img{
    display: block;
  }
}

.modal-detail#detailProfile .table td img, .modal-detail#editDetailProfile .table td img{
  width: 160px;
  height: 160px;
}

.modal-detail#detailProfile .modal-dialog, .modal-detail#editDetailProfile .modal-dialog{
  height: 100vh;
  margin-top: 0;
  margin-right: -1%;
}
.modal-detail#detailProfile .modal-dialog .modal-content, .modal-detail#editDetailProfile .modal-dialog .modal-content{
  height: 100%;
  border-radius: 0%;
}

.modal-detail .image-action .btn-edit{
  border: none;
}

.modal-detail .image-action .btn-add{
  color: #07A143;
  border: 1px solid #07A143;
  background: none;
}

.modal-detail#editDetailProfile .image-action button.btn {
  width: 150px;
  font-size: 14px !important;
  height: 60px;
}


.profile-info div{
  margin-bottom: 10%;
}

.profile-dropdown .dropdown-item img{
  height: 30px !important;
  width: 30px !important;
}
.profile-dropdown .dropdown-item h6{
  color: white;
  font-size: 0.7em;
  font-weight: 300;
}

.profile-dropdown .dropdown-item i.bi.bi-person-circle{
  color: white;   
  font-size: 35px;
}

.profile-dropdown .dropdown-item .log-out a{
  display: flex;
  width: 111%;
  justify-content: space-around;
  color: #4d8753;
  font-weight: 600;
}

.profile-dropdown .dropdown-item .log-out a:hover{
  color: #4FCE5D;
}

.profile-dropdown .dropdown-item .log-out a{
  font-size: 1.3em !important;
}

.profile-dropdown .dropdown-item .log-out h6{
  margin-left: 5%;
  font-size: 1em;  
}

.navbar-nav .dropdown-menu.profile-dropdown  .dropdown-item:hover{
  background: none !important;
  border: none !important;
}

:root{
  --green : #07A143;
  --green-dark : #107C41;
  --light-green-bg : #E7FFED;
  --gray : #D6D9E4;
  --dark : #001736;
  --green-dark1 : #14452F;
  --green1 : #107b40;
  --light-grey : #E2E3E4;
  --gray-text : #8B8F92;
  --gray-bg2: #EBECF2;
  --dark2: #3B4256;
}
.form-control:focus, .form-select:focus{
  border-color: var(--green) !important;
}

.sidebar-link.active{
  background: none !important;
  font-weight: 500 !important;
  color: var(--green-dark) !important;
}

.sidebar-nav ul .sidebar-item .sidebar-link:hover span, #sidenav-admin-ecole .sidebar-item a:hover, .sidebar-nav ul .sidebar-item .sidebar-link.active{
  background: var(--light-green-bg) !important;
  color: var(--green-dark) !important;
  /* border: solid 1px #D6D9E4 !important; */
}

a.stats-page-descript {
  color: var(--green);
}
.horizontal-menu .bottom-navbar .page-navigation > .nav-item:hover > .nav-link i, .horizontal-menu .bottom-navbar .page-navigation > .nav-item:hover > .nav-link .menu-title{
  color: var(--green);
}

a{
  color: var(--green);
}

.list-group.calendar-section, .list-group.genInfo-section, .list-group.parcours-section, .list-group.apropos-section, .list-group.cours-section{
  margin-bottom: 3%;
  border-top-left-radius: 15px;
  border-top-right-radius: 15px; 
}

.list-group.calendar-section .list-group-item, .list-group.genInfo-section .list-group-item, .list-group.parcours-section .list-group-item, .list-group.apropos-section .list-group-item, .list-group.cours-section .list-group-item{
  padding: 2% 3%;
}

.list-group.calendar-section, .list-group.genInfo-section{
  margin-left: 3%;
  margin-bottom: 6%;
}

.list-group-item.header{
  font-size: 25px;
  font-weight: 600;
  color: black;
  display: flex;
  justify-content: space-between;
}

.list-group-item.header button{
  background-color: var(--gray);
  color : var(--dark);
  border-radius: 5px;
}

.list-group-item p{
  color: #000;
  line-height: 29px;
  font-weight: 500;
}

.parcours-section .accordion-button{
  background-color: var(--green-dark1);
  color: #fff;
  font-weight: 600;
  border-radius: 9px;
}

.parcours-section .accordion-item:first-of-type .accordion-button {
  border-top-left-radius: 9px;
  border-top-right-radius: 9px;
}

.parcours-section .accordion-item:last-of-type .accordion-button.collapsed {
  border-bottom-right-radius: 9px;
  border-bottom-left-radius: 9px;
}

.parcours-section .accordion-button[aria-expanded="true"]{
  background-color: var(--green1);
  color: #fff;
  font-weight: 600;
  border-radius: 9px;
}

.parcours-section .accordion-button::after{
  color: #fff;
  font-weight: 600;
}

.parcours-section .accordion-button::after{
  background-image: url(../images/icons/chevron-down-solid.svg) !important; 
}

.parcours-section .accordion-button:not(.collapsed)::after {
  background-image: url(../images/icons/chevron-down-solid.svg) !important;
  transform: rotate(-180deg);
}

.accordion-collapse.collapse.show .list-group-item{
  border-top: none !important;
  border-left: none;
  border-right: none;
  color: black;
  font-weight: 300;
}

.nav-attribute button.btn, .nav-attribute a.btn {
  background-color: var(--dark);
  color: #fff;
  border-radius: 10px;
  /* padding: 1.35% 3%;
  margin-top: 9px; */
  height: 55px;
}

.nav-attribute select, .nav-attribute input{
  background-color: var(--light-grey);  
  /* padding: 4% 3%; */
  height: 55px;
  color: black;
}

.nav-attribute .form-group span{
  position: absolute;
}

.remove-icon {
  display: flex;
  justify-content: flex-end;
  align-items: center;
}

.remove-icon div{
  display: flex;
  box-shadow: 2px 5px 8px -3px #b5b1b1;
  padding: 2%;
  border-radius: 7px;
  align-items: center;    
  height: 50px;
}

.remove-icon .add-icon{
  background-color: transparent;
  font-size: 20px;
  border: 2px solid var(--green);
}

.remove-icon .add-icon i::before{
  color: var(--green);
  font-size: 28px;
  margin-top: 0%;
}

.remove-icon .edit-icon{
  background: none !important;
  color: var(--green) !important;
  font-size: 20px;
}
.remove-icon h3{
  height: 22px;
  width: 22px;
  background-color: red;
  border-radius: 50%;
  font-size: 15px;
  color: white;
  justify-content: center;
  align-items: center;
  font-weight: 800;
  display: flex;
}

.attribution-pa-ca input, .attribution-pa-ca select{
  padding: 3%;
  border: 1px solid #A4ABBD;
  color: #000;
  font-weight: 500;
  height: 50px;
}

.attribution-pa-ca select.sous-capa{
  background-color: var(--light-grey);
}

.attribution-pa-ca .nbre-scapa{
  display: flex;
  justify-content: center;
  align-items: center;
}

a.btn-outline{
  border: 1px solid var(--green) !important;
  background: none !important;
  color: var(--green) !important;
}


nav[aria-label="breadcrumb"]{
  position: absolute;
  top: 1%;
  left: 2%;
  height: 55px;
  display: flex;
  flex-direction: column;
  justify-content: center;
}

.sous-capacite .title{
  display: grid;
}
.sous-capacite .title h1{
  font-size: 3em;
  text-transform: uppercase;
  color: #000;
}

.sous-capacite .title span.text-uppercase{
  font-size: 2em;
  color: var(--gray-text)
}



.list-group.cours-section .list-group.cours-list .list-group-item{
  box-shadow: -2px -1px 20px 3px #c1c1c1;
  margin-bottom: 1%;
  border-radius: 8px;
}

.cta-dash-btn{
  border: 1px solid var(--green) !important;
}

#sidenav-admin-ecole .sidebar-item{
  padding: 2% 1%;
  color: #000;
}
#sidenav-admin-ecole .sidebar-item a span, #sidenav-admin-ecole .sidebar-item a i{
  color: #000;
}

#sidenav-main .brand-logo{
  margin-top: 2%;
}

#sidenav-admin-ecole .brand-logo{
  padding: 8px 16px;
}

#sidenav-admin-ecole .brand-logo .logo-img img, #sidenav-main .brand-logo .logo-img, .app-logo{
  height: 60px;
  width: 60px;
  background-color: #EBF7F7 ;
  display: flex;
  justify-content: center;
  align-items: center;
  border-radius: 50%;
  padding: 5px;
  object-fit: contain;
}

#sidenav-admin-ecole .brand-logo .app-name-info a.app-name span, #sidenav-main .brand-logo .app-name-info a.app-name span, .body-wrapper .brand-logo .app-name-info a.app-name span, .nav-app-name{
  font-weight: bolder;
  color: #000;
  letter-spacing: -1px;
  font-size: 34px;
  text-transform: uppercase;
  font-family: 'Poppins-Bold';
}

.body-wrapper .logo-img{
  background: white;
  display: flex;
  justify-content: center;
  align-items: center;
  border-radius: 50%;
  height: 60px;
  width: 60px;
}

#sidenav-admin-ecole .brand-logo-name a.school-name span{
  font-weight: 800;
  color: #14452F;
  letter-spacing: 2px;
  font-size: 20px;
}

#sidenav-admin-ecole .brand-logo-name, #sidenav-main .brand-logo-name{
  background-color: #EBF7F7 ;
  border-radius: 6px;
  padding: 7%;
}

.sidebar-end ul{
  background-color: var(--light-green-bg);
  border-radius: 5px;
  margin-bottom: 15%;
}

.sidebar-end li{
  width: 90%;
}

.sidebar-end li span{
  color: var(--green-dark);
}

.sidebar-end li.organisation-name span{
  text-wrap: wrap;
  font-weight: 800;
  font-size: 17px;
}

.sidebar-nav ul .sidebar-item .sidebar-link{
  font-family: 'Manrope-SemiBold' !important;
}
.sidebar-nav ul .nav-small-cap a {
  font-family: 'Manrope-Bold';
  padding: 5% 2%;
  border-radius: 5px;
} 

body{
  position: relative;
}

.admin-ecole .row div.info{
  background-color: #fff;
  border-radius: 10px;
  border: 1px solid #B8B8B8;
  height: 100%;
  padding: 4%;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
}

.admin-ecole .row div.info.dark-bg{
  background: var(--dark) !important;
  border: 1px solid #fff !important;
  color: #fff;
}

.admin-ecole .row div.info.dark-bg h1,.admin-ecole .row div.info.dark-bg h3{
  color: #fff
}

.admin-ecole .add-more{
  display: flex;
  justify-content: center;
  align-items: center;
  font-size: 55px;
  font-weight: 700;
  color: var(--green);
  border: 2px dashed var(--green);
  background-color: #fff;
  border-radius: 10px;
}

.admin-ecole .row.ligne-2 div.info, .admin-ecole .row.ligne-3 div.info{
  height: 100%;
}

.admin-ecole circle.fg {
  transform: rotate(-90deg);
  transform-origin: 125px 125px;
}

.admin-ecole .circular-progress circle.bg {
  stroke: #ddd;
}

.info-progress .progress-circular {
	width: 250px;
  height: 250px;
  margin: auto;
  display: flex;
  justify-content: center;
  align-items: center;
  position: relative;
}

.progress-circular svg {
	width: 200px;
	height: 200px;
}

.progress-circular circle {
	transform: rotate(-90deg) translate(10px, 10px);
	transform-origin: center;
	position: absolute;
	fill: none;
	stroke: #ddd;
	stroke-width: 15px;
	stroke-linecap: round;
}

.progress-circular circle:nth-child(2) {
	stroke: var(--green);
	stroke-dasharray: 450;
	stroke-dashoffset: 160;
}

.info-progress span{
  position: absolute;
}

.info-progress span img{
  width: 125%;
}

.etat{
  width: fit-content;
  text-wrap: nowrap;
  display: flex;
  justify-content: flex-start;
  align-items: center;
  padding: 1% 8%;
  border-radius: 25px;
  border-width: 1px;
  border-style: solid;
}

.etat::before{
  content: '';
  height: 8px;
  width: 8px;
  border-radius: 50%;  
  display: block;
  margin-right: 3%;
}

.success.etat::before{  
  background-color: var(--green);
}

.primary.etat::before{  
  background-color: #0090FF;
}

.warning.etat::before{  
  background-color: #FFA100;
}

.danger.etat::before{  
  background-color: #FC3E4D;
}

.danger.etat{
  color: #FC3E4D;;
  background-color: #ffd8d8;
  border-color:  #FC3E4D;
}

.warning.etat{
  color: #FFA100;;
  background-color: #FEF5E4;
  border-color:  #FFA100;
}

.etat.success{
  background-color: var(--light-green-bg);
  color: var(--green);
  border-color: var(--green);
}

.etat.primary{
  background-color: #E8F5FF;
  color: #0090FF;
  border-color: #0090FF;
}


.tt-card .btn-group .btn{
  position: initial
}
.tt-card .cap-info{
  width: 75% ;
  min-height: 150px;
}
.tt-card .cap-info .col-12{
  display: flex;
  justify-content: space-between;
}

#evenement-block .tt-card .cap-info{
  width: 65%;
}

.tt-card .tt-date{
  width: 20%;
  background: #ebecf2;
  margin: 1% 2%;
  border-radius: 5px;
  display: grid;
  justify-content: center;
  align-content: center;
  align-items: center;  
  text-align: center;
  color: #000;
}

#evenement-block .tt-card .tt-date{
  width: 25%;
}

.tt-card .tt-date h3{
  font-weight: 700;
  font-size: 18px;
}

.tt-card .tt-date span{
  font-size: 11px;
}

.tt-card h3 span, .tt-card h3 span strong {
  font-size: 14px;
  font-weight: 300;
  font-style: normal;
}

.time-table-content input, .time-table-content select{
  border: none;
  background-color: var(--gray-bg2);
}

.time-table-content.evaluation input, .time-table-content.evaluation select{
  border: 2px solid var(--gray-bg2);
  background-color: transparent;
}

.time-table-menu .nav-item a.nav-link.active{
  background-color: #E7FFED;
  box-shadow:inset 0px 1px 4px rgb(0 0 0 / 25%);
  border-bottom: 4px solid #000;
}

body .container-scroller{
  padding-bottom: 10%;
}

.form-control{
  color: #282928 !important
}

.planification-admin-menu{
  width: 100%;
  BACKGROUND: white;
  border-radius: 10px;
  padding: 0 6% !important;
}

.planification-admin-menu .nav-link{
  background-color: transparent;
  color: #838A9C;
  font-size: 15px;
}

a.nav-link:hover{
  color: var(--green);
}

.files-setting.btn-group{
  background: black;
  color: white;
  width: 50px;
  height: 50px;
  border-radius: 5px;
  text-align: center !important;
  display: flex;
  justify-content: center;
  align-items: center;
}

.files-setting.btn-group span{
  color: #fff;
}

.btn:first-child:active, .btn.show{
  border: none;
}

.utilisateurs h5{
  background-color: #3D414B;
  padding: 3px 2%;
  color: white;
  border-radius: 50px;
  font-weight: 200;
  font-size: 15px;
}

.delete-modal.modal-custom .modal-footer button{
  width: 45%;
}


.delete-modal.modal-custom .modal-footer button i{
    height: 20px;
    width: 20px;
    background: white;
    border-radius: 50%;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    font-size: 20px;
    color: var(--green);
}

.delete-modal.modal-custom .modal-footer button.yes i{
  background: #001736 !important;
  color: white !important;
}

.delete-modal .modal-footer button{
  display: flex;
  justify-content: center;
  gap: 9px;
  align-items: center;
  font-size: 14px !important;
}

.delete-modal .modal-content{
    box-shadow: 1px 2px 20px 10px rgb(0 0 0 / 34%);
    border: 1px #000000 solid;
    border-radius: 18px !important; 
}
.delete-modal .modal-content h2{
  font-size: 20px !important;
}
.delete-modal .modal-content p{
  font-size: 17px !important;
}

.delete-modal.modal-custom .modal-footer button.yes{
  color : #001736;
  background-color: var(--gray-20);
}

.delete-modal.modal-custom .modal-footer{
  justify-content: space-around;
}

.admin-ecole .label-genre h3{
  font-size: 15px;
}

.admin-ecole .label-genre span::before{
  content: '';
  height: 10px;
  width: 15px;
  border-radius: 50%;
  background-color: #000;
  margin-right: 6%;
}

.admin-ecole .label-genre span{
  display: flex;
  justify-content: start;
  align-items: center;
}

.admin-ecole .label-genre span.homme::before{
  background-color: #2696f0;
}

.admin-ecole .label-genre span.femme::before{
  background-color: #fc3e4d;
}

.admin-ecole .label-genre span.danger::before{
  background-color: red;
}

.admin-ecole .label-genre span.success::before{
  background-color: var(--green);
}

.admin-ecole .chart-genre, .admin-ecole .chart-pay{
  position: absolute;
  top: 14%;
  right: 6%;
}

.admin-ecole .chart-genre circle-progress::part(value){
	stroke-width: 6px;
	stroke: #2696f0 !important;
}
.admin-ecole .chart-genre circle-progress::part(circle){
	stroke-width: 6px;
	stroke: #fc3e4d;
}
.admin-ecole .chart-genre circle-progress::part(text){
  display: none !important;
}
  
.admin-ecole .chart-pay circle-progress::part(value){
	stroke-width: 6px;
	stroke: var(--green) !important;
}
.admin-ecole .chart-pay circle-progress::part(circle){
	stroke-width: 6px;
	stroke: red;
}
.admin-ecole .chart-pay circle-progress::part(text){
  display: none !important;
}

/* #apprenant-admin .admin-ecole .row div.info{
  height: 170px;
} */

/* #apprenant-admin .admin-ecole .row div.info.finance-block{
  width: 65%;
} */

.panel-filter-search .filter-search-header{
  font-family: Quicksand-Bold;
  font-size: 13px;
  text-align: left;
  color: #283346;
  background-color: #d6d9e4;
  border-top: 0px solid #283346;
  border-right: 0px solid #283346;
  border-left: 0px solid #283346;
  border-top-left-radius: 5px;
  border-top-right-radius: 5px;
  border-bottom: 1px solid #ddd;
  padding: 10px 15px;
  top: 0;
  position: sticky;
  z-index: 1;
  box-shadow: 0px 0px 12px 0px rgb(0 0 0 / 21%);
}

.panel-filter-search {
  padding: 0 !important;
  max-height: 50vh;
  overflow-y: scroll;
  position: relative !important;
}

.panel-filter-search .title-item-form {
  color: black;
  padding: 3% 0;
  font-weight: 500;
}

.panel-filter-search label, .panel-filter-search .customRadio input[type="radio"]+label {
  color: #798b9e;
  font-size: 14px;
  font-weight: 500;
}

.panel-filter-search .customRadio input[type="radio"]+label:before{
  border: 2px solid #ccc;
  height: 20px;
  width: 20px;
}

.panel-filter-search .customRadio input[type="radio"]+label:after{
  width: 10px;
  height: 10px;
}

.panel-filter-search .customRadio input[type="radio"]:checked+label:before{
  border-color: var(--green-dark) ;
}

.panel-filter-search .customRadio input[type="radio"]:checked+label{
  color: var(--green-dark);
}

.panel-filter-search .customRadio input[type="radio"]+label{
  padding-left: 27px;
}

.panel-filter-search .customRadio{
  padding: 0%;
}

select.form-control{
  border: var(--bs-border-width) solid #dbe1e6;
}

#apprenant-id .list-group.parcours-section .list-group-item{
  padding: 0 3%;
}

#apprenant-id .planification-admin-menu{
  padding: 0% !important;
}

.cadre-photo {
  max-width: 200px;
  height: 200px;
  background: #d4d7e2;
  border-radius: 9px;
  display: flex;
  align-items: center;
  justify-content: center;
  object-fit: cover;
}

.cadre-photo i {
  width: 20px;
  height: 20px;
  background: #001736;
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: 50%;
  font-weight: 900;
  color: #d4d7e2;
}

.custom-font-label{
  font-size: 18px !important;
  font-weight: 400 !important;
}
input.form-control.success{
  border: 1px solid var(--green);
  background-color: var(--light-green-bg);
}
.quitus-box{
  height: 75vh !important;
  width: 35vw !important;
  margin: 3% auto;
  background: white;
  border-radius: 14px;
  padding: 2%;
  text-align: center;
  font-weight: 600;
  letter-spacing: 1px;
  font-size: 23px;
  color: #000;
}

.form-group-input-file i{
  font-size: 53px;
  color: green;
}
.form-group-input-file span{
  font-weight: 200;
  font-size: 13px;
}

.notation-criteria input, .notation-criteria select{
  height: 50px;
  width: 145px;
  border-color: #000;
  margin-left: 3%;
}
.notation-criteria label{
  color: #000;
}
.notation-criteria .form-group {
  width: 50%;  
  align-items: center;
}

table th{
  text-transform: uppercase;
}
.ou-block{
  display: flex;
  color: black;
}
.ou-block::before, .ou-block::after {
  /* content: "";
  display: block;
  border-top: solid; */

  content: "";
    flex: 1;
    border-bottom: 2px solid #dbdbdb;
    margin: auto;
    display: block;
}

#communication .type-communication{
  background: white;
  padding: 2% 4%;
  margin: 3%;
  border-radius: 4%;
}

#communication .type-communication img{
  width: 100%;
  display: block;
  margin: 0 auto;
}

#communication .type-communication h6{
  margin: 6%;
}

#communication .type-communication p{
  line-height: 1.5;
}

#communication .type-communication a.btn{
  border-radius: 25px !important;
  font-size: 12px;
}



button.navbar-toggler{  
  position: absolute;
  bottom: 0;
  right: 3px;
}

span.block.icon-plus-customize{
  width: 25px;
  height: 25px;
  margin-left: 4%;
  border-radius: 50%;
  background-color: #fff;
  display: flex !important;
  align-items: center;
  justify-content: center;
}

span.block.icon-plus-customize i::before{
  color: var(--green);
  font-weight: 700 !important;
  font-size: 1.9em;
  margin: 10% 0%;
}


.info-note{
  background: #ebecf2;
  border-radius: 10px;
  padding-top: 2%;
}

.info-note .accordion .accordion-button{
  background-color: #f8fafc;
}

.info-note .accordion .accordion-item{
  background: transparent;
  border: none;
}

.box-error{
  border: 1px solid red;
  background: #fff;
  display: flex;
  justify-content: center;
  align-items: center;
}

table.table span.table-note {
  height: 50px;
  width: 50px;
  display: flex;
  border: 1px solid black;
  justify-content: center;
  align-items: center;
  background : #F8FAFC;
  border: 2px solid #A4ABBD;
  border-radius: 3px;
}

.nav-pills{
  width: 100% !important;
}

.nav-pills .nav-link {
  border : none !important;
  padding: 3% 5%;
  color: #000 !important;
}

.nav-pills .nav-item {
  padding: 5% 0;
  width: 100%;
}

.nav-pills .active.nav-link{
  background-color: var(--light-green-bg) !important;
  color: var(--green-dark) !important;
  border-radius: 8px;
}

.dossier-box {
  background: white;
  border-radius: 9px;
}

.dossier-box .img-fol{
  width: 25%;
  padding-right: 0;
}

.dossier-box .info-dossier h6{
  margin: 0;
  width: 100%;
  font-size: 13px;
}

.dossier-box .dossier-box-row1{
  margin-bottom: 5%;
}

.dossier-box .info-dossier{
  width: 70%;
  padding-left: 2px !important;
  height: 45px;
  justify-content: space-between;
}



.fichier-box{
  background: white;
  border-radius: 10px;
  box-shadow: 1px 4px 9px 4px rgba(0, 0, 0, 0.16);
  margin-bottom: 2%;
}

.fichier-box .img-fol{
  margin-right: 2%;
}


.file-upload-block .file-format{
  background: var(--light-green-bg);
    border: 2px solid var(--green);
    border-radius: 50px;
    height: 50px;
    width: 50px;
    margin-left: 2%;
    display: flex;
    align-items: center;
    justify-content: center;
}

.file-upload-block .file-format span{
  font-weight: 700;
  color: var(--green);
}

.file-upload-block .bg-success{
  background-color: var(--green) !important; 
}

.file-upload-block .file-progress-bar i{
  color: var(--green);
}

table.frais-table td a.btn.btn-outline{
  border-radius: 10px !important;
}

.ui.dropdown .menu > .item:hover {
  background: var(--green) !important;
  color: #fff !important;
}

.ui.label a{
  background: var(--green) !important;
  color: #fff !important;
  font-size: 13px !important;
}

i.icon.delete:before{
  content: "x" !important;
}

#login-page .body-wrapper h1{
  font-size: 40px;
}

#homeNavbar a.nav-link, #homeNavbar .dropdown-menu.show a.dropdown-item {
  font-size: 14px;
  color: #000;
  font-weight: 700;
  margin: 0 2%;
  text-align: center;
}

#homeNavbar li.nav-item{
  min-width: 50%;

}

#homeNavbar a.nav-link.active{
  border-bottom: 2px black solid;
}


#homeNavbar .dropdown-menu.show{
  background: #f1fef4;
  border-radius: 10px;
  box-shadow: 0px 6px 17px 3px rgb(0 0 0 / 60%);
  padding: 13px;
}

#homeNavbar .dropdown-menu.show a.dropdown-item:hover{
  background: rgb(154 204 168 / 29%) !important;
  border: none;
}
#homeNavbar .dropdown-menu.show li{
  margin: 0;
}


#spgea-index .section1{
  background: linear-gradient(to bottom, #83BD93 0%, #B3DCBE 13%, #F2FAF2 100% );
  padding: 3%;
  border-radius: 15px;
}

#spgea-index .navbar-toggler{
  font-size: 255%;
  color: black;
  cursor: pointer;
}

#spgea-index .section1 .big-title h1{
  font-family: 'Manrope-ExtraBold' !important;
  font-size: 350%;
  font-weight: 900;
  color: black;
}

#spgea-index .section2{
  background: #F1FEF4;
  padding: 3%;
  border-radius: 15px;
}
.nav-objectifs .nav-item .nav-link{
  display: flex;
  justify-content: space-between;
}
.nav-objectifs .nav-item{
  padding: 2% 0;
}

.nav-objectifs .nav-item .nav-link{
  background-color: #f5f5f5;
  border-radius: 8px;
  height: 80px;
  align-items: center;
}

.nav-objectifs .nav-item .nav-link div{
  width: 65%;  
}

.nav-objectifs .nav-item .nav-link.active div { 
  font-weight: 700;
}

.nav-objectifs .nav-item .nav-link span{
  color: var(--gray)
}
.sous-objectif-bloc .title{
  display: flex;
  justify-content: space-between;
  padding: 0 3%;
}

.sous-objectif-bloc .title p{
  text-transform: capitalize;
}

.sous-objectif-bloc .title a{
  background: white !important;
}
.carousel-inner .carousel-item img{
  object-fit: contain;
  height: 100%;
}

.carousel-inner .carousel-item{
  height: 100px;
  display: flex !important;
  align-items: center !important;
}
#spgea-index .service-item {
  border: 2px solid #E6E8EF;
  padding: 12%;
  border-radius: 6px;
  height: 100%;

}

#spgea-index .service-item .title{
  color: #176735;
  font-size: 18px;
  font-weight: bold;
  margin: 8% 0;
}

#spgea-index .service-item p{
  color: var(--gray-text);
  font-size: 14px;
  font-weight: 500;
}


#spgea-index .bloc-plan{
  background: white;
  padding: 0%;
  width: 119px;
  border-radius: 10px;  
  position: absolute;
  bottom: 120px;
  right: 120px;
  box-shadow: 0px 4.05px 4.05px rgb(0 0 0 / 25%);
}


#spgea-index .bloc-plan .title{
  background: #107C41;
  border-top-left-radius: 10px;
  border-top-right-radius: 10px;
  color: white;
  font-weight: 400;
  font-size: 13px;
  padding: 3% 10%;
}

#spgea-index .bloc-plan span{
  font-size: 9px;
}

#spgea-index .bloc-plan .hour{
  padding: 0% 10%;
}

#spgea-index .bloc-plan .check-status i{
  width: 35px;
  height: 35px;
  border-radius: 50%;
  color: white;
  background : #1AB846;
  font-size: 35px;
  display: block;
}

#spgea-index .bloc-plan .check-status h6{
  color: #1AB846;
  font-size: 11px;
  font-weight: bolder;
}

#spgea-index .avantages .col img{
  display: block;
  margin: auto;
  height: 200px;
  width: 100%;
  object-fit: contain;
}

#spgea-index .avantages .col h5, #spgea-index .avantages .col p{
  text-align: center;
} 

#spgea-index .avantages .col h5{
  font-size: 20px;
  font-weight: 800;
}

#spgea-index .footer-section {
  background-color: #14452F;
  display: flex;
  justify-content: space-between;
  padding: 1% 6%;
  color: white;  
  position: fixed;
  bottom: 0;
  left: 0;
  right: 0;
  width: 100%;
  height: 50px;
}


.page-body{
  margin-bottom: 70px !important;
}
#spgea-index .footer-section span {
  font-weight: 100;
  font-size: 12px;
}


#spgea-index .footer-section a {
  font-weight: 800;
  font-size: 15px;
  color: white;
}
.bg-green-lighter{
  background: #F1FEF4 !important;
}

.bg-green-lighter1{
  background: #F2F8F1 !important;
}

.ecole.accordion-item{
  padding: 4% 2%;
}

.ecole.accordion-item .accordion-header button{ 
  font-size: 21px;
  font-family: 'Manrope-regular';
}

.ecole.accordion-item .accordion-header button[aria-expanded="true"]{
  background: var(--light-green-bg);
  color : var(--green-dark1)
}

.ecole {
  background: white;
  padding: 4% 8%;
  border: 1px solid #A4ABBD;
  height: 100%;
}

 .ecole h3.title {
  font-size: 20px;
  line-height: 1.6;
  color: var(--green-dark1);
}

 .ecole i{
  color: var(--green-dark1);
  font-size: 33px;
}

 .ecole i::before{
  font-weight: 900 !important;
}

 .ecole h3.acronyme{
  color: black;
  font-weight: 500;
  margin-right: 2%;
  font-size: 17px;
  margin-bottom: 0;
}

 .ecole span.location{
  color: var(--gray-text);
  font-weight: 500;
  font-size: 14px;
  margin-bottom: 0;
}

 .ecole span.owner{
  font-weight: 900;
  font-size: 15px;
  margin-bottom: 0;
  letter-spacing: 2px;
}

.form{
  margin-top: 5%;
  padding: 3%;
  border-radius: 13px;
  box-shadow: 0px 0 5px rgb(0 0 0 / 25%);
}

.form .message{
  padding: 20px;
  border-radius: 19px;
}

.default-button.bd-dashed{
  border-style: dashed !important;
  border-width: 2px !important;
}

.periode-tt i {
  background-color: var(--light-green-bg);
  color: var(--green-dark1);
  padding: 15px;
}
.periode-tt i:before, .periode-tt span{
  font-weight: 900 !important;
  font-size: 18px !important;
  color: var(--green-dark1);
}

.ct-objectif {
  background: var(--light-green-bg);
  padding: 15px;
  color: var(--green-dark);
  font-weight: 900;
  letter-spacing: 1px;
  border-radius: 6px;
}

.ct-objectif .switch-action span{
  color: #000 ;
}

.ct-objectif .switch-action{
  display: flex;
  justify-content: space-between;
}
.ct-form .customRadio, .absenceRadio .customRadio{
  margin-bottom: 0 !important;
  background: transparent;
}
.ct-form .customRadio input[type="radio"]+label:before, .absenceRadio .customRadio input[type="radio"]+label:before{
  border: 2px solid #000 !important;
}

.ct-form .customRadio input[type="radio"]:checked+label, .absenceRadio .customRadio input[type="radio"]:checked+label  {
  color: #000;
}

.ct-form .customRadio input[type="radio"]+label:after, .absenceRadio .customRadio input[type="radio"]+label:after {
  display: none;
}

.ct-form  .customRadio input[type="radio"]:checked.warning+label:before, .absenceRadio .customRadio input[type="radio"]:checked.warning+label:before{
  border-width: 0 !important;
  box-shadow: inset 0px 0px 0px 4px #FFA100;
}

.ct-form  .customRadio input[type="radio"]:checked.danger+label:before, .absenceRadio .customRadio input[type="radio"]:checked.danger+label:before {
  
  /* box-shadow: inset 0px 0px 0px 4px #DD2025; */
  /* border-width: 2px !important; */
  
  background-image: url(../images/icons/check-bad.svg);
}

.ct-form  .customRadio input[type="radio"]:checked.success+label:before, .absenceRadio .customRadio input[type="radio"]:checked.success+label:before {
  /* border-width: 2px !important; */
    /* box-shadow: inset 0px 0px 0px 4px var(--green); */
  background-image: url(../images/icons/check-good.svg);
}

.absenceRadio .customRadio input[type="radio"]+label:before{
  border-radius:  0 !important;
}

.ct-form label{
  color: #6F7482;
}

.ct-form input, .ct-form select{
  background: #F8FAFC !important;
  border: 1px solid #A4ABBD;
  padding: 0;
  padding-left: 5px;
  height: 45px;
}

.cahier {
  box-shadow: 0 1px 6px 1px rgba(0, 0, 0, 0.25);
  padding: 20px;
  border-radius: 17px;
  margin: 1%;
}

.dropdown .dropdown-notifications{
  width: 525px !important;
  left: -20em !important;
  background: #D6D9E4;
  border-radius: 10px;
}

.dropdown-menu.dropdown-notifications:before {
  content: '';
  display: block;
  width: 12px;
  height: 12px;
  background: #D6D9E4;
  position: absolute;
  left: 55%;
  top: -6px;
  transform: rotate(45deg);
  border-radius: 2px;
}

.dropdown-notifications .notification-block a{
  color: var(--green-dark);
  font-weight: 900;
  letter-spacing: 1px;
  font-size: 16px !important;
}

.dropdown-notifications .notification-block .list-group{
  border-radius: 10px;
  background: #fff;
  margin: 2%;
}

 .notifications-list.list-group .list-group-item{
  display: flex;
}

.notifications-list.list-group .list-group-item span.status{ 
  width: 10px;
  height: 10px;
  border-radius: 50%;
  background-color: #D9D9D9;
  margin-right: 2%;
}

.notifications-list.list-group .list-group-item span.status.not-read{  
  background-color: var(--green);
}

.notifications-list.list-group .list-group-item h5{
  color: #000;
  font-weight: 500;
  margin-bottom: 3%;
}

.notifications-list.list-group .list-group-item span.type-notification, span.type-notification{
  color: #000;
  font-weight: 500;
  margin-bottom: 2px;
  border: 1px solid #000;
  padding: 2%;
  margin-right: 5%;
  font-size: 10px;
}

.notifications-list.list-group .list-group-item span.time-notification, span.time-notification{
  color: #848484;
  font-size: 10px;
}

.modal-detail .modal-content{
  height: 95vh;
}

.tt-card ul.dropdown-menu.show{
  width: 190px;
}


.modal-detail span.type-notification{
  font-size: 20px;
  margin-right: 10px;
}



.modal-detail#detailNotification h5{
  font-size: 17px;
  font-weight: 500;
  color: #000;
  margin-bottom: 0;
}

.modal-detail span.time-notification{
  color: #bfbebe;
  font-weight: 500;
  font-size: 12px;
}


#detailNotification .profile-info div{
  margin-bottom: 0;
}


.absence-top{
  background: #001736;
  color: white ;
  padding: 20px;
  border-radius: 17px;
  margin: 1%;
}

.absence-top h3{
  color: white;
}

.absence-top .info-note span{
  color: #000;
}

.absence-top .info-note h6{
  color: #000;
  font-weight: 800;
}

.admin-ecole .info .progress{
  height: 25px;
  background: white;
  box-shadow: none;
}

.admin-ecole .info .progress-percent{
  text-align: end;
  margin-left: 3%;
  font-size: 13px;
}

.pie {
  height: 200px;
  width: 200px;
  border-radius: 50%;  
}

.pie.hollow {
  display: flex;
  justify-content: center;
  align-items: center;
}

.pie.hollow::after {
  content: '';
  position: absolute;
  height: 150px;
  width: 150px;
  border-radius: 50%;
  background-color: #FFFFFF;
}
.pie.hollow span {
    font-size: 24pt;
    z-index: 2;
    font-weight: bold;
    font-family: "JetBrains Mono", sans-serif ;
}
.admin-ecole .info .notifications-list.list-group .list-group-item p.time-notification{
  font-size: 14px ;
  color: #848484;
}
.admin-ecole .info .notifications-list.list-group .list-group-item{
  padding: 0;
  margin-bottom: 1%;
}
.admin-ecole .info .notifications-list.list-group .list-group-item h5{
  margin-bottom: 0;
  font-weight: 600;
  letter-spacing: 1px;
}


#my-chart {
  width: 100%;  
  margin: 0 auto;
}

.admin-ecole .info #my-chart .charts-css.column tbody tr td{
  background: var(--green);
  border-top-left-radius: 5px;
  border-top-right-radius: 5px;
  cursor: pointer;
}

.nav-objectifs .parcours{
  display: flex;
  width: 100% !important;
  justify-content: space-between;
}

.nav-objectifs .parcours .pie{
  height: 50px;
  width: 50px !important;
}
.nav-objectifs .parcours .pie.hollow::after{
  height: 45px;
  width: 45px;
}

.nav-objectifs .parcours .pie.hollow span{
  font-size: 8.5pt;
  color: #a1a3a7 !important;
  font-weight: 400;
}

.nav-pills.nav-objectifs .active.nav-link .parcours .pie.hollow::after{
  background-color: var(--light-green-bg);
}

.nav-pills.nav-objectifs .nav-link .parcours .pie.hollow::after{
  background-color: #f5f5f5
}

.chart-progression{
  display: flex;
  justify-content: end;
}
.envoie-group#envoie-groupe-content .accordion-button{
  background: red;
}

.envoie-group#envoie-groupe-content .accordion-button::after {  
  background-image: url(../images/icons/chevron-down-solid-black.svg) !important;
}

.envoie-group#envoie-groupe-content .accordion-button:not(.collapsed)::after {
  background-image: url(../images/icons/chevron-down-solid-black.svg) !important;
  transform: rotate(-180deg);
}

hr:not([size]) {
  height: 0.5pt !important;
  color: #8a8989 !important;
}

#envoie-groupe-content .accordion-button::after {
  display: block;
  height: 14px;
  width: 14px;
  background-image: url(../images/icons/chevron-down-solid-black.svg) !important;
}

#envoie-groupe-content .accordion-button:not(.collapsed)::after {
  background-image: url(../images/icons/chevron-down-solid-black.svg) !important;
  transform: rotate(-180deg);
}

#envoie-groupe-content span{
  font-size: 15px;
}
#envoie-groupe-content .accordion-button{
  width: auto;
  max-width: 50%;
}

.offcanvas.showing, .offcanvas.show:not(.hiding) {
  width: auto;
  padding: 0 10%;
  box-shadow: 6px 15px 12px 9px rgb(0 0 0 / 30%);
}

.left-sidebar .scroll-sidebar {
  height: calc(100vh - 200px) !important;
}
.absence-stats .pie.hollow {
  height: 100px !important;
  width: 100px !important;
}

.absence-stats .pie.hollow::after{
  height: 85px !important;
  width: 85px !important;
}
.apprenant-details h3{
  font-size: 18px !important;
  word-wrap: break-word;
}

.apprenant-details {
  display: flex;
  flex-direction: column;
  justify-content: space-between;
}
#spgea-index {
  padding-bottom: 60px;
}
.nav-attribute input.matricule {
  background-color: white !important;
}
.sous-menu-docs{
  width: 190px !important;
}
.sous-menu-docs a.dropdown-item{
  color: black;
}
.save-appel-block{
  position: fixed;
  bottom: 0;
  left: 0;
  right: 0;
  z-index: 20;
  background: #ebf7f7;
  padding: 8px 115px;
  width: 100%;
  box-shadow: 0px -3px 20px 5px rgb(0 0 0 / 30%);
}







































/* RESPONSIVITY MANAGEMENT */



@media screen and (max-width: 768px) {
  .table-responsive-vertical > .table > tbody > tr > td {
    display: flex;
    justify-content: space-between;
    align-content: center;
  }

  .table-responsive-vertical > .table > tbody > tr > td form{
    width: 50%;
  }

  .menu-ecole{
    padding: 0;
  }
  
  .horizontal-menu .top-navbar .navbar-menu-wrapper{
    align-items: start !important;
  }
  .horizontal-menu .top-navbar .navbar-brand-wrapper .navbar-brand.brand-logo-mini{
    width: auto;
  }

  .list-group-item.header {
    font-size: 14px;
  }
 
}

@media screen and (max-width: 675px) {
  .menu-ecole .ecole-nav{
    width: 100%;
  }
}

@media screen and (max-width: 399px) {
  .menu-ecole{
    padding: 0;
    /* height: 55vh; */
    height: auto;
  }
  .menu-ecole .d-flex{
    flex-direction: column;
  }
  .menu-ecole .ecole-nav, .menu-ecole .ecole-session {
    display: flex;
    flex-direction: row;
    justify-content: space-between !important;
  }
  .menu-ecole .ecole-nav button span{
    display: none;
  }
  .school-informations ul{
    flex-direction: column !important;
    align-content: start;
  }
  .school-informations ul li.nav-item a{
    flex-direction: row;
  }
  
}

@media (max-width: 991px) {  
  #homeNavbar .dropdown-menu.show {
    position:initial;
    background: transparent;
    box-shadow: none;
    padding-left: 13px;
  }
  #homeNavbar a.nav-link, #homeNavbar .dropdown-menu.show a.dropdown-item{
    margin: 0 ;
    text-align: left;
  }
}

@media (min-width: 992px) {
  .navbar-expand-lg .offcanvas .offcanvas-body {    
    gap: 27% !important;
  }
}

@media screen and (max-width: 543px) {
  #navbar.admin-navbar{
    width: 100%;
  }
  ul.top-navbar{
    margin-top: 66px;
  }
  table td div.d-flex{
    width: 60% !important;
    justify-content: end;
  }
}
@media screen and (min-width: 360px) {
  #spgea-index .section1 .big-title h1{   
    font-size: 300%;   
  }
}