/*MARGINS*/
.m10{margin:10px 0;}
body{min-height: 100vh; position: relative; margin:0; padding: 0;}
body.dualBody:before{
    content: "";
    width: 175px;
    position: absolute;
    right: 45%;
    top: 0;
    bottom: 0;
    background-image: linear-gradient(90deg, transparent, #EBBCC4);
    /* box-shadow: -30px 0 100px #EBBCC4;*/
    z-index: -1;
}
.container{max-width: 100%;}
p{font-size: 19px; font-family: Muli, sans-serif; color:#303B45; line-height: 36px;}
.p18{font-size: 18px; line-height:22px;}
.psmall{font-size: 16px; color: #3D3D3D;}
.pbold{font-family: MuliBold, sans-serif;}
.bold {
    font-family: MuliBold, sans-serif;
}

a{text-decoration: none !important;}
.mb35{margin-bottom:35px;}

label{display: block; font-size: 12px; font-family: MuliSemiBold, sans-serif; color: #000000;}
.bodyContent{ min-height: calc(100vh - 190px); display: flex; align-items: center; padding-bottom: 75px;}
.dnd{display: none !important;}
.mobileToothImage{width: 60%; display: flex; margin-left: auto; margin-right: auto;}
.customSize{width: 1116px; max-width: 100%; margin-left: auto; margin-right: auto;}

.bodyGradient:before{
    content:'';
    left:0;
    bottom:0;
    width: 100%;
    position: absolute;
    box-shadow: 0 -80px 150px 100px #ebbcc4;


}

.popUpForm {width: 446px; margin-left: auto; margin-right: auto;}

/*FONTS - TITLES*/
h1{
    font-size: 60px;
    /*font-weight: bold;*/
    color: #EBBCC4;
    font-family: MuliExtraBold, sans-serif;
    font-weight: 400;
    line-height: 70px;
}
h3{
    font-family: MuliExtraBold, sans-serif;
    font-size: 32px;
    color: #EBBCC4;
}

.muliBold{font-family: MuliBold, sans-serif !important;}

h4{
    font-family: MuliSemiBold, sans-serif;
    font-size: 26px;

}




h5{
    font-weight: bold;
    color: #EBBCC4;
    font-family: Muli, sans-serif;
    font-size: 18px;
}

.popupSubtitle{font-family: MuliBold, sans-serif; font-size: 18px; color:#414141 }

.white{color:white;}

/*SWAL*/
.swal2-styled.swal2-confirm {
    border:none !important;
    background-color: #EBBCC4 !important;
}
.swal2-styled.swal2-confirm:hover {
    background-color: rgba(0, 33, 82, 0.65) !important;
}

h2.swal2-title {
    font-family: MuliExtraBold, sans-serif;
    font-size: 32px;
    color: #EBBCC4;
    margin-top: 20px;
    margin-bottom: 10px;
}

.swal2-container .swal2-html-container {
    font-size: 19px ;
    font-family: Muli, sans-serif;
    color: #303B45;
    line-height: normal;
    margin: 0 0 10px;
}

.swal2-shown .swal2-popup {
    width: 500px ;
    max-width: 95vw;
    border-radius: 10px;
}

.swal2-shown .swal2-styled.swal2-confirm,
.swal2-shown .swal2-styled.swal2-cancel {
    font-size: 15px;
}






.flex{display:flex;}
.asc{align-self:center;}
.ml10{margin-left: 10px;}

/* HOME */

#home{width: 100%; display: flex;flex-wrap: wrap; }
#home .col-home{width: 50%; align-self: center; position:relative;}
#home .col_home_1{width: 55%;}
#home .col_home_2{width: 45%;}
#home .welcome{align-self: center; width: 100%; padding-right: 150px;}
#home .logo{margin: 20px 0; padding: 0 15%;}
#home .home_login_form{align-self: center;  max-width: 100%; width: 530px; margin-left: auto; margin-right: auto; padding-left: 80px; margin-top: -75px;}
#home .form_link{text-decoration: none; font-family: MuliSemiBold, sans-serif;}
#home .home_login_form .form_input{ margin: 15px 0;}
#home .home_login_form input{width:100%; margin: 5px 0; padding: 10px 20px; border-radius: 100px; border: solid 1px #c7c7c7; height: 48px;}
#home .home_login_form input[type=checkbox]{width:25px; height:25px;}
#home .home_login_form .btn_enviar{width: 100%;background-color: #EBBCC4; color: white; border: none; font-family:MuliBold, sans-serif; font-size: 16px;}
.resetPasswordContainer{display: flex; flex-wrap: wrap; width: 100%;}
.col-reset{position: relative;}
.col_reset_1{width: 55%;}
.col_reset_2{width: 45%; align-self: center;}
.resetPassword{padding-left: 100px;}
.resetPassword .btn_enviar{width: 100%;background-color: #EBBCC4; color: white; border: none; border-radius:100px;padding: 10px 20px; height:48px; font-family:MuliBold, sans-serif; font-size: 16px;}
.resetPassword form {margin:20px 0; width: 450px; max-width: 100%; }
.resetPassword input{width: 100%; margin: 15px 0; padding: 10px 20px; border-radius: 100px; border: solid 1px #c7c7c7; height: 48px;}

/*logged Home*/
.intro{margin-top: -100px;}
.intro .introTitle{text-align: center;}
.intro .userNameIcon{background-color: #EBBCC4; border-radius: 100%; font-size: 20px; border: none; width: 110px; height: 110px; display: flex; justify-content: center; margin-left:auto; margin-right:auto;}
.intro .userNameIcon p{align-self: center; margin:0;color: white; font-family: NotoSansSemiBold, sans-serif; font-size: 52px; }
.patients .patients_grid{display: flex; flex-wrap: wrap; border: 2px solid #ccc; border-radius: 10px; padding: 30px; margin: 30px 0; z-index:1; background-color: white; position: relative; justify-content: center;}
.patients .patients_grid .card{width: 280px; max-width: 100%; border-radius:5px; text-align: center; margin: 15px 10px; position:relative; height: 208px;}
.patients .patients_grid .first_no_patient_card{border:dashed 2px #ccc; border-radius: 5px; border-bottom: 0; height:100%;}
.patients .patients_grid .no_partient_card{}
.patients .patients_grid .card .card_overlay{position: absolute;width: 100%;top: 0;left: 0;height: 100%;background-color: #EDEDED; border-radius: 5px; opacity:0.8;}
.patients .patients_grid .card.card_overlay{background-color: rgba(237,237,237,1);}
.patients .patients_grid .card.card_overlay h4{color: rgba(61,61,61,.2);}

.patients .patients_grid .no_patient_num{background-color: #D6D6D6; width: 88px; height: 88px; color: white; border-radius: 100%; margin: 10px auto; display: flex; justify-content: center;}
.patients .patients_grid .no_patient_num span{align-self: center; font-size: 36px; font-family: MuliSemiBold, sans-serif;}
.patients .patients_grid .first_no_patient_card .no_patient_btn{background-color:#EBBCC4; color: white; width: 100%; border: none; padding: 5px 0; border-bottom-left-radius: 5px; border-bottom-right-radius: 5px; position:absolute; left:0; bottom:0; height: 48px; font-family:NotoSansSemiBold, sans-serif; font-size: 16px;}
.patients .patients_grid .no_patient_btn{background-color:rgba(193,197,206,1); color: white; width: 100%; border: none; padding: 5px 0; border-bottom-left-radius: 5px; border-bottom-right-radius: 5px; position:absolute; left:0; bottom:0; height: 48px; font-family:NotoSansSemiBold, sans-serif; font-size: 16px;}

.patients .patients_grid .patient_card{border-radius: 5px; height:100%; background-color: #FFEBEF; padding: 10px 0;}
.patients .patients_grid .patient_btn{background-color:#EBBCC4; color: white; width: 100%; border: none; padding: 5px 0; border-bottom-left-radius: 5px; border-bottom-right-radius: 5px; position:absolute; left:0; bottom:0; height: 48px; font-family:NotoSansSemiBold, sans-serif; font-size: 16px; display: flex; justify-content: center; align-items: center;}
.patients .patients_grid .patient_num{background-color: #EBBCC4; width: 88px; height: 88px; color: white; border-radius: 100%; margin: 0 auto; padding: 10px 0; display: flex; justify-content: center;}
.patients .patients_grid .patient_num span{align-self: center; font-size: 36px; font-family: MuliSemiBold, sans-serif}
.patients .patients_grid .patient_card h4{margin-top:0; padding-top: 10px;}
.patients .patients_grid .patient_card .dropdown{position: absolute; left:10px; top:8px;}
.patients .patients_grid .patient_card_2 .btn-primary{float: left; background:transparent; color: white; padding:0; border:none;}
.patients .patients_grid .patient_card .btn-primary{float: left; background:transparent; color: #DB8E9B; padding:0; border:none;}
.patients .patients_grid .patient_card_2 .delete_patient{position: absolute; right:10px; top:8px; color: white;}
.patients .patients_grid .patient_card .delete_patient{position: absolute; right:10px; top:8px; color: #DB8E9B;cursor:pointer;}


.patients .patients_grid .patient_card_2{border-radius: 5px; height:100%; background-color: #DB8E9B; padding: 10px 0;}
.patients .patients_grid .patient_card_2 h4{margin-top:0; padding-top: 10px;}
.patients .patients_grid .patient_card_2 .patient_completed{background-color:#DB8E9B; color: white; width: 100%; border: none; padding: 5px 0; border-bottom-left-radius: 5px; border-bottom-right-radius: 5px; position:absolute; left:0; bottom:0; font-family: NotoSansSemiBold, sans-serif; font-size: 16px;}
.patients .patients_grid .patient_card_2 .dropdown{position: absolute; left:10px; top:8px;}
.close_message:hover{cursor: pointer;}


/*POPUP*/
.full_overlay{position: absolute; width:100%; height:100%; left: 0; top:0; background-color: rgba(255, 255, 255, 0.75); z-index: 10;}
.popup{width: 756px; height:94.6%; background-color: white; margin-left: auto; margin-right: auto; padding:50px 100px; box-shadow: 2px 2px 25px 2px #ccc; position: relative}
.popup_header_col{display: flex; justify-content: space-between; width: 100%;}
.close_popup_btn{align-self: center; color: #EBBCC4;}
.close_popup_btn:hover{color:#DB8E9B;}
.close_popup_btn .fa-close{ padding: 4px 5px; border: solid 2px #EBBCC4;border-radius: 100%;}
.close_message{position:absolute; top:10px; right:10px;}
.close_message:hover{color:#DB8E9B;}
.close_message .fa-close{ padding: 4px 5px; border: solid 2px #EBBCC4;border-radius: 100%; color: #EBBCC4;}


/* -- NAVIGATION*/
.lastNav:after{display: none !important;}
.popup_navigation {list-style: none;position: absolute;left: 20px;top: 105px;}
.popup_navigation >li {position: relative;color: #EBBCC4;margin-bottom: 50px;cursor: pointer; width:10px; height: 10px;}
/*.popup_navigation>li:before {content: '\25CF';margin-right: 10px;font-size: 20px;}*/
.popup_navigation>li:after {position: absolute;left: 2px;top: 22px;content: '';border-left: 2px solid #4E738A;margin-left: 5px;height: 48px; opacity:0.25;z-index:1;}
.popup_navigation>.selected:after {position: absolute;left: 2px;top: 28px;content: '';border-left: 2px solid #4E738A;margin-left: 5px;height: 42px; opacity:0.25; z-index: 1}
.popup_navigation>.done:after {position: absolute;left: 2px;top: 28px;content: '';border-left: 2px solid #4E738A;margin-left: 5px;height: 36px; opacity:0.25; z-index: 1}
/*.popup_navigation >li:first-of-type:after {top: 50%;}
.popup_navigation >li:last-of-type:after {top: -50%;}*/
.selected{color: white !important;}
.li_selected{border: solid 6px #EBBCC4;border-radius: 100%;position: absolute;top: 4px;left: -4px;width: 24px;height: 24px;}
.li_no_selected{border: solid 6px white;border-radius: 100%;position: absolute;top: 4px;left: -4px;width: 24px;height: 24px; background-color:#EBBCC4;}
.li_done{border: solid 0 #6A7E93FF;border-radius: 100%;position: absolute;top: 4px;left: -4px;width: 24px;height: 24px; background-color:#EBBCC4;}
.li_done:after{content:'\2713'; color:white; position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%);}

/* -- POPUP FORM */
.form_group{display: flex; flex-wrap: wrap; margin:0;}
.form_item{/*width:45%;*/ width:215px; margin:8px 4px; position: relative;}
.form_item img{width: 200px; margin-left: 30px;}
.form_item_expanded{width:100%; margin:8px 0; position: relative;}
.form_item_medium{width:72%; margin-right: 10px;}
.form_item_medium input{ width: 100%; padding: 10px; border-radius: 100px; border: solid 1px #C4C4C4;}
.form_item_small{width:25%;}
.form_item_small input{ width: 100%; padding: 10px; border-radius: 100px; border: solid 1px #C4C4C4;}
.form_item input{ width: 215px; height: 48px; padding: 10px 15px; border-radius: 100px; border: solid 1px #ccc; max-width: 100%;}
.form_item_expanded input{width:100%; padding: 10px; border-radius: 100px; border: solid 1px #C4C4C4; height: 48px;}
.btn-check{opacity: 0;}
.form_pair{display: flex; justify-content: space-between}
.form_pair .btn-primary{width: 48%; margin:0 5px; background-color: transparent; color:#C4C4C4; border:solid 1px; border-radius:100px;}
.form_trio {display: flex; justify-content: space-between; align-items:end; margin-bottom:30px;}
.form_trio .form_trio_item{/*width: 144px;*/ margin:5px;}
.form_quintet{display: flex; justify-content: space-between}
.form_quintet .form_quintet_item{width: 20%; align-self: center; margin: 5px;}
.form_quintet .form_quintet_item label {
    cursor:pointer;
}
.btn_next_modal{background-color: #EBBCC4; color: white; border: 100px; width: 100%; padding: 10px; border-radius: 100px; height:48px; border: none;}
.btn_prev_modal{background-color: #D6D6D6; color: white; border: 100px; width: 100%; padding: 10px; border-radius: 100px; height:48px;}
.form_pair label{width: 48%; margin:0 5px; font-weight: 100; color:#7e7e7e}
.formTitle{font-family: MuliBold, sans-serif; font-size: 32px; color: #303B45;}
.recomendedImg{display: flex; margin-left: auto; margin-right: auto;}

input::placeholder {
    font-family: MontserratMedium, sans-serif;
    font-size: 14px;
    color: #C4C4C4;
}
input{font-family: MontserratMedium, sans-serif; font-size: 14px}
input[type="radio"]:hover,
input[type="checkbox"]:hover{cursor: pointer;}
select{font-family: MontserratMedium, sans-serif; font-size: 14px}
input[type="date"]{
    color:#c7c7c7;
    text-transform: lowercase;
    letter-spacing: 1px;
    background-image: url('../images/calendar_icon.png');
    background-repeat: no-repeat;
    background-position-x: 90%;
    background-position-y: 50%;
}
input[type="date"].completed {
    background-image: url('../images/edit_icon.png') !important;
    background-repeat: no-repeat;
    background-position-x: 90%;
    background-position-y: 50%;
}

input[type="date"]::-webkit-calendar-picker-indicator {
    color:#c7c7c7 !important;
}
input:focus{
    background-image: none;
}

input[type="text"]{position: relative;}

input[type="text"].completed:after{
    content:'';
    position: absolute;
    right: 10px;
    top: 50%;
    transform: translate(-50%, -50%);
    width:20px;
    height:20px;
    background-image: url('../images/edit_icon.png');
    background-repeat: no-repeat;
    background-position: center;
}


input[type="date"]::-webkit-calendar-picker-indicator {
    opacity: 0;
    width: 35%;
    height: 100%;
    -webkit-appearance: none;
    cursor:pointer;
}


input.chk-btn {display: none;}
.first_popup_2 input.chk-btn {width: 100%; position: absolute; opacity: 0; display: block;}
input.chk-btn + label {
    border: 1px solid #C4C4C4;
    color:#C4C4C4;
    font-family: MontserratMedium, sans-serif;
    font-size: 14px;
    height: 48px;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 100px;
}

input.chk-btn + label span {
    display: block;
    padding: 20px;
}

input.chk-btn:not(:checked) + label:hover {box-shadow: 0px 1px 3px;}
input.chk-btn + label:active,
input.chk-btn:checked + label {background: #EBBCC4; border: none;color: white; font-family: MontserratMedium, sans-serif; font-size: 14px; height: 48px; display: flex; align-items: center; justify-content: center; border-radius: 100px;}

input.chk-btn + .green:active,
input.chk-btn:checked + .green {background: #76D365 !important; opacity: 1;}

input.chk-btn + .yellow:active,
input.chk-btn:checked + .yellow {background: #F0EA58 !important; opacity: 1;}

input.chk-btn + .orange:active,
input.chk-btn:checked + .orange {background: #EBAA2B !important; opacity: 1;}

input.chk-btn + .red:active,
input.chk-btn:checked + .red {background: #EF3A3A !important; opacity: 1;}


/* -- FIRST*/
.patitent_popup_first{display: none;}
.patient_popup_second{display: none;}
.edit_popup{display: none;}

.first_popup_1{display:none}
.first_popup_2{display:none}
.first_popup_3{display:none}
.first_popup_4{display:none}
.first_popup_5{display:none}

.second_popup_1{display: none}
.second_popup_2{display: none}
.second_popup_3{display: none}

.patient_popup_second .form_item label{width: 100%;}


.first_popup_2 .form_item label{width: 100%; text-align: center;}

/*THIRD*/

.form_quintet h4 {font-family: MuliBold, sans-serif; font-size: 24px; color: #EBBCC4;}
.legend_grid p{font-family: Muli, sans-serif; font-size: 12px; line-height: 14px;}
.first_popup_3 label{width: 40px; height: 40px !important;}
.first_popup_4 label{width: 40px; height: 40px !important;}
.second_popup_2 .form_quintet_item label{width: 40px; height: 40px !important;}
.second_popup_3 .form_quintet_item label{width: 40px; height: 40px !important;}
.green{border-color: #76D365 !important; border-width: 3px !important; opacity: 0.25;}
.yellow{border-color:#FBFADC !important; border-width: 3px !important;}
.orange{border-color:#EBAA2B !important; border-width: 3px !important; opacity: 0.25;}
.red{border-color:#EF3A3A !important; border-width: 3px !important; opacity: 0.25;}
.legend_grid{display: flex; margin: 10px 0;}
.legend_grid div{margin-right: 10px;}
.legend_grid p{flex-grow: 1; align-self: center;}

.green_circle{width: 30px; height:30px; background-color: #76D365; border-radius: 100%;}
.yellow_circle{width: 30px; height:30px; background-color: #F0EA58; border-radius: 100%;}
.orange_circle{width: 30px; height:30px; background-color: #EBAA2B; border-radius: 100%; }
.red_circle{width: 30px; height:30px; background-color: #EF3A3A; border-radius: 100%;}


.edit_popup .completed{color:white; background-color: #EBBCC4; border: none !important; height:48px;}
.edit_popup .edit_completed{position:absolute; color:white;right:20px; top:35px;}
.edit_popup .custom_select{width:100%; padding:10px; border-radius: 100px; border: solid 1px #ccc; height: 48px;}


.patient_popup_second .completed{color:white; background-color: #EBBCC4; border: none !important; height:48px;}
.patient_popup_second .edit_completed{position:absolute; color:white;right:20px; top:35px;}
.patient_popup_second .custom_select{width:100%; padding:10px; border-radius: 100px; border: solid 1px #ccc; height: 48px;}
.pencil_icon{width: 20px !important; height:20px !important;}
/*FIFTH*/
.form_trio label{width: 100%; text-align: center;}

/*USER EDIT DATA*/

.user_data_grid{display: flex; background-color: transparent; }
.user_data_col{}

.user_data{border: 2px solid #ccc; border-radius: 10px; padding: 30px; margin: 30px 0; margin-bottom: 50px;}
.user_data {padding: 20px 100px;}
.user_login_form .btn_enviar{width: 100%; background-color: #EBBCC4; color: white; padding:10px; border-radius:100px; border:none; margin: 5px 0; font-family:MuliBold, sans-serif; font-size: 16px;}
.user_data_form{width: 50% !important; align-self: center;}
.user_data_graph{align-self:center; width: 55%;}
.user_data_graph_container h1{font-size:60px; margin-top: 0;}
.user_login_form{padding-left: 80px; width: 530px; max-width: 100%; margin-left: auto; margin-right: auto;}
.user_login_form .form_group{justify-content: space-between;}
/*.user_login_form .form_item{margin:5px;}
.user_login_form .form_item_expanded{margin:5px;}*/

.graphData{ display: flex; flex-wrap:wrap;}
.graphData .graphLegend{ display: flex; flex-direction: column; flex-grow: 1; margin-left: 70px; align-self: center;}
.graphData .graphLegendItem{display:flex; margin:5px 0;}
.graphData .graphLegendItem .legendText{display:flex; margin-left: 10px;}
.graphData .graphLegendItem .legendText p{align-self: center; font-family: NotoSansSemiBold,sans-serif; font-size: 16px; line-height: 19px; width: 150px; max-width: 100%; margin-left:20px;}

#user_data_container .logo{position: absolute;padding: 0 7.5%;top: 50px;}
#user_data_container .dropdown{position: absolute; padding:0 7.5%; top:50px; right: 0;}
#user_data_container .dropdown .btn-primary {
    color: #fff;
    background-color: #EBBCC4;
    border-radius: 100%;
    font-size: 20px;
    border: none;
    width: 50px;
    height: 50px;
}

/*FOOTER*/
.footer{padding:20px; box-shadow: 0 -10px 6px  rgba(0,0,0,0.05); position: relative; width: 100%; background-color:white;}
.footer .footer_grid{ display: flex; justify-content: space-between;}
.footer a{ color: #3D3D3D; font-family: MuliBold, sans-serif; font-size: 13px; margin: 0 10px; }
.footerText{color: #3D3D3D; font-family: MuliBold, sans-serif; font-size: 13px;}

.legalText h2 {
    font-size: 45px;
    font-family: MuliExtraBold, sans-serif;
    margin-bottom: 35px;
    color:#EBBCC4;
}

.legalText p {
    font-size: 18px;
    line-height: 22px;
    margin-bottom: 35px;
}

.legalText ol li,
.legalText ul li{
    font-size: 18px;
    line-height: 22px;
    margin-bottom: 15px;
    font-family: Muli, sans-serif;
    color: #303B45;
}
.legalText .cookieTable {
    font-size: 16px;
    line-height: 22px;
    font-family: Muli, sans-serif;
    color: #303B45;
}