﻿/*
    Azul claro: #54B7E0
    Azul oscuro: #1996CC
    Turquesa: #03ACEB
    Turquesa:hover: #03BCFF
*/

body { font-family: 'Roboto', sans-serif; font-weight: 400; font-size: 1rem; display: -ms-flexbox; display: flex; -ms-flex-align: center; align-items: center; background-color: #f5f5f5; }

h1 { font-family: 'Roboto Slab', sans-serif; font-weight: 400; font-size: 2rem; }
h2 { font-family: 'Roboto Slab', sans-serif; font-weight: 400; font-size: 1.5rem; }
h3 { font-family: 'Roboto', sans-serif; font-weight: 500; font-size: 1.35rem; }
h4 { font-family: 'Roboto', sans-serif; font-weight: 500; font-size: 1.20rem; }
h5 { font-family: 'Roboto', sans-serif; font-weight: 400; font-size: 1.1rem; }
p { font-weight: 400; font-size: 1rem;}

.mb-0 { margin-bottom: 0px !important; }
.mb-1 { margin-bottom: 10px !important; }
.mb-2 { margin-bottom: 20px !important; }
.mb-3 { margin-bottom: 30px !important; }

.mt-0 { margin-top: 0px !important; }
.mt-1 { margin-top: 10px !important; }
.mt-2 { margin-top: 20px !important; }
.mt-3 { margin-top: 30px !important; }

.border-light-shadow {
    border-color: #f1f1f1 !important;
}

b {
    font-weight: 500;
}

.fw-500 {
    font-weight: 500;
}

.highlight { border-radius: 1em 0 1em 0; padding: 0.25rem; background-image: linear-gradient( -100deg, rgba(255, 236, 179, 0.3), rgba(255, 236, 179, 1) 95%, rgba(255, 236, 179, 0.2) ); }

.table-calendar { color: #999999; width:340px !important; }
.table-calendar th { text-align: center; width: 46px; padding: 0px; font-weight: 500; margin:0px; }
.table-calendar td { text-align: center; width: 46px; padding: 0px; font-weight: 500; margin:0px; }

th { font-weight: 500; }

table.table-condensed > thead > tr > th, table.table-condensed > tbody > tr > td, table.table-condensed > tfoot > tr > th { padding: 6px; }

@media (max-width: 768px) {
    .w-100-mobile { width: 100%; }
}

.notification-bubble { background-color: #00ACEB; margin-left: -10px; margin-top: -5px; }

a { color: #1996CC;}
a:hover, a:active { color: #54B7E0;   }
b, strong { font-weight: 500 !important; }

/*NUEVO*/
.loading_background { position: fixed; top: 0; left: 0; z-index: 2147483647 !important; background-color: #000; opacity: 0.6; width: 100%; height: 100%; }
.loading_gif { position: fixed; opacity: 0.6; top: 50%; left: 50%; transform: translate(-50%, -50%); }

/*VIEJO*/
.loading_border {position: absolute; z-index: 2147483647 !important; overflow: hidden; top: 0; left: 0; height: 100%; width: 100%; }
.loading_body { background-color: #000; opacity:0.6; padding:50px; text-align:center; height: 100%; width: 100%;}

.fa, .far, .fas, .fa-solid { padding-right:5px; }
.alert-secondary{ background-color:#f1f1f1; }
.alert-info{ background-color:#E5F7FD; border-color: #E5F7FD; color: #027CA8; }
.alert-warning{ border-color: #FFF3CD; }
.alert-danger { border: none !important; }


.alert-white { border: solid 1px #f1f1f1; }

.breadcrumb { background-color: #E0F1FC; border-radius: 0px; border: none; margin-bottom: 0px; }
.wmax-100 { max-width:100%; }

input, input:focus, input:active {    font-family: 'Roboto', sans-serif; }
input:disabled { background-color: #e9ecef !important; }

.form-control:focus { font-family: 'Roboto', sans-serif; -webkit-box-shadow: 0 0 0 1000px #fff inset; }

input[type=checkbox]{display: none;}
input[type=checkbox] .mr-1 {display: none;}
input[type=checkbox] + label {vertical-align: middle; margin: 0px; line-height:1.2rem; margin-right: 5px; text-align: left; height: 30px; background: url(unchecked.png) no-repeat; border: none; cursor: pointer; display: block; padding-left: 15px; text-indent: 10px;}
input[type=checkbox]:checked + label {background: url(checked.png) no-repeat; background-position: left 3px;}
input[type=checkbox]:checked + label {background: url(checked.png) no-repeat;}

span.aspNetDisabled input[type=checkbox] + label {color: #ccc;}

.form label, .form-group label  {display: block; padding-left: 0px; padding-bottom: 5px; text-indent: 0px; font-weight: 500; margin-bottom:0px; color: #999; }
.form label.requerido, .form-group label.requerido  { color: #666; }
.form-inline .form-group {margin-right:10px; display: inline-block;}

.alert-light { color: #818182; background-color: #f5f5f5 !important; border-color: #fdfdfe; }
.alert-light-hover:hover { background-color: #F1F1F1 !important; border-color: #ccc; }

a.link-modal { color:#666; border-bottom: 1px dashed #666; text-decoration: none; }
a.link-modal:hover { color:#999; border-bottom: 1px solid #999; text-decoration: none; }

.modal-dialog { max-width: 960px; }

.nbt { border-top: 1px solid #fff !important; }

.navbar { margin-bottom: 0px; padding: 0.5rem !important; }
.navbar-dark .navbar-text { color: #ccc; } 
.navbar-dark .navbar-brand a {  color: #fff;}
.navbar-brand { padding-top: 0px;}
.navbar-dark .navbar-brand a:focus, .navbar-dark .navbar-brand a:hover { text-decoration: none;    color: #fff;}

.nav-link { font-family: 'Roboto Slab', sans-serif; color: #999; }
.nav-link:hover {  }

.navbar-dark .navbar-nav .nav-link { color: #e2e2e2;}
.navbar-dark .navbar-nav .nav-link:hover, .navbar-dark .navbar-nav .nav-link:focus {  color: #fff;    }
.navbar-dark .navbar-nav .nav-link.disabled {   color: #f1f1f1;  }
.navbar-dark .navbar-nav .show > .nav-link, .navbar-dark .navbar-nav .active > .nav-link, .navbar-dark .navbar-nav .nav-link.show, .navbar-dark .navbar-nav .nav-link.active {color: #fff; }

.dropdown-item > .fa {width:30px; text-align: center;}


/* BOTONES */
.btn-sm, .btn-group-sm > .btn {
    font-size: 85%;
    line-height: 1;
    font-weight: 400;
    padding: 0.5em 0.7em 0.5em 0.7em;
}
.btn-xs { font-size: 75%; padding: 2px 6px 2px 6px; }

.btn-primary { color: #fff!important; background-color: #1996CC; border-color: #1996CC; }
.btn-primary:hover, .btn-primary:active, .btn-primary:focus { color: #FFF; background-color: #54B7E0; border-color: #54B7E0; }
.btn-outline-primary { color: #03ACEB; background-color: #fff; background-image: none; border-color: #03ACEB; }
.btn-outline-primary:hover, .btn-outline-primary:active, .btn-outline-primary:focus, .btn-outline-primary.active { color: #FFF; background-color: #03ACEB; border-color: #03ACEB; }
.btn-outline-primary:focus, .btn-outline-primary.focus { box-shadow: 0 0 0 0.2rem rgba(0, 123, 255, 0.5); }
.btn-outline-primary.disabled, .btn-outline-primary:disabled { color: #007bff; background-color: transparent; }
.btn-outline-secondary { color: #778899; background-color: #fff !important; background-image: none; border-color: #778899; }
.btn-outline-secondary:hover, .btn-outline-secondary:focus { color: #C30832 !important; background-color: #F1C9D8 !important; border-color: #C30832 !important; }
.btn-secondary.disabled { color: #ccc!important; }
.btn-outline-light { color: #778899; border-color: #778899; background-color: #f1f1f1; }

/*Estos .active se usan para indicar el dia seleccionado , ponerle class calendario o algo que no altere en general */
.btn-primary.active { color: #C30832 !important; background-color: #F1C9D8 !important; border-color: #C30832 !important; }
.btn-outline-secondary.active { color: #C30832 !important; background-color: #F1C9D8 !important; border-color: #C30832 !important; }
.btn-outline-light.active { color: #C30832 !important; background-color: #F1C9D8 !important; border-color: #C30832 !important; }
.btn-outline-light:hover { color: #778899; border-color: #778899; background-color: #fff; }
.btn-outline-light.disabled, .btn-outline-light:disabled { color: #778899; border-color: #778899; background-color: #f1f1f1; }
.btn-outline-danger { background-color: #fff !important; }
.btn-outline-danger:hover, .btn-outline-danger:active, .btn-outline-danger:focus { color: #fff !important; background-color: #c82333 !important; border-color: #bd2130 !important; }

/*TABLAS*/
.table thead th { vertical-align: bottom; border-bottom: 2px solid #dee2e6; font-weight: 500; background-color: #f5f5f5; }
.table tr td a { vertical-align: middle; }
.table tr td span { vertical-align: middle; }
.table tr td a.btn-sm { padding: 0.4em 0.7em 0.35em 0.7em; }
.table-hover tbody tr:hover { background-color: #f1f1f1;}

.badge { border: 1px solid transparent; font-size: 75%; line-height: 1; font-weight: 400; padding: 0.5em 0.7em 0.5em 0.7em;}
.card { background-color: #fff; border-bottom: solid 1px #e5e5e5; border-radius: 0px !important;}