@charset "utf-8";
/*body{ background-image: url(images/background_leaf.jpg); margin: 0; font-family: Arial, Helvetica, sans-serif; font-size: 11px; color: #2a1f00; overflow-x: hidden; background-attachment:fixed; } */
@media screen and (min-device-width : 768px) and (max-device-width : 1024px) and (orientation : landscape) {
    body {
        width: 100%;
    }
}
/* iPads (portrait) */
@media screen and (min-device-width : 768px) and (max-device-width : 1024px) and (orientation : portrait) {
    body {
        width: 100%;
    }
}

@media all and (max-width: 1024px) {
    /*styles for narrow desktop browsers and iPad landscape */
    .myContentPanel {
        width: 450px;
    }
}


@media all and (max-width: 320px) {
    /*styles for iPhone/Android portrait*/
    .myContentPanel {
        width: 320px;
    }
}

html {
    scroll-behavior: smooth;
}

.ui-datepicker {
    z-index: 9999 !important; /* Use !important if necessary to override other styles */
}

body {
    background-repeat: repeat;
    /*font-family: Arial;*/
    font-family: system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial, "Noto Sans", "Liberation Sans", sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol", "Noto Color Emoji";
    top: 0px;
    margin: 0px;
    overflow: auto;
    color: black;
    text-align: left !important;
}

input:focus {
    outline: none !important;
}

input[type="checkbox"] {
    width: 22px;
    height: 22px;
    accent-color: green;
    text-align: left;
}

.innerlink {
    text-decoration: none !important;
}

    .innerlink:hover {
        text-decoration: underline !important;
    }

a:link {
    color: #1a5108;
    text-decoration: underline;
}

a:visited {
    text-decoration: underline;
    color: #1a5108;
}

a:hover {
    text-decoration: none;
    color: #1a5108;
}

a:active {
    text-decoration: underline;
    color: #1a5108;
}

body, td, th {
    font-family: Arial;
}

.PrintBody {
    width: 850px;
    overflow: auto;
}

.main_full {
    margin: 0px;
    padding: 0px;
    margin-top: 0px;
    padding-top: 0px;
    width: 100%;
}

.MyGridHeader {
    background-image: linear-gradient(white, white, #339db459);
}

.btn-group .dropdown-toggle::after {
    border-top-color: #369; /* Change the color of the caret */
}

.MyFooter {
    color: #FFF;
    background: #2A577C !important; /*For browsers that do not support gradients */
    height: 30px;
}

.MyLogoutButton {
    -webkit-appearance: none;
    padding: 6px 10px 6px 10px;
    background-color: #369;
    border: thin solid #369;
    border: 1px;
    color: #FFF;
    border-radius: 5px;
    font-size: 12px;
    color: white;
}

    .MyLogoutButton:hover {
        -webkit-appearance: none;
        background-color: white;
        border: thin solid #369;
        border-radius: 5px;
        text-decoration: none;
        font-size: 12px;
        color: #369;
    }

.MyButton {
    -webkit-appearance: none;
    padding: 6px 10px 6px 10px;
    /*background-color: #2A577C;*/
    background-color: #339db4;
    color: white !important;
    font-size: 14px;
    font-weight: bold;
    border: 1px outset #339db4;
    text-decoration: none;
    border-radius: 5px;
}

    .MyButton:hover {
        background-color: white;
        /*backgroundm-image: linear-gradient(#75a366a9, #75a366);*/
        color: #339db4 !important;
    }

.MyButtonSelected {
    -webkit-appearance: none;
    padding: 6px 10px 6px 10px;
    background-color: #0a8a1b;
    color: white !important;
    font-size: 14px;
    font-weight: bold;
    border: 1px outset #75a366;
    text-decoration: none;
    border-radius: 2px;
}

    .MyButtonSelected:hover {
        /*background-color: #75a366;*/
        background-image: linear-gradient(#75a366a9, #75a366);
        color: white !important;
    }

.MyButtonReverse {
    -webkit-appearance: none;
    padding: 6px 10px 6px 10px;
    background-color: white;
    color: #339db4 !important;
    font-size: 13px;
    font-weight: bold;
    border: 1px outset #339db4;
    text-decoration: none;
    border-radius: 5px;
}

    .MyButtonReverse:hover {
        background-color: #2A577C;
        color: white !important;
    }

.MyButtonContinue {
    -webkit-appearance: none;
    padding: 6px 10px 6px 10px;
    background-image: linear-gradient(#75a366a9, #75a366);
    color: white !important;
    font-size: 14px;
    font-weight: bold;
    border: 1px outset #75a366;
    text-decoration: none;
    border-radius: 2px;
}

    .MyButtonContinue:hover {
        /*background-color: #75a366;*/
        background-color: white;
        color: #339db4 !important;
    }

.MyButtonDisabled {
    -webkit-appearance: none;
    padding: 6px 10px 6px 10px !important;
    background-color: #ccc !important;
    border: 1px !important;
    color: #000 !important;
    border-radius: 5px !important;
    /*font-size: 13px !important;*/
    border: thin solid #75a366 !important;
    text-decoration: none;
    pointer-events: none;
}

.MyButtonSecondary {
    webkit-appearance: none;
    padding: 6px 10px 6px 10px;
    /*background-color: #2A577C;*/
    background-color: #339db4;
    color: white !important;
    font-size: 18px;
    font-weight: bold;
    border: 1px outset #339db4;
    text-decoration: none;
    border-radius: 5px;
}

.MyGoButton {
    -webkit-appearance: none;
    padding: 6px 10px 6px 10px;
    background-color: #339db4;
    border: 1px;
    color: white;
    border-radius: 5px;
    /*font-size: 13px ;*/
    border: thin solid black;
    text-decoration: none;
}

    .MyGoButton:hover {
        -webkit-appearance: none;
        background-color: white;
        border: thin solid #339db4;
        border-radius: 5px;
        text-decoration: none;
        /*font-size: 13px !important;*/
        color: #339db4;
        text-decoration: none;
    }

.MyCopyButton {
    -webkit-appearance: none;
    padding: 6px 10px 6px 10px;
    background-color: green;
    border: 1px;
    color: white;
    border-radius: 5px;
    /*font-size: 13px ;*/
    border: thin solid black;
    text-decoration: none;
}

    .MyCopyButton:hover {
        -webkit-appearance: none;
        background-color: white;
        border: thin solid #339db4;
        border-radius: 5px;
        text-decoration: none;
        /*font-size: 13px !important;*/
        color: green;
        text-decoration: none;
    }

.MyUploadButton {
    -webkit-appearance: none;
    padding: 6px 10px 6px 10px;
    background-color: #5e85ad;
    border: 1px;
    color: white;
    border-radius: 5px;
    /*font-size: 13px ;*/
    border: thin solid black;
    text-decoration: none;
}

    .MyUploadButton:hover {
        -webkit-appearance: none;
        background-color: white;
        border: thin solid #339db4;
        border-radius: 5px;
        text-decoration: none;
        /*font-size: 13px !important;*/
        color: #5e85ad;
        text-decoration: none;
    }

.MyDeleteButton {
    -webkit-appearance: none;
    padding: 6px 10px 6px 10px;
    background-color: red;
    border: 1px;
    color: white;
    border-radius: 5px;
    /*font-size: 13px ;*/
    border: thin solid black;
    text-decoration: none;
}

    .MyDeleteButton:hover {
        -webkit-appearance: none;
        background-color: white;
        border: thin solid #339db4;
        border-radius: 5px;
        text-decoration: none;
        /*font-size: 13px !important;*/
        color: red;
        text-decoration: none;
    }


.MyYellowButton {
    -webkit-appearance: none;
    padding: 6px 10px 6px 10px;
    background-color: #e9e536;
    border: 1px;
    color: Black;
    border-radius: 5px;
    /*font-size: 13px !;*/
    border: thin solid black;
    text-decoration: none;
}

.MyLogoutButton {
    -webkit-appearance: none;
    padding: 6px 10px 6px 10px !important;
    background-color: #369 !important;
    border: thin solid #369 !important;
    border: 1px !important;
    color: #FFF !important;
    border-radius: 5px !important;
    /*font-size: 12px !important;*/
    color: white !important;
    text-decoration: none;
}

    .MyLogoutButton:hover {
        -webkit-appearance: none;
        background-color: white !important;
        border: thin solid #369 !important;
        border-radius: 5px !important;
        text-decoration: none !important;
        /*font-size: 12px !important;*/
        color: #369 !important;
        text-decoration: none;
    }

.MyCheckbox {
    /*color: black;
	font-size: 14px;
	-webkit-transition: all 0.25s ease-in-out;
	-moz-transition: all 0.25s ease-in-out;
	-o-transition: all 0.25s ease-in-out;
	padding: 5px;*/
}


.MyTextbox {
    background-color: white !important;
    color: black;
    font-size: 15px;
    -webkit-transition: all 0.25s ease-in-out;
    -moz-transition: all 0.25s ease-in-out;
    -o-transition: all 0.25s ease-in-out;
    padding: 4px;
    padding-left: 6px;
    border: thin solid #ccc;
    margin: 0px;
    border-radius: 7px;
}

    .MyTextbox:focus {
        background: #339db415;
        background: -webkit-linear-gradient(left,white, #339db415, white);
        background: -o-linear-gradient(right, white, #339db415, white);
        background: -moz-linear-gradient(right, white, #339db415, white);
        background: linear-gradient(to right, white, #339db415, white);
        color: black;
        font-size: 15px;
        box-shadow: 0 0 2px #339db459;
        border: thin solid #339db4;
        margin: 0px;
    }

    .MyTextbox.changed {
        border: thin solid red;
    }

.MyTextboxReadOnly {
    background-color: #f9f9f9;
    color: #4b311b;
    font-size: 15px;
    -webkit-transition: all 0.25s ease-in-out;
    -moz-transition: all 0.25s ease-in-out;
    -o-transition: all 0.25s ease-in-out;
    padding: 4px;
    border: thin solid #ccc;
    margin: 0px;
}

    .MyTextboxReadOnly:focus {
        color: #4b311b;
        font-size: 14px;
        border-radius: 7px;
        box-shadow: 0 0 4px #339db4;
        padding: 5px;
        border: thin solid #339db4;
        margin: 0px;
    }

.MySpinnerbox {
    background-color: white;
    -webkit-transition: all 0.25s ease-in-out;
    -moz-transition: all 0.25s ease-in-out;
    -o-transition: all 0.25s ease-in-out;
    padding: 1px;
    border-radius: 0px;
    text-align: center;
    border-radius: 5px;
}

    .MySpinnerbox:focus {
        background: #75a366; /* For browsers that do not support gradients */
        background: -webkit-linear-gradient(left, white, #75a3662d, white); /* For Safari 5.1 to 6.0 */
        background: -o-linear-gradient(right, white, #75a3662d, white); /* For Opera 11.1 to 12.0 */
        background: -moz-linear-gradient(right, white, #75a3662d, white); /* For Firefox 3.6 to 15 */
        background: linear-gradient(to right, white, #75a3662d, white); /* Standard syntax */
        border-radius: 0px;
        padding: 1px;
        box-shadow: 0 0 4px #75a366;
        text-align: center;
        border-radius: 5px;
    }

.MyDropDownBox {
    background-color: white !important;
    color: black;
    font-size: 15px;
    -webkit-transition: all 0.25s ease-in-out;
    -moz-transition: all 0.25s ease-in-out;
    -o-transition: all 0.25s ease-in-out;
    padding: 6px;
    border: thin solid #ccc;
    box-shadow: 0 0 2px #339db459;
    margin: 0px;
    border-radius: 7px;
}

    .MyDropDownBox.changed {
        border: thin solid red;
    }

    .MyDropDownBox:focus {
        background: #339db415;
        background: -webkit-linear-gradient(left,white, #339db415, white);
        background: -o-linear-gradient(right, white, #339db415, white);
        background: -moz-linear-gradient(right, white, #339db415, white);
        background: linear-gradient(to right, white, #339db415, white);
        color: black;
        font-size: 15px;
        box-shadow: 0 0 2px #339db459;
        border: thin solid #339db4;
        margin: 0px;
    }


body, td, th {
    font-family: Arial;
    font-weight: 100;
    text-align: center;
    font-size: 14px;
}

.Mainlayout {
    font-family: Arial;
    font-size: 14px;
    font-style: normal;
    /*line-height: 1px;*/
}

.main_content {
    font-family: Arial;
    font-size: 16px;
    font-weight: normal;
    margin-left: auto;
    margin-right: auto;
    text-align: center;
    padding-top: 5px;
    padding-bottom: 5px;
}

.content {
    padding: 0 35px 0 35px;
    background: url(../imgs/bg_main.png) repeat-y;
}

.page {
    background-color: #f2f2e1;
    padding: 15px 15px 25px 15px;
    margin-top: 50px;
}

.PageHeader {
    font-size: 24px;
    font-family: 'Arial';
}

.PopupPageHeader {
    font-size: 24px;
    height: 45px;
    line-height: 45px;
    font-family: 'Arial';
    border: none;
    /*border-bottom: thin solid #ccc;*/
    color: #0a8a1b;
    font-weight: bold;
    text-align: left;
    padding-left: 10px;
}


.tablerow {
    /*background-color: white;*/
}

.tablerow_alt {
    /*background-color: #f3f3f3;*/
}

.tablerow:hover .tablecell {
    background-color: #feffbc36;
    font-weight: bold;
}

.tablecell_alt {
    background-color: #f9f9f9;
}

.needsattention {
    background-color: #fc303008;
}

.addedline {
    background-color: #d4e0d0ae;
}

.updatedline {
    background-color: lightyellow !important;
}


.tablerow:hover .tablecell_alt {
    background-color: #feffbc36;
    font-weight: bold;
}

.tablerow:hover .tabletotals {
    background-color: #e1e2e2 !important;
    font-weight: bold !important;
}

    .tablerow:hover .tabletotals:hover {
        background-color: #FB7D00 !important;
        color: white !important;
        font-weight: bold !important;
    }


.tablerow:hover .tablecell_tot {
    background-color: #fefb836f;
    font-weight: bold;
}

.tablerow.needsattention .tablecell {
    background-color: #fc303008;
}

.tablerow.active .tablecell {
    background-color: lightyellow !important;
    font-weight: bold;
}


.tablerow.active .tablecell_alt {
    background-color: lightyellow;
    font-weight: bold;
}

.tablecell.active {
    background-color: lightyellow;
    font-weight: bold;
}

.tablecell_alt.active {
    background-color: lightyellow;
    font-weight: bold;
}


.AddEditPageHeader {
    width: auto;
    height: 30px;
    line-height: 30px;
    font-size: 16px;
    background-color: #478134;
    font-family: Arial;
    color: white;
}

html {
    scrollbar-base-color: #F00;
    scrollbar-face-color: #75a366;
    scrollbar-shadow-color: #000;
    scrollbar-highlight-color: #000;
    scrollbar-3dlight-color: #000;
    scrollbar-darkshadow-color: #4b311b;
    scrollbar-track-color: #442b17;
    scrollbar-arrow-color: #F2F9FF;
}

/*::-webkit-scrollbar {
		height: 16px;
		width: 16px;
		background-color: #ecf5f8;*/
/*border-radius: 30px*/
/*}

	::-webkit-scrollbar-thumb {
		background: #339db4;*/
/*border: 1px solid black;*/
/*-webkit-border-top-left-radius: 46px;
	-webkit-border-top-right-radius: 46px;
	-webkit-border-bottom-left-radius: 46px;
	-webkit-border-bottom-right-radius: 46px;*/
/*padding: 120px;*/
/*}

	::-webkit-scrollbar-track {*/
/*border-radius: 10px;*/
/*margin-top: 39px;
		margin-bottom: 30px;*/
/*background-color:#ecf5f8*/
/*}

	::-webkit-scrollbar-track-piece {*/
/*border: 1px solid #ccc;*/
/*margin-left: 10px;
		margin-right: 0px;
		background-color: #ecf5f8;
		border-left: 1px solid #ccc;*/
/*margin-left: 10px;
	margin-right: 10px;
	margin-top: 5px;
	margin-bottom: 5px;
	background: #ecf5f8;
	-webkit-border-top-left-radius: 46px;
	-webkit-border-top-right-radius: 46px;
	-webkit-border-bottom-left-radius: 46px;
	-webkit-border-bottom-right-radius: 46px;
	border-left: thin solid #ccc;
	border-right: thin solid #ccc;*/
/*}

	::-webkit-scrollbar-corner {
		background-color: #ecf5f8;
		padding: 120px;
	}*/


::-webkit-scrollbar {
    height: 16px;
    width: 16px;
    transition: width 0.3s ease-in-out; /* Smooth transition */
}

::-webkit-scrollbar-thumb {
    background: #339db4;
    /*border: 1px solid black;*/
    -webkit-border-top-left-radius: 16px;
    -webkit-border-top-right-radius: 16px;
    -webkit-border-bottom-left-radius: 16px;
    -webkit-border-bottom-right-radius: 16px;
    border-radius: 10px;
    border: 4px solid transparent;
    background-clip: padding-box;
}

.OuterDiv {
    /*scrollbar-gutter: stable;*/
    /*scrollbar-gutter: stable both-edges;*/
}


::-webkit-scrollbar-track {
    border-radius: 14px;
    background: transparent;
    margin-top: 30px;
    margin-bottom: 30px;
}

::-webkit-scrollbar-thumb:hover {
    border: 0;
}


::-webkit-scrollbar-track-piece {
    /*border: 1px solid #ccc;*/
    margin-left: 10px;
    margin-right: 10px;
    margin-top: 5px;
    margin-bottom: 5px;
    background-color: transparent;
    -webkit-border-top-left-radius: 16px;
    -webkit-border-top-right-radius: 16px;
    -webkit-border-bottom-left-radius: 16px;
    -webkit-border-bottom-right-radius: 16px;
    /*border-left: thin solid #ccc;
	border-right: thin solid #ccc;
	border-bottom-left-radius:14px;
	border-bottom-right-radius:14px;*/
}

::-webkit-scrollbar-corner {
    background: white;
    padding: 120px;
}

.menu_header {
    /*font-family: Tahoma, Geneva, sans-serif;*/
    /*font-size: 13px;*/
    color: #056c13;
    text-decoration: none;
    background: white; /* For browsers that do not support gradients */
    background: -webkit-linear-gradient(left, #d0e0caae white, white, white, white, #d0e0caae); /* For Safari 5.1 to 6.0 */
    background: -o-linear-gradient(right, #d0e0caae, white, white, white, white, #d0e0caae); /* For Opera 11.1 to 12.0 */
    background: -moz-linear-gradient(right, #d0e0caae, white, white, white, white, #d0e0caae); /* For Firefox 3.6 to 15 */
    background: linear-gradient(to right, #d0e0caae, white, white, white, white, #d0e0caae); /* Standard syntax */
}

.main_full {
    margin: 0px;
    padding: 0px;
    margin-top: 0px;
    padding-top: 0px;
    width: 100%;
}

.footer {
    min-width: 850px;
    margin: 0px;
    width: auto;
    text-align: center;
    vertical-align: middle;
    font-family: Tahoma, Geneva, sans-serif;
    font-size: 13px;
    line-height: 20px;
    text-decoration: none;
    line-height: 20px;
    background-color: #75a366;
    color: #FFF;
}

.footer_full {
    padding: 0px;
    width: 100%;
    margin: auto;
    /*right:0px;
	position:fixed;
	bottom:0px;*/
    /*margin-left:1px;*/
    /*overflow:hidden;*/
    text-align: center;
    vertical-align: middle;
    font-family: Tahoma, Geneva, sans-serif;
    font-size: 13px;
    color: #FFF;
    text-decoration: none;
    line-height: 20px;
    background: #75a366; /* For browsers that do not support gradients */
    background: -webkit-linear-gradient(white, #75a366, white); /* For Safari 5.1 to 6.0 */
    background: -o-linear-gradient(white, #75a366, white); /* For Opera 11.1 to 12.0 */
    background: -moz-linear-gradient(white, #75a366, white); /* For Firefox 3.6 to 15 */
    background: linear-gradient(white, #75a366, white); /* Standard syntax */
    height: 25px;
    margin-top: 5px;
}

.footer a {
    padding-left: 8px;
    padding-right: 8px;
    padding-top: 5px;
    color: #FFF;
}

.background {
    top: 0px;
    left: 0px;
    bottom: 0px;
    width: 100%;
    height: 100%;
    /*filter:alpha(opacity=60);*/
    opacity: .60;
    background-color: #000;
    position: absolute;
    display: none;
}

.MyMenu {
    margin: 0;
    padding: 0;
    text-align: center;
}

    .MyMenu ul li {
        display: inline-block;
        list-style: none;
        font-weight: bold;
        font: 15px Tahoma, Arial;
        vertical-align: top;
        padding: 10px;
        padding: 10px 15px;
        background: white;
        color: #0a8a1b;
    }

        .MyMenu ul li:hover {
            /*background: #0a8a1b;*/
            background-image: linear-gradient(#75a366a9, #75a366);
            border: none;
            color: white;
        }

        .MyMenu ul li a {
            display: block;
            text-decoration: none;
            width: auto;
            color: inherit;
            font-weight: 400;
            white-space: nowrap;
        }

            .MyMenu ul li a:hover {
                color: inherit;
            }


        .MyMenu ul li ul {
            display: block;
            margin: 0;
            padding: 0;
            z-index: 9999;
            position: absolute;
            visibility: hidden;
            /*border: 1px #000 solid;*/
            /*border-top: 1px solid white;*/
            border: 1px solid #0a8a1b;
            margin-top: 11px;
            margin-left: -15px;
        }

            .MyMenu ul li ul li {
                display: block;
                list-style: none;
                font-weight: bold;
                font: 15px Tahoma, Arial;
                vertical-align: top;
                background: white;
                color: #0a8a1b;
                min-width: 175px;
                text-align: left;
            }

                .MyMenu ul li ul li a {
                    display: block;
                    text-decoration: none;
                    width: auto;
                    color: inherit;
                    font-weight: 400;
                    white-space: nowrap;
                }

                    .MyMenu ul li ul li a:hover {
                        color: inherit;
                    }


.MyRadioButton label {
    font-weight: bold;
}

.MyRadioButton input[type="radio"] {
    margin-right: 10px;
    margin-left: 1px;
    font-weight: bold !important;
}


.MyCheckbox {
    color: black;
    float: left;
    -webkit-transition: all 0.25s ease-in-out;
    -moz-transition: all 0.25s ease-in-out;
    -o-transition: all 0.25s ease-in-out;
    /*padding: 5px;*/
}

    .MyCheckbox label {
        color: black;
        -webkit-transition: all 0.25s ease-in-out;
        -moz-transition: all 0.25s ease-in-out;
        -o-transition: all 0.25s ease-in-out;
        text-align: left !important;
        float: left;
        padding: 2px;
    }

    .MyCheckBox input[type="checkbox"] {
        float: left;
        margin-right: 10px;
        margin-left: 1px;
        font-weight: bold !important;
        text-align: left !important;
    }

    .MyCheckBox span {
        float: left;
        width: 80%; /* Adjust width as needed */
        text-align: left; /* Align text to the left */
    }



.MyCheckBoxList label {
    font-weight: bold;
    text-align: left !important;
    float: left;
    padding: 2px;
    white-space: normal;
}

.MyCheckBoxList input[type="checkbox"] {
    float: left;
    margin-right: 10px;
    margin-left: 1px;
    font-weight: bold !important;
    text-align: left !important;
}

.MyCheckBoxList span {
    display: inline-block;
    width: 80%; /* Adjust width as needed */
    text-align: left; /* Align text to the left */
}



.fileline {
    font-size: 15px;
    color: #300;
    text-align: left;
    width: 100%;
    height: 25px;
    border-bottom: thin solid #ccc;
}

    .fileline a {
        font-size: 15px;
        color: #300;
        text-decoration: none;
    }

    .fileline:hover {
        background-color: #fff6e3;
        text-decoration: none;
        border-bottom: thin solid #ccc;
        color: #543720;
    }

        .fileline:hover a {
            color: #543720;
            text-decoration: underline;
        }

.AutoExtender {
    font-family: Arial;
    border: solid 1px Gray;
    margin: 0px;
    padding: 3px;
    height: 200px;
    overflow: auto;
    background-color: #fffbfb;
    font-size: 13px;
    color: #75a366;
    font-weight: bold;
}

.AutoExtenderList {
    border-bottom: solid 1px #ccc;
    cursor: pointer;
    color: #369;
    text-align: left;
    padding-left: 5px;
    line-height: 30px;
}

.AutoExtenderHighlight {
    color: white;
    background-color: #0d6efd;
    cursor: pointer;
    text-align: left;
    padding-left: 5px;
    line-height: 30px;
}

.MyDrawingPad {
    position: absolute;
    left: 5px;
    top: 5px;
    height: 95%;
    width: 99.5%;
    border-radius: 4px;
    border: 1px solid #ac0000;
}

.CalendarEachDate {
    width: auto;
    margin: auto;
    height: 22px;
    line-height: 22px;
    background-color: #7ea36060;
    font-weight: bold;
    color: white;
    border-left: 1px solid #75a366;
}

    .CalendarEachDate:hover {
        background-color: #75a366;
        color: white;
    }

    .CalendarEachDate a {
        color: #0a8a1b;
    }

        .CalendarEachDate a:hover {
            color: white;
        }

.CalendarDayEntry {
    cursor: pointer;
    border-bottom: thin dotted #ce0808;
    text-align: left;
    height: auto;
    overflow: hidden;
    font-size: 13px;
    width: 100%;
}

    .CalendarDayEntry:hover {
        background-color: #7ea36060;
        color: #338519;
    }

.CalendarJobEven {
    width: auto;
    background-color: #eeeeee;
    border-bottom: thin solid #75a366;
    height: auto;
    overflow: visible;
}

    .CalendarJobEven:hover {
        width: auto;
        background-color: #eeeeee;
        border: thin solid #75a366;
        height: auto;
        overflow: visible;
    }

.CalendarJobOdd {
    width: auto;
    background-color: white;
    border-bottom: thin solid #75a366;
    height: auto;
    overflow: visible;
}

    .CalendarJobOdd:hover {
        width: auto;
        background-color: white;
        border: thin solid #75a366;
        height: auto;
        overflow: visible;
    }

.CalendarRemoveEntry {
    position: fixed;
    height: 50px;
    line-height: 50px;
    border: 1px outset #fff;
    overflow: hidden;
    background-color: #75a366;
    color: white;
    padding-top: 2px;
    text-align: center;
    border: thin solid #75a366;
    bottom: 0px;
    width: 100%;
    z-index: 1
}

.CalendarOneDay {
    background-color: white;
    tablerow float: left;
    width: 100%;
    height: 92%;
    border: thin solid #999;
    overflow: auto;
}

    .CalendarOneDay:hover {
        background-color: #75a3662d;
    }

.CalendarOneDayOutOfRange {
    background-color: #999;
    float: left;
    width: 100%;
    height: 92%;
    border: thin solid white;
    overflow: auto;
}

    .CalendarOneDayOutOfRange:hover {
        background-color: #ccc;
    }

.myrow:hover {
    background-color: #eaf1e7 !important;
}

.mycell:hover {
    background-color: rgb(248, 248, 157, 0.69) !important;
}

.custom-shadow-modal .modal-content {
    box-shadow: 10px 10px 5px rgb(0, 0, 0, 0.4);
}

.MyTabs > .nav-item:hover {
    background-color: lightblue !important;
    border-top-left-radius: 10px !important;
    border-top-right-radius: 10px !important;
}


.MyTabs > .nav-item > .active {
    border-top-left-radius: 10px !important;
    border-top-right-radius: 10px !important;
}

.rounded-top-left {
    border-top-left-radius: 16px;
}

.rounded-top-right {
    border-top-right-radius: 16px;
}

.rounded-bottom-left {
    border-bottom-left-radius: 16px;
}

.rounded-bottom-right {
    border-bottom-right-radius: 16px;
}

.MyPageLinks {
    margin-top: 12px;
    margin-left: 5px;
}

    .MyPageLinks > .nav-item {
        font-size: 15px;
    }

        .MyPageLinks > .nav-item:hover {
            background-color: #aed9dc;
            color: white;
        }


    .MyPageLinks .nav-item {
        color: white;
        border: thin solid #5b5b5ba9;
        margin-left: 3px;
        margin-right: 3px;
        margin-bottom: 2px;
        border-top-left-radius: 12px;
        border-top-right-radius: 12px;
        background-color: #fbfbfb;
    }

    .MyPageLinks > .nav-item:has(.active) {
        color: white;
        border: thin solid #32577d;
        margin: 2px;
        border-top-left-radius: 12px;
        border-top-right-radius: 12px;
        background-color: #32577d;
    }

    .MyPageLinks .nav-item .active {
        color: white;
        font-weight: bold
    }

        .MyPageLinks .nav-item .active > span {
            color: yellow !important;
        }

    .MyPageLinks > .nav-item:has(.disabled) {
        color: white !important;
        background-color: #ccc;
    }

    .MyPageLinks .nav-item {
        background-color: #cccccc29
    }

.activebar {
    background-color: transparent;
}

body:has(.mycolhd1:hover) .mycol1 {
    background-color: #feffbc36;
    border-left: 1px solid black !important;
    border-right: 1px solid black !important;
    font-weight: bold;
}

body:has(.mycolhd2:hover) .mycol2 {
    background-color: #feffbc36;
    border-left: 1px solid black !important;
    border-right: 1px solid black !important;
    margin-left: -1px;
    font-weight: bold;
}

body:has(.mycolhd3:hover) .mycol3 {
    background-color: #feffbc36;
    border-left: 1px solid black !important;
    border-right: 1px solid black !important;
    margin-left: -1px;
    font-weight: bold;
}

body:has(.mycolhd4:hover) .mycol4 {
    background-color: #feffbc36;
    border-left: 1px solid black !important;
    border-right: 1px solid black !important;
    margin-left: -1px;
    font-weight: bold;
}

body:has(.mycolhd5:hover) .mycol5 {
    background-color: #feffbc36;
    border-left: 1px solid black !important;
    border-right: 1px solid black !important;
    margin-left: -1px;
    font-weight: bold;
}

body:has(.mycolhd6:hover) .mycol6 {
    background-color: #feffbc36;
    border-left: 1px solid black !important;
    border-right: 1px solid black !important;
    margin-left: -1px;
    font-weight: bold;
}

body:has(.mycolhd7:hover) .mycol7 {
    background-color: #feffbc36;
    border-left: 1px solid black !important;
    border-right: 1px solid black !important;
    margin-left: -1px;
    font-weight: bold;
}

body:has(.mycolhd8:hover) .mycol8 {
    background-color: #feffbc36;
    border-left: 1px solid black !important;
    border-right: 1px solid black !important;
    margin-left: -1px;
    font-weight: bold;
}

body:has(.mycolhd9:hover) .mycol9 {
    background-color: #feffbc36;
    border-left: 1px solid black !important;
    border-right: 1px solid black !important;
    margin-left: -1px;
    font-weight: bold;
}

body:has(.mycolhd10:hover) .mycol10 {
    background-color: #feffbc36;
    border-left: 1px solid black !important;
    border-right: 1px solid black !important;
    margin-left: -1px;
    font-weight: bold;
}

body:has(.mycolhd11:hover) .mycol11 {
    background-color: #feffbc36;
    border-left: 1px solid black !important;
    border-right: 1px solid black !important;
    margin-left: -1px;
    font-weight: bold;
}

body:has(.mycolhd12:hover) .mycol12 {
    background-color: #feffbc36;
    border-left: 1px solid black !important;
    border-right: 1px solid black !important;
    margin-left: -1px;
    font-weight: bold;
}

body:has(.mycolhd13:hover) .mycol13 {
    background-color: #feffbc36;
    border-left: 1px solid black !important;
    border-right: 1px solid black !important;
    margin-left: -1px;
    font-weight: bold;
}

body:has(.mycolhd14:hover) .mycol14 {
    background-color: #feffbc36;
    border-left: 1px solid black !important;
    border-right: 1px solid black !important;
    margin-left: -1px;
    font-weight: bold;
}

body:has(.mycolhd15:hover) .mycol15 {
    background-color: #feffbc36;
    border-left: 1px solid black !important;
    border-right: 1px solid black !important;
    margin-left: -1px;
    font-weight: bold;
}

body:has(.mycolhd16:hover) .mycol16 {
    background-color: #feffbc36;
    border-left: 1px solid black !important;
    border-right: 1px solid black !important;
    margin-left: -1px;
    font-weight: bold;
}

body:has(.mycolhd17:hover) .mycol17 {
    background-color: #feffbc36;
    border-left: 1px solid black !important;
    border-right: 1px solid black !important;
    margin-left: -1px;
    font-weight: bold;
}

body:has(.mycolhd18:hover) .mycol18 {
    background-color: #feffbc36;
    border-left: 1px solid black !important;
    border-right: 1px solid black !important;
    margin-left: -1px;
    font-weight: bold;
}

body:has(.mycolhd19:hover) .mycol19 {
    background-color: #feffbc36;
    border-left: 1px solid black !important;
    border-right: 1px solid black !important;
    margin-left: -1px;
    font-weight: bold;
}

body:has(.mycolhd20:hover) .mycol20 {
    background-color: #feffbc36;
    border-left: 1px solid black !important;
    border-right: 1px solid black !important;
    margin-left: -1px;
    font-weight: bold;
}

#MyPageLinks {
    z-index: 1001;
    left: 80px;
    right: 140px;
    -moz-transition: all 0.3s ease-out;
    transition: all 0.3s ease-out;
}

.page-loader {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-color: rgba(255, 255, 255, 0.8); /* Adjust opacity as needed */
    z-index: 9999; /* Ensure it's on top of other content */
    transition: opacity 0.3s ease-in-out; /* For fade-out effect */
}

    .page-loader.hidden {
        opacity: 0;
        pointer-events: none; /* Allows interaction with elements beneath */
    }

.MyTableHeader {
    background-color: var(--my-table-header) !important;
    border-bottom: var(--bs-border-width) var(--bs-border-style) var(--bs-dark) !important;
    border-color: rgba(var(--bs-dark-rgb), .40) !important;
    font-weight: 700 !important;
}

.MyTableHeaderColumn {
    /*background-color: var(--my-table-header) !important;*/
    border-right: var(--bs-border-width) var(--bs-border-style) var(--bs-dark);
    /*border-bottom: var(--bs-border-width) var(--bs-border-style) var(--bs-dark) !important;*/
    border-color: rgba(var(--bs-dark-rgb), .40) !important;
    padding: 0.25rem !important;
    align-items: center !important;
    justify-content: center !important;
    height: 100% !important;
    display: flex !important;
    font-size: .8rem !important;
    overflow: hidden;
    text-align: center;
}

    .MyTableHeaderColumn:hover {
        background-color: rgba(var(--bs-warning-rgb), .30) !important;
    }

    .MyTableHeaderColumn.dragover {
        background-color: yellow;
    }

        .MyTableHeaderColumn.dragover * {
            pointer-events: none;
        }

.MyTableDetailRow {
    font-size: 1rem !important;
    font-weight: 400;
    border-bottom: var(--bs-border-width) var(--bs-border-style) var(--bs-dark);
    border-color: rgba(var(--bs-dark-rgb), .40) !important;
}

    .MyTableDetailRow.active, .MyTableDetailRow_alt.active {
        background-color: rgba(var(--bs-yellow-rgb), 1);
    }

.MyTableDetailRow_alt {
    font-size: 1rem !important;
    font-weight: 400;
    background-color: rgba(var(--my-table-row-alt-rgb), .40) !important;
    border-bottom: var(--bs-border-width) var(--bs-border-style) var(--bs-dark);
    border-color: rgba(var(--bs-dark-rgb), .40) !important;
}

.MyTableDetailRowNew {
    font-size: 1rem !important;
    font-weight: 400;
    background-color: var(--my-table-row-alt);
    border-bottom: var(--bs-border-width) var(--bs-border-style) var(--bs-dark);
    border-color: rgba(var(--bs-dark-rgb), .40) !important;
    background-color: rgba(var(--bs-success-rgb), .1) !important;
}

.MyTableDetailRow_Changed {
    /*background-color: var(--my-table-row-changed) !important;*/
    background-color: rgba(var(--my-table-row-changed-rgb), .5) !important;
}

.MyTableDetailRow_Missing {
    /*background-color: var(--my-table-row-changed) !important;*/
    background-color: rgba(var(--bs-danger-rgb), .25) !important;
    border-color: var(--bs-danger) !important;
}


.MyTableDetailRow:hover, .MyTableDetailRow_alt:hover {
    /*background-color: var(--my-table-row-hover) !important;*/
    background-color: rgba(var(--bs-warning-rgb), .3) !important;
}

.MyTableDetailColumn {
    border-right: var(--bs-border-width) var(--bs-border-style) var(--bs-dark);
    border-color: rgba(var(--bs-dark-rgb), .40) !important;
    padding: 0.25rem;
    align-items: center;
    justify-content: center;
    height: 100% !important;
    display: flex !important;
    font-size: .9rem !important;
    /*overflow: hidden;*/
}

.MyTableFooter {
    background-color: var(--my-table-header) !important;
}

.form-switch .form-check-input {
    width: 2.75em;
}

    .form-switch .form-check-input:checked {
        background-color: var(--bs-blue);
    }

    .form-switch .form-check-input:not(:checked) {
        background-color: white; /* Example: lightgrey */
        border-color: var(--bs-blue);
        background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='-4 -4 8 8'%3e%3ccircle r='3' fill='red'/%3e%3c/svg%3e");
    }

.text-client-primary {
    color: var(--bs-blue) !important;
}

.client-tooltip {
    --bs-tooltip-bg: var(--bs-blue);
    --bs-tooltip-color: var(--bs-white);
}

.system-tooltip {
    --bs-tooltip-bg: var(--bs-blue);
    --bs-tooltip-color: var(--bs-white);
}

.custom-tooltip {
    --bs-tooltip-bg: var(--bs-blue); /* #ffc107; Example: use CSS variables for easier customization in v5.3+ */
    --bs-tooltip-color: var(--bs-white);
    --bs-tooltip-max-width: 375px !important;
}

.accordion-button {
    background-color: transparent !important; /* Use !important to ensure override */
}

.accordion-header {
    background-color: transparent !important; /* Use !important to ensure override */
}

.tooltip {
    z-index: 9999 !important; /* Higher than the default 1080 */
}

.messages-container-header {
    display: grid;
    grid-template-columns: 45px 55px 1fr 100px 15px;
    grid-auto-rows: minmax(40px, auto);
}

.messages-container {
    display: grid;
    grid-template-columns: 45px 55px 1fr 100px;
    grid-auto-rows: minmax(50px, auto);
}

.user-messages-container-header {
    display: grid;
    grid-template-columns: 1fr 100px 15px;
    grid-auto-rows: minmax(40px, auto);
}

.user-messages-container {
    display: grid;
    grid-template-columns: 1fr 100px;
    grid-auto-rows: minmax(40px, auto);
}

.client-messages-container-header {
    display: grid;
    grid-template-columns: 100px 275px 1fr;
    grid-auto-rows: minmax(40px, auto);
}

.client-messages-container {
    display: grid;
    grid-template-columns: 100px 275px 1fr;
    grid-auto-rows: minmax(40px, auto);
}