@charset "UTF-8";
/* CSS Document */



.mainContainner{
  display:relative;
  width: 100%;
  min-width: 300px;
 overflow: hidden;
}

.mainHeader{
  display:relative;
  width: 100%;
  /* Height: 300px; */
 overflow: hidden;
 color:#FFF;
}

.leftHeader{
  display:relative;
  width: 100%;
  Height: 100%;
 /* background-color: red; */
  float: left;
    /*border-style: solid; */
    /*border-width: 1px; */
}

.rightHeader{
  display:relative;
  width: 49%;
  Height: 100%;
  /*background-color: blue; */
  float: right;

}

.leftHeaderContent{
  display:relative;
  width: 100%;
  /*Height: 32%; */
  float: left;
  padding-bottom:10px;
  padding-left:10px;
    /*border-style: solid; */
   /* border-width: 1px; */
}


.buttonBar{
 	display: relative;
 width: 100%;
  Height: 40px;
  background-color:black;
    text-align: center;
	float:left;
}

.buttonBarContent{
  /*display:relative; */
  /*width: 10%; */
  Height: 40px; 
  padding-left:10px;
  
      display:table-cell;
    vertical-align:middle;


    /*border-style: solid; */
   /* border-width: 1px; */
}


#fields{
    padding: 20px;
    background: #f4f7f8;
    border-radius: 8px;
	margin:20px;
}

#fields label {
    display: inline-block;
    width: 150px;
    text-align: right;
    padding-right: 0.5em;
	vertical-align:middle;
}
#fields input {
    display: inline-block;
}




input[type=text] {
   /* width: 200px; */
    padding: 3px 5px;
    margin: 2px 0;
    box-sizing: border-box;
    border: 3px solid #ccc;
    -webkit-transition: 0.5s;
    transition: 0.5s;
    outline: none;
}

input[type=text]:focus {
    border: 3px solid #555;
}
input[type="text"]:disabled {
    background: #f4f7f8;  /* #dddddd */
}


input[type="button"], 
input[type="submit"] {
    -moz-box-shadow: inset 0px 0px 0px 0px #FFFFFF;
    -webkit-box-shadow: inset 0px 0px 0px 0px #FFFFFF;
    box-shadow: inset 0px 0px 0px 0px #FFFFFF;
    background-color: #FFFFFF;
    border: 1px solid #000000;
	border-radius: 8px;

    display: inline-block;
    cursor: pointer;
    color: #000000;
    padding: 4px 9px;
    text-decoration: none;
    font: 12px Arial, Helvetica, sans-serif;
	
}
input[type="button"]:hover, 
input[type="submit"]:hover {
    background: linear-gradient(to bottom, #81B29C 5%, #FFFFFF 100%);
    background-color: #81B29C;
}

.required{
	word-spacing:-999px;
	letter-spacing: -999px; 
	color:#F00;
    font: 24px Arial, Helvetica, sans-serif;
}

.required:after {
	content: " • ";
	word-spacing:normal;
	letter-spacing:normal; 
}


.numberCircle {
  display:inline-block;
  line-height:0px;

  border-radius:50%;
  border:1px solid;
  border-color:#CCC;

  font-size:14px;
  font-weight:bold;
  color:#09F;
}

.numberCircle span {
  display:inline-block;

  padding-top:50%;
  padding-bottom:50%;

  margin-left:4px;
  margin-right:4px;
}


.fieldRow {
  margin:8px;
}

.fieldRow select {
  width:200px;
}


 .totalBlock{
    color: blue;
    width: 200px;
    border: 2px solid black;
    position: relative;
    top: 0px;
    right: 0px;
	float:right;
	
  }
  
  .totalBlock div{
	  left:5px;
	  top:5px;
	  color:#000;
	  margin:10px;
	  
  }
  

  .shippingBlock{
    color: blue;
    width: 200px;
    position: relative;
    top: 0px;
    right: 0px;
	float:right;
	
  }
  
  .shippingBlock div{
	  left:5px;
	  top:5px;
	  color:#000;
	  margin:10px;
	  
  }


/* HOVER STYLES */
.popup_help {
  display: none;
  position: absolute;
  width: 380px;
  padding: 10px;
  background: #eeeeee;
  color: #000000;
  border: 1px solid #1a1a1a;
  font-size: 90%;
}




  .helpName {
    float: left;
    clear: left;
    text-align: left;
    font-weight: bold;
    color: green;
	width:100px;
  }
  .helpDesc {
    margin: 0 0 0 110px;
	margin-left: 100px;
	display:block;
    padding: 0 0 0.5em 0;
  }



  #cover-spin {
    position:fixed;
    width:100%;
    left:0;right:0;top:0;bottom:0;
    background-color: rgba(255,255,255,0.7);
    z-index:9999;
    display:none;
}

@-webkit-keyframes spin {
	from {-webkit-transform:rotate(0deg);}
	to {-webkit-transform:rotate(360deg);}
}

@keyframes spin {
	from {transform:rotate(0deg);}
	to {transform:rotate(360deg);}
}

#cover-spin::after {
    content:'';
    display:block;
    position:absolute;
    left:48%;top:40%;
    width:40px;height:40px;
    border-style:solid;
    border-color:black;
    border-top-color:transparent;
    border-width: 4px;
    border-radius:50%;
    -webkit-animation: spin .8s linear infinite;
    animation: spin .8s linear infinite;
}