@charset "utf-8";

/*template*/
*{margin:0; padding:0; font-family:'Ubuntu', sans-serif; font-size:14px; color:#444444; outline:none;}

/*login*/
.login{width:820px; height:419px; display:block; position:absolute; top:50%; left:50%; margin:-200px 0px 0px -410px; -webkit-box-shadow:0px -3px 26px -1px rgba(0,0,0,0.3); -moz-box-shadow:0px -3px 26px -1px rgba(0,0,0,0.3); box-shadow:0px -3px 26px -1px rgba(0,0,0,0.3); background:#fff url('../images/stl-bg.jpg') no-repeat top right;}

/*left*/
.login .left{width:225px; height:349px; display:block; float:left; padding:35px; background:rgba(27,50,94,0.2);}
.login .left p{padding:0px 0px; font-size:14px; margin:167px 0px 0px 0px; text-align:center; font-weight:normal; color:#202f5a;}
.login .left p b{font-weight:bold; color:#202f5a;}
.login .left .button-green{width:195px; height:31px; display:block; border-radius:8px; line-height:31px; text-align:center; text-decoration:none; margin:15px auto 0px auto; transition:.2s; font-size:13px; font-weight:normal; color:#fff; border-bottom:2px solid #00385d; background:#005187;}
/*.login .left .button-green:hover{transition:.2s; border-bottom:2px solid #005187; background:#00385d;}*/

/*right*/
.login .right{width:455px; height:349px; display:block; float:right; padding:35px; position:relative;}
.login .right h1{width:224px; height:70px; display:block; overflow:hidden; margin:0px; float:right;}
.login .right h1 a{width:224px; height:70px; display:block; overflow:hidden; text-align:left; text-indent:-4000px; background:url('../images/logo-stl.svg') no-repeat top center / 224px auto;}
.login .right p{padding:0px 0px; font-size:14px; margin:0px 0px 35px 0px; text-align:left; font-weight:normal; color:#202f5a;}
.login .right p a{color:#202f5a;}
.login .right p b{font-weight:bold; color:#202f5a;}
.login .right .button-grey{width:195px; height:31px; display:block; border-radius:8px; line-height:31px; text-align:center; text-decoration:none; float:right; margin:330px 30px 0px 0px; transition:.2s; font-size:12px; font-weight:normal; color:#fff; border-bottom:4px solid #006f9e; background:#009fe3;}
/*.login .right .button-grey:hover{transition:.2s; border-bottom:4px solid #009fe3; background:#006f9e;}*/

/*form*/
.login form{width:455px; height:auto; display:block; font-weight:bold; text-align:left; padding:45px 0px 0px 0px;}
.login form.form-password{width:455px; height:auto; display:block; font-weight:bold; text-align:left; padding:4px 0px 0px 0px;}
.login form.form-sms{width:455px; height:auto; display:block; font-weight:bold; text-align:left; padding:74px 0px 0px 0px;}
.login form.form-mobile{width:455px; height:auto; display:block; font-weight:bold; text-align:left; padding:5px 0px 0px 0px;}
.login form input{width:433px; height:33px; display:block; margin:0px 0px 35px 0px; border-radius:3px; padding:0px 10px; border:1px solid #86899c;}
.login form input[type="text"].input-red{ border:1px solid #ff0000; }

.login form div.label-full input[type="text"]{ width:280px; }
.login form div.label-full input[type="text"].input-red::before > div.label-full div.label-left select{ border:1px solid #ff0000; }
.login form div.label-full div.label-left select{ float:left; width:140px; height:35px; display:inline-block; line-height:33px; padding:0px 20px; border-radius:5px; border:1px solid #8c93aa; }
.login form div.label-full div.label-left select.input-red{ border:1px solid #ff0000; }


.login .right input[type="submit"]{width:200px; height:31px; display:block; cursor:pointer; border-radius:8px; line-height:29px; text-align:center; border:none; text-decoration:none; float:right; margin:0px 0px 0px 0px; transition:.2s; font-size:13px; font-weight:normal; color:#fff; border-bottom:2px solid #006f9e; background:#009fe3;}
/*.login .right input[type="submit"]:hover{transition:.2s; border-bottom:2px solid #009fe3; background:#006f9e;}*/
.login .right a.password{text-align:right; float:right; margin:0px 15px 0px 0px; color:#202f5a; font-size:12px; line-height:31px; text-decoration:none;}


.login form input::-webkit-input-placeholder {color:#9b98b1;}
.login form input:-moz-placeholder {color:#9b98b1;} 
.login form input::-moz-placeholder {color:#9b98b1;} 
.login form input:-ms-input-placeholder {color:#9b98b1}

/*login*/
.registration{width:820px; height:auto; display:block; margin:35px auto 50px auto; position:relative; -webkit-box-shadow:0px -3px 26px -1px rgba(0,0,0,0.3); -moz-box-shadow:0px -3px 26px -1px rgba(0,0,0,0.3); box-shadow:0px -3px 26px -1px rgba(0,0,0,0.3); background:#fff url('../images/registration.jpg') no-repeat bottom right;}

/*left*/
.registration .left{width:225px; height:auto; display:block; float:left; position:absolute; top:0; bottom:0; padding:35px; background:rgba(27,50,94,0.2);}
.registration .left p{padding:0px 0px; font-size:14px; margin:15px 0px 0px 0px; text-align:center; font-weight:normal; color:#202f5a;}
.registration .left p a{padding:0px 0px; font-size:14px; text-align:center; font-weight:normal; color:#202f5a;}
.registration .left p b{font-weight:bold; color:#202f5a;}
.registration .left .button-green{width:195px; height:31px; display:block; border-radius:8px; line-height:31px; text-align:center; text-decoration:none; margin:15px auto 0px auto; transition:.2s; font-size:13px; font-weight:normal; color:#fff; border-bottom:2px solid #00385d; background:#005187;}
.registration .left .button-green:hover{transition:.2s; border-bottom:2px solid #005187; background:#00385d;}

/*right*/
.registration .right{width:455px; height:auto; display:block; float:right; padding:35px;}
.registration .right h1{width:224px; height:70px; display:block; overflow:hidden; margin:0px;}
.registration .right h1 a{width:224px; height:70px; display:block; overflow:hidden; text-align:left; text-indent:-4000px; background:url('https://www.stlwerkt.nl/images/logo-stl.svg') no-repeat top center;}
.registration .right p{padding:0px 0px; font-size:14px; margin:0px 0px 35px 0px; text-align:left; font-weight:normal; color:#202f5a;}
.registration .right p a{color:#202f5a;}
.registration .right p b{font-weight:bold; color:#202f5a;}
.registration .right .button-grey{width:195px; height:31px; display:block; border-radius:8px; line-height:31px; text-align:center; text-decoration:none; float:right; margin:330px 30px 0px 0px; transition:.2s; font-size:12px; font-weight:normal; color:#fff; border-bottom:4px solid #006f9e; background:#009fe3;}
/*.registration .right .button-grey:hover{transition:.2s; border-bottom:4px solid #009fe3; background:#006f9e;}*/

/*form*/
.registration form{width:455px; height:auto; display:block; font-weight:bold; text-align:left; padding:70px 0px 0px 0px;}
.registration form input{width:433px; height:33px; display:block; margin:0px 0px 20px 0px; border-radius:3px; padding:0px 10px; border:1px solid #86899c;}
.registration form input.code-company{margin:0px;}
.registration form small{font-size:12px; font-weight:normal; color:#86899c; line-height:1.6em; margin:5px 0px 20px 0px; display:block;}
.registration form small *{font-size:12px; font-weight:normal; color:#86899c; line-height:1.6em;}
.registration .right form h2{line-height:35px; padding:0px 0px 0px 0px; font-size:14px; font-weight:normal; color:#005187;}
.registration .right form p{margin:0px !important; font-size:12px !important; font-weight:normal !important; color:#86899c !important;}
.registration .right form .placeholder{margin:0px 0px 20px 0px;}
.registration .right input[type="submit"]{width:195px; height:31px; display:block; cursor:pointer; border-radius:8px; line-height:29px; text-align:center; border:none; text-decoration:none; float:right; margin:0px 0px 0px 0px; transition:.2s; font-size:13px; font-weight:normal; color:#fff; border-bottom:2px solid #006f9e; background:#009fe3;}
.registration .right input[type="submit"]:hover{transition:.2s; border-bottom:2px solid #009fe3; background:#006f9e;}
.registration .right input[type="submit"].green,
.registration .right input[type="submit"].save{width:195px; height:31px; display:block; cursor:pointer; border-radius:8px; line-height:31px; text-align:center; text-decoration:none; margin:0px auto 0px auto; transition:.2s; font-size:13px; font-weight:normal; color:#fff; border-bottom:2px solid #00385d; background:#005187;}
.registration .right input[type="submit"].green:hover,
.registration .right input[type="submit"].save:hover{transition:.2s; border-bottom:2px solid #005187; background:#00385d;}
.registration .right a.password{text-align:right; float:right; margin:0px 15px 0px 0px; color:#202f5a; font-size:12px; line-height:31px; text-decoration:none;}
.registration .right input[type="submit"].save{float:right; margin:-35px 0px 0px 0px;}
.registration .right input[type="submit"].edit{float:left; margin:-35px 0px 0px 0px;}


.registration table{width:455px; height:auto; display:block; text-align:left; padding:70px 0px 0px 0px;}
.registration table tr td{font-size:14px; padding:5px 0px 5px 0px; text-align:left; font-weight:normal; color:#202f5a;}
.registration table tr td p{margin:0 !important;}
.registration table tr td h2{line-height:35px; padding:0px 0px 0px 0px; font-size:14px; font-weight:normal; color:#005187;}

/*radio*/
.registration form input[type="radio"]:not(:checked), [type="radio"]:checked{position: absolute; left:-9999px;}
.registration form input[type="radio"]:not(:checked) + label, [type="radio"]:checked + label{position:relative; padding:0px 25px; line-height:20px; cursor:pointer; font-size:12px; font-weight:normal; line-height:28px; color:#86899c;}
.registration form input[type="radio"]:not(:checked) + label:before,[type="radio"]:checked + label:before,[type="radio"]:not(:checked) + label:after,[type="radio"]:checked + label:after{content: ''; position:absolute;}
.registration form input[type="radio"]:not(:checked) + label:before, [type="radio"]:checked + label:before{left:0; top:0; width:15px; height:15px; background:#ffffff; overflow:hidden; border-radius:15px; transition:background-color .2s;}
.registration form input[type="radio"]:not(:checked) + label:after,[type="radio"]:checked + label:after {width:13px; height:13px; transition:all .2s; border-radius:50%; background:#ffffff; top:0px; left:0px; border:1px solid #cdd0d6;}
.registration form input[type="radio"]:checked + label:before {background:#cdd0d6;}
.registration form input[type="radio"]:checked + label:after {display:none;}

/*checkbox*/
.registration form input[type="checkbox"] {position:absolute; left:-9999px;}
.registration form input[type="checkbox"]:not(:checked) + label:before, [type="checkbox"]:checked + label:before, [type="checkbox"]:not(:checked) + label:after, [type="checkbox"]:checked + label:after{content:''; position:absolute;}
.registration form input[type="checkbox"] + label:before{top:2px; left:0; width:15px; height:15px; content: ''; cursor: pointer; display:inline-block; border-radius:4px; border:1px solid #8991a8; transition:background-color .2s; background:#ffffff;}
.registration form input[type="checkbox"] + label{padding-left:25px; line-height:20px; position:relative; float:left; font-size:12px; font-weight:normal; color:#86899c;}
.registration form input[type="checkbox"] + label span{font-size:12px; font-weight:normal; color:#86899c; line-height:17px; margin:0px 0px 15px 0px; display:inline-block;}
.registration form input[type="checkbox"] + label:last-child{margin:0px 0px 20px 0px;}
.registration form input[type="checkbox"] + label:after {-ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=0)"; filter:alpha(opacity=0); opacity:0; content:''; position:absolute; width:6px; height:3px; background:transparent; top:6px; left:4px; border:3px solid #8991a8; border-top:none; transition:opacity .1s; border-right:none; -webkit-transform:rotate(-45deg); -moz-transform:rotate(-45deg); -o-transform:rotate(-45deg); -ms-transform:rotate(-45deg); transform:rotate(-45deg);}
.registration form input[type="checkbox"] + label:hover::after {-ms-filter:"progid:DXImageTransform.Microsoft.Alpha(Opacity=30)"; filter: alpha(opacity=30); opacity:0.9;}
.registration form input[type="checkbox"]:checked + label:before {background:#8991a8;}
.registration form input[type="checkbox"]:checked + label:after {-ms-filter:"progid:DXImageTransform.Microsoft.Alpha(Opacity=100)"; filter:alpha(opacity=100); opacity:0.9; border-color:#fff;}

small.error{font-size:12px; position:absolute; top:135px; left:35px; right:35px; color:#202f5a;}
small.error a{font-size:12px; color:#202f5a;}