#preloader {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-color: #e4e7ea;
    z-index: 10000;
}

#status {
    width: 30px;
    height: 30px;
    position: absolute;
    left: 50%;
    top: 50%;
    margin: -15px 0 0 -15px;
    font-size: 40px;
}

.spinner.spinner-primary:before {
    border: 3px solid #3699FF !important;
    border-right: 2px solid transparent !important;
}

.spinner.spinner-lg:before {
    width: 3.5rem !important;
    height: 3.5rem !important;
    margin-top: -1rem;
}

.profile_image {
    max-width: 130px;
    max-height: 130px;
}

.error {
    color: #ff0000 !important;
}

.aside-footer {
    position: absolute;
    bottom: 0;
    background-color: #1f2231;
    width: -webkit-fill-available;
    min-height: 50px;
    display: flex;
}
.file-header {
    border-top: 1px solid #ebedf3;
    position: absolute;
    bottom: 0px;
    width: 100%;
    height: 50px;
}

.menu-text-footer {
    color: #989EB3;
}

.menu-item:hover .menu-icon i {
    color: #3699FF;
}

.logout:hover i {
    color: #3699FF;
}

a.logout:hover span {
    color: #FFF;
}

.logout i {
    padding-right: 18px;
}

#mainDivNotifications {
    max-height: 500px;
}

.incident-date {
    margin-top: 10px;
    padding-left: 7px;
}

.incident-no {
    text-align: right;
}

.span-location {
    text-align: left !important;
    /*width: 300px;*/
    min-height: 27.5px;
}

.label.label-inline {
    border-radius: 0.25rem !important;
}

/*.incident-date span,
.incident-location span,
.incident-no span {
    font-size: 14px !important;
}*/

/*.activity-date span,
.activity-status span,
.event-number span {
    font-size: 14px !important;
*/}

.incidentTitle, .activityTitle {
    font-weight: 500;
    font-size: 1.275rem;
    color: #181C32;
    margin-bottom: 20px;
    margin-top: 4px;
}

.page-search-form .kt-input-icon__icon .flaticon2-delete {
    font-size: 13px !important;
    cursor: pointer;
}

.list-group-item .div-btn-open {
    text-align: right;
    align-self: center;
}

.incident-location {
    position: absolute;
    bottom: 0;
}

.incident-no span{
    font-weight: 300;    
    color: #74788d;
}

.incident-location span{
    font-weight: 300;    
    color: #74788d;
}

.incident-date span {
    font-weight: 300;    
    color: #74788d;
}

.btn-submission {
    margin-left: 64px;
}

.btn-callout {
    float: right;
}

.btn.btn-wide {
    padding-left: 2.25rem;
    padding-right: 2.25rem;
}

.signature_wrapper_item {
    border: 1px solid #e4eaec !important;
    /* float: left; */
    margin: 0px 0px 0px 0px !important;
    padding: 0;
    width: 100%;
    background: #ffffff;
    border-radius: 0.25rem !important;
    box-shadow: none !important;
    min-height: 100px;
}

.signature_wrapper {
    /* float: left; */
    /* width:100%; */
    margin: 0px;
    /* padding: 0px;
    overflow: hidden;*/
}

.signature_wrapper .signature_image {
    border: 1px solid #e4eaec !important;
    font-size: 10px !important;
    margin: 10px 0 0 !important;
}

.signature_error {
    /* float:left; */
    width: 100%;
    margin: 0px;
    color: red;
    font-size: 14px;
}

.signature_buttons {
    /* float:left; */
    width: 100%;
    margin: 10px 0px 0px 0px;
    padding: 0px;
}

.signature_buttons .button {
    /* float:left; */
    margin-right: 10px;
}

.doc-list-container {
    max-height: 174px !important;    
}

.kt-input-icon__icon--right .remove-span {
    height: 20px;
    cursor: pointer;
}

.inactive_link {
    cursor: default;
}

.appeal-foot {
    justify-content: flex-end !important;
}

.cookies_popup {
    position: fixed;
    width: 100%;
    margin: 0px;
    padding: 15px 0px;
    text-align: center;
    z-index: 999;
    left: 0px;
    bottom: 0px;
    background: #3c3c3c;
    background: rgba(18, 18, 18, 0.8)
}

.cookies_popup_true {
    display: none !important;
}

.cookies_popup_content {
    float: left;
    font-size: 12px;
    color: #cccccc;
    font-weight: 400;
    text-align: center;
    width: 100%;
}

.cookies_popup_content a {
    text-decoration: none;
    color: #0397D6;
}

.cookies_popup_content a:hover {
    color: #FCB040;
}

.cookies_popup_content a.cookies_popup_close {
    font-size: 20px;
    padding-left: 12px;
}

.asPaginator-first,
.asPaginator-prev,
.asPaginator-items,
.asPaginator-next,
.asPaginator-last {
    height: calc(1.35em + 1.1rem + 2px);
    width: calc(1.35em + 1.1rem + 2px);
    cursor: pointer;
    color: #3f4254;
    background-color: #fff;
    border-color: #fff;
    outline: 0 !important;
    vertical-align: middle;
    padding: 0;
    justify-content: center;
    align-items: center;
    -webkit-box-align: center;
    display: inline-flex;
    margin-bottom: .25rem !important;
    margin-top: .25rem !important;
    margin-right: .5rem !important;
    border-radius: .42rem;
    font-size: .925rem;
    line-height: 1.35;
}

.asPaginator-items a {
    color: #3f4254;
}

    .asPaginator-items.active a {
        color: #fff !important;
    }

.btn-hover-primary.focus:not(.btn-text), 
.btn-hover-primary:focus:not(.btn-text), 
.btn-hover-primary:hover:not(.btn-text):not(:disabled):not(.disabled) {
    color: #fff !important;
    background-color: #3699ff !important;
    border-color: #3699ff !important;
}

.btn-hover-primary.active {
    color: #fff !important;
    background-color: #3699ff !important;
    border-color: #3699ff !important;
}

.asPaginator-first.asPaginator_disable {
    color: #3f4254;
    background-color: #f3f6f9;
    border-color: #f3f6f9;
}

/**********************  START CSS FOR SMALL SCREENS  **********************/
/***************************************************************************/
@media only screen and (max-width: 479px) {
    .mobile-d-inline-grid {
        display: inline-grid !important;
    }

    .pt-18-mobile {
        padding-top: 18px !important;
    }

    .mt-20-mobile {
        margin-top: 20px;
    }    

    .mb-16-mobile {
        margin-bottom: 16px !important;
    }

    .btn-submission {
        margin-left: 0px;
    }

    .list-group-item .div-btn-open {
        text-align: left;
    }

    .alert {
        display: block;
    }

    .alert-icon {
        padding-left: 1rem !important;
    }

    .alert .alert-title {
        flex: 0 1 100%;
        margin-bottom: 20px;
    }

    .alert .add-callout {
        flex: 0 1 100%;
        text-align: center;
        padding: 0 !important;
    }

    .incident-no {
        text-align: left;
    }

/*    .incident-date {        
        margin-bottom: 10px;
    }

    .incident-location {
        position: inherit;
        margin-bottom: 10px;
        margin-top: 10px;
        padding-left: 7px;
    }

    .incident-no {
        position: inherit;
        margin-bottom: 10px;
        margin-top: 10px;
        padding-left: 7px;
    }

    .span-location {
        text-align: left;
        max-width: 188px;
    }

    .incident-no {
        text-align: left;
    }

    #incidentTitle {
        min-width: 188px;
    }*/
}
/*
	Other controls
	i.e. input field for selectable drop downs etc.
*/
.othernonselectoption {
   
    margin-top: 10px;
}
/***************************************************************  END CSS FOR SMALL SCREENS  ***************************************************************/
/*************************************************************************************************************************************************************/

/***************************************************************  START CSS FOR MOBILE AND TABLET  ***************************************************************/
/*************************************************************************************************************************************************************/
@media (max-width: 1024px) {
    .pb-10-tablet-and-mobile {
        padding-bottom: 10px !important;
    }

    .pb-20-tablet-and-mobile {
        padding-bottom: 20px !important;
    }

    .mt-10-tablet-and-mobile {
        margin-top: 10px !important;
    }

    .mb-15-tablet-and-mobile {
        margin-bottom: 15px !important;
    }
}

/*remove the point event when mouse over in a button*/
.noHover {
    pointer-events: none;
}

/*new css to TextBlock*/
.TextBlock {
    font-size: 14px !important;
    line-height: 21px !important;
    font-weight: normal;
}

.SectionDisabled {
    pointer-events:none;
}
.linkEnabled {
    pointer-events:all;
}

.aside-menu .menu-nav {
    margin: 15px 0px 30px 0px !important;
}

#myCourses .card img,
#coursesCategory .card img {
    max-height: 248px;
    min-height: 248px;
}

#myCourses .card .card-body .badge, #course_categories .card .card-body .badge,
#coursesCategory .card .card-body .badge, #course_categories .card .card-body .badge {
    top: -20px;
    right: -20px;
    position: relative;
    float: right;
}

#myCourses .badge-complete, #course_categories .badge-complete,
#coursesCategory .badge-complete, #course_categories .badge-complete {
    color: #fff;
    background-color: #45b3c0;
}

#myCourses .badge, #course_categories .badge,
#coursesCategory .badge, #course_categories .badge {
    border-radius: 0;
}

#myCourses .badge-inprogress, #course_categories .badge-inprogress,
#coursesCategory .badge-inprogress, #course_categories .badge-inprogress {
    color: #fff;
    background-color: #000b5a;
}

#myCourses .badge-notstarted, #course_categories .badge-notstarted,
#coursesCategory .badge-notstarted, #course_categories .badge-notstarted {
    color: #fff;
    background-color: #5da3e2;
}

#myCourses .card-body,
#coursesCategory .card-body {
    min-height: 294px;
}

#myCourses .card-text.category-title,
#coursesCategory .card-text.category-title {
    height: 70px;
    margin-bottom: 0px;
}

#coursesCategory .card-title {
    height: 44px;
    margin-bottom: 12px;
}

#myCourses .card-body .card-text.line-wrap-6,
#coursesCategory .card-body .card-text.line-wrap-6 {
    min-height: 126px;
}

@media (max-width: 1024px) {
    .margin-b-25-tablet-and-mobile {
        margin-bottom: 25px;
    }

    /*#myCourses .card .card-body .badge, #course_categories .card .card-body .badge,
    #coursesCategory .card .card-body .badge, #course_categories .card .card-body .badge {
        top: -18px;
        right: -18px;
    }*/

    .card-img, .card-img-top {
        max-height: 200px;
    }
}

.quickaddcard {
    width: 400px;
    border: 1px solid #ebedf3;
}
.iconbox-quickadd {
    align-content: center;
    font-weight: 700 !important;
    font-size: 16px;
}
.symbol-label {
    font-weight: 700 !important;
}
.quickadd-title {
    margin-bottom: 1.0rem;
    color: #464457;
    font-size: 1.2rem;
    font-weight: 700;
}
.quickadd-content {
    opacity:0.5;
}
.quickadd-menu {
    border: 0.1px solid #ebedf3;
}
.dropdown-menu {
    margin: 0px !important;
    padding:0px !important;
}
.quiackadd-header {
    align-content: center;
    font-weight: 700;
    align-self: center;
    font-size: 1.2rem;
}
.quiackadd-header {
    border: none !important;
}
.quickadd-menu:hover {
    background-color: #ebedf3;
}
.quickadd-menu .iconbox:hover 
{
    background-color: #ebedf3;
}
.caphoto > .k-upload {
    display: none;
}

.addphotosimagesrow {
    margin-top: 20px;
}

.addphotosimagecontainer {
    padding-left: 10px;
    padding-right: 10px;
    margin-bottom: 10px;
}

/* When we hit the following breakpoint, the images stop going in rows of four and instead, go in rows of two */
@media (max-width: 767px) {
    /* This is relating to the first image and it increases by two each time (3rd image, 5th image, etc) */

    .addphotosimagecontainer {
        padding-left: 10px;
        padding-right: 10px;
        margin-bottom: 10px;
    }

   
}




.addphotosimage {
    width: 100%;
    max-height: 150px;
    border-radius: 0.25rem;
}

.addphotosinput > .k-upload {
    display: none;
}

/*
  Customised CSS for home if required.
*/

.iconbox {
    text-align: center;
    padding: 3.25rem 1.7rem 2rem 1.7rem;
    background-color: #fff;
    border: 2px solid;
    border-color: transparent;
    -webkit-transition: all 0.3s;
    transition: all 0.3s;
    border-radius: 0.35rem;
}

    .iconbox .iconbox-icon .iconbox-icon-bg {
        background-image: url(../images/iconbox_bg.png);
        background-size: contain;
        background-position: center;
        background-repeat: no-repeat;
        width: 12rem;
        height: 12rem;
        display: block;
        position: absolute;
        top: -2.5rem;
        left: 0;
        right: 0;
        margin: auto;
        opacity: 0.06;
        z-index: 0;
    }

    .iconbox .iconbox-icon {
        margin-bottom: 2.7rem;
        color: #187DE4;
        font-size: 5rem !important;
        position: relative;
    }

    .iconbox .iconbox-title {
        margin-bottom: 1.2rem;
        color: #464457;
        font-size: 1.2rem;
        font-weight: 500;
    }

    .iconbox .iconbox-icon > i {
        position: relative;
        z-index: 1;
        font-size: 5rem !important;
        color: #187DE4;
    }

.questionAnswerRequired {
    font-size: 8px;
    padding-left: 5px;
    vertical-align: middle;
}