@import url('https://fonts.googleapis.com/css2?family=Quattrocento+Sans:ital,wght@0,400;0,700;1,400;1,700&display=swap');

*:focus {
   box-shadow: none !important;
}
html,body{
   font-family: "Quattrocento Sans", sans-serif !important;
   color: #01313F;
   background: #F5F5F5;
}
h3, .h3 {
   font-size: 31px;
}
.btn-link {
   color: #01313F;
}
.card {
   border: none;
}
.card-header {
   border: none;
   background-color: #03A9F7;
   color: white;
}
.card-header a {
   color: white !important;
   text-decoration: none;
}
.card-header a:hover {
   text-decoration: underline;
   color: white !important;
}
.text-gray-800 {
   color: #01313F !important;
   font-weight: 800;
}
.logo {
   font-size: 0;
   width: 266px;
   height: 83px;
   margin: 0 auto 50px;
}
.logo img {
   width: 100%;
}
.login-title{
   color: white;
   font-weight: 700;
   font-size: 30px;
}
input[type=email],
input[type=password],
input[type=text],
input[type=email]:autofill,
input[type=password]:autofill,
input[type=text]:autofill,
-webkit-input[type=email]:autofill,
-webkit-input[type=password]:autofill,
-webkit-input[type=text]:autofill {
   height: 54px;
   border-radius: 10px !important;
   background-color: white !important;
   font-size: 18px;
   color: black;
   appearance: none;
   border: none;
   padding: 0 25px;
}
input[type=email]::placeholder,
input[type=password]::placeholder,
input[type=text]::placeholder {
   font-size: 18px;
   color: #ABABAB;
   transition: all .5s;
}
.login_btn,
.login_btn:active,
.login_btn:focus {
   font-size: 20px;
   font-weight: bold;
   color: white !important;
   width: 190px;
   height: 54px;
   background-color: #03A9F7 !important;
   border-radius: 100px;
   display: flex;
   align-items: center;
   justify-content: center;
   border: none;
   margin: auto;
}
.login_btn:hover {
   background-color: #01313F !important;
}
.card-footer {
   font-size: 20px;
   font-weight: bold;
   line-height: 1.4;
}
.card.login {
   height: auto;
   width: 388px;
   background: none !important;
   border: none;
}
.card.login .card-header {
   background: none;
   border: none;
}
.card.login .card-footer {
   border: none;
   background: none;
}

.chart-area {
   min-height: unset;
   height: auto;
}
.chart-pie {
   height: auto !important;
   display: flex;
   justify-content: center;
}
.topbar .topbar-divider {
   border-right-color: #ABABAB;
}
.tools span {
   font: bold 13px "Quattrocento Sans", sans-serif;
   color: #ABABAB !important;
}
.tools form {
   height: 26px;
}




.sidebar {
   background-image: linear-gradient(to bottom, #95DEE8, white);
   transition: all .2s;
}
.sidebar.toggled {
   transition: all .2s;
}
.sidebar-brand img {
   width: 109px;
   height: auto;
}
.text-dark {
   color: #01313F !important;
}
.toggle-sidebar button,
a.bg-secondary:hover, a.bg-secondary:focus, button.bg-secondary:hover, button.bg-secondary:focus {
   background: #01313F !important;
}
.toggle-sidebar button:hover {
   background: #01313F !important;
}
.sidebar.toggled .nav-item .nav-link {
   padding: 0.5rem 1rem;
}
.sidebar .nav-item .nav-link span:first-child {
   width: 17px;
   margin: 0 auto 5px;
   vertical-align: text-bottom;
}
.sidebar.toggled .nav-item .nav-link span {
   font-size: 12px;
}
.sidebar .nav-item .nav-link span {
   font-size: 12px;
}
@media (min-width: 768px) {
   .sidebar.toggled .nav-item .nav-link span {
       font-size: 13px;
   }
   .sidebar .nav-item .nav-link span {
      font-size: 15px;
   }
   .sidebar .nav-item .nav-link span:first-child {
      margin-right: 5px;
   }
}
.sidebar.toggled .nav-item .nav-link span:first-child {
   width: 100%;
   margin: 0 0 5px;
}





footer.sticky-footer .copyright {
   line-height: 1;
   font-size: 12px;
   font-weight: bold;
   color: #ABABAB;
}





.apexcharts-tooltip.apexcharts-theme-light .apexcharts-tooltip-title {
   background: #03A9F7 !important;
   border: none !important;
   font-weight: bold;
   color: white;
}
.apexcharts-tooltip.apexcharts-theme-light {
   border: none !important;
}




.form-select {
   font: 15px "Quattrocento Sans", sans-serif;
   color: #01313F;
   border-color: #01313F;
   border-radius: 5px;
   padding-left: 5px;
   padding-right: 5px;
   background-position: right 5px center;
   background-color: #F5F5F5;
   max-width: 287px;
   width: 100% !important;
}
.form-select:focus {
   border-color: #01313F;
   box-shadow: none;
}
.form-select option {
   background-color: #F5F5F5;
   border: none;
}




input[type="date"] {
   font: 12px "Quattrocento Sans", sans-serif;
   color: #ABABAB;
   border: 1px solid #ABABAB;
   border-radius: 5px;
   padding-left: 5px;
   padding-right: 5px;
   background-color: #F5F5F5;
   max-width: 105px;
   height: 20px;
   width: 100% !important;
}
input[type="date"]::-webkit-calendar-picker-indicator {
   opacity: .4;
}
.spinner-border {
   margin-top: 15px;
   border-color: #20E5F6;
   border-right-color: transparent;
}
.border-left-primary {
   border-color: #20E5F6 !important;
}
.border-left-danger {
   border-color: #F40055 !important;
}
.border-left-danger.card {
   background: #FF5757;
}
.border-left-danger.card .spinner {
   border-color: white;
   border-right-color: transparent;
}
.border-left-warning {
   border-color: #FFCB24 !important;
}
.border-left-warning.card {
   background: #FADF6F;
}
.border-left-warning.card .spinner {
   border-color: white;
   border-right-color: transparent;
}
.border-left-success {
   border-color: #2FB373 !important;
}
.border-left-success.card {
   background: #4BD894;
}
.border-left-success.card .spinner {
   border-color: white;
   border-right-color: transparent;
}

.label-fecha {
   color: #ABABAB !important;
}

.dt-button {
   font: 800 18px "Quattrocento Sans", sans-serif;
   color: #01313F;
   border: 1px solid #03A9F7;
   background: white;
   appearance: none;
   padding: 10px;
   border-radius: 5px;
}
#tabla_wrapper .dt-buttons {
   margin-bottom: 5px;
}
.dt-buttons span {
   font-size: 0;
   display: flex;
   align-items: center;
}
#tabla_wrapper select {
   width: 70px !important;
   background-color: #F5F5F5;
}
#tabla_wrapper label {
   font-size: 15px;
   font-weight: bold;
   color: #01313F;
}
#tabla_wrapper input[type=search] {
   font: 15px "Quattrocento Sans", sans-serif;
   color: #01313F;
   border-color: #01313F;
   border-radius: 5px;
   padding-left: 5px;
   padding-right: 5px;
   background-color: #F5F5F5;
   min-height: unset;
   height: 30px;

}
.swipe-table {
   overflow-y: auto;
}
.swipe-table::-webkit-scrollbar {
   height: 4px;
}
.swipe-table::-webkit-scrollbar-thumb {
   background: #ababab;
   border-radius: 100px;
}
.swipe-table::-moz-scrollbar {
   height: 4px;
}
.swipe-table::-moz-scrollbar-thumb {
   background: #ababab;
   border-radius: 100px;
}
.progress-bar {
   border-radius: 100px;
}
.progress-bar.bg-danger {
   background-color: #FF5757 !important;
}
.progress-bar.bg-warning {
   background-color: #FADF6F !important;
}
.progress-bar.bg-success {
   background-color: #4BD894 !important;
}
#ranking h4 {
   color: #01313F;
}
#ranking span {
   color: #01313F;
}


table.dataTable.row-border>tbody>tr>*, table.dataTable.display>tbody>tr>* {
   border: none;
}
#tabla {
   border-radius: 5px;
   overflow: hidden;
}
#tabla tr:nth-child(odd){
   background: #F0F9FF;
}
#tabla tr:nth-child(even){
   background: white;
}
.sorting_1, #tabla td {
   box-shadow: none !important;
   text-align: left;
}
#tabla tr th {
   border: none;
   background: #95DEE8;
   outline: none;
   text-align: left;
}
.dt-orderable-desc span::before {
   content: '' !important;
   background: url(../img/icon-asc.svg) no-repeat;
   width: 11px;
   height: 8px;
   bottom: 53% !important;
   opacity: 1 !important;
}
.dt-orderable-desc.dt-ordering-asc span::before {
   background: url(../img/icon-asc-active.svg) no-repeat;
}
.dt-orderable-desc span::after {
   content: '' !important;
   background: url(../img/icon-desc.svg) no-repeat;
   width: 11px;
   height: 8px;
   top: 53% !important;
   opacity: 1 !important;
}
.dt-orderable-desc.dt-ordering-desc span::after {
   background: url(../img/icon-desc-active.svg) no-repeat;
}
.scroll-to-top {
   background: rgb(3 169 247 / 50%) !important;
}
.dt-paging-button {
   box-shadow: none !important;
   border: none !important;
}
.dt-paging-button:hover {
   background: none !important;
}
.dt-paging-button .page-link:hover {
   background-color: none !important;
   border-color: #01313F;
}
.dt-paging-button .page-link {
   border: 1px solid #7a9299;
   color: #03A9F7;
   background: white !important;
   border-radius: 5px !important;
}
.dt-paging-button.active .page-link {
   background: #03A9F7 !important;
   border-color: #01313F !important;
}