@charset "UTF-8";

/* This file is called forward_address.css rather than a more ambitious name such as scg_pub_skin.css.  When it gets exercised
 * and solidified enough by future web pages, we can rename it accordingly then.
 */

/* Override Bootstrap's defaults.  In your HTML page, reference the Bootstrap CSS before this one. */
body {
	font-family: Arial, "Helvetica Neue", Helvetica, sans-serif;
	font-weight: normal;
	background: #fff;
	font-size: 62.5%;
	line-height: 1.2;
	overflow-y: auto;
	overflow-x: hidden;
	padding: 0px;
	margin: 0px;
	border-style: none;
	width: 100%;
	height: 100%;
}

/* BEGIN mobile, which includes the sm and xsm breakpoints */
/* Header */
.header-wrapper {
  background: url(../images/bg-hdr-oma.png) repeat-x;
  border-bottom: 4px solid #cccccc;
  box-sizing: content-box;
  margin-left: -15px;
  margin-right: -15px;

  padding-top: 10px;
  background-position: 0 -10px;
  height: 65px;
}

.main-header {
  display: flex;
  justify-content: space-between;
  box-sizing: border-box;
  margin: 0 auto;
  padding-left: 15px;
  padding-right: 15px;
}

.main-header .logo, .main-header .mobile-nav-btn {
	margin: 10px 0 0; /* top, left and right, bottom */
}

.logo img, .mobile-nav-btn img {
  /*width: 45px;*/
  height: 40px;
}

/* Main content */
.content-wrapper {
	background: #fff;
  overflow: auto; /* prevent children's margin-bottom from extending past parent's bottom edge by extending the parent's height */ 
}

.content-separator, .main-content {
  margin-top: 15px;
  margin-bottom: 15px;
  padding: 0px;
	box-sizing: border-box;
}

.message-container {
  background: #fff;
  font-size: 1em;
  margin-bottom: 20px;
  border: 1px solid #cccccc;
  padding: 15px 15px 15px 10px;
  display: flex;
  align-items: flex-start;
}

a {
  color: #039;
}

.header2AndDesc {
  margin-bottom: 25px;
  font-weight: bold;
}

.header3AndDesc {
  margin-bottom: 25px;
  color: #079117fb;
}

.message-container a {
  text-decoration: underline;
}

.message-icon {
	margin-top: 5px;
	margin-right: 10px;
	width: 23px;
}
.error-text-panel h1 {
  font-size: 1.7em;
  font-weight: bold;
}

.error-text-panel ul {
  padding-left: 15px;
  font-size: 1.5em;
  margin-bottom: 0; /* we're inside a padded box; no need for for extra margin */
}

.success-text-panel h1 {
  font-size: 3em;
  font-weight: bold;
  color: #266d2f;
}

.success-text-panel p, .message-container p {
  font-size: 1.5em;
}

.message-container ul > li {
  padding-bottom: 10px;
}

.message-container ul > li:last-child {
  padding-bottom: 0px;
}

.content-box {
	background: #fff;
	box-sizing: border-box;
	display: block;
	padding: 0;
}

.headerAndDesc, .panel-label-input {
	margin-bottom: 15px;
}

.pageTitleText {
	font-size: 3.0em;
  font-weight: bold;
	margin: 0;
  margin-bottom: 20px;
}

.pageDescText {
	font-size: 1.7em;
}

.required, .red {
	color: #C62127;
}

.pageDesc .required {
	margin: 10px 0 0 0;
	text-align: left;
  width: 100%;
  box-sizing: border-box;
  font-size: 1.5em;
}

hr.separator-line {
	background: #212121;
	border: 0 none;
	display: block;
	height: 2px;
	width: auto;
	margin: 25px 0;
  opacity: 50;
}

.panel-label-input label {
	font-size: 1.5em;
	font-weight: bold;
  margin-bottom: 5px;
}

.panel-label-input input[type="text"], .panel-label-input select {
  margin: 0;
  padding: 5px;
  width: 100%;
  height: 30px;
  box-sizing: border-box;
  border: 1px solid #CCC;
  font-size: 1.5em;
}

.panel-label-input input[type="text"] {
  overflow-x: hidden;
  overflow-y: auto;
  color: #212121;
}

.panel-label-input select {
  min-width: 220px;
  color:  #000000;
  background: #ffffff;
}

/* Footer */
.footer-wrapper {
	border-top: 4px solid #cccccc;
}

.btn-orange {
	background-color: #d34600;
	background-image: none !important;
	box-shadow: inset 0px -3px #b03a00;
	-webkit-box-shadow: inset 0px -3px #b03a00;
	-moz-box-shadow: inset 0px -3px #b03a00;
  border: 0;
  cursor: pointer;
  padding: 10px 15px;
  color: #fff;
  font-size: 15px;
  font-weight: bold;
  border-radius: 5px;
  -webkit-border-radius: 5px;
  -moz-border-radius: 5px;
}
.btn-orange:disabled {
    background-color: #d2d2d2;
    color: #9f9d9d;
    box-shadow: inset 0px -3px #9f9d9d;
    -webkit-box-shadow: inset 0px -3px #9f9d9d;
    -moz-box-shadow: inset 0px -3px #9f9d9d;
}

.footer-copyright {
  text-align: center;
  color: #212121;
  font-size: 1.3em;
  margin-top: 25px;
}

.bolded { 
  font-weight: bold; 
}

/* Nothing needed here since all the rule declaration above are already for mobile
@media (min-width: 576px) {
}
*/

/* Tablet and wider, i.e. the md breakpoint */
@media (min-width: 768px) {
  .header-wrapper {
    padding-top: 20px;
    background-position: 0 0;
    height: 85px;
  }

  .logo img {
    /*width: 65px;*/
	height: 40px;
  }

  .main-header .mobile-nav-btn {
    margin-top: 18px;
  }

  .mobile-nav-btn img {
    width: 50px;
    vertical-align: center;
  }

  .content-wrapper { /* Desktop uses the same rule */
    background: #e7e7e7;
  }

  .content-separator, .main-content {
    padding: 30px;
	  background: #fff;
  }

  .message-container {
    border: none;
    padding: 0;
    margin-bottom: 0;
  }

  .message-icon {
    width: auto;
    margin-top: 0;
    margin-right: 20px;
  }

  .headerAndDesc {
    margin-bottom: 25px;
  }

  .pageTitleText {
    margin-bottom: 25px;
  }

  .pageDesc .required {
    margin-top: 0;
    text-align: right;
  }

  .separator-line {
    margin: 25px 0;
    opacity: 50;
    height: 2px;
  }

  .panel-label-input label {
    display: block;
    text-align: right;
    padding: 5px 0px 15px 0; 
    /* We're inside col-? or col-x-?, which already has right and left paddings.  There is a large gap between the label
       and buddy input field.  If we need to reduce the gap even further, we need to use negative right margin for the label
       and negative left margin for the input field.
     */
  }

  .panel-label-input {
    margin-bottom: 0;
  }

  .panel-label-input input[type="text"], .panel-label-input select {
    min-width: 220px;
    width: 220px;
  }

  .footer-copyright {
    text-align: left;
  }
}

/* height: 60px for desktop */
@media (min-width: 992px) {
  .logo img {
	height: 60px;
  }
}