:root {
    /*Color Pallet - PASTE ONLY THE NUMBERS NOT THE # SO THE LINES IN ROOT DONT JUMP*/

    --Red: /*#ff5b57*/ #df5451;
    --LightRed: #FAD2CF;
    --Yellow: /*#C47D15*/ #eb8c00;
    --LightYellow: #FEEFC3;
    --Green: #00ACAC;
    --LightGreen: #CEEAD6;
    --Blue: #1a81df;
    --blue_lighter: #df5451;
    --LightGray: #F1F3F4;
    --White: #e4e4e4;
    --DrawbarGreen: #006464;
    --MainButtonColor: #879094;
    --MainButtonColor2: #e1e1e1;
    --MainColorLILdarkerThanSidebar: #22272a !important;
    --SidebarColor: #272e32 !important; /*sidebar background color*/
    --BodyFontColor: #2e2e30 !important;
    --PannelHeaderColor: var(--SidebarColor) !important;
    --BodyColor: #d4dadc !important;
    /*used for striped table Dont mess with this since its transparent*/
    --BodyColorDarker: #26262603 !important;
    /*used for striped table Dont mess with this since its transparent*/
    --GL: /assets/plugins/leaflet/images/marker-icon-green.png; /*For the Map - Are these needed still?*/
    --RL: /assets/plugins/leaflet/images/marker-icon-red.png;
    --YL: /assets/plugins/leaflet/images/marker-icon-orange.png;
    --BodyColorLighter: #d8d8d8 !important;
    --rounded: 8px 8px 8px 8px !important;
    --ContentBackground: #717882 !important; /*main page background color*/

    --DarkTabs: #3B444c !important;
    --Invisible: #00000000 !important;
    --fullWhite: #fff !important;
    --ListRed: var(--LightRed) !important;
    --ListGreen: var(--LightGreen) !important;
    --ListOrange: var(--LightYellow) !important;
    --buttonWhiteColor: var(--BodyColor);
    --buttonWhiteBorder: #4c4c4c;
    --buttonWhiteColor2: #62626240;
    --buttonWhiteBorder2: #a3a3a3;
    --MenuGray: #e1e1e1;
    --Gray-5: #454545;
    --Gray-4: #858585;
    --Gray-3: #b5b5b5;
    --Gray-2: #cccccc;
    --Gray: #717882ba;
    --WidgetRadius: 8px !important;
    --WidgetItemBackgroundColor: #60606038;
    --ButtonRadius: 8px !important; /*Red */
    --TextBoxBorder: #cfcfcf;
    --TextBoxButtonColor: #c5c5c5b8;
    --TableStripe: #e9e9e9;
    --Select2BoxColor: #2a3032;
    --BoxShadow: rgba(17, 17, 26, 0.3) 0px 1px 0px;
    --BoxShadowOut: rgba(0, 0, 0, 0.25) 0px 25px 20px -20px;
    --FontOpp: #e1e1e1 !important;
    --CalendarColor: #fff;
    /*WHITE - for SVGs on using this style sheet*/
    --FontColorFilter: brightness(0) saturate(100%) invert(99%) sepia(0%) saturate(166%) hue-rotate(254deg) brightness(114%) contrast(76%);
    --TextBoxBackgroundColor: #fff;
    --TrueWhite: #fff;
    --svgDarkBlueFilter: brightness(0) saturate(100%) invert(9%) sepia(2%) saturate(6641%) hue-rotate(159deg) brightness(94%) contrast(79%);
    --svgWhiteFilter: brightness(0) saturate(100%) invert(99%) sepia(2%) saturate(67%) hue-rotate(223deg) brightness(118%) contrast(100%);
    --svgOffWhiteFilter: brightness(0) saturate(100%) invert(83%) sepia(1%) saturate(1666%) hue-rotate(163deg) brightness(137%) contrast(76%);
    --svgMiddleGrayFilter: brightness(0) saturate(100%) invert(47%) sepia(8%) saturate(0%) hue-rotate(231deg) brightness(107%) contrast(91%);
}





/*------------------------------------------------Modifications that should happen to all themes----------------------------------------------------------*/

.progress-red {
    background-color: var(--Red) !important;
}

.progress-yellow {
    background-color: var(--Yellow) !important;
}

.progress-green {
    background-color: var(--Green) !important;
}


/* ==================================================================== User Menu =============================================*/

.large-Screen-Only {
    display: none;
}

@media screen and (min-width: 768px) {
    .large-Screen-Only {
        display: block; /* Or flex, grid, etc. depending on desired layout */
    }
}

.user-icon {
    filter: var(--FontColorFilter);
}

.navbar-default .navbar-nav > li > a {
    color: var(--FontOpp);
}

.navbar-default .navbar-nav > .open > a, .navbar-default .navbar-nav > .open > a:focus, .navbar-default .navbar-nav > .open > a:hover {
    color: var(--FontOpp);
    background-color: #00acac;
}

.dropdown-menu > li > a:focus, .dropdown-menu > li > a:hover {
    background: #00acac;
}

.navbar-default .navbar-nav .open .dropdown-menu > li > a {
    color: var(--BodyFontColor);
}

.hover-body-font-color:hover, .hover-body-font-color:focus {
    color: var(--FontOpp) !important;
}

.navbar-default .navbar-nav > li > a:focus, .navbar-default .navbar-nav > li > a:hover {
    color: var(--FontOpp);
}

.navbar-nav > li > a .label {
    position: absolute;
    top: 7px;
    right: 3px;
    display: block;
    background: var(--Red);
    line-height: 12px;
    font-weight: 300;
    padding: .3em .6em;
    -webkit-border-radius: 20px;
    -moz-border-radius: 20px;
    border-radius: 20px;
}

/* ==================================================================== User Menu =============================================*/



/*--Added so all panels have it---*/
.panel-default {
    padding-bottom: 5px;
}
/*--REMOVE IT IF ITS A INSPECTION BECAUSE OF RED ERRORS---*/
.K-Remove-Padding-Bottom {
    padding-bottom: 0px !important;
}

.table {
    border-color: #ffffff00;
}

.kyle-text {
    padding: 5px;
}

.KK_Padding {
    padding: 7px;
}

.collapsing {
    /* Example: Reduce transition duration to 0.2 seconds */
    transition: height 0.2s ease;
    /* You might also need to include vendor prefixes for broader compatibility */
    -webkit-transition: height 0.2s ease;
    -o-transition: height 0.2s ease;
}

.Header-Icon-Img-Style {
    height: 100%;
    width: auto;
    position: center;
    padding-bottom: 0px !important;
    margin-top: 5px;
}

.Header_Move_SRC {
    content: url('/assets/img/KyleIcons/MoverHeaderButton.svg');
}

.Header_Collapse_SRC {
    content: url('/assets/img/KyleIcons/ExpandHeaderButton.svg');
}

.Img_View_SRC {
    content: url('/assets/img/KyleIcons/ButtViewEye.svg');
}

.Img_Edit_SRC {
    content: url('/assets/img/KyleIcons/Edit.svg');
}

.Img_Delete_SRC {
    content: url('/assets/img/KyleIcons/HOSCancel.svg');
}

.Img_Submit_SRC {
    content: url('/assets/img/KyleIcons/Check.svg');
}



.panel-title {
    line-height: 30px;
    color: var(--FontOpp);
    font-size: 18px;
}

.ButtVeiwIcon {
    content: url('/assets/img/KyleIcons/View.svg');
}

.ButtEditIcon {
    content: url('/assets/img/KyleIcons/Edit.svg');
}

.ButtDeleteIcon {
    content: url('/assets/img/KyleIcons/ButtDeleteTrash.svg');
}

.ButtStyle {
    height: 100%;
    width: auto;
    position: center;
    padding-bottom: 0px !important;
}

.BUTT-VED {
    padding: 5px 15px 5px 15px;
}




/*===========================================END ALL SITE============================================*/


.border-left{
    border-left:4px solid #fff;
}

.border-red{
    border-color:var(--Red) !important;
}
.border-yellow {
    border-color: var(--Yellow) !important;
}
.border-green {
    border-color: var(--Green) !important;
}
.border-blue {
    border-color: var(--Blue) !important;
}
.border-gray {
    border-color: var(--Gray) !important;
}

.box-shadow{
    box-shadow:var(--BoxShadow);
}

.kTimePicker {
    border-radius: 8px 0px 0px 8px !important;
}

.kTimePickerAddon {
    border-radius: 0px 8px 8px 0px !important;
}

.MapOpacity{
    opacity:.99!important;
}
/*------------------------------------------------ROUND EVERYTHING----------------------------------------------------------*/


/*===========================================Leave this alone it is needed for dropdowns============================================*/
/*===========================================Leave this alone it is needed for dropdowns============================================*/
.btn.focus, .btn:focus, .btn:hover {
    color: #8e8e8ede;
    text-decoration: none;
}
/*===========================================Leave this alone it is needed for dropdowns============================================*/
/*===========================================Leave this alone it is needed for dropdowns============================================*/




.page-container {
}

@media (min-width: 768px) {
    .modal-dialog {
        width: 800px !important;
        margin: 30px auto;
    }
}

.table-hover > tbody > tr:hover > td, .table-hover > tbody > tr:hover > th {
    background: #989898 !important;
}
/*colors for svg images*/

.svg-header-button-color {
    filter: brightness(0) saturate(100%) invert(55%) sepia(29%) saturate(0%) hue-rotate(245deg) brightness(88%) contrast(81%);
    /*filter: brightness(0) saturate(100%) invert(17%) sepia(5%) saturate(1103%) hue-rotate(155deg) brightness(93%) contrast(84%);*/
}
.svg-btn-white {
    filter: brightness(0) saturate(100%) invert(43%) sepia(7%) saturate(329%) hue-rotate(155deg) brightness(95%) contrast(93%);
}



.svg-white {
    /*filter: brightness(0) saturate(100%) invert(99%) sepia(0%) saturate(166%) hue-rotate(254deg) brightness(114%) contrast(76%); */ /*white*/
    /*filter: brightness(0) saturate(100%) invert(43%) sepia(7%) saturate(329%) hue-rotate(155deg) brightness(95%) contrast(93%);*/
    filter: brightness(0) saturate(100%) invert(13%) sepia(6%) saturate(369%) hue-rotate(201deg) brightness(95%) contrast(84%);
}

.svg-darkBlue {
    
    filter: brightness(0) saturate(100%) invert(99%) sepia(0%) saturate(166%) hue-rotate(254deg) brightness(114%) contrast(76%);
}
.svg-Header-Dropdown {
    filter: var(--svgDarkBlueFilter);
}

.svg-gray {
    
    filter: brightness(0) saturate(100%) invert(64%) sepia(8%) saturate(233%) hue-rotate(169deg) brightness(96%) contrast(95%);
}

.svg-gray_2 {
    filter: brightness(0) saturate(100%) invert(96%) sepia(7%) saturate(4%) hue-rotate(314deg) brightness(92%) contrast(84%);
}

.svg-gray_3 {
    filter: brightness(0) saturate(100%) invert(96%) sepia(0%) saturate(54%) hue-rotate(142deg) brightness(75%) contrast(83%);
}

.svg-gray_4 {
    filter: brightness(0) saturate(100%) invert(60%) sepia(5%) saturate(5%) hue-rotate(4deg) brightness(86%) contrast(85%);
}

.svg-gray_5 {
    filter: brightness(0) saturate(100%) invert(23%) sepia(0%) saturate(0%) hue-rotate(177deg) brightness(98%) contrast(83%);
}

.svg-primary {
    filter: brightness(0) saturate(100%) invert(40%) sepia(78%) saturate(683%) hue-rotate(172deg) brightness(93%) contrast(87%);
}

.svg-menuGray {
    filter: brightness(0) saturate(100%) invert(99%) sepia(0%) saturate(166%) hue-rotate(254deg) brightness(114%) contrast(76%);
}

.svg-dbGreen {
    filter: brightness(0) saturate(100%) invert(48%) sepia(95%) saturate(1000%) hue-rotate(141deg) brightness(86%) contrast(104%);
}

.svg-red {
    
    filter: brightness(0) saturate(100%) invert(100%) sepia(14%) saturate(2%) hue-rotate(201deg) brightness(107%) contrast(101%);  /*WHITE*/
}

.svg-yellow {
    filter: brightness(0) saturate(100%) invert(100%) sepia(14%) saturate(2%) hue-rotate(201deg) brightness(107%) contrast(101%); /*WHITE*/
}
/*same as yellow*/
.svg-orange {
    filter: brightness(0) saturate(100%) invert(100%) sepia(14%) saturate(2%) hue-rotate(201deg) brightness(107%) contrast(101%); /*WHITE*/
}

.svg-green {
    filter: brightness(0) saturate(100%) invert(100%) sepia(14%) saturate(2%) hue-rotate(201deg) brightness(107%) contrast(101%); /*WHITE*/
}
.svg-blue {
    filter: brightness(0) saturate(100%) invert(100%) sepia(14%) saturate(2%) hue-rotate(201deg) brightness(107%) contrast(101%); /*WHITE*/
}
.svg-pannel-top {
    filter: brightness(0) saturate(100%) invert(24%) sepia(14%) saturate(559%) hue-rotate(166deg) brightness(92%) contrast(88%);
}

.svg-menu-bg {
    filter: brightness(0) saturate(100%) invert(14%) sepia(7%) saturate(1302%) hue-rotate(169deg) brightness(95%) contrast(93%);
}


.svg-test-arrow {
    /*filter: brightness(0) saturate(100%) invert(23%) sepia(42%) saturate(191%) hue-rotate(166deg) brightness(92%) contrast(89%);*/
    filter: brightness(0) saturate(100%) invert(99%) sepia(0%) saturate(166%) hue-rotate(254deg) brightness(114%) contrast(76%);
}

.svg-red-actually {
    
    filter: brightness(0) saturate(100%) invert(40%) sepia(55%) saturate(1129%) hue-rotate(323deg) brightness(95%) contrast(83%);
}
.svg-green-actually {
   
    filter: brightness(0) saturate(100%) invert(75%) sepia(68%) saturate(5825%) hue-rotate(143deg) brightness(89%) contrast(102%);
}
.svg-yellow-actually {
    filter: brightness(0) saturate(100%) invert(47%) sepia(56%) saturate(636%) hue-rotate(356deg) brightness(98%) contrast(97%);
}
.svg-gray-actually {
    filter: brightness(0) saturate(100%) invert(52%) sepia(25%) saturate(163%) hue-rotate(176deg) brightness(84%) contrast(86%);
}
.svg-blue-actually {
    filter: brightness(0) saturate(100%) invert(31%) sepia(14%) saturate(2153%) hue-rotate(178deg) brightness(100%) contrast(91%);
}

.svg-body-font-color {
    filter: brightness(0) saturate(100%) invert(13%) sepia(6%) saturate(369%) hue-rotate(201deg) brightness(95%) contrast(84%);
}
.svg-font-opp {
    filter: brightness(0) saturate(100%) invert(99%) sepia(5%) saturate(343%) hue-rotate(59deg) brightness(113%) contrast(76%);
}


/*------------------------------------------------SIDEBAR ICONS----------------------------------------------------------*/

.menuGray {
    filter: brightness(0) saturate(100%) invert(99%) sepia(0%) saturate(166%) hue-rotate(254deg) brightness(114%) contrast(76%);
    height: 25px;
    width: 25px;
}

.colorBG-red {
    background-color: var(--Red) !important;
}

.colorBG-orange {
    background-color: var(--Yellow) !important;
}

.colorBG-yellow {
    background-color: var(--Yellow) !important;
}

.colorBG-green {
    background-color: var(--Green) !important;
}


.colorFG-red {
    color: var(--Red) !important;
}

.colorFG-orange {
    color: var(--Yellow) !important;
}

.colorFG-yellow {
    color: var(--Yellow) !important;
}

.colorFG-green {
    color: var(--Green) !important;
}




.has-error .form-control {
    border-color: var(--Red);
}

.kyle-svg-opacity{
    opacity:0.3 !important;
}

.kyle-svg-opacity-less {
    opacity: 0.6 !important;
}





.kyle-round-me {
    border-radius: var(--WidgetRadius) ;
    -webkit-border-radius: var(--WidgetRadius);
    -moz-border-radius: var(--WidgetRadius);
}

.kyle-round-me-less {
    border-radius: var(--WidgetRadius);
    -webkit-border-radius: var(--WidgetRadius);
    -moz-border-radius: var(--WidgetRadius);
}

.kyle-rounded-textbox {
    border-radius: var(--WidgetRadius);
    -webkit-border-radius: var(--WidgetRadius);
    -moz-border-radius: var(--WidgetRadius);
}

.ksmallmargin {
    border-radius: 8px !important;
    -webkit-border-radius: 8px;
    -moz-border-radius: 8px;
}

.btn-primary {
    border-radius: var(--ButtonRadius);
    -webkit-border-radius: var(--ButtonRadius);
    -moz-border-radius: var(--ButtonRadius);
}

.btn-warning {
    border-radius: var(--ButtonRadius);
    -webkit-border-radius: var(--ButtonRadius);
    -moz-border-radius: var(--ButtonRadius);
}

.btn-danger {
    border-radius: var(--ButtonRadius);
    -webkit-border-radius: var(--ButtonRadius);
    -moz-border-radius: var(--ButtonRadius);
}

.btn-white {
    border-radius: var(--ButtonRadius) ;
    -webkit-border-radius: var(--ButtonRadius) ;
    -moz-border-radius: var(--ButtonRadius) ;
}
.btn-st {
    border-radius: var(--ButtonRadius) ;
    -webkit-border-radius: var(--ButtonRadius) ;
    -moz-border-radius: var(--ButtonRadius) ;
}
.btn-do {
    border-radius: var(--ButtonRadius) ;
    -webkit-border-radius: var(--ButtonRadius) ;
    -moz-border-radius: var(--ButtonRadius) ;
}

.btn-white2 {
    border-radius: var(--ButtonRadius);
    -webkit-border-radius: var(--ButtonRadius);
    -moz-border-radius: var(--ButtonRadius) ;
}

.btn-info {
    border-radius: var(--ButtonRadius);
    -webkit-border-radius: var(--ButtonRadius) ;
    -moz-border-radius: var(--ButtonRadius) ;
}

.btn-gray {
    border-radius: var(--ButtonRadius) ;
    -webkit-border-radius: var(--ButtonRadius) ;
    -moz-border-radius: var(--ButtonRadius) ;
}

.input-group-addon {
    border-radius: var(--WidgetRadius) ;
    -webkit-border-radius: var(--WidgetRadius) ;
    -moz-border-radius: var(--WidgetRadius) ;
}

.btn-success {
    border-radius: var(--ButtonRadius) ;
    -webkit-border-radius: var(--ButtonRadius) ;
    -moz-border-radius: var(--ButtonRadius) ;
}

.btn-kyle-font {
    border: 0px solid !important;
}

.input-sm {
    border-radius: var(--WidgetRadius) ;
    -webkit-border-radius: var(--WidgetRadius);
    -moz-border-radius: var(--WidgetRadius) ;
}

.select2 {
    border-radius: var(--WidgetRadius) ;
    -webkit-border-radius: var(--WidgetRadius);
    -moz-border-radius: var(--WidgetRadius) ;
}

.select2-selection {
    border-radius: var(--WidgetRadius) ;
    -webkit-border-radius: var(--WidgetRadius) ;
    -moz-border-radius: var(--WidgetRadius) ;
}

.formcontrol {
    border-radius: var(--WidgetRadius);
    -webkit-border-radius: var(--WidgetRadius) ;
    -moz-border-radius: var(--WidgetRadius) ;
}

.form-control {
    border-radius: var(--WidgetRadius);
    -webkit-border-radius: var(--WidgetRadius); 
    -moz-border-radius: var(--WidgetRadius);
}

.btn-secondary {
    border-radius: var(--WidgetRadius);
    -webkit-border-radius: var(--WidgetRadius);
    -moz-border-radius: var(--WidgetRadius);
}

.panel-heading {
    border-top-left-radius: var(--WidgetRadius);
    border-top-right-radius: var(--WidgetRadius);
}

.panel {
    -webkit-border-radius: var(--WidgetRadius);
    -moz-border-radius: var(--WidgetRadius);
    border-radius: var(--WidgetRadius);
    /*box-shadow: var(--BoxShadowOut)*/
}

    .kyle-body-2 {
    border-radius: 8px 8px 8px 8px !important;
}




.bg-sidebar{
    background-color:var(--MainColorLILdarkerThanSidebar);
}



.btn.btn-warning {
    font-weight: 500;
    background: var(--Yellow);
    border-color: var(--Yellow);
}
.btn-warning:hover {
    color: #fff !important;
    background-color: #ed8d00;
    border-color: #ed8d00;
}
.btn-warning:focus {
    color: #fff !important;
    background-color: #ed8d00;
    border-color: #ed8d00;
}

.btn.btn-success {
    color: #fff;
    background: var(--Green);
    border-color: var(--Green);
}

    .btn.btn-success.active, .btn.btn-success:active, .btn.btn-success:focus, .btn.btn-success:hover, .open .dropdown-toggle.btn-success {
        background: #008484;
        border-color: #008a8a;
        color: #fff;
    }

.btn.btn-danger {
    color: #fff;
    background: var(--Red);
    border-color: Var(--Red);
}
.btn-danger:hover {
    color: #fff !important;
    background-color: #ab2c29;
    border-color: #ab2c29;
}


body {
    color: var(--BodyFontColor) !important;
    background: #717882 !important; /*  (blue gray - #7c848e)   OLD ONES: #737a82   #5f6367     */
}

/*THESE MUST embed BIGGER THAN thead OTHER ONES*/
.kyle-body {
    padding: 0px 20px;
    border-radius: 8px !important;
    -webkit-border-radius: var(--ButtonRadius);
    -moz-border-radius: var(--ButtonRadius);
    background-color: var(--BodyColor); /* OLD #e3e5e6 efefef f1f1f1 GOOD - #F0F3F5 a hair off of good #f0f3f4     current  #c6cdd0   */
}
.kyle-body-slim {
    padding: 0px 5px 5px 5px;
    border-radius: 8px !important;
    -webkit-border-radius: var(--ButtonRadius);
    -moz-border-radius: var(--ButtonRadius);
    background-color: var(--BodyColor); /* OLD #e3e5e6 efefef f1f1f1 GOOD - #F0F3F5 a hair off of good #f0f3f4     current  #c6cdd0   */
}




.panel {
    /*box-shadow: rgb(0 0 0 / 5%) 2px 2px 2px 2px, rgb(0 0 0 / 15%) 0px 1px 4px 2px;             OLD    rgb(0 0 0 / 40%) 0px 1px 2px 0px, rgb(0 0 0 / 40%) 0px 2px 6px 2px;*/
    background-color: var(--BodyColor) !important;
    /*border: 1px solid #c7c7c7;*/
    padding-left:0px;
    padding-right: 0px;
}


.widget {
    color: var(--FontOpp) !important;
}



.form-control {
    border: 1px solid var(--TextBoxBorder);
    color: var(--BodyFontColor) !important;
    background-color: #fff;
}



select.form-control, select[multiple].form-control {
    border-color: var(--TextBoxBorder);
}

select option {
    color:var(--BodyFontColor);
    background-color:#fff;
}

select2{
    border-color:var(--TextBoxBorder);
}



.hover-loader {
    color: var(--Gray);
    text-decoration: none !important;
    position: relative; /* Essential for positioning the ::after element */
    /* border: none; Remove default border if desired */

    cursor: pointer;
    text-decoration: none;
    overflow: hidden; /* Hide the line until it's ready to animate */
}

    .hover-loader::after {
        content: "";
        position: absolute;
        left: 0;
        bottom: 0;
        width: 0; /* Start with zero width */
        height: 1px; /* Thickness of the line */
        background-color: var(--Gray); /* Color of the line */
        transition: width .1s ease-in-out; /* Smooth animation */
    }

    .hover-loader:hover::after {
        width: 100%; /* Expand to full width on hover */
    }






.panel-default > .panel-heading + .panel-collapse .panel-body, .panel-footer {
    border-top: 0px !important;
}

hr {
    margin-top: 20px;
    margin-bottom: 20px;
    border: 0;
    border-top: 1px solid var(--BodyColorDarker);
}


/*remove the line under the header nav bar*/
.navbar {
    -webkit-box-shadow: 0 0 0px rgba(0, 0, 0, .0);
    box-shadow: 0 0 0px rgba(0, 0, 0, .0);
}

.page-header {
    display: none !important;
}

.breadcrumb {
    display: none !important;
}

.table-striped > tbody > tr:nth-child(odd) > td, .table-striped > tbody > tr:nth-child(odd) > th {
    background: /*#272e32f0*/ #f5f5f5;
}

.table {
    /*background: var(--BodyColor) !important;*/
    border-top: solid 0px var(--SidebarColor) ;
}

    .table > tbody > tr > td, .table > tbody > tr > th, .table > tfoot > tr > td, .table > tfoot > tr > th, .table > thead > tr > td, .table > thead > tr > th {
        background: var(--TableStripe);
    }

.kyle-font-mod1, .kyle-Summary {
    color: var(--BodyFontColor) !important;
    font-size: 13px !important;
    font-family: 'Open Sans',"Helvetica Neue",Helvetica,Arial,sans-serif;
}

.table > thead > tr > th {
    color: var(--BodyFontColor) !important;
}

.kyle-text {
    color: var(--BodyFontColor) !important;
    font-size: 13px !important
}

.btn.btn-do {
    color: var(--BodyFontColor);
    background: var(--DrawbarGreen);
    border-color: var(--buttonWhiteBorder);
}
.btn.btn-white {
    color:var(--BodyFontColor);
    background: var(--buttonWhiteColor);
    border-color: var(--buttonWhiteBorder);
}

.btn.btn-white2 {
    color: var(--BodyFontColor);
    background: var(--buttonWhiteColor);
    border-color: var(--buttonWhiteBorder);
}

.btn-white.active, .btn-white:active, .btn-white:focus, .btn-white:hover, .open .dropdown-toggle {
    background: #0000001a !important;
    border-color: #5858588a !important;
    cursor: pointer;
}



.Theme-List-Item:hover {
    background: #0000001a !important;
    border-color: #5858588a !important;
    cursor: pointer;
}





.btn-white2.active, .btn-white2:active, .btn-white2:focus, .btn-white2:hover, .open .dropdown-toggle {
    background: #5858588a !important;
    border-color: #5858588a !important;
}
.btn-do.active, .btn-do:active, .btn-do:focus, .btn-do:hover, .open .dropdown-toggle {
    background: #0000000f !important;
    border-color: #0064647a !important;
}

.btn.btn-primary {
    color: #fff;
    background: var(--Blue);
    border-color: var(--Blue);
}
.btn-primary:hover {
    color: #fff !important;
    background-color: #0869c1;
    border-color: #0869c1;
}



.kyle-table-mod1 {
    padding-top: 10px !important;
    border: 0px !important;
    color: var(--BodyFontColor) !important;
}

label {
    color: var(--BodyFontColor) !important;
}

h1 small, h2 small, h3 small, h4 small, h5 small, h6 small {
    color: var(--BodyFontColor) !important;
}

.Widget1 {
    background-color: var(--BodyColor) !important;
    color: var(--BodyFontColor) !important;
}

.Widget2 {
    background-color: var(--WidgetItemBackgroundColor) !important;
    color: #2e2e30 !important;
}

.stat-icon {
    padding-left: 0px !important;
    margin-bottom: 15px !important;
    z-index: 0 !important;
    position: absolute !important;
}




/*cancel out the wiget items background colors - DONT CHANGE THESE SINCE THE CLASS IS STILL IN THE CODE*/
.bg-red {
    background-color: var(--Red) !important;
   /* border: 1px solid var(--Red);*/
}

.bg-orange {
    background-color: var(--Yellow) !important;
    /*border: 1px solid var(--yellow);*/
}

.bg-green {
    background-color: var(--Green) !important;
    /*border: 1px solid var(--Green);*/
}

.bg-gray {
    background-color: var(--Gray) !important;
}

.bg-blue {
    background-color: var(--Blue) !important;
}

.bg-blue_lighter {
    background-color: var(--blue_lighter) !important;
}


a {
    color: var(--BodyFontColor);
    text-decoration: none; /*This needs to stay like this so that inspection matrix items can get underlined when needed*/
}



.sidebar .sub-menu > li > a {
    color: var(--MenuGray);
}

    .sidebar .sub-menu > li.active > a, .sidebar .sub-menu > li.active > a:focus, .sidebar .sub-menu > li.active > a:hover, .sidebar .sub-menu > li > a:focus, .sidebar .sub-menu > li > a:hover {
        color: #fff;        
    }


h1, h2, h3, h4, h5, h6 {
    font-weight: 500;
    color: var(--BodyFontColor) !important;
}


.kyle-title {
    font-size: 24px !important;
    color: var(--FontOpp) !important;
    background-color: var(--PannelHeaderColor) !important;
    text-decoration: none !important;
    padding: 3px 5px 3px 5px !important;
    border-top-left-radius: var(--WidgetRadius);
    border-top-right-radius: var(--WidgetRadius);
}

.sidebar-minify-btn {
    background: var(--SidebarColor);
    color: var(--BodyFontColor);
}


.stON.active {
    background: var(--Green) !important;
    border-color: var(--Green) !important;
    color: white;
}

.stOFF.active {
    background: var(--Red) !important;
    border-color: var(--Red) !important;
    color: white;
}

.stNCS.active {
    background: var(--Yellow) !important;
    border-color: var(--Yellow) !important;
    color: white;
}

.stCHOS.active {
    background: var(--Blue) !important;
    border-color: var(--Blue) !important;
    color: white;
}



.kyle-button-sm {
    background-color: var(--BodyColor);
    border-color: var(--Gray-3);
}



.todolist {
    background-color: #f7f7f7 !important;
}

    .todolist > li > a:focus, .todolist > li > a:hover {
        background: #272e321a;
        text-decoration: none;
    }

    .todolist > li > a {
        display: block;
        color: var(--BodyFontColor);
    }


.todolist-input {
    
    border-right: 1px solid #272e3200;
    
}

.todolist > li {
    border-bottom: 1px solid #000000a3;
}


/*------------------------------------------------HOS and Calendar Page----------------------------------------------------------*/
.Calendar-Panel-Color{
    background-color:var(--CalendarColor) !important;
}


.bootstrap-calendar .calendar .event a {
    display: block;
    border-radius: var(--WidgetRadius);
    background-color: #00acac !important;
    color: var(--BodyFontColor);
    margin: 0 auto;
}

.calendar a {
    color: gray;
}

.MAKECALENDARWHITE .table > tbody > tr > td, .table > tbody > tr > th, .table > tfoot > tr > td, .table > tfoot > tr > th, .table > thead > tr > td, .table > thead > tr > th {
    background: var(--CalendarColor);
}

.MAKECALENDARWHITE .bootstrap-calendar .calendar .event {
    background-color: var(--CalendarColor);
}


.panel-heading {
    background: var(--PannelHeaderColor); /*var(--WidgetItemBackgroundColor);*/
}
.panel-heading-bg-color-hidden{
    color:var(--BodyFontColor) !important;
    background-color:#ffffff00 !important;
}

.bootstrap-calendar .calendar {
    background: var(--CalendarColor);
    
}
    .bootstrap-calendar .calendar .event, .bootstrap-calendar .calendar .event:focus, .bootstrap-calendar .calendar .event:hover {
        background: var(--CalendarColor);
        text-align: center;
    }

    .bootstrap-calendar .calendar .week_days td {
        background: var(--CalendarColor);
        color: var(--BodyFontColor);
    }
        

.HOSRailroadSelector {
    border-radius: 8px 0px 0px 8px !important;
}

.HOSRailroadSelectorButton {
    border-color: rgb(204, 208, 212);
    border-radius: 0px 8px 8px 0px !important;
    border:var(--TextBoxBorder);
    background-color: var(--TextBoxButtonColor);
    
}

.dropdown-menu {
    
    background-color: var(--CalendarColor) !important;
   
}

.buttonIconSize{
    width:18px;
}






.select2-container--default .select2-selection--multiple .select2-selection__choice {
    background-color: var(--TextBoxBackgroundColor);
    border: 1px solid #5a5a5a;
    border-radius: var(--WidgetRadius);
    padding-left: 10px;
    padding-right: 10px;
    padding-top: 3px;
    padding-bottom: 3px;
}


.KserviceType {
    border-radius:10px !important;
    border: 2px solid var(--TextBoxBorder) !important; 
    background-color: #fff !important; 
    margin-top:0px !important
}

.input-group-addon {
    background: var(--TextBoxButtonColor);
    border: var(--TextBoxButtonColor);
}

.modal-content {
    
    background-color: #fff;
}
.defectOptionRow {
    border: 1px solid #545454;
    border-radius: var(--ButtonRadius);
    background: var(--WidgetItemBackgroundColor);
    
    
}

    .defectOptionRow:hover {
        background-color: #2222224a;
    }

.select2-container--default .select2-selection--single {
    background-color: var(--TextBoxBackgroundColor);
    color: var(--BodyFontColor);
    border: 1px solid #fff;
    border-radius: var(--ButtonRadius);
}

.select2-container--default.select2-container--disabled .select2-selection--single {
    color:var(--BodyFontColor);
    background-color: var(--BodyColor);
    
}
.select2-container--default .select2-selection--single .select2-selection__rendered {
    color:var(--BodyFontColor);
    
}
.select2-dropdown {
    color: var(--BodyFontColor);
    background-color: var(--TextBoxBackgroundColor);
    border: 1px solid #aaa;
    border-radius: var(--ButtonRadius);
    box-sizing: border-box;
    display: block;
    position: absolute;
    left: -100000px;
    width: 100% 0px;
    z-index: 1051;
}

.select2-container--default .select2-search--dropdown .select2-search__field {
    border: 1px solid #aaa;
    color: var(--BodyFontColor);
    background-color: var(--TextBoxBackgroundColor);
}

.select2-container--default .select2-results > .select2-results__options {
    max-height: 200px;
    overflow-y: auto;
    color: var(--BodyFontColor);
    background-color: var(--TextBoxBackgroundColor);
}

.select2-container--default .select2-results__group {
    color: var(--BodyFontColor);
    background-color: var(--TextBoxBackgroundColor);
}


.select2-container--default .select2-results__option[aria-selected=true] {
    background-color: #d9d9d9;
}

.select2-container--default .select2-results__option--highlighted[aria-selected] {
    background: #365992 !important;
}
.select2-container .select2-search--inline {
    float: left;
    background-color : #33393c00;
}

.select2-container--default .select2-selection--multiple .select2-selection__rendered {
    background-color: #33393c00;
}

thead th {
    background-color: #fff;
    color:var(--BodyFontColor);
}

.datepicker table tr td, .datepicker table tr th {
    color : var(--BodyFontColor);
    background-color: var(--CalendarColor);
}
    .datepicker table tr td.day:hover, .datepicker table tr td.day.focused {
        background: #d9d9d9;
        cursor: pointer;
    }


    .datepicker table tr td.range, .datepicker table tr td.range:hover, .datepicker table tr td.range.disabled, .datepicker table tr td.range.disabled:hover {
        background: #e5e5e5;
        
        border-radius: var(--ButtonRadius);
    }

.selection {
    background-color : #33393c00;
}

.custom-file-upload {
    
    background: var(--SidebarColor);
    
    border-radius: var(--ButtonRadius);
}

.datepicker thead tr:first-child th:hover, .datepicker tfoot tr th:hover {
    background: #e5e5e5;
}

input[type="file"]::file-selector-button {
    background-color: #fff; /* Change background color */
    color: var(--BodyFontColor); /* Change text color */
    padding-top:2px; /* Adjust padding */
    border: 1px solid #fff; /* Remove default border */
    border-radius: var(--ButtonRadius); /* Add rounded corners */
    font-family: sans-serif; /* Change font family */
    font-weight: bold; /* Make text bold */
    cursor: pointer; /* Change cursor on hover */
    transition: background-color 0.3s ease; /* Smooth transition on hover */
}

.TMIPntRow{
    margin-bottom:80px !important;
}
/*DEFECTS ROW IN TMI*/
.TMIDRR {
    background-color: var(--LightGreen) !important;
    color: var(--BodyFontColor) !important;
}
/*REPAIR ROW IN TMI*/
.TMIDR {
    background-color: var(--LightYellow) !important;
    color: var(--BodyFontColor) !important;
}


.bootstrap-timepicker-widget table td a {
   
    color: var(--BodyFontColor);
}

    .bootstrap-timepicker-widget table td a:focus, .bootstrap-timepicker-widget table td a:hover {
        background: #989898 !important;
    }
/* ###############################################################################    OLD STUFF BELOW    ############################################################################*/
/* ###############################################################################    OLD STUFF BELOW    ############################################################################*/
/* ###############################################################################    OLD STUFF BELOW    ############################################################################*/
/* ###############################################################################    OLD STUFF BELOW    ############################################################################*/
.kyle-td {
    border-top: 0px solid #e2e7eb !important;
    border-bottom: 0px solid #ffffff !important;
    vertical-align: middle !important;
    padding-top: 7px !important;
    padding-bottom: 7px !important;
    height: 20px !important;
    color: var(--BodyFontColor);
     
}

/*------------------------------------------------Stuff Jeremy did I think----------------------------------------------------------*/
.sidebar .nav > li > a {
    padding: 8px 20px;
    line-height: 30px;
    color: #a8acb1;
    font-size: 1.2em;
}

@media (max-width: 767px) {
    .page-header-fixed {
        padding-top: 55px;
    }
}


.KG {
    padding: 2px 4px 5px 4px !important;
    border-radius: 0px 0px 0px 0px;
    background-color: var(--bodyColor) !important;
    font-size: 13px;
    color: var(--BodyFontColor);
}










.sidebar .sub-menu:before {
    background: var(--MainColorLILdarkerThanSidebar) !important;
}

.sidebar .nav > li.expand > a, .sidebar .nav > li > a:focus, .sidebar .nav > li > a:hover {
    background: #1a1e20 !important;
    color: var(--FontOpp)
}

.sidebar .sub-menu {
    background: var(--MainColorLILdarkerThanSidebar) !important;
}






.table > tbody > tr.danger > td, .table > tbody > tr.danger > th, .table > tbody > tr > td.danger, .table > tbody > tr > th.danger, .table > tfoot > tr.danger > td, .table > tfoot > tr.danger > th, .table > tfoot > tr > td.danger, .table > tfoot > tr > th.danger, .table > thead > tr.danger > td, .table > thead > tr.danger > th, .table > thead > tr > td.danger, .table > thead > tr > th.danger {
    background: var(--ListOrange) !important;
    
    border-color: var(--Gray-3) !important;
}






.datetimepicker table {
    
    border: 1px solid #fff;
}










.datetimepicker thead tr:first-child th:hover, .datetimepicker tfoot tr:first-child th:hover {
    background: var(--MainColorLILdarkerThanSidebar);
}

.datetimepicker table tr td.day:hover {
    background: var(--MainColorLILdarkerThanSidebar);
    cursor: pointer;
}

.datetimepicker table tr td span:hover {
    background: var(--MainColorLILdarkerThanSidebar);
    cursor: pointer;
}





.kyle-body-content {
    padding: 5px !important;
}


.kyleBackgroundBlue {
    background-color: var(--SidebarColor);
}

.SWAP-FONT-COLOR {
    color: var(--White) !important;
}

@media (min-width: 600px) {
    .mobile-K {
        display: inline-block;
    }
}


    




.btn.focus, .btn:focus, .btn:hover {
    color: var(--BodyFontColor);
    text-decoration: none;
}




.dbRed {
    color: var(--Red) !important;
}

.dbYellow {
    color: var(--Yellow) !important;
}

.dbGreen {
    color: var(--Green) !important;
}

.dbBlue {
    color: var(--Blue) !important;
}

.dbbRed {
    background-color: var(--Red) !important;
}

.dbWhite {
    color: var(--White) !important;
}

.dbDarkTabs {
    color: var(--DarkTabs) !important;
}

.dbbYellow {
    background-color: var(--Yellow) !important;
}

.dbbGreen {
    background-color: var(--Green) !important;
}

.dbbBlue {
    background-color: var(--Blue) !important;
}

.dbbSidebar {
    background-color: var(--SidebarColor) !important;
}

.dbbMiddleBlue {
    background-color: var(--BodyColorDarker) !important;
}

.dbbDarkTabs {
    background-color: var(--DarkTabs) !important;
}

.sidebar, .sidebar-bg {
    background: var(--MainColorLILdarkerThanSidebar) !important;
}

.sidebar-Icons {
    filter: brightness(0) saturate(100%) invert(76%) sepia(4%) saturate(352%) hue-rotate(172deg) brightness(91%) contrast(87%);
}


.bg-listk-red {
    background: var(--ListRed) !important;
    border-bottom: 1px solid var(--Gray-4) !important;
}

.bg-listk-orange {
    background: var(--ListOrange) !important;
    border-bottom: 1px solid var(--Gray-3) !important;
}
.bg-listk-yellow {
    background: var(--ListOrange) !important;
    border-bottom: 1px solid var(--Gray-3) !important;
}

.bg-listk-green {
    background: var(--ListGreen) !important;
    border-bottom: 1px solid var(--Gray-3) !important;
}

.bg-listk-Red {
    background: var(--ListRed) !important;
    border-bottom: 1px solid var(--Gray-4) !important;
}

.bg-listk-Orange {
    background: var(--ListOrange) !important;
    border-bottom: 1px solid var(--Gray-3) !important;
}
.bg-listk-Yellow {
    background: var(--ListOrange) !important;
    border-bottom: 1px solid var(--Gray-3) !important;
}

.bg-listk-Green {
    background: var(--ListGreen) !important;
    border-bottom: 1px solid var(--Gray-3) !important;
}

/*Data Table expand collapse and other datatable stuff*/

table .dataTable.dtr-inline.collapsed > tbody > tr > td.child, table.dataTable.dtr-inline.collapsed > tbody > tr > th.child, table.dataTable.dtr-inline.collapsed > tbody > tr > td.dataTables_empty {
    border-bottom: 2px solid var(--LightGreen) !important;
}

.dataTables_wrapper table.dataTable.dtr-inline.collapsed > tbody > tr.parent > td:first-child:before, .dataTables_wrapper table.dataTable.dtr-inline.collapsed > tbody > tr.parent > th:first-child:before {
    background: var(--LightGreen);
}




/*@media (min-width:1400px) {
    .kyle-Container {
        padding-left: 20px;
        padding-right: 20px;
    }
}*/
/*HOS edits*/
/*.hosTab {
    border-radius: 5px 5px 0px 0px !important;
    margin-left: 10px !important;
    background-color: var(--bodyColor) !important;
    padding: 5px 10px 5px 10px !important;
    color: #4b5661 !important;
    font:bold !important
}*/
.hosTab {
    border-radius: var(--rounded) !important;
    margin: 2px 5px 2px 5px !important;
    background-color: var(--bodyColor) !important;
    padding: 5px 10px 5px 10px !important;
    color: #4b5661 !important;
    font: bold !important
}




/*.table > tbody > tr > td, .table > tbody > tr > th, .table > tfoot > tr > td, .table > tfoot > tr > th, .table > thead > tr > td, .table > thead > tr > th {
    border-bottom: 0px !important;
}*/

.rounded-calendar {
    border: 1px solid #717882;
    border-radius: var(--ButtonRadius);
}


.no-hover > * {
    display: none !important;
}

.kyle-hidden-tooltip {
    background-color: rgba(0,0,0,.0);
}

.khover:hover,
.khover:active,
.khover:focus {
    box-shadow: inset 0 0 100px 100px rgba(2, 0, 0, 0.1);
    cursor: pointer;
}



.koverflowfortable {
    overflow: hidden;
    white-space: nowrap;
    text-overflow: ellipsis;
    padding-left: 5px;
    padding-right: 5px;
}

.stats-info {
    overflow: hidden;
    white-space: nowrap;
    text-overflow: ellipsis;
    z-index: 2;
    position: sticky;
    padding-left: 5px ;
    padding-top: 5px ;
    padding-bottom: 5px ;
}

.ksmallpadding {
    padding: 6px 4px 4px 4px;
}

.ksmallmargin {
    margin-bottom: 0px;
    margin-left: 0px;
    margin-right: 0px;
    border-radius: var(--ButtonRadius) !important;
    padding: 7px !important;
    box-shadow: var(--BoxShadow);
    border-left: 0px solid #fff;
}

/*@media (max-width: 768px) {
    .klistreplacement-textcenter {
        padding-top: 0px;
    }
}*/



.page-header {
    color: #E2E7EB !important;
    margin: 0 0 12px !important;
}

.content {
    padding: 12px 12px 12px 12px !important;
}

.breadcrumb {
    padding-top: 5px;
}

    .breadcrumb > .active {
        color: #E2E7EB;
    }

.a {
    color: #E2E7EB !important;
}

    .a :hover {
        color: #fff !important;
    }


/*The dashboard pannels _smmaintianers etc*/

.panel-default > .panel-heading {
    background: var(--PannelHeaderColor); /*Dont mark as important*/
}

.kyle-hide {
    background-color: rgba(255, 255, 255, .0) !important;
}



.kyle-title :hover {
    text-decoration: none !important;
}


a :hover, a:focus {
    text-decoration: none !important;
    cursor: pointer !important;
}

/*a:hover  {
        text-decoration: none !important;
        cursor: pointer !important;
    }*/



.kyle-rounded-textbox {
    box-sizing: border-box;
    -webkit-box-sizing: border-box;
    -moz-box-sizing: border-box;
    border: 2px solid var(--TextBoxBorder);
    padding: 5px;
    padding-left: 15px;
    outline: none;
    background-color: var(--TextBoxBackgroundColor) !important;
}

.kyle-rounded-table {
    border: 1px solid DarkOrange;
    border-radius: var(--ButtonRadius);
    border-spacing: 0;
}





/*Change button text on default button to black font color*/
.btn.btn-gray {
    color: #f0f3f4;
    background: #879094;
    border-color: #879094;
}

.btn.btn-kblue {
    color: #f0f3f4;
    background: var(--Blue) !important;
    border-color: var(--Blue) !important;
    border-radius: var(--ButtonRadius) !important;
}

hr {
    height: 1px;
    padding: 0px;
    margin: 5px;
    color: #515E6A
}



.navbar-brand {
    margin-right: 0px;
    padding: 5px 5px 5px 15px; /*top right bottom left*/
    font-weight: 100;
    font-size: 18px;
    line-height: 30px;
}

.kyle-fit {
    max-height: 100%;
}

/*Sidebar CSS*/

.sidebar .nav > li > a {
    color: var(--MenuGray);
}





input[type=checkbox], input[type=radio] {
    margin: 10px 0 0 !important;
    transform: scale(1.3) !important;
    background-color: black !important;
}


.table > thead > tr > th {
    border-radius: var(--ButtonRadius);
}

.kyle-table {
    border-radius: var(--ButtonRadius) !important;
}


.kyle-col-pad-3 {
    padding-left: 3px !important;
    padding-right: 3px !important;
}

.Kyle-divider {
    height: 1px !important;
    background-color: #fff !important; /*#3B444c !important;*/
    width: 98% !important;
    align-content: center !important;
    margin-top: 7px !important;
    margin-bottom: 15px !important;
    left: 1% !important;
}






/* -------------------------------------------------------------------This CSS is used by the whole site------------------------------------------------------------*/


/* -------------------------------------------------------------------Maintainers buttons formating------------------------------------------------------------*/




.Maintainer-button-holder {
    padding: 4px 4px 4px 4px;
    align-content: center;
    text-align: center;
    background: #fff;
}

.Maintainer-button {
    padding: 8px 4px 4px 4px;
    align-content: center;
    text-align: left;
    background: #A8ACB1;
    color: #000;
    text-overflow: ellipsis; /*not working*/
}

.Maintainer-button-bottom {
    padding: 4px 4px 4px 4px;
    align-content: center;
    text-align: left;
    background: #2D353C;
    color: #fff;
}

.maintainer-button-icon {
    text-align: right;
}

.Maintainer-button:hover,
Maintainer-button:focus,
Maintainer-button:active,
Maintainer-button.active,
.open .dropdown-toggleMaintainer-button {
    background: #2D353C;
    color: #fff;
}


/*------------------------------------------------Body for any page using Site.css----------------------------------------------------------*/
body {
    color: #242A30; /*text color*/
    background: #A8ACB1;
}

.bg-white {
    background: #A8ACB1 !important;
}

/*------------------------------------------------HOS heading with the green buttons----------------------------------------------------------*/
.panel-heading {
    padding: 10px 20px 10px 20px;
}







/*------------------------------------------------Location list format----------------------------------------------------------*/


/*Locations list formating*/
.table > tbody > tr > td, .table > tbody > tr > th, .table > tfoot > tr > td, .table > tfoot > tr > th, .table > thead > tr > td, .table > thead > tr > th {
    border-color: #A8ACB1;
}

.table > tbody > tr > td, .table > tbody > tr > th, .table > tfoot > tr > td, .table > tfoot > tr > th, .table > thead > tr > td, .table > thead > tr > th {
    border-top: 2px solid #A8ACB100;
}

/*  Navigations modifications  */
.navbar.navbar-default {
    background: var(--MainColorLILdarkerThanSidebar) !important;
}

.navbar-default .navbar-toggle .icon-bar {
    background: #00ACAC;
}

/*------------------------------------------------Login text box color----------------------------------------------------------*/



input:-webkit-autofill, textarea:-webkit-autofill, select:-webkit-autofill {
    -webkit-box-shadow: inset 0 0 0px 9999px whitesmoke !important;
}


/*------------------------------------------------Login hyperlink on hover----------------------------------------------------------*/

.loginHyperlink a:hover {
    color: #bbbbbb;
    text-decoration: underline;
}

.select2-container.form-control .select2-choice,
.select2-container.form-control .select2-choice {
    width: 100% !important;
}


button, input, select, textarea {
    font-family: inherit;
    font-size: inherit;
    line-height: inherit;
    color: var(--bodyFontcolor);
    Background: #ffffff00; /*INVIS FOR NOW    var(--WidgetItemBackgroundColor) !important;*/
    border-radius: var(--ButtonRadius);
}


select {
    -webkit-appearance: none;
    -moz-appearance: none;
    background: url(/assets/img/Kyle_Dropdown_firefox.png) right / 17px no-repeat #fff !important;
    padding-right: 30px;
    background-color: var(--WidgetItemBackgroundColor);
    color: var(--BodyFontColor) !important;
    border-radius: var(--ButtonRadius);
}



.select2-container--default .select2-selection--multiple {
    background-color: var(--TextBoxBackgroundColor) !important;
    border: 1px solid var(--TextBoxBorder);
    cursor: text;
    color: var(--BodyFontColor) !important;
    border-radius: var(--ButtonRadius);
}

.input-sm {
    text-align: left !important;
    padding-bottom: 2px !important;
    padding-top: 2px !important;
}











/*crossing detail table style that can also be used on table stripped like in maintenance history*/
.kyle-td-mod1 {
    padding: 1px 10px 0px 10px !important;
    /*border: 0px !important;*/
}

.kyle-td-mod2 {
    padding: 5px 10px 5px 10px !important;
    border: 0px !important;
}





/*i also changed this in the ajax tables css cause these were not working on all views*/

.table > thead > tr > th {
    border-bottom: 0px solid #e2e7eb !important;
}

/*.table > tbody > tr > td, .table > tbody > tr > th, .table > tfoot > tr > td, .table > tfoot > tr > th, .table > thead > tr > td, .table > thead > tr > th {
    border-bottom: 0px solid #cccccc !important;
}*/

table.dataTable > tbody > tr.child ul li {
    border-bottom: 0px solid #efefef !important;
}


/* CUSTOM SCROLL BAR STUFF */

/* width */
::-webkit-scrollbar {
    width: 12px;
}

/* Track */
::-webkit-scrollbar-track {
    background: var(--BodyColor);
}

/* Handle */
::-webkit-scrollbar-thumb {
    background: #5252528a !important;
}

    /* Handle on hover */
    ::-webkit-scrollbar-thumb:hover {
        background: #5252528a;
    }

/* END CUSTOM SCROLL BAR STUFF */


.spacer-location-list {
    height: 2px !important;
    background-color: rgba(0, 0, 0, .0) !important;
}





.select2-dropdown {
    border-radius: var(--ButtonRadius); /*this keeps the dropdown box looking normal dont change*/
    border: 1px solid #d4dadc !important;
    color: #4b5661;
    font-size: 13px !important;
}

.datepicker.dropdown-menu {
    border-radius: var(--ButtonRadius) !important;
}

.bootstrap-timepicker-widget.dropdown-menu.open {
    border-radius: var(--ButtonRadius) !important;
}
/* attribution and scale controls  GET RID OF THE ATTRIBUTIONS*/
.leaflet-container .leaflet-control-attribution, .leaflet-container .leaflet-control-scale {
    font-size: 0px !important;
}

.progress {
    -webkit-box-shadow: none;
    box-shadow: rgba(0,0,0,0.2) 5px 5px 10px inset !important;
    background: var(--BodyColor);
    border-radius: var(--ButtonRadius) !important;
    margin-bottom: 0px !important;
    height: 20px !important;
    color: var(--FontOpp);
}

.progress-small {
    height: 4px !important;
}





.progress-bar {
    background: #4b5661;
    border: 0px solid #4b5661;
    box-shadow: 0px 4px 0px inset rgba(255,255,255,0.1);
    /*box-shadow: 3px 3px 3px #282f34 inset !important;*/
    border-radius: var(--ButtonRadius);
    height: 20px !important;
}

.progress-small {
    height: 4px !important;
}

.progress-bar-small {
    height: 4px !important;
}

/* 5px padding for td and lots of other things going to use this in many places when space is a concern*/


.kyle-padding-sides-small {
    padding-right: 5px !important;
    padding-left: 5px !important;
}

.kyle-box-shadow {
   /* box-shadow: 0px 3px 0px inset rgba(255,255,255,0.8) !important;*/
}


.kyle-iframe-container {
    position: relative;
    overflow: hidden;
    width: 100%;
    padding-top: 56.25%; /* 16:9 Aspect Ratio (divide 9 by 16 = 0.5625)  56.25%  */
}

/* Then style the iframe to fit in the container div with full height and width */
.kyle-responsive-iframe {
    position: absolute;
    top: 0;
    left: 0;
    bottom: 0;
    right: 0;
    width: 100%;
    height: 100%;
}


.btn-small {
    padding: 7px 10px 7px 10px !important;
    border: 0px;
}


.input-daterange .input-group-addon {
    background: #ffffff00 !important;
}


/*track inspetions attachment table formatting*/

.kyle-attachment-table {
    border: solid 1px var(--Invisible);
    border-radius: var(--rounded);
    margin-bottom: 5px !important;
    overflow: hidden !important;
}


    .kyle-attachment-table > tbody > tr > td, .table > tbody > tr > th, .table > tfoot > tr > td, .table > tfoot > tr > th, .table > thead > tr > td, .table > thead > tr > th {
        border-left: solid 0px var(--ContentBackground);
        border-right: solid 0px var(--ContentBackground);
        border-bottom: solid 0px var(--ContentBackground);
        border-top: solid 1px var(--bodyColor);
        top: -2px !important;
    }

    .kyle-attachment-table > tbody > tr {
        overflow-wrap: anywhere !important;
    }

.kyle-TrackInspectionTable > tbody > tr > td, .table > tbody > tr > th, .table > tfoot > tr > td, .table > tfoot > tr > th, .table > thead > tr > td, .table > thead > tr > th {
    padding: 5px !important;
}

/*This was to hide the no file chosen but I need to come up with a better way of doing that making it ivis seems to do the trick*/

input[type='file'] {
    color: var(--Invisible) !important;
}

/*Top of Edit Assigned track inspections to be used later in a different places*/

.kyle-Summary {
    /*overflow: hidden !important;
    white-space: nowrap !important;
    text-overflow: ellipsis !important;*/
    padding: 0px !important
}

.kyle-ea-items {
    /*margin:2px !important;*/
    padding: 5px !important;
    border: 2px solid var(--Invisible) !important;
    border-radius: var(--rounded) !important;
    background-color: var(--fullWhite) !important;
}

.kyle-ea-container {
    /*margin:2px !important;*/
    padding: 1px !important;
    border: 2px solid var(--Invisible) !important;
    border-radius: var(--rounded) !important;
    background-color: var(--Invisible) !important;
}

.table > thead > tr > th {
    border-color: #e2e7eb;
    padding: 10px 15px;
    background: #fff0;
}

option:disabled {
    /*color: #00ACAC !important;*/
    background-color: #e3e3e3 !important;
}

.k_unselectable {
    -webkit-touch-callout: none;
    -webkit-user-select: none;
    
    -moz-user-select: none;
    -ms-user-select: none;
    user-select: none;
}

.k-darkPannel {
    background-color: var(--bodyColor);
    padding: 6px !important;
    margin-bottom: 10px !important;
}

/*/TrackMgmtInspections/Inspect*/

table.kUninspectedMP td {
    padding: 0px !important;
}


/*------------------------------------------------THE CODE BELOW COULD BE USED TO MAKE A ROW CONTINUE BELOW TO STACK THINGS IN A ROW----------------------------------------------------------*/
.ktableSmall {
    display: block;
}

    .ktableSmall tr {
    }

        .ktableSmall tr td {
            display: inline-block;
            padding: 3px !important;
        }

.ktmLabel {
    font-size: 11px !important;
}

.kuiName {
    width: 400px !important;
    max-width: 500px !important;
    font-weight: 900 !important;
    text-overflow: ellipsis !important;
}

.kuiMP {
    width: 282px !important;
    font-style: italic !important;
    color: var(--Red) !important;
}

/*------------------------------------------------make text boxes scrollable ----------------------------------------------------------*/
.scrollable-text-box {
    height: 110px; /* Set the desired height of the text box */
    width: 100%; /* Set the desired width (adjust as needed) */
    border: 1px solid #ccc; /* Optional: Add a border for visual clarity */
    overflow: hidden; /* Adds scrollbars only when necessary */
    padding: 3px; /* Optional: Add padding inside the box */
}

/*------------------------------------------------Track segments and track assets table formating----------------------------------------------------------*/
/*.ktableSmall {
    padding: 2px !important;
    
}

    .ktableSmall tr {
    }

        
    .ktableSmall > tbody > tr > td {
        padding: 1px !important;
    }
*/

/*------------------------------------------------Responsive table css----------------------------------------------------------*/



/*------------------------------------------------END Responsive table css----------------------------------------------------------*/



/*------------------------------------------------TRACK MGMT STYLING----------------------------------------------------------*/
/*Ellipsis for text */
.clipped {
    overflow: hidden !important;
    white-space: nowrap !important;
    text-overflow: ellipsis !important;
}


/*Custom file upload button in blue */
/*input[type="file"] {
        display: none !important;
    }*/
.custom-file-upload {
    border: 1px solid var(--TextBoxBorder);
    display: inline-block;
    padding: 4px 7px;
    cursor: pointer;
    font-weight: 100;
    color: #fff;
    background: #2c343800; /*invis*/
    border-color: var(--TextBoxBorder);
    border-radius: var(--ButtonRadius);
}

/*invis on hover*/
    .custom-file-upload:hover {
        background: #76767600;
        border-color: var(--TextBoxBorder);
    }


/*DATA TABLE EXPAND BUTTON These things change the new blue guy into a gray blue box*/
table.dataTable.dtr-inline.collapsed > tbody > tr > td.dtr-control:before, table.dataTable.dtr-inline.collapsed > tbody > tr > th.dtr-control:before {
    background: var(--Green) !important;
    border-radius: var(--WidgetRadius);
    top: 14px !important;
    left: 8px;
    box-shadow: none;
}

table.dataTable.dtr-inline.collapsed > tbody > tr.parent > td.dtr-control:before, table.dataTable.dtr-inline.collapsed > tbody > tr.parent > th.dtr-control:before {
    content: "-";
    background-color: var(--SidebarColor) !important;
}

table.dataTable.dtr-inline.collapsed > tbody > tr > td.dtr-control:before, table.dataTable.dtr-inline.collapsed > tbody > tr > th.dtr-control:before {
    border: 0em solid white !important;
}

.caTDAndRowSize {
    height: 32px !important;
}



.kButtonPlacement {
    padding-bottom: 2px !important;
    height:18px;
}


.Kyle-Overflow-ellipsis {
    text-overflow: ellipsis !important;
    overflow: hidden
}


/*loading overlay stored here to hopefully refresh browser cache*/

.SpinImage {
    position: absolute;
    top: 50%;
    left: 50%;
    width: 120px;
    height: 120px;
    margin: -60px 0 0 -60px;
    -webkit-animation: spin 4s linear infinite;
    -moz-animation: spin 4s linear infinite;
    animation: spin 4s linear infinite;
}

.NoSpinImage {
    position: absolute;
    top: 50%;
    left: 50%;
    width: 120px;
    height: 120px;
    margin: -60px 0 0 -60px;
}

@-moz-keyframes spin {
    100% {
        -moz-transform: rotate(360deg);
    }
}

@-webkit-keyframes spin {
    100% {
        -webkit-transform: rotate(360deg);
    }
}

@keyframes spin {
    100% {
        -webkit-transform: rotate(360deg);
        transform: rotate(360deg);
    }
}

/*loading overlay stored here to hopefully refresh browser cache*/



.select2-container--default .select2-selection--single {
    background-color: #fff;
    border: 1px solid var(--TextBoxBorder);
    border-radius: var(--ButtonRadius);
}






.pagination > li > a, .pagination > li > span {
    background-color: #f1f1f1;
    border-color: #9a9a9a;
}
.pagination > li > a {
    color: var(--BodyFontColor);
   
}

    .pager li > a:focus, .pager li > a:hover, .pager li > span:focus, .pager li > span:hover, .pagination > li > a:focus, .pagination > li > a:hover {
        color: #ffffff;
        background: #626262;
        border-color: #626262;
    }

.pagination > .active > a, .pagination > .active > a:focus, .pagination > .active > a:hover, .pagination > .active > span, .pagination > .active > span:focus, .pagination > .active > span:hover {
    background: #868686 !important;
    border-color: #868686 !important;
}

/*---------------------------------------------------------------------------------------------------DASH TOP ---------------------------------------------------------------------------------------------------*/




.DashTopSum {
    border-left: 2px solid #443f3f;
    border-bottom: 0px solid #443f3f;
    height: 80px;
    max-height: 80px;
}


.DashTopSum {
    border-left: 6px solid #242424ba !important;    
    border-radius: 0px !important;
    height: 80px;
    max-height: 80px;
    box-shadow: var(--BoxShadow);
}

.DashTopSumRed {
    border-left: 6px solid var(--Red) !important;
    border-radius: 0px !important;
    height: 80px;
    max-height: 80px;
    box-shadow: var(--BoxShadow);
}

.DashTopSumYellow {
    border-left: 6px solid var(--Yellow) !important;
    border-radius: 0px !important;
    height: 80px;
    max-height: 80px;
    box-shadow: var(--BoxShadow);
}


.DashTopSumInfo {
    padding-left: 15px !important;
    color: var(--FontOpp) !important;
}

.DashTopBoxStyle {
    padding: 10px 5px 5px 5px !important;
}

.DashTopIcon {
    padding-right: 7px;
}

.DashTopBoxStyle {
    padding: 8px !important;
}



/*------------------------JS Modal/Popup STYLE----------------------*/

.popup-hidden {
    display: none;
}

.popup-visible {
    display: block;
}

#kModal80 {
    position: fixed;
    top: 10%;
    left: 10%;
    width: 80vw; /* 50% of viewport width */
    height: 80vh;
    background: var(--BodyColor);
    padding: 20px;
    border: 2px solid var(--Yellow);
    border-radius: var(--WidgetRadius);
    z-index: 10000;
    font-size: 14px;
    color:var(--BodyFontColor);
}



.close-button {
    
    float: right;
    font-size: 28px;
    font-weight: bold;
    cursor: pointer;
}

/*----------------------------------------------- 1 off items with their own classes--------------------------------------------*/
.Test-Form-Title{
    color:#fff !important;
}

.input-group .form-control:last-child, .input-group-addon:last-child, .input-group-btn:first-child > .btn-group:not(:first-child) > .btn, .input-group-btn:first-child > .btn:not(:first-child), .input-group-btn:last-child > .btn, .input-group-btn:last-child > .btn-group > .btn, .input-group-btn:last-child > .dropdown-toggle {
    border-radius: 8px;
}

    .input-group .form-control:first-child, .input-group-addon:first-child, .input-group-btn:first-child > .btn, .input-group-btn:first-child > .btn-group > .btn, .input-group-btn:first-child > .dropdown-toggle, .input-group-btn:last-child > .btn-group:not(:last-child) > .btn, .input-group-btn:last-child > .btn:not(:last-child):not(.dropdown-toggle) {
        border-radius: 8px;
    }

.panel-inverse > .panel-heading {
    background: #272e32;
}

.bodyBackgroundColorChange{
    background:var(--TrueWhite) !important;
}

.Calendar-Custom .table > tbody > tr > td {
    background: #ffffff00 !important;
}


.Excess-HOS-Background {
    background-color: #ffcccc !important; /* light red */
}