/*  ------------------------------------------------------------
    HOJA DE ESTILOS MiEscuelaTKD
    (c)2020 - sime.tech                   <http://sime.tech>
              Diseño: Ing. Javier Vélez   <ingenieria@sime.tech>
    -------------------------------------------------------------
    Prohibida su reproducción parcial o total sin plena
    autorización por escrito de su autor.
    ------------------------------------------------------------- */

/* +++++++++++++++++++++++++++++++++ GOOGLE FONTS +++++++++++++++++++++++++++++++++++++++++++ */
@import url('https://fonts.googleapis.com/css?family=Roboto+Slab:400,600,800&display=swap');
@import url('https://fonts.googleapis.com/css?family=IBM+Plex+Sans:400,500,600,700&display=swap');

/* +++++++++++++++++++++++++++++++++++++++ BODY ++++++++++++++++++++++++++++++++++++++++++++ */
body {
    font-family: 'IBM Plex Sans', Tahoma, 'Arial', sans-serif;
    font-size:1em;
    -webkit-touch-callout:none;
    -webkit-text-size-adjust:none;
    -webkit-user-select:none;
    background: #f9f9f9;
    color: #4A4A4F;
    font-weight: 300;
}

* {-webkit-tap-highlight-color:rgba(0,0,0,0);}
.btn:active {outline:0 !important;}
.btn:focus {outline:0 !important;}
.btn:hover {outline:0 !important;}

::placeholder { color:#e0e0e1 !important; opacity: 1; text-transform: none; }
:-ms-input-placeholder { color:#e0e0e1 !important; text-transform: none; }
::-ms-input-placeholder { color:#e0e0e1 !important;text-transform: none; }

h1, h2, h3, h4, h5, h6 {
    font-family: 'Roboto Slab', serif;
    font-weight: 400;
    margin-bottom:0;
}

a, a:visited { color:#0f4c81; font-weight: 400; }
a:hover, a:active { color: #870110; }

input[type='text']:focus,
input[type='password']:focus,
input[type='number']:focus,
input[type='tel']:focus,
input[type='search']:focus,
input[type='date']:focus,
select.form-control:focus,
textarea:focus {
    border-width: 2px;  border-color: rgba(77,130,172,0.35);  -webkit-box-shadow: none; box-shadow: none;
}

.md-form textarea.md-textarea { padding: 0.7rem 0; }

.md-form>input[type="date"]:not(.browser-default)+label { transform: translateY(-14px) scale(0.8); transform-origin: 0% 100%; }


/*        Widths            */
.w60 { width:60px !important; }
.w70 { width:70px !important; }
.w80 { width:80px !important; }
.w90 { width:90px !important; }
.w100 { width:100px !important; }
.w110 { width:110px !important; }
.w120 { width:120px !important; }
.w130 { width:130px !important; }
.w140 { width:140px !important; }
.w150 { width:150px !important; }
.w160 { width:160px !important; }
.w170 { width:170px !important; }
.w180 { width:180px !important; }
.w200 { width:200px !important; }

/*        Weights            */
.weight500 { font-weight: 500; }

.ucfirst:first-letter{
    text-transform: capitalize
}

.purple-color { background-color: #6868ab; color: #ffffff;}

.btn-fmtkd-purple,
.btn-fmtkd-purple:visited { background-color: #6868ab; color: #ffffff; }

.btn-fmtkd-purple:hover,
.btn-fmtkd-purple:focus,
.btn-fmtkd-purple:active { background-color: #474784; color:#ffffff; }

/* +++++++++++++++++++++++++++++++++++++++ LOGIN ++++++++++++++++++++++++++++++++++++++++++++ */
#main-100vh { height:100vh; padding:0 0.2rem; }
#footer-login { line-height: 1em; padding-left:1em; position: fixed; bottom: 0; width:100%; color:rgba(255,255,255,0.35); background: rgba(255,255,255,0.1); }
#footer-login a { color:rgba(255,255,255,0.30); }


/*  +++++++++++++++++++++++++++++++++++ LOADER CSS  ++++++++++++++++++++++++++++++++++++++++ */
#loader { height: 4px; width: 100%; position: fixed; overflow: hidden; background-color:transparent; top:0; z-index:11000; }
#loader:before{ display: block; position: absolute; content: ""; left: -200px; width: 200px; height: 4px; background-color: rgba(255,255,255,0.60); animation: loading 1.5s linear infinite; }
@keyframes loading {
    from {left: -200px; width: 30%;}
    50% {width: 30%;}
    70% {width: 70%;}
    80% { left: 50%;}
    95% {left: 120%;}
    to {left: 100%;}
}

/* ++++++++++++++++++++++++++++++++++++++ MODALES ++++++++++++++++++++++++++++++++++++++++++++ */
#modal-frame .modal-content {
    color:#e6e6e6;
    border-bottom:1px solid #e6e6e6;
}

#modal-preview { font-size: 0.95em; }
#modal-preview .modal-body { padding: 1rem; }

/* +++++++++++++++++++++++++++++++++++++ NAVBAR SIDE +++++++++++++++++++++++++++++++++++++++++ */
.navbar .dropdown-menu { left: inherit; right: 0; }
#nav-fmtkd { padding: 0.15rem 1rem; }
#title-navbar { font-family: 'Roboto Slab', serif; font-weight: 400; font-size: 0.9em; margin-left: 0.5rem; color: #e2e2e8; }

/* +++++++++++++++++++++++++++++++++++++ SIDEBAR ++++++++++++++++++++++++++++++++++++++++++++ */
.wrapper { display: flex; width: 100%; align-items: stretch; }
#content { width:100%; max-width: 100%; overflow: hidden; padding:0.5rem; margin-top:56px; }
#sidebar { min-width: 210px; max-width: 210px;  min-height: calc(100vh - 56px); margin-top: 56px; background: #1e1e20; color: #f0f0f0;  }
#sidebar-email { font-size:0.65em; text-overflow: ellipsis; max-width: 100%; overflow: hidden; color:#909096; }
#sidebar.active { margin-left: -200px; }
#sidebar-caret { font-size:16px; height: 100%; width:10px; float: right; background: rgba(0,0,0,0.2); cursor: pointer; }

#sidebar .side-title { border-bottom:1px solid rgba(255,255,255,0.1); }

#sidebar ul p { color: #f0f0f0; padding: 10px; }
#sidebar ul li a { color:#f0f0f0; font-size:0.95em; padding:5px 0 5px 1em; display: block; }
#sidebar > ul > li > ul > li > a { padding-left:2.6em; font-size: 0.85em; }
#sidebar ul li a:hover { color: #f0f0f0; background: #878797; transition: 0.3s ease-in; opacity: 1; }
#sidebar > ul > li > ul  { background: #25252a; }
#sidebar > ul > li { border-bottom:1px solid rgba(255,255,255,0.1); }
#sidebar > ul > li > ul >li { border-bottom:1px solid rgba(255,255,255,0.03); }

#sidebar .dropdown-toggle::after { display: block; position: absolute; top: 50%; right: 10px; transform: translateY(-50%); }
#sidebar a[data-toggle="collapse"] { position: relative; }

/* +++++++++++++++++++++++++++++++++++++ BREADCRUMB ++++++++++++++++++++++++++++++++++++++++++++ */
.breadcrumb-item+.breadcrumb-item::before { content:""; padding-right: 0; }
.breadcrumb-item+.breadcrumb-item { padding-left:0; }



/* +++++++++++++++++++++++++++++++++++++ SEARCHBAR ++++++++++++++++++++++++++++++++++++++++++++ */
#ifi-searchbar #srch-field { border-radius: inherit; }
#ifi-searchbar .input-group-text { background-color: #f4f4fA; }
#ifi-searchbar #srch-btn { border-radius: 0 0.25rem 0.25rem 0; }


/*  +++++++++++++++++++++++++++++++++++ DATATABLES  ++++++++++++++++++++++++++++++++++++++++ */
#tDatos { width:100%; margin: 0 auto; clear: both; border-collapse: collapse;  word-wrap:break-word; color:#4A4A4F;}

table.dataTable thead .sorting:before, table.dataTable thead .sorting:after, table.dataTable thead .sorting_asc:after,
table.dataTable thead .sorting_desc:after, table.dataTable thead .sorting_asc:before, table.dataTable thead .sorting_desc:before {
    bottom:0.2em !important;
}

#tDatos th { padding-top:0.4rem; padding-bottom:0.3rem; padding-left:0.3rem; background-color: #103B58; font-size:0.8em; color:#f2f2f2; font-weight: 500; }
#tDatos td { font-size:0.75em; vertical-align: middle; padding:0.1rem 0.3rem; }

#tDatos .sorting_1 { background-color: #d8d8da; }
#tDatos tbody tr:hover { background-color: #faf0e6; }

.table-botonera { min-width: 80px !important; text-align: center; }
.btn-table { margin:0; padding:6px 12px !important; }
.btns-export { padding:6px 12px !important;  margin:12px 2px 0 0; }
.btn-table:hover, .btns-export:hover { opacity: 0.85;}

.dataTables_info { font-size:0.9em; }
.dataTables_filter label { margin-bottom:0; padding-bottom:2px !important; padding-top:6px; font-size:0.9em; }

.pagination .page-item.active .page-link { color: #4A4A4F; background-color: transparent; font-weight: 500; font-size:0.8em; box-shadow: none; -moz-box-shadow: none; border:1px solid #e3e3e3; }

.pagination .page-item.active .page-link:hover, .pagination .page-item.active .page-link:focus {
    color: #ffffff !important;
    background-color: #4d82ac !important;
    border:1px solid #4d82ac;
}

div.dataTables_wrapper div.dataTables_info { font-size:0.8em; }
div.dataTables_wrapper div.dataTables_paginate { padding-top: 0.5rem !important; padding-bottom: 0 !important; }
div.dataTables_wrapper div.dataTables_paginate ul.pagination { margin-bottom:0; }

.dataTables_length { padding-top:0.3rem; font-size:0.8em; }

#tDatos .dataTables_empty { padding: 0.75rem 0; font-size:0.9em; color: #4A4A4F;}

.row-constancias:hover td{ font-weight: 500 !important; }
.row-selected { background-color: #27535b !important; color:#ffffff; }


#tConst { width:100%; margin: 0 auto; clear: both; border-collapse: collapse;  word-wrap:break-word; color:#4A4A4F; table-layout: fixed; }
#tConst th { vertical-align: middle; width:20%; text-align: right; padding-top:0.3rem; padding-bottom:0.3rem; padding-left:0.3rem; font-weight: 500; background-color: #939597; color:#FFFFFF; }
#tConst td { vertical-align: middle; padding:0.1rem 0.3rem; }


/* ++++++++++++++++++++++++++++++++++++++++ FORMAS ++++++++++++++++++++++++++++++++++++++++++++++++ */
#form-container { background-color: #ffffff; padding:0.75rem 0.5rem; }

#form-container .md-form label, .md-form small{ color: #c0c0c2; }
#form-container .md-form { margin:1rem 0.5rem; }
#form-container .prefix { color:#697077; }

#form-container .form-ctrl-big { font-size:1.4em; }
#form-container .form-prefix-big { font-size:1.9rem !important; top:0.68rem !important; }


#form-container .form-ctrl-title { color:#4d82ac; font-weight:500; }

#form-container .md-form .validate { margin-bottom:inherit; }


#form-container .form-select { margin-top:7px !important;  border-top:none !important; border-left:none !important; border-right:none !important; border-bottom:1px solid #c5c5c5;  -webkit-appearance: none; -moz-appearance: none; }
#form-container .form-select:focus, .form-select:active { border-bottom:2px solid #4d82ac !important; }
#form-container .form-select:focus+label, #form-container .form-control:focus+label{ color:#4d82ac; }

#form-container .form-control:focus{ border-bottom:2px solid #4d82ac; -webkit-box-shadow: none; box-shadow: none; }


#form-img-input { width: 0.1px; height: 0.1px; opacity: 0; overflow: hidden; position: absolute; z-index: -1; left:-1px; top:-1px; }
#foto-actual { cursor: pointer; height:198px; width:calc(200px / 1.41333); background-color: #f0f0f3; border:2px dashed #ced4da; overflow: hidden; }
#foto-actual img { position: relative; object-fit: cover; width: 100%; }
.cr-slider-wrap span { display: none; }

.border-bottom { border-bottom: 1px solid rgba(0,0,0,0.15); }

.tab-content { padding: 1.3rem 1rem 1rem 1rem; min-height: 340px;}

.ifi-check { visibility: hidden; }
.ifi-check + label{ cursor: pointer; }
.ifi-check + label:before { transition: 250ms background-color; border: 1px solid #ced4da; border-radius: 0.2em; background-color: #ffffff; content: "\00a0"; display: inline-block; font-size: 1em; height: 24px; width: 24px; margin: 0 0.25em 0 0; padding: 0; vertical-align: top; }
.ifi-check:checked + label:before { background: #4d82ac; color:  #ffffff;  content: "\2713"; text-align: center; font-weight: bold; }

.form-buttons-bar { background-color: #f0f0f4; }
#form-container h6 { padding:0.3rem 0.2rem; background-color: #f0f0f4; }

#foto-voucher { cursor: pointer; height:264px; width:calc(264px / 1.79); background-color: #f0f0f3; overflow: hidden; }
#foto-voucher img { position: relative; object-fit: cover; width: 100%; }

#fmtkd-svg { width:16px; height:auto; margin-right: 0.5rem; }

/* +++++++++++++++++++++++++++++++++++++ CARDS ++++++++++++++++++++++++++++++++++++++++++++ */
.card .card-title {  text-align: center;  font-weight: 400; font-size:1em; padding: 0.4rem 0; margin: 0;}
.card-dash .card-body { padding: 0.3rem; }
.card-dash .card-footer { border-top: 0; text-align: center; padding: 0.5rem 0.3rem; }
.num-records { font-size: 2.2em; text-align: center; font-weight: 500; }
.status-const { font-size: 1.5em; text-align: center; font-weight: 500; line-height: 2.2em; }
.status-const2 { font-size: 1.7em; text-align: center; font-weight: 500; line-height: 2.2em; }

#no-avisos { font-size: 1.5em; font-weight: 400;}

#fmtkd-voucher { max-width: 240px; height: auto;}

/* +++++++++++++++++++++++++++++++++++++ MEDIA QUERIES ++++++++++++++++++++++++++++++++++++++++++++ */

@media all and (max-width:575px) {
    div.dataTables_wrapper div.dataTables_info { padding-top:0; padding-bottom: 0; }
    #btn-back, #btn-save { width:100%; }
}


@media all and (max-width:767px) {
    .navbar.fixed-top { padding:0;}
    #nav-no-session { padding:0.15rem 0 0.15rem 16px; }
    .navbar.navbar-dark .navbar-toggler { padding-right:20px; }
    .navbar-nav .nav-item { border-bottom:1px solid rgba(255,255,255,0.2); }
    .navbar-nav .nav-item .nav-link { padding:0.75rem 1rem; color:#e3e3e3 !important; }
    .navbar .dropdown-menu { width:100%; position: relative !important; transition: all 0.3s; background-color: #e6e6ea; }

    .dataTables_filter { text-align:right !important;}

    .modal-lg { max-width: 85%; }

    #tConst th { width:50%; }

}

@media all and (min-width:768px) {
    .modal-dialog { max-width: 50%; }
    .modal-lg { max-width: 78%; }
}

@media all and (min-width:993px) {
    .modal-dialog { max-width: 40%; }
    .modal-lg { max-width: 69%; }
}


@media all and (min-width:1280px) {
    .modal-lg { max-width: 52%; }
}

@media all and (min-width:1600px) {
    .modal-lg { max-width: 42%; }
}