@font-face {
    font-family: "ProximaNova-Regular";
    src: url(../fonts/ProximaNova/ProximaNova-Font.otf);
}

@font-face {
    font-family: "ProximaNova-Bold";
    src: url(../fonts/ProximaNova/ProximaNova-Bold.otf);
}

:root {
    --color-main-1: #00b49d;
    --color-main-2: #cd4960;
    --color-main-3: #2e4679;
    --color-secondary-1: #c8a63b;
    --color-secondary-2: #f5aa3e;
    --color-secondary-3: #f5f5f5;
    --color-secondary-4: #381c57;
    --color-secondary-5: #ffd598;
    --color-secondary-6: #1563FF;
    --color-secondary-7: #0083c7;
    --color-secondary-8: #EB8945;
    --color-secondary-9: #f1f5ff;
    --color-secondary-10: #FBDCDC;
    --color-secondary-19: #630AD0;
    --color-semantic-danger: #ca4363;
    --color-semantic-alert: #fbdcdc;
    --color-semantic-hover: #2d2f3e;
    --color-semantic-success: #04819E;
    --color-semantic-warning: #04819E;
    --color-semantic-primary: #5b91ff;
    --color-semantic-shuttle: #eaf1ff;
    --color-neutral-0: #FFFFFF;
    --color-neutral-1: #15161d;
    --color-neutral-2: #222433;
    --color-neutral-3: #333333;
    --color-neutral-4: #444444;
    --color-neutral-5: #555555;
    --color-neutral-6: #666666;
    --color-neutral-7: #666666;
    --color-neutral-8: #666666;
    --color-neutral-9: #666666;
    --color-neutral-10: #e0e1e2;
    --color-transparent: transparent;
    --sperator-color-1: #c7c7c7;
    --sperator-color-2: #d7d7d79e;
    --sperator-color-3: #E0E0E0;
    --top-menu-height: 50px;
    --banner-img-height: 100px;
    --shadow-dim: rgba(149, 157, 165, 0.2) 0px 8px 24px;
    --shadow-dim-all: rgba(100, 100, 111, 0.2) 0px 7px 29px 0px;
    --shadow-thin: rgba(0, 0, 0, 0.15) 1.95px 1.95px 2.6px;
    --shadow-dark: rgba(0, 0, 0, 0.35) 0px 5px 15px;
    --radius-s: 3px;
    --radius-m: 5px;
    --radius-l: 7px;
    --gap-col-2xs: 0.5rem;
    --box-pad-xs: 0.3rem 1rem;
    --fs-3xl: 3rem;
    --fs-2xl: 2rem;
    --fs-xl: 1.7rem;
    --fs-l: 1.5rem;
    --fs-m: 1.2rem;
    --fs-s: 1rem;
    --fs-xs: 0.8rem;
    --fs-2xs: 0.7rem;
    --gap-col-l: 2rem;
    --gap-col-l: 2rem;
    --gap-col-m: 1.5rem;
    --gap-col-s: 1rem;
    --gap-col-xs: 0.7rem;
    --gap-row-l: 2rem;
    --gap-row-m: 1.5rem;
    --gap-row-s: 1rem;
    --gap-row-xs: 0.7rem;
    --gap-l: 2rem;
    --gap-m: 1.5rem;
    --gap-s: 1rem;
    --gap-xs: 0.7rem;
    --space-l: 10%;
    --space-m: 5%;
    --space-s: 1rem;
    --space-xs: 0.7rem;
    --space-2xs: 0.5rem;
    --box-pad-3xl: 0.8rem 1.5rem;
    --box-pad-l: 0.5rem 1.3rem;
    --box-pad-m: 0.5rem 1rem;
    --box-pad-s: 0.4rem 1rem;
    --border-radius-s: 4px;
    --border-width-xs: 1px;
    --font-family-base: "ProximaNova-Regular";
    --font-family-bold: "ProximaNova-Bold";
    --banner-gradient: linear-gradient(135deg, var(--color-secondary-1) 0%,var(--color-secondary-2) 50%, var(--color-main-2) 100%);
    --bs-border-radius-sm: 0.25rem;
}
/**typography**/

*,
*::before,
*::after {
    box-sizing: border-box;
}

/* Remove default margin */
body,
h1,
h2,
h3,
h4,
p,
figure,
blockquote,
dl,
dd {
    margin: 0 !important;
}

ul,
ol {
    list-style: none;
    margin: 0 !important;
    padding: 0 !important;
}

/* Set core root defaults */
html {
    scroll-behavior: smooth;
}

/* Set core body defaults */
body {
    font-family: var(--font-family-base);
    font-size: var(--fs-s);
    overflow: hidden;
    text-rendering: optimizeSpeed;
    height: 100vh;
    height: 100svh;
}

/* A elements that don't have a class get default styles */
a:not([class]) {
    text-decoration-skip-ink: auto;
}

a {
    text-decoration: none;
}

/* Make images easier to work with */
img,
picture {
    display: block;
    max-width: 100%;
}

/* Inherit fonts for inputs and buttons */
input,
button,
textarea,
select {
    font: inherit;
}

/* Remove all animations, transitions and smooth scroll for people that prefer not to see them */
@media (prefers-reduced-motion: reduce) {
    html {
        scroll-behavior: auto;
    }

    *,
    *::before,
    *::after {
        animation-duration: 0.01ms !important;
        animation-iteration-count: 1 !important;
        scroll-behavior: auto !important;
        transition-duration: 0.01ms !important;
    }
}


h1, h2, h3, h4, h5, h6 {
    font-family: var(--font-family-bold);
    margin: 0px !important;
    padding: 0px !important;
    color: var(--color-secondary-4) !important;
}

h1 {
    font-size: var(--fs-2xl);
}

h2 {
    font-size: var(--fs-xl);
}

h3 {
    font-size: var(--fs-l);
}

h4 {
    font-size: var(--fs-m);
}

h5 {
    font-size: var(--fs-s);
}

h6 {
    font-size: var(--fs-xs);
}

small {
    font-size: var(--fs-2xs);
}

strong, b {
    font-family: var(--font-family-bold);
}

.primary-fg {
    color: var(--color-main-1) !important;
}

.secondary-fg-1 {
    color: var(--color-secondary-1) !important;
}

.secondary-fg-2 {
    color: var(--color-secondary-2) !important;
}

.secondary-fg-3 {
    color: var(--color-secondary-3) !important;
}

.secondary-fg-4 {
    color: var(--color-secondary-4) !important;
}

.secondary-fg-5 {
    color: var(--color-secondary-5) !important;
}

.bg-secondary-1 {
    background-color: var(--color-secondary-1);
}

.bg-secondary-2 {
    background-color: var(--color-secondary-2);
}

.bg-secondary-3 {
    background-color: var(--color-secondary-3);
}

.bg-secondary-4 {
    background-color: var(--color-secondary-4);
}

.bg-secondary-5 {
    background-color: var(--color-secondary-5);
}

.tertiary-fg {
    color: var(--color-secondary-1) !important;
}

.neutral-fg-0 {
    color: var(--color-neutral-0) !important;
}

.neutral-fg-1 {
    color: var(--color-neutral-1) !important;
}

.neutral-fg-2 {
    color: var(--color-neutral-2) !important;
}

.neutral-fg-3 {
    color: var(--color-neutral-3) !important;
}

.neutral-fg-4 {
    color: var(--color-neutral-4) !important;
}

.neutral-fg-5 {
    color: var(--color-neutral-5) !important;
}

.neutral-fg-6 {
    color: var(--color-neutral-6) !important;
}

.fs-3xl {
    font-size: var(--fs-3xl);
}

.fs-2xl {
    font-size: var(--fs-2xl);
}

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

.fs-l {
    font-size: var(--fs-l);
}

.fs-m {
    font-size: var(--fs-m);
}

.fs-s {
    font-size: var(--fs-s);
}

.fs-xs {
    font-size: var(--fs-xs);
}

.fs-2xs {
    font-size: var(--fs-2xs);
}

.font-bold {
    font-family: var(--font-family-bold);
}

.content-space-l {
    padding: 0px var(--space-l)
}

.content-space-m {
    padding: 0px var(--space-m)
}

.content-space-s {
    padding: 0px var(--space-s)
}

.content-space-xs {
    padding: 0px var(--space-xs)
}

.pad-reset {
    padding: 0px;
}
/**buttons**/

button, a {
    cursor: pointer;
    padding: 0;
    text-decoration: none;
}

.gap-reset {
    row-gap: 0rem !important;
    column-gap: 0rem !important;
}

.row-gap-l {
    row-gap: var(--gap-row-l) !important;
}

.row-gap-s {
    row-gap: var(--gap-row-s) !important;
}

.row-gap-m {
    row-gap: var(--gap-row-m) !important;
}

.col-gap-l {
    column-gap: var(--gap-row-l) !important;
}

.col-gap-s {
    column-gap: var(--gap-row-s) !important;
}

.col-gap-m {
    column-gap: var(--gap-row-m) !important;
}

.aLink {
    --button-bg: var(--color-transparent);
    --button-color: var(--color-secondary-1);
    --button-padding: var(--box-pad-xs);
    --button-border-width: var(--border-width-xs);
    --button-border-color: var(--color-transparent);
    --button-radius: var(--border-radius-s);
    --button-col-gap: var(--gap-col-xs);
    --button-size: var(--fs-s);
    column-gap: var(--button-col-gap);
    background-color: var(--button-bg);
    color: var(--button-color);
    font-size: var(--button-size);
    display: flex;
    align-items: center;
    padding: var(--button-padding);
}

.btn {
    --button-bg: var(--color-transparent);
    --button-color: var(--color-main-1);
    --button-padding: var(--box-pad-xs);
    --button-border-width: var(--border-width-xs);
    --button-border-color: var(--color-transparent);
    --button-radius: var(--border-radius-s);
    --button-col-gap: var(--gap-col-2xs);
    --button-size: var(--fs-xs);
    column-gap: var(--button-col-gap);
    background-color: var(--button-bg) !important;
    color: var(--button-color) !important;
    font-size: var(--button-size);
    display: flex;
    justify-content: center;
    align-items: center;
    padding: var(--button-padding) !important;
    border-width: var(--button-border-width);
    border-style: solid;
    border-color: var(--button-border-color) !important;
    border-radius: var(--button-radius);
    outline-color: transparent;
}

    .btn:hover {
        --button-border-color: var(--color-transparent);
    }

    .btn.has-icon {
        --button-font: var(--type-emphasis-m);
        text-transform: initial;
    }

    .btn:focus {
        --button-border-color: var(--color-transparent);
    }

    .btn:disabled {
        --button-color: var(--color-neutral-4);
        --button-bg: var(--color-neutral-6);
        border-width: 0px !important;
    }

.btn-primary {
    --button-border-color: var(--color-secondary-19);
    --button-bg: var(--color-secondary-19);
    --button-col-gap: var(--gap-col-xs);
    --button-color: var(--color-neutral-0);
    --button-padding: var(--box-pad-m);
}

.btn-number {
    padding: 0.3rem 0.5rem;
}

.btn-primary:hover {
    --button-bg: var(--color-main-2) !important;
    --button-border-color: var(--color-main-2) !important;
}

.btn-primary:focus {
    --button-border-color: #A56509 !important;
    --button-bg: #A56509 !important;
}

.btn-primary-med {
    --button-size: var(--fs-2xs);
    --button-border-color: var(--color-main-1);
    --button-bg: var(--color-main-1);
    --button-color: var(--color-neutral-0);
    --button-padding: var(--box-pad-xs);
}

    .btn-primary-med:hover {
        --button-bg: var(--color-secondary-2);
        --button-border-color: var(--color-secondary-2);
    }

    .btn-primary-med:focus {
        --button-bg: var(--color-neutral-2);
        --button-border-color: var(--color-neutral-2);
    }

.btn-primary-light {
    --button-border-color: #008574;
    --button-bg: #008574;
    --button-col-gap: var(--gap-col-xs);
    --button-color: var(--color-neutral-0);
    --button-padding: var(--box-pad-m);
    font-family: var(--font-family-bold);
    font-size: var(--fs-m);
}

    .btn-primary-light:hover {
        --button-bg: var(--color-main-2) !important;
        --button-border-color: var(--color-main-2) !important;
    }

    .btn-primary-light:focus {
        --button-bg: var(--color-neutral-2);
        --button-border-color: var(--color-neutral-2);
    }

.btn-secondary {
    --button-border-color: var(--color-secondary-19);
    --button-bg: var(--color-neutral-0);
    --button-padding: var(--box-pad-m);
    --button-color: var(--color-secondary-19);
}

    .btn-secondary:hover {
        --button-border-color: var(--color-main-2);
        --button-color: var(--color-main-2);
    }

    .btn-secondary:focus {
        --button-border-color: #A56509;
        --button-bg: var(--color-neutral-0);
    }

.btn-secondary-med {
    --button-border-color: var(--color-main-1);
    --button-bg: var(--color-neutral-0);
    --button-size: var(--fs-2xs);
}

    .btn-secondary-med:hover {
        --button-border-color: var(--color-secondary-2);
        --button-color: var(--color-secondary-2);
    }

    .btn-secondary-med:focus {
        --button-border-color: var(--color-neutral-2);
        --button-color: var(--color-neutral-2);
    }

.btn-secondary-light {
    --button-color: var(--color-neutral-0);
    --button-border-color: var(--color-neutral-6);
}

    .btn-secondary-light:hover {
        --button-border-color: var(--color-main-2);
        --button-color: var(--color-main-2);
    }

.btn-tertiary {
    --button-padding: var(--box-pad-3xl);
}

    .btn-tertiary:hover {
        text-decoration: underline;
    }

    .btn-tertiary:focus {
        --button-color: var(--color-neutral-2);
    }

.btn-tertiary-light {
    --button-color: var(--color-neutral-0);
    --button-border-color: var(--color-neutral-6);
}

.btn-tertiary:hover {
    --button-color: var(--color-main-2);
}

.btn-link {
    --button-padding: var(--box-pad-3xs);
    --button-color: var(--color-main-1);
    --button-border-color: var(--color-transparent);
}

.btn-trans {
    --button-padding: 0px 0.5rem !important
}

.btn-logout {
    --button-color: var(--color-secondary-4);
    font-size: var(--fs-s);
    font-family: var(--font-family-bold);
}

.btn-link:hover {
    text-decoration: underline;
}

.btn-link:focus {
    --button-color: var(--color-neutral-2);
}

.btn-link-light {
    --button-color: var(--color-neutral-0);
    --button-border-color: var(--color-neutral-6);
    --button-border-color: var(--color-transparent);
}

    .btn-link-light:hover {
        --button-color: var(--color-main-2);
    }

.btn-chip-primary {
    --button-border-color: var(--color-neutral-4);
    --button-bg: var(--color-neutral-0);
    --button-color: var(--color-neutral-2);
    --button-padding: var(--box-pad-m);
    --button-radius: var(--border-radius-xl);
}

.btn-number {
    background-color: var(--color-secondary-9) !important;
    --button-color: #007A6B;
}

.btn-chip-primary-light {
    --button-border-color: var(--color-main-1);
    --button-bg: var(--color-neutral-0);
    --button-color: var(--color-main-1);
    --button-padding: var(--box-pad-m);
}

    .btn-chip-primary-light:hover {
        --button-border-color: var(--color-secondary-2);
        --button-color: var(--color-secondary-2);
    }

    .btn-chip-primary-light:focus {
        --button-bg: var(--color-neutral-2);
        --button-border-color: var(--color-neutral-2);
    }

.btn-chip-primary-med {
    --button-border-color: var(--color-neutral-4);
    --button-bg: var(--color-neutral-0);
    --button-color: var(--color-neutral-2);
    --button-padding: var(--box-pad-m);
    --button-radius: var(--border-radius-xl);
}

    .btn-chip-primary-med:hover {
        --button-bg: var(--color-secondary-2);
        --button-border-color: var(--color-secondary-2);
    }

    .btn-chip-primary-med:focus {
        --button-bg: var(--color-neutral-2);
        --button-border-color: var(--color-neutral-2);
    }

.btn-chip-primary:hover {
    --button-border-color: var(--color-main-1);
    --button-color: var(--color-main-1);
}

.btn-chip-primary:focus {
    --button-border-color: var(--color-main-1);
    --button-color: var(--color-main-1);
}

.btn-chip-primary.active {
    --button-border-color: var(--color-main-1);
    --button-bg: var(--color-main-1);
    --button-color: var(--color-neutral-0);
}

.btn-chip-primary:hover {
    --button-border-color: var(--color-main-1);
    --button-bg: var(--color-neutral-0);
    --button-color: var(--color-main-1);
}


.btn-tab-primary {
    --button-border-color: var(--color-neutral-0);
    --button-bg: var(--color-neutral-0);
    --button-color: var(--color-neutral-2);
    --button-padding: var(--box-pad-m);
    --button-font-size: var(--fs-m);
    --button-border-width: var(--border-width-0);
    --button-radius: var(--border-radius-0);
    border-bottom: var(--border-width-s);
    border-bottom-color: var(--color-neutral-0);
    border-bottom-style: solid;
}

    .btn-tab-primary:hover {
        --button-color: var(--color-main-2);
    }

    .btn-tab-primary:focus {
        --button-border-color: var(--color-main-2);
        --button-color: var(--color-main-2);
    }

    .btn-tab-primary.active {
        border-bottom-color: var(--color-main-2);
        font-family: var(--font-family-bold);
    }

.btn-tab-primary-med {
    --button-border-color: var(--color-neutral-4);
    --button-bg: var(--color-neutral-0);
    --button-color: var(--color-neutral-2);
    --button-padding: var(--box-pad-m);
    --button-radius: var(--border-radius-xl);
}

    .btn-tab-primary-med:hover {
        --button-bg: var(--color-secondary-2);
        --button-border-color: var(--color-secondary-2);
    }

    .btn-tab-primary-med:focus {
        --button-bg: var(--color-neutral-2);
        --button-border-color: var(--color-neutral-2);
    }

.btn-tab-primary-light {
    --button-border-color: var(--color-main-1);
    --button-bg: var(--color-neutral-0);
    --button-color: var(--color-main-1);
    --button-padding: var(--box-pad-m);
}

    .btn-tab-primary-light:hover {
        --button-border-color: var(--color-secondary-2);
        --button-color: var(--color-secondary-2);
    }

    .btn-tab-primary-light:focus {
        --button-bg: var(--color-neutral-2);
        --button-border-color: var(--color-neutral-2);
    }

.control-label {
    font-size: var(--fs-xs);
}

.banner-form-area .control-label {
    font-size: var(--fs-s);
}

.show {
    display: block;
}

.hide {
    display: none;
}

.registration-form .form-check-input[type=radio] {
    border: 2px solid var(--color-secondary-5);
    background-color: white;
}

.registration-form .form-check-input:checked {
    border: 4px solid white;
    background-color: var(--color-secondary-2);
    --bs-form-check-bg-image: none;
}



.radio-link {
    color: var(--color-neutral-0);
    text-decoration: none;
    display: flex;
    align-items: center;
    column-gap: 0.5rem;
    padding: 0px;
    font-size: var(--fs-xs);
    font-family: var(--font-family-bold);
}

    .radio-link.active::before {
        content: '';
        position: relative;
        height: 1rem;
        width: 1rem;
        border-radius: 2rem;
        border: 4px solid white;
        background-color: var(--color-secondary-2);
    }

    .radio-link::before {
        content: '';
        position: relative;
        height: 1rem;
        width: 1rem;
        border-radius: 2rem;
        border: 2px solid var(--color-secondary-5);
        background-color: white;
    }

.bg-circle-grey {
    display: flex;
    border-radius: 50%;
    font-size: 0.8rem;
    background-color: var(--sperator-color-3);
    width: 2rem;
    height: 2rem;
    justify-content: center;
    align-items: center;
    position: relative;
}
/**layout**/
.form-check-label {
    font-size: var(--fs-xs);
}

header {
    position: sticky;
    display: grid;
    grid-auto-flow: column;
    justify-content: space-between;
    height: var(--top-menu-height);
    top: 0px;
    z-index: 9;
    padding: 0px var(--space-xs);
    background-color: var(--color-neutral-1);
    align-items: center;
}

.main-section {
    display: grid;
    grid-auto-flow: row;
    grid-auto-rows: var(--top-menu-height) 1fr;
    min-height: 100vh;
}

section.route-container {
    display: grid;
    overflow-y: auto;
    max-height: calc(100vh - var(--top-menu-height));
    grid-auto-flow: row;
    grid-row-gap: var(--gap-row-s);
    align-items: start;
}

main {
    display: grid;
    grid-auto-flow: column;
    grid-template-columns: 250px 1fr;
}

.menu-collpased {
    grid-template-columns: 50px 1fr;
    transition: all;
}

    .menu-collpased .nav-label {
        display: none;
    }

section.left-nav {
    display: block;
    overflow-y: auto;
    max-height: calc(100vh - var(--top-menu-height));
    background-color: var(--color-neutral-2);
    overflow-x: hidden;
}

section.logo-section {
    display: grid;
    align-items: center;
    grid-auto-flow: column;
    grid-column-gap: var(--gap-col-s);
}

    section.logo-section > a {
        color: var(--color-neutral-0);
        font-size: var(--fs-l);
    }

.logo-name {
    color: var(--color-neutral-0);
    font-size: var(--fs-m);
    position: relative;
    margin-left: 0.7rem;
}

.project-name {
    color: var(--color-neutral-0);
    font-size: var(--fs-m);
    font-family: var(--font-family-bold);
    position: relative;
}

.logo-name::before {
    content: '';
    position: absolute;
    width: 24px;
    height: 24px;
    background: var(--color-main-1);
    z-index: 2;
    left: -12px;
    top: -1px;
    border-radius: 50%;
}

.logo-name > span {
    position: relative;
    z-index: 3;
    font-size: var(--fs-l);
}

.v-sep {
    height: 90%;
    width: 1px;
    background-color: var(--sperator-color-2);
    top: 0;
    position: relative;
}

.action-section {
    color: var(--color-neutral-10);
    font-size: var(--fs-s);
}
/**Bread crumbs**/
.bread-crumbs {
    background-color: var(--color-secondary-3);
    padding: 0.6rem 1rem;
}

    .bread-crumbs ul {
        grid-column-gap: var(--gap-col-xs);
    }

li.current {
    color: var(--color-neutral-6);
}

.bread-crumbs ul li:not(:last-child) {
    display: flex;
    column-gap: 0.5rem;
}

/** d-grid   **/

.no-wrap {
    white-space: nowrap;
}
/**image-banner**/

section.page-banner {
    height: 100vh;
    display: grid;
}

section.page-content-area {
    overflow: auto;
    height: calc(100vh - var(--banner-img-height) - 60px);
   /* background: var(--banner-gradient);
    padding: 2rem;*/
    padding: 0 2rem 2rem 2rem;
    background: linear-gradient( to bottom, #000000 0%, #1a003a 13%, #2e015f 25%, #2e015f 38%, #462573 50%, #6d5a95 63%, #9686b7 75%, #c9c3d9 88%, #f0f0f2 100% );
}

.page-space-xl {
    padding: 2rem clamp(2rem, 10vw, 7rem);
}

section.page-banner > * {
    grid-column: 1/-1;
    grid-row: 1/-1;
}

section.page-banner img.banner-img {
    width: 100%;
    object-fit: cover;
    max-height: inherit;
    height: 100vh;
}

.banner-content-area {
    display: grid;
    align-items: center;
    padding: 0px var(--space-m);
    background-color: #0000002e;
    grid-template-columns: 1fr 1fr;
    /* border-radius: 0 0 76% 0%;*/
    /* box-shadow: 20px 17px 20px 4px #0000003d;*/
}

.banner-left-content {
    display: grid;
    justify-content: center;
}

.banner-right-content {
    display: grid;
    justify-content: center;
}

.banner-form-area {
    width: min(470px,50vw);
    padding: 1.5rem 2rem;
    background: var(--color-secondary-1);
    background: var(--banner-gradient);
}

    .banner-form-area select.form-select, .banner-form-area .form-control {
        background-color: #0000002b;
        color: white;
        border-color: transparent;
        outline-color: transparent;
    }

form {
    display: grid;
}
/**Menu Css**/
.burger-menu {
    background-color: var(--color-neutral-1);
    border-color: transparent;
    outline-color: transparent;
    color: var(--color-neutral-10);
    display: grid;
    grid-auto-flow: column;
    align-items: center;
    padding: var(--space-xs);
    grid-column-gap: var(--gap-col-s);
    justify-content: start;
}

.sidebar-menu {
    list-style: none;
    margin: 0;
    padding: 0;
    background-color: var(--color-neutral-2);
}

    .sidebar-menu > li {
        position: relative;
        margin: 0;
        padding: 0;
    }

li.treeview {
    display: grid;
}

.sidebar-menu li a {
    font-size: var(--fs-s);
    display: grid;
    grid-auto-flow: column;
    color: var(--color-neutral-10);
    grid-column-gap: var(--gap-col-s);
    padding: var(--space-xs);
    align-items: center;
}

button.expLink {
    background-color: transparent;
    outline-color: transparent;
    border-width: 0px;
    padding: var(--space-xs);
    display: grid;
    color: var(--color-neutral-10);
    grid-auto-flow: column;
    justify-content: space-between;
}

span.nav-label {
    font-size: var(--fs-s);
}

.sidebar-menu [class^="icon"] {
    font-size: var(--fs-m);
}

.sidebar-menu > li:hover {
    background: var(--color-semantic-hover);
}

.sidebar-menu > li.active {
    color: var(--color-neutral-0);
    background: var(--color-neutral-1);
}


.sidebar-menu > li.menu-link:hover,
.sidebar-menu > li.menu-link.active {
    color: var(--color-neutral-0);
    background: var(--color-neutral-1);
}

    .sidebar-menu > li.menu-link:hover a::before, .sidebar-menu > li.menu-link:active a::before,
    .sidebar-menu > li.menu-link.active:hover a::before, .sidebar-menu > li.menu-link.active a::before {
        content: '';
        position: absolute;
        width: 3px;
        height: 90%;
        background-color: var(--color-main-1);
        border-radius: 0px 5px 5px 0px;
        top: 5%;
        left: 0;
    }

.sidebar-menu > li > .treeview-menu {
    background: var(--color-neutral-2);
}

li.treeview.active > .expLink > span:last-child {
    transform: rotate(270deg);
    transition: all;
}

.sidebar-menu li.header {
    font-size: var(--fs-s);
    display: grid;
    background: var(--color-neutral-2);
}


.sidebar-menu li.active > .treeview-menu {
    display: block;
}

.sidebar-menu a {
    color: var(--color-neutral-10);
    text-decoration: none;
}

.sidebar-menu .treeview-menu {
    display: none;
    list-style: none;
    padding: 0;
    margin: 0;
    padding-left: 1.2rem;
}

    .sidebar-menu .treeview-menu .treeview-menu {
        padding-left: 1.2rem;
    }

    .sidebar-menu .treeview-menu > li {
        margin: 0;
    }

        .sidebar-menu .treeview-menu > li > a {
            padding: var(--space-xs);
            display: block;
            font-size: var(--fs-s);
            color: var(--color-neutral-10);
        }

        .sidebar-menu .treeview-menu > li.active > a {
            color: var(--color-neutral-0);
            font-family: var(--font-family-bold);
        }

        .sidebar-menu .treeview-menu > li > a:hover {
            background-color: var(--color-semantic-hover);
        }

/**List style**/
ul.bullet-list li:before {
    content: '';
    height: 10px;
    background: var(--color-secondary-1);
    position: relative;
    border-radius: 50%;
    flex-basis: 10px;
    flex-shrink: 0;
}

.list-style-disc {
    list-style: disc;
    padding-left: var(--space-s) !important;
}

ul.bullet-list li {
    display: flex;
    column-gap: 1rem;
    align-items: baseline;
}
/*** Grid CSS */
.grid-row-auto-fr {
    display: grid;
    grid-template-rows: auto 1fr;
    row-gap: var(--gap-row-xs);
}

.grid-col-auto-fr {
    display: grid;
    grid-template-columns: auto 1fr;
    column-gap: var(--gap-col-s);
}

.grid-row {
    display: grid;
    grid-auto-flow: row;
    row-gap: var(--gap-row-xs);
}

.col-span-2 {
    display: grid;
    grid-column: span 2;
}

.page-banner-img {
    display: block;
    max-width: 100%;
    width: 100%;
}

.grid-col-4 {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(clamp(12rem, 15vw, 50rem), 1fr));
    row-gap: var(--gap-row-s);
    column-gap: var(--gap-row-m);
}

.grid-col-fr-auto {
    display: grid;
    grid-template-columns: 1fr auto;
    column-gap: var(--gap-row-xs);
}
/** flex-css**/
.flex-col {
    display: flex;
    column-gap: var(--gap-s);
}

.flex-col-center {
    display: flex;
    justify-content: center;
}

.col-stretch {
    justify-content: space-between;
    column-gap: var(--gap-col-s);
}

.col-end {
    justify-content: flex-end;
    column-gap: var(--gap-col-s);
}

.col-center {
    justify-content: center;
}

.align-center {
    align-items: center;
}

.align-start {
    align-items: flex-start;
}

.form-group [role="radiogroup"].align-start {
    align-items: flex-start;
    padding-top: 1rem;
}

.w-600 {
    min-width: 600px;
}

.w-100 {
    min-width: 100px;
    width: 100px !important;
}

.w-max-80 {
    max-width: 120px;
}

.w-150 {
    min-width: 150px;
    width: 150px;
}

.w-200 {
    min-width: 200px;
    width: 200px;
}

.w-800 {
    min-width: 800px;
}

.w-500 {
    min-width: 500px;
}

.tshirtImage {
    max-width: 300px;
}

.form-label {
    font-size: var(--fs-s);
}

.form-value {
    font-family: var(--font-family-bold);
    font-size: var(--fs-s);
}
/**card css**/

.card {
    box-shadow: var(--shadow-dim-all);
    display: grid;
    border-radius: var(--radius-m);
    padding: 1rem;
}

.card-header {
    padding: var(--space-xs);
    display: grid;
    justify-items: flex-start;
    background-color: transparent;
    border-width: 0px;
}

.card-title {
    display: flex;
    flex: 1 0 auto;
}

.card .card-body:nth-child(2) {
    position: relative;
    margin-top: -65px;
}

.card-body {
    display: grid;
    grid-gap: var(--gap-col-s);
    padding-bottom: 1rem;
}

.card-footer {
    display: grid;
    border-bottom-right-radius: inherit;
    border-bottom-left-radius: inherit;
    padding: var(--space-s) var(--space-xs);
}

.text-trim-2 {
    display: -webkit-box;
    -webkit-box-orient: vertical;
    -webkit-line-clamp: 2;
    overflow: hidden;
}

.text-trim-3 {
    display: -webkit-box;
    -webkit-box-orient: vertical;
    -webkit-line-clamp: 3;
    overflow: hidden;
}
/**table**/
tr.checked td {
    background-color: #EAF2FF;
    font-weight: 600;
}

.form-select {
    border-radius: 2px;
}

.form-control {
    border-radius: 2px;
}

    .form-select:focus, .form-control:focus {
        border-color: #86b7fe;
        outline: 0;
        box-shadow: none;
    }
/**tabs**/
[data-tab-content] {
    display: none;
}

.tab-active[data-tab-content] {
    display: block;
}

.tabs {
    border-bottom: 1px solid var(--color-neutral-10);
    align-items: center;
}

.tab {
    padding: var(--space-xs);
    font-size: var(--fs-s);
    transition: all;
    --tab-active: var(--color-transparent);
    border-bottom: 2px solid var(--tab-active);
    cursor: pointer;
}

    .tab.tab-active {
        --tab-active: var(--color-main-1);
        font-family: var(--font-family-bold);
    }

.tab-content {
    padding: 0px var(--space-xs);
}

.m-action-top {
    margin-top: -60px;
}

.modal-header, .modal-footer {
    border-width: 0px !important;
}

.pos-tooltip {
    position: relative;
    top: 3px;
}
/**Saif**/
.form-check-input:checked {
    background-color: var(--color-secondary-19);
    border-color: var(--color-secondary-19);
}

.alert-warning {
    border-radius: 0px !important;
}

table.table.table-bordered th {
    background-color: var(--color-secondary-9);
}

.alert-danger, .alert-warning {
    border-radius: 0 !important;
    --bs-alert-border-color: var(--color-semantic-danger);
    --bs-alert-bg: var(--color-semantic-alert);
    padding: 0.5rem 1rem;
    color: var(--color-neutral-2);
}

.alert-shuttle {
    border-radius: 0 !important;
    --bs-alert-border-color: var(--color-semantic-primary);
    --bs-alert-bg: var(--color-semantic-shuttle);
    padding: 0.5rem 1rem;
    color: var(--color-neutral-2);
}

.btn-modal {
    color: var(--color-secondary-6) !important;
}

span.input-group-text:has(.btn-number) {
    background-color: var(--color-secondary-9);
}

@media only screen and (max-width: 768px) {
    .grid-col-4, .grid-col-auto-fr {
        grid-template-columns: 1fr;
    }


    .col-span-2 {
        grid-column: span 1;
    }

    .form-group.col-span-2 .flex-col {
        display: flex;
        flex-direction: column;
        place-items: flex-start;
        row-gap: 0.5rem;
    }

    .card .card-body:nth-child(2) {
        position: relative;
        margin-top: 0px !important;
    }

    .flex-col {
        display: flex;
        column-gap: var(--gap-s);
        flex-wrap: wrap;
        column-gap: 0.5rem;
        row-gap: 0.5rem;
    }

    .w-800, .w-600 {
        min-width: 80vw;
    }

    .grid-col-fr-auto {
        display: grid;
        grid-template-columns: 1fr;
        row-gap: var(--gap-row-xs);
        grid-auto-flow: row;
    }

    section.page-content-area {
        height: calc(100vh - var(--banner-img-height) + 60px);
        height: calc(100svh - var(--banner-img-height) + 60px);
    }

    .banner-form-area {
        width: 80vw;
    }

    .m-action-top {
        margin: 0px;
    }

    .no-wrap {
        white-space: normal;
    }

    .card-title {
        width: 100%;
    }

    .alert {
        word-break: break-all !important;
    }

    .banner-img img {
        object-fit: cover;
        max-width: 100vw;
    }

    section.page-banner {
        height: 100vh;
        display: grid;
        height: 100svh;
        background: #505050;
    }

    .banner-content-area {
        grid-template-columns: 0fr 1fr !important;
        align-items: center;
    }

    .banner-right-content {
        display: grid;
        justify-content: center;
        margin-top: 25vh;
    }
}
/*checkbox**/

ul#pills-tab {
    display: flex;
    position: relative;
    align-items: center;
    justify-content: center;
    border: 1px solid;
    border-radius: 20px;
}

    ul#pills-tab .nav-link.btn-toggle {
        border-radius: 20px;
        display: flex;
        position: relative;
        width: 140px;
        padding: 3px;
        top: 0px;
        align-items: center;
        justify-content: center;
    }

        ul#pills-tab .nav-link.btn-toggle.active {
            background: rgb(62, 62, 62);
            color: var(--color-neutral-0);
        }

    ul#pills-tab .nav-link.btn-toggle {
        background: transparent;
        color: var(--color-neutral-1);
    }

.cursor-auto {
    cursor: auto !important;
}

.captch-group {
    display: grid;
    grid-template-columns: 1fr 1fr;
    column-gap: 1rem;
    color: white;
}

    .captch-group script {
        display: none;
    }

    .captch-group br {
        display: none;
    }

    .captch-group a {
        grid-column: 1;
        grid-row: 1;
    }

    .captch-group input#CaptchaInputText {
        grid-column: 2;
        grid-row: 2;
        max-height: 2.5rem;
        width: 100%;
        background-color: #0000002b;
        color: white;
        border-color: transparent;
        outline-color: transparent;
        font-size: 1.2rem;
        padding: 0.3rem 0.7rem;
    }

    .captch-group img#CaptchaImage {
        grid-column: 1;
        grid-row: 2;
    }

.banner-form-area.signup {
    padding: 0px !important
}

.pad-signup-b0 {
    padding: 1.5rem 2rem 0px !important;
}

.pad-signup-t0 {
    padding: 0px 1.5rem 2rem !important;
}

.form-scroll {
    overflow-y: auto;
    max-height: 80vh;
}

.list-number {
    list-style: decimal;
    padding-left: 3rem !important;
    gap: var(--gap-xs);
    display: grid;
}

.list-style-disc {
    list-style: disc;
    padding-left: var(--space-s) !important;
}

::-webkit-scrollbar-track {
    -webkit-box-shadow: inset 0 0 6px rgba(0, 0, 0, 0.3);
    background-color: var(--color-secondary-3);
}

::-webkit-scrollbar {
    width: 6px;
    background-color: var(--color-secondary-3);
    height: 6px;
}

::-webkit-scrollbar-thumb {
    background-color: var(--color-neutral-9);
}

.landing-img {
    width: 100% !important;
    height: 100vh;
}

.confirm-text .banner-form-area {
    width: min(470px, 50vw);
    padding: 10px 12px !important;
    border-radius: 5px;
    transform: translate(65px, 195px);
}

.Success-text .banner-form-area {
    width: auto !important;
    padding: 10px 12px !important;
    border-radius: 5px;
    transform: translate(65px, 195px);
}