body {
}


:root {
    /*--custom-color-1: #008080;*/
    --custom-color-1: #008080;
    --custom-color-2: #8880B6;
    --custom-color-3: #976F98;
    --custom-color-4: #976278;
    --custom-color-5: #8C5A5D;
    --custom-color-6: #2F4858;
    --custom-color-7: #414960;
    --custom-color-8: #574A61;
    --custom-color-9: #694B5B;
    --custom-color-10: #754E52;
    --custom-color-11: #008080;
    /*--custom-color-11: #253463;*/
    /*--custom-color-11: #0d6efd;*/
    /*--custom-color-11: #795548;*/
    --custom-color-12: #AF8779;
    --custom-color-13: #FFE7D6;
    --custom-color-14: #00B1FF; /*نارنجی برند*/
    --custom-color-15: #00B1FF; /*نارنجی برند*/
    --custom-color-16: #E26F46; /*نارنجی برند*/
    --custom-color-17: #637899; /*نارنجی برند*/
    --custom-color-18: #CDDC39; /*لیمویی  */
    --custom-color-19: #827717; /*لیمویی  */
    --custom-color-20: #FFA500; /*لیمویی  */
    --custom-color-100: rgba(250,245,250,0.8)
}

 





.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;
}


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


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

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

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

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

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

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

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

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



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









.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-3:hover {
    background-color: var(--custom-color-3);
    box-shadow: 0 4px 6px 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-4:hover {
    background-color: var(--custom-color-4);
    box-shadow: 0 4px 6px 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-5:hover {
    background-color: var(--custom-color-5);
    box-shadow: 0 4px 6px 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-6:hover {
    background-color: var(--custom-color-6);
    box-shadow: 0 4px 6px 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-9:hover {
    background-color: var(--custom-color-9);
    box-shadow: 0 4px 6px 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-10:hover {
    background-color: var(--custom-color-10);
    box-shadow: 0 4px 6px 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: var(--custom-color-12);
        box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);
        color: white;
    }


.btn-custom-color-12 {
    background-color: var(--custom-color-12);
    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-12:hover {
        background-color: var(--custom-color-12);
        box-shadow: 0 6px 8px rgba(0, 0, 0, 0.1);
        color: white;
    }


.btn-custom-color-13 {
    background-color: var(--custom-color-13);
    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-13:hover {
        background-color: var(--custom-color-13);
        box-shadow: 0 6px 8px rgba(0, 0, 0, 0.1);
        color: white;
    }


.btn-custom-color-14 {
    background-color: var(--custom-color-14);
    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-14:hover {
        background-color: var(--custom-color-14);
        box-shadow: 0 6px 8px rgba(0, 0, 0, 0.1);
        color: white;
    }

.btn-custom-color-15 {
    background-color: var(--custom-color-15);
    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-15:hover {
        background-color: var(--custom-color-15);
        box-shadow: 0 6px 8px rgba(0, 0, 0, 0.1);
        color: white;
    }


.btn-custom-color-16 {
    background-color: var(--custom-color-16);
    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-16:hover {
        background-color: var(--custom-color-16);
        box-shadow: 0 6px 8px rgba(0, 0, 0, 0.1);
        color: white;
    }
.btn-custom-color-17 {
    background-color: var(--custom-color-17);
    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-17:hover {
        background-color: var(--custom-color-17);
        box-shadow: 0 6px 8px rgba(0, 0, 0, 0.1);
        color: white;
    }


.btn-custom-color-18 {
    background-color: var(--custom-color-18);
    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-18:hover {
        background-color: var(--custom-color-18);
        box-shadow: 0 6px 8px rgba(0, 0, 0, 0.1);
        color: white;
    }


.btn-custom-color-19 {
    background-color: var(--custom-color-19);
    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-19:hover {
        background-color: var(--custom-color-19);
        box-shadow: 0 6px 8px rgba(0, 0, 0, 0.1);
        color: white;
    }


.btn-custom-color-20 {
    background-color: var(--custom-color-20);
    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-20:hover {
        background-color: var(--custom-color-20);
        box-shadow: 0 6px 8px rgba(0, 0, 0, 0.1);
        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);
    }








.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);
}

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

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

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

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

.text-custom-color-16 {
    color: var(--custom-color-16);
}
.text-custom-color-16 :hover {
    color: var(--custom-color-17);
}

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

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

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

.text-custom-color-20 {
    color: var(--custom-color-20);
}
.text-custom-color-20:hover {
    color: var(--custom-color-20) !important;
}

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






/* تعریف استایل برای تسکت باکس‌ها در فرم‌ها */
.form-control {
    border: 1px solid var(--custom-color-11); /* بورد خیلی کوچک با رنگ موردنظر */
    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-12); /* تغییر رنگ بورد */
        box-shadow: 0 1px 2px rgba(0, 0, 0, 0.1); /* تغییر سایه */
    }











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