@import url('https://fonts.googleapis.com/css2?family=Blinker:wght@100;200;300;400;600;700;800;900&family=DM+Sans:opsz,wght@9..40,100..1000&display=swap');

/*- FONTS -*/
/* Blinker */
.blin-thin{font-family: "Blinker", sans-serif;font-weight: 100;font-style: normal;}
.blin-extra{font-family: "Blinker", sans-serif;font-weight: 200;font-style: normal;}
.blin-light{font-family: "Blinker", sans-serif;font-weight: 300;font-style: normal;}
.blin-reg{font-family: "Blinker", sans-serif;font-weight: 400;font-style: normal;}
.blin-semi{font-family: "Blinker", sans-serif;font-weight: 600;font-style: normal;}
.blin-bold{font-family: "Blinker", sans-serif;font-weight: 700;font-style: normal;}
.blin-extra{font-family: "Blinker", sans-serif;font-weight: 800;font-style: normal;}
.blin-black{font-family: "Blinker", sans-serif;font-weight: 900;font-style: normal;}

/* DM Sans */
.dm-thin{font-family: "DM Sans", sans-serif;font-weight: 100;font-style: normal;}
.dm-extra{font-family: "DM Sans", sans-serif;font-weight: 200;font-style: normal;}
.dm-light{font-family: "DM Sans", sans-serif;font-weight: 300;font-style: normal;}
.dm-reg{font-family: "DM Sans", sans-serif;font-weight: 400;font-style: normal;}
.dm-med{font-family: "DM Sans", sans-serif;font-weight: 500;font-style: normal;}
.dm-semi{font-family: "DM Sans", sans-serif;font-weight: 600;font-style: normal;}
.dm-bold{font-family: "DM Sans", sans-serif;font-weight: 700;font-style: normal;}
.dm-extra{font-family: "DM Sans", sans-serif;font-weight: 800;font-style: normal;}
.dm-black{font-family: "DM Sans", sans-serif;font-weight: 900;font-style: normal;}

/*- FONT SIZE -*/
.fz-12{font-size: 12px;}
.fz-14{font-size: 14px;}
.fz-16{font-size: 16px;}
.fz-18{font-size: 18px;}
.fz-20{font-size: 20px;}
.fz-22{font-size: 22px;}
.fz-24{font-size: 25px;}
.fz-26{font-size: 25px;}
.fz-28{font-size: 25px;}
.fz-30{font-size: 30px;}
.fz-35{font-size: 35px;}
.fz-40{font-size: 40px;}
.fz-50{font-size: 50px;}
.fz-60{font-size: 60px;}

/*- COLORS -*/
/* Blanco */
.col-blanco{color: #ffffff;}
.back-blanco{background-color: #ffffff;}
button.back-blanco:focus{background-color: #ffffff;}
/* Negro */
.col-negro{color: #000000;}
.back-negro{background-color: #000000;}
button.back-negro:focus{background-color: #000000;}
/* Gris */
.col-gris{color: #737373;}
.back-gris{background-color: #737373;}
button.back-gris:focus{background-color: #737373;}
/* Morado */
.col-mor{color: #5c348c !important;}
.back-mor{background-color: #5c348c !important;}
button.back-mor:focus{background-color: #5c348c !important;}
/* Morado Claro */
.col-mor-cla{color: #b99edb;}
.back-mor-cla{background-color: #b99edb;}
button.back-mor-cla:focus{background-color: #b99edb;}
/* Rojo */
.col-mor{color: #5c348c;}
.back-mor{background-color: #5c348c;}
button.back-mor:focus{background-color: #5c348c;}
/* Cafe */
.col-cafe{color: #b4946d;}
.back-cafe{background-color: #b4946d;}
button.back-cafe:focus{background-color: #b4946d;}

html, body{overflow-x: hidden;}

/*- BUTTTONS -*/
button.back-mor.dm-bold.col-blanco{border-radius: 20px;}
button.back-mor.dm-bold.col-blanco:hover{background-color: #401b64;color: #fff;}

/*- INPUTS -*/
input.blin-reg.col-gris{border: none;border-bottom: solid 2px #c1c1c1;border-radius: 0;background-color: transparent;}
input.blin-reg.col-gris:focus{box-shadow: none;}
.mb-3 .input-group span.input-group-text{border: none;border-bottom: solid 2px #c1c1c1;border-radius: 0;background-color: transparent;color: #737373;}
.mb-3 .input-group-custom span.input-group-text{border: 1px solid #ced4da !important;border-bottom: 1px solid #ced4da !important;border-radius: 0.375rem 0 0 0.375rem !important;background-color: #e9ecef !important;color: #000 !important;}
.mb-3 .input-group-custom .form-control{border: 1px solid #ced4da !important;border-radius: 0 !important;background-color: #fff !important;color: #000 !important;}
.mb-3 .input-group-custom .btn{border: 1px solid #ced4da !important;border-radius: 0 0.375rem 0.375rem 0 !important;background-color: #fff !important;color: #6c757d !important;}
input[type="checkbox"].form-check-input{border-radius: 0;border: solid 2px #c1c1c1;}
input[type="checkbox"].form-check-input:checked{background-color: #57595c;}
input[type="checkbox"].form-check-input:focus{box-shadow: none;}

/*- A -*/
a.aStyle{text-decoration: none;}
a.aStyle:hover{color: initial;text-decoration: underline;}
a.back-mor.dm-bold.col-blanco{border-radius: 20px; padding: 6px 35px;}
a.back-mor.dm-bold.col-blanco:hover{background-color: #401b64;color: #fff;}

/*- SELECT -*/
.js-example-basic-single{width: 100%;}
/* Cambiar el fondo y color de letra del select */
.select2-container--default .select2-selection--single {background-color: #f0f0f0;color: #333;font-family: "Blinker", sans-serif; font-weight: 400;border-radius: 5px;border: 1px solid #ccc;}
/* Cambiar el estilo del dropdown */
.select2-container--default .select2-results__option {background-color: #f0f0f0;color: #333;font-family: "Blinker", sans-serif; font-weight: 400;}
/* Cambiar el estilo del dropdown cuando está seleccionado */
.select2-container--default .select2-results__option--highlighted.select2-results__option--selectable{background-color: #5c348c;color: #fff;}
.select2-search__field{font-family: "Blinker", sans-serif; font-weight: 400;color: #737373;}

/*- FILE -*/
input[type="file"].file_customize{display: none;}
label.file_customize{display: flex;align-items: center;margin: 25px 0 5px 0;}
label.file_customize span{display: flex;background-color: #dbdbda;width: 80px;height: 80px;justify-content: center;align-items: center;border-radius: 50%;font-size: 35px;}
label.file_customize p{margin: 0 0 0 3%;font-size: 20px;}
label.file_customize:hover{cursor: pointer}
div#file-name{margin: 25px 0 50px 0;}

/*- CARD -*/
.card-paola{background-color: #ffffff;padding: 5%;margin: 30px auto 15px auto;box-shadow: 0 0 5px rgba(0, 0, 0, 0.21);border-radius: 25px;display: flex;justify-content: center;align-items: center;height: 300px;}
.card-paola-content{background-color: #ffffff;padding: 40px 5% 5% 5%;margin: 30px auto 15px auto;box-shadow: 0 0 5px rgba(0, 0, 0, 0.21);border-radius: 25px;position: relative;}
.card-paola-content.content-btns{height: 130px;display: flex;}
.card-paola-content.content-btns.periodico-content{padding: 25px 5% 5% 5%;}
.card-paola-content.content-btns.periodico-content button{height: 80px;}
.card-paola-content.content-btns.estado-content{height: auto;display: block !important;padding: 20px 5%;}
.card-paola-content.content-btns .row{width: 100%;align-items: center;}
.card-paola-content.content-btns .col-12{display: flex;justify-content: center;align-items: center;}
.card-paola-content.content-btns a.btn{}
.card-paola-content button.btn-back{position: absolute;color: #fff;top: 0;right: 0;border-radius: 0 25px 0 5px;padding: 6px 2%;}
.card-paola-content button.btn-back:hover{color: #fff;}

/*- TABLE -*/
#titSimulador{position: relative;width: 10%;}
#titSimulador span{display: block;padding: 15px 2% 0 2%;writing-mode: vertical-rl;text-orientation: upright;text-align: center;font-size: 26px;font-weight: 600;}

/*- CHART -*/
.responsive-chart {width: 100%; max-width: 800px;height: auto; aspect-ratio: 16/9;}

/* PLACE HOLDER *
input::-webkit-input-placeholder, textarea::-webkit-input-placeholder { color: #000000; font-family: 'Roboto', sans-serif; font-weight: 600; }  /* WebKit *
input::-moz-placeholder, textarea::-moz-placeholder { color: #000000; font-family: 'Roboto', sans-serif; font-weight: 600; } /* Firefox 19+ */

/*- TEXT RIGHT TEXT JUSTIFY -*/
.t-justify{text-align: justify;}

body{background-color: #f8f8f8;}

body main{padding-bottom: 100px;padding-left: 15vw;}
body main.logoutContent{padding-left: 0;}

/*- Info Profile -*/
#infoProfile{}
#infoProfile .row .col-12{position: relative;}
/* Barra after eliminada - causaba sobreposición con el medallero */
/* #infoProfile .row .col-12:after{content: '';background-color: #c1c1c1;position: absolute;bottom: 10%;left: 5%;width: 90%;height: 3px;} */
#infoProfile .row .col-12 > .d-flex{margin-bottom: 20px;}
#infoProfile .row .col-12 > .d-flex figure{width: 20%;}
#infoProfile .row .col-12 > .d-flex figure div{width: 85px;height: 85px;background-repeat: no-repeat;background-position: center;background-size: cover;border-radius: 50%;}
#infoProfile .row .col-12 > .d-flex div:nth-child(2){line-height: 15px;padding: 10px 2% 0 2%;width: 70%;}
#infoProfile .row .col-12 > .d-flex div:nth-child(2) h3{margin-bottom: 0;}
#infoProfile .row .col-12 > .d-flex div:nth-child(2) aside{position: relative;top: -10px;}
#infoProfile .row .col-12 > .d-flex div:nth-child(2) aside i{}
#infoProfile .row .col-12 > .d-flex div:nth-child(2) aside p{position: relative;left: 5%;}
#infoProfile .row .col-12 > .d-flex div:nth-child(2) aside p span{}
#infoProfile .row .col-12 > .d-flex .dropdown{width: 10%;}
#infoProfile .row .col-12 > .d-flex .dropdown button{font-size: 25px;color: #737373;background-color: transparent;border: none;padding: 10px 0;}
#infoProfile .row .col-12 > .d-flex .dropdown button:hover{}
#infoProfile .row .col-12 > .d-flex .dropdown button:after{display: none;}
#infoProfile .row .col-12 > .d-flex .dropdown button i{}
#infoProfile .row .col-12 > .row .col-4 aside{background-color: #e8e8e8;text-align: center;padding: 15px 0 5px 0;border-radius: 20px;margin-bottom: 80px;}
#infoProfile .row .col-12 > .row .col-4 aside span{display: flex;background-color: #dbdbda;width: 80px;margin: auto;height: 80px;justify-content: center;align-items: center;border-radius: 50%;}
#infoProfile .row .col-12 > .row .col-4 aside span i{font-size: 34px;color: #737373;}
#infoProfile .row .col-12 > .row .col-4 aside h5{margin: 20px 0 7px 0;}
#infoProfile .row .col-12 > .row .col-4 aside p{}

#btnResultados{position: absolute;top: 0;right: 0%;}
#btnResultados:hover{color: #ffffff;}

#btnActualizar{position: absolute;top: 0;right: 1%;}
#btnActualizar:hover{color: #ffffff;}

/*- Menú -*/
#menuBladeDesktop{position: fixed;left: 0;width: 15vw;background-color: #e8e8e8;height: 100vh;}
#menuBladeDesktop .row .col-12.p-0 > ul{padding: 0;}
#menuBladeDesktop .row .col-12.p-0 > ul li{list-style: none;padding: 5px 4%;border-bottom: solid 1px #535353;}
#menuBladeDesktop .row .col-12.p-0 > ul li:hover{}
#menuBladeDesktop .row .col-12.p-0 > ul li a{text-decoration: none;font-size: 14px; color: #4f4e4e;}
#menuBladeDesktop .row .col-12.p-0 > ul li a:after{}
#menuBladeDesktop .row .col-12.p-0 > ul li:last-child a:after{}
#menuBladeDesktop .row .col-12.p-0 > ul li:not(:nth-child(2)):hover a{color: #5c348c;font-weight: bold;}
#menuBladeDesktop .row .col-12.p-0 > ul li.active a{color: #5c348c;font-weight: bold;}
#menuBladeDesktop .row .col-12.p-0 > ul li a i{}
#menuBladeDesktop .row .col-12 ul li aside p{margin: 0;position: relative;left: 5px;top: -4px;}
#menuBladeDesktop .row .col-12.p-0 ul li:nth-child(2) .dropdown{top: 10px;right: 6%;}
#menuBladeDesktop .row .col-12.p-0 ul li:nth-child(2) .dropdown button{font-size: 12px;padding: 2px 6px;}
#menuBladeDesktop .row .col-12.p-0 ul.dropdown-menu li:hover a{font-weight: normal;color: #4f4e4e;}


/* Media Querys */
@media(min-width: 1390px) {

}

@media(max-width:767px){
    body main{padding-left: 2%; padding-right: 2%;}

    #infoProfile .row .col-12 > .d-flex div h3{font-size: 25px;}
    #infoProfile .row .col-12 > .d-flex div aside p{font-size: 16px;}
    #infoProfile .row .col-12 > .d-flex figure div{width: 70px;height: 70px;margin-top: 8px;}

    /*- TABLES -*/
    #titSimulador{width: 15%;}
    #titSimulador span{font-size: 20px;}
    table .montoInversion{font-size: 20px;}

    /*- CARDS -*/
    .card-paola-content{padding: 25px 5% 5% 5%;}
    .card-paola-content.content-btns{height: auto;display: block;}
    .card-paola-content.content-btns .row{width: auto;}
    .card-paola-content.content-btns a.btn{margin-bottom: 20px;}
    .card-paola-content.content-btns > .row .col-12:last-child a.btn{margin-bottom: 0;}
    .card-paola-content.content-btns.periodico-content button{height: auto;}

    #btnResultados{position: relative;top: 0;right: 0;}
    #btnActualizar{right: 3%;top: 40px;}
    #h2TitleDiagnostico{margin-bottom: 20px;}

    /*- Header Responsive -*/
    .header-responsive{background-color: #fff;padding: 0 0 5px 0;box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);margin-top: -15px;margin-left: -15px;margin-right: -15px;}
    .logo-responsive{max-width: 110px;height: auto;}
    .btn-header{color: #737373;font-size: 20px;padding: 8px 12px;border: none;background: none;}
    .btn-header:hover{color: #5c348c;}
    .header-divider{margin: 5px 0;border-color: #464646;border-width: 1px;}
    .user-name-responsive{color: #000000;font-size: 16px;margin: 3px 0 0 0;font-family: "Blinker", sans-serif;font-weight: 600;}

    /*- Menú -*/
    #menuBlade{position: fixed;bottom: 0;width: 100%;background-color: #fff;box-shadow: 0 0 5px rgba(0, 0, 0, 0.25);z-index: 99;}
    #menuBlade .row .col-12 ul{padding: 0;margin: 0;}
    #menuBlade .row .col-12 ul li{list-style: none;width: 25%;}
    #menuBlade .row .col-12 ul li:hover{}
    #menuBlade .row .col-12 ul li a{display: block;text-align: center;color: #737373;font-size: 25px;padding: 10px 5%;position: relative;}
    #menuBlade .row .col-12 ul li a:after{content: '';position: absolute;right: 0;top: 8%;width: 2px;height: 84%;background-color: #d1cece;border-radius: 50%;}
    #menuBlade .row .col-12 ul li:last-child a:after{display: none;}
    #menuBlade .row .col-12 ul li:hover a{color: #5c348c;}
    #menuBlade .row .col-12 ul li.active a{color: #5c348c;}
    #menuBlade .row .col-12 ul li a i{}
}