:root {
	--transactionBannerActiveColour: #83919F;
	--transactionBannerInactiveColour: #ADBECF;
}

@media only screen and (max-device-width: 1025px) {
	body #table-container {
		margin: 0;
	}
}

form:not([onsubmit*='SmartLink'])
{
	padding: 0 0.5em;
}

.paging img {
	height: 25px;
	width: 25px;
}

/* table with border at bottom and padded */

table.data {
	padding-right:2px; padding-left:2px; padding-top:2px; padding-bottom:2px;
}
table.button {
	padding-right:2px; padding-left:2px; padding-top:2px; padding-bottom:2px; Xborder-bottom:#cccccc 1px solid; border-top:#cccccc 1px solid;
}
table.dataWithBorder {
	padding-right:2px; padding-left:2px; padding-top:2px; padding-bottom:2px; border-bottom:#cccccc 1px solid; border-top:#cccccc 1px solid;
}

.table-striped {
	width: 100%;
	padding-bottom: 2%;
	& tbody {
		> tr:nth-child(odd) > td {
			background-color: #5d5d5d29;
		}
		>
		tr:nth-child(odd) > th {
			background-color: #5d5d5d5e;
			text-align: center;
			color: black;
			font-weight: bold;
		}
		& td {
			text-align: center;
		}
		& #actions {
			font-weight: bold;
			text-align: left;
			& a {
				color: #000000;
			}
			& a:hover {
				color: #000000;
				text-decoration: underline
			}
		}
	}
}

#table-container {
	display: flex;
	justify-content: center;
	margin-left: 25%;
	margin-right: 25%;
}

/* table used in banner */
table.banner {
        padding-right:5px; padding-top:10px; padding-bottom:6px; background-color:#333366;
}

table.banner td {
    vertical-align: top;
}
BODY {
	margin:0px; font-family: "Lucida Sans Unicode", "Lucida Grande", sans-serif;
    overflow: auto;
}
INPUT {
	font-family:verdana,arial,helvetica; font-size:8pt; color:#0000ff;
}

INPUT.redPassword{
	border : 3px solid #FF0000;
}

SELECT {
	font-family:verdana,arial,helvetica; font-size:8pt; color:#0000ff;
}
TEXTAREA {
	font-family: inherit;
	font-size: 0.875rem;
	color: rgba(0, 0, 0, 0.75);
	border: 1px solid #cccccc;
}
H1 {
	font-size:125%; margin-top:5px; margin-left:2px; margin-bottom:5px;
}
HR {
	color:#cccccc;
    border-left: none;
    margin: 10px 0;
}
HR.grayLine {
	color:#cccccc;
}
HR.blackLine {
    border: none;
    border-bottom: 1px solid #000000;
    padding: 3px 0;
    margin: 1px 0 5px 0;
}
A {
        text-decoration:none; font-family:verdana,arial,helvetica; font-size:9pt;
}
A.sched {
        text-decoration:none; font-family:verdana,arial,helvetica; font-size:100%;
}
TH {
	text-align:left; font-size:11px; font-weight:normal; color:#000000; padding: 2px 0;
}
A.normal
{
	font-size:100%; font-family:verdana,arial,helvetica; color:#000080;
}
TD, th, th label {
	font-size:12px;
	color: #4d4d4d;
}
/* td header for summary screens */
TD.conhead {
	font-size:11px; font-weight:bold; border-width: 0 0 1 0; padding:0 0 2 0; padding-top:5px; padding-bottom:5px;
}
/* td for summary screens */
TD.con {
	font-size:11px; color:#0000ff; padding:2 0 2 0;
}
/* td for non-editable fields */
TD.data {
	font-size:11px; color:#000080;
}
/* mandatory field colour */
.m {
	background-color:#dffff3;
}
/* destin8 image background colour */
.img {
        background-color:#333366;
}
/* main screen background colour */
.main {
        background-color:#FFFFFF;
}
/* arrows on summary screens */
INPUT.arrow {
	font-family:\'wingdings 3\'; font-size:16; height:15pt;
}
/* calander */
SPAN.cal {
	font-family:webdings; cursor:pointer;
}
/* multiple html boxes */
SPAN.box {
	font-family:symbol; cursor:pointer;
}
/* calander */
TABLE#tcal {
	font-size:100%;
}
/* calander */
TABLE#tcal TD {
	font-size:100%;
}
/* table used in vwn to hide tabs that are not selected in tabbed table */
TABLE.sub {
	display:none;
}
/* tabbed table vwn */
#tabmenu {
	padding-left:10px; z-index:1; margin:10px 0px 0px; border-bottom:#cccccc 1px solid;
}
/* list vwn */
#tabmenu LI {
	display:inline; overflow:hidden; list-style-type:none; cursor:default;
}
/* A vwn */
#tabmenu A {
	border-right:#cccccc 1px solid; padding-right:5px; border-top:#cccccc 1px solid; padding-left:5px; padding-bottom:0px; margin:0px; border-left:#cccccc 1px solid; padding-top:5px; border-bottom:#cccccc 1px solid; background-color:#cccccc; text-decoration:none;
}
/* A active vwn */
#tabmenu A.active {
	border-bottom:#FFFFFF 1px solid; background-color:#FFFFFF;
}
/* A hover vwn */
#tabmenu A:hover {
	color:#fff;
}
/* A Active hover vwn */
#tabmenu A.active:hover {
	color:#d3dbcb;
}
/* tabbed table content vwn */
#content {
	border-right:#cccccc 1px solid; padding-right:20px; border-top:medium none; padding-left:20px; z-index:2; padding-bottom:20px; border-left:#cccccc 1px solid; padding-top:20px; border-bottom:#cccccc 1px solid;
}
/* tabbed table content A vwn */
#content A {
	color:#e8e9be; text-decoration:none;
}
/* tabbed table content A hover vwn */
#content A:hover {
	background-color:#898b5e;
}
/* alternate colur 1 on a summary screen */
.con0 {
        background-color:#f1f1f1;
}
/* alternate colur 2 on a summary screen */
.con1 {
        background-color:#FFFFFF;
}
/* top bar background and text colour */
.topbar {
	background-color: var(--transactionBannerActiveColour);
	font-weight: bold;
	border-radius: 0 0 5px 5px;
	color: #FFFFFF;
	height: 20px;
	width: 100%;
	padding: 0 10px;
}

.topbar.inactive {
	background-color: var(--transactionBannerInactiveColour);
}

.topbar td {
	font-size: 12px;
	color: white;
}
/* banner main title */
.maintitle {
        text-decoration:none; font-weight:bolder; color:#FFFFFF; font-family:verdana,arial,helvetica; font-size:16pt;
}
/* banner clock */
.clock {
        text-decoration:none; font-weight:bolder; color:#FFFFFF; font-family:verdana,arial,helvetica; font-size:10pt;
}
/* menu header option colour */
A.topMenu {
        font-size:8pt; font-family:verdana,arial,helvetica;
}
/* menu option colour */
.menu {
        font-size:8pt; cursor:pointer;
}
/* legal on menu bar */
.legal {
        font-size:8pt; color:#4169E1;
}
/* info on menu bar */
.info {
        text-decoration:none; font-family:verdana,arial,helvetica; font-size:8pt; color:#000000;
}
/* menu bar */
.menus {
        background-color:#6699CC; text-decoration:none; font-family:verdana,arial,helvetica; font-size:9pt; color:#000000; padding:5px;
}
/* menu option colour */
#menus A {
	color:#000000;
}
/* menu option colour */
#menus A:hover {
	color:#CC0000;
}


/* banner menu option colour */
#print TD {
	font-family:verdana,arial,helvetica; font-size:8pt; font-weight:bold; color:#FFFFFF;
}
TABLE.tbSum2 {
        color:#0000ff;background:#f1f1f1;padding:0 2 2 2;margin:6 4 4 4;border-color:#f1f1f1;
}
.tbSum0 {
        background:#f2f3dc;
}
.tbSum1 {
        background:#FFFFFF;
}
TD.tdSmlb {
        color:#000080;
}
TD.tdSmnm {
        font:bold 8pt verdana;color:#000080;border-width:0 1 1 0;border-style:solid;border-color:white
}
fieldset {
        font-size:8pt; font-weight:bold; font-family:verdana,arial,helvetica; border-left:none; border-right:none; border-size: 1pt
}
.rowData0 {
        background-color:#DFFFF3;
}
.rowData1 {
        background-color:#FFFFFF;
}

A.link {
	color:#000080;
}

/* Used in conjuction with formatUCN js method. Once ucn is split each part is written
   in a span with a margin-right instead of a space.*/
.formatUCN {
    margin-right: 5px;
}

.sortable span {
    float:left;
    padding:5px;
    margin:5px;
    background-color:#EEEEEE;
    cursor:move;
}

.sortable span {
    float:left;
    padding:5px;
    margin:5px;
    background-color:#EEEEEE;
    cursor:move;
}

a.unselectedHyperlink:hover {
    text-decoration: underline;
    color: #2E9AFE;
    font-weight: bold;
    font-size: 100%;
}


.unselectedHyperlink {
   font-size:100%;
   font-family:verdana,arial,helvetica;
   font-weight: bold;
   color:#000080;

}

.selectedHyperlink  {
   text-decoration: underline;
   color: #2E9AFE;
    font-weight: bold;
   font-size: 100%;
}

#calendarDiv{
	position:absolute;
	width:205px;
	border:1px solid #333366;
	padding:1px;
	background-color: #FFF;
	font-family:arial;
	font-size:10px;
	padding-bottom:20px;
	visibility:hidden;
}
#calendarDiv span{
	float:left;
}
#calendarDiv .selectBox,#calendarDiv .selectBoxOver{

	line-height:12px;
	padding:1px;
	cursor:pointer;
	padding-left:2px;
}

#calendarDiv .selectBoxTime,#calendarDiv .selectBoxTimeOver{
	line-height:12px;
	padding:1px;
	cursor:pointer;
	padding-left:2px;
}

#calendarDiv td{
	padding:3px;
	margin:0px;
	font-size:10px;
}


#calendarDiv .selectBox{
	border:1px solid #cccccc;
	color: #cccccc;
	position:relative;
}
#calendarDiv .selectBoxOver{
	border:1px solid #FFF;
	background-color: #333366;
	color: #FFF;
	position:relative;
}
#calendarDiv .selectBoxTime{
	border:1px solid #333366;
	color: #333366;
	position:relative;
}
#calendarDiv .selectBoxTimeOver{
	border:1px solid #333366;
	color:#333366;
	position:relative;
}

#calendarDiv .calTopBar{
	height:16px;
	padding:2px 0px 2px 0px;
	background-color:#333366;


}
#calendarDiv .activeDay{	/* Active day in the calendar */
	color:#FF0000;
}
#calendarDiv .todaysDate{
	height:17px;
	line-height:17px;
	padding:2px;
	background-color:#E2EBED;
	text-align:center;
	position:absolute;
	bottom:0px;
	width:201px;
}
#calendarDiv .todaysDate div{
	float:left;
}

#calendarDiv .timeBar{
	height:17px;
	line-height:17px;
	background-color: #6699CC;
	width:72px;
	color:#FFF;
	position:absolute;
	right:0px;
}

#calendarDiv .timeBar div{
	float:left;
	margin-right:1px;
}


#calendarDiv .monthYearPicker{
	background-color:#333366;
	border:1px solid #AAAAAA;
	position:absolute;
	color: #cccccc;
	left:0px;
	top:15px;
	z-index:1000;
	display:none;

}
#calendarDiv #monthSelect{
	width:70px;
}
#calendarDiv .monthYearPicker div{
	float:none;
	clear:both;
	padding:1px;
	margin:1px;
	cursor:pointer;
}
#calendarDiv .monthYearActive{
	background-color:#333366;
	color: #FFF;
}

#calendarDiv td{
	text-align:right;
	cursor:pointer;
}

#calendarDiv .calTopBar img{
	cursor:pointer;
}
#calendarDiv .calTopBar div{
	float:left;
	margin-right:1px;
}

/*-------------------------------------------Rip off of Jquery Mobile Loader---------------------------------*/
.ui-loader-default {
    background: none repeat scroll 0 center #ADD8E6;
    opacity: 0.18;
}

.ui-loader {
    border: 0 none;
    position: fixed;
    top: 0;
    bottom: 0;
    left: 0;
    right: 0;
    z-index: 9999999;
}

.ui-loader .ui-icon-loading {
    background-color: #000000;
    border-radius: 2.25em;
    height: 46px;
    margin: 25% auto auto;
    padding: 0.0625em;
    width: 46px;
    display: block;
}

/*.ui-icon-loading {    
    background: repeat scroll 0 0 / 2.875em 2.875em rgba(0, 0, 0, 0);
}*/

/*used on new SGN page*/

.topDiv {
    position: absolute;
    height: 110px;
    border: none;
    left: 0;
    right: 0;
}

.leftTitleDiv {
    bottom: 0;
    cursor: pointer;
    left: 10px;
    position: absolute;
    top: 0;
    width: 200px;
}

.middleTitleDiv {
    bottom: 0;
    left: 200px;
    position: absolute;
    right: 250px;
    top: 15px;
}

.rightTitleDiv {
    bottom: 0;
    position: absolute;
    right: 40px;
    top: 0;
}

.mainTitleGradient {
    font-size: 25px;
    color: #333366;
}

.envTitle {
	visibility: visible;
}

@media screen and (max-width: 780px) {
	.envTitle {
		visibility: hidden;
	}
}

.frontCMSFrame
{
    height: 400px;
    width: 100%;
}

.mainContent {
    bottom: 0;
    position: absolute;
    top: 110px;
    left: 0;
    right: 0;
}

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

.labelsSGN02 {
	width: 33.33%;
	text-align: left;
	padding: 10px 0 20px 0;
}

.memPhraseInputCell {
    width: 33.33%;
}

@media screen and (max-width: 650px) {
    .emptySpaceToTheRight {
        display: none;
    }
    .memPhraseInputCell, .labelsSGN02 {
        width: 100%;
    }
}

.memPhrase-form-container {
	background-color: #023859;
	padding: 30px;
	border-radius: 10px;
	width: 100%;
	max-width: 670px;
	min-height: 380px;
	text-align: center;
	box-shadow: 0 4px 8px rgba(0, 0, 0, 0.2);
	box-sizing: border-box;
	margin: 0 auto;
}

@media screen and (max-width: 600px) {
	.memPhrase-form-container {
		padding: 20px;
	}
}

.signin {
	background: linear-gradient(
			to right,
			#02133D 0%,
			#00466B 100%
	);
}

.signinText {
	color: #FFFFFF !important;
	font-family: 'DM Sans', 'Roboto', sans-serif;
	font-size: 16px;
}

.signinBtnText {
	color: #FFFFFF !important;
	font-family: 'Roboto', sans-serif;
	font-size: 14px;
}

.help-tooltip {
	position: fixed;
	bottom: 85px;
	right: 20px;
	font-size: 32px;
	color: #00B0F0;
	z-index: 1000;
	text-decoration: none;
}

@media screen and (max-width: 390px) {
    .help-tooltip {
        bottom: 105px !important;
    }
}

.help-tooltip .tooltip-text {
	visibility: hidden;
	width: auto;
	background-color: #FFFFFF;
	color: #000;
	text-align: center;
	border-radius: 6px;
	padding: 8px 12px;
	position: absolute;
	bottom: 45px;
	right: 0;
	font-size: 14px;
    font-weight: 300;
    box-shadow: 0px 0px 6px rgba(0,0,0,0.2);
    white-space: normal;
}

.help-tooltip .tooltip-text::after {
	content: "";
	position: absolute;
	top: 100%;
	right: 10px;
	margin-left: -5px;
	border-width: 5px;
	border-style: solid;
	border-color: #E6F0FA transparent transparent transparent;
}

.help-tooltip:hover .tooltip-text {
	visibility: visible;
}

.failIconNewColor {
	color: #FF0000;
}

.failTextNewColor {
	color: #E02E2E;
}

.successIconNewColor, .successTextNewColor {
	color: #00A800;
}

input:not([type="submit"]):not([type="checkbox"]):not([type="button"]):not([type="radio"]):not([type="reset"]) {
	-moz-appearance: none;
	border-color: #cccccc;
	border-radius: 0;
	border-style: solid;
	border-width: 1px;
	box-shadow: 0 1px 2px rgba(0, 0, 0, 0.1) inset;
	box-sizing: border-box;
	color: rgba(0, 0, 0, 0.75);
	display: inline-block;
	font-family: inherit;
	font-size: 0.875rem;
	height: 1.8rem;
	margin: 0.2rem 0 0 0;
	padding: 0.5em;
	transition: border-color 0.15s linear 0s, background 0.15s linear 0s;
	width: auto;
}

input:not([type="submit"]):not([type="checkbox"]):not([type="button"]):focus, textarea:focus {
		outline: 1px solid #999999;
}


button, input[type="submit"], input[type="button"], input[type="reset"] {

	background: #5A86B9;
	color: white;
	border: 0 solid #007095;
	border-radius: 3px;
	cursor: pointer;
	display: inline-block;
	font-family: "Helvetica Neue", Helvetica, Roboto, Arial, sans-serif;
	font-weight: normal;
	line-height: normal;
	//padding: 0.5rem 1.2rem 0.6rem;
	padding: 0.7em 1.6em 0.8em;
	font-size: 0.9em;
	margin: 0;
	position: relative;
	text-align: center;
	text-decoration: none;
	transition: background-color 300ms ease-out 0s;
}

button, input[type="submit"]:hover, input[type="button"]:hover {
	    background-color: #007095
}


select {
	border-radius: 0;
	background-position: 100% center;
	background-repeat: no-repeat;
	border-style: solid;
	border-width: 1px;
	border-color: #cccccc;
	color: rgba(0, 0, 0, 0.75);
	font-family: inherit;
	font-size: 0.875rem;
	line-height: normal;
	padding: 0.2rem;
	height: 2em;
	margin: 0 0 0.2rem;

}

.shortWindow input:not([type="submit"]):not([type="checkbox"]):not([type="button"]):not([type="radio"]):not([type="reset"]), .shortWindow select {
	height: 1.8em;
	padding: 0 2px 0 2px;
	font-size: 1em;
	margin-bottom: 0;
	margin-top: 0;
}

.shortWindow td, .shortWindow th {
	padding-bottom: 0;
	margin-bottom: 0;

}

td br:only-child {
	display: none;

}

th {
	padding-bottom: 0;

}

.error {
	background-color: #F5DBDB !important;
	border: 1px solid red !important;

}

input[type="checkbox"].error{
	outline: 2px solid red !important;
}

td.signonTD, td.signonHeading {
	font-size: 0.9em;
	padding-left: 50px;
	padding-bottom: 10px
}
.showRed {
	color: red;
}

#holdInfoLarge{
	height: 220px;
	width: 100%;
	max-width: 500px;
	max-height: 400px;
}

#holdInfoSmall{
	height: 60px;
	width: 100%;
	max-width: 800px;
	max-height: 150px;
}

#holdInfo{
	position: relative;
	top: -7px;
}

#holdInfoIcon{
	position: relative;
	bottom: -8px;
	height: 25px;
	width: 25px
}

/* css for HALO integration */

/* Override the chat widget's container position */
.chat-holder {
	right: 40px !important;
	bottom: 34px !important;
}

@media screen and (max-width: 390px) {
    .chat-holder {
        bottom: 54px !important;
    }
}

/* Resize the circular chat icon */
.chat-profile-circle {
	font-size: 18px !important;
}

.halo-chat-greeting {
	right: 120px !important;
	bottom: 90px !important;
}

@media (max-width: 1160px) {
	.halo-chat-greeting {
		display: none !important;
	}
}

/* Initially hide the chat circle icon */
.halo-chat-bot .chat-circle {
	visibility: hidden;
}

.chat-icon {
	width: 32px;
	height: 32px;
	transform: scaleX(1.03125) scaleY(1.15625);
	transform-origin: center center;
	display: block;
	margin: auto;
}
.eye-color {
	margin-left: -55px;
	margin-top: 8px;
	position: absolute;
	-webkit-mask-size: cover;
	mask-size: cover;
	-webkit-mask-image: url("/img/eye-regular.svg");
	mask-image: url("/img/eye-regular.svg");
	background-color: #FFFFFF;
	width: 23px;
	height: 20px;
}

.restyleButton:hover {
	background-color: #6A6A6A !important;


}

.restyleButton{
	background: #2C2C2C !important;
	border-radius: 4px !important;
	padding: 10px !important;
	width: 150px !important;
	font-size: 14px !important;
}

.disabledPWR{
	background-color: #023859;
	color: white !important;
}


@media screen and (max-width: 740px) and (min-height: 315px) {
    .pwr02Label {
        padding-left: 20px !important;
    }
}

@media screen and (max-width: 375px) and (max-height: 667px) {

	.mainContent{
		overflow-y: auto !important;
		height: 100% !important;
	}

	#termsNoForm{
		padding: 40px 0 !important;
	}

	#pwr01Panel{
		width: 360px !important;
		height: 390px !important;
	}

	.pwr02Label{
		width: 200px !important;
        padding-left: 0 !important;
	}

	#pwrWarning{
		padding: 0 10px 10px 10px !important;
	}

	.pwr02Panel{
		margin-top: 4% !important; ;
		width: 360px !important;
		height: 390px !important;
	}

	#pwrEnterText{
		text-align: left !important;
		padding-left: 5px !important;
		padding-right: 0 !important;
	}

	img.cross, img.tick{
		position: absolute !important;
		margin-top: 12px !important;
		margin-left: -30px !important;
	}

	.pwr01Text{
		font-size: 12px !important;
		padding-left: 20px !important;
	}


	#confirmTD{
		max-width: 100% !important;
	}

	.pwrSubmit{
		width: 150px !important;
		margin-top: 20px !important;
		padding: 0.7em 1.6em 0.8em !important;
		margin-left: -25px !important;
	}

	.pwr02Submit{
		width: 150px !important;
		padding: 0.7em 1.6em 0.8em !important;
		margin-top: 30px !important;
		margin-right: -15px !important;
	}

	#pwrDetailsTable{
		margin-top: 0 !important;
		padding-top: 0 !important;
	}

	#responseIconTD{
		width: 25% !important;
	}

	.eye-color {
		position: absolute !important;
		margin-top: 10px !important;
		margin-left: -60px !important;
	}

	#belowResponse{
		margin-top: 0 !important;
	}

	 #pwrUsername{
		width: 70% !important;
	}

	#idPassword, #idConfirmation{
		width: 33ch !important;
	}

	#pwrCompanyLabel, #pwrUsernameLabel{
		width: 225px !important;
	}
}

@media screen and (min-width: 300px) and (max-width: 500px) and (min-height: 450px) and (max-height: 800px) {
    .pwr02Label{
        width: 200px !important;
        padding-left: 20px !important;
    }
}

@media screen and (min-width: 450px) and (max-width: 740px) and (max-height: 700px){
    .pwr02Panel{
        margin-top: 15% !important;
        width: 450px !important;
        height: 400px !important;
    }

    .pwr02Label {
        padding-left: 75px !important;
    }

    .pwr02Submit {
        margin-top: 25px !important;
    }
}

@media screen and (max-width: 768px) and (min-height: 700px){

	.pwr01Panel{
		height: 440px !important;
		margin-top: 15% !important;
		width: 350px !important;

	}
	.pwr02Panel{
		margin-top: 15% !important;
		width: 350px !important;
		height: 400px !important;

	}

	.pwr02Label{
        width: 327px !important;
    }

	.mainContent{
		overflow-y: auto !important;
	}

	img.cross, img.tick{
		position: absolute !important;
		margin-top: 12px !important;
		margin-left: -30px !important;
	}

	.pwr01Text{
		font-size: 12px !important;
		padding-left: 20px !important;
	}


	#confirmTD{
		max-width: 100% !important;
	}

	.pwrSubmit{
		width: 150px !important;
		margin-top: 20px !important;
		padding: 0.7em 1.6em 0.8em !important;
		margin-left: -25px !important;
	}

	.pwr02Submit{
		width: 150px !important;
		padding: 0.7em 1.6em 0.8em !important;
		margin-top: 20px !important;
		margin-right: -15px !important;
	}

	#pwrDetailsTable{
		margin-top: 0 !important;
		padding-top: 0 !important;
	}

	#responseIconTD{
		width: 25% !important;
	}

	.eye-color {
		position: absolute !important;
		margin-top: 10px !important;
		margin-left: -60px !important;
	}

	#belowResponse{
		margin-top: 0 !important;
	}


	#idPassword, #idConfirmation{
		width: 33ch !important;
	}

	#pwrCompanyLabel, #pwrUsernameLabel{
		width: 225px !important;
	}

	#pwr02Return{
		padding-top: 40px!important;
	}
}

@media screen and (max-width: 540px) and (max-height: 1000px){
	.pwr01Panel{
		height: 440px !important;
        min-height: 480px;
		margin-top: 7% !important;
		width: 360px !important;

	}
	.pwr02Panel{
		margin-top: 7% !important;
		width: 320px !important;
		height: 400px !important;

	}

	#pwr02Return{
		padding-top: 20px!important;
	}

	#pwrEnterText{
		text-align: left !important;
		padding-left: 5px !important;
		padding-right: 0 !important;
	}

	img.cross, img.tick{
		position: absolute !important;
		margin-top: 12px !important;
		margin-left: -30px !important;
	}

	.pwr01Text{
		font-size: 12px !important;
		padding-left: 20px !important;
	}


	#confirmTD{
		max-width: 100% !important;
	}

	.pwrSubmit{
		width: 150px !important;
		margin-top: 20px !important;
		padding: 0.7em 1.6em 0.8em !important;
		margin-left: -25px !important;
	}

	.pwr02Submit{
		width: 150px !important;
		padding: 0.7em 1.6em 0.8em !important;
		margin-top: 20px !important;
	}

	#pwrDetailsTable{
		margin-top: 0 !important;
		padding-top: 0 !important;
	}

	#responseIconTD{
		width: 25% !important;
	}

	.eye-color {
		position: absolute !important;
		margin-top: 10px !important;
		margin-left: -60px !important;
	}

	#belowResponse{
		margin-top: 0 !important;
	}

	#pwrUsername{
		width: 70% !important;
	}

	#idPassword, #idConfirmation{
		width: 33ch !important;
	}

	#pwrCompanyLabel, #pwrUsernameLabel{
		width: 225px !important;
	}
}

@media screen and (max-width: 344px) and (max-height: 882px){

	.pwr01Panel{
		height: 440px !important;
		margin-top: 15% !important;
		width: 95% !important;
	}

	.pwr02Panel{
		height: 440px !important;
		margin-top: 15% !important;
		width: 95% !important;
	}
}

@media screen and (min-width: 1024px){
    .pwr02Label {
        padding-left: 135px !important;
    }

    .pwr02Submit {
        margin-left: 130px !important;
    }
}

@media screen and (min-width: 740px) and (max-width: 1024px) {

	#panel{
		height: 400px !important;
		width: 740px !important;
		margin-top: 5% !important;
	}

    .pwr02Submit {
        margin-left: 85px !important;
    }

    .pwr02Panel {
        height: 400px !important;
        width: 540px !important;
        margin-top: 5% !important;
    }

    .pwr02Label {
        padding-left: 85px !important;
    }

	.eye-color {
		position: absolute !important;
	}

	img.tick, img.cross{
		position: absolute !important;
	}
}

@media screen and (min-width: 1290px) {

	#panel .pwr02Panel{
		width: 670px !important;
	}

}

@media  screen and (min-height: 700px) {

	#belowResponse{
		margin-top: 20px !important;
	}

}

@media print {

    TH {
        font-size: 9px
    }

    td.DATA {
        font-size: 9px;
    }

    .button {
        display: none;
    }
}