.w-100 {
    width: 100%;
}

.bg-white {
    background: white;
}

.border {
    border: 1px solid #888;
    border-radius: 10px
}
.flex {
    display: flex;
}

.flex-column {
    display: flex;
    flex-direction: column;
}

.flex-screen {
    display: flex;
    width: 100%;
    min-height: 100svh;
}

.flex-center {
    display: flex;
    align-items: center;
    justify-content: center;
}

.flex-align-center {
    display: flex;
    align-items: center;
}

.flex-justify-center {
    display: flex;
    justify-content: center;
}

.flex-1 {
    flex: 1;
}

.flex-2 {
    flex: 2;
}

.flex-3 {
    flex: 3;
}
.font-bold {
    font-weight: bold;
}

.font-xs {
    font-size: 0.8rem;
}

.font-sm {
    font-size: 0.9rem;
}

.font-lg {
    font-size: 1.1rem;
}

.font-xl {
    font-size: 1.2rem;
}

.font-xxl {
    font-size: 1.4rem;
}

.font-xxxl {
    font-size: 1.6rem;
}

.m-0 {
    margin: 0;
}

.mt-10 {
    margin-top: 10px;
}

.mt-20 {
    margin-top: 20px;
}

.p-10 {
    padding: 10px;
}

.p-20 {
    padding: 20px;
}

.p-30 {
    padding: 30px;
}

.px-10 {
    padding-left: 10px;
    padding-right: 10px;
}

.px-20 {
    padding-left: 20px;
    padding-right: 20px;
}

.ps-10 {
    padding-inline-start: 10px;
}

.ps-20 {
    padding-inline-start: 20px;
}

.pt-20 {
    padding-top: 20px;
}

.pb-20 {
    padding-bottom: 20px;
}

.gap-5 {
    gap: 5px;
}

.gap-10 {
    gap: 10px;
}

.gap-15 {
    gap: 15px;
}

.gap-20 {
    gap: 20px;
}

.gap-25 {
    gap: 25px;
}
.position-static {
    position: static;
}

.position-relative {
    position: relative;
}

.position-absolute {
    position: absolute;
}

.position-fixed {
    position: fixed;
}

.position-sticky {
    position: sticky;
}
@media (max-width: 1000px) {
    .none-mobile {
        display: none;
    }
}
* {
    padding: 0;
    margin: 0;
    box-sizing: border-box;
    font-family: var(--default-fontfamily);
}
img {
    max-width: 100%;
    height: auto;
}
:root {
    --background-color: #fff;
    --text-color: #000;
    --default-fontfamily: vazirmatn, sans-serif;
}
/* Colors */
:root {
    --primary-color: #2196F3;
    --secondary-color: #333;
    --success-color: #4CAF50;
    --danger-color: #f44336;
    --warning-color: #ff9800;
    --info-color: #00BCD4;
}
/*Switch*/
:root {
    /*--checkbox-switch-radius: 0;*/
    /*    --checkbox-switch-radius: 100px;
    --checkbox-switch-color: var(--primary-color);*/
    --sidebar-width: 300px;
}

html {
    overflow: hidden;
}

body {
    overflow: auto;
    height: 100svh;
}

:root {
    --background-color: #ffffff;
    --default-fontfamily: vazirmatn;
    --side-background: linear-gradient(rgb(30, 41, 59) 0%, rgb(15, 23, 42) 100%);
    --nav-background: #f2f2f2;
    --nav-color: #326291;
    --nav-font-size: 1.2em;
    --nav-font-weight: 500;
    --nav-border-bottom: 1px solid #ccc;
    --nav-background-hover: #d3dde7;
    --nav-color-hover: #1874cd;
    --nav-font-size-hover: var(--nav-font-size);
    --nav-font-weight-hover: var(--nav-font-weight);
}

* {
    font-family: var(--default-fontfamily), sans-serif;
}

:root {
    --secondary-color: #333;
    --accent-color: #333;
    --text-color: #000000;
    --warning-color: #ffc107;
    --critical-color: #dc3545;
}
/* colors */
:root {
    --color-primary-bg: #0078D4;
    --color-primary-bg-disabled: #464646;
    --color-primary-bg-busy: #c75300;
    --color-primary-bg-hover: #005ea3;
    --color-primary-bg-active: #004071;
    --color-primary-text: #fff;
    --color-primary-text-disabled: #fff;
    --color-primary-text-busy: #fff;
    --color-primary-text-hover: #fff;
    --color-primary-text-active: #fff;
}

:root {
    --color-secondary-bg: #909090;
    --color-secondary-bg-disabled: #464646;
    --color-secondary-bg-busy: #c75300;
    --color-secondary-bg-hover: #767676;
    --color-secondary-bg-active: #6d6d6d;
    --color-secondary-text: #fff;
    --color-secondary-text-disabled: #fff;
    --color-secondary-text-busy: #fff;
    --color-secondary-text-hover: #fff;
    --color-secondary-text-active: #fff;
}

:root {
    --color-warning-bg: #ffc107;
    --color-warning-bg-disabled: #464646;
    --color-warning-bg-busy: #c75300;
    --color-warning-bg-hover: #dda80a;
    --color-warning-bg-active: #b08607;
    --color-warning-text: #000;
    --color-warning-text-disabled: #000;
    --color-warning-text-busy: #000;
    --color-warning-text-hover: #000;
    --color-warning-text-active: #000;
}

:root {
    --color-critical-bg: #dc3545;
    --color-critical-bg-disabled: #464646;
    --color-critical-bg-busy: #c75300;
    --color-critical-bg-hover: #c1303e;
    --color-critical-bg-active: #ad2d39;
    --color-critical-text: #fff;
    --color-critical-text-disabled: #fff;
    --color-critical-text-busy: #fff;
    --color-critical-text-hover: #fff;
    --color-critical-text-active: #fff;
}

:root {
    --color-success-bg: #dc3545;
    --color-success-bg-disabled: #464646;
    --color-success-bg-busy: #c75300;
    --color-success-bg-hover: #c1303e;
    --color-success-bg-active: #ad2d39;
    --color-success-text: #fff;
    --color-success-text-disabled: #fff;
    --color-success-text-busy: #fff;
    --color-success-text-hover: #fff;
    --color-success-text-active: #fff;
}