@font-face {
  font-family: "Active Font";
  src: url("../fonts/open-sans/OpenSans-Regular.ttf")         format("truetype"),
       url("../fonts/open-sans/OpenSans-Italic.ttf")          format("truetype"),
       url("../fonts/open-sans/OpenSans-Bold.ttf")            format("truetype"),
       url("../fonts/open-sans/OpenSans-Light.ttf")           format("truetype"),
       url("../fonts/open-sans/OpenSans-BoldItalic.ttf")      format("truetype"),
       url("../fonts/open-sans/OpenSans-LightItalic.ttf")     format("truetype"),
       url("../fonts/open-sans/OpenSans-ExtraBold.ttf")       format("truetype"),
       url("../fonts/open-sans/OpenSans-ExtraBoldItalic.ttf") format("truetype"),
       url("../fonts/open-sans/OpenSans-Semibold.ttf")        format("truetype"),
       url("../fonts/open-sans/OpenSans-SemiboldItalic.ttf")  format("truetype");
}

@font-face {
  font-family: "Rajdhani";
  src: url("../fonts/rajdhani/Rajdhani-Regular.ttf" ) format("truetype"),
       url("../fonts/rajdhani/Rajdhani-Medium.ttf"  ) format("truetype"),
       url("../fonts/rajdhani/Rajdhani-Light.ttf"   ) format("truetype"),
       url("../fonts/rajdhani/Rajdhani-Bold.ttf"    ) format("truetype"),
       url("../fonts/rajdhani/Rajdhani-SemiBold.ttf") format("truetype");
}

@font-face {
  font-family: "Titillium";
  src: url("../fonts/Titillium/Titillium-Regular.otf"        ) format("opentype"),
       url("../fonts/Titillium/Titillium-RegularItalic.otf"  ) format("opentype"),
       url("../fonts/Titillium/Titillium-RegularUpright.otf" ) format("opentype"),
       url("../fonts/Titillium/Titillium-Light.otf"          ) format("opentype"),
       url("../fonts/Titillium/Titillium-LightItalic.otf"    ) format("opentype"),
       url("../fonts/Titillium/Titillium-LightUpright.otf"   ) format("opentype"),
       url("../fonts/Titillium/Titillium-Thin.otf"           ) format("opentype"),
       url("../fonts/Titillium/Titillium-ThinItalic.otf"     ) format("opentype"),
       url("../fonts/Titillium/Titillium-ThinUpright.otf"    ) format("opentype"),
       url("../fonts/Titillium/Titillium-Bold.otf"           ) format("opentype"),
       url("../fonts/Titillium/Titillium-BoldItalic.otf"     ) format("opentype"),
       url("../fonts/Titillium/Titillium-BoldUpright.otf"    ) format("opentype"),
       url("../fonts/Titillium/Titillium-Semibold.otf"       ) format("opentype"),
       url("../fonts/Titillium/Titillium-SemiboldItalic.otf" ) format("opentype"),
       url("../fonts/Titillium/Titillium-SemiboldUpright.otf") format("opentype"),
       url("../fonts/Titillium/Titillium-Black.otf"          ) format("opentype");
}

body {
  font-family: "Active Font", "Open Sans", sans-serif;
  font-size: 12px;
  background-color: #76603a;
  color: #3a3a3a;
  padding: 50px 30px 0px;
}

.page-title-logo {
  font-family: "Active Font", "Open Sans", sans-serif, Arial;
  font-weight: bold;
  color: #ffffff;
  font-weight: bold;
  text-shadow: -1px -1px 1px #3a3a3a, 0px -1px 1px #3a3a3a, 1px -1px 1px #3a3a3a,
               -1px  0px 1px #3a3a3a, 0px  0px 2px #3a3a3a, 1px  0px 1px #3a3a3a,
               -1px  1px 1px #3a3a3a, 0px  1px 1px #3a3a3a, 1px  1px 1px #3a3a3a;
}
.bglogin {
  float: left;
  z-index: -1;
  text-align: center;
  position: fixed;
  top: 0px;
  left: 0px;
  width: 100%;
  height: 100%;
  background-color: #aa8a55;
}
.bglogin-header {
  background-color: #d0bfa2;
  top: 0px;
  height: 100%;
  position: fixed;
  background: linear-gradient(to bottom, rgba(208,191,162,0.5 ), 
                                         rgba(208,191,162,0.25), 
                                         rgba(208,191,162,0.5 ) );
}
h1, h2, h3, h4, h5, h6 {
  text-decoration: none;
}

.login-page {
  margin: 0px;
  padding: 30px 50px 10px;
}

.login-coy-name, .login-apl-name, .login-apl-ver {
  color: inherit;
  font-weight: inherit;
  text-shadow: !important;
}

.page-sistem-logo {
  z-index: 10000;
  height: 100%;
  opacity: 1;
  padding: 0px;
}
.page-sistem-title {
  color: #ffffff;
  opacity: 1;
}

.logo-image {
  padding: 10px;
  border-radius: 0px;
  border-width: 3px;
  border-style: solid;
  border-color: transparent;
  border-radius: 10%;
  transition: 0.35s ease;
}
.logo-image:hover {
  background-color: #ccc;
  border-color : #ccb999;
  box-shadow: 0px 0px 25px #efe, 0px 0px 10px #efe inset;
  opacity: 0.65;
  border-radius: 20% 20% 50% 50%;
}

.page-header {
  /*
  background-color: #5e400d;
  color: #fff;
  background-color: #cc0227;
  color: #cc0227;
  */
  /*
  background-color: #2692a8;
  background-color: rgba(38,146,168,0.45);
  background-color: #1b6474;
  background-color: rgba(27,100,116,0.75);
  */
  color: #fff;
}

#page-footer,
.page-footer {
  font-family: "Active Font", "Open Sans", sans-serif, Arial;
  padding: 5px 40px 10px;
  z-index: 101;
  /*
  background-color: #14a098;
  background-color: rgba(20,160,152,0.75);
  color: #ffffff;
  */
  /*
  background-color: #8ed5e5;
  */
  background-color: #382e1d;
  background-color: rgba(56,46,29,0.8);
  color: #fff;
}

.login-page-header {
  z-index: 101;
  text-shadow: 0px 1px 2px #333333, 0px 0px 2px #e5e5e5, 0px 0px 5px #666666, 0px 10px 10px #000000;
  padding: 20px 10px 10px;
}

.login-form {
  margin: 20px 0px 50px;
  padding: 0px;
  background-color: inherit;
  border: 2px solid #ffffff;
  box-shadow: 0px 10px 20px #909090;
}

.login-form-title {
  background-color: #897045;
  background-color: rgba(137,79,97,0.95);
  color: #ffffff;
  cursor: default;
  font-size: 1.3em; 
  font-weight: bold; 
  padding: 18px 10px 12px; 
}

.form-group {
  padding-top: 2px;
  padding-bottom: 4px;
}
div.form-group {
  margin: 0px;
  padding: 0px;
}
.form-group label {
  padding-top: 5px;
}

.ui-widget-overlay.input-overlay,
.ui-dialog-overlay.input-overlay {
  background-color: #5f4e30;
  opacity: 0;
}

.ui-dialog, .ui-widget {
  font-family: "Active Font";
  /*
  background-color: rgba(255,255,255,0.85);
  background-color: rgba();
  border: 1px solid #fff;
  */
  background-color: #e2d8c7;
  background-color: rgba(226,216,199,0.8);
  border: none;
  border-radius: none;
  padding: 1px;
  top: 512px;
}
.ui-dialog input[type="text"],
.ui-dialog input[type="password"] {
  background-color: #ffffff;
  color: #504127;
}
.ui-dialog-shadow {
  box-shadow: 0px 5px 8px 3px rgba(15,15,15,0.25);
}
.ui-dialog-titlebar.ui-dialog-css-titlebar {
  font-weight: bold;
  font-size  : 1.3em;
  background-color: #7b643e;
  background-color: rgba(123,100,62,0.9);
  border: none;
  color: #ffffff;
  border-radius: 0px;
}

input[type="text"].form-control,
input[type="password"].form-control {
  color: #6d5936; background-color: #f0ebe1;
}
input[type="text"].form-control:active,
input[type="text"].form-control:focus,
input[type="password"].form-control:active,
input[type="password"].form-control:focus {
  color: #614f30; background-color: #fbfaf7;
}
input[type="text"].form-control:hover, 
input[type="text"].form-control:active:hover, input[type="text"].form-control:focus:hover,
input[type="password"].form-control:hover, 
input[type="password"].form-control:active:hover, input[type="password"].form-control:focus:hover {
  color: #4b3e25; background-color: #f8f5f1;
}

.btn.btn-login {
  background-color: #000000;
}