/*@import '/Global-style/style-utils.scss';
@import '/Global-style/font-styles.scss';*/
@import '/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;
    /*    --Primary-Color: #0B605A;
    --Secondry-Color: #19BFB7;
    --Third-Color: #ffffff;
    --Fourth-Color: #0D323D;
    --Fifth-Color: #202020;
    --Sixs-Color: #f9f9f9;
    --Seventh-Color: #E4DAF1;
    --Eight-Color: #F1EDF8;
    --Nine-Color: #fefefe;
    --Ten-Color: #646464;
    --Eleven-Color: #0D323D66;
    --Tweleve-Color: #F5F5F5;*/
    /*  //-----------Error-Colors---------------*/

    --Primary-error-color: #CC1414;
    /*  //-----------Border-Colors--------------*/

    --Primary-Table-lines-border-color: #30367A80; /* #30367a 50% opacity*/
    --Dash-Settings-card-border-color: #30367A66; /* #30367a 40% opacity*/
    /*--Primary-Table-lines-border-color: #0D323D80;*/ /* #0D323D 50% opacity*/
    /*--Dash-Settings-card-border-color: #0D323D66;*/ /* #0D323D 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%);
    /*    --First-Linear-Color: linear-gradient(180deg, #642279 0%, #0D323D 100%);
    --Second-Linear-Color: linear-gradient(90deg, #0D323D 6.54%, #19BFB7 91.18%);
    --Third-Linear-Color: linear-gradient(90deg, #0D323D 0%, #662279 100%);
    --Fourth-Linear-Color: linear-gradient(90deg, #4f518a 0%, #662279 100%);*/
    /*  //Error Colors*/

    --Primary-error-color: #ff0000;
    /*  //----------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;



/*    --Third-Shadow: 2px 2px 10px 0px #00000040;
    --Fourth-Shadow: 3px 3px 8px -3px #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;
}


@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;
        }
    }