/*@import '/Global-style/style-utils.scss';
@import '/Global-style/font-styles.scss';*/
@import '/_content/MarMazJob.UI/Global-style/Mud/mud-theme-override.css';


html,
body {
    height: 100%;
}

html {
    /* Custom scrollbar styles */
    &::-webkit-scrollbar {
        width: auto; /* Width of the scrollbar */
    }

    &::-webkit-scrollbar-track {
        background: var(--Third-Primary-Color); /* Background of the scrollbar track */
        box-shadow: var(--Scroll-Shadow);
        border-radius: 0.2vw;
        border: 1px solid var(--Secondry-Color);
    }

    &::-webkit-scrollbar-thumb {
        background: var( --Fourth-Color ); /* Default color of the scrollbar thumb */
        box-shadow: var(--Scroll-Shadow);
        border-radius: 0.2vw;
        cursor: pointer;
    }


}


/*
// //vw viewports
// $Vw-viewport: 1920px !default;

// //vh viewports
// $Vh-viewport: 1080px !default;*/

body {
    margin: 0;
    font-family: Roboto, "Helvetica Neue", sans-serif;
}

:root {
    --vw-viewport: 1920;
    --vh-viewport: 1080;
    /*  //------------Primary-Colors------------*/
    --Primary-Color: #45296A;
    --Secondry-Color: #662279;
    --Third-Color: #ffffff;
    --Fourth-Color: #30367a;
    --Fifth-Color: #202020;
    --Sixs-Color: #f9f9f9;
    --Seventh-Color: #E4DAF1;
    --Eight-Color: #F1EDF8;
    --Nine-Color: #fefefe;
    --Ten-Color: #646464;
    --Eleven-Color: #30367A66;
    --Tweleve-Color: #F5F5F5;
    --Therteen-Color: #f3f3f39e;
    /*  //-----------Border-Colors--------------*/
    --Primary-Table-lines-border-color: #30367A80; /* #30367a 50% opacity*/
    --Dash-Settings-card-border-color: #30367A66; /* #30367a 40% opacity*/
    /*  //-----------Back-Grounds---------------*/
    --Intro-BackGround-Color: linear-gradient(180deg, rgba(0, 0, 0, 0.2) 0%, rgba(102, 102, 102, 0.2) 100%);
    --SideNav-BackGround-Color: linear-gradient(180deg, #662279 0%, #0D323D 100%);
    --Light-mode-BackGround-Color: #ffffff;
    --Dark-mode-BackGround-Color: #020617;
    /*  //------------linear Colors------------*/

    --First-Linear-Color: linear-gradient(180deg, #642279 0%, #30367a 100%);
    --Second-Linear-Color: linear-gradient(90deg, #662279 6.54%, #30367a 91.18%);
    --Third-Linear-Color: linear-gradient(90deg, #30367a 0%, #662279 100%);
    --Fourth-Linear-Color: linear-gradient(90deg, #4f518a 0%, #662279 100%);
    /*  //Error Colors*/
    --Primary-error-color: #CC1414;
    /*  //----------Box-Shadows------------------*/
    --Primary-Shadow: 6px 10px 13px -1px #00000040;
    --Secondry-Shadow: 4px 4px 18px -4px #00000040;
    /* 4px 4px 18px -4px #00000040;*/ /**/
    --Third-Shadow: 2px 2px 10px 0px #00000040;
    --Fourth-Shadow: 0px 0px 3.53px 0px #00000040;
    --Fifth-Shadow: -2px 0px 13px 12px #00000040;
    --Sixs-Shadow: 2px 4px 4px -1px #00000040;
    --Seventh-Shadow: 2px 2px 8px -3px #00000040;
    --Eight-Shadow: 2px 2px 4px 0px #00000040;
    --Nine-Shadow: 1px 1px 4px 0px #00000040;
    --Ten-Shadow: 0px 2px 4px 0px #00000040;
    --Eleven-Shadow: 4px 4px 10px 0px #00000040;
    --Twelve-Shadow: 4px 4px 8px -3px #00000040;
    --Thirteen-Shadow: 4px 4px 10px -2px #00000040;
    --Fourteen-Shadow: 2px 2px 8px 0px #00000040;
    --Fifteen-Shadow: 3px 3px 10px 0px #00000040;
    --Sixteen-Shadow: 4px 4px 8px 3px #00000040;
    --Seventeen-Shadow: 4px 4px 8px 2px #00000040;

    &:dir(rtl) {
        --Twelve-Shadow: 4px 4px 8px 3px #00000040;
    }
}


/*---------------Shared Component Styles*/
form {
    width: 100%;
    height: 100%;
}

.mud-svg-icon {
    &:dir(rtl) {
        transform: scaleX(-1);
    }
}

h1, h2, h3, h4, h5, h6, span, p {
    outline: none;
}



/*Shared Component Styles*/
/*.app-empty-filters-state {
    display: block;
    width: 100%;
    text-align: center;
    font-size: var(--Fifth-font-size);
    color: var(--Primary-Color);
    line-height: var(--Fifth-line-height);
}*/



/* =========================================================
   Shared application layout primitives
   ========================================================= */

.app-list-page {
    position: relative;
    padding: 3.486% 3.759% 6.536% 6.536%;
}
.app-list-page:dir(rtl) {
    padding: 3.486% 6.536% 6.536% 3.759%;
}

.app-list-content {
    display: flex;
    flex-direction: column;
    gap: calc((24 / var(--vw-viewport)) * 100vw);
}

.app-upsert-page {
    display: flex;
    flex-direction: column;
    padding: 2.724% 7.408%;
    gap: calc((50 / var(--vw-viewport)) * 100vw);
}

.app-active-filters {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: calc((10 / var(--vw-viewport)) * 100vw);
}

.app-table-actions {
    --custom-button-width: calc((40 / var(--vw-viewport)) * 100vw);
    --custom-button-height: calc((40 / var(--vw-viewport)) * 100vw);
}


.app-empty-filters-state {
    display: block;
    width: 100%;
    text-align: center;
    font-size: var(--Fifth-font-size);
    line-height: var(--Fifth-line-height);
    color: var(--Primary-Color);
}


.app-form-actions {
    display: grid;
    grid-template-columns: repeat(2, calc((132 / var(--vw-viewport)) * 100vw));
    gap: calc((20 / var(--vw-viewport)) * 100vw);
    height: calc((46 / var(--vw-viewport)) * 100vw);
}


.app-loading-container {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 100%;
    height: 100%;
}

    .app-loading-container > span {
        width: calc((50 / var(--vw-viewport)) * 100vw);
        height: calc((50 / var(--vw-viewport)) * 100vw);
    }



.info-section {
    & .info-list {
        & .info-item {
            /*width: 87%;*/

            & .mud-tooltip-root {
                & .value {
                    display: block;
                    width: 75%;
                }
            }
        }
    }
}









@media only screen and (max-width: 1350px) {
    :root {
        --vw-viewport: 1194;
        --vh-viewport: 1080;
    }
}

@media only screen and (max-width: 750px) {
    :root {
        --vw-viewport: 390;
        --vh-viewport: 1080;
    }
}