body {

}
.bg-lightgreen {
    background-color: lightgreen;
}
.bg-lightblue {
    background-color: lightblue;
}
/*
BELT STYLES
*/
.beltBG {
    background-image: url(/images/belt_bg.jpg);
    background-size: 12%;
    height: 100%;
}
.beltContainer {
    border-radius: 2px;
    box-shadow: 0px 0px 5px #888;
    position: relative;
    width: 100%;
    height: 100%;
    overflow: hidden;
    opacity: 0.75;
}
    .beltContainer .innerStripeOutside {
        width: 100%;
        height: 25%;
    }
    .beltContainer .innerStripeInside {
        width: 100%;
        height: 50%;
    }
    .beltContainer .halfHalf {
        width: 100%;
        height: 50%;
    }
    .beltContainer .label {
        padding: 0px;
        margin-left: 4px;
        white-space: nowrap;
    }
        .beltContainer .label.large {
            font-size: xx-large;
            font-weight: bold;
            padding-left: 5px;
        }
    .beltContainer .gradingStripeFlx {
        width: 4%;
        min-width: 8px;
        height: 100%;
        margin-right: max(3%,6px);
    }
    .beltContainer .tipStripeContainer {
        padding-right: 4%;
        height: 100%;
        width: 100%;
    }
    .beltContainer .tipStripeFlx {
        width: 3%;
        height: 100%;
        margin-right: max(2%,5px);
        min-width: 6px;
    }
    .beltContainer .loginString {
        font-size: 0.4em;
        margin-top: 0px;
        font-weight: normal;
        position: absolute;
        bottom: -2px;
    }

/*
LOADING STYLES
*/
.overlay {
    background-color: #EFEFEF;
    position: fixed;
    width: 100%;
    height: 100%;
    z-index: 1031;
    top: 0px;
    left: 0px;
    opacity: .5;
    pointer-events: none;
}
.overlay-center {
    position: relative;
    top: 50%;
    left: Calc(50% - 50px);
    width: 100px;
    height: 100px;
    z-index: 1031;
}
.overlay-object {
    background-color: #EFEFEF;
    position: relative;
    width: 100%;
    height: 100%;
    z-index: 1032;
    top: 0px;
    left: 0px;
    opacity: .3;
    pointer-events:none;
}
.overlay-object-fixed {
    position: fixed;
    text-align:center;
    z-index: 1032;
    top: 50%;
    left: Calc(50% - 50px);
    opacity: .8;
}

/*Jump Menu*/
.jmpMenuItem {
    display:inline-block;
    vertical-align: top;
    text-align: center;
    padding: 2px;
}
.jumpMenuSeparator {
    display: inline-block;
    padding: 0 7px 0 7px;
}
.jmpMenuItemSelected {
    border-bottom: 1px dotted #333;
    border-left: 1px dotted #333;
    border-right: 1px dotted #333;
    border-top: 1px solid #aaa;
    border-bottom-left-radius: 5px;
    border-bottom-right-radius: 5px;
    border-top-left-radius: 0px;
    border-top-right-radius: 0px;
    background-color: #DEF;
}

/* Other things */
a.redlink:link, a.redlink:visited, a.redlink:hover, a.redlink:active {
    color: Red;
}
a.blacklink:link, a.blacklink:visited, a.blacklink:hover, a.blacklink:active {
    color: Black;
}
a.greenlink:link, a.greenlink:visited, a.greenlink:hover, a.greenlink:active {
    color: Green;
}
a.greylink:link, a.greylink:visited, a.greylink:hover, a.greylink:active, .greylink a {
    color: #999999;
}
a.whitelink:link, a.whitelink:visited, a.whitelink:hover, a.whitelink:active, .whitelink a {
    color: #EFEFEF;
}
a.pinklink:link, a.pinklink:visited, a.pinklink:hover, a.pinklink:active {
    color: #FF69B4;
}
.lightbluelink a {
    color:lightblue;
}
.silver {
    color:silver;
}
.grayscale {
    filter: grayscale(1);
}
ul.tick {
    list-style: none;
}
    ul.tick li:before {
        content: '✓';
        padding-right:0.5em;
        margin-left:-2em;
    }

.pointer {
    cursor: pointer;
}

.mw-300 {
    max-width: 300px;
}

.mw-400 {
    max-width: 400px;
}

/* used for bootstrap datepicker control to match small controls */
.datepicker-font-control-sm .form-control {
    font-size: 0.875em;
}

.datepicker-font-control-sm .input-group-append {
    height: 35px;
}

.datepicker-font-control-sm svg {
    margin-top: -5px;
}

/*can use <del> or <s> tag*/
.text-strikeout {
    text-decoration: line-through;
}
.dashedLine {
    border-top: 1px dashed var(--secondary);
}
.font-underline {
    text-decoration: underline;
}
.font-normal {
    font-size: 1rem;
}
.font-smaller {
    font-size: 0.875rem;
}
.font-small {
    font-size: 0.8rem;
}
.select2-selection__choice {
    font-size: 0.875rem;
}
.width-auto {
    width: auto;
}
.nowrap {
    white-space:nowrap;
}
.director-only-box {
    border: 1px dashed red;
    padding: 0.5rem;
}
.copy-button {
    border: none; 
    background:none;
    outline:none;
}
    .copy-button:active,
    .copy-button:focus {
        border: none;
        background: none;
        outline:none;
    }
@media only screen and (min-width:1500px) {
    .d-xxl-block {
        display: block !important;
    }
    .d-xxl-inline {
        display: inline !important;
    }
}
/*FONT AWESOME ICONS*/
/* Step 1: Common Properties: All required to make icons render reliably - we did this above but it's included here for the full demo */
.icon::before {
    display: inline-block;
    text-rendering: auto;
    -webkit-font-smoothing: antialiased;
}
/* Step 2: Reference Individual Icons */
.icon-arrow-up-right::before {
    font: var(--fa-font-solid);
    content: "\f08e";
    padding-right: 0.5em;
}
.icon-trash::before {
    font: var(--fa-font-solid);
    content: "\f2ed";
    padding-right: 0.5em;
}
.icon-archive::before {
    font: var(--fa-font-solid);
    content: "\f187";
    padding-right: 0.5em;
}
.icon-check-circle::before {
    font: var(--fa-font-solid);
    content: "\f058";
    padding-right: 0.5em;
}
.icon-check-square::before {
    font: var(--fa-font-solid);
    content: "\f14a";
    padding-right: 0.5em;
}
.icon-in-grid-size {
    min-width:16px;
    min-height:16px;
}
.icon-sort::after {
    font: var(--fa-font-solid);
    content: "\f0dc";
    padding-left: 0.5em;
}

/* LoadablePanel loading animation thing */
.update-progress {
    vertical-align: middle;
}
    .update-progress .spinner {
        width: 50px;
        height:30px;
        max-height: 40px;
        text-align: center;
        display: inline-block;
    }
        .update-progress .spinner > div {
            background-color: var(--info);
            height: 100%;
            width: 6px;
            margin: 1px;
            display: inline-block;
            -webkit-animation: sk-stretchdelay 1.2s infinite ease-in-out;
            animation: sk-stretchdelay 1.2s infinite ease-in-out;
        }
        .update-progress .spinner .rect2 {
            -webkit-animation-delay: -1.1s;
            animation-delay: -1.1s;
        }
        .update-progress .spinner .rect3 {
            -webkit-animation-delay: -1.0s;
            animation-delay: -1.0s;
        }
        .update-progress .spinner .rect4 {
            -webkit-animation-delay: -0.9s;
            animation-delay: -0.9s;
        }
        .update-progress .spinner .rect5 {
            -webkit-animation-delay: -0.8s;
            animation-delay: -0.8s;
        }
.panel {
    width: 400px;
    height: 400px;
    justify-content: center; /* For horizontal alignment */
    align-items: center; /* For vertical alignment */
    border: 1px solid black;
}

.repeater {
    display: grid;
    grid-template-columns: auto auto auto;
    grid-column-gap: 50px;
    grid-row-gap: 50px;
}

.box {
    width: 400px;
    height: 400px;
}

@keyframes update-progress-background-fade {
    0%, 50% {
        background: transparent;
    }

    100% {
        background: rgba(252, 252, 252, 0.4);
    }
}

@keyframes sk-stretchdelay {
    0%, 40%, 100% {
        transform: scaleY(0.4);
        -webkit-transform: scaleY(0.4);
    }

    20% {
        transform: scaleY(1);
        -webkit-transform: scaleY(1);
    }
}

@-webkit-keyframes sk-stretchdelay {
    0%, 40%, 100% {
        -webkit-transform: scaleY(0.4);
    }

    20% {
        -webkit-transform: scaleY(1);
    }
}
/* END LoadablePanel loading animation thing */