/*
Template Name: Dosix - Admin & Dashboard Template
Author: Themesbrand
Website: https://themesbrand.com/
Contact: support@themesbrand.com
File: Custom Css File
*/
:root {
    --tb-header-height: 50px;
}
:root[data-sidebar=dark]{
    --tb-vertical-menu-bg: #000;
}

.page-content{
    padding-top: calc(var(--tb-header-height) + 0.5rem)
}
.nav-pills .nav-link{
    text-align: left;
}

.sortable { cursor:pointer }
.sortable:after { content:" ⇅"; font-size:.8em; color:#999 } 

/* ==========================
   TomSelect dentro de #modalKit
========================== */

/* 1) Que el control ocupe todo el ancho y se vea como form-control */
#modalKit .ts-wrapper,
#modalKit .ts-control {
    width: 100% !important;
}

#modalKit .ts-control {
    min-height: calc(1.5em + .75rem + 2px);
    padding: .375rem .75rem;
    border: 1px solid #ced4da;
    border-radius: .375rem;
    background: #fff;
}

/* 2) Que el dropdown SIEMPRE quede por encima del contenido del modal */
#modalKit .ts-dropdown {
    z-index: 2000 !important;
}

/* 3) Evita “mezcla” visual: el dropdown debe tapar el contenido debajo */
#modalKit .ts-dropdown,
#modalKit .ts-dropdown .ts-dropdown-content {
    background: #fff !important;
}

/* 4) Ajusta altura/scroll para que no se vea raro */
#modalKit .ts-dropdown .ts-dropdown-content {
    max-height: 260px;
    overflow-y: auto;
}

/* 5) Evita que el modal recorte el dropdown */
#modalKit .modal-body {
    overflow: visible !important;
}

/* 6) Mejora de items */
#modalKit .ts-dropdown .option {
    padding: .5rem .75rem;
    line-height: 1.2;
}