/*__filename__    : kiosco.css */
/*__author__      : DataHome S. de R.L. de C.V. */
/* __copyright__  : DataHome S. de R.L. de C.V. */
/*__description__ : Estilos generales de Kiosco App */
/* __version__    : 1.2.0 */
/* __app__        : Kiosco */

/*para la lista a actualizar de los documentos*/
.lista-documentos-actualizar {
   cursor: pointer;
 }
 .campo-editable{
   background: transparent;
   border: 1px solid transparent;
   outline: none;
   color: rgb(var(--bg-color-default));
}
.campo-editando{
  border: 1px solid #ccc;
  padding: 5px 5px;
}

.ks-table-2-datas .material-icons:hover{
	/*opacity: 1;*/
	border: 1px solid #0d5df1;
}

 .icon-color i {
   color: rgb(var(--color-white));
 }

 .icono-borde {
   color: rgb(var(--color-white));
   background-color: rgb(var(--color-white),.2);
   width: 85px;
   height: 85px;
   margin-bottom: 7px;
}

:root {
   --color-primary: 59, 54, 238;
   --color-primary-hover: 77, 77, 255;
   --color-dark-primary: 23, 45, 92;
   --color-light-primary: 171, 215, 255;
   --color-success: 17, 177, 91;
   --color-danger: 254, 112, 102;
   --text-color-danger: rgb(153, 44, 58);
   --color-warning: 251, 176, 59;
   --color-info: 13, 110, 253;
   --color-white: 255, 255, 255;
   --color-dark: 62, 76, 89;
   --color-medium-dark: 123, 135, 148;
   --color-blue: 13, 110, 253;
   --color-purple: 111, 66, 193;
   --color-red: 220,53,69;
   --color-orange: 253, 126, 20;
   --color-yellow: 255, 193, 7;
   --color-green: 40, 167, 69;
   --color-cyan: 23, 162, 184;
   --color-gray: 108, 117, 125;
   --font-regular: 400;
   /* --font-medium: 500; */
   --font-semibold: 600;
   --font-bold: 700;
   --font-extrabold: 800;
}

/* ///// TOOGLE LIGHT/DARK MODE ///// */
[data-theme='light'] .d-block-light,
[data-theme='dark'] .d-block-dark {
   display: block !important;
}

.light-dark-mode-icon {
   fill: var(--text-color-default);
}

.logo-nav {
   display: none;
}

html {
   overflow-x: hidden;
}

body {
   font-family: 'Mulish', sans-serif;
   background-color: var(--bg-color-default);
   color: var(--text-color-default);
   font-size: 14px;
   font-weight: var(--font-regular);
   transition: all .3s;
   overflow-x: hidden;
}

a {
   color: var(--text-color-primary);
   transition: all .3s;
}

a:hover {
   color: var(--text-color-primary);
   /* filter: brightness(140%); */
}

h1, h2, h3, h4, h5, h6, p, span {
   transition: color .3s;
}

/* ///// SIDEBAR ///// */
.sidebar {
   width: 300px;
   height: 100%;
   background-color: var(--bg-color-elements);
   position: fixed;
   top: 0px;
   left: 0px;
   transition: all .3s;
   display: flex;
   flex-direction: column;
   overflow: auto;
}

@media (max-width: 1600px) {
   .sidebar {
      width: 240px;
   }
}

@media (max-width: 1200px) {
   .sidebar {
      left: -300px;
   }
}

.sidebar .logo-kiosco-app {
   width: auto;
   /* height: 70px; */
   display: flex;
   align-items: center;
   padding: 20px 30px;
}

.sidebar .logo-kiosco-app img {
   width: auto;
   height: 32px;
}

.sidebar .user-card-container {
   width: 100%;
   height: auto;
   padding: 0px 20px;
}

.sidebar .user-card-container .user-card {
   width: 100%;
   height: auto;
   padding: 15px;
   border-radius: 5px;
   display: flex;
   align-items: flex-start;
   border-width: 1px;
   border-style: solid;
}

.sidebar .user-card-container .user-card .photo {
   width: 36px;
   height: 36px;
   object-fit: cover;
   border-radius: 50%;
   background-color: rgba(var(--color-white),1);
}

.sidebar .user-card-container .user-card .info {
   width: calc(100% - 60px);
   /* width: calc(100% - 25px); */
   height: auto;
   padding: 0px 10px;
}

@media (max-width: 1600px) {
   .sidebar .user-card-container .user-card {
      padding: 12px;
   }

   .sidebar .user-card-container .user-card .photo {
      width: 24px;
      height: 24px;
   }

   .sidebar .user-card-container .user-card .info {
      width: calc(100% - 44px);
   }
}

.sidebar .user-card-container .user-card .option {
   width: 24px;
   height: auto;
   margin-top: -5px;
}

.sidebar .user-card-container .user-card .option .dropdown-toggle {
   color: rgba(var(--color-white),1);
   font-size: 20px;
}

.sidebar .sidemenu-container {
   width: 100%;
   height: 100%;
   /* height: calc(100% - 140px); */
   display: flex;
   flex-direction: column;
   justify-content: space-between;
   padding-top: 20px;
}

.sidebar .sidemenu-container .sidemenu-top {
   /* background-color: red; */
   width: 100%;
   /* height: calc(100% - 120px); */
   padding: 0px 20px 20px 20px;
   /* overflow: auto; */
}

.sidebar .sidemenu-container .sidemenu-top a.item {
   text-decoration: none;
   display: flex;
   align-items: center;
   margin-bottom: 3px;
   padding: 0px 10px;
   border-radius: 4px;
   border: 1px solid transparent;
   height: 42px;
}

.sidebar .sidemenu-container .sidemenu-top .item i {
   color: var(--icon-color);
   font-size: 20px;
   transition: all .3s;
}

.sidebar .sidemenu-container .sidemenu-top .item:hover i {
   color: var(--text-color-primary);
}

.sidebar .sidemenu-container .sidemenu-top .item p {
   color: var(--text-color-default);
   margin-bottom: 0px;
   width: calc(100% - 27px);
   padding: 0px 20px;
   font-size: 14px;
}

.sidebar .sidemenu-container .sidemenu-top .item.active p {
   font-weight: var(--font-bold);
   color: rgb(var(--color-white));
}

.sidebar .sidemenu-container .sidemenu-top .item.active i {
   color: rgb(var(--color-light-primary));
   opacity: .6;
}

.sidebar .sidemenu-container .sidemenu-bottom {
   /* background-color: blue; */
   width: 100%;
   height: 130px;
   background-color: var(--bg-color-elements);
   z-index: 10;
   padding: 15px 25px 20px 25px;
   transition: all .3s;
}

.sidebar .sidemenu-container .sidemenu-bottom .card-enterpirse {
   width: 100%;
   height: auto;
   background-color: rgb(var(--color-white));
   border: 1px solid rgb(var(--color-white));
   border-radius: 4px;
   padding: 15px;
   display: flex;
   align-items: center;
   justify-content: space-between;
}

.sidebar .sidemenu-container .sidemenu-bottom .card-enterpirse:hover {
   box-shadow: 0 0 0 0.35rem rgba(var(--color-primary),.3);
   border-color: rgba(var(--color-primary),.8);
}

.sidebar .sidemenu-container .sidemenu-bottom .card-enterpirse .logo {
   height: 36px;
   width: auto;
}

.sidebar .sidemenu-container .sidemenu-bottom a.card-enterpirse i {
   font-size: 18px;
   color: var(text-color-default);
}

/* ///// MAIN ///// */
.main-container {
   width: calc(100% - 300px);
   height: auto;
   position: relative;
   margin-left: 300px;
   padding-top: 70px;
   transition: all .3s;
}

@media (max-width: 1600px) {
   .main-container {
      width: calc(100% - 240px);
      margin-left: 240px;
   }
}

@media (max-width: 1200px) {
   .main-container {
      width: 100%;
      margin-left: 0px;
   }
}

.main-container .main {
   padding: 0px 40px;
   transition: all .3s;
}

@media (max-width: 1600px) {
   .main-container .main {
      padding: 0px 25px;
   }
}

@media (max-width: 768px) {
   .main-container .main {
      padding: 0px 20px;
   }
}

.main-container .main .header {
   width: 100%;
   height: 70px;
   display: flex;
   align-items: center;
   position: fixed;
   top: 0px;
   background-color: var(--bg-color-default);
   z-index: 10;
   transition: all .3s;
}

@media (max-width: 1200px) {
   .main-container .main .header {
      z-index: 11;
   }
}

.main-container .main .header .title {
   font-size: 20px;
   margin-bottom: 0px;
   font-weight: var(--font-bold);
   overflow: hidden;
   text-overflow: ellipsis;
   white-space: nowrap;
   padding-right: 40px;
}

.main-container .main .header .header-options {
   display: flex;
   align-items: center;
}

.main-container .main .header .header-options .option {
   margin-right: 15px;
   transition: all .3s;
   cursor: pointer;
   position: relative;
}

.main-container .main .header .header-options .option svg {
   fill: var(--text-color-default);
   transition: all .3s;
}

.main-container .main .header .header-options .option:hover {
   /* color: var(--color-primary); */
   /* background-color: var(--bg-color-elements); */
}

.dropdown-menu-language .flag {
   width: 20px;
   height: 20px;
   border-radius: 50%;
   object-fit: cover;
}

.dropdown-menu-notifications {
   width: 300px;
}

@media (max-width: 576px) {
   .dropdown-menu-notifications {
      width: 270px;
   }
}

.dropdown-menu-notifications .dropdown-item {
   white-space: normal;
   margin: 10px 0px;
}

.dropdown-menu-notifications .dropdown-item .icon {
   width: 32px;
   height: 32px;
   background-color: var(--bg-color-elements);
   border-radius: 3px;
   display: flex;
   align-items: center;
   justify-content: center;
   transition: all .3s;
}

.dropdown-menu-notifications .dropdown-item:hover .icon {
   background-color: var(--bg-color-default);
}

.dropdown-menu-notifications .dropdown-item svg {
   width: 20px;
   height: 20px;
   fill: var(--text-color-default);
}

.dropdown-menu-notifications .dropdown-item .info {
   white-space: normal;
   width: calc(100% - 32px);
   padding-left: 12px;
}

.main-container .main .header .header-options .option.notifications .point {
   width: 11px;
   height: 11px;
   border-radius: 50%;
   background-color: rgba(var(--color-danger),1);
   position: absolute;
   top: 4px;
   right: -2px;
   border: 2px solid var(--bg-color-default);
   transition: all .3s;
}

.main-container .main .header .header-options .separator {
   width: 1px;
   height: 24px;
   background-color: var(--text-color-default);
   opacity: 0.4;
   margin-right: 20px;
   margin-left: 15px;
   transition: all .3s;
}

.main-col-2 .main {
   width: calc(100% - 400px);
}

.main-col-2 .column {
   width: 400px;
   height: 100%;
   position: fixed;
   top: 0px;
   right: 0px;
   background-color: var(--bg-color-elements);
   padding: 60px 40px 20px 40px;
   z-index: 11;
   transition: background-color .3s;
}

@media (max-width: 1600px) {
   .main-col-2 .main {
      width: calc(100% - 350px);
   }

   .main-col-2 .column {
      width: 350px;
      padding: 60px 25px 25px 25px;
   }
}

@media (max-width: 1400px) {
   .main-col-2 .main {
      width: calc(100% - 260px);
   }

   .main-col-2 .column {
      width: 260px;
      padding: 25px 25px 25px 25px;
   }
}

@media (max-width: 1200px) {
   .main-col-2 .main {
      width: 100%;
   }

   .main-col-2 .column {
      width: calc(100% - 40px);
      position: relative;
      height: auto;
      margin: 0 auto;
      border-radius: 5px;
      padding: 24px;
      z-index: 10;
   }
}

@media (min-width: 1201px) {
   .hide-menu .sidebar {
      left: -400px;
   }

   .hide-menu .main-container {
      width: 100%;
      margin-left: 0px;
   }
}

.btn-open-menu-mobile {
   display: none;
}

.btn-close-menu-mobile {
   display: none;
}

.btn-close-menu-mobile-sidebar {
   width: 36px;
   height: 36px;
   border: 1px solid var(--border-color);
   align-items: center;
   justify-content: center;
   font-size: 20px;
   border-radius: 3px;
   position: absolute;
   top: 20px;
   right: 20px;
   cursor: pointer;
   display: none;
}

@media (max-width: 1200px) {
   .show-menu .sidebar {
      left: 0px;
      z-index: 50;
      width: 300px;
      max-width: 100%;
   }

   .show-menu .main-container {
      transform: translateX(300px);
   }

   .btn-open-menu-mobile {
      display: flex;
   }

   .btn-close-menu-mobile {
      display: none;
   }

   .show-menu .btn-open-menu-mobile {
      display: none;
   }

   .show-menu .btn-close-menu-mobile {
      display: flex;
   }
}

@media (max-width: 400px) {
   .show-menu .sidebar {
      width: 100%;
   }

   .btn-close-menu-mobile-sidebar {
      display: flex;
   }
}
/* ///// INDEX ///// */
html[data-theme='light'] .carousel-index .carousel-inner {
   box-shadow: 0px 35px 35px -20px var(--border-color);
}

.carousel-index .item {
   width: 100%;
   min-height: 160px;
   position: relative;
   /* background-color: var(--bg-color-elements); */
   border-radius: 8px;
   padding: 35px 80px;
   display: flex;
   align-items: flex-start;
   /* justify-content: space-between; */
   transition: all .3s;
   /* box-shadow: 0px 25px 25px -20px rgba(var(--color-blue),.5); */
   /* color: #fff; */
   /* box-shadow: inset 0 0 0 3px var(--bg-color-default); */
}

.carousel-index .item .icon {
   font-size: 80px;
   position: absolute;
   right: 80px;
   top: 35px;
   /* opacity: .1; */
}

@media (max-width: 768px) {
   .carousel-index .item .icon {
      display: none;
   }
}

@media (max-width: 576px) {
   .carousel-index .item {
      text-align: center;
      padding: 30px 60px;
   }
}

.carousel-index .icono {
   font-size: 24px;
   margin-top: -3px;
}

.org-index .photos {
   display: flex;
}

.org-index .photos img {
   width: 30px;
   height: 30px;
   border-radius: 50%;
   object-fit: cover;
   border: 2px solid var(--bg-color-elements);
   transition: all .3s;
}

.org-index .photos img:nth-child(n) {
   margin-left: -4px;
}

.org-index .photos img:first-child {
   margin-left: 0px;
}

.progress.vacation-progress {
   background-color: rgba(var(--color-light-primary),.4);
}

.vacation-progress .progress-bar {
   background-color: rgba(var(--color-light-primary),1);
}

@media (max-width: 768px) {
   .logo-enterprise-index {
      width: 180px;
   }
}

.col-personal-info-index {
   width: 100%;
   height: 100%;
   display: flex;
   flex-direction: column;
   justify-content: space-between;
}

.col-personal-info-index .info {
   width: 100%;
   height: calc(100% - 60px);
   overflow-y: auto;
   overflow-x: hidden;
}

.col-personal-info-index .button-container {
   width: 100%;
   height: 60px;
   background-color: var(--bg-color-elements);
   display: flex;
   align-items: flex-end;
   transition: background-color .3s;
}

@media (max-width: 1200px) {
   .col-personal-info-index .info {
      height: auto;
      overflow: initial;
   }

   .col-personal-info-index .button-container {
      height: auto;
   }
}

.col-personal-info-index .info .photo {
   width: 140px;
   height: 140px;
   border-radius: 50%;
   object-fit: cover;
}

@media (max-width: 1400px) {
   .col-personal-info-index .info .photo {
      width: 110px;
      height: 110px;
   }
}

/* INDEX: LISTA NÓMINA */
.lista-nomina-index {
   height: calc(100% - 5px);
   display: flex;
   flex-direction: column;
   justify-content: space-between;
}

.lista-nomina-index .item {
   display: flex;
   margin-bottom: 32px;
}

.lista-nomina-index .item .icono {
   width: 36px;
   font-size: 24px;
   color: var(--icon-color);
   margin-top: -5px;
}

.lista-nomina-index .item .info {
   width: calc(100% - 36px);
   display: flex;
   align-items: center;
   justify-content: space-between;
}

.lista-nomina-index .item .info .title {
   width: calc(100% - 40px);
}

.lista-nomina-index .item .info .btn {
   padding: .25rem .42rem;
}

@media (max-width: 767px) {
   .lista-nomina-index {
      height: auto;
   }
}

/* ///// HEADER & BODY SECTION ///// */
.header-section {
   width: 100%;
   height: auto;
   background-color: var(--bg-color-elements);
   border-radius: 5px;
   padding: 25px 25px 0px 25px;
   /* overflow-x: hidden; */
   transition: background-color .3s;
}

.header-section .title-section {
   display: flex;
   align-items: center;
   /* padding-bottom: 25px; */
}

.header-section .title-section i {
   font-size: 24px;
   margin-right: 16px;
   color: var(--icon-color);
}

.header-section .title-section h6 {
   font-size: 18px;
   font-weight: var(--font-bold);
   margin-bottom: 0px;
}

.header-section .photo-user {
   width: 100px;
   height: 100px;
   border-radius: 50%;
   object-fit: cover;
}

.body-section {
   padding: 25px 0px;
}

.title-body-section {
   font-size: 17px;
   font-weight: var(--font-extrabold);
}

@media (max-width: 576px) {
   .header-section {
      padding: 20px 20px 0px 20px;
   }

   .header-section .title-section i {
      display: none;
   }

   .header-section .photo-user {
      width: 80px;
      height: 80px;
   }

   .body-section {
      padding-top: 20px;
   }

   .title-body-section {
      font-size: 16px;
   }
}

/* ///// EXPEDIENTE ///// */
.icon-view-list-grid {
   fill: var(--icon-color);
   transition: all .3s;
   cursor: pointer;
   width: 30px;
   height: 30px;
}

.icon-view-list-grid.active {
   fill: var(--text-color-default);
}

.list-file .item .icon {
   border-radius: 5px;
   /* background-color: rgb(var(--color-dark-primary)); */
   /* color: rgb(var(--color-white)); */
   display: flex;
   align-items: center;
   justify-content: center;
   font-size: 24px;
}

.list-file .item {
   width: 100%;
   height: auto;
   border-radius: 5px;
   border: 1px solid var(--border-color);
   padding: 24px;
   display: flex;
   transition: all .3s;
}

/* GRID VIEW */
.list-file.grid .item {
   align-items: center;
   flex-direction: column;
   margin-bottom: 15px;
}

.list-file.grid .item .icon {
   width: 85px;
   height: 85px;
   margin-bottom: 7px;
}

.list-file.grid .item .info {
   width: 100%;
   text-align: center;
}

.list-file.grid .item .title {
   margin-bottom: 15px;
}

/* LIST VIEW */
.list-file.list .item {
   align-items: center;
   flex-direction: row;
   margin-bottom: 10px;
}

.list-file.list .item .icon {
   width: 64px;
   height: 64px;
}

.list-file.list .item .info {
   width: 100%;
   display: flex;
   align-items: center;
   justify-content: space-between;
   padding-left: 20px;
}

.list-file.list .item .title {
   width: calc(100% - 180px);
}

@media (max-width: 576px) {
   .list-file.list .item {
      align-items: center;
      flex-direction: column;
      margin-bottom: 15px;
   }

   .list-file.list .item .icon {
      width: 85px;
      height: 85px;
      margin-bottom: 15px;
   }

   .list-file.list .item .info {
      width: 100%;
      display: block;
      text-align: center;
      padding-left: 0px;
   }

   .list-file.list .item .title {
      margin-bottom: 15px;
      width: 100%;
   }
}

.list-file .tipo {
   font-size: 14px;
   font-weight: var(--font-semibold);
   display: inline-block;
   margin-bottom: 2px;
}

/* TIPOS DE ARCHIVO */

.doc-personales {
   color: rgb(var(--color-blue));
}

 .icon-personales {
   color: rgb(var(--color-blue));
   background-color: rgb(var(--color-blue),.2);
 }


.doc-laborales {
   color: rgb(var(--color-green));
}

.icon-laborales {
   color: rgb(var(--color-green));
   background-color: rgba(var(--color-green),.2);
}

.doc-medicos {
   color: rgb(var(--color-red));
}

.icon-medicos {
   color: rgb(var(--color-red));
   background-color: rgba(var(--color-red),.2);
}

.doc-probatorios {
   color: rgb(var(--color-orange));
}

.icon-probatorios {
   color: rgb(var(--color-orange));
   background-color: rgba(var(--color-yellow),.2);
}

.doc-capacitaciones {
   color: rgb(var(--color-cyan));
}

.icon-capacitaciones {
   color: rgb(var(--color-cyan));
   background-color: rgba(var(--color-cyan),.2);
}

.doc-otros-documentos{
   color: var(--text-color-secondary);
}

.icon-otros-documentos {
   color: rgb(var(--color-gray));
   background-color: rgba(var(--color-gray),.2);
}


/* ///// NOMINAS ///// */
.nominas-container .nomina-item {
   display: flex;
   align-items: center;
   position: relative;
   transition: all .3s;
}

.nominas-container .nomina-item .icon {
   width: 100px;
   height: 100px;
   border-radius: 5px;
   background-color: rgba(var(--color-dark-primary),1);
   color: rgba(var(--color-white),1);
   font-size: 24px;
   display: flex;
   align-items: center;
   justify-content: center;
   transition: all .3s;
}

/* .nominas-container .nomina-item:hover .icon {
   background-color: rgba(var(--color-primary),1);
}

.nominas-container .nomina-item:hover {
   border-color: rgba(var(--color-primary),1);
} */

.nominas-container .nomina-item .info {
   width: calc(100% - 100px);
   padding-left: 25px;
   padding-right: 25px;
}

.nominas-container .nomina-item .dropdown {
   position: absolute;
   top: 15px;
   right: 20px;
}

.nominas-container .nomina-item .dropdown .dropdown-toggle {
   font-size: 24px;
   color: var(--text-color-default);
}

.btn-nom-range {
   border: 1px solid transparent;
   padding: 0.375rem 0.75rem;
   font-size: 14px;
   border-radius: 0.25rem;
   font-weight: var(--font-semibold);
   background-color: var(--bg-color-default);
   border: 1px solid var(--border-color);
   cursor: pointer;
   transition: all .3s;
}

.btn-nom-range:hover {
   color: rgba(var(--color-white),1);
   background-color: rgba(var(--color-dark),1);
   border-color: rgba(var(--color-dark),1);
}

.btn-nom-range:active:focus {
   color: rgba(var(--color-white),1);
   background-color: rgba(var(--color-dark),1);
   border-color: rgba(var(--color-dark),1);
   box-shadow: 0 0 0 0.25rem rgba(var(--color-dark),.3);
}

@media (max-width:575px) {
   .btn-nom-range {
      width: 48%;
      overflow: hidden;
      text-overflow: ellipsis;
      white-space: nowrap;
   }
}

.daterangepicker::after {
   border-bottom: 1px solid transparent;
}

.daterangepicker::before {
   border-bottom: 1px solid transparent;
}

.daterangepicker {
   color: var(--text-color-default);
   background-color: var(--bg-color-default);
   padding: 12px;
   margin-top: 5px;
   font-size: 13px!important;
}

.daterangepicker_input input.active {
   border-color: rgba(var(--color-primary),1);
   box-shadow: 0 0 0 0.25rem rgba(var(--color-primary),.3);
}

.ranges li {
   font-size: 13px;
   background-color: var(--bg-color-elements);
   border: 1px solid var(--bg-color-elements);
   border-radius: 4px;
   color: var(--text-color-default);
   padding: 6px 12px;
   margin-bottom: 8px;
   cursor: pointer;
   font-weight: var(--font-semibold);
   transition: all .3s;
}

.ranges li.active {
   background-color: rgba(var(--color-primary),1);
   border: 1px solid rgba(var(--color-primary),1);
   color: rgba(var(--color-white),1);
}

.ranges li:hover {
   background-color: rgba(var(--color-primary),1);
   border: 1px solid rgba(var(--color-primary),1);
   color: rgba(var(--color-white),1);
}

.daterangepicker .calendar-table {
   border: 1px solid transparent;
   background-color: transparent;
}

.daterangepicker td.off,
.daterangepicker td.off.in-range,
.daterangepicker td.off.start-date,
.daterangepicker td.off.end-date {
   background-color: transparent;
   border-color: transparent;
   /* color: rgba(var(--color-dark),.3); */
   color: var(--icon-color);
}

.daterangepicker td.available:hover,
.daterangepicker th.available:hover {
   background-color: var(--bg-color-elements);
   border-color: transparent;
   color: inherit;
}

.daterangepicker td.in-range {
   background-color: rgba(var(--color-light-primary),.2);
   border-color: transparent;
   color: var(--text-color-default);
}

.daterangepicker td.active, .daterangepicker td.active:hover {
   background-color: rgba(var(--color-primary),1);
   border-color: transparent;
   color: rgba(var(--color-white),1);
}

.daterangepicker .calendar .calendar-table table thead tr th,
.daterangepicker .calendar .calendar-table table tbody tr td {
   font-size: 13px;
}

.daterangepicker .calendar .calendar-table table thead tr th.month {
   font-size: 15px;
}

.daterangepicker td, .daterangepicker th {
   height: 25px;
}

.daterangepicker .applyBtn {
   width: 47%;
   margin-right: 6px;
}

.daterangepicker .cancelBtn {
   width: 47%;
}

/* ///// WTM ///// */
.month {
   margin-bottom: 40px;
}

.month .month-name {
   font-weight: var(--font-bold);
   color: var(--text-color-secondary);
   margin-bottom: 10px;
}

.month .day {
   display: flex;
   margin-bottom: 5px;
}

.month .day:last-child {
   margin-bottom: 0px;
}

.month .day i {
   font-size: 18px;
   margin-right: 16px;
   color: var(--text-color-primary);
}

.month .day .description {
   width: calc(100% - 34px);
}

/* ///// ORGANIGRAMA: DESCRIPCIÓN DE PUESTOS ///// */
.ks-lista-container {
   width: 100%;
   min-height: 100px;
   max-height: 55vh;
   overflow-y: auto;
   border: 1px solid var(--border-color);
   border-radius: 5px;
   padding: 15px;
   transition: all .3s;
}

@media (max-width: 1600px) {
   .ks-lista-container {
      height: 50vh;
   }
}

@media (max-width: 768px) {
   .ks-lista-container {
      height: 260px;
   }
}

.ks-lista-container .grupo {
   margin-bottom: 30px;
}

.ks-lista-container .grupo:last-child {
   margin-bottom: 0px;
}

.ks-card-item {
   width: 100%;
   height: auto;
   /* background-color: var(--bg-color-default); */
   border-radius: 5px;
   padding: 8px 12px;
   margin-bottom: 5px;
   /* border: 1px solid var(--border-color); */
   border: 1px solid transparent;
   display: flex;
   align-items: center;
   justify-content: space-between;
   cursor: pointer;
   transition: all .3s;
}

.ks-card-item .item {
   display: flex;
   width: calc(100% - 30px);
   align-items: center;
}

.ks-card-item .item p {
   margin: 0px;
   line-height: 16px;
   font-weight: var(--font-semibold);
}

.ks-card-item .item i {
   margin-right: 10px;
   font-size: 16px;
   color: var(--icon-color);
}

.ks-card-item .arrow {
   font-size: 16px;
}

.ks-card-item .item i,
.ks-card-item .arrow {
   transition: all .3s;
}

.ks-card-item:hover {
   background-color: var(--bg-color-elements);
   border: 1px solid var(--bg-color-elements);
   /* border: 1px solid var(--border-color); */
}

.ks-card-item:hover i {
   color: var(--text-color-default);
}

.ks-card-item.active {
   background-color: rgb(var(--color-primary));
}

.ks-card-item.active p,
.ks-card-item.active i {
   color: rgb(var(--color-white));
}

.ks-card-item.active {
   border-color: rgb(var(--color-primary));
   /* box-shadow: 0 0 0 0.25rem rgba(var(--color-primary),.3); */
}

.ks-card-item .badge {
   background-color: var(--bg-color-default);
   border: 1px solid var(--border-color);
   color: var(--text-color-default);
}

.ks-card-item.active .badge {
   background-color: rgba(var(--color-light-primary),.3);
   border: 1px solid rgba(var(--color-light-primary),.5);
   color: rgb(var(--color-white));
}

.ks-card-item .item.notificacion {
   align-items: flex-start;
}

.ks-card-item .item.notificacion .date {
   color: var(--text-color-secondary);
   margin-bottom: 3px;
   font-weight: var(--font-bold);
}

.ks-card-item.active .item.notificacion .date {
   color: rgb(var(--color-light-primary));
}

.ks-card-item.sin-leer .item.notificacion i {
   color: rgb(var(--color-primary));
}

.notificacion-remitente img {
   width: 30px;
   height: 30px;
   border-radius: 50%;
   object-fit: cover;
}

/* ///// KS-TABS ///// */
.ks-tabs {
   display: flex;
   flex-wrap: nowrap;
   overflow-x: auto;
}

.ks-tabs .ks-item {
   text-decoration: none;
   padding: 8px 8px;
   border-bottom: 2px solid transparent;
   color: var(--text-color-secondary);
   white-space: nowrap;
   transition: all .3s;
}

.ks-tabs .ks-item:hover {
   color: var(--text-color-default);
}

.ks-tabs .ks-item.active {
   border-bottom: 2px solid rgba(var(--color-primary,1));
   color: var(--text-color-default);
   font-weight: var(--font-bold);
}

.lista-profesionales .profesional {
   display: flex;
   align-items: center;
   margin-bottom: 15px;
}

.lista-profesionales .profesional img {
   width: 28px;
   height: 28px;
   border-radius: 50%;
   object-fit: cover;
   margin-right: 10px;
}

.lista-profesionales .profesional p {
   margin-bottom: 0px;
   line-height: 16px;
}

.lista-profesionales .profesional .img-vacante {
   width: 28px;
   height: 28px;
   border-radius: 50%;
   background-color: var(--bg-color-elements);
   color: var(--text-color-default);
   margin-right: 10px;
   display: flex;
   align-items: center;
   justify-content: center;
}

/* ///// MI EMPRESA ///// */
.logo-mi-empresa {
   width: 100%;
   height: 80px;
   background-color: rgb(var(--color-white));
   position: relative;
   border-radius: 3px;
   transition: background-color .3s;
   padding: 10px;
}

.logo-mi-empresa img{
   width: 100%;
   height: 100%;
   object-fit: contain;
   object-position: center left;
}

/* ///// EVALUACION ///// */
.ks-card-evaluacion {
   display: flex;
   align-items: center;
   justify-content: space-between;
   margin-bottom: 5px!important;
}

.ks-card-evaluacion.active {
   background-color: var(--bg-color-elements);
   /* border-color: rgb(var(--color-primary)); */
   /* box-shadow: 0 0 0 .3rem rgba(var(--color-primary),.2); */
}

.ks-card-evaluacion .icon {
   width: 80px;
   height: 80px;
   background-color: rgb(var(--color-dark-primary));
   color: rgb(var(--color-white));
   font-size: 32px;
   border-radius: 5px;
   display: flex;
   align-items: center;
   justify-content: center;
}

.ks-card-evaluacion.active .icon {
   background-color: rgb(var(--color-primary));
}

.ks-card-evaluacion .info {
   width: calc(100% - 260px);
   padding-left: 30px;
   padding-right: 30px;
}

@media (max-width: 768px) {
   .ks-card-evaluacion .info {
      padding-left: 20px;
      padding-right: 0px;
   }
}

.ks-card-evaluacion .info .progress {
   height: 6px;
}

.ks-card-evaluacion .action {
   width: 180px;
   text-align: right;
}

.ks-card-evaluacion .action .btn-done {
   transition: all .3s;
   cursor: default;
}

[data-theme='light'] .ks-card-evaluacion .action .btn-done {
   background-color: var(--bg-color-default);
   border-color: var(--bg-color-default);
   color: rgb(var(--color-primary));
}

[data-theme='dark'] .ks-card-evaluacion .action .btn-done {
   background-color: var(--bg-color-default);
   border-color: var(--bg-color-default);
   color: rgb(var(--color-white));
}

@media (max-width: 576px) {
   .ks-card-evaluacion {
      flex-direction: column;
   }

   .ks-card-evaluacion .icon {
      width: 60px;
      height: 60px;
      font-size: 28px;
      margin-bottom: 16px;
   }

   .ks-card-evaluacion .info {
      width: 100%;
      padding-left: 0px;
      padding-right: 0px;
      text-align: center;
      margin-bottom: 16px;
   }

   .ks-card-evaluacion .action {
      width: 100%;
      text-align: center;
   }
   .txt-empresa {
      text-align: center;
   }
}

/* ///// LISTA EVALUACION COLABORADORES ///// */
.ks-card-evaluacion-colaborador {
   display: flex;
   align-items: center;
   justify-content: space-between;
   padding: 10px 15px;
   margin-bottom: 7px;
   cursor: pointer;
   text-decoration: none;
}

.ks-card-evaluacion-colaborador:hover {
   /* border-color: var(--text-color-default); */
   background-color: var(--bg-color-elements);
}

.ks-card-evaluacion-colaborador .photo {
   width: 30px;
   height: 30px;
   border-radius: 50%;
   object-fit: cover;
}

.ks-card-evaluacion-colaborador .name {
   width: calc(100% - 260px);
   margin-bottom: 0px;
   padding: 0px 20px;
   line-height: 16px;
   color: var(--text-color-default);
}

@media (max-width: 1400px) {
   .ks-card-evaluacion-colaborador .name {
      padding: 0px 10px;
   }
}

.ks-card-evaluacion-colaborador .progreso {
   width: 210px;
   display: flex;
   align-items: center;
   font-size: 13px;
   visibility: hidden;
}

.ks-card-evaluacion-colaborador .progreso .progress {
   width: 50%;
   height: 5px;
   margin-right: 15px;
}

.ks-card-evaluacion-colaborador .progreso p {
   margin-bottom: 0px;
   color: var(--text-color-default);
}

@media (max-width: 576px) {
   .ks-card-evaluacion-colaborador .name {
      width: calc(100% - 150px);
      padding: 0px 0px 0px 7px;
      display: -webkit-box;
      -webkit-box-orient: vertical;
      overflow: hidden;
      -webkit-line-clamp: 2;
   }

   .ks-card-evaluacion-colaborador .progreso {
      width: 90px;
      justify-content: flex-end;
   }

   .ks-card-evaluacion-colaborador .progreso .progress {
      display: none;
   }
}

.ks-card-evaluacion-colaborador .icon {
   width: 20px;
   text-align: right;
}

.ks-card-evaluacion-colaborador .icon i {
   color: var(--text-color-default);
}

/* PROGRESO GENERAL */
.progreso-general {
   display: flex;
   /* align-items: center; */
   /* padding-top: 3px; */
}

.progreso-general .progress {
   /* width: 260px; */
   width: 100%;
   height: 6px;
   background-color: var(--border-color);
   margin-right: 20px;
   transition: all .3s;
}

/* @media (max-width: 1400px) {
   .progreso-general .progress {
      width: 200px;
   }
}

@media (max-width: 992px) {
   .progreso-general .progress {
      width: 140px;
      margin-right: 10px;
   }
} */

/* @media (max-width: 576px) {
   .progreso-general {
      flex-direction: row-reverse;
      width: 100%;
   }

   .progreso-general h5 {
      width: 60px;
   }

   .progreso-general .progress {
      width: calc(100% - 60px);
      margin-right: 0px;
   }
} */

/* COLABORADOR AVANCE */
.ks-card-evaluacion-colaborador.avance .progreso {
   visibility: visible;
}

/* COLABORADOR COMPLETADO */
.ks-card-evaluacion-colaborador.completado {
   background-color: var(--bg-color-elements);
   cursor: default;
}

.ks-card-evaluacion-colaborador.completado:hover {
   border-color: var(--border-color);
}

.ks-card-evaluacion-colaborador.completado .progreso {
   visibility: visible;
}

.ks-card-evaluacion-colaborador.completado .progreso p {
   font-weight: var(--font-semibold);
}

[data-theme='light'] .ks-card-evaluacion-colaborador.completado .progreso p {
   color: var(--text-color-primary);
}

[data-theme='light'] .ks-card-evaluacion-colaborador.completado .icon i {
   color: var(--text-color-primary);
}

[data-theme='dark'] .ks-card-evaluacion-colaborador.completado .progreso p {
   color: var(--text-color-default);
}

[data-theme='dark'] .ks-card-evaluacion-colaborador.completado .icon i {
   color: var(--text-color-default);
}

/* ///// INSTRUCCIONES ///// */
.wizard-evaluacion .paso {
   width: 100%;
   height: auto;
   display: flex;
   align-items: flex-start;
   justify-content: flex-start;
   margin-bottom: 20px;
   text-decoration: none;
   cursor: default;
}

.wizard-evaluacion .paso:first-child {
   align-items: center;
}

.wizard-evaluacion .paso:last-child {
   margin-bottom: 0px;
}

.wizard-evaluacion .paso .info {
   width: calc(100% - 26px);
   padding-left: 15px;
}

.wizard-evaluacion .paso h6 {
   font-size: 14px;
   line-height: 16px;
   margin-bottom: 5px;
   font-weight: var(--font-regular);
   color: var(--text-color-default);
}

.wizard-evaluacion .paso p {
   line-height: 16px;
   margin-bottom: 0px;
   color: var(--text-color-secondary);
}

.wizard-evaluacion .paso .icono {
   width: 26px;
   height: 26px;
   border: 2px solid var(--border-color);
   border-radius: 50%;
   display: flex;
   align-items: center;
   justify-content: center;
   /* margin-right: 15px; */
   font-size: 18px;
   transition: all .3s;
}

.wizard-evaluacion .paso .icono i {
   display: none;
}

.wizard-evaluacion .paso.activo .icono {
   /* border-color: var(--text-color-primary); */
   border-color: var(--text-color-default);
}

.wizard-evaluacion .paso.activo .icono i {
   display: block;
   color: var(--text-color-default);
   font-size: 24px;
}

.wizard-evaluacion .paso.activo h6 {
   /* color: var(--text-color-primary); */
   font-weight: var(--font-bold);
}

.wizard-evaluacion .paso.completado {
   cursor: pointer;
}

.wizard-evaluacion .paso.completado .icono {
   border-color: var(--text-color-primary);
}

.wizard-evaluacion .paso.completado .icono i {
   display: block;
   color: var(--text-color-primary);
}

.wizard-evaluacion .paso.completado h6 {
   color: var(--text-color-primary);
   font-weight: var(--font-bold);
}

.cont-respuestas {
   display: flex;
   align-items: center;
   flex-wrap: wrap;
   padding-bottom: 10px;
}

.cont-respuestas .item {
   margin-right: 7px;
   margin-bottom: 7px;
}

.cont-respuestas .item:last-child {
   margin-right: 0px;
}

.btn-respuesta {
  color: var(--text-color-secondary);
  border-color: var(--bg-color-elements);
  background-color: var(--bg-color-elements);
}

.btn-respuesta:hover {
  color: var(--text-color-default);
  border-color: var(--border-color);
  background-color: var(--border-color);
}

.btn-check:focus + .btn-respuesta, .btn-respuesta:focus {
  box-shadow: none;
}

.btn-check:checked + .btn-respuesta, .btn-check:active + .btn-respuesta, .btn-respuesta:active, .btn-respuesta.active, .btn-respuesta.dropdown-toggle.show {
  color: rgb(var(--color-white));
  background-color: rgb(var(--color-primary));
  border-color: rgb(var(--color-primary));
}

.btn-check:checked + .btn-respuesta:focus, .btn-check:active + .btn-respuesta:focus, .btn-respuesta:active:focus, .btn-respuesta.active:focus, .btn-respuesta.dropdown-toggle.show:focus {
  box-shadow: none;
}

.btn-respuesta:disabled, .btn-respuesta.disabled {
  color: rgb(var(--color-primary));
  background-color: transparent;
}

/* ///// RESULTADOS ///// */
.accordion-comentarios .comentario {
   display: flex;
   align-items: flex-start;
   margin-bottom: 18px;
}

@media (max-width: 576px) {
   .accordion-comentarios .comentario {
      border-bottom: 1px solid var(--border-color);
      padding-bottom: 18px;
   }

   .accordion-comentarios .comentario:last-child {
      border-bottom: none;
      padding-bottom: 0px;
   }
}

.accordion-comentarios .comentario:last-child {
   margin-bottom: 0px;
}

.accordion-comentarios .accordion-body {
   max-height: 200px;
   overflow-y: auto;
   position: relative;
}

.accordion-comentarios .accordion-collapse {
   position: relative;
}

.accordion-comentarios .accordion-collapse .layer {
   position: absolute;
   left: 0px;
   width: calc(100% - 20px);
   height: 30px;
   transition: all .3s;
}

.accordion-comentarios .accordion-collapse .layer.layer-top {
   top: 0px;
}

.accordion-comentarios .accordion-collapse .layer.layer-bottom {
   bottom: 0px;
}

/* ///// VIÁTICOS ///// */
.ks-card-viatico {
   padding: 20px;
   margin-bottom: 0px;
   height: 100%;
   /* display: flex;
   align-items: center; */
}

.ks-card-viatico.cerrado {
   background-color: var(--bg-color-elements);
}

.ks-card-viatico .estatus,
.ks-card-viatico .folio {
   border-radius: 2px;
   padding: 0px 4px;
   font-size: 13px;
   border: 1px solid transparent;
   font-weight: var(--font-semibold);
   transition: all .3s;
}

.ks-card-viatico .folio {
   color: var(--text-color-secondary);
   margin-bottom: 0px;
}

/* .ks-card-viatico .titulo {
   width: calc(100% - 680px);
}

.ks-card-viatico .fecha-monto {
   width: 440px;
}

.ks-card-viatico .accion {
   width: 240px;
} */

/* .ks-card-viatico .accion .btn {
   margin-top: -3px;
}

@media (max-width: 992px) {
   .ks-card-viatico .accion .btn {
      margin-top: 0px;
   }
} */
/* ///// CHAT ///// */
.chat-cont .item {
   width: 100%;
   display: flex;
   align-items: flex-start;
   margin-bottom: 13px;
   border-radius: 3px;
}

.chat-cont .item.left {
   padding-right: 100px;
   text-align: left;
}

.chat-cont .item.right {
   padding-left: 100px;
   flex-direction: row-reverse;
   text-align: right;
}

.chat-cont .item .user-photo {
   width: 30px;
   height: 30px;
   object-fit: cover;
   margin-top: 3px;
}

.chat-cont .item.left .user-photo {
   margin-right: 7px;
}

.chat-cont .item.right .user-photo {
   margin-left: 7px;
}

.chat-cont .item .msj {
   width: calc(100% - 37px);
   padding: 12px 12px 15px 12px;
   background-color: var(--bg-color-elements);
   border-radius: 3px;
   font-size: 13px;
}

@media (max-width: 576px) {
   .chat-cont .item {
      background-color: var(--bg-color-elements);
   }

   .chat-cont .item.left {
      padding-right: 0px;
      padding-left: 10px;
   }

   .chat-cont .item.right {
      padding-left: 0px;
      padding-right: 10px;
   }

   .chat-cont .item .user-photo {
      margin-top: 14px;
   }

   .chat-cont .item.left .user-photo {
      margin-right: 0px;
   }

   .chat-cont .item.right .user-photo {
      margin-left: 0px;
   }
}

/* .chat-cont .item.left .msj {
   background-color: var(--bg-color-elements);
   border: 1px solid var(--bg-color-elements);;
}

.chat-cont .item.right .msj {
   background-color: var(--bg-color-default);
   border: 1px solid var(--border-color);
} */

.bg-solicitud-resuelta {
   --bs-bg-opacity: 1;
   background-color: rgba(var(--color-primary),1) !important;
}

/* Inicia clases utilizadas en validate */
.checkbox.is_invalid i, .radio.is_invalid i, input.is_invalid, select.is_invalid, textarea.is_invalid {
   border-color: #e84c3d;
}

.is_invalid + label {
   color: #e84c3d;
}

.checkbox.is_valid i, .radio.is_valid i, input.is_valid, select.is_valid, textarea.is_valid {
   border-color: #1ab759;
}

.is_valid + label {
   color: #1ab759;
}

label.is_invalid {
   color: #e84c3d!important;
   font-size: 10px!important;
   font-style: normal!important;
}

label.is_invalid:before{
   font-family: 'FontAwesome';
   content: "\f06a";
   font-size: 13px;
   margin-right: 3px;
}
/* Termina clases utilizadas en validate */

/*
   Clase utilizada para colocar un ícono a derecha dentro de un input, el input y el ícono
   deben estar dentro de un div con clase position-relative.
*/
.icon-inside-right {
   position: absolute;
   top: 0%;
   right: 0%;
   pointer-events: none;
   margin-top: 0.75rem!important;
   margin-right: 1rem!important;
}

/* ////////// COLOR LOADER ////////// */
@keyframes color {
   100%, 0% {
   stroke: #4285f4;

   }
   40% {
      stroke: #4285f4;
   }
   66% {
      stroke: #4285f4;
   }
   80%, 90% {
      stroke: #4285f4;
   }
}

/*/////////////// ESTILOS LOADER CIRCULAR ///////////////////*/
.showbox {
   position: fixed;
   bottom: 0px;
   right: 0px;
   background: rgba(0,0,0,.6);
   z-index: 9999 !important;
   height: 100vh;
   width: 100%;
   display: flex;
   justify-content: center;
   align-items: center;
   flex-direction: column;
}

.loader {
   position: relative;
   margin: 0 auto;
   width: 120px;
   display: flex;
   align-items: center;
   justify-content: center;
}

.loader:before {
   content: '';
   display: block;
   padding-top: 100%;
}

.loader-title {
   margin: 20px 0px 5px 0px;
   font-size: 22px;
   font-weight: 600;
   text-align: center;
   color: #fff;
   text-shadow: 2px 2px 2px rgba(0,0,0,.3)
}

.loader-caption {
   margin-bottom: 20px;
   font-size: 14px;
   text-align: center;
   width: 400px;
   color: #fff;
   text-shadow: 2px 2px 2px rgba(0,0,0,.3)
}

@media (max-width: 600px) {
   .loader-caption {
      width: 90%;
   }
}

.loader-percent {
   font-size: 20px;
   font-weight: 500;
   color: #fff;
   text-shadow: 2px 2px 2px rgba(0,0,0,.3)
}

.circular {
   -webkit-animation: rotate 2s linear infinite;
   animation: rotate 2s linear infinite;
   height: 100%;
   -webkit-transform-origin: center center;
   transform-origin: center center;
   width: 100%;
   position: absolute;
   top: 0;
   bottom: 0;
   left: 0;
   right: 0;
   margin: auto;
}

.path {
   stroke-dasharray: 1, 200;
   stroke-dashoffset: 0;
   -webkit-animation: dash 1.5s ease-in-out infinite, color 6s ease-in-out infinite;
   animation: dash 1.5s ease-in-out infinite, color 6s ease-in-out infinite;
   stroke-linecap: round;
}

@keyframes rotate {
   100% {
      -webkit-transform: rotate(360deg);
               transform: rotate(360deg);
   }
}

@keyframes dash {
   0% {
      stroke-dasharray: 1, 200;
      stroke-dashoffset: 0;
   }
   50% {
      stroke-dasharray: 89, 200;
      stroke-dashoffset: -35px;
   }
   100% {
      stroke-dasharray: 89, 200;
      stroke-dashoffset: -124px;
   }
}

.dark-overlay {
   width: 100%;
   height: 100vh;
   position: fixed;
   top: 0px;
   left: 0px;
   background: rgba(0,0,0,.3);
   z-index: 905;
   display: none;
}

.hide {
   display: none!important;
}

input[type="checkbox"]:disabled {
   cursor: not-allowed !important;
}