/* global */
.switch-dark {
    padding: 5px 0 5px 10px;
}

.switch-dark input[type=checkbox]#switch-dark {
    height: 0;
    width: 0;
    visibility: hidden;
    display: none
}

.switch-dark label {
    cursor: pointer;
    width: 60px;
    height: 30px;
    background: #343a3f;
    display: block;
    border-radius: 100px;
    position: relative;
    box-shadow: inset 0 0 7px 0 #252a2e;
    margin-bottom: 0;
}

.switch-dark label:before {
    font: normal normal normal 14px/1 FontAwesome;
    text-rendering: auto;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
    content: "\f185";
    display: block;
    font-size: 20px;
    position: absolute;
    left: 6px;
    top: 5px;
    color: var(--main-black-6)
}

.switch-dark label:after {
    font: normal normal normal 14px/1 FontAwesome;
    text-rendering: auto;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
    content: "\f186";
    position: absolute;
    top: 4px;
    left: 5px;
    width: 22px;
    height: 22px;
    background: #444e58;
    border-radius: 90px;
    transition: .3s;
    color: var(--main-white-1);
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 16px
}

.switch-dark input:checked + label:after {
    left: calc(100% - 5px);
    transform: translateX(-100%);
}

.file-zoom-dialog .btn-navigate {
    top: 50%;
    transform: translateY(-50%);
    margin: 0 15px;
}

.file-zoom-content {
    display: flex;
    justify-content: center;
    align-items: center;
}

@media (max-width: 768px) {
    .switch-dark {
        position: absolute;
        right: 90px;
        top: 8px;
    }
}

:root {
    --main-black-1: #22272e;
    --main-black-2: #2d333b;
    --main-black-3: #313a46;
    --main-black-4: #343d48;
    --main-black-5: #404c5a;
    --main-black-6: #4b5b6d;
    --main-black-7: #6d7986;
    --main-white-1: #adbac7;
    --main-white-2: #8798aa;
    --main-white-3: #fff;
    --main-nav-item: #adbac7;
    --main-nav-item-hover: #fff;
    --main-nav-item-active: #fff;
    --main-border-1: #404c5a;
    --main-link-text: #5a91ca;
    --main-link-text-hover: #3291f2;
    --main-link-text-active: #006cdd;
    --main-text-bg: #8424ff;
    --main-link: #6200EE;
    --main-link-btn: #0464ca;
    --main-link-btn-hover: #0079f8;
    --main-link-btn-active: #0051a6;
    --btn-linear-bg-color: linear-gradient(135deg, #426dff, #ab25ff);
    --main-green: #00a247;
    --main-red: #f32b35;
    --main-yellow: #cc8f12;
    --btn-opacity-hover: .8;
    --btn-opacity-active: 1;
}

body.dark {
    background-color: var(--main-black-1);
    color: var(--main-white-1);
}

.dark a {
    color: var(--main-link-text);
}

.dark a:hover,
.dark a:focus {
    color: var(--main-link-text-hover);
}

.dark a:active {
    color: var(--main-link-text-active);
}

.dark #cookie-bar-prompt-content span {
    color: #ffffff !important;
}

.dark #cookie-bar-prompt p {
    color: var(--main-white-1) !important;
    font-weight: 400;
}

.dark #cookie-bar-prompt-content a,
.dark #cookie-bar a[data-alt="Privacy policy"] {
    color: var(--main-link-text) !important;
}

.dark #cookie-bar a:hover {
    color: var(--main-link-text-hover) !important;
}

.dark .advert_nav p a {
    color: var(--main-white-1) !important;
}

.dark .page-header {
    color: var(--main-white-1);
}

.dark .form-control {
    background-color: var(--main-black-2);
    border-color: var(--main-border-1);
    color: var(--main-white-1);
}

.dark .form-control:hover {
    background-color: var(--main-black-5);
    border-color: var(--main-black-5);
}

.dark .form-control:focus {
    background-color: var(--main-black-5);
    border-color: var(--main-black-5);
    color: var(--main-white-1);
    box-shadow: unset;
}

.dark .navbar {
    background-color: var(--main-black-2) !important;
    border-color: var(--main-border-1);
}

.dark .btn-success {
    background-color: var(--main-link-btn);
    border-color: var(--main-link-btn);
}

.dark .btn-success.focus, .btn-success:focus {
    box-shadow: unset;
}

.dark .btn-success:hover {
    background-color: var(--main-link-btn-hover);
    border-color: var(--main-link-btn-hover)
}

.dark .btn-success:not(:disabled):not(.disabled).active,
.dark .btn-success:not(:disabled):not(.disabled):active,
.dark .show > .btn-success.dropdown-toggle {
    background-color: var(--main-link-btn-active);
    border-color: var(--main-link-btn-active)
}

.dark .dropdown-menu {
    background-color: var(--main-black-3);
    border-color: var(--main-border-1);
    top: 50px;
}

.dark .dropdown-menu > a {
    color: var(--main-white-1);
}

.dark .dropdown-item:focus,
.dark .dropdown-item:hover {
    background: var(--main-black-5);
    color: var(--main-white-1)
}

.dark .dropdown-menu > a:hover {
    color: var(--main-white-1);
    background-color: var(--main-black-5);
}

.dark .page-header {
    border-bottom-color: var(--main-border-1);
}

.dark .file-preview {
    border-color: var(--main-border-1) !important;
}

.dark .file-drop-zone {
    border-color: var(--main-border-1) !important;
}

.dark .file-drop-zone-title {
    color: var(--main-white-1) !important;
}

.dark .about-txt {
    background-color: var(--main-black-2);
    border-color: var(--main-border-1);
    color: var(--main-white-1);
}

.dark .about-txt i {
    color: var(--main-green);
}

.dark .about-ban {
    background-color: var(--main-black-2);
    border-color: var(--main-border-1);
    color: var(--main-white-1);
}

.dark .about-ban i {
    color: var(--main-red)
}

.dark .content-box,
.dark .about-contact {
    background-color: var(--main-black-2);
    border-color: var(--main-border-1);
    color: var(--main-white-1);
}

.dark .about-contact a,
.dark .content-box a {
    background-color: var(--main-black-5);
    border-color: var(--main-border-1);
    color: var(--main-white-1);
}

.dark .content-box a:hover,
.dark .about-contact a:hover {
    background-color: var(--main-black-6);
    border-color: var(--main-black-6);
    color: var(--main-white-1);
}

.dark .about-txt a {
    background-color: var(--main-black-4);
    border-color: var(--main-border-1);
    color: var(--main-white-1);
}

.dark .about-txt a:hover {
    background-color: var(--main-black-6);
    border-color: var(--main-black-6);
    color: var(--main-white-1);
}

.dark .about-contact span {
    color: var(--main-white-1);
}

.dark .footer {
    background-color: var(--main-black-2);
    border-color: var(--main-border-1);
}

.dark .pricingTable-table thead tr th {
    background-color: var(--main-black-3);
    border-color: var(--main-border-1);
    border-bottom: 1px;
}

.dark .pricingTable-table {
    border-color: var(--main-border-1);
}

.dark .pricingTable-table tr td {
    border-color: var(--main-border-1);
    color: var(--main-white-1);

}

.dark .pricingTable-table tr td:nth-child(5) {
    border-left-color: var(--main-border-1);
}

.dark .pricingTable-table tr td:nth-child(5):hover {
    border-left-color: var(--main-border-1);

    background-color: unset;
}

.dark .pricingTable-table tr td:nth-child(5):hover a {
    color: var(--main-link-text-hover);
    background: var(--main-black-5);
}

.dark .pricingTable-table tr:hover {
    background-color: var(--main-black-4);
}

.dark .first {
    background-color: var(--main-black-3);
    color: var(--main-white-1);
}

.dark .first td,
.dark .first th {
    border-color: var(--main-black-5);
}

.dark .historyEntry {
    background-color: var(--main-black-2) !important;
    border-left-color: var(--main-black-4) !important;
}

.dark .historyEntry .title {
    border-color: var(--main-black-6);
    color: var(--main-white-1) !important;
}

.dark .historyEntry .title span {
    color: var(--main-white-2) !important;
}

.dark .historyEntry li.add {
    color: #73b2ff !important;
}

.dark .historyEntry li.fix {
    color: #24b500 !important;
}

.dark article[role="login"] {
    background-color: var(--main-black-2);
}

.dark article[role="login"] h3 {
    color: var(--main-white-1)
}

.dark #login_form .btn-success {
    background-color: var(--main-link-btn);
    border-color: var(--main-link-btn);
}

.dark #login_form .btn-success:hover,
.dark #login_form .btn-success:focus {
    background-color: var(--main-link-btn-hover);
    border-color: var(--main-link-btn-hover);
    color: var(--main-white-1);
}

.dark #login_form .btn-success:active {
    box-shadow: unset;
    background-color: var(--main-link-btn-active);
    border-color: var(--main-link-btn-active);
    color: var(--main-white-1);
}

.dark input:-webkit-autofill {
    box-shadow: 0 0 0 1000px var(--main-black-5) inset !important;
    text-fill-color: var(--main-white-1);
    -webkit-text-fill-color: var(--main-white-1);
}

.dark .krajee-default.file-preview-frame {
    background-color: var(--main-black-3);
    box-shadow: unset !important;
    border-color: var(--main-border-1) !important;
}

.dark .krajee-default .file-footer-caption {
    color: var(--main-white-1) !important;
}

.dark .btn-outline-secondary {
    background-color: var(--main-black-5);
    border-color: var(--main-border-1);
    color: var(--main-white-1);
}

.dark .btn-outline-secondary:hover {
    background-color: var(--main-black-6);
    border-color: var(--main-black-6);
}

.dark .file-caption .file-caption-name {
    color: var(--main-white-1);
}

.dark .file-caption .file-caption-name::placeholder {
    color: var(--main-white-1);
}

.dark .nav-tabs .nav-link:focus,
.dark .nav-tabs .nav-link {
    color: var(--main-white-2);
}

.dark .nav-tabs .nav-link:focus,
.dark .nav-tabs .nav-link:hover {
    background-color: var(--main-black-4);
    border-color: var(--main-border-1);
    color: var(--main-white-1);
}

.dark .nav-tabs .nav-item.show .nav-link,
.dark .nav-tabs .nav-link.active {
    background-color: var(--main-black-4);
    border-color: var(--main-border-1);
    color: var(--main-white-1);
}

.dark legend {
    color: var(--main-white-1);
}

.dark .nav-tabs {
    border-color: var(--main-black-5);
}

.dark fieldset {
    border-color: var(--main-black-5);
}

.dark pre {
    background-color: var(--main-black-2);
    border-color: var(--main-border-1);
    color: var(--main-white-1);
}

.dark .modal-content {
    background-color: var(--main-black-2);
}

.dark .modal-header {
    border-color: var(--main-border-1);
}

.dark .file-zoom-dialog .btn-navigate {
    color: var(--main-black-7);
}

.dark .file-zoom-dialog .kv-zoom-title {
    color: var(--main-white-1);
}

.dark .detailed-price tbody td {
    border-bottom-color: var(--main-border-1) !important;
    border-right-color: var(--main-border-1) !important;
    border-top-color: var(--main-border-1) !important;
    background-color: var(--main-black-1) !important;
}

.dark .detailed-price tfoot tr td {
    background-color: var(--main-black-1) !important;
    border-color: var(--main-black-5) !important
}

.dark .detailed-price tfoot tr td a {
    color: var(--main-link-text);
    text-decoration: none;
}

.dark .detailed-price tfoot tr td a:hover {
    color: var(--main-link-text-hover);
    background-color: var(--main-black-5);
    border-radius: 0;
}

.dark .detailed-price thead th {
    background-color: var(--main-black-3) !important;
    border-color: var(--main-black-5) !important;
    border-left: 0 !important;
}

.dark .pricingTable-table tr td a {
    color: var(--main-link-text);
}

.dark .pricingTable-table tr td a:hover {
    color: var(--main-link-btn-hover);
}

.dark .fa-times-circle {
    color: #ff574b;
}

.dark .fa-check-circle {
    color: #00ea5e;
}

.dark .file-preview .fileinput-remove span {
    background-color: var(--main-black-4);
    border-color: var(--main-border-1);
    color: var(--main-white-1);
}

.dark .file-preview .fileinput-remove span:hover {


    background-color: var(--main-black-4);
    border-color: var(--main-border-1);
    color: var(--main-white-1);
}

.dark .close {
    color: var(--main-white-3);
    text-shadow: 0 1px 0 var(--main-white-3);
    opacity: 1;
}

.dark .close:hover {
    color: var(--main-white-1);
    text-shadow: 0 1px 0 var(--main-white-1);
    opacity: 1;
}

.dark .footer .text-muted {
    color: var(--main-white-1) !important;
}

.dark .pricingTable-table tr td span:nth-child(1) {
    background-color: #005a48;
}

.dark .pricingTable-table tr td span:nth-child(2) {
    background-color: #a77c07;
}

.dark .pricingTable-table tr td span:nth-child(3) {
    background-color: #9e2409;
    color: #fff;
}

.dark .input-group-text {
    background-color: var(--main-black-6);
    color: var(--main-white-1);
    border-color: var(--main-black-6);
}

.dark .card.error-template.adverted_sm .card-header {
    background-color: var(--main-black-4);
}

.dark .card.error-template.adverted_sm .card-body {
    background-color: var(--main-black-2);
}

.dark .card.error-template.adverted_sm .card-body img {
    filter: hue-rotate(168deg) invert(1);
}

.dark .card.error-template.adverted_sm {
    border-color: var(--main-border-1);
}

.dark .card.error-template {
    background: var(--main-black-2);
    color: var(--main-white-2);
}

.dark .card.error-template .card-header {
    background: var(--main-black-3);
}

.dark .file-caption-disabled {
    background-color: var(--main-black-3) !important;
    border-color: var(--main-border-1);
    color: var(--main-white-1);
}

.dark .card {
    background: var(--main-black-2);
}

.dark .card-header {
    background: var(--main-black-3);
}

.dark div.layui-layer {
    background-color: var(--main-black-2);
}

.dark div.layui-layer-title {
    background-color: var(--main-black-3);
    color: #fff;
    border-color: var(--main-black-6);
}

.dark div.layui-layer-btn a {
    background: var(--main-black-3);
    border-color: var(--main-black-6);
}

.dark .card.card-default {
    background-color: var(--main-black-2);
    border-color: var(--main-border-1);
    color: var(--main-white-1);
}

.dark .swal2-popup {
    background: var(--main-black-3) !important;
}

.dark .swal2-title {
    color: var(--main-white-1) !important;
}

.dark #swal2-html-container {
    color: var(--main-white-1) !important;
}

.dark #cookie-bar {
    background: var(--main-black-3) !important;
}

.dark a#cookie-bar-button {
    background-color: var(--main-black-5);
    border-color: var(--main-black-6);
    font-weight: 300;
    font-size: 12px;
    padding: 7px 10px;
}

.dark a#cookie-bar-button:hover {
    background-color: var(--main-black-6);
    border-color: var(--main-black-6);
    font-weight: 300;
}

.dark .navbar-dark .navbar-nav .nav-link {
    color: var(--main-nav-item);
}

.dark .navbar-dark .navbar-brand:focus,
.dark .navbar-dark .navbar-brand:hover {
    color: var(--main-nav-item-hover);
}

.dark .navbar-dark .navbar-nav .nav-link:focus,
.dark .navbar-dark .navbar-nav .nav-link:hover {
    color: var(--main-nav-item-hover);
}

.dark .navbar-dark .navbar-nav .active > .nav-link,
.dark .navbar-dark .navbar-nav .nav-link.active,
.dark .navbar-dark .navbar-nav .nav-link.show,
.dark .navbar-dark .navbar-nav .show > .nav-link {
    color: var(--main-nav-item-active);
}

.dark .navbar-dark .navbar-brand {
    color: var(--main-white-1);
}

.dark .navbar-dark .navbar-toggler {
    outline-color: var(--main-border-1);
    border-color: var(--main-border-1);
    color: var(--main-border-1);
}

.dark button.btn.btn-danger.fileinput-remove.fileinput-remove-button,
.dark a.btn.btn-info.fileinput-upload.fileinput-upload-button:focus {
    color: var(--main-white-3);
    box-shadow: unset !important;
}

.dark .file-error-message {
    color: #eaeaea !important;
    background-color: #a64242 !important;
    border: 1px solid #a64242 !important;
}

.dark form#register_form {
    background-color: var(--main-black-2);
    border: 1px solid var(--main-border-1);
    color: var(--main-white-1);
}

.dark form#register_form hr {
    background-color: var(--main-border-1);
}

.dark #cookie-bar-prompt-content {
    background-color: var(--main-black-1) !important;
}

.dark .or-seperator {
    border-color: var(--main-border-1);
    color: var(--main-white-1);
}

.dark .or-seperator i {
    background: var(--main-black-5);
}

.dark a.btn.btn-social.btn-google.btn-block {
    color: var(--main-white-1);
}

.dark .switch-dark label {
    background: var(--main-black-1);
    box-shadow: inset 0 0 7px 0 var(--main-black-1);
}

.dark .switch-dark input:checked + label {
    border-color: var(--main-border-1);
}

.dark .switch-dark label:after {
    background: var(--main-black-6);
}

.dark a.btn.btn-info.fileinput-upload.fileinput-upload-button {
    color: #fff;
}

.dark .cover-up {
    box-shadow: 0 0 7px 2px #1d1d1d;
    color: var(--main-white-2);
    background-color: var(--main-black-2)
}