/** https://css-tricks.com/apply-a-filter-to-a-background-image/ **/
:root {
    --global-filter: none; /** hue-rotate(255deg) saturate(60%); **/
    --img-back-top: url(../img/backs/altermed/top-1.png);
    --img-back-top-filter: var(--global-filter);
    --img-advantages: url(../img/backs/advantages.png);
    --img-advantages-filter: hue-rotate(255deg) saturate(60%);
    --img-signin: url(../img/backs/altermed/signin.png);
    --img-signin-filter: var(--global-filter);
    --img-register: url(/img/backs/altermed/register-form.png);
    --img-register-filter: var(--global-filter);
    --img-settings: url(../img/backs/altermed/my-setts.png);
    --img-settings-filter: var(--global-filter);
    --img-bg-cosmetic: url(../img/backs/altermed/cosmetics-2.png);
    --img-bg-cosmetic-filter: var(--global-filter);
    --img-bg-areyou: url(../img/backs/altermed/areyou.jpeg);
    --img-bg-areyou-filter: var(--global-filter);

    --img-no-map-logo: url(../img/altermed/AlterMed.svg);
    --img-girl: none;
    --img-no-map-size: auto auto;

    --img-categories-filter: saturate(40%);

    --color-primary: #627660;
    --color-primary-dark: #4d5c4b;
    --color-alert-primary: #fff;

    --border-color-primary: var(--color-primary-dark);
    --background-primary-dark-14: #4d5c4b3f;
    --background-primary-dark-12: #4d5c4b7f;
    --background-primary-dark-34: #4d5c4bbf;
    --background-primary-dark-max: #4d5c4bdf;
    --background-primary-light: #afcdac;
    --background-primary-light-14: #afcdac3f;
    --background-primary-light-12: #afcdac7f;
    --background-primary-light-34: #afcdacbf;
    --background-primary-light-max: #afcdacdf;

    --mail-color-primary: #7e997c;
    --mail-color-text-primary: #627660;
    --mail-btn-color-primary: #627660;
    --mail-btn-border-color-primary: #546653;
    --mail-background-primary-light: rgba(239, 255, 230, .7);
    --mail-background-border-primary-light: rgb(180, 191, 172);

    --text-social: #fff;
    --text-copy: #fff;
    --icon-filter: hue-rotate(255deg) saturate(60%);
    --spinner-color: #7e997c;

    --btn-color-primary: var(--color-primary);
    --btn-border-color-primary: var(--border-color-primary);

    --bg-success: #218838;
    --bg-danger: #dc3545;
    --bg-warning: #ffc107;
    --bg-info: #17a2b8;
    --bg-primary: var(--color-primary);

    --bg-table-header: var(--color-primary);

    --gradient-color-rgb: 165, 205, 172;

    --gradient-color: rgba(165, 205, 172, 1);
    --gradient-color-b: rgba(165, 205, 172, 1);
    --gradient-color-c: rgba(130, 150, 128, 1);
}

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

.btn-primary {
    background-color: var(--btn-color-primary) !important;
    border-color: var(--btn-border-color-primary) !important;
}

.alert-primary {
    color: var(--color-alert-primary) !important;
    background-color: var(--background-primary-light) !important;
    border-color: var(--btn-border-color-primary) !important;
}

.btn-outline-primary:hover {
    color: #fff !important;
    background-color: var(--btn-color-primary) !important;
    border-color: var(--btn-border-color-primary) !important;
}

.btn-outline-primary {
    color: var(--btn-color-primary) !important;
    border-color: var(--btn-border-color-primary) !important;
}

.gradient-back {
    background: var(--gradient-color);
    background: -moz-linear-gradient(140deg, var(--gradient-color) 0%, var(--gradient-color-b) 68%, var(--gradient-color-c) 100%);
    background: -webkit-linear-gradient(140deg, var(--gradient-color) 0%, var(--gradient-color-b) 68%, var(--gradient-color-c) 100%);
    background: linear-gradient(140deg, var(--gradient-color) 0%, var(--gradient-color-b) 68%, var(--gradient-color-c) 100%);
}

#company-partnership-main > a,
#company-partnership-main > a:hover,
#company-partnership-main > a:link,
#company-partnership-main > a:active {
    color: white;
}

.remember-field a {
    color: var(--color-primary);
}

.remember-field a:hover {
    color: var(--border-color-primary);
}

.page-link {
    color: var(--color-primary) !important;
}

.page-link:hover {
    color: var(--color-primary) !important;
}

.page-item.active .page-link {
    color: #fff !important;
}

.page-link:focus {
    box-shadow: 0 0 0 2px var(--gradient-color) !important;
}

#footer-links a {
    color: var(--text-social);
}

#footer-links a:hover {
    color: var(--gray-dark);
}

.bootstrap-datetimepicker-widget table td.active,
.bootstrap-datetimepicker-widget table td.active:hover {
    background-color: var(--border-color-primary) !important;
}