﻿@charset "utf-8";

@import url('font-awesome.min.css');

/* Feedback screen */

.FeedbackHeader{
    display:table;
    margin:0 auto;
}

.Feedbackhead{
 background-image:url(../images/iconfeedback.png);
 background-repeat:no-repeat;
 height:50px;
 width:56px;
 float:left;
 margin:5px 10px 0 5px;
}

.subfeedtext{
    color:#4a4a4a;
    font-size:18px;
    text-align:center;
}

.Feedbacklabel{
    font-family:Arial, Helvetica, sans-serif;
    padding-top:20px;
    color: #3f89c3; 
    font-size:26px;
    color: #153455;
    font-family: DroidSans-Bold;
    text-shadow: 2px 3px 3px #2d2d2d;
}

.Feedbackcontent{
    margin-top:20px;
    color:#6f6f6f;
    margin-left:15px;
    font-size:1.1rem;
}

.controllabel {
  color:#999; 
  font-size:20px;
  font-weight:normal;
  position:absolute;
  pointer-events:none;
  top:5px;
  transition:0.2s ease all; 
  -moz-transition:0.2s ease all; 
  -webkit-transition:0.2s ease all;
}

*, *:before, *:after {
    -webkit-box-sizing: border-box;
    -moz-box-sizing: border-box;
    box-sizing: border-box;
}

.floating-textarea {
   min-height: 100px;
   max-height: 260px; 
   overflow:hidden;
  overflow-x: hidden; 
}

.radio-custom{
    opacity: 0;
    position: absolute;
}

.radio-custom, .radio-custom-label {
    display: inline-block;
    vertical-align: middle;
    margin: 5px;
    cursor: pointer;
}

.radio-custom-label {
    position: relative;
}

.radio-custom + .radio-custom-label:before {
    content: '';
    background: #fff;
    border: 2px solid #ddd;
    display: inline-block;
    vertical-align: middle;
    width: 28px;
    height: 28px;
    padding: 2px;
    margin-right: 10px;
    text-align: center;
}

.radio-custom + .radio-custom-label:before {
    border-radius: 50%;
}

.radio-custom:checked + .radio-custom-label:before {
    content: "\f00c";
    font-family: 'FontAwesome';
    color: #fff;
    background:#3f89c3;
    font-size:17px;
}
.radio-custom:focus + .radio-custom-label {
  outline: 1px solid #ddd;
}

.radiolabel{
    margin-bottom:10px;
}

.floating-label select{
    -webkit-appearance: none;
    -moz-appearance: none;
     appearance: none;
}

.referrencehead{
    text-align:center;
    font-size:24px;
    color:#6f6f6f;
}

.button-blue{
    background: #3f89c3;
    color: #fff !important;
    padding: 0.75rem 1.50rem;
border: none;
white-space: nowrap;
font-size: .8rem;
cursor: pointer;
font-weight: 800;
display: inline-block;
text-align: center;
font-family: avenir-light,sans-serif;
transition: all .3s ease;
margin-right:10px;
}

.button-blue:hover{
box-shadow: inset 0 0 0 1px #3f89c3;
background: #fff;
color: #3f89c3 !important;
text-decoration: none;
}

.referhead{
    text-align:center;
    font-size:24px;
    color:#6f6f6f;

}
.submitbutton{
    margin-top:30px;
    margin-left:40px;
    margin-bottom:30px;
    text-align:center;
    display:flex;
}

.submitbutton span:first-child{
    margin-right:10px;
}

.feedbackbtn{
 padding:5px 25px;
}

.radio-custom-label{
    color:#999;
    font-size:20px;
}
/****  floating-Lable style end ****/

.box{
	position: relative;
}

.floating-label 			  { 
  position:relative; 
  margin-bottom: 35px; 
  margin-left: 40px;
  margin-top:30px;
}

.floating-input,.floating-select {
    font-size: 18px;
    padding: 10px 0 10px 0;
    display: block;
    width: 100%;
    border: none;
    border-bottom: 1px solid #3f89c3;
    width: 100%;
    height:50px;
}

.floating-input:focus,.floating-select:focus{outline:none;}
.selectbar {
  position:absolute;
  height:50%; 
  width:100%; 
  top:15%; 
  left:0;
  pointer-events:none;
  opacity:0.5;
}

.floating-select:focus ~ label , .floating-select:not([value=""]):valid ~ label {
  top:-18px;
  font-size:17px;
  color:#3f89c3;
}

.floating-select:focus ~ .bar:before, .floating-select:focus ~ .bar:after {
  width:50%;
}

/* active state */
/*.floating-input:focus ~ .controllabel{
  top:-18px;
  font-size:17px;
  color: #3f89c3;
}*/

.inputMaterial:valid ~ label {

}

.bar 	{ 
  position:relative;
  display:block; width:100%;
}

.bar:before, .bar:after{
  content:'';
  height:2px; 
  width:0;
  bottom:1px; 
  position:absolute;
  background: #3f89c3; 
  transition:0.2s ease all; 
  -moz-transition:0.2s ease all; 
  -webkit-transition:0.2s ease all;
}
.bar:before {
  left:50%;
}
.bar:after {
  right:50%; 
}

/* active state */
.floating-input:focus ~ .bar:before, .floating-input:focus ~ .bar:after {
  width:50%;
}


/* active state */
.floating-input:focus ~ .highlight,.floating-select:focus ~ .highlight {
  -webkit-animation:inputHighlighter 0.3s ease;
  -moz-animation:inputHighlighter 0.3s ease;
  animation:inputHighlighter 0.3s ease;
}

.floating-select:focus {
     outline:none;
     border-bottom:2px solid #3f89c3; 
}

.floating-input:focus ~ label, .floating-input:valid ~ label 		{
  top:-18px;
  font-size:17px;
  color: #3f89c3;
}

.icon_close {
    width: 15px;
    height: 15px;
    background: url(../images/icon_close.png) no-repeat left top;
    position: absolute;
    right: 18px;
    top: 2px;
}

.closeiconpop {
    top: 45px;
    right: 16px;

}

/*Bound Volume Screen.*/
.tablehead{
    background: #ffcb63 none repeat scroll 0 0;
    padding: 5px;
    text-align: left !important;
    padding-top: 15px;
}
th{
    width:20%;
}
td{
    width:20%;
}

/* ANIMATIONS ================ */
@-webkit-keyframes inputHighlighter {
	from { background:#3f89c3; }
  to 	{ width:0; background:transparent; }
}
@-moz-keyframes inputHighlighter {
	from { background:#3f89c3; }
  to 	{ width:0; background:transparent; }
}
@keyframes inputHighlighter {
	from { background:#3f89c3; }
  to 	{ width:0; background:transparent; }
}
.controllabel[for=profession]:focus{
    top:-18px;
  font-size:17px;
  color: #3f89c3;
}
#idValidationPopup ul li{
  list-style-type : none;
  padding-left: 5px;
  padding-top : 5px;
  padding-bottom : 5px;
}

@media only screen and (max-width : 600px){
    #Menu ul li a{
        padding: 6px 10px 0 10px;
    }

}