/* 
    Created on : May 16, 2017, 9:44:42 AM
    Author     : John
*/



.form-control {
  display: block;
  width: 100%;
  height: 24px;
  padding: 6px 12px;
  font-size: 14px;
  line-height: 1.42857143;
  color: #555;
  background-color: #fff;
  background-image: none;
  border: 1px solid #ccc;
  border-radius: 4px;
  -webkit-box-shadow: inset 0 1px 1px rgba(0, 0, 0, .075);
          box-shadow: inset 0 1px 1px rgba(0, 0, 0, .075);
  -webkit-transition: border-color ease-in-out .15s, box-shadow ease-in-out .15s;
          transition: border-color ease-in-out .15s, box-shadow ease-in-out .15s;
}



.form-control:focus {
  border-color: #66afe9;
  outline: 0;
  -webkit-box-shadow: inset 0 1px 1px rgba(0,0,0,.075), 0 0 8px rgba(102, 175, 233, .6);
          box-shadow: inset 0 1px 1px rgba(0,0,0,.075), 0 0 8px rgba(102, 175, 233, .6);
}

.float-left{
    float: left;
}

.clear-both{
    clear: both;
}

.width60{
    width: 55%; 
    height: 150px;
}

.width40{
    width: 45%;
    height: 150px;
}

.form-group{
    margin-top: 20px;
    margin-bottom: 40px;
}


/*coupons page*/
.coupon-container{
    width: 50%;
    margin-top: 50px;
}

.center-block{
    display: block;
    margin-left: auto;
    margin-right: auto;
}



.header-container-1{
    background-color: #1c72b5;
    color: #fff;
    padding-left: 30px;
    
}


.circleBase {
    display: inline-block;
    border-radius: 50%;
    width: 28%;
    padding-top: 14%;
    padding-bottom: 14%;
    margin-left: 2%;
    margin-right: 2%;
    color: #fff;
}

.circle1{
    background-color: #89C3D9;
}

.circle1-inner{
    position: absolute;
    top: 35px;
    left: 26px;
    font-size: 12px;
    color:  #fff;
}

.circle1-inner a{
    text-decoration: none;
}

.circle1-inner a:hover{
    text-decoration: underline;
}



/* visited link */
 .circle1-inner a:visited {
    color:  #fff;
}

/* mouse over link */
.circle1-inner a:hover {
    color:  #fff;
}

/* selected link */
.circle1-inner a:active {
    color:  #fff;
}






.circle2{
    background-color: #4C61A1;
    
}

.circle2-inner{
    position: absolute;
    top: 25px;
    left: 119px;
    text-align: center;
    font-size: 12px;
}

.circle3{
    background-color: #68A7DE;
}

.circle3-inner{
    position: absolute;
    font-size: 12px;
    top: 22px;
    left: 116px;
    text-align: center;
    color:  #fff;
}

/* .circle3-inner:hover{
    text-decoration: underline;
} */



.circleContainer{
    position:relative;
    /*width: 100%;*/
    height: 100%;
    top: 100px;
    width: 300px;
    left:0;
     
}



.coupons-header{
    display: block;
    background-color: #4470B4;
    color: #fff;
    margin-bottom: 50px;
}

.coupon{
    width: 300px;
    height: 465px;
    border: 2px dashed #003A7B;
    position: relative;
    padding: 20px 10px 10px;
    text-align: center;
    margin-top: 20px;
    margin-bottom: 20px;
    text-decoration: none;
    background-color: #fff;
    vertical-align: top;
}

.coupon h3{
    color: #004293;
    font-size: 16px;
    font-weight: bold;
    display: block;
}

.coupon .coupon-discount {
    display: block;
    position: absolute;
    left: 0px;
    bottom: 105px;
    width: 100%;
    z-index: 10;
    color: #C6362E;
    font-size: 32px;
    font-weight: bold;
}


.coupon .coupon-discount-type{
    display: block;
    position: absolute;
    left: 0px;
    bottom: 75px;
    width: 100%;
    z-index: 10;
    color: #000;
    font-size: 12px;
}

.coupon .coupon-bottom-area{
    display: inline-block;
    position: absolute;
    left: 0px;
    bottom: 0px;
    right: 0px;
    height: 50px;
    z-index: 10;
    color: #FFF;
    font-size: 13px;
    background-color: #4470B4;
    border: 0;
    padding-top:15px;
    outline: none;
}


.coupon:before{
    content: url(../../coupons_img/scissors.png);
    position: absolute;
    top: -14px;
    left: 45px;
}

/*registration form*/

.header-container-2{
    color: #fff; 
}

.couponsRegistrationFromContainer{
    margin-top: 30px;
}


#couponsRegistrationFrom {
    max-width: 800px;
}

#couponsRegistrationFrom label{
    text-align: left;
}

#couponsRegistrationFrom .form-control{
    margin-bottom: 5px;
    border-radius: 15px;
    height: 28px;
    width:350px;
}


.form-header-left{
    background-color: #4470B4;
    color: #fff;
    height: 200px;
    font-size: 22px;
    text-align: center;
    display: block;
    position: relative;
}


.form-header-right{
     background-color: #A1C2C4;
     color: #000;
     text-align: center;
     height: 200px;
     font-size: 15px;
     display: block;
     position: relative;
}

.btn-connect{
    background-color: #1c72b5;
    color: white;
    border: none;
    border-radius: 15px;
    line-height: 30px;
    padding-left: 10px;
    padding-right: 10px;
    margin-top: 8px;
    
}


.outer {
    display: table;
    position: absolute;
    height: 100%;
    width: 100%;
}

.inner {
    display: table-cell;
    vertical-align: middle;
}


.loginFormContainer{
    width: 80%;
    margin-top: 10px;
   
}

#loginForm .form-control{
    margin-bottom: 5px;
    border-radius: 15px;
    height: 15px;
    
}

#loginForm .btn-default {
    
    background-color: #4470B4;
    color: #fff;
    border-radius: 15px;
    height: 32px;
    
}

#couponsRegistrationFrom .btn-default {
    
    background-color: #4470B4;
    color: #fff;
    border-radius: 15px;
    height: 32px;
    padding-right: 10px;
    padding-left: 10px;
    border: none;
    
}

.couponsRegistrationFromContainer p{
    color: grey;
}

/*print page*/
.black-line{
   position: relative;
   display: block;
   width: 100%; 
   text-align: center; 
   border-bottom: 2px solid #000; 
   line-height: 0.1em;
   margin: 20px 0 30px; 
}
       
.printSection{
    width:100%;
    margin-top: 50px;  
}

.printSection-left{
 width: 50%;
}

.printSection-right{
   width: 50%;
}

.black-line:after{
    background: #fff;
    position: absolute;
    width: 30px;
    top: -16px;
    border: 1px solid #000;
    border-radius: 50%;
    font-size: 18px;
    padding-top: 15px;
    padding-bottom: 15px;
    margin-left: auto;
    margin-right: auto;
    left: 0;
    right: 0;
}


#divider1:after{
    content: "1";
    left: 50%;
}

#divider1-mobile:after{
    content: "1";
}

#divider2:after{
    content: "2";
}

#divider3:after{
    content: "3";
}

.display-mobile{
    display: none;
}

.print-button{
    background-color: #1c72b5;
    color: #fff;
    border: none;
    border-radius: 15px;
    line-height: 30px;
    padding-left: 10px;
    padding-right: 10px;
    margin-top: 30px;
}


/*media queries*/

@media only screen and (max-width:800px) { 
	/* CSS rules here */
        .coupon-container, .width40, .width60{
            width: 100%;
        }
        
        .printSection-left, .printSection-right{
            width: 100%;
        } 
        
        .no-display-mobile{
            display: none;
        }
        
        .display-mobile{
            display: block;
        }
}