@import url('https://fonts.googleapis.com/css2?family=Roboto:wght@400;500;700&display=swap');

html, body{height:100%;}
body{font-family: 'Roboto', sans-serif;}

body{margin:0; padding:0;display:flex; flex-direction: column;}

*, html{box-sizing:border-box;}
*,*:focus,*:hover{
    outline:none;
}



.header{
background:#f1f2fa;
    padding:110px 0 40px;
    display:flex;
}
.header a.btn{float:right;margin-top:-5px;}

.content {
  flex: 1 0 auto;
}

a{transition: all 0.5s ease;cursor:pointer;}
a.btn, input[type=button], button{transition: all 0.5s ease;-webkit-appearance: none; text-decoration: none;}


h1{font-size:36px;display:inline-block;margin:0;}
h2{font-size:24px; margin-bottom:0;font-weight:500;}
h3{font-size:21px; font-weight:500;margin-top:25px; margin-bottom:6px}
h4{font-size:18px; font-weight:500;margin:0;}



.container{max-width:1200px; width:95%; margin:0 auto;}
.row{display:flex;flex-direction:column;flex-wrap: wrap}
@media (min-width: 600px) {.row{flex-direction:row}}


.col-1,
.col-2,
.col-3,
.col-4,
.col-5,
.col-6,
.col-7,
.col-8,
.col-9,
.col-10,
.col-11,
.col-12{width:100%;}

@media (min-width: 768px) {
 
.col-1{width:8.3333%;}
.col-2{width:16.6666%;}
.col-3{width:25%;}
.col-4{width:33.3333%;}
.col-5{width:41.6666%;}
.col-6{width:50%;}
.col-7{width:58.3333%;}
.col-8{width:66.6666%;}
.col-9{width:75%;}
.col-10{width:83.3333%;}
.col-11{width:91.6666%;}
.col-12{width:100%;}
}

.input-group{position:relative; display:inline-block;vertical-align:top;margin:5px 0;text-align:left;}



input[type="text"], input[type="email"], input[type="password"], textarea, select{border:0;font-size:16px;width:100%;color:#000; border-radius:3px; height:48px; padding:0 20px;font-family: 'Roboto', sans-serif;}
textarea{padding:20px; height:auto;}
select.small{width:30%;}

.remind{color:#87899d; display: inline-block;vertical-align: middle; margin:15px 0;}
.remind:hover{color:#4d8be2}

@media(max-width:900px){select.small{width:50%;}}
@media(max-width:600px){select.small{width:100%;}}


.helper label, .checks label {
  height: 58px;
  padding:20px;
  position: absolute;
  top: 0;
  left: 0;
  display: block;
  width: 100%;
  margin-bottom: 0; /* Override default `<label>` margin */
  color: #495057;
  pointer-events: none;
  cursor: text; /* Match the input under the label */
  transition: all .1s ease-in-out;
}
.helper input::-webkit-input-placeholder, .helper textarea::-webkit-input-placeholder{
  color: transparent;
}
.helper input:-ms-input-placeholder, .helper textarea:-ms-input-placeholder {
  color: transparent;
}
.helper input::-ms-input-placeholder,.helper textarea::-ms-input-placeholder {
  color: transparent;
}
.helper input::-moz-placeholder,.helper textarea::-moz-placeholder {
  color: transparent;
}
.helper input::placeholder,.helper textarea::placeholder {
  color: transparent;
}
.helper input:not(:placeholder-shown) {
  padding-top: 1.25rem;
  padding-bottom: .25rem;
}
.helper textarea:not(:placeholder-shown) {
  padding-top: 1.75rem;
  padding-bottom: .75rem;
}
.helper input:not(:placeholder-shown) ~ label,.helper textarea:not(:placeholder-shown) ~ label  {
  padding-top: .70rem;
  padding-bottom: .45rem;
  font-size: 12px;
  color: #528bff;
}

.nohelp label{position: relative; display:inline-block; padding:15px 0;width:auto;width:242px;}


a.btn, input[type=button], button{border-radius:3px; margin:5px 0; font-weight:700; font-size:19px; border:0; height:46px; position:relative; line-height:46px; text-align:center; padding:0 20px; background:#000; color:#fff; cursor:pointer;display:inline-block;position:relative;background-color:#f1f2fa; color:#87899d}
a.btn.pos, input[type=button].pos, button.pos{background-color:#528BFF; color:#fff;}




.pageform h2 {
  padding-bottom: 10px;
  margin-bottom: 16px;
  border-bottom: 3px solid #528bff;
  position: relative;
}



.pageform{padding:30px 0;text-align:left;}
.pageform input, .pageform select, .pageform textarea{margin:0 0 10px;    border: 1px solid #e2e7ef;
    background: #fff;}
.pageform .helper label{padding:14px 20px;}
.pageform .helper input[type=text]:not(:placeholder-shown) ~ label, .pageform .helper input[type=email]:not(:placeholder-shown) ~ label {
	padding-top: .50rem;}
.pageform input[type=checkbox]{margin:0 10px 3px 0;vertical-align:middle;}
.pageform .note{font-size:12px;display:block; padding-bottom:10px;}
.pageform p{margin:0 0 15px;}
.pageform .section{padding:20px 0 30px; }


.pageform .warning{font-size:18px; color:#ec5252; padding:5px 0 10px;}

.pageform .info{padding:10px 0 20px;line-height:1.5;}


.checks input[type="checkbox"], .checks input[type="radio"]{
  -webkit-appearance: none;
	  background: white;
	border:1px solid #d3d5e4;
	border-radius:1px;
  width: 20px;
    height: 20px;
	   padding: 0;
	    margin-right:5px;
		margin-left:0;
		   vertical-align: middle;
	display: inline-block;
	position: relative;
}

.checks input[type="checkbox"]:active, .checks input[type="checkbox"]:checked:active {
	box-shadow: 0 1px 2px rgba(0,0,0,0.05), inset 0px 1px 3px rgba(0,0,0,0.1);
}

.checks input[type="checkbox"]:checked, .checks input[type="radio"]:checked {

	background: url(../img/tick-small.png) no-repeat center center #528bff; border-color:#528bff;
	
}


.checks{display:inline-block;width:calc(100% - 260px); vertical-align: top; }
.checks .check{ position: relative;width:105px;
  display:inline-block;
margin:0 8px 8px 0;
 text-align:center; }
.checks .check.wide{width:200px;}

@media(max-width:600px){.checks, .checks .check.wide{display:block; width:100%}}

.checks input[type="checkbox"], .checks input[type="radio"]{margin:0;padding:0;width:100%; height:40px;cursor: pointer;}
.checks input[type="checkbox"]:not(:checked) + label, .checks input[type="checkbox"]:checked + label, .checks input[type="radio"]:not(:checked) + label, .checks input[type="radio"]:checked + label  {
 position:absolute; display:block; width:100%;  font-size:16px;  cursor: pointer;
    height:40px; line-height:30px;   border-radius:3px;padding:5px 10px;
}

.checks input[type="checkbox"]:not(:checked) + label, .checks input[type="radio"]:not(:checked) + label{
 color:#6A7A92; background:#f1f2fa;
}

.checks input[type="checkbox"]:checked + label, .checks input[type="radio"]:checked + label {
  color:#fff; 
}


.onoffswitch {

	
    margin-top:15px;
	margin-left: 0px;
	position: relative;
	width: 54px;
	height:22px;
	z-index:1000;
    }
    .onoffswitch-checkbox {
	display: none;
	font-size: 13px;
    }
    label.onoffswitch-label {
    display: block; overflow: hidden; cursor: pointer; 
    font-size: 12px; padding:0!important; 
     height:22px;border-radius: 15px; float:none; position:static; width:54px;
    }
	
	
    .onoffswitch-inner {
    width: 200%; margin-left:-100%;
    -moz-transition: margin 0.3s ease-in 0s; -webkit-transition: margin 0.3s ease-in 0s;
    -o-transition: margin 0.3s ease-in 0s; transition: margin 0.3s ease-in 0s;
    }
    .onoffswitch-inner:before, .onoffswitch-inner:after {
    float: left; width: 50%; height: 22px; padding: 0; line-height: 15px;
    font-size: 12px; color: white; font-weight: bold;
    -moz-box-sizing: border-box; -webkit-box-sizing: border-box; box-sizing: border-box;
    }
    .onoffswitch-inner:before {
    content: "ON";
    padding-left: 8px;
    background: #538bff;  
        text-align:left;
		font-size:10px;
		line-height:22px;
        color:#fff;
    }
    .onoffswitch-inner:after {
    content: "";
    padding-right: 10px;
    background: #f1f2fa;  
 color: #999999;
    text-align: right;
	
    }
    .onoffswitch-switch {
    width: 16px; height:16px; margin: 3px;
    background: #fff;  
     border-radius: 9px;

    position: absolute; top: 0; bottom: 0; right: 30px;
    -moz-transition: all 0.3s ease-in 0s; -webkit-transition: all 0.3s ease-in 0s;
    -o-transition: all 0.3s ease-in 0s; transition: all 0.3s ease-in 0s;

  
    }
	.onoffswitch-switch:after{}
    .onoffswitch-checkbox:checked + .onoffswitch-label .onoffswitch-inner {
    margin-left: 0;
    }
    .onoffswitch-checkbox:checked + .onoffswitch-label .onoffswitch-switch {
    right: 1px;
    }

.btns .btn{margin-right:20px;}

.picker{position: relative}
input.pickedColor{padding-left:62px; width:90%}
.swatch{width:30px;height:30px;border:1px solid #ddd; position: absolute;top:8px;left:10px}
.marker{position: absolute; left:50px;top:14px}