@import url(//fonts.googleapis.com/css?family=Roboto:100,300,400,500,600,700);
body{font-family:'Roboto';font-size:16px;color:#333333; background-color:#f9f9f9;-webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;}
a{text-decoration: none; color:#333333}
.appcontainer{max-width:100%;box-sizing: border-box;-webkit-box-sizing: border-box; min-height:100vh; background-color:#fcfcfc;}
.pagecontainer{width:calc(100% - 50px); background-color:#f9f9f9;box-sizing: border-box;-webkit-box-sizing: border-box; position:relative; top:55px; left:50px; padding:0 20px 50px 20px; z-index:1}
.container{font-size:13px;color:#333333; width:100%; padding:0; font-family:'Roboto'; max-width:400px; margin:0 auto;}

/********* Label Outside of Input filed *********/
input.outside,input[type=text].outside{color:#555;width:100%;font-size:15px;height:52px;line-height:normal;border:#ddd solid 
1px;border-radius:0;box-sizing:border-box;-webkit-box-sizing:border-box;-moz-box-sizing:border-box;margin-bottom:-1px;padding:10px 10px 10px 40px;-webkit-appearance:none;-moz-appearance:none;position:relative;z-index:1}
input:focus,select:focus{outline:0!important;color:#555!important;border-color:#9e9e9e;z-index:2}
input:focus~.floating-label-outside input:not(:focus):valid~.floating-label-outside{top:12px;left:40px;font-size:10px;opacity:1;font-weight:400}
input:focus~.floating-label-outside,input:valid~.floating-label-outside{top:-7px;opacity:1;font-size:10px;color:#727272;background:#fff;padding:0px 5px;}
input:focus~.floating-label-outside,input:not(:focus):valid~.floating-label-outside{left:35px}
.floating-label-outside{position:absolute;pointer-events:none;left:40px;top:16px;transition:.2s ease all;color:#777;font-weight:400;font-size:14px;letter-spacing:.5px;z-index:3;text-transform:uppercase}
.input-icon-outside{position:absolute;top:18px;left:15px;z-index:3;color:#727272;}

.form-group {position: relative;}
.form-group [data-toggle="floatLabel"] {height: 44px;padding-top: 16px;}
.form-group [data-toggle="floatLabel"] + label {font-size: 12px;left: 12px;opacity: 1;position: absolute;top: 3px;transition: all 0.3s ease-in-out;}
.form-group [data-toggle="floatLabel"]:required + label {color: rgb(255, 0, 0);}

/* Custom checkbox */
.custom-checkbox {position: relative; margin-right:10px;}
.custom-checkbox input[type="checkbox"] {opacity: 0;position: absolute;margin: 5px 0 0 3px;z-index: 9;}
.custom-checkbox label:before{width: 18px;height: 18px;}
.custom-checkbox label:before {content: '';margin-right: 10px;display: inline-block;vertical-align: text-top;background: white;border: 1px solid #bbb;border-radius: 2px;
box-sizing: border-box;z-index: 2;}
.custom-checkbox input[type="checkbox"]:checked + label:after {content: '';position: absolute;left: 6px;top: 3px;width: 6px;height: 11px;border: solid #000;border-width: 0 3px 3px 0;transform: inherit;z-index: 3;transform: rotateZ(45deg);}
.custom-checkbox input[type="checkbox"]:checked + label:before {border-color: #03A9F4;background: #03A9F4;}
.custom-checkbox input[type="checkbox"]:checked + label:after {border-color: #fff;}
.custom-checkbox input[type="checkbox"]:disabled + label:before {color: #b8b8b8;cursor: auto;box-shadow: none;background: #ddd;}