/* ==========================================================================

  Clases CUSTOMIZABLES para cada cliente

========================================================================== */

/*Para cambiar tipografia importar desde google*/

@import url(https://fonts.googleapis.com/css?family=Raleway:400,100,200,300,500,600,700,800,900);

/*Los colores del cliente se cambian acá en las variables que se reflejan en las clases correspondientes*/

:root {
  /*boton PAC BCI*/

  --btnBCI: #37474f;

  /*boton Reserva en línea*/

  --btnReserva: #37474f;

  /*opcion por defecto con los colores de PlanOK*/

  /*--containerBackgroundColor: #26323A;

	--TxtBigTitleColor: #fff;

	--TxtSmallTitleColor: #fff;

	--mainBtnBackgroundColor: #E91D2C;

	--mainBtnBorderColor: #E91D2C;

	--mainBtnTxtColor: #fff;

	--secondaryBtnBackgroundColor: #fff;

	--secondaryBtnBorderColor: #333;

	--secondaryBtnTxtColor: #333;*/

  /*opcion por defecto con los colores neutros*/

  --containerBackgroundColor: #fff;

  --TxtBigTitleColor: #000;

  --TxtSmallTitleColor: #000;

  --mainBtnBackgroundColor: #000;

  --mainBtnBorderColor: #000;

  --mainBtnTxtColor: #fff;

  --secondaryBtnBackgroundColor: #fff;

  --secondaryBtnBorderColor: #000;

  --secondaryBtnTxtColor: #000;

  --black: #000;

  --darkgray: #555;

  --gray: #777;

  --lightgray: #ececec;

  --white: #fff;
}

/*Tipografia - ver nombre de la famiglia en google*/

.container {
  font-family: 'raleway', sans-serif;

  font-weight: 400;

  border-radius: 20px;

  padding-left: 3rem !important;

  padding-right: 3rem !important;

  padding-bottom: 3rem !important;
}

@media screen and (min-width: 1300px) {
  .container {
    max-width: 1220px !important;
  }
}

/*boton cancelar ubicado en la primera pantalla*/

#btn-cancelar {
  /*se mostra el boton finalizar*/

  display: block;

  /*cuando se quiere ocultar el boton cancelar habilitar este campo*/

  /*display: none;*/
}

/*boton cancelar ubicado en la pantalla de la ficha*/

#btn-finalizar {
  /*se mostra el boton finalizar*/

  display: block;

  /*cuando se quiere ocultar el boton finalizar habilitar estes campos*/

  /*display: none;

	width: 0 !important;*/
}

/*Imagen de fondo - ubicar las imagenes nuevas en la carpeta img*/

.body-background {
  /*fondo claro*/

  /*background-image: url(img/fondo_gris_planOK-final.svg);*/

  /*fondo oscuro*/

  background-color: #f5f5f5;

  background-image: none;

  background-repeat: no-repeat;

  width: 100%;

  min-height: 100vh;

  display: flex;

  justify-content: center;

  align-items: center;

  background-attachment: fixed;

  background-size: cover;

  background-position: center;

  -webkit-background-size: cover;

  -moz-background-size: cover;

  -o-background-size: cover;
}

/*Logo que aparece en el footer de todas las pantallas*/

.logo-footer {
  /*logo oscuro*/

  background-image: url(img/footer_planok.svg);

  /*logo claro*/

  /*background-image: url(img/footer_planok_white.svg);*/

  background-repeat: no-repeat;

  width: 20rem;

  margin-top: 3rem;

  padding-top: 3rem !important;

  /*oculta logo del footer*/

  /*display: none;*/
}

/*slider del carousel*/

.cycle-pager span.cycle-pager-active {
  color: var(--mainBtnBackgroundColor);
}

/*logo 1 - proyecto/inmobiliaria*/

.logo_izquierda img {
  border-radius: 1rem;

  box-shadow: 0px 4px 4px rgba(0, 0, 0, 0.25);

  display: block;

  float: left;

  width: 70%;

  height: 70%;

  border-radius: 1rem;

  box-shadow: none;
}

/*logo 1 - proyecto/inmobiliaria*/

.logo_derecha img {
  border-radius: 1rem;

  box-shadow: 0px 4px 4px rgba(0, 0, 0, 0.25);

  display: block;

  float: right;

  width: 70%;

  height: 70%;

  border-radius: 1rem;

  box-shadow: none;
}

/*marco del cotizador pantallas 1 y 2 (unidad y datos del cliente)*/

.container-cotizador {
  border-radius: 20px;

  /*min-height: 90vh !important;*/

  background: var(--containerBackgroundColor);

  padding-left: 3rem !important;

  padding-right: 3rem !important;

  padding-bottom: 3rem !important;

  -webkit-box-shadow: -1px -1px 15px -1px rgba(102, 102, 102, 1);

  -moz-box-shadow: -1px -1px 15px -1px rgba(102, 102, 102, 1);

  box-shadow: 0px 4px 15px rgba(0, 0, 0, 0.25);
}

/*contenedores (marco) de la pantalla de la ficha*/

.container-ficha {
  border-radius: 20px 20px 20px 20px !important;

  background: var(--containerBackgroundColor) !important;

  padding-left: 3rem !important;

  padding-right: 3rem !important;

  -webkit-box-shadow: -1px -1px 15px -1px rgba(102, 102, 102, 1);

  -moz-box-shadow: -1px -1px 15px -1px rgba(102, 102, 102, 1);

  box-shadow: 0px 4px 15px rgba(0, 0, 0, 0.25);

  /*opacity: 0.8;  */
}

.container-botones-ficha {
  border-radius: 0 0 10px 10px !important;

  background-color: var(--contentBackgroundColor);

  -webkit-box-shadow: 4px 4px 7px -1px rgba(0, 0, 0, 0.31);

  -moz-box-shadow: 4px 4px 7px -1px rgba(0, 0, 0, 0.31);

  box-shadow: 4px 4px 7px -1px rgba(0, 0, 0, 0.31);
}

/*Contenedor de las informaciones de cada pantalla*/

.container-content {
  border-radius: 10px 10px 10px 10px;

  -webkit-box-shadow: -1px -1px 15px -1px rgba(102, 102, 102, 1);

  -moz-box-shadow: -1px -1px 15px -1px rgba(102, 102, 102, 1);

  min-width: 900px;

  /*	No se cambia el color de este contenedor */

  background-color: var(--contentBackgroundColor);

  padding: 2rem 2rem 2rem 2rem !important;
}

/*apertura contenedor pantallas unidad y datos con scroll*/

.content-size {
  max-height: 53vh;

  overflow-y: scroll;

  overflow-x: hidden;
}

.contenedor-descripcion {
  border-radius: 10px;

  background-color: var(--lightgray);

  padding: 1rem 1rem 3rem 1rem;
}

/*apertura contenedor ficha con scroll*/

.cotizacion-view {
  max-height: 50vh;

  overflow-y: scroll;
}

/*titulo del proyecto en el contenedor*/

#titulo_proyecto {
  padding-top: 1.5rem;

  padding-bottom: 2rem;

  text-transform: uppercase;

  color: var(--TxtBigTitleColor);

  line-height: 35px;
}

/*subtitulo del proyecto en el contenedor*/

.titulo_proyecto-sub {
  font-size: 20px;

  font-weight: 400;

  padding-top: 1.5rem;

  padding-bottom: 2rem;

  text-transform: uppercase;

  color: var(--TxtSmallTitleColor);
}

/*boton principal*/

.btn-inmobiliaria {
  cursor: pointer;

  font-weight: 600;

  font-size: 18px;

  width: 100%;

  height: 60px;

  background-color: var(--mainBtnBackgroundColor);

  border: 1px solid var(--mainBtnBorderColor);

  color: var(--mainBtnTxtColor);

  margin-bottom: 10px;

  border-radius: 1rem;
}

.btn-inmobiliaria:hover {
  color: var(--mainBtnTxtColor);

  box-shadow: 0px 4px 4px rgba(0, 0, 0, 0.25);
}

/*boton secundario*/

.btn-inmobiliaria-secondary {
  cursor: pointer;

  font-weight: 600;

  font-size: 18px;

  width: 100% !important;

  height: 60px;

  background-color: var(--secondaryBtnBackgroundColor);

  border: 1px solid var(--secondaryBtnBorderColor);

  color: var(--secondaryBtnTxtColor);

  border-radius: 1rem;

  margin-bottom: 10px;
}

.btn-inmobiliaria-secondary:hover {
  color: var(--secondaryBtnTxtColor);

  box-shadow: 0px 4px 4px rgba(0, 0, 0, 0.25);
}

/*checkbox datos checked*/

.checkbox.checbox-switch.switch-dark label > input:checked + span,
.checkbox-inline.checbox-switch.switch-dark > input:checked + span {
  box-shadow: var(--mainBtnBackgroundColor) 0px 0px 0px 8px inset;

  background-color: rgb(52, 58, 64);

  border-color: rgb(52, 58, 64);

  transition: border 0.4s ease 0s, box-shadow 0.4s ease 0s,
    background-color 1.2s ease 0s;
}

/*boton reserva en linea*/

.btn-reserva {
  cursor: pointer;

  font-weight: 600;

  font-size: 14px;

  max-width: 350px;

  width: 100% !important;

  height: 50px;

  background-color: var(--btnReserva);

  border: 1px solid var(--btnReserva);

  color: var(--mainBtnTxtColor);

  margin-bottom: 10px;

  border-radius: 1rem;
}

.btn-reserva:hover {
  color: var(--mainBtnTxtColor);

  box-shadow: 0px 4px 4px rgba(0, 0, 0, 0.25);
}

/*boton PAC BCI*/

#bci {
  cursor: pointer;

  font-weight: 600;

  font-size: 14px;

  max-width: 350px;

  width: 100% !important;

  height: 50px;

  background-color: var(--secondaryBtnBackgroundColor);

  border: 1px solid var(--btnBCI);

  color: var(--btnBCI);

  border-radius: 8px;

  margin-bottom: 10px;
}

#bci:hover {
  color: var(--btnBCI);

  box-shadow: 0px 4px 4px rgba(0, 0, 0, 0.25);
}

/* botones redondos edit y imprimir */

.botonera-edit-pdf {
  display: flex;

  justify-content: center;

  margin-bottom: 2rem !important;

  margin-top: 2rem !important;
}

.btn-rounded {
  cursor: pointer;

  font-weight: 600;

  font-size: 18px;

  width: 40px;

  height: 40px;

  background-color: #fff !important;

  border: 1px solid #fff !important;

  color: var(--mainBtnTxtColor);

  margin-bottom: 10px;

  border-radius: 100%;

  margin-left: 2rem;

  margin-right: 2rem;

  transition: 0.5s;

  box-shadow: 0px 4px 4px rgba(0, 0, 0, 0.25);
}

.btn-rounded:hover {
  transform: scale(1.1);

  box-shadow: 0px 4px 4px rgba(0, 0, 0, 0.25);
}

/* ==========================================================================

   Print 

========================================================================== */

@media print {
  #titulo_proyecto {
    font-size: 14pt;

    font-weight: bold;
  }

  #botonera_btn,
  #botonera-reserva-pac {
    display: none;
  }

  .panel-body {
    padding: 0;
  }

  .estilo_nota_exple p {
    font-size: 8px;

    text-transform: inherit;
  }

  #mensaje-cotiza {
    display: none;
  }

  .alert {
    margin-bottom: 0;
  }

  #texto_splash_id {
    margin-bottom: 5px;
  }

  .subtitle-line {
    padding-top: 0.5rem;

    border-bottom: 1.5px solid var(--lightgray);

    width: 100%;
  }

  .underline-pdf {
    padding-top: 0.5rem;

    border-bottom: 1px solid var(--lightgray);

    width: 100%;
  }

  .footer-ficha img {
    height: 50% !important;

    width: 50% !important;
  }

  .data-infos {
    color: black !important;

    font-size: 14px;

    font-weight: 400;

    padding: 8px;
  }

  .cotizacion-view {
    max-height: 500vh;

    overflow-y: hidden;
  }

  .container-ficha {
    -webkit-box-shadow: none;

    -moz-box-shadow: none;

    box-shadow: none;
  }

  .container-content {
    border-radius: 10px !important;

    padding: 3rem 3rem 3rem 3rem !important;

    box-shadow: none !important;
  }

  .container-footer-ficha {
    -webkit-box-shadow: none !important;

    -moz-box-shadow: none !important;

    box-shadow: none !important;
  }
}

/* ==========================================================================

  Clases DEFAULT 

========================================================================== */

/*los colores del clente se cambian acá en las variables*/

:root {
  --contentBackgroundColor: #fff;

  --contentBigTextColor: #212529;

  --contentSmallTextColor: #212529;

  --contentLabelColor: #212529;

  --contentInputsColor: #212529;

  --contentDescriptionColor: #ececec;

  --contentDescriptionTextColor: #212529;

  --black: #333;

  --darkgray: #555;

  --gray: #777;

  --lightgray: #ececec;

  --white: #fff;
}

html {
  height: 100vh;
}

h1,
h2,
h3,
h4,
h5,
h6,
p {
  margin: 0;

  padding: 0;
}

body {
  margin: 0;

  padding: 0;
}

::placeholder {
  color: var(--contentInputsColor);
}

a {
  color: var(--contentBigTextColor);

  text-decoration: none;
}

label {
  text-align: start;

  color: var(--contentLabelColor);

  font-size: 14px;

  font-weight: 600;
}

/*contenedor(marco) de la aŕea administrativa del cotizador*/

.container-config {
  border-radius: 20px !important;

  max-width: 600px !important;

  min-height: 50vh !important;

  background: var(--containerBackgroundColor) !important;

  padding-top: 3rem !important;

  padding-left: 3rem !important;

  padding-right: 3rem !important;

  padding-bottom: 3rem !important;

  -webkit-box-shadow: -1px -1px 15px -1px rgba(102, 102, 102, 1);

  -moz-box-shadow: -1px -1px 15px -1px rgba(102, 102, 102, 1);

  box-shadow: 0px 4px 15px rgba(0, 0, 0, 0.25);

  opacity: 0.9;
}

.titulo_config {
  font-weight: 800 !important;

  font-size: 25px;

  margin-top: 3rem;

  margin-bottom: 2rem;

  text-transform: uppercase;

  color: var(--TxtBigTitleColor);

  padding-left: 1rem;
}

.mensaje-top-config {
  font-size: 16px;

  font-weight: 600 !important;

  padding: 1.5rem 0rem 2rem 0rem;

  line-height: 26px;

  color: var(--TxtSmallTitleColor);
}

/* container de las infos de proyecto y imagen, datos */

.container-content-config {
  background-color: var(--contentBackgroundColor);

  border-radius: 10px 10px 10px 10px;

  padding: 2rem 2rem 2rem 2rem !important;

  -webkit-box-shadow: -1px -1px 15px -1px rgba(102, 102, 102, 1);

  -moz-box-shadow: -1px -1px 15px -1px rgba(102, 102, 102, 1);
}

.nopadding {
  padding: 0 !important;

  margin: 0 !important;
}

.padding-top-bottom {
  padding-top: 1rem !important;

  padding-bottom: 1rem !important;
}

.scrollbar::-webkit-scrollbar {
  background-color: #fff;

  width: 16px;
}

/* background of the scrollbar except button or resizer */

.scrollbar::-webkit-scrollbar-track {
  background-color: #fff;
}

.scrollbar::-webkit-scrollbar-track:hover {
  background-color: #f4f4f4;
}

/* scrollbar itself */

.scrollbar::-webkit-scrollbar-thumb {
  background-color: #babac0;

  border-radius: 16px;

  border: 5px solid #fff;
}

.scrollbar::-webkit-scrollbar-thumb:hover {
  background-color: #a0a0a5;

  border: 4px solid #f4f4f4;
}

/* set button(top and bottom of the scrollbar) */

.scrollbar::-webkit-scrollbar-button {
  display: none;
}

/* select de la unidad a cotizar*/

.filter-select-principal {
  cursor: pointer;

  width: 100%;

  font-size: 14px;

  font-weight: 600;

  border-top: none !important;

  border-left: none !important;

  border-right: none !important;

  border-bottom: 1px solid var(--contentInputsColor) !important;

  color: var(--contentBigTextColor) !important;

  padding: 0px 5px 5px 0px;

  position: relative;

  background-color: transparent !important;

  -webkit-box-shadow: none !important;

  box-shadow: none !important;

  -webkit-appearance: none !important;

  -moz-appearance: none !important;

  background: transparent;

  background-image: url("data:image/svg+xml;utf8,<svg fill='black' height='24' viewBox='0 0 24 24' width='24' xmlns='http://www.w3.org/2000/svg'><path d='M7 10l5 5 5-5z'/><path d='M0 0h24v24H0z' fill='none'/></svg>");

  background-repeat: no-repeat;

  background-position-x: 100%;

  background-position-y: 5px;
}

/* select de los filtros tipo de unidad, orientación y otros campos de datos*/

.filter-select {
  cursor: pointer;

  width: 100%;

  height: 3rem;

  font-size: 14px !important;

  font-weight: 600 !important;

  border-top: none !important;

  border-left: none !important;

  border-right: none !important;

  border-bottom: 1px solid var(--contentInputsColor) !important;

  padding: 0px 5px 5px 0px;

  position: relative;

  background-color: transparent !important;

  -webkit-box-shadow: none !important;

  box-shadow: none !important;

  -webkit-appearance: none !important;

  -moz-appearance: none !important;

  background: transparent;

  background-image: url("data:image/svg+xml;utf8,<svg fill='black' height='24' viewBox='0 0 24 24' width='24' xmlns='http://www.w3.org/2000/svg'><path d='M7 10l5 5 5-5z'/><path d='M0 0h24v24H0z' fill='none'/></svg>");

  background-repeat: no-repeat;

  background-position-x: 100%;

  background-position-y: 5px;
}

/* select de los filtros tipo de unidad y orientación */

.filter-select-none {
  width: 100%;

  height: 3rem;

  font-size: 14px !important;

  font-weight: 600 !important;

  border-top: none !important;

  border-left: none !important;

  border-right: none !important;

  border-bottom: 1px solid var(--contentInputsColor) !important;

  color: var(--contentInputsColor);

  padding: 0px 5px 5px 10px;

  position: relative;

  background-color: transparent !important;

  -webkit-box-shadow: none !important;

  box-shadow: none !important;

  -webkit-appearance: none !important;

  -moz-appearance: none !important;

  background: transparent;

  background-repeat: no-repeat;

  background-position-x: 100%;

  background-position-y: 5px;
}

input .form-control .onlynum .nro_integrantes .campo-integrantes {
  border: none !important;

  box-shadow: none !important;

  -webkit-appearance: none !important;
}

/*instrucciones de cada pantalla del cotizador*/

.subtitle {
  font-size: 18px;

  font-weight: 600;

  color: var(--contentBigTextColor);

  padding-top: 2rem;

  padding-bottom: 1rem;
}

.subtitle-card {
  font-size: 18px;

  font-weight: 600;

  color: var(--contentBigTextColor);

  padding-top: 2rem;

  padding-bottom: 1rem;

  border-bottom: none !important;
}

.subtitle-ficha {
  font-size: 22px;

  font-weight: 600 !important;

  color: var(--contentBigTextColor);

  padding-top: 2rem;

  padding-bottom: 1rem;
}

/* mensaje cabeza importante*/

.mensaje-top {
  font-size: 18px;

  font-weight: 600 !important;

  color: var(--contentBigTextColor) !important;

  padding: 1.5rem 0rem 2rem 0rem;

  /* text-align: left; */

  line-height: 26px;
}

.mensaje-top-sub {
  font-size: 16px;

  font-weight: 600 !important;

  color: var(--contentBigTextColor) !important;

  padding: 0rem 1rem 2rem 1rem;

  text-align: left;

  line-height: 26px;
}

.botonera-pac-reserva {
  display: flex;

  justify-content: center;
}

.container-btn-pac-reserva {
  display: flex;

  justify-content: center;
}

.page-header {
  border-bottom: none !important;

  padding: 1rem 1rem 1rem 1rem;
}

#botonera_btn .btn {
  /*ancho de botones zona inferior*/

  width: 100%;
}

/*textos informativo de la ficha resultado de la cotización*/

.datos {
  font-size: 14px;

  font-weight: 800;

  line-height: 20px;
}

/*textos informativo de la ficha resultado de la cotización - infos del cliente*/

.data-infos {
  color: black;

  font-size: 14px;

  font-weight: 400;

  padding: 8px;
}

.footer-ficha img {
  height: 100% !important;

  width: 100% !important;

  align-content: center !important;
}

.center-block {
  display: block;

  margin-right: auto;

  margin-left: auto;

  max-width: 1160px !important;
}

.icons-image {
  padding-top: 0.2rem;

  margin-right: 0.5rem;

  padding-bottom: 0.5rem;

  justify-content: center;

  align-content: center;
}

.icons-btn {
  justify-content: center;

  align-content: center;
}

.subtitle-line {
  padding-top: 0.5rem;

  border-bottom: 1px solid var(--lightgray);

  width: 100%;
}

.alert-back {
  padding: 15px;

  border-radius: 10px;
}

.alert-mail {
  font-size: 12px;

  color: #3c763d;

  background-color: #dff0d8;
}

.alert-note {
  font-size: 14px;

  color: #31708f;

  background-color: #d9edf7;
}

.toast-message {
  font-family: arial;
}

#toast-container > div {
  position: relative;

  pointer-events: auto;

  overflow: hidden;

  margin: 0 0 6px;

  padding: 15px 15px 15px 50px;

  width: 300px;

  -moz-border-radius: 3px;

  -webkit-border-radius: 3px;

  border-radius: 10px;

  background-position: 15px center;

  background-repeat: no-repeat;

  -moz-box-shadow: 0 0 12px #999;

  -webkit-box-shadow: 0 0 12px #999;

  box-shadow: 0 0 12px #999;

  color: #fff;

  opacity: 100;

  -ms-filter: progid:DXImageTransform.Microsoft.Alpha(Opacity=80);

  filter: alpha(opacity=80) !important;
}

#toast-container * {
  -moz-box-sizing: border-box;

  -webkit-box-sizing: border-box;

  box-sizing: border-box;
}

.toast-warning {
  background-color: #26323a;

  color: orange !important;
}

.toast-info {
  background-color: #26323a;

  color: #06bee1 !important;
}

.toast-error {
  background-color: #26323a;

  color: #ff2839 !important;
}

.toast-success {
  background-color: #26323a;

  color: #affc41 !important;
}

.container-logo {
  padding-left: 0 !important;

  padding-bottom: 1rem !important;

  margin-top: 2rem !important;
}

.print-pdf {
  display: none;
}

.footer-img {
  max-height: 12vh;
}

.mail-message {
  color: #333 !important;

  font-size: 16px !important;

  font-weight: 400 !important;

  line-height: 35px !important;

  letter-spacing: normal !important;
}

textarea:focus,
input[type='text']:focus,
input[type='password']:focus,
input[type='datetime']:focus,
input[type='datetime-local']:focus,
input[type='date']:focus,
input[type='month']:focus,
input[type='time']:focus,
input[type='week']:focus,
input[type='number']:focus,
input[type='email']:focus,
input[type='url']:focus,
input[type='search']:focus,
input[type='tel']:focus,
input[type='color']:focus {
  border-color: rgba(82, 168, 236, 0.8) !important;

  box-shadow: 0px 0px 8px rgba(82, 168, 236, 0.6) !important;

  outline: 0px none;
}

.invalid {
  margin-top: 10px;

  margin-left: 10px;

  float: left;

  color: #c83a2a;

  font-size: 16px;
}

.valid {
  /*	margin-top:10px;

	margin-left: 10px;

	float: left;*/

  margin-top: inherit;
  margin-left: inherit;
  float: unset;

  color: #3d9400;

  font-size: 16px;
}

.cycle-pager span {
  font-size: 35px;

  width: 16px;

  height: 16px;

  display: inline-block;

  color: #ddd;
}

.fancybox-close {
  position: absolute;

  top: 3rem !important;

  right: 4rem !important;

  width: 40px;

  height: 40px;

  cursor: pointer;

  z-index: 8040;
}

.contenedor-fotos {
  cursor: zoom-in;

  border-radius: 10px;

  background-color: var(--white) !important;

  margin-bottom: 15px;

  box-shadow: 0px 6px 6px rgba(0, 0, 0, 0.25) !important;

  min-height: 300px !important;

  position: relative;

  max-width: 100%;

  height: auto;
}

/* txt select */

select.form-control {
  font-family: 'Open Sans', sans-serif !important;

  color: var(--contentInputsColor);

  font-weight: 400 !important;
}

.direccion {
  color: var(--contentSmallTextColor);

  font-weight: 400;

  font-size: 14px;

  line-height: 20px;
}

/* verificar color cliente */

.descripcion_proyecto {
  color: var(--contentSmallTextColor);

  font-weight: 400;

  font-size: 14px;

  line-height: 20px;
}

/* verificar color cliente */

.contenedor-descripcion p {
  color: var(--contentSmallTextColor);
}

/*checkbox toggle de como quiere ser contactado*/

.checkbox.checbox-switch label,
.checkbox-inline.checbox-switch {
  display: inline-block;

  position: relative;

  padding-left: 0;
}

.checkbox.checbox-switch label input,
.checkbox-inline.checbox-switch input {
  display: none;
}

.checkbox.checbox-switch label span,
.checkbox-inline.checbox-switch span {
  width: 35px;

  border-radius: 20px;

  height: 18px;

  border: 1px solid #dbdbdb;

  background-color: rgb(255, 255, 255);

  border-color: rgb(223, 223, 223);

  box-shadow: rgb(223, 223, 223) 0px 0px 0px 0px inset;

  transition: border 0.4s ease 0s, box-shadow 0.4s ease 0s;

  display: inline-block;

  vertical-align: middle;

  margin-right: 5px;
}

.checkbox.checbox-switch label span:before,
.checkbox-inline.checbox-switch span:before {
  display: inline-block;

  width: 16px;

  height: 16px;

  border-radius: 50%;

  background: rgb(255, 255, 255);

  content: ' ';

  top: 0;

  position: relative;

  left: 0;

  transition: all 0.3s ease;

  box-shadow: 0 1px 4px rgba(0, 0, 0, 0.4);
}

.checkbox.checbox-switch label > input:checked + span:before,
.checkbox-inline.checbox-switch > input:checked + span:before {
  left: 17px;
}

.checkbox.checbox-switch.switch-dark label > input:checked:disabled + span,
.checkbox-inline.checbox-switch.switch-dark > input:checked:disabled + span {
  background-color: rgb(100, 102, 104);

  border-color: rgb(100, 102, 104);

  box-shadow: rgb(100, 102, 104) 0px 0px 0px 8px inset;

  transition: border 0.4s ease 0s, box-shadow 0.4s ease 0s,
    background-color 1.2s ease 0s;
}

/* Inputs datos  cliente */

.detalle_datos input {
  font-family: 'Open Sans', sans-serif !important;

  color: var(--contentInputsColor);

  font-weight: 400 !important;

  height: 3rem !important;

  box-shadow: none !important;

  border-top: none !important;

  border-left: none !important;

  border-right: none !important;

  border-bottom: 1px solid var(--contentBigTextColor) !important;
}

.logo_izquierda img {
  display: block;

  float: right;

  width: 100%;

  height: 100%;
}

.logo_derecha img {
  display: block;

  float: left;

  width: 100%;

  height: 100%;
}

#datos_contacto .form-group {
  min-height: 7rem;
}

.table > tbody > tr > td,
.table > tfoot > tr > td {
  padding: 8px;

  line-height: 1.42857143;

  vertical-align: top;

  border-top: none !important;
}

.columnas1_precio {
  padding-top: 10px;

  padding-bottom: 10px;

  border-right: none !important;

  border-left: none !important;

  border-bottom: none !important;

  color: var(--contentSmallTextColor) !important;

  background-color: #e0e0e0 !important;

  font-weight: 800 !important;

  border-radius: 1rem;
}

span.columnas2_precio.texto_referencial_dividendo {
  display: block;

  padding: 15px;

  background: var(--lightgray);

  color: var(--gray);

  border-radius: 8px;
}

.estilo_nota_exple p {
  font-size: 12px;

  line-height: 25px;

  color: var(--gray);
}

/* ==========================================================================

   Estilos elementos validación formulario de datos

========================================================================== */

.valid_hide {
  display: none;
}

.invalid_hide {
  display: none;
}

.info_usuario_hide {
  display: none;
}

.Secundarios_hide {
  display: none;
}

.detalle_secundarios_hide {
  display: none;
}

.hidden_select {
  display: none;
}

.detalle_datos_regimen_hide {
  display: none;
}

.detalle_datos_conyuge_hide {
  display: none;
}

#condiciones_general_p:hover {
  cursor: pointer;
}

.condiciones_ver {
  color: #0077cc;

  text-decoration: none;
}

/* ==========================================================================

  SELECT2 (sustituir)

========================================================================== */

.select2-container--bootstrap.select2-container--open .select2-selection {
  border-top: none !important;

  border-left: none !important;

  border-right: none !important;

  border-bottom: 1px solid var(--contentInputsColor) !important;
}

.select2-container--bootstrap
  .select2-results__option--highlighted[aria-selected] {
  /* Fondo y color de fuente  opción seleccionada */

  background-color: #333 !important;

  color: #fff !important;
}

.select2-container--bootstrap.select2-container--focus .select2-selection,
.select2-container--bootstrap.select2-container--open .select2-selection {
  border-top: none !important;

  border-left: none !important;

  border-right: none !important;

  border-bottom: 1px solid var(--contentInputsColor) !important;
}

.select2-container--bootstrap .select2-dropdown {
  border-top: none !important;

  border-left: none !important;

  border-right: none !important;

  border-bottom: 1px solid var(--contentInputsColor) !important;
}

.select2-container--bootstrap .select2-search--dropdown .select2-search__field,
.select2-container--bootstrap .select2-selection {
  border-radius: none !important;

  -webkit-box-shadow: none !important;

  border-top: none !important;

  border-left: none !important;

  border-right: none !important;

  border-bottom: 1px solid var(--contentInputsColor) !important;

  background-color: #fff;

  color: #555;

  font-family: inherit;
}

.select2-container--bootstrap .select2-selection {
  box-shadow: none !important;

  border-radius: 0 !important;

  font-size: 14px;

  outline: 0;
}

/* ==========================================================================

   Formulario

========================================================================== */

#datos_contacto {
  display: block;

  float: none !important;

  width: 100% !important;

  margin-bottom: 40px;

  padding: 0;

  border: none;

  background-color: transparent !important;

  margin-bottom: 15px;

  box-shadow: none;

  min-height: 400px;

  position: relative;
}

.page-header h1 {
  line-height: 22px;

  padding-top: 1rem;
}

.borde-abajo {
  padding-top: 7px;

  padding-bottom: 7px;
}

/* ==========================================================================

   Estilos de Ficha

========================================================================== */

#botonera_btn {
  padding: 0;
}

#box_btn_d .btn {
  width: 100%;
}

#box_btn .btn {
  width: 100%;
}

#box_btn_d2 .btn {
  width: 100%;
}

#img_perspectiva {
  padding: 15px;
}

#img_perspectiva img {
  width: auto;

  max-width: 100%;

  height: 100%;
}

#div_superficies {
  padding: 0;
}

#superficies td {
  padding: 5px;
}

.seccion-bancos {
  padding-top: 20px;
}

.seccion-bancos-valores {
  margin-top: 10px;

  margin-bottom: 10px;
}

.seccion-bancos-valores strong {
  font-style: italic;
}

.seccion-bancos .form-group {
  min-height: 60px !important;
}

.contenedor-bancos {
  border-top: 1px dotted #ddd;

  border-bottom: 1px solid #ddd;

  border-left: none;

  border-right: none;

  margin-top: 10px;

  margin-bottom: 20px;
}

.box_banco_pac img {
  max-width: 100%;

  height: auto;
}

.cont-logos {
  margin: 20px 0;
}

.foto_banco_check {
  max-width: 100%;

  height: auto;
}

#superficies {
  padding: 10px;
}

/* ==========================================================================

   Media Queries

========================================================================== */

@media only screen and (min-width: 320px) and (max-width: 768px) {
  .container-cotizador {
    max-width: 100vw !important;

    height: auto !important;
  }

  .container-ficha {
    max-width: 100vw !important;

    height: auto !important;
  }

  .container-content {
    min-width: auto;
  }

  .container-config {
    height: auto !important;
  }

  .botonera-pac-reserva {
    display: block;

    justify-content: center;
  }

  .container-btn-pac-reserva {
    display: block;

    justify-content: center;
  }

  #titulo_proyecto {
    font-size: 25px !important;

    font-weight: 600 !important;

    line-height: 35px !important;
  }

  .content-size {
    max-height: 300vh;

    overflow-y: scroll;
  }

  .cotizacion-view {
    max-height: fit-content;

    overflow-x: hidden;

    overflow-y: scroll;
  }

  .btn-inmobiliaria-secondary {
    font-size: 16px !important;

    width: 100% !important;

    height: 45px !important;
  }

  .btn-inmobiliaria {
    font-size: 16px !important;

    width: 100% !important;

    height: 45px !important;
  }

  .footer-img {
    max-height: 7vh;
  }

  .radio label,
  .checkbox label {
    padding-left: 14px !important;
  }

  .mensaje-top {
    font-size: 14px !important;
  }

  .mensaje-top-config {
    font-size: 14px !important;
  }

  .mensaje-top-sub {
    font-size: 14px !important;
  }

  .subtitle {
    font-size: 14px;

    font-weight: 600;
  }

  .subtitle-card {
    font-size: 16px;

    font-weight: 600;
  }

  .subtitle-card {
    font-size: 14px;

    font-weight: 600;
  }

  .filter-select-principal {
    font-size: 14px;
  }

  .data-infos {
    font-size: 13px;

    font-weight: 400;

    padding: 3px;
  }

  /* select de los filtros tipo de unidad, orientación y otros campos de datos*/

  .filter-select {
    font-size: 14px !important;
  }

  /* select de los filtros tipo de unidad y orientación */

  .filter-select-none {
    font-size: 14px !important;
  }

  .logo-planok-footer img {
    margin-top: 2rem;

    padding-top: 3rem !important;
  }

  label {
    font-size: 14px !important;
  }

  .botonera-edit-pdf {
    display: flex;

    justify-content: center;
  }

  .btn-rounded {
    margin-left: 0;

    margin-left: 1rem;

    margin-right: 1rem;
  }

  .padding-top-bottom {
    padding-bottom: 0;

    padding-top: 0;
  }
}

@media only screen and (min-width: 320px) {
  .page-header h1 {
    font-size: 21px;
  }

  .page-header {
    margin-top: 0;

    margin-bottom: 0;
  }

  .logo_derecha {
    float: left;
  }

  .logo_izquierda {
    float: right;
  }

  .texto_referencial_dividendo {
    margin-top: 0;

    background: #636363;

    color: white;
  }

  #img_perspectiva {
    margin-top: 0;
  }
}

@media (min-width: 750px) {
  .vcenter {
    height: 150px;

    display: -webkit-flex;

    display: flex;

    align-items: center;

    -webkit-align-items: center;

    padding-bottom: 1rem;

    padding-top: 1rem;
  }

  .content-size {
    max-height: 40vh;

    overflow-y: scroll;

    overflow-x: hidden;
  }
}

@media (min-width: 360px) {
  .logo_derecha {
    float: left !important;
  }

  .logo_izquierda {
    margin-top: 1rem;

    float: right !important;
  }
}

@media only screen and (min-width: 750px) {
  .page-header h1 {
    font-size: 31px;
  }

  .page-header {
    margin-top: 20px;
  }

  .logo_derecha {
    float: left;
  }

  .logo_izquierda {
    float: right;
  }

  #titulo_proyecto {
    font-size: 35px;

    font-weight: 800 !important;
  }

  .texto_referencial_dividendo {
    margin-top: 0;

    background: #636363;

    color: white;
  }

  #img_perspectiva {
    margin-top: 40px;
  }
}