@charset "utf-8";
/* CSS Document */
@import url(https://fonts.googleapis.com/css?family=Roboto:900,400,700,500&subset=latin,greek,cyrillic-ext,latin-ext,cyrillic);
*{ margin:0; padding:0;}
.clear{ clear:both;}
ul, ol{ list-style:none;}
a, img{ text-decoration:none; border:none; outline:none;}

body{ background:url(../images/bg.jpg) no-repeat top center; background-size:cover; height:100vah;}
.wrapper{ height:auto; width:906px; padding:70px 0;}
.wrapper > .logo{ height:auto; width:100%; margin-bottom:40px;}
.wrapper > h1{ text-align:center; font:500 36px 'Roboto', sans-serif; color:#fff;}
.wrapper > h2{ text-align:center; font:500 20px 'Roboto', sans-serif; color:#fff; margin-top:15px;}

.role{ height:auto; width:100%; margin:70px 0;}
.role > li{ height:auto; width:300px; background:#000; float:left; margin:1px;}
.role > li > a{ display:block; padding:25px;}
.role > li > a > span{ display:block;}
.role > li > a > span > svg{ fill:#fff;}
.role > li > a > b{ display:block; text-align:center; font:700 14px 'Roboto', sans-serif; color:#fff; text-transform:uppercase; margin-top:15px;}


.wrapper > h3{ text-align:center; font:400 15px 'Roboto', sans-serif; color:#f0f0f0;}
.wrapper > h4{ text-align:center; font:400 24px 'Roboto', sans-serif; color:#fff; margin-top:10px;}
.wrapper > h4 > a{ color:#fff;}
.wrapper > h4 > a:hover{ color:#fff; text-decoration:underline;}

.super_user{ background:#11a3ff !important;}
.management{ background:#e39229 !important;}
.teacher{ background:#3fa23a !important;}
.principal{ background:#645959 !important;}
.incharge{ background:#ff5555 !important;}
.reception{ background:#da39a7 !important;}
.finance{ background:#3170d8 !important;}
.data_entry{ background:#7d4ed4 !important;}
.school_admin{ background:#c7442a !important;}


.super_user:hover{ background:#0c90e3 !important;}
.management:hover{ background:#bf720e !important;}
.teacher:hover{ background:#12860d !important;}
.principal:hover{ background:#504343 !important;}
.incharge:hover{ background:#c34242 !important;}
.reception:hover{ background:#ad2883 !important;}
.finance:hover{ background:#2155ab !important;}
.data_entry:hover{ background:#59349d !important;}
.school_admin:hover{ background:#9b311c !important;}


.login_wrapper{ height:410px; width:350px; background:#fff; top:0; left:0; bottom:0; right:0;  margin:auto;  position:absolute; padding:40px 50px; border-radius:2px;}
.login_wrapper > .logo{ height:auto; width:100%;}
.login_wrapper > .login{ height:auto; width:100%; margin-top:10px;}
.login_wrapper > .login > li{ height:auto; width:100%; margin-top:10px;}
.login_wrapper > .login > li > input[type=text], input[type=password]{ padding:10px 0; display:block; height:auto; width:100%; border:none; border-bottom:1px solid #d0d0d0; font:400 14px 'Roboto', sans-serif; color:#333; text-align:left; background:#fff; box-shadow:none; appearance:none; -moz-appearance:none; -webkit-appearance:none; -ms-appearance:none;}
.login_wrapper > .login > li > input[type=text]:hover, input[type=password]:hover{ border-bottom:1px solid #555;}
.login_wrapper > .login > li > select{ padding:10px 0; display:block; height:auto; width:100%; border:none; border-bottom:1px solid #d0d0d0; font:400 14px 'Roboto', sans-serif; color:#333; text-align:left; background:#fff; box-shadow:none; appearance:none; -moz-appearance:none; -webkit-appearance:none; -ms-appearance:none; float:left;}
.login_wrapper > .login > li > span{ position:absolute; margin-top:16px; margin-left:-20px; font-size:24px; 
color:#aaa;}
.login_wrapper > .login > li > select:hover{ border-bottom:1px solid #555;}
.login_wrapper > .login > li > select option{ padding:2px;}
.login_wrapper > .login > li > input[type=submit]{ height:auto; width:100%; display:block; text-align:center; border-radius:1px; font:700 14px/48px 'Roboto', sans-serif; color:#fff; background:#33BB18; text-transform:uppercase; border:none; box-shadow: 0 4px 10px rgba(0, 0, 0, .2); cursor:pointer; }
.login_wrapper > .login > li > input[type=submit]:hover{ box-shadow:0 6px 16px rgba(0, 0, 0, .3); 
background:#399414;}