/**********************************************************
 * This is Generated Code
 * You should not modify this code as it may be overwritten.
 * Generated By Generative Objects 
 *********************************************************/
/**********************************************************
 * This is Generated Code
 * You should not modify this code as it may be overwritten.
 * Generated By Generative Objects 
 *********************************************************/

/**********************************************************
 * This is Generated Code
 * You should not modify this code as it may be overwritten.
 * Generated By Generative Objects 
 *********************************************************/

/**********************************************************
 * This is Generated Code
 * You should not modify this code as it may be overwritten.
 * Generated By Generative Objects 
 *********************************************************/

/**********************************************************
 * This is Generated Code
 * You should not modify this code as it may be overwritten.
 * Generated By Generative Objects 
 *********************************************************/

/**********************************************************
 * This is Generated Code
 * You should not modify this code as it may be overwritten.
 * Generated By Generative Objects 
 *********************************************************/

/**********************************************************
 * This is Generated Code
 * You should not modify this code as it may be overwritten.
 * Generated By Generative Objects 
 *********************************************************/

/**********************************************************
 * This is Generated Code
 * You should not modify this code as it may be overwritten.
 * Generated By Generative Objects 
 *********************************************************/

/**********************************************************
 * This is Generated Code
 * You should not modify this code as it may be overwritten.
 * Generated By Generative Objects 
 *********************************************************/

/**********************************************************
 * This is Generated Code
 * You should not modify this code as it may be overwritten.
 * Generated By Generative Objects 
 *********************************************************/

/**********************************************************
 * This is Generated Code
 * You should not modify this code as it may be overwritten.
 * Generated By Generative Objects 
 *********************************************************/

/**********************************************************
 * This is Generated Code
 * You should not modify this code as it may be overwritten.
 * Generated By Generative Objects 
 *********************************************************/

/**********************************************************
 * This is Generated Code
 * You should not modify this code as it may be overwritten.
 * Generated By Generative Objects 
 *********************************************************/

/**********************************************************
 * This is Generated Code
 * You should not modify this code as it may be overwritten.
 * Generated By Generative Objects 
 *********************************************************/

/**********************************************************
 * This is Generated Code
 * You should not modify this code as it may be overwritten.
 * Generated By Generative Objects 
 *********************************************************/

/**********************************************************
 * This is Generated Code
 * You should not modify this code as it may be overwritten.
 * Generated By Generative Objects 
 *******************************************************#**/

/**********************************************************
 * This is Generated Code
 * You should not modify this code as it may be overwritten.
 * Generated By Generative Objects 
 *********************************************************/

/**********************************************************
 * This is Generated Code
 * You should not modify this code as it may be overwritten.
 * Generated By Generative Objects 
 *********************************************************/

/**********************************************************
 * This is Generated Code
 * You should not modify this code as it may be overwritten.
 * Generated By Generative Objects 
 *********************************************************/
/* Overwrites of ui-elements.css */

/* globals */
a {
    color: var(--go-text-dark);
    text-decoration: underline;
}

.profile-access-icon-container-custom,
.vehicle-access-tag-container-custom {
    display: flex;
    position: absolute;
    top: 0;
    width: 100%;

    >p {
        display: flex;
        align-items: center;
        margin: 0 10px;
        padding: 4px 16px;
        border-radius: 5px;
        color: var(--fleet-xq-light)
    }
}

.searchCommandsContainer {
    margin-left: 0;
}

.vehicle-lockout-tag-custom {
    background-color: var(--fleet-xq-dashboard-failure);
}

.profile-unlicensed-access-icon-custom {
    background-color: var(--fleet-xq-dashboard-failure);
}

.profile-licensed-access-icon-custom {
    background-color: var(--fleet-xq-dashboard-success);
}

.profile-driver-access-icon-custom,
.vehicle-onhire-tag-custom {
    background-color: var(--fleet-xq-dashboard-warning);
}

.profile-supervisor-access-icon-custom {
    background-color: var(--fleet-xq-tertiary);
}

#PersonFormControl-PersonForm-SupervisorAuthorizationFormControl div.uiContainer.form-spacing-custom div div.basicForm div span {
    display: flex !important;
    justify-content: center !important;
}

#PersonFormControl-PersonForm-PersonInformationFormFormControl div.uiContainer.form-spacing-custom div div.basicForm div span div div.text-field.multiline textarea.form-field-text.multiline {
    background-color: var(--fleet-xq-light-secondary);
}

a:hover {
    color: var(--go-text-dark);
    text-decoration: underline;
}

.display-none {
    display: none;
}

.word-break {
    word-break: break-all;
}

.form-field-label {
    text-wrap: nowrap;
}

/* GRIDS*/

.online-status-background-color-custom {
    height: 100%;
    background-color: var(--fleet-xq-green);
    width: 80%;
    display: flex;
    justify-content: center;
    align-items: center;
    border-bottom: 1px solid white;
    color: white;

    >p {
        margin-bottom: 0 !important;
    }
}

.amber-next-service-container-custom {
    height: 100%;
    background-color: var(--fleet-xq-dashboard-warning);
    width: 80%;
    display: flex;
    justify-content: center;
    align-items: center;
    border-bottom: 1px solid white;
    color: white;

    >p {
        margin-bottom: 0 !important;
    }
}

.red-next-service-container-custom {
    height: 100%;
    background-color: #DE463D;
    width: 80%;
    display: flex;
    justify-content: center;
    align-items: center;
    border-bottom: 1px solid white;
    color: white;

    >p {
        margin-bottom: 0 !important;
    }
}

.gray-next-service-container-custom {
    height: 100%;
    background-color: var(--fleet-xq-gray-450);
    width: 80%;
    display: flex;
    justify-content: center;
    align-items: center;
    border-bottom: 1px solid white;
    color: white;

    >p {
        margin-bottom: 0 !important;
    }
}


.green-next-service-container-custom {
    height: 100%;
    background-color: var(--fleet-xq-green);
    width: 80%;
    display: flex;
    justify-content: center;
    align-items: center;
    border-bottom: 1px solid white;
    color: white;

    >p {
        margin-bottom: 0 !important;
    }
}


.offline-status-background-color-custom {
    height: 100%;
    background-color: var(--fleet-xq-dashboard-failure);
    width: 80%;
    display: flex;
    justify-content: center;
    align-items: center;
    border-bottom: 1px solid white;
    color: white;

    >p {
        margin-bottom: 0 !important;
    }
}

#GeneralProductivityReportFilterFormControl-GeneralProductivityReportFilterFormData div.row div div.basicForm div:nth-child(6),
#PreOpReportFilterFormControl-PreOpReportFilterFormData div.row div div.basicForm div:nth-child(6),
#MachineUnlockReportFilterFormControl-MachineUnlockReportFilterFormData div.row div div.basicForm div:nth-child(6),
#ProficiencyReportFilterFormControl-ProficiencyReportFilterFormData div.row div div.basicForm div:nth-child(6),
#ImpactReportFilterFormControl-ImpactReportFilterFormData div.row div div.basicForm div:nth-child(6) {
    padding-top: 10px;

    >span.form-field-label-zone {
        padding-top: 10px;
    }
}

#CurrentStatusCombinedViewFormControl-CurrentStatusCombinedViewForm-CurrentStatusDriverViewItemsGrid div div.uiContainer div div.data-grid-container table tbody tr td:nth-child(5),
#CurrentStatusCombinedViewFormControl-CurrentStatusCombinedViewForm-CurrentStatusVehicleViewItemsGrid div div.uiContainer div div.data-grid-container table tbody tr td:nth-child(5),
#ServiceSettingsForm1Control-ServiceSettingsForm1-VehicleGridGrid div div.uiContainer div div.data-grid-container table tbody tr td:nth-child(8),
#VehilceGrid div div.uiContainer div div.data-grid-container table tbody tr td:nth-child(12),
#AllChecklistResultViewForm-ChecklistAnswerDetailsGrid div div.uiContainer div div.data-grid-container table tbody tr td:nth-child(4) {
    height: 1px;
    padding: 0 !important;
}

#SubscribeFormControl,
#VehicleSessionsFormControl,
#VehicleVORSessionsFormControl,
#AllVehicleUnlocksViewFormControl,
#NewSlamcoreDeviceFormControl,
#EditSlamcoreDeviceFormControl,
#SlamcoreDeviceConnectionSettingsFormControl,
#EditSlamcoreDeviceForm1Control,
#SlamcoreDeviceFormControl {
    padding: 20px
}

/* Access Level Icons */
.access-icon-container-custom {
    display: flex;
    align-items: center;
    font-size: 1rem;
    font-weight: bold;
    color: var(--fleet-xq-light)
}

.driver-access-icon-custom {
    display: flex;
    justify-content: center;
    align-items: center;
    background-color: var(--fleet-xq-dashboard-warning);
    width: 1.5rem;
    border-radius: 25px;
    height: 1.5rem;
    margin-bottom: 0;
    margin-left: 10px;
    padding-left: 1px;
}

.supervisor-access-icon-custom {
    display: flex;
    justify-content: center;
    align-items: center;
    background-color: var(--fleet-xq-tertiary);
    width: 1.5rem;
    border-radius: 25px;
    height: 1.5rem;
    margin-bottom: 0;
    margin-left: 10px
}

.data-grid tbody tr:hover .supervisor-access-icon-custom {
    background-color: var(--fleet-xq-light);
    color: var(--fleet-xq-tertiary);
}

.data-grid tbody tr:hover .driver-access-icon-custom {
    background-color: var(--fleet-xq-light);
    color: var(--fleet-xq-dashboard-warning);
}

.data-grid tbody tr.currenttr td div p.supervisor-access-icon-custom {
    background-color: var(--fleet-xq-light);
    color: var(--fleet-xq-tertiary);
}


.data-grid tbody tr.currenttr td div p.driver-access-icon-custom {
    background-color: var(--fleet-xq-light);
    color: var(--fleet-xq-dashboard-warning);
}

/*Next Service Icons and legend*/

.next-service-legend-custom {
    display: flex;
    margin-bottom: 5px;
    padding: 10px 0 0 10px;
}

.next-service-red-legend-custom,
.next-service-orange-legend-custom,
.next-service-green-legend-custom {
    width: 30px;
    height: 15px;
    border-radius: 2px;
    margin-right: 10px;
}

.next-service-red-legend-custom {
    background-color: #DE463D;
}

.next-service-orange-legend-custom {
    background-color: var(--fleet-xq-dashboard-warning);
}

.next-service-green-legend-custom {
    background-color: #80d25f;
}

.next-service-container-custom {
    display: flex;
    align-items: center;
    justify-content: space-between;
    width: 2.8vw;
}

.green-next-service-custom,
.orange-next-service-custom,
.red-next-service-custom {
    height: 10px;
    width: 20px;
    border-radius: 2px;
}

.green-next-service-custom {
    background-color: #80d25f;
}

.orange-next-service-custom {
    background-color: #F26522;
}

.red-next-service-custom {
    background-color: #DE463D;
}

/* grid */

.titleText {
    padding-left: 2px;
}

.gridControl th.ui-grid-sort-s {
    background-image: none;
}

.gridControl th.ui-grid-sort-n-s {
    background-image: none;
    background-size: auto;
}

.gridControl th.ui-grid-sort-n {
    background-image: none;
}

#PersonFormControl-PersonForm-PersonAlertSubscriptionsFormForm-tabs div.tabs-container {
    padding: 0 20px;
}

.d-flex.align-items-center h4.inline-title {
    font-size: 1.5rem;
    color: #13BAB6;
    text-transform: uppercase;
    font-weight: 100;
}

.data-grid-container {
    padding-right: 0px;
    width: 100%;
    margin-bottom: -1px;
    /* -1px so there is no gap between the grid and the pagination */
    /* border: 1px solid var(--go-border-color); */
    /* border-radius: 10px 10px 0 0; */
    /* for responsive and fixed header */
    /*overflow: auto;
        width: auto; */
}

.data-grid {
    width: 100%;
    padding-left: 0;
    /*border-collapse: separate;*/
    table-layout: fixed;
    word-break: normal;
    overflow-wrap: break-word;
    margin-bottom: 0;
    background-color: transparent;
}

.data-grid thead th {
    font-weight: 500;
    color: var(--fleet-xq-th-text-color);
    border: 0;
    background-clip: padding-box;
    /* FF fix */
}

.data-grid tbody tr:nth-child(2n),
.data-grid tbody tr:nth-child(2n)>* {
    background-color: var(--fleet-xq-alternate-bg-color);
}

.data-grid tbody tr.currenttr,
.data-grid tbody tr.currenttr>*,
.data-grid tbody tr.currenttr a {
    background-color: var(--go-table-selected-color);
    color: var(--fleet-xq-light);
}

.data-grid tbody tr:hover a {
    color: var(--fleet-xq-light);
}

.data-grid tbody tr:hover,
.data-grid tbody tr:hover>* {
    background-color: var(--go-table-hover-color);
    /*--bs-table-accent-bg: var(--go-table-hover-color);*/
    /*transition: all 0.2s ease-in;*/
}

/* sub grid */
.sub-grid-command-custom {
    padding-left: 30px !important;
}


/* table pagination */
.grid-pagination .currentPage {
    border-radius: 50%;
    background-color: var(--fleet-xq-yellow-green);
    color: var(--fleet-xq-light);
    font-weight: 600;
}

.page-numbers {
    margin-top: 10px;
    font-size: 14px;
    padding: 5px 10px;
    color: var(--fleet-xq-pagination-color);
}

.page-numbers:hover {
    border-radius: 100%;
    background-color: var(--fleet-xq-yellow-green);
    color: var(--fleet-xq-light);
    font-weight: 600;
}

.page-controls {
    padding: 10px;
    fill: var(--fleet-xq-pagination-color);
}

.page-controls:hover {
    fill: var(--fleet-xq-light);
}

.tabbed-form-container-custom {
    >div.uiContainer {
        position: unset;

        >div.tabwrapper {
            position: unset;
        }
    }

    >div:nth-child(2)>h2 {
        font-size: 1.5rem;
        font-weight: 100;
        padding-top: 0.8rem;
    }

    >div:nth-child(3)>div>ul {
        position: absolute;
        margin-top: 30px;
        top: 0;
        left: 20vw;
    }

    >div:nth-child(3)>div>div:nth-child(3) {
        padding: 0;

        >div>div>div>div>span>div>div>div>root>div {
            position: unset;
        }

        >div>div>div>div>span>div>div>div>root>div>div>div.gridCommandContainer>div>div.gridCommands {
            position: absolute;
            top: 20px;
            right: 20px;
        }
    }
}

#VORReportCombinedViewFormControl-VORReportCombinedViewFormControl {
    div h2 {
        font-size: 1.5rem;
        font-weight: 100;
        padding-top: 0.8rem;
    }

    div.uiContainer div ul {
        position: absolute;
        margin-top: 30px;
        top: 2.5vw;
        left: 20vw;
    }

    div div.gridCommandContainer div.gridCommands {
        position: absolute;
        top: 80px;
        right: 20px;
    }
}

#AllImpactsViewGrid,
#AllChecklistResultViewGrid1,
#AllVehicleUnlocksViewGrid {
    position: unset;
}

.uiContainer#AllChecklistResultViewGrid1,
.uiContainer#AllImpactsViewGrid,
.uiContainer#AllVehicleUnlocksViewGrid,
.uiContainer#ServiceSettingsForm1Control-ServiceSettingsForm1-VehicleGridGrid {
    div>div.gridCommandContainer.border>div.d-flex>div.gridCommands {
        position: absolute;
        top: 20px;
        right: 20px;
    }

}

.uiContainer {
    position: unset !important;
}

/* Filter */

.filterFieldSelection {
    margin: 0;
}

.filterLabel {
    font-size: 18px !important;
    color: var(--fleet-xq-filter-label-color);
    white-space: nowrap !important;
    margin-right: 2rem;
}

.filterAddNewCustomer {
    text-align: end;
}

.searchCommandsContainer button {
    margin-left: 10px;
    height: 28px;
}

/**Form Controllers**/
div#GOUserForm2Control,
div#ModelCreateNewFormControl {
    div>div.control-command {
        position: static;
        display: flex;
        justify-content: end;

        div.btn-group>button.command-button.createnew {
            height: 35px;
            border-radius: 20px;
            display: inline-flex;
            align-items: center;
            justify-content: center;
            text-wrap: nowrap;
        }

        div {
            width: 30%;
        }
    }
}

div#GOUserForm2Control-GOUserForm2Control,
div#ModelCreateNewFormControl-ModelCreateNewFormControl {
    div>h4 {
        font-size: 1.5rem;
        color: #13BAB6;
        text-transform: uppercase;
        font-weight: 100;
    }

}

div#GOUserForm2Control-GOUserForm2-UserRoleItemsGrid div div.gridCommandContainer {
    position: absolute;
}

div#GOUserForm2Control,
div#ModelCreateNewFormControl {
    div>div.control-command {
        position: static;
        margin-top: 8px !important;

        div.nav {
            width: 40%;
        }

        div.btn-group>button.command-button.save {
            width: 10%;
            margin-right: 10px;
        }

        div.btn-group>button.command-button.save,
        button.command-button.canceledit {
            height: 30px;
            font-size: 0.8rem;
            border-radius: 20px;
            display: inline-flex;
            align-items: center;
            justify-content: center;
            text-wrap: nowrap;
            min-width: auto;
        }
    }
}

/* Filter */

.filterLegend {
    text-transform: uppercase;
    color: var(--fleet-xq-filter-label-color);
    font-size: 19px;
}

.filterTextInputCustom {
    width: 30vw !important;
}

.popup-filter-container-custom {
    display: flex;
    align-items: center;

    >div:first-child {
        padding: 0;
    }

    >div {
        width: auto;
    }

    >div:nth-child(3) {
        margin-top: 0.8rem;
    }

    >div:nth-child(2)>div>div {
        display: flex;
    }

    >div:nth-child(2)>div>div>div>span {
        display: flex;
        flex-direction: column;
    }

    >div:nth-child(2)>div>div>div>span>select {
        width: 10vw !important;
        margin-right: 1rem;
    }

    >div:nth-child(2)>div>div>div>span>label {
        color: #000 !important;
        font-size: 0.8rem !important;
        margin-bottom: -8px;
        opacity: 0.6;
    }
}

/* grid */

.data-grid tbody tr:hover td {
    color: var(--fleet-xq-light);
}

.data-grid td {
    color: var(--fleet-xq-tr-text-color);
}

.padded-content {
    padding: 15px;
}

.viewStyle-list,
.viewStyle-list .main-content {
    background-color: var(--fleet-xq-light) !important;
}

.data-grid tbody {
    border-radius: 0.3rem !important;
    border: 1px solid var(--fleet-xq-border-color);
}

.gridControl th.ui-grid-sort-n {
    background-image: url("../images/arrow-up-short.svg");
    background-size: 20px;
}

.gridControl th.ui-grid-sort-s {
    background-image: url("../images/arrow-down-short.svg");
    background-size: 20px;
}

.gridControl th.ui-grid-sort-n-s {
    background-image: url("../images/arrow-down-up.svg");
    background-size: 20px;
}

.data-grid {
    background-color: transparent;
}

.span-field-custom {
    background-color: var(--fleet-xq-light-secondary) !important;
}

/* .label-field-custom {
    color: #31C3E7
} */

/* Bottom Header Bar */
.customerNameContainer {
    /* width: 12vw; */
    height: 100%;
    background-color: var(--fleet-xq-bottom-header-customer-name-bg);
    border-bottom-right-radius: 30px;
    position: relative;
    display: flex;
    justify-content: center;
    align-items: center;
}

.customerNameSpan {
    margin: 0.25rem 0 0.25rem 0 !important;
}

/* sub form tabs */

.subform-tab-custom {
    /* position: static !important; */
    margin-left: 1.5vw;
}

#PersonFormControl-PersonForm-DriverFormControl {
    ul.subform-tab-custom>li {
        &:nth-child(2) {
            z-index: 900;
            margin-left: 0.1vw !important;
        }
    }

    .tabs-container {
        padding-top: 10px;
    }
}

#PersonFormControl-PersonForm-DriverFormControl ul.subform-tab-custom>li {
    margin-left: -30px;
    margin-right: 5px !important;
    margin-top: 0px !important;
    /* background-color: var(--fleet-xq-bottom-header-bg-color); */
    background-color: #fff;
    border-radius: 20px 20px 20px 20px !important;
    padding-right: 15px;
    padding-left: 15px;
    border: 1.5px solid #00A1FF;

    &:first-child {
        z-index: 1000;
        margin-left: 0 !important;
    }

    ;

    &:nth-child(2) {
        z-index: 900;
        /* margin-left: 0.1vw !important; */
    }

    &:hover {
        >a {
            color: var(--fleet-xq-secondary) !important;
        }

        ;
    }

    &.active {
        z-index: 1100;

        /* margin-right: 5px; */
        /* margin-left: -25px; */
        >a {
            font-weight: 550 !important;
            /* color: var(--fleet-xq-light) !important; */
            color: #000 !important;
        }
    }

    >a {
        padding: 10px 15px !important;
        text-align: center;
        transform: translateY(0) !important;
        text-transform: none !important;
        font-weight: normal !important;
    }
}


ul.subform-tab-custom>li {
    margin-left: -30px;
    margin-right: 5px !important;
    margin-top: 0px !important;
    background-color: var(--fleet-xq-bottom-header-bg-color);
    border-radius: 20px 20px 20px 20px !important;
    padding-right: 15px;
    padding-left: 15px;

    &:first-child {
        z-index: 1000;
        margin-left: 0 !important;
    }

    ;

    &:nth-child(2) {
        z-index: 900;
        /* margin-left: 0.1vw !important; */
    }

    &:hover {
        >a {
            color: var(--fleet-xq-secondary) !important;
        }

        ;
    }

    &.active {
        z-index: 1100;
        /* margin-right: 5px; */
        /* margin-left: -25px; */
        background: var(--fleet-xq-primary);

        >a {
            color: var(--fleet-xq-light) !important;
        }
    }

    >a {
        padding: 10px 15px !important;
        text-align: center;
        transform: translateY(0) !important;
        text-transform: none !important;
        font-weight: normal !important;
    }
}

/*Person detail page custom designs*/

.form-border-small-radius-custom {
    border: 1px solid var(--fleet-xq-license-form-border-color);
    border-radius: 5px !important;
    padding: 50px;
    transform: translate(-10vw, -6vh);
}

.form-with-background-custom {
    border: 3px solid var(--fleet-xq-gray-250);
    border-radius: 5px 20px 5px 5px;
    margin: auto;
    margin-top: 10px;
    padding: 0 !important;
    width: auto;
    background-color: var(--fleet-xq-license-form-bg-color);
}

.form-container-custom {
    border: 3px solid var(--fleet-xq-gray-250);
    border-radius: 5px 20px 5px 5px;
    margin: auto;
    margin-top: 10px;
    padding: 0 !important;
    width: auto;
    opacity: 1;
}

.form-container-custom-withoutborder {}

.person-information-header-custom {
    width: 15vw;
    border-radius: 4px 0px 25px 0px;
    background: var(--fleet-xq-yellow-green) 0% 0% no-repeat padding-box;
    padding-top: 8.5px;
    padding-bottom: 8.5px;
    opacity: 1;
}

.person-information-spacing-custom {
    padding: 0;
    margin: 0;
}

.person-header-font-custom-h2 {
    letter-spacing: 0;
    text-align: center;
    text-transform: uppercase;
    letter-spacing: 0px;
    color: var(--fleet-xq-light-secondary);
    text-transform: uppercase;
    opacity: 1;
    margin-top: 0 !important;
    margin-bottom: 0 !important;
    display: flex;
    justify-content: center;
    align-items: center;
}

/* .person-allocation-custom {
    padding: 0 25px 25px 25px;
}

.person-allocation-information-custom {
    width: 412px;
    margin-top: 35.5px;
    margin-left: 23px;
} */

/* .subform-spacing-custom {
    width: 488px;
    margin: 20px 0 25px 0;
    padding: 0;
    border-right: 2px solid #f2f2f2;
} */

/* .person-allocation-list-custom {
    margin: 0;
    padding: 0;
    border: 2px solid black !important;
} */

/* .column-border-custom {
    margin-top: 17px;
    padding-left: 34px;
    padding-bottom: 40px;
} */

/* .vehicle-access-container-custom {
    border: 3px solid #f2f2f2;
    border-radius: 5px 25px 5px 5px;
    width: 491px;
    height: 418px;
    padding: 0;
    margin-left: 14px;
} */

/* .vehicle-access-spacing-custom {
    padding: 25px;
} */

/*****************/

.general-license-spacing-custom {
    margin: 0 !important;
}

.license-tab-alignment-custom {
    display: flex;
}

.license-mode-text-align-custom {
    padding: 10px 0px 10px 25px;
    margin-right: 30px;
}

.licenses-labels-container-custom {
    min-width: 30%;
    margin-left: 1.5rem;
}

.licenses-container-custom {
    padding-left: 25px;
    margin: 30px 0 90px 0;
}

.by-model-license-span-custom {
    font-size: 1.2rem;
    font-weight: 500;
}

.form-field-helper-text.license-upload-help-text {
    margin-top: 16px;
}

/*****************/

.vehicle-information-idle-timer-label-custom {
    >span>span {
        color: var(--fleet-xq-yellow-green);
        text-transform: uppercase;
        font-weight: 600;
        margin-left: 2px;
    }
}

.time-in-seconds-align-custom {
    position: absolute;
    bottom: 0px;
    text-align: center;

    >span:first-child {
        width: 38% !important;
        text-wrap: nowrap;
        margin-right: 0px !important;
    }

    >span:nth-child(2) {
        text-align: start;
    }
}

.vehicle-information-container-custom {
    padding: 36px 20px 24px 20px;
}

.vehicle-information-label-custom {
    margin-bottom: 10px;
    text-align: left;

    >span>span {
        color: var(--fleet-xq-yellow-green);
        text-transform: uppercase;
        font-weight: 600;
        margin-left: 2px;
    }
}

/* .vehicle-information-border-custom {
    border-left: 2px solid #f2f2f2;
} */

/* .vehicle-container-custom {
    border: 3px solid #f2f2f2;
    border-radius: 5px 20px 5px 5px;
    margin: auto;
    margin-top: 30px;
    padding: 0 !important;
    width: auto;
    opacity: 1;
} */

/* .checklist-settings-form-custom {
    background: #FAFAFA 0% 0% no-repeat padding-box;
    padding: 25px 40px 25px 30px;
    margin: auto;
    height: 400px;
    border-radius: 20px;
    opacity: 1;
} */

/* .checklist-container-custom {
    padding: 25px;
} */

/*************************************************************************************************************************************************************/

.form-spacing-custom {
    padding: 28px 23px;

    >div>div:nth-child(3) {
        position: relative;
    }
}

.site-list-container-custom {
    border: 3px solid var(--fleet-xq-gray-250);
    border-radius: 5px 20px 5px 5px;
    margin: auto;
    margin-top: 10px;
    padding: 0px 25px 25px 0px;
    width: auto;
    opacity: 1;
}

/* .site-list-spacing-custom {
    padding: 0 0 0 25px;
} */

.model-tbody-custom {
    border: none !important;
}

.model-table-spacing-custom {
    padding: 25px;
    margin: 0 !important;
}

/* .impact-settings-custom {
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    height: 300px;
    padding-bottom: 25px;
} */

.topGridCommands {
    text-align: right;
}

.no-border {
    border: none;
}

.no-margin {
    margin: 0 !important;
}

.main-profile-header-custom {
    position: static;
    background-color: var(--fleet-xq-main-profile-bg-color);
    border-radius: 0 0 117px 0;
    min-height: 22.9rem;
    min-width: 55rem;
    /* height: 37vh; */
    width: 48vw;
    margin: -32px 0 0 -24px;
}


.main-profile-top-orange-border-custom {
    background-color: var(--fleet-xq-dashboard-red-impacts-bg-color);
    height: 16px;
    width: 152px;
    border-radius: 0 24px 0 0;
}

.main-profile-status-circle-custom {
    background-color: var(--fleet-xq-yellow-green);
    border: 3px solid var(--fleet-xq-light);
    width: 25px;
    height: 25px;
    border-radius: 100%;
    margin-left: 239px;
    margin-top: 30px;
}

.profile-image-custom {
    min-width: 15.625rem;
    max-height: 13.6rem;
    z-index: 1;
    border-radius: 0 20px 20px 0;
}

.main-profile-border-design-container-custom {
    height: 16px;
    position: relative;
    z-index: 1;
}

.svg-styling-custom {
    padding-right: 17px;
    margin: 0.5rem 0 0.4rem 0;
}

.profile-access-icon-container-custom {
    display: flex;
    position: absolute;
    top: 0;
    width: 100%;

    >p {
        display: flex;
        align-items: center;
        margin: 0 10px;
        padding: 4px 16px;
        border-radius: 5px;
        color: var(--fleet-xq-light)
    }
}

.profile-driver-access-icon-custom {
    background-color: var(--fleet-xq-dashboard-warning);
}

.profile-supervisor-access-icon-custom {
    background-color: var(--fleet-xq-tertiary);
}

#PersonFormControl-PersonForm-SupervisorAuthorizationFormControl div.uiContainer.form-spacing-custom div div.basicForm div span {
    display: flex !important;
    justify-content: center !important;
}

#PersonFormControl-PersonForm-PersonWebsiteAccessFormForm-GOUserFormControl {
    border: none !important;

    >div:nth-child(3) {
        padding-bottom: 0;
    }
}

#PersonFormControl-PersonForm-PersonWebsiteAccessFormFormData {
    >div>div>div:nth-child(2) {
        padding: 0 23px;
    }

    >div>div>div:nth-child(3) {
        padding: 0 23px;
    }
}

/**Custom classes for customer tab in customers**/
/* .resized-form-container-with-border-custom {
    

} */

/**LOGIN CLASSES**/
.login-align-custom {
    display: flex;
    justify-content: right;
}

.login-resize-custom {
    padding: 0 !important;
    display: flex;
}

.username-span-color-custom {
    color: var(--fleet-xq-light);
    margin: 0 18px;
}

.object-fix-custom {
    pointer-events: none;
    margin-top: 4px;
}

.user-manual-svg {
    margin-right: 18px;
    margin-top: 3px;
}

.username-alignment-custom {
    display: flex;
    align-items: center;
}

.svg-resize-custom {
    width: 22px;
    height: 22px;
}

/**LOGO CLASSES**/
.logo-alignment-custom {
    display: flex;
    flex-direction: column;
    align-items: center;
    color: var(--fleet-xq-gray-450);
}

.logo-container-spacing-custom {
    padding-top: 1rem;
}

.logo-span-custom {
    text-align: center;
    margin-top: 10px;
    font-size: 14px;
    letter-spacing: 2.8px;
    opacity: 1;
}

.logo-index-custom {
    z-index: 1;
    margin: 0 0 40px 37px;
}

.bottom-logo-border-custom {
    background-color: var(--fleet-xq-light-green);
    border-radius: 50px;
    position: static;
    margin-left: 2rem;
    transform: rotate(-17deg);
    /* translate: -7.5vw 12vh; */
    height: 30vh;
    width: 100%;
    position: absolute;
    bottom: -16vh;
    left: -5vw;
}


.bottom-logo {
    transform: rotate(17deg);
    position: fixed;
    top: 14%;
    left: 40%;
}

/**LICENSE CARD**/
.licenses-form-container-bg-custom {
    background-color: var(--fleet-xq-license-form-bg-color);
}

.license-card-custom {
    background-color: var(--fleet-xq-light);
    padding: 20px 18px 17px 21px !important;
    width: 350px;
    height: auto;
    margin: 0px 0 10px 25px;
    border-left: 7px solid var(--fleet-xq-green);
    border-radius: 10px 10px 10px 10px;
    box-shadow: 0px 10px 16px var(--fleet-xq-box-shadow);
}

.license-card-span-container-custom {
    display: flex;
    justify-content: space-between;
    width: 100%;
    margin-top: 20px !important;
}

.license-card-span-custom {
    text-align: right;
    padding: 0 !important;
    margin-top: 10px;
}

.license-card-container-custom {
    display: flex;
    flex-wrap: wrap;
}

.license-bymodel-input-field-custom {
    background-color: var(--fleet-xq-light) !important;
    border: none !important;

    >div>div>div>div>input {
        padding: 3px !important;
    }

    >div>div:nth-child(2) {
        margin-top: 0.18rem;
    }
}

.license-bymodel-anchor-custom {
    padding: 10px 0px 10px 24px;
}

.license-bymodel-container-custom {
    padding: 0;
}

.document-container-custom {
    display: flex;
    /* flex-direction: column-reverse; */
    flex-direction: row-reverse;

    >div>input {
        width: 7rem;
        margin-right: 10px;
    }

    >input {
        width: 11.5rem;
    }
}

/**MAIN HEADER**/
.main-header-image-border-custom {
    height: auto;
    width: auto;
    padding: 0;
}

.main-header-span-container-custom {
    margin-bottom: 15px;
}

.main-header-span-custom {
    font-size: 22px;
    font-weight: 600;
}

.main-header-information-spacing-custom {
    margin-left: 2rem;
    margin-top: 0.6rem;

    >div>div>div:first-child {
        width: 38rem;
    }
}

.main-header-information-edit-spacing-custom {
    margin: 25px 0 0 10px;
}

.main-header-span-size-custom {
    font-size: 20px;
    font-weight: 600;
}

.main-header-information-span-custom {
    >span {
        padding: 0 0 0 2px !important;
        min-height: 0 !important;
    }

    >input {
        padding: 0 0 0 2px !important;
        background-color: var(--fleet-xq-main-profile-bg-color) !important;
        font-weight: 600;
    }

    font-weight: 600;
    display: flex;
    align-items: center;
}

.main-header-information-edit-span-custom {
    >span {
        padding-left: 0 !important;
        padding: 0 !important;
    }

    >input {
        padding: 0 0 0 2px !important;
        background-color: var(--fleet-xq-main-profile-bg-color) !important;
        font-weight: 600;
    }

    font-weight: 600;
    display: flex;
    align-items: center;
}

.last-session-date-span-custom {
    padding: 3px;
}

.years-of-stay-span-custom {
    font-size: 20px;
}

.main-header-right-zone-spacing-custom {
    margin-top: 4.2rem;
}

.sub-heading-spacing-custom {
    margin: 5px 0;
}

.profile-header-contract-edit-custom {
    margin: 5px 0 10px 0;
}

.profile-image-header-edit-align-custom {
    display: flex;
    width: 242px;
    flex-direction: column;
    margin-top: 190px;
    margin-left: 10px;
}

.profile-header-edit-span-custom {
    margin-bottom: 10px;
}

.profile-header-vehicle-information-custom {
    >span>div>div>span {
        background-color: var(--fleet-xq-main-profile-bg-color) !important;
        padding-left: 2px !important;
    }

    >span {
        background-color: var(--fleet-xq-main-profile-bg-color) !important;
        width: 200px !important;
    }

    >span>label {
        text-wrap: nowrap;
    }

    >span>div {
        max-width: 200px;
    }

    >span>div>div {
        border: none;
    }

    display: flex;
    flex-direction: column !important;
}

/**TABS**/

.tab-positioning-custom {
    translate: 0 -7.3rem;
    padding: 10px 20px 0px 20px !important;
    margin: 0 !important;
    height: 6vh;
    min-height: 65px;
    width: 33vw;
    border-bottom: 1px solid var(--fleet-xq-gray-450) !important;
    /* border-left: 1px solid var(--fleet-xq-gray-450) !important; */
    /* border-radius: 0 0 0 20px; */
}


.tabs-container-alignment-custom {
    padding: 0;
    translate: 0 -3.125rem;
}


/**LOGIN PAGE**/
.login-overflow {
    overflow: hidden;
}

.login-background-color-custom {
    background-color: var(--fleet-xq-login-bg-color);
    display: flex;
    flex-direction: column;
    overflow-x: hidden !important;
}

.login-header-logo-custom {
    display: flex;
    flex-direction: column;
    align-items: center;
}

.login-header-span-custom {
    color: var(--fleet-xq-light);
    text-align: center;
    font-size: 20px;
    letter-spacing: 6px;
    opacity: 0.74;
    text-transform: uppercase;
    margin-top: 26px;
}

.login-footer-svg-custom {
    position: fixed;
    bottom: 0;
    width: 100%;
    display: flex;
    justify-content: center;
    opacity: 0.8;
}

.png-z-index-custom {
    z-index: 1;
    position: fixed;
    bottom: 0;
    right: 0;
}

.footer-logo-custom {
    position: absolute;
    bottom: 3.125rem;
    left: 6.25rem;
    opacity: 0.6;
}

.right-circle-positioning-custom {
    position: fixed;
    right: 0;
}

.login-page-rectangle-custom {
    background-color: var(--fleet-xq-light-green);
    position: absolute;
    top: -150;
    left: -145;
    width: 531px;
    height: 587px;
    border-radius: 60px;
    transform: rotate(-17deg);
}

.login-page-yellow-rectangle-custom {
    background-color: var(--fleet-xq-yellow);
    position: fixed;
    bottom: -175;
    right: -120;
    width: 550px;
    height: 587px;
    border-radius: 60px;
    transform: rotate(-17deg);
}

.custom {
    background-color: var(--fleet-xq-login-bg-color);
}

@media screen and (max-width: 1800px) {
    .png-size-custom {
        height: 500px;
        width: auto;
    }

    .right-circle-sizing-custom {
        width: 581px;
    }
}

@media screen and (max-width: 1680px) {
    div#VehicleFormControl-VehicleForm-VehicleInformationFormForm-Module1FormControl {
        transform: translateY(180%);
    }

    div#VehicleFormControl-VehicleForm-VehicleInformationFormForm-Module1FormData {
        transform: translateY(-220%);
    }
}

@media screen and (max-width: 1590px) {
    div#VehicleFormControl-VehicleForm-VehicleInformationFormForm-Module1FormControl {
        transform: translateY(310%);
    }

}

@media screen and (max-width: 1440px) {
    div#VehicleFormControl-VehicleForm-VehicleInformationFormForm-Module1FormControl {
        transform: translateY(370%);
    }

    div#VehicleFormControl-VehicleForm-VehicleInformationFormForm-Module1FormData {
        transform: translateY(-290%);
    }
}

@media screen and (max-width: 1280px) {
    .right-circle-sizing-custom {
        width: 581;
        height: auto;
    }

    .right-circle-positioning-custom {
        left: 800
    }

    .login-page-rectangle-custom {
        width: 481px;
        height: 537px;
    }

    .login-page-yellow-rectangle-custom {
        width: 481px;
        height: 537px;
    }

    div#VehicleFormControl-VehicleForm-VehicleInformationFormForm-Module1FormControl {
        transform: translateY(430%);
    }

    div#VehicleFormControl-VehicleForm-VehicleInformationFormForm-Module1FormData {
        transform: translateY(-350%);
    }

    #CustomerFormControl-CustomerForm-CustomerForm2FormControl div[data-entityfield="contractnumber-view"],
    #CustomerFormControl-CustomerForm-CustomerForm2FormControl div[data-entityfield="contractdate-view"],
    #CustomerFormControl-CustomerForm-CustomerForm2FormControl div[data-entityfield="field20-view"],
    #CustomerFormControl-CustomerForm-CustomerForm2FormControl div[data-entityfield="field10-view"],
    #CustomerFormControl-CustomerForm-CustomerForm2FormControl div[data-entityfield="fullname-view"],
    #CustomerFormControl-CustomerForm-CustomerForm2FormControl div[data-entityfield="phoneno-view"],
    #CustomerFormControl-CustomerForm-CustomerForm2FormControl div[data-entityfield="email-view"],
    #CustomerFormControl-CustomerForm-CustomerForm2FormControl div[data-entityfield="address-view"] {
        font-size: 1.1em !important;
    }

    /* .form-field[data-entityfield="iscanbus-view"] {
        margin-top: 4.6rem !important;
    } */
}

@media screen and (max-width: 1024px) {
    div#VehicleFormControl-VehicleForm-VehicleInformationFormForm-Module1FormControl {
        transform: translateY(120%);
    }

    #CustomerFormControl-CustomerForm-CustomerForm2FormControl div[data-entityfield="contractnumber-view"],
    #CustomerFormControl-CustomerForm-CustomerForm2FormControl div[data-entityfield="contractdate-view"],
    #CustomerFormControl-CustomerForm-CustomerForm2FormControl div[data-entityfield="field20-view"],
    #CustomerFormControl-CustomerForm-CustomerForm2FormControl div[data-entityfield="field10-view"],
    #CustomerFormControl-CustomerForm-CustomerForm2FormControl div[data-entityfield="fullname-view"],
    #CustomerFormControl-CustomerForm-CustomerForm2FormControl div[data-entityfield="phoneno-view"],
    #CustomerFormControl-CustomerForm-CustomerForm2FormControl div[data-entityfield="email-view"],
    #CustomerFormControl-CustomerForm-CustomerForm2FormControl div[data-entityfield="address-view"] {
        font-size: 1em !important;
    }

}

/*********/
/* .input-field-bg-custom {
    background-color: #F2F2F2;
    
} */

/******Sidebar customs******/
.sidebar {
    height: 80vh;
}

.sidebar .btn-toggle-nav a:hover {
    color: var(--go-dark) !important;
}

nav.sidebar>ul>li {
    &:hover {
        >a {
            background-color: rgba(255, 255, 255, 0.9);
        }

        >button {
            background-color: rgba(255, 255, 255, 0.9);
        }

        >button>svg {
            fill: var(--go-dark) !important;
        }

        >a>span,
        >button>a>span {
            color: var(--go-dark) !important;
        }

        >a>svg>use,
        button>a>svg>use {
            fill: var(--go-dark) !important;
        }
    }

    >a,
    >button>a {
        >svg {
            fill: var(--fleet-xq-gray-200) !important;
        }

        color: var(--fleet-xq-gray-200) !important;
    }

    >div>ul>li>a {
        color: var(--fleet-xq-gray-200) !important;
    }

    &:last-child {
        border-top: 1px solid var(--fleet-xq-dark);
        margin-top: 75px;
        padding-top: 20px;
    }
}

.align-items-center.rounded.collapsed.nav-link {
    color: var(--fleet-xq-gray-200) !important;
}

div.collapse.show {
    ul li a {
        color: var(--fleet-xq-gray-200) !important;
    }
}

.back-button-placing-custom {
    position: fixed;
    bottom: 17px;
    border: 2px solid var(--fleet-xq-back-button-bg-color);
    border-radius: 20px;
    height: 35px !important;
    padding: 5px;
    display: flex;
    justify-content: center;
    align-items: center;
    text-decoration: none;

    &:hover {
        text-decoration: none;
    }

    /* opacity: 0.5; */
}

.main-wrapper.sidebar-minimize .bottom-logo-border-custom {
    display: none;
}

.main-wrapper.sidebar-minimize .sidebar-wrapper .logo-container-spacing-custom .header-image {
    display: none;
}

.main-wrapper.sidebar-minimize .sidebar-wrapper ul.nav {
    align-items: normal !important;
}

/* Dashboard Card Page */
.dashboard-card-container {
    display: flex;
    flex-wrap: nowrap;
    justify-content: center;
    gap: 25px;
    align-items: center;
}

.dashboard-card {
    background-color: var(--fleet-xq-dashboad-main-bg-color);
    border-radius: 20px;
    box-shadow: 0 2px 10px rgba(0, 0, 0, 0.1);
    padding: 0 !important;
    overflow: hidden;
}

.dashboard-card-nowrap {
    display: flex;
    flex-wrap: nowrap;
    height: 100%;
}

.banner-container {
    width: 150px;
    text-align: left;
    justify-content: left;
}

.banner-count {
    text-align: left;
    font-size: 375%;
}

.banner-count-label {
    text-align: left;
    font-size: 137.5%;
}

.dashboard-success {
    color: var(--fleet-xq-dashboard-success);
}

.dashboard-warning {
    color: var(--fleet-xq-dashboard-warning);
}

.dashboard-failure {
    color: var(--fleet-xq-dashboard-failure);
}

.dashboard-info {
    color: var(--fleet-xq-dashboard-info);
}

.dashboard-card-navigation-custom {
    display: flex;
    text-wrap: nowrap;
    font-size: 0.8rem;
    opacity: 0.8;

    >p {
        margin-right: 6px;
    }
}

.statistics {
    padding: 15px 25px;
    font-size: 0.9rem;
    font-weight: 600;
    height: auto;
    width: auto;
    margin: 0 auto;
    background-color: var(--fleet-xq-bottom-button-bg-color);

    >div>div>div {
        margin-bottom: 0.5rem;
    }
}

.statistics-text-field {
    min-height: 22px !important;
}

.zone-content-container-custom {
    display: flex;

    >div {
        flex: 1;
        /* Each card will grow equally */
        display: flex;
    }

    >div>div {
        height: 100%;
    }

    >div>div>div {
        height: 100%;
    }

    >div>div>div>div {
        height: 100%;
    }

    >div>div>div>div>div {
        height: 100%;
    }

    >div>div>div>div>div>div {
        height: 100%;
    }

    >div>div>div>div>div>div>div {
        height: 100%;
    }

    >div>div>div>div>div>div>div>div:nth-child(3) {
        height: 100%;
    }
}

.driver-banner {
    position: relative;
    display: flex;
    justify-content: center;
    background: var(--fleet-xq-dashboard-driver-bg-color);
    min-height: 180px;
    height: auto;
    padding-left: 1.5rem;
    padding-top: 1rem;
    color: var(--fleet-xq-dashboard-driver-font-color);
    text-align: center;

    >div {
        word-wrap: break-word;
    }
}

.helmet {
    margin-bottom: 5px;
}

.vehicle-banner {
    display: flex;
    justify-content: center;
    background: var(--fleet-xq-dashboard-vehicle-bg-color);
    min-height: 180px;
    height: auto;
    padding-left: 1.5rem;
    padding-top: 1rem;
    color: var(--fleet-xq-dashboard-vehicle-font-color);
    text-align: center;

    >div {
        word-wrap: break-word;
    }
}

.forklift {
    margin-bottom: 5px;
}

.impact-banner {
    display: flex;
    justify-content: center;
    background: var(--fleet-xq-dashboard-red-impacts-bg-color);
    min-height: 180px;
    height: auto;
    padding-left: 1.5rem;
    padding-top: 1rem;
    color: var(--fleet-xq-dashboard-impact-font-color);
    text-align: center;

    >div {
        word-wrap: break-word;
    }

    >div>div>div:nth-child(3) {
        display: flex;
        justify-content: center;
        width: 4vw;
    }
}

.driver-banner,
.vehicle-banner,
.impact-banner {
    width: 10vw;
    font-size: 1rem;

    >div>div>div:first-child>span>div>div>a {
        text-decoration: none;
        color: var(--fleet-xq-light)
    }

    >div>div>div:nth-child(3)>span>div>div>a {
        text-decoration: none;
        color: var(--fleet-xq-light)
    }

    >div>div {
        height: 100%;
        display: flex;
        justify-content: space-between;
    }

    >div>div>div:nth-child(3) {
        /* margin-left: 10px; */
        align-self: center;
        justify-self: center;
    }
}

.alert-icon {
    margin-bottom: 5px;
}

.dashboard-svg-custom {
    >svg {
        padding-top: 6px;
    }
}

@media screen and (max-width: 1630px) {
    .statistics {
        font-size: 0.8rem;
    }
}

@media screen and (max-width: 1500px) {
    .banner-count {
        text-align: left;
        font-size: 300%;
    }

    .banner-count-label {
        text-align: left;
        font-size: 100%;
    }
}

@media screen and (max-width: 1400px) {
    .statistics {
        font-size: 0.7rem;
    }

    .banner-count {
        text-align: left;
        font-size: 250%;
    }

    .banner-count-label {
        text-align: left;
        font-size: 90%;
    }
}

@media screen and (max-width: 900px) {
    #mobile-bar {
        display: none !important;
    }

    .header-wrapper {
        margin-top: 0 !important;
    }
}

/***********Bottom Buttons************/
.bottom-button-container-custom {
    width: 100%;
    height: 70px;
    background-color: var(--fleet-xq-bottom-button-bg-color);
    display: flex;
    justify-content: end;
    align-items: center;

    >div {
        display: flex;
        justify-content: end;
        width: auto;
        margin-right: 10px;
    }

    >div>button {
        max-width: 100px !important;
        margin-right: 10px !important;
        border-radius: 20px !important;
        height: 35px;
        font-size: 14px !important;
        padding: 0 !important;
    }
}

.back-button-span-custom {
    background-color: transparent !important;
    font-size: 14px;
    color: var(--fleet-xq-back-button-font-color);
    text-transform: uppercase;
    padding: 0 15px;
}

.vehicle-detail-page-bottom-button-container-custom {
    width: 100%;
    height: 70px;
    background-color: var(--fleet-xq-bottom-button-bg-color);
    display: flex;
    justify-content: end;
    align-items: center;

    >div {
        display: flex;
        justify-content: end;
        width: auto;
        margin-right: 10px;
    }

    >div>button {
        max-width: 100px;
        margin-right: 10px !important;
        border-radius: 20px !important;
        height: 35px;
        font-size: 14px !important;
        padding: 0 !important;

        &:first-child {
            font-weight: 600;
            text-wrap: nowrap;
            padding: 0 10px !important;
            max-width: 250px !important;
            width: 250px;
        }
    }
}

/**********************************/
.div-height-custom {
    display: flex;
    flex-direction: column;

    >div:first-child {
        overflow: auto;
    }
}

.popupContainer {
    scrollbar-width: none;
}

#popupContainer_container {
    padding: 1rem;
}

.email-group-popup-custom {
    >div.div-height-custom>div>div>div>h4 {
        font-size: 27px;
        color: var(--fleet-xq-form-header-color);
    }
}

.add-vehicle-subscription-alert-popup-custom {
    >div>div:first-child {
        padding-bottom: 5rem;
    }

    >div>div:nth-child(3) {
        position: absolute !important;
        width: 100%;
    }
}

.alert-control-custom {
    width: 100%;
    padding: 0 !important;
    margin-top: auto !important;
}

.popup-container-custom {

    /* width: 40% !important; */
    >div>div {
        height: 100%;
    }

    >div>div>div>div {
        padding: 20px;
    }

    >div>a:nth-child(3) {
        margin: 1rem 0;
    }

    >div:nth-child(2) {
        max-height: none !important;
    }
}

#DepartmentForm-DepartmentHourSettingsFormControl {
    div>h4 {
        font-size: 27px;
        letter-spacing: 1px;
        color: var(--fleet-xq-form-header-color);
        text-transform: uppercase;
        font-weight: 400
    }
}

#VehicleFormControl-VehicleForm-VehicleForm1FormData .col-12.col-lg-4.main-header-information-spacing-custom div .basicForm div:nth-child(2) {
    margin-top: 2rem;
}

.popup-container-custom.hasSinglePopup div.popupContainer div div.div-height-custom {
    max-height: 80vh;
    height: 100%;
}

.popup-container-custom.hasSinglePopup.maximize div.popupContainer div div.div-height-custom {
    max-height: 100vh;
    height: 100%;
}

.popup-form-image-input-custom {
    background-color: var(--fleet-xq-gray-250);
    border: 1px solid var(--fleet-xq-input-border-color);
    border-radius: 0.25rem;
    display: flex;

    >div>div>input {
        width: auto !important;
    }

    >div>div {
        display: flex;
        flex-direction: row-reverse;
        justify-content: flex-end;
        width: auto !important;
    }

    >div>button {
        height: auto;
        align-self: flex-start;
        margin: 0;
    }
}

.popup-form-choose-file-custom {
    max-width: 100px !important;
}

.create-new-form-custom {
    margin-bottom: 25px !important;
}

.create-new-form-h4-custom {
    font-size: 27px;
    letter-spacing: 1px;
    color: var(--fleet-xq-form-header-color);
    text-transform: uppercase;
    font-weight: 400
}

.create-new-form-button-container-custom {
    position: static !important;
    padding: 0 !important;

}

.create-new-form-buttons-custom {
    >button {
        max-width: 130px;
        border-radius: 20px !important;
        height: 2.5rem;
        padding: 0 !important;
        margin-right: 20px !important;
    }

    display: flex;
    align-items: center;
    justify-content: flex-end;
    background-color: var(--fleet-xq-bottom-button-bg-color);
    border-radius: 0px 0px 20px 20px;
    min-height: 4.375rem;
    width: 100%;
    margin-top: 20px;
}

#SendReportFormControl {
    padding: 20px;
}

.create-new-form-lookup-custom {
    >div {
        background-color: var(--fleet-xq-light-secondary) !important;
    }
}

.create-new-form-input-custom {
    background-color: var(--fleet-xq-light-secondary) !important;
}

.create-new-form-timezone-input-custom {
    >div>div>div {
        background-color: var(--fleet-xq-light-secondary) !important;
    }
}

/*********VEHICLE CHECKLIST TAB***********/

.checklist-settings-container-custom {
    margin-left: auto;
    background-color: var(--fleet-xq-alternate-bg-color);
    padding: 15px 40px 20px 40px;
    width: 500px;
    border-radius: 20px;
}

.checklist-settings-h4-custom {
    color: var(--fleet-xq-yellow-green);
    font-size: 19px;
    margin-bottom: 25px;
    text-transform: uppercase;
}

@media screen and (max-width: 1623px) {
    .pre-op-checklist-container-custom {
        width: 100%;
    }

    .checklist-settings-container-custom {
        margin-left: 0.7rem;
    }
}

.g-force-container-custom {
    display: flex;
    justify-content: space-around;
    height: 20vh;
}

.calibration-container-custom {
    display: flex;
    flex-direction: column !important;
    text-wrap: nowrap;

    >span>div>div {
        min-width: 10vw;
        text-align: center;
    }

    >span>div {
        background-color: var(--fleet-xq-light);
    }
}

.sensor-calibration-slider-value-custom {
    width: 10vw;
    text-align: center;
    padding: 4px 8px;
}

.sensor-calibration-label-custom {
    color: var(--fleet-xq-yellow-green);
    text-transform: uppercase;
    font-weight: 600;
}

.sensor-calibration-custom {
    text-align: left;
    margin: 1px 0 10px 0;
}

.calibration-label-custom {
    color: var(--fleet-xq-yellow-green) !important;
    text-transform: uppercase !important;
}

/******************FILTERS***********************/
#ModelGrid-ModelFilter-Filter {
    form>div.uiSearchContainer>div.filterFieldSetContent>div.filterContentContainer>div.d-flex>div.row>div:first-child {
        display: none;
    }

    form>div.uiSearchContainer>div.filterFieldSetContent>div.filterContentContainer>div.d-flex>div.row>div:last-child {
        margin-top: 18px !important;
    }

    form>div.uiSearchContainer>div.filterFieldSetContent>div.filterContentContainer>div.d-flex>div.row>div.filter-middlezone-container-custom {
        width: auto;
    }

    form>div.uiSearchContainer>div.filterFieldSetContent>div.filterContentContainer>div.d-flex>div.row>div.filter-middlezone-container-custom>div.col-6>div>div>span {
        align-items: center;
        margin-left: 10px;

        >select {
            width: 15vw;
            height: 30px;
        }

        >label {
            color: #000;
            font-size: 0.8rem;
            margin-bottom: -5px;
            opacity: 0.6;
        }
    }
}

.checklist-filter-container {
    display: flex;
    justify-content: space-between;

    >div>div>div>div>span {
        width: 8vw;
        display: flex;
    }

    ;

    >div>div>div>div>span>select {
        text-align: center;
        background-color: var(--fleet-xq-light) !important;
    }

    ;

    >div>div>div>div>span>label>span {
        display: inline-block;
        vertical-align: middle;
        margin-right: 0.8rem;
        margin-top: 0.4rem;
    }
}

.filter-container-custom {
    height: auto;

    >div>div {
        display: flex;
    }

    >div>div>div {
        margin: 0 !important;
        display: flex;
        align-items: center;
        width: auto;
    }

    >div>div>div>span {
        font-size: 19px;
        color: var(--fleet-xq-form-header-color);
        letter-spacing: 0.57px;
        text-transform: uppercase;
        text-wrap: nowrap;
    }
}

.multiple-filter-custom {
    >div>div>span>input {
        /* max-width: auto !important;
            width: auto !important; */
        height: 1.8rem;
        background-color: var(--fleet-xq-light) !important;
    }
}

.filter-middlezone-container-custom {
    display: flex;
    justify-content: start;

    >div {
        margin-bottom: 10px !important;
    }

    >div>div>div>span>input {
        background-color: var(--fleet-xq-light) !important;
        width: 20vw !important;
        height: 1.6rem;
        margin-bottom: 5px !important;
    }
}

.person-filter-container-custom {
    >div>div>div>span {
        font-size: 19px;
        color: var(--fleet-xq-form-header-color);
        letter-spacing: 0.57px;
        text-transform: uppercase;
        text-wrap: nowrap;
    }
}

@media screen and (max-width: 1496px) {
    .person-filter-container-custom {
        >div>div>div:first-child {
            width: 15vw;
        }

        >div>div>div:nth-child(2) {
            width: 40vw;
        }

        >div>div>div:last-child {
            width: 15vw;
        }
    }
}

@media screen and (max-width: 1400px) {
    .person-filter-container-custom {
        >div>div>div:first-child {
            width: 16vw;
        }

        >div>div>div:nth-child(2) {
            width: 35vw;
        }

        >div>div>div:last-child {
            width: 10vw;
        }
    }
}

@media screen and (max-width: 1365px) {
    .person-filter-container-custom {

        /* display: inline-block; */
        >div>div>div:first-child {
            width: 16vw;

            >span {
                font-size: 1rem;
            }
        }

        >div>div>div:nth-child(2) {
            width: 60vw;
        }

        >div>div>div:last-child {
            width: 12vw;
        }
    }
}


.person-filter-leftzone-custom {
    >div>div {
        margin-bottom: 20px !important;
    }

    >div>div>span>select {
        /* max-width: auto !important;
            width: auto !important; */
        height: 1.8rem;
        background-color: var(--fleet-xq-light) !important;
    }
}

.person-filter-toggle-zone-custom {
    >div>div {
        margin-bottom: 20px !important;
    }

    >div>div>span>select {
        min-width: 4.5vw;
        height: 1.8rem;
        background-color: var(--fleet-xq-light) !important;
    }

    >div>div>span>label {
        min-width: 4.5vw !important;
        text-wrap: nowrap;
        text-align: center;
        align-self: center;
    }

    >div>div>span {
        display: flex;
    }
}

.filter-container-flexed-custom {
    width: auto;

    >div>div {
        display: flex;
        width: auto;
    }

    >div>div>div:last-child {
        margin-left: 0.7rem;

        >span {
            display: flex;
            justify-content: center;
            align-items: center;
            width: 10vw;
        }

        >span>select {
            min-width: 4.5vw;
            height: 1.8rem;
            background-color: var(--fleet-xq-light) !important;
        }
    }

    >div>div>div>span>input {
        background-color: var(--fleet-xq-light) !important;
    }
}

.filter-span-custom {
    display: flex;
    justify-content: center;
    align-items: center;
    width: 10vw;
    margin-top: 7px;

    >label {
        text-align: center !important;
    }

    >select {
        max-width: 4vw !important;
        width: 4vw !important;
        height: 1.8rem;
    }
}

.filter-country-middlezone-container-custom {
    >div>div {
        display: flex;
        width: auto;
        justify-content: center;
    }

    >div>div>div>span>input {
        width: 20vw !important;
        margin: 0 10px 10px 0;
        background-color: var(--fleet-xq-light) !important;
    }
}

.dashboard-filter-container-custom {
    display: flex;
    justify-content: space-between;
    background-color: var(--fleet-xq-light);
    border-radius: 10px;
    padding: 1.8rem 0.4rem 1rem 0.4rem;
    width: auto;

    >div:nth-child(2) {
        width: auto;
        margin-right: 2rem;

        >h4 {
            font-size: 1.688rem;
            letter-spacing: 1px;
            color: var(--fleet-xq-form-header-color);
            text-transform: uppercase;
            text-wrap: nowrap;
            font-weight: 400
        }
    }

    >div:nth-child(3) {
        >div>div>div>div>div:nth-child(2) {
            margin-bottom: 1.2rem;
        }

        >div>div>div>div>div:nth-child(2)>div {
            background-color: #FCFCFC;
        }

        >div>div>div>div>div {
            display: flex;
            flex-direction: column;
        }

        >div>div>div>div>div>span {
            margin-right: 1rem;
            width: auto;
        }

        >div>div>div>div>div>span:first-child {
            position: absolute;
            top: -1.25rem;
            z-index: 1;
        }

        >div>div>div>div>div>span>label {
            margin-left: -0.2rem;
            font-size: 0.8rem;
            opacity: 0.6;
            width: 4.5vw;
        }
    }
}

.filter-zone-container-custom {
    >div {
        display: flex;

        >div:first-child {
            width: auto;
        }
    }

    >div>div:nth-child(3)>ul {
        display: flex;
        flex-wrap: nowrap;
    }
}

.filter-zone-container-custom-withborder {
    >div {
        display: flex;
        flex-direction: column;
        border: 3px solid var(--fleet-xq-gray-250);
        border-radius: 5px 20px 5px 5px;
        margin: auto;
        margin-top: 10px;
        width: auto;
        opacity: 1;
        padding-bottom: 15px;
    }

    >div>div:nth-child(3) {
        margin-top: 0;

        >ul {
            margin-left: 1rem;
        }
    }
}

.filter-button-container-custom {
    padding-top: 1.7rem;
    margin-top: 0 !important;

    >ul>button {
        border: none;
    }

    >ul>button:first-child {
        margin-right: 0.4rem;
        background-color: var(--fleet-xq-header-background);
    }

    >ul>button:first-child:hover {
        background-color: var(--fleet-xq-dashboard-red-impacts-bg-color);
    }

    >ul>button:nth-child(2) {
        background-color: var(--fleet-xq-back-button-font-color);
    }

    >ul>button:nth-child(2):hover {
        background-color: var(--fleet-xq-dark-button-hover-background);
    }
}

.filter-zone-content-custom {
    padding: 0 0.6rem;
}

@media screen and (max-width: 1370px) {
    .dashboard-filter-container-custom {
        flex-direction: column;

        >div:nth-child(3) {
            margin: 0.6rem 0 0 0;
            margin-top: 1.2rem;
        }
    }

    .filter-zone-container-custom {
        >div {
            flex-direction: column;
        }

        >div>div:nth-child(3) {
            margin-top: 0;

            >ul {
                margin-left: 1rem;
            }
        }
    }

    .filter-zone-container-custom-withborder {
        >div {
            flex-direction: column;
            border: 3px solid var(--fleet-xq-gray-250);
            border-radius: 5px 20px 5px 5px;
            margin: auto;
            margin-top: 10px;
            width: auto;
            opacity: 1;
            padding-bottom: 15px;
        }

        >div>div:nth-child(3) {
            margin-top: 0;

            >ul {
                margin-left: 1rem;
            }
        }
    }

    .filter-button-container-custom {
        padding: 0;
    }
}

/*************Reports*****************/

.col-12 .col-lg-4 .mb-3 .collapse-horizontal .collapse .show #col2 {
    padding: 0 !important;
}

.driver-license-expiry-report-custom {
    >div>div>root>div>h2 {
        color: #7B7B7B
    }
}

.report-content-container-custom {
    div>div {
        padding-top: 2px;
    }

    div>div>div>root>div>h2 {
        font-size: 1.2rem;
    }

    div>div>div>root>div>a>h2 {
        font-size: 1.2rem;
    }
}

.media-height-custom .main-content.container {
    div:nth-child(4)>div {
        padding-top: 2px;
    }

    div:nth-child(4)>div>div>root>div>h2 {
        font-size: 1.2rem;
    }
}

/**************PRE-OPCHECKLIST REPORT*********/
#-grid-widget-AllChecklistResultViewGrid1- div.data-grid-container table tbody tr.pointer td:nth-child(7) a {
    text-decoration: none;
    text-transform: capitalize;
    color: darkblue;
}

/**************LOOKUP FIELDS*********/

.lookup-field-recolor-custom {
    >div {
        background-color: var(--fleet-xq-light-secondary) !important;
    }

}

/*************POPUP FORM FOR VIEWING A GRID***************/

.popup-with-grid-container {
    padding: 1.6rem;
}

/*************IMPACT SETTINGS***************/
.impact-middlezone-custom {
    margin-top: 2rem;

    >div>div {
        display: flex;
        flex-direction: column-reverse;
    }
}

.sensor-calibration-button-custom {
    position: static !important;
    width: 30%;

    >div>button {
        border-radius: 25px !important;
        min-width: 5rem !important;
        height: 2rem !important;
        padding: 0 !important;
        font-size: 0.8rem !important;
    }
}

#VehicleFormControl-VehicleForm-ImpactSettingsForm-Module2Form {
    >div {
        display: flex;
        flex-direction: column;
        align-items: center;
    }
}

/*************RANGE SLIDERS***************/
.range-slider-custom {
    width: auto;
    min-width: 15rem;
    max-width: 15rem;
    align-items: center;

    >input {
        background: #DEE2E6;
        border: none;
    }

    >span {
        width: auto;
        color: black;
        background-color: #FFF;
        margin: 0.4rem 0 0 0;
    }

    >span::after {
        content: none;
    }
}

/* .sensor-slider-custom {
    > input::-webkit-slider-thumb {
        display: none;
    }
    > input::-moz-range-thumb  {
        display: none;
    }
} */

.slider-bg-color {
    background: var(--fleet-xq-alternate-bg-color);
}

.range-slider-container-custom {
    height: 2rem;
    margin-top: 0.5rem;

    >span {
        height: 100%;
    }
}

.blue-impact-slider-custom {
    >input::-webkit-slider-thumb {
        background-color: #007bff;
    }

    >input::-moz-range-thumb {
        background-color: #007bff;
    }
}

.red-impact-slider-custom {
    >input::-webkit-slider-thumb {
        background-color: #f26522;
    }

    >input::-moz-range-thumb {
        background-color: #f26522;
    }
}

.amber-impact-slider-custom {
    >input::-webkit-slider-thumb {
        background-color: #fbb03f;
    }

    >input::-moz-range-thumb {
        background-color: #fbb03f;
    }
}

/******** SERVICE SETTINGS *************/

.service-text-field-custom {

    /**Label**/
    >span:first-child {
        width: 8.5rem;
    }

    /**Input**/
    >span:nth-child(2)>div>div {
        border: none;
        background-color: #FFF !important;
    }

    >span:nth-child(2)>div>div>span {
        background-color: #FFF !important;
    }
}

.service-status-text-color {
    >span:nth-child(2) {
        color: var(--fleet-xq-dashboard-success)
    }
}

.service-date-field-custom {
    flex-wrap: nowrap;

    >span {
        min-width: 8.5rem !important;
    }

    >span:nth-child(2) {
        min-width: auto !important;
    }

    >span:nth-child(2)>div {
        border: none;
    }

    >span:nth-child(2)>div>span {
        background-color: #FFF !important;
    }
}

.service-text-field-with-label-custom {
    flex-wrap: nowrap;

    >span:first-child {
        min-width: 9.6rem !important;
        text-wrap: nowrap !important;
    }

    >span:nth-child(2)>div>div {
        border: none;
        background-color: #FFF !important;
    }

    >span:nth-child(2)>div>div>span {
        background-color: #FFF !important;
    }
}

.service-container-spacing {
    >div:nth-child(3)>div:first-child {
        border-bottom: 2px solid var(--fleet-xq-gray-250);
        padding-bottom: 1rem;
        margin-bottom: 2rem;
    }
}

.green-service-status-custom {
    color: var(--fleet-xq-dashboard-success)
}

.orange-service-status-custom {
    color: var(--fleet-xq-dashboard-warning)
}

.red-service-status-custom {
    color: var(--fleet-xq-dashboard-failure)
}

/***************ACCESS GROUP********************/
.access-group-container-custom {
    div.container div:nth-child(1) div {
        width: 100%;
    }

    div.row div.col-7 div.basicForm {
        div {
            height: 5vh;
        }
    }

    div.row div.col-1.accessgroup-accessrightswitch div {
        height: 5vh;

        >span {
            display: block;
            height: 5vh;
        }
    }
}

#AccessGroupForm-UsersAccessGroupFormFormControl,
#AccessGroupForm-AccessGroupForm2FormControl,
#AccessGroupForm-AccessGroupForm3FormControl {
    margin-top: 12vh;
}

#AccessGroupForm-AccessGroupForm3FormControl {
    margin-bottom: 12vh;
}

.view-dashboard-label-custom {
    >span {
        font-weight: 100 !important;
        background-color: var(--fleet-xq-light) !important;
    }
}

.formViewFieldControl.multilineTextBox {
    width: 62px;
    height: auto;

    >button {
        position: relative;
        z-index: 10;
        /* Increase this value as needed */
        width: 62px;
        margin: 0;
        margin-top: 10px;
        background-color: #00C2FF;
        border-radius: 5px;
        border-color: #fff;
        border: none;
        color: #fff;
        padding: 2px;
        font-size: 0.75rem
    }

}

/**remove command-button class in select/deselect buttons**/
/****************ALL IMPACTS GRID*********************/

.impact-type-icons-custom {
    height: 30px;
    line-height: 30px;
    width: 75%;
    text-align: center;

    >p {
        height: 100%;
        margin-bottom: 0;
        border-radius: 25px;
    }
}

.data-grid tbody tr:hover .red-icon-custom,
.data-grid tbody tr:hover .amber-icon-custom,
.data-grid tbody tr:hover .blue-icon-custom {
    background-color: var(--fleet-xq-light);
}

.red-icon-custom {
    background-color: #fca5a5;
    color: #b91c1c;
}

.data-grid tbody tr.currenttr td div p.red-icon-custom {
    background-color: var(--fleet-xq-light);
}

.amber-icon-custom {
    background-color: #fde047;
    color: #A16207;
}

.data-grid tbody tr.currenttr td div p.amber-icon-custom {
    background-color: var(--fleet-xq-light);
}

.blue-icon-custom {
    background-color: #7ddaec;
    color: #0491AB
}

.data-grid tbody tr.currenttr td div p.blue-icon-custom {
    background-color: var(--fleet-xq-light);
}

.g-force-level-custom {
    display: flex;
    align-items: center;
}

.data-grid tbody tr:hover .red-g-force-icon,
.data-grid tbody tr:hover .amber-g-force-icon,
.data-grid tbody tr:hover .blue-g-force-icon {
    background-color: var(--fleet-xq-light);
}


.red-g-force-icon,
.blue-g-force-icon,
.amber-g-force-icon {
    width: 14px;
    height: 14px;
    border-radius: 25px;
    margin-right: 0.5rem;
}

.red-g-force-icon {
    background-color: #fca5a5;
    border: 1px solid #fca5a5;
}

.data-grid tbody tr.currenttr td div div.red-g-force-icon {
    background-color: var(--fleet-xq-light);
}

.amber-g-force-icon {
    background-color: #fde047;
    border: 1px solid #fde047;
}

.data-grid tbody tr.currenttr td div div.amber-g-force-icon {
    background-color: var(--fleet-xq-light);
}

.blue-g-force-icon {
    background-color: #7ddaec;
    border: 1px solid #7ddaec;
}

.highcharts-figure {
    margin-bottom: 0 !important;
}

.data-grid tbody tr.currenttr td div div.blue-g-force-icon {
    background-color: var(--fleet-xq-light);
}

.data-grid tbody tr:nth-child(2n) td figure div.gForceContainer div.highcharts-container svg rect.highcharts-background {
    fill: var(--fleet-xq-alternate-bg-color);
}

.data-grid tbody tr:hover td figure div.gForceContainer div.highcharts-container svg rect.highcharts-background {
    fill: var(--go-table-hover-color);
}

.data-grid tbody tr.currenttr td figure div.gForceContainer div.highcharts-container svg rect.highcharts-background {
    fill: var(--go-table-hover-color)
}

/****************MEDIA FOR SMALL LAPTOP SCREENS*********************/

@media screen and (max-width: 1680px) {
    #PersonFormControl-PersonForm-PersonInformationFormFormControl div.uiContainer {
        div.row {

            div:nth-child(1),
            div:nth-child(2) {
                flex: 1;
            }

            div:nth-child(3),
            div:nth-child(4) {
                flex-basis: 100%;
            }
        }
    }
}

@media screen and (max-width: 1590px) {
    #VehicleFormControl-VehicleForm-ImpactSettingsFormControl div.uiContainer {
        div.row {

            div:nth-child(1),
            div:nth-child(2) {
                flex: 1;
            }

            div:nth-child(3) {
                flex-basis: 100%;
            }
        }
    }

    #VehicleFormControl-VehicleForm-ImpactSettingsForm-Module2Form div {
        display: flex;
        align-items: flex-start;
    }

    #VehicleFormControl-VehicleForm-ImpactSettingsForm-Module2Form-SensorCalibrationFormControl {
        div.range-slider.range-slider-custom.sensor-slider-custom {
            align-items: center !important;
        }
    }

    .sensor-calibration-button-custom {
        width: 20%;
    }

    /* .form-field[data-entityfield="iscanbus-view"] {
        margin-top: 5.6rem !important;
    } */

}

/****************MEDIA FOR WIDEST TABLET SIZE (1024px x 1366)*********************/
@media screen and (max-width: 1719px) {
    .popup-filter-container-custom {
        div {
            width: 100% !important;

            >div.col-6.filterGroupContainer>div>div>span>select {
                width: 90% !important;
            }
        }
    }

    body.fullwidth.page.page-PreOpCheckPage {
        div#form div div#popupContainer div#popupContainer0 div div div {
            max-height: 70vh !important;
        }
    }
}

@media screen and (max-width: 1366px) {
    div.VehicleFormControl-VehicleForm-tabs-contenu.VehicleFormControl-VehicleForm-tabs-4 div.row div.col-12.col-lg-6 {
        width: 100% !important;
    }

    #VehicleFormControl-VehicleForm-ImpactSettingsForm-Module4FormData>div>div>div {
        >span.form-field-control-container.no-border {
            display: flex;
            justify-content: center;
        }

        >span.form-field-label-zone.no-border {
            width: auto;
        }

    }

    body.fullwidth.page-VehilceItemsPage.viewStyle-list div#form div div#popupContainer div#popupContainer0 {
        height: 70vh
    }

    .container {
        margin: 0 !important;
    }

    /* .tab-positioning-custom {
        translate: 0 -8rem
    } */
    .media-height-custom {
        >div> {
            min-height: 154vh;
        }
    }

    .customerNameContainer {
        width: auto;
        padding: 0 1rem;
    }
}

@media screen and (max-width: 1180px) {

    /**DASHBOARD**/
    .report-content-container-custom {
        >div {
            width: auto;
        }
    }

    .container {
        max-width: 1000px;
    }

    .zone-content-container-custom {
        display: flex;
        flex-direction: column;

        >div {
            width: 100% !important;
        }
    }

    .driver-banner,
    .vehicle-banner,
    .impact-banner {
        width: 18vw;
    }

    .statistics {
        font-size: 1rem;

        >div>div {
            display: flex;
            align-items: center;
        }
    }

    .tab-positioning-custom {
        width: 70%;
        translate: 0 -7.25rem;
        align-items: flex-end;
    }

    .tabs-container-alignment-custom {
        >div:first-child>div>div {
            width: 100%;
        }
    }
}

@media screen and (max-width: 1024px) {

    /***LOGIN PAGE***/
    .login-page-rectangle-custom,
    .login-page-yellow-rectangle-custom {
        width: 381px;
        height: 437px
    }
}


/****************MEDIA FOR MOBILE SIZES*********************/

@media screen and (max-width: 960px) {
    .main-header-image-border-custom {
        display: none;
    }

    .main-header-information-spacing-custom {
        margin-left: 20px;
    }

    .main-header-information-spacing-custom,
    .main-header-right-zone-spacing-custom {
        width: 45%;
    }

    .sub-heading-spacing-custom {
        padding-top: 10px;
    }

    .tab-positioning-custom {
        border-radius: 0;
        border-left: none !important;
        width: 100%;
    }

    /*navbar*/
    .bottom-logo-border-custom {
        display: none;
    }

    .sidebar-off.btn.btn-icon {
        visibility: visible !important;

        svg {
            fill: #fff
        }
    }

    /*Page controllers*/
    .bottom-button-container-custom {
        div.btn-group>button {
            min-width: 100px !important;
            font-size: 0.65rem !important;
        }
    }

    .back-button-placing-custom {
        width: auto;
        left: 320px;

        span {
            font-size: 0.65rem;
        }
    }

    /*Login*/
    .header-wrapper.fullwidth>header>.container {
        padding: 5px;
    }

    .header-bottom-bar .row .col-lg-10 {
        width: 100% !important;
    }

    .header-image.login-header-logo-custom {
        padding: 0;

        >object {
            width: 200px;
            height: 100px;
        }
    }

    .login-header-span-custom {
        font-size: 0.8rem;
        margin-top: 12px;
    }

    .brand.vertical {
        margin-top: 0;
    }

    .loginRightColumn.col.align-self-center {
        h1 {
            font-size: 0.8rem;
        }
    }

    .loginContent {
        div.accountInfo>input {
            margin-top: 20px;
        }
    }

    .footer-logo-custom {
        bottom: 20px;
        left: 100px;

        object {
            width: 100px;
        }
    }

    .login-page-rectangle-custom {
        width: 300px;
        height: 350px;
    }

    .login-page-yellow-rectangle-custom {
        width: 300px;
        height: 350px;
    }

    /*Icons*/
    .driver-access-icon-custom,
    .supervisor-access-icon-custom {
        height: 16px;
        width: 16px;
        font-size: 0.5rem;
        margin: 0;
    }

    .access-icon-container-custom {
        justify-content: space-between;
    }

    /*popup*/
    .popup-container-custom {
        top: 50px !important;
    }
}

@media screen and (max-width: 480px) {

    /***LOGIN PAGE***/
    .login-page-rectangle-custom,
    .login-page-yellow-rectangle-custom,
    .footer-logo-custom>object,
    .login-footer-svg-custom {
        display: none !important;
    }

    .loginPage .container {
        max-width: 100% !important;
    }

    .brand.vertical {
        margin-top: 25px;
    }

    /**Customer Grid**/
    #CustomerGrid div.uiContainer div#-grid-widget-CustomerGrid- div.data-grid-container table.data-grid {

        thead.gridControl tr th:nth-child(2),
        th:nth-child(4) {
            display: none;
        }

        tbody tr td:nth-child(2),
        td:nth-child(4) {
            display: none;
        }
    }

    /**Vehicle Grid**/
    #VehilceGrid div div.uiContainer div#-grid-widget-VehilceGrid- div.data-grid-container table.data-grid {

        thead.gridControl tr th:nth-child(2),
        th:nth-child(3),
        th:nth-child(7),
        th:nth-child(8) {
            display: none;
        }

        tbody tr td:nth-child(2),
        td:nth-child(3),
        td:nth-child(7),
        td:nth-child(8) {
            display: none;
        }
    }

    /**User Grid**/
    #PersonGrid div div.uiContainer div#-grid-widget-PersonGrid- div.data-grid-container table.data-grid {

        thead.gridControl tr th:nth-child(3),
        th:nth-child(4),
        th:nth-child(5),
        th:nth-child(6),
        th:nth-child(8),
        th:nth-child(9) {
            display: none;
        }

        tbody tr td:nth-child(3),
        td:nth-child(4),
        td:nth-child(5),
        td:nth-child(6),
        td:nth-child(8),
        td:nth-child(9) {
            display: none;
        }
    }

    /** Report Grids**/
    #GeneralProductivityViewFormControl-GeneralProductivityViewForm-GeneralProductivityPerVehicleViewItemsGrid div.uiContainer div.data-grid-container table.data-grid {
        thead.gridControl tr th {
            padding: 0;
            text-align: center;
        }

        thead.gridControl tr th:nth-child(2),
        th:nth-child(4),
        th:nth-child(9) {
            display: none;
        }

        tbody tr td:nth-child(2),
        td:nth-child(4),
        td:nth-child(9) {
            display: none;
        }
    }

    #GeneralProductivityViewFormControl-GeneralProductivityViewForm-GeneralProductivityPerDriverViewLatestItemsGrid div.uiContainer div.data-grid-container table.data-grid {
        thead.gridControl tr th {
            padding: 0;
            text-align: center;
        }

        thead.gridControl tr th:nth-child(1),
        th:nth-child(2),
        th:nth-child(8) {
            display: none;
        }

        tbody tr td:nth-child(1),
        td:nth-child(2),
        td:nth-child(8) {
            display: none;
        }
    }

    #AllImpactsViewGrid div.uiContainer div.data-grid-container table.data-grid {
        font-size: 0.8rem;

        thead.gridControl tr th {
            padding: 0;
            text-align: center;
        }

        thead.gridControl tr th:nth-child(1),
        th:nth-child(2),
        th:nth-child(6),
        th:nth-child(9) {
            display: none;
        }

        tbody tr td:nth-child(1),
        td:nth-child(2),
        td:nth-child(6),
        td:nth-child(9) {
            display: none;
        }
    }

    #AllVehicleUnlocksViewGrid div.uiContainer div.data-grid-container table.data-grid {
        font-size: 0.8rem;

        thead.gridControl tr th {
            padding: 0;
            text-align: center;
        }

        thead.gridControl tr th:nth-child(1),
        th:nth-child(2),
        th:nth-child(4),
        th:nth-child(5),
        th:nth-child(11) {
            display: none;
        }

        tbody tr td:nth-child(1),
        td:nth-child(2),
        td:nth-child(4),
        td:nth-child(5),
        td:nth-child(11) {
            display: none;
        }
    }

    #CurrentStatusCombinedViewFormControl-CurrentStatusCombinedViewFormControl div.uiContainer div.data-grid-container table.data-grid,
    #CurrentStatusCombinedViewFormControl-CurrentStatusCombinedViewForm-CurrentStatusVehicleViewItemsGrid div.uiContainer div.data-grid-container table.data-grid {
        font-size: 0.8rem;

        thead.gridControl tr th {
            padding: 0;
            text-align: center;
        }

        thead.gridControl tr th:nth-child(1),
        th:nth-child(2) {
            display: none;
        }

        tbody tr td:nth-child(1),
        td:nth-child(2) {
            display: none;
        }
    }

    #AllLicenseExpiryViewGrid div.uiContainer div.data-grid-container table.data-grid {
        thead.gridControl tr th {
            padding: 0;
            text-align: center;
        }

        thead.gridControl tr th:nth-child(1),
        th:nth-child(2) {
            display: none;
        }

        tbody tr td:nth-child(1),
        td:nth-child(2) {
            display: none;
        }
    }

    #AllMessageHistoryStoreProcedureGrid div.uiContainer div.data-grid-container table.data-grid {
        font-size: 0.8rem;

        thead.gridControl tr th {
            padding: 0;
            text-align: center;
        }

        thead.gridControl tr th:nth-child(1),
        th:nth-child(2),
        th:nth-child(6),
        th:nth-child(7),
        th:nth-child(10) {
            display: none;
        }

        tbody tr td:nth-child(1),
        td:nth-child(2),
        td:nth-child(6),
        td:nth-child(7),
        td:nth-child(10) {
            display: none;
        }
    }

    #AllChecklistResultViewGrid1 div.uiContainer div.data-grid-container table.data-grid {
        font-size: 0.75rem;

        thead.gridControl tr th {
            padding: 0;
            text-align: center;
        }

        thead.gridControl tr th:nth-child(1),
        th:nth-child(2),
        th:nth-child(10) {
            display: none;
        }

        tbody tr td:nth-child(1),
        td:nth-child(2),
        td:nth-child(10) {
            display: none;
        }
    }

    #ProficiencyCombinedViewFormControl-ProficiencyCombinedViewForm-DriverProficiencyViewItemsGrid div.uiContainer div.data-grid-container table.data-grid {
        font-size: 0.75rem;

        thead.gridControl tr th {
            padding: 0;
            text-align: center;
        }

        thead.gridControl tr th:nth-child(1),
        th:nth-child(2),
        th:nth-child(9),
        th:nth-child(10),
        th:nth-child(11) {
            display: none;
        }

        tbody tr td:nth-child(1),
        td:nth-child(2),
        td:nth-child(9),
        td:nth-child(10),
        td:nth-child(11) {
            display: none;
        }
    }

    #ProficiencyCombinedViewFormControl-ProficiencyCombinedViewForm-VehicleProficiencyViewItemsGrid div.uiContainer div.data-grid-container table.data-grid {
        font-size: 0.75rem;

        thead.gridControl tr th {
            padding: 0;
            text-align: center;
        }

        thead.gridControl tr th:nth-child(1),
        th:nth-child(2),
        th:nth-child(9),
        th:nth-child(10),
        th:nth-child(11) {
            display: none;
        }

        tbody tr td:nth-child(1),
        td:nth-child(2),
        td:nth-child(9),
        td:nth-child(10),
        td:nth-child(11) {
            display: none;
        }
    }

    #ServiceSettingsForm1Control-ServiceSettingsForm1-VehicleGridGrid div.uiContainer div.data-grid-container table.data-grid {
        font-size: 0.75rem;

        thead.gridControl tr th {
            padding: 0;
            text-align: center;
        }

        thead.gridControl tr th:nth-child(1),
        th:nth-child(2),
        th:nth-child(6),
        th:nth-child(7),
        th:nth-child(9) {
            display: none;
        }

        tbody tr td:nth-child(1),
        td:nth-child(2),
        td:nth-child(6),
        td:nth-child(7),
        td:nth-child(9) {
            display: none;
        }
    }

    #VORReportCombinedViewFormControl-VORReportCombinedViewForm-AllVORSessionsPerVehicleStoreProcedureItemsGrid div.uiContainer div.data-grid-container table.data-grid {
        font-size: 0.75rem;

        thead.gridControl tr th {
            padding: 0;
            text-align: center;
        }

        thead.gridControl tr th:nth-child(1),
        th:nth-child(2),
        th:nth-child(9) {
            display: none;
        }

        tbody tr td:nth-child(1),
        td:nth-child(2),
        td:nth-child(9) {
            display: none;
        }
    }

    #AllVehicleCalibrationStoreProcedureGrid div.uiContainer div.data-grid-container table.data-grid {
        font-size: 0.7rem;

        thead.gridControl tr th {
            padding: 0;
            text-align: center;
        }

        thead.gridControl tr th:nth-child(1),
        th:nth-child(2),
        th:nth-child(3),
        th:nth-child(5),
        th:nth-child(10) {
            display: none;
        }

        tbody tr td:nth-child(1),
        td:nth-child(2),
        td:nth-child(3),
        td:nth-child(5),
        td:nth-child(10) {
            display: none;
        }
    }

    #AllEmailSubscriptionStoreProcedureGrid div.uiContainer div.data-grid-container table.data-grid {
        font-size: 0.8rem;

        thead.gridControl tr th {
            padding: 0;
            text-align: center;
        }

        thead.gridControl tr th:nth-child(1),
        th:nth-child(2) {
            display: none;
        }

        tbody tr td:nth-child(1),
        td:nth-child(2) {
            display: none;
        }
    }


    #AllEmailSubscriptionStoreProcedureGrid div.uiContainer div.data-grid-container table.data-grid {
        thead.gridControl tr th {
            padding: 0;
            text-align: center;
        }

        thead.gridControl tr th:nth-child(1),
        th:nth-child(2) {
            display: none;
        }

        tbody tr td:nth-child(1),
        td:nth-child(2) {
            display: none;
        }
    }

    #VORReportCombinedViewFormControl-VORReportCombinedViewForm-AllVORStatusStoreProcedureItemsGrid div.uiContainer div.data-grid-container table.data-grid {
        thead.gridControl tr th {
            padding: 0;
            text-align: center;
        }

        thead.gridControl tr th:nth-child(1),
        th:nth-child(2) {
            display: none;
        }

        tbody tr td:nth-child(1),
        td:nth-child(2) {
            display: none;
        }
    }

    /**Profile Headers**/
    .content-wrapper .zone-content {
        margin-top: 0;
    }

    .container {
        padding-left: 0;
    }

    #CustomerFormControl-CustomerForm-CustomerForm2FormControl,
    #PersonFormControl-PersonForm-PersonDetailsHeaderFormFormControl,
    #VehicleFormControl-VehicleForm-VehicleForm1FormControl,
    #DealerForm1Control-DealerForm1-DealerForm2FormControl {
        display: none;
    }

    .main-profile-header-custom {
        height: 12vh;
        min-height: auto;
    }

    /**header Tabs**/
    .tab-positioning-custom {
        border-bottom: none !important;
        translate: 0 -5rem;
    }

    .tabs.CustomerFormControl-CustomerForm-tabs.tab-positioning-custom,
    .tabs.PersonFormControl-PersonForm-tabs.tab-positioning-custom,
    .tabs.VehicleFormControl-VehicleForm-tabs.tab-positioning-custom,
    .tabs.DealerForm1Control-DealerForm1-tabs.tab-positioning-custom {
        padding: 0 !important;
    }

    .tabs.CustomerFormControl-CustomerForm-tabs {
        li {
            width: auto;

            a {
                font-size: 0.5rem;
            }
        }
    }

    .tabs.PersonFormControl-PersonForm-tabs.tab-positioning-custom,
    .tabs.VehicleFormControl-VehicleForm-tabs {
        li {
            width: auto;

            a {
                font-size: 0.6rem;
            }
        }
    }

    .tabs.DealerForm1Control-DealerForm1-tabs.tab-positioning-custom {
        li {
            width: auto;

            a {
                font-size: 0.6rem;
            }
        }
    }

    /**Containers**/
    .container {
        padding-right: 0;
        padding-bottom: 2vh;
    }

    #form>div {
        width: 100vw;
    }

    .main-wrapper {
        overflow-x: hidden !important;
    }

    /**Filters**/
    #PersonGrid-PersonFilter-Filter div.row,
    #VehilceGrid-VehicleFilter-Filter div.row,
    #VehiclesGPSLocationsGrid-VehicleFilter-Filter div.row {
        div.col-12.col-lg-8 {
            width: 100%;
            margin-top: 2rem;

            div.col-6.filterGroupContainer.multiple-filter-custom {
                width: 100%;

                div {
                    width: 100%;

                    div span label {
                        display: flex;
                        align-items: center;
                    }
                }
            }
        }

        div.col-12.col-lg-1 {
            width: 100%;
            display: flex;
            justify-content: end;
        }
    }

    #RegionGrid-RegionFilter-Filter {
        div.row {
            display: flex;
            flex-direction: column;
        }

        div.col-6.filterGroupContainer div {
            display: flex;
            flex-direction: column;

            div {
                width: 80vw;
            }
        }

        div.col-6.filterGroupContainer div:nth-child(2) {
            margin: 5px 2px;
        }
    }

    #CountryGrid-CountryFilter-Filter div.col-6.filterGroupContainer {
        div div span {
            width: 40vw;
        }

        div div label {
            display: none;
        }
    }

    #TimezoneGrid-TimezoneFilter-Filter div.col-6.filterGroupContainer {
        div div span {
            width: 80vw;
        }

        div div label {
            display: none;
        }
    }

    #ModelGrid-ModelFilter-Filter div.col-6.filterGroupContainer {
        div div span select {
            width: 60vw !important;
        }
    }

    #DealerForm1Control-DealerForm1-CustomersGrid-CustomerFilter-Filter div.filter-middlezone-container-custom {
        width: 100%;

        input.filterTextInputCustom.form-control {
            width: 80vw;
        }
    }

    /**Customer Forms**/
    .person-information-header-custom {
        width: 70%;
    }

    #-CustomerPreOperationalChecklistTemplateItemsGridViewModel-grid-widget-CustomerPreOperationalChecklistTemplateGrid- div.data-grid-container.model-table-spacing-custom table.data-grid {

        thead.gridControl tr th {
            padding: 0;
            font-size: 0.7rem;
            text-align: center;
        }

        tbody.model-tbody-custom tr td {
            padding: 10px 0 !important;
            font-size: 0.7rem;
            text-align: center;
        }
    }

    .site-list-container-custom {
        padding: 0;
    }

    .gridControl th.ui-grid-sort-s,
    .gridControl th.ui-grid-sort-n-s {
        background-image: none;
    }

    /**Person Forms**/
    #PersonFormControl-PersonForm-SupervisorAuthorizationFormControl div.uiContainer.form-spacing-custom div div.basicForm div span {
        justify-content: end !important;
    }

    /**Vehicle Forms**/
    .time-in-seconds-align-custom,
    .timeout-align-custom,
    .vehicle-information-idle-timer-label-custom {
        position: static;
    }

    #-VehicleChecklistFormFormViewModel-VehicleToPreOpCheckilstItemsGridViewModel-grid-widget-VehicleToPreOpChecklistGrid- div.data-grid-container table.data-grid {
        thead.gridControl {
            tr th {
                padding: 0;
                width: auto !important;
                text-align: center;
                font-size: 0.7rem;
            }
        }

        tbody {
            tr td {
                padding: 5px 0;
                width: auto !important;
                text-align: center;
                font-size: 0.7rem;
            }
        }
    }

    #VehicleFormControl-VehicleForm-VehicleChecklistFormForm-VehicleToPreOpCheckilstItemsGrid-VehicleToPreOpChecklistViewFilter-Filter {
        select.form-control {
            min-width: 10vw;
        }
    }

    .range-slider-custom {
        min-width: auto;
    }

    .form-field-label-zone {
        width: auto !important;
    }

    /**Bottom Buttons**/
    .bottom-button-container-custom {
        justify-content: start;
    }

    .vehicle-detail-page-bottom-button-container-custom {
        height: 12vh;

        div {
            justify-content: space-between !important;

            button.btn.delete.command-button,
            button.btn.sync.command-button,
            button.btn.edit.command-button,
            button.btn.canceledit.command-button,
            button.btn.save.command-button {
                margin: 10px !important;
            }
        }
    }

    div.control-command.bottom.large.bottom-button-container-custom {
        div.btn-group.nav {
            margin-left: 5px;
        }
    }

    .back-button-placing-custom {
        margin-right: 5px;
        text-align: center;
    }

    .topGridCommands {
        display: flex;
        flex-wrap: wrap;

        div.horizontalList {
            margin: 5px;
        }
    }

    .mobile-back-button-placing-custom {
        left: 280px !important;
    }

    /**Grids**/
    #VehilceGrid-VehicleFilter-Filter div.row {
        div.col-12.col-lg-1 {
            margin-top: 10px;
        }
    }

    #CustomerGrid-CustomerFilter-Filter div.row {
        flex-direction: column;

        div.col-6.filterGroupContainer {
            width: 100%;

            div {
                width: 100%;
            }

            label.input-group-text {
                width: 100%;
            }
        }
    }

    /**Controllers**/
    .tabs.GeneralProductivityViewFormControl-GeneralProductivityViewForm-tabs.subform-tab-custom,
    .tabs.CurrentStatusCombinedViewFormControl-CurrentStatusCombinedViewForm-tabs.subform-tab-custom,
    .tabs.ProficiencyCombinedViewFormControl-ProficiencyCombinedViewForm-tabs.subform-tab-custom,
    .tabs.VORReportCombinedViewFormControl-VORReportCombinedViewForm-tabs.subform-tab-custom {
        position: static !important;
    }

    #ServiceSettingsForm1Control-ServiceSettingsForm1-VehicleGridGrid,
    #GeneralProductivityViewFormControl-GeneralProductivityViewForm-GeneralProductivityPerVehicleViewItemsGrid,
    #GeneralProductivityViewFormControl-GeneralProductivityViewForm-GeneralProductivityPerDriverViewLatestItemsGrid,
    #AllImpactsViewGrid,
    #AllChecklistResultViewGrid1,
    #AllVehicleUnlocksViewGrid,
    #CurrentStatusCombinedViewFormControl-CurrentStatusCombinedViewForm-CurrentStatusDriverViewItemsGrid,
    #ProficiencyCombinedViewFormControl-ProficiencyCombinedViewForm-DriverProficiencyViewItemsGrid,
    #CurrentStatusCombinedViewFormControl-CurrentStatusCombinedViewForm-CurrentStatusVehicleViewItemsGrid,
    #VORReportCombinedViewFormControl-VORReportCombinedViewFormControl,
    #ProficiencyCombinedViewFormControl-ProficiencyCombinedViewForm-VehicleProficiencyViewItemsGrid {
        div.gridCommands {
            position: static !important;
        }
    }

    /**Licenses**/
    .licenses-labels-container-custom {
        flex-direction: column !important;
    }

    .license-card-custom {
        margin: 0.7rem 0 0 1rem;
    }

    /**Popup Forms**/
    .popupContainer {
        padding: 0;
    }

    .create-new-form-buttons-custom {
        margin-right: 10px;
        justify-content: space-evenly;
        position: fixed !important;
        bottom: 0;
    }

    /**ACCESS GROUPS**/
    .access-group-container-custom {
        font-size: 0.9rem;

        div.row div.col-7 {
            width: 25%;
            padding: 0;

            div.basicForm div {
                span div {
                    margin-top: 10px;
                }
            }
        }

        div.row div.col-1 {
            width: 15%;
            padding: 0;
        }
    }

    .formViewFieldControl.multilineTextBox {
        >button {
            width: 50px;
        }

    }

    /**Administrative Pages**/
    #GOUserForm2Control div.btn-group.nav {
        width: auto;

        button.btn.createnew.command-button {
            font-size: 0.75em;
        }
    }

    #GOUserForm2Control {
        height: 50vh;

        div.control-command.bottom.large div.btn-group.nav {
            position: absolute !important;
            bottom: 0.6rem;
            left: 0;
            padding: 0 10px;
            display: flex;
            width: 100%;

            button.btn.edit.command-button {
                width: auto;
            }
        }
    }

    /**Sidebar Nav**/
    #AdminSettings-collapse ul {
        li:nth-child(9) {
            display: none;
        }
    }
}


/************OTHERS**************/

#PersonFormControl-PersonForm-PersonWebsiteAccessFormForm-GOUserFormControl div.uiContainer.form-spacing-custom {
    padding: 0;
}

.info-text {
    padding-left: 23px;
}

.loginPage {
    z-index: 100;
}

.title-with-command {
    text-decoration: none;
}

.gForceContainer {
    height: 70px;
}

.accessgroup-label {
    svg {
        display: none;
    }
}

.accessgroup-accessrightswitch {
    z-index: 999;
}

#DriverSessionsFormControl,
#AlertSubscriptionForm1Control {
    padding: 20px;
}

#SiteForm1-SiteFormForm-VehicleForm3FormControl div.uiContainer div div.basicForm {
    div.form-field span.form-field-label-zone {
        max-width: none !important;
        width: 30%;
    }
}

.sidebar-off.btn.btn-icon {
    visibility: hidden;
}

#DealerForm1Control-DealerForm1-DealerForm2FormData div.row {
    margin-left: 1rem;
}

/************DEPARTMENT HOURS SETTINGS**************/

#DepartmentForm-DepartmentHourSettingsFormData div.row div.col-12.col-lg-4 div div.basicForm div.form-field.view.optionalField {
    display: flex;
    justify-content: space-between;

    >span.form-field-control-container {
        max-width: 40px;

        >div>div.text-field {
            text-align: center;
        }

        >div.enum-field>span {
            text-align: center;
        }
    }
}

.total-business-hours-open-custom {
    font-weight: bold;
    font-size: 1.2rem;
    margin-left: -2px;
}

.day-of-the-week-custom {
    >span {
        font-weight: bold;
        font-size: 1rem;
    }
}

.col-1.accessgroup-accessrightswitch {
    text-align: center;
}


#GOUserForm2Control>div>div:nth-child(3) {
    div {
        display: flex;
    }

    div>button.btn.edit.command-button {
        width: 100%;
        border-radius: 20px;
        display: flex;
        justify-content: center;
        align-items: center;
        margin-top: 10px;
        height: 38px;
    }

    div>button.btn.createnew.command-button {
        margin-top: 5px;
    }

}

#VehicleFormControl-VehicleForm-ImpactSettingsForm-Module2Form-SensorCalibrationFormData div div.basicForm div:nth-child(3) span {
    background: #fff;
}

#VehicleFormControl-VehicleForm-VehicleInformationFormFormControl .formEditLookupFieldControl.formEditLookupFieldControl-withbutton {
    display: flex;
}


#-GeneralProductivityPerVehicleViewItemsGridViewModel-grid-widget-GeneralProductivityPerVehicleViewGrid- div.data-grid-container table.data-grid,
#-AllVORSessionsPerVehicleStoreProcedureItemsGridViewModel-grid-widget-AllVORSessionsPerVehicleStoreProcedureGrid- div.data-grid-container table.data-grid,
#-GeneralProductivityPerDriverViewLatestItemsGridViewModel-grid-widget-GeneralProductivityPerDriverViewGrid- div.data-grid-container table.data-grid {
    tbody tr.pointer td:last-child {
        a {
            text-decoration: none;
            border: 1px solid #68d2d0;
            color: #68d2d0;
            border-radius: 25px;
            padding: 5px;
        }
    }
}

#-GeneralProductivityPerVehicleViewItemsGridViewModel-grid-widget-GeneralProductivityPerVehicleViewGrid- div.data-grid-container table.data-grid,
#-AllVORSessionsPerVehicleStoreProcedureItemsGridViewModel-grid-widget-AllVORSessionsPerVehicleStoreProcedureGrid- div.data-grid-container table.data-grid,
#-GeneralProductivityPerDriverViewLatestItemsGridViewModel-grid-widget-GeneralProductivityPerDriverViewGrid- div.data-grid-container table.data-grid {
    tbody tr.currenttr td:last-child a {
        color: #fff !important;
        border: 1px solid #fff !important;
    }

    tbody tr:hover td:last-child {
        a {
            color: #fff !important;
            border: 1px solid #fff !important;
        }
    }
}

/* #VehicleFormControl-VehicleForm-VehicleInformationFormForm-ModuleFormData {
    div.basicForm {
        position: absolute;
        width: 100%;
        bottom: 148px;
    }
} */

.azure-login-buttom-custom {
    padding: 0;

    >input {
        margin-top: 10px !important;
    }
}

.subform-create-new-button-custom {
    border-radius: 20px !important;
    color: #fff;
    background-color: #5FCDE8;
    border: none;
    font-weight: 600;
    text-wrap: nowrap;
    padding: 5px 10px !important;
    margin-top: 0.6rem;
}

.expired-simcard-container-custom {
    height: 100%;
    background-color: red;
    width: 100%;
    display: flex;
    justify-content: center;
    align-items: center;
    color: white;
}

.answer-failed-container-custom {
    height: 100%;
    width: 50%;
    display: flex;
    justify-content: center;
    align-items: center;
    color: white;
}

.answer-success-container-custom {
    height: 100%;
    width: 50%;
    display: flex;
    justify-content: center;
    align-items: center;
    border-bottom: 1px solid white;
}

.simcard-container-custom {
    height: 100%;
    width: 100%;
    display: flex;
    justify-content: center;
    align-items: center;
    border-bottom: 1px solid white;
}

.loginPage h1 {
    margin-bottom: 1rem;
}

/**ICONS**/

.tooltip-text {
    visibility: hidden;
    opacity: 0;
    position: absolute;
    left: 20px;
    /* Adjust distance from the icon */
    top: 50%;
    transform: translateX(-50%) translateY(-180%);
    background-color: #000;
    color: #fff;
    padding: 5px 10px;
    border-radius: 4px;
    white-space: nowrap;
    transition: opacity 0.3s ease, visibility 0.3s ease;
    font-size: 12px;
}

.icon-container {
    position: relative;
    display: inline-block;
}

.icon-container:hover .tooltip-text {
    visibility: visible;
    opacity: 1;
}

.expired-simcard-custom,
.simcard-custom {
    text-align: center;
}

/***Vehicle form popups**/

#VehicleForm4Control {
    height: 80vh;
}

#VehicleForm4-VehicleDiagnosticFormControl div.uiContainer div div.basicForm div.licenses-labels-container-custom {
    margin: 0;
}

#VehicleFormControl-VehicleForm-VehicleInformationFormForm-Module1FormControl {
    position: relative;
    transform: translateY(200%);
    margin-bottom: -60px;
    /* Compensate for the space taken */
}

#VehicleFormControl-VehicleForm-VehicleInformationFormForm-Module1FormData {
    position: relative;
    transform: translateY(-120%);
    margin-bottom: -60px;
    /* Compensate for the space taken */
}

#ImportJobStatusFormControl .control-command.bottom.large {
    position: fixed;
    bottom: 0;
    width: calc(100% - 250px);
    /* Subtract sidebar width */
    margin-left: 250px;
    /* Account for sidebar width */
    padding-left: 40px;
    background-color: var(--fleet-xq-bottom-button-bg-color);
    display: flex;
    justify-content: flex-start;
    flex-wrap: wrap;
    gap: 10px;
    z-index: 1000;
}

/* For when sidebar is minimized */
.main-wrapper.sidebar-minimize .control-command.bottom.large {
    width: calc(100% - 80px);
    /* Adjust for minimized sidebar */
    margin-left: 80px;
}

.detail-template-custom {
    a {
        cursor: pointer;
        text-decoration: underline !important;
    }
}

/* Align Is CANBUS with Canrule */
.form-field[data-entityfield="iscanbus-view"],
.form-field[data-entityfield="iscanbus-edit"] {
    position: absolute;
    bottom: 170px;
}

/* Align Sim Card Date with CCID */
#VehicleFormControl-VehicleForm-VehicleInformationFormForm-ModuleFormControl .form-field[data-entityfield="simcarddate-view"],
.form-field[data-entityfield="simcarddate-edit"] {
    position: absolute;
    bottom: 58px;
}

#PersonFormControl-PersonForm-PersonWebsiteAccessFormForm-GOUserFormControl div.uiContainer div div.basicForm {

    div[data-entityfield="fullname-view"],
    div[data-entityfield="fullname-edit"] {
        visibility: hidden;
        height: 0;
        margin: 0;
        padding: 0;
        overflow: hidden;
    }
}

#PersonFormControl-PersonForm-PersonWebsiteAccessFormForm-GOUserFormData {
    padding-top: 0;
}

#CustomerFormControl-CustomerForm-CustomerForm2FormControl div.uiContainer div.row div.col-12.col-lg-4.main-header-right-zone-spacing-custom {
    margin-top: 2.3rem;
}

#CustomerFormControl-CustomerForm-CustomerForm2FormControl div[data-entityfield="contractnumber-view"],
#CustomerFormControl-CustomerForm-CustomerForm2FormControl div[data-entityfield="contractdate-view"],
#CustomerFormControl-CustomerForm-CustomerForm2FormControl div[data-entityfield="field20-view"],
#CustomerFormControl-CustomerForm-CustomerForm2FormControl div[data-entityfield="field10-view"],
#CustomerFormControl-CustomerForm-CustomerForm2FormControl div[data-entityfield="fullname-view"],
#CustomerFormControl-CustomerForm-CustomerForm2FormControl div[data-entityfield="phoneno-view"],
#CustomerFormControl-CustomerForm-CustomerForm2FormControl div[data-entityfield="email-view"],
#CustomerFormControl-CustomerForm-CustomerForm2FormControl div[data-entityfield="address-view"] {
    font-size: 1.2rem;
}

/**Pre-op report grid + show answers form**/

/* Higher specificity for failed answers to override alternating colors */
.data-grid tbody tr.critical-failed-row,
.data-grid tbody tr.critical-failed-row:nth-child(2n),
.data-grid tbody tr.critical-failed-row>*,
.data-grid tbody tr.critical-failed-row:nth-child(2n)>*,
.data-grid tbody tr.critical-failed-row a {
    background-color: #F26522 !important;
    color: #fff;
}

.data-grid tbody tr.critical-failed-row a,
.data-grid tbody tr.critical-failed-row:nth-child(2n) a {
    color: #fff;
}

.data-grid tbody tr.incomplete-checklist-row,
.data-grid tbody tr.incomplete-checklist-row:nth-child(2n),
.data-grid tbody tr.incomplete-checklist-row>*,
.data-grid tbody tr.incomplete-checklist-row:nth-child(2n)>*,
.data-grid tbody tr.incomplete-checklist-row a {
    background-color: #FFA41C !important;
    color: #fff;
}

.data-grid tbody tr.incomplete-checklist-row a,
.data-grid tbody tr.incomplete-checklist-row:nth-child(2n) a {
    color: #fff;
}

/* Higher specificity for failed answers to override alternating colors */
.data-grid tbody tr.failed-answer-row,
.data-grid tbody tr.failed-answer-row:nth-child(2n),
.data-grid tbody tr.failed-answer-row>*,
.data-grid tbody tr.failed-answer-row:nth-child(2n)>*,
.data-grid tbody tr.failed-answer-row a {
    background-color: #F26522 !important;
    color: #fff;
}

.data-grid tbody tr.failed-answer-row a,
.data-grid tbody tr.failed-answer-row:nth-child(2n) a {
    color: #fff;
}

/**Message zone in VOR Report**/
.message-zone {
    background-color: #FFFFE0;
    width: 100%;
    height: 5vh;
    border-radius: 10px;
    display: flex;
    align-items: center;
    font-style: italic;
    font-size: 1.1em;

    >p {
        margin-bottom: 0;
        margin-left: 20px;
    }
}

.fullwidth.page-VORReportPage div.main-content.container {
    div:nth-child(3) {
        margin-top: 0;
    }
}

/**Help Page**/

.help-container {
    background-color: white;
    border: 1px solid #ccc;
    box-shadow: 0 2px 4px rgba(0, 0, 0, 0.2);
    width: 100%;
    max-width: 800px;
    margin: 20px auto;
    position: relative;
}

.help-header-container {
    background-color: #13BAB6;
    color: white;
    padding: 15px 20px;
    font-size: 18px;
    font-weight: bold;
}

.help-content {
    padding: 20px;
}

.help-content h3 {
    color: #333;
    margin-top: 20px;
    margin-bottom: 10px;
    font-size: 16px;
    font-weight: bold;
}

.help-content p {
    margin-bottom: 15px;
    color: #666;
    line-height: 1.5;
}

.help-content a {
    color: #0066cc;
    text-decoration: none;
}

.help-content a:hover {
    text-decoration: underline;
}

.help-content ul {
    list-style: none;
    padding: 0;
    margin: 0;
}

.help-content ul li {
    margin-bottom: 8px;
}

.help-content strong {
    color: #333;
}

/* Add a close button style if needed */
.close-button {
    position: absolute;
    top: 15px;
    right: 15px;
    color: white;
    cursor: pointer;
    font-size: 20px;
}

body.fullwidth.page-HelpPage div.zone-content.row {
    display: none;
}

#-grid-widget-AllChecklistResultViewGrid1- div.data-grid-container table tbody tr td:nth-child(7) a:hover {
    color: white !important;
}

.holding-page-table-container {
    background-color: var(--fleet-xq-login-bg-color);
    color: white;
    text-align: center;

    >h2 {
        visibility: hidden;
    }
}

/**Vehicle Grid Action Icons**/

#VehilceGrid .icon-container {
    display: inline-block;
    position: relative;
    margin: 0 4px;
}

#VehilceGrid .icon-container a,
.customer-command-button {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    padding: 6px;
    border-radius: 4px;
    background-color: #f8f9fa;
    border: 1px solid #dee2e6;
    transition: all 0.2s ease-in-out;
}

#VehilceGrid .icon-container a:hover,
.customer-command-button {
    background-color: #e9ecef;
    border-color: #ced4da;
    transform: translateY(-1px);
    box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
}

#VehilceGrid td[data-bind*="Data.Actions"] {
    padding-left: 0 !important;
    display: flex;
    flex-wrap: wrap;
    gap: 5px;
}


/************OTHER SETTINGS**************/

.full-lockout-timer-span-container {
    div {
        display: flex;

        .text-field .form-field-text {
            background-color: var(--fleet-xq-light-secondary) !important;
            border: 1px solid var(--fleet-xq-light-secondary) !important;
            border-radius: 0.25rem !important;
        }

        .text-field span {
            text-align: center;
            align-self: center;
            background-color: var(--fleet-xq-light-secondary);
        }

        .text-field input {
            width: 3em;
        }

        .timeout-in-seconds-container {
            display: flex;
            align-items: center;
            margin-left: 0.5em;
        }
    }
}

#VehicleFormControl-VehicleForm-VehicleOtherSettingsFormControl {
    span.form-field-control-container {
        background-color: #fff !important;
        background: #fff !important;
    }

    span.form-field-text.span-field-custom {
        background-color: #fff !important;
        background: #fff !important;
    }

    div.text-field {
        width: 5.5em;
    }
}

/************UNLOCK AND REBOOT BUTTONS FIX**************/

.popupContainer #Commands .nav .unlockvehicle.command-button,
.popupContainer #Commands .nav .rebootvehicle.command-button {
    min-width: 200px;
}

/************FIX LOGO FIELD FILE UPLOAD CONTROLS**************/

#DealerForm1Control-DealerForm1Control .form-field.edit .form-field-control-container {
    position: relative;
    background-color: white;
}

#DealerForm1Control-DealerForm1Control .form-field.edit .button-clear-document-field {
    position: absolute;
    right: 0;
    top: 0;
    padding: 1px 4px;
    font-size: 10px;
    border-radius: 2px;
    margin-top: 0px;
    cursor: pointer;
    width: auto;
    height: auto;
    z-index: 10;
}

#DealerForm1Control-DealerForm1Control .form-field>.form-field-control-container>div {
    height: auto;
}

#DealerForm1Control-DealerForm1Control .form-field.edit .form-field-control-container>div:nth-child(2) {
    display: block;
    margin-top: 8px;
    position: static;
}

#DealerForm1Control-DealerForm1Control .form-field.edit input[type="file"].no-border {
    border: none;
    float: right;
    background: none;
    padding-left: 0;
}

#DealerForm1Control-DealerForm1Control .basicForm.form-container-custom.configuration-details-custom {
    padding: 20px !important;
}

/* Keep the h2 header at the top edge */
#DealerForm1Control-DealerForm1Control .basicForm.form-container-custom.configuration-details-custom>h2 {
    margin: -20px -20px 20px -20px !important;
    padding: 8.5px 20px !important;
}

/* Dropdown indicator styling for lookup fields */
#DashboardFilterFormControl-DashboardFilterFormControl .formEditLookupFieldControl,
#PersonGrid-PersonFilter-Filter .filter-dropdown-container,
#VehilceGrid-VehicleFilter-Filter .filter-dropdown-container,
#GeneralProductivityReportFilterFormControl-GeneralProductivityReportFilterFormControl .formEditLookupFieldControl,
#ImpactReportFilterFormControl-ImpactReportFilterFormControl .formEditLookupFieldControl,
#PreOpReportFilterFormControl-PreOpReportFilterFormControl .formEditLookupFieldControl,
#MachineUnlockReportFilterFormControl-MachineUnlockReportFilterFormControl .formEditLookupFieldControl,
#ProficiencyReportFilterFormControl-ProficiencyReportFilterFormControl .formEditLookupFieldControl,
#BroadcastMessageHistoryFilterFormControl-BroadcastMessageHistoryFilterFormControl .formEditLookupFieldControl,
#DriverAccessAbuseFilterFormControl-DriverAccessAbuseFilterFormControl .formEditLookupFieldControl,
#LicenseExpiryReportFilterFormControl-LicenseExpiryReportFilterFormControl .formEditLookupFieldControl,
#SynchronizationStatusReportFilterFormControl-SynchronizationStatusReportFilterFormControl .formEditLookupFieldControl,
#VORReportFilterFormControl-VORReportFilterFormControl .formEditLookupFieldControl,
#VehiclesGPSLocationsGrid-VehicleFilter-Filter .filter-dropdown-container,
#OnDemandAuthorisationFilterFormControl-OnDemandAuthorisationFilterFormControl .formEditLookupFieldControl,
#EmailSubscriptionReportFilterFormControl-EmailSubscriptionReportFilterFormControl .formEditLookupFieldControl,
#AllVehicleCalibrationFilterFormControl-AllVehicleCalibrationFilterFormControl .formEditLookupFieldControl,
#HireDeHireReportFilterFormControl-HireDeHireReportFilterFormControl .formEditLookupFieldControl,
#PedestrianDetectionHistoryFilterFormControl-PedestrianDetectionHistoryFilterFormControl .formEditLookupFieldControl,
#MainDashboardFilterFormControl-MainDashboardFilterFormControl .formEditLookupFieldControl {
    position: relative;
}

#DashboardFilterFormControl-DashboardFilterFormControl .formEditLookupFieldControl-button,
#PersonGrid-PersonFilter-Filter .filter-dropdown-icon,
#VehilceGrid-VehicleFilter-Filter .filter-dropdown-icon,
#GeneralProductivityReportFilterFormControl-GeneralProductivityReportFilterFormControl .formEditLookupFieldControl-button,
#ImpactReportFilterFormControl-ImpactReportFilterFormControl .formEditLookupFieldControl-button,
#PreOpReportFilterFormControl-PreOpReportFilterFormControl .formEditLookupFieldControl-button,
#MachineUnlockReportFilterFormControl-MachineUnlockReportFilterFormControl .formEditLookupFieldControl-button,
#ProficiencyReportFilterFormControl-ProficiencyReportFilterFormControl .formEditLookupFieldControl-button,
#BroadcastMessageHistoryFilterFormControl-BroadcastMessageHistoryFilterFormControl .formEditLookupFieldControl-button,
#DriverAccessAbuseFilterFormControl-DriverAccessAbuseFilterFormControl .formEditLookupFieldControl-button,
#LicenseExpiryReportFilterFormControl-LicenseExpiryReportFilterFormControl .formEditLookupFieldControl-button,
#SynchronizationStatusReportFilterFormControl-SynchronizationStatusReportFilterFormControl .formEditLookupFieldControl-button,
#VORReportFilterFormControl-VORReportFilterFormControl .formEditLookupFieldControl-button,
#VehiclesGPSLocationsGrid-VehicleFilter-Filter .filter-dropdown-icon,
#OnDemandAuthorisationFilterFormControl-OnDemandAuthorisationFilterFormControl .formEditLookupFieldControl-button,
#EmailSubscriptionReportFilterFormControl-EmailSubscriptionReportFilterFormControl .formEditLookupFieldControl-button,
#AllVehicleCalibrationFilterFormControl-AllVehicleCalibrationFilterFormControl .formEditLookupFieldControl-button,
#HireDeHireReportFilterFormControl-HireDeHireReportFilterFormControl .formEditLookupFieldControl-button,
#PedestrianDetectionHistoryFilterFormControl-PedestrianDetectionHistoryFilterFormControl .formEditLookupFieldControl-button,
#MainDashboardFilterFormControl-MainDashboardFilterFormControl .formEditLookupFieldControl-button {
    position: absolute;
    right: 10px;
    top: 50%;
    transform: translateY(-50%);
    pointer-events: none;
    z-index: 10;
    display: flex;
    align-items: center;
    justify-content: center;
    width: 20px;
    height: 20px;
}

#DashboardFilterFormControl-DashboardFilterFormControl .formEditLookupFieldControl-button .dropdown-indicator,
#PersonGrid-PersonFilter-Filter .filter-dropdown-icon .dropdown-indicator,
#VehilceGrid-VehicleFilter-Filter .filter-dropdown-icon .dropdown-indicator,
#GeneralProductivityReportFilterFormControl-GeneralProductivityReportFilterFormControl .formEditLookupFieldControl-button .dropdown-indicator,
#ImpactReportFilterFormControl-ImpactReportFilterFormControl .formEditLookupFieldControl-button .dropdown-indicator,
#PreOpReportFilterFormControl-PreOpReportFilterFormControl .formEditLookupFieldControl-button .dropdown-indicator,
#MachineUnlockReportFilterFormControl-MachineUnlockReportFilterFormControl .formEditLookupFieldControl-button .dropdown-indicator,
#ProficiencyReportFilterFormControl-ProficiencyReportFilterFormControl .formEditLookupFieldControl-button .dropdown-indicator,
#BroadcastMessageHistoryFilterFormControl-BroadcastMessageHistoryFilterFormControl .formEditLookupFieldControl-button .dropdown-indicator,
#DriverAccessAbuseFilterFormControl-DriverAccessAbuseFilterFormControl .formEditLookupFieldControl-button .dropdown-indicator,
#LicenseExpiryReportFilterFormControl-LicenseExpiryReportFilterFormControl .formEditLookupFieldControl-button .dropdown-indicator,
#VORReportFilterFormControl-VORReportFilterFormControl .formEditLookupFieldControl-button .dropdown-indicator,
#VehiclesGPSLocationsGrid-VehicleFilter-Filter .filter-dropdown-icon .dropdown-indicator,
#OnDemandAuthorisationFilterFormControl-OnDemandAuthorisationFilterFormControl .dropdown-indicator,
#EmailSubscriptionReportFilterFormControl-EmailSubscriptionReportFilterFormControl .dropdown-indicator,
#AllVehicleCalibrationFilterFormControl-AllVehicleCalibrationFilterFormControl .dropdown-indicator,
#HireDeHireReportFilterFormControl-HireDeHireReportFilterFormControl .dropdown-indicator,
#PedestrianDetectionHistoryFilterFormControl-PedestrianDetectionHistoryFilterFormControl .dropdown-indicator,
#MainDashboardFilterFormControl-MainDashboardFilterFormControl .dropdown-indicator {
    color: #000;
    transform: scale(1.08);
}

/* Add padding to input so text doesn't overlap with icon */
#DashboardFilterFormControl-DashboardFilterFormControl .formEditLookupFieldControl input,
#PersonGrid-PersonFilter-Filter .filter-dropdown-container select,
#VehilceGrid-VehicleFilter-Filter .filter-dropdown-container select,
#GeneralProductivityReportFilterFormControl-GeneralProductivityReportFilterFormControl .formEditLookupFieldControl input,
#ImpactReportFilterFormControl-ImpactReportFilterFormControl .formEditLookupFieldControl input,
#PreOpReportFilterFormControl-PreOpReportFilterFormControl .formEditLookupFieldControl input,
#MachineUnlockReportFilterFormControl-MachineUnlockReportFilterFormControl .formEditLookupFieldControl input,
#ProficiencyReportFilterFormControl-ProficiencyReportFilterFormControl .formEditLookupFieldControl input,
#BroadcastMessageHistoryFilterFormControl-BroadcastMessageHistoryFilterFormControl .formEditLookupFieldControl input,
#DriverAccessAbuseFilterFormControl-DriverAccessAbuseFilterFormControl .formEditLookupFieldControl input,
#LicenseExpiryReportFilterFormControl-LicenseExpiryReportFilterFormControl .formEditLookupFieldControl input,
#SynchronizationStatusReportFilterFormControl-SynchronizationStatusReportFilterFormControl .formEditLookupFieldControl input,
#VORReportFilterFormControl-VORReportFilterFormControl .formEditLookupFieldControl input,
#VehiclesGPSLocationsGrid-VehicleFilter-Filter .formEditLookupFieldControl input,
#OnDemandAuthorisationFilterFormControl-OnDemandAuthorisationFilterFormControl .formEditLookupFieldControl input,
#EmailSubscriptionReportFilterFormControl-EmailSubscriptionReportFilterFormControl .formEditLookupFieldControl input,
#AllVehicleCalibrationFilterFormControl-AllVehicleCalibrationFilterFormControl .formEditLookupFieldControl input,
#HireDeHireReportFilterFormControl-HireDeHireReportFilterFormControl .formEditLookupFieldControl input,
#PedestrianDetectionHistoryFilterFormControl-PedestrianDetectionHistoryFilterFormControl .formEditLookupFieldControl input,
#MainDashboardFilterFormControl-MainDashboardFilterFormControl .formEditLookupFieldControl input {
    cursor: pointer !important;
    padding-right: 30px !important;
}

/* Move the native webkit search cancel button (the 'x') to the left */
#DashboardFilterFormControl-DashboardFilterFormControl .formEditLookupFieldControl input::-webkit-search-cancel-button,
#PersonGrid-PersonFilter-Filter .filter-dropdown-container select::-webkit-search-cancel-button,
#VehilceGrid-VehicleFilter-Filter .filter-dropdown-container select::-webkit-search-cancel-button,
#GeneralProductivityReportFilterFormControl-GeneralProductivityReportFilterFormControl .formEditLookupFieldControl input::-webkit-search-cancel-button,
#ImpactReportFilterFormControl-ImpactReportFilterFormControl .formEditLookupFieldControl input::-webkit-search-cancel-button,
#PreOpReportFilterFormControl-PreOpReportFilterFormControl .formEditLookupFieldControl input::-webkit-search-cancel-button,
#MachineUnlockReportFilterFormControl-MachineUnlockReportFilterFormControl .formEditLookupFieldControl input::-webkit-search-cancel-button,
#ProficiencyReportFilterFormControl-ProficiencyReportFilterFormControl .formEditLookupFieldControl input::-webkit-search-cancel-button,
#BroadcastMessageHistoryFilterFormControl-BroadcastMessageHistoryFilterFormControl .formEditLookupFieldControl input::-webkit-search-cancel-button,
#DriverAccessAbuseFilterFormControl-DriverAccessAbuseFilterFormControl .formEditLookupFieldControl input::-webkit-search-cancel-button,
#LicenseExpiryReportFilterFormControl-LicenseExpiryReportFilterFormControl .formEditLookupFieldControl input::-webkit-search-cancel-button,
#SynchronizationStatusReportFilterFormControl-SynchronizationStatusReportFilterFormControl .formEditLookupFieldControl input::-webkit-search-cancel-button,
#VORReportFilterFormControl-VORReportFilterFormControl .formEditLookupFieldControl input::-webkit-search-cancel-button,
#VehiclesGPSLocationsGrid-VehicleFilter-Filter .formEditLookupFieldControl input::-webkit-search-cancel-button,
#OnDemandAuthorisationFilterFormControl-OnDemandAuthorisationFilterFormControl .formEditLookupFieldControl input::-webkit-search-cancel-button,
#EmailSubscriptionReportFilterFormControl-EmailSubscriptionReportFilterFormControl .formEditLookupFieldControl input::-webkit-search-cancel-button,
#AllVehicleCalibrationFilterFormControl-AllVehicleCalibrationFilterFormControl .formEditLookupFieldControl input::-webkit-search-cancel-button,
#HireDeHireReportFilterFormControl-HireDeHireReportFilterFormControl .formEditLookupFieldControl input::-webkit-search-cancel-button,
#PedestrianDetectionHistoryFilterFormControl-PedestrianDetectionHistoryFilterFormControl .formEditLookupFieldControl input::-webkit-search-cancel-button,
#MainDashboardFilterFormControl-MainDashboardFilterFormControl .formEditLookupFieldControl input::-webkit-search-cancel-button {
    margin-right: 20px !important;
    /* Push the 'x' button to the left */
}


.license-mode-explanation {
    color: #888;
    font-size: 1em;
    font-style: italic;
    margin-bottom: 18px;
    padding-left: 30px;
    padding-top: 10px;
}

.active-dot {
    display: inline-block;
    width: 10px;
    height: 10px;
    margin-right: 6px;
    margin-bottom: 2px;
    border-radius: 50%;
    background-color: #008000;
    /* or #0099cc */
    vertical-align: middle;
}

#PersonFormControl-PersonForm-PersonWebsiteAccessFormForm-GOUserFormControl .form-spacing-custom.no-data-message {
    display: none;
}

.dropup .dropdown-toggle::after {
    color: #fff;
}

#languageDropdownSidebar svg {
    fill: #fff;
}

.loginPage .main-content.container .message-zone {
    padding: 16px !important;
    height: 110px !important;
}

#PersonFormControl-PersonForm-PersonVehicleAccessFormForm .form-field-label,
#PersonFormControl-PersonForm-SupervisorVehicleAccessFormForm .form-field-label {
    text-wrap: wrap !important;
    word-break: break-word !important;
}

/*******Report Scheduler*******/


/* Change the main container from flex row to flex column */
#ReportSubscriptionGrid1 .gridCommandContainer .d-flex {
    flex-direction: column !important;
}

/* Make gridCommands section take full width and appear first */
#ReportSubscriptionGrid1 .gridCommandContainer .gridCommands {
    order: -1;
    /* Move buttons to top */
    width: 100%;
    margin-bottom: 1rem;
}

/* Make each button container take full width */
#ReportSubscriptionGrid1 .gridCommandContainer .gridCommands .horizontalList {
    width: 100%;
    margin-bottom: 0.5rem;
    display: block;
    /* Override any inline display */
}

/* Make each button take full width */
#ReportSubscriptionGrid1 .gridCommandContainer .command-button {
    width: 100% !important;
    display: block !important;
    text-align: left !important;
    padding: 0.75rem 1rem !important;
    margin: 0 !important;

    /* White/gray styling */
    background-color: #ffffff;
    border: 1px solid #d1d5db;
    color: #374151;
    font-weight: 500;
    box-shadow: 0 1px 2px 0 rgba(0, 0, 0, 0.05);
    border-radius: 0.375rem;
}

#ReportSubscriptionGrid1 .gridCommandContainer .command-button:hover {
    background-color: #f9fafb !important;
    border-color: #9ca3af !important;
    color: #111827 !important;
}

#ReportSubscriptionGrid1 .gridCommandContainer .command-button:focus,
#ReportSubscriptionGrid1 .gridCommandContainer .command-button:active:focus {
    background-color: #f3f4f6 !important;
    border-color: #6b7280 !important;
    box-shadow: 0 0 0 2px rgba(59, 130, 246, 0.1) !important;
}

#ReportSubscriptionGrid1 .gridCommandContainer .command-button:active {
    background-color: #e5e7eb !important;
    border-color: #6b7280 !important;
    transform: translateY(1px);
}

/* Disabled state */
#ReportSubscriptionGrid1 .gridCommandContainer .command-button:disabled,
#ReportSubscriptionGrid1 .gridCommandContainer .command-button-disabled {
    background-color: #f3f4f6 !important;
    border-color: #d1d5db !important;
    color: #9ca3af !important;
    cursor: not-allowed !important;
    box-shadow: none !important;
}

/* Ensure the grid count and pagination stay below buttons */
#ReportSubscriptionGrid1 .gridCommandContainer .grid-count-label,
#ReportSubscriptionGrid1 .gridCommandContainer .--horizontalList {
    order: 1;
}

/************Report Scheduler*******/
button+button {
    margin-left: 0 !important;
}


#VehicleSlamcoreLocationHistoryGrid,
#VehicleSlamcoreLocationHistoryGrid1,
#AlertHistoryGrid1,
#SlamcoreDeviceGrid2,
#SlamcorePedestrianDetectionGrid {
    display: none !important;
}

#ReportSubscriptionGrid1 .gridCommandContainer .gridCommands .horizontalList button,
.professional-export-button {
    width: 100%;
    margin-bottom: 1rem;
    padding: 1.5rem;
    background: #ffffff;
    border: 2px solid #e5e7eb;
    border-radius: 0.75rem;
    display: flex;
    align-items: center;
    cursor: pointer;
    transition: all 0.2s ease;
    text-align: left;
    font-family: inherit;
}

.professional-export-button:hover {
    border-color: #3b82f6;
    box-shadow: 0 4px 12px rgba(59, 130, 246, 0.15);
    transform: translateY(-1px);
}

.professional-export-button:active {
    transform: translateY(0);
}

.export-button-icon {
    font-size: 2rem;
    margin-right: 1rem;
    width: 3rem;
    height: 3rem;
    display: flex;
    align-items: center;
    justify-content: center;
    background: #f3f4f6;
    border-radius: 0.5rem;
}

.export-button-content {
    flex: 1;
}

.export-button-title {
    font-size: 1.125rem;
    font-weight: 600;
    color: #111827;
    margin-bottom: 0.25rem;
}

.export-button-description {
    font-size: 0.875rem;
    color: #6b7280;
    line-height: 1.4;
}

/* Style the ReportSubscription grid buttons to look professional */
#ReportSubscriptionGrid1 .gridCommands .horizontalList {
    width: 100%;
    margin-bottom: 1rem;
    display: inline-block;
    vertical-align: top;
}

#ReportSubscriptionGrid1 {

    padding: 0 0.9rem;
}

#ReportSubscriptionGrid1 .gridCommands {
    padding-top: 3.8rem;
}

#ReportSubscriptionGrid1 .gridCommands .horizontalList:nth-child(4n) {
    margin-right: 0;
}

#ReportSubscriptionGrid1 .gridCommands .command-button {
    width: 100% !important;
    padding: 1.5rem !important;
    background: #ffffff !important;
    border: 2px solid #e5e7eb !important;
    border-radius: 0.75rem !important;
    display: flex;
    align-items: center !important;
    cursor: pointer !important;
    transition: all 0.2s ease !important;
    text-align: left !important;
    font-family: system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial, "Noto Sans", "Liberation Sans", sans-serif, "Apple Color Emoji" !important;
}

#ReportSubscriptionGrid1 .gridCommands .command-button:before {
    font-size: 2rem;
    margin-right: 1rem;
    width: 3rem;
    height: 3rem;
    display: flex;
    align-items: center;
    justify-content: center;
    background: #f3f4f6;
    border-radius: 0.5rem;
}

#ReportSubscriptionGrid1 .gridCommands .command-button:hover {
    border-color: #3b82f6 !important;
    box-shadow: 0 4px 12px rgba(59, 130, 246, 0.15) !important;
    transform: translateY(-1px) !important;
}

#ReportSubscriptionGrid1 .gridCommands .command-button:active {
    transform: translateY(0) !important;
}

/* Style the button text content exactly like export button titles */
#ReportSubscriptionGrid1 .gridCommands .command-button {
    font-size: 1.125rem !important;
    font-weight: 650 !important;
    color: #111827 !important;
    line-height: 1.4 !important;
    letter-spacing: normal !important;
    text-transform: none !important;
}


/* Make the gridCommands container flex */
#ReportSubscriptionGrid1 .gridCommands {
    display: flex !important;
    flex-direction: column !important;
    margin: -0.5rem !important;
}

/* Different icons for each button */
#ReportSubscriptionGrid1 .gridCommands .horizontalList:nth-child(1) .command-button:before {
    content: "📊";
}

#ReportSubscriptionGrid1 .gridCommands .horizontalList:nth-child(2) .command-button:before {
    content: "📍";
}

#ReportSubscriptionGrid1 .gridCommands .horizontalList:nth-child(3) .command-button:before {
    content: "⚠️";
}

#ReportSubscriptionGrid1 .gridCommands .horizontalList:nth-child(4) .command-button:before {
    content: "📱";
}

#ReportSubscriptionGrid1 .gridCommands .horizontalList:nth-child(5) .command-button:before {
    content: "🚶";
}

/***********Connection device page*************/

body.fullwidth.page-ConnectionStatusDashboardPage div.col.mb-3 {
    padding: 0;
}

body.fullwidth.page-ConnectionStatusDashboardPage>div#form>div>div.main-wrapper {
    overflow: visible !important;
}

#SlamcoreDeviceConnectionViewFormControl-SlamcoreDeviceConnectionViewForm-SlamcoreDeviceConnectionViewForm1FormControl div h4,
#SlamcoreDeviceConnectionViewFormControl-SlamcoreDeviceConnectionViewForm-SlamcoreDeviceConnectionViewForm2FormControl div h4,
#SlamcoreDeviceConnectionViewFormControl-SlamcoreDeviceConnectionViewForm-SlamcoreDeviceConnectionViewForm3FormControl div h4 {
    display: none !important;
}

/* Simple Dashboard Card Styling */

#SlamcoreDeviceConnectionViewFormControl-SlamcoreDeviceConnectionViewForm-SlamcoreDeviceConnectionViewForm1FormControl,
#SlamcoreDeviceConnectionViewFormControl-SlamcoreDeviceConnectionViewForm-SlamcoreDeviceConnectionViewForm2FormControl,
#SlamcoreDeviceConnectionViewFormControl-SlamcoreDeviceConnectionViewForm-SlamcoreDeviceConnectionViewForm3FormControl {
    background: white;
    border-radius: 8px;
    padding: 0px 30px;
}


/* Large number */
#SlamcoreDeviceConnectionViewFormControl-SlamcoreDeviceConnectionViewForm-SlamcoreDeviceConnectionViewForm1FormControl .slamcore-total-devices-span span,
#SlamcoreDeviceConnectionViewFormControl-SlamcoreDeviceConnectionViewForm-SlamcoreDeviceConnectionViewForm2FormControl .slamcore-online-devices span,
#SlamcoreDeviceConnectionViewFormControl-SlamcoreDeviceConnectionViewForm-SlamcoreDeviceConnectionViewForm3FormControl .slamcore-offline-devices span {
    display: block;
    font-size: 1.75rem;
    font-weight: bold;
    line-height: 1;
    margin-bottom: 5px;
}

#SlamcoreDeviceConnectionViewFormControl-SlamcoreDeviceConnectionViewFormControl div.uiContainer div.row.dashboard-card-container div.col-12.col-lg-4.dashboard-card {
    width: 32% !important;
}

.slamcore-total-devices-span::before {
    content: "📱";
    margin-top: 6px;
    font-size: 1.4rem;
    float: right;
}

.slamcore-online-devices-span::before {
    content: "✅";
    margin-top: 8px;
    font-size: 1.25rem;
    float: right;
}

.slamcore-offline-devices-span::before {
    content: "❌";
    margin-top: 8px;
    font-size: 1.1rem;
    float: right;
}


#SlamcoreDeviceFilterFormControl.filter-zone-container-custom>div>div:first-child {
    width: 70% !important;

}

#SlamcoreDeviceFilterFormControl-SlamcoreDeviceFilterFormControl.dashboard-filter-container-custom {
    >div.uiContainer>.row>div:nth-child(1) {
        width: 40% !important;
    }

    >div.uiContainer>.row>div:nth-child(2) {
        width: 40% !important;
    }

    >div.uiContainer>.row>div:nth-child(3) {
        width: 20% !important;
    }

    display: block !important;

}

#SlamcoreDeviceFilterFormControlCommandsSlamcoreDeviceFilterFormControlCommands.filter-button-container-custom {
    width: 30% !important;
}

/*********************live map & floor plan********************************/


#SiteForm3Control-SiteForm3-FloorPlanItemsListData-View {
    margin: 2em 0;
}

body.page-FloorPlanPagePage,
body.page-PathAnalysisViewPage,
body.page-LiveMapPage {

    button+button {
        margin-left: 0;
    }
}

.page-PathAnalysisViewPage .main-content.container,
body.page-LiveMapPage .main-content.container {
    .zone-content.row {
        width: 50%;
        padding: 5px;
    }

}

.page-FloorPlanPagePage>#form>div>.main-wrapper {
    overflow-y: hidden !important;
}

.page-FloorPlanPagePage .main-content.container {
    display: flex;
    padding: 0;
    height: 100%;
       .zone-content.row {
        width: 18%;
        padding: 5px;
        margin-bottom: 6rem;
        height: 100%;

        >.col.mb-3 {
            height: 70%;
        }
    }

    .card {
        width: 64%;
        min-height: 600px;
        height: calc(100% - 70px);
    }

    .vehicle-status-content {
        width: 15%
    }

    .floor-plan-settings {
        width: 18%;
        height: calc(100% - 70px);
   overflow-y: auto;
    }
}

.page-FloorPlanPagePage {

    >div.zone-content.row,
    .col.mb-3 {
        padding: 0 !important;
    }
}

.vehicle-status-item {
    cursor: pointer;
}

.page-FloorPlanPagePage .content-wrapper.d-flex.flex-column {
    height: calc(100% - 112px)
}

.page-PathAnalysisViewPage .content-wrapper.d-flex.flex-column {
    height: 100%;
}


/* Target the specific link-field elements in Floor Plan forms */
.optionalField .link-field,
[data-entityfield="file-view"] .link-field {
    /* Text handling for long URLs */
    word-break: break-all;
    /* Break long words/URLs at any character */
    word-wrap: break-word;
    /* Wrap long words to new line */
    overflow-wrap: break-word;
    display: inline-block;
    /* Visual improvements */
    line-height: 1.4;
    /* Better readability for wrapped text */
    padding: 4px 0px;
    /* Add some padding for better visual spacing */

    /* Hover state for better UX */
    text-decoration: underline;
    /* Make it clear it's a link */
}



.mapboxgl-canvas {
    width: 100% !important;
    height: 100% !important;
}

/* Vehicle Status Panel */
.vehicle-status-panel {
    background: #ffffff;
    border-radius: 8px;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
    height: 100%;
    display: flex;
    flex-direction: column;
    font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
}

.vehicle-status-header {
    padding: 20px;
    border-bottom: 1px solid #e5e7eb;
}

.vehicle-status-title {
    font-size: 1.25rem;
    font-weight: 600;
    color: #1f2937;
    margin: 0.4em 0.8em;
}

.vehicle-status-subtitle {
    font-size: 13px;
    color: #10b981;
    margin: 0;
}

.vehicle-status-content,
.path-analysis-settings {
    flex: 1;
    overflow-y: auto;
}

.vehicle-list {
    display: flex;
    flex-direction: column;
}

/* Individual Vehicle Items */
.vehicle-status-item {
    padding: 20px;
    margin-right: 10px;
    border-bottom: 1px solid #f3f4f6;
    position: relative;
}

.vehicle-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-bottom: 12px;
    padding-top: 20px
}

.vehicle-status-item:hover {
    background-color: rgba(0, 123, 191, 0.05);
    transform: translateY(-1px);
    box-shadow: 0 2px 8px rgba(0, 123, 191, 0.15);
    border-left: 3px solid rgba(0, 123, 191, 0.3);
}

.vehicle-status-item:hover .vehicle-color-indicator {
    transform: scale(1.1);
    box-shadow: 0 0 8px rgba(0, 0, 0, 0.2);
}

.vehicle-status-item:hover .vehicle-status-indicator {
    transform: scale(1.05);
    filter: brightness(1.1);
}

.vehicle-status-item:hover .vehicle-detail-value {
    color: #333;
    font-weight: 450;
}

.vehicle-status-item.active {
    background-color: rgba(0, 123, 191, 0.1);
    border-left: 4px solid #007cbf;
    box-shadow: 0 2px 12px rgba(0, 123, 191, 0.2);
}

.vehicle-status-item.active .vehicle-name {
    color: #007cbf;
    font-weight: 600;
}

/* Smooth transitions for all interactive elements */
.vehicle-color-indicator,
.vehicle-status-indicator,
.vehicle-name,
.vehicle-detail-value {
    transition: all 0.2s ease-in-out;
}

/* Focus state for accessibility */
.vehicle-status-item:focus {
    outline: 2px solid #007cbf;
    outline-offset: 2px;
}

.vehicle-name-section {
    display: flex;
    align-items: center;
    gap: 8px;

}

.vehicle-icon {
    font-size: 16px;
    color: #6b7280;
}

.vehicle-name {
    font-weight: 600;
    color: #1f2937;
    font-size: 1.2rem;
}

.vehicle-status-indicator {
    width: 8px;
    height: 8px;
    border-radius: 50%;
}

.vehicle-status-indicator.online {
    background-color: #10b981;
    /* Green */
}

.vehicle-status-indicator.idle {
    background-color: #f59e0b;
    /* Yellow */
}

.vehicle-status-indicator.offline {
    background-color: #9ca3af;
    /* Gray */
}

/* Vehicle Details Grid */
.vehicle-details {
    display: flex;
    flex-direction: column;
    gap: 6px;

    >div>span {
        font-size: 1rem
    }
}

.vehicle-detail-row {
    display: flex;
    justify-content: space-between;
    align-items: center;
}

.vehicle-detail-label {
    font-size: 13px;
    color: #6b7280;
    font-weight: 400;
}

.vehicle-detail-value {
    font-size: 13px;
    color: #1f2937;
    font-weight: 500;
    text-align: right;
}

/* Efficiency color coding */
.efficiency-good {
    color: #10b981;
}

.efficiency-average {
    color: #f59e0b;
}

.efficiency-poor {
    color: #ef4444;
}

/* Loading state */
.no-vehicles-message {
    padding: 40px 20px;
    text-align: center;
    color: #6b7280;
    font-size: 14px;
}

.loading-spinner {
    display: flex;
    justify-content: center;
    margin-bottom: 16px;
}

.spinner {
    width: 20px;
    height: 20px;
    border: 2px solid #e5e7eb;
    border-top: 2px solid #3b82f6;
    border-radius: 50%;
    animation: spin 1s linear infinite;
}

@keyframes spin {
    0% {
        transform: rotate(0deg);
    }

    100% {
        transform: rotate(360deg);
    }
}

/******************************************************/

/* Improved Floor Plan Cards Styling */

#SiteForm3Control-SiteForm3-FloorPlanItemsList-FloorPlanFormControl {
    background: #ffffff !important;
    border: 1px solid #e2e8f0 !important;
    border-radius: 12px !important;
    padding: 1rem !important;
    margin-bottom: 12px !important;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.06) !important;
    transition: all 0.3s ease !important;
    position: relative !important;
    overflow: hidden !important;
    height: 100% !important;

  >div.uiContainer>div>div.basicForm>div:nth-child(6)>span>div {
        >input.form-field-text {
            width: 100% !important;
            background: var(--fleet-xq-gray-250);
            height: 1.5rem;
        }

        >div {
            margin: 1em 0;
        }
    }

    .button-clear-document-field {
        margin-top: 0;
    }

}

#SiteForm3Control-SiteForm3Control div.text-field.no-border.main-header-information-span-custom {
    font-size: 1.125rem !important;
    margin: 0.5rem !important;
    border-bottom: 1px solid #e2e8f0 !important;

    >span {

        margin-bottom: 1rem;

    }

}

#SiteForm3Control-SiteForm3Control {
    .row {
        padding: 0 !important;
    }

    .sublist-field {
        max-height: 480px;
        overflow-y: auto;
    }

}

/* Enhanced hover effect */
#SiteForm3Control-SiteForm3-FloorPlanItemsList-FloorPlanFormControl:hover {
    border-color: #94a3b8 !important;
    box-shadow: 0 4px 16px rgba(0, 0, 0, 0.1) !important;
    transform: translateY(-2px) !important;
}

/* Floor Plan Title Styling */
#SiteForm3Control-SiteForm3-FloorPlanItemsList-FloorPlanFormControl .basicForm div:first-child>span>div>div>span.form-field-text.span-field-custom {
    font-size: 1.125rem !important;
    font-weight: 600 !important;
    color: #1e293b !important;
    margin-bottom: 6px !important;
    line-height: 1.3 !important;
    letter-spacing: -0.02em !important;
    background: #fff !important;
}




/* Floor Level Label */
#SiteForm3Control-SiteForm3-FloorPlanItemsList-FloorPlanFormControl .form-field-label {
    font-size: 0.875rem !important;
    font-weight: 500 !important;
    color: #64748b !important;
    margin-right: 12px !important;
    min-width: 85px !important;
}

/* View Button Container */
#SiteForm3Control-SiteForm3-FloorPlanItemsList-FloorPlanFormControl .viewFloorPlanCommand {

    padding-top: 12px !important;
    border-top: 1px solid #f1f5f9 !important;
    text-align: center !important;
}

/* Enhanced View Button */
#SiteForm3Control-SiteForm3-FloorPlanItemsList-FloorPlanFormControl .viewFloorPlanCommand .btn,
#SiteForm3Control-SiteForm3-FloorPlanItemsList-FloorPlanFormControl .view-floor-plan-btn {
    background: linear-gradient(135deg, #5FCDE8 0%, #4BC1DD 100%) !important;
    color: white !important;
    border: none !important;
    padding: 8px 16px !important;
    border-radius: 6px !important;
    font-size: 0.8125rem !important;
    font-weight: 600 !important;
    width: 100% !important;
    cursor: pointer !important;
    transition: all 0.3s ease !important;
    box-shadow: 0 2px 4px rgba(95, 205, 232, 0.3) !important;
    text-transform: uppercase !important;
    letter-spacing: 0.05em !important;
}

#SiteForm3Control-SiteForm3-FloorPlanItemsList-FloorPlanFormControl .viewFloorPlanCommand .btn:hover,
#SiteForm3Control-SiteForm3-FloorPlanItemsList-FloorPlanFormControl .view-floor-plan-btn:hover {
    background: linear-gradient(135deg, #4BC1DD 0%, #3BB5D2 100%) !important;
    transform: translateY(-2px) !important;
    box-shadow: 0 4px 12px rgba(95, 205, 232, 0.5) !important;
}

#SiteForm3Control-SiteForm3-FloorPlanItemsList-FloorPlanFormControl .viewFloorPlanCommand .btn:active,
#SiteForm3Control-SiteForm3-FloorPlanItemsList-FloorPlanFormControl .view-floor-plan-btn:active {
    transform: translateY(0) !important;
    box-shadow: 0 2px 4px rgba(95, 205, 232, 0.4) !important;
}

/* Text Field Improvements */
#SiteForm3Control-SiteForm3-FloorPlanItemsList-FloorPlanFormControl div.text-field {
    display: flex !important;
    border: none !important;
    align-items: center !important;
    background: #fff !important;
}

#SiteForm3Control-SiteForm3-FloorPlanItemsList-FloorPlanFormControl div.text-field.no-border {
    padding: 0 !important;
    margin: 0 !important;
}



/* First Form Section Spacing */
#SiteForm3Control-SiteForm3-FloorPlanItemsList-FloorPlanFormControl .basicForm div:first-child>span>div>div {
    padding-bottom: 10px !important;
    border-bottom: 1px solid #f1f5f9 !important;
    margin-bottom: 10px !important;
}

#SiteForm3Control-SiteForm3-FloorPlanItemsList-FloorPlanFormControl .basicForm {

    input {

        border: none;
    }
}


/* Zone Management Panel Styles */
.zone-management-panel {
    border-radius: 8px;
    padding: 16px;
    margin: 16px 0;
    font-family: Arial, sans-serif;
}

.zone-management-panel .panel-header {
    display: flex;
    align-items: center;
    margin-bottom: 16px;
    padding-bottom: 12px;
    border-bottom: 2px solid #e5e7eb;
}


.zone-management-panel .panel-title {
    margin: 0;
    font-size: 18px;
    font-weight: bold;
}

/* Zone Type Section */
.zone-type-section {
    margin-bottom: 20px;
}

.zone-section-title {
    margin: 0 0 8px 0;
    font-size: 14px;
    font-weight: bold;
    color: #333;
}

.zone-type-selector {
    width: 100%;
    padding: 8px 12px;
    border: 1px solid #ddd;
    border-radius: 4px;
    font-size: 13px;
    background: white;
    cursor: pointer;
}

.zone-type-selector:focus {
    outline: none;
    border-color: #007cbf;
    box-shadow: 0 0 0 2px rgba(0, 124, 191, 0.2);
}

/* Action Buttons Section */
.zone-actions-section {
    margin-bottom: 20px;
}

.zone-action-buttons {
    display: grid;
    grid-template-columns: 1fr 1fr;
    align-items: center;
    gap: 8px;
}

.zone-btn {
    padding: 10px 16px;
    border: none;
    border-radius: 4px;
    font-size: 13px;
    font-weight: bold;
    cursor: pointer;
    transition: background 0.2s;
}

.zone-btn-save {
    background: #5FCDE8;
    color: white;
    width: auto;
    margin-right: 8px;
}

.zone-btn-save:hover {
    background: #005a87;
}

.zone-btn-clear {
    background: #dc3545;
    color: white;
}

.zone-btn-clear:hover {
    background: #c82333;
}

/* Zone List Section */
.zone-list-section {
    margin-bottom: 16px;
}

.zone-list-container {
    max-height: 300px;
    overflow-y: auto;
    border: 1px solid #ddd;
    border-radius: 4px;
    padding: 8px;
    background: #f9f9f9;
    min-height: 60px;
}

.zone-list-empty {
    text-align: center;
    color: #666;
    font-style: italic;
    font-size: 12px;
    padding: 20px;
}

/* Zone List Items */
.zone-list-item {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 8px 12px;
    margin-bottom: 6px;
    background: white;
    border: 1px solid #ddd;
    border-radius: 4px;
    font-size: 12px;
    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.1);
}

.zone-info-container {
    display: flex;
    align-items: center;
    flex-grow: 1;
}

.zone-color-indicator {
    width: 16px;
    height: 16px;
    border-radius: 3px;
    margin-right: 8px;
    border: 1px solid rgba(0, 0, 0, 0.2);
}

.zone-details {
    flex-grow: 1;
}

.zone-name {
    font-weight: bold;
    color: #333;
    margin-bottom: 2px;
}

.zone-type {
    font-size: 10px;
    color: #666;
}

.zone-delete-btn {
    background: #ff4757;
    color: white;
    border: none;
    border-radius: 3px;
    padding: 4px 6px;
    cursor: pointer;
    font-size: 10px;
    transition: background 0.2s;
}

.zone-delete-btn:hover {
    background: #ff3742;
}

/* .floor-plan-settings {
    width: 15%;
} */

/* Floor Plan Settings - layout and controls */
.floorplan-adjustment-section {
    margin-top: 16px;
    padding-top: 12px;
    border-top: 1px solid #e9ecef;
}

.floorplan-controls {
    display: grid;
    grid-auto-rows: min-content;
    gap: 10px;
}

.floorplan-controls>div {
    display: grid;
    grid-template-columns: 110px 1fr;
    align-items: center;
    gap: 8px;
}

.floorplan-controls label {
    font-size: 12px;
    color: #495057;
    margin: 0;
    text-wrap: wrap;
}

.floorplan-controls input[type="number"] {
    width: 100%;
    padding: 6px 8px;
    border: 1px solid #ced4da;
    border-radius: 3px;
    font-size: 12px;
    background-color: #fff;
    box-sizing: border-box;
}

.floorplan-controls input[type="number"]:focus {
    outline: none;
    border-color: #007cbf;
    box-shadow: 0 0 0 2px rgba(0, 124, 191, 0.15);
}

.floorplan-controls input[type="number"]:disabled {
    background-color: #f5f5f5;
    cursor: not-allowed;
}

.floorplan-adjustment-section .zone-btn {
    width: 100%;
    margin-top: 8px;
    border: none;
    border-radius: 4px;
    padding: 8px 12px;
    cursor: pointer;
    box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
}

#fp-save-btn {
    background: var(--fleet-xq-filter-label-color);
}

.zone-btn:hover {

    box-shadow: 0 3px 6px rgba(0, 0, 0, 0.15);
}

.zone-btn:disabled {
    background: #ccc;
    cursor: not-allowed;
}

.floorplan-adjustment-section .zone-btn+.zone-btn {
    margin-top: 6px;
}

.image-pixel-scale-container {
    >button {
        grid-column: 1 / -1;
    }
}


/*PATH ANALYSIS*/


/* PathAnalysisView Styles */

/* Map Container */
.path-analysis-map-container {
    height: 500px;
    width: 100%;
    border-radius: 4px;
    overflow: hidden;
}

/* Right Panel Styles */
.trail-analysis-panel {
    background: white;
    border-radius: 4px;

    overflow: hidden;
}

.panel-header {

    padding: 12px 16px;
    border-bottom: 1px solid #e9ecef;
    display: flex;
    align-items: center;
    gap: 8px;
}


.panel-title {
    margin: 0;
    font-size: 1.75em;
    font-weight: 600;
    color: #333;
}

.trail-analysis-controls {
    padding: 16px;
}


/* Section Styling */
.trail-analysis-section {
    margin-bottom: 16px;
    padding-bottom: 12px;
    border-bottom: 1px solid #e9ecef;
}

.trail-analysis-section:last-child {
    border-bottom: none;
    margin-bottom: 0;
}

.trail-analysis-section label,
.trail-analysis-label {
    font-size: 12px;
    font-weight: 600;
    display: block;
    margin-bottom: 6px;
    color: #495057;
}

/* Select Controls */
.trail-analysis-select {
    width: 100%;
    font-size: 12px;
    padding: 6px 8px;
    border: 1px solid #ced4da;
    border-radius: 3px;
    margin-bottom: 8px;
    background-color: white;
    color: #495057;
}

.trail-analysis-select.mode-select {
    margin-bottom: 8px;
}

/* Date Input */
.trail-analysis-date-input {
    width: 100%;
    font-size: 12px;
    padding: 6px 8px;
    border: 1px solid #ced4da;
    border-radius: 3px;
    margin-bottom: 8px;
    background-color: white;
    color: #495057;
}

/* Real-time Checkbox Container */
.realtime-container {
    display: flex;
    align-items: center;
    margin: 8px 0;
    padding: 8px;
    background-color: #f8f9fa;
    border-radius: 3px;
}

.realtime-container input[type="checkbox"] {
    margin-right: 8px;
}

.realtime-container label,
.realtime-label {
    font-size: 11px !important;
    color: #6c757d;
    font-weight: normal !important;
    margin-bottom: 0 !important;
    display: inline !important;
    cursor: pointer;
}

/* Info Text */
.trail-analysis-info {
    font-size: 10px;
    color: #666;
    font-style: italic;
    margin-top: 4px;
}

.trail-analysis-info.date-info {
    margin-top: 2px;
}

/* Load Button */
.trail-load-button {
    width: 100%;
    padding: 8px;
    background-color: #007cbf;
    color: white;
    border: none;
    border-radius: 3px;
    cursor: pointer;
    font-size: 12px;
    font-weight: bold;
}

.trail-load-button:hover {
    background-color: #005a8b;
}

.trail-load-button:active {
    background-color: #004a73;
}

/* Section Visibility */
.trail-analysis-section.hidden {
    display: none;
}



/* Animation for mode switching */
.trail-analysis-section {
    transition: opacity 0.3s ease, height 0.3s ease;
}

.trail-analysis-section.hidden {
    opacity: 0;
    height: 0;
    margin: 0;
    padding: 0;
    overflow: hidden;
}

/***********************zone management panel************************/

/* Instruction Toggle Button Styling - Integrated with Draw Controls */

/* Instruction Toggle Button Styling - Integrated with Draw Controls */

.instruction-toggle-button {
    font-size: 16px !important;
    font-weight: bold !important;
    line-height: 29px !important;
    background: white !important;
    border: 0 !important;
    border-radius: 0 !important;
    cursor: pointer !important;
    transition: background-color 0.2s ease !important;
    width: 29px !important;
    height: 29px !important;
    padding: 0 !important;
    margin: 0 !important;
    display: block !important;
    box-sizing: border-box !important;
}

.instruction-toggle-button:hover {
    background: #f5f5f5 !important;
}

.instruction-toggle-button.active {
    background: #007cbf !important;
    color: white !important;
}

/* Ensure the button appears with a separator line like other draw buttons */
.mapboxgl-ctrl-group .instruction-toggle-button {
    border-top: 1px solid #ddd !important;
}

.instructions-panel {
    display: none !important;
    position: absolute !important;
    top: 100% !important;
    right: 0 !important;
    margin-top: 8px !important;
    background: rgba(0, 0, 0, 0.9) !important;
    color: white !important;
    padding: 16px !important;
    border-radius: 6px !important;
    font-size: 13px !important;
    width: 280px !important;
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.4) !important;
    z-index: 1000 !important;
    line-height: 1.5 !important;
    pointer-events: auto !important;
}

.instructions-panel.visible {
    display: block !important;
}

/* Position instructions panel relative to the control group */
.mapboxgl-ctrl-group {
    position: relative !important;
}

/* Arrow pointing to the toggle button */
.instructions-panel::before {
    content: '' !important;
    position: absolute !important;
    top: -8px !important;
    right: 10px !important;
    width: 0 !important;
    height: 0 !important;
    border-left: 8px solid transparent !important;
    border-right: 8px solid transparent !important;
    border-bottom: 8px solid rgba(0, 0, 0, 0.9) !important;
}

/* Add close button inside instructions panel */
.instructions-close-btn {
    position: absolute !important;
    top: 8px !important;
    right: 8px !important;
    background: transparent !important;
    border: none !important;
    color: white !important;
    font-size: 16px !important;
    font-weight: bold !important;
    cursor: pointer !important;
    padding: 0 !important;
    width: 20px !important;
    height: 20px !important;
    line-height: 1 !important;
    border-radius: 50% !important;
    transition: background-color 0.2s ease !important;
}

.instructions-close-btn:hover {
    background: rgba(255, 255, 255, 0.2) !important;
}

/* Upload Requirements Styling */
.upload-requirements {
    border-radius: 8px;
    padding: 1rem 1rem 3rem 1rem;
    display: flex;
    flex-direction: column;
    justify-content: flex-end;
    margin-bottom: 70px;
}


.upload-requirements h6 {
    color: #495057;
    font-weight: 600;
    margin-bottom: 12px;
    font-size: 14px;
}

.upload-requirements ul {
    margin-bottom: 0;
}

.upload-requirements li {
    color: #6c757d;
    font-size: 13px;
    line-height: 1.4;
    margin-bottom: 6px;
}

.upload-requirements li:last-child {
    margin-bottom: 0;
}

/***************************SiteGrid & enhancements***************************/
#SiteGrid {
    .uiContainer>div>.data-grid-container {
        margin-top: 0.5rem;
    }

    h4.inline-title {
        margin-left: 5px;
    }

    padding: 40px 20px;
}

#SiteForm3Control-SiteForm3-FloorPlanItemsListData-Edit div.uiContainer div.list-command a {
    appearance: none;
    display: inline-block;
    padding: 8px 16px;
    margin-bottom: 4px;
    border-radius: 6px;
    background-color: #dc3545;
    color: #ffffff !important;
    text-decoration: none !important;
    font-size: 13px;
    font-weight: 500;
    cursor: pointer;
    transition: all 0.2s ease;
    text-align: center;
    white-space: nowrap;
}


#SiteForm3Control-SiteForm3-FloorPlanItemsListData-Edit div.uiContainer div.list-command a:hover {
    background-color: #c82333;
    color: #ffffff !important;
    transform: translateY(-1px);
    box-shadow: 0 2px 4px rgba(0, 124, 191, 0.2);
}

#SiteForm3Control-SiteForm3-FloorPlanItemsListData-Edit div.uiContainer div.list-command a:active {
    transform: translateY(0);
    box-shadow: 0 1px 2px rgba(0, 124, 191, 0.2);
}

#SiteForm3Control-SiteForm3-FloorPlanItemsList-Edit .listCommandContainer .list-command a {
    appearance: none;
    display: inline-block;
    padding: 8px 16px;
    margin: 8px 0;
    border-radius: 6px;
    background-color: #5FCDE8;
    color: #ffffff !important;
    text-decoration: none !important;
    font-size: 13px;
    font-weight: 500;
    cursor: pointer;
    transition: all 0.2s ease;
    text-align: center;
    white-space: nowrap;
}

#SiteForm3Control-SiteForm3-FloorPlanItemsList-Edit .listCommandContainer .list-command a:hover {

    background-color: #005a87;
    color: #ffffff !important;
    transform: translateY(-1px);
    box-shadow: 0 2px 4px rgba(0, 124, 191, 0.2);
}

.map-container {
    width: 100%;
    height: 100%;
}



body.page-LiveMapPage,
body.page-PathAnalysisViewPage {
    div.basicForm {
        flex-direction: row;
        gap: 1rem;
    }

    div.main-content {
        display: grid !important;
        grid-template-columns: 1fr 20%;
        /* Main area + sidebar */
        grid-template-rows: auto 1fr;
        /* Top panel + remaining space */
        padding: 0;
    }

    .main-content .zone-content:nth-child(1) {
        grid-column: 1;
        /* Top panel only in first column */
        grid-row: 1;
        margin-bottom: 0;
    }

    .main-content .card {
        grid-column: 1;
        /* Map in main content area */
        grid-row: 2;
        min-height: 600px;
        height: calc(100vh - 200px);
    }

    .main-content .vehicle-status-content,
    .main-content .path-analysis-settings {
        grid-column: 2;
        grid-row: 1 / 3;

        /* Hide horizontal overflow */
        >div.vehicle-list {
            max-height: calc(100vh - 200px);
            /* Or a specific height like 800px */
            overflow-y: auto;
            /* Add vertical scrolling to the sidebar */
            overflow-x: hidden;
        }
    }
}

/****FILTER + HEADER + SIDEPANEL CSS**********/

.fhs-content-wrapper,
.vfhs-content-wrapper,
.vftchs-content-wrapper {
    height: 100% !important;
    width: calc(100% - 300px);
    margin-left: auto;
    transition: margin-left 1s ease, width 1s ease;
}

.fhs-main-content,
.vftchs-main-content {
    display: grid !important;
    grid-template-columns: 1fr 300px !important;
    grid-template-rows: auto 1fr !important;
    gap: 1rem !important;
    align-content: start !important;
    padding: 0 !important;
    margin: 0 !important;
    height: 100% !important;
}

.fhs-main-content>.filter-zone {
    grid-column: 1 !important;
    grid-row: 1 !important;
}

.fhs-main-content>.header-zone {
    grid-column: 1 !important;
    grid-row: 2 !important;
    height: min-content;
}

.fhs-main-content>.side-panel-zone {
    grid-column: 2 !important;
    grid-row: 1 / 3 !important;
    /* Span both rows for full height */
}

.fhs-main-content>.filter-zone,
.fhs-main-content>.header-zone,
.vfhs-main-content>.filter-zone,
.vfhs-main-content>.header-zone,
.vfhs-main-content>.views-zone,
.vftchs-main-content>.header-zone,
.vftchs-main-content>.views-zone {
    padding: 1.5rem 1.5rem 0 1.5rem !important;
}

.fhs-main-content>.side-panel-zone.col-lg-3,
.fhs-main-content>.filter-zone.col-lg-9,
.fhs-main-content>.header-zone.col-lg-9,
.vfhs-main-content>.side-panel-zone.col-lg-3,
.vfhs-main-content>.filter-zone.col-lg-9,
.vfhs-main-content>.header-zone.col-lg-9,
.vfhs-main-content>.views-zone,
.vftchs-main-content>.views-zone,
.vftchs-main-content>.filter-zone,
.vftchs-main-content>.side-panel-zone {
    flex: none !important;
    max-width: none !important;
    width: auto !important;
}

.fhs-main-content>.zone-content,
.vfhs-main-content>.zone-content,
.vftchs-main-content>.zone-content {
    margin: 0 !important;
}


.vfhs-main-content {
    display: grid !important;
    grid-template-columns: 1fr 300px !important;
    grid-template-rows: auto auto 1fr !important;
    gap: 1rem !important;
    align-content: start !important;
    padding: 0 !important;
    margin: 0 !important;
    height: 100% !important;
}


.vfhs-main-content>.views-zone {
    grid-column: 1 !important;
    grid-row: 1 !important;
}

.vfhs-main-content>.filter-zone {
    grid-column: 1 !important;
    grid-row: 2 !important;
}

.vfhs-main-content>.header-zone {
    grid-column: 1 !important;
    grid-row: 3 !important;
    height: min-content;
}

.vfhs-main-content>.side-panel-zone {
    grid-column: 2 !important;
    grid-row: 1 / 4 !important;
    /* Span both rows for full height */
}

.vftchs-main-content>.views-zone {
    grid-column: 1 !important;
    grid-row: 1 !important;
}

.vftchs-main-content>.header-zone {
    grid-column: 1 !important;
    grid-row: 2 !important;
    height: min-content;
}

.vftchs-main-content>.side-panel-zone {
    grid-column: 2 !important;
    grid-row: 1 / 3 !important;
    /* Span both rows for full height */
}

/**Device Information Side Panel***/

#SlamcoreDeviceConnectionViewForm4Control-SlamcoreDeviceConnectionViewForm4Control,
#SlamcoreDeviceConnectionViewForm41Control-SlamcoreDeviceConnectionViewForm41Control,
#SlamcoreAllAlertsViewForm5Control-SlamcoreAllAlertsViewForm5Control,
#SlamcoreDeviceVehicleAssociationViewForm5Control-SlamcoreDeviceVehicleAssociationViewForm5Control {

    >div>h4 {
        border-bottom: 1px solid #e2e8f0 !important;
        padding: 1rem 0;
        font-size: 1.125rem !important;
        font-weight: 600 !important;
    }

}

#SlamcoreDeviceConnectionViewForm4Control-SlamcoreDeviceConnectionViewForm4Control,
#SlamcoreDeviceConnectionViewForm41Control-SlamcoreDeviceConnectionViewForm41Control,
#SlamcoreAllAlertsViewForm5Control-SlamcoreAllAlertsViewForm5Control,
#SlamcoreDeviceVehicleAssociationViewForm5Control-SlamcoreDeviceVehicleAssociationViewForm5Control {
    >.uiContainer>div>div.basicForm {

        padding-top: 1rem;
    }

    >.uiContainer>div>div.basicForm>div {
        display: flex;
        justify-content: space-between;
        padding-right: 1rem;
    }
}

.slamcore-total-alerts-container>div,
.slamcore-total-associations-container>div {
    background: white;
    border: 1px solid #e5e7eb;
    border-radius: 6px;
    padding: 1rem 1rem 1.2rem 1rem;
    box-shadow: 0 2px 10px rgba(0, 0, 0, 0.1);
    display: flex;
    flex-direction: column;
    width: 100% !important;
}

/* Icons */
.slamcore-total-alerts-container .slamcore-alerts::after {
    content: "🔔";
    font-size: 1.2rem;
    margin-bottom: 0.25rem;
    align-self: flex-end;
    margin-top: -2rem;
}

.slamcore-total-alerts-container .slamcore-no-critical::after {
    content: "⚠️";
    font-size: 1.2rem;
    margin-bottom: 0.25rem;
    align-self: flex-end;
    margin-top: -2rem;
}

.slamcore-total-alerts-container .slamcore-resolved::after {
    content: "⭕";
    font-size: 1.2rem;
    margin-bottom: 0.25rem;
    align-self: flex-end;
    margin-top: -2rem;
}

.slamcore-total-alerts-container .slamcore-no-today::after {
    content: "📅";
    font-size: 1.2rem;
    margin-bottom: 0.25rem;
    align-self: flex-end;
    margin-top: -2rem;
}

.slamcore-total-alerts-container>div span:first-child,
.slamcore-total-associations-container>div span:first-child {
    font-size: 1.5rem;
    font-weight: 700;
    color: #374151;
    margin: 0.25rem 0;
    line-height: 1;
}

.slamcore-total-alerts-container>div span:last-child,
.slamcore-total-associations-container>div span:last-child {
    font-size: 0.75rem;
    color: #6b7280;
    margin: 0;
    line-height: 1;
}

.side-panel-form-field-control-container {
    display: flex;
    align-items: center;
}

/*****Device Association******/

.vftchs-left-column,
.vftchs-right-column {
    width: auto !important;
}

.vftchs-left-column {
    margin-right: 10px !important;
}

/****SLAMCORE Filters***/

#SlamcoreDeviceFilterFormControl>div>.filter-button-container-custom,
#AllVehicleCalibrationFilterForm1Control>div>.filter-button-container-custom,
#DataExportFilterFormControl>div>.filter-button-container-custom {
    padding: 0 !important;

}

#DataExportFilterFormControl-DataExportFilterFormData {
    margin-bottom: 1rem !important;
}

#DataExportFilterFormControl-DataExportFilterFormControl>div {

    >h4 {
        border-bottom: 1px solid #e2e8f0 !important;
        padding-bottom: 1rem !important;
        margin-bottom: 1.5rem !important;

    }
}


#AllVehicleCalibrationFilterForm1Control-AllVehicleCalibrationFilterForm1Control>div.uiContainer>div.row>div:first-child {
    width: 100% !important;

}

#SlamcoreDeviceFilterFormControl-SlamcoreDeviceFilterFormData {
    >div.row {
        margin-bottom: 0.5rem;
    }
}


#SlamcoreDeviceFilterFormControl,
#AllVehicleCalibrationFilterForm1ControlCommands {
    margin-top: 0.5rem !important;
}

#SlamcoreDeviceFilterFormControl-SlamcoreDeviceFilterFormControl,
#AllVehicleCalibrationFilterForm1Control-AllVehicleCalibrationFilterForm1Control {
    >div>h4 {
        margin-bottom: 1.5rem;
    }

}

body.page-DataExportPagePage>div#form>div>div.main-wrapper>div.content-wrapper.d-flex.flex-column.--flex-row-fluid>div.main-content.container>div.zone-content.row:first-child {
    padding-right: calc(var(--bs-gutter-x) * .5);
    padding-left: calc(var(--bs-gutter-x) * .5);
}

/*EXPORT GRID*/

#SlamcoreDeviceGrid td[data-bind=" safeHtml: Data.Name"] {
    font-weight: 600;
}

/*PDF LINKS HELP PAGE*/

.pdf-link {
    margin: 5px 0;
}

.pdf-link a {
    color: #0066cc !important;
    cursor: pointer;
}

.pdf-link a:hover {
    text-decoration: underline !important;
}


.pdf-link a:visited {
    color: #800080 !important;
}

/*****Associated Device Tag*****/
.associated-device-span {
    display: inline-block;
    background-color: #e8f5e8;
    color: #2d5a2d;
    padding: 4px 12px;
    border-radius: 16px;
    font-size: 0.7rem;
    font-weight: 500;
    line-height: 1.2;
    white-space: nowrap;
    text-align: center;
    vertical-align: middle;
    margin-left: 5px;
}

.export-download-link {
    display: inline-block;
    background-color: gray;
    color: white;
    padding: 8px 16px;
    text-decoration: none;
    border-radius: 4px;
    font-size: 0.75rem;
    text-align: center;
    border: none;
    cursor: pointer;
    transition: background-color 0.2s ease, transform 0.1s ease;
    box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
}

.export-download-link:hover {
    background-color: darkgray;
    transform: translateY(-1px);
    box-shadow: 0 4px 8px rgba(0, 0, 0, 0.15);
}


.export-download-link:before {
    content: "⬇ ";
    margin-right: 6px;
    font-size: 12px;
}

.status-device-container {
    display: flex;
    margin: 5px;

    >p {
        margin: 0 5px;

    }

    .bi-check-circle-fill {
        color: var(--fleet-xq-dashboard-success);
    }

    .bi-dash-circle-fill {
        color: var(--fleet-xq-dashboard-failure)
    }
}

/*XQ MARKETING PAGE*/

body.page-SlamcoreMarketingPagePage div.mainColumn {
    display: flex;
    justify-content: center;
    background-color: var(--fleet-xq-back-button-bg-color)
}

/***********/

.filter-commands-container {
    display: flex;
    justify-content: flex-end;
}

#sidebar {
    overflow-y: hidden;
}

.nav.nav-pills.flex-column {

    overflow-y: auto;
    flex-wrap: nowrap;
}

#sidebar {
    overflow-y: hidden;
}

.nav.nav-pills.flex-column {

    overflow-y: auto;
    flex-wrap: nowrap;
}


.contact-links-content {
    height: 40px;
    display: flex;
    align-items: center;
    font-size: 1rem;
    justify-content: center;
}

.contact-links-content-container {
    display: flex;
    flex-direction: column;
    background-color: #f8f9fa !important;
    padding: 5px;
}

#AccessGroupForm-AccessGroupForm1FormControl .uiContainer.access-group-container-custom .container .row,
#AccessGroupForm-UsersAccessGroupFormFormControl .uiContainer.access-group-container-custom .container .row,
#AccessGroupForm-AccessGroupForm2FormControl .uiContainer.access-group-container-custom .container .row,
#AccessGroupForm-AccessGroupForm3FormControl .uiContainer.access-group-container-custom .container .row {

    .col-7,
    .col-1 {
        padding: 0 !important;
    }

    .col-7 .basicForm.view>div:nth-child(2n) {
        background-color: var(--fleet-xq-gray-250);
    }

    .col-7 .basicForm.view>div>span>div {
        display: flex;
        align-items: center;
        text-wrap: nowrap;
        padding-left: 10px;
    }


    .col-1.accessgroup-accessrightswitch .basicForm.view>div:nth-child(2n):not(:last-child) {
        background-color: var(--fleet-xq-gray-250);
    }

    .col-1.accessgroup-accessrightswitch .basicForm.view>div:not(:last-child)>span {
        display: flex;
        align-items: center;
        text-wrap: nowrap;
        justify-content: center;
    }

    .col-1.accessgroup-accessrightswitch .basicForm.view>div:last-child>span>div>span {
        display: flex;
        flex-direction: column;
        justify-content: center;
        margin: 0 auto;
        padding-top: 10px;
    }

}

/* Hide detailed permissions when main access toggles are unchecked */

/* AccessGroupForm1 - Hide customer permission details when HasCustomersAccess is false */
#AccessGroupForm-AccessGroupForm1FormControl:has(input[type="checkbox"][data-bind*="HasCustomersAccess"]:not(:checked)) .row:not(:first-child) {
    display: none;
}

/* Remove margin-top from subsequent forms when HasCustomersAccess is false */
#AccessGroupFormControl:has(input[type="checkbox"][data-bind*="HasCustomersAccess"]:not(:checked)) #AccessGroupForm-UsersAccessGroupFormFormControl {
    margin-top: 0;
}

/* UsersAccessGroupForm - Hide user permission details when HasUsersAccess is false */
#AccessGroupForm-UsersAccessGroupFormFormControl:has(input[type="checkbox"][data-bind*="HasUsersAccess"]:not(:checked)) .row:not(:first-child) {
    display: none;
}

/* Remove margin-top from subsequent forms when HasUsersAccess is false */
#AccessGroupFormControl:has(input[type="checkbox"][data-bind*="HasUsersAccess"]:not(:checked)) #AccessGroupForm-AccessGroupForm2FormControl {
    margin-top: 0;
}

/* AccessGroupForm2 - Hide vehicle permission details when HasVehiclesAccess is false */
#AccessGroupForm-AccessGroupForm2FormControl:has(input[type="checkbox"][data-bind*="HasVehiclesAccess"]:not(:checked)) .row:not(:first-child) {
    display: none;
}

/* Remove margin-top from subsequent forms when HasVehiclesAccess is false */
#AccessGroupFormControl:has(input[type="checkbox"][data-bind*="HasVehiclesAccess"]:not(:checked)) #AccessGroupForm-AccessGroupForm3FormControl {
    margin-top: 0;
}

/* AccessGroupForm3 - Hide report permission details when HasReportsAccess is false */
#AccessGroupForm-AccessGroupForm3FormControl:has(input[type="checkbox"][data-bind*="HasReportsAccess"]:not(:checked)) .row:not(:first-child) {
    display: none;
}