@font-face 
{
  font-family  :  'Roboto';
  src          :   url('../fonts/RobotoSlab-Regular.ttf');
}

@font-face 
{
  font-family  :  'Roboto Bold';
  src          :   url('../fonts/RobotoSlab-Bold.ttf');
}

:focus
{
  -moz-outline-style  :  none;
}

html
{

}

body
{
  margin      :  0px;
  background  :  #2c2a3e;
}

table
{
  border-collapse  :  collapse;
  border-spacing   :  0;
  table-layout     :  fixed;
}

body, p, div, td, span, a
{
  font-family  :  arial, sans-serif;
  font-size    :  14px;
  color        :  #444444;
  
  position     :  relative;
  outline      :  none;  
}


h1
{
  padding      :  0px;
  margin       :  0px;
  text-align   :  center;
  background   :  #2c2a3e;
  margin       :  0px;
  display      :  block;
  line-height  :  120px;
  height       :  120px;
}

h1 span
{
  font-family	  :  "Roboto Bold", arial, sans-serif;
  font-size	      :  48px;
  font-weight     :  bold;
  color           :  #ffffff;
  
  text-align      :  center;
  text-shadow     :  1px 1px 0px #999999;
  letter-spacing  :  3px;
}

h1 img
{
  position  :  absolute;
  top       :  22px;
  left      :  25px;
  height    :  80px;
}

h2 
{
  font-family	:  "Roboto Bold", arial, sans-serif;
  font-size	    :  26px;
  font-weight	:  bold;
  text-align    :  left;
  color		    :  #2c2a3e;

  margin        :  20px 0px 20px 0px;
}

.hidden
{
  display  :  none;
}

hr
{
  border-top     :  dotted 1px #999999;
  border-right   :  solid 1px #ffffff;
  border-bottom  :  solid 1px #ffffff;
  border-left    :  solid 1px #ffffff;
  margin         :  20px 0px 20px 0px;
}

div.br
{
  clear        :  both;
  line-height  :  0px;
  height       :  0px;
  font-size    :  0px;
}

div.br10
{
  clear        :  both;
  line-height  :  30px;
  height       :  30px;
  font-size    :  1px;
}

div.br5
{
  clear        :  both;
  line-height  :  15px;
  height       :  15px;
  font-size    :  1px;
}

form
{
  margin  :  0px;
}

label
{
  font-family	 :  "Roboto", arial, sans-serif;
  font-size	     :  14px;
  color		     :  #222222;

  display	     :  block;
  width		     :  100%;
  margin-bottom  :  10px;
  font-weight	 :  400;
}

label span, label span a, label span a:hover
{
  font-family   :  "Roboto", arial, sans-serif;
  font-size	    :  12px;
  color         :  #aaa;
}

input.textbox, select
{
  font-family  :  "Roboto", arial, sans-serif;
  font-size    :  18px;
  color        :  #555555;

  display      :  block;
  padding      :  12px 20px;
  box-sizing   :  border-box;
  border       :  1px solid #d5d6d6;
}

.buttonNext, .buttonPrevious
{
  font-weight      :  bold;
  font-size        :  16px;
  color            :  #fff;
  background       :  #4966b1;
  text-decoration  :  none;
  border           :  0;
  cursor           :  pointer;
  display 	       :  inline-block;
}

.buttonNext
{
  padding  :  18px 75px 18px 35px;
}

.buttonPrevious
{
  padding  :  18px 35px 18px 75px;
}

.buttonNext:hover, .buttonPrevious:hover, .next:hover .buttonNext, .prev:hover .buttonPrevious
{
  background  :  #2c2a3e;
  cursor      :  pointer;
}

.next, .prev
{
  display  :  inline-block;
}

.next:after, .buttonNext:after
{
  content    :  '\2192';
  display    :  block;
  position   :  absolute;
  color      :  #ffffff;
  font-size  :  30px;
  top        :  7px;
  right      :  30px;
  cursor     :  pointer;
}

.prev:after, .buttonPrevious:after
{
  content    :  '\2190';
  display    :  block;
  position   :  absolute;
  color      :  #ffffff;
  font-size  :  30px;
  top        :  7px;
  left       :  30px;
  cursor     :  pointer;
}


#LeftPanel
{
  background  :  #ffffff;
  min-height  :  600px;
  padding     :  15px 0px 0px 10px;
}

#LeftPanel #Steps
{
  width    :  84%;
  float    :  left;
  padding  :  40px 8% 0px 8%; 
}

#LeftPanel #Steps a
{
  text-decoration  :  none;
  display          :  block;
  margin-bottom    :  40px;
}

#LeftPanel #Steps .details span:nth-of-type(1)
{
  font-size                :  20px;	
  font-weight              :  bold;
  color                    :  #ffffff;
  width                    :  40px;
  height                   :  40px;
  background               :  #ebebeb;
  display                  :  inline-flex;
  background     	       :  #4966b1;
  border-radius            :  50%;
  -moz-border-radius       :  50%;
  -webkit-border-radius    :  50%;
  -o-border-radius         :  50%;
  -ms-border-radius        :  50%;
  align-items              :  center;
  -moz-align-items         :  center;
  -webkit-align-items      :  center;
  -o-align-items           :  center;
  -ms-align-items          :  center;
  justify-content          :  center;
  -moz-justify-content     :  center;
  -webkit-justify-content  :  center;
  -o-justify-content       :  center;
  -ms-justify-content      :  center;
}

#LeftPanel #Steps .details span:nth-of-type(2)
{
  font-family    :  "Calibri", arial, sans-serif; 
  font-size      :  18px;  
  color          :  #464646;
  display        :  inline-block;
  margin-left    :  15px;
  top            :  0px;
}

#LeftPanel #Steps .details span:nth-of-type(3)
{
  font-family    :  "Calibri", arial, sans-serif;
  color          :  #a8a8a8;
  display        :  block;
  font-size      :  14px; 
  margin-left    :  60px;
  top            :  -15px;
}

#LeftPanel #Steps .details.selected .title
{
  color  :  #4966B1;
}

#LeftPanel #Steps .line
{
  width          :  5px;
  height         :  80px;
  background     :  #EBEBEB;
  position       :  absolute;
  left           :  17px;
  top            :  40px;
}

#LeftPanel #Steps .selectedLine
{
  background  :  #4966B1;  
}


#Contents
{
  padding     :  20px 5% 50px 5%;
  background  :  #f8f8f8;  
}

#Contents .step
{
  min-height  :  400px;
}


#Footer
{
  clear        :  both;
  line-height  :  60px;
  background   :  #2c2a3e;
  
  font-family  :  verdana, arial, sans-serif;
  font-size    :  11px;
  color        :  #eeeeee;    
  
  text-align   :  center;
  text-shadow  :  1px 1px 0 #000000;
}

#Footer a
{
  font-family      :  verdana, arial, sans-serif;
  font-size        :  11px;
  color            :  #eeeeee;  

  text-shadow      :  1px 1px 0 #000000;
  text-decoration  :  none;
}

#Footer a:hover
{
  font-family      :  verdana, arial, sans-serif;
  font-size        :  11px;
  color            :  #aaaaaa;  

  text-shadow      :  1px 1px 0 #000000;
  text-decoration  :  none;
}


#frmVoucher
{
  padding  :  40px 0px 50px 0px;
}

#frmVoucher label
{
  font-size  :  21px;
}

#frmVoucher input.textbox
{
  width           :  100%;
  letter-spacing  :  5px;
}


.tblFee label, .fee label
{
  font-size      :  17px;
  font-weight    :  bold;
  color          :  #444444;
  margin-bottom  :  5px;
}

.tblFee div, .fee div
{
  font-size  :  16px;
}

.tblFee div b, .fee div b
{
  color  :  #777777;
}

.fee
{
  border         :  solid 1px #dddddd;
  background     :  #fcfcfc;
  padding        :  30px;
  margin-bottom  :  20px;
}

.fee.selected
{
  border-color  :  #4966b1;
  background    :  #eff1f7;
}

.fee .btnSelect
{
  font-weight            :  bold;
  font-size              :  16px;
  color                  :  #666666;
  text-transform         :  uppercase;
  
  background             :  #dddddd;
  border                 :  solid 2px #cccccc;
  cursor                 :  pointer;
  display 	             :  inline-block;
  padding                :  10px 25px 10px 45px;
  
  border-radius          :  20px;
  -moz-border-radius     :  20px;
  -webkit-border-radius  :  20px;
  -o-border-radius       :  20px;
  -ms-border-radius      :  20px;
}

.fee .btnSelect:after
{
  content    :  '\2713';
  display    :  block;
  position   :  absolute;
  color      :  #666666;
  font-size  :  30px;
  top        :  -2px;
  left       :  15px;
  cursor     :  pointer;
}

.fee .btnSelect.selected
{
  color         :  #ffffff;  
  background    :  #4966b1;
  border-color  :  #3a5393;
}

.fee .btnSelect.selected:after
{
  content  :  '\2713';
  color    :  #ffffff;
}

.fee .btnSelect.selected.disabled
{
  color  :  #cccccc;  
}

.fee .btnSelect.selected.disabled:after
{
  color  :  #cccccc;
}


#TotalPayable
{
  border      :  dotted 1px #2c2a3e;
  background  :  #e2e0f0;
  padding     :  30px;
}

#TotalPayable label
{
  color  :  #000000;
}

#TotalPayable b
{
  color  :  #444444;
}



#frmPayment
{
  padding  :  10px 0px 40px 0px;
}

#frmPayment label
{
  font-size      :  17px;
  margin-bottom  :  3px;
}

#frmPayment #txtCardNo, #frmPayment #txtCardName
{
  width  :  340px;
}

#frmPayment #txtCardNo, #frmPayment #txtCvvCode
{
  letter-spacing  :  5px;
}

#frmPayment select
{
  display  :  inline-block;
  width    :  120px;
}

#frmPayment select:last-child
{
  margin-left  :  10px;
}


.tblPayment
{
  padding-bottom  :  100px;
}

.tblPayment label
{
  font-size     :  18px;
  font-weight   :  bold;
  color         :  #444444;
  margin-bottom :  4px;
}

.tblPayment div
{
  font-size  :  17px;
}


#PaymentReview small
{
  display      :  block;
  color        :  #888888;
  line-height  :  18px;
}


#Overlay, iframe#Secure3d
{
  background  :  #ffffff;
  position    :  absolute;
  top         :  0px;
  left        :  0;
  right       :  0;
  bottom      :  0;
  z-index     :  999;
  display     :  none;
}

iframe#Secure3d
{
  z-index  :  999999 !important;
}


#AjaxIndicator
{
  font-family            :  'Open Sans', sans-serif, arial;
  font-size              :  14px;
  color                  :  #ffffff;
   
  padding                :  5px 20px 5px 20px;
  background             :  #bb0000;
  cursor                 :  pointer;
  position               :  fixed;
  top                    :  0px;
  left                   :  calc(50% - 160px);
  z-index                :  999999;
  display                :  none;
  
  -moz-border-radius     :  0px 0px 3px 3px;
  border-radius          :  0px 0px 3px 3px;
  -webkit-border-radius  :  0px 0px 3px 3px;  	
}

.alert
{
  clear                  :  both;
  background             :  #feffc8 url('../images/icons/alert.png') 10px 10px no-repeat;
  border                 :  solid 1px #f1aa2d;
  padding                :  10px 10px 10px 35px;
  margin-bottom          :  15px;
  min-height             :  16px;
  line-height            :  16px;
  cursor                 :  pointer;
  
  -moz-border-radius     :  4px;
  border-radius          :  4px;
  -webkit-border-radius  :  4px; 
  
  font-family            :  'Roboto', arial, sans-serif;
  font-size              :  14px;
  color                  :  #000000;
}

.error
{
  clear                  :  both;
  background             :  #fdcea4 url('../images/icons/error.png') 10px 10px no-repeat;
  border                 :  solid 1px #c44509;
  padding                :  10px 10px 10px 35px;
  margin-bottom          :  15px;
  min-height             :  16px;
  line-height            :  16px;
  cursor                 :  pointer;
  
  -moz-border-radius     :  4px;
  border-radius          :  4px;
  -webkit-border-radius  :  4px;  
  
  font-family            :  'Roboto', arial, sans-serif;
  font-size              :  14px;
  color                  :  #000000;
}

.success
{
  clear                  :  both;
  background             :  #d4f684 url('../images/icons/success.png') 10px 10px no-repeat;
  border                 :  solid 1px #739f1d;
  padding                :  10px 10px 10px 35px;
  margin-bottom          :  15px;
  min-height             :  16px;
  line-height            :  16px;
  cursor                 :  pointer;
  
  -moz-border-radius     :  4px;
  border-radius          :  4px;
  -webkit-border-radius  :  4px;
  
  font-family            :  'Roboto', arial, sans-serif;
  font-size              :  14px;
  color                  :  #000000;
}

.info
{
  clear                  :  both;
  background             :  #c3e4fd url('../images/icons/info.png') 10px 10px no-repeat;
  border                 :  solid 1px #688fdc;
  padding                :  10px 10px 10px 35px;
  margin-bottom          :  15px;
  min-height             :  16px;
  line-height            :  16px;
  cursor                 :  pointer;
  
  -moz-border-radius     :  4px;
  border-radius          :  4px;
  -webkit-border-radius  :  4px;
  
  font-family            :  'Roboto', arial, sans-serif;
  font-size              :  14px;
  color                  :  #000000;
}

a.download, a.download:hover
{
  font-family	   :  "Roboto", arial, sans-serif;
  font-weight      :  bold;
  font-size	       :  21px;
  color		       :  #444444;

  text-decoration  :  none;
  line-height      :  25px;
}

a.download:hover
{
  color  :  #aa0000;
}

a.download img
{
  margin-right  :  20px;
  display       :  inline-block;
  float         :  left;
}