/* common fixes
-------------------------------------------------- */
body {
    opacity: 0;
}
body, .header-block {
    transition: background-color 0.2s ease-out !important;
}

#products-menu .item .data .item-title {
    font-family: "Open Sans", sans-serif;
}

:root {
    --dark-color-background: #333333;
    --dark-color-text: #dddddd;
    --dark-color-title: #ffffff;
    --dark-color-placeholder: #aaaaaa;
    --dark-color-menu: black;
    --dark-color-modal: #555555;
    --dark-color-accent: #5952fa;
    --dark-color-accent-hover: #808fe8;
    --dark-color-link: #808fe8;
    --dark-color-black: black;
}

/* brand icon
--------------------------------------------*/
.navbar-brand>img {
    display: none;
}

.navbar-brand:after {
    content: '';
    display: block;
    width: 168px;
    height: 32px;
    background: transparent url('/images/wfp-logo.svg') center center no-repeat;
    background-size: contain;
}
@media (max-width: 1200px) {
    .navbar-brand:after {
        margin: auto;
    }
    .head-block .img-desktop-container .freelance-man .title-image {
        margin-top: -56px;
    }
    .img-desktop-container.left img {
        left: auto;
    }
}

/* dark version
-------------------------------------------------- */
body.dark .icon-bar {
    background-color: var(--dark-color-link);
}

body.dark .navbar-toggle:hover .icon-bar {
    background-color: var(--dark-color-text);
}

body.dark .overlay .closebtn img {
    filter: grayscale(1) invert();
}

body.dark {
    background-color: var(--dark-color-background);
    color: var(--dark-color-text);
}

body.dark .header-block {
    background: var(--dark-color-background);
}

body.dark .main-block {
    background: transparent;
}

body.dark h1, body.dark h2, body.dark h3, body.dark h4, body.dark h5, body.dark h6 {
    color: var(--dark-color-title);
}

body.dark .nav>li>a {
    color: var(--dark-color-text);
}

body.dark .navbar-brand:after {
    filter: invert();
}

body.dark #products-menu,
body.dark #products-toggler:after {
    background: var(--dark-color-menu) !important;
}

body.dark #products-menu .item .data .item-title {
    color: var(--dark-color-title);
}

body.dark #products-menu .item .data .item-text {
    color: #ccc;
}

body.dark .underlayer-yellow span,
body.dark .underlayer-blue span {
    display: none !important;
}

/* dark header
-------------------------------------------------- */
@media (min-width:992px) {
    body.dark li .lang {
        box-shadow: 0 0 5px 4px rgba(0, 0, 0, 0.7)
    }
    body.dark li .lang:not(.ru),
    body.dark li .lang:not(.ru):hover {
        color: transparent !important;
    }
    body.dark .lang-selector .dropdown-menu {
        background-color: rgba(0,0,0,0.5);
    }
    body.dark .lang-selector .language-arrow-top:before {
        border-bottom-color: rgba(0,0,0,0.5);
    }
}

/* dark content
-------------------------------------------------- */
body.dark p,
body.dark .text,
body.dark .text p {
    color: var(--dark-color-text);
}

/*body.dark a:not(.btn-blue):not(.btn-pink) {*/
/*    color: var(--dark-color-accent);*/
/*}*/

body.dark a:hover {
    color: var(--dark-color-accent-hover);
}

body.dark .arrow-button {
    color: var(--dark-color-link);
}

body.dark .slider-payment-types .slide span:not(:hover):not(.slide-globus):not(.slide-iabank) {
    filter: invert();
}

body.dark .slider-payment-types .slide span.slide-mono:not(:hover) {
    opacity: 0.3;
}

body.dark .slider-payment-types .slide span.slide-mono:hover {
    filter: invert();
}

body.dark .slider-payment-types .slide span.slide-m-visa:hover {
    /*filter: invert();*/
}

body.dark .slider-payment-types .slide span.slide-botpay:hover,
body.dark .slider-payment-types .slide span.slide-qr:hover {
    filter: invert();
}

body.dark .slider-payment-types .slide span.slide-applepay {
    opacity: 0.4;
    filter: grayscale(1) invert() !important;
}

body.dark .slider-payment-types .slide span.slide-googlepay {
    opacity: 0.6;
    filter: grayscale(1) invert() !important;
}

body.dark .pp-properties .pp-block img {
    /*filter: invert();*/
    opacity: 0.2;
}

/*body.dark .solutions .carousel-inner {*/
/*    background: var(--dark-color-background);*/
/*}*/

body.dark .solutions .solution-block {
    background: var(--dark-color-black);
    box-shadow: 0 3px 12px #00000050;
}

body.dark .solutions .solution-block .solution-buttons {
    background: linear-gradient(to bottom, rgba(0,0,0,0) 0%,rgba(0,0,0,0.8) 32%);
}

body.dark .solution-buttons a:not(.connect-button) {
    color: var(--dark-color-link) !important;
}

body.dark .solution-buttons a:not(.connect-button):hover {
    color: var(--dark-color-accent-hover) !important;
}

body.dark .carousel-indicators li {
    border-color: var(--dark-color-background) !important;
}

body.dark .integration-block > a {
    color: var(--dark-color-title);
}

body.dark .integration-block .integration-switch.active{
    color: var(--dark-color-link);
}

body.dark .integration-block .integration-switch:hover,
body.dark .integration-block .integration-switch:focus {
    color: var(--dark-color-accent-hover);
}

body.dark .steps .step-list > li:not(.active) > a {
    color: var(--dark-color-title);
}

body.dark .what-else-wrap h3,
body.dark .what-else-wrap p {
    color: var(--dark-color-black);
}

/* dark controls
-------------------------------------------------- */
body.dark .btn-secondary {
    color: var(--dark-color-black)
}
body.dark button.btn-blue,
body.dark a.btn-blue {
    background-color: var(--dark-color-accent);
    color: white;
}

body.dark .btn.hover-black:hover {
    background: var(--dark-color-accent-hover) !important;
}

body.dark li.secondary>a,
body.dark .more-link {
    color: var(--dark-color-link) !important;
}

body.dark .more-link .arrow-button {
    color: var(--dark-color-link) !important;
}

body.dark li.secondary>a:hover,
body.dark .more-link:hover {
    color: var(--dark-color-accent-hover) !important;
}

body.dark .head-info .afterbutton a {
    color: var(--dark-color-link);
}

body.dark .head-info .beforebutton,
body.dark .head-info .afterbutton {
    color: var(--dark-color-text);
}

body.dark .block-side-image .p-download .platform-ios:not(:hover),
body.dark .block-side-image .p-download .platform-android:not(:hover) {
    filter: grayscale(1) invert();
}

body.dark .activation .desktop-wrapper {
    background-color: #312f62;
}

body.dark .activation .item-number {
    color: var(--dark-color-black)
}

body.dark .activation .item-title {
    color: var(--dark-color-title)
}

body.dark .activation .item-text {
    color: var(--dark-color-text)
}

@media (max-width:991.9px) {
    body.dark .overlay-content > li > a:after {
        color:  var(--dark-color-link) !important;
    }

    body.dark .integration-block > a,
    body.dark .integration-block > a .arrow-button {
        color: var(--dark-color-link) !important;
    }
}


/* dark footer
-------------------------------------------------- */
body.dark footer h6 {
    color: white;
}

body.dark footer li a {
    color: var(--dark-color-link);
}

body.dark footer .copyright-text p,
body.dark footer li a[href]:not(.link) {
    color: var(--dark-color-text);
}

body.dark footer .support-email {
    color: var(--dark-color-link) !important;
}

body.dark footer .support-email:hover {
    color: var(--dark-color-accent-hover) !important;
}

body.dark footer .contacts li .icon {
    filter: invert();
}

body.dark footer .download-app a:not(:hover) {
    filter: grayscale(1) invert();
}

/* switcher
-------------------------------------------------- */
.onoffswitch {
    position: relative;
    width: 48px;
    -webkit-user-select:none;
    -moz-user-select:none;
    -ms-user-select: none;
}
.onoffswitch-checkbox {
    display: none;
}
.onoffswitch-label {
    display: block;
    overflow: hidden;
    cursor: pointer;
    border: 2px solid transparent;
    border-radius: 10px;
    width: 44px;
}
.onoffswitch-inner {
    display: block;
    width: 200%;
    margin-left: -100%;
    transition: margin 0.3s ease-in 0s;
}
.onoffswitch-inner:before,
.onoffswitch-inner:after {
    display: block;
    float: left;
    width: 50%;
    height: 16px;
    padding: 0;
    line-height: 30px;
    font-size: 10px;
    color: white;
    /*font-family: Trebuchet, Arial, sans-serif; font-weight: bold;*/
    box-sizing: border-box;
}
.onoffswitch-inner:before {
    content: "\e013";
    padding-left: 7px;
    background-color: #999999;
    color: #FFFFFF;
    font-family: 'Glyphicons Halflings';
    font-style: normal;
    font-weight: 400;
    line-height: 1;
    line-height: 14px;
    font-size: 8px;
    text-align: left;
}
.onoffswitch-inner:after {
    content: " ";
    padding-right: 7px;
    background-color: #BDBDBD; color: #FFFFFF;
    text-align: right;
}
.onoffswitch-switch {
    display: block;
    width: 8px;
    height: 8px;
    margin: 5px;
    background: #FFFFFF;
    position: absolute;
    top: 1px;
    bottom: 0;
    right: 28px;
    border: 2px solid #FFFFFF;
    border-radius: 10px;
    transition: all 0.3s ease-in 0s;
}
.onoffswitch-checkbox:checked + .onoffswitch-label .onoffswitch-inner {
    margin-left: 0;
}
.onoffswitch-checkbox:checked + .onoffswitch-label .onoffswitch-switch {
    right: 6px;
}


/* switcher 2 version
-------------------------------------------------- */
.onoffswitch.onoffswitch-2 .onoffswitch-label {
    border-radius: 12px;
    /*width: 42px;*/
}

.onoffswitch.onoffswitch-2 .onoffswitch-inner:before {
    content: '';
    font-family: Arial, sans-serif;
    background: #aaaaaa;
    color: white;
    height: 20px;
    padding-left: 5px;
    line-height: 20px;
    box-shadow: inset 3px 3px 15px #555555;
}

.onoffswitch.onoffswitch-2 .onoffswitch-inner:after {
    content: '';
    font-family: Arial, sans-serif;
    font-size: 8px;
    color: white;
    height: 20px;
    padding-right: 3px;
    line-height: 20px;
    background: #ccc;
    box-shadow: inset 3px 3px 15px #999;
}

.onoffswitch.onoffswitch-2 .onoffswitch-switch {
    top: -1px;
    width: 16px;
    height: 16px;
    right: 22px;
}

.onoffswitch.onoffswitch-2 .onoffswitch-switch {
    background: #ffed8c;
    border-color: #ffed8c;
}

.onoffswitch.onoffswitch-2 .onoffswitch-checkbox:checked + .onoffswitch-label .onoffswitch-switch {
    right: 4px;
    background: white;
    border-color: white;
}

/* theme switcher
-------------------------------------------------- */
.theme-switcher {
    display: flex !important;
    min-width: 180px;
    align-items: center;
    padding:12px 8px 6px;
}

.theme-switcher > .control-label {
    padding: 0 6px;
    font-size: 11px;
    font-family: "Open Sans", sans-serif;
}

.theme-switcher > .onoffswitch {
    display: inline-block;
}

/* theme switcher
-------------------------------------------------- */
@media (max-width: 991.9px) {
    body.dark .overlay {
        background: var(--dark-color-background);
        color: var(--dark-color-text)
    }

    .navbar-collapse.collapse.in .lang-selector > .dropdown-menu {
        background: transparent;
    }

    body.dark .lang-selector > .dropdown-menu > li > a.active {
        color: var(--dark-color-link) !important;
    }
}


/* side contact
-------------------------------------------------- */
body.dark .side-contact-form,
body.dark .modal-content {
    background: var(--dark-color-modal);
    color: var(--dark-color-text);
    box-shadow: 0 2px 14px rgb(0,0,0,150);
}

body.dark .side-contact-form #cbh-heading,
body.dark #base-modal h2,
body.dark #base-modal label {
    color: var(--dark-color-title) !important;
}

body.dark .side-contact-form #contact-us {
    color: var(--dark-color-text) !important;
}

body.dark .cbh label {
    color: var(--dark-color-text) !important;
}

body.dark .form-control {
    background: transparent;
    color: var(--dark-color-text) !important;
}

body.dark .form-control::-webkit-input-placeholder {color: var(--dark-color-placeholder) !important;}
body.dark .form-control::-moz-placeholder          {color: var(--dark-color-placeholder) !important;}
body.dark .form-control:-moz-placeholder           {color: var(--dark-color-placeholder) !important;}
body.dark .form-control:-ms-input-placeholder      {color: var(--dark-color-placeholder) !important;}

body.dark .form-group.has-error .help-block {
    color: #e3757a;
}

body.dark .cbh textarea,
body.dark .cbh input[type=text],
body.dark #base-modal .form-control {
    background: transparent;
    color: var(--dark-color-text) !important;
}

body.dark #base-modal .form-control {
    border-bottom: 1px solid #9b9b9b;
}

body.dark .cbh-msg-contacts a {
    filter: brightness(5);
}

body.dark .side-contact-form .form-control::-webkit-input-placeholder {color: var(--dark-color-placeholder) !important;}
body.dark .side-contact-form .form-control::-moz-placeholder          {color: var(--dark-color-placeholder) !important;}
body.dark .side-contact-form .form-control:-moz-placeholder           {color: var(--dark-color-placeholder) !important;}
body.dark .side-contact-form .form-control:-ms-input-placeholder      {color: var(--dark-color-placeholder) !important;}

body.dark #base-modal .form-control::-webkit-input-placeholder {color: var(--dark-color-placeholder) !important;}
body.dark #base-modal .form-control::-moz-placeholder          {color: var(--dark-color-placeholder) !important;}
body.dark #base-modal .form-control:-moz-placeholder           {color: var(--dark-color-placeholder) !important;}
body.dark #base-modal .form-control:-ms-input-placeholder      {color: var(--dark-color-placeholder) !important;}

body.dark .try-find-help {
    background: var(--dark-color-background) !important;
}

body.dark .try-find-help .descr,
body.dark .try-find-help .descr > a {
    color: var(--dark-color-text) !important;
}

body.dark .button-bird,
body.dark #base-modal button[type=submit] {
    background: var(--dark-color-accent) !important;
}

body.dark .button-bird:hover {
    background: var(--dark-color-accent-hover) !important;
}

body.dark #base-modal .plus {
    color: var(--dark-color-accent-hover);
}

body.dark #base-modal button[type=submit]{
    box-shadow: 0 4px 8px rgba(0, 0, 0, 0.3);
    border: none;
}