:root{
    --pri-color:#0f6c11;
    --pri-l2-color:#a3eba4;
    --sec-color:#505050;
    --icon-color: #ffffff;
    --border-color-1: #cbcbcb;
    --border-color-2: #bcbcbc;
    --border-color-3: #e8e8e8;
    --smoke-color-1: #f5f5f5;
    --smoke-color-2: #f6f6f6;
    --smoke-color-3: #ede1d3;
    --smoke-color-4: #e0e0e0;
    --smoke-color-5: #dedede;
    --smoke-color-6: #d9d9d9;
    --smoke-color-7: #f1f1f1;
    --smoke-color-8: #fefefe;
    --smoke-color-9: #b4b4b4;
    --smoke-color-10: #fff2e1;
    --success-color-1: #00d100;
	--white-color: #ffffff;
    --grey-color: grey;
    --dark-grey : #333;
    --black-color: #000000;
    --error-color: red;
    --transparent: rgba(255, 255, 255, 0);
    --radius-20: 20px;
    --lato-font: 'Lato', sans-serif;
	--montserrat-font: 'Montserrat', sans-serif;
    --urdu-font: 'UrduFont', 'sans-serif';
    --sindhi-font: 'SindhiFont', 'sans-serif';
    --arabic-font: 'ArabicFont', 'sans-serif';
    --ubunto-font: 'Rubik', sans-serif;
    /* --primary-radial-1: radial-gradient(ellipse at 30% 30%,#ffc479 0%,#0f6c11 50%,#d37802 100%); */
    --primary-radial-1: radial-gradient(circle, rgb(118, 225, 112) 0%, rgba(24, 135, 25,1) 50%, rgba(11, 97, 12,1) 100%);
    --primary-radial-2: radial-gradient(circle, rgb(70, 221, 88) 0%, rgb(1, 194, 10) 100%);
    --correct-radial-1: radial-gradient(ellipse at 91% 61%,#63b061 0%,#279124 63%,#047e00 100%);
    --correct-radial-2: radial-gradient(circle, rgba(99,176,97,1) 0%, rgba(4,126,0,1) 100%);
    --error-radial-2: radial-gradient(circle, rgba(230,68,68,1) 0%, rgba(217,0,0,1) 100%);
    --primary-linear: linear-gradient(90deg, #78f07a 0%, #054f06 100%);
    --pending-linear: linear-gradient(90deg, rgba(248,211,60,1) 0%, rgba(240,150,35,1) 100%);
    --blue-linear: linear-gradient(90deg, rgba(13,130,140,1) 0%, rgba(101,190,198,1) 100%);
    --green-linear: linear-gradient(90deg, rgba(103,228,115,1) 0%, rgba(24,140,44,1) 100%);
    --grey-linear: linear-gradient(90deg, rgba(113,112,112,1) 0%, rgba(80,80,80,1) 100%);
    --black-linear: linear-gradient(to right, #2e2e2e, #5a5a5a 45%);
    --smoke-linear-1: linear-gradient(180deg, rgb(255 255 255) 0%, rgba(255,255,255,0) 0%, rgba(255,255,255,1) 100%);
    --overlay-1 : linear-gradient(0deg, rgba(255,255,255,0.7) 25%, rgba(255,255,255,0) 100%);
    --card-shadow-1: 0 4px 8px 0 rgb(0 0 0 / 5%), 0 6px 20px 0 rgb(0 0 0 / 5%);
    --card-shadow-2: 0 5px 10px rgb(0 0 0 / 15%);
    --card-shadow-3: 0 4px 8px 0 rgb(0 0 0 / 1%), 0 6px 20px 0 rgb(0 0 0 / 1%);
    --card-shadow-4: 0 2px 5px rgb(0 0 0 / 10%);
    --card-shadow-5: rgb(60 64 67 / 30%) 0px 1px 2px 0px, rgb(60 64 67 / 15%) 0px 2px 6px 2px;
    --card-shadow-6: 0 3px 6px 0 rgb(0 0 0 / 6%), 0 5px 10px 0 rgb(0 0 0 / 5%);
    --card-shadow-7: rgb(100 100 111 / 20%) 0px 7px 10px 0px;
    --card-shadow-8: rgb(60 64 67 / 30%) 0px 1px 2px 0px, rgb(60 64 67 / 15%) 0px 2px 6px 2px;
    --card-shadow-9: 0 4px 8px 0 rgb(0 0 0 / 8%), 0 6px 20px 0 rgb(0 0 0 / 8%);
    --card-shadow-10: rgba(0, 0, 0, 0.15) 0px 2px 5px 2px;
    --pri-box-shadow-1: 0 4px 8px 0 rgb(15 108 17 / 10%), 0 6px 25px 0 rgb(15 108 17 / 25%);
    --pri-box-shadow-2: 0 4px 8px 0 rgb(15 108 17 / 25%), 0 6px 20px 0 rgb(15 108 17 / 25%);
    --pri-box-shadow-3: 0 2px 5px #7bcc81;
    --pri-box-shadow-4: 0 4px 5px 0 rgb(15 108 17 / 25%), 0 3px 8px 0 rgb(15 108 17 / 50%);
    --btn-shadow-1: 0 4px 8px 0 #247f8640, 0 6px 20px 0 #81b4b940;
    --btn-shadow-2: 0 4px 8px 0 rgb(194 194 194 / 25%), 0 6px 20px 0 rgb(79 79 79 / 25%);
    --header-shadow-1: 0 4px 8px 0 rgb(0 0 0 / 5%), 0 6px 20px 0 rgb(0 0 0 / 5%);
    --header-shadow-2: 0px 3px 10px rgb(0 0 0 / 10%);
    --footer-shadow: 0 -5px 10px rgb(0 0 0 / 7%);
    --white-shadow-1: rgb(255 255 255 / 30%) 0px 1px 2px 0px, rgb(255 255 255 / 15%) 0px 2px 6px 2px;
}
@font-face {
    font-family: 'UrduFont';
    src: url(fonts/mehr.woff2);
    font-weight: normal;
    font-style: normal;
}

@font-face {
    font-family: 'ArabicFont';
    src: url(fonts/arabic.woff2);
    font-weight: normal;
    font-style: normal;
}

@font-face {
    font-family: 'SindhiFont';
    src: url(fonts/sindhi.woff2);
    font-weight: normal;
    font-style: normal;
}

@font-face {
    font-family: 'BebasNeueRegular';
    src: url('fonts/BebasNeue-Regular.woff');
    font-weight: normal;
    font-style: normal;
}

/*__START: CSS RESETTER __*/
* {
    color: var(--sec-color);
    font-family: var(--lato-font);
    outline: none;
    position: relative;
}
html, body, div, span, applet, object, iframe,
h1, h2, h3, h4, h5, h6, p, blockquote, pre,
a, abbr, acronym, address, big, cite, code,
del, dfn, em, img, ins, kbd, q, s, samp,
small, strike, strong, sub, sup, tt, var,
b, u, i, center,
dl, dt, dd, ol, ul, li,
fieldset, form, label, legend,
table, caption, tbody, tfoot, thead, tr, th, td,
article, aside, canvas, details, embed, 
figure, figcaption, footer, header, hgroup, 
menu, nav, output, ruby, section, summary,
time, mark, audio, video {
	margin: 0;
	padding: 0;
	border: 0;
	font-size: 100%;
	font: inherit;
	vertical-align: baseline;
	text-decoration: none;
}
article, aside, details, figcaption, figure, 
footer, header, hgroup, menu, nav, section {
	display: block;
}
body{
    line-height: 1;
    width: 100%;
	overflow-x: hidden;
	min-height: 100vh;
	background-color: var(--smoke-color-1);
    -ms-overflow-style:none;
    font-family: var(--lato-font);
}
ol, ul {
	list-style: none;
}
blockquote, q {
	quotes: none;
}
blockquote:before, blockquote:after,
q:before, q:after {
	content: '';
	content: none;
}
table {
	border-collapse: collapse;
	border-spacing: 0;
}
.table {
    margin-bottom: 0px;
}
input:focus {
    border: none;
}
input:-webkit-autofill {
    background-color: var(--transparent);
}
strong, .strong {
    font-weight: 700;
}
/*__END: CSS RESETTER __*/























/*__START: OLD GLOBAL CSS __*/
a, a:hover, .fa-light, .eye>.fa-eye, ul.selection-list li.active, .input-div.focus>div>h5,.inputphone.focus>div>h5, .sub-header .breadcrums a, .offcanvas-header button, .footer-next-prev .nav-item.active i, .footer-next-prev .nav-item.active p, .ques-det-wrapper .box>div>i, .ques-det-wrapper .box p:last-child, blockquote:before, blockquote:after, .box .content-wrapper .itop, .box .content-wrapper .ibottom, .p-one-two-ubunto-i500 a, .pri-c, .focus .pri-c {
    color: var(--pri-color);
}
.sub-header .breadcrums span, .btn, .btn-login, .btn-login .fa-arrow-right-long, .offcanvas-header .fa-solid, .model-button button, .box-grid .subject p, .accordion .accordion-button, .sub-header>.class-wrapper>p, .g-opt-col-1>span, .correct-only .g-opt-col-1, .correct-only .g-opt-col-1 *, .correct-only .g-opt-col-2, .correct-only .g-opt-col-2 *, .search-pill.active, .btn-login:disabled,.btn-search:disabled, .btn-search, .sub-header button:nth-of-type(1):active, .box .content-wrapper p.bottom a,.box .content-wrapper .bottom i, .box .content-wrapper .top, .box .content-wrapper .bottom, .btn:hover, :not(.btn-check)+.btn:active, .btn-login span, .btn-login:hover span, .loaderCol, .wa-login i,.sms-login i, .uname p, .repeat-slider .slide-items>.card-box-style a, .repeat-slider .slide-items>.card-box-style p, .related-div .row, .list .box.box .top span, .box .content-wrapper .bl, .box .content-wrapper .br, .w-c, .repeat-head {
    color: var(--white-color);
}
.select-btn-arrow i.fa-solid, .strike, .input-div>div>h5,.inputphone>div>h5, .eye>.fa-eye-slash, .light-placeholder::placeholder, .search-input::placeholder, .smoke-1-c {
    color: var(--border-color-2);
}
.strike>span, .fixed-bottom p, .input-div>div>input,.inputphone .iti input, .select-btn-add, .login_head, .sub-header button:nth-of-type(2), .offcanvas-title, .ques-det-wrapper .box>div>i::after, .btn-edit, .btn-edit:hover, .answer-wrapper>.repeat-head, .box>i {
    color: var(--sec-color);
}
.input-div.focus.error>div>h5,.inputphone.focus.error>div>h5, .input-div.error .i i, .input-div .inputerror, .inputphone .inputerror, .src-error {
    color: var(--error-color);
}
.sub-header .breadcrums i, .footer-next-prev .nav-item i, .footer-next-prev .nav-item p {
    color: var(--icon-color);
}
.footer-next-prev .nav-item.disabled p, .footer-next-prev .nav-item.disabled i, .p-one-two-ubunto-i500 span {
    color: var(--grey-color);
}
blockquote, .p-three-five-montserrat-400, .read-btn {
    color: var(--dark-grey);
}
.wrapor .card-box-style span {
    color: var(--smoke-color-1);
}
.slick-prev i, .slick-next i {
	color: var(--smoke-color-8);
}
.inputphone .iti input::placeholder, p.skeleton.skel-p, .slick-prev, .slick-next {
    color: var(--transparent);
}
u {
    text-decoration: var(--sec-color) solid underline;
}
em {
    font-style: italic;
}
p,span,button{
    font-family: var(--lato-font);
}
a {
    text-align: right;
    text-decoration: none;
    font-size: 0.8rem;
    transition: .3s;
}
.row>* {
    padding-left: 16px;
    padding-right: 16px;
}
.accordion-item {
    overflow: hidden;
}
ul.iti__country-list {
    z-index: 3;
}
*:has(.ppt-0) {
    padding-top: 0px !important;
}
*:has(.ppb-0) {
    padding-bottom: 0px !important;
}
del, strike {
    text-decoration: line-through !important;
}
/*__END: OLD GLOBAL CSS __*/











/*__START: GLOBAL CLASSES CSS __*/
.page-loader:before {
    content: "";
    background-color: var(--white-color);
    width: 100%;
    height: 100%;
    position: absolute;
    top: 0;
    left: 0;
    z-index: 1000;
}
.centering {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%,-50%);
}
.center-spin {
    animation-name: cnspin;
    animation-duration: 5000ms;
    animation-iteration-count: infinite;
    animation-timing-function: linear; 
}
@keyframes cnspin {
    from {
        transform:translate(-50%,-50%) rotate(0deg);
    }
    to {
        transform:translate(-50%,-50%) rotate(360deg);
    }
}
.spin {
    animation-name: spin;
    animation-duration: 5000ms;
    animation-iteration-count: infinite;
    animation-timing-function: linear; 
}
@keyframes spin {
    from {
        transform:rotate(0deg);
    }
    to {
        transform:rotate(360deg);
    }
}
.strike {
    display: block;
    text-align: center;
    overflow: hidden;
    white-space: nowrap;
    font-family: 'Poppins', sans-serif;
    font-weight: 300;
}
.strike>span {
    position: relative;
    display: inline-block;
}
.strike>span:before,
.strike>span:after {
    content: "";
    position: absolute;
    top: 50%;
    width: 100%;
    height: 0.5px;
    background: var(--sec-color);
}
.strike>span:before {
    right: 100%;
    margin-right: 10px;
}
.strike>span:after {
    left: 100%;
    margin-left: 10px;
}
.social{
    gap: 0.8rem;
}
.fixed-bottom{
    position:absolute;
    bottom: 20px;
    left:50%;
    transform: translateX(-50%);
}
.fixed-bottom p{
    font-family: var(--lato-font);
}
.fixed-bottom p a{
    display: inline;
    font-size: 1rem;
}
.carousel-inner {
    overflow: unset;
}
.carousel-inner .carousel-item {
    transition: -webkit-transform 0.2s ease;
    transition: transform 0.2s ease;
    transition: transform 0.2s ease, -webkit-transform 0.2s ease;
}
.flex-no-wrap{
    display: flex;
    flex-wrap: nowrap;
    justify-content: center;
}
.ellipsis {
    text-overflow: ellipsis;
    white-space: nowrap;
    overflow: hidden;
}
ul.selection-list li {
    font-size: 1.1rem;
    text-align: left;
    padding: 15px 5px 15px 5px;
    border-bottom: 2px solid var(--border-color-3);
    cursor: pointer;
}
ul.selection-list li:last-child {
    border-bottom: none;
}
.border-bottom{
    border-radius: 0 0  30px 0;
}
.border-bottom-left{
    border-radius: 0 0 0 30px;
}
.bgd-pri{
    background-color: var(--pri-color);
}
.bgd-dark{
    background-color: var(--sec-color);
}

/** Old Fonts Responsive Css **/
.p-one-two-montserrat-400 {
	font-size: 12px;
    font-family: var(--montserrat-font);
    font-weight: 400;
	line-height: 14px;
}
.p-one-six-montserrat-400 {
	font-family: var(--montserrat-font);
	line-height: 22px;
    font-size: 16px;
	font-weight: 400;
}
.p-one-six-montserrat-600 {
	font-family: var(--montserrat-font);
	line-height: 22px;
    font-size: 16px;
	font-weight: 600;
}
.p-one-six-montserrat-401 {
    line-height: 22px;
    font-size: 16px;
	font-weight: 400;
}
.p-three-five-montserrat-400 {
	font-size: 25px;
    font-weight: 400;
    font-family: var(--montserrat-font);
}
.p-one-two-ubunto-i500 span, .p-one-two-ubunto-i500 a {
    display: inline;
}
.p-two-zero-lato-700 {
	font-size: 20px;
    font-family: var(--lato-font);
    font-weight: 700;
	line-height: 30px;
}
.p-one-eight-lato-700 {
	font-size: 18px;
    font-family: var(--lato-font);
    font-weight: 700;
	line-height: 26px;
}
.p-one-eight-lato-400 {
	font-size: 18px;
    font-family: var(--lato-font);
    font-weight: 400;
	line-height: 30px;
}
.p-one-six-lato-400 {
	font-size: 16px;
    font-family: var(--lato-font);
    font-weight: 400;
	line-height: 24px;
}
.p-one-five-lato-700 {
	font-size: 15px;
    font-family: var(--lato-font);
	font-weight: 700;
}
.p-one-five-lato-400 {
    font-family: var(--lato-font);
	font-size: 15px;
	font-weight: 400;
}
.p-one-four-lato-400 {
    font-size: 14px;
    font-family: var(--lato-font);
    line-height: 22px;
}
.p-ten-lato-400 {
	font-size: 10px;
    font-family: var(--lato-font);
    font-weight: 400;
	line-height: 14px;
}
.p-two-zero-ubunto-500 {
	font-size: 20px;
    font-weight: 500;
	letter-spacing: 0.5px;
	font-family: var(--ubunto-font);
	line-height: 26px;
}
.p-one-two-ubunto-i500 {
	font-size: 12px; 
    font-family: var(--ubunto-font);
    font-style: italic;
    font-weight: 400;	
}

/** Latest Fonts Responsive Css **/
.p-16-16-14-montserrat-600 {
	font-family: var(--montserrat-font);
	line-height: 22px;
    font-size: 16px;
	font-weight: 600;
}
.p-16-16-14-montserrat-400 {
	font-family: var(--montserrat-font);
	line-height: 22px;
    font-size: 16px;
	font-weight: 400;
}

.card-style {
	background-color: var(--white-color);
    border-radius: 10px;
    padding: 20px 15px;
	box-shadow: var(--card-shadow-4);
}
.g-opt {
    display: flex;
    width: 100%;
    margin-bottom: 15px;
    border-radius: 10px;
    overflow: hidden;
    box-shadow: var(--card-shadow-4);
    -webkit-box-shadow: var(--card-shadow-4);
    -moz-box-shadow: var(--card-shadow-4);
}
.g-opt:last-child{
    margin-bottom: 0px;
}
.g-opt-col-1 {
    background: var(--primary-radial-2);
    border-right: 1px solid var(--white-color);
}
.g-opt.flex-row-reverse .g-opt-col-1 {
    border-right: 0px;
    border-left: 1px solid var(--white-color);
}
.g-opt-col-2 {
    padding: 15px;
    background-color: var(--white-color);
    width: 100%;
}
.g-opt-col-3 {
    background: var(--primary-radial-1);
    min-width: 40px;
}
.g-opt button {
    border: none;
    outline: none;
    cursor: pointer;
}
.g-opt input:disabled {
    background-color: var(--transparent);
}
.g-opt .success-bg i {
    color:white;
    font-size:18px;
}
.g-opt .error-bg i {
    color:white;
    font-size:18px;
}
.g-opt.error {
    margin-bottom: 5px;
}
.correct-only {
	background: var(--correct-radial-2);
}
.correct-only .g-opt-col-1, .correct-only .g-opt-col-2 {
    background: var(--transparent);
}
.success-bg {
    background: var(--correct-radial-2);
}
.error-bg {
    background: var(--error-radial-2);
}
.ex-card {
    background-color: var(--white-color);
    border-radius: 10px;
    padding: 20px;
}
.card-box-style {
	background-color: var(--white-color);
    border-radius: 8px;
    width: 80px;
    aspect-ratio: 1;
    box-shadow: var(--card-shadow-5);
    border: none;
}
.btn-light{
    background: var(--smoke-color-4) !important;
    border-color: var(--smoke-color-4) !important;
    color: var(--black-color) !important;
}
.fa-solid {
    color: var(--pri-color);
}
body::-webkit-scrollbar{
    display: none;
}
html{
    scrollbar-width: none;
}
::-webkit-scrollbar {
    -webkit-appearance: none;
}
::-webkit-scrollbar {
    width: 0px;
    background: transparent;
}
.alert.alp {
    --bs-alert-color: var(--pri-color);
    --bs-alert-bg: var(--smoke-color-10);
    --bs-alert-border-color: var(--pri-l2-color);
}
.disabled {
    opacity: .5;
}
.o-full {
    opacity: 1 !important;
}
.underline-3 {
    text-decoration: underline;
    text-underline-offset: 3px;
}
.z-i-1 {
    z-index: 1;
}
.z-i-2 {
    z-index: 2;
}
.z-i-3 {
    z-index: 3;
}
.z-i-4 {
    z-index: 4;
}
.z-i-5 {
    z-index: 5;
}
sup, sub {
    font-size: 12px;
    margin: 0px 1px 0px;
}
.ad-banner-1 {
    margin-bottom: 26px;
}
.ad-banner .slick-list {
    margin-left: -12px;
    margin-right: -12px;
}
.ad-banner .slick-slide {
    padding: 0px 12px;
}
.ad-banner .slick-slide img {
    width: 100%;
    border-radius: 10px;
}
.fancybox-stage {
    background-color: var(--white-color);
}
.fancybox-button {
    background: var(--pri-color);
}
.fancybox-button svg path {
    fill: var(--sec-color);
}
.fancybox-image {
    padding: 0px 15px;
    height: auto;
}
/* MARGINS */
.mt-d5-rem {
    margin-top: .5rem;
}
.mr-d5-rem {
    margin-right: .5rem;
}

/* LINE HEIGHT */
.l-24 {
    line-height: 24px;
}

/* SVG */
.fill-pri path {
    fill: var(--pri-color);
}
.board-svg {
    width: 20px;
}
.faculty-svg {
    width: 18px;
}
.class-svg {
    width: 19px;
}
/*__END: GLOBAL CLASSES CSS __*/





/*__START: ALL GRID CSS __*/
.box-grid {
    display: flex;
    flex-wrap: wrap;
    width: 100%;
    padding-left: 4px;
    padding-right: 4px;
}
.box-grid .box {
    width: 25%;
    text-align: center;
    max-width: 200px;
    padding: 0px 12px;
    margin-bottom: 24px;
    position: relative;
}
.box.subject .subject-icon {
    border-radius: 12px;
    background: var(--white-color);
    border: 1px solid var(--border-color-3);
    aspect-ratio: 1;
}
.box.subject .subject-icon img {
    width: 55%;
    min-width: 40px;
}
.box.subject p {
    font-size: 1.2rem;
    font-family: var(--lato-font);
    background-color: var(--pri-color);
    padding: 10px;
    border-radius: 10px;
    width: 90%;
    margin: 0 auto;
    top: -20px;
    box-shadow: var(--card-shadow-1);
    text-align: center;
}
.box .content-wrapper {
    position: relative;
    width: 100%;
    background: var(--white-color);
    z-index: 1;
    border-radius: 12px;
    box-shadow: var(--card-shadow-7);
    overflow: hidden;
    aspect-ratio: unset;
    height: 100%;
}
.box .content-wrapper .top, .box .content-wrapper .bottom {
    background-color: var(--pri-color);
    font-size: 13px;
    position: absolute;
    left: 0px;
    width: 100%;
    line-height: 27px;
    max-height: 27px;
    text-align: center;
}
.box .content-wrapper .top {
    top: 0px;
}
.box .content-wrapper .middle {
    display: flex;
    flex-wrap: wrap;
    width: 100%;
    height: 100%;
    padding-left: 12px;
    padding-right: 12px;
    align-content: center;
}
.box .content-wrapper .itop{
    padding-top: 37px;
}
.box .content-wrapper .itop, .box .content-wrapper .ibottom {
    position: relative;
    width: 100%;
    text-align: center;
}
.box .content-wrapper .icenter {
    width: 100%;
    font-size: 20px;
    padding: 15px 0px;
    position: relative;
    text-align: center;
}
.box .content-wrapper .ibottom {
    padding-bottom: 37px;
}
.box .content-wrapper .bottom {
    bottom: 0px;
    background-color: var(--sec-color);
}
.box .content-wrapper .two-c-r {
    background: var(--primary-radial-2);
    border-top-right-radius: 10px;
    border-top-left-radius: 10px;
    font-size: 16px;
    font-family: var(--montserrat-font);
    font-weight: 500;
    text-align: center;
    margin: 0px;
}
.box .content-wrapper .col-4, .box .content-wrapper .col-6, .box .content-wrapper .col-12 {
    padding: 10px 15px;
    font-size: 18px;
}
.box .content-wrapper .bl {
    border-left: 1px solid var(--white-color);
}
.box .content-wrapper .br {
    border-right: 1px solid var(--white-color);
}
.box .content-wrapper .cnt {
    padding: 12px 15px;
    border-bottom-left-radius: 10px;
    border-bottom-right-radius: 10px;
    font-size: 17px;
    line-height: 24px;
    text-align: left;
}
.contentArea:not(.list) .accordion .bookmark.box, .contentArea:not(.list) .search.box {
    width: 33.33%;
}
.box.cc-text a {
    aspect-ratio: 1;
    background-color: var(--white-color);
    border-radius: 12px;
    box-shadow: var(--card-shadow-6);
    overflow: hidden;
    font-size: 16px;
}

.list .box-grid .box {
    width: 100%;
    max-width: 33.33%;
}
.list .box .content-wrapper .top, .list .box .content-wrapper .bottom {
    max-height: 30px;
    line-height: 30px;
}
.list .box .content-wrapper>a {
    height: 100%;
}
.list .box .content-wrapper .cnt {
    width: 100%;
}
.list .bookmark.box .middle, .list .search.box .middle {
    padding: 0px;
    align-content: start;
}
.list .bookmark.box .cnt, .list .search.box .cnt {
    padding-top: 42px;
    padding-bottom: 42px;
}

/*Not Here*/
.serc-mod-cont {
    padding:unset;
    width: 70%;
    max-width: 600px;
    margin: 0 auto;
    border-radius: 20px;
}
.serc-mod-cont li {
    position: relative;
    min-height: 44px;
    font-size: 16px;
    line-height: 24px;
    padding: 10px 0 10px 30px;
    border-bottom: 1px solid var(--smoke-color-9);
    transition: all 0.15s;
}
.serc-mod-cont li:last-child {
    border-bottom: none;
}
/*__END: ALL GRID CSS __*/





/*__START: NON SUBSCRIBER CSS __*/
.disable_not_subscribe {
    opacity: 0.5 !important;
    background: var(--smoke-color-5) !important;
}
.hide-extra-ques {
    overflow: hidden;
    position: relative;
}
.hide-extra-ques::before {
    position: absolute;
    bottom: 0px;
    content: '';
    height: 50%;
    width: 100%;
    background: var(--smoke-linear-1);
    z-index: 4;
}
button.subscription-btn {
    display: flex;
    justify-content: center;
    align-items: center;
    width: 100%;
    max-width: 700px;
    font-size: 18px;
    box-shadow: none;
    z-index: 5;
}
button.subscription-btn.pA {
    position: absolute;
    bottom: 22px;
    left: 50%;
    transform: translateX(-50%);
}
button.subscription-btn.gP {
    margin-top: 0px;
    margin-bottom: 16px;
}
button.subscription-btn small {
    display: block;
    font-size: 12px;
    color: var(--white-color);
    line-height: 15px;
    margin: 3px 0px -2px;
}

/* Container for Stripe card element */
.ex-custom-base-class {
    width: 100%;
    background-color: var(--transparent) !important;
    font-family: var(--lato-font);
    font-size: 16px;
    padding: 10px 0;
    border-bottom: 1px solid var(--border-color-2);
    transition: .3s;
    margin-bottom: 5px;
}
.ex-custom-base-class.ex-custom-invalid-class {
    border-color: var(--error-color);
}
.card-errors {
    color: var(--error-color);
    font-family: var(--lato-font);
    margin-bottom: 5px;
}
/*__END: NON SUBSCRIBER CSS __*/





/*__START: ALL Skeletons CSS __*/
.skeleton {
    background: var(--smoke-color-6);
    overflow: hidden;
    position: relative;
    width: 100%;
    aspect-ratio: 1;
    border-radius: 12px;
}
.skeleton::before {
    content: "";
    position: absolute;
    height: 100%;
    width: 200%;
    background: linear-gradient(110deg, var(--smoke-color-6) 8%, var(--border-color-1) 18%, var(--smoke-color-6) 33%);
    background-repeat: no-repeat;
    background-size: 200% 100%;
    animation: shimmer 1s linear infinite;
    border-radius: 5px;
    left: 0;
    top: 0;
}
button.btn.skeleton.toppaper {
    height: 32px;
    border: unset;
    background: var(--smoke-color-6);
    max-width: 100px;
}
p.skeleton.skel-p {
    background: var(--smoke-color-6);
    aspect-ratio: unset;
}
p.skeleton.skel-p::before {
    left: -28%;
}
@keyframes shimmer {
    0% { background-position: -450px 0; }
    100% { background-position: 450px 0; }
}


.list .box .skeleton {
    aspect-ratio: 9/3;
}
/*__END: ALL Skeletons CSS __*/





/*__START: ALL FORM CSS __*/
form, form.row {
    width: 90%;
    margin: auto;
}
.flex-no-wrap input{
    flex-grow: 1;
}
.input-div.disabled, .inputphone.disabled {
    opacity: 0.5;
}
.input-div, .inputphone {
    position: relative;
    margin: 25px 0;
    padding: 5px 0;
    border-bottom: 1px solid var(--border-color-2);
    transition: .3s;
}
.input-div {
    display: grid;
    grid-template-columns: 34px auto 34px;
}
.input-div.pass {
    padding-right: 25px;
}
.inputphone .iti__flag-container {
    max-width: 34px;
}
.inputphone .iti__flag-container:hover, .iti--allow-dropdown .iti__flag-container:hover .iti__selected-flag {
    background-color: var(--transparent);
}
.inputphone .iti.iti--allow-dropdown {
    width: 100%;
}
.inputphone .iti__flag-container .iti__selected-flag {
    padding: 0px;
}
.inputphone .iti__flag-container .iti__country-list {
    max-height: 95px;
}
.i {
    min-width: 34px;
    max-width: 34px;
}
.i i {
    transition: .3s;
}
.input-div>div, .inputphone>div, .input-div>.inner-wrap, .inputphone>.inner-wrap {
    position: relative;
    height: 25px;
}
.input-div>div>h5,.inputphone>div>h5, .input-div>.inner-wrap>h5, .inputphone>.inner-wrap>h5 {
    position: absolute;
    left: 6px;
    top: 50%;
    transform: translateY(-50%);
    font-size: 13px;
    transition: .3s;
    font-weight: 300;
}
.inputphone>div>h5, .inputphone>.inner-wrap>h5 {
    left: 40px;
}
.input-div>div>input,.input-div>.inner-wrap>input,.inputphone .iti input, .select-btn-add {
    width: 100%;
    height: 25px;
    outline: none;
    border: none;
    background: none;
    font-family: 'poppins', sans-serif;
    font-size: 1.2rem;
    padding-top: 8px;
    padding-right: 6px;
    padding-left: 6px;
}
.inputphone .iti input[type=text] {
    padding-left: 40px;
}
.input-div>.eye, .input-div>.select-btn-arrow {
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
    right: 10px;
    cursor: pointer;
    padding: 5.5px 0px;
    min-width: 16px;
}
.eye>.fa-eye-slash {
    font-size: 14px;
}
.add-icon {
    display: block;
    position: absolute;
    right: 10px;
    top: 50%;
    transform: translateY(-50%);
}
.input-div::after, .inputphone::after {
    content: '';
    position: absolute;
    width: 0%;
    left: 50%;
    transform: translateX(-50%);
    bottom: -1.5px;
    z-index: 2;
    border-bottom: 2px solid var(--pri-color);
    transition: .4s;
}
.input-div.focus::after, .inputphone.focus::after {
    width: 100%;
}
.input-div.focus>div>h5,.inputphone.focus>div>h5, .input-div.focus>.inner-wrap>h5,.inputphone.focus>.inner-wrap>h5 {
    top: -5px;
    font-size: 12px;
}
.input-div.error, .inputphone.error {
    border-color: var(--error-color);
    margin-bottom: 40px;
}
.input-div.error::after, .inputphone.error::after {
    border-bottom: 2px solid var(--error-color);
}
.input-div .inputerror, .inputphone .inputerror {
    top: 41px;
    position: absolute;
    font-size: 12px;
    left: 0px;
    text-align: left;
    opacity: 0;
    transition: .3s;
}
.input-div.error .inputerror,.inputphone.error .inputerror {
    opacity: 1;
}
.select-btn-add {  
    text-align: left;
    padding-top: 4px;
    padding-right: 30px;
}
.digit{
    outline: none;
    font-family: var(--lato-font);
    font-size: 20px;
    line-height: inherit;
    border: none;
    border-bottom: 2px solid var(--border-color-2);
    width: 100%;
    padding: 10px;
    margin: 3px;
    text-align: center;
    caret-color: var(--transparent);
    transition: .3s;
}
.digit:focus{
    border-bottom: 2px solid var(--pri-color);
}
.digit::-webkit-outer-spin-button,
.digit::-webkit-inner-spin-button {
    -webkit-appearance: none;
    margin: 0;
}
.digit[type=number] {
    -moz-appearance: textfield;
}
/*__END: ALL FORM CSS __*/





/*__START: ALL BUTTONS CSS __*/
.btn {
    border-radius: 22px;
    font-size: 12px;
    font-family: var(--lato-font);
}
.btn-overlay {
    position: absolute;
    bottom: 22px;
    z-index: 20;
    left: 50%;
    transform: translateX(-50%);
    width: 70%;
    height: 50px;
    border: 2px solid var(--white-color);
    font-size: 1.1rem;
}
.btn-login {
    display: block;
    min-width: 55%;
    height: 50px;
    border-radius: 25px;
    outline: none;
    border: none;
    background-image: var(--primary-linear);
    background-size: 100%;
    font-size: 1.1rem;
    font-family: 'Poppins', sans-serif;
    text-transform: uppercase;
    margin: 1rem auto 0rem; 
    cursor: pointer;
    transition: .5s;
    box-shadow: var(--pri-box-shadow-1);
    -webkit-box-shadow: var(--pri-box-shadow-1);
    -moz-box-shadow: var(--pri-box-shadow-1);
}
.sms-login {
    margin: 0;
    background-image: var(--blue-linear);
    box-shadow: var(--btn-shadow-1);
    font-size: 0.9rem;
    height: 40px;
    min-width: unset;
    width: 100%;
}
.wa-login {
    margin: 0;
    background-image: var(--green-linear);
    box-shadow: var(--btn-shadow-1);
    font-size: 0.9rem;
    height: 40px;
    min-width: unset;
    width: 100%;
}
.sms-login .fa-comments, .wa-login .fa-whatsapp {
    margin-right: 7px;
}
.btn-login .fa-arrow-right-long {
    font-size: 10px;
    margin-left: 3px;
    top: -2px;
}
button .fa-circle-notch {
    margin-right: 5px;
}
.btn-edit, .btn-edit:first-child:active, .btn-edit:hover {
    width: fit-content;
    background: var(--smoke-color-4);
    font-weight: bold;
    border: none;
}
/*__END: ALL BUTTONS CSS __*/





/*__START: ALL ACCORDION CSS__*/
.accordion .accordion-item:first-of-type, .accordion .accordion-item:first-of-type .accordion-button {
    border-top-left-radius: 30px;
}
.accordion .accordion-item:last-of-type, .accordion .accordion-item:last-of-type .accordion-button {
    border-bottom-right-radius: 30px;
}
.accordion .accordion-button{
    font-weight: 900;
    font-size: 16px;
    background-color: var(--sec-color);
    box-shadow: var(--card-shadow-1);
    -webkit-box-shadow: var(--card-shadow-1);
}
.accordion .accordion-button small {
    display: block;
    font-size: 12px;
    color: var(--white-color);
    font-weight: 400;
    padding-right: 36px;
}
.accordion .accordion-button:not(.collapsed){
    background-color: var(--pri-color);
}
.accordion-button:not(.collapsed)::after {
    background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16' fill='%23ffffff'%3e%3cpath fill-rule='evenodd' d='M1.646 4.646a.5.5 0 0 1 .708 0L8 10.293l5.646-5.647a.5.5 0 0 1 .708.708l-6 6a.5.5 0 0 1-.708 0l-6-6a.5.5 0 0 1 0-.708z'/%3e%3c/svg%3e");
    transform: translateY(-50%) rotate(-180deg);
}
.accordion-button::after{
    background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16' fill='%23ffffff'%3e%3cpath fill-rule='evenodd' d='M1.646 4.646a.5.5 0 0 1 .708 0L8 10.293l5.646-5.647a.5.5 0 0 1 .708.708l-6 6a.5.5 0 0 1-.708 0l-6-6a.5.5 0 0 1 0-.708z'/%3e%3c/svg%3e");
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
    right: 25px;
}
.accordion-body {
    padding: 24px 12px 0px 12px;
}
.accordion-body .box-grid {
    padding-left: 0px;
    padding-right: 0px;
}
.accordion-body .box-grid .box.year>a {
    font-size: 14px;
    line-height: 17px;
}
.accordion-body .box-grid .box.year>a span {
    padding: 0px 6px 0px;
}
/*__END: ALL ACCORDION Css__*/





/*__START: LOGIN PAGE CSS __*/
.bg-image {
    background-image: url(../image/backgroundomj.png), linear-gradient(var(--smoke-color-2),var(--smoke-color-2),var(--smoke-color-1) 80%);
    background-repeat: no-repeat;
    background-position: top right;
    background-size: 100%;
    min-height: 100vh;
}
#login_cont .container {
    min-height: 100vh;
}
#login_cont .container>.centering {
    width: 90%;
    max-width: 600px;
    padding-top: 15px;
    margin: 0 auto;
}
#login_cont .centering>.col-12:nth-of-type(2), #login_cont .centering>.col-12:nth-of-type(2) .social {
    margin-top: 1rem;
}
#closing_cont .container {
    min-height: 100vh;
}
#closing_cont .container>.centering {
    width: 90%;
    max-width: 600px;
    padding-top: 15px;
    margin: 0 auto;
}
#closing_cont .centering>.col-12:nth-of-type(2), #closing_cont .centering>.col-12:nth-of-type(2) .social {
    margin-top: 1rem;
}
.user_card {
    width: 100%;
    margin-top: auto;
    margin-bottom: auto;
    position: relative;
    display: flex;
    justify-content: center;
    flex-direction: column;
    padding: 10px;
    box-shadow: var(--card-shadow-1);
    -webkit-box-shadow: var(--card-shadow-1);
    -moz-box-shadow: var(--card-shadow-1);
    border-radius: 25px;
    background: var(--white-color);
}
.brand_logo_container {
    position: absolute;
    height: unset;
    width: 120px;
    top: -65px;
    border-radius: 50%;
    background: var(--white-color);
    padding: 10px;
    text-align: center;
    left: 50%;
    transform: translateX(-50%);
}
.brand_logo {
    border-radius: 50%;
    border: 2px solid var(--white-color);
    height: unset;
    width: 100px;
}
.login_head {
    font-family: 'Poppins', sans-serif;
    font-weight: 400;
    letter-spacing: 3px;
    font-size: inherit;
    margin-top: 3rem;
}
.login-content {
    display: flex;
    justify-content: flex-start;
    align-items: center;
    text-align: center;
    margin-bottom: 15px;
}
/*__END: LOGIN PAGE CSS __*/





/*__START: HEADER CSS __*/
.headerArea {
    margin-bottom: 20px;
}
.top-header {
    position: fixed;
    top: 0;
    z-index: 100;
    left: 0px;
    margin: 0px;
}
.uname p{
    font-size: 1rem;
}
.circle{
    border: 2px solid var(--white-color);
    border-radius: 50%;
    width: 40px;
    height: 40px;
    position: relative;
    aspect-ratio: 1;
    margin-right: 6px;
}
.circle:before{
    content: attr(data-c);
    position: absolute;
    left: 50%;
    top: 50%;
    transform: translate(-50%, -50%);
}
.circle:after{
    content: '';
    position: absolute;
    left: 50%;
    top: 50%;
    transform: translate(-50%, -50%);
    background-color: var(--white-color);
    width: 32px;
    height: 32px;
    aspect-ratio: 1;
    border-radius: 50%;
    z-index: -1;
}
.sub-header {
    padding: 59px 0px 10px;
    box-shadow: var(--header-shadow-2);
    -moz-box-shadow: var(--header-shadow-2);
    -webkt-box-shadow: var(--header-shadow-2);
}
.sub-header .main-logo {
    min-width: 170px;
    width:60%;
    max-width: 300px;
    transition: 1s;
}
.sub-header .class-wrapper, .sub-header .breadcrums, .sub-header .btn-wrapper {
    margin-top: 10px;
}
.sub-header .breadcrums span, .sub-header .breadcrums a {
    font-size: 12px;
    font-style: italic;
}
.sub-header .breadcrums i {
    font-size: 10px;
    font-style: italic;
}
.sub-header .sec-note {
    font-size: 12px;
    margin: 8px 0px 0px;
    font-style: italic;
    font-weight: 400;
}
.sub-header button:nth-of-type(1) {
    margin: 0px 4px;
    background-color: var(--pri-color);
}
.sub-header button:nth-of-type(1):active {
    background-color: var(--pri-color);
    border-color: var(--pri-color);
}
.sub-header button:nth-of-type(2) {
    margin: 0px 4px;
}
.sub-header button i {
    padding-right: 5px;
}
.top-icon i {
    color: var(--white-color);
    font-size: 18px;
    margin: 0 3px !important;
}
button.top-icon {
    background: none;
    border: none;
}
/*__END: HEADER CSS __*/





/*__START: DASHBOARD CSS __*/
.contentArea {
    padding: 0px 0px 100px;
}
.contentArea .box-grid.past, .contentArea .box-grid.guess {
    margin-top: 16px;
}
/*__END: DASHBOARD CSS __*/





/*__START: QUESTION SCREENS CSS __*/
/*FONTS*/
.contentArea .ques {
    position: relative;
    width: 100%;
    padding-bottom: 12px;
}
.ques *:not(i,img) {
    font-family: var(--lato-font);
}
.ques .qmatter, .ques .qmatter *, .ques .mcqDis, .ques .mcqDis *, .ques .answer-wrapper * {
    font-size: 17px;
    line-height: 26px;
}
.urdu-font, .urdu-font *, .ques .urdu-font, .ques .urdu-font * {
    font-family: var(--urdu-font);
    text-align:right;
    font-size: 18px;
    line-height: 28px;
}
.sindhi-font, .sindhi-font *, .ques .sindhi-font ,.ques .sindhi-font * {
    font-family: var(--sindhi-font);
    text-align:right;
    font-size: 18px;
    line-height: 28px;
}
.arabic-font, .arabic-font *, .ques .arabic-font, .ques .arabic-font * {
    font-family: var(--arabic-font);
    text-align:right;
    font-size: 18px;
    line-height: 28px;
}
.lato-font, .lato-font *, .ques .lato-font, .ques .lato-font * {
    font-family: var(--lato-font);
    text-align: left;
    font-size: 17px;
    line-height: 26px;
}

/*IMAGE*/
figure.image, figure.image img, a[data-fancybox="gallery"], a[data-fancybox="gallery"] img {
    max-width: 100%;
    position: relative;
    width: 100%;
    display: block;
}
figure.image, a.text-start img {
    margin-right: auto;
}
figure.image, a.text-center img {
    margin: 0 auto;
}
figure.image, a.text-end img {
    margin-left: auto;
}

/*LIST*/
.list .box ul li, .list .box ol li, .ques ol li, .ques ul li {
    list-style: none;
}
ul:has(> li.urdu-font), ul:has(> li.sindhi-font), ul:has(> li.arabic-font), ul.urdu-font, ul.sindhi-font, ul.arabic-font, ol:has(> li.urdu-font), ol:has(> li.sindhi-font), ol:has(> li.arabic-font), ol.urdu-font, ol.sindhi-font, ol.arabic-font {
    direction: rtl;
}
li ol, li ul {
    margin-top: 4px;
    margin-bottom: 4px;
}
li:last-child ol, li:last-child ul {
    margin-bottom: 0px;
}

/*DECIMAL LIST*/
ol:has(.ex-list-decimal) {
    counter-reset: my-counter;
    padding-left: 30px;
}
li.ex-list-decimal {
    position: relative;
    counter-increment: my-counter;
}
li.ex-list-decimal::before {
    content: counter(my-counter) ". ";
    position: absolute;
    left: -30px;
    font-family: var(--lato-font);
    font-size: 17px;
}
ol:has(.ex-list-decimal.urdu-font) {
    padding-left: 0px;
    padding-right: 30px;
}
li.ex-list-decimal.urdu-font::before {
    left: unset;
    right: -30px;
    font-size: 16px;
}

/* Urdu List */
ol:has(.ex-list-urdu) {
    list-style-type: none;
    counter-reset: urdu-counter;
    padding-right: 38px;
}
li.ex-list-urdu {
    position: relative;
    counter-increment: urdu-counter;
}
li.ex-list-urdu::before {
    position: absolute;
    font-family: var(--urdu-font);
    font-size: 17px;
    right: -38px;
}
li.ex-list-urdu:nth-child(1):before {
    content: 'الف۔ ';
}
li.ex-list-urdu:nth-child(2):before {
    content: 'ب۔ ';
}
li.ex-list-urdu:nth-child(3):before {
    content: 'ج۔ ';
}
li.ex-list-urdu:nth-child(4):before {
    content: 'د۔ ';
}
li.ex-list-urdu:nth-child(5):before {
    content: 'ہ۔ ';
}
li.ex-list-urdu:nth-child(6):before {
    content: 'و۔ ';
}
li.ex-list-urdu:nth-child(7):before {
    content: 'ز۔ ';
}
li.ex-list-urdu:nth-child(8):before {
    content: 'ح۔ ';
}
li.ex-list-urdu:nth-child(9):before {
    content: 'ط۔ ';
}
li.ex-list-urdu:nth-child(10):before {
    content: 'ی۔ ';
}
li.ex-list-urdu:nth-child(11):before {
    content: 'ک۔ ';
}
li.ex-list-urdu:nth-child(12):before {
    content: 'ل۔ ';
}
li.ex-list-urdu:nth-child(13):before {
    content: 'م۔ ';
}
li.ex-list-urdu:nth-child(14):before {
    content: 'ن۔ ';
}
li.ex-list-urdu:nth-child(15):before {
    content: 'س۔ ';
}
li.ex-list-urdu:nth-child(16):before {
    content: 'ع۔ ';
}
li.ex-list-urdu:nth-child(17):before {
    content: 'ف۔ ';
}
li.ex-list-urdu:nth-child(18):before {
    content: 'ص۔ ';
}
li.ex-list-urdu:nth-child(19):before {
    content: 'ق۔ ';
}
li.ex-list-urdu:nth-child(20):before {
    content: 'ر۔ ';
}
li.ex-list-urdu:nth-child(21):before {
    content: 'ش۔ ';
}
li.ex-list-urdu:nth-child(22):before {
    content: 'ت۔ ';
}
li.ex-list-urdu:nth-child(23):before {
    content: 'ث۔ ';
}
li.ex-list-urdu:nth-child(24):before {
    content: 'خ۔ ';
}
li.ex-list-urdu:nth-child(25):before {
    content: 'ذ۔ ';
}
li.ex-list-urdu:nth-child(26):before {
    content: 'ض۔ ';
}
li.ex-list-urdu:nth-child(27):before {
    content: 'ظ۔ ';
}
li.ex-list-urdu:nth-child(28):before {
    content: 'غ۔ ';
}

/*DISC LIST*/
ul:has(.ex-list-disc) {
    padding-left: 20px;
}
li.ex-list-disc {
    position: relative;
}
li.ex-list-disc::before {
    content: '';
    position: absolute;
    left: -18px;
    height: 7px;
    background: #515151;
    border-radius: 50%;
    width: 7px;
    top: 13px;
    transform: translateY(-50%);
}
ul:has(.ex-list-disc.urdu-font), ul:has(.ex-list-disc.arabic-font), ul:has(.ex-list-disc.sindhi-font) {
    padding-left: 0px;
    padding-right: 20px;
}
li.ex-list-disc.urdu-font::before, li.ex-list-disc.arabic-font::before, li.ex-list-disc.sindhi-font::before {
    left: unset;
    right: -18px;
    height: 6px;
    width: 6px;
    top: 14px;
}

/*ROMAN LIST*/
ol:has(.ex-list-roman) {
    counter-reset: roman-counter;
    padding-left: 30px;
}
li.ex-list-roman {
    position: relative;
}
li.ex-list-roman::before {
    content: counter(roman-counter, lower-roman) ". ";
    counter-increment: roman-counter;
    position: absolute;
    left: -30px;
    font-family: var(--lato-font);
    font-size: 17px;
}
ol:has(.ex-list-roman.urdu-font) {
    padding-left: 0px;
    padding-right: 30px;
}
li.ex-list-roman.urdu-font::before {
    left: unset;
    right: -30px;
    font-size: 16px;
}

/*BLOCKQUOTE*/
blockquote {
    position: relative;
    font-family: "Georgia", serif;
    font-weight: 600;
    quotes: "\201C""\201D""\2018""\2019";
    margin: 10px auto 0px;
    font-size: 17px;
    width: max-content;
    max-width: 92%;
}
blockquote::before,blockquote::after {
    font-size: 36px;
    font-weight: 400;
    font-family: "Georgia", serif;
    height: 0px;
}
blockquote::before {
    position: absolute;
    left: -18px;
    top: 4px;
    content: open-quote;
}
blockquote::after {
    position: absolute;
    right: -18px;
    content: close-quote;
    bottom: 8px;
}
blockquote.urdu-font::before, blockquote:has(.urdu-font)::before, blockquote.sindhi-font::before, blockquote:has(.sindhi-font)::before, blockquote.arabic-font::before, blockquote:has(.arabic-font)::before{
    top: unset;
    bottom: 8px;
}
blockquote.urdu-font::after, blockquote:has(.urdu-font)::after, blockquote.sindhi-font::after, blockquote:has(.sindhi-font)::after, blockquote.arabic-font::after, blockquote:has(.arabic-font)::after{
    bottom: unset;
    top: 4px;
}
blockquote, blockquote *, blockquote.urdu-font, blockquote .urdu-font, blockquote.sindhi-font, blockquote.sindhi-font, blockquote.arabic-font, blockquote .arabic-font {
    text-align: center !important;
}

/*HEADING*/
.list .guess.box h3, .list .guess.box h3 *, .list .bookmark.box h3, .list .bookmark.box h3 *, .list .search.box h3, .list .search.box h3 *, .ques .qmatter h3, .ques .qmatter h3 *, .mcqDis .g-opt-col-2 h3, .mcqDis .g-opt-col-2 h3 *, .ques .answer-wrap h3, .ques .answer-wrap h3 * {
    font-size: 22px;
    font-weight: 600;
}
.list .guess.box h3.urdu-font, .list .guess.box h3.urdu-font *, .list .bookmark.box h3.urdu-font, .list .bookmark.box h3.urdu-font *, .list .search.box h3.urdu-font, .list .search.box h3.urdu-font *, .ques .qmatter h3.urdu-font, .ques .qmatter h3.urdu-font *, .mcqDis .g-opt-col-2 h3.urdu-font, .mcqDis .g-opt-col-2 h3.urdu-font *, .ques .answer-wrap h3.urdu-font, .ques .answer-wrap h3.urdu-font * {
    font-size: 30px;
    font-weight: 600;
    line-height: 48px;
}
.list .guess.box h4, .list .guess.box h4 *, .list .bookmark.box h4, .list .bookmark.box h4 *, .list .search.box h4, .list .search.box h4 *, .ques .qmatter h4, .ques .qmatter h4 *, .mcqDis .g-opt-col-2 h4, .mcqDis .g-opt-col-2 h4 *, .ques .answer-wrap h4, .ques .answer-wrap h4 * {
    font-size: 20px;
    font-weight: 600;
}
.list .guess.box h4.urdu-font, .list .guess.box h4.urdu-font *, .list .bookmark.box h4.urdu-font, .list .bookmark.box h4.urdu-font *, .list .search.box h4.urdu-font, .list .search.box h4.urdu-font *, .ques .qmatter h4.urdu-font, .ques .qmatter h4.urdu-font *, .mcqDis .g-opt-col-2 h4.urdu-font, .mcqDis .g-opt-col-2 h4.urdu-font *, .ques .answer-wrap h4.urdu-font, .ques .answer-wrap h4.urdu-font * {
    font-size: 22px;
    font-weight: 600;
    line-height: 28px;
}

/*QUESTION BOX*/
.ques .qmatter .qSwipper {
    position: absolute;
    width: 100%;
    height: 100%;
    top: 0px;
    left: 0px;
    display: block;
    z-index: 1;
}
.ques .qmatter .qSwipper::after {
    content: '';
    position: absolute;
    width: 100vw;
    height: 100%;
    left: 50%;
    bottom: 0px;
    transform: translateX(-50%);
    padding-top: 24px;
    z-index: -1;
    box-sizing: content-box;
}
.qmatter.card-style {
    padding-top: 15px;
    padding-bottom: 15px;
}
.list .guess.box .cnt>p, .list .guess.box .cnt>ul, .list .guess.box .cnt>ol, .list .bookmark.box .cnt>p, .list .bookmark.box .cnt>ul, .list .bookmark.box .cnt>ol, .list .search.box .cnt>p, .list .search.box .cnt>ul, .list .search.box .cnt>ol, .ques .qmatter>p, .ques .qmatter>ul, .ques .qmatter>ol {
    margin-top: 8px;
}
.list .guess.box .cnt>h3, .list .bookmark.box .cnt>h3, .list .search.box .cnt>h3, .ques .qmatter>h3, .list .guess.box .cnt>h4, .list .bookmark.box .cnt>h4, .list .search.box .cnt>h4, .ques .qmatter>h4, .list .guess.box .cnt table, .list .bookmark.box .cnt table, .list .search.box .cnt table, .ques .qmatter table {
    margin-top: 10px;
}
.list .guess.box .cnt>*:first-child, .list .bookmark.box .cnt>*:first-child, .list .search.box .cnt>*:first-child, .ques .qmatter>*:nth-child(2) {
    margin-top: 0px;
}
.list .guess.box .cnt table, .list .bookmark.box .cnt table, .list .search.box .cnt table, .ques .qmatter table {
    width: 100%;
    border-collapse: collapse;
}
.list .guess.box .cnt table th, .list .bookmark.box .cnt table th, .list .search.box .cnt table th, .ques .qmatter table th {
    background-color: var(--smoke-color-7);
    border: 1px solid var(--smoke-color-6);
    padding: 8px 15px;
    font-size: 16px;
    font-weight: 600;
    overflow-wrap: anywhere;
    width: 50%;
}
.list .guess.box .cnt table td, .list .bookmark.box .cnt table td, .list .search.box .cnt table td, .ques .qmatter table td {
    border: 1px solid var(--smoke-color-6);
    padding: 8px 15px;
    overflow-wrap: anywhere;
    width: 50%;
}

/* OR SLIDERS*/
.qmatter .strike {
    margin-top: 8px;
}
.qmatter .pill.rel_note {
    border-radius: 18px;
    margin: 2px auto;
    box-shadow: var(--pri-box-shadow-4);
    width: max-content;
    max-width: 100%;
    background: var(--pri-color);
    font-size: 14px;
    line-height: 24px;
    padding: 2px 25px;
}
.qmatter .or-slider {
    z-index: 2;
}
.qmatter .or-slider .or-box {
    padding: 0px 4px;
}
.qmatter .or-slider .card-box-style {
    background-color: var(--sec-color);
    border: 2px solid var(--white-color);
    position: relative;
    border-radius: 8px;
    box-shadow: var(--card-shadow-5);
    width: 100%;
    padding: 4px;
    margin: 8px 0px 15px;
}
.qmatter .or-box * {
    font-size: 14px;
    line-height: 16px;
}

/*MCQ's*/
.mcqDis {
    padding-top: 20px;
}
.ques .mcqDis.qSwipper::after {
    content: '';
    position: absolute;
    width: 100vw;
    height: 100%;
    left: 50%;
    top: 0px;
    transform: translateX(-50%);
    z-index: -1;
}
.mcqDis .g-opt-col-1{
    min-width: 80px;
}
.correct-only img {
    filter: invert(1);
}
.mcqDis .g-opt-col-2>p, .mcqDis .g-opt-col-2>ul, .mcqDis .g-opt-col-2>ol {
    margin-top: 8px;
}
.mcqDis .g-opt-col-2>h3, .mcqDis .g-opt-col-2>h4, .mcqDis .g-opt-col-2 table {
    margin-top: 10px;
}
.mcqDis .g-opt-col-2>*:first-child {
    margin-top: 0px;
}
.mcqDis .g-opt-col-2 table {
    width: 100%;
    border-collapse: collapse;
}
.mcqDis .g-opt-col-2 table th {
    background-color: var(--smoke-color-7);
    border: 1px solid var(--smoke-color-6);
    padding: 8px 15px;
    font-size: 16px;
    font-weight: 600;
    overflow-wrap: anywhere;
    width: 50%;
}
.mcqDis .g-opt-col-2 table td {
    border: 1px solid var(--smoke-color-6);
    padding: 8px 15px;
    overflow-wrap: anywhere;
    width: 50%;
}

/* REPEATATIONS */
.ques .repeatation-card.qSwipper::before {
    content: '';
    position: absolute;
    left: 50%;
    height: 100%;
    bottom: 0px;
    width: 100vw;
    transform: translateX(-50%);
    z-index: -1;
    padding-top: 24px;
    box-sizing: content-box;
}
.ques .repeatation-card {
	background: var(--primary-radial-2);
	border-radius: 10px;
	box-shadow: 0 2px 5px var(--pri-box-shadow-3);
    -webkit-box-shadow: 0 2px 5px var(--pri-box-shadow-3);
    -moz-box-shadow: 0 2px 5px var(--pri-box-shadow-3);
    margin-top: 24px;
}
.ques .repeatation-card h2.repeat-head {
    text-align: center;
    padding: 15px 0px;
    font-size: 20px;
    font-family: var(--montserrat-font);
    font-weight: 500;
}
.ques .repeatation-card .repeat-empty h2.repeat-head {
    padding: 40px 0px;
}
.ques .repeatation-card:has(.repeat-empty)>h2.repeat-head {
    padding: 0px;
}
.ques .repeat-slider {
    margin: 0px 15px;
}
.ques .repeat-slider .slick-list {
    margin: 0px -6px;
}
.ques .repeat-slider .slide-items {
    padding: 0px 6px;
}
.ques .repeat-slider .card-box-style {
	background-color: transparent;
	border: 1px solid var(--smoke-color-8);
    border-radius: 8px;
    width: 100%;
    margin-bottom: 16px;
    box-shadow: var(--white-shadow-1);
    padding: 6px;
    text-align: center;
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    align-content: space-around;
    max-width: 102px;
}
.ques .repeat-slider .card-box-style * {
    text-align: center;
}
.ques .repeat-slider .card-box-style .rel-question, .repeat-slider .card-box-style .rel-section {
    font-size: 12px;
    width: 100%;
}
.ques .repeat-slider .card-box-style .rel-year {
    font-size: 18px;
    width: 100%;
}

/*AI PROBABILITY, MARKS, USER PROBABILITY*/
.ques .ques-det-wrapper {
    flex-wrap: nowrap;
    margin: 0px auto;
    justify-content: space-between;
    padding: 24px 0px 0px;
    gap: 15px;
    max-width: 700px;
}
.ques .ques-det-wrapper.qSwipper::before{
    content: '';
    position: absolute;
    width: 100vw;
    height: 100%;
    left: 50%;
    top: 0px;
    transform: translateX(-50%);
    z-index: -1;
    padding-bottom: 55px;
    box-sizing: content-box;
}
.ques .ques-det-wrapper.box-grid .box {
    width: 33.33%;
    max-width: 176px;
    padding: 0px;
    margin: 0px;
}
.ques .ques-det-wrapper .box>div {
    width: 100%;
    height: 100%;
    background-color: var(--white-color);
    aspect-ratio: 1;
    border-radius: 8px;
    box-shadow: var(--card-shadow-9);
    border: none;
    position: relative;
    display: flex;
    flex-wrap: wrap;
    align-content: space-around;
}
.ques .ques-det-wrapper .box>div>p {
    width: 100%;
    font-size: 16px;
}
.ques .ques-det-wrapper .box>div>i {
    font-size: 40px;
    width: 100%;
}
.ques .ques-det-wrapper .box>div>i::after {
    opacity: 1;
}

/* ANSWER BOX */
.ques .answer-wrapper.qSwipper::after {
    content: '';
    position: absolute;
    width: 100vw;
    height: 100%;
    left: 50%;
    top: 0px;
    transform: translateX(-50%);
    z-index: -1;
    padding-bottom: 55px;
    box-sizing: content-box;
}
.ques .answer-wrapper {
    margin-top: 24px;
}
.ques .answer-wrapper::before {
	content: "";
	transition: all .2s;
	position: absolute;
	bottom: 0;
	left: 0;
	z-index: 2;
	height: 0%;
	width: 100%;
	border-radius: 10px;
    background: var(--overlay-1);
} 
.ques .answer-wrapper.active:before {
	height: 100%;
}
.ques .answer-wrapper>h2.repeat-head {
    font-size: 20px;
    z-index: 2;
    font-family: var(--montserrat-font);
    font-weight: 500;
}
.ques .answer-wrapper .answer-wrap {
    margin-top: 12px;
}
.ques .answer-wrapper.active .answer-wrap {
    max-height: 110px;
    transition: all 0.6s;
    overflow: hidden;
}
.ques .answer-wrapper .read-btn {
	position: relative;
	z-index: 3;
	top: 10px;
    cursor: pointer;
    padding: 10px;
    margin: -10px 0px;
}
.ques .fa-angles-down {
    animation: bounce 2s ease infinite;
}
@keyframes bounce {
	0%, 20%, 50%, 80%, 100% {transform: translateY(0);}
	40% {transform: translateY(-30px);}
	60% {transform: translateY(-15px);}
}
.ques .answer-wrap>p, .ques .answer-wrap>ul, .ques .answer-wrap>ol {
    margin-top: 8px;
}
.ques .answer-wrap>h3, .ques .answer-wrap>h4, .ques .answer-wrap table {
    margin-top: 10px;
}
.ques .answer-wrap>*:first-child {
    margin-top: 0px;
}
.ques .answer-wrap table {
    width: 100%;
    border-collapse: collapse;
}
.ques .answer-wrap table th {
    background-color: var(--smoke-color-7);
    border: 1px solid var(--smoke-color-6);
    padding: 8px 15px;
    font-size: 16px;
    font-weight: 600;
    overflow-wrap: anywhere;
    width: 50%;
}
.ques .answer-wrap table td {
    border: 1px solid var(--smoke-color-6);
    padding: 8px 15px;
    overflow-wrap: anywhere;
    width: 50%;
}
/*__END: QUESTION SCREENS CSS __*/





/*__START: SWEET ALERT CSS __*/
.swal2-title {
    font-family: var(--montserrat-font) !important;
    padding-top: 1rem !important;
    color: var(--sec-color) !important;
}
.swal2-html-container {
    font-family: var(--lato-font) !important;
    font-size: 1.1rem !important;
    color: var(--sec-color) !important;
}
/*__END: SWEET ALERT CSS __*/







/*__START: My ACCOUNT CSS __*/
/* .contentArea:has(>.profile-wrapper) {
    padding-left: 16px;
    padding-right: 16px;
}
.profile-wrapper {
    padding-left: 0px;
    padding-right: 0px;
} */
.offcanvas-body:has(form[data-callback="changePass"]) {
    padding-bottom: 0px;
}
.delete-wrapper .error-bg {
    background: var(--error-radial-2);
    color: var(--white-color);
}
/*__END: My ACCOUNT CSS __*/






/*__START: OFFCANVAS CSS __*/
.offcanvasHeight {
    height: var(--bs-offcanvas-height);
}
.offcanvas-backdrop{
    background-color: var(--sec-color);
}
.offcanvas-backdrop.show{
    opacity: 0.9;
}
.offcanvas.offcanvas-bottom {
    height: unset;
    border-top-left-radius: 30px;
    max-height: 90%;
}
.offcanvas-header{
    background-color: var(--smoke-color-1);
    border-top-left-radius: 30px;
    box-shadow: var(--header-shadow-1);
    -webkit-box-shadow: var(--header-shadow-1);
    margin-left: 0px;
    margin-right: 0px;
}
.offcanvas-header .col-12:first-child {
    padding-left: 0px;
    padding-right: 0px;
}
.offcanvas-header button{
    border:2px solid var(--white-color);
    border-radius: 50%;
    padding:8px 12px;
    background-color: var(--pri-color);
    width: 40px;
    height: 40px;
    aspect-ratio: 1;
}
.offcanvas-header .fa-solid{
    font-size: 18px;
}
.offcanvas-title{
    font-size: 22px;
    font-family: var(--lato-font);
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
    left: 50px;
}
.offcanvas-header .btn-login{
    min-width: 271px;
}
.offcanvas-body .input-div:nth-of-type(1), .offcanvas-body .inputphone:nth-of-type(1) {
    margin-top: 15px;
}
.offcanvas-footer {
    display: flex;
    flex-wrap: wrap;
    padding: var(--bs-offcanvas-padding-y) var(--bs-offcanvas-padding-x);
}

/* SEARCH OFFCANVAS */
.search-input {
    border: 1px solid var(--border-color-1);;
    border-radius: 50px;
    padding: 10px 15px;
    width: 100%;
}
.search-input:focus,.search-input:focus-visible {
    border: 1px solid var(--pri-color);
    outline:none;
}
.search-input::placeholder {
    opacity: 1;
}
.src-error {
    font-size: 75%;
    margin-left: 15px;
    margin-top: 5px;
    display: block;
    position: relative;
}
.search-input.error {
    border-color: var(--error-color);
}
.offcanvas-body:has(> .srcflt) {
    padding-top: 20px;
    padding-bottom: 0px;
}
.srcflt {
    margin: 12px 0px;
}
.srcflt:last-child {
    margin-bottom: 0px;
}
.srcflt>div:first-child {
    margin-bottom: 5px;
}
.fltset, .fltaccupill .accupilldiv {
    margin: 0px -5px;
}
.search-pill {
    padding: 8px 12px;
    background: var(--smoke-color-2);
    border-radius: 50px;
    width: fit-content;
    display: inline-flex;
    margin: 8px 5px;
    box-shadow: var(--card-shadow-10);
    font-size: 14px;
    top: 0px;
    transition: .1s;
}
.search-pill.active {
    background: var(--pri-color);
    box-shadow: var(--pri-box-shadow-4);
    top: -1px;
}
.btn-search {
    display: block;
    width: 100%;
    border-radius: 25px;
    outline: none;
    border: none;
    background: var(--primary-linear);
    font-size: 16px;
    font-family: 'Poppins', sans-serif;
    text-transform: uppercase;
    cursor: pointer;
    transition: .5s;
    padding: 8px;
}
.btn-clear {
    background: var(--black-linear);
}

/* SUBSCRIBER OFFCANVAS */
.offcanvas-body:has(> .pay_form), .offcanvas-body:has(> .pay-wrap) {
    padding-bottom: 0px;
}
.pay_form {
    width: 100%;
}
.pay_form .g-opt input[type="text"], .pay_form .g-opt input[type="email"], .pay_form .g-opt input[type="tel"] {
    outline:none;
    border: none;
    width: 100%;
}
.pay_form .accordion-body {
    padding-top: 18px;
    padding-bottom: 12px;
}
.pay_form .inputerror {
    font-size: 12px;
    color: red;
}
.pay_form .couponTrigger {
    cursor: pointer;
}
.pay_form .card-element.StripeElement {
    width: 100%;
    padding-bottom: 24px;
}
.pay_form .g-opt-col-1 {
    min-width: 90px;
}

/* MORE INFO OFFCANVAS */
.moinTable{
    background-color: var(--white-color);
    padding: 10px;
    border-radius: 10px;
    box-shadow: var(--card-shadow-9);
    -webkit-box-shadow: var(--card-shadow-9);
}
.moinTable tr td{
    font-size: 16px;
    font-family: var(--lato-font);
    color: var(--sec-color);
    line-height: 19px;
    padding-top: 10px;
    padding-bottom: 10px;
}
.moinTable tr td:first-child{
    font-weight: bold;
}
.moinTable tr td:nth-child(2){
    color: var(--pri-color);
}
.moinTable tr:nth-child(even){
    background-color: var(--smoke-color-1);
}

/* SUGGEST OFFCANVAS */
.offcanvas-body:has(.sug-pill-container) {
    padding-top: 20px;
    padding-bottom: 0px;
}
.sug-alert {
    padding: 10px 15px;
    margin-bottom: 0px;
    font-size: 16px;
    line-height: 20px;
    font-family: var(--lato-font);
}
.sug-pill-container {
    margin-top: 12px;
}
/*__END: OFFCANVAS CSS __*/





/*__START: MODAL CSS __*/
.modal:before{
    content: "";
    position: absolute;
    width: 100vw;
    height: 100vh;
    top:0;
    left:0;
    background-color: var(--black-color);
    opacity: 0.5;
}
.modal-backdrop {
    display: none;
}
.modal-content{
    padding: 16px 16px 0px 16px;
    width: 90%;
    margin: 0 auto;
    border-radius: 20px 0;
}
.modal-content>p {
    line-height: 22px;
}
.model-button{
    padding-bottom: 17px;
    margin-top: 10px;
}
.model-button button{
    border-radius: 20px;
    font-size: 16px;
    font-family: var(--lato-font);
    border:none;  
}
.model-button .btn-left{
    background-image: var(--grey-linear);
    margin-right:5px;
    width: 50%;
}
.model-button .btn-right{
    background-image: var(--primary-linear);
    margin-left:5px;
    width: 50%;
}
/*__END: MODAL CSS __*/





/*__START: FOOTER CSS __*/
.footer-next-prev {
	position: fixed;
    bottom: -120px;
    left: 0;
    width: 100%;
    z-index: 9;
    padding: 10px 12px;
    border-top-right-radius: 30px;
	background-color: var(--sec-color);
    box-shadow: var(--footer-shadow);
    -moz-box-shadow: var(--footer-shadow);
    -webkt-box-shadow: var(--footer-shadow);
    transition: all 0.6s ease-in-out;
}
.footer-next-prev.active {
    bottom: 0;
    z-index: 10;
}
.footer-next-prev .nav-wrapper {
	display: flex;
    width: 100%;
    max-width: 768px;
    margin: 0 auto;
    justify-content: space-between;
}
.footer-next-prev .nav-item {
	position: relative;
    text-align: center;
    align-self: center;
    min-width: 62px;
    background-color: var(--transparent);
    border: none;
}
.footer-next-prev .nav-item.center {
	align-self: flex-start;
    top: -21px;
}
.footer-next-prev .nav-item i {
	font-size: 20px;
	margin-bottom: 4.5px;
}
.footer-next-prev .nav-item.center i {
    margin-bottom: 0px;
    font-size: 28px;
}
.footer-next-prev .nav-item.center::after {
    content: '';
    z-index: -1;
    background: var(--primary-radial-1);
    width: 60px;
    height: 60px;
    aspect-ratio: 1;
    position: absolute;
    left: 50%;
    top: 50%;
    border-radius: 20px;
    transform: translate(-50%, -50%) rotatez(45deg);
    -webkit-transform: translate(-50%, -50%) rotatez(45deg);
    box-shadow: var(--card-shadow-2);
    -moz-box-shadow: var(--card-shadow-2);
    -webkt-box-shadow: var(--card-shadow-2);
}
.footer-next-prev .nav-item p {
	font-size: 10px;
    font-weight: 400;
	line-height: 10px;
}
.footer-next-prev .nav-item.center i.fa-duotone:after, .footer-next-prev .nav-item.center i.fad:after {
	opacity: 0.65;
}
/*__END: FOOTER CSS __*/





/*__START: 992 PX ABOVE CSS __*/
@media only screen and (min-device-width: 992px) {
    .bg-image {
        background-size: contain;
    }
    .offcanvas.offcanvas-bottom, .offcanvas.show:not(.hiding) {
        position: fixed;
        width: 700px;
        left: 50%;
        top: 50%;
        transform: translate(-50%, -50%);
        bottom: unset;
        opacity: 0;
        transition: all 0s ease-in-out;
        height: unset;
        border-radius: 30px;
    }
    .offcanvas.show, .offcanvas.show:not(.hiding) {
        opacity: 1;
    }
    .offcanvas-header {
        border-top-right-radius: 30px;
    }
}
/*__END: 992 PX ABOVE CSS __*/





/*__START: BELOW 1200 PX CSS __*/
@media only screen and (max-device-width: 1200px) {
    ::-webkit-scrollbar {
        -webkit-appearance: none;
    }
    body::-webkit-scrollbar{
        display: none;
    }
    html{
        scrollbar-width: none;
    }
    ::-webkit-scrollbar {
        width: 0px;
        background: transparent;
    }


    /*__START: ALL GRID CSS __*/
    .box .content-wrapper .col-4, .box .content-wrapper .col-6, .box .content-wrapper .col-12 {
        padding: 10px 12px;
        font-size: 16px;
    }
    .list .box-grid .box {
        max-width: 50%;
    }
    /*__END: ALL GRID CSS __*/
}
/*__END: BELOW 1200 PX CSS __*/





/*__START: BELOW 768 PX CSS __*/
@media only screen and (max-device-width: 767px) {
    .login_head {
        font-size: 110%;
    }
    .offcanvas-header, .offcanvas-body, .offcanvas-footer {
        padding: 16px 15px;
    }
    .list .box-grid .box {
        max-width: 100%;
    }
    .accordion-body {
        padding: 20px 6px 8px 6px;
    }


    /*__START: ALL GRID CSS __*/
    .box-grid {
        padding: 0px 10px;
    }
    .box-grid .box {
        margin-bottom: 12px;
        padding: 0px 6px;
    }
    .box.subject .subject-icon {
        border-radius: 10px;
    }
    .box.subject p {
        font-size: 1rem;
        padding: 7px 0px;
        border-radius: 7px;
        top: -19px;
    }
    .box .content-wrapper .top, .box .content-wrapper .bottom {
        font-size: 12px;
        line-height: 25px;
        max-height: 25px;
    }
    .box .content-wrapper .middle {
        padding-left: 4px;
        padding-right: 4px;
    }
    .box .content-wrapper .itop {
        padding-top: 30px;
    }
    .box .content-wrapper .icenter {
        padding: 13px 0px;
        font-size: 18px;
    }
    .box .content-wrapper .ibottom {
        padding-bottom: 30px;
    }
    .box .content-wrapper .col-4, .box .content-wrapper .col-6, .box .content-wrapper .col-12 {
        padding: 8px 8px;
    }
    .box .content-wrapper .cnt {
        padding: 10px 12px;
        font-size: 16px;
        line-height: 22px;
    }

    
    .list .box .content-wrapper .icenter {
        padding: 45px 0px;
    }
    .list .bookmark.box .cnt, .list .search.box .cnt {
        padding-top: 40px;
        padding-bottom: 40px;
    }
    /*__END: ALL GRID CSS __*/





    /*__START: SWEET ALERT CSS __*/
    .swal2-icon-show {
        margin-top: 1.5rem !important;
    }
    .swal2-title {
        font-size: 1.6rem !important;
    }
    .swal2-html-container {
        font-size: 1rem !important;
    }
    /*__END: SWEET ALERT CSS __*/





    
    /*__START: ALL ACCORDION CSS__*/
    .accordion .accordion-button small {
        padding-right: 24px;
    }
    .accordion-button::after{
        right: 18px;
    }
    /*__END: ALL ACCORDION CSS__*/





    /*__START: NON SUBSCRIBER CSS __*/
    button.subscription-btn.gP {
        margin-top: 0px;
        margin-bottom: 4px;
    }
    button.subscription-btn.pA {
        bottom: 4px;
    }
    /*__END: NON SUBSCRIBER CSS __*/





    /*__START: QUESTION SCREENS CSS __*/
    /*FONTS*/
    .ques .qmatter, .ques .qmatter *, .ques .mcqDis, .ques .mcqDis *, .ques .answer-wrapper * {
        font-size: 16px;
        line-height: 24px;
    }
    blockquote {
        max-width: 90%;
        font-size: 16px;
    }
    .urdu-font, .urdu-font *, .ques .urdu-font, .ques .urdu-font * {
        font-size: 17px;
    }
    .lato-font, .lato-font *, .ques .lato-font, .ques .lato-font * {
        font-size: 16px;
        line-height: 24px;
    }

    /*DECIMAL LIST*/
    ol:has(.ex-list-decimal) {
        padding-left: 25px;
    }
    li.ex-list-decimal::before {
        left: -25px;
        font-size: 16px;
    }
    ol:has(.ex-list-decimal.urdu-font) {
        padding-left: 0px;
        padding-right: 25px;
    }
    li.ex-list-decimal.urdu-font::before {
        left: unset;
        right: -25px;
        font-size: 15px;
    }

    /*DISC LIST*/
    ul:has(.ex-list-disc) {
        padding-left: 15px;
    }
    li.ex-list-disc::before {
        left: -14px;
        height: 6px;
        width: 6px;
        top: 12px;
    }
    ul:has(.ex-list-disc.urdu-font), ul:has(.ex-list-disc.arabic-font), ul:has(.ex-list-disc.sindhi-font) {
        padding-left: 0px;
        padding-right: 15px;
    }
    li.ex-list-disc.urdu-font::before, li.ex-list-disc.arabic-font::before, li.ex-list-disc.sindhi-font::before {
        left: unset;
        right: -14px;
        height: 5px;
        width: 5px;
        top: 12px;
    }

    /*ROMAN LIST*/
    ol:has(.ex-list-roman) {
        padding-left: 28px;
    }
    li.ex-list-roman::before {
        left: -28px;
        font-size: 16px;
    }
    ol:has(.ex-list-roman.urdu-font) {
        padding-left: 0px;
        padding-right: 28px;
    }
    li.ex-list-roman.urdu-font::before {
        left: unset;
        right: -28px;
        font-size: 15px;
    }

    /*BLOCKQUOTE*/
    blockquote::before {
        left: -16px;
        font-size: 32px;
    }
    blockquote::after {
        right: -16px;
        font-size: 32px;
    }
    
    /*HEADING*/
    .list .guess.box h3, .list .guess.box h3 *, .list .bookmark.box h3, .list .bookmark.box h3 *, .list .search.box h3, .list .search.box h3 *, .ques .qmatter h3, .ques .qmatter h3 *, .mcqDis .g-opt-col-2 h3, .mcqDis .g-opt-col-2 h3 *, .ques .answer-wrap h3, .ques .answer-wrap h3 * {
        font-size: 20px;
    }
    .list .guess.box h3.urdu-font, .list .guess.box h3.urdu-font *, .list .bookmark.box h3.urdu-font, .list .bookmark.box h3.urdu-font *, .list .search.box h3.urdu-font, .list .search.box h3.urdu-font *, .ques .qmatter h3.urdu-font, .ques .qmatter h3.urdu-font *, .mcqDis .g-opt-col-2 h3.urdu-font, .mcqDis .g-opt-col-2 h3.urdu-font *, .ques .answer-wrap h3.urdu-font, .ques .answer-wrap h3.urdu-font * {
        font-size: 26px;
        line-height: 40px;
    }
    .list .guess.box h4, .list .guess.box h4 *, .list .bookmark.box h4, .list .bookmark.box h4 *, .list .search.box h4, .list .search.box h4 *, .ques .qmatter h4, .ques .qmatter h4 *, .mcqDis .g-opt-col-2 h4, .mcqDis .g-opt-col-2 h4 *, .ques .answer-wrap h4, .ques .answer-wrap h4 * {
        font-size: 18px;
        line-height: 22px;
    }
    .list .guess.box h4.urdu-font, .list .guess.box h4.urdu-font *, .list .bookmark.box h4.urdu-font, .list .bookmark.box h4.urdu-font *, .list .search.box h4.urdu-font, .list .search.box h4.urdu-font *, .ques .qmatter h4.urdu-font, .ques .qmatter h4.urdu-font *, .mcqDis .g-opt-col-2 h4.urdu-font, .mcqDis .g-opt-col-2 h4.urdu-font *, .ques .answer-wrap h4.urdu-font, .ques .answer-wrap h4.urdu-font * {
        font-size: 20px;
        line-height: 28px;
    }

    /* QUESTION BOX */
    .qmatter.card-style {
        padding-top: 16px;
        padding-bottom: 16px;
    }
    .list .guess.box .cnt>p, .list .guess.box .cnt>ul, .list .guess.box .cnt>ol, .list .bookmark.box .cnt>p, .list .bookmark.box .cnt>ul, .list .bookmark.box .cnt>ol, .list .search.box .cnt>p, .list .search.box .cnt>ul, .list .search.box .cnt>ol, .ques .qmatter>p, .ques .qmatter>ul, .ques .qmatter>ol {
        margin-top: 6px;
    }
    .list .guess.box .cnt>*:first-child, .list .bookmark.box .cnt>*:first-child, .list .search.box .cnt>*:first-child, .ques .qmatter>*:nth-child(2) {
        margin-top: 0px;
    }
    .list .guess.box .cnt table th, .list .bookmark.box .cnt table th, .list .search.box .cnt table th, .ques .qmatter table th {
        font-size: 15px;
        padding: 8px 12px;
    }
    .list .guess.box .cnt table td, .list .bookmark.box .cnt table td, .list .search.box .cnt table td, .ques .qmatter table td {
        padding: 8px 12px;   
    }

    /* OR SLIDER*/
    .qmatter .or-slider .or-box {
        padding: 0px 3px;
    }
    .qmatter .or-box * {
        font-size: 13px;
        line-height: 15px;
    }

    /*MCQ's*/
    .mcqDis .g-opt-col-1{
        min-width: 60px;
    }
    .mcqDis .g-opt-col-2>p, .mcqDis .g-opt-col-2>ul, .mcqDis .g-opt-col-2>ol {
        margin-top: 6px;
    }
    .mcqDis .g-opt-col-2>*:first-child {
        margin-top: 0px;
    }
    .mcqDis .g-opt-col-2 table th {
        font-size: 15px;
        padding: 8px 12px;
    }
    .mcqDis .g-opt-col-2 table td {
        padding: 8px 12px;
    }

    /* ANSWER BOX */
    .ques .answer-wrapper .answer-wrap {
        margin-top: 10px;
    }
    .ques .answer-wrap>p, .ques .answer-wrap>ul, .ques .answer-wrap>ol {
        margin-top: 6px;
    }
    .ques .answer-wrap>*:first-child {
        margin-top: 0px;
    }
    .ques .answer-wrap table th {
        font-size: 15px;
        padding: 8px 12px;
    }
    .ques .answer-wrap table td {
        padding: 8px 12px;
    }
    /*__END: QUESTION SCREENS CSS __*/
    
    
    
    
    
    /*__START: OFFCANVAS CSS __*/
    /* MORE INFO OFFCANVAS */
    .moinTable tr td{
        font-size: 14px;
        padding: 8px 6px;
    }
    .moinTable tr td:nth-of-type(1){
        width: 35%;
    }
    /*__END: OFFCANVAS CSS __*/    
}
/*__END: BELOW 768 PX CSS __*/





/*__START: BELOW 501 PX CSS __*/
@media only screen and (max-device-width: 500px) {
    #login_cont .container .centering {
        width: 100%;
    }
    #closing_cont .container .centering {
        width: 100%;
    }
    .offcanvas form {
        width: 100%;
    }
    .wa-login {
        padding: 5px 5px;
    }
    .row>* {
        padding-left: 15px;
        padding-right: 15px;
    }
    .btn-edit{
        font-size: 10px;
    }


    /*__START: ALL GRID CSS __*/
    .box-grid {
        padding-left: 9px;
        padding-right: 9px;
    }
    .box.subject .subject-icon {
        border-radius: 7px;
    }
    .box.subject p {
        font-size: 90%;
        border-radius: 5px;
        top: -10px;
        padding: 5px 0px;
    }
    .box.cc-text a {
        font-size: 14px;
    }
    /*__END: ALL GRID CSS __*/


    /*__START: QUESTION SCREENS CSS __*/
    /* OR SLIDERS*/
    .qmatter .pill.rel_note {
        border-radius: 15px;
        font-size: 13px;
        padding: 1px 14px;
    }

    /*AI PROBABILITY, MARKS, USER PROBABILITY*/
    .ques .ques-det-wrapper {
        gap: 12px;
    }
    .ques .ques-det-wrapper .box>div {
        padding: 6px;
        aspect-ratio: 20/21;
    }
    .ques .ques-det-wrapper .box>div>i {
        font-size: 25px;
    }
    .ques .ques-det-wrapper .box>div>p:nth-of-type(2) {
        font-size: 14px;
        line-height: 16px;
    }
    /*__END: QUESTION SCREENS CSS __*/
}
/*__END: BELOW 501 PX CSS __*/





/*__START: BELOW 361 PX CSS __*/
@media only screen and (max-device-width: 360px) {
    .accordion-body .box-grid .box.year>a {
        font-size: 13px;
        line-height: 16px;
    }
    
    
    /*__START: ALL GRID CSS __*/
    .box .content-wrapper .col-4, .box .content-wrapper .col-6, .box .content-wrapper .col-12 {
        padding: 10px 7px;
        font-size: 15px;
    }
    .accordion .box.cc-text {
        width: 33.33%;
    }
    .contentArea:not(.list) .accordion .bookmark.box, .contentArea:not(.list) .search.box {
        width: 50%;
    }
    .list .box .content-wrapper .top, .list .box .content-wrapper .bottom {
        max-height: 28px;
        line-height: 28px;
    }
    /*__END: ALL GRID CSS __*/



    /*START: OFFCANVAS CSS*/
    .offcanvas-title{
        font-size: 20px;
    }
    /*END: OFFCANVAS CSS*/


    /*__START: QUESTION SCREENS CSS __*/
    /* QUESTION BOX */
    .list .guess.box .cnt table th, .list .bookmark.box .cnt table th, .list .search.box .cnt table th, .ques .qmatter table th, .list .guess.box .cnt table td, .list .bookmark.box .cnt table td, .list .search.box .cnt table td, .ques .qmatter table td {
        padding: 7px 9px;
    }

    /*MCQ's*/
    .mcqDis .g-opt-col-2 table th, .mcqDis .g-opt-col-2 table td {
        padding: 7px 9px;
    }

    /*AI PROBABILITY, MARKS, USER PROBABILITY*/
    .ques .ques-det-wrapper .box>div>p:nth-of-type(2) {
        font-size: 12px;
    }

    /* ANSWER BOX */
    .ques .answer-wrap table th, .ques .answer-wrap table td {
        padding: 7px 9px;
    }
    /*__END: QUESTION SCREENS CSS __*/





    /*__START: SWEET ALERT CSS __*/
    .swal2-html-container {
        font-size: 16px !important;
    }
    /*__END: SWEET ALERT CSS __*/

}
/*__END: BELOW 361 PX CSS __*/





/*__START: BELOW 360 PX CSS SE __*/
@media only screen and (max-device-width: 359px) {
    .row>* {
        padding-left: 12px;
        padding-right: 12px;
    }
    .contentArea {
        padding: 0px 0px 90px;
    }
    .login_head, .uname p, .sub-header .class-wrapper p {
        font-size: 90%;
    }
    form, form.row {
        width: 95%;
    }
    .btn {
        font-size: 95%;
        padding: 5px 10px;
    }
    .offcanvas-header, .offcanvas-body, .offcanvas-footer {
        padding: 10px 12px;
    }
    .offcanvas-body:has(> .flttypsrc) {
        padding-top: 20px;
        padding-bottom: 0px;
    }
    .social {
        gap: 0px;
    }
    .btn.btn-login.wa-login {
        font-size: 0.75rem;
        margin-left: 3px;
    }
    .btn.btn-login.sms-login {
        font-size: 0.75rem;
        margin-right: 3px;
    }
    .circle{
        width: 34px;
        height: 34px;
    }
    .circle::after{
        width: 26px;
        height: 26px;
    }
    .headerArea .btn {
        font-size: 75%;
    }
    .footer-next-prev .nav-item.center::after {
        width: 52px;
        height: 52px;
    }
    .footer-next-prev .nav-item {
        min-width: 56px;
    }
    .footer-next-prev .nav-item i {
        font-size: 100%;
    }    
    .footer-next-prev .nav-item p, .btn-edit {
        font-size: 9px;
    }
    .p-one-eight-lato-700 {
        font-size: 16px;
        line-height: 24px;
    }
    /** Latest Fonts Responsive Css **/
    .p-16-16-14-montserrat-600, .p-16-16-14-montserrat-400 {
        font-size: 14px;
        line-height: 20px;
    }


    /*__START: ALL GRID CSS __*/
    .box-grid {
        padding-left: 6px;
        padding-right: 6px;
    }
    .box-grid .box {
        width: 33.33%;
    }
    .box.subject p {
        font-size: 12px;
        top: -11px;
        padding: 5px 0px;
    }
    .box .content-wrapper .col-4, .box .content-wrapper .col-6, .box .content-wrapper .col-12 {
        padding: 8px 6px;
        font-size: 14px;
    }
    .box .content-wrapper .cnt {
        padding: 10px 8px;
        font-size: 14px;
        line-height: 20px;
    }
    .box.cc-text a {
        font-size: 12px;
    }


    .list .box-grid .box {
        max-width: 100%;
    }
    .list .bookmark.box .cnt, .list .search.box .cnt {
        padding-top: 40px;
        padding-bottom: 40px;
    }
    /*__END: ALL GRID CSS __*/





    /*__START: ALL ACCORDION CSS__*/
    .accordion .accordion-button small {
        padding-right: 20px;
        font-size: 11px;
        line-height: 14px;
    }
    .accordion-button::after{
        right: 14px;
    }
    /*__END: ALL ACCORDION CSS__*/





    /*__START: HEADER CSS __*/
    .sub-header .sec-note {
        font-size: 10px;
        margin: 6px 0px 2px;
    }
    /*__END: HEADER CSS __*/






    /*__START: NON SUBSCRIBER CSS __*/
    button.subscription-btn {
        font-size: 16px;
    }
    button.subscription-btn small {
        font-size: 11px;
        margin: 1px 0px -4px;
    }
    /*__END: NON SUBSCRIBER CSS __*/





    /*__START: QUESTION SCREENS CSS __*/
    /*FONTS*/
    .ques .qmatter, .ques .qmatter *, .ques .mcqDis, .ques .mcqDis *, .ques .answer-wrapper * {
        font-size: 14px;
        line-height: 20px;
    }
    .urdu-font, .urdu-font *, .ques .urdu-font, .ques .urdu-font * {
        font-size: 15px;
        line-height: 26px;
    }
    .repeatation-card h2.repeat-head {
        font-size: 18px;
    }

    /*DECIMAL LIST*/
    ol:has(.ex-list-decimal) {
        padding-left: 22px;
    }
    li.ex-list-decimal::before {
        left: -22px;
        font-size: 14px;
    }
    ol:has(.ex-list-decimal.urdu-font) {
        padding-left: 0px;
        padding-right: 22px;
    }
    li.ex-list-decimal.urdu-font::before {
        left: unset;
        right: -22px;
        font-size: 13px;
    }

    /*DISC LIST*/
    ul:has(.ex-list-disc) {
        padding-left: 12px;
    }
    li.ex-list-disc::before {
        left: -11px;
        height: 5px;
        width: 5px;
        top: 10px;
    }
    ul:has(.ex-list-disc.urdu-font), ul:has(.ex-list-disc.arabic-font), ul:has(.ex-list-disc.sindhi-font) {
        padding-left: 0px;
        padding-right: 12px;
    }
    li.ex-list-disc.urdu-font::before, li.ex-list-disc.arabic-font::before, li.ex-list-disc.sindhi-font::before {
        left: unset;
        right: -11px;
        top: 13px;
    }

    /*ROMAN LIST*/
    ol:has(.ex-list-roman) {
        padding-left: 24px;
    }
    li.ex-list-roman::before {
        left: -24px;
        font-size: 14px;
    }
    ol:has(.ex-list-roman.urdu-font) {
        padding-left: 0px;
        padding-right: 24px;
    }
    li.ex-list-roman.urdu-font::before {
        left: unset;
        right: -24px;
        font-size: 13px;
    }

    /*BLOCKQUOTE*/
    blockquote {
        max-width: 90%;
        font-size: 14px;
    }
    blockquote::before,blockquote::after {
        font-size: 30px;
    }
    
    /*HEADING*/
    .list .guess.box h3, .list .guess.box h3 *, .list .bookmark.box h3, .list .bookmark.box h3 *, .list .search.box h3, .list .search.box h3 *, .ques .qmatter h3, .ques .qmatter h3 *, .mcqDis .g-opt-col-2 h3, .mcqDis .g-opt-col-2 h3 *, .ques .answer-wrap h3, .ques .answer-wrap h3 * {
        font-size: 18px;
        font-weight: 600;
    }
    .list .guess.box h3.urdu-font, .list .guess.box h3.urdu-font *, .list .bookmark.box h3.urdu-font, .list .bookmark.box h3.urdu-font *, .list .search.box h3.urdu-font, .list .search.box h3.urdu-font *, .ques .qmatter h3.urdu-font, .ques .qmatter h3.urdu-font *, .mcqDis .g-opt-col-2 h3.urdu-font, .mcqDis .g-opt-col-2 h3.urdu-font *, .ques .answer-wrap h3.urdu-font, .ques .answer-wrap h3.urdu-font * {
        font-size: 21px;
        line-height: 32px;
    }
    .list .guess.box h4, .list .guess.box h4 *, .list .bookmark.box h4, .list .bookmark.box h4 *, .list .search.box h4, .list .search.box h4 *, .ques .qmatter h4, .ques .qmatter h4 *, .mcqDis .g-opt-col-2 h4, .mcqDis .g-opt-col-2 h4 *, .ques .answer-wrap h4, .ques .answer-wrap h4 * {
        font-size: 16px;
        line-height: 20px;
    }
    .list .guess.box h4.urdu-font, .list .guess.box h4.urdu-font *, .list .bookmark.box h4.urdu-font, .list .bookmark.box h4.urdu-font *, .list .search.box h4.urdu-font, .list .search.box h4.urdu-font *, .ques .qmatter h4.urdu-font, .ques .qmatter h4.urdu-font *, .mcqDis .g-opt-col-2 h4.urdu-font, .mcqDis .g-opt-col-2 h4.urdu-font *, .ques .answer-wrap h4.urdu-font, .ques .answer-wrap h4.urdu-font * {
        font-size: 18px;
        line-height: 24px;
    }

    /*QUESTION BOX*/
    .list .guess.box .cnt>p, .list .guess.box .cnt>ul, .list .guess.box .cnt>ol, .list .bookmark.box .cnt>p, .list .bookmark.box .cnt>ul, .list .bookmark.box .cnt>ol, .list .search.box .cnt>p, .list .search.box .cnt>ul, .list .search.box .cnt>ol, .ques .qmatter>p, .ques .qmatter>ul, .ques .qmatter>ol {
        margin-top: 5px;
    }
    .list .guess.box .cnt>h3, .list .bookmark.box .cnt>h3, .list .search.box .cnt>h3, .ques .qmatter>h3, .list .guess.box .cnt>h4, .list .bookmark.box .cnt>h4, .list .search.box .cnt>h4, .ques .qmatter>h4 {
        margin-top: 8px;
    }
    .list .guess.box .cnt>*:first-child, .list .bookmark.box .cnt>*:first-child, .list .search.box .cnt>*:first-child, .ques .qmatter>*:nth-child(2) {
        margin-top: 0px;
    }
    .list .guess.box .cnt table th, .list .bookmark.box .cnt table th, .list .search.box .cnt table th, .ques .qmatter table th {
        font-size: 13px;
        padding: 6px 8px;
    }
    .list .guess.box .cnt table td, .list .bookmark.box .cnt table td, .list .search.box .cnt table td, .ques .qmatter table td {
        padding: 6px 8px;
    }
    
    /* OR SLIDER*/
    .qmatter .or-box * {
        font-size: 11px;
        line-height: 13px;
    }    
    .qmatter .pill.rel_note {
        border-radius: 13px;
        font-size: 12px;
        padding: 0px 12px;
    }

    /*MCQ's*/
    .mcqDis .g-opt-col-1{
        min-width: 50px;
    }
    .mcqDis .g-opt-col-1 * {
        font-size: 14px;
    }
    .mcqDis .g-opt-col-2{
        padding: 12px;
    }
    .mcqDis .g-opt-col-2>p, .mcqDis .g-opt-col-2>ul, .mcqDis .g-opt-col-2>ol {
        margin-top: 5px;
    }
    .mcqDis .g-opt-col-2>h3, .mcqDis .g-opt-col-2>h4 {
        margin-top: 8px;
    }
    .mcqDis .g-opt-col-2>*:first-child {
        margin-top: 0px;
    }
    .mcqDis .g-opt-col-2 table th {
        font-size: 13px;
        padding: 6px 8px;
    }
    .mcqDis .g-opt-col-2 table td {
        padding: 6px 8px;
    }

    /* REPEATATIONS */
    .ques .repeatation-card h2.repeat-head {
        font-size: 18px;
    }
    .ques .repeat-slider .card-box-style .rel-question, .repeat-slider .card-box-style .rel-section {
        font-size: 11px;
    }
    .ques .repeat-slider .card-box-style .rel-year {
        font-size: 16px;
    }

    /*AI PROBABILITY, MARKS, USER PROBABILITY*/
    .ques .ques-det-wrapper .box>div>p:nth-of-type(2) {
        font-size: 11px;
    }

    /*ANSWER BOX*/
    .ques .answer-wrapper>h2.repeat-head {
        font-size: 18px;
    }
    .ques .answer-wrapper .answer-wrap {
        margin-top: 8px;
    }
    .ques .answer-wrap>h3, .ques .answer-wrap>h4 {
        margin-top: 8px;
    }
    .ques .answer-wrap>p, .ques .answer-wrap>ul, .ques .answer-wrap>ol {
        margin-top: 5px;
    }
    .ques .answer-wrap>*:first-child {
        margin-top: 0px;
    }
    .ques .answer-wrap table th {
        font-size: 13px;
        padding: 6px 8px;
    }
    .ques .answer-wrap table td {
        padding: 6px 8px;
    }
    /*__END: QUESTION SCREENS CSS __*/





    
    /*__START: OFFCANVAS CSS __*/
    /* SEARCH OFFCANVAS */
    .search-pill {
        font-size: 12px;
    }
    
    /* MORE INFO OFFCANVAS */
    .moinTable tr td:nth-of-type(1){
        width: 38%;
    }

    /* SUGGEST OFFCANVAS */
    .offcanvas-body:has(.sug-pill-container) {
        padding-top: 18px;
    }
    .sug-alert {
        padding: 8px 12px;
        font-size: 14px;
    }
    .sug-pill-container {
        margin-top: 12px;
    }
    /*__END: OFFCANVAS CSS __*/




    /*__START: SWEET ALERT CSS __*/
    .swal2-icon-show {
        margin-top: 18px !important;
        margin-bottom: 0px !important;
    }
    /*__END: SWEET ALERT CSS __*/
}
/*__END: BELOW 360 PX CSS __*/





/*__START: HEIGHT BELOW 651 PX CSS __*/
.sm-height .contentArea {
    padding: 0px 0px 90px;
}
.sm-height .offcanvas-body .input-div:nth-of-type(1), .sm-height .offcanvas-body .inputphone:nth-of-type(1) {
    margin-top: 12px;
}
.sm-height .input-div, .sm-height .inputphone {
    margin: 18px 0;
}
.sm-height .input-div>div>h5,.sm-height .inputphone>div>h5 {
    left: 2px;
}
.sm-height .inputphone>div>h5 {
    left: 36px;
}
.sm-height .input-div>div>input, .sm-height .inputphone .iti input {
    padding-top: 0.6rem;
    padding-left: 2px;
}
.sm-height .inputphone .iti input[type=text] {
    padding-left: 36px;
}
.sm-height .iti__arrow {
    margin-left: 4px;
}
.sm-height .input-div.focus>div>h5,.sm-height .inputphone.focus>div>h5 {
    top: -2px;
}
.sm-height .input-div.error, .sm-height .inputphone.error {
    margin-bottom: 32px;
}
.sm-height .input-div .inputerror, .sm-height .inputphone .inputerror {
    top: 39px;
    font-size: 10px;
}
.sm-height .select-btn-add {
    padding-left: 0px;
    padding-top: 7px;
}
.sm-height .login_head {
    margin-top: 35px;
}
.sm-height .login-content {
    margin-bottom: 0px;
}
.sm-height .offcanvas .login-content {
    margin-bottom: 10px;
}
.sm-height .brand_logo_container {
    width: 100px;
    top: -50px;
}
.sm-height .brand_logo {
    width: 80px;
}
.sm-height .btn-login {
    width: 100%;
    height: 40px;
}
.sm-height #login_cont .centering>.col-12:nth-of-type(2), .sm-height #login_cont .centering>.col-12:nth-of-type(2) .social {
    margin-top: 1rem;
}
.sm-height #closing_cont .centering>.col-12:nth-of-type(2), .sm-height #closing_cont .centering>.col-12:nth-of-type(2) .social {
    margin-top: 1rem;
}
.sm-height .fixed-bottom {
    bottom: 12px;
}
.sm-height .offcanvas-header .fa-solid {
    font-size: 14px;
}
.sm-height .offcanvas-header button {
    width: 35px;
    min-height: 35px;
    height: 35px;
}
.sm-height .offcanvas-title {
    font-size: 18px;
    left: 43px;
}
.sm-height .input-div>div>input, .sm-height .inputphone .iti input, .sm-height .select-btn-add, .sm-height .btn-login {
    font-size: 1rem;
}
.sm-height ul.selection-list li, .sm-height .fixed-bottom p, .sm-height .accordion-button {
    font-size: 0.9rem;
}
.sm-height .footer-next-prev .nav-item.center i {
    font-size: 24px;
}
.sm-height .sub-header .breadcrums span, .sm-height .sub-header .breadcrums a {
    font-size: 10px;
}
.sm-height .sub-header .breadcrums i {
    font-size: 8px;
}
.sm-height .sub-header {
    padding: 52px 0px 7px;
}
.sm-height .sub-header .class-wrapper, .sm-height .sub-header .breadcrums, .sm-height .sub-header .btn-wrapper {
    margin-top: 8px;
}
.sm-height .btn {
    padding: 5px 10px;
}
.sm-height button.btn.skeleton.toppaper {
    height: 27px;
    max-width: 85px;
}
.sm-height .accordion-button {
    padding: 14px 18px;
}
.sm-height .accordion-button::after {
    background-position-y: center;
    background-size: 18px;
}
/*__END: HEIGHT BELOW 651 PX CSS __*/
/* Chrome, Safari, Edge, Opera */
input::-webkit-outer-spin-button,
input::-webkit-inner-spin-button {
  -webkit-appearance: none;
  margin: 0;
}

/* Firefox */
input[type=number] {
  -moz-appearance: textfield;
}

a.disabled {
  pointer-events: none;
  cursor: default;
  color: var(--sec-color);
}

.login_otp .alert i {
    font-size: 28px;
    color: var(--bs-alert-color);
}
.login_otp .alert .alert-text {
    font-size: 16px;
    font-family: var(--lato-font);
    color: var(--bs-alert-color);
}

.contentArea.list tbody tr {
    padding: 0;
    position: relative;
    width: 100%;
    background: var(--white-color);
    z-index: 1;
    border-radius: 12px;
    box-shadow: var(--card-shadow-7);
    overflow: hidden;
    aspect-ratio: unset;
    height: 100%;
}

.contentArea.list tbody tr {
    padding: 0;
    position: relative;
    width: 100%;
    background: var(--white-color);
    z-index: 1;
    border-radius: 12px;
    box-shadow: var(--card-shadow-7);
    overflow: hidden;
    aspect-ratio: unset;
    height: 100%;
    margin-bottom: 24px;
}

.contentArea.list tbody {
    display: flex;
    flex-wrap: wrap;
    width: 100%;
    padding-left: 4px;
    padding-right: 4px;
}

.contentArea.list table thead {
    display: none;
}

.contentArea.list tbody tr td:nth-child(1) {
    display: block;
    background-color: var(--pri-color);
    width: 100%;
    text-align: center;
    padding: 10px 0;
    font-size: 18px;
    color: var(--white-color);
}

.contentArea:not(.khlist).list tbody tr td:nth-child(n+2):nth-last-child(n+2) {
    border: 1px solid #dcdbdb;
    padding: 0;
    display: flex;
    flex-wrap: wrap;
    justify-content: flex-start;
}

.contentArea.khlist tbody tr td:nth-child(n+2) {
    border: 1px solid #dcdbdb;
    padding: 0;
    display: flex;
    flex-wrap: wrap;
    justify-content: flex-start;
}

.contentArea.list tbody tr td label {
    padding: 8px 10px;
    width: 40%;
    display: flex;
    background-color: #eeeeee;
    align-items: center;
    font-weight: bold;
    font-family: var(--ubunto-font);
}

.contentArea.list tbody tr td label>span {
    font-weight: bold;
    font-family: var(--ubunto-font);
}

.contentArea.list tbody tr td>span {
    width: 60%;
    display: flex;
    align-items: center;
    padding: 8px 10px;
}

.contentArea.khlist tbody tr td label {
    width: 50%;
}
.contentArea.list tbody tr td>span {
    width: 50%;
}

.contentArea:not(.khlist).list tbody tr td:nth-last-child(2) {
    border-bottom: 0 !important;
}

.contentArea:not(.khlist).list tbody tr td:nth-last-child(1) {
    padding: 0;
    display: flex;
    justify-content: space-evenly;
    max-height: 50px;
    line-height: 50px;
    bottom: 0;
    background-color: var(--sec-color);
    left: 0px;
    width: 100%;
    text-align: center;
    font-size: 27px;
    color: var(--white-color);
    border-bottom: 0;
}

.contentArea:not(.khlist).list tbody tr td:nth-last-child(1) button {
    width: 50%;
    color: var(--white-color);
    padding: 10px 0 !important;
    border-radius: 0;
}

.contentArea table.dataTable {
    width: 100% !important;
}

.contentArea.list table colgroup col {
    width: 100% !important;
}

.memberlisttable .input-div>div>h5 {
    font-size: 18px;
}

.footer-next-prev .nav-item.active i, .footer-next-prev .nav-item.active p {
    color: #a5e8a6;
}

.membertabcontainer {
	 left: 0;
	 top: 0;
	 right: 0;
	 bottom: 0;
	 display: flex;
	 align-items: center;
	 justify-content: center;
}
 .membertabs {
	 display: flex;
	 position: relative;
	 background-color: #fff;
	 box-shadow: var(--card-shadow-8);
	 padding: 0.75rem;
	 border-radius: 99px;
}
 .membertabs * {
	 z-index: 2;
}
.memberradio {
	 display: none;
}
.memberradio:checked + label {
	 color: var(--white-color);
}
.memberradio:checked + label > .notification {
	 background-color: var(--white-color);
	 color: #fff;
}
.membertab {
	 display: flex;
	 align-items: center;
	 justify-content: center;
	 height: 40px;
     width: 140px;
	 font-size: 1.25rem;
	 font-weight: 500;
	 border-radius: 99px;
	 cursor: pointer;
	 transition: color 0.15s ease-in;
}
 input[id="pendingshow"]:checked ~ .glider {
	 transform: translateX(0);
	 background: var(--pending-linear);
}
 input[id="allshow"]:checked ~ .glider {
	 transform: translateX(100%);
	 background: var(--black-linear);
}
 input[id="updatedshow"]:checked ~ .glider {
	 transform: translateX(200%);
	 background: var(--primary-linear);
}
.glider {
	 position: absolute;
	 display: flex;
	 height: 40px;
     width: 140px;
	 z-index: 1;
	 border-radius: 99px;
	 transition: 0.25s ease-out;
}
@media (max-width: 700px) {
	 .membertabs {
		 transform: scale(0.75);
	}
}
@media (max-width: 350px) {
	 .membertabs {
		 transform: scale(0.7);
	}
}
.membertabcontainer {
	margin-bottom: 10px;
}
@media (min-width: 701px) {
	 .membertabcontainer {
	     margin-bottom: 20px;
	 }
	 .contentArea.list tbody {
	     justify-content: space-between;
	 }
	 .contentArea.list tbody tr {
	     flex-basis: 48%;
	 }
}

.btn-pending, .btn-updated {
    display: block;
    color: var(--white-color);
    border-radius: 25px;
    outline: none;
    border: none;
    font-size: 16px;
    font-family: 'Poppins', sans-serif;
    cursor: pointer;
    transition: .5s;
    padding: 8px 30px
}

.btn-pending {
    background: var(--pending-linear);
}

.btn-updated {
    background: var(--primary-linear);
}

.btn-updated i,.btn-pending i {
    color: var(--white-color);
    margin-right: 5px;
}
.sub-header {
    position: fixed;
    top: 0;
    z-index: 99;
}

.headerArea {
    height: 120px;
}

.grecaptcha-badge { visibility: hidden; }

.btn-mark-updated, .btn-mark-updated {
    margin-right: 0 !important;
    margin-left: 0 !important;
    border-radius: 0;
    border-left-color: #f5f5f5;
    border-top: unset;
    font-size: 13px;
}

.btn-edit-member {
    background: #004f89;
}

.btn-mark-updated {
    background: #9e0101;
}

.btn-edit-member i, .btn-mark-updated i {
    color: white;
    margin-right: 5px;
    font-size: 14px;
}

.btn-no-update {
    width: 100% !important;
    border-left: 0;
}

.memberstatts .counter-box {
	display: block;
	background: #f6f6f6;
	padding: 10px 20px 10px;
	border-radius: 100px;
	text-align: center
}

.memberstatts .counter-box p {
	margin: 7px 0 0;
	padding: 0;
	color: #909090;
	font-size: 18px;
	font-weight: 500;
	border-top: 2px solid white;
    padding-top: 7px;
}

.memberstatts .counter { 
	display: block;
	font-size: 30px;
	font-weight: 700;
	color: #666;
	line-height: 28px
}

.memberstatts .counter-box.pendingcolored {
      background: #fc9b0040;
}
.memberstatts .counter-box.totalcolored {
      background: #50505040;
}
.memberstatts .counter-box.updatedcolored {
      background: #00840f40;
}

.memberstatts .counter-box.totalcolored p,
.memberstatts .counter-box.totalcolored .counter {
	color: var(--sec-color);
}

.memberstatts .counter-box.updatedcolored p,
.memberstatts .counter-box.updatedcolored .counter {
	color: #00840f;
}

.memberstatts .counter-box.pendingcolored p,
.memberstatts .counter-box.pendingcolored .counter {
	color: #fc9b00;
}

.memberstatts .innermembers {
    display: flex;
    column-count: 1;
    width: 100%;
    flex-wrap: wrap;
    justify-content: center;
}

.memberstatts .innermembers>div {
    width: 60%;
}

.memberstatts .totalcolored p {
    border-color: #b2b2b2;
}

.memberstatts .updatedcolored p {
    border-color: #83c08aa1;
}

.memberstatts .pendingcolored p {
    border-color: #ffc66cb3;
}

.fa-duotone, .fa-brands {
    color: var(--pri-color);
}

.fa-duotone.fa-circle-notch.spin {
    color: white;
}