@font-face {
    font-family: 'CharterRegular';
    src: url('../../fonts/ITCCharterCom/ITCCharterCom-Regular.ttf') format('truetype');
}

@font-face {
    font-family: 'HelveticaNeueRoman';
    src: url('../../fonts/HelveticaNeueLTPro/HelveticaNeueLTPro-Roman.ttf') format('truetype');
}

/* Font Family */
.ff-charter-regular {
    font-family: "CharterRegular", serif !important;
}

.ff-helvetica-roman {
    font-family: "HelveticaNeueRoman", serif !important;
}

.ff-inter {
    font-family: "Inter", sans-serif !important;
}

/* Font Weight */
.fw-700 {
    font-weight: 700 !important;
}

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

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

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

/* Font Size */
.fs-150 {
    font-size: 150px !important;
}

.fs-128 {
    font-size: 128px !important;
}

.fs-96 {
    font-size: 96px !important;
}

.fs-64 {
    font-size: 64px !important;
}

.fs-56 {
    font-size: 56px !important;
}

.fs-48 {
    font-size: 48px !important;
}

.fs-40 {
    font-size: 40px !important;
}

.fs-36 {
    font-size: 36px !important;
}

.fs-32 {
    font-size: 32px !important;
}

.fs-28 {
    font-size: 28px !important;
}

.fs-24 {
    font-size: 24px !important;
}

.fs-22 {
    font-size: 22px !important;
}

.fs-20 {
    font-size: 20px !important;
}

.fs-18 {
    font-size: 18px !important;
}

.fs-16 {
    font-size: 16px !important;
}

.fs-15 {
    font-size: 15px !important;
}

.fs-14 {
    font-size: 14px !important;
}

.fs-13 {
    font-size: 13px !important;
}

.fs-12 {
    font-size: 12px !important;
}

.fs-10 {
    font-size: 10px !important;
}

/* Text Color */
.text-primary {
    color: var(--color-primary) !important;
}

.text-primary-lighter {
    color: var(--color-primary-lighter) !important;
}

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

.text-secondary-lighter {
    color: var(--color-secondary-lighter) !important;
}

.text-success {
    color: var(--color-success) !important;
}

.text-success-lighter {
    color: var(--color-success-lighter) !important;
}

.text-success-darker {
    color: var(--color-success-darker) !important;
}

.text-danger {
    color: var(--color-danger) !important;
}

.text-danger-lighter {
    color: var(--color-danger-lighter) !important;
}

.text-info {
    color: var(--color-info) !important;
}

.text-warning {
    color: var(--color-warning) !important;
}

.text-light-darker {
    color: var(--color-light-darker) !important;
}

.text-light {
    color: var(--color-light) !important;
}

.text-white {
    color: white !important;
}

.text-black {
    color: black !important;
}

/* Text Decoration */
.text-normal {
    text-decoration: none;
    text-transform: none !important;
}

.text-underline {
    text-decoration: underline;
}

.text-italic {
    font-style: italic;
}

.text-nowrap {
    white-space: nowrap;
    overflow-x: auto;
}

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

/* Background Color */
.bg-primary {
    border: 1px solid var(--color-primary) !important;
    background-color: var(--color-primary) !important;
}

.bg-outlined-primary {
    border: 1px solid var(--color-primary) !important;
    background-color: white;
    color: var(--color-primary) !important;
}

.bg-primary-lighter {
    background-color: var(--color-primary-lighter) !important;
}

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

.bg-secondary-lighter {
    background-color: var(--color-secondary-lighter) !important;
}

.bg-success {
    background-color: var(--color-success) !important;
}

.bg-success-darker {
    background-color: var(--color-success-darker) !important;
}

.bg-danger {
    background-color: var(--color-danger) !important;
}

.bg-danger-lighter {
    background-color: var(--color-danger-lighter) !important;
}

.bg-info {
    background-color: var(--color-info) !important;
}

.bg-warning {
    background-color: var(--color-warning) !important;
}

.bg-light {
    background-color: var(--color-light) !important;
}

.bg-light-lighter {
    background-color: var(--color-light-lighter) !important;
}

.bg-light-lightest {
    background-color: var(--color-light-lightest) !important;
}

.bg-white {
    background-color: white !important;
}

.bg-black {
    background-color: black !important;
}

.border-primary {
    border-color: var(--color-primary) !important;
}

.border-light {
    border-color: var(--color-light) !important;
}

/* Border Radius */
.rounded-4 {
    border-radius: 4px !important;
}

.rounded-5 {
    border-radius: .5rem !important;
}

.rounded-8 {
    border-radius: 8px !important;
}

.rounded-t-8 {
    border-top-left-radius: 8px !important;
    border-top-right-radius: 8px !important;
}

.rounded-16 {
    border-radius: 16px !important;
}

.rounded-40 {
    border-radius: 40px !important;
}

.rounded-circle {
    border-radius: 50% !important;
}

.h-screen {
    height: 100vh;
}

/* Object Position */
.object-position-top {
    object-position: top;
}

.object-position-bottom {
    object-position: bottom;
}

.object-position-left {
    object-position: left;
}

.object-position-right {
    object-position: right;
}

.object-position-center-top {
    object-position: center calc(45%);
}

.object-position-center-top-md {
    object-position: center calc(35%);
}

.object-position-center-top-lg {
    object-position: center calc(25%);
}

.object-position-center-bottom {
    object-position: center calc(55%);
}

.object-position-center-bottom-lg {
    object-position: center calc(75%);
}

.btn-pill {
    border-radius: 50px;
}

.btn-disabled {
    opacity: .65;
}

.pointer-events-none {
    pointer-events: none;
}

.transition-all {
    transition: all 350ms ease-in-out;
}

.gap-8 {
    gap: 8px;
}

.border-light {
    border: 1px solid var(--color-light) !important;
}

.overflow-none {
    overflow: hidden;
}

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

.btn-center {
    display: flex;
    justify-content: center;
    align-items: center;
    gap: 5px;
}

.rotate-180 {
    rotate: 180deg;
}

.badge-primary-lighter {
    background-color: var(--color-primary-lighter);
    color: black;
}

.badge-success-darker {
    background-color: var(--color-success-darker);
    color: white;
}

.badge-secondary-lighter {
    background-color: var(--color-secondary-lighter);
    color: black;
}

.badge-secondary-darker {
    background-color: var(--color-secondary-darker);
    color: black;
}

.badge-danger-darker {
    background-color: var(--color-danger-darker);
    color: white;
}

.badge-warning {
    background-color: var(--color-warning);
    color: black;
}

.badge-info {
    background-color: var(--color-info);
    color: white;
}

.badge-info-lighter {
    background-color: var(--color-info-lighter);
    color: black;
}

.badge-info-purple {
    background-color: var(--color-info-purple);
    color: white;
}

.badge-light {
    background-color: var(--color-light);
    color: black;
}

.overflow-y-scroll {
    overflow-y: scroll;
}

.opacity-8 {
    opacity: .8;
}

@media screen and (max-width: 767px) {

    /* Font Size*/
    .fs-xs-96 {
        font-size: 96px !important;
    }

    .fs-xs-64 {
        font-size: 64px !important;
    }

    .fs-xs-56 {
        font-size: 56px !important;
    }

    .fs-xs-48 {
        font-size: 48px !important;
    }

    .fs-xs-40 {
        font-size: 40px !important;
    }

    .fs-xs-32 {
        font-size: 32px !important;
    }

    .fs-xs-28 {
        font-size: 28px !important;
    }

    .fs-xs-24 {
        font-size: 24px !important;
    }

    .fs-xs-22 {
        font-size: 22px !important;
    }

    .fs-xs-20 {
        font-size: 20px !important;
    }

    .fs-xs-18 {
        font-size: 18px !important;
    }

    .fs-xs-16 {
        font-size: 16px !important;
    }

    .fs-xs-15 {
        font-size: 15px !important;
    }

    .fs-xs-14 {
        font-size: 14px !important;
    }

    .fs-xs-12 {
        font-size: 12px !important;
    }

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

    .line-height-xs-100 {
        line-height: 100%;
    }
}

@media screen and (min-width: 768px) and (max-width: 1023px) {}

@media screen and (min-width: 1024px) {
    .overflow-y-lg-scroll {
        overflow-y: scroll;
    }

    .w-lg-50 {
        width: 50% !important;
    }
}

@media screen and (min-width: 1500px) {}