/* 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: #128594FF;
    /* layout */
    --header-color: #031834;
    --footer-color: var(--primay-color);
    --asite-color: #0c0247;
    --main-color: #dfdede;
}

/* layout */
:root {
    --header-height: 50px;
    --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;
}

/* fot mobail */
@media screen and (max-width:750px) {
    .rootcontainer {
        width: 98%;
    }

    .gap-layout {
        padding: 0px;
    }

    :root {
        --header-height: 50px;
        --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;
    }

}

.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-y: auto !important;
}

.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);
}
.singnal{
    height: 10px;
    width: 10px;
    border-radius: 50%;
    background-color: rgb(224, 7, 244);
    display: inline-block;
    position: absolute;
    left: 0px;
    margin: auto;
    top: 0px;
    animation: count 0.3s infinite ;
}
@keyframes count {
    0%{
        transform: scale(0.8);
    }
    100%{
        transform: scale(1);
    }
}
.primary {
    background-color: var(--primay-color) !important;
}

@media screen and (max-width:750px) {
    .logoutlayot {
        margin-right: 0px;
    }
}