@charset "UTF-8";
/* ==========================================================================
   Base

   Default settings
========================================================================== */
@import url("https://fonts.googleapis.com/css?family=Athiti:500|Kanit:300");
body {
  /* Styles here */
  font-family: 'Open Sans', Arial, sans-serif;
  font-size: 13px; }

a {
  /* Styles here */ }

a:hover {
  /* Styles here */ }

a:focus {
  /* Styles here */ }

a:active,
a:hover {
  /* Styles here */ }

/* cyrillic-ext */
@font-face {
  font-family: 'Open Sans';
  font-style: normal;
  font-weight: 300;
  src: local("Open Sans Light"), local("OpenSans-Light"), url(/fonts/DXI1ORHCpsQm3Vp6mXoaTa-j2U0lmluP9RWlSytm3ho.woff2) format("woff2");
  unicode-range: U+0460-052F, U+20B4, U+2DE0-2DFF, U+A640-A69F; }
/* cyrillic */
@font-face {
  font-family: 'Open Sans';
  font-style: normal;
  font-weight: 300;
  src: local("Open Sans Light"), local("OpenSans-Light"), url(/fonts/DXI1ORHCpsQm3Vp6mXoaTZX5f-9o1vgP2EXwfjgl7AY.woff2) format("woff2");
  unicode-range: U+0400-045F, U+0490-0491, U+04B0-04B1, U+2116; }
/* greek-ext */
@font-face {
  font-family: 'Open Sans';
  font-style: normal;
  font-weight: 300;
  src: local("Open Sans Light"), local("OpenSans-Light"), url(/fonts/DXI1ORHCpsQm3Vp6mXoaTRWV49_lSm1NYrwo-zkhivY.woff2) format("woff2");
  unicode-range: U+1F00-1FFF; }
/* greek */
@font-face {
  font-family: 'Open Sans';
  font-style: normal;
  font-weight: 300;
  src: local("Open Sans Light"), local("OpenSans-Light"), url(/fonts/DXI1ORHCpsQm3Vp6mXoaTaaRobkAwv3vxw3jMhVENGA.woff2) format("woff2");
  unicode-range: U+0370-03FF; }
/* vietnamese */
@font-face {
  font-family: 'Open Sans';
  font-style: normal;
  font-weight: 300;
  src: local("Open Sans Light"), local("OpenSans-Light"), url(/fonts/DXI1ORHCpsQm3Vp6mXoaTf8zf_FOSsgRmwsS7Aa9k2w.woff2) format("woff2");
  unicode-range: U+0102-0103, U+1EA0-1EF9, U+20AB; }
/* latin-ext */
@font-face {
  font-family: 'Open Sans';
  font-style: normal;
  font-weight: 300;
  src: local("Open Sans Light"), local("OpenSans-Light"), url(/fonts/DXI1ORHCpsQm3Vp6mXoaTT0LW-43aMEzIO6XUTLjad8.woff2) format("woff2");
  unicode-range: U+0100-024F, U+1E00-1EFF, U+20A0-20AB, U+20AD-20CF, U+2C60-2C7F, U+A720-A7FF; }
/* latin */
@font-face {
  font-family: 'Open Sans';
  font-style: normal;
  font-weight: 300;
  src: local("Open Sans Light"), local("OpenSans-Light"), url(/fonts/DXI1ORHCpsQm3Vp6mXoaTegdm0LZdjqr5-oayXSOefg.woff2) format("woff2");
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02C6, U+02DA, U+02DC, U+2000-206F, U+2074, U+20AC, U+2212, U+2215; }
/* cyrillic-ext */
@font-face {
  font-family: 'Open Sans';
  font-style: normal;
  font-weight: 400;
  src: local("Open Sans"), local("OpenSans"), url(/fonts/K88pR3goAWT7BTt32Z01mxJtnKITppOI_IvcXXDNrsc.woff2) format("woff2");
  unicode-range: U+0460-052F, U+20B4, U+2DE0-2DFF, U+A640-A69F; }
/* cyrillic */
@font-face {
  font-family: 'Open Sans';
  font-style: normal;
  font-weight: 400;
  src: local("Open Sans"), local("OpenSans"), url(/fonts/RjgO7rYTmqiVp7vzi-Q5URJtnKITppOI_IvcXXDNrsc.woff2) format("woff2");
  unicode-range: U+0400-045F, U+0490-0491, U+04B0-04B1, U+2116; }
/* greek-ext */
@font-face {
  font-family: 'Open Sans';
  font-style: normal;
  font-weight: 400;
  src: local("Open Sans"), local("OpenSans"), url(/fonts/LWCjsQkB6EMdfHrEVqA1KRJtnKITppOI_IvcXXDNrsc.woff2) format("woff2");
  unicode-range: U+1F00-1FFF; }
/* greek */
@font-face {
  font-family: 'Open Sans';
  font-style: normal;
  font-weight: 400;
  src: local("Open Sans"), local("OpenSans"), url(/fonts/xozscpT2726on7jbcb_pAhJtnKITppOI_IvcXXDNrsc.woff2) format("woff2");
  unicode-range: U+0370-03FF; }
/* vietnamese */
@font-face {
  font-family: 'Open Sans';
  font-style: normal;
  font-weight: 400;
  src: local("Open Sans"), local("OpenSans"), url(/fonts/59ZRklaO5bWGqF5A9baEERJtnKITppOI_IvcXXDNrsc.woff2) format("woff2");
  unicode-range: U+0102-0103, U+1EA0-1EF9, U+20AB; }
/* latin-ext */
@font-face {
  font-family: 'Open Sans';
  font-style: normal;
  font-weight: 400;
  src: local("Open Sans"), local("OpenSans"), url(/fonts/u-WUoqrET9fUeobQW7jkRRJtnKITppOI_IvcXXDNrsc.woff2) format("woff2");
  unicode-range: U+0100-024F, U+1E00-1EFF, U+20A0-20AB, U+20AD-20CF, U+2C60-2C7F, U+A720-A7FF; }
/* latin */
@font-face {
  font-family: 'Open Sans';
  font-style: normal;
  font-weight: 400;
  src: local("Open Sans"), local("OpenSans"), url(/fonts/cJZKeOuBrn4kERxqtaUH3VtXRa8TVwTICgirnJhmVJw.woff2) format("woff2");
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02C6, U+02DA, U+02DC, U+2000-206F, U+2074, U+20AC, U+2212, U+2215; }
/* cyrillic-ext */
@font-face {
  font-family: 'Open Sans';
  font-style: normal;
  font-weight: 600;
  src: local("Open Sans Semibold"), local("OpenSans-Semibold"), url(/fonts/MTP_ySUJH_bn48VBG8sNSq-j2U0lmluP9RWlSytm3ho.woff2) format("woff2");
  unicode-range: U+0460-052F, U+20B4, U+2DE0-2DFF, U+A640-A69F; }
/* cyrillic */
@font-face {
  font-family: 'Open Sans';
  font-style: normal;
  font-weight: 600;
  src: local("Open Sans Semibold"), local("OpenSans-Semibold"), url(/fonts/MTP_ySUJH_bn48VBG8sNSpX5f-9o1vgP2EXwfjgl7AY.woff2) format("woff2");
  unicode-range: U+0400-045F, U+0490-0491, U+04B0-04B1, U+2116; }
/* greek-ext */
@font-face {
  font-family: 'Open Sans';
  font-style: normal;
  font-weight: 600;
  src: local("Open Sans Semibold"), local("OpenSans-Semibold"), url(/fonts/MTP_ySUJH_bn48VBG8sNShWV49_lSm1NYrwo-zkhivY.woff2) format("woff2");
  unicode-range: U+1F00-1FFF; }
/* greek */
@font-face {
  font-family: 'Open Sans';
  font-style: normal;
  font-weight: 600;
  src: local("Open Sans Semibold"), local("OpenSans-Semibold"), url(/fonts/MTP_ySUJH_bn48VBG8sNSqaRobkAwv3vxw3jMhVENGA.woff2) format("woff2");
  unicode-range: U+0370-03FF; }
/* vietnamese */
@font-face {
  font-family: 'Open Sans';
  font-style: normal;
  font-weight: 600;
  src: local("Open Sans Semibold"), local("OpenSans-Semibold"), url(/fonts/MTP_ySUJH_bn48VBG8sNSv8zf_FOSsgRmwsS7Aa9k2w.woff2) format("woff2");
  unicode-range: U+0102-0103, U+1EA0-1EF9, U+20AB; }
/* latin-ext */
@font-face {
  font-family: 'Open Sans';
  font-style: normal;
  font-weight: 600;
  src: local("Open Sans Semibold"), local("OpenSans-Semibold"), url(/fonts/MTP_ySUJH_bn48VBG8sNSj0LW-43aMEzIO6XUTLjad8.woff2) format("woff2");
  unicode-range: U+0100-024F, U+1E00-1EFF, U+20A0-20AB, U+20AD-20CF, U+2C60-2C7F, U+A720-A7FF; }
/* latin */
@font-face {
  font-family: 'Open Sans';
  font-style: normal;
  font-weight: 600;
  src: local("Open Sans Semibold"), local("OpenSans-Semibold"), url(/fonts/MTP_ySUJH_bn48VBG8sNSugdm0LZdjqr5-oayXSOefg.woff2) format("woff2");
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02C6, U+02DA, U+02DC, U+2000-206F, U+2074, U+20AC, U+2212, U+2215; }
/* cyrillic-ext */
@font-face {
  font-family: 'Open Sans';
  font-style: normal;
  font-weight: 700;
  src: local("Open Sans Bold"), local("OpenSans-Bold"), url(/fonts/k3k702ZOKiLJc3WVjuplzK-j2U0lmluP9RWlSytm3ho.woff2) format("woff2");
  unicode-range: U+0460-052F, U+20B4, U+2DE0-2DFF, U+A640-A69F; }
/* cyrillic */
@font-face {
  font-family: 'Open Sans';
  font-style: normal;
  font-weight: 700;
  src: local("Open Sans Bold"), local("OpenSans-Bold"), url(/fonts/k3k702ZOKiLJc3WVjuplzJX5f-9o1vgP2EXwfjgl7AY.woff2) format("woff2");
  unicode-range: U+0400-045F, U+0490-0491, U+04B0-04B1, U+2116; }
/* greek-ext */
@font-face {
  font-family: 'Open Sans';
  font-style: normal;
  font-weight: 700;
  src: local("Open Sans Bold"), local("OpenSans-Bold"), url(/fonts/k3k702ZOKiLJc3WVjuplzBWV49_lSm1NYrwo-zkhivY.woff2) format("woff2");
  unicode-range: U+1F00-1FFF; }
/* greek */
@font-face {
  font-family: 'Open Sans';
  font-style: normal;
  font-weight: 700;
  src: local("Open Sans Bold"), local("OpenSans-Bold"), url(/fonts/k3k702ZOKiLJc3WVjuplzKaRobkAwv3vxw3jMhVENGA.woff2) format("woff2");
  unicode-range: U+0370-03FF; }
/* vietnamese */
@font-face {
  font-family: 'Open Sans';
  font-style: normal;
  font-weight: 700;
  src: local("Open Sans Bold"), local("OpenSans-Bold"), url(/fonts/k3k702ZOKiLJc3WVjuplzP8zf_FOSsgRmwsS7Aa9k2w.woff2) format("woff2");
  unicode-range: U+0102-0103, U+1EA0-1EF9, U+20AB; }
/* latin-ext */
@font-face {
  font-family: 'Open Sans';
  font-style: normal;
  font-weight: 700;
  src: local("Open Sans Bold"), local("OpenSans-Bold"), url(/fonts/k3k702ZOKiLJc3WVjuplzD0LW-43aMEzIO6XUTLjad8.woff2) format("woff2");
  unicode-range: U+0100-024F, U+1E00-1EFF, U+20A0-20AB, U+20AD-20CF, U+2C60-2C7F, U+A720-A7FF; }
/* latin */
@font-face {
  font-family: 'Open Sans';
  font-style: normal;
  font-weight: 700;
  src: local("Open Sans Bold"), local("OpenSans-Bold"), url(/fonts/k3k702ZOKiLJc3WVjuplzOgdm0LZdjqr5-oayXSOefg.woff2) format("woff2");
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02C6, U+02DA, U+02DC, U+2000-206F, U+2074, U+20AC, U+2212, U+2215; }
/* ==========================================================================
   Buttons

   Default Bootstrap and Mendix Buttons
========================================================================== */
.btn,
.mx-button {
  /* Styles here */ }
  .btn.mx-dateinput-select-button,
  .mx-button.mx-dateinput-select-button {
    padding: 3px 10px; }
  .btn:hover, .btn:focus, .btn:active,
  .mx-button:hover,
  .mx-button:focus,
  .mx-button:active {
    /* Styles here */ }

.mx-link {
  /* Styles here */ }

.btn-default {
  /* Styles here */
  background-color: #dfe4ed;
  border-color: #dfe4ed;
  box-shadow: 0 2px 4px -2px rgba(55, 58, 60, 0.6); }
  .btn-default:hover, .btn-default:focus {
    box-shadow: 0 2px 4px -2px rgba(55, 58, 60, 0.6);
    background-color: #dfe4ed;
    border-color: #dfe4ed;
    opacity: 0.75; }

.btn-primary {
  /* Styles here */
  box-shadow: 0 2px 4px -2px rgba(55, 58, 60, 0.6);
  background-color: #01a8fe;
  border-color: #01a8fe; }
  .btn-primary:hover, .btn-primary:focus {
    box-shadow: 0 2px 4px -2px rgba(55, 58, 60, 0.6);
    background-color: #01a8fe;
    border-color: #01a8fe;
    opacity: 0.75; }

.btn-inverse {
  /* Styles here */
  box-shadow: 0 2px 4px -2px rgba(55, 58, 60, 0.6); }
  .btn-inverse:hover, .btn-inverse:focus {
    box-shadow: 0 2px 4px -2px rgba(55, 58, 60, 0.6); }

.btn-success {
  /* Styles here */
  box-shadow: 0 2px 4px -2px rgba(55, 58, 60, 0.6);
  background-color: #46be8a;
  border-color: #46be8a; }
  .btn-success:hover, .btn-success:focus {
    box-shadow: 0 2px 4px -2px rgba(55, 58, 60, 0.6);
    background-color: #46be8a;
    border-color: #46be8a;
    opacity: 0.75; }

.btn-info {
  /* Styles here */
  box-shadow: 0 2px 4px -2px rgba(55, 58, 60, 0.6); }
  .btn-info:hover, .btn-info:focus {
    box-shadow: 0 2px 4px -2px rgba(55, 58, 60, 0.6); }

.btn-warning {
  /* Styles here */
  box-shadow: 0 2px 4px -2px rgba(55, 58, 60, 0.6);
  background-color: #f39834;
  border-color: #f39834; }
  .btn-warning:hover, .btn-warning:focus {
    box-shadow: 0 2px 4px -2px rgba(55, 58, 60, 0.6);
    background-color: #f39834;
    border-color: #f39834;
    opacity: 0.75; }

.btn-danger {
  /* Styles here */
  box-shadow: 0 2px 4px -2px rgba(55, 58, 60, 0.6);
  background-color: #fb434a;
  border-color: #fb434a; }
  .btn-danger:hover, .btn-danger:focus {
    box-shadow: 0 2px 4px -2px rgba(55, 58, 60, 0.6);
    background-color: #fb434a;
    border-color: #fb434a;
    opacity: 0.75; }

/* ==========================================================================
   Datagrid Default

   Default Mendix Datagrid Widget. The datagrid shows a list of objects in a grid
========================================================================== */
.mx-datagrid {
  /* Styles here */ }
  .mx-datagrid .mx-grid-controlbar .mx-button {
    margin: 0 .3em 8px 0; }
  .mx-datagrid .mx-datagrid-head-table {
    /* Styles here */ }
    .mx-datagrid .mx-datagrid-head-table .mx-datagrid-head-wrapper {
      /* Styles here */ }
  .mx-datagrid .mx-datagrid-body-table {
    /* Styles here */ }
    .mx-datagrid .mx-datagrid-body-table .mx-datagrid-body tr {
      /* Styles here */
      background-color: transparent; }
      .mx-datagrid .mx-datagrid-body-table .mx-datagrid-body tr td {
        /* Styles here */
        background-color: transparent; }
      .mx-datagrid .mx-datagrid-body-table .mx-datagrid-body tr:hover td {
        background-color: #dfe4ed !important; }
      .mx-datagrid .mx-datagrid-body-table .mx-datagrid-body tr.selected td, .mx-datagrid .mx-datagrid-body-table .mx-datagrid-body tr.selected:hover td {
        background-color: #97d3f3 !important;
        color: #000; }

/* ==========================================================================
   Dataview

   Default Mendix Dataview Widget. The data view is used for showing the contents of exactly one object
========================================================================== */
.mx-dataview {
  /* Styles here */ }
  .mx-dataview .mx-dataview-controls {
    /* Styles here */
    border-top: none; }
    .mx-dataview .mx-dataview-controls .mx-button {
      min-width: 10rem; }

/* ==========================================================================
   Grid

   Default Mendix Grid
========================================================================== */
.mx-grid {
  /* Styles here */ }
  .mx-grid .mx-grid-controlbar {
    /* Styles here */ }
    .mx-grid .mx-grid-controlbar .mx-grid-pagingbar {
      /* Styles here */ }
      .mx-grid .mx-grid-controlbar .mx-grid-pagingbar .mx-button {
        /* Styles here */ }
        .mx-grid .mx-grid-controlbar .mx-grid-pagingbar .mx-button:hover {
          /* Styles here */ }
      .mx-grid .mx-grid-controlbar .mx-grid-pagingbar .mx-grid-paging-status {
        /* Styles here */ }
    .mx-grid .mx-grid-controlbar .mx-grid-searchbar {
      /* Styles here */ }
      .mx-grid .mx-grid-controlbar .mx-grid-searchbar .mx-grid-search-item {
        /* Styles here */ }
        .mx-grid .mx-grid-controlbar .mx-grid-searchbar .mx-grid-search-item .mx-grid-search-label {
          /* Styles here */ }
      .mx-grid .mx-grid-controlbar .mx-grid-searchbar .mx-grid-search-input {
        /* Styles here */ }
        .mx-grid .mx-grid-controlbar .mx-grid-searchbar .mx-grid-search-input .form-control {
          /* Styles here */ }
        .mx-grid .mx-grid-controlbar .mx-grid-searchbar .mx-grid-search-input .mx-button {
          /* Styles here */ }

/* ==========================================================================
   Groupbox

   Default Mendix Groupboxes
========================================================================== */
.mx-groupbox {
  /* Styles here */ }
  .mx-groupbox > .mx-groupbox-header {
    /* Styles here */ }
  .mx-groupbox > .mx-groupbox-body {
    /* Styles here */ }
  .mx-groupbox .mx-groupbox-header + .mx-groupbox-body {
    /* Styles here */ }
  .mx-groupbox.collapsed > .mx-groupbox-header {
    /* Styles here */ }

/* ==========================================================================
   Inputs
========================================================================== */
.form-control {
  /* Styles here */ }

.form-control:focus {
  /* Styles here */ }

.form-group .control-label {
  /* Styles here */
  font-size: 13px;
  font-weight: 600; }

input[type=radio] {
  margin-top: 2px; }

.form-control[disabled],
fieldset[disabled] .form-control {
  cursor: auto; }

/* ==========================================================================
   Listview

   Default Mendix Listview Widget. The list view shows a list of objects arranged vertically. Each object is shown using a template
========================================================================== */
.mx-listview {
  /* Styles here */ }
  .mx-listview .mx-button.mx-listview-clear-button {
    /* Styles here */ }
  .mx-listview > .mx-button {
    /* Load more button */ }
  .mx-listview .mx-listview-item {
    /* Styles here */ }
    .mx-listview .mx-listview-item:hover {
      /* Styles here */ }
    .mx-listview .mx-listview-item.selected {
      /* Styles here */ }
      .mx-listview .mx-listview-item.selected:hover {
        /* Styles here */ }
    .mx-listview .mx-listview-item:nth-child(2n+1) {
      /* Styles here */ }

/* ==========================================================================
   Modals

   Default Mendix Modals. Modals are streamlined, but flexible, dialog prompts with the minimum required functionality and smart defaults
========================================================================== */
.modal-dialog {
  /* Styles here */ }
  .modal-dialog .modal-content {
    /* Styles here */ }
    .modal-dialog .modal-content .modal-header {
      /* Styles here */ }
      .modal-dialog .modal-content .modal-header h4 {
        /* Styles here */ }
      .modal-dialog .modal-content .modal-header .close {
        /* Styles here */ }
    .modal-dialog .modal-content .modal-body {
      /* Styles here */ }
    .modal-dialog .modal-content .modal-footer {
      /* Styles here */ }
      .modal-dialog .modal-content .modal-footer button {
        min-width: 10rem; }

/* Default Mendix Window Modal */
/* Default Mendix Login Modal */
.mx-login {
  /* Styles here */ }
  .mx-login .modal-body {
    /* Styles here */ }
  .mx-login .modal-content {
    /* Styles here */ }
  .mx-login .modal-header,
  .mx-login .modal-footer {
    /* Styles here */ }
  .mx-login button {
    /* Styles here */ }
  .mx-login h4 {
    /* Styles here */ }

/* ==========================================================================
   Navigation

   Default Mendix Navigation Bar
========================================================================== */
.mx-navbar {
  /* Styles here */ }
  .mx-navbar ul.nav {
    /* Styles here */ }
    .mx-navbar ul.nav > li.mx-navbar-item > a {
      /* Styles here */ }
      .mx-navbar ul.nav > li.mx-navbar-item > a:hover, .mx-navbar ul.nav > li.mx-navbar-item > a:focus, .mx-navbar ul.nav > li.mx-navbar-item > a.active {
        /* Styles here */ }
      .mx-navbar ul.nav > li.mx-navbar-item > a.active {
        /* Styles here */ }
      .mx-navbar ul.nav > li.mx-navbar-item > a .mx-navbar-submenu:before {
        /* Dropdown Menu */ }
    .mx-navbar ul.nav > .mx-navbar-item > a:hover,
    .mx-navbar ul.nav > .mx-navbar-item > a:focus,
    .mx-navbar ul.nav > .mx-navbar-item.active a,
    .mx-navbar ul.nav > .mx-navbar-item.open > a,
    .mx-navbar ul.nav > .mx-navbar-item.open > a:hover,
    .mx-navbar ul.nav > .mx-navbar-item.open > a:focus {
      /* When hovering or the dropdown is open */ }
    .mx-navbar ul.nav > .mx-navbar-item.open .dropdown-menu > li.mx-navbar-subitem.active a {
      /* Styles here */ }

/* ==========================================================================
   Navigation

   Default Mendix Navigation Tree
========================================================================== */
.mx-navigationtree {
  /* Styles here */ }
  .mx-navigationtree .navbar-inner ul {
    /* Styles here */ }
    .mx-navigationtree .navbar-inner ul li {
      /* Styles here */ }
      .mx-navigationtree .navbar-inner ul li a {
        /* Styles here */ }
      .mx-navigationtree .navbar-inner ul li a:hover,
      .mx-navigationtree .navbar-inner ul li a:focus,
      .mx-navigationtree .navbar-inner ul li a.active {
        /* Styles here */ }
      .mx-navigationtree .navbar-inner ul li a.active {
        /* Styles here */ }
  .mx-navigationtree li.mx-navigationtree-has-items {
    /* Styles here */ }

/* ==========================================================================
   Navigation

   Default Mendix Simple Menu Bar
========================================================================== */
.mx-menubar {
  /* Styles here */ }
  .mx-menubar ul.mx-menubar-list {
    /* Styles here */ }
    .mx-menubar ul.mx-menubar-list li.mx-menubar-item {
      /* Styles here */ }
      .mx-menubar ul.mx-menubar-list li.mx-menubar-item a {
        /* Styles here */ }
      .mx-menubar ul.mx-menubar-list li.mx-menubar-item:hover a, .mx-menubar ul.mx-menubar-list li.mx-menubar-item:focus a, .mx-menubar ul.mx-menubar-list li.mx-menubar-item.active a {
        /* Styles here */ }
      .mx-menubar ul.mx-menubar-list li.mx-menubar-item.active a {
        /* Styles here */ }

/* ==========================================================================
   Navigation List

   Default Mendix Navigation List Widget. A navigation list can be used to attach an action to an entire row. Such a row is called a navigation list item
========================================================================== */
.mx-navigationlist {
  /* Styles here */ }
  .mx-navigationlist .mx-navigationlist-item {
    /* Styles here */ }
    .mx-navigationlist .mx-navigationlist-item:hover {
      /* Styles here */ }

/* ==========================================================================
   Tab Container

   Default Mendix Tab Container Widget. Tab containers are used to show information categorized into multiple tab pages. 
   This can be very useful if the amount of information that has to be displayed is larger than the amount of space on the screen
========================================================================== */
.mx-tabcontainer {
  /* Styles here */ }
  .mx-tabcontainer .mx-tabcontainer-tabs {
    /* Styles here */
    border-bottom: 2px solid #dfe4ed;
    margin-bottom: 0; }
    .mx-tabcontainer .mx-tabcontainer-tabs > li {
      margin-bottom: -2px; }
    .mx-tabcontainer .mx-tabcontainer-tabs > li > a {
      /* Styles here */
      padding: 1rem 0;
      margin-right: 1rem;
      border-top: transparent;
      border-left: transparent;
      border-right: transparent;
      border-bottom: 2px solid transparent;
      color: #747577;
      font-weight: 600; }
      .mx-tabcontainer .mx-tabcontainer-tabs > li > a:hover, .mx-tabcontainer .mx-tabcontainer-tabs > li > a:focus {
        /* Styles here */
        background-color: transparent;
        border-top: transparent;
        border-left: transparent;
        border-right: transparent;
        border-bottom: 2px solid #DD191D;
        color: #000;
        outline: 0; }
      .mx-tabcontainer .mx-tabcontainer-tabs > li > a:before {
        content: "• ";
        font-size: 20px;
        vertical-align: middle; }
    .mx-tabcontainer .mx-tabcontainer-tabs > li.active > a,
    .mx-tabcontainer .mx-tabcontainer-tabs > li.active > a:hover,
    .mx-tabcontainer .mx-tabcontainer-tabs > li.active > a:focus {
      /* Styles here */
      background-color: transparent;
      border-top: transparent;
      border-left: transparent;
      border-right: transparent;
      border-bottom: 2px solid #DD191D;
      color: #000; }
    .mx-tabcontainer .mx-tabcontainer-tabs > li.active a:before {
      color: #DD191D; }
  .mx-tabcontainer .mx-tabcontainer-content {
    /* Styles here */
    background: #fff;
    border: solid 1px #dfe4ed;
    border-top: transparent;
    border-radius: 0 0 4px 4px;
    padding: 15px; }

.mx-grid, .mx-tabcontainer, .mx-listview, .mx-templategrid, .mx-groupbox {
  margin-bottom: initial; }

/* ==========================================================================
   Tabcontainer

   Default Mendix Tabcontainer for Mobile 
========================================================================== */
.profile-phone .mx-tabcontainer .mx-listview .mx-listview-searchbar {
  padding-top: 0; }
.profile-phone .mx-tabcontainer .mx-listview .mx-listview-searchbar {
  padding-top: 0; }
.profile-phone .mx-tabcontainer .mx-tabcontainer-tabs {
  margin: 0; }

/* ==========================================================================
   Tables

   Default Mendix Table Widget. Tables can be used to lend structure to a page. They contain a number of rows (tr) and columns, the intersection of which is called a cell (td). Each cell can contain widgets
========================================================================== */
table.mx-table {
  /* Styles here */ }
  table.mx-table > tbody > tr {
    /* Styles here */ }
    table.mx-table > tbody > tr > th {
      /* Styles here */ }
      table.mx-table > tbody > tr > th > label {
        /* Styles here */ }
    table.mx-table > tbody > tr > td {
      /* Styles here */ }

/* ==========================================================================
   Templategrid

   Default Mendix Templategrid Widget. The template grid shows a list of objects in a tile view. For example, a template grid can show a list of products. The template grid has a lot in common with the data grid. The main difference is that the objects are shown in templates (a sort of small data view) instead of rows
========================================================================== */
.mx-templategrid {
  /* Styles here */ }
  .mx-templategrid .mx-templategrid-item {
    border: none;
    vertical-align: top;
    /* Styles here */ }
    .mx-templategrid .mx-templategrid-item:hover {
      /* Styles here */ }
    .mx-templategrid .mx-templategrid-item.selected {
      /* Styles here */ }
      .mx-templategrid .mx-templategrid-item.selected:hover {
        /* Styles here */ }

/* ==========================================================================
   Typography
========================================================================== */
p {
  /* Styles here */ }

label {
  /* Styles here */ }

.mx-title {
  /* Styles here */ }

h1, h2, h3, h4, h5, h6,
.h1, .h2, .h3, .h4, .h5, .h6 {
  /* Styles here */ }

/* ==========================================================================
   Regions

   Used for navigation layouts
========================================================================== */
.region-topbar {
  /* Styles here */ }
  .region-topbar > .mx-layoutcontainer-wrapper {
    /* Styles here */ }
  .region-topbar .toggle-btn {
    /* Styles here */ }
  .region-topbar .navbar-right {
    /* SSO widgets */ }
    .region-topbar .navbar-right .mx-appswitcher-button-placeholder,
    .region-topbar .navbar-right .mx-profilemenu-button-placeholder {
      /* Styles here */ }
      .region-topbar .navbar-right .mx-appswitcher-button-placeholder iframe,
      .region-topbar .navbar-right .mx-profilemenu-button-placeholder iframe {
        /* Styles here */ }
    .region-topbar .navbar-right .mx-profilemenu-button-placeholder {
      /* Styles here */ }

.region-sidebar {
  /* Styles here */ }
  .region-sidebar > .mx-layoutcontainer-wrapper {
    /* Styles here */ }

.region-content {
  /* Styles here */ }
  .region-content > .mx-layoutcontainer-wrapper {
    /* Styles here */ }

/* ==========================================================================
   Navbar Brand

   Used to style your app brand and logo
========================================================================== */
.navbar-brand {
  /* Styles here */ }
  .navbar-brand img {
    /* Styles here */ }
  .navbar-brand a {
    /* Styles here */ }
    .navbar-brand a:hover, .navbar-brand a:focus {
      /* Styles here */ }

/* Mixin { */
/* } Mixin */
/* Flexbox Mixin { */
/* } Flexbox Mixin */
/* Layout { */
/* Topbar { */
.top-menu {
  height: 50px;
  background: #FFF;
  border-bottom: 1px solid #dfe4ed;
  z-index: 110;
  display: -webkit-box;
  display: -moz-box;
  display: -ms-flexbox;
  display: -webkit-flex;
  display: flex;
  flex-direction: row;
  flex-wrap: nowrap;
  justify-content: space-between; }
  .top-menu > div {
    display: -webkit-box;
    display: -moz-box;
    display: -ms-flexbox;
    display: -webkit-flex;
    display: flex; }
  .top-menu button, .top-menu .toggle-btn {
    background-color: #FFF;
    border-color: #FFF;
    border-radius: 0;
    color: #827ca1;
    font-size: 15px;
    outline: 0;
    padding: 0 20px;
    box-shadow: none; }
    .top-menu button span, .top-menu .toggle-btn span {
      -webkit-transition: all 0.1s ease-in-out;
      -o-transition: all 0.1s ease-in-out;
      transition: all 0.1s ease-in-out; }
    .top-menu button:hover, .top-menu button:focus, .top-menu .toggle-btn:hover, .top-menu .toggle-btn:focus {
      background-color: #f2f4f8;
      border-color: #f2f4f8;
      box-shadow: none;
      color: #24222f;
      outline: 0; }
      .top-menu button:hover span, .top-menu button:focus span, .top-menu .toggle-btn:hover span, .top-menu .toggle-btn:focus span {
        -ms-transform: rotate(360deg);
        -webkit-transform: rotate(360deg);
        transform: rotate(360deg); }
  .top-menu .logout-btn {
    background-color: #FFF;
    border-color: #FFF;
    border-radius: 0;
    color: #827ca1;
    font-size: 15px;
    outline: 0;
    padding: 0 20px;
    box-shadow: none; }
    .top-menu .logout-btn span {
      -webkit-transition: all 0.1s ease-in-out;
      -o-transition: all 0.1s ease-in-out;
      transition: all 0.1s ease-in-out; }
    .top-menu .logout-btn:hover, .top-menu .logout-btn:focus {
      background-color: #fb434a;
      border-color: #fb434a;
      box-shadow: none;
      color: #FFF;
      outline: 0; }
      .top-menu .logout-btn:hover span, .top-menu .logout-btn:focus span {
        -ms-transform: scale(1);
        -webkit-transform: scale(1);
        transform: scale(1); }

/* } Topbar*/
/* Sidebar { */
.mx-scrollcontainer-toggleable {
  -webkit-box-shadow: 0px 0px 25px rgba(36, 34, 47, 0.3);
  box-shadow: 0px 0px 25px rgba(36, 34, 47, 0.3);
  outline: none; }
  .mx-scrollcontainer-toggleable .mx-layoutcontainer-wrapper {
    display: -webkit-box;
    display: -moz-box;
    display: -ms-flexbox;
    display: -webkit-flex;
    display: flex;
    flex-direction: column; }
    .mx-scrollcontainer-toggleable .mx-layoutcontainer-wrapper > div:not(:first-child) {
      -webkit-box-flex: 1;
      -moz-box-flex: 1;
      -webkit-flex: 1;
      -ms-flex: 1;
      flex: 1; }
  .mx-scrollcontainer-toggleable .logo-container {
    display: flex;
    flex-direction: row;
    justify-content: flex-start;
    align-items: center;
    border-bottom: 1px solid #dfe4ed;
    height: 50px;
    padding-left: 0; }
    .mx-scrollcontainer-toggleable .logo-container img {
      display: block;
      height: 80%;
      width: auto;
      margin-left: 20px; }
  .mx-scrollcontainer-toggleable .mx-navigationtree {
    background-color: #222A4E;
            /*
            background-color:   $sidebar-bg;
            .navbar-inner {
                & > ul {
                    & > li {
                        position: relative;
                        & > a {
                            background-color:       $sidebar-bg;
                            border:                 none;
                            color:                  $sidebar-menu-link-color;
                            font-size:              $sidebar-menu-font-size;
                            font-weight:            $sidebar-menu-font-weight;
                            outline:                0;
                            padding:                $sidebar-menu-link-padding;
                            webkit-transition:      all 0.1s ease-in-out;
                            -o-transition:          all 0.1s ease-in-out;
                            transition:             all 0.1s ease-in-out;
                            &::before {
                                webkit-transition:  all 0.1s ease-in-out;
                                -o-transition:      all 0.1s ease-in-out;
                                transition:         all 0.1s ease-in-out;
                            }
                            &::after {
                                -webkit-transition: all 0.1s ease-in-out;
                                -o-transition:      all 0.1s ease-in-out;
                                transition:         all 0.1s ease-in-out;
                                display:            none;
                                content:            '';
                                width:              0px;
                                height:             0px;
                                border-width:       5px 0px 5px 5px;
                                border-color:       transparent transparent transparent #d2d9e5;
                                border-style:       solid;
                                position:           absolute;
                                top:                $sidebar-menu-link-caret-position-y;
                                right:              20px;
                            }
                            &.active ,
                            &:hover {
                                background-color:   $sidebar-menu-link-bgcolor-hover;
                                color:              $sidebar-menu-link-color-hover;
                                &::before {
                                    @include sidebar-menu-frontbar();
                                    background-color: $brand-primary;
                                }
                            }
                            .glyphicon {
                                font-size:      $sidebar-menu-font-size+1;
                                letter-spacing: 10px;
                            }
                            .caret {
                                display:        none;
                            }
                        }
                        &.mx-navigationtree-has-items {
                            & > a {
                                background-color:   $sidebar-menu-link-bgcolor-hover;
                                color:              $sidebar-menu-link-color-hover;
                                font-size:          $sidebar-menu-font-size;
                                &::before {
                                    @include sidebar-menu-frontbar();
                                    background-color: $brand-success;
                                }
                                &::after {
                                    display:        block;
                                    border-color:   transparent transparent transparent $sidebar-menu-link-caret-active-color;
                                    transform:      rotate(90deg);
                                }
                            }
                            & > ul {
                                background-color:   $sidebar-menu-link-bgcolor-hover;
                                li {
                                    a {
                                        background-color:   $sidebar-menu-link-bgcolor-hover;
                                        font-size:          $sidebar-menu-font-size;
                                        padding:            $sidebar-menu-link-padding;
                                        &::before {
                                            @include sidebar-menu-frontbar();
                                            background-color: $brand-success;
                                        }
                                        &.active ,
                                        &:hover {
                                            color:          $sidebar-menu-link-color-hover;
                                            font-weight:    $sidebar-menu-font-weight;
                                        }
                                    }
                                }
                            }
                        }
                        &.mx-navigationtree-collapsed {
                            & > a {
                                background-color:   $sidebar-bg;
                                color:              $sidebar-menu-link-color;
                                outline:            0;
                                padding:            $sidebar-menu-link-padding;
                                &::before {
                                    @extend .sidebar-menu-frontbar;
                                    background-color: transparent;
                                }
                                &::after {
                                    display:        block;
                                    border-color:   transparent transparent transparent $sidebar-menu-link-caret-color;
                                    transform:      rotate(0);
                                }
                                &.active ,
                                &:hover {
                                    background-color:   $sidebar-menu-link-bgcolor-hover;
                                    color:              $sidebar-menu-link-color-hover;
                                    &::before {
                                        @extend .sidebar-menu-frontbar;
                                        background-color: $brand-primary;
                                    }
                                }
                            }
                        }
//                        margin-top: 1px;
                        &:not(:first-child) {
                            margin-top: 1px;
                        }
                    }
                }
            }
            */ }
    .mx-scrollcontainer-toggleable .mx-navigationtree .navbar-inner > ul > li {
      position: relative; }
      .mx-scrollcontainer-toggleable .mx-navigationtree .navbar-inner > ul > li > a {
        background-color: inherit;
        border: none;
        color: #D8D6D7;
        font-size: 14px;
        font-weight: 600;
        outline: 0;
        padding: 10px 15px 10px 40px; }
        .mx-scrollcontainer-toggleable .mx-navigationtree .navbar-inner > ul > li > a .glyphicon {
          font-size: 15px;
          position: absolute;
          left: 15px;
          top: 13px; }
        .mx-scrollcontainer-toggleable .mx-navigationtree .navbar-inner > ul > li > a .caret {
          display: none; }
      .mx-scrollcontainer-toggleable .mx-navigationtree .navbar-inner > ul > li.mx-navigationtree-has-items > a {
        background-color: #2d3657;
        border-top: solid 1px #666;
        border-bottom: solid 1px #666; }
        .mx-scrollcontainer-toggleable .mx-navigationtree .navbar-inner > ul > li.mx-navigationtree-has-items > a::after {
          -webkit-transition: all 0.1s ease-in-out;
          -o-transition: all 0.1s ease-in-out;
          transition: all 0.1s ease-in-out;
          content: '';
          width: 0px;
          height: 0px;
          border-width: 5px 0px 5px 5px;
          border-color: transparent transparent transparent #d2d9e5;
          border-style: solid;
          position: absolute;
          top: 15px;
          right: 20px;
          transform: rotate(90deg); }
      .mx-scrollcontainer-toggleable .mx-navigationtree .navbar-inner > ul > li.mx-navigationtree-collapsed > a {
        background-color: inherit;
        color: #D8D6D7;
        border-bottom: transparent; }
        .mx-scrollcontainer-toggleable .mx-navigationtree .navbar-inner > ul > li.mx-navigationtree-collapsed > a::after {
          transform: rotate(0); }
      .mx-scrollcontainer-toggleable .mx-navigationtree .navbar-inner > ul > li ul {
        background-color: transparent; }
        .mx-scrollcontainer-toggleable .mx-navigationtree .navbar-inner > ul > li ul li a {
          background-color: transparent;
          font-size: 14px;
          padding: 7px 15px 7px 40px; }

/* } Sidebar */
/* Content { */
.mx-scrollcontainer-center {
  background-color: rgba(239, 239, 239, 0.5); }

/* } Content */
/* } Layout */
/* Button & Link { */
a, button {
  outline: 0; }
  a:hover, a:focus, button:hover, button:focus {
    outline: 0; }

/* } Button */
/* Text { */
h1, h2, h3, h4 {
  margin: 0 0 15px 0;
  padding: 5px 0; }

h1.mx-title {
  background-color: #135592;
  color: #fff;
  font-size: 24px;
  font-weight: 600;
  padding: 15px 30px; }

h2 {
  font-size: 22px; }

h3 {
  border-bottom: solid 1px #dfe4ed; }

.wells {
  display: block;
  padding: 1rem;
  background-color: rgba(221, 221, 221, 0.25);
  border: solid 1px #ddd;
  border-radius: 2px;
  margin: 1rem 0; }

.text-left {
  text-align: left; }

.text-center {
  text-align: center; }

.text-right {
  text-align: right; }

/* } Text */
/* Form { */
.form-control {
  display: block;
  width: 100%;
  padding: 7px 5px;
  font-size: 13px;
  line-height: 1.5;
  color: #55595c;
  background-color: #fff;
  background-image: none;
  border: 1px solid #dfe4ed;
  border-radius: 2px; }
  .form-control:focus {
    border-color: #01a8fe;
    background-color: #FFF;
    box-shadow: none;
    outline: 0; }

/* } Form */
/* Table { */
td {
  outline: 0 !important; }

/* } Table */
/* Thumbnail { */
.thumbnail {
  animation-name: fadeIn;
  animation-duration: 1s;
  opacity: 1; }
  .thumbnail.center {
    margin: auto; }
  .thumbnail.right {
    float: right; }
  .thumbnail.gallery {
    height: 190px; }

@media (min-width: 500px) {
  .thumbnail.right {
    float: none;
    margin: auto; } }
@-webkit-keyframes fadeIn {
  0% {
    opacity: 0; }
  100% {
    opacity: 1; } }
@keyframes fadeIn {
  0% {
    opacity: 0; }
  100% {
    opacity: 1; } }
/* } Thumbnail */
/* File Input { */
.mx-fileinput {
  text-align: center; }
  .mx-fileinput .mx-wrapped-label {
    display: none; }
  .mx-fileinput .mx-wrapped-form button {
    display: block;
    padding: 7px 14px;
    margin: 10px 0;
    box-shadow: 0 2px 4px -2px rgba(55, 58, 60, 0.6);
    color: white;
    min-width: 100px;
    font-weight: 600;
    background-color: #01a8fe;
    border-color: #01a8fe; }
    .mx-fileinput .mx-wrapped-form button:hover, .mx-fileinput .mx-wrapped-form button:focus {
      display: none;
      background-color: #01a8fe;
      border-color: #01a8fe;
      opacity: 0.75; }

/* } File Input */
.profile-phone .actionblock[class*="fa-"]:before,
.profile-tablet .actionblock[class*="fa-"]:before {
  font: normal normal normal 14px/1 FontAwesome;
  display: block;
  margin: auto auto 20px auto;
  font-size: 72px; }
.profile-phone .region-topbar,
.profile-tablet .region-topbar {
  min-height: initial !important;
  background-color: #135592;
  border: none;
  box-shadow: 0px 2px 2px #999;
  z-index: 999;
  position: relative; }
  .profile-phone .region-topbar .mx-link, .profile-phone .region-topbar button,
  .profile-tablet .region-topbar .mx-link,
  .profile-tablet .region-topbar button {
    outline: 0;
    padding: 0 15px;
    min-width: 50px; }
    .profile-phone .region-topbar .mx-link:hover, .profile-phone .region-topbar .mx-link:focus, .profile-phone .region-topbar .mx-link:active, .profile-phone .region-topbar button:hover, .profile-phone .region-topbar button:focus, .profile-phone .region-topbar button:active,
    .profile-tablet .region-topbar .mx-link:hover,
    .profile-tablet .region-topbar .mx-link:focus,
    .profile-tablet .region-topbar .mx-link:active,
    .profile-tablet .region-topbar button:hover,
    .profile-tablet .region-topbar button:focus,
    .profile-tablet .region-topbar button:active {
      outline: 0; }
    .profile-phone .region-topbar .mx-link.text-left, .profile-phone .region-topbar button.text-left,
    .profile-tablet .region-topbar .mx-link.text-left,
    .profile-tablet .region-topbar button.text-left {
      display: flex;
      flex-direction: row-reverse; }
      .profile-phone .region-topbar .mx-link.text-left .glyphicon, .profile-phone .region-topbar button.text-left .glyphicon,
      .profile-tablet .region-topbar .mx-link.text-left .glyphicon,
      .profile-tablet .region-topbar button.text-left .glyphicon {
        margin-left: 5px;
        margin-top: 1px; }
  .profile-phone .region-topbar table tr,
  .profile-tablet .region-topbar table tr {
    display: -webkit-box;
    display: -moz-box;
    display: -ms-flexbox;
    display: -webkit-flex;
    display: flex; }
    .profile-phone .region-topbar table tr td,
    .profile-tablet .region-topbar table tr td {
      display: -webkit-box;
      display: -moz-box;
      display: -ms-flexbox;
      display: -webkit-flex;
      display: flex;
      align-items: center;
      height: 50px;
      padding: 0; }
      .profile-phone .region-topbar table tr td:nth-child(2),
      .profile-tablet .region-topbar table tr td:nth-child(2) {
        flex-grow: 1; }
  .profile-phone .region-topbar h1,
  .profile-tablet .region-topbar h1 {
    color: #fff;
    font-size: 18px;
    font-weight: 600;
    line-height: initial;
    padding: 0;
    overflow: hidden;
    text-overflow: ellipsis; }
  .profile-phone .region-topbar button,
  .profile-tablet .region-topbar button {
    background: transparent;
    border: none;
    border-radius: 0;
    box-shadow: none;
    color: #fff;
    margin: 0;
    opacity: 1;
    outline: 0;
    -webkit-transition: all 0.1s ease-in-out;
    -o-transition: all 0.1s ease-in-out;
    transition: all 0.1s ease-in-out; }
    .profile-phone .region-topbar button:hover, .profile-phone .region-topbar button:focus, .profile-phone .region-topbar button:active,
    .profile-tablet .region-topbar button:hover,
    .profile-tablet .region-topbar button:focus,
    .profile-tablet .region-topbar button:active {
      opacity: 1;
      outline: 0;
      color: #fff; }
    .profile-phone .region-topbar button.mx-sidebartoggle,
    .profile-tablet .region-topbar button.mx-sidebartoggle {
      font-size: 18px;
      padding: 16px; }
  .profile-phone .region-topbar .mx-placeholder,
  .profile-tablet .region-topbar .mx-placeholder {
    display: -webkit-box;
    display: -moz-box;
    display: -ms-flexbox;
    display: -webkit-flex;
    display: flex;
    height: 100%; }
.profile-phone .region-sidebar,
.profile-tablet .region-sidebar {
  background-color: #3D3F41;
  box-shadow: 2px 0 2px #999; }
  .profile-phone .region-sidebar .sidebarheader,
  .profile-tablet .region-sidebar .sidebarheader {
    background-image: url(https://image.freepik.com/free-vector/3d-cubes-shapes_1017-95.jpg);
    border-bottom: 1px solid #e0e0e0; }
    .profile-phone .region-sidebar .sidebarheader img,
    .profile-tablet .region-sidebar .sidebarheader img {
      margin-top: 15px; }
    .profile-phone .region-sidebar .sidebarheader .sidebarheader-title,
    .profile-tablet .region-sidebar .sidebarheader .sidebarheader-title {
      color: #000;
      margin-top: 15px; }
  .profile-phone .region-sidebar .mx-navigationtree,
  .profile-tablet .region-sidebar .mx-navigationtree {
    background-color: transparent; }
    .profile-phone .region-sidebar .mx-navigationtree .navbar-inner > ul > li > a.active,
    .profile-tablet .region-sidebar .mx-navigationtree .navbar-inner > ul > li > a.active {
      background-color: #fff;
      color: #000; }
.profile-phone .mx-listview .mx-listview-searchbar,
.profile-tablet .mx-listview .mx-listview-searchbar {
  padding: 10px 50px 10px 15px; }
  .profile-phone .mx-listview .mx-listview-searchbar .mx-listview-clear-button,
  .profile-tablet .mx-listview .mx-listview-searchbar .mx-listview-clear-button {
    margin: 0;
    outline: 0;
    right: 0;
    width: 50px;
    /*test*/
    font-size: 14px;
    /*test*/ }
    .profile-phone .mx-listview .mx-listview-searchbar .mx-listview-clear-button .glyphicon-refresh:before,
    .profile-tablet .mx-listview .mx-listview-searchbar .mx-listview-clear-button .glyphicon-refresh:before {
      content: "\e003";
      font-size: 14px; }
  .profile-phone .mx-listview .mx-listview-searchbar input,
  .profile-tablet .mx-listview .mx-listview-searchbar input {
    font-size: 15px; }
.profile-phone .mx-listview .mx-listview-empty,
.profile-tablet .mx-listview .mx-listview-empty {
  background-color: transparent;
  border-bottom: none;
  padding: 15px;
  border-radius: 0; }
.profile-phone .mx-tabcontainer .mx-tabcontainer-tabs > li > a,
.profile-tablet .mx-tabcontainer .mx-tabcontainer-tabs > li > a {
  padding: 15px;
  margin-right: 0; }
.profile-phone .control-label,
.profile-tablet .control-label {
  margin: 0; }
.profile-phone img,
.profile-tablet img {
  margin: auto; }
.profile-phone input[type=radio],
.profile-tablet input[type=radio] {
  margin-top: 3px; }
.profile-phone input[type=checkbox]:after,
.profile-tablet input[type=checkbox]:after {
  line-height: 1.0em;
  content: '';
  display: inline-block;
  width: 17px;
  height: 18px;
  border: solid 1px #bfbfbf;
  background: #f7f7f7;
  border-radius: 2px; }
.profile-phone input[type=checkbox]:checked:after,
.profile-tablet input[type=checkbox]:checked:after {
  content: '✔';
  text-align: center;
  color: #135592;
  font-size: 16px;
  border: solid 1px #135592;
  font-weight: normal; }
.profile-phone .form-group:last-child,
.profile-tablet .form-group:last-child {
  margin-bottom: 5px; }
.profile-phone .mx-groupbox > .mx-groupbox-header,
.profile-tablet .mx-groupbox > .mx-groupbox-header {
  padding: 10px; }
.profile-phone .mx-groupbox > .mx-groupbox-body,
.profile-tablet .mx-groupbox > .mx-groupbox-body {
  border: none;
  /*test*/
  padding-bottom: 50px;
  /*test*/ }

.modal-dialog .modal-header {
  padding: 15px 20px; }
  .modal-dialog .modal-header h4 {
    padding: 0; }
  .modal-dialog .modal-header .close {
    margin-top: 0px !important; }
.modal-dialog .mx-listview-searchbar input {
  padding: 10px; }
.modal-dialog .mx-listview-searchbar button {
  height: 100%; }
.modal-dialog .mx-list {
  margin-top: 15px; }
  .modal-dialog .mx-list .mx-listview-item {
    padding: 9px 0 5px; }
    .modal-dialog .mx-list .mx-listview-item .mx-listview-selection {
      padding: 4px 15px 0 5px; }
    .modal-dialog .mx-list .mx-listview-item.selected, .modal-dialog .mx-list .mx-listview-item.selected:hover {
      background-color: #d7ecf3 !important; }
  .modal-dialog .mx-list .mx-listview-empty {
    background-color: transparent;
    border-radius: 0;
    padding: 10px; }
.modal-dialog .btn-block {
  margin-top: 15px;
  padding: 12px 15px; }

/* ==========================================================================
   Layout

   Default Mendix Layout
========================================================================== */
.profile-phone .mx-layoutcontainer-wrapper button,
.profile-tablet .mx-layoutcontainer-wrapper button {
  font-size: 20px; }

/* ==========================================================================
   Listview for phone and tablet
========================================================================== */
.profile-phone,
.profile-tablet {
  /* Listview Load More button */ }
  .profile-phone .mx-listview .mx-listview-searchbar,
  .profile-tablet .mx-listview .mx-listview-searchbar {
    /* Reset Search Button - default hidden */
    /* Search Field */ }

/* ==========================================================================
   Header

   Default Mendix Header for Mobile 
========================================================================== */
/* ==========================================================================
   Tabcontainer

   Default Mendix Tabcontainer for Mobile 
========================================================================== */
/* ==========================================================================
   Special styles for presenting Page Template Dashboard
========================================================================== */
.page-dashboard {
  /* Styles here */ }

.page-dashboard-default {
  /* Styles here */ }
  .page-dashboard-default .card {
    /* Styles here */ }

.page-dashboard-mytasks {
  /* Styles here */ }
  .page-dashboard-mytasks .card {
    /* Styles here */ }

.page-dashboard-actions {
  /* Styles here */ }

.page-dashboard-actions-tasks {
  /* Styles here */ }

/* ==========================================================================
   Special styles for presenting Page Template Form
========================================================================== */
.page-form {
  /* Styles here */ }

.page-form-default {
  /* Styles here */ }

.page-form-imagemap {
  /* Styles here */ }

.page-form-tabs {
  /* Styles here */ }

/* ==========================================================================
   Special styles for presenting Page Template Login
========================================================================== */
/* ==========================================================================
   Special styles for presenting Page Template Master Detail
========================================================================== */
.page-masterdetail {
  /* Styles here */ }

.page-masterdetail-basic {
  /* Styles here */ }

.page-masterdetail-big {
  /* Styles here */ }

.page-masterdetail-imagemap {
  /* Styles here */ }

.page-masterdetail-multilevel {
  /* Styles here */ }

/* ==========================================================================
   Special styles for presenting Page Template Tabs
========================================================================== */
.page-tabs {
  /* Styles here */ }
  .page-tabs .tabsfullwidth {
    /* Styles here */ }

.page-tabs-default {
  /* Styles here */ }

.page-tabs-fullwidth {
  /* Styles here */ }
  .page-tabs-fullwidth .pageheader.pageheader-fullwidth {
    /* Styles here */ }

/* ==========================================================================
   Special styles for presenting Page Template Website
========================================================================== */
.page-website {
  /* Styles here */ }

.page-website-actions {
  /* Styles here */ }

.page-website-items {
  /* Styles here */ }

.page-website-items-detail {
  /* Styles here */ }

.page-website-presentation {
  /* Styles here */ }

/* ==========================================================================
   Special styles for presenting Page Template Wizard
========================================================================== */
.page-wizard {
  /* Styles here */ }

.page-wizard-default {
  /* Styles here */ }

.page-wizard-titlecentered {
  /* Styles here */ }

/* ==========================================================================
   Special styles for presenting Page Template Phone
========================================================================== */
.phone-page-dashboard {
  /* Styles here */ }

.phone-page-dashboard-default {
  /* Styles here */ }

/* ==========================================================================
   Special styles for presenting Page Template Phone Form
========================================================================== */
.phone-page-form {
  /* Styles here */ }

.phone-page-form-default {
  /* Styles here */ }

.phone-page-form-edit {
  /* Styles here */ }

/* ==========================================================================
   Special styles for presenting Page Template Phone Listview
========================================================================== */
.phone-page-listview {
  /* Styles here */ }

.phone-page-listview-default {
  /* Styles here */ }

/* ==========================================================================
   Special styles for presenting Page Template Phone Wizard
========================================================================== */
.phone-page-wizard {
  /* Styles here */ }

.phone-page-wizard-default {
  /* Styles here */ }

/* ==========================================================================
   Special styles for presenting Page Template Tablet Dashboard
========================================================================== */
.tablet-page-dashboard {
  /* Styles here */ }

.tablet-page-dashboard-default {
  /* Styles here */ }

.tablet-page-dashboard-big {
  /* Styles here */ }

.tablet-page-dashboard-mytasks {
  /* Styles here */ }

/* ==========================================================================
   Special styles for presenting Page Template Tablet Form
========================================================================== */
.tablet-page-form {
  /* Styles here */ }

.tablet-page-form-default {
  /* Styles here */ }

.tablet-page-form-edit {
  /* Styles here */ }

/* ==========================================================================
   Special styles for presenting Page Template Tablet Master Detail
========================================================================== */
.tablet-page-masterdetail {
  /* Styles here */ }

.tablet-page-masterdetail-default {
  /* Styles here */ }

.tablet-page-masterdetail-leftright {
  /* Styles here */ }

/* ==========================================================================
   Special styles for presenting Page Template Tablet Wizard
========================================================================== */
.tablet-page-wizard {
  /* Styles here */ }

.tablet-page-wizard-default {
  /* Styles here */ }

/* ==========================================================================
   Card
========================================================================== */
.card {
  /* Styles here */ }

.card-header-action {
  /* Title + button + border below title and button */ }
  .card-header-action .card-title {
    /* Styles here */ }
  .card-header-action .btn {
    /* Styles here */ }

.card-details {
  /* Styles here */ }

.card-title {
  /* Styles here */ }

.card-subtitle {
  /* Styles here */ }

.card-annotation {
  /* Styles here */ }

.card-icon {
  /* Styles here */ }
  .card-icon .glyphicon {
    /* Styles here */ }

.card-image {
  /* Styles here */ }

.card-link {
  /* Styles here */ }

/* ==========================================================================
   Dashboard Card
========================================================================== */
.dashboardcard {
  /* Styles here */ }

.dashboardcard-title {
  /* Styles here */ }

.dashboardcard-subtitle {
  /* Styles here */ }

.dashboardcard-link {
  /* Styles here */ }

/* ==========================================================================
   Dashboard Stats

   Used in dashboard
========================================================================== */
.dashboardstat {
  /* Styles here */ }
  .dashboardstat .dashboardstat-left,
  .dashboardstat .dashboardstat-right {
    /* Styles here */ }

.dashboardstat-icon {
  /* Styles here */ }

.dashboardstat-title {
  /* Styles here */ }

.dashboardstat-number {
  /* Styles here */ }

/* ==========================================================================
   Form

   To extend the default form
========================================================================== */
.form {
  /* Styles here */ }

.form-footer {
  /* Styles here */ }

/* ==========================================================================
   Form Block

   Used in default forms
========================================================================== */
.formblock {
  /* Styles here */ }

.formblock-header {
  /* Styles here */ }

/* ==========================================================================
   Page Header
========================================================================== */
.pageheader {
  /* Styles here */ }

.pageheader.section {
  /* Styles here */ }

.pageheader-title {
  /* Styles here */ }

.pageheader-subtitle {
  /* Styles here */ }

/* ==========================================================================
   Section Header
========================================================================== */
/* ==========================================================================
   Profile Card
========================================================================== */
.profilecard {
  /* Styles here */ }
  .profilecard .profilecard-contentwrapper {
    /* Styles here */ }
  .profilecard .profilecard-imgwrapper {
    /* Styles here */ }
  .profilecard .profilecard-actionwrapper {
    /* Styles here */ }
  .profilecard .profilecard-contentwrapper,
  .profilecard .profilecard-imgwrapper,
  .profilecard .profilecard-actionwrapper {
    /* Styles here */ }

.profilecard-btn {
  /* Styles here */ }

.profilecard-img {
  /* Styles here */ }

.profilecard-title {
  /* Styles here */ }

.profilecard-subtitle {
  /* Styles here */ }

.pageheader .profilecard {
  /* Styles here */ }

/* ==========================================================================
   Profile Header
========================================================================== */
.profileheader {
  /* Styles here */ }
  .profileheader .profileheader-content {
    /* Styles here */ }
  .profileheader .profileheader-image {
    /* Styles here */ }

/* ==========================================================================
   Products

   Used in Website page templates
========================================================================== */
.product-header {
  /* Styles here */ }

.product-content {
  /* Styles here */ }

.product-title {
  /* Styles here */ }

.product-subtitle {
  /* Styles here */ }

.product-btn {
  /* Styles here */ }

.section {
  /* Styles here */ }

.profile-phone .section {
  /* Styles here */ }

.profile-tablet .section {
  /* Styles here */ }

/* ==========================================================================
   Sidebar Header
========================================================================== */
.sidebarheader {
  /* Styles here */ }

.sidebarheader-content {
  /* Styles here */ }

.sidebarheader-img {
  /* Styles here */ }

.sidebarheader-title {
  /* Styles here */ }

.sidebarheader-subtitle {
  /* Styles here */ }

/* ==========================================================================
   Tabs full width
========================================================================== */
.tabsfullwidth {
  /* Styles here */ }
  .tabsfullwidth > .mx-tabcontainer-tabs {
    /* Styles here */ }
  .tabsfullwidth > .mx-tabcontainer-content {
    /* Styles here */ }

/* ==========================================================================
   Wizard

   Styling for Wizard (Steps/Numbers)
========================================================================== */
.wizard {
  /* Wizard line between steps */ }
  .wizard:before {
    /* Styles here */ }

.wizard-step {
  /* Styles here */ }

.wizard-step-number {
  /* Styles here */ }

.wizard-step-number-active {
  /* Styles here */ }

.wizard-step-number-visited {
  /* Styles here */ }

.wizard-step-title {
  /* Styles here */ }

/* Phone Specific Styling */
.profile-phone .wizard:before {
  /* Styles here */ }
.profile-phone .wizard .wizard-step-number {
  /* Styles here */ }

/* ==========================================================================
   Templategrid Profile Card

   Profile card styled for templategrid
========================================================================== */
.templategrid-profilecard {
  /* Styles here */ }
  .templategrid-profilecard .templategrid-profilecard-contentwrapper {
    /* Styles here */ }
  .templategrid-profilecard .templategrid-profilecard-imgwrapper {
    /* Styles here */ }
  .templategrid-profilecard .templategrid-profilecard-contentwrapper,
  .templategrid-profilecard .templategrid-profilecard-imgwrapper {
    /* Styles here */ }
  .templategrid-profilecard .templategrid-profilecard-btn {
    /* Styles here */ }
  .templategrid-profilecard .templategrid-profilecard-img {
    /* Styles here */ }
  .templategrid-profilecard .templategrid-profilecard-title {
    /* Styles here */ }
  .templategrid-profilecard .templategrid-profilecard-subtitle {
    /* Styles here */ }

body {
  overscroll-behavior-y: contain;
  font-family: 'IBM Plex Sans Thai', 'Open Sans', Arial, sans-serif;
  /* CUSTOM BY KREEM */ }

/* CUSTOM BY KREEM Add IBM Plex Sans Thai */
@font-face {
  font-family: 'IBM Plex Sans Thai';
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url(https://fonts.gstatic.com/s/ibmplexsansthai/v10/m8JPje1VVIzcq1HzJq2AEdo2Tj_qvLqMBNYgVcM.woff2) format("woff2");
  unicode-range: U+0460-052F, U+1C80-1C88, U+20B4, U+2DE0-2DFF, U+A640-A69F, U+FE2E-FE2F; }
/* thai */
@font-face {
  font-family: 'IBM Plex Sans Thai';
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url(https://fonts.gstatic.com/s/ibmplexsansthai/v10/m8JPje1VVIzcq1HzJq2AEdo2Tj_qvLqMHdYgVcM.woff2) format("woff2");
  unicode-range: U+0E01-0E5B, U+200C-200D, U+25CC; }
/* latin-ext */
@font-face {
  font-family: 'IBM Plex Sans Thai';
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url(https://fonts.gstatic.com/s/ibmplexsansthai/v10/m8JPje1VVIzcq1HzJq2AEdo2Tj_qvLqMB9YgVcM.woff2) format("woff2");
  unicode-range: U+0100-02AF, U+0304, U+0308, U+0329, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20CF, U+2113, U+2C60-2C7F, U+A720-A7FF; }
/* latin */
@font-face {
  font-family: 'IBM Plex Sans Thai';
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url(https://fonts.gstatic.com/s/ibmplexsansthai/v10/m8JPje1VVIzcq1HzJq2AEdo2Tj_qvLqMCdYg.woff2) format("woff2");
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+2074, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD; }
.flex-container {
  padding: 0;
  margin: 0;
  display: -webkit-box;
  display: -moz-box;
  display: -ms-flexbox;
  display: -webkit-flex;
  display: flex;
  -webkit-flex-flow: row wrap;
  justify-content: space-around; }

.flex-item {
  padding: 15px;
  width: 120px;
  height: 120px;
  margin-top: 20px;
  line-height: 150px; }

.optiontime button {
  padding: 0px;
  background: transparent;
  border-color: transparent;
  font-size: 30px;
  width: 40px;
  height: 40px;
  padding-left: 5px; }
.optiontime span.caret {
  visibility: hidden; }
.optiontime a {
  color: darkslategray; }

.iconhead {
  padding-top: 11px;
  font-size: 20px; }
  .iconhead span {
    color: white; }

@media (min-width: 300px) {
  .textlistview {
    width: 140px;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis; } }
@media (max-width: 400px) {
  .textlistview {
    min-width: 140px;
    max-width: 140px;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis; } }
@media (max-width: 768px) {
  .textlistview {
    min-width: 140px;
    max-width: 250px;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis; } }
@media (min-width: 768px) {
  .textlistview {
    width: 480px;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis; } }
@media (min-width: 992px) {
  .textlistview {
    width: 873px;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis; } }

@media (min-width: 300px) {
  .textlistviewEmpList {
    width: 240px !important;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis; } }
@media (min-width: 400px) {
  .textlistviewEmpList {
    width: 300px !important;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis; } }
@media (min-width: 768px) {
  .textlistviewEmpList {
    min-width: 500px !important;
    max-width: 610px !important;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis; } }
@media (min-width: 992px) {
  .textlistviewEmpList {
    width: 873px;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis; } }

.verticaldotright {
  margin-right: 10px;
  padding-right: 6px;
  padding-left: 6px; }

.greenstatus {
  color: green;
  font-size: 10px;
  padding-right: 5px; }

.redstatus {
  color: red;
  font-size: 10px;
  padding-right: 5px; }

.btnnoshadow {
  box-shadow: none; }

.mainbox {
  display: flex;
  justify-content: center; }
  .mainbox img {
    margin: 0px; }
    @media (max-width: 768px) {
      .mainbox img {
        width: 110px;
        height: 110px; } }
    @media (min-width: 768px) {
      .mainbox img {
        width: 140px;
        height: 144px; } }
    @media (min-width: 992px) {
      .mainbox img {
        width: auto;
        height: auto; } }
  .mainbox div {
    width: 150px;
    padding-left: 0px; }

div.showDTPicker > div > button {
  visibility: hidden;
  width: 0px;
  padding: 0px !important;
  margin: 0px !important; }

td.showDTPicker {
  padding-bottom: 0px !important; }

div.editDTPicker > div > div > div > input {
  visibility: hidden;
  width: 0px;
  padding: 0px !important;
  margin: 0px !important; }

div.editDTPicker > div > div > button {
  float: left !important;
  margin-left: 0px !important; }

div.editDTPicker > label {
  padding: 0px !important; }

td.editDTPicker {
  padding-top: 0px !important;
  line-height: 0; }

div.PositionText > div > label {
  padding-top: 0px !important;
  padding-bottom: 0px !important;
  font-size: 12px !important;
  font-weight: 400 !important; }

div.DeptText > div > label {
  padding-top: 0px !important;
  padding-bottom: 0px !important;
  font-size: 12px !important;
  font-weight: 400 !important; }

tr.RowTop > th,
tr.RowTop > td {
  padding-bottom: 0px !important; }

tr.RowMiddle > th,
tr.RowMiddle > td {
  padding-top: 0px !important;
  padding-bottom: 0px !important; }

tr.RowLast > th,
tr.RowLast > td {
  padding-top: 0px !important; }

tr.RowLast > th > label {
  padding-top: 0px !important; }

.region-sidebar-response {
  background-image: url(https://image.freepik.com/free-vector/3d-cubes-shapes_1017-95.jpg); }

tr.RowTop > td > div > label,
tr.RowMiddle > td > div > label,
tr.RowMiddle > td > div > div > label,
tr.RowLast > td > div > label {
  padding-top: 0px !important;
  padding-bottom: 0px !important; }

div.lstCardRegisFilterTrans > ul > li {
  padding-top: 0px !important;
  padding-bottom: 0px !important; }

div.lstCardRegisFilterTransTest > ul > li {
  padding-top: 0px !important;
  padding-bottom: 0px !important; }

table.tblInfoCardRegis > tbody > tr > td {
  padding-top: 5px !important;
  padding-bottom: 5px !important; }

table.tblInfoCardRegis > tbody > tr > td:first-child,
table.tblInfoCardRegis > tbody > tr > td:last-child {
  vertical-align: middle; }

table.tblInfoCardRegis > tbody > tr > td:last-child {
  padding-bottom: 0px !important; }

table.tblInfoCardRegis > tbody > tr > td:first-child {
  text-align: center; }

table.tblOTPlan > tbody > tr > td:first-child {
  padding-top: 10px !important;
  text-align: center; }

table.tblOTPlanDesciption > tbody > tr > td,
table.tblOTPlanDesciption > tbody > tr > td > div > label {
  padding-top: 0px !important;
  padding-bottom: 0px !important; }

table.tblOTPlan > tbody > tr > td {
  padding-top: 0px !important;
  padding-bottom: 0px !important; }

div.listOTPlan > ul > li {
  padding-top: 0px !important;
  padding-bottom: 0px !important; }

div.listOTPlan > ul > li:last-child {
  border-bottom: 0px !important; }

div.lstCardRegisOTPlan > ul > li {
  padding-top: 0px !important;
  padding-bottom: 1px !important; }

div.div.groupboxOTPlan,
div.groupboxOTPlan > h2,
div.groupboxOTPlan > div {
  padding-top: 0px !important;
  padding-bottom: 0px !important; }

div.groupboxOTPlan > h2 {
  font-size: 15px !important;
  padding-left: 0px !important; }

div.groupboxOTPlan > div {
  padding-left: 0px !important; }

input[type=checkbox].BigCheckboxSelect:after {
  line-height: 1.2em;
  content: '';
  display: inline-block;
  width: 24px;
  height: 24px;
  /*  background: rgb(224,224,224); */
  border: solid 2px #bfbfbf;
  background: #f7f7f7;
  border-radius: 50%;
  margin-left: -3px;
  margin-top: -3px; }

input[type=checkbox].BigCheckboxSelect:checked:after {
  content: '✔';
  text-align: center;
  color: #fff;
  font-size: 18px;
  border: solid 2px #4CAF50;
  background: #4CAF50; }

div.BigCheckbox > label > input[type=checkbox]:after {
  line-height: 1.0em;
  content: '';
  display: inline-block;
  width: 17px;
  height: 18px;
  border: solid 1px #bfbfbf;
  background: #f7f7f7;
  border-radius: 2px; }

div.BigCheckbox > label > input[type=checkbox]:checked:after {
  content: '✔';
  text-align: center;
  color: #135592;
  font-size: 16px;
  border: solid 1px #135592;
  font-weight: normal; }

input[type=checkbox].BigCheckbox:after {
  line-height: 1.2em;
  content: '';
  display: inline-block;
  width: 24px;
  height: 24px;
  /*  background: rgb(224,224,224); */
  border: solid 2px #bfbfbf;
  background: #f7f7f7;
  border-radius: 50%;
  margin-left: -3px;
  margin-top: -3px; }

input[type=checkbox].BigCheckbox:checked:after {
  content: '✔';
  text-align: center;
  color: #fff;
  font-size: 18px;
  border: solid 2px #4CAF50;
  background: #4CAF50; }

.btnCheckbox {
  font-size: 20px !important;
  margin-right: 5px !important;
  margin-top: 12px !important;
  color: rgba(0, 0, 0, 0.38) !important; }

div.tblWeekDayEmpList > div > div.mx-grid-content > div > table > thead > tr:first-child > th > div > div.mx-datagrid-head-caption {
  font-size: 14px;
  font-weight: 600;
  color: #607D8B; }

button.BadgeNotification {
  margin-top: 10px !important; }

button.BadgeNotification > span.badge {
  top: -6px;
  right: 13px;
  background-color: red;
  color: white; }

div.ddlTextBold > label {
  font-weight: bold; }

div.ctnHolidayData > div > div > label {
  color: limegreen; }

div.ctnWeekData > div > div > label {
  color: magenta; }

table.tblFilterTransactionSearch > tbody > tr > td,
table.tblFilterTransactionSearch > tbody > tr > td > div > label,
table.tblFilterTransactionSearch > tbody > tr > td > div > div > label {
  padding: 0px 8px !important; }

div.dtpFilterTransaction > div > div > button {
  padding: 3px 10px !important; }

div.FilterTransactionLG {
  padding: 0px 15px !important; }

div.groupboxSearch > h2.mx-groupbox-header > i.mx-groupbox-collapse-icon.glyphicon-plus:before {
  content: "\e252"; }

div.groupboxSearch > h2.mx-groupbox-header > i.mx-groupbox-collapse-icon.glyphicon-minus:before {
  content: "\e253"; }

table.tblCheckUnCheck > tbody > tr > td {
  vertical-align: bottom; }

div.totalNumber {
  font-weight: bold;
  padding-right: 7px; }

div.totalNumber > span {
  font-weight: 600; }

.titleemployee {
  font-size: 14px;
  font-weight: 600;
  color: #607D8B; }

.titleemployee label {
  font-size: 14px;
  font-weight: 600;
  color: #607D8B; }

.textemployee,
.textemployee1 {
  padding-top: 5px;
  font-size: 14px; }

.title-empleave {
  font-size: 14px !important;
  color: #135592; }

.textemployeedesc {
  color: #000 !important;
  font-weight: normal !important; }

.textemployeedesc label {
  margin-top: 5px;
  color: #000 !important;
  font-weight: normal !important;
  font-size: 14px; }

.textemployeedescradiobutton .radio label {
  margin-top: 0px; }

.textemployeedescradiobutton label {
  margin-top: 10px;
  color: #000 !important;
  font-weight: normal !important;
  font-size: 14px; }

.textrequestradiobutton label {
  margin-top: 0px;
  color: #000 !important;
  font-weight: normal !important;
  font-size: 14px; }

.textrequestradiobutton .radio label {
  margin-top: 0px; }

.topicempleave {
  font-size: 14px !important;
  font-weight: 600;
  color: #2d2d2d; }

.boxempleave {
  margin: 10px 0px 20px 0px;
  background-color: rgba(255, 255, 255, 0.8);
  box-shadow: rgba(0, 0, 0, 0.1) 0px 2px 6px 0px, rgba(0, 0, 0, 0.1) 0px 2px 20px 0px;
  border-radius: 5px; }

.titlename1,
.titlename2 {
  font-size: 18px;
  color: #FFFFFF; }

.titlename1::placeholder,
.titlename2::placeholder {
  color: #505050;
  font-size: 12px; }

.noticlose img {
  height: 10px; }

.boxallprofile {
  box-shadow: rgba(0, 0, 0, 0.1) 0px 2px 6px 0px, rgba(0, 0, 0, 0.1) 0px 2px 20px 0px; }

.boxcardregisterdetail div.tab-content {
  box-shadow: rgba(0, 0, 0, 0.1) 0px 4px 6px 0px, rgba(0, 0, 0, 0.1) 0px 2px 2px 0px; }

.texttblcardregister {
  font-size: 14px;
  color: #000 !important;
  font-weight: normal !important; }

.texttblcardregister label {
  font-size: 14px;
  color: #000 !important;
  font-weight: normal !important; }

.texttblcardregister button {
  padding: 8px 14px !important; }

table.mx-table > tbody > tr.tblboxcardregister > td {
  padding: 3px 10px; }

.boxheadprofile {
  padding: 10px 0 !important; }

.profile-header {
  margin-top: -10px;
  background: #52c4b3;
  /* For browsers that do not support gradients */
  background: -webkit-linear-gradient(-90deg, #687c92, #52c4b3);
  /* For Safari 5.1 to 6.0 */
  background: -o-linear-gradient(-90deg, #687c92, #52c4b3);
  /* For Opera 11.1 to 12.0 */
  background: -moz-linear-gradient(-90deg, #687c92, #52c4b3);
  /* For Firefox 3.6 to 15 */
  background: linear-gradient(-90deg, #687c92, #52c4b3);
  /* Standard syntax (must be last) */ }

.profile-phone .region-topbar,
.profile-tablet .region-topbar {
  background-color: #2C4058; }

h1.mx-title {
  background-color: #2C4058; }

.box-mainmenu {
  background: white;
  box-shadow: rgba(0, 0, 0, 0.1) 0px 2px 6px 0px, rgba(0, 0, 0, 0.1) 0px 2px 20px 0px;
  margin: 5px 0; }

.btn-block {
  width: 100%;
  font-weight: bold;
  font-size: 15px;
  color: #135592; }

.titletimerequest {
  font-size: 14px;
  font-weight: 600;
  color: #135592; }

input[type=radio] {
  visibility: hidden;
  position: relative;
  margin-left: 5px;
  width: 15px;
  height: 15px; }

input[type=radio]:before {
  content: "";
  visibility: visible;
  position: absolute;
  border: 2px solid #bfbfbf;
  background: #f7f7f7;
  border-radius: 50%;
  top: 0;
  right: 0;
  bottom: 0;
  left: 0; }

input[type=checkbox] {
  margin: 9px; }

input[type=radio]:checked:before {
  background-color: #135592;
  border: solid 2px #104a80; }

input[type=checkbox]:after {
  line-height: 1.0em;
  content: '';
  display: inline-block;
  width: 16px;
  height: 17px;
  border: solid 1px #bfbfbf;
  background: #f7f7f7;
  border-radius: 2px; }

input[type=checkbox]:checked:after {
  content: '✔';
  text-align: center;
  color: #135592;
  font-size: 15px;
  border: solid 1px #135592;
  font-weight: normal;
  background: #fff; }

.titleempleave {
  font-size: 14px !important;
  font-weight: 600;
  color: #135592; }

.empid-empleave button {
  padding: 3px 10px; }

.empid-empleave label {
  margin-top: 7px;
  color: #000 !important;
  font-weight: normal !important;
  font-size: 14px; }

.boxtimesheet {
  box-shadow: rgba(0, 0, 0, 0.1) 0px 2px 6px 0px, rgba(0, 0, 0, 0.1) 0px 2px 6px 0px; }

.titlename1 .form-control {
  background-color: #ffffff7a;
  color: #2c4058;
  border-color: #2c4058;
  width: 100px; }

.titlename1 .form-control:focus {
  background-color: #627480;
  color: #fff;
  border-color: #dfe4ed; }

.titlename1 .form-group .control-label {
  color: #2c4058; }

.titlename1 .form-control[disabled],
.titlename1 .form-control[readonly] {
  color: #272727;
  border-color: #909090;
  background-color: #ffffff60; }

.titlename2 .form-control {
  background-color: #ffffff7a;
  color: #2c4058;
  border-color: #2c4058;
  width: 150px; }

.titlename2 .form-control:focus {
  background-color: #627480;
  color: #fff;
  border-color: #dfe4ed; }

.titlename2 .form-group .control-label {
  color: #2c4058; }

.titlename2 .form-control[disabled],
.titlename2 .form-control[readonly] {
  color: #272727;
  border-color: #909090;
  background-color: #ffffff60; }

.textemployee1 .form-control {
  background-color: #ffffff7a;
  color: #2c4058;
  border-color: #2c4058;
  width: 150px; }

.textemployee1 .form-control:focus {
  background-color: #627480;
  color: #fff;
  border-color: #dfe4ed; }

.textemployee1 .form-group .control-label {
  color: #2c4058; }

.textemployee1 .form-control[disabled],
.textemployee1 .form-control[readonly] {
  color: #272727;
  border-color: #909090;
  background-color: #ffffff60; }

.textcardregister {
  float: left;
  padding-top: 5px;
  font-size: 14px; }

.textcardregister .form-control {
  border: 0;
  outline: 0;
  background: transparent;
  border-bottom: 1px solid #afc8ce;
  color: #e2e2e2;
  font-size: 14px;
  width: 167px;
  margin-top: -8px;
  float: right; }

.textcardregister button {
  background-color: rgba(255, 255, 255, 0.6);
  padding: 5px 14px; }

.textemployee button {
  padding: 8px 14px !important; }

.titleshift {
  font-weight: 600;
  font-size: 14px; }

.mx-groupbox > .mx-groupbox-header {
  color: #2c4058;
  font-size: 15px; }

.boxcrosscheck {
  background: #4caf50;
  color: #fff;
  box-shadow: none;
  margin-top: -6px;
  font-size: 12px !important; }

.profile-phone .mx-listview .mx-listview-searchbar .mx-listview-clear-button .glyphicon-refresh:before,
.profile-tablet .mx-listview .mx-listview-searchbar .mx-listview-clear-button .glyphicon-refresh:before {
  font-size: 16px;
  color: #a1a1a1; }

.mx-groupbox > .mx-groupbox-body {
  padding-bottom: 50px;
  background-color: #eee; }

.empleave-list .mx-listview-list {
  height: 350px; }

.modal-dialog .modal-content {
  top: 20px; }

.approvetimesheet-list .mx-listview-item {
  margin: 10px 0; }

.noti-list .mx-listview-item {
  margin: 10px 0; }

.titlenameemplist1 {
  border: 0;
  outline: 0;
  color: #fff;
  width: 210px;
  font-size: 15px; }

.titlenameemplist2 .form-control {
  border: 0;
  outline: 0;
  background: transparent !important;
  color: #e2e2e2;
  width: 180px;
  margin-top: -3px;
  font-size: 14px; }

.noti-list .mx-list table.mx-table > tbody > tr > th,
.noti-list .mx-list table.mx-table > tbody > tr > td {
  padding: 2px; }

.titlenoti .mx-referenceselector-input-wrapper label {
  color: #135592 !important;
  margin-left: 5px;
  font-size: 15px;
  padding-bottom: 0px !important; }

.description-noti label {
  font-weight: 400 !important;
  color: #505050 !important;
  margin-top: -3px; }

div.groupboxOTPlan > h2 > i {
  color: #a1a1a1;
  font-size: 14px; }

div.groupboxOTPlan > h2 > i.glyphicon.mx-groupbox-collapse-icon.glyphicon-plus:before {
  content: "\e259"; }

.managegroup-button {
  font-size: 10px; }

.titlemanagegroup label {
  font-weight: 600;
  color: #254f65;
  font-size: 14px; }

.status-managegroup label {
  font-weight: 400 !important;
  color: #9c9c9c !important; }

.box-timesheet > h2 > i.glyphicon.mx-groupbox-collapse-icon.glyphicon-plus:before {
  content: "\e252"; }

.titleleave > div > label {
  font-size: 15px; }

.typeleave label {
  color: #0f79ce !important;
  font-size: 14px; }

.textleave label {
  font-weight: normal !important; }

.mx-list table.mx-table > tbody > tr.box-leavebar > th,
.mx-list table.mx-table > tbody > tr.box-leavebar > td {
  padding: 0px 8px; }

.usertimerequest {
  font-size: 15px;
  font-weight: 600;
  color: #135592; }

.texttimerequest label {
  font-weight: 400 !important; }

.texttimerequestcomment label {
  font-weight: 400 !important;
  color: #000 !important; }

.mx-tabcontainer .mx-tabcontainer-tabs > li > a {
  padding-bottom: 0px; }

.tabprofile > ul > li > a {
  padding-bottom: 0px !important; }

.tabletimesheet .mx-list .mx-listview-item {
  padding: 0px; }

.timesheet-date label {
  color: #fff !important; }

.title-search label {
  color: #002756 !important; }

.cbkShowNoPadding {
  margin-top: 0px !important;
  margin-bottom: 0px !important; }

.cbkShowNoPadding > label {
  padding: 0px !important; }

.cbkShowNoPadding > label > input {
  padding-bottom: 0px !important; }

.box-timesheetReviewHR {
  margin-top: 7px !important; }

.box-timesheetReviewHR > div.mx-groupbox-body {
  padding: 10px !important; }

table.tblDataReviewTimeHR > tbody > tr > td {
  padding-top: 0px !important;
  padding-bottom: 0px !important;
  text-align: center; }

table.boxReviewTimeHR > tbody > tr > td {
  padding: 0px !important; }

table.tblBoxTimeSheetReviewTimeHR > tbody > tr > td {
  padding: 2px !important; }

table.boxSearchPayable > tbody > tr > td {
  padding: 5px 8px !important; }

table.mx-table > tbody > tr > th > div.textPosition label {
  color: #fff;
  font-size: 13px;
  margin-top: -8px; }

.titleapproved label {
  font-weight: 600;
  color: green;
  font-size: 14px; }

.titlepending label {
  font-weight: 600;
  color: #dd191d;
  font-size: 14px; }

.listboxpayable > ul > li {
  margin: 8px;
  border: 1px solid #ddd; }

.listtimesheet > ul > li {
  padding: 2px !important; }

.icongroupboxpayable > h2 > i {
  font-size: 12px; }

.icongroupboxpayable > h2 {
  background: #ececec !important; }

.icongroupboxpayable > div.mx-groupbox-body {
  background-color: #f5f5f5; }

table.tblSearchReviewTimeHR > tbody > tr > td > div.form-group {
  margin-bottom: 0px; }

span.iconImgHomePage > img {
  width: 83px !important;
  height: 89px !important; }

.gbPaddingViewTime > div.mx-groupbox-body {
  padding: 4px !important; }

.lstCardNonBorder > ul > li {
  border: 0px !important; }

.title-report label {
  color: #002756 !important;
  font-weight: 600; }

.textRadioReport label {
  padding-bottom: 0px !important;
  font-weight: 600;
  color: #2b2b2b !important; }

.tabCalendar > ul > li > a {
  padding-top: 5px !important;
  padding-bottom: 5px !important; }

.OTPlanWating > tbody > tr > td > div > div > label {
  color: red !important; }

.OTPlanAccepted > tbody > tr > td > div > div > label {
  color: blue !important; }

.OTPlanApprove > tbody > tr > td > div > div > label {
  color: green !important; }

.OTPlanListViewTime > ul > li {
  padding: 0px !important; }

.PaddingTop0 {
  padding-top: 0px !important; }

.PaddingBottom0 {
  padding-bottom: 0px !important; }

.groupboxPaddingBottom15 > div.mx-groupbox-body {
  padding-bottom: 15px !important; }

.grbTimeSheetReviewTime > div.mx-groupbox-body {
  padding: 0px !important; }

.grbTimeSheetReviewTime > h2.mx-groupbox-header {
  text-align: center; }

.grbTimeSheetReviewTimeSolved > div.mx-groupbox-body {
  padding: 0px !important; }

.grbTimeSheetReviewTimeSolved > h2.mx-groupbox-header {
  text-align: center;
  background-color: #fb6d4c;
  color: #580000; }

.grbTimeSheetReviewTimeSolved > div > table.tblBoxTimeSheetReviewTimeHR {
  background-color: #ffd1a9 !important; }

.grbShiftReviewTimeOneDay > div.mx-groupbox-body {
  padding: 0px !important;
  padding-top: 4px !important;
  padding-bottom: 10px !important; }

.grbShiftReviewTimeOneDay > h2.mx-groupbox-header {
  text-align: center; }

.grbShiftReviewTimeMultipleDays > div.mx-groupbox-body {
  padding: 0px !important;
  padding-top: 7px !important;
  padding-bottom: 7px !important; }

.grbShiftReviewTimeMultipleDays > h2.mx-groupbox-header {
  text-align: center; }

.form-carcontractor {
  background: linear-gradient(-90deg, #93a5af, #a8c4d4);
  box-shadow: inset rgba(0, 0, 0, 0.1) 0px 0px 4px 0px, inset rgba(0, 0, 0, 0.1) 0px 4px 14px 0px; }

.form-carcontractor .form-control {
  background-color: #ffffffc7;
  color: #2c4058;
  border-color: #2c4058; }

.form-carcontractor .form-control:focus {
  background-color: #627480;
  color: #fff;
  border-color: #dfe4ed; }

.form-carcontractor .form-group .control-label {
  color: #2c4058; }

.form-carcontractor .form-control[disabled],
.form-carcontractor .form-control[readonly] {
  color: #272727;
  border-color: #909090;
  background-color: #ffffff60; }

.buttonImageFile .mx-wrapped-form button {
  background-color: #2c4058;
  border-color: #2c4058; }

.buttonImageFile label {
  margin-top: 10px; }

.buttonFileManager div {
  text-align: unset; }

.buttonFileManager .mx-wrapped-form button.mx-fileinput-upload-button {
  background-color: #2c4058;
  border-color: #2c4058; }

.buttonFileManager button {
  background-color: #8dd490;
  border-color: #4CAF50; }

table.mx-table > tbody > tr.tblboxcarcontractor > td {
  padding: 2px;
  background: #607D8B; }

.thumbnail-carmain {
  position: relative;
  width: 100%;
  height: 140px;
  overflow: hidden; }

.thumbnail-carmain img {
  position: absolute;
  left: 50%;
  top: 50%;
  height: 100%;
  width: auto;
  -webkit-transform: translate(-50%, -50%);
  -ms-transform: translate(-50%, -50%);
  transform: translate(-50%, -50%); }

.thumbnail-car {
  position: relative;
  width: 60px;
  height: 60px;
  overflow: hidden; }

.thumbnail-car img {
  position: absolute;
  left: 50%;
  top: 50%;
  height: 100%;
  width: auto;
  -webkit-transform: translate(-50%, -50%);
  -ms-transform: translate(-50%, -50%);
  transform: translate(-50%, -50%); }

table.mx-table > tbody > tr.tblboxcarseat > td {
  padding: 0px; }

.boxcarseat .mx-templategrid-item {
  background-color: transparent !important;
  padding: 4px 0px; }

.boxcarseat .mx-templategrid-item.selected {
  background-color: transparent !important; }

.textlicenseplate .form-control[readonly] {
  color: #272727;
  border-color: #2c4058;
  background-color: #c2d0d8;
  text-align: center;
  font-size: 25px;
  font-weight: 600; }

.template-checkupImage .mx-templategrid-item {
  background-color: unset; }

.text-grid-left div {
  float: left; }

.btn-white {
  background-color: #ffffff;
  border-color: #46586d;
  box-shadow: 0 2px 4px -2px rgba(55, 58, 60, 0.6); }

.btn-white:hover,
.btn-white:focus {
  box-shadow: 0 2px 4px -2px rgba(55, 58, 60, 0.6);
  background-color: #d6d7d8;
  border-color: #2c4058;
  opacity: 0.75; }

td.text-sum {
  color: #CE0000; }

.th-headTitle-blue .mx-grid-content table.table-bordered > thead > tr {
  color: #2c4058; }

.form-blue .form-control {
  border: 1px solid #2c4058; }

.buttonRefreshMiddle > div,
.buttonRefreshMiddle > div > div {
  height: 100% !important; }

.buttonRefreshMiddle > div > button {
  height: 100% !important;
  vertical-align: middle !important; }

.rdoRangePeriodViewtime > div > div {
  margin-top: 0px !important;
  margin-bottom: 0px !important; }

.set-Center-CustomNumeric input {
  text-align: center;
  padding: 5px;
  width: 80%;
  border: 2px solid #f0f0f0;
  border-radius: 10px; }

.topbar-center .region-topbar h1 {
  margin: auto; }

.wizard .row:before {
  background-color: transparent; }

.text-layout-gray .form-control-static {
  border: 1px solid #ddd;
  background: #eee;
  padding: 8px;
  border-radius: 2px;
  color: #55595c;
  width: 90%; }

.text-layout-gray1 .form-control-static {
  border: 1px solid #ddd;
  background: #eee;
  padding: 8px;
  border-radius: 2px;
  color: #55595c;
  width: 100%; }

table.mx-table > tbody > tr.trtext > td {
  padding: 8px 0; }

table.mx-table > tbody > tr.trtext > td > div {
  margin-left: 0px; }

.thumbnail-ninety {
  position: relative;
  width: 100%;
  height: 90px;
  overflow: hidden; }

.thumbnail-ninety img {
  position: absolute;
  left: 50%;
  top: 50%;
  height: 100%;
  width: auto;
  -webkit-transform: translate(-50%, -50%);
  -ms-transform: translate(-50%, -50%);
  transform: translate(-50%, -50%); }

.thumbnail-ninetycircle {
  position: relative;
  width: 100%;
  height: 90px;
  overflow: hidden;
  border-radius: 50%; }

.thumbnail-ninetycircle img {
  position: absolute;
  left: 50%;
  top: 50%;
  height: 100%;
  width: auto;
  -webkit-transform: translate(-50%, -50%);
  -ms-transform: translate(-50%, -50%);
  transform: translate(-50%, -50%); }

.thumbnail-ninetycircleborder {
  position: relative;
  width: 100%;
  height: 90px;
  overflow: hidden;
  border-radius: 50%;
  border: 3px solid #2c4058; }

.thumbnail-ninetycircleborder img {
  object-fit: cover;
  width: 100%;
  height: 100%; }

.thumbnail-fourtycircle {
  position: relative;
  width: 100%;
  height: 40px;
  overflow: hidden;
  border-radius: 50%; }

.thumbnail-fourtycircle img {
  position: absolute;
  left: 50%;
  top: 50%;
  height: 100%;
  width: auto;
  -webkit-transform: translate(-50%, -50%);
  -ms-transform: translate(-50%, -50%);
  transform: translate(-50%, -50%); }

.thumbnail-fourtycircle {
  position: relative;
  width: 100%;
  height: 40px;
  overflow: hidden;
  border-radius: 50%; }

.thumbnail-fourtycircle img {
  position: absolute;
  left: 50%;
  top: 50%;
  height: 100%;
  width: auto;
  -webkit-transform: translate(-50%, -50%);
  -ms-transform: translate(-50%, -50%);
  transform: translate(-50%, -50%); }

.thumbnail-seventycircle {
  position: relative;
  width: 100%;
  height: 70px;
  overflow: hidden;
  border-radius: 50%; }

.thumbnail-seventycircle img {
  position: absolute;
  left: 50%;
  top: 50%;
  height: 100%;
  width: auto;
  -webkit-transform: translate(-50%, -50%);
  -ms-transform: translate(-50%, -50%);
  transform: translate(-50%, -50%); }

.thumbnail-sixtycircle {
  position: relative;
  width: 100%;
  height: 60px;
  overflow: hidden;
  border-radius: 50%; }

.thumbnail-sixtycircle img {
  position: absolute;
  left: 50%;
  top: 50%;
  height: 100%;
  width: auto;
  -webkit-transform: translate(-50%, -50%);
  -ms-transform: translate(-50%, -50%);
  transform: translate(-50%, -50%); }

.inputtextcenter input[type=text] {
  text-align: center !important; }

.top-menu .login-btn {
  background-color: #FFF;
  border-color: #FFF;
  border-radius: 0;
  color: #827ca1;
  font-size: 15px;
  outline: 0;
  padding: 0 20px;
  box-shadow: none; }

.top-menu .login-btn span {
  -webkit-transition: all 0.1s ease-in-out;
  -o-transition: all 0.1s ease-in-out;
  transition: all 0.1s ease-in-out; }

.top-menu .login-btn:hover,
.top-menu .login-btn:focus {
  background-color: #4CAF50;
  border-color: #4CAF50;
  box-shadow: none;
  color: #FFF;
  outline: 0; }

.top-menu .login-btn:hover span,
.top-menu .login-btn:focus span {
  -ms-transform: scale(1);
  -webkit-transform: scale(1);
  transform: scale(1); }

table.mx-table > tbody > tr > th > div.textPayable label {
  color: #fff;
  font-size: 13px; }

div.groupboxReportTime > div.mx-groupbox-body {
  padding-bottom: 0px !important; }

.textLabel-middle label {
  vertical-align: middle; }

.tabCalendar .mx-tabcontainer-content {
  padding: 0; }

.link-login {
  color: #2c4058; }

.link-login:hover {
  text-decoration: underline; }

.loginqr-btn {
  background-color: white;
  border-color: #566d88;
  box-shadow: none;
  margin-top: 10px;
  color: #2c4058;
  font-weight: 600;
  font-size: 14px;
  border-radius: 2px; }

.template-hide-controlbar .mx-grid-controlbar {
  display: none; }

.popup-noclose .modal-header button {
  visibility: hidden; }

.file-attachment .mx-fileinput .mx-wrapped-label {
  display: inline-block;
  width: 200px; }

.file-attachment .mx-fileinput {
  text-align: left; }

.file-attachment .form-control {
  display: inline-block;
  width: 200px; }

.file-attachment {
  text-align: left; }

.file-attachment {
  text-align: left; }

button.BadgeNotification-PC {
  margin-top: 10px !important;
  font-size: 18px; }

button.BadgeNotification-PC > span.badge {
  top: -10px;
  right: 13px;
  background-color: red;
  color: white; }

/* ==========================================================================
   Additional styles for PivotDataWidget rotated column headers
   ========================================================================== */
.PivotDataWidget.PivotDataWidgetRotated table {
  border: none; }

.PivotDataWidget.PivotDataWidgetRotated .PivotDataWidgetTopLeft {
  border: none;
  vertical-align: bottom; }

.PivotDataWidgetHeaderRotatedCell {
  width: 40px;
  border: 1px solid #ccc;
  color: black;
  text-align: center; }

.PivotDataWidgetHeaderRotatedTotalRowCell {
  width: 40px;
  text-align: center;
  color: black; }

.PivotDataWidget th.PivotDataWidgetHeaderRotated {
  height: 80px;
  width: 40px;
  min-width: 40px;
  max-width: 40px;
  position: relative;
  vertical-align: bottom;
  padding: 0;
  font-size: 12px;
  border: none; }

.PivotDataWidgetHeaderRotated > div {
  position: relative;
  top: 0px;
  left: 40px;
  /* 80 * tan(45) / 2 = 40 where 80 is the height on the cell and 45 is the transform angle*/
  height: 100%;
  -ms-transform: skew(-45deg, 0deg);
  -moz-transform: skew(-45deg, 0deg);
  -webkit-transform: skew(-45deg, 0deg);
  -o-transform: skew(-45deg, 0deg);
  transform: skew(-45deg, 0deg);
  overflow: hidden;
  border-left: 1px solid #ccc;
  border-right: 1px solid #ccc;
  border-top: 1px solid #ccc; }

.PivotDataWidgetHeaderRotated span {
  -ms-transform: skew(45deg, 0deg) rotate(315deg);
  -moz-transform: skew(45deg, 0deg) rotate(315deg);
  -webkit-transform: skew(45deg, 0deg) rotate(315deg);
  -o-transform: skew(45deg, 0deg) rotate(315deg);
  transform: skew(45deg, 0deg) rotate(315deg);
  position: absolute;
  bottom: 30px;
  /* 40 cos(45) = 28 with an additional 2px margin*/
  left: -25px;
  /*Because it looked good, but there is probably a mathematical link here as well*/
  display: inline-block;
  width: 85px;
  /* 80 / cos(45) - 40 cos (45) = 85 where 80 is the height of the cell, 40 the width of the cell and 45 the transform angle*/
  text-align: left;
  white-space: nowrap;
  /*whether to display in one line or not*/ }

.PivotDataWidgetHeaderVerticalCell {
  width: 1.5em;
  border: 1px solid #ccc;
  color: black;
  text-align: center; }

.PivotDataWidgetHeaderVerticalTotalRowCell {
  width: 1.5em;
  text-align: center;
  color: black; }

.PivotDataWidgetHeaderVertical {
  /* ADDED FOR ROTATION POINT */
  vertical-align: top;
  /* these are height and width dimensions of your header */
  height: 8em;
  max-width: 1.5em;
  /* set to hidden so when there's too much vertical text it will be clipped. */
  overflow: hidden;
  /* these are not relevant and are here to better see the elements */
  border: 1px solid #ccc; }

.PivotDataWidgetHeaderVertical > div {
  /* line height should be equal to header width so text will be middle aligned */
  line-height: 1.5em;
  /* setting background may yield better results in IE text clear type rendering */
  background: #eee;
  display: block;
  /* this will prevent it from wrapping too much text */
  white-space: nowrap;
  /* so it stays off the edge */
  padding-left: 3px;
  /* CSS3 specific totation code */
  /* translate should have the same negative dimension as head height */
  transform: rotate(270deg) translate(-8em, 0);
  transform-origin: 0 0;
  -moz-transform: rotate(270deg) translate(-8em, 0);
  -moz-transform-origin: 0 0;
  -webkit-transform: rotate(270deg) translate(-8em, 0);
  -webkit-transform-origin: 0 0; }

.PivotDataWidgetDisplay-North {
  background-color: lawngreen; }

.PivotDataWidgetDisplay-East {
  background-color: yellow; }

.PivotDataWidgetDisplay-South {
  background-color: aqua; }

.PivotDataWidgetDisplay-West {
  background-color: salmon; }

.approvePaybleGB > .mx-groupbox-body {
  padding-bottom: 20px; }

.font12 > div > * {
  font-size: 12px !important; }

.listviewNonBorder > ul > li {
  border: 0px;
  padding-top: 0px; }

.dataviewCardTimeRequest {
  border: 1px solid #dddddd;
  padding: 7px;
  background-color: #6495ed59; }

.dataviewCardTimeRequestApprove {
  border: 1px solid #dddddd;
  padding: 7px;
  background-color: #bedfb7; }

.dataviewCardTimeRequestCancel {
  border: 1px solid #dddddd;
  padding: 7px;
  background-color: #ffafaf; }

.tempgridNonPadding > div.mx-grid-content > div > div > div {
  padding: 0px; }

.gbPayIncentiveOvertime > div.mx-groupbox-body {
  padding-bottom: 10px;
  background-color: aqua; }

.gb10PaddingBottom > div.mx-groupbox-body {
  padding-bottom: 10px; }

.gbColorAqua > div.mx-groupbox-body {
  background-color: aqua; }

.listSwitchColorWHGR > ul > li:nth-child(n+1) {
  background-color: #fafafa; }

.icon-menu-responsive > img {
  width: 160px;
  height: 160px; }

div.groupboxPaddingLR2 > div.mx-groupbox-body {
  padding-left: 2px !important;
  padding-right: 2px !important;
  padding-bottom: 0px !important; }

table.mx-table > tbody > tr > td > div.timecompare label {
  padding-bottom: 4px !important;
  font-weight: 600 !important;
  color: #eb4034 !important; }

.timerecgrid .mx-templategrid-item {
  border-bottom: solid 1px #8e8b8b !important; }

.ManageDayOffFutureCard > Label {
  color: #ff2929 !important; }

.ManageDayOffFutureCard > div > p {
  color: #ff2929 !important; }

.rfpFilterTransaction > div > button {
  height: 35px !important;
  width: 42px !important; }

div.CardRegisterShiftList > ul > li:last-child {
  border-bottom: 0px !important; }

.paygroup .mx-groupbox-body .mx-dataview .mx-dataview-content .mx-listview > ul > li {
  padding: 0px 10px;
  border: none;
  background: #eeeeee; }

.paygroup .mx-groupbox-body .mx-listview .mx-listview-item:focus,
.mx-listview .mx-listview-item:active {
  background-color: transparent; }

table.mx-table > tbody > tr.testtbl > td {
  padding: 0px !important; }

table.mx-table > tbody > tr.testtbl > td > div > label {
  padding: 0px !important; }

.paytbl .mx-listview-item {
  border: none; }

.paytbl .mx-listview-item:last-child {
  border: none; }

.loading {
  font-weight: 800; }

.loading span {
  display: inline-block; }

.loading04 span {
  animation: loading04 0.9s infinite; }

.loading04 span:nth-child(2) {
  animation-delay: 0.1s; }

.loading04 span:nth-child(3) {
  animation-delay: 0.2s; }

.loading04 span:nth-child(4) {
  animation-delay: 0.3s; }

.loading04 span:nth-child(5) {
  animation-delay: 0.4s; }

.loading04 span:nth-child(6) {
  animation-delay: 0.5s; }

.loading04 span:nth-child(7) {
  animation-delay: 0.6s; }

.loading04 span:nth-child(8) {
  animation-delay: 0.7s; }

.loading04 span:nth-child(9) {
  animation-delay: 0.8s; }

@keyframes loading04 {
  0%, 100% {
    transform: translateY(0); }
  50% {
    transform: translateY(15px); } }
.loading01 span {
  animation: loading01 1.4s infinite alternate; }

.loading01 span:nth-child(1) {
  animation-delay: 0s; }

.loading01 span:nth-child(2) {
  animation-delay: 0.1s; }

.loading01 span:nth-child(3) {
  animation-delay: 0.2s; }

.loading01 span:nth-child(4) {
  animation-delay: 0.3s; }

.loading01 span:nth-child(5) {
  animation-delay: 0.4s; }

.loading01 span:nth-child(6) {
  animation-delay: 0.5s; }

.loading01 span:nth-child(7) {
  animation-delay: 0.6s; }

@keyframes loading01 {
  0% {
    opacity: 1; }
  100% {
    opacity: 0; } }
.incentiveGrid > div.mx-grid-content > div > table.table-striped > tbody > tr > td.setColor[title=No] {
  color: #ffffff;
  background-color: #e95d5d;
  font-weight: bold; }

.template-manual .mx-templategrid-item.selected {
  background-color: #e8f2ff !important; }

.file-attachment-download button {
  border-color: #8CC152;
  background-color: #8CC152;
  color: #FFF; }

/* CUSTOM BY KREEM FOR KIOSK*/
.top-menu-kiosk {
  background-color: #074E9F;
  height: 96px; }

.top-menu-kiosk h1.mx-title {
  background-color: unset;
  padding: 0;
  color: #fff;
  font-size: 28px;
  font-weight: 600;
  line-height: 36px; }

.top-menu-kiosk td {
  vertical-align: middle;
  padding: 0 !important; }

.text-blue-bold-28, .text-blue-bold-28 label {
  font-size: 28px;
  font-weight: 600 !important;
  line-height: 36px;
  color: #074E9F !important; }

.text-gray-18, .text-gray-18 label {
  font-size: 18px;
  color: #344054 !important;
  font-weight: 400 !important; }

.text-gray-18-bold, .text-gray-18-bold label {
  font-size: 18px;
  color: #344054 !important;
  font-weight: 600 !important; }

.text-gray-bold-24, .text-gray-bold-24 label {
  font-size: 24px;
  font-weight: 600 !important;
  line-height: 32px;
  color: #344054 !important; }

.text-gray-bold-28, .text-gray-bold-28 label {
  font-size: 28px;
  font-weight: 600 !important;
  line-height: 36px;
  color: #344054 !important; }

.text-gray-bold-28-middle, .text-gray-bold-28-middle label {
  font-size: 28px;
  font-weight: 600 !important;
  line-height: 36px;
  color: #344054 !important;
  vertical-align: middle; }

.text-gray-bold-32, .text-gray-bold-32 label {
  font-size: 32px;
  font-weight: 600;
  line-height: 42px;
  color: #344054; }

.text-blue-bold-32, .text-blue-bold-32 label {
  font-size: 32px;
  font-weight: 600 !important;
  line-height: 40px;
  color: #074E9F; }

.text-blue-bold-36 label {
  font-size: 36px;
  font-weight: 600 !important;
  line-height: 48px;
  color: #074E9F; }

.text-blue-bold-40, .text-blue-bold-40 label {
  font-size: 40px;
  font-weight: 600 !important;
  line-height: 52px;
  color: #074E9F; }

.text-green-bold-28, .text-green-bold-28 label {
  font-size: 28px;
  font-weight: 600 !important;
  line-height: 36px;
  color: #06951E; }

.text-green-bold-36, .text-green-bold-36 label {
  font-size: 36px;
  font-weight: 600 !important;
  line-height: 48px;
  color: #06951E; }

.text-pink-bold-28, .text-pink-bold-28 label {
  font-size: 28px;
  font-weight: 600 !important;
  line-height: 36px;
  color: #CD2F6F; }

.text-pink-bold-36, .text-pink-bold-36 label {
  font-size: 36px;
  font-weight: 600 !important;
  line-height: 48px;
  color: #CD2F6F; }

.textBox24-gray-labelbold28 label {
  font-size: 24px !important;
  font-weight: 400 !important;
  line-height: 32px !important;
  color: #344054 !important; }

.textBox24-gray-labelbold28 p {
  font-size: 28px;
  font-weight: 600;
  line-height: 36px;
  color: #344054; }

.textBox-radius8 label {
  font-size: 28px !important;
  font-weight: 600 !important;
  color: #344054 !important; }

.textBox-radius8 input {
  background: #FFFFFF;
  border: 2px solid #E4E7EC;
  border-radius: 8px;
  padding: 14px;
  font-size: 32px;
  line-height: 40px;
  color: #101828; }

.textBox-radius16 label {
  font-size: 28px !important;
  font-weight: 600 !important;
  color: #344054 !important; }

.textBox-radius16 .form-control {
  background: #FFFFFF;
  border: 2px solid #E4E7EC;
  border-radius: 16px;
  font-size: 32px;
  line-height: 40px;
  color: #344054; }

.textBox-radius16 .form-control:focus {
  border: 2px solid #03A9F4;
  box-shadow: rgba(149, 157, 165, 0.2) 0px 8px 24px; }

.textBox-radius16 input {
  background: #FFFFFF;
  border: 2px solid #E4E7EC;
  border-radius: 16px;
  padding: 14px;
  font-size: 32px;
  line-height: 40px;
  color: #344054; }

.textBox-radius16 input:focus {
  border: 2px solid #E4E7EC; }

.textBox-radius16 input::placeholder {
  color: #98A2B3; }

.textBox-radius16-focus .form-control {
  background: #FFFFFF;
  border: 2px solid #03A9F4;
  box-shadow: rgba(149, 157, 165, 0.2) 0px 8px 24px;
  border-radius: 16px;
  font-size: 32px;
  line-height: 40px;
  color: #344054; }

.textBox-radius16-focus input {
  background: #FFFFFF;
  border: 2px solid #E4E7EC;
  border-radius: 16px;
  padding: 14px;
  font-size: 32px;
  line-height: 40px;
  color: #344054; }

.textbox-onfocus > .textBox-radius16 input {
  background: #FFFFFF !important;
  border: 2px solid #03A9F4 !important;
  box-shadow: rgba(149, 157, 165, 0.2) 0px 8px 24px; }

.textbox-unfocus > .textBox-radius16 input {
  background: #FFFFFF !important;
  border: 2px solid #E4E7EC !important;
  box-shadow: none; }

.textArea-radius16 label {
  font-size: 28px !important;
  font-weight: 600 !important;
  color: #344054 !important; }

.textArea-radius16 .form-control {
  background: #FFFFFF;
  border: 2px solid #E4E7EC;
  border-radius: 16px;
  font-size: 32px;
  line-height: 40px;
  color: #344054;
  padding: 12px; }

.selector-radius16 label {
  font-size: 28px !important;
  font-weight: 600 !important;
  color: #344054 !important; }

.selector-radius16 button {
  background: transparent;
  margin-top: 20px;
  font-weight: 400;
  font-size: 15px !important;
  margin-left: -45px; }

.selector-radius16 .mx-referenceselector > .btn > .glyphicon.glyphicon-share-alt::before {
  content: "\e114"; }

.selector-radius16 .form-control {
  background: #FFFFFF;
  border: 2px solid #E4E7EC;
  border-radius: 16px;
  font-size: 32px;
  line-height: 40px;
  color: #344054;
  padding: 15px; }

.button-greenborder-bold {
  background: #FFFFFF;
  border: 2px solid #22AB67;
  box-shadow: none;
  border-radius: 16px;
  padding: 14px 0px;
  font-size: 22px !important;
  line-height: 32px;
  font-weight: 600;
  color: #22AB67;
  width: 100%; }

.button-greenborder-bold img {
  height: 24px;
  margin-top: -3px; }

.button-greenborder-bold:hover, .button-greenborder-bold:focus {
  background: #FFFFFF;
  border: 2px solid #22AB67;
  box-shadow: none;
  color: #22AB67; }

.button-blueborder-bold-W100 {
  background: #FFFFFF;
  border: 2px solid #074E9F;
  box-shadow: none;
  border-radius: 16px;
  padding: 14px 32px;
  font-size: 24px !important;
  line-height: 32px;
  font-weight: 600;
  color: #074E9F;
  width: 100%; }

.button-blueborder-bold-W100:hover, .button-blueborder-bold-W100:focus {
  background: #FFFFFF;
  border: 2px solid #074E9F;
  box-shadow: none;
  color: #074E9F; }

.button-redborder-bold-W100 {
  background: #FFFFFF;
  border: 2px solid #D92D20;
  box-shadow: none;
  border-radius: 16px;
  padding: 14px 32px;
  font-size: 24px !important;
  line-height: 32px;
  font-weight: 600;
  color: #D92D20;
  width: 100%; }

.button-redborder-bold-W100:hover, .button-redborder-bold-W100:focus {
  background: #FFFFFF;
  border: 2px solid #D92D20;
  box-shadow: none;
  color: #D92D20; }

.button-bluebgblueborder-bold-W100 {
  background: #074E9F;
  border: 2px solid #074E9F;
  box-shadow: none;
  border-radius: 16px;
  padding: 14px 32px;
  font-size: 24px !important;
  line-height: 32px;
  font-weight: 600;
  color: #FFFFFF;
  width: 100%; }

.button-bluebgblueborder-bold-W100:hover, .button-bluebgblueborder-bold-W100:focus {
  background: #074E9F;
  border: 2px solid #074E9F;
  box-shadow: none;
  color: #FFFFFF; }

.button-blueborder-bold {
  background: #FFFFFF;
  border: 2px solid #074E9F;
  box-shadow: none;
  border-radius: 16px;
  padding: 14px 0px;
  font-size: 22px !important;
  line-height: 32px;
  font-weight: 600;
  color: #074E9F;
  width: 100%; }

.button-blueborder-bold img {
  height: 24px;
  margin-top: -3px; }

.button-blueborder-bold:hover, .button-blueborder-bold:focus {
  background: #FFFFFF;
  border: 2px solid #074E9F;
  box-shadow: none;
  color: #074E9F; }

.buttonKeypad-blueborder {
  background: #FFFFFF;
  border: 2px solid #074E9F;
  box-shadow: none;
  border-radius: 16px;
  padding: 16px 32px;
  font-size: 48px !important;
  line-height: 60px;
  font-weight: 600;
  color: #074E9F;
  width: 100%;
  height: 92px; }

.buttonKeypad-blueborder img {
  height: 48px;
  margin-top: -10px; }

.buttonKeypad-blueborder:hover, .buttonKeypad-blueborder:focus {
  box-shadow: none;
  background: #FFFFFF;
  border: 2px solid #074E9F;
  color: #074E9F; }

.buttonKeypad-blueborder-bluebg {
  background: #074E9F;
  border: 2px solid #074E9F;
  box-shadow: none;
  border-radius: 16px;
  padding: 16px 32px;
  font-size: 48px !important;
  line-height: 60px;
  font-weight: 600;
  color: #FFFFFF;
  width: 100%;
  height: 92px; }

.buttonKeypad-blueborder-bluebg img {
  height: 48px;
  margin-top: -7px; }

.buttonKeypad-blueborder-bluebg:hover, .buttonKeypad-blueborder-bluebg:focus {
  box-shadow: none;
  background: #074E9F;
  border: 2px solid #074E9F;
  color: #FFFFFF; }

@media (max-width: 1024px) {
  .buttonKeypad-blueborder {
    width: 140px; }

  .buttonKeypad-blueborder-bluebg {
    width: 140px; }

  .button-greenborder-bold {
    width: 240px; }

  .button-blueborder-bold {
    width: 240px; } }
.linkBtn-top-102 img {
  margin-top: -102px;
  height: 36px;
  margin-left: 130px; }

.linkBtn-top-13 img {
  margin-top: -13px;
  height: 36px; }

.linkBtn-H28 img {
  height: 28px; }

.selector-nocolor .form-control {
  background-color: #074E9F;
  border: unset;
  color: #ffffff;
  width: fit-content;
  font-size: 28px;
  line-height: 40px;
  font-weight: 600; }

.selector-nocolor .form-control:focus {
  background-color: #074E9F;
  color: #ffffff;
  width: fit-content;
  font-size: 28px;
  line-height: 40px;
  font-weight: 600; }

.popup-noheader .modal-header {
  display: none; }

.popup-noheader .modal-content {
  border-radius: 16px; }

.linkBtn-top-10 img {
  margin-top: -10px;
  height: 28px; }

.button-menu-kiosk {
  background-color: #ffffff;
  border: 2px solid #E4E7EC;
  box-shadow: none;
  border-radius: 16px;
  padding: 24px;
  font-size: 28px !important;
  font-weight: 600;
  line-height: 40px;
  color: #344054;
  width: 100%;
  height: 136px;
  text-align: left; }

.button-menu-kiosk:hover, .button-menu-kiosk:focus {
  box-shadow: none;
  background: #ffffff;
  border: 2px solid #074e9f;
  color: #074e9f;
  opacity: unset; }

.groupBox-Kiosk {
  font-size: 20px; }

.groupBox-Kiosk .mx-groupbox-header {
  font-size: 24px;
  background: #d8e4f7;
  border: 1px solid #d8e4f7;
  border-radius: 8px 8px 0px 0px; }

.groupBox-Kiosk .mx-groupbox-body {
  background: #f7f7f7;
  border: 1px solid #E4E7EC;
  border-radius: 0px 0px 8px 8px !important; }

.listView-kiosk label {
  font-size: 32px;
  line-height: 40px;
  color: #344054;
  vertical-align: middle; }

.listView-kiosk li {
  color: #FFFFFF;
  margin: 16px 0;
  border: 2px solid #E4E7EC;
  border-radius: 8px !important;
  padding: 14px 10px !important; }

.listView-kiosk input[type=radio] {
  height: 36px;
  width: 36px; }

.listView-kiosk li.selected,
.listView-kiosk li.selected:hover {
  border: 2px solid #074E9F; }

.listView-kiosk li.mx-listview-empty {
  border: none; }

.listView-kiosk .mx-listview-searchbar {
  padding: 0 !important; }

.listView-kiosk .mx-listview-searchbar input {
  font-size: 24px !important; }

input[type=checkbox].BigCheckboxSelect-Blue {
  width: 658px;
  height: 88px;
  position: absolute;
  top: -25px;
  -webkit-appearance: none;
  -moz-appearance: none;
  appearance: none;
  left: -20px;
  border: 2px solid #E4E7EC;
  border-radius: 8px !important; }

input[type=checkbox].BigCheckboxSelect-Blue:checked {
  border: 2px solid #074E9F;
  border-radius: 8px !important;
  background-color: #d7ecf340; }

input[type=checkbox].BigCheckboxSelect-Blue:after {
  content: "";
  line-height: 1.2em;
  height: 36px;
  width: 36px;
  border: 2px solid #bfbfbf;
  background: #f7f7f7;
  border-radius: 50%;
  margin-left: 20px;
  margin-top: 25px; }

input[type=checkbox].BigCheckboxSelect-Blue:checked:after {
  content: "";
  background-color: #135592;
  border: 2px solid #104a80; }

input[type=checkbox].BigCheckboxSelect-Blue:focus {
  outline: none; }

.paging-kiosk ul a, .paging-kiosk ul li {
  border-radius: 0;
  color: black;
  cursor: pointer;
  display: block;
  float: left;
  font-size: 32px;
  height: auto;
  letter-spacing: 0.26px;
  line-height: 65px;
  min-height: 65px;
  min-width: 65px;
  width: auto;
  text-align: center;
  padding: 0; }

.paging-kiosk > ul > li {
  margin: 0 16px 8px 0; }

.btnReferenceSelector-kiosk {
  position: relative;
  z-index: 1;
  margin-top: -85px;
  float: right;
  box-shadow: none !important;
  background-color: transparent !important;
  border: none !important;
  outline: none !important;
  width: 100%;
  height: 67px; }

.pagination-kiosk span {
  font-size: 28px;
  font-weight: 600;
  line-height: 36px;
  color: #074E9F; }

.pagination-kiosk .mx-button, .pagination-kiosk .btn {
  outline: none !important;
  padding: 0px 14px 8px 14px; }

.template-kiosk .mx-templategrid-item {
  background-color: transparent;
  padding: 0; }

.template-kiosk .mx-layoutgrid {
  padding: 16px !important; }

.datePicker-kiosk .btn.mx-dateinput-select-button, .datePicker-kiosk .mx-button.mx-dateinput-select-button {
  padding: 14px;
  box-shadow: none;
  background-color: #ffffff;
  border: 2px solid #E4E7EC;
  border-radius: 8px;
  color: #074e9f; }

.datePicker-kiosk span {
  font-size: 32px;
  line-height: 38px; }

@media (min-width: 1024px) {
  .profile-desktop:has(.datePickerViewKiosk) .dijitCalendarContainer {
    font-size: 32px !important;
    user-select: none;
    width: auto;
    position: absolute !important;
    top: 10% !important;
    left: 10% !important;
    margin-top: 0px !important;
    margin-left: 20px !important;
    background-color: #ffffff !important;
    border: 1px solid #E4E7EC;
    border-radius: 16px;
    padding: 16px; }

  .profile-desktop:has(.datePickerViewKiosk) .dijitCalendarContainer tr th {
    background-color: #E4E7EC;
    color: #000;
    text-align: center;
    font-weight: 600; }

  .profile-desktop:has(.datePickerViewKiosk) .dijitCalendarContainer td {
    padding: 10px 35px !important; }

  .profile-desktop:has(.datePickerViewKiosk) .dijitCalendarContainer .dijitCalendarSelectedDate, .profile-desktop:has(.datePickerViewKiosk) .dijitCalendarContainer .dijitCalendarSelectedDate:hover {
    background: #074E9F !important; } }
.listview-noborder-nopad .mx-list .mx-listview-item {
  padding: 0px; }

.listview-noborder-nopad > ul > li {
  border: 0px;
  padding: 0px; }

.listview-noborder-nopad label {
  padding-bottom: 0px !important; }

.listview-noborder-nopad .mx-listview-empty label {
  font-size: 18px; }

.listview-noborder-nopad .mx-list {
  margin-top: 0; }

.thumbnail-ninetysixcircleborder {
  position: relative;
  width: 100%;
  height: 96px;
  overflow: hidden;
  border-radius: 50%;
  border: 3px solid #074E9F; }

.thumbnail-ninetysixcircleborder img {
  position: absolute;
  object-fit: cover;
  width: 100%;
  height: 100%; }

/*# sourceMappingURL=custom.css.map */