/* Style rules for responsive pages */

@import url("//fonts.googleapis.com/css?family=Open+Sans");
/*@import url("//fonts.googleapis.com/css?family=Open+Sans+Bold");*/
@import url("//fonts.googleapis.com/css?family=Roboto");
@import url('https://fonts.googleapis.com/css2?family=Open+Sans:ital,wght@1,800&family=Roboto+Serif:wght@900&family=Roboto:wght@900&display=swap');
@import url("//fonts.googleapis.com/css?family=Nunito");
@import url("//fonts.googleapis.com/css?family=Lato");
@import url("//fonts.googleapis.com/css?family=Montserrat");
@import url("//fonts.googleapis.com/css?family=Raleway");
@import url("//fonts.googleapis.com/css?family=PT+Serif");

.roundDiv {
  -webkit-border-radius: 13px;
  -moz-border-radius: 13px;
  -o-border-radius: 13px;
  -ms-border-radius: 13px;
  border-radius: 13px;
}

.boxShadow {
	box-shadow: 12px 12px 12px rgba(0, 0, 0, 0.15);
}

.dashboardFinancial {
  display: grid;  
  gap: calc(3vh);
  background-color: #F0F0F0;  
  min-height: 100vh;
  height: fit-content;
  min-width: 100vmax;
  overflow: visible;
}

header {
  grid-column: 1 / 26;
  grid-row: 1;  
  height: 5vh;  
  min-height: 55pt;
}

content {
  grid-column: 1 / 26;
  grid-row: 2 / 8;
  min-height: 0vh;
  margin-top: 0vh;  
}

featuresDiv {
  grid-column: 1 / 4;
  grid-row: 2 / 5;  
  /*width: 100%;*/
  /*margin-top: 2vw;*/
}

schedultedTasks {
  /*grid-column: 4 / 17;*/
  grid-column: 17 / 26;
  /*grid-row: 2;*/
  grid-row: 4 / 6;
  background-color: #FFFFFF;  
  width: initial;
  /*height: max-content;*/
  /*min-height: initial;*/
  margin-right: 2vw;
  /*margin-left: 2vw;*/  
  /*padding-bottom: 1vw;*
  /*margin-top: 2vw;*/
}

runningJobs {
  /*grid-column: 4 / 17;*/
  grid-column: 17 / 26;
  /*grid-row: 3 / 5;*/
  grid-row: 6 / 7;
  background-color: #FFFFFF;  
  margin-right: 2vw;
  /*margin-top: 2vw;*/
  /*margin-left: 2vw;*/
  /*padding-bottom: 1vw;*
  /*margin-top: 2vw;*/
}


credits {
  grid-column: 17 / 26;
  grid-row: 2 / 4;
  background-color: #FFFFFF;  
  margin-right: 2vw;
  /*margin-left: 2vw;*/
  /*margin-top: 2vw;*/
}


latestBlasts {
  grid-column: 1 / 17;
  grid-row: 5 / 7;
  background-color: #FFFFFF;  
 /*margin-top: 2vw;*/
}

topLists {
  /*grid-column: 17 / 26*/
  grid-column: 4 / 17;
  /*grid-row: 4 / 8;*/
  grid-row: 2 / 5;
  background-color: #FFFFFF;  
  /*margin-right: 2vw;*/
  /*margin-top: 2vw;*/
}

footer {
  grid-column: 1 / 26;
  grid-row: 7;
  padding-left: 2vw;
  background-color: #F0F0F0;  
  min-height: 1vw;
}


.box {
	min-height: calc(9.7vw);
}

.imageResponsive {
  max-width: 100%;
  display: block;
}


.headerText {
	font-family: Roboto;
	color: white;
	font-size: 13pt;
	letter-spacing: 1pt;
	font-variant-numeric: lining-nums;
	-moz-font-feature-settings: "lnum" 1;
	-webkit-font-feature-settings: "lnum" 1;
	font-feature-settings: "lnum" 1;
	font-weight: 400;
	text-decoration: none;	
	white-space: nowrap;
}

.features {
  display: grid;
  grid-template-columns: repeat(2, 1fr);  
  grid-template-rows: repeat(4, 1fr);
  padding: 0vw;
  width: fit-content;  
  height: 90%;
  grid-gap: 2vh;  
  margin-top: 1vh;
}


.featureGrid {
  display: grid;  
  grid-template-columns: 100%;
  grid-template-rows: 5% 45% 5% 40% 5%;
  text-align: center;
  background-color: #FFFFFF;  
  width: 10vh;
  height: 10vh;
  align-content: space-between;
}

featureIcon {
  grid-column: 1 / 1;
  grid-row: 2;
  padding: calc(1px + 0.2vw);
  display: flex;
  justify-content: center;
}


featureText {
  grid-column: 1 / 1;
  grid-row: 4;
  padding: calc(1px + 0.2vw);  
  z-index: 1;
}




.headerIconGrid {
  display: grid;  
  grid-template-columns: 4vw;
  grid-template-rows: 1vw;
  text-align: center;  
  width: 4vw;
  height: calc(2.8vw);
  align-content: space-between;
}

.headerIconText {
	font-family: Roboto;
	font-size: 13pt;
	text-decoration: none;	
  	color: #FFFFFF;  	
}

.headerBackText {
	font-family: Roboto;
	font-size: 11pt;
	text-decoration: none;	
  	color: #FFFFFF;  	
}

.featureIconTransparent {
  height: 4vw;
  width: calc(3.75vw);
}


.imageButtonGrid {
  display: grid;  
  text-align: center;
  align-content: space-between;
  gap: 1vw;
  max-width: max-content;
  padding-left:1vw;
  padding-right:1vw;  
}

imageButtonText {
  grid-column: 1 / 1;
  grid-row: 1;  
  max-width: max-content;
  height: fit-content;
  /*padding-top: calc(0.7vh);*/
  
}

imageButtonIcon {
  /*height: fit-content;*/
  /*width: 2vw;*/
  grid-column: 2 / 2;
  grid-row: 1;
  /*padding: calc(1px + 0.2vw);*/
  /*max-width: max-content;*/
  height: 100%;
  display: flex;
  align-items: center;
  justify-content: center;

  
}


.imageButtonText {
	font-family: Roboto;
	font-size: calc(1.5vh);
	text-decoration: none;	
  	color: white;  	
  	max-width: max-content;  	
  	line-height: 3em;
}

.boxHeader {
	font-family: Roboto Serif Black;
	font-size: calc(2vh);
	text-decoration: none;		
	white-space: nowrap;
	color: black;	
	font-weight: 500;	
	font-family: 'Roboto', sans-serif;
}

.headerResponsive {
	background-color: #FFFFFF;
	font-family: 'Roboto', sans-serif;
	font-size: calc(1.5vh);
	text-decoration: none;
	text-align: left;
	vertical-align: middle;
	padding-bottom: calc(1px + 0.5vw);
	font-weight: 900;
}

.mediumHeaderResponsive {
	background-color: #FFFFFF;
	font-family: 'Roboto', sans-serif;
	font-size: calc(1.2vh);
	text-decoration: none;
	text-align: left;
	vertical-align: middle;
	/*padding-bottom: calc(1px + 0.5vw);*/
	font-weight: 900;
}

.mediumHeaderResponsiveNoBold {
	background-color: #FFFFFF;
	font-family: Roboto;
	font-size: calc(1.2vh);
	text-decoration: none;
	text-align: left;
	vertical-align: middle;
	/*padding-bottom: calc(1px + 0.5vw);*/	
}


.mediumPlusHeaderResponsive {
	background-color: #FFFFFF;
	font-family: Roboto;
	font-size: calc(1.7vh);
	text-decoration: none;
	text-align: left;
	vertical-align: middle;
	padding-bottom: calc(1px + 0.5vw);
}

.listRowResponsive {
	color: #000000;
	background-color: #FFFFFF;
	font-size: calc(5px + 0.8vw);
	font-family: Roboto;
	vertical-align: middle;
	height: calc(2.7vh);
}

.listItemResponsive {
	color: #000000;
	text-align: left;
	padding: 0;
	/*padding-right: 5px;*/
	font-family: Roboto;
	font-size: calc(1.5vh);
	line-height: calc(2.7vh);
	width: inherit;
	text-decoration: none;
	vertical-align: middle;
	font-weight: 400;
}

.listItemCenterResponsive {
	color: #000000;
	text-align: center;
	padding: 0;
	/*padding-right: 5px;*/
	font-family: Roboto;
	font-size: calc(1.5vh);
	line-height: calc(2.7vh);
	text-decoration: none;
	vertical-align: middle;
	font-weight: 400;
	width: inherit;
}

.alignCenter {
	text-align: center;
}

.buttonRes {
			
	border: none;
	border-left:none;
	background-color: transparent; 
	margin: 0px;
	padding: 0px;
	max-height: 100%;
    max-width: 100%;
}

.gridLeft {
	text-align: left;
}

.gridRight {
	text-align: right;
}

.gridCenter {
	text-align: center;
}


.refreshIcon {
	border: none;
	border-left:none;
	background-color: transparent;	
	margin: 0px;
	padding: 0px;
	max-height: 100%;
    max-width: 100%;
    padding-right: 1vw;
}

.responsiveGrayedColor {
	color: #D8DCDD;
}