@charset "utf-8";
/* CSS Document */
.img-login                            { max-height:120px; }

/* Rules for icon sizes Material:*/
.material-icons                       { max-width:24px; display:inline-flex; vertical-align:middle; }
.material-icons.md-18                 { font-size:18px; }
.material-icons.md-24                 { font-size:24px; }
/* Default */
.material-icons.md-36                 { font-size:36px; }
.material-icons.md-48                 { font-size:48px }

/*  TDIL:Added to the original components */
.brand-form                           { overflow-x:hidden; }
.dropdown-menu-title                  { color:white; padding:11px 22px; font-weight:700; clear:both; display:inline-block; overflow:hidden; white-space:nowrap; }
.image-preview                        { width:96px; height:96px; background-color:aliceblue; background-image:url(../images/image-preview.jpeg); background-repeat:no-repeat; background-size:cover; }
.image-preview-large                  { width:164px; height:164px; background-color:aliceblue; background-image:url(../images/image-preview.jpeg); background-repeat:no-repeat; background-size:cover; border:1px solid #999; border-radius:4px; }
.row.card.card-special                { display:flex; width:100%; margin:15px auto; flex-direction:inherit; padding:0 10px; }
input.w-button                        { min-height:44px; }
h3.form-section                       { display:inline-block; padding-top:3.3125rem; padding-bottom:0.3125rem; margin-right:1rem; font-size:1.15rem; line-height:inherit; white-space:nowrap; border-bottom:1px solid #eaeaea; width:100%; }
.custom-control.custom-switch         { padding-left:57px; padding-top:37px; }
.custom-control.custom-switch         { padding-left:57px; padding-top:10px; }

.brand-form .form-group               { margin-bottom:1rem; display:inline-grid; }
.row.button-container                 { margin:15px 0; text-align:right; display:block; }
p.tutorial,
label span.tutorial                   { color:#3e3e3e; font-size:0.8rem; font-weight:300; }
label.error                           { color:#b10909; font-size:1rem; font-weight:500;  }
a.btn-collapser                       { color:#000; width:100%; display:block; background-color:aliceblue; padding:10px 6px 7px; }
.btn-square                           { aspect-ratio:1; width:164px; max-width:164px; margin:0; padding:0; cursor:auto!important; overflow:hidden; }
.btn-square span                      { position:absolute; z-index:10; width:162px; height:162px; top:109px; left:6px; }
.no-file                              { background-color:#eaeaea; border:1px solid #999; border-radius:4px; text-align:center; padding-top:25%; }
input.search-special                  { outline:none; width:calc(40vw - 150px); margin-right:150px; }
button.aside-list                     { position:absolute; right:15px; top:46px; z-index:1000; }
.t-medium                               { font-size:0.8rem; }
/* BOOTSTRAP REWRITES */

.btn-primary                          { color: #fff!important; }
.list-group-item                      { border: 0px solid rgba(0, 0, 0, 0.125); }
@media (min-width: 1200px){
    .container_user-per {
        max-width: 96%;
    }
}

/* Titles */

.title_container{
    display: grid;
    grid-template-columns: auto 1fr;
    align-items: center;
    justify-content: center;
    margin-bottom: 40px;
}
.title{
    text-align: center;
    letter-spacing: 0em;
    margin-left: 50px;
    margin-right: 50px;
}
@media (max-width: 1000px) {
    .title{
        margin-left: 25px;
        margin-right: 25px;
    }
}
.h1_title {
    font-size: 28px;
    font-weight: 300;
    line-height: 34px;
    color: #3579F6;
}
.p_sub_title {
    font-size: 16px;
    font-weight: 300;
    line-height: 19px;
}
.return {
    font-weight: 300;
}

/* editar-rol.php */
.users_container {
    height: 65vh;
}
.permissions_container {
    height: 65vh;
    border: solid 4px #0077F7;
    border-radius: 4px;
    padding: 20px;
}

.users_container .list-group-item { color: #3579F6;} /* boostrap styles editado */
.users_container .list-group-item.active {color: #fff;} /* boostrap styles editado */
.list-group-x   { padding:0 }

/* material-swhit */
.material-switch>input[type="checkbox"] {
    display: none;
}

.material-switch>label {
    cursor: pointer;
    height: 0px;
    position: relative;
    width: 40px;
}

.material-switch>label::before {
    background: rgb(0, 0, 0);
    box-shadow: inset 0px 0px 10px rgba(0, 0, 0, 0.5);
    border-radius: 8px;
    content: '';
    height: 16px;
    margin-top: -8px;
    position: absolute;
    opacity: 0.3;
    transition: all 0.4s ease-in-out;
    width: 40px;
}

.material-switch>label::after {
    background: rgb(255, 255, 255);
    border-radius: 16px;
    box-shadow: 0px 0px 5px rgba(0, 0, 0, 0.3);
    content: '';
    height: 24px;
    left: -4px;
    margin-top: -8px;
    position: absolute;
    top: -4px;
    transition: all 0.3s ease-in-out;
    width: 24px;
}

.material-switch>input[type="checkbox"]:checked+label::before {
    background: #0077F7;
    opacity: 0.5;
}

.material-switch>input[type="checkbox"]:checked+label::after {
    background: #0077F7;;
    left: 20px;
}

.btn-primary                          { color:#fff!important; }

/** new styles 20230726 **/
h1,h2,h3,h4,h5,bold,strong,.h1,.h2,.h3{ font-family: 'Urbanist', open-sans, arial, sans-serif;  font-weight:900;}
a, span, label, p, div, body,td, th { font-family: 'Urbanist'}

.form-group label{font-weight: bold;}

body.login{background-color:#007bb5;
/*
background-image:url('../images/venta-explora-bg-bottom.png') ;
background-repeat:no-repeat;
background-position: bottom ;
	background-size:contain  ;*/
}
.wrapper {display: flex;
    justify-content: center;
    align-content: normal;
    min-height: 100vh;
    min-width: 100vw;}
main{width: 100%;}

.container-login{}

.container.login .card {border-radius: 30px;box-shadow:0px 0px 15px 3px #545454;}
.card-body .form-group {font-weight: bold; }
.card-header{background:#fff;}
.login .btn.btn-primary{border-radius:30px;padding:5px 15px;}

/**new boton menu **/
#sidebarToggle{border-radius: 5px;}
.navbar-dark .navbar-toggler-icon{background-image:none;}
.navbar-toggler-icon{height:auto!important; width:auto!important;}
#sidebarToggle .navbar-toggler-icon{font-size:30px; }

#layoutSidenav{}
.btn {border-radius:30px; font-weight: bold; text-transform: uppercase}
.navbar-dark .navbar-brand {font-weight: bold;}
.card{border-radius:30px}
.navbar-dark .navbar-text{color: rgba(255, 255, 255, 0.75);}
.navbar-dark .navbar-nav .nav-link { color: rgba(255, 255, 255, 0.75);}
.navbar-dark .navbar-nav .nav-link:hover, .navbar-dark .navbar-nav .nav-link:focus{ color: rgba(255, 255, 255, 1);}
.btn.btn-block.btn-primary{font-size:14px;}

.card.shadow-sm{transition: all .2s;position:relative;bottom:0px; box-shadow:0 0.125rem 1rem 1px rgba(0, 0, 0, 0.075) !important;}
.card.shadow-sm:hover { position:relative;bottom:5px;}

#layoutSidenav { background-image:url("../images/bg-marcadeagua.png"); background-repeat: no-repeat;background-size: auto; background-position: bottom right; }

.form-control {border-radius:30px;}

.input-group > .input-group-prepend > .form-control{
  border-top-right-radius: 0;
  border-bottom-right-radius: 0;
}

.custom-file-label::after, .custom-file-input:lang(en) ~ .custom-file-label::after{content:'examinar'}


/*#divPdfTemplate {padding-top:20px;}*/
/*.custom-file-label{font-style: italic;}*/

.modal-body .btn.btn-lg.btn-success {margin-top:30px;}

.ui-state-active, .ui-widget-content .ui-state-active, .ui-widget-header .ui-state-active{background:#fff!important; color:#212529!important; border: 1px solid #fff}
.ui-state-active a, .ui-state-active a:link, .ui-state-active a:visited{ color:#212529!important}

#fromInputCardNumber2do, #toInputCardNumber2do {max-width:60px;}
#fromInputCardNumber3er, #toInputCardNumber3er {max-width:50px;}
#fromInputCardNumber4to, #toInputCardNumber4to {max-width:100px;}
#inputCardVtoMonthGCRango, #inputCardVtoYearGCRango{max-width: 75px;}

#formVentaRangoGiftCard > input.form-control ::placeholder{font-style: italic; color:#ddd}

.input-group > .input-group-prepend > .input-group-text {border-radius: 2rem}

.table thead th {
    vertical-align: middle;
}



