/* main.css */

@charset "utf-8";
/* CSS Document */


@import "Century-Gothic-font/font_stylesheet.css"


select {
	font-family: 'Century Gothic',sans-serif;
	font-size: 12pt;
	color:#34438F;
}

body {
	font-family: 'Century Gothic',sans-serif;
	color:#42424C;
}

input { 
	font-family: 'Century Gothic',sans-serif; 
	color:#34438F;
}

:root {
  accent-color: #34438F;
}

h1 {
    font-size: 40px;
    line-height: 52px;
    color: #34438F;
}

h2 {
    font-size: 37.5px;
    line-height: 38px;
    color: #34438F;
}

h3 {
  text-align: left;
  font-size: 24px;
  line-height: 32px;
  color: #34438F;
}


a:link, a:visited {
  text-decoration: none;
  color:#4193D1;
}

a:active, a:hover {
  text-decoration: none;
  color:#5FC26A;
}

.divBannerTable {
  width: 100%;
  margin-bottom: 25px;
}
.divBannerRow {
  margin-left: -15px;
  display: flex;
  align-items: left;
  justify-content: flex-end;
  height:72px;
}
.divBannerCell {
   display: table-cell;
   vertical-align:middle;
   color: #34438F;
}
.divBannerCell:first-child {
}
.divBannerCell:last-child {
  text-align: right;
}

.username {
  font-family: 'Century Gothic',sans-serif;
  color: #34438F;
  padding: 15.5px;
  font-size: 15px;
  font-weight: 400;
}
.username a:link, .username a:visited, .username a:active, .username a:hover {
    text-decoration: none;
}
.divBannerCell a:link, .divBannerCell a:visited, .divBannerCell a:active, .divBannerCell a:hover {
    text-decoration: none;
}

.formEditTable{
  display: flex;
  flex-direction: column;
  align-content: space-between;
  justify-content: space-between;
  width: min(600px, 75%);
}

.formEditRow {
  display: flex;
  flex-direction: row;
  align-self: flex-start;
  margin-right: auto;
  align-content: space-between;
  justify-content: space-between;
  padding-bottom: min(5px,0.5%);
  width: 100%;
}

.formEditItem {
  display: table-cell;
  width: 50%;
}

.formEditItemVertical{
  display: flex;
  flex-direction: column;
  align-content: space-between;
  justify-content: space-between;
  align-self: flex-start;
  margin-right: auto;
  align-items: stretch;
  width: 50%;
}

#passwordStrength {
    height:12px;
    display:block;
    float:left;
}
.strength0 {
    width:150px;
    background:#cccccc;
}
.strength1 {
    width:30px;
    background:#ff0000;
}
.strength2 {
    width:60px;
    background:#ff5f5f;
}
.strength3 {
    width:90px;
    background:#56e500;
}
.strength4 {
    background:#4dcd00;
    width:120px;
}
.strength5 {
    background:#399800;
    width:150px;
}

.textButton a,
.textButton button,
button.textButton,
div.textButton,
a.textButton {
	position: relative;
	display: inline-block;
	margin: 4px;
	padding: 6px 12px;
	border: 1px solid #6272CA;
	font-size: 15px;
	color: #6272CA;
	background-color: #ffffff;
	font-family: 'Century Gothic', Helvetica, Arial, sans-serif;
	transition: color 0.2s ease-in-out, background-color 0.2s ease-in-out, border 0.2s ease-in-out, margin 0.2s ease-in-out;
}

button.textButton {
	height: 30px;
	padding: 3px 8px;
}

.textButton embed {
	outline: none;
}

.textButton a:hover:not(.textButton_disabled),
.textButton button:hover:not(.textButton_disabled),
button.textButton:hover:not(.textButton_disabled),
div.textButton:hover:not(.textButton_disabled),
a.textButton:hover:not(.textButton_disabled) {
	text-decoration: none !important;
	color: #FFFFFF;
  transition: color 0.2s ease-in-out, background-color 0.2s ease-in-out;
	background-color: #6272CA;
	cursor: pointer;
	*cursor: hand;
}

.textButton a:active:not(.textButton_disabled),
.textButton button:active:not(.textButton_disabled),
button.textButton:active:not(.textButton_disabled),
div.textButton:active:not(.textButton_disabled),
a.textButton:active:not(.textButton_disabled) {
  background-color: #6272CA;
  color: #FFFFFF;
	border: 3px solid #8AE7D4;
	margin: 2px;
}

.textButton_disabled a,
.textButton_disabled button,
button.textButton_disabled,
div.textButton_disabled,
a.textButton_disabled {
	color: #999;
	cursor: default;
	border: 1px solid #999;
	background: #ffffff;
}

.textButton img {
    border: 0;
    vertical-align: middle;
}

.errorLabel {
  color: #FF3D50;
  font-size: 11pt;
}



.thumbsUpImage{
  display: inline-block;
  width: 16px !important;
  height: 16px;
  background: url("/static/images/thumbs_up.svg") no-repeat, url("/static/images/thumbs_up.png") no-repeat;
  background-size: 16px 16px;
  transition: background 0.2s ease-in-out;
}

.textButton a:hover:not(.textButton_disabled) .thumbsUpImage,
.textButton button:hover:not(.textButton_disabled) .thumbsUpImage,
button.textButton:hover:not(.textButton_disabled) .thumbsUpImage,
div.textButton:hover:not(.textButton_disabled) .thumbsUpImage,
a.textButton:hover:not(.textButton_disabled) .thumbsUpImage{
  background: url("/static/images/thumbs_up_inverse.svg") no-repeat, url("/static/images/thumbs_up_inverse.png") no-repeat;
  background-size: 16px 16px;
  transition: background 0.2s ease-in-out;
}

.thumbsDownImage{
  display: inline-block;
  width: 16px !important;
  height: 16px;
  background: url("/static/images/thumbs_down.svg") no-repeat, url("/static/images/thumbs_down.png") no-repeat;
  background-size: 16px 16px;
  transition: background 0.2s ease-in-out;
}

.textButton a:hover:not(.textButton_disabled) .thumbsDownImage,
.textButton button:hover:not(.textButton_disabled) .thumbsDownImage,
button.textButton:hover:not(.textButton_disabled) .thumbsDownImage,
div.textButton:hover:not(.textButton_disabled) .thumbsDownImage,
a.textButton:hover:not(.textButton_disabled) .thumbsDownImage{
  background: url("/static/images/thumbs_down_inverse.svg") no-repeat, url("/static/images/thumbs_down_inverse.png") no-repeat;
  background-size: 16px 16px;
  transition: background 0.2s ease-in-out;
}


.leftArrowImage{
  display: inline-block;
  width: 16px !important;
  height: 16px;
  background: url("/static/images/back.svg") no-repeat, url("/static/images/back.png") no-repeat;
  background-size: 16px 16px;
  transition: background 0.2s ease-in-out;
}

.textButton a:hover:not(.textButton_disabled) .leftArrowImage,
.textButton button:hover:not(.textButton_disabled) .leftArrowImage,
button.textButton:hover:not(.textButton_disabled) .leftArrowImage,
div.textButton:hover:not(.textButton_disabled) .leftArrowImage,
a.textButton:hover:not(.textButton_disabled) .leftArrowImage{
  background: url("/static/images/back_inverse.svg") no-repeat, url("/static/images/back_inverse.png") no-repeat;
  background-size: 16px 16px;
  transition: background 0.2s ease-in-out;
}

.rightArrowImage{
  display: inline-block;
  width: 16px !important;
  height: 16px;
  background: url("/static/images/arrow_right.svg") no-repeat, url("/static/images/arrow_right.png") no-repeat;
  background-size: 16px 16px;
  transition: background 0.2s ease-in-out;
}

.textButton a:hover:not(.textButton_disabled) .rightArrowImage,
.textButton button:hover:not(.textButton_disabled) .rightArrowImage,
button.textButton:hover:not(.textButton_disabled) .rightArrowImage,
div.textButton:hover:not(.textButton_disabled) .rightArrowImage,
a.textButton:hover:not(.textButton_disabled) .rightArrowImage{
  background: url("/static/images/arrow_right_inverse.svg") no-repeat, url("/static/images/arrow_right_inverse.png") no-repeat;
  background-size: 16px 16px;
  transition: background 0.2s ease-in-out;
}



.icons {
	text-align: right;
	padding-top: 0;
	padding-bottom: 0;
  white-space: nowrap;
}

.formEditComment {
  color: #777;
  font-size: 9px;
}

.subTitle {
  font-weight: 700;
  text-align: left;
  font-size: 24px;
  line-height: 32px;
  color: #6272CA;
}

input[type="radio" i]{
  color: #34438F;
  margin-left: 0;
  margin-top: 4px;
}