:root {
  --darkBlue: #2A56C6;
  --lightBlue: #4285F4; 
/*  --darkBlue: #1A0DAB;
  --lightBlue: #2A56C6;*/
  --backgroundColor: #0C173A;
  --contentBackground: #FFFFFF;
  --searchBackground: #FFFFFF;
  --textColor: #000000;
  --resultColor: #666666;
  --footerTextColor: #DDDDDD;
}


body {
  -webkit-text-size-adjust: 100%;
  font-family: verdana;
  background-color: white;
  margin:0px;
  color: var(--textColor);
  /*background-color: #202949;*/
}

.card {
  background-color: var(--darkBlue);
  border: 1px solid var(--darkBlue);
  box-shadow: 0 5px 10px rgba(0,0,0,.2);
}

.dropShadow {
  box-shadow: 0 5px 10px rgba(0,0,0,.2);
}

.card:hover {
  background-color: var(--lightBlue);
}

.card-header {
  /*background-color: var(--textColor);*/
  background-color: white;
}

.indexInput {
  margin-top: 3px;
  border-radius: 15px;
  font-size: 18px;
  line-height: 21px;
  padding: 5px 5px 5px 8px;
  width:500px;
  border: 2px solid var(--darkBlue);
  background-color: white;
  box-shadow: 0 5px 10px rgba(0,0,0,.2);
}

.indexSubmit {
  background-color: white;
  border: 2px solid var(--darkBlue);
  color: black;
  padding: 4px 6px;
  text-decoration: none;
  margin: 4px 8px;
  cursor: pointer;
  border-radius: 4px;
  box-shadow: 0 5px 10px rgba(0,0,0,.2);
}

.link1 {
  font-size: 16px;
  text-decoration: none;
  color: var(--textColor);
}

.privacyLink {
  font-size: 15px;
  text-decoration: none;
  color: black;
}

header {
  padding-top: 5px;
  padding-left: 35px;
  padding-right: 35px;
  background-color: var(--backgroundColor);
}

.headerIndex {
  height: 25px;
}

.headerContent {
  height: 54px;
  box-sizing: border-box;
}

.header-left {
  float:left;
}

.header-right {
  float:right;
  padding-right:10px;
}

.headerInput {
  margin-top: 7px;
  border-radius: 25px;
  font-size: 13px;
  line-height: 21px;
  padding: 5px 5px 5px 10px;
  border: 0px;
  width: 300px;
  box-sizing: border-box;
}

main {
  padding-left: 35px;
  padding-right: 35px;
  padding-bottom: 35px;
  min-height: 600px;
}

.mainIndex {
  padding-top: 22px;
  background-color: var(--contentBackground);
  color: var(--textColor);
}

.mainContent {
  padding-top: 15px;
  background-color: var(--contentBackground);
  color: var(--textColor);
}

.mainSearch {
  padding-top: 5px;
  background-color: var(--searchBackground);
  color: var(--textColor);
}

.centerText {
  text-align:center;
}

footer {
  padding-left: 35px;
  padding-right: 35px;
  padding-top: 10px;
  background-color: white;
  display: flex;
  justify-content: center;
  text-align:center;
  color: black;
  font-size: 14px;
  line-height: 28px;

}

.card-title {
  color: white;
}

.list-group {
  box-shadow: 0 5px 10px rgba(0,0,0,.2);
}

.list-group-item {
  background-color: white;
  border-color: black;
  color: var(--textColor);
  font-size: 16px;
}

.list-group-item:hover {
  background-color: var(--lightBlue);
  color: white;
}

.articleTitle {
  font-size: 24px;
  line-height: 38px;
  font-weight: bold;
  margin-block-end: 0.em;
  margin-inline-start: 0px;
  margin-inline-end: 0px;
}

.articleBodyTop {
  margin-top: 15px;
  margin-bottom: 10px;
  font-size: 14px;
  line-height: 24px;
  font-weight: normal;
}

.articleBodyMiddle {
  margin-top: 15px;
  margin-bottom: 10px;
  font-size: 14px;
  line-height: 24px;
  font-weight: normal;
}

.articleBodyBottom {
  margin-top: 15px;
  margin-bottom: 10px;
  font-size: 14px;
  line-height: 24px;
  font-weight: normal;
}

.showMore {
  margin-top: 15px;
  margin-bottom: 10px;
  font-size: 14px;
  line-height: 24px;
  font-weight: normal;
}

.box {
    font-size: 12px;
    background-color: var(--searchBackground);
    color: var(--resultColor);
    font-family: verdana;
    border-radius: 2px;
    border: 0px;
    line-height: 15px;
    margin-bottom: 5px;
    margin-top: 5px;
    padding-bottom: 5px;
    padding-left: 0px;
    padding-right: 0px;
    padding-top: 0px;
    width:100%;
    box-sizing: border-box;
    display: inline-block;
}

.box2 {
    font-size: 12px;
    background-color: var(--searchBackground);
    color: var(--resultColor);
    font-family: verdana;
    border-radius: 2px;
    border: 0px;
    line-height: 15px;
    margin-bottom: 5px;
    margin-top: 5px;
    padding-bottom: 5px;
    padding-left: 0px;
    padding-right: 0px;
    padding-top: 0px;
    width:100%;
    box-sizing: border-box;
    display: inline-block;
}

.result-url {
  font-size: 12px;
  color: var(--resultColor);
  line-height: 18px;
  -ms-flex-negative: 1;
  text-overflow: ellipsis;
  white-space: nowrap;
  overflow: hidden;
}

.result-title a{
  color: var(--resultColor);
  font-size: 14px;
  text-decoration: none;
}

.related {
  color: var(--resultColor);
  font-size: 14px;
  text-decoration: none;
  line-height: 18px;
}

.result-body {
  text-decoration: none;
}

.labels {
  font-size: 12px;
  color: var(--resultColor);
}

.spacer {
  margin-top:20px;
}

.spacer10 {
  margin-top:10px;
}

.spacer30 {
  margin-top:30px;
}

.showPointer {
  cursor: pointer;
}

.suggContainer {
	background-color: #ffffff;
	height: 100%;
	width: 85%; 
	padding: 1px;
}

.sugg {
	display: -ms-flexbox;
	display: -webkit-box;
	display: -webkit-flex;
	display: flex;
	-ms-flex-align: start;
	-webkit-box-align: start;
	-webkit-align-items: flex-start;
	align-items: flex-start;
	box-sizing: border-box;
	overflow: hidden;
	flex-wrap: wrap;
}

.suggTitle {
	-ms-flex-direction: row;
	-webkit-box-orient: horizontal;
	-webkit-flex-direction: row;
	flex-direction: row;
	width: 100%;
	-ms-flex-negative: 1;
	-webkit-box-flex: 1 0;
	-webkit-flex-shrink: 1;
	flex-shrink: 1;
}

.suggTitleText {
	font-size: 14px;
	background-color: #ffffff;
	color: #212121;
	font-family: Verdana,arial,sans-serif;
	padding-bottom: 5px;
}

.suggBox {
  background-color: #2a56c6;
	color: #ffffff;
	font-family: Verdana,arial,sans-serif;
	width: 100%;
	-ms-flex-negative: 1;
	-webkit-box-flex: 1 0;
	-webkit-flex-shrink: 1;
	flex-shrink: 1;
	border-radius: 25px;
	border: 4px solid #1a0dab;
	padding-bottom: 14px;
	padding-left: 20px;
	padding-right: 10px;
	padding-top: 14px;
}

.suggBox:hover {
	background-color: #4285fa;
}

.suggLink {
  width: 100%;
	-ms-flex-negative: 1;
	-webkit-box-flex: 1 0;
	-webkit-flex-shrink: 1;
	flex-shrink: 1;
	padding-bottom: 12px;
	padding-left: 24px;
	padding-right: 12px;
	padding-top: 12px;
	color: #ffffff;
	text-decoration: none;
	text-transform: none;
	color: inherit;
	display: inline-block;
}

.suggText {
	font-size: 24px;
	font-weight: 700;
	padding-right: 20px;
}

.suggArrow {
	width: 30px;
	float: right;
}

.suggSpacer {
	background-color: #ffffff;
	width: 100%;
	-ms-flex-negative: 1;
	-webkit-box-flex: 1 0;
	-webkit-flex-shrink: 1;
	flex-shrink: 1;
	flex-basis: 100%;
	height: 1px;
}

.suggContainer > .suggBox:nth-of-type(5n+1) > .suggLink {
  border-left: #1f8a70 7px solid;
}
.suggContainer > .suggBox:nth-of-type(5n+2) > .suggLink {
  border-left: #fd7400 7px solid;
}
.suggContainer > .suggBox:nth-of-type(5n+3) > .suggLink {
  border-left: #bedb39 7px solid;
}
.suggContainer > .suggBox:nth-of-type(5n+4) > .suggLink {
  border-left: #004358 7px solid;
}
.suggContainer > .suggBox:nth-of-type(5n+5) > .suggLink {
  border-left: #ffe11a 7px solid;
}

/* Use a media query to add a breakpoint at 800px: */
@media screen and (max-width: 639px) {
  header, main, footer {
    padding-left: 15px;
    padding-right: 15px;
  }
  .indexInput {
    width:234px;
  }
  
  .indexSubmit {
    margin: 4px 2px;
  }
  
  .headerInput {
    width: 180px;
  }
  
  .suggContainer {
	  width: 100%;
  }
}