body {
}


:root {
    --custom-color-1: #008080;
    --custom-color-2: #209B87;
    --custom-color-3: #4DB686;
    --custom-color-4: #80CF7F;
    --custom-color-5: #B9E576;
    --custom-color-6: #F9F871;
    --custom-color-7: #00809E;
    --custom-color-8: #2C7CB2;
    --custom-color-9: #7072B4;
    --custom-color-10: #A263A1;
    --custom-color-11: #C0597D;
    --custom-color-100: #E3F5EE;
}


.bg-custom-color-100 {
    background-color: var(--custom-color-100);
    color: white;
}

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

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

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

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

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

.bg-custom-color-6 {
    background-color: var(--custom-color-6);
    color: white;
}

.bg-custom-color-7 {
    background-color: var(--custom-color-7);
    color: white;
}

.bg-custom-color-8 {
    background-color: var(--custom-color-8);
    color: white;
}

.bg-custom-color-9 {
    background-color: var(--custom-color-9);
    color: white;
}

.bg-custom-color-10 {
    background-color: var(--custom-color-10);
    color: white;
}

.bg-custom-color-11 {
    background-color: var(--custom-color-11);
    color: white;
}








.btn-custom-color-100 {
    background-color: var(--custom-color-100);
    color: black;
    transition: background-color 0.3s, box-shadow 0.3s;
    box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
}

    .btn-custom-color-100:hover {
        background-color: var(--custom-color-100);
        box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);
    }


.btn-custom-color-1 {
    background-color: var(--custom-color-1);
    color: white;
    transition: background-color 0.3s, box-shadow 0.3s;
    box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
    color: white;
}

    .btn-custom-color-1:hover {
        background-color: var(--custom-color-1);
        box-shadow: 0 6px 8px rgba(0, 0, 0, 0.1);
        color: white;
    }




.btn-custom-color-2 {
    background-color: var(--custom-color-2);
    color: white;
    transition: background-color 0.3s, box-shadow 0.3s;
    box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
}

    .btn-custom-color-2:hover {
        background-color: var(--custom-color-2);
        box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);
    }

.btn-custom-color-3 {
    background-color: var(--custom-color-3);
    color: white;
    transition: background-color 0.3s, box-shadow 0.3s;
    box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
}

.btn-custom-color-4 {
    background-color: var(--custom-color-4);
    color: white;
    transition: background-color 0.3s, box-shadow 0.3s;
    box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
}

.btn-custom-color-5 {
    background-color: var(--custom-color-5);
    color: white;
    transition: background-color 0.3s, box-shadow 0.3s;
    box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
}

.btn-custom-color-6 {
    background-color: var(--custom-color-6);
    color: white;
    transition: background-color 0.3s, box-shadow 0.3s;
    box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
}

.btn-custom-color-7 {
    background-color: var(--custom-color-7);
    color: white;
    transition: background-color 0.3s, box-shadow 0.3s;
    box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
}
.btn-custom-color-7:hover {
    background-color: var(--custom-color-7);
    box-shadow: 0 6px 8px rgba(0, 0, 0, 0.1);
    color: white;
}


.btn-custom-color-8 {
    background-color: var(--custom-color-8);
    color: white;
    transition: background-color 0.3s, box-shadow 0.3s;
    box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
}
    .btn-custom-color-8:hover {
        background-color: var(--custom-color-8);
        box-shadow: 0 6px 8px rgba(0, 0, 0, 0.1);
        color: white;
    }


.btn-custom-color-9 {
    background-color: var(--custom-color-9);
    color: white;
    transition: background-color 0.3s, box-shadow 0.3s;
    box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
}

.btn-custom-color-10 {
    background-color: var(--custom-color-10);
    color: white;
    transition: background-color 0.3s, box-shadow 0.3s;
    box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
}

.btn-custom-color-11 {
    background-color: var(--custom-color-11);
    color: white;
    transition: background-color 0.3s, box-shadow 0.3s;
    box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
}

    .btn-custom-color-11:hover {
        background-color: red;
        box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);
    }







.text-custom-color-100 {
    color: var(--custom-color-100);
}

.text-custom-color-1 {
 color: var(--custom-color-1);
}

.text-custom-color-2 {
    color: var(--custom-color-2);
}

.text-custom-color-3 {
    color: var(--custom-color-3);
}

.text-custom-color-4 {
    color: var(--custom-color-4);
}

.text-custom-color-5 {
    color: var(--custom-color-5);
}

.text-custom-color-6 {
    color: var(--custom-color-6);
}

.text-custom-color-7 {
    color: var(--custom-color-7);
}

.text-custom-color-8 {
    color: var(--custom-color-8);
}

.text-custom-color-9 {
    color: var(--custom-color-9);
}

.text-custom-color-10 {
    color: var(--custom-color-10);
}

.text-custom-color-11 {
    color: var(--custom-color-11);
}




/* تعریف استایل برای تسکت باکس‌ها در فرم‌ها */
.form-control {
    border: 1px solid var(--custom-color-1); /* بورد خیلی کوچک با رنگ موردنظر */
    border-radius: 5px; /* گوشه‌های گرد */
    padding: 8px; /* فاصله داخلی از لبه‌ها */
    background-color: white; /* پس‌زمینه سفید */
    box-shadow: 0 1px 2px rgba(0, 0, 0, 0.1); /* سایه ریز */
    transition: border 0.3s, box-shadow 0.3s; /* انیمیشن تغییرات */
}

    /* هاور بر روی تسکت باکس‌ها */
    .form-control:hover {
        border: 1px solid var(--custom-color-1); /* تغییر رنگ بورد */
        box-shadow: 0 1px 2px rgba(0, 0, 0, 0.1); /* تغییر سایه */
    }











/*     https://mycolor.space/?hex=%23008080&sub=1      */