body{ background-color: #F7F7F7; }

input::-webkit-outer-spin-button, input::-webkit-inner-spin-button { -webkit-appearance: none; margin: 0; }
input[type=number] { -moz-appearance: textfield; }

.page{ padding: 3px 3px 0 73px; }
@media (max-width: 576px) {
    .page{ padding: 3px 3px; }
}

#blocking {
    position: fixed;
    z-index: 9998;
    top: 0;
    right: 0;
    bottom: 0;
    left: 0;
    background: white;
    opacity: .8;
}

a.nav-link, a.nav-link:hover, a.nav-link:focus, a.nav-link:active {
    text-decoration: none; !important;
    color: inherit; !important;
}

.text-xl{ font-size: 18px; }
.text-lg{ font-size: 16px; }
.text-md{ font-size: 14px; }
.text-sm{ font-size: 12px; }

.bl-yellow{ border-left: 2px solid #FFC107; }
.bl-green{ border-left: 2px solid #4CAF50; }
.bl-blue{ border-left: 2px solid #5dade2; }
.bl-danger{ border-left: 2px solid #e74c3c; }

.field > input{ padding-left: 16px; }

.h7{ font-size: 12px; }
.vertical-center {
    display: flex;
    align-items: center;
}
.hide{ display: none }
.hand{ cursor: pointer; }
.move{ cursor: move; }
.edit{ color: 	#ffcc00; font-size: 25px; bottom: .3em; right: .3em; position: absolute;  z-index: 10; cursor: pointer; }
.input-group-text{ background-color: white; }


.bootstrap-tagsinput{ display: block; }
.bootstrap-tagsinput >.tag { color:#FDFEFE; background-color:#808B96; border-radius:5px; padding: 0 4px 2px 4px; }
.form-floating > .bootstrap-tagsinput { padding-top: 2.5rem; padding-bottom: 0.375rem; }
.form-floating > .bootstrap-tagsinput > input::placeholder { color: transparent; }

.form-floating .select2-container--bootstrap-5 .select2-selection { height: calc(3.5rem + 2px); padding: 2.12rem 0.75rem; font-size: 1rem; line-height: 1.5; }
.select2-container--bootstrap-5 .select2-selection--single { background-image: url(""); }

.form-floating .select2-container .select2-selection--multiple { height: calc(3.5rem + 2px); padding: 2.5rem 0.75rem; font-size: 1rem; line-height: 1.5; }
.select2-container--default .select2-selection--multiple .select2-selection__choice { background-color: #808B96; color: #fff; border: none; padding: 0.25em 0.5em; margin: 0.25em;  }
.select2-container--default .select2-selection--multiple .select2-selection__choice__remove { position: relative; color: #fff; border: none; padding: 0; font-size: 0.975rem; }
.select2-container--default .select2-selection--multiple .select2-selection__choice__remove:hover { color: #fff; background-color: #808B96; }


.field span.select2-selection__arrow { display: none; }
.field span.select2-selection__placeholder { padding-left: 4px; }
.form-input{
    border: .05em solid #ced4da;
    border-radius: .2em;
    padding: 5px 0px 2px 8px;
    font-size: 14px;
    color: #424242;
}
.field{
    position:relative; display: -webkit-box; display: -ms-flexbox; display: flex;
}
.field i.fat { color: #424242; top: .7em; right: .5em; position: absolute;  z-index: 10; cursor: pointer; }
.field i.thin { color: #424242; top: .7em; right: .65em; position: absolute;  z-index: 10; cursor: pointer; }
.field input::placeholder{ color: #757575; }

.fa-asterisk{
    color: 	#cc3300; font-size: 9px; top: .3em; left: .4em; position: absolute;  z-index: 10;
}
.fa-angle-down, .fa-angle-up{
    color: 	#000000; font-size: 14px; top: 1.1em; right: .7em; position: absolute;  z-index: 10; font-weight: 900;
}
.fa-plus, .fa-minus{
    color: 	#000000; font-size: 10px; top: 1.5em; right: .7em; position: absolute;  z-index: 10; font-weight: bold;
}
.info{ color: 	#0000FF; top: 0; right: -.7em; position: absolute;  z-index: 10; cursor: pointer; }
.input_empty { border: 0.1em solid #E74C3C; border-radius: 5px }

.btn-alert-primary{ background-color: #CFE2FF; color: #042F69; font-weight: bold; }
.btn-alert-primary:hover, .btn-alert-primary:active{ background-color: #042F69; color: #CFE2FF; font-weight: bold; }
.btn-alert-success{ background-color: #D1E7DD; color: #01321D; font-weight: bold; }
.btn-alert-success:hover, .btn-alert-success:active{ background-color: #01321D; color: #D1E7DD; font-weight: bold; }

.form-control::-webkit-input-placeholder { color: #A0A4A0; !important; }
.form-control:-moz-placeholder { color: #A0A4A0; opacity: 1; !important; }
.form-control::-moz-placeholder { color: #A0A4A0; opacity: 1; !important; }
.form-control:-ms-input-placeholder { color: #A0A4A0; !important; }
.form-control::-ms-input-placeholder { color: #A0A4A0; !important; }
.form-control::placeholder { color: #A0A4A0; !important; }
.form-control { color: #6E6E6E; padding-left: 15px }
.form-control.others, option.others { color:#000; }

.dt-start { text-align: left; }
.dt-end { text-align: right; }
.dt-center { text-align: center; }

select { -webkit-appearance: none; -moz-appearance: none; text-indent: 1px; text-overflow: ''; }
input[type="date"]::-webkit-inner-spin-button,
input[type="date"]::-webkit-calendar-picker-indicator { display: none; -webkit-appearance: none; }
.select2-selection__arrow{ display: none; }
.select2-selection .select2-selection__rendered .select2-selection__placeholder{ color:#A0A4A0; !important; padding-left: .3em }

.field span.select2-selection__arrow { display: none; }
.field span.select2-selection__placeholder { padding-left: 4px; }

.input-icon{
    position:relative; display: -webkit-box; display: -ms-flexbox; display: flex;
}
.input-icon i.fat { color: #424242; top: .7em; right: .5em; position: absolute;  z-index: 10; cursor: pointer; }
.input-icon i.thin { color: #424242; top: .7em; right: .7em; position: absolute;  z-index: 10; cursor: pointer; }
.input-icon i.fa-eye-slash { right: .65em; }

.image-upload>input { display: none; }

.table td, th { vertical-align: middle; }

.btn-group-xs > .btn, .btn-xs { padding: .25rem .4rem; font-size: .875rem; line-height: .5; border-radius: .2rem; }

video { display: block; margin: 10px auto; max-width: 100%; }

.thumbnail { border: 1px solid #ccc; padding: 2px; margin: 10px;  width: 230px; }
.image-container { display: inline-block; position: relative; }
.btnDeleteImage { position: absolute; bottom: 15px; right: 15px; }

.flash {
    background: white;
    opacity: 0;
    pointer-events: none;
    animation: flash-animation 0.5s ease-out;
}
@keyframes flash-animation { 0% { opacity: 1; } 100% { opacity: 0; } }

#menu_vertical{
    position:fixed;
    top:0;
    bottom:0;
    left:0;
    width:70px;
    height: 100%;
    overflow:hidden;
    -webkit-transition:width .2s linear;
    transition:width .2s linear;
    z-index: 9999;
    box-shadow: 0 0 4px gray;
}
#menu_vertical #menu_nav a{
    position:relative;
    text-decoration:none;
    color:#000000;
    font-size: 13px;
    display:table;
    width:250px;
    height: 45px;
}
#menu_vertical #menu_nav .fas, #menu_vertical #menu_nav .fab, #menu_vertical #menu_nav .far {
    position: relative;
    width: 70px;
    height: 36px;
    text-align: center;
    top:12px;
    font-size:20px;
}
#logo img{
    position: relative;
    width: 70px;
    padding: .4em;
    text-align: center;
}
#menu_vertical #logo a{
    position:relative;
    text-decoration:none;
    display:table;
    width:250px;
    color: #000000;
    font-size: 20px;
    font-weight: bold;
    border-bottom: .05em solid #616161;
}
#menu_vertical #logo i{
    position: absolute;
    font-size: 2em;
    top: .4em;
    right: .2em;
    z-index: 10;
    cursor: pointer;
;
}
#menu_vertical .nav-text  {
    position:relative;
    top:12px;
    font-size: 16px;
}
#menu_vertical:hover{
    width:250px;
}
#menu_vertical #menu_nav a:hover{
    color:#fff;
    opacity: 1;
}
#menu_vertical #menu_nav a.active{ background: #ffffff; color: #000; }
.sub_meu_nav{
    padding-left: 20px;
}
#menu_horizontal{
    width: 100%;
    height: 71px;
    border-bottom: .07em solid #616161;
    padding-left: 10px;
    padding-right: 20px;
}
#menu_horizontal a{
    color: dimgrey;
}
@media (max-width: 576px) {
    .content{
        padding: 10px;!important;
    }
}

#body_login{
    display:flex;
    height: 100vh;
    justify-content: center;
    align-items: center;
    background-color: #cacfd2;
}
.login-title {
    font-size: 25px;
}
.login-box {
    width: 360px;
    border-radius: .5em;
}
@media (max-width: 576px) {
    .login-box {
        margin-top: .5rem;
        width: 90%;
    }
}
.login-card-body {
    background: #ffffff;
    border-top: 0;
    color: #666;
    padding: 20px;
    border-radius: .5em;
}
.btn-entry:hover{ background-color: transparent; }

.dataTables_filter{
    font-size: 13px;
}
.dataTables_info{
    font-size: 12px;
    color: grey;
}
.pagination li a, .pagination li{
    font-size: 10px;
    color: grey;
}
.pagination li.active a {
    background-color: grey;
    border: 1px solid grey;
    color: #ffffff;
}
@media (max-width: 576px) {
    .pagination li a, .pagination li{ font-size: 9px; }
    #tblInputsAdministrator input{ width: 85px; }
}

.spinner-print {
    position: fixed;
    z-index: 999999;
    top: 0;
    right: 0;
    bottom: 0;
    left: 0;
    background: #ffffff;
    opacity: 1;
}
.spinner-wrapper {
    position: fixed;
    z-index: 999999;
    top: 0;
    right: 0;
    bottom: 0;
    left: 0;
    background: #ffffff;
    opacity: .8;
}
.spinner {
    position: absolute;
    top: 50%;
    left: 50%;
    width: 3.75rem;
    height: 1.25rem;
    margin: -0.625rem 0 0 -1.875rem;
    text-align: center;
}
.spinner > div {
    display: inline-block;
    width: 1rem;
    height: 1rem;
    border-radius: 100%;
    -webkit-animation: sk-bouncedelay 1.4s infinite ease-in-out both;
    animation: sk-bouncedelay 1.4s infinite ease-in-out both;
}
.spinner .bounce1 {
    -webkit-animation-delay: -0.32s;
    animation-delay: -0.32s;
}
.spinner .bounce2 {
    -webkit-animation-delay: -0.16s;
    animation-delay: -0.16s;
}
@-webkit-keyframes sk-bouncedelay {
    0%, 80%, 100% { -webkit-transform: scale(0); }
    40% { -webkit-transform: scale(1.0); }
}
@keyframes sk-bouncedelay {
    0%, 80%, 100% {
        -webkit-transform: scale(0);
        -ms-transform: scale(0);
        transform: scale(0);
    } 40% {
          -webkit-transform: scale(1.0);
          -ms-transform: scale(1.0);
          transform: scale(1.0);
      }
}