body{font-size: 13px;}
.add-background {
    height: 100%;
    /* background: linear-gradient(360deg, #fff 57%, var(--primary) 0%); */
}
.text-gray::placeholder {
    color: gray !important;
}
.buscador{
    height: 36px;
    max-width: 400px !important;
}
input.buscador::placeholder{
  font-style: italic;
}
.logo-brand img{
    width: 30px;
}
.logo-brand h2{
    font-weight: 700;
}
.border-none{
    border: none !important;
}
.tbody-p-0 tr td{
  padding: 4px !important;
}
.form-control, .form-input{
    box-shadow: 1px 1px 2px 1px rgba(0,0,0,0.05) !important;
    border: 0;
}
.form-row.form-separator{padding-left: 5px; border-bottom: 1px solid #ddd;margin-bottom: 10px;}
label{
    font-weight: 700;
}
.button-table{
    border:none; 
    text-decoration:none;
    background:none;
    outline:0;
    cursor: pointer;
}
.button-table:hover i{
    color: #494f54!important;
}

.sidepanel  {
    width: 0;
    position: fixed;
    z-index: 2;
    height: 100vh;
    top: 0;
    right: 0;
    background-color: #f8f9fe;
    box-shadow: 0 0 2rem 0 rgb(136 152 170 / 15%) !important;
    overflow-x: hidden;
    transition: 0.5s;
    padding-top: 60px;
  }
  
  .sidepanel a {
    padding: 8px 8px 8px 32px;
    text-decoration: none;
    font-size: 25px;
    color: #333;
    display: block;
    transition: 0.3s;
  }
  
  .sidepanel a:hover {
    color: rgb(114, 114, 114);
  }
  
  .sidepanel .closebtn {
    position: absolute;
    top: 0;
    right: 25px;
    font-size: 36px;
  }

  .navbar-vertical.navbar-expand-md.fixed-left{z-index: 3;}
  .navbar-vertical.navbar-expand-md .navbar-nav .nav-link{padding: 0.20rem 1.5rem;}
  .navbar-vertical.navbar-expand-md .navbar-nav .nav .nav-link{font-size: 13px; padding-left: 2.75rem; color: #6b6b6b;}
  .nav-link-text{font-size: 13px; color: #6b6b6b;}
  .navbar-search-dark .form-control{box-shadow: none !important;}

  .ml-lg-auto, .mx-lg-auto{margin-bottom: 0px !important;}
  .main-content{background: linear-gradient(180deg, var(--primary) 400px, #f8f9fe 0%); min-height: 100vh;}


  .table thead th, .table thead td{border-top: 0;border-top: 0;color: #939393;font-weight: normal;}
  .main-content > .card{border: 0; box-shadow: 1px 1px 5px 2px rgba(50,50,50,0.05) !important;}
  /* .card-body{padding: 0;} */
  .card-body .card-body{padding: 1.5rem; background-color: #f9f9f9;}
  .card-footer{min-height: 70px;}

  .footer{background: transparent;}
  .text-capital{
      text-transform: capitalize;
  }
  .badgee{
    position: absolute;
    height: 20px;
    width: 20px;
    right: -8px;
    top: -3px;
    text-align: center;
    line-height: 17px;
    font-size: 10px;
    border-radius: 50%;
    font-weight: 800;
}
.shadow-sm {
    display:none;
}
.swal2-popup.swal2-toast .swal2-title{
    margin: 0.4em;
}
.table-responsive{
    min-height: 170px;
}
.cursor-pointer{
    cursor: pointer;
}
ul.ui-autocomplete {
    z-index: 1100;
}
/* MENU CIRCULAR */
.menu{
    position: absolute;
    bottom: 20px;
    right: 20px;
    width:200px;
    height:200px;
    display: flex;
    justify-content: center;
    align-items: center;
}
.menu li{
    position:absolute;
    list-style: none;
    left: 0;
    transform-origin: 100px;
    transition: .5s;
    transition-delay: calc(.1s * var(--i));
    transform: rotate(0deg) translateX(80px);
}
.menu.active li{
    transform: rotate(calc(360deg / 8 * var(--i)));
}
.menu li a{
    display: flex;
    justify-content: center;
    align-items: center;
    width:40px;
    height:40px;
    background:#fff;
    border-radius:50%;
    transform: rotate(calc(360deg / -8 * var(--i)));
    box-shadow: 0px 3px 4px rgba(0,0,0,0.15);
}
.toggle{
    position:absolute;
    width:60px;
    height:60px;
    background: #fff;
    display: flex;
    justify-content: center;
    align-items: center;
    z-index: 10000;
    border-radius: 50%;
    cursor: pointer;
    box-shadow: 0px 0px 4px rgba(0,0,0,0.15);
    font-size: 2em;
    transition: transform 1.3s;
}
.menu.active .toggle{
    transform: rotate(315deg);
}
.selectize-input{
    background: #fff !important;
    box-shadow: 1px 1px 2px 1px rgb(0 0 0 / 5%) !important;
    border: 0 !important;
}
.selectize-input>input::placeholder{
    color: #8898aa !important;
}
.name{
    color: #8898aa !important;
}
.form-control-prepend{
    border-top-left-radius: 0;
    border-bottom-left-radius: 0;
    height: calc(2.2rem + 2px);
    border: none;
    box-shadow: 1px 1px 2px 1px rgb(0 0 0 / 5%) !important;
}
.form-control-prepend.readonly{
  background-color: #e9ecef;
}
.height-form-control{
  height: calc(2.2rem + 2px);
  padding: 0.355rem 1.25rem;
}
.modal-xl{
  max-width: 90% !important;
}
.hover-danger:hover{
  color: var(--danger) !important;
}
.material-switch > input[type="checkbox"] {
  display: none;   
}

.material-switch > label {
  cursor: pointer;
  height: 0px;
  position: relative; 
  width: 40px;  
}

.material-switch > label::before {
  background: rgb(0, 0, 0);
  box-shadow: inset 0px 0px 10px rgba(0, 0, 0, 0.5);
  border-radius: 8px;
  content: '';
  height: 16px;
  margin-top: -8px;
  position:absolute;
  opacity: 0.3;
  transition: all 0.4s ease-in-out;
  width: 40px;
}
.material-switch > label::after {
  background: rgb(255, 255, 255);
  border-radius: 16px;
  box-shadow: 0px 0px 5px rgba(0, 0, 0, 0.3);
  content: '';
  height: 24px;
  left: -4px;
  margin-top: -8px;
  position: absolute;
  top: -4px;
  transition: all 0.3s ease-in-out;
  width: 24px;
}
.material-switch > input[type="checkbox"]:checked + label::before {
  background: var(--primary);
  opacity: 0.5;
}
.material-switch > input[type="checkbox"]:checked + label::after {
  background: var(--primary);
  left: 20px;
}
.alert-absolute{
  position: absolute;
  top: 0px;
  left: 13px;
  z-index: 99999;
}
.d-contents{
  display: contents;
}
.d-grid{
  display: grid !important;
}
.form-control.error, .form-input.error{
  border:1px solid var(--danger) !important;
}
.drag{
  cursor:  grab;
}
tr.over{
  background-color: #f2f2f2;
  border: 2px dotted #ccc;
}
.skeleton-item {
    background: #DEDEE2;
    border-radius: 4px;
    position: relative;
    overflow: hidden;
  }
  .skeleton-item::after {
    content: "";
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: linear-gradient(90deg, #DEDEE2, #e9e9ec, #DEDEE2);
    animation: skeleton-shimmer 1.6s ease-in-out infinite;
  }
  
  .skeleton-item-dark {
    background: #0E4A8E;
    border-radius: 4px;
    position: relative;
    overflow: hidden;
  }
  .skeleton-item-dark::after {
    content: "";
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: linear-gradient(90deg, #0E4A8E, #1054a1, #0E4A8E);
    animation: skeleton-shimmer 1.6s ease-in-out infinite;
  }
  
  @keyframes skeleton-shimmer {
    0% {
      transform: translate3d(-100%, 0, 0);
    }
    100% {
      transform: translate3d(100%, 0, 0);
    }
  }
  .skeleton-image {
    width: 100%;
    height: 264px;
  }
  
  .skeleton-title {
    width: 40%;
    height: 24px;
    margin: 16px 8px 32px;
  }
  
  .skeleton-copy-full {
    width: 100%;
    height: 16px;
  }

  .skeleton-list-item {
    height: 15px;
    padding: 10px;
  }
  
  .skeleton-copy-end {
    width: 64%;
    height: 16px;
    margin: 16px 8px 0;
  }

/* LOADING */
.lds-dual-ring.active {
  display: inline-block;
  position: fixed;
      top: 50%;
      left: 50%;
      z-index: 1050;
      transform: translate(-50%, -50%);
  }

  .lds-dual-ring.active:after {
      content: " ";
      display: inherit;
      width: 64px;
      height: 64px;
      margin: 8px;
      border-radius: 50%;
      border: 6px solid var(--primary);
      border-color: var(--primary) transparent rgb(87, 87, 87) transparent;
      animation: lds-dual-ring 1.2s linear infinite; 
  }

  @keyframes lds-dual-ring {
      0% {
          transform: rotate(0deg);
      }
      100% {
          transform: rotate(360deg);
      }
  }

  #loading-background {
      display: none;
      position: fixed;
      top: 0;
      left: 0;
      width: 100%;
      height: 100%;
      background-color: black;
      opacity: .50;
      -webkit-opacity: .5;
      -moz-opacity: .5;
      filter: alpha(opacity=50);
      z-index: 1050;
  }

  #loading-background.active {
      display: block;
      overflow-y: auto;
  }

  .selectize-control.form-control{
    box-shadow: none !important;
  }
  .selectize-input{
    height: calc(2.2rem + 2px);
    border-radius: 0.375rem;
  }

  .notificacion-content{
    display: flex;
    align-items: center;
    max-width: 30rem;
}
.notificaciones-item{
    width: 100%;
}
.ow {
    font-size: 0.875rem;
  }
.notificaciones-info{
    width: 74%;
    min-width: 305px;
}
.notificaciones-img{
    width: 100px;
    height: 100px;
    min-width: 100px;
    display: flex;
    justify-content:center;
    align-items: center;
    padding-right: 10px;
    margin: 10px;
    background-color: #fff;
}
.text-sm{
    font-size: .75rem !important;
    color: #999;
}
.notificaciones-img img{
    width: 100%;
    max-height: 100px;
    object-fit: contain;
}
.dropdown-item:active.fix-text-modal{
  background: white !important;
}
.swal2-input{
  margin: 15px auto 0px auto;
}
@media (min-width: 648px){
  .modal-dialog {
    max-width: 50%;
    margin: 1.75rem auto;
  }
}
.selectize-control::before {
	-moz-transition: opacity 0.2s;
	-webkit-transition: opacity 0.2s;
	transition: opacity 0.2s;
	content: ' ';
	z-index: 2;
	position: absolute;
	display: block;
	top: 6px;
	right: 36px;
	font-family: 'Font Awesome 5 Free';
	content: "\f111";
	opacity: 0;
	-webkit-animation: none;
	animation: none;
}
.selectize-control.loading::before {
	opacity: 1;
	-webkit-animation: fa-spin 2s infinite linear;
	animation: fa-spin 2s infinite linear;
}
.w-55{
  width: 55%;
}