:root{
  --main-bg-image: url("../../images/registro/back_negro.png");
  --primary-color-custom:#37a2dc;
  --primary-rgba-color-custom:#b3daeeab;
}
.bg-main{
  background: var(--primary-color-custom);
}
body {
  background-image:  url('../../images/registro/elements/back.png');
  /* background-image:  var(main-bg-image); */
  background-position: center center;
  background-repeat: no-repeat;
  background-attachment: fixed;
  background-size: cover;
  background-color: #F5F6FA;
  font-family: "Montserrat", sans-serif;
  overflow-x: hidden;
  font-weight: 300;
  margin: 0 auto !important;
}

/* css registro */
form label, p {
  font-weight: 500;
}
body::-webkit-scrollbar {
background-image: linear-gradient(to top, #224C7E, #224C7E, #224C7E, #224C7E, #224C7E);
}

body::-webkit-scrollbar-track {
 width: 10px;

}

body::-webkit-scrollbar-thumb {
background-image: linear-gradient(to top, #bc3b42, #bc3b42, #bc3b42, #bc3b42, #bc3b42);
border-radius: 5px;
}
.box-shadow-custom{
  box-shadow: -1px 6px 5px -1px rgba(0,0,0,0.23);
  -webkit-box-shadow: -1px 6px 5px -1px rgba(0,0,0,0.23);
  -moz-box-shadow: -1px 6px 5px -1px rgba(0,0,0,0.23);
}
.bg-main-custom{
  background: var(--primary-color-custom)!important;
}
.text-main-color-custom{
  color: var(--primary-color-custom)!important;
}
.fileinput-filename {
  font-weight: bold;
}
.btn-custom-primary{
  background: var(--primary-color-custom)!important;
  border-color: white;
  box-shadow: 0px 10px 22px -7px rgba(0,0,0,0.57);
-webkit-box-shadow: 0px 10px 22px -7px rgba(0,0,0,0.57);
-moz-box-shadow: 0px 10px 22px -7px rgba(0,0,0,0.57);
}

.login-register{
  position: relative !important;
  /* padding-top: 15%; /*fixed*/
  /* padding-top: 15%; */
  /* padding-bottom: 0%; */
}

.login-box{
  width: 60% !important;
  border: 0px solid red;
  /* margin-bottom: 0px; */
  /* padding: 15px; */
}

.flags-container{
  position: absolute;
  top: 10px;
  right: 20px;
  z-index: 2;
}
.flags-container a img{
  /* border-radius: 0 0 15% 15%; */
  border-radius: 15%;
}


.topbar{
  /* background: #010A2C; */
  background-image:  url('../../images/registro/elements/header_registro.png?v=5');
  background-repeat: no-repeat;
  background-position: center center;
  background-size: cover;
  width: 100%;
  height:200px;

}
#topbarFreework{
  /* background: #010A2C; */
  background-image:  url('../../images/registro/elements/freework/back.png?v=2') !important;
height:auto!important;

}
@media only screen and (max-width: 600px) {
 .topbar {
    background-image: url('../../images/registro/elements/header_registro_mobile.png?v=2');
    background-size: cover !important;
    background-position: center center!important;
    height: 288px !important;
    /* margin-top: 9px; */
}
}


.navbar-mobile{
  display: none;
}

.btn-primary{
  background-color: #17428a;
  border-color: #17428a;
  color: #FFFFFF;
}

.btn-primary:hover{
  background-color: #00BBD4;
  border-color: #00BBD4;
}

.btn-green{
  /* background-color: #27ae60 !important; */
  background-color: #2ecc71 !important;
  border: #2ecc71 !important;
  color: #FFF;
  text-shadow: none;
  -webkit-transition: background .2s;
  transition: background .2s;
  padding-right: 30px !important;
}

.format-text{
  font-weight: bold !important;
  text-transform: uppercase;
}

.select2-dropdown{
  width: max-content !important;
  max-width: 350px;
}
.footer-main{
  padding-top: 36px;
  padding-bottom: 35px;
}

select#officePhoneDialCode + span.select2,
select#cellPhoneDialCode + span.select2{
  width: max-content !important;
  max-width: 100px !important;
}

.logo-imin-blue-mobile{display: none;}

.rold-kidney{
      position: fixed;
      top: 69px;
      right: -98px;
      width: 360px;
      z-index: -1;

}
.rold-kidney-izq{
    position: fixed;
      top: 157px;
      left: -119px;
      width: 305px;
      z-index: -1;
  }

}

@media only screen and (max-width: 320px) {
  .login-box{ width: 90% !important;}
  .login-register{ /*padding-top: 30%;*/ padding-top: 15%;}

  .logo-imin-blue-mobile{display: block;}
  .logo-imin-blue-desktop{display: none!important;}
  .rold-kidney{width: 200px;}
}

@media only screen and (min-width: 321px) and (max-width: 767px) {
  body {
    background-image: var(main-bg-image);
    background-size: cover;
    background-position: left;
  }

  .login-register{ /*padding-top: 25%;*/   padding-top: 15%; }
  .login-box{ width: 90% !important;}

  .logo-imin-blue-mobile{display: block;}
  .logo-imin-blue-desktop{display: none !important;}
  .rold-kidney{width: 240px;}
}

@media only screen and (min-width: 768px) and (max-width: 991px) {
  .login-register{ /*padding-top: 25%;*/  padding-top: 5%;}
  .login-box{ width: 75% !important;}
  .rold-kidney{width: 480px;}
}

@media only screen and (min-width: 768px) and (max-width: 991px) and (orientation: landscape) {
  .rold-kidney{width: 280px;}
}

@media only screen and (min-width: 992px) and (max-width: 1200px) {
  .login-register{ /*padding-top: 20%;*/ padding-top: 10%;}
  .rold-kidney{width: 320px;}
}

/* ::-webkit-scrollbar { display: none; }
::-moz-scrollbar { display: none; } */

/* end css registro */


#blur {
  top:0;
  width:100%;
  height:100vh;
  z-index:10;
  text-align: center;
  position: fixed;
}
#blur .blur-container{
  padding-top: 20%;
}
#blur .blur-container h1{
  color: blue;
}
#blur .blur-container h2{
  color: red;
}
@supports (-webkit-backdrop-filter: none) or (backdrop-filter: none) {
  #blur {
    -webkit-backdrop-filter: blur(10px);
    backdrop-filter: blur(10px);
    background-color: rgba(255, 255, 255, 0.5);
  }


}

/* sweet alerts custom */
.swal2-container.swal2-center {
align-items: center;
background: var(--primary-rgba-color-custom)!important;
}
.swal2-styled.swal2-confirm {
  background: var(--primary-color-custom)!important;
}


.swal2-container:not(.swal2-top):not(.swal2-top-start):not(.swal2-top-end):not(.swal2-top-left):not(.swal2-top-right):not(.swal2-center-start):not(.swal2-center-end):not(.swal2-center-left):not(.swal2-center-right):not(.swal2-bottom):not(.swal2-bottom-start):not(.swal2-bottom-end):not(.swal2-bottom-left):not(.swal2-bottom-right):not(.swal2-grow-fullscreen)>.swal2-modal {
    margin: auto;
    border-radius: 3.5% !important;
}



.topbar_pathart{
  background-image:  url('../../images/registro/elements/header_pathart.png'); */
  background-repeat: no-repeat;
  background-position: center center;
  background-size: cover;
  width: 100%;
}
.topbar_freework{
  /* background: #010A2C; */
  background-image:  url('../../images/registro/elements/header_freework.png'); */
  background-repeat: no-repeat;
  background-position: center center;
  background-size: cover;
  width: 100%;


}
header{
  height: 250px;
}

@keyframes pulse {
  0% { color: inherit; }
  50% { color: red; }
  100% { color: inherit; }
}

.pulsating-text {
  animation: pulse 1s infinite;
}
.container-cost-total {
    /* background: red; */
    padding: 10px;
    border-radius: 5px;
    padding-top: 10px;
    box-shadow: 1px 5px 5px 0px rgb(0 157 222);
    -webkit-box-shadow: 1px 5px 5px 0px rgb(0 157 222);
    -moz-box-shadow: 1px 5px 5px 0px rgb(0 157 222);
    display: flex;
    justify-content: center;
    text-align: center;
    align-items: center;
    font-size: 1.2rem;
    flex-flow: column;
}

/* STYLES CARD CLASIFICACION */
.text-danger{
  color:red;

}

.cat-description-text{
  font-weight: bold;
  color:#707070;
}
.cat-description-cost {
    font-weight: bold;
    color: rgb(51 151 68 / 84%);
}
.cost-size{
  font-size: 1.25rem;
}
.custom-control-description{
  color: black;
  text-align: center;
}

,
.styled-radio-button input[type="checkbox"] {
    /* Ocultar el botón de check */
    appearance: none;
    -webkit-appearance: none;
    -moz-appearance: none;
    position: absolute;
    opacity: 0;
    height: 0;
    width: 0;
}

/* Estilos del botón personalizado */
.styled-radio-button,
.styled-checkbox-button
 {
    text-align: center;

    display: inline-block;
    padding: 10px 20px;
    /* border: .1px solid black; */
    box-shadow: 5px 1px 7px -2px rgba(0,0,0,0.31);
  -webkit-box-shadow: 5px 1px 7px -2px rgba(0,0,0,0.31);
  -moz-box-shadow: 5px 1px 7px -2px rgba(0,0,0,0.31);

    box-shadow:1px ;
    border-radius: 5px;
    cursor: pointer;
    background-color: white; /* Color de fondo del botón */
    color: #fff; /* Color del texto */

}

/* Estilos del checkmark para simular el check */
.styled-radio-button .custom-control-description::before ,
.styled-checkbox-button .custom-control-description::before {
    content: '';
    display: inline-block;
    vertical-align: middle;
    width: 20px;
    height: 20px;
    margin-right: 5px;
    border: 1px solid white; /* Color del borde del check */
    border-radius: 50%;
    background-color: transparent; /* Fondo transparente para ocultar el puntito */
    display: none;

}

/* Estilos del checkmark para simular el check cuando está seleccionado */
.styled-radio-button input[type="radio"]:checked + .custom-control-description::before,
.styled-radio-button input[type="checkbox"]:checked + .custom-control-description::before {
    /* Cambiar el color de fondo del check cuando el radio button está seleccionado */
    background:#00B7B1;
    color:#00B7B1;
    display: none;

}
/* .styled-radio-button.checked {
  color:white;
  backdrop-filter: blur(10px);

  border:.2rem solid #00B7B1;

  box-shadow: 0px 5px 9px -4px rgba(0,0,0,0.75);
  -webkit-box-shadow: 0px 5px 9px -4px rgba(0,0,0,0.75);
  -moz-box-shadow: 0px 5px 9px -4px rgba(0,0,0,0.75);
}
.styled-radio-button.checked {
  backdrop-filter: blur(10px);
  box-shadow: 0px 5px 9px -4px rgba(0,0,0,0.75);
  -webkit-box-shadow: 0px 5px 9px -4px rgba(0,0,0,0.75);
  -moz-box-shadow: 0px 5px 9px -4px rgba(0,0,0,0.75);
  background: #00b7b11a;
} */


.styled-radio-button.checked,
.styled-checkbox-button.checked
 {
    backdrop-filter: blur(10px);
    box-shadow: 0px 5px 9px -4px rgba(0,0,0,0.75);
    -webkit-box-shadow: 0px 5px 9px -4px rgba(0,0,0,0.75);
    -moz-box-shadow: 0px 5px 9px -4px rgba(0,0,0,0.75);
    background: #00b7b11a;
    border: 2px solid #707070;
}
  /* check fin #707070*/

  .circle-step {
      background: #00B7B1!important;
      padding: .55rem 1.1rem;
      border-radius: 55%;
      color: white;
      font-weight: bold;
  }
  .step-info{
    padding: 0.55rem 0;
    margin-left: 0.4rem;
  }

  .text-main-color{
    color:#00B7B1!important;
  }
  .text-second-color
  {
    color:#1D3464!important;
  }


  .card-section-info{
    border-bottom:none;
    background:#E3E6EC;
  }
  .d-flex-justify-center-custom{
    display: flex;
    justify-content:center;
  }
  .non-editable-checkbox {
  pointer-events: none;
  }
  .card-no-border .card {
    /* border: 0px; */
    border-radius: 0px;
    -webkit-box-shadow: none;
    box-shadow: none;
    border-radius: 4px;
}
.text-relevant{
font-weight: bold;
color:#1D3464;
}
  .bg-info-custom{
    background: #00B8AE;

  }
  .card-custom{
    border: 1px solid rgba(0,0,0,.125);
  }

  .d-flex-wrap{
  display: -ms-flexbox!important;
  display: flex;
  flex-flow: wrap;
  justify-content: center;
  }

/* STYLES  CARDS */


/* SWEET ALERT INICIO */

.swal-custom-title {
font-size: 20px;
font-weight: bold;
color: #007BFF;
margin-bottom: 10px;
}

.swal-custom-html {
font-size: 16px;
line-height: 25px;
color: #333;
}

.swal-custom-close-button {
color: #aaa;
}

.swal-custom-footer {
margin-top: 20px;
font-size: 14px;
text-align: right;
}
/* SWEET ALERT FIN  */

/* Consulta de medios para pantallas más pequeñas */
@media (max-width: 1150px) {
  header {
    height: 180px;
  }
}
@media (max-width: 768px) {
  header {
    height: 150px;
  }
}

/* Consulta de medios para pantallas aún más pequeñas */
@media (max-width: 576px) {
  header {
    height: 90px;
  }
}



@media only screen and (max-width: 360px) {
  .login-box {
     width: 95% !important;

  }
}

.text-success {
    color: rgb(51 151 68 / 84%)!important;;
}
