/* default theme:

--primary-color: #76B82A;     // default
--primary-color-D20: #5E9322; // hover
--primary-color-D10: #6AA626; // focus, active
--primary-color-L82: #E6F2D9; // disabled
--secondary-color: #76B82A;
--secondary-color-D20: #5E9322;
--secondary-color-D10: #6AA626;
--secondary-color-L82: #E6F2D9;
--button-color: #FFF;
*/

.button--primary {background-color: #76B82A; color: #FFF;}
.button--primary:disabled {background-color: #E6F2D9}
.button--primary:hover {background-color: #5E9322}
.button--primary:focus,
.button--primary:active {background-color: #6AA626}
.button--secondary {background-color: #76B82A}
.button--secondary:disabled {background-color: #E6F2D9}
.button--secondary:hover {background-color: #5E9322}
.button--secondary:focus,
.button--secondary:active {background-color: #6AA626}
.button--tertiary {color: #76B82A}
.button--tertiary:disabled {color: #E6F2D9}
.button--tertiary:hover {background-color: #E6F2D9; color: #76B82A}
.button--tertiary:focus,
.button--tertiary:active {background-color: #6AA626}

.checkbox:hover .checkbox__border,
.checkbox__input:focus + .checkbox__border {border-color: #76B82A}
.checkbox__input:checked + .checkbox__border > .checkbox__checker {
    background: linear-gradient(to bottom, transparent 9px, #76B82A 9px), linear-gradient(to right, transparent 5px, #76B82A 5px)
}

.collapsible__toggle {color: #76B82A}
.collapsible__toggle:hover {color: #5E9322}
.collapsible__toggle:focus,
.collapsible__toggle:active {color: #6AA626}

.info-box {background-color: #76B82A}

.input:hover,
.input:focus {border-color: #76B82A}

.radio:hover .radio__border,
.radio__input:focus + .radio__border {border-color: #76B82A}
.radio__input:checked + .radio__border > .radio__checker {border-color: #76B82A; background-color: #76B82A}

.svg-button {fill: #76B82A}
.svg-button:hover .svg-icon {fill: #5E9322}
.svg-button:focus .svg-icon,
.svg-button:active .svg-icon {fill: #6AA626}

.text-link--primary {color: #76B82A}
.text-link--primary:hover {color: #5E9322}
.text-link--primary:focus,
.text-link--primary:active {color: #6AA626}

.underline {border-bottom: 3px solid #76B82A}

/* RTL theme:

--primary-color: #468FB3;
--primary-color-D20: #38728f;
--primary-color-D10: #3f81a1;
--primary-color-L82: #deebf1;
--secondary-color: #002748;
--secondary-color-D20: #001f3a;
--secondary-color-D10: #002341;
--secondary-color-L82: #d1d8de;
*/

html.rtl .button--primary {background-color: #468FB3; color: #FFF;}
html.rtl .button--primary:disabled {background-color: #deebf1}
html.rtl .button--primary:hover {background-color: #38728f}
html.rtl .button--primary:focus,
html.rtl .button--primary:active {background-color: #3f81a1}
html.rtl .button--secondary {background-color: #002748}
html.rtl .button--secondary:disabled {background-color: #d1d8de}
html.rtl .button--secondary:hover {background-color: #001f3a}
html.rtl .button--secondary:focus,
html.rtl .button--secondary:active {background-color: #002341}
html.rtl .button--tertiary {color: #002748}
html.rtl .button--tertiary:disabled {color: #d1d8de}
html.rtl .button--tertiary:hover {background-color: #d1d8de; color: #002748}
html.rtl .button--tertiary:focus,
html.rtl .button--tertiary:active {background-color: #002341;}

html.rtl .checkbox:hover .checkbox__border,
html.rtl .checkbox__input:focus + .checkbox__border {border-color: #002748;}
html.rtl .checkbox__input:checked + .checkbox__border > .checkbox__checker {
    background: linear-gradient(to bottom, transparent 9px, #002748 9px), linear-gradient(to right, transparent 5px, #002748 5px)
}

html.rtl .collapsible__toggle {color: #002748}
html.rtl .collapsible__toggle:hover {color: #001f3a}
html.rtl .collapsible__toggle:focus,
html.rtl .collapsible__toggle:active {color: #002341}

html.rtl .info-box {background-color: #002748}

html.rtl .input:hover,
html.rtl .input:focus {border-color: #002748}

html.rtl .radio:hover .radio__border,
html.rtl .radio__input:focus + .radio__border {border-color: #002748}
html.rtl .radio__input:checked + .radio__border > .radio__checker {border-color: #002748; background-color: #002748}

html.rtl .svg-button {fill: #002748}
html.rtl .svg-button:hover .svg-icon {fill: #001f3a}
html.rtl .svg-button:focus .svg-icon,
html.rtl .svg-button:active .svg-icon {fill: #002341}

html.rtl .text-link--primary {color: #002748}
html.rtl .text-link--primary:hover {color: #001f3a}
html.rtl .text-link--primary:focus,
html.rtl .text-link--primary:active {color: #002341}

html.rtl .underline {border-bottom: 3px solid #002748}


/* 1&1 theme:

--primary-color: #f3e11e;
--primary-color-D20: #c2b418;
--primary-color-D10: #dbcb1b;
--primary-color-L82: #fdfad7;
--secondary-color: #003d8f;
--secondary-color-D20: #003172;
--secondary-color-D10: #003781;
--secondary-color-L82: #d1dceb;
--button-color: #333;
*/

html.einsundeins .button--primary {background-color: #f3e11e; color: #333}
html.einsundeins .button--primary:disabled {background-color: #fdfad7}
html.einsundeins .button--primary:hover {background-color: #c2b418}
html.einsundeins .button--primary:focus,
html.einsundeins .button--primary:active {background-color: #dbcb1b}
html.einsundeins .button--secondary {background-color: #003d8f}
html.einsundeins .button--secondary:disabled {background-color: #d1dceb}
html.einsundeins .button--secondary:hover {background-color: #003172}
html.einsundeins .button--secondary:focus,
html.einsundeins .button--secondary:active {background-color: #003781}
html.einsundeins .button--tertiary {color: #003d8f}
html.einsundeins .button--tertiary:disabled {color: #d1dceb}
html.einsundeins .button--tertiary:hover {background-color: #d1dceb; color: #003d8f}
html.einsundeins .button--tertiary:focus,
html.einsundeins .button--tertiary:active {background-color: #003781}

html.einsundeins .checkbox:hover .checkbox__border,
html.einsundeins .checkbox__input:focus + .checkbox__border {border-color: #003d8f}
html.einsundeins .checkbox__input:checked + .checkbox__border > .checkbox__checker {
    background: linear-gradient(to bottom, transparent 9px, #003d8f 9px), linear-gradient(to right, transparent 5px, #003d8f 5px)
}

html.einsundeins .collapsible__toggle {color: #003d8f}
html.einsundeins .collapsible__toggle:hover {color: #003172}
html.einsundeins .collapsible__toggle:focus,
html.einsundeins .collapsible__toggle:active {color: #003781}

html.einsundeins .info-box {background-color: #003d8f}

html.einsundeins .input:hover,
html.einsundeins .input:focus {border-color: #003d8f}

html.einsundeins .radio:hover .radio__border,
html.einsundeins .radio__input:focus + .radio__border {border-color: #003d8f}
html.einsundeins .radio__input:checked + .radio__border > .radio__checker {border-color: #003d8f; background-color: #003d8f}

html.einsundeins .svg-button {fill: #003d8f}
html.einsundeins .svg-button:hover .svg-icon {fill: #003172}
html.einsundeins .svg-button:focus .svg-icon,
html.einsundeins .svg-button:active .svg-icon {fill: #003781}

html.einsundeins .text-link--primary {color: #003d8f}
html.einsundeins .text-link--primary:hover {color: #003172}
html.einsundeins .text-link--primary:focus,
html.einsundeins .text-link--primary:active {color: #003781}

html.einsundeins .underline {border-bottom: 3px solid #003d8f}


/* Pro7 theme:

--primary-color: #ff0033;
--primary-color-D20: #cc0029;
--primary-color-D10: #e6002e;
--primary-color-L82: #ffd1da;
--secondary-color: #000;
--secondary-color-D20: #000;
--secondary-color-D10: #000;
--secondary-color-L82: #d1d1d1;
--button-color: #FFF;
*/

html.pro7 .button--primary {background-color: #ff0033; color: #fff}
html.pro7 .button--primary:disabled {background-color: #ffd1da}
html.pro7 .button--primary:hover {background-color: #cc0029}
html.pro7 .button--primary:focus,
html.pro7 .button--primary:active {background-color: #e6002e}
html.pro7 .button--secondary {background-color: #000;}
html.pro7 .button--secondary:disabled {background-color: #d1d1d1;}
html.pro7 .button--secondary:hover {background-color: #000}
html.pro7 .button--secondary:focus,
html.pro7 .button--secondary:active {background-color: #000}
html.pro7 .button--tertiary {color: #000}
html.pro7 .button--tertiary:disabled {color: #d1d1d1}
html.pro7 .button--tertiary:hover {background-color: #d1d1d1; color: #000}
html.pro7 .button--tertiary:focus,
html.pro7 .button--tertiary:active {background-color: #000}

html.pro7 .checkbox:hover .checkbox__border,
html.pro7 .checkbox__input:focus + .checkbox__border {border-color: #000}
html.pro7 .checkbox__input:checked + .checkbox__border > .checkbox__checker {
    background: linear-gradient(to bottom, transparent 9px, #000 9px), linear-gradient(to right, transparent 5px, #000 5px)
}

html.pro7 .collapsible__toggle {color: #000}
html.pro7 .collapsible__toggle:hover {color: #000}
html.pro7 .collapsible__toggle:focus, .collapsible__toggle:active {color: #000}

html.pro7 .info-box {background-color: #000}

html.pro7 .input:hover,
html.pro7 .input:focus {border-color: #000}

html.pro7 .radio:hover .radio__border,
html.pro7 .radio__input:focus + .radio__border {border-color: #000}
html.pro7 .radio__input:checked + .radio__border > .radio__checker {border-color: #000; background-color: #000}

html.pro7 .svg-button {fill: #000}
html.pro7 .svg-button:hover .svg-icon {fill: #000}
html.pro7 .svg-button:focus .svg-icon,
html.pro7 .svg-button:active .svg-icon {fill: #000}

html.pro7 .text-link--primary {color: #000}
html.pro7 .text-link--primary:hover {color: #000}
html.pro7 .text-link--primary:focus,
html.pro7 .text-link--primary:active {color: #000}

html.pro7 .underline {border-bottom: 3px solid #000}