@font-face {
    font-family: "IRANSansWeb";
    src: url("../font/IRANSansWeb.ttf");
}

@font-face {
    src: url("../font/fa-regular-400.ttf");
}

* {
    font-family: "IRANSansWeb" !important;
    direction: rtl;
    outline: none;
}

body {
    background-color: #212529;
    color: #fff;
}

*::-webkit-scrollbar {
    width: 6px;
    background: #2a2e32;
}

*::-webkit-scrollbar-thumb {
    background-color: #ffbc2c;
    border-radius: 1ex;
}

fieldset {
    border: 2px solid #fff;
    border-radius: 10px;
    padding: 5px 10px;
    box-shadow: 0 0.5rem 1rem rgba(0, 0, 0, 0.15) !important;
}

legend {
    font-size: 13pt;
    padding: 0 10px;
    margin-bottom: 0px;
    float: none;
    width: auto;
    text-shadow: 2px 2px black;
}

.text-red {
    color: red !important;
}

a,
a:hover {
    color: white !important;
    text-decoration: none;
    cursor: pointer !important;
}

.tab-header {
    display: flex;
    justify-content: space-between;
    margin-top: 90px;
}

    .tab-header li {
        display: flex;
        flex-direction: column;
        align-items: center;
    }

        .tab-header li p {
            margin-top: 20px;
            text-shadow: 2px 2px black;
        }

        .tab-header li a {
            display: flex;
            justify-content: center;
            align-items: center;
            padding: 15px;
            transform: rotate(45deg);
            box-shadow: 0 0.5rem 1rem rgba(0, 0, 0, 0.15) !important;
            cursor: pointer;
            background-color: #2a2e32;
            border-radius: 9px;
        }

            .tab-header li a.active {
                animation: borderAnimate 0.5s both;
            }

        .tab-header li img {
            transform: rotate(-45deg);
        }

.warehouse-item {
    margin: 10px 0;
}

.searchbox {
    background-color: #2a2e32;
    border-radius: 12px;
    box-shadow: 0 0.5rem 1rem rgba(0, 0, 0, 0.15) !important;
    display: flex;
    align-items: center;
    padding-left: 20px;
}

    .searchbox input {
        background: none;
        border: none;
        color: white;
        outline: none;
        padding: 17px;
        width: 100%;
    }

    .searchbox a {
        color: white;
        font-size: large;
    }

div .warehouse-selectBox {
    border-radius: 10px;
    background-color: #2a2e32;
    box-shadow: 0 0.5rem 1rem rgba(0, 0, 0, 0.15) !important;
}

.warehouse-content .warehouse-selectBox a {
    display: flex;
    padding: 17px;
    align-items: center;
    justify-content: space-between;
}

    .warehouse-content .warehouse-selectBox a span:nth-child(2) {
        font-size: 13pt;
        transition: all ease 1s;
    }

.warehouse-item {
    display: flex;
    justify-content: space-between;
    box-shadow: 0 0.5rem 1rem rgba(0, 0, 0, 0.15) !important;
    background-color: #2a2e32;
    border-radius: 10px;
    padding: 20px 10px;
    width: 100%;
    position: relative;
    overflow: hidden;
}

    .warehouse-item .warehouse-item-info {
        display: flex;
        flex-direction: column;
        align-items: center;
    }

        .warehouse-item .warehouse-item-info p {
            text-shadow: 2px 2px black;
            font-size: 18px;
        }

            .warehouse-item .warehouse-item-info p:last-child {
                color: #ffbc2c;
            }

    .warehouse-item .warehouse-item-img img {
        width: 90px;
        height: 90px;
    }

.warehouse-item-more-option > .ellipsis-v {
    position: static;
    margin-top: 10px;
    margin-left: 10px;
    font-size: 14pt;
    transition: all ease 0.5s;
}

    .warehouse-item-more-option > .ellipsis-v:hover {
        transition: all ease 1.5s;
        color: #ffbc2c;
        cursor: default;
    }

        .warehouse-item-more-option > .ellipsis-v:hover > .options {
            background-color: rgba(43, 43, 43, 0.692);
            position: absolute;
            top: 0%;
            left: 0%;
            border-radius: 10px;
            height: 100%;
            animation: show-more-option 0.4s both;
            display: flex;
            flex-wrap: wrap;
            justify-content: space-between;
            padding: 20px;
            transition: all ease 1.5s;
        }

.warehouse-item-more-option .options {
    display: none;
}

    .warehouse-item-more-option .options p {
        padding: 0;
        margin: 0;
        color: white;
        display: inline-block;
        transition: all ease 0.5s;
    }

        .warehouse-item-more-option .options p span {
            margin: 0;
            padding: 0;
            text-shadow: 2px 2px black;
            cursor: pointer;
        }

        .warehouse-item-more-option .options p:hover {
            color: #ffbc2c;
        }

.modal-header,
.modal-body {
    background-color: #212529 !important;
}

.modal-header {
    border-bottom: 1px solid #ffbc2c;
    display: flex;
    justify-content: space-between;
}

    .modal-header button {
        background: none;
        border: none;
        color: #ffbc2c;
        font-size: 15pt;
    }

.custom-input input {
    width: 100%;
    background: none;
    border: none;
    color: white;
}

/* #region CheckBox */
.toggleButton {
    cursor: pointer;
    display: block;
    transform-origin: 50% 50%;
    transform-style: preserve-3d;
    transition: transform 0.14s ease;
}

    .toggleButton:active {
        transform: rotateX(30deg);
    }

    .toggleButton input {
        display: none;
    }

        .toggleButton input + div {
            border: 3px solid #2a2e32;
            border-radius: 50%;
            position: relative;
            width: 30px;
            height: 30px;
        }

            .toggleButton input + div svg {
                fill: none;
                stroke-width: 3.6;
                stroke: #ffbc2c;
                stroke-linecap: round;
                stroke-linejoin: round;
                width: 30px;
                height: 30px;
                display: block;
                position: absolute;
                left: -3px;
                top: -3px;
                right: -3px;
                bottom: -3px;
                z-index: 1;
                stroke-dashoffset: 124.6;
                stroke-dasharray: 0 162.6 133 29.6;
                transition: all 0.4s ease 0s;
            }

            .toggleButton input + div:before,
            .toggleButton input + div:after {
                content: "";
                width: 3px;
                height: 13px;
                background: #ffbc2c;
                position: absolute;
                left: 50%;
                top: 50%;
                border-radius: 5px;
            }

            .toggleButton input + div:before {
                opacity: 0;
                transform: scale(0.3) translate(-50%, -50%) rotate(45deg);
                -webkit-animation: bounceInBefore 0.3s linear forwards 0.3s;
                animation: bounceInBefore 0.3s linear forwards 0.3s;
            }

            .toggleButton input + div:after {
                opacity: 0;
                transform: scale(0.3) translate(-50%, -50%) rotate(-45deg);
                -webkit-animation: bounceInAfter 0.3s linear forwards 0.3s;
                animation: bounceInAfter 0.3s linear forwards 0.3s;
            }

        .toggleButton input:checked + div svg {
            stroke-dashoffset: 162.6;
            stroke-dasharray: 0 162.6 28 134.6;
            transition: all 0.4s ease 0.2s;
        }

        .toggleButton input:checked + div:before {
            opacity: 0;
            transform: scale(0.3) translate(-50%, -50%) rotate(45deg);
            -webkit-animation: bounceInBeforeDont 0.3s linear forwards 0s;
            animation: bounceInBeforeDont 0.3s linear forwards 0s;
        }

        .toggleButton input:checked + div:after {
            opacity: 0;
            transform: scale(0.3) translate(-50%, -50%) rotate(-45deg);
            -webkit-animation: bounceInAfterDont 0.3s linear forwards 0s;
            animation: bounceInAfterDont 0.3s linear forwards 0s;
        }

@-webkit-keyframes bounceInBefore {
    0% {
        opacity: 0;
        transform: scale(0.3) translate(-50%, -50%) rotate(45deg);
    }

    50% {
        opacity: 0.9;
        transform: scale(1.1) translate(-50%, -50%) rotate(45deg);
    }

    80% {
        opacity: 1;
        transform: scale(0.89) translate(-50%, -50%) rotate(45deg);
    }

    100% {
        opacity: 1;
        transform: scale(1) translate(-50%, -50%) rotate(45deg);
    }
}

@keyframes bounceInBefore {
    0% {
        opacity: 0;
        transform: scale(0.3) translate(-50%, -50%) rotate(45deg);
    }

    50% {
        opacity: 0.9;
        transform: scale(1.1) translate(-50%, -50%) rotate(45deg);
    }

    80% {
        opacity: 1;
        transform: scale(0.89) translate(-50%, -50%) rotate(45deg);
    }

    100% {
        opacity: 1;
        transform: scale(1) translate(-50%, -50%) rotate(45deg);
    }
}

@-webkit-keyframes bounceInAfter {
    0% {
        opacity: 0;
        transform: scale(0.3) translate(-50%, -50%) rotate(-45deg);
    }

    50% {
        opacity: 0.9;
        transform: scale(1.1) translate(-50%, -50%) rotate(-45deg);
    }

    80% {
        opacity: 1;
        transform: scale(0.89) translate(-50%, -50%) rotate(-45deg);
    }

    100% {
        opacity: 1;
        transform: scale(1) translate(-50%, -50%) rotate(-45deg);
    }
}

@keyframes bounceInAfter {
    0% {
        opacity: 0;
        transform: scale(0.3) translate(-50%, -50%) rotate(-45deg);
    }

    50% {
        opacity: 0.9;
        transform: scale(1.1) translate(-50%, -50%) rotate(-45deg);
    }

    80% {
        opacity: 1;
        transform: scale(0.89) translate(-50%, -50%) rotate(-45deg);
    }

    100% {
        opacity: 1;
        transform: scale(1) translate(-50%, -50%) rotate(-45deg);
    }
}

@-webkit-keyframes bounceInBeforeDont {
    0% {
        opacity: 1;
        transform: scale(1) translate(-50%, -50%) rotate(45deg);
    }

    100% {
        opacity: 0;
        transform: scale(0.3) translate(-50%, -50%) rotate(45deg);
    }
}

@keyframes bounceInBeforeDont {
    0% {
        opacity: 1;
        transform: scale(1) translate(-50%, -50%) rotate(45deg);
    }

    100% {
        opacity: 0;
        transform: scale(0.3) translate(-50%, -50%) rotate(45deg);
    }
}

@-webkit-keyframes bounceInAfterDont {
    0% {
        opacity: 1;
        transform: scale(1) translate(-50%, -50%) rotate(-45deg);
    }

    100% {
        opacity: 0;
        transform: scale(0.3) translate(-50%, -50%) rotate(-45deg);
    }
}

@keyframes bounceInAfterDont {
    0% {
        opacity: 1;
        transform: scale(1) translate(-50%, -50%) rotate(-45deg);
    }

    100% {
        opacity: 0;
        transform: scale(0.3) translate(-50%, -50%) rotate(-45deg);
    }
}

.toggleButton div {
    display: inline-block;
}

/* #endregion CheckBox */

.warehouse-selectBox .warehouse-selectBox-group {
    margin-bottom: 10px;
    padding: 0 30px;
    display: none;
}

.warehouse-content .warehouse-selectBox.active a span:nth-child(2) {
    transform: rotate(180deg);
}

.warehouse-selectBox .warehouse-selectBox-group form label {
    display: inline-flex;
    align-items: center;
}

    .warehouse-selectBox .warehouse-selectBox-group form label span {
        margin-right: 10px;
    }

.fa-angle-down {
    transition: all ease .5s;
}

    .fa-angle-down.active {
        transform: rotate(180deg);
    }

.modal-content {
    box-shadow: 0 0.5rem 1rem rgba(0, 0, 0, 0.15) !important;
}

.modal-dialog {
    width: 95%;
    max-width: 100% !important;
}


.adminpanel-tab-header a {
    display: block;
    padding: 20px;
    background-color: #2a2e32;
    border-radius: 10px;
    text-align: center;
    margin: 10px 0;
    box-shadow: 0 0.5rem 1rem rgba(0, 0, 0, 0.15) !important;
    text-shadow: 2px 2px black;
    color: white !important;
    cursor: pointer
}

.adminpanel-content {
    background-color: #2a2e32;
    box-shadow: 0 0.5rem 1rem rgba(0, 0, 0, 0.15) !important;
    margin-top: 10px;
    padding: 20px;
    border-radius: 10px;
}

    .adminpanel-content .adminpanel-content-header {
        margin-right: -20px;
        border-right: 3px solid #ffbc2c;
        padding-right: 20px;
        border-radius: 2px;
        text-shadow: 2px 2px black;
        color: white !important;
    }

    .adminpanel-content .adminpanel-content-info .create-new {
        width: 100%;
        display: flex;
        justify-content: end;
    }

        .adminpanel-content .adminpanel-content-info .create-new a {
            color: white !important;
            transition: all ease 0.3s;
        }

.custom-btn {
    background-color: #ffbc2c;
    border: 2px solid #ffbc2c;
    padding: 5px 15px;
    border-radius: 5px;
    box-shadow: 0 0.5rem 1rem rgba(0, 0, 0, 0.15) !important;
}

    .custom-btn:hover {
        border: 2px solid #ffbc2c;
        background: none;
        color: white;
    }



th,
td {
    color: white;
    text-shadow: 2px 2px black;
}

tr {
    vertical-align: baseline;
}

.thumbnail-img {
    width: 40px;
    height: 40px;
    border-radius: 30px;
    border: 1px solid white;
    box-shadow: 0 0.5rem 1rem rgba(0, 0, 0, 0.15) !important;
}

tbody,
thead {
    text-align: center;
}

.custom-btns a {
    transition: all ease .3s;
    cursor: pointer;
    margin: 0 5px;
}

    .custom-btns a:hover {
        color: #ffbc2c !important;
    }


.custom-selectbox > .form {
    width: 100%;
    background-color: #2a2e32;
    border-radius: 10px !important;
    box-shadow: 0 0.5rem 1rem rgba(0, 0, 0, 0.15) !important;
}

    .custom-selectbox > .form > a {
        width: 100%;
        display: flex;
        padding: 10px;
        justify-content: space-between;
    }


    .custom-selectbox > .form .searchbox {
        border-radius: 10px;
        background-color: #212529 !important;
        position: relative;
        margin: 0 10px;
    }

.searchItems {
}

    .searchItems a {
        display: block;
        margin: 0 10px;
        padding: 10px;
        transition: all ease .3s;
        list-style-type: disc;
    }

.custom-selectbox-options {
    display: none;
}

.searchItems a:hover {
    font-size: 20px;
    color: #ffbc2c
}

.custom-selectbox-icon-angle-down {
    transition: all 0.3s ease;
}

    .custom-selectbox-icon-angle-down.active {
        transform: rotate(180deg);
    }

fieldset > #bd-root-startDatefrom > input,
fieldset > #bd-root-endDate > input {
    background: none;
    border: none;
    color: white;
    padding: 2px;
    text-align: center;
    font-size: 20pt;
}

.bd-calendar,
.bd-main,
.bd-calendar > * {
    width: 100% !important;
}

.bd-title {
    display: flex;
    align-items: center;
    justify-content: space-evenly;
}

.cricle-btn {
    background-color: #2a2e32;
    border: 2px solid #2a2e32;
    width: 20px;
    height: 20px;
    border-radius: 100px;
    padding: 20px;
    display: flex;
    justify-content: center;
    align-items: center;
    transition: all ease .3s;
    cursor: pointer;
    box-shadow: 0 0.5rem 1rem rgba(0, 0, 0, 0.15) !important;
    margin: 0 5px;
}

    .cricle-btn:hover {
        background: none;
        border-color: #ffbc2c;
    }

.parent-circle-btn {
    display: flex;
    align-items: center;
    padding: 2.5rem 0;
}

.swal2-popup {
    background: #2a2e32
}

.swal2-title, .swal2-html-container {
    color: #ffffff;
    text-shadow: 2px 2px black;
}

.custom-input > fieldset > input {
    outline: none !important;
}

.nav .nav-pills .tab-header img {
    width: 50px !important;
    height: 50px !important;
}

.dir-ltr {
    direction: ltr;
}

.none-arrow-icon {
    background: none;
    width: 100%;
    color: white;
    outline: none !important;
    border: none !important;
}

    .none-arrow-icon option {
        background: #212529;
        color: white;
    }

select:-ms-expand {
    display: none !important;
}

@keyframes show-more-option {
    from {
        width: 0%;
    }

    to {
        width: 100%;
    }
}

@keyframes borderAnimate {
    0% {
        border-top: 3px solid #ffbc2c;
    }

    25% {
        border-right: 3px solid #ffbc2c;
    }

    50% {
        border-right: 3px solid #ffbc2c;
    }

    75% {
        border-left: 3px solid #ffbc2c;
    }

    100% {
        border-bottom: 3px solid #ffbc2c;
        border-top: 3px solid #ffbc2c;
        border-right: 3px solid #ffbc2c;
        border-left: 3px solid #ffbc2c;
    }
}

.nav-item img {
    width: 50px !important;
    height: 50px !important;
}


.login {
    height: 100vh;
    width: 450px;
    display: flex;
    align-items: center;
}

.login-content {
    background-color: #2a2e32;
    border-radius: 15px;
    padding: 10px 20px;
    box-shadow: 0 0.5rem 1rem rgba(0, 0, 0, 0.15) !important;
}

    .login-content .login-content-photo img {
        width: 250px;
        height: 219px;
    }

.login-content-photo {
    display: flex;
    justify-content: center;
    align-items: center;
    padding-top: 10px;
}

.login-content-title {
    text-align: center;
    margin: 10px 0;
}

    .login-content-title h3 {
        text-shadow: 2px 2px black;
    }

.notfound {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
}

    .notfound img {
        width: 500px;
        height: auto;
    }

.factorItems {
    box-shadow: 0 0.5rem 1rem rgba(0, 0, 0, 0.15) !important;
    border-radius: 10px;
    background: #2a2e32;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    padding: 10px;
}

    .factorItems > div {
        width: 100%;
        display: flex;
        justify-content: space-between;
        align-items: center;
    }

    .factorItems > p {
        text-align: center;
        margin: 0;
        padding: 0;
        margin-top: 30px;
    }

    .factorItems .cricle-btn {
        width: 10px !important;
        height: 10px !important;
        padding: 15px !important;
    }

    .factorItems label {
        display: flex !important;
        align-items: center;
        justify-content: center;
    }

    .factorItems img {
        width: 100px
    }

.change-color {
    transition: all ease .5s;
}

    .change-color:hover {
        color: #ffbc2c;
    }

@media(max-width: 992px) {
    .nav.nav-pills.tab-header .nav-item {
        width: 50% !important;
    }

        .nav.nav-pills.tab-header .nav-item a {
            padding: 10px
        }

            .nav.nav-pills.tab-header .nav-item a img {
                width: 40px !important;
                height: 40px !important
            }

    .searchbox {
        margin-top: 10px
    }
}

@media(min-width: 992px) {
    .warehouse-selectBox {
        width: 100%;
        position: absolute !important
    }
}

@media(min-width: 768px) {

    .modal-dialog {
        width: 80% !important
    }
}

.warehouse-selectBox {
    z-index: 100
}

@media(min-width: 1200px) {
    .modal-dialog {
        width: 60% !important
    }
}

.custom-input {
    margin: 5px 0;
}


.color-yellow {
    color: #ffbc2c !important;
}

.color-pink {
    color: #c90035 !important;
}

.color-dark-orange {
    color: darkorange !important;
}


.color-blue {
    color: #03dac6 !important;
}

@media (max-width: 992px) {
    table {
        font-size: 9pt
    }

        table thead {
            display: none
        }

        table, table tbody, table tr, table td {
            display: block;
            width: 100%
        }

            table tr {
                margin-bottom: 25px
            }

            table td {
                text-align: left;
                padding-left: 0%;
                position: relative
            }

            td::before {
                content: attr(data-label);
                position: absolute;
                right: 0;
                width: 50%;
                text-align: right;
                font-size: 15px;
            }
}
.design-process-content {
    position: relative;
    padding: 16px 34% 30px 30px;
}

.process-model {
    list-style: none;
    padding: 0;
    position: relative;
    max-width: 600px;
    margin: 20px auto 26px;
    border: none;
    z-index: 0;
    display: flex;
}

    .process-model li::after {
        background: #2a2e32 none repeat scroll 0 0;
        bottom: 0;
        content: "";
        display: block;
        height: 4px;
        margin: 0 auto;
        position: absolute;
        right: -30px;
        top: 35px;
        width: 100%;
        z-index: -1;
        transition: all 0.3s ease;
    }

    .process-model li.visited::after {
        background: #ffbc2c;
    }

    .process-model li:last-child::after {
        width: 0;
    }

    .process-model li {
        display: flex;
        flex-direction: column;
        align-items: center;
        width: 38%;
        text-align: center;
        float: none;
    }

        .nav-tabs.process-model > li.active > a,
        .nav-tabs.process-model > li.active > a:hover,
        .nav-tabs.process-model > li.active > a:focus,
        .process-model li a:hover,
        .process-model li a:focus {
            background: transparent;
        }

        .process-model li a {
            transform: rotate(45deg) !important;
            width: 68px !important;
            height: 68px !important;
            display: flex !important;
            align-items: center !important;
            justify-content: center !important;
            font-size: 20pt !important;
            padding: 35px !important;
            background: #2a2e32 !important;
            border-radius: 10px !important;
            border: none;
        }

        .process-model li.active,
        .process-model li.visited {
            color: #ffbc2c;
        }

            .process-model li.active a,
            .process-model li.active a:hover,
            .process-model li.active a:focus,
            .process-model li.visited a,
            .process-model li.visited a:hover,
            .process-model li.visited a:focus {
                color: #ffbc2c;
                animation: borderAnimate 1s both;
            }

            .process-model li.active p,
            .process-model li.visited p {
                font-weight: 600;
            }

        .process-model li i {
            transform: rotate(-45deg);
            color: white;
        }

        .process-model li p {
            font-size: 14px;
            margin-top: 11px;
            color: white;
        }

    .process-model.contact-us-tab li.visited a,
    .process-model.contact-us-tab li.visited p {
        color: #2a2e32 !important;
    }

    .process-model.contact-us-tab li::after {
        display: none;
    }

    .process-model.contact-us-tab li.visited i {
        border-color: #2a2e32;
    }

body {
    background-color: #212529 !important;
}

@keyframes borderAnimate {
    0% {
        border: none;
    }

    25% {
        border-left: 3px solid #ffbc2c;
    }

    50% {
        border-left: 3px solid #ffbc2c;
        border-top: 3px solid #ffbc2c;
    }

    75% {
        border-left: 3px solid #ffbc2c;
        border-top: 3px solid #ffbc2c;
        border-right: 3px solid #ffbc2c;
    }

    100% {
        border-bottom: 3px solid #ffbc2c;
        border-top: 3px solid #ffbc2c;
        border-right: 3px solid #ffbc2c;
        border-left: 3px solid #ffbc2c;
    }
}


.cornerLabel-green {
    background: #006A00;
    width: 17px;
    height: 70px;
    position: absolute;
    left: 12px;
    top: -19px;
    transform: rotate(45deg)
}
.ForPrint {
    display: none
}

@media print {
    .DoNotPrint {
        display: none;
    }
    .ForPrint {
        display: flex;
        justify-content: space-between
    }
}

.show-product-name {
    display: none;
}

@media (max-width: 992px) {
    .show-product-name {
        display: block;
    }
}