@font-face {
    font-family: "Archive";
    src: url('../fonts/Archive.otf') format('opentype');
}
:root {
    --heading-font: 'Archive';
    --text-font: 'Calibri';
    --long-text-font: 'Verdana';

    --primary-color: #00acae;
    --primary-dark-color: #003a52;
    --secondary-color: #f7c958;
    --third-color: #ffd0bd;
    --white-color: #fff;  

    --primary-color-op-0: #00acae00;
    --primary-color-op-10: #00acae1a;
    --primary-color-op-20: #00acae33;
    --primary-color-op-30: #00acae4d;
    --primary-color-op-40: #00acae66;
    --primary-color-op-50: #00acae80;
    --primary-color-op-60: #00acae99;
    --primary-color-op-70: #00acaeb3;
    --primary-color-op-80: #00acaecc;
    --primary-color-op-90: #00acaee6;
    --primary-color-op-100: #00acaeff;

    --secondary-color-op-0: #f7c95800;
    --secondary-color-op-10: #f7c9581a;
    --secondary-color-op-20: #f7c95833;
    --secondary-color-op-30: #f7c9584d;
    --secondary-color-op-40: #f7c95866;
    --secondary-color-op-50: #f7c95880;
    --secondary-color-op-60: #f7c95899;
    --secondary-color-op-70: #f7c958b3;
    --secondary-color-op-80: #f7c958cc;
    --secondary-color-op-90: #f7c958e6;
    --secondary-color-op-100: #f7c958ff;
    
    --black-color: #333;
    --black-color-2: #3e3e3e;
    --medium-black-color: #58585B;
    --light-black-color: #898f9c;

    --gray-color: #cecece;
    --lighter-gray-color: #f3f3fc;
    --light-gray-color: #DEE2E7;
    --medium-gray-color: #f7f7f7;
    --box-shadow-color: #d1d1d1;

    --danger-color: #c10000;
    --soldout-color: red;

    --checkbox-accent-color: #00a2a4;

    /* Colorful Gradients Colors */
    --grad-primary-f: #1eb5b9;
    --grad-primary-l: #04dbd4;
    --grad-primary: linear-gradient(90deg, var(--grad-primary-f) 0%, var(--grad-primary-l) 100%);
    --grad-primary-reversed: linear-gradient(90deg, var(--grad-primary-l) 0%, var(--grad-primary-f) 100%);

    --grad-secondary-f: #fb7043;
    --grad-secondary-l: #fb9933;
    --grad-secondary-light: #fff8f5;
    --grad-secondary: linear-gradient(90deg, var(--grad-secondary-f) 0%, var(--grad-secondary-l) 100%);
    --grad-secondary-reversed: linear-gradient(90deg, var(--grad-secondary-l) 0%, var(--grad-secondary-f) 100%);

    --grad-third-f: #0bd2dd;
    --grad-third-l: #5ffcc0;
    --grad-third-light: #f5f2fd;
    --grad-third: linear-gradient(90deg, var(--grad-third-f) 0%, var(--grad-third-l) 100%);
    --grad-third-reversed: linear-gradient(90deg, var(--grad-third-l) 0%, var(--grad-third-f) 100%);

    --grad-fourth-f: #ffbf00;
    --grad-fourth-l: #ffd96a;
    --grad-fourth-light: #fffaea;
    --grad-fourth: linear-gradient(90deg, var(--grad-fourth-f) 0%, var(--grad-fourth-l) 64%);
    --grad-fourth-reversed: linear-gradient(90deg, var(--grad-fourth-l) 0%, var(--grad-fourth-f) 64%);

    --grad-fifth-f: #570df5;
    --grad-fifth-l: #905cff;
    --grad-fifth-light: #f5f2fd;
    --grad-fifth: linear-gradient(93.98deg, var(--grad-fifth-f) 0%, var(--grad-fifth-l) 100%);
    --grad-fifth-reversed: linear-gradient(93.98deg, var(--grad-fifth-l) 0%, var(--grad-fifth-f) 100%);

    --grad-sixth-f: #e2005d;
    --grad-sixth-m: #e15116;
    --grad-sixth-l: #ff8959;
    --grad-sixth: linear-gradient(50deg, var(--grad-sixth-f) 10%, var(--grad-sixth-m) 50%, var(--grad-sixth-l) 100%);
    --grad-sixth-reversed: linear-gradient(50deg, var(--grad-sixth-l) 10%, var(--grad-sixth-m) 50%, var(--grad-sixth-f) 100%);

    --grad-seventh-f: #ed213a;

    /* Alert Colors */
    --alert-success-text: #007a26;
    --alert-success-bg: #bff3be;
    --alert-error-text: #c10000;
    --alert-error-bg: #ffd2d2;

    --soft-success: #5cb85c;
    --soft-danger : #d9534f;

    /* Box Shadows */
    --box-shadow-regular: 0 6px 11px var(--box-shadow-color);
    --box-shadow-regular-hover: 0px 0px 27px 4px var(--box-shadow-color);
    --box-shadow-delicate: 0 3px 6px var(--box-shadow-color);

    /* Border radius */   
    --border-radius-small: 5px; 
    --border-radius-regular: 10px;
    --border-radius-mid: 15px;
    --border-radius-strong: 20px;
    --border-radius-steep: 25px;
    --border-radius-button: 25px;
    --border-radius-form: 25px;

    /* || Sponsors Admin */
    /* |||| Sponsors Admin - Priority */
    --sp-purple : #ddb6ff; /*#c17aff;*/
    --sp-lightred : #ffb4b2;/*#ff6a66;*/
    --sp-red: #ff8d8a;/*#e3322d;*/
    --sp-alarm: #e3322d;
    --sp-orange : #ffc897;/*#ffa04c;*/
    --sp-yellow : #ffea80;/*#ffe147;*/
    --sp-gray: #dfdfdf;/*#c1c1c1;*/
    --sp-green: #aff1af;/*#5cb85c;*/
    --sp-blue: #d0f6ff;/*#b1deff;*/
    --sp-cian: #d0fffd;/*#b1f0ff;*/
}
/* Colorful Solid Backgrounds */
.bg_primary, .bg_secondary, .bg_third, .bg_fourth, .bg_fifth, .bg_sixth, .bg_seventh, .bg_danger, .bg_warning,
.bg_primary *, .bg_secondary *, .bg_third *, .bg_fourth *, .bg_fifth *, .bg_sixth *, .bg_seventh *, .bg_danger *, .bg_warning * { color: var(--white-color)}
.bg_primary { background: var(--primary-color) }
.bg_secondary { background: var(--grad-secondary-f) }
.bg_third { background-color: var(--grad-third-f) }
.bg_fourth { background: var(--grad-fourth-f) }
.bg_fifth { background: var(--grad-fifth-f) }
.bg_sixth { background: var(--grad-sixth-f) }
.bg_seventh { background: var(--grad-seventh-f) }
.bg_danger { background: var(--danger-color); }
.bg_warning { background: var(--secondary-color); }

/* Colorful Text */
.cl_primary { color: var(--primary-color) }
.cl_secondary { color: var(--grad-secondary-f) }
.cl_third { color: var(--grad-third-f) }
.cl_fourth { color: var(--grad-fourth-f) }
.cl_fifth { color: var(--grad-fifth-f) }
.cl_sixth { color: var(--grad-sixth-f) }
.cl_seventh { color: var(--grad-seventh-f) }

/* Monocolor Colorful */
.mn_secondary p:before { color: var(--grad-secondary-f); background: var(--grad-secondary-light) }
.mn_third p:before { color: var(--grad-third-f); background: var(--grad-third-light) }
.mn_fourth p:before { color: var(--grad-fourth-f); background: var(--grad-fourth-light) }
.mn_fifth p:before { color: var(--grad-fifth-f); background: var(--grad-fifth-light) }

/* Colorful Gradients */
.inno_primary_grad, .inno_secondary_grad, .inno_third_grad, .inno_fourth_grad, .inno_fifth_grad, .inno_sixth_grad,
.inno_primary_grad a, .inno_secondary_grad a, .inno_third_grad a, .inno_fourth_grad a, .inno_fifth_grad a, .inno_sixth_grad a,
.inno_primary_grad *, .inno_secondary_grad *, .inno_third_grad *, .inno_fourth_grad *, .inno_fifth_grad *, .inno_sixth_grad *  { 
    color: var(--white-color)
}

.inno_primary_grad{ background: var(--primary-color); background: var(--grad-primary) }
.inno_button.inno_primary_grad:hover:not([disabled]) { background: var(--grad-primary-reversed) }

.inno_secondary_grad { background: var(--grad-secondary-f); background: var(--grad-secondary) }
.inno_button.inno_secondary_grad:hover:not([disabled]) { background: var(--grad-secondary-reversed) }

.inno_third_grad { background: var(--grad-third-f); background: var(--grad-third) }
.inno_button.inno_third_grad:hover:not([disabled]) { background: var(--grad-third-reversed) }

.inno_fourth_grad { background: var(--grad-fourth-f); background: var(--grad-fourth) }
.inno_button.inno_fourth_grad:hover:not([disabled]) { background: var(--grad-fourth-reversed) }

.inno_fifth_grad { background: var(--grad-fifth-f); background: var(--grad-fifth) }
.inno_button.inno_fifth_grad:hover:not([disabled]) { background: var(--grad-fifth-reversed) }

.inno_sixth_grad { background: var(--grad-sixth-f); background: var(--grad-sixth) }
.inno_button.inno_sixth_grad:hover:not([disabled]) { background: var(--grad-sixth-reversed) }

/* Colorful Image Filters */
.fl_secondary { filter: brightness(0) saturate(100%) invert(55%) sepia(46%) saturate(2598%) hue-rotate(333deg) brightness(101%) contrast(97%) }
.fl_third { filter: brightness(0) saturate(100%) invert(69%) sepia(92%) saturate(2842%) hue-rotate(137deg) brightness(103%) contrast(91%) }
.fl_fourth { filter: brightness(0) saturate(100%) invert(86%) sepia(32%) saturate(7232%) hue-rotate(3deg) brightness(108%) contrast(103%) }
.fl_fifth { filter: brightness(0) saturate(100%) invert(13%) sepia(96%) saturate(6967%) hue-rotate(263deg) brightness(90%) contrast(116%) }



.text-left {text-align: left}
.text-center {text-align:center}
.text-right {text-align: right}