@charset "UTF-8";
/**
Designed by tcore.my
Copyright 2017
**/
h1,h2,h3,h4,h5,dl,dt,dd,figure,.jumbotron{ padding: 0; margin: 0; }
.dropdown-toggle::after{ display: none; }

::selection{ color: #FFF; background-color: #10121a; }
::-moz-selection{ color: #FFF; background-color: #10121a; }
::-webkit-selection{ color: #FFF; background-color: #10121a; }

/* 
Using Bootstrap 4
custom bootstrap

primary - #9266B7 #A17FC0
danger - #F6422C #ED5E61
warning - #FCC30E #FECD52
success - #2BC372 #6CDD9D
info - #1045EB #1C99F8
secondary - #B0C3DA #DBCFE6
*/

/*
common style
*/
#ea_form { padding-bottom: 3rem; }
#staff, #salary, #annual_leave { padding-bottom: 7rem; }
#salary-detail, #ot-detail, #submit-btn, #al_sect, #mc_sect { padding-bottom: 7rem; }
picture.vector{ width: 100%; height: 100%; position: fixed; top: 0; left: 0; z-index: -1; background: url('../img/bg.svg') no-repeat bottom right; }
.layer-grey{ width: 100%; height: 100%; background-color: #f5f6f8; position: absolute; top: 0; left: 0; z-index: -1; }
.password-hide-show{ position: absolute; top: 0; right: 0; z-index: 1; }
.datepickers-container{ z-index: 9999; }

header{ box-shadow: 0 0.125rem 0.625rem rgba(90,97,105,.12); }
header .webtop{ border-bottom: 1px solid #e1e5eb; }
header .webtop dl > dd:first-child a{ display: inline-block; }
header .webtop dl > dd .navbar{ padding: 0; }
header .webtop dl > dd .navbar-nav > li{ padding: .45rem .5rem; }
header .webtop dl > dd .navbar-nav > li:last-child{ padding: .45rem 0 .45rem 1rem; }
header .webtop dl > dd .navbar-nav > li .fa-layers-counter{ font-size: 0.9rem; }

header menu{ margin: 0; padding: 0 !important; border-bottom: 1px solid #e1e5eb; }
header menu .navbar-nav > li > .nav-link{ color: #10121a; font-weight: 500; padding: .5rem 1.07rem !important; }
header menu .navbar-nav > li > .nav-link:hover,header menu .navbar-nav > li.show > .nav-link,header menu .navbar-nav > li > .nav-link:hover i,header menu .navbar-nav > li.show > .nav-link i{ color: #FFF; background: #10121a; }
header menu .navbar-nav > li > .nav-link i{ color: #cacedb; }
header menu .navbar-nav > li > .active{ color: #FFF; background: #10121a; }
header menu .dropdown-menu a{ font-weight: 500; border-left: 5px solid #DBCFE6; transition: all 0.1s ease-in-out; -moz-transition: all 0.1s ease-in-out; -webkit-transition: all 0.1s ease-in-out; -ms-transition: all 0.1s ease-in-out; -o-transition: all 0.1s ease-in-out; }
header menu .dropdown-menu a:hover,header menu .dropdown-menu a:hover:active{ color: #10121a; border-left-color: #10121a; background-color: #e9e9e9; }

/* input block key-in */
input[data-readonly] { pointer-events: none; }

footer{ font-size: .8rem; padding: .5rem 0; }
footer,#member .memberForm,.feedback,.page-header .btn-group{ box-shadow: 0 2px 0 rgba(90,97,105,.11), 0 4px 8px rgba(90,97,105,.12), 0 10px 10px rgba(90,97,105,.06), 0 7px 70px rgba(90,97,105,.1); }

.page-header{ padding: 1.3rem 0 2rem; overflow: hidden; }
.page-header h1{ font-size: 1.8rem; font-weight: 700; }
.page-header h1 span{ color: #818ea3; font-size: 1rem; font-weight: 500; padding-bottom: .3rem; letter-spacing: .125rem; display: block; }

.alert > p{ margin-bottom: 0; }

.swal-text { text-align: center }

/* form */
.input-group > .input-group-prepend{ position: absolute; top: 0; bottom: 0; z-index: 4; }
.input-group > .input-group-prepend > .input-group-text{ color: #abb6bf; }
.input-group.position-relative .form-control{ padding-left: 2.3rem; }

/* Chrome, Safari, Edge, Opera */
input::-webkit-outer-spin-button,
input::-webkit-inner-spin-button {
  -webkit-appearance: none;
  margin: 0;
}

/* Firefox */
input[type=number] {
  -moz-appearance: textfield;
}

/* login */
#login dl{ margin: 8% 0px; }
#login dl > dd:first-child{ min-height: 450px; background: url('../../assets/img/bg_login.png') no-repeat center center; }
#login .form-control{ padding: 0.6rem 0.75rem; background-color: rgba(229,229,229,.4); border: 1px solid rgba(229,229,229,.8); }
#login .form-control:focus{ background-color: #FFF; border-color: #CC3838; box-shadow: 0 0 0 0.2rem rgba(146, 102, 183, 0.25); }

/* Month Button */
.btn-month { border-radius: 1.3rem; padding-left: 1.8rem; padding-right: 1.8rem; padding-top: 0.4rem; padding-bottom: 0.4rem;}

/*Default textbox size */
.stextbox { width: 80px; } 
input:read-only { background-color: #e1f2ff; }
.full_textbox { width: 100%; background-color: #f3f3f3; font-weight:500; } 
.bg_textbox { background-color: #f3f3f3; font-weight:500; }