/* Minification failed. Returning unminified contents.
(7,5): run-time error CSS1062: Expected semicolon or closing curly-brace, found '-'
(251,5): run-time error CSS1062: Expected semicolon or closing curly-brace, found '['
 */
/* Move down content because we have a fixed navbar that is 50px tall */
.myVersionStuff {
    height: 1px;
}

:root {
    --bs-body-font-family: Roboto,system-ui,-apple-system,"Segoe UI",Roboto,"Helvetica Neue","Noto Sans","Liberation Sans",Arial,sans-serif,"Apple Color Emoji","Segoe UI Emoji","Segoe UI Symbol","Noto Color Emoji";
}

body {
    padding-top: 64px;
    padding-bottom: 20px;
}

/* Wrapping element */
/* Set some basic padding to keep content from hitting the edges */
.body-content {
    padding-left: 20px;
    padding-right: 20px;
}

/* Override the default bootstrap behavior where horizontal description lists 
   will truncate terms that are too long to fit in the left column 
*/
.dl-horizontal dt {
    white-space: normal;
}

/* Set widths on the form inputs since otherwise they're 100% wide */
input[type="text"],
input[type="password"],
input[type="email"],
input[type="tel"],
input[type="select"],
.ss-main {
    max-width: 280px;
}

.ss-main{
    display:inline-flex!important;
}



    .btn, input[type=submit] {
        background-color: #e6e6e6;
        color: #303030;
    }

    .btn:hover {
        color: #86bff9;
        text-decoration: none;
    }

    /*
.myLoginLogoutLink {
    -webkit-filter: invert(100%);
    filter: invert(100%);
}
        */

    input[type=image]:hover, .myLoginLogoutLink:hover, .myHyperLinkImages:hover {
        -webkit-filter: invert(100%);
        filter: invert(100%);
        background-color: #222222;
    }
        /* */
.myInwardDiv {
    margin-left: 0;
}

.MySystemTitle {
    text-align: center;
    padding-top: 2rem;
    padding-bottom: 2rem;
    width: 100%;
    /* margin-top: 1.5rem; */
    margin-bottom: 1.5rem;
}

.table td {
    background-color: inherit !important;
}
.table tr:not(:first-child):hover {
    filter: brightness(0.75);
}
.table th{
    text-align:center;
}
/* had to add this after upgrade to bootstrap 5.16, so the items are not cut off on the left */
.show .nav-item, .show .navbar-brand, .collapsing .nav-item, .collapsing .navbar-brand {
    padding-left: 0.7rem !important;
}

.myRotatedSVG {
    transform: rotate(180deg);
}
/* added for Andrew's benefit, ight need to find a workaround on how to make tables go wider....*/
@media (min-width: 1100px) {
    .container {
        max-width: 90% !important;
    }
}

/* Responsive: Portrait tablets and up */
@media screen and (min-width: 850px) {
    .jumbotron {
        margin-top: 20px;
    }
    .body-content {
        padding: 5px;
    }
    .myInwardDiv {
        margin-left: 75px;
    }
}
@media (prefers-color-scheme: dark) {
    
}

@-webkit-keyframes dot {
    0% {
        opacity: 0;
    }

    50% {
        opacity: 0;
    }

    100% {
        opacity: 1;
    }
}

@keyframes dot {
    0% {
        opacity: 0;
    }

    50% {
        opacity: 0;
    }

    100% {
        opacity: 1;
    }
}

.my-cookie-consent {
    position: fixed;
    bottom: 0;
    width: 100%;
    background-color: black!important;
    color: white!important;
    min-height: 50px;
    z-index:1000;
    text-align:center;
}

.my-alert-class {
    position: fixed;
    top: 64px;
    right: 0px;
    width: auto;
    z-index: 9999;
}

/* 
    **************************************
    **************************************
    **************************************
    **************************************
    light mode stuff
    **************************************
    **************************************
    **************************************
    **************************************
*/

body {
    background-color: #fff;
    color: #222;
}

input[type="text"],
input[type="password"],
input[type="email"],
input[type="tel"],
input[type="select"],
input[type=number],
input[type=date],
select,
textarea { 
    background-color: #fff !important;
    color: #222 !important;
}

hr {
    background-color: #4f4f4f!important;
}

input[type="text"]:read-only,
input[type="password"]:read-only,
input[type="email"]:read-only,
input[type="tel"]:read-only,
input[type="select"]:read-only,
input[type=number]:read-only,
input[type=date]:read-only {
    background-color: #e6e6e6!important;
    color: #868686!important;
}

.btn, input[type=submit] {
    background-color: #e6e6e6;
    color: #303030;
}

    .btn:hover {
        color: #0c75dd!important;
        text-decoration: none!important;
    }

.MySystemTitle {
    /* background-color: #e6e6e6!important; */
}

.myImportantMessage {
    color: #d90000 !important;
}

.modal-content {
    background-color: #fff !important;
    color: #222 !important;
}


/*
    **************************************
    **************************************
    **************************************
    **************************************
    dark mode stuff
    **************************************
    **************************************
    **************************************
    **************************************
*/
.mydarkmode {
    background-color: #222222;
    color: #e6e6e6;
    [data-bs-theme="dark"]
}

    .mydarkmode input[type="text"],
    .mydarkmode input[type="password"],
    .mydarkmode input[type="email"],
    .mydarkmode input[type="tel"],
    .mydarkmode input[type="select"],
    .mydarkmode input[type=number],
    .mydarkmode input[type=date],
    .mydarkmode select,
    .mydarkmode textarea,
    .mydarkmode .ss-main,
    .mydarkmode .ss-search,
    .mydarkmode .ss-list,
    .mydarkmode .ss-option,
    .mydarkmode input[type="search"] {
        background-color: #222222 !important;
        color: #e6e6e6 !important;
    }

.mydarkmode hr {
    background-color: #4f4f4f!important;
}

.mydarkmode input[type="text"]:read-only,
.mydarkmode input[type="password"]:read-only,
.mydarkmode input[type="email"]:read-only,
.mydarkmode input[type="tel"]:read-only,
.mydarkmode input[type="select"]:read-only,
.mydarkmode input[type=number]:read-only,
.mydarkmode input[type=date]:read-only {
    background-color: #868686!important;
    color: #e6e6e6!important;
}

.mydarkmode .btn, .mydarkmode input[type=submit] {
    background-color: #303030;
    color: #e6e6e6;
}

    .mydarkmode .btn:hover {
        color: #0c75dd!important;
        text-decoration: none!important;
    }

    .mydarkmode .ss-content .ss-list .ss-option.ss-highlighted, .ss-content .ss-list .ss-option:not(.ss-disabled).ss-selected {
        background-color: #054fc7!important;
        color: #e6e6e6 !important;
    }
    /* icons we can flip */
    .mydarkmode input[type=image], .mydarkmode .imgwecanflip, .mydarkmode .myHyperLinkImages {
        -webkit-filter: invert(100%) !important;
        filter: invert(100%) !important;
    }
    .mydarkmode input[type=image]:hover, .mydarkmode .myLoginLogoutLink:hover, .mydarkmode .myHyperLinkImages:hover, .mydarkmode .ss-option:hover {
        -webkit-filter: invert(0%)!important;
        filter: invert(0%)!important;
        background-color: #e6e6e6!important;
        color: #222222!important;
    }

.mydarkmode .MySystemTitle {
    /* background-color: #8c8c8c!important; */
}

.mydarkmode .table th, .mydarkmode .table th a {
    color: #222222;
    background-color: #e6e6e6;
}
    .mydarkmode .table td, .mydarkmode .table td a {
        color: #e6e6e6;
        background-color: #222222;
    }

    .myPinkBG {
        background-color: lightpink;
    }

    .myGreenBG {
        background-color: lightgreen;
    }
    .myBlueBG{
        background-color:lightblue;
    }
.mySemiGreenBG {
    background-color: #a4dfcc;
}
.mydarkmode .mySemiGreenBG {
    background-color: #2e8469;
}
.mydarkmode .myBlueBG {
    background-color: darkblue;
}
.myLightGoldenrodYellow {
    background-color: lightgoldenrodyellow;
}
.mydarkmode .myLightGoldenrodYellow {
    background-color: darkgoldenrod;
}

.mydarkmode .myPinkBG {
    background-color: darkred;
}
.mydarkmode .myGreenBG {
    background-color: darkgreen;
}

.mydarkmode .myImportantMessage {
    color: red !important;
}

.mydarkmode .modal-content {
    background-color: #222222!important;
    color: #e6e6e6!important;
}

.mydarkmode .modal-header .btn-close {
    background-color: #e6e6e6!important;
}

.mydarkmode ::-webkit-calendar-picker-indicator {
    filter: invert(1)!important;
}