/******* DOM CSS Structure *******/

/*** Reset CSS ***/
html, body, div, span, object, iframe,
h1, h2, h3, h4, h5, h6, p, blockquote, pre,
abbr, address, cite, code,
del, dfn, em, img, ins, kbd, q, samp,
small, strong, sub, sup, var,
b, i,
dl, dt, dd, ol, ul, li,
fieldset, form, label, legend,
table, caption, tbody, tfoot, thead, tr, th, td,
article, aside, canvas, details, figcaption, figure, 
footer, header, hgroup, menu, nav, section, summary,
time, mark, audio, video {
    margin: 0;
    padding: 0;
    border: 0;
    outline: 0;
    font-size: 100%;
    vertical-align: baseline;
    background: transparent;
}
h1, h2, h3, h4, h5, h6 {
    font-weight: bold;
    line-height: normal !important;
    color: #1C3A45;
}
body {
    margin: 0 auto;
    padding: 0;
    line-height: 1;
	font-family: Tahoma,Geneva,sans-serif !important; /* added for the fonts 28/07/2015 --previous it was helvetica,*/
}
article,aside,details,figcaption,figure,
footer,header,hgroup,menu,nav,section { 
	display: block;
}
nav ul {
    list-style: none;
}
blockquote, q {
    quotes: none;
}
blockquote:before, blockquote:after,
q:before, q:after {
    content: '';
    content: none;
}
a {
    margin: 0;
    padding: 0;
    font-size: 100%;
    vertical-align: baseline;
    background: transparent;
    text-decoration:none;/*added to remove underline 27/7/2015*/
    /*color:#fff !important;*/ /* to adjust color on collapsible menu 31/07/2015 */
}
ins {
    background-color: #ff9;
    color: #000000;
    text-decoration: none;
}
mark {
    background-color: #ff9;
    color: #000; 
    font-style: italic;
    font-weight: bold;
}
del {
    text-decoration:  line-through;
}
abbr[title], dfn[title] {
    border-bottom: 1px dotted;
    cursor: help;
}
table {
    border-collapse: collapse;
    border-spacing: 0;
}
hr {
    border-top-width: 1px;
	border-top-style: solid;
	border-right-style: none;
	border-bottom-style: none;
	border-left-style: none;
	border-top-color: #EEEEEE;
	clear: both!important;
    margin-top: 20px;
	margin-bottom: 10px;
}
input, select {
    vertical-align: middle;
    font-size: 15px !important; /*added to increase font size in login page 04/08/2015 */
}
/*** Reset CSS ***/

/*** Common CSS ***/
.floatLeft {
    float: left;
}
.floatRight {
    float: right;
}
.mainContainer {
    color: #333333 !important;
}
.ui-btn-left > .ui-btn-up-f > .ui-btn-inner {
    background: none !important;
}
.clear {
	float: none;
}
.error, .error .validate-inline {
    color: #B94A48 !important;
}
.text-green {
    color: #0C5800 !important;
}
.marginRight0 {
    margin-right:0em !important;
}
.marginLeft0 {
    margin-left:0em !important;
}
/******* Layout Page CSS *******/
.ui-body-a, .ui-overlay-a {
    background: #FFFFFF !important;     /* added to show error popout color 04/08/2015 */
    position: relative;
    z-index: 2;
}

/** Header Start **/
#page .ui-header {
    position: relative;
}
.header a:hover, .header a:active {
	line-height: normal!important;
	text-decoration: none!important;
	color: #FFFFFF !important;
	font-weight: 400!important;
    
}
.fadeErrorMessage {
    height: 4%;
    bottom: 0;
    background-color: #ffffff;
    color: #1C3A45;
    font-size: 16px;
    padding: 10px;
    text-align: center;
    z-index: 9999;
    left: 10%;
    right: 5%;
    top: 44%;
    width: 75%;
    position: fixed;
    border-width: 1px;
    border-style: solid;
    border-color: #ddd;
    font-weight: bold;
    line-height: normal !important;
    border-radius: 0.2em !important;
    opacity: .88;
    box-shadow: 0 1px 1px -1px #fff;
}
/** Footer Start **/
.footer {
    text-align: center !important;
    padding: 0.5em !important;
    border-top: 1px solid #02498F !important;
    bottom: 0 !important;
    font-size: 0.9em;
    font-weight: normal;  /*added to remove bold font from footer 28/07/2015*/
}
/******* Layout Page CSS *******/


/******* Landing CSS *******/

/** Banner Start **/
.header h1 {
    color: #FFFFFF !important;
    font-size: 1.25em !important;
    font-weight: 400 !important;
    margin: 0 !important;
    text-align: center;
    padding: 0px !important; /*added to adjust header alignment 28/07/2015*/
}
/** Header Icon Start **/
.header .headerIcon {
    position: absolute;
    width: 100%;
    z-index: 1;
    display: table;
}
.header .headerIcon a{
    margin: 0 0.5em;
}

/** Banner Dropdown Field Start **/
.header .ui-select {
    margin: 0 0.9em !important;
    width: inherit !important;
}
.ui-shadow-inset, .ui-shadow {
    box-shadow: none !important;
}
.ui-btn-corner-all {
    border-radius: 0.2em !important;
}
.header .ui-btn-text { 
    min-height: 1.2em !important;
}
.ui-select > .ui-btn-inner { /* Selection of ui and inner 30/07/2015 */
    border: 1px solid #0A1C2C !important;
    padding-left: 0.35em;
}
.ui-select .ui-btn{
    /*font-size: 1.3em;*/ /* 04/08/2015 */
    text-align: left !important;
    background-color: #fff !important;
    color: #03448d !important;    /* 04/08/2015 */
    padding-left:0.3em; /* added to adjust the padding oftext 06/08/2015 */
    margin-top: 7px !important;/* added to adjust label and dropdown gap*/
}
a > .ui-btn-left > span > .ui-btn-inner {
    background: none !important;
}
.ui-input-btn
{
    background-color:#03448d !important; /* 30/07/2015 */
    color: #fff !important; /* 30/07/2015 */
    text-align:center !important;
    font-size: 1.3em !important; /* 05/08/2015 */
}
.ui-header .ui-btn, .ui-footer .ui-btn { /* Added to resolve the button issue in terminal location pg for direction 05/08/2015 */
    display: inherit;
}
.ui-btn {	
    display: block;/*added for display dropdown 28/07/2015 */
    border-color: #000 !important;
    font-weight: normal !important; /*added to remove bold font from dropdown 29/07/2015 */
    line-height: 1.2em !important; /*added to fix the drop down issue 29/07/2015 */
    margin: 0.6em 0px !important; /*added to adjust margin issue of drop down 29/07/2015 */
    text-align: left;
    background-color:#03448d !important; /*added to give background color on collapsible btn 31/07/2015 */
    color: #fff !important;
    font-size: 14px !important;/* added for font size in login */
}
.ui-btn-inline {
    display: inline-block;    /* 04/08/2015 */
    font-size: 0.813em !important;
    margin-right: 10px !important;
    padding: 7px 15px !important;
}

/** Tile Start **/
.ui-content {
    padding: 0 !important;
    width: 100% !important;
    border-bottom: 1px solid #FFFFFF;
}
/* Added class for Grid View for Tile Section */
.ui-grid-b div{
    text-align: center;
    border-left: 1px solid #FFFFFF;
    border-bottom: 1px solid #FFFFFF;
}
.tile {
    width: 100%;
    height: 6.813em; /* Added this code to decrease height of the tile 30/07/2015 */
    display: inline-block;
}
.blue {
    background-color: #0095A8;
}
    .blue:hover, .blue:active, .blue:focus {
        background-color: #007988;
    }

.orange {
    background-color: #F8A508;
}
    .orange:hover, .orange:active, .orange:focus {
        background-color: #F57900;
    }

.red {
    background-color: #DF4343;
}
    .red:hover, .red:active, .red:focus {
        background-color: #C50808;
    }

.yellowGreen {
    background-color: #77CB73;
}
    .yellowGreen:hover, .yellowGreen:active, .yellowGreen:focus {
        background-color: #67B164;
    }

.violet {
    background-color: #9C60BD;
}
    .violet:hover, .violet:active, .violet:focus {
        background-color: #8942B0;
    }

.blueGreen {
    background-color: #3FB5E7;
}
    .blueGreen:hover, .blueGreen:active, .blueGreen:focus {
        background-color: #009DDF;
    }

.blueGray {
    background-color: #6d8893;
}
    .blueGray:hover, .blueGray:active, .blueGray:focus {
        background-color: #59747f;
    }

.blueIris {
    background-color: #4B6C9E;
}

.orangeRed {
    background-color: #f17257;
}
    .orangeRed:hover, .orangeRed:active, .orangeRed:focus {
        background-color: #e6684e;
    }
    
.lightBrown {
    background-color: #c29751;
}
    .lightBrown:hover, .lightBrown:active, .lightBrown:focus {
        background-color: #b38945;
    }


.tile-content h3, .tile-content > a {
    color: #FFFFFF;
    font-weight: 300;
    font-size: 0.9em;
}

/******* Landing CSS *******/


/******* Navigation Start *******/

.ui-body-b, .ui-overlay-b {
    /*background: linear-gradient(#DDDDDD, #CCCCCC) repeat scroll 0 0 #F3F3F3 !important;*/
    background: #E6E6E6 !important; /* Added to resolve the window 7 background issue 04/08/2015 */
    z-index:9999;
}
#accordion {
	-webkit-user-select: none;
	-moz-user-select: none;
	-ms-user-select: none;
}
#accordion .floatright {
    float: right;
    margin-top: 1.3em;
    padding-right: 1.1em;
}
#items {
	padding: 0;
    list-style:none;/*added to remove bullets from slide panel 27/07/15 */
}
#items>li>a {
	text-indent: 0.7em;
	margin: 0 auto;
	cursor: pointer;
	line-height: 3.5em;
	display: block;
	text-decoration: none;
	font-size: 0.9em;
	font-family: 'Oswald', sans-serif!important;
	font-weight: 400;
    border-bottom: 1px solid #999;
	color: #000 !important;
    text-shadow:none; /*added to remove shadow text 28/7/15*/
}
#items>li>a:hover, #items>li>a.activated {
	color: #FFF !important;
	font-weight: 400;
	background-color: #02498F;
	transition: background-color 0.4s ease-in-out;
	-moz-transition: background-color 0.4s ease-in-out;
	-webkit-transition: background-color 0.4s ease-in-out;
	-o-transition: background-color 0.4s ease-in-out
}

.slideico {
    text-align: left;
    padding-right: 1.4em;
    vertical-align: middle;
}

.pnct-color-scheme {
    background-color: #423A9D !important;
}

/******* Inner Page Content Area Start *******/

.welcome-text {
    font-size: 0.75em;
    color: #333 !important;
    line-height: 1.3em;
}
.wrapper {
    padding: 1.25em !important;
}
.welcome-text hr {
    margin: 0.5em 0 0.8em;
    border-top: 1px solid #999;
}
/* added for all common terminal content - About Us */
.welcome-text .wrapper > ul, .welcome-text ul, .information_form > ul, .information_form ul  {
    margin: 0 0 0 1.5em;
    padding: 0;
}
.welcome-text img{
    width: 100%;
}
/*Added for ordered list used in Help menu pages.*/
.welcome-text .wrapper > ol, .welcome-text ol, .information_form > ol {
    margin: 0 0 0 1.5em;
    padding: 0;
}
/* In Help Pages provide space between two list items */
ol > li {
    margin-top: 1em;
}
/******* Form Start *******/

/** Input Field **/
div.ui-input-text {
    border: 1px solid #0A1C2C !important;
    border-radius: 0.2em !important;
    padding: 0 0.45em !important;
    margin-top: 10px;/* added to adjust label and textbox gap*/
    margin-bottom: 10px;
}
div.ui-input-text input{
    color: #033D8D !important;
    width: 100% !important;
    padding:0.4em 0px; 
}

/** Select Field **/
.ui-select .ui-btn-text {
    text-align: left !important;
}
.ui-select > .ui-btn-up-a, .ui-select > .ui-btn-hover-a, .ui-select > .ui-focus {
    /*border: none !important;*/
}
.ui-select > .ui-btn-active
{
    border:1px solid #000;
}
/*added for Select Field text color*/
.ui-select .ui-btn-text, .ui-selectmenu .ui-btn-text, .ui-body-a, .ui-overlay-a {
    color: #03448d !important;
}

/** Button **/
.ui-btn-up-a, .ui-btn-hover-a {
    color: #FFFFFF !important;
}
.ui-btn-active {
    font-weight: normal !important;
    border: 1px solid #000 !important; /* Added to solve th border issue on active 30/07/2015 */
    color: #fff !important; /* Added to solve the border issue on active 30/07/2015 */
    text-shadow: 0 0 !important;
}

/** Date Picker **/ /*added CSS for Datepicker*/
.ui-datepicker {
    z-index: 9999 !important;
}
.ui-datepicker a, .ui-datepicker th  {
    font-weight: normal !important;
}
.ui-datepicker .ui-state-disabled {
     color:lightgray !important;
     border-width: 0px !important;
}

.textUpperCase {
    text-transform: uppercase;
    font-size: 1.2em !important;
}

.Highlighted a, .Highlighted span {
    background-color: #66CC66 !important;
    background-image: none !important;
    color: White !important;
}
/******* Form End *******/


/******* Terminal Logo Theme Start *******/

/* Ports America */
#page .portAmerica_terminal {
	border-top: 3px solid #0f62a6;
    border-bottom: 1px solid #FFFFFF;
    background: #0f62a6; /* Old browsers */ /*added backfound color code for all Browsers*/
    background: -moz-linear-gradient(top, #0f62a6 0%, #128eca 100%); /* FF3.6+ */
    background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#0f62a6), color-stop(100%,#128eca)); /* Chrome,Safari4+ */
    background: -webkit-linear-gradient(top, #0f62a6 0%,#128eca 100%); /* Chrome10+,Safari5.1+ */
    background: -o-linear-gradient(top, #0f62a6 0%,#128eca 100%); /* Opera 11.10+ */
    background: -ms-linear-gradient(top, #0f62a6 0%,#128eca 100%); /* IE10+ */
    background: linear-gradient(to bottom, #0f62a6 0%,#128eca 100%); /* W3C */
    filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#0f62a6', endColorstr='#128eca',GradientType=0 ); /* IE6-9 */
    padding: 0.4em 0 !important;
}

/* EGA Los Angeles */
.EGA_LA {
    padding: 0.4em 0 !important;
}

/* EGA Tacoma */
.EGA_PCT {
    padding: 0.4em 0 !important;
}

/* OCT Tacoma */
.OCT_TAC {
    padding: 0.4em 0 !important;
}

/* STC Tacoma */
.STC {
    padding: 0.4em 0 !important;
}

/* PAO Tacoma */
.PAO_OAK {
    padding: 0.4em 0 !important;
}

/* NAP Tacoma */
.NAP_NO {
    padding: 0.4em 0 !important;
}

/* MTC Oakland */ /* Added class for new terminal */
.MTC_OAK {
    padding: 0.4em 0 !important;
}

/* WBCT_LA  */   /* Added class for new terminal */
.WBCT_LA {
    padding: 0.4em 0 !important;
}

/* PNCT_NJ  */   /* Added class for new terminal */
/*.PNCT_NJ {
    padding: 0.4em 0 !important;
}*/
/* PNCT_N4  */   /* Added class for new terminal */
/*.PNCT_N4 {
    padding: 0.4em 0 !important;
}*/
/******* Terminal Logo Theme End *******/


/******* Anchor Link Start *******/
.logintrouble {
    margin: 2.2em 0 0;
}
div.logintrouble span{
    font-weight: bold;
    color:black;
}
div.logintrouble .ui-link{
    text-decoration: underline;
    margin: 0 0 0.7em;
    color: #000000 !important;
    font-weight: normal; /*added to remove bold font from the links on login page 28/07/2015 */
}
.ui-field-contain {
    font-size: 1.5em;
    padding: 0 0 0 !important;
    margin: 0 0 10px !important;
    border: 0 !important;
}

/******* Inner Page Content Detail Start *******/

/** Table Detail Start **/
.ui-collapsible { 
    margin: 0 !important;
    
}
.ui-collapsible-content {
    padding: 0.85em 0 !important;
    border-radius: 0 !important;
    padding-bottom: 0em !important; /*Added to resolve the Collapsible content issue*/
	padding-top: 0em !important; /*Added to resolve the Collapsible content issue*/
    border-left-width: 0px !important; /* To override the jquery css to remove border from table 31/07/2015 */
    border-right-width: 0px !important; /* To override the jquery css to remove border from table 31/07/2015 */
    border-width: 0px 0px 0px !important; /* To override the jquery css to remove border from table 03/08/2015 */
}
.ui-collapsible-inset {
    margin: 0 0 0.85em !important;
}
.ui-collapsible-heading {
    padding-top: 0 !important;
    border-radius: 0 !important;
}
.ui-collapsible-content table {
    width: 100%;
    color: #000000 !important;
    border-collapse: collapse;
}
.ui-collapsible-content td:first-child {
    text-align: left;
}
.ui-collapsible-content td, th {
    padding: 0.35em 0.35em 0;
    border-bottom: 1px solid #02498F;
    text-align: left;
    height: 2.5em;
    vertical-align: middle;
}
.ui-collapsible-content tr:nth-of-type(2n+1) {
    background: none repeat scroll 0 0 #FFFFFF;
}
.ui-collapsible-content td:first-child {
    width: 40%;
}
.innerContent .greyLable {
    color: #666666;
    font-size: 1.3em;
    padding-top: 5px;/* added to adjust label gap*/
    font-weight: bold;
}

/*** Inventory Page CSS***/
.inventoryCtrl {
    margin: 0.75em 0 !important;
}
/******* Inner Page Content Detail Start *******/

/*Import Inquiry CSS*/
.searchType {
    padding-top: 0.85em !important;
}

/** Terminal Detail Start **/
.terminalBtnCtrl {
    width:100%; 
    text-align: right;
}

/*** ContactUs CSS***/
.contactUs { 
    margin: 0;
}
.contactUs a {
    text-decoration: underline !important;
    color: black;
}
.contactUs .contactLabel{
    width: 27%;
    max-width: 6.250em;
    font-weight: bold;
    display: inline-block;
    margin: 0 0 0.5em;
}
.routeInfo {
    overflow:auto;
}
/*Classes for Appointment Result page*/
.fl {
    float:left;
}
.imgArrowLeft { /*Increase the height as per the new back icon*/
    width: 5em !important;
    height: 2.5em !important;
}
.imgArrowLeftLocation { /*CSS created for new layout of Location page*/
    width: 5em !important;
    height: 1.6em !important;
}
.pl {
    padding-left:6.5em;
    padding-top:0.3em;
}
.tl {
    text-align:left;
    font-size: medium; /*Update the Text size*/
}
/*End Classes for Appointment Result page*/

/*Notification Css*/
.notificationForm input{ /* Added CSS because Jquery Mobile have own theme and we have to add so many classes to give same look and feel */
    margin: 0 !important;
    left: 0 !important;
    vertical-align: middle !important;
}
.notificationForm label{
    padding: 0 0 0 1.563em;
    vertical-align: top;
}
/*End of Notification Css*/

/* Media Queries Start*/
/**********************/

/*Commented for iPad and Desktop fix Resolution Issue*/  
@media only screen and (min-width: 768px) and (max-width: 2400px) {
    .ui-mobile-viewport {
        margin: 0 auto !important;
        width: 48em !important;
        position: relative;/*Added to solve the 100% screen issue*/
    }  
    .tile{
        height: 8.813em;  /* 05/08/2015 */
    }   
     
}

/* Added for iPad devices */
@media only screen and (min-device-width : 768px) and (max-device-width : 1024px)  { 
    .tile-content h3, .tile-content > a {
        font-size: 1.1em;
    }
    .ui-header .ui-btn-inner, .ui-footer .ui-btn-inner, .ui-mini .ui-btn-inner {
        font-size: 1em !important;
    }
}

/**********************/
/* Media Queries End */

/*Pagination Css*/
.loading-bar {
    background-color: #dff0d8;
    border: 1px solid #d6e9c6;
	color: #468847;
    margin-bottom: 1.250em;
    padding: 0.35em 1em;
    text-shadow: 0 0.063em 0 rgba(255, 255, 255, 0.5);
}
.scrollable-y {
    height: 16.7em;
    overflow-y: auto;
    border-radius: 0 !important;
}
/* iPads (portrait and landscape) ----------- */
@media only screen and (max-width :768px){
/* Styles */
    .ui-collapsible-content .scrollable-y{
        height: 31.250em;
        overflow-y: auto;
        border-radius: 0 !important;
    }
}

/* Smartphones (landscape) ----------- */
@media only screen and (max-width :480px) {
/* Styles */
    .ui-collapsible-content .scrollable-y{
        height: 16.875em;
        overflow-y: auto;
        border-radius: 0 !important;
    }
}
/*End of Pagination Css*/
.equipmentHeader{
    background-color: #03448D !important;
    color: #ffffff !important;
    border-top: thick double #ffffff !important;
}
/*Added this class for equipment details page to align the height between header and back button.*/
.equipmentDetails {
    margin: 0px !important;
}
.pd-Top {
    padding-top: 5px;
}
.blackFont {
    color:#333 !important;
}
.ui-corner-all { /*global option to removes the corner from the element.. */
    border-radius: 0.2em !important;
}
.ui-list-text { /*css for list item*/
    text-align: center !important;
    color: white !important;
}
.padding-top {
    padding-top:0.7em;
}
a > .ui-btn-inner { /*CSS to override the JQMs 16Px font size to 13Px. required for Location page*/
    font-size: 0.813em !important;
}
.dockedfooter {
border: 1px solid #12a7fb !important; /*added for border-color*/
background: #12a7fb !important;       /*added for background-color*/
color: #fff !important;               /*added for textcolor*/
}

.ui-panel-inner {
	padding: 0 !important;/* added to solve padding issue in the slide bar panel 28/7/15 */
}
.displayHeader {
    height:1.5em;
    font-size:1.2em;
    padding-top:0.8em;
    border-color:#000;
    background-color: #03448D !important;
}
.visible-hidden {
    visibility:hidden !important;
}
.visible {
    visibility:visible !important;
}

/* this class is used for styling the table (Daily message) */
.announcement .welcome-text.wrapper table {
    background: #e6e6e6 none repeat scroll 0 0;     /*to give gray background color to table*/
    border: 0.100em solid #1d1d1d;                  /*to give border to table*/
    color: #000;				                    /*to give color to text in the atble*/
    margin: 1em 0;                                    /*to give margin to the content of table*/
    width: 100%;				                    /*to give width*/
}

/* class for styling the td's of table */
.announcement .wrapper table tr td {
    height: 2.500em;				/*to give height to the cell*/
    padding: 0.5em;				    /*to give padding to the content in the cell*/
}

/* this class is used for styling the tr's of table */
.announcement .wrapper table tr {
    border-bottom: 0.100em solid #02498f;        /*to give border in bottom of tr*/
}

/* this class is used for styling the alternative tr's of table */
.announcement .wrapper table tr:nth-child(2n+1) {
    background: #fff none repeat scroll 0 0 !important; /*to give alternative background color to tr*/
}

.toggleMap {
    position:absolute; 
    margin-top:3.125em; 
    margin-left:0.625em; 
    z-index:100; 
    padding-top:0.0625em
}

/*Classes for Credit Card Icons*/
.ui-cc-icon{
    background-image: url("/content/images/cc-set.jpg");
    height: 28px;
    width: 40px;
    background-repeat: no-repeat;
    display: inline-block;
    overflow: hidden;
    text-indent: -99999px;
}
.ui-cc-icon-amex{
   background-position: -242px -18px;
}
.ui-cc-icon-mastercard{
   background-position: -318px -318px;
}
.ui-cc-icon-visa{
   background-position: -166px -468px;
}
.ui-cc-icon-discover{
   background-position: -394px -168px;
}
.ui-cc-icon-default{
   background-position: -90px -92px;
}
.ui-collapsible-heading .ui-btn{
    margin:0 !important;
}

/*Class created for child collapsible widget*/
.ui-mini-bar a{
    background-color:#0d769e !important;
}

/*Class for Express Gate information Bar*/
.eg-HeaderInfo{
    width: 73%; 
    padding-top: 0.9em;
    padding-bottom: 0.9em;
}
.notice table {
    background: #e6e6e6 none repeat scroll 0 0;     /*to give gray background color to table*/
    border: 0.100em solid #1d1d1d;                  /*to give border to table*/
    color: #000;				                    /*to give color to text in the atble*/
    margin: 1em 0;                                    /*to give margin to the content of table*/
    width: 100%;				                    /*to give width*/
}

/* class for styling the td's of table */
.notice table tr td {
    padding: 0.5em;				    /*to give padding to the content in the cell*/
    height:auto;
}

/* this class is used for styling the tr's of table */
.notice table tr {
    border-bottom: 0.100em solid #02498f;        /*to give border in bottom of tr*/
}

/* this class is used for styling the alternative tr's of table */
.notice table tr:nth-child(2n+1) {
    background: #fff none repeat scroll 0 0 !important; /*to give alternative background color to tr*/
}
.hide {
    display:none;
}
.availability-No_Exam, .availability-No {
    color: red;
}
.availability-Yes_Exam, .availability-Yes {
    color: green !important;
}

/*Style for EIR multi selection option*/
.ui-popup-container > .ui-selectmenu > .ui-selectmenu-list > li {	
    margin-top: 0em !important;
}

.ui-popup-container > .ui-selectmenu > .ui-header {
    background-color: #03448d;
}
#equipmentMoveTypes-listbox.ui-selectmenu > .ui-header {
    background-color: #423A9D;
}
#equipmentMoveTypes-listbox .ui-btn,#equipmentMoveTypes-listbox .ui-btn.ui-icon-delete:after{
    background-color: #423A9D !important;
    border-color: white !important;
}
.ui-popup-container > .ui-selectmenu > .ui-header > h1 {
    color: #fff;
}
.ui-popup-container > .ui-selectmenu > .ui-header > a {
    margin-top: 0.2em !important;
}
.ui-select > .ui-li-has-count > .ui-li-count {
    background-color:#03448d !important;
}

#equipmentMoveTypes-button .ui-li-count {
    background-color:#423A9D !important;
}

.ui-datepicker-buttonpane {
    background-color: white;
}


.ui-datepicker-buttonpane button {
    font-size: 10pt;
    padding: 4px;
    margin: 6px 8px 5px 7px;
}

/*Style for Premium Service*/
.mariner {
    background-color: #3B6098;
}
.mariner:hover, .blueGreen:active, .blueGreen:focus {
        background-color: #3A6080;
}

.emptyReturnContainer {
    background-color: #3B6098;
    height: 50%; 
    display: table;
    text-align: center;
    width: 100%;  
    margin-bottom:1px;
}

.emptyReturnTitle {
    text-align: center; 
    font-size: medium;
}

.emptyReturnBtn {
    width: 100%;
    text-align: center;    border-color: #fff !important; 
    /*background-color: #3B6098 !important;*/
}


.inactive-button{
    margin-right: 0px !important; 
    width: 100px; 
    text-align:center;
}

.active-button{
    background-color: white !important; 
    color: darkblue !important; 
    margin-right: 0px !important; 
    width: 100px; 
    text-align:center;
}

.ui-listitem-box{
    background: whitesmoke;
    text-align: left;
    vertical-align: central;
    display: block;
    margin: 5pt 5pt 5pt 5pt;
    padding: 5px 10px 5px 10px;
    border-radius: 5px;
    border-color: lightgray;
    border-width: 1px;
    border-style: solid;
    font-family: sans-serif /*{global-font-family}*/;
    font-size: 1.2em;
    text-overflow: ellipsis;
    overflow: hidden;
    white-space: nowrap;
}








/*PNCT Styles start here*/

.ui-grid-solo.main_service > a#btnUpcoming.ui-btn-inline {
    height: 130px;
    background-image: url(../../content/images/premier_service.png);
    background-size: cover;
    border: 0;
    display: block;
    background-color: #39297B!important;
    margin: 10px 9px 20px 9px !important;
    border-radius: 4px;
    box-shadow: 0 3px 5px 0 rgba(57,42,123,0.30);
    position: relative;
}

.ui-grid-solo.main_service > a#btnUpcoming.ui-btn-inline > h3 {
    color: #fff;
}

a.tile.container_availability.tile-content.ui-link {
    height: 130px;
    background-image: url(../../content/images/container_availability.png);
    background-size: cover;
    border-radius: 4px;
    width: 95%;
    margin: 0 auto 15px auto !important;
    display: block;
    box-shadow: 0 3px 5px 0 rgba(229,75,133,0.30);
    position: relative;
}

a.tile.booking.tile-content.ui-link {
    height: 130px;
    background-image: url(../../content/images/booking.png);
    background-size: cover;
    border-radius: 4px;
    width: 95%;
    margin: 0 auto 15px auto !important;
    display: block;
    box-shadow: 0 3px 5px 0 rgba(25,111,249,0.30);
    position: relative;
}

a.tile.gate_inquiry.tile-content.ui-link {
    height: 130px;
    background-image: url(../../content/images/gate_inquiry.png);
    background-size: cover;
    border-radius: 4px;
    width: 95%;
    margin: 0 auto 15px auto !important;
    display: block;
    box-shadow: 0 3px 5px 0 rgba(43,90,132,0.30);
    position: relative;
}

a.tile.vessel_schedule.tile-content.ui-link {
    height: 130px;
    background-image: url(../../content/images/vessel_schedule.png);
    background-size: cover;
    border-radius: 4px;
    width: 95%;
    margin: 0 auto 15px auto !important;
    display: block;
    box-shadow: 0 3px 5px 0 rgba(136,205,8,0.35);
    position: relative;
}

a.tile.terminal_info.tile-content.ui-link {
    height: 130px;
    background-image: url(../../content/images/terminal_info.png);
    background-size: cover;
    border-radius: 4px;
    width: 95%;
    margin: 0 auto 15px auto !important;
    display: block;
    box-shadow: 0 3px 5px 0 rgba(254,175,18,0.33);
    position: relative;
}

a.tile.daily_message.tile-content.ui-link {
    height: 130px;
    background-image: url(../../content/images/daily_message.png);
    background-size: cover;
    border-radius: 4px;
    width: 95%;
    margin: 0 auto 15px auto !important;
    display: block;
    box-shadow: 0 3px 5px 0 rgba(26,176,227,0.30);
    position: relative;
}

a.tile.online_payment.tile-content.ui-link {
    height: 130px;
    background-image: url(../../content/images/make_payment.png);
    background-size: cover;
    border-radius: 4px;
    width: 95%;
    margin: 0 auto 15px auto !important;
    display: block;
    box-shadow: 0 3px 5px 0 rgba(216,62,81,0.30);
    position: relative;
}

img.service_icon {
    position: absolute;
    bottom: 20px;
    right: 20px;
}

.services h3 {
    font-size: 15px;
}

h3.prem_title {
    font-size: 15px;
    font-weight: normal;
    line-height: 25px !important;
    padding-top: 5px;
}

h3.prem_title b {
    display: block;
}

h3.ordinary_title {
    padding: 15px;
}

.header.no_border {
    border-width: 0;
}

.no_border div#termialSelection .ui-select #SiteId-button {
    border-color: #DBE0E3 !important;
    padding: 15px;
}

.header.no_border .headerIcon a {
    margin: 10px 16px;
}

.header.no_border .ui-select {
    margin: 0 auto !important;
    width: 98% !important;
}

.header.no_border div#termialSelection .ui-select #SiteId-button span {
    color: #6D6D78;
    font-size: 15px;
}

.header.no_border div#termialSelection .ui-select #SiteId-button:after {
    right: 15px;
    content:"";
    width:0;
    height:0;
    border-top:6px solid #6D6D78;
    border-left:6px solid transparent;
    border-right:6px solid transparent;
    position:absolute;
    background: transparent;
    border-radius: 0;
    top: 30px;
}

.pnct_logo {
    padding-top: 10px;
    width: 100px;
}

.footer.light_footer.ui-footer.ui-bar-inherit.ui-footer-fixed.slideup {
    font-size: 13px;
    color: #AFB6BE !important;
    font-weight: 500;
    background-color: #fff !important;
    border: 0 !important;
    z-index: 9999;
    position: fixed !important;
    max-width: 768px;
    margin: 0 auto;
    border:none;
    width: 100%;
}

.ui-header.ui-bar-b {
    background-color: #39297B;
}
.pnctHeader {
    z-index: 9999;
    position: fixed !important;
    max-width: 768px;
    margin: 0 auto;
    top: 0;
    border:none;
    width: 100%;
}
.ui-bar-b h1.ui-title {
    color: #fff;
    text-shadow: none;
    font-size: 16px;
    font-weight: 500;
    letter-spacing: 0.5px;
    padding-bottom: 5px;
    padding-top: 7px;
}

span.terminal_info {
    color: rgba(255, 255, 255, 0.8);
    font-size: 12px;
    font-weight: 100;
    text-align: center;
    display: block;
    padding-bottom: 10px;
}

img.back_button {
    margin: 15px 15px 0 10px;
    position: absolute;
}

.scroll_tabs {
  white-space: nowrap;
  overflow-x: auto;
  -webkit-overflow-scrolling: touch;
  -ms-overflow-style: -ms-autohiding-scrollbar; 
    z-index: 9999;
    position: fixed;   
    max-width: 768px;
    margin: 0 auto;
    top: 53px;
    width: 100%;
}

section.scroll_tabs {
    background: #231755;
}

.scroll_tabs li {
    display: inline-block;
    margin-left: -6px;
    padding:10px 0px;
}
.scroll_tabs li:first-child{
    margin-left:0px;
}

.scroll_tabs a.ui-link {
    color: #fff;
    text-shadow: none;
    font-size: 14px;
    font-weight: 200;
    padding: 4px 10px;
    display:block;
    border-right: 1px solid #4d71ad;
}

.scroll_tabs li.active a.ui-link {
    border-right: none;
}

.scroll_tabs::-webkit-scrollbar { 
    display: none; 
}

.scroll_tabs .active {
    background: linear-gradient(to bottom, #39297b, #f8f8f8);
    border-bottom: 1px solid #e4e4e4;
}

.white_bg.ui-content {
    background: #fff;
}

.request_form {
    padding: 15px;
    margin-top:110px;
}

.request_form.info {
    padding: 15px;
    margin-top:50px;
}

.request_form.info.loginnotice {
    padding: 15px;
    margin-top: 0px !important;
}

.request_form.info.login {
    padding: 0px !important;
}

.request_form.pnct {
    padding: 15px 0 !important;
    margin-top: 0px !important;
}

.request_form label.greyLable, .request_form div.greyLable, .request_form label.greyLableCP {
    color: #6D6D78 !important;
    font-size: 15px !important;
    text-shadow: none !important;
    font-weight: normal !important;
    margin: 0 0 .4em !important;
    display: block !important;
    padding: 0 !important;
}

.request_form label.greyLableCP {
    display: inline-table !important;
}

.request_form .ui-input-text.ui-body-inherit.ui-corner-all.ui-shadow-inset {
    border: 1px solid #DBE0E3 !important;
    height: 30px;
    padding: 6px 15px 8px 15px !important;
    margin-top: 0;
    margin-bottom: 15px;
}

.information_form {
    padding: 15px;
    font-size:14px;
    padding-top:50px;
}

.padding-top.pnct {
    padding-top:70px;
}

.terminalBtnCtrl.pnct {
    width:100%; 
    text-align: right;
    margin-top:60px;
}

.ui-input-text.ui-body-inherit.ui-corner-all.ui-shadow-inset .ui_input {
    color: #222 !important;
    text-shadow: none !important;
}

.ui-select.custom_select .ui-select .ui-btn {
    padding: 13px 10px;
    padding-right: 4.4em;
    color: #45454c !important;
    font-size: 15px !important;
    text-shadow: none !important;
    border-color: #e3e6e9 !important;
    border-radius: 4px !important;
    margin-bottom: 15px !important;
}

label.greyLable i {
    float: right;
    font-size: 12px;
    padding-right: 5px;
    color: #AFB6BE;
}

label.greyLable.text-center {
    text-align: center;
    margin-top: 25px !important;
}

h3.text-center.fee_number {
    text-align: center;
    font-size: 30px;
    color: #423A9D;
    margin-bottom: 10px;
}

a#orderServicePay {
    display: block;
    margin: 0 auto;
    width: 200px;
    background: #423A9D;
}

a#orderServicePay,
a#another_transaction,
.pnct_input_btn,
.pnct_list_btn,
.pnct_input_btn_disable  {
    display: block;
    margin: 20px auto !important;
    width: 200px;
    background-color: #423A9D !important;
    text-align: center;
    text-shadow: none;
    font-size: 15px !important;
    padding: 13px !important;
    border-radius: 5px !important;
    border: 0 !important;
    box-shadow: 0 3px 6px 0 rgba(65,57,157,0.35) !important;
}
/*added to display full button by overriden for PNCT*/
.pnct_input_btn {
    width: 100% !important;
    -webkit-appearance: none !important;
}
a.pnct_input_btn, .pnct_input_btn_disable {
    width: 92% !important;
}
/*added to display full button list by overriden for PNCT*/
.pnct_list_btn {
    width: 100% !important;
    margin: 0.6em 0px !important;
    -webkit-appearance: none !important;
}
/*Collapsible style for PNCT*/
.pnctCollapsible h4 a, .pnctCollapsible h3 a {
    display: block;
    background-color: #423A9D !important;
    font-size: 15px !important;
    border: 0 !important;
    box-shadow: 0 3px 6px 0 rgba(65,57,157,0.35);
}

a.floatRight.main_home_i.ui-link {
    position: absolute;
    right: 40px;
    top: 15px;
}

a.floatRight.main_login_i.ui-link {
    position: absolute;
    right: 10px;
    top: 17px;
}

a.floatLeft.marginRight0.main_menu_i.ui-link {
    position: absolute;
    top: 18px;
    left: 40px;
}

.full_btn {
    background-color: #423A9D !important;
    text-align: center;
    text-shadow: none !important;
    font-size: 15px !important;
    padding: 13px !important;
    border-radius: 5px;
    border: 0 !important;
    box-shadow: 0 3px 6px 0 rgba(65,57,157,0.35);
}

.ui-btn.ui-btn-inline.ghost_btn {
    background: #fff !important;
    border: 1px solid #DBDFE3 !important;
    border-radius: 4px;
    text-shadow: none !important;
    font-size: 15px !important;
    padding: 12px !important;
    color: #6D6D78 !important;
    text-align: center;
}

.routeDirections.pnct {
    background-color: #423A9D !important;
    border-color: white !important;
    border-radius: 5px !important;
    font-size: 14px !important;
    line-height: 1em !important;
    box-shadow: 0 1px 3px !important;
}

.action.double {
    text-align: center;
}

.action.double a {
    width: 38% !important;
}

.action.double a:last-of-type {
    margin-right: 0 !important;
}

hr.separator {
    margin-bottom: 25px;
}

label.data_name, td.pnctLabel, label.pnctLabel {
    width: 40%;
    display: inline-block !important;
    text-align: right;
    color: #6D6D78;
    font-size: 15px !important;
    margin: 0 0 .4em !important;
}

span.data_info, td.pnctInfo, td.pnctInfo-No, td.pnctInfo-Yes  {
    color: #423A9D;
    font-size: 15px;
    border-bottom: 1px solid #EEEEEE;
    height: 2.5em;
    vertical-align: middle;
}


td.pnctLabel, label.pnctLabel {
    width: 50%;
    display: table-cell !important;
    text-align: left;
    border-bottom: 1px solid #EEEEEE;
    height: 2.5em;
    vertical-align: middle;
}

label.data_name.pnct {
    width: inherit;
} 

span.data_info.pnct {
    border-bottom:0px;
    margin-left: 28px;
    vertical-align: initial;
}

.line_long {
    display: -ms-flexbox;
    display: flex;
    margin: 10px 0;
}

.data_name_long {
    -ms-flex-order: 0;
    order: 0;
    width: 40%;
    display: inline-block !important;
    text-align: right;
    color: #6D6D78;
    font-size: 15px !important;
}

.data_info_long {
    -ms-flex-order: 1;
    order: 1;
    flex: 1;
    border-bottom: 0px;
    vertical-align: initial;
    color: #423A9D;
    font-size: 15px;
    margin-left: 33px;
}

td.pnctInfo-No {
    color: red;
}

.equipmentHeaderPnct{
    background-color: #423A9D !important;
    color: #ffffff !important;
    border-top: thick double #ffffff !important;
}

td.pnctLabel-Eqp, td.pnctInfo-Eqp {
    color: #fff;
}

.line {
    margin: 10px 0;
}

.payment_info, .payment_info_pnct {
    font-size: 15px;
    color: #6D6D78;
    line-height: 23px;
    margin-bottom: 20px;
    margin-top: 60px;
}

.payment_info_pnct {
    margin-top: 10px !important;
}
form.conditions_form .ui-checkbox label.ui-btn, #equipmentMoveTypes-menu .ui-btn, .checkboxLabel {
    background: transparent !important;
    color: #6D6D78 !important;
    border: 0;
    font-size: 15px !important;
    padding-left: 35px;
}
 .checkboxLabel {
     border : 0px !important;
 }
 #equipmentMoveTypes-menu .ui-btn:after{
     left: .5625em;
     right:inherit;
 }
#equipmentMoveTypes-menu .ui-btn.ui-checkbox-off:after {
    left: 0.18em;
}

input[type="checkbox"].pnctCheckbox {
    opacity: 0 !important;
    width: 25px !important;
    height: 25px !important;
    left: 0 !important;
}

.ui-btn.ui-checkbox-off:after {
    background-color: #D8D8D8;
    border: 0 !important;
    width: 25px;
    height: 25px;
    background-image: none !important;
    margin-top: -13px;
    left: 0;
}

.ui-icon-check:after, html .ui-btn.ui-checkbox-on.ui-checkbox-on:after {
     background-image: none;
    background: #423A9D;
    box-shadow: 0 3px 6px 0 rgba(65,57,157,0.35);
    border-radius: 4px;
    width: 25px;
    height: 25px;
    margin-top: -13px;
    margin-left: -4px;
}

.ui-icon-check:before, html .ui-btn.ui-checkbox-on.ui-checkbox-on:before {
    background-image: url("../../content/images/check.svg");
    content: '';
    position: absolute;
    width: 15px;
    height: 15px;
    margin-left: -26px;
    z-index: 2;
    background-repeat: no-repeat;
    margin-top: 2px;
}

img.bank_logo {
    margin: 20px 0 0 10px;
}
#ccTermsConditionPopup {
    top: 80px;
}

form.conditions_form a.terms_conds, a.pnctLink {
    color: #39297b;
    text-shadow: none !important;
    text-decoration: underline;
    position: absolute;
    left: 154px;
    z-index: 2;
    margin-top: 13px;
    font-size: 14px !important;
}

form.conditions_form a.terms_conds {
    top: 0px;
    left:140px;
}

.positionRelative {
    position:relative;
}

a.pnctLink {
    position: inherit;
    left: 0px;
    font-weight: bold !important;
}

h3.terms_title {
    text-align: center;
    color: #6D6D78;
    font-size: 16px;
    margin-bottom: 15px;
}

.success_icon,
.error_icon{
    width: 70px;
    height: 70px;
    background: #A3CC14;
    display: block;
    margin: 10px auto 20px auto;
    text-align: center;
    border-radius: 50%;
}

.success_icon img {
    margin-top: 22px;
    width: 50%;
}

.error_icon img {
   margin-top: 16px; 
   width: 50%;
}

.error_icon {
    background: #E33F71;
}

.payment_status.success {
    text-align: center;
    font-size: 16px;
    color: #8ECC14;
}

.error_status.success {
    text-align: center;
    font-size: 16px;
    color: #E33F71;
}

span.additional_info {
    font-size: 13px;
    color: #AFB6BE;
    display: block;
    margin: 15px auto;
}

.request_data.m-top {
    margin-top: 30px;
}

.new_pin {
    color: #6D6D78;
    text-align: center;
    margin: 15px auto;
}

.new_pin .pin_itself {
    display: inline;
    font-size: 36px;
    color: #8ECC14;
    vertical-align: middle;
}

.payment_status.error {
    color: #E33F71 !important;
    font-size: 16px;
}

span.suggestions_info, div.suggestions_info {
    font-size: 15px;
    color: #6D6D78;
    margin-top: 20px;
    display: block;
    text-shadow: none !important;
    line-height: 22px;
}

span.suggestions_info p, div.suggestions_info p {
    margin: 10px 0;
}


.pin {
    border: 1px solid #E6E6E6;
    border-radius: 4px;
    margin: 12px 0;
    box-shadow: 0 5px 12px 0 rgba(217,226,233,0.35);
    background: #FFFFFF;
    padding: 0 15px;
    position: relative;
}

.pin.upcoming_pin {
    border: 1px solid rgba(142,204,19,0.50);
}

.pin .new_pin {
    text-align: left;
    margin: 10px auto;
}

.pin_service {
    margin-bottom: 10px;
    color: #6D6D78;
}

.pin_info {
    font-size: 14px;
    color: #AFB6BE;
    margin-bottom: 20px;
}

.pin_status {
    position: absolute;
    top: 20px;
    right: 50px;
}

.effective_date_info {
    font-size: 14px;
    color: black;
    font-weight:bold;
    margin-bottom: 20px;
}

.type_info {
    font-size: 14px;
    color: #6D6D78;
    margin-bottom: 20px;
}


div#tabs.padded {
    padding: 10px;
    top: 108px;
}

div#tabs.padded2 {
    padding: 10px;
    top: 60px;
}

.pin:after {
    position: absolute;
    content: '';
    width: 28px;
    height: 28px;
    top: 13px;
    right: 15px;
}

.pin.upcoming_pin:after {
    background-image: url("../../content/images/checked.svg");
    padding:0.5px;
}

.pin.overdue:after {
    background-image: url("../../content/images/checked_grey.svg");
    padding: 1px;
}

.pin.canceled:after {
    background-image: url("../../content/images/clock.svg");
}

li.ui-state-default.ui-corner-top.ui-tabs-active.ui-state-active a {
    background: #39297b !important;
    text-align: center;
    color: #fff !important;
    box-shadow: none !important;
}

li.ui-state-default.ui-corner-top a {
    text-align: center;
    background: #fff !important;
    color: #6D6D78 !important;
    text-shadow: none !important;
    border-color: #DBDFE3 !important;
}

li.ui-block-a.ui-state-default a {
    border-radius: 4px 0 0 4px !important;
    padding: 12px;
    text-shadow: none !important;
}

li.ui-block-b.ui-state-default a {
    border-radius: 0 4px 4px 0 !important;
    padding: 12px;
    text-shadow: none !important;
}

h4.pin_itself.grey {
    color: #AFB6BE;
}

.cutoff_info {
    font-size: 15px;
    color: #6D6D78;
    line-height:23px;
    position: relative;
}

.cutoff_info:before {
    position: absolute;
    content: '';
    width: 22px;
    height: 22px;
}

.cutoff_info.cutoff_time:before {
    background-image: url("../../content/images/info.svg");
}

.cutoff_info.cutoff_time span, .cutoff_info.cutoff_time p {
   margin-left: 35px;
    float: left;
}

.message_info, .message_conf {
    font-size: 15px;
    font-weight: bold;
    padding: 5%;
    color:white;
    background-color:#39297B;
    line-height:23px;
    display: block !important;
    z-index: 9999999;
    position: fixed;
    top: 30%;
    left: 10%;
    right: 10%;
    border-width: 1px;
    border-style: solid;
    -webkit-border-radius: .6em;
    border-radius: .6em ;
    text-align:center;
}

label.warn_msg {
    line-height: 1.2em; 
    color:white;
}
h3.warn_title {
    text-align: center;
    color: white;
    font-size: 16px;
    margin-bottom: 15px;
}
.warn_action, .warn_action_single {
    margin-left:10%;
    font-size: 1.2em !important;
}
a.warn_btn {
    width:50px;
    border-radius: 5px !important;
}
label.paymentSvcPrvd {
    color: #6D6D78;
    font-size: 15px !important;
}
.invalid_msg {
    color: red;
    font-size: 12px;
}
.sscolocked {
    color: red;
}
.bottom-padding {
    margin-bottom: 9.85pt;
}
.top-padding {
    margin-top: 1.2em;
}

.headerUserIconMargin {
    margin-left: 0 !important;
    margin-top: 9px !important;
}

.headerLoginIconMargin {
    margin-left: 0 !important; 
    margin-top: 13px !important;
}

.ui-grid-solo.main_service > a#btnAppt.ui-btn-inline {
    height: 130px;
    background-image: url(../../content/images/gate_inquiry.png);
    background-size: cover;
    border: 0;
    display: block;
    margin: 10px 9px 20px 9px !important;
    border-radius: 4px;
    box-shadow: 0 3px 5px 0 rgba(57,42,123,0.30);
    position: relative;
}

.ui-grid-solo.main_service > a#btnAppt.ui-btn-inline > h3 {
    color: #fff;
}

a#btnGateInq.tile.gate_inquiry.tile-content.ui-link {
    height: 130px;
    background-image: url(../../content/images/premier_service.png);
    background-size: cover;
    border-radius: 4px;
    width: 95%;
    margin: 0 auto 15px auto !important;
    display: block;
    box-shadow: 0 3px 5px 0 rgba(43,90,132,0.30);
    position: relative;
}

input[type="checkbox"].Checkbox-Theme-B {
    width: 22px;
    height: 22px;
    outline: 0 !important;
    z-index: 1;
    margin: 8px 5px;
}

.field-validation-error {
    color: red;
}
/* ----------- iPhone 5 and 5S ----------- */
@media only screen 
  and (min-device-width: 320px) 
  and (max-device-width: 568px)
  and (-webkit-min-device-pixel-ratio: 2)
  and (orientation: portrait) 
{
    .new_pin .pin_itself {
        font-size: 30px;
    }
}


@media only screen
and (min-width : 1224px) {
    .message_info, .message_conf {
        top: 30%;
        left: 25%;
        right: 25%;
    }
}