:root {
    --ff-light-gray-bg: #eef1f4;
    --ff-light-blue-bg: #ebf0fa;
    --ff-aqua:#d6f5f5;
    --ff-mid-blue: #43658d;
    --ff-light-blue: #b3e6ff;
    --ff-light-green: #c2f0c2;
    --ff-dark-green: #0e6b1d;
    --ff-dark-green-hover: #13411a;
    --ff-primary: #36383a;
    --ff-secondary: #595959;
    --ff-primary-hover-color: #005ce6;
    --ff-secondary-hover-color: #737373;
    --vz-border-color: #32383e;
    --vz-input-border: #2a2f34;
}
[data-layout-mode=dark] .dropdown-menu {
    --vz-dropdown-bg: #272b30;
    --vz-dropdown-link-color: #eff2f7;
    --vz-dropdown-link-hover-color: #d7dade;
    --vz-dropdown-link-hover-bg: #2f343a;
    --vz-dropdown-border-width: 1px;
    --vz-dropdown-link-active-bg: #2f343a;
    --vz-dropdown-link-active-color: #adb5bd
}
.bg-light-blue{
    background-color: var(--ff-light-blue-bg);
}
.bg-mid-blue{
    background-color: var(--ff-mid-blue);
}
.bg-dark-green {
    background-color: var(--ff-dark-green);
}
.ff-btn-primary{
    font-weight: 500;
    color: #fff;
    background-color: var(--ff-primary);
}
.ff-btn-green {
    color: #fff;
    background-color: var(--ff-dark-green);
}
.ff-btn-primary:hover {
    color: #fff;
    background-color: var(--ff-primary-hover-color);
}
.ff-btn-secondary{
    font-weight: 500;
    color: #fff;
    background-color: var(--ff-secondary);
}
.ff-btn-secondary:hover {
    color: #fff;
    background-color: var(--ff-secondary-hover-color);
}
.ff-js-btn {
    cursor: pointer;
}
.page-title-box {
    padding: 10px 1.5rem;
    background-color: #fff;;
    box-shadow: 0 3px 5px rgba(29, 35, 40, 0.15);
    border-bottom: 1px;
    border-top: 1px;
    margin: -23px -1.5rem 1.5rem
}

.page-title-box .breadcrumb {
    background-color: transparent;
    padding: 0
}

.page-title-box h4 {
    font-weight: 700;
    font-size: 15px !important;
    color: #083e8f;
    text-transform: uppercase
}
.dashboard-card-title {
    font-weight: 700;
    font-size: 18px !important;
    color: #083e8f;
    text-transform: uppercase
}
.dashboard-card-number {
    font-weight: 700;
    font-size: 48px !important;
    color: #083e8f;
    padding: 2px;
}
.ff-box {
    border-radius: 10px;
}
.ff-btn-48{
    width: 48px;
    height: 48px;
    cursor: pointer;
    margin: 5px;
}
.ff-btn-32{
    width: 32px;
    height: 32px;
    cursor: pointer;
    margin: 3px;
}
.ff-btn-24{
    width: 24px;
    height: 24px;
    cursor: pointer;
    margin: 2px;
}
.ff-btn-sm{
    width: 32px;
    height: 32px;
    padding: 2px;
    border-radius: 5px;
}
.ff-btn-xs{
    width: 24px;
    height: 24px;
    padding: 1px;
    border-radius: 3px;
}
.ff-img-persona-100{
    width: 100px;
    height: 100px;
    margin: 5px;
    padding: 1px;
    border-radius: 5px;
    cursor: pointer;
}
.ff-img-persona-130{
    width: 130px;
    height: 130px;
    margin: 10px;
    padding: 1px;
    border-radius: 5px;
    cursor: pointer;
}
.ff-img-64 {
    width: 64px;
    height: 64px;
    padding: 2px;
}
.ff-btn-light-blue {
    width: 150px;
    background-color: var(--ff-light-blue);   
}
.ff-btn-light-blue-200 {
    width: 200px;
    background-color: var(--ff-light-blue);   
}
.ff-btn-aqua {
    width: 150px;
    background-color: var(--ff-aqua);
}
.ff-btn-verde {
    width: 150px;
    background-color: var(--ff-light-green);
}
.ff-marca-solicitud {
    font-size: 24px;
    vertical-align: middle;
    align-items: end;
}
.ff-icon-20 {
    font-size: 20px;
    vertical-align: middle;
}
.ff-icon-24 {
    font-size: 24px;
    vertical-align: middle;
}
.ff-group-box {
    border: #737373;
    border-radius: 10px;
    border-style: solid;
    border-width: 1px;
    padding: 10px;
}
.lc-i-frame-box {
    margin: 0px,0px,0px,10px;
    padding: 0px;
    width: 100%;
    height: 100%;
}
.lc-i-frame-link {
    cursor: pointer;
}
.lc-btn-48{
    width: 48px;
    height: 48px;
    cursor: pointer;
    margin: 5px;
}
.lc-btn-32{
    width: 32px;
    height: 32px;
    cursor: pointer;
    margin: 3px;
}
.lc-btn-24{
    width: 24px;
    height: 24px;
    cursor: pointer;
    margin: 2px;
}
.lc-btn-sm{
    width: 32px;
    height: 32px;
    padding: 2px;
    border-radius: 5px;
}
.lc-btn-xs{
    width: 24px;
    height: 24px;
    padding: 1px;
    border-radius: 3px;
}
.lc-img-emp{
    width: 130px;
    height: 130px;
    margin: 10px;
    padding: 1px;
    border-radius: 5px;
    cursor: pointer;
}
.lc-form-title{
    font-size: 14px;
    font-weight: 700;
    color: #fff;
    background-color: #2b4258;
    text-transform: uppercase;
    text-align: center;
    padding: 3px;
}
.ff-control-text {
    color: #083e8f;
    font-size: 18px;
    padding: 5px;
}
.ff-control-text-18 {
    color: #083e8f;
    font-size: 18px;
    padding: 5px;
}
.ff-control-text-14 {
    color: #083e8f;
    font-size: 14px;
    padding: 2px;
}
.ff-tab-title {
    color: #0b54c2;
    font-size: 16px;
    font-weight: 600;
}
.ff-tab-title-12 {
    color: #0b54c2;
    font-size: 12px;
    font-weight: 600;
}
.ff-person-img {
    width: 150px;
    height: 150px;
}
.card-animate {
    border-radius: 12px;
    box-shadow: 0 5px 10px rgba(30, 32, 37, .12);
    transition: all .4s
}
.card-animate:hover {
    transform: translateY(-.3rem);
    box-shadow: 0 10px 15px rgba(30, 32, 37, .12);
    background-color: #eeeaea;
}
.dropdown-head .nav-tabs-custom {
    border: 0;
}

.dropdown-head .nav-tabs-custom .nav-link {
    color: hsla(0, 0%, 100%, .6)
}

.dropdown-head .nav-tabs-custom .nav-link.active {
    background-color: var(--vz-dropdown-bg)
}

.dropdown-head .nav-tabs-custom .nav-link:hover {
    color: #fff
}

.dropdownmenu-primary .dropdown-item.active,
.dropdownmenu-primary .dropdown-item:focus,
.dropdownmenu-primary .dropdown-item:hover {
    background-color: rgba(75, 56, 179, .07);
    color: #1e7eb3
}

.dropdownmenu-secondary .dropdown-item.active,
.dropdownmenu-secondary .dropdown-item:focus,
.dropdownmenu-secondary .dropdown-item:hover {
    background-color: rgba(53, 119, 241, .07);
    color: #3577f1
}

.dropdownmenu-success .dropdown-item.active,
.dropdownmenu-success .dropdown-item:focus,
.dropdownmenu-success .dropdown-item:hover {
    background-color: rgba(69, 203, 133, .07);
    color: #45cb85
}

.dropdownmenu-info .dropdown-item.active,
.dropdownmenu-info .dropdown-item:focus,
.dropdownmenu-info .dropdown-item:hover {
    background-color: rgba(41, 156, 219, .07);
    color: #299cdb
}

.dropdownmenu-warning .dropdown-item.active,
.dropdownmenu-warning .dropdown-item:focus,
.dropdownmenu-warning .dropdown-item:hover {
    background-color: rgba(255, 190, 11, .07);
    color: #ffbe0b
}

.dropdownmenu-danger .dropdown-item.active,
.dropdownmenu-danger .dropdown-item:focus,
.dropdownmenu-danger .dropdown-item:hover {
    background-color: rgba(240, 101, 72, .07);
    color: #f06548
}

.dropdownmenu-light .dropdown-item.active,
.dropdownmenu-light .dropdown-item:focus,
.dropdownmenu-light .dropdown-item:hover {
    background-color: rgba(243, 246, 249, .07);
    color: #f3f6f9
}

.dropdownmenu-dark .dropdown-item.active,
.dropdownmenu-dark .dropdown-item:focus,
.dropdownmenu-dark .dropdown-item:hover {
    background-color: rgba(33, 37, 41, .07);
    color: #212529
}
td.highlight {
    background-color: #3d82e9 !important;
}
 
html.dark td.highlight {
    background-color: rgba(var(--dt-row-hover), 0.082) !important;
}