﻿html.modal-window #modal_window #settings input.decimal.number
{
    width: 3em;
    text-align: center;
}

label.disabled{opacity: 0.25;}

section {/*width: 100%;height: 100%; position:relative;*/}

select[disabled='disabled'],
span.select > select[disabled='disabled']
{
    cursor:default;
}

select {
    -webkit-appearance: menulist;
    box-sizing: border-box;
    align-items: center;
    white-space: pre;
    -webkit-rtl-ordering: logical;
    color: black;
    background-color: white;
    cursor: default;
    border-width: 1px;
    border-style: solid;
    border-color: initial;
    border-image: initial;
}

select > option
{
    font-weight: normal;
    display: block;
    white-space: pre;
    min-height: 1.2em;
    padding: 0px 2px 1px;
}

span.select
{
    border: 3px solid #CCC;
    border-radius: 3px;
    font-family: inherit;
    font-size: 18px;
    width: auto;
    overflow: hidden;
    background-image: url('../img/select.gif');
    background-repeat: no-repeat;
    background-position: right center;
    display: inline-block;
    vertical-align: middle;
    background-size: 32px;
    position: relative;
}

html.ie-old span.select
{
    background:none;    
}

span.select > select
{
    background: transparent;
    font-size: 18px;
    border: none;
    height: 28px;
    cursor: pointer;
    color:inherit;
    font-family: inherit;
    /*padding:0.2em 38px 0.2em 0.3em;*/
    padding-right:38px;
    appearance:none;
    -moz-appearance:none; /* Firefox */
    -webkit-appearance:none; /* Safari and Chrome */
    -webkit-padding-before: 0.2em;/*Top*/
    -webkit-padding-end: 38px;/*Right*/
    -webkit-padding-after: 0.2em;/*Bottom*/    
    -webkit-padding-start: 0.3em;/*Left*/
    
}

html.ie-old span.select > select
{
    padding-right:0;
}

/*
Chevrons
ul {padding: 0; list-style:none;}
ul li {padding: 0 0 0.2em 20px;background: rgba(0, 0, 0, 0) url("../img/bullet.png") no-repeat scroll 0 0 / 10px auto;}
*/

.hidden
{
    display:none;
}

.downloading{   
    height: 36px;
    left: 50%;
    margin-left: -28px;
    margin-top: -28px;
    padding: 10px;
    position: absolute;
    top: 50%;
    width: 36px;
}

.downloading > .bg
{
    border-radius: 100px;
    background: #fff none repeat scroll 0 0;
    position:absolute;
    width:100%;
    height:100%;
    top:0;
    left:0;
    opacity:0.9;
}

.downloading>.inner {
    animation: 0.8s steps(20) 0s normal none infinite running downloading;
    -webkit-animation-name: downloading;
    -webkit-animation-duration: 0.8s;
    -webkit-animation-timing-function:steps(20);
    -webkit-animation-iteration-count:infinite;
    -webkit-animation-fill-mode:none;
    
    background: rgba(0, 0, 0, 0) url("../img/downloading.png") repeat scroll left center;
    height: 36px;
    position: absolute;
    width: 36px;
}

@keyframes downloading {
    100% { background-position: -720px; }
}
@-webkit-keyframes downloading {
    100% { background-position: -720px; }
}

.button {
    background: #66AADD none repeat scroll 0 0;
    border: medium none;border-radius: 3px;
    color: #fff;
    display: inline-block;
    margin-bottom: 5px;
    padding: 0.5em 1em; font-size: 14px;
    text-align: center;box-sizing: border-box;    
}

.button.disabled {
    background-color: #eeeeee!important;
    color: #ccc;
    cursor: default;
}

#menu .inner > .button.disabled {
    background: none !important;
    opacity: 0.2;
}

.button.secondary {color: #267bb8; background-color:#E2EEF8;}

.button.hover{background-color: #5C5C5C;}

.inline.button {display: inline-block;margin-right: 10px;}

.disclaimer {
    clear: both;
    color: #858585;
    padding: 20px 0 0;    
    font-family:Arial;
}

.button, 
.app.installed, 
#useful_resources .resource, 
#menu{cursor:pointer;-webkit-user-select: none;  /* Chrome all / Safari all */
  -moz-user-select: none;     /* Firefox all */
  -ms-user-select: none;      /* IE 10+ */
  user-select: none;  }
  
html.settings .app.installed{cursor:default;} 

.next.button {
    /*background-color: #66aadd;
    border: 0 none;
    border-radius: 3px;
    color: #ffffff;
    display: inline-block;
    font-size: 7em;
    margin-top: 5px;
    padding: 5px 10px;*/
} 

.cancel.button {
    /*background-color: #666;
    border: 0 none;
    border-radius: 3px;
    color: #ffffff;
    display: inline-block;
    font-size: 14px;
    margin-top: 5px;
    padding: 5px 10px;*/
} 

.clear{clear:both; float:none;padding: 0 !important;}

html.home .column,
html.settings .column {
	float:left;box-sizing: border-box;
	width:50%; position:relative;
}

#settings .column.one {
    float: none;
    display: inline-block;
}

html.modal-window #modal_window #settings .column
{
    width:50%;
    float:left;
}

#settings .column.two {
    float: none;
    display: inline-block;
    width: auto;
}

.column.first {    
    padding-right: 10px;
}

.column.last {
    padding-left: 10px;
}

.column section{background:#FFF;}

/*section#settings .content {padding: 20px;}*/

.column h2 {
    /*background: #666 none repeat scroll 0 0;
	font-weight: normal;
    padding: 0;font-size: 1.4em;top:0;*/
}

.column.last.home > div {background: #eee none repeat scroll 0 0;}

.column.last.home > section {
    margin-bottom: 20px;
}

.column.last.home > section .content {/*max-height: 250px;*/}

.note {font-style: italic;}

.download {
    background: #fff url("../img/download.png") no-repeat scroll center center / 70px auto;
    box-sizing: border-box;
    color: #fff;
    cursor: pointer;
    height: 100%;
    left: 0;
    opacity: 0.75;
    position: absolute;
    top: 0;
    width: 100%;    
}

.app.download {display: none !important;}

.w-20{width:20%; float:left;}
.w-25{width:25%; float:left;}
.w-50{width:50%; float:left;}

#container {
    margin: 0 auto;
    /*overflow: hidden;currently removes scrolling from window*/
    position: relative;
	background-color: #fff;max-width: 1200px;
	min-width:1024px; height:100%;
}

/*Stops scolling whilst modal is open*/
html.modal #container {overflow: hidden;}

html.app #container {max-height: 768px;}

#home_content,#app_content{
	width:984px;
	margin:0 auto 20px;
}

#flash_messages{bottom: 20px;position: fixed;right: 20px;z-index: 999999;}

#flash_messages>.message 
{
    background-color: #DD6600;
    border: medium none;
    color: #fff;
    display: inline-block;
    float: right;
    margin-bottom: 0;
    margin-top: 10px;
    padding: 0;
    position: relative;
    width: auto;
    }
    
#flash_messages > .message.old {background-color: #666;}
    
#flash_messages>.message .controls {
    float: right;border-left: 1px solid #fff;
}

#flash_messages > .message > p, #flash_messages .message .button {
    display: inline-block;
    margin: 0;
    padding: 10px 20px;
}

#tabs {
    margin: 0;
    padding: 0;
    position: relative;
    z-index: 9;
}

#tabs li {
    background-color: #f5f3f2;
    display: inline-block;color: #267bb8;
    margin-right: 3px; font-size:14px;text-transform: uppercase;
    padding:0.8em 1em 10px; cursor:pointer; border:1px solid #f5f3f2;border-color: #f5f3f2 #f5f3f2 #bec5c5;border-style: solid solid none;
    cursor:pointer;-webkit-user-select: none;  /* Chrome all / Safari all */
    -moz-user-select: none;     /* Firefox all */
    -ms-user-select: none;      /* IE 10+ */
    user-select: none;  
}

#tabs li.selected {background-color:#fff;color:#333333; border-color: #DD6600 #bec5c5 #fff;padding-bottom: 0.8em;}

#panels {position: relative;/*padding-right: 50px;*/ margin-top: -1px;}

#panels .panel {border: 1px solid #bec5c5; display:none;min-height: 540px; /*610px;*/}

#panels .panel.selected{display:block;}


/************HEADER************/
#header {background-color:#FFF;margin-bottom: 20px;
	margin:0 auto 20px;border-bottom: 5px solid #999;}

#header .logo {
    background: #fff url("../img/stripes.png") no-repeat scroll 0 0;
    float: right;cursor: pointer;
    padding: 20px 0 20px 45px;
}
#header .inner {box-sizing: border-box;
    display: table; position:relative;
    margin: 0 auto;
    max-width: 984px;
    width: 100%;}
#header .inner>*{display: table-cell;vertical-align: middle;}
#header .box {
    border-left: 3px solid #fff;
    border-right: 3px solid #fff;
    bottom: -5px;
    position: absolute;
}
#header h1 {border-bottom: 5px solid #DD6600;
color: #333;font-weight: normal;
    font-size: 1em;
    margin: 0;padding: 1em 0;
    text-align: center;
    text-transform: uppercase;}
    
/****************MENU********************/

#menu {background: #333 none repeat scroll 0 0;
    bottom: 0;z-index: 99999;
    position: fixed;max-width: 1200px;
    width: 100%;}
    
    
#menu .inner {
    box-sizing: border-box;
    margin: 0 auto;
    max-width: 1024px;
    padding: 15px; position:relative;
}

#menu .inner > .button 
{
    box-sizing: border-box;background: none;padding: 0;
    height: 32px; opacity:0.6; display: inline-block;margin-right: 20px;
    position: relative;min-width: 50px;float:left;
}

html.personal-details-required #menu .inner > .button
{
    cursor:default;
}
    
#menu .inner > .button.selected{opacity:1;}
    
#menu .button .icon {
    margin: 0 auto 5px;width: 24px; height:24px;display: inline-block;
}

#menu .button .label {
    font-size: 11px;
    text-transform: uppercase;
}

html.web #menu .email.button,
html.tool #menu .settings.button,
html.home .email.button, 
html.settings .email.button,
html.home .refresh.button, 
html.settings .refresh.button{display: none!important;}

.content.mCS_destroyed {
    height: auto !important;
}

#menu .button.settings .icon {background: rgba(0, 0, 0, 0) url("../img/settings.png") no-repeat scroll center center / contain ;}

#menu .button.info .icon {background: rgba(0, 0, 0, 0) url("../img/info.png") no-repeat scroll center center / contain ;}

html.home .button.info{display: none;}

#menu .button.refresh .icon {background: rgba(0, 0, 0, 0) url("../img/reload.png") no-repeat scroll center center / contain ;}

#menu .button.home .icon {background: rgba(0, 0, 0, 0) url("../img/home.png") no-repeat scroll center center / contain ;}

#menu .button.exit {display:none!important;}
#menu .button.exit .icon {background: rgba(0, 0, 0, 0) url("../img/exit.png") no-repeat scroll center center / contain ;}

#menu .email.button .icon {background: rgba(0, 0, 0, 0) url("../img/email.png") no-repeat scroll center center / contain ;}

html.direct-to-app .home.button {display: none !important;}
html.opener-exists #menu .button.exit {display:inherit!important;}
html.direct-to-app.pdp #menu .button.settings {display:inherit!important;}
html.direct-to-app #header .logo {cursor: default;}

#menu .button.close, 
#menu .button.open{
    margin: 0;
    position: relative;
    float:right;
    width: 60px;}



#menu .button.close .icon, 
#menu .button.open .icon{height: 11px;
    left: 50%;
    margin: -5px 0 0 -12px;
    position: absolute;
    top: 50%;}
#menu .button.close .icon {background: rgba(0, 0, 0, 0) url("../img/arrow-down-white.png") no-repeat scroll center center / contain ;height: 11px; }
#menu .button.open .icon {background: rgba(0, 0, 0, 0) url("../img/arrow-up-white.png") no-repeat scroll center center / contain ;height: 11px; }

/***************MAIN CONTENT******************/
#container{/*background: rgba(0, 0, 0, 0) url("../img/stripes.jpg") repeat scroll 0 0;*/}

#home_content{margin-top: 20px;/*max-height: 697px;*/position: relative;}
#app_content{position: relative;}

#home_content #applications .content {
	background-color: #FFF;
    box-sizing: border-box;
    overflow: auto;
    position: relative;

}

html.app #home_content #applications .content{overflow: hidden;}

#home_content #useful_resources .content, 
#useful_resources > h2{/*padding: 0 0 0 10px;*/}

#applications .content .app,
#useful_resources .content .resource{
	background: #fff none repeat scroll 0 0;
	display: none;position: relative;
	margin: 0;
	padding: 10px 0;
	/*border-bottom: 1px solid #666;*/
	-webkit-user-select: none;  /* Chrome all / Safari all */
  -moz-user-select: none;     /* Firefox all */
  -ms-user-select: none;      /* IE 10+ */
  user-select: none; 
}

#useful_resources .content .resource{display:inline-block;color: inherit;}

#applications .content .app.installed, 
html.settings #applications .content .app  {display: block;}

#applications .content .app h3,
#useful_resources .content .resource h3 {font-size: 1.2em;margin: 0 0 0.2em;color:#333;}
#applications .content .app:hover h3,
#useful_resources .content .resource:hover h3 {color:#267bb8;}

#applications .content .app .icon,#applications .content .app .description{opacity:0.4;} 
#applications .content .app.installed .icon,#applications .content .app.installed .description{opacity:inherit;} 

#applications .content .app .icon,
#useful_resources .content .resource .icon{
	height: 90px;
	width: 90px;
	position: absolute;
}

#applications .content .app .icon img,
#useful_resources .content .resource .icon img{width: 100%;}
#applications .content .app .description,
#useful_resources .content .resource .description{
	height: 90px;
	margin-left: 100px;font-size: 16px;
	overflow: hidden;
}

#useful_resources .content .resource .description {display: inline-block;}

#applications .content .app .move, #applications .content .app .add {
    
    height: 90px;margin: 0;
    left: 0;
    position: absolute;
    top: 10px;
    width: 90px;
}

#applications .content .app .add {
	background: rgba(0, 0, 0, 0) url("../img/plus.png") no-repeat scroll center center / contain ;
    height: 50px;
    margin: 20px 25px;
    width: 40px;
}

#applications .content .app .move .background {
    background: #fff none repeat scroll 0 0;
    height: 100%;
    left: 0;
    opacity: 0.9;
    position: absolute;
    top: 0;
    width: 100%;
}

#applications .content .app .move > .button {
    height: 40%; position:absolute; opacity:0.9;
    width: 100%; margin:0;
}

#applications .content .app .move > .button.down {
    background: url("../img/arrow-down.png") no-repeat scroll center center / contain ; bottom:0;
}

#applications .content .app .move > .button.up {
    background: url("../img/arrow-up.png") no-repeat scroll center center / contain ; top:0;
}

#applications .content .app .move .button.disabled {background-image:none; cursor:default;background-color: transparent !important;}

#applications .content .app .remove.button {background: rgba(0, 0, 0, 0) url("../img/close.png") no-repeat scroll center center / 24px auto;
    height: 24px;
    padding: 20px;
    position: absolute;
    right: 14px;
    top: 0;
    width: 24px;}

html.settings #home_content .column.last.home {display: none;}
#home_content .column.settings {display: none;}
#home_content .column.settings.home{display:inherit;}
html.settings #home_content .column.settings {display: inherit;}

html.settings section#applications {
    display: none;
}

#applications .content .app.installed {
    display: inline-block;
    width: 50%;
}
html.home .column{
    width:100%;
}

video {
    cursor: pointer;
    display: block;
    max-height: 90%;
    max-width: 90%;
    margin: 0 auto;
    z-index: 999;
}

.radio {
    border: 2px solid #a3abad;
    border-radius: 99px;
    box-sizing: border-box;
    cursor: pointer;
    display: inline-block;
    height: 20px;
    position: relative;
    width: 20px;
}


.selected>.radio > .dot {
    background-color: #dd6600;
    border-radius: 99px;
    display: inline-block;
    height: 10px;
    left: 0;
    margin: 3px;
    position: absolute;
    top: 0;
    width: 10px;
}

#menu_gap {clear: both;}

#currency_selector {padding: 0; list-style:none;display: inline-block;margin: 0;}

table #currency_selector {display: inline;}

#currency_selector li {
    cursor: pointer;
    opacity: 1;display: inline;
    padding: 0.5em 0;
}

#currency_selector li .radio {
    margin-right: 0.5em;
}
#currency_selector li > span {
    display: inline-block;
    vertical-align: middle;margin: 0 10px 0 0;
}

.editable {
    border-bottom: 2px dotted #5c5c5c;
    cursor:pointer;
    display: inline!important;
    margin: 0;
}

/**********WELCOME***********/

#confirm_fa {
   display: inline-block;cursor:pointer;
    -webkit-user-select: none;  /* Chrome all / Safari all */
    -moz-user-select: none;     /* Firefox all */
    -ms-user-select: none;      /* IE 10+ */
    user-select: none; 
    cursor:pointer;padding: 5px 0;
}

#confirm_fa .checkbox {margin: 0 0 0 5px;}

/************SETTINGS***********/
#settings .content> div {margin-bottom: 10px;}
#settings label {
    display: inline-block;
    margin-bottom: 0.2em;
    cursor:pointer;
    -webkit-user-select: none;  /* Chrome all / Safari all */
    -moz-user-select: none;     /* Firefox all */
    -ms-user-select: none;      /* IE 10+ */
    user-select: none; 
    /*margin: 0 20px 0 0;*/
}

.fees .column.two label {
    margin: 0 20px 0 0;
}

html.modal-window #modal_window #settings label,
html.modal-window #modal_window #settings input
{
    width:50%;
    margin-right:0;
    box-sizing:border-box;
}

html.modal-window.personal-details-required.direct-to-app #modal_window .close.button
{
    display:none;
}

#settings .fees {
    border: 1px solid #bec5c5;
    box-sizing: border-box;
}

#settings .fees > .inner {
    padding: 20px 0 20px 20px;
}

html .close-settings.button {margin: 10px 0 0; display:none;}
html.personal-details-required .close-settings.button {display:inline-block;}
	
input.error {
    background-color: #FFE2E2 !important;
    border-color: #FF0000!important;
}
	

/************EMAIL HEADER****************/

#modal_window .controls {float: right;}
#modal_window .controls>* {margin:0 0 0 10px}

#modal_window .footer .controls .button {min-width: 60px;}

#modal_window table {width: 100%;}

html.email #modal_window img {width: 100%;}

#modal_window table .inner {margin: 20px 0 0;}

#email_panel img {
    display: block;
    margin: 0 auto;
    position: relative;
    width: 50%;
}

/**********************MODAL WINDOW*************************/

#modal_window {    
    border: 1px solid #5c5c5c;
    box-sizing: border-box;
    height: 100%;
    left: 50%;
    margin: 20px auto 20px -492px;
    position: absolute;
    top: 0;
    width: 984px;
    z-index: 99999;
}

#modal_window > .background{background: #fff none repeat scroll 0 0;
    height: 100%;
    opacity: 0.95;
    position: absolute;
    width: 100%;
    z-index: -1;}

#modal_window > .header {background: #eee none repeat scroll 0 0;}

#modal_window > .header>.inner {float: left;padding: 20px;}
#modal_window > .footer > .inner {padding: 20px;}

#modal_window > .header h2 {display: inline-block; margin: 0;}

#modal_window > .content {height: 100%;overflow: auto;padding: 10px 0; box-sizing:border-box;}

#modal_window > .content .inner {padding: 10px 20px; position:relative;}

#modal_window > .header .controls{float: right;}

   #modal_window > .header .controls .button {background: rgba(0, 0, 0, 0) url("/-/media/images/au/icons/cme-tool-icons/close.png") no-repeat scroll 20px 20px / 24px auto;
    box-sizing: inherit;
    height: 24px;
    margin: 0;
    padding: 28px;
    width: 24px;}

#modal_window > .header .controls .next.button{
    background-image: url("../img/next.png");background-size: auto 24px;
}
#modal_window > .header .controls .prev.button{
    background-image: url("../img/prev.png");background-size: auto 24px;
}

#modal_window > .header .controls .button.disabled {opacity: 0.25; cursor: default;}

#spinner{z-index: 99999;}

/****************************SCROLLBARS**************************************/

.mCustomScrollBox {
    direction: ltr;
    height: 100%;
    max-width: 100%;
    outline: 0 none;
    overflow: hidden;
    position: relative;
    
}

.mCS_no_scrollbar .mCustomScrollBox {height: auto;}

.mCSB_inside > .mCSB_container {
    margin-right: 30px;
}

.mCSB_horizontal.mCSB_inside > .mCSB_container {
    margin-bottom: 30px;
    margin-right: 0;
}
.mCSB_container_wrapper {padding-right: 20px;}
.mCSB_container_wrapper.mCS_y_hidden {padding-right:0}
.mCSB_container {
    height: auto;
    overflow: hidden;
    width: auto;
    
}

.mCSB_scrollTools {
    bottom: 0;
    height: auto;
    left: auto;
    /*opacity: 0.75;*/
    position: absolute;
    right: 0;
    top: 0;
    width: 20px;
}

.mCSB_scrollTools.mCSB_scrollTools_horizontal {
    bottom: 0;
    height: 16px;
    left: 0;
    right: 0;
    top: auto;
    width: auto;
}

.mCSB_scrollTools .mCSB_draggerContainer {
    bottom: 0;
    height: auto;
    left: 0;
    position: absolute;
    right: 0;
    top: 0;
}

.mCSB_scrollTools .mCSB_dragger {
    cursor: pointer;
    height: 30px;
    width: 100%;
    z-index: 1;
}

.mCSB_scrollTools.mCSB_scrollTools_horizontal .mCSB_dragger {
    height: 100%;
    left: 0;
    width: 30px;
}

.mCSB_scrollTools .mCSB_draggerRail {
    border-radius: 16px;
    height: 100%;
    margin: 0 auto;
    width: 2px;background-color: #5c5c5c;
}

.mCSB_scrollTools.mCSB_scrollTools_horizontal .mCSB_draggerRail {
    height: 2px;
    margin: 9px 0;
    width: 100%;
}

.mCSB_scrollTools .mCSB_dragger .mCSB_dragger_bar {
    border-radius: 16px;
    height: 100%;
    margin: 0 auto;
    position: relative;
    text-align: center;
    background-color: #66aadd;
    width: 8px;
}


.mCSB_scrollTools.mCSB_scrollTools_horizontal .mCSB_dragger .mCSB_dragger_bar {
    height: 8px;
    margin: 6px auto;
    width: 100%;
}
   
.checkbox {
    border: 1px solid #5c5c5c;
    height: 1em;display: inline-block;
    margin: 0 10px 0 0;
    width: 1em;vertical-align: middle;
    background-color: #fff; cursor:pointer;
}

.checkbox.checked
{
    background-image: url("../img/checkbox-tick.png");
    background-position: center center;background-repeat: no-repeat;
}
