/**
 * Millco Base CSS.
 * Originally based on Wing.css but it's moved on a fair bit since then
 */

 :root{
    
  --theme: #3e1ab4;

  --dark: hsl(0, 0%, 5%);
  --grey-dark: hsl(0, 0%, 15%);
  --grey-mid: hsl(0, 0%, 25%);
  --grey-light: hsl(0, 0%, 50%);
  --pale: #FDF2E9;

  --grey: #C4C8D0;

  --green: #007775;
  --red: #E94321;
  --yellow: #E19800;
  --blue: #0062ff;

  --transition: all 0.3s ease-in-out;

  --text-light: 200;
  --text-regular: 200;
  --text-strong: 600;
  --strong: 600;

      /* Modern Font Stacks */

/* System */
/* font-family: system, -apple-system, ".SFNSText-Regular", "San Francisco", "Roboto", "Segoe UI", "Helvetica Neue", "Lucida Grande", sans-serif; */

/* Times New Roman-based serif */
/* font-family: Cambria, "Hoefler Text", Utopia, "Liberation Serif", "Nimbus Roman No9 L Regular", Times, "Times New Roman", serif; */

/* A modern Georgia-based serif */
/* font-family: Constantia, "Lucida Bright", Lucidabright, "Lucida Serif", Lucida, "DejaVu Serif", "Bitstream Vera Serif", "Liberation Serif", Georgia, serif; */

/*A more traditional Garamond-based serif */
/* font-family: "Palatino Linotype", Palatino, Palladio, "URW Palladio L", "Book Antiqua", Baskerville, "Bookman Old Style", "Bitstream Charter", "Nimbus Roman No9 L", Garamond, "Apple Garamond", "ITC Garamond Narrow", "New Century Schoolbook", "Century Schoolbook", "Century Schoolbook L", Georgia, serif; */

/*The Helvetica/Arial-based sans serif */
/* font-family: Frutiger, "Frutiger Linotype", Univers, Calibri, "Gill Sans", "Gill Sans MT", "Myriad Pro", Myriad, "DejaVu Sans Condensed", "Liberation Sans", "Nimbus Sans L", Tahoma, Geneva, "Helvetica Neue", Helvetica, Arial, sans-serif; */

/*The Verdana-based sans serif */
/* font-family: Corbel, "Lucida Grande", "Lucida Sans Unicode", "Lucida Sans", "DejaVu Sans", "Bitstream Vera Sans", "Liberation Sans", Verdana, "Verdana Ref", sans-serif; */

/*The Trebuchet-based sans serif */
/* font-family: "Segoe UI", Candara, "Bitstream Vera Sans", "DejaVu Sans", "Bitstream Vera Sans", "Trebuchet MS", Verdana, "Verdana Ref", sans-serif; */

/*The heavier "Impact" sans serif */
/* font-family: Impact, Haettenschweiler, "Franklin Gothic Bold", Charcoal, "Helvetica Inserat", "Bitstream Vera Sans Bold", "Arial Black", sans-serif; */

/*The monospace */
/* font-family: Consolas, "Andale Mono WT", "Andale Mono", "Lucida Console", "Lucida Sans Typewriter", "DejaVu Sans Mono", "Bitstream Vera Sans Mono", "Liberation Mono", "Nimbus Mono L", Monaco, "Courier New", Courier, monospace; */

--heading-font: Constantia, "Lucida Bright", Lucidabright, "Lucida Serif", Lucida, "DejaVu Serif", "Bitstream Vera Serif", "Liberation Serif", Georgia, serif;;

--font-sans: system, -apple-system, ".SFNSText-Regular", "San Francisco", "Roboto", "Segoe UI", "Helvetica Neue", "Lucida Grande", sans-serif;;

--font-serif: Constantia, "Lucida Bright", Lucidabright, "Lucida Serif", Lucida, "DejaVu Serif", "Bitstream Vera Serif", "Liberation Serif", Georgia, serif;

--font-condensed: Impact, Haettenschweiler, "Franklin Gothic Bold", Charcoal, "Helvetica Inserat", "Bitstream Vera Sans Bold", "Arial Black", sans-serif;


}


/*=============================
  Base Styles
=============================*/
* {
  box-sizing: border-box;
}
html,
body {
  margin: 0;
  padding: 0;
}

body {
  font-size: 100%;
  line-height: 1.4;
  color: var(--dark);
  font-weight: 400;
  font-family: var(--font-sans);
  scroll-behavior: smooth;
  position:relative;
}
/*=============================
  Grid
=============================*/
.container {
  padding: 0 1rem;
  max-width: 960px;
  margin: 0 auto;
}
.row {
  display: flex;
  flex-flow: row wrap;
  justify-content: space-between;
  width: 100%;
  margin-bottom: 1rem;
}
.row:last-child {
  margin-bottom: 0;
}
.row .col {
  flex-grow: 1;
  flex-basis: 0;
}
.row .col-1 {
  width: 8.333333333333332%;
}
.row .col-2 {
  width: 16.666666666666664%;
}
.row .col-3 {
  width: 25%;
}
.row .col-4 {
  width: 33.33333333333333%;
}
.row .col-5 {
  width: 41.66666666666667%;
}
.row .col-6 {
  width: 50%;
}
.row .col-7 {
  width: 58.333333333333336%;
}
.row .col-8 {
  width: 66.66666666666666%;
}
.row .col-9 {
  width: 75%;
}
.row .col-10 {
  width: 83.33333333333334%;
}
.row .col-11 {
  width: 91.66666666666666%;
}
.row .col-12 {
  width: 100%;
}
@media screen and (max-width: 768px) {
  .row .col,
  .row [class^='col-'],
  .row [class*=" col-"] {
    flex-grow: 0;
    flex-basis: 100%;
  }
}
/*=============================
  Typography
=============================*/
h1,
h2,
h3,
h4,
h5,
h6,
p {
  margin-top: 0;
  margin-bottom: 1rem;
  font-family: var(--font-sans)
}

h1, h2, h3, h4, h5,
.text-heading{
    font-weight: var(--strong);
    line-height: 1.1;
}

h1 {
	font-size: 3rem;
	margin: 0;
}

h2{
    font-size: 1.5rem;
}

h3{
    font-size: 1.25rem;
}

h3{
    font-size: 1.15rem;
}

.has-lede p:first-of-type{
    font-weight: var(--strong);
    font-size: 1.1rem;
}

@media (max-width: 768px) {
 
}

/*=============================
  Form
=============================*/
input[type=text],
input[type=password],
input[type=email],
input[type=search],
input[type=number],
input[type=file],
input[type=tel],
input[type=url],
select,
textarea {
  height: 45px;
  width: 100%;
  margin-bottom: 1rem;
  padding: 1rem;
  font-size: 1rem;
  background: #f5f5f5;
  border: 1px solid #a7a7a7;
  border-radius: 2px;
  transition: all 0.2s ease;
}
input[type=text]:hover,
input[type=password]:hover,
input[type=email]:hover,
input[type=search]:hover,
input[type=number]:hover,
input[type=file]:hover,
input[type=tel]:hover,
input[type=url]:hover,
select:hover,
textarea:hover {
  border-color: #111;
}
input[type=text]:focus,
input[type=password]:focus,
input[type=email]:focus,
input[type=search]:focus,
input[type=number]:focus,
input[type=file]:focus,
input[type=tel]:focus,
input[type=url]:focus,
select:focus,
textarea:focus {
  outline: none;
  border-color: #0062ff;
}
textarea {
  min-height: 70px;
}
/*=============================
  Button
=============================*/
button,
.button,
[type=submit] {
  height: 45px;
  margin-bottom: 16px;
  padding: 10px 30px;
  outline: none;
  text-decoration: none;
  color: #f5f5f5;
  font-size: 16px;
  background: #111;
  border: 1px solid #111;
  border-radius: 2px;
  transition: all 0.2s ease;
}
button:hover,
.button:hover,
[type=submit]:hover,
button:focus,
.button:focus,
[type=submit]:focus {
  opacity: 0.9;
}
button:active,
.button:active,
[type=submit]:active {
  opacity: 0.7;
}
button[disabled],
.button[disabled],
[type=submit][disabled] {
  opacity: 0.8;
  cursor: not-allowed;
}
button.outline,
.button.outline,
[type=submit].outline {
  color: #111;
  background: none;
}
button.outline:hover,
.button.outline:hover,
[type=submit].outline:hover,
button.outline:focus,
.button.outline:focus,
[type=submit].outline:focus {
  color: #f5f5f5;
  background: #111;
}
/*=============================
  Link
=============================*/
a {
  color:var(--blue);
  transition: var(--transition);
}
a:hover {
  cursor: pointer;
  color: var(--theme);
  transition: var(--transition);
}
/*=============================
  List
=============================*/
ul,
ol {
  margin-top: 0;
  margin-bottom: 16px;
  padding-left: 0;
  list-style-position: inside;
}
ul li,
ol li {
  margin-bottom: 16px;
}
ul li:last-child,
ol li:last-child {
  margin-bottom: 0;
}
ul ul,
ol ul,
ul ol,
ol ol {
  margin-left: 1rem;
}

/*=============================
  Image
=============================*/
img {
  margin-top: 0;
  max-width: 100%;
  height: auto;
}

.img-fluid{
  display: inline-block;
  max-width: 100%;
  height: auto;
}

/*=============================
  Components
=============================*/

.alert{
  display: inline-block;
  margin: auto;
  padding:0.5rem;
  padding-left: 28px;
  border:2px solid hsl(349,100%,95%);
  background-color: hsl(349,100%,63%);
  color: white;
  border-radius: 0.5rem;
  position: relative;;
}

.alert::before {
	content: '!';
	color: hsl(349,100%,63%);
	background-color: white;
	width: 16px;
	height: 16px;
	position: absolute;
	top: 11px;
	left: 6px;
	font-weight: 700;
	border-radius: 50%;
	display: flex;
	align-items: center;
	justify-content: center;
}

.box {
  margin-bottom: 16px;
  padding-top: 16px;
  padding-right: 16px;
  padding-left: 16px;
  border: 1px solid #a7a7a7;
  border-radius: 2px;
}


.edit-link{
  position:fixed;
  width:40px;
  bottom:80px;
  right:0;
  border:2px solid #ccc;
  background-color: var(--dark);
  padding:4px;
  color:white;
  text-decoration: none;
  border-top-left-radius: 8px;
  border-bottom-left-radius: 8px;
  box-shadow: 2px 2px 4px #666;
  font-size:0.9rem;

}

.edit-link:hover{
  background-color: #ccc;
  color: var(--dark);
}

/*=============================
  Navigation
=============================*/
.nav {
  position: relative;
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  padding-top: 16px;
  padding-bottom: 16px;
}
.nav .nav-item {
  margin-right: 16px;
}
.nav .nav-item:last-child {
  margin-right: 0;
}

/*=============================
  Card
=============================*/
.card {
  display: flex;
  flex-direction: column;
  margin-bottom: 16px;
  border: 1px solid #a7a7a7;
  border-radius: 2px;
}
.card .card-content {
  margin: 0;
  padding: 16px;
}
.card .card-image {
  display: block;
  height: auto;
  width: 100%;
}
/*=============================
  Code
=============================*/
pre {
  margin-top: 0;
  margin-bottom: 16px;
}
pre code {
  display: block;
  padding: 16px;
  white-space: pre-wrap;
  word-wrap: break-word;
}
code {
  padding: 2px;
  white-space: nowrap;
  background: #e7e7e7;
  border: 1px solid #d7d7d7;
  border-radius: 2px;
  font-family: "Consolas", "Monaco", "Menlo", monospace;
}
/*=============================
  Divider
=============================*/
hr{
  border: 0;
  height: 2px;
  background: var(--blue-dark);
  margin:2rem;
}

/*=============================
  Positioning Utilities
=============================*/
.position-relative {
  position: relative;
}
.position-absolute {
  position: absolute;
}
.position-fixed {
  position: fixed;
}
.text-left {
  text-align: left;
}
.text-center {
  text-align: center;
}
.text-right {
  text-align: right;
}
.size-full-height {
  min-height: 100vh;
}
.size-full-width,
.w-100 {
  width: 100%;
}
.size-full {
  width: 100%;
  min-height: 100vh;
}
.hidden {
  display: none;
}
.flex {
  display: flex;
}
.justify-start {
  justify-content: flex-start;
}
.justify-center {
  justify-content: center;
}
.justify-end {
  justify-content: flex-end;
}
.align-start {
  align-items: flex-start;
}
.align-center {
  align-items: center;
}
.align-end {
  align-items: flex-end;
}
.direction-vertical {
  flex-direction: column;
}
.direction-horizontal {
  flex-direction: row;
}
.center {
  flex-direction: column;
  justify-content: center;
  align-items: center;
}

/*=============================
  Padding and margins
  all in rem. No pfaffing with quarter rems
  like Bootstrap.  
=============================*/

.p-1{padding:1rem;}
.pl-1{padding-left:1rem;}
.pr-1{padding-right:1rem;}
.pt-1{padding-top:1rem;}
.pb-1{padding-bottom:1rem;}

.p-2{padding:2rem;}
.pl-2{padding-left:2rem;}
.pr-2{padding-right:2rem;}
.pt-2{padding-top:2rem;}
.pb-2{padding-bottom:2rem;}

.p-4{padding:4rem;}
.pl-4{padding-left:4rem;}
.pr-4{padding-right:4rem;}
.pt-4{padding-top:4rem;}
.pb-4{padding-bottom:4rem;}

.m-auto{margin-left:auto; margin-right: auto;}

.m-1{margin:1rem;}
.ml-1{margin-left:1rem;}
.mr-1{margin-right:1rem;}
.mt-1{margin-top:1rem;}
.mb-1{margin-bottom:1rem;}

.m-2{margin:2rem;}
.ml-2{margin-left:2rem;}
.mr-2{margin-right:2rem;}
.mt-2{margin-top:2rem;}
.mb-2{margin-bottom:2rem;}

.m-4{margin:4rem;}
.ml-4{margin-left:4rem;}
.mr-4{margin-right:4rem;}
.mt-4{margin-top:4rem;}
.mb-4{margin-bottom:4rem;}

.mt-auto{margin:auto;}

@media screen and (min-width: 768px) {
  .p-lg-0{
    padding:0;
  }
}


/*=============================
  Display and hidden
=============================*/

.desktop-only-block,
.desktop-only-flex{
  display:none;
}

@media screen and (min-width: 768px) {

  .desktop-only-block{
    display: flex;
  }
  .desktop-only-flex{
    display: flex;
  }
}


/*=============================
  Accessibility
=============================*/
.sr-only{
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
  border-width: 0;
  color: black !important;
  background-color: white !important;
}


 /* tables */

 .table-wrapper{
  max-width: 100%;
  overflow-x: auto;
}

.table-wrapper > table{
  min-width:360px;
}

table { 
  width: 100%; 
  border-collapse: collapse;
  border:0;
  margin:1rem 0 2rem 0;
  caption-side: top;
}

table caption{
  display: revert;
  text-align:left;
}

/* Zebra striping */
tr{ 
  background-color:var(--gold);
}

tr:nth-of-type(odd) { 
  background-color:var(--yellow-light);
}

th { 
  background: var(--green);
  color:white; 
  font-weight: bold;
  line-height: 1.1;
}


td, th { 
  padding: 6px; 
  border-right: 1px solid #eee; 
  border-bottom:0;
  text-align: left;
  font-size:0.85rem;
}

td:last-of-type,
th:last-of-type{
  border-right: 0 solid #eee; 
}

.table-small td,
.table-small th{
  font-size:0.75rem;
}




/*

Bar chart

*/

.bar{
  height:10px;
  background-color: greenyellow;
}

.bar_danger{
  background-color: red;
}