@import url('https://fonts.googleapis.com/css?family=Muli');
@import url('https://fonts.googleapis.com/css?family=Quicksand');
@import url('https://fonts.googleapis.com/css?family=Lato');
@import url('https://fonts.googleapis.com/css?family=Sofia');
@import url('https://fonts.googleapis.com/css?family=ABeeZee');
@import url('https://fonts.googleapis.com/css?family=Abel');
@import url('https://fonts.googleapis.com/css?family=Aclonica');
@import url('https://fonts.googleapis.com/css?family=Actor');
@import url('https://fonts.googleapis.com/css?family=Akronim');
@import url('https://fonts.googleapis.com/css?family=Boogaloo');
@import url('https://fonts.googleapis.com/css?family=Cairo');
@import url('https://fonts.googleapis.com/css?family=Calligraffitti');
@import url('https://fonts.googleapis.com/css?family=Coming Soon');
@import url('https://fonts.googleapis.com/css?family=Cookie');
@import url('https://fonts.googleapis.com/css?family=Electrolize');
@import url('https://fonts.googleapis.com/css?family=Engagement');
@import url('https://fonts.googleapis.com/css?family=Girassol');
@import url('https://fonts.googleapis.com/css?family=Gupter');
@import url('https://fonts.googleapis.com/css?family=Handlee');
@import url('https://fonts.googleapis.com/css?family=Hanuman');
@import url('https://fonts.googleapis.com/css?family=Herr Von Muellerhoff');
@import url('https://fonts.googleapis.com/css?family=Homemade Apple');
@import url('https://fonts.googleapis.com/css?family=Irish Grover');
@import url('https://fonts.googleapis.com/css?family=Italiana');
@import url('https://fonts.googleapis.com/css?family=Lobster');
@import url('https://fonts.googleapis.com/css?family=Lobster Two');
@import url('https://fonts.googleapis.com/css?family=Meera Inimai');

a { color: #000000; }

body {
  color: #000000;
  margin: 0;
  padding: 0;
  font-family: 'Lato', sans-serif;
}

.mang_setting, .mang_back_profil
{
    position: absolute;
    padding: 20px;
    font-size: 20px;
    right: 10px;
    color:#fff;
}

.contact_img_login {
    width: 55px;
}

/*#empl_login, #sign_in, #verify_emp_btn, #sign_close, .btn_logout
{
  background: #00FF00;
  background: -moz-linear-gradient(top, #00FF00 0%, #00FF00 25%, #21FF8C 100%);
  background: -webkit-linear-gradient(top, #00FF00 0%, #00FF00 25%, #21FF8C 100%);
  background: linear-gradient(to bottom, #00FF00 0%, #00FF00 25%, #21FF8C 100%);
}*/

#emp_code, #emp_username, #emp_password, #emp_un, #emp_pwd, #emp_cpassword
{
  border: none;
  border-bottom: solid #000;
  background-color: rgb(232, 240, 254) !important;
}

#sign_in, #sign_close, #verify_emp_btn, #empl_login, .btn_web_style
{
  width: 50%;
  font-size: 20px;
  letter-spacing: 1px;
  font-weight: 600;
  background: #00FF00;
  background: -moz-linear-gradient(top, #00FF00 0%, #00FF00 25%, #21FF8C 100%);
  background: -webkit-linear-gradient(top, #00FF00 0%, #00FF00 25%, #21FF8C 100%);
  background: linear-gradient(to bottom, #00FF00 0%, #00FF00 25%, #21FF8C 100%);
}
.btn-success { background-color: #28a745;border-color: #28a745; } 
.nav-tabs.nav-justified>.active>a, .nav-tabs.nav-justified>.active>a:focus, .nav-tabs.nav-justified>.active>a:hover { border: none; }
.banner_img
{
  width: 100%;
  height: 320px;
  position: absolute;
  z-index: -1;
}
.emp_info { margin-top: 25%;}
.index_info { margin-top: 40%;}
.login_info { margin-top: 25%; }
.profile_info { margin-top: 30%; }
.profile-image-container img
{
  border-radius: 50%;
}

#login .container #login-row #login-column #login-box {
  margin-top: 25px;
  min-height: 250px;
}

#login .container #login-row #login-column #profile-box {

  margin-top: 25px;

  max-width: 1200px;

  height: 100%;

}

#login .container #login-row #login-column #create-login-box

{

  margin-top: 25px;

  max-width: 600px;

  height: 350px;

}

#login .container #login-row #login-column #login-box {

  padding: 20px;

}

#login .container #login-row #login-column #login-box #login-form #register-link {

  margin-top: -85px;

}

.err

{

  color: red !important;

}

.round-custom

{

  border: 2px solid;

  border-radius: 40px;

}

.m-0 {

    margin: 0 !important

}



.mt-0,

.my-0 {

    margin-top: 0 !important

}



.mr-0,

.mx-0 {

    margin-right: 0 !important

}



.mb-0,

.my-0 {

    margin-bottom: 0 !important

}



.ml-0,

.mx-0 {

    margin-left: 0 !important

}



.m-1 {

    margin: .625rem !important

}



.mt-1,

.my-1 {

    margin-top: .625rem !important

}



.mr-1,

.mx-1 {

    margin-right: .625rem !important

}



.mb-1,

.my-1 {

    margin-bottom: .625rem !important

}



.ml-1,

.mx-1 {

    margin-left: .625rem !important

}



.m-2 {

    margin: 1.25rem !important

}



.mt-2,

.my-2 {

    margin-top: 1.25rem !important

}



.mr-2,

.mx-2 {

    margin-right: 1.25rem !important

}



.mb-2,

.my-2 {

    margin-bottom: 2.25rem !important

}



.ml-2,

.mx-2 {

    margin-left: 1.25rem !important

}



.m-3 {

    margin: 1.875rem !important

}



.mt-3,

.my-3 {

    margin-top: 1.875rem !important

}



.mr-3,

.mx-3 {

    margin-right: 1.875rem !important

}



.mb-3,

.my-3 {

    margin-bottom: 1.875rem !important

}



.ml-3,

.mx-3 {

    margin-left: 1.875rem !important

}



.m-4 {

    margin: 2.5rem !important

}



.mt-4,

.my-4 {

    margin-top: 2.5rem !important

}



.mr-4,

.mx-4 {

    margin-right: 2.5rem !important

}



.mb-4,

.my-4 {

    margin-bottom: 2.5rem !important

}



.ml-4,

.mx-4 {

    margin-left: 2.5rem !important

}



.m-5 {

    margin: 3.125rem !important

}



.mt-5,

.my-5 {

    margin-top: 3.125rem !important

}



.mr-5,

.mx-5 {

    margin-right: 3.125rem !important

}



.mb-5,

.my-5 {

    margin-bottom: 3.125rem !important

}



.ml-5,

.mx-5 {

    margin-left: 3.125rem !important

}



.m-6 {

    margin: 3.75rem !important

}



.mt-6,

.my-6 {

    margin-top: 3.75rem !important

}



.mr-6,

.mx-6 {

    margin-right: 3.75rem !important

}



.mb-6,

.my-6 {

    margin-bottom: 3.75rem !important

}



.ml-6,

.mx-6 {

    margin-left: 3.75rem !important

}



.m-7 {

    margin: 4.375rem !important

}



.mt-7,

.my-7 {

    margin-top: 4.375rem !important

}



.mr-7,

.mx-7 {

    margin-right: 4.375rem !important

}



.mb-7,

.my-7 {

    margin-bottom: 4.375rem !important

}



.ml-7,

.mx-7 {

    margin-left: 4.375rem !important

}



.m-8 {

    margin: 5rem !important

}



.mt-8,

.my-8 {

    margin-top: 5rem !important

}



.mr-8,

.mx-8 {

    margin-right: 5rem !important

}



.mb-8,

.my-8 {

    margin-bottom: 5rem !important

}



.ml-8,

.mx-8 {

    margin-left: 5rem !important

}



.m-9 {

    margin: 5.625rem !important

}



.mt-9,

.my-9 {

    margin-top: 5.625rem !important

}



.mr-9,

.mx-9 {

    margin-right: 5.625rem !important

}



.mb-9,

.my-9 {

    margin-bottom: 5.625rem !important

}



.ml-9,

.mx-9 {

    margin-left: 5.625rem !important

}



.m-10 {

    margin: 6.25rem !important

}



.mt-10,

.my-10 {

    margin-top: 6.25rem !important

}



.mr-10,

.mx-10 {

    margin-right: 6.25rem !important

}



.mb-10,

.my-10 {

    margin-bottom: 6.25rem !important

}



.ml-10,

.mx-10 {

    margin-left: 6.25rem !important

}



.p-0 {

    padding: 0 !important

}



.pt-0,

.py-0 {

    padding-top: 0 !important

}



.pr-0,

.px-0 {

    padding-right: 0 !important

}



.pb-0,

.py-0 {

    padding-bottom: 0 !important

}



.pl-0,

.px-0 {

    padding-left: 0 !important

}



.p-1 {

    padding: .625rem !important

}



.pt-1,

.py-1 {

    padding-top: .625rem !important

}



.pr-1,

.px-1 {

    padding-right: .625rem !important

}



.pb-1,

.py-1 {

    padding-bottom: .625rem !important

}



.pl-1,

.px-1 {

    padding-left: .625rem !important

}



.p-2 {

    padding: 1.25rem !important

}



.pt-2,

.py-2 {

    padding-top: 1.25rem !important

}



.pr-2,

.px-2 {

    padding-right: 1.25rem !important

}



.pb-2,

.py-2 {

    padding-bottom: 1.25rem !important

}



.pl-2,

.px-2 {

    padding-left: 1.25rem !important

}



.p-3 {

    padding: 1.875rem !important

}



.pt-3,

.py-3 {

    padding-top: 1.875rem !important

}



.pr-3,

.px-3 {

    padding-right: 1.875rem !important

}



.pb-3,

.py-3 {

    padding-bottom: 1.875rem !important

}



.pl-3,

.px-3 {

    padding-left: 1.875rem !important

}



.p-4 {

    padding: 2.5rem !important

}



.pt-4,

.py-4 {

    padding-top: 2.5rem !important

}



.pr-4,

.px-4 {

    padding-right: 2.5rem !important

}



.pb-4,

.py-4 {

    padding-bottom: 2.5rem !important

}



.pl-4,

.px-4 {

    padding-left: 2.5rem !important

}



.p-5 {

    padding: 3.125rem !important

}



.pt-5,

.py-5 {

    padding-top: 3.125rem !important

}



.pr-5,

.px-5 {

    padding-right: 3.125rem !important

}



.pb-5,

.py-5 {

    padding-bottom: 3.125rem !important

}



.pl-5,

.px-5 {

    padding-left: 3.125rem !important

}



.p-6 {

    padding: 3.75rem !important

}



.pt-6,

.py-6 {

    padding-top: 3.75rem !important

}



.pr-6,

.px-6 {

    padding-right: 3.75rem !important

}



.pb-6,

.py-6 {

    padding-bottom: 3.75rem !important

}



.pl-6,

.px-6 {

    padding-left: 3.75rem !important

}



.p-7 {

    padding: 4.375rem !important

}



.pt-7,

.py-7 {

    padding-top: 4.375rem !important

}



.pr-7,

.px-7 {

    padding-right: 4.375rem !important

}



.pb-7,

.py-7 {

    padding-bottom: 4.375rem !important

}



.pl-7,

.px-7 {

    padding-left: 4.375rem !important

}



.p-8 {

    padding: 5rem !important

}



.pt-8,

.py-8 {

    padding-top: 5rem !important

}



.pr-8,

.px-8 {

    padding-right: 5rem !important

}



.pb-8,

.py-8 {

    padding-bottom: 5rem !important

}



.pl-8,

.px-8 {

    padding-left: 5rem !important

}



.p-9 {

    padding: 5.625rem !important

}



.pt-9,

.py-9 {

    padding-top: 5.625rem !important

}



.pr-9,

.px-9 {

    padding-right: 5.625rem !important

}



.pb-9,

.py-9 {

    padding-bottom: 5.625rem !important

}



.pl-9,

.px-9 {

    padding-left: 5.625rem !important

}



.p-10 {

    padding: 6.25rem !important

}



.pt-10,

.py-10 {

    padding-top: 6.25rem !important

}



.pr-10,

.px-10 {

    padding-right: 6.25rem !important

}



.pb-10,

.py-10 {

    padding-bottom: 6.25rem !important

}



.pl-10,

.px-10 {

    padding-left: 6.25rem !important

}



.m-n1 {

    margin: -.625rem !important

}



.mt-n1,

.my-n1 {

    margin-top: -.625rem !important

}



.mr-n1,

.mx-n1 {

    margin-right: -.625rem !important

}



.mb-n1,

.my-n1 {

    margin-bottom: -.625rem !important

}



.ml-n1,

.mx-n1 {

    margin-left: -.625rem !important

}



.m-n2 {

    margin: -1.25rem !important

}



.mt-n2,

.my-n2 {

    margin-top: -1.25rem !important

}



.mr-n2,

.mx-n2 {

    margin-right: -1.25rem !important

}



.mb-n2,

.my-n2 {

    margin-bottom: -1.25rem !important

}



.ml-n2,

.mx-n2 {

    margin-left: -1.25rem !important

}



.m-n3 {

    margin: -1.875rem !important

}



.mt-n3,

.my-n3 {

    margin-top: -1.875rem !important

}



.mr-n3,

.mx-n3 {

    margin-right: -1.875rem !important

}



.mb-n3,

.my-n3 {

    margin-bottom: -1.875rem !important

}



.ml-n3,

.mx-n3 {

    margin-left: -1.875rem !important

}



.m-n4 {

    margin: -2.5rem !important

}



.mt-n4,

.my-n4 {

    margin-top: -2.5rem !important

}



.mr-n4,

.mx-n4 {

    margin-right: -2.5rem !important

}



.mb-n4,

.my-n4 {

    margin-bottom: -2.5rem !important

}



.ml-n4,

.mx-n4 {

    margin-left: -2.5rem !important

}



.m-n5 {

    margin: -3.125rem !important

}



.mt-n5,

.my-n5 {

    margin-top: -3.125rem !important

}



.mr-n5,

.mx-n5 {

    margin-right: -3.125rem !important

}



.mb-n5,

.my-n5 {

    margin-bottom: -3.125rem !important

}



.ml-n5,

.mx-n5 {

    margin-left: -3.125rem !important

}



.m-n6 {

    margin: -3.75rem !important

}



.mt-n6,

.my-n6 {

    margin-top: -3.75rem !important

}



.mr-n6,

.mx-n6 {

    margin-right: -3.75rem !important

}



.mb-n6,

.my-n6 {

    margin-bottom: -3.75rem !important

}



.ml-n6,

.mx-n6 {

    margin-left: -3.75rem !important

}



.m-n7 {

    margin: -4.375rem !important

}



.mt-n7,

.my-n7 {

    margin-top: -4.375rem !important

}



.mr-n7,

.mx-n7 {

    margin-right: -4.375rem !important

}



.mb-n7,

.my-n7 {

    margin-bottom: -4.375rem !important

}



.ml-n7,

.mx-n7 {

    margin-left: -4.375rem !important

}



.m-n8 {

    margin: -5rem !important

}



.mt-n8,

.my-n8 {

    margin-top: -5rem !important

}



.mr-n8,

.mx-n8 {

    margin-right: -5rem !important

}



.mb-n8,

.my-n8 {

    margin-bottom: -5rem !important

}



.ml-n8,

.mx-n8 {

    margin-left: -5rem !important

}



.m-n9 {

    margin: -5.625rem !important

}



.mt-n9,

.my-n9 {

    margin-top: -5.625rem !important

}



.mr-n9,

.mx-n9 {

    margin-right: -5.625rem !important

}



.mb-n9,

.my-n9 {

    margin-bottom: -5.625rem !important

}



.ml-n9,

.mx-n9 {

    margin-left: -5.625rem !important

}



.m-n10 {

    margin: -6.25rem !important

}



.mt-n10,

.my-n10 {

    margin-top: -6.25rem !important

}



.mr-n10,

.mx-n10 {

    margin-right: -6.25rem !important

}



.mb-n10,
.my-n10 {
    margin-bottom: -6.25rem !important
}

.ml-n10,
.mx-n10 {
    margin-left: -6.25rem !important
}
.m-auto {
    margin: auto !important
}

.mt-auto,
.my-auto {
    margin-top: auto !important
}

.mr-auto,
.mx-auto {
    margin-right: auto !important
}

.mb-auto,
.my-auto {
    margin-bottom: auto !important
}
.ml-auto,.mx-auto {
    margin-left: auto !important
}

.emp_field, .mang_field
{
  border: 1px solid #d3d3d3;
  padding: 10px 5px;
  border-radius: .25rem;
}

.fa-check

{

  color: #5cb85c;

}

.nav-tabs.nav-justified>.active

{

  border-bottom: 5px solid #00ff00;

}

.nav-tabs.nav-justified>.active>a, .nav-tabs.nav-justified>.active>a:focus, .nav-tabs.nav-justified>.active>a:hover 

{ color: #00ff00;font-weight: 600;border:none; }



.sidenav {
  height: 100%;
  width: 0;
  position: fixed;
  z-index: 10;
  top: 0;
  left: 0;
  background-color: #FFFFFF;
  overflow-x: hidden;
  transition: 0.5s;
}

.closebtn {
  position: absolute;
  top: 0;
  right: 25px;
  font-size: 36px;
  margin-left: 50px;
}

@media screen and (max-height: 450px) {
  .sidenav {padding-top: 15px;}
  .sidenav a {font-size: 18px;}
}

.fa-pencil
{
  color: #FFFFFF;
}

.social-icon {
    color: #fff;
    padding:10px 14px;
}

a.social-icons  {
    font-size: 30px;
    color: #fff;  
    text-decoration: none;
    padding:5px;
}

.foot_contact
{
  position: fixed;
  top: 90%;
}

#logout {
    position: fixed;
    top: 90%;
    right: 4%;
    background: #00ff00;
    color: #fff;
    padding:10px;
    font-size: 25px;
    border-radius: 50px;
}

.login_link
{
  font-size: 16px;
  text-decoration: underline;
  color: #00ff00;
  font-weight: 600;
  letter-spacing: 1.5px;
}

@media (min-width:768px) and (max-width:1024px)
{
  .profile-image-container img
  {
    margin: 5% 15% 0% 15%;
  }
}