/* Resetting Default Styles starts here*/
*{
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}

body{
    width: 100%;
    min-height: 100vh;
    font-size: 62.5%;
    font-family: system-ui, -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Oxygen, Ubuntu, Cantarell, 'Open Sans', 'Helvetica Neue', sans-serif;
    color: var(--priBgClr);
    background: var(--terBgClr);
}

ul{
    list-style: none;
}

a{
    text-decoration: none;
    color: unset;
}

svg{
    fill: var(--secBgClr);
}

.no-fill{
    fill: none;
}

input{
    font-family: inherit;
    outline: none;
}

select{
    border: 1px solid #EFF4F7;
    color: var(--priBgClr);
    background: #f9fbfc;
    font-family: inherit;
    outline: none;
}

button{
    border: none;
    outline: none;
    font-family: inherit;
    font-size: inherit;
    cursor: pointer;
}

/* Resetting Default Styles ends here*/

/* Reusable Classes starts here*/
.disp-flx{
    display: flex;
}

.disp-flx-col{
    display: flex;
    flex-direction: column;
}

.disp-grd{
    display: grid;
}

/* Justify content properties starts here */
.jcc{
    justify-content: center;
}

.jcsb{
    justify-content: space-between;
}

.jcse{
    justify-content: space-evenly;
}

.jcs{
    justify-content: start;
}

.jce{
    justify-content: end;
}

.jsc{
    justify-self: center;
}

.jse{
    justify-self: end;
}

/* Justify content properties ends here */

/* Aligning properties starts here */
.aic{
    align-items: center;
}

.ais{
    align-items: start;
}

.aie{
    align-items: end;
}

.asc{
    align-self: center;
}

.fnt-xl{
    font-size: var(--fntXl);
}

.fnt-md-1{
    font-size: var(--fntMed);
}

.fnt-md-2{
    font-size: var(--fntMed2);
}

.fnt-md-3{
    font-size: var(--fntMed3);
}

.fnt-sm-1{
    font-size: var(--fntSml);
}

.fnt-sm-2{
    font-size: var(--fntSml2);
}

.fnt-sm-3{
    font-size: var(--fntSml3);
}

.fnt-sm-4{
    font-size: var(--fntSml4);
}

.fnt-wt-normal{
    font-weight: 500;
}

.fnt-wt-bold{
    font-weight: 600;
}

.fnt-wt-bolder{
    font-weight: 700;
}

.br-sm{
    border-radius: var(--brdrRadSml);
}

.br-md{
    border-radius: var(--brdrRadMed);
}

.br-lg{
    border-radius: var(--brdrRadLar);
}

.br-round{
    border-radius: 50%;
}

.btn{
    width: fit-content;
    border-radius: var(--brdrRadMed);
    font-size: inherit;
    user-select: none;
    padding: .5em 1em;
    box-shadow: 0px 10px 15px rgb(0 0 0 / 10%);
}

.filled{
    background: var(--secBgClr);
    color: var(--componentBg);
}

.filled svg{
    fill: var(--componentBg);
}

.stroked{
    border: 1px solid var(--priBgClr);
    color: var(--priBgClr);
}

.stroked svg{
    fill: var(--priBgClr);
}

.ls-sm{
    letter-spacing: .5px;
}

.ls-md{
    letter-spacing: 1px;
}

.txt-cntr{
    text-align: center;
}

.txt-ws-nw{
    white-space: nowrap;
}

/* Aligning properties ends here */

/* icon sizes classes starts here */
.icon-sm{
    width: var(--svgSml);
    height: var(--svgSml);
}

.icon-md{
    width: var(--svgMed);
    height: var(--svgMed);
}

.icon-md-2{
    width: var(--svgMed2);
    height: var(--svgMed2);
}

.icon-lg{
    width: var(--svgLg);
    height: var(--svgLg);
}

.icon-xl{
    width: var(--svgXl);
    height: var(--svgXl);
}

/* icon sizes classes starts here */

/* Custom scrollbar classes starts here */
.fancy-sb{
    scrollbar-color: var(--priBgClr) var(--terBgClr);
}

.fancy-sb::-webkit-scrollbar{
    width: 6px;
    height: 6px;
}

.fancy-sb.sml::-webkit-scrollbar{
    width: 3px;
    height: 3px;
}

.fancy-sb::-webkit-scrollbar-track{
    border-radius: var(--brdrRadSml);
    background: var(--terBgClr);
}

.fancy-sb::-webkit-scrollbar-thumb{
    background: var(--secBgClr);
    border-radius: var(--brdrRadSml);
}

/* Custon scrollbar classes ends here */

/* Reusable Classes ends here*/

/* CSS variables starts here  */
:root{
    --fntXl: 3em;

    --fntMed: 1.6em;
    --fntMed2: 1.8em;
    --fntMed3: 2em;

    --fntSml: .8em;
    --fntSml2: 1em;
    --fntSml3: 1.2em;
    --fntSml4: 1.4em;

    --svgSml: 1em;
    --svgMed: 1.5em;
    --svgMed2: 1.7em;
    --svgLg: 2em;
    --svgXl: 2.5em;

    --gap1: .5em;
    --gap2: 1em;
    --gap3: 1.5em;
    --gap4: 2em;
    --gap5: 2.5em;

    --brdrRadSml: .25em;
    --brdrRadMed: .5em;
    --brdrRadLar: 1em;

    --stack1: 1;
    --stack2: 2;
    --stack3: 3;
    --stack4: 4;

    --componentBg: #fff;
    --priFntClr: #495057;
    --trans: .3s;

    --testing: 1px solid #000;
}

/* CSS variables ends here  */


/* Color pallette for roles starts here */
body[data-logged-credential='admin']{
    --priBgClr: #355090;
    --secBgClr: #4c65a0;
    --terBgClr: #edf2fb;
    --pulseBgClr: #a7b9e3;
    --secRgb: 76, 101, 160;
}

body[data-logged-credential='teacher']{
    --priBgClr: rgb(30, 32, 34);
    --secBgClr: #646464;
    --terBgClr: #e2e6ea;
    --pulseBgClr: #c3c3c3;
    --secRgb: 100, 100, 100;
}

/* Color pallette for roles ends here */


/* Actual Styles starts here */
.mw4k-ad-panel{
    width: 100%;
    height: 100vh;
    gap: var(--gap4);
}

.ad-panel-header img{
    /* width: 4em; */
    height: 50px;
    max-width: 360px;
    object-fit: contain;
}

.ad-panel-header h3{
    text-shadow: 4px 4px 2px rgb(0 0 0 / 10%);
    font-family: monospace;
    margin-left: .5em;
}

.ad-panel-container{
    min-width: 35em;
    width: 80%;
    max-width: 110em;

    grid-template-columns: 20em 1fr;
    gap: var(--gap4);
    transition: var(--trans);
    transition-timing-function: cubic-bezier(0.23, 1, 0.32, 1.2);
}

/* classes added via javascript starts here */
.ad-panel-container.shrink{
    grid-template-columns: 7em 1fr;
}

/* classes added via javascript ends here */

.ad-panel-sidebar{
    height: fit-content;
    background: var(--componentBg);
    box-shadow: 0px 10px 20px rgba(0, 0, 0, 0.1);
    padding: 1em;
    position: relative;
    gap: var(--gap1);
}

.ad-panel-sub-container{
    min-height: 59em;
    min-width: 100%;
    gap: var(--gap3);
    padding: 1.5em;
    background: var(--componentBg);
    box-shadow: 0px 10px 20px rgba(0, 0, 0, 0.1);
}

.a-p-s-header{
    width: 100%;
    height: 4.5em;
    margin-bottom: 2em;
    background-repeat: no-repeat;
    background-size: contain;
    background-position: center;
}



.a-p-s-header > img{
    width: 5em;
    height: 5em;
    object-fit: contain;
}

.a-p-s-footer{
    width: 100%;
    grid-template-columns: .2fr .8fr;
    margin-top: 2em;
}

.a-p-s-content{
    overflow: hidden;
}

.a-p-s-content ul{
    gap: var(--gap1);
}

.ad-panel-container:not(.shrink) .a-p-s-footer svg{
    margin-right: 1em;
}

/* classes added via javascript ends here */

.a-p-s-footer svg{
    grid-row: 1/3;
    fill: var(--componentBg);
}

.a-p-s-footer p{
    color: var(--componentBg);
}

.a-p-s-footer .logged-in-user{
    overflow: hidden;
    text-overflow: ellipsis;
    text-transform: capitalize;
}

.a-p-s-tab{
    transition: var(--trans);
}

.a-p-s-tab.active{
    background: var(--terBgClr);
    box-shadow: inset 0px 2px 2px rgba(0, 0, 0, .1);
}

.a-p-s-tab a{
    grid-template-columns: 2.5em 1fr;
    gap: var(--gap1);
    padding: 1em;
    position: relative;
}

.a-p-s-tab:hover{
    background: var(--terBgClr);
    box-shadow: inset 0px 2px 2px rgba(0, 0, 0, 0.1);
}

.a-p-s-tab:hover svg,
.a-p-s-tab.active svg{
    transform: rotate(-2.5deg) scale(1.15);
}

.a-p-s-tab svg{
    transition: var(--trans);
}

/* classes added via javascript starts here */
.ad-panel-container.shrink .a-p-s-tab p,
.ad-panel-container.shrink .a-p-s-tab span{
    transform: scale(0);
    display: none;
}

.ad-panel-container.shrink .a-p-s-footer{
    grid-template-columns: unset;
    grid-template-rows: unset;
}

.ad-panel-container.shrink .a-p-s-footer p{
    transform: scale(0);
    display: none;
}

.shrink .a-p-s-tab a{
    grid-template-columns: unset;
    justify-content: center;
}

/* Class added via Javascript starts here */

/* Components Styles starts here */
.a-p-s-c-header-leading{
    gap: var(--gap1);
}

/* Breadcrumbs styles starts here */
.a-p-s-c-c-breadcrumbs-wrapper ul{
    gap: var(--gap1);
}

.a-p-s-c-c-breadcrumbs-wrapper ul li{
    background: var(--terBgClr);
    transition: var(--trans);
}

.a-p-s-c-c-breadcrumbs-wrapper ul li:first-child{
    z-index: var(--stack1);
}

.a-p-s-c-c-breadcrumbs-wrapper ul li:not(:first-child){
    transform: skewX(-25deg);
    border: 1px solid var(--secBgClr);
}

.a-p-s-c-c-breadcrumbs-wrapper ul li:not(:first-child) a{
    display: block;
    transform: skewX(25deg);
    padding: .35em 1em;
}

.a-p-s-c-c-breadcrumbs-wrapper ul li:nth-child(1){
    margin-right: -1em;
}

.bread-parent{
    --breadParentWH: 3.25em;
    width: var(--breadParentWH);
    height: var(--breadParentWH);
    border: 1px solid var(--secBgClr);
}

.bread-parent a{
    height: 100%;
}

.a-p-s-c-c-breadcrumbs-wrapper ul li:hover{
    background: var(--secBgClr);
    color: var(--componentBg);
}

.a-p-s-c-c-breadcrumbs-wrapper ul li:hover svg{
    fill: var(--componentBg);
}

.currently-active-bc{
    background: var(--secBgClr) !important;
    color: var(--componentBg);
}

/* Breadcrumbs styles ends here */

.a-p-s-c-sub-header{
    grid-template-columns: repeat(3, 1fr);
    gap: var(--gap2);
}

.add a,
.add button{
    gap: var(--gap1);
}

.add a>svg,
.add button>svg{
    transition: var(--trans);
}

.a-p-s-c-sub-header span{
    padding: .25em .5em;
    width: fit-content;
    background: var(--terBgClr);
    color: var(--priBgClr);
    box-shadow: inset 0px 2px 6px rgba(0, 0, 0, .1);
    grid-column: 3/4;
    position: relative;
}

.dot{
    position: relative;
}

.dot::before,
.dot.pulse::after{
    --notification: .8em;
    content: '';
    width: var(--notification);
    height: var(--notification);
    border-radius: 50%;
    position: absolute;
    bottom: calc(100% - calc(var(--notification)/2));
    right: calc(100% - calc(var(--notification)/2));
}

.dot::before{
    background: var(--secBgClr);
    box-shadow: 0px 5px 10px rgb(0 0 0 / 30%);
    z-index: var(--stack1);
}

.dot.pulse::after{
    background: var(--pulseBgClr);
    animation: pulse 1s .25s ease infinite alternate;
}


@keyframes pulse{
    to{
        transform: scale(2);
    }
}

.a-p-s-c-c-breadcrumbs-wrapper{
    overflow-x: auto;
}

.a-p-s-c-details{
    height: 42em;
    overflow: auto;
    position: relative;
    box-shadow: inset 0px -10px 15px rgb(0 0 0 / 5%);
}

.a-p-s-c-pagination{
    flex-wrap: wrap;
    gap: var(--gap2);
    padding-top: 1.2em;
}

.a-p-s-c-pagination .navigate-to svg{
    display: block;
}

.a-p-s-c-pagination .navigate-to:hover{
    text-decoration: underline;
}

.a-p-s-c-pagination a{
    position: relative;
}

.a-p-s-c-p-prev-btn{
    margin-left: 1.5em;
    padding: .4em .8em .6em 1.8em;
}

.a-p-s-c-p-next-btn{
    margin-right: 15px;
    padding: .4em 1.8em .6em .8em;
}

.a-p-s-c-p-prev-btn::before,
.a-p-s-c-p-next-btn::before{
    position: absolute;
    top: calc(50% + 1.5px);
    transform: translateY(-50%);
}

.a-p-s-c-p-prev-btn::before{
    content: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' fill='%23fff' width='12' height='12' viewBox='0 0 16 16'%3E%3Cpath d='m3.86 8.753 5.482 4.796c.646.566 1.658.106 1.658-.753V3.204a1 1 0 0 0-1.659-.753l-5.48 4.796a1 1 0 0 0 0 1.506z'/%3E%3C/svg%3E");
    left: .3em;
}

.a-p-s-c-p-next-btn::before{
    content: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' fill='%23fff' viewBox='0 0 16 16'%3E%3Cpath d='m12.14 8.753-5.482 4.796c-.646.566-1.658.106-1.658-.753V3.204a1 1 0 0 1 1.659-.753l5.48 4.796a1 1 0 0 1 0 1.506z'/%3E%3C/svg%3E");
    right: .3em;
}

.a-p-s-c-p-page-count{
    text-align: center;
    min-width: 60px;
    margin: 0 5px;
}

.a-p-s-c-p-page-count span{
    color: var(--secBgClr);
}

/* Components Styles ends here */
.a-p-s-c-s-h-left-fns{
    grid-column: 1 / 2;
    gap: var(--gap4);
}

.a-p-s-c-s-h-cntr-fns{
    grid-column: 2 / 3;
}

.a-p-s-c-s-h-right-fns{
    grid-column: 3 / 4;
}

/* Filter css starts */
.filters-wrap,
.sort-wrap{
    position: relative;
}

.filter-btn,
.sort-btn{
    height: 38px;
    width: 44px;
    cursor: pointer;
    padding: 0.7em 1em;
    box-shadow: rgba(0, 0, 0, 0.1) 0px 1px 3px 0px,
        rgba(0, 0, 0, 0.06) 0px 1px 2px 0px;
    transition: var(--trans);
}

.filter-btn:active,
.sort-btn:active{
    box-shadow: rgb(0 0 0 / 10%) inset 0px 1px 3px 0px, rgb(0 0 0 / 6%) inset 0px 1px 2px 0px;
}

.filter-btn svg,
.sort-btn svg{
    display: block;
}

.filters,
.sort-options{
    min-width: 21em;
    padding: 1em;
    position: absolute;
    top: calc(100% + 5px);
    left: 0;
    z-index: var(--stack3);
    background-color: var(--componentBg);
    gap: var(--gap1);
    box-shadow: rgba(0, 0, 0, 0.1) 0px 4px 6px -1px,
        rgba(0, 0, 0, 0.06) 0px 2px 4px -1px;
}

.filters label,
.sort-options label{
    cursor: pointer;
    color: #6c757d;
}

.filters input[type="radio"],
.sort-options input[type="radio"]{
    accent-color: var(--priBgClr);
    margin-right: .5em;
}

.filters input[type="radio"]:checked+label,
.sort-options input[type="radio"]:checked+label{
    color: var(--priBgClr);
}

.filters-wrap.hide-elem .filters,
.sort-wrap.hide-elem .sort-options{
    display: none;
}

.filters-wrap:not(.hide-elem) .filter-btn,
.sort-wrap:not(.hide-elem) .sort-btn{
    box-shadow: rgb(0 0 0 / 10%) inset 0px 1px 3px 0px, rgb(0 0 0 / 6%) inset 0px 1px 2px 0px;
}

.clear-filter-elem{
    border-top: 1px solid #e2e8f0;
    margin-top: 5px;
    padding: 5px 5px 0 5px;
}

.clear-filter-elem button{
    width: fit-content;
    color: var(--priBgClr);
    background-color: transparent;
}

.clear-filter-elem button span{
    padding: 0;
    box-shadow: unset;
    background: transparent;
}

/* Filter css ends */

/* search bar starst*/

.a-p-s-c-header-search{
    width: 27em;
    position: relative;
    overflow: hidden;
    box-shadow: inset 0px 2px 6px rgba(0, 0, 0, 0.1);
}

.a-p-s-c-header-search input:focus{
    outline: none;
}

.a-p-s-c-header-search input::placeholder{
    color: var(--priBgClr);
}

.a-p-s-c-header-search input{
    width: 100%;
    padding: 6px 40px 6px 10px;
    border: none;
    color: var(--priBgClr);
    background-color: var(--terBgClr);
}

.a-p-s-c-header-search button{
    height: 100%;
    position: absolute;
    right: 0;
    background: transparent !important;
    box-shadow: unset;
}

.a-p-s-c-header-search button svg{
    color: #868f97;
    display: block;
}

.search-highlight{
    background-color: #d9f99d;
}
/* search bar ends */

/* Active users starst*/
.usr-count{
    padding: 0.45em 0.9em;
    background-color: var(--terBgClr);
    box-shadow: inset 0px 2px 6px rgba(0, 0, 0, 0.1);
    color: var(--priBgClr);
}

/* Active users ends */

/* New table style starts here */
.a-p-s-c-details table{
    width: 100%;
    border-collapse: collapse;
    position: relative;
}

.a-p-s-c-details table thead{
    position: sticky;
    top: 0;
    left: 0;
    z-index: var(--stack2);
    background: var(--terBgClr);
}

.a-p-s-c-details table thead th,
.a-p-s-c-details table tbody td{
    padding: 0.7em 1em;
}

.a-p-s-c-details td>img{
    --imgWH: 25px;
    width: var(--imgWH);
    height: var(--imgWH);
    display: block;
    margin: 0 auto;
}

.table-actions{
    grid-auto-flow: column;
    gap: var(--gap2);
    justify-items: center;
}

.table-actions a svg{
    display: block;
}


.table-actions button{
    width: fit-content;
    background-color: transparent;
}

.a-p-s-c-details table tbody tr{
    border-bottom: 1px solid var(--terBgClr);
}

.a-p-s-c-details table tbody tr:hover{
    background: var(--terBgClr);
    box-shadow: inset 0px 2px 4px rgb(0 0 0 / 10%);
    transition: var(--trans);
}

/* New table style ends here */

/* new payment icon starts*/
/* .new-payment-stat svg{
    display: block;
    margin: 0 auto;
}

.new-payment-stat.active svg{
    fill: #127c12;
}

.new-payment-stat.inactive svg{
    fill: #ca2c2c;
} */

/* new payment icon ends*/

/* form design styles starts here */
.a-p-s-c-c-form{
    overflow: auto;
    height: 42em;
    grid-template-columns: repeat(2, 1fr);
    box-shadow: inset 0px -10px 15px rgb(0 0 0 / 5%);
}

.a-p-s-c-c-f-left,
.a-p-s-c-c-f-right{
    overflow: auto;
    padding: 0 1em;
}

/* single section single column form design starts here */
.a-p-s-c-c-f-single-col{
    width: 50em;
    margin: 0 auto;
}

/* single section single column form design ends here */

.a-p-s-c-c-f-right.non-sticky{
    margin-top: 33px;
}

.sticky-title{
    padding: 5px 0;
    position: sticky;
    top: 0;
    z-index: var(--stack2);
    background-color: var(--componentBg);
    border-bottom: 1px solid #e9ecef;
}

.tickboxes{
    gap: var(--gap2);
}

.fields,
.tickboxes,
.stats{
    margin: 0.8em auto;
}

.input-field{
    position: relative;
    padding-top: 1.7em;
}

.input-field .error-msg{
    position: absolute;
    top: 2px;
    right: 8px;
    font-size: 12px;
    color: #c44f5d;
}

.field-intake{
   gap: var(--gap1);
}

.field-intake input[type="text"],
.field-intake input[type="password"]{
    border: 1px solid #EFF4F7;
    color: var(--priBgClr);
    background: #f9fbfc;
}

.field-intake input[type="password"],
.field-intake select{
    width: 100%;
}

.inp-n-fn{
    position: relative;
}

.inp-n-fn input{
    padding: 6px 35px 6px 8px !important;
}

input:disabled,
select:disabled{
    opacity: 0.8;
    cursor: not-allowed;
}

.restricted input:disabled{
    cursor: not-allowed;
}

.restricted input:enabled{
    cursor: text;
}

.field-intake label,
.field .field-label,
.tickbox-field label,
.stat .field-label{
    color: var(--priFntClr);
}

.field-intake,
.field,
.tickboxes{
    padding: 0.5em;
}

.field{
    padding-top: 1.7em;
}

.tickboxes{
    grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));
}

.tickbox-field label{
    cursor: pointer;
    padding-left: 8px;
    user-select: none;
}

.tickbox{
    cursor: pointer;
    --tickbox-prop: 17px;
    appearance: none;
    height: var(--tickbox-prop);
    width: var(--tickbox-prop);
    border: 2px solid #ced4da;
    position: relative;
}

.tickbox:checked{
    background: var(--secBgClr);
    border: 2px solid var(--secBgClr);
    box-shadow: rgba(60, 64, 67, 0.3) 0px 1px 2px 0px,
        rgba(60, 64, 67, 0.15) 0px 2px 6px 2px;
}

.tickbox::after{
    content: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='14' height='14' fill='%23fff' viewBox='0 0 16 16'%3E%3Cpath stroke='%23fff' stroke-width='0.5' d='M12.736 3.97a.733.733 0 0 1 1.047 0c.286.289.29.756.01 1.05L7.88 12.01a.733.733 0 0 1-1.065.02L3.217 8.384a.757.757 0 0 1 0-1.06.733.733 0 0 1 1.047 0l3.052 3.093 5.4-6.425a.247.247 0 0 1 .02-.022Z'/%3E%3C/svg%3E");
    position: absolute;
    top: calc(50% - 6.5px);
    left: calc(50% - 7.5px);
    transform: scale(0);
    transition: transform 0.3s ease-in-out;
}

.tickbox:checked::after{
    transform: scale(1);
}

.inp-fn-btn{
    cursor: pointer;
    position: absolute;
    top: 50%;
    right: 10px;
    transform: translateY(-50%);
    background: #f9fbfc;
}

.inp-fn-btn svg{
    display: block;
}

.a-p-s-c-form-fns{
    padding-top: 1.2em;
    gap: 2.5em;
    position: relative;
}

.field .field-value[data-copy]:hover{
    background: var(--terBgClr);
}

[data-copy]{
    cursor: pointer;
}

[data-copy="false"]::after{
    content: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' fill='%23000' viewBox='0 0 16 16'%3E%3Cpath stroke='%23000' stroke-width='0.2' d='M4 1.5H3a2 2 0 0 0-2 2V14a2 2 0 0 0 2 2h10a2 2 0 0 0 2-2V3.5a2 2 0 0 0-2-2h-1v1h1a1 1 0 0 1 1 1V14a1 1 0 0 1-1 1H3a1 1 0 0 1-1-1V3.5a1 1 0 0 1 1-1h1v-1z'/%3E%3Cpath stroke='%23000' stroke-width='0.2' d='M9.5 1a.5.5 0 0 1 .5.5v1a.5.5 0 0 1-.5.5h-3a.5.5 0 0 1-.5-.5v-1a.5.5 0 0 1 .5-.5h3zm-3-1A1.5 1.5 0 0 0 5 1.5v1A1.5 1.5 0 0 0 6.5 4h3A1.5 1.5 0 0 0 11 2.5v-1A1.5 1.5 0 0 0 9.5 0h-3z'/%3E%3C/svg%3E");
}

[data-copy="true"]::after{
    content: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' fill='%23000' viewBox='0 0 16 16'%3E%3Cpath stroke='%23000' stroke-width='0.2' fill-rule='evenodd' d='M10.854 7.146a.5.5 0 0 1 0 .708l-3 3a.5.5 0 0 1-.708 0l-1.5-1.5a.5.5 0 1 1 .708-.708L7.5 9.793l2.646-2.647a.5.5 0 0 1 .708 0z'/%3E%3Cpath stroke='%23000' stroke-width='0.2' d='M4 1.5H3a2 2 0 0 0-2 2V14a2 2 0 0 0 2 2h10a2 2 0 0 0 2-2V3.5a2 2 0 0 0-2-2h-1v1h1a1 1 0 0 1 1 1V14a1 1 0 0 1-1 1H3a1 1 0 0 1-1-1V3.5a1 1 0 0 1 1-1h1v-1z'/%3E%3Cpath stroke='%23000' stroke-width='0.2' d='M9.5 1a.5.5 0 0 1 .5.5v1a.5.5 0 0 1-.5.5h-3a.5.5 0 0 1-.5-.5v-1a.5.5 0 0 1 .5-.5h3zm-3-1A1.5 1.5 0 0 0 5 1.5v1A1.5 1.5 0 0 0 6.5 4h3A1.5 1.5 0 0 0 11 2.5v-1A1.5 1.5 0 0 0 9.5 0h-3z'/%3E%3C/svg%3E");
}

[data-copy="true"]::after,
[data-copy="false"]::after{
    position: absolute;
    top: calc(50% - 7.5px);
    right: 10px;
    opacity: 0;
    background: var(--terBgClr);
    transition: 0.4s ease-in-out;
}

[data-copy="true"]:hover::after,
[data-copy="false"]:hover::after{
    opacity: 1;
}

.inp-prop{
    width: 50%;
    min-width: 120px;
}

.field .field-value,
input[type="text"],
input[type="password"],
select{
    padding: 6px 8px;
}

.field .field-value{
    position: relative;
    word-break: break-word;
    transition: var(--trans);
}

.field .field-value[data-copy]:hover{
    background: var(--terBgClr);
}

.field-value{
    border: 1px solid #EFF4F7;
    color: var(--priBgClr);
    background: #f9fbfc;
}

.stat{
    grid-template-columns: repeat(2, 1fr);
    margin-bottom: 1em;
}

/* form design styles ends here */

/* form extra design styles starts here */

.field-edit-btn,
#pwd-edit-btn,
.email-edit-btn,
.logo-upload-btn{
    height: 100%;
    width: 3.5em;
    position: absolute;
    bottom: 0;
    right: 0;
    background-color: #f9fbfc;
}

.field-edit-btn::before,
#pwd-edit-btn::before,
.email-edit-btn::before,
.logo-upload-btn::before{
    content: url("data:image/svg+xml,  %3Csvg xmlns='http://www.w3.org/2000/svg' height='17' width='17' fill='%2364748b'%3E%3Cpath d='M12.854.146a.5.5 0 0 0-.707 0L10.5 1.793 14.207 5.5l1.647-1.646a.5.5 0 0 0 0-.708l-3-3zm.646 6.061L9.793 2.5 3.293 9H3.5a.5.5 0 0 1 .5.5v.5h.5a.5.5 0 0 1 .5.5v.5h.5a.5.5 0 0 1 .5.5v.5h.5a.5.5 0 0 1 .5.5v.207l6.5-6.5zm-7.468 7.468A.5.5 0 0 1 6 13.5V13h-.5a.5.5 0 0 1-.5-.5V12h-.5a.5.5 0 0 1-.5-.5V11h-.5a.5.5 0 0 1-.5-.5V10h-.5a.499.499 0 0 1-.175-.032l-.179.178a.5.5 0 0 0-.11.168l-2 5a.5.5 0 0 0 .65.65l5-2a.5.5 0 0 0 .168-.11l.178-.178z'/%3E%3C/svg%3E%0A");
    --prop: 17px;
    height: var(--prop);
    width: var(--prop);
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
}

.editable-static-field{
    width: 100%;
    padding: 6px 35px 6px 8px !important;
}

.sch-logo-field{
    margin-bottom: 2em;
}

.sch-logo-preview{
    width: 100%;
    padding: 6px 8px;
}

.sch-logo-preview img{
    height: 5em;
    width: calc(100% - 35px);
    object-fit: contain;
}

.sch-logo-preview img[src=""],
.sch-logo-preview img:not([src]){
  opacity: 0;
}

.sch-logo-preview img[src="*"]{
    opacity: 1;
}

#sch-logo{
    position: absolute;
    top: 0;
    left: 0;
    height: 100%;
    width: 100%;
    display: none;
}

/* form extra design styles ends here */

/* Notification styles starts here */
.ad-panel-noti{
    width: 30em;
    box-shadow: 0px 10px 25px rgba(0, 0, 0, .2);
    position: fixed;
    top: -25%;
    right: 2.5%;
    z-index: var(--stack2);
    padding: .5em 1em 1em 1em;
    background: var(--notiGradiBody);
    gap: var(--gap2);
    animation: notify .5s .3s cubic-bezier(0.23, 1, 0.32, 1.2) forwards;

    grid-template-columns: 3.5em 1fr 2em;
}

.ad-panel-noti::before{
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
    left: 1em;
}

.success.ad-panel-noti::before{
    content: url("data:image/svg+xml, %3Csvg xmlns='http://www.w3.org/2000/svg' width='30px' height='30px' fill='%233a9d3a' viewBox='0 0 16 16'%3E%3Cpath d='M16 8A8 8 0 1 1 0 8a8 8 0 0 1 16 0zm-3.97-3.03a.75.75 0 0 0-1.08.022L7.477 9.417 5.384 7.323a.75.75 0 0 0-1.06 1.06L6.97 11.03a.75.75 0 0 0 1.079-.02l3.992-4.99a.75.75 0 0 0-.01-1.05z'/%3E%3C/svg%3E");
}

.warning.ad-panel-noti::before{
    content: url("data:image/svg+xml, %3Csvg xmlns='http://www.w3.org/2000/svg' width='30px' height='30px' fill='%23a35858' viewBox='0 0 16 16'%3E%3Cpath d='M16 8A8 8 0 1 1 0 8a8 8 0 0 1 16 0zM5.354 4.646a.5.5 0 1 0-.708.708L7.293 8l-2.647 2.646a.5.5 0 0 0 .708.708L8 8.707l2.646 2.647a.5.5 0 0 0 .708-.708L8.707 8l2.647-2.646a.5.5 0 0 0-.708-.708L8 7.293 5.354 4.646z'/%3E%3C/svg%3E");
}

.success{
    --notiGradiBody: linear-gradient(to right, #c1f7c1 5em, #fff 5em);
    --notiGradiLoad: linear-gradient(to right, #3f7e3f, #62bf62);
    --notiSVGClr: #3a9d3a;
}

.warning{
    --notiGradiBody: linear-gradient(to right, #f9c4c4 5em, #fff 5em);
    --notiGradiLoad: linear-gradient(to right, #ed5050, #ff9999);
    --notiSVGClr: #a35858;
}

@keyframes notify{
    to{
        top: 5em;
    }
}

.ad-panel-noti::after{
    content: '';
    width: 0%;
    height: 2px;
    position: absolute;
    bottom: .35em;
    left: calc(5em + 1em);
    border-radius: .25em;
    background: var(--notiGradiLoad);
    animation: waiting 5s .3s ease forwards;
}

@keyframes waiting{
    to{
        width: calc(100% - 7em);
    }
}

.ad-panel-noti-body{
    grid-column: 2/3;
    gap: var(--gap1);
}

.ad-panel-noti button{
    --btnWH: 1.8em;
    width: var(--btnWH);
    height: var(--btnWH);
    background: var(--componentBg);
    box-shadow: 0px 5px 10px rgba(0, 0, 0, .15);
    transition: var(--trans);
}

.ad-panel-noti button:hover{
    background: #fdc5c5;
}

.ad-panel-noti button svg{
    stroke: #000;
    stroke-width: .5;
    transition: var(--trans);
}

.a-p-n-b-text{
    color: var(--priFntClr);
}

/* Notification styles ends here */

/* date picker design starts here */
.date-picker{
    margin-left: 8px;
    padding: 5px;
    border: none;
    border-radius: 5px;
    color: var(--componentBg);
    background-color: var(--secBgClr);
}

.date-picker::-webkit-calendar-picker-indicator{
    background-color: var(--componentBg);
    padding: 3px;
    cursor: pointer;
    border-radius: 3px;
}

/* date picker design ends here */

/* View payment field icon start */
.field-icon{
    --icon-prop: 2.5em;
    width: var(--icon-prop);
    height: var(--icon-prop);
}

/* View payment field icon end */

/* Login page design starts here */

.login-container{
    width: 100%;
    /* height: 100vh; */
    min-height: 100vh;
    gap: 3em;
}

.login-sub-container{
    width: clamp(35em, 60%, 42em);
    gap: var(--gap4);
    background: var(--componentBg);
    box-shadow: 0px 10px 20px rgb(0 0 0 / 10%);
    border-radius: 15px;
    padding: 2em 3em;
    overflow: hidden;
}

.login-wrapper{
    margin-top: 0;
    gap: 3em;
    transition: .5s;
}

.sliders{
    --sliderWidth: 120px;
    --moveSliderTo: 0;
    gap: var(--gap4);
}

.slider{
    width: var(--sliderWidth);
    padding: .5em .25em;
    background: var(--terBgClr);
    color: var(--priBgClr);
    box-shadow: inset 0px 2px 4px rgb(0 0 0 / 10%);
    cursor: pointer;
    user-select: none;
}

.slider:nth-child(1){
    position: relative;
}

.slider:nth-child(1)::before{
    content: '';
    width: 100%;
    height: 3px;
    background: var(--priBgClr);
    position: absolute;
    top: calc(100% + .5em);
    left: var(--moveSliderTo);
    border-radius: .5em;
    transition: .5s;
    transition-timing-function: cubic-bezier(0.23, 1, 0.32, 1.2);
}

.login-field{
    gap: var(--gap2);
    position: relative;
}

.login-field input{
    padding: 9px 40px 9px 50px;
    border: 1px solid transparent;
    background: var(--terBgClr);
    box-shadow: inset 0px 2px 4px rgba(0,0,0,.08);
    transition: var(--trans);
}

.login-field input:focus{
    border-color: var(--secBgClr);
}

.login-field > svg{
    position: absolute;
    bottom: 7px;
    left: 15px;
    pointer-events: none;
    transition: var(--trans);
}

.login-field button{
    min-height: 37px;
    min-width: 120px;
    transition: var(--trans);
}

.login-field input:focus + svg{
    transform: scale(1.15);
}

.incorrect-cred{
    color: #cf4646;
}

.login-container > img{
    width: clamp(35em, 60%, 42em);
}

.login-container-header{
    gap: 1em;
}

.login-container-header-logo{
    /* --logoWH: 60px; */
    --logoWH: 45px;

    width: var(--logoWH);
    height: var(--logoWH);
}

.login-container-header-logo img{
    width: 100%;
    height: 100%;
    object-fit: contain;
}

.login-container-header-txt{
    font-size: 2.5em;
}

.login-field:has(input){
    position: relative;
    gap: var(--gap1);
}

.login-field:has(input)::before{
    content: '';
    width: 1px;
    height: 24px;
    position: absolute;
    left: 42px;
    bottom: 7px;
    opacity: .35;
    background: var(--secBgClr);
}

.text-align-end{
    text-align: end;
}

.login-sub-wrapper{
    margin-top: 2em;
    gap: var(--gap4);
    min-width: 100%;
}

.login-sub-wrapper.disable-fields{
    cursor: not-allowed;
    pointer-events: none;
}

.toggle-pwd-field{
    position: absolute;
    bottom: 10px;
    right: 10px;
    cursor: pointer;
}

.toggle-pwd-field svg{
    display: none;
}

.toggle-pwd-field.show-dots svg:nth-child(1){
    display: block;
    opacity: 1;
}

.toggle-pwd-field.show-text svg:nth-child(2){
    display: block;
    opacity: 1;
}

/* Login page design ends here */

/* Delete Modal design starts here */

.page-body-modal-wrapper.show-action-popup{
    position: fixed;
    width: 100%;
    height: 100%;
    top: 0;
    left: 0;
    background: rgba(0,0,0,.25);
    backdrop-filter: blur(4px);
    z-index: 4;
}

.show-action-popup .page-body-modal{
    display: block;
    width: 40%;
    min-width: 300px;
    max-width: 400px;
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%) scale(0);
    background: var(--componentBg);
    padding: 1.7em 1.9em 1.8em 1.9em;
    border-radius: 12px;
    box-shadow: 0px 10px 30px rgba(0,0,0,.1);
    animation: scaleIn .25s ease .1s forwards;
}

@keyframes scaleIn{
    to{
        transform: translate(-50%, -50%) scale(1);
    }
}

.modal-title{
    gap: var(--gap2);
}

.modal-title-graphics{
    --prop: 4.4em;
    height: var(--prop);
    width: var(--prop);
    border-radius: 12px;
    border: 1px solid #f1f5f9;
    background-color: #f8fafc;
}

.modal-title-graphics .delete-icon-svg{
    stroke: var(--priBgClr);
    stroke-width: 4;
}

.modal-title p{
    color: var(--secBgClr);
}

/*  */

.log-modal-content{
    color: #64748b;
    margin: 15px 0 20px 0;
}

/*  */

.modal-functions{
    gap: var(--gap4);
    margin-top: 2em;
}

.modal-functions button,
.modal-functions a{
    min-height: 37px;
    min-width: 120px;
    padding: 5px 10px;
    border-radius: 6px;
    letter-spacing: 0.2px;
    background-color: transparent;
}

.modal-functions .pri-close-btn{
    border: 1px solid #e2e8f0;
    color: #475569;
}

.modal-functions .modal-pri-btn{
    color: var(--componentBg);
    background-color: var(--secBgClr);
    position: relative;
}

.sec-close-btn{
    --prop: 16px;
    position: absolute;
    top: 22px;
    right: 17px;
    height: var(--prop);
    width: var(--prop);
    background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' stroke='%2394a3b8' stroke-width='1.1' viewBox='0 0 16 16'%3E%3Cpath d='M2.146 2.854a.5.5 0 1 1 .708-.708L8 7.293l5.146-5.147a.5.5 0 0 1 .708.708L8.707 8l5.147 5.146a.5.5 0 0 1-.708.708L8 8.707l-5.146 5.147a.5.5 0 0 1-.708-.708L7.293 8 2.146 2.854Z'/%3E%3C/svg%3E") center/contain no-repeat;
}

.modal-pri-btn.loading::before{
    --prop: 20px;
    content: "";
    position: absolute;
    height: var(--prop);
    width: var(--prop);
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    background: url("/images/loading.svg") center no-repeat;
}

/* Delete Modal design ends here */

/* View user more info page design starts here */

.relation-tree{
    position: relative;
    margin-top: 2em;
}

.relation-root{
    --pri: #3b82f6;
    --ter: #f0f9ff;
    --shadow: #93c5fd;
}

.branch-one{
    --pri: #0d9488;
    --ter: #f0fdfa;
    --shadow: #a7f3d0;
}

.branch-two{
    --pri: #6366f1;
    --ter: #f2f5ff;
    --shadow: #a5b4fc;
}

.branch-three{
    --pri: #a16207;
    --ter: #fffbeb;
    --shadow: #fef08a;
}

.relation-branches{
    width: 100%;
    margin-top: 10em;
    position: relative;
}

.relation-branches::before{
    content: "";
    position: absolute;
    height: 2px;
    width: 62%;
    border-bottom: 2px dashed #eff0f1;
    bottom: calc(100% + 5em + 1px);
    right: 19%;
}

.relation-root,
.relation-branch{
    gap: var(--gap2);
    min-width: 24em;
    padding: 1em 3em 1em 1em;
    border-radius: 1.2em;
    position: relative;
    background-color: var(--componentBg);
    box-shadow: 0 7px 30px -10px rgba(150,170,180,0.5);
    transition: box-shadow 0.4s ease-in-out;
}

.relation-root{
    z-index: 2;
}

.relation-root::after,
.relation-branch::after{
    content: url("data:image/svg+xml, %3Csvg xmlns='http://www.w3.org/2000/svg' height='1em' fill='%2394a3b8' viewBox='0 0 512 512'%3E%3Cpath d='M502.6 278.6c12.5-12.5 12.5-32.8 0-45.3l-128-128c-12.5-12.5-32.8-12.5-45.3 0s-12.5 32.8 0 45.3L402.7 224 32 224c-17.7 0-32 14.3-32 32s14.3 32 32 32l370.7 0-73.4 73.4c-12.5 12.5-12.5 32.8 0 45.3s32.8 12.5 45.3 0l128-128z'/%3E%3C/svg%3E%0A");
    position: absolute;
    right: 2.8em;
    top: 1.2em;
    transition: right 0.4s ease-in-out;
}

.relation-root:hover::after,
.relation-branch:hover::after{
    right: 2.4em;
}

.relation-root:hover,
.relation-branch:hover{
    box-shadow: 0 7px 30px -10px var(--shadow);
}

.relation-branches .relation-branch::before{
    content: "";            
    position: absolute;
    height: 70%;
    bottom: 100%;
    width: 2px;
    border-right: 2px dashed #eff0f1;
    left: 50%;
    transform: translateX(-50%);
}

.relation-branches .relation-branch:nth-child(2)::before{
    height: 200%;
}

.r-b-graphic{
    --prop: 42px;
    height: var(--prop);
    width: var(--prop);
    border-radius: 1.2em;
    background: var(--ter);
}

.r-b-content h4{
    margin-bottom: 0.2em;
    color: var(--pri);
}

.relation-root h4{
    width: 9em;
    overflow: hidden;
    text-overflow: ellipsis;
}

.r-b-content p{
    color: #475569;
    font-size: 1.4em;
}

/* styles added for payment pages starts here 19/10/24 */

.active-stat,
.in-active-stat{
    width: fit-content;
    padding: 5px;
}

.active-stat{
    color: #3b8b93;
    background: #e5fffa;
}

.in-active-stat{
    color: #8f5259;
    background: #fcf0f2;
}

/* styles added for payment pages ends here 19/10/24 */

@media screen and (max-width: 1100px){
    .relation-tree{
        width: fit-content;
        margin: 0 auto;
        align-items: start;
    }

    .relation-tree::before{
        content: "";            
        position: absolute;
        height: 90%;
        top: 0;
        width: 2px;
        border-right: 2px dashed #e2e8f0;
        left: calc(4em + 1px);
    }

    .relation-branches{
        width: fit-content;
        margin: 4em 0 0 8em;
        flex-direction: column;
        gap: var(--gap5);
        align-items: start;
    }

    .relation-branches::before{
        display: none;
    }

    .relation-branches .relation-branch::before{
        height: 2px;
        width: calc(4em - 5px);
        bottom: 50%;
        right: 100%;
        left: unset;
        transform: unset;
        border-bottom: 2px dashed #e2e8f0;
    }

    .relation-branches .relation-branch:nth-child(2)::before{
        height: 2px;
    }
}

/* View user more info page design ends here */

/* Actual Styles ends here */

@media (max-width: 900px){
    .a-p-s-c-c-form{
        grid-template-columns: 100%;
        overflow: auto;
    }

    .a-p-s-c-c-f-left,
    .a-p-s-c-c-f-right{
        overflow: unset;
        position: unset;
    }

    .a-p-s-c-c-f-single-col{
        width: 98%;
    }

    .a-p-s-c-c-f-right.non-sticky,
    .fields{
        margin: 0 !important;
    }
}

@media (min-width: 700px) and (max-width: 780px){
    .a-p-s-c-pagination{
        justify-content: center;
    }
}

@media (max-width: 700px){
    :root{
        --fntXl: 2.8em;

        --fntMed: 1.4em;
        --fntMed2: 1.6em;
        --fntMed3: 1.8em;

        --fntSml3: 1em;
        --fntSml4: 1.2em;

        --svgXl: 2.3em;
    }

    .ad-panel-container{
        grid-template-columns: unset;
        grid-template-rows: 6em 1fr;
    }

    .ad-panel-container.shrink{
        grid-template-columns: unset;
    }

    .ad-panel-sidebar{
        width: fit-content;
        grid-auto-flow: column;
        justify-self: center;
    }

    .a-p-s-header{
        display: none;
    }

    .a-p-s-header,
    .a-p-s-footer{
        margin: 0;
    }

    .a-p-s-content ul{
        grid-auto-flow: column;
        gap: var(--gap1);
    }

    #toggle-sidebar{
        display: none;
        pointer-events: none;
    }

    .a-p-s-c-pagination button span{
        display: none;
    }

    .a-p-s-c-pagination button{
        padding: 1em;
    }

    .a-p-s-c-pagination button::before,
    .a-p-s-c-pagination button::after{
        top: calc(50% + 1.5px);
        left: 50%;
        right: unset;
        transform: translate(-50%, -50%);
    }

    .a-p-s-c-header-date{
        flex-direction: column;
        align-items: start;
        gap: var(--gap1);
    }
}

@media (max-height: 660px){
    .ad-panel-sub-container{
        min-height: 48em;
    }

    .a-p-s-c-details{
        height: 32em;
    }

    .a-p-s-c-c-form{
        height: 32em;
    }
}

@media (max-width: 600px){
    .a-p-s-c-sub-header{
        row-gap: 1em;
    }

    .a-p-s-c-s-h-cntr-fns{
        order: 2;
        grid-column: 1 / 4;
    }
}

/* Home page styles starts here */

.home-page{
    height: 56em;
    overflow: auto;
    grid-template-columns: calc(100% - 270px) 260px;
    gap: var(--gap2);
}

.h-p-db-content{
    overflow: auto;
    padding-right: 1.5em;
}

.usr-wlcm-wrap{
    margin-bottom: 1.3em;
    padding: 1em;
    background: #f9fbfc;
    position: sticky;
    z-index: var(--stack1);
    top: 0;
}

.u-w-c-txt .logged-user-name{
    text-transform: capitalize;
}

.u-w-c-txt p:nth-child(2){
    margin-top: 4px;
    color: var(--priFntClr);
}

.u-w-c-txt span{
    font-size: 16px;
    color: var(--secBgClr);
}

.recent-section{
    margin-bottom: 1.3em;
    user-select: none;
}

.r-s-title{
    column-gap: var(--gap1);
}

.r-s-title p{
    color: var(--priFntClr);
}

.r-s-title a svg{
    display: block;
}

.slide-tools{
    column-gap: var(--gap2);
}

.slide-tools.negative{
    display: none;
}

.slide-tools button{
    --prop: 23px;
    height: var(--prop);
    width: var(--prop);
    border-radius: 50%;
    position: relative;
}

.slide-left::after,
.slide-right::after{
    --prop: 11px;
    position: absolute;
    height: var(--prop);
    width: var(--prop);
    top: calc(50% - 1px);
    left: calc(50% - 1px);
    transform: translate(-50%, -50%);
}

.slide-left::after{
    content: url("data:image/svg+xml, %3Csvg xmlns='http://www.w3.org/2000/svg' fill='%23fff' height='11' width='11' viewBox='0 0 320 512'%3E%3Cpath d='M9.4 233.4c-12.5 12.5-12.5 32.8 0 45.3l192 192c12.5 12.5 32.8 12.5 45.3 0s12.5-32.8 0-45.3L77.3 256 246.6 86.6c12.5-12.5 12.5-32.8 0-45.3s-32.8-12.5-45.3 0l-192 192z'/%3E%3C/svg%3E");
}

.slide-right::after{
    content: url("data:image/svg+xml, %3Csvg xmlns='http://www.w3.org/2000/svg' fill='%23fff' height='11' width='11' viewBox='0 0 320 512'%3E%3Cpath d='M310.6 233.4c12.5 12.5 12.5 32.8 0 45.3l-192 192c-12.5 12.5-32.8 12.5-45.3 0s-12.5-32.8 0-45.3L242.7 256 73.4 86.6c-12.5-12.5-12.5-32.8 0-45.3s32.8-12.5 45.3 0l192 192z'/%3E%3C/svg%3E");
}

.recent-items{
    gap: var(--gap3);
    padding: 1.8em 1em 1em 1em;
    overflow: hidden;
    scroll-behavior: smooth;
}

.recent-item{
    padding: 1em;
    background: var(--terBgClr);
}

.zone-container{
    height: 25.5em;
    border: 1px solid rgba(0, 0, 0, 0.05);
    margin-bottom: 1em;
}

.z-c-head,
.user-events-title{
    padding: 0.8em 1em;
    gap: var(--gap1);
    border-bottom: 1px solid rgba(0, 0, 0, 0.05);
    position: sticky;
    top: 0;
}

.z-c-head svg{
    margin-right: 0.25em;
}

.zones{
    height: 21em;
    padding: 1em;
    overflow: auto;
    user-select: none;
}

.h-p-sidebar-content{
    height: 56em;
}

.user-events-container{
    height: calc(100% - calc(25.5em + 1em));
    border: 1px solid rgba(0, 0, 0, 0.05);
}

.user-events{
    height: calc(100% - 4.2em);
    overflow: auto;
}

.user-events ul{
    height: 100%;
    overflow-y: auto;
}

.user-events ul li{
    width: calc(100% - 35px);
    margin: 0 10px 0 auto;
    padding: 7px 0;
    color: #495057;
    position: relative;
    border-bottom: 2px dotted rgba(0, 0, 0, 0.095);
}

.user-events ul li::before{
    content: "";
    height: 100%;
    width: 2px;
    position: absolute;
    top: 21px;
    right: calc(100% + 12.5px);
    background: var(--terBgClr);
}

.user-events ul li::after{
    content: "";
    --prop: 7px;
    height: var(--prop);
    width: var(--prop);
    border-radius: 50%;
    position: absolute;
    top: 14px;
    right: calc(100% + 10px);
    background: var(--secBgClr);
    box-shadow: 0 0 3px var(--secBgClr);
}

.user-events ul li:last-child::before{
    height: calc(100% - 21px);
}

.user-events ul li a {
    color: var(--secBgClr);
}

/* school Home page new styles starts here */

.school-details-card{
    margin-bottom: 1em;
    padding: 0.5em 0.5em 1.2em 0.5em;
    border-bottom: 1px solid var(--terBgClr);
}

.school-graphics{
    --prop: 40px;
    height: var(--prop);
    width: var(--prop);
}

.school-graphics img{
    --prop: 100%;
    height: var(--prop);
    width: var(--prop);
    object-fit: contain;
}

.school-details h3,
.school-details p{
    width: 150px;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.school-details h3{
    color: #475569;
}

.school-details p{
    color: #64748b;
}

.school-tchrs-card{
    padding: 0 0.5em;
}

.school-tchrs-card h2{
    color: #64748b;
}

.school-tchrs-card .add-tchr{
    padding: 0.2em 1.1em 0.3em 1.1em;
    border-radius: 0.5em;
    color: #FFF;
    background-color: var(--secBgClr);
}

.tchrs-acnt-cont{
    --layout-height: 8em;
    height: var(--layout-height);
    margin-top: 1.5em;
    position: relative;
    overflow: hidden;
}

.tchrs-vcnt-seats{
    height: var(--layout-height);
    width: calc(var(--layout-height) * 2);
    border-top-left-radius: 100px;
    border-top-right-radius: 100px;
    background: transparent;
    border: 15px solid #f1f5f9;
    border-bottom: 0;
    position: absolute;
    top: 0;
    left: 50%;
    transform: translateX(-50%);
}

.tchrs-filled-seats{
    position: absolute;
    left: 50%;
    top: 0;
    transform: translateX(-50%) rotate(0deg);
    height: calc(var(--layout-height) * 2);
    width: calc(var(--layout-height) * 2);
    border-radius: 50%;
    background: transparent;
    border: 15px solid  var(--secBgClr);
    border-color: transparent transparent var(--secBgClr) var(--secBgClr);
    z-index: 1;
    transition: transform 0.3s ease;
}

.tchrs-seats-details{
    height: 4em;
    width: 8em;
    position: absolute;
    bottom: 0;
    left: 50%;
    transform: translateX(-50%);
    z-index: 1;
}

.tchrs-seats-details h6{
    color: #94a3b8;
    margin-bottom: 2px;
    text-align: center;
}

.tchrs-seats-details a{
    padding-bottom: 5px;
    margin-left: 10px;
}

.tchrs-seats-details h6 span{
    color: var(--priBgClr);
    font-size: 18px;
}

.view-tchrs{
    color: #64748b;
    position: relative;
}

.view-tchrs::before{
    content: url("data:image/svg+xml, %3Csvg xmlns='http://www.w3.org/2000/svg' height='11' width='11' fill='%2364748b' viewBox='0 0 512 512'%3E%3Cpath d='M320 0c-17.7 0-32 14.3-32 32s14.3 32 32 32h82.7L201.4 265.4c-12.5 12.5-12.5 32.8 0 45.3s32.8 12.5 45.3 0L448 109.3V192c0 17.7 14.3 32 32 32s32-14.3 32-32V32c0-17.7-14.3-32-32-32H320zM80 32C35.8 32 0 67.8 0 112v320c0 44.2 35.8 80 80 80h320c44.2 0 80-35.8 80-80V320c0-17.7-14.3-32-32-32s-32 14.3-32 32v112c0 8.8-7.2 16-16 16H80c-8.8 0-16-7.2-16-16V112c0-8.8 7.2-16 16-16h112c17.7 0 32-14.3 32-32s-14.3-32-32-32H80z'/%3E%3C/svg%3E%0A");
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
    right: 12px;
    left: calc(100% + 6px);
}

.school-data-card{
    padding: 1.2em;
    box-shadow: rgba(0, 0, 0, 0.05) 0px 0px 0px 1px;
    gap: var(--gap2);
}

.school-data-card h4{
    margin-bottom: 0.2em;
    color: #334155;
}

.school-data-card h6{
    color: var(--clr-500);
}

.s-d-c-graphics{
    --prop: 4em;
    height: var(--prop);
    width: var(--prop);
    border-radius: 50%;
    background-color: var(--clr-50);
    margin-left: 2em;
    position: relative;
    box-shadow: var(--clr-300) -10px 0px, var(--clr-500) -20px 0px;
}

.s-d-c-one{
    --clr-50: #eff6ff;
    --clr-300: #93c5fd;
    --clr-500: #3b82f6;
}

.s-d-c-two{
    --clr-50: #f0fdfa;
    --clr-300: #6ee7b7;
    --clr-500: #14b8a6;
}

.s-d-c-three{
    --clr-50: #eef2ff;
    --clr-300: #a5b4fc;
    --clr-500: #6366f1;
}

.s-d-c-four{
    --clr-50: #fffbeb;
    --clr-300: #fcd34d;
    --clr-500: #ca8a04;
}

.tchr-act-card{
    min-width: 25em;
    padding: 1.2em;
    box-shadow: rgba(17, 17, 26, 0.05) 0px 1px 0px, rgba(17, 17, 26, 0.1) 0px 0px 8px;
    position: relative;
    overflow: hidden;
}

.tchr-act-card.tchr-in-active{
    --status-clr-400: #f87171;
    --status-clr-500: #ef4444;
}

.tchr-act-card.tchr-active{
    --status-clr-400: #34d399;
    --status-clr-500: #10b981;
}

.t-a-i-graphics{
    --prop: 3.8em;
    height: var(--prop);
    width: var(--prop);
    border-radius: 50%;
    position: relative;
    border: double 2px transparent;
    background-image: linear-gradient(white, white), radial-gradient(circle at top left, var(--status-clr-400) 0%, white 80%);
    background-origin: border-box;
    background-clip: content-box, border-box;
}

.t-a-i-graphics::before{
    content: "";
    --prop: 0.8em;
    height: var(--prop);
    width: var(--prop);
    border-radius: 50%;
    position: absolute;
    top: 0;
    right: calc(100% - calc(var(--prop) ));
    background-color: var(--status-clr-500);
    box-shadow: 0px 0px 2px 2px #FFF;
}

.tchr-acnt-info{
    margin-bottom: 1em;
    padding-bottom: 0.8em;
    border-bottom: 1px solid var(--terBgClr);
}

.tchr-acnt-info h2{
    width: 9em;
    text-overflow: ellipsis;
    overflow: hidden;
    white-space: nowrap;
}

.tchr-log-info{
    position: relative;
}

.tchr-log-info::before{
    content: "";
    position: absolute;
    height: 90%;
    width: 2px;
    top: 5%;
    left: calc(50% - 1px);
    transform: translateX(-50%);
    background-color: #f1f5f9;
}

.tchr-log{
    width: 46%;
}

.tchr-log h4{
    margin-bottom: 3px;
    color: #475569;
}

.tchr-log h3{
    color: #475569;
}

.school-act-items{
    display: grid;
    grid-template-columns: repeat(2, 24em);
}

.tchr-new-tag{
    position: absolute;
    height: 1.8em;
    width: 6em;
    color: #fff;
    background: linear-gradient(to right, #4c65a0, #6d91c4);
    position: absolute;
    left: calc(100% - 4.5em);
    bottom: 0.5em;
    font-size: 12px;
    transform: rotate(-45deg);
    box-shadow: 0px 5px 10px rgb(0 0 0 / 15%);
}

.tchr-new-tag span{
    padding-left: 4px;
    font-size: 11px;
}

.mod-graphics{
    margin-bottom: 0.5em;
}

.mod-sub-content{
    margin: 1em 0 1.5em 0;
}

.mod-content .mb-1{
    margin-bottom: 1em;
}

.mod-sub-content p{
    color: #475569;
}

.mod-sub-content p:not(:first-child){
    margin-top: 5px;
}

.mod-upgrade{
    width: 100%;
    padding: 1em 0.7em;
    border-radius: 7px;
    color: #475569;
    background-color: #f8fafc;
    box-shadow: rgba(0, 0, 0, 0.05) 0px 0px 0px 1px;
}

.mod-upgrade span{
    color: #3c76f4;
}  

.modal-content-warning{
    color: #b74646 !important;
    border-radius: 0.6em;
} 

@media screen and (max-width: 900px){
    .school-details-card{
        border: none;
    }

    .school-tchrs-card{
        min-width: 250px;
        padding-left: 1em;
        border-left: 1px solid var(--terBgClr);
    }
}

/* school Home page new styles ends here */

/* extra design starts */

.empty-items{
    width: 100%;
    padding: 1em 2em;
    background: #f9fbfc;
}

.table-empty-msg{
    height: 100%;
    gap: var(--gap4);
}

.table-empty-msg a{
    gap: var(--gap1);
}

.table-empty-msg p{
    animation: grow 0.7s ease forwards;
}

.table-empty-msg .table-empty-data-graphics{
    fill: var(--secBgClr);
}

@keyframes grow{
    from { 
        transform: scale(0.5); 
    }
    to {
        transform: scale(1);
    }
}

.x-scrollable.grab-active{
    cursor: grab;
    cursor: -webkit-grab;
}

/* extra design ends */

/* Home page styles ends here */

/* Teachers page extra styles starts here */

.tchr-status svg{
    display: block;
    margin: 0 auto;
}

.tchr-status.tchr-active svg{
    fill: #0d9488;
}

.tchr-status.tchr-inactive svg{
    fill: #e11d48;
}

/* Teachers page extra styles ends here */

/* Profile page extra styles ends here */

.profile-due-timeline{
    height: 3.5em;
    width: fit-content;
    padding: 0 1em;
    box-shadow: rgba(0, 0, 0, 0.05) 0px 0px 0px 1px;
}

.timeline-graphics{
    --prop: 2.4em;
    height: var(--prop);
    width: var(--prop);
    background-color: var(--secBgClr);
    box-shadow: 0 0 3px 3px #e4ecf5;
}

.timeline-graphics svg{
    fill: #FFF;
}

.profile-due-timeline p{
    color: #475569;
}

.profile-due-timeline p span{
    color: var(--secBgClr);
}

.hide-field{
    display: none;
}

/* Profile page extra styles ends here */

@media (max-width: 900px){
    .home-page{
        grid-template-columns: 100%;
    }

    .h-p-db-content{
        overflow: unset;
    }

    .zone-container{
        height: fit-content;
    }

    .zones{
        display: flex;
        justify-content: space-between;
        overflow-x: auto;
        height: fit-content;
    }
}

@media (max-height: 660px){
    .home-page{
        height: 45em;
    }

    .h-p-sidebar-content{
        height: 45em;
    }
}

/* adding copy functionality in table starts */

.a-p-s-c-details table tbody td[data-copy]{
    position: relative;
}

/* adding copy functionality in table ends */

/* today notifications page design starts here */

.today-notifications{
    padding: 1em 1em 1em 0;
    position: relative;
}

.today-notification{
    width: calc(100% - 4.5em);
    margin: 0 0.5em 1.5em auto;
    border: 1px solid rgba(0, 0, 0, 0.065);
}

.today-notifications::before{
    content: "";
    position: absolute;
    top: 1em;
    left: calc(2em - 1px);
    height: calc(100% - 2em);
    width: 2px;
    background: var(--terBgClr);
}

.today-notification .t-n-title{
    cursor: pointer;
    user-select: none;
    padding: 0.7em 1em 0.8em 1em;
    position: relative;
}

.today-notification .t-n-title p{
    position: relative;
    padding-right: 18px;
    color: #495057;
}

.today-notification .t-n-title p a{
    color: var(--secBgClr);
}

.today-notification .t-n-title p::before{
    content: url("data:image/svg+xml, %3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 512 512' fill='%236c757d'%3E%3Cpath d='M233.4 406.6c12.5 12.5 32.8 12.5 45.3 0l192-192c12.5-12.5 12.5-32.8 0-45.3s-32.8-12.5-45.3 0L256 338.7 86.6 169.4c-12.5-12.5-32.8-12.5-45.3 0s-12.5 32.8 0 45.3l192 192z'/%3E%3C/svg%3E");
    width: 14px;
    position: absolute;
    top: 50%;
    right: 0;
    transform: translateY(-50%) rotate(0deg);
    transition: transform 0.3s ease-in-out;
}

.today-notification.details-open .t-n-title p::before{
    transform: translateY(-50%) rotate(-180deg);
}

.today-notification .t-n-title::after{
    content: "";
    position: absolute;
    top: 1.2em;
    height: 10px;
    width: 10px;
    border-radius: 50%;
    background: var(--secBgClr);
    right: calc(100% + 2em - 4px);
    box-shadow: 0 0 4px var(--secBgClr);
}

.today-notification.details-open .t-n-title::after{
    animation: boom 1.8s infinite;
}

@keyframes boom {
    0% {
        box-shadow: 0 0 0 0 rgba(var(--secRgb), 0.4);
    }
    70% {
        box-shadow: 0 0 0 8px rgba(var(--secRgb), 0);
    }
    100% {
        box-shadow: 0 0 0 0 rgba(var(--secRgb), 0);
    }
}

.today-notification .t-n-title::before {
    content: '';
    --prop: 10px;
    height: var(--prop);
    width: var(--prop);
    position: absolute;
    background-color: var(--componentBg);
    top: 11px;
    right: calc(100% - calc(var(--prop) / 2));
    border-top: solid 1px #e3e7e0;
    border-left: solid 1px #e3e7e0;
    transform: rotate(-45deg);
}

.t-n-details{
    display: none;
    overflow-x: auto;
}

.today-notification.details-open .t-n-details{
    display: block;
}

/* today notifications page design ends here */

.a-p-s-c-form-fns .form-note{
    position: absolute;
    top: 90%;
    right: 0;
    color: #b91c1c;
}

@media screen and (max-width: 700px){
    .a-p-s-c-form-fns .form-note{
        top: 100%;
    }
}

/* Row selectors styles starts */

.selected-row{
    background-color: var(--terBgClr);
    box-shadow: inset 0px 2px 4px rgb(0 0 0 / 10%);
}

table tr .row-selector{
    cursor: pointer;
    accent-color: var(--secBgClr);
}

/* Row selectors styles ends */

/* Password eye button styles starts */

.password-eye-btn{
    --prop: 20px;
    height: var(--prop);
    width: var(--prop);
    position: absolute;
    bottom: 5px;
    right: 7px;
    background-color: transparent;
}

.password-eye-btn::before{
    content: url("data:image/svg+xml, %3Csvg xmlns='http://www.w3.org/2000/svg' height='16' fill='%23475569' viewBox='0 0 576 512'%3E%3Cpath d='M288 80c-65.2 0-118.8 29.6-159.9 67.7C89.6 183.5 63 226 49.4 256 63 286 89.6 328.5 128 364.3c41.2 38.1 94.8 67.7 160 67.7s118.8-29.6 159.9-67.7C486.4 328.5 513 286 526.6 256c-13.6-30-40.2-72.5-78.6-108.3C406.8 109.6 353.2 80 288 80zM95.4 112.6C142.5 68.8 207.2 32 288 32s145.5 36.8 192.6 80.6c46.8 43.5 78.1 95.4 93 131.1 3.3 7.9 3.3 16.7 0 24.6-14.9 35.7-46.2 87.7-93 131.1C433.5 443.2 368.8 480 288 480s-145.5-36.8-192.6-80.6C48.6 356 17.3 304 2.5 268.3c-3.3-7.9-3.3-16.7 0-24.6C17.3 208 48.6 156 95.4 112.6zM288 336c44.2 0 80-35.8 80-80s-35.8-80-80-80h-2c1.3 5.1 2 10.5 2 16 0 35.3-28.7 64-64 64-5.5 0-10.9-.7-16-2v2c0 44.2 35.8 80 80 80zm0-208a128 128 0 1 1 0 256 128 128 0 1 1 0-256z'/%3E%3C/svg%3E");
    position: absolute;
    top: 0;
    left: 0;
}

.password-eye-btn.eye-opened::before{
    content: url("data:image/svg+xml, %3Csvg xmlns='http://www.w3.org/2000/svg' height='16' fill='%23475569' viewBox='0 0 640 512'%3E%3Cpath d='M38.8 5.1C28.4-3.1 13.3-1.2 5.1 9.2S-1.2 34.7 9.2 42.9l592 464c10.4 8.2 25.5 6.3 33.7-4.1s6.3-25.5-4.1-33.7L525.6 386.7c39.6-40.6 66.4-86.1 79.9-118.4c3.3-7.9 3.3-16.7 0-24.6c-14.9-35.7-46.2-87.7-93-131.1C465.5 68.8 400.8 32 320 32c-68.2 0-125 26.3-169.3 60.8L38.8 5.1zm151 118.3C226 97.7 269.5 80 320 80c65.2 0 118.8 29.6 159.9 67.7C518.4 183.5 545 226 558.6 256c-12.6 28-36.6 66.8-70.9 100.9l-53.8-42.2c9.1-17.6 14.2-37.5 14.2-58.7c0-70.7-57.3-128-128-128c-32.2 0-61.7 11.9-84.2 31.5l-46.1-36.1zM394.9 284.2l-81.5-63.9c4.2-8.5 6.6-18.2 6.6-28.3c0-5.5-.7-10.9-2-16c.7 0 1.3 0 2 0c44.2 0 80 35.8 80 80c0 9.9-1.8 19.4-5.1 28.2zm9.4 130.3C378.8 425.4 350.7 432 320 432c-65.2 0-118.8-29.6-159.9-67.7C121.6 328.5 95 286 81.4 256c8.3-18.4 21.5-41.5 39.4-64.8L83.1 161.5C60.3 191.2 44 220.8 34.5 243.7c-3.3 7.9-3.3 16.7 0 24.6c14.9 35.7 46.2 87.7 93 131.1C174.5 443.2 239.2 480 320 480c47.8 0 89.9-12.9 126.2-32.5l-41.9-33zM192 256c0 70.7 57.3 128 128 128c13.3 0 26.1-2 38.2-5.8L302 334c-23.5-5.4-43.1-21.2-53.7-42.3l-56.1-44.2c-.2 2.8-.3 5.6-.3 8.5z'/%3E%3C/svg%3E%0A");
}

/* Password eye button styles ends */

.account-type svg{
    display: block;
    margin: 0 auto;
}

/* Newly Added Common styles starts here */

.gap-1{
    gap: var(--gap1);
}

.gap-2{
    gap: var(--gap2);
}

.gap-3{
    gap: var(--gap3);
}

.gap-4{
    gap: var(--gap4);
}

.gap-5{
    gap: var(--gap5);
}

.disp-block{
    display: block;
}

.txt-left{
    text-align: left;
}

/* Newly Added Common styles ends here */

/* New sidebar styles starts here */

.a-p-s-tab #logout-btn{
    grid-template-columns: 2.5em 1fr;
    gap: var(--gap1);
    padding: 1em;
    position: relative;
}

.ad-panel-sidebar #toggle-sidebar{
    --btnWH: 2.2em;
    padding: .35em;
    position: absolute;
    top: 50%;
    left: calc(100% - calc(var(--btnWH) / 2));
    transform: translateY(-50%);
    background: var(--secBgClr);
    box-shadow: 0px 10px 20px rgba(0, 0, 0, .25);
}

.ad-panel-sidebar #toggle-sidebar svg{
    fill: var(--componentBg);
    transition: var(--trans);
    transition-delay: calc(var(--trans) - .1);
}

/* classes added via javascript starts here */
.ad-panel-container:not(.shrink) .ad-panel-sidebar #toggle-sidebar svg{
    transform: rotate(180deg);
}

#logout-btn{
    width: 100%;
    background-color: transparent;
}

#logout-btn span{
    color: var(--priBgClr)
}

.shrink .a-p-s-tab #logout-btn{
    grid-template-columns: unset;
    justify-content: center;
}

/* New sidebar styles ends here */

/* loading button styles starts here */

.loading-pri-btn{
    min-height: 3.8em;
    min-width: 13em;
    border-radius: 0.6em;
    position: relative;
}

.btn.loading::before{
    --prop: 20px;
    content: "";
    position: absolute;
    height: var(--prop);
    width: var(--prop);
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    background: url("/images/loading.svg") center no-repeat;
}

/* loading button styles ends here */

.more-empty-msg{
    width: 100%;
}

.more-empty-msg .light-text{
    color: #64748b;
}

.go-back-btn{
    min-height: 3.8em;
    min-width: 13em;
    border-radius: 0.6em;
    background-color: var(--secBgClr);
    box-shadow: 0px 10px 15px rgb(0 0 0 / 10%);
}

.go-back-btn span{
    color: #FFF;
}

.flex-wrap{
    flex-wrap: wrap;
}

.diagram-icon{
    transform: rotate(90deg);
}

@media screen and (max-width: 805px){
    .flexible-search{
        margin: 0.5em auto 0 auto;
    }
}