/*                              VVV
Viewport units:	1vw	2vw	3vw	4vw	5vw
Viewport size	font-size in pixels
400px	        4px	8px	12px	16px	20px
500px	        5px	10px	15px	20px	25px
600px	        6px	12px	18px	24px	30px
700px	        7px	14px	21px	28px	35px
800px	        8px	16px	24px	32px	40px
900px	        9px	18px	27px	36px	45px
1000px	        10px	20px	30px	40px	50px
1100px	        11px	22px	33px	44px	55px
1200px	        12px	24px	36px	48px	60px
1300px	        13px	26px	39px	52px	65px
1400px	        14px	28px	40px	56px	70px
*/

/* body get overridden by baseline.css: font-size .875rem, Roboto
   max(20px, 1hw) > 1920 screen <p> 20px; < 600 screen <p> 16px
   min(max(34px, 5vw),44px) or vh 
*/

html, body {
  width: 100%;
  height: 100%;
  font-size: 14px;
  line-height: 1.5;
  font-family: Poppins, Helvetica, Arial, sans-serif;
}

/* * * * * * * * * * * * * * GENERAL STYLES * * * * * * * * * * * * * * */

a {
    color: #9c27b0;   /* 'secondary' To enforce link colors within recall's own HTML description/contact text */
}

/* * * * * * * * * * * * * * APP SPECIFIC STYLES  * * * * * * * * * * * */

/* Following hilites the background color for 
   HTML5 input field failing native validations
   ie. <input type='email'/>           
       - Here as long as the entry is not of type email, the bg will be displayed
       <input required type='xxxx' />  
       - Here as long no entry is provided the bg will be displayed
.MuiInputBase-input:invalid {
  background-color: #f5ebeb;
}
*/

/* Following is used for AutocompleteTagger widget.
   The Chip inside the widget requires larger line height 
   to prevent chopping off Capital letters
*/
.MuiChip-root {
  line-height: 16px;
}

/* Following is used for AutocompleteTagger widget.
   The whole widget is given a top margin.
   The widget label gets clipped when displayed in the LNCH 
   form if it's the 1st widget in the form.
*/
.MuiAutocomplete-root {
  margin-top: 16px;
}

/* Following is used for adding margin to Reset or Submit button.
   However, the margin will also be added to other basic widgets
*/
.ki-item-basic {
  margin-right: 8px;
}

/* * * * * * * * * * * * * * FONTS  * * * * * * * * * * * * * * * * * * */

/*
 Abril Fatface
 Albra-Font-Family
 bauhaus-93
 Inter-3.18
 Josefin Sans      - It's a variable font
 Neue
 Orbitron          - It's a variable font
 Philosopher
 Poppins           - Needs css
 Roboto

 See: 10_ViteSites.org: section on 'DOC  Fonts'
*/


/* Abril Fatface
   Gets listed as: Abril Fatface—Network resource(8 glyphs)
 */

/*
@font-face {
  font-family: 'Abril Fatface';
  src: url('/fonts/AbrilFatface/AbrilFatface-Regular.ttf') format('woff2');
  font-weight: 400;
  font-style: normal;
  font-display: swap;
}
*/


/* Albra-Font-Family
   Gets listed as: Albra Text—Network resource(8 glyphs)
 */


@font-face {
  font-family: 'Albra';
  src: url('/fonts/Albra-Font-Family/Albra Light.otf') format('woff2');
  font-weight: 100;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: 'Albra';
  src: url('/fonts/Albra-Font-Family/Albra Regular.otf') format('woff2');
  font-weight: 300;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: 'Albra';
  src: url('/fonts/Albra-Font-Family/Albra Medium.otf') format('woff2');
  font-weight: 500;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: 'Albra';
  src: url('/fonts/Albra-Font-Family/Albra Semi.otf') format('woff2');
  font-weight: 600;
  font-style: 'semi';
  font-display: swap;
}
@font-face {
  font-family: 'Albra';
  src: url('/fonts/Albra-Font-Family/Albra Bold.otf') format('woff2');
  font-weight: 700;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: 'Albra';
  src: url('/fonts/Albra-Font-Family/Albra Black.otf') format('woff2');
  font-style: 'black';
  font-weight: 700;
  font-display: swap;
}
@font-face {
  font-family: 'Albra';
  src: url('/fonts/Albra-Font-Family/Albra Text Black.otf') format('woff2');
  font-weight: 700;
  font-style: 'blacktext';
  font-display: swap;
}



/* bauhaus-93
   Gets listed as: Bauhaus 93—Network resource(8 glyphs)
 */

/*
@font-face {
  font-family: 'Bauhaus';
  font-style: normal;
  font-weight: 100;
  font-display: swap;
  src: url('/fonts/bauhaus-93/Bauhaus 93 Regular.ttf') format('woff2');
}
@font-face {
  font-family: 'Bauhaus';
  font-style: normal;
  font-weight: 800;
  font-display: swap;
  src: url('/fonts/bauhaus-93/BAUHS93.ttf') format('woff2');
}
*/


/*  Inter font 
 *   Downloaded from github: https://github.com/rsms/inter/ (similar to https://tsh.io/how-we-deliver/ )
 *   The following css is copied from the Inter's own inter.css file found in the zip file
 *  
 *   Gets listed as: Inter—Network resource(8 glyphs)
 */

/*
@font-face {
  font-family: 'Inter';
  font-style: normal;
  font-weight: 100;
  font-display: swap;
  src: url('/fonts/Inter/Inter Web/Inter-Thin.woff2?v=3.18') format('woff2'),
    url('/fonts/Inter/Inter Web/Inter-Thin.woff?v=3.18') format('woff');
}
@font-face {
  font-family: 'Inter';
  font-style: italic;
  font-weight: 100;
  font-display: swap;
  src: url('/fonts/Inter/Inter Web/Inter-ThinItalic.woff2?v=3.18') format('woff2'),
    url('/fonts/Inter/Inter Web/Inter-ThinItalic.woff?v=3.18') format('woff');
}

@font-face {
  font-family: 'Inter';
  font-style: normal;
  font-weight: 200;
  font-display: swap;
  src: url('/fonts/Inter/Inter Web/Inter-ExtraLight.woff2?v=3.18') format('woff2'),
    url('/fonts/Inter/Inter Web/Inter-ExtraLight.woff?v=3.18') format('woff');
}
@font-face {
  font-family: 'Inter';
  font-style: italic;
  font-weight: 200;
  font-display: swap;
  src: url('/fonts/Inter/Inter Web/Inter-ExtraLightItalic.woff2?v=3.18') format('woff2'),
    url('/fonts/Inter/Inter Web/Inter-ExtraLightItalic.woff?v=3.18') format('woff');
}

@font-face {
  font-family: 'Inter';
  font-style: normal;
  font-weight: 300;
  font-display: swap;
  src: url('/fonts/Inter/Inter Web/Inter-Light.woff2?v=3.18') format('woff2'),
    url('/fonts/Inter/Inter Web/Inter-Light.woff?v=3.18') format('woff');
}
@font-face {
  font-family: 'Inter';
  font-style: italic;
  font-weight: 300;
  font-display: swap;
  src: url('/fonts/Inter/Inter Web/Inter-LightItalic.woff2?v=3.18') format('woff2'),
    url('/fonts/Inter/Inter Web/Inter-LightItalic.woff?v=3.18') format('woff');
}

@font-face {
  font-family: 'Inter';
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url('/fonts/Inter/Inter Web/Inter-Regular.woff2?v=3.18') format('woff2'),
    url('/fonts/Inter/Inter Web/Inter-Regular.woff?v=3.18') format('woff');
}
@font-face {
  font-family: 'Inter';
  font-style: italic;
  font-weight: 400;
  font-display: swap;
  src: url('/fonts/Inter/Inter Web/Inter-Italic.woff2?v=3.18') format('woff2'),
    url('/fonts/Inter/Inter Web/Inter-Italic.woff?v=3.18') format('woff');
}

@font-face {
  font-family: 'Inter';
  font-style: normal;
  font-weight: 500;
  font-display: swap;
  src: url('/fonts/Inter/Inter Web/Inter-Medium.woff2?v=3.18') format('woff2'),
    url('/fonts/Inter/Inter Web/Inter-Medium.woff?v=3.18') format('woff');
}
@font-face {
  font-family: 'Inter';
  font-style: italic;
  font-weight: 500;
  font-display: swap;
  src: url('/fonts/Inter/Inter Web/Inter-MediumItalic.woff2?v=3.18') format('woff2'),
    url('/fonts/Inter/Inter Web/Inter-MediumItalic.woff?v=3.18') format('woff');
}

@font-face {
  font-family: 'Inter';
  font-style: normal;
  font-weight: 600;
  font-display: swap;
  src: url('/fonts/Inter/Inter Web/Inter-SemiBold.woff2?v=3.18') format('woff2'),
    url('/fonts/Inter/Inter Web/Inter-SemiBold.woff?v=3.18') format('woff');
}
@font-face {
  font-family: 'Inter';
  font-style: italic;
  font-weight: 600;
  font-display: swap;
  src: url('/fonts/Inter/Inter Web/Inter-SemiBoldItalic.woff2?v=3.18') format('woff2'),
    url('/fonts/Inter/Inter Web/Inter-SemiBoldItalic.woff?v=3.18') format('woff');
}

@font-face {
  font-family: 'Inter';
  font-style: normal;
  font-weight: 700;
  font-display: swap;
  src: url('/fonts/Inter/Inter Web/Inter-Bold.woff2?v=3.18') format('woff2'),
    url('/fonts/Inter/Inter Web/Inter-Bold.woff?v=3.18') format('woff');
}
@font-face {
  font-family: 'Inter';
  font-style: italic;
  font-weight: 700;
  font-display: swap;
  src: url('/fonts/Inter/Inter Web/Inter-BoldItalic.woff2?v=3.18') format('woff2'),
    url('/fonts/Inter/Inter Web/Inter-BoldItalic.woff?v=3.18') format('woff');
}

@font-face {
  font-family: 'Inter';
  font-style: normal;
  font-weight: 800;
  font-display: swap;
  src: url('/fonts/Inter/Inter Web/Inter-ExtraBold.woff2?v=3.18') format('woff2'),
    url('/fonts/Inter/Inter Web/Inter-ExtraBold.woff?v=3.18') format('woff');
}
@font-face {
  font-family: 'Inter';
  font-style: italic;
  font-weight: 800;
  font-display: swap;
  src: url('/fonts/Inter/Inter Web/Inter-ExtraBoldItalic.woff2?v=3.18') format('woff2'),
    url('/fonts/Inter/Inter Web/Inter-ExtraBoldItalic.woff?v=3.18') format('woff');
}

@font-face {
  font-family: 'Inter';
  font-style: normal;
  font-weight: 900;
  font-display: swap;
  src: url('/fonts/Inter/Inter Web/Inter-Black.woff2?v=3.18') format('woff2'),
    url('/fonts/Inter/Inter Web/Inter-Black.woff?v=3.18') format('woff');
}
@font-face {
  font-family: 'Inter';
  font-style: italic;
  font-weight: 900;
  font-display: swap;
  src: url('/fonts/Inter/Inter Web/Inter-BlackItalic.woff2?v=3.18') format('woff2'),
    url('/fonts/Inter/Inter Web/Inter-BlackItalic.woff?v=3.18') format('woff');
}
*/


/* Josefin Sans
   Gets listed as: Josefin Sans Thin—Network resource(8 glyphs)
 */

/*
@font-face {
  font-family: 'Josefin Sans';
  src: url('/fonts/JosefinSans/JosefinSans-VariableFont_wght.ttf') format('woff2');
  font-weight: 400;
  font-style: normal;
  font-display: swap;
}

@font-face {
  font-family: 'Josefin Sans';
  src: url('/fonts/JosefinSans/JosefinSans-Italic-VariableFont_wght.ttf') format('woff2');
  font-weight: 400;
  font-style: Italic;
  font-display: swap;
}
*/


/* Neue
   Gets listed as: Neue Metana Network resource(8 glyphs)
 */

/*
@font-face {
  font-family: 'Neue';
  src: url('/fonts/Neue/NeueMetana-Regular.otf') format('woff2');
  font-weight: 400;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: 'Neue';
  src: url('/fonts/Neue/NeueMetana-Bold.otf') format('woff2');
  font-weight: 700;
  font-style: normal;
  font-display: swap;
}
*/

/* Orbitron
  Following are available: 
  static/Orbitron-Regular.ttf
  static/Orbitron-Medium.ttf
  static/Orbitron-SemiBold.ttf
  static/Orbitron-Bold.ttf
  static/Orbitron-ExtraBold.ttf
  static/Orbitron-Black.ttf

  But we're usinig the variable fonts
  Gets listed as: Orbitron—Network resource(8 glyphs)
 */


@font-face {
  font-family: 'Orbitron';
  src: url('/fonts/Orbitron/Orbitron-VariableFont_wght.ttf') format('woff2');
  font-weight: 400;
  font-style: normal;
  font-display: swap;
}



/* Philosopher
   Gets lsited as: Philosopher
 */

/*
@font-face {
  font-family: 'Philosopher';
  src: url('/fonts/Philosopher/Philosopher-BoldItalic.ttf') format('woff2');
  font-weight: 700;
  font-style: italic;

  font-display: fallback;
}
@font-face {
  font-family: 'Philosopher';
  src: url('/fonts/Philosopher/Philosopher-Bold.ttf') format('woff2');
  font-weight: 700;
  font-style: normal;

  font-display: fallback;
}
@font-face {
  font-family: 'Philosopher';
  src: url('/fonts/Philosopher/Philosopher-Italic.ttf') format('woff2');
  font-weight: 400;
  font-style: italic;

  font-display: fallback;
}
@font-face {
  font-family: 'Philosopher';
  src: url(/fonts/Philosopher/Philosopher-Regular.ttf) format('woff2');

  font-weight: 400;
  font-style: normal;

  font-display: fallback;
}
*/


/* Poppins
   Following are available:
Poppins-BlackItalic.ttf
Poppins-Black.ttf
Poppins-BoldItalic.ttf
Poppins-Bold.ttf
Poppins-ExtraBoldItalic.ttf
Poppins-ExtraBold.ttf
Poppins-ExtraLightItalic.ttf
Poppins-ExtraLight.ttf
Poppins-Italic.ttf
Poppins-LightItalic.ttf
Poppins-Light.ttf
Poppins-MediumItalic.ttf
Poppins-Medium.ttf
Poppins-Regular.ttf
Poppins-SemiBoldItalic.ttf
Poppins-SemiBold.ttf
Poppins-ThinItalic.ttf
Poppins-Thin.ttf

https://fonts.google.com/specimen/Poppins
Also, supports indian scripts: hindi 

  Gets listed as: Poppins—Network resource(8 glyphs)
 */


@font-face {
  font-family: "Poppins";
  src: local("Poppins-Regular"), local("Poppins-Regular"),
    url("/fonts/Poppins/Poppins-Regular.ttf") format("truetype"),
    url("/fonts/Poppins/Poppins-Regular.woff") format("woff");
  font-weight: normal;
  font-style: normal;
}

@font-face {
  font-family: "Poppins";
  src: local("Poppins-Bold"), local("Poppins-Bold"),
    url("/fonts/Poppins/Poppins-Bold.ttf") format("truetype"),
    url("/fonts/Poppins/Poppins-Bold.woff") format("woff");
  font-weight: bold;
  font-style: normal;
}

@font-face {
  font-family: "Poppins";
  src: local("Poppins-Black"), local("Poppins-Black"),
    url("/fonts/Poppins/Poppins-Black.ttf") format("truetype"),
    url("/fonts/Poppins/Poppins-Black.woff") format("woff");
  font-weight: 900;
  font-style: normal;
}

@font-face {
  font-family: "Poppins";
  src: local("Poppins-SemiBold"), local("Poppins-SemiBold"),
    url("/fonts/Poppins/Poppins-SemiBold.ttf") format("truetype"),
    url("/fonts/Poppins/Poppins-SemiBold.woff") format("woff");
  font-weight: 600;
  font-style: normal;
}

@font-face {
  font-family: "Poppins";
  src: local("Poppins-ExtraBold"), local("Poppins-ExtraBold"),
    url("/fonts/Poppins/Poppins-ExtraBold.ttf") format("truetype"),
    url("/fonts/Poppins/Poppins-ExtraBold.woff") format("woff");
  font-weight: 800;
  font-style: normal;
}

@font-face {
  font-family: "Poppins";
  src: local("Poppins-Light"), local("Poppins-Light"),
    url("/fonts/Poppins/Poppins-Light.ttf") format("truetype"),
    url("/fonts/Poppins/Poppins-Light.woff") format("woff");
  font-weight: 300;
  font-style: normal;
}

@font-face {
  font-family: "Poppins";
  src: local("Poppins-Medium"), local("Poppins-Medium"),
    url("/fonts/Poppins/Poppins-Medium.ttf") format("truetype"),
    url("/fonts/Poppins/Poppins-Medium.woff") format("woff");
  font-weight: 500;
  font-style: normal;
}

@font-face {
  font-family: "Poppins";
  src: local("Poppins-ExtraLight"), local("Poppins-ExtraLight"),
    url("/fonts/Poppins/Poppins-ExtraLight.ttf") format("truetype"),
    url("/fonts/Poppins/Poppins-ExtraLight.woff") format("woff");
  font-weight: 200;
  font-style: normal;
}

@font-face {
  font-family: "Poppins";
  src: local("Poppins-Thin"), local("Poppins-Thin"),
    url("/fonts/Poppins/Poppins-Thin.ttf") format("truetype"),
    url("/fonts/Poppins/Poppins-Thin.woff") format("woff");
  font-weight: 100;
  font-style: normal;
}

@font-face {
  font-family: "Poppins";
  src: local("Poppins-Italic"), local("Poppins-Italic"),
    url("/fonts/Poppins/Poppins-Italic.ttf") format("truetype"),
    url("/fonts/Poppins/Poppins-Italic.woff") format("woff");
  font-weight: normal;
  font-style: italic;
}

@font-face {
  font-family: "Poppins";
  src: local("Poppins-MediumItalic"), local("Poppins-MediumItalic"),
    url("/fonts/Poppins/Poppins-MediumItalic.ttf") format("truetype"),
    url("/fonts/Poppins/Poppins-MediumItalic.woff") format("woff");
  font-weight: 500;
  font-style: italic;
}

@font-face {
  font-family: "Poppins";
  src: local("Poppins-SemiBoldItalic"), local("Poppins-SemiBoldItalic"),
    url("/fonts/Poppins/Poppins-SemiBoldItalic.ttf") format("truetype"),
    url("/fonts/Poppins/Poppins-SemiBoldItalic.woff") format("woff");
  font-weight: 600;
  font-style: italic;
}

@font-face {
  font-family: "Poppins";
  src: local("Poppins-BoldItalic"), local("Poppins-BoldItalic"),
    url("/fonts/Poppins/Poppins-BoldItalic.ttf") format("truetype"),
    url("/fonts/Poppins/Poppins-BoldItalic.woff") format("woff");
  font-weight: bold;
  font-style: italic;
}

@font-face {
  font-family: "Poppins";
  src: local("Poppins-ExtraBoldItalic"), local("Poppins-ExtraBoldItalic"),
    url("/fonts/Poppins/Poppins-ExtraBoldItalic.ttf") format("truetype"),
    url("/fonts/Poppins/Poppins-ExtraBoldItalic.woff") format("woff");
  font-weight: 800;
  font-style: italic;
}

@font-face {
  font-family: "Poppins";
  src: local("Poppins-LightItalic"), local("Poppins-LightItalic"),
    url("/fonts/Poppins/Poppins-LightItalic.ttf") format("truetype"),
    url("/fonts/Poppins/Poppins-LightItalic.woff") format("woff");
  font-weight: 300;
  font-style: italic;
}

@font-face {
  font-family: "Poppins";
  src: local("Poppins-ExtraLightItalic"), local("Poppins-ExtraLightItalic"),
    url("/fonts/Poppins/Poppins-ExtraLightItalic.ttf") format("truetype"),
    url("/fonts/Poppins/Poppins-ExtraLightItalic.woff") format("woff");
  font-weight: 200;
  font-style: italic;
}

@font-face {
  font-family: "Poppins";
  src: local("Poppins-ThinItalic"), local("Poppins-ThinItalic"),
    url("/fonts/Poppins/Poppins-ThinItalic.ttf") format("truetype"),
    url("/fonts/Poppins/Poppins-ThinItalic.woff") format("woff");
  font-weight: 100;
  font-style: italic;
}

@font-face {
  font-family: "Poppins";
  src: local("Poppins-BlackItalic"), local("Poppins-BlackItalic"),
    url("/fonts/Poppins/Poppins-BlackItalic.ttf") format("truetype"),
    url("/fonts/Poppins/Poppins-BlackItalic.woff") format("woff");
  font-weight: 900;
  font-style: italic;
}


/*
 *   Roboto font 
 *   Downloaded from google
 */

/*
@font-face {
  font-family: 'Roboto';
  font-style: normal;
  font-weight: 100;
  font-display: swap;
  src: url('/fonts/Roboto/Roboto-Thin.ttf') format('woff2');
}
@font-face {
  font-family: 'Roboto';
  font-style: italic;
  font-weight: 100;
  font-display: swap;
  src: url('/fonts/Roboto/Roboto-ThinItalic.ttf') format('woff2');
}

@font-face {
  font-family: 'Roboto';
  font-style: normal;
  font-weight: 300;
  font-display: swap;
  src: url('/fonts/Roboto/Roboto-Light.ttf') format('woff2');
}
@font-face {
  font-family: 'Roboto';
  font-style: italic;
  font-weight: 300;
  font-display: swap;
  src: url('/fonts/Roboto/Roboto-LightItalic.ttf') format('woff2');
}

@font-face {
  font-family: 'Roboto';
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url('/fonts/Roboto/Roboto-Regular.ttf') format('woff2');
}
@font-face {
  font-family: 'Roboto';
  font-style: italic;
  font-weight: 400;
  font-display: swap;
  src: url('/fonts/Roboto/Roboto-Italic.ttf') format('woff2');
}

@font-face {
  font-family: 'Roboto';
  font-style: normal;
  font-weight: 500;
  font-display: swap;
  src: url('/fonts/Roboto/Roboto-Medium.ttf') format('woff2');
}
@font-face {
  font-family: 'Roboto';
  font-style: italic;
  font-weight: 500;
  font-display: swap;
  src: url('/fonts/Roboto/Roboto-MediumItalic.ttf') format('woff2');
}

@font-face {
  font-family: 'Roboto';
  font-style: normal;
  font-weight: 700;
  font-display: swap;
  src: url('/fonts/Roboto/Roboto-Bold.ttf') format('woff2');
}
@font-face {
  font-family: 'Roboto';
  font-style: italic;
  font-weight: 700;
  font-display: swap;
  src: url('/fonts/Roboto/Roboto-BoldItalic.ttf') format('woff2');
}

@font-face {
  font-family: 'Roboto';
  font-style: normal;
  font-weight: 900;
  font-display: swap;
  src: url('/fonts/Roboto/Roboto-Black.ttf') format('woff2');
}
@font-face {
  font-family: 'Roboto';
  font-style: italic;
  font-weight: 900;
  font-display: swap;
  src: url('/fonts/Roboto/Roboto-BlackItalic.ttf') format('woff2');
}

*/