@import url("components/cards.css");

/*---- Invoice Installment Status Badges ----*/

.invoice-installment-badge {
    display: inline-block;
    padding: 2px 8px;
    border-radius: 3px;
    font-size: 11px;
    font-weight: 600;
    text-transform: uppercase;
}

.invoice-installment-badge--paid {
    background-color: #e6f4ea;
    color: #2e7d32;
}

.invoice-installment-badge--due {
    background-color: #fff8e1;
    color: #f57f17;
}

.invoice-installment-badge--overdue {
    background-color: #fdecea;
    color: #c62828;
}

html {
    height: 100%;
}

body {
    position: relative !important;
}

.long input {
    width: 100%;
}

md-input-group.md-default-theme label {
    color: rgba(0, 0, 0, 0.7);
    text-shadow: none;
}

md-input-group.md-default-theme input,
md-input-group.md-default-theme textarea,
md-input-group input {
    border-color: rgba(0, 0, 0, 0.6);
    color: rgba(0, 0, 0, 0.73);
}

md-input-group.md-input-focused label {
    color: #03a9f4;
}

md-input-group.md-input-focused input {
    border-color: #03a9f4;
}

/*---- Input Error MSG ----*/

span.input-fields-error {
    position: absolute;
    bottom: -16px;
    font-size: 12px;
}

span.input-fields-error.danger {
    color: #f44336;
}

span.input-fields-error.warning {
    color: #ff5722;
}

/*---- Assessment Duplicate Name Warning ----*/

.assessment-duplicate-warning {
    display: block;
    margin-top: 8px;
    margin-bottom: 8px;
    padding: 10px 12px;
    background-color: #fff3cd;
    border-left: 4px solid #ff9800;
    color: #856404;
    font-size: 13px;
    border-radius: 4px;
}

.assessment-duplicate-warning-icon {
    margin-right: 8px;
    color: #ff9800;
}

span.input-fields-error.info {
    color: #03a9f4;
}

span.input-fields-error.success {
    color: #0f9d58;
}

/*---- Angular ui form validation MSG override ----*/

span.CustomValidationError {
    position: absolute;
    bottom: -16px;
    font-size: 12px;
    color: #f44336;
    transition: All 1s ease;
    -webkit-transition: All 1s ease;
    -moz-transition: All 1s ease;
    -o-transition: All 1s ease;
}

.md-button[disabled] {
    color: #969595 !important;
}

/*------------------------*/

/*select.form-control {
    border-left: medium none;
    border-right: medium none;
    border-top: medium none;
    font-weight: 700;
    padding-left: 0;
    border-color: rgba(0,0,0,0.6);

}*/

.dashboard-users li a img {
    width: 100px;
    border-radius: 3px;
    /* added by shanika */
    border: 1px solid #bbbbbb;
}

select.form-control option {
    padding-top: 8px;
    padding-bottom: 8px;
}

.material-design-form-group {
    height: 60px;
    padding-top: 24px;
    margin: 7px 0 8px 0;
    position: relative;
    display: block;
}

.box-body h4 {
    margin-bottom: 0;
}

.profile-card {
    -moz-box-shadow: 0px 0px 5px #000000;
    -webkit-box-shadow: 0px 0px 5px #000000;
    box-shadow: 0px 0px 5px #000000;
    margin-bottom: 16px;
}

.profile-pic {
    width: 100%;
    height: 190px;
    overflow: hidden;
}

.profile-pic img {
    width: 100%;
    vertical-align: middle;
}

.profile-pic-content {
    width: 100%;
    min-height: 70px;
    position: relative;
    padding: 8px 12px 12px;
}

h4.profile-card-name {
    font-size: 24px;
    font-weight: 500;
    margin-bottom: 8px;
    margin-top: 0;
    text-overflow: ellipsis;
    white-space: nowrap;
    overflow: hidden;
}

.profile-action-round-btn {
    position: absolute;
    top: -26px;
    right: 26px;
}

ul.he-subjects {
    display: none;
}

ul.he-subjects.exapand-list {
    display: block;
}

/*---- Material Design Color Scheme Override*/

.md-button.md-default-theme[disabled],
.md-button.md-default-theme.md-raised[disabled],
.md-button.md-default-theme.md-fab[disabled] {
    pointer-events: none;
    cursor: not-allowed;
    filter: alpha(opacity=65);
    -webkit-box-shadow: none;
    box-shadow: none;
    opacity: .65;
    color: #ffffff;
}

.md-button.md-default-theme:not(.md-fab) {
    border-radius: 2px;
    padding: 8px 30px;
    /*color: rgba(255,255,255,.84);*/
}

/*
** Primary BTN
*/

.md-button.md-default-theme.md-raised.md-primary,
.md-button.md-default-theme.md-fab.md-primary {
    color: white;
    background-color: #3b78e7;
    /* edited by shanika */
}

.md-button.md-default-theme.md-raised.md-primary:not([disabled]):hover,
.md-button.md-default-theme.md-raised.md-primary:not([disabled]):focus,
.md-button.md-default-theme.md-fab.md-primary:not([disabled]):hover,
.md-button.md-default-theme.md-fab.md-primary:not([disabled]):focus {
    background-color: #3b78e7;
    /* edited by shanika */
}

.md-button.md-primary {
    /* color: #4285f4; */
    color: #3b78e7;
    /* edited by shanika */
}

.md-button.md-primary .fa-chevron-circle-right {
    font-size: 2.5em;
}

/*
** Success BTN
*/

.md-button.md-default-theme.md-raised.md-success,
.md-button.md-default-theme.md-fab.md-success {
    color: white;
    background-color: #0f9d58;
}

.md-button.md-default-theme.md-raised.md-success:not([disabled]):hover,
.md-button.md-default-theme.md-raised.md-success:not([disabled]):focus,
.md-button.md-default-theme.md-fab.md-success:not([disabled]):hover,
.md-button.md-default-theme.md-fab.md-success:not([disabled]):focus {
    background-color: #0f9d58;
}

.md-button.md-success {
    color: #0f9d58;
}

/*
** Info BTN
*/

.md-button.md-default-theme.md-raised.md-info,
.md-button.md-default-theme.md-fab.md-info {
    color: white;
    background-color: #03a9f4;
}

.md-button.md-default-theme.md-raised.md-info:not([disabled]):hover,
.md-button.md-default-theme.md-raised.md-info:not([disabled]):focus,
.md-button.md-default-theme.md-fab.md-info:not([disabled]):hover,
.md-button.md-default-theme.md-fab.md-info:not([disabled]):focus {
    background-color: #03a9f4;
}

.md-button.md-info {
    color: #03a9f4;
}

/*
** Warning BTN
*/

.md-button.md-default-theme.md-raised.md-warning,
.md-button.md-default-theme.md-fab.md-warning {
    color: white;
    background-color: #ff5722;
}

.md-button.md-default-theme.md-raised.md-warning:not([disabled]):hover,
.md-button.md-default-theme.md-raised.md-warning:not([disabled]):focus,
.md-button.md-default-theme.md-fab.md-warning:not([disabled]):hover,
.md-button.md-default-theme.md-fab.md-warning:not([disabled]):focus {
    background-color: #ff5722;
}

.md-button.md-warning {
    color: #ff5722;
}

/*
** Danger BTN
*/

.md-button.md-default-theme.md-raised.md-danger,
.md-button.md-default-theme.md-fab.md-danger {
    color: white;
    background-color: #f44336;
}

.md-button.md-default-theme.md-raised.md-danger:not([disabled]):hover,
.md-button.md-default-theme.md-raised.md-danger:not([disabled]):focus,
.md-button.md-default-theme.md-fab.md-danger:not([disabled]):hover,
.md-button.md-default-theme.md-fab.md-danger:not([disabled]):focus {
    background-color: #f44336;
}

.md-button.md-danger {
    color: #f44336;
}

/*
** Default BTN
*/

.md-button.md-default-theme.md-raised.md-default,
.md-button.md-default-theme.md-fab.md-default {
    color: black;
    background-color: transparent;
}

.md-button.md-default-theme.md-raised.md-default:not([disabled]):hover,
.md-button.md-default-theme.md-raised.md-default:not([disabled]):focus,
.md-button.md-default-theme.md-fab.md-default:not([disabled]):hover,
.md-button.md-default-theme.md-fab.md-default:not([disabled]):focus {
    background-color: transparent;
}

.md-button.md-default {
    color: lightgray;
}

button.md-primary.md-button.md-default-theme[disabled] {
    color: gray;
}

/*
** Material Design Input Margins Reset For The Tables
*/

.table-row-inputs,
td .md-checked {
    margin: 0;
}

/*
** Input Icon
*/

.md-input-has-value .input-icon-label {
    display: inline-block;
    float: left;
    padding-top: 9px;
}

/*---- Material Toast ----*/

md-toast {
    position: fixed;
    z-index: 10000;
}

/*---- MD Bottom Sheet ----*/

md-bottom-sheet {
    z-index: 1041;
}

/*--- Profile Panel ----*/

.profile-holder {
    margin: 20px;
}

.profile-holder:before {
    content: '';
    display: inline-block;
    height: 100%;
    vertical-align: middle;
    margin-right: -0.25em;
    /* Adjusts for spacing */
}

.profile-info-header {
    background-color: #1b1a1e;
    height: 100px;
    margin: auto;
    width: 96%;
    -moz-box-shadow: 0px 0px 5px #000000;
    -webkit-box-shadow: 0px 0px 5px #000000;
    box-shadow: 0px 0px 5px #000000;
    padding-left: 30px;
    padding-right: 30px;
    padding-top: 30px;
    transition: All 1s ease;
    -webkit-transition: All 1s ease;
    -moz-transition: All 1s ease;
    -o-transition: All 1s ease;
}

.profile-img-and-info {
    background-color: #fe504f;
    height: 220px;
    width: 100%;
    -moz-box-shadow: 0px 0px 5px #000000;
    -webkit-box-shadow: 0px 0px 5px #000000;
    box-shadow: 0px 0px 5px #000000;
}

.profile-more-info {
    background-color: #1b1a1e;
    margin: auto;
    min-height: 420px;
    width: 96%;
    -moz-box-shadow: 0px 0px 5px #000000;
    -webkit-box-shadow: 0px 0px 5px #000000;
    box-shadow: 0px 0px 5px #000000;
}

.profile-info-container .profile-pic {
    height: 220px;
}

.profile-info-header h4 {
    color: #f1f8e9;
    font-size: 22px;
    font-weight: 500;
    margin: 0;
}

.profile-info-header .material-design-form-group {
    margin: 0;
    padding: 0;
}

.profile-info-header .material-design-form-group select {
    background: none repeat scroll 0 0 transparent;
    border-bottom-color: #f1f8e9;
    color: #f1f8e9;
}

/*
** Profile Picture Uploading Component
*/

.inner-profile-pic-holder {
    display: inline-block;
    position: relative;
}

.profile-pic-upload-btn {
    display: inline-block;
    margin-left: 15px;
}

/*---- Circle Progress ----*/

.inner-profile-pic-holder md-progress-circular.md-default-theme {
    position: absolute;
    top: 50%;
    margin-top: -26px;
    left: 50%;
    margin-left: -26px;
}

md-progress-circular.md-default-theme .md-inset {
    background-color: rgba(0, 0, 0, 0.0);
}

md-progress-circular.md-default-theme .md-circle .md-mask .md-fill {
    background-color: rgba(0, 0, 0, 0.0);
    border: 5px solid #03a9f4;
}

[ng\:cloak],
[ng-cloak],
[data-ng-cloak],
[x-ng-cloak],
.ng-cloak,
.x-ng-cloak {
    display: none !important;
}

/*
** Bottom Sheets
*/

md-bottom-sheet {
    position: fixed;
}

md-sidenav {
    z-index: 1040;
    position: fixed;
}

md-backdrop.md-opaque.md-default-theme {
    position: fixed;
    z-index: 1040;
}

md-backdrop {
    position: fixed !important;
}

/*
** Select2 Styles
*/

.select2-container .select2-choice {
    height: 34px;
    background: none;
    border-top: none;
    border-left: none;
    border-right: none;
    border-bottom: 1px solid rgba(0, 0, 0, 0.73);
    border-radius: 0;
    color: rgba(0, 0, 0, 0.73) !important;
    font-weight: 700;
    padding-left: 0;
}

.select2-container .select2-choice .select2-arrow {
    background: none;
    border-left: none;
    border-radius: 0;
}

.select2-container-active.select2-dropdown-open {
    -moz-box-shadow: none;
    -webkit-box-shadow: none;
    box-shadow: none;
}

.select2-drop {
    -moz-box-shadow: 0px 0px 5px rgba(0, 0, 0, 0.6);
    -webkit-box-shadow: 0px 0px 5px rgba(0, 0, 0, 0.6);
    box-shadow: 0px 0px 5px rgba(0, 0, 0, 0.6);
    border: none;
    margin-top: 0px;
    transition: margin-top 0.4s ease;
    -webkit-transition: margin-top 0.4s ease;
    -moz-transition: margin-top 0.4s ease;
    -o-transition: margin-top 0.4s ease;
    border-radius: 0;
    width: 0;
}

.select2-search input {
    border-top: none;
    border-left: none;
    border-right: none;
    border-bottom: 1px solid #03a9f4;
}

.select2-drop.select2-drop-active {
    margin-top: -34px;
}

.select2-container-active .select2-choice,
.select2-container-active .select2-choices {
    -moz-box-shadow: none;
    -webkit-box-shadow: none;
    box-shadow: none;
}

.select2-result {
    transition: ALL 0.4s ease;
    -webkit-transition: ALL 0.4s ease;
    -moz-transition: ALL 0.4s ease;
    -o-transition: ALL 0.4s ease;
}

.select2-result.select2-highlighted {
    background: #2196f3;
}

.select2-container-multi .select2-choices {
    border-top: none;
    border-left: none;
    border-right: none;
    border-bottom: 1px solid;
    background: #ffffff;
}

.select2-drop.select2-drop-multi.select2-display-none.select2-drop-active {
    margin-top: -3px;
    padding-top: 5px;
}

.select2-container-multi.select2-container-active .select2-choices {
    border: none;
}

.select2-container.select2-container-multi.ng-pristine.ng-untouched.ng-valid.select2-dropdown-open {
    z-index: 10000;
    -moz-box-shadow: 0px -1px 5px rgba(0, 0, 0, 0.6);
    -webkit-box-shadow: 0px -1px 5px rgba(0, 0, 0, 0.6);
    box-shadow: 0px -1px 5px rgba(0, 0, 0, 0.6);
}

.select2-container.select2-container-multi.ng-pristine.ng-untouched.ng-valid.select2-dropdown-open ul {
    border-bottom: 1px solid #03a9f4;
}

.select2-default {
    color: rgba(0, 0, 0, 0.73) !important;
    font-weight: 700;
    display: block;
    float: none;
    /*margin-right: 26px;*/
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    width: auto;
}

.select2-container-multi .select2-choices .select2-search-field input {
    padding-left: 0;
}

.select2-container.select2-dropdown-open .select2-choices li input,
.select2-container-active .select2-choices li input {
    padding-left: 5px;
}

.select2-container.select2-container-active .select2-choices li input {
    padding-left: 5px;
}

button.dropdown-toggle:hover,
button.dropdown-toggle:focus,
button.btn.btn-default.dropdown-toggle {
    background: none !important;
    box-shadow: none;
}

.list-radio-group md-radio-button {
    display: inline;
    margin-left: 0;
}

/*---- Time tbl bt-sheet ----*/

.time-tbl-bt-sheet {
    padding-top: 15px;
    font-size: 18px;
}

.row.bt-sheet-header {
    padding-bottom: 10px;
    font-weight: 700;
}

.time-tbl-bt-sheet-cards {
    box-shadow: 0px 0px 6px 0px rgba(0, 0, 0, 0.75);
    border-radius: 2px;
    overflow: hidden;
}

.time-tbl-bt-sheet-cards .card-cont {
    padding: 8px;
    font-size: 14px;
}

/*---- Time Table Fixed Box ----*/

.time-table-fixed-box {
    height: 300px;
    position: fixed;
    bottom: -20px;
    left: 0;
    border-radius: 0;
    padding-top: 8px;
    padding-bottom: 8px;
}

span.time-table-slot-error {
    color: #fff;
    text-align: center;
    display: inherit;
    cursor: help;
    height: 29px;
    margin-top: -2px;
    padding-top: 5px;
}

/*---- No Data ----*/

.no-data {
    background-color: #ffffff;
    padding: 20px;
    -webkit-box-shadow: 0 0 2px 0px rgba(0, 0, 0, 0.2);
    -moz-box-shadow: 0 0 2px 0px rgba(0, 0, 0, 0.2);
    box-shadow: 0 0 2px 0px rgba(0, 0, 0, 0.2);
}

.no-data-icon {
    width: 60px;
    height: 60px;
    background-color: #9E9E9E;
    border-radius: 50%;
    color: #ffffff;
    display: inline-block;
    padding-top: 17px;
    text-align: center;
}

.no-data>h3 {
    display: inline-block;
    font-size: 22px;
    font-weight: 200;
    margin-left: 20px;
}

/*---- Disabled Input ----*/

md-input-container.md-default-theme .md-input[disabled],
[disabled] md-input-container.md-default-theme .md-input {
    border-bottom-color: rgba(0, 0, 0, 0.76);
    color: rgba(0, 0, 0, 0.76);
    background-image: linear-gradient(to right, rgba(0, 0, 0, 0) 0%, rgba(0, 0, 0, 0.12) 33%, transparent 0%);
    background-image: -ms-linear-gradient(left, transparent 0%, rgba(0, 0, 0, 0.12) 100%);
}

/*---- Top Scores ----*/

.top-scores-holder {
    width: 100%;
    height: auto;
    border: 2px;
    margin-bottom: 16px;
    -moz-box-shadow: 0px 0px 5px rgba(0, 0, 0, 0.6);
    ;
    -webkit-box-shadow: 0px 0px 5px rgba(0, 0, 0, 0.6);
    ;
    box-shadow: 0px 0px 5px rgba(0, 0, 0, 0.6);
    ;
}

.top-score-student-pic {
    width: 100%;
    height: 150px;
    background-size: 100%;
    background-repeat: no-repeat;
    position: relative;
}

.top-score-student-cont {
    width: 100%;
    height: 40px;
    padding: 12px 0;
}

.top-score-student-cont h4 {
    margin: 0;
    font-size: 16px;
    font-weight: 400;
}

h3.top-scores-subject-title {
    margin: 0 0 12px 0;
    font-size: 16px;
    font-weight: 400;
    border-bottom: 1px solid lightgray;
    padding: 0 0 10px 0;
}

h4.top-scores-student-name {
    width: 100%;
    position: absolute;
    bottom: 0;
    margin: 0px;
    color: #ffffff;
    white-space: nowrap;
    text-overflow: ellipsis;
    overflow: hidden;
    padding: 10px 10px;
    font-weight: 300;
    /* IE9 SVG, needs conditional override of 'filter' to 'none' */
    background: url(data:image/svg+xml;base64,PD94bWwgdmVyc2lvbj0iMS4wIiA/Pgo8c3ZnIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyIgd2lkdGg9IjEwMCUiIGhlaWdodD0iMTAwJSIgdmlld0JveD0iMCAwIDEgMSIgcHJlc2VydmVBc3BlY3RSYXRpbz0ibm9uZSI+CiAgPGxpbmVhckdyYWRpZW50IGlkPSJncmFkLXVjZ2ctZ2VuZXJhdGVkIiBncmFkaWVudFVuaXRzPSJ1c2VyU3BhY2VPblVzZSIgeDE9IjAlIiB5MT0iMCUiIHgyPSIwJSIgeTI9IjEwMCUiPgogICAgPHN0b3Agb2Zmc2V0PSIwJSIgc3RvcC1jb2xvcj0iIzAwMDAwMCIgc3RvcC1vcGFjaXR5PSIwIi8+CiAgICA8c3RvcCBvZmZzZXQ9Ijc1JSIgc3RvcC1jb2xvcj0iIzAwMDAwMCIgc3RvcC1vcGFjaXR5PSIwLjY0Ii8+CiAgICA8c3RvcCBvZmZzZXQ9Ijc2JSIgc3RvcC1jb2xvcj0iIzAwMDAwMCIgc3RvcC1vcGFjaXR5PSIwLjY1Ii8+CiAgPC9saW5lYXJHcmFkaWVudD4KICA8cmVjdCB4PSIwIiB5PSIwIiB3aWR0aD0iMSIgaGVpZ2h0PSIxIiBmaWxsPSJ1cmwoI2dyYWQtdWNnZy1nZW5lcmF0ZWQpIiAvPgo8L3N2Zz4=);
    background: -moz-linear-gradient(top, rgba(0, 0, 0, 0) 0%, rgba(0, 0, 0, 0.64) 75%, rgba(0, 0, 0, 0.65) 76%);
    /* FF3.6+ */
    background: -webkit-gradient(linear, left top, left bottom, color-stop(0%, rgba(0, 0, 0, 0)), color-stop(75%, rgba(0, 0, 0, 0.64)), color-stop(76%, rgba(0, 0, 0, 0.65)));
    /* Chrome,Safari4+ */
    background: -webkit-linear-gradient(top, rgba(0, 0, 0, 0) 0%, rgba(0, 0, 0, 0.64) 75%, rgba(0, 0, 0, 0.65) 76%);
    /* Chrome10+,Safari5.1+ */
    background: -o-linear-gradient(top, rgba(0, 0, 0, 0) 0%, rgba(0, 0, 0, 0.64) 75%, rgba(0, 0, 0, 0.65) 76%);
    /* Opera 11.10+ */
    background: -ms-linear-gradient(top, rgba(0, 0, 0, 0) 0%, rgba(0, 0, 0, 0.64) 75%, rgba(0, 0, 0, 0.65) 76%);
    /* IE10+ */
    background: linear-gradient(to bottom, rgba(0, 0, 0, 0) 0%, rgba(0, 0, 0, 0.64) 75%, rgba(0, 0, 0, 0.65) 76%);
    /* W3C */
    filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#00000000', endColorstr='#a6000000', GradientType=0);
    /* IE6-8 */
}

.fixed-hieght-top-widget,
.fixed-hieght-top-widget-lg {
    overflow-y: scroll;
    overflow-x: hidden;
}

.fixed-hieght-top-widget {
    max-height: 220px;
}

.fixed-hieght-top-widget-lg {
    max-height: 400px;
}

/* Ensure that the demo table scrolls */

th,
td {
    white-space: nowrap;
}

div.dataTables_wrapper {
    width: 100%;
    margin: 0 auto;
}

table.dataTable.no-footer {
    border: none;
}

.DTFC_LeftHeadWrapper {
    background-color: #ffffff;
}

/*---- Dashboard Widgets ----*/

.dahsboard-count-widgets h3 {
    margin: 0;
    font-size: 36px;
    font-weight: 300;
}

.dahsboard-count-widgets h3 small {
    font-weight: 200;
    font-size: 16px;
}

/*---- No Data ----*/

.no-data {
    background-color: #ffffff;
    padding: 20px;
    -webkit-box-shadow: 0 0 2px 0px rgba(0, 0, 0, 0.2);
    -moz-box-shadow: 0 0 2px 0px rgba(0, 0, 0, 0.2);
    box-shadow: 0 0 2px 0px rgba(0, 0, 0, 0.2);
}

.no-data-icon {
    width: 60px;
    height: 60px;
    background-color: #9E9E9E;
    border-radius: 50%;
    color: #ffffff;
    display: inline-block;
    padding-top: 17px;
    text-align: center;
}

.no-data>h3 {
    display: inline-block;
    font-size: 22px;
    font-weight: 200;
    margin-left: 20px;
}

.no-data.warning h3 {
    color: #F44336;
}

.no-data.warning .no-data-icon {
    background-color: #F44336;
}

div#sticker {
    padding: 20px;
    margin: 20px 0;
    background: #AAA;
    width: 190px;
}

.stick {
    position: fixed;
    top: 0px;
    margin-right: 15px;
}

.right-panel-fixed-height {
    max-height: 450px;
    overflow: auto;
}

.student-prfile-class {
    background-color: rgb(33, 150, 243);
    border-radius: 50%;
    text-align: center;
    color: #ffffff;
    font-size: 18px;
    padding: 12px;
    width: 50px;
    height: 50px;
}

.table-scroller {
    max-height: 520px;
    overflow: auto;
}

.md-input-for-md-main-box-header {
    margin: -18px 0 8px;
}

h3.search-result-msg {
    font-size: 15px;
    color: rgb(111, 111, 111);
    font-weight: 400;
}

.stick .tbl-scroller-sm {
    width: 90%;
}

.tbl-scroller-sm {
    width: 100%;
    height: 249px;
    overflow: auto;
}

.tbl-first-col-freezer {
    position: absolute;
    background-color: #ffffff;
    top: 0;
    overflow-y: hidden;
    overflow-x: scroll;
    max-height: 520px;
}

.tbl-first-row-freezer {
    position: absolute;
    background-color: #ffffff;
    left: 16px;
    top: 0;
    overflow: hidden;
}

.tbl-first-row-freezer table {
    margin: 0;
}

.md-tabs-content .md-tab-content {
    min-height: 600px;
}

.tbl-first-row-fixed-row-col {
    position: absolute;
    z-index: 1;
    background-color: #ffffff;
}

.tbl-first-row-fixed-row-col table {
    margin: 0;
}

.clickble-span {
    padding: 4px;
    margin: 4px;
    color: #ffffff;
    font-weight: 300;
    cursor: pointer;
    float: left;
}

.clickble-span.blue {
    background-color: #36C;
}

.clickble-span.green {
    background-color: #33CC5E;
}

.clickble-span.dark-yellow {
    background-color: #CC8433;
}

md-dialog-content.xs-md-dialog {
    min-width: 280px;
    max-width: 380px;
    padding: 10px;
}

/* Error Dialog Styles */
.md-dialog-error .md-dialog-content {
    color: #d32f2f;
    font-weight: 500;
}

.md-dialog-error .md-dialog-title {
    color: #d32f2f;
    font-weight: 600;
}

.md-dialog-error .md-actions .md-button {
    background-color: #d32f2f;
    color: white;
}

.md-dialog-error .md-actions .md-button:hover {
    background-color: #b71c1c;
}

/* Warning Dialog Styles */
.md-dialog-warning .md-dialog-content {
    color: #f57c00;
    font-weight: 500;
}

.md-dialog-warning .md-dialog-title {
    color: #f57c00;
    font-weight: 600;
}

.md-dialog-warning .md-actions .md-button {
    background-color: #f57c00;
    color: white;
}

.md-dialog-warning .md-actions .md-button:hover {
    background-color: #e65100;
}

/* Enhanced Error Dialog Styling */
.md-dialog-error .md-dialog-content,
.md-dialog-warning .md-dialog-content {
    padding: 20px;
    line-height: 1.5;
    font-size: 14px;
}

.md-dialog-error .md-dialog-title,
.md-dialog-warning .md-dialog-title {
    padding: 16px 20px 0 20px;
    font-size: 18px;
    border-bottom: 1px solid #e0e0e0;
    margin-bottom: 16px;
}

/* Share Timetable Dialog Actions Footer - Visual Separation */
.share-timetable-actions {
    padding: 12px 24px;
    border-top: 1px solid #e0e0e0;
    background-color: #fff;
}

.md-dialog-error .md-actions,
.md-dialog-warning .md-actions {
    padding: 16px 20px 20px 20px;
    border-top: 1px solid #e0e0e0;
}

.md-dialog-error .md-actions .md-button,
.md-dialog-warning .md-actions .md-button {
    min-width: 80px;
    text-transform: uppercase;
    font-weight: 500;
    border-radius: 4px;
    transition: all 0.3s ease;
}

.md-dialog-error .md-actions .md-button:hover,
.md-dialog-warning .md-actions .md-button:hover {
    transform: translateY(-1px);
    box-shadow: 0 4px 8px rgba(0,0,0,0.2);
}

/*---- Login Page ----*/

.login-page-back {
    width: 100%;
    height: 100%;
}

.login-top-half,
.login-bottom-half {
    width: 100%;
    height: 50%;
}

.login-top-half,
.small-login {
    background-color: #2196f3;
}

.small-login {
    width: 100%;
    height: 100%;
}

.cs-logo-sm img {
    width: 50%;
}

.smaller-login-h3 {
    color: #ffffff;
    text-align: center;
}

.login-container {
    width: 380px;
    height: 200px;
    margin: 20px auto 0 auto;
    background-color: #ffffff;
    box-shadow: 0 1px 11px rgba(0, 0, 0, 0.27);
}

.login-container.sm-md {
    position: absolute;
    top: 50%;
    left: 50%;
    margin-left: -190px;
    margin-top: -100px;
}

.google-sign-in-btn {
    width: 220px;
    height: 70px;
    margin: auto;
    cursor: pointer;
}

.google-sign-in-btn img {
    height: 100%;
}

.login-container h3 {
    text-align: center;
    font-weight: 400;
    margin-top: 0px;
    padding-top: 20px;
}

.cs-logo {
    margin: auto;
    width: 320px;
    padding-top: 40px;
}

.cs-logo img {
    width: 100%;
}

.warning-login {
    height: 100%;
    margin: auto;
    width: 100%;
    text-align: center;
}

.warning-login img {
    width: 80%;
}

.appInit {
    width: 100%;
    position: absolute;
    top: 0;
    left: 0;
    z-index: 1000;
    width: 100%;
    height: 100%;
    background-color: #ffffff;
}

.appInit h2 {
    text-align: center;
    font-weight: 300;
}

.grade-mark-high-marks {
    width: 100%;
    height: 40px;
    background-color: rgb(2, 161, 2);
    color: #ffffff;
    text-align: center;
    font-size: 22px;
    font-weight: 300;
    line-height: 2;
}

.no-padding-td {
    padding: 0 0 12px 0 !important;
    max-width: 60px;
}

.grade-high-mark-student {
    padding: 6px;
    background-color: #2196F3;
    margin: 4px;
    color: #ffffff;
    font-weight: 300;
    display: inline-block;
    float: left;
}

.grade-mark-high-subject {
    font-weight: 300;
    font-size: 18px;
}

high-mark-sub-th {
    vertical-align: middle !important;
}

md-input-container.tbl-input {
    margin: 0 !important;
    padding: 0;
    overflow: hidden;
}

h3.grade-mark-per-title {
    font-size: 18px;
    font-weight: 400;
    margin: 0 0 8px 0;
}

h4.grade-mark-per-val {
    margin: 0;
    text-align: center;
    font-size: 16px;
    font-weight: 300;
}

.progress.grade-marks-progress {
    margin-bottom: 4px;
}

.teacher-reg-subject-list {
    width: 100%;
    min-height: 500px;
    max-height: 500px;
    overflow: auto;
    background-color: #ECECEC;
}

.teacher-reg-subject-list-footer {
    width: 100%;
    background-color: #ECECEC;
    padding: 0 0 16px 0;
}

.count-down h3 {
    margin: 0 0 38px 0;
    font-size: 25px;
    font-weight: 300;
}

.count-down h3 span {
    color: #098109;
    font-weight: 400;
}

h3.reg-complete-h3 {
    font-size: 22px;
    font-weight: 300;
    text-align: center;
}

h3.reg-complete-email {
    font-size: 22px;
    font-weight: 300;
    text-align: center;
    color: green;
}

.cs-login-error {
    border-radius: 0;
    padding: 4px;
}

.addMargin {
    margin-bottom: 300px;
}

span.select2-hidden-accessible {
    visibility: hidden;
}

.email-available {
    color: green !important;
    font-size: 13px;
}

.email-notavailable {
    color: rgb(244, 67, 54) !important;
    font-size: 13px;
}

/*---- Dashboard notification panel ----*/

.dashboard-notification-list md-list-item {
    background-color: #F7F7F7;
    border-bottom: 1px lightgray dashed;
}

.header-notifications-holder {
    position: absolute;
    top: 45px;
    right: 130px;
    z-index: 1001;
    background-color: #ffffff;
    width: 280px;
    max-height: 280px;
    border: 1px solid #ccc;
    border-radius: 2px;
}

.header-notifications-holder h4 {
    font-size: 14px;
    font-weight: 400;
    margin: 0;
    padding: 10px 10px 10px 10px;
}

ul.header-notification-list {
    margin: 0;
    padding: 0;
    list-style: none;
}

ul.header-notification-list li {
    border-top: 1px solid #EAEAEA;
    padding: 10px 10px;
}

ul.header-notification-list li a {
    color: #585858;
    font-weight: 300;
}

ul.header-notification-list li:hover {
    background-color: #EFEFEF;
}

.notification-count {
    font-size: 9px;
    position: absolute;
    top: 12px;
    left: 7px;
    z-index: 1;
}

/* ---- Angular Text ---- */

.ta-editor {
    min-height: 300px;
    /* edited by shanika*/
    max-height: 300px;
    /* edited by shanika*/
    overflow: auto;
    border-radius: 0;
    margin-top: 10px;
    margin-bottom: 10px;
}

.ta-bind {
    min-height: 100px;
    /* edited by shanika*/
    outline: none;
}

.ta-toolbar {
    background-color: #F1F1F1;
    padding: 8px;
    display: flex;
    flex-wrap: wrap;
    justify-content: flex-start;
}

.ta-toolbar .btn-group button.btn.btn-default {
    padding: 6px;
}

.ta-toolbar .btn-group {
    /* display: flex; */
    margin-bottom: 10px;
}

.daterangepicker td,
.daterangepicker th {
    background: none;
    color: #000000;
}

/*---- Starts MD Auto Complete Template Styles ---- */

.autocomplete-custom-template li {
    border-bottom: 1px solid #ccc;
    height: auto;
    padding-top: 8px;
    padding-bottom: 8px;
    white-space: normal;
}

.autocomplete-custom-template li:last-child {
    border-bottom-width: 0;
}

.autocompletedemoCustomTemplate .autocomplete-custom-template .item-title,
.autocompletedemoCustomTemplate .autocomplete-custom-template .item-metadata {
    display: block;
    line-height: 2;
}

.autocomplete-custom-template .item-title span {
    float: left;
    margin-left: 12px;
}

.autocomplete-custom-template .item-title .item-img {
    width: 40px;
    height: 40px;
    float: left;
    overflow: hidden;
    border-radius: 50%;
}

.autocomplete-custom-template .item-title .item-img img {
    width: 100%;
    vertical-align: inherit;
}

/*---- Ends MD Auto Complete Template Styles ---- */

/*---- Login Modules Card ----*/

.module-card {
    width: 280px;
    box-shadow: 0px 1px 4px rgba(0, 0, 0, 0.3);
    background-color: #ffffff;
    border-radius: 3px;
    overflow: hidden;
    cursor: pointer;
    display: inline-block;
    margin: 0 5px 5px 0;
    transition: All 1s ease;
    -webkit-transition: All 1s ease;
    -moz-transition: All 1s ease;
    -o-transition: All 1s ease;
}

.module-card-holder:hover>.module-card {
    transition: All 1s ease;
    -webkit-transition: All 1s ease;
    -moz-transition: All 1s ease;
    -o-transition: All 1s ease;
    transform: scale(0.9);
    -webkit-transform: scale(0.8);
    -moz-transform: scale(0.8);
    -o-transform: scale(0.8);
    -ms-transform: scale(0.8);
    opacity: 0.6;
}

.module-card-holder:hover>.module-card:hover {
    transform: scale(1.2);
    -webkit-transform: scale(1.2);
    -moz-transform: scale(1.2);
    -o-transform: scale(1.2);
    -ms-transform: scale(1.2);
    z-index: 10000;
    opacity: 1;
}

@media only screen and (max-width: 768px) {
    .module-card-holder:hover>.module-card {
        transform: scale(1);
        -webkit-transform: scale(1);
        -moz-transform: scale(1);
        -o-transform: scale(1);
        -ms-transform: scale(1);
    }

    .module-card-holder:hover>.module-card:hover {
        transform: scale(1);
        -webkit-transform: scale(1);
        -moz-transform: scale(1);
        -o-transform: scale(1);
        -ms-transform: scale(1);
    }
}

.moudle-card-img {
    width: 100%;
    height: 210px;
    position: relative;
}

h4.module-name {
    position: absolute;
    background: rgba(0, 0, 0, 0.6);
    width: 100%;
    padding: 8px;
    bottom: 0;
    margin: 0;
    text-align: center;
    color: #ffffff;
    font-size: 20px;
    font-weight: 300;
    text-transform: uppercase;
}

.header-info-box {
    -moz-box-shadow: 0 2px 10px rgba(0, 0, 0, .2);
    -webkit-box-shadow: 0 2px 10px rgba(0, 0, 0, .2);
    box-shadow: 0 2px 10px rgba(0, 0, 0, .2);
    border: 1px solid #ccc;
    top: 48px;
    border-radius: 2px !important
}

.user-profile-drop {
    padding: 7px 10px !important;
}

.notifications-menu>a {
    font-size: 16px;
}

.module-section-user-info-card {
    width: 570px;
    min-height: 224px;
    background-color: #ffffff;
    border-radius: 3px;
    box-shadow: 0px 1px 3px rgba(0, 0, 0, 0.3);
    margin: 0 auto 14px auto;
    overflow: hidden;
}

.user-info-card-logo {
    width: 100%;
    height: 150px;
    background-color: #0D74C1;
    text-align: center;
    padding-top: 15px;
}

.navbar-nav>.user-menu .user-image {
    width: 35px;
    height: 35px;
    margin: 0;
}

.user-info-card-logo img {
    width: 300px;
    height: 120px;
}

.user-info-card-user-info {
    position: relative;
    width: 100%;
    min-height: 74px;
}

.user-info-card-user-info img {
    width: 80px;
    height: 80px;
    border-radius: 50%;
    position: absolute;
    left: 10px;
    top: -40px;
    border: 4px solid #ffffff;
}

.user-info-card-user-info h2 {
    position: absolute;
    top: 7px;
    margin: 0;
    width: 100%;
    font-weight: 400;
    padding-left: 102px;
    font-size: 21px;
    text-align: left;
}

@media only screen and (max-width: 768px) {
    .module-section-user-info-card {
        width: 100%;
    }

    .user-info-card-user-info h2 {
        width: 99%;
        text-overflow: ellipsis;
        overflow: hidden;
        white-space: nowrap;
    }

    .user-info-card-user-info img {
        top: -16px;
    }
}

.tooltip-with-img .md-content {
    text-align: left;
    height: 68px;
    padding: 8px;
}

.tooltip-with-img .md-content span {
    font-size: 12px;
    line-height: 4;
    margin-left: 6px;
}

.tooltip-with-img .md-content img {
    width: 50px;
    height: 50px;
    border-radius: 50%;
    float: left;
}

/*---- Module Selection New ----*/
.cs-module-selction {
    max-width: 570px;
    margin: auto;
    -moz-box-shadow: 0px 1px 5px rgba(0, 0, 0, 0.2), 0px -1px 5px rgba(0, 0, 0, 0.2);
    -webkit-box-shadow: 0px 1px 5px rgba(0, 0, 0, 0.2), 0px -1px 5px rgba(0, 0, 0, 0.2);
    box-shadow: 0px 1px 5px rgba(0, 0, 0, 0.2), 0px -1px 5px rgba(0, 0, 0, 0.2);
    padding: 14px;
    display: flex;
    flex-direction: row;
    justify-content: start;
    flex-wrap: wrap;
    border-radius: 4px;
}

.cs-ms-module {
    width: 94px;
    margin: 14px 20px;
    cursor: pointer;
    transition: All 0.5s ease;
    -webkit-transition: All 0.5s ease;
    -moz-transition: All 0.5s ease;
    -o-transition: All 0.5s ease;
}

.cs-ms-module a {
    color: #4c4c4c;
    text-decoration: none;
}

.cs-ms-module:hover {
    -webkit-transform: scale(1.1);
    -moz-transform: scale(1.1);
    -o-transform: scale(1.1);
    -ms-transform: scale(1.1);
}

.cs-ms-module p {
    font-size: 13px;
    font-weight: 300;
    margin: 6px 0 0 0;
}

.module-switch-modules-holder {
    padding: 10px;
    display: flex;
    flex-direction: row;
    flex-wrap: wrap;
    justify-content: flex-start;
}

.msmh-modules {
    width: 64px;
    text-align: center;
    margin: 11px 11px;
}

.msmh-modules a {
    text-decoration: none;
    color: #636363;
    font-size: 13px;
}

.msmh-modules img {
    width: 64px;
}

.msmh-modules p {
    margin: 6px 0;
}

/*---- Ends Module Selection New ----*/

/*---- Material Design Data Table ----*/

md-toolbar.md-table-toolbar {
    height: 64px;
}

md-toolbar.md-table-toolbar.alternate {
    background-color: #e3f2fd;
    color: #2196F3;
}

md-toolbar.md-table-toolbar .md-toolbar-tools>span {
    font-size: 20px;
    font-family: roboto;
    font-weight: 500;
    color: rgba(0, 0, 0, 0.8);
}

md-table-pagination.md-table-pagination span,
md-select.md-table-select>.md-select-value>span {
    color: rgba(0, 0, 0, 0.54);
    font-size: 13px;
    font-family: roboto;
}

table.md-table th.md-column>* {
    font-size: 14px;
    font-weight: 600;
    font-family: roboto;
    color: rgba(0, 0, 0, 0.54);
}

th.md-column.ng-isolate-scope.md-sort {
    padding: 0 24px 0 16px;
}

table.md-table th.md-column>* {
    font-size: 14px;
    font-weight: 600;
    font-family: roboto;
    color: rgba(0, 0, 0, 0.54);
}

.md-table td,
.md-table th {
    padding: 10px 10px 10px 16px;
}

.md-select-value .md-select-icon:after {
    color: rgba(0, 0, 0, 0.87) !important;
}

md-select.md-table-select>.md-select-value>span {
    color: rgba(0, 0, 0, 0.87);
    font-family: roboto;
    font-size: 14px;
    font-weight: 500;
}

table.md-table td.md-cell {
    color: rgba(0, 0, 0, 0.87) !important;
    font-size: 14px !important;
    font-family: roboto;
    font-weight: 500;
}

table.md-table th.md-column.md-active>span {
    color: rgba(0, 0, 0, 0.87);
}

/*---- Class Marks Table ----*/

.class-mark-tbl td,
.class-mark-tbl th {
    border: 1px solid gray !important;
    font-family: roboto;
    text-transform: uppercase;
    font-weight: 500;
}

.class-mark-tbl tr:first-child th {
    text-align: center;
    font-weight: 600;
}

.break-wrods {
    white-space: pre-line;
    vertical-align: middle !important;
    text-align: center !important;
}

.cls-mrk-stu-img {
    width: 30px;
    height: 30px;
    border-radius: 50%;
    float: left;
    margin-right: 7px;
}

h4.cls-mrk-tbl-student-name {
    margin: 0;
    font-size: 13px;
    width: 154px;
    overflow: hidden;
    text-overflow: ellipsis;
    float: left;
    /* padding-top: 10px; */
    padding-top: 2px;
}

.class-mark-tbl-holder {
    width: 100%;
    min-height: 300px;
    max-height: 600px;
    position: relative;
}

.class-mark-tbl-left-column-freezer {
    min-width: 208px;
    max-width: 208px;
    overflow: hidden;
    position: absolute;
    background: #ffffff;
    min-height: 40px;
    max-height: 583px;
    z-index: 1;
}

.class-mark-tbl-holder-helper {
    width: 100%;
    min-height: 300px;
    max-height: 600px;
    overflow: auto;
}

.class-mark-tbl th {
    padding: 5px !important;
}

.class-mark-tbl tr:first-child {
    background-color: #ffffff !important;
}

.class-mark-tbl tr:nth-child(odd) {
    background-color: #EAEAEA;
}

.cls-mrk-tbl-th-container {
    width: 196px;
}

.white-tabs md-tab-item.md-tab.md-active {
    color: #404040;
}

.white-tabs md-tab-item.md-tab {
    color: #A7A7A7;
}

.white-tabs md-tabs-wrapper {
    background-color: #ffffff;
    border: 1px solid #e1e1e1;
}

.white-tabs md-content {
    background-color: #F9F9F9;
}

span.subject-not-marked {
    color: #757575;
}

span.subject-low-marks {
    color: #F90303;
}

span.subject-top-marks {
    color: #038603;
}

.class-top-scores.ng-scope {
    width: 100%;
    height: 45px;
}

.class-top-scores img {
    width: 40px;
    height: 40px;
    border-radius: 50%;
    float: left;
}

.class-top-scores h4 {
    float: left;
    font-size: 14px;
    margin-left: 4px;
}

.class-top-scores h5 {
    float: right;
    background-color: #2196F3;
    border-radius: 50%;
    width: 40px;
    height: 40px;
    margin: 0;
    text-align: center;
    line-height: 2.8;
    color: #ffffff;
}

.student-ranks .widget-user-username,
.student-ranks .widget-user-desc {
    width: 70%;
    text-overflow: ellipsis;
    overflow: hidden;
    white-space: nowrap;
}

.student-ranks .widget-user-username a,
.student-ranks .widget-user-desc a {
    color: #ffffff;
}

h5.tbl-name-elipse {
    margin: 0;
    width: 136px;
    overflow: hidden;
    text-overflow: ellipsis;
}

h5.tbl-th-h5 {
    margin: 0;
    min-width: 110px;
    max-width: 115px;
    overflow: hidden;
    text-overflow: ellipsis;
}

/* App Progress */

.app-progress {
    padding-top: 66px;
    width: 100%;
    margin: auto;
    padding-left: 102px;
    padding-right: 17px;
    margin-bottom: 2px;
}

.app-progress .progress-bar {
    background-color: #0D74C1;
}

.progress {
    height: 20px;
}

p.percent {
    text-align: right;
}

.app-init.alert {
    width: 95%;
    margin: auto;
    text-align: center;
    margin-bottom: 12px;
}

.reload-services {
    padding-left: 100px;
    padding-right: 15px;
    margin-bottom: 15px;
}

/*---- MD Card Styles ----*/

md-card md-card-title md-card-title-text {
    -webkit-flex: 1;
    -ms-flex: 1;
    flex: 1;
    -webkit-flex-direction: column;
    -ms-flex-direction: column;
    flex-direction: column;
    display: -webkit-flex;
    display: -ms-flexbox;
    display: flex
}

md-card md-card-title {
    padding: 24px 16px 16px;
    display: -webkit-flex;
    display: -ms-flexbox;
    display: flex;
    -webkit-flex: 1 1 auto;
    -ms-flex: 1 1 auto;
    flex: 1 1 auto;
    -webkit-flex-direction: row;
    -ms-flex-direction: row;
    flex-direction: row
}

md-card md-card-title md-card-title-media .md-media-lg {
    height: 152px;
    width: 152px
}

md-card .md-actions,
md-card md-card-actions {
    margin: 8px
}

md-card md-card-title md-card-title-media {
    margin-top: -8px
}

md-card md-card-title md-card-title-media .md-media-lg {
    height: 152px;
    width: 152px
}

md-card md-card-title md-card-title-text .md-subhead {
    padding-top: 0;
    font-size: 14px
}

/*---- Grade Scale Info Section ----*/

.grade-scale-info-section {
    padding: 8px 12px;
    background-color: #e3f2fd;
    border-radius: 4px;
    border-left: 4px solid #2196F3;
    margin-bottom: 16px;
}

.grade-scale-info-message {
    display: inline-block;
    font-size: 13px;
    color: #1976d2;
    vertical-align: middle;
}

.grade-scale-info-message i {
    margin-right: 6px;
    font-size: 16px;
}

.grade-scale-view-link {
    display: inline-block;
    margin-left: 12px;
    color: #1976d2;
    font-size: 13px;
    font-weight: 500;
    text-decoration: none;
    cursor: pointer;
    transition: color 0.3s ease;
}

.grade-scale-view-link:hover {
    color: #0d47a1;
    text-decoration: underline;
}

.grade-scale-dialog {
    min-width: 500px;
    max-width: 600px;
}

.grade-scale-dialog .md-dialog-content {
    padding: 20px;
}

.grade-scale-dialog-title {
    font-size: 20px;
    font-weight: 500;
    color: #1976d2;
    margin-bottom: 16px;
    padding-bottom: 12px;
    border-bottom: 2px solid #e3f2fd;
}

.grade-scale-table {
    width: 100%;
    border-collapse: collapse;
    margin-top: 12px;
}

.grade-scale-table th,
.grade-scale-table td {
    padding: 12px;
    text-align: left;
    border-bottom: 1px solid #e0e0e0;
}

.grade-scale-table th {
    background-color: #f5f5f5;
    font-weight: 600;
    color: #424242;
    text-transform: uppercase;
    font-size: 12px;
}

.grade-scale-table td {
    font-size: 14px;
    color: #616161;
}

.grade-scale-table tr:last-child td {
    border-bottom: none;
}

.grade-scale-table tr:hover {
    background-color: #fafafa;
}

.grade-scale-grade-column {
    font-weight: 600;
    color: #1976d2;
    font-size: 16px;
}

.grade-scale-no-data {
    padding: 20px;
    text-align: center;
    color: #757575;
    font-style: italic;
}

/*---- Timeline Styles ----*/

timeline-panel {
    padding: 0 !important;
}

.timeline-heading h4 {
    padding: 20px;
    font-size: 20px;
    color: #6B6B6B;
    font-weight: 400;
    margin-top: 0;
}

.timeline-text-body {
    padding: 0 20px;
    color: #565656;
    font-weight: 300;
    margin-bottom: 20px;
}

img.timline-image {
    width: 100%;
    margin-bottom: 20px;
}

.timeline-readmore-btn {
    margin-right: 20px;
    margin-bottom: 20px;
}

.timeline-heading h4 span {
    float: right;
    font-size: 14px;
    padding-top: 12px;
}

.timeline-full-post,
.archive-list-holder {
    background-color: #ffffff;
    -webkit-box-shadow: 1px 0 4px 1px rgba(0, 0, 0, 0.2);
    box-shadow: 1px 0 4px 1px rgba(0, 0, 0, 0.2);
    padding-bottom: 20px;
}

.post-attachements {
    padding: 0 20px;
}

.post-attachements h5 {
    font-size: 16px;
    font-weight: 400;
}

ul.post-attachments-download {
    list-style: none;
    padding: 0;
}

ul.post-attachments-download li {
    display: inline-block;
}

ul.post-attachments-download li a {
    padding: 0 16px 0 0;
}

.archive-list-holder {
    padding: 20px;
}

ul.archive-list {
    padding: 0;
    list-style: none;
}

.archive-list li {
    cursor: pointer;
}

.archive-list li h3 {
    margin: 0;
    font-size: 16px;
    font-weight: 400;
    color: #2196F3;
}

.archive-list li h3 small {
    font-size: 13px;
}

.archive-list li p {
    font-size: 13px;
    color: #757575;
}

/*----*/

ul.post-gallery {
    margin: 0;
    padding: 0;
    list-style: none;
}

ul.post-gallery li {
    display: block;
    width: 30%;
    height: auto;
    overflow: hidden;
    float: left;
    margin-right: 8px;
}

ul.post-gallery li img {
    width: 100% !important;
    height: 100% !important;
    vertical-align: top;
}

ul.post-gallery li video {
    width: 100% !important;
}

.fb-container {
    position: relative;
}

.md-fab.top-right {
    position: absolute;
    top: -30px;
    right: 27px;
}

.cs-timeline:before {
    left: 34px !important;
}

span.time.clickble-icon-btn {
    cursor: pointer;
    color: #dd4b39 !important;
    padding-top: 22px;
}

/*---- Student Attendance ----*/

.student-attendance {
    width: 100%;
    overflow: hidden;
    text-align: center;
    cursor: pointer;
    margin-bottom: 30px;
    border-radius: 2px;
    background-color: #fff;
    box-shadow: 0 0px 5px rgba(0, 0, 0, 0.4);
}

.student-attendance img {
    width: 100%;
    ;
}

.student-attendance h3 {
    margin: 10px auto;
    width: 100%;
    text-align: center;
    color: #000000;
    font-size: 14px;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: pre;
    padding: 0 8px;
}

.studentPresent {
    border: 2px solid #008eff;
}

.studentPresent::before {
    content: "\f00c";
    width: 24px;
    height: 24px;
    background-color: #2196f3;
    position: absolute;
    right: 15px;
    font-family: FontAwesome;
    line-height: 1.8;
    color: #ffffff;
}

.studentAbsent {
    border: 2px solid #dd4b39;
}

.studentAbsent::before {
    content: "X";
    width: 24px;
    height: 24px;
    background-color: #dd4b39;
    position: absolute;
    right: 15px;
    font-family: FontAwesome;
    line-height: 1.8;
    color: #ffffff;
}

.studentNotApplicable {
    border: 2px solid #d9d9d9;
}

.studentNotApplicable::before {
    content: "N/A";
    width: 33px;
    height: 24px;
    background-color: #d9d9d9;
    position: absolute;
    right: 15px;
    font-family: FontAwesome;
    line-height: 1.8;
    color: #ffffff;
}

/*----m Assesments Feed ----*/

.assesment-time {
    color: #999;
    float: right;
    padding: 10px;
    font-size: 12px;
    line-height: 3;
}

@media only screen and (max-width: 700px) {
    .assesment-time {
        padding: 0;
        float: left;
        line-height: 1;
    }
}

.pending-assesment,
.submited-assesment,
.late-assesment,
.marked-assesment,
.finalized-assesment {
    overflow: hidden;
}

.pending-assesment::after,
.submited-assesment::after,
.late-assesment::after,
.marked-assesment::after,
.finalized-assesment::after {
    position: absolute;
    top: -8px;
    right: -28px;
    width: 88px;
    height: 47px;
    color: #ffffff;
    transform: rotate(45deg);
    line-height: 5.5;
    text-align: center;
    font-size: 12px;
}

.box.pending-assesment {
    border-top-color: #27ae60;
}

.box.late-assesment {
    border-top-color: #c0392b;
}

.box.submited-assesment {
    border-top-color: #2980b9;
}

.box.marked-assesment {
    border-top-color: #3498db;
}

.box.finalized-assesment {
    border-top-color: #8e44ad;
}

.box.pending-assesment::after {
    content: "Pending";
    background-color: #27ae60;
}

.box.late-assesment::after {
    content: "Late";
    background-color: #c0392b;
}

.box.submited-assesment::after {
    content: "Submited";
    background-color: #2980b9;
}

.box.marked-assesment::after {
    content: "Marked";
    background-color: #3498db;
}

.box.finalized-assesment::after {
    content: "Finilized";
    background-color: #8e44ad;
}

.callout.pending-assesment {
    background-color: #27ae60;
    color: #ffffff;
    border-color: #187e43;
}

.callout.late-assesment {
    background-color: #c0392b;
    color: #ffffff;
    border-color: #8a271d;
}

.callout.submited-assesment {
    background-color: #2980b9;
    color: #ffffff;
    border-color: #1b5a84;
}

.callout.marked-assesment {
    background-color: #3498db;
    color: #ffffff;
    border-color: #226998;
}

.callout.finalized-assesment {
    background-color: #8e44ad;
    color: #ffffff;
    border-color: #622979;
}

.submited-assesment-form:before {
    content: "\f058 Submited. Pending For Review.";
    position: absolute;
    width: 100%;
    height: 100%;
    background-color: rgba(128, 128, 128, 0.72);
    z-index: 12;
    border: 1px dashed #00a65a;
    padding: 4px;
    color: #ffffff;
    text-align: center;
    font-size: 28px;
    line-height: 14;
    font-family: FontAwesome;
}

.box.closed .box-body,
.box.closed .box-footer {
    display: none;
}

.box-tools.marked-assesment-students .input-group {
    width: 170px;
    margin-right: 20px;
    margin-top: 8px;
}

.box-tools.marked-assesment-students .btn.btn-box-tool {
    margin-top: 13px;
}

.box-header md-checkbox {
    float: left;
    margin: 11px 0;
}

h4.assignment-sbmt-h4 {
    margin: 0;
    padding: 0;
    font-size: 16px;
    font-weight: 400;
    border-bottom: 1px dashed darkgrey;
    padding-bottom: 4px;
}

.col-divider-border-right {
    border-right: 1px dashed darkgrey;
}

.col-divider-border-left {
    border-left: 1px dotted darkgrey;
}

ul.techerlst-multisession {
    margin: 0;
    padding: 0;
    list-style: none;
}

.techerlst-multisession li {
    display: inline-block;
}

.progress-bar.attended-color {
    background-color: #2196f3;
}

.progress-bar.absent-color {
    background-color: #dd4b39;
}

.progress {
    background-color: #e4e4e4;
}

.chart-tooltip {
    padding: 8px;
    width: 110px;
    text-align: center;
}

.chart-tooltip h4 {
    font-size: 16px;
    margin: 0;
}

h5.assesment-title {
    font-size: 16px;
}

.assmnt-done-count {
    font-size: 40px;
    color: green;
    border-left: 1px solid #c4c4c4;
    padding-left: 10px;
    line-height: 1;
    float: right;
    margin-right: 16px;
}

@media only screen and (max-width: 700px) {
    .assmnt-done-count {
        float: left;
        padding-left: 0;
    }

    md-tabs-canvas {
        z-index: 1;
    }
}

.assmnt-done-count small {
    font-size: 12px;
}

.comment-holder {
    display: none;
}

.asmnt-status-done {
    color: #008000;
}

.asmnt-status-done i {
    background-color: #008000;
}

.asmnt-status-late {
    color: red;
}

.asmnt-status-late i {
    background-color: red;
}

.asmnt-status-finalized {
    color: #f1cb00;
}

.asmnt-status-finalized i {
    background-color: #f1cb00;
}


.asmnt-status-disabled {
    color: gray;
}
.asmnt-status-disabled i {
    background-color: gray;
}

.asmnt-status-upcoming {
    color: gray;
}

.asmnt-status-upcoming i {
    background-color: gray;
}

.asmnt-status-pending {
    color: purple;
}

.asmnt-status-pending i {
    background-color: purple;
}

.asmnt-status-resubmit {
    color: #f65d04;
}

.asmnt-status-resubmit i {
    background-color: #f65d04;
}

.asmnt-status-draft {
    color: #2196f3;
}

.asmnt-status-draft i {
    background-color: #2196f3;
}

.asmnt-status-done i,
.asmnt-status-late i,
.asmnt-status-finalized i,
.asmnt-status-disabled i,
.asmnt-status-pending i,
.asmnt-status-upcoming i,
.asmnt-status-resubmit i,
.asmnt-status-draft i {
    border-radius: 50%;
    color: #ffffff;
    padding: 8px;
    width: 28px;
    height: 28px;
    text-align: center;
}

.drafts-assmnts-holder {
    padding: 8px 12px;
    background-color: rgba(9, 146, 32, 0.12);
    margin-bottom: 14px;
    box-shadow: 0 1px 6px rgba(0, 0, 0, 0.32) !important;
}

.drafts-assmnts-holder h4 {
    margin: 0;
    padding: 12px 0 12px 0;
    color: #08a008;
}

ul.draft-assmnts {
    margin: 0;
    padding: 0;
    list-style: none;
    display: none;
}

.draft-assmnts li {
    background-color: #ffffff;
    padding: 6px;
    border-top: 1px solid #e8e8e8;
}

.draft-assmnts li h5 {
    margin: 0;
    float: left;
    font-size: 15px;
    font-weight: 400;
}

ul.todays-lecture-list {
    margin: 20px 0;
    padding: 0;
    list-style: none;
}

.tll-title h4 {
    font-size: 16px;
    font-weight: 400;
}

li.tll-sessions {
    border-top: 1px solid #bdbdbd;
    padding: 8px 0;
    margin-left: 30px;
}

.tll-sessions h4 {
    margin: 0;
    font-size: 14px;
    font-weight: 400;
}

.assmnt-inner-msg {
    padding: 8px 4px 3px 4px;
    border: 1px dashed green;
    border-radius: 4px;
    background-color: rgba(0, 128, 0, 0.09);
}

.assmnt-inner-msg i {
    background: green;
    border-radius: 50%;
    padding: 10px;
    font-size: 24px;
    color: #ffffff;
    float: left;
    margin-right: 10px;
}

.assmnt-inner-msg h5 {
    font-size: 18px;
    font-weight: 400;
}

.assmnt-inner-msg .md-button {
    margin-left: 54px;
    margin-bottom: 6px;
}

.box-comment.reply-comment,
.comment-reply {
    margin-left: 40px;
    margin-top: 6px;
}

.box-comment.reply-comment:first-child {
    border-top: 1px solid #eee;
}

.more-shadow-1 {
    box-shadow: 0 1px 16px rgba(0, 0, 0, 0.32) !important;
}

.header-title {
    font-weight: 300;
    /*color: #e3f2fd;*/
    /* changed by shanika */
    color: #ffffff;
    margin: 0;
    font-size: 25px;
    margin-top: 12px;
    margin-left: 12px;
    display: inline-block;
    text-overflow: ellipsis;
    overflow: hidden;
    width: calc(100% - 525px);
    white-space: nowrap;
}

@media screen and (max-width: 768px) {
    .header-title {
        width: 80% !important;
    }

    .back-btn {
        /* z-index: 100 !important;  */
        z-index: 23 !important;
        /*changed by shanika*/
        top: 53px !important;
    }
}

.asmnt-score {
    width: 100px;
    height: 100px;
    border-radius: 50%;
    background-color: #0b9d09;
    text-align: center;
    margin: 10px auto 20px auto;
    padding-top: 20px;
    color: #fff;
    position: relative;
}

.asmnt-score h4 {
    /*font-size: 37px;changed by shanika for CC-1623*/
    font-size: 30px;
    font-weight: 300;
    margin: 0;
}

.float-in-mail-box {
    right: 25px;
    bottom: -25px;
    position: absolute;
}

.chart-more-data {
    display: none;
    max-height: 160px;
    overflow: auto;
    position: absolute;
    width: 100%;
    box-shadow: 0 -2px 4px rgba(1, 0, 0, 0.32) !important;
    z-index: 1;
    bottom: 50px;
}

.asmnt-score .assesment-time {
    position: absolute;
    right: -50px;
}

.asmnt-score .assesment-time i {
    border: 2px solid #0b9d09;
    padding: 7px;
}

.back-btn {
    position: absolute;
    z-index: 1;
    top: 57px;
    left: 9px;
    color: #ffffff !important
}

.box-comments.reply-input {
    padding-left: 40px;
}

.box-comments.reply-input img {
    margin-right: 12px;
}

.box-loaders-bottom {
    bottom: -1px;
    position: absolute;
    left: 0;
}

.mailbox-attachment-info {
    box-shadow: 0px 0px 9px rgba(0, 0, 0, 0.2);
    position: relative;
}

.mailbox-attachment-info:hover:before {
    content: "\f019";
    position: absolute;
    width: 100%;
    height: 100%;
    background-color: #f4f4f4;
    left: 0;
    top: 0;
    font-family: FontAwesome;
    text-align: center;
    line-height: 2.4;
    font-size: 17px;
}

.md-tbl {
    background-color: #fff;
    box-shadow: 0 1px 3px 0 rgba(0, 0, 0, .2), 0 1px 1px 0 rgba(0, 0, 0, .14), 0 2px 1px -1px rgba(0, 0, 0, .12);
}

.md-tbl-header,
.md-tbl-header-status {
    padding-left: 24px;
    padding-right: 14px;
    height: 68px;
}

.md-tbl-header-status {
    background-color: #e3edfd;
    color: #0D47A1;
}

.md-tbl .table tr td:first-child,
.md-tbl .table tr th:first-child {
    padding-left: 24px;
}

.md-tbl .table tr td:last-child,
.md-tbl .table tr th:last-child {
    padding-right: 14px;
}

.md-tbl .table tr td,
.md-tbl .table tr th {
    height: 48px;
    padding-top: 15px;
}

.md-tbl-header h4,
.md-tbl-header-status h4 {
    font-size: 15px;
    font-weight: 400;
    display: inline-block;
    padding-top: 18px;
}

.md-tbl .table tr:first-child th {
    border-top: none;
}

.md-tbl-holder {
    width: 100%;
    height: 100%;
    overflow: auto;
    max-height: 480px;
}

.tbl-right-side-drop-menu span.action-btn {
    padding: 25px 15px;
    float: right;
    font-size: 18px;
    outline: none;
    cursor: pointer;
}

.md-tbl-header-status .md-icon-button {
    float: right;
    margin-top: 15px;
    font-size: 18px;
    margin-left: 0;
    margin-right: 0;
    width: 36px;
    height: 30px;
}

.md-mailbox-header>button.md-fab {
    position: absolute;
    bottom: -25px;
    right: 25px;
}

.md-mailbox-header>md-fab-speed-dial {
    position: absolute;
    bottom: -25px;
    right: 25px;
}

md-tooltip {
    z-index: 100000;
}

md-fab-actions>.md-fab-action-item {
    margin: 0 5px;
}

.header-loader {
    position: absolute;
    top: 50px;
    z-index: 10;
    left: 0;
}

.header-loader-tabs {
    position: absolute;
    top: 96px;
    z-index: 20;
    left: 0;
}

@media only screen and (max-width: 700px) {
    .header-loader-tabs {
        top: 144px;
    }
}

/*---- Add Notice ----*/

#addNoticeContainer {
    width: 100%;
    min-height: 200px;
    padding: 10px 0;
}

h4.section-title {
    margin: 8px 0;
    font-weight: 400;
}

.cover-img-uploader {
    width: 100%;
    height: 200px;
    border: 1px dashed #2196f3;
    border-radius: 4px;
    position: relative;
}

md-prev-button md-icon,
md-next-button md-icon {
    color: rgb(255, 255, 255);
}

.cover-img-uploader:before {
    content: "";
    background-image: url(http://www.clker.com/cliparts/c/W/h/n/P/W/generic-image-file-icon-hi.png);
    position: absolute;
    width: 60px;
    height: 64px;
    background-size: 100%;
    background-repeat: no-repeat;
    left: 50%;
    top: 50%;
    margin-left: -30px;
    margin-top: -32px;
    opacity: 0.6;
}

.cover-img-uploader button {
    position: absolute;
    right: 8px;
    bottom: 8px;
}

.al-head {
    background-color: #0D47A1;
    color: #ffffff;
    text-align: right;
}

.attachments-list {
    width: 100%;
    border: 1px solid #2196f3;
    border-radius: 4px;
    background: #ffffff;
    max-height: 260px;
    overflow: auto;
}

.attachments-list .table td {
    line-height: 2.4;
}

.al-select-all-tick {
    padding: 7px 8px;
}

.ln-img {
    width: 250px;
    height: 250px;
    background-position: center center;
    float: left;
    margin-right: 14px;
}

.ln-cont {
    padding: 14px;
}

.ln-cont h4 {
    margin: 0 0 6px 0;
    font-weight: 400;
}

#latest-news {
    position: relative;
}

#latest-news button {
    position: absolute;
    bottom: 8px;
    right: 8px;
}

.mn-img {
    width: 130px;
    height: 150px;
    background-position: center center;
    background-size: 100%;
    float: left;
    margin-right: 8px;
}

.mn-cont {
    padding: 8px;
}

.mn-cont h4 {
    margin: 0 0 8px 0;
    width: calc(100% - 130px);
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.more-news {
    position: relative;
    margin: 12px 0;
}

.more-news button {
    position: absolute;
    right: 8px;
    bottom: 8px;
}

.notice-box {
    padding: 8px;
    border-bottom: 1px solid #cecece;
}

.notice-box h4 {
    margin: 4px 0;
}

#single-notice {
    padding: 20px 30px;
}

#single-notice h4 {
    font-size: 20px;
    font-weight: 400;
    margin: 4px 0;
}

#single-notice p img {
    width: 100%;
}

.sn-img {
    margin-top: 20px;
    margin-bottom: 20px;
    width: 100%;
    overflow: hidden;
    height: 450px;
    background-size: 100%;
    background-position: center center;
}

ul.download-attachments {
    margin: 0;
    padding: 0;
    list-style: none;
}

.download-attachments li {
    display: inline-block;
    width: 100px;
    height: 100px;
    border: 1px solid #b5b5b5;
    border-radius: 2px;
    position: relative;
    text-align: center;
    cursor: pointer;
}

.download-attachments li:before {
    content: "\f019";
    font-family: FontAwesome;
    font-size: 40px;
    line-height: 2.2;
    color: #636363;
}

.download-attachments li h6 {
    position: absolute;
    padding: 4px;
    margin: 0;
    text-align: center;
    width: 100%;
    bottom: 0px;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

ul.upload-media-list {
    margin: 0;
    padding: 0;
    list-style: none;
    background-color: #efefef;
    padding: 10px;
    border: 1px dashed #b1b1b1;
    border-radius: 4px;
}

.upload-media-list li {
    display: inline-block;
    width: 142px;
    height: 110px;
    margin-right: 4px;
    overflow: hidden;
    background-size: cover;
    background-repeat: no-repeat;
    background-position: center center;
    position: relative;
}

.upload-media-list li video {
    width: 100%;
}

.upload-media-title {
    background: rgba(0, 0, 0, 0.8);
    color: #ffffff;
    font-size: 13px;
    padding: 4px;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    position: absolute;
    bottom: 0;
    width: 100%;
}

.upload-media-list li button {
    position: absolute;
    top: 4px;
    right: 4px;
}

.post-preview h4 {
    font-size: 18px;
    font-weight: 400;
    margin: 6px 0;
}

.post-preview p {
    font-size: 14px;
    margin-top: 8px;
    margin-bottom: 20px;
}

.post-preview img {
    width: 100%;
}

.post-img {
    width: 100%;
    overflow: initial;
    height: 200px;
    background-size: 100%;
    background-position: center center;
    background-repeat: no-repeat;
}

.post-title {
    margin-bottom: 0;
    white-space: nowrap;
    text-overflow: ellipsis;
    overflow: hidden;
}

p.post-text-short {
    height: 120px;
}

p.post-text-short-notice {
    height: 40px;
}

h4.news-page-h4 {
    font-size: 22px;
    margin: 0 0 14px 0;
    font-weight: 300;
    border-bottom: 1px dashed gray;
    padding: 0 0 4px 0;
}

/*---- Dashboard Widgets ----*/

.notice-widget-news-item {
    width: 100%;
    height: 83px;
    padding: 8px;
    border-bottom: 1px solid lightgray;
    cursor: pointer;
}

.nwni-img {
    width: 100px;
    height: 68px;
    background-size: 100%;
    background-position: center center;
    background-repeat: no-repeat;
    float: left;
    margin-right: 8px;
}

h4.nwni-title {
    margin: 0;
    font-size: 14px;
    font-weight: 400;
    width: calc(100% - 110px);
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    color: #2196f3;
}

p.nwni-text {
    font-size: 13px;
    font-weight: 300;
    margin: 3px 0 0 0;
}

span.count-news-notices.ng-scope {
    background-color: #f44336;
    padding: 0;
    border-radius: 50%;
    text-align: center;
    position: absolute;
    font-size: 10px;
    width: 19px;
    height: 21px;
    top: 4px;
}

.widget-news-section {
    width: calc(100% - 300px);
    float: left;
    background: #fff;
}

.widget-notification-section {
    width: 300px;
    float: left;
    background-color: #fff;
    height: 359px;
    border-left: 1px solid #dadada;
    border-bottom: 1px solid #dadada;
}

.wns-title {
    font-size: 14px;
    padding: 10px 20px;
    margin: 0;
    color: #888888;
    background: #e8eaf6;
}

.nw-content {
    min-height: 359px;
    max-height: 463px;
}

.nw-footer,
.calendar-widget-footer {
    width: 100%;
    height: 50px;
    padding: 10px;
    background: #fff;
}

/*---- Calendar View New ----*/

#calendar-holder {
    width: 100%;
    height: calc(100vh - 51px);
    position: relative;
}

#calendar-holder.with-md-header {
    margin-top: 1px;
    height: calc(100vh - 132px);
}

#calendar-left-sidebar {
    width: 224px;
    height: 100%;
    position: absolute;
    left: 0;
    top: 0;
    border-right: 1px solid lightgray;
    background-color: #f5f5f5;
    overflow: auto;
}

.dl-items-holder {
    padding: 10px;
}

#calendar-middle-content {
    width: calc(100% - 225px);
    height: 100%;
    padding-left: 225px;
    background-color: #ffffff;
    overflow: auto;
}

#calendar-right-sidebar {
    width: 224px;
    height: 100%;
    position: absolute;
    right: 0;
    top: 0;
    background-color: #f5f5f5;
    border-left: 1px solid lightgray;
    overflow: auto;
}

ul.calendar-types {
    margin: 0;
    padding: 0;
    list-style: none;
}

li.ct-head {
    padding: 5px 0;
    font-size: 14px;
    overflow: hidden;
    cursor: pointer;
}

.mddrop-menu-btn {
    padding: 0px 8px;
    cursor: pointer;
    outline: none;
}

ul.ct-calenders {
    margin: 0;
    padding: 6px 0 0 10px;
    list-style: none;
    outline: none;
}

li.calender-items {
    padding: 2px 0;
    position: relative;
    outline: none;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    padding-right: 25px;
}

.ct-small-btn {
    width: 18px;
    height: 17px;
    position: absolute;
    right: 0;
    top: 0;
    font-size: 12px;
    color: #4e4e4e;
    outline: none;
}

li.calender-items i.fa {
    margin-right: 4px;
}

ul.calendar-types:not(:first-child) {
    padding-top: 6px;
    border-top: 1px solid #d3d3d3;
    margin-top: 6px;
    padding-left: 10px;
}

ul.calendar-color-selector {
    margin: 0;
    padding: 0;
    list-style: none;
}

.calendar-color-selector li {
    width: 25px;
    height: 25px;
    display: inline-block;
    margin-right: 4px;
    cursor: pointer;
    padding: 3px 6px;
    float: left;
    outline: none;
    margin-bottom: 4px;

}

.calendar-color-selector li i {
    color: #ffffff;
}

.ct-head md-checkbox .md-label {
    width: 120px;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.fc-content i {
    margin-right: 4px;
    color: #002746;
    font-size: 15px;
}

@media screen and (max-width: 768px) {
    #calendar-left-sidebar {
        width: 100% !important;
        height: auto !important;
        ;
        position: static !important;
    }

    #calendar-middle-content {
        width: 100% !important;
        height: 100% !important;
        padding-left: 0 !important;
    }

    #calendar-right-sidebar {
        display: none;
    }
}

ul.calendar-today-event-list {
    margin: 0;
    padding: 0;
    list-style: none;
}

ul.calendar-today-event-list.limit {
    height: 465px;
    overflow: hidden;
    position: relative;
}

.calendar-today-event-list li {
    border-bottom: 1px solid lightgray;
    padding: 12px 10px;
}

.calendar-today-event-list li h6 {
    font-size: 14px;
    font-weight: 400;
    margin: 0;
}

.event-time,
.event-all-day {
    background-color: #f3e2e2;
    padding: 2px 4px;
    border-radius: 2px;
}

.calendar-today-event-list li p {
    font-size: 12px;
    margin-bottom: 0;
}

h5.no-events-on-calendar {
    font-weight: 400;
}

.calendar-widget {
    background-color: #ffffff;
    border-radius: 2px;
    height: 463px;
    margin-bottom: 20px;
}

.calendar-widget-title,
.nw-title {
    padding: 16px 20px;
    /* background-color: #00c0ef; */
    background-color: #3b78e7;
}

.calendar-widget-title h5,
.nw-title h5 {
    margin: 0;
    font-size: 16px;
    font-weight: 400;
    color: #ffffff;
}

.calendar-events-list {
    width: 100%;
    height: 84px;
    overflow: auto;
}

ul.calendar-widget-events {
    margin: 0;
    padding: 0;
    list-style: none;
}

.calendar-widget-events li {
    position: relative;
    padding-left: 90px;
    padding-top: 6px;
    padding-bottom: 6px;
    padding-right: 10px;
}

.calendar-widget-events li:nth-of-type(odd) {
    background-color: #ededed;
}

.calendar-widget-events li:nth-of-type(even) {
    background-color: #ffffff;
}

li.show-more {
    background-color: #c6c6c6;
    color: #0273ce;
    position: absolute;
    bottom: 0;
    width: 100%;
}

.show-more .pull-right {
    cursor: pointer;
}

ul.calendar-today-event-list.limit {
    height: 465px;
    overflow-y: auto;
}

md-menu-item.menu-title {
    min-height: 30px !important;
    max-height: 30px;
}

md-menu-item.menu-title button.md-button {
    padding: 0px 17px 0px 10px;
    height: 10px;
    margin: 0;
    font-size: 16px;
    font-weight: 400;
    color: #444444 !important;
}

.card-menu-icon {
    color: #ffffff;
    cursor: pointer;
}

.cwe-time {
    position: absolute;
    left: 10px;
    padding: 4px;
    color: #ffffff;
    font-size: 12px;
    font-weight: 500;
}

.cwe-name {
    padding: 4px;
    font-size: 13px;
    font-weight: 500;
}

.has-events {
    position: relative;
}

.has-events:after {
    content: "";
    position: absolute;
    width: 6px;
    height: 6px;
    background-color: #e91e63;
    border-radius: 50%;
    right: 11px;
    top: 11px;
}

.datepicker table tr td.today,
.datepicker table tr td.day:hover,
.datepicker table tr td.day.active,
.datepicker table tr td.today:hover,
.datepicker table tr td.today.disabled,
.datepicker table tr td.today.disabled:hover {
    /* background-color: #2196f3; */
    background-color: #81a8f3;
    color: #ffffff;
}

/*.dashboard-widgets {
    min-height: 372px;
}*/

/*.dashboard-widgets .box-widget-details ul.users-list {
    min-height: 280px;
}*/

.dashboard-widgets .box-widget-details {
    min-height: 354px;
}

.notices-holder {
    max-height: 772px;
    overflow: auto;
}

.notices-holder md-tabs:not(.md-no-tab-content):not(.md-dynamic-height) {
    height: 380px;
}

.notice-widget-footer {
    width: 100%;
    height: 50px;
    background-color: #ffffff;
    padding: 10px;
}

@media screen and (max-width: 768px) {
    .nw-content {
        overflow: auto;
    }

    .widget-news-section {
        width: 100% !important;
        float: none;
    }

    .widget-notification-section {
        width: 100% !important;
    }
}

.tabs-menu {
    width: 100%;
    min-height: 76px;
    background: #ffffff;
    padding: 0 16px 10px 16px;
    border-bottom: 1px dashed #d0d0d0;
}

.no-bottom-margin-padding {
    margin-bottom: 0 !important;
    padding-bottom: 0 !important;
}

.tabs-menu .btn-inliner {
    margin-top: 24px;
}

.class-info-panel {
    box-shadow: 0px 0px 3px 1px rgba(119, 119, 119, 0.42);
    -moz-box-shadow: 0px 0px 3px 1px rgba(119, 119, 119, 0.42);
    -webkit-box-shadow: 0px 0px 3px 1px rgba(119, 119, 119, 0.42);
    margin-bottom: 30px;
}

.class-info-heading {
    width: 100%;
    padding: 8px;
    position: relative;
}

.class-info-heading h4 {
    margin: 0;
    font-size: 18px;
    font-weight: 400;
    display: inline-block;
}

.class-info-sub-heading h4 {
    margin: 0;
}

.class-info-sub-heading h4 small {
    color: #ffffff;
}

.class-info-body {
    width: 100%;
    min-height: 250px;
}

ul.class-info-list {
    margin: 0;
    padding: 0;
    list-style: none;
}

li.class-info-list-item {
    padding: 8px;
    border-bottom: 1px solid lightgray;
}

.class-info-list-item h6 {
    margin: 0 0 11px 0;
    font-size: 13px;
    text-transform: uppercase;
}

.cili-icon {
    width: 40px;
    height: 40px;
    text-align: center;
    float: left;
}

.cili-icon i {
    font-size: 42px;
    color: #828282;
}

.cili-stats {
    padding-left: 48px;
}

h4.cili-stat-elem {
    font-size: 19px;
    font-weight: 400;
    text-transform: uppercase;
    margin: 0;
    line-height: 2.2;
}

.cili-stat-elem span.number {
    color: #2196f3;
    font-weight: 600;
}

span.upcoming-time {
    font-size: 11px;
    line-height: 0;
    background-color: #ff6060;
    padding: 2px;
    color: #ffffff;
    font-weight: 600;
}

.cili-action-btns {
    margin-top: 12px;
}

.class-info-item {
    border-bottom: 1px solid #cccccc;
    padding: 8px;
}

.class-info-item h4 {
    font-weight: 400;
    font-size: 15px;
    line-height: 1.4;
    margin: 0;
}

.class-info-item h4 small {
    color: #2196f3;
    font-size: 80%;
    line-height: 1.4;
}

ul.class-teachers {
    margin: 0;
    padding: 0;
    list-style: none;
}

.class-teachers li {
    display: inline-block;
}

.class-teachers li img {
    border-radius: 50%;
    width: 45px;
    height: 45px;
}

.class-info-item .progress {
    margin-top: 10px;
}

.class-info-item:last-child {
    border: none;
}

.class-info-sub-heading {
    padding: 8px;
}

.active-class .class-info-heading {
    background-color: #4caf50;
    color: #ffffff;
}

.active-class .class-info-sub-heading {
    background-color: #63BB66;
}

.pending-class .class-info-heading {
    background-color: #2196f3;
    color: #ffffff;
}

.pending-class .class-info-sub-heading {
    background-color: #57ace6;
}

.completed-class .class-info-heading {
    background-color: #009688;
    color: #ffffff;
}

.completed-class .class-info-sub-heading {
    background-color: #10b1a0;
}

.finalized-class .class-info-heading {
    background-color: #673ab7;
    color: #ffffff;
}

.finalized-class .class-info-sub-heading {
    background-color: #7F54C9;
}

.archived-class .class-info-heading {
    background-color: #ff9800;
    color: #ffffff;
}

.archived-class .class-info-sub-heading {
    background-color: #FFAD33;
}

.pending-class .class-info-heading h4 small,
.active-class .class-info-heading h4 small,
.completed-class .class-info-heading h4 small,
.finalized-class .class-info-heading h4 small,
.archived-class .class-info-heading h4 small {
    color: #ffffff;
}

.cls-status {
    position: absolute;
    right: 32px;
    bottom: 20px;
}

.latest-asmnt-submiter {
    width: 100%;
    margin-top: 12px;
    font-size: 12px;
    border-top: 1px solid #c8c8c8;
    padding-top: 4px;
}

.latest-asmnt-submiter img {
    width: 40px;
    height: 40px;
    border-radius: 50%;
    margin-right: 4px;
}

.md-dot-menu {
    float: right;
    width: 14px;
    cursor: pointer;
    outline: none;
}

.md-dot-menu img {
    outline: none;
}

.lly-item {
    width: 40px;
    display: inline-block;
}

.lly-item img {
    width: 40px;
    height: 40px;
    border-radius: 50%;
}

.latest-loggedin-users {
    padding-top: 8px;
    border-top: 1px solid #cecece;
}

.latest-loggedin-users h6 {
    font-size: 12px;
    margin-bottom: 6px;
    text-transform: capitalize;
}

.dragable-list-container h4 {
    font-size: 16px;
    font-weight: 400;
    margin-top: 4px;
}

.dragable-list-item {
    width: 100%;
    /*height: 55px;*/
    background-color: #ffffff;
    padding: 6px;
    color: #212121;
    margin-bottom: 6px;
    cursor: pointer;
}

.dragable-list-item h5 {
    margin: 0;
    font-weight: 400;
}

.dragable-list-item h6 {
    margin-top: 15px;
    margin-bottom: 0;
    font-weight: 400;
    opacity: 0.8;
}

.dragable-list-item h6 span.hours {
    float: right;
}

.dl-type-btn {
    background-color: #bdbdbd;
    padding: 8px;
    border-radius: 4px;
    color: #ffffff;
    cursor: pointer;
    outline: none;
}

.dl-type-btn.active {
    background-color: #2196f3;
}

.dragable-list-item.teacher img {
    border-radius: 50%;
    width: 40px;
    height: 40px;
    float: left;
    margin-right: 8px;
    margin-top: 3px;
}

.dragable-list-item.teacher h5 {
    margin-top: 13px;
}

/*---- JQ Color Picker ----*/

.cp-color-picker {
    z-index: 10000;
}

/*---- Student Progress ----*/

.student-progress-header {
    width: 100%;
    padding: 10px;
    background-color: #ffffff;
    -webkit-box-shadow: 0px 1px 3px 0px rgba(0, 0, 0, 0.4);
    -moz-box-shadow: 0px 1px 3px 0px rgba(0, 0, 0, 0.4);
    box-shadow: 0px 1px 3px 0px rgba(0, 0, 0, 0.4);
}

.sp-student-profile {
    width: fit-content;
}

.sp-student-profile .profile-pic {
    width: 90px;
    height: 90px;
    background-size: 100%;
    border-radius: 2px;
    float: left;
    margin-right: 10px;
}

.sp-student-profile h3 {
    margin: 0;
    font-size: 22px;
    font-weight: 300;
    white-space: nowrap;
    text-overflow: ellipsis;
    overflow: hidden;
}

.sp-student-profile h3 small {
    line-height: 1.4;
}

.sp-student-course {
    min-width: 400px;
    float: right;
    max-width: 600px;
}

.sp-student-course h3 {
    margin: 0;
    white-space: nowrap;
    font-size: 22px;
    font-weight: 300;
    text-overflow: ellipsis;
    overflow: hidden;
}

.title-more-course-btn-holder {
    padding-right: 25px;
    position: relative;
    float: left;
    max-width: calc(100% - 102px);
}

.title-more-course-btn-holder md-menu.course-menu {
    position: absolute;
    right: 0;
    top: -10px;
}

.tmcb-holder {
    width: 100%;
    height: 30px;
}

.sp-student-course h3 .spscp-degree,
.sp-student-course h3 .spscp-faculty {
    font-size: 14px;
    color: #ffffff;
    text-transform: uppercase;
    padding: 3px;
    line-height: 1.8;
}

.spscp-degree {
    background-color: #ababab;
    font-size: 14px;
    color: #ffffff;
    text-transform: uppercase;
    padding: 3px;
    line-height: 1.8;
}

.spscp-earn-credits {
    background-color: transparent;
    color: #10cc29;
    font-weight: 500;
    font-size: 14px;
    text-transform: uppercase;
    padding: 3px;
    line-height: 1.8;
}

.spscp-faculty {
    background-color: #ce68bc;
}

.sp-student-cours-progress {
    width: 92px;
    height: 92px;
    margin-right: 10px;
    float: left;
}

.circle-chart {
    position: relative;
    text-align: center;
}

.circle-chart span {
    position: absolute;
    width: 90px;
    height: 90px;
    line-height: 80px;
    top: 0;
    left: 0;
}

.circle-chart .title {
    position: absolute;
    width: 90px;
    text-align: center;
    bottom: 0;
    height: 32px;
    font-size: 10px;
}

.student-progress-semester-card {
    width: 100%;
    height: 354px;
    border-radius: 2px;
    -webkit-box-shadow: 0px 1px 3px 1px rgba(0, 0, 0, 0.2);
    -moz-box-shadow: 0px 1px 3px 1px rgba(0, 0, 0, 0.2);
    box-shadow: 0px 1px 3px 1px rgba(0, 0, 0, 0.2);
    position: relative;
}

.sps-card-header {
    width: 100%;
    padding: 10px;
    border-bottom: 1px solid #e4e4e4;
}

.sps-card-header h3 {
    margin: 0;
    font-size: 18px;
    font-weight: 400;
    padding-top: 8px;
}

.sps-card-header-status-icon {
    float: left;
    width: 40px;
    height: 40px;
    margin-right: 10px;
    text-align: center;
    padding-top: 4px;
}

.sps-card-header-status-icon i {
    font-size: 36px;
}

.sps-card-header-status-icon.completed i {
    color: #18a300;
}

.sps-card-header-status-icon.no-progress i {
    color: #F75B58;
}

.sps-card-completed-msg {
    padding: 41px 10px;
    border-bottom: 1px solid #e4e4e4;
}

.sps-card-completed-msg i {
    font-size: 38px;
    float: left;
    margin-right: 8px;
    color: #18a300;
}

.sps-card-completed-msg h4 {
    margin: 0;
    padding-top: 3px;
    font-size: 14px;
    font-weight: 400;
}

.sps-card-completed-msg h3 {
    margin: 0;
    font-size: 20px;
    font-weight: 400;
    color: #18a300;
}

.sps-card-no-progress-msg {
    padding: 88px 10px 0 10px;
}

.sps-card-no-progress-msg i {
    font-size: 38px;
    color: #f75b58;
    float: left;
    margin-right: 8px;
}

.sps-card-no-progress-msg h4 {
    font-size: 14px;
    font-weight: 400;
    margin: 0;
    padding-top: 12px;
    color: #f75b58;
}

.sps-card-attendance-overview {
    padding: 15px 15px 30px 15px;
    border-bottom: 1px solid #e4e4e4;
}

.sps-card-attendance-overview h4 {
    margin: 0 0 10px 0;
    font-size: 14px;
    font-weight: 300;
}

.sps-card-line-progress {
    width: 100%;
    height: 6px;
    overflow: hidden;
    border-radius: 4px;
    margin-bottom: 10px;
}

.spscl-progress-item {
    height: 6px;
    display: inline-block;
    float: left;
}

.spscl-progress-map {
    width: 35px;
    height: 35px;
    border-radius: 50%;
    color: #ffffff;
    text-align: center;
    font-size: 12px;
    line-height: 3.2;
    display: inline-block;
    position: relative;
    margin: 0 13px;
}

.spscl-progress-map span {
    color: #808080;
    position: absolute;
    left: -32px;
    width: 98px;
    font-size: 11px;
    bottom: -26px;
}

.sps-card-footer {
    width: 100%;
    padding: 10px;
    position: absolute;
    bottom: 0;
}

.sps-panel {
    width: 100%;
    margin: 0 auto;
}

.sps-tab_panel {
    background-color: #ffffff;
    padding: 0 16px;
    margin-bottom: 16px;
    border-color: #ddd;
    box-shadow: 0 0 15px rgba(0, 0, 0, 0.1);
}

.sps-panel_tab {
    background: #f9f9f9;
    border-color: #ddd;
    box-shadow: 0 0 15px rgba(0, 0, 0, 0.1);
}

.sps-tab_heading {
    border-bottom: 1px solid #eee;
    padding: 15px 0px;
    cursor: pointer;
}

.sps-tab_heading h3 {
    font-size: 18px;
    margin: 0;
    float: left;
    font-weight: 400;
}

.sps-tab_heading span {
    font-size: 1.1rem;
    font-weight: 800;
    color: #f56e73;
    float: right;
}



.sps-scrolable-content {
    width: 100%;
    max-height: 500px;
    overflow: auto;
}

.tbl-option-fixd {
    width: 100%;
    padding: 8px 0 4px 0;
    margin-bottom: 4px;
    border-bottom: 1px solid #dfdfdf;
}

.sps-tab_content p {
    border-left: 1px solid #eee;
    padding-left: 5px;
}

.sps-remail-enrolls {
    float: right;
    margin-right: 10px;
    padding: 1px;
}

.sps-remail-enrolls span {
    float: left;
    padding: 4px 8px;
    background: #0f9d58;
    border-radius: 50%;
    margin-right: 7px;
    margin-left: 4px;
    color: #ffffff;
}

.select-student {
    position: relative;
}

.select-student h4 {
    margin: 10px 0;
    font-weight: 400;
}

.sp-student-switch-close {
    position: absolute;
    right: -20px;
    top: 0;
    font-size: 20px;
    color: #525151;
    cursor: pointer;
}

.current-student {
    position: relative;
}

.area-status {
    float: right;
    margin-right: 10px;
    min-width: 100px;
}

.area-status i {
    font-size: 20px;
}

.area-status.done {
    color: #176308;
}

.area-status.in-complete {
    color: #e89600;
}

.sp-student-switch-close.search {
    color: #2196f3;
}

.area-status.free-subjects {
    padding: 1px 7px;
    border-radius: 50%;
    color: #06b906;
}

md-menu-item button h4 {
    font-size: 18px;
    font-weight: 400;
    line-height: 1;
    margin: 0;
    border-bottom: 1px solid #e4d9d9;
    padding: 4px 0;
}

.modal-guide-headings {
    font-size: 18px;
    font-weight: 400;
    margin: 0 0 10px 0;
    color: #2196f3;
}

.mdl-chip {
    height: 32px;
    font-family: "Roboto", "Helvetica", "Arial", sans-serif;
    line-height: 32px;
    padding: 0 12px;
    border: 0;
    border-radius: 16px;
    background-color: #dedede;
    display: inline-block;
    color: rgba(0, 0, 0, .87);
    margin: 2px 0;
    font-size: 0;
    white-space: nowrap;
    outline: none;
}

.chip-vertical {
    display: table;
    margin-bottom: 10px;
}

.mdl-chip__contact {
    height: 32px;
    width: 32px;
    border-radius: 16px;
    margin-right: 8px;
    font-size: 18px;
    line-height: 32px;
}

.mdl-chip__action,
.mdl-chip__contact {
    display: inline-block;
    vertical-align: middle;
    overflow: hidden;
    text-align: center;
}

.mdl-chip__action {
    height: 24px;
    width: 24px;
    background: 0 0;
    cursor: pointer;
    padding: 0;
    margin: 0 0 0 4px;
    font-size: 13px;
    text-decoration: none;
    color: rgba(0, 0, 0, .87);
    border: none;
    outline: none;
}

.mdl-chip__text {
    font-size: 13px;
    /** vertical-align: middle;*/
    display: inline-block;
}

.mdl-color--teal {
    background-color: #009688 !important;
}

.mdl-color-text--white {
    color: #fff !important;
}

.mdl-chip--contact {
    padding-left: 0;
}

.md-auto-complete-item-title {
    width: calc(100% - 58px);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.isselected {
    display: block;
    height: 15px;
    width: 15px;
    margin-right: 0px;
    background: #ff3535;
    z-index: 9999;
    text-align: center;
    float: left;
}

.staff_conflict {
    background: #ffc800;
    color: #f00;
    height: 15px;
    width: 15px;
    text-align: center;
    font-weight: bold;
    z-index: 9999;
    float: left;
}

.unassign_staff {
    background: #428bca;
    color: #fff;
    height: 15px;
    width: 15px;
    text-align: center;
    font-weight: bold;
    z-index: 9999;
    float: left;
}

.staff_conflict,
.isselected,
.unassign_staff {
    border-top-right-radius: 4px;
    border-top-left-radius: 4px;
}

.event-actions {
    position: absolute;
    top: -16px;
    right: 0;
}

.calendar-loader-overlay {
    width: 100%;
    height: 100%;
    position: fixed;
    z-index: 2;
    background: rgba(255, 255, 255, 0.3);
}

.calendar-loader-overlay:after {
    content: "Loading....";
    position: absolute;
    top: 50%;
    left: 50%;
}

.fc-event .fc-bg {
    opacity: 0 !important;
    filter: alpha(opacity=0) !important;
}

.fc-time-grid-event {
    overflow: initial !important;
}

.fc-event .fc-content {
    overflow: hidden;
    height: 100%;
}

.tt-title {
    margin: 15px 0;
    font-size: 19px;
    font-weight: 400;
}

ul.time-slot-teachers {
    margin: 0;
    padding: 0;
    list-style: none;
}

.time-slot-teachers li {
    padding: 4px 8px;
    background-color: #ffffff;
    border-bottom: 1px solid #e4e4e4;
}

.time-slot-teachers li md-checkbox {
    float: left;
}

.time-slot-teachers li img {
    float: left;
    width: 35px;
    height: 35px;
    border-radius: 50%;
    margin-right: 4px;
    margin-top: 3px;
}

.time-slot-teachers li h4 {
    font-size: 14px;
    font-weight: 400;
    color: #5f5f5f;
    width: 100%;
    white-space: pre-line;
    margin: 8px 0 0 0;
}

.time-table-validation-msgs {
    width: 100%;
    padding: 10px;
    background-color: #ffffff;
    -moz-box-shadow: 0px 1px 6px rgba(0, 0, 0, 0.4);
    -webkit-box-shadow: 0px 1px 6px rgba(0, 0, 0, 0.4);
    box-shadow: 0px 1px 6px rgba(0, 0, 0, 0.4);
    border-radius: 3px;
    margin-bottom: 12px;
}

.time-table-validation-msgs h4 {
    margin: 0;
    color: #f10707;
    font-weight: 400;
}

h6.ttvm-confilct-type {
    margin: 10px 0;
    padding: 4px 6px;
    display: inline-block;
    background-color: #ed4747;
    color: #ffffff;
    border-radius: 4px;
}

p.ttvm-confict-msg {
    font-weight: 400;
    margin: 0;
}

/*---- Paper Collapse ----*/

.collapse-card {
    padding: 0 !important;
    box-shadow: 0 0px 6px rgba(0, 0, 0, 0.2);
}

.title.trigger {
    padding: 14px;
}

.collapse-card.active .title {
    border-bottom: 1px solid #e6e6e6;
}

.collapse-card.active {
    background-color: #ffffff;
}

.title h3.trigger {
    margin: 0;
    font-size: 18px;
    font-weight: 500;
    display: inline-block;
}

.inline-form-holder {
    padding: 14px;
    border: 1px dashed #2196f3;
    position: relative;
}

.asb-holder {
    background-color: #dcdcdc;
    padding: 4px;
}

.asb-holder h5 {
    color: #2196f3;
    font-size: 16px;
    font-weight: 400;
    margin-left: 3px;
}

.form-msg {
    position: absolute;
    padding: 3px;
    top: 0;
    left: 0;
    font-size: 11px;
    line-height: 1;
}

.inline-form-holder.editing {
    border: 1px dashed #f44336;
}

.form-msg.editing {
    background-color: #f44336;
    color: #ffffff;
}

.selected-slot {
    /*  background-color: rgb(255, 255, 255) !important;
  border-color: rgb(213, 213, 213)!important;  */
    box-shadow: 0 0px 14px rgba(0, 0, 0, 0.8) !important;
    color: #000 !important;
    z-index: 10 !important;
}

.selected-slot-remove {
    position: absolute;
    top: 0;
    right: 0;
    display: block;
    height: 22px;
    width: 22px;
    margin-right: 0px;
    background: #f00;
    z-index: 9999;
    text-align: center;
    color: #ffffff;
    line-height: 1.9;
}

.fc-time {
    padding: 0 4px !important;
    margin-top: 4px;
    width: 100%;
}

.fc-title {
    padding: 0 4px !important;
    margin-top: 4px;
    white-space: normal;
    height: calc(100% - 24px);
    overflow: hidden;
    line-height: 1.6;
}

ul.time-slot-info {
    margin: 0;
    list-style: none;
    padding: 0;
}

.time-slot-info li {
    padding: 4px 8px;
    background-color: #ffffff;
    border-bottom: 1px solid #e4e4e4;
}

span.tsi-title,
.tsi-sub-title {
    color: #2196f3;
    font-size: 13px;
}

.tsi-sub-title {
    padding: 4px 8px;
    width: 100%;
    background-color: #ffffff;
}

h4.tsi-info {
    margin: 2px 0 0 0;
    font-size: 15px;
    font-weight: 400;
    color: #696969;
}

@media screen and (max-width: 768px) {
    .md-table-responsive {
        width: 100%;
        overflow: auto;
        padding: 2px 4px;
    }
}

.picture-upload-component {
    width: 118px;
    padding: 8px;
    position: relative;
    background-color: #ffffff;
    -moz-box-shadow: 0px 0px 6px rgba(0, 0, 0, 0.6);
    -webkit-box-shadow: 0px 0px 6px rgba(0, 0, 0, 0.6);
    box-shadow: 0px 0px 6px rgba(0, 0, 0, 0.6);
    border-radius: 3px;
    overflow: hidden;
}

.puc-actions {
    position: absolute;
    bottom: 0;
    width: 100%;
    left: 0;
    padding: 8px;
    background: rgba(0, 0, 0, 0.6);
    cursor: pointer;
    text-align: center;
}

.puc-upload-btn,
.puc-remove-btn {
    color: #ffffff;
    font-size: 13px;
    font-weight: 500;
}

.picture-upload-component md-progress-circular {
    position: absolute;
}

.puc-actions input[type="file"] {
    position: absolute;
    visibility: hidden;
}

/*---- Class Status Cards ----*/

.class-status {
    border-radius: 5px;
    font-weight: 500;
    padding: 2px 4px;
    font-size: 12px;
    color: #ffffff;
}

.class-status.active {
    background-color: #02d442;
}

.class-status.pending {
    background-color: #57ace6;
}

.class-status.completed {
    background-color: #009688;
}

.class-status.finalized {
    background-color: #673ab7;
}

.class-status.archived {
    background-color: #ff9800;
}

.class-status.unattend {
    background-color: #fd0734;
}

.class-status.published {
    background-color: #ababab;
}

.mdl-card__title span.subject-code {
    font-size: 14px;
    color: #636161;
}

.mdl-card_datetime {
    font-size: 14px;
    margin-bottom: 6px;
}

.teacher-lst-holder {
    position: relative;
    min-height: 30px;
}

p.card-extra-user-count {
    margin: 0;
    font-size: 12px;
    font-weight: 500;
    position: absolute;
    right: 0px;
    top: 8px;
}

.class-status-inof-holder {
    width: 100%;
    display: flex;
    flex-direction: column;
    gap: 3px;
    padding-bottom: 2px;
}

ul.class-status-dots {
    margin: 6px 0;
    padding: 0;
    list-style: none;
    position: absolute;
    bottom: 0;
}

ul.class-status-dots li {
    width: 10px;
    height: 10px;
    border-radius: 50%;
    display: inline-block;
    margin: 0 2px;
}

ul.class-status-dots li:first-child:nth-last-child(n+6),
ul.class-status-dots li:first-child:nth-last-child(n+18)~li {
    margin-left: 0;
}

ul.class-status-dots li.active {
    background-color: #2196F3;
}

ul.class-status-dots li.completed {
    background-color: #08ad08;
}

ul.class-status-dots li.pending {
    background-color: #bfc3bf;
}

ul.class-status-dots li.canceled {
    background-color: #eb6565;
}

ul.class-status-dots li.postponed {
    background-color: #fbba58;
}

ul.class-status-dots li.examinations {
    background-color: #795548;
}

ul.class-status-dots li.notApplicable {
    background-color: white;
    border: 1px solid #bfc3bf;
}

ul.circle-checkbox-list {
    padding: 0;
    list-style: none;
}

ul.circle-checkbox-list li {
    display: inline-block;
}

.circle-checkbox-list li md-checkbox .md-container .md-icon {
    border-radius: 50%;
}

.circle-checkbox-list li md-checkbox.md-checked .md-ink-ripple {
    color: #08ad08;
}

.circle-checkbox-list li md-checkbox.md-checked .md-icon {
    background-color: #08ad08;
}

.class-status-card {
    width: 100%;
    margin-top: 15px;
    margin-bottom: 15px;
}

.class-status-card.published {
    opacity: 0.6;
}

.class-status-card.published:hover {
    opacity: 1;
}

.sp-student-course h3 md-menu.md-menu {
    position: absolute;
    right: 0px;
    top: -11px;
}

md-content.scrollable {
    max-height: 460px;
    overflow: auto;
}

.navbar-nav>.notifications-menu>.dropdown-menu,
.navbar-nav>.messages-menu>.dropdown-menu,
.navbar-nav>.tasks-menu>.dropdown-menu {
    -moz-box-shadow: 0px 1px 9px rgba(0, 0, 0, 0.5);
    -webkit-box-shadow: 0px 1px 9px rgba(0, 0, 0, 0.5);
    box-shadow: 0px 1px 9px rgba(0, 0, 0, 0.5);
}

/*---- LESSON PLAN ----*/

.add-lesson-plan-holder {
    width: 100%;
    border: 1px solid #c6c6c6;
    position: relative;
    padding-left: 200px;
    height: calc(100vh - 162px);
}

.alph-sidebar {
    width: 200px;
    height: 100%;
    position: absolute;
    border-right: 1px solid #c6c6c6;
    top: 0;
    left: 0;
    background-color: #f0eeee;
}

ul.alph-nav {
    margin: 0;
    padding: 0;
    list-style: none;
}

ul.alph-nav li {
    padding: 12px 20px;
    border-bottom: 1px solid #d6d6d6;
}

ul.alph-nav li.tab-active {
    background-color: #d6d6d6;
    border-left: 2px solid #2196f3;
    outline: none;
}

ul.alph-nav li:hover {
    background-color: #dad9d9;
}

ul.alph-nav li a {
    color: #080808;
    font-size: 15px;
    font-weight: 300;
}

.alph-lesson-body {
    width: 100%;
    height: 100%;
}

.alph-lb-heading {
    padding: 11px 16px;
    border-bottom: 1px solid #c6c6c6;
    height: 46px;
}

.alph-lb-heading h3 {
    margin: 0;
    font-size: 20px;
    font-weight: 400;
    color: #484848;
}

.alph-lb-content {
    width: 100%;
    height: calc(100% - 46px);
    padding: 14px 16px;
    overflow: auto;
}

.alph-lb-chapter-block {
    width: 100%;
    padding: 10px;
    border: 1px solid #b9b9b9;
    background-color: #f0eeee;
    margin-bottom: 16px;
    outline: none;
}

.alph-lb-cb-heading h4 {
    margin: 10px 0 18px 0;
    font-size: 16px;
    font-weight: 400;
}

.alph-lb-lesson-block {
    width: 100%;
    padding: 10px 8px;
    border: 1px solid #9e9e9e;
    background-color: #ffffff;
    margin-bottom: 16px;
}

.alph-lb-lesson-block.block-active .alph-lb-lb-content {
    display: block;
}

.alph-lb-lb-content {
    display: none;
}

.alph-lb-lesson-block.block-active .alph-lb-lb-h-toolbar .md-icon-button i.fa {
    transform: rotate(180deg);
}

.alph-lb-lb-h-toolbar .md-icon-button i.fa {
    ransition: All 0.4s ease;
    -webkit-transition: All 0.4s ease;
    -moz-transition: All 0.4s ease;
    -o-transition: All 0.4s ease;
}

.alph-lb-lb-headding h5 {
    margin: 16px 6px 0px 0;
    float: left;
}

.alph-lb-lb-headding h5 span {
    font-weight: 300;
}

.alph-lb-lb-hover-icon-btns {
    padding: 0 4px;
    cursor: pointer;
    color: #d04444;
    display: none;
}

.alph-lb-lb-headding:hover .alph-lb-lb-hover-icon-btns {
    display: block;
}

.as-sortable-item,
.as-sortable-placeholder {
    border-radius: 0 !important;
}

/*---- Alerts ----*/

.alert {
    display: block;
    padding: 20px;
    border-left: 5px solid;
}

.alert-success {
    background-color: #D5F5E3;
    border-left-color: #2ECC71;
    color: #2ECC71;
}

.alert-info {
    /* background-color: #D6EAF8; */
    border-left-color: #3498DB;
    /* color: #3498DB; */
    border-color: #81a8f3;
    background-color: #81a8f3;

}

.alert-warning {
    background-color: #FCF3CF;
    border-left-color: #F1C40F;
    color: #F1C40F;
}

.alert-error {
    background-color: #F2D7D5;
    border-left-color: #C0392B;
    color: #C0392B;
}

/*---- End Alerts ----*/

/*---- Invoice Template ----*/

.invoice-holder {
    padding-right: 240px;
    position: relative;
    padding-left: 150px;
}

.invoice-header {
    border-bottom: 1px solid #cccccc;
}

.invoice-header h3 {
    font-size: 16px;
    float: left;
    margin: 11px 0px 11px 11px;
    font-weight: 400;
}

.invoice-body {
    padding: 12px;
}

.invoice-body p span {
    font-size: 14px;
    color: #656464;
}

.md-table.divider td {
    border-bottom: 1px solid lightgrey;
}

span.invoice-balance {
    color: #2da72d !important;
    font-size: 24px !important;
    font-weight: 300;
}

.invoice-list-holder {
    position: absolute;
    width: 240px;
    right: 0;
    top: 0;
    height: calc(100vh - 120px);
}

ul.invoice-list {
    margin: 0;
    padding: 0;
    list-style: none;
}

li.invoice-item {
    border-bottom: 1px solid #d2d2d2;
    padding: 12px;
    cursor: pointer;
}

li.invoice-item:hover {
    background-color: #dbdada;
}

.invoice-item h3 {
    margin: 0;
    font-size: 16px;
    font-weight: 400;
}

.invoice-item h3 small {
    font-size: 12px;
}

tr.tbl-row-expaner td {
    display: none;
}

/*md-tooltip{
  position: fixed !important;
}*/

.tooltip {
    white-space: nowrap;
    max-width: 500px;
}

.tooltip.top .tooltip-arrow,
.tooltip.top-left .tooltip-arrow,
.tooltip.top-right .tooltip-arrow,
.tooltip.right .tooltip-arrow,
.tooltip.left .tooltip-arrow,
.tooltip.bottom .tooltip-arrow,
.tooltip.bottom-left .tooltip-arrow,
.tooltip.bottom-right .tooltip-arrow {
    border: transparent !important;
}

.tooltip-inner {
    background-color: rgba(0, 0, 0, 0.80);
    max-width: 400px;
}

/*---- Card Element ----*/

.card-header {
    padding: 12px;
    border-bottom: 1px solid #e4e3e3;
}

md-card .card-header h4 {
    margin: 0;
    font-size: 16px;
    font-weight: 400;
}

.card-body {
    padding: 12px;
    min-height: 200px;
    max-height: 470px;
    overflow: auto;
}

.card-sub-title {
    font-size: 14px;
    margin: 0 0 15px 0;
    border-bottom: 1px dashed #d6d6d6;
    padding-bottom: 4px;
    font-weight: 400;
}

/*.chartOpened{
  position: absolute;
  z-index: 2;
  left: 16px;
  width: 90%;
}*/

/*---- Staff New Profile ----*/

#staff-profile-holder {
    position: relative;
    height: calc(100vh - 140px);
    border: 1px solid #d0d0d0;
    background-color: #ffffff;
}

#sp-left-sidebar {
    width: 220px;
    position: absolute;
    left: 0;
    top: 0;
    height: 100%;
    border-right: 1px dashed #d0d0d0;
    padding: 14px;
    overflow: auto;
}

#sp-middle-area {
    padding: 14px 14px 14px 234px;
    overflow: auto;
    height: 100%;
    width: calc(100% - 220px);
}

#sp-right-sidebar {
    position: absolute;
    right: 0;
    width: 220px;
    height: 100%;
    top: 0;
    padding: 14px;
    border-left: 1px dashed #d0d0d0;
    overflow: auto;
}

.sp-profile-picture {
    width: 100%;
    height: 178px;
    background-size: cover;
    background-repeat: no-repeat;
    background-position: center center;
}

.sp-name-position {
    margin: 10px 0;
}

.sp-name-position h3 {
    margin: 0;
    font-size: 20px;
    white-space: nowrap;
    text-overflow: ellipsis;
    overflow: hidden;
    width: 100%;
    font-weight: 400;
}

.sp-name-position h4 {
    margin: 0;
    font-size: 17px;
    font-weight: 300;
}

ul.sp-info-list {
    margin: 0;
    padding: 0;
    list-style: none;
}

.sp-info-list li {
    /* border-bottom: 1px solid #d6d6d6; */
    padding: 5px 0 5px 0;
}

.sp-info-list li h4 {
    font-size: 15px;
    font-weight: 600;
    color: #615d5d;
    margin: 0 0 4px 0;
}

.sp-info-list li h5 {
    font-size: 14px;
    font-weight: 400;
    color: #2d71a7;
    margin: 0 0 0 0;
}

li.spil-title {
    padding-left: 0;
}

.spil-icon {
    float: left;
    width: 35px;
    height: 35px;
    text-align: center;
    background-color: #2196f3;
    border-radius: 50%;
    color: #ffffff;
    font-size: 19px;
    padding-top: 5px;
    margin-right: 10px;
    margin-top: 1px;
}

.spil-title h2 {
    margin: 0;
    font-size: 20px;
    font-weight: 400;
    /* text-transform: uppercase; */
}

.profile-info-panel {
    border: 1px solid #d6d5d5;
    margin-bottom: 18px;
}

.pip-header {
    padding: 10px;
    background-color: #e2e2e2;
}

.pip-header h2 {
    margin: 0;
    font-size: 18px;
    font-weight: 400;
    color: #444444;
}

.pip-body {
    padding: 10px;
    overflow: auto;
}

.sp-medical-info-tags {
    font-weight: 300;
    font-size: 14px;
    margin: 4px 0 10px 0;
}

.sp-medical-info-tags span {
    font-weight: 400;
    margin-left: 8px;
}

@media screen and (max-width: 768px) {
    #staff-profile-holder {
        height: auto !important;
    }

    #sp-left-sidebar {
        width: 100% !important;
        position: static !important;
        overflow: visible !important;
    }

    .sp-info-list li {
        padding: 10px !important;
        display: inline-block !important;
        width: 140px !important;
        text-align: center;
    }

    .spil-icon {
        float: none !important;
        margin: auto !important;
    }

    li.spil-title {
        display: none !important;
    }

    #sp-middle-area {
        width: 100% !important;
        height: auto !important;
        overflow: visible !important;
        padding: 14px 14px 14px 14px !important;
    }

    #sp-right-sidebar {
        position: static !important;
        height: auto !important;
        width: 100% !important;
    }
}

#class-calendar .fc-toolbar {
    display: none;
}

.box-closed {
    display: none;
}

.box-oppened {
    display: block;
}

.box-header.closed .box-closed {
    display: block;
}

.box-header.closed .box-oppened {
    display: none;
}

.md-datepicker-calendar-pane {
    position: fixed;
}

/*---- New Notification Styles ----*/

.dropdown-menu.notification-menu {
    width: 360px !important;
}

li.notification-item-holder {
    height: 360px;
    overflow: auto;
}

.notification-item-heading {
    padding: 12px 18px;
    font-weight: 400;
}

.notification-item {
    padding: 10px 18px;
    background-color: #fbfbfb;
    border-bottom: 1px solid #cdcdcd;
    position: relative;
}

.notification-item p {
    font-size: 13px;
    font-weight: 300;
    margin-bottom: 0px;
}

.notification-item small {
    font-size: 11px;
    font-weight: 400;
    color: #797777;
}

.notification-item.unread {
    background-color: #efefef;
}

.notification-item.unread p {
    font-weight: 400;
}

.notification-item.unread small {
    font-weight: 400;
}

.notification-item.unread:before {
    content: "";
    position: absolute;
    width: 5px;
    height: 5px;
    background-color: #2196f3;
    border-radius: 50%;
    left: 6px;
    top: 16px;
}

.qq-upload-button,
.qq-upload-cancel {
    border: 1px solid #b1b1b1 !important;
    color: rgb(16, 16, 16) !important;
    background-color: #e0dfdf36 !important;
    box-sizing: border-box;
    user-select: none;
    outline: none;
    min-height: 4px !important;
    white-space: nowrap;
    font-weight: 250;
    font-size: 14px;
    font-family: sans-serif;
    cursor: pointer;
    transition: box-shadow 0.4s cubic-bezier(0.25, 0.8, 0.25, 1), background-color 0.4s cubic-bezier(0.25, 0.8, 0.25, 1) !important;
}

.qq-upload-cancel {
    min-height: 30px;
    background-color: rgb(244, 67, 54) !important;
}

.qq-upload-button-selector {
    width: 95px !important;
}

.qq-uploader {
    min-height: 110px;
}

/*---- Student Work ----*/

.student-work-status {
    padding: 8px;
    border-radius: 2px;
}

.student-work-status.marked {
    border: 1px solid #01d25e;
}

.student-work-status.unmarked {
    border: 1px solid #d09b07;
}

.student-work-status h5 {
    margin: 0;
}

.student-work-marks {
    margin-top: 8px !important;
}

.student-work-marks span {
    font-size: 20px;
    color: #049c04;
}

.student-work-files {
    padding: 8px;
    border-bottom: 1px solid #ededed;
}

.student-work-files h4 {
    margin: 0;
    font-size: 16px;
}

.student-work-files p {
    margin: 0;
}

.student-work-file-holder {
    position: absolute;
    bottom: 10px;
    width: 100%;
    left: 0;
    padding: 0 8px;
}

.width-sm {
    width: 88px;
    position: relative;
}

i.loadingAnim {
    color: #2196f3;
    font-size: 16px;
    position: absolute;
    right: 28px;
    top: 7px;
    z-index: 3;
}

.tbl-input-error {
    color: red;
    text-transform: capitalize;
    font-size: 12px;
    font-weight: 300;
    margin-top: 31px;
    position: absolute;
}

md-ink-bar {
    /* background: rgb(255, 64, 129) !important; */
    background: rgb(255, 255, 255) !important
        /* added by shanika */
}

.full-height {
    height: 100% !important;
}

.modal-content-title.ng-binding {
    font-size: 22px;
    font-weight: 400;
    border-bottom: 1px dashed #b7b7b7;
    padding-bottom: 5px;
    margin-bottom: 10px;
    display: inline-block;
    width: 100%;
}

ul.assessment-meta-data {
    margin: 0 0 14px 0;
    padding: 0;
    list-style: none;
}

.assessment-meta-data li {
    /*border-bottom: 1px solid #dedede;*/
    padding: 6px 0;
}

.amd-item {
    display: inline-block;
    padding-right: 20px;
    font-size: 14px;
    color: #777777;
}

.amd-item div {
    font-size: 15px;
    font-weight: 500;
    color: #636262;
    display: inline-block;
    padding-right: 10px;
}

p.amd-description {
    font-size: 14px;
    font-weight: 300;
}

.sp-program-name {
    margin: 6px 0 6px 0;
    width: 110px;
    overflow: hidden;
    white-space: nowrap;
    text-overflow: ellipsis;
    align-self: flex-start;
    float: left;
}

/*---- Notification Wall ----*/

.main-notification-user-pic {
    border-radius: 50%;
    margin-right: 10px;
}

.box.box-widget.more-shadow.reply-back,
.box.box-widget.more-shadow.my-reply {
    border-top: 2px solid #2196f3;
}

.box.box-widget.more-shadow.notification-sub-replies {
    margin: 0;
    border-radius: 0;
}

.box.box-widget.more-shadow.notification-main-item {
    margin: 0;
}

.notification-holder {
    margin-bottom: 20px;
}

.mdl-chip--contact.truncate-text {
    width: 100px;
    overflow: hidden;
}

.mdl-chip--contact.truncate-text .mdl-chip__text {
    text-overflow: ellipsis;
    width: 50px;
    overflow: hidden;
}

.mdl-chip--contact.truncate-text .mdl-chip__contact {
    float: left;
    ;
}

p.card-extra-user-count.align-middle {
    margin-left: 4px;
    margin-top: 9px;
    vertical-align: top !important;
}

.gpa-holder {
    position: absolute;
    bottom: 4px;
    left: 15px;
    background-color: rgb(156, 51, 95);
    padding: 2px 4px;
    border-radius: 2px;
}

.gpa-holder p {
    margin: 0;
    font-size: 12px;
    color: #ffffff;
}

.th-min-width {
    width: 105px;
}

.msg-box-type-holder {
    border: 1px dashed #aaaaaa;
    padding: 10px;
    position: relative;
    margin: 20px 0;
}

.msg-box-type-holder h4 {
    margin: 0;
    font-size: 16px;
    font-weight: 500;
    position: absolute;
    top: -10px;
    left: 6px;
    background: #ffffff;
    padding: 0 2px;
    color: #3d3d3d;
}

h5.subject-mark-title {
    font-size: 16px;
    color: #212121;
    font-weight: 400;
    line-height: 1.4;
}

h5.subject-mark-title small {
    color: #636363;
    font-size: 14px;
}

label.date-picker-label {
    font-size: 11px;
    color: #757575;
    position: absolute;
    margin-bottom: 20px;
}

.panel-title {
    position: relative;
}

.panel-title>a:hover,
.panel-title>a:active,
.panel-title>a:focus {
    color: #ffffff;
}

span.arrow-handle {
    position: absolute;
    right: 0;
    top: -5px;
    font-size: 28px;
    transform: rotate(180deg);
    transition: All 0.6s ease;
    -webkit-transition: All 0.6s ease;
    -moz-transition: All 0.6s ease;
    -o-transition: All 0.6s ease;
}

.panel-title>a.collapsed span.arrow-handle {
    transform: rotate(0deg);
}

/*---- Session Report ----*/

.srh-inner {
    padding: 10px;
}

.sr-lecture-bar {
    width: 100%;
    height: 22px;
    margin-bottom: 17px;
    position: relative;
}

.sr-lecture-bar:after {
    content: "";
    position: absolute;
    width: 100%;
    height: 1px;
    background-color: #bcbcbc;
    bottom: -8px;
    left: 0;
}

.sr-lecture-bar:last-child:after {
    background: transparent;
}

.sr-lecture-name {
    width: 200px;
    float: left;
    padding-right: 24px;
}

.sr-lecture-name h4 {
    font-size: 14px;
    font-weight: 400;
    margin: 0;
    line-height: 1.6;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    text-align: right;
    cursor: pointer;
    outline: none;
    color: #3c8dbc;
}

.sr-lecture-session-holder {
    width: calc(100% - 200px);
    height: 20px;
    float: left;
}

.sr-lecture-session {
    height: 20px;
    float: left;
    border-right: 1px solid white;
    position: relative;
}

.sr-lecture-session:first-child {
    border-top-left-radius: 5px;
    border-bottom-left-radius: 5px;
}

.sr-lecture-session:last-child {
    border-top-right-radius: 5px;
    border-bottom-right-radius: 5px;
}

.sr-lecture-session:last-child {
    border: none;
}

.sr-lecture-session.pending {
    background-color: green;
}

.sr-lecture-session.canceled {
    background-color: red;
}

.sr-lecture-session-info {
    position: absolute;
    width: 200px;
    top: 0;
    left: -50px;
    background-color: #ffffff;
    border-radius: 4px;
    padding: 8px;
    z-index: 1;
    display: none;
    bottom: -10px;
}

.sr-lecture-session:hover .sr-lecture-session-info {
    display: block;
}

.no-sessions {
    font-size: 14px;
    font-weight: 300;
    color: #fb3c3c;
}

.srh-legend {
    margin: 10px 0 30px 0;
    text-align: center;
}

ul.srhl-item {
    margin: 0;
    padding: 0;
    list-style: none;
}

ul.srhl-item li {
    display: inline-block;
    position: relative;
    padding-left: 36px;
    padding-right: 36px;
}

ul.srhl-item li:before {
    content: "";
    position: absolute;
    width: 30px;
    height: 12px;
    border-radius: 4px;
    left: 0;
    margin-top: 4px;
}

li.srhli-pending:before {
    background-color: #bfc3bf;
}

li.srhli-completed:before {
    background-color: #08ad08;
}

li.srhli-postponed-canceled:before {
    background-color: #eb6565;
}

h4.sr-data-msg {
    text-align: center;
    font-size: 20px;
    font-weight: 300;
    color: #838383;
}

.progress-table-header-fix {
    position: absolute;
    z-index: 1;
    background-color: #ffffff;
    overflow: hidden;
}

.more-shadow .panel-heading {
    border: none !important;
}

.class-manager-status-ckbx {
    margin-right: 16px;
}

.class-manager-status-ckbx .md-label {
    margin-left: 4px;
}

.sc-tbl-holder {
    position: relative;
}

.student-course-tabl-freezer {
    height: 41px;
    overflow: hidden;
    position: absolute;
    background: #ffffff;
    width: calc(100% - 15px);
    left: 0;
    display: none;
    z-index: 1;
}

/*---- Assessment Type ----*/

.assessment-type-lable {
    position: absolute;
    transform: rotate(-90deg);
    padding: 2px 12px;
    border-top-left-radius: 10px;
    border-top-right-radius: 6px;
    color: #ffffff;
    font-weight: 600;
}

.assessment-type-lable.exam {
    background-color: #008000;
    left: -42px;
    top: 18px;
}

.assessment-type-lable.assessment {
    background-color: #FE9400;
    left: -76px;
    top: 52px;
}

body.session-report {
    height: initial !important;
}

.assessment-type-lable.extraa-session {
    background-color: #fff704;
    left: -61px;
    top: 37px;
    color: #3a3939;
    font-size: 12px;
    border: 1px solid #d4d4d4;
}

md-option[selected].multi-select:before {
    content: "\f00c";
    position: absolute;
    left: 14px;
    font-family: fontAwesome;
}

/* ----Assessment Reoprt -----*/

.test-tbl {
    position: relative;
    width: 700px;
    overflow: hidden;
    border-collapse: collapse;
}

/*thead*/

.test-tbl thead {
    position: relative;
    display: block;
    /*seperates the header from the body allowing it to be positioned*/
    width: 700px;
    overflow: visible;
}

.test-tbl thead th {
    min-width: 120px;
    height: 32px;
    border: 1px solid #222;
}

.test-tbl thead th:nth-child(1) {
    /*first cell in the header*/
    position: relative;
    display: block;
    /*seperates the first cell in the header from the header*/
    min-width: 222px;
    background-color: #ffffff;
}

/*tbody*/

.test-tbl tbody {
    position: relative;
    display: block;
    width: calc(98vw - 30px);
    top: -2px;
    max-height: calc(95vh - 330px);
    overflow: auto;
}

.test-tbl tbody td {
    min-width: 120px;
    border: 1px solid #222;
}

.test-tbl tbody tr td:nth-child(1) {
    /*the first cell in each tr*/
    position: relative;
    display: block;
    /*seperates the first column from the tbody*/
    height: 56px;
    z-index: 50;
}

.test-tbl thead th:not(:nth-child(1)) {
    border-left: none;
}

.test-tbl thead th:not(:nth-child(1)) {
    border-left: none;
}

.test-tbl thead tr:nth-child(1) th {
    border-bottom: 0;
}

.test-tbl thead tr:nth-child(2) th:nth-child(1) {
    border-top: 0;
}

.test-tbl tbody tr:nth-child(1) td {
    border-top: 0;
}

.test-tbl tbody tr td:nth-child(3) {
    border-left: 0;
}

.test-tbl tbody tr td:nth-child(1) {
    border-bottom: 0;
}

.test-tbl tbody tr:nth-child(odd) {
    background-color: #EAEAEA;
}

.test-tbl tbody tr:nth-child(odd) td:nth-child(1) {
    background-color: #EAEAEA;
}

.test-tbl tbody tr:nth-child(even) td:nth-child(1) {
    background-color: #ffffff;
    margin-bottom: -1px;
    border-bottom: 1px solid #000;
}

.test-tbl tbody tr:nth-child(even) {
    background-color: #ffffff;
}


.ssb-search-input {
    height: 36px;
    border-radius: 3px;
    border: 1px solid #d2d2d2;
    padding: 10px 10px;
    outline: none;
    width: 100%;
}

.scs-error-msg {
    padding: 0px 0px 16px 47px;
    margin: 10px 0 0px 0;
    font-size: 16px;
    font-weight: 300;
    margin-left: -38px;
    color: #e40f0f;
}

/* Class Card New label */
.class-status-lable {
    position: absolute;
    transform: rotate(-90deg);
    padding-left: 13px;
    padding-bottom: 15px;
    border-top-left-radius: 7px;
    border-top-right-radius: 7px;
    color: #ffffff;
    font-weight: 600;
    font-size: 12px;
}

.class-status-lable.new {
    background-color: #2934A2;
    left: -31px;
    top: 20px;
    height: 2px;
    width: 48px;
}


/** START - search bar new style - viraj **/
.section-search-advance-search>button.md-fab {
    position: absolute;
    bottom: -25px;
    right: 25px;
}

.section-search-advance-search>md-fab-speed-dial {
    position: absolute;
    bottom: -25px;
    right: 25px;
}

.section-search-advance-search {
    height: 44px;
    margin-left: -15px;
    margin-right: -15px;
    padding-top: 32px;
    background-color: #dbdfe6;
    -webkit-box-shadow: 0px 1px 3px 0px rgba(0, 0, 0, 0.4);
    -moz-box-shadow: 0px 1px 3px 0px rgba(0, 0, 0, 0.4);
    box-shadow: 0px 1px 3px 0px rgba(0, 0, 0, 0.4);
    position: relative;

}

.section-search-advance-search button {
    background-color: #f7f7f7;
}

.section-search-row {
    height: 57px;
    margin-top: 0px;
    margin-left: -15px;
    margin-right: -15px;

    /* background-color: #57b3f9; */
    background-color: #5188f1;
    /* changed by shanika*/
    padding: 7px 0 4px 0;
}

.section-search-bar {
    height: 50px;
    margin-top: 0px;
    margin-left: -15px;
    margin-right: -15px;

    /* background-color: #57b3f9; */
    background-color: #5188f1;
    /* changed by shanika*/
    padding: 7px 0 4px 0;
}

.section-search-bar .col-md-8 {
    padding: 0 6px;
}

.md-button.section-search-bar-button {
    /* color: #4285f4; */
    color: #ffffff;
}

/** END- search bar new style - viraj **/



/** START- common-overwriting styles **/
.pad-right-10 {
    padding-right: 10px;
}

.fa-plus {
    padding-top: 15px;
}

.navbar-custom-menu>.navbar-nav>li>.dropdown-menu.header-info-box {
    position: absolute;
    right: -90px;
    margin-top: 3px;
}

.navbar-custom-menu>.navbar-nav>li>.dropdown-menu.header-info-box.user-login {
    position: absolute;
    right: 10px;
    margin-top: 3px;
}

@media only screen and (max-width : 992px) {
    .navbar-custom-menu>.navbar-nav>li>.dropdown-menu.header-info-box {
        right: 10px;
    }
}

@media only screen and (max-width : 768px) {

    .navbar-custom-menu>.navbar-nav>li>.dropdown-menu.header-info-box.user-login,
    .navbar-custom-menu>.navbar-nav>li>.dropdown-menu.header-info-box {
        margin-top: 48px;
    }

}

/** END- common-overwriting styles **/



/** START- list-student styles **/

.list-students md-card {
    margin: 0 !important;
    border-top: 1px solid #e0e0e0;
}

.list-students .user-prof-aboutme {
    padding: 10px 0 !important;
}

@media (min-width: 320px) and (max-width: 767px) {

    .list-students md-checkbox:first-child {
        margin: 0 10px 0 0 !important;
        width: 18px !important;
    }

    .list-students .md-avatar {
        margin: 10px 10px 10px 0 !important;
    }

    .list-students button.option-btn {
        display: none;
    }

    .list-students .md-label {
        min-width: 100px;
    }

    .list-students md-checkbox.select-all:first-child {
        margin-left: 31px !important;
        margin-bottom: 15px !important;
    }

}

@media only screen and (max-width : 992px) {
    .section-search-row .col-md-6 {
        width: 70% !important;
        float: left;
    }

    .section-search-row .col-md-1.reset,
    .section-search-row .col-md-1.mail {
        display: block !important;
        width: 15% !important;
        float: left;
    }

    .section-search-row .col-md-1,
    .section-search-row .col-md-2 {
        display: none;
    }
}

/** END- list-student styles **/


/** START- class-manager styles **/

@media only screen and (min-width : 1440px) {
    .class-manager .class-card {
        width: 20% !important;
    }
}

.blink_me {
    animation: blinker 1s linear infinite;
}

@keyframes blinker {
    0% {
        opacity: 1;
    }

    80% {
        opacity: 1;
    }

    100% {
        opacity: 0;
    }
}

.rectangle {
    max-width: 240px;
    height: 111px;
    background-color: #f1f1f1;
    border: 1px solid #8f8f88;
    padding-left: 12px;
}


/* Navbar input style
Refactor to include the following styles in the proper place */

.navbar md-select .md-select-value,
.section-search-row md-select .md-select-value {
    border-color: white;
}

.navbar .md-select-value .md-select-icon:after,
.section-search-row .md-select-value .md-select-icon:after {
    color: white !important;
}

.navbar .md-select-value :first-child,
.navbar md-input-container .md-placeholder,
.navbar md-input-container label:not(.md-no-float),
.section-search-row .md-select-value :first-child,
.section-search-row md-input-container .md-placeholder,
.section-search-row md-input-container label:not(.md-no-float) {
    color: #fff;
}

.navbar md-select:not([disabled]):focus .md-select-value,
.section-search-row md-select:not([disabled]):focus .md-select-value {
    border-bottom-color: white;
    color: rgba(0, 0, 0, 0.87);
}

.module-section-user-info-card select {
    position: absolute;
    right: 0;
    top: 20px;
    cursor: pointer;
    border-width: 1px;
    border-style: none;
    border-bottom-style: solid;
    border-bottom-color: rgba(0, 0, 0, 0.4);
    height: 30px;
}


/** Upload mark table **/

.uploadMarkTable {
    position: relative;
    width: 700px;
    overflow: hidden;
    border-collapse: collapse;
}

/*thead*/

.uploadMarkTable thead {
    position: relative;
    display: block;
    /*seperates the header from the body allowing it to be positioned*/
    width: 700px;
    overflow: visible;
}


table.uploadMarkTable th.md-column>* {
    font-size: 14px;
    font-weight: 600;
    font-family: roboto;
    color: rgba(0, 0, 0, 0.54);
}

table.uploadMarkTable td.md-cell {
    color: rgba(0, 0, 0, 0.87) !important;
    font-size: 14px !important;
    font-family: roboto;
    font-weight: 500;
}

table.uploadMarkTable th.md-column.md-active>span {
    color: rgba(0, 0, 0, 0.87);
}

/*tbody*/

.uploadMarkTable tbody {
    position: relative;
    display: block;
    width: calc(98vw - 50px);
    top: -2px;
    max-height: calc(95vh - 330px);
    overflow: auto;
}

.uploadMarkTable tbody td {
    width: 110px;
}

.uploadMarkTable td,
.uploadMarkTable th {
    padding: 10px 10px 10px 16px;
}

table.uploadMarkTable th.md-column.md-active>span {
    color: rgba(0, 0, 0, 0.87);
}

/* ANUU */
/* Main wrapper bottom scrollbar skip */
.wrapper.row-offcanvas.row-offcanvas-left {
    width: 100%;
    overflow: hidden;
    box-sizing: border-box;
    max-width: 100%;
}

/* Modal window */
.view-modal {
    position: relative;
    max-width: 80%;
    width: 100% !important;
}

/* end modal window */

/* Show hide on desktop and mobile */
/* for desktop */
.desktop-view {

}

/* for mobile */
.mobile-view {
    display: none;
}

.mobile-view-sm {
    display: none;
}

/* end Show hide on desktop and mobile */

.status-row {
    margin-bottom: 0;
}

.ast-reakdown {
    margin-top: 0;
}

/* Student course manager */
.title-left {
    float: left;
    margin: 0;
}

.title-right {
    float: right;
}

.pending-credits {
    display: inline;
}

.pending-credits span {
    float: left;
}

.mc-wrapper {

}

.sp-profile--box {
    width: auto;
    display: inline-block;
    max-width: 100%;
}

/* end Student course manager */

/* Media query */
@media screen and (max-width: 1024px) {
    .view-modal {
        width: 100% !important;
        max-width: 95%;
        max-height: 100%;
        position: absolute;
        top: 160px;
    }
}

@media screen and (max-width: 991px) {
    .sp-student-course {
        float: none;
        margin-top: 20px;
    }

    md-select {
        /* display: none;*/
    }
}

@media screen and (max-width: 990px) {
    .status-row {
        margin-bottom: 30px;
    }

    .ast-breakdown {
        margin: 20px 0;
    }
}

@media screen and (max-width: 768px) {
    .view-modal {
        position: absolute;
        top: 20px;
    }

    .pending-credits {
        display: block;
        width: 100%;
    }

    .pending-credits span {
        margin-top: 5px !important;
        margin-left: 0 !important;
    }
}

@media screen and (max-width: 767px) {
    .desktop-view {
        display: none;
    }

    .mobile-view {
        display: block;
    }

    .mobile-view-sm {
        display: none;
    }

    .pending-credits {
        display: block;
        width: 100%;
    }

    .pending-credits span {
        margin-top: 5px !important;
        margin-left: 0 !important;
    }

    .title-left {
        width: 100%;
        margin-bottom: 10px;
    }

    .title-right {
        float: left;
        width: 100%;
    }

    .title-right .area-status {
        float: left;
        margin-right: 10px;
        margin-top: 5px;
    }

    .title-left h3 {
        width: 100%;
    }

    .view-modal {
        position: absolute;
        top: 0;
        left: 0;
        right: 0;
        bottom: 0;
        z-index: 100;
        overflow: auto;
        overflow-x: hidden;
        width: 100% !important;
        max-width: 100%;
        max-height: 100%;
    }
}

@media screen and (max-width: 420px) {
    .sp-student-course h3 {
        font-size: 18px;
    }

    .sps-tab_heading h3 {
        font-size: 13px;
    }

    .title-right .area-status {
        min-width: auto;
    }

    .mc-wrapper {
        display: none;
    }

    .sp-student-course {
        min-width: 320px;
    }

    .md-table th {
        font-size: 13px;
    }

    .sp-profile--box {
        max-width: 94%;
    }

    .navbar-custom-menu {
        width: 100%;
        padding-left: 35px;
        box-sizing: border-box;
    }

    .navbar-custom-menu>.navbar-nav {
        /* float: left; */
    }
}

@media screen and (max-width: 360px) {
    .desktop-view {
        display: none;
    }

    .mobile-view {
        display: none;
    }

    .mobile-view-sm {
        display: block;
    }

    .md-table.ast-breakdown th {
        padding: 10px 8px;
    }
}

/* Media query END */
/* end ANUU */

.list-student-filter-button {
    position: relative;
    bottom: 26px;
    left: 33px;
    box-shadow: 0 0px 2px 0 rgba(0, 0, 0, 0.26);
    border: solid 1px #3b78e7;
    margin-right: 10px;
}

input::-webkit-outer-spin-button,
input::-webkit-inner-spin-button {
    /* display: none; <- Crashes Chrome on hover */
    -webkit-appearance: none;
    margin: 0;
    /* <-- Apparently some margin are still there even though it's hidden */
}

input[type=number] {
    -moz-appearance: textfield;
    /* Firefox */
}



/*---- Video Lib ----*/
.lesson-list {
    border-bottom: 1px solid #cbc7c7;
    padding: 30px 20px 30px 20px;
    background-color: #ffffff;
}

.ll-heading {
    width: 100%;
    white-space: nowrap;
    text-overflow: ellipsis;
    overflow: hidden;
    margin-bottom: 12px;
}

.ll-lesson-name {
    margin: 0;
    font-size: 18px;
    font-weight: 400;
    margin: 0 0 6px 0;
}

.ll-lesson-desc {
    margin: 0 0 40px 0;
}

.ll-lesson-topics {
    margin: 0 100px;
}

h5.ll-chapter-progress {
    font-size: 12px;
    margin: 0 0 4px 0;
    font-weight: 400;
    color: #666666;
}

h5.ll-chapter-progress strong {
    font-weight: 500;
}

.lllt-item {
    display: block;
    margin: 0 0 18px 0;
}

.topic-actions {
    display: none;
    margin: 0 10px;
}

.lllt-item:hover .topic-actions {
    display: block;
}

.lesson-list:last-child {
    border: none;
}

.lesson-header {
    padding: 14px 10px;
    background-color: #5188f1;
}

.lh-back-btn {
    width: 240px;
    float: left;
}

.lh-title {
    float: left;
}

.lh-title h3 {
    margin: 0;
    color: #ffffff;
    font-size: 22px;
    font-weight: 300;
}

.lh-back-btn a {
    color: #ffffff !important;
    font-size: 18px;
}

.lesson-container {
    display: flex;
    flex-direction: row;
    width: 100%;
    /* height: calc(100vh - 115px);  - by shanika */
    height: calc(100vh - 115px);
    background-color: #ffffff;
}

.lc-navigation {
    width: 32%;
    height: 100%;
    border-right: 1px solid #d8d5d5;
    background-color: #F6F7F7;
    padding: 18px;
    overflow: auto;
    float: left;
}

.lc-content {
    float: left;
    width: calc(100% - 32%);
    position: relative;
    height: 95%;
    overflow-y: auto;
    /* added by shanika */
}

@media screen and (max-width: 768px) {
    .lesson-container {
        display: flex;
        flex-direction: column;
    }

    .lc-navigation {
        width: 100%;
        height: auto;
        order: 2;
    }

    .lc-content {
        width: 100%;
        height: auto;
        overflow-y: visible;
        order: 1;
    }
}


ul.lc-list {
    margin: 0;
    padding: 0;
    list-style: none;
}

ul.lc-list li {
    /* margin-left: 21px; */
    padding: 5px 0 5px 30px;
    position: relative;
}

ul.lc-list li a {
    font-size: 15px;
}

ul.lc-list li.done:before {
    content: "\f111";
    position: absolute;
    width: 24px;
    height: 30px;
    font-family: fontawesome;
    color: #437726;
    font-size: 23px;
    left: 3px;
    top: 8px;
}

ul.lc-list li.done:after {
    content: "";
    width: 1px;
    height: 100%;
    position: absolute;
    /* border-left: 2px solid #4ec60b; */
    left: 10px;
    top: 20px;
    z-index: 1;
}

ul.lc-list li:before {
    content: "\f111";
    position: absolute;
    width: 24px;
    height: 30px;
    font-family: fontawesome;
    color: transparent;
    font-size: 23px;
    left: 3px;
    top: 8px;
    z-index: 2;
    padding-left: 10px;
}

ul.lc-list li:after {
    content: "";
    width: 1px;
    height: 100%;
    position: absolute;
    /* border-left: 1px dotted #9f9f9f; */
    left: 10px;
    top: 20px;
    z-index: 1;
}

ul.lc-list li:last-child:after {
    content: "";
    width: 0px;
    height: 100%;
    position: absolute;
    border-left: none;
    left: 10px;
    top: 20px;
    z-index: 1;
}

ul.lc-list li.active {
    border-radius: 2px;
    background-color: #c9d0dc;
}

ul.lc-list li.active a {
    font-weight: 600;
}

.lcc-content {
    width: 100%;
    /* height: 100%;  - by shanika */
    height: 60%;
    padding: 5px 25px 0px 25px;
}

.lcc-sidebar {
    position: absolute;
    right: 0;
    top: 0;
    width: 250px;
    height: 100%;
    background-color: #f6f7f7;
    border-left: 1px solid #d8d5d5;
    padding: 18px;
}

.lccc-rich-area {
    width: 100%;
    height: 100%;
    overflow: auto;
    padding: 18px;
    position: relative;
}

h3.lccs-title {
    font-size: 16px;
    font-weight: 300;
    margin: 0 0 10px 0;
}

ul.lccs-downloads {
    margin: 0;
    padding: 0;
    list-style: none;
}

ul.lccs-downloads li {
    padding: 4px 0 4px 20px;
    position: relative;
    width: 100%;
    text-overflow: ellipsis;
    overflow: hidden;
}

ul.lccs-downloads li.attachment:after {
    content: "\f019";
    position: absolute;
    font-family: fontawesome;
    left: 0;
    top: 3px;
    color: #3c96d3;
}

ul.lccs-downloads li.url:after {
    content: "\f0c1";
    position: absolute;
    font-family: fontawesome;
    left: 0;
    top: 3px;
    color: #3c96d3;
}

.lccc-student-work-btn {
    display: inline-block;
    padding: 10px 10px;
    background-color: rgba(37, 37, 37, 0.87);
    color: #ffffff;
    position: absolute;
    bottom: -40px;
    right: 0;
    cursor: pointer;

}

.lccc-student-work-btn i {
    transition: All 0.8s ease;
    -webkit-transition: All 0.8s ease;
    -moz-transition: All 0.8s ease;
    -o-transition: All 0.8s ease;
}

.smart-board-header.text-left {
    padding-bottom: 10px;
    border-bottom: 1px dashed gray;
    margin-bottom: 10px;
}

.smart-boards {
    display: inline-block;
    padding: 10px;
    background-color: rgba(0, 0, 0, 0.51);
    border-radius: 2px;
    color: #ffffff;
}

.lcc-student-works {
    position: absolute;
    width: 100%;
    height: 0px;
    top: 0;
    left: 0;
    background: rgb(65, 65, 65);
    transition: All 0.8s ease;
    -webkit-transition: All 0.8s ease;
    -moz-transition: All 0.8s ease;
    -o-transition: All 0.8s ease;
    z-index: 10000;
}

.lcc-sw-content {
    height: 100%;
    overflow: auto;
    padding: 30px;
    display: none;
}

.videoWrapper {
    position: relative;
    /* padding: 3% 46% 43.26% 30%;	 */
    padding: 3% 46% 57.26% 30%;
}

.videoWrapper iframe {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 90%;
    border: solid #b9b9b9 2px;
}

/* message view */
.email-only,
.notification-only {
    padding: 12px;
}

.sms-only {
    font-size: 1.86em;
    padding: 8px 16px 11px;
}

.email-notification.email {
    position: relative;
    margin: 0px 9px 0px 15px;
    top: 9px;
    left: -3px;
}

.email-notification.notification {
    font-size: 14px;
    position: relative;
    bottom: 21px;
    left: 23px;
    background-color: #fff;
}

.email-sms.email {
    position: relative;
    margin: 0px 9px 0px 15px;
    top: 9px;
    left: -3px;
}

.email-sms.sms {
    font-size: 21px;
    position: relative;
    bottom: 17px;
    left: 25px;
    background-color: #fff
}

.sms-notification.sms {
    position: relative;
    font-size: 2em;
    margin: 0px 15px 0px 15px;
    top: 9px;
}

.sms-notification.notification {
    font-size: 14px;
    position: relative;
    bottom: 23px;
    left: 19px;
    background-color: #fff;
}

.email-sms-notification.email {
    position: relative;
    margin: 0px 9px 0px 15px;
    top: 9px;
    left: -3px;
}

.email-sms-notification.sms {
    font-size: 20px;
    position: relative;
    bottom: 3px;
    left: 25px;
    background-color: #fff;
}

.email-sms-notification.notification {
    font-size: 13px;
    position: relative;
    bottom: 20px;
    left: 11px;
    background-color: #fff;
}

.msg-cont-long {
    margin-left: 12px;
    margin-top: 10px;
    padding: 0px;
    max-width: 350px;
    overflow: hidden;
    text-overflow: ellipsis;
    font-weight: 700;
}

.msg-cont-short {
    margin-left: 12px;
    margin-top: 10px;
    padding: 0px;
    max-width: 350px;
    overflow: hidden;
    text-overflow: ellipsis;
}



/* Lead portal */
.cc-profile-img {
    width: 100%;
    min-height: 115px;
}

.cc-profile-img-container {
    position: relative;
    border-radius: 2px;
}

.cc-profile-img-actions__btn {
    position: absolute;
    left: 0;
    bottom: 0;
    padding: 5px 10px;
    width: 100%;
    background: rgba(0, 0, 0, 0.5);
    color: #fff;
    border: none;
    text-transform: uppercase;
}

.cc-separator-label {
    margin: 12px;
}

.row.container-fluid.lead-profile label {
    font-size: 14px;
}


.student-doc-status.new {
    color: #fff;
    padding: 0 4px;
    margin: 0 4px;
    font-size: 13px;
    border-radius: 7%;
    bottom: 20px;
    right: 137px;
    background-color: #007bff;
    height: 30px;
}

.student-doc-status.updated {
    color: #fff;
    padding: 0 4px;
    margin: 0 4px;
    font-size: 13px;
    border-radius: 7%;
    bottom: 20px;
    right: 137px;
    background-color: #ca7a1f;
    height: 30px;
}

.student-doc-view-all {
    max-width: 60px;
    background-color: #5188F1;
    padding-left: 4px;
    padding-top: 2px;
    border-radius: 7px;
    color: white;
    cursor: pointer;
}

.plagiarism-enable-lbl {
    font-weight: 500;
    margin: -5px -10px 0 0;
    color: #fff;
    display: flex;
    background-color: #a22e2e;
    padding: 3px;
}

.plagiarism-warning {
    border: 1px solid #f3e4cc;
    padding: 5px;
    background-color: #f3e4cc;
}

.student-submition-box {
    margin-top: 4px;
    padding: 13px;
    border: 1px solid #888383;
}

.cls-result-report-tech-name {
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    max-width: 150px;
}

.student-transcript-tr{
    padding-top: 7px;
    background-color: #ecebec;
}

.student-transcript-detail{
    margin-left: 15px;
    width: 76%;
    bottom: 13px;
    margin-top: 10px;
}
.student-transcript-detail-bottom-line{
    border-bottom-width: 1px;
    border-bottom-style: solid;
    border-bottom-color: black;
    width: 98%;
    margin-left: 13px;
}
.logo{
    width: 215px;
    height: 77px;
}
.logo-container{
    right: 42px;
}





.loader {
    border: 3px solid #f3f3f3;
    border-radius: 50%;
    border-top: 3px solid #288edf;
    /*border-bottom: 4px solid #288edf;*/
    width: 25px;
    height: 25px;
    -webkit-animation: spin 1s linear infinite;
    animation: spin 1s linear infinite;
    margin-left: 20%;
}

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

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

.class-batch {
    border-radius: 5px;
    font-weight: 500;
    padding: 1px 4px;
    font-size: 12px;
    color: #484848;
    border: 1px solid #484848;
    display: inline-block;
    max-width: 100%;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    vertical-align: middle;
}

.class-manager .mdl-card__title {
    flex-direction: column;
    align-items: flex-start;
    position: relative;
}

.class-manager .mdl-card__title-text {
    display: block;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    padding-right: 32px;
    width: 100% !important;
    box-sizing: border-box;
}

.class-status-row {
    width: 100%;
    height: 22px;
    overflow: hidden;
    white-space: nowrap;
}

/* ── Class card body ─────────────────────────────── */
.class-card-date {
    font-size: 13px;
    color: #555;
    margin-bottom: 6px;
}

.class-card-teachers-hdr {
    display: flex;
    justify-content: space-between;
    align-items: center;
    font-size: 13px;
    margin-bottom: 4px;
}

.class-card-medium-code {
    font-size: 14px;
    font-weight: 600;
    text-transform: uppercase;
}

.class-status-card .card-attrs {
    font-size: 15px;
}

.class-status-card .card-attrs small {
    font-size: 14px;
}


.tbl-lead {
  border-right: 2px solid #fff;
  border-left: 2px solid #fff;
  text-align: center;
  font-weight: 600 !important;
}

.tbl-lead.awakenedlead {
    background: #ffca28;
}
.tbl-lead.unattended {
    background: #ff5252 !important;
}

.tbl-lead.activelead {
    background: #3b78e7;
}
.tbl-lead.nonprog {
    background: #543092;
}

.tbl-lead.converted {
    background: #9ccc65;
}

.tbl-lead.awakenedlead-shaded {
    background: #fff59d;
    color: #403d3d;
    font-weight: bold;
}

.tbl-lead.unattended-shaded {
    background: #ffcdd2 !important;
    color: #403d3d;
    font-weight: bold;
}

.tbl-lead.activelead-shaded {
    background: #c5cae9;
    color: #403d3d;
    font-weight: bold;
}

.tbl-lead.nonprog-shaded {
    background: #d7ccc8;
    color: #403d3d;
    font-weight: bold;
}

.tbl-lead.converted-shaded {
    background: #dcedc8;
    color: #403d3d;
    font-weight: bold;
}

@media only screen and (max-width: 1200px) {

.tbl-lead.converted,
.tbl-lead.converted-shaded {
  display: none;
}
}

  .legend {
    list-style: none;
    display: flex;
    justify-content: space-between;
    margin-top: 15px;
    padding-left: 10px;
  }

  .legend li {
    float: left;
    margin-right: 10px;
    font-size: 11px;
    color: #7d7b7b;
  }

  .legend span {
    border-radius: 3px;
    /* border: 1px solid #ccc; */
    float: left;
    width: 12px;
    height: 12px;
    margin: 2px;
  }

  .legend .selfregistered {
    background-color: #7570b3;
  }

  .legend .adminregistered {
    background-color: #d95f02;
  }

  .legend .converted {
    background-color: #1b9e77;
  }
  svg:not(:root) {
    overflow: initial;
  }

  .qualification-chip{
    border: solid 1px;
    border-radius: 4px;
    background: #5b5bb1;
    padding: 5px;
    margin-right: 4px;   
  }

  /* QR Attendance style */
  .qr-attendance-summarybox{
        border: #e7e9f5 1px solid;
        height: 200px;
        padding-top:13px;
  }
  .qr-attendance-summarytext{
    padding-left: 15px;
    padding-top: 1px;
  }
  .qr-attendance-code{
        border: #d0d5f1 1px solid;
        height: 200px;
        width: 200px;
        margin-left: 25%;

  }

  .qr-attendance-stu-summary-warning{
    border: #b2b9e2 1px solid;
    background: #fbfbfb;
    height: 75px;
    border-top: 4px solid #f39c12;
  }

    .qr-attendance-stu-summary-box{
        border: #556aa0 1px dashed;
        padding-top: 30px;
        min-height: 264px;
        overflow: auto;
        padding-bottom: 30px;
        max-height: 500px;
    }

  .qr-attendance-stu-img{
    width: 50px;
    height: 50px;
    float: left;
    margin-right: 9px;
  }

  .qr-class-status {
      height: 18px;
      top: 1px;
      right: 15px;
      position: absolute;
      background-color: #f39c12 ;
      border-radius: 0px;
      color: white;
      font-size: 14px;
      padding: 0px 4px;
  }

.qr-attendance-stu-summary-success{
    border: #b2b9e2 1px solid;
    background: #fbfbfb;
    height: 75px;
    border-top: 4px solid #356c0a;
}

.resource-chapter-num-container {
    background-color: #e8e8e8;
    border: 1px solid #000;
    height: 26px;
    width: 27px;
    border-radius: 50%;
    position: absolute;
    left: 47px;
    top: 14px;
    z-index: 1;
}
.resource-chapter-num-container-mob {
    background-color: #e8e8e8;
    border: 1px solid #000;
    height: 20px;
    width: 20px;
    border-radius: 50%;
    position: absolute;
    left: 47px;
    top: 3px;
    z-index: 1;
}

.resource-chapter-num {
    margin: 3px 2px 0 0;
    font-weight: 600;
    font-size: 15px;
    color: #000;
    text-align: center;
}
.resource-chapter-num-mob {
    font-weight: 600;
    font-size: 15px;
    color: #000;
    text-align: center;
}

.chapter-menu-card {
    margin: 0 0 2px 0 !important;
    padding: 3px 10px 10px 10px !important;
    list-style: none !important;
    border: 1px solid #d2d4d8 !important;
    border-radius: 2px !important;
}
.chapter-menu-name {
    margin-bottom: 3px;
    display: inline-block;
    text-overflow: ellipsis;
    overflow: hidden;
    width: calc(100% - 25px);
    white-space: nowrap;
}
.chapter-menu-toggle {
    margin-top: 14px;
    margin-left: 7px;
    position: relative;
    font-size: 17px;
    color: #595a5d;
    cursor: pointer;
}

.vc-provider {
    top: -3px;
    height: 22px;
    border-radius: 12px;
    padding: 3px 7px;
    font-size: 11px;
    font-weight: 500;
    text-transform: uppercase;
    color: #000;
    position: relative;
    background-color: #fff;
    border: 1px solid #000;
}
.vc-provider-card {
    top: 1px;
    margin-left: 12px;
    border-radius: 14px;
    padding: 2px 10px;
    font-size: 12px;
    font-weight: 500;
    text-transform: uppercase;
    color: #fff;
    position: relative;
    background-color: #949494;
}
.vc-provider-card.scheduled {background-color: #dcc122; }
.vc-provider-card.scheduled-warn {background-color: #dcc122; }
.vc-provider-card.pending {background-color: #2196f3; }
.vc-provider-card.waiting {background-color: #1977c1;}
.vc-provider-card.active {background-color: #4caf50; }
.vc-provider-card.completed {background-color: #949494; }
.vc-provider-card.expired {background-color: #641177; }
.vc-provider-card.delayed {background-color: #a94848; }
.vc-provider-card.canceled {background-color: #030e16;}

.vc-provider-card.branch.scheduled {color: #dcc122;background-color: transparent; }
.vc-provider-card.branch.scheduled-warn {color: #dcc122;background-color: transparent; }
.vc-provider-card.branch.pending {color: #2196f3;background-color: transparent; }
.vc-provider-card.branch.waiting {color: #1977c1;background-color: transparent;}
.vc-provider-card.branch.active {color: #4caf50;background-color: transparent; }
.vc-provider-card.branch.completed {color: #949494;background-color: transparent; }
.vc-provider-card.branch.expired {color: #641177;background-color: transparent; }
.vc-provider-card.branch.delayed {color: #a94848;background-color: transparent; }
.vc-provider-card.branch.canceled {color: #030e16;background-color: transparent;}

.vc-status {
    height: 22px;
    border-radius: 12px;
    padding: 0px 7px;
    font-size: 11px;
    font-weight: 500;
    text-transform: uppercase;
    color: #fff;
}
.vc-status.scheduled {background-color: #dcc122; }
.vc-status.scheduled-warn {background-color: #dcc122;}
.vc-status.pending {background-color: #2196f3; }
.vc-status.waiting {background-color: #1977c1;}
.vc-status.active {background-color: #4caf50; }
.vc-status.completed {background-color: #949494; }
.vc-status.expired {background-color: #641177; }
.vc-status.delayed {background-color: #a94848; }
.vc-status.canceled {background-color: #030e16;}

.tbl-lead.vc-pendingall {background: #ffca28;width: 33.33%;}
.tbl-lead.vd-pendingtoday {background: #3b78e7 !important;width: 33.33%;}
.tbl-lead.vc-active {background: #9ccc65;width: 33.33%;}

.vc-teacher-session-card{
    float: right;
    margin-right: 130px;
    margin-top: -38px;
    border: 1px solid #bbd2e6;
    background: #f0f4f7;
    width: 150px;
    height: 95px;
}

.vc-dashboard-widget-list {
    margin: 0 2px 3px;
    padding: 0px 5px;
    color:#676767;
    position: relative;
    height: 52px;
}
.vc-dashboard-widget-data-top{
    display: flex;
    justify-content: space-between;
    margin-bottom: 0px;
}
.vc-dashboard-widget-data-bottom{
    position: relative;
    display: flex;
    justify-content: space-between;
    bottom: 10px;
}
.vc-dashboard-widget-data-top-classname {
    overflow: hidden;
    white-space: nowrap;
    text-overflow: ellipsis;
    width: 60%;
}
.vc-dashboard-widget-data-top-classstatus {
    overflow: hidden;
    white-space: nowrap;
    text-overflow: ellipsis;
    width: 40%;
}
.vc-sessioncard-top.scheduled{border-top: 4px solid #dcc122;}
.vc-sessioncard-top.scheduled-warn{border-top: 4px solid #dcc122;}
.vc-sessioncard-top.pending{border-top: 4px solid #2196f3;}
.vc-sessioncard-top.waiting{border-top: 4px solid #1977c1;}
.vc-sessioncard-top.active{border-top: 4px solid #4caf50;background-color: transparent !important;}
.vc-sessioncard-top.completed{border-top: 4px solid #949494;}
.vc-sessioncard-top.delayed{border-top: 4px solid #a94848;}
.vc-sessioncard-top.expired{border-top: 4px solid #641177;}
.vc-sessioncard-top.canceled{border-top: 4px solid #030e16;}

.vc-sessioncard-status {
    height: 21px;
    top: -1px;
    right: 0px;
    position: absolute;
    border-radius: 0px;
    color: white;
    font-size: 14px;
}
.vc-sessioncard-status.scheduled {background-color: #dcc122; }
.vc-sessioncard-status.scheduled-warn {background-color: #dcc122; }
.vc-sessioncard-status.pending {background-color: #2196f3; }
.vc-sessioncard-status.waiting {background-color: #1977c1; }
.vc-sessioncard-status.active {background-color: #4caf50; }
.vc-sessioncard-status.completed {background-color: #949494; }
.vc-sessioncard-status.delayed {background-color: #a94848; }
.vc-sessioncard-status.expired {background-color: #641177; }
.vc-sessioncard-status.canceled {background-color: #030e16; }

.card__student-count {
    position: absolute;
    top: 0px;
    font-size: 19px;
}
.card__student-count.scheduled {color: #dcc122; }
.card__student-count.scheduled-warn {color: #dcc122; }
.card__student-count.pending {color: #2196f3; }
.card__student-count.waiting {color: #1977c1; }
.card__student-count.active {color: #4caf50;background-color: transparent; }
.card__student-count.completed {color: #949494; }
.card__student-count.delayed {color: #a94848; }
.card__student-count.expired {color: #641177; }
.card__student-count.canceled {color: #030e16; }

.isToday {
    margin: 12px -14px;
    background-color: #d3f4e5;
    border: 1px solid #9EBBAC;
}

.vc-session-time{
    padding-top: 8px;
}
.vc-student-session-card{
    float: right;
    margin-right: 130px;
    margin-top: -15px;
    border: 1px solid #bbd2e6;
    background: #f0f4f7;
    width: 150px;
    height: 45px;
}
.error-on-dialog {
    min-width: 225px;
    position: absolute;
    padding: 5px;
    bottom: 57px;
    font-size: 14px;
    font-weight: 500;
    background-color: #d4a0a0;
    color: #b10808;
    border: 1px solid #b10808;
    right: 38px;
    left: 22px;
}
.warn-on-dialog {
    min-width: 225px;
    position: absolute;
    padding: 5px;
    bottom: 57px;
    font-size: 14px;
    font-weight: 500;
    background-color: #f7e9b3;
    color: #e8910f;
    border: 1px solid #e8910f;
    right: 38px;
    left: 22px;
}

/**
* resource card
 */
@media only screen and (min-width : 1440px) {
    .class-manager .resource-card {
        width: 20% !important;
    }
}
.resource-status-card {
    min-height: 112px;
    width: 100%;
    margin-top: 15px;
    margin-bottom: 15px;
}
.resource-card-name {
    margin: 10px 0 6px 0;
}

.resource-card-bottom {
    margin: 12px 0;
    font-size: 13px;
    display: flex;
    justify-content: space-between;
    bottom: -9px;
    position: relative;
}

.resource-card-img {
    margin-top: 15px;
    height: 70px;
    width: 70px;
}

.resource-card-status {
    margin: 6px 6px 0 0;
    border-radius: 5px;
    font-weight: 500;
    padding: 2px 4px;
    font-size: 12px;
    color: #ffffff;
}

.resource-card-status.files {
    background-color: #7F7F84;
    cursor: pointer;
}

.resource-card-status.links {
    background-color: #c5b819;
    cursor: pointer;
}

.resource-card-status.videos {
    background-color: #800080;
    cursor: pointer;
}
.resource-card-status.visible {
    background-color: #2a68da;
}
.resource-card-status.in-visible {
    background-color: #af2610;
}
.resource-viewer-header-toolbar {
    display: grid;
    text-align: center;
    background-color: #fff !important;
    padding: 12px !important;
    font-weight: 500;
    color: #2b79b9;
}
.resource-viewer-header-text {
    margin: 2px 15px;
    background-color: #deeffd;
    padding: 10px;
    border-radius: 4px;
    font-size: 22px;
    color: #1a5c92;
}

.card-btn-sec {
    padding-top: 6px;
    display: flex;
    justify-content: flex-end;
    min-height: 50px;
}
.card-btn-sec .btn-goto {
    color: #0f9d58;
    border: 1px solid #0f9d58;
    background-color: transparent;
}
.card-btn-sec .btn-goto.btn-disabled {
    border: 1px solid #cec8c8 !important;
    background-color: #f1f1f1 !important;
}
.card-btn-sec .btn-cancel {
    color: #a94848;
    border: 1px solid #a94848;
    background-color: transparent;
    margin-left: 5px;
}
.card-btn-sec .btn-cancel.btn-disabled {
    border: 1px solid #cec8c8 !important;
    background-color: #f1f1f1 !important;
}
.card-btn-sec .btn-start {
    color: #3b78e7;
    border: 1px solid #3b78e7;
    background-color: transparent;
}
.card-btn-sec .btn-start.btn-disabled {
    border: 1px solid #cec8c8 !important;
    background-color: #f1f1f1 !important;
}

.session-card {
    padding: 10px;
    box-shadow: 0 0 3px 1px rgba(119, 119, 119, 0.42);
    margin-bottom: 5px;
    background-color: white;
}

.session-card__inner-item {
    display: flex;
    align-items: center;
    justify-content: space-between;
}



.session-card-title {
    font-size: 18px;
    font-weight: 600;
    width: 80%;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}
.session-card-title.admin-mode{
    width: 60% !important;
}

@media only screen and (max-width : 600px) {
    .session-card-title.mob-view {
        white-space: unset !important;
    }
}

.m-t {
    margin: 20px 0 0 0;
}

.m-r {
    margin: 0 3px 0 0;
}

.fa-blue {
    color: #6897dc;
}

.session-card__title-right-title {
    color: #0C9D58;
    font-size: 16px;
    font-weight: 600;
}

.session-card__profile {
    width: 40px;
    height: 40px;
    border-radius: 50%;
    overflow: hidden;
    margin-right: 10px;
    margin-top: 5px;
    display: inline-block;
}
.session-card__profile img{
    width: 100%;
}
.session-card__title-right .btn-success{
    margin-right: 3px;
}
.vc-btn-success{
    border: 1px solid #0f9d58;
}
.vc-btn-success.btn-disabled {
    border: 1px solid #cec8c8 !important;
    background-color: #f1f1f1 !important;
}
.vc-btn-warning{
    border: 1px solid #a94848;
}
.vc-btn-warning.btn-disabled {
    border: 1px solid #cec8c8 !important;
    background-color: #f1f1f1 !important;
}

.vc-btn-primary{
    border: 1px solid #3b78e7;
}
.vc-btn-primary.btn-disabled {
    border: 1px solid #cec8c8 !important;
    background-color: #f1f1f1 !important;
}

.div-area-holder {
    border: 1px dashed #d5d5d5;
    padding: 10px;
    position: relative;
    margin: 20px 0;
}

.div-area-holder h4 {
    padding: 6px;
    top: -13px;
    font-size: 12px;
    margin: 0;
    font-weight: 500;
    position: absolute;
    left: 6px;
    background: #ffffff;
    color: #3d3d3d;
}

ul.student-attendance-dots {
    margin: 0;
    padding: 0;
    list-style: none;
    bottom: 0;
    left: -110px;
    position: absolute;
    top: 7px;
}

ul.student-attendance-dots li {
    width: 15px;
    height: 15px;
    border-radius: 50%;
    display: inline-block;
    margin: 0 2px;
}

ul.student-attendance-dots li.completed {
    background-color: #08ad08;
}

ul.student-attendance-dots li.pending {
    background-color: #bfc3bf;
}

ul.student-attendance-dots li.canceled {
    background-color: #eb6565;
}

ul.student-attendance-dots li.notApplicable {
    background-color: white;
    border: 1px solid #bfc3bf;
}
@media only screen and (min-width : 1921px) {
    .class-manager .session-card-lg {
        width: 20% !important;
    }
}
.md-center-tabs {
    width: unset !important;
    margin: 0 auto;
}

md-pagination-wrapper {
    width: auto;
}

.gray-background{
    border: solid #838486 1px !important;
    background-color: #b3b2b2 !important;
}
.gray-background-i{
    color: #3e3f40 !important;
}

.marked-ans-icon {
    position: relative;
    bottom: -1px;
    font-size: 17px;
    color: green;
    cursor: pointer;
}

.notice-sec {
    height: 18px;
}
.dif-height {
    min-height: 162px !important;
}
md-checkbox {
    cursor: unset;
    pointer-events: none;
}
md-checkbox .md-container {
    cursor: pointer;
    pointer-events: auto;
}

.school-name{
    margin-left:420px;
}

/*student list clear filter*/
.filter-icon-apply{
    padding-left: 0px;
    color: #3b78e7;
    font-size: 24px;
}

.filter-icon-not-apply{
    padding-left: 0px;
    color: #7a8db1;
    font-size: 24px;
}

.filter-times-icon-apply{
    font-size: 20px;
    color: #b11212;
    position: relative;
    right: 17px;
    top: 5px;
}

.filter-times-icon-not-apply{
    font-size: 20px;
    color: #a78686;
    position: relative;
    right: 17px;
    top: 5px;
}

.class-status-card.locked {
    opacity: 0.5;
    cursor: not-allowed;
}
.block-text {
    width: inherit;
    position: absolute;
    display: flex;
    justify-content: center;
    top: 162px;
    color: #737373;
    font-size: 65px;
    transform:rotate(300deg);
    -webkit-transform: rotate(320deg);
    z-index: 1;
}

/** payment status label color */

.payment_draft{
    background-color: #3e6eda !important;
}

.payment_active{
    background-color: #adac80 !important;
}

.payment_disabled{
    background-color: #a4aaaa !important;
}

.payment_paid{
    background-color: #527660 !important;
}

.payment_canceled{
    background-color: #b66879 !important;
}

.payment_downPayment{
    background-color: #23743e !important;
    margin-left: 5px;
}

td.special_day {
    background-color: #ffffff !important;
}

td.pending_session {
    background-color: #f2f2f2 !important;
}

/** assessment feedback template */
.assessment-feedback-area{
    background: #dfe6ec;
}

.table-feedback {
    border: 1px solid #979797;
}
.table-feedback > thead > tr > th,
.table-feedback > tbody > tr > th,
.table-feedback > tfoot > tr > th,
.table-feedback > thead > tr > td,
.table-feedback > tbody > tr > td,
.table-feedback > tfoot > tr > td {
    border: 1px solid #979797;
}
.table-feedback > thead > tr > th,
.table-feedback > thead > tr > td {
    border-bottom-width: 2px;
}
.grp-btn-icon {
    font-size: 15px;
    position: relative;
    bottom: 2px;
}
.msg-btn-icon {
    font-size: 16px;
    position: relative;
    bottom: 2px;
}

/* assessment log styles - start */
.asmnt-logcard-top.draft{border-top: 4px solid #2196f3;}
.asmnt-logcard-top.pending{border-top: 4px solid #800080;}
.asmnt-logcard-top.extended{border-top: 4px solid #f65d04;}
.asmnt-logcard-top.disabled{border-top: 4px solid #949494;}
.asmnt-logcard-top.completed{border-top: 4px solid #008000;}
.asmnt-logcard-top.finalized{border-top: 4px solid #f1cb00;}
.asmnt-logcard-status {
    height: 21px;
    top: -1px;
    right: 0px;
    position: absolute;
    border-radius: 0px;
    color: white;
    font-size: 14px;
}
.asmnt-logcard-status.draft{background-color: #2196f3;}
.asmnt-logcard-status.pending{background-color: #800080;}
.asmnt-logcard-status.extended{background-color: #f65d04;}
.asmnt-logcard-status.disabled{background-color: #949494;}
.asmnt-logcard-status.completed{background-color: #008000;}
.asmnt-logcard-status.finalized{background-color: #f1cb00;}

.asmnt-logcard.branch.draft {color: #2196f3;background-color: transparent; }
.asmnt-logcard.branch.pending {color: #800080;background-color: transparent; }
.asmnt-logcard.branch.extended {color: #f65d04;background-color: transparent; }
.asmnt-logcard.branch.disabled {color: #949494;background-color: transparent; }
.asmnt-logcard.branch.completed {color: #008000;background-color: transparent; }
.asmnt-logcard.branch.finalized {color: #f1cb00;background-color: transparent; }

.asmnt-logcard-type {
    top: -2px;
    margin-left: 12px;
    border-radius: 14px;
    padding: 2px 10px;
    font-size: 12px;
    font-weight: 500;
    text-transform: uppercase;
    color: #fff;
    position: relative;
    background-color: #949494;
}
.asmnt-logcard-type.draft{background-color: #2196f3;}
.asmnt-logcard-type.pending{background-color: #800080;}
.asmnt-logcard-type.extended{background-color: #f65d04;}
.asmnt-logcard-type.disabled{background-color: #949494;}
.asmnt-logcard-type.completed{background-color: #008000;}
.asmnt-logcard-type.finalized{background-color: #f1cb00;}

.asmnt-logcard-done-count {
    font-size: 23px;
    border-left: 1px solid #c4c4c4;
    padding-left: 10px;
    line-height: 1;
    float: right;
    margin-right: 0px;
    margin-left: 8px;
}
.asmnt-logcard-done-count.draft{color: #2196f3;}
.asmnt-logcard-done-count.pending{color: #800080;}
.asmnt-logcard-done-count.extended{color: #f65d04;}
.asmnt-logcard-done-count.disabled{color: #949494;}
.asmnt-logcard-done-count.completed{color: #008000;}
.asmnt-logcard-done-count.finalized{color: #f1cb00;}

.stu-asmnt-logcard-top.upcoming{border-top: 4px solid #808080;}
.stu-asmnt-logcard-top.disabled{border-top: 4px solid #949494;}
.stu-asmnt-logcard-top.pending{border-top: 4px solid #800080;}
.stu-asmnt-logcard-top.done{border-top: 4px solid #008000;}
.stu-asmnt-logcard-top.late{border-top: 4px solid #FF0000;}
.stu-asmnt-logcard-top.resubmit{border-top: 4px solid #f65d04;}
.stu-asmnt-logcard-top.finalized{border-top: 4px solid #f1cb00;}
.stu-asmnt-logcard-status {
    height: 21px;
    top: -1px;
    right: 0px;
    position: absolute;
    border-radius: 0px;
    color: white;
    font-size: 14px;
}
.stu-asmnt-logcard-status.upcoming{background-color: #808080;}
.stu-asmnt-logcard-status.disabled{background-color: #949494;}
.stu-asmnt-logcard-status.pending{background-color: #800080;}
.stu-asmnt-logcard-status.done{background-color: #008000;}
.stu-asmnt-logcard-status.late{background-color: #FF0000;}
.stu-asmnt-logcard-status.resubmit{background-color: #f65d04;}
.stu-asmnt-logcard-status.finalized{background-color: #f1cb00;}

.stu-asmnt-logcard.branch.upcoming {color: #808080;background-color: transparent; }
.stu-asmnt-logcard.branch.disabled {color: #949494;background-color: transparent; }
.stu-asmnt-logcard.branch.pending {color: #800080;background-color: transparent; }
.stu-asmnt-logcard.branch.done {color: #008000;background-color: transparent; }
.stu-asmnt-logcard.branch.late {color: #FF0000;background-color: transparent; }
.stu-asmnt-logcard.branch.resubmit {color: #f65d04;background-color: transparent; }
.stu-asmnt-logcard.branch.finalized {color: #f1cb00;background-color: transparent; }

.stu-asmnt-logcard-type {
    top: -2px;
    margin-left: 12px;
    border-radius: 14px;
    padding: 2px 10px;
    font-size: 12px;
    font-weight: 500;
    text-transform: uppercase;
    color: #fff;
    position: relative;
    background-color: #949494;
}
.stu-asmnt-logcard-type.upcoming{background-color: #808080;}
.stu-asmnt-logcard-type.disabled{background-color: #949494;}
.stu-asmnt-logcard-type.pending{background-color: #800080;}
.stu-asmnt-logcard-type.done{background-color: #008000;}
.stu-asmnt-logcard-type.late{background-color: #FF0000;}
.stu-asmnt-logcard-type.resubmit{background-color: #f65d04;}
.stu-asmnt-logcard-type.finalized{background-color: #f1cb00;}

.stu-asmnt-marks.upcoming{color: #808080;}
.stu-asmnt-marks.disabled{color: #949494;}
.stu-asmnt-marks.pending{color: #800080;}
.stu-asmnt-marks.done{color: #008000;}
.stu-asmnt-marks.late{color: #FF0000;}
.stu-asmnt-marks.resubmit{color: #f65d04;}
.stu-asmnt-marks.finalized{color: #f1cb00;}

/* assessment log styles - end */

/* Student Payment Access Control Styles */
.student-payment-table-container {
    background: white;
    border-radius: 8px;
    box-shadow: 0 2px 8px rgba(0,0,0,0.1);
    margin-top: 20px;
    overflow: hidden;
    height: calc(100vh - 300px);
    min-height: 400px;
    display: flex;
    flex-direction: column;
}

.student-payment-table-wrapper {
    flex: 1;
    display: flex;
    flex-direction: column;
    overflow: hidden;
}

.student-payment-responsive-table {
    margin-bottom: 0;
    width: 100%;
    table-layout: fixed;
}

.student-payment-checkbox-column {
    width: 32px !important;
    min-width: 32px !important;
    max-width: 32px !important;
    text-align: center !important;
    padding: 1px !important;
    position: relative;
}

.student-payment-checkbox-column md-checkbox {
    margin: 0 !important;
    display: flex !important;
    justify-content: center !important;
    align-items: center !important;
}

.student-payment-checkbox-column md-checkbox .md-container {
    width: 18px !important;
    height: 18px !important;
    min-width: 18px !important;
    min-height: 18px !important;
}

.student-payment-table-header {
    background: #f8f9fa;
    position: sticky;
    top: 0;
    z-index: 10;
}

.student-payment-table-header th {
    border-bottom: 2px solid #dee2e6;
    font-weight: 600;
    height: 48px;
    padding: 0 16px;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    vertical-align: middle;
    text-align: left;
}

.student-payment-table-body-wrapper {
    flex: 1;
    overflow-y: auto;
    overflow-x: auto;
    max-height: calc(100vh - 400px);
    min-height: 300px;
}

.student-payment-table-body tr {
    border-bottom: 1px solid #dee2e6;
    background-color: white;
}

.student-payment-table-body tr:hover {
    background-color: #f8f9fa;
}

.table > tbody > tr:nth-of-type(odd) {
    background-color: white;
}

.student-payment-table-body td {
    padding: 12px 16px;
    vertical-align: middle;
    text-align: left;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    max-width: 200px;
    vertical-align: baseline !important;
}

.student-payment-responsive-table th:nth-child(1),
.student-payment-responsive-table td:nth-child(1) { 
    width: 32px; 
    min-width: 32px; 
    max-width: 32px; 
    text-align: center !important;
    padding: 12px !important;
}

.student-payment-responsive-table th:nth-child(1),
.student-payment-responsive-table td:nth-child(1) { width: 5%; }

.student-payment-responsive-table th:nth-child(2),
.student-payment-responsive-table td:nth-child(2) { width: 20%; }

.student-payment-responsive-table th:nth-child(3),
.student-payment-responsive-table td:nth-child(3) { width: 15%; }

.student-payment-responsive-table th:nth-child(4),
.student-payment-responsive-table td:nth-child(4) { width: 15%; }

.student-payment-responsive-table th:nth-child(5),
.student-payment-responsive-table td:nth-child(5) { width: 15%; }

.student-payment-responsive-table th:nth-child(6),
.student-payment-responsive-table td:nth-child(6) { width: 20%; text-align: center; }

.student-payment-responsive-table th:nth-child(5),
.student-payment-responsive-table td:nth-child(5) {
    text-align: right;
}

div[ng-show="selectedBlockingStatus === 'non-blocked'"] .student-payment-responsive-table th:nth-child(5) {
    text-align: right;
}

div[ng-show="selectedBlockingStatus === 'blocked'"] .student-payment-responsive-table td:nth-child(5) {
    text-align: left;
}

div[ng-show="selectedBlockingStatus === 'blocked'"] .student-payment-responsive-table th:nth-child(5) {
    text-align: left;
}

.student-payment-table-body-wrapper::-webkit-scrollbar {
    width: 8px;
    height: 8px;
}

.student-payment-table-body-wrapper::-webkit-scrollbar-track {
    background: #f1f1f1;
    border-radius: 4px;
}

.student-payment-table-body-wrapper::-webkit-scrollbar-thumb {
    background: #c1c1c1;
    border-radius: 4px;
}

.student-payment-table-body-wrapper::-webkit-scrollbar-thumb:hover {
    background: #a8a8a8;
}

.student-payment-compact-pagination {
    display: flex;
    align-items: center;
    justify-content: flex-end;
    gap: 8px;
    font-size: 14px;
}

.student-payment-pagination-text {
    color: #666;
    font-size: 14px;
    white-space: nowrap;
}

.student-payment-compact-pagination .md-select {
    min-width: 60px;
}

.student-payment-pagination-btn {
    width: 32px;
    height: 32px;
    min-width: 32px;
    margin: 0 2px;
    border: 1px solid #ddd;
    background: white;
}

.student-payment-pagination-btn:hover:not([disabled]) {
    background: #f5f5f5;
}

.student-payment-pagination-btn[disabled] {
    color: #ccc;
    border-color: #eee;
}

.student-payment-pagination-btn i {
    font-size: 12px;
}

.student-payment-action-buttons-container {
    text-align: right;
    padding: 20px 16px;
}

.student-payment-action-btn {
    min-width: 140px;
    font-weight: 500;
}

.student-payment-pending-status {
    color: #ff9800;
    font-weight: 500;
    background: #fff3cd;
    padding: 4px 8px;
    border-radius: 4px;
    font-size: 12px;
}

.student-payment-view-more-btn {
    min-width: auto;
    font-size: 12px;
    padding: 6px 12px;
    margin: 0;
    height: auto;
    line-height: normal;
    text-transform: none;
}

@media (max-width: 768px) {
    body {
        overflow-x: hidden;
    }
    
    .student-payment-table-container {
        height: calc(100vh - 250px);
        margin-top: 10px;
        position: relative;
    }
    
    .student-payment-table-wrapper {
        overflow-x: auto;
        -webkit-overflow-scrolling: touch;
    }
    
    .student-payment-responsive-table {
        min-width: 850px;
        table-layout: auto;
    }
    
    .student-payment-responsive-table th,
    .student-payment-responsive-table td {
        padding: 8px 6px;
        font-size: 12px;
        white-space: nowrap;
        min-width: 100px;
    }
    
    .student-payment-responsive-table th,
    .student-payment-responsive-table td {
        width: auto;
    }
    
    .student-payment-responsive-table th.student-payment-checkbox-column,
    .student-payment-responsive-table td.student-payment-checkbox-column {
        width: 35px !important;
        min-width: 35px !important;
        max-width: 35px !important;
        padding: 8px !important;
    }
    
    .student-payment-compact-pagination {
        flex-wrap: wrap;
        gap: 4px;
        justify-content: center;
    }
    
    .student-payment-pagination-text {
        font-size: 12px;
    }
    
    .student-payment-compact-pagination .md-select {
        min-width: 50px;
    }
    
    .student-payment-pagination-btn {
        width: 28px;
        height: 28px;
        min-width: 28px;
    }
}

@media (max-width: 576px) {
    body {
        overflow-x: hidden;
        position: relative;
    }
    
    .student-payment-responsive-table {
        min-width: 750px;
    }
    
    .student-payment-responsive-table th,
    .student-payment-responsive-table td {
        min-width: 80px;
        font-size: 11px;
        padding: 6px 4px;
    }
    
    .student-payment-responsive-table th.student-payment-checkbox-column,
    .student-payment-responsive-table td.student-payment-checkbox-column {
        width: 32px !important;
        min-width: 32px !important;
        max-width: 32px !important;
        padding: 8px !important;
    }
    
    .student-payment-compact-pagination {
        flex-direction: column;
        align-items: center;
        gap: 8px;
    }
    
    .student-payment-pagination-controls-group {
        display: flex;
        align-items: center;
        gap: 4px;
    }
}

.student-payment-table-container .no-data {
    padding: 60px 20px;
    text-align: center;
    color: #666;
}

/* Student Payment Content Section */
.student-payment-content {
    min-height: 600px;
}

/* Student Payment Pagination Container */
.student-payment-pagination-container {
    text-align: right;
    margin-top: 15px;
}

/* Student Payment Pagination Select */
.student-payment-pagination-select {
    display: inline-block;
    width: 60px;
    margin: 0 10px;
}

/* Student Payment Table Container Custom Height */
.student-payment-table-container-custom {
    height: calc(100vh - 340px);
}

/* Self-Registered Students - No Data */
.list-students .no-data {
    padding: 60px 20px;
    text-align: center;
    color: #666;
    box-shadow: 0 2px 8px rgba(0,0,0,0.1);
    border-radius: 8px;
    margin-top: 20px;
}

.list-students .no-data .no-data-icon {
    display: block;
    margin: 0 auto 20px;
}

.list-students .no-data > h3 {
    display: block;
    margin-left: 0;
    font-size: 18px;
    font-weight: 400;
}

/* Self-Registered Students Table Styles */
.srs-table-container {
    background: white;
    border-radius: 8px;
    box-shadow: 0 2px 8px rgba(0,0,0,0.1);
    margin-top: 20px;
    overflow: hidden;
    height: calc(100vh - 300px);
    min-height: 400px;
    display: flex;
    flex-direction: column;
}

.srs-table-wrapper {
    flex: 1;
    display: flex;
    flex-direction: column;
    overflow: hidden;
}

.srs-list-table {
    margin-bottom: 0;
    width: 100%;
    table-layout: fixed;
}

.srs-table-header {
    background: #f8f9fa;
    position: sticky;
    top: 0;
    z-index: 10;
}

.srs-table-header th {
    border-bottom: 2px solid #dee2e6;
    font-weight: 600;
    height: 48px;
    padding: 0 16px;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    vertical-align: middle;
    text-align: left;
}

.srs-table-body-wrapper {
    flex: 1;
    overflow-y: auto;
    overflow-x: auto;
    max-height: calc(100vh - 400px);
    min-height: 300px;
}

.srs-table-body-wrapper::-webkit-scrollbar {
    width: 8px;
    height: 8px;
}

.srs-table-body-wrapper::-webkit-scrollbar-track {
    background: #f1f1f1;
    border-radius: 4px;
}

.srs-table-body-wrapper::-webkit-scrollbar-thumb {
    background: #c1c1c1;
    border-radius: 4px;
}

.srs-table-body-wrapper::-webkit-scrollbar-thumb:hover {
    background: #a8a8a8;
}

.srs-table-body tr {
    border-bottom: 1px solid #dee2e6;
    background-color: white;
}

.srs-table-body tr:hover {
    background-color: #f8f9fa;
}

.srs-table-body td {
    padding: 12px 16px;
    vertical-align: middle;
    text-align: left;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    max-width: 200px;
}

/* Column widths - 6 columns */
.srs-list-table th:nth-child(1),
.srs-list-table td:nth-child(1) { width: 18%; }

.srs-list-table th:nth-child(2),
.srs-list-table td:nth-child(2) { width: 22%; }

.srs-list-table th:nth-child(3),
.srs-list-table td:nth-child(3) { width: 12%; }

.srs-list-table th:nth-child(4),
.srs-list-table td:nth-child(4) { width: 12%; }

.srs-list-table th:nth-child(5),
.srs-list-table td:nth-child(5) { width: 12%; }

.srs-list-table th:nth-child(6),
.srs-list-table td:nth-child(6) { width: 25%; }

/* Actions column - must not clip buttons or the 3-dot menu trigger */
.srs-list-table td:last-child {
    overflow: visible;
    max-width: none;
    white-space: normal;
}

/* Student Payment Dialog Styles */
.student-payment-dialog-content {
    width: 600px;
    max-height: 500px;
}

.student-payment-dialog-padding {
    padding: 20px;
}

.student-payment-dialog-description {
    margin-bottom: 20px;
    color: #666;
}

.student-payment-dialog-question {
    margin-bottom: 20px;
    font-weight: 500;
}

.student-payment-dialog-table-container {
    max-height: 250px;
    overflow-y: auto;
    border: 1px solid #ddd;
    border-radius: 4px;
}

.student-payment-dialog-table {
    width: 100%;
    border-collapse: collapse;
}

.student-payment-dialog-table-head {
    background: #f5f5f5;
    position: sticky;
    top: 0;
}

.student-payment-dialog-table-th {
    padding: 8px 12px;
    border-bottom: 1px solid #ddd;
    font-size: 12px;
    vertical-align: middle;
}

.student-payment-dialog-table-th-left {
    text-align: left;
}

.student-payment-dialog-table-th-center {
    text-align: center;
}

.student-payment-dialog-table-th-right {
    text-align: right;
}

.student-payment-dialog-table-row {
    border-bottom: 1px solid #eee;
}

.student-payment-dialog-table-td {
    padding: 8px 12px;
    font-size: 12px;
    background-color: #FFF !important;
    vertical-align: middle !important;
}

.student-payment-dialog-table-td-left {
    text-align: left;
}

.student-payment-dialog-table-td-center {
    text-align: center;
}

.student-payment-dialog-table-td-right {
    text-align: right;
}

.student-payment-dialog-status-badge {
    color: #ff9800;
    font-weight: 500;
    background: #fff3cd;
    padding: 2px 6px;
    border-radius: 3px;
    font-size: 11px;
}

.student-payment-dialog-reason-section {
    margin-top: 20px;
}

.student-payment-dialog-input-container {
    margin: 0;
}

.student-payment-dialog-actions {
    padding: 8px 24px;
}
/* End Student Payment Access Control Styles */

.footer-action-bar {
    display: flex;
    align-items: center;
    justify-content: space-between;
    position: relative;
    top: 5px;
}

.footer-action-bar a{
    font-size: 12px;
    color: #a29f9f;
    cursor: pointer;
}

.footer-action-bar.is-hide{
    display:none;
}
.forum-btn-icon {
    font-size: 15px;
    position: relative;
}

.vc-block-text {
    width: inherit;
    position: absolute;
    display: flex;
    justify-content: center;
    top: 48px;
    color: #737373;
    font-size: 53px;
    transform:rotate(300deg);
    -webkit-transform: rotate(320deg);
    z-index: 1;
}
.vc-block{
    opacity: 0.5;
    cursor: not-allowed;
}

.student-course-intake-card-with-courseBlocking{
    float: right;
    padding-left: 100px;
}

.resource-card-block {
    opacity: 0.5;
    cursor: not-allowed;
}
.resource-card-block-text {
    width: inherit;
    position: absolute;
    display: flex;
    justify-content: center;
    top: 32%;
    color: #737373;
    font-size: 35px;
    transform:rotate(300deg);
    -webkit-transform: rotate(320deg);
    z-index: 1;
}

.student-course-intake-card-with-out-courseBlocking{
    float: right;
    padding-left: 52px;
}

.invoice-preview-total{
    margin-top: 15px;
    margin-bottom: 15px;
    font-weight: 500;
    font-family: Helvetica, Arial,sans-serif;
    color: inherit;
    vertical-align: baseline;
    font-size: 17px;
    line-height: 24px;
    text-align: right;
    padding-right: 31px;
}


.card-locked {
    opacity: 0.5;
    cursor: not-allowed;
}

.assessment-card-blocked-text {
    width: inherit;
    position: absolute;
    display: flex;
    justify-content: center;
    left: 35%;
    color: #737373;
    font-size: 65px;
    transform:rotate(300deg);
    -webkit-transform: rotate(320deg);
    z-index: 1; 
}

.profile-img-lock {
    color: #d32f2f;
    position: absolute;
    margin-top: 14px;
    margin-left: -22px;
    font-size: 30px;
}
.display-id {
    font-size: 12px;
    font-weight: 400;
}
.display-id div {
    margin-top: -4px;
    overflow: hidden;
    text-overflow: ellipsis;
}

.payment-schm-btn-icon {
    font-size: 15px;
    position: relative;
}

.class-mng-widget-prog-name {
    padding-top: 12px;
    color: #676767;
    margin: 0 0 29px 0;
    position: relative;
    top: 7px;
    width: 100%;
    border-bottom: 1px solid #d8d8d8;
    line-height: 0.1em;
    text-align: center;
}

.class-mng-widget-prog-name span {
    background: #fff;
    padding: 0 10px;
}

.cls-session-name {
    width: 60% !important;
    overflow: hidden !important;
    text-overflow: ellipsis !important;
    white-space: nowrap !important;
}
@media only screen and (max-width : 600px) {
    .cls-session-name.mob-view {
        white-space: unset !important;
    }
}

.evaluation-panel-item{
    min-height: 233px;
    max-height: 250px;
    border: 1px solid #dadada;
}
.evaluation-panel-item-list{
    padding-top: 8px;
    max-height: 170px;
    overflow: auto;
    width: 103%;
}

.evaluation-panel-item-label{
    font-weight: 500;
    padding-top: 4px;
}

.evaluation-panel-item-add-btn{
    float: right;
    margin-top: 2px;
    margin-right: -13px;
}

.grp-view-filter-button {
    position: relative;
    box-shadow: 0 0px 2px 0 rgba(0, 0, 0, 0.26);
    border: solid 1px #3b78e7;
    margin-right: 10px;
}

.non-grp {
    color: #b2b2b2;
}

.evaluation-panel-item-session-card{
    border: 1px solid;
    border-radius: 7px;
    padding: 4px;
    margin-top: 5px;
}

.evaluator-conflict {
    border: 1px solid #e8b31c;
    background: #eeefae;
    opacity: 0.5;
}

.assessment-disabled{
    opacity: 0.5;
}
.assessment-disabled-stu-count {
    margin-right: 15px;
    border: 1px solid;
    height: 40px;
    width: 40px;
    position: relative;
    display: grid;
    cursor: pointer;
}
.assessment-disabled-stu-count div {
    align-self: center;
    position: absolute;
    top: 10px;
    left: 10px;
}


.deactivated-evaluators {
 opacity: 0.5;
}

.evaluation-panel-no-data-text{
    font-weight: 100;
    margin-left: 46px;
}

.evaluation-panel-not-assigned-group{
    color: #9e7230;
    float: right;
    margin-right: 144px;
    border: 1px solid;
    border-radius: 10px;
    padding: 6px;
}

.click-disable {
    cursor: unset !important;
}

.session-card-session-type-icon{
    display: grid;
    grid-template-columns: 32px auto;
    align-items: baseline;
}
.grade-scale-version-preview {
    padding: 16px 0;
    font-weight: 300;
    border-top: 1px solid lightgray;
}

.password-strength-medium{
    border: 1px solid #e0abab;
    border-radius: 10px;
    padding: 3px;
    background-color: #e0abab;
    font-size: 12px;
}

.password-strength-good{
    border: 1px solid #bcc987;
    border-radius: 10px;
    padding: 3px;
    background-color: #bcc987;
    font-size: 12px;
}

.password-strength-great{
    border: 1px solid #63bb20;
    border-radius: 10px;
    padding: 3px;
    background-color: #63bb20;
    font-size: 12px;
}

.password-detail-tbl-th{
    min-width: 180px;
    max-width: 180px;
    text-align: center;
}

.password-detail-tbl-td{
    font-size: revert;
}

/*---- Teacher Dashboard Styles ----*/

/* Dashboard Styles */
.dashboard-bottom-row {
    margin-bottom: 30px;
}

/* Widget Styles */
.dashboard-widget {
    background: white;
    border-radius: 4px;
    box-shadow: 0 4px 12px rgba(0,0,0,0.08);
    overflow: hidden;
    height: 100%;
    border: 1px solid #e8e8e8;
}

.dashboard-widget.news-notices-widget {
    min-height: 416px;
}

.widget-header {
    background: #3B78E7;
    color: white;
    padding: 16px 20px;
    margin: 0;
}

.widget-header h3 {
    margin: 0;
    font-size: 16px;
    font-weight: 600;
    text-align: left;
}

.widget-content {
    padding: 20px;
    height: 320px;
    overflow-y: auto;
}

.widget-footer {
    padding: 8px 4px;
    text-align: right;
}

.see-all-link {
    color: #3B78E7;
    text-decoration: none;
    font-weight: 500;
    font-size: 12px;
}

.see-all-link:hover {
    text-decoration: underline;
}

/* Session Styles */
.session-group {
    margin-bottom: 4px;
}

.session-group:last-child {
    margin-bottom: 0;
}

.session-group-title {
    margin-top: 8px !important;
    color: #3B78E7 !important;
    font-size: 14px;
    font-weight: 600 !important;
    margin-bottom: 12px;
    text-align: left;
    padding-left: 0 !important;
}

.session-item {
    padding: 4px 0;
}

.session-item:last-child {
    margin-bottom: 0;
    border-bottom: none;
}

.session-content {
    display: flex;
    justify-content: space-between;
    align-items: flex-start;
}

.session-main {
    flex: 1;
    margin-right: 16px;
}

.session-title {
    color: #333;
    font-size: 14px;
    font-weight: 600;
    margin-bottom: 4px;
    line-height: 1.3;
}

.session-subject {
    color: #333;
    font-size: 12px;
    margin-bottom: 2px;
}

.session-program {
    color: #333;
    font-size: 12px;
}

.session-side {
    text-align: right;
    flex-shrink: 0;
}

.session-type {
    padding: 4px 8px;
    border-radius: 4px;
    font-size: 10px;
    font-weight: 600;
    text-transform: uppercase;
    display: inline-block;
    margin-bottom: 4px;
}

.session-type.physical {
    background: #e8f5e8;
    color: #4CAF50;
}

.session-type.virtual {
    background: #fff3e0;
    color: #FF9800;
}

.session-time {
    color: #333;
    font-size: 12px;
    font-weight: 400;
}

/* Assessment Styles */
.assessments-columns {
    display: flex;
    gap: 24px;
}

.assessment-column {
    flex: 1;
    display: flex;
    flex-direction: column;
}

.assessment-column-scroll {
    max-height: 272px;
    overflow-y: auto;
    overflow-x: hidden;
    padding-right: 4px;
}

.assessment-status {
    padding: 4px 8px;
    border-radius: 4px;
    font-size: 10px;
    font-weight: 600;
    text-transform: uppercase;
    display: inline-block;
    margin-bottom: 4px;
}

.assessment-status.in-progress {
    background: #e8f5e8;
    color: #4CAF50;
}

.assessment-status.pending {
    background: #fff3e0;
    color: #FF9800;
}

.assessment-status.finalized {
    background: #e8f5e8;
    color: #4CAF50;
}

/* Evaluation Counts Styling */
.evaluation-counts {
    display: flex;
    gap: 12px;
    align-items: center;
}

.count-item {
    display: flex;
    flex-direction: column;
    align-items: center;
    min-width: 32px;
}

.count-number {
    font-size: 16px;
    font-weight: 700;
    line-height: 1;
    margin-bottom: 2px;
}

.count-label {
    font-size: 9px;
    font-weight: 500;
    text-transform: uppercase;
    letter-spacing: 0.3px;
}

.done-count .count-number {
    color: #4CAF50;
}

.not-done-count .count-number {
    color: #333;
}

.done-count .count-label {
    color: #4CAF50;
}

.not-done-count .count-label {
    color: #666;
}

/* Loading, Error, and No Data States */
.loading-state,
.error-state,
.no-sessions-state,
.no-assessments-state,
.no-news-state {
    text-align: center;
    padding: 40px 20px;
    color: #666;
}

.loading-spinner {
    width: 32px;
    height: 32px;
    border: 3px solid #f3f3f3;
    border-top: 3px solid #2196F3;
    border-radius: 50%;
    animation: spin 1s linear infinite;
    margin: 0 auto 15px;
}

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

.error-state .error-icon {
    font-size: 32px;
    margin-bottom: 15px;
}

.no-sessions-state .no-sessions-icon,
.no-assessments-state .no-assessments-icon,
.no-news-state .no-news-icon {
    font-size: 32px;
    margin-bottom: 15px;
}

/* News & Notices Styles */
.news-item {
    margin-bottom: 20px;
    padding-bottom: 16px;
    border-bottom: 1px solid #e8e8e8;
}

.news-item:last-child {
    border-bottom: none;
    margin-bottom: 0;
}

.news-item-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 8px;
}

.news-title {
    font-size: 15px;
    font-weight: 600;
    color: #333;
    margin: 0;
}

.news-type {
    padding: 3px 8px;
    border-radius: 3px;
    font-size: 10px;
    font-weight: 600;
    text-transform: uppercase;
    background: #e3f2fd;
    color: #2196F3;
}

.news-content {
    color: #666;
    font-size: 13px;
    line-height: 1.5;
    margin: 8px 0;
}

.news-meta {
    display: flex;
    justify-content: flex-end;
}

.news-date {
    color: #999;
    font-size: 12px;
}

/* Dashboard Responsive Design */
@media (max-width: 768px) {
    .assessments-columns {
        flex-direction: column;
        gap: 16px;
    }

    .session-content {
        flex-direction: column;
        gap: 8px;
    }

    .session-side {
        text-align: left;
    }
}

@media (max-width: 576px) {
    .widget-content {
        padding: 16px;
    }

    .session-item {
        padding: 12px 0;
    }
}

/* Dashboard Widget Box Styles */
.dashboard-widget-box {
    height: 416px;
}

.dashboard-widget-box-title {
    color: #3B78E7;
}

.dashboard-widget-box-title i {
    font-size: 15px;
    margin-right: 9px;
}

.dashboard-widget-box-details {
    padding-top: 8px;
    min-height: 308px !important;
    height: 308px !important;
    overflow-x: hidden;
}

.dashboard-news-widget {
    min-height: 416px;
}

.dashboard-widget-footer-padding {
    padding-right: 20px;
}

/* Mark Upload Template Instructions Styles */
.mark-upload-instructions {
    margin-bottom: 10px;
    font-size: 14px;
}

.mark-upload-instructions h5 {
    margin-bottom: 10px;
    font-size: 14px;
}

.mark-upload-instruction-list {
    line-height: 1.4;
    font-size: 14px;
}

.mark-upload-instruction-list li {
    margin-bottom: 6px;
}

.mark-upload-instruction-list ul {
    margin-top: 4px;
    margin-bottom: 4px;
}

.mark-upload-instruction-list ul li {
    margin-bottom: 3px;
    font-size: 12px;
}

.mark-upload-warning-alert {
    padding: 10px 15px;
    margin-top: 10px;
    font-size: 12px;
    background-color: #fff3cd;
    border-color: #ffeaa7;
    color: #856404;
}

.mark-upload-warning-icon {
    color: #f39c12;
}

.mark-upload-warning-text {
    color: #d63031;
}

.mark-upload-completed-status {
    color: #28a745;
    font-weight: 600;
}

/* Validation Error Modal Styles */
.validation-error-modal {
    max-width: 900px;
    width: 90vw;
}

.validation-error-modal .modal-header {
    background-color: #f8f9fa;
    border-bottom: 1px solid #dee2e6;
    padding: 20px 24px;
    margin: 0;
}

.validation-error-modal .modal-title {
    margin: 0;
    font-size: 20px;
    font-weight: 600;
    color: #333;
}

.validation-error-modal .modal-body {
    padding: 24px;
    max-height: 60vh;
    overflow-y: auto;
}

.validation-error-modal .validation-message {
    margin-bottom: 20px;
    padding: 16px;
    background-color: #f8f9fa;
    border-left: 4px solid #007bff;
    border-radius: 4px;
}

.validation-error-modal .validation-message p {
    margin: 0;
    color: #495057;
    font-size: 14px;
}

.validation-error-modal .validation-table-container {
    border: 1px solid #dee2e6;
    border-radius: 6px;
    overflow: hidden;
}

.validation-error-modal .validation-table {
    width: 100%;
    border-collapse: collapse;
    margin: 0;
    background-color: #fff;
}

.validation-error-modal .validation-table thead {
    background-color: #f8f9fa;
}

.validation-error-modal .validation-table th {
    padding: 12px 16px;
    text-align: left;
    font-weight: 600;
    color: #495057;
    border-bottom: 2px solid #dee2e6;
    font-size: 14px;
}

.validation-error-modal .validation-table td {
    padding: 12px 16px;
    border-bottom: 1px solid #dee2e6;
    font-size: 14px;
    vertical-align: top;
}

.validation-error-modal .validation-table tbody tr:last-child td {
    border-bottom: none;
}

.validation-error-modal .error-row {
    background-color: #fff5f5;
}

.validation-error-modal .error-row:hover {
    background-color: #ffe6e6;
}

.validation-error-modal .warning-row {
    background-color: #fffbf0;
}

.validation-error-modal .warning-row:hover {
    background-color: #fff3cd;
}

.validation-error-modal .error-type {
    color: #dc3545;
    font-weight: 600;
    background-color: #f9eaea;
    padding: 4px 8px;
    font-size: 12px;
    text-align: center;
    width: 80px;
}

.validation-error-modal .warning-type {
    color: #856404;
    font-weight: 600;
    background-color: #fff3cd;
    padding: 4px 8px;
    font-size: 12px;
    text-align: center;
    width: 80px;
}

.validation-error-modal .row-number {
    font-weight: 600;
    color: #495057;
    text-align: center;
    width: 80px;
}

.validation-error-modal .admission-number {
    font-weight: 500;
    color: #495057;
    width: 150px;
}

.validation-error-modal .error-description,
.validation-error-modal .warning-description {
    color: #495057;
    line-height: 1.4;
}

.validation-error-modal .modal-footer {
    background-color: #f8f9fa;
    border-top: 1px solid #dee2e6;
    padding: 16px 24px;
    display: flex;
    justify-content: flex-end;
    gap: 12px;
}

.validation-error-modal .btn {
    padding: 8px 16px;
    border: 1px solid transparent;
    border-radius: 4px;
    font-size: 14px;
    font-weight: 500;
    cursor: pointer;
    transition: all 0.2s ease;
}

.validation-error-modal .btn-secondary {
    background-color: #6c757d;
    border-color: #6c757d;
    color: #fff;
}

.validation-error-modal .btn-secondary:hover {
    background-color: #5a6268;
    border-color: #545b62;
}

.validation-error-modal .btn-primary {
    background-color: #007bff;
    border-color: #007bff;
    color: #fff;
}

.validation-error-modal .btn-primary:hover {
    background-color: #0056b3;
    border-color: #004085;
}

/* Assessment duplicate name warning styles */
.assessment-name-warning {
    color: #ff9800;
    font-size: 12px;
    margin-top: 4px;
    display: flex;
    align-items: center;
    gap: 4px;
}

.assessment-name-warning md-icon {
    color: #ff9800;
    font-size: 16px;
    height: 16px;
    width: 16px;
}

/* Warning dialog styles */
md-dialog.warning-dialog .md-title {
    color: #ff9800;
}

md-dialog.warning-dialog md-icon {
    color: #ff9800;
}
/* Intake status labels in dropdown */
.intake-status-label {
    font-size: 10px;
    padding: 2px 6px;
    border-radius: 3px;
    margin-left: 8px;
    font-weight: 500;
    text-transform: uppercase;
    letter-spacing: 0.5px;
}

.intake-active {
    background-color: #4CAF50;
    color: white;
}

.intake-inactive {
    background-color: #9E9E9E;
    color: white;
}


/* Multiple Intakes Label Styles */
.multiple-intakes-label:hover {
    opacity: 0.8;
    text-decoration: underline;
}

/* =============================================== */
/* Notification Badge Styles - Material Design    */
/* =============================================== */

/* Container for notification icon and badge */
.notification-badge-container {
    position: relative;
    display: inline-block;
}

/* Material Design notification badge */
.notification-badge {
    position: absolute;
    top: -8px;
    right: -10px;
    min-width: 18px;
    height: 18px;
    padding: 2px 5px;
    font-size: 11px;
    font-weight: bold;
    line-height: 14px;
    color: #ffffff;
    text-align: center;
    background-color: #f44336; /* Material Design red */
    border-radius: 9px;
    z-index: 10;
    box-shadow: 0 2px 4px rgba(0,0,0,0.2);
}

/* Bell icon sizing */
.notification-badge-container .fa-bell {
    font-size: 18px;
}

.student-block-icon {
    color: #d32f2f;
    position: absolute;
    margin-top: 16px;
    margin-left: -18px;
    font-size: 28px;
}

.student-mng-block-icon {
    position: relative;
    right: 22px;
    color: #d32f2f;
    margin-top: 36px;
    margin-left: -18px;
    font-size: 28px;
}

.inactive-stu {
    opacity: 0.6;
}

/* Email Info Message Styles */
.email-info-section {
    background-color: #e8f4f8;
    border-left: 4px solid #17a2b8;
    padding: 10px 12px;
    margin-top: 8px;
    border-radius: 4px;
    display: flex;
    align-items: center;
}

.email-info-message {
    font-size: 12px;
    color: #0c5460;
    display: flex;
    align-items: center;
    line-height: 1.4;
}

.email-info-message i {
    margin-right: 6px;
    color: #17a2b8;
    font-size: 13px;
    flex-shrink: 0;
}

.stu-attendance-report-container {
    max-height: calc(100vh - 278px) !important;
    overflow: auto;
    margin-left: 15px !important;
    width: -webkit-fill-available;
}
@media (max-width: 990px) {
    .stu-attendance-report-container {
        max-height: 52vh !important;
    }
}

/* Mobile screen adjustment */
@media (max-width: 770px) {
    .stu-attendance-report-container {
        max-height: 48vh !important;
    }
}

/* ===================================================================
   GRADE SCALE DIRECT EDITING STYLES
   =================================================================== */

/* Highlight row being edited - light blue background */
.grade-row-editing {
    background-color: #e3f2fd !important;
    transition: background-color 0.2s ease;
}

/* Highlight auto-adjusted rows - light yellow background */
.grade-row-adjusted {
    background-color: #fff9c4 !important;
    transition: background-color 0.3s ease;
}

/* Badge for auto-adjusted fields */
.auto-adjusted-badge {
    display: inline-block;
    background-color: #ff9800;
    color: white;
    font-size: 10px;
    font-weight: 500;
    padding: 2px 6px;
    border-radius: 3px;
    margin-left: 6px;
    vertical-align: middle;
}

/* Error row styling */
.grade-row-error td {
    background-color: #ffebee !important;
    padding: 8px 20px !important;
}

/* Error message styling */
.error-message {
    color: #c62828;
    font-size: 12px;
    font-weight: 500;
    display: flex;
    align-items: center;
}

.error-message i {
    margin-right: 6px;
    color: #c62828;
}

/* Inline input styling in grade scale table */
.grade-row-editing .md-input-without-lbl.tbl-input {
    margin: 0 !important;
    padding: 0 !important;
    width: 100%;
}

.grade-row-editing .md-input-without-lbl.tbl-input .md-errors-spacer {
    display: none !important;
}

.grade-row-editing .md-input-without-lbl.tbl-input input {
    border: 1px solid #2196f3;
    border-radius: 3px;
    padding: 4px 8px;
    background-color: white;
    margin: 0 !important;
    width: 100%;
    box-sizing: border-box;
}

.grade-row-editing .md-input-without-lbl.tbl-input input:focus {
    border-color: #1976d2;
    box-shadow: 0 0 4px rgba(33, 150, 243, 0.3);
    outline: none;
}

/* Action buttons in grade scale rows */
.grade-row-editing .md-fab.md-mini,
.grade-row-adjusted .md-fab.md-mini {
    margin: 0 2px;
    min-width: 40px;
    min-height: 40px;
    width: 40px;
    height: 40px;
}

/* Grade scale edit table structure */
.grade-scale-edit-table {
    table-layout: fixed;
    width: 100%;
    min-width: 750px;
}

.grade-scale-edit-table thead {
    display: table;
    width: 100%;
    min-width: 750px;
    table-layout: fixed;
}

.grade-scale-edit-table tbody {
    display: block;
    min-width: 750px;
}

.grade-scale-edit-table tbody tr {
    display: table;
    width: 100%;
    min-width: 750px;
    table-layout: fixed;
}

.grade-scale-edit-table th,
.grade-scale-edit-table td {
    vertical-align: middle !important;
}

/* Center checkbox in table */
.grade-checkbox-center {
    display: flex !important;
    justify-content: center;
    align-items: center;
    margin: 0 auto !important;
}

/* Grade Scale Info Section (existing section enhanced) */
.grade-scale-info-section {
    background-color: #e8f4f8;
    border-left: 4px solid #17a2b8;
    padding: 10px 12px;
    margin-bottom: 16px;
    border-radius: 4px;
    display: flex;
    align-items: center;
}

.grade-scale-info-message {
    font-size: 12px;
    color: #0c5460;
    display: flex;
    align-items: center;
    line-height: 1.4;
}

.grade-scale-info-message i {
    margin-right: 6px;
    color: #17a2b8;
    font-size: 13px;
    flex-shrink: 0;
}

/* -------------------------------------------------------------
   GRADE SCALE MODAL - COLUMN ALIGNMENT & RESPONSIVENESS
   ------------------------------------------------------------- */

/* Phase 1: Fixed-width columns with horizontal scroll - with visible borders */
.grade-scale-edit-table {
    table-layout: fixed;
    width: 99%;
    min-width: 750px;
    border-collapse: collapse;
    background-color: #ffffff;
    border-right: 1px solid #dddddd;
}
.grade-scale-edit-table tr {
    border-bottom: none !important;
    background: #fff !important;
}

.grade-scale-edit-table th,
.grade-scale-edit-table td {
    box-sizing: border-box;
    padding: 10px 12px !important;
    border: 1px solid #ddd;
    text-align: center !important;
}

/* Header cells with light background */
.grade-scale-edit-table thead th {
    background-color: #f5f5f5;
    font-weight: 500;
    color: #333;
    vertical-align: middle;
}

/* Body cells */
.grade-scale-edit-table tbody td {
    background-color: #ffffff;
    vertical-align: middle;
}

/* Fixed column widths (total: 690px) */
.grade-col-grade {
    width: 130px;
}

.grade-col-max {
    width: 130px;
}

.grade-col-min {
    width: 130px;
}

.grade-col-points {
    width: 130px;
}

.grade-col-failed {
    width: 130px;
}

.grade-col-action {
    width: 130px;
}

/* Number input right alignment */
.grade-number-input {
    text-align: right;
}

/* Add row input margin fix */
.grade-add-input {
    margin: 0;
}

.grade-add-input input {
    text-align: center;
}

/* Outlined input styling for Grade, Scale Min, and Points columns */
.grade-scale-edit-table .grade-outlined-input {
    margin: 0;
    padding: 0;
}

.grade-scale-edit-table .grade-outlined-input input {
    border: 1px solid #ddd;
    border-radius: 3px;
    padding: 8px 12px;
    text-align: center;
    transition: border-color 0.2s ease;
    background-color: #f8f9fa;
    width: 100%;
}

.grade-scale-edit-table .grade-outlined-input input:focus {
    border-color: #2196F3;
    outline: none;
    box-shadow: 0 0 0 1px #2196F3;
}

.grade-scale-edit-table .grade-outlined-input input:disabled {
    border-color: rgba(0, 0, 0, 0.12);
    background-color: rgba(0, 0, 0, 0.02);
}

/* Hide default AngularJS Material underline for outlined inputs */
.grade-scale-edit-table .grade-outlined-input .md-input {
    border-bottom: none;
}

/* Outlined style for add row inputs */
.grade-add-outlined-input {
    margin: 0;
}

.grade-add-outlined-input input {
    border: 1px solid #ddd;
    border-radius: 3px;
    padding: 8px 12px;
    text-align: center;
    transition: border-color 0.2s ease;
    background-color: #f8f9fa;
    width: 100%;
}

.grade-add-outlined-input input:focus {
    border-color: #2196F3;
    outline: none;
    box-shadow: 0 0 0 1px #2196F3;
}

.grade-add-outlined-input input::placeholder {
    color: rgba(0, 0, 0, 0.38);
}

/* Hide default AngularJS Material underline for outlined add inputs */
.grade-add-outlined-input .md-input {
    border-bottom: none;
}

/* Row highlighting for editing state */
.grade-row-editing {
    background-color: #f0f7ff !important;
}

.grade-row-adjusted {
    background-color: #fffbf0 !important;
}

/* Auto-adjusted badge styling */
.auto-adjusted-badge {
    display: inline-block;
    margin-left: 6px;
    padding: 2px 6px;
    background-color: #fff3cd;
    color: #856404;
    font-size: 10px;
    border-radius: 3px;
    vertical-align: middle;
}

/* Error row styling */
.grade-row-error td {
    background-color: #ffebee !important;
    border-color: #ef5350 !important;
}

.error-message {
    color: #c62828;
    font-size: 12px;
}

.error-message i {
    margin-right: 6px;
}

/* Add grade row styling */
.add-grade-row td {
    background-color: #f9f9f9 !important;
}

/* Checkbox center alignment */
.grade-checkbox-center {
    display: flex;
    justify-content: center;
    align-items: center;
}

.grade-checkbox-center .md-checkbox {
    margin: 0;
}

/* Input styling for all table inputs (including Scale Max) */
.grade-scale-edit-table .tbl-input input {
    border: 1px solid #ddd;
    border-radius: 3px;
    padding: 8px 12px;
    text-align: center;
    transition: border-color 0.3s ease;
    background-color: #ffffff;
    width: 100%;
}

.grade-scale-edit-table .tbl-input input:focus {
    border-color: #2196F3;
    outline: none;
    box-shadow: 0 0 0 1px #2196F3;
}

/* Remove default AngularJS Material underlines */
/* .grade-scale-edit-table .tbl-input .md-input {
    border-bottom: none;
} */

.grade-scale-edit-table .md-input-container {
    padding: 0;
    margin: 0;
}

/* -------------------------------------------------------------
   HIDE FLOATING LABELS IN GRADE SCALE TABLE
   ------------------------------------------------------------- */

/* Hide floating labels in grade scale table inputs */
.grade-scale-edit-table .md-input-container label,
.grade-scale-edit-table .md-input-container .md-placeholder,
.grade-scale-edit-table md-input-container label,
.grade-scale-edit-table md-input-container .md-placeholder {
    display: none !important;
    opacity: 0 !important;
    height: 0 !important;
    overflow: hidden !important;
    visibility: hidden !important;
}

/* Specific targeting for tbl-input containers */
.grade-scale-edit-table .tbl-input label,
.grade-scale-edit-table .tbl-input .md-placeholder {
    display: none !important;
    opacity: 0 !important;
    height: 0 !important;
    overflow: hidden !important;
    visibility: hidden !important;
}

/* Target grade-outlined-input containers */
.grade-scale-edit-table .grade-outlined-input label,
.grade-scale-edit-table .grade-outlined-input .md-placeholder,
.grade-scale-edit-table .grade-add-outlined-input label,
.grade-scale-edit-table .grade-add-outlined-input .md-placeholder {
    display: none !important;
    opacity: 0 !important;
    height: 0 !important;
    overflow: hidden !important;
    visibility: hidden !important;
}

/* Remove label spacing/padding to prevent empty space */
.grade-scale-edit-table .md-input-container,
.grade-scale-edit-table md-input-container {
    margin: 0 !important;
    padding: 0 !important;
}

/* Ensure inputs take full space without label offset */
.grade-scale-edit-table .md-input-container input,
.grade-scale-edit-table md-input-container input {
    margin-top: 0 !important;
    padding-top: 8px !important;
}

/* Ensure the input containers don't reserve space for labels */
.grade-scale-edit-table .md-input-container .md-input-has-placeholder,
.grade-scale-edit-table md-input-container .md-input-has-placeholder {
    padding-top: 0 !important;
}

/* Hide any label elements that might be positioned absolutely */
.grade-scale-edit-table .md-input-container label[md-float],
.grade-scale-edit-table md-input-container label[md-float] {
    display: none !important;
    opacity: 0 !important;
}

/* Target the input messages container to prevent layout shifts */
.grade-scale-edit-table .md-input-container .md-input-messages-animation,
.grade-scale-edit-table md-input-container .md-input-messages-animation {
    padding-top: 0 !important;
    min-height: 0 !important;
}

/* Read-only input styling for view mode (non-editing rows) */
.grade-readonly-input {
    border: 1px solid #ddd;
    border-radius: 3px;
    padding: 8px 12px;
    text-align: center;
    background-color: #f0f4f8;
    color: #333;
    font-size: 14px;
    width: 100%;
    box-sizing: border-box;
    cursor: default;
    transition: none;
}

.grade-readonly-input:focus {
    outline: none;
}

/* Wrapper for read-only inputs with badges */
.grade-readonly-wrapper {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 4px;
}

.grade-readonly-wrapper .grade-readonly-input {
    margin-bottom: 2px;
}

.grade-readonly-wrapper .auto-adjusted-badge {
    margin-left: 0;
}

/* Phase 2: Max-width for large screens */
.grade-scale-modal-dialog {
    max-width: 900px;
}

/* Responsive max-width */
@media (min-width: 1200px) {
    .grade-scale-modal-dialog {
        max-width: 1000px;
    }
}

@media (min-width: 1440px) {
    .grade-scale-modal-dialog {
        max-width: 1100px;
    }
}

/* Phase 3: Full-screen mobile behavior */
@media (max-width: 768px) {
    .grade-scale-modal-dialog {
        max-width: 100% !important;
        max-height: 100% !important;
        width: 100% !important;
        height: 100% !important;
        border-radius: 0 !important;
    }

    .grade-scale-modal-dialog md-toolbar {
        min-height: 56px !important;
    }

    .grade-scale-modal-dialog md-dialog-content {
        flex: 1 !important;
        max-height: none !important;
        overflow-y: auto !important;
    }

    .grade-scale-modal-dialog .md-actions {
        position: sticky !important;
        bottom: 0 !important;
        background: white !important;
        z-index: 10 !important;
        border-top: 1px solid #e0e0e0 !important;
        padding: 12px 16px !important;
    }
}

/* Phase 4: Horizontal scroll support for all screen sizes */
.grade-scale-table-wrapper {
    overflow-x: auto;
    overflow-y: visible;
    -webkit-overflow-scrolling: touch;
    width: 100%;
    position: relative;
}

/* Ensure table maintains fixed widths and scrolls */
.grade-scale-table-wrapper .md-table-container {
    width: 100%;
    overflow-x: visible;
}

@media (max-width: 768px) {
    .grade-scale-table-wrapper {
        margin: 0 -16px;
        padding: 0 8px;
    }

    .grade-scale-edit-table {
        font-size: 13px;
    }

    .grade-scale-edit-table tr {
        flex-direction: row;
    }

    .grade-scale-edit-table th,
    .grade-scale-edit-table td {
        padding: 6px 4px;
    }

    /* .grade-scale-edit-table .md-button.md-fab.md-mini {
        width: 32px !important;
        height: 32px !important;
        min-width: 32px !important;
        min-height: 32px !important;
    } */

    .grade-scale-edit-table .md-button.md-fab.md-mini i {
        font-size: 14px !important;
    }

    /* Reduce padding for outlined inputs on mobile */
    .grade-scale-edit-table .grade-outlined-input input,
    .grade-add-outlined-input input {
        padding: 6px 8px;
        font-size: 13px;
    }

    /* Responsive grade scale full message on mobile */
    .grade-scale-full-message {
        padding: 8px !important;
    }

    .grade-scale-info-content {
        display: flex;
        align-items: center;
        justify-content: flex-start;
        gap: 12px;
        flex-direction: row;
    }

    .grade-info-icon {
        font-size: 16px !important;
        margin-bottom: 4px;
    }

    .grade-info-text {
        font-size: 12px !important;
        line-height: 1.5;
    }

    .grade-info-main {
        display: block;
        margin-bottom: 6px;
        font-size: 12px !important;
    }

    .grade-info-tip {
        font-size: 11px !important;
        line-height: 1.6;
    }
}

/* Grade scale full message - base styles */
.grade-scale-full-message-row td {
    border: 1px solid #ddd !important;
}

.grade-scale-full-message {
    text-align: center;
    padding: 12px;
    background-color: #f8f9fa !important;
}

.grade-scale-info-content {
   display: flex;
    align-items: center;
    justify-content: flex-start;
    gap: 12px;
    flex-wrap: wrap;
    flex-direction: row;
}

.grade-info-icon {
    color: #2196F3;
    font-size: 18px;
    flex-shrink: 0;
}

.grade-info-text {
    color: #666;
    font-size: 14px;
    line-height: 1.6;
    text-align: left;
    max-width: 600px;
}

.grade-info-main {
    display: inline;
    margin-right: 6px;
}

.grade-info-tip {
    display: inline;
}

.grade-info-tip strong {
    color: #333;
}

/* -------------------------------------------------------------
   ADMIN - INTAKE MANAGER STYLES
   ------------------------------------------------------------- */

/* Intake staff assignment dialog header */
.admin-intake-staff-dialog-header {
    max-width: 100%;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}
/* Teacher Lecture List - Hint Message for Empty Intakes - REMOVED: Now using md-tooltip */



/* -------------------------------------------------------------
   MESSAGE VIEWER POPUP STYLES
   ------------------------------------------------------------- */

/* Message viewer dialog dimensions */
md-dialog[aria-label="Student ReportCard"] {
    max-height: 80vh;
    height: 80vh;
}

md-dialog[aria-label="Student ReportCard"] md-dialog-content {
    max-height: 80vh;
}

/* Message module tab content */
.message-mod md-tab-content {
    top: 12px !important;
    left: 12px !important;
    overflow-x: auto;
}

/* Message module tabs canvas */
.message-mod md-tabs-canvas {
    background-color: #ffffff !important;
    text-align: left !important;
}

.message-mod md-tabs-canvas md-pagination-wrapper {
    width: 294px !important;
}

/* Message module tab icons */
.message-mod md-tab-item.md-active i {
    color: #346a92 !important;
}

.message-mod md-tab-item i {
    color: #92bad8 !important;
}

/* Message module tabs layout */
.message-mod md-tabs-wrapper {
    float: left;
}

.message-mod md-tabs-content-wrapper {
    border-top: solid 2px #efeaea !important;
}

/* Message module tabs minimum height */
md-tabs:not(.md-no-tab-content):not(.md-dynamic-height) {
    min-height: 60vh !important;
}
/* Request Details Table */
 .request-details-table {
     width: 100%;
     margin-bottom: 20px;
     border-collapse: collapse;
 }

.request-details-table tr {
    border-bottom: 1px solid #f0f0f0;
}

.request-details-table tr:last-child {
    border-bottom: none;
}

.request-details-label {
    padding: 8px 5px;
    width: 180px;
    vertical-align: top;
    color: #555;
}

.request-details-value {
    padding: 8px 5px;
    color: #333;
    word-wrap: break-word;
    white-space: normal;
}

.request-details-description {
    white-space: pre-wrap;
    word-wrap: break-word;
    overflow-wrap: break-word;
    max-width: 100%;
}

.request-id-display {
    font-weight: 500;
    color: #616161;
    display: inline-flex;
    align-items: center;
    gap: 4px;
    font-size: 14px;
}

.request-id-display i {
    font-size: 12px;
    color: #9E9E9E;
}

/* Status Badges */
.status-badge {
    display: inline-block;
    height: 24px;
    line-height: 24px;
    padding: 0 12px;
    font-size: 11px;
    font-weight: 600;
    border-radius: 12px;
    text-transform: uppercase;
    letter-spacing: 0.5px;
}

.status-new {
    background: #2196f3;
    color: white;
}

.status-processing {
    background: #ff9800;
    color: white;
}

.status-ready {
    background: #4caf50;
    color: white;
}

.status-collected {
    background: #9c27b0;
    color: white;
}

.status-rejected {
    background: #f44336;
    color: white;
}

.status-cancelled {
    background: #9E9E9E;
    color: white;
}

/* Dialog Padding */
.student-payment-dialog-padding {
    padding: 20px;
}

/* Section Headers */
h4 {
    margin-top: 0;
    margin-bottom: 12px;
    color: #333;
    font-size: 16px;
    font-weight: 600;
}

/* Responsive Design */
@media (max-width: 768px) {
    .request-details-table {
        display: block;
    }

    .request-details-table tr {
        display: flex;
        flex-direction: column;
        margin-bottom: 15px;
        padding-bottom: 15px;
        border-bottom: 1px solid #e0e0e0;
    }

    .request-details-table tr:last-child {
        border-bottom: none;
    }

    .request-details-label {
        width: 100%;
        padding: 5px 0;
        font-weight: bold;
    }

    .request-details-value {
        width: 100%;
        padding: 5px 0;
    }
}

/* Reject Request Dialog */
.reject-request-dialog {
    max-width: 95vw;
}

/* Warning Message */
.warning-message {
    color: #f44336;
    background: #ffebee;
    padding: 12px 16px;
    border-radius: 4px;
    margin: 16px 0 20px 0;
    font-weight: 500;
    font-size: 14px;
    display: flex;
    align-items: center;
    gap: 10px;
}

.warning-message i {
    font-size: 18px;
}

/* Input Container */
.md-input-container {
    margin-top: 16px;
}

.md-input-container label {
    font-size: 14px;
}

.md-input-container textarea {
    font-size: 14px;
    line-height: 1.5;
}

.hint {
    font-size: 12px;
    color: rgba(0,0,0,0.54);
    margin-top: 4px;
}

/* Responsive Design */
@media (max-width: 600px) {
    .reject-request-dialog {
        min-width: 90vw;
        max-width: 95vw;
    }

    table {
        display: block;
    }

    table tr {
        display: flex;
        flex-direction: column;
        margin-bottom: 12px;
    }

    table td {
        display: block;
        width: 100% !important;
        padding: 4px 0 !important;
    }
}

/* Update Status Dialog */
.update-status-dialog {
    max-width: 95vw;
}

.student-payment-dialog-padding {
    padding: 20px;
}

/* Status Badges */
.status-badge {
    display: inline-block;
    height: 24px;
    line-height: 24px;
    padding: 0 12px;
    font-size: 11px;
    font-weight: 600;
    border-radius: 12px;
    text-transform: uppercase;
    letter-spacing: 0.5px;
}

.status-new {
    background: #2196f3;
    color: white;
}

.status-processing {
    background: #ff9800;
    color: white;
}

.status-ready {
    background: #4caf50;
    color: white;
}

.status-collected {
    background: #9c27b0;
    color: white;
}

.status-rejected {
    background: #f44336;
    color: white;
}

/* Responsive Design */
@media (max-width: 600px) {
    .update-status-dialog {
        min-width: 90vw;
        max-width: 95vw;
    }

    table {
        display: block;
    }

    table tr {
        display: flex;
        flex-direction: column;
        margin-bottom: 12px;
    }

    table td {
        display: block;
        width: 100% !important;
        padding: 4px 0 !important;
    }
}

.treeview-menu {
    margin: 0 0 0 -8px !important;
    i {
        margin-right: 8px !important;
    }
}

/* ============================================
   Message Viewer Dialog - Responsive Styles
   ============================================ */

/* Desktop Styles (default) */
.message-viewer-dialog {
    /* Standard dialog sizing for desktop */
}

.message-viewer-toolbar {
    display: none; /* Hide toolbar on desktop */
}

.message-viewer-header {
    min-height: 58px;
    height: auto;
    background-color: #d0e1ee7d;
}

.message-viewer-sender-recipient {
    margin-top: 11px;
}

.message-viewer-recipients-table {
    width: 100%;
}

.message-viewer-sender-cell {
    padding-left: 10px;
}

.message-viewer-recipients-list {
    padding-left: 10px;
    max-height: 58px;
    overflow-x: auto;
}

.message-viewer-show-link {
    font-size: 12px;
    cursor: pointer;
}

.message-viewer-timestamp {
    margin-top: 11px;
    font-size: 12px;
}

.message-viewer-relative-time {
    padding-top: 7px;
    padding-left: 6px;
    display: contents;
}

.message-viewer-content {
    padding: 0px;
    overflow: auto;
}

.message-viewer-tab-body {
    top: 12px;
    left: 12px;
}

.message-viewer-attachments {
    padding: 10px;
}

/* Message tabs styling */
.message-mod md-tabs {
    margin-top: 12px;
    border: solid 2px #efeaea;
}

.message-mod md-tab-content {
    top: 12px !important;
    left: 12px !important;
}

.message-mod md-tabs:not(.md-no-tab-content):not(.md-dynamic-height) {
    min-height: 340px;
}

.message-mod md-tabs md-tabs-canvas {
    background-color: #ffffff !important;
}

.message-mod md-tab-item.md-active i {
    color: #346a92 !important;
}

.message-mod md-tab-item i {
    color: #92bad8 !important;
}

.message-mod md-ink-bar {
    color: #346a92 !important;
}

.message-mod md-tabs-wrapper {
    float: left;
}

.message-mod md-tabs-content-wrapper {
    border-top: solid 2px #efeaea !important;
}

/* Mobile Styles (responsive) */
@media screen and (max-width: 768px) {
    /* Full-screen dialog on mobile */
    .message-viewer-dialog {
        max-height: 100vh !important;
        height: 100vh !important;
        max-width: 100vw !important;
        width: 100vw !important;
        margin: 0 !important;
        border-radius: 0 !important;
        overflow-x: hidden !important; /* Prevent horizontal scroll on dialog */
    }

    /* Prevent horizontal overflow on all dialog content */
    .message-viewer-dialog * {
        max-width: 100%;
        box-sizing: border-box;
    }

    .message-viewer-dialog md-dialog-content {
        max-height: calc(100vh - 64px) !important; /* 64px toolbar */
        height: calc(100vh - 64px) !important; /* Force height */
        overflow-y: auto;
        padding: 0 !important; /* Remove default AngularJS Material padding */
    }

    /* Inner md-dialog-content div */
    .message-viewer-dialog .md-dialog-content {
        height: 100%;
        display: flex;
        flex-direction: column;
        padding: 0 !important;
    }

    /* Show toolbar on mobile */
    .message-viewer-toolbar {
        display: block;
        flex-shrink: 0; /* Don't shrink toolbar */
    }

    .message-viewer-toolbar .md-toolbar-tools {
        background-color: #3b78e7;
    }

    /* Adjust header for mobile */
    .message-viewer-header {
        min-height: auto !important;
        height: auto !important;
        flex-shrink: 0; /* Don't shrink header */
        padding: 10px 16px !important; /* Add padding for content visibility */
        overflow: visible !important;
    }

    /* Fix row to prevent horizontal overflow */
    .message-viewer-header .row {
        margin-left: 0 !important;
        margin-right: 0 !important;
        display: block !important; /* Stack columns vertically */
    }

    /* Make columns full width on mobile */
    .message-viewer-header .col-md-7,
    .message-viewer-header .col-md-5 {
        width: 100% !important;
        padding-left: 0 !important;
        padding-right: 0 !important;
        float: none !important;
    }

    .message-viewer-sender-recipient {
        margin-top: 0 !important;
        margin-left: 0 !important;
        margin-bottom: 10px;
        padding: 0 !important;
        width: 100%;
        word-wrap: break-word;
        overflow-wrap: break-word;
    }

    /* Ensure table is fully visible */
    .message-viewer-recipients-table {
        width: 100% !important;
        table-layout: auto !important;
        overflow: visible !important;
    }

    .message-viewer-recipients-table td {
        word-wrap: break-word;
        overflow-wrap: break-word;
        padding: 2px 0;
        vertical-align: top;
    }

    .message-viewer-recipients-table td:first-child {
        width: 50px;
        min-width: 50px;
        font-weight: 500;
    }

    .message-viewer-sender-cell {
        word-wrap: break-word;
        overflow-wrap: break-word;
    }

    .message-viewer-recipients-list {
        max-height: none !important; /* Remove height restriction on mobile */
        overflow: visible !important;
        word-wrap: break-word;
        overflow-wrap: break-word;
    }

    .message-viewer-timestamp {
        margin-top: 5px !important;
        margin-left: 0 !important;
        text-align: left !important;
        font-size: 11px;
        width: 100%;
        word-wrap: break-word;
        overflow-wrap: break-word;
    }

    .message-viewer-relative-time {
        display: inline !important;
    }

    /* Adjust content for mobile - make it flex to fill */
    .message-viewer-content {
        margin-top: -8px;
        border-top: 1px solid #d2d6de;
        width: 100%; /* Changed from auto to 100% */
        flex: 1; /* Allow content to grow and fill available space */
        display: flex;
        flex-direction: column;
        overflow: hidden; /* Prevent outer scroll, let tabs scroll */
    }

    .message-viewer-tab-body {
        overflow-x: hidden !important;
        overflow-y: auto;
        padding: 10px 16px !important;
        word-wrap: break-word;
        overflow-wrap: break-word;
    }

    /* Ensure tab content doesn't overflow */
    .message-viewer-tab-body h5,
    .message-viewer-tab-body p {
        max-width: 100%;
        word-wrap: break-word;
        overflow-wrap: break-word;
        margin-left: 0 !important;
        margin-right: 0 !important;
    }

    /* Fix Bootstrap col classes in tab content */
    .message-viewer-tab-body .col-md-12 {
        width: 100% !important;
        padding-left: 0 !important;
        padding-right: 0 !important;
    }

    /* Fix tabs to fill remaining height */
    .message-mod md-tabs {
        flex: 1; /* Grow to fill available space */
        display: flex;
        flex-direction: column;
        min-height: 0; /* Allow flexbox to shrink if needed */
    }

    .message-mod md-tabs-content-wrapper {
        flex: 1; /* Grow to fill available space */
        overflow-y: auto; /* Allow scrolling within tabs */
    }

    .message-mod md-tabs:not(.md-no-tab-content):not(.md-dynamic-height) {
        min-height: unset !important; /* Remove fixed min-height, use flex instead */
        height: 100%;
    }

    /* Ensure attachments section doesn't cause overflow */
    .message-viewer-attachments {
        padding: 10px 16px !important;
        flex-shrink: 0; /* Don't shrink */
        word-wrap: break-word;
        overflow-wrap: break-word;
        max-width: 100%;
    }

    .message-viewer-attachments a {
        word-wrap: break-word;
        overflow-wrap: break-word;
        display: inline-block;
        max-width: 100%;
    }
}

/* Additional mobile device detection (iOS, Android specific) */
@supports (-webkit-touch-callout: none) {
    /* iOS specific styles if needed */
    .message-viewer-dialog {
        -webkit-overflow-scrolling: touch;
    }
}

.module-row {
    display: flex;
    align-items: center;   /* vertical alignment */
    min-height: 48px;
}

.message-mod td {
    white-space: initial !important;
}


/* ============================================================
   ADMIN STUDENT REGISTRATION - FIELD CONFIGURATION STYLES
   CSH-38369 Phase 3: Support for required field indicators
   ============================================================ */

/* Red required asterisk indicator */
.md-red {
    color: #f44336;
    font-weight: bold;
    margin-left: 2px;
}

/* Profile picture section with required indicator */
.admin-profile-picture-required {
    border: 2px solid #f44336;
    border-radius: 4px;
    padding: 8px;
}

/* Form error message styling */
.admin-form-error {
    color: #f44336;
    font-size: 12px;
    margin-top: 4px;
    margin-left: 2px;
}

/* Finance - Down Payment Amount read-only field styling */
input[readonly] {
    background-color: #f5f5f5;
    color: #666;
    cursor: not-allowed;
}

input[readonly]:focus {
    outline: none;
    background-color: #f5f5f5;
    box-shadow: none;
}

/* MD Material Design read-only input styling */
md-input-container input[readonly] {
    background-color: #f5f5f5;
    color: #333;
}

md-input-container input[readonly]::-webkit-outer-spin-button,
md-input-container input[readonly]::-webkit-inner-spin-button {
    -webkit-appearance: none;
    margin: 0;
}

/*---- Group Dialog (Lecture Groups / Assessment Groups) ----*/

.group-dialog {
    width: 540px;
}

.group-table {
    box-shadow: none !important;
    background: transparent !important;
}

.group-table-head {
    display: table;
    width: 100%;
    table-layout: fixed;
    border-bottom: transparent !important;
}

.group-table-header-row {
    background-color: #fff !important;
    border: none !important;
    font-size: 12px !important;
    font-weight: 100 !important;
}

.group-table-th {
    padding-bottom: 0 !important;
    padding-left: 3px !important;
    color: #717171 !important;
    font-weight: 300 !important;
    font-size: 11px !important;
    border-right: transparent !important;
}

.group-table-body {
    display: block;
    overflow: auto;
}

.group-table-row {
    height: 58px;
}

.group-table-new-row {
    height: 55px;
}

.group-table-index-cell {
    padding: 0 15px 5px 0 !important;
}

.group-table-cell {
    padding: 0 15px 0 0 !important;
}

.group-table-validation-msg {
    top: 27px;
    position: absolute;
}

.group-table-dup-msg {
    position: absolute;
}

.group-table-dup-text {
    color: red;
    font-size: 12px;
}

.group-table-new-input {
    padding-bottom: 0;
}

.group-table-btn {
    margin-top: 10px;
}

.group-table-bottom-spacer {
    margin-top: 24px;
}

/* =====================================================
   PAGINATION CONTROLS - Assessment Log
   ===================================================== */

.pagination-section {
    background-color: #f5f5f5;
    border-top: 1px solid #e0e0e0;
    border-bottom: 1px solid #e0e0e0;
    padding: 16px 0;
    margin: 16px 0;
}

.pagination-controls {
    display: flex;
    align-items: center;
    justify-content: space-between;
    flex-wrap: wrap;
    gap: 16px;
}

.pagination-info {
    display: flex;
    align-items: center;
    padding: 0 16px;
}

.pagination-text {
    font-size: 14px;
    color: #666;
    font-weight: 500;
}

.pagination-controls-right {
    display: flex;
    align-items: center;
    gap: 16px;
    padding: 0 16px;
    justify-content: flex-end;
    flex-wrap: wrap;
}

.page-size-selector {
    display: flex;
    align-items: center;
    gap: 8px;
}

.page-size-selector-label {
    font-size: 13px;
    color: #666;
    white-space: nowrap;
}

.page-size-selector-control {
    margin: 0 !important;
    padding: 0 8px !important;
    min-width: 80px;
}

.pagination-buttons {
    display: flex;
    gap: 4px;
    align-items: center;
}

.pagination-buttons .md-icon-button {
    width: 36px;
    height: 36px;
    min-width: 36px;
    margin: 0 4px;
}

.pagination-buttons .md-icon-button:disabled {
    opacity: 0.5;
    cursor: not-allowed;
}

.pagination-buttons .md-icon-button i {
    font-size: 18px;
}

/* Responsive adjustments for pagination */
@media (max-width: 768px) {
    .pagination-section {
        padding: 12px 8px;
    }

    .pagination-controls {
        flex-direction: column;
        align-items: stretch;
    }

    .pagination-info {
        padding: 0 8px;
        order: 1;
    }

    .pagination-controls-right {
        padding: 0 8px;
        justify-content: center;
        order: 2;
    }

    .page-size-selector {
        flex: 1;
        justify-content: center;
    }

    .pagination-buttons {
        justify-content: center;
    }
}

@media (max-width: 480px) {
    .pagination-text {
        font-size: 12px;
    }

    .page-size-selector label {
        font-size: 12px;
    }

    .pagination-buttons .md-icon-button {
        width: 32px;
        height: 32px;
        min-width: 32px;
        margin: 0 2px;
    }

    .pagination-buttons .md-icon-button i {
        font-size: 16px;
    }
}

v-accordion.sub-accordions v-pane {
    padding: 8px;
    background: #ffffff;
    border: 2px solid #e3e3e3 !important;
    margin-bottom: 10px;
    border-radius: 4px !important;
}


/* ==========================================================================
   Self Registered Students
   ========================================================================== */

.list-students .no-records-message {
    padding: 32px 16px;
    text-align: center;
    color: #8a94a6;
    font-size: 14px;
}

.lead-edit-dialog,
.lead-discard-dialog {
    max-width: 520px;
    width: 100%;
}

.lead-edit-dialog .dialog-hint,
.lead-discard-dialog .dialog-hint {
    color: #8a94a6;
    font-size: 13px;
    line-height: 1.5;
    margin-bottom: 16px;
}

/* ==========================================================================
   Student Self Registration (kiosk form)
   ========================================================================== */

.self-registration-form .srf-toolbar {
    padding: 12px 0 8px;
}

.self-registration-form .srf-title {
    margin: 0 0 4px;
    font-size: 18px;
    font-weight: 600;
}

.self-registration-form .srf-hint {
    margin: 0;
    color: #8a94a6;
    font-size: 13px;
}

.self-registration-form .srf-frame-wrap {
    height: calc(100vh - 164px);
    min-height: 420px;
    background: #ffffff;
    border: 1px solid #dfe4ea;
    border-radius: 4px;
    overflow: hidden;
}

.self-registration-form .srf-frame {
    display: block;
    width: 100%;
    height: 100%;
    border: 0;
}

.self-registration-form .srf-overlay {
    position: fixed;
    top: 0;
    right: 0;
    bottom: 0;
    left: 0;
    background: rgba(18, 24, 33, 0.72);
    display: flex;
    align-items: center;
    justify-content: center;
    z-index: 80;
}

.self-registration-form .srf-overlay-card {
    background: #ffffff;
    border-radius: 8px;
    padding: 28px;
    max-width: 420px;
    width: 100%;
    text-align: center;
    box-shadow: 0 12px 32px rgba(0, 0, 0, 0.25);
}

.self-registration-form .srf-overlay-card p {
    color: #5b6675;
    line-height: 1.5;
    margin-bottom: 20px;
}

.self-registration-form .srf-overlay-actions {
    display: flex;
    gap: 8px;
    justify-content: center;
    flex-wrap: wrap;
}

.list-students .no-records-message.srf-load-error {
    color: #c0392b;
}

/* Self registration details shown on the lead convert screen */
.lead-submitted-details {
    margin-top: 4px;
    margin-bottom: 0;
}

.lead-submitted-details th {
    width: 38%;
    font-weight: 600;
    color: #5b6675;
    padding: 6px 8px;
    vertical-align: top;
    border-top: 1px solid #ececec;
}

.lead-submitted-details td {
    padding: 6px 8px;
    vertical-align: top;
    word-break: break-word;
    border-top: 1px solid #ececec;
}

/* Self Registered Students - search row and table actions.

   md-select renders inside its own block with the label space Material reserves
   above the value, so dropped into a search bar row it sits about 17px lower
   than the plain input beside it and its text collides with the bottom edge of
   the blue bar. Other screens correct this with an inline
   "position:relative; top:-17px" on the wrapping column; doing it here instead
   keeps the markup clean and keeps the correction in one place. */
.list-students .srs-filter {
  position: relative;
}

.list-students .srs-filter md-select {
  max-width: 220px;
  margin: 0;
}

/* without this the select's value sits hard against the underline */
.list-students .srs-filter md-select .md-select-value {
  padding-bottom: 2px;
  min-height: 26px;
}

.list-students .srs-actions {
  text-align: right;
}

/* the row buttons are md-icon-buttons, which carry a wide default margin and
   spread across the column; pull them together so the icon group reads as one
   control set sitting next to Register */
.list-students .srs-row-actions {
  white-space: nowrap;
  vertical-align: middle;
}

.list-students .srs-row-actions .md-icon-button {
  margin: 0 2px;
  vertical-align: middle;
}

.list-students .srs-row-actions .md-raised {
  margin-left: 10px;
  vertical-align: middle;
}

/* keep every cell on the row centred against the buttons rather than sitting on
   the text baseline, which left the names looking raised against the controls */
.list-students table.table > tbody > tr > td {
  vertical-align: middle;
}

.list-students .srs-actions-col {
  width: 300px;
}

/* Self Registration - the shareable form link.

   A button beside "Start new registration" opening a dialog, rather than a field on the page:
   the kiosk account sees this screen too and it is the student's view, so an occasional admin
   action should not take up room in front of every student. */
.self-registration-form .srf-share-btn {
    margin-right: 6px;
}

.self-registration-form .srf-share-btn i {
    margin-right: 4px;
}

.srf-share-dialog {
    max-width: 560px;
}

.srf-share-dialog .srf-share-intro {
    color: #8a94a6;
    font-size: 13.5px;
    margin: 0 0 16px;
    max-width: 52ch;
}

/* readonly but selectable - a click selects the whole link, so it can still be copied by hand
   where the clipboard API is unavailable (it needs a secure context, so it is absent over
   plain http on a LAN address) */
.srf-share-dialog .srf-share-input {
    display: block;
    width: 100%;
    font-family: Menlo, Consolas, monospace;
    font-size: 12.5px;
    color: #3f4a50;
    background: #f4f6f7;
    border: 1px solid #dfe3e6;
    border-radius: 3px;
    padding: 9px 11px;
    cursor: text;
}

.srf-share-dialog .srf-share-input:focus {
    outline: none;
    border-color: #2196f3;
}

/* User Management > Students: Send Onboarding Emails */
.onboarding-email-toolbar-button {
    margin-top: 17px;
}

.onboarding-email-dialog {
    max-width: 650px;
}

.onboarding-email-info {
    margin: 8px 0 0;
    color: #3b78e7;
}

.onboarding-email-warning {
    margin: 8px 0 0;
    color: #d9534f;
}

/* Multi-client admission number validation styles */
.admin-admission-pattern-help {
    margin-top: 8px;
    padding: 6px 8px;
    background-color: #f0f8ff;
    border-left: 3px solid #2196f3;
    border-radius: 2px;
    font-size: 12px;
    color: #1565c0;
}

.admin-admission-pattern-help small {
    display: flex;
    align-items: center;
    gap: 6px;
}

.admin-admission-pattern-help i {
    color: #2196f3;
}

/* -------------------------------------------------------------
   ADMIN - Settings > Programs > Assign Users to Program dialog
   (admin/partials/program/program-users.html)
   ------------------------------------------------------------- */
.program-users-dialog {
    max-width: 95%;
}

.program-users-dialog .program-users-dialog-header {
    max-width: 100%;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.program-users-dialog .program-users-panel-header {
    min-height: 118px;
}

.program-users-dialog .program-users-panel-title-row {
    display: flex;
    align-items: center;
    min-height: 36px;
}

.program-users-dialog .program-users-panel-title-row .box-title {
    margin: 0;
    white-space: nowrap;
}

.program-users-dialog .program-users-shown-count {
    margin-left: 8px;
    font-size: 12px;
    color: #777;
    white-space: nowrap;
}

.program-users-dialog .program-users-info-icon {
    margin-left: 6px;
    color: #3b78e7;
    cursor: help;
}

.program-users-dialog .program-users-bulk-btn {
    margin: 0;
    min-height: 30px;
    line-height: 30px;
    font-size: 13px;
    white-space: nowrap;
}

.program-users-dialog .program-users-role-filter {
    margin: 6px 0 8px;
}

.program-users-dialog .program-users-role-filter md-radio-button {
    display: inline-block;
    margin: 0 16px 0 0;
}

.program-users-dialog .program-users-search {
    width: 100%;
}

.program-users-dialog .program-users-item-info {
    padding-right: 36px;
}

.program-users-dialog .program-users-empty {
    padding: 16px 8px;
    color: #777;
    text-align: center;
}

.program-users-dialog .program-users-load-error {
    margin-bottom: 12px;
    padding: 8px 12px;
    border-radius: 3px;
    background-color: #fdecea;
    color: #b71c1c;
}

/* Chips */
.program-users-dialog .program-users-chip {
    display: inline-block;
    margin-left: 4px;
    padding: 1px 7px;
    border-radius: 10px;
    font-size: 10px;
    font-weight: 600;
    line-height: 16px;
    letter-spacing: 0.3px;
    vertical-align: middle;
    white-space: nowrap;
}

.program-users-dialog .role-chip-admin {
    background-color: #e3f2fd;
    color: #1565c0;
    border: 1px solid #90caf9;
}

.program-users-dialog .role-chip-staff {
    background-color: #e8f5e9;
    color: #2e7d32;
    border: 1px solid #a5d6a7;
}

.program-users-dialog .chip-default {
    background-color: #fff8e1;
    color: #f57f17;
    border: 1px solid #ffe082;
}

.program-users-dialog .chip-new {
    background-color: #ede7f6;
    color: #4527a0;
    border: 1px solid #b39ddb;
}

.program-users-dialog .chip-only-program {
    background-color: #eeeeee;
    color: #616161;
    border: 1px solid #bdbdbd;
}

/* Inline confirm / undo / review bars */
.program-users-dialog .program-users-confirm-bar,
.program-users-dialog .program-users-undo-bar {
    display: flex;
    align-items: center;
    margin-top: 4px;
    padding: 4px 12px;
    border-radius: 3px;
}

.program-users-dialog .program-users-confirm-bar {
    background-color: #fff3e0;
    border: 1px solid #ffcc80;
}

.program-users-dialog .program-users-confirm-text {
    font-weight: 500;
}

.program-users-dialog .program-users-undo-bar {
    min-height: 40px;
    background-color: #323232;
    color: #ffffff;
}

.program-users-dialog .program-users-undo-link {
    margin-left: 16px;
    font-weight: 600;
    color: #82b1ff;
}

.program-users-dialog .program-users-undo-dismiss {
    color: #bdbdbd;
}

.program-users-dialog .program-users-review-bar {
    margin-top: 4px;
    padding: 10px 12px 4px;
    border-radius: 3px;
    background-color: #fdecea;
    border: 1px solid #f5c6cb;
}

.program-users-dialog .program-users-review-text {
    font-weight: 500;
    color: #b71c1c;
}

.program-users-dialog .program-users-review-lost {
    margin-top: 4px;
    font-size: 12px;
    color: #616161;
}

.program-users-dialog .program-users-review-actions {
    text-align: right;
}

/* Footer */
.program-users-dialog .program-users-footer {
    padding-left: 24px;
}

/* Assign Users dialog tooltips: rendered on body (data-container="body"), wrap long text
   instead of the global .tooltip nowrap rule */
.tooltip.program-users-tooltip {
    white-space: normal;
    max-width: 300px;
}

.tooltip.program-users-tooltip .tooltip-inner {
    max-width: 300px;
    text-align: left;
    line-height: 1.4;
}

/* Confirm / undo / review bars sit between the scrolling content and the footer, always visible */
.program-users-dialog .program-users-action-area {
    flex-shrink: 0;
    padding: 4px 24px 8px;
    border-top: 1px solid #e0e0e0;
    background-color: #ffffff;
}

.program-users-dialog .program-users-footer-summary {
    color: #555;
}

.program-users-dialog .program-users-reset-link {
    margin-left: 12px;
}

.program-users-dialog .program-users-save-btn {
    margin-right: 20px;
}

/* Admin register student - each tab's content scrolls in a fixed-height box so the
   action buttons placed after it stay at the bottom, whatever the content length */
.register-student-tab-content {
    position: relative;
    display: block;
    overflow: auto;
    height: calc(90vh - 132px);
}

/* Tabs without the .md-mailbox-header strip (Basic Info, Course Information) */
.register-student-tab-content.no-tab-header {
    height: calc(90vh - 90px);
}

/* Right gap for each tab's action button row (padding, so the full-width column doesn't overflow) */
.register-student-tab-actions {
    padding: 8px 24px 24px 0;
    background-color: #fff;
    border-top: 1px solid #e2e2e2;
}

.stu-reg-tab {
    box-shadow: none;
}