@import url('https://fonts.googleapis.com/css?family=Mukta:300|Roboto+Mono:100,200,300,400,500,600,700,800,900|Permanent+Marker|Lato|Rubik|Roboto|Roboto:100,500,600,700,800,900|Open+Sans&display=swap');

$fontfamily2:'Lato', sans-serif;
$fontfamily3:'Open Sans', sans-serif;
$fontfamily4:'Roboto', sans-serif;
$fontfamily5:'Rubik', sans-serif;
$fontfamily6: 'Permanent Marker', cursive;
$fontfamily7:'Mukta', sans-serif;
$fontfamily8: 'Roboto Mono', monospace;

$greenGrey:#2b2c2b;
$darkGreen:hsl(220, 4%, 16%);
$boxshadow1:0 3px 6px rgba(0,0,0,0.16), 0 3px 6px rgba(0,0,0,0.23);
$boxshadow2:0 1px 3px rgba(0, 0, 0, 0.12), 0 1px 2px rgba(0, 0, 0, 0.24);
$boxshadow3:0 3px 6px rgba(0, 0, 0, 0.16), 0 3px 6px rgba(0, 0, 0, 0.23);
$insetboxshadow1:inset 0px 1px 1px rgba(0, 0, 0, .3);
$sharpShadow1:  0 1px 1px rgba(0,0,0,0.25) ,
0 2px 2px rgba(0,0,0,0.20), 
0 4px 4px rgba(0,0,0,0.15), 
0 8px 8px rgba(0,0,0,0.10),
0 16px 16px rgba(0,0,0,0.05);
$subtleBoxShadow:  0px 3px 15px rgba(0,0,0,0.2);
$brown0:hsl(27, 6%, 15%);
$grey0: hsl(0,0,95);
$grey01:hsl(0,0,92);
$grey001:hsl(0,0,90);
$grey1: hsl(0,0,88);
$grey12:hsl(0,0,80);
$grey2: hsl(0,0,76);
$grey2223: hsl(0,0,70);
$grey23: hsl(0,0,66);
$grey223: hsl(0,0,62);
$grey3: hsl(0,0,58);
$grey334: hsl(0,0,54);
$grey34: hsl(0,0,50);
$grey4: hsl(0,0,43);
$grey4: hsl(0,0,43);
$grey45: hsl(0,0,40);
$grey445: hsl(0,0,33);
$grey5: hsl(0,0,28);
$grey5: hsl(0,0,28);
$grey56: hsl(0,0,24);
$grey6: hsl(0,0,20);
$grey667:hsl(0,0,15);
$grey67:hsl(0,0,10);
$grey7:rgb(0, 0, 0);
$greyNice:hsl(109,0, 80);
$border1: 1px solid $grey5;

$backgroundWhite:hsl(300,0,100%);
$frostedGray: hsl(0, 0, 96%);
$darkGray: hsl(226, 6, 26%);
$selectedGray:hsl(231,5, 82%);
$gold1:#eae3be;
$darkGray1: hsl(319, 0, 87%);
$inputBackground:inherit;
$khaki:#bfbbb0;

$coolBlue:#1890ff;
$darkBlue:hsl(209, 52%, 35%);
$mainSpacing:0px;

%hoverStyle {
	background-color:$grey4;
	color:$grey01;
}

$inputBorderBottom:1px solid $grey5;
$inputColorBackground:inherit;
$inputColor:black;
$inputColorFocus:black;
$inputColorPlaceholder:$grey34;

$mainBackgroundColor:#EEEEEE;
$mainForegroundColor:$grey6;
$leftSideBackgroundColor:$grey445;
$brown1:#352609;
$beige1:rgb(28, 28, 23);//#B7B7A8;
$blue0:hsl(210, 25%, 36%);
$anotherBlue:#0f66c5;
$blue1:$grey4;//#384F65;//#2C6294;
$orange1:hsl(33, 86%, 44%);
$orange2:hsl(45, 100%, 54%);
$teal1:hsl(200, 81%, 41%);
$accentColor:hsl(173, 26%, 36%);
$accentColor2:hsl(174, 27%, 25%);
$accentColor3:hsla(191, 13%, 38%, 1);
$accentColor4:hsl(50, 98%, 49%);
$accentColor5:$orange1; 
$accentColor6:hsl(226, 14%, 19%);
$primary-color: #61dafb;
$primary-color2: #354246;
$secondary-color:#282c34;
$third-color:$grey6;
$solarized-color:hsla(192, 100%, 11%, 1);
$fourth-color:hsla(240, 1%, 83%, 1);
$purple1:#5a19ab;
$purple2:#6666b1;

$sectionBorder:5px solid $grey6;
$subsectionBorder:none;
$inputBorder: 2px solid $grey5;
%shared {
	font-family:-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,Oxygen,Ubuntu,Cantarell,"Fira Sans","Droid Sans","Helvetica Neue",Arial,sans-serif,"Apple Color Emoji","Segoe UI Emoji","Segoe UI Symbol";
	font-size:x-small;
}

$font1:8px;
$font2:9px;
$font3:10px;
$font34:11px;
$font4:12px;
$font45:13px;
$font5:14px;
$font6:16px;
$font7:19px;
$font8:23px;
$font9:27px;
$font10:30px;
$font11:34px;

%inputStyle {
	font-family:$fontfamily8;
	font-size:$font4;
	color:black;
}
%pathInputStyle{
    @extend %inputStyle;
    font-size:10.5px;
    letter-spacing:.6px;
    font-weight:300;
    margin-left:20px;
}


$technicalFont:    'Atlas Grotesk Web', 'Open Sans', sans-serif;
$latoFont: 'Lato', sans-serif;

$primaryColor2:#7983e1;
$primaryColor3:hsla(193, 20%, 80%, 0.9);
$primaryColor4:hsla(209, 16%, 39%, 1);
$shadow1:0 1px 3px rgba(0,0,0,0.12), 0 1px 2px rgba(0,0,0,0.24);
$shadow1hover:0 14px 28px rgba(0,0,0,0.25), 0 10px 10px rgba(0,0,0,0.22);
.FlexGrow{
	flex:1 0 auto;
}
.FlexContainerVertical{
	display:flex;
	flex-direction:column;
}
.LightColorFont{
	color:$grey2;
}
.FontLarge {
	font-size:$font5;
}
$white1: hsl(319,0,84%);

