/* basic */
@font-face {
  font-family: 'Theinhardt';
  src: url("../fonts/Theinhardt-Rg.eot");
  src: url("../fonts/Theinhardt-Rg.eot?#iefix") format("embedded-opentype"), url("../fonts/Theinhardt-Rg.woff") format("woff"), url("../fonts/Theinhardt-Rg.ttf") format("truetype");
  font-weight: 400;
  font-style: normal; }

@font-face {
  font-family: 'Theinhardt';
  src: url("../fonts/Theinhardt-Md.eot");
  src: url("../fonts/Theinhardt-Md.eot?#iefix") format("embedded-opentype"), url("../fonts/Theinhardt-Md.woff") format("woff"), url("../fonts/Theinhardt-Md.ttf") format("truetype");
  font-weight: 500;
  font-style: normal; }

body {
  font-family: 'Theinhardt', sans-serif;
  padding: 20px 60px;
  color: #646464; }

* {
  box-sizing: border-box; }

a {
  color: #000000;
  text-decoration: none;
  cursor: pointer; }

.hide {
  display: none; }

.stop-scrolling {
  height: 100%;
  overflow: hidden; }

#mask {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 9999px;
  background-color: #000000;
  z-index: 1;
  opacity: 0.7;
  display: none; }

.mask-top {
  margin: 60px auto; }

.mask-top-container {
  z-index: 2;
  position: fixed;
  top: 0;
  left: 0;
  width: 100%; }

/* sensi-panel */
.sensi-panel, .ui-dialog, .panel.window {
  border-radius: 6px;
  background-color: #dddddd; }
  .sensi-panel .panel-header, .ui-dialog .panel-header, .panel.window .panel-header {
    border: none; }
  .sensi-panel .sensi-panel-title, .sensi-panel .ui-dialog-titlebar, .sensi-panel .panel-title, .ui-dialog .sensi-panel-title, .ui-dialog .ui-dialog-titlebar, .ui-dialog .panel-title, .panel.window .sensi-panel-title, .panel.window .ui-dialog-titlebar, .panel.window .panel-title {
    background-color: #dddddd;
    padding: 15px 20px;
    border-top-left-radius: 3px;
    border-top-right-radius: 3px;
    font-weight: 700;
    color: #0069FF;
    font-size: 18px;
    min-height: 30px; }
    .sensi-panel .sensi-panel-title .ui-dialog-titlebar-close, .sensi-panel .ui-dialog-titlebar .ui-dialog-titlebar-close, .sensi-panel .panel-title .ui-dialog-titlebar-close, .ui-dialog .sensi-panel-title .ui-dialog-titlebar-close, .ui-dialog .ui-dialog-titlebar .ui-dialog-titlebar-close, .ui-dialog .panel-title .ui-dialog-titlebar-close, .panel.window .sensi-panel-title .ui-dialog-titlebar-close, .panel.window .ui-dialog-titlebar .ui-dialog-titlebar-close, .panel.window .panel-title .ui-dialog-titlebar-close {
      display: none; }
    .sensi-panel .sensi-panel-title .icon-close, .sensi-panel .ui-dialog-titlebar .icon-close, .sensi-panel .panel-title .icon-close, .ui-dialog .sensi-panel-title .icon-close, .ui-dialog .ui-dialog-titlebar .icon-close, .ui-dialog .panel-title .icon-close, .panel.window .sensi-panel-title .icon-close, .panel.window .ui-dialog-titlebar .icon-close, .panel.window .panel-title .icon-close {
      float: right;
      margin-right: -5px;
      cursor: pointer; }
    .sensi-panel .sensi-panel-title .icon-close:hover, .sensi-panel .sensi-panel-title .panel-tool-close:hover, .sensi-panel .ui-dialog-titlebar .icon-close:hover, .sensi-panel .ui-dialog-titlebar .panel-tool-close:hover, .sensi-panel .panel-title .icon-close:hover, .sensi-panel .panel-title .panel-tool-close:hover, .ui-dialog .sensi-panel-title .icon-close:hover, .ui-dialog .sensi-panel-title .panel-tool-close:hover, .ui-dialog .ui-dialog-titlebar .icon-close:hover, .ui-dialog .ui-dialog-titlebar .panel-tool-close:hover, .ui-dialog .panel-title .icon-close:hover, .ui-dialog .panel-title .panel-tool-close:hover, .panel.window .sensi-panel-title .icon-close:hover, .panel.window .sensi-panel-title .panel-tool-close:hover, .panel.window .ui-dialog-titlebar .icon-close:hover, .panel.window .ui-dialog-titlebar .panel-tool-close:hover, .panel.window .panel-title .icon-close:hover, .panel.window .panel-title .panel-tool-close:hover {
      color: #000000;
      transition: 500ms; }
  .sensi-panel .panel-title, .ui-dialog .panel-title, .panel.window .panel-title {
    padding: 10px; }
  .sensi-panel .sensi-panel-body, .sensi-panel .ui-dialog-content, .sensi-panel .panel-body, .ui-dialog .sensi-panel-body, .ui-dialog .ui-dialog-content, .ui-dialog .panel-body, .panel.window .sensi-panel-body, .panel.window .ui-dialog-content, .panel.window .panel-body {
    background-color: #edeff1;
    padding: 24px 23px 20px;
    border-radius: 3px;
    border: none; }
    .sensi-panel .sensi-panel-body p, .sensi-panel .ui-dialog-content p, .sensi-panel .panel-body p, .ui-dialog .sensi-panel-body p, .ui-dialog .ui-dialog-content p, .ui-dialog .panel-body p, .panel.window .sensi-panel-body p, .panel.window .ui-dialog-content p, .panel.window .panel-body p {
      margin: 0;
      font-size: initial; }
  .sensi-panel .sensi-panel-body, .ui-dialog .sensi-panel-body, .panel.window .sensi-panel-body {
    overflow-y: auto; }
  .sensi-panel .sensi-panel-title ~ .sensi-panel-body, .ui-dialog .sensi-panel-title ~ .sensi-panel-body, .panel.window .sensi-panel-title ~ .sensi-panel-body {
    border-top-left-radius: 0;
    border-top-right-radius: 0;
    border-bottom-left-radius: 3px;
    border-bottom-right-radius: 3px; }
  .sensi-panel .ui-dialog-titlebar ~ .ui-dialog-content, .ui-dialog .ui-dialog-titlebar ~ .ui-dialog-content, .panel.window .ui-dialog-titlebar ~ .ui-dialog-content {
    border-radius: 0; }
  .sensi-panel .ui-dialog-buttonpane, .ui-dialog .ui-dialog-buttonpane, .panel.window .ui-dialog-buttonpane {
    text-align: center;
    background-color: #edeff1;
    border-bottom-left-radius: 3px;
    border-bottom-right-radius: 3px;
    padding: 20px 0; }
  .sensi-panel .dialog-button, .ui-dialog .dialog-button, .panel.window .dialog-button {
    border: none;
    background-color: #edeff1;
    height: 50px; }

/* form */
.btn, .ui-button, .l-btn {
  padding: 5px 19px;
  font-size: 17px;
  line-height: 1.471;
  color: #ffffff;
  background-color: #646464;
  cursor: pointer;
  margin-right: 10px;
  border-radius: 5px;
  border: none; }

.l-btn-plain {
  background-color: initial;
  padding: initial;
  margin: initial;
  padding-right: 3px;
  padding-bottom: 5px; }

.pagination td .l-btn-icon {
  display: inline-block;
  width: 15px; }

.btn:hover, .l-btn:hover {
  background-color: #00b4ff;
  transition: 500ms; }

.btn:focus {
  background-color: #00b4ff;
  transition: 500ms; }

button:focus {
  outline: 0; }

.form-control {
  margin-bottom: 20px;
  overflow: hidden; }

label {
  float: left;
  width: 125px;
  padding-top: 10px; }

input, textarea {
  border: 2px solid #ffffff;
  color: #34495e;
  font-size: 15px;
  line-height: 1.467;
  padding: 8px 12px;
  border-radius: 6px;
  width: 100%; }

input:disabled::-webkit-input-placeholder {
  color: #eeeeee; }

input:disabled:-moz-placeholder {
  /* Firefox 18- */
  color: #eeeeee; }

input:disabled::-moz-placeholder {
  /* Firefox 19+ */
  color: #eeeeee; }

input:disabled:-ms-input-placeholder {
  color: #eeeeee; }

textarea {
  height: 200px; }

input.error, textarea.error {
  border: 2px solid #FF8787; }

label.error {
  opacity: 0.9;
  position: relative;
  float: left;
  width: auto;
  border-radius: 5px;
  background-color: #FF8787;
  margin-top: 3px;
  padding: 4px 12px 3px 12px;
  color: #ffffff;
  font-weight: 200;
  font-size: 13px; }

.radio-group {
  padding-top: 8px; }
  .radio-group input {
    width: auto; }
  .radio-group label {
    float: initial;
    margin-right: 10px; }

/*
input:hover ~label.error:not(:empty), 
input:focus ~label.error:not(:empty), 
textarea:hover ~label.error:not(:empty), 
textarea:focus ~label.error:not(:empty) {
  opacity: 1;
  transition: 500ms;
}
*/
label ~ input {
  width: 619px; }

label ~ textarea {
  width: 619px; }

input:focus, textarea:focus {
  outline: none; }

span.icon {
  margin-right: 5px; }

table.sensi-table {
  border: 2px solid #d1d1d1;
  border-radius: 3px;
  width: 100%; }
  table.sensi-table thead tr:first-child {
    height: 40px; }
  table.sensi-table tr.row-alt {
    background-color: #e7e7e7; }
  table.sensi-table tr.row-alt-light {
    background-color: #f3f3f3; }
  table.sensi-table td, table.sensi-table th {
    text-align: left;
    padding: 2px 12px; }
  table.sensi-table th {
    color: #aaaaaa; }

.sensi-datagrid .datagrid-header {
  border: none;
  height: 40px !important; }

.sensi-datagrid .datagrid-header-row {
  height: 40px !important; }

.sensi-datagrid .datagrid-header td, .sensi-datagrid .datagrid-body td, .sensi-datagrid .datagrid-footer td {
  border: none;
  padding-left: 10px;
  padding-right: 10px; }

.sensi-datagrid .datagrid-header, .sensi-datagrid .datagrid-td-rownumber {
  background-color: #f3f3f3; }

.sensi-datagrid .datagrid-htable, .sensi-datagrid .datagrid-btable, .sensi-datagrid .datagrid-ftable {
  color: #646464; }

.sensi-datagrid .panel-header, .sensi-datagrid .panel-body {
  border: none; }

.sensi-datagrid .datagrid-header .datagrid-cell span {
  font-size: initial;
  font-weight: 700; }

.sensi-datagrid .datagrid-cell, .sensi-datagrid .datagrid-cell-group, .sensi-datagrid .datagrid-header-rownumber, .sensi-datagrid .datagrid-cell-rownumber {
  font-size: initial; }
  .sensi-datagrid .datagrid-cell .datagrid-row-expander.datagrid-row-expand, .sensi-datagrid .datagrid-cell-group .datagrid-row-expander.datagrid-row-expand, .sensi-datagrid .datagrid-header-rownumber .datagrid-row-expander.datagrid-row-expand, .sensi-datagrid .datagrid-cell-rownumber .datagrid-row-expander.datagrid-row-expand {
    margin: 0; }

.sensi-datagrid .datagrid-row-selected {
  background-color: #dddddd; }

.sensi-datagrid .datagrid-header-row, .sensi-datagrid .datagrid-row {
  height: 40px; }

.sensi-datagrid .datagrid-group {
  height: 40px;
  border-bottom: none;
  background-color: #dddddd; }
  .sensi-datagrid .datagrid-group .datagrid-group-title {
    margin-top: 8px;
    font-size: 14px; }

.panel.datagrid {
  float: left;
  width: 100%;
  margin-bottom: 50px;
  border-radius: 3px; }

.form-control.message {
  display: none;
  border-radius: 3px;
  padding: 5px 12px;
  color: #ffffff;
  background-color: #2651FF; }

/* title */
.title {
  height: 80px;
  border-bottom: 2px solid #dddddd; }
  .title img {
    width: 150px;
    float: left; }
  .title h1 {
    color: #2aa6de;
    font-size: 36px;
    font-weight: 400;
    position: relative;
    top: -6px; }
  .title .tab {
    cursor: pointer;
    margin-top: 10px;
    float: right;
    height: 40px;
    line-height: 30px;
    padding: 0 15px;
    margin-left: 20px;
    font-size: 18px; }
  .title .tab:after {
    content: "";
    left: -10%;
    float: left;
    width: 120%;
    position: relative;
    height: 4px;
    background: #646464;
    transition: opacity .5s;
    -ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=0)";
    opacity: 0; }
  .title .tab.disable {
    color: #dddddd; }
  .title .tab.active {
    color: #00b4ff;
    font-weight: bold; }
  .title .tab.active:after {
    opacity: 1;
    background: #00b4ff; }
  .title .tab:hover:after {
    opacity: 1; }
  .title .tab.disable:hover {
    background-color: transparent;
    color: #dddddd; }

.search-box {
  float: left;
  overflow: hidden;
  height: 36px;
  width: 500px;
  border: 1px solid #dddddd;
  margin: 10px 0;
  border-radius: 5px; }
  .search-box input {
    float: left;
    padding-top: 4px;
    padding-bottom: 5px;
    margin: 0; }
  .search-box button {
    float: right;
    position: relative;
    height: 28px;
    top: -32px;
    border-radius: 5px;
    margin-right: 3px;
    padding: 2px 20px; }

/* login */
#login {
  width: 500px;
  margin: 0 auto; }
  #login .title {
    text-align: center;
    width: 340px;
    margin: 0 auto;
    border-bottom: none; }
  #login label {
    padding-top: 0;
    padding-bottom: 10px; }
  #login #btn-login {
    width: 100%;
    display: block;
    text-align: center; }

.welcome {
  position: absolute;
  right: 70px;
  top: 80px; }

.user-photo-round {
  border-radius: 50%;
  width: 30px;
  height: 30px; }

.user-container {
  position: relative;
  top: -15px;
  text-align: right; }
  .user-container .link {
    position: relative;
    bottom: 8px;
    left: 5px; }

.user-container.width {
  width: 900px;
  margin: auto;
  top: 0; }

.disabled {
  cursor: not-allowed;
  filter: alpha(opacity=65);
  -webkit-box-shadow: none;
  box-shadow: none;
  opacity: .65; }

@keyframes anim-rotate {
  0% {
    transform: rotate(0); }
  100% {
    transform: rotate(360deg); } }

.spinner {
  display: inline-block;
  animation: anim-rotate 2s infinite linear;
  text-shadow: 0 0 0.25em rgba(255, 255, 255, 0.1); }

.footer {
  text-align: center;
  color: #aaa; }
  .footer p {
    margin: 0; }

.toastr-bottom-right {
  position: fixed;
  right: 10px;
  bottom: 10px; }