@media (prefers-color-scheme: dark) {
    :root {
        --background: #333333;
        --forecolor: #dddddd;
        --lighterblue: #2a2a2a;
        --lightblue: #def0f7;
        --gray: #999;
        --lightgray: #222;
        --error-back: #38271c;
        --white: #222;
        --tableback: #3a3a3a;
        --reshtehhover: #2a2a2a;
        --window-backcolor: #222635;
        --color1: rgb(23,72,100);
        --color2: rgb(30,114,114);
        --box-shadow: #2c2638;
        --error-border: #db5c5a;
        --shadow: #2c2638;
    }

    body {
        color: var(--lightblue);
    }

    .panel {
        background: #272c3f;
        /*//background: var(--window-backcolor);
        //border: 2px solid #272c3f;*/
    }

        .panel h3, .panel .h3 {
            color: var(--blue);
        }

    .windowcard {
        background: var(--window-backcolor);
    }

    .modal-content {
        background: var(--window-backcolor);
    }

    .modal-footer {
        border-top: 1px solid #444444;
    }

    .modal-header {
        border-bottom: 1px solid #444444;
    }

    .form-control {
        background-color: #000000;
        color: #ffffff;
        border-color: #3c414e;
    }

        .form-control[disabled], .form-control[readonly], fieldset[disabled] .form-control {
            cursor: not-allowed;
            background-color: inherit;
            color: #aaa;
        }

    hr {
        margin-top: 20px;
        margin-bottom: 20px;
        border: 0;
        border-top: 1px solid #192241;
    }

    .btn-default {
        color: #eee;
        background-color: transparent;
        border-color: #888;
    }

        .btn-default:hover, .btn-default:focus, .btn-default:active, .btn-default.active, .open .dropdown-toggle.btn-default {
            color: #eee;
            background-color: #222;
            border-color: #eee;
        }



    .btn-newui-default {
        color: var(--btn-primary-color2);
        background-color: var(--window-backcolor);
        border-color: var(--btn-primary-color2);
        border-radius: 1.0rem;
        padding: 0.5rem 2.5rem;
        font-size: 12pt;
        background-clip: padding-box;
    }


    .smscode .vcode {
        background: transparent;
        color: var(--white);
    }

    .smscode .boxes span {
        background: #303d71;
        display: block;
        flex: 1 0;
        border-radius: 6px;
        border: 2px solid #192241;
    }






    .dashboardcard {
        background: #272d39;
        border: 4px solid var(--window-backcolor);
    }

        .dashboardcard .card-header {
            background-color: var(--window-backcolor)
        }

    .packageselector svg, .packageselector svg path {
        fill: #eee !important;
    }

    .dropdown-menu {
        background-color: #333;
        border-color: #555;
    }

        .dropdown-menu > li > a {
            color: #ccc;
        }

        .dropdown-menu .divider {
            background-color: #555;
        }

    .zarinpal {
        background: url(icons/zarinpal-logo-dark.svg) no-repeat center center;
        background-size: 120px auto;
    }

    .table {
        background: #2d3449;
        border-radius: 12px;
    }

        .table thead > tr > th {
            vertical-align: bottom;
            border-bottom: 2px solid #363d57;
        }

        .table thead > tr > th, .table tbody > tr > th, .table tfoot > tr > th, .table thead > tr > td, .table tbody > tr > td, .table tfoot > tr > td {
            border-top: 1px solid #363d57;
        }

    .table-striped > tbody > tr:nth-child(odd) > td, .table-striped > tbody > tr:nth-child(odd) > th {
        background-color: #252b3b;
    }

    .table-hover > tbody > tr:hover > td, .table-hover > tbody > tr:hover > th {
        background-color: #454c68;
    }

    .tristatebutton .tributtons button {
        background: #1a1f32;
        border-color: #1a1f32;
        color: var(--text);
    }

        .tristatebutton .tributtons button.active {
            background: #e8f0fe;
            border-color: #e8f0fe;
            color: #1d6ad3;
        }

    .pageremaincredit svg text, .creditchart svg text {
        fill: #eee !important;
    }




    .banner {
        background: #4c408e;
        color: white;
    }

        .banner .steps {
            width: 70%;
            background: url('steps/night.png') no-repeat bottom center;
            background-size: 100% auto;
        }

        .banner .sun .sunitself {
            width: 70%;
            aspect-ratio: 1;
            background: transparent;
            border-radius: 50%;
            position: absolute;
            left: 15%;
            top: -10%;
            z-index: 0;
            box-shadow: -25px 10px 0px 0px #b3abdd;
            /*animation: sunshine 1s forwards infinite;
            animation-direction: alternate-reverse;*/
        }

        .banner .sun .sunshine {
            width: 70%;
            aspect-ratio: 1;
            background: transparent;
            border-radius: 50%;
            position: absolute;
            left: 15%;
            top: -10%;
            z-index: 0;
            box-shadow: -25px 10px 0px 0px #b3abdd;
            filter: blur(15px);
            animation: glow 1s forwards infinite;
            animation-direction: alternate-reverse;
        }

    @keyframes glow {
        from {
            opacity: 1;
        }

        to {
            opacity: 0.5;
        }
    }

    .alert-danger {
        color: var(--error-back);
        background-color: var(--error-color);
        border-color: var(--error-color);
    }

    .sortable .item .inneritem {
        border: 1px solid #0d0e12;
        background: #1c1f2b;
    }

    .packageselector {
        background: #242e53;
        background: linear-gradient(180deg, #242e53 0%, #014563 100%);
    }

        .packageselector a.btn-link {
            background: #242e53;
            border-radius: 20px;
            padding: 5px 40px 5px 25px;
            text-decoration: none;
            color: var(--blue);
            position: relative;
        }

    .menubuttons {
        color: #428bca;
        border: 1px solid #428bca;
        background: initial;
    }
        .menubuttons:not(.nohover):hover {
            background: #428bca;
            color: white;
        }

        .menubuttons.small.blue, .menubuttons.small.lightblue {
            color: #428bca;
            border: 1px solid #428bca;
            background: transparent;
        }

        .menubuttons.small.pdf {
            color: #c44139;
            border: 1px solid #c44139;
            background: transparent;
        }

        .menubuttons.small.contact {
            color: #9E9D24;
            border: 1px solid #9E9D24;
            background: transparent;
        }
}