/* -- Utilities -- */
.bg-primary{
    background-color: #395B64 !important;
}

.bg-primary-300{
    background-color: #A5C9CA !important;
}

.bg-primary-100{
    background-color: #E7F6F2 !important;
}

.text-primary{
    color: var(--theme-color);
}

.text-primary-300{
    color: var(--theme-color);
}

.text-primary-100{
    color: #E7F6F2;
}

.text-black{
    color: black;
}

.text-white{
    color: white;
}

.text-whitesmoke{
    color: whitesmoke;
}

.text-gray{
    color: gray;
}

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

.m-0{
    margin: 0;
}

.m-1{
    margin: 0.25rem;
}

.m-2{
    margin: 0.5rem;
}

.m-3{
    margin: 0.75rem;
}

.mt-0{
    margin-top: 0;
}

.mt-1{
    margin-top: 0.25rem;
}

.mt-2{
    margin-top: 0.5rem;
}

.mt-3{
    margin-top: 0.75rem;
}

.mt-4{
    margin-top: 1rem;
}

.mt-5{
    margin-top: 1.25rem;
}

.mb-0{
    margin-bottom: 0;
}

.mb-1{
    margin-bottom: 0.25rem;
}

.mb-2{
    margin-bottom: 0.5rem;
}

.mb-3{
    margin-bottom: 0.75rem;
}

.mr-0{
    margin-right: 0;
}

.mr-1{
    margin-right: 0.25rem;
}

.mr-2{
    margin-right: 0.5rem;
}

.mr-3{
    margin-right: 0.75rem;
}

.my-auto{
    margin-top: auto;
    margin-bottom: auto;
}

.my-0{
    margin-top: 0;
    margin-bottom: 0;
}

.my-1{
    margin-top: 0.25rem;
    margin-bottom: 0.25rem;
}

.my-2{
    margin-top: 0.5rem;
    margin-bottom: 0.5rem;
}

.my-3{
    margin-top: 0.75rem;
    margin-bottom: 0.75rem;
}

.mx-auto{
    margin: 0 auto;
}

.p-1{
    padding: 0.25rem;
}

.p-2{
    padding: 0.5rem;
}

.p-3{
    padding: 0.75rem;
}

.btn{
    border: none;
    border-radius: 5px;
    transition: 0.25s;
    padding: 10px 20px;
}

.btn-sm{
    padding: 5px 15px;
}

.btn-lg{
    font-size: large;
    padding: 15px 25px;
}

.btn-primary{
    color: white;
    background-color: #395B64;
}

.btn-primary-300{
    color: black;
    background-color: #A5C9CA;
}

.btn-primary-100{
    color: black;
    background-color: #E7F6F2;
}

.btn:hover{
    transform: translateY(-3px);
    cursor: pointer;
    box-shadow: 4px 5px 10px var(--shadow-color);
}

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

.card{
    background: white;
    /* box-shadow: 4px 5px 10px rgb(57, 91, 100, 0.5); */
    padding: 10px 20px;
    border-radius: 8px;
    color: black;
}

.w-full{
    width: 100%;
}

.w-1\/2{
    width: 50%;
}

.flex{
    display: flex;
}

.flex-row{
    flex-direction: row;
}

.flex-col{
    flex-direction: column;
}

.gap-1{
    gap: 0.25rem;
}

.gap-2{
    gap: 0.5rem;
}

.gap-3{
    gap: 0.75rem;
}