﻿h3 {padding-top: 0px; padding-bottom: 5px;}

/* ICON PROPERTIES */
.smallIcon {width: 50%;}
.mediumIcon {height: 50px}
.bigIcon {height: 100px;
	/* padding: 10px; border: 1px solid grey; border-radius: 50px; box-shadow: 4px 4px 2px lightgrey; */
	}

.proxyTypeText  {
	color: #cc3443; /* WUSM red */
	font-size: smaller;
	}
	
table, th, td {
  border: 1px solid black;
  border-collapse:collapse;
  vertical-align: top;
  padding: 12px;
}

td {
	text-align: center
}

#boxMoreProxyAccess {
	display: none; 
	border: solid 1px gray;
	background-color: white;
	padding: 10px;
	align-items: top;
	justify-content: center;
	flex-wrap: wrap;
	box-shadow: 4px 4px 2px lightgrey;
	border-top: 0px;
	transition: max-height 1s ease-out; /* smooth-transition between both "states" */
	}

.boxDetail {
	max-height: 0vh; /* makes the element invisible due to no height */
    overflow: hidden; /* hides the visual overflow when the element's height is smaller then the contents height */
	flex-wrap: wrap;
	align-items: center;
	justify-content: center;
	transition: max-height 1s ease-in-out; /* smooth-transition between both "states" */
	}

.proxyAgeHeader {
	display: flex;
	border: solid 1px gray;
	background-color: white;
	padding: 10px;
	padding-bottom: 15px;
	align-items: center;
	justify-content: center;
	flex-wrap: wrap;
	box-shadow: 4px 4px 2px lightgrey;
	}
	
.proxyAgeHeader.proxyAgeHeaderMiddle {
	border-top: 0px;
	border-bottom: 0px;
}

/* LIST PROPERTIES */
ol {list-style-position: inside;}
ul {list-style-position: inside; list-style-type: disc;}
.listTextSmall {font-size: small;}

.flex70 {flex: 70%; padding-right: 10px;}
.flex70noPad {flex: 70%; padding-right: 10px;}
.flex80 {flex: 80%; padding-left: 5px;}
.flex80NoMore {
	flex: 80%;
	padding: 10px;
	padding-left: 5px;
	}
	
.flexLeftIcon {
	flex: 20%;
	font-weight: bold;
	}
.flexSection {display: flex; align-items: center; justify-content: center; flex-wrap: wrap;}
.flexBreakerHR {flex-basis: 100%; height: 0; margin-top: 0px; margin-bottom: 25px;}

#hiddenFAQteenInfo {display: none;}
.moreButton {
	flex: 10%;
	box-shadow: inset 0 -2px 0 0 rgb(0 0 0 / 20%);
    color: #ffffff;
    background-color: #cc3443; /* WUSM red */
	padding: 0.615rem 0.75rem;
	border-radius: 4px;
	cursor: pointer;
	box-sizing: border-box;
	text-align: center;
	margin: 0.5rem 0;
	}
	
.moreButton:hover {
	color: white;
	text-decoration: none;
	background: #cc3443;
    box-shadow: 0 1px 1px rgb(0 0 0 / 11%), 0 2px 2px rgb(0 0 0 / 11%), 0 4px 4px rgb(0 0 0 / 11%), 0 6px 8px rgb(0 0 0 / 11%), 0 8px 16px rgb(0 0 0 / 11%);
}
	
.flexThird {flex: 33%; padding-left: 10px; padding-right: 10px; min-width: 250px; padding-bottom: 5px;}
.flexThirdHeader {padding-top: 5px}
#flexThirdMiddle {border-right: 1px solid lightgrey; border-left: 1px solid lightgrey;}
@media only screen and (max-width: 600px) {#flexThirdMiddle {border: 0px;}} /* REM borders for middle column when mobile */
@media only screen and (max-width: 600px) { /* ADD borders for middle column top and bottom when mobile */
	#flexThirdMiddle {border-top: 1px solid lightgrey; border-bottom: 1px solid lightgrey;}
	} 
#flexRowMiddle {border-top: 0px !important; border-bottom: 0px !important;}
.proxyInfoGraphic {max-width: 95%; border: 1px solid grey; box-shadow: 4px 4px 2px lightgrey;}
.proxyInfoGraphicTALL {display: none;}
.mobileonly {display: none;}
@media only screen and (max-width: 600px) {
	.proxyInfoGraphic {display: none;}
	.proxyInfoGraphicTALL {display: block; max-width: 100%;}
	.proxyInfoGraphicTALL table img {height: 50px}
	.bigIcon {height: initial; width: 80px; padding-right: 4px; padding-left: 4px;}
	.mobileonly {display: initial;}
	.fullonly {display: none;}
}

hr {border: 0; border-top: 3px solid #EBECF0;} /*light gray*/
hr.fullLine {border-top: 3px solid #E3EEE3;}

/* HIDING so there's not so much stuff */
@media only screen and (max-width: 600px) {aside#sidebar {display: none;}}
@media only screen and (max-width: 600px) {
	div.signup, p.posttext, h2.header.center, a.button.tall.newworkflow, a.button.tall.jsreq.completeworkflow {display: none;}
	} /* HIDE things when MOBILE */