/* This is the stylesheet layout for all web applications that will have the **
 ** SSO page "look and feel" to them.                                         */

/* The most basic form of CSS reset. Keep it simple for now until a full-blown reset stylesheet is needed. */
* { margin: 0; padding: 0; list-style-type: none; }

/* Define the basic CWRU-blessed colors */
:root {
    --color-light-red: #ff6ea0;
    --color-terracotta-orange: #D63D13F;
    --color-fall-yellow: #E69E40;
    --color-blue-green: #377E72;
    --color-violet-purple: #692C95;
    --color-vivid-green: #61A530;
}

/* basic options for the body */
body {
	background: white;	
	color: black; /* font settings inherited throughout document */
	font-size: 100%;
}

header, header h1, header img, main, footer {display: block; width: 100%;}
header {
	background: linear-gradient(225deg, transparent 10%, var(--color-cwru-blue) 0) top right; /* dog ear */
}

header img.bnr_image {
    max-width: 250px;
    width: auto;
    padding-top: 9px;
}

main {
	background: var(--color-cwru-blue);
	color: white;
	font-weight: 200;
}
main a, main a:visited { color: white; }

body th,td { font-size: 10pt; }
body table { line-height: var(--line-height-small); }
body h3 { 
    font-size: 1.1em; 
    padding: .5em 0 .5em 0;
}

body a, body a:visited, body a:link { 
    text-decoration: none; 
    color: white;
}

body a:hover { 
    text-decoration: underline;
    color: white;
}

body a.inline_link {
    color: inherit;
    text-decoration: underline;
    font-weight:bold;
    outline: none;
}

body a:hover.inline_link {
    color: var(--color-fall-yellow);
    text-decoration: underline;
    font-weight:bold;
    transition: .3s;
}

body p {
    line-height: var(--line-height-small);
    font-size: .9em;
}

input::-webkit-outer-spin-button,
input::-webkit-inner-spin-button {
    /* display: none; <- Crashes Chrome on hover */
    -webkit-appearance: none;
    margin: 0; /* <-- Apparently some margin are still there even though it's hidden */
}

input[type=number] {
    -moz-appearance:textfield; /* Firefox */
  }

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

/* For smaller screens we need to push the logo down a bit */
.bnr_top {
    height: calc(25px + (1.2vw * 4.9));
    display: block;
    max-height: 64px;
}

.bnr_spacer {
    width:5px;
    display: none;
}

.bnr_title {
    display:none; 
	font-size:1.0em;
	padding-left: 10px;
	border-left: 1px solid white;
}

.idm_nav_bar {
    color: var(--color-link-blue);
    background-color: var(--color-lighter-gray);
    width: 100%;
}

div.idm_nav_bar_item {
    color: var(--color-link-blue);
    background-color: var(--color-lighter-gray);
    width: 33%;
    float: left;
    text-align: center;
    padding: 8px 0px 8px 0px;
    font-weight: bold;
    /* font-size: 1.0em; */
}

a.idm_nav_bar_item, a:link.idm_nav_bar_item, a:visited.idm_nav_bar_item {
    color: var(--color-link-blue);
    text-decoration: none;
}

a:hover.idm_nav_bar_item {
    color: var(--color-link-blue);
    text-decoration: underline;
}

div.about {
  font-size: .9em;
  line-height: 1.0em;
  padding: 0px;
}

/*

	Set the background and dog ear for the main portion.
	The 600px is the fixed pixel size of the maximum width.
	Any viewable width greater than that will cause the
	"container" to center itself. Any width less than that
	should cause the "containers" to scale down while the
	child elements scale as a percentage of the available
	width.

	All other width calculations will be based on 
	percentages and height based on font height of the browser.
	Content is divided into a grid of columns 60px wide
	(50px + 5px on either side).

*/
@media only screen and (min-width: 600px) {
	header, main, footer {
		max-width: 600px;
		margin: 0 auto 0 auto;
	}
	header {
		margin-top: 1em;
	}
    
    header img.bnr_image {
        max-width: 300px;
        /* width: auto; */
        margin-left: 3%;
        margin-top: max(3px, calc(15px - 1.0vw));
    }
    
  h3 {
	 padding: 0.5em 0 1em 0;
	 font-weight: bold;
	 font-family: sans-serif;
  }
  
  h2 {
    color: white;
    display: inline;
  }
    
  .bnr_spacer {
    width:5px;
    display: inline-block;
  }

  .bnr_title {
    display:inline; 
	font-size: calc(1.0em - .11vw);
	padding-left: 20px;
	padding-bottom: 5px;
	border-left: 2px solid white;
  }

  p {
        font-size: .8em;
    }
}

/* 
	make the header 
*/
header h1 {
	color: white;
	font-size: 1.3333em;
	display: none;
	text-align: center;
}
header img {
	display: block;
	max-width: 250px;
	margin: 0 auto 0 auto;
}

body h2 {
    display: block;
    width: auto;
    margin: 0 auto 0 auto;
    font-size: 1.08em;
    color: white;
}

.sso_button {
    position: relative;
    padding: 7px 20px;
    background-color: var(--color-link-blue);
    visibility: hidden;
    color: white;
    font-weight: bold;
    font-size: 1.1em;
    border-radius: 20px;
    margin-top: 8px;
    display:block;
    border: 0;
}

.sso_button:hover:enabled {
    background-color: white;
    visibility: visible;
    text-decoration: none;
    color: var(--color-cwru-blue);
    font-weight: bold;
    transition: 0.3s;
}

.sso_button:enabled {
    text-decoration: none;
    visibility: visible;
    font-weight: bold;
    background-color: var(--color-link-blue);
    color: white;
}

.inner_tab {
    border: 0px;
    word-wrap: normal;
}
th.inner_tab { text-align: right; }

a:hover.sso_button, a:link.sso_button { text-decoration:none; }

body th { padding:2px; }

@media only screen and (min-width: 321px) {
	/*
	Adjust table font sizes upward to accommodate larger
	format devices.
	*/
	body th,td { font-size: 10pt; }
}

.eaddr_breaker {
    word-wrap: break-word;
    white-space: pre-wrap;
    word-break: break-word;
}

@media only screen and (min-width: 600px) {
	header img, header h1 {
		color: white;
		width: calc(37.085% - 4px); /* % for fitting the image with 4px used to space the elements */
		display: inline-block;
	}
	header img {
		margin: 1.5em 0 0 12.915%; /* at 600px width == margin-left: 77.5px; */
	}
	header h1 {
		border-left: solid 1px white; /* separator between logo and h1 */
		/* keep the text from wrapping and spilling the header height
		can be changed to accommodate other behaviors */
		white-space: nowrap;
		overflow: hidden;
		text-align: left;
							
		font-weight: 100;
		font-size: 1.333em;

		vertical-align: top; /* align the element and text with the logo image */
		margin-top: 2.3333333em; /* padding away from top browser chrome */
		padding: 0.5em 0 0.5em 1.5%;
	}

    body th,td { font-size: 12pt; }

	.sso_button {
		margin-left: auto;
		margin-right: auto;
		font-size: 1.0em;
	}
	
}

@media only screen and (min-width: 375px) {
	/*
	Adjust table font sizes upward to accommodate larger
	format devices.
	*/
    header img.bnr_image {
        max-width: calc(250px + (1.1vw * 4));
        /* width: auto; */
        /*! margin-left: auto; */
    } 
}

.inside-box {
    padding: 25px 25px 25px 25px;
}

ul {
    list-style: none; /* Remove default bullets */
    margin-left: 9%;
}

ul li::before {
  content: "\2022";  /* Add content: \2022 is the CSS Code/unicode for a bullet */
  color: white; /* Change the color */
  font-weight: bold; /* If you want it to be bold */
  display: inline-block; /* Needed to add space between the bullet and the text */
  width: 1em; /* Also needed for space (tweak if needed) */
  margin-left: -1em; /* Also needed for space (tweak if needed) */
}

/*
**
**  CSS for standardized body content 
**
*/
/* Tooltip container */
.tooltip {
  position: relative;
  display: inline-block;
  cursor: help;
}

/* Tooltip text */
.tooltip .tooltiptext {
  visibility: hidden;
  width: 390px;
  top: 100%;
  margin-left: -90%;
  background-color: #626262;
  color: #fff;
  /* text-align: center; */
  text-align: left;
  padding: 5px 8px;
  border-radius: 6px;
  position: absolute;
  z-index: 1;
}

/* Show the tooltip text when you mouse over the tooltip container */
.tooltip:hover .tooltiptext {
  visibility: visible;
}

/*
** Uncomment the following lines if you want to add a top arrow to the tooltip
**
.tooltip .tooltiptext::after {
  content: " ";
  position: absolute;
  bottom: 100%;
  left: 20%;
  margin-left: -7px;
  border-width: 7px;
  border-style: solid;
  border-color: transparent transparent #626262 transparent;
}
*/
.pushright { margin-left: 3%; }

.clearfix:after {
  content:"";
  display:block;
  clear:both;
}

.error_alert {
    background-color: #D63D1F;
    text-align:center; 
    padding:5px; 
    font-weight: bold;
}

.success_alert {
    background-color: #377E72;
    text-align:center; 
    padding:5px; 
    font-weight: bold;
}

.caution_alert {
    background-color: var(--color-fall-yellow);
    color: var(--color-cwru-blue);
    text-align: center;
    padding: 0px;
    font-weight: bold;
}

form {
	padding-top: 0;
	width: 80%;
	margin: 0 auto 0 auto;
}

form label, form p, form p input { display: block; }
form input:focus { outline: none; }

form p a { display: none; }

form p {
	padding: 0.5em 0 0.5em 0;
}

form label {
	padding-bottom: 0.5em;
}

form label span {
	font-size: 0.666em;
	margin-left: 3%;
}

form input[type="text"], form input[type="password"], form input[type="number"] {
	width: 100%;
	font-size: 1.5em;
    color: var(--color-drk-blue);
    background-color: white;
    border: 0px;
    padding-left: 3px;
}

form button[type="submit"] {
	border: none;
	background: var(--color-cwru-blue);
	margin: 0 auto 0 auto;
	width: 100%;
}

aside {
	display: none;
}

footer {
	display: none;
}

@media only screen and (min-width: 600px) {
	form {
		/* push the content of the form into the center
		and fix the width to suspend the contents in 
		that position. size and margins will adjust based
		on the max-wdith size of the parent container elements
		*/
		display: inline-block;
		margin-left: 12.915%;
		width: 37%; /* 74% + (13% * 2) = 100%. the .085% is spacing to grid */
	}

	form input[type="text"], form input[type="password"], form input[type="number"] {
		width: 78%;
		font-size: 0.8em;
        color: var(--color-drk-blue);
        background-color: white;
        border: 0px;
        padding-left: 3px;	
    }
    
    #eaddr {
        width:100%;
    }
    
	form p a { 
		display: block;
		font-size: 0.8em;
		padding-top: 0.5em;
	}
	
	form button[type="submit"] {
			width: 200%;
			overflow: visible;
			margin: 4em 0 2em 0;
	}

	aside {
		display: inline-block;
		vertical-align: top;
		width: 36%;
		padding-left: 1%;
	}

    h3 {
	   padding: 0.5em 0 1em 0;
	   font-weight: bold;
	   font-size: 1em;
	   font-family: sans-serif;
    }

    aside ul li {
	   padding-bottom: 0.5em;
	   font-size: 0.9em;
    }
 
    footer {
	   display: block;
	   font-size: 0.75em;
	   color: #666666;
	   margin-top: 4em;
	   line-height: 1.5em;
    }
 
    footer p {
	   padding-bottom: 2em;
    }

}

table, th, td {
    border-collapse: collapse;
}

th, td {
    padding: 2px;
}
 
table.outer { 
    border: 2px white solid; 
}
 
table.inner { 
    border: 0; 
}
 
dt { font-weight: bold; }
dd { margin-left: 3%; }