:root {
    --color-main: #024A94;
    --color-main-transparent: rgba(2, 74, 148, 0.15);
    --color-sub: #28A49A;
    --color-blue: #3a9cff;
    --color-orange: #FFB700;
    --color-red: #CC0000;
    --color-green: green;
    --color-gray: #DDD;
    --border-radius: 15px;
}


@font-face {
    font-family: 'font-main';
    src: url('font/vazir-regular-fd.woff') format('woff');
}

*{
    box-sizing:border-box;
}


html {
  font-size: 14px;
}

@media (min-width: 768px) {
  html {
    font-size: 16px;
  }
}
 

html {
  position: relative;
  min-height: 100%;
}

body {
    font-family: 'font-main'; 
    direction:rtl;
    margin: 0px;
    padding: 0px;
}


img 
{
    max-width:100%;
}

a{
    text-decoration:none;
    color:#1d1d1d;
}

.center{
    text-align:center !important;
}

.left {
    text-align: left !important;
}


header
{
    box-shadow:0px 0px 10px #ddd;
    margin-bottom:30px;
    padding:10px 0px;
}
    header .top-page
    {
        display:flex;
    }

        header .top-page .top-page-logo {
            width: 100px;
        }

        header .top-page .top-page-text {
            margin-right: 10px;
            flex-grow: 1;
        }

    header .menu-box
    {

    }

        header .menu-box ul {
            list-style: none; /* حذف بولت */
            padding: 0;
            margin: 0;
            display: flex; /* افقی کردن */
            gap: 20px; /* فاصله بین آیتم‌ها */
        }


        header .menu-box a {
            color: #888 !important;
            display: block;
            padding: 2px 12px;
            text-decoration:none;
        }
        header .menu-box a:hover {
            background-color: #f4f4f4;
            border-radius: 4px;
        }


    header .menu-logo,
    header .menu-box-bg,
    header .menu-icon,
    header .menu-footer {
        display: none;
    }

        @media (max-width:760px)
        {
            header .menu-logo,
            header .menu-icon,
            header .menu-footer {
                display: block;
            }

            header .menu-icon
            {
                padding-right:10px;
            }

                header .menu-box-bg {
                    background-color: rgba(0,0,0,0.5);
                    position: fixed;
                    top: 0px;
                    right: 0px;
                    bottom: 0px;
                    left: 0px;
                    z-index: 550;
                }
            header .menu-box {
                background-color: #fff;
                position: fixed;
                top: 0px;
                right: 0px;
                bottom: 0px;
                z-index: 555;
                width: 70%;
                padding:20px;
                transform:translateX(100%);
                transition-duration:0.5s;
                
            }

                header .menu-box ul {
                    list-style: square; /* حذف بولت */
                    padding: 0px;
                    margin: 10px;
                    display: unset; /* افقی کردن */
                    gap: 30px; /* فاصله بین آیتم‌ها */
                }
        }


footer
{
    margin-top:30px;
    background-color:var(--color-sub);
    background-color:#f4f4f4;
    padding:20px 0px;
    color:#fff;
    color:var(--color-sub);
    border-top:5px solid var(--color-sub);
    text-align:center;
    line-height:200%;
}


.panel
{
    display:flex;
}

.panel-top-mobile
{
    display:none;
}

.panel-menu {
    width: 300px;
    background: linear-gradient( to bottom left, #024A94 0%, #1A63B0 100% );
    margin: 20px;
    padding: 20px;
    border-radius: var(--border-radius);
    color:#fff;
}

    .panel-menu .menu-box
    {
        margin:20px 0px;
        line-height:175%;
        overflow:auto;
    }

    .panel-menu a {
        color: #fff;
    }




.panel-main {
    background-color: #fff;
    margin: 20px;
    margin-right: 0px;
    padding: 20px;
    border-radius:var(--border-radius);
    min-height:calc(100vh - 40px);
    width: 100%;
}

.panel-menu-bg
{
    display:none;
}

@media (max-width:700px) {
    .panel {
        display: flex;
        flex-direction: column;
    }

    .panel-top-mobile {
        display: block;
        border-radius: var(--border-radius);
        background-color: #fff;
        margin: 20px;
        padding: 10px;
        color: var(--color-main);
        display: flex;
        align-items: center;
    }

        .panel-top-mobile .fa-solid {
            padding: 10px;
            font-size: 1.5rem;
        }


    .panel-menu {
        position: fixed;
        top: 0px;
        bottom: 0px;
        right: 0px;
        transform: translateX(110%);
        transition-duration: 0.5s;
        z-index: 1000;
        max-width:75%;
    }

    .panel-menu-bg {
        background-color: rgba(0,0,0,0.25);
        position: fixed;
        top: 0px;
        bottom: 0px;
        right: 0px;
        left: 0px;
        transform: translateX(-100%);
        transition-duration: 0.5s;
        z-index: 999;
        text-align: left;
        padding: 30px;
        display: block;
    }
    .panel-menu-bg .fa-close{
        color:#fff;
        font-size:1.5rem;
        border:2px solid #fff;
        display:inline-block;
        width:40px;
        height:40px;
        line-height:38px;
        text-align:center;
        border-radius:50%;
    }
    .panel-main {
        margin: 20px !important;
        margin-top: 0px !important;
        min-height: calc(100vh - 130px);
        height: calc(100vh - 130px);
        overflow: auto;
        width:unset;
    }
}










.box,
.default-box {
    border: 1px solid #ddd;
    padding: 10px;
    padding-top:0px;
    border-radius: var(--border-radius);
    margin-top:20px;
}

    .default-box
    {
        height: calc(100% - 30px);
        margin-bottom:30px;
    }

        .box .caption,
        .default-box .caption {
            font-size: 1.2rem;
            color: #1d1d1d;
            background-color: #fff;
            display: inline-block;
            white-space: nowrap;
            transform: translate(-5px, -17px);
            padding: 0px 15px;
            text-shadow: 0px 0px 10px #999;
        }


.text
{
    line-height:200%;
    text-align:justify;
}

.text h1
{
    font-size:1.5rem;
    font-weight:bold;
    color:var(--color-main);
    margin-bottom:10px;
}










.auth-main {
    background-color: red;
    position: fixed;
    top: 0px;
    left: 0px;
    right: 0px;
    bottom: 0px;
    display: flex;
    align-items: center;
    justify-content: center;
    background: linear-gradient(rgba(0,0,0,0.5), rgba(0,0,0,0.5)), url('/../static/img/auth-bg.jpg');
    background-size: cover;
    background-position: center center;
}


.auth-main .auth-box{
    background-color:#fff;
    padding:10px;
    border-radius:var(--border-radius);
    max-width:500px;
    width:90%;
}


.message-box-error,
.message-box-ok {
    background-color: #ffcccc; /* قرمز روشن برای بک‌گراند */
    color: #cc0000; /* قرمز برای متن */
    padding: 10px 15px; /* فاصله داخلی */
    border: 1px solid #cc0000; /* حاشیه قرمز */
    border-radius: var(--border-radius); /* گوشه‌های گرد */
    font-weight: bold; /* متن پررنگ */
}


hr {
    background-color: var(--color-green) !important;
    width: 80% !important;
    margin-left: auto;
    margin-right: auto;
}


h3{
    font-size:0.9rem;
    font-weight:bold;
    margin:10px;
    padding:0px;
    display:inline-block;
    min-width:150px;
}

    h3:before {
        content: "";
        color:var(--color-main);
    }
    h3:after {
        content: " : ";
    }




.service-item {
    background-color: #F7F7F7;
    width: 100%;
    padding-top: 75%; /* 1:1 Aspect Ratio */
    position: relative; /* If you want text inside of it */
    border-radius: var(--border-radius);
    border: 1px solid #ddd;
    margin-bottom: 20px;
    display: inline-block;
    color: #1d1d1d;
}


    .service-item:hover {
        background-color: #eee;
        color: var(--color-main);
    }

    /* If you want text inside of the container */
    .service-item h2 {
        position: absolute;
        top: 0;
        left: 0;
        bottom: 0;
        right: 0;
        display: flex;
        justify-content: center;
        align-items: center;
        text-align: center;
        font-size: 1.25rem;
    }




.btn-box
{
    text-align:center;
    margin-top:10px;
}


input[type=button],
input[type=submit] {
    padding: 10px 20px;
    background-color: var(--color-main);
    border-radius:var(--border-radius);
    color:#fff;
    border:none;
}

input[type=button]:hover,
input[type=submit]:hover {
    background-color: var(--color-main-transparent);
    color:var(--color-main);
}

input[type=text] {
    width: 100%;
    outline: none;
    border: 1px solid var(--color-gray);
    border-radius: var(--border-radius);
    padding: 5px 10px;
}



.tbl {
    width: 100%;
}

    .tbl a {
        color: #fff;
        text-decoration: none;
        background-color: var(--color-blue);
        font-size: 0.9rem;
        padding: 5px 10px;
        border-radius: var(--border-radius-input);
    }

    .tbl thead tr td {
        border-bottom: 2px solid var(--color-blue);
        color: var(--color-blue);
        font-weight: bold;
        padding-right: 10px;
        border-collapse: separate;
        border-spacing: 30px;
        text-align: center;
    }

    .tbl tbody tr td {
        padding: 5px;
        font-size:0.9rem;
        text-align:center;
    }

    .tbl tbody tr:nth-child(2n+1) td {
        background-color: #fafafa;
    }
    .tbl tbody tr:nth-child(2n) td {
        background-color: #f7f7f7;
    }

    .tbl tbody tr:hover td {
        background-color: rgba(255, 255, 0, 0.2);
    }

@media (max-width: 768px) {
    .tbl thead {
        display: none;
    }

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

        .tbl tr {
            margin-bottom: 15px;
            padding: 0px;
        }

        .tbl tbody tr td:first-child {
            border-top-left-radius: var(--border-radius);
            border-top-right-radius: var(--border-radius);
        }

        .tbl tbody tr td:last-child {
            border-bottom-left-radius: var(--border-radius);
            border-bottom-right-radius: var(--border-radius);
        }



        .tbl td {
            text-align: right !important;
            padding-left: 50%;
            position: relative;
        }

         /*   .tbl td::before {
                content: attr(data-title) ": ";
                margin-left: 5px;
                font-weight: bold;
            }*/

            .tbl td[data-title]:not([data-title=""])::before {
                content: attr(data-title) ": ";
                font-weight: bold;
            }
}