/* Copia textual del <style> inline de StaffAttendance th_headerMenu.html (líneas 17-1014).
   NO editar a mano: si cambia el template de SA, volver a copiar el bloque completo. */
  
  	.font-arial-8pt {
  		font-family: Arial, sans-serif;
        font-size: 11px; /* Tamao en px equivalente a 8pt */
  	}
  
    .modal-dialog {
        margin-top: 20px !important;
    }

    p#span_docs {
        margin: 0px !important;
        display: inline-block;
        padding-bottom: 20px;
    }
    #cont_span:after {
        border-top: 0;
        border-right: 0;
        border-left: 0;
        border-bottom: 0;
        font: normal normal normal 24px "Material Design Icons";
        content: "\f140";
        width: auto;
        height: auto;
        vertical-align: middle;
        font-size: 31px;
        font-size: 1.75rem !important;
        color: #a7a0a0;
    }
  
    .alert-danger {
        color: #d93354 !important;
        border-color: #f5a2b2 !important;
    }
    a.nav-link {
        font-size: 15px;
    }
    p#span_docs, #span_nombre {
        font-size: 13px;
        margin-right: 10px !important;
    }
    .navbar-menu-wrapper.d-flex.align-items-center.justify-content-end {
        font-family: "ubuntu-regular", sans-serif !important;
    }
    .horizontal-menu .bottom-navbar .page-navigation > .nav-item:not(.mega-menu) .submenu li a:hover::before {
        background:#e75a22 !important
    }
    #btnPreviousPage, #btnNextPage , #btnAgregarCriterio{
        background-color: #E75A22;
        color: white;
        font-size: 18px;
        border: 1px solid white;
        border-radius: 5px;
    }
    #btnPreviousPage {
        margin-right: 4px;
    }
    #btnNextPage {
        margin-left: 4px;
    }
    #divPageControls{
      font-weight: bold;
    }
    .horizontal-menu .bottom-navbar .page-navigation > .nav-item .submenu ul li a:hover {
        color: #e75a22 !important;
    }
    
    .horizontal-menu .bottom-navbar .page-navigation > .nav-item:hover > .nav-link i, .horizontal-menu .bottom-navbar .page-navigation > .nav-item:hover > .nav-link .menu-title {
         color: white !important;
    }
    .horizontal-menu .bottom-navbar .page-navigation > .nav-item > .nav-link .menu-title {
        font-size: 1.4rem;
        font-weight: 300;
    }

    .btn-gradient-success{
        background-image: linear-gradient(to bottom, #00cb00, #0cb30c) !important;
        border: 1px solid #0cb30c !important;
    }

    #tablaOculta1{
      border: hidden !important;
    }

    footer div{
      text-align: center;
        margin-right: 50px;
        opacity: 0.6;
    }
          
      .horizontal-menu .bottom-navbar{
            background: #E75A22 !important;
      }
      .bg-gradient-danger {
          background: -webkit-gradient(linear, left top, right top, from(#60c94d), to(#0e7a07)) !important;
          background: linear-gradient(to right, #60c94d, #0e7a07) !important;
      }
      .bg-gradient-success, .datepicker-custom .datepicker.datepicker-inline .datepicker-days .table-condensed tbody tr td.day.today:before {
          background: -webkit-gradient(linear, left top, right top, from(#f39e46), to(#ff5e00)) !important;
          background: linear-gradient(to right, #f39e46, #ff5e00) !important;
      }
  
      #box_presentismos, #box_actividades, #box_bienvenido, #box_marca_web, #box_turnos {
        font-size: 20px;
        padding-left: 42px;
        min-height: 180px;
        box-shadow: 2px 3px 10px 0px rgba(119,119,119,0.1);
        background: #fff;
    }

      #preloaderDiv{
        height: 100%;
        width: 100%;
        z-index: 9999;
        margin: 0;
        min-height: 100%;
        position: fixed;
        height: 100%;
        left: 0;
        top: 0;
        background-color: #ffffff;
      }

      /* Skeleton placeholder: barra con shimmer animado. Usamos un gris
         medio que se vea bien sobre los dos colores del zebra-striping
         del theme staffsyncro (naranja claro y blanco). */
      .skeleton-bar {
        display: inline-block !important;
        vertical-align: middle;
        width: 150px !important;
        height: 12px !important;
        border-radius: 6px;
        background-color: #e0d0c0;
        background-image: linear-gradient(90deg,
                                          rgba(255,255,255,0) 0%,
                                          rgba(255,255,255,0.6) 50%,
                                          rgba(255,255,255,0) 100%);
        background-size: 200% 100%;
        background-repeat: no-repeat;
        animation: skeletonShimmer 1.4s ease-in-out infinite;
      }
      /* Widths en px y con !important porque varias páginas tienen un
         `span { width: auto !important }` global que pisa el width. */
      .skeleton-bar.sk-w40 { width:  60px !important; }
      .skeleton-bar.sk-w50 { width:  90px !important; }
      .skeleton-bar.sk-w60 { width: 120px !important; }
      .skeleton-bar.sk-w70 { width: 150px !important; }
      .skeleton-bar.sk-w80 { width: 180px !important; }
      .skeleton-bar.sk-w90 { width: 210px !important; }
      @keyframes skeletonShimmer {
        0%   { background-position: 200% 0; }
        100% { background-position: -200% 0; }
      }

      /* Loader acotado a una sección (grilla, modal, panel). Solo bloquea
         el contenedor donde se inyecta — el resto de la página sigue activa.
         z-index intencionalmente debajo de menús dropdown navbar (~1030) y
         backdrops Bootstrap (1040); dentro de un .modal-content el stacking
         context propio del modal lo eleva sin conflicto. */
      .sectionLoader {
        position: absolute;
        top: 0; right: 0; bottom: 0; left: 0;
        z-index: 10;
        display: flex;
        align-items: center;
        justify-content: center;
        background-color: rgba(255,255,255,0.85);
        pointer-events: all;
      }
      .sectionLoaderLogoWrap {
        display: flex;
        flex-direction: column;
        align-items: center;
        justify-content: center;
        gap: 10px;
      }
      .sectionLoader .sectionLoaderLogo {
        width: 80px !important;
        height: 80px !important;
        display: block;
      }
      .sectionLoaderDots {
        display: flex;
        gap: 8px;
        justify-content: center;
      }
      .sectionLoaderDots span {
        display: inline-block !important;
        width: 10px !important;
        height: 10px !important;
        border-radius: 50%;
        background-color: #e75a22; /* naranja del theme */
        opacity: 0.25;
        animation: sectionLoaderDotPulse 1.2s ease-in-out infinite;
      }
      /* Variante compacta para modales chicos o secciones reducidas. */
      .sectionLoader--sm .sectionLoaderLogoWrap { gap: 6px; }
      .sectionLoader--sm .sectionLoaderLogo {
        width: 44px !important;
        height: 44px !important;
      }
      .sectionLoader--sm .sectionLoaderDots { gap: 5px; }
      .sectionLoader--sm .sectionLoaderDots span {
        width: 7px !important;
        height: 7px !important;
      }
      .sectionLoaderDots span:nth-child(2) { animation-delay: 0.15s; }
      .sectionLoaderDots span:nth-child(3) { animation-delay: 0.30s; }
      @keyframes sectionLoaderDotPulse {
        0%, 80%, 100% { opacity: 0.25; transform: scale(0.85); }
        40%           { opacity: 1;    transform: scale(1.15); }
      }
      .sectionLoaderHost {
        position: relative;
      }

      .inactiveCell {
        background-color: #D3D3D3 !important;
      }

      /* Pager externo "Semanas: 1 2 3 ..." que reemplaza al pagerrenderer
         interno de jqxGrid (footer naranja). Acoplado visualmente bajo la
         grilla AG Grid, con buen contraste sobre fondo claro. */
      #semanas_pager {
        background-color: #f7f7f8;
        border: 1px solid #e3e3e6;
        border-top: 0;
        border-radius: 0 0 6px 6px;
        padding: 8px 14px;
        margin-top: 0 !important;
        font-size: 13px;
        color: #444;
        display: flex;
        flex-wrap: wrap;
        align-items: center;
        gap: 6px;
      }
      #semanas_pager #div_paginador,
      #semanas_pager > div {
        display: inline-flex !important;
        flex-wrap: wrap;
        align-items: center;
        gap: 4px;
        width: auto !important;
        height: auto !important;
        margin: 0 !important;
        color: #444;
        font-weight: 600;
      }
      .semanaGridPageLink {
        display: inline-block;
        min-width: 28px;
        padding: 4px 10px !important;
        border-radius: 4px;
        border: 1px solid #d4d4d8;
        background: #ffffff;
        color: #444 !important;
        text-decoration: none !important;
        text-align: center;
        font-weight: 500;
        transition: background-color 0.15s, color 0.15s, border-color 0.15s;
      }
      .semanaGridPageLink:hover {
        background: #f0e7e2;
        border-color: #fb4700;
        color: #fb4700 !important;
      }
      .selectedGridPageLink,
      .semanaGridPageLink.selectedGridPageLink {
        background: linear-gradient(to right, #ff9166, #fb4700) !important;
        border-color: #fb4700 !important;
        color: #ffffff !important;
        box-shadow: 0 1px 2px rgba(251,71,0,0.25);
      }

      /* AG Grid quartz aplica min-height: 150px al center-cols-viewport/container
         cuando layout es autoHeight (para reservar espacio para el overlay "No Rows").
         En nuestras grillas eso provoca un gap visible cuando hay menos de 4 filas
         (visible especialmente arriba del pinnedBottomRow "Totales"). Lo bajamos a 0
         SOLO cuando la grilla tiene filas (`:has()`), para que el overlay "No Rows"
         conserve su altura y el mensaje sea visible cuando no hay datos. */
      .ag-theme-quartz .ag-root-wrapper:has(.ag-center-cols-container > .ag-row) .ag-layout-auto-height .ag-center-cols-viewport,
      .ag-theme-quartz .ag-root-wrapper:has(.ag-center-cols-container > .ag-row) .ag-layout-auto-height .ag-center-cols-container {
        min-height: 0 !important;
      }
      #jqxMenu{
        min-height:30;
      }
      #filtro{
        /* margin-left/right removed — original used // comments (invalid CSS) which
           broke the rule parser and silently dropped the rules that followed. */
      }
      button#btnAgregarCriterio {
        float: right;
        margin-right: 40px;
    }

    .fila{
          display: inline-block;
    }
    .col_name, .col_progress{
          display: inline-block;
    }

    #contenedor_presentismos, #contenedor_actividades, #contenedor_ranking{
        color: #999;
        font-family: "Poppins",sans-serif;
    }
    
    #box_presentismos:hover, #box_actividades:hover, #box_bienvenido:hover, #box_marca_web:hover ,#box_turnos:hover{
      box-shadow: 0 0 11px rgba(44,44,44,.4) !important; 
    }
    
    #box_presentismos, #box_actividades, #box_bienvenido, #box_marca_web, #box_turnos{
      font-size: 20px;
        padding-left: 42px;
        min-height: 180px;
        box-shadow: 2px 3px 10px 0px rgba(119,119,119,0.1);
        background: #fff; 
    }
    
    .card-body{
      box-shadow: 2px 3px 10px 0px rgba(119,119,119,0.1);
      margin-top: 15px;display: inline-block;
      width: 100%;
      padding-bottom: 7px;
    }
    
    .icon_home{
      margin-right: 5px;
      width: 21px;
      float: right;
      border-radius: 50px;
    }
    .store_pie{
      padding-left: 5px;
        font-size: 10px;
        float: right;
    }
    
    .media-body p{
      margin: 0px;
    }
    
    .photo_user{
      width: 50px;
      border-radius: 50px;
    }
    .icon_circle {
      width: 25px;
        vertical-align: initial;
    }
    .spinner2{
        float: left;
        margin-left: 19px;
        margin-top: 8px;
        width: 25px;
        height: 25px;
        border: 2px solid #f3f3f3;
        border-top: 3px solid #f25a41;
        border-radius: 100%;
        animation: spin 1s infinite linear;
    }
    .titleTiendasPresentismo{
      font-size: 15px;
    }

    .panel-heading .accordion-toggle:after {
        /* symbol for "opening" panels */
        font-family: 'Glyphicons Halflings';  /* essential for enabling glyphicon */
        content: "\e114";    /* adjust as needed, taken from bootstrap.css */
        float: right;        /* adjust as needed */
        color: grey;         /* adjust as needed */
    }
    .panel-heading .accordion-toggle.collapsed:after {
        /* symbol for "collapsed" panels */
        content: "\e080";    /* adjust as needed, taken from bootstrap.css */
    }
    
    .toggle {
        float:left;
        width:100px !important;
        margin-top: 4px;      
        margin-left: -4px;
    }
    
    #btnCerrarSesion{
      background:red;
    }

    #btn_actualiza:hover{ 
        -webkit-transform: scale(1.3);
        transform: scale(1.3)

        display: inline-block;
  
          animation: spin-animation 2s infinite;
        animation-timing-function: linear;
        display: inline-block;
    }
    
    @keyframes spin-animation {
      0% {
        transform: rotate(0deg);
      }
      100% {
        transform: rotate(359deg);
      }
    }
    .manager_marca_Web{
      margin-bottom:5px !important;
    }
    .container {
       max-width: 98% !important;
       width: 98% !important;
    }
    
    .div_turno{
        font-size: 11px;
        height: 106px;  
    }
    .actual{
       background-color: #ff8030;
    }
    .futuro{
       background-color: #E75A22;
    }
    
    .div_turno_style{
      height: 53px;
      font-size: 9px;
      margin-bottom: 3px;
    }
    .libre{
      background-color: #0c8f8f; 
    }
    .dia{
      background-color: #565164; 
    }
    .content-wrapper {
      padding-top: 0px !important;
  }
  
  #div_iconos h2, #div_title h2 {
      margin-top: 11px !important;
  }


    @media only screen and (max-width: 425px) {
    div#reloj {
        width: 72px;
        margin-top: -10px;
        vertical-align: top;
    }
    }
  
    @media only screen and (max-width: 760px) {
      .icon_del{
          right:20px !important;
      }
      div#box_notificaciones {
        padding: 15px;
    }
    .preview-thumbnail {
        margin-left: 10px;
    }
      p#span_docs, #span_nombre {
        margin-right: 0px !important;
    }
      #div_iconos h2 , #div_title h2{
        margin-top: 0px !important;
    }
    div#cont_span {
        margin-right: -15px;
    }
      #cont_span:after{
          content: "" !important;
      }
    div:has(>#btnPreviousPage) {
        width: 100% !important;
        text-align: center;
    }
      .content-wrapper {
        padding-top: 80px !important;
    }
      body {
        overflow-y: auto !important;
    }
      .modal-dialog {
        max-width: 100% !important;
    }
      #contenedor{
          margin-top: 75px;
      }
      .div_tabla {
        padding: 0px !important;
        overflow-x: auto !important;
    }
    #tabla {
        min-width: 1000px !important;
    }

    .fileTicketMsg img {
        margin-left: 0px !important;
    }
    a.dropdown-item.preview-item {
        padding-left: 3px !important;
        padding-right: 3px !important;
    }
      div#div_docs {
        min-width: 100%;
        overflow-x: auto;
    }
      #icon_bell{
        margin-left: 12px;
        margin-right: 10px;
      }
      #icon_doc{
        width: 20px;
      }
      div#contendor_header {
        padding-right: 5px;
        padding-left: 5px;
    }
     .navbar-menu-wrapper.d-flex.align-items-center.justify-content-end {
        padding: 0px !important;
     }
      .nav-profile-img {
        padding-right: 7px !important;
    }
      #reloj{
        margin-right: 0px !important;
      }
      #span_docs{
        margin-right: -10px !important;
      }
      .horizontal-menu .top-navbar .navbar-menu-wrapper .navbar-nav .nav-item.nav-profile .nav-link::after {
      display:none;
    }
    a#notificationDropdown {
      margin-right: -17px !important;
    }
      .container {
        width: 100% !important;
          padding-right:5px !important;
          padding-left:5px !important;
      }
      .col-lg-4, .col-lg-8, .col-lg-12 {
          padding: 0px;
          margin: 0px;
      }
      #box_turnos{
          padding-left: 0px !important;
      }
      .dia_box{
        width: 44px !important;
      }
      #box_actividades{
        margin-bottom: 100px !important;
      }
    .content-wrapper{
      height: auto !important;
    }

    }

    /* Alineación del reloj con el texto "Documentos" del header (desktop).
       El .nav-profile-text de Documentos usa margin-top: 16px; matcheamos
       el LI del reloj con el mismo offset para que las baselines coincidan. */
    #li_clock {
        margin-top: 16px !important;
    }

    .panel-default>.panel-heading {
      color: #333;
      background-color: #f5f5f5;
      border-color: #ddd;
  }
  .panel-group .panel-heading {
      border-bottom: 0;
  }
  .panel-heading {
      padding: 10px 15px;
      border-bottom: 1px solid transparent;
      border-top-left-radius: 3px;
      border-top-right-radius: 3px;
  }

  .panel-default {
      border-color: #ddd;
  }
  
  #contenedor_presentismos, #contenedor_actividades, #contenedor_ranking {
      color: #999;
      font-family: "Poppins",sans-serif;
  }

  #tablaOculta1{
    border: hidden !important;
  }

  footer div{
    text-align: center;
      margin-right: 50px;
      opacity: 0.6;
  }
      
    .horizontal-menu .bottom-navbar{
          background: #E75A22 !important;
    }
    .bg-gradient-danger {
        background: -webkit-gradient(linear, left top, right top, from(#60c94d), to(#0e7a07)) !important;
        background: linear-gradient(to right, #60c94d, #0e7a07) !important;
    }
    .bg-gradient-success, .datepicker-custom .datepicker.datepicker-inline .datepicker-days .table-condensed tbody tr td.day.today:before {
        background: -webkit-gradient(linear, left top, right top, from(#f39e46), to(#ff5e00)) !important;
        background: linear-gradient(to right, #f39e46, #ff5e00) !important;
    }

    #box_presentismos, #box_actividades, #box_bienvenido, #box_marca_web, #box_turnos {
      font-size: 20px;
      padding-left: 42px;
      min-height: 180px;
      box-shadow: 2px 3px 10px 0px rgba(119,119,119,0.1);
      background: #fff;
  }

    .horizontal-menu .bottom-navbar .page-navigation > .nav-item.active > .nav-link .menu-title, .horizontal-menu .bottom-navbar .page-navigation > .nav-item.active > .nav-link i, .horizontal-menu .bottom-navbar .page-navigation > .nav-item.active > .nav-link .menu-arrow {
      color: white !important;
  }

  .btn-danger:not(.btn-light):focus, .btn-danger:not(.btn-light):active {
      background: #cd430d !important;
      border-color: #cd430d !important;
  }
  
  .btn-danger {
      --bs-btn-color: #000 !important;
      --bs-btn-bg: #E75A22 !important;
      --bs-btn-border-color: #E75A22 !important;
      --bs-btn-hover-color: #000 !important;
      --bs-btn-hover-bg: #cd430d !important;
      --bs-btn-hover-border-color: white !important;
      --bs-btn-focus-shadow-rgb: 216, 105, 128 !important;
      --bs-btn-active-color: #000 !important;
      --bs-btn-active-bg: #cd430d !important;
      --bs-btn-active-border-color: #E75A22 !important;
      --bs-btn-active-shadow: inset 0 3px 5px rgba(0, 0, 0, 0.125) !important;
      --bs-btn-disabled-color: #000 !important;
      --bs-btn-disabled-bg: #E75A22 !important;
      --bs-btn-disabled-border-color: #E75A22 !important;
  }
  #cliente_header .dropdown-item:hover {
      background-color: #ff4800e3 !important;
  }
  #div_notificaciones .dropdown .dropdown-menu .dropdown-item:hover {
      background-color: #ff48001f ;
  }
  .content-wrapper {
      background: #f2edf3;
      padding: 2.75rem 2.25rem;
      width: 100%;
      -webkit-box-flex: 1;
      -ms-flex-positive: 1;
      flex-grow: 1;
  }
  .main-panel {
      -webkit-transition: width 0.25s ease, margin 0.25s ease;
      transition: width 0.25s ease, margin 0.25s ease;
      width: calc(100% - 260px);
      min-height: calc(100vh - 70px);
      display: -webkit-box;
      display: -ms-flexbox;
      display: flex;
      -webkit-box-orient: vertical;
      -webkit-box-direction: normal;
      -ms-flex-direction: column;
      flex-direction: column;
  }
  
  .container-fluid.page-body-wrapper{
    background-color: #f2edf3;
  }
  
  
  .jqx-widget-staffsyncro .jqx-grid-cell-staffsyncro, .jqx-listitem-state-normal-staffsyncro, .jqx-menu-item-normal-staffsyncro, .jqx-tree-item-normal-staffsyncro, .jqx-calendar-cell-staffsyncro, .jqx-grid-cell-staffsyncro, .jqx-menu-vertical-staffsyncro .jqx-menu-item-top-normal-staffsyncro, .jqx-input-popup-staffsyncro .jqx-fill-state-normal-staffsyncro {
      font-family: Arial, sans-serif;
      font-size: 11px;
  }
  
  .jqx-grid-column-header.jqx-grid-column-header-staffsyncro.jqx-widget-header.jqx-widget-header-staffsyncro {
      font-family: Arial, sans-serif;
  }
  
  .btn-light {
      --bs-btn-bg: #f2edf3 !important; 
      --bs-btn-border-color: #f2edf3 !important;
  }
    
    div[role='columnheader'] div div {
      text-align: center !important;
  }

  .badge-danger {
      border: 1px solid #fe7c96;
      color: #ffffff;
      background: #ff2b2b !important;
      margin-top: 6px;
      font-size: 14px;
      width: 113px;
  }
  .badge-success {
      border: 1px solid #1bcfb4;
      color: #ffffff;
      background: #45f545 !important;
      width: 113px;
      font-size: 14px;
      margin-top: 6px;
  }
  
  footer {
      padding: 25px 0px 30px 0px !important;
      background-color: #d0c7d1 !important;
      margin-top: 20px;
      color: black;
      font-size: 20px;
  }
  
  .card-body {
       box-shadow: none !important;
  }
  
  .btn-gradient-primary {
    background: -webkit-gradient(linear, left top, right top, from(#ff9166), to(#fb4700)) !important;
      background: linear-gradient(to right, #f56723, #fb4700) !important;
      border: 0;
  }
  
  .modal-header{
    background-color: #E75A22;
      color: white;
  }
  
  .modal-footer {
      background-color: white !important;
  }
  
  .form-select-sm {
      border-radius: 0px !important;
      height: 46px;
  }
  
  input.form-control {
      border: 1px solid #ced4da !important;
      border-radius: 0px;
      height: 46px;
      font-size: 15px;
      font-family: "ubuntu", sans-serif;
  }
  
  /* ### MULTIPLE SELECT STYLES ### */ 
  	
  	/*base rule combo height y borde blanco*/
	button.ms-choice {
	    height: 46px;
	    border: 1px solid #ced4da;
	}
  
	.ms-choice > span {
    	margin: 10px !important;
	}
  
  	.ms-choice > span.placeholder {
      	color: white !important;
  	}
  
  	/* overrides para el combo de clientes */
  	#divComboCliente > div > button {
      	border-radius: 7px !important;
      	height: 30px !important;
      	border: 0px solid #ced4da !important;
  	}
  	#divComboCliente > div > button > span {
  		top: -7px !important;
  	}
  
  .ms-parent.multipleSelection.filterFontStyle {
    width: 100% !important;
  }
  
  
  div#form_horas {
      width: 100% !important;
      height: 46px !important;
      border-radius: 0px !important;
  }
  input.jqx-input-content.jqx-widget-content {
      width: 97% !important;
      height: 40px !important;
      padding: 0px !important;
      text-align: left !important;
      padding-left: 20px !important;
  }
  
  .jqx-fill-state-focus {
      border-color: #c7c7c7 !important;
  }
  .form-group.row {
      margin-bottom: 5px !important;
  }
  
  .ms-choice > div {
      position: absolute  !important;
      top: 11px  !important;
      right: 15px  !important;
      width: 11px  !important;
      height: 10px  !important;
      background: url(https://storage.staffattendance.cl/images/arrow_combo.png) left top no-repeat  !important;
      background-size: 11px 7px !important;
  }
  input[type="radio"] {
      margin-right: 10px;
  }
  .form-select-sm{
    padding-left: 1rem !important;
  }
  .modal .modal-dialog .modal-content .modal-body {
      padding: 0px 26px !important;
  }
  
  .form-check .form-check-label input[type=checkbox] + .input-helper:before{
      border: solid #db660d !important;
  }
  .form-check-primary.form-check label input[type=checkbox]:checked + .input-helper:before, .form-check-primary.form-check label input[type=radio]:checked + .input-helper:before{
      background: linear-gradient(to right, #f97a48, #db660d) !important;
  }
  .form-select {
      border-radius: 0px !important;
      height: 46px !important;
  }
  button#btnBuscar {
      height: 46px !important;
  }
  
  .alert-warning {
      color: #e14f4f !important;
      border: 1px solid #fbc8c8;
  }
  .singleSelection button.ms-choice {
      border-radius: 0px;
      height: 46px;
      border: 1px solid #ced4da;
  }
  
  button.btn.dropdown-toggle.selectpicker.btn-default {
      border-radius: 0px;
      height: 46px;
  }
  span.caret {
      border: none !important;
  }
  .dropup .dropdown-toggle::after{
        border: none !important;
  }
  select#filterOptions, span.filter-option.pull-left {
      font-size: 15px;
      font-family: "ubuntu", sans-serif;
      padding-left: 12px;
  }
  .btn.btn-danger.dropdown-toggle.dropdown-toggle-split::after {
      margin-right: -7px;
  }
  #span_client{
      vertical-align: text-bottom;
      margin-right: 29px;
  }
  .btn.btn-danger.dropdown-toggle.dropdown-toggle-split {
      background-color: #cd430d !important;
      width: 155px;
  }
  .jqx-widget-staffsyncro .jqx-grid-cell-staffsyncro, .jqx-listitem-state-normal-staffsyncro, .jqx-menu-item-normal-staffsyncro, .jqx-tree-item-normal-staffsyncro, .jqx-calendar-cell-staffsyncro, .jqx-grid-cell-staffsyncro, .jqx-menu-vertical-staffsyncro .jqx-menu-item-top-normal-staffsyncro, .jqx-input-popup-staffsyncro .jqx-fill-state-normal-staffsyncro {
      font-family: sans-serif !important;
      font-size: 11px;
  }
  .dropdown .dropdown-toggle:after{
    font-size: 1.75rem !important;
  }
  
  .jqx-notification-container{
        z-index: 99999;
  }
  
  .horizontal-menu .top-navbar .navbar-menu-wrapper .navbar-nav .nav-item .nav-link.count-indicator .count-symbol {
      top: -2px !important;
      right: 0px !important;
  }
  
  #span_client {
      vertical-align: text-bottom !important;
  }

  .btn.btn-danger.dropdown-toggle.dropdown-toggle-split {
      background-color: #cd430d !important;
      width: 155px !important;
  }
  
  nav.navbar.top-navbar.col-lg-12.col-12.p-0.pt-5.mt-3 {
      padding-top: 0px !important;
      margin-top: 0px !important;
  }


.horizontal-menu .nav.page-navigation:before, .horizontal-menu .nav.page-navigation:after  {
  content:none;
}
.card-body {
    padding-top: 15px !important;
    padding-bottom: 10px !important;
  }


@media only screen and (max-width: 760px) {
  .navbar-menu-wrapper.d-flex.align-items-center.justify-content-end {
      width: 100% !important;
  }
}
a.content_docs.dropdown-itemx.preview-item {
    background-color: white !important;
}
.content_docs{
    display: block;
    width: 100%;
    padding: var(--bs-dropdown-item-padding-y) var(--bs-dropdown-item-padding-x);
    clear: both;
    font-weight: 400;
    color: var(--bs-dropdown-link-color);
    text-align: inherit;
    text-decoration: none;
    white-space: nowrap;
    background-color: white;
    border: 0;
  }

    .nav_client button.ms-choice {
      color: white;
      background-color: #cd430d !important;
      font-size: 14px;
      border-radius: 7px !important;
      border-color: #cd430d !important;
      font-weight: bold;
      font-family: "ubuntu-bold", sans-serif;
  }
  .nav_client ul {
      max-height: 250px;
      color: white;
      background-color: #E85823;
  }
  .nav_client .ms-drop.bottom {
      scrollbar-color: white rgb(232, 88, 35);
  }
  .nav_client li.selected {
      background: #cd430d !important;
  }
  .nav_client li {
      padding-left: 10px;
  }
  .nav_client span {
      font-weight: bold;
      font-family: "ubuntu-bold", sans-serif !important;
      font-size: 14px !important;
  }
  .nav_client label {
    margin-bottom: 0px !important;
    line-height: 26px !important;
  }
  .nav_client .ms-search {
    background-color: #E85823;
  }
  .nav_client input[type="radio"] {
      display: none;
  }
  .ms-choice > div {
      position: absolute  !important;
      top: 11px  !important;
      right: 15px  !important;
      width: 22px  !important;
      height: 15px  !important;
      background: url(https://storage.staffattendance.cl/images/arrow_combo_white.png) left top no-repeat  !important;
      background-size: 20px 11px !important;
   }
   
   
   .nav_client .ms-parent.multipleSelection.filterFontStyle {
      margin-top: 18px;
  }
  div#cont_span {
    min-height: 46px;
}