@media (prefers-color-scheme: dark) {
    :root {
        --main-black-1: #000000;
        --main-black-2: #212121;
        --main-black-3: #373737;
        --main-black-4: #3f3f3f;
        --main-black-5: #515151;
        --main-black-6: #656565;
        --main-black-7: #acacac;
        --main-white-1: #fff;
        --main-white-2: #b9b9b9;
        --main-link-text: #a464ff;
        --main-link-text-hover: #bf93fd;
        --main-link-text-active:#843be2;
        --main-text-bg: #8424ff;
        --main-link: #6200EE;
        --main-link-btn: #8424ff;
        --main-link-btn-hover: #b07af4;
        --main-link-btn-active: #4f04af;
        --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 {
        background-color: var(--main-black-1);
        color: var(--main-white-1);
    }

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

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

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

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

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

    .navbar {
        background-color: var(--main-black-2) !important;
    }
    .btn-success{
        background-color: var(--main-link-btn);
        border-color: var(--main-link-btn)
    }
    .btn-success.focus, .btn-success:focus{
        box-shadow: unset;
    }
    .btn-success:hover{
        background-color: var(--main-link-btn-hover);
        border-color: var(--main-link-btn-hover)
    }
    .btn-success:not(:disabled):not(.disabled).active, .btn-success:not(:disabled):not(.disabled):active, .show>.btn-success.dropdown-toggle{
        background-color: var(--main-link-btn-active);
        border-color: var(--main-link-btn-active)
    }
    .dropdown-menu {
        background-color: var(--main-black-3);
    }

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

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

    .page-header {
        border-bottom-color: var(--main-black-4);
    }

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

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

    .about-txt {
        background-color: var(--main-black-2);
        border-color: var(--main-black-3);
        color: var(--main-white-1);
    }
    .about-txt i{
        color: var(--main-green);
    }
    .about-ban {
        background-color: var(--main-black-2);
        border-color: var(--main-black-3);
        color: var(--main-white-1);
    }
    .about-ban i{
        color: var(--main-red)
    }
    .content-box,
    .about-contact {
        background-color: var(--main-black-2);
        border-color: var(--main-black-3);
        color: var(--main-white-1);
    }
    .about-contact a,
    .content-box a{
        background-color: var(--main-black-4);
        border-color: var(--main-black-4);
        color: var(--main-white-1);
    }
    .content-box a:hover,
    .about-contact a:hover{
        background-color: var(--main-black-6);
        border-color: var(--main-black-6);
        color: var(--main-white-1);
    }
    .about-txt a{
        background-color: var(--main-black-4);
        border-color: var(--main-black-4);
        color: var(--main-white-1);
    }
    .about-txt a:hover{
        background-color: var(--main-black-6);
        border-color: var(--main-black-6);
        color: var(--main-white-1);
    }
    .about-contact span {
        color: var(--main-white-1);
    }

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

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

    .pricingTable-table {
        border-color: var(--main-black-3);
    }

    .pricingTable-table tr td {
        border-color: var(--main-black-2);
        color: var(--main-white-1);
        background-color: var(--main-black-2);
    }

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

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

    }

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

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

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

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

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

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

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

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

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

    article[role="login"] {
        background-color: var(--main-black-2);
    }
    article[role="login"] h3{
        color: var(--main-link-text)
    }
    #login_form .btn-success{
        background-color: var(--main-link-btn);
        border-color: var(--main-link-btn);
    }
    #login_form .btn-success:hover,
    #login_form .btn-success:focus{
        background-color: var(--main-link-btn-hover);
        border-color: var(--main-link-btn-hover);
        color: var(--main-white-1);
    }
    #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);
    }

    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);
    }

    .krajee-default.file-preview-frame {
        background-color: var(--main-black-3);
    }

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

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

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

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

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

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

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

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

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

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

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

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

    .modal-header {
        border-color: var(--main-black-4);
    }

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

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

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

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

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

    .detailed-price tfoot tr td a:hover {
        color: var(--main-link-text-hover);
        background-color: var(--main-black-2);
    }

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

    .pricingTable-table tr td a{
        color: var(--main-link-text);
    }
    .pricingTable-table tr td a:hover{
        color: var(--main-link-btn-hover);
    }
    .fa-times-circle{
        color: #ff574b;
    }
    .fa-check-circle {
        color: #00ea5e;
    }
    .file-preview .fileinput-remove span{
        background-color: var(--main-black-2);
        border-color: var(--main-black-3);
    }
    .file-preview .fileinput-remove span:hover{
        background-color: var(--main-black-5);
        border-color: var(--main-black-5);
    }
    .close {
        color: var(--main-white-2);
        text-shadow: 0 1px 0 var(--main-white-1);
        opacity: 1;
    }
    .close:hover{
        color: var(--main-white-1);
        text-shadow: 0 1px 0 var(--main-white-1);
        opacity: 1;
    }
    .footer .text-muted{
        color: var(--main-white-1) !important;
    }
    .pricingTable-table tr td span:nth-child(1) {
        background-color: #005a48;
    }
    .pricingTable-table tr td span:nth-child(2) {
        background-color: #a77c07;
    }
    .pricingTable-table tr td span:nth-child(3){
        background-color: #9e2409;
        color:#fff;
    }
    .input-group-text{
        background-color: var(--main-black-6);
        color: var(--main-white-1);
        border-color: var(--main-black-6);
    }
    .card.error-template.adverted_sm .card-header{
        background-color: var(--main-black-4);
    }
    .card.error-template.adverted_sm .card-body{
        background-color: var(--main-black-2);
    }
    .card.error-template.adverted_sm .card-body img{
        filter: hue-rotate(168deg) invert(1);
    }
    .card.error-template.adverted_sm{
        border-color: var(--main-black-4);
    }
}
/* global */
.file-zoom-dialog .btn-navigate {
    top: 50%;
    transform: translateY(-50%);
    margin: 0 15px;
}

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