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

/* define standard CSS defaults for Mettle Admin Front-End */

html, body, div, span, h1, h2, h3, h4, h5, h6, hr, p, a img, font, img, dd, dl, dt, li, ol, ul, blockquote, fieldset, form, label, legend, table, caption, tr, th, td, video {
	margin: 0;
	border: 0;
	line-height: inherit;
	font-family: inherit;
	font-size: 100%;
}


html, body {
	height: 100%;
	width: 100%;
	-webkit-tap-highlight-color: rgba(0,0,0,0);
	-webkit-touch-callout: none;
	background: transparent;
}

input:focus {
	outline: none !important;
	box-shadow: none !important;
}

select:focus {
	outline: none !important;
	box-shadow: none !important;
}

html::-webkit-scrollbar {
  display: none;
}



/* clearFix for legacy buggy rendering */

.clearFix {
	clear: both;
}


.splashArea {
	width: 100%;
	background-color: rgba(0,0,0,0.07);
	padding: 40px 0px;
}



.splashLogo {
	width: 300px;
	height: 300px;
	margin-left: auto;
	margin-right: auto;
	background-image: url('media/mettle_logo.svg');
	background-size: contain;
	background-position: center;
	background-repeat: no-repeat;
}



a.blueBtn {
	display: block;
	padding: 10px 20px 13px 20px;
	border-radius: 50px;
	background-color: rgba(83,155,255, 1);
	text-decoration: none;
	width: max-content;
	transition: background-color 0.25s;
}


a.blueBtn:active {
	background-color: rgba(128, 128, 128, 1);
}


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


.centerArea {
	display: block;
	width: 300px;
	margin-left: auto;
	margin-right: auto;
}


.inputField {
	width: 300px;
	padding: 10px 15px 10px 15px;
	border-radius: 5px;
	border-style: solid;
	border-width: 1px;
	border-color: rgba(83,155,255,1.00);
	background-color: rgba(0,0,0,0.07);
}

.warning {
	display: block;
	max-height: 0px;
	overflow: hidden;
	opacity: 0.00;
	transition: max-height 0.5s, opacity 0.5s;
}



/* main CMS styles */



.topArea {
	width: 1024px;
	box-sizing: border-box;
	padding: 20px;
	display: block;
	margin-left: auto;
	margin-right: auto;
	background-color: rgba(0,0,0,0.07);
}

.topLogo {
	width: 300px;
	height: 58px;
	background-image: url('media/mettle_logo_horiz.svg');
	background-size: contain;
	background-position: center;
	background-repeat: no-repeat;
	display: block;
	margin-left: auto;
	margin-right: auto;
}


.menuArea {
	width: 1024px;
	box-sizing: border-box;
	padding: 16px 20px;
	display: flex;
	align-items: center;
	margin-left: auto;
	margin-right: auto;
	background-color: rgba(83,155,255,1.00);
	position: relative;
}

a.menuBtn {
	padding: 6px 10px 7px 10px;
	background-color: rgba(255, 255, 255, 1);
	border-radius: 5px;
	transition: color 0.25s;
	text-decoration: none;
	display: inline-block;
	width: max-content;
	color: rgba(83,155,255,1.00);
}

a.menuBtn:hover {
	color: rgba(255, 76, 0, 1);
}

a.menuBtn:active {
	background-color: rgba(255, 255, 255, 1);
}



a.menuBtnActive {
	padding: 6px 10px 7px 10px;
	background-color: rgba(255, 76, 0, 1);
	border-radius: 5px;
	transition: background-color 0.25s;
	text-decoration: none;
	display: inline-block;
	width: max-content;
	color: rgba(255,255,255,1.00);
}

.menuBtnSpc {
	width: 10px;
	display: inline-block;
}

.menuRight {
	display: flex;
	align-items: center;
	position: absolute;
	right: 14px;
}

.logout {
	width: 22px;
	height: 18px;
	background-image: url('media/logout.svg');
	display: inline-block;
	transition: opacity 0.25s;
	opacity: 1.00;
}

.logout:hover {
	opacity: 0.50;
}

.logout:active {
	opacity: 1.00;
}

.pulledQuote {
	width: 50%;
}

.actionBtn {
	display: block;
	padding: 10px 34px 11px 8px;
	border-radius: 5px;
	border-style: solid;
	border-width: 1px;
	border-color:  rgba(255, 76, 0, 1);
	background-color: rgba(255,255,255,1.00);
	background-position: center right;
	background-repeat: no-repeat;
	background-size: 30px 20px;
	color: rgba(255, 76, 0, 1);
	text-decoration: none;
	width: max-content;
	transition: background-color 0.25s;
}

.actionBtn:hover {
	background-color: rgba(0, 0, 0, 0.10);
}


.genericBtn {
	background-image: url('media/arrow.svg');
}

.uploadBtn {
	background-image: url('media/upload.svg');
	display: none;
}

.refreshBtn {
	background-image: url('media/refresh.svg');
	display: none;
}



.shadowBox {
	padding: 20px;
	border-radius: 15px;
	background-color: rgba(255,255,255,1.00);
	-webkit-box-shadow: 0px 0px 6px 0px rgba(0,0,0,0.15);
	-moz-box-shadow: 0px 0px 6px 0px rgba(0,0,0,0.15);
	box-shadow: 0px 0px 6px 0px rgba(0,0,0,0.15);
	box-sizing: border-box;
}


.shadowBoxDrop {
	padding: 20px;
	border-radius: 15px;
	background-color: rgba(255,255,255,1.00);
	-webkit-box-shadow: 0px 0px 6px 0px rgba(255, 76, 0,0.55);
	-moz-box-shadow: 0px 0px 6px 0px rgba(255, 76, 0,0.55);
	box-shadow: 0px 0px 6px 0px rgba(255, 76, 0,0.55);
	box-sizing: border-box;
}















/* GENERIC PAGE ELEMENTS AND STYLES ----------------------------------------------------- */

.pageArea {
	width: 1024px;
	display: block;
	margin-left: auto;
	margin-right: auto;
}

.marginBox {
	width: 100%;
	box-sizing: border-box;
	padding: 20px;
	background-color: rgba(255,255,255,1.00);
}

.pageBkgnd {
	background-color: rgba(0,0,0,0.07);
}


.vRule20 {
	width: 100%;
	height: 1px;
	margin: 20px 0px;
	background-color: rgba(83,155,255,1.00);
	display: block;
}




.vSpace5 {
	width: 100%;
	display: block;
	height: 5px;
}

.vSpace10 {
	width: 100%;
	display: block;
	height: 10px;
}

.vSpace20 {
	width: 100%;
	display: block;
	height: 20px;
}

.vSpace40 {
	width: 100%;
	display: block;
	height: 40px;
}


/* standard brand font definitions */

.paralucentLight {
	font-family: "paralucent", sans-serif;
	font-weight: 300;
	font-style: normal;
}

.paralucentMedium {
	font-family: "paralucent", sans-serif;
	font-weight: 500;
	font-style: normal;
}

.paralucentDemi {
	font-family: "paralucent", sans-serif;
	font-weight: 600;
	font-style: normal;
}

.paralcuentBold {
	font-family: "paralucent", sans-serif;
	font-weight: 700;
	font-style: normal;
}



.halyardLight {
	font-family: "halyard-text", sans-serif;
	font-weight: 200;
	font-style: normal;
}

.halyardBook {
	font-family: "halyard-text", sans-serif;
	font-weight: 300;
	font-style: normal;
}

.halyardRegular {
	font-family: "halyard-text", sans-serif;
	font-weight: 400;
	font-style: normal;
}

.halyardMedium {
	font-family: "halyard-text", sans-serif;
	font-weight: 500;
	font-style: normal;
}

.halyardSemiBold {
	font-family: "halyard-text", sans-serif;
	font-weight: 600;
	font-style: normal;
}

.halyardBold {
	font-family: "halyard-text", sans-serif;
	font-weight: 700;
	font-style: normal;
}

.halyardBlack {
	font-family: "halyard-text", sans-serif;
	font-weight: 900;
	font-style: normal;
}


.carbonRegular {
	font-family: "t26-carbon", monospace;
	font-weight: 400;
	font-style: normal;
}

.carbonBold {
	font-family: "t26-carbon", monospace;
	font-weight: 700;
	font-style: normal;
}

/* font size and colors and positioning */

.fontWhite {
	color: rgba(255,255,255,1.00);
}

.fontBlack {
	color: rgba(0,0,0,1.00);
}

.fontDarkGrey {
	color: rgba(50, 50, 50, 1);
}

.fontRed {
	color: rgba(204, 0, 0, 1);
}

.fontBlue {
	color: rgba(83,155,255,1.00);
}

.fontOrange {
	color: rgba(255, 76, 0,1.00);
}

.font24 {
	font-size: 24px;
	line-height: 24px;
}

.font24line {
	font-size: 24px;
	line-height: 30px;
}

.font18 {
	font-size: 18px;
	line-height: 18px;
}

.font18line {
	font-size: 18px;
	line-height: 24px;
}

.font18line2 {
	font-size: 18px;
	line-height: 28px;
}

.fontCenter {
	display: block;
	text-align: center;
}

.font30 {
	font-size: 30px;
	line-height: 30px;
}

.font30line {
	font-size: 30px;
	line-height: 36px;
}

.font36 {
	font-size: 36px;
	line-height: 36px;
}

.font36line {
	font-size: 36px;
	line-height: 42px;
}

.font16 {
	font-size: 16px;
	line-height: 16px;
}

.font16line {
	font-size: 16px;
	line-height: 22px;
}

.font64 {
	font-size: 64px;
	line-height: 60px;
}

.font56 {
	font-size: 56px;
	line-height: 56px;
}



.font13 {
	font-size: 13px;
}

.font13line {
	font-size: 13px;
	line-height: 19px;
}