/* styles.css */

/* Typography */
.font-size-12 {
    font-size: 12px;
}

.font-size-14 {
    font-size: 14px;
}

.font-size-18 {
    font-size: 18px;
}

.font-size-20 {
    font-size: 20px;
}

.font-size-24 {
    font-size: 24px;
}

.font-size-30 {
    font-size: 30px;
}

.font-size-36 {
    font-size: 36px;
}

.font-size-40 {
    font-size: 40px;
}

.font-size-60 {
    font-size: 60px;
}

@media(min-width: 768px) {
    .font-size-md-36 {
        font-size: 36px;
    }

    .font-size-md-40 {
        font-size: 40px;
    }

    .font-size-md-60 {
        font-size: 60px;
    }
}

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

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

/* Placeholder styling */
*::-webkit-input-placeholder {
    color: #667085 !important;
}

*:-moz-placeholder {
    color: #667085 !important;
    opacity: 1;
}

*::-moz-placeholder {
    color: #667085 !important;
    opacity: 1;
}

*:-ms-input-placeholder {
    color: #667085 !important;
}

*::-ms-input-placeholder {
    color: #667085 !important;
}

*::placeholder {
    color: #667085 !important;
}

/* Text Colors */
.text-gray-medium {
    color: #475467;
}

.text-gray-light {
    color: #667085;
}

.text-gray-dark {
    color: #344054;
}

.text-blue-dark {
    color: #101828;
}

.text-blue-medium {
    color: #2F5F6F;
}

.text-blue-light {
    color: #BBE0E6;
}

.text-white {
    color: #FFF;
}

.text-green-medium {
    color: #668828;
}

.text-orange {
    color: #FDB022;
}

/* Icon Filters */
.icon-gray-extra-light {
    filter: brightness(0) saturate(100%) invert(86%) sepia(17%) saturate(40%) hue-rotate(184deg) brightness(108%) contrast(91%);
}

.icon-gray-light {
    filter: brightness(0) saturate(100%) invert(93%) sepia(9%) saturate(173%) hue-rotate(177deg) brightness(92%) contrast(91%);
}

.icon-gray-medium {
    filter: brightness(0) saturate(100%) invert(32%) sepia(11%) saturate(1056%) hue-rotate(177deg) brightness(93%) contrast(90%);
}

.icon-gray-dark {
    filter: brightness(0) saturate(100%) invert(22%) sepia(33%) saturate(469%) hue-rotate(178deg) brightness(96%) contrast(91%);
}

.icon-white {
    filter: brightness(0) saturate(100%) invert(100%) sepia(0%) saturate(0%) hue-rotate(231deg) brightness(106%) contrast(106%);
}

.icon-teal-blue {
    filter: brightness(0) saturate(100%) invert(40%) sepia(46%) saturate(560%) hue-rotate(146deg) brightness(88%) contrast(84%);
}

.icon-dark-blue {
    filter: brightness(0) saturate(100%) invert(29%) sepia(94%) saturate(269%) hue-rotate(149deg) brightness(89%) contrast(88%);
}

.icon-green {
    filter: brightness(0) saturate(100%) invert(84%) sepia(4%) saturate(4699%) hue-rotate(37deg) brightness(93%) contrast(86%);
}

.icon-orange {
    filter: brightness(0) saturate(100%) invert(81%) sepia(15%) saturate(7492%) hue-rotate(359deg) brightness(95%) contrast(95%);
}

.icon-red {
    filter: brightness(0) saturate(100%) invert(38%) sepia(58%) saturate(5039%) hue-rotate(343deg) brightness(106%) contrast(93%);
}

.icon-blue {
    filter: brightness(0) saturate(100%) invert(45%) sepia(89%) saturate(2089%) hue-rotate(193deg) brightness(101%) contrast(96%);
}

/* Border Colors */
.border-gray-light {
    border-color: #D0D5DD !important;
}

.border-gray-medium {
    border-color: #EAECF0 !important;
}

.border-teal-blue {
    border-color: #347486 !important;
}

.border-green-light {
    border-color: #D8E9AD !important;
}

.border-blue-dark {
    border-color: #2F5F6F !important;
}

/* Background Colors */
.background-green-medium {
    background-color: #A2C655 !important;
}

.background-green-extra-light {
    background-color: #F6FAEB !important;
}

.background-gray-light {
    background-color: #FCFCFD !important
}

.background-blue-dark {
    background-color: #2F5F6F !important
}

.background-blue-medium {
    background-color: #3B8F9F !important
}

.background-blue-light {
    background-color: #DBEFF2 !important
}

.background-blue-extra-light {
    background-color: #F1FAFA !important
}

.background-red {
    background-color: #F97066 !important
}


/* media */
@media screen and (max-width: 991px) {
    .max-width-991px-visible {
        display: none;
        visibility: hidden;
    }

    .flex-column-medium {
        flex-direction: column !important;
    }

    .flex-row-medium {
        flex-direction: row !important;
    }

    .border-medium-none,
    .border-medium-none:hover,
    .border-medium-none:focus {
        border: none !important;
    }
}

@media screen and (max-width: 720px) {
    .flex-column-small {
        flex-direction: column !important;
    }

    .w-sm-100 {
        width: 100%;
    }

    .small-padding-left {
        padding-left: .25rem !important;
    }

    .small-padding-right {
        padding-right: .25rem !important;
    }
}