:root {
    --Red: #ff5b57; /*Red  #CC4946 */
    --Yellow: #C47D15; /*Yellow */
    --Green: #00ACAC; /*Green   008A8A*/
    --LightGreen: #00ACAC;
    --Gray: #a2a2a2;
    --Blue: #4b5661;
    --lightBlue: #404a52;
    --otherLightBlue: #51565e;
    --White: #e4e4e4 !important;
    --GL: /assets/plugins/leaflet/images/marker-icon-green.png; /*For the Map*/
    --RL: /assets/plugins/leaflet/images/marker-icon-red.png;
    --YL: /assets/plugins/leaflet/images/marker-icon-orange.png;
    --bodyColor: #d4dadc !important;
    --rounded: 8px 8px 8px 8px !important;
    --ContentBackground: #717882 !important; /*main page background color*/
    --SidebarColor: #2d353c !important; /*sidebar background color*/
    --DarkTabs: #3B444c !important;
    --Invisible: #00000000 !important;
    --fullWhite: #fff !important;
    --ListRed: #ffacac !important;
    --ListGreen: #ccecec !important;
    --ListOrange: #ffe6c6 !important;
}

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

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

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




.Widget1 {
    background-color: #bbc2c5 !important;
    color:#262d34 !important;
}

.Widget2 {
    background-color: #d4dadc !important;
    color: #3b444c !important
}



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

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

.sidebar, .sidebar-bg {
    background: var(--SidebarColor) !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;
}
.bg-listk-orange {
    background: var(--ListOrange) !important;
}
.bg-listk-green {
    background: var(--ListGreen) !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);
}

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


    /*@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: 5px solid white;
    border-radius: 6px;
}


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

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

.ksmallmargin {
    margin-bottom: 0px;
    margin-left: 0px;
    margin-right: 0px;
    border-radius: 6px !important;
}

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

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

.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: #3B444c; /*shared background for main area   (gray - #3B444c)*/
}

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

.kyle-title  {
    font-size: 20px !important;
    color: #e4e4e4 !important;
    background-color: #3B444c !important;
    text-decoration: none !important;
    padding:3px 5px 3px 5px !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-body {
    background-color: var(--bodyColor); /* OLD #e3e5e6 efefef f1f1f1 GOOD - #F0F3F5 a hair off of good #f0f3f4     current  #c6cdd0   */
    border-radius: 8px !important;
}


.kyle-rounded-textbox {
    box-sizing: border-box;
    -webkit-box-sizing: border-box;
    -moz-box-sizing: border-box;
    border: 1px solid #E2E7EB;
    padding: 5px;
    padding-left: 15px;
    outline: none;
    background-color: rgba(255, 255, 255, 1) !important;
    
}

.kyle-rounded-table {
    border: 1px solid DarkOrange;
    border-radius: 13px;
    border-spacing: 0;
}



.kyle-button-sm {
    background-color: #515E6A;
    border-color: #515E6A;
}

/*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:6px !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: #cbcbcb;
}

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

.kyle-text {
    color: #4b5661 !important;
    font-size:13px !important
}

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: 10px;
}

.kyle-table{
    border-radius:10px !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;
}


/*
    COLORS

    #fff - White
    #2D353C - Toolbar Dark Blue
    #1B1F24 - Even Darker Blue
   
     #A8ACB1 - Background Gray

    #00ACAC - Standard Green
    #006767 - Dark Green
    #004545 - Even Darker Green
*/















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


/* -------------------------------------------------------------------Maintainers buttons formating------------------------------------------------------------*/
:root {
    --ButtonRadius: 6px !important; /*Red */
}



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


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

/*------------------------------------------------HOS and Calendar Page----------------------------------------------------------*/

/*HOS calendar and HOS panel background color*/
.panel-inverse > .panel-heading {
    background: #fff;
}
/*Calendar heading text color*/
.panel-danger > .panel-heading, .panel-info > .panel-heading, .panel-inverse > .panel-heading, .panel-primary > .panel-heading, .panel-success > .panel-heading, .panel-warning > .panel-heading {
    color: #707478;
}

.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(--ContentBackground);
    color: #ededed;*/
}





/*------------------------------------------------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: #2D353C;
}

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





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

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






/*THESE MUST embed BIGGER THAN thead OTHER ONES*/
.kyle-body {
    border-radius: 10px !important;
    -webkit-border-radius: 10px;
    -moz-border-radius: 10px;
}

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



.kyle-td {
    border-top: 0px solid #e2e7eb !important;
    border-bottom: 1px solid #ffffff !important;
    vertical-align: middle !important;
    padding-top: 7px !important;
    padding-bottom: 7px !important;
    height: 20px !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;
}

.kyle-table-mod1 {
    padding-top: 10px !important;
    border: 0px !important;
    color: #4b5661 !important;
}

.kyle-font-mod1, .kyle-Summary {
    color: #4b5661;
    font-size: 13px !important;
    font-family: 'Open Sans',"Helvetica Neue",Helvetica,Arial,sans-serif;
}


/*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: #4b5661;
}

/* Handle */
::-webkit-scrollbar-thumb {
    background: #262D34 !important;
}

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

/* END CUSTOM SCROLL BAR STUFF */


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





.select2-dropdown {
    border-radius: 5px 5px 5px 5px !important;
    border: 1px solid #d4dadc !important;
    color: #4b5661;
    font-size: 13px !important;
}

.datepicker.dropdown-menu {
    border-radius: 8px !important;
}

.bootstrap-timepicker-widget.dropdown-menu.open {
    border-radius: 8px !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: #eaebeb;
    border-radius: 30px !important;
    margin-bottom: 0px !important;
    height: 20px !important;
    color:#fff;
}

.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: 10px;
    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;
    -khtml-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;
}

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

.menuGray {
    filter: invert(80%) sepia(0%) saturate(1142%) hue-rotate(71deg) brightness(91%) contrast(75%);
    height:25px;
    width:25px;
}

/*------------------------------------------------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: 0px solid #ccc;
    display: inline-block;
    padding: 8px 12px;
    cursor: pointer;
    font-weight: 100;
    color: #fff;
    background: #efefef;
    border-color: #e2e7eb;
    border-radius: var(--ButtonRadius)
}

.custom-file-upload:hover {
    background: #767676;
    border-color: #767676;
}


/*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(--otherLightBlue);
    border-radius: 5px;
    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: #f59c1a;
}

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: 30px !important;

}



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

/*colors for svg images*/
.svg-white {
    filter: brightness(0) saturate(100%) invert(100%) sepia(100%) saturate(0%) hue-rotate(356deg) brightness(105%) contrast(101%);
}

.svg-darkBlue {
    filter: brightness(0) saturate(100%) invert(26%) sepia(8%) saturate(891%) hue-rotate(167deg) brightness(89%) contrast(90%);
}
.svg-gray {
    filter: brightness(0) saturate(100%) invert(69%) sepia(2%) saturate(8%) hue-rotate(332deg) brightness(94%) contrast(86%);
}
.svg-primary {
    filter: brightness(0) saturate(100%) invert(40%) sepia(78%) saturate(683%) hue-rotate(172deg) brightness(93%) contrast(87%);
}
.svg-menuGray {
    filter: invert(80%) sepia(0%) saturate(1142%) hue-rotate(71deg) brightness(91%) contrast(75%)
}
.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(63%) sepia(70%) saturate(3934%) hue-rotate(325deg) brightness(100%) contrast(101%);
}
.svg-yellow {
    filter: brightness(0) saturate(100%) invert(49%) sepia(58%) saturate(619%) hue-rotate(357deg) brightness(95%) contrast(97%);
}

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