@import url('https://fonts.googleapis.com/css?family=Open+Sans:200,300,400,500,600,700|Montserrat:200,300,400,500i,600,700i,800|Raleway:200,300,400,500,600,700,700i|Source+Sans+Pro:200,300,400,600,700,900,200italic,300italic,400italic,600italic,700italic,900italic');
@import url('https://fonts.googleapis.com/css?family=Roboto:100,300,400,500,700,900,300i');

* {
    border: 0;
    margin: 0;
    padding: 0;
    font-family: 'Open Sans', sans-serif;
}

html, body {
    position: relative;
    width: 100%;
    height: 100%;
    background-image: linear-gradient(to right top, #eeeeee, #ececec, #eaeaea, #e8e8e8, #e6e6e6);
    overflow: hidden;
    background-color: #FFFFFF;
    -webkit-text-size-adjust: 100%;
}

body {
    overflow-y: scroll;
    -webkit-overflow-scrolling: touch;
}

html.lock,
html.lock body {
    overflow-y: hidden;
}

html.blur div#header,
html.blur div#main,
html.blur div#splash,
html.blur div#footer {
    filter: blur(3px);
    -webkit-filter: blur(3px);
}

/* ----- HEADER ----- */

div#header {
    position: relative;
    height: 65px;
    width: 100%;
    background: #FFFFFF;
    -webkit-box-sizing: border-box;
    box-sizing: border-box;
    overflow: visible;
    z-index: 1;
}

div#header > .wrapper > li > ul {
    display: -webkit-box;
    display: -webkit-flex;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-orient: horizontal;
    -webkit-box-direction: normal;
    -webkit-flex-direction: row;
    -ms-flex-direction: row;
    flex-direction: row;
    -webkit-flex-wrap: nowrap;
    -ms-flex-wrap: nowrap;
    flex-wrap: nowrap;
    width: 100%;
    font-size: 0;
    height: 65px;
    list-style: none;
    -webkit-box-sizing: border-box;
    box-sizing: border-box;
}

div#header > .wrapper > li > ul > li {
    display: inline-block;
    width: 100%;
    height: 100%;
    -webkit-box-sizing: border-box;
    box-sizing: border-box;
    font-size: 10px;
    vertical-align: top;
}

div#header > .wrapper > li > ul > li.title {
    -webkit-box-flex: 0;
    -webkit-flex: 0 0 160px;
    -ms-flex: 0 0 160px;
    flex: 0 0 160px;
    vertical-align: top;
    font-size: 0;
    padding-left: 10px;
}

div#header > .wrapper > li > ul > li.title h1 {
    display: inline-block;
    font-family: 'Roboto', sans-serif;
    font-weight: 300;
    font-size: 26px;
    /*font-family: 'Raleway', sans-serif;
    font-weight: 700;
    font-size: 26px;*/
    color: #043476;
    padding: 18px 8px 16px 0;
    -webkit-box-sizing: border-box;
    box-sizing: border-box;
    font-style: italic;
    text-transform: uppercase;
}

div#header > .wrapper > li > ul > li.title img {
    display: inline-block;
    height: 25px;
    padding: 18px 7px 18px 0;
    vertical-align: top;
}

div#header > .wrapper > li > ul > li.title span.version {
    display: inline-block;
    font-size: 11px;
    color: #CCCCCC;
    padding: 30px 0 20px 0;
    vertical-align: top;
    font-style: italic;
}

div#header > .wrapper > li > ul > li.nav {
    -webkit-box-flex: 1;
    -webkit-flex: 1 1 auto;
    -ms-flex: 1 1 auto;
    flex: 1 1 auto;
    text-align: right;
    height: 100%;
    padding-right: 7px;
}

div#header > .wrapper > li > ul > li.nav > ul.navigation,
div#header > .wrapper > li > ul > li.nav > ul.fastswitch {
    list-style: none;
    font: 0;
    height: 100%;
    -webkit-box-sizing: border-box;
    box-sizing: border-box;
}

div#header > .wrapper > li > ul > li.country {
    -webkit-box-flex: 0;
    -webkit-flex: 0 0 32px;
    -ms-flex: 0 0 32px;
    flex: 0 0 32px;
    text-align: right;
    height: 100%;
    padding-right: 7px;
    background-position: center right;
    background-size: 28px;
    background-repeat: no-repeat;
}

div#header > .wrapper > li > ul > li.country.flag-uk {
    background-image: url('/public/images/country/uk.png');
}

div#header > .wrapper > li > ul > li.country.flag-ae {
    background-image: url('/public/images/country/ae.png');
}

div#header > .wrapper > li > ul > li.country.flag-qa {
    background-image: url('/public/images/country/qa.png');
}

div#header > .wrapper > li > ul > li.country:hover {
    cursor: pointer;
    opacity: 0.5;
    transition: 0.15s opacity;
}

div#header ul.navigation {
    height: 65px;
    overflow: hidden;
}

div#header ul.fastswitch {
    height: 65px;
}

div#header ul.navigation > li,
div#header ul.fastswitch > li {
    display: inline-block;
    position: relative;
    margin-left: 19px;
    -webkit-transition: 0.25s all;
    -o-transition: 0.25s all;
    transition: 0.25s all;
    height: 100%;
    line-height: 65px;
    vertical-align: top;
    -webkit-box-sizing: border-box;
    box-sizing: border-box;
}

div#header ul.navigation > li > a {
    font-size: 15px;
    text-transform: uppercase;
    font-family: 'Roboto', sans-serif;
    color: #00003C;
    text-decoration: none;
}

div#header ul.navigation > li:hover:not(.norise) {
    margin-top: -2px;
    cursor: pointer;
}

div#header.gradient span.border {
    position: absolute;
    bottom: -10px;
    left: 0;
    width: 100%;
    height: 10px;
    background-image: linear-gradient(to right bottom, #00003C, #00003C, #00003C, #00003C, #00003C);
}

div#header button.menu {
    display: none;
    background-image: url('/public/images/icon/ffffff/menu.svg');
    background-position: center;
    background-repeat: no-repeat;
    background-size: 16px;
    padding: 19px 24px;
    margin-top: 12px;
    margin-right: 4px;
}

div#header button.menu:hover {
    background-color: #FFFFFF;
    background-image: url('/public/images/icon/00003C/menu.svg') !important;
}

@media (max-width: 900px) {

    div#header ul.navigation {
        display: none;
    }

    div#header button.menu {
        display: inline-block;
    }

}

/* ----- VARIANT ----- */

div#variant {
    display: table;
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-color: RGBA(15, 28, 72, 0.85);
    z-index: 10;
    opacity:0;
    transition: 0.2s opacity;
    visibility: hidden;
}

div#variant.active {
    opacity: 1;
    visibility: visible;
}

div#variant span.close {
    position: absolute;
    top: 70px;
    right: 0;
    width: 100px;
    height: 65px;
    background-image: url('/public/images/icon/ffffff/close.svg');
    background-position: center right+26px;
    background-repeat: no-repeat;
    background-size: 16px;
    line-height: 65px;
    font-size: 18px;
    font-weight: 300;
    color: #FFFFFF;
    padding-right: 55px;
    text-align: right;
    cursor: pointer;
    z-index: 1;
}

div#variant > div.variant {
    display: table-cell;
    vertical-align: middle;
}

div#variant ul {
    width: 100%;
}

div#variant ul > li {
    text-align: center;
    padding: 10px;
    max-width: 325px;
    min-width: 300px;
}

div#variant ul > li > a {
    display: block;
    width: 100%;
    height: 100%;
    text-decoration: none !important;
    padding: 25px;
    cursor: pointer;
    box-sizing: border-box;
    border-radius: 1px;
    transition: 0.15s background-color;
    background-color: RGBA(89, 106, 144, 0.5);
}

div#variant ul > li > a:hover {
    background-color: RGBA(89, 106, 144, 0.7);
}

div#variant ul > li span.flag {
    display: block;
    margin: 0 auto;
    height: 50px;
    width: 50px;
    margin-bottom: 15px;
    background-position: center;
    background-repeat: no-repeat;
    background-size: contain;
}

div#variant ul > li span.flag-uk {
    background-image: url('/public/images/country/uk.png');
}

div#variant ul > li span.flag-ae {
    background-image: url('/public/images/country/ae.png');
}

div#variant ul > li span.flag-qa {
    background-image: url('/public/images/country/qa.png');
}

div#variant ul > li h1 {
    color: #FFFFFF;
    text-align: center;
}

div#variant ul > li h4 {
    color: #DDDDDD;
    text-align: center;
}

div#variant ul > li h5 {
    color: #B7BDD0;
    text-align: center;
    font-size: 12px;
}

/* ----- NAVIGATION WRAPPER ----- */

ul#navigation_wrapper {
    display: -webkit-box;
    display: -webkit-flex;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-orient: horizontal;
    -webkit-box-direction: normal;
    -webkit-flex-direction: row;
    -ms-flex-direction: row;
    flex-direction: row;
    -webkit-flex-wrap: nowrap;
    -ms-flex-wrap: nowrap;
    flex-wrap: nowrap;
    -webkit-box-pack: start;
    -ms-flex-pack: start;
    -webkit-justify-content: flex-end;
    justify-content: flex-end;
    width: 100%;
    font-size: 0;
    list-style: none;
}

ul#navigation_wrapper > li {
    -webkit-box-flex: 0;
    -webkit-flex: 0 0 auto;
    -ms-flex: 0 0 auto;
    flex: 0 0 auto;
    opacity: 1;
    -webkit-transition: 0.25s opacity;
    -o-transition: 0.25s opacity;
    transition: 0.25s opacity;
}

ul#navigation_wrapper > li.hidden {
    opacity: 0;
}

ul#navigation_wrapper > li.pre {
    opacity: 0.05;
}

ul#navigation_wrapper > li.flex {
    -webkit-box-flex: 2;
    -webkit-flex: 2 0 auto;
    -ms-flex: 2 0 auto;
    flex: 2 0 auto;
}

li#main_nav_menu.hidden {
    display: none !important;
}

/* ----- SHORT NAVIGATION ----- */

div#short_navigation {
    position: absolute;
    bottom: -50px;
    left: 0;
    width: 100%;
    height: 50px;
    z-index: 2;
    -webkit-box-sizing: border-box;
    box-sizing: border-box;
    font-size: 0;
}

div#short_navigation > div.container {
    display: none;
    height: 100%;
    width: 100%;
    background: rgba(255,255,255,0.8);
    border-bottom: 1px solid #999999;
    -webkit-box-sizing: border-box;
    box-sizing: border-box;
    text-align: right;
}

div#short_navigation > div.container ul.navigation {
    padding: 0 10px;
}

div#short_navigation > div.container ul.navigation > li {
    line-height: 50px;
}

/* ----- MOBILE NAVIGATION ----- */

div#navigation_mobile {
    position: absolute;
    top: 0;
    right: -225px;
    width: 225px;
    height: 100%;
    background: #0B1B51;
    z-index: 3;
    -webkit-transition: 0.4s right;
    -o-transition: 0.4s right;
    transition: 0.4s right;
}

div#navigation_mobile.active {
    right: 0;
}

div#navigation_mobile > ul {
    position: absolute;
    top: 65px;
    left: 0;
    height: calc(100% - 65px);
    padding: 10px 0;
    width: 100%;
    list-style: none;
    font-size: 0;
    -webkit-box-sizing: border-box;
    box-sizing: border-box;
    overflow-y: scroll;
}

div#navigation_mobile > ul > li {
    font-size: 15px;
    color: #FFFFFF;
    text-transform: uppercase;
    font-family: 'Roboto', sans-serif;
    font-weight: 300;
    -webkit-box-sizing: border-box;
    box-sizing: border-box;

}

div#navigation_mobile > ul > li > a {
    display: block;
    width: 100%;
    height: 100%;
    padding: 15px 20px 15px 32px;
    -webkit-transition: 0.25s padding-left;
    -o-transition: 0.25s padding-left;
    transition: 0.25s padding-left;
    background-position: left+15px center;
    background-repeat: no-repeat;
    background-size: 16px;
    -webkit-box-sizing: border-box;
    box-sizing: border-box;
}

div#navigation_mobile > ul > li > a:hover {
    padding-left: 35px;
    text-decoration: none;
}

div#navigation_mobile div.close {
    position: absolute;
    top: 0;
    left: 0;
    font-size: 15px;
    color: #FFFFFF;
    padding: 15px 20px 15px 32px;
    text-transform: uppercase;
    font-family: 'Roboto', sans-serif;
    font-weight: 300;
    width: 100%;
    height: 65px;
    line-height: 35px;
    border-bottom: 1px solid #00003C;
    margin-bottom: 10px;
    background-image: url('/public/images/icon/ffffff/arrow_left.svg');
    background-position: left+15px center;
    background-repeat: no-repeat;
    background-size: 6px;
    -webkit-box-sizing: border-box;
    box-sizing: border-box;

}

div#navigation_mobile div.close:hover {
    background-color: #00003C;
    cursor: pointer;
}

div#navigation_mobile_mask {
    position: absolute;
    top: 0;
    left: 0;
    width: 0;
    height: 0;
    background: #000000;
    opacity: 0;
    z-index: 2;
    pointer-events: none;
    -webkit-transition: 0.25s opacity;
    -o-transition: 0.25s opacity;
    transition: 0.25s opacity;
}

div#navigation_mobile_mask.active {
    opacity: 0.2;
    pointer-events: all;
    width: 100%;
    height: 100%;
}

/* ----- BODY ----- */

div#body {
    position: relative;
    width: 100%;
    min-height: calc(100% - 65px);
    margin-bottom: -50px;
    text-align: center;
    z-index: 0;
}

html.translated-ltr div#body,
html.translated-rtl div#body {
    min-height: calc(100% - 105px) !important;
    margin-bottom: -90px;
}

/* ----- SPLASH ----- */

div#splash {
    position: absolute;
    left: 0;
    top: 0;
    background-image: linear-gradient(to right bottom, #00003C, #00003C, #00003C, #00003C, #00003C);
    width: 100%;
    height: 550px;
    border-bottom: 1px solid #CCCCCC;
    background-size: cover;
    background-repeat: no-repeat;
    background-position: center;
}

div#splash li.splash-p {
    padding: 0 24px;
}

div#splash.gradient {
    border-bottom: 0;
}

div#splash.gradient::after {
    content: "";
    position: absolute;
    bottom: 0;
    left: 0;
    width: 100%;
    height: 200px;
    background-image: linear-gradient(to bottom, rgba(235,235,235,0), rgba(235,235,235,1));
}

div#splash::before {
    position: absolute;
    content: "";
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-color: rgba(255,255,255,0.2);
}

div#splash.opacity-20::before {
    background-color: rgba(255,255,255,0.25);
}

div#splash.opacity-40::before {
    background-color: rgba(255,255,255,0.4);
}

div#splash.opacity-50::before {
    background-color: rgba(255,255,255,0.5);
}

div#splash.opacity-60::before {
    background-color: rgba(255,255,255,0.6);
}

div#splash.man-on-sofa {
    background-image: url('/public/images/background/man_on_sofa.jpg');
}

div#splash.woman-on-sofa {
    background-image: url('/public/images/background/woman_on_sofa.jpg');
}

div#splash.father-and-daughter {
    background-image: url('/public/images/background/father_and_daughter.jpg');
}

div#splash.forest-grass {
    background-image: url('/public/images/background/forest_grass.jpg');
    background-position: middle;
}

div#splash.forest-sky {
    background-image: url('/public/images/background/forest_sky.jpg');
    background-position: middle;
}

div#splash.boiler-room {
    background-image: url('/public/images/background/boiler_room.jpg');
    background-position: top;
}

div#splash.boiler-room-2 {
    background-image: url('/public/images/background/boiler_room_2.jpg');
    background-position: top;
}

div#splash.heat-meter {
    background-image: url('/public/images/background/heat_meter.jpg');
    background-position: middle;
}

div#splash.living-room {
    background-image: url('/public/images/background/living_room.jpg');
    background-position: middle;
}

div#splash.engineer-tenant {
    background-image: url('/public/images/background/engineer_taking_read_with_tenant.jpg');
    background-position: middle;
}

div#splash.reeds {
    background-image: url('/public/images/background/reeds.jpg');
    background-position: middle;
}

div#splash.forest-border {
    background-image: url('/public/images/background/forest_border.jpg');
    background-position: middle;
}

div#splash.forest-sunset {
    background-image: url('/public/images/background/forest_sunset.jpg');
    background-position: middle;
}

div#splash.woman-standing-kitchen {
    background-image: url('/public/images/background/woman_standing_kitchen.jpg');
    background-position: middle;
}

div#splash.couple-in-kitchen {
    background-image: url('/public/images/background/couple_in_kitchen.jpg');
    background-position: top;
}

div#splash.building-daytime {
    background-image: url('/public/images/background/building_daytime.jpg');
    background-position: top;
}

div#splash.bills-on-table {
    background-image: url('/public/images/background/bills_on_table.jpg');
    background-position: middle;
}

div#splash.man-and-woman-at-table {
    background-image: url('/public/images/background/man_and_woman_at_table.jpg');
    background-position: middle;
}

div#splash.man-office {
    background-image: url('/public/images/background/man_office.jpg');
    background-position: middle;
}

div#splash.man-sofa-tablet {
    background-image: url('/public/images/background/man_sofa_tablet.jpg');
    background-position: top;
}

div#splash.man-son-sofa {
    background-image: url('/public/images/background/man_son_sofa.jpg');
    background-position: middle;
}

div#splash.radiator {
    background-image: url('/public/images/background/radiator.jpg');
    background-position: middle;
}

div#splash.woman-leaflet {
    background-image: url('/public/images/background/woman_leaflet.jpg');
    background-position: middle;
}

div#splash.uae-men-walking-outside {
    background-image: url('/public/images/background/uae_men_walking_outside.jpg');
    background-position: middle;
}

div#splash.qatar-men-walking-outside {
    background-image: url('/public/images/background/qatar.jpg');
    background-position: middle;
}

div#splash.uae-man-on-phone {
    /*background-image: url('/public/images/background/uae_skyline_4.jpg');*/
    background-image: url('/public/images/background/uae_man_on_phone.jpg');
    background-position: middle;
}

div#splash.uae-skyline-1 {
    background-image: url('/public/images/background/uae_skyline_1.jpg');
    background-position: middle;
}

div#splash.uae-skyline-2 {
    background-image: url('/public/images/background/uae_skyline_2.jpg');
    background-position: bottom;
}

div#splash.uae-skyline-3 {
    background-image: url('/public/images/background/uae_skyline_3.jpg');
    background-position: middle;
}

div#splash.uae-skyline-4 {
    background-image: url('/public/images/background/uae_skyline_4.jpg');
    background-position: top;
}

@media (max-width: 900px) {

    div#splash::before {
        background-color: rgba(255,255,255,0.65);
    }

    div#splash.man-on-sofa {
        background-image: url('/public/images/background/man_on_sofa_mobile.jpg');
    }

}

/* ----- MAIN ------ */

div#main {
    position: relative;
    width: 100%;
    pointer-events: none;
}

div.maintenance-banner,
div.patience-banner {
    position: absolute;
    width: 100%;
}

div.maintenance-banner h6 {
    max-width: 1170px;
    margin: 25px auto 0 auto;
    padding: 18px 20px;
    border-radius: 3px;
    background: rgb(15, 28, 72, 0.85);
    /* background: rgb(254, 90, 16, 0.85); */
    box-sizing: border-box;
    text-align: center;
    color: #ffffff;
}

div.patience-banner h6 {
    max-width: 1190px;
    margin: 20px auto 0 auto;
    padding: 14px 20px;
    border-radius: 3px;
    background: rgb(254, 90, 16, 0.85);
    box-sizing: border-box;
    text-align: center;
    color: #ffffff;
}

@media (max-width: 900px) {

    div.maintenance-banner,
    div.patience-banner {
        position: relative;
        border-radius: 0;
    }

}

/* ----- FOOTER ----- */

div#footer_push {
    width: 100%;
    height: 50px;
}

html.translated-ltr div#footer_push,
html.translated-rtl div#footer_push {
    height: 90px;
}

div#footer {
    position: relative;
    width: 100%;
    min-height: 50px;
    background: #FFFFFF;
    -webkit-box-sizing: border-box;
    box-sizing: border-box;
    z-index: 1;
}

/* html.translated-ltr div#footer,
html.translated-rtl div#footer {
    margin-top: 40px;
} */

div#footer::before {
    content: "";
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 0;
    border-top: 1px solid #D6D6D6;
}

div#footer > ul > li:first-child {
    flex: 0 0 25%;
}

div#footer h6 {
    line-height: 50px;
}

div#footer ul.footer {
	width: 100%;
	list-style: none;
}

div#footer ul.footer > li {
	position: relative;
	display: inline-block;
	padding-left: 6px;
	margin-left: 22px;
}

div#footer ul.footer > li:not(:last-child)::after {
	content: "|";
	position: absolute;
	top: 0;
	right: -19px;
	width: 10px;
	height: 100%;
    color: #999999;
    font-size: 14px;
    font-weight: 400;
	text-align: center;
	line-height: 50px;
}

div#footer ul.footer > li > a {
    line-height: 50px;
	text-transform: uppercase;
}

div#footer .powered-by-ista img {
    height: 15px;
    margin-left: 6px;
    vertical-align: baseline;
}

/*div#footer .powered-by-ista {
    background-position: top right;
    background-repeat: no-repeat;
    background-size: 34px;
    background-image: url('/public/images/ista_dark.svg');
    padding-right: 40px;
}*/

@media (max-width: 1024px) {

    div#footer > ul > li:first-child {
        flex: 1 1 0%;
    }

    div#footer ul.footer > li:first-child {
        margin: 0;
    }

    div#footer h6 {
        text-align: center !important;
    }

}

/* ----- COOKIES ----- */

div#cookies {
	position: fixed;
	bottom: -225px;
	left: 0;
	width: 100%;
	height: 225px;
	background: rgba(15, 28, 72, 0.85);
	z-index: 1000;
	transition: 1.25s bottom;
}

div#cookies.visible {
	bottom: 0;
}

div#cookies > div.wrapper {
	max-width: 1250px;
	padding: 24px 35px;
	margin: 0 auto;
	box-sizing: border-box;
}

div#cookie_acceptance {
    text-align: right !important;
}

div#cookies h2,
div#cookies p {
	color: #FFFFFF;
	margin: 0 !important;
}

div#cookie_acceptance h2 {
    display: inline-block;
    width: auto;
    font-size: 24px;
    margin-left: 34px !important;
	cursor: pointer;
}

div#cookie_acceptance h2 > a {
    text-decoration: none;
}

h2#accept_cookies > span {
	display: inline-block;
	height: 20px;
	width: 20px;
	background-image: url('/public/images/icon/ffffff/tick.svg');
	background-position: right center;
	background-size: 20px;
	background-repeat: no-repeat;
	margin-right: 12px;
	vertical-align: middle;
}

div#cookie_acceptance h2:hover {
	color: #73A908;
}

h2#accept_cookies:hover > span {
	background-image: url('/public/images/icon/73a908/tick.svg');
}

@media (max-width: 900px) {

	div#cookies {
		height: 250px !important;
		bottom: -250px;
	}

}

@media (max-width: 600px) {

	div#cookies {
		height: 350px !important;
		bottom: -350px;
	}

}

/* ----- WRAPPER ----- */

ul.wrapper {
    display: -webkit-box;
    display: -webkit-flex;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-orient: horizontal;
    -webkit-box-direction: normal;
    -webkit-flex-direction: row;
    -ms-flex-direction: row;
    flex-direction: row;
    -webkit-flex-wrap: wrap;
    -ms-flex-wrap: wrap;
    flex-wrap: wrap;
    -webkit-box-pack: justify;
    -ms-flex-pack: justify;
    -webkit-justify-content: space-between;
    justify-content: space-between;
    position: relative;
    max-width: 1250px;
    padding: 0 20px;
    margin: 0 auto;
    list-style: none;
    font-size: 0;
    -webkit-box-sizing: border-box;
    box-sizing: border-box;
}

ul.wrapper.splash {
    min-height: 450px;
}

ul.wrapper > li {
    -webkit-box-flex: 1;
    -webkit-flex: 1 1 0%;
    -ms-flex: 1 1 0%;
    flex: 1 1 0%;
    padding: 0 10px;
    -webkit-box-sizing: border-box;
    box-sizing: border-box;
    pointer-events: all;
}

ul.wrapper.half > li {
    -webkit-box-flex: 1;
    -webkit-flex: 1 1 50%;
    -ms-flex: 1 1 50%;
    flex: 1 1 50%;
    max-width: 50%;
}

ul.wrapper > li.sidebar {
    -webkit-box-flex: 0;
    -webkit-flex: 0 1 300px;
    -ms-flex: 0 1 300px;
    flex: 0 1 300px;
}

ul.wrapper > li.fullwidth {
    -webkit-box-flex: 1;
    -webkit-flex: 1 0 100%;
    -ms-flex: 1 0 100%;
    flex: 1 0 100%;
}

@media (max-width: 1024px) {

    ul.wrapper > li.sidebar {
        -webkit-box-flex: 0;
        -webkit-flex: 0 0 275px;
        -ms-flex: 0 0 275px;
        flex: 0 0 275px;
    }

    div#footer ul.wrapper > li {
        -webkit-box-flex: 1;
        -webkit-flex: 1 0 100%;
        -ms-flex: 1 0 100%;
        flex: 1 0 100%;
        text-align: center;
    }

}

@media (max-width: 900px) {

    ul.wrapper.half > li {
        -webkit-box-flex: 1;
        -webkit-flex: 1 0 100%;
        -ms-flex: 1 0 100%;
        flex: 1 0 100%;
        max-width: 100%;
    }

    ul.wrapper > li.sidebar {
        -webkit-box-flex: 0;
        -webkit-flex: 1 0 100%;
        -ms-flex: 1 0 100%;
        flex: 1 0 100%;
    }

}

@media (max-width: 600px) {

    ul.wrapper {
        padding: 0;
    }

    ul.wrapper > li {
        -webkit-box-flex: 1;
        -webkit-flex: 1 0 100%;
        -ms-flex: 1 0 100%;
        flex: 1 0 100%;
        text-align: center;
    }

    div#header ul.wrapper > li {
        text-align: left !important;
    }

    ul.wrapper > li.insignificant {
        display: none;
    }
}

/* ----- TILE ------ */

ul.tile {
    list-style: none;
    width: 100%;
    font-size: 0;
    text-align: left;
    pointer-events: all;
}

ul.tile > li {
    position: relative;
    display: block;
    padding-bottom: 17px;
    width: 100%;
    -webkit-box-sizing: border-box;
    box-sizing: border-box;
    vertical-align: top;
    height: auto;
    margin: 0 auto;
}

ul.tile > li.spinner::after {
    position: absolute;
    content: "";
    top: 0;
    right: 0;
    width: 100%;
    height: 100%;
    background-position: center center;
    background-repeat: no-repeat;
    background-size: 65px;
    background-image: url('/public/images/spinner.gif');
}

ul.tile > li.loading::after {
    content: "";
    top: 0;
    left: 0;
    position: absolute;
    width: 100%;
    height: 100%;
    background-color: rgba(255, 255, 255, 0.5);
    transition: 0.25s all;
}

ul.wrapper.half ul.tile > li {
    min-width: auto;
}

ul.tile.small > li {
    max-width: 600px;
    min-width: auto;
}

ul.tile.medium > li {
    max-width: 900px;
    min-width: auto;
}

ul.tile.mini > li {
    display: inline-block;
    height: 175px;
    min-width: auto;
    width: 25%;
    padding: 17px;
}

ul.tile > li > div {
    position: relative;
    width: 100%;
    min-height: 525px;
    height: 100%;
    background: #FFFFFF;
    border: 1px solid #DDDDDD;
    border-radius: 2px;
    box-shadow: 0px 0px 3px 0px rgba(0,0,0,0.1);
    -webkit-box-sizing: border-box;
    box-sizing: border-box;
    padding: 22px 26px;
    text-align: center;
    -webkit-transition: 0.25s -webkit-box-shadow;
    transition: 0.25s -webkit-box-shadow;
    -o-transition: 0.25s box-shadow;
    transition: 0.25s box-shadow;
    transition: 0.25s box-shadow, 0.25s -webkit-box-shadow;
    overflow: hidden;
}

ul.tile > li.auto-height > div {
    min-height: 0 !important;
}

ul.tile.mini > li > div {
    min-height: 140px;
    padding: 12px 9px;
    cursor: pointer;
    -webkit-transition: 0.15s margin-top;
    -o-transition: 0.15s margin-top;
    transition: 0.15s margin-top;
    -webkit-animation: 0.85s ease-out 0s 1 tileDrop;
    animation: 0.85s ease-out 0s 1 tileDrop;
}

ul.tile > li:not(.no-bottom) > div::before {
    content: "";
    position: absolute;
    bottom: 0;
    left: 0;
    height: 4px;
    width: 100%;
    background-image: linear-gradient(to right bottom, #00003C, #00003C, #00003C, #00003C, #00003C);
}

ul.tile > li:hover > div {
    -webkit-box-shadow: 0px 0px 8px 0px rgba(0,0,0,0.3);
    box-shadow: 0px 0px 8px 0px rgba(0,0,0,0.3);
}

ul.tile.mini > li > div:hover  {
    margin-top: -3px;
}

ul.tile.mini > li > div:hover a {
    text-decoration: none !important;
}

@keyframes tileDrop {
  0% {
    transform: translateY(-8px);
  }
  100% {
    transform: translateY(0);
  }
}

ul.tile > li span.icon {
    display: inline-block;
    width: 70px;
    height: 50px;
    background-position: center;
    background-repeat: no-repeat;
    background-size: contain;
}

ul.tile > li span.desc {
    position: absolute;
    width: 100%;
    height: calc(100% - 58px);
    top: 44px;
    left: 0;
    padding: 10px 18px 0 18px;
    -webkit-box-sizing: border-box;
    box-sizing: border-box;
    background-color: rgba(255,255,255,0.85);
    opacity: 0;
    -webkit-transition: 0.35s opacity;
    -o-transition: 0.35s opacity;
    transition: 0.35s opacity;
    cursor: pointer !important;
}

ul.tile > li:hover span.desc {
    opacity: 1;
    cursor: default;
}

@media (max-width: 1200px) {

    ul.tile.mini > li {
        width: 33%;
    }

}

@media (max-width: 900px) {

    ul.tile.mini > li {
        width: 50%;
    }

}

@media (max-width: 600px) {

    ul.tile.mini > li {
        width: 100%;
    }

    ul.tile > li.h-525 > div {
        min-height: 560px;
    }

}

/* ----- TILE NAVIGATION ----- */

ul.tile ul.navigation {
    list-style: none;
    font-size: 0;
}

ul.tile ul.navigation > li {
    font-size: 15px;
    text-align: left;
    padding: 7px 0 7px 28px;
    color: #444444;
    background-repeat: no-repeat;
    background-size: 16px;
    background-position: left;
}

ul.tile ul.navigation > li:hover {
    text-decoration: underline;
    cursor: pointer;
}

/* ----- BREADCRUMBS ----- */

ul.breadcrumbs {
    list-style: none;
    font-size: 0;
    text-align: left;
    margin-bottom: 14px;
    padding-left: 24px;
    pointer-events: all;
}

ul.breadcrumbs > li {
    display: inline-block;
    font-size: 14px;
    color: #999999;
    text-transform: uppercase;
    font-family: "Roboto", sans-serif;
}

ul.breadcrumbs > li:hover {
    text-decoration: underline;
    cursor: pointer;
}

ul.breadcrumbs > li:not(:last-child) {
    padding-right: 10px;
}

ul.breadcrumbs > li:not(:last-child)::after {
    display: inline-block;
    content: ">";
    padding-left: 10px;
    text-decoration: none !important;
}

/* ----- WARNING ----- */

div#app_warning {
    display: none;
    position: absolute;
    top: 87px;
    left: 0;
    width: 100%;
    margin: 0;
    padding: 0 30px;
    height: 42px;
    -webkit-box-sizing: border-box;
    box-sizing: border-box;
    pointer-events: all;
    z-index: 1;
    text-align: center;
}

div#app_warning > h6 {
    display: inline-block;
    max-width: 1192px;
    width: 100%;
    height: 100%;
    border-radius: 3px;
    margin: 0 auto;
    line-height: 42px;
    font-size: 15px;
    font-weight: 400;
    padding: 0 24px;
    color: #212121;
    background: rgba(255,176,128,0.9);
    border: 1px solid #D9946D;
    -webkit-box-sizing: border-box;
    box-sizing: border-box;
    text-align: center;
    -webkit-transition: 0.25s all;
    -o-transition: 0.25s all;
    transition: 0.25s all;
}

div#app_warning[data-size=small] > h6 {
    max-width: 600px;
}

div#app_warning[data-level=error] > h6 {
    background: rgba(255,131,128,0.9);
    border: 1px solid #D96F6D;
}

div#app_warning[data-level=success] > h6 {
    background: rgba(130,217,143,0.9);
    border: 1px solid #8CE996;
}

@media (max-width: 600px) {

    div#app_warning {
        top: 11px;
        z-index: 2;
        padding: 0 10px;
    }

}

/* ----- IMG ----- */

div.img {
    width: 100%;
    height: 125px;
    background-repeat: no-repeat;
    background-position: center;
    background-size: contain;
}

div.img.medium {
    max-height: 50px;
}

div.img.meter {
    background-image: url('/public/images/icon/b7bdd0/valve_closed.svg');
}

div.img.success {
    background-image: url('/public/images/icon/b7bdd0/success.svg');
    max-height: 100px;
}

div.img.conflict {
    background-image: url('/public/images/icon/b7bdd0/duplicate.svg');
    background-size: 110px;
}

div.img.no-email {
    background-image: url('/public/images/icon/b7bdd0/email.svg');
    background-size: 80px;
}

div.img.forbidden {
    background-image: url('/public/images/icon/b7bdd0/forbidden.svg');
    background-size: 145px;
}

div.img.linked {
    background-image: url('/public/images/icon/b7bdd0/linked.svg');
    background-size: 80px;
}

/* ----- FONT ----- */

h1 {
    font-size: 32px;
    font-weight: 400;
    text-align: left;
    color: #0B1B51;
    font-family: 'Open Sans', sans-serif;
}

h2 {
    font-size: 26px;
    font-weight: 300;
    text-align: left;
    color: #00003C;
    font-family: 'Open Sans', sans-serif;
}

h3 {
    font-size: 22px;
    font-weight: 300;
    text-align: left;
    color: #00003C;
    font-family: 'Open Sans', sans-serif;
}

h4 {
    position: relative;
    font-size: 19px;
    font-weight: 300;
    text-align: left;
    color: #00003C;
    font-family: 'Open Sans', sans-serif;
}

h5 {
    color: #00003C;
    font-size: 15px;
    font-weight: 400;
    text-align: left;
}

h6,
a.h6 {
    color: #999999;
    font-size: 14px;
    font-weight: 400;
    text-align: left;
}

p {
    position: relative;
    color: #212121;
    font-size: 15px;
    font-weight: 300;
    text-align: left;
}

span.font-bold,
p > b,
p > span > b {
    font-weight: 600;
}

.align-right {
    text-align: right;
}

p.faint {
    color: #666666;
}

p.icon,
h4.icon,
h5.icon,
h6.icon {
    background-repeat: no-repeat;
    background-position: left;
    background-size: 16px;
    padding-left: 26px;
}

p.icon.large,
h4.icon.large,
h5.icon.large,
h6.icon.large {
    background-repeat: no-repeat;
    background-position: left;
    background-size: contain;
    background-size: 20px;
    padding-left: 34px;
    line-height: 20px;
}

.font-upper {
    text-transform: uppercase;
}

.font-nowrap {
    white-space: nowrap;
}

.font-wordbreak {
    word-break: break-all;
    white-space: normal;
    word-wrap: break-word;
}

.font-width-100 {
    width: 100%;
}

.font-weight-300 {
    font-weight: 300 !important;
}

.font-weight-400 {
    font-weight: 400 !important;
}

.font-weight-500 {
    font-weight: 500 !important;
}

.font-weight-600 {
    font-weight: 600 !important;
}

a {
    cursor: pointer;
    pointer-events: all;
    color: inherit;
    text-decoration: none;
}

a.underline {
    text-decoration: underline !important;
}

a:hover {
    text-decoration: underline;
}

a.nounder:hover {
    text-decoration: none;
}

a.under:hover {
    text-decoration: underline !important;
}

h1.inline,
h2.inline,
h3.inline,
h4.inline,
h5.inline,
h6.inline,
.inline {
    display: inline-block;
}

span.info {
    display: inline-block;
    width: 15px;
    height: 15px;
    line-height: 100%;
    vertical-align: top;
    margin-top: 5px;
    margin-left: 6px;
    background-image: url('/public/images/icon/00003C/query.svg');
    background-size: 15px;
    background-position: center;
    background-repeat: no-repeat;
}

form div.field.inline > span.info {
    padding: 20px 0 0 10px;
}

h6 > span.info {
    margin-top: 2px;
    margin-left: 9px;
}

td > span.info {
    margin-top: 3px;
}

@media (max-width: 600px) {

    h1 {
        font-size: 26px;
    }

    h2 {
        font-size: 24px;
    }

    h3 {
        font-size: 21px;
    }

    h4 {
        font-size: 17px;
    }

    h5 {
        font-size: 14px;
    }

    h6 {
        font-size: 13px;
    }

    p {
        font-size: 14px;
    }

    span.info {
        display: none;
    }

}

/* ----- LINE ----- */

div.hline {
    width: 100%;
    height: 1px;
    background: #D6D6D6;
    margin-bottom: 17px;
}

/* ----- SPACER ----- */

div.vspacer-10 {
    min-height: 10px;
}

div.vspacer-15 {
    min-height: 15px;
}

div.vspacer-20 {
    min-height: 20px;
}

div.vspacer-25 {
    min-height: 25px;
}

div.vspacer-30 {
    min-height: 30px;
}

div.vspacer-40 {
    min-height: 40px;
}

div.vspacer-50 {
    min-height: 50px;
}

div.vspacer-60 {
    min-height: 60px;
}

div.vspacer-70 {
    min-height: 70px;
}

div.vspacer-80 {
    min-height: 80px;
}

div.vspacer-90 {
    min-height: 90px;
}

div.vspacer-100 {
    min-height: 100px;
}

div.vspacer-150 {
    min-height: 150px;
}

div.vspacer-200 {
    min-height: 200px;
}

div.vspacer-400 {
    min-height: 400px;
}

div.vspacer-top {
    min-height: 75px;
}

div.vspacer-index {
    min-height: 100px;
}

div.vspacer-dashboard {
    min-height: 100px;
}

@media (max-width: 1024px) {

    div.vspacer-dashboard {
        min-height: 60px;
    }

}

@media (max-width: 900px) {

    div.vspacer-index {
        min-height: 60px;
    }

    div.vspacer-dashboard {
        min-height: 60px;
    }

}

@media (max-width: 600px) {

    div.vspacer-top {
        min-height: 32px;
    }

}

/* ----- FLEXBOX ----- */

.flexbox,
li.help #article ul.column {
    display: -webkit-box;
    display: -webkit-flex;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-orient: horizontal;
    -webkit-box-direction: normal;
    -webkit-flex-direction: row;
    -ms-flex-direction: row;
    flex-direction: row;
    -webkit-flex-wrap: wrap;
    -ms-flex-wrap: wrap;
    flex-wrap: wrap;
    -webkit-box-pack: center;
    -ms-flex-pack: center;
    -webkit-justify-content: center;
    justify-content: center;
    width: 100%;
    list-style: none;
    box-sizing: border-box;
}

.flexbox.wrap-reverse {
    -webkit-flex-wrap: wrap-reverse;
    -ms-flex-wrap: wrap-reverse;
    flex-wrap: wrap-reverse;
}

.flexbox.nowrap {
    -webkit-flex-wrap: nowrap;
    -ms-flex-wrap: nowrap;
    flex-wrap: nowrap;
}

.flexbox.justify-start {
    -webkit-box-pack: start;
    -ms-flex-pack: start;
    -webkit-justify-content: flex-start;
    justify-content: flex-start;
}

.flexbox.justify-around {
    -ms-flex-pack: distribute;
    -webkit-justify-content: space-around;
    justify-content: space-around;
}

.flexbox.justify-between {
    -webkit-box-pack: justify;
    -ms-flex-pack: justify;
    -webkit-justify-content: space-between;
    justify-content: space-between;
}

.flexbox > button {
    -webkit-box-flex: 0;
    -webkit-flex: 0 0 auto;
    -ms-flex: 0 0 auto;
    flex: 0 0 auto;
}

ul.flexbox > li,
.flexbox > *,
li.help #article ul.column > li {
    -webkit-box-flex: 1;
    -webkit-flex: 1 1 auto;
    -ms-flex: 1 1 auto;
    flex: 1 1 auto;
}

ul.flexbox > li.equal-50,
li.help #article ul.column.equal > li {
    -webkit-box-flex: 1;
    -webkit-flex: 1 0 50%;
    -ms-flex: 1 0 50%;
    flex: 1 0 50%;
}

ul.flexbox > li.noflex,
.flexbox > .noflex,
li.help #article ul.column > li.collapse {
    -webkit-box-flex: 0;
    -webkit-flex: 0 0 auto;
    -ms-flex: 0 0 auto;
    flex: 0 0 auto;
}

ul.flexbox > li.flexfull {
    -webkit-box-flex: 1;
    -webkit-flex: 1 0 100%;
    -ms-flex: 1 0 100%;
    flex: 1 0 100%;
}

/* ----- TILE LIST ----- */

ul.tile-list {
    position: relative;
    list-style: none;
    border-top: 1px solid #CCCCCC;
}

ul.tile-list.loading::after {
    content: "";
    position: absolute;
    top: 0;
    left: 0;
    height: 150px;
    width: 100%;
    background-position: center;
    background-repeat: no-repeat;
    background-image: url('/public/images/spinner.gif');
    background-size: 65px;
}

ul.tile-list > li {
    border-bottom: 1px solid #CCCCCC;
    padding: 12px 19px 12px 7px;
    cursor: pointer;
}

ul.tile-list > li:not(.no-arrow) {
    background-image: url('/public/images/icon/00003C/arrow_right.svg');
    background-position: right+12px center;
    background-repeat: no-repeat;
    background-size: 7px;
}

ul.tile-list > li.icon {
    padding-right: 48px;
    background-position: center right+10px;
    background-size: 28px;
}

ul.tile-list > li.icon.email {
    background-image: url('/public/images/icon/0b1b51/email.svg');
}

ul.tile-list > li.icon.billingagentphone {
    background-image: url('/public/images/icon/0b1b51/contact.svg');
}

ul.tile-list > li.icon.ialreadyhaveacode {
    background-image: url('/public/images/icon/0b1b51/number.svg');
}

ul.tile-list > li:not(.empty):hover {
    background-color: #EEEEEE;
    transition: 0.25s background-color;
}

ul.tile-list > li.card {
    position: relative;
    padding-left: 75px;
}

ul.tile-list > li.card::before {
    content: "";
    position: absolute;
    top: 50%;
    margin-top: -20px;
    left: 12px;
    height: 46px;
    width: 46px;
    background-position: center;
    background-repeat: no-repeat;
    background-color: #CCCCCC;
    background-size: contain;
    border-radius: 10px;
}

ul.tile-list > li.card.visa::before {
    background-image: url('/public/images/paymentcard/stripe/visa.svg');
    background-color: transparent;
}

ul.tile-list > li.card.mastercard::before {
    background-image: url('/public/images/paymentcard/stripe/mastercard.svg');
    background-color: transparent;
}

ul.tile-list > li.card.amex::before {
    background-image: url('/public/images/paymentcard/stripe/amex.svg');
    background-color: transparent;
}

ul.tile-list > li.card > span.delete {
    content: "";
    position: absolute;
    display: inline-block;
    right: 15px;
    top: 50%;
    height: 100%;
    line-height: 100%;
}

ul.tile-list > li.card > span.delete:hover > h6 {
    color: #555555;
    transition: 0.25s color;
}

/* ----- METER LIST ----- */

ul.meter-list,
ul.contact-list {
    display: -webkit-box;
    display: -webkit-flex;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-orient: horizontal;
    -webkit-box-direction: normal;
    -webkit-flex-direction: row;
    -ms-flex-direction: row;
    flex-direction: row;
    -webkit-flex-wrap: wrap;
    -ms-flex-wrap: wrap;
    flex-wrap: wrap;
    -ms-flex-pack: distribute;
    -webkit-justify-content: space-around;
    justify-content: space-around;
    min-height: 131px;
    list-style: none;
}

ul.meter-list > li,
ul.contact-list > li {
    -webkit-box-flex: 1;
    -webkit-flex: 1 0 auto;
    -ms-flex: 1 0 auto;
    flex: 1 0 auto;
    padding: 6px 3px;
}

ul.meter-list > li > div,
ul.contact-list > li > div {
    margin-bottom: 12px;
}

ul.meter-list > li > img,
ul.contact-list > li > img {
    display: block;
    height: 44px;
    margin: 0 auto 22px auto;
}

ul.meter-list > li > a,
ul.contact-list > li > a {
    white-space: nowrap;
}

ul.meter-list > li.selected > a,
ul.contact-list > li.selected > a {
    font-weight: 400;
    background-color: #00003C;
    color: #FFFFFF;
}

/* ----- TARIFF LIST ----- */

ul.tariff-list {
    position: relative;
    width: 100%;
    display: -webkit-box;
    display: -webkit-flex;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-orient: horizontal;
    -webkit-box-direction: normal;
    -webkit-flex-direction: row;
    -ms-flex-direction: row;
    flex-direction: row;
    -webkit-flex-wrap: wrap;
    -ms-flex-wrap: wrap;
    flex-wrap: wrap;
    -ms-flex-pack: distribute;
    -webkit-justify-content: space-around;
    justify-content: space-around;
    min-height: 100px;
    list-style: none;
}

ul.tariff-list.loading::after {
    position: absolute;
    content: "";
    top: 0;
    left: 0;
    width: 100%;
    height: calc(100% - 12px);
    border: 1px solid #000;
    background-position: center;
    background-repeat: no-repeat;
    background-size: 65px;
    background-image: url('/public/images/spinner.gif');
    -webkit-box-sizing: border-box;
    box-sizing: border-box;
}

ul.tariff-list > li {
    -webkit-box-flex: 1;
    -webkit-flex: 1 0 auto;
    -ms-flex: 1 0 auto;
    flex: 1 0 auto;
    padding: 24px 24px;
}

ul.tariff-list > li > h3 {
    text-align: center;
    margin-bottom: 3px;
    white-space: nowrap;
}

ul.tariff-list > li > h6 {
    text-transform: uppercase;
    text-align: center;
    white-space: nowrap;
}

/* ----- FORM ----- */

form {
    text-align: left;
    -webkit-transition: 0.25s opacity;
    -o-transition: 0.25s opacity;
    transition: 0.25s opacity;
}

form div.field.inline {
    display: block;
}

form label {
    line-height: 24px;
    position: relative;
    display: block;
    font-size: 17px;
    font-weight: 300;
    margin-bottom: 12px;
    width: 100%;
    color: #212121;
}

form label.icon {
    width: calc(100% - 31px);
    margin-left: 31px;
}

form label.icon::before {
    content: "";
    position: absolute;
    top: 0;
    left: -31px;
    display: inline-block;
    width: 24px;
    height: 100% !important;
    -webkit-box-sizing: border-box;
    box-sizing: border-box;
    background-position: center;
    background-repeat: no-repeat;
    background-size: 24px;
}

form div.field.inline > label {
    display: inline-block;
    width: 175px;
    line-height: 43px;
}

input,
div.input {
    position: relative;
    display: block;
    border: 1px solid #BBBBBB;
    padding: 10px 10px;
    font-size: 16px;
    font-weight: 300;
    color: #444444;
    width: 100%;
    -webkit-box-sizing: border-box;
    box-sizing: border-box;
    margin-bottom: 18px;
    border-radius: 4px;
    background: #F2F2F2;
    -webkit-appearance: none;
    vertical-align: top;
}

input[type=checkbox] {
    position: relative;
    cursor: pointer;
    width: 18px;
    display: inline-block;
}
input[type=checkbox]:before {
    content: "";
    display: block;
    position: absolute;
    width: 18px;
    height: 18px;
    top: 0;
    left: 0;
    border-radius: 3px;
    background-color: #F2F2F2;
}
input[type=checkbox]:checked:after {
    content: "";
    display: block;
    width: 5px;
    height: 10px;
    border: solid black;
    border-width: 0 2px 2px 0;
    -webkit-transform: rotate(45deg);
    -ms-transform: rotate(45deg);
    transform: rotate(45deg);
    position: absolute;
    top: 2px;
    left: 6px;
}
.checkboxLabel {
    display: inline-block;
    width: auto;
    margin-left: 20px;
}

form div.field.inline > div.cbqwrapper {
    display: inline-block;
    vertical-align: top;
}

form div.field.inline > input,
form div.field.inline > div.cbqwrapper > input {
    display: inline-block;
    width: auto;
}

input.empty {
    background-color: #FFE5E5;
    border-color: #D96F6D;
}

form.loading {
    opacity: 0.65;
}

input::placeholder {
    color: #BBBBBB;
}

input::-webkit-input-placeholder {
    color: #BBBBBB;
}

input:-moz-placeholder {
    color: #BBBBBB;
}

input::-moz-placeholder {
    color: #BBBBBB;
}

input:-ms-input-placeholder {
    color: #BBBBBB;
}

input.empty::placeholder {
    color: #999999;
}

input.empty::-webkit-input-placeholder {
    color: #999999;
}

input.empty:-moz-placeholder {
    color: #999999;
}

input.empty::-moz-placeholder {
    color: #999999;
}

input.empty:-ms-input-placeholder {
    color: #999999;
}

input[disabled],
textarea[disabled] {
    -webkit-opacity: 1;
    -webkit-text-fill-color: #555555;
    color: #555555;
    border-color: #D6D6D6;
}

input[disabled].disabled {
    cursor: not-allowed;
}

form.disable input {
    pointer-events: none !important;
    opacity: 0.75;
}

input.search {
    padding-right: 40px;
    background-image: url('/public/images/icon/00003C/search.svg');
    background-repeat: no-repeat;
    background-position: right+10px center;
    background-size: 22px;
}


select {
    width: 100%;
}

textarea {
    border: 1px solid #BBBBBB;
    padding: 10px 10px;
    font-size: 16px;
    font-weight: 300;
    color: #444444;
    width: 100%;
    -webkit-box-sizing: border-box;
    box-sizing: border-box;
    margin-bottom: 18px;
    border-radius: 4px;
    background: #F2F2F2;
    -webkit-appearance: none;
    vertical-align: top;
    min-height: 200px;
}

.select2-container {
    margin-bottom: 18px;
}

form.disable .select2-container {
    pointer-events: none !important;
    opacity: 0.75;
}

.select2-selection,
.select2-selection__rendered,
.select2-selection__arrow {
    height: 44px !important;
    line-height: 44px !important;
}

.select2-selection__placeholder,
.select2-selection__rendered {
    font-size: 16px !important;
    font-weight: 300 !important;
}

.select2-selection__placeholder {
    color: #999999 !important;
}

.select2-hidden-accessible {
    width: calc(100% - 52px) !important;
    height: 44px !important;
}

.select2-results__option {
    font-size: 16px;
}

a.button,
button.button {
    display: inline-block;
    font-size: 14px;
    line-height: 14px;
    font-weight: 400;
    border: 2px solid #00003C;
    border-radius: 20px;
    padding: 13px 20px 12px 20px;
    margin-bottom: 12px;
    font-family: 'Roboto', sans-serif;
    text-transform: uppercase;
    color: #00003C;
    cursor: pointer;
    background-color: transparent;
    transition: 0.2s background-color;
    -webkit-box-sizing: border-box;
    box-sizing: border-box;
    text-decoration: none;
}

a.button.disabled,
a.button[disabled],
button.button[disabled] {
    color: #B7BDD0;
    border: 2px solid #B7BDD0;
    cursor: default;
    pointer-events: none;
}

a.button:not(.nohover):not([disabled]):not(.disabled):hover,
button.button:not(.nohover):not([disabled]):not(.disabled):hover {
    background-color: #00003C;
    color: #FFFFFF;
}

a.button.arrow-right:not(.loading),
button.button.arrow-right:not(.loading) {
    background-image: url('/public/images/icon/00003C/arrow_right.svg');
    background-position: center right+20px;
    background-repeat: no-repeat;
    background-size: 7px;
    padding-right: 40px;
}

a.button.arrow-left:not(.loading),
button.button.arrow-left:not(.loading) {
    background-image: url('/public/images/icon/00003C/arrow_left.svg');
    background-position: center left+20px;
    background-repeat: no-repeat;
    background-size: 7px;
    padding-left: 40px;
}

a.button.arrow-right:not([disabled]):hover,
button.button.arrow-right:not([disabled]):hover {
    background-image: url('/public/images/icon/ffffff/arrow_right.svg');
}

a.button.arrow-left:not([disabled]):hover,
button.button.arrow-left:not([disabled]):hover {
    background-image: url('/public/images/icon/ffffff/arrow_left.svg');
    background-position: center left+20px;
    background-repeat: no-repeat;
    background-size: 7px;
    padding-left: 40px;
}

a.button.translucent,
button.button.translucent {
    background-color: rgba(255,255,255,0.3);
}

a.button.translucent.trans-50,
button.button.translucent.trans-50 {
    background-color: rgba(255,255,255,0.5);
}

a.button.selected,
button.button.selected,
a.button.blue,
button.button.blue {
    font-weight: 300;
    background-color: #00003C;
    color: #FFFFFF;
}

a.button.blue:not(.nohover):not([disabled]):hover,
button.button.blue:not(.nohover):not([disabled]):hover {
    background-color: #FFFFFF;
    color: #00003C;
}

a.button.blue.arrow-right:not(.loading),
button.button.blue.arrow-right:not(.loading) {
    background-image: url('/public/images/icon/ffffff/arrow_right.svg');
}

a.button.blue.arrow-right:not([disabled]):hover,
button.button.blue.arrow-right:not([disabled]):hover {
    background-image: url('/public/images/icon/00003C/arrow_right.svg');
}

a.button.inline,
button.button.inline {
    margin: 0 12px 12px 12px;
}

a.button.skinny,
button.button.skinny {
    padding: 11px 17px;
}

a.button.loading,
button.button.loading {
    /*font-size: 0;*/
    color: rgba(0,0,0,0);
    background-image: url('/public/images/dotdotdot.gif') !important;
    background-position: center !important;
    background-size: 50px !important;
    background-repeat: no-repeat;
    padding-right: 40px;
    /*border: 0;*/
    background-color: transparent !important;
    pointer-events: none;
    outline: 0 !important;
    -webkit-box-sizing: border-box;
    box-sizing: border-box;
    transition: 0s background-color;
}

button.button.blue.swap {
    width: 48px;
    height: 43px;
    padding: 0;
    margin: 0;
    vertical-align: middle;
    background-image: url('/public/images/icon/ffffff/swap.svg');
    background-position: center;
    background-size: 22px;
    background-repeat: no-repeat;
}

button.button.blue.swap:hover {
    background-image: url('/public/images/icon/00003C/swap.svg');
}

ul.fast-switch {
    list-style: none;
    font: 0;
    height: 100%;
    -webkit-box-sizing: border-box;
    box-sizing: border-box;
}

#account_swap_overlay {
    display: none;
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    z-index: 5 !important;
    background: rgba(255,255,255,0.5);
}

#account_swap_overlay::before {
    position: absolute;
    content: "";
    top: 50%;
    left: 50%;
    width: 70px;
    height: 70px;
    margin-left: -35px;
    margin-top: -35px;
    background-image: url('/public/images/spinner.gif');
    background-position: center;
    background-size: contain;
}

#account_swap > div.wrapper {
    display: none;
    position: absolute;
    top: 67px;
    right: 0;
    list-style: none;
    background: #FFFFFF;
	border: 1px solid #CCCCCC;
	border-radius: 4px;
	box-shadow: 0px 0px 2px 0 rgba(0,0,0,0.25);
    z-index: 3;
    max-height: 268px;
}

#account_swap > div.wrapper > div.header {
    width: 100%;
    height: auto;
    line-height: normal;
    text-align: left;
    box-sizing: border-box;
    text-decoration: none !important;
}

#account_swap > div.wrapper > div.header > h4 {
    font-size: 16px;
    padding: 10px 13px 9px 13px;
    border-bottom: 1px solid #e6e6e6;
}

#account_swap:hover > div.wrapper {
    display: block;
}

#account_swap::after {
    position: absolute;
    content: "";
    width: 100px;
    height: 20px;
    background: transparent;
    bottom: -5px;
    right: 0;
    z-index: 4;
}

ul.swap {
    height: calc(100% - 41px);
    width: 100%;
    max-height: 227px;
    overflow-x: scroll;
}

ul.swap::before {
    position: absolute;
    content: "";
    top: -10px;
    right: 14px;
    border-style: solid;
    border-width: 0 10px 10px 10px;
    border-color: transparent transparent #ffffff transparent;
    z-index: 4;
}

ul.swap::after {
    position: absolute;
    content: "";
    top: -11px;
    right: 12px;
    border-style: solid;
    border-width: 0 12px 10px 12px;
    border-color: transparent transparent rgba(0,0,0,0.25) transparent;
    z-index: 3;
}

ul.swap > li {
	padding: 0 !important;
    margin: 0 !important;
    line-height: normal;
}

ul.swap > li:not(.no-click):hover  {
    background-color: #eeeeee;
}

ul.swap > li:not(:last-child):not(.no-click) {
    border-bottom: 1px solid #e6e6e6;
}

ul.swap > li > a {
    display: inline-block;
    padding: 17px 40px 17px 19px;
    background-image: url('/public/images/icon/00003C/arrow_right.svg');
    background-position: right+15px center;
    background-repeat: no-repeat;
    background-size: 7px;
    width: 100%;
    height: 100%;
    text-align: left;
    box-sizing: border-box;
    text-decoration: none !important;
}

ul.swap > li > a > h3 {
    font-family: 'Open Sans', sans-serif;
    line-height: 22px;
}

ul.swap > li > a > h6 {
    font-family: 'Open Sans', sans-serif;
    margin-top: 5px;
    line-height: 14px;
}

ul.radiogrp {
    list-style: none;
    font-size: 0;
}

ul.radiogrp.disabled > li {
    background-color: #EEEEEE !important;
    color: #999999 !important;
}

ul.radiogrp > li {
    display: inline-block;
    border: 1px solid #CCCCCC;
    border-bottom: 2px solid #DDDDDD;
    border-left-width: 0;
    padding: 7px 14px !important;
    color: #212121;
    font-size: 15px;
    font-weight: 300;
    background-color: #FFFFFF;
}

ul.radiogrp > li:hover {
    background-color: #F6F6F6;
    cursor: pointer;
}

ul.radiogrp > li.selected {
    background-color: #00003C;
    color: #FFFFFF;
    cursor: default;
}

ul.radiogrp > li:first-child {
    border-left-width: 1px;
}

@media (max-width: 600px) {

    form label {
        font-size: 15px;
    }

    form label.icon {
        width: calc(100% - 31px);
        margin-left: 26px;
    }

    form label.icon::before {
        left: -26px;
        width: 18px;
        height: 24px;
        background-size: 18px;
    }

    form div.field.inline > label {
        display: block;
        margin-bottom: 3px;
    }

    input {
        padding: 10px 10px;
        font-size: 15px;
    }

    a.button,
    button.button {
        font-size: 13px;
    }

}

/* ----- TABLE ----- */

ul.tblnav {
    font-size: 0;
    list-style: none;
    text-align: right;
    white-space: nowrap;
    padding: 2px 0 12px 10px;
}

ul.tblnav {
    padding: 2px 10px 12px 10px;
    box-sizing: border-box;
}

ul.tblnav > li {
    display: inline-block;
    text-transform: uppercase;
    padding: 0 12px;
    background-size: 6px;
    background-repeat: no-repeat;
    cursor: pointer;
    -webkit-transition: 0.15s color;
    -o-transition: 0.15s color;
    transition: 0.15s color;
}

ul.tblnav > li.disable {
    opacity: 0.5;
    cursor: default;
}

ul.tblnav > li:not(.disable):hover h6 {
    color: #777777 !important;
    cursor: pointer;
    width: auto;
}

ul.tblnav > li:first-child {
    background-position: center left;
    background-image: url('/public/images/icon/777777/arrow_left.svg');
}

ul.tblnav > li:last-child {
    background-position: center right;
    background-image: url('/public/images/icon/777777/arrow_right.svg');
}

div.table-pagination {
    margin-top: 20px;
    color: #999999;
    font-size: 14px;
    font-weight: 400;
    text-align: center;
    text-transform: uppercase;
}

table {
    width: 100%;
    border-spacing: 0;
    border-collapse: separate;
    box-sizing: border-box;
    overflow-x: scroll;
}

table.loading tbody td {
    opacity: 0.5;
}

table.loading::after {
    content: "";
    position: absolute;
    top: 50px;
    left: 0;
    width: 100%;
    height: calc(100% - 50px);
    background-position: center;
    background-repeat: no-repeat;
    background-size: 65px;
    background-image: url('/public/images/spinner.gif');
    -webkit-box-sizing: border-box;
    box-sizing: border-box;
}

table td {
    position: relative;
    font-size: 15px;
    text-align: left;
    padding: 9px 7px;
    color: #212121;
    font-weight: 300;
    -webkit-transition: 0.25s background-color;
    -o-transition: 0.25s background-color;
    transition: 0.25s background-color;
}

table td.bold,
table td > b {
    font-weight: 600;
}

table thead td {
    position: relative;
    border-bottom: 1px solid #00003C;
    font-weight: 400;
    color: #00003C;
    text-transform: uppercase;
    white-space: nowrap;
}

table thead tr td.sortable,
table thead tr td.filter {
    cursor: pointer !important;
}

table thead tr td.sort span.sort {
    display: inline-block;
    border-style: solid;
    border-width: 0 4px 5px 4px;
    border-color: transparent transparent #00003C transparent;
    vertical-align: middle;
    margin-top: -3px;
    margin-left: 6px;
}

table thead tr td.sort[data-sort=desc] span.sort {
    border-width: 5px 4px 0 4px;
    border-color: #00003C transparent transparent transparent;
}

table thead tr td.filter span.filter {
    width: 10px;
    height: 10px;
    display: inline-block;
    background-position: center;
    background-repeat: no-repeat;
    background-size: contain;
    background-image: url('/public/images/icon/00003C/filter.svg');
    margin-top: -3px;
    margin-left: 6px;
}

table thead tr td div.filter {
    display: none;
}

table thead tr td.filter:hover > div.filter {
    display: block;
}

table thead tr td.filter div.filter {
    position: absolute;
    width: calc(100% - 9px);
    border-radius: 2px;
    top: 0;
    left: -7px;
    background: #FFFFFF;
    z-index: 5;
    border: 1px solid #DDDDDD;
    box-shadow: 0 0 3px 0 #DDDDDD;
}

table thead tr td:first-child.filter div.filter {
    position: absolute;
    width: calc(100% - 16px);
    border-radius: 2px;
    top: 0;
    left: 0px;
}

table thead tr td.filter div.filter > h5 {
    padding: 8px 0px 9px 13px;
    display: inline-block;
    text-transform: uppercase;
}

table thead tr td:first-child.filter div.filter > h5 {
    padding-left: 6px;
}

table thead tr td.filter div.filter > span.reset {
    position: absolute;
    top: 11px;
    right: 12px;
    width: 14px;
    height: 14px;
    background-position: center;
    background-repeat: no-repeat;
    background-size: contain;
    background-image: url('/public/images/icon/00003C/reset.svg');
}

table thead tr td.filter div.filter > input.search {
    width: 100%;
    border-radius: 0;
    font-size: 14px;
    padding: 7px 12px;
    background-size: 17px;
    background-color: #FFFFFF;
    border-left: 0;
    border-right: 0;
    margin-bottom: 0;
    border-bottom: 1px solid #DDDDDD;
    border-top: 1px solid #DDDDDD;
}

table thead tr td.filter div.filter > ul.results {
    width: 100%;
    font-size: 0;
    list-style: none;
    padding: 0;
    box-sizing: border-box;
}

table thead tr td.filter div.filter > ul.results > li {
    position: relative;
    width: 100%;
    font-size: 13px;
    padding: 9px 12px 9px 29px;
    border-bottom: 1px solid #DDDDDD;
    box-sizing: border-box;
    text-transform: none;
    color: #212121;
    font-weight: 300;
}

table thead tr td.filter div.filter > ul.results > li:first-child {
    margin-top: 0;
}

table thead tr td.filter div.filter > ul.results > li:last-child {
    border-bottom: 0;
}

table thead tr td.filter div.filter > ul.results > li:hover {
    background-color: #EEEEEE;
}

table thead tr td.filter div.filter > ul.results > li::after {
    position: absolute;
    content: "";
    top: 50%;
    left: 11px;
    margin-top: -5px;
    width: 11px;
    height: 11px;
    border: 1px solid #00003C;
    border-radius: 100%;
    box-sizing: border-box;
}

table thead tr td.filter div.filter > ul.results > li.selected::after {
    background-color: #00003C;
}

table tbody tr:hover td {
    background-color: #EEEEEE;
}

table tbody td a.download,
table tbody td a.stepin {
    display: inline-block;
    width: 20px;
    height: 25px;
    background-position: center;
    background-repeat: no-repeat;
    background-image: url('/public/images/icon/00003C/download.svg');
    background-size: 16px;
    border: 1px solid #000;
    cursor: pointer;
    vertical-align: top;
}

table tbody td a.stepin {
    background-image: url('/public/images/icon/00003C/stepin.svg');
    background-size: 20px;
}

table tbody td a.download:hover {
    background-position: center;
    background-repeat: no-repeat;
    background-image: url('/public/images/icon/0b1b51/download.svg');
    background-size: 16px;
}

table tbody td a.download-shadow {
    display: inline-block;
    width: 20px;
    height: 20px;
}

@media (max-width: 600px) {

    table td {
        font-size: 13px;
    }

}

/* ----- PROGRESS ----- */

ul.progress {
    position: relative;
    list-style: none;
    width: calc(100% - 40px);
    margin: 0 auto 0 auto;
    display: -webkit-box;
    display: -webkit-flex;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-orient: horizontal;
    -webkit-box-direction: normal;
    -webkit-flex-direction: row;
    -ms-flex-direction: row;
    flex-direction: row;
    -webkit-flex-wrap: nowrap;
    -ms-flex-wrap: nowrap;
    flex-wrap: nowrap;
}

ul.progress::before {
    content: "";
    position: absolute;
    top: 17px;
    left: 0;
    width: calc(100% - 10px);
    margin: 0 5px;
    height: 3px;
    background: #00003C;
    z-index: 0;
}

ul.progress > li {
    -webkit-box-flex: 1;
    -webkit-flex: 1 0 auto;
    -ms-flex: 1 0 auto;
    flex: 1 0 auto;
    height: 40px;
    text-align: center;
    z-index: 1;
}

ul.progress > li:first-child {
    text-align: left;
}

ul.progress > li:last-child {
    text-align: right;
}

ul.progress > li > div {
    position: relative;
    display: inline-block;
    width: 36px;
    height: 36px;
    border: 3px solid #00003C;
    background: #FFFFFF;
    background-image: url('/public/images/icon/00003C/pending.svg');
    background-position: center;
    background-repeat: no-repeat;
    background-size: 18px;
    border-radius: 100%;
    -webkit-box-sizing: border-box;
    box-sizing: border-box;
}

ul.progress > li.tick > div {
    background-image: url('/public/images/icon/ffffff/tick.svg');
    background-size: 20px;
}

ul.progress > li.loading > div {
    background-image: url('/public/images/loading.gif');
    background-size: 28px;
}

ul.progress > li > div > span {
    position: absolute;
    font-family: 'Open Sans', sans-serif;
    font-weight: 300;
    top: -26px;
    text-transform: uppercase;
    left: -45px;
    font-size: 14px;
    color: #00003C;
    width: 126px;
    text-align: center;
    -webkit-box-sizing: border-box;
    box-sizing: border-box;
}

/* ----- DASHBOARD ----- */

.greeting {
    opacity: 1;
    -webkit-transition: 1s opacity;
    -o-transition: 1s opacity;
    transition: 1s opacity;
}

.greeting.faint {
    opacity: 0.01;
}

li.dashboard_content {
    -webkit-box-flex: 1;
    -webkit-flex: 1 1 58%;
    -ms-flex: 1 1 58%;
    flex: 1 1 58%;
    max-width: 58%;
}

li.dashboard_dials {
    -webkit-box-flex: 0 !important;
    -webkit-flex: 0 0 0% !important;
    -ms-flex: 0 0 0% !important;
    flex: 0 0 0% !important;
}

li.dashboard_dials > ul {
    max-width: 400px;
    list-style: none;
    font-size: 0;
    margin: 15px 0 0 auto;
}

li.dashboard_dials > ul > li {
    -webkit-box-sizing: border-box;
    box-sizing: border-box;
    margin: 0 0 0 auto;
}

li.dashboard_dials > ul > li.dashboard_dials_lastBill {
    width: 302px;
}

li.dashboard_dials > ul > li.dashboard_dials_balance {
    width: 200px;
    margin: -80px 200px 0 auto;
}

li.dashboard_dials > ul > li.dashboard_dials_lastBill_small {
    width: 200px;
    margin: -80px 200px 0 auto;
}

li.dashboard_dials > ul > li.dashboard_dials_payment_method {
    margin: -140px 55px 0 auto;
}

li.dashboard_dials_lastBill div.nooutstanding {
    padding: 110px 20px 0 20px;
    -webkit-box-sizing: border-box;
    box-sizing: border-box;
}

@media (max-width: 900px) {

    li.dashboard_content {
        -webkit-flex: 1 1 100%;
        -ms-flex: 1 1 100%;
        flex: 1 1 100%;
        max-width: 100%;
    }

    li.dashboard_dials {
        -webkit-box-flex: 1 !important;
        -webkit-flex: 1 0 100% !important;
        -ms-flex: 1 0 100% !important;
        flex: 1 0 100% !important;
    }

    li.dashboard_dials > ul {
        margin: -145px 0 0 auto;
    }

}

@media (max-width: 600px) {

    li.dashboard_dials > ul {
        margin: 0 auto !important;
    }

    li.dashboard_dials > ul > li.dashboard_dials_lastBill {
        margin: 17px -10px 0 auto !important;
    }

    li.dashboard_dials > ul > li.dashboard_dials_balance {
        margin: -30px auto 0 0px !important;
    }

    li.dashboard_dials > ul > li.dashboard_dials_payment_method {
        margin: -60px 15px 0 auto !important;
    }

}

/* ----- TRANSACTION HISTORY ----- */

div#th_table {
    height: calc(100% - 40px);
}

div#th_table table td.status {
    padding-left: 20px;
}

div#th_table table td.status::before {
    position: absolute;
    content: "";
    left: 0;
    top: 50%;
    margin-top: -5px;
    width: 13px;
    height: 13px;
    border-radius: 100%;
}

div#th_table table td.status.authorised::before {
    background-color: #5ADE92;
}

div#th_table table td.status.pending::before {
    background-color: #FFDE71;
}

div#th_table table td.status.rejected::before {
    background-color: #FF7171;
}


/* ----- MAKE PAYMENT ----- */

#worldpay_frame {
    width: 100%;
    min-height: 400px;
}

div.payment-status {
    display: block;
    width: 100%;
    height: 65px;
    background-position: center;
    background-repeat: no-repeat;
    background-size: contain;
}

div.payment-status.success {
    background-image: url('/public/images/icon/0b1b51/success.svg');
}

div.payment-status.failed {
    background-image: url('/public/images/icon/0b1b51/fail.svg');
}

#ngenius_3ds {
    max-width: 500px;
    height:500px;
    margin: 0 auto;
}

#ngenius_mount {
    max-width: 500px;
    height: 225px;
    margin: 0 auto;
}

#ngenius_mount.loading {
    background-image: none;
    opacity: 0.5;
    pointer-events: none;
}

p.ngenius-feedback {
    display: none;
    max-width: 600px;
    margin: 0 auto 10px auto;
    box-sizing: border-box;
    padding: 10px;
    border-radius: 3px;
    font-weight: 400;
    text-align: center;
    background: rgba(255, 204, 139, 0.9);
    border: 1px solid #d9c96d;
}

p.ngenius-feedback.error {
    background: rgba(255,131,128,0.9);
    border: 1px solid #D96F6D;
}

@media (max-width: 600px) {

    #ngenius_mount {
        height: 285px;
    }

}

/* ----- CONTACT ----- */

div.supplier-logo {
    text-align: center;
    margin: 24px 10px;
}

div.supplier-logo img {
    max-height: 44px;
    padding: 0 15px 20px 15px;
    border-bottom: 1px solid #00003C;
}

/* ----- CONSUMPTION ----- */

div#consumption_graph {
    position: relative;
    height: 370px;
}

div#consumption_graph.graph-load::after {
    position: absolute;
    content: "";
    top: 0;
    left: 0;
    height: 100%;
    width: 100%;
    background-color: rgba(255,255,255,0.5);
    background-position: center;
    background-repeat: no-repeat;
    background-size: 65px !important;
    background-image: url('/public/images/spinner.gif');
}

/* ----- METER READS ----- */

div#read_table {
    height: calc(100% - 40px);
}

/* ----- ACCOUNT ----- */

div#document_table {
    height: calc(100% - 40px);
}

div#document_table span.document {
    padding-left: 28px;
}

div#document_table span.document::after {
    position: absolute;
    content: "";
    top: 50%;
    margin-top: -10px;
    left: 0;
    width: 20px;
    height: 20px;
    background-position: center;
    background-repeat: no-repeat;
    background-image: url('/public/images/icon/007fa3/document_blank.svg');
    background-size: 18px;
    box-sizing: border-box;
}

div#document_table span.document.invoice::after {
    background-image: url('/public/images/icon/007fa3/document_invoice.svg');
}

div#document_table span.document.payment::after {
    background-image: url('/public/images/icon/007fa3/document_payment.svg');
}

div#document_table span.document.cc::after {
    background-image: url('/public/images/icon/007fa3/document_cc.svg');
}

/* ----- HELP ----- */

div#help_article_table {
    height: calc(100% - 40px);
}

div.help-splash {
    width: 75%;
    margin: 0 auto;
}

ul.search-result {
    font-size: 0;
    list-style: none;
}

ul.search-result > li {
    position: relative;
    display: block;
    width: 100%;
    border-bottom: 1px solid #00003C;
    margin-bottom: 24px;
    padding-bottom: 12px;
    text-align: left;
}

ul.search-result > li:last-child {
    border-bottom: 0;
    margin-bottom: 0;
}

ul.search-result > li h4.icon.large {
    background-size: contain;
}

ul.search-result > li > p {
    height: 60px;
    overflow: hidden;
}

ul.search-result > li > p::after {
    content: "";
    position: absolute;
    bottom: 0;
    left: 0;
    width: 100%;
    height: 30px;
    background-image: linear-gradient(to bottom, rgba(255,255,255,0), rgba(255,255,255,1));
    -webkit-box-sizing: border-box;
    box-sizing: border-box;
}

li.help > div {
    position: relative;
    padding-bottom: 40px !important;
}

li.help.edit > div {
    padding-top: 56px;
    overflow: visible;
}

li.help div.header {
    padding-left: 55px;
    margin-bottom: 12px;
    background-position: left;
    background-size: 36px;
    background-repeat: no-repeat;
}

li.help div.header::after {
    position: absolute;
    content: "";
    bottom: -12px;
    left: 0;
    width: 100%;
    height: 0;
    border-bottom: 1px solid #DDDDDD;
}

li.help .select2-container {
    margin-bottom: 8px;
}

li.help .select2-selection,
li.help .select2-selection__rendered,
li.help .select2-selection__arrow {
    height: 38px !important;
    line-height: 38px !important;
}

li.help .select2-hidden-accessible {
    width: calc(100% - 52px) !important;
    height: 38px !important;
}

li.help div.editor {
    position: absolute;
    top: 0;
    left: 0;
    margin: 0;
    padding: 0;
    width: 100%;
    min-height: 0;
    border-bottom: 1px solid #DDDDDD;
    box-sizing: border-box;
    box-shadow: 0 0 2px 0 #CCCCCC;
    text-align: right;
}

li.help div.editor > ul {
    list-style: none;
    font-size: 0;
    padding: 0;
    margin: 0;
}

li.help div.editor > ul > li {
    display: inline-block;
    border-left: 1px solid #CCCCCC;
    background: #FFFFFF;
    padding: 9px 16px;
    transition: 0.25s background-color;
    cursor: pointer;
    color: #212121;
    font-size: 15px;
    font-weight: 300;
}

li.help div.editor > ul > li:hover {
    background-color: #F4F4F4;
}

li.help.edit div.header input.h4 {
    background: none;
    padding: 0 0 0 12px;
    margin: 7px 0 7px 0;
    font-size: 19px;
    font-weight: 300;
    color: #00003C;
    border: 0;
    cursor:
}

input.help {
    padding: 15px 17px;
    font-size: 20px;
}

li.help.edit div.body > div {
    display: none;
}

li.help div.body > div.article {
    padding-top: 15px;
}

li.help div.hline {
    margin: 0 0 24px 0;
}

ul#article {
    list-style: none;
    width: 100%;
    min-height: 500px;
    font-size: 0;
}

ul#article > li {
    display: inline-block;
    width: 100%;
    padding: 0;
    margin: 0;
}

ul#article > li.hide {
    display: none;
}

ul#article.split > li {
    width: 50%;
    box-sizing: border-box;
    vertical-align: top;
}

ul#article.split > li.html {
    padding-right: 5px;
}

ul#article.split > li.preview {
    padding-left: 5px;
}

ul#article li.html > textarea,
textarea[name=abstract] {
    border: 1px solid #DDDDDD;
    min-height: 500px;
    height: 100%;
    font-size: 14px;
    box-sizing: border-box;
}

textarea[name=abstract] {
    min-height: 250px;
}

ul#article li.preview > div {
    border: 1px solid #DDDDDD;
    border-radius: 2px;
    min-height: 500px;
    padding: 4px 10px;
    box-sizing: border-box;
}

ul#article li.article > div {
    width: 100%;
    min-height: 500px;
}

li.help #article h1 {
    color: #00003C;
    font-size: 15px;
    font-weight: 400;
    text-align: left;
    margin: 0 0 18px 0;
    font-weight: 600;
}

li.help #article h2 {
    position: relative;
    font-size: 19px;
    font-weight: 300;
    text-align: left;
    color: #00003C;
    margin: 0 0 18px 0;
}

li.help #article h3 {
    color: #999999;
    font-size: 14px;
    font-weight: 400;
    text-align: left;
    margin: 0 0 12px 0;
    text-transform: uppercase;
}

li.help #article p,
li.help #article a:not(.button) {
    position: relative;
    color: #212121;
    font-size: 15px;
    font-weight: 300;
    text-align: left;
}

li.help #article .center {
    text-align: center;
}

li.help #article p > b,
li.help #article li > b {
    font-weight: 600;
}

li.help #article a:not(.button) {
    text-decoration: underline;
}

li.help #article ul {
    margin: 12px 0 12px 0;
    width: 100%;
    padding-left: 30px;
    -webkit-box-sizing: border-box;
    box-sizing: border-box;
}

li.help #article ul > li {
    padding-left: 10px;
    position: relative;
    color: #212121;
    font-size: 15px;
    font-weight: 300;
    text-align: left;
}

li.help #article ul.column {
    margin: 0;
    padding: 0;
}

li.help #article ul.column > li {
    box-sizing: border-box;
    padding: 0;
}

li.help #article p {
    margin: 0 0 24px 0;
}

li.help div.availability > ul {
    list-style: none;
    font-size: 0;
}

li.help div.availability > ul > li h4 {
    line-height: 39px;
}

li.help div.availability > ul > li {
    padding: 7px 7px;
    border-bottom: 1px solid #BBBBBB;
}

li.help div.availability > ul > li:last-child {
    border-bottom-width: 0;
}

li.help div.availability > ul > li:hover {
    background: #EEEEEE;
}

h4.stepin {
    margin-right: 34px;
}

h4.stepin::after {
    content: "";
    position: absolute;
    width: 20px;
    height: 100%;
    top: 0;
    right: -24px;
    background-size: 14px;
    background-position: right;
    background-repeat: no-repeat;
    background-image: url('/public/images/icon/00003C/stepin.svg');
}

@media (max-width: 600px) {

    div.help-splash {
        width: 100%;
    }

    ul.search-result > li > p {
        height: 80px;
    }

    li.help-title {
        flex: 1 0 100% !important;
    }

}

/* ----- PROGRESS DIAL ----- */

div.progress-dial {
    position: relative;
    display: inline-block;
    width: 300px;
    height: 300px;
    overflow: hidden;
}

div.progress-dial.medium {
    width: 200px;
    height: 200px;
}

div.progress-dial.small {
    width: 170px;
    height: 170px;
}

div.progress-dial > div.container {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    z-index: 1;
    -webkit-transition: 1s -webkit-transform;
    transition: 1s -webkit-transform;
    -o-transition: 1s transform;
    transition: 1s transform;
    transition: 1s transform, 1s -webkit-transform;
}

div.progress-dial > div.container.rotate {
    -webkit-transform: rotate(360deg);
    -ms-transform: rotate(360deg);
    transform: rotate(360deg);
}

div.progress-dial:hover > div.container {
    -webkit-transform: rotate(720deg);
    -ms-transform: rotate(720deg);
    transform: rotate(720deg);
}

div.progress-dial > div.content {
    display: table;
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    z-index: 1;
    text-align: center;
    opacity: 1;
    -webkit-transition: 0.25s opacity;
    -o-transition: 0.25s opacity;
    transition: 0.25s opacity;
}

div.progress-dial > div.content.hidden {
    opacity: 0;
}

div.progress-dial > div.content > div.wrapper {
    display: table-cell;
    width: 100%;
    vertical-align: middle;
    border-radius: 100%;
    padding: 30px;
}

div.progress-dial > div.background {
    position: absolute;
    top: 0;
    left: 0;
    width: calc(100% - 42px);
    height: calc(100% - 42px);
    background: rgba(255,255,255,0.6);
    border-radius: 100%;
    margin: 21px;
    border: 2px solid #00003C;
    z-index: 0;
    -webkit-box-sizing: border-box;
    box-sizing: border-box;
}

div.progress-dial.warning div.background {
    border: 7px solid #e95f20 !important;
}

div.progress-dial.overdue div.background {
    border: 7px solid #B2282E !important;
}

h3#dashboard_balance_large_status,
.dashboard-status-ok {
    color: #268e2a;
    font-weight: 400;
}

.dashboard-status-warning {
    color: #e95f20;
    font-weight: 400;
}

h3#dashboard_balance_large_status.debit,
.dashboard-status-overdue {
    color: #B2282E;
    font-weight: 400;
}

/* ----- PROGRESS LINE ----- */

div.progress-line {
    width: 100%;
    height: 10px;
    background: #E6E6E6;
    border: 1px solid #CCCCCC;
    border-radius: 5px;
    text-align: left;
    font-size: 0;
    -webkit-box-shadow: inset 0 0 3px 0 #CCCCCC;
    box-shadow: inset 0 0 3px 0 #CCCCCC;
    overflow: hidden;
}

div.progress-line span {
    display: inline-block;
    width: 0%;
    height: 100%;
    background: #596990;
    border-radius: 5px;
    -webkit-transition: 0.75s width;
    -o-transition: 0.75s width;
    transition: 0.75s width;
}

div.progress-line span.overdue {
    background: #B2282E;
}

/* ----- ALIGNMENT ----- */

.halign-left {
    text-align: left;
}

.halign-center {
    text-align: center;
}

.halign-right {
    text-align: right;
    white-space:
}

.valign-top {
    vertical-align: top;
}

/* ----- PAYMENT CARD ----- */

ul.payment-card {
    list-style: none;
    font-size: 0;
}

ul.payment-card > li {
    display: inline-block;
    width: 50px;
    height: 35px;
    border: 1px solid #AAAAAA;
    margin-left: 9px;
    border-radius: 4px;
    background-position: center;
    background-repeat: no-repeat;
    background-size: 46px auto;
}

ul.payment-card > li.visa {
    background-image: url('/public/images/paymentcard/visa.png');
}

ul.payment-card > li.mastercard {
    background-image: url('/public/images/paymentcard/mastercard.png');
}

/* ----- EDITOR ----- */

div.editor-banner {
    display: inline-block;
    max-width: 1192px;
    width: 100%;
    height: 50px;
    border-radius: 3px;
    margin: 0 auto;
    line-height: 42px;
    font-size: 15px;
    font-weight: 400;
    padding: 0 24px;
    color: #212121;
    background: rgba(255,176,128,0.9);
    border: 1px solid #D9946D;
    -webkit-box-sizing: border-box;
    box-sizing: border-box;
    text-align: center;
    margin-bottom: 15px;
}

/* ----- DIV ----- */

.w-265 {
    min-width: 265px;
}

.w-225 {
    min-width: 225px;
}

.w-150 {
    width: auto;
    min-width: 150px;
}

.overflow-x-scroll {
    max-width: 100%;
    overflow-x: scroll;
}

.display-inline-block {
    display: inline-block;
}

div.section {
    display: none;
}

div.section.show {
    display: block;
}

.hidden {
    display: none;
}

div {
    position: relative;
}

div.loading {
    width: 100%;
    height: 65px;
    background-position: center;
    background-repeat: no-repeat;
    background-size: 65px;
    background-image: url('/public/images/spinner.gif');
}

div.loading-full::after {
    position: absolute;
    content: "";
    width: 100%;
    height: 100%;
    top: 0;
    left: 0;
    background-position: center;
    background-repeat: no-repeat;
    background-size: 65px;
    background-image: url('/public/images/spinner.gif');
    background-color: rgba(255, 255, 255, 0.5);
}

div.absolute-loading {
    position: relative;
}

div.absolute-loading * {
    opacity: 0.75;
}

div.absolute-loading::after {
    content: "";
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-position: center;
    background-repeat: no-repeat;
    background-size: 65px;
    background-image: url('/public/images/spinner.gif');
}

/* ----- MARGIN ----- */

.m-top-1 {
    margin-top: 3px !important;
}

.m-top-2 {
    margin-top: 6px !important;
}

.m-top-3 {
    margin-top: 12px !important;
}

.m-top-4 {
    margin-top: 24px !important;
}

.m-left-1 {
    margin-left: 3px !important;
}

.m-left-2 {
    margin-left: 6px !important;
}

.m-left-3 {
    margin-left: 12px !important;
}

.m-left-4 {
    margin-left: 24px !important;
}

.m-bottom-1 {
    margin-bottom: 3px !important;
}

.m-bottom-2 {
    margin-bottom: 6px !important;
}

.m-bottom-3 {
    margin-bottom: 12px !important;
}

.m-bottom-4 {
    margin-bottom: 24px !important;
}

.m-right-1 {
    margin-right: 3px !important;
}

.m-right-2 {
    margin-right: 6px !important;
}

.m-right-3 {
    margin-right: 12px !important;
}

.m-right-4 {
    margin-right: 24px !important;
}

/* ----- PADDING ----- */

.p-left-1 {
    padding-left: 3px !important;
}

.p-left-2 {
    padding-left: 6px !important;
}

.p-left-3 {
    padding-left: 12px !important;
}

.p-left-4 {
    padding-left: 24px !important;
}

.p-right-1 {
    padding-right: 3px !important;
}

.p-right-2 {
    padding-right: 6px !important;
}

.p-right-3 {
    padding-right: 12px !important;
}

.p-right-4 {
    padding-right: 24px !important;
}

.p-top-1 {
    padding-top: 3px;
}

.p-top-2 {
    padding-top: 6px;
}

.p-top-3 {
    padding-top: 12px;
}

.p-top-4 {
    padding-top: 24px;
}

.p-top-5 {
    padding-top: 48px;
}

.p-bottom-1 {
    padding-bottom: 3px;
}

.p-bottom-2 {
    padding-bottom: 6px;
}

.p-bottom-3 {
    padding-bottom: 12px;
}

.p-bottom-4 {
    padding-bottom: 24px;
}

.p-bottom-5 {
    padding-bottom: 48px;
}

/* JQUERY UI */

.ui-slider.ui-slider-horizontal {
    height: 10px;
    width: calc(100% - 22px);
    border-radius: 10px;
    text-align: center;
    margin: 0 auto;
    background: #f2f2f2;
}

.ui-slider.ui-slider-horizontal > .ui-slider-handle {
    height: 20px;
    width: 20px;
    margin-top: -6px;
    margin-left: -11px;
    border-radius: 8px;
    border: 2px solid #00003C;
    background: white;
}

/*registration*/

/*
.multi_div .select2-selection__rendered {
    line-height: 30px !important;
}
*/

#property_search_div {
    position: relative;
    padding-bottom: 60px;
}

#form_loading_spinner {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    width: 65px;
}

#address_detail_div {
    position: relative;
}

#address_detail_spinner {
    position: absolute;
    top: 45%;
    left: 50%;
    transform: translate(-50%, -50%);
    width: 65px;
}

.smallLoading {
    width: 43px;
    margin-left: -10px;
}


.select2-container--default .select2-selection--single {
    background-color: #F2F2F2;

    /*background-color: rgb(232, 240, 254);*/

    /*
    border-color: #D96F6D;
    background-color: #FFE5E5;
    */
}

#address_detail {
    min-height: 175px;
}


/*COT*/

.formPage {
    display: none;
}

.minFieldheight {
    min-height: 470px;
}

/* swal */

.swal2-language {
    overflow: visible !important;
    z-index: 2 !important;
}

.payment-note {
    background: #f0f7ff;
    border: 1px solid #cce4ff;
    border-radius: 8px;
    padding: 12px 16px;
    font-size: 0.95rem;
    color: #00003C;
    text-align: center;
}
.payment-note strong {
    color: #00003C;
}