/**********************************************************
 * 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 
 *********************************************************/

 /**********************************************************
 * 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,
 .uiContainer#BroadcastMessageHistoryGrid,
 .uiContainer#PedestrianDetectionHistoryGrid,
 .uiContainer#AllDriverAccessAbuseStoreProcedureGrid,
 .uiContainer#AllLicenseExpiryViewGrid,
 .uiContainer#AllMessageHistoryStoreProcedureGrid,
 .uiContainer#AllVehicleCalibrationStoreProcedureGridAdmin,
 .uiContainer#OnDemandAuthorisationStoreProcedureGrid,
 .uiContainer#AllEmailSubscriptionStoreProcedureGrid,
 .uiContainer#AlertSubscriptionGrid,
 .uiContainer#RestrictedAccessUsageReportStoreProcedureGrid,
 .uiContainer#AllModuleStatusStoreProcedureGrid {
     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: 43rem;
     text-wrap: nowrap;
     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;
 }

 /* FXQ-4004: Prevent tooltip clipping on first row action icons */
 #VehilceGrid .data-grid-container {
	 overflow-x: auto;
     overflow-y: visible;
 }

 #VehilceGrid .data-grid tbody {
     overflow: visible;
 }

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

 /* FXQ-4178: Ensure vehicle grid buttons wrap instead of overflowing */
 /* FXQ-4178: Allow horizontal scroll on Vehicles page when content overflows */
 body:has(#VehilceGrid) {
     overflow-x: auto !important;
 }

 body:has(#VehilceGrid) .main-content {
     overflow-x: visible !important;
 }

 .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: 1px solid #ced4da;
         border-radius: 0 0.25rem 0.25rem 0 !important;
         min-height: 30px;
     }

     >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;
 }

 #VehicleFormControl-VehicleForm-OnDemandSettingsFormControl {
     margin-bottom: 2em;
 }

 #-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);
 }

 /* FXQ-3972: Ensure vehicle grid page uses all available space below 1400px */
 body.fullwidth.page-VehilceItemsPage .main-content {
     max-width: 100% !important;
     padding: 0 1.5rem;
 }

 /* FXQ-3972: Hide Seat Idle(s) and Sim Card Date on smaller screens */
 @media screen and (max-width: 1600px) {

     #VehilceGrid div div.uiContainer div div.data-grid-container table.data-grid thead.gridControl tr th:nth-child(9),
     #VehilceGrid div div.uiContainer div div.data-grid-container table.data-grid thead.gridControl tr th:nth-child(12) {
         display: none;
     }

     #VehilceGrid div div.uiContainer div div.data-grid-container table.data-grid tbody tr td:nth-child(9),
     #VehilceGrid div div.uiContainer div div.data-grid-container table.data-grid tbody tr td:nth-child(12) {
         display: none;
     }
 }

 /* FXQ-3972: Hide Last Session and Last Driver on smaller screens */
 @media screen and (max-width: 1200px) {

     #VehilceGrid div div.uiContainer div div.data-grid-container table.data-grid thead.gridControl tr th:nth-child(10),
     #VehilceGrid div div.uiContainer div div.data-grid-container table.data-grid thead.gridControl tr th:nth-child(11) {
         display: none;
     }

     #VehilceGrid div div.uiContainer div div.data-grid-container table.data-grid tbody tr td:nth-child(10),
     #VehilceGrid div div.uiContainer div div.data-grid-container table.data-grid tbody tr td:nth-child(11) {
         display: none;
     }
 }


 /************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;
 }

 div[data-entityfield="statuschangeddatestart-edit"],
 div[data-entityfield="statuschangeddateend-edit"] {
     margin-top: 0.75em;
 }

 /* FXQ-3755: Expandable Sessions Inline Toggle */
 .expand-col {
     width: 40px;
     text-align: center;
     cursor: pointer;
 }

 .expand-col-header {
     white-space: nowrap;
     text-align: center;
 }

 .expand-chevron {
     transition: transform 0.2s ease;
     fill: currentColor;
 }

 .chevron-expanded {
     transform: rotate(90deg);
 }

 .expanded-row {
     background-color: rgba(0, 123, 255, 0.05);
 }

 .session-detail-row>td {
     padding: 0 !important;
     border-top: none;
 }

 .session-detail-cell {
     background-color: #f8f9fa;
 }

 .session-sub-table {
     margin: 0;
     width: 100%;
 }

 .session-sub-table thead th {
     background-color: #e9ecef;
     font-weight: 500;
     color: var(--fleet-xq-th-text-color);
     padding: 4px 8px;
 }

 .session-sub-table tbody td {
     padding: 4px 8px;
     border-bottom: 1px solid #eee;
     color: var(--fleet-xq-tr-text-color);
 }

 .session-sub-table tbody tr:hover {
     background-color: #e2e6ea;
 }

 /* Prevent global .data-grid hover rule from turning session text white.
     The sub-table is nested inside the main .data-grid, so the parent row's
     hover state causes .data-grid tbody tr:hover td to reach nested cells. */
 .session-detail-row:hover>.session-detail-cell,
 .session-sub-table thead th,
 .session-sub-table tbody td {
     color: var(--fleet-xq-tr-text-color) !important;
 }

 /* Data Insights / Driver Rankings - AI Query Section */

 .aiqueryheader {
     background-color: var(--fleet-xq-header-background);
 }

 .ai-query-header-custom {
     color: var(--fleet-xq-form-header-color);
     text-transform: uppercase;
     font-weight: 100;
     font-size: 1.5rem;
     padding-bottom: 1rem;
 }

 .ai-query-textarea-custom {
     min-height: 3rem;
     padding: 10px 16px;
 }

 .ai-query-btn-custom {
     background-color: #13BAB6;
     border-radius: 10px;
     min-width: 46px;
     padding: 0 14px;
     display: flex;
     align-items: center;
     justify-content: center;
 }

 /* Driver Predictions - Strengths/Weaknesses Badges */
 .cognition-badges-container {
     display: flex;
     flex-wrap: wrap;
     gap: 6px;
     align-items: center;
 }

 .cognition-badge-strength {
     display: inline-block;
     padding: 4px 12px;
     border-radius: 4px;
     font-size: 0.85rem;
     font-weight: 500;
     background-color: #e6f9f0;
     color: #1a7a4c;
     border: 1px solid #b3ecd3;
     white-space: nowrap;
 }

 .cognition-badge-weakness {
     display: inline-block;
     padding: 4px 12px;
     border-radius: 4px;
     font-size: 0.85rem;
     font-weight: 500;
     background-color: #fde8e8;
     color: #b91c1c;
     border: 1px solid #f5c6c6;
     white-space: nowrap;
 }

 /* Driver Predictions - Predictive Metrics Score Badges */
 .cognition-score {
     display: inline-flex;
     align-items: center;
     justify-content: center;
     min-width: 36px;
     height: 36px;
     padding: 4px 10px;
     border-radius: 6px;
     font-size: 0.9rem;
     font-weight: 600;
 }

 .cognition-score-green {
     background-color: #e6f9f0;
     color: #1a7a4c;
 }

 .cognition-score-orange {
     background-color: #fff3e0;
     color: #e65100;
 }

 .cognition-score-red {
     background-color: #fde8e8;
     color: #b91c1c;
 }

 .cognition-score-overall {
     display: inline-flex;
     align-items: center;
     justify-content: center;
     min-width: 42px;
     height: 42px;
     padding: 4px 12px;
     border-radius: 8px;
     font-size: 1.1rem;
     font-weight: 700;
     background-color: #fff3e0;
     color: #e65100;
 }

 /* Driver Personality Profiles - Enneagram Type Cards */
 .enneagram-types-container {
     display: flex;
     flex-direction: column;
     gap: 8px;
 }

 .enneagram-type-card {
     display: flex;
     align-items: center;
     gap: 10px;
 }

 .enneagram-type-number {
     display: inline-flex;
     align-items: center;
     justify-content: center;
     min-width: 32px;
     height: 32px;
     border-radius: 50%;
     background-color: #ede9fe;
     color: #6d28d9;
     font-size: 0.85rem;
     font-weight: 700;
     flex-shrink: 0;
 }

 .enneagram-type-label {
     font-size: 0.85rem;
     color: #374151;
     line-height: 1.3;
 }

 /* Driver Detail Page - Custom Form1 Styling */
 .driver-detail-custom {
     padding: 8px 0;
 }

 .driver-detail-name {
     font-size: 1.6rem;
     font-weight: 600;
     color: var(--fleet-xq-form-header-color, #1e293b);
     margin-bottom: 20px;
 }

 .driver-detail-metrics {
     display: flex;
     flex-direction: column;
     gap: 10px;
 }

 .driver-metric-row {
     display: flex;
     align-items: center;
     gap: 12px;
 }

 .driver-metric-label {
     min-width: 100px;
     font-size: 0.85rem;
     font-weight: 500;
     color: #374151;
 }

 .driver-metric-bar-track {
     flex: 1;
     max-width: 300px;
     height: 8px;
     background-color: #e5e7eb;
     border-radius: 4px;
     overflow: hidden;
 }

 .driver-metric-bar-fill {
     height: 100%;
     border-radius: 4px;
     transition: width 0.4s ease;
 }

 .metric-bar-green {
     background-color: #13BAB6;
 }

 .metric-bar-orange {
     background-color: #f59e0b;
 }

 .metric-bar-red {
     background-color: #ef4444;
 }

 .driver-metric-value {
     min-width: 24px;
     text-align: right;
     font-size: 0.9rem;
     font-weight: 600;
     color: #1e293b;
 }

 /* Driver Detail Page - Section Cards (Personality Traits, Performance Analysis) */
 .driver-detail-section {
     padding: 4px 0;
 }

 .driver-detail-section-title {
     font-size: 0.8rem;
     font-weight: 700;
     letter-spacing: 0.05em;
     color: #1e293b;
     margin-bottom: 16px;
 }

 .driver-detail-subsection {
     margin-bottom: 14px;
 }

 .driver-detail-subsection-label {
     font-size: 0.75rem;
     font-weight: 600;
     letter-spacing: 0.04em;
     color: #6b7280;
     margin-bottom: 8px;
 }

 .dd-label-green {
     color: #13BAB6;
 }

 .dd-label-red {
     color: #ef4444;
 }

 .dd-label-blue {
     color: #3b82f6;
 }

 /* Personality Trait Badges */
 .dd-badge {
     display: inline-block;
     padding: 4px 12px;
     border-radius: 16px;
     font-size: 0.82rem;
     font-weight: 500;
     margin: 2px 4px 2px 0;
     white-space: nowrap;
 }

 .dd-badge-value {
     background-color: #e6f9f0;
     color: #1a7a4c;
     border: 1px solid #b3ecd3;
 }

 .dd-badge-fear {
     background-color: #fde8e8;
     color: #b91c1c;
     border: 1px solid #f5c6c6;
 }

 /* Performance Analysis Icon Lists */
 .dd-icon-list {
     display: flex;
     flex-direction: column;
     gap: 6px;
 }

 .dd-icon-list-item {
     display: flex;
     align-items: flex-start;
     gap: 8px;
     font-size: 0.85rem;
     color: #374151;
     line-height: 1.4;
 }

 .dd-icon-list-icon {
     flex-shrink: 0;
     font-size: 0.85rem;
 }

/* FXQ-4178: Vehicle grid - prevent Device ID column wrapping and add horizontal scroll */
[data-test-id="8d8a93b4-115b-4964-83f7-ac527906a021"] .data-grid-container {
    overflow-x: auto;
}

[data-test-id="8d8a93b4-115b-4964-83f7-ac527906a021"] .data-grid {
    min-width: 100%;
    width: max-content;
}

[data-test-id="8d8a93b4-115b-4964-83f7-ac527906a021"] .data-grid th:nth-child(8),
[data-test-id="8d8a93b4-115b-4964-83f7-ac527906a021"] .data-grid td:nth-child(8) {
    white-space: nowrap;
}