@charset "utf-8";
@import url(common.css);
.nav-button-wrap {
  float:right;
  height:36px;
  width:36px;
  cursor:pointer;
  position:relative;
  border-radius:2px;
  top:5px;
  margin-left:16px;
}
.nav-button  {
  position:absolute;
  top:40%;
  left:50%;
  width:22px;
  height:20px;
  margin-left:-11px;
  margin-top:-3px;
}
.nav-button span{
  float:left;
  width:100%;
  height:2px;
  background:#fff;
  margin-bottom:4px;
  border-radius:4px;
  transition: all 200ms linear;
}


.nav-button-wrap {
  display: none; /* Masquer le bouton hamburger par défaut */
}

#wrap{ position: relative; width:100%;min-height:100%;margin:0 auto; background:#fff; }
#wrap #header{width:100%;margin:0 auto;  background:#fff}
.header_top {width:98%; clear:both; overflow:hidden; padding:1px 0;margin:0 auto;}
.header_top p img{float:left;}

.header_top >.logo a{display:inline-block;float:left;font-size:28px;font-weight:700;color:#259d1f; padding:13px 10px 8px 0;}
.header_top .logo a:hover{color:#40B1DD;}
.header_top span{float:left;font-size:13px;color:#99b297;padding-top:13px;}

.util {float:right; margin-top:20px}
.util ul{float:left;}
.util ul li{float:left}
.util ul li a{display:inline-block;padding:0 5px 0 5px;line-height:12px;color:#777}
.util a img{margin-top:-5px}
.util ul li a:hover{color:#F60; text-decoration:none }
.util ul li :after{content: '|';color:#c6c6c6; padding-left:5px}
.util ul li .last:after{content: '';}
.util p {float:right; padding:0 0 0 5px;}
/* Main menu wrapper */
.wrap_menu{width:100%;background:#326833 !important;}
.cbp-hsmenu {width:97%;}
.cbp-hsmenu > li {display: inline-block;width:175px; float:left;height:45px;}
.cbp-hsmenu > li > a {color: #fff; display:inline-block;width:175px; font-size:15px;line-height:45px;text-align:center;transition: all 0.5s;}
.cbp-hsmenu > li:first-child{width:175px;}
.cbp-hsmenu > li:first-child > a {width:175px;}
/* .cbp-hsmenu > li:last-child{float:right;} */
.cbp-hsmenu > li > a:hover {color:#fff;background-color:#556B2F;}
.cbp-hsmenu > li .on{background-color:#556B2F;color:#fff;}

.Location{ text-align:right; width:100%;color:#878787; background:#eee}
.Location p{width:97%;margin:0 auto; text-align:right; padding:10px 0 10px 0; }
/* header end */


/* contents start */
#wrap #contents{width:97%;margin:0 auto; clear:both;padding-bottom:0;}
#contents{min-height:100%; height:100%;}
#contents_R{width:79.5%; float:left;padding-top:10px; background:#fff}
#contents_L{ width:18%; float:left; margin-right:2.5%; height:100%; }
/* #contents h3{display:inline-block; width:100%;  font-size:19px; letter-spacing:-0.3px; color:#2a4a6b;  padding:15px 0 20px 0;  font-weight:700;background:url(../images/h3_bg.png) no-repeat 0 bottom; margin-bottom:20px} */
#contents h3{display:inline-block; width:100%;  font-size:20px; letter-spacing:-0.3px; color: #326833 !important;  padding:15px 0 20px 0;  font-weight:bold; margin-bottom:20px}
#contents h4{display:inline-block;  font-size:15px; letter-spacing:-0.3px;color:#326833 !important;  font-weight:700;  margin-bottom:5px}
#contents .block{float: left;width: 23.5%;margin-right: 2%; height:300px}

#userinfo{background-color: var(--secondary-color); padding:10px 10px 17px 20px;color: var(--color-primary); margin-top: 20px; border-top-right-radius: 10px; border-top-left-radius: 10px; display: flex; align-items: center;}
#userinfo >a{ color:red;}
#userinfo > img{content: url(../images/user.png); height:30px; width:30px;margin-right: 10px; color: val(--primary-color);}
#contents_L h2{height:35px; padding:18px 1px 18px 15px; }
#contents_L h2 >span{ display:table-cell; white-space:pre-wrap; vertical-align:middle;font-size:18px;color: var(--primary-color); font-weight: bold; height:35px; line-height:110%}

.modalPortal { background-color: var(--tertiary-color); display: flex; align-items: center;justify-content: space-between; padding-right: 20px;}
.modalPortal > h2 > span {color: var(--primary-color); }
.modalPortal > img{content: url(../images/left_mypage.png); height:30px; width:40px;}

.infoArea{ width:100%; float:left }
.infoArea p img{ width:80%; padding:10px 0; margin:0 auto }
.infoArea .caption{display:block; margin:10px 0; width:80%; margin:0 auto;}
.imgresize{width:100%; height:100%}

.L_data{float:left;}
.R_data{float:right;}
.L_table{float:left; display:table}
.R_table{float:right;}
.tablecell{display:table-cell; vertical-align:middle; padding:5px 10px; background:#eee}
.tablecell label{ padding-right:5px}

.tabtitle{display:block;float:left;clear:both;font-size:16px; margin-bottom:10px }
.infoborder{ width:100%;float:left;;border:1px solid #eee; border-radius:10px; padding:15px 0; margin-bottom:30px}
.infonone{width:100%;float:left; border:1px solid #fff;}
.infoArea h3{ display:block; width:100%; float:left; clear:both; color:#036; font-weight:700; margin-bottom:7px;}
.infoArea .tabmenu{margin:0 10px 15px 20px;border-left:1px solid #cdcfd1;height:33px }
.infoArea .tabmenu li{ display:inline-block; float:left}
.infoArea .tabmenu li a{display:inline-block; float:left; color:#666;padding:7px;border-right:1px solid #cdcfd1;border-top:1px solid #cdcfd1;border-bottom:1px solid #cdcfd1;border-left:0px solid #cdcfd1;text-align:center;background-color:#fff;width:130px;
  transition: all 0.5s; font-size:13px}
.infoArea .tabmenu li a.on {background-color:#eff0f1}
.infoArea .tabmenu li a.on:hover{cursor: default}
.infoArea .tabmenu li a:hover{background-color:#eff0f1}

/* contents end */
/* h3{display:inline-block; width:100%;  font-size:19px; letter-spacing:-0.3px; letter-spacing:-0.3px; color:#2a4a6b;  padding:15px 0 20px 0;  font-weight:700;background:url(../images/h3_bg.png) no-repeat 0 bottom; margin-bottom:20px} */
h3{display:inline-block; width:100%;  font-size:20px; letter-spacing:-0.3px; letter-spacing:-0.3px; color:#326833;  padding:15px 0 20px 0;  font-weight:bold; margin-bottom:20px}
h4{display:inline-block;  font-size:15px; letter-spacing:-0.3px; color:#326833;  font-weight:700; margin-bottom:7px}

/* footer */
#wrap #footer{position:absolute; bottom:0; height:50px; display:inline-block;width:100%;background-color:#f9f9f9;border-top:1px solid #dedede; }
.footerin{width:500px; margin-left:auto;margin-right:auto;}
.footerin span{float:left;padding:12px 30px 0 0; display:inline-block;}
.btmMenu{margin-bottom:15px; padding-top:20px;}
.btmMenu dd{float: left;}
.btmMenu dd:after{content: '|';color: #999;}
.btmMenu dd.last:after{content: '';}
.btmMenu dd a{padding: 0 15px;color: #393939;text-decoration: none;line-height: 30px;}
.contact{ padding-top:20px; float:right; font-size:1.1em;}



/* menu */
ul#menu, ul#menu ul {list-style-type:none;margin: 0;padding:0; width:100%;}
ul#menu a {display: block;  text-decoration: none;background:#f5f5f5 url(../images/contents_bg2.gif) repeat-y 	}
ul#menu li {margin-top: -1px; }
ul#menu li >a {border-left:1px solid #d3d2d2; border-right:1px solid #dfdfdf; border-bottom:1px solid #dfdfdf; border-top:1px solid #dfdfdf;color: #333; padding: 9px 30px 9px 12px ;transition: all 0.3s;font-size:14px;
  background:#f5f5f5  url(../images/arrow_up.png) 94% 50% no-repeat; font-weight:700; color:#777 }
ul#menu li >a.on, ul#menu li >a:hover.on, ul#menu li ul .current a { color:var(--primary-color); font-weight: bold; border-color:#02bf2a; background: var(--secondary-color) url(../images/arrow_down.png) 95% 50% no-repeat; padding-top:12px; padding-bottom:12px  }
ul#menu li a:hover {background:#ccc; color:#333;border-color:#dfdfdf;background:#f5f5f5 url(../images/arrow_up.png) 94% 50% no-repeat;}
ul#menu li ul{ border-bottom:1px solid #dfdfdf;border-top:1px solid #dfdfdf;margin-top: -1px;}
ul#menu li ul li a {background: #fff; color:#666; font-weight:normal;font-size:12px; padding: 4px 30px 4px 15px ; border-bottom:0px; border-top:0px; word-wrap:break-word; }
ul#menu li ul li:first-child{ padding-top:8px;}
ul#menu li ul li:last-child{ margin-bottom:8px;}
ul#menu li ul li a:hover{background: #fff url(../images/arrow_down.png) no-repeat 94% 50%;color:#03ae57; }
.code {border: 1px solid #ccc; list-style-type: decimal-leading-zero; padding: 5px; margin: 0; }
.code code {display: block; padding: 3px; margin-bottom: 0; }
.code li {background: #ddd; border: 1px solid #ccc; margin: 0 0 2px 2.2em; }
.indent1 {padding-left: 1em; }
.indent2 {padding-left: 2em; }


/* pop-up */
#mask{display:none;background:#333;position:fixed;left :0;top:0; z-index:10;width:100%; height:100%;opacity:0.5;z-index:999;}
.login-popup{display:none;background:#fff;padding:0;margin:0;float:left;font-size:1.2em;position:fixed;top: 48%;left: 50%;z-index: 99999;overflow:auto; border-radius:10px; overflow-x:hidden; }
.login-popup .close {position:absolute;top:15px;right:15px;}
.login-popup .popup_main {position:relative;width:100%;overflow-x:hidden; }
.login-popup .popup_main h1{display:block;width:100%; padding:20px 30px; color:#fff; font-size:15px;background:#052e6e;font-weight:700}
.login-popup .popup_main h1 span{}
.popup_contents {clear:both;border:0px solid;padding:20px 30px 30px 30px;}
.popup_contents h2{font-size:1.2em;color:#547aa9;line-height:1.8;}


/* newpop-up */
#mask {background: #333;position:fixed;left: 0;top:0; z-index:10;width:100%; height:100%;opacity:0.5;z-index:999;}
.new-popup{background: #fff;padding:0; margin:0;font-size:1.2em;top: 48%;left: 50%;z-index: 99999;overflow:auto; border-radius:10px;overflow-x:hidden; width:98%}
.new-popup .close {position:absolute;top:15px;right:15px;}
.new-popup .new_main {position:relative;width:100%;overflow-x:hidden; }
.new-popup .new_main h1{display:block;width:100%; padding:20px 30px; color:#fff; font-size:15px;background:#052e6e; font-weight:700}
.new-popup .new_main h1 span{}
.new_contents {clear:both;border:0px solid;padding:20px 30px 30px 30px;}
.new_contents h2{font-size:1.2em;color:#547aa9;line-height:1.8;}

/* login layout */
#login_wrap { width:100%; }
#logmain {position:absolute;	top:50%;left:50%; height:530px;width:720px; margin:0 auto;	margin-left: -360px;	margin-top: -250px; }
.loginbox { width:650px; height:435px; background:url("../images/login_bg.gif") 0 0 no-repeat; margin-top:20px; padding:10px 30px 0 50px; }
.loginbox > h2{ font-weight:700; font-size:36px; font-style:italic; color:#fff}
.log_caption{ font-weight:700; font-size:12.5px; font-style:italic; color:#8eb7e1; clear:both; padding:8px}

.idpw {float:left; display:inline-block;padding:40px 0 0 250px}
.logment{padding:20px 0 10px 0}
.idpw p{width:320px; display:block; height:44px; float:left;padding:20px 0 10px 0}
.idpw p span {width:80px; float:left; text-align:left; padding-top:10px; color:#999; vertical-align:middle;font-size:14px;}
.idpw p span label{font-size:14px;}
.idpw span .checklog{font-size:14px; border:1px solid #999;}
.idpw p a{width:190px; margin-right:0; float:right}
.idpw .inputbox{ float:right; width:200px;height:25px;border:1px solid #999;padding:2px 10px; background:#fff; margin-bottom:5px}
.idpw .inputbox:hover{border:1px solid #666; background:#fff}

.loginbtn {  margin-top:20px; font-size:16px; font-weight:700; text-align:center; }
.loginbtn a, .loginbtn a:hover{ color:#fff}
.mainlink{float:left;height:20px;line-height:20px;padding:10px 10px 0 250px;color:#464;margin-top:8px;  }
.logincopy{color:#898989; margin-top:25px; margin-bottom:50px;}




/* visual */
.visual{height:225px;background:#eaf4f4 url(../images/mainbg_guinee.png) no-repeat 50% 50%;}
.visualbox{position:relative;width:97%;clear:both;margin-left:auto;margin-right:auto; height:225px}
.edu{background:#b1d6e9 url(../images/edu.jpg) no-repeat 50% 50%;}
.visual .indicator{	position:absolute;bottom: 18px;left:500px}
.visual .indicator li{display:inline-block;width:10px;height:10px;margin:0 2px;border:0px solid #0768df;border-radius:50%;text-indent:-9999em;background:#9fdcf8;}
.visual .indicator li.on{background-color:#6ebfe5;}
.visual .slider{position:relative;width:97%;clear:both;margin-left:auto;margin-right:auto; height:280px}
.visual .slider > li{display:none;width:97%;margin:0 auto;}
.visual .slider > li.on{display: block;}
.visual .slider > li .sliderText{float:left;}
.visual .slider > li .sliderText > h5{margin:40px 0 0 30px;color:#023559; font-size:19px; letter-spacing:-0.3px; font-weight:700}
.visual .slider > li .sliderText p{color:#036;font-size:1.1em;margin-right:50px}
.visual .slider > li .thumb{float:right;width:45%;margin-top: 45px;}
.visual .slider > li .thumb img{width:100%;}
.visual .sliderBtn li{position:absolute;top:50%;}
.visual .sliderBtn li a{display:block;width:40px;height:40px;background:no-repeat 50% 50%;text-indent:-9999em;}
.visual .sliderBtn .btnPrev{left:-80px;}
.visual .sliderBtn .btnPrev a{background-image:url(../images/ico-prev.png);}
.visual .sliderBtn .btnNext{right:-90px;}
.visual .sliderBtn .btnNext a{background-image:url(../images/ico-next.png);}
.V_icon {padding:18px 0 0 30px}
.V_icon li{float:left; display:inline-block;}
/* visual end */


#main{width:97%;clear:both;margin-left:auto;margin-right:auto;}
#main_L{width:37%;margin-right:5%;float:left;}
#main_R{width:58%; float:left}
#main h3{display:inline-block;width:100%;font-size:20px;color:#326833; padding:12px 0 12px 0;font-weight:bold}
.assistant{clear:both; margin-bottom:10px}
.assistant li a{display:block;line-height:160%; color:#999; font-weight:700; font-size:14px; }
.assistant li img{display:inline-block;padding:0 10px 0 0; float:left}
.news p{line-height:120%}
.news img{display:inline-block;padding:0 15px 30px 0;float:left}
.news >h4{font-size:16px;color:#326833;display:block;margin-bottom:10px}

.notice li{ width:100%; padding:5px; border-bottom:1px  dotted #ddd}
.notice .class{color:red;width:15%;float:left;}
.notice .Date{ float:right;width:15%;}
.banner li{display:inline-block; padding-left:0.5px;padding-top:10px;}
.banner li:first-child{ padding-left:0}

/* alert */
.boxTy6 { position:relative; width:300px; border:solid 2px #8a8a8a; background:#f4f0e9; word-wrap:break-word;}
.boxTy7 { position:relative; border:solid 2px #8a8a8a; background:#f4f0e9;word-wrap:break-word;}
.interval2 { text-align:center; padding:20px; background:url("../images/sub/alert_bg.gif") 20px 20px no-repeat; word-wrap:break-word;}
.interval3 { text-align:center; padding:20px; background:url("../images/sub/alert_bg2.gif") 20px 20px no-repeat; word-wrap:break-word;}
.interval4 { text-align:center; padding:20px; background:url("../images/sub/alert_bg3.gif") 20px 20px no-repeat; word-wrap:break-word;}

.greet { color: #626262; font-size:12px; line-height:20px;  }


/* calendar  */
.popup{width:300px; background-color:#ffffff; border:#ccc 1px solid; color: #3d506e; border-radius:8px; padding:5px 5px 10px 5px}
.popup table{padding:10px;  border-collapse:collapse;}
.popup.popup{margin-left:-40px;margin-top:-100px;}
.popup thead {background-color:#fff;border:0;}
.popup td,div.calendar th{ padding: 3px; text-align: center;}
.popup td.title{font-weight:700;color:#c0c0c0;text-align:center;padding:5px}
.popup th{background:#02c5e2;font-weight:700; color: #fff;border:0px solid #fff}
.popup td.button {cursor: pointer;}
.popup td.button:hover{background-color:#fff; cursor:pointer;}
.popup tr.days td {width:1.5em;color:#666; text-align:center;cursor:pointer; border:0px solid #fff}
.popup tr.days td:hover{background-color:#0066ff;color:#fff;cursor:pointer;}
.popup tr.days td:active,.calendar td.button:active{ background-color: #cde;}
.popup tr.days td.selected{font-weight:700;  background-color: #28c9ff;  color:#fff;}
.popup tr.days td.otherDay{color: #bbb;}
.boxTy1 .year{text-align: center; font-weight:700; font-size:15px;padding:5px}
.month .paging{text-align:center; padding:5px}
.month .paging .skip{text-align:center; font-weight:700; cursor:pointer; margin-right:4px; margin-left:4px; font-size:13px}
.popup tr.days .day_sat{color:#28c9ff;font-weight:700;}
.popup tr.days .day_sun{color:#28c9ff;font-weight:700;}

/* login layout */
#login_wrap { width:100%; }
#logmain {position:absolute;top:50%;left:50%; height:530px;width:720px; margin:0 auto;	margin-left: -360px;	margin-top: -250px; }
.loginbox { width:650px; height:390px; background:url("../images/login_bg.png") 0 0 no-repeat; margin-top:20px; padding:10px 30px 0 50px; }
.loginbox > h2{ font-weight:700; font-size:32px;  color:#fff; padding-left:250px}
.log_caption{ font-weight:700; font-size:12.5px; color:#8eb7e1; clear:both; padding:8px 8px 8px 250px; }


.progress-bar {  background-color: #fff;  height: 25px;   padding: 5px;  width: 350px;  margin: 50px 0;  border-radius: 5px;  box-shadow: 0 1px 5px #ccc inset, 0 1px 0 #ccc; }
.progress-bar span {display: inline-block;  height: 100%;  border-radius: 3px; box-shadow: 0 1px 0 rgba(255, 255, 255, .5) inset;  transition: width .4s ease-in-out; }
.blue span {  background-color: #34c2e3; }

.loadingwrap{}
.loading{ position:relative; width:260px; height:52px; background:url(../images/loadingbg.png) no-repeat;margin:20px 0; margin-left:auto; margin-right:auto}
.loading ul{position:absolute;top:17px;left:45px}
.loading li{ float:left;}

/* sitemap - 사이트맵 테이블 */
.sitemap_tit{display:inline-block;padding:1px 1px 10px 13px;background:url(../images/icon_rely2.gif) no-repeat;color:#666;font-weight:normal}
.site_su{display:inline-block;padding:1px 1px 10px 13px; background:url(../images/icon_login.gif) no-repeat 0 6px;color:#c79b2b;font-weight:700;display:inline-block}

.modalpopup {position:absolute; left:40%; top:50%; width:350px; height:100px; margin:-120px 0 0 -120px; padding:20px; border:5px solid #ddd; background:#f4f0e9; z-index:20;word-wrap:break-word;}
.layer .closeBtn {margin-top:20px; text-align:center;}
button { padding:6px 10px 4px; background:none; border:1px solid #999; border-radius:2px; font-size:12px; cursor:pointer; color:#0066aa;}
.dimmed {position:absolute; top:0; left:0; width:100%; height:100%; background:#ffffff; z-index:10; opacity:0.3;}

.tooltip{display:block; text-overflow:ellipsis; overflow:hidden}

input::-ms-clear { display: none; }



/*----------------Footer styles----------------*/

footer { width: 95%; display: flex; justify-content: space-between; align-items: center; padding: 20px 40px; background-color: var(--secondary-color); margin-right: 100px; font-size: 48px; font-weight: bold;}
footer > div { display: flex; align-items: center; gap: 5px; }
footer > div > img {height: 35px;}
footer > :last-child { gap: 10px; }
footer > :last-child > *:hover { cursor: pointer; color: #326833;}

/* LOGIN FORM */

h1, h2, h3, h4, h5, h6, p {
  margin: 0;
  padding: 0;
}
#login_header {
  color: grey;
  font-weight: bold;
  margin-bottom: 30px;
  margin-top: 20px;
}
#login_header h1{
  font-size: 28px;
}

#login_header p{
  font-size: 18px;
  margin-top: 10px;
}

.main_card_login {
  height: 100%;
  width: 100%;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 30px 0px;
  background-color: #f2f2f2;
}


.country_logo{
  content: url(../images/guinea_logo.png);
}

.line-bar{
  content: url(../images/login-left-deco.png);
}

.email{
  content: url(../images/email-icon.png);
}

.password{
  content: url(../images/lock-icon.png);
}

.login_container {
  justify-content: center !important;
  width: 100%;
  height: 100%;
  max-height: 900px;
  display: flex;
  flex-direction: row;
  background-color: #FFFFFF;
}

/*----------------Outlined Text Input styles----------------*/

.text-input {
  position: relative;
  margin: 10px 0;
}

.text-input img {
  position: absolute;
  left: 10px;
  top: 50%;
  transform: translateY(-50%);
}

.text-input input {
  width: 350px;
  padding: 10px 10px 10px 40px;
  border: 1px solid #ccc;
  border-radius: 4px;
}

.radio-input {
  display: flex;
  align-items: center;
  margin-top: 20px;
}

.radio-input label {
  margin-left: 8px;
}

.text-input > input::placeholder {
  opacity: 0.5;
}

.text-input > img {
  opacity: 0.3;
}

/*----------------Radio Input styles----------------*/

.radio-input {
  display: flex;
  gap: 5px;
  flex-direction: row;
  align-items: center;
}

.radio-input label {
  font-size: 12px;
  font-weight: 400;
  line-height: 18px;
  letter-spacing: 0em;
  text-align: left;
}

.radio-input input[type="radio"] {
  appearance: none;
  width: 20px;
  height: 20px;
  border: 1px solid #EEEEEE;
  border-radius:  50%;
  flex-shrink: 0;
  margin: 0;
  display: grid;
  place-content: center;
}

.radio-input input[type="radio"]::before {
  content: "";
  width: 10px;
  height: 10px;
  display: block;
  border-radius: 50%;
  transform: scale(0);
  transition: 120ms all ease-in-out;
  background: #326833 !important;
}

.radio-input input[type="radio"]:checked {
  border-color: #326833 !important;
}

.radio-input input[type="radio"]:checked::before {
  transform: scale(1);
}



/*----------------Button styles----------------*/

.button-contr {
  /*display: flex;*/
  /*flex-direction: column;*/
  /*align-items: center;*/
  /*justify-content: center;*/
  /*width:100%;*/

  display: flex;
  justify-content: center;
}

button {
  display: block; /* Allows margin auto to work */
  width: 100%; /* Give the button a fixed width */
  margin: 20px auto; /* Center horizontally */
  padding: 10px 20px;
  background-color: #2a9d8f;
  color: white;
  border: none;
  border-radius: 4px;
}

button:hover {
  background-color: #035a3a; /* Darker shade for hover effect */
}

.button-outlined {
  border: 1px solid #326833 !important;
  background-color: transparent;
  color: #326833 !important;
}


/*----------------Left container styles----------------*/

.login_container_left {
  position: relative;
  background-color: #326833 !important;
  color: #fff;
  width: 100%;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 30px;
  line-height: 18px;
}

.login_container_left > * {
  z-index: 1;
}

.login_container_left > :first-child {
  height: 150px;
}
.login_container_left > h1:first-of-type {
  font-size: 28px;
  font-weight: 700;
  text-align: left;
}
.login_container_left > p:first-of-type {
  max-width: 500px;
  font-weight: 500;
  font-size: 14px;
  text-align: left;
}

.login_container_left > :last-child {
  width: 50%;
  position: absolute;
  bottom: 0;
  left: 0;
  z-index: 0;
}

.login_container_left_bottom {
  width: 100%;
  height: 100%;
  max-height: 200px;
}

/*----------------Right container styles----------------*/

.login_container_right {
  border-radius: 0;
  z-index: 2;
  padding: 0;
  margin: 0;
  position: relative;
  width: 40%;
  display: flex;
  justify-content: center;
  color: #333333;
  flex-direction: column;
}


/*max-width: 768px*/
/*991.98px*/
@media screen and (max-width: 980.98px) {
  .wrap_menu {
    position: relative;
  }

  .cbp-hsmenu {
    list-style: none;
    padding: 0;
    margin: 0;
    display: none; /* Masquer le menu par défaut */
    position: absolute; /* Positionner le menu */
    right: 0; /* Aligné à gauche */
    top: 50px; /* Ajustez selon votre design */
    background: #326833; /* Couleur de fond du menu */
    border: 1px solid #ccc; /* Bordure pour le menu */
    box-shadow: 0 2px 10px rgba(0, 0, 0, 0.1); /* Ombre pour effet visuel */
    z-index: 1000; /* Assurez-vous que le menu est au-dessus des autres éléments */
    width: 200px; /* Largeur fixe pour le menu */
  }

  .cbp-hsmenu li {
    margin: 0; /* Pas d'espaces entre les éléments */
  }

  .cbp-hsmenu a {
    text-decoration: none;
    padding: 10px 15px; /* Ajout de padding pour le style */
    display: block; /* Chaque élément occupe toute la largeur */
  }

  /* Styles pour le bouton hamburger */
  .nav-button {
    cursor: pointer; /* Change le curseur pour indiquer que c'est cliquable */
  }

  /* Styles supplémentaires pour les petits écrans */
  @media (max-width: 768px) {
    .cbp-hsmenu {
      display: none; /* Masquer le menu par défaut */
    }

    .nav-button-wrap {
      display: block; /* Afficher le bouton sur petits écrans */
    }
  }

  .nav-button-wrap {
    display: block; /* Afficher le bouton hamburger */
  }

  .login_container {
    display: block;
    align-items: center !important;
  }
  /*.main_card_login .button-contr .text-input*/
  .main_card_login .login_container .login_container_right {
    max-width: 100%;
    /*min-height: 100vh; */
  }
  .login_container .login_container_left {
    display: none; }
  button{
    width: 100%;
  }

  .text-input{
    width: 100%;
  }
}