.trm-chn-l-cnt{
    width: 40%;
    /* min-width: 400px; */
    max-width: 500px;
     /* width: clamp(250px, 40%, 700px); */
}
.trm-chn-r-cnt{
    width: 60%;
}
.trm-chn-body-cnt{
    background: linear-gradient(
        120deg,
        #C8A12A 0%,
        #8A7A3E 30%,
        #3E4C54 55%,
        #173657 75%,
        #0D2D52 100%
    );
}

.remov-bgr-col{
    background-color: transparent!important;
}
.trm-chn-col1{
     color: #204874!important;
}
.trm-chn-col2{
     color: #3A2D08!important;
}
.trm-chn-col3{
     color: #E4DCC3!important;
}
.trm-chn-col4{
     color: #C8A12A!important;
}
.trm-chn-bod-pad-top{
    padding: 50px 125px;
}
.trm-chn-fnt-xl{
    font-size: 2.85em;
}
.trm-chn-fnt-l{
    font-size: 1.85em;
}
.trm-chn-bgr-w{
    background-color: #E4DCC3!important;
}
.trm-chn-bgr-b{
    background-color: #0D2D52!important;
}
.trm-dash-width-chn{
    width: 100%!important;
}
/* cohte */
.cote-app-font-1 {
    font-size: 1em;
}

.cote-app-font-09 {
    font-size: 0.9em;
}

.cote-app-font-085 {
    font-size: 0.85em!important;
}

.cote-app-font-08 {
    font-size: 0.8em !important;
}

.cote-app-font-075 {
    font-size: 0.75em;
}

.cote-app-font-07 {
    font-size: 0.7em;
}

.cote-app-font-06 {
    font-size: 0.6em;
}


.trm-edumax-scrrn-top2-cnt,.trm-edumax-scrrn-top1-cnt {
    height: 55px !important;
}

.trm-edumax-scrrn-footer-cnt {
    height: 50px !important;
}

.fyc-mobile-chat {
    display: none;
}

.trm-edumax-scrrn-body-cnt {
    height: calc( 100% - 55px - 50px );
    box-sizing: border-box;
}

.trm-edumax-box-shadow,
.trm-edumax-scrrn-top2-cnt {
    box-shadow: 0 3px 6px rgba(0, 0, 0, 0.16), 0 3px 6px rgba(0, 0, 0, 0.23);
}

.trm-edumax-bdy-l,
.trm-t1-cnt {
    width: 22%;
}

.trm-edumax-bdy-c {
    width: 48%;
}

.trm-edumax-bdy-r {
    width: 30%;
}

.trm-t1,
.trm-t2 {
    line-height: normal;
}

.cot-catnm-bgr-col {
    background-color: rgba(0, 128, 0, 0.221);
}

.cot-catnm-bgr-col-pending {
    background-color: rgba(124, 128, 0, 0.221);
}

.cot-book-cover-cnt,
.cot-book-cover-cnt-iner {
    width: 142px;
    height: 270px;
    flex: 0 0 142px;
    /* don't grow, don't shrink, stay at 200px */
    box-sizing: border-box;
}
.trm-previw-zom-cnt{
    width: 38px;
    height: 38px;
    border-radius: 50%;
}
.trm-previw-zom-cnt:hover{
    background-color: #444!important;
    color: #fff!important;
    transition: all 0.4s ease-in-out;
}
.trm-hidden {
    display: none;
}
.trm-disabled-div {
    pointer-events: none;
    opacity: 0.5;
    cursor: not-allowed;
}
/* clearnce */
.daf-logn-bg-col,
.daf-centerbox-cnt-,
.trm-edumax-scrrn-top2-cnt,
.trm-edumax-scrrn-footer-cnt {
    background-color: #444 !important;
}
/* i want to align the button buttons to right */
.trm-justify-content-end {
    justify-content: flex-end;
}
.trm-previw-zom-cnt{
    width: 38px;
    height: 38px;
    border-radius: 50%;
}
.trm-previw-zom-cnt:hover{
    background-color: #444!important;
    color: #fff!important;
    transition: all 0.4s ease-in-out;
}
.toolbar-center {
    display: flex;
    align-items: right;
    gap: 10px;
}

.close-btn {
    position: absolute;
    right: 5px;
}
textarea::placeholder {
color: rgba(255,255,255,0.7)!important;
}
/* hold online update */
.fyc-dash-icon{
    width: 20px;
    height: 20px;
    border-radius: 50%;
    padding: 10px;
}
/* .trs-upload-icon {
    width: 35px;
    height: auto;
    border-radius: 9px;
    flex-shrink: 0;
    padding: 5px;
    background: rgba(255, 255, 255, 0.06);
} */
 .fyc-bar{
    width: 200px;
    height: 6px;
    border-radius: 6px;
    /* background: rgba(255, 255, 255, .12); */
    overflow: hidden;
    background: linear-gradient(90deg, #22d3ee, #8b5cf6);
}
.fyc-approval-footer {
    box-sizing: border-box;
    min-width: 0;
}

.fyc-approval-footer > div {
    box-sizing: border-box;
    min-width: 0;
}

.fyc-approval-actions > .fyc-approval-remarks,
.fyc-approval-actions > .fyc-approval-button {
    box-sizing: border-box;
    flex: 1 1 0;
    min-width: 0;
}

.fyc-approval-remarks textarea {
    box-sizing: border-box;
    width: 100%;
}

@media (max-width: 992px) {
    .fyc-adm-dahs-container  {
        grid-template-columns: repeat(2, minmax(0, 1fr))!important;
    }
    .fyc-document-footer {
        box-sizing: border-box;
        height: auto !important;
    }

    .fyc-document-footer .toolbar-center,
    .fyc-document-footer-actions {
        box-sizing: border-box;
        width: 100%;
        min-width: 0;
    }

    .fyc-document-footer-actions {
        display: grid;
        grid-template-columns: repeat(2, minmax(0, 1fr));
        gap: 5px;
    }

    .fyc-document-remarks {
        box-sizing: border-box;
        grid-column: 1 / -1;
        width: 100% !important;
        min-width: 0;
    }

    .fyc-document-remarks textarea {
        box-sizing: border-box;
        width: 100% !important;
        height: 100%;
    }

    .fyc-document-action {
        box-sizing: border-box;
        width: 100% !important;
        min-width: 0;
        padding: 5px !important;
        white-space: nowrap;
    }

     .fyc-approval-footer {
         flex-direction: column;
         align-items: stretch;
         gap: 6px;
         height: auto !important;
         min-height: 0;
     }

    .fyc-approval-actions {
        box-sizing: border-box;
        display: grid !important;
        flex: 0 0 auto;
        grid-template-columns: repeat(2, minmax(0, 1fr));
        grid-auto-rows: minmax(33px, auto);
        gap: 5px;
        height: auto !important;
        margin-left: 0;
        width: 100% !important;
    }

    .fyc-approval-remarks {
        box-sizing: border-box;
        grid-column: 1;
        height: 33px;
        width: 100% !important;
    }

    .fyc-approval-remarks textarea {
        box-sizing: border-box;
        width: 100% !important;
    }

    .fyc-mobile-chat {
        box-sizing: border-box;
        display: flex;
        grid-column: 2;
        align-items: center;
        justify-content: center;
        min-width: 0;
        padding: 4px;
        white-space: nowrap;
    }

    .fyc-approval-button {
        box-sizing: border-box;
        max-width: none !important;
        min-width: 0;
        min-height: 38px;
        padding: 8px 4px !important;
        white-space: nowrap;
    }
}

@media (max-width: 600px) {
    .fyc-adm-dahs-container  {
        grid-template-columns: repeat(2, minmax(0, 1fr))!important;
    }
    /* remeber to update it in online version */
    .fyc-clearance-row {
        box-sizing: border-box;
        flex-wrap: nowrap;
        gap: 8px;
    }

    .fyc-clearance-status {
        box-sizing: border-box;
        width: auto;
        min-width: 0;
        flex: 0 1 auto;
        justify-content: flex-end;
        gap: 6px;
        padding: 4px !important;
    }

    .fyc-clearance-status .fyc-bar {
        width: 200px;
        min-width: 0;
        max-width: 200px;
        flex: 1 1 200px;
    }
}
.ok {
    background: rgba(52, 211, 153, .15);
    color: #34d399;
}
.tag {
    padding: 1px 11px;
    border-radius: 99px;
    font-size: 11px;
    font-weight: 700;
    white-space: nowrap;
}
.fyc-dash-pad{
    padding: 12px!important;
}
.dot {
    width: 8px;
    height: 8px;
    border-radius: 50%;
    margin-top: 6px;
    flex: none;
}
.feed {
    display: flex;
    gap: 10px;
    padding: 10px 0;
    border-top: 1px solid var(--line);
    font-size: 13px;
}
.ring {
    width: 120px;
    height: 120px;
    flex: none;
    position: relative;
}
.ring svg {
    display: block;
    width: 100%;
    height: 100%;
}
.ring b {
    position: absolute;
    inset: 0;
    display: grid;
    place-items: center;
    font-size: 1.15rem;
}
.fyc-card{
    background-color:rgba(255, 255, 255, .06)!important;
}
.fyc-f-13em {
    font-size: 1.3em;
}
.ring svg {
    transform: rotate(-90deg);
}
.chk-purple {
    color: #7C3AED;
}

.chk-purple-light {
    background-color: #F3E8FF;
}

.chk-purple-light-thik {
    background-color: #e5d2f7;
}
.pe {
    background: #22d3ee18;
    color: #22d3ee;;
}
.ye {
    background: #eee02218;
    color: #ddee22;;
}
.te {
    background: #80dc3999;
    color: #ccdc3923;
}
.go {
    width: 100%;
    height: 46px;
    border: 0;
    border-radius: 12px;
    font: inherit;
    font-weight: 600;
    color: #06121a;
    background: linear-gradient(90deg, #22d3ee, #fbbf24);
    cursor: pointer;
    margin-top: 12px;
}
.fyc-bar{
  width:200px;
  height:6px;
  border-radius:6px;
  overflow:hidden;
  background:rgba(255,255,255,.12);   /* the empty track */
}
.fyc-bar-fill{
  display:block;
  height:100%;
  width:0;                             /* set from data */
  border-radius:6px;
  background:linear-gradient(90deg,#22d3ee,#8b5cf6);
  transition:width .5s ease;
}
/* keep your existing override as is */
.fyc-clearance-status .fyc-bar{
  width:200px;min-width:0;max-width:200px;flex:1 1 200px;
}
.ped {
    background: rgba(251, 191, 36, .15);
    color: #fbbf24;
}
/* admin dahsboard */
.fyc-adm-dahs-container {
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
}
 .chip {
    padding: 6px 13px;
    border-radius: 99px;
    border: 1px solid rgba(255, 255, 255, .1);;
    background: none;
    color: #8f98c0;
    font: inherit;
    font-size: 12px;
    cursor: pointer;
}
.pbar{height:8px;border-radius:8px;background:rgba(127,135,180,.2);overflow:hidden}
.pbar i{display:block;height:100%;width:0;border-radius:8px;
  background:linear-gradient(90deg,#fbbf24,#fb7185);transition:width .6s ease}
.daf-font-size-logo-xl {
    font-size: 1.15em;
}
.uc-card{background:var(--card,rgba(255,255,255,.06));border:1px solid var(--line,rgba(255,255,255,.12));
  border-radius:8px;padding:22px;backdrop-filter:blur(14px);-webkit-backdrop-filter:blur(14px)}
.uc-head{display:flex;justify-content:space-between;align-items:flex-start;gap:12px;flex-wrap:wrap;margin-bottom:16px}
.uc-head h2{margin:0;font-size:17px;letter-spacing:-.01em}
.uc-head p{margin:3px 0 0;font-size:12px;color:var(--mut,#8f98c0)}
.uc-legend{display:flex;gap:14px;font-size:12px;color:var(--mut,#8f98c0)}
.uc-legend i{display:inline-block;width:10px;height:10px;border-radius:3px;margin-right:6px}
.uc-legend .g{background:linear-gradient(90deg,#22d3ee,#34d399)}
.uc-legend .a{background:linear-gradient(90deg,#fbbf24,#fb7185)}

.uc-stats{display:grid;grid-template-columns:repeat(3,1fr);gap:10px;margin-bottom:18px}
.uc-stats div{padding:12px 14px;border-radius:14px;background:rgba(127,135,180,.1);border:1px solid var(--line,rgba(255,255,255,.1))}
.uc-stats small{display:block;font-size:11px;color:var(--mut,#8f98c0);text-transform:uppercase;letter-spacing:.07em}
.uc-stats b{font-size:22px;letter-spacing:-.02em}

.uc-row{display:grid;grid-template-columns:22px 170px 1fr 92px;gap:12px;align-items:center;padding:9px 0;font-size:13px}
.uc-row+.uc-row{border-top:1px solid var(--line,rgba(255,255,255,.08))}
.uc-rank{color:var(--mut,#8f98c0);font-size:11px;font-weight:700}
.uc-lbl{overflow:hidden;text-overflow:ellipsis;white-space:nowrap;}
.uc-trk{height:14px;border-radius:14px;background:rgba(127,135,180,.16);overflow:hidden;display:flex}
.uc-trk i{display:block;height:100%;width:0;transition:width .7s cubic-bezier(.2,.8,.2,1)}
.uc-trk .c{background:linear-gradient(90deg,#22d3ee,#34d399)}
.uc-trk .u{background:linear-gradient(90deg,#fbbf24,#fb7185)}
.uc-val{text-align:right;font-size:12px;color:var(--mut,#8f98c0);white-space:nowrap}
.uc-val b{color:inherit;color:var(--text,#eef1ff);font-size:13px}
.uc-row:hover .uc-trk{box-shadow:0 0 0 2px rgba(34,211,238,.25)}

@media(max-width:640px){
  .uc-row{grid-template-columns:18px 1fr 70px;grid-template-areas:"r l v" "t t t"}
  .uc-rank{grid-area:r}.uc-lbl{grid-area:l}.uc-val{grid-area:v}.uc-trk{grid-area:t}
  .uc-stats{grid-template-columns:1fr 1fr 1fr}.uc-stats b{font-size:18px}
}
.fyc-dashb-mute{
    color:#8f98c0;
}
.fyc-upload-other-doc-btn {
    font: inherit;
    font-size: 13.5px;
    /* font-weight: 700; */
    border-radius: 10px;
    min-height: 44px;
    padding: 0 16px;
    cursor: pointer;
    border: 1px solid rgba(255, 255, 255, .16);
    color: #eef2fb;
    background: rgba(255, 255, 255, .08);
}
.chk-prec-bgr {
    background-color: #FEF3C7;
}

.chk-prec-bgr-col {
    color: #F59E0B;
}
.chk-dept-bgr {
    background-color: #F3E8FF;
}

.chk-dept-bgr-col {
    color: #7C3AED;
}
/* printer */
.sheet {
    width: 210mm;
    min-height: 297mm;
    margin: 0 auto;
    background: #fff;
    /* color: var(--ink); */
    padding: 14mm;
    position: relative;
    /* box-shadow: 0 20px 60px rgba(0, 0, 0, .45); */
}
.unit {
    border: 1px solid #ccc;
    /* border-radius: 10px; */
    margin-bottom: 9px;
    break-inside: avoid;
    overflow: hidden;
}
.uh {
    width: 100%;
    margin-bottom: 0;
    background-color:#f1f1f1!important;
    font-size: 12px;
}
.uh td {
    padding: 7px 11px;
    border: 0;
    vertical-align: middle;
}
table {
    width: 100%;
    border-collapse: collapse;
    font-size: 10.5px;
}
td.f {
    /* font-family: ui-monospace, Menlo, monospace; */
    font-size: 9.5px;
    color: #000!important;
}
td {
    padding: 5px 11px;
    border-bottom: 1px solid #ccc;
}
* {
    box-sizing: border-box;
}
.tgg.pedd {
    color: #b45309;
}
.tgg.okk {
    color: #059669;
}
.tgg {
    font-weight: 700;
    font-size: 10px;
}
.uh span {
    color: #000;;
    font-size: 10.5px;
}
.uh b {
    font-size: 12.5px;
}
th {
    text-align: left;
    font-size: 9px;
    text-transform: uppercase;
    letter-spacing: .07em;
    color: #000;
    padding: 5px 11px;
    /* border-bottom: 1px solid #ccc; */
}
.unit{border:1px solid #ccc}
/* .uh{background:#f3f5fd;color:#12163a} */
th{color:#000;border-bottom:1px solid #ccc}
td{color:#000;border-bottom:1px solid #ccc}
td.f{color:#000;}
.fyc-cred-uplod {
    font-size: 10px;
    /* letter-spacing: .10em; */
    text-transform: uppercase;
    color: #000;
    margin: 16px 0 8px;
}
.sum {
    width: 100%;
    border-collapse: collapse;
    margin: 14px 0 4px;
}
.sum small {
    display: block;
    font-size: 9.5px;
    color: #000;
    text-transform: uppercase;
    letter-spacing: .06em;
}
.sum td {
    border-bottom: 1px solid #ccc;
    padding: 5px 11px;
    vertical-align: top;
}
.top {
    height: 6px;
    margin: -14mm -14mm 9mm;
    background: linear-gradient(90deg, #22d3ee, #8b5cf6, #fbbf24);
}
.btn {
    height: 40px;
    padding: 0 18px;
    border-radius: 12px;
    border: 1px solid rgba(255, 255, 255, .12);
    background: none;
    color: #9aa3c7;
    font: inherit;
    /* font-weight: 600; */
    font-size: 13px;
    cursor: pointer;
    white-space: nowrap;
}
.search {
    flex: 1;
    min-width: 180px;
    height: 40px;
    border-radius: 40px;
    border: 1px solid rgba(255, 255, 255, .12);
    background: rgba(127, 135, 180, .1);
    color: #eef1ff;
    padding: 0 14px;
    font: inherit;
    outline: none;
}
.tabs {
    display: flex;
    gap: 6px;
}
.tab {
    padding: 8px 15px;
    border-radius: 99px;
    border: 1px solid rgba(255, 255, 255, .12);
    background: none;
    color: #9aa3c7;
    font: inherit;
    font-size: 13px;
    cursor: pointer;
}
.tab.on {
    background: linear-gradient(90deg, #22d3ee, #8b5cf6);
    color: #fff;
    border-color: transparent;
}
.btn.goo {
    border: 0;
    color: #06121a;
    background: linear-gradient(90deg, #22d3ee, #fbbf24)!important;
}
.foot {
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 10px;
    flex-wrap: wrap;
    padding: 14px 16px;
    border-top: 1px solid rgba(255, 255, 255, .12);
    font-size: 13px;
    color: #9aa3c7;
}
.pg {
    display: flex;
    gap: 6px;
}
.pb {
    width: 36px;
    height: 36px;
    border-radius: 50%;
    border: 1px solid rgba(255, 255, 255, .12);
    background: none;
    color: #eef1ff;
    cursor: pointer;
}
.pb.on {
    border-color: #34d399;
    background: #34d399;
    color: #04201a;
    font-weight: 700;
}
.pb:disabled {
    opacity: .4;
    cursor: not-allowed;
}
.pagination-ellipsis {
    min-width: 20px;
    display: flex;
    align-items: center;
    justify-content: center;
}
.ap {
    position: relative;
    z-index: 1;
    height: 36px;
    border: 0;
    border-radius: 15px;
    background: #34d399;
    color: #04201a;
    font: inherit;
    font-weight: 700;
    font-size: 12px;
    cursor: pointer;
    padding: 5px 25px;
}
.avi {
    width: 42px;
    height: 42px;
    border-radius: 50%;
    /* display: grid; */
    /* place-items: center; */
    color: #fff;
    font-weight: 700;
    font-size: 13px;
}
.fyc-dim{
    color: #9aa3c7;;
}
.fyc-gap-20{
    gap: 20px;
}
.fyc-reg-row{
  display:grid;
  grid-template-columns:44px 1fr 120px 104px;
  gap:12px;
  align-items:center;
}
.fyc-fix-togler{
    background-color: var(--app-progress-ring-on-media-background);
}
.empty-state{
  display:flex;flex-direction:column;align-items:center;text-align:center;
  gap:10px;padding:48px 20px;width:100%;
  /* border:1px dashed var(--line,rgba(127,135,180,.35)); */
  /* border-radius:18px; */
  background:var(--card,rgba(127,135,180,.06));
}
.es-icon{
  width:72px;height:72px;border-radius:50%;
  display:grid;place-items:center;
  color:#34d399;
  background:rgba(52,211,153,.14);
  box-shadow:0 0 0 8px rgba(52,211,153,.07);
}
.empty-state h3{margin:6px 0 0;font-size:18px;letter-spacing:-.01em}
.empty-state p{margin:0;max-width:380px;font-size:10px;line-height:1.6;color:var(--mut,#9aa3c7)}
.es-btn{
  margin-top:8px;height:40px;padding:0 20px;border:0;border-radius:12px;
  font:inherit;font-weight:600;font-size:13px;cursor:pointer;color:#06121a;
  background:linear-gradient(90deg,#22d3ee,#fbbf24);
}
.es-btn:hover{filter:brightness(1.07)}
/* end printer */
/* end of online update */