/* Definición de variables */
:root {
  --primary-color: #4622c8;  /* Color primario #009be0; #7b49a5 lila* #3c1bb0 #4622c8*/
  --success-color: #18b28c;  /* Color de éxito #18b28c; */
  --text-color: #fff;        /* Color del texto #fff;*/
  --secondary-bg-color: #222d32;/* Color secundario de fondo #222d32 / #f5f5f5*/
  --hover-opacity: 0.95;      /* Opacidad al hacer hover 0.85 0.9 */
  --white-color:#FAFBFD;
  --info-color:#009be0; 
}
.sidebar-menu.tree .fa {
 font-size: 15px;
}

.breadcrumb {
    background-color: #fff;
}

.breadcrumb a {
    color: var(--primary-color);
}

/* text */
.text-info {
  color: var(--info-color);
}
.text-success {
  color: var(--success-color);
}
.form-group.has-success label {
  color: var(--success-color);
}
.control-label {
  font-weight: 600;
  font-size: 14px;
}
.modal-title {
  font-weight: 600;
}

/* Aplicación de variables en el resto del CSS */
.content {
  padding: 2rem;
}

.content-header {
  padding: 2rem 2rem 0 2rem;
}
/* calendar */

.box.box-info {
    border-top-color: var(--primary-color);
}

div.datedropper.primary:before, div.datedropper.primary .pick-submit, div.datedropper.primary .pick-lg-b .pick-sl:before, div.datedropper.primary .pick-m, div.datedropper.primary .pick-lg-h {
    background-color: var(--primary-color);
}

div.datedropper.primary .pick-y.pick-jump, div.datedropper.primary .pick li span, div.datedropper.primary .pick-lg-b .pick-wke, div.datedropper.primary .pick-btn {
    color: var(--primary-color);
}

.skin-blue .main-header .navbar {
  background-color: var(--primary-color);
}

.box.box-primary {
  border-top-color: var(--primary-color);
}

.bg-primary {
  background-color: var(--primary-color);
}

.btn-primary {
  background-color: var(--primary-color);
  border-color: var(--text-color);
}

.btn {
  border-radius: 4px;
  font-size: 13px;
}

.btn-primary:hover,
.btn-primary:active,
.btn-primary.hover {
  background-color: var(--primary-color);
  opacity: var(--hover-opacity);
  border-color: var(--text-color);
}

.btn-primary.active.focus, .btn-primary.active:focus, .btn-primary.active:hover, .btn-primary:active.focus, .btn-primary:active:focus, .btn-primary:active:hover, .open>.dropdown-toggle.btn-primary.focus, .open>.dropdown-toggle.btn-primary:focus, .open>.dropdown-toggle.btn-primary:hover {
    color: #fff;
    background-color: var(--primary-color);
    opacity: var(--hover-opacity);
    border-color: var(--text-color);
}

.bg-light-blue-gradient {
  background: var(--primary-color) !important;
  color: #fff;
  
}
.small-box>.small-box-footer {
    border-radius: 0 0 1.5rem 1.5rem;
}
.bg-aqua, .callout.callout-info, .alert-info, .label-info, .modal-info .modal-body {
    background-color:  var(--info-color) !important;
}
.btn-success {
  background-color: var(--success-color);
  border-color: var(--success-color);
}

.btn-success:hover,
.btn-success:active,
.btn-success.hover {
  background-color: var(--success-color);
  opacity: var(--hover-opacity);
  border-color: var(--success-color);
}

.btn-success.active,
.btn-success:active,
.open > .dropdown-toggle.btn-success {
  background-color: var(--success-color);
  opacity: var(--hover-opacity);
  border-color: var(--success-color);
}

.btn-success.focus,
.btn-success:focus {
  background-color: var(--success-color);
  opacity: var(--hover-opacity);
  border-color: var(--success-color);
}

.btn-success.active.focus,
.btn-success.active:focus,
.btn-success.active:hover,
.btn-success:active.focus,
.btn-success:active:focus,
.btn-success:active:hover,
.open > .dropdown-toggle.btn-success.focus,
.open > .dropdown-toggle.btn-success:focus,
.open > .dropdown-toggle.btn-success:hover {
  color: var(--text-color);
  background-color: var(--success-color);
  border-color: var(--success-color);
}

.bg-green,
.callout.callout-success,
.alert-success,
.label-success,
.modal-success .modal-body {
  background-color: var(--success-color) !important;
}

.form-control[disabled],
.form-control[readonly],
fieldset[disabled] .form-control {
  background-color: #e9ecef !important;
  opacity: 0.7;
  background-image: none !important;
}

.skin-blue .sidebar-menu > li.active > a {
  border-left-color: var(--primary-color);
  /* text-align: center; */
}
.skin-blue .sidebar-menu > li.menu-open > a {
    border-left-color: var(--primary-color);
    /* text-align: center; */
}

/* .skin-blue .main-header li.user-header {
  background-color: var(--primary-color);
} */

.skin-blue .main-header .logo {
 /*  background-color: var(--secondary-bg-color); */
 background-color: var(--primary-color);
}
.skin-blue.sidebar-collapse .main-header .logo {
  background-color: var(--primary-color);
}

.username a {
  color: #22468f;
}

.widget-user-2 .widget-user-header {
  border-radius: 2rem 2rem 0 0;
}

.profile-user-img {
  padding: 2px;
  border: 3px solid var(--text-color);
}

.navbar-nav > .user-menu > .dropdown-menu > li.user-header > img {
  border-color: var(--text-color);
  padding: 2px;
}

/* user */

.dropdown-toggle.user {
  padding: 15px 3rem;
}

/* logo */

.main-header {
  font-family: "Source Sans Pro", "Helvetica Neue", Helvetica, Arial, sans-serif;
}

.skin-blue .main-header .logo .logo-max {
  display: block !important;
  font-size: 1.7rem;
  font-family: "Source Sans Pro", "Helvetica Neue", Helvetica, Arial, sans-serif;
}

.skin-blue .main-header .navbar .nav > li > a:hover,
.skin-blue .main-header .navbar .nav > li > a:active,
.skin-blue .main-header .navbar .nav > li > a:focus,
.skin-blue .main-header .navbar .nav .open > a,
.skin-blue .main-header .navbar .nav .open > a:hover,
.skin-blue .main-header .navbar .nav .open > a:focus,
.skin-blue .main-header .navbar .nav > .active > a {
  color: var(--text-color);
  background-color: var(--primary-color);
}

.skin-blue .main-header li.user-header {
    background-color: var(--primary-color);
}

/* Hover */

.skin-blue .main-header .logo:hover {
  background-color: var(--primary-color);  
  opacity: var(--hover-opacity);
}

.skin-blue .main-header .navbar .sidebar-toggle:hover {
  background-color: #ffffff10;
  opacity: var(--hover-opacity);
}

.skin-blue .main-header .navbar .nav > li > a:hover {
  background-color: #ffffff10;
  opacity: var(--hover-opacity);
}

.nav .open > a,
.nav .open > a:focus,
.nav .open > a:hover {
  background-color: var(--secondary-bg-color);
  border-color: var(--primary-color);
}

/* box */

.box {
  border-radius: 1.5rem;
  padding: 10px;
  box-shadow: 0px -2px 10px 4px rgba(0, 0, 0, .06);
}

.box-body {
  padding: 10px;
}

.breadcrumb {
    margin-bottom: 10px;
}

@media (min-width: 768px) {
  .sidebar-mini.sidebar-collapse .main-header .logo > .logo-mini {
    font-size: 16px;
  }
  .main-sidebar {
    box-shadow: 1px 0 16px rgba(0, 0, 0, 0.1);
  }
}

/* cursor */
.treeview a {
  cursor: pointer;
}

/* inputs */
.control-label {
  margin-bottom: 5px;
}

input.form-control.datepicker,
input.form-control.input-sm {
  height: 36px;
  line-height: 1.3;
  border-radius: 4px;
}

.input-group span.input-group-addon {
  border-radius: 4px 0 0 4px;
  border-radius: 4px;
}

select.form-control.input-sm {
  height: 36px;
  line-height: 36px;
  border-radius: 4px;
  -moz-appearance: none;
  -webkit-appearance: none;
  appearance: none;
  background-color: #fff;
  background-image: url("data:image/svg+xml;charset=US-ASCII,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20width%3D%22292.4%22%20height%3D%22292.4%22%3E%3Cpath%20fill%3D%22%23007CB2%22%20d%3D%22M287%2069.4a17.6%2017.6%200%200%200-13-5.4H18.4c-5%200-9.3%201.8-12.9%205.4A17.6%2017.6%200%200%200%200%2082.2c0%205%201.8%209.3%205.4%2012.9l128%20127.9c3.6%203.6%207.8%205.4%2012.8%205.4s9.2-1.8%2012.8-5.4L287%2095c3.5-3.5%205.4-7.8%205.4-12.8%200-5-1.9-9.2-5.5-12.8z%22%2F%3E%3C%2Fsvg%3E"),
    linear-gradient(to bottom, #ffffff 0%, #fff 100%);
  background-repeat: no-repeat, repeat;
  background-position: right 0.7em top 50%, 0 0;
  background-size: 0.65em auto, 100%;
  line-height: 1.3;
}

select.form-control.input-sm::-ms-expand {
  display: none;
}

/* input file */

.label-span {
  text-align: center;
}

.file-select {
  position: relative;
  display: inline-block;
}

.file-select::before {
  background-color: var(--primary-color);
  color: var(--text-color);
  display: flex;
  justify-content: center;
  align-items: center;
  border-radius: 8px;
  content: "Seleccionar";
  position: absolute;
  left: 0;
  right: 0;
  top: 0;
  bottom: 0;
  max-width: 50%;
  margin: auto;
}

.file-select input[type="file"] {
  opacity: 0;
  width: 100%;
  height: 32px;
  display: inline-block;
  cursor: pointer;
}

#src-file1::before {
  content: "Selecciona Archivo";
}
/* tablas */
.contentEstado {
  text-align: center;
}

.table-responsive thead th {
  background-color: var(--primary-color) !important;
}

.table-responsive th:first-of-type {
  border-radius: 8px 0 0 0;
}

.table-responsive th:last-of-type {
  border-radius: 0 8px 0 0;
}

tbody > tr:nth-of-type(odd) {
  background-color: #f9f9f9;
}

tbody > tr:hover {
  background-color: #f5f5f5;
}

.dropdown-menu > li > a {
  color: #212529;
}
.dropdown-menu > li > a:hover {
  background-color: #e1e3e9;
  color: #000;
}

tbody tr[role=row] td {
  text-align: center;
}
table.dataTable thead > tr > th {
  padding-right: 0;
}

#TotalComprobante {
  font-size: 16px;
}

.panel-primary>.panel-heading {
  color: var(--text-color);
  background-color: var(--primary-color);
  border-color: var(--primary-color);
}

.list-group-item.active,
.list-group-item.active:focus,
.list-group-item.active:hover {
  z-index: 2;
  color: var(--text-color);
  background-color: var(--primary-color);
  border-color: var(--primary-color);
}

.skin-blue .wrapper, .skin-blue .main-sidebar, .skin-blue .left-side {
    background-color: var(--text-color);
}

.content-header>h1 {
    margin: 0;
    font-size: 24px;
    font-weight: 800;
    line-height: 1.6;
    text-transform: uppercase;
}
.content-wrapper {
    background-color: var(--white-color);
}

/* select medicos */
.select2-container--default .select2-selection--multiple .select2-selection__choice {
  background-color: var(--secondary-bg-color);
  border: 1px solid var(--secondary-bg-color);
  opacity: 0.75;
}    
.badge {
    font-size: 11px;
    font-weight: 400;
}

/* look and field */
aside.main-sidebar {
    position: fixed;
}
.main-header .sidebar-toggle {
    padding: 15px 20px;
}
.sidebar-mini:not(.sidebar-mini-expand-feature).sidebar-collapse .sidebar-menu>li:hover>a>span:not(.pull-right), .sidebar-mini:not(.sidebar-mini-expand-feature).sidebar-collapse .sidebar-menu>li:hover>.treeview-menu {
    display: block !important;
    position: absolute;
    width: 180px;
    left: 69px;
    text-align: justify;
}

.skin-blue .sidebar-menu>li:hover>a, .skin-blue .sidebar-menu>li.active>a, .skin-blue .sidebar-menu>li.menu-open>a {
    color: var(--primary-color);
    background: #fff;
}
.skin-blue .sidebar-menu>li>.treeview-menu {
    margin: 0 1px;
    color: var(--primary-color);
    background: #fff;
}
.skin-blue .sidebar-menu .treeview-menu>li.active>a, .skin-blue .sidebar-menu .treeview-menu>li>a:hover {
    color: var(--primary-color);
}

.sidebar-mini.sidebar-collapse .main-sidebar {
    position: fixed;
}
.sidebar-menu>li>a {
    padding: 15px;
    display: block;
    text-align: justify;
}
.sidebar-mini:not(.sidebar-mini-expand-feature).sidebar-collapse .sidebar-menu>li:hover>a>span {
    padding: 15px;
}
.sidebar-mini:not(.sidebar-mini-expand-feature).sidebar-collapse .sidebar-menu>li:hover>.treeview-menu {
    top: 50px;
}
@media (min-width: 768px) {
    .sidebar-mini.sidebar-collapse .main-sidebar {
      width: 70px !important;
      z-index: 850;
      padding-top: 50px;
    }
    .sidebar-mini.sidebar-collapse .content-wrapper, .sidebar-mini.sidebar-collapse .right-side, .sidebar-mini.sidebar-collapse .main-footer {
      margin-left: 70px !important;
      z-index: 840;
    }
    .sidebar-mini.sidebar-collapse .main-header .navbar {
      margin-left: 70px;
    }
    .sidebar-mini.sidebar-collapse .main-header .logo {
      width: 70px;
    }
    .sidebar-mini.sidebar-collapse .sidebar-menu>li>a {
      text-align: center;
    }
    
}
@media (max-width: 767px) {
    .main-sidebar {
        padding-top: 0px;
    }
}

/* modales */
.modal-content {
    padding: 1rem;
    border-radius: 1rem;
}

/* Pagination */
.pagination>.active>a, .pagination>.active>a:focus, .pagination>.active>a:hover, .pagination>.active>span, .pagination>.active>span:focus, .pagination>.active>span:hover {
    z-index: 3;
    color: #fff;
    cursor: default;
    background-color: var(--primary-color);
    border-color: var(--primary-color);
}

/*Reportes  */
.small-box {
    border-radius: 2px;
    position: relative;
    display: block;
    margin-bottom: 20px;
    box-shadow: 0 1px 1px rgba(0, 0, 0, 0.1);
    border-radius: 1.5rem;
}

/* btn */

.navbar-nav>.user-menu>.dropdown-menu>.user-footer .btn-default {
    border-radius: 4px;
}
/* loguin */
/* .top-content .text h1 {
    color: var(--primary-color);
}
.form-bottom form button.btn {
    background-color: var(--primary-color);
} */

/* calendar */
#calendar-dental {
    min-width: 750px;
}
table.dataTable {
    min-width: 750px;
}
@media (max-width: 768px) {
  table.dataTable {
    min-width: 1050px;
  }
  
  .table-responsive {
    border: none;
  }
  .box-body {
    padding: 10px 0;
  }
  .box-header {
    padding: 10px 0;
  }
  .input-group {
    width: 100%;
  }
  .file-select {
    width: 100%;
  }
  .label-register-btn{
    display:none !important;
  }
}

.modal {
    background: rgba(255, 255, 255, 0.05);
    backdrop-filter: blur(2px);
}

@media (max-width: 767px) {
  .sidebar{
    margin-top: 50px;
  }
  .navbar-custom-menu>.navbar-nav>li>.dropdown-menu {
      right: 0%;
  }
}
div.dataTables_wrapper div.dataTables_length select {
    width: 50px;
    display: inline-block;
    height: 30px;
}

/* Citas del día */
table.table.table-striped thead th{
  color: white;
  text-align: center;
}
#ModalMensajeFlash > * {
  text-align: center;
}
.box-datos{
  padding: 1rem 0;
}

/* login */
@media (max-width: 1024px) {
  .imageContainer{
    display: none !important;
  }
  #content-calendar {
    overflow-x: scroll;
  }
  .input-group {
    width: 100%;
  }
  .file-select {
    width: 100%;
  }
}