/* for desktop */
/* color */
* {
    padding: 0;
    margin: 0;
    overflow: hidden;
}

a {
    text-decoration: none;
}

body {
    overflow: hidden;
    font-family: 'Franklin Gothic Medium', 'Arial Narrow', Arial, sans-serif, serif;
    font-weight: 600;
    font-style: normal;
}

.rootcontainer {
    width: 60%;
    margin: auto;
    min-width: 400px;
}

.page {
    height: 100%;
    width: 100%;
    overflow-y: auto !important;
}

:root {
    --primay-color: #042420;
    /* layout */
    --header-color: #031834;
    --footer-color: var(--primay-color);
    --asite-color: #0c0247;
    --main-color: #dfdede;
}

/* layout */
:root {
    --header-height: 80px;
    --asite-width: 230px;
    --asite-width-top: var(--header-height);
    --asite-width-section: var(--asite-width);
    --asite-display: block;
    --main-left: var(--asite-width);
    --footer-height: 0px;
    --footer-width-display: none;
}

.gap-layout {
    padding: 5px;
}

body{
    background-color: var(--primay-color) !important;
}
/* fot mobail */
@media screen and (max-width:750px) {
    .rootcontainer {
        width: 88%;
    }

    .gap-layout {
        padding: 0px;
    }

    :root {
        --header-height: 80px;
        --asite-width: 100%;
        --asite-width-top: 0;
        --asite-width-section: 200px;
        --main-left: 0;
        --footer-height: 50px;
        --footer-width-display: block;
        --asite-display: none;
        --header-color: var(--primay-color);

    }

    .show {
        display: inline-block !important;
    }

}

.bg-img {
    background-attachment: fixed;
    background-position: 100vh 100vw;
    height: 100vh;
}

.layoutContaienr {
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
}

.layoutContaienr header {
    height: var(--header-height);
    background: var(--header-color);
    position: fixed;
    left: 0;
    right: 0;
    top: 0;
    z-index: 2;
}

.layoutContaienr aside {
    display: var(--asite-display);
    position: fixed;
    left: 0;
    top: var(--asite-width-top);
    z-index: 3;
    width: var(--asite-width);
    background-color: rgba(16, 16, 16, 0.477);
    bottom: 0;
    transition: cubic-bezier(0.075, 0.82, 0.165, 1);
}

.layoutContaienr>aside>section {
    position: fixed;
    left: 0;
    top: var(--asite-width-top);
    z-index: 5;
    width: var(--asite-width-section);
    background-color: var(--asite-color);
    bottom: 0;
    overflow: hidden;
    overflow-x: auto;
}

.layoutContaienr main {
    position: fixed;
    left: var(--main-left);
    right: 0;
    top: var(--header-height);
    bottom: var(--footer-height);
    background-color: var(--main-color);
    overflow-y: auto;
}

.layoutContaienr footer {
    height: var(--footer-height);
    background-color: rgb(18, 151, 252);
    position: fixed;
    left: var(--main-left);
    right: 0;
    bottom: 0;
    z-index: 2;

}

.header-fast {
    width: var(--asite-width);
    height: var(--header-height);
}

.header-2d {
    width: calc(100% - var(--asite-width));
    height: var(--header-height);
}

/* outher design */
.toastposition {
    position: fixed;
    z-index: 22222;
    top: 0;
    right: 0;
}

/* other design */
.logoutlayot {
    margin-right: var(--asite-width-section);
}

.primary {
    background-color: var(--primay-color) !important;
}

@media screen and (max-width:750px) {
    .logoutlayot {
        margin-right: 0px;
    }
}
.loading-anim{
    background-color: #16161643 !important;
    animation: anim 1s infinite linear;
}
@keyframes anim {
    0%{
        opacity: 0.5;
    }
    100%{
        opacity: 1;
    }
}