.ChildPage {
    padding-top: 25px !important;
    padding-left: 20px !important;
    padding-right: 20px !important;
}

.PageBody {
    padding-top: 0px !important;
    padding-bottom: 5px !important;
}

.PagerCircle {
    border-radius: 50% !important;
}

.PagerSectionCircle {
    border-radius: 50% !important;
    width: 100px;
    height: 100px;
}

.PagerButtonsCircle {
    padding-top: 6px !important;
    width: 18px;
    opacity: 0.5;
    vertical-align: middle;
}

.PagerButtonsCircle1 {
    padding-top: 6px !important;
    width: 18px;
    opacity: 0.5;
    vertical-align: middle;
}

.pagination-icon {
    padding-right: 5px;
}

.PageIcons {
    width: 16px;
}

.GridHeaderSearchLabel {
    vertical-align: middle;
    font-size: 12pt !important;
}

.GridDeleteIcon {
    width: 22px;
    height: 22px;
}

.GridIcon {
    width: 22px;
    height: 22px;
}

.GridViewIcon {
    width: 16px;
    height: 16px;
}

.GridDeleteIcon {
    width: 18px;
    height: 18px;
}

.SocialIcons {
    width: 22px;
    height: 22px;
}

.GridView_Table {
    border: 1px solid #48ABF7;
    text-align: left;
}

    .GridView_Table th {
        padding-left: 0px !important;
    }

    .GridView_Table tr > td:first-child, .GridView tr > th:first-child {
        padding-left: 1rem !important;
    }

    .GridView_Table tr > td:last-child, .GridView tr > th:last-child {
        padding-right: 1rem !important;
    }

.GridView {
    text-align: left;
    min-width: 99% !important;
}

    .GridView th {
        padding-left: 0px !important;
    }

    .GridView tr > td:first-child, .GridView tr > th:first-child {
        padding-left: 1rem !important;
    }

    .GridView tr > td:last-child, .GridView tr > th:last-child {
        padding-right: 1rem !important;
    }

    .GridView tr:last-child {
        border-bottom: 0px solid #48ABF7 !important;
    }


.GridHeader {
    padding-top: 12px;
    padding-bottom: 12px;
    height: 2.5rem;
    text-align: left;
    padding-left: 0px;
    color: #ffffff !important;
    background-color: #072D5C;
}

    .GridHeader th {
        font-weight: normal !important;
        color: #ffffff !important;
        height: 40px !important;
    }

        .GridHeader th a {
            font-weight: normal !important;
            color: #ffffff !important;
        }

        .GridHeader th:first-child {
            border-top-left-radius: 0px;
        }

        .GridHeader th:last-child {
            border-top-right-radius: 0px;
        }



.GridRow {
    background-color: #fff;
    padding-top: 12px;
    padding-bottom: 12px;
    height: 2.5rem;
    text-align: left;
    padding-left: 10px;
    overflow-wrap: anywhere;
    height: 40px !important;
    overflow: hidden;
}

.GridAltRow {
    background-color: #fff;
    padding-top: 12px;
    padding-bottom: 12px;
    height: 2.5rem;
    text-align: left;
    padding-left: 10px;
    overflow-wrap: anywhere;
    overflow: hidden;
}

.GridView_NoRecords {
    text-align: left;
}

.GridHeader_NoRecords {
    border: 0px solid #ffffff;
    height: 3rem;
    text-align: center;
    padding-left: 0px;
    background-image: linear-gradient(#48ABF7, #48ABF7);
    font-weight: bold !important;
    color: #F9F9F9;
}

.GridRow_NoRecords {
    border-bottom: 1px solid #F2F4F5;
    border-top: 1px solid #F2F4F5;
    background-color: #fff;
    color: #313A44 !important;
    height: 3rem;
    text-align: center;
    padding-left: 10px;
}

.GridHeaderSearchLabel {
    padding-top: 5px;
    font-size: 9pt;
    padding-bottom: 40px !important;
}

.GridPageHeader {
    text-align: center !important;
}

.GridPager {
    text-align: right !important;
    color: #000;
}

    .GridPager th,
    .GridPager td {
        padding: 5px;
        vertical-align: top;
        text-align: right !important;
        width: 100% !important;
    }

.GridPageIndexLabel {
    font-size: 11pt;
    color: #11577B;
}

.DivGridPager {
    padding-top: 5px;
    width: 100% !important;
    align-content: center !important;
    text-align: center !important;
    padding-left: 0px;
    margin-left: 0px;
}

.divSearchHeader {
    width: 100%;
    padding-bottom: 30px !important;
    vertical-align: middle;
    background-color: #E15D32 !important;
    height: 25px;
}

.divPagination {
    text-align: right !important;
    padding-left: 20px;
}

.HeaderLabel {
    color: #1572E8;
}

.HeaderLogoLabel {
    color: #1572E8;
    font-size: 15pt;
}

.pageheader {
    padding-bottom: 15px;
    margin-left: -50px;
}

.divpageheader {
    padding-bottom: 15px;
    float: left;
    width: 100%;
}

.divFormButtons {
    width: 100%;
    text-align: center !important;
    padding-top: 25px;
    padding-bottom: 15px;
}

.btnAdd {
    padding: 2px !important;
}

.CheckBox {
    padding-right: 15px;
}

    .CheckBox .label {
        padding-right: 15px;
    }


/* CheckBoxes */
.checkBox {
    display: block;
    position: relative;
    padding-left: 35px;
    margin-bottom: 12px;
    cursor: pointer;
    font-size: 22px;
    -webkit-user-select: none;
    -moz-user-select: none;
    -ms-user-select: none;
    user-select: none;
}

    /* Hide the browser's default checkbox */
    .checkBox input {
        position: absolute;
        opacity: 0;
        cursor: pointer;
        height: 0;
        width: 0;
    }

/* Create a custom checkbox */
.checkmark {
    position: absolute;
    top: 0;
    left: 0;
    height: 18px;
    width: 18px;
    background-color: #eee;
}

/* On mouse-over, add a grey background color */
.checkBox:hover input ~ .checkmark {
    background-color: #ccc;
}

/* When the checkbox is checked, add a blue background */
.checkBox input:checked ~ .checkmark {
    background-color: #2196F3;
}

/* Create the checkmark/indicator (hidden when not checked) */
.checkmark:after {
    content: "";
    position: absolute;
    display: none;
}

/* Show the checkmark when checked */
.checkBox input:checked ~ .checkmark:after {
    display: block;
}

/* Style the checkmark/indicator */
.checkBox .checkmark:after {
    left: 7px;
    top: 3px;
    width: 5px;
    height: 10px;
    border: solid white;
    border-width: 0 3px 3px 0;
    -webkit-transform: rotate(45deg);
    -ms-transform: rotate(45deg);
    transform: rotate(45deg);
}

.confirmationButtonWidth {
    width: 100px;
}

.PaddingLeft20 {
    padding-left: 20px;
}

.HeaderIcon {
    width: 22px;
}

.TicketHeaderIcon {
    width: 32px;
}

.NavLinkLeft {
    padding-top: 25px;
}

.divLbl {
    font-size: 11px !important;
    letter-spacing: .06em;
    text-transform: uppercase;
    font-weight: 400;
}

.divTitle {
    font-size: 13px !important;
    letter-spacing: .06em;
    text-transform: uppercase;
    font-weight: 400;
    padding-bottom: 10px;
    color: #1269DB;
    font-weight: bold;
}

.lblTicketOpen {
    color: #F25961;
}

.lblTicketInProgress {
    color: #FFAD46;
}

.lblTicketClosed {
    color: #31CE36;
}

.lblCardHeader {
    text-transform: uppercase;
    font-size: 10pt;
    color: #1269DB;
    padding-bottom: 15px;
}

.lnkSubActive {
    font-weight: bold;
    color: #1572E8;
}

.PaymentSuccess {
    color: forestgreen;
    font-weight: bold;
}

.PaymentPending {
    color: orange;
    font-weight: bold;
}

.rdList {
}

    .rdList .label {
        padding-left: 10px !important;
    }

.GridViewIcon {
    width: 16px;
    height: 16px;
}

.PagerButtonsCircle1 {
    height: 30px;
}

.PagerButtonsCircle {
    height: 30px;
}

.PagerCircle {
    border-radius: 10% !important;
}

.PageActive {
    font-weight: bold;
    color: #ffffff !important;
    background-color: #6969CB;
}

.chkChoice input {
}

.chkChoice td {
    padding-left: 20px;
}

.chkChoice input {
}

.chkChoice label {
    padding-left: 10px;
}

.ImgCalendar {
    height: 32px;
}

.AjaxCalendar .ajax__calendar_container {
    background-color: #fff !important;
    border: solid 1px #0296C6 !important;
}

.AjaxCalendar .ajax__calendar_header {
    padding-top: 5px !important;
    border: 1px solid #ffffff !important;
    background-color: #9A7AF9 !important;
    color: White;
    height: 25px;
}

.AjaxCalendar .ajax__calendar_footer {
    background-color: #0296C6 !important;
    color: White !important;
    padding-bottom: 0px;
    height: 25px;
}

.AjaxCalendar .ajax__calendar_hover {
    background-color: #0296C6 !important;
    color: White !important;
    font-weight: bold;
}

.AjaxCalendar .ajax__calendar_today {
    padding-top: 5px !important;
    background-color: #59B7FC !important;
    color: White;
    font-weight: bold;
}

.AjaxCalendar .ajax__calendar_day {
    background-color: #fff !important;
    color: #3F3F3F;
}

.AjaxCalendar .ajax__calendar_dayname {
    background-color: #fff !important;
    color: black;
    padding-top: 5px !important;
    padding-bottom: 20px !important;
    width: 100%;
}

InnerGridTdStyle {
    width: 100% !important;
    border: 0px !important;
}

.InnerGridDivStyle {
    width: 100% !important;
    border: 0px !important;
}

.tdLeft15_B {
    width: 15%;
    font-weight: bold;
}

.tdLeft10 {
    width: 10%;
}

.tdLeft15 {
    width: 15%;
}

.tdLeft20 {
    width: 20%;
}

.tdLeft25 {
    width: 25%;
}

.tdLeft30 {
    width: 30%;
}

.tdLeft85 {
    width: 85%;
}

.tdLeft35 {
    width: 35%;
}

.tdLeft40 {
    width: 40%;
}

.tdLeft50 {
    width: 50%;
}

.tdLeft60 {
    width: 60%;
}

.tdLeft75 {
    width: 75%;
}

.tdLeft70 {
    width: 70%;
}

.tdLeft80 {
    width: 80%;
}

.GridInnerView {
    text-align: left;
    min-width: 99% !important;
}

    .GridInnerView th {
        padding-left: 0px !important;
    }

    .GridInnerView tr > td:first-child, .GridInnerView tr > th:first-child {
        padding-left: 1rem !important;
    }

    .GridInnerView tr > td:last-child, .GridInnerView tr > th:last-child {
        padding-right: 1rem !important;
    }

    .GridInnerView tr:last-child {
        border-bottom: 0px solid #48ABF7 !important;
    }


.GridInnerHeader {
    border: 0px solid #48ABF7;
    padding-top: 12px;
    padding-bottom: 12px;
    height: 2.5rem;
    text-align: left;
    padding-left: 0px;
    color: #FFFFFF !important;
    background-color: #6967CE;
}

    .GridInnerHeader th {
        font-weight: bold !important;
        color: #FFFFFF !important;
        height: 45px !important;
    }

        .GridInnerHeader th a {
            font-weight: bold !important;
            color: #FFFFFF !important;
        }

        .GridInnerHeader th:first-child {
            border-top-left-radius: 0px;
        }

        .GridInnerHeader th:last-child {
            border-top-right-radius: 0px;
        }



.GridInnerRow {
    background-color: #fff;
    padding-top: 12px;
    padding-bottom: 12px;
    height: 2.5rem;
    text-align: left;
    padding-left: 10px;
    overflow-wrap: anywhere;
    height: 40px !important;
}

.GridInnerAltRow {
    background-color: #fff;
    padding-top: 12px;
    padding-bottom: 12px;
    height: 2.5rem;
    text-align: left;
    padding-left: 10px;
    overflow-wrap: anywhere;
}


/*Search Box Styles : Strat */

.divSearchModal {
    display: none;
    position: fixed;
    z-index: 1050;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    /*background: rgba(0,0,0,0.4);*/
}

.divSearchDialog {
    position: absolute;
    top: 0;
    right: 0;
    background: #ffffff;
    padding: 5px;
    min-width: 15%;
    box-shadow: 0 10px 25px rgba(0,0,0,0.2);
    border-radius: 4px;
    border: 1px solid #7F7F7F;
}

.tdSearchLeft {
    width: 30%;
    font-weight: bold;
    vertical-align: middle;
}

.tdSearchRight {
    width: 70%;
}

.Padding_top_10 {
    padding-top: 10px;
}

.Padding_Bottom_10 {
    padding-bottom: 10px;
}

.Padding_Bottom_20 {
    padding-bottom: 20px;
}

.Padding_Bottom_30 {
    padding-bottom: 30px;
}

.tdSearchButton {
    padding-top: 20px;
}

.divSearchHeader {
    padding-bottom: 50px;
    width: 100%;
    background-color: #E66871;
}

.SearchTable {
    padding-top: 25px;
    padding-left: 20px;
    padding-right: 20px;
    padding-bottom: 0px;
}

/*Search Box Styles : Strat */

.divPopup1 {
    padding: 5px;
    width: 500px;
}

.divPopupHeader {
    background-color: #6967CE;
    height: 40px;
    color: white;
    text-align: center;
    vertical-align: middle;
}

.divPopupHeader_Left {
    width: 80%;
    float: left;
    text-align: left;
    padding-left: 10px;
    vertical-align: middle;
    font-weight: bold;
}

.divPopupHeader_Right {
    width: 20%;
    float: left;
    text-align: right;
    padding-right: 20px;
    vertical-align: middle;
    padding-top: 0px;
}

.PopupClose {
    width: 18px;
    height: 24px;
}

.divBody {
    background-color: #F9F9F9;
    border: 1px solid #00BCD4;
    width: 100%;
    float: left;
    padding-left: 10px;
    padding-right: 10px;
    padding-bottom: 10px;
    margin-top: 0px;
}

.modalBackground {
    background-color: gray;
    opacity: 0.6;
    width: 100%;
    text-align: center;
}

.lblPopupHeader {
    font-size: 13pt;
}

.divPopupButtons {
    text-align: center;
    padding-bottom: 25px;
}

.chkCheckListBox input[type=checkbox] {
    margin-right: 8px;
}

.CardBorder {
    /*border: 1px solid #E8E8EC;*/
    /*box-shadow: 2px 3px #E8E8EC;*/
}

.ImgClientLogo1000 {
    width: 100%;
    height: 50px;
    padding-left: 20px;
}

.GridEmptyRowHeaderTableBackGround {
}

.spanHeader_Full {
    color: #ffffff;
    background-color: #E15D32;
    padding-left: 20px;
    padding-right: 50px;
    padding-top: 10px;
    text-align: left;
    font-size: 11pt;
    display: inline-block;
    width: 100%;
    height: 40px;
}

.spanHeader {
    color: #ffffff;
    background-color: #E15D32;
    border-top-left-radius: 0px;
    border-top-right-radius: 50px;
    padding-left: 20px;
    padding-right: 50px;
    padding-top: 10px;
    text-align: left;
    font-size: 11pt;
    display: inline-block;
    width: 300px;
    height: 40px;
}

.spanHeaderWidth80P {
    color: #ffffff;
    background-color: #E15D32;
    border-top-left-radius: 0px;
    border-top-right-radius: 50px;
    padding-left: 20px;
    padding-right: 50px;
    padding-top: 10px;
    text-align: left;
    font-size: 11pt;
    display: inline-block;
    width: 80%;
    height: 40px;
}

.spanHeaderWidth90P {
    color: #ffffff;
    background-color: #E15D32;
    border-top-left-radius: 0px;
    border-top-right-radius: 50px;
    padding-left: 20px;
    padding-right: 50px;
    padding-top: 10px;
    text-align: left;
    font-size: 11pt;
    display: inline-block;
    width: 90%;
    height: 40px;
}

.spanHeaderAuditDetails {
    color: white;
    background-color: #E15D32;
    border-top-left-radius: 0px;
    border-top-right-radius: 50px;
    padding-left: 20px;
    padding-right: 50px;
    padding-top: 10px;
    text-align: left;
    font-size: 11pt;
    display: inline-block;
    width: 200px;
    height: 40px;
}

.divDetailsBox {
    padding-left: 20px;
}

.spanHeaderBorder {
    border-bottom: 1px solid #969696;
    padding-top: 18px;
}

.bgNestedGrid {
    background-color: #032246;
    color: white;
}

.tabActive {
    background-color: #9878F6 !important;
}

.lblHeader {
    width: 50px;
}

.lblAuditHeader {
    font-weight: bold;
}

.TextOverlap {
    white-space: nowrap; /* keep text in one line */
    overflow: hidden; /* hide extra text */
    text-overflow: ellipsis; /* show ... */
}

.lblHeaderColor {
    color: black;
}

.brandLogoHeight {
    height: 150px;
}

.brandLogoDiv {
    opacity: 1;
    padding-top: 10px;
}

.radioSpace input[type="radio"] {
    margin-right: 6px;
}

.divVisible {
    visibility: visible;
}

.divHide {
    visibility: hidden;
}

.timeTableBox_Period {
    width: 100%;
    display: inline-flex;
    align-items: center !important;
    gap: .1rem;
    padding: .9rem .5rem;
    margin: .2rem 0;
    border: 1px solid rgba(0,0,0,.12);
    border-radius: .5rem;
    background: #f8f9fa;
    color: black;
    cursor: grab;
}

.timeTableBox_Subject {
    width: 100%;
    display: inline-flex;
    align-items: center !important;
    gap: .1rem;
    padding: .9rem .5rem;
    margin: .2rem 0;
    border: 1px solid rgba(0,0,0,.12);
    border-radius: .5rem;
    background-color: #3B82F6; /* Blue */
    color: #FFFFFF;
    cursor: grab;
}

.timeTableBox_Language {
    width: 100%;
    display: inline-flex;
    align-items: center !important;
    gap: .1rem;
    padding: .9rem .5rem;
    margin: .2rem 0;
    border: 1px solid rgba(0,0,0,.12);
    border-radius: .5rem;
    background-color: #8B5CF6; /* Purple */
    color: #FFFFFF;
    cursor: grab;
}

.timeTableBox_Sport {
    width: 100%;
    display: inline-flex;
    align-items: center !important;
    gap: .1rem;
    padding: .9rem .5rem;
    margin: .2rem 0;
    border: 1px solid rgba(0,0,0,.12);
    border-radius: .5rem;
    background-color: #10B981; /* Green */
    color: #FFFFFF;
    cursor: grab;
}

.timeTableBox_Other {
    width: 100%;
    display: inline-flex;
    align-items: center !important;
    gap: .1rem;
    padding: .9rem .5rem;
    margin: .2rem 0;
    border: 1px solid rgba(0,0,0,.12);
    border-radius: .5rem;
    background-color: #6B7280; /* Gray */
    color: #FFFFFF;
    cursor: grab;
}

.timeTableBox_Extracurricular {
    width: 100%;
    display: inline-flex;
    align-items: center !important;
    gap: .1rem;
    padding: .9rem .5rem;
    margin: .2rem 0;
    border: 1px solid rgba(0,0,0,.12);
    border-radius: .5rem;
    background-color: #F59E0B; /* Orange */
    color: #FFFFFF;
    cursor: grab;
}

.lnkActive {
    font-weight: bold;
}

.timeTableBox_Present {
    min-width: 100px;
    text-align: center;
    width: 100%;
    display: inline-flex;
    align-items: center !important;
    gap: .1rem;
    padding: .9rem .5rem;
    margin: .2rem 0;
    border: 1px solid rgba(0,0,0,.12);
    border-radius: .5rem;
    background: #C0FE63;
    color: black;
    cursor: grab;
}

.timeTableBox_Absent {
    min-width: 100px;
    text-align: center;
    width: 100%;
    display: inline-flex;
    align-items: center !important;
    gap: .1rem;
    padding: .9rem .5rem;
    margin: .2rem 0;
    border: 1px solid rgba(0,0,0,.12);
    border-radius: .5rem;
    background: #93BDFD;
    color: black;
    cursor: grab;
}

.timeTableBox_Leave {
    min-width: 100px;
    text-align: center;
    width: 100%;
    display: inline-flex;
    align-items: center !important;
    gap: .1rem;
    padding: .9rem .5rem;
    margin: .2rem 0;
    border: 1px solid rgba(0,0,0,.12);
    border-radius: .5rem;
    background: #FBCE53;
    color: black;
    cursor: grab;
}

.timeTableBox_NA {
    min-width: 100px;
    text-align: center;
    width: 100%;
    display: inline-flex;
    align-items: center !important;
    gap: .1rem;
    padding: .9rem .5rem;
    margin: .2rem 0;
    border: 1px solid rgba(0,0,0,.12);
    border-radius: .5rem;
    background: #f8f9fa;
    color: black;
    cursor: grab;
}

.bodyBackgroundStyle {
    background-color: #FFFFFF;
}

.btnUpload {
    display: inline-block;
    padding: 8px 16px;
    cursor: pointer;
    background-color: #007bff; /* Button color */
    color: #fff; /* Text color */
    border-radius: 5px;
    font-size: 14px;
}

    .btnUpload:hover {
        background-color: #0056b3;
    }

.lblPageHeader {
    color: #072D5C;
    text-transform: uppercase;
}

.lblPageNavigationTitle {
    color: #072D5C;
}

.ImgNavigationArrow {
    height: 15px;
    padding-left: 10px;
    padding-right: 10px;
}

.table th, .table td {
    border-bottom: 0px !important;
}

.AppBGColor {
    background-color: #032246;
}

.ContentPageBG {
    background-color: #EEF2F6; /*Lakshmi:  Content page background color*/
}

.avatar_Left {
    width: 40px;
    height: 40px;
    border-radius: 50%; /* makes it round */
    background-color: #409AD9;
    color: #ECF0F1;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 18px;
    font-weight: bold;
    text-transform: uppercase;
}

.avatar_Right {
    width: 40px;
    height: 40px;
    border-radius: 50%; /* makes it round */
    background-color: #ECF0F1;
    color: #409AD9;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 18px;
    font-weight: bold;
    text-transform: uppercase;
}

.treeview {
    list-style-type: none;
    padding-left: 20px;
    font-family: Arial, sans-serif;
}

    .treeview li {
        position: relative;
        margin: 15px 0;
        padding-left: 20px;
    }

        /* Connector lines */
        .treeview li::before {
            content: "";
            position: absolute;
            top: 0;
            left: 0;
            border-left: 1px solid #ccc;
            height: 100%;
        }

        .treeview li::after {
            content: "";
            position: absolute;
            top: 12px;
            left: 0;
            width: 15px;
            border-top: 1px solid #ccc;
        }

        /* Remove line for last item */
        .treeview li:last-child::before {
            height: 12px;
        }


.linkSubHeader {
    font-size: 12pt;
    color: #6868C9;
    text-transform: uppercase;
}

.checkbox-item {
    display: inline-flex;
    align-items: center;
    margin-right: 25px; /* space between items */
}

    .checkbox-item input {
        margin-right: 6px; /* space between box and text */
    }

.divContainerTime {
    display: flex;
    align-items: center; /* vertical alignment */
    gap: 10px; /* space between divs */
}

.divContainerBoxTime {
}

.ImgProfileHeader {
    width: 28px !important;
    height: 28px !important;
}

.step-btn {
    flex: 1;
    padding: 12px;
    border: none;
    background: #e9ecef;
    color: #000;
    font-size: 11pt;
    font-weight: bold;
    position: relative;
    cursor: pointer;
    text-align: left !important;
    padding-left: 50px;
}

    /* Active step */
    .step-btn.active {
        background: #E15D32;
        color: white;
    }

    /* Arrow effect */
    .step-btn::after {
        content: '';
        position: absolute;
        top: 0;
        right: -20px;
        width: 0;
        height: 0;
        border-top: 22px solid transparent;
        border-bottom: 22px solid transparent;
        border-left: 20px solid #E15D32;
        z-index: 1;
    }

    /* Active arrow */
    .step-btn.active::after {
        border-left-color: #E15D32;
    }

    /* Remove arrow from last step */
    .step-btn:last-child::after {
        display: none;
    }