.vtNavbar {
    background-color: #172d40;
    color: white;
    border: 0;
}

.vtNavbar .navbar-brand {
    align-self: center;
}

@media screen and (min-width: 768px) {
    .vtNavbar {
        height: 60px;
    }
    .vtNavbar .language-switch,
    .vtNavbar .dropdown-user {
        align-self: center;
    }
}

.vtNavbar .dropdown-user img {
    margin-right: 8px;
}

.previewPhotoActionBtn {
    background-color: #ffffff;
    color: #172d40;
    border-radius: 12px !important;
}

.previewPhotoActionBtn:hover {
    color: #172d40;
}

.vtHeaderBtn {
    background: rgb(248, 248, 248) !important;
    color: rgb(125, 125, 125);
    margin: auto 12px auto 12px;
    padding: 17px;
    transition: 0.3s;
    border-radius: 50px;
}

.vtHeaderBtn:hover {
    background: rgb(242, 242, 242) !important;
    border-radius: 50px;
    transition: 0.3s;
}

.vtHeaderBtn i {
    font-size: 32px;
    transition: 1.5s;
}

.vtHeaderBtn .iconLabel {
    color: rgb(125, 125, 125);
    font-size: 16px;
    padding-left: 5px;
}

/************* HOVER ****************/
.vtSettingsBtn i:hover {
    transition: 1.5s;
    transform: rotate(180deg);
}

.vtImportBtn i:hover {
    transition: 1.5s;
    transform: translatey(-5px);
}

.vtFilterBtn i:hover {
    transition: 1.5s;
}
/************************************/

/********** MEDIA SCREENS ***********/
@media screen and (max-width: 1100px) {
    .vtSettingsBtn span {
        transition: 1.5s;
        display: none;
    }

    .vtImportBtn span {
        transition: 1.5s;
        display: none;
    }

    .vtFilterBtn span {
        transition: 1.5s;
        display: none;
    }
}

/************************************/
.sectionHeaderTitle {
    font-weight: bold !important;
}

/* Global styling in every screen */
.vtScreenTitle {
    font-weight: bold;
    color: rgb(75, 75, 75);

}

.vtScreenTitle i {
    padding-right: 10px;
    font-size: 24px;
}

.vtCardHeader {
    border-left: solid 4px #172D40 !important;
    color: #172D40 !important;
    background: rgba(23, 45, 64, 0.05) !important;
    border-top-left-radius: 12px !important;
}

.addColumnBtn {
    transition: all 0.5s ease;

}

.addColumnBtn:hover {
    transition: all 0.5s ease;
    background: rgba(72, 238, 208, 0.1) !important;
    border-color: #c3c3c3 !important;
}
.vtStateBtn {
    text-transform: uppercase;
    font-weight: bold;
    border-radius: 50px;
    font-size: 13px !important;
    transition: all 0.5s ease !important;
    color: #172d40 !important;
    padding: 11px 12px 11px 12px !important;
}

.vtFilterBtn {
    text-transform: uppercase;
    font-weight: bold;
    border-radius: 50px;
    font-size: 13px !important;
    transition: all 0.5s ease !important;
    background: #172d40 !important;
    color: rgb(250, 250, 250);
    padding: 11px 12px 11px 12px !important;
}

.vtDatatablePrimaryBtn {
    background: #172D40 !important;
    color: rgb(240, 240, 240);
    font-weight: bold;
    border-radius: 50px !important;
    font-size: 13px !important;
}

.vtDatatablePrimaryBtn:hover {
    background: #172D40 !important;
    color: white;
}

/*********************************************************************************
 CUSTOM DATATABLE SEARCH FIELD
 ***********************************************************************************/
.vtDatatableSearch {
    border-radius: 25px !important;
    border-color: rgb(175, 175, 175) !important;
    border-width: 1px !important;
    width: 160px !important;
    transition: all 0.3s ease !important;
    font-size: 14px !important;
    float: left;
}

/* .vtDatatableSearch:focus, .vtDatatableSearch:target {
    width: 280px !important;
    transition: all 0.6s ease !important;
} */

/*********************************************************************************
 CUSTOM RESOURCE SEARCH BTN
 ***********************************************************************************/
.vtCustomSearch {
    border-radius: 25px !important;
    border-color: rgb(233, 233, 233) !important;
    border-width: 1px !important;
    width: 120px !important;
    transition: all 0.3s ease !important;
    font-size: 14px !important;
    padding: 3px 10px 3px 10px;

}

.vtCustomSearch:focus, .vtCustomSearch:target {

    transition: all 0.6s ease !important;
}



/********************************************************
*  PRIMARY BUTTON
********************************************************/
.vtPrimaryOuterBtn {
    font-weight: bold;
    border-radius: 35px;
    transition: all 0.5s ease !important;
    font-size: 13px;
    margin-left: 10px;
    margin-right: 10px;
    padding: 7px 20px 7px 20px !important;
    color: #172D40;
    border: solid 2px #172D40;
    background: #f9f9f9;
}

.vtPrimaryBtn {
    font-weight: bold;
    border-radius: 35px;
    transition: all 0.5s ease !important;
    font-size: 13px;
    margin-left: 10px;
    margin-right: 10px;
    padding: 7px 20px 7px 20px !important;
    color: white;
    border: solid 1px rgb(225, 225, 225);
    box-shadow: 0px 0px 2px 1px rgb(223, 223, 223) !important;
    background: #172D40;
}

.vtPrimaryBtn:focus {
    outline: none;
}

.vtPrimaryBtn:hover {
    color: white;
    box-shadow: 0px 0px 7px 2px rgb(110, 110, 110);
    transition: all 0.5s ease !important;
    background: #0d1b27 !important;
    box-shadow: 0px 0px 7px 2px rgb(153, 153, 153) !important;
}

.vtPrimaryLightBtn {
    font-weight: bold;
    border-radius: 35px;
    transition: all 0.5s ease !important;
    font-size: 13px;
    margin-left: 10px;
    margin-right: 10px;
    padding: 7px 20px 7px 20px !important;
    color: #172D40;
    box-shadow: 0px 0px 2px 1px rgb(223, 223, 223) !important;
    background: #fbfbfb;
}

.vtPrimaryLightBtn:focus {
    outline: none;
}

.vtPrimaryLightBtn:hover {
    color: #172D40 !important;
    transition: all 0.5s ease !important;

    background: white !important;
    box-shadow: 0px 0px 7px 2px rgb(212, 212, 212) !important;

}


.vtLightBtn {
    border-radius: 30px;
    transition: all 0.5s ease !important;
    font-size: 15px;
    margin-left: 10px;
    margin-right: 10px;
    padding: 7px 20px 7px 20px !important;
    color: #172D40 !important;
    border: solid 1px rgb(249, 249, 249) !important;
    box-shadow: 0px 0px 3px 1px rgb(211, 211, 211) !important;
    /* background: #f8f8f8; */
}

.vtLightBtn:hover {
    cursor: pointer;
    background: #f1f0f0 !important;
    box-shadow: 0px 0px 7px 2px rgb(223, 223, 223) !important;
    transition: all 0.5s ease !important;
}

.vtButton {
    /* background: rgb(245, 245, 245); */
    color: white !important;
    font-weight: bold;
    border-radius: 25px;
    border: solid 1px rgb(225, 225, 225);
    padding: 7px 12px 7px 12px;
    box-shadow: 0px 0px 3px 1px rgb(207, 207, 207);
    background: #172D40;
    transition: all 0.5s ease !important;
}

.vtButton:hover {
    cursor: pointer;
    transition: all 0.5s ease !important;
}

.vtButtonSecondary {
    /* background: rgb(245, 245, 245); */
    color: rgb(51, 51, 51) !important;
    font-weight: normal;
    border-radius: 25px;
    border: solid 2px #172D40;
    padding: 7px 12px 7px 12px;
    box-shadow: 0px 0px 3px 1px rgb(212, 212, 212);
    background: #f5f5f5;
    transition: all 0.5s ease !important;
}

.vtButtonSecondary:hover {
    cursor: pointer;
    transition: all 0.5s ease !important;
}

.vtTabButton {
    background: rgb(245, 245, 245);
    color: #172D40;
    font-weight: bold;
    border-radius: 0px;
    border: none;
    padding: 7px 12px 7px 12px;
    box-shadow: none;
    transition: all 0.5s ease;
    border-bottom: transparent solid 3px !important;
}

.vtTabButton .active {
    border-bottom: solid 3px #172D40 !important;
    /* background: #172D40; */
    color: white;
    transition: all 0.5s ease;
}

.vtTabButton:hover {
    border-bottom: solid 3px #172D40 !important;
    transition: all 0.5s ease;
}

.vtRowSection {
    padding-top: 20px;
}

/******************************************************************
    FILL FORM
******************************************************************/
.vtFormControl {
    width: 100%;
    background: rgb(250, 250, 250);
    border: none;
    border-bottom: solid 2px #aaaaaa;
    padding: 7px;
    font-size: 15px;
    box-shadow: 0px 0px 1px 3px rgb(250, 250, 250);
    transition: all 0.5s ease;
    border-radius: 4px;
}

.vtFormControl:active, .vtFormControl:focus, .vtFormControl:hover {
    transition: all 0.5s ease;
    border-bottom: solid 2px #172D40 !important;
    /* background: rgba(23, 45, 64, 0.05) !important; */
    background: #EDFEF8 !important;

}

.vtRowSection .select2-selection {
    width: 100%;
    background: rgb(250, 250, 250);
    border: none !important;
    border-bottom: solid 2px #aaaaaa;
    font-size: 15px;
    box-shadow: 0px 0px 1px 3px rgb(250, 250, 250);
    transition: all 0.5s ease;
    border-radius: 4px;
    outline: none !important;
}

.vtRowSection .select2-selection li {
    border-radius: 25px;

}
.vtRowSection .select2-selection:active,  .vtRowSection .select2-selection:focus {
    transition: all 0.5s ease;
    border: none !important;
    border-bottom: solid 2px #172D40 !important;
    background: rgba(23, 45, 64, 0.05) !important;
}

.vtFormControlSelect {
    padding-top: 20px;
}

.vtFormControlSelect .select2-selection, .vtFormControlSelect .my_select {
    width: 100%;
    background: rgb(250, 250, 250);
    border: none !important;
    border-bottom: solid 2px #aaaaaa;
    font-size: 15px;
    box-shadow: 0px 0px 1px 3px rgb(250, 250, 250);
    transition: all 0.5s ease;
    border-radius: 4px;
    outline: none !important;
}

.vtFormControlSelect .select2-selection li, .vtFormControlSelect .my_select {
    border-radius: 25px;
}

.vtFormControlSelect .my_select:active,  .vtFormControlSelect .my_select:focus {
    transition: all 0.5s ease;
    background: rgba(23, 45, 64, 0.05) !important;
}

.vtFormControlSelect .select2-selection:active,  .vtFormControlSelect .select2-selection:focus {
    transition: all 0.5s ease;
    background: rgba(23, 45, 64, 0.05) !important;
}

.pagination-flat .page-item.active .page-link {
    background: #172D40 !important;
    border-radius: 25px !important;
    border-color:  #172D40 !important;
}

.pagination-flat .page-link {
    background-color: transparent;
    border-color: transparent;
    margin-left: -2px;
    border-radius: .1875rem
}

.page-item.disabled .page-link {
    color: #999;
    pointer-events: none;
    cursor: auto;
    background-color: #fff;
    border-color: #ddd
}

.page-link:hover {
    background-color: #f5f5f5 !important;
    border-radius: 25px !important;
}

.dataTables_paginate .paginate_button {
    display: inline-block;
    padding: 0px 0px;
    min-width: 2.25003rem;
    margin-left: .125rem;
    text-align: center;
    text-decoration: none;
    cursor: pointer;
    color: #333;
    outline: 0;
    border: 1px solid transparent;
    border-radius: 25px;
    transition: all ease-in-out .15s
}

.vtFormControlSelect2 .select2-selection li, .vtFormControlSelect2 .my_select {
    border-radius: 25px !important;
}

.vtFormControlSelect2 .select2-search, .vtFormControlSelect2 .select2-selection, .vtFormControlSelect2 .my_select {
    width: 100% !important;
    background: rgb(250, 250, 250);
    border: none !important;
    font-size: 15px;
    box-shadow: 0px 0px 1px 3px rgb(250, 250, 250);
    transition: all 0.5s ease;
    border-radius: 4px;
    outline: none !important;
}

.tofcid {
    transition: all 0.5s ease;
    border-left: solid 3px transparent ;
}

.tofcid:hover {
    transition: all 0.5s ease;
    /* border-left: solid 3px rgb(23, 45, 64) ; */
    background: rgba(23, 45, 64, 0.05);
}


.list-icons-item:after {
    font-size: 24px !important;

}

/*************************************************************
* DATATABLE ACTION BUTTONS
*************************************************************/
.vs-dt-btn {
    /* border-radius: 50px !important;
    box-shadow: 0px 0px 7px 2px rgb(228 228 228);
    border: solid 1px rgb(216, 216, 216) !important; */
    border: none;
    background: none;
    border-radius: 50px !important;
    padding: 7px 15px 7px 15px;
}

.vs-dt-btn:hover {
    /* border-bottom: solid #172D40 3px; */
    background: #f1f1f1;
}

.buttons-colvis {
    border-radius: 50px !important;
    padding: 7px 15px 7px 15px;
}

.vs-dt-btn i {
    padding-right: 0px;
}

.btn-padding-lr {
    margin-left: 2px;
    margin-right: 2px;
}


.filterRow .form-group {
    padding-bottom: 0px;
    margin-bottom: 0px;
}

.select2-dropdown, .daterangepicker {
    z-index: 9999999999999 !important;
}

/* GLOBAL styling for the side filters */

@keyframes actAnimation {
    from {
        position: relative;
        top: 0;
        left: 0;
        width: 0px;
    }

    to {
        position: fixed;
        top: 0;
        left: 0;
        width: 450px;
    }
}


.activeSibebarFilters {
    animation: actAnimation 0.5s normal forwards;
}

@keyframes actAnimation2 {
    from {
        position: relative;
        bottom: 0;
        left: 0;

        width: 0px;
    }

    to {
        position: fixed;
        bottom: 0;
        left: 0;

        width: 450px;
    }
}

.vtBtnUp {
    text-transform: uppercase;

}

.datepicker > div {
    display: inherit;
}

.vtDatatableBulkActionBtn {
    border: solid 1px rgba(23, 45, 64, 0.7);
    background: rgba(23, 45, 64, 0.05);
    border-radius: 50px !important;
}

.activeSibebarFilters2 {
    animation: actAnimation2 0.5s normal forwards;
}

#vtSideFiltersHeaderId {
    background: white;
    z-index: 99999;
}

#vtSideFormFiltersHeaderId {
    background: white;
    z-index: 99999;
}

#vtSideFiltersFooterId {
    background: white;
    z-index: 99999;
}

#vtSideFormFiltersFooterId {
    background: white;
    z-index: 99999;
}

.taskActionBtn {
    background: rgb(248, 248, 248);
    border-radius: 25px;
    padding: 5px;
    font-weight: bold;
    border: solid 1px #172D40 !important;
    color: #172D40;
    transition: all 0.5s ease !important;
}

.taskActionBtn:hover {
    background: #172D40;
    color:  white;
    transition: all 0.5s ease !important;
}

.statusBtn {
    border-radius: 5px;
    padding: 8px 12px 8px 12px;
    font-weight: bold;
    margin-left: 25px;
    font-sizE: 13px  !important;
    color: rgb(75, 75, 75);
}

.DTFC_RightBodyLiner,
.DTFC_RightBodyWrapper {
    overflow: visible !important;
}

.fc-next-button span::after, .fc-prev-button span::after {
    display: none;
}

.hideCalendar, .hideTable {
    overflow: hidden;
    height: 0;
    width: 0;
}

.cusNonActiveTab {
    color: #5A6970;
    padding: 7px;
    border: none;
    border-bottom: solid 4px rgb(240, 240, 240);
    border-radius: 0px;
    text-transform: uppercase;
    font-weight: bold;
    background: rgb(249, 249, 249);
}

.cusActiveTab {
    color: #263238;
    border: none;
    padding: 7px;
    border-bottom: solid 4px #172D40;
    border-radius: 0px;
    text-transform: uppercase;
    font-weight: bold;
    background: rgb(245, 245, 245);
}

.cusActiveTab:focus, .cusNonActiveTab:focus {
    outline:0;
}

/* Convert button label to UPPERCASE */
.vtBtnUp {
    text-transform: uppercase;
}

.cusBtn {
    padding-top: 9px;
    padding-bottom: 9px;
    font-weight: bold;
}
#filterSection .row, #completedFilterSection .row, #scheduledFilterSection .row {
    margin-bottom: 0px;
}

#filterSection .col, #completedFilterSection .col, #scheduledFilterSection .col {
    margin: 5px 2px 5px 2px;
}

.dateSelStyleId button {
    min-width: 320px;
}

.viewModeStyleId {
    min-width: 280px;
}

.filterRow {
    max-width: 850px;
    margin: auto !important;
}

.filterRow button {
    min-width: 180px !important;
}

.taskSectionTab {
    margin: 0px !important;
    width: 2
}

.nav-tabs-bottom .nav-link.active:before {
    background-color: #26a69a;
}

@media screen and (max-width: 340px) {
    .dateSelStyleId button {
        min-width: 200px;
    }
}

@media screen and (max-width: 1024px) {
    .col a, .col button, .col button span {
        font-size: 11px;
    }

    .taskSectionTab {
        font-size: 11px;
        margin-bottom: 5px;
    }
}

/* PREVIEW TASK MODAL */
@keyframes spin {
    0% { transform: rotate(0deg); }
    100% { transform: rotate(360deg); }
}

.assignToHeadings {
    position: relative;
    z-index: 1;
    overflow: hidden;
    text-align: left;

}

.assignToHeadings:after {
    position: absolute;
    top: 100%;
    overflow: hidden;
    width: 100%;
    height: 1px;
    content: '\a0';
    background-color: rgb(210, 210, 210);
    /*margin-left: 15px;*/
}

.assignToHeadings .headingTitle {

    font-weight: bold;
    text-transform: uppercase;
}

.assignToHeadings .headingBar {
    width: 2px;
    height: 100%;
    padding: 2px;
    margin-right: 5px;
    border-radius: 2px;
}
.pendingHeading:after {
    background: #00bcd4;
}

.acceptedHeading:after {
    background: #4caf50;
}

.rejectedHeading:after {
    background: #ff5722;
}

.completedHeading:after {
    background: red;
}

.listsSection ul {
    padding-top: 15px;
    padding-bottom: 15px;
    padding-left: 20px;
    list-style: none;
}

.vtListStyle li {
    padding-top: 5px;
    padding-bottom: 5px;
    border-left: solid 3px transparent;
    transition: 0.3s;
}

.vtListStyle li:hover {
    cursor: pointer;
    padding-left: 20px;
    background: rgba(72, 238, 208, 0.25);
    border-left: solid 3px rgba(72, 238, 208, 0.8);
    transition: 0.3s;
}

.vtListStyle2 {
    padding: 5px 3px;
    border: none;
    cursor: pointer;
    transition: 0.3s;
    border-bottom: solid 1px rgb(245, 245, 245);
}

.vtListStyle2 :hover {
    background: rgb(245, 245, 245);
    transition: 0.3s;
}

.listsSection li {
    padding: 4px;
}

.listsSection li i {
    color: rgb(150, 150, 150);
}

.completedByPerson {

    font-size: 15px;
}

.hiddenElem {
    display: none;
}

.showArrow {
    display: inline-block;
}

.hideArrow {
    display: none;
}

.assignToSection {
    padding-top: 4px;
    padding-bottom: 4px;
}

.expandHideBtn {
    background: none;
    border: none;
    color: rgb(70, 70, 70);
}

.expandHideBtn:focus {
    outline: none;
}

.expandHideBtn:hover {
    color: black;
}

.even-class-row {
    background: rgb(248, 248, 248);
    padding: 7px;
}

.odd-class-row {
    padding: 7px;
}

.emptyData {
    background: rgb(250, 250, 250);
    padding: 7px;
}

.connectionBox {
    margin-top: 15px !important;
    margin-bottom: 15px !important;
}

.connectionBox div {
    margin-left: 4px;
    margin-right: 4px;
    border: solid 1px rgb(245, 245, 245);
}



.activeViewMode {
    background: #172D40;
    color: white;
}




/**
TASK PREVIEW MODAL IMAGE

****/
/* Style the Image Used to Trigger the Modal */
#myImg {
    border-radius: 5px;
    cursor: pointer;
    transition: 0.3s;
}

#myImg:hover {opacity: 0.7;}

/* The Modal (background) */
.imgModal {
    display: none; /* Hidden by default */
    position: fixed; /* Stay in place */
    z-index: 1; /* Sit on top */
    padding-top: 100px; /* Location of the box */
    left: 0;
    top: 0;
    width: 100%; /* Full width */
    height: 100%; /* Full height */
    overflow: auto; /* Enable scroll if needed */
    background-color: rgb(0,0,0); /* Fallback color */
    background-color: rgba(0,0,0,0.9); /* Black w/ opacity */
}

/* Modal Content (Image) */
.imgModal-content {
    margin: auto;
    display: block;
    width: 80%;
    max-width: 700px;
}

/* Caption of Modal Image (Image Text) - Same Width as the Image */
#caption {
    margin: auto;
    display: block;
    width: 80%;
    max-width: 700px;
    text-align: center;
    color: #ccc;
    padding: 10px 0;
    height: 150px;
}

/* Add Animation - Zoom in the Modal */
.modal-content, #caption {
    animation-name: zoom;
    animation-duration: 0.6s;
}

@keyframes zoom {
    from {transform:scale(0)}
    to {transform:scale(1)}
}

/* 100% Image Width on Smaller Screens */
@media only screen and (max-width: 700px){
    .modal-content {
        width: 100%;
    }


    .select2-dropdown, .daterangepicker {
        z-index: 9999999999999 !important;
    }
}

@media screen and (max-width: 768px) {
    .content-wrapper {
        margin-left: 0px !important;
    }

    .content {
        padding: 0px;
    }

    .navbar {
        z-index: 100;
    }

    .sidebar-main {
        display: none;
    }
}

.pageLoadingSpinner {
    display: flex;
    z-index: 9999999999999999999999999999999999999999999999;
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: rgba(0, 0, 0, 0.35);
}

.blurContent {
    filter: blur(7px);
}

.pageLoadingSpinner .innerSpinner {
    z-index: 999999999999999999999999999999999999999999999999999999999999991 !important;
    height: 200px;
    width: 200px;
    background-image: url('../../spinner/spinner_white_150x150.png');
    /* background-image: url('../../spinner/spinner_blue_200x200.png'); */
    /* background-image: url('../../spinner/spinner_red_200x200.png'); */

    animation: spin 6s linear infinite;
    margin: auto;
}

@keyframes spin {
    0% { transform: rotate(360deg); }
    100% { transform: rotate(0deg); }
}
 .tabTextUp {
     text-transform: uppercase;

 }
/* WE WANT THIS */
.vtCustomSidebar {
	background: #172D40;
	border-right: #ebebeb;
	box-shadow: 10px 0 5px -2px #eeeeee;
}

.vtCustomSidebar a {
    border-radius: 100px;
    color: #ebebeb !important;
}

.vtCustomSidebar a:hover {
    background: rgba(255, 255, 255, 0.2) !important;
}

.vtCustomSidebar a i {
    color: #fff;
    font-weight: bold;
}

.vtCustomSidebar .active {
    /* background:rgba(124, 124, 124, 0.1) !important; */
    color: #fff !important;
    background: rgba(255, 255, 255, 0.2) !important;
}

.nav-item-header {
    color: rgb(200, 200, 200) !important;
}

.vtCustomSidebar .nav-sidebar .nav-item-open>.nav-link:not(.disabled), .vtCustomSidebar .nav-sidebar>.nav-item-expanded:not(.nav-item-open)>.nav-link {
    background: none;
}

/* .vtCustomSidebar .sidebar-content {
    overflow-y: auto !important;
	max-height: calc(100vh - 60px) !important;
    -ms-overflow-style: none;
    scrollbar-width: none;
}

.vtCustomSidebar .sidebar-content::-webkit-scrollbar { 
    display: none;
} */

.content {
    padding: 0;
}
.vtCustomTabs a {
    font-size: 14px;
}

.vtCustomTabs .nav-lisk:hover {
    background: rgb(250, 250, 250);
}

.vtCustomTabs .active, .vtCustomTabs a {
    color: #172D40;
}

.vtCustomTabs .active {
    border-bottom: solid 3px #172D40 !important;
    border-top-left-radius: 18px;
    border-top-right-radius: 18px;
    background: rgb(250, 250, 250) !important;
}

.vtCustomTabs .active:before {
    background: none !important;
}

.requiredField {
    color: darkred;
    font-weight: bold;
}

.requiredLabel {
    color: rgb(175, 175, 175);
    font-weight: italic;
}

.vt_formLabel {
    font-size: 15px;
    color: rgb(75, 75, 75);
}

.scollableListWrapper {
    overflow-y: auto;
    max-height: 150px;
}



.requiredLabelAsterix {
    color: darkred;
    font-weight: bold;
}
.vtResourceSearchBlock {
    outline: 0;
    line-height: 1.5385;
    color: #333;
    background-color: #fff;
    border: 1px solid #ddd;
    border-radius: 50px;
}

/******************************************************
* GLOBAL STYLING FOR MODALS
******************************************************/
.vtModalRound {
    border-radius: 12px !important;
}

.vtModalWrapper .modal-content {
    border-radius: 12px !important;
}

.vtModalWrapper .modal-header {
    height: 70px;
    background: #172D40;
    color: rgb(236, 236, 236);
    border-top-left-radius: 12px;
    border-top-right-radius: 12px;
}

.vtFormBtn {
    border-radius: 25px;
    color: #333;
    background-color: #fafafa;
    border-color: #ddd;
}


/************************************
* CUSTON TABS
************************************/

.vtTabNavItem:hover {
    background:rgb(248, 248, 248) !important;
    border-top-left-radius: 17px;
    border-top-right-radius: 17px;
    transition: all 0.5s ease !important;
}

.vtTabNavItem {
    font-size: 14px;
    transition: all 0.5s ease !important;
}

.vtTabNavLink.active:before {
    background: #172D40 !important;
    height: 4px;
}

@media screen and (max-width: 768px) {
    .vtTabNavLink.nav-link {
        padding: .625rem .75rem;
    }
}

.settingsRightBorder {
    border-right: solid red 1px;
}

.settingsLeftBorder {
    border-left: solid rgb(207, 207, 207) 1px;
}

.vtTextTab {
   text-transform: uppercase;
}


.requiredField {
    color: darkred;
    font-weight: bold;
}

.requiredLabel {
    color: rgb(175, 175, 175);
    font-weight: italic;
}

.vt_formLabel {
    font-size: 14px;
    color: rgb(75, 75, 75);
    margin-bottom: 0px;
    padding-bottom: 0px;
    padding-top: 5px;
}

.requiredLabelAsterix {
    color: darkred;
    font-weight: bold;
}


.lockIcon {
    color: #172D40 !important;
    opacity: 0.5;
}



.card-header {
    margin-bottom: 10px !important;
    padding: 20px 15px 20px 15px !important;
}

.modal-content {
    border: none;
}

/* TOASTR - START */
.toastr-buttons {
    justify-content: flex-end;
    display: flex;
    margin-top: 12px;
}
.toastr-buttons #toastr-yes,
.toastr-buttons .toastr-yes {
    background: white;
    color: #172d40;
}
.toastr-buttons #toastr-no,
.toastr-buttons .toastr-no {
    background: #fafafa;
    color: #172d40;
}
.toastr-buttons button {
    border: 0;
    padding: 5px 20px;
    margin: 0 4px;
    border-radius: 100px;
}
#toast-container>div {
    opacity: 1 !important;
    border-radius: 10px !important;
    box-shadow: 0 0 10px rgba(0,0,0,0.3) !important;
    border: 0 !important;
    transition: all 0.3s ease !important;
}
#toast-container>.toast-info {
    background-color: #224a6d !important;
}
#toast-container>div:hover {
    box-shadow: 0 0 10px rgba(0,0,0,0.7) !important;
}
/* TOASTR - END */


.isColInvisible {
    opacity: 0.30 !important;
}



/**********************************************
* CUSTOM LIST
**********************************************/
.blueTextLink { color: rgba(49, 150, 243, 0.8); cursor: pointer; }
.blueTextLink:hover { color: rgb(15, 86, 153); }
.vtListEvenRow { background: rgb(245, 245, 245); }
.vtListOddRow { background: rgb(253, 253, 253); }

.vtSimpleListClean {
    list-style-type: none;
    padding-left: 0px;
}

.vtListSparce {
    padding: 7px 10px 7px 10px;
}

.previewList {
    padding-left: 0px;
    padding-bottom: 0px;
    margin-bottom: 0px;
    list-style-type: none;
}

.previewList li {
    padding: 7px 10px 7px 10px;
}

.previewList li:hover {
    background: rgb(242, 242, 242);
}



/* The link column of datatable */
.tableColLink {
    font-weight: bold;
}

/*****************************************************************
* GLOBAL FORM (DOM ELEMENT) STYLE OVERIDE
*****************************************************************/

.select2-results__option[aria-selected=true] {
    background: #172D40 !important;
}

.select-results__option[aria-selected=true] {
    background: #172D40 !important;
}

.picker--focused .picker__day--highlighted, .picker__day--highlighted, .picker__day--highlighted:hover {
    background: #172D40 !important;
}

.select-selection--multiple .select2-selection__choice {
    background: #172D40 !important;
    border-radius: 50px !important;
}

.vtDTToolip {
    overflow: hidden;
    white-space: nowrap;
    text-overflow: ellipsis;
    max-width: 300px;
    display: inline-block;
}

.selected td {
    /*background-color: rgba(72, 238, 208, 0.60) !important;*/
    background-color: #ECFEFA !important;
}

.login-wrapper button {
    border-radius: 50px;
    background: #172D40;

    font-size: 14px;
    text-transform: uppercase;
    color: white;
    font-weight: bold;
}

.login-wrapper button:hover {
    color: white;
}

.login-wrapper .login-form {
    border-radius: 17px;
    box-shadow: 0px 0px 7px 1px rgb(180, 180, 180);
}

.login-wrapper input {
    border-radius: 50px;
}

.login-wrapper input:focus {
    box-shadow: 0px 0px 7px 1px rgb(210, 210, 210);
}

/*********************************************************
*
* NEW FORM FILLTER (18 Oct 2021 - VT)
*
*********************************************************/

/* MODAL / FULL SCREEN */
.modal-full-wrapper .modal-dialog {
    /* min-width: 100%; */
    height: 100%;
    /* margin: 0;
    padding: 0 !important; */
}

.modal-full-wrapper .modal-content {
    height: auto;
    min-height: 100%;
    border-radius: 12px;
}

/* The whole modal box */
.modal-full-wrapper {
    border-radius: 12px;
}

.full-height {
    height: 100%;
}

/* Place the logo (if exits) side by side with the title */
.modal-header-grid {
    display: grid;
    grid-template-columns: 100px auto;
}

.modal-header-logo {
    height: 100px;
    line-height: 95px;
}

.modal-header-logo img {
    display:inline-block;
    vertical-align: middle;
}

.modal-header-content {
    width: 100%;
    padding-bottom: 15px;
}

/* .modal-header-content .modal-title {
    font-weight: bold;
} */

/* Modal Title */
.modal-header-content .form-modal-title {
    font-weight: bold !important;
    text-transform: uppercase !important;
    font-size: 1.4rem;
    display: flex;
    align-items: center;
    justify-content: left;
}

/* Modal DateTime */
.modal-header-content, .modal-header-content .form-modal-user {
    font-size: 1rem;
    line-height: 1.1rem;
}

.modal-header-content button {
    opacity: 0.8;
}


.modal-header-divider {
    /* padding-bottom: 20px !important; */
    /* border-bottom: solid 1px #e2e2e2;
    -moz-box-shadow: 0 4px 4px #f1f1f1;
    -webkit-box-shadow: 0 4px 4px #f1f1f1;
    box-shadow: 0 4px 4px #f1f1f1; */
    width: 100%;
}


/* Style the footer of the modal */
.modal-footer-divider {
    padding-top: 20px !important;
    border-top: solid 1px #e2e2e2;
    -webkit-box-shadow: 0px -4px 3px #f1f1f1;
    -moz-box-shadow: 0px -4px 3px #f1f1f1;
    box-shadow: 0px -4px 3px #f1f1f1;
    background: #fff !important;
    z-index:1;
}

/* If you delete this, the footer items will be collapsed */
.modal-footer-divider .row {
    width: 100vw;
}

@media screen and (max-width: 1366px) {
    .modal-footer-divider {
        padding: 7px !important;

    }
}

/* Close Button */
/* .modal-header-content .close {
    position: absolute;
    top: 15px;
    right: 35px;
    font-size: 40px;
    transition: 0.3s;
    color: #4b4b4b;
}

.modal-header-content .close:hover {
    color: black !important;
} */
.tocHeaderTitle {
    padding: 12px 7px 12px 7px;
    color: rgb(149, 149, 149);
    font-size: 0.8rem;
    font-weight: bold;
}


.highlightRow {
    background: rgb(240, 242, 246);
    border-radius: 3px;
}

.tocOddRow {
    background: red;
}

.tocEvenRow {
    background: green;
}

.toc-item {
    padding: 10px 7px 10px 7px;
    transition: all 0.3s ease;
}

.tocRowTitle {
    font-weight: bold;
    font-size: 0.8rem;
}

.toc-item:hover {
    cursor: pointer;
    background: rgb(240, 242, 246);
    border-radius: 3px;
    transition: all 0.3s ease;
}

.customPageSwitcher .pageTextLabel {
    color: rgb(77, 77, 77);
    font-size: 0.8rem;
    font-weight: bold;
    padding: 7px 12px 7px 12px;
    border-radius: 3px;
}

.customPageSwitcher .pageTextLabel:hover {
    cursor: pointer;
    background: rgb(240, 242, 246);
    transition: all 0.3s ease;
}

.reverseArrow {
    transform: rotate(180deg);
    transition: all 0.3s ease;
}

.tocplace:hover {
    cursor: pointer;
}

.fixedCVMCol {
    font-size: 14px !important;
    border: 1px solid rgba(0,0,0,.15);
    border-radius: .1875rem;
    box-shadow: 0 .25rem .5rem rgba(0,0,0,.1);
    border-bottom: none;
}

.fixedCVMCol .innerAttr {
    /* padding-left: 32px; */
    font-size: 0.8rem;
}

.cvmVisibility {
    height: 30px;
    width: 30px;
    padding: 5px;
    border-radius: 200px;
    border-radius: 200px;
    position: absolute;
    right: 15px;
    top: 5px;
}

.datatableColumnRound {
    width: 100%;
    border-radius: 25px;
    font-weight: bold !important;
    font-size: 12px;
    padding: 7px 12px 7px 12px;
}

.light-gray {
    background-color: #f6f5f5;
}

.selected-accordion {
    background-color: red;
}

.roundedgrey {
    border-radius: 50px !important;
    color: #323232 !important;
    font-weight: bold !important;
}

.pageFlexContainer{
    display: flex;
}

.tocFlexSection {
    flex: 0 0 50px;
    transition: all 0.3s ease;
}

.tocFlexSectionExpanded {
    flex: 0 0 300px !important;
    transition: all 0.3s ease;
    width: 300px;
}

.formFlexSection {
    flex: 1;
}

.flexColSection {
    padding: 10px;
}

@media screen and (max-width: 1000px) {
    .fillFormModalFooterBtnText {
        display: none;
    }
}

/*?**************************************************************
 * FORM TEMPLATE SUBMISSION
 ***************************************************************/

/* Form Field Block */
.formFieldList .formFieldBlock {
    border: dashed 1px rgb(226, 226, 226);
    border-radius: 12px;
    padding: 10px ;
    margin-top: 4px !important;
    margin-bottom: 4px !important;
}

/* Custom styling for the description field in the fill form modal/page */
.formSubmitDescriptionFieldCustomStyle {
    transition: all 0.3s ease;
    padding: 4px;

    background: rgba(72, 238, 208, 0.1) !important;
    border: solid 2px rgba(72, 238, 208, 0.2) !important;
    border-bottom: solid 2px rgba(23, 45, 64, 0.8) !important;
}

.signatureBlock {
    background: #f9f9f9;
    border-radius: 7px;
    border: solid 1px rgb(128, 128, 128);
}

/*?**************************************************************
 * FORM FIELDS
 ***************************************************************/

/* Field Label */
.formFieldLabel {
    font-size: 15px;
    color: rgb(75, 75, 75);
}

/* Field Required Asterix */
.formFieldRequired {
    color: red;
    font-weight: bold;
}

/* Field Input */
.formFieldInput {
    border: solid 2px transparent;
    border-bottom: solid 2px rgba(23, 45, 64, 0.15) !important;
    background: #f9f9f9 !important;
    transition: all 0.3s ease;
    border-radius: 5px;
}

.formFieldInput:active, .formFieldInput:focus {
    transition: all 0.3s ease;
    background: rgba(72, 238, 208, 0.1) !important;
    border: solid 2px rgba(72, 238, 208, 0.2) !important;
    border-bottom: solid 2px rgba(23, 45, 64, 0.8) !important;
}

/*?**************************************************************
 * ACTION BUTTONS
 ***************************************************************/
.vt-btn-icon {
    font-size: 20px !important;
    color: #4e4e4e;
}

.vt-btn-icon:hover {
    color: black;
}

/* PRIMARY SUBMIT BUTTON */
.btnDark {
    background: rgba(23, 45, 64, 1);
    color: #f5f5f5;
    border-radius: 50px;
}

.btnDark:hover, .btnDark:focus {
    background: rgba(23, 45, 64, 0.9);
    color: white;
}

/* SECONDARY SUBMIT BUTTON */
.btnBorder {
    background: #f5f5f5;
    color: #172d40;
    border-radius: 50px;
    border: solid 1px #172d40;
}

/* BUTTON PLACEGHOLDER FOR LIGHT ACTIONS eg. cancel */
.btnLight {
    background: #f5f5f5;
    border-radius: 50px;
    color: #172d40;
}

.btnRounded {
    border-radius: 50px;
}

.editCircleIconBtn {
    background: transparent;
    border: none;
    border-radius: 50px;
    color: #172d40;
    font-size: 15px;
    padding: 7px 15px 7px 15px;
    transition: all 0.3s ease;
}

.editCircleIconBtn i {
    font-size: 20px;
    /* margin-right: 5px; */
}

.editCircleIconBtn:hover {
    cursor: pointer;
    background: rgb(236, 236, 236);
    transition: all 0.3s ease;
}
/*?**************************************************************
 * PREVIEW IMAGE (in a modal)
 ***************************************************************/

.history-span{
    font-size: 14px;
    font-weight: normal;
}
.history-name{
    font-size: 14px;
}

.btnIconGreen {
    color: #48eed0;
    font-weight: bold;
    border-radius: 50px;
    transition: all 0.3s ease;
}

.btnIconGreen:hover {
    background: #48eed0;
    color: black;
    transition: all 0.3s ease;
}

.previewImageModalActionBtn {
    color: #48eed0;
    border: solid 2px #48eed0;
    font-weight: bold;
    border-radius: 50px;
}
.previewImageModalActionBtn:hover {
    background-color: #48eed0 !important;
    color: black;
}

.card-img-actions-overlay {
    background-color: rgba(0, 0, 0, 0.7) !important;
    border-radius: 7px;
}

.previewImageWrapper .cropper-bg .cropper-modal {
    opacity: 0 !important;
}

.cropper-bg {
    background: white !important;
}
.openSlider {
    width: 45% !important;
    opacity: 1 !important;
}

@media screen and (max-width: 1280px) {
    .openSlider {
        width: 60% !important;
    }
}

@media screen and (max-width: 1024px) {
    .openSlider {
        width: 100% !important;
    }
}

.smartSearchClearOptionsBtn {
    background: rgba(184, 4, 4, 0.85);
    color: #fff;
    border-radius: 50px;
    padding: 5px 15px 5px 15px;
    margin-top: 3px;
    font-size: 12px;
    display: block;
}

.smartSearchClearOptionsBtn:hover {
    background: rgba(184, 4, 4, 1);
    cursor: pointer;
    color: #fff;
}

.activeSmartSearch {
    border-bottom: solid 3px green;
}

.inactiveSmartSearch {
    border-bottom: solid 3px transparent;
}

.preview_image_button {
    color: #48eed0;
    border: solid 2px #48eed0;
    border-radius: 50px;
}

.preview_image_button:hover,
.preview_image_button:focus {
    color: #172D40;
    background: #48eed0;
}

.circleCloseModalBtn {
    font-size: 36PX;
    font-weight: bold;
    color: #111111 !important;
}

.cropper-modal {
    opacity: 0 !important;
}

/* Used to wrap everything in the external user screen */
.pageWrapper {
    background: white;
    border: solid 1px rgb(228, 228, 228);
    border-radius: 12px;
    box-shadow: 0px 2px 5px rgb(212, 212, 212);
    padding: 20px;
    margin: 50px auto 50px auto;
    width: 80%;
    max-width: 1000px;
}


.fillFormModalHeader {
    width: 100%;
}

.fillFormModalHeader .container {
    display: flex;
}

.fillFormModalHeader .box {
    flex: 1;
    display: flex;
    justify-content: center;
}

.fillFormModalHeader .box:first-child { justify-content: left; }
.fillFormModalHeader .box:last-child { justify-content: right; }
.fillFormModalHeader .box:first-child > span { margin-right: auto; }
.fillFormModalHeader .box:last-child  > span { margin-left: auto;  }

/* non-essential */
.fillFormModalHeader .box {
    align-items: center;
}

.fill-form-modal-title {
    font-size: 1.15rem;
    font-weight: bold;
}

.form-field-description {
    border: 2px solid transparent; 
    font-size: 1rem; 
    outline: none; 
    width: 100%; 
    min-width: 300px; 
    border-radius: 4px; 
    padding: 5px 0px 5px 0px; 
    border-bottom: solid 2px transparent;
}

.form-field-description:focus {
    transition: all 0.3s ease;
    border-radius: 5px;
    background: rgba(72, 238, 208, 0.1) !important;
    border: solid 2px rgba(72, 238, 208, 0.2) !important;
    border-bottom: solid 2px rgba(23, 45, 64, 0.8) !important;
}

/* New indicator for any new features */
.newFeature {
    position: relative;
    right: -5px;
    border-radius: 50px;
    padding-left: 7px;
    padding-right: 7px;
    border: 1px solid #48eed0cc;
    color: #48eed0cc;
    font-size: 12px;
}

.iconLight { color: rgb(160, 160, 160); }
.br-7 { border-radius: 7px; }
.br-12 { border-radius: 12px; }
.br-20 { border-radius: 20px; }
.br-50 { border-radius: 50px; }

.fs-l { font-size: 1.35rem; }
.fs-m { font-size: 1rem; }

.p-10 { padding: 10px; }

.fillFormDateWrapper {
    /* background: rgba(232, 234, 236, 0.5);
    border-bottom-left-radius: 20px;
    border-bottom-right-radius: 20px; */
    /* position: absolute;
    top: 0;
    padding: 12px; */
    /* color: #455766;
    border: solid 1px rgba(232, 234, 236, 0.5);
    box-shadow: 0px 0px 5px 1px #f0f1f3; */
}

.fillFormDateText {
    /* font-weight: bold; font-size: 1rem; text-align: center; */
}

.fillFormCreatedBy {
    /* font-size: 0.9rem; text-align: center; */
}

.chooseFileButton {
    background: #f2f2f2;
    border-radius: 7px;
    cursor: pointer;
}
.vtModalFullScreen {
    padding: 0px !important;
}

.vtModalFullScreen .modal-dialog {
    max-width: 100% !important;
    width: 100%;
    height: 100%;
    margin: 0;
    padding: 0;
}

.vtModalFullScreen .modal-content {
    height: auto;
    min-height: 100%;
    border-radius: 0;
}

.imagePreviewButtonToolbar {
    position: absolute;
    left: 0;
    bottom: 0;
    width: 100%;
    padding: 25px;
}

.image-cropper-container {
    height: calc(100vh - 150px) !important;
}
/******************************************************
* Prevent Submit Modal
******************************************************/
.vtPreventSubmitModal .modal-header {
    border-bottom: solid 2px rgba(255, 165, 0, 0.8);
    border-top-left-radius: 12px;
    border-top-right-radius: 12px;
    background: rgba(255, 165, 0, 0.2);
}

.vtPreventSubmitModal .modal-title {
    font-weight: bold;
    color: #4b4b4b;
}

.vtPreventSubmitModal .modal-title i {
    font-size: 32px;
    color: #f38908;
    font-size: 28px;
}

.vtPreventSubmitModal .preventSubmitContent {
    line-height: 1.5;
}
/*****************************************************/




.vtModalFullScreen .modal-dialog {
    width: 100%;
    height: 100%;
    margin: 0;
    padding: 0;
}

.vtModalFullScreen .modal-content {
    height: auto;
    min-height: 100%;
    border-radius: 0;
}

.select2-container {
    margin-left: 0px !important;
    margin-right: 0px !important;
}


/*
DATE TIME PICKERS
*/

.dateTimePickerApplyBtn {
    background: rgba(23, 45, 64, 0.85);
    color: #f5f5f5 !important;
    border-radius: 7px;
    margin-left: 5px;
    margin-right: 5px;
}

.dateTimePickerApplyBtn:hover, .dateTimePickerApplyBtn:focus {
    background: rgba(23, 45, 64, 1);
}

.dateTimePickerCancelBtn {
    background: rgba(23, 45, 64, 0.1);
    color: #172D40;
    border-radius: 7px;
    margin-left: 5px;
    margin-right: 5px;
}

.dateTimePickerCancelBtn:hover, .dateTimePickerCancelBtn:focus {
    background: rgba(23, 45, 64, 0.15);
}

.input-append.date > button {
    background-color: #ffffff;
    text-align: left;
}

.formTemplatesGridRow {
    display: grid;
    /*
        35px -> minus button
        100px -> toggle switch
        auto -> dropdown
    */
    grid-template-columns: auto 145px 35px;
}


/*******************************************************
*
* SELECT2 CUSTOM STYLES
*
*******************************************************/

/* Override the select2 class styling */
.select2-selection--multiple .select2-selection__choice {
    background: rgba(23, 45, 64, 0.1);
    color: #172d40;
    border-radius: 50px;
}

.select2-selection--multiple .select2-selection__choice:hover {
    color: #f6f6f6;
}

.select2-selection__choice__remove {
    font-size: 1.5rem !important;
    line-height: 0.6 !important;
}

/* Place the field label over the field border */
.componentConnBlock {
    position: relative;
    padding: 8px 3px 3px 3px;
    border: 2px solid #e3e3e3;
    border-radius: 7px;
    margin-top: 15px;
}

.componentConnBlock>label{
    position: absolute;
    top: -15px;
    left: 20px;
    background-color: white;
    padding-left: 7px;
    padding-right: 7px;
}

.componentConnBlock .select2-selection--multiple:not([class*=bg-]):not([class*=border-]) {
    border: none;
}

.select2-container .select2-search--inline { width: 100% !important; }
.select2-container .select2-search--inline .select2-search__field { width: 100% !important; }

.select2-container li.select2-search.select2-search--inline:not(:first-child) {
    height: 0;
    overflow: hidden;
}

.select2-container.select2-container--focus li.select2-search.select2-search--inline {
    height: unset;
    overflow: unset;
}

#statusTableFilterContainer .select2-container ul {
    height: 32px;
}
#statusTableFilterContainer .select2-container li.select2-search.select2-search--inline:not(:first-child) {
    display: none;
}
#statusTableFilterContainer .select2-container li.select2-search.select2-search--inline input {
    caret-color: transparent;
    cursor: pointer;
    padding-right: 15px !important;
    text-align: center;
    width: 110px !important;
}
#statusTableFilterContainer .select2-container .select2-selection--multiple .select2-selection__choice {
    margin-top: 0.05rem;
}
#tableStateContainer .datePickerPlaceHolderId {
    height: 34px;
}

/* Y Scroll in case of many elements */
.multipleDropdownScrollY {
    overflow-y: auto;
    max-height: 250px;
}

/* Green border once smart search is active */
.smartSearchBorder {
    border: solid 2px green;
}

/*******************************************************
*
* COMPONENT FIELDS
*
* The following styles apply to:
* - textFieldComponent
* -
*******************************************************/
.componentFieldLabel {
    font-size: 14px;
    color: rgb(75, 75, 75);
}

/* Required Field Highlight */
.requiredFieldRequiredBorder {
    border: solid 2px green !important;
}

/* Required Field Asterix */
.componentFieldRequiredAsterix {
    color: #D0342C;
}

/* Required Field Alert Message (bottom) */
.componentFieldRequiredAlertMessage {
    color: #D0342C;
}

.slider-form-list {
    border-bottom: solid 1px rgb(219, 219, 219);
    display: grid;
    grid-template-columns: 35px 30px 2fr 120px 1fr 1fr 1fr;
    overflow-x: auto;
}

.slider-form-list div {
    align-self: center;
}

.request-slider-task-list-grid-layout {
    border-bottom: solid 1px rgb(219, 219, 219);
    display: grid;
    grid-template-columns: 2fr 1fr;
}

.request-slider-task-list-grid-layout div {
    align-self: center;
}

.slider-scroll-wrapper {
    overflow-y: auto;
    height: calc(100vh - 285px);
}

.request-slider-task-list-grid-layout {
    border-bottom: solid 1px rgb(219, 219, 219);
    display: grid;
    grid-template-columns: 2fr 1fr;
}

/* .request-slider-task-scroll-wrapper {
    overflow-y: auto;
    max-height: 250px;
} */

#request_history > .slider-scroll-wrapper > .row {
    margin-right: 0;
    margin-left: 0;
}

.btnRemovePropertyOption {
    border-radius: 25px;
    border: solid 1px rgb(210, 210, 210);
}

.form-logo-field {
    max-width: 350px;
}

.mobile-hide {
    display: none;
}

@media screen and (max-width: 500px) {
    .pageWrapper {
        margin: 0px auto;
        width: 100%;
    }

    .tocFlexSection {
        display: none;
    }

    .form-logo-field {
        max-width: 135px;
    }

    .form-field-description {
        min-width: auto;
    }

    .mobile-hide {
        display: inline;
    }

    .fill-form-footer-mobile {
        position: fixed;
        bottom: 0px;
        left: 0;
        right: 0;
        width: auto !important;
        background: white;
        padding-top: 12px;
        padding-bottom: 12px;
    }

    .opacity-0-mobile {
        display: none;
    }
};

/* Used for the criticaliy column in the datatables */
.table-criticality {
    font-size: 12px; 
    font-weight: bold; 
}
.expiredYes {
    color: red;
    font-weight: bold;
}

.vt-pb-0 {
    padding-bottom: 0 !important;
}

.datatable-title {
    white-space: normal;
    max-height: 80px;
    overflow: hidden;
    width: 350px !important;
}

.people-name-column {
    display: inline-block;
    min-width: 100px;
    max-width: 300px;
    white-space: normal;
    word-wrap: break-word;
    overflow: hidden;
}

.fixedHeader-floating {
    position: relative;
}

.vt-page .card-header {
    margin-bottom: 0px !important;
}

/* Custom Sidebar for the main menu */
.sidebar-content {
    overflow: auto !important;
	height: calc(100vh - 60px);
}

.sidebar-content::-webkit-scrollbar {
    width: 0.5em;
}

.sidebar-content::-webkit-scrollbar-track {
    box-shadow: inset 0 0 6px rgba(0, 0, 0, 0.3);
}

.sidebar-content::-webkit-scrollbar-thumb {
    background-color: #b9c0c5;
    outline: 1px solid #b9c0c5;
    border-radius: 25px;
}

/* Custom datatable style override */
.vt-dt-pagination-arrow {
    font-size: 2rem;
}

.vt-filter {
    background: none;
    color: rgb(75, 75, 75);
    margin: auto 0px auto 0px;
    border-radius: 50px;
    border: none !important;
    outline: none !important;
    padding: 1em;
}

.vt-filter i {
    font-size: 25px;
}

.vt-custom-table td {
    padding: 10px 15px !important;
}

.vt-icon-hover-rotate {
    transition: 1.5s;
}

.vt-icon-hover-rotate:hover {
    transition: 1.5s;
    transform: rotate(180deg);
}

.vt-icon-hover-jump {
    transition: 0.8s;
}

.vt-icon-hover-jump:hover {
    transition: 0.8s;
    transform: translatey(-5px);
}

.dt-tooltip {
    cursor: pointer;
}

.dt-tooltip .tooltiptext {
    visibility: hidden;
    width: 120px;
    background-color: black !important;
    color: #fff;
    text-align: center;
    border-radius: 6px;
    padding: 5px 0;

    /* Position the tooltip */
    position: absolute;
    z-index: 1;
}

.dt-tooltip.active .tooltiptext {
    visibility: visible;
}

.tek-active-icon {
    color: green;
}

.tek-reject-icon {
    color: #Ca1616;
}

.tek-pending-icon {
    color: #2196F3;
}

.simple-text-badge {
    border-radius: 50px;
    font-size: 0.6rem;
    position: absolute;
    top: -3px;
    right: -3px;
    border: solid 1px #172D40;
    font-weight: bold;
    color: #172D40;
    padding: 1px 5px;
}

.vtHome .card-body {
    padding: 0.1rem 1.25rem;
}

.vtPowerBIReportContainer {
    width: 100%;
    aspect-ratio: 16 / 8.4;
}

.vtPowerBIReportContainerWithDropdown {
    width: 100%;
    aspect-ratio: 16 / 7.8;
}

.vtPowerBIReportContainer iframe {
    border: none;
}

.vtPowerBIReportContainerWithDropdown iframe {
    border: none;
}

/* Used for External Users Form */
.external-form-bg {
    background: #f1f1f1;
    height: 100%;
}

.border-bottom-grey {
    border-bottom: solid 1px #acacac !important;
}

.form-cross-icon {
    position: relative;
    left: -30px;
    top: 8px;
    background: white;
    border-radius: 25px;
}

.menu-item-moved {
    display: block;
    background: rgba(0, 255, 0, 0.25);
    border-radius: 50px;
    padding: 0px 10px;
    color: lime;
    font-weight: bold;
    max-width: 60px;
    margin-left: 15px;
}
.criticality-circle {
    position: absolute;
    top: 5px;
    right: 5px;
    width: 10px;
    height: 10px;
    border-radius: 50%;
  }

/* Responsive design improvements (forms & tasks) */

  .datatable-header span.datatable-name-col {
    width: 300px;
    overflow: hidden;
    white-space: nowrap;
    text-overflow: ellipsis;
    display:inline-block;
  }

  #filterBtn {
    vertical-align: text-top;
  }

  .SUBMIT_FORM_MODAL .modal-header .form-description {
    width: 700px;
  }

  .SUBMIT_FORM_MODAL .modal-header .form-maximize {
    min-width: 165px; text-align: right;
  }

  .SUBMIT_FORM_MODAL .fillFormModalHeader .export-form-section {
    box-shadow: 0 4px 4px -2px rgb(218 218 218);
    background: rgb(246, 246, 246);
    width: 100%;
    height: 85px;
    padding: 20px;
    position: absolute;
    top: 0;
    left: 0;
  }

  .SUBMIT_FORM_MODAL .fillFormModalHeader .export-form-title {
    padding: 12px;
    margin: auto;
  }

  .SUBMIT_FORM_MODAL .fillFormModalHeader .export-form-section .exportEXCELBtn {
    height: 42px;
    margin: auto;
  }

  .SUBMIT_FORM_MODAL .fillFormModalHeader .export-form-section .export-PDF-group {
    background: rgb(220 220 220);
    border-radius: 25px;
    margin-left: 0.625rem;
  }

  .SUBMIT_FORM_MODAL .fillFormModalHeader .export-form-section .exportPDFBtn {
    height: 40px;
    width: 97px;
  }

  .SUBMIT_FORM_MODAL .fillFormModalHeader .export-form-section .select2-container {
    max-width: 592px;
  }

@media all and (max-width: 767.98px) {
    #formsMainControllerId .tk-page-wrapper,
    #taskControllerId .tk-page-wrapper {
        padding: 6px !important;
    }

    #pendingTable_filter,
    #tasksTable_filter {
        clear: both;
    }

    .datatable-header {
        text-align: left;
    }

    .datatable-header .customFilter {
        z-index: 1;
        position: relative;
    }

    .datatable-header .customFilter a {
        margin: auto 5px auto 5px;
        padding: 7px 0px 7px 0px;
    }

    .datatable-header .dt-buttons {
        padding: 10px 0px !important;
    }
    #taskControllerId .datatable-header .dt-buttons {
        text-align: right;
        margin-right: 10px!important;
    }
    .datatable-header .dt-buttons button {
        padding: 0 7px;
    }

    .datatable-header .dataTables_filter,
    .SUBMIT_FORM_MODAL .modal-header .nav.nav-tabs {
        margin: 0;
    }

    .datatable-header input.vtDatatableSearch {
        width: 75vw !important;
    }

    .datatable-header span.datatable-name-col {
        width: auto;
        white-space: break-spaces;
        word-break: break-all;
    }
    .datatable-header .datatable-title {
        width: auto !important;
    }

    .datatable-footer .dataTables_info {
        font-size: 90%;
    }

    .datatable-footer .dataTables_paginate.paging_simple_numbers {
        float: unset !important;
        font-size: 90%;
        margin: 0;
        padding: 0;
    }

    .table.dataTable thead>tr>th.sorting {
        padding-right: 23px !important;
        padding-left: 7px !important;
    }

    .table.dataTable thead>tr>th.sorting_disabled {
        padding: 0px 0px 0px 3px !important;
    }

    .table.dataTable thead>tr>th.sorting_disabled::before,
    .table.dataTable thead>tr>th.sorting_disabled::after {
        display: none
    }

    .table.dataTable thead>tr>th.sorting_disabled i {
        font-size: .8rem
    }

    .table.dataTable thead>tr>th.sorting_disabled .master-checkbox .list-icons-item2.dropdown-toggle.d-flex.align-items-center::after {
        margin-left: 0.2rem;
    }

    .table.dataTable tbody>tr>td {
        background: unset;
        padding: 10px 7px !important;
    }

    .fill-form-footer-mobile {
        padding: 12px 8px 12px 0;
    }

    .fill-form-footer-mobile button {
        padding: 7px;
        font-size: 85%;
    }

    .EXTERNAL_FORM_MODAL.pageWrapper {
        padding: 0;
    }

    .EXTERNAL_FORM_MODAL .modal-header,
    .SUBMIT_FORM_MODAL .modal-header {
        padding: 1rem 0.5rem 0 0.5rem;
    }

    .EXTERNAL_FORM_MODAL .modal-header .form-description,
    .SUBMIT_FORM_MODAL .modal-header .form-description {
        flex-grow: 1;
        width: auto !important;
    }

    .SUBMIT_FORM_MODAL .modal-header .form-maximize {
        min-width: 145px !important;
    }

    .EXTERNAL_FORM_MODAL .modal-header .nav.nav-tabs a.vtTabNavLink.nav-link,
    .SUBMIT_FORM_MODAL .modal-header .nav.nav-tabs a.vtTabNavLink.nav-link {
        padding: 0.825rem 0.5rem;
    }

    .EXTERNAL_FORM_MODAL .modal-body,
    .SUBMIT_FORM_MODAL .modal-body {
        padding: 0.5rem;
    }

    .EXTERNAL_FORM_MODAL .previewImageWrapper .modal-body,
    .SUBMIT_FORM_MODAL .previewImageWrapper .modal-body {
        padding: 1.25rem;
    }

    .EXTERNAL_FORM_MODAL .modal-body .formFlexSection,
    .SUBMIT_FORM_MODAL .modal-body .formFlexSection {
        padding: 0 0 3rem 0;
    }

    .EXTERNAL_FORM_MODAL .modal-body .formFieldList canvas,
    .EXTERNAL_FORM_MODAL .modal-body .formFieldList img,
    .SUBMIT_FORM_MODAL .modal-body .formFieldList canvas,
    .SUBMIT_FORM_MODAL .modal-body .formFieldList img {
        width: 100%;
    }

    .EXTERNAL_FORM_MODAL .modal-body .formFieldList .form-group,
    .SUBMIT_FORM_MODAL .modal-body .formFieldList .form-group {
        display: flex;
        flex-direction: column;
        margin-bottom: 0;
    }

    .EXTERNAL_FORM_MODAL .modal-body .formFieldList .form-group button,
    .SUBMIT_FORM_MODAL .modal-body .formFieldList .form-group button {
        margin-top: 9px;
    }

    .EXTERNAL_FORM_MODAL .modal-body .formFieldList .vtSwitchLabel,
    .SUBMIT_FORM_MODAL .modal-body .formFieldList .vtSwitchLabel {
        display: contents;
    }

    .EXTERNAL_FORM_MODAL .modal-content,
    .SUBMIT_FORM_MODAL .modal-dialog-scrollable .modal-content {
        max-height: calc(100dvh - 1rem);
    }

    #form_connections.tab-pane,
    #form-history.tab-pane {
        max-height: 75dvh;
        max-width: 95dvw;
        overflow: auto;
    }

    .SUBMIT_FORM_MODAL .fillFormModalHeader .export-form-section {
        height: 80px;
        padding: 16px 0;
        font-size: 70%;
    }

    .SUBMIT_FORM_MODAL .fillFormModalHeader .export-form-section .exportEXCELBtn {
        min-width: 92px;
    }

    .SUBMIT_FORM_MODAL .fillFormModalHeader .export-form-section .export-PDF-group {
        margin-left: 0.3rem;
    }

    .SUBMIT_FORM_MODAL .fillFormModalHeader .export-form-section .exportPDFBtn {
        width: 79px;
        margin-right: 0.5rem;
    }

    .SUBMIT_FORM_MODAL .fillFormModalHeader .export-form-section .select2-container {
        max-width: 115px;
    }

    .EXTERNAL_FORM_MODAL .map-dimensions,
    .SUBMIT_FORM_MODAL .map-dimensions {
        z-index: 0;
        margin-bottom: 1rem;
    }

    .fill-form-footer-mobile button > i,
    .SUBMIT_FORM_MODAL .modal-body .formFieldList .form-group br,
    .EXTERNAL_FORM_MODAL .modal-body .formFieldList .form-group br,
    #task_preview_image_modal .imagePreviewButtonToolbar,
    .crisp-client,
    .desktop-only,
    .fc-today-button,
    .popover {
        display: none !important;
    }

    #taskTemplateSlideboxId,
    #taskCreateUpdateInRightSlideboxId,
    .rightSliderContentWrapper {
        margin-top: 0 !important;
    }

    view-task-component .rightSliderContentWrapper {
        overflow: auto;
    }

    #task_preview_image_modal .modal-body {
        padding: 5px;
    }

    calendar-tasks-dashboard-component .tk-filter-icon {
        position: absolute;
        left: -10px;
    }

    view-task-form-tab-component .slider-form-list {
        grid-template-columns: 1fr 3fr 2fr;
    }

    .rightSliderContentWrapper.VIEW_TASK_SLIDER .vtTabNavTabs {
        margin: 10px auto 0 auto !important;
    }

    #calendar-layout button.vtBtnUp {
        margin-left: 45px;
    }
}

.datatable-header .master-checkbox .dropdown-menu {
    position: fixed!important;
    top: auto!important;
    left: auto!important;
}

.dataTables_filter {
    display: flex;
}

.crisp-support {
    margin: auto;
}

.crisp-support i {
    font-size: 180%;
}

label {
    margin-bottom: 0
}

.filters-dropdown.dropdown-menu>.menu-content>.dropdown-submenu>.dropdown-item:after { display: none }
.filters-dropdown.dropdown-menu>.menu-content>.dropdown-submenu>.dropdown-item { padding-right: 1rem}