header#header-main {
    display: flex;
    width: 100%
}


.loginbg {
    background-image: linear-gradient(135deg, rgba(27, 29, 62, 0.46) 0%, rgba(27, 29, 62, 0.46) 14.286%, rgba(31, 33, 67, 0.46) 14.286%, rgba(31, 33, 67, 0.46) 28.572%, rgba(35, 37, 72, 0.46) 28.572%, rgba(35, 37, 72, 0.46) 42.858%, rgba(40, 42, 77, 0.46) 42.858%, rgba(40, 42, 77, 0.46) 57.144%, rgba(44, 46, 82, 0.46) 57.144%, rgba(44, 46, 82, 0.46) 71.43%, rgba(48, 50, 87, 0.46) 71.43%, rgba(48, 50, 87, 0.46) 85.716%, rgba(52, 54, 92, 0.46) 85.716%, rgba(52, 54, 92, 0.46) 100.002%), linear-gradient(45deg, rgb(27, 29, 62) 0%, rgb(27, 29, 62) 14.286%, rgb(31, 33, 67) 14.286%, rgb(31, 33, 67) 28.572%, rgb(35, 37, 72) 28.572%, rgb(35, 37, 72) 42.858%, rgb(40, 42, 77) 42.858%, rgb(40, 42, 77) 57.144%, rgb(44, 46, 82) 57.144%, rgb(44, 46, 82) 71.43%, rgb(48, 50, 87) 71.43%, rgb(48, 50, 87) 85.716%, rgb(52, 54, 92) 85.716%, rgb(52, 54, 92) 100.002%);
    color: #fdb807;
    box-shadow: 0 0.6rem 1rem #e3c578;
}
    .loginbg hr {
        height: 1px;
        width: 100%;
        background: linear-gradient(to right, rgba(253, 184, 7, 0), rgba(253, 184, 7, 0.3), rgba(253, 184, 7, 0.5), rgba(253, 184, 7, 0.3), rgba(253, 184, 7, 0));
        border: none;
        margin: 0;
        transition: background 0.4s ease; /* تغییر رنگ تدریجی */
    }

.lablebg {
    background-color: transparent;
}

header#header-main>ul {
    display: flex;
    justify-content: space-between;
    width: 100%;
    font-size: 1.25rem
}

header#header-main>ul>li {
    cursor: pointer
}

.input {
    display: flex;
    background-color: transparent;
    position: relative;
    justify-content: flex-start;
    align-items: center
}

.input>label {
    position: absolute;
    pointer-events: none;
    z-index: 10;
    margin: 0 18px;
    opacity: .75;
    padding: 0 6px;
    font-size: .875rem;

    transition: transform .15s, position .15s, color .15s;
    display: block
}

    .input > input {
        display: block;
        width: 100%;
        height: 48px;
        outline: none;
        background: transparent;
        border: none;
        z-index: 0;
        text-align: center;
        border-radius: 6px;
        border: 1px solid var(--input-border-active);
        caret-color: var(--text-color);
        color: rgba(var(--bs-light-rgb),var(--bs-text-opacity)) !important;
        transition: all .15s;
        font-size: .875rem;
        padding: 0 6px;
        direction: ltr
    }

        .input > input:hover {
            border-color: var(--input-border-active);
        }

.input>input:-webkit-autofill,
.input>input:-webkit-autofill:hover,
.input>input:-webkit-autofill:focus,
.input>input:-webkit-autofill:active,
.input>input:focus,
.input>input:valid {
    border-color: var(--input-border-active);
    box-shadow: inset 0 0 0 1px var(--input-border-active)
}

    .input > input:-webkit-autofill + label,
    .input > input:-webkit-autofill:hover + label,
    .input > input:-webkit-autofill:focus + label,
    .input > input:-webkit-autofill:active + label,
    .input > input:focus + label,
    .input > input:valid + label {
        color: var(--input-border-active);
        background-image: linear-gradient(135deg, rgba(27, 29, 62, 0.46) 0%, rgba(27, 29, 62, 0.46) 14.286%, rgba(31, 33, 67, 0.46) 14.286%, rgba(31, 33, 67, 0.46) 28.572%, rgba(35, 37, 72, 0.46) 28.572%, rgba(35, 37, 72, 0.46) 42.858%, rgba(40, 42, 77, 0.46) 42.858%, rgba(40, 42, 77, 0.46) 57.144%, rgba(44, 46, 82, 0.46) 57.144%, rgba(44, 46, 82, 0.46) 71.43%, rgba(48, 50, 87, 0.46) 71.43%, rgba(48, 50, 87, 0.46) 85.716%, rgba(52, 54, 92, 0.46) 85.716%, rgba(52, 54, 92, 0.46) 100.002%), linear-gradient(45deg, rgb(27, 29, 62) 0%, rgb(27, 29, 62) 14.286%, rgb(31, 33, 67) 14.286%, rgb(31, 33, 67) 28.572%, rgb(35, 37, 72) 28.572%, rgb(35, 37, 72) 42.858%, rgb(40, 42, 77) 42.858%, rgb(40, 42, 77) 57.144%, rgb(44, 46, 82) 57.144%, rgb(44, 46, 82) 71.43%, rgb(48, 50, 87) 71.43%, rgb(48, 50, 87) 85.716%, rgb(52, 54, 92) 85.716%, rgb(52, 54, 92) 100.002%);
        transform: translateY(-50%);
        top: 0;
        opacity: 1;
        display: block
    }
.inputValid {
    color: var(--input-border-active) !important;
    transform: translateY(-50%) !important;
    top: 0 !important;
    opacity: 1 !important;
    display: block !important;
}
.input.invalid>input {
    border-color: var(--input-border-invalid) !important;
    box-shadow: inset 0 0 0 1px var(--input-border-invalid) !important
}

.input.invalid>label {
    color: var(--input-border-invalid) !important
}

.input>select {
    display: block;
    width: 100%;
    height: 48px;
    outline: none;
    background: transparent;
    border: none;
    z-index: 0;
    text-align: center;
    border-radius: 6px;
    border: 1px solid var(--input-border);
    caret-color: var(--text-color);
    color: var(--text-color);
    transition: all .15s;
    font-size: .875rem;
    padding: 0 6px;
    direction: ltr
}

.input>select:hover {
    border-color: var(--input-border-hover)
}

.input>select:focus+label,
.input>select:valid+label {
    transform: translateY(-50%);
    top: 0;
    opacity: 1;
    display: block
}

.input.picked>select:focus,
.input.picked>select:valid {
    border-color: var(--input-border-active);
    box-shadow: inset 0 0 0 1px var(--input-border-active)
}

.input.picked>select:focus+label,
.input.picked>select:valid+label {
    color: var(--input-border-active)
}

.input.invalid>select {
    border-color: var(--input-border-invalid) !important;
    box-shadow: inset 0 0 0 1px var(--input-border-invalid) !important
}

#container-form-verify>div>ul {
    display: grid;
    grid-gap: 12px
}

#container-form-verify>div>ul>li {
    display: flex;
    align-items: center;
    justify-content: flex-start;
    gap: 12px;
    padding: 12px;
    transition: background-color .15s;
    border-radius: 6px
}

#container-form-verify>div>ul>li:not(.disabled) {
    cursor: pointer
}

#container-form-verify>div>ul>li:not(.disabled):hover {
    background-color: var(--bg-secondary)
}

#container-form-verify>div>ul>li.disabled {
    opacity: .625;
    cursor: not-allowed;
    pointer-events: none
}

#container-form-verify>div>ul>li>i {
    font-size: 1.25rem
}

#container-form-verify>div>ul>li>span {
    font-size: .925rem
}

#container-form-banned>div>i {
    font-size: 5rem;
    opacity: .625;
    padding-bottom: 24px
}

#container-form-banned>div>strong {
    text-align: center;
    font-size: 1rem
}

#container-form-banned>div>p {
    text-align: justify;
    font-size: .925rem
}

#container-form-permission>div {
    gap: 12px;
    width: 100%
}

#container-form-permission>div>ul#list-images {
    display: flex;
    align-items: center;
    justify-content: center;
    pointer-events: none;
    padding-bottom: 12px;
    gap: 24px
}

#container-form-permission>div>ul#list-images>li.image {
    display: flex;
    aspect-ratio: 1/1;
    width: 30%;
    max-width: 128px;
    overflow: hidden;
    border-radius: 12px;
    padding: 0;
    margin: 0;
    box-shadow: var(--shadow-profile);
    border: 5px solid var(--bg);
    background: var(--blue-gradient)
}

#container-form-permission>div>ul#list-images>li.image>img {
    width: 100%
}

#container-form-permission>div>ul#list-images>li.image:first-child {
    z-index: 10
}

#container-form-permission>div>ul#list-images>li.image:last-of-type {
    z-index: 0
}

#container-form-permission>div>ul#list-images>li.separator {
    display: flex;
    align-items: center;
    justify-content: center;
    opacity: .425
}

#container-form-permission>div>ul#list-images>li.separator>i {
    font-size: 2rem
}

#container-form-permission>div>strong {
    display: block;
    width: 100%;
    text-align: start;
    line-height: 1.5
}

#container-form-permission>div>p {
    display: block;
    width: 100%;
    text-align: start
}

#container-form-permission>div>ul#list-permissions {
    display: grid;
    padding-top: 12px
}

#container-form-permission>div>ul#list-permissions>li {
    display: flex;
    align-items: center;
    width: 100%;
    justify-content: flex-start;
    transition: background-color .15s;
    padding: 12px;
    gap: 8px
}

#container-form-permission>div>ul#list-permissions>li:not(:last-of-type) {
    border-bottom: 2px solid var(--bg-secondary)
}

#container-form-permission>div>ul#list-permissions>li:hover {
    background-color: var(--bg-secondary)
}

#container-form-permission>div>ul#list-permissions>li>span {
    font-size: .925rem
}

#container-404 {
    width: 1024px;
    max-width: 90%;
    display: grid;
    grid-gap: 32px
}

#container-404>div {
    display: flex;
    justify-content: center;
    flex-direction: column;
    align-items: center;
    gap: 24px
}

#container-404>div>i {
    opacity: .625;
    font-size: 5rem
}

#container-404>div>h1 {
    font-size: 1.425rem
}

#container-404>div>p {
    font-size: 1rem
}

#container-terms {
    width: 1024px;
    max-width: 90%;
    display: grid;
    grid-gap: 32px
}

#container-terms>div {
    display: flex;
    flex-direction: column;
    height: 70vh;
    overflow: hidden;
    justify-content: flex-start;
    align-items: flex-start
}

#container-terms>div>h1 {
    font-size: 1.325rem;
    padding-bottom: 24px;
    text-align: center;
    width: 100%
}

#container-terms>div>ul {
    width: 100%;
    display: flex;
    justify-content: flex-start;
    align-items: center;
    gap: 12px;
    padding: 12px 12px 0
}

#container-terms>div>ul>li {
    background: var(--blue-gradient);
    overflow: hidden;
    border-top-right-radius: 8px;
    border-top-left-radius: 8px;
    box-shadow: var(--shadow-card)
}

#container-terms>div>ul>li>a {
    display: block;
    color: #fff;
    padding: 6px 12px;
    font-weight: 700;
    font-size: .925rem;
    white-space: nowrap
}

#container-terms>div>ul>li.active {
    background: var(--yellow-gradient)
}

#container-terms>div>ul>li.active>a {
    color: var(--blue)
}

#container-terms>div>div {
    width: 100%;
    flex-grow: 1;
    overflow: hidden;
    background-color: var(--bg-card);
    border-radius: 8px;
    box-shadow: var(--shadow-card);
    border: 2px solid var(--hr)
}

#container-terms>div>div>div {
    display: flex;
    width: 100%;
    height: 100%;
    overflow-y: scroll;
    padding: 24px;
    flex-direction: column;
    gap: 12px
}

#container-terms>div>div>div>h2 {
    font-size: 1.25rem
}

#container-terms>div>div>div>h3 {
    font-size: 1rem
}

#container-terms>div>div>div>p {
    font-size: .925rem;
    line-height: 2.5
}

#container-terms>div>div>div>ul {
    display: flex;
    flex-direction: column;
    gap: 12px
}

#container-terms>div>div>div>ul>li {
    font-size: .925rem;
    line-height: 2.5
}

:root {
    --ltr: ltr;
    --rtl: rtl;
    --bg: #f5f7fa;
    --text-color: #353535;
    --color: #353535;
    --scrollbar: #a9a9a9;
    --shimmer-static-bg: #B0B0B0;
    --toast-bg: black;
    --toast-color: white;
    --selection: #FFD54F;
    --blue-gradient: linear-gradient(135deg, #102631, #304050);
    --blue: #102631;
    --yellow-gradient: transparent linear-gradient(135deg, #FCB404, #FFD54F) 0 0 no-repeat padding-box;
    --yellow: #FCB404;
    --bg-card: #ffffff;
    --shadow-card: 0 4px 5px 0 rgba(170, 179, 217, .175);
    --hr: rgba(0, 0, 0, .125);
    --bg-secondary: rgba(0, 0, 0, .125);
    --input-border: rgba(0, 0, 0, .125);
    --input-border-hover: rgba(0, 0, 0, .25);
    --input-border-active: #FCB404;
    --input-border-invalid: #F44336;
    --shadow-profile: 0 2px 2px 2px rgba(128, 128, 128, .25)
}

body.dark {
    --bg: #152025;
    --text-color: #f0f0f0;
    --color: #f0f0f0;
    --shimmer-static-bg: #656565;
    --toast-bg: white;
    --toast-color: black;
    --scrollbar: #455055;
    --bg-card: #353740;
    --shadow-card: 0 4px 5px 0 rgba(75, 66, 28, .125);
    --hr: rgba(255, 255, 255, .125);
    --bg-secondary: rgba(255, 255, 255, .125);
    --input-border: rgba(255, 255, 255, .125);
    --input-border-hover: rgba(255, 255, 255, .25)
}

body.ltr {
    direction: ltr;
    --ltr: rtl;
    --rtl: ltr
}

@font-face {
    font-family: DevelopixAuthIRANYekanXWeb;
    src: url(/assets/fonts/IRANYekanXWeb/woff2/IRANYekanX-Regular.woff2);
    font-weight: 400;
    font-display: swap
}

@font-face {
    font-family: DevelopixAuthIRANYekanXWeb;
    src: url(/assets/fonts/IRANYekanXWeb/woff2/IRANYekanX-Bold.woff2);
    font-weight: 700;
    font-display: swap
}

@font-face {
    font-family: DevelopixAuthIconFonts;
    src: url(/assets/fonts/IconFont/icomoon.eot?6ioq8g);
    src: url(/assets/fonts/IconFont/icomoon.eot?6ioq8g#iefix) format("embedded-opentype"), url(/assets/fonts/IconFont/icomoon.ttf?6ioq8g) format("truetype"), url(/assets/fonts/IconFont/icomoon.woff?6ioq8g) format("woff"), url(/assets/fonts/IconFont/icomoon.svg?6ioq8g#icomoon) format("svg");
    font-weight: 400;
    font-style: normal;
    font-display: block
}

[class^=icon-],
[class*=" icon-"] {
    font-family: DevelopixAuthIconFonts !important;
    speak: never;
    font-style: normal;
    font-weight: 400;
    font-variant: normal;
    text-transform: none;
    line-height: 1;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale
}

.icon-transfer:before {
    content: ""
}

.icon-arrows:before {
    content: ""
}

.icon-iran .path1:before {
    content: "";
    color: #f0f0f0
}

.icon-iran .path2:before {
    content: "";
    margin-left: -1em;
    color: #d80027
}

.icon-iran .path3:before {
    content: "";
    margin-left: -1em;
    color: #6da544
}

.icon-iran .path4:before {
    content: "";
    margin-left: -1em;
    color: #d80027
}

.icon-uk .path1:before {
    content: "";
    color: #f0f0f0
}

.icon-uk .path2:before {
    content: "";
    margin-left: -1em;
    color: #0052b4
}

.icon-uk .path3:before {
    content: "";
    margin-left: -1em;
    color: #0052b4
}

.icon-uk .path4:before {
    content: "";
    margin-left: -1em;
    color: #0052b4
}

.icon-uk .path5:before {
    content: "";
    margin-left: -1em;
    color: #0052b4
}

.icon-uk .path6:before {
    content: "";
    margin-left: -1em;
    color: #0052b4
}

.icon-uk .path7:before {
    content: "";
    margin-left: -1em;
    color: #0052b4
}

.icon-uk .path8:before {
    content: "";
    margin-left: -1em;
    color: #0052b4
}

.icon-uk .path9:before {
    content: "";
    margin-left: -1em;
    color: #0052b4
}

.icon-uk .path10:before {
    content: "";
    margin-left: -1em;
    color: #d80027
}

.icon-uk .path11:before {
    content: "";
    margin-left: -1em;
    color: #d80027
}

.icon-uk .path12:before {
    content: "";
    margin-left: -1em;
    color: #d80027
}

.icon-uk .path13:before {
    content: "";
    margin-left: -1em;
    color: #d80027
}

.icon-uk .path14:before {
    content: "";
    margin-left: -1em;
    color: #d80027
}

.icon-DP:before {
    content: ""
}

.icon-moon:before {
    content: ""
}

.icon-sun:before {
    content: ""
}

.icon-alert-octagon:before {
    content: ""
}

.icon-aperture:before {
    content: ""
}

.icon-briefcase:before {
    content: ""
}

.icon-edit:before {
    content: ""
}

.icon-life-buoy:before {
    content: ""
}

.icon-lock:before {
    content: ""
}

.icon-mail:before {
    content: ""
}

.icon-map-pin:before {
    content: ""
}

.icon-send:before {
    content: ""
}

.icon-shield:before {
    content: ""
}

.icon-tablet:before {
    content: ""
}

.icon-user:before {
    content: ""
}

.icon-user-check:before {
    content: ""
}

.icon-user-plus:before {
    content: ""
}

.icon-user-x:before {
    content: ""
}

*,
*:before,
*:after {
    box-sizing: border-box;
    padding: 0;
    margin: 0;
    outline: none;
    -webkit-tap-highlight-color: rgba(0, 0, 0, 0);
    -webkit-tap-highlight-color: transparent
}

html {
    font-size: 17px;
    scroll-behavior: smooth
}

html,
body {
    overflow-x: hidden !important;
    width: 100vw !important;
    max-width: 100vw !important
}

body {
    font-family: DevelopixAuthIRANYekanXWeb, Arial, Helvetica, sans-serif;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
    direction: rtl;
    line-height: 2;
    color: var(--text-color);
    min-height: 100vh;
    background: var(--bg);
    display: flex;
    align-items: center;
    justify-content: center
}

#app {
    max-width: 92%;
    margin: 0 auto;
    padding: 24px 0
}

#app>div {
    margin: 0 auto
}

::selection {
    background: var(--selection);
    color: var(--blue)
}

::-webkit-scrollbar {
    width: 10px
}

::-webkit-scrollbar-track {
    -webkit-box-shadow: inset 0 0 6px rgba(0, 0, 0, .3);
    -moz-box-shadow: inset 0 0 6px rgba(0, 0, 0, .3);
    box-shadow: inset 0 0 6px #0000004d
}

::-webkit-scrollbar-thumb {
    background-color: var(--scrollbar);
    outline: none;
    border-radius: 1000px;
    overflow: hidden
}

a {
    color: var(--text-color);
    text-decoration: none
}

ul {
    list-style: none
}

label {
    cursor: pointer;
    user-select: none;
    font-size: .925rem
}




section.form {
    display: flex;
    flex-direction: column;
    width: 100%;
    gap: 24px;
    padding: 24px 0 12px
}

section.form>div.half {
    display: grid;
    grid-template-columns: 1fr 1fr;
    grid-gap: 24px
}

section.form>div.third {
    display: grid;
    grid-template-columns: 1fr 1fr 1fr;
    grid-gap: 24px
}

section.form .note {
    font-size: .825rem;
    text-align: justify;
    line-height: 2.5;
    padding: 0
}


input:-webkit-autofill,
input:-webkit-autofill:hover,
input:-webkit-autofill:focus,
input:-webkit-autofill:active {
    -webkit-box-shadow: 0 0 0 30px var(--bg-card) inset !important;
    -webkit-text-fill-color: var(--text-color) !important
}

input::-webkit-outer-spin-button,
input::-webkit-inner-spin-button {
    -webkit-appearance: none;
    margin: 0
}

input[type=number] {
    -moz-appearance: textfield
}