/* Table of Content
	01 Defaults
	02 Left Column
	03 Right Column
    03.1 Sliding panels
	04 Page Content
	05 Mobile Menu
	06 Mobile Optimisation
	07 Debug Panel (Set to display:none; to disable JS debugging functions)
	08 Mobile Menu
  09 Buttons
  10 Forms
  11 Tables
  12 More info iframe
  13 Claim iframe
  14 Training Module
    14.1 Training Mobile Optimisations
  15 Genie login page
    15.1 Genie login page (mobile)
		15.2 Genie login Accuro
*/

/*
01 Defaults
---------------------------------------------------------------------------------------------------- */

* { box-sizing: border-box; }

html, body, div, span, applet, object, iframe,
h1, h2, h3, h4, h5, h6, p, blockquote, pre,
a, abbr, acronym, address, big, cite, code,
del, dfn, em, img, ins, kbd, q, s, samp,
small, strike, strong, sub, sup, tt, var,
b, u, i, center,
dl, dt, dd, ol, ul, li,
fieldset, form, label, legend,
table, caption, tbody, tfoot, thead, tr, th, td,
article, aside, canvas, details, embed,
figure, figcaption, footer, header, hgroup,
input, menu, nav, output, ruby, section, summary,
time, mark, audio, video {
	border: 0;
	margin: 0;
	padding: 0;
	vertical-align: baseline;
	
	font-family: 'Avenir-Roman', Arial, sans-serif;
	font-size: 13px;
}

html
{
  background: rgba(250,247,245,1);
  background: -moz-linear-gradient(left, rgba(250,247,245,1) 0%, rgba(249,249,249,1) 25%, rgba(249,249,249,1) 50%, rgba(243,245,245,1) 75%, rgba(243,246,245,1) 100%);
  background: -webkit-gradient(left top, right top, color-stop(0%, rgba(250,247,245,1)), color-stop(25%, rgba(249,249,249,1)), color-stop(50%, rgba(249,249,249,1)), color-stop(75%, rgba(243,245,245,1)), color-stop(100%, rgba(243,246,245,1)));
  background: -webkit-linear-gradient(left, rgba(250,247,245,1) 0%, rgba(249,249,249,1) 25%, rgba(249,249,249,1) 50%, rgba(243,245,245,1) 75%, rgba(243,246,245,1) 100%);
  background: -o-linear-gradient(left, rgba(250,247,245,1) 0%, rgba(249,249,249,1) 25%, rgba(249,249,249,1) 50%, rgba(243,245,245,1) 75%, rgba(243,246,245,1) 100%);
  background: -ms-linear-gradient(left, rgba(250,247,245,1) 0%, rgba(249,249,249,1) 25%, rgba(249,249,249,1) 50%, rgba(243,245,245,1) 75%, rgba(243,246,245,1) 100%);
  background: linear-gradient(to right, rgba(250,247,245,1) 0%, rgba(249,249,249,1) 25%, rgba(249,249,249,1) 50%, rgba(243,245,245,1) 75%, rgba(243,246,245,1) 100%);
  filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#faf7f5', endColorstr='#f3f6f5', GradientType=1 );
}

body{
		
		overflow:hidden;
		background-size: contain;
		background-repeat: no-repeat;
		background-position: bottom 0px left 0px;
		
		/* font smoothing */
		-webkit-font-smoothing: antialiased;
		text-shadow: 1px 1px 1px rgba(0,0,0,0.07);
		-webkit-font-smoothing: antialiased;
		-moz-osx-font-smoothing: grayscale;
}


.counter {
  color: darkgrey;
  text-align: right;
}


#container {
	padding: 4vh 15px 0px 24px;
	height: calc(100% - 36px);
}

#siteFooter 
{
  position: absolute;
  bottom: 0px;
  width: 100%;
  background: #e8eaeb;
  height:31px;
  display:none;
}

.siteFooterDivider
{
  height:2px;
  background: #2b2171; /* Old browsers */
  background: -moz-linear-gradient(left, #2b2171 0%, #0f7087 50%, #00b189 100%); /* FF3.6-15 */
  background: -webkit-linear-gradient(left, #2b2171 0%,#0f7087 50%,#00b189 100%); /* Chrome10-25,Safari5.1-6 */
  background: linear-gradient(to right, #2b2171 0%,#0f7087 50%,#00b189 100%); /* W3C, IE10+, FF16+, Chrome26+, Opera12+, Safari7+ */
  filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#2b2171', endColorstr='#00b189',GradientType=1 ); /* IE6-9 */
  padding: 0!important;
}

#siteFooter ul 
{
  width:100%;
  display:table;
  padding-bottom:3px;
  opacity: 0.7;
}

#siteFooter li
{
  display:table-cell;
  font-size: 10px !important;
  vertical-align:middle;
  color:#FFFFFF;
}

#siteFooter li a 
{
  font-size: 11px !important;
  color:#FFFFFF;
}

@font-face {
  font-family: 'Avenir-Black';
  src: url('Fonts/Avenir-Black.eot');
  src: url('Fonts/Avenir-Black.woff2') format('woff2'),
       url('Fonts/Avenir-Black.woff') format('woff'),
       url('Fonts/Avenir-Black.ttf') format('truetype'),
       url('Fonts/Avenir-Black.svg#Avenir-Black') format('svg'),
       url('Fonts/Avenir-Black.eot?#iefix') format('embedded-opentype');
  font-weight: normal;
  font-style: normal;
}

@font-face {
  font-family: 'Avenir-Roman';
  src: url('Fonts/Avenir-Roman.eot');
  src: url('Fonts/Avenir-Roman.woff2') format('woff2'),
       url('Fonts/Avenir-Roman.woff') format('woff'),
       url('Fonts/Avenir-Roman.ttf') format('truetype'),
       url('Fonts/Avenir-Roman.svg#Avenir-Roman') format('svg'),
       url('Fonts/Avenir-Roman.eot?#iefix') format('embedded-opentype');
  font-weight: normal;
  font-style: normal;
}

@font-face 
{
  font-family: 'Avenir-Heavy';
  src: url('Fonts/Avenir-Heavy.eot');
  src: url('Fonts/Avenir-Heavy.woff2') format('woff2'),
       url('Fonts/Avenir-Heavy.woff') format('woff'),
       url('Fonts/Avenir-Heavy.ttf') format('truetype'),
       url('Fonts/Avenir-Heavy.svg#Avenir-Roman') format('svg'),
       url('Fonts/Avenir-Heavy.eot?#iefix') format('embedded-opentype');
  font-weight: normal;
  font-style: normal;
}

.clearfix 
{
 clear:both; 
}

.displayInlineMiddle 
{
  display:inline-block;
  vertical-align:middle;
}

.displayInlineTop
{
  display:inline-block;
  vertical-align:top;
}

.defaultGradientBackground 
{
  background: #2b2171; /* Old browsers */
  background: -moz-linear-gradient(left, #2b2171 0%, #0f7087 50%, #00b189 100%); /* FF3.6-15 */
  background: -webkit-linear-gradient(left, #2b2171 0%,#0f7087 50%,#00b189 100%); /* Chrome10-25,Safari5.1-6 */
  background: linear-gradient(to right, #2b2171 0%,#0f7087 50%,#00b189 100%); /* W3C, IE10+, FF16+, Chrome26+, Opera12+, Safari7+ */
  filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#2b2171', endColorstr='#00b189',GradientType=1 ); /* IE6-9 */ 
}

.deafultGradientText 
{
  background: #2b2171; /* Old browsers */
  background: -moz-linear-gradient(left, #2b2171 0%, #0f7087 50%, #00b189 100%); /* FF3.6-15 */
  background: -webkit-linear-gradient(left, #2b2171 0%,#0f7087 50%,#00b189 100%); /* Chrome10-25,Safari5.1-6 */
  background: linear-gradient(to right, #2b2171 0%,#0f7087 50%,#00b189 100%); /* W3C, IE10+, FF16+, Chrome26+, Opera12+, Safari7+ */
  filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#2b2171', endColorstr='#00b189',GradientType=1 ); /* IE6-9 */

  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
  display:inline; /* Needed for Safari */


  /* Temp fix for IE */
  color:#2b2171; 
}

.siteIcon 
{
 height:50px;
 cursor:pointer;
}

.avenirHeavy 
{
  font-family: 'Avenir-Heavy', Arial, sans-serif;
}

.centeredEleAndCenteredCon 
{
  margin:0 auto;
  text-align:center; 
}

input[type="checkbox"] {
    display: inline;
    border: 0;
    margin: 10px;
    height: 13px;
    vertical-align: top;
    border-radius: none;
    -ms-transform: scale(2);
    -moz-transform: scale(2);
    -webkit-transform: scale(2);
    -o-transform: scale(2);
    transform: scale(2);
    padding: 10px;
}

/*
02 Left Column
---------------------------------------------------------------------------------------------------- */

#left-column 
{
  float:left;
  width:80%;
  padding-right: 15px;
  
  /* Adds a right border with the logo gradient. removed as runs to bottom of page
  border-right-width: 2px;
  border-style: solid;
  -webkit-border-image: 
    -webkit-gradient(linear, 0 0, 0 100%, from(#2b2171), to(#00b189)) 1 100%;
  -webkit-border-image: 
    -webkit-linear-gradient(#2b2171, #00b189) 1 100%;
  -moz-border-image:
    -moz-linear-gradient(#2b2171, #00b189) 1 100%;    
  -o-border-image:
    -o-linear-gradient(#2b2171, #00b189) 1 100%;
  border-image:
    linear-gradient(to bottom, #2b2171, #00b189) 1 100%;
*/
}

#left-column-inner-left
{
 float:left;
 width:52%;
 padding-left: 11%;
}

#left-column-inner-right
{
 float:right;
 width:43%;
}

.widerContentView 
{
  width:58% !important;
}

#main-nav {
	margin-bottom:72px;
	margin-top: 14px;
	position: relative;
}

#main-nav ul, # {
	margin: 0;
	padding: 0;
	list-style-type: none;
}

#main-nav ul { 
	padding: 0;
	margin: 0;
	display: inline;
}

#main-nav li { 
	display: inline;
	position: relative;
	font-family: 'Avenir-Black', Arial, sans-serif;
}

ul#main-nav-list
{
 white-space:nowrap;
 width:100%;
 display: flex;
  align-items: stretch; /* Default */
  justify-content: space-between;
 /*table-layout: fixed;*/
}

#main-nav ul ul {
	position: absolute;
	left: 0;
	top: 100%;
	visibility: hidden;
	opacity: 0;
	transition: visibility 0.5s, opacity 0.5s linear;
}

#main-nav ul li 
{
  display: block;
  flex: 0 1 auto; /* Default */
	text-align:center;
}

#main-nav ul li:last-child {
    padding-right:0;
}

#main-nav ul li a {
	text-decoration: none;
	color: #777777;
	cursor: pointer;
	text-transform: uppercase;
	font-size:11px;
	font-family: 'Avenir-Black', Arial, sans-serif;
	vertical-align: middle;
}

#main-nav ul ul li {
	display:block;
	padding-top: 15px;
	margin-left: 2.2vw;
}

#main-nav ul ul li a {
	white-space: nowrap;
	text-transform: none;
}

#main-nav li:hover a {
  background: #2b2171; /* Old browsers */
  background: -moz-linear-gradient(left, #2b2171 0%, #0f7087 50%, #00b189 100%); /* FF3.6-15 */
  background: -webkit-linear-gradient(left, #2b2171 0%,#0f7087 50%,#00b189 100%); /* Chrome10-25,Safari5.1-6 */
  background: linear-gradient(to right, #2b2171 0%,#0f7087 50%,#00b189 100%); /* W3C, IE10+, FF16+, Chrome26+, Opera12+, Safari7+ */
  filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#2b2171', endColorstr='#00b189',GradientType=1 ); /* IE6-9 */

  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
  display:inline; /* Needed for Safari */


  /* Temp fix for IE */
  color:white;
}

#main-nav li:hover ul { /* when list items are hovered over, do this to lists contained within them... */
	visibility: visible;
	opacity: 1;
	transition: visibility 0.5s, opacity 0.5s linear;
}

#main-nav ul li img {
	vertical-align: middle;
	height:18px;
	border: 1px solid #cdcdcd;
}


#pageDivider
{
  float:left;
  
  /*
  background: #2b2171;
  background: -moz-linear-gradient(left, #2b2171 0%, #0f7087 50%, #00b189 100%);
  background: -webkit-linear-gradient(left, #2b2171 0%,#0f7087 50%,#00b189 100%);
  background: linear-gradient(to right, #2b2171 0%,#0f7087 50%,#00b189 100%);
  filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#2b2171', endColorstr='#00b189',GradientType=1 );

  background-repeat: no-repeat;
  background-size: contain;
*/

  background-image: url("Images/siteContentDivider.png");  
  width:2px;
  height:95%;
  background-size: 100% 100%;
}


/*
03 Right column
---------------------------------------------------------------------------------------------------- */

#right-column
{
  float:right;
  width:17%;
  height:100%;
  -ms-overflow-style: none;
}

.rightBarContentScroll
{
 overflow: scroll;
 height:100%;
 -ms-overflow-style: none;
}

#right-column::-webkit-scrollbar, .rightBarContentScroll::-webkit-scrollbar { width: 0 !important; }

#right-column, .rightBarContentScroll { overflow: -moz-scrollbars-none; }

#right-column table
{
  margin-bottom:35px;
  width:98%;
  margin-left:auto;
  margin-right:auto;
  border-collapse: collapse;
}

#right-column table thead
{
  background: #2b2171; /* Old browsers */
  background: -moz-linear-gradient(left, #2b2171 0%, #0f7087 50%, #00b189 100%); /* FF3.6-15 */
  background: -webkit-linear-gradient(left, #2b2171 0%,#0f7087 50%,#00b189 100%); /* Chrome10-25,Safari5.1-6 */
  background: linear-gradient(to right, #2b2171 0%,#0f7087 50%,#00b189 100%); /* W3C, IE10+, FF16+, Chrome26+, Opera12+, Safari7+ */
  filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#2b2171', endColorstr='#00b189',GradientType=1 ); /* IE6-9 */
}

#right-column table thead th
{
  padding: 8px 5px;
  font-size:16px;
  color: White;
  font-weight: normal;
  border-radius:10px;
}

#right-column table tr td
{
  padding: 3px 2px;
  vertical-align:middle;
}

.right-col-divider
{
  height:1px;
  background: #2b2171; /* Old browsers */
  background: -moz-linear-gradient(left, #2b2171 0%, #0f7087 50%, #00b189 100%); /* FF3.6-15 */
  background: -webkit-linear-gradient(left, #2b2171 0%,#0f7087 50%,#00b189 100%); /* Chrome10-25,Safari5.1-6 */
  background: linear-gradient(to right, #2b2171 0%,#0f7087 50%,#00b189 100%); /* W3C, IE10+, FF16+, Chrome26+, Opera12+, Safari7+ */
  filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#2b2171', endColorstr='#00b189',GradientType=1 ); /* IE6-9 */
  padding: 0!important;
}

#social-media-links {
	width:100%;
}

#social-media-links td {
	text-align: center;
}

#social-media-links img
{
  height:30px;
  cursor: pointer;
}

#social-media-links img:hover
{
 opacity:0.9; 
}

#right-column ul
{
  list-style-type:none;
  margin-bottom: 40px;
  text-align: center;
}

#right-column ul li 
{
 display:inline;
 padding: 0px 2px 0px 2px;
}

#chatHolder 
{
  position: fixed;
  top: 230px;
  right: 19vw;
  width: 30vw;
  display:none;
}

#chatHolder table 
{
 border-collapse: collapse;
}

#chatHolder table tr th 
{
  border-bottom-left-radius: 0px;
  border-bottom-right-radius: 0px;
}

table#chatBodyTable 
{
  max-height: 34vh;
  display: block;
  overflow: auto;
}

#chatHolder button 
{
  margin-top:10px; 
}

#chatHolder tr.content-row {
 background: rgba(255,255,255,0.96);
}

#chatHolder table tr th, #chatHolder table tr td
{
 padding: 10px 15px;
}

#chatHolder table tr td 
{
  text-align:left;
}

#chatHolder table tr td:first-child 
{
 width:20%; 
}

.chatbotMessageInputHolder 
{
  text-align:right !important; 
}

#closeChatScreen 
{
 cursor:pointer; 
}

/*
03.1 Sliding panels
---------------------------------------------------------------------------------------------------- */
#geniePanelBTN 
{
  width:100%;
  cursor:pointer;
  border-radius:15px;
}

#claimsPanelBTN, #checkCoverPanelBTN, #trainingAndCompliance, #cpuDirectPanelBTN, #myGenieAppPanelBTN {
	cursor: pointer;
}

#cpuDirectPanelBTN 
{
  background: #b92018;
  background: -moz-linear-gradient(left, #b92018 0%, #eb7602 50%, #fdc400 100%);
  background: -webkit-linear-gradient(left, #b92018 0%,#eb7602 50%,#fdc400 100%);
  background: linear-gradient(to right, #b92018 0%,#eb7602 50%,#fdc400 100%);
  filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#b92018', endColorstr='#fdc400',GradientType=1 ); 
}

	#cpuDirectPanelBTN a, #myGenieAppPanelBTN a
	{
		text-decoration: none;
		font-size: 16px;
		color: #FFF;
	}

.shimmer {
	color: grey;
	-webkit-mask: linear-gradient(-60deg,#000 30%,#0005,#000 70%) right/300% 100%;
	background-repeat: no-repeat;
	animation: shimmer 2.5s infinite;
}

@keyframes shimmer {
	100% {
		-webkit-mask-position: left
	}
}

div.right-bar-sliding-panel input
{
  border: 1px solid #009f90;
  border-radius: 20px;
  padding: 3px 5px;
  width:90%;
  margin-bottom:4px;
}

div.right-bar-sliding-panel a 
{
 width:90% !important; 
}

div.right-bar-sliding-panel
{
  background-image: url("Images/BubbleBackground_Resized.jpg") !important;
  background-size: 250%;
 /* position:absolute;   - Add this back for boxes to overlap rather than slide content down*/
  padding-top: 15px;
  z-index: 9999;
  text-align: center;
  display:none;
  width:100%;
  border-bottom-left-radius: 10px;
  border-bottom-right-radius: 10px;
}

/*
04 Page Content
---------------------------------------------------------------------------------------------------- */

#page-content-container{
	width: 100%;
}

.content-pane {
	height: 83vh;
	/*height: calc(100vh - 300px);*/
  overflow-y: auto;
	overflow-x: hidden;
	-ms-overflow-style: none;
	padding-bottom:100px;
	overflow: -moz-scrollbars-none;
}

.content-pane::-webkit-scrollbar { width: 0 !important; }
.content-pane { overflow: -moz-scrollbars-none; }


.content-pane h1
{
  font-family: 'Avenir-Heavy', Arial, sans-serif;
  font-size:37px;
  /*margin-bottom: 5vh;*/
  margin-bottom: 30px;
}

#cpuDirectSectonHeading 
{
  font-family: 'Avenir-Heavy', Arial, sans-serif !important;
  font-size:29px !important;
  margin-bottom:5px;
}

#cpuDirectSectonSubHeading
{
  font-family: 'Avenir-Heavy', Arial, sans-serif !important;
  font-size: 13px !important;
}

.content-pane h2 {
	  font-family: 'Avenir-Heavy', Arial, sans-serif;
    font-size: 20px;
}

.content-pane h2
{
 margin-bottom: 17px; 
}

.content-pane ul li
{
	list-style-type: disc !important; 
	margin-left: 5%;
  padding-left: 1%;
}

.content-pane p, .content-pane ul, .content-pane li {
	font-family: 'Avenir-Roman', Arial, sans-serif;
	margin-bottom: 15px;
	font-size: 13px;
}

.content-pane p.contentParagraphLarge, .content-pane p.contentParagraphLargeScrollContent
{
  font-family: 'Avenir-Heavy', Arial, sans-serif;
  font-size: 29px !important;
}

.content-pane p.contentParagraphLarge 
{
  margin-bottom: 40px;
}

.content-pane p.contentFootnote 
{
  font-size: 11px;
}

.content-pane a {
	color: #0069b4;
}
	
.contentPanePositionIndicator {
	float:right;
	padding-top:20vh;
	margin-left:5px;
	z-index: 1;
}

.contentPanePositionIndicator div {
	height:10px;
	width:10px;
	background-image: url("Images/contentNavBullet.png");
	background-repeat: no-repeat;
  background-size: contain;
	margin-bottom:4vh;
	opacity: 0.4;
    filter: alpha(opacity=40); /* msie */
}

div.contentPaneSelected {
	opacity:1;
	height:12px;
	width:12px;
	-webkit-transition: all 0.7s ease;
    -moz-transition: all 0.7s ease;
    -o-transition: all 0.7s ease;
    transition: all 0.7s ease;
}

.content-pane hr 
{
  margin: 35px 0; 
}

.content-pane img
{
  max-width:100%;
  margin:10px 0px;
}

#contentDownArrow 
{
  cursor: pointer;
  position: absolute;
  bottom: 36px;
  margin-left: -14px;
}

div.newContentSection, div.contentSpacer
{
 height:30px; 
}

.educationAppScreenshot
{
  width: 28%;
}

.appStoreBTN
{
  width:200px; 
}

/* THe wrappers below make youtube video and google maps resize dynamically */

.videoWrapper {
	position: relative;
	padding-bottom: 56.25%; /* 16:9 */
	padding-top: 25px;
	height: 0;
	overflow:hidden;
	margin-bottom:40px;
}

.videoWrapper iframe {
	position: absolute;
	top: 0;
	left: 0;
	width: 100%;
	height: 100%;
	overflow:hidden;
}

.googleMapsWrapper 
{
    top: 11px;
    position: relative;
    padding-bottom: 75%; /* This is the aspect ratio*/
    height: 0;
    overflow: hidden;
}
.googleMapsWrapper iframe {
    position: absolute;
    top: 0;
    left: 0;
    width: 100% !important;
    height: 100% !important;
}

#contactUsLogo 
{
 width:30%;
 margin-right: 3%; 
}

.contactUsLogoAccuro {
	width: 30%;
	margin-right: 3%;
}

.divider, hr
{
  height:2px;
  padding: 0!important;
  width:100%;
  margin: 10px 0;
}

#ExtraInfoPane
{
  height:50px;
  width:100%;
  color:White;
  font-size: 19px;
  padding: 12px 10px 0 10px;
  cursor:pointer;
  border-radius:10px;
}

.warning, .redWarning, .success
{
 font-weight:bold; 
}

.redWarning 
{
 color:Red; 
}

.success 
{
  color: #0f9d58;
}

#footer 
{
  font-size:11px !important;
  position: relative;
  bottom: 0px;
  padding-right: 30px;
  margin-top:50px;
}

#registerHeadHolder
{
	position:absolute;
	left:8%;
	top:102px;  
}

/*
05 Mobile Menu
---------------------------------------------------------------------------------------------------- */

#mobile-menu-button {
	background-image: url("Images/cpu_logo_mobile.png");
	background-repeat: no-repeat;
    background-size: contain;
	height: 100px;
	width: 100px;
	margin:0 auto;
}

#mobile-menu-button {
	float:left;
	cursor:pointer;
}

#mobile-social-media-links {
	float:right;
	height:100px;
}

#mobile-social-media-links td
{
  vertical-align:middle;
  text-align:center;
  padding-left:10px;
}

#mobile-social-media-links img {
	height:20px;
}

/*
06 Mobile Optimisation
---------------------------------------------------------------------------------------------------- */

.showOnMobile
{
 display:none; /* hides mobile only elements by default */ 
}

/* Screen width <= 1220, bumps the flags up so more room for nav */
@media screen and (max-width: 1219px) 
{
  #flags {
		  position: absolute !important;
      top: -30px;
	}
	
	#main-nav {
    margin-bottom: 77px;
	}
}

@media screen and (max-width: 994px) 
{
  #flags {
		  position: absolute !important;
      top: -30px;
	}
}

/* Screen width <= 935, switch to Mobile Nav, first section resets menus if we go back above screen width */

@media screen and (min-width: 1070px) {
	#main-nav {
		display:block;
	}
	
	#mobile-menu, #rightSidebarBTN {
		display:none;
	}
}

@media screen and (max-width: 1069px) {
	#main-nav, #pageDivider {
		display:none;
	}
	
	#right-column 
	{
    position: fixed;
    top:0;
    right: -30%;
    width:30%;
    float:none;
    background: rgba(250,247,245,1);
    height:100%;
    border-left:1px solid grey;
	}
	
	.rightColClose 
	{
	  right: -30%;
	  -webkit-transition: all 0.5s ease;
    -moz-transition: all 0.5s ease;
    -o-transition: all 0.5s ease;
    transition: all 0.5s ease;
	}
	
	.rightColOpen 
	{
	  right: 0% !important;
	  -webkit-transition: all 0.5s ease;
    -moz-transition: all 0.5s ease;
    -o-transition: all 0.5s ease;
    transition: all 0.5s ease;
	}
	
	.rightBarContentScroll 
	{
	 margin-top:-21px; 
	}
	
	#rightSidebarBTN
	{
	  position: relative;
    top: 46%;
    left: -30px;
    width: 30px;
    height: 60px;
    cursor: pointer;
    font-family: 'Avenir-Heavy', Arial, sans-serif;
    font-size: 46px;
    background-image: url("Images/SlideArrow.png");
    background-size: contain;
    background-repeat: no-repeat;
	}
	
	#rightSidebarBTN:hover
	{
    opacity:0.9;
	}
	
	#right-column table 
	{
	  width:93%;
	}
	
	#chatHolder 
	{
	 right:30vw;
	 width: 45vw;
	}
	
	#mobile-menu {
		display:block;
	}
	
	#container
	{
	  padding: 10px 5px 0px 5px;
	}
	
	#left-column
	{
	 width:100%;
	 padding:0;
	 margin:0;
	}
	
	#left-column-inner-left 
	{
	  width:44%;
	  padding: 0 1%;
	}
	
	#left-column-inner-right {
    width: 55%;
  }
  
  .content-pane p.contentParagraphLarge
  {
    margin-bottom: 3vw;
    font-size:28px;
  }
	    
	#page-content-container 
	{
	 padding-right:30px; 
	}
	
	#registerHeadHolder
	{
    left: 1%;
    top: 159px; 
	}
	
	.widerContentView 
	{
	  width: 66% !important;
	}
	
	#siteFooter ul li 
	{
    display: block;
    width: 100% !important;
    text-align: center !important;
	}
	
	#siteFooter 
	{
	 overflow-y:scroll;
	}
}

/* Screen size < 650, removes the main image from the screen. Generally only used for a mobile device */

@media screen and (max-width: 649px) 
{

  button
  {
    width: 100%;
  }
  
  #left-column-inner-left, #registerHeadHolder
  {
   display:none;
  }
  
  #right-column
	{
	 width:50%;
	 right: -50%;
	}
	
	#chatHolder 
	{
	 right:50vw;
	 width: 50vw;
	}
  
  .showOnMobile 
  {
   display:block; 
  }
  
  #left-column-inner-right, widerContentView, #two-col-form-left-col, #two-col-form-right-col
  {
   width:100% !important; 
  }
  
  #two-col-form-right-col 
  {
   float:left; 
  }
  
  body 
  {
    background-image:none !important;
  }
  
  #contentDownArrow 
  {
    display: none !important; 
  }


  /*.content-pane
  {
   height:57vh; 
  }*/
  
  .content-pane p.contentParagraphLarge, .content-pane p.contentParagraphLargeScrollContent 
  {
   font-size: 27px !important; 
  }
  
  #ExtraInfoPane
  {
    height: 40px;
    font-size: 13px;
  }
  
}

/* Screen size < 489, resizes caht holder to spreadh across screen. Generally only used for a mobile device */

@media screen and (max-width: 489px) 
{
  #chatHolder 
	{
	 right:3vw;
	 width: 94vw;
	}
}

/* Screen size < 349, resizes the right sidebar to stretch across screen. Generall only used for a mobile device */

@media screen and (max-width: 349px) 
{
  #right-column
	{
	 width:90%;
	 right: -90%;
	}
}

/* Screen widths over 1500px, */

@media screen and (min-width: 1500px) {
	#main-nav ul li a {
		font-size:13px;
	}

	#cpuDirectPanelBTN a, #myGenieAppPanelBTN a
	{
		font-size: 21px;
	}
	
	#main-nav 
	{
	 margin-bottom:82px; 
	}

	.content-pane p, .content-pane ul, .content-pane li, .content-pane a, #left-column p, #right-column table tr td, #right-column table tr td b, #right-column table tr td a, #right-column button,
	.tableStyle1 td, .tableStyle1 th, .tableStyle1 b, .webFormTable td, .webFormTable th, .webFormTable b, .webFormTable label, #right-column table tr td p, .content-pane b {
		font-size: 14px;
	}
	
	.content-pane h1 {
		font-size:40px;
	}
	
	.content-pane p.contentParagraphLarge, .content-pane p.contentParagraphLargeScrollContent 
  {
   font-size: 34px !important; 
  }
	
	.contentPanePositionIndicator {
    padding-top: 15vh;
	}
	
	#right-column table thead th, #closeChatScreen {
    font-size: 21px;
  }
  
  #right-column table 
  {
   margin-bottom:50px; 
  }
  
  #left-column-inner-right {
    width: 39%;
  }
  
  #main-nav ul li img 
  {
   height: 22px; 
  }
  
  #contactUsLogo 
  {
   width:28%;
   margin-right: 3%; 
  }

	.contactUsLogoAccuro {
		width: 28% !important;
		margin-right: 3% !important;
	}

	#cpuDirectSectonHeading {
		font-family: 'Avenir-Heavy', Arial, sans-serif !important;
		font-size: 34px !important;
		margin-bottom: 10px;
	}

  #cpuDirectSectonSubHeading
  {
    font-family: 'Avenir-Heavy', Arial, sans-serif !important;
    font-size: 18px !important;
  }
  
  /*
  .content-pane {
	  height: 88%;
  }*/
}

/* Screen widths over 1700px, */

@media screen and (min-width: 1700px) {
	
	#main-nav ul li a {
		font-size:14px;
	}
	
	#right-column ul li {
    padding: 0px 10px 0px 10px;
  }
  
  #left-column-inner-right {
    width: 43%;
  }
  
.content-pane p.contentParagraphLarge {
    font-size: 36px !important;
  }
}

/* height smaller than 750px 

@media screen and (max-height: 580px) {
	.content-pane {
		height: 50vh;
	}
}
*/
/*
07 Debug Panel (Set to display:none; to disable JS debugging functions)
---------------------------------------------------------------------------------------------------- */

/* setting display: none; Will hide panel and stop the debug JS running*/
#debugPanel {
	display:none;
	position:absolute;
	right:0;
	top:0;
	font-family: arial;
}

/*
08 Mobile Menu
---------------------------------------------------------------------------------------------------- */

#mobile-menu {
	font-family: 'Avenir-Roman', Arial, sans-serif;
}

#mobileMenuBTN {
	font-family: 'Avenir-Heavy', Arial, sans-serif;
	font-size:22px;
	cursor:pointer;
}

#mobile-menu-list-holder {
	display:none;
    position: absolute;
    width: 98%;
    background-color: #f5f5f5;
	z-index: 2;
}

#mobile-menu ul {
	list-style-type:none;
	margin-left:5px;
}

#mobile-menu hr 
{
 margin: 5px 0;
}
 
#mobileNavList li
{
  line-height:2.5em;
  cursor: pointer;
}

#mobileNavList a 
{
 text-decoration:none;
 color:inherit; 
}

#mobileNavList > li > a:before
{
  content: "";
  position: absolute;
  width: 30px;
  height: 30px;
  z-index: -1;
  background: url(Images/next-page_icon.png) 0 0 no-repeat;
  right: 0px;
  -webkit-transition: all 0.5s;
  -moz-transition: all 0.5s;
  -ms-transition: all 0.5s;
  -o-transition: all 0.5s;
  transition: all 0.5s;
  background-size:30px;
}
 
.mobileNavList-icon-animation:before {
  -webkit-transform: rotate(90deg);
  -moz-transform: rotate(90deg);
  -ms-transform: rotate(90deg);
  -o-transform: rotate(90deg);
  transform: rotate(90deg);
}
 
a.hide-nav-background:before
{
  background-image: none !important;
}
 
a.mobileNavRemoveBgImageOverride:before
{
  background-image: none !important;
}
 
#mobile-menu-list-holder a
{
   padding: 5px 0;
   display:block;
   border-bottom: 1px solid #ababab;
   background-repeat:no-repeat;
   background-position:right 10px;
   background-size:30px;
   font-size:14px;
}
 
#mobile-menu-list-holder li ul li
{
  font-weight:normal;
  padding-left:10px;
}


/*
09 Buttons
---------------------------------------------------------------------------------------------------- */

.buttonType1, .buttonType2mobile, .buttonType1NoHover {
  background: #83d0f5;
}

.buttonType1:hover, .buttonType2mobile:hover
{
  background: #02a9eb;
}

.buttonType1, .buttonType2, .buttonType1NoHover {
  position: relative;
  overflow: hidden;
  height:8vh;
  width:8vh;
  display: inline-block;
  border-radius: 4vh;
  color: #fff;
  text-decoration: none;
  text-align: center;
  padding: 20px 2px 0px 2px;
  font-size: 11px;
  font-weight:bold;
  text-align:center;
  cursor:pointer;
}

.buttonType2 
{
  background: #2b2171; /* Old browsers */
  background: -moz-linear-gradient(left, #2b2171 0%, #0f7087 50%, #00b189 100%); /* FF3.6-15 */
  background: -webkit-linear-gradient(left, #2b2171 0%,#0f7087 50%,#00b189 100%); /* Chrome10-25,Safari5.1-6 */
  background: linear-gradient(to right, #2b2171 0%,#0f7087 50%,#00b189 100%); /* W3C, IE10+, FF16+, Chrome26+, Opera12+, Safari7+ */
  filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#2b2171', endColorstr='#00b189',GradientType=1 ); /* IE6-9 */
}


.buttonType2mobile 
{
  position: relative;
  overflow: hidden;
  width: 60px;
  height: 60px;
  display: inline-block;
  border-radius: 30px;
  color: #fff;
  text-decoration: none;
  text-align: center;
  padding: 17px 2px 0px 2px;
  font-size: 9px;
  font-weight: bold;
  text-align: center;
  cursor: pointer;
}

/**
 * The "shine" element
 */

.buttonType1:after, .buttonType2:after, .buttonType2mobile:after, .buttonType3:after, .buttonType4:after {
  content: "";
  position: absolute;
  top: -110%;
  left: -210%;
  width: 200%;
  height: 200%;
  opacity: 0;
  transform: rotate(30deg);
  
  background: rgba(255, 255, 255, 0.13);
  background: linear-gradient(
    to right, 
    rgba(255, 255, 255, 0.13) 0%,
    rgba(255, 255, 255, 0.13) 77%,
    rgba(255, 255, 255, 0.5) 92%,
    rgba(255, 255, 255, 0.0) 100%
  );
}

/* Hover state - trigger effect */

.buttonType1:hover:after, .buttonType2:hover:after, .buttonType2mobile:hover:after, .buttonType3:hover:after, .buttonType4:hover:after {
  opacity: 1;
  top: -30%;
  left: -30%;
  transition-property: left, top, opacity;
  transition-duration: 0.7s, 0.7s, 0.15s;
  transition-timing-function: ease;
}

/* Active state */

.buttonType1:active:after, .buttonType2:active:after, .buttonType2mobile:active:after, .buttonType3:active:after, .buttonType4:active:after {
  opacity: 0;
}

.buttonType3, .buttonType4, .buttonType4NoHover
{
  position: relative;
  overflow: hidden;
  background-repeat: no-repeat;
  background-size: contain;
  height:9vh;
  width:9vh;
  display: inline-block;
  cursor:pointer;
}

#checkYourCover 
{
  background-image: url("Images/Check_Your_Cover.png");
}

#claimsAndTracking 
{
  background-image: url("Images/Claims_And_Tracking.png");
}

#loginToGenie 
{
  background-image: url("Images/Log_In_To_Genie.png");
}

#genieButton, .genieButton
{
  background-image: url("Images/GenieButton.png");
}

#mobileLearningBTN, #iprotectBTN
{
  height:11vh;
  width:11vh;
}

#mobileLearningBTN 
{
  background-image: url("Images/CPU_ML_Logo.png");
}

#iprotectBTN 
{
  background-image: url("Images/iProtectLogo.png");
}

.PDFbutton, #right-column button
{
  background-image: url("Images/PDFbutton.png");
  background-repeat: no-repeat;
  background-size: 100% 100%;
  display: inline-block;
  text-align: center;
  color:White !important;
  text-decoration:none;
  padding: 4px 0;
  width: 45%;
  margin-bottom:15px;
  max-width: 230px;
  font-family: 'Avenir-Roman', Arial, sans-serif;
}

#chatBotUserButton 
{
  padding-top:3.2vh;
}

/*
10 Forms
---------------------------------------------------------------------------------------------------- */

#two-col-form-left-col
{
  width:49%;
  float:left;
}

#two-col-form-right-col
{
  width:49%;
  float:right;
}

table.webFormTable
{
  width:100%;
}

table.webFormTable tr td, table.inputForm tr td
{
 vertical-align: middle;
 padding-bottom: 20px;
 position:relative;
}

table.webFormTable input, table.genieLoginTable input, select, textarea, input#chatInputBox, table.inputForm input
{
  border: 1px solid #b1b1b3;
  border-radius: 20px;
  padding: 3px 5px;
  width:100%;
}

textarea 
{
 height:95px;
 font-family: 'Avenir-Roman', Arial, sans-serif;
}

table.webFormTable select, table.genieLoginTable select, table.inputForm select {
    height: 22px;
    background: #b1b1b3;
    padding: 0px 6px;
}

table.webFormTable label, table.genieLoginTable, table.inputForm label
{
 padding-right:10px;
}

button 
{
  background: #097bf7;
  border:none;
  padding: 6px 18px;
  color:White;
  border-radius:20px;
  font-family: 'Avenir-Heavy', Arial, sans-serif;
  font-size:10px;
  cursor:pointer;
  white-space: nowrap;
}

button:hover
{
 opacity:0.9; 
}

.extraFields 
{
 display:none; 
}

div.formFieldCaution
{
  position: absolute;
  left: -33px;
  top: 0px;
  z-index:999;
}

div.formFieldCaution img
{
 height:22px;
 margin:0px;
}

div.formFieldCaution span
{
 display:none; 
}

.fieldErrorSpan
{
 border:1px solid red; 
}

/*
11 Tables
---------------------------------------------------------------------------------------------------- */

.tableAlignLeft th,
.tableAlignLeft td 
{
  text-align:left;
}

.tableAlignCenter th,
.tableAlignCenter td 
{
  text-align:center;
}

.tableAlignRight th,
.tableAlignRight td 
{
  text-align:right;
}

.tableValignTop th,
.tableValignTop td 
{
  vertical-align:top;
}

.tableValignMiddle th,
.tableValignMiddle td 
{
  vertical-align:middle;
}

.tableValignBottom th,
.tableValignBottom td 
{
  vertical-align:bottom;
}

.tableStyle1 td, .tableStyle1 th
{
 padding-right:10px; 
}

/*
12 More info iframe
---------------------------------------------------------------------------------------------------- */

.moreInfoIframeHolder
{
  position:relative;
}

#morInfoIframe
{
  width:100%;
  position: absolute;
  bottom:0;
  display:none;
}

body#moreInfoBody
{
  background-image: url("Images/BubbleBackground_Resized.jpg") !important;
  background-size: 100%;
}

#moreInfoSection 
{
 padding:10px; 
}

#moreInfoSection p
{
  margin-bottom:15px
}

#moreInfoSection .PDFbutton 
{
 display:block;
 width:100%;
}

/*
13 Claim iframe
---------------------------------------------------------------------------------------------------- */

ul#claimTypeList
{
 margin-bottom:25px;
 list-style-type: none;
}

ul#claimTypeList li
{
  padding: 15px 10px 15px 0;
  border-bottom: 1px solid #ccc;
  cursor:pointer;
  list-style-type: none !important;
  margin:0;
}

#claimTypeList li:hover
{
  background-color: #ccc;
  -webkit-transition: all 0.3s ease;
  -moz-transition: all 0.3s ease;
  -o-transition: all 0.3s ease;
  transition: all 0.3s ease;
}

#claimTypeList li:before {
    content: "";
    border-style: solid;
    border-width: 8px 0 8px 14px;
    border-color: transparent transparent transparent #258bc2;
    width: 0;
    height: 0;
    display: block;
    float: left;
    margin-left: 5px;
    margin-right:13px;
}

#claimFormBackBTN 
{
 float:right;
 margin-top:10px; 
}

.claimFormIframe 
{
 width:100%;
 height:100%;
}

#standaloneClaimContainer .webFormTable tr td:first-child, table.inputForm tr td:first-child
{
 width:100%; 
}


#standaloneClaimContainer input[type=text],
#standaloneClaimContainer input[type=date],
#standaloneClaimContainer input[type=submit],
#standaloneClaimContainer select,
#standaloneClaimContainer button,
#standaloneClaimContainer textarea {
	border: 1px solid #5d5d5d;
	border-radius: 8px;
	padding: 5px 20px;
	height: 50px;
	font-size: 14px;
	width: 100%;
}

#standaloneClaimContainer textarea 
{
  height:100px !important; 
}

/* One off to adjust the font size of the claim form, as it is iframed it won't follow the other media queries as the scrren size will be the ifram size */
@media screen and (min-height: 700px) {
	#standaloneClaimContainer, #standaloneClaimContainer p, #standaloneClaimContainer .webFormTable input,
	.webFormTable .inputFormLabel div, #standaloneClaimContainer li, #standaloneClaimContainer a, #standaloneClaimContainer .webFormTable td,
	#standaloneClaimContainer b, #standaloneClaimContainer textarea, #standaloneClaimContainer .tableStyle1 td, #standaloneClaimContainer .tableStyle1 th
	 {
		  font-size: 14px !important;
	}
}

.excessWarning 
{
  margin-bottom:10px !important; 
}

#claimFormMoreInfoSection 
{
  display:none;
}

/*
14 Training Module
---------------------------------------------------------------------------------------------------- */

.genieInsurtechDefaultBG 
{
  background: #412660; /* Old browsers */
  background: -moz-linear-gradient(left,  #412660 0%, #9975ad 49%, #9f7db7 100%); /* FF3.6-15 */
  background: -webkit-linear-gradient(left,  #412660 0%,#9975ad 49%,#9f7db7 100%); /* Chrome10-25,Safari5.1-6 */
  background: linear-gradient(to right,  #412660 0%,#9975ad 49%,#9f7db7 100%); /* W3C, IE10+, FF16+, Chrome26+, Opera12+, Safari7+ */
  filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#412660', endColorstr='#9f7db7',GradientType=1 ); /* IE6-9 */
}

#arPageContainer 
{
  width:100%;
  margin: 0 auto;
  background:#f9f9f9;
}

.standaloneTrainingContainer
{
  background-image: url('images/bokeh_large.jpg');
  padding: 0 5vw 50px 5vw;
  display: grid;
}

#trainingHomeTopBar 
{
  width:100%;
  /*height:14.6vw;*/
  background-position: 0% 48%;
  background-image: url('images/bokeh_large.jpg');
  background-size: 100%;
  padding-bottom: 1vh;
}

#cpuSolutionsLogo
{
  height:11vw;
  margin-top: 0.8vw;
}

#cpuSolutionsLogoInsideTraining
{
  max-height:165px;
  /*display:block;
  margin:5px auto 0 auto;*/
  height: 11vw;
  min-height: 141px;
}

/* Wrapper is set to same width as login box to get the CPU logo dead center */
#selectLanguageWrap
{
  /*width: 321px;
  float: left;
  text-align:left;*/
}

#selectLanguage
{
  color: white;
  margin-top: 6.9vw;
  padding: .3vw;
  width:18vw;
  position: relative;
  bottom: 5.3vw;
}

#selectLanguage option 
{
  color:Black;
}

#PasswordInput, #LoginPassword
{
  background-image: url("images/fieldBGpassword.png");
}

#UsernameInput, #LoginUsername
{
  background-image: url("images/fieldBGusername.png");
}

#PasswordInput, #UsernameInput, #LoginUsername, #LoginPassword
{
  background-repeat: no-repeat;
  background-size: contain;
  background-position: -1px 0;
  padding: 3px 5px 3px 32px;
  border: 1px solid #b1b1b3;
  border-radius: 20px;
}

.trainingRegBTN 
{
  width: 110px;
  height: 27px;
}

#homeScreenTopBarTable 
{
  width: 100%;
}

#homeScreenTopBarTable td 
{
  width:33.33%; 
}

#topBarLoginTable 
{
  display: block;
  position: absolute;
  right: 10px;
  top: 4.2vw;
  max-width: 355px;
}

#forgotPass 
{
  font-size: 11px;
  color: #087af7;
  font-weight: bold;
  text-decoration: none;
  padding-left:3px;
}

#rememberMe 
{
  background-image: url("images/BTN_RememberMeTick.png") !important;
  height:20px;
  width:20px;
  background-size: 100% 100% !important;
  display:block;
}

#loginOptions > *
{
  display:inline-block !important;
}

#loginOptions p
{
  color: #8a8989;
  padding-left:3px;
  font-size:11px;
}

#trainingMainImage {
  background-image: url(Images/trainingHomeMainImg_Cropped.jpg);
  height: 23vw;
  background-size: 100%;
}

#trainingMainImageMobile
{
  background-image: url(Images/trainingHomeMainImg_Cropped_Mobile.jpg);
  height: 24vw;
  background-size: 100%;
}

#registerHeading h1
{
  font-size: 3.4vw;
  color: #241770;
  margin-bottom:5px;
}

#trainingMainImage h1, #trainingMainImageMobile h1
{
  white-space: nowrap;
  position: relative;
  left: 27.1vw;
  font-size: 3.4vw;
  line-height: 1.1;
  color: #241770;
  top:4vw;
}

#trainingMainImage a, #trainingMainImageMobile a 
{
  text-decoration:none;
}

#trainingModuleSelectHolder
{
  top: 5vw;
  position: relative;
  width: 31vw;
  left: 27.1vw;
}

#traingRequestACallDiv 
{
  margin: 0 auto;
  display: inline-block;
}

#traingRequestACallDiv p
{
  font-size: 2vw;
  margin: 1vw 0;
}

.callLogo 
{
  width: 10vw;
  padding: 0 2vw;
}

.callLogoText 
{
  font-size: 1.5vw !important;
}

#goToCPUimg 
{
  margin-top: 1vh;
  float: right;
  margin: 2vw 8vw 1vw 0;
  width: 20vw; 
}

#enterBTN, #enterBTNMobile
{
  font-size: 1.6vw;
  width: 9vw;
  color: white;
  text-align: center;
  position: relative;
  left: 27.4vw;
  top: 6vw;
  border-radius: 15px;
  border: 1px solid white;
  height: 3vw;
  padding-top: .3vw;
  cursor: pointer;
  
  -webkit-box-shadow: 2px 2px 7px 0px rgba(0,0,0,0.51);
  -moz-box-shadow: 2px 2px 7px 0px rgba(0,0,0,0.51);
  box-shadow: 2px 2px 7px 0px rgba(0,0,0,0.51);
}


.loginWarning
{
  position: relative;
  top: 6.4vw;
  font-size:15px;
  left: 27.4vw;
}

.loginWarningMobile 
{
  position: relative;
  top: 4.4vw;
  font-size:14px;
  width:100%;
  text-align:center;
}

#enterBTN:hover
{
  color: #241770;
}

.training-content-pane 
{
  padding: 0 2vw;
  /*height:auto !important;*/
  height:73vh;
}

#traningHomeFooter 
{
 width:100%;
 padding: 1vw 27.1vw;
 color:White;
}

#traningHomeFooter a 
{
  color:White;
  text-decoration:none;
  font-weight:bold;
  font-size: .8vw;
}

#traningHomeFooter p
{
  font-size: .8vw;
  margin-bottom: 3vh;
}

#poweredByGenie
{
 font-size:1.5vw !important; 
}

#trainingModulesTopBar 
{
  margin-bottom:5px;
}

#trainingModulesTopBar td p
{
  font-size:1.4em;
  font-size:14px;
}

#trainingModulesTopBar td 
{
  width:33.33%;
  vertical-align:bottom;
}

.imgContent, .modalImageHandlerImage 
{
  display: block;
  margin: 0 auto !important;
  border: 1px solid #000;
  border-radius: 10px;
}

#trainingModulesQandA td {
  padding: 10px 15px 10px 0px;
}

#trainingModulesQandA td input {
  margin-bottom: 10px;
}

#mobileLoginBTN 
{
  position: relative;
  right: 1vw;
  text-align: right;
  top: -4vw;
  font-size: 6vw;
  cursor: pointer;
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
}

/*
14.1 Training Mobile Optimisations
---------------------------------------------------------------------------------------------------- */
@media screen and (max-width: 1299px) 
{ 
  #topBarLoginTable {
    /*top: 7.5vw;*/
  }
}

@media screen and (max-width: 999px) 
{ 
  #topBarLoginTable {
    /*top: 6.7vw;
    display:none;*/
    top: 3vw;
    max-width: 315px;
  }
}

@media screen and (min-width: 931px) 
{
   #mobileLoginBTN 
  {
    display:none; 
  }
}

@media screen and (max-width: 930px) 
{ 
  #topBarLoginTable 
  {
    right:0;
    display:none;
  }
  
  #selectLanguage 
  {
    width: 23vw;
  }
  
  #mobileLoginBTN 
  {
    display:block; 
  }
  
  #topBarLoginTable {
    top: 15vw;
    background: #412660; /* Old browsers */
    background: -moz-linear-gradient(left,  #412660 0%, #9975ad 49%, #9f7db7 100%); /* FF3.6-15 */
    background: -webkit-linear-gradient(left,  #412660 0%,#9975ad 49%,#9f7db7 100%); /* Chrome10-25,Safari5.1-6 */
    background: linear-gradient(to right,  #412660 0%,#9975ad 49%,#9f7db7 100%); /* W3C, IE10+, FF16+, Chrome26+, Opera12+, Safari7+ */
    filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#412660', endColorstr='#9f7db7',GradientType=1 ); /* IE6-9 */
  }
}

@media screen and (min-width: 800px) 
{
  .training-show-on-mobile
  {
    display:none; 
  }
  
  .training-hide-on-mobile
  {
    display:block; 
  }
}

@media screen and (max-width: 799px) 
{ 
  #selectLanguageWrap
  {
    /*display:none;*/
  }
  
  .standaloneTrainingContainer
  {
    padding: 0 10px 20px 10px;
  }
  
  .training-show-on-mobile
  {
    display:block; 
  }
  
  .training-hide-on-mobile
  {
    display:none; 
  }
  
  #trainingMainImageMobile h1 
  {
    font-size: 5.4vw;
    left:0;
    text-align:center;
    top: 2vw;
  }
  
  #trainingHomeTopBar
  {
    height: 14.6vw;
  }
  
  #cpuSolutionsLogo 
  {
    height: 11vw;
  }
  
  #cpuSolutionsLogoInsideTraining
  {
    height: 11vw;
    margin: 5px auto 0px auto;
    min-height: 100px;
  }
  
  #enterBTNMobile 
  {
    margin: 0 auto;
    width: 13vw;
    height: 4.6vw;
    top: 4vw;
    left:0;
    font-size: 2.8vw;
  }
  
  #traingRequestACallDiv p {
    font-size: 4vw;
  }
  
  .callLogo {
    width: 14vw;
    padding: 0 2vw;
  }

  .callLogoText {
    font-size: 2vw !important;
  }
  
  #goToCPUimg {
    margin-top: 1vh;
    float: right;
    margin: 2vw 8vw 1vw 0;
    width: 33vw;
  }
  
  #traningHomeFooter {
    padding: 1vw 1vw;
  }
  
  #poweredByGenie
  {
   font-size:3vw !important;
  }
  
  #traningHomeFooter p, #traningHomeFooter a {
    font-size: 1.4vw;
  }
  
  #trainingModulesTopBar td p
  {
    font-size:1.3em;
    font-size:13px;
  }
  
  #topBarLoginTable {
    top: 5.1vw;
  }
  
  #topBarLoginTable {
    top: 14.6vw;
    z-index:1;
  }
}

@media screen and (max-width: 499px) 
{ 
  #topBarLoginTable 
  {
     width:240px;
  }
  
  .trainingRegBTN {
    width: 73px;
    height: 20px;
    padding-top: 3px;
  }
  
  #PasswordInput, #UsernameInput, #LoginUsername, #LoginPassword 
  {
    font-size: 10px;
  }
  
  #rememberMe
  {
    height: 15px;
    width: 15px;
  }
  
  .loginOptionCell
  {
    padding-top:1px !important; 
  }
  
  #trainingHomeTopBar
  {
    height: 25.6vw;
    padding-top: 2vw;
  }
  
  #cpuSolutionsLogo 
  {
    float: left;
  }
  
}

/*
15 Genie login page
---------------------------------------------------------------------------------------------------- */

#genieLoginBody
{
 overflow-y:auto;
 overflow-x:hidden;
}

#genieLoginContainer 
{
  width: 90%;
  margin: 20px auto 0px auto;
  font-size: 13px;
}

#genieLoginTopBar 
{
 width:100%;
}

#genieLoginTopBar a 
{
 text-decoration:none; 
}

#genieLogo 
{
  width:100%;
  max-width: 600px;
  padding-left: 30px;
  padding-right:20px;
}

#cpuLogo 
{
  width:25%;
  margin-bottom:20px;
  max-width:150px;
}

#genieLoginArrowRight 
{
 height:45px;
 margin-right:10px;
}

#backToCpu
{
  float: right;
  text-align:right;
}

#backToCpu img 
{
  width:38%;
  cursor:pointer;
}

#genieLoginImageRow img
{
  width:33.33%;
  display:inline; 
}

#loginContent 
{
  padding-top:40px;
}

#loginContentTable 
{
 width:100%;
 margin-top:40px;
}

#loginContent h1
{
  font-family: 'Avenir-Roman', Arial, sans-serif;
  font-size: 1.7em;
  line-height: 1.1;
}

.genieLoginTable
{
  text-align:left;
  width:100%;
}

table.genieLoginTable tr td 
{
  padding:5px;
  vertical-align: middle;
}

.genieLoginIcon 
{
  height:45px;
}

.appStoreIcon 
{
  height:45px; 
}

.genie-footer 
{
  font-size:11px;
}

@media screen and (max-width: 1215px) 
{ 
  .genieLoginTable
  {
   text-align:left;
  }
}

/*
15.1 Genie login page (mobile)
---------------------------------------------------------------------------------------------------- */

#loginContentTableMobile button
{
   width:100%;
}

#loginContentTableMobile img 
{
 margin-bottom:20px; 
}

#loginContentTableMobile 
{
 text-align:center;
 display:none; 
}

@media screen and (max-width: 800px) 
{ 
  
  #loginContentTableMobile 
  {
   display:block; 
  }
  
  #loginContentTableMobile button
  {
    padding: 10px 17px;
  }

	#genieLoginImageRow, #loginContent h1, #backToCpu, #genieLoginTopBar, #loginContentTable, #loginContent, #GenieAccuroLoginDefault {
		display: none;
	}
  
  #genieLogo
  {
    width:70%;
  }
}

  .fullContentView
  {
    width:100%!important;
  }

.formsize td:first-child 
  {
    width: 70%;
  }


#complaintsBody {
  overflow-y: auto;
  -ms-overflow-style: none; /* IE and Edge */
  scrollbar-width: none; /* Firefox */
}
#complaintsBody::-webkit-scrollbar {
  display: none;
}

/* Form Styles, remove TD's */
table.webFormTable, table.webFormTableV2 {
  width: 100%;
}

  table.webFormTable tr td {
    vertical-align: middle;
  padding: 15px,30px;
  }

  table.webFormTable tr td:nth-child(2), table.webFormTable tr td:nth-child(2) * {
    width: 65%;
  }

  table.webFormTableV2 tr td:nth-child(2) {
    width: 100%;
    padding-bottom: 20px !important;
  }

  /* Protects nested tables from the rule above */
  table.webFormTableV2 tr td table tr td:nth-child(2) {
    width: auto;
  }

  table.webFormTableV2 tr td:nth-child(1) {
    display: none;
  }


/* Protects nested tables from the rule above */
table.webFormTableV2 tr td table tr td:nth-child(1), table.claimFormTable tr td table tr td:nth-child(1) {
	display: block;
}

table.claimFormTable {
	border-collapse: collapse;
}

.claimFormTable .inputFormLabel {
	padding-top:15px;
}

.claimFormTable .inputFormHeader {
	padding: 10px 0px 0px 0px;
}

table.webFormTableV2 input[type=text],
table.webFormTableV2 input[type=password],
table.webFormTableV2 input[type=date],
table.webFormTableV2 input[type=submit],
table.webFormTableV2 select,
table.webFormTableV2 button,
table.webFormTableV2 textarea,
#trainingModuleSelectHolder select {
	border: 1px solid #b1b1b3;
	border-radius: 8px;
	padding: 5px 10px;
	height: 45px;
	font-size: 13px;
	width: 100%;
}

  table.webFormTableV2 select {
    background-color: #ffffff;
  }


  table.webFormTableV2 textarea {
    height: 100px !important;
  }

/*
15.2 Genie login Accuro
---------------------------------------------------------------------------------------------------- */

div#GenieAccuroLoginForm {
	text-align: right;
	position: relative;
	top: -6.9vw;
}

#genieLogoAccuro {
	height: 20vw;
}

#GenieAccuroLoginForm input[type=text],
#GenieAccuroLoginForm input[type=password],
#GenieAccuroLoginForm button,
#loginContentTableMobile input[type=text],
#loginContentTableMobile input[type=password],
#loginContentTableMobile button {
	border: 1px solid #b1b1b3;
	border-radius: 25px;
	padding: 5px 20px;
	height: 3vw;
	font-size: 17px;
	margin-bottom: 1.6vw;
}

#loginContentTableMobile input[type=text],
#loginContentTableMobile input[type=password],
#loginContentTableMobile button {
	min-height: 50px;
}

#GenieAccuroLoginForm input[type=text] {
	width: 67%;
}

#GenieAccuroLoginForm input[type=password] {
	width: 80%;
}

#GenieAccuroLoginForm button{
	width:100%;
}

#GenieAccuroLoginMyGenieAppTbl {
	width:61%;
	margin:0 auto;
}

#GenieAccuroLoginMyGenieAppTbl td {
	text-align:center;
}

.GenieAccuroAppStoreLogo {
	width: 18.2vw;
}

#GenieAccuroLoginMyGenieAppTbl td {
	font-size:1.5em;
}

#GenieAccuroLoginMyGenieAppTbl td h1 {
	font-size: 2.3em;
}