/*== General Class ==*/
*, *:before, *:after {
    -webkit-box-sizing: border-box;
    -moz-box-sizing: border-box;
    box-sizing: border-box;
}

/*== Modified body text color and links color START ==*/
body{
	color: #222222;
}
.text-body {
  color: #222222 !important;
}
a {
	color: #2c78d9;
}
a:hover{
	color: #2564b4;
}
.text-decoration-line{
  text-decoration: line-through;
}
.btn-outline-primary {
  color: #2c78d9;
}
.btn-outline-primary:hover {
  color: #fff;
}
.btn-outline-primary:disabled:hover {
    color: #5d9cec;
}
.text-primary {
  color: #2c78d9 !important;
}
a.text-primary:hover{
  color: #2564b4 !important;
}
.btn-link {
  color: #2c78d9;
}
.btn-link:hover{
  color: #2564b4;
}
.rounded-right-lg-0{
    border-top-right-radius:0px !important;
    border-bottom-right-radius:0px !important;
}
/*== Modified body text color and links color END ==*/

body {
    font-size: 1rem;
}
.wrapper .section-container, body {
    background-color: #eceff4;
}
body .whirl:after {
    z-index: 1000000 !important;
    position:fixed !important;
}
body .whirl:before {
    z-index: 999999 !important;
}
.btn-outline-yellow{
    border: 1px solid #fad732!important;
    color: #fad732!important;
}
.btn-outline-yellow:hover{
    background-color: #fad732!important;
    color: #ffffff!important;
}

/*== Link hover, box-shadow and ouline is set to hidden ==*/
a:hover {
    text-decoration: none;
}
button:active, button:focus, a:active, a:focus {
    outline: none !important;
    box-shadow: none !important;
}

/*== Input field ==*/
input[type=checkbox] {
    transform: scale(1.25);
}
input[type=radio] {
    transform: scale(1.25);
}

/*== Background color ==*/
.bg-black-50{
    background-color: #7c8181;Color: #fff;
}
.bg-purple-light-row {
    background-color: #f3f0ff !important;
}
.bg-purple-light-dark-row {
    background-color: #e7dfff !important;
}
.bg-purple-highlight {
    background-color: #ece7ff;
}
.bg-purple-light-block{
    background-color: #e0d7fe!important;
}
.bg-yellow-highlight {
    background-color: #fffbe5 !important;
}
.bg-purple-lighter {
    background-color: #f6f5fd !important;
}
.bg-skyblue-lighter {
    background-color: #e6f2ff !important;
}
.bg-very-light-green {
    background-color: #e2fff9;
}
.bg-danger-lighter {
    background-color: #f2a4a4;
    Color: #fff;
}
.bg-blue-light-block {
    background-color: #cfe2f3 !important;
}
.bg-gray-lightest{
	background-color: #edf1f2 !important;
}

.accessibility-dark {
    background-color: #233947;
    width: 88% !important;
}

.accessibility-light {
    background-color: #235ba5;
    width: 12% !important;
}

.h-64 {
    height: 6.4rem !important;
}

.accessibility-check-icon {
    background: #235ba5;
    border-radius: 50px;
    border: 7px solid #233947;
    width: 34px !important;
    height: 34px !important;
    transform: translate(-50%,-22%);
}

/**This background CSS classes are only used for Thumbnails of Preferences Section of My Profile Page.**/
.bg-info-dark-thumbnail{
	background-color: #1797be !important;
}
.bg-info-thumbnail{
	background-color: #23b7e5 !important;
}
.bg-info-light-thumbnail{
  background-color: #51c6ea !important;
}

.bg-danger-dark-thumbnail{
	background-color: #ec2121 !important;
}
.bg-danger-thumbnail{
	background-color: #f05050 !important;
}
.bg-danger-light-thumbnail{
	background-color: #f47f7f !important;
}

.bg-green-dark-thumbnail{
	background-color: #2b957a !important;
}
.bg-green-thumbnail{
	background-color: #37bc9b !important;
}
.bg-green-light-thumbnail{
	background-color: #58ceb1 !important;
}

.bg-purple-dark-thumbnail{
	background-color: #564aa3 !important;
}
.bg-purple-thumbnail{
	background-color: #7266ba !important;
}
.bg-purple-light-thumbnail{
	background-color: #9289ca !important;
}

/*to get back default color of bg-warning-light as in 0524 - Sanjeev instructed to rectify Site > Home BG color of 0418*/
.bg-warning-light-custom {
    background-color: #fff2cc !important;
    color:#656565 !important;
}
.bg-error-light-custom {
    background-color: #ff5e5e !important;
    color:#ffffff !important;
}
.bg-green-lightest {
    background-color: #f0f9f3 !important;
}
.bg-danger-highlight {
    background-color: #ffe2e2 !important;
}
.bg-inverse-lighter{
    background-color:#d0dae2;
}
.bg-info-lighter{
    background-color: #dbf6fd!important;
}
.bg-info-lightest{
    background-color: #ebf9fd!important;
}
.bg-danger-lightest{
    background-color: #fff1f3!important;
}
.bg-orange-highlight, .table-striped .bg-orange-highlight .sorting_1, .table-striped .bg-orange-highlight .sorting_2 {
    background-color: #fff3eb !important;
}
/*.bg-inverse-lighter {
  background-color:#a1b5c3;
}*/
.bg-secondary-highlight {
    background-color: #f8f9fa;
}
.bg-green-light-block, .table-striped .bg-green-light-block .sorting_1, .table-striped .bg-green-light-block .sorting_2 {
    background-color: #E6F4EA !important;
}
.selectedOption {
    background-color: #e6f4ea;
}
.bgcolor-report-popup {
    border: 5px solid #2462d6;
}
.alternate-color .alt {
    background-color: #f9f9f9 !important;
}
.alternate-color .row:hover {
    background-color: #fdfeef !important;
}

.alternate-blue-color .alt {
  background-color: #eff6ff !important;
}
.alternate-blue-color .row:hover {
  background-color: #ddedff !important;
  color: #333 !important;
}
.alternate-blue-color .row:hover a{
  color: #2f80e7 !important;
}

/*== Text Color, text size ==*/
.text-purple-highlight {
    color: #ece7ff;
}
.text-purple-light{
  color: #7266ba !important;
}
.text-purple { /** #7266ba **/
  color: #564aa3 !important;
}
.text-purple-dark{ /** #564aa3 **/
  color: #453b83 !important;
}
a.text-purple:hover{
    color: #453b83 !important;
}

.text-primary-light{
	color: #5d9cec !important;
}
.text-primary-dark{
	color: #2564b4 !important;
}

.text-info-light{
  color: #23b7e5 !important;
}
.text-info { /** #23b7e5 **/
  color: #1797be !important;
}
.text-info-dark{ /** #1797be **/
    color: #1483a5 !important;
}
a.text-info:hover{
	color: #1483a5 !important;
}

.text-danger-light{
	color: #f47f7f !important;
}
.text-danger {
  color: #f05050 !important;
}
.text-danger-dark{
	color: #ec2121 !important;
}
a.text-danger:hover{
	color: #ec2121 !important;
}

.text-warning-light{
	color: #ff902b !important;
}
.text-warning { /** #ff902b **/
  color: #f77600 !important;
}
.text-warning-dark{
	color: #d86700 !important;
}
a.text-warning:hover{
	color: #d86700 !important;
}

.text-green-light {
  color: #37bc9b !important;
}
.text-green { /** #37bc9b **/
  color: #2b957a !important;
}
.text-green-dark { /** #2b957a **/
  color: #27866e !important;
}
.text-green:hover{ /** #2b957a **/
    color: #27866e !important;
}
a.text-green:hover{
    color: #27866e !important;
}
.text-green-hover {
    color: #fff !important;
}

.text-success-light{
	color: #27c24c !important;
}
.text-success { /** #27c24c **/
  color: #1e983b !important;
}
.text-success-dark{
	color: #197f31 !important;
}
a.text-success:hover{
    color: #197f31 !important;
}

.text-yellow-light{
	color: #fad732 !important;
}
.text-yellow { /** #fad732 **/
  color: #f3ca06 !important;
}
.text-yellow-dark{
	color: #e3bd06 !important;
}
a.text-yellow:hover{
    color: #e3bd06 !important;
}

.text-error-muted {
    color:#ffc5c5 !important;
} 

.text-blue-darker {
    color: #2c5e9d !important;
}

.text-orange {
    color: #ffb12b !important;
}
.text-orange:hover{
    color: #e6a027!important;
}
.text-orange-dark {
    color: #ff792b !important;
}

.text-brown {
    color: #b98c63 !important;
}

.alternate-color .alt-text {
    color: #fff !important;
}
.alternate-color .alt .alt-text {
    color: #f9f9f9 !important;
}
.h5, h5 {
    font-size: 1rem;
}
.h3-responsive{
    font-size: clamp(1.2rem, 5vw, 1.35rem)!important;
}
.text-resize-large {
    font-size: 125%;
}
.text-resize-medium {
    font-size: 90%;
}
.text-resize-small {
    font-size: 75%;
}
.text-resize-xs {
    font-size: 0.7rem!important;
}
.text-md {
    font-size: 1.5rem !important;
    font-weight: 300;
}
.text-lg {
    font-size: 2rem !important;
    font-weight: 300;
}
.text-sm-header {
    font-size: 0.86rem !important;
}
/* CSS for textarea resize */
.textarea-resize{
    height: 2.5rem!important;
    resize: none;
    overflow: hidden;
    padding-top: 0.3rem;
    background: transparent;
}
/* CSS for textarea resize */

/** Similar class name in bootstrap : .font-italic
.text-italic {
    font-style: italic!important;
}**/

/** Similar class name in bootstrap : .font-weight-bold, .text-bold
.bold{
    font-weight: bold;
}**/

/*== Width ==*/
.width40{
    width: 40px;
}
/** Same value class name replace with this : .width40
.w-switch{
    width: 40px;
}**/
.width50 {
    width: 50px !important;
}
.width260 {
    width: 260px;
}
.width340 {
    width: 340px;
}
.w-6 {
    width: 6.0rem !important;
}
.w-6-8 {
    width: 6.8rem !important;
}
.w-7 {
    width: 7.0rem !important;
}
.w-8 {
    width: 8.0rem !important;
}
.w-9 {
    width: 9.0rem !important;
}
.w-10-1 {
    width: 10.1rem !important;
}
.w-7-5 {
    width: 7.5rem !important;
}
.w-5-0 {
    width: 5rem !important;
}
.w-5 {
    width: 5.4rem !important;
}
.w-5-7 {
    width: 5.7rem !important;
}
.w-4 {
    width: 4rem !important;
}
.w-4-3 {
    width: 4.3rem !important;
}
.w-6 {
    width: 6rem !important;
}
.w-15 {
    width: 15rem !important;
}
.w-38 {
    width: 38px !important;
}
/** Same value class name replace with this : .w-1-2
.w-1 {
    width: 1.2rem !important;
}**/
.w-1-2 {
    width: 1.2rem !important;
}
.w-1-6 {
    width: 1.6rem !important;
}
.w-2 {
    width: 2.3rem !important;
}
.w-3{
    width: 3rem!important;
}
.w-11{
    width: 11.5rem!important;
}
.mw-25 {
    max-width: 25px !important;
}
.w-search-field{
    width: 15rem!important;
}
.w-search{
    width: 32rem!important;
}

.w-165 {
  max-width: 165px;
}
.w-max-100{
    max-width:100% !important;
}

/*== Height ==*/
.h-10{
   min-height: 10rem!important;
}
.h-8{
   min-height: 8rem!important;
}
.h-25 {
    min-height: 25px;
}
.h-30 {
    min-height: 30px;
}
.h-35 {
    min-height: 35px;
}
.h-36 {
    min-height: 36px;
}
.h-62 {
    min-height: 62px;
}
.h-45 {
    min-height: 45px!important;
}
.h-54 {
    min-height: 54px;
}
.h-70 {
    min-height: 70px;
}
.h-80 {
    min-height: 80px;
}
.h-200 {
    min-height: 200px;
}
.h-205 {
    min-height: 205px;
}
.h-2 {
    height: 2.2rem;
}
.h-20 {
    height: 20px !important;
}
.h-icon-36{
    height:36px;
}
.searchNameField {
    height: 2.3rem !important;
}
.search-container{
    position:relative;
}
.search-container .search-content{
    margin-top:-3.7px;
    margin-left:1.5px;
}
.control-height {
    height: 2.3rem !important;
}
.mh-3 {
    min-height: 3rem !important;
}
.mh-7 {
    min-height: 7rem !important;
}

/*== Margin ==*/
.mr-15 { /** note line no: 8 **/
    margin-right: 15px;
}
.mr-17 { /** note line no: 9 **/
    margin-right: 17px;
}
.ml-1px{ /** note line no: 10 **/
    margin-left:1px!important;
}
.ml-2px{
	margin-left:2px!important;
}
.mt-1px{ /** note line no: 11 **/
    margin-top:1px!important;
}
.mt-2px{ /** note line no: 12 **/
    margin-top:2px!important;
}
.mt-3px{ /** note line no: 13 **/
    margin-top:3px!important;
}
/** Similar class name in bootstrap : .mt-1
.mt-4px{
    margin-top:4px!important;
}**/
.mt-5px{ /** note line no: 15 **/
    margin-top:5px!important;
}
.mt-6px{ /** note line no: 16 **/
    margin-top:6px!important;
}
.mr-2px{ /** note line no: 17 **/
    margin-right:2px!important;
}
.mr-5px{
	margin-right:5px!important;
}
.mr-6px{
	margin-right:6px!important;
}

.margin-icon-custom {
    margin-left: 0.44rem !important;
    margin-top: 0.45rem !important;
}
.mx-h-160, .mh-160{    /* only  mh-160  this name is needed */
    max-height: 160px; 
}
.offset-25 {
    margin-left: 25px;
}

/*== Padding ==*/
.pl-switch { /** note line no: 18 **/
    padding-left: 45px !important;
}
.pl-sm-55 { /** note line no: 19 **/
    padding-left: 55px !important;
}
 
.px-05{
    padding-left: 0.05rem!important;
    padding-right: 0.05rem!important;
} 
.video-padding {
    padding: 10px;
}

/*== Border ==*/
.border-body{
    border-color:#787878!important;
}
.b-1 {
    border: 1px solid;
}
.bl-green-7px{
    border-left: 7px solid #37bc9b !important;
}
.bl-danger-7px{
    border-left: 7px solid #f05050 !important;
}
.bl-warning-7px{
    border-left: 7px solid #ff902b !important;
}
.bl-primary-3{
    border-left: 0.7rem solid #5d9cec !important;
}
.bl-info-3{
    border-left: 0.7rem solid #23b7e5 !important;
}
.bl-warning-3{
    border-left: 0.7rem solid #ff902b !important;
}
.bl-green-3{
    border-left: 0.7rem solid #37bc9b !important;
}
.bl-purple-3{
    border-left: 0.7rem solid #7266ba !important;
}
.bl-danger-3{
    border-left: 0.7rem solid #f05050 !important;
}
.bl-medium {
    border-left-width: 0.4rem!important;
}
.bl-gray-3 {
    border-left: 0.7rem solid #7c8181;
}
.border-green {
    border-color: #37bc9b !important;
}
.border-dashed {
    border-style: dashed !important;
}
.border-gray-dark{
    border-color:#b5bdc0!important;
}
.border-top-right-rounded{
    border-top-right-radius: 0 !important;
}
.border-bottom-right-rounded{
    border-bottom-right-radius: 0 !important;
}
.border-top-left-rounded{
    border-top-left-radius: 0 !important;
}
.border-bottom-left-rounded{
    border-bottom-left-radius: 0 !important;
}

/*== Button ==*/
.btn {
    font-size: 1rem;
}
.btn-outline-warning:active, .btn-outline-warning:focus {
    color: #ff902b !important;
}
a.btn-pin {
    transition: transform .2s;
}
a.btn-pin:hover {
    background-color: white !important;
    -webkit-box-shadow: inset 2px 2px 12px 4px rgba(93, 156, 236, 0.40);
    -moz-box-shadow: inset 2px 2px 12px 4px rgba(93, 156, 236, 0.40);
    box-shadow: inset 2px 2px 12px 4px rgba(93, 156, 236, 0.40);
    -ms-transform: scale(1.06); /* IE 9 */
    -webkit-transform: scale(1.06); /* Safari 3-8 */
    transform: scale(1.06);
}
a.btn-pin:focus {
    background-color: #ebf5ff !important;
    -webkit-box-shadow: inset 2px 2px 12px 4px rgba(93, 156, 236, 0.40) !important;
    -moz-box-shadow: inset 2px 2px 12px 4px rgba(93, 156, 236, 0.40) !important;
    box-shadow: inset 2px 2px 12px 4px rgba(93, 156, 236, 0.40) !important;
    -ms-transform: scale(1.00); /* IE 9 */
    -webkit-transform: scale(1.00); /* Safari 3-8 */
    transform: scale(1.00);
}
a.btn-pin:active {
    background-color: white !important;
    -webkit-box-shadow: inset 2px 2px 12px 4px rgba(93, 156, 236, 0.40);
    -moz-box-shadow: inset 2px 2px 12px 4px rgba(93, 156, 236, 0.40);
    box-shadow: inset 2px 2px 12px 4px rgba(93, 156, 236, 0.40);
    -ms-transform: scale(1.06); /* IE 9 */
    -webkit-transform: scale(1.06); /* Safari 3-8 */
    transform: scale(1.06);
}
.btn-circle-custom{
    width: 25px!important;
    height: 25px!important;
    text-align: center;
    font-size: 12px;
    line-height: 25px!important;
    border-radius: 500px;
    padding: 0;
    border: 0;
}
.btn:hover .text-green-hover {
    color: #37bc9b !important;
}
.btn-outline-yellow{
    border: 1px solid #fad732!important;
    color: #fad732!important;
}
.btn-outline-yellow:hover{
    background-color: #fad732!important;
    color: #ffffff!important;
}

.btn-upload {
    position: absolute;
    text-align: center;
    bottom: 10px;
    left: 0;
    width: 100%;
}

/*== Modal ==*/
.modal-dialog {
    overflow-y: initial !important;
}
.modal-body {
    max-height: calc(100vh - 200px);
    overflow-y: auto;
}
.modal-body.no-scrollbar {
    max-height: calc(100vh) !important;
    overflow-y: initial !important;
}
.modal-body.adjusted-footer {
    max-height: calc(100vh - 300px);
    overflow-y: auto;
}
.modal-body.no-scrollbar-rem {
    max-height: calc(100rem) !important;
    overflow-y: initial !important;
}

/*== All positioning class: top, left, right, bottom ==*/
.z-index-1{
    z-index:1;
}
.top-10 {
    top: 10px;
}
.top30 {
    top: 30%;
}
.top-0 {
    top: 0 !important;
}
.top-2 {
    top: 0.2rem!important;
}
.top-50 {
    position: relative;
    top: 50px;
}
.top-xs{
    top:0.5rem!important;
}
.top-2-negetive{
    top:-0.3rem!important;
}
.left-2 {
    left: 0.2rem !important;
}
.left-0 {
    left: 0 !important;
}
.left-1{
    left:0.8rem!important;
}
.right {
    right: 5%;
    z-index: 1000;
}
/*Used for "View Only" icon with "Quick Help" icon*/
.right-25 {
    right:2.5rem!important;
}
.right-35 {
    right: 3.5rem !important;
    z-index: 1000;
}
.right-57 {
    right: 5.7rem !important;
    z-index: 1000;
}
.right-0 {
    right: 0 !important;
}
.right-1 {
    right: 1rem !important;
}
.right-4 {
    right: 4rem !important;
}
.right-xs{
    right:0.7rem!important;
}
.bottom30 {
    bottom: 30%;
}
.bottom-0 {
    bottom: 0 !important;
}
.bottom-1 {
    bottom: 1rem !important;
}
.allreport-button-text-top {
    top: -2px;
}

/*== Form ==*/
.form-check-input {
    position: static;
}
.input-group-addon {
    background-color: #fff;
}
.form-control {
    color: #000;
    line-height: 1.8;
    height: 2.8rem;
    padding-top: .75em;
    padding-left: .75em;
    padding-bottom: 0;
    font-size: 1rem;
}
/*below class is used to handle uniform blue border for valid controls having info icon beside them but hidden based on condition [introduced in DSID of Student Personal tab on 10th Aug, 2023]*/
.form-control-custom {
    border-right:1px solid #dde6e9!important;
    border-bottom-right-radius: 4px!important;
    border-top-right-radius: 4px!important;
}
.form-control-custom:focus:not(.input-validation-error) {
    border-color: var(--primary)!important;
}
.input-group-text {
    padding-top: .7rem;
}
.date .input-group-text {
    padding-top: .4rem!important;
}
.has-float-label label, .has-float-label > span {
    font-size: 85% !important;
    top: .2em !important;
}
.has-float-label .form-control:placeholder-shown:not(:focus) + * {
    font-size: 110% !important;
    opacity: 1 !important;
    top: .75rem !important;
}
.has-float-label label::after, .has-float-label > span::after {
    height: 0 !important;
}
.has-float-label {
    margin-bottom: 0 !important;
}
/*====== Dropdown custom css =====*/
/* for transparent dropdown */
.select-transparent{
    width: 6.9rem!important;
}
.select-transparent .custom-select-label{
   background: transparent !important;
   color: #fff!important;
}
.select-transparent select{
    border: none;
    color: #fff!important;
    padding: 0 0.6rem 0 0.5rem!important;
    margin: 0!important;
    height: auto!important;
    font-size: 1.125rem!important;
    font-weight: normal!important;
}
.select-transparent select option{
    color: #656565 !important;
    font-size: 1rem!important;
}
.select-transparent .custom-select-label:after{  
	border-color: #fff transparent transparent transparent;
    right: 0.1rem!important;
    top:0.95rem!important;
}

/*has-float-label-multiline*/
.has-float-label-multiline label, .has-float-label-multiline > span{
    top: 0.08em !important;
    background-color: #fff !important;
    padding-top: .2em !important;
    padding-bottom: .2em !important;
    width: calc(100% - 45px);
}
.has-float-label-multiline .form-control:placeholder-shown:not(:focus) + * {
    top: .45rem !important;
}
.has-float-label-multiline .form-control:disabled ~ span, .has-float-label-multiline .form-control[readonly] ~ span{
     background-color: #edf1f2!important;
 }
/*Fix for Boostrap select picker:
>> arrow show problem
>> Drop down size issue*/
.bootstrap-select>.btn-light.disabled, .bootstrap-select>.btn-light:disabled{
    opacity: 1!important;
    background-color: #f1f1f1!important;
    border-color: #f1f1f1!important;
}

.bootstrap-select .dropdown-toggle::after, .bootstrap-select .dropup .dropdown-toggle::after {
    border-top: 0.3em solid!important;
    border-right: 0.3em solid transparent!important;
    border-bottom: 0!important;
    border-left: 0.3em solid transparent!important;
}
.bootstrap-select>.dropdown-menu.show{
    min-width: 100%!important; 
    position: absolute;
    top: 0px;
    left: 0px; 
}


/*input field custom css*/
.input-validation-error {
    border-color: red !important;
}
.input-group-text {
    font-size: 1rem;
}
.checked input[type=radio]:disabled + span {
    border-color: #5d9cec !important;
}
.checked input[type=radio]:disabled + span.fa-circle:before {
    color: #5d9cec !important;
}
.checked input[type=checkbox]:checked:disabled + span {
    border-color: #5d9cec !important;
    background-color: #5d9cec !important;
    color: #fff !important;
}
.form-control-text-middle {
    padding-top: 0 !important;
}
.lh-inherit {
    line-height: inherit !important;
}
.icon-ellipsis-sm {
    line-height: 1.35;
    border-width:1.5px;
}
.custom-select-label .custom-select {
    background: 0 0 !important;
    z-index: 1;
}
.custom-select-label {
    background: #fff !important;
    border-radius: .25rem !important;
}
.custom-select-label:after {
    content: " " !important;
    color: #000;
    position: absolute;
    right: .7rem;
    top: 50%;
    z-index: 0;
    border-color: #343a40 transparent transparent transparent;
    border-style: solid;
    border-width: 5px 4px 0 4px;
    pointer-events:none;
}

/*== ezr all class and Layout bg ==*/
.ezr-root-layout_2019-2020 {
    background: url(../Content/Images/bg-2019-2020.jpg) no-repeat center center fixed;
    background-size: cover;
    opacity: .95;
    -webkit-background-size: cover;
    -moz-background-size: cover;
    -o-background-size: cover;
    min-height: 100%;
}
.ezr-root-layout_2020-2021 {
    background: url(../Content/Images/bg-2020-2021.jpg) no-repeat center bottom fixed;
    background-size: cover;
    opacity: .95;
    -webkit-background-size: cover;
    -moz-background-size: cover;
    -o-background-size: cover;
    min-height: 100%;
}
.ezr-root-layout_2021-2022 {
    background: url(../Content/Images/bg-2021-2022.jpg) no-repeat center bottom fixed;
    background-size: cover;
    opacity: .95;
    -webkit-background-size: cover;
    -moz-background-size: cover;
    -o-background-size: cover;
    min-height: 100%;
}
.ezr-root-layout_2022-2023 {
    background: url(../Content/Images/bg-2022-2023.jpg) no-repeat center bottom fixed;
    background-size: cover;
    opacity: .95;
    -webkit-background-size: cover;
    -moz-background-size: cover;
    -o-background-size: cover;
    min-height: 100%;
} 
.ezr-root-layout_2023-2024 {
    background: url(../Content/Images/bg-2023-2024.jpg) no-repeat center bottom fixed;
    background-size: cover;
    opacity: .95;
    -webkit-background-size: cover;
    -moz-background-size: cover;
    -o-background-size: cover;
    min-height: 100%;
}
.ezr-root-layout_2024-2025 {
    background: url(../Content/Images/bg-2024-2025.jpg) no-repeat center bottom fixed;
    background-size: cover;
    opacity: .95;
    -webkit-background-size: cover;
    -moz-background-size: cover;
    -o-background-size: cover;
    min-height: 100%;
}
.ezr-root-layout_2024-2025_32nOST {
    background: url(../Content/Images/bg-2024-2025-32nOST.jpg) no-repeat center bottom fixed;
    background-size: cover;
    opacity: .95;
    -webkit-background-size: cover;
    -moz-background-size: cover;
    -o-background-size: cover;
    min-height: 100%;
}

.ezr-root-layout_2025-2026 {
    background: url(../Content/Images/bg-2025-2026.jpg) no-repeat center bottom fixed;
    background-size: cover;
    opacity: .95;
    -webkit-background-size: cover;
    -moz-background-size: cover;
    -o-background-size: cover;
    min-height: 100%;
}
/*.wizard>.steps .current a, .wizard>.steps .current a:hover, .wizard>.steps .current a:active {*/
    /*background-color: #FF0022!important;*/
    /*background-color: var(--primary)!important;*/
    /*background-color:inherit;*/
    /*color: #fff;
    cursor: default;*/
/*}*/
.ezr-customer-lg {
    color: #fff;
    font-weight: 700 !important;
    font-size: 1.2rem !important;
}
.ezr-customer {
    color: #fff;
    font-size: 1.1rem !important;
    padding-top: .9rem !important;
    padding-bottom: .9rem !important;
}
.ezr-root-footer {
    background-color: #cfd2d7;
    font-size: .9rem;
}
.ezr-ssl-seal {
    width: 130px;
    height: 61px;
    margin: auto;
    background-color: #fff;
    border-radius: 5px;
}
.ezr-ssl-seal img {
    height: 58px;
	padding-top: 3px !important;
}
.ezr-pageheading {
    background-color: #fff !important;
    border-bottom: 1px solid #cfdbe2;
}
.ezr-mandatory {
    color: #a4a4a4;
    margin: 0;
    padding: 0;
}
.ezr-optional {
    color: #a4a4a4;
    margin: 0;
    padding: 0;
    white-space: nowrap;
}
.ezr-optional::after {
    content: " (Optional)";
    font-size: 75%;
}
.ezr-optl {
    color: #a4a4a4;
    margin: 0;
    padding: 0;
    white-space: nowrap;
}
.ezr-optl::after {
    content: " (Optl)";
    font-size: 75%;
}
.ezr-button-bar {
    border-top: 1px solid #e4eaec;
    height: 60px;
    opacity: .95;
    background: #fff;
    padding-top: .75rem;
}
.ezr-mobile-heading-nomenu {
    font-size: 1.1rem;
    line-height: 1.1;
    color: #666;
    margin: -15px;
    margin-bottom: 15px;
    padding: 15px;
    font-weight: 400;
    background-color: #eee;
    border-bottom: 1px solid #cfdbe2;
}
.ezr-mobile-heading{
    font-size: 1.1rem;
    line-height: 1.1;
    color: #666;
    margin: -15px;
    margin-bottom: 15px;
    padding: 15px;
    font-weight: 400;
    background-color: #eee;
    border-bottom: 1px solid #cfdbe2;
}
.load-icon-new {
    text-align: center;
    padding: 70px 0;
}
.content-wrapper {
    min-width: 300px;
}
.content-wrapper .content-heading {
    color: #656565;
    background-color: #fff;
}
.topnavbar .navbar-nav > .nav-item > .nav-link {
    padding: 1rem .9rem;
    font-size: 1rem;
}
.sidebar .nav-heading {
    font-size: 1rem;
}
.sidebar-nav {
    font-size: 1rem;
}
.datepicker th {
    font-size: 1rem !important;
}
.footer-container {
    background-color: #f5f7fa !important;
}
.card-default {
    border-top-width: 1px;
    border-color: #cfdbe2;
}
.card-hover:hover {
    box-shadow: 0 4px 4px rgba(0,0,0,.2) !important;
}

/*== Table and Datatable custom css classes ==*/
table.dataTable.dtr-inline.collapsed > tbody > tr[role=row] > td:first-child::before, table.dataTable.dtr-inline.collapsed > tbody > tr[role=row] > th:first-child::before {
    background-color: #5d9cec;
}
table.dataTable > tbody > tr.child ul.dtr-details {
    display: block;
}
table.dataTable.dtr-inline.collapsed > tbody > tr[role=row] > td:first-child:before, table.dataTable.dtr-inline.collapsed > tbody > tr[role=row] > th:first-child:before {
    top: 36% !important;
    left: 30% !important;
}
table.dataTable thead td, table.dataTable thead th, table.dataTable.no-footer {
    border-bottom: 1px solid #eee;
}
.lock::after, .lock::before {
    opacity: 0 !important;
}
.dataTable td {
    word-break: break-all;
    word-wrap: break-word;
}
.dataTable .datatable-group {
    position: relative;
    height: 30px;
    padding: 5px 0;
}
.dataTable .datatable-group .group {
    position: absolute;
    width: 100%;
    top: 0;
    padding-left: 10px;
    left: 0;
    height: 30px;
    line-height: 30px;
    border-bottom: 1px solid #d9dfe1;
}
.table-striped .sorting_1, .table-striped .sorting_2 {
    background-color: #fafafa !important;
}
.table-striped tr.odd .sorting_1, .table-striped tr.odd .sorting_2 {
    background-color: #f1f1f1 !important;
}
tr.group, tr.group:hover, .bg-group {
    background-color: #dddddd !important;
}
tr.group td {
    padding: .25rem 1rem !important;
}
.table-striped tbody tr.odd {
    background-color: #f9f9f9 !important;
}
.table-striped tbody tr:nth-of-type(odd) {
    background-color: #fff;
}
.table-bordered, .table-bordered td, .table-bordered th {
    border-color: #ddd !important;
}
table.dataTable tr.group td, tr.group, tr.group:hover {
    background-color: #d1e5f0!important;
    color: #1c2f3e !important;
    font-size: 1.15rem;
    padding-top: 0.1rem !important;
    padding-bottom: 0.1rem !important;
}
table.dataTable tbody tr:hover {
    background-color: #fffede !important;
}
table.dataTable tbody tr:hover td.sorting_1, table.dataTable tbody tr:hover td.sorting_2 {
    background-color: #f5f6e8 !important;
}
.dataTables_empty {
    text-align: left !important;
}
canvas {
    -moz-user-select: none;
    -webkit-user-select: none;
    -ms-user-select: none;
}
.cursor-default {
    cursor: default;
    pointer-events: none;
}
.cursor-default-active {
    cursor: default !important;
}
/** Similar class name in Angle Theme app.css : .clickable
.cursor-pointer {
    cursor: pointer;
}**/
.list-attendees {
    position: absolute;
    right: 0;
    top: -69px;
    height: 50px;
}
.list-attendees_FilterWidth {
    width: 40px;
}
.list-attendees_TopHeight {
    height: 30px;
}
.bootstrap-datetimepicker-widget.dropdown-menu {
    width: auto !important;
}
/** Similar class name in bootstrap : .shadow-none
.box-shadow-none {
    box-shadow: none !important;
}**/
.thumb152 {
    width: 152px !important;
    min-height: 152px !important;
}
.thumb100 {
    width: 100px !important;
    min-height: 100px !important;
}
.thumb35 {
    width: 35px !important;
    height: 35px !important;
}
.thumb28_35 {
    width: 28px !important;
    height: 35px !important;
}
/* Map Thumb icon */
.thumb-map{
    width: 4rem!important;
    height: 2.5rem!important;
}
.left-thumb35 {
    left: -0.6rem !important;
}

/*for Calendar Holiday mark*/
.thumb23 {
    width: 23px !important;
    height: 23px !important;
}

/*for Home button*/

.thumb30{
    width: 30px !important;
    height: 30px !important;
    line-height: 30px;
}
.number-thumb {
    height: 20px;
    width: 20px;
    border: 1.5px solid #909FA7;
    line-height: 17px;
    margin-right: 5px;
    font-size: 14px;
}




/*for profile image in Add/Edit Student/Parent/Contact*/
.profile-img {
    width: 100%;
    height: 165px;
    -o-object-fit: cover;
    object-fit: cover;
    -o-object-position: center;
    object-position: center;
    padding: 0.125rem;
    background-color: #f5f7fa;
    border: 1px solid #dee2e6;
    border-radius: 0.25rem;
}

/*class for positioning various icons (as required) at the top right conrer of the profile image*/
.profile-img-icons{
    top: -0.3rem;
    right: -0.3rem;
    background-color: #fff;
    line-height:21px;
}

.disabled-row {
    opacity: .9;
    background-color: #efefef;
    color: var(--inverse-alpha);
}
.disabled-row a.disabled {
    pointer-events: none !important;
    cursor: default;
    text-decoration: none;
}

.success-icon-color{
    color: #a5dc86 !important;
}

/* Modification of swal css*/
.swal-button {
    color: #fff;
    background-color: var(--primary);
}
.swal-button:not([disabled]):hover {
    background-color: var(--primary-dark) !important;
}
.swal-button:focus {
    outline: 0;
    box-shadow: none;
}
.swal-button--cancel {
    color: #5d9cec !important;
    background-color: transparent !important;
    background-image: none !important;
    border-color: #5d9cec !important;
}
.swal-button--cancel:not([disabled]):hover, .swal-button--cancel:hover {
    background-color: #5d9cec !important;
    color: #fff !important;
}
.swal-button--cancel:focus {
    outline: 0 !important;
    box-shadow: none !important;
}
.swal-footer {
    text-align: center !important;
        margin-top: 0;
}
/*This css using for modal only START*/
.swal-modal .swal-icon, .swal-icon, .swal-icon-resize{
   transform: scale(0.65) !important;
}
.transform-1{
    transform: scale(1) !important;
}
.m-tb-5{
    margin-bottom:-5px !important;
    margin-top:-5px !important;
}
.swal-modal{
    padding-top:10px;
}
.swal-modal .swal-icon {
    margin-bottom: 0;
    margin-top: 0;
}
.swal-modal .swal-title {
    margin: 0 ;
    padding: 0;
}
.swal-modal .swal-content {
    margin-top: 10px;
}

/* ---- question mark icon  ---- */
.border-question-icon{
    width: 57px;
    height: 57px;
    line-height: 57px;
    border: 3px solid #23b7e5;
    text-align: center;
    border-radius: 50%;
    padding: 0;
}
/* ---- question mark icon animation  ---- */
.fa-custom-animation{
    --fa-animation-duration: 2s; 
    /*--fa-animation-iteration-count: 1;*/ 
    opacity: 0.65
}
/*This css using for modal only END*/

@keyframes checkmark {
  0% { stroke-dasharray: 0 100; }
  100% { stroke-dasharray: 100 100; }
}
.modal-zoom.modal.fade .modal-dialog { 
    transform: scale(0.6); 
    transition-duration: 0.15s; 
 }
.modal-zoom.modal.fade.show .modal-dialog { 
    transform: scale(1) 
 }

/* Dropzone css custom classes */
.dropzone .dz-default.dz-message {
    font-size: 24px !important;
}
.dz-default {
    margin: .7em 0 !important;
}
.no-hover .row:hover {
    background-color: inherit !important;
}
.a-disabled a:not(.aEnableForReadOnly) {
    pointer-events: none !important;
    cursor: default;
    text-decoration: none;
}
.btn-view {
    position: absolute;
    top: 63px;
    right: 1rem;
    z-index: 121;
}
.popover-custom{
	max-width: 389px!important;
}
.popover-custom .popover-body{
	padding: 0!important;
}
.popover-custom-md{
	max-width: 350px!important;
}
.popover {
    -webkit-box-shadow: 2px 2px 6px -1px rgba(0,0,0,.55);
    -moz-box-shadow: 2px 2px 6px -1px rgba(0,0,0,.55);
    box-shadow: 2px 2px 6px -1px rgba(0,0,0,.55);
    border: 0;
}
.popover-header {
    background-color: var(--gray);
    color: #fff !important;
}
.dz-default {
    font-size: 25px !important;
}
.no-hover:hover, .alternate-color .bg-group:hover {
    background-color: #dddddd !important;
}
.text-break {
    word-wrap: break-word;
    word-break: break-all;
}
.word-break{
     word-wrap: break-word;
    word-break:keep-all;
}
.subheader-h-20 {
    height: 20px !important;
}
.subheader-line-100 {
    line-height: 100%;
    vertical-align: top;
}
.ReadOnly-row {
    opacity: 0.9;
    background-color: #edf6f6;
    color: var(--inverse-alpha);
}
.ReadOnly-row a.disabled {
    pointer-events: none !important;
    cursor: default;
    text-decoration: none;
    color: var(--muted);
}
.scrollable-custom{
    max-height: calc(100vh - 100px);
     /* max-height: 80%!important;  */
    overflow-y: auto!important;
}

.ScrollAfter175 {
    overflow: auto;
    height: 175px;
}
.AddSchoolDistrict {
    color: #37bc9b;
    font-weight: bold;
}
.AddNew {
    color: #37bc9b;
    font-weight: bold;
}
.row-hover:hover {
    background-color: var(--light);
}
.w-info {
    overflow-y: auto;
	max-height: 550px;
}
.box-info {
    right: 0;
    top: 59px;
    z-index: 10000;
}
.box-content {
    height: 350px;
    overflow: auto;
}
#toggleMenu {
    position: absolute;
	top: 19px;
	left: -50px;
	transform: rotate(-90deg);
	display: block;
	width: 70px;
}

/* for waived label */
.text-rotate {
    transform: rotate(-90deg);
    display: block;
}

/* IE10+ specific styles go here */
@media screen and (-ms-high-contrast: active), (-ms-high-contrast: none) {
    .ie-w-1 {
        width: 1.2rem !important;
        display: flex !important;
    }
}
.no-white-space{
     white-space:inherit!important;
}
.back-to-top {
    position: fixed;
    bottom: 10px;
    right: 10px;
    display: none;
    z-index: 100000;
}
.disableOpacity{
    opacity:0.65;
}
.disabled-control{
    background-color: #edf1f2 !important;
    border-color: #dde6e9 !important;
}
.line-height-inherit{
	line-height: inherit;
}
.overflow-visible {
     overflow: visible !important;
}

/*For fixed header of datatable and div table*/
/*==============================================================*/
/*DataTable*/
/*"fixedHeader-floating" is datatable class, we are overwriting this for showing a shadow in fixed header */
.fixedHeader-floating {
    -webkit-box-shadow: 0px 6px 5px -5px rgba(0,0,0,0.30);
    -moz-box-shadow: 0px 6px 5px -5px rgba(0,0,0,0.30);
    box-shadow: 0px 6px 5px -5px rgba(0,0,0,0.30);
}
.WorkPhoneExtnLeft{
    left: 0.2rem !important;
}
.Number-circle {
    width: 33px !important;
    height: 33px !important;
    text-align: center;
    font-size: 12px;
    border-radius: 500px;
    padding: 0;
    border-color: white !important;
}
.opacity-zero{
    opacity: 0 !important;
}
.opacity-50{
    opacity: 0.5 !important;
}
.floating-table-head {
    z-index: 200 !important;
}
/*DIV table*/
.div-fixedHeader-floating {
    -webkit-box-shadow: 0px 6px 5px -5px rgba(0,0,0,0.30);
    -moz-box-shadow: 0px 6px 5px -5px rgba(0,0,0,0.30);
    box-shadow: 0px 6px 5px -5px rgba(0,0,0,0.30);
}
.sticky {
	position: fixed;
	top: 55px;
	z-index: 1;
	background-color: #fff;
}
.sticky + .fixed-content {
	padding-top: 55px;
}
/*==============================================================*/
.selected-cell {
    background-color: transparent;
}
.selected-cell:hover {
    background-color: #f3edbd !important;
}
.selected-cell-card:hover, .selected-cell-card:active {
    background-color: #f3edbd !important;
}
.TableCellHyperlinkNormal{
    height:100%;
    width:100%;
}
.TableContactCellHyperlink{
    height:100%;
    width:100%;
    display: flex; 
    justify-content: center;
    align-items:center;
}
/** Similar class name in bootstrap 4.3 is .text-wrap, but in 4.0 there is no such default class for wrap**/
.wrap{
    white-space: normal!important;
}

/** Similar class name in bootstrap : .text-nowrap
.no-wrap{
    white-space: nowrap;
}**/

/* for delete button show hide */
.link-delete{
	display: none;
	position: absolute;
	left: -1.5rem;
}
.delete-hover:hover .link-delete {
  display: inline-block;
}
.link-delete-right{
	display: none;
	position: absolute;
}
.delete-hover:hover .link-delete-right {
  display: inline-block;
}
.ui-timepicker{
    text-align: left!important;
}
/*Selectbox Floating level custom css part*/ 
.floating-label {
    position:relative;  
}
.floating-label select {
    display:block;
}

@-moz-document url-prefix() {
    .floating-label select {
        padding-left: 0.5rem !important;
    }
}

.floating-label .custom-select-label:after{
	top:46%!important;
	z-index: 0!important;
	position: absolute;
}
.floating-label select ~ span {
    font-size:1.1rem!important;
    position:absolute;
    pointer-events:none;
    left:0.7rem;
    padding-bottom: 7px;
    top:13px!important;
    transition:0.2s ease all; 
    -moz-transition:0.2s ease all; 
    -webkit-transition:0.2s ease all;
    background-color: #fff;
    width: 65%;
    display: block;
}
.floating-label select.disabled {
    cursor: default;
    pointer-events: none;
    border-color:#dde6e9 !important;
    z-index: 0!important;
    background-color: #edf1f2 !important;
    color:black;
}
.floating-label select.disabled ~ span {
	background-color: #edf1f2 !important;
}
.floating-label .disabled-select-label{
	cursor: default;
    pointer-events: none;
    background-color: #edf1f2 !important;
}
.floating-label .disabled-select-label:after{
	cursor: default;
    pointer-events: none;
}

/* [value="0"] added to handle dropdowns having <option value="0">Select</option> instead of <option value="">Select</option> */
/* EXAMPLE :- Staff > Prof Dev */
.floating-label select:focus ~ span , .floating-label select:not([value=""],[value="0"]):valid ~ span {
    top:4px!important;
    font-size:85% !important;	
    -moz-transition:0.2s ease all; 
    -webkit-transition:0.2s ease all;	
    padding-bottom: 0;
}
/* active state */
.floating-label select:focus ~ .floating-label select:focus ~  {
    -moz-transition:0.2s ease all; 
    -webkit-transition:0.2s ease all;
}
.floating-label select:focus ~  {
    -webkit-animation:inputHighlighter 0.3s ease;
    -moz-animation:inputHighlighter 0.3s ease;
    animation:inputHighlighter 0.3s ease;
}
/** css for disabled value show for floating label of dropdown**/
.floating-label.disabled-value .ezr-mandatory {
    font-size: 85% !important;
    top: 2px !important;
    background: none !important;
}

/** Editable Select Start**/
/** floating-label class also used along with EditableSelect**/
.EditableSelectClass .floating-label input {
	display:block;
}
@-moz-document url-prefix() {
    .EditableSelectClass .floating-label input {
        padding-left: 0.5rem !important;
    }
}
.EditableSelectClass .floating-label input ~ span {
    font-size:1.1rem!important;
    position:absolute;
    pointer-events:none;
    left:0.7rem;
    padding-bottom: 7px;
    top:13px!important;
    transition:0.2s ease all; 
    -moz-transition:0.2s ease all; 
    -webkit-transition:0.2s ease all;
    background-color: #fff;
    width: 65%;
    display: block;
}
.EditableSelectClass .floating-label input.disabled {
	cursor: default;
	pointer-events: none;
	border-color:#dde6e9 !important;
	z-index: 0!important;
	background-color: #edf1f2 !important;
	color:black;
}
.EditableSelectClass .floating-label input.disabled ~ span {
	background-color: #edf1f2 !important;
}
.EditableSelectClass .floating-label input:focus ~ span , .EditableSelectClass .floating-label input:not([value=""],[value="0"]):valid ~ span {
    top:4px!important;
    font-size:85% !important;	
    -moz-transition:0.2s ease all; 
    -webkit-transition:0.2s ease all;	
    padding-bottom: 0;
}
/* active state */
.EditableSelectClass .floating-label input:focus ~ .floating-label input:focus ~  {
	-moz-transition:0.2s ease all; 
	-webkit-transition:0.2s ease all;
}
.EditableSelectClass .floating-label input:focus ~  {
	-webkit-animation:inputHighlighter 0.3s ease;
	-moz-animation:inputHighlighter 0.3s ease;
	animation:inputHighlighter 0.3s ease;
}
/** Editable Select End**/

.text-overflow {
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}
.text-overflow:hover {
    overflow: visible;
    width: auto !important;
    display: inline;
    white-space: normal;
}
/* ---- for attendance screen ----- */
.dropdown-menu .dropdown-item:hover{
	background-color: #5d9cec!important;
	color: #fff!important;
}
.text-overflow-custom {
    white-space: nowrap; 
    width: 85%;
    overflow: hidden;
    text-overflow: ellipsis;
}
/** Similar class name in bootstrap : .invisible
.visibility-hidden{
    visibility: hidden;
}**/

/** Similar class name in bootstrap : .align-items-start
.align-items-top{
    align-items:flex-start!important;
}**/
.tab-height {
    height: 3.1rem !important;
}
/*Class added for header datables in attendance entry screens*/
.datatable-bb0 thead th, .datatable-bb0 thead, .datatable-bb0 { 
    border-bottom: 0px!important;
}
/** Similar class name in bootstrap : .text-decoration-none
.text-decoration-none {
    text-decoration: none!important; 
}**/

/************  AREA HIGHLIGHT CLASSES  **********/
.area-highlight-opacity-6 {
    opacity: 0.6;
}
.area-highlight-active-form {
    position: relative !important;
    z-index: 100000 !important;
    background-color: #ECEFF4 !important;
    padding: 0px !important;
}
.area-highlight-active-form .highlight-form-overflow{
    overflow-y: auto!important;
    max-height: 400px!important;
}

/************  CENTER ALIGNED DROPDOWN  **********/
.align-dropdown-content-center {
    text-align-last: center;
}
.highlight-margin-bottom .area-highlight-active-form .card {
    margin-bottom: 0.5rem !important;
}

/*Custom Tabs*/
.tab-style-custom .tabs-style-underline nav a{
    border-left:0px!important;
}
.tab-style-custom .tabs-style-underline nav li:last-child a {
    border-right:0px!important;
}
/*----------------------------   Video icon CSS -------------------------------*/
.btn-video{
    right:0.39rem;
    transition: 0.4s;
    text-decoration: none;
    top: .29rem !important;
    z-index: 1000!important;
    display: block;
}
.btn-video a {
    height: 35px;
    width:35px;
    transition: 0.4s;
    text-align: center; 
    cursor: pointer;
    padding-right:1rem;
}
.btn-video a i {
    font-size: 28px !important;
}
.btn-video a:hover i {
    font-weight:bold !important;
    color:var(--inverse);
}
/*to make inverse effect in ASP pages*/
.video-icon-solid:hover i{
    font-weight:bold!important;
    color:var(--inverse);
}
/* --------------------  Quick Help CSS ------ START ---------------------------*/
.info-sidenav {
    position: absolute;
    right: calc(-100%);
    transition: 0.4s;
    width: 100%;
    text-decoration: none;
    top: 0.5rem !important;
    z-index: 1031!important;
    cursor: default;
    display: flex;
} 
.btn-sidenav{
    border-radius: 5px 0 0 5px;
    /* padding: 0px 10px; 
       position: absolute;
    */
    transition: 0.4s;
    font-size: 28px;
    text-align: center;
    cursor: pointer;
    display: block; 
    right: 1.2rem;
    top: 0.15rem !important;
    z-index: 1000;
}
.btn-sidenav-collapse{
    border-radius: 5px 0 0 5px;
    padding: 0px 8px;
    transition: 0.4s;
    font-size: 25px;
    text-align: center;
    cursor: pointer;
    background: #131e26!important;
    color: #fff!important;
    position: absolute;
    left: -33px;
    display: block;
}
.btn-sidenav:hover, .btn-sidenav-collapse:hover{
    font-weight: bold!important;
}
.btn-sidenav-fixed:hover{
    color: #131e26!important;   
    font-weight: bold!important;
}
.info-sidenav .info-container{ 
    width: 100%;
    opacity: 0.5;
    transition: 0.4s;
}
.info-sidenav-hover .info-container{ 
    width: 100%;
    opacity: 1;
}
.info-sidenav .info-container .content{
    background-color: #F9F9F9!important;
    border: 1px solid rgba(0, 0, 0, 0.12) !important;
    box-shadow: 0 4px 4px rgba(0.5, 0, 0, 0.40)!important;
    padding: 10px;
    transition: 0.4s;    
    color: #000000!important;
    min-height: 100%;
}
.info-container-font{
    font-family: "Source Sans Pro", sans-serif!important;
}
 .info-container-font p, .info-container-font a, .info-container-font ul, .info-container-font li, .info-container-font p span, .info-container-font li span, .info-container-font span, .info-container-font a span{
    font-family: "Source Sans Pro", sans-serif!important;
    font-size: 1rem!important;
}
.info-container-font h1, .info-container-font h2, .info-container-font h3, .info-container-font h4, .info-container-font h5, .info-container-font h6, .info-container-font h1 span, .info-container-font h2 span, .info-container-font h3 span, .info-container-font h4 span, .info-container-font h5 span, .info-container-font h6 span {
    font-family: "Source Sans Pro", sans-serif!important;
    font-size: 1.25rem!important;
}
.info-container-font h3#hQuickHelpTopic, #hQuickHelpTopic{
    font-family: "Source Sans Pro", sans-serif!important;
    font-size: 1.5rem!important;
    color: #2c5e9d!important;
}



/*** ================ Responsive Media Query Start =============== ***/
/*TO REMOVE SCROLLER IN MD VIEW OF LEFT MENU PANEL*/

/**== upto lg Breakpoint ==**/
@media only screen and (max-width: 1199.99px) {
    .br-xs-sm-md-lg-0{
        border-right: none !important;
    }
    .bl-xs-sm-md-lg-0{
        border-left: none !important;
    }
    .col-custom-12{
        flex: 0 0 100%!important;
        max-width:100%!important;
    }
    .bb-xs-sm-md-lg-0 {
        border-bottom: none !important;
    }
    .rounded-b-0-lg{
  	    border-bottom-left-radius: 0px !important;
	    border-bottom-right-radius: 0px !important;
    }
    .rounded-t-0-lg{
  	    border-top-left-radius: 0px !important;
	    border-top-right-radius: 0px !important;
    }
}

/**== upto md Breakpoint ==**/
@media only screen and (max-width: 991.99px) {
      /* -----  Header Search ----- */
    .w-search-field{
        max-width: 100%!important;
    }
    .search-mobile-initial{
        position:absolute;
    }
    .search-mobile{
        position:relative;
    }
    .search-mobile-initial .w-search-field{
        position: absolute!important;
        left: 0;
        width:0 !important;
        opacity: 0!important;
        z-index: -1!important; 
    }
    .search-mobile .w-search-field{
        position: relative!important;
        left:0;
        transition: all ease-in 0.3s!important;
        opacity: 1!important;
        width:14rem !important;
    }
    /* -----  Header Search ----- */


    .br-xs-sm-md-0 {
        border-right: none !important;
    }
    .bl-xs-sm-md-0 {
        border-left: none !important;
    }
    .bb-xs-sm-md-1{
        border-bottom: 1px solid rgba(0, 0, 0, 0.12)!important;
    }
    .bb-xs-sm-md-2{
        border-bottom-left-radius: 0!important;
        border-bottom: 1px solid rgba(0, 0, 0, 0.12)!important;
    }
    .bb-xs-sm-md-0 {
        border-bottom: none !important;
    }
    .bb-xs-sm-md-1 {
        border-bottom: 1px solid rgba(0, 0, 0, 0.12) !important;
    }
    /*temporary class to align ReadOnly right till QuickHelp & Training Video icon hidden in lower resolutions*/
    .right-xs-sm-md-0{
        right:1rem!important;
    }
    .col-custom-md-12{
        flex: 0 0 100%!important;
        max-width:100%!important;
    }
    .dropdown-custom{
        right: 0!important;
        min-width:fit-content!important;
        /*width: 9.5rem!important;*/
    }
}

/**== upto sm Breakpoint ==**/
@media only screen and (max-width: 767.99px) {
      /* -----  Header Search ----- */
    .search-mobile{
        position:static;
    }
    .no-scrollbar-body{
        overflow: hidden;
        max-height: calc(100vh - 150px);
    }
    .w-search{
        width: auto!important;
    }
    /* -----  Header Search ----- */


    .w-monthly-schedule {
        width: 19.2rem !important;
    }
    .ViewOnly {
        right: 0.8rem;
        top: 0.4rem;
        z-index: 1000;
    }
    .floating-button{
        top: 0!important;
        height: 42px!important;
        z-index: 1000;
    }
    .br-xs-sm-0{
        border-right: none!important;
    }
    .bl-xs-sm-0{
        border-left:  none!important;
    }
    .bb-xs-sm-1{
        border-bottom: 1px solid rgba(0, 0, 0, 0.12)!important;
    }
    .bb-xs-sm-0{
        border-bottom: none !important;
    }

        /* -----  Header Search ----- */
    .search-mobile .w-search-field{
        width:14rem !important;
    }
     /* -----  Header Search ----- */
     .rounded-right-lg-0{
        border-top-right-radius:.25rem !important;
        border-bottom-right-radius:.25rem !important;
    }
}

/**== upto xs Breakpoint ==**/
@media only screen and (max-width: 575px) {
    .w-info{
        width: 300px;
    }
    .bb-xs-0{
        border-bottom: none!important;
    }
    .br-xs-0{
        border-right: none!important;
    }
    .bl-xs-0{
        border-left:  none!important;
    }
   .right-xs-3 {
        right: 3rem !important;
    }
    .info-sidenav-hover {
        right: -20px!important;
        width: 99.5%!important;
    }

    /* -----  Header Search ----- */
    .search-container .search-content{
        right:0!important;
        left:auto!important;
    } 
    .search-mobile .w-search-field{
        width:12rem !important;
    }
    /* -----  Header Search ----- */

    .bl-xs-1{
        border-left: 1px solid rgba(0, 0, 0, 0.12)!important;
    }
}

/* -----  Header Search ----- */
@media only screen and (max-width:420px){
    .search-mobile .w-search-field{
        width:9rem !important;
    }
}
/* -----  Header Search ----- */

@media only screen and (max-width:360px) {
    .w-info {
        width: 260px !important;
    }
    .wd-xxl {
        width: 300px !important;
    }

    /* -----  Header Search ----- */
    .search-mobile .w-search-field{
        width:8rem !important;
    }
    /* -----  Header Search ----- */

}

@media only screen and (min-width:361px) and (max-width:550px) {
    .w-info {
        width: 300px !important;
    }
}

@media only screen and (min-width: 320px) {
    .topnavbar .dropdown .dropdown-menu-right {
        right: 0;
        left: auto;
        top: 56px;
        width: 265px;
    }
}

@media only screen and (min-width: 991px) {
    .barcode-staff .collapse, .barcode-staff .collapse:not(.show) {
        display: block !important;
    }
    .barcode-staff .CollapseIcon {
        display: none !important;
    }
    .border-lg-0{
        border: 0!important;
    }
    .TestAssessmentGroup {
        overflow: auto;
        height: 184px;
    }
    .TestAssessment {
        overflow: auto;
        min-height: 46px;
    }
}

@media only screen and (min-width:1024px) {
    .TableCellHyperlink{
        height:100%;
        width:100%;
        display: flex; 
        justify-content: center;
        align-items:center;
    }
}

/*Issue 11552: custom width for modal dialogues (applicable for all modals if used)*/
@media only screen and (min-width: 576px) {
    .w-sm-auto {
        width: auto !important;
    }

    .w-sm-10{
        width: 10rem!important;
    }
    .modal-custom-400{     /*between modal-sm and modal-md*/
         max-width:400px!important;
    }
    .modal-custom-600{     /*between modal-md and modal-lg*/
         max-width:600px!important;
    }
    .modal-custom-1200{
         max-width:1200px!important;
    }
}

@media only screen and (min-width: 768px) {
    .w-monthly-schedule {
        width: 20rem !important;
    }
    .bb-md-lg-1{
        border-bottom: 1px solid rgba(0, 0, 0, 0.12)!important;
    }
    .ViewOnly{
        float: right;
        position: absolute;
        right: 0.85rem;
        bottom: -2.3rem;
        top: 0.25rem;
        z-index: 1000;
        height: 30px!important;
    }
    .floating-button {
        float: right;
        position: absolute;
        right: 0.8rem;
        bottom: -2.3rem;
        top: 0;
        z-index: 1000;
        height: 42px!important;
    } 
    /*Custom css for fixed width.............................*/
    /*1. col-12 for XS & SM, fixed width from MD*/
    .sidebar:not(.show-scrollbar) {
        margin-right: -17px;
        overflow-y: scroll;
    }
    .swal-fixed-md {
        width: 36.5rem!important;
        flex-basis: revert;
        flex-grow: revert;
    }
    /* --- for mozilla max-width ---  */
    .br-xs-sm-0{
        border-right: 1px solid rgba(0, 0, 0, 0.12)!important;
    }
    .bl-xs-sm-0{
        border-left: 1px solid rgba(0, 0, 0, 0.12)!important;
    }
    .bb-xs-sm-1{
        border-bottom: none!important;
    }
    .btn-md-unstyle{
        width: auto!important;
        border: none!important;
        padding-top: 0!important;
        padding-bottom: 0!important;
        margin-top: 0!important;
        margin-bottom: 0!important;
        display: inline!important;
        background: none!important;
    }
    .btn-md-unstyle:hover, .btn-md-unstyle:focus, .btn-md-unstyle.active, .btn-md-unstyle:active{
        background: none!important;
        border: none!important;
        color: #548dd5!important;
    }
}

@media only screen and (min-width: 992px ) {
    /*Moving the class to line no 2076 to give priority for responsive behaviour*/
    /*.w-lg-11{
        width: 11.5rem!important;
    }*/
    
    .w-search{
        width: 38rem !important;
    }
    
    .position-lg-absolute{
        position:absolute!important;
    }
    .btn-lg-unstyle{
        width: auto!important;
        border: none!important;
        padding-top: 0!important;
        padding-bottom: 0!important;
        margin-top: 0!important;
        margin-bottom: 0!important;
        display: inline!important;
        background: none!important;
    }
    .btn-lg-unstyle:hover, .btn-lg-unstyle:focus, .btn-lg-unstyle.active, .btn-lg-unstyle:active{
        background: none!important;
        border: none!important;
        color: #548dd5!important;
    }
    .col-30 {
        flex: 0 0 30% !important;
        max-width: 30% !important;
    }
    .col-60 {
        flex: 0 0 60% !important;
        max-width: 60% !important;
    }
    .rounded-md-left {
        border-top-left-radius: 0.25rem !important;
        border-bottom-left-radius: 0.25rem !important;
    }
    .rounded-md-right {
        border-top-right-radius: 0.25rem !important;
        border-bottom-right-radius: 0.25rem !important;
    }
    .bb-xs-sm-md-1 {
        border-bottom: 0 !important;
    }
    .bt-lg-0{
        border-top: none !important;
    }
    .row-span {
        position: absolute;
        top: 60%;
        height: 10%;
        left: 1rem;
        z-index: 1000;
        background: #fff;
    }
    .row-span-center {
        position: absolute;
        top: 70%;
        left: 15%;
        right: 15%;
        width: 70% !important;
        background: #fff;
        height: 10%;
        z-index: 1000;
        text-align: center;
    }
    .bg-lg-white {
        background-color: #fff !important;
    }
    .position-lg-absolute {
        position:absolute!important;
    }
    .w-info {
        width: 900px;
    }
    /* --- for mozilla max-width ---  */
    .br-xs-sm-md-0 {
        border-right: 1px solid rgba(0, 0, 0, 0.12) !important;
    }
    .bl-xs-sm-md-0 {
        border-left: 1px solid rgba(0, 0, 0, 0.12) !important;
    }
    .bb-xs-sm-md-1{
        border-bottom: none!important;
    }
    .bb-xs-sm-md-0 {
        border-bottom: 1px solid rgba(0, 0, 0, 0.12) !important;
    }
    .w-lg-5{
        width:5rem!important;
    }
    .br-lg-xl-1 {
        border-right: 1px solid rgba(0, 0, 0, 0.12) !important;
    }
    .bb-lg-xl-1 {
        border-bottom: 1px solid rgba(0, 0, 0, 0.12) !important;
    }
    .bl-lg-xl-1 {
        border-left: 1px solid rgba(0, 0, 0, 0.12) !important;
    }
    .w-lg-11 {
        width: 11.5rem !important;
    }
    .w-lg-10{
        width: 10rem!important;
    }
}

@media only screen and (min-width: 576px) and (max-width: 767px) {
    .w-info{
        width: 500px;
    }
    .info-sidenav-hover {
        right: -20px!important;
        width: 90%!important;
    }
}

@media only screen and (min-width: 768px) and (max-width: 991.99px) {
    .w-info{
        width: 700px;
    }
    .info-sidenav-hover {
        right: -20px!important;
        width: 73%!important;
    }
}

@media only screen and (min-width : 992px) and (max-width : 1199.99px) {
    .bb-lg-1{
        border-bottom: 1px solid rgba(0, 0, 0, 0.12)!important;
    }
    .info-sidenav-hover {
        right: -20px!important;
        width: 70%!important;
    }
}

@media only screen and (min-width: 1200px) {
    .WorkPhoneLeft{
        left: 0.2rem !important;
    }
    .btn-circle-custom{
        height: 22px!important;
        width: 22px!important;
        line-height: 22px!important;
    }
    .w-xl-auto{
        width:auto !important;
    }
    /* --- for mozilla max-width ---  */
    /*Need to review the resolution for br-xs-sm-md-0*/
    .br-xs-sm-md-0 {
        border-right: 1px solid rgba(0, 0, 0, 0.12) !important;
    }
    .bb-md-lg-1 {
        border-bottom: none !important;
    }
    .bb-xl-0{
        border-bottom: none!important;
    }
    .br-xl-1 {
        border-right: 1px solid rgba(0, 0, 0, 0.12) !important;
    }
    .bb-xl-1{
        border-bottom: 1px solid rgba(0, 0, 0, 0.12)!important;
    }
    .bl-xl-1{
        border-left: 1px solid rgba(0, 0, 0, 0.12)!important;
    }
    .br-xs-sm-md-lg-0{
        border-right: 1px solid rgba(0, 0, 0, 0.12) !important;
    }
    .bl-xs-sm-md-lg-0{
        border-left: 1px solid rgba(0, 0, 0, 0.12) !important;
    }
    .info-sidenav-hover {
        right: -20px!important;
        width: 65%!important;
    }
    .w-search{
        width: 38rem !important;
    }

}

@media only screen and (min-width: 1400px) {
    .w-search{
        width: 50rem !important;
    }
}

.wd-3xl {
    width: 440px!important;
}
@media (min-width: 361px) and (max-width: 575.99px){
    .wd-3xl {
        width: 340px !important;
    }
}
@media (max-width: 360.99px){
    .wd-3xl {
        width: 300px !important;
    }
    .input-group {
        flex-wrap: inherit !important;
    }
}
/*Used in daily status page for Date circle border width*/
/*This CSS is not available in bootstrap*/
.border-2
{
    border-width: 2px!important;
}


.fa-lg {
    font-size: 1.33333em!important;
    line-height: 0.75em!important;
    vertical-align: -.0667em!important;
}

/*Using custom-sorting for multi sorting in data table column*/
.custom-sorting{
    position:relative;
}
.custom-sorting .sorting_desc:before, .custom-sorting .sorting_desc:after, .custom-sorting .sorting_asc:before, .custom-sorting .sorting_asc:after, .custom-sorting .sorting:before, .custom-sorting .sorting:after{
    top:-1px!important;
}  

.rounded-bottom { /*Border bottom overright in bootstrap*/
    border-bottom-right-radius: 0.25rem!important;
    border-bottom-left-radius: 0.25rem!important;
}

/*Bootstrap custom datepicker[input type="date"] modified*/
.date-block {
	background: #fff;
	border-radius: 0.25rem;
	position: relative;
}
.calClickDate {
	position: absolute;
	top: 10px;
	right: 3px;
	height: 25px;
	background: #fff;
	pointer-events: none;
	z-index: 11;
	padding-left: 15px;
}
.calClickDate button {
	border: none;
	background: transparent;
	color: #5d9cec;
}
.HtmlCalClickDate {
	position: absolute; 
    right: 0px;
    height: 25px;
    background: #fff;
    pointer-events: all;
    z-index: 11; 
}

.HtmlCalClickDate button {
	border: none;
	background: transparent;
	color: #5d9cec;
}
.date-block input{ position: relative; z-index:2;background: none !important;}
.date-block input[type="date"]::-webkit-inner-spin-button,
.date-block input[type="date"]::-webkit-calendar-picker-indicator {
	opacity: 0;
	-webkit-appearance: none;
}
.date-block input[type="date"]::-webkit-calendar-picker-indicator {
	background: transparent;
	bottom: 0;
	color: transparent;
	height: auto;
	left: 0;
	position: absolute;
	right: 0;
	top: 0;
	width: auto;
}

/*Bootstrap custom datepicker[input type="date"] modified End*/

.ModalTopIcon
{
    color:#a5dc86!important;
}

/*Search icon*/
.custom-search .form-control{
    transition-duration: 0s!important;
 }
.custom-search .input-group-text{
    color: #b7bac9 !important;
    padding-top: 0.5rem !important;
} 
.text-rotate-header {
	transform: rotate(-90deg);
		width: 12rem;
		left: 25%;
	}
.text-rotate-line{
	height: 12rem;
}
.text-rotate-header-small {
	transform: rotate(-90deg);
		width: 8rem;
		left: 20%;
	}
.text-rotate-line-small{
	height:8rem;
}
@media (min-width : 768px) and ( max-width : 991.99px) {
	.text-rotate-header{
		left: 0;
	}
	.text-rotate-header-small{
		left: -5%;
	}
}
.lead-custom {
    font-size: 1.35rem !important;
}
/*Search Feature*/
.search .input-group-prepend .input-group-text, .search .input-group-append .input-group-text{
   background-color: var(--white)!important;
   border:0!important;
}  
.search .form-control   {
  background-color: var(--white)!important;
} 
.pop-down{
  -webkit-box-shadow: 1px 2px 6px -3px rgba(0,0,0,0.55);
  -moz-box-shadow: 1px 2px 6px -3px rgba(0,0,0,0.55);
   box-shadow: 1px 2px 6px -3px rgba(0,0,0,0.55);
   border-radius: 0 0 4px 4px;
}

.stock-bfore {
   width: 68%;
   height: 46%;
   text-align: center;
}
.stock-bfore::before {
   position: absolute;
   transform: translate(-50%, -50%);
   font-size: 60%;
}
.stock-bfore2 {
    font-size: 35%;
    padding-left: 1px;
    height: 58%;
}
.font-45 {
    font-size: 45%;
}
.text-primary .stack-circle.text-inverse{
    color: #2c78d9 !important;
}
.btn-menuchange{
   border-left-color: transparent !important;
   background-color: transparent !important;    
}
.btn-menuchange a{
   background-color: var(--current-theme) !important;
   color: #fff !important;    
}
.btn-menuchange a em{
    color: #fff !important; 
}

/* For Search area dropdown issue in datatable fixed header */
.layout-fixed .wrapper .topnavbar-wrapper{
    z-index:201;
}

.z-index-inherit{
    z-index:inherit!important;
}

/*------ System Alert related Class -------*/
.SystemAlertClass p{
     margin-bottom:0 !important;
}
.SystemAlertClass a{
     color: #fff !important;
     text-decoration:underline;
}
.overflow-hidden{
          overflow: hidden;
}

/*== Modified Heading color==*/
.h1-custom{
    font-size: 1.5rem !important;
    font-weight: 500;
}

.h2-custom{
    color: var(--body);
    font-size: 1.4rem !important;
    font-weight: 400;
}
.h2-custom-theme{
    color: var(--current-theme);
    font-size: 1.4rem !important;
    font-weight: 400;
}
.h2-custom-muted {
    color: var(--muted);
    font-size: 1.4rem !important;
    font-weight: 400;
}

.h3-custom{
    color: var(--body);
    font-size: 1.25rem !important;
    font-weight: 600;
}
.h3-custom-theme{
    color: var(--current-theme);
    font-size: 1.25rem !important;
    font-weight: 600;
}
.h3-custom-muted{
    color: var(--muted);
    font-size: 1.25rem !important;
    font-weight: 600;
}

.h4-custom{
    color: var(--body);
    font-size:1.17rem !important;
    font-weight: 400;
}
.h4-custom-theme{
    color: var(--current-theme);
    font-size:1.17rem !important;
    font-weight: 400;
}
.h4-custom-muted{
    color: var(--muted);
    font-size:1.17rem !important;
    font-weight: 400;
}

.h5-custom{
    color: var(--body);
    font-size:1.08rem !important;
}
.h5-custom-theme{
    color: var(--current-theme);
    font-size:1.08rem !important;
}
.h5-custom-muted{
    color: var(--muted);
    font-size:1.08rem !important;
}

/*-----------------------------*/
.letter-spacing-lg{
	letter-spacing: 2px
}

.bl-green-dark-3{
   border-left: 0.4rem solid #2b957a!important;
}
.rounded-top-right {
    border-top-right-radius: .25rem;
}
.rounded-top-left-0 {
    border-top-left-radius: 0;
}
.position-custom{
    top:-24.5px !important;
    left:-6px !important;
}

@media screen and (min-width: 550px) and (max-width: 999px){
    .megamenu-sm-lg{
        width:500px !important;
    }
}

.bootstrap-datetimepicker-widget {
    width: auto !important;
    color:#222222!important;
}
.bootstrap-datetimepicker-widget td, .bootstrap-datetimepicker-widget th{
    color:#222222!important;
}
.bootstrap-datetimepicker-widget td.active{
    color:#ffffff!important;
}
.aside-collapsed  .btn-menuchange a.btn-oval{
     background-color: transparent !important;
}