/*
** The following CSS implements style elements for the IDM "services"
** look and feel.
*/
/* 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; }

:root {
    --color-idm-body: #F5F5F5;
    --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: var(--color-idm-body);	
	color: black; /* font settings inherited throughout document */
	font-size: 100%;
}

header, header h1, header img, main, footer {display: block; width: 100%;}
header {
}

main {
	background: white;
	color: black;
	max-width: 1276px;
    margin: 0 auto 0 auto;
}

#cwruHeader {
	margin: 0;
	height: 55px;
	position: relative;
	background-color: var(--color-cwru-blue);
}

#cwruHeaderContent {
	height: 55px;
	width: 1000px;
	position: relative;
	margin: auto;
}

.logo {
	height: 50px;
	width: 205px;
	position: absolute;
	left: 1px;
	top: 2px;
}

input[type=text] { 
    width:90%; 
    border: 1px solid black;
}

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 */
  background-color: whitesmoke;
  }

.spcl_fld {
  background-color: whitesmoke;
  font-size: 1.0em;
  border: 2px solid black;
  border-collapse: collapse;
  padding: 3px;
}

.uid_fld { 
    max-width: 150px;
}


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

/*
**
**  CSS for standardized body content 
**
*/
ul {
    list-style: none; /* Remove default bullets */
    margin-left: 25px;
}

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) */
}

a { 
    color: var(--color-link-blue);
}

a:hover { 
    text-decoration: underline;
}

.service_description p { padding: 10px 5px 10px 25px; }

/* Standard IDM buttons */
.std_idm_btn {
    visibiity: hidden;
    color: white;
    background-color: var(--color-link-blue);
    padding: 10px 20px;
    border: none;
    font-weight: bold;
    font-size: 1.1em;
    border-radius: 20px;
    margin-right: 3%;
    margin-bottom: 5%
}

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

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

.std_idm_select select {
    display: inline-block;
    background: #006da3;
    color: white;
    border: 1px solid white;
    border-radius:20px;
    height: 40px;
    font-size: .9em;
    font-weight: bold;
    font-family: var(--font-plain);
    text-align: center;
    padding: 5px 10px 5px 10px;
    transform: translateX(-50%);
    }

.std_idm_select select:hover:enabled {
    background-color: var(--color-cwru-blue);
    color: white;
    transition-duration: 500ms;
}

input[type="submit"]:disabled.std_idm_btn {
    background-color: var(--color-light-gray);
}

.idm_nav_bar {
    color: #0a304e;
    background-color: var(--color-lighter-gray);
    width: 100%;
}

div.idm_nav_bar_item {
    color: #0a304e;
    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:visited.idm_nav_bar_item {
    color: var(--color-link-blue);
    text-decoration: none;
}

a.idm_nav_bar_item:hover {
    text-decoration: underline;
}

p.hide_me { display:none; }
div.hide_me { display: block; }

dt { font-weight: bold; }
dd { margin-left: 3%; }

cwru-header { display: none; }
cwruHeader { display: block; }

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

@media only screen and (min-width: 600px) {
	input[type=text] { 
	    width:60%; 
	    border: 1px solid black;
    }
    body th,td { font-size: 12pt; }
}

@media only screen and (min-width: 401px) {
    cwru-header { display: block; }
    div.idm_nav_bar_item { font-size: 1.2em; }
    p.hide_me { display: block; }
    div.hide_me { display: none; }
    body th,td { font-size: 12pt; }
}

.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;
}
*/

.inside-box {
    padding: 25px 25px 25px 25px;
    font-size: smaller;
}

.inside-box p {
    line-height: 1.3em;
    margin: unset;
    margin-left: 3%;
}

.inside-box dd, dt {
    line-height: 1.3em;
}

.inside-box ul {
    padding: 0px;
    margin: unset;
    margin-left: 5%;
}

.inside-box li {
    padding: 0px;
    margin: unset;
}

.inside-box h2 {
    font-size: xx-large;
}

.inside-box h3 {
    font-size: x-large;
    color: var(--color-cwru-blue);
}

.inside-box table {
    border-collapse: collapse;
    border: 0;
    font-size: 12pt;   
    padding: 3px;
    line-height: 1.2em;
 }

.inside-box th { 
    font-weight: bold; 
    padding: 4px;
    margin: unset;
}

.inside-box td {
    font-weight: normal; 
    padding: 4px;
    margin: unset;
}

table.outer { 
     border: 3px var(--color-cwru-blue) solid; 
     width: 60%;
     margin-left: auto;
     margin-right:auto;
    padding: 0px;
}
 
.inside-box img { 
    width: 40px;
    height: 40px;
}

.pushright { margin-left: 3%; }

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

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

.success_alert {
    /* background-color: #06823A; */
    background-color: #377E72;
    color: white;
    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;
}