/*
 * Your global styles here for Generic Portal
 */
 html,
 body {
     height: 100%;
 }
 
 html {
     background: white;
 }
 
 
 @font-face {
     font-family: "Poppins";
     src: url("/resource/epxPoppinsFonts/epxPoppinsFonts/Poppins-ExtraLight.ttf") format("truetype");
     font-weight: 200;
     font-style: normal;
     font-display: swap;
 }
 
 @font-face {
     font-family: "Poppins";
     src: url("/resource/epxPoppinsFonts/epxPoppinsFonts/Poppins-ExtraLightItalic.ttf") format("truetype");
     font-weight: 200;
     font-style: italic;
     font-display: swap;
 }
 
 @font-face {
     font-family: "Poppins";
     src: url("/resource/epxPoppinsFonts/epxPoppinsFonts/Poppins-Thin.ttf") format("truetype");
     font-weight: 100;
     font-style: normal;
     font-display: swap;
 }
 
 @font-face {
     font-family: "Poppins";
     src: url("/resource/epxPoppinsFonts/epxPoppinsFonts/Poppins-ThinItalic.ttf") format("truetype");
     font-weight: 100;
     font-style: italic;
     font-display: swap;
 }
 
 @font-face {
     font-family: "Poppins";
     src: url("/resource/epxPoppinsFonts/epxPoppinsFonts/Poppins-Regular.ttf") format("truetype");
     font-weight: 400;
     font-style: normal;
     font-display: swap;
 }
 
 @font-face {
     font-family: "Poppins";
     src: url("/resource/epxPoppinsFonts/epxPoppinsFonts/Poppins-Bold.ttf") format("truetype");
     font-weight: 700;
     font-style: normal;
     font-display: swap;
 }
 
 @font-face {
     font-family: "Poppins";
     src: url("/resource/epxPoppinsFonts/epxPoppinsFonts/Poppins-Italic.ttf") format("truetype");
     font-weight: 400;
     font-style: italic;
     font-display: swap;
 }
 
 @font-face {
     font-family: "Poppins";
     src: url("/resource/epxPoppinsFonts/epxPoppinsFonts/Poppins-BoldItalic.ttf") format("truetype");
     font-weight: 700;
     font-style: italic;
     font-display: swap;
 }
 
 @font-face {
     font-family: "Poppins";
     src: url("/resource/epxPoppinsFonts/epxPoppinsFonts/Poppins-Light.ttf") format("truetype");
     font-weight: 300;
     font-style: normal;
     font-display: swap;
 }
 
 @font-face {
     font-family: "Poppins";
     src: url("/resource/epxPoppinsFonts/epxPoppinsFonts/Poppins-LightItalic.ttf") format("truetype");
     font-weight: 300;
     font-style: italic;
     font-display: swap;
 }
 
 @font-face {
     font-family: "Poppins";
     src: url("/resource/epxPoppinsFonts/epxPoppinsFonts/Poppins-Medium.ttf") format("truetype");
     font-weight: 500;
     font-style: normal;
     font-display: swap;
 }
 
 @font-face {
     font-family: "Poppins";
     src: url("/resource/epxPoppinsFonts/epxPoppinsFonts/Poppins-MediumItalic.ttf") format("truetype");
     font-weight: 500;
     font-style: italic;
     font-display: swap;
 }
 
 @font-face {
     font-family: "Poppins";
     src: url("/resource/epxPoppinsFonts/epxPoppinsFonts/Poppins-SemiBold.ttf") format("truetype");
     font-weight: 600;
     font-style: normal;
     font-display: swap;
 }
 
 @font-face {
     font-family: "Poppins";
     src: url("/resource/epxPoppinsFonts/epxPoppinsFonts/Poppins-SemiBoldItalic.ttf") format("truetype");
     font-weight: 600;
     font-style: italic;
     font-display: swap;
 }
 
 @font-face {
     font-family: "Poppins";
     src: url("/resource/epxPoppinsFonts/epxPoppinsFonts/Poppins-ExtraBold.ttf") format("truetype");
     font-weight: 800;
     font-style: normal;
     font-display: swap;
 }
 
 @font-face {
     font-family: "Poppins";
     src: url("/resource/epxPoppinsFonts/epxPoppinsFonts/Poppins-ExtraBoldItalic.ttf") format("truetype");
     font-weight: 800;
     font-style: italic;
     font-display: swap;
 }
 
 @font-face {
     font-family: "Poppins";
     src: url("/resource/epxPoppinsFonts/epxPoppinsFonts/Poppins-Black.ttf") format("truetype");
     font-weight: 900;
     font-style: normal;
     font-display: swap;
 }
 
 @font-face {
     font-family: "Poppins";
     src: url("/resource/epxPoppinsFonts/epxPoppinsFonts/Poppins-BlackItalic.ttf") format("truetype");
     font-weight: 900;
     font-style: italic;
     font-display: swap;
 }
 
 
 /* css variables */
 :root {
     /* Fonts Variable */
     --Font-Family-Body: Poppins;
     --Font-Family-Headline: Poppins;
     --Font-Family-Title: Poppins;
     --Font-Family-Label: Poppins;
 
 
     /* colors for Generic Portal */
     --Primary-Puma_Green_Default: #8A5E34;
     --Primary-Puma_Green_Hover: #76512D;
     --Primary-Puma_Green_Selection: #644426;
 
     --Primary-Tonal-Colours-Green_Container_Default: #F1E5DA;
     --Primary-Tonal-Colours-Green_Container_Selection: #E5D1BD;
     --Primary-Tonal-Colours-Green_On_Container: #644426;
 
     --primary-Text-On-Active: #3F2B18;
 
 
     --Primary-Puma_Grey: #465363;
     --Tertiary-Puma_Grey_1: #F5F7FA;
     --Tertiary-Puma_Grey_2: #E4E9EE;
     --Tertiary-Puma_Grey_5: #697585;
 
     --Primary-Puma_Red_Default: #E32227;
     --Primary-Puma_Red_Selection: #99171A;
     --Primary-Puma_Red_Hover: #CF1F23;
     --Primary-Tonal-Colours-Red_Container_Default: #FCE4E6;
     --Primary-Tonal-Colours-Red_Container_Hover: #F2DBDD;
     --Primary-Tonal-Colours-Red_Container_Selection: #E8D2D4;
     --Primary-Tonal-Colours-Red_On_Container: #590E0F;
 
     --Secondary-Puma_Blue: #3976BF;
     --Secondary-Puma_Yellow: #FAA21B;
 
     --Alert-Color-Success: #00674F;
     --Alert-Color-Info-Text: #5199E0;
     --Alert-Color-Warning: #FF832B;
     --Alert-Color-Error: #B3261E;
 
 }

 * {
    font-family: var(--Font-Family-Body), sans-serif;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
    text-rendering: optimizeLegibility;
}


body {
    margin: 0;
    font-family: var(--Font-Family-Body), sans-serif;
}
 
 @media (max-width: 767px) {
     .mobile-hidden {
         display: none !important;
     }
 }
 
 @media (min-width: 768px) and (max-width: 1024px) {
     .mobile-visible {
         display: none !important;
     }
 
     .tab-hidden {
         display: none !important;
     }
 }
 
 @media (min-width: 1025px) {
     .mobile-visible {
         display: none !important;
     }
 
     .destop-hidden {
         display: none !important;
     }
 }
 
 .arrow-pointer {
     cursor: pointer;
 }