body{
    --primary: #0d6efd;
    --color1: #4b4624;
    --color2: #ff9200;
    --color2-a: var(--color2)"aa";
    --color2-5: #ff920055;
    --color3: #f21113;
    --opacity-3: "33";
    background-color: #ededed;
    /* background-image: url(../images/bg.jpg); */
    /* background-image: linear-gradient(135deg, #0d3c73, #005fd2); */
    background-size: cover;
    font-size: 0.85rem;
}
a, .pointer{cursor: pointer;}
.disabled,[disabled]{opacity: 0.5; pointer-events: none; background-color: #ddd !important;color: #777 !important; border-color: #ccc !important;}
.strong { font-weight: 600; }
.ml-3 { margin-left: 1rem !important; }

.flex-1 { flex: 1 !important;}
.flex-2 { flex: 2 !important;}
.flex-3 {flex: 3 !important;}
.flex-4 { flex: 4 !important;}
.flex-5 { flex: 5 !important;}
.flex-6 { flex: 6 !important;}
.flex-7 { flex: 7 !important;}
.flex-8 { flex: 8 !important;}
.flex-9 { flex: 9 !important;}
.btn-primary {
    color: #fff;
    background-color: #070c50;
    border-color: #080e55;
}
.btn-primary:hover {
    color: #fff;
    background-color: #00adef;
    border-color: #3179c7;
}
.btn-xs {
    padding: 0.25rem 0.4rem;
    font-size: 0.75rem;
    line-height: 1.5;
    border-radius: 0.2rem;
}
.btn i { vertical-align: middle; }
header {
    color: #fff;
    position: relative;
    z-index: 101;
    /* background: linear-gradient(45deg, #1e2574, #131d96); */
    background: linear-gradient(270deg, #00adef, #3871c1);
}
header .logo {
    display: flex;
    gap: 15px;
    align-items: center;
    text-decoration: none;
    font-size: 24px;
    line-height: 1.4;
    font-weight: 600;
}
header .logo img{
    height: 60px;
    background: #fff;
    border-radius: 50%;
    padding: 5px;
}

header .logo small {
    display: block;
    font-size: 70%;
}
.ico-text {
    color: #fff;
    text-decoration: none;
    display: inline-flex;
    border-radius: 5px;
    font-size: 20px;
    border: 1px solid transparent;
    padding: 5px 10px;
    transition: all 0.3s;
    align-items: center;
    gap: 10px;
    position: relative;
}
.ico-text img {
    width: 54px;
    height: 54px;
    object-fit: cover;
    border-radius: 50%;
    border: 2px solid;
}
.ico-text i {
    display: inline-block;
    width: 54px;
    line-height: 54px;
    text-align: center;
    background: #fff1;
    color: #fff;
    border-radius: 50%;
    margin-left: 10px;
    font-size: 34px;
    border: 1px solid #fff3;
}
.ico-text:hover {border-color: #fff3; background-color: #fff1; color: #fff;}
.ico-text small {
    display: flex;
    font-size: 70%;
    line-height: 1;
    opacity: 0.7;
}
.ico-text .prof-drop {
    position: absolute;
    top: 160px; opacity: 0; 
    pointer-events: none;
    visibility: hidden;
    right: 0;
    background: #fff;
    min-width: 200px;
    border-radius: 2px;
    box-shadow: 1px 1px 20px #0008;
    color: #1e2574;
    padding: 15px 10px;
    z-index: 1;
    transition: all 0.3s;
}
.ico-text:hover .prof-drop {
    top: 65px; opacity: 1; pointer-events: all; visibility: visible;
}
.ico-text .prof-drop:before {
    content: '';
    display: block;
    border-bottom: 10px solid;
    border-left: 12px solid transparent;
    border-right: 12px solid transparent;
    width: 1px;
    position: absolute;
    top: -8px;
    right: 23px;
    color: #fff;
}
.ico-text .prof-drop ul {
    list-style: none;
    padding: 0;
    margin: 0;
    font-size: 16px;
}
.ico-text .prof-drop ul a{
    display: block;
    text-decoration: none;
    padding: 2px 10px;
    border-radius: 4px;
    cursor: pointer;
    border: 1px solid transparent;
}
.ico-text .prof-drop ul a:hover{
    background-color: #1e257411;
    /* border-color: #1e257433; */
}
.logout-btn {
    text-decoration: none;
    font-size: 16px;
    background: linear-gradient(135deg, #ededed, #fdfdfd);  
    display: inline-block;
    border-radius: 5px;
    box-shadow: -2px -2px 2px #fff, 2px 2px 2px #3331, 0px 0px 10px #eee;
    padding-right: 15px;
    line-height: 32px;
}
.logout-btn i{
    color: inherit;
    font-size: 18px;
    line-height: 32px;
    width: 32px;
}
.logout-btn:hover {background: linear-gradient(135deg, #f5f5f5, #ddd);}
main{
    height: calc(100vh - 110px);
    margin-left: 250px;
    padding: 15px;
    border-top: 1px solid #fff2;
    transition: all 0.5s;
    overflow: auto;
    position: relative;
}
.neo-box {
    padding: 20px;
    background: linear-gradient(135deg, #ededed, #ffffff);
    border-radius: 5px;
    box-shadow: -2px -2px 5px #fff, 2px 2px 5px #ddd;
    position: relative;
    display: block;
    text-decoration: none;
}
.neo-box h3 {
    padding: 0 0 5px;
    border-bottom: 1px solid #ddd;
}
.neo-box ul a {
    text-decoration: none;
    color: #555;
}
.neo-box ul a:hover{color: var(--color2);}
.neo-box img.bg{
    position: absolute;
    top: 0; left: 0;
    z-index: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
    transition: all 0.3s;
    transform: scale(1.2);
}
.neo-box .layer-1{
    position: relative; z-index: 1; 
    background: linear-gradient(45deg, var(--color2-5), #f2111355);
}
.neo-box .layer-1 h2{
    color: #fff; 
    text-shadow: 1px 1px 5px #f21113, 1px 1px 15px #111;
    font-size: 38px;
    transition: all 0.3s;
}
a.neo-box:hover img.bg{transform: scale(1);}
a.neo-box:hover .layer-1 h2{transform: scale(1.1);}
.form-group {
    margin-bottom: 15px;
    transition: all 1s;
}
.form-control {
    /* background: #ececec; */
    padding: 7px 15px;
}
.form-control:focus {
    border-color: #141e934a;
    box-shadow: 3px 3px 5px #00000040 !important;
}
footer{
    background-color: var(--color1);
    text-align: center;
    color: #fff;
    padding: 5px 0;
    position: relative;
    z-index: 10;
}

.collapsable{
    width: 50px; line-height: 50px; text-align: center; cursor: pointer; 
    opacity: 0.8; transition: all 0.3s; margin-left: 15px;
}
.main-sidebar {
    position: fixed;
    top: 82px;
    left: 0;
    bottom: 30px;
    min-width: 50px;
    width: 250px;
    z-index: 100;
    padding: 15px;
    overflow: auto;
    transition: all 0.3s;
    /* background: linear-gradient(315deg, #0d9ee4, #3d64bb); */
    background: linear-gradient(315deg, #fbfbfb, #ffffff);
}
.main-sidebar ul {
    list-style: none;
    padding: 0;
    font-size: 14px;
}
.main-sidebar ul li {
    /* color: #fff; */
    color: #14209e;
    margin-bottom: 2px;
    width: 215px;
    max-width: 100%;
}
.main-sidebar > ul > li.active{
    background-color: #fff1;
    border-radius: 10px;
}
/* .main-sidebar > ul > li.active > span{color: #fff7;} */
.main-sidebar > ul > li.active > span{
    color: #14209e;
    background: #3871c133;
    padding: 6px;
}
.main-sidebar ul li > span {
    display: block;
    gap: 10px;
    cursor: pointer;
    padding: 0 5px;
    border-radius: 4px;
    line-height: 1.4;
}
.main-sidebar ul li > span a {
    color: #14209e;
    text-decoration: none;
    margin-left: 3px;
}
.main-sidebar > ul > li li span> i {
    display: inline;
}
.main-sidebar > ul > li li ul a {
    color: #6c6f93;
    text-decoration: none;
    display: flex;
    gap: 2px;
    padding: 2px 2px 0 5px;
}
.main-sidebar > ul > li li ul a:hover {text-decoration: underline;}
.main-sidebar > ul > li li ul a:before {
    content: '- ';
}
.main-sidebar ul li > span:hover { background: #3871c133;}
.main-sidebar ul li > span > span {
    display: inline-block;
    width: 135px;
    vertical-align: top;
}
.main-sidebar ul li > span i {
    display: inline-block;
    width: 30px;
    line-height: 22px;
    text-align: center;
    transition: all 0.3s;
}
.main-sidebar ul li > span i.fa-angle-down {width: 20px;}
.main-sidebar ul li.active > span i.fa-angle-down {transform: rotate(180deg);}
.main-sidebar > ul > li > ul > li{
    padding: 5px 10px 5px 50px;
    line-height: 1.3;
    position: relative;
    transition: all 0.3s;
}
.main-sidebar > ul > li > ul > li:hover,
.main-sidebar > ul > li > ul > li.active{background-color: #14209e22; /*padding-left: 60px;*/}
.main-sidebar > ul > li > ul > li:before {
    content: '';
    display: inline-block;
    width: 8px;
    border-top: 2px solid;
    position: absolute;
    left: 35px;
    top: 12px;
    opacity: 0.3;
}
/* .main-sidebar > ul > li > ul > li > a{
    text-decoration: none;
    color: #fff;
} */
.main-sidebar > ul > li > ul > li > a{
    text-decoration: none;
    color: #6c6f93;
}
.main-sidebar > ul > li > ul > li:hover > a{color: #14209e}
body .main-sidebar li > span {
    display: flex;
    gap: 4px;
    padding: 6px;
    outline: 1px solid #eee;
    box-shadow: 1px 1px 10px #3331;
    margin-bottom: 3px;
}
body .main-sidebar li li > span > i:first-child {
    display: none;
}
.collapsed-sidebar .main-sidebar:not(:hover) ul li > span > span, 
.collapsed-sidebar .main-sidebar:not(:hover) i.fa-angle-down {
    display: none;
}
.collapsed-sidebar .main-sidebar:not(:hover) {
    width: 80px;
    /* background: linear-gradient(135deg, #0d3c73, #005fd2); */
    left: 0;
    padding-left: 30px;
    /* bottom: 40px; */
}
.collapsed-sidebar .main-sidebar:hover {
    background-color: #0d3e78de;
    backdrop-filter: blur(10px);
}
.collapsed-sidebar .main-sidebar:not(:hover) ul li{overflow: hidden;}
.collapsed-sidebar .main-sidebar:not(:hover) > ul > li.active{background-color: transparent;}
.collapsed-sidebar main{margin-left: 80px;}
.main-content {
    background: #fff;
    min-height: 50%;
    border-radius: 7px;
}
.breadcrumb-bar {
    color: #1e2574;
    display: block;
}
.breadcrumb-bar h1 {
    margin: 0;
    font-size: 26px;
    color: #444;
}

.breadcrumb-bar .breadcrumb {
    display: inline-flex;
    color: #fff;
}
.breadcrumb-bar .breadcrumb .breadcrumb-item{color: #fff7;}
.breadcrumb-bar .breadcrumb .breadcrumb-item a{
    color: #0d6efd;
    text-decoration: none;
    display: inline-block;
    padding: 2px 10px;
    border-radius: 4px;
}
.breadcrumb-bar .breadcrumb .breadcrumb-item a:hover{
    background: #0d6efd11;
}
.breadcrumb-bar .breadcrumb .breadcrumb-item.active{color: #000000; line-height: 28px;}
.breadcrumb-item+.breadcrumb-item::before{color: #8e8e8e; content: '\2B9E';}
.pr-table{}
.pr-table thead th{
    /*font-weight: 500;
    color: #dc5f00;*/
    font-weight: 400;
    color: #212529;
    background: #f8fbff;
    font-size: 0.75rem;
    vertical-align: top;
    font-weight: bold;
}
.pr-table thead th:first-child,
.pr-table td:first-child{padding-left: 15px;}
.pr-table td{font-size: 0.75rem}
.no-border-table th, .no-border-table td {border-color: #0000;}
.btn-check:focus+.btn-warning, .btn-warning:focus, .btn-warning:active{box-shadow: none !important;}

.table.g-4>:not(caption)>*>*{padding: 1rem 1rem;}
.table.g-5>:not(caption)>*>*{padding: 1.5rem 1.5rem;}
.table.gy-5>:not(caption)>*>*{padding-top: 2rem;}
.table.gy-5>:not(caption)>*>*{padding-bottom: 2rem;}

.theme-changer {
    background: #ff920044;
    color: #fff;
    position: fixed;
    bottom: -90px;
    left: 5px;
    z-index: 1;
    backdrop-filter: blur(15px);
    transition: all 0.3s;
}
.theme-changer:hover {
    bottom: 30px;
}
.theme-changer .title {
    background: #ff9200;
    padding: 5px 10px;
    margin-top: -10px;
    border-radius: 5px 5px 0 0;
    box-shadow: 0px 0px 10px #0007;
    cursor: pointer;
}
.theme-changer .pr-themes{
    padding: 10px;
}
.theme-changer .pr-themes .theme{display: flex; gap: 10px; padding: 5px; cursor: pointer;}
.theme-changer .pr-themes .theme:hover {
    background: #ffffff42;
    border-radius: 3px;
    cursor: pointer;
}
.theme-changer .pr-themes .theme .img{flex: 1}
.theme-changer .pr-themes .theme .img img{
    width: 100%; height: 40px;
    object-fit: cover;
    object-position: left top;
}
.theme-changer .pr-themes .theme .text{flex: 4}
.theme-changer .theme-desc {
    font-size: 12px;
}
.theme-changer .title i {
    display: inline-block;
    width: 40px;
    text-align: center;
    margin-left: 5px;
}

.capsules {
    padding: 5px 0;
    color: #fff;
    display: flex;
    gap: 10px;
    justify-content: end;
}
.capsules .capsule {
    background: #151e8e11;
    color: #151e8e;
    padding: 4px 8px;
    border-radius: 20px;
    display: flex;
    gap: 5px;
}
.capsules .capsule a{
    display: block;
    padding: 2px 10px;
    border-radius: 20px;
    transition: all 0.3s;
}
.capsules .capsule a:hover{
    background: #fff;
    box-shadow: 0px 0px 5px #3333;
}
.global-search-input {
    border: none;
    width: 0px;
    padding: 0;
    transition: all 0.4s;
}
.global-search-input:focus-visible,
.global-search-input:not(:placeholder-shown) {
    border: none; outline: none; box-shadow: none;
    width: 430px; padding: 2px 15px; border-radius: 20px;
}
.global-search-btn{cursor: pointer;}

.pr-section {
    background: #fff;
    border-radius: 5px;
    padding: 10px;
    margin-bottom: 10px;
}
[data-card]{position: relative; border-left: 30px solid #0002;}
[data-card]:before{
    content: attr(data-card);
    display: block;
    position: absolute;
    left: -4px;
    top: 20px;
    transform-origin: left bottom;
    transform: rotate(-90deg);
}
.form-group .label {
    margin-bottom: 5px;
}
.form-group .label small{opacity: 0.6; font-size: 85%;}
/* .main-content .form-control {
    border: none;
    border-bottom: 2px solid #aaa;
    background: #ccc2;
    border-radius: 3px;
} */
.main-content .form-control .label {
    margin-bottom: 3px;
}
select.form-control {
    appearance: auto;
    -webkit-appearance: auto;
    -moz-appearance: auto;
}
.mSelect{
    background-color: #ececec;
    border-radius: 4px;
    border: 1px solid #ccc;
    --height: 65px;
}
.mSelect .multiselect-dropdown,
.mSelect .x{
    height: var(--height);
    background-color: transparent;
    border: none;
    width: 100% !important;
}
.mSelect .multiselect-dropdown-list-wrapper{top: var(--height);}
.mSelect .multiselect-dropdown span.placeholder{
    color: #0008;
    font-size: 18px;
    font-weight: bold;
    text-transform: capitalize;
    font-family: arial;
}
.mSelect .multiselect-dropdown span.optext{
    background-color: #ffffff;
    color: #000000;
    box-shadow: 1px 1px 5px #3333;
}
.multiselect-dropdown-list input{vertical-align: middle;}
.multiselect-dropdown-list label {
    display: inline-block;
    margin: 0;
}
.pri-radios{
    display: flex;
    gap: 15px;
    flex-wrap: wrap;
    border: 1px solid #ddd;
    background: #ececec;
    padding: 7px 10px;
    border-radius: 4px;
}
.pri-check input, .pri-radio input {display: none;}
.pri-check i, .pri-radio i {
    content: '';
    display: inline-block;
    border: 1px solid;
    width: 18px;
    height: 18px;
    vertical-align: middle;
    margin-bottom: 2px;
    border-radius: 1px;
}
.pri-radio i{border-radius: 50%;}
.pri-check input:checked + i:after, .pri-radio input:checked + i:after {
    content: "";
    border: 3px solid;
    border-top: none;
    border-left: none;
    transform: rotate(45deg);
    width: 8px;
    height: 18px;
    display: inline-block;
    position: relative;
    left: 8px;
    bottom: 6px;
}

.pri-check:has(input:checked) + textarea {
    display: block;
    pointer-events: auto;
}

.repeat-form-container {
    position: relative;
    counter-reset: count;
}
.repeat-form {
    padding: 15px;
    margin-bottom: 15px;
    background: linear-gradient(135deg, #f5f5f5, #fcfcfc);
    border-radius: 5px;
    box-shadow: -3px -3px 5px #fff, 1px 1px 3px #ccc, 0px 0px 20px #ddd9;
    border: 1px solid #eee;
    position: relative;
    counter-increment: count;
}
.repeat-form count:before {content: counter(count)}
.repeat-form .close-btn {
    display: block;
    position: absolute;
    right: 0;
    top: 0;
    z-index: 1;
    background: #fcc0;
    width: 30px;
    line-height: 26px;
    text-align: center;
    height: 30px;
    font-size: 26px;
    border-radius: 4px;
    cursor: pointer;
    color: #9007;
    transform: rotate(0deg) scale(0.9);
    transition:all 0.3s;
}
.repeat-form .close-btn:hover {
    background-color: #fcc;
    color: #900;
    transform: rotate(360deg) scale(1);
}
.repeat-form-container .pr-add-btn {
    display: block;
    width: auto;
    position: absolute;
    z-index: 10;
    background: linear-gradient(90deg, #111b89, #1224eb);
    background-size: 150%;
    background-position: right;
    padding: 0 15px;
    color: #fff;
    border-radius: 20px;
    right: 15px;
    bottom: -12px;
    line-height: 26px;
    border: 2px solid #fff;
    outline: 2px solid #141e94;
    cursor: pointer;
    transition: all 0.3s;
}
.repeat-form-container .pr-add-btn:hover {background-position: left; transform: scale(1.05);}
.flex-wrap-2 {
    display: flex;
    flex-wrap: wrap;
    justify-content: flex-start;
    gap: 3rem;
    border: 2px dashed #ddd;
    padding: 3rem;
    border-radius: 4px;
}
.flex-wrap-2 > * {
    flex: 0 0 calc(50% - 1.5rem);
    margin: 0;
}
.dl {
    padding: 10px 0;
    font-size: 16px;
    border-bottom: 1px dashed #0002;
}
.dt {
    color: #333c;
    font-size: 90%;
    line-height: 2;
}
.dd {
    color: #333;
    line-height: 100%;
    font-weight: 600;
}
.details-table th {
    font-weight: 400;
    background: #f9f9f9;
}
.border-dahed{border: 2px dashed #ddd;}



[theme="pr-classic-theme"]{background-image: linear-gradient(135deg, #0d3c73, #005fd2);}
[theme="pr-classic-theme"] header{background: transparent;}
[theme="pr-classic-theme"] .main-sidebar{background: transparent;}
[theme="pr-classic-theme"] .breadcrumb-bar h1{color: #fff;}
[theme="pr-classic-theme"] .capsules .capsule{color: #fff; background: #fff3;}
[theme="pr-classic-theme"] .capsules .capsule a:hover{background: linear-gradient(135deg, #0d3c73, #005fd2);}

.highlight-color {
    border-color: #f11 !important;
    /*background: #fff0f0 !important;*/
    background:#e59090 !important;
}
.instruction {
    position: absolute;
    background: #ffcacb;
    z-index: 100;
    left: 0;
    right: 0;
    top: 0;
    padding: 20px;
    color: #850002;
    font-size: 20px;
}
.instruction strong{color: #850002}


.pri-check:has(input:checked) + textarea {
    display: block;
    pointer-events: auto;
}

.pr-side-modal-container {
    position: fixed;
    right: -100vw;
    top: 0;
    z-index: 100;
    background: #0000;
    padding-left: 100px;
    width: 100vw;
    transition: right 0.6s 0.1s, background 0.1s;
}
.pr-side-modal-container.open {
    right: 0; background: #0008;
    transition: right 0.6s, background 0.6s 0.6s;
}
.pr-side-modal-container .close-modal {
    position: absolute;
    top: 15px;
    left: 60px;
    display: block;
    width: 40px;
    line-height: 36px;
    text-align: center;
    background: #d22;
    color: #fff;
    font-size: 22px;
    height: 40px;
    cursor: pointer;
    border-radius: 10px 0 0 10px;
    z-index: -1;
    transition: all 0.3s;
}
.pr-side-modal-container .close-modal:hover {
    left: 65px;
}
.pr-side-modal-container .modal-main-body{
    background: linear-gradient(45deg, #1e2574, #131d96);
    overflow: auto;
    height: 100vh;
}
.pr-side-modal-container .main-heading {
    background: #fff1;
    color: #fff;
    padding: 30px;
    height: 90px;
    display: flex;
    align-items: center;
}
.pr-side-modal-container .main-heading h4{margin: 0;}
.pr-side-modal-container .main-body{padding: 30px;}
.min-100 {
    min-height: calc(100vh - 150px);
}
.profile-img {
    display: block;
    width: 100%;
    position: relative;
    border: 1px solid #ddd;
    border-radius: 5px;
}
.profile-img:not(.signature-input):before{
    content: 'Upload Applicant Photo';
    display: block;
    text-align: center;
    position: absolute;
    bottom: 0;
    left: 0;
    right: 0;
    line-height: 36px;
    z-index: 10;
    background: #1e2574ee;
    color: #fff;
    font-size: 14px;
    pointer-events: none;
}

.profile-img .prof-img{
    width: 100%;
    border-radius: 4px;
    height: 136px;
    object-fit: contain;
}
.profile-img input {
    position: absolute;
    z-index: 1;
    cursor: pointer;
    left: 0;
    bottom: 0;
    width: 100%;
    height: 40px;
    background: #ccc7;
    opacity: 0;
}
.signature-input img{
    opacity: 0;
    height: 45px;
    border: 2px dashed #ddd0;
    object-fit: contain;
}
.max-h-160px{max-height: 160px; object-fit: contain;}

.columns-1 label {
    flex: 0 0 calc(100% - 10px);
}
.columns-2 label {
    flex: 0 0 calc(50% - 10px);
}
.columns-3 label {
    flex: 0 0 calc(33.333% - 10px);
}
.columns-4 label {
    flex: 0 0 calc(25% - 10px);
}
.columns-5 label {
    flex: 0 0 calc(20% - 10px);
}

ul.check-list {
    list-style: none;
    padding-left: 0;
}
ul.check-list li {
    list-style: none;
}

.has-img{display: flex; gap: 5px;}
.has-img i.preview{
    font-size: 50px;
    line-height: 90px;
    width: 90px;
    text-align: center;
    background: #f1f1f1;
    border-radius: 4px;
    color: #555;
    text-shadow: 2px 2px 0px #fff;
}
.has-img img{
    width: 90px;
    height: 90px;
}
.has-img .input-group { align-items: center; }
.flex-auto {
    flex: auto;
}
.text-uppercase{text-transform: uppercase;}

.preview-pop-bg {
    position: fixed;
    background-color: #0003;
    top: 0;
    right: 0;
    bottom: 0;
    left: 0;
    z-index: 1000;
}
.preview-pop {
    overflow: auto;
    box-shadow: 0px 0px 20px #0003;
    padding: 30px;
    position: fixed;
    top: 50px;
    bottom: 50px;
    z-index: 1001;
    background: #fff;
    left: 140px;
    right: 140px;
}
.preview-pop .form-group {
    pointer-events: none;
    background: #ffffff;
    padding: 10px;
    border-radius: 3px;
    box-shadow: 2px 2px 5px #9993;
}
.view-page h1,
.preview-pop h1 {
    font-size: 24px;
    text-align: center;
    border-bottom: 2px solid;
    padding-bottom: 5px;
}
.view-page .input-group-text:not(.pr-modal .input-group-text),
.preview-pop .input-group-text {
    background: none;
    border: none;
    font-size: 140%;
}
.view-page .form-control:not(.pr-modal .form-control),
.preview-pop .form-control {
    background: none;
    border: none;
    font-weight: 700;
    padding: 4px;
}
.view-page .label:not(.pr-modal .label),
.preview-pop .label {
    color: #555;
    font-size: 14px;
    margin: 0 0 4px;
    border-bottom: 1px solid #eee;
}
.view-page .form-group:not(.pr-modal .form-group) {
    background: #ffffff;
    padding: 10px;
    border-radius: 3px;
    box-shadow: 2px 2px 5px #9993;
}
.view-page .input-group:not(.pr-modal .input-group) {
    align-items: center;
}
.view-page .input-group .input-group-text:not(.pr-modal .input-group .input-group-text) {
    opacity: 0.4;
}
.view-page .input-group .value:not(.pr-modal .input-group .value) {
    font-weight: 500;
    word-break: break-word;
}
.view-page .profile-img:before{display: none;}

/* PR Modal */
.pr-modal {
    position: fixed;
    z-index: -1000;
    top: 0;
    right: 0;
    bottom: 0;
    left: 0;
    display: flex;
    justify-content: center;
    align-items: center;
    background-color: #0003;
    opacity: 0;
    transition: all 0.4s;
    pointer-events: none;
}
.pr-modal .pr-modal-content {
    background: #fff;
    position: relative;
    max-width: 100%;
    width: 1000px;
    max-height: 100vh;
    overflow: auto;
    box-shadow: 1px 1px 5px 0px #0005;
    border-radius: 4px;
    transition: all 0.3s;
    transform: scale(0.8);
}
.pr-modal .pr-modal-close{
    position: absolute;
    top: 2px;
    right: 2px;
    z-index: 102;
    font-size: 20px;
    color: #f00;
    display: block;
    height: 30px;
    line-height: 26px;
    width: 30px;
    text-align: center;
    background: #3333;
    border-radius: 4px;
    cursor: pointer;
    transition: all 0.3s;
}
.pr-modal .pr-modal-close:hover {
    background: #fee;
    box-shadow: 1px 1px 5px #3333;
    color: #d00;
}
.pr-modal .pr-modal-content.pop-xl {
    width: 1200px;
}
.pr-modal .pr-modal-content.pop-sm {
    width: 700px;
}
.pr-modal .pr-modal-content.pop-xs {
    width: 400px;
}
.pr-modal .pr-modal-content.pop-m {
    width: 500px;
}
.pr-modal.popin {
    opacity: 1;
    pointer-events: all;
    z-index: 1000;
}
.pr-modal.popin .pr-modal-content {
    transform: scale(1);
}
.pr-modal-content header {
    border-bottom: 1px solid #ddd;
    padding: 10px 30px;
    font-size: 1.2rem;
    background: #12196f11;
    color: var(--color1);
}
.pr-modal-content section {
    padding: 30px;
}


.thumb-60{width: 60px; height: 60px; object-fit: contain;}
i.thumb-60 {
    font-size: 40px;
    padding: 10px;
    display: inline-block;
    box-shadow: 1px 1px 5px #3336;
    background: #f9f9f9;
    border-radius: 4px;
    color: #555;
    width: auto;
}

img.sidemenu {
    width: 30px;
    max-height: 30px;
    object-fit: contain;
}

::-webkit-scrollbar {
    width: 5px;
}

::-webkit-scrollbar-track {
    box-shadow: inset 0 0 5px grey;
    border-radius: 10px;
  }
  
  /* Handle */
  ::-webkit-scrollbar-thumb {
    background: #002959;
    border-radius: 10px;
  }
  p.alert, div.alert {
    position: fixed;
    z-index: 10000;
    top: -150px;
    right : 0;
    width: 100%;
    transition: all 0.3s;
    opacity: 0;
    border-radius: 0;
}
p.alert:before, div.alert:before {
    font-family: 'icomoon', 'priyafonts' !important;
    content: "\f071";
    font-size: 150%;
    margin-right: 10px;
    display: inline-block;
    vertical-align: middle;
}
p.alert-danger:before, div.alert-danger:before {
    content: "\f071";
}
p.alert-success:before, div.alert-success:before {
    content: "\2714";
    font-family: 'Times New Roman', Times, serif;
}
p.alert.enter, div.alert.enter {top: 0; opacity: 1}
.table-responsive table:not(.th-wrap) tr th { white-space: nowrap; }

.existing-files:not(.row) {
    display: flex;
    gap: 5px;
    padding: 5px 0;
}
.existing-files .file-single {
    display: flex;
    width: 120px;
    font-size: 40px;
    align-items: center;
    justify-content: center;
    position: relative;
}
.preview.img-thumbnail {
    width: 100%;
    max-width: 20% !important;
    object-fit: cover;
}
.existing-files .file-single close{
    font-size: 7px;
    cursor: pointer;
    position: absolute;
    right: 0;
    top: 0;
    background: #f001;
    padding: 3px;
    z-index: 1;
}
.existing-files .file-single close:before{
    content: '\274c';
}

.btn-comply{ white-space: nowrap; background-color: #fff0f0; display:none;}
.show-in-compliance{display: none;}
.btn-comply input{ display: none;}
.btn-comply input + i {
    display: inline-block;
    width: 20px;
    height: 20px;
    border: 1px solid #3335;
    vertical-align: bottom;
    margin-right: 5px;
}
.btn-comply input:checked + i:before {
    content: '\2713';
    color: #f00;
    font-weight: 700;
    font-size: 150%;
    transform: translateY(-10px);
    display: block;
}
.comply-text textarea.form-control {
    border: 1px solid #ddd;
    color: #c00;
    font-weight:400;
}
.comply-text textarea.form-control::placeholder {color: rgb(225, 195, 195);}
.comply-info {
    color: #ff841b;
    font-size: 1.2rem;
    /*margin-right: 5px;*/
    vertical-align: middle;
    cursor: pointer;
}
.comply-field{
    padding: 5px;
    border: 1px solid #ff841b44;
    background: #ff841b33 !important;
}
#complyMessage{
    position: fixed;
    top: -100px;
    left: 0;
    right: 0;
    z-index: 1000;
    padding: 10px;
    background: #fee;
    color: #f00;
    text-align: center;
    transition: all 0.3s;
}
#complyMessage.appear{top:0;}

/* HTML: <div class="loader"></div> */
.loader-wrapper {
    position: fixed;
    z-index: 10000;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: #fffe;
    display: flex;
    align-items: center;
    justify-content: center;
}
/* .loader {
    width: 40px;
    aspect-ratio: 1;
    color: #f03355;
    position: relative;
    background: radial-gradient(10px,currentColor 94%,#0000);
  }
  .loader:before {
    content: '';
    position: absolute;
    inset: 0;
    border-radius: 50%;
    background:
      radial-gradient(9px at bottom right,#0000 94%,currentColor) top    left,
      radial-gradient(9px at bottom left ,#0000 94%,currentColor) top    right,
      radial-gradient(9px at top    right,#0000 94%,currentColor) bottom left,
      radial-gradient(9px at top    left ,#0000 94%,currentColor) bottom right;
    background-size: 20px 20px;
    background-repeat: no-repeat;
    animation: l18 1.5s infinite cubic-bezier(0.3,1,0,1);
  }
  @keyframes l18 {
     33%  {inset:-10px;transform: rotate(0deg)}
     66%  {inset:-10px;transform: rotate(90deg)}
     100% {inset:0    ;transform: rotate(90deg)}
  } */

  .loader {
      width: 120px;
      height: 120px;
      animation: pulse 2s ease-in-out infinite;
      border-radius: 50%;
      overflow: hidden;
      background: rgba(255, 255, 255, 0.1) url('../images/ofs.png') no-repeat center;
      background-size: contain;
      display: flex;
      justify-content: center;
      align-items: center;
    }
    
    @keyframes spin {
      0% { transform: rotate(0deg); }
      100% { transform: rotate(360deg); }
    }
    @keyframes pulse {
      0% { transform: scale(1); }
      50% { transform: scale(1.1); }
      100% { transform: scale(1); }
    }

  .report-btns a:not(.btn){
    display: block;
    text-decoration: none;
    padding: 2px;
    /*background: linear-gradient(315deg, #ffffff, #f2f2f2);*/
    border-radius: 5px;
    /*color: #172089;*/
    box-shadow: -2px -2px 2px #fff, 2px 2px 2px #3332;
    padding: 8px 2px;
    text-align: center;
    transition: all 0.3s;
}
.report-btns a strong{font-size: 20px;}
.report-btns a p{margin: 0;}

@keyframes bounceIn {
    0% {
      opacity: 0;
      transform: scale(0.3);
    }
    50% {
      opacity: 1;
      transform: scale(1.05);
    }
    70% {
      transform: scale(0.9);
    }
    100% {
      transform: scale(1);
    }
  }

  @keyframes swing {
    20% {
      transform: rotate(15deg);
    }
    40% {
      transform: rotate(-10deg);
    }
    60% {
      transform: rotate(5deg);
    }
    80% {
      transform: rotate(-5deg);
    }
    100% {
      transform: rotate(0deg);
    }
  }

/* .report-btns a:hover{transform-origin: top center; animation: swing 1s ease forwards;} */
/* .report-btns a:hover{box-shadow: 0px 0px 20px #e2e5ff, -2px -2px 2px #fff, 2px 2px 2px #3332; background: #e2e5ff;} */
.report-btns a:hover{
    box-shadow: -2px -2px 2px #fff, 2px 2px 2px #bfd7e3;
    /*background: linear-gradient(315deg, #f4fbff, #dfe7eb);*/
}

.webmail {
    display: flex;
}
.webmail .sidebar {
    width: 200px;
    padding: 15px;
}
.webmail .compose-btn {
    display: block;
    width: 100%;
    background: linear-gradient(315deg, #ffffff, #efefef);
    line-height: 34px;
    border: 3px solid #fff;
    border-radius: 30px;
    box-shadow: 1px 1px 10px #3335;
    position: relative;
    padding-left: 22px;
    font-size: 22px;
    color: #555;
    padding-bottom: 4px;
}
.webmail .compose-btn i {
    position: absolute;
    font-size: 18px;
    left: 5px;
    top: 5px;
    color: #fff;
    background: #17208a;
    line-height: 30px;
    width: 30px;
    border-radius: 50%;
}
.webmail .mail-content {
     width: calc(100% - 240px);
    margin: 15px 0;
    background: #ffe6d310;
    height: calc(100vh - 180px);
    overflow: auto;
    border-left: 2px solid #ffe6d3;
}
.webmail ul.btns {
    list-style: none;
    margin: 15px -15px 0 0;
    padding: 0;
}
.webmail ul.btns li {
    padding: 5px 15px;
    background: #eee5;
    margin-bottom: 3px;
    border-radius: 20px 0 0 20px;
    font-size: 15px;
    cursor: pointer;
    transition: all 0.3s;
}
.webmail ul.btns li:hover {background: #eee7;}
.webmail ul.btns li.active {
    background: #ffe6d3;
    color: #dc5f00;
}
table.table-inner.table>tbody>tr:last-child>td{border-bottom: 0; margin-bottom: 0;}
.bg-watermark{background: url(../images/water-mark-logo.png) no-repeat center; background-size: contain;}
.fsr-certificate-form .form-control{background: #e9ecefaa;}

input.li-lable:read-only {
    border: none;
    background: none;
    font-weight: bold;
}
table{counter-reset: count;}
.count:before {
    counter-increment: count;
    content: counter(count);
}
.otp-resend-text { padding: 7px; }
.otp-resend-text span.otp-timer {font-weight: 700; display: inline-block; padding: 5px; font-size: 120%;}
/* .filter-content {
    background: #fff;
    
    / * position: fixed; 
    z-index: 100;
    bottom: -100vh;
    left: 0;
    width: 100%;
    box-shadow: 0px -5px 30px #0005;* /

    max-height: 0;
    padding: 0 !important;
    margin-bottom: 0;
    overflow: hidden;
    transition: all 0.3s;
}
.filter-content.open {padding: 15px; max-height: 500px; margin-bottom: 20px;} */
.filter-content{min-height: 1px !important;}
.para-input{border: 1px solid #ddd; padding: 5px;}

.accordion-section { background: #00adef11; }
.accordion-heading {
    padding: 5px 15px;
    background: #00adef05;
    color: #00adef;
    cursor: pointer;
    margin: 0;
    transition: all 0.3s;
}
.accordion-heading:before {
    content: '\2BC5';
    display: inline-block;
    float: right;
    transition: all 0.3s;
}
.accordion-section.active .accordion-heading:before {transform: rotate(180deg);}
.accordion-heading:hover, 
.accordion-section.active .accordion-heading{
    background: #00adef;
    color: #fff;
}
.accordion-content {
    padding: 10px;
}
.max-70vh{max-height: 70vh; overflow: auto}
.max-70vh thead th {
    position: sticky;
    top: -1px;
    background: #eee;
}
.warning-text {
    position: sticky;
    top: 0;
    z-index: 10;
    background-color: #ffddbf;
    color: #f27100;
    font-size: 15px;
    padding: 9px 10px;
    font-weight: 600;
    margin-top: 40px;
    transform: translateY(-25px);
    text-align: center;
    box-shadow: 0 0 10px 2px rgba(242, 113, 0, 0.6);
    animation: glowRotate 3s linear infinite;    
}

/* Animate glowing shadow in a circular angle */
@keyframes glowRotate {
    0%   { box-shadow: 0 0 15px 2px rgba(242, 113, 0, 0.7); }
    25%  { box-shadow: 10px 0 20px 4px rgba(242, 113, 0, 0.8); }
    50%  { box-shadow: 0 10px 20px 4px rgba(242, 113, 0, 0.8); }
    75%  { box-shadow: -10px 0 20px 4px rgba(242, 113, 0, 0.8); }
    100% { box-shadow: 0 0 15px 2px rgba(242, 113, 0, 0.7); }
}
.pointer-events-none{pointer-events: none;}
.apply-drop {
    position: relative;
}
.apply-drop > ul {
    position: absolute;
    background: #fff;
    padding: 5px;
    border-radius: 5px;
    z-index: 10;
    list-style: none;
    margin: 0;
    right: 0px;
    top: 100px;
    pointer-events: none;
    opacity: 0;
    width: 300px;
    box-shadow: 1px 1px 25px #3335;
    transition: all 0.3s;
}
.apply-drop:hover > ul {top: 33px; pointer-events: all; opacity: 1;}
.apply-drop > ul li:not(:last-child) {
    border-bottom: 1px solid #ddd;
}
.apply-drop > ul a {
    text-decoration: none;
    padding: 8px;
    display: block;
    line-height: 1.2;
    transition: all 0.2s;
}
.apply-drop > ul a:hover{background-color: #eee}

.column-count-2{column-count: 2; column-gap: 1rem;}
.pr-modal header.text-color2 {
    background: linear-gradient(270deg, #00adef, #3871c1);
    padding: 10px 20px;
    border-radius: 5px 5px 0 0;
    color: #fff;
}

ul.accord-list {
    list-style: none;
    padding: 0;
}
ul.accord-list li {
    margin-bottom: 2px;
    border-radius: 4px;
    padding: 5px;
}
ul.accord-list li:hover{background: linear-gradient(45deg, var(--color2-5), #f2111355);}
ul.accord-list li:before{
    content: '\2B9E';
    display: inline-block;
    font-size: 80%;
    color: #f52c0f;
    margin-right: 5px;
}
.accord-list li > span{cursor: pointer;}
ul.accord-list li a,
ul.accord-list li > span{
    color: #111;
    display: inline-block;
    max-width: calc(100% - 30px);
    vertical-align: top;
    text-decoration: none;
}
ul.accord-list li > a:hover,
ul.accord-list li > span:hover{
    color: #d50d00;
}
.apply-drop ttl {
    --gradiantRotate: 45deg;
    line-height: 45px;
    background: linear-gradient(var(--gradiantRotate), #ff9200, #f21113);
    color: #fff;
    display: inline-block;
    padding: 0 30px;
    font-size: 1.2rem;
    text-transform: uppercase;
    border-radius: 15px;
    font-weight: 600;
    text-shadow: 1px 1px 1px #3333;
    box-shadow: -2px -2px 2px #fff, 2px 2px 2px #3333, 0px 0px 20px #3334;
    cursor: pointer;
    transition: all 0.3s;
    animation: gradiantrotate 1s linear infinite;
}
.apply-drop ttl:hover{
    transform: translateY(-5px);
    box-shadow: -2px -2px 2px #fff, 2px 2px 2px #3333, 2px 2px 5px #3338;
}

@keyframes gradiantrotate{
    0%, 20%, 100%{
        outline: 0px solid #f00;
    }
    10%{
        outline: 3px solid #f00;
    }
}

/* Step Form  */
    #progressbar{
        padding-left:0;margin-bottom:30px;overflow:hidden;
        color:#0003;display:flex; counter-reset: formpart;
        font-weight: 500;
    }
    #progressbar .active{
        color: var(--color1);
    }
    #progressbar li{list-style-type:none;font-size:15px;flex:1;position:relative;text-align:center;padding-top: 3px;}
    #progressbar li:before{
        width:50px;height:50px;line-height:45px;display:block;
        font-size:26px;
        color:#aaa;
        background:#ccc;
        font-weight: bold;
        border-radius:50%;margin:0 auto 10px auto;padding:2px;text-align:center;
        position:relative;z-index:1;
        counter-increment: formpart;
        content: counter(formpart);
    }
    #progressbar li:after{content:'';width:100%;height:2px;background:lightgray;position:absolute;left:0;top:25px;z-index:0;}

    #progressbar li.visited:before,
    #progressbar li.visited:after{
        background: #0f2f55;
        color: #fff;
    }
    #progressbar li.active:before{box-shadow: -2px -2px 2px #ffffff, 2px 2px 2px #0003, 0px 0px 7px #0003}
    #progressbar li.active:before,
    #progressbar li.active:after{
        background: linear-gradient(45deg, #927206, #f7c20e, #927206);
        color: #fff;
    }

.step-status-wrapper {
    display: flex;
    gap: 15px;
}

.step-status-wrapper .step-status {
    width: 240px;
    padding: 15px;
    border-left: 1px solid #ddd;
}

.step-status-wrapper form {
    flex: 1;
}

.status-li {
    display: flex;
    align-items: start;
    padding: 8px 0;
    gap: 10px;
    font-weight: 500;
    color: #bbb;
    font-size: 1rem;
    position: relative;
}
.status-li:before {
    content: '';
    --dot-size: 25px;
    display: block;
    width: var(--dot-size);
    height: var(--dot-size);
    font-weight: bold;
    text-align: center;
    line-height: var(--dot-size);
    border-radius: 50%;
    background: #fff;
    flex: none;
    margin-top: 2px;
    position: relative;
    z-index: 1;
    border: 2px solid #ddd;
}
.status-li:after {
    content: '';
    display: block;
    width: 1px;
    height: 100%;
    border-right: 2px solid #ddd;
    position: absolute;
    left: 12px;
    top: 33px;
    z-index: 0;
}
.status-li:last-child:after {display:none;}
.status-li.active { color: #198754; }
.status-li.active:before {content: '\2713'; background: #198754; color: #fff; border: none;}
.status-li.active:after { border-color: #198754; }
.status-li.current{color: #222;}
.status-li.current:before{content: '\2726'; background: #222; color: #fff; border: none; line-height: 24px;}

/* .status-li:has( + .active):after{border-color: #198754;} */
.table-head {
    padding: 10px 15px;
    border: 1px solid #ddd;
    margin: 0 16px -2px !important;
    background: #eee;
}
.object-fit-contain { object-fit: contain;}

.document-uploaded-checks {
    width: 250px;
    border-left: 1px solid;
    padding-left: 10px;
}
.document-uploaded-checks strong{display: block; font-size: 1.01rem; margin-bottom: 5px}
.document-uploaded-checks check{display: block;font-size: 0.9rem;padding: 5px 0 0 30px;position: relative;color: #aaa;}
.document-uploaded-checks check:before{content:'';display: block;width: 20px;height: 20px;border: 1px solid;position: absolute;left: 0;top: 8px;}
.document-uploaded-checks check.done:after{content:'\2713';position: absolute;left: 2px;font-size: 1.8rem;top: -10px;}
.document-uploaded-checks check.not-required:after{content:'';position: absolute;left: 2px;top: -10px;}
.document-uploaded-checks check.done{color:#198754; font-weight:500;}

/* Progress Bar  */
.progress-container {
    width: 100%;
    background-color: #f3f3f3;
    border-radius: 5px;
    overflow: hidden;
    margin-top: 10px;
}

.prev_files {
    display: flex;
    flex-wrap: wrap;
    gap: 5px;
    padding: 5px;
}
.prev_files a {
    display: flex;
    background: #eee;
    border-radius: 5px;
    text-align: center;
    align-items: center;
    padding: 5px 8px;
    gap: 5px;
    border: 1px solid #fff0;
    transition: all 0.3s;
}
.prev_files img.preview {
    height: 40px;
    border-radius: 5px;
    border: 1px solid #fff0;
    transition: all 0.3s;
}
.prev_files a:hover, .prev_files img.preview:hover {box-shadow: 2px 2px 5px #3335; transform: translateY(-2px); border-color:#fff;}
.cstm_trash{
    display: flex;
    background: #eee;
    border-radius: 5px;
    text-align: center;
    align-items: center;
    padding: 5px 8px;
    margin-left: 5px;
    border: 1px solid #fff0;
    transition: all 0.3s;
    color: red;
    cursor: pointer;
}
.ind_file_section{
    display: flex;
}

/* only for make field readonly  */
.temporary-readonly{
    pointer-events: none;
    background-color: #e9ecef;
}

.staircases > ol > li:not(:last-child) {
    border-bottom: 1px dashed #aaa;
    padding-bottom: 5px;
    margin-bottom: 10px;
}
.staircases > ol > li{position: relative;}
.staircases > ol > li .close-li{
    position: absolute;
    cursor: pointer;
    right: 5px;
    top: 5px;
    font-size: 26px;
    color: #0005;
    display: block;
    width: 30px;
    line-height: 20px;
    text-align: center;
    padding-bottom: 8px;
    transition: all 0.3s;
}
.staircases > ol > li .close-li:hover {
    color: #f00;
    transform: scale(1.5);
}

#applicant_is_above_section input[type="radio"] {
    opacity: 1 !important;
    position: static !important;
    width: auto !important;
    height: auto !important;
    margin-right: 5px;
}





span.optext {
    line-height: 32px;
}

.filter-section {
    position: sticky;
    top: -15px;
    z-index: 99;
    background: #fff;
    padding: 10px 10px;
    border-bottom: 1px solid #ddd;
}























@media (max-width: 768px) {
    .container-fluid.py-2 {
        padding-left: 12px !important;
        padding-right: 12px !important;
        padding-top: 10px !important;
        padding-bottom: 10px !important;
        flex-wrap: wrap;               
        gap: 8px;
    }

    .logo {
        flex: 1 1 auto;
        min-width: 0;                  
    }

    .logo img {
        height: 20px;                   
        width: auto;
    }

    .logo span {
        font-size: 0.95rem;          
        line-height: 1.2;
    }

    .logo span small {
        font-size: 0.7rem;              
    }

    
    .logo span::before {
        content: "OF&ES ";              
        font-weight: 600;
    }

    .logo span {
        display: inline-block;
        white-space: nowrap;
        overflow: hidden;
        text-overflow: ellipsis;
        max-width: 140px;               
    }

        .logo span .full-name { display: none; }
        .logo span .short-name { display: inline; }

    .right-part {
        gap: 12px !important;          
        flex-wrap: nowrap;
        justify-content: flex-end;
    }

    .ico-text {
        font-size: 0.85rem;
        gap: 8px;
    }

    .ico-text > div {
        max-width: 110px;
        overflow: hidden;
        text-overflow: ellipsis;
        white-space: nowrap;
    }

    .ico-text > div small {
        font-size: 0.7rem;
    }

    .ico-text img.thumb-60 {
        width: 44px;
        height: 44px;
    }

    .apply-drop ttl {
        font-size: 0.9rem;
        padding: 6px 14px;
        min-width: 80px;
        text-align: center;
        border-radius: 999px;          
        line-height: 1.3;
        box-shadow: 0 2px 6px rgba(0,0,0,0.15);
    }

    .priya-bars.collapsable {
        font-size: 1.4rem;
        margin-right: 8px;
    }

    .preview-pop{top: 0; left: 0; right: 0; bottom: 0;}
    .hover-note .hover-content{left: auto !important; right: -20px;}
    
}

@media (max-width: 480px) {
    .logo img { height: 36px; }
    .logo span { font-size: 0.9rem; max-width: 110px; }
    .right-part { gap: 10px; }
    .ico-text img.thumb-60 { width: 40px; height: 40px; }
    .apply-drop ttl {
        font-size: 0.82rem;
        padding: 5px 12px;
        min-width: 70px;
    }
}


.apply-drop {
    flex-shrink: 0;               
    margin-left: auto;            
}

.apply-drop ttl {
    display: inline-block !important;   
    white-space: nowrap;
    min-width: 70px;
    text-align: center;
}

@media (max-width: 768px) {
    .container-fluid.py-2 {
        flex-wrap: nowrap !important;    
        padding: 8px 12px !important;
        gap: 10px !important;
    }

    .right-part {
        flex-shrink: 1;
        gap: 10px !important;
        min-width: 0;
    }

    .ico-text {
        max-width: 160px;                 
        flex-shrink: 1;
    }

    .ico-text > div {
        font-size: 0.82rem;
        max-width: 100px;
        overflow: hidden;
        text-overflow: ellipsis;
        white-space: nowrap;
    }

    .apply-drop {
        flex: 0 0 auto;
    }

    .apply-drop ttl {
        font-size: 0.85rem !important;
        padding: 6px 14px !important;
        border-radius: 999px !important;
        background: linear-gradient(90deg, #ff5e3a, #ff2e63) !important; 
        color: white !important;
        font-weight: 700 !important;
        box-shadow: 0 2px 8px rgba(0,0,0,0.25) !important;
        min-width: 68px;
        text-transform: uppercase;
        letter-spacing: 0.5px;
    }

    @media (max-width: 480px) {
        .apply-drop ttl {
            font-size: 0.78rem !important;
            padding: 5px 12px !important;
            min-width: 62px;
        }
    }
}



@media (max-width: 576px) {
  .main-content {
    padding: 12px 10px !important;
  }

  body {
    font-size: 0.95rem;
  }

  .row.g-5 {
    --bs-gutter-x: 0.75rem !important;
    --bs-gutter-y: 1.2rem !important;
  }

  .row.align-items-center,
  .form-group.row {
    flex-direction: column !important;
    align-items: stretch !important;
    gap: 0.4rem !important;
  }

  .row.align-items-center > label,
  .pr-table th.label {
    width: 100% !important;
    max-width: 100% !important;
    margin-bottom: 0.35rem !important;
    font-size: 1rem !important;
    font-weight: 600 !important;
    color: inherit;
  }

  .row.align-items-center > div[class*="col-"],
  .pr-table td {
    width: 100% !important;
    max-width: 100% !important;
  }

  .pr-table tr {
    display: block !important;
    margin-bottom: 1.1rem !important;
    border: 1px solid #ddd !important;
    border-radius: 6px !important;
    background: inherit;
  }

  .pr-table thead,
  .pr-table th:not(.label) {
    display: none !important;
  }

  .pr-table th.label,
  .pr-table td {
    display: block !important;
    text-align: left !important;
    border: none !important;
    padding: 10px 14px !important;
  }

  .pr-table td:before {
    /* content: attr(data-label) ": "; */
    font-weight: 600;
    color: inherit;
    display: block;
    margin-bottom: 0.4rem;
    font-size: 0.85rem;
    text-transform: uppercase;
  }

  .repeat-form {
    padding: 14px 12px !important;
    margin-bottom: 1.25rem !important;
    border-radius: 8px !important;
  }

  .repeat-form-container.flex-wrap-2 > * {
    flex: 0 0 100% !important;
  }

  .applicant-photo-wrapper,
  .applicant-sign-wrapper {
    flex-direction: column !important;
    text-align: center !important;
  }

  .applicant-photo-wrapper img,
  .applicant-sign-wrapper img {
    max-width: 180px !important;
    height: auto !important;
    margin: 12px auto !important;
  }

  /* .btn {
    width: 100% !important;
    padding: 0.7rem !important;
    font-size: 1.05rem !important;
    margin: 0.5rem 0 !important;
    min-height: 48px !important;
  } */

  .text-center .btn + .btn {
    margin-left: 0 !important;
  }

  #progressbar {
    font-size: 0.78rem !important;
    flex-wrap: wrap !important;
    justify-content: center !important;
    gap: 6px !important;
  }

  #progressbar li {
    flex: 1 1 48% !important;
    margin: 3px 1px !important;
  }

  #progressbar li:before {
    width: 40px !important;
    height: 40px !important;
    line-height: 38px !important;
    font-size: 1.15rem !important;
    margin-bottom: 6px !important;
  }
}

@media (min-width: 577px) and (max-width: 991px) {
  .main-content {
    padding: 16px 20px !important;
  }

  .row.align-items-center > label {
    flex: 0 0 40% !important;
    max-width: 40%;
    font-size: 0.97rem;
  }

  .row.align-items-center > div[class*="col-"] {
    flex: 1 !important;
    max-width: 60%;
  }

  .pr-table th,
  .pr-table td {
    padding: 9px 12px !important;
  }

  #progressbar li {
    font-size: 0.88rem !important;
  }

  #progressbar li:before {
    width: 46px !important;
    height: 46px !important;
    line-height: 44px !important;
  }

  .btn {
    padding: 0.65rem 1.3rem !important;
  }
}



@media (max-width: 991px) {
  .step-status-wrapper {
    flex-direction: column !important;
    gap: 1rem !important;
  }

  .step-status {
    width: 100% !important;
    order: -1;                   
    padding: 12px 16px !important;
    background: inherit;
    border-radius: 6px;
    border: 1px solid #e0e0e0;
  }

  .step-status h5 {
    margin: 0 0 12px 0;
    font-size: 1.15rem;
    text-align: center;
  }

  .status-list {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: 10px;
  }

  .status-li {
    flex: 1 1 auto;
    min-width: 140px;
    max-width: 45%;
    text-align: center;
    padding: 10px 12px !important;
    font-size: 0.95rem !important;
    border-radius: 6px;
    background: inherit;
    border: 1px solid #ced4da;
  }

  @media (max-width: 576px) {
    .status-list {
      flex-direction: column !important;
      align-items: stretch;
      gap: 8px;
    }

    .status-li {
      max-width: 100% !important;
      min-width: auto;
      font-size: 0.98rem !important;
      padding: 12px !important;
    }
  }
}


/* button, .btn, input[type="submit"], input[type="button"] {
  min-height: 48px;
  min-width: 48px;
} */

input[type="text"],
input[type="tel"],
input[type="number"],
input[type="email"],
input[type="password"] {
  font-size: 1rem;
}

.pr-table-responsive-wrapper,
.repeat-form-container,
.main-content {
  -webkit-overflow-scrolling: touch;
}
/* ========================== MOBILE HEADER CLEANUP ========================== */
@media (max-width: 576px) {

    header .logo span {
        display: none !important;
    }

    header .logo img {
        height: 42px !important;
    }

    header .ico-text > div:first-child {
        display: none !important;
    }

    header .ico-text {
        padding: 6px 10px !important;
        gap: 0 !important;
    }

    header .ico-text img.thumb-60,
    header .ico-text i.priya-user {
        width: 48px !important;
        height: 48px !important;
        font-size: 28px !important;
        line-height: 48px !important;
        border-radius: 50% !important;
        border: 2px solid #fff;
        box-shadow: 0 2px 8px rgba(0,0,0,0.2);
        margin: 0 auto !important;
        display: block !important;
    }

    header .right-part {
        gap: 12px !important;
    }

    header .apply-drop ttl {
        font-size: 0.82rem !important;
        padding: 6px 14px !important;
        min-width: 68px !important;
    }
}

@media (max-width: 380px) {
    header .logo img {
        height: 38px !important;
    }
    header .ico-text img.thumb-60,
    header .ico-text i.priya-user {
        width: 44px !important;
        height: 44px !important;
    }
}







@media (max-width: 576px) {

  /* Stop hiding ALL th — only hide header row if you have one */
  /* .pr-table thead th,
  .pr-table th:not(.applicant-photo-wrapper th, .applicant-sign-wrapper th) {
    display: none !important;
  } */

  /* Make sure BOTH th and td are visible as blocks */
  .pr-table tr.applicant-photo-wrapper th,
  .pr-table tr.applicant-sign-wrapper th,
  .pr-table td {
    display: block !important;
    width: 100% !important;
    padding: 12px 14px !important;
    border: none !important;
  }

  /* Better spacing & visual separation */
  .pr-table tr.applicant-photo-wrapper,
  .pr-table tr.applicant-sign-wrapper {
    display: block !important;
    margin-bottom: 1.25rem !important;
    border: 1px solid #dee2e6 !important;
    border-radius: 8px !important;
    background: #fff !important;
  }

  /* Make labels prominent again */
  .pr-table h6.label {
    margin: 0 0 8px 0 !important;
    font-size: 1rem !important;
    font-weight: 600 !important;
    color: #212529 !important;
  }

  /* File input + small text */
  .pr-table .form-field,
  .pr-table small.text-muted {
    margin: 0 !important;
  }

  /* Preview images */
  .pr-table .img-thumbnail {
    width: 160px !important;
    height: auto !important;
    max-height: 140px !important;
    display: block !important;
    margin: 10px auto 0 !important;
  }
}







@media (max-width: 576px) {

  .pr-table th.label {
    display: block !important;
    visibility: visible !important;
    width: 100% !important;
    min-height: 40px !important;
    padding: 12px 16px 8px !important;
    font-size: 1rem !important;
    font-weight: 600 !important;
    color: #212529 !important;
    background: #f8f9fa !important;
    border-bottom: 1px solid #dee2e6 !important;
  }

  .pr-table th.label,
  .pr-table tr.mandatory th,
  .pr-table tr.letter_of_authentication_file th {
    display: block !important    
  }

  .pr-table td {
    display: block !important;
    /* width: 100% !important; */
    padding: 0 16px 16px !important;
    border: none !important;
  }

  .pr-table tr {
    /* display: block !important; */
    margin-bottom: 1.25rem !important;
    border: 1px solid #dee2e6 !important;
    border-radius: 8px !important;
    background: white !important;
    overflow: hidden;
  }

  .pri-radios {
    padding: 8px 0;
    display: flex;
    gap: 2rem;
    flex-wrap: wrap;
  }

  .pri-radio {
    font-size: 1rem;
  }
}





/* ===========================
   MOBILE & TABLET ONLY FIXES
   =========================== */

/* 📱 Mobile + Tablet */
@media (max-width: 991.98px) {

    /* Stack all Bootstrap columns */
    .row > [class*="col-"] {
        width: 100%;
        max-width: 100%;
        flex: 0 0 100%;
    }

    /* Reduce label size */
    .label {
        font-size: 13px;
        line-height: 1.4;
        word-break: break-word;
    }

    /* Fix profile image */
    .profile-img img,
    .prof-img {
        width: 100%;
        max-width: 140px;
        margin: auto;
        display: block;
    }

    /* Repeat section spacing */
    .repeat-form {
        padding: 10px;
        margin-bottom: 15px;
    }

    /* Radio buttons stacked */
    .pri-radio {
        display: block;
        margin-bottom: 8px;
    }

    /* File inputs readable */
    input[type="file"] {
        font-size: 13px;
    }

    /* Address section spacing */
    .getDetailsFromPincode .row > div {
        margin-bottom: 8px;
    }

    /* Add More button full width */
    .pr-add-btn {
        width: 100%;
        text-align: center;
        margin-top: 10px;
    }

    /* Headings smaller */
    h5 {
        font-size: 16px;
    }
}

/* 📱 Small mobile only */
@media (max-width: 575.98px) {

    /* Reduce image more */
    .profile-img img {
        max-width: 120px;
    }

    /* Inputs spacing */
    .form-group {
        margin-bottom: 12px;
    }
}

/* Disable hover-only UI on touch devices */
/* @media (hover: none) {
    .hover-content {
        display: none !important;
    }
} */



/* =========================
   Reduce table font size for mobile
   ========================= */

@media (max-width: 991.98px) {

    .repeat-form table {
        font-size: 12px;       /* overall table text */
    }

    .repeat-form th {
        font-size: 12px;
        font-weight: 600;
        padding: 6px;
    }

    .repeat-form td {
        font-size: 12px;
        padding: 6px;
        vertical-align: middle;
    }

    /* Inputs inside table */
    .repeat-form td input,
    .repeat-form td select {
        font-size: 12px;
        padding: 4px 6px;
        height: auto;
    }

    /* File input smaller */
    .repeat-form td input[type="file"] {
        font-size: 11px;
    }
}

/* Extra small mobile */
@media (max-width: 575.98px) {

    .repeat-form table {
        font-size: 11px;
    }

    .repeat-form th,
    .repeat-form td {
        padding: 4px;
    }

    .repeat-form td input {
        font-size: 11px;
    }
}



















/* New Css  */
/* Hide step-status sidebar on mobile & tablet */
@media (max-width: 991.98px) {
    .step-status {
        display: none !important;
    }
}


/* ===========================
   PROGRESS BAR - MOBILE COMPACT
   =========================== */

@media (max-width: 991.98px) {

    #progressbar {
        display: flex !important;
        flex-wrap: nowrap !important;
        align-items: center !important;
        justify-content: center !important;
        gap: 0 !important;
        margin-bottom: 20px !important;
        padding: 0 !important;
    }

    #progressbar li {
        flex: 0 0 auto !important;
        font-size: 0 !important;         /* hide all text by default */
        min-width: 0 !important;
        padding-top: 0 !important;
        text-align: center !important;
    }

    /* Show only the number (via :before counter) for all steps */
    #progressbar li:before {
        width: 38px !important;
        height: 38px !important;
        line-height: 36px !important;
        font-size: 16px !important;      /* number stays visible */
        margin: 0 auto !important;
        display: block !important;
    }

    /* Connector line between steps */
    #progressbar li:after {
        top: 19px !important;
        height: 2px !important;
    }

    /* Active step: show label text below the circle */
    #progressbar li.active {
        flex: 1 1 auto !important;
        font-size: 12px !important;      /* show text only for active */
        font-weight: 600 !important;
        padding-top: 6px !important;
        color: var(--color1) !important;
        white-space: nowrap !important;
        text-align: center !important;
    }

    #progressbar li.active:before {
        margin-bottom: 6px !important;
    }
}

@media (max-width: 480px) {
    #progressbar li.active {
        font-size: 11px !important;
    }

    #progressbar li:before {
        width: 32px !important;
        height: 32px !important;
        line-height: 30px !important;
        font-size: 14px !important;
    }

    #progressbar li:after {
        top: 16px !important;
    }
}

@media (max-width: 576px) {

    /* Convert table to block layout properly */
    .pr-table,
    .pr-table tbody,
    .pr-table tr,
    .pr-table th,
    .pr-table td {
        display: block !important;
        width: 100% !important;
        border: none !important;
    }

    /* Remove any card-style borders on tr */
    .pr-table tr {
        margin-bottom: 1rem !important;
        border-bottom: 1px solid #eee !important;
        border-radius: 0 !important;
        background: inherit !important;
        padding-bottom: 0.5rem !important;
    }

    /* Label styles - full width, visible */
    .pr-table th,
    .pr-table th.label {
        font-size: 12px !important;
        font-weight: 600 !important;
        color: #444 !important;
        padding: 10px 8px 4px !important;
        white-space: normal !important;
        word-break: break-word !important;
        line-height: 1.4 !important;
        background: #f8f9fa !important;
        border-radius: 4px 4px 0 0 !important;
    }

    /* Field cell below label */
    .pr-table td {
        padding: 6px 8px 10px !important;
        vertical-align: top !important;
    }

    /* All inputs and selects full width */
    .pr-table td input,
    .pr-table td select,
    .pr-table td textarea,
    .pr-table td .form-control {
        width: 100% !important;
        font-size: 13px !important;
        padding: 7px 10px !important;
        box-sizing: border-box !important;
    }

    /* Fix height+width input groups (like Height: value + Mtr/Ft) */
    .pr-table td .input-group {
        display: flex !important;
        flex-wrap: nowrap !important;
        gap: 6px !important;
        width: 100% !important;
    }

    .pr-table td .input-group input.form-control {
        flex: 1 1 auto !important;
        width: auto !important;
        min-width: 0 !important;
    }

    .pr-table td .input-group select.form-control {
        flex: 0 0 90px !important;
        width: 90px !important;
    }

    .pr-table td .input-group .input-group-text {
        flex: 0 0 auto !important;
        white-space: nowrap !important;
        font-size: 12px !important;
        padding: 6px 8px !important;
    }

    /* d-flex gap-3 rows (Height + Built-up area dual input groups) */
    .pr-table td .d-flex.gap-3 {
        flex-direction: column !important;
        gap: 8px !important;
    }

    /* Radio buttons wrap nicely */
    .pr-table td .pri-radios {
        flex-wrap: wrap !important;
        gap: 10px !important;
        padding: 8px !important;
    }

    /* Remove colon pseudo element */
    .pr-table td:before {
        display: none !important;
        content: none !important;
    }

    /* Hide thead if any */
    .pr-table thead {
        display: none !important;
    }

    /* Photo/signature rows */
    .pr-table tr.applicant-photo-wrapper,
    .pr-table tr.applicant-sign-wrapper {
        display: block !important;
    }

    .pr-table tr.applicant-photo-wrapper th,
    .pr-table tr.applicant-sign-wrapper th,
    .pr-table tr.applicant-photo-wrapper td,
    .pr-table tr.applicant-sign-wrapper td {
        display: block !important;
        width: 100% !important;
        text-align: center !important;
    }

    .pr-table .img-thumbnail {
        max-width: 160px !important;
        height: auto !important;
        margin: 8px auto !important;
        display: block !important;
    }
}

/* ===========================
   DROPDOWN FIX - ALL DEVICES
   =========================== */

.repeat-form,
.repeat-form-container,
.form-section,
.all-sections,
.main-content,
.border.p-2.mx-3.bg-light,
.pr-table,
.pr-table tr,
.pr-table td,
.form-field,
.input-group {
    overflow: visible !important;
}

/* Keep only main scrollable */
main {
    overflow-x: hidden;
    overflow-y: auto;
}

/* Select z-index when open */
.pr-table td select:focus,
.pr-table td select:active,
select.form-control:focus,
select.form-control:active {
    position: relative;
    z-index: 9999 !important;
}

/* ---- ACTION BUTTONS IN TABLE ---- */
td .btn.btn-xs {
    display: inline-flex !important;
    align-items: center !important;
    gap: 4px !important;
    white-space: nowrap !important;
    margin: 2px !important;
}

/* Button cell - wrap buttons neatly */
/* td:last-child,
td[width="200"] {
    white-space: nowrap !important;
    min-width: 200px !important;
    vertical-align: middle !important;
} */

/* On mobile - stack buttons vertically */
@media (max-width: 768px) {
    td[width="200"],
    td:last-child {
        white-space: normal !important;
        min-width: 140px !important;
    }

    td[width="200"] .btn,
    td:last-child .btn {
        display: block !important;
        width: 100% !important;
        margin: 3px 0 !important;
        text-align: center !important;
    }
}


/* ---- SEE MORE BUTTON - RESPONSIVE ---- */
@media (max-width: 991.98px) {
    .text-end.my-3.d-flex.justify-content-end {
        justify-content: center !important;
        margin: 10px 0 !important;
    }

    #seeMoreBtn {
        width: 100% !important;
        text-align: center !important;
        font-size: 13px !important;
        padding: 8px 16px !important;
    }
}

@media (max-width: 576px) {
    #seeMoreBtn {
        font-size: 12px !important;
        padding: 7px 14px !important;
    }
}












































@media (max-width: 768px) {

    /* Hide table header */
    .action-table thead {
        display: none !important;
    }

    /* Each row becomes a card */
    .action-table tbody tr {
        display: block !important;
        margin-bottom: 16px !important;
        border: 1px solid #dee2e6 !important;
        border-radius: 10px !important;
        overflow: hidden !important;
        box-shadow: 0 3px 10px #0002 !important;
        background: #fff !important;
        position: relative !important;
    }

    /* Base cell style */
    .action-table tbody td {
        display: flex !important;
        flex-direction: row !important;
        align-items: flex-start !important;
        padding: 9px 14px !important;
        border: none !important;
        border-bottom: 1px solid #f0f0f0 !important;
        font-size: 13px !important;
        width: 100% !important;
        box-sizing: border-box !important;
        gap: 0 !important;
    }

    .action-table tbody td:last-child {
        border-bottom: none !important;
    }

    /* Base label style via :before */
    .action-table tbody td:before {
        font-weight: 700 !important;
        color: #444 !important;
        font-size: 12px !important;
        min-width: 155px !important;
        width: 155px !important;
        flex-shrink: 0 !important;
        text-transform: uppercase !important;
        letter-spacing: 0.3px !important;
        padding-top: 1px !important;
        display: inline-block !important;
    }

    /* ==============================
       COL 1 - Sl No
       Positioned absolute over header
       ============================== */
    /* .action-table tbody td:nth-child(1) {
        position: absolute !important;
        top: 0 !important;
        left: 0 !important;
        width: auto !important;
        background: transparent !important;
        color: #fff !important;
        font-weight: 700 !important;
        font-size: 15px !important;
        padding: 11px 6px 11px 14px !important;
        border: none !important;
        z-index: 2 !important;
        display: block !important;
    }
    .action-table tbody td:nth-child(1):before {
        display: none !important;
    } */

    /* ==============================
       COL 2 - Service Name
       Full width blue header
       ============================== */
    .action-table tbody td:nth-child(2) {
        background: linear-gradient(270deg, #00adef, #3871c1) !important;
        color: #fff !important;
        font-weight: 700 !important;
        font-size: 14px !important;
        border-radius: 10px 10px 0 0 !important;
        padding: 11px 14px 11px 42px !important;
        min-height: 44px !important;
        align-items: center !important;
        border-bottom: 2px solid #ffffff33 !important;
        display: flex !important;
    }
    .action-table tbody td:nth-child(2):before {
        display: none !important;
    }

    /* ==============================
       COL 3 - Application No
       ============================== */
    .action-table tbody td:nth-child(3) {
        background: #f0f7ff !important;
        font-weight: 600 !important;
        color: #1a3c8f !important;
    }
    .action-table tbody td:nth-child(3):before {
        content: "Application No :" !important;
        color: #1a3c8f !important;
        display: inline-block !important;
    }

    /* ==============================
       COL 4 - Receive Date
       ============================== */
    .action-table tbody td:nth-child(4):before {
        content: "Receive Date :" !important;
        display: inline-block !important;
    }

    /* ==============================
       COL 5 - Authorized Member
       ============================== */
    .action-table tbody td:nth-child(5):before {
        content: "Authorized Member :" !important;
        display: inline-block !important;
    }

    /* ==============================
       COL 6 - Present Status
       ============================== */
    .action-table tbody td:nth-child(6) {
        background: #fffdf0 !important;
    }
    .action-table tbody td:nth-child(6):before {
        content: "Present Status :" !important;
        display: inline-block !important;
    }

    /* ==============================
       COL 7 - Actions
       ============================== */
    .action-table tbody td:nth-child(7) {
        flex-direction: column !important;
        align-items: flex-start !important;
        gap: 6px !important;
        background: #fafafa !important;
        padding: 12px 14px !important;
        border-radius: 0 0 10px 10px !important;
    }
    .action-table tbody td:nth-child(7):before {
        content: "Actions :" !important;
        display: inline-block !important;
        margin-bottom: 6px !important;
        color: #333 !important;
        font-size: 12px !important;
        min-width: auto !important;
        width: auto !important;
    }

    /* Buttons inside action cell */
    .action-table tbody td:nth-child(7) .btn {
        display: flex !important;
        align-items: center !important;
        gap: 6px !important;
        width: 100% !important;
        text-align: left !important;
        margin: 0 !important;
        font-size: 12px !important;
        padding: 7px 12px !important;
        white-space: nowrap !important;
        box-sizing: border-box !important;
    }

    /* Badge inside status cell */
    .action-table tbody td .badge {
        font-size: 11px !important;
        padding: 4px 8px !important;
        white-space: normal !important;
    }

    /* No records row fix */
    .action-table tbody tr:has(td[colspan]) {
        position: static !important;
        overflow: visible !important;
    }
    .action-table tbody td[colspan] {
        position: static !important;
        display: block !important;
        text-align: center !important;
        padding: 20px !important;
        width: 100% !important;
        border-radius: 10px !important;
    }
    .action-table tbody td[colspan]:before {
        display: none !important;
    }
}

/* Very small screens */
@media (max-width: 400px) {

    .action-table tbody td:before {
        min-width: 130px !important;
        width: 130px !important;
        font-size: 11px !important;
    }

    .action-table tbody td {
        font-size: 12px !important;
        padding: 8px 10px !important;
    }

    .action-table tbody td:nth-child(2) {
        font-size: 13px !important;
        padding: 10px 10px 10px 38px !important;
    }

    .action-table tbody td:nth-child(7) .btn {
        font-size: 11px !important;
        padding: 6px 10px !important;
    }
}












/* ============================================================
   COMMON CARD STYLE (USED BY BOTH TABLES)
   ============================================================ */

@media (max-width: 768px) {

    .license-action-table tbody tr,
    .service-action-table tbody tr {
        display: block !important;
        margin-bottom: 16px !important;
        border: 1px solid #dee2e6 !important;
        border-radius: 10px !important;
        overflow: hidden !important;
        box-shadow: 0 3px 10px #0002 !important;
        background: #fff !important;
        position: relative !important;
    }

    /* =========================
       LICENSE TABLE
       ========================= */

    .license-action-table tbody {
        counter-reset: licenseRowCount;
    }

    .license-action-table tbody tr {
        counter-increment: licenseRowCount;
    }

    /* Hide Sl No */
    .license-action-table tbody td:nth-child(1) {
        display: none !important;
    }

    /* Header (Application No) */
    .license-action-table tbody td:nth-child(2) {
        display: flex !important;
        align-items: center !important;
        gap: 8px !important;
        background: linear-gradient(270deg, #00adef, #3871c1) !important;
        color: #fff !important;
        font-weight: 700 !important;
        font-size: 14px !important;
        border-radius: 10px 10px 0 0 !important;
        padding: 11px 14px !important;
        min-height: 44px !important;
        border-bottom: 2px solid #ffffff33 !important;
    }

    .license-action-table tbody td:nth-child(2):before {
        display: none !important;
    }

    /* Applicant Name */
    .license-action-table tbody td:nth-child(3) {
        background: #f0f7ff !important;
        font-weight: 600 !important;
        color: #1a3c8f !important;
        display: flex !important;
        padding: 9px 14px !important;
        border-bottom: 1px solid #f0f0f0 !important;
        font-size: 13px !important;
    }

    .license-action-table tbody td:nth-child(3):before {
        content: "Applicant's Name :" !important;
        font-weight: 700 !important;
        min-width: 155px !important;
        text-transform: uppercase !important;
    }

    /* Base cell style */
    .license-action-table tbody td:nth-child(n+4) {
        display: flex !important;
        padding: 9px 14px !important;
        border-bottom: 1px solid #f0f0f0 !important;
        font-size: 13px !important;
    }

    .license-action-table tbody td:nth-child(n+4):before {
        font-weight: 700 !important;
        min-width: 155px !important;
        text-transform: uppercase !important;
    }

    /* Variant A */
    .license-action-table:not(.license-action-table--no-service) td:nth-child(4):before { content: "Service :" !important; }
    .license-action-table:not(.license-action-table--no-service) td:nth-child(5):before { content: "Authorized Member :" !important; }

    .license-action-table:not(.license-action-table--no-service) td:nth-child(6) {
        background: #fffdf0 !important;
    }
    .license-action-table:not(.license-action-table--no-service) td:nth-child(6):before { content: "Current Status :" !important; }
    .license-action-table:not(.license-action-table--no-service) td:nth-child(7):before { content: "Submitted On :" !important; }

    /* Variant B */
    .license-action-table--no-service td:nth-child(4) {
        background: #fffdf0 !important;
    }
    .license-action-table--no-service td:nth-child(4):before { content: "Current Status :" !important; }
    .license-action-table--no-service td:nth-child(5):before { content: "Submitted On :" !important; }

    /* Actions (shared both variants) */
    .license-action-table td:last-child {
        display: flex !important;
        flex-direction: column !important;
        gap: 6px !important;
        background: #fafafa !important;
        padding: 12px 14px !important;
        border-radius: 0 0 10px 10px !important;
        border-bottom: none !important;
    }

    .license-action-table td:last-child:before {
        content: "Actions" !important;
        margin-bottom: 6px !important;
        font-weight: 700 !important;
    }

    /* =========================
       SERVICE TABLE
       ========================= */

    .service-action-table thead {
        display: none !important;
    }

    .service-action-table tbody td[data-label="Sl#"] {
        display: none !important;
    }

    .service-action-table tbody td {
        display: flex !important;
        padding: 9px 14px !important;
        border-bottom: 1px solid #f0f0f0 !important;
        font-size: 13px !important;
    }

    .service-action-table tbody td:before {
        content: attr(data-label) ": ";
        font-weight: 700 !important;
        min-width: 155px !important;
        text-transform: uppercase !important;
    }

    /* Header */
    .service-action-table td[data-label="Application No"] {
        background: linear-gradient(270deg, #00adef, #3871c1) !important;
        color: #fff !important;
        font-weight: 700 !important;
        border-radius: 10px 10px 0 0 !important;
    }
    .service-action-table td[data-label="Application No"]:before {
        display: none !important;
    }

    /* Highlight rows */
    .service-action-table td[data-label="Applicant Name"] {
        background: #f0f7ff !important;
        font-weight: 600 !important;
        color: #1a3c8f !important;
    }

    .service-action-table td[data-label="Present Status"] {
        background: #fffdf0 !important;
    }

    /* Actions */
    .service-action-table td[data-label="Details"] {
        flex-direction: column !important;
        gap: 6px !important;
        background: #fafafa !important;
        border-bottom: none !important;
    }

    .service-action-table td[data-label="Details"]:before {
        content: "Actions" !important;
        margin-bottom: 6px !important;
    }

    /* =========================
       SHARED BUTTON STYLE
       ========================= */

    .license-action-table .btn,
    .service-action-table .btn {
        display: flex !important;
        align-items: center !important;
        gap: 6px !important;
        width: 100% !important;
        font-size: 12px !important;
        padding: 7px 12px !important;
    }

    /* =========================
       NO RECORD ROW
       ========================= */

    tbody tr:has(td[colspan]) {
        box-shadow: none !important;
    }

    td[colspan] {
        display: block !important;
        text-align: center !important;
        padding: 20px !important;
    }

    td[colspan]:before {
        display: none !important;
    }
}

/* =========================
   SMALL SCREENS
   ========================= */

@media (max-width: 400px) {

    .license-action-table td,
    .service-action-table td {
        font-size: 12px !important;
        padding: 8px 10px !important;
    }

    .service-action-table td:before {
        min-width: 120px !important;
    }

    .btn {
        font-size: 11px !important;
        padding: 6px 10px !important;
    }
}

/* For print button  */
@media (max-width: 768px) {
  [data-print] {
    display: none !important;
  }
}

@media (max-width: 768px) {
  a[onclick*="customPrint"] {
    display: none !important;
  }
}











/* Mobile sidebar - show labels when sidebar is open */
@media (max-width: 768px) {
    .main-sidebar.mobile-show ul li > span > span,
    .main-sidebar.mobile-show i.fa-angle-down {
        display: inline-block !important;
    }
}
















@media (max-width: 768px) {
    .table-like.header {
        display: none;
    }
    .repeat-form.table-like {
        display: block;
        border: 1px solid #ddd;
        border-radius: 8px;
        margin-bottom: 15px;
        padding: 10px;
        background: #fff;
    }
    .repeat-form.table-like .col {
        display: block;
        width: 100%;
        border: none;
        padding: 8px 10px;
        position: relative;
    }
    .repeat-form.table-like .col::before {
        content: attr(data-label);
        display: block;
        font-weight: 600;
        font-size: 12px;
        color: #555;
        margin-bottom: 4px;
        text-transform: uppercase;
    }

    .repeat-form.table-like .sl-col {
        font-weight: bold;
        font-size: 14px;
        background: #007bff;
        color: #fff;
        border-radius: 6px;
        padding: 6px 10px;
        display: inline-block;
        margin-bottom: 8px;
    }
}

























@media (max-width: 768px) {

    .service-action-table tbody td:nth-child(1),
    .service-action-table tbody td:nth-child(2),
    .service-action-table tbody td:nth-child(3),
    .service-action-table tbody td:nth-child(4),
    .service-action-table tbody td:nth-child(5),
    .service-action-table tbody td:nth-child(6),
    .service-action-table tbody td:nth-child(7),
    .service-action-table tbody td:nth-child(8),
    .service-action-table tbody td:nth-child(9),
    .service-action-table tbody td:nth-child(10) {
        position: static !important;
        background: #fff !important;
        color: inherit !important;
        font-weight: normal !important;
        font-size: 13px !important;
        padding: 9px 14px !important;
        border-radius: 0 !important;
        min-height: auto !important;
        align-items: flex-start !important;
        border-bottom: 1px solid #f0f0f0 !important;
        display: flex !important;
        flex-direction: row !important;
        width: 100% !important;
        z-index: auto !important;
    }

    .service-action-table tbody td:nth-child(1):before,
    .service-action-table tbody td:nth-child(2):before,
    .service-action-table tbody td:nth-child(3):before,
    .service-action-table tbody td:nth-child(4):before,
    .service-action-table tbody td:nth-child(5):before,
    .service-action-table tbody td:nth-child(6):before,
    .service-action-table tbody td:nth-child(7):before,
    .service-action-table tbody td:nth-child(8):before,
    .service-action-table tbody td:nth-child(9):before,
    .service-action-table tbody td:nth-child(10):before {
        content: attr(data-label) " :" !important;
        font-weight: 700 !important;
        color: #444 !important;
        font-size: 12px !important;
        min-width: 155px !important;
        width: 155px !important;
        flex-shrink: 0 !important;
        text-transform: uppercase !important;
        letter-spacing: 0.3px !important;
        padding-top: 2px !important;
        display: inline-block !important;
    }

    .service-action-table tbody td[data-label="Sl#"] {
        display: none !important;
    }

    .service-action-table tbody td[data-label="Application No"] {
        background: linear-gradient(270deg, #00adef, #3871c1) !important;
        color: #fff !important;
        font-weight: 700 !important;
        font-size: 14px !important;
        border-radius: 10px 10px 0 0 !important;
        padding: 12px 14px !important;
        min-height: 46px !important;
        align-items: center !important;
        border-bottom: 2px solid rgba(255,255,255,0.2) !important;
    }
    .service-action-table tbody td[data-label="Application No"]:before {
        display: none !important;
    }

    .service-action-table tbody td[data-label="Applicant Name"] {
        background: #f0f7ff !important;
        font-weight: 600 !important;
        color: #1a3c8f !important;
    }
    .service-action-table tbody td[data-label="Applicant Name"]:before {
        color: #1a3c8f !important;
    }

    .service-action-table tbody td[data-label="Present Status"] {
        background: #fffdf0 !important;
    }

    .service-action-table tbody td[data-label="Details"] {
        flex-direction: column !important;
        align-items: flex-start !important;
        gap: 6px !important;
        background: #f8f9fa !important;
        padding: 12px 14px !important;
        border-radius: 0 0 10px 10px !important;
        border-bottom: none !important;
    }
    .service-action-table tbody td[data-label="Details"]:before {
        content: "Actions :" !important;
        min-width: auto !important;
        width: auto !important;
        margin-bottom: 6px !important;
        color: #333 !important;
    }
    .service-action-table tbody td[data-label="Details"] a.btn,
    .service-action-table tbody td[data-label="Details"] button.btn {
        display: flex !important;
        align-items: center !important;
        gap: 5px !important;
        width: 100% !important;
        text-align: left !important;
        margin: 0 !important;
        font-size: 12px !important;
        padding: 7px 12px !important;
    }

    .service-action-table tbody td:last-child {
        border-bottom: none !important;
    }
}















@media (max-width: 768px) {

    
    .action-table tbody td[data-th="Sl No"] {
        position: absolute !important;
        top: 0 !important;
        left: 0 !important;
        width: auto !important;
        background: transparent !important;
        color: #fff !important;
        font-weight: 700 !important;
        font-size: 15px !important;
        padding: 12px 6px 12px 14px !important;
        border: none !important;
        z-index: 2 !important;
        display: block !important;
    }
    .action-table tbody td[data-th="Sl No"]:before {
        display: none !important;
    }

    .action-table tbody td[data-th="Application No"] {
        background: linear-gradient(270deg, #00adef, #3871c1) !important;
        color: #fff !important;
        font-weight: 700 !important;
        font-size: 14px !important;
        border-radius: 10px 10px 0 0 !important;
        padding: 12px 14px 12px 44px !important;
        min-height: 46px !important;
        align-items: center !important;
        border-bottom: 2px solid rgba(255,255,255,0.2) !important;
    }
    .action-table tbody td[data-th="Application No"]:before {
        display: none !important;
    }

    .action-table tbody td[data-th="Applicant Name"] {
        background: #f0f7ff !important;
        font-weight: 600 !important;
        color: #1a3c8f !important;
    }
    .action-table tbody td[data-th="Applicant Name"]:before {
        content: "Applicant Name :" !important;
        color: #1a3c8f !important;
    }

    .action-table tbody td[data-th="Building Name"]:before {
        content: "Building Name :" !important;
    }
    .action-table tbody td[data-th="Service"]:before {
        content: "Service :" !important;
    }
    .action-table tbody td[data-th="Authorized Member"]:before {
        content: "Authorized Member :" !important;
    }
    .action-table tbody td[data-th="Present Status"] {
        background: #fffdf0 !important;
    }
    .action-table tbody td[data-th="Present Status"]:before {
        content: "Present Status :" !important;
    }
    .action-table tbody td[data-th="Current Status"] {
        background: #fffdf0 !important;
    }
    .action-table tbody td[data-th="Current Status"]:before {
        content: "Current Status :" !important;
    }
    .action-table tbody td[data-th="Submitted On"]:before {
        content: "Submitted On :" !important;
    }
    .action-table tbody td[data-th="Accepted On"]:before {
        content: "Accepted On :" !important;
    }
    .action-table tbody td[data-th="Receive Date"]:before {
        content: "Receive Date :" !important;
    }




    /* Designation Table */
    .action-table tbody td[data-th="Designation Name"]:before {
        content: "Designation Name :" !important;
    }
    .action-table tbody td[data-th="User Type Name"]:before {
        content: "User Type Name :" !important;
    }

    /* Menu Table */
    .action-table tbody td[data-th="Menu Name"]:before {
        content: "Menu Name :" !important;
    }
    .action-table tbody td[data-th="Menu Url From"]:before {
        content: "Menu Url From :" !important;
    }
    .action-table tbody td[data-th="Parent Menu"]:before {
        content: "Parent Menu :" !important;
    }
    .action-table tbody td[data-th="Sequence Order"]:before {
        content: "Sequence Order :" !important;
    }

    .action-table tbody td[data-th="User Type Name"]:before {
        content: "User Type Name :" !important;
    }
    .action-table tbody td[data-th="Designation"]:before {
        content: "Designation :" !important;
    }
    .action-table tbody td[data-th="Covering Area Name"]:before {
        content: "Covering Area Name :" !important;
    }
    .action-table tbody td[data-th="Area Code"]:before {
        content: "Area Code :" !important;
    }
    .action-table tbody td[data-th="Area Type"]:before {
        content: "Area Type :" !important;
    }
    .action-table tbody td[data-th="Created On"]:before {
        content: "Created On :" !important;
    }
    .action-table tbody td[data-th="Status"]:before {
        content: "Status :" !important;
    }


    .action-table tbody td[data-th="Name"]:before {
        content: "Name :" !important;
    }
    .action-table tbody td[data-th="Username"]:before {
        content: "Username :" !important;
    }
    .action-table tbody td[data-th="Usertype"]:before {
        content: "Usertype :" !important;
    }
    .action-table tbody td[data-th="Designation"]:before {
        content: "Designation :" !important;
    }
    .action-table tbody td[data-th="Mobile No"]:before {
        content: "Mobile No :" !important;
    }
    .action-table tbody td[data-th="Email ID"]:before {
        content: "Email ID :" !important;
    }
    .action-table tbody td[data-th="Phone No"]:before {
        content: "Phone No :" !important;
    }


    .action-table tbody td[data-th="Building Detail Type"]:before {
        content: "Building Detail Type :" !important;
    }
    .action-table tbody td[data-th="Building Type"]:before {
        content: "Building Type :" !important;
    }
    .action-table tbody td[data-th="Building Category"]:before {
        content: "Building Category :" !important;
    }
    .action-table tbody td[data-th="Building Category Name"]:before {
        content: "Building Category Name :" !important;
    }
    .action-table tbody td[data-th="Year of validity"]:before {
        content: "Year of validity :" !important;
    }
    .action-table tbody td[data-th="Category Price"]:before {
        content: "Category Price :" !important;
    }
    .action-table tbody td[data-th="Form"]:before {
        content: "Form :" !important;
    }
    .action-table tbody td[data-th="Created"]:before {
        content: "Created :" !important;
    }
    .action-table tbody td[data-th="Modified"]:before {
        content: "Modified :" !important;
    }
    .action-table tbody td[data-th="Title"]:before {
        content: "Title :" !important;
    }
    .action-table tbody td[data-th="Messages"]:before {
        content: "Messages :" !important;
    }

    .action-table tbody td[data-th="Feature Img"]:before {
        content: "Feature Img :" !important;
    }
    .action-table tbody td[data-th="Slider img"]:before {
        content: "Slider img :" !important;
    }
    .action-table tbody td[data-th="Page Inner Banner"]:before {
        content: "Page Inner Banner :" !important;
    }
    .action-table tbody td[data-th="Is Detail Page"]:before {
        content: "Is Detail Page :" !important;
    }
    .action-table tbody td[data-th="Important Notice"]:before {
        content: "Important Notice :" !important;
    }

    .action-table tbody td[data-th="Service Name"]:before {
        content: "Service Name :" !important;
    }
    .action-table tbody td[data-th="Is Query"]:before {
        content: "Is Query :" !important;
    }
    .action-table tbody td[data-th="Slug"]:before {
        content: "Slug :" !important;
    }
    .action-table tbody td[data-th="Show in Service Wise"]:before {
        content: "Show in Service Wise :" !important;
    }
    .action-table tbody td[data-th="FAQ Title"]:before {
        content: "FAQ Title :" !important;
    }
    .action-table tbody td[data-th="FAQ Answer"]:before {
        content: "FAQ Answer :" !important;
    }
    .action-table tbody td[data-th="FAQ File"]:before {
        content: "FAQ File :" !important;
    }
    .action-table tbody td[data-th="Short Description"]:before {
        content: "Short Description :" !important;
    }
    .action-table tbody td[data-th="Description"]:before {
        content: "Description :" !important;
    }
    .action-table tbody td[data-th="Upload Doc"]:before {
        content: "Upload Doc :" !important;
    }
    .action-table tbody td[data-th="Show in"]:before {
        content: "Show in :" !important;
    }
    .action-table tbody td[data-th="Category Name"]:before {
        content: "Category Name :" !important;
    }
    .action-table tbody td[data-th="Template Name"]:before {
        content: "Template Name :" !important;
    }
    .action-table tbody td[data-th="Subject"]:before {
        content: "Subject :" !important;
    }
    .action-table tbody td[data-th="Guideline Name"]:before {
        content: "Guideline Name :" !important;
    }
    .action-table tbody td[data-th="Guideline Doc"]:before {
        content: "Guideline Doc :" !important;
    }
    .action-table tbody td[data-th="Holiday Title"]:before {
        content: "Holiday Title :" !important;
    }
    .action-table tbody td[data-th="Holiday Date"]:before {
        content: "Holiday Date :" !important;
    }
    .action-table tbody td[data-th="Compliance Name"]:before {
        content: "Compliance Name :" !important;
    }
    .action-table tbody td[data-th="Service Name"]:before {
        content: "Service Name :" !important;
    }
    .action-table tbody td[data-th="Remark"]:before {
        content: "Remark :" !important;
    }
    .action-table tbody td[data-th="Flow Type"]:before {
        content: "Flow Type :" !important;
    }
    .action-table tbody td[data-th="Stage Title"]:before {
        content: "Stage Title :" !important;
    }
    .action-table tbody td[data-th="Stage For"]:before {
        content: "Stage For :" !important;
    }
    .action-table tbody td[data-th="Service Type Detail"]:before {
        content: "Service Type :" !important;
    }
    .action-table tbody td[data-th="Min Area Square Mtr"]:before {
        content: "Min Area Square Mtr :" !important;
    }
    .action-table tbody td[data-th="Max Area Square Mtr"]:before {
        content: "Max Area Square Mtr :" !important;
    }
    .action-table tbody td[data-th="Min People"]:before {
        content: "Min People :" !important;
    }
    .action-table tbody td[data-th="Max People"]:before {
        content: "Max People :" !important;
    }
    .action-table tbody td[data-th="Condition operator"]:before {
        content: "Condition operator :" !important;
    }
    .action-table tbody td[data-th="Reference Title"]:before {
        content: "Reference Title :" !important;
    }
    .action-table tbody td[data-th="Template Subject"]:before {
        content: "Template Subject :" !important;
    }
    .action-table tbody td[data-th="Template Body"]:before {
        content: "Template Body :" !important;
    }
    .action-table tbody td[data-th="Site Title"]:before {
        content: "Site Title :" !important;
    }
    .action-table tbody td[data-th="Address"]:before {
        content: "Address :" !important;
    }
    .action-table tbody td[data-th="Meta Title"]:before {
        content: "Meta Title :" !important;
    }
    .action-table tbody td[data-th="Meta Keyword"]:before {
        content: "Meta Keyword :" !important;
    }
    .action-table tbody td[data-th="Meta Description"]:before {
        content: "Meta Description :" !important;
    }
    .action-table tbody td[data-th="Site URL"]:before {
        content: "Site URL :" !important;
    }
    .action-table tbody td[data-th="Map Iframe Link"]:before {
        content: "Map Iframe Link :" !important;
    }
    .action-table tbody td[data-th="Site Logo"]:before {
        content: "Site Logo :" !important;
    }
    .action-table tbody td[data-th="Site Dark Logo"]:before {
        content: "Site Dark Logo :" !important;
    }
    .action-table tbody td[data-th="Concerned Authorized Member"]:before {
        content: "Concerned Authorized Member :" !important;
    }


















    .action-table tbody td[data-th="Actions"] {
        flex-direction: column !important;
        align-items: flex-start !important;
        gap: 6px !important;
        background: #f8f9fa !important;
        padding: 12px 14px !important;
        border-radius: 0 0 10px 10px !important;
        border-bottom: none !important;
    }
    .action-table tbody td[data-th="Actions"]:before {
        content: "Actions :" !important;
        min-width: auto !important;
        width: auto !important;
        margin-bottom: 6px !important;
        color: #333 !important;
        font-size: 12px !important;
    }
    .action-table tbody td[data-th="Actions"] a.btn,
    .action-table tbody td[data-th="Actions"] button.btn {
        display: flex !important;
        align-items: center !important;
        gap: 6px !important;
        width: 100% !important;
        text-align: left !important;
        margin: 0 !important;
        font-size: 12px !important;
        padding: 8px 12px !important;
        box-sizing: border-box !important;
        white-space: normal !important;
        border-radius: 4px !important;
    }

    .action-table tbody td .pr-modal {
        display: none !important;
    }
    .action-table tbody td .pr-modal.popin {
        display: flex !important;
    }

    .action-table tbody tr:has(td[colspan]) {
        position: static !important;
        box-shadow: none !important;
    }
    .action-table tbody td[colspan] {
        position: static !important;
        display: block !important;
        text-align: center !important;
        padding: 20px !important;
        width: 100% !important;
        border-radius: 10px !important;
        background: #fff !important;
    }
    .action-table tbody td[colspan]:before {
        display: none !important;
    }

    .action-table tbody td:last-child {
        border-bottom: none !important;
    }
}




/* Make delete form behave like inline element in mobile */
@media (max-width: 768px) {
    .action-table tbody td[data-th="Actions"] form {
        display: contents !important;
    }
    
    .action-table tbody td[data-th="Actions"] form button.btn {
        display: flex !important;
        align-items: center !important;
        gap: 6px !important;
        width: 100% !important;
        text-align: left !important;
        margin: 0 !important;
        font-size: 12px !important;
        padding: 8px 12px !important;
        box-sizing: border-box !important;
        white-space: normal !important;
        border-radius: 4px !important;
    }
}









@media (max-width: 400px) {
    .action-table tbody td:nth-child(1):before,
    .action-table tbody td:nth-child(2):before,
    .action-table tbody td:nth-child(3):before,
    .action-table tbody td:nth-child(4):before,
    .action-table tbody td:nth-child(5):before,
    .action-table tbody td:nth-child(6):before,
    .action-table tbody td:nth-child(7):before,
    .action-table tbody td:nth-child(8):before,
    .action-table tbody td:nth-child(9):before,
    .action-table tbody td:nth-child(10):before {
        min-width: 120px !important;
        width: 120px !important;
        font-size: 11px !important;
    }
    .action-table tbody td {
        font-size: 12px !important;
        padding: 8px 10px !important;
    }
}







.p-3 .d-flex {
    flex-direction: column !important;
    gap: 1.5rem;
}

.p-3 .d-flex .flex-1 {
    width: 100% !important;
    padding-right: 0 !important;
}

@media (min-width: 768px) {
    .p-3 .d-flex {
        flex-direction: row !important;
    }
    
    .p-3 .d-flex .flex-1 {
        padding-right: 1rem !important; 
    }
}












@media (max-width: 768px) {

    .main-sidebar {
        position: fixed;
        top: 77px !important;   
        left: -260px !important; 
        width: 250px !important;
        height: calc(100% - 77px) !important; 
        bottom: 0 !important;
        z-index: 9999 !important;
        transition: left 0.3s ease !important;
    }

    .main-sidebar.mobile-show {
        left: 0 !important;
    }

    .collapsed-sidebar .main-sidebar {
        left: -260px !important;
        width: 250px !important;
        padding-left: 15px !important;
    }

    .collapsed-sidebar .main-sidebar.mobile-show {
        left: 0 !important;
    }

    .collapsed-sidebar .main-sidebar:hover {
        background: #fff !important;
        backdrop-filter: none !important;
    }

    main {
        margin-left: 0 !important;
    }
}







@media (max-width: 767px) {

    .main-content.webmail {
        flex-direction: column !important;
    }

    .main-content.webmail .sidebar {
        width: 100% !important;
        flex-direction: row !important;
        flex-wrap: wrap !important;
        align-items: center !important;
        border-right: none !important;
        border-bottom: 1px solid #dee2e6 !important;
        padding: 10px !important;
        gap: 8px !important;
    }

    .main-content.webmail .sidebar ul.btns {
        display: flex !important;
        flex-direction: row !important;
        margin: 0 !important;
        padding: 0 !important;
        gap: 6px !important;
    }

    .main-content.webmail .sidebar ul.btns li {
        border-radius: 20px !important;
        padding: 5px 14px !important;
        font-size: 13px !important;
        margin-top: 10px;
        background-color: #ddd;
        width: 100% !important;
    }

    .main-content.webmail .sidebar .compose-btn {
        font-size: 16px !important;
        padding-right: 15px !important;
    }

    .main-content.webmail .mail-content {
        width: 100% !important;
        height: auto !important;
        margin: 0 !important;
        border-left: none !important;
        border-top: 2px solid #ffe6d3 !important;
    }

    .main-content.webmail .card-header .d-flex.align-items-center.justify-content-around {
        flex-direction: column !important;
        align-items: stretch !important;
        gap: 10px !important;
    }

    .main-content.webmail .card-header .d-flex.align-items-center.justify-content-around > div {
        width: 100% !important;
        flex: 1 1 100% !important;
    }

    .main-content.webmail .card-header .d-flex.align-items-center.gap-3 {
        flex-wrap: nowrap !important;
    }

    .main-content.webmail .card-header select,
    .main-content.webmail .card-header input[type="date"] {
        width: 100% !important;
        min-width: 0 !important;
        flex: 1 !important;
    }

    .main-content.webmail .card-header .d-flex > div:last-child {
        display: flex !important;
        flex-direction: row !important;
        gap: 8px !important;
        justify-content: flex-end !important;
    }

    .main-content.webmail #to_user_id {
        width: 100% !important;
    }

    .main-content.webmail .flex-wrap-2 {
        flex-direction: column !important;
        padding: 1rem !important;
        gap: 1rem !important;
    }

    .main-content.webmail .flex-wrap-2 > * {
        flex: 0 0 100% !important;
    }

    .main-content.webmail form,
    .main-content.webmail #compose {
        width: 100% !important;
        max-width: 100% !important;
        overflow: hidden !important;
        box-sizing: border-box !important;
    }

    .main-content.webmail #compose input,
    .main-content.webmail #compose textarea,
    .main-content.webmail #compose select {
        width: 100% !important;
        max-width: 100% !important;
        box-sizing: border-box !important;
        min-width: 0 !important;
    }

    .main-content.webmail .multiselect-dropdown,
    .main-content.webmail .mSelect {
        width: 100% !important;
        max-width: 100% !important;
        box-sizing: border-box !important;
        min-width: 0 !important;
    }

    .main-content.webmail .table-responsive thead {
        display: none !important;
    }

    .main-content.webmail .table-responsive {
        overflow-x: visible !important;
        overflow: visible !important;
    }

    .main-content.webmail .table-responsive table,
    .main-content.webmail .table-responsive tbody,
    .main-content.webmail .table-responsive tr,
    .main-content.webmail .table-responsive td {
        display: block !important;
        width: 100% !important;
        min-width: unset !important;
    }

    .main-content.webmail .table-responsive table {
        min-width: unset !important;
    }

    .main-content.webmail .table-responsive tbody tr {
        margin: 10px !important;
        border: 1px solid #dee2e6 !important;
        border-radius: 10px !important;
        overflow: hidden !important;
        box-shadow: 0 3px 10px #0002 !important;
        background: #fff !important;
        display: flex !important;
        flex-direction: column !important;
    }

    .main-content.webmail .table-responsive tbody td {
        display: flex !important;
        flex-direction: row !important;
        align-items: flex-start !important;
        padding: 9px 14px !important;
        border: none !important;
        border-bottom: 1px solid #f0f0f0 !important;
        font-size: 13px !important;
        box-sizing: border-box !important;
        width: 100% !important;
        gap: 0 !important;
        order: 3 !important;
    }

    .main-content.webmail .table-responsive tbody td:last-child {
        border-bottom: none !important;
    }

    .main-content.webmail .table-responsive tbody td:before {
        font-weight: 700 !important;
        color: #444 !important;
        font-size: 12px !important;
        min-width: 110px !important;
        width: 110px !important;
        flex-shrink: 0 !important;
        text-transform: uppercase !important;
        letter-spacing: 0.3px !important;
        padding-top: 1px !important;
        display: inline-block !important;
    }

    #inbox .table-responsive tbody td:nth-child(2) {
        order: 1 !important;
        background: linear-gradient(270deg, #00adef, #3871c1) !important;
        color: #fff !important;
        font-weight: 700 !important;
        font-size: 13px !important;
        border-radius: 10px 10px 0 0 !important;
        padding: 11px 14px !important;
        border-bottom: 2px solid #ffffff33 !important;
        align-items: center !important;
    }
    #inbox .table-responsive tbody td:nth-child(2):before {
        content: "From : " !important;
        color: #ffffffcc !important;
        min-width: 60px !important;
        width: 60px !important;
    }

    #inbox .table-responsive tbody td:nth-child(1) {
        order: 2 !important;
        background: #f0f7ff !important;
    }
    #inbox .table-responsive tbody td:nth-child(1):before {
        content: "Date :" !important;
    }

    #inbox .table-responsive tbody td:nth-child(3) {
        order: 3 !important;
        word-break: break-word !important;
        white-space: normal !important;
        flex-wrap: wrap !important;
        align-items: flex-start !important;
    }
    #inbox .table-responsive tbody td:nth-child(3):before {
        content: "Message :" !important;
    }

    #inbox .table-responsive tbody td:nth-child(4) {
        order: 4 !important;
        background: #f8f9fa !important;
        border-radius: 0 0 10px 10px !important;
        flex-wrap: wrap !important;
        gap: 8px !important;
        border-bottom: none !important;
    }
    #inbox .table-responsive tbody td:nth-child(4):before {
        content: "Attachment :" !important;
        width: 100% !important;
        min-width: 100% !important;
        margin-bottom: 4px !important;
    }

    #outbox .table-responsive tbody td:nth-child(2) {
        order: 1 !important;
        background: linear-gradient(270deg, #00adef, #3871c1) !important;
        color: #fff !important;
        font-weight: 700 !important;
        font-size: 13px !important;
        border-radius: 10px 10px 0 0 !important;
        padding: 11px 14px !important;
        border-bottom: 2px solid #ffffff33 !important;
    }
    #outbox .table-responsive tbody td:nth-child(2):before {
        content: "Sent To : " !important;
        color: #ffffffcc !important;
        min-width: 60px !important;
        width: 60px !important;
    }

    #outbox .table-responsive tbody td:nth-child(1) {
        order: 2 !important;
        background: #f0f7ff !important;
    }
    #outbox .table-responsive tbody td:nth-child(1):before {
        content: "Date :" !important;
    }

    #outbox .table-responsive tbody td:nth-child(3) {
        order: 3 !important;
        word-break: break-word !important;
        white-space: normal !important;
        flex-wrap: wrap !important;
        align-items: flex-start !important;
    }
    #outbox .table-responsive tbody td:nth-child(3):before {
        content: "Message :" !important;
    }

    #outbox .table-responsive tbody td:nth-child(4) {
        order: 4 !important;
        background: #f8f9fa !important;
        border-radius: 0 0 10px 10px !important;
        flex-wrap: wrap !important;
        gap: 8px !important;
        border-bottom: none !important;
    }
    #outbox .table-responsive tbody td:nth-child(4):before {
        content: "Attachment :" !important;
        width: 100% !important;
        min-width: 100% !important;
        margin-bottom: 4px !important;
    }

    .main-content.webmail .table-responsive tbody tr:has(td[colspan]) {
        box-shadow: none !important;
        border: 1px solid #eee !important;
        flex-direction: row !important;
    }
    .main-content.webmail .table-responsive tbody td[colspan] {
        border-radius: 10px !important;
        text-align: center !important;
        justify-content: center !important;
        order: 1 !important;
    }
    .main-content.webmail .table-responsive tbody td[colspan]:before {
        display: none !important;
    }

    .main-content.webmail .table-responsive tbody td .thumb-60 {
        width: 50px !important;
        height: 50px !important;
    }
}

@media (min-width: 768px) and (max-width: 991px) {

    .main-content.webmail .sidebar {
        width: 150px !important;
        padding: 10px !important;
    }

    .main-content.webmail .mail-content {
        width: calc(100% - 170px) !important;
    }

    .main-content.webmail .card-header .d-flex.align-items-center.justify-content-around {
        flex-wrap: wrap !important;
        justify-content: flex-start !important;
        gap: 10px !important;
    }

    .main-content.webmail .card-header .d-flex.align-items-center.justify-content-around > div {
        flex: 1 1 160px !important;
        min-width: 140px !important;
    }

    .main-content.webmail .table-responsive {
        overflow-x: auto !important;
        -webkit-overflow-scrolling: touch !important;
    }

    .main-content.webmail .table-responsive table {
        min-width: 500px !important;
    }
}



@media (max-width: 768px) {

    #classTable { border: none !important; }
    #classTable thead { display: none !important; }

    #classTable tbody tr:has(td[rowspan]) {
        display: flex !important;
        flex-direction: column !important;
        margin-bottom: 0 !important;
        border: 1px solid #dee2e6 !important;
        border-bottom: none !important;
        border-radius: 10px 10px 0 0 !important;
        overflow: hidden !important;
        box-shadow: none !important;
        background: #fff !important;
        margin-top: 16px !important;
    }

    #classTable tbody tr:not(:has(td[rowspan])) {
        display: flex !important;
        flex-direction: column !important;
        margin-bottom: 0 !important;
        border: 1px solid #dee2e6 !important;
        border-top: none !important;
        border-radius: 0 0 10px 10px !important;
        overflow: hidden !important;
        background: #fff !important;
        box-shadow: 0 3px 10px #0002 !important;
    }

    #classTable tbody td {
        display: flex !important;
        flex-direction: row !important;
        align-items: flex-start !important;
        padding: 9px 14px !important;
        border: none !important;
        border-bottom: 1px solid #f0f0f0 !important;
        font-size: 13px !important;
        width: 100% !important;
        box-sizing: border-box !important;
        gap: 0 !important;
    }

    #classTable tbody td:last-child { border-bottom: none !important; }

    #classTable tbody td:before {
        font-weight: 700 !important;
        color: #444 !important;
        font-size: 12px !important;
        min-width: 140px !important;
        width: 140px !important;
        flex-shrink: 0 !important;
        text-transform: uppercase !important;
        letter-spacing: 0.3px !important;
        padding-top: 2px !important;
        display: inline-block !important;
    }

  

    #classTable tbody tr:has(td[rowspan]) td:nth-child(1) {
        display: none !important;
    }

    #classTable tbody tr:has(td[rowspan]) td:nth-child(2) {
        background: linear-gradient(270deg, #00adef, #3871c1) !important;
        color: #fff !important;
        font-weight: 700 !important;
        font-size: 13px !important;
        border-radius: 10px 10px 0 0 !important;
        padding: 11px 14px !important;
        border-bottom: 2px solid #ffffff33 !important;
        align-items: center !important;
        word-break: break-word !important;
        white-space: normal !important;
    }
    #classTable tbody tr:has(td[rowspan]) td:nth-child(2):before {
        content: "Level : " !important;
        color: #ffffffcc !important;
        min-width: 50px !important;
        width: 50px !important;
    }

    #classTable tbody tr:has(td[rowspan]) td:nth-child(3) {
        background: #f0f7ff !important;
        font-weight: 600 !important;
        align-items: center !important;
    }
    #classTable tbody tr:has(td[rowspan]) td:nth-child(3):before {
        content: "Status :" !important;
    }

   
    #classTable tbody tr:not(:has(td[rowspan])) td:nth-child(1) {
        background: #f8f9fa !important;
        word-break: break-word !important;
        white-space: normal !important;
        flex-wrap: wrap !important;
        align-items: flex-start !important;
    }
    /* #classTable tbody tr:not(:has(td[rowspan])) td:nth-child(1):before {
        content: "Query Details :" !important;
    }

    #classTable tbody tr:not(:has(td[rowspan])) td:nth-child(2):before {
        content: "Sent On :" !important;
    } */




    #classTable tbody tr:not(:has(td[rowspan])) td:nth-child(1):before {
        content: "Details of Raised Query/Reminder :" !important;
    }

    #classTable tbody tr:not(:has(td[rowspan])) td:nth-child(2):before {
        content: "Query/Reminder Sent On :" !important;
    }

    #classTable tbody tr:not(:has(td[rowspan])) td:nth-child(3):before {
        content: "Applicant Complied On :" !important;
    }


    #classTable tbody tr:not(:has(td[rowspan])) td:before {
        min-width: 200px !important;
        width: 200px !important;
    }

    #classTable tbody tr:not(:has(td[rowspan])) td:nth-child(3) {
        background: #f8f9fa !important;
        border-radius: 0 0 10px 10px !important;
        border-bottom: none !important;
    }
    /* #classTable tbody tr:not(:has(td[rowspan])) td:nth-child(3):before {
        content: "Complied On :" !important;
    } */

    #classTable tbody tr:not(:has(td[rowspan])):has(td:empty),
    #classTable tbody tr:not(:has(td[rowspan])):has(td:blank) {
        display: none !important;
    }

    .ico-text .prof-drop{display: none; top: -160px;}
    .ico-text:hover .prof-drop{display: block;}
} 


@media (max-width: 767px) {

    .d-flex.justify-content-between.mt-2.align-items-center.px-3 {
        flex-direction: column !important;
        align-items: stretch !important;
        gap: 10px !important;
        padding-left: 10px !important;
        padding-right: 10px !important;
    }

    .d-flex.justify-content-between.mt-2.align-items-center.px-3 #limitForm {
        width: 100% !important;
        margin-bottom: 0 !important;
    }

    .d-flex.justify-content-between.mt-2.align-items-center.px-3 #limitForm .form-select {
        width: 100% !important;
    }

    .d-flex.justify-content-between.mt-2.align-items-center.px-3 .pagination {
        flex-wrap: wrap !important;
        justify-content: center !important;
        gap: 4px !important;
        padding: 0 !important;
        margin: 0 !important;
    }

    .d-flex.justify-content-between.mt-2.align-items-center.px-3 .page-item .page-link {
        padding: 5px 9px !important;
        font-size: 12px !important;
    }

    .d-flex.justify-content-between.mt-2.align-items-center.px-3 .col-lg-12 {
        padding: 0 !important;
        margin-top: 0 !important;
    }
}