page[size="A4"] {
    background: white;
    width: 21cm;
    height: 29.7cm;
    display: block;
    margin: 0 auto;
    margin-bottom: 0.5cm;
    box-shadow: 0 0 0.5cm rgba(0,0,0,0.5);
}

.gridview-table {
    width: 125%;
    border-collapse: collapse;
    font-size: 14px;
    background-color: #fff;
    box-shadow: 0 2px 6px rgba(0, 0, 0, 0.1);
    border-radius: 6px;
    overflow: hidden;
}

    .gridview-table th,
    .gridview-table td {
        padding: 2px 4px;
        border-bottom: 1px solid #666;
        text-align: left;
    }

    .gridview-table th {
        background-color: #f5f5f5;
        font-weight: 600;
        color: #333;
    }

    .gridview-table tr:hover td {
        background-color: #f9f9f9;
    }

@media print {
    input, button, submit {
        visibility: hidden
    }

    body {
        zoom: 40%;
        margin: 0;
    }

    #plotCumulativeSpeedControls{
        visibility: hidden
    }

    body, page[size="A4"] {
        margin: 0;
        box-shadow: 0;
        display: block;
    }
}

@media screen and (max-width: 1460px) {
    .navbar-header { float: none !important; }

    .navbar-left, .navbar-right { float: none !important; }

    .navbar-toggle { display: block !important; }

    .navbar-collapse {
        border-top: 1px solid transparent !important;
        box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.1) !important;
    }

    .navbar-fixed-top {
        top: 0 !important;
        border-width: 0 0 1px !important;
    }

    .navbar-collapse.collapse { display: none !important; }

    .navbar-nav {
        float: none !important;
        margin-top: 7.5px !important;
        width:100%;
    }

    .navbar-nav > li { float: none !important; }

    .navbar-nav > li > a {
        padding-top: 5px !important;
        padding-bottom: 5px !important;
    }
}

@media screen and (max-width: 1460px) {
    .collapse.in {
        display: block !important;
    }

    .nagelsFooter {
        display: none !important;
    }

    .nagelsHomeHeader {
        display: none !important;
    }

    #versionData {
        display: none !important;
    }

    .mainContent {
        margin-left: 2% !important;
        margin-right: 2% !important;
        border-left: 1px solid lightgrey !important;
        border-right: 1px solid lightgrey !important;
        padding: 5px !important;
        /*border-top-left-radius: 6px;*/
        box-shadow: inset 0 1px 1px rgba(0, 0, 0, .075), 0 0 20px rgba(0, 0, 0, .5) !important;
        background-color: white !important;
        box-sizing: border-box !important;
        min-height: 92.5vh !important;
        padding-top: 1px !important;
    }

    .homeListGroupInline {
        display: inline-flex !important;
    }

    .homeListGroup {
        width: 100% !important;
        padding: 0 0 1em 0 !important;
        margin-bottom: 1em !important;
        color: #333 !important;
    }

        .homeListGroup ul {
            width: 100% !important;
            list-style: none !important;
            margin: 0 !important;
            padding: 0 !important;
            border: none !important;
        }

        .homeListGroup li {
            width: 100% !important;
            margin: 0 !important;
            margin-right: 0% !important;
        }

            .homeListGroup li a {
                display: block !important;
                padding: 5px 5px 5px 0.5em !important;
                border-left: 10px solid #d22630 !important;
                border-right: 1px solid #FFFFFF !important;
                background-color: #FFFFFF !important;
                color: #000000 !important;
                text-decoration: none !important;
                width: 70% !important;
            }

            html > body .homeListGroup li a {
                width: 100% !important;
                width: auto !important;
            }

                .homeListGroup li a:hover {
                    border-left: 10px solid #A81E26 !important;
                    background-color: #d22630 !important;
                    color: #fff !important;
                }

    .homeListGroupInlineNested {
        display: inline-flex !important;
    }

    .homeListGroupNested {
        width: 100% !important;
        padding: 0 0 1em 0 !important;
        margin-bottom: 1em !important;
        color: #333 !important;
    }

        .homeListGroupNested ul {
            width: 100% !important;
            list-style: none !important;
            margin: 0 !important;
            padding: 0 !important;
            border: none !important;
        }

        .homeListGroupNested li {
            width: 95% !important;
            margin: 0 !important;
            margin-right: 0% !important;
        }

            .homeListGroupNested li a {
                display: block !important;
                padding: 5px 5px 5px 0.5em !important;
                border-left: 10px solid #d22630 !important;
                border-right: 1px solid #FFFFFF !important;
                background-color: #FFFFFF !important;
                color: #000000 !important;
                text-decoration: none !important;
                width: 100% !important;
                padding-right: 120px !important;
            }

            html > body .homeListGroupNested li a {
                width: 70% !important;
                width: auto !important;
            }

                .homeListGroupNested li a:hover {
                    border-left: 10px solid #A81E26 !important;
                    background-color: #d22630 !important;
                    color: #fff !important;
                }

    body {
        padding-top: 30px !important;
        padding-bottom: 0px !important;
    }

    h1 {
        font-size: 20px !important;
    }
}

 /*media stop*/
.color {
    background-color: rgba(210,38,48,1)

}

.yearDropDown select{
    width: 150px;
    height: 30px;
    padding: 5px;
    color: green;
}
.yearDropDown select option:first-child{
    color: green;
}

.mainContent {
    margin-left: 2%;
    margin-right: 2%;
    border-left: 1px solid lightgrey;
    border-right: 1px solid lightgrey;
    padding: 10px;
    /*border-top-left-radius: 6px;*/
    box-shadow: inset 0 1px 1px rgba(0,0,0,.075), 0 0 20px rgba(0,0,0, .5);
    background-color: white;
    box-sizing: border-box;
    min-height: 92.5vh;
    padding-top: 1px;
    overflow: auto; /*added to prevent Reminders Schedule tables overflowing this css class*/
}


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

.center {
    margin-left: 25%;
    margin-right: 25%;
}

.labelWide
{
    width: 150px;
}

.lastNoteLabel {
    color: #d22630;
    font-weight: bolder;
    font-size: 16px
}

.lastNoteData {
    color: #000000;
    font-size: 16px
}

.lastNoteContainer {
    padding-right: 10px;
    padding-left: 10px;
    border: 2px solid #d22630;
    border-radius: 3px;
    box-shadow: inset 0 0px 2px rgba(0,0,0,.075), 0 0 1px rgba(255, 0, 0, .7);
}

.generalNoteLabel {
    color: #F9CB5F;
    font-weight: bolder;
    font-size: 16px
}

.generalNoteData {
    color: #000000;
    font-size: 16px
}

.generalNoteContainer {
    padding-right: 10px;
    padding-left: 10px;
    border: 2px solid #F9CB5F;
    border-radius: 3px;
    box-shadow: inset 0 0px 2px rgba(0,0,0,.075), 0 0 1px rgba(255, 0, 0, .7);
}

.buttonInline {
    display: inline-block;
}

/* Set padding to keep content from hitting the edges */
.body-content {
    padding-left: 15px;
    padding-right: 15px;
}

.center-div
{
    text-align: center;
    display: inline-block;
}

.center-buttons {
    width: 60%;
    margin: 0 auto;
    text-align: center;
}

.normalfont {
    display: inline-block !important;
    max-width: 100% !important;
    margin-bottom: 5px !important;
    margin-left: 4px !important;
    font-weight: normal !important;
}

#overlay {
    width: 100%;
    background: url('Images/Loading.gif') repeat;
    position: relative;
}

#overlay img.loading_circle {
    position: absolute;
    top: 50%;  
    left: 50%; 
}



/*Body End*/
tr, td {
    width: min-content;
}

/*Control Binding*/
.boundControl {
    display: grid;
}

.boundControl1 {
    display: flex;
    width: 100%;
    height: 45px;
}

.boundControl2 {
    display: flex;
    width: min-content;
    margin: auto 0;
    margin-left: 30px;
}

.break {
    flex-basis: 100%;
    height: 0; /* Optional: to ensure it doesn't take up space */
}

.panelStyling {
    display: inline-block; 
    position: fixed;
}

.boundControlFlex {
    display: inline;
    margin: 0;
    margin-bottom: 5px;
    width: 50%;
}

.boundControlGrid {
    display: grid;
    align-self: start;
}

.textAreaBoundControlFlex {
    max-width: 100%;
    margin-right: 50px;
    width: 100%;
    margin-bottom: 15px;
}

.pageErrorMessage {
    display: flex;
    justify-content: center;
    max-width: 650px;
    margin-left: 60px;
    padding-top: 15px;
    color: red;
    font-weight: bold;
    align-items: center;
    /*text-wrap: balance;*/
}

.messageThreadsCounter {
    display: inline-block;
    color: white;
    background-color: gray;
    border-radius: 50%;
    margin-left: 2px;
    width: 20px;
    height: 21px;
    padding: 0px;
    background: green;
    border: 1px solid #666;
    text-align: center;
}

#messageArea {
    width: 60%;
}

.countdownPanel {
    margin-top: 20px;
    width: 105%;
    margin-left: 235px;
}

.messageThreadsArea {
    display: grid;
    grid-template-columns: 2fr;
    grid-auto-rows: min-content;
    /*height: 522px;
    max-height: 522px;*/
    height: 499px;
    max-height: 499px;
    width: 690px;
    margin: auto;
    border: solid 2px grey;
    border-radius: 4px;
    overflow-y: auto;
    overscroll-behavior: contain;
    float: right;
}

.message {
    padding: 10px 20px;
    border-radius: 20px;
    margin-bottom: 5px;
    max-width: 75%;
}

.mine {
    background-color: #0b93f6;
    color: white;
    width: fit-content;
    border-bottom-right-radius: 5px;
    list-style-type: none;
    justify-self: start;
    height: max-content;
    margin-left: 2px;
    overscroll-behavior: contain;
}

.theirs {
    background-color: green;
    color: white;
    width: fit-content;
    border-bottom-left-radius: 5px;
    float: right;
    list-style-type: none;
    justify-self: end;
    height: max-content;
    margin-right: 2px;
    overscroll-behavior: contain;
}

.boundControlBlock {
    display: block;
}

.inlineControls {
    display: inline-flex;
}

.inlineControls > div
{
    margin-top: 5px;
    margin-bottom: 5px;
    margin-right:10px;  
}

.inlineControls > input
{
    margin-top: 5px;
    margin-bottom: 5px;
    margin-right:10px;  
}

/*Control Binding End*/

/*Buttons*/

.buttonInlineGroupCenter {
    display: flex;
    flex-wrap: wrap;
    flex-direction:row;
    justify-content: center;
    text-align: center;
    text-decoration:none
}

.buttonInlineGroupLeft {
    display: flex;
    flex-wrap: wrap;
    flex-direction:row;
    text-align: center;
    text-decoration:none
}


/* Spaces all divs by 10px the right of each div in the inline button group*/
.buttonInlineGroupLeft > div
{
    text-align:center;
    margin-top: 5px;
    margin-bottom: 5px;
    margin-right:10px; 
    text-decoration:none
}

.buttonInlineGroupCenter > div
{
    text-align:center;
    margin-top: 5px;
    margin-bottom: 5px;
    margin-right:10px;  
    text-decoration:none
}


/* Spaces all inputs by 10px the right of each div in the inline button group*/
.buttonInlineGroupLeft > input
{
    text-align:center;
    margin-top: 5px;
    margin-bottom: 5px;
    margin-right:10px;  
    text-decoration:none
}

.buttonInlineGroupCenter > input
{
    text-align:center;
    margin-top: 5px;
    margin-bottom: 5px;
    margin-right:10px;  
    text-decoration:none
}

.largeLongButton {
    border: none;
    padding: 6px 30px;
    text-align: center;
    text-decoration: none;
    font-size: 14px;
    width: 220px;
    cursor: pointer;
    text-decoration:none
}

.largeLongButtonFitContent {
    border: none;
    padding: 6px 10px;
    text-align: center;
    text-decoration: none;
    font-size: 14px;
    width: fit-content;
    cursor: pointer;
    text-decoration: none
}

.largeMediumButton {
    border: none;
    padding: 6px 30px;
    text-align: center;
    text-decoration: none;
    font-size: 14px;
    width: 160px;
    cursor: pointer;
    text-decoration:none
}

.largeMediumButtonOverride {
    border: none;
    padding: 6px 30px;
    text-align: center;
    text-decoration: none;
    font-size: 14px;
    width: 148px;
    cursor: pointer;
    text-decoration: none
}

.largeMediumButtonFit {
    display: inline-block;
    padding: 8px 24px;
    font-size: 14px;
    font-weight: 500;
    color: #333;
    background-color: #f5f5f5;
    border: 1px solid #ccc;
    border-radius: 6px;
    cursor: pointer;
    text-align: center;
    white-space: nowrap;
    transition: background-color 0.2s ease, border-color 0.2s ease;
}

    .largeMediumButtonFit:hover {
        background-color: #e6e6e6;
        border-color: #bbb;
    }

    .largeMediumButtonFit:active {
        background-color: #dcdcdc;
        border-color: #aaa;
    }


.largeMediumButtonFitContent {
    border: none;
    /*padding: 6px 30px;*/
    text-align: center;
    text-decoration: none;
    font-size: 14px;
    width: fit-content;
    cursor: pointer;
    text-decoration: none
}

.largeMediumButtonModal {
    border: none;
    padding: 6px 30px;
    text-align: center;
    text-decoration: none;
    font-size: 14px;
    width: 280px;
    cursor: pointer;
    text-decoration: none
}

.smallLongButton {
    width: 100%;
    text-align: center;
    font-size: 12px;
    width: 200px;
    cursor: pointer;
    font-weight: bolder;
    text-decoration:none
}

.smallMediumButton {
    width: 100%;
    text-align: center;
    font-size: 12px;
    width: 150px;
    cursor: pointer;
    font-weight: bolder;
    text-decoration:none
}

.smallShortButton {
    width: 100%;
    text-align: center;
    font-size: 12px;
    width: 100px;
    cursor: pointer;
    font-weight: bolder;
    text-decoration:none
}


.buttonGreenSolid {
    background-color: #39843C;
    color: white;
    transition: 0.2s;
    border: 1px solid #39843C;
    text-decoration: none
}

    .buttonGreenSolid:hover {
        background-color: #285C2A;
        border-radius: 10px;
        transition: 0.2s;
        text-decoration: none
    }

.buttonBlueSolid {
    background-color: #4682B4;
    color: white;
    transition: 0.2s;
    border: 1px solid #4682B4;
    text-decoration: none
}

    .buttonBlueSolid:hover {
        background-color: #386890;
        border-radius: 10px;
        transition: 0.2s;
        text-decoration: none
    }

.buttonBlueOutline {
    background-color: white;
    color: #4682B4;
    transition: 0.2s;
    border: 1px solid #4682B4;
    text-decoration: none
}

    .buttonBlueOutline:hover {
        background-color: #386890;
        color: white;
        border: 1px solid #386890;
        border-radius: 10px;
        transition: 0.2s;
        text-decoration: none
    }

.buttonRedSolid {
    background-color: #C30D09;
    color: white;
    border: 1px solid #C30D09;
    transition: 0.2s;
    text-decoration: none
}


    .buttonRedSolid:hover {
        background-color: #9A0A07;
        transition: 0.2s;
        border-radius: 10px;
        text-decoration: none
    }

.buttonRedOutline {
    background-color: white;
    color: #C30D09;
    border: 1px solid #C30D09;
    transition: 0.2s;
    text-decoration: none
}

    .buttonRedOutline:hover {
        background-color: #9A0A07;
        color: white;
        border-radius: 10px;
        border: 1px solid #9A0A07;
        transition: 0.2s;
        text-decoration: none
    }

.buttonBlueOutline {
    background-color: white;
    color: #0E4AFF;
    border: 1px solid #0E4AFF;
    transition: 0.2s;
    text-decoration: none
}

    .buttonBlueOutline:hover {
        background-color: #0E4AFF;
        color: white;
        border-radius: 10px;
        border: 1px solid #0E4AFF;
        transition: 0.2s;
        text-decoration: none
    }

.buttonGreenOutline {
    background-color: white;
    color: #39843C;
    border: 1px solid #39843C;
    transition: 0.2s;
    text-decoration: none
}

    .buttonGreenOutline:hover {
        background-color: #285C2A;
        color: white;
        border: 1px solid #285C2A;
        border-radius: 10px;
        transition: 0.2s;
        text-decoration: none
    }

.buttonRedNoOutline {
    background-color: transparent;
    color: #9A0A07;
    border: 1px solid transparent;
    transition: 0.2s;
    text-decoration: none
}

    .buttonRedNoOutline:hover {
        background-color: #9A0A07;
        color: white;
        border-radius: 10px;
        border: 1px solid #9A0A07;
        transition: 0.2s;
        text-decoration: none
    }

.buttonGreenNoOutline {
    background-color: transparent;
    color: #285C2A;
    border: 1px solid transparent;
    transition: 0.2s;
    text-decoration: none
}

    .buttonGreenNoOutline:hover {
        background-color: #285C2A;
        color: white;
        border-radius: 10px;
        border: 1px solid #285C2A;
        transition: 0.2s;
        text-decoration: none
    }

.buttonBlueNoOutline {
    background-color: transparent;
    color: #386890;
    border: 1px solid transparent;
    transition: 0.2s;
    text-decoration: none
}

    .buttonBlueNoOutline:hover {
        background-color: #386890;
        color: white;
        border-radius: 10px;
        border: 1px solid #386890;
        transition: 0.2s;
        text-decoration: none
    }

.buttonTest {
    background-color: #22292e;
    
	background-image: -webkit-linear-gradient(top, rgb(47,55,61) 50%, rgb(26,31,36));
	background-image: -moz-linear-gradient(top, rgb(47,55,61) 50%, rgb(26,31,36));
	background-image: -ms-linear-gradient(top, rgb(47,55,61) 50%, rgb(26,31,36));
	background-image: -o-linear-gradient(top, rgb(47,55,61) 50%, rgb(26,31,36));
	background-image: linear-gradient(top, rgb(47,55,61) 50%, rgb(26,31,36));
	
    border: 1px solid #0b1319;
    color: #aeb6bc;
    font-size: 14px;
    font-weight: bold;
    border-radius: 3px;
    padding: 8px 14px;
    text-shadow: 0 -1px 0 rgba(0,0,0,0.5);
    -webkit-box-shadow: 0 2px 4px rgba(0,0,0,0.4), 0 1px 0 rgba(255,255,255,0.2) inset;
	-moz-box-shadow: 0 2px 4px rgba(0,0,0,0.4), 0 1px 0 rgba(255,255,255,0.2) inset;
	box-shadow: 0 2px 4px rgba(0,0,0,0.4), 0 1px 0 rgba(255,255,255,0.2) inset;
    position: relative;
    cursor: pointer;
	
    -webkit-transition: color 0.3s ease-in-out;
	-moz-transition: color 0.3s ease-in-out;
	-ms-transition: color 0.3s ease-in-out;
	-o-transition: color 0.3s ease-in-out;
	transition: color 0.3s ease-in-out;
}

.highlight {
    width: 100%;
    height: 1px; 
    position: absolute;
    left: 0;
    top: 0;
    background: -webkit-linear-gradient(left top, rgba(255,255,255,0.0), rgba(255,255,255,0.6) 35%, rgba(255,255,255,0.6) 70%, rgba(255,255,255,0));
	background: -moz-linear-gradient(left top, rgba(255,255,255,0.0), rgba(255,255,255,0.6) 35%, rgba(255,255,255,0.6) 70%, rgba(255,255,255,0));
	background: -ms-linear-gradient(left top, rgba(255,255,255,0.0), rgba(255,255,255,0.6) 35%, rgba(255,255,255,0.6) 70%, rgba(255,255,255,0));
	background: -o-linear-gradient(left top, rgba(255,255,255,0.0), rgba(255,255,255,0.6) 35%, rgba(255,255,255,0.6) 70%, rgba(255,255,255,0));
	background: linear-gradient(left top, rgba(255,255,255,0.0), rgba(255,255,255,0.6) 35%, rgba(255,255,255,0.6) 70%, rgba(255,255,255,0));
    opacity: 0.2;
	
    -webkit-transition: opacity 0.3s ease-in-out;
	-moz-transition: opacity 0.3s ease-in-out;
	-ms-transition: opacity 0.3s ease-in-out;
	-o-transition: opacity 0.3s ease-in-out;
	transition: opacity 0.3s ease-in-out;
}

.buttonTest:hover .highlight {
    opacity: 1;
}
.buttonTest:hover {
    color: #FFF;
}



/*Buttons End*/

/*Dropdown*/

.dropDownWidth {
    width: 150px 
}

.dropDownGeneric{
    height: 34px;
    padding: 6px 12px;
    font-size: 14px;
    line-height: 1.42857143;
    color: #555;
    background-color: #fff;
    background-image: none;
    border: 1px solid #ccc;
    border-radius: 4px;
    -webkit-box-shadow: inset 0 1px 1px rgba(0, 0, 0, .075);
    box-shadow: inset 0 1px 1px rgba(0, 0, 0, .075);
    -webkit-transition: border-color ease-in-out .15s, -webkit-box-shadow ease-in-out .15s;
    -o-transition: border-color ease-in-out .15s, box-shadow ease-in-out .15s;
    transition: border-color ease-in-out .15s, box-shadow ease-in-out .15s;
}

.dropDownGeneric:focus {
    border-color: #66afe9;
    outline: 0;
    -webkit-box-shadow: inset 0 1px 1px rgba(0,0,0,.075), 0 0 8px rgba(102, 175, 233, .6);
    box-shadow: inset 0 1px 1px rgba(0,0,0,.075), 0 0 8px rgba(102, 175, 233, .6);
}

.dropDownGeneric .select{
    width: 100%;
    background:url('~/Content/Images/arrowdown.png') no-repeat;
    background-position:120% center;
}

.dropDownGeneric .select select{
    background: transparent;
    line-height: 1;
    border: 0;
    padding: 0;
    border-radius: 0;
    width: 120%;
    position: relative;
    z-index: 10;
    font-size: 1em;

}

.dropDownGeneric:hover {
    background-color: #F9F9F9
}


.dropDownShiftPlanning {
    width: 190px 
}

.dropDownShiftPlanning{
    height: 34px;
    padding: 6px 12px;
    font-size: 14px;
    line-height: 1.42857143;
    color: #555;
    background-color: #fff;
    background-image: none;
    border: 1px solid #ccc;
    border-radius: 4px;
    -webkit-box-shadow: inset 0 1px 1px rgba(0, 0, 0, .075);
    box-shadow: inset 0 1px 1px rgba(0, 0, 0, .075);
    -webkit-transition: border-color ease-in-out .15s, -webkit-box-shadow ease-in-out .15s;
    -o-transition: border-color ease-in-out .15s, box-shadow ease-in-out .15s;
    transition: border-color ease-in-out .15s, box-shadow ease-in-out .15s;
}

.dropDownShiftPlanning:focus {
    border-color: #66afe9;
    outline: 0;
    -webkit-box-shadow: inset 0 1px 1px rgba(0,0,0,.075), 0 0 8px rgba(102, 175, 233, .6);
    box-shadow: inset 0 1px 1px rgba(0,0,0,.075), 0 0 8px rgba(102, 175, 233, .6);
}

.dropDownShiftPlanning .select{
    width: 100%;
    background:url('~/Content/Images/arrowdown.png') no-repeat;
    background-position:120% center;
}

.dropDownShiftPlanning .select select{
    background: transparent;
    line-height: 1;
    border: 0;
    padding: 0;
    border-radius: 0;
    width: 120%;
    position: relative;
    z-index: 10;
    font-size: 1em;

}

.dropDownShiftPlanning:hover {
    background-color: #F9F9F9
}

/*Dropdown End*/

.warningLabel {
    color: #d22630;
    font-weight: bold;
    font-size: 14px
}

.successLabel {
    color: #285C2A;
    font-weight: bold;
    font-size: 14px
}

.infoLabel {
    color: #4682B4;
    font-weight: bold;
    font-size: 14px
}

.infoLabelPadded {
    color: #4682B4;
    font-weight: bold;
    font-size: 14px;
    padding-right: 15px
}

.headerLabel {
    color: #C30D09;
    font-weight: bold;
    font-size: 30px;
    font-family: Arial;
}

.headerLabel2 {
    color: #C30D09;
    font-weight: bold;
    font-size: 18px;
    font-family: Arial;
}

.batchedLabel {
    color: #285C2A;
    font-weight: bold;
    font-size: 22px
}

.planningLabel {
    color: #4682B4;
    font-weight: bold;
    font-size: 22px
}

/*Labels End*/

/*Panels*/

/*Panels End*/

/*GridView*/
.datagrid td {
    padding: 5px;
/*    width: 100%;*/
}
.datagrid img {
    width: 16px;
    height: 16px;
}
.datagrid th {
    padding: 6px;
}

.datagrid {
    border: none;
}

.header {
    background-color: white;
    font-family: Arial;
    color: black;
    border: none 0px transparent;
    border-bottom: grey;
    height: 20px;
    text-align: center;
    font-size: 12px;
}

.header-asc a:link, .header-asc a:visited, .header-asc a:active {
    text-decoration: none !important;
    color: black
}

.header-asc a:hover {
    text-decoration: none !important;
    color: darkred
}

.header-desc a:link, .header-desc a:visited, .header-desc a:active {
    text-decoration: none !important;
    color: black
}

.header-desc a:hover {
    text-decoration: none !important;
    color: darkred
}

.rows {
    background-color: #fff;
    font-family: Arial;
    font-size: 12px;
    color: #000;
    min-height: 20px;
    text-align: left;
    border: none 0px transparent;
    border-bottom: 1px whitesmoke;

    max-width: 25%;
}

.rows:hover
{
    background-color: #CFEBFD;
    font-family: Arial;
    color: #000;
    text-align: left;
}

.altrows {
    background-color: lightgrey;
    font-family: Arial;
    font-size: 12px;
    color: #000;
    min-height: 20px;
    text-align: left;
    border: none 0px transparent;
    border-bottom: 1px whitesmoke;
}

.altrows:hover
{
    background-color: #CFEBFD;
    font-family: Arial;
    color: #000;
    text-align: left;
}

.pager {
    background-color: #fff;
    font-family: Arial;
    font-size: 14px;
    color: #000;
    text-decoration: none;
    border: none 0px transparent;
}

.pager a
{
    color: black;
    padding: 2px 9px;
    border: white 1px solid
}
.pager span
{
    background-color: #C30D09;
    color: #FFFFFF;
    padding: 2px 8px;
    border: #C30D09 1px solid

}


.pager a:hover
{
    text-decoration: none !important;
    color: #C30D09;
    border: #C30D09 1px solid
}

/*GridView End*/

/*GridView Quality Control*/

.header-qualcontrol {
    background-color: white;
    font-family: Arial;
    color: black;
    border: none 0px transparent;
    border-bottom: grey;
    text-align: center;
    font-size: 12px;
}

.rows-qualcontrol {
    background-color: #fff;
    font-family: Arial;
    font-size: 12px;
    color: #000;
    text-align: center;
    border: none 1px grey;
}

    .rows-qualcontrol:hover {
        background-color: #CFEBFD;
        font-family: Arial;
        color: #000;
        text-align: center;
    }

.altrows-qualcontrol {
    background-color: lightgray;
    font-family: Arial;
    font-size: 12px;
    color: #000;
    text-align: center;
    border: none 1px grey;
}

    .altrows-qualcontrol:hover {
        background-color: #CFEBFD;
        font-family: Arial;
        color: #000;
        text-align: center;
    }
.datagrid-qualcontrol td {
    padding: 6px;
}

.datagrid-qualcontrol img {
    width: 14px;
}

.datagrid-qualcontrol th {
    padding: 6px;
}

.datagrid-qualcontrol {
    border: none;
}
/*GridView Quality Control End*/

/*GridView Grouped Header End*/
.datagrid-grouped td {
    padding: 5px;
}

.datagrid-grouped img {
    width: 10px;
    height: 10px;
}

.datagrid-grouped th {
    padding: 6px;

}

.datagrid-grouped {
    border: none;
}

.header-grouped {
    background-color: white;
    font-family: Arial;
    color: black;
    border: none 0px transparent;
    /*border-bottom: grey;*/
    height: 20px;
    text-align: center !important;
    font-size: 12px;
    font-weight: 600;
    background-color: lightgrey;

}

.header-grouped-asc, .header-grouped-desc {
    background-color: white;
    font-family: Arial;
    color: black;
    border: none 0px transparent;
    /*border-bottom: grey;*/
    height: 20px;
    text-align: center !important;
    font-size: 12px;
    font-weight: 600;
}

.header-grouped-asc a:link, .header-grouped-asc a:visited, .header-grouped-asc a:active {
    text-decoration: none !important;
    color: black
}

.header-grouped-asc a:hover {
    text-decoration: none !important;
    color: darkred
}

.header-grouped-desc a:link, .header-grouped-desc a:visited, .header-grouped-desc a:active {
    text-decoration: none !important;
    color: darkred
}

.header-grouped-desc a:hover {
    text-decoration: none !important;
    color: darkred
}

.rows-grouped {
    background-color: #fff;
    font-family: Arial;
    font-size: 12px;
    color: #000;
    min-height: 20px;
    text-align: left;
    border: 1px lightgrey;
    border-bottom: 1px lightgrey;
}

    .rows-grouped:hover {
        background-color: #CFEBFD;
        font-family: Arial;
        color: #000;
        text-align: left;
    }

.altrows-grouped {
    background-color: #EAEAEA;
    font-family: Arial;
    font-size: 12px;
    color: #000;
    min-height: 20px;
    text-align: left;
    border: 1px lightgrey;
    border-bottom: 1px lightgrey;
}

    .altrows-grouped:hover {
        background-color: #CFEBFD;
        font-family: Arial;
        color: #000;
        text-align: left;
    }

.pager-grouped {
    background-color: #fff;
    font-family: Arial;
    font-size: 14px;
    color: #000;
    text-decoration: none;
    border: none 0px transparent;
}

    .pager-grouped a {
        color: black;
        padding: 2px 9px;
        border: white 1px solid
    }

    .pager-grouped span {
        background-color: #C30D09;
        color: #FFFFFF;
        padding: 2px 8px;
        border: #C30D09 1px solid
    }


    .pager-grouped a:hover {
        text-decoration: none !important;
        color: #C30D09;
        border: #C30D09 1px solid
    }

/*GridView Grouped Header End*/

/*Textbox*/

.searchBoxCenter {
    text-align: CENTER;
    width: 100%;
    height: 34px;
    padding: 6px 12px;
    font-size: 14px;
    line-height: 1.42857143;
    color: #555;
    background-color: #fff;
    background-image: none;
    border: 1px solid #ccc;
    border-radius: 4px;
    -webkit-box-shadow: inset 0 1px 1px rgba(0, 0, 0, .075);
    box-shadow: inset 0 1px 1px rgba(0, 0, 0, .075);
    -webkit-transition: border-color ease-in-out .15s, -webkit-box-shadow ease-in-out .15s;
    -o-transition: border-color ease-in-out .15s, box-shadow ease-in-out .15s;
    transition: border-color ease-in-out .15s, box-shadow ease-in-out .15s;
}

.searchBoxCenter:focus {
    border-color: #66afe9;
    outline: 0;
    -webkit-box-shadow: inset 0 1px 1px rgba(0,0,0,.075), 0 0 8px rgba(102, 175, 233, .6);
    box-shadow: inset 0 1px 1px rgba(0,0,0,.075), 0 0 8px rgba(102, 175, 233, .6);
}

.searchBoxCenter:hover {
    background-color: #F9F9F9
}

.searchBoxLeft {
    text-align: LEFT;
    width: 100%;
    height: 34px;
    padding: 6px 12px;
    font-size: 14px;
    line-height: 1.42857143;
    color: #555;
    background-color: #fff;
    background-image: none;
    border: 1px solid #ccc;
    border-radius: 4px;
    box-shadow: inset 0 1px 1px rgba(0, 0, 0, .075);
}

#MessageThreadsPageFormat {
    position: fixed;
}

.createNewThread {
    margin: 5px;
    width: fit-content;
    margin-bottom: 15px;
}

.btnStartNewThread {
    width: fit-content;
    margin-left: 5px;
}

.messageThreadsUpdatePanel {
    display: flex;
    height: fit-content;
    width: min-content;
}

.searchBoxLeftMinWidth {
    text-align: LEFT;
    width: 100%;
    height: 55.3rem;
    padding: 6px 12px;
    font-size: 14px;
    line-height: 1.42857143;
    color: #555;
    background-color: #fff;
    background-image: none;
    border: 1px solid #ccc;
    border-radius: 4px;
    box-shadow: inset 0 1px 1px rgba(0, 0, 0, .075);
    min-width: 200px;
    max-width: 200px;
}

.searchBoxLeft:focus {
    border-color: #66afe9;
    outline: 0;
    -webkit-box-shadow: inset 0 1px 1px rgba(0,0,0,.075), 0 0 8px rgba(102, 175, 233, .6);
    box-shadow: inset 0 1px 1px rgba(0,0,0,.075), 0 0 8px rgba(102, 175, 233, .6);
}

.searchBoxLeft:hover {
    background-color: #F9F9F9
}

/*Textbox End*/

.resizable {
    resize: both; /* Allows resizing in both directions (horizontally and vertically) */
    overflow: auto; /* Set overflow to something other than 'visible' */
    min-height: 30px; /* Minimum height */
    min-width: 30px; /* Minimum width */
    max-height: fit-content; /* Optional: Set maximum height */
    max-width: fit-content; /* Optional: Set maximum width */
}

.messageAreaInformation {
    margin-bottom: 15px;
    display: flex;
    align-items: end;
    justify-content: end;
    width: 78%;
}

.conversationBubbleMe {
    border-radius: 10px;
    padding: 5px;
    /*margin-bottom: 2px;*/
    background-color: forestgreen;
    color: #fff;
    height: auto;
    width: max-content;
    max-width: 1115px;
}

.conversationBubblOperator {
    border-radius: 10px;
    padding: 5px;
    /*margin-bottom: 2px;*/
    background-color: dodgerblue;
    color: #fff;
    height: auto;
    width: max-content;
    max-width: 1125px;
}

.textAreaLeftFlex {
    text-align: LEFT;
    width: 100%;
    max-height: 95px;
    max-width: 350px;
    min-height: 95px;
    min-width: 300px;
    background-color: transparent;
    border-radius: 4px;
}

.textAreaRightFlex {
    text-align: LEFT;
    width: 100%;
    max-height: 205px;
    max-width: 545px;
    min-height: 95px;
    min-width: 460px;
    background-color: transparent;
    border-radius: 4px;
}

/*Checkbox*/
.CheckBox {
    text-align: left;
    font-size: small;
    line-height: 1em;
    display: inline-table;
}

.NotesCheckBox {
    text-align: left;
    font-size: small;
    line-height: 2em;
    display: inline-table;

    margin-top: 20px;
}

.CheckBox input 
{ 
    margin-left: -20px; 
}

.CheckBox tr {
    float:left;
    margin-right:20px;
}

.NotesCheckBox tr {
    float: left;
    margin-right: 20px;
}

.CheckBox td 
{
    display: inline-table;
    padding-left: 20px;
}

.NotesCheckBox td {
    display: inline-table;
    padding-left: 20px;
    width: max-content;
}

.CheckBox tr label{
    margin-left:5px;
}

.NotesCheckBox tr label {
    margin-left: 5px;
    /*width: 80px;*/
    display: initial;
    /*padding-right: 30px;*/
}

.CheckBox label {
    line-height: 1em;
}
/*Checkbox End*/

/*Checkbox large*/
.CheckBox-Large {
    text-align: left;
    font-size: small;
    line-height: 1em;
    display: inline-table;
}

.CheckBox-Large input {
    margin-left: -20px;
}

.CheckBox-Large tr {
    float: left;
    margin-right: 20px;
}

.CheckBox-Large td {
    display: inline-block;
    padding-left: 20px;
}

.CheckBox-Large tr label {
    margin-left: 5px;
}

.CheckBox-Large label {
    line-height: 1em;
}

/*Checkbox End*/



/*Job Details Specific*/
#jobSearchWrapper {
    overflow: hidden;
}

#searchLeft {
    float:left; 
    padding-right: 30px
}
#searchRight {
    padding-top: 9px;
}


.jobDetailsDiv {
    display: inline-grid;
    float: left;
    padding: 8px;
}


#referenceDetailContainer {
    display: flex;
    flex-direction: row;
    flex-wrap: wrap;
}

#referenceDetailContainer div {
    width: 33%;
    display: grid;
    height: 100%;
    padding: 10px;
}

#printeDetailsContaineer {
    display: flex;
    flex-direction: row;
    flex-wrap: wrap;
}

#printeDetailsContaineer div {
    width: 33%;
    display: grid;
    height: 100%;
    padding: 10px;
}

#productionDetailContainer {
    display: flex;
    flex-direction: row;
    flex-wrap: wrap;
}

#productionDetailContainer div {
    width: 33%;
    display: grid;
    height: 100%;
    padding: 10px;
}

#productDetailContainer {
    display: flex;
    flex-direction: row;
    flex-wrap: wrap;
}

#productDetailContainer div {
    width: 33%;
    display: grid;
    height: 100%;
    padding: 10px;
}


#jobDetailContainer {
    display: flex;
    flex-direction: row;
    flex-wrap: wrap;
    justify-content: left;
}

#jobDetailContainer div {
    width: 33%;
    display: grid;
    height: 100%;
    padding: 10px;
}

.jobDetailsLabel {
    font-size: medium;
    font-weight: bolder;
}


.input-color {
    position: relative;
    display: inline;
}

.input-color label {
    padding-left: 20px;
    width: 12%;
}
.input-color .color-box {
    width: 12px;
    height: 12px;
    position: absolute;
    left: 3px;
    top: 3px;
}
/*Job Details Specific End*/

/*Shift Planning Specific*/
.shiftContainer {
    display: inline-block;
    width: 750px;
    margin: 1em;
}

.resultLabel {
    font-size: 20px;
    font-weight: bolder;
    text-align: center;
    border-radius: 3px;
    width: 100%;
}


.shiftDetailLabelDiv {
    background: #C30D09;
    text-align: center;
    
}

.shiftDetailCurrentLabelDiv {
    background: #54B948;
    text-align: center;
    
}

.shiftDetailLabel {
    font-weight: bolder;
    font-size: 16px;
    color: white;
    text-align: center;

}

.earlyGroupEdit {
    background-color: LightYellow;
}

.lateGroupEdit {
    background-color: #febf58;
    margin: 10px;
}
.eveGroupEdit {
    background-color: #546bab;
    margin: 10px;
}

.dayRow {
    width: 100px
}

.selectTable{
    display: table;
    width: auto;
    position: center;
}

.selectTableRowDay {
    display: table-row;
}

.selectTableRowApprentice {
    display: table-row;
}

.divTableHeading {
    background-color: #EEE;
    display: table-header-group;
}

.selecTableCellDay, .divTableHead {
    display: table-cell;
    padding: 3px 10px;
}

.selecTableCellDay2, .divTableHead {
    display: table-cell;
    position: center;
    padding: 3px 10px;
}

.divTableHeading {
    background-color: #EEE;
    display: table-header-group;
    font-weight: bold;
}

.divTableFoot {
    background-color: #EEE;
    display: table-footer-group;
    font-weight: bold;
}

.selectTableBody {
    display: table-row-group;
}

.columnInfo {
    float: left;
    width: 50%;
}


#shiftViewControlWrapper {
    overflow: hidden; 
}

#searchLeft {
    float:left; 
    padding-right: 30px
}

#createShiftYearWeekWrapper {
    overflow: hidden; 
}

#searchLeftYearWeek {
    float:left; 
    padding-right: 0px
}


#createShiftMachineScheduleWrapper {
    overflow: hidden; 
}

#searchLeftMachineSchedule {
    float:left; 
    padding-right: 30px
}


#shiftViewControls {
    overflow: hidden; 
}

#leftControlWrapper {
    float:left; 
    padding-right: 20px
}


.controlsWrapper {
    width: 100%;
    display: flex;
}

table.shiftDetailGrid {
    border: 1px solid #999999;
    width: 100%;
    text-align: center;
    border-collapse: collapse;
}

table.shiftDetailGrid td {
    text-align: center;
    border: 1px solid #999999;
    padding: 3px 4px;
}

table.shiftDetailGrid tbody td {
    font-size: 13px;
}

table.shiftDetailGrid th {
    background: lightyellow;
    text-align: center;
    border-left: black
}

.highlighted {
    background: lightyellow;
    text-align: center;
    border-left: black
}

.sundayshift {
    background: #EDEDED;
    text-align: center;
    border-left: black
}

.holidaySicknessUnassaignedLabel {
    background: #C30D09;
    color: white;
    text-align: center;
    width: 100%;
    font-size: 16px; 
    text-align: center;
    font-family: Arial;
    font-weight: bolder;
}


/*Shift Planning Specific End*/

.divCenterRow {
    width: 300px;
    height: 300px;
    position: absolute;
    left: 50%;
    top: 50%; 
    margin-left: -150px;
    margin-top: -150px;
}

.filterControls {
     /*width:;/* add the width here */
     position: static;
     background: white;
}

.filterControls.scrolling {
    position:fixed;
    padding: 10px;
    width: 80%;
    left: 100px;
    top:60px;
    background: white;
    border: #555555 1px solid;
    border-radius: 4px;
    box-shadow: inset 0 1px 1px rgba(0,0,0,.075), 0 0 20px rgba(0,0,0, .9);
}

/*Loading Animations*/

#floatingCirclesG{
	position:relative;
	width:125px;
	height:125px;
	margin:auto;
	transform:scale(0.6);
		-o-transform:scale(0.6);
		-ms-transform:scale(0.6);
		-webkit-transform:scale(0.6);
		-moz-transform:scale(0.6);
}

.f_circleG{
	position:absolute;
	background-color:rgb(255,255,255);
	height:22px;
	width:22px;
	border-radius:12px;
		-o-border-radius:12px;
		-ms-border-radius:12px;
		-webkit-border-radius:12px;
		-moz-border-radius:12px;
	animation-name:f_fadeG;
		-o-animation-name:f_fadeG;
		-ms-animation-name:f_fadeG;
		-webkit-animation-name:f_fadeG;
		-moz-animation-name:f_fadeG;
	animation-duration:1.2s;
		-o-animation-duration:1.2s;
		-ms-animation-duration:1.2s;
		-webkit-animation-duration:1.2s;
		-moz-animation-duration:1.2s;
	animation-iteration-count:infinite;
		-o-animation-iteration-count:infinite;
		-ms-animation-iteration-count:infinite;
		-webkit-animation-iteration-count:infinite;
		-moz-animation-iteration-count:infinite;
	animation-direction:normal;
		-o-animation-direction:normal;
		-ms-animation-direction:normal;
		-webkit-animation-direction:normal;
		-moz-animation-direction:normal;
}

#frotateG_01{
	left:0;
	top:51px;
	animation-delay:0.45s;
		-o-animation-delay:0.45s;
		-ms-animation-delay:0.45s;
		-webkit-animation-delay:0.45s;
		-moz-animation-delay:0.45s;
}

#frotateG_02{
	left:15px;
	top:15px;
	animation-delay:0.6s;
		-o-animation-delay:0.6s;
		-ms-animation-delay:0.6s;
		-webkit-animation-delay:0.6s;
		-moz-animation-delay:0.6s;
}

#frotateG_03{
	left:51px;
	top:0;
	animation-delay:0.75s;
		-o-animation-delay:0.75s;
		-ms-animation-delay:0.75s;
		-webkit-animation-delay:0.75s;
		-moz-animation-delay:0.75s;
}

#frotateG_04{
	right:15px;
	top:15px;
	animation-delay:0.9s;
		-o-animation-delay:0.9s;
		-ms-animation-delay:0.9s;
		-webkit-animation-delay:0.9s;
		-moz-animation-delay:0.9s;
}

#frotateG_05{
	right:0;
	top:51px;
	animation-delay:1.05s;
		-o-animation-delay:1.05s;
		-ms-animation-delay:1.05s;
		-webkit-animation-delay:1.05s;
		-moz-animation-delay:1.05s;
}

#frotateG_06{
	right:15px;
	bottom:15px;
	animation-delay:1.2s;
		-o-animation-delay:1.2s;
		-ms-animation-delay:1.2s;
		-webkit-animation-delay:1.2s;
		-moz-animation-delay:1.2s;
}

#frotateG_07{
	left:51px;
	bottom:0;
	animation-delay:1.35s;
		-o-animation-delay:1.35s;
		-ms-animation-delay:1.35s;
		-webkit-animation-delay:1.35s;
		-moz-animation-delay:1.35s;
}

#frotateG_08{
	left:15px;
	bottom:15px;
	animation-delay:1.5s;
		-o-animation-delay:1.5s;
		-ms-animation-delay:1.5s;
		-webkit-animation-delay:1.5s;
		-moz-animation-delay:1.5s;
}



@keyframes f_fadeG{
	0%{
		background-color:rgb(212,38,47);
	}

	100%{
		background-color:rgb(255,255,255);
	}
}

@-o-keyframes f_fadeG{
	0%{
		background-color:rgb(212,38,47);
	}

	100%{
		background-color:rgb(255,255,255);
	}
}

@-ms-keyframes f_fadeG{
	0%{
		background-color:rgb(212,38,47);
	}

	100%{
		background-color:rgb(255,255,255);
	}
}

@-webkit-keyframes f_fadeG{
	0%{
		background-color:rgb(212,38,47);
	}

	100%{
		background-color:rgb(255,255,255);
	}
}

@-moz-keyframes f_fadeG{
	0%{
		background-color:rgb(212,38,47);
	}

	100%{
		background-color:rgb(255,255,255);
	}
}


/*End Loading Animations*/

/*Costings*/

.costingsInputBox {
    text-align: CENTER;
    width: 100%;
    height: 34px;
    padding: 6px 12px;
    margin: 2px;
    font-size: 14px;
    line-height: 1.42857143;
    color: #555;
    background-color: #fff;
    background-image: none;
    border: 1px solid #ccc;
    border-radius: 4px;
    -webkit-box-shadow: inset 0 1px 1px rgba(0, 0, 0, .075);
    box-shadow: inset 0 1px 1px rgba(0, 0, 0, .075);
    -webkit-transition: border-color ease-in-out .15s, -webkit-box-shadow ease-in-out .15s;
    -o-transition: border-color ease-in-out .15s, box-shadow ease-in-out .15s;
    transition: border-color ease-in-out .15s, box-shadow ease-in-out .15s;
}

.costingsInputBox:focus {
    border-color: #66afe9;
    outline: 0;
    -webkit-box-shadow: inset 0 1px 1px rgba(0,0,0,.075), 0 0 8px rgba(102, 175, 233, .6);
    box-shadow: inset 0 1px 1px rgba(0,0,0,.075), 0 0 8px rgba(102, 175, 233, .6);
}

.costingsInputBoxError {
    border-color: red;
    outline: 0;
    -webkit-box-shadow: inset 0 1px 1px rgba(0,0,0,.075), 0 0 8px rgba(102, 175, 233, .6);
    box-shadow: inset 0 1px 1px rgba(0,0,0,.075), 0 0 8px rgba(102, 175, 233, .6);
}

.costingsInputBox:hover {
    background-color: #F9F9F9
}

.costingsDivGroup {
    padding: 5px
}

.costingsLabel {
    font-size: 15px
}

.costingsData {
    font-size: 15px;
    color: #4682b4
}

.costingsDataBorder {
    border: 1px solid #CCCCCC;
    border-radius: 5px;
    padding: 5px;
    height: 340px;
}

.costingsOutputDataBorder {
    border: 1px solid #CCCCCC;
    border-radius: 5px;
    padding: 10px;
}

.costingsInputWrapper {
    border: 1px solid #CCCCCC;
    border-radius: 5px;
    padding: 5px;
    height: 340px;

}

.calcWrapper {
    border: 1px solid #CCCCCC;
    border-radius: 5px;
    margin: 0px;
    padding: 20px;

}

.costingsDataPercent {
    font-size: 18px;
    color: #d22630
}

.costingsContainer {
    margin: 10px;

}

/*Key Colours*/

.keyUnknown {
    width: 150px;
    text-align: center;
    font-weight: bold;
    line-height: 150%;
    font-size: .85em;
    background-color: #000000;
    color: black;
}

.keySetup {
    width: 150px;
    text-align: center;
    font-weight: bold;
    line-height: 150%;
    font-size: .85em;
    background-color: #ffffc9;
    color: black;
}

.keyProduction {
    width: 150px;
    text-align: center;
    font-weight: bold;
    line-height: 150%;
    font-size: .85em;
    background-color: #F0F0F0;
    color: black;
}


.keyIdle {
    width: 150px;
    text-align: center;
    font-weight: bold;
    line-height: 150%;
    font-size: .85em;
    background-color: #ff8585;
    color: black;
}


.keyMaintainence {
    width: 150px;
    text-align: center;
    font-weight: bold;
    line-height: 150%;
    font-size: .85em;
    background-color: #cae3eb;
    color: black;
}


.keyCleaning {
    width: 150px;
    text-align: center;
    font-weight: bold;
    line-height: 150%;
    font-size: .85em;
    background-color: #008000;
    color: black;
}


.keyQA {
    width: 150px;
    text-align: center;
    font-weight: bold;
    line-height: 150%;
    font-size: .85em;
    background-color: #e8bae8;
    color: black;
}


.keyBreaks {
    width: 150px;
    text-align: center;
    font-weight: bold;
    line-height: 150%;
    font-size: .85em;
    background-color: #fcce9d;
    color: black;
}

.keyRewinding {
    width: 150px;
    text-align: center;
    font-weight: bold;
    line-height: 150%;
    font-size: .85em;
    background-color: pink;
    color: black;
}

.key {
    width: 150px;
    text-align: center;
    font-weight: bold;
    line-height: 150%;
    font-size: .85em;
}

.belowEstimateLabel {
    width: 150px;
    text-align: center;
    font-weight: bold;
    line-height: 150%;
    font-size: .85em;
    background-color: darkgreen;
    color: white
}

.withinToleranceLabel {
    width: 150px;
    text-align: center;
    font-weight: bold;
    line-height: 150%;
    font-size: .85em;
    background-color: lightgreen
}

.outsideToleranceLabel {
    width: 150px;
    text-align: center;
    font-weight: bold;
    font-weight: bold;
    line-height: 150%;
    font-size: .85em;
    background-color: #FFD700
}

.outsideToleranceLabelBelow {
    width: 150px;
    text-align: center;
    font-weight: bold;
    font-weight: bold;
    line-height: 150%;
    font-size: .85em;
    background-color: orange
}

.doubleToleranceLabel {
    width: 150px;
    text-align: center;
    font-weight: bold;
    line-height: 150%;
    font-size: .85em;
    background-color: #FF8C00
}

.doubleEstimateLabel {
    width: 150px;
    text-align: center;
    font-weight: bold;
    line-height: 150%;
    font-size: .85em;
    background-color: #e52d2d
}

.notAllowedLabel {
    width: 150px;
    text-align: center;
    font-weight: bold;
    line-height: 150%;
    font-size: .85em;
    color: whitesmoke;
    background-color: #e52d2d
}

.allowedLabel {
    width: 150px;
    text-align: center;
    font-weight: bold;
    line-height: 150%;
    font-size: .85em;
    background-color: lightgreen
}

.keyBorder {
    border-left: 1px grey;
    border-top: 1px grey;
    border-bottom: 1px grey;
    border-right: 1px grey;
    border-top-left-radius: 8px;
    border-bottom-left-radius: 8px;
    box-shadow: inset 0 1px 2px rgba(0,0,0,.075), 0 0 3px rgba(0, 0, 0, .7);
}

.LockOn {
    display: block;
    visibility: visible;
    position: absolute;
    z-index: 1;
    top: 0px;
    left: 0px;
    width: 100%;
    height: 100%;
    background-color:white;
    vertical-align:bottom;
    padding-top: 20%;
    filter: alpha(opacity=40);
    opacity: 0.75;
    font-size:large;
    color:blue;
    font-style:italic;
    font-weight:400;
    background-image: url("../Content/Images/Loading.gif");
    background-repeat: no-repeat;
    background-attachment: fixed;
    background-position: center;
}

.shiftLeaderData {

    text-align: center;
}

.shiftLeaderLabel {
    background: #C30D09;
    text-align: center;
    font-weight: bold;
    color: whitesmoke;
    padding: 2px;
    height: 30px;

}

.inlineControlsLeader {
    display: inline-flex;
}

.inlineControlsLeader > div
{
    margin-top: 5px;
    margin-bottom: 5px;
    margin-right:10px;  
}

/*.inlineControlsLeader > input
{
    margin-top: 5px;
    margin-bottom: 5px;
    margin-right:10px;  
}*/

.groupBorder {
    border-left: 1px solid lightgrey;
    border-right: 1px solid lightgrey;
    border-top: 1px solid lightgrey;
    border-bottom: 1px solid lightgrey;
    margin: 1px;

}
	
#holidayGridViewContainer{
    /*height: 200px;
    overflow: scroll;
    overflow-x: hidden;
    overflow-y: auto;*/
}

	
#sickOtherGridViewContainer{
    /*height: 200px;
    overflow: scroll;
    overflow-x: hidden;
    overflow-y: auto;*/
}

#unassignedEmployeesContainer{
    float: right;
    padding-right: 20px;
    width: 22%;
    height: auto
}

#unassignedEmployeesGridViewContainer{
    height: 550px;
    overflow: scroll;
    overflow-x: hidden;
    overflow-y: auto;
}

#modifyUserEventsContainer{
    height: 700px;
}

#modifyUserEventsGridViewContainer{
    height: 100%;
    overflow: scroll;
    overflow-x: hidden;
    overflow-y: auto;
}


#weekControlsLeft {
    width: 75%;
    margin: 20px;
    float: left;

}

#weekControlsright {

}

#weekManagementContainer {

}

.unnasignedListHeader {
    background-color: white;
    font-family: Arial;
    color: black;
    border: none 0px transparent;
    border-bottom: grey;
    height: 20px;
    text-align: center;
    font-size: 12px;
}

.unnasignedListRows {
    background-color: #fff;
    font-family: Arial;
    font-size: 12px;
    color: #000;
    min-height: 20px;
    text-align: left;
    border: none 0px transparent;
    border-bottom: 1px whitesmoke;
}

.unnasignedListRows:hover
{
    background-color: #CFEBFD;
    font-family: Arial;
    color: #000;
    text-align: left;
}

.unnasignedListRowsaltrows {
    background-color: #E8E8E8;
    font-family: Arial;
    font-size: 12px;
    color: #000;
    min-height: 20px;
    text-align: left;
    border: none 0px transparent;
    border-bottom: 1px whitesmoke;
}

.unnasignedListRowsaltrows:hover
{
    background-color: #CFEBFD;
    font-family: Arial;
    color: #000;
    text-align: left;
}

.shiftWeekManagerHeader {
    background-color: white;
    font-family: Arial;
    color: black;
    border: none 0px transparent;
    border-bottom: grey;
    height: 20px;
    text-align: center;
    font-size: 12px;
}

.shiftWeekManagerFooter {
    background-color: white;
    font-family: Arial;
    color: black;
    border: none 0px transparent;
    border-bottom: grey;
    height: 20px;
    font-size: 12px;
}

.shiftWeekManagerRows {
    background-color: #fff;
    font-family: Arial;
    font-size: 12px;
    color: #000;
    min-height: 20px;
    text-align: left;
    border: none 0px transparent;
    border-bottom: 1px whitesmoke;
}

.shiftWeekManagerRows:hover
{
    background-color: #CFEBFD;
    font-family: Arial;
    color: #000;
    text-align: left;
}

.shiftWeekManagerRowsaltrows {
    background-color: #E8E8E8;
    font-family: Arial;
    font-size: 12px;
    color: #000;
    min-height: 20px;
    text-align: left;
    border: none 0px transparent;
    border-bottom: 1px whitesmoke;
}

.shiftWeekManagerRowsaltrows:hover
{
    background-color: #CFEBFD;
    font-family: Arial;
    color: #000;
    text-align: left;
}


#leftFooter-Default {
    display: inline-block;
    float: left;
    height: 45px;
    text-align: center;
    color: #FFFFFF;
}
#fillerFooter-Default {
    height: 45px;
    background-repeat: repeat-x;
    background-image: url('Images/login/nagels-middle-footer.png');
}
#rightFooter-Default {
    display: inline-block;
    float: right;
    height: 45px;
    text-align: center;
}
#containFooter-Default {
    width: 92%;
    position: absolute;
    
    height: 45px;
    padding: 0;
    left: 4%;
    display: inline;
    bottom: 29px;
}

.footer {
    position: fixed;
    left: 0;
    bottom: 0;
    width: 100%;
    height: 23px;
    background-color: #ededed;
    text-align: center;
    font-size:12px;
    padding:4px;
    z-index: 10000;
}

.nagelsFont {
    font-family: "Arial Black", Gadget, sans-serif;
    font-size: 50px;
    letter-spacing: -4px;
    word-spacing: -0.8px;
    color: #D22630;
    font-weight: 700;
    text-decoration: none;
    font-style: normal;
    font-variant: normal;
    text-transform: uppercase;
}

.errorFont {
    font-family: "Arial Black", Gadget, sans-serif;
    font-size: 20px;
    letter-spacing: -1px;
    word-spacing: -0.8px;
    color: #D22630;
    font-weight: 700;
    text-decoration: none;
    font-style: normal;
    font-variant: normal;
    text-transform: uppercase;
}

.buttonPaddingRight {
    padding-right: 10px
}


.container_row{
    display: flex;
}

.expandIcons {
    height: 10px;
    width: 10px
}


.expandTable {
    border: 3px solid steelblue;
}

.expanddatagrid td {
    padding: 5px;
    border: 1px solid lightgrey;
}
.expanddatagrid th {
    padding: 5px;
    border: 1px solid lightgrey;
}

.expanddatagrid {
    /*border: 1px solid whitesmoke;*/
}

.expandheader {
    background-color: lightgrey;
    font-family: Arial;
    color: black;
    height: 20px;
    text-align: center;
    font-size: 11px;
}


.expandrows {
    background-color: whitesmoke;
    font-family: Arial;
    font-size: 11px;
    color: #000;
    min-height: 20px;
    text-align: left;
    border: none 0px transparent;
}

.expandrows:hover
{
    background-color: #CFEBFD;
    font-family: Arial;
    color: #000;
    text-align: left;
}

.expandaltrows {
    background-color: #E8E8E8;
    font-family: Arial;
    font-size: 12px;
    color: #000;
    min-height: 20px;
    text-align: left;
    border: none 0px transparent;
    border-bottom: 1px whitesmoke;
}

.expandaltrows:hover
{
    background-color: #CFEBFD;
    font-family: Arial;
    color: #000;
    text-align: left;
}

.expanddatagrid-note td {
    padding: 5px;
}

.expanddatagrid-note th {
    padding: 5px;
}

.expanddatagrid-note {
    border: 1px solid lightgrey;
    width: 100%
}

.expandheader-note {
    background-color: whitesmoke;
    font-family: Arial;
    color: black;
    border: none 0px transparent;
    border-bottom: grey;
    height: 20px;
    text-align: center;
    font-size: 11px;
}

.expandrows-note {
    background-color: #fff;
    font-family: Arial;
    font-size: 11px;
    color: #000;
    min-height: 20px;
    text-align: left;
    border: none 0px transparent;
    border-bottom: 1px whitesmoke;
}

.expandrows-note:hover {
    background-color: #CFEBFD;
    font-family: Arial;
    color: #000;
    text-align: left;
}

.expandaltrows-note {
    background-color: #E8E8E8;
    font-family: Arial;
    font-size: 12px;
    color: #000;
    min-height: 20px;
    text-align: left;
    border: none 0px transparent;
    border-bottom: 1px whitesmoke;
}

    .expandaltrows-note:hover {
        background-color: #CFEBFD;
        font-family: Arial;
        color: #000;
        text-align: left;
    }

.weekLabel {
    color: #4682B4;
    font-weight: bold;
    font-size: 14px
}

.center-lbl {
    display: block;
    margin-left: auto;
    margin-right: auto;
    width: 50%;
    text-align: center;
}

.largeText {
    font-weight: bold;
    font-size: 90px
}

.medText {
    font-weight: bold;
    font-size: 20px;
}

.error-container > span.four {
	width: 136px;
	height: 43px;
	border-radius: 999px;
	background:
		linear-gradient(140deg, rgba(0, 0, 0, 0.1) 0%, rgba(0, 0, 0, 0.07) 43%, transparent 44%, transparent 100%),
		linear-gradient(105deg, transparent 0%, transparent 40%, rgba(0, 0, 0, 0.06) 41%, rgba(0, 0, 0, 0.07) 76%, transparent 77%, transparent 100%),
		linear-gradient(to right, #d89ca4, #e27b7e);
}
.error-container > span.four:before,
.error-container > span.four:after {
	content: '';
	display: block;
	position: absolute;
	border-radius: 999px;
}
.error-container > span.four:before {
	width: 43px;
	height: 156px;
	left: 60px;
	bottom: -43px;
	background:
		linear-gradient(128deg, rgba(0, 0, 0, 0.1) 0%, rgba(0, 0, 0, 0.07) 40%, transparent 41%, transparent 100%),
		linear-gradient(116deg, rgba(0, 0, 0, 0.1) 0%, rgba(0, 0, 0, 0.07) 50%, transparent 51%, transparent 100%),
		linear-gradient(to top, #99749D, #B895AB, #CC9AA6, #D7969E, #E0787F);
}
.error-container > span.four:after {
	width: 137px;
	height: 43px;
	transform: rotate(-49.5deg);
	left: -18px;
	bottom: 36px;
	background: linear-gradient(to right, #99749D, #B895AB, #CC9AA6, #D7969E, #E0787F);
}

.error-container > span.zero {
	vertical-align: text-top;
	width: 156px;
	height: 156px;
	border-radius: 999px;
	background: linear-gradient(-45deg, transparent 0%, rgba(0, 0, 0, 0.06) 50%,  transparent 51%, transparent 100%),
		linear-gradient(to top right, #99749D, #99749D, #B895AB, #CC9AA6, #D7969E, #ED8687, #ED8687);
	overflow: hidden;
	animation: bgshadow 5s infinite;
}
.error-container > span.zero:before {
	content: '';
	display: block;
	position: absolute;
	transform: rotate(45deg);
	width: 90px;
	height: 90px;
	background-color: transparent;
	left: 0px;
	bottom: 0px;
	background:
		linear-gradient(95deg, transparent 0%, transparent 8%, rgba(0, 0, 0, 0.07) 9%, transparent 50%, transparent 100%),
		linear-gradient(85deg, transparent 0%, transparent 19%, rgba(0, 0, 0, 0.05) 20%, rgba(0, 0, 0, 0.07) 91%, transparent 92%, transparent 100%);
}
.error-container > span.zero:after {
	content: '';
	display: block;
	position: absolute;
	border-radius: 999px;
	width: 70px;
	height: 70px;
	left: 43px;
	bottom: 43px;
	background: #FDFAF5;
	box-shadow: -2px 2px 2px 0px rgba(0, 0, 0, 0.1);
}

@keyframes bgshadow {
    0% {
        box-shadow: inset -160px 160px 0px 5px rgba(0, 0, 0, 0.4);
    }
    45% {
        box-shadow: inset 0px 0px 0px 0px rgba(0, 0, 0, 0.1);
    }
    55% {
        box-shadow: inset 0px 0px 0px 0px rgba(0, 0, 0, 0.1);
    }
    100% {
        box-shadow: inset 160px -160px 0px 5px rgba(0, 0, 0, 0.4);
    }
}

/*MakuGridView*/
.datagridmaku td {
    padding: 5px;
}
.datagridmaku img {
    width: 16px;
    height: 16px;
}
.datagridmaku th {
    padding: 6px;
}

.datagridmaku {
    border: none;
}

.headermaku {
    background-color: white;
    font-family: Arial;
    color: black;
    border: none 0px transparent;
    border-bottom: grey;
    height: 20px;
    text-align: center;
    font-size: 10px;
}

.rowsmaku {
    background-color: #fff;
    font-family: Arial;
    font-size: 10px;
    color: #000;
    min-height: 20px;
    text-align: left;
    border: none 0px transparent;
    border-bottom: 1px whitesmoke;
}

.rowsmaku:hover
{
    background-color: #CFEBFD;
    font-family: Arial;
    color: #000;
    text-align: left;
}

.altrowsmaku {
    background-color: #E8E8E8;
    font-family: Arial;
    font-size: 10px;
    color: #000;
    min-height: 20px;
    text-align: left;
    border: none 0px transparent;
    border-bottom: 1px whitesmoke;
}

.altrowsmaku:hover
{
    background-color: #CFEBFD;
    font-family: Arial;
    color: #000;
    text-align: left;
}

.pagermaku {
    background-color: #fff;
    font-family: Arial;
    font-size: 10px;
    color: #000;
    text-decoration: none;
    border: none 0px transparent;
}

.pagermaku a
{
    color: black;
    padding: 2px 9px;
    border: white 1px solid
}
.pagermaku span
{
    background-color: #C30D09;
    color: #FFFFFF;
    padding: 2px 8px;
    border: #C30D09 1px solid

}


.pagermaku a:hover
{
    text-decoration: none !important;
    color: #C30D09;
    border: #C30D09 1px solid
}

/*GridView End*/

.sideBySideContainer {
    display: flex;
}

.sideBySideLeft {
    padding: 2px;
    flex: 0 0 40%;
}

.sideBySideRight {
    flex: 1;
    padding: 2px;
}

/*.homeContainer { 
    display: inline-flex; 
}*/


.homeListGroupInline {
    display: inline-flex;

}

.homeListGroup {
    width: 60%;
    padding: 0 0 1em 0;
    margin-bottom: 1em;
    color: #333;
}

.homeListGroup ul {
    width: 100%;
    list-style: none;
    margin: 0;
    padding: 0;
    border: none;
}

.homeListGroup li {
    width: 100%;
    margin: 0;
    margin-right: 0%;
}

.homeListGroup li a {
    display: block;
    padding: 5px 5px 5px 0.5em;
    border-left: 10px solid #d22630;
    border-right: 1px solid #FFFFFF;
    background-color: #FFFFFF;
    color: #000000;
    text-decoration: none;
    width: 70%;
}

html>body .homeListGroup li a {
    width: 100%;
    width: auto;
}

.homeListGroup li a:hover {
    border-left: 10px solid #A81E26;
    background-color: #d22630;
    color: #fff;
}

.homeListGroupInlineNested {
    display: inline-flex;

}

.homeListGroupNested {
    width: 100%;
    padding: 0 0 1em 0;
    margin-bottom: 1em;
    color: #333;
}

.homeListGroupNested ul {
    width: 100%;
    list-style: none;
    margin: 0;
    padding: 0;
    border: none;
}

.homeListGroupNested li {
    width: 95%;
    margin: 0;
    margin-right: 0%;
}

.homeListGroupNested li a {
    display: block;
    padding: 5px 5px 5px 0.5em;
    border-left: 10px solid #d22630;
    border-right: 1px solid #FFFFFF;
    background-color: #FFFFFF;
    color: #000000;
    text-decoration: none;
    width: 100%;
    padding-right: 120px;
}

html>body .homeListGroupNested li a {
    width: 70%;
    width: auto;
}

.homeListGroupNested li a:hover {
    border-left: 10px solid #A81E26;
    background-color: #d22630;
    color: #fff;
}

.nopadding {
    padding: 0 !important;
    margin: 0 !important;
}

.barcodePrefix {
    color: dimgray;
    background-color: white;
    border: 1px solid gray;
    border-right: none;
    font-family: monospace;
    font-size: 16px;
}

.verticalAlign {
    vertical-align: middle;
 
    line-height: normal;
}

/*GridView*/
.datagrid-allowedPages td {
    padding: 0px;
}
.datagrid-allowedPages img {
    width: 12px;
    height: 12px;
}
.datagrid-allowedPages th {
    padding: 2px;
    text-align: left;
    border: 0px;
}

.datagrid-allowedPages th td:first-child /* all tables with class="myTable" */
{
    background-color: #FACF7B;
    text-align: left
}

.datagrid-allowedPages tr td:first-child /* all tables with class="myTable" */
{
    background-color: lightgrey;
    padding-right: 5px;
    text-align: right
}


.datagrid-fixedGridviewHeader
{
    font-weight:bold;
    position:absolute;
    background-color: #006699;

    color: #ffffff;

    height: 25px;

    top: expression(Sys.UI.DomElement.getBounds(document.getElementById("panelContainer")).y-25);

}

.datagr-fixedheader
{
    font-weight: bold;
    background-color: Green;
    position: relative;
    top: expression(this.parentNode.parentNode.parentNode.scrollTop-1);
}

.header-allowedPages {
    background-color: white;
    font-family: Arial;
    color: black;
    border: none 0px transparent;
    border-bottom: grey;
    height: 10px;
    text-align: center;
    font-size: 12px;
}

.rows-allowedPages {
    background-color: #fff;
    font-family: Arial;
    font-size: 12px;
    color: #000;
    text-align: center;
    border: none 0px transparent;
    border-bottom: 1px whitesmoke;
}

.rows-allowedPages:hover
{
    background-color: #CFEBFD;
    font-family: Arial;
    color: #000;
}

.ddlToLower { text-transform: capitalize; }


.datagrid-mobile td {
    padding: 0px;
}
.datagrid-mobile img {
    width: 12px;
    height: 12px;
}
.datagrid-mobile th {
    padding: 0px;
    text-align: center;
}

.datagrid-mobile th td:first-child /* all tables with class="myTable" */
{
    background-color: #FACF7B;
    text-align: left
}

.datagrid-mobile tr td:first-child /* all tables with class="myTable" */
{
    background-color: lightgrey;
    padding-right: 3px;
    text-align: right;
    border-right: 1px solid gray;
}


.datagrid-mobile {
    border: 1px solid gray;
    width: 100%;
}

.header-mobile {
    background-color: white;
    font-family: Arial;
    color: black;
    border: none 0px transparent;
    border-bottom: grey;
    height: 10px;
    text-align: center;
    font-size: 12px;
}

.header-mobile tr td:first-child
{
    background-color: lightgrey;
    padding-right: 1px;
    text-align: right;
    border-right: 1px whitesmoke;
}

.rows-mobile {
    background-color: #fff;
    font-family: Arial;
    font-size: 12px;
    color: #000;
    text-align: center;
    border: none 0px transparent;
    border-bottom: 1px whitesmoke;
}

.rows-mobile:hover
{
    background-color: #CFEBFD;
    font-family: Arial;
    color: #000;
}

/* defauly checkbox */
.checkcontainer {
    display: block;
    width: 225px;
    position: relative;
    padding-left: 25px;
    margin-bottom: 0px;
    cursor: pointer;
    font-size: 12px;
    -webkit-user-select: none;
    -moz-user-select: none;
    -ms-user-select: none;
    user-select: none;
}

.checkcontainer input {
    position: absolute;
    opacity: 0;
    cursor: pointer;
    height: 0;
    width: 0;
}

.checkmark {
    position: absolute;
    top: 0;
    left: 0;
    height: 17px;
    width: 17px;
    background-color: #eee;
}

.checkcontainer:hover input ~ .checkmark {
    background-color: #ccc;
}

.checkcontainer input:checked ~ .checkmark {
    background-color: #D22630;
}

.checkmark:after {
    content: "";
    position: absolute;
    display: none;
}

.checkcontainer input:checked ~ .checkmark:after {
    display: block;
}

.checkcontainer .checkmark:after {
    left: 5.5px;
    top: 2.5px;
    width: 5px;
    height: 10px;
    border: solid white;
    border-width: 0 3px 3px 0;
    -webkit-transform: rotate(45deg);
    -ms-transform: rotate(45deg);
    transform: rotate(45deg);
}

/* orange checkbox */
.checkcontainerorange {
    display: block;
    width: 160px;
    position: relative;
    padding-left: 25px;
    margin-bottom: 0px;
    cursor: pointer;
    font-size: 12px;
    -webkit-user-select: none;
    -moz-user-select: none;
    -ms-user-select: none;
    user-select: none;
}

.checkcontainerorange input {
    position: absolute;
    opacity: 0;
    cursor: pointer;
    height: 0;
    width: 0;
}

.checkmarkorange {
    position: absolute;
    top: 0;
    left: 0;
    height: 17px;
    width: 17px;
    background-color: #eee;
}

.container-qual {
    width: 100%;
    overflow-x: auto;
    white-space: nowrap;
}

.checkcontainerorange:hover input ~ .checkmarkorange {
    background-color: #ccc;
}

.checkcontainerorange input:checked ~ .checkmarkorange {
    background-color: #FF8300;
}

.checkmarkorange:after {
    content: "";
    position: absolute;
    display: none;
}

.checkcontainerorange input:checked ~ .checkmarkorange:after {
    display: block;
}

.checkcontainerorange .checkmarkorange:after {
    left: 5.5px;
    top: 2.5px;
    width: 5px;
    height: 10px;
    border: solid white;
    border-width: 0 3px 3px 0;
    -webkit-transform: rotate(45deg);
    -ms-transform: rotate(45deg);
    transform: rotate(45deg);
}

/* blue checkbox */

.checkcontainerblue {
    display: block;
    width: 160px;
    position: relative;
    padding-left: 25px;
    margin-bottom: 0px;
    cursor: pointer;
    font-size: 12px;
    -webkit-user-select: none;
    -moz-user-select: none;
    -ms-user-select: none;
    user-select: none;
}

.checkcontainerblue input {
    position: absolute;
    opacity: 0;
    cursor: pointer;
    height: 0;
    width: 0;
}

.checkmarkblue {
    position: absolute;
    top: 0;
    left: 0;
    height: 17px;
    width: 17px;
    background-color: #eee;
}

.checkcontainerblue:hover input ~ .checkmarkblue {
    background-color: #ccc;
}

.checkcontainerblue input:checked ~ .checkmarkblue {
    background-color: #2F8EFA;
}

.checkmarkblue:after {
    content: "";
    position: absolute;
    display: none;
}

.checkcontainerblue input:checked ~ .checkmarkblue:after {
    display: block;
}

.checkcontainerblue .checkmarkblue:after {
    left: 5.5px;
    top: 2.5px;
    width: 5px;
    height: 10px;
    border: solid white;
    border-width: 0 3px 3px 0;
    -webkit-transform: rotate(45deg);
    -ms-transform: rotate(45deg);
    transform: rotate(45deg);
}

.checkMarkLabel {
    color: #4682B4;
    font-weight: bold;
    font-size: 10px
}

.modal-full {
    min-width: 90% !important;
    margin: 0;
}

.modal-full .modal-content {
    min-height: 60vh;
}

.spEstimateDropDown{
    
    width: 50px;
    margin-left: auto;
    margin-top: 5px;
    height: 20px;
}

.spEstimateLabel {
    visibility: hidden;
    margin-left: auto;
    text-align: center;
    margin-top: 5px;
    height: 20px
}
.usagelabel {
    text-align: center;
    font-size: 35px;
    font-weight: bolder;
}

.upload-btn-wrapper {
    position: relative;
    overflow: hidden;
    display: inline-block;
}

.btn {
    border: 2px solid gray;
    color: gray;
    background-color: white;
    padding: 8px 20px;
    border-radius: 8px;
    font-size: 20px;
    font-weight: bold;
}

.btnGreen {
    border: 2px solid gray;
    color: white;
    background-color: green;
    padding: 8px 20px;
    border-radius: 8px;
    font-size: 20px;
    font-weight: bold;
}
.btnRed {
    border: 2px solid gray;
    color: white;
    background-color: red;
    padding: 8px 20px;
    border-radius: 8px;
    font-size: 20px;
    font-weight: bold;
}


.upload-btn-wrapper input[type=file] {
    font-size: 100px;
    position: absolute;
    left: 0;
    top: 0;
    opacity: 0;
}

.repairApprovalInfoLabel {
    color: #C30D09;
    display: inline-block;
    padding: 10px;
    width: 200px;
}
.repairApprovalDataLabel{

}

.repairApprovalTextBox {
    width: 200px;
    height: 22px;
}

.repairApprovalDropDown {
    width: 200px;
    height: 22px;
}

.repairsSendButton{
    margin-left: 10px;
}

.repairDataBox {
    width: 50%;
    outline: 1px solid #C30D09;
    padding-bottom: 10px;
}
.repairSentDataBox {
    width: 50%;
    outline: 1px solid #00663F;
    padding-bottom: 10px;
}

.repairApprovalHeaderLabel {
    background: #C30D09;
    color: white;
    text-align: center;
    width: auto;
    font-size: 16px;
    text-align: center;
    font-family: Arial;
    font-weight: bolder;
}

.repairApprovalSentHeaderLabel {
    background: #00663F;
    color: white;
    text-align: center;
    width: auto;
    font-size: 16px;
    text-align: center;
    font-family: Arial;
    font-weight: bolder;
}
.ApprovedLabel {
    background: #8FE388;
    display: inline-block;
    padding: 3px;
    width: 150px;
    color: white;
    text-align: center;
    font-size: 12px;
    text-align: center;
    font-family: Arial;
    font-weight: bolder;
    border-radius: 5px;
}

.AwaitingLabel {
    background: #A8A8A8;
    display: inline-block;
    color: white;
    padding: 3px;
    width: 150px;
    text-align: center;
    font-size: 12px;
    text-align: center;
    font-family: Arial;
    font-weight: bolder;
    border-radius: 5px;
}

.NotApprovedLabel {
    background: #FF6961;
    display: inline-block;
    color: white;
    padding: 3px;
    width: 150px;
    text-align: center;
    font-size: 12px;
    text-align: center;
    font-family: Arial;
    font-weight: bolder;
    border-radius: 5px;
}

.hidden {
    display: none !important;
}

.absolute-center {
    display: -ms-flexbox;
    display: -webkit-flex;
    display: flex;
    -ms-flex-align: center;
    -webkit-align-items: center;
    -webkit-box-align: center;
    align-items: center;
}

.modal {
    text-align: center;
    padding: 0 !important;
}

    .modal:before {
        content: '';
        display: inline-block;
        height: 100%;
        vertical-align: middle;
        margin-right: -4px;
    }

.modal-dialog {
    display: inline-block;
    text-align: center;
    vertical-align: middle;
}

.modal-body {
    display: inline-block;
    text-align: center;
    vertical-align: middle;
    height: 100px;
}

.modal-body-notes-template {
    display: inline-block;
    text-align: center;
    vertical-align: middle;
    height: 100px;
    align-content: center;
}

.modal-title {
    font-size: 2.0rem;
}

.dropdown-submenu {
    position: relative;
}

    .dropdown-submenu > .dropdown-menu {
        top: 0;
        left: 100%;
        margin-top: -6px;
        margin-left: -1px;
        -webkit-border-radius: 0 6px 6px 6px;
        -moz-border-radius: 0 6px 6px;
        border-radius: 0 6px 6px 6px;
    }

    .dropdown-submenu:hover > .dropdown-menu {
        display: block;
    }

    .dropdown-submenu > a:after {
        display: block;
        content: " ";
        float: right;
        width: 0;
        height: 0;
        border-color: transparent;
        border-style: solid;
        border-width: 5px 0 5px 5px;
        border-left-color: #ccc;
        margin-top: 5px;
        margin-right: -10px;
    }

    .dropdown-submenu:hover > a:after {
        border-left-color: #fff;
    }

    .dropdown-submenu.pull-left {
        float: none;
    }

        .dropdown-submenu.pull-left > .dropdown-menu {
            left: -100%;
            margin-left: 10px;
            -webkit-border-radius: 6px 0 6px 6px;
            -moz-border-radius: 6px 0 6px 6px;
            border-radius: 6px 0 6px 6px;
        }


.resizeTextbox {
    width: 200px !important;
    min-height: 25px !important;
    max-height: 200px !important;
    resize: none;
}

.opacityheader {
    opacity: 0.5
}
.no-notifications {
    color: #d22630;
    font-weight: bold;
    font-size: 14px
}

/* Style for the spinner */
#spinner {
    position: absolute; /* or absolute */
    top: 50%;
    left: 50%;
    width: 50px;
    height: 50px;
    border: 5px solid #f3f3f3; /* Light grey */
    border-top: 5px solid #3498db; /* Blue */
    border-radius: 50%;
    animation: spin 2s linear infinite;
}

/* Style for the overlay */
#overlayMT {
    position: fixed;
    width: 100%;
    height: 100%;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background-color: rgba(128, 128, 128, 0.5); /* Semi-transparent grey */
    z-index: 1000; /* Ensure it's on top of other content */
    display: flex;
    justify-content: center;
    align-items: center;
}

@keyframes spin {
    0% {
        transform: rotate(0deg);
    }

    100% {
        transform: rotate(360deg);
    }
}

.drpDwnReminders {
    /*margin: 5px;*/ 
    padding: 6px;
    text-align: center;
}

.radioBtnPadding label {
    padding-left: 8px;
}

.containerGrid {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    /*place-items:center*/
    overflow:revert-layer
}

.toolTipCss {
    font-size: small;
    position: absolute;
    border: 1px solid gray;
    width: 250px;
    background: lightgrey;
    border-radius: 25px;
    margin: 3rem;
    text-align: center;
    left: 100px;
    opacity: 70%;
}

.toolTipCssMessageThreads {
    position: absolute;
    opacity: 0%;
    display: none;
}

#headerDiv {
   display: flex;
}

.absoluteButtonGreen {
    position: absolute;
    top: 180px;
    width: 200px;
}

.absoluteButtonGrey {
    position: absolute;
    top: 225px;
    width: 200px;
}

.drpdwnBoxMaxWidth {
    width: max-content;
}

.labelMargin {
    margin-right: 10px;
}

#filters {
    display: flex;
    align-items: center;
}

#dateAndDropdowns {
    display: flex;
    flex-direction: column;
    margin-right: 20px;
}

#dateFilters, #dropdownFilters {
    display: flex;
    margin-bottom: 10px;
}

.filterGroup {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    margin-right: 20px;
}

#BtnFilterSearch {
    align-self: center;
}

.searchBoxLeft {
    /* Your existing styles */
}

.drpdwnBoxMaxWidth {
    /* Your existing styles */
}

.greyed-out {
    color: gray !important;
    pointer-events: none;
    background-color: #f0f0f0;
}

/* --------LegendBox---------- */

.legend-box {
    border: 1px solid #ccc;
    padding: 5px;
    width: fit-content;
    background-color: #f9f9f9;
    font-family: Arial, sans-serif;
    float: right;
}

.legend-item {
    display: flex;
    align-items: center;
    margin: 5px 0;
}

.color-dot {
    display: inline-block;
    width: 12px;
    height: 12px;
    border-radius: 50%;
    margin-right: 8px;
}

.color-red {
    background-color: #e74c3c;
}

.color-yellow {
    background-color: #f1c40f;
}

.color-green {
    background-color: #2ecc71;
}

.legend-label {
    font-size: 14px;
    color: #333;
}

.frequency-detail {
    display: inline-block;
    width: 50%;
}

/*----------------------- NOTE CATEGORIES -----------------------*/

/* Grid layout */
.notes-grid {
    display: grid;
    grid-template-columns: minmax(47%, 47%) minmax(25%, 25%) minmax(28%, 28%);
    align-items: stretch;
    overflow-x: auto;
}

@media (max-width: 1880px) {
    .notes-grid {
        grid-template-columns: 1fr;
        gap: 16px;
    }
}

/* Columns */
.notes-column {
    min-height: 300px;
    display: flex;
    flex-direction: column;
    justify-content: flex-start;
    border-right: 1px solid #ccc;
    padding-right: 15px;
    position: sticky;
    align-self: flex-start;
    background: #fff;
    z-index: 2;
    height: 810px;
}

/* Tree height */
.tree-height {
    flex: 1 1 auto;
    max-height: 720px;
    overflow-y: auto;
    scroll-behavior: smooth;
}

/* Controls */
.tree-controls {
    position: relative;
}

#TreeScroller {
    scroll-behavior: smooth;
}

.button-group {
    display: flex;
    gap: 3px;
    margin-bottom: 10px;
}

.button-row {
    display: flex;
    flex-direction: row;
    gap: 3px;
}

.controls-row {
    display: flex;
    flex-direction: row-reverse;
    align-items: flex-start;
    gap: 16px;
    height: 742px;
    max-height: 742px;
}

.child-list-container {
    /*    display: flex;
    max-height: 400px;
    overflow-y: auto;
    padding-right: 15px;*/
    display: flex;
    overflow-y: auto;
    padding-right: 15px;
    margin: 0 auto;
    flex-direction: column;
    justify-content: center;
    align-content: center;
    align-items: center;
}

@media (max-width: 1880px) {
    .controls-row {
        flex-direction: column;
    }

    .child-list-container {
        position: fixed;
        right: 0;
        width: 319px;
        height: 70%;
        z-index: 10;
        overflow-y: auto;
        bottom: 145px;
    }
}

/* Sortable list */
.sortable-list {
    width: 200px;
    max-height: 400px;
    overflow-y: auto;
    padding: 5px;
    padding-top: 30px;
}

    .sortable-list li {
        cursor: move;
        padding: 6px 10px;
        margin-bottom: 4px;
        background-color: #f9f9f9;
        border: 1px solid #ddd;
        border-radius: 4px;
        position: relative;
    }

        /* Instant tooltip */
        .sortable-list li::after {
            content: attr(data-tooltip);
            position: absolute;
            bottom: 100%;
            left: 90px;
            background: #333;
            color: #fff;
            padding: 4px 8px;
            border-radius: 4px;
            white-space: nowrap;
            opacity: 0;
            pointer-events: none;
            transition: none;
            z-index: 9999;
        }

        .sortable-list li:hover::after {
            opacity: 1;
        }


/* TreeView nodes */
.tv-node {
    font-family: 'Segoe UI', sans-serif;
    font-size: 16px;
    color: #333;
}

.tv-hover {
    color: #0066cc;
    text-decoration: underline;
    cursor: pointer;
}

.tv-selected {
    color: darkblue;
    background-color: #eef;
    padding: 2px 4px;
    border-radius: 3px;
}

/* Labels */
.label-new {
    color: darkblue;
    background-color: #eef;
    padding: 2px 4px;
    border-radius: 3px;
}

/* Textboxes */
#NodeDescriptionTextBox {
    resize: none;
    overflow: auto;
}

.fixed-textbox {
    resize: none;
    overflow: auto;
    padding: 8px 10px;
    font-family: "Segoe UI", sans-serif;
    font-size: 14px;
    border: 1px solid #ccc;
    border-radius: 4px;
}

    .fixed-textbox.readonly {
        background-color: #f0f0f0;
        color: #666;
    }

    .fixed-textbox.editing {
        background-color: #fff;
        color: #000;
    }

/* Edit buttons */
.edit-btn {
    padding: 4px 10px;
}

.edit-btn-row {
    display: flex;
    gap: 10px;
    margin-top: 8px;
}

/* Node actions panel */
.node-actions-panel {
/*    max-width: 69%;
    width: 69%;*/
    box-sizing: border-box;
    padding: 20px;
    word-wrap: break-word;
    white-space: normal;
}

@media (max-width: 1880px) {
    .node-actions-panel {
        max-width: 63%;
        width: 100%;
        box-sizing: border-box;
        padding: 20px;
        word-wrap: break-word;
        white-space: normal;
    }
}

/* Actions panel */
.actions-panel {
    opacity: 0;
    max-height: 0;
    overflow: hidden;
    transition: all 0.5s ease;
}

    .actions-panel.show {
        opacity: 1;
        max-height: 1000px;
    }

/* Transition buttons */
.transition-btn {
    opacity: 0;
    transform: scale(0.95);
    transition: all 0.3s ease;
    pointer-events: none;
}

    .transition-btn.show {
        opacity: 1;
        transform: scale(1);
        pointer-events: auto;
    }

/* Notes panel */
.notes-panel {
    max-width: 600px;
    height: 785px;
    max-height: 785px;
    overflow: auto;
    width: 100%;
    margin: 0 auto;
    padding: 20px;
    box-sizing: border-box;
    word-wrap: break-word;
    white-space: normal;
}

/* Section divider */
.section-divider {
    border: none;
    border-top: 1px solid #eeeeee;
    margin: 20px 0;
    width: 100%;
}

/* Note blocks */
.note-block {
    margin-bottom: 12px;
    padding: 8px 12px;
    border: 1px solid #ccc;
    border-radius: 6px;
    background-color: #f9f9f9;
}

.note-title {
    font-weight: bold;
    color: #003366;
    margin-bottom: 4px;
}

.note-body {
    display: block;
    margin-left: 12px;
    margin-top: 4px;
    color: #333;
}

.free-text-checkbox {
    display: flex;
    align-items: start;
}

    .free-text-checkbox label {
        display: inline-block;
        width: 100%;
        max-width: 100%;
        white-space: normal;
    }
    .free-text-checkbox input[type="checkbox"] {
        margin: 4px 4px 0 !important;
        line-height: 1 !important;
    }

.controls-row {
    display: flex;
    align-items: flex-start;
    gap: 20px;
    height: 100%;
    position: relative;
}

.bottom-panel {
    margin-left: 10px;
    align-self: self-end;
    padding: 10px;
    min-width: 255px;
}

.node-info-grid {
    width: 100%;
    border-collapse: separate;
    border-spacing: 0 6px;
    margin-top: 10px;
}

    .node-info-grid th {
        background-color: #FFFF;
        padding: 6px 10px;
        font-weight: 600;
        color: #333;
        border: 1px solid #ddd;
        border-radius: 4px;
        text-align: left;
        white-space: nowrap;
    }

    .node-info-grid td {
        background-color: #f9f9f9;
        padding: 6px 10px;
        border: 1px solid #ddd;
        border-radius: 4px;
    }

    .node-info-grid tr:hover td {
        background-color: #f3f3f3;
    }

    .node-info-grid input[type="checkbox"] {
        transform: scale(1.2);
        cursor: pointer;
    }

    .node-info-grid td,
    .node-info-grid th {
        box-shadow: 0 1px 2px rgba(0,0,0,0.05);
    }


.info-title {
    font-weight: 600;
    margin-bottom: 6px;
    display: block;
    color: #333;
}

/* ---------------------------------------------------------------------------- */
/* --------------------- NOTE TEMPLATE REPORT LAYOUT -------------------------- */
/* ---------------------------------------------------------------------------- */

#MachinesUpdatePanel {
    width: 100%;
    padding: 0;
    margin: 0 auto;
}

.noteTemplateGridContainer {
    width: 100%;
    display: block;
}

.noteTemplateMachinesGridContainer {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 12px;
    margin-top: 15px;
}

.noteTemplateMachinesGridItem {
    border: 1px solid #ddd;
    border-radius: 8px;
    padding: 10px;
    background-color: #f9f9f9;
    width: 100%;
    box-sizing: border-box;
}


.noteTemplateGridItem {
    border: 1px solid #ddd;
    border-radius: 8px;
    padding: 10px;
    background-color: #f9f9f9;
}

/* ------------------------------------------------------------- */
/* ------------------------ GRID HEADERS ----------------------- */
/* ------------------------------------------------------------- */

.gridHeader {
    font-size: 1.2em;
    font-weight: bold;
    color: white;
    margin-bottom: 2px;
    padding: 10px;
    background: #d0252f;
    display: flex;
    align-items: center;
    position: sticky;
    top: 0;
    z-index: 10;
}

    .gridHeader a {
        color: white;
        text-decoration: underline;
        cursor: pointer;
    }

        .gridHeader a:hover {
            color: lightblue;
        }

    .gridHeader .minimize-icon {
        height: 16px;
        cursor: pointer;
        padding: 2px;
        transition: transform 0.3s ease;
    }

        .gridHeader .minimize-icon.rotate {
            transform: rotate(180deg);
        }

.header-left {
    flex: 0.3;
}

.header-center {
    flex: 1;
    text-align: center;
}

.header-right {
    flex: 0.3;
    text-align: right;
}

/* ------------------------------------------------------------- */
/* ------------------------ NESTED GRID ------------------------ */
/* ------------------------------------------------------------- */

.nested-grid-header {
    background: #d7d7d7;
    color: white;
    padding: 6px 10px;
    cursor: pointer;
    display: flex;
    justify-content: space-between;
    align-items: center;
    font-weight: bold;
    border-radius: 6px;
    margin-top: 10px;
    width: 100%;
    box-sizing: border-box;
    color: black;
}

.nested-grid-content {
    display: none;
    background: #f9f9f9;
    border: 1px solid #ddd;
    border-radius: 6px;
    padding: 10px;
    margin-top: 5px;
    width: 100%;
    box-sizing: border-box;
}

    .nested-grid-content.open {
        display: block;
    }

.nested-arrow {
    width: 16px;
    transition: transform 0.3s ease;
}

.nested-grid-header.open .nested-arrow {
    transform: rotate(180deg);
}

.nested-grid-header .minimize-icon {
    height: 16px;
    cursor: pointer;
    padding: 2px;
    transition: transform 0.3s ease;
}

.empty-grid {
    display: flex;
    justify-content: center;
    align-items: center;
    height: 100%;
    min-height: 150px;
    text-align: center;
    color: black;
}

/* ------------------------------------------------------------- */
/* ------------------------ GRID TABLE ------------------------- */
/* ------------------------------------------------------------- */

.datagridNoteTemplate {
    width: 100%;
    border-collapse: collapse;
    text-align: left;
}

    .datagridNoteTemplate th,
    .datagridNoteTemplate td {
        border: 1px solid #ddd;
        padding: 8px;
    }

    .datagridNoteTemplate th {
        background-color: #f4f4f4;
        font-weight: bold;
    }

    .datagridNoteTemplate td {
        text-align: center;
    }

.gridContainer {
    max-height: 260px;
}

/* ------------------------------------------------------------- */
/* ------------------------ COLLAPSIBLE ------------------------ */
/* ------------------------------------------------------------- */

.collapsible-content {
    /*overflow: auto;*/
    max-height: 350px;
    transition: max-height 0.5s ease;
}

    .collapsible-content.collapsed {
        max-height: 0;
    }


/* ------------------------------------------------------------- */
/* ------------------------ BUTTONS ---------------------------- */
/* ------------------------------------------------------------- */

.btn-xs {
    padding: 0.60rem 2.0rem;
    font-size: 1.8rem;
    line-height: 1.5rem;
    border-radius: 3.0rem;
}

.btn-hover-transition {
    transition: background-color 0.3s ease, transform 0.3s ease;
}

    .btn-hover-transition:hover {
        background-color: #45a049;
        transform: scale(1.05);
    }

.date-filter-row {
    display: flex;
    align-items: center;
    justify-content: space-between;
    width: 100%;
    gap: 20px;
}

.date-filter-left,
.date-filter-right {
    display: flex;
    align-items: center;
    gap: 10px;
    white-space: nowrap;
}

.date-filter-middle {
    flex: 1;
    display: flex;
    justify-content: center;
    gap: 10px;
    margin-top: 40px; 
}

.date-filter-left {
    display: flex;
    flex-direction: column;
    gap: 10px;
    align-items: start;
}

.date-row {
    display: flex;
    align-items: center;
    gap: 10px;
}
    .date-row + .date-row {
        margin-top: 15px;
    }

/* ------------------------------------------------------------- */
/* ------------------------ MISC ------------------------------- */
/* ------------------------------------------------------------- */

.no-data-label {
    font-size: 1.2em;
    font-weight: bold;
    color: black;
    text-align: center;
    margin: 20px auto;
}

.free-text-row {
    background-color: #fff5cc;
}

.problem-note-row {
    background-color: #ffdcdc;
}

.both-row {
    background-color: #e6c8ff;
}

.lazy-grid-wrapper {
    position: relative;
    height: 100%;
    width: 100%;
}

.overlay-spinner {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: rgba(255,255,255,0.7);
    display: flex;
    align-items: center;
    justify-content: center;
    z-index: 50;
}
.spinner {
    width: 40px;
    height: 40px;
    border: 4px solid #ccc;
    border-top-color: #0078d4;
    border-radius: 50%;
    animation: spin 0.8s linear infinite;
}
@keyframes spin {
    to {
        transform: rotate(360deg);
    }
}

.legendBox {
    display: flex;
    text-align: center;
}

.coloured-box {
    width: 265px;
    margin-bottom: 8px;
}

.nested-grid-header .minimize-icon {
    transition: transform 0.25s ease;
}

.nested-grid-header.open .minimize-icon {
    transform: rotate(180deg);
}

.modalFreeTextNotes {
    display: none;
    position: fixed;
    z-index: 1000;
    left: 0;
    top: 0;
    width: 100%;
    height: 100%;
    background-color: rgba(0, 0, 0, 0.5);
    display: flex;
    justify-content: center;
    align-items: center;
    display: none;
    opacity: 1;
    animation: fadeIn 0.5s ease forwards;
}

.modal.fade-in {
    animation: fadeIn 0.5s ease forwards;
}

.modalFreeTextNotes-content {
    height: 500px;
    background-color: white;
    padding: 20px;
    border-radius: 8px;
    width: 55%;
    max-width: 55%;
    box-shadow: 0 4px 8px rgba(0, 0, 0, 0.2);
}

.modalFreeTextNotes-body {
    height: 85% !important;
    margin-top: 20px;
    font-size: 16px;
    line-height: 1.5;
    height: 150px;
    overflow: auto;
}

.modal-trigger {
    cursor: pointer;
}
    .modal-trigger:hover {
        background-color: whitesmoke;
    }

.modal-body-note {
    display: inline-block;
    text-align: center;
    vertical-align: middle;
    height: 100px;
}

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

#backToTop {
    position: fixed;
    right: 20px;
    bottom: 40px;
    width: 40px;
    height: 40px;
    background: #4682b4;
    color: white;
    border-radius: 4px;
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    opacity: 0;
    pointer-events: none;
    transition: opacity 0.3s ease;
    z-index: 9999;
}
    #backToTop.visible {
        opacity: 1;
        pointer-events: auto;
    }