﻿@import url(fontiran.css);

html {
    position: relative;
    min-height: 100% !important;
    max-width: 100% !important;
    overflow-x: hidden !important;
    /*overflow-y: hidden !important;*/
}

body {
    margin-bottom: 300px;
}

.footer {
    position: absolute;
    bottom: 0;
    width: 100%;
}

.form-select {
    --bs-form-select-bg-img: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3e%3cpath fill='none' stroke='%237E8299' stroke-linecap='round' stroke-linejoin='round' stroke-width='2' d='m2 5 6 6 6-6'/%3e%3c/svg%3e");
    display: block;
    /*width: 100%;*/
    padding: 0.775rem 3rem 0.775rem 1rem;
    -moz-padding-start: calc(1rem - 3px);
    /*font-size: 1.1rem;
    font-weight: 500;*/
    line-height: 1.5;
    color: var(--bs-gray-700);
    background-color: var(--bs-body-bg);
    background-image: var(--bs-form-select-bg-img), var(--bs-form-select-bg-icon, none);
    background-repeat: no-repeat;
    background-position: right 1rem center;
    background-size: 16px 12px;
    border: 1px solid var(--bs-gray-300);
    border-radius: 0.475rem;
    box-shadow: false;
    transition: border-color 0.15s ease-in-out, box-shadow 0.15s ease-in-out;
    appearance: none;
    height: 250px;
}

.ui-datepicker {
    font-family: 'Rubik', serif !important;
    font-size: 14px !important;
}

    .ui-datepicker select.ui-datepicker-month, .ui-datepicker select.ui-datepicker-year {
        font-weight: normal;
        width: 45%;
        font-size: 14px !important;
    }

    .ui-datepicker th {
        padding: 0.7em 0.3em;
        text-align: center;
        font-weight: normal;
        border: 0;
        font-size: 14px !important;
    }

.select2 {
    font-family: 'Rubik', serif !important;
    font-size: 14px !important;
}

.select2-container {
    font-family: 'Rubik', serif !important;
    font-size: 14px !important;
}

.select2-selection__rendered {
    font-family: 'Rubik', serif !important;
    font-size: 14px !important;
}

.select2-results__option {
    font-family: 'Rubik', serif !important;
    font-size: 14px !important;
}

.select2-search__field {
    font-family: 'Rubik', serif !important;
    font-size: 14px !important;
}

.select2-container--bootstrap-5.select2-container--focus .select2-selection, .select2-container--bootstrap-5.select2-container--open .select2-selection {
    border-color: #e0e0e0 !important;
    box-shadow: none !important;
    align-content: center !important;
}

.select2-container--bootstrap-5 .select2-dropdown .select2-search .select2-search__field:focus {
    border-color: #e0e0e0 !important;
    box-shadow: none !important;
}

.select2-container--bootstrap-5 .select2-dropdown .select2-results__options .select2-results__option.select2-results__option--selected, .select2-container--bootstrap-5 .select2-dropdown .select2-results__options .select2-results__option[aria-selected=true]:not(.select2-results__option--highlighted) {
    background-color: #000000 !important;
    color: #ffffff;
}

.select2-container--bootstrap-5 .select2-dropdown {
    border-color: #e0e0e0 !important;
}

.select2-container--bootstrap-5 .select2-selection {
    min-height: calc(1.5em + .75rem + 8px) !important;
    align-content: center !important;
}

.rounded-circle {
    border-radius: 10% !important;
}

.circle-logo {
    height: 20px !important;
}

@media (min-width: 768px) {
    #desktop-section {
        display: block;
    }

    #mobile-section {
        display: none;
    }
}

@media (max-width: 767px) {
    #desktop-section {
        display: none;
    }

    #mobile-section {
        display: block;
    }

    .fill {
        min-width: -webkit-fill-available;
    }

    .fit {
        width: fit-content;
    }

    .text-end {
        font-size: 14px;
    }

    .long-text {
        font-size: 12px;
    }
}

select.form-select {
    width: 100%;
    height: 100%;
}

.custom-input .form-notch-middle {
    width: 150px !important;
}

.form-label.required::after {
    content: "*";
    color: red;
    margin-left: 5px;
}

#fixed-row {
    position: sticky;
    top: 0;
    background-color: #ffffff;
    z-index: 999;
}

.page-link.active, .active > .page-link {
    z-index: 3;
    color: var(--mdb-pagination-active-color);
    background-color: var(--mdb-border-color) !important;
    border-color: var(--mdb-pagination-active-border-color);
    color: black !important;
}

.max-height {
    height: 100% !important;
}

.nav-link {
    position: relative;
    padding-bottom: 5px;
    /*transition: color 0.3s;*/
    display: inline-block;
    margin: 0;
    text-align: center;
}

    .nav-link::after {
        content: '';
        position: absolute;
        bottom: 0;
        left: 0;
        right: 0;
        margin: auto;
        width: 100%;
        height: 5px;
        background-color: transparent;
        /*transition: background-color 0.3s;*/
    }

    .nav-link.active {
        font-weight: bold;
        color: #000;
    }

        .nav-link.active::after {
            background-color: #F07B61;
            width: calc(100% - 15px);
        }

        .nav-link.active:hover::after {
            background-color: #F07B61;
            width: calc(100% - 15px);
        }

    .nav-link:hover::after {
        background-color: #CCCCCC;
        width: calc(100% - 15px);
    }

.nav-buttons {
    margin-left: 20px;
}

.sign-out-link .btn-image {
    margin-right: 2px;
    vertical-align: middle;
}

.card-orders {
    height: 100% !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
}

/*.navbar-toggler-icon {
    background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 30 30'%3e%3cpath stroke='rgba(128, 128, 128, 0.75)' stroke-linecap='round' stroke-miterlimit='10' stroke-width='4' d='M4 10h22M4 20h22'/%3e%3c/svg%3e") !important;
}*/

.back-buttons {
    border-width: 1px !important;
    border-color: #000 !important;
}

.btn {
    text-transform: capitalize !important;
}

.nav-tabs .nav-link {
    text-transform: capitalize !important;
}

.local-text {
    font-family: IRANSansX !important;
    /*font-size: 16px !important;*/
}

.form-outline .form-control:disabled, .form-outline .form-control.disabled, .form-outline .form-control[readonly] {
    background-color: var(--mdb-divider-color) !important;
}

/* استایل پیام موفقیت */
/*#toast-container > .toast-success::before {
    content: "";
    display: inline-block;
    width: 24px;
    height: 24px;
    background-image: url("https://cdn.jsdelivr.net/npm/bootstrap-icons/icons/check-circle.svg");
    background-size: cover;
    background-repeat: no-repeat;
    margin-right: 10px;
}*/

/* استایل پیام خطا */
/*#toast-container > .toast-error::before {
    content: "";
    display: inline-block;
    width: 24px;
    height: 24px;
    background-image: url("https://cdn.jsdelivr.net/npm/bootstrap-icons/icons/x-circle.svg");
    background-size: cover;
    background-repeat: no-repeat;
    margin-right: 10px;
}*/

/* استایل پیام هشدار */
/*#toast-container > .toast-warning::before {
    content: "";
    display: inline-block;
    width: 24px;
    height: 24px;
    background-image: url("https://cdn.jsdelivr.net/npm/bootstrap-icons/icons/exclamation-triangle.svg");
    background-size: cover;
    background-repeat: no-repeat;
    margin-right: 10px;
}*/

/* استایل پیام اطلاعات */
/*#toast-container > .toast-info::before {
    content: "";
    display: inline-block;
    width: 24px;
    height: 24px;
    background-image: url("https://cdn.jsdelivr.net/npm/bootstrap-icons/icons/info-circle.svg");
    background-size: cover;
    background-repeat: no-repeat;
    margin-right: 10px;
}*/

@media (max-width: 768px) {
    .btn-image.con {
        display: none;
    }
    /*
    html {
        position: relative;
        min-height: 100% !important;
    }

    body {
        margin-bottom: 300px;
    }*/

    .footer {
        position: absolute;
        bottom: 0;
        width: 100%;
    }

        .footer .row, .footer-list-unstyled {
            flex-direction: column;
            text-align: left;
            padding: 0 6px !important;
        }

        .footer .col {
            margin-bottom: 5px;
            padding-left: 20px;
        }

    .navbar-brand {
        order: 2;
    }

    .navbar-toggler {
        order: 1;
    }

    .navbar-collapse {
        order: 3;
    }

    .nav-item-custom {
        color: #939598;
    }

    #footer-desc {
        font-size: 14px !important;
    }

    .nav-link {
        position: relative;
        /*padding-bottom: 5px;*/
        display: inline-block;
        text-align: center;
        margin: 0;
        font-size: 37px !important;
        line-height: 37px !important;
    }

        .nav-link::after {
            content: '';
            position: absolute;
            bottom: 0;
            left: 0;
            right: 0;
            margin: auto;
            width: 100%;
            height: 5px;
            background-color: transparent;
        }

        .nav-link.active {
            font-weight: normal;
            color: #ffffff !important;
        }

            .nav-link.active::after {
                background-color: transparent;
                width: calc(100% - 15px);
            }

            .nav-link.active:hover::after, .nav-link:hover::after {
                background-color: transparent !important;
            }

    .navbar-nav {
        flex-direction: column;
        align-items: stretch;
    }

        .navbar-nav .nav-item, .nav-buttons .btn {
            margin: 0 0 10px 0;
        }

    .nav-buttons {
        flex-direction: column;
        align-items: stretch;
        margin: 20px 0 0 20px;
    }

    .custom-offcanvas {
        background-color: #000 !important;
        color: #ffffff !important;
        width: 100% !important;
        height: 100% !important;
        display: flex;
        flex-direction: column;
        justify-content: center !important;
    }

        .custom-offcanvas.show {
            animation-name: slideIn;
        }

        .custom-offcanvas:not(.show) {
            animation-name: slideOut;
        }

        .custom-offcanvas .offcanvas-header {
            position: absolute;
            top: 10px;
        }

        .custom-offcanvas .offcanvas-body {
            display: flex;
            flex-direction: column;
            align-items: center;
            justify-content: center;
            padding: 0;
            height: 100%;
        }

        .custom-offcanvas .nav-link {
            color: #fff;
            font-size: 1.5rem;
            /*padding: 10px 0;*/
            text-align: center;
            width: 100%;
        }

            .custom-offcanvas .nav-link.active {
                text-decoration: underline !important;
                text-underline-offset: 10px !important;
                text-decoration-thickness: 1px !important;
                text-decoration-color: white !important;
            }

        .custom-offcanvas .btn-close {
            color: #ffffff !important;
            opacity: 1;
        }

        .custom-offcanvas .nav-buttons {
            margin-top: 20px;
            display: flex;
            flex-direction: column;
            align-items: center;
        }

    .btn-close:hover {
        background-color: #f8f9fa;
    }

    .btn-close-white {
        filter: invert(1);
    }

    .btn-image {
        width: 24px;
        height: 24px;
    }
}