::placeholder { /* Chrome, Firefox, Opera, Safari 10.1+ */
  color: #C7C4C4;
  opacity: 0.8; /* Firefox */
}

:-ms-input-placeholder { /* Internet Explorer 10-11 */
  color: #C7C4C4;
}

::-ms-input-placeholder { /* Microsoft Edge */
  color: #C7C4C4;
}



.cfgbox {
      display: flex;
      justify-content: center;
      font-family: Roboto, Arial, sans-serif; 
      align-items: center;
      height: inherit;
      padding: 20px;
      width: 500px;
      margin: 0 auto;
}


.cfgbox h3 {
      margin: 0 0 20px 0;
      padding: 10px;
      text-align: center;
      color: #fff;
      font-size: 14px;
      background-color: #405871;
/*   
      background: -moz-linear-gradient(top, #2e5764, #1e3d47);
      background: -webkit-gradient(linear,left bottom,left top,color-stop(0, #1e3d47),color-stop(1, #2e5764));
*/      
    }
    
 .cfgbox h4 {
          font-size: 14px;
    }
    




.cfgbox form, input, select, p { 
      padding: 0;
      margin: 0;
      outline: none;
//    font-family: Roboto, Arial, sans-serif;
      font-size: 14px;
      color: #666;
      line-height: 22px;
      }    

.cfgbox form {
  width: 100%;
   padding: 20px;
   border-radius: 6px;
   background: #fff;
   box-shadow: 0 0 25px 0 #1c87c9; 
   text-align: left;
   }

      .cfgbox input, select, textarea {
      margin-bottom: 10px;
      border: 1px solid #ccc;
      border-radius: 3px;
      }
      .cfgbox input {
      width: calc(100% - 10px);
      padding: 5px;
      }
      
      .cfgbox select {
      width: 100%;
      padding: 7px 0;
      background: transparent;
      }
      
      .cfgbox select[disabled]{
        background-color:#eee;
      }
     .cfgbox select:disabled{
        background-color:#eee;
      }                  
      
      .item:hover p, .item:hover i, .question:hover p, .question label:hover, input:hover::placeholder {
      color: #1c87c9;
      }
      .item input:hover:enabled, textarea:hover:enabled, .item select:hover:enabled {
      border: 1px solid transparent;
      box-shadow: 0 0 6px 0 #1c87c9;
      color: #1c87c9;
      }
      
      .item textarea:focus {
	-moz-box-shadow: 0 0 8px #88D5E9;
	-webkit-box-shadow: 0 0 8px #88D5E9;
	box-shadow: 0 0 8px #88D5E9;
	border: 1px solid #88D5E9;
	}
	
	textarea {
	box-sizing: border-box;
	-webkit-box-sizing: border-box;
	-moz-box-sizing: border-box;
	border:1px solid #BEBEBE;
	padding: 7px;
	margin:0px;
/*	
	-webkit-transition: all 0.30s ease-in-out;
	-moz-transition: all 0.30s ease-in-out;
	-ms-transition: all 0.30s ease-in-out;
	-o-transition: all 0.30s ease-in-out;*/
	outline: none;	
       }	 
       
      .item {
      position: relative;
      margin: 6px 0;
      }
      
      .cfgbox input[type=checkbox]
      {
      width:auto;
      margin-right: 10px;
      justify-content: left;
      } 
      

          
      input[type=radio]  {
      display: none;
      }
      label.radio {
      position: relative;
      display: inline-block;
      margin: 5px 20px 10px 0;
      cursor: pointer;
      }
      .question span {
      margin-left: 30px;
      }
      span.required {
      margin-left: 0;
      color: red;
      }
      label.radio:before {
      content: "";
      position: absolute;
      left: 0;
      width: 17px;
      height: 17px;
      border-radius: 50%;
      border: 2px solid #ccc;
      }
      input[type=radio]:checked + label:before, label.radio:hover:before {
      border: 2px solid #1c87c9;
      }
      label.radio:after {
      content: "";
      position: absolute;
      top: 6px;
      left: 5px;
      width: 8px;
      height: 4px;
      border: 3px solid #1c87c9;
      border-top: none;
      border-right: none;
      transform: rotate(-45deg);
      opacity: 0;
      }
      input[type=radio]:checked + label:after {
      opacity: 1;
      }
      
 .btn-block {
      margin-top: 10px;
      text-align: center;
      }
      .btn-block button {
      width: 90px;
      padding: 10px;
      border: none;
      margin-right:15px;
      margin-left:15px;
      -webkit-border-radius: 5px; 
      -moz-border-radius: 5px; 
      border-radius: 5px; 
      background-color: #6495ed;
      font-size: 16px;
      color: #fff;
      cursor: pointer;
      }
      .btn-block button:hover {
      background-color: #191970;
      }      
      
      .error-msg
      {
       width:100%;
       color:red; 
       text-align:center;
       font-weight:bold;
      }
      
    
   
@media (min-width: 568px) {
      .name-item, .contact-item, .position-item, .two-item, .three-item {
      display: flex;
      flex-wrap: wrap;
      justify-content: space-between;
      }
      .name-item input {
      width: 100%;
      } 
      
      .two-item input {
      width: calc(100% - 12px);
      } 
      
      .three-item input {
      width: calc(100% - 12px);
      }                            

      .two-item .item {
      width: calc(50% - 8px);
    /*margin:0; */
      }     
      
      .three-item .item {
      width: calc(33% - 8px);
      }             
      .position-item select {
      width: 100%;
      }
      
.customCheck {
  display: block;
  position: relative;
  padding-left: 35px;
  margin-bottom: 12px;
  cursor: pointer;
//font-size: 22px;
  -webkit-user-select: none;
  -moz-user-select: none;
  -ms-user-select: none;
  user-select: none;
}

/* Custom Checkbox --------------------------------------------------------*/

/* Hide the browser's default checkbox */
.customCheck input {
  position: absolute;
  opacity: 0;
  cursor: pointer;
  height: 0;
  width: 0;
}

/* Create a custom checkbox */
.checkmark {
  position: absolute;
  top: 0;
  left: 0;
  height: 20px;
  width: 20px;
  border: 2px solid #ccc;
/* background-color: #eee; */
}

.checkdisabled {
 background-color: #eee;
}

/* On mouse-over, add a grey background color */
.customCheck:hover input:enabled ~ .checkmark {
/*  background-color: #ccc;*/
  border: 1px solid transparent;
  box-shadow: 0 0 6px 0 #1c87c9;
}

/* When the checkbox is checked, add a blue background */
.customCheck input:checked ~ .checkmark {
/*  background-color: #2196F3;*/
	border: 2px solid #1c87c9;
}

/* Create the checkmark/indicator (hidden when not checked) */
.checkmark:after {
  content: "";
  position: absolute;
  display: none;
}

/* Show the checkmark when checked */
.customCheck input:checked ~ .checkmark:after {
  display: block;
}

/* Style the checkmark/indicator */
.customCheck .checkmark:after {
  left: 6px;
  top: 2px;
  width: 5px;
  height: 10px;
  border: solid #1c87c9;
  border-width: 0 3px 3px 0;
  -webkit-transform: rotate(45deg);
  -ms-transform: rotate(45deg);
  transform: rotate(45deg);
}      
            
}    

@media (max-width: 500px) {
.cfgbox {
      width: 360px; 
      }
 .btn-block button {
      width: 90px;      
}