/*
Click nbfs://nbhost/SystemFileSystem/Templates/Licenses/license-default.txt to change this license
Click nbfs://nbhost/SystemFileSystem/Templates/Other/CascadeStyleSheet.css to edit this template
*/
/* 
    Created on : 3 ago. 2022, 13:15:35
    Author     : enovait
*/

.switchery-small {
  border-radius: 20px;
  height: 20px;
  width: 33px;
}

.toast-success{
    background-color: var(--success) !important;
    border-color: var(--success) !important;
}

#toast-container > div{
    opacity: 1;
    margin-top: 0.5rem;
}

/*********************** COLORES LOGIN ****************************/

.account-logo-box {
  background: var(--navbar-bg);
  border-radius: 0.2rem;
}
.bg-color-primary {
    background-color: var(--primary) !important;
}

.login-titulo-bg {
  background: var(--topnav-menu-bg);
  border-radius: 0.2rem;
  color: var(--topnav-menu-text-color);
}

.login-titulo-text {
  color: var(--topnav-menu-text-color);
}
div.account-logo-box img{
    max-width: 90%;
}
/***********************  BOOTSTRAP BUTTONS  ****************************/

.btn-primary {
    background-color: var(--primary) !important;
    border-color: var(--primary) !important;
}

.btn-secondary {
    background-color: var(--secondary) !important;
    border-color: var(--secondary) !important;
}

.btn-success {
    background-color: var(--success) !important;
    border-color: var(--success) !important;
}

.btn-danger {
    background-color: var(--danger) !important;
    border-color: var(--danger) !important;
}

.btn-success:hover, .btn-danger:hover, .btn-secondary:hover, .btn-primary:hover  {
    opacity: 0.9 !important;
}

 .modal .radio label::after {
    top: 7px !important;
 }
 
 /* FORM VALIDATION DESIGN */
.form-error{
    border-color: #f5707a;
}

.form-control::placeholder { /* Chrome, Firefox, Opera, Safari 10.1+ */
    opacity: 0.70;
}

.form-control:-ms-input-placeholder { /* Internet Explorer 10-11 */
    opacity: 0.70;    
}

.form-control::-ms-input-placeholder { /* Microsoft Edge */
    opacity: 0.70;    
}

.parsley-errors-div{
  list-style: none;
  color: #f5707a;
  margin-top: 5px;
  padding-left: 20px;
  position: relative;
}

.parsley-errors-div::before {
  content: "\F159";
  font-family: "Material Design Icons";
  position: absolute;
  left: 2px;
  top: -1px;
}

.public-layout-logo img{
    width: 15%;
}

.bg-black{
    background-color: #000000 !important;
}

.bg-white-opacity{
    background-color: #ffffff20;
}

.bg-black-70{
    background-color: var( --e-global-color-text );
    opacity: 0.7;
    transition: background 0.3s, border-radius 0.3s, opacity 0.3s;
}
.bg-fondo-registro{
    background-image: url('/img/fondo-el-hidrante.jpg');
    background-size: cover;
}

div.row-superior{
    background-color: var(--navbar-bg) !important;
    color: var(--navbar-text-color) !important;
}
div.registro-faldon, div.registro-subfaldon{
    color: var(--topnav-menu-text-color);
    background-color: var(--topnav-menu-bg);
}

.text-primary-color{
   color: var(--primary) !important;   
}

.text-secondary-color{
   color: var(--secondary) !important;   
}

 /* POP-UP swal2 */

.swal2-no-decoration .swal2-popup {
    background-color: #fff !important; 
}

/*********************** card registro ****************************/

.card-plan-header {
    min-height: 400px !important; /* Ajusta este valor según el contenido más alto */
    display: flex;
    flex-direction: column;
    justify-content: space-between; 
    text-align: center;
}

/*Extra small devices (portrait phones, less than 576px)*/
@media (max-width: 420px) {
    .public-layout-logo img{width: 25%;}
}

/*Extra small devices (portrait phones, less than 576px)*/
@media (max-width: 575.98px) {
    .public-layout-logo img{width: 25%;}
}

/*Small devices (landscape phones, 576px and up)*/
@media (min-width: 576px) and (max-width: 767.98px) {
    .public-layout-logo img{width: 25%;}
}

/*Medium devices (tablets, 768px and up)*/
@media (min-width: 768px) and (max-width: 991.98px) {
    .public-layout-logo img{width: 25%;}
}

/*Large devices (desktops, 992px and up)*/
@media (min-width: 992px) and (max-width: 1199.98px) {
    
}

/*Extra large devices (large desktops, 1200px and up)*/
@media (min-width: 1200px) { 
    
}