/*-------------------------------------*/
/* ----------  COLORS  ---------- */
/*-------------------------------------*/
:root {
    --wcag-light-primary: #FE0;
    --wcag-dark-primary: #000;
    --wcag-white: #FFF;
}

body.high-contrast {
    --on-color-white: var(--wcag-dark-primary);

    --on-color-info: var(--wcag-light-primary);
    --on-color-info-50: var(--wcag-dark-primary);
    
    --on-color-primary: var(--wcag-light-primary);
    
    --on-color-success: var(--wcag-light-primary);
    
    --on-color-field-required: var(--wcag-light-primary);
}

body.high-contrast,
body.high-contrast,
body.high-contrast .container,
body.high-contrast .container .row,
body.high-contrast .navbar,
body.high-contrast .navbar .container,
body.high-contrast .navbar .container ul.nav.navbar-nav li,
body.high-contrast .navbar .container ul.nav.navbar-nav li a,
body.high-contrast .navbar .container ul.nav.navbar-nav i.fa,
body.high-contrast .navbar .container ul.nav.navbar-nav span.glyphicon,
body.high-contrast .navbar .container ul.nav.navbar-nav s.wcag-icon,
body.high-contrast .navbar .container ul.nav.navbar-nav li.navbar-user,
body.high-contrast .navbar .container ul.nav.navbar-nav ul#account-dp,
body.high-contrast .navbar .container ul.nav.navbar-nav ul.nav.navbar-nav.languages,
body.high-contrast #notLoggedHeader .navbar a,
body.high-contrast .container,
body.high-contrast .container i.fa,
body.high-contrast .container i.glyphicon,
body.high-contrast .container span.glyphicon,
body.high-contrast .owl-carousel .owl-stage .dropdown-menu,
body.high-contrast .owl-carousel .owl-stage .dropdown-menu a,
body.high-contrast .box i.fa,
body.high-contrast .box span.box-text,
body.high-contrast .container h1,
body.high-contrast .container h2,
body.high-contrast .container h3,
body.high-contrast .container h4,
body.high-contrast .container h5,
body.high-contrast .container h6,
body.high-contrast .container span,
body.high-contrast .container label,
body.high-contrast .container p,
body.high-contrast .container table.table-dates,
body.high-contrast .container-fluid .card-body,
body.high-contrast .container .card,
body.high-contrast .container-fluid .carousel,
body.high-contrast .container-fluid .carousel-inner,
body.high-contrast .description,
body.high-contrast .description .descriptiontxt,
body.high-contrast #introduction,
body.high-contrast .footer
{
    background-color: var(--wcag-dark-primary) !important;
    color: var(--wcag-light-primary) !important;
}
body.high-contrast .owl-carousel .owl-stage .dropdown-menu .divider {
    background-color: var(--wcag-light-primary) !important;
}

body.high-contrast .profile-img {
    border: 2px solid var(--wcag-light-primary) !important;
    color: var(--wcag-light-primary) !important;
}

body.high-contrast .languages li:first-child  {
    border-right: 1px solid var(--wcag-light-primary) !important;
}

body.high-contrast .navbar {
    border-bottom: 1px solid var(--wcag-light-primary) !important; 
}

body.high-contrast .owl-carousel .owl-stage .dropdown-menu,
body.high-contrast .navbar #account-dp {
    border: 2px solid var(--wcag-light-primary) !important;
}

body.high-contrast .box {
    color: var(--wcag-light-primary) !important;
    border: solid 1px var(--wcag-light-primary) !important;
}

body.high-contrast ol.breadcrumb,
body.high-contrast ol.breadcrumb li a,
body.high-contrast ol.breadcrumb li.active,
body.high-contrast ol.breadcrumb>li+li:before {
    background-color: var(--wcag-light-primary) !important;
    color: var(--wcag-dark-primary) !important;
    border-color: var(--wcag-light-primary) !important;
    width: calc(100% - 518px);
}

body.high-contrast .container .btn.btn-default,
body.high-contrast .container .btn.btn-default span,
body.high-contrast .container .btn.btn-default i.fa,
body.high-contrast .container .btn.btn-default span.glyphicon  {
    background-color: var(--wcag-light-primary) !important;
    color: var(--wcag-dark-primary) !important;
    border-color: var(--wcag-light-primary) !important;
}

body.high-contrast .container .btn.btn-warning,
body.high-contrast .container .btn.btn-warning span,
body.high-contrast .container .btn.btn-warning i.fa,
body.high-contrast .container .btn.btn-warning span.glyphicon {
    background-color: #FF7112 !important;
    color: var(--wcag-dark-primary) !important;
    border-color: #FF7112 !important;
}

body.high-contrast .container table.table,
body.high-contrast .container table.table-striped,
body.high-contrast .container table.table-hover,
body.high-contrast .table-striped>tbody>tr:nth-of-type(odd),
body.high-contrast .container .table-hover>tbody>tr:hover {
    background-color: var(--wcag-dark-primary) !important;
    color: var(--wcag-light-primary) !important;
    border: 1px solid var(--wcag-light-primary) !important; 
}

body.high-contrast .container .table>tbody>tr>td,
body.high-contrast .container .table>tbody>tr>th,
body.high-contrast .container .table>tfoot>tr>td,
body.high-contrast .container .table>tfoot>tr>th,
body.high-contrast .container .table>thead>tr>td,
body.high-contrast .container .table>thead>tr>th {
    border-top: 1px solid var(--wcag-light-primary) !important;
}

body.high-contrast .container .table>thead>tr>th {
    border-bottom: 2px solid var(--wcag-light-primary) !important;
}

body.high-contrast footer.footer {
    border-top: 1px solid var(--wcag-light-primary) !important;
}

body.high-contrast footer.footer a,
body.high-contrast footer.footer a:hover {
    color: var(--wcag-light-primary) !important;
}

body.high-contrast footer.footer .nav-tabs>li>a:hover {
    background: var(--wcag-light-primary) !important;
    color: var(--wcag-dark-primary) !important;
    border: 1px solid var(--wcag-light-primary) !important;
}

body.high-contrast .effect-19 ~ .focus-border:before,
body.high-contrast .effect-19 ~ .focus-border:after,
body.high-contrast .effect-19 ~ .focus-border i:before,
body.high-contrast .effect-19 ~ .focus-border i:after { background-color: var(--wcag-light-primary); }
body.high-contrast .effect-19 ~ label {
    color: var(--wcag-dark-primary);
}
body.high-contrast .effect-19:focus ~ label, 
body.high-contrast .has-content.effect-19 ~ label{ color: var(--wcag-light-primary); }
body.high-contrast .input-group-addon.default,
body.high-contrast .input-group-addon.default span.glyphicon { background-color: var(--wcag-light-primary) !important; color: var(--wcag-dark-primary) !important; }
body.high-contrast .effect-19 ~ label { width: auto !important; }

body.high-contrast .input-group-addon.default,
body.high-contrast .input-group-addon.default:hover,
body.high-contrast .input-group-addon.default.not-hover:hover { background-color: var(--wcag-light-primary) !important; border-color: var(--wcag-light-primary) !important; }


body.high-contrast .modal .modal-content,
body.high-contrast .modal .modal-content .dropzone {
    border: 2px solid var(--wcag-light-primary) !important;
    color: var(--wcag-light-primary) !important;
    background-color: var(--wcag-dark-primary) !important;
}

body.high-contrast .modal .modal-content .modal-header {
    border-bottom: 1px solid var(--wcag-light-primary) !important;
}

body.high-contrast .modal .modal-content .modal-footer {
    border-top: 1px solid var(--wcag-light-primary) !important;
}

body.high-contrast button.close {
    color: var(--wcag-light-primary) !important;
    opacity: 1 !important;
}

body.high-contrast .container a,
body.high-contrast #notLoggedHeader .languages li a.active {
    color: #FF7112 !important;
    background-color: var(--wcag-dark-primary) !important;
}

body.high-contrast .tooltip,
body.high-contrast .tooltip-inner {
    background-color: var(--wcag-dark-primary) !important;
    color: var(--wcag-light-primary) !important;
}

body.high-contrast .tooltip {
    border: 2px solid var(--wcag-light-primary) !important;
}

body.high-contrast .tooltip .tooltip-arrow {
    border-top-color: var(--wcag-light-primary) !important;
}

body.high-contrast .alert.alert-info {
    color: var(--wcag-dark-primary) !important;
    background-color: var(--wcag-light-primary) !important;
    border-color: var(--wcag-light-primary) !important;
}

body.high-contrast .on-clock,
body.high-contrast .on-languages li a {
    color: var(--wcag-light-primary);
}

body.high-contrast .on-languages  li a.active,
body.high-contrast .btn.btn-warning {
    color: var(--wcag-dark-primary) !important;
    background-color: var(--wcag-light-primary) !important;
}

body.high-contrast table,
body.high-contrast table th,
body.high-contrast table td {
    color: var(--wcag-light-primary);
    background-color: var(--wcag-dark-primary) !important;
}

body.high-contrast .table-hover>tbody>tr:hover {
    background-color: #111;
}

body.high-contrast .on-btn-link {
    color: var(--wcag-light-primary);
}

body.high-contrast #vue-app-oGHRKb8ipV2qEfifM5xZ5Y {
    background-color: #111;
}

body.high-contrast #vue-app-oGHRKb8ipV2qEfifM5xZ5Y,
body.high-contrast #vue-app-oGHRKb8ipV2qEfifM5xZ5Y .tab-title,
body.high-contrast #vue-app-oGHRKb8ipV2qEfifM5xZ5Y .btn-title,
body.high-contrast #vue-app-oGHRKb8ipV2qEfifM5xZ5Y .app-title {
    color: var(--wcag-light-primary) !important;
}

body.high-contrast .patron,
body.high-contrast .form-body,
body.high-contrast .innter-form,
body.high-contrast .forum-messages-chat:hover,
body.high-contrast .on-btn-link:hover {
    background-color: var(--wcag-dark-primary) !important;
}
body.high-contrast .patron .before-text {
    color: var(--wcag-light-primary);
}

body.high-contrast .btn-icon-container span::before,
body.high-contrast li a:not(.on-btn),
body.high-contrast td a:not(.on-btn),
body.high-contrast th a:not(.on-btn)  {
    color: var(--wcag-light-primary) !important;
    background-color: var(--wcag-dark-primary);
}

body.high-contrast li.active a:not(.on-btn):hover,
body.high-contrast li.active a:not(.on-btn):focus,
body.high-contrast li.active a:not(.on-btn) {
    color: var(--wcag-dark-primary) !important;
    background-color: var(--wcag-light-primary);
}

body.high-contrast input,
body.high-contrast input::placeholder,
body.high-contrast .treeview {
    color: var(--wcag-dark-primary) !important;
}

body.high-contrast input:not(.required) {
    background-color: var(--wcag-white);
}

body.high-contrast .primary-text,
body.high-contrast .gray-link,
body.high-contrast .product-info,
body.high-contrast .forum-messages-chat-supplier {
    color: var(--wcag-light-primary) !important;
}

body.high-contrast .dropdown-menu {
    background-color: var(--wcag-dark-primary);
}

body.high-contrast .dropdown-menu li:hover a,
body.high-contrast li:hover a:not(.on-btn) {
    color: var(--wcag-dark-primary);
}

body.high-contrast h1, 
body.high-contrast h2,
body.high-contrast h3,
body.high-contrast h4,
body.high-contrast .form-group label,
body.high-contrast .text-warning-bold,
body.high-contrast .text-default-bold,
body.high-contrast .icon-edit-employee,
body.high-contrast .fa.fa-cog,
body.high-contrast .regulamin-text,
body.high-contrast .have-account {
    color: var(--wcag-light-primary) !important;
}

body.high-contrast .on-table .sort-arrow i {
    color: white;
}

body.high-contrast .on-table .tablesorter-headerAsc .sort-arrow .ascending i,
body.high-contrast .on-table .tablesorter-headerDesc .sort-arrow .descending i {
    color: #FFEE00;
}
/*-------------------------------------*/
/* ----------  FONT SIZES   ---------- */
/*-------------------------------------*/
:root {
    --wcag-font-size-0-small: 10px;
    --wcag-font-size-0: 14px;
    --wcag-font-size-0-heading: 16px;
    --wcag-font-size-1-small: calc(10px * 1.3);
    --wcag-font-size-1: calc(14px * 1.3);
    --wcag-font-size-1-heading: calc(16px * 1.3);
    --wcag-font-size-2-small: calc(10px * 1.57);
    --wcag-font-size-2: calc(14px * 1.57);
    --wcag-font-size-2-heading: calc(16px * 1.57);
}

body.textsize-x-0,
body.textsize-x-0 #requirements * {
    font-size: var(--wcag-font-size-0) !important;
}

body.textsize-x-1,
body.textsize-x-1 #requirements *,
body.textsize-x-1 .alert,
body.textsize-x-1 .app-title {
    font-size: var(--wcag-font-size-1) !important;
}
body.textsize-x-1 .tab-title {
    font-size: var(--wcag-font-size-1-small) !important;
}

body.textsize-x-2,
body.textsize-x-2 #requirements *,
body.textsize-x-2 .alert,
body.textsize-x-2 .app-title {
    font-size: var(--wcag-font-size-2) !important;
}
body.textsize-x-2 .tab-title {
    font-size: var(--wcag-font-size-1-small) !important;
}

body.textsize-x-1 .view-wrapper h1,
body.textsize-x-1 .sectionHeader-title {
    font-size: var(--wcag-font-size-1-heading);
}

body.textsize-x-1 .view-wrapper h3,
body.textsize-x-1 .view-wrapper h4,
body.textsize-x-1 .info-box {
    font-size: var(--wcag-font-size-1);
}

body.textsize-x-2 .view-wrapper h1,
body.textsize-x-2 .sectionHeader-title {
    font-size: var(--wcag-font-size-2-heading);
}

body.textsize-x-2 .view-wrapper h3,
body.textsize-x-2 .view-wrapper h4,
body.textsize-x-2 .info-box {
    font-size: var(--wcag-font-size-2);
}

@media screen and (max-width: 700px) {
    body.high-contrast ol.breadcrumb {
        width: calc(100% - 74px);
    }
}

@media screen and (min-width: 765px) { 
    body.textsize-x-2 #notLoggedHeader .navbar-brand { padding-top: 13px; }
    body.textsize-x-2 #notLoggedHeader .languages li { top: 16px; }
    body.textsize-x-2 #notLoggedHeader .wcag-icon.text-size-normal,
    body.textsize-x-2 #notLoggedHeader .wcag-icon.text-size-bigger { position: relative; top: 1px; }
    body.textsize-x-2 #notLoggedHeader .wcag-icon .fa-eye { position: relative; top: 1px; }
    body.textsize-x-2 #notLoggedHeader .fa-user { position: relative; top: 2px; }
    body.textsize-x-2 #notLoggedHeader .fa-sign-in  { position: relative; top: 4px; }
    
    body.textsize-x-1 #notLoggedHeader .text-size-biggest .fa-font { top: -2px !important; }
    body.textsize-x-2 #notLoggedHeader .text-size-biggest .fa-font { top: -1px !important; }

    body.textsize-x-1 #notLoggedHeader .languages { margin-top: 3px; }
    
    body.textsize-x-2 #notLoggedHeader .languages li { margin-top: 2px; }
    body.textsize-x-1 #notLoggedHeader .navbar-brand { padding-top: 11px; }
    body.textsize-x-2 #notLoggedHeader .navbar-brand { padding-top: 14px; }
}