@media (min-width: 1281px) and (max-width: 1600px) {
    /*--------------- LOGON PAGE ---------------*/
    .intro-section {
        padding: 0 10%;
    }
    /* Contractor Preview page design */
    /*Enrollment Modal*/
    .modal-details-view {
        width: 91%;
        min-width: 91%;
        max-width: 91%;
    }

    .safety-alert-detail-modal .modal-details-view{width:80%; min-width:80%; max-width:80%}

    .safety-alert-image-preview-modal .modal-details-view{width:70%; min-width:70%; max-width:70%}

    .contractor-package-enrollment-data .modal-details-view {
        width: 70%;
        min-width: 70%;
        max-width: 70%;
    }
    /*----left side bar menu  ----------*/
}
@media (min-width: 1281px) and (max-width: 1480px) {
    .custom-treeview.treeview-colorful a.treeview-colorful-items-header, .custom-treeview .treeview-colorful-items-header {
        font-size: 15px;
        padding: 0.5rem;
    }

    .contractor-package-enrollment-data .modal-details-view {
        width: 70%;
        min-width: 70%;
        max-width: 70%;
    }

    /*-------Graph Text -------------*/
    .graph-text {font-size: 48px;}
    .count-text {font-size: 80px;}
}
@media (min-width: 992px) and (max-width: 1366px) {
/*--------------- LOGON PAGE ---------------*/
.nourtek-logo .login-footer,
.login-box{padding:0 2.5rem;}
.nourtek-logo .login-footer{padding: 0 2.5rem;}


label.f-22 {font-size: 20px !important;}
.custom-treeview.treeview-colorful .treeview-colorful-list ul{padding-left:1rem;}
.custom-treeview.treeview-colorful a.treeview-colorful-items-header, .custom-treeview .treeview-colorful-items-header {
    font-size: 14px;
    padding: 0.6rem;
}

.custom-treeview.treeview-colorful .treeview-colorful-element {
    padding: 0.3rem 0.6rem;
    font-size: 14px;
}

.modal.add-claims .modal-full-height.modal-xl,
.modal-details-view {
    width: 92%;
    min-width: 92%;
    max-width: 92%;
}
.contractor-package-enrollment-data .modal-details-view {
    width: 80%;
    min-width: 80%;
    max-width: 80%;
}

.maintenance-modal .modal-body{padding:3.5rem;}
.maintenance-modal .modal-body .f-60{font-size:48px;}
/* Add subcontractor design css */
.modal .modal-full-height.custom-modal{max-width:100%;width:1060px;}
.no-record-main.no-record-img .no-record-found img{height:200px;margin-bottom:30px;}
.no-record-main .no-record-found .no-record-label{font-size:28px;color:#31404E;margin-bottom:30px;line-height:34px;}
.btn-medium{padding:10px 15px;font-size:14px;}
.link-text {font-size:11px;}
}


/* 
  ##Device = Desktops
  ##Screen = 1281px to higher resolution desktops
*/
/* 
  ##Device = Laptops, Desktops
  ##Screen = B/w 1025px to 1280px
*/
@media (min-width: 1025px) and (max-width: 1280px) {
    /*--------------- LOGON PAGE ---------------*/
body{font-size:14px;}
h1, .h1 {font-size: 2rem;}
h3, .h3 {font-size: 1.5rem;}
label.f-22 {font-size: 20px !important;}
.intro-section {padding: 0 6%;}
.login-box {padding: 0 5%;}
/*---------- Enrollment Modal ---------- */
.modal-details-view {width: 94%;min-width: 94%;max-width: 94%;}
.contractor-package-enrollment-data .modal-details-view {width: 80%;min-width: 80%;max-width: 80%;}

/*.custom-treeview .treeview-colorful-items-header{font-size:15px;padding:0.75rem;}*/
.treeview-colorful-items-header .f-22 {font-size: 18px;}

/* -------- Notification -------- */
.notification-group {padding: 0.5rem 0rem;}
.graph-text {font-size: 42px;}
.count-text {font-size: 70px;}

.treeview-colorful.document-treeview .treeview-colorful-element .document-name {
    max-width: 85%;
} 
.div-additional-gl,.div-additional-umbrella,.div-additional-pollution{overflow:auto;}
.login-wrap {
    -ms-flex: 0 0 calc(100% - 50%);
    flex: 0 0  calc(100% - 50%);
    max-width:  calc(100% - 50%);
}

.login-right{
     -ms-flex: 0 0 50%;
    flex: 0 0 50%;
    max-width: 50%;
}
}

/* 
  ##Device = Tablets, Ipads (portrait)
  ##Screen = B/w 768px to 1024px
*/
@media (max-width: 991px) {
    body{font-size:14px;}

    .intro-section, .login-box {padding: 10% 5%;}
    .nourtek-logo .login-footer{padding: 0 5%;}
    .nourtek-logo {background-color:rgba(0,0,0,0.35);}
    .responsive-tree-menu {display: block;}
    .custom-treeview .treeview-colorful-list {position: absolute;width: 100%;z-index: 999;background: #fff;display: none;-webkit-box-shadow: 0px 2px 4px 0 rgba(0,0,0,0.3);-moz-box-shadow: 0px 2px 4px 0 rgba(0,0,0,0.3);box-shadow: 0px 2px 4px 0 rgba(0,0,0,0.3);}
    .modal .modal-full-height.modal-xl,.modal .modal-full-height.modal-lg {width: 85%;min-width: 85%;max-width: 85%;}
    
    /*---------- Maintenance-Alert Modal ---*/
    .maintenance-alert.alert-primary {position:inherit;margin-bottom:0;}
    .maintenance-modal .modal-dialog {max-width:80%;}
    .maintenance-modal .f-60{font-size:38px;}
    .maintenance-modal .maintenance-graphics img{width:180px;}
    .maintenance-alert p.f-18 {font-size: 15px;}
    .close-modal-button{font-size:24px;}
    .div-additional-gl,.div-additional-umbrella,.div-additional-pollution{overflow:auto;}
   .auth-wrap{position:relative;}
.grecaptcha-badge{bottom:0px !important;position:absolute !important;}
/* Add subcontractor design css */
.modal .modal-full-height.custom-modal{max-width:100%;width:100%;}
.modal .modal-full-height.custom-modal .modal-content{padding:1rem;}
.sub-contractor-header{margin-bottom:1rem;}
.no-record-main.no-record-img{min-height: calc(100vh - 13.5rem);max-height: calc(100vh - 13.5rem);}
.no-record-main.no-record-img .no-record-found img{height:160px;margin-bottom:20px;}
.no-record-main .no-record-found .no-record-label{font-size:24px;color:#31404E;margin-bottom:20px;line-height:30px;}
.btn-medium{padding:10px 15px;font-size:14px;}
.custom-nav .nav-item .nav-link{
     padding: 0.7rem 0.4rem;
        font-size: 0.8rem;
}
}
@media screen and (min-width:1199px) {
    .custom-modal2 {
        width: 900px !important;
    }
}
/* 
  ##Device = Low Resolution Tablets, Mobiles (Landscape)
  ##Screen = B/w 481px to 767px
*/
@media (min-width: 768px) and (max-width: 1024px) and (orientation: portrait) {
.container {width: 100%;max-width: 100%;}
/*--------------- LOGON PAGE ---------------*/
body{font-size:14px;}
h1, .h1 {font-size: 1.5rem;}
label.f-22 {font-size: 18px !important;}
.intro-section {padding: 0 4%;}

/* --------------- Contractor Preview ---------------*/
.container {width: 100%;max-width: inherit;}
.col-md-8.contractor-preview-list {padding-right: 10px !important;max-width: 100%;-ms-flex: 0 0 100%;flex: 0 0 100%;}
.col-md-4.contractor-preview-notification {max-width: 100%;-ms-flex: 0 0 100%;flex: 0 0 100%;position: absolute;z-index: 99;display: none;}
a.filter-btn {padding: 10px 12px;}

/* -------- Enrollment Modal -------- */
.modal .modal-right,
.modal .modal-full-height.modal-xl, .modal-details-view,
.modal-details-view {width: 100%;min-width: 100%;max-width: 100%;}

/* -------- Notification -------- */
.notification-group {padding: 0.5rem 0rem;}
#notification-icon {display: block;}
.contractor-preview-notification {
    left: 0;
    top: 0;
    z-index: 99;
    -webkit-transition: all 2s ease;
    -moz-transition: all 2s ease;
    -ms-transition: all 2s ease;
    -o-transition: all 2s ease;
    transition: all 2s ease;
    -webkit-transform: translateX(100%);
    -moz-transform: translateX(100%);
    -ms-transform: translateX(100%);
    -o-transform: translateX(100%);
    transform: translateX(100%);
    /*display: none;*/
    position: absolute;
    width: 100%;
}

.contractor-preview-notification.open {
    -webkit-transform: translateX(0);
    -moz-transform: translateX(0);
    -ms-transform: translateX(0);
    -o-transform: translateX(0);
    transform: translateX(0);
    display: block;
    position: absolute;
    right: 0;
    top: 0px;
    z-index: 99;
    -webkit-transition: all 2s ease;
    -moz-transition: all 2s ease;
    -ms-transition: all 2s ease;
    -o-transition: all 2s ease;
    transition: all 2s ease;
}
.graph-text {font-size: 42px;}
.count-text {font-size: 50px;}

.treeview-colorful.document-treeview .treeview-colorful-element .document-name {
    max-width: 85%;
} 
.login-wrap {
    -ms-flex: 0 0 100%;
    flex: 0 0 100%;
    max-width: 100%;
}

.login-right{
     -ms-flex: 0 0 100%;
    flex: 0 0 100%;
    max-width: 100%;
}
.login-wrap{height:35vh;}
.auth-wrap {height:calc(100vh - 35vh);position:relative;}
.grecaptcha-badge{bottom:110px !important;}
}
/* 
  ##Device = Tablets, Ipads (landscape)
  ##Screen = B/w 768px to 1024px
*/


@media (max-width: 1024px){
    .d-none-1024{display:none;}
    #notification-icon{display:block;}
    .contractor-preview-notification {display: none;}
    .contractor-preview-notification.open{display: block; left:auto; position: absolute; right: 0; top:-15px; z-index: 99;}
    .col-md-8.contractor-preview-list,
    .col-md-8.safety-alert-preview-list{flex:0 0 100%; max-width:100%; padding-right:22px !important; padding-left:22px !important;}
    .d-block-1024{display:block;}
    .csp-top-tit-to-do-list{width:100%; padding:0 22px;}
    .csp-top-tit-to-do-list .titlee h4{color:#282842; font-size:18px;}
    /*body{background-image:none !important; background-color:#f4f4f4 !important;}*/
    .csp-do-list-desing .txt-do-list{margin:0; padding:0 30px 0 0; cursor:pointer; user-select:none;}
    .csp-do-list-desing .txt-do-list .count-noti{height:20px; width:20px; border-radius:100%; background-color:#fc2d2d; color:#fff; font-weight:400; font-size:12px; text-align:center; line-height:18px; top:-13px; left:-4px;}
    .csp-do-list-desing .txt-do-list span{margin:0 0.7rem; display:inline-block; font-size:18px; color:#085775; font-weight:700;}
    .csp-do-list-desing .txt-do-list .icon-to-do-list::before{color:#085775; font-size:18px;}
    .csp-do-list-desing .txt-do-list::after{font-family:'icomoon' !important; content:"\e90a"; font-size:18px; color:#085775; left:auto; right:0}
    .csp-do-list-desing .txt-do-list.ic-arrow-up::after{content:"\e94c"}
    .contractor-preview-notification.open{max-width:450px; width:450px;}
    .navbar{padding: 0.5rem 0.2rem;}
    .custom-nav .navbar-brand img{max-width:110px;}
    .custom-nav .nav-item .nav-link {
        padding: 0.8rem 0.5rem;
        font-size: 0.7rem;
    }
    .toast-content-injalaone {
        display: flex;
        align-items: center;
        justify-content: center;
        gap: 10px;
        flex-direction: column;
        text-align: center;
    }

    .div-injalaone-toast-message {
        padding: 35px 0 20px;
    }
    .toast-close-injalaone {
        top: 0px;
        right: 1%;
      
    }
    .toast-close-injalaone {
        top: 0;
    }
}



@media (min-width: 768px) and (max-width: 1024px) and (orientation: landscape) {
    body{font-size:14px;}
.card-body p-5{padding:2rem;}
h1, .h1 {font-size: 2rem;}
h3, .h3 {font-size: 1.25rem;}
h4, .h4 {font-size: 1rem;}
.intro-section {padding: 0 6%;}
.login-box {padding: 0 5%;}
a.link-tab {font-size: 1rem;}
a.filter-btn {padding: 8px 15px;}

/*Enrollment Modal*/
.modal-details-view {width: 100%;min-width: 100%;max-width: 100%;    }
.contractor-package-enrollment-data .modal-details-view {width: 80%;min-width: 80%;max-width: 80%;}
.custom-treeview.treeview-colorful .treeview-colorful-list ul {padding-left: 1rem;}

/* -------- Notification -------- */
.notification-group {padding: 0.5rem 0rem;}
.graph-text {font-size:38px;}
.count-text {font-size: 68px;}
.treeview-colorful.document-treeview .treeview-colorful-element .document-name {
    max-width: 85%;
} 
.login-wrap {
    -ms-flex: 0 0 calc(100% - 60%);
    flex: 0 0  calc(100% - 60%);
    max-width:  calc(100% - 60%);
}

.login-right{
     -ms-flex: 0 0 60%;
    flex: 0 0 60%;
    max-width: 60%;
}
   
}



@media (max-width: 767px) {
.c-order-1{-ms-flex-order: 1;order: 1;}
.c-order-2{-ms-flex-order: 2;order: 2;}
.c-order-3{-ms-flex-order: 3;order: 3;}
.col-md-8.contractor-preview-list, .col-md-8.safety-alert-preview-list{padding-left:4px !important; padding-right:9px !important}
.csp-top-tit-to-do-list{padding:0 12px 0 5px;}
.csp-comp-m-tit-status .csp-com-til h6{font-size:15px;}
.csp-on-off-section .some-change-7{-ms-flex-pack: end; justify-content: flex-end;}
.csp-on-off-section{background-color:#fff; margin:0; padding:10px 6px;}
.csp-on-off-section a.filter-btn{height:40px; width:40px; padding:5px; justify-content:center}
.csp-on-off-section a.filter-btn .fa-align-center{margin:0 !important;}
.csp-on-off-section .refres-icon{height:40px; width:40px;}
.csp-on-off-section .refres-icon .mdi{font-size:22px;}
.csp-on-off-section .o-c-switch{width:205px; height:40px; border:none; flex:inherit; max-width:inherit;}
.csp-on-off-section .search-things{max-width:inherit; flex:inherit; width:auto; padding-right:0;}
.csp-on-off-section .filters-things{max-width:inherit; flex:inherit; width:auto; margin-top:0 !important}
.csp-on-off-section .need-to-show-hide .txt-search-safety-alert{display:none; position:absolute;}
.csp-on-off-section .need-to-show-hide.csp-txt-bx-vs .txt-search-safety-alert{display:block;width:280px; left:auto; right:8px; top:49px; height:40px !important; border-radius:4px; z-index:99}
.csp-on-off-section .need-to-show-hide.csp-txt-bx-vs .div-search-safety-alert::before {content: "";	top: auto;left: auto;right: 15px;	display: inline-block;	width: 0;	height: 0;border-style: solid;border-width: 0 8px 8px 8px;border-color: transparent transparent #dcdcdc transparent;position: absolute;bottom: -9px;}
.csp-on-off-section .div-search-safety-alert .a-search-safety-alert{height:40px;  width:40px; border-radius:4px;}
.safety-alert-preview-list.csp-list-d-pg{padding:0 !important;}
.safety-alert-preview-list.csp-list-d-pg .card{box-shadow:none; background-color:transparent; padding:0;}
.safety-alert-preview-list.csp-list-d-pg .card-body{padding:0;}
.safety-alert-preview-list.csp-list-d-pg .col-md-12.safety-alerts{padding:0;}
.safety-alert-preview-list.csp-list-d-pg .col-md-12.safety-alerts .card{padding:12px 5px;}
.safety-alert-preview-list.csp-list-d-pg .card-body .row{margin:0}
.safety-alert-preview-list.csp-list-d-pg .card-body .row.csp-in-tab-scroll{text-align:center;}
.safety-alert-preview-list.csp-list-d-pg .card-body .row.csp-in-tab-scroll .col-md-12{margin:0 10px} 
.safety-alert-preview-list.csp-list-d-pg .card-body .col-md-12{padding:0;}
.safety-alert-preview-list.csp-list-d-pg .custom-accordion .card-header{padding:0 !important;}
.safety-alert-preview-list.csp-list-d-pg .csp-listing-pge{padding:0;}
.safety-alert-preview-list.csp-list-d-pg .csp-listing-pge .col-md-3{padding:0;}
.safety-alert-preview-list.csp-list-d-pg .csp-in-tab-scroll{display:block; white-space:nowrap; overflow-x:auto; overflow-y:hidden;}
.safety-alert-preview-list.csp-list-d-pg .csp-in-tab-scroll .d-inl-b{display:inline-block; width:auto; max-width:inherit;}
.d-block-767{display:block;}
.d-none-767i{display:none !important;}
.csp-do-list-desing .txt-do-list{padding:0}
.csp-do-list-desing .txt-do-list .icon-to-do-list{margin:0 1rem 0 0}
.csp-do-list-desing .txt-do-list::after{display:none;}
.contractor-preview-notification.open{max-width:100%; width:100%;}
.csp-comp-m-tit-status .csp-com-til{width:100%; margin:0 0 0.5rem;}
.csp-listing-pge .three-sm-wid{width:100%;}
.csp-listing-pge .two-sm-wid{width:100%;}
.csp-listing-pge .for-m-top{padding:0;}
.csp-listing-pge .for-m-top + .for-m-top{margin-top:0.6rem;}
p {font-size: 0.856rem;}
.container {width: 100%;max-width: 100%;margin-top: 4rem;}
h1, .h1 {font-size: 1.5rem;}
h3, .h3 {font-size: 1.25rem;}
h4, .h4 {font-size: 1rem;}
/*h5, .h5{font-size: 0.9rem;}*/
label.f-22 {font-size: 15px !important;}
/*.login-wrap, .auth-wrap {height: inherit;}*/
.intro-section, .login-box {padding: 10% 5%;}
.nourtek-logo .login-footer{padding: 0 5%;}
.nourtek-logo {position: inherit;bottom: inherit;}
.nourtek-logo .login-footer{padding:10px;margin-bottom:0;}
/*------------ Enrollment Modal------------ */
.contractor-preview-notification h4,a.link-tab {font-size: 1rem;}
.modal .modal-right,.modal .modal-full-height.modal-xl, .modal-details-view {width: 100% !important;min-width: 100% !important;max-width: 100% !important;}

/* -------- Notification -------- */
.notification-group {padding: 0.5rem 0rem;}
#notification-icon {display: block;}
/*.contractor-preview-list.pr-0 {padding-right:0 !important;}*/
.contractor-preview-notification {
    left: 0;
    top: 0;
    display: none;
    z-index: 99;
    -webkit-transition: all 2s ease;
    -moz-transition: all 2s ease;
    -ms-transition: all 2s ease;
    -o-transition: all 2s ease;
    transition: all 2s ease;
    -webkit-transform: translateX(100%);
    -moz-transform: translateX(100%);
    -ms-transform: translateX(100%);
    -o-transform: translateX(100%);
    transform: translateX(100%);
    position: absolute;
    width: 100%;
    -webkit-transition: all 2s ease;
    -moz-transition: all 2s ease;
    -ms-transition: all 2s ease;
    -o-transition: all 2s ease;
    transition: all 2s ease;
}

.contractor-preview-notification.open {padding:0;
    -webkit-transform: translateX(0);
    -moz-transform: translateX(0);
    -ms-transform: translateX(0);
    -o-transform: translateX(0);
    transform: translateX(0);
    display: block;
    position: absolute;
    right: 0;
    top: 0px;
    z-index: 99;
    -webkit-transition: all 2s ease;
    -moz-transition: all 2s ease;
    -ms-transition: all 2s ease;
    -o-transition: all 2s ease;
    transition: all 2s ease;
}
/*----Preview Loader */
.preview-loader img {height: 150px;}
.graph-text {font-size: 70px;}
.count-text {font-size: 82px;}

/*------  Maintance Alert ------ */
.maintenance-modal .modal-body{padding:2rem;}
.maintenance-modal .modal-dialog {max-width:90%;margin:0 auto 0;}
.maintenance-modal .f-60{font-size:28px;}
.maintenance-modal p.f-60{font-size:28px;}
.maintenance-modal .maintenance-graphics img{width:170px;}
.maintenance-alert p.f-18{font-size:14px;}
/*-------Sweet Alert */
.treeview-colorful.document-treeview .treeview-colorful-element .document-name {
    max-width: 75%;
} 

/* GC Project list*/
ul.gc-table .table-header{display:none}
ul.gc-table .table-row{border-top: 1px solid #dcdcdc;}
ul.gc-table li{display:block}
ul.gc-table .col{flex-basis:100%;display:flex;padding:10px 0;}
ul.gc-table .col:before{color:#6C7A89;padding-right:10px;content:attr(data-label);flex-basis:50%;text-align:right}
.login-wrap {
    -ms-flex: 0 0 100%;
    flex: 0 0 100%;
    max-width: 100%;
}
.login-right{
     -ms-flex: 0 0 100%;
    flex: 0 0 100%;
    max-width: 100%;
}
.cookie-footer{padding:10px;}
    /*video tooltip*/
    .video-popup-div .modal-dialog {
        max-width: calc(100% - 50px);
        margin: auto;
    }

    .video-popup-div .modal-content {
        height: 300px
    }
    /*video tooltip*/
    .navbar{padding: 0.8rem;}
    .custom-nav .navbar-brand img{max-width:160px;}
    .custom-nav .nav-item .nav-link {
        padding: 0.8rem 0.7rem;
        font-size: 0.9rem;
    }
    .nav-user-custom > li {
        border-left: 1px solid #A4A7B3;
    }
        .nav-user-custom > li a {
            color:#fff;
            padding: 0.8rem 0.7rem !important;
            display: flex;
            align-items: center;
            font-size: 0.9rem;
            width:100%;
        }

    .nav-user-custom li .mobile-name {
        color: #fff;
        display: block;
        font-size: 0.9rem;
        font-family: 'OpenSans-Semibold';
    }

    header .navbar-nav.nav-user-custom .nav-link em, header .navbar-nav.nav-user-custom .nav-link i {
        margin: 0 !important;
        padding: 0 0.2rem 0 0;
    }
    /*edited ruby aasif*/
    a.desk-link {
        display: flex;
        align-items: center !important;
        justify-content:flex-start;
        flex-direction: row !important;
        gap: 2px;

    }
    .desk-name {
        display:none;
    }
    .toast-content-injalaone {
        display: flex;
        align-items: center;
        justify-content: center;
        gap: 20px;
        flex-direction: column;
        color: #ffffff;
        border-radius: 0px 0px 5px 5px;
        text-align: center;
        padding: 20px 0 0 0;
    }
    .toast-close-injalaone {
        font-size: 15px;
        top: 50px;
    }
    .account-login-popup .modal-body {
        padding: 20px 20px 40px;
        overflow: hidden;
    }
    .account-login-close {
  
        right: 0;
       
    }
    .injala-one-li a {
        flex-direction: row;
        justify-content: flex-start;
        font-family: 'OpenSans-Semibold'
    }
.feedback-li {
    padding-left:0 !important;
    }
    .injala-one-li {
       
        padding: 0;
    }
    .div-injalaone-toast-message {
        padding: 10px 0 25px;
    }
    .w-24 {
        width: 20px;
    }
}


@media (max-width: 576px) {
    .showOtherData {display:block !important;}
    .cookie-footer{text-align:center;}
    .cookie-btn{margin:0 auto 0;}
    .intro-section, .login-box {padding: 20% 5%;}
}

/* Mobile Version*/
@media (max-width: 575px) {

.pl-xs-0 {padding-left: 0px !important;}
.d-xs-none {display: none;}
.xs-mt-2 {margin-top: 0.5rem !important;}
.xs-mb-2 {margin-bottom: 0.5rem !important;}
.btn.btn-lg {font-size: 0.865rem;padding: 0.6rem 0.865rem;}
.container {padding-right: 10px;padding-left: 10px;}
/* Notification Icon Design*/
.notification-icon {height: 36px;width: 36px;}
.notification-icon i {font-size: 18px;}

/* Modal Design*/
.modal-content .p-4 {padding: 1rem !important;}
label.f-22 {font-size: 16px !important;}
.navbar-toggler {padding: 0;}

/* -------- Enrollment Modal -------- */
.maintenance-modal .modal-body{padding:1.5rem;}
.maintenance-modal .modal-dialog {max-width:94%;margin:0 auto 0;}
.maintenance-modal .f-60{font-size:24px;}
.maintenance-modal p.f-60{font-size:28px;}
.maintenance-modal p.f-18{font-size:15px;}
.maintenance-modal .modal-content {border-radius:18px;}
.maintenance-modal .maintenance-graphics img{width:160px;}
.cookie-text, .cookie-btn{display:inherit;vertical-align:inherit;}
.cookie-text{margin-bottom:5px;}
.cookie-footer{padding:10px;}
/* Add subcontractor design css */
.modal .modal-full-height.custom-modal .modal-content{padding:1rem;}
.sub-contractor-header{margin-bottom:1rem;}
.no-record-main.no-record-img{min-height: calc(100vh - 19.5rem);max-height: calc(100vh - 19.5rem);}
.no-record-main.no-record-img .no-record-found img{height:140px;margin-bottom:20px;}
.no-record-main .no-record-found .no-record-label{font-size:20px;color:#31404E;margin-bottom:20px;line-height:24px;}
.btn-medium{padding:10px;font-size:13px;}
.mobile-list .col{
    flex-basis:auto;
}
/*video tooltip*/
.video-popup-div .modal-content {
height: 260px;
width:100%;
margin:auto;
}
/*video tooltip*/
}


/* 
  ##Device = Most of the Smartphones Mobiles (Portrait)
  ##Screen = B/w 320px to 479px
*/

@media (max-width: 480px) {
    .safety-alert-preview-list.csp-list-d-pg .col-md-12.safety-alerts .card{padding:12px 10px}
    .csp-on-off-section .need-to-show-hide.csp-txt-bx-vs .txt-search-safety-alert{right:-70px; width:260px;}
    /*video tooltip*/
    .video-popup-div .modal-content {
        height: 250px;
        width:100%;
        margin:auto;
    }
/*video tooltip*/
}

@media (min-width: 320px) and (max-width: 480px) {
h1, .h1 {font-size: 1.365rem;}
h3, .h3 {font-size: 1.15rem;}
h4, .h4 {font-size: 1rem;}
h5, .h5 {font-size: 0.9rem;}
.f-22{font-size:20px;} 
.f-20{font-size:18px;} 
.f-18{font-size:16px;} 
.f-16{font-size:14px;}

ul.list-enrolled li a.f-15{font-size:14px !important;}
/*-----Dashboar Css  ----------*/
.graph-text {font-size:40px;}
.count-text {font-size:60px;}

.dashboard-enrollment .p-4{padding:1rem !important;}
.dashboard-enrollment .pr-4{padding-right:1rem !important;}
.dashboard-enrollment .pl-4{padding-left:1rem !important;}
.dashboard-enrollment .pb-4{padding-bottom:1rem !important;}

.dashboard-enrollment .m-4{margin:1rem !important;}
.dashboard-enrollment .mr-4{margin-right:1rem !important;}
.dashboard-enrollment .ml-4{margin-left:1rem !important;}
.dashboard-enrollment .mb-4{margin-bottom:1rem !important;}
.dashboard-enrollment .mt-4{margin-top:1rem !important;}


/*-----Contractor Preview Page design Css -----------------*/ 
.contractor-preview-list .card-body{padding:0.875rem;}
.contractor-package-header h5{font-size:0.965rem;}

.card-body.p-5{padding:1rem !important;}
.summary-value {font-size: 0.965rem;}
.modal-body {padding: 0.8rem;}
.modal-content .p-4 {padding: 0.7rem !important;}
    /*-------Sweet Alert */


.csp-top-tit-to-do-list .titlee h4{font-size:13px;}
    
}

@media (min-width: 320px) and (max-width: 360px) {
    /*--------------- Dashboard Css ---------------*/
.graph-text {font-size:30px;}
.count-text {font-size:60px;}
}