:root{
  --theme-color:#47686A;
  --theme-color-light:#719c9f;
  --theme-color-dark:#344c4d;
  --theme-color-off-white:rgba(143, 158, 159, 0.454);
  --active-menu-color:#D7C2AB;
  --logo-background-color:#D7C2AB33;
}

#signup_confirmation_field_row,
#dispute_respondent_form > div#note_row{
  display: flex;
  flex-direction: column;
  flex: 1;
  align-items: stretch;
  text-align:left;
  width:100%;
}


div#adr_contact_request\.message_row::after{
  content:'Contact us during office hours from 09:00 to 17:00 at +27 76 727 8868';
  padding-top:5px;
  display:flex;
  align-items:center;
  justify-content:center;
  color:#AAA;
}

#signup_confirmation_field_row > dt.control-label,
#dispute_respondent_form > div#note_row > dt.control-label{
flex:1;
text-align:left;
}

div#adr_contact_request{
border: 1px solid red;
}


button#complete_signup_page_button{
  margin-left:10px;
  margin-right:10px;
}

button#complete_signup_page_button:hover,
button#login_page_button:hover{
  background-color:var(--theme-color);
  background-image: -webkit-linear-gradient(var(--theme-color), var(--theme-color) 60%, var(--theme-color-light));
}

.login-header{
  background-color:var(--theme-color);
  background-color:white;
  color:var(--theme-color);
  text-transform: uppercase;
  box-shadow: none;
  border:none;
  background-color: white;
  padding-bottom: 100px;
  position: relative;
}

div#login_container{
  position: relative;
  transform:translateX(200px);
  overflow: visible;
}

div#login_container::after{
  content:'';
  position: absolute;
  top:0px;
  left:0px;
  height: 450px;
  width:400px;
  z-index: 10;
  transform:translateX(-400px);
  background-image: url(/images/adr_logo.png);
  background-position: center 30px;
  background-size: 300px 300px;
  background-repeat: no-repeat;
  background-color: var(--logo-background-color);
}

div#terms_and_conditions_row{
 min-height:50px;
 display:flex;
 margin-bottom:40px;
 margin-top:-100px; 
 
}

div#terms_and_conditions_row > label{
display:none
}

input#terms_and_conditions{
  display:none
}

div#terms_and_conditions_content{
flex:1;
padding-right:50px;
}

span#terms_and_conditions_help{
display:block;
flex:1;
width:100%;
background-color:var(--theme-color-dark);
color:white;
margin-left:20px;
padding:10px;
text-align:center;
max-width:calc(50%-120px);
font-size:12px;
}

a#link_to_privacy_policy{
  color:var(--theme-color-dark);
  color:white;
  font-weight:bold;
  text-decoration:underline;
}


div#login_container::before{
  content:'South African Alternative Dispute Resolution Platform';
  position: absolute;
  top:350px;
  left:0px;
  height: 100px;
  width:250px;
  z-index: 10;
  transform:translateX(-325px);
  font-size: 20px;
  text-align: center;
  text-transform: uppercase;
  font-weight: bold;
  text-decoration: underline;
  color:var(--theme-color-dark);
}

img.login-logo{
  margin-top: 30px;
}

body.login-page img.login-logo{
  display: none;
}


form#login{
  background-color: white;
}


div#username_content,
div#password_content{
  margin-top:10px;
  padding-bottom: 20px;
  position: relative;
}


div#username_content::after{
  content:'Email Address';
  position: absolute;
  top:-25px;
  left:65px;
  text-transform: uppercase;
  color:var(--theme-color-dark);
  font-weight: bold;
}

div#password_content::after{
  content:'Password';
  position: absolute;
  top:-25px;
  left:65px;
  text-transform: uppercase;
  color:var(--theme-color-dark);
  font-weight: bold;
}


button#btnSubmit{
  position: absolute;
  left:80px;
  border-radius: 0px;
}

form#login > button#btnSubmit{
  max-width: 100px;
}

button#forgot_password{
  max-width: 150px;
  border:none;
  background: none;
  color:transparent;
  text-shadow: none;
  position: relative;
  max-width: 0px;
}

button#forgot_password:hover{
  max-width: 150px !important;
  border:none !important;
  background: none !important;
  color:transparent !important;
  text-shadow: none !important;
  position: relative !important;
  max-width: 0px !important;
}

button#forgot_password::after{
  content:'Forgot my password?';
  color:var(--theme-color);
  position: absolute;
  bottom:0px;
  left:25px;
  font-weight: bold;
  font-size: 12px;
  text-decoration: underline;
  text-transform: none;
}


form#login input::placeholder{
  color:transparent;
}

form#login input[type='text'],
form#login input[type='password'] {
  border: 1px solid #CCC;
  width: 80%;
  border-radius: 0px;
}

div#stay_logged_in_content{
  position: absolute;
  display: none;
}



div#login_container{
  box-shadow: none;
  border:none;
  background-color: white;
}

.btn{
  text-transform: uppercase;
  font-weight: bold;
}

.btn-primary,.btn-default{
  background-image:linear-gradient(var(--theme-color-light), var(--theme-color) 60%, var(--theme-color-dark));
  color:white;
  border-radius: 2px;
  border: 1px solid var(--theme-color);
}

.dropdown-menu>li>a:hover, .dropdown-menu>li>a:focus{
  background-color: var(--theme-color);
}

#login > button.btn:hover{
  background-image:linear-gradient(var(--theme-color-dark), var(--theme-color) 60%, var(--theme-color-light));
  background-color: var(--theme-color);
}

button.btn.btn-default:hover,
button.btn.btn-primary:hover{
  background-image:linear-gradient(var(--theme-color-dark), var(--theme-color) 60%, var(--theme-color-light));
  background-color: var(--theme-color);
  color:white;  
  border: 1px solid var(--theme-color);
}

button.btn{
  border-radius:0px;
}



.panel-primary > .panel-heading{
  background-color:var(--theme-color);
}

h2{
  color:var(--theme-color);
}

h2.form-header{
  background-color:var(--theme-color);
  color:white;
  text-transform: uppercase;
  font-size: 20px;
  padding:8px;
  text-align: center;
  margin-top:-10px;
  font-weight: normal;

}


div.page-title  h2 {
  text-transform: uppercase;
}

input.form-control.login_input_field:focus{
  border: 1px solid var(--theme-color);
  box-shadow:inset 0 1px 1px rgba(0,0,0,0.075),0 0 8px rgba(102, 233, 224, 0.6);
}


ul.bg-bubbles{
  display: none;
}


div.alert-info{
  background-color:var(--theme-color-off-white);
  color:var(--theme-color-dark);
  border: 1px solid var(--theme-color-dark);
}

.menu_and_buttons{
  display: flex;
  flex-direction: column;
}

.menu_and_buttons > .menu{
  display: flex;
}

.menu_and_buttons > .menu > nav{
  flex:auto;
  display: flex;
  align-items: stretch;
  justify-content: flex-end;
}

.menu_and_buttons > .menu > nav > div {
  flex:auto;
  display: flex;
}


.menu_and_buttons > .menu > nav > div > div {
  flex:auto;
  display: flex;
}

.menu_and_buttons > .menu > nav > div > div > div#navbar {
  flex:auto;
  display: flex !important;
  justify-self: flex-end;
  margin-top: 15px;
  justify-content: flex-start ;
}

.menu_and_buttons > .menu > nav > div > div > div#navbar > ul{
  display:none;
}


.menu_and_buttons > .menu > nav > div > div > div#navbar > ul.navbar-right{
  flex:auto;
  display: flex;
  justify-self: flex-end;
  justify-content: flex-end;
  justify-content: center;
}

.menu_and_buttons > .menu > nav > div > div > div#navbar > ul.navbar-right > li{
  flex:auto;
  text-transform: uppercase;
  font-weight: bold;
  display: flex;
  align-items: center;
  justify-content: flex-end;
}


.menu_and_buttons > .menu > nav > div > div > div#navbar > ul.navbar-right > li:last-child{
   min-width:150px;
}


div.header{
  border-bottom:1px solid #CCC;
  background: white;
}


.navbar-default .navbar-nav>.active>a, .navbar-default .navbar-nav>.active>a:hover, .navbar-default .navbar-nav>.active>a:focus{
  background-color: var(--theme-color-light);
  background-color: rgba(0,0,0,0);
  color:var(--theme-color-light);
  display:flex;
  align-items: center;
  justify-content: flex-end;
}

.navbar-default .navbar-nav>li>a:hover, .navbar-default .navbar-nav>li>a:focus{
  background-color: rgba(0,0,0,0);
  color:var(--theme-color-dark);
  display:flex;
  align-items: center;
  justify-content: flex-end;
}

.navbar-default .navbar-nav>li>a, .navbar-default .navbar-nav>li>a{
  color:var(--theme-color);
  display:flex;
  align-items: center;
  justify-content: flex-end;
  overflow: hidden;
}

 li.dropdown>a::before,
 li.active>a::before,
 li[role="tab"]>a::before{
  content:'';
  border: 1px solid var(--active-menu-color);
  position: absolute;
  bottom:10px;
  left:5px;
  width:calc(100% - 10px);
  transform:translateX(-110%);
  transition: all 0.2s linear;
}

li.dropdown>a:hover::before,
li.active>a:hover::before,
li[role="tab"]>a:hover::before
{
  content:'';
  border: 1px solid var(--active-menu-color);
  transform:translateX(0%);
}


.navbar-default .navbar-nav>li>a, .navbar-default .navbar-nav>li>a>span{
  display: inline-block;
  position: relative;
}

.navbar-default .navbar-nav>li>a, .navbar-default .navbar-nav>li>a>span::after{
  content:'';
  position: absolute;
  top:0px;
}


.navbar-default .navbar-toggle{
  border-color: var(--theme-color-dark);
}

.navbar-default, .navbar{
  border-color: rgba(0,0,0,0);
  background-color: rgba(0,0,0,0) !important;
  background-image:linear-gradient(rgba(0,0,0,0) 100%,rgba(0,0,0,0));
  margin-right: 10px;
  box-shadow: none;
}


ul.ui-tabs-nav > li{
  border-radius: 5px;
  background-color: transparent;
  overflow: hidden;
  text-transform: uppercase;
}

table.table_list_view > tbody > tr > td > div > a{
  color:var(--theme-color-light) !important;
}


div.tab_container > ul > li > a,
dd > a{
  color:var(--theme-color-light) !important;
}

table.table_list_view > thead {
  background-color:var(--theme-color);
}

input.form-control:focus,
textarea.form-control:focus,
select.form-control:focus{
  text-align:left;
  border-color: var(--theme-color);
  box-shadow: border-color ease-in-out .15s,-webkit-box-shadow ease-in-out .15s;
}

a.table_header_text:hover{
color:white
}


a.dropdown-toggle {
white-space:nowrap;
}

#cmp_vnt_event_sms\.sms_text_help{
 text-align:right;
 padding-right:15px;
}

.news{
  position: fixed;
  top:15px;
  z-index: 100000;
  right: 45px;
  font-weight: bold;
}

.news > .balance_zero{
  color:red;
}

.news > .balance_low{
  color:orange;
}

.news > .balance_high{
  color:darkgreen;
}


div.adr_packages{
  margin-bottom:20px;
  display:flex;
  flex-wrap: wrap;
  justify-content: space-around;
}

div.adr_package{

  font-family:  Helvetica, Arial, sans-serif;
  color:white;
  border-radius: 10px;
  min-height: 300px;
  max-height: 300px;
  min-width: 200px;
  max-width: 200px;
  display: grid;
  grid-template-areas:
  '. name name .'
  '. image image .'
  '. credits credits .'
  '. description description .'
  '. price price .'
  '. promo_credits promo_credits .'
  '. buy buy .'
  '. . . .'
  ;
  border: 2px solid var(--package-color);
  grid-template-columns: 5px 93px 93px 5px;
  grid-template-rows: 40px 70px 30px 30px 20px 40px 70px 10px;
  box-shadow: 3px 3px 5px 5px rgba(150,150,150,0.5);
  cursor: pointer;
  user-select: none;
  -webkit-user-select: none;
  transform-origin: center center;
  transform:scale(1);
  transition-duration: 500ms;
  margin-bottom:20px;
  background-image: linear-gradient(27deg, rgba(255, 255, 255, 1) 0%, var(--package-gradient-color) 100%);
  color:var(--package-color);
}

div.adr_package::before{
  content:'SELECT ' attr(credits) ' ' attr(plural);
  grid-area: buy;
  color:white;
  background-color:var(--package-color);
  margin-top:10px;
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: 10px;
  text-transform: uppercase;
  max-height: 40px;
  border: 2px solid white;
}

div.adr_package::after{
  border-top:2px solid var(--package-color);
  content:'';
  grid-area: buy;

}


div.adr_package:hover{
  box-shadow: 3px 3px 7px 7px rgba(150,150,150,0.8);
  transform:scale(1.1);
}

div.adr_package.selected:hover{
  transform: scale(1);
}


div.adr_package:active{
  transform:scale(1.1);
  transition-duration: 0ms;
  box-shadow: 0px 0px 0px 0px rgba(150,150,150,0.8);
}


div.adr_package-name{
  grid-area: name;
  font-weight:bold;
  display: flex;
  align-items: center;
  justify-content: center;
  opacity: 0.8;
  user-select: none;
  font-size: 20px;
}


div.adr_package-price{
  grid-area: price;
  position: relative;
  display: flex;
  align-items: center;
  justify-content: center;
  font-weight: bold;
  font-size: 18px;
}

div.adr_package-price::before{
  content: 'R';
}


div.adr_package-credits{
  grid-area: credits;
  display: flex;
  align-items: center;
  margin-top:12px;
  display: flex;
  justify-content: center;
  font-size: 18px;
}

div.adr_package-credits::after{
  content:attr(credits);
  padding-left:3px;
}

div.adr_package-promo_credits{
  grid-area: promo_credits;
  font-style: italic;
  border-radius: 3px;
}

div.adr_package-promo_credits.no_promo_credits{
  display:none;
}



div.adr_package-description{
  grid-area: description;
  padding-right:2px;
  font-weight: normal;
  justify-content: center;
  display: flex;
  align-items: center;
  padding:3px;
}

div.adr_package-description::after{
  content:' per dispute';
  margin-left:3px;
  text-transform: capitalize;
}

div.adr_package-image{
  grid-area: image;
  background-image: var(--package-image);
  background-size: contain;
  background-position-x: center;
  background-position-y: center;
  background-repeat: no-repeat;
}


.adr_package-name{
  font-weight: bold;
}


legend.persist-header{
  background-color: var(--theme-color) !important;
}

div.adr_package_list{
  display:flex;
  border-top:1px solid #CCC;
  margin-top:20px;
}

div.adr_package_list > ul{
  flex:1;
}

div.adr_package_list > ul > li{
  margin-left:50px;
  margin-top:5px;
}

h3.adr_package_list_header{
  color:var(--theme-color-light);
  font-size: 16px;
  font-weight: bold;
  min-height: 40px;
  display: flex;
  align-items: center;
  padding-left:40px;
  background-size: 30px 30px;
  background-position-x:left;
  background-position-y: 5px;
  background-repeat: no-repeat;
}

h3.adr_package_list_header.terms{
  background-image: url('/system/images/adr-terms.png');
}

h3.adr_package_list_header.included{
  background-image: url('/system/images/adr-included.png');
}

h3.adr_package_list_header.excluded{
  background-image: url('/system/images/adr-excluded.png');
}

div.adr_package_payment_instructions{
  display:flex;
  padding-left:50px;
  padding-right:50px;
}

div.adr_selected_packages{
  flex:1;
  max-width: 250px;
}

div.adr_payment_terms{
  flex:1;
   padding-left:20px;
   border-left:1px solid #CCC;
}

div.adr_payment_instructions{
  flex:1;
  max-width:300px;
   border-left:1px solid #CCC;
}

div.adr_buy_buttons{
  flex:1;
  display: flex;
}

div.adr_buy_buttons > button{
  flex:1;
  margin-left:30px;
  margin-right: 30px;
  max-width:300px;
}

div.adr_payment_terms_header{
  color:var(--theme-color);
  font-weight: bold;
  font-size: 20px;
}

div.adr_payment_terms_detail{
  font-size: 20px;
  margin-top:5px;
}

div.adr_buy_button_instructions{
  margin-left:30px;
  margin-right: 30px;
  margin-top:10px;
  max-width:300px;
}
 
 
button#checker_button{
margin-top:20px;
} 

div.panel-content{
  padding-bottom:50px;
}


form#flow_do_order_credits_form{
  /* border: 1px solid red; */
}


form#flow_do_order_credits_form > div.form-group {
  /* border: 1px solid green; */
  text-align: left;
  display: flex;
  align-items: flex-start !important;
  justify-content: flex-start !important;
}

form#flow_do_order_credits_form > div.form-group > dd{
  /* border: 1px solid blue; */
  flex:1;
  display: flex;
  font-weight: bold;
}

form#flow_do_order_credits_form > div.form-group > dt{
  /* border: 1px solid orange; */
  text-align: left;
  width:20%;
  font-weight: normal;
}

form#flow_do_order_credits_form > div#instruction{
  /* border: 1px solid magenta; */
  font-weight: bold;
}


form#adr_lead > #adr_lead\.link_setup_complete_row{
  display:none;
}