:root{
  --dark-100: #233546;

  --primary-100: #1C7E6D;
  --primary-000: #054237;

  --secondary-100: #79C4B6;
  --secondary-200: #B2DBD3;
  --secondary-300: #E6F2F0;
  --secondary-400: #F7FCFB;

  --medium-100: #536779;
  --medium-200: #C6CED5;

  --bluegrey-100: #E5E7F4;

  --light-100: #F4F4F4;
  --white: #FFFFFF;
  --black: #000;

  --general-100: #1E8BC3 ;
  --general-000: #106089 ;
  --general-200: #61B7E3 ;
  --general-400: #DFF3FE ;

  --mco-100: #F4B460 ;
  --mco-000: #E58B14 ;
  --mco-200: #FECE8E ;
  --mco-400: #FFEACF ;

  --had-100: #DF6277 ;
  --had-000: #C92B46 ;
  --had-200: #F293A3 ;
  --had-400: #FFD5DC ;

  --psy-100: #895FB3 ;
  --psy-000: #603788 ;
  --psy-200: #BD9FDB ;
  --psy-400: #E6D5F7 ;

  --smr-100: #25AA6C ;
  --smr-000: #1D7F51 ;
  --smr-200: #64C99A ;
  --smr-400: #B0EFD2 ;

  --pink-100: #D276CA ;
  --pink-000: #AC54A4 ;
  --pink-200: #E79EE1 ;
  --pink-400: #FFEBFD ;

  --grey-100: #A9A7B7 ;
  --grey-000: #8A879A ;

}

.dark-100 {     color: var(--dark-100)      !important;} .bg-dark-100 {     background-color: var(--dark-100)       !important;}
.primary-100 {  color: var(--primary-100)   !important;} .bg-primary-100 {  background-color: var(--primary-100)    !important;}
.primary-000 {  color: var(--primary-000)   !important;} .bg-primary-000 {  background-color: var(--primary-000)    !important;}
.secondary-100 {color: var(--secondary-100) !important;} .bg-secondary-100 {background-color: var(--secondary-100)  !important;}
.secondary-200 {color: var(--secondary-200) !important;} .bg-secondary-200 {background-color: var(--secondary-200)  !important;}
.secondary-300 {color: var(--secondary-300) !important;} .bg-secondary-300 {background-color: var(--secondary-300)  !important;}
.secondary-400 {color: var(--secondary-400) !important;} .bg-secondary-400 {background-color: var(--secondary-400)  !important;}
.medium-100 {   color: var(--medium-100)    !important;} .bg-medium-100 {   background-color: var(--medium-100)     !important;}
.medium-200 {   color: var(--medium-200)    !important;} .bg-medium-200 {   background-color: var(--medium-200)     !important;}
.bluegrey-100 { color: var(--bluegrey-100)  !important;} .bg-bluegrey-100 { background-color: var(--bluegrey-100)   !important;}
.light-100 {    color: var(--light-100)     !important;} .bg-light-100 {    background-color: var(--light-100)      !important;}
.white {        color: var(--white)         !important;} .bg-white {        background-color: var(--white)          !important;}
.black {        color: var(--black)         !important;} .bg-black {        background-color: var(--black)          !important;}
.general-100 {  color: var(--general-100)   !important;} .bg-general-100 {  background-color: var(--general-100)    !important;}
.general-000 {  color: var(--general-000)   !important;} .bg-general-000 {  background-color: var(--general-000)    !important;}
.general-200 {  color: var(--general-200)   !important;} .bg-general-200 {  background-color: var(--general-200)    !important;}
.general-400 {  color: var(--general-400)   !important;} .bg-general-400 {  background-color: var(--general-400)    !important;}
.mco-100 {      color: var(--mco-100)       !important;} .bg-mco-100 {      background-color: var(--mco-100)        !important;}
.mco-000 {		color: var(--mco-000) 		!important;} .bg-mco-000 {		background-color: var(--mco-000) 		!important;}
.mco-200 {		color: var(--mco-200) 		!important;} .bg-mco-200 {		background-color: var(--mco-200) 		!important;}
.mco-400 {		color: var(--mco-400) 		!important;} .bg-mco-400 {		background-color: var(--mco-400) 		!important;}
.had-100 {		color: var(--had-100) 		!important;} .bg-had-100 {		background-color: var(--had-100) 		!important;}
.had-000 {		color: var(--had-000) 		!important;} .bg-had-000 {		background-color: var(--had-000) 		!important;}
.had-200 {		color: var(--had-200) 		!important;} .bg-had-200 {		background-color: var(--had-200) 		!important;}
.had-400 {		color: var(--had-400) 		!important;} .bg-had-400 {		background-color: var(--had-400) 		!important;}
.psy-100 {		color: var(--psy-100) 		!important;} .bg-psy-100 {		background-color: var(--psy-100) 		!important;}
.psy-000 {		color: var(--psy-000) 		!important;} .bg-psy-000 {		background-color: var(--psy-000) 		!important;}
.psy-200 {		color: var(--psy-200) 		!important;} .bg-psy-200 {		background-color: var(--psy-200) 		!important;}
.psy-400 {		color: var(--psy-400) 		!important;} .bg-psy-400 {		background-color: var(--psy-400) 		!important;}
.smr-100 {		color: var(--smr-100) 		!important;} .bg-smr-100 {		background-color: var(--smr-100) 		!important;}
.smr-000 {		color: var(--smr-000) 		!important;} .bg-smr-000 {		background-color: var(--smr-000) 		!important;}
.smr-200 {		color: var(--smr-200) 		!important;} .bg-smr-200 {		background-color: var(--smr-200) 		!important;}
.smr-400 {		color: var(--smr-400) 		!important;} .bg-smr-400 {		background-color: var(--smr-400) 		!important;}
.pink-100 {		color: var(--pink-100) 		!important;} .bg-pink-100 {		background-color: var(--pink-100) 		!important;}
.pink-000 {		color: var(--pink-000) 		!important;} .bg-pink-000 {		background-color: var(--pink-000) 		!important;}
.pink-200 {		color: var(--pink-200) 		!important;} .bg-pink-200 {		background-color: var(--pink-200) 		!important;}
.pink-400 {		color: var(--pink-400) 		!important;} .bg-pink-400 {		background-color: var(--pink-400) 		!important;}
.grey-100 {		color: var(--grey-100) 		!important;} .bg-grey-100 {		background-color: var(--grey-100) 		!important;}
.grey-000 {		color: var(--grey-000) 		!important;} .bg-grey-000 {		background-color: var(--grey-000) 		!important;}




body{
	padding: 0;margin: 0;
	font-family: Poppins;
	font-size: 16px;
	line-height: 24px;
	font-weight: 400;
	color: var(--medium-100);
}

/* width */
::-webkit-scrollbar {
	width: 10px;
  }

/* Track */
::-webkit-scrollbar-track {
background: #FFF; 
}

/* Handle */
::-webkit-scrollbar-thumb {
background: #DDD; 
}

/* Handle on hover */
::-webkit-scrollbar-thumb:hover {
background: #CCC; 
}


.d-none{
	display: none !important;
}
.float-r{
	float:right;
}
.float-l{
	float:left;
}

.flex-vertical-center{
	display: flex;
	align-items:center;
	flex-direction:row;
}

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

.m-auto{
	margin:auto;
}

.mb-10{
	margin-bottom:10px;
}
.ml-10{
	margin-left:10px;
}
.mt-10{
	margin-top:10px;
}
.mr-10{
	margin-right:10px;
}

h1{font-size: 32px;line-height: 48px;font-weight: 500;color:var(--dark-100);margin:0;}
h2{font-size: 28px;line-height: 42px;font-weight: 500;color:var(--dark-100);margin:0;}
h3{font-size: 24px;line-height: 36px;font-weight: 500;color:var(--dark-100);margin:0;}
h5{font-size: 14px;line-height: 21px;font-weight: 500;color:var(--secondary-100);margin:0;text-transform: uppercase;letter-spacing: 20%;}
.card-title{font-size: 24px;line-height: 32px;font-weight: 700;color: var(--dark-100);}
.card-title-sm{font-size: 16px;line-height: 24px;font-weight: 700;color: var(--dark-100)}
label{font-size: 12px;line-height: 18px;font-weight: 600;color:var(--dark-100);text-transform: uppercase;letter-spacing: 10%;}
.label-button{font-size: 14px;line-height: 21px;font-weight: 600;color:var(--dark-100);text-transform: uppercase;letter-spacing: 10%;}
p{font-size: 16px;line-height: 24px;color:var(--bluegrey);font-weight: 400;}
.small-title{font-size:20px;line-height:30px;font-weight:700;color:var(--dark-100);}
.placeholder{font-size: 16px;line-height: 24px;font-style: italic;color:var(--medium-100);font-weight: 400;opacity:0.7;}
.text-info{font-size: 14px;line-height: 21px;color:var(--secondary-100);font-weight: 700;}

.transform-uppercase{
	text-transform: uppercase;
}

.collapse-title{
	text-decoration:none;
	color:var(--black);
	display:flex;
	align-items:center;
	justify-content:space-between;
	font-weight:700;
	size:16px;
	line-height:24px;
	cursor:pointer;
}

.collapse .collapse-title{
	font-weight:600;
	size:14px;
	line-height:21px;
	text-transform:uppercase;
}
.collapse .collapse{
	font-weight:400;
	size:14px;
	line-height:18px;
}

.collapse-title::after{
	float:right;
}

.collapse-title::after{
	font-family: 'feather' !important;
	content:"\e947";
}

.collapse-title.active::after{
	font-family: 'feather' !important;
	content:"\e940";
}

.collapse{
	padding-left:40px;
	transition:0.5s;
	display:flex;
	flex-direction:column;
	margin:10px 0;
}

.collapse.collapsed{
	height:0;
	overflow:hidden;
}


.content-frame{
	padding:60px;
}
.content-frame.frame-left{
	border-radius:0 60px 60px 0;
}
.content-frame.frame-right{
	border-radius:60px 0 0 60px;
}

.form-container{
	margin-top:20px;
	margin-bottom:20px;
	border-radius:30px 0 30px 0;
	background-color:var(--secondary-400);
	padding: 20px;box-sizing: border-box;
}

.card{
	border-radius:30px 0 30px 0;
	padding: 20px;box-sizing: border-box;
}
.card span{
	margin-right:5px;
}

.card img{
	padding-top:30px;
	height:45px;
	width:45px;
}




.btn{
	padding: 12px 24px;
	border: none;
	outline: none;
	background-color: transparent;
	border-radius: 30px;
	cursor: pointer;
	transition: 0.5s background-color;
	border: 2px solid transparent;
	font-size: 14px;
	font-weight: 600;
	text-decoration:none;
}
.btn-round{
	width: 41px;height: 41px;
	line-height: 40px;
	padding: 0;
	text-align: center;
	border-radius: 100%;
	overflow: hidden;
}

.btn-statement{
	border-radius: 50px;
	padding: 20px 50px !important;
	background-color: var(--secondary-100);
	color: var(--dark-100) !important;
	font-size: 20px;
	line-height: 34px;
	font-weight: 400;
}
.btn-statement b{
	font-weight: 700;
}

.btn a{
	text-decoration:none;
	color:inherit;
}


.btn-primary{ background-color: var(--primary-100);color: var(--white); }
.btn-primary:hover{ background-color: var(--primary-000); }

.btn-secondary{ background-color: var(--white);color: var(--primary-100);}
.btn-secondary:hover{background-color: var(--primary-000);color: var(--white);}

.btn-outline{ background-color: var(--white);color: var(--primary-100);border: 2px solid var(--primary-100);}
.btn-outline:hover{background-color: var(--primary-000);color: var(--white);border: 2px solid var(--primary-000);}

.btn-primary:disabled,.btn-secondary:disabled, .btn-outline:disabled{
	background-color:var(--light);
	color: var(--medium-200);
	border-color: var(--light);
	cursor:not-allowed;
}

/* NAVBAR */

nav.navbar{
	background-color: var(--white);
	height: 80px;
	display: flex;
	flex-direction: row;
}

.navbar-brand{
	height:100%;
	display: flex;
	justify-content: center;
	align-items: center;
	margin: 0 40px;
}
.navbar-brand > *{
	height: 45px;
}

.navbar-list{
	width:100%;
	display: flex;
	flex-direction: row;
	align-items: center;
	text-transform: uppercase;
	font-weight: 600;
}

nav.navbar a{
	text-decoration:none;
}

.navbar-item{
	cursor: pointer;
	font-size: 15px;
	line-height: 22.5px;
	margin:0 10px;
	color:var(--dark-100);
}

.navbar-title{
	font-size: 18px;
	line-height: 24px;
	margin:0 10px;
	color:var(--dark-100);
}

.navbar-item.active span{
	border-bottom:4px solid var(--pink-100) ;
}
/* NAVBAR */

/* SELECT */

.custom-select select{
	display: none;
}
.custom-select, .custom-form{
	border-radius: 20px 0 20px 0;
	--width: 400px;
	--height: 24px;
	padding: 10px;
	background-color: var(--white);
	border: 2px solid var(--bluegrey-100);
	display: flex;
	flex-direction: row;
	justify-content: space-between;
	position: relative;
}
.custom-select.open, .custom-form:has(input:focus){
	border: 2px solid var(--primary-100);
}

.custom-form-sm{
	border:1px solid var(--bluegrey-100);
	padding:8px;
	border-radius:10px;
	display:flex;
	flex-direction:row;
}

.custom-form-sm input, .custom-form-sm select{
	outline:none;
	border:none;
	width:100%;
}

.custom-form-sm::before, .custom-form-sm::before{
	content: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' width='24' height='24' stroke='currentColor' stroke-width='2' fill='none' stroke-linecap='round' stroke-linejoin='round' class='css-i6dzq1'%3E%3Ccircle cx='11' cy='11' r='8'%3E%3C/circle%3E%3Cline x1='21' y1='21' x2='16.65' y2='16.65'%3E%3C/line%3E%3C/svg%3E");
	width: 24px;
	height: 24px;
	display: block;
}

.custom-select::before, .custom-form::before{
	content: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' width='24' height='24' stroke='currentColor' stroke-width='2' fill='none' stroke-linecap='round' stroke-linejoin='round' class='css-i6dzq1'%3E%3Ccircle cx='11' cy='11' r='8'%3E%3C/circle%3E%3Cline x1='21' y1='21' x2='16.65' y2='16.65'%3E%3C/line%3E%3C/svg%3E");
	width: 24px;
	height: 24px;
	display: block;
}
.custom-select::after{
	content: "▾";
	display: block;
	width: 24px;
	height: 24px;
	text-align: center;
	 line-height: 24px;
}
.custom-form-sm option{
	display:block;
	padding:30px 8px;
}


.custom-select.open::after{
	content: "▴";
}

.dropdownarea{
	max-height: 400px;
	overflow-x: hidden;
	overflow-y:scroll;
	box-sizing: border-box;
	background-color: #FFF;
	position: absolute;
	padding: 10px;
	left: -2px;
	top: 100%;
	min-width: calc(100% + 2px);
	margin-top: 5px;
	border: 1px solid var(--light);
	box-shadow:0 0 5px rgba(0,0,0,0.3);
	z-index: 10;
}

.dropdownarea svg{
	width: 528px;
	height: 300px;
}

.dropdownarea svg path:not(.notallowed):hover{
	fill: #B2DBD3;
	cursor: pointer;
}

.dropdownarea svg path.notallowed{
	fill: var(--grey-100);
}

.selectedelement{
	width: calc(100% - 90px);
	display: flex;
	justify-content: start;
	flex-wrap: wrap;
	flex-direction: row;
	overflow-x:hidden;
}

.selectedelement div{
	background-color: var(--primary-100);
	color: #FFF;
	padding:2px 4px;
	border-radius: 4px;
	margin-right: 7px;
	margin-bottom:1px;
	white-space: nowrap;
	display: flex;
	flex-direction: row;
}

.selectedelement div::after{
	content: "×";
	
	display: flex;
	align-items: center;
	margin-left: 5px;
	cursor: pointer;
}

.optgroup{
	margin-bottom:12px;
	padding: 8px;
	border-radius: 5px;
	background-color: #DDD;
}
.optgroup > label{
	padding: 5px 15px ;
}

.options{
	padding:0 8px;
	display: flex;
	flex-direction: column;
}
.optgroup .options > label{
	background-color: #FFF;
}

.options > label{
	background-color: #DDD;
	margin: 5px 0;
	box-sizing: border-box;
	padding: 12px 15px;
	border-radius: 5px;
}

.optgroup label{
	width: 100%;
	display: block;
	user-select: none;
}
.custom-select input[type="checkbox"]{
	display: none;
}

.custom-select .options label:has(input[type="checkbox"]:checked){
	background-color: rgb(229, 243, 241);
}

.optgroup:has(> label input[type="checkbox"]:checked){
	background-color: rgb(189, 216, 212);
}

.custom-form:has(input[type="text"]:disabled){
	background-color:var(--bluegrey);
}

.custom-select input[type="text"],.custom-form input[type="text"]{
	width: 100%;
	height: 20px;
	padding-left: 20px;
	border: none;
	outline: none;
}

.completion-item{
		font-size:20px;
		font-weight:500;
		padding:5px;
		cursor:pointer;
}

.completion-item:hover{
	background-color: var(--light-100);
}

.inline-select{
	background-color:var(--secondary-300);
	border-radius:100px;
	outline:none;
	border:none;
	display:block;
	padding:6px;
	height:48px;
	overflow:hidden;
}

.inline-select option{
	padding:10px;
	border-radius:100px;
	display:inline-block;
}
.inline-select option:checked{
	color:var(--white);
	background-color:var(--primary-100);
}

/* SELECT/AUTOCOMPLETE */





/* Badge */
.badge{
	background-color: var(--white);
	padding: 10px;
	border-radius: 20px;
	display: flex;
	flex-direction: row;
	align-items: center;
	justify-content: space-between;
	max-width: 300px;
	position: relative;
}

.tooltip{
	display: none;
}
.badge:hover .tooltip{
	display: flex;
	position: absolute;	
	background-color: var(--black);
	color: var(--white);
	border-radius: 10px;
	padding: 10px;
	bottom: 44px;
	left: 0px;
}

.badge .label{
	max-width: 90%;
	text-overflow: ellipsis;
	overflow: hidden;
	white-space: nowrap;
}

.badge .close::after{
	content: "×";
	cursor: pointer;
	user-select: none;
	line-height:24px;
}



/* Toast */
.toastContainer{
	position:fixed;
	width:100%;
	top:10vh;
	display:flex;
	justify-content:center;
	z-index:1000;
}
.toastList{
	display:flex;
	justify-content:center;
	flex-direction:column;
}
.toast{
	width:100%;
	padding:10px;
	background-color:#FFF;
	border:2px solid #FFF;
	border-radius:10px;
	margin:10px;
	display:flex;
	flex-direction:row;
	justify-content:space-between;
	align-items:center;
}
.toast p {
	padding: 0px;
	margin: 0px;
}
.toast.toast-success{
	border:2px solid var(--primary-100);
	background-color: var(--secondary-200);
}
.toast.toast-success:before{
	font-family:'feather';
	content: "\e93d";
	margin-right:10px;
	color:var(--primary-100);
}

.toast.toast-error{
	border:2px solid var(--pink-100);
	background-color: var(--pink-400);
}
.toast.toast-error:before{
	font-family:'feather';
	content: "\e924";
	margin-right:10px;
	color:var(--pink-100);
}
.toast .close{
	margin-left:10px;
	text-align:end;
	padding: 0px 5px 3px;
	font-weight: normal;
}