* {
    padding: 0;
    margin: 0;
    box-sizing: border-box;
    font-family: 'Inter', sans-serif;
}

:root {
    --white: #FFFFFF;
    /* --- grey --- */
    --grey-1: #A3A3A3;
    --grey-2: #D4D4D4;
    --grey-3: #E5E5E5;
    --grey-4: #F5F5F5;
    --grey-5: #FAFAFA;
    --gray-6: #EEE;
    --grey-7: #FBFBFB;
    /* --- grey --- */
    /* --- black --- */
    --black: #000000;
    --black-1: #171717;
    --black-2: #262626;
    --black-3: #404040;
    --black-4: #525252;
    --black-5: #737373;
    --black-6: #121112;
    --black-7: #343434;
    /* --- black --- */

    /* --- Blue --- */
    --blue-1: #D5E4F1;
    --blue-2: #B8D6F0;
    --blue-3: #E0EFFD;
    --blue-4: #92C4F0;
    --blue-5: #59A9EF;
    --blue-6: #3397EF;
    --blue-7: #3597ec;
    --blue-8: #0E77D3;
    /* --- Blue --- */

    /* --- success --- */
    --green-1: #DFEBE3;
    --green-2: #CEE5D6;
    --green-3: #B6DDC3;
    --green-4: #1C7C54;
    --green-5: #93D0A8;
    --green-6: #7BC896;
    --green-7: #EBF7EF;
    /* --- success --- */
    /* --- danger --- */
    --red-1: #DFEBE3;
    --red-2: #FACBCB;
    --red-3: #F7A9A7;
    --red-4: #F48785;
    --red-5: #C92530;
    --red-6: #EF5350;
    /* --- danger --- */
    /* --- warning --- */
    --yellow-1: #F3ECD7;
    --yellow-2: #F5E6BD;
    --yellow-3: #F8DF9A;
    --yellow-4: #FCD465;
    --yellow-5: #FFCD42;
    /* --- warning --- */

    /* Purple */
    --purple: #7757F4;

    /* -------------- drop-shadow ------------- */
    --shadow-1: 0px 0.6px 1.8px rgba(0, 0, 0, 0.1), 0px 3.2px 7.2px rgba(0, 0, 0, 0.13);
    --shadow-2: 0px 1.2px 3.6px rgba(0, 0, 0, 0.1), 0px 6.4px 14.4px rgba(0, 0, 0, 0.13);
    /* -------------- drop-shadow ------------- */

    /* -------------- border ------------- */
    --border-1: 1px solid var(--grey-2);
    --border-2: 1px solid var(--grey-5);
    --border-3: 1px solid var(--primary-6);
    --border-4: 1px solid var(--grey-4);
    /* -------------- border ------------- */


}

/* Scroll Bar Custom */

::-webkit-scrollbar-track {
    border-radius: 10px;
    background-color: transparent;
}

::-webkit-scrollbar {
    width: 4px;
    height: 4px;
    background: transparent;
}

::-webkit-scrollbar-thumb {
    border-radius: 12px;
    background-color: var(--grey-3);
}

/*End Scroll Bar Custom */

img {
    max-width: 100%;
}

.container {
    width: 100%;
    margin: 0 auto;
    max-width: 1240px;
}

/* Margins start */
.mt-4 {
    margin-top: 4px;
}

.mt-5 {
    margin-top: 5px;
}

.mt-6 {
    margin-top: 6px;
}

.mt-8 {
    margin-top: 8px;
}

.mt-10 {
    margin-top: 10px;
}

.mt-11 {
    margin-top: 11px;
}

.mt-12 {
    margin-top: 12px;
}

.mt-15 {
    margin-top: 15px;
}

.mt-16 {
    margin-top: 16px;
}

.mt-20 {
    margin-top: 20px;
}

.mt-24 {
    margin-top: 24px;
}

.mt-25 {
    margin-top: 25px;
}

.mt-30 {
    margin-top: 30px;
}

.mt-32 {
    margin-top: 30px;
}

.mt-35 {
    margin-top: 30px;
}

.mt-40 {
    margin-top: 40px;
}

.mt-50 {
    margin-top: 50px;
}

.mt-60 {
    margin-top: 60px;
}

.mb-2 {
    margin-bottom: 2px;
}

.mb-5 {
    margin-bottom: 5px;
}

.mb-6 {
    margin-bottom: 6px;
}

.mb-8 {
    margin-bottom: 8px;
}

.mb-10 {
    margin-bottom: 10px;
}

.mb-12 {
    margin-bottom: 12px;
}

.mb-15 {
    margin-bottom: 15px;
}

.mb-16 {
    margin-bottom: 16px;
}

.mb-18 {
    margin-bottom: 18px;
}

.mb-20 {
    margin-bottom: 20px;
}

.mb-25 {
    margin-bottom: 25px;
}

.mb-30 {
    margin-bottom: 30px;
}

.mb-40 {
    margin-bottom: 40px;
}

.my-12 {
    margin: 12px 0;
}

.my-16 {
    margin: 16px 0;
}

.my-20 {
    margin: 20px 0;
}

.mr-20 {
    margin-right: 20px;
}

.mr-30 {
    margin-right: 30px;
}

.mr-5 {
    margin-right: 5px;
}

.mr-6 {
    margin-right: 6px;
}

.mr-8 {
    margin-right: 8px;
}

.mr-10 {
    margin-right: 10px;
}

.ml-3 {
    margin-left: 3px;
}

.ml-5 {
    margin-left: 5px;
}

.ml-6 {
    margin-left: 6px;
}

.ml-10 {
    margin-left: 10px;
}

.ml-30 {
    margin-left: 30px;
}

/* Margins End */

/* Padding */
.pt-8 {
    padding-top: 8px;
}

.pt-10 {
    padding-top: 10px;
}

.p-20 {
    padding: 20px;
}

.p-40 {
    padding: 40px;
}

.py-20 {
    padding: 20px 0;
}

.px-20 {
    padding: 0 20px;
}

.pt-20 {
    padding-top: 20px;
}

.pt-24 {
    padding-top: 24px;
}

.pt-30 {
    padding-top: 30px;
}

.pb-5 {
    padding-bottom: 5px;
}

.pb-10 {
    padding-bottom: 10px;
}

.pb-20 {
    padding-bottom: 20px;
}

.pb-30 {
    padding-bottom: 30px;
}

.pb-40 {
    padding-bottom: 40px;
}

.pr-20 {
    padding-right: 20px;
}

.pr-30 {
    padding-right: 30px;
}

.pl-10 {
    padding-left: 10px;
}

.pl-15 {
    padding-left: 15px;
}

.pl-20 {
    padding-left: 20px;
}
.pl-40 {
    padding-left: 40px;
}

/* End Padding */
/* Gap */
.gap-5 {
    gap: 5px !important;
}

.gap-6 {
    gap: 6px;
}

.gap-10 {
    gap: 10px;
}

.gap-12 {
    gap: 12px;
}

.gap-15 {
    gap: 15px;
}

.gap-20 {
    gap: 20px;
}

.gap-25 {
    gap: 25px;
}

.gap-30 {
    gap: 30px;
}

/* End Gap */

/* width */
.w-100 {
    width: 100%;
}

.w-60{
    width: 60% !important;
}

/* width */
button {
    border: none;
    outline: none;
    cursor: pointer;
    background: transparent;
}

li {
    list-style: none;
}

a {
    text-decoration: none;
}

.nopointer {
    cursor: default !important;
}

.pointer {
    cursor: pointer;
}

.blueText {
    cursor: pointer;
    display: flex;
    align-items: center;
    font-size: 12px;
    gap: 4px;
    color: var(--blue-8);
}

.profileImg {
    width: 100%;
    max-width: 50px;
    height: 50px;
    border-radius: 50%;
    object-position: top;
    object-fit: cover;
}

.flexbox {
    display: flex;
    align-items: center;
    justify-content: inherit;
}



.max100 {
    max-width: 100% !important;
}

.hide {
    display: none;
}

.opacity-4 {
    opacity: 0.4 !important;
}

.not-visible {
    opacity: 0;
}

.defaultCursor {
    cursor: default !important;
}

.fw-500 {
    font-weight: 500 !important;
}

.text13r {
    color: #737373;
    font-size: 13px;
    font-weight: 400;
    line-height: 120%;
}

.text14r{
    font-size: 13px;
    color: #121112;
    font-weight: 400;
    line-height: 120%;
}

.pb14 {
    padding-bottom: 14px;
}

.px24 {
    padding-left: 24px;
    padding-right: 24px;
}

.py24 {
    padding-top: 24px;
    padding-bottom: 24px;
}

.px24 {
    padding-left: 24px;
    padding-right: 24px;
}

.gap16{
    display: flex;
    flex-direction: column;
    gap: 16px;
}