@import url("https://fonts.googleapis.com/css?family=Open+Sans:300,400,600,700");
@keyframes slideInUp {
  from {
    visibility: visible;
    transform: translate3d(0, 100%, 0);
  }
  to {
    transform: translate3d(0, 0, 0);
  }
}
.animated {
  animation-duration: 0.4s;
  animation-fill-mode: both;
}

.slideInUp {
  animation-name: slideInUp;
}

@keyframes slideInDown {
  from {
    visibility: visible;
    transform: translate3d(0, -100%, 0);
  }
  to {
    transform: translate3d(0, 0, 0);
  }
}
.slideInDown {
  animation-name: slideInDown;
}

@keyframes fadeIn {
  from {
    opacity: 0;
  }
  to {
    opacity: 1;
  }
}
.fadeIn {
  animation-name: fadeIn;
}

.mx-scrollcontainer .mx-scrollcontainer-wrapper {
  padding: 0;
}
.mx-scrollcontainer .mx-scrollcontainer-wrapper .mx-layoutgrid-fixed {
  width: 100%;
  margin: auto;
}
@media (min-width: 768px) {
  .mx-scrollcontainer .mx-scrollcontainer-wrapper .mx-layoutgrid-fixed {
    max-width: 750px;
  }
}
@media (min-width: 992px) {
  .mx-scrollcontainer .mx-scrollcontainer-wrapper .mx-layoutgrid-fixed {
    max-width: 970px;
  }
}
@media (min-width: 1200px) {
  .mx-scrollcontainer .mx-scrollcontainer-wrapper .mx-layoutgrid-fixed {
    max-width: 1170px;
  }
}

.mx-scrollcontainer .mx-placeholder {
  width: 100%;
  height: 100%;
}
@media (max-width: 767px) {
  .mx-scrollcontainer .mx-placeholder .mx-layoutgrid {
    padding: 15px 15px 15px 15px;
  }
}
@media (min-width: 768px) {
  .mx-scrollcontainer .mx-placeholder .mx-layoutgrid {
    padding: 30px 30px 30px 30px;
  }
}
@media (min-width: 992px) {
  .mx-scrollcontainer .mx-placeholder .mx-layoutgrid {
    padding: 30px 30px 30px 30px;
  }
}
.mx-scrollcontainer .mx-placeholder .mx-layoutgrid .mx-layoutgrid {
  padding: 0;
}

/* ==========================================================================
   Base

   Default settings
========================================================================== */
html {
  height: 100%;
}

body {
  min-height: 100%;
  color: #555555;
  background-color: #FFFFFF;
  font-family: "Open Sans", sans-serif;
  font-size: 14px;
  font-weight: normal;
  line-height: 1.42857;
}

a {
  -webkit-transition: 0.25s;
  -moz-transition: 0.25s;
  -o-transition: 0.25s;
  transition: 0.25s;
  color: #0595DB;
  -webkit-backface-visibility: hidden;
}

a:hover {
  text-decoration: underline;
  color: #036290;
}

a:focus {
  outline: thin dotted;
}

a:active,
a:hover {
  outline: 0;
}

input:focus,
button:focus,
.mx-link:focus {
  outline: 0;
}

div[tabindex] {
  outline: 0;
}

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

/* ==========================================================================
   Inputs

   The form-control class style all inputs
========================================================================== */
.form-control {
  display: block;
  width: 100%;
  height: auto;
  padding: 8px 10px;
  -webkit-transition: border-color ease-in-out 0.15s, box-shadow ease-in-out 0.15s;
  -moz-transition: border-color ease-in-out 0.15s, box-shadow ease-in-out 0.15s;
  -o-transition: border-color ease-in-out 0.15s, box-shadow ease-in-out 0.15s;
  transition: border-color ease-in-out 0.15s, box-shadow ease-in-out 0.15s;
  color: #555555;
  border: 1px solid #D7D7D7;
  border-radius: 4px;
  background-color: #FFF;
  background-image: none;
  -webkit-box-shadow: none;
  box-shadow: none;
  font-size: 14px;
  line-height: 1.42857;
  -moz-appearance: none;
  -webkit-appearance: none;
}

.form-control:focus {
  border-color: #0595DB;
  outline: 0;
  background-color: #FFF;
  -webkit-box-shadow: none;
  box-shadow: none;
}

textarea.form-control {
  height: auto;
}

select.form-control {
  padding-right: 30px;
  background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='15px' height='8px'><polyline id='Line' fill='none' stroke='%23555555' points='0.5 0.5 6 6 11.545361 0.5'></polyline></svg>");
  background-repeat: no-repeat;
  background-position: calc(100% - 10px) center;
  -moz-appearance: none;
  -webkit-appearance: none;
}

.form-control-lined {
  border: 0;
  border-bottom: 1px solid #D7D7D7;
  border-radius: 0;
  background-color: transparent;
}
.form-control-lined:focus {
  background-color: transparent;
}

.form-control-static, .form-group div[class*="textBox"] > label,
.form-group div[class*="textArea"] > label,
.form-group div[class*="datePicker"] > label {
  overflow: hidden;
  min-height: auto;
  padding-top: 8px;
  padding-bottom: 8px;
  padding-left: 10px;
  border-bottom: 1px solid #F0F0EE;
  font-size: 14px;
  line-height: 1.42857;
}

.mx-textarea label {
  height: auto;
}

.mx-fileinput {
  /* File input widget hover fix */
}
.mx-fileinput .mx-wrapped-label {
  display: inline-block;
  width: 200px;
}
.mx-fileinput .mx-wrapped-form .mx-wrapped-input {
  cursor: pointer;
}
.mx-fileinput .mx-wrapped-form .mx-fileinput-upload-button:hover {
  background-color: #FFF;
}

.form-group {
  margin-bottom: 15px;
}
.form-group > [class*="col-"] {
  padding-right: 15px;
  padding-left: 15px;
}
.form-group .control-label {
  color: #666;
  font-size: 14px;
  font-weight: 600;
}

@media (min-width: 768px) {
  .form-horizontal .control-label {
    padding-top: 8px;
    padding-bottom: 8px;
    line-height: 1.42857;
  }
}

/* ==========================================================================
   Alerts

   Default Bootstrap Alert boxes. Provide contextual feedback messages for typical user actions with the handful of available and flexible alert messages
========================================================================== */
.alert {
  margin-top: 0;
  padding: 15px;
  border: 0;
  border-radius: 4px;
}

.alert-bordered {
  border: 1px solid;
}

.alert-success {
  color: #477901;
  border-color: #538d01;
  background-color: #e4f4cc;
}

.alert-info {
  color: #2b6a94;
  border-color: #327bad;
  background-color: #daeffd;
}

.alert-warning {
  color: #955d11;
  border-color: #ae6d14;
  background-color: #feebd2;
}

.alert-danger {
  color: #8e1116;
  border-color: #a61419;
  background-color: #fbd2d3;
}

.has-error .alert {
  margin-top: 8px;
  margin-bottom: 0;
}

/* ==========================================================================
   Backgrounds

   Different background components, all managed by variables
========================================================================== */
.background-main {
  background-color: #FFFFFF !important;
}

.background-secondary {
  background-color: #F5F8FD !important;
}

.background-default {
  background-color: #DDDDDD !important;
}

.background-default-darker {
  background-color: #858585 !important;
}

.background-default-dark {
  background-color: #9b9b9b !important;
}

.background-default-light {
  background-color: #ebebeb !important;
}

.background-default-lighter {
  background-color: #f8f8f8 !important;
}

.background-inverse {
  background-color: #252C36 !important;
}

.background-inverse-darker {
  background-color: #161a20 !important;
}

.background-inverse-dark {
  background-color: #1a1f26 !important;
}

.background-inverse-light {
  background-color: #7c8086 !important;
}

.background-inverse-lighter {
  background-color: #d3d5d7 !important;
}

.background-primary {
  background-color: #0595DB !important;
}

.background-primary-darker {
  background-color: #035983 !important;
}

.background-primary-dark {
  background-color: #046899 !important;
}

.background-primary-light {
  background-color: #69bfe9 !important;
}

.background-primary-lighter {
  background-color: #cdeaf8 !important;
}

.background-info {
  background-color: #48B0F7 !important;
}

.background-info-darker {
  background-color: #2b6a94 !important;
}

.background-info-dark {
  background-color: #327bad !important;
}

.background-info-light {
  background-color: #91d0fa !important;
}

.background-info-lighter {
  background-color: #daeffd !important;
}

.background-success {
  background-color: #76CA02 !important;
}

.background-success-darker {
  background-color: #477901 !important;
}

.background-success-dark {
  background-color: #538d01 !important;
}

.background-success-light {
  background-color: #addf67 !important;
}

.background-success-lighter {
  background-color: #e4f4cc !important;
}

.background-warning {
  background-color: #F99B1D !important;
}

.background-warning-darker {
  background-color: #955d11 !important;
}

.background-warning-dark {
  background-color: #ae6d14 !important;
}

.background-warning-light {
  background-color: #fbc377 !important;
}

.background-warning-lighter {
  background-color: #feebd2 !important;
}

.background-danger {
  background-color: #ED1C24 !important;
}

.background-danger-darker {
  background-color: #8e1116 !important;
}

.background-danger-dark {
  background-color: #a61419 !important;
}

.background-danger-light {
  background-color: #f4777c !important;
}

.background-danger-lighter {
  background-color: #fbd2d3 !important;
}

.background-brand-gradient {
  background-image: linear-gradient(152deg, #0CC7F0 0%, #087ECC 51%, #077AC9 55%, #0659B9 78%);
}

/* ==========================================================================
   Buttons

   Default Bootstrap and Mendix Buttons
========================================================================== */
.btn,
.mx-button {
  display: inline-block;
  margin-bottom: 0;
  padding: 0.6em 1em;
  cursor: pointer;
  -webkit-user-select: none;
  -moz-user-select: none;
  -ms-user-select: none;
  user-select: none;
  -webkit-transition: all 0.2s ease-in-out;
  -moz-transition: all 0.2s ease-in-out;
  -o-transition: all 0.2s ease-in-out;
  transition: all 0.2s ease-in-out;
  text-align: center;
  vertical-align: middle;
  white-space: nowrap;
  color: #0595DB;
  border: 1px solid transparent;
  border-radius: 4px;
  background-color: #FFF;
  background-image: none;
  box-shadow: none;
  text-shadow: none;
  font-size: 14px;
  line-height: 1.42857;
}
.btn:hover, .btn:focus, .btn:active,
.mx-button:hover,
.mx-button:focus,
.mx-button:active {
  outline: none;
  box-shadow: none;
}

.mx-link {
  padding: 0;
  color: #0595DB;
}
.mx-link a {
  color: inherit;
}

.btn img,
.mx-button img,
.mx-link img {
  height: 18px;
  margin-top: -1px;
  margin-right: 5px;
}

.dj_ie8 .mx-link {
  margin-right: 0;
  white-space: normal;
}

.btn,
.btn-default {
  color: #0595DB;
  border-color: #DDDDDD;
  background-color: #FFF;
}
.btn:hover, .btn:focus, .btn:active, .btn.active, .open > .btn.dropdown-toggle,
.btn-default:hover,
.btn-default:focus,
.btn-default:active,
.btn-default.active, .open >
.btn-default.dropdown-toggle {
  color: #0595DB;
  border-color: #DDDDDD;
  background-color: #DDDDDD;
}
.btn:active, .btn.active, .open > .btn.dropdown-toggle,
.btn-default:active,
.btn-default.active, .open >
.btn-default.dropdown-toggle {
  background-image: none;
}
.btn.disabled, .btn.disabled:hover, .btn.disabled:focus, .btn.disabled:active, .btn.disabled.active, .btn[disabled], .btn[disabled]:hover, .btn[disabled]:focus, .btn[disabled]:active, .btn[disabled].active,
.btn fieldset[disabled],
.btn fieldset[disabled]:hover,
.btn fieldset[disabled]:focus,
.btn fieldset[disabled]:active,
.btn fieldset[disabled].active,
.btn-default.disabled,
.btn-default.disabled:hover,
.btn-default.disabled:focus,
.btn-default.disabled:active,
.btn-default.disabled.active,
.btn-default[disabled],
.btn-default[disabled]:hover,
.btn-default[disabled]:focus,
.btn-default[disabled]:active,
.btn-default[disabled].active,
.btn-default fieldset[disabled],
.btn-default fieldset[disabled]:hover,
.btn-default fieldset[disabled]:focus,
.btn-default fieldset[disabled]:active,
.btn-default fieldset[disabled].active {
  border-color: #DDDDDD;
  background-color: #FFF;
}
.btn.btn-bordered,
.btn-default.btn-bordered {
  background-color: transparent;
}
.btn.btn-bordered:hover, .btn.btn-bordered:focus, .btn.btn-bordered:active, .btn.btn-bordered.active, .open > .btn.btn-bordered.dropdown-toggle,
.btn-default.btn-bordered:hover,
.btn-default.btn-bordered:focus,
.btn-default.btn-bordered:active,
.btn-default.btn-bordered.active, .open >
.btn-default.btn-bordered.dropdown-toggle {
  color: #0595DB;
  border-color: #DDDDDD;
  background-color: #DDDDDD;
}
.btn.btn-link,
.btn-default.btn-link {
  text-decoration: none;
  border-color: transparent;
  background-color: transparent;
}
.btn.btn-link:hover,
.btn-default.btn-link:hover {
  border-color: #EEEEEE;
  background-color: #EEEEEE;
}

.btn-primary, .datagrid-fullsearch.mx-grid .mx-grid-search-button {
  color: #FFF;
  border-color: #0595DB;
  background-color: #0595DB;
}
.btn-primary:hover, .datagrid-fullsearch.mx-grid .mx-grid-search-button:hover, .btn-primary:focus, .datagrid-fullsearch.mx-grid .mx-grid-search-button:focus, .btn-primary:active, .datagrid-fullsearch.mx-grid .mx-grid-search-button:active, .btn-primary.active, .datagrid-fullsearch.mx-grid .active.mx-grid-search-button, .open > .btn-primary.dropdown-toggle, .datagrid-fullsearch.mx-grid .open > .dropdown-toggle.mx-grid-search-button {
  color: #FFF;
  border-color: #0477af;
  background-color: #0477af;
}
.btn-primary:active, .datagrid-fullsearch.mx-grid .mx-grid-search-button:active, .btn-primary.active, .datagrid-fullsearch.mx-grid .active.mx-grid-search-button, .open > .btn-primary.dropdown-toggle, .datagrid-fullsearch.mx-grid .open > .dropdown-toggle.mx-grid-search-button {
  background-image: none;
}
.btn-primary.disabled, .datagrid-fullsearch.mx-grid .disabled.mx-grid-search-button, .btn-primary.disabled:hover, .datagrid-fullsearch.mx-grid .disabled.mx-grid-search-button:hover, .btn-primary.disabled:focus, .datagrid-fullsearch.mx-grid .disabled.mx-grid-search-button:focus, .btn-primary.disabled:active, .datagrid-fullsearch.mx-grid .disabled.mx-grid-search-button:active, .btn-primary.disabled.active, .datagrid-fullsearch.mx-grid .disabled.active.mx-grid-search-button, .btn-primary[disabled], .datagrid-fullsearch.mx-grid [disabled].mx-grid-search-button, .btn-primary[disabled]:hover, .datagrid-fullsearch.mx-grid [disabled].mx-grid-search-button:hover, .btn-primary[disabled]:focus, .datagrid-fullsearch.mx-grid [disabled].mx-grid-search-button:focus, .btn-primary[disabled]:active, .datagrid-fullsearch.mx-grid [disabled].mx-grid-search-button:active, .btn-primary[disabled].active, .datagrid-fullsearch.mx-grid [disabled].active.mx-grid-search-button,
.btn-primary fieldset[disabled],
.datagrid-fullsearch.mx-grid .mx-grid-search-button fieldset[disabled],
.btn-primary fieldset[disabled]:hover,
.datagrid-fullsearch.mx-grid .mx-grid-search-button fieldset[disabled]:hover,
.btn-primary fieldset[disabled]:focus,
.datagrid-fullsearch.mx-grid .mx-grid-search-button fieldset[disabled]:focus,
.btn-primary fieldset[disabled]:active,
.datagrid-fullsearch.mx-grid .mx-grid-search-button fieldset[disabled]:active,
.btn-primary fieldset[disabled].active,
.datagrid-fullsearch.mx-grid .mx-grid-search-button fieldset[disabled].active {
  border-color: #0595DB;
  background-color: #0595DB;
}
.btn-primary.btn-bordered, .datagrid-fullsearch.mx-grid .btn-bordered.mx-grid-search-button {
  background-color: transparent;
  color: #0595DB;
}
.btn-primary.btn-bordered:hover, .datagrid-fullsearch.mx-grid .btn-bordered.mx-grid-search-button:hover, .btn-primary.btn-bordered:focus, .datagrid-fullsearch.mx-grid .btn-bordered.mx-grid-search-button:focus, .btn-primary.btn-bordered:active, .datagrid-fullsearch.mx-grid .btn-bordered.mx-grid-search-button:active, .btn-primary.btn-bordered.active, .datagrid-fullsearch.mx-grid .btn-bordered.active.mx-grid-search-button, .open > .btn-primary.btn-bordered.dropdown-toggle, .datagrid-fullsearch.mx-grid .open > .btn-bordered.dropdown-toggle.mx-grid-search-button {
  color: #FFF;
  border-color: #0595DB;
  background-color: #0595DB;
}
.btn-primary.btn-link, .datagrid-fullsearch.mx-grid .btn-link.mx-grid-search-button {
  text-decoration: none;
  border-color: transparent;
  background-color: transparent;
  color: #0595DB;
}
.btn-primary.btn-link:hover, .datagrid-fullsearch.mx-grid .btn-link.mx-grid-search-button:hover {
  border-color: #EEEEEE;
  background-color: #EEEEEE;
}

.btn-inverse {
  color: #FFF;
  border-color: #252C36;
  background-color: #252C36;
}
.btn-inverse:hover, .btn-inverse:focus, .btn-inverse:active, .btn-inverse.active, .open > .btn-inverse.dropdown-toggle {
  color: #FFF;
  border-color: #51565e;
  background-color: #51565e;
}
.btn-inverse:active, .btn-inverse.active, .open > .btn-inverse.dropdown-toggle {
  background-image: none;
}
.btn-inverse.disabled, .btn-inverse.disabled:hover, .btn-inverse.disabled:focus, .btn-inverse.disabled:active, .btn-inverse.disabled.active, .btn-inverse[disabled], .btn-inverse[disabled]:hover, .btn-inverse[disabled]:focus, .btn-inverse[disabled]:active, .btn-inverse[disabled].active,
.btn-inverse fieldset[disabled],
.btn-inverse fieldset[disabled]:hover,
.btn-inverse fieldset[disabled]:focus,
.btn-inverse fieldset[disabled]:active,
.btn-inverse fieldset[disabled].active {
  border-color: #252C36;
  background-color: #252C36;
}
.btn-inverse.btn-bordered {
  background-color: transparent;
  color: #252C36;
}
.btn-inverse.btn-bordered:hover, .btn-inverse.btn-bordered:focus, .btn-inverse.btn-bordered:active, .btn-inverse.btn-bordered.active, .open > .btn-inverse.btn-bordered.dropdown-toggle {
  color: #FFF;
  border-color: #252C36;
  background-color: #252C36;
}
.btn-inverse.btn-link {
  text-decoration: none;
  border-color: transparent;
  background-color: transparent;
  color: #252C36;
}
.btn-inverse.btn-link:hover {
  border-color: #EEEEEE;
  background-color: #EEEEEE;
}

.btn-success {
  color: #FFF;
  border-color: #76CA02;
  background-color: #76CA02;
}
.btn-success:hover, .btn-success:focus, .btn-success:active, .btn-success.active, .open > .btn-success.dropdown-toggle {
  color: #FFF;
  border-color: #5ea202;
  background-color: #5ea202;
}
.btn-success:active, .btn-success.active, .open > .btn-success.dropdown-toggle {
  background-image: none;
}
.btn-success.disabled, .btn-success.disabled:hover, .btn-success.disabled:focus, .btn-success.disabled:active, .btn-success.disabled.active, .btn-success[disabled], .btn-success[disabled]:hover, .btn-success[disabled]:focus, .btn-success[disabled]:active, .btn-success[disabled].active,
.btn-success fieldset[disabled],
.btn-success fieldset[disabled]:hover,
.btn-success fieldset[disabled]:focus,
.btn-success fieldset[disabled]:active,
.btn-success fieldset[disabled].active {
  border-color: #76CA02;
  background-color: #76CA02;
}
.btn-success.btn-bordered {
  background-color: transparent;
  color: #76CA02;
}
.btn-success.btn-bordered:hover, .btn-success.btn-bordered:focus, .btn-success.btn-bordered:active, .btn-success.btn-bordered.active, .open > .btn-success.btn-bordered.dropdown-toggle {
  color: #FFF;
  border-color: #76CA02;
  background-color: #76CA02;
}
.btn-success.btn-link {
  text-decoration: none;
  border-color: transparent;
  background-color: transparent;
  color: #76CA02;
}
.btn-success.btn-link:hover {
  border-color: #EEEEEE;
  background-color: #EEEEEE;
}

.btn-info {
  color: #FFF;
  border-color: #48B0F7;
  background-color: #48B0F7;
}
.btn-info:hover, .btn-info:focus, .btn-info:active, .btn-info.active, .open > .btn-info.dropdown-toggle {
  color: #FFF;
  border-color: #3a8dc6;
  background-color: #3a8dc6;
}
.btn-info:active, .btn-info.active, .open > .btn-info.dropdown-toggle {
  background-image: none;
}
.btn-info.disabled, .btn-info.disabled:hover, .btn-info.disabled:focus, .btn-info.disabled:active, .btn-info.disabled.active, .btn-info[disabled], .btn-info[disabled]:hover, .btn-info[disabled]:focus, .btn-info[disabled]:active, .btn-info[disabled].active,
.btn-info fieldset[disabled],
.btn-info fieldset[disabled]:hover,
.btn-info fieldset[disabled]:focus,
.btn-info fieldset[disabled]:active,
.btn-info fieldset[disabled].active {
  border-color: #48B0F7;
  background-color: #48B0F7;
}
.btn-info.btn-bordered {
  background-color: transparent;
  color: #48B0F7;
}
.btn-info.btn-bordered:hover, .btn-info.btn-bordered:focus, .btn-info.btn-bordered:active, .btn-info.btn-bordered.active, .open > .btn-info.btn-bordered.dropdown-toggle {
  color: #FFF;
  border-color: #48B0F7;
  background-color: #48B0F7;
}
.btn-info.btn-link {
  text-decoration: none;
  border-color: transparent;
  background-color: transparent;
  color: #48B0F7;
}
.btn-info.btn-link:hover {
  border-color: #EEEEEE;
  background-color: #EEEEEE;
}

.btn-warning {
  color: #FFF;
  border-color: #F99B1D;
  background-color: #F99B1D;
}
.btn-warning:hover, .btn-warning:focus, .btn-warning:active, .btn-warning.active, .open > .btn-warning.dropdown-toggle {
  color: #FFF;
  border-color: #c77c17;
  background-color: #c77c17;
}
.btn-warning:active, .btn-warning.active, .open > .btn-warning.dropdown-toggle {
  background-image: none;
}
.btn-warning.disabled, .btn-warning.disabled:hover, .btn-warning.disabled:focus, .btn-warning.disabled:active, .btn-warning.disabled.active, .btn-warning[disabled], .btn-warning[disabled]:hover, .btn-warning[disabled]:focus, .btn-warning[disabled]:active, .btn-warning[disabled].active,
.btn-warning fieldset[disabled],
.btn-warning fieldset[disabled]:hover,
.btn-warning fieldset[disabled]:focus,
.btn-warning fieldset[disabled]:active,
.btn-warning fieldset[disabled].active {
  border-color: #F99B1D;
  background-color: #F99B1D;
}
.btn-warning.btn-bordered {
  background-color: transparent;
  color: #F99B1D;
}
.btn-warning.btn-bordered:hover, .btn-warning.btn-bordered:focus, .btn-warning.btn-bordered:active, .btn-warning.btn-bordered.active, .open > .btn-warning.btn-bordered.dropdown-toggle {
  color: #FFF;
  border-color: #F99B1D;
  background-color: #F99B1D;
}
.btn-warning.btn-link {
  text-decoration: none;
  border-color: transparent;
  background-color: transparent;
  color: #F99B1D;
}
.btn-warning.btn-link:hover {
  border-color: #EEEEEE;
  background-color: #EEEEEE;
}

.btn-danger {
  color: #FFF;
  border-color: #ED1C24;
  background-color: #ED1C24;
}
.btn-danger:hover, .btn-danger:focus, .btn-danger:active, .btn-danger.active, .open > .btn-danger.dropdown-toggle {
  color: #FFF;
  border-color: #be161d;
  background-color: #be161d;
}
.btn-danger:active, .btn-danger.active, .open > .btn-danger.dropdown-toggle {
  background-image: none;
}
.btn-danger.disabled, .btn-danger.disabled:hover, .btn-danger.disabled:focus, .btn-danger.disabled:active, .btn-danger.disabled.active, .btn-danger[disabled], .btn-danger[disabled]:hover, .btn-danger[disabled]:focus, .btn-danger[disabled]:active, .btn-danger[disabled].active,
.btn-danger fieldset[disabled],
.btn-danger fieldset[disabled]:hover,
.btn-danger fieldset[disabled]:focus,
.btn-danger fieldset[disabled]:active,
.btn-danger fieldset[disabled].active {
  border-color: #ED1C24;
  background-color: #ED1C24;
}
.btn-danger.btn-bordered {
  background-color: transparent;
  color: #ED1C24;
}
.btn-danger.btn-bordered:hover, .btn-danger.btn-bordered:focus, .btn-danger.btn-bordered:active, .btn-danger.btn-bordered.active, .open > .btn-danger.btn-bordered.dropdown-toggle {
  color: #FFF;
  border-color: #ED1C24;
  background-color: #ED1C24;
}
.btn-danger.btn-link {
  text-decoration: none;
  border-color: transparent;
  background-color: transparent;
  color: #ED1C24;
}
.btn-danger.btn-link:hover {
  border-color: #EEEEEE;
  background-color: #EEEEEE;
}

.btn-lg {
  font-size: 16px;
}
.btn-lg img {
  height: calc($font-size-small + 4px);
}

.btn-sm {
  font-size: 12px;
}
.btn-sm img {
  height: calc($font-size-small + 4px);
}

.btn-image {
  padding: 0;
  vertical-align: middle;
  border-style: none;
  background-color: transparent;
}
.btn-image img {
  display: block;
  height: auto;
}
.btn-image:hover, .btn-image:focus {
  background-color: transparent;
}

.btn-icon > img, .btn-icon > .glyphicon {
  margin: 0;
}

.btn-icon-right > img, .btn-icon-right > .glyphicon {
  float: right;
  margin-left: 5px;
}

.btn-icon-top {
  padding-right: 0;
  padding-left: 0;
}
.btn-icon-top > img, .btn-icon-top > .glyphicon {
  display: block;
  margin: 0 0 5px 0;
}

.profile-phone .btn,
.profile-phone .mx-link {
  -webkit-transition: all 0.2s;
  -moz-transition: all 0.2s;
  transition: all 0.2s;
}
.profile-phone .btn:active,
.profile-phone .mx-link:active {
  -webkit-transform: translateY(1px);
  transform: translateY(1px);
}

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

   Default Mendix Grid (used for Mendix Datagrid)
========================================================================== */
.mx-grid {
  padding: 0px;
  border: 0;
  border-radius: 0;
}
.mx-grid .mx-grid-controlbar {
  margin: 10px 0;
  /* Paging */
}
.mx-grid .mx-grid-controlbar .mx-grid-pagingbar {
  /* Buttons */
  /* Text Paging .. to .. to .. */
}
.mx-grid .mx-grid-controlbar .mx-grid-pagingbar .mx-button {
  padding: 6px;
  color: #888888;
  border-color: transparent;
  background-color: transparent;
}
.mx-grid .mx-grid-controlbar .mx-grid-pagingbar .mx-button:hover {
  color: #0595DB;
  border-color: transparent;
  background-color: transparent;
}
.mx-grid .mx-grid-controlbar .mx-grid-pagingbar .mx-grid-paging-status {
  padding: 0 8px 8px;
}
.mx-grid .mx-grid-searchbar {
  margin: 10px 0;
}
.mx-grid .mx-grid-searchbar .mx-grid-search-item .mx-grid-search-label {
  vertical-align: middle;
}
.mx-grid .mx-grid-searchbar .mx-grid-search-item .mx-grid-search-label label {
  padding-top: 5px;
}
.mx-grid .mx-grid-searchbar .mx-grid-search-item .mx-grid-search-input .form-control {
  height: 28px;
  font-size: 11px;
}
.mx-grid .mx-grid-searchbar .mx-grid-search-item .mx-grid-search-input select.form-control {
  padding: 3px;
  vertical-align: middle;
}
.mx-grid .mx-grid-searchbar .mx-grid-search-item .mx-grid-search-input .mx-button {
  height: 28px;
  padding-top: 2px;
  padding-bottom: 2px;
}

.mx-dataview .mx-grid {
  border: 0;
}

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

   Default Mendix Datagrid Widget. The datagrid shows a list of objects in a grid
========================================================================== */
.mx-datagrid .mx-datagrid-head-table {
  border-width: 0;
  background-color: transparent;
  /* Table header */
}
.mx-datagrid .mx-datagrid-head-table th {
  border-style: solid;
  border-color: #D7D7D7;
  border-top-width: 0;
  border-right: 0;
  border-bottom-width: 1px;
  border-left: 0;
  background-color: transparent;
}
.mx-datagrid .mx-datagrid-head-table .mx-datagrid-head-wrapper {
  padding: 15px 15px 15px 15px;
  vertical-align: middle;
}
.mx-datagrid .mx-datagrid-head-table .mx-datagrid-head-wrapper .mx-datagrid-head-caption {
  white-space: normal;
}
.mx-datagrid .mx-datagrid-body-table {
  border-width: 0;
  /* Table Body */
  /* Table Footer */
}
.mx-datagrid .mx-datagrid-body-table .mx-datagrid-body tr td {
  padding: 15px 15px 15px 15px;
  vertical-align: middle;
  border-width: 0;
  border-color: #D7D7D7;
  border-bottom-width: 1px;
  border-bottom-style: solid;
  background-color: #FFF;
  /* Text without spaces */
}
.mx-datagrid .mx-datagrid-body-table .mx-datagrid-body tr td:focus {
  outline: none;
}
.mx-datagrid .mx-datagrid-body-table .mx-datagrid-body tr td .mx-datagrid-data-wrapper {
  text-overflow: ellipsis;
}
.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 {
  color: #555555;
  background-color: #f3f3f3 !important;
}
.mx-datagrid .mx-datagrid-body-table .mx-datagrid-foot > tr > th {
  padding: 15px 15px 15px 15px;
  border-width: 0;
  background-color: #D7D7D7;
}
.mx-datagrid .mx-datagrid-body-table .mx-datagrid-foot > tr > td {
  padding: 15px 15px 15px 15px;
  border-width: 0;
  background-color: #FFF;
  font-weight: bold;
}
.mx-datagrid .mx-datagrid-body-table *:focus {
  outline: 0;
}

.datagrid-striped.mx-datagrid .mx-datagrid-head-table th {
  border-width: 0;
}
.datagrid-striped.mx-datagrid .mx-datagrid-body-table .mx-datagrid-body tr td {
  border-top-width: 0;
}
.datagrid-striped.mx-datagrid .mx-datagrid-body-table .mx-datagrid-body tr:nth-child(odd) td {
  background-color: #fbfbfb;
}

.datagrid-bordered.mx-datagrid .mx-datagrid-head-table th {
  border: 1px solid #D7D7D7;
  border-bottom-width: 1px;
}
.datagrid-bordered.mx-datagrid .mx-datagrid-body-table {
  border: 1px solid;
}
.datagrid-bordered.mx-datagrid .mx-datagrid-body-table .mx-datagrid-body tr td {
  border: 1px solid #D7D7D7;
}
.datagrid-bordered.mx-datagrid .mx-datagrid-foot > tr > th {
  border-width: 0;
  background-color: #D7D7D7;
}
.datagrid-bordered.mx-datagrid .mx-datagrid-foot > tr > td {
  border-width: 1px;
}

.datagrid-transparent.mx-datagrid .mx-datagrid-head-table {
  background-color: transparent;
}
.datagrid-transparent.mx-datagrid .mx-datagrid-body-table .mx-datagrid-body tr:nth-of-type(odd) {
  background-color: transparent;
}
.datagrid-transparent.mx-datagrid .mx-datagrid-body-table .mx-datagrid-body tr td {
  background-color: transparent;
}

.datagrid-hover.mx-datagrid .mx-datagrid-body-table .mx-datagrid-body tr:hover td {
  background-color: #f7f7f7 !important;
}
.datagrid-hover.mx-datagrid .mx-datagrid-body-table .mx-datagrid-body tr.selected:hover td {
  background-color: #ebebeb !important;
}

.datagrid-lg.mx-datagrid .mx-datagrid-head-table .mx-datagrid-head-wrapper {
  padding: 30px 30px 30px 30px;
}
.datagrid-lg.mx-datagrid .mx-datagrid-body-table .mx-datagrid-body tr td {
  padding: 30px 30px 30px 30px;
}

.datagrid-sm.mx-datagrid .mx-datagrid-head-table .mx-datagrid-head-wrapper {
  padding: 7.5px 7.5px 7.5px 7.5px;
}
.datagrid-sm.mx-datagrid .mx-datagrid-body-table .mx-datagrid-body tr td {
  padding: 7.5px 7.5px 7.5px grid-padding-left/2;
}

.datagrid-fullsearch.mx-grid .mx-grid-reset-button {
  display: none;
}
.datagrid-fullsearch.mx-grid .mx-grid-search-item {
  display: block;
}
.datagrid-fullsearch.mx-grid .mx-grid-search-label {
  display: none;
}
.datagrid-fullsearch.mx-grid .mx-grid-searchbar .mx-grid-search-controls {
  position: absolute;
  right: 0;
}
.datagrid-fullsearch.mx-grid .mx-grid-searchbar .mx-grid-search-input {
  width: 80%;
  padding-left: 0;
}
.datagrid-fullsearch.mx-grid .mx-grid-searchbar .mx-grid-search-input .form-control {
  height: 35px;
  font-size: 12px;
}

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

   Default Mendix Dataview Widget. The data view is used for showing the contents of exactly one object
========================================================================== */
.mx-dataview {
  /* Control bar */
  /* Dataview-content gives problems for nexted layout grid containers */
  /* Dataview empty message */
}
.mx-dataview .mx-dataview-controls {
  clear: both;
  margin-top: 10px;
  padding: 8px 0;
  border-top: 1px solid #D7D7D7;
  border-radius: 0;
  background-color: transparent;
  /* Buttons */
}
.mx-dataview .mx-dataview-controls .mx-button {
  margin-right: 0.3em;
  margin-bottom: 0;
}
.mx-dataview .mx-dataview-controls .mx-button:last-child {
  margin-right: 0;
}
.mx-dataview > .mx-dataview-content > .mx-container-nested > .row {
  margin-right: 0;
  margin-left: 0;
}
.mx-dataview .mx-dataview-message {
  color: #555555;
  background: #FFFFFF;
}

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

   Default Mendix Mobile Header
========================================================================== */
.mx-header {
  z-index: 100;
  display: flex;
  width: 100%;
  height: 45px;
  padding: 0;
  text-align: initial;
  color: #555;
  border-bottom: 1px solid #D7D7D7;
  background-color: #FFFFFF;
  box-shadow: 0 1px 4px 0 rgba(0, 0, 0, 0.14);
}
.mx-header div.mx-header-left,
.mx-header div.mx-header-right {
  position: relative;
  top: initial;
  right: initial;
  left: initial;
  display: flex;
  align-items: center;
  width: 25%;
  height: 100%;
}
.mx-header div.mx-header-left .mx-placeholder,
.mx-header div.mx-header-right .mx-placeholder {
  display: flex;
  align-items: center;
  height: 100%;
}
.mx-header div.mx-header-left .mx-placeholder {
  order: 1;
}
.mx-header div.mx-header-left .mx-placeholder .mx-placeholder {
  justify-content: flex-start;
}
.mx-header div.mx-header-center {
  overflow: hidden;
  flex: 1;
  order: 2;
  text-align: center;
}
.mx-header div.mx-header-center .mx-title {
  overflow: hidden;
  width: 100%;
  margin: 0;
  text-overflow: ellipsis;
  color: #555;
  font-size: 17px;
  line-height: 45px;
}
.mx-header div.mx-header-right {
  order: 3;
}
.mx-header div.mx-header-right .mx-placeholder {
  justify-content: flex-end;
}
.mx-header .mx-link {
  display: flex;
  align-items: center;
  height: 100%;
  -webkit-transition: all 0.2s;
  -moz-transition: all 0.2s;
  transition: all 0.2s;
}
.mx-header .mx-link a {
  text-decoration: none;
}
.mx-header .mx-link .glyphicon {
  top: 0;
  font-size: 23px;
}
.mx-header .mx-link:active {
  -webkit-transform: translateY(1px);
  transform: translateY(1px);
  color: #036290;
}
.mx-header .mx-link,
.mx-header .btn,
.mx-header img {
  padding: 0 8px;
}
.mx-header .mx-sidebartoggle {
  font-size: 24px;
  line-height: 45px;
}
.mx-header .mx-sidebartoggle img {
  height: 20px;
}

body[dir="rtl"] .mx-header-left {
  order: 3;
}
body[dir="rtl"] .mx-header-right {
  order: 1;
}

/*
* Mendix Documentation
* Special styles for presenting components
*/
/*
* Dijit Widgets
*
* Default Dojo Dijit Widgets
*/
/*
 * Dijit Calendar Widget
 *
 * Used in dataviews
 */
.dijitCalendarContainer {
  /* (must be higher than popup z-index) */
  z-index: 10010 !important;
  padding: 10px;
  border: 1px solid #D1D6E4;
  border-radius: 4px;
  background: #FFFFFF;
  box-shadow: 0 2px 10px 0 rgba(0, 0, 0, 0.06);
  font-size: 12px;
}
.dijitCalendarContainer tr th {
  text-align: center;
  color: #0595DB;
}
.dijitCalendarContainer tr th,
.dijitCalendarContainer tr td {
  padding: 10px;
  text-align: center;
}
.dijitCalendarContainer tr td .dijitCalendarDateLabel {
  color: #2D3E4E;
}
.dijitCalendarContainer tr tfoot h3 {
  margin: 0;
  padding: 0;
  font-size: inherit;
}
.dijitCalendarContainer tr .dijitCalendarNextMonth span,
.dijitCalendarContainer tr .dijitCalendarPreviousMonth span {
  color: #abbecf;
}
.dijitCalendarContainer .dijitCalendarMonthLabel {
  color: #0595DB;
}
.dijitCalendarContainer .dijitButtonNode {
  border: 0;
}
.dijitCalendarContainer .dijitCalendarArrow {
  cursor: pointer;
}
.dijitCalendarContainer .dijitCalendarSelectedDate,
.dijitCalendarContainer .dijitCalendarSelectedDate:hover {
  border-radius: 50%;
  background: #0595DB;
}
.dijitCalendarContainer .dijitCalendarSelectedDate .dijitCalendarDateLabel,
.dijitCalendarContainer .dijitCalendarSelectedDate:hover .dijitCalendarDateLabel {
  color: #FFFFFF;
}
.dijitCalendarContainer .dijitCalendarHoveredDate {
  border-radius: 50%;
  background-color: #DDDDDD;
}
.dijitCalendarContainer .dijitCalendarHoveredDate .dijitCalendarDateLabel {
  color: #0595DB;
}
.dijitCalendarContainer .dijitCalendarYearContainer {
  text-align: center;
}
.dijitCalendarContainer .dijitCalendarYearContainer span {
  color: #7dd2fc;
}
.dijitCalendarContainer .dijitCalendarYearContainer span.dijitCalendarSelectedYear {
  color: #0595DB;
}
.dijitCalendarContainer .dijitCalendarYearContainer span:hover {
  text-decoration: underline;
  background-color: transparent;
}
.dijitCalendarContainer .dijitCalendarMonthContainer th:first-child {
  border-top-left-radius: 3px;
}
.dijitCalendarContainer .dijitCalendarMonthContainer th:last-child {
  border-top-right-radius: 3px;
}

.dijitCalendarMonthMenuPopup {
  /* (must be higher than popup z-index) */
  z-index: 10020 !important;
  padding: 3px 4px;
  border-radius: 3px;
  background-color: #26323D;
}
.dijitCalendarMonthMenuPopup .dijitCalendarMonthMenu {
  padding: 5px;
  border-style: none;
  background: none;
  font-size: 12px;
}
.dijitCalendarMonthMenuPopup .dijitCalendarMonthMenu .dijitCalendarMonthLabel {
  padding: 2px 0;
  color: #FFFFFF;
}
.dijitCalendarMonthMenuPopup .dijitCalendarMonthMenu .dijitCalendarMonthLabel:hover, .dijitCalendarMonthMenuPopup .dijitCalendarMonthMenu .dijitCalendarMonthLabel:focus {
  color: #4280CB;
}

.dj_rtl .dijitCalendarContainer .dijitCalendarMonthContainer th:first-child {
  border-top-left-radius: 0;
  border-top-right-radius: 3px;
}
.dj_rtl .dijitCalendarContainer .dijitCalendarMonthContainer th:last-child {
  border-top-left-radius: 3px;
  border-top-right-radius: 0;
}

/*
 * Dijit Tooltip Widget
 *
 * Default tooltip used for Mendix widgets
 */
.mx-tooltip .dijitTooltipContainer {
  border-width: 1px;
  border-color: #888888;
  border-radius: 4px;
  background: #FFFFFF;
  box-shadow: 0 6px 12px rgba(0, 0, 0, 0.175);
}
.mx-tooltip .dijitTooltipContainer .mx-tooltip-content {
  padding: 10px;
}
.mx-tooltip .dijitTooltipContainer .form-group {
  margin-bottom: 5px;
}
.mx-tooltip .dijitTooltipConnector {
  width: 0;
  height: 0;
  margin-left: -10px;
  border-width: 10px 10px 10px 0;
  border-style: solid;
  border-color: transparent;
  border-right-color: #888888;
}

/*
 * Dijit Border Container
 *
 * Used in Mendix as split pane containers
 */
.dijitBorderContainer {
  padding: 5px;
  background-color: #FCFCFC;
}
.dijitBorderContainer .dijitSplitterV,
.dijitBorderContainer .dijitGutterV {
  width: 5px;
  border: 0;
  background: #FCFCFC;
}
.dijitBorderContainer .dijitSplitterH,
.dijitBorderContainer .dijitGutterH {
  height: 5px;
  border: 0;
  background: #FCFCFC;
}
.dijitBorderContainer .dijitSplitterH .dijitSplitterThumb {
  top: 2px;
  width: 19px;
  height: 1px;
  background: #B0B0B0;
}
.dijitBorderContainer .dijitSplitterV .dijitSplitterThumb {
  left: 2px;
  width: 1px;
  height: 19px;
  background: #B0B0B0;
}
.dijitBorderContainer .dijitSplitContainer-child,
.dijitBorderContainer .dijitBorderContainer-child {
  border: 1px solid #CCCCCC;
}
.dijitBorderContainer .dijitBorderContainer-dijitTabContainerTop,
.dijitBorderContainer .dijitBorderContainer-dijitTabContainerBottom,
.dijitBorderContainer .dijitBorderContainer-dijitTabContainerLeft,
.dijitBorderContainer .dijitBorderContainer-dijitTabContainerRight {
  border: none;
}
.dijitBorderContainer .dijitBorderContainer-dijitBorderContainer {
  padding: 0;
  border: none;
}
.dijitBorderContainer .dijitSplitterActive {
  /* For IE8 and earlier */
  margin: 0;
  opacity: 0.6;
  background-color: #AAAAAA;
  background-image: none;
  font-size: 1px;
  filter: alpha(opacity=60);
}
.dijitBorderContainer .dijitSplitContainer-dijitContentPane,
.dijitBorderContainer .dijitBorderContainer-dijitContentPane {
  padding: 5px;
  background-color: #FFFFFF;
}

/*
 * Dijit Menu Popup
 *
 * Used in datepickers and calendar widgets
 */
.dijitMenuPopup {
  margin-top: 10px;
}
.dijitMenuPopup .dijitMenu {
  display: block;
  width: 200px !important;
  margin-top: 0;
  padding: 12px 10px;
  border-radius: 3px;
  background: #252C36;
}
.dijitMenuPopup .dijitMenu:after {
  position: absolute;
  bottom: 100%;
  left: 20px;
  width: 0;
  height: 0;
  margin-left: -10px;
  content: " ";
  pointer-events: none;
  border: medium solid transparent;
  border-width: 10px;
  border-bottom-color: #252C36;
}
.dijitMenuPopup .dijitMenu .dijitMenuItem {
  background: transparent;
}
.dijitMenuPopup .dijitMenu .dijitMenuItem .dijitMenuItemLabel {
  display: block;
  overflow: hidden;
  width: 180px !important;
  padding: 10px;
  text-overflow: ellipsis;
  color: #FFFFFF;
  border-radius: 3px;
}
.dijitMenuPopup .dijitMenu .dijitMenuItem.dijitMenuItemHover {
  background: none;
}
.dijitMenuPopup .dijitMenu .dijitMenuItem.dijitMenuItemHover .dijitMenuItemLabel {
  background: #0595DB;
}
.dijitMenuPopup .dijitMenu .tg_newlabelmenuitem .dijitMenuItemLabel {
  font-weight: bold;
}
.dijitMenuPopup .dijitMenu .dijitMenuSeparator td {
  padding: 0;
  border-bottom-width: 3px;
}
.dijitMenuPopup .dijitMenu .dijitMenuSeparator .dijitMenuSeparatorIconCell > div {
  margin: 0;
}

/* ==========================================================================
   Glyphicons

   Glyphicons alternaed to use with Mendix
========================================================================== */
.mx-glyphicon:before {
  display: inline-block;
  margin-top: -0.2em;
  margin-right: 0.4555555em;
  vertical-align: middle;
  font-family: "Glyphicons Halflings";
  font-weight: normal;
  font-style: normal;
  line-height: inherit;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

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

   Default Mendix Groupboxes
========================================================================== */
.mx-groupbox {
  margin: 0;
}
.mx-groupbox > .mx-groupbox-header {
  margin: 0;
  color: #555555;
  border-width: 1px 1px 0 1px;
  border-style: solid;
  border-color: #DDDDDD;
  background: #DDDDDD;
  font-size: 14px;
}
.mx-groupbox > .mx-groupbox-header .mx-groupbox-collapse-icon {
  margin-top: 0.1em;
}
.mx-groupbox > .mx-groupbox-body {
  padding: 10px 15px;
  border-width: 1px;
  border-style: solid;
  border-color: #DDDDDD;
  background-color: #FFFFFF;
}
.mx-groupbox .mx-groupbox-header + .mx-groupbox-body {
  border-top: none;
}

.groupbox-default > .mx-groupbox-header {
  color: #555555;
  border-color: #DDDDDD;
  background: #DDDDDD;
}
.groupbox-default > .mx-groupbox-body {
  border-color: #DDDDDD;
}

.groupbox-primary > .mx-groupbox-header {
  color: #FFF;
  border-color: #0595DB;
  background: #0595DB;
}
.groupbox-primary > .mx-groupbox-body {
  border-color: #0595DB;
}

.groupbox-inverse > .mx-groupbox-header {
  color: #FFF;
  border-color: #252C36;
  background: #252C36;
}
.groupbox-inverse > .mx-groupbox-body {
  border-color: #252C36;
}

.groupbox-success > .mx-groupbox-header {
  color: #FFF;
  border-color: #76CA02;
  background: #76CA02;
}
.groupbox-success > .mx-groupbox-body {
  border-color: #76CA02;
}

.groupbox-info > .mx-groupbox-header {
  color: #FFF;
  border-color: #48B0F7;
  background: #48B0F7;
}
.groupbox-info > .mx-groupbox-body {
  border-color: #48B0F7;
}

.groupbox-warning > .mx-groupbox-header {
  color: #FFF;
  border-color: #F99B1D;
  background: #F99B1D;
}
.groupbox-warning > .mx-groupbox-body {
  border-color: #F99B1D;
}

.groupbox-danger > .mx-groupbox-header {
  color: #FFF;
  border-color: #ED1C24;
  background: #ED1C24;
}
.groupbox-danger > .mx-groupbox-body {
  border-color: #ED1C24;
}

.groupbox-white > .mx-groupbox-header {
  color: #555555;
  border-color: #FFF;
  background: #FFF;
}
.groupbox-white > .mx-groupbox-body {
  border-color: #FFF;
}

.groupbox-transparent {
  border-bottom: 1px solid #D7D7D7;
}
.groupbox-transparent > .mx-groupbox-header {
  padding: 15px 0;
  color: #222222;
  border-style: none;
  background: transparent;
  font-size: 16px;
  font-weight: 600;
}
.groupbox-transparent .mx-groupbox-body {
  padding: 15px 0;
  border-style: none;
  background-color: transparent;
}
.groupbox-transparent .mx-groupbox-collapse-icon {
  color: #0595DB;
}

.groupbox-h1 > .mx-groupbox-header {
  font-size: 31px;
}

.groupbox-h2 > .mx-groupbox-header {
  font-size: 26px;
}

.groupbox-h3 > .mx-groupbox-header {
  font-size: 24px;
}

.groupbox-h4 > .mx-groupbox-header {
  font-size: 18px;
}

.groupbox-h5 > .mx-groupbox-header {
  font-size: 14px;
}

.groupbox-h6 > .mx-groupbox-header {
  font-size: 12px;
}

.groupbox-callout > .mx-groupbox-header,
.groupbox-callout > .mx-groupbox-body {
  border: 0;
  background-color: #daeffd;
}
.groupbox-callout .mx-groupbox-header + .mx-groupbox-body {
  padding-top: 0;
}

.groupbox-info.groupbox-callout > .mx-groupbox-header,
.groupbox-info.groupbox-callout > .mx-groupbox-body {
  background-color: #daeffd;
}
.groupbox-info.groupbox-callout > .mx-groupbox-header {
  color: #48B0F7;
}

.groupbox-success.groupbox-callout > .mx-groupbox-header,
.groupbox-success.groupbox-callout > .mx-groupbox-body {
  background-color: #e4f4cc;
}
.groupbox-success.groupbox-callout > .mx-groupbox-header {
  color: #76CA02;
}

.groupbox-warning.groupbox-callout > .mx-groupbox-header,
.groupbox-warning.groupbox-callout > .mx-groupbox-body {
  background-color: #feebd2;
}
.groupbox-warning.groupbox-callout > .mx-groupbox-header {
  color: #F99B1D;
}

.groupbox-danger.groupbox-callout > .mx-groupbox-header,
.groupbox-danger.groupbox-callout > .mx-groupbox-body {
  background-color: #fbd2d3;
}
.groupbox-danger.groupbox-callout > .mx-groupbox-header {
  color: #ED1C24;
}

/* ==========================================================================
   Helpers

   Default Mendix Helpers
========================================================================== */
.show {
  display: block !important;
}

.hidden {
  display: none !important;
  visibility: hidden !important;
}

.invisible {
  visibility: hidden !important;
}

.display-ie8-only:not([attr*=""]) {
  display: none !important;
  padding: 0 !important;
}

.list-nostyle ul {
  margin: 0 !important;
  padding: 0 !important;
}
.list-nostyle ul li {
  list-style-type: none !important;
}

.nowrap,
.nowrap * {
  overflow: hidden;
  white-space: nowrap !important;
  text-overflow: ellipsis;
}

.table {
  display: table !important;
}

.table-row {
  display: table-row !important;
}

.table-cell {
  display: table-cell !important;
}

.pull-left {
  float: left !important;
}

.pull-right {
  float: right !important;
}

.align-top {
  vertical-align: top !important;
}

.align-middle {
  vertical-align: middle !important;
}

.align-bottom {
  vertical-align: bottom !important;
}

.row-left {
  display: flex !important;
  align-items: center !important;
  flex-flow: row !important;
  justify-content: flex-start !important;
}

.row-center {
  display: flex !important;
  align-items: center !important;
  flex-flow: row !important;
  justify-content: center !important;
}

.row-right {
  display: flex !important;
  align-items: center !important;
  flex-flow: row !important;
  justify-content: flex-end !important;
}

.col-left {
  display: flex !important;
  align-items: flex-start !important;
  flex-direction: column !important;
  justify-content: center !important;
}

.col-center {
  display: flex !important;
  align-items: center !important;
  flex-direction: column !important;
  justify-content: center !important;
}

.col-right {
  display: flex !important;
  align-items: flex-end !important;
  flex-direction: column !important;
  justify-content: center !important;
}

.spacing-inner-none {
  padding: 0 !important;
}

.spacing-inner-top-none {
  padding-top: 0 !important;
}

.spacing-inner-right-none {
  padding-right: 0 !important;
}

.spacing-inner-bottom-none {
  padding-bottom: 0 !important;
}

.spacing-inner-left-none {
  padding-left: 0 !important;
}

.spacing-outer-none {
  margin: 0 !important;
}

.spacing-outer-top-none {
  margin-top: 0 !important;
}

.spacing-outer-right-none {
  margin-right: 0 !important;
}

.spacing-outer-bottom-none {
  margin-bottom: 0 !important;
}

.spacing-outer-left-none {
  margin-left: 0 !important;
}

.spacing-inner {
  padding: 5px !important;
}

.spacing-inner-top {
  padding-top: 5px !important;
}

.spacing-inner-right {
  padding-right: 5px !important;
}

.spacing-inner-bottom {
  padding-bottom: 5px !important;
}

.spacing-inner-left {
  padding-left: 5px !important;
}

.spacing-outer {
  margin: 5px !important;
}

.spacing-outer-top {
  margin-top: 5px !important;
}

.spacing-outer-right {
  margin-right: 5px !important;
}

.spacing-outer-bottom {
  margin-bottom: 5px !important;
}

.spacing-outer-left {
  margin-left: 5px !important;
}

@media (max-width: 767px) {
  .spacing-inner-medium {
    padding: 15px !important;
  }
}
@media (min-width: 768px) {
  .spacing-inner-medium {
    padding: 15px !important;
  }
}
@media (min-width: 992px) {
  .spacing-inner-medium {
    padding: 15px !important;
  }
}

@media (max-width: 767px) {
  .spacing-inner-top-medium {
    padding-top: 15px !important;
  }
}
@media (min-width: 768px) {
  .spacing-inner-top-medium {
    padding-top: 15px !important;
  }
}
@media (min-width: 992px) {
  .spacing-inner-top-medium {
    padding-top: 15px !important;
  }
}

@media (max-width: 767px) {
  .spacing-inner-right-medium {
    padding-right: 15px !important;
  }
}
@media (min-width: 768px) {
  .spacing-inner-right-medium {
    padding-right: 15px !important;
  }
}
@media (min-width: 992px) {
  .spacing-inner-right-medium {
    padding-right: 15px !important;
  }
}

@media (max-width: 767px) {
  .spacing-inner-bottom-medium {
    padding-bottom: 15px !important;
  }
}
@media (min-width: 768px) {
  .spacing-inner-bottom-medium {
    padding-bottom: 15px !important;
  }
}
@media (min-width: 992px) {
  .spacing-inner-bottom-medium {
    padding-bottom: 15px !important;
  }
}

@media (max-width: 767px) {
  .spacing-inner-left-medium {
    padding-left: 15px !important;
  }
}
@media (min-width: 768px) {
  .spacing-inner-left-medium {
    padding-left: 15px !important;
  }
}
@media (min-width: 992px) {
  .spacing-inner-left-medium {
    padding-left: 15px !important;
  }
}

@media (max-width: 767px) {
  .spacing-outer-medium {
    margin: 15px !important;
  }
}
@media (min-width: 768px) {
  .spacing-outer-medium {
    margin: 15px !important;
  }
}
@media (min-width: 992px) {
  .spacing-outer-medium {
    margin: 15px !important;
  }
}

@media (max-width: 767px) {
  .spacing-outer-top-medium {
    margin-top: 15px !important;
  }
}
@media (min-width: 768px) {
  .spacing-outer-top-medium {
    margin-top: 15px !important;
  }
}
@media (min-width: 992px) {
  .spacing-outer-top-medium {
    margin-top: 15px !important;
  }
}

@media (max-width: 767px) {
  .spacing-outer-right-medium {
    margin-right: 15px !important;
  }
}
@media (min-width: 768px) {
  .spacing-outer-right-medium {
    margin-right: 15px !important;
  }
}
@media (min-width: 992px) {
  .spacing-outer-right-medium {
    margin-right: 15px !important;
  }
}

@media (max-width: 767px) {
  .spacing-outer-bottom-medium {
    margin-bottom: 15px !important;
  }
}
@media (min-width: 768px) {
  .spacing-outer-bottom-medium {
    margin-bottom: 15px !important;
  }
}
@media (min-width: 992px) {
  .spacing-outer-bottom-medium {
    margin-bottom: 15px !important;
  }
}

@media (max-width: 767px) {
  .spacing-outer-left-medium {
    margin-left: 15px !important;
  }
}
@media (min-width: 768px) {
  .spacing-outer-left-medium {
    margin-left: 15px !important;
  }
}
@media (min-width: 992px) {
  .spacing-outer-left-medium {
    margin-left: 15px !important;
  }
}

@media (max-width: 767px) {
  .spacing-inner-large {
    padding: 15px !important;
  }
}
@media (min-width: 768px) {
  .spacing-inner-large {
    padding: 30px !important;
  }
}
@media (min-width: 992px) {
  .spacing-inner-large {
    padding: 30px !important;
  }
}

@media (max-width: 767px) {
  .spacing-inner-top-large {
    padding-top: 15px !important;
  }
}
@media (min-width: 768px) {
  .spacing-inner-top-large {
    padding-top: 30px !important;
  }
}
@media (min-width: 992px) {
  .spacing-inner-top-large {
    padding-top: 30px !important;
  }
}

@media (max-width: 767px) {
  .spacing-inner-right-large {
    padding-right: 15px !important;
  }
}
@media (min-width: 768px) {
  .spacing-inner-right-large {
    padding-right: 30px !important;
  }
}
@media (min-width: 992px) {
  .spacing-inner-right-large {
    padding-right: 30px !important;
  }
}

@media (max-width: 767px) {
  .spacing-inner-bottom-large {
    padding-bottom: 15px !important;
  }
}
@media (min-width: 768px) {
  .spacing-inner-bottom-large {
    padding-bottom: 30px !important;
  }
}
@media (min-width: 992px) {
  .spacing-inner-bottom-large {
    padding-bottom: 30px !important;
  }
}

@media (max-width: 767px) {
  .spacing-inner-left-large {
    padding-left: 15px !important;
  }
}
@media (min-width: 768px) {
  .spacing-inner-left-large {
    padding-left: 30px !important;
  }
}
@media (min-width: 992px) {
  .spacing-inner-left-large {
    padding-left: 30px !important;
  }
}

@media (max-width: 767px) {
  .spacing-outer-large {
    margin: 15px !important;
  }
}
@media (min-width: 768px) {
  .spacing-outer-large {
    margin: 30px !important;
  }
}
@media (min-width: 992px) {
  .spacing-outer-large {
    margin: 30px !important;
  }
}

@media (max-width: 767px) {
  .spacing-outer-top-large {
    margin-top: 15px !important;
  }
}
@media (min-width: 768px) {
  .spacing-outer-top-large {
    margin-top: 30px !important;
  }
}
@media (min-width: 992px) {
  .spacing-outer-top-large {
    margin-top: 30px !important;
  }
}

@media (max-width: 767px) {
  .spacing-outer-right-large {
    margin-right: 15px !important;
  }
}
@media (min-width: 768px) {
  .spacing-outer-right-large {
    margin-right: 30px !important;
  }
}
@media (min-width: 992px) {
  .spacing-outer-right-large {
    margin-right: 30px !important;
  }
}

@media (max-width: 767px) {
  .spacing-outer-bottom-large {
    margin-bottom: 15px !important;
  }
}
@media (min-width: 768px) {
  .spacing-outer-bottom-large {
    margin-bottom: 30px !important;
  }
}
@media (min-width: 992px) {
  .spacing-outer-bottom-large {
    margin-bottom: 30px !important;
  }
}

@media (max-width: 767px) {
  .spacing-outer-left-large {
    margin-left: 15px !important;
  }
}
@media (min-width: 768px) {
  .spacing-outer-left-large {
    margin-left: 30px !important;
  }
}
@media (min-width: 992px) {
  .spacing-outer-left-large {
    margin-left: 30px !important;
  }
}

@media (max-width: 767px) {
  .spacing-inner-layout {
    padding: 15px 15px 15px 15px !important;
  }
}
@media (min-width: 768px) {
  .spacing-inner-layout {
    padding: 30px 30px 30px 30px !important;
  }
}
@media (min-width: 992px) {
  .spacing-inner-layout {
    padding: 30px 30px 30px 30px !important;
  }
}

@media (max-width: 767px) {
  .spacing-inner-top-layout {
    padding-top: 15px !important;
  }
}
@media (min-width: 768px) {
  .spacing-inner-top-layout {
    padding-top: 30px !important;
  }
}
@media (min-width: 992px) {
  .spacing-inner-top-layout {
    padding-top: 30px !important;
  }
}

@media (max-width: 767px) {
  .spacing-inner-right-layout {
    padding-right: 15px !important;
  }
}
@media (min-width: 768px) {
  .spacing-inner-right-layout {
    padding-right: 30px !important;
  }
}
@media (min-width: 992px) {
  .spacing-inner-right-layout {
    padding-right: 30px !important;
  }
}

@media (max-width: 767px) {
  .spacing-inner-bottom-layout {
    padding-bottom: 15px !important;
  }
}
@media (min-width: 768px) {
  .spacing-inner-bottom-layout {
    padding-bottom: 30px !important;
  }
}
@media (min-width: 992px) {
  .spacing-inner-bottom-layout {
    padding-bottom: 30px !important;
  }
}

@media (max-width: 767px) {
  .spacing-inner-left-layout {
    padding-left: 15px !important;
  }
}
@media (min-width: 768px) {
  .spacing-inner-left-layout {
    padding-left: 30px !important;
  }
}
@media (min-width: 992px) {
  .spacing-inner-left-layout {
    padding-left: 30px !important;
  }
}

@media (max-width: 767px) {
  .spacing-outer-layout {
    margin: 15px 15px 15px 15px !important;
  }
}
@media (min-width: 768px) {
  .spacing-outer-layout {
    margin: 30px 30px 30px 30px !important;
  }
}
@media (min-width: 992px) {
  .spacing-outer-layout {
    margin: 30px 30px 30px 30px !important;
  }
}

@media (max-width: 767px) {
  .spacing-outer-top-layout {
    margin-top: 15px !important;
  }
}
@media (min-width: 768px) {
  .spacing-outer-top-layout {
    margin-top: 30px !important;
  }
}
@media (min-width: 992px) {
  .spacing-outer-top-layout {
    margin-top: 30px !important;
  }
}

@media (max-width: 767px) {
  .spacing-outer-right-layout {
    margin-right: 15px !important;
  }
}
@media (min-width: 768px) {
  .spacing-outer-right-layout {
    margin-right: 30px !important;
  }
}
@media (min-width: 992px) {
  .spacing-outer-right-layout {
    margin-right: 30px !important;
  }
}

@media (max-width: 767px) {
  .spacing-outer-bottom-layout {
    margin-bottom: 15px !important;
  }
}
@media (min-width: 768px) {
  .spacing-outer-bottom-layout {
    margin-bottom: 30px !important;
  }
}
@media (min-width: 992px) {
  .spacing-outer-bottom-layout {
    margin-bottom: 30px !important;
  }
}

@media (max-width: 767px) {
  .spacing-outer-left-layout {
    margin-left: 15px !important;
  }
}
@media (min-width: 768px) {
  .spacing-outer-left-layout {
    margin-left: 30px !important;
  }
}
@media (min-width: 992px) {
  .spacing-outer-left-layout {
    margin-left: 30px !important;
  }
}

.d-inline {
  display: inline !important;
}

.d-inline-block {
  display: inline-block !important;
}

.d-block {
  display: block !important;
}

/* ==========================================================================
   Images

   Default Mendix Image Widgets
========================================================================== */
img.img-rounded,
.img-rounded img {
  border-radius: 6px;
}

img.img-thumbnail,
.img-thumbnail img {
  display: inline-block;
  max-width: 100%;
  height: auto;
  padding: 4px;
  -webkit-transition: all 0.2s ease-in-out;
  -moz-transition: all 0.2s ease-in-out;
  -o-transition: all 0.2s ease-in-out;
  transition: all 0.2s ease-in-out;
  border: 1px solid #DDDDDD;
  border-radius: 4px;
  background-color: #FFFFFF;
  line-height: 1.42857;
}

img.img-circle,
.img-circle img {
  border-radius: 50%;
}

img.img-auto,
.img-auto img {
  width: auto !important;
  max-width: 100% !important;
  height: auto !important;
  max-height: 100% !important;
}

img.img-center,
.img-center img {
  margin-right: auto !important;
  margin-left: auto !important;
}

/* ==========================================================================
   Labels

   Default labels combined with Bootstrap labels
========================================================================== */
.label {
  display: inline;
  display: inline-block;
  padding: 0.2em 0.6em 0.3em;
  text-align: center;
  vertical-align: baseline;
  white-space: nowrap;
  color: #FFFFFF;
  border-radius: 0.25em;
  font-size: 100%;
  font-weight: bold;
  line-height: 1;
}

.label-default {
  color: #555555;
  background-color: #DDDDDD;
}

.label-primary {
  color: #FFF;
  background-color: #0595DB;
}

.label-success {
  color: #FFF;
  background-color: #76CA02;
}

.label-info {
  color: #FFF;
  background-color: #48B0F7;
}

.label-warning {
  color: #FFF;
  background-color: #F99B1D;
}

.label-danger {
  color: #FFF;
  background-color: #ED1C24;
}

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

   Default Mendix Listview Widget. The list view shows a list of objects arranged vertically. Each object is shown using a template
========================================================================== */
.mx-listview {
  padding: 0;
  /* Clear search button (overrides load more button stying) */
  /* Load more button */
}
.mx-listview .mx-button.mx-listview-clear-button {
  width: auto;
}
.mx-listview .mx-listview-searchbar {
  margin-bottom: 15px;
}
.mx-listview > .mx-button {
  width: 100%;
  margin: 10px auto;
}
.mx-listview .mx-listview-list {
  margin: 0;
}
.mx-listview .mx-listview-list .mx-listview-empty {
  border-style: none;
  background-color: transparent;
}
.mx-listview .mx-listview-item {
  transition-delay: 0.1s;
  transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
  transition-duration: 0.2s;
  transition-property: all;
  transform-style: initial;
  padding: 15px 15px 15px 15px;
  border-width: 1px 0 0 0;
  border-style: solid;
  border-color: #D7D7D7;
  background-color: #FFF;
}
.mx-listview .mx-listview-item:first-child {
  border-radius: 0;
}
.mx-listview .mx-listview-item:last-child {
  border-bottom: 1px solid #D7D7D7;
  border-radius: 0;
}
.mx-listview .mx-listview-item:nth-child(2n + 1) {
  background-color: #FFF;
}
.mx-listview .mx-listview-item:hover {
  background-color: #FFF;
}
.mx-listview .mx-listview-item:focus, .mx-listview .mx-listview-item:active {
  background-color: #f7f7f7;
}
.mx-listview .mx-listview-item.selected {
  background-color: #f3f3f3 !important;
}
.mx-listview .mx-layoutgrid {
  padding-top: 0 !important;
  padding-bottom: 0 !important;
}

.listview-bordered.mx-listview .mx-listview-item {
  border: 1px solid #D7D7D7;
  border-top: 0;
}
.listview-bordered.mx-listview .mx-listview-item:first-child {
  border-top: 1px solid #D7D7D7;
  border-radius: 0;
}
.listview-bordered.mx-listview .mx-listview-item:last-child {
  border-radius: 0;
}

.listview-striped.mx-listview .mx-listview-item:nth-child(2n + 1) {
  background-color: #fbfbfb;
}

.listview-seperated.mx-listview .mx-listview-item {
  margin-bottom: 15px;
  border-width: 1px;
  border-style: solid;
  border-radius: 4px;
}

.listview-hover.mx-listview .mx-listview-item:hover, .listview-hover.mx-listview .mx-listview-item:focus, .listview-hover.mx-listview .mx-listview-item:active {
  background-color: #f7f7f7 !important;
}
.listview-hover.mx-listview .mx-listview-item.selected:hover, .listview-hover.mx-listview .mx-listview-item.selected:focus, .listview-hover.mx-listview .mx-listview-item.selected:active {
  background-color: #ebebeb !important;
}

.listview-stylingless.mx-listview .mx-listview-item {
  padding: 0;
  cursor: default;
  border: 0;
  background-color: transparent;
}
.listview-stylingless.mx-listview .mx-listview-item:hover, .listview-stylingless.mx-listview .mx-listview-item:focus, .listview-stylingless.mx-listview .mx-listview-item:active {
  background-color: transparent;
}
.listview-stylingless.mx-listview .mx-listview-item.selected {
  background-color: transparent !important;
}
.listview-stylingless.mx-listview .mx-listview-item.selected:hover, .listview-stylingless.mx-listview .mx-listview-item.selected:focus, .listview-stylingless.mx-listview .mx-listview-item.selected:active {
  background-color: transparent !important;
}

.listview-lg.mx-listview .mx-listview-item {
  padding: 30px 30px 30px 30px;
}

.listview-sm.mx-listview .mx-listview-item {
  padding: 7.5px 7.5px 7.5px 7.5px;
}

.mx-listview[class*="lv-col"] {
  overflow: hidden;
}
.mx-listview[class*="lv-col"] .mx-listview-content-wrapper {
  display: block;
}
.mx-listview[class*="lv-col"] > .mx-listview-list {
  display: block;
  margin-right: -15px;
  margin-left: -15px;
}
.mx-listview[class*="lv-col"] > .mx-listview-list::before, .mx-listview[class*="lv-col"] > .mx-listview-list::after {
  display: table;
  clear: both;
  content: " ";
}
.mx-listview[class*="lv-col"] > .mx-listview-list > .mx-listview-item {
  position: relative;
  display: block;
  float: left;
  min-height: 1px;
  padding-right: 15px;
  padding-left: 15px;
  border: 0;
}
@media (max-width: 991px) {
  .mx-listview[class*="lv-col"] > .mx-listview-list > .mx-listview-item {
    width: 100% !important;
  }
}
.mx-listview[class*="lv-col"] > .mx-listview-list > .mx-listview-item > .mx-dataview {
  overflow: hidden;
}
.mx-listview[class*="lv-col"].lv-col-xs-12 > .mx-listview-list > .mx-listview-item {
  width: 100% !important;
}
.mx-listview[class*="lv-col"].lv-col-xs-11 > .mx-listview-list > .mx-listview-item {
  width: 91.66666667% !important;
}
.mx-listview[class*="lv-col"].lv-col-xs-10 > .mx-listview-list > .mx-listview-item {
  width: 83.33333333% !important;
}
.mx-listview[class*="lv-col"].lv-col-xs-9 > .mx-listview-list > .mx-listview-item {
  width: 75% !important;
}
.mx-listview[class*="lv-col"].lv-col-xs-8 > .mx-listview-list > .mx-listview-item {
  width: 66.66666667% !important;
}
.mx-listview[class*="lv-col"].lv-col-xs-7 > .mx-listview-list > .mx-listview-item {
  width: 58.33333333% !important;
}
.mx-listview[class*="lv-col"].lv-col-xs-6 > .mx-listview-list > .mx-listview-item {
  width: 50% !important;
}
.mx-listview[class*="lv-col"].lv-col-xs-5 > .mx-listview-list > .mx-listview-item {
  width: 41.66666667% !important;
}
.mx-listview[class*="lv-col"].lv-col-xs-4 > .mx-listview-list > .mx-listview-item {
  width: 33.33333333% !important;
}
.mx-listview[class*="lv-col"].lv-col-xs-3 > .mx-listview-list > .mx-listview-item {
  width: 25% !important;
}
.mx-listview[class*="lv-col"].lv-col-xs-2 > .mx-listview-list > .mx-listview-item {
  width: 16.66666667% !important;
}
.mx-listview[class*="lv-col"].lv-col-xs-1 > .mx-listview-list > .mx-listview-item {
  width: 8.33333333% !important;
}
@media (min-width: 768px) {
  .mx-listview[class*="lv-col"].lv-col-sm-12 > .mx-listview-list > .mx-listview-item {
    width: 100% !important;
  }
  .mx-listview[class*="lv-col"].lv-col-sm-11 > .mx-listview-list > .mx-listview-item {
    width: 91.66666667% !important;
  }
  .mx-listview[class*="lv-col"].lv-col-sm-10 > .mx-listview-list > .mx-listview-item {
    width: 83.33333333% !important;
  }
  .mx-listview[class*="lv-col"].lv-col-sm-9 > .mx-listview-list > .mx-listview-item {
    width: 75% !important;
  }
  .mx-listview[class*="lv-col"].lv-col-sm-8 > .mx-listview-list > .mx-listview-item {
    width: 66.66666667% !important;
  }
  .mx-listview[class*="lv-col"].lv-col-sm-7 > .mx-listview-list > .mx-listview-item {
    width: 58.33333333% !important;
  }
  .mx-listview[class*="lv-col"].lv-col-sm-6 > .mx-listview-list > .mx-listview-item {
    width: 50% !important;
  }
  .mx-listview[class*="lv-col"].lv-col-sm-5 > .mx-listview-list > .mx-listview-item {
    width: 41.66666667% !important;
  }
  .mx-listview[class*="lv-col"].lv-col-sm-4 > .mx-listview-list > .mx-listview-item {
    width: 33.33333333% !important;
  }
  .mx-listview[class*="lv-col"].lv-col-sm-3 > .mx-listview-list > .mx-listview-item {
    width: 25% !important;
  }
  .mx-listview[class*="lv-col"].lv-col-sm-2 > .mx-listview-list > .mx-listview-item {
    width: 16.66666667% !important;
  }
  .mx-listview[class*="lv-col"].lv-col-sm-1 > .mx-listview-list > .mx-listview-item {
    width: 8.33333333% !important;
  }
}
@media (min-width: 992px) {
  .mx-listview[class*="lv-col"].lv-col-md-12 > .mx-listview-list > .mx-listview-item {
    width: 100% !important;
  }
  .mx-listview[class*="lv-col"].lv-col-md-11 > .mx-listview-list > .mx-listview-item {
    width: 91.66666667% !important;
  }
  .mx-listview[class*="lv-col"].lv-col-md-10 > .mx-listview-list > .mx-listview-item {
    width: 83.33333333% !important;
  }
  .mx-listview[class*="lv-col"].lv-col-md-9 > .mx-listview-list > .mx-listview-item {
    width: 75% !important;
  }
  .mx-listview[class*="lv-col"].lv-col-md-8 > .mx-listview-list > .mx-listview-item {
    width: 66.66666667% !important;
  }
  .mx-listview[class*="lv-col"].lv-col-md-7 > .mx-listview-list > .mx-listview-item {
    width: 58.33333333% !important;
  }
  .mx-listview[class*="lv-col"].lv-col-md-6 > .mx-listview-list > .mx-listview-item {
    width: 50% !important;
  }
  .mx-listview[class*="lv-col"].lv-col-md-5 > .mx-listview-list > .mx-listview-item {
    width: 41.66666667% !important;
  }
  .mx-listview[class*="lv-col"].lv-col-md-4 > .mx-listview-list > .mx-listview-item {
    width: 33.33333333% !important;
  }
  .mx-listview[class*="lv-col"].lv-col-md-3 > .mx-listview-list > .mx-listview-item {
    width: 25% !important;
  }
  .mx-listview[class*="lv-col"].lv-col-md-2 > .mx-listview-list > .mx-listview-item {
    width: 16.66666667% !important;
  }
  .mx-listview[class*="lv-col"].lv-col-md-1 > .mx-listview-list > .mx-listview-item {
    width: 16.66666667% !important;
  }
}
@media (min-width: 1200px) {
  .mx-listview[class*="lv-col"].lv-col-lg-12 > .mx-listview-list > .mx-listview-item {
    width: 100% !important;
  }
  .mx-listview[class*="lv-col"].lv-col-lg-11 > .mx-listview-list > .mx-listview-item {
    width: 91.66666667% !important;
  }
  .mx-listview[class*="lv-col"].lv-col-lg-10 > .mx-listview-list > .mx-listview-item {
    width: 83.33333333% !important;
  }
  .mx-listview[class*="lv-col"].lv-col-lg-9 > .mx-listview-list > .mx-listview-item {
    width: 75% !important;
  }
  .mx-listview[class*="lv-col"].lv-col-lg-8 > .mx-listview-list > .mx-listview-item {
    width: 66.66666667% !important;
  }
  .mx-listview[class*="lv-col"].lv-col-lg-7 > .mx-listview-list > .mx-listview-item {
    width: 58.33333333% !important;
  }
  .mx-listview[class*="lv-col"].lv-col-lg-6 > .mx-listview-list > .mx-listview-item {
    width: 50% !important;
  }
  .mx-listview[class*="lv-col"].lv-col-lg-5 > .mx-listview-list > .mx-listview-item {
    width: 41.66666667% !important;
  }
  .mx-listview[class*="lv-col"].lv-col-lg-4 > .mx-listview-list > .mx-listview-item {
    width: 33.33333333% !important;
  }
  .mx-listview[class*="lv-col"].lv-col-lg-3 > .mx-listview-list > .mx-listview-item {
    width: 25% !important;
  }
  .mx-listview[class*="lv-col"].lv-col-lg-2 > .mx-listview-list > .mx-listview-item {
    width: 16.66666667% !important;
  }
  .mx-listview[class*="lv-col"].lv-col-lg-1 > .mx-listview-list > .mx-listview-item {
    width: 8.33333333% !important;
  }
}

.profile-phone .mx-listview .mx-listview-searchbar {
  margin-bottom: 3px;
  background: #FFFFFF;
  box-shadow: 0 1px 4px 0 rgba(0, 0, 0, 0.14);
}
.profile-phone .mx-listview .mx-listview-searchbar input {
  padding: 14px 15px;
  color: #555555;
  border-style: none;
  border-radius: 0;
  box-shadow: none;
}
.profile-phone .mx-listview .mx-listview-clear-button {
  padding: 14px 15px;
  color: inherit;
  border-style: none;
}
.profile-phone .mx-listview .mx-listview-item:first-child {
  border-top: none;
}

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

   Default Mendix Modals. Modals are streamlined, but flexible, dialog prompts with the minimum required functionality and smart defaults
========================================================================== */
.modal-dialog .modal-content {
  border: 1px solid #D7D7D7;
  border-radius: 4px;
  box-shadow: 0 2px 4px rgba(0, 0, 0, 0.2);
}
.modal-dialog .modal-content .modal-header {
  padding: 15px 20px;
  border-bottom-color: #D7D7D7;
  border-radius: 0;
  background-color: transparent;
}
.modal-dialog .modal-content .modal-header h4 {
  margin: 0;
  color: #555555;
  font-size: 16px;
  font-weight: bold;
}
.modal-dialog .modal-content .modal-header .close {
  margin-top: -3px;
  opacity: 1;
  /* For IE8 and earlier */
  color: #555555;
  text-shadow: none;
  filter: alpha(opacity=100);
}
.modal-dialog .modal-content .modal-body {
  padding: 20px;
}
.modal-dialog .modal-content .modal-footer {
  display: flex;
  justify-content: flex-end;
  margin-top: 0;
  padding: 20px;
  border-style: none;
}

.mx-window.mx-window-view .mx-window-body {
  padding: 0;
}
.mx-window.mx-window-view .mx-window-body > .mx-dataview > .mx-dataview-content,
.mx-window.mx-window-view .mx-window-body > .mx-placeholder > .mx-dataview > .mx-dataview-content {
  padding: 20px;
}
.mx-window.mx-window-view .mx-window-body > .mx-dataview > .mx-dataview-controls,
.mx-window.mx-window-view .mx-window-body > .mx-placeholder > .mx-dataview > .mx-dataview-controls {
  display: flex;
  justify-content: flex-end;
  margin: 0;
  padding: 20px;
  text-align: left;
  border-top: 1px solid #D7D7D7;
}
.mx-window .mx-dataview-controls {
  padding-bottom: 0;
}
.mx-window .mx-layoutgrid {
  padding-right: 0;
  padding-left: 0;
}

.mx-login .modal-body {
  padding: 0 15px;
}
.mx-login .modal-content input {
  height: 56px;
  padding: 12px 12px;
  border: 1px solid #EEEEEE;
  background: #EEEEEE;
  box-shadow: none;
  font-size: 16px;
}
.mx-login .modal-content input:focus {
  border-color: #66AFE9;
}
.mx-login .modal-header,
.mx-login .modal-footer {
  border: 0;
}
.mx-login button {
  font-size: 16px;
}
.mx-login h4 {
  color: #AAAAAA;
  font-size: 20px;
  font-weight: bold;
}

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

   Default Mendix Navigation Bar
========================================================================== */
.mx-navbar {
  margin: 0;
  border-style: none;
  border-radius: 0;
  background-color: #252C36;
  /* remove focus */
}
.mx-navbar ul.nav {
  margin: 0;
  /* Navigation item */
  /* When hovering or the dropdown is open */
}
.mx-navbar ul.nav > li.mx-navbar-item > a {
  display: flex;
  align-items: center;
  min-height: 60px;
  padding: 5px 15px;
  vertical-align: middle;
  color: #FFF;
  border-radius: 0;
  font-size: 14px;
  font-weight: normal;
  /* Dropdown arrow */
  /* Dropdown */
}
.mx-navbar ul.nav > li.mx-navbar-item > a .caret {
  border-top-color: #FFF;
  border-bottom-color: #FFF;
}
.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 {
  text-decoration: none;
  color: #FFF;
  background-color: #2d3642;
}
.mx-navbar ul.nav > li.mx-navbar-item > a:hover .caret, .mx-navbar ul.nav > li.mx-navbar-item > a:focus .caret, .mx-navbar ul.nav > li.mx-navbar-item > a.active .caret {
  border-top-color: #FFF;
  border-bottom-color: #FFF;
}
.mx-navbar ul.nav > li.mx-navbar-item > a.active {
  color: #FFF;
  background-color: #36404e;
}
.mx-navbar ul.nav > li.mx-navbar-item > a .mx-navbar-submenu::before {
  position: absolute;
  top: -9px;
  left: 15px;
  width: 0;
  height: 0;
  content: "";
  -webkit-transform: rotate(360deg);
  transform: rotate(360deg);
  border-width: 0 9px 9px 9px;
  border-style: solid;
  border-color: transparent transparent #2d3642 transparent;
}
.mx-navbar ul.nav > li.mx-navbar-item > a img {
  width: 20px;
  height: auto;
  margin-right: 0.5em;
}
.mx-navbar ul.nav > li.mx-navbar-item > a .glyphicon {
  top: 0;
  margin-right: 0.5em;
  vertical-align: middle;
  font-size: 20px;
}
.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 {
  text-decoration: none;
  color: #FFF;
  background-color: #2d3642;
}
.mx-navbar ul.nav > .mx-navbar-item > a:hover .caret, .mx-navbar ul.nav > .mx-navbar-item > a:focus .caret, .mx-navbar ul.nav > .mx-navbar-item.active a .caret, .mx-navbar ul.nav > .mx-navbar-item.open > a .caret, .mx-navbar ul.nav > .mx-navbar-item.open > a:hover .caret, .mx-navbar ul.nav > .mx-navbar-item.open > a:focus .caret {
  border-top-color: #FFF;
  border-bottom-color: #FFF;
}
.mx-navbar ul.nav > .mx-navbar-item.open .dropdown-menu > li.mx-navbar-subitem.active a {
  color: #0595DB;
  background-color: #1d222a;
}
.mx-navbar ul.nav > .mx-navbar-item.open .dropdown-menu > li.mx-navbar-subitem.active a .caret {
  border-top-color: #0595DB;
  border-bottom-color: #0595DB;
}
@media (max-width: 768px) {
  .mx-navbar ul.nav > li.mx-navbar-item > a {
    padding: 10px 20px;
  }
  .mx-navbar .mx-navbar-item.open .dropdown-menu {
    padding: 0;
    border-radius: 0;
    background-color: #1d222a;
  }
  .mx-navbar .mx-navbar-item.open .dropdown-menu > li.mx-navbar-subitem > a {
    padding: 10px 20px;
    color: #AAA;
    border-radius: 0;
    font-size: 12px;
    font-weight: normal;
  }
  .mx-navbar .mx-navbar-item.open .dropdown-menu > li.mx-navbar-subitem > a:hover, .mx-navbar .mx-navbar-item.open .dropdown-menu > li.mx-navbar-subitem > a:focus {
    color: #0595DB;
    background-color: #1d222a;
  }
  .mx-navbar .mx-navbar-item.open .dropdown-menu > li.mx-navbar-subitem > a.active {
    color: #0595DB;
    background-color: #1d222a;
  }
}
.mx-navbar:focus {
  outline: 0;
}

.region-topbar .mx-navbar {
  background-color: #FFFFFF;
}
.region-topbar .mx-navbar ul.nav {
  /* Navigation item */
  /* When hovering or the dropdown is open */
}
.region-topbar .mx-navbar ul.nav > li.mx-navbar-item > a {
  color: #555555;
  font-size: 14px;
  /* Dropdown arrow */
  /* Dropdown */
}
.region-topbar .mx-navbar ul.nav > li.mx-navbar-item > a .caret {
  border-top-color: #555555;
  border-bottom-color: #555555;
}
.region-topbar .mx-navbar ul.nav > li.mx-navbar-item > a:hover, .region-topbar .mx-navbar ul.nav > li.mx-navbar-item > a:focus, .region-topbar .mx-navbar ul.nav > li.mx-navbar-item > a.active {
  color: #555555;
  background-color: whitesmoke;
}
.region-topbar .mx-navbar ul.nav > li.mx-navbar-item > a:hover .caret, .region-topbar .mx-navbar ul.nav > li.mx-navbar-item > a:focus .caret, .region-topbar .mx-navbar ul.nav > li.mx-navbar-item > a.active .caret {
  border-top-color: #555555;
  border-bottom-color: #555555;
}
.region-topbar .mx-navbar ul.nav > li.mx-navbar-item > a.active {
  color: #555555;
  background-color: #ebebeb;
}
.region-topbar .mx-navbar ul.nav > li.mx-navbar-item > a .mx-navbar-submenu::before {
  border-color: transparent transparent #D7D7D7 transparent;
}
.region-topbar .mx-navbar ul.nav > li.mx-navbar-item > a .glyphicon {
  font-size: 1.2em;
}
.region-topbar .mx-navbar ul.nav > .mx-navbar-item > a:hover, .region-topbar .mx-navbar ul.nav > .mx-navbar-item > a:focus, .region-topbar .mx-navbar ul.nav > .mx-navbar-item.active a, .region-topbar .mx-navbar ul.nav > .mx-navbar-item.open > a, .region-topbar .mx-navbar ul.nav > .mx-navbar-item.open > a:hover, .region-topbar .mx-navbar ul.nav > .mx-navbar-item.open > a:focus {
  color: #555555;
  background-color: whitesmoke;
}
.region-topbar .mx-navbar ul.nav > .mx-navbar-item > a:hover .caret, .region-topbar .mx-navbar ul.nav > .mx-navbar-item > a:focus .caret, .region-topbar .mx-navbar ul.nav > .mx-navbar-item.active a .caret, .region-topbar .mx-navbar ul.nav > .mx-navbar-item.open > a .caret, .region-topbar .mx-navbar ul.nav > .mx-navbar-item.open > a:hover .caret, .region-topbar .mx-navbar ul.nav > .mx-navbar-item.open > a:focus .caret {
  border-top-color: #555555;
  border-bottom-color: #555555;
}
.region-topbar .mx-navbar ul.nav > .mx-navbar-item.open .dropdown-menu > li.mx-navbar-subitem.active a {
  color: #FFF;
  background-color: white;
}
.region-topbar .mx-navbar ul.nav > .mx-navbar-item.open .dropdown-menu > li.mx-navbar-subitem.active a .caret {
  border-top-color: #FFF;
  border-bottom-color: #FFF;
}
@media (max-width: 768px) {
  .region-topbar .mx-navbar .mx-navbar-item.open .dropdown-menu {
    background-color: white;
  }
  .region-topbar .mx-navbar .mx-navbar-item.open .dropdown-menu > li.mx-navbar-subitem > a {
    color: #AAA;
    font-size: 12px;
  }
  .region-topbar .mx-navbar .mx-navbar-item.open .dropdown-menu > li.mx-navbar-subitem > a:hover, .region-topbar .mx-navbar .mx-navbar-item.open .dropdown-menu > li.mx-navbar-subitem > a:focus {
    color: #0595DB;
    background-color: white;
  }
  .region-topbar .mx-navbar .mx-navbar-item.open .dropdown-menu > li.mx-navbar-subitem > a.active {
    color: #FFF;
    background-color: white;
  }
}

.region-sidebar .mx-navbar {
  background-color: #252C36;
}
.region-sidebar .mx-navbar ul.nav {
  /* Navigation item */
  /* When hovering or the dropdown is open */
}
.region-sidebar .mx-navbar ul.nav > li.mx-navbar-item > a {
  color: #FFFFFF;
  font-size: 14px;
  /* Dropdown arrow */
  /* Dropdown */
}
.region-sidebar .mx-navbar ul.nav > li.mx-navbar-item > a .caret {
  border-top-color: #FFFFFF;
  border-bottom-color: #FFFFFF;
}
.region-sidebar .mx-navbar ul.nav > li.mx-navbar-item > a:hover, .region-sidebar .mx-navbar ul.nav > li.mx-navbar-item > a:focus, .region-sidebar .mx-navbar ul.nav > li.mx-navbar-item > a.active {
  color: #FFFFFF;
  background-color: #2d3642;
}
.region-sidebar .mx-navbar ul.nav > li.mx-navbar-item > a:hover .caret, .region-sidebar .mx-navbar ul.nav > li.mx-navbar-item > a:focus .caret, .region-sidebar .mx-navbar ul.nav > li.mx-navbar-item > a.active .caret {
  border-top-color: #FFF;
  border-bottom-color: #FFF;
}
.region-sidebar .mx-navbar ul.nav > li.mx-navbar-item > a.active {
  color: #FFF;
  background-color: #36404e;
}
.region-sidebar .mx-navbar ul.nav > li.mx-navbar-item > a .mx-navbar-submenu::before {
  border-color: transparent transparent #2d3642 transparent;
}
.region-sidebar .mx-navbar ul.nav > li.mx-navbar-item > a .glyphicon {
  font-size: 20px;
}
.region-sidebar .mx-navbar ul.nav > .mx-navbar-item > a:hover, .region-sidebar .mx-navbar ul.nav > .mx-navbar-item > a:focus, .region-sidebar .mx-navbar ul.nav > .mx-navbar-item.active a, .region-sidebar .mx-navbar ul.nav > .mx-navbar-item.open > a, .region-sidebar .mx-navbar ul.nav > .mx-navbar-item.open > a:hover, .region-sidebar .mx-navbar ul.nav > .mx-navbar-item.open > a:focus {
  color: #FFFFFF;
  background-color: #2d3642;
}
.region-sidebar .mx-navbar ul.nav > .mx-navbar-item > a:hover .caret, .region-sidebar .mx-navbar ul.nav > .mx-navbar-item > a:focus .caret, .region-sidebar .mx-navbar ul.nav > .mx-navbar-item.active a .caret, .region-sidebar .mx-navbar ul.nav > .mx-navbar-item.open > a .caret, .region-sidebar .mx-navbar ul.nav > .mx-navbar-item.open > a:hover .caret, .region-sidebar .mx-navbar ul.nav > .mx-navbar-item.open > a:focus .caret {
  border-top-color: #FFFFFF;
  border-bottom-color: #FFFFFF;
}
.region-sidebar .mx-navbar ul.nav > .mx-navbar-item.open .dropdown-menu > li.mx-navbar-subitem.active a {
  color: #0595DB;
  background-color: #1d222a;
}
.region-sidebar .mx-navbar ul.nav > .mx-navbar-item.open .dropdown-menu > li.mx-navbar-subitem.active a .caret {
  border-top-color: #0595DB;
  border-bottom-color: #0595DB;
}
@media (max-width: 768px) {
  .region-sidebar .mx-navbar .mx-navbar-item.open .dropdown-menu {
    background-color: white;
  }
  .region-sidebar .mx-navbar .mx-navbar-item.open .dropdown-menu > li.mx-navbar-subitem > a {
    color: #AAA;
    font-size: 12px;
  }
  .region-sidebar .mx-navbar .mx-navbar-item.open .dropdown-menu > li.mx-navbar-subitem > a:hover, .region-sidebar .mx-navbar .mx-navbar-item.open .dropdown-menu > li.mx-navbar-subitem > a:focus {
    color: #0595DB;
    background-color: #1d222a;
  }
  .region-sidebar .mx-navbar .mx-navbar-item.open .dropdown-menu > li.mx-navbar-subitem > a.active {
    color: #0595DB;
    background-color: #1d222a;
  }
}

/* ==========================================================================
   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 {
  margin: 0;
  padding: 0;
}
.mx-navigationlist li.mx-navigationlist-item {
  transition-delay: 0.1s;
  transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
  transition-duration: 0.2s;
  transition-property: all;
  transform-style: initial;
  padding: 15px 15px 15px 15px;
  border-width: 1px;
  border-style: none none solid none;
  border-color: #D7D7D7;
  border-radius: 0;
  background-color: #FFF;
}
.mx-navigationlist li.mx-navigationlist-item:hover, .mx-navigationlist li.mx-navigationlist-item:focus {
  color: inherit;
  background-color: #f7f7f7;
}
.mx-navigationlist li.mx-navigationlist-item.active {
  color: inherit;
  background-color: #f3f3f3;
}

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

   Default Mendix Navigation Tree
========================================================================== */
.mx-navigationtree {
  background-color: #252C36;
  /* Every navigation item */
  /* Sub navigation item specific */
  /* remove focus */
}
.mx-navigationtree .navbar-inner > ul {
  margin: 0;
  padding-left: 0;
}
.mx-navigationtree .navbar-inner > ul > li {
  padding: 0;
  border-style: none;
}
.mx-navigationtree .navbar-inner > ul > li > a {
  display: flex;
  align-items: center;
  height: 60px;
  padding: 5px 15px;
  color: #FFF;
  border-bottom: 1px solid #2d3642;
  border-radius: 0;
  background-color: #252C36;
  text-shadow: none;
  font-size: 14px;
  font-weight: normal;
}
.mx-navigationtree .navbar-inner > ul > li > a .caret {
  border-top-color: #FFF;
  border-bottom-color: #FFF;
}
.mx-navigationtree .navbar-inner > ul > li > a img {
  width: 20px;
  height: auto;
  margin-right: 0.5em;
}
.mx-navigationtree .navbar-inner > ul > li > a .glyphicon {
  top: 0;
  margin-right: 0.5em;
  vertical-align: middle;
  font-size: 20px;
}
.mx-navigationtree .navbar-inner > ul > li a:hover,
.mx-navigationtree .navbar-inner > ul > li a:focus,
.mx-navigationtree .navbar-inner > ul > li a.active {
  text-decoration: none;
  color: #FFF;
  background-color: #2d3642;
}
.mx-navigationtree .navbar-inner > ul > li a:hover .caret,
.mx-navigationtree .navbar-inner > ul > li a:focus .caret,
.mx-navigationtree .navbar-inner > ul > li a.active .caret {
  border-top-color: #FFF;
  border-bottom-color: #FFF;
}
.mx-navigationtree .navbar-inner > ul > li a.active {
  color: #FFF;
  border-left-color: #FFF;
  background-color: #36404e;
}
.mx-navigationtree li.mx-navigationtree-has-items > ul {
  margin: 0;
  padding-left: 0;
  background-color: #1d222a;
}
.mx-navigationtree li.mx-navigationtree-has-items > ul li {
  margin: 0;
  padding: 0;
  border: 0;
}
.mx-navigationtree li.mx-navigationtree-has-items > ul li a {
  padding: 12px 20px 12px 25px;
  text-decoration: none;
  color: #AAA;
  border: 0;
  background-color: #1d222a;
  text-shadow: none;
  font-size: 12px;
  font-weight: normal;
}
.mx-navigationtree li.mx-navigationtree-has-items > ul li a:hover, .mx-navigationtree li.mx-navigationtree-has-items > ul li a:focus, .mx-navigationtree li.mx-navigationtree-has-items > ul li a.active {
  color: #0595DB;
  background-color: #1d222a;
}
.mx-navigationtree li.mx-navigationtree-has-items > ul li a.active {
  color: #0595DB;
  border: 0;
  background-color: #1d222a;
}
.mx-navigationtree:focus {
  outline: 0;
}

.region-topbar .mx-navigationtree {
  background-color: #FFFFFF;
  /* Sub navigation item specific */
}
.region-topbar .mx-navigationtree .navbar-inner > ul > li > a {
  color: #555555;
  border-color: #D7D7D7;
  background-color: #FFFFFF;
  font-size: 14px;
}
.region-topbar .mx-navigationtree .navbar-inner > ul > li > a .caret {
  border-top-color: #555555;
  border-bottom-color: #555555;
}
.region-topbar .mx-navigationtree .navbar-inner > ul > li > a .glyphicon {
  font-size: 1.2em;
}
.region-topbar .mx-navigationtree .navbar-inner > ul > li a:hover,
.region-topbar .mx-navigationtree .navbar-inner > ul > li a:focus,
.region-topbar .mx-navigationtree .navbar-inner > ul > li a.active {
  color: #555555;
  background-color: whitesmoke;
}
.region-topbar .mx-navigationtree .navbar-inner > ul > li a:hover .caret,
.region-topbar .mx-navigationtree .navbar-inner > ul > li a:focus .caret,
.region-topbar .mx-navigationtree .navbar-inner > ul > li a.active .caret {
  border-top-color: #555555;
  border-bottom-color: #555555;
}
.region-topbar .mx-navigationtree .navbar-inner > ul > li a.active {
  color: #555555;
  border-left-color: #555555;
  background-color: #ebebeb;
}
.region-topbar .mx-navigationtree li.mx-navigationtree-has-items > ul {
  background-color: white;
}
.region-topbar .mx-navigationtree li.mx-navigationtree-has-items > ul li a {
  color: #AAA;
  background-color: white;
  font-size: 12px;
}
.region-topbar .mx-navigationtree li.mx-navigationtree-has-items > ul li a:hover, .region-topbar .mx-navigationtree li.mx-navigationtree-has-items > ul li a:focus, .region-topbar .mx-navigationtree li.mx-navigationtree-has-items > ul li a.active {
  color: #0595DB;
  background-color: white;
}
.region-topbar .mx-navigationtree li.mx-navigationtree-has-items > ul li a.active {
  color: #FFF;
  background-color: white;
}

.region-sidebar .mx-navigationtree {
  background-color: #252C36;
  /* Sub navigation item specific */
}
.region-sidebar .mx-navigationtree .navbar-inner > ul > li > a {
  color: #FFFFFF;
  border-color: #2d3642;
  background-color: #252C36;
  font-size: 14px;
}
.region-sidebar .mx-navigationtree .navbar-inner > ul > li > a .caret {
  border-top-color: #FFFFFF;
  border-bottom-color: #FFFFFF;
}
.region-sidebar .mx-navigationtree .navbar-inner > ul > li > a .glyphicon {
  font-size: 20px;
}
.region-sidebar .mx-navigationtree .navbar-inner > ul > li a:hover,
.region-sidebar .mx-navigationtree .navbar-inner > ul > li a:focus,
.region-sidebar .mx-navigationtree .navbar-inner > ul > li a.active {
  color: #FFFFFF;
  background-color: #2d3642;
}
.region-sidebar .mx-navigationtree .navbar-inner > ul > li a:hover .caret,
.region-sidebar .mx-navigationtree .navbar-inner > ul > li a:focus .caret,
.region-sidebar .mx-navigationtree .navbar-inner > ul > li a.active .caret {
  border-top-color: #FFF;
  border-bottom-color: #FFF;
}
.region-sidebar .mx-navigationtree .navbar-inner > ul > li a.active {
  color: #FFF;
  border-left-color: #FFF;
  background-color: #36404e;
}
.region-sidebar .mx-navigationtree li.mx-navigationtree-has-items > ul {
  background-color: #1d222a;
}
.region-sidebar .mx-navigationtree li.mx-navigationtree-has-items > ul li a {
  color: #AAA;
  background-color: #1d222a;
  font-size: 12px;
}
.region-sidebar .mx-navigationtree li.mx-navigationtree-has-items > ul li a:hover, .region-sidebar .mx-navigationtree li.mx-navigationtree-has-items > ul li a:focus, .region-sidebar .mx-navigationtree li.mx-navigationtree-has-items > ul li a.active {
  color: #0595DB;
  background-color: #1d222a;
}
.region-sidebar .mx-navigationtree li.mx-navigationtree-has-items > ul li a.active {
  color: #0595DB;
  background-color: #1d222a;
}

.nav-content-center-text-icons.mx-navigationtree .navbar-inner ul a {
  flex-direction: column;
  justify-content: center;
}
.nav-content-center-text-icons.mx-navigationtree .navbar-inner ul a .glyphicon {
  margin: 0 0 5px 0;
}

.nav-content-center.mx-navigationtree .navbar-inner ul a {
  justify-content: center;
}

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

   Default Mendix Simple Menu Bar
========================================================================== */
.mx-menubar {
  padding: 0;
  background-color: #252C36;
  /* remove focus */
}
.mx-menubar ul.mx-menubar-list {
  display: flex;
  width: 100%;
  min-height: 50px;
}
.mx-menubar ul.mx-menubar-list li.mx-menubar-item {
  margin: 0;
}
.mx-menubar ul.mx-menubar-list li.mx-menubar-item > a {
  display: flex;
  overflow: hidden;
  align-items: center;
  justify-content: center;
  height: 100%;
  padding: 5px 15px;
  white-space: nowrap;
  color: #FFF;
  border-radius: 0;
  font-size: 14px;
  font-weight: normal;
}
.mx-menubar ul.mx-menubar-list li.mx-menubar-item > a img {
  margin-right: 0.5em;
}
.mx-menubar ul.mx-menubar-list li.mx-menubar-item > a .glyphicon {
  top: -1px;
  margin-right: 0.5em;
  vertical-align: middle;
  font-size: 20px;
}
.mx-menubar ul.mx-menubar-list li.mx-menubar-item a:hover,
.mx-menubar ul.mx-menubar-list li.mx-menubar-item a:focus, .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 {
  text-decoration: none;
  color: #FFF;
  background-color: #2d3642;
}
.mx-menubar ul.mx-menubar-list li.mx-menubar-item.active a {
  color: #FFF;
  background-color: #36404e;
}
.mx-menubar:focus {
  outline: 0;
}

.mx-menubar-vertical {
  background-color: #252C36;
}
.mx-menubar-vertical ul.mx-menubar-list {
  display: flex;
}
.mx-menubar-vertical ul.mx-menubar-list li.mx-menubar-item {
  display: block;
}
.mx-menubar-vertical ul.mx-menubar-list li.mx-menubar-item a {
  border-bottom: 1px solid #2d3642;
}

.mx-menubar-horizontal {
  box-shadow: 2px 0 4px 0 rgba(0, 0, 0, 0.14);
  /* Two menu items */
  /* Three menu items */
  /* Four menu items */
  /* Five menu items */
}
.mx-menubar-horizontal ul.mx-menubar-list li.mx-menubar-item {
  width: auto;
}
.mx-menubar-horizontal ul.mx-menubar-list li.mx-menubar-item a {
  width: 100%;
}
.mx-menubar-horizontal.menubar-col-6 ul.mx-menubar-list li.mx-menubar-item {
  width: 50%;
}
.mx-menubar-horizontal.menubar-col-4 ul.mx-menubar-list li.mx-menubar-item {
  width: 33.33333333%;
}
.mx-menubar-horizontal.menubar-col-3 ul.mx-menubar-list li.mx-menubar-item {
  width: 25%;
}
.mx-menubar-horizontal.menubar-col-2 ul.mx-menubar-list li.mx-menubar-item {
  width: 20%;
}

.region-topbar .mx-menubar {
  background-color: #FFFFFF;
}
.region-topbar .mx-menubar ul.mx-menubar-list li.mx-menubar-item a {
  color: #555555;
  font-size: 14px;
}
.region-topbar .mx-menubar ul.mx-menubar-list li.mx-menubar-item a .glyphicon {
  font-size: 1.2em;
}
.region-topbar .mx-menubar ul.mx-menubar-list li.mx-menubar-item a:hover,
.region-topbar .mx-menubar ul.mx-menubar-list li.mx-menubar-item a:focus, .region-topbar .mx-menubar ul.mx-menubar-list li.mx-menubar-item:hover a, .region-topbar .mx-menubar ul.mx-menubar-list li.mx-menubar-item:focus a, .region-topbar .mx-menubar ul.mx-menubar-list li.mx-menubar-item.active a {
  color: #555555;
  background-color: whitesmoke;
}
.region-topbar .mx-menubar ul.mx-menubar-list li.mx-menubar-item.active a {
  color: #555555;
  background-color: #ebebeb;
}
.region-topbar .mx-menubar-vertical {
  background-color: #FFFFFF;
}
.region-topbar .mx-menubar-vertical ul.mx-menubar-list li.mx-menubar-item a {
  height: 60px;
  border-color: #D7D7D7;
}

.region-sidebar .mx-menubar {
  background-color: #252C36;
}
.region-sidebar .mx-menubar ul.mx-menubar-list li.mx-menubar-item a {
  color: #FFFFFF;
  font-size: 14px;
}
.region-sidebar .mx-menubar ul.mx-menubar-list li.mx-menubar-item a .glyphicon {
  font-size: 20px;
}
.region-sidebar .mx-menubar ul.mx-menubar-list li.mx-menubar-item a:hover,
.region-sidebar .mx-menubar ul.mx-menubar-list li.mx-menubar-item a:focus, .region-sidebar .mx-menubar ul.mx-menubar-list li.mx-menubar-item:hover a, .region-sidebar .mx-menubar ul.mx-menubar-list li.mx-menubar-item:focus a, .region-sidebar .mx-menubar ul.mx-menubar-list li.mx-menubar-item.active a {
  color: #FFFFFF;
  background-color: #2d3642;
}
.region-sidebar .mx-menubar ul.mx-menubar-list li.mx-menubar-item.active a {
  color: #FFF;
  background-color: #36404e;
}
.region-sidebar .mx-menubar-vertical {
  background-color: #252C36;
}
.region-sidebar .mx-menubar-vertical ul.mx-menubar-list li.mx-menubar-item a {
  border-color: #2d3642;
}

.bottom-nav-text-icons.mx-menubar ul.mx-menubar-list li.mx-menubar-item a {
  flex-direction: column;
  padding: 8px 8px 6px 8px;
  line-height: normal;
  font-size: 11px;
}
.bottom-nav-text-icons.mx-menubar ul.mx-menubar-list li.mx-menubar-item a .glyphicon {
  display: block;
  margin: 0 0 5px 0;
  font-size: 18px;
}
.bottom-nav-text-icons.mx-menubar ul.mx-menubar-list li.mx-menubar-item a img {
  display: block;
  height: 18px;
  margin: 0 0 5px 0;
}

/* ==========================================================================
   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 .mx-tabcontainer-tabs {
  margin-bottom: 20px;
  border-color: #D7D7D7;
}
.mx-tabcontainer .mx-tabcontainer-tabs > li > a {
  margin-right: 0;
  -webkit-transition: all 0.2s ease-in-out;
  -moz-transition: all 0.2s ease-in-out;
  -o-transition: all 0.2s ease-in-out;
  transition: all 0.2s ease-in-out;
  color: #888888;
  font-weight: normal;
}
.mx-tabcontainer .mx-tabcontainer-tabs > li > a:hover, .mx-tabcontainer .mx-tabcontainer-tabs > li > a:focus {
  background-color: #e4e4e4;
}
.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 {
  color: #555555;
  border: 1px solid #D7D7D7;
  border-bottom-color: transparent;
  background-color: #FFF;
}

.tab-pills.mx-tabcontainer .mx-tabcontainer-tabs {
  border: 0;
}
.tab-pills.mx-tabcontainer .mx-tabcontainer-tabs > li > a {
  margin-right: 2px;
  color: #888888;
  border: 1px solid #D7D7D7;
  border-radius: 4px;
}
.tab-pills.mx-tabcontainer .mx-tabcontainer-tabs > li > a:hover, .tab-pills.mx-tabcontainer .mx-tabcontainer-tabs > li > a:focus {
  background-color: #e4e4e4;
}
.tab-pills.mx-tabcontainer .mx-tabcontainer-tabs > li.active > a,
.tab-pills.mx-tabcontainer .mx-tabcontainer-tabs > li.active > a:hover,
.tab-pills.mx-tabcontainer .mx-tabcontainer-tabs > li.active > a:focus {
  color: #FFFFFF;
  border-color: #0595DB;
  background-color: #0595DB;
}

.tab-lined.mx-tabcontainer .mx-tabcontainer-tabs {
  border-width: 3px;
}
.tab-lined.mx-tabcontainer .mx-tabcontainer-tabs li {
  margin-right: 30px;
  margin-bottom: -3px;
}
.tab-lined.mx-tabcontainer .mx-tabcontainer-tabs li > a {
  padding: 10px 0;
  color: #888888;
  border: 0;
  border-style: solid;
  border-color: transparent;
  border-bottom-width: 3px;
  border-radius: 0;
}
.tab-lined.mx-tabcontainer .mx-tabcontainer-tabs li > a:hover, .tab-lined.mx-tabcontainer .mx-tabcontainer-tabs li > a:focus {
  color: #888888;
  border: 0;
  border-color: transparent;
  background: transparent;
}
.tab-lined.mx-tabcontainer .mx-tabcontainer-tabs li.active > a, .tab-lined.mx-tabcontainer .mx-tabcontainer-tabs li.active > a:hover, .tab-lined.mx-tabcontainer .mx-tabcontainer-tabs li.active > a:focus {
  color: #0595DB;
  border: 0;
  border-bottom: 3px solid #0595DB;
  background-color: transparent;
}

.tab-justified.mx-tabcontainer .mx-tabcontainer-tabs {
  width: 100%;
  border-bottom: 0;
}
.tab-justified.mx-tabcontainer .mx-tabcontainer-tabs > li {
  display: table-cell;
  float: none;
  width: 1%;
  margin: 0;
}
@media (max-width: 767px) {
  .tab-justified.mx-tabcontainer .mx-tabcontainer-tabs > li {
    display: block;
    width: 100%;
  }
}
.tab-justified.mx-tabcontainer .mx-tabcontainer-tabs > li > a {
  text-align: center;
  border-bottom: 1px solid #D7D7D7;
}
.tab-justified.mx-tabcontainer .mx-tabcontainer-tabs > li.active > a {
  border-bottom-color: transparent;
  border-radius: 4px;
}
@media (max-width: 767px) {
  .tab-justified.mx-tabcontainer .mx-tabcontainer-tabs > li.active > a {
    border-bottom-color: #D7D7D7;
  }
}

.tab-bordered.mx-tabcontainer .mx-tabcontainer-tabs {
  margin: 0;
}
.tab-bordered.mx-tabcontainer .mx-tabcontainer-content {
  padding: 10px;
  border-width: 0 1px 1px 1px;
  border-style: solid;
  border-color: #D7D7D7;
  background-color: #FFFFFF;
}

.tab-wizard.mx-tabcontainer .mx-tabcontainer-tabs {
  border-style: none;
  position: relative;
  display: flex;
  justify-content: space-between;
}
.tab-wizard.mx-tabcontainer .mx-tabcontainer-tabs::before {
  content: "";
  height: 1px;
  position: absolute;
  width: 100%;
  display: block;
  top: 16px;
  background-color: #D7D7D7;
}
.tab-wizard.mx-tabcontainer .mx-tabcontainer-tabs > li {
  position: relative;
  width: 100%;
  text-align: center;
  float: none;
}
.tab-wizard.mx-tabcontainer .mx-tabcontainer-tabs > li > a {
  text-align: center;
  margin: auto;
  height: 33px;
  width: 33px;
  padding: 0;
  line-height: 33px;
  font-size: 18px;
  font-weight: bold;
  color: #DDDDDD;
  border: 1px solid #D7D7D7;
  background-color: #FFFFFF;
  border-radius: 100%;
}
.tab-wizard.mx-tabcontainer .mx-tabcontainer-tabs > li.active > a,
.tab-wizard.mx-tabcontainer .mx-tabcontainer-tabs > li.active > a:hover,
.tab-wizard.mx-tabcontainer .mx-tabcontainer-tabs > li.active > a:focus {
  color: #FFFFFF;
  border-color: #0595DB;
  background-color: #0595DB;
}

.tab-mobile.mx-tabcontainer .mx-tabcontainer-tabs {
  margin: 0;
  text-align: center;
  border-style: none;
  background-color: #0595DB;
}
.tab-mobile.mx-tabcontainer .mx-tabcontainer-tabs li {
  display: table-cell;
  float: none;
  width: 1%;
  margin: 0;
  text-align: center;
  border-style: none;
  border-radius: 0;
}
.tab-mobile.mx-tabcontainer .mx-tabcontainer-tabs li a {
  padding: 15px;
  text-transform: uppercase;
  color: #FFFFFF;
  border-width: 0 1px 0 0;
  border-style: solid;
  border-color: rgba(255, 255, 255, 0.3);
  border-radius: 0;
  font-size: 12px;
  font-weight: normal;
}
.tab-mobile.mx-tabcontainer .mx-tabcontainer-tabs li a:hover, .tab-mobile.mx-tabcontainer .mx-tabcontainer-tabs li a:focus {
  background-color: inherit;
}
.tab-mobile.mx-tabcontainer .mx-tabcontainer-tabs li:last-child a {
  border-right: none;
}
.tab-mobile.mx-tabcontainer .mx-tabcontainer-tabs li.active > a, .tab-mobile.mx-tabcontainer .mx-tabcontainer-tabs li.active > a:hover, .tab-mobile.mx-tabcontainer .mx-tabcontainer-tabs li.active > a:focus {
  color: #FFFFFF;
  border-style: none;
  border-radius: 0;
  background-color: #0477af;
}

/* ==========================================================================
   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
========================================================================== */
th {
  font-weight: bold;
}

html body .mx-page table.mx-table th.nopadding,
html body .mx-page table.mx-table td.nopadding {
  padding: 0;
}

table.mx-table > tbody {
  /* Table row */
}
table.mx-table > tbody > tr {
  /* Table header */
  /* Table cells */
}
table.mx-table > tbody > tr > th {
  padding: 8px 8px 8px 8px;
}
table.mx-table > tbody > tr > th s
* {
  color: #666;
  font-weight: bold;
  font-weight: 600;
}
table.mx-table > tbody > tr > th > label {
  padding-top: 7px;
  padding-bottom: 6px;
}
table.mx-table > tbody > tr > td {
  padding: 8px 8px 8px 8px;
}
table.mx-table > tbody > tr > td > div > label,
table.mx-table > tbody > tr > td .mx-referenceselector-input-wrapper label {
  padding-top: 7px;
  padding-bottom: 6px;
}

.mx-templategrid table.mx-table > tbody > tr > th,
.mx-templategrid table.mx-table > tbody > tr > td {
  padding: 8px 8px 8px 8px;
}

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

table.table-lined.mx-table > tbody > tr > td {
  border-width: 1px 0;
  border-style: solid;
  border-color: #D7D7D7;
}

table.table-bordered.mx-table > tbody > tr > th,
table.table-bordered.mx-table > tbody > tr > td {
  border-width: 1px;
  border-style: solid;
  border-color: #D7D7D7;
}

table.table-compact.mx-table > tbody > tr > th,
table.table-compact.mx-table > tbody > tr > td {
  padding-top: 2px;
  padding-bottom: 2px;
}

table.table-sideless.mx-table > tbody > tr > td,
table.table-sideless.mx-table > tbody > tr > th {
  padding-right: 0;
}
table.table-sideless.mx-table > tbody > tr > th:first-child,
table.table-sideless.mx-table > tbody > tr > td:first-child {
  padding-left: 0;
}

table.table-spaceless.mx-table > tbody > tr > th,
table.table-spaceless.mx-table > tbody > tr > td {
  padding: 0;
}

table.table-vertical.mx-table > tbody > tr > th {
  padding-bottom: 0;
}
table.table-vertical.mx-table > tbody > tr > th > label {
  padding: 0;
}
table.table-vertical.mx-table > tbody > tr > th > div > label {
  padding: 0;
}

table.table-align-vertical-middle.mx-table > tbody > tr > th,
table.table-align-vertical-middle.mx-table > tbody > tr > td {
  vertical-align: middle;
}

table.table-label-compact.mx-table > tbody > tr > th > label,
table.table-label-compact.mx-table > tbody > tr > td > label {
  margin: 0;
  padding: 0;
}
table.table-label-compact.mx-table > tbody > tr > th > div > label,
table.table-label-compact.mx-table > tbody > tr > th .mx-referenceselector-input-wrapper label,
table.table-label-compact.mx-table > tbody > tr > td > div > label,
table.table-label-compact.mx-table > tbody > tr > td .mx-referenceselector-input-wrapper label {
  margin: 0;
  padding: 0;
}

table.table-row-s.mx-table > tbody > tr > th,
table.table-row-s.mx-table > tbody > tr > td {
  height: 55px;
}

table.table-row-m.mx-table > tbody > tr > th,
table.table-row-m.mx-table > tbody > tr > td {
  height: 70px;
}

table.table-row-l.mx-table > tbody > tr > th,
table.table-row-l.mx-table > tbody > tr > td {
  height: 120px;
}

table.table-fixed {
  table-layout: fixed;
}

/* ==========================================================================
   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 .mx-templategrid-content-wrapper {
  table-layout: fixed;
}
.mx-templategrid .mx-templategrid-item {
  padding: 15px 15px 15px 15px;
  cursor: default;
  background-color: #FFF;
}
.mx-templategrid .mx-templategrid-item:hover {
  background-color: transparent;
}
.mx-templategrid .mx-templategrid-item.selected {
  background-color: #f3f3f3 !important;
}
.mx-templategrid .mx-layoutgrid {
  padding-top: 0 !important;
  padding-bottom: 0 !important;
}

.templategrid-hover.mx-templategrid .mx-templategrid-item:hover {
  background-color: #f7f7f7 !important;
}
.templategrid-hover.mx-templategrid .mx-templategrid-item.selected {
  background-color: #f3f3f3 !important;
}
.templategrid-hover.mx-templategrid .mx-templategrid-item.selected:hover {
  background-color: #ebebeb !important;
}

.templategrid-selectable.mx-templategrid .mx-templategrid-item {
  cursor: pointer;
}

.templategrid-lined.mx-templategrid .mx-grid-content {
  border-top-width: 2px;
  border-top-style: solid;
  border-top-color: #D7D7D7;
}
.templategrid-lined.mx-templategrid .mx-templategrid-item {
  border-top: 1px solid #D7D7D7;
  border-right: none;
  border-bottom: 1px solid #D7D7D7;
  border-left: none;
}

.templategrid-striped.mx-templategrid .mx-templategrid-row:nth-child(odd) .mx-templategrid-item {
  background-color: #F9F9F9;
}

.templategrid-stylingless.mx-templategrid .mx-templategrid-item {
  padding: 0;
  cursor: default;
  border: 0;
  background-color: transparent;
}
.templategrid-stylingless.mx-templategrid .mx-templategrid-item:hover {
  background-color: transparent;
}
.templategrid-stylingless.mx-templategrid .mx-templategrid-item.selected {
  background-color: transparent !important;
}
.templategrid-stylingless.mx-templategrid .mx-templategrid-item.selected:hover {
  background-color: transparent !important;
}

.templategrid-transparent.mx-templategrid .mx-templategrid-item {
  border: 0;
  background-color: transparent;
}

.templategrid-lg.mx-templategrid .mx-templategrid-item {
  padding: 30px 30px 30px 30px;
}

.templategrid-sm.mx-templategrid .mx-templategrid-item {
  padding: 7.5px 7.5px 7.5px 7.5px;
}

.mx-templategrid[class*="tg-col"] {
  overflow: hidden;
}
.mx-templategrid[class*="tg-col"] .mx-templategrid-content-wrapper {
  display: block;
}
.mx-templategrid[class*="tg-col"] .mx-templategrid-row {
  display: block;
  margin-right: -15px;
  margin-left: -15px;
}
.mx-templategrid[class*="tg-col"] .mx-templategrid-row::before, .mx-templategrid[class*="tg-col"] .mx-templategrid-row::after {
  display: table;
  clear: both;
  content: " ";
}
.mx-templategrid[class*="tg-col"] .mx-templategrid-item {
  position: relative;
  display: block;
  float: left;
  min-height: 1px;
  padding-right: 15px;
  padding-left: 15px;
  border: 0;
}
@media (max-width: 992px) {
  .mx-templategrid[class*="tg-col"] .mx-templategrid-item {
    width: 100% !important;
  }
}
.mx-templategrid[class*="tg-col"] .mx-templategrid-item .mx-dataview {
  overflow: hidden;
}
.mx-templategrid[class*="tg-col"].tg-col-xs-12 .mx-templategrid-item {
  width: 100% !important;
}
.mx-templategrid[class*="tg-col"].tg-col-xs-11 .mx-templategrid-item {
  width: 91.66666667% !important;
}
.mx-templategrid[class*="tg-col"].tg-col-xs-10 .mx-templategrid-item {
  width: 83.33333333% !important;
}
.mx-templategrid[class*="tg-col"].tg-col-xs-9 .mx-templategrid-item {
  width: 75% !important;
}
.mx-templategrid[class*="tg-col"].tg-col-xs-8 .mx-templategrid-item {
  width: 66.66666667% !important;
}
.mx-templategrid[class*="tg-col"].tg-col-xs-7 .mx-templategrid-item {
  width: 58.33333333% !important;
}
.mx-templategrid[class*="tg-col"].tg-col-xs-6 .mx-templategrid-item {
  width: 50% !important;
}
.mx-templategrid[class*="tg-col"].tg-col-xs-5 .mx-templategrid-item {
  width: 41.66666667% !important;
}
.mx-templategrid[class*="tg-col"].tg-col-xs-4 .mx-templategrid-item {
  width: 33.33333333% !important;
}
.mx-templategrid[class*="tg-col"].tg-col-xs-3 .mx-templategrid-item {
  width: 25% !important;
}
.mx-templategrid[class*="tg-col"].tg-col-xs-2 .mx-templategrid-item {
  width: 16.66666667% !important;
}
.mx-templategrid[class*="tg-col"].tg-col-xs-1 .mx-templategrid-item {
  width: 8.33333333% !important;
}
@media (min-width: 768px) {
  .mx-templategrid[class*="tg-col"].tg-col-sm-12 .mx-templategrid-item {
    width: 100% !important;
  }
  .mx-templategrid[class*="tg-col"].tg-col-sm-11 .mx-templategrid-item {
    width: 91.66666667% !important;
  }
  .mx-templategrid[class*="tg-col"].tg-col-sm-10 .mx-templategrid-item {
    width: 83.33333333% !important;
  }
  .mx-templategrid[class*="tg-col"].tg-col-sm-9 .mx-templategrid-item {
    width: 75% !important;
  }
  .mx-templategrid[class*="tg-col"].tg-col-sm-8 .mx-templategrid-item {
    width: 66.66666667% !important;
  }
  .mx-templategrid[class*="tg-col"].tg-col-sm-7 .mx-templategrid-item {
    width: 58.33333333% !important;
  }
  .mx-templategrid[class*="tg-col"].tg-col-sm-6 .mx-templategrid-item {
    width: 50% !important;
  }
  .mx-templategrid[class*="tg-col"].tg-col-sm-5 .mx-templategrid-item {
    width: 41.66666667% !important;
  }
  .mx-templategrid[class*="tg-col"].tg-col-sm-4 .mx-templategrid-item {
    width: 33.33333333% !important;
  }
  .mx-templategrid[class*="tg-col"].tg-col-sm-3 .mx-templategrid-item {
    width: 25% !important;
  }
  .mx-templategrid[class*="tg-col"].tg-col-sm-2 .mx-templategrid-item {
    width: 16.66666667% !important;
  }
  .mx-templategrid[class*="tg-col"].tg-col-sm-1 .mx-templategrid-item {
    width: 8.33333333% !important;
  }
}
@media (min-width: 992px) {
  .mx-templategrid[class*="tg-col"].tg-col-md-12 .mx-templategrid-item {
    width: 100% !important;
  }
  .mx-templategrid[class*="tg-col"].tg-col-md-11 .mx-templategrid-item {
    width: 91.66666667% !important;
  }
  .mx-templategrid[class*="tg-col"].tg-col-md-10 .mx-templategrid-item {
    width: 83.33333333% !important;
  }
  .mx-templategrid[class*="tg-col"].tg-col-md-9 .mx-templategrid-item {
    width: 75% !important;
  }
  .mx-templategrid[class*="tg-col"].tg-col-md-8 .mx-templategrid-item {
    width: 66.66666667% !important;
  }
  .mx-templategrid[class*="tg-col"].tg-col-md-7 .mx-templategrid-item {
    width: 58.33333333% !important;
  }
  .mx-templategrid[class*="tg-col"].tg-col-md-6 .mx-templategrid-item {
    width: 50% !important;
  }
  .mx-templategrid[class*="tg-col"].tg-col-md-5 .mx-templategrid-item {
    width: 41.66666667% !important;
  }
  .mx-templategrid[class*="tg-col"].tg-col-md-4 .mx-templategrid-item {
    width: 33.33333333% !important;
  }
  .mx-templategrid[class*="tg-col"].tg-col-md-3 .mx-templategrid-item {
    width: 25% !important;
  }
  .mx-templategrid[class*="tg-col"].tg-col-md-2 .mx-templategrid-item {
    width: 16.66666667% !important;
  }
  .mx-templategrid[class*="tg-col"].tg-col-md-1 .mx-templategrid-item {
    width: 8.33333333% !important;
  }
}
@media (min-width: 1200px) {
  .mx-templategrid[class*="tg-col"].tg-col-lg-12 .mx-templategrid-item {
    width: 100% !important;
  }
  .mx-templategrid[class*="tg-col"].tg-col-lg-11 .mx-templategrid-item {
    width: 91.66666667% !important;
  }
  .mx-templategrid[class*="tg-col"].tg-col-lg-10 .mx-templategrid-item {
    width: 83.33333333% !important;
  }
  .mx-templategrid[class*="tg-col"].tg-col-lg-9 .mx-templategrid-item {
    width: 75% !important;
  }
  .mx-templategrid[class*="tg-col"].tg-col-lg-8 .mx-templategrid-item {
    width: 66.66666667% !important;
  }
  .mx-templategrid[class*="tg-col"].tg-col-lg-7 .mx-templategrid-item {
    width: 58.33333333% !important;
  }
  .mx-templategrid[class*="tg-col"].tg-col-lg-6 .mx-templategrid-item {
    width: 50% !important;
  }
  .mx-templategrid[class*="tg-col"].tg-col-lg-5 .mx-templategrid-item {
    width: 41.66666667% !important;
  }
  .mx-templategrid[class*="tg-col"].tg-col-lg-4 .mx-templategrid-item {
    width: 33.33333333% !important;
  }
  .mx-templategrid[class*="tg-col"].tg-col-lg-3 .mx-templategrid-item {
    width: 25% !important;
  }
  .mx-templategrid[class*="tg-col"].tg-col-lg-2 .mx-templategrid-item {
    width: 16.66666667% !important;
  }
  .mx-templategrid[class*="tg-col"].tg-col-lg-1 .mx-templategrid-item {
    width: 8.33333333% !important;
  }
}

/* ==========================================================================
   Typography
========================================================================== */
p {
  line-height: 1.78571;
}

label {
  padding-top: 0;
}

.mx-title {
  margin: 15px 0 20px 0;
  color: #17347B;
  font-size: 31px;
  font-weight: normal;
}

h1,
.h1,
.h1 > * {
  font-size: 31px;
}

h2,
.h2,
.h2 > * {
  font-size: 26px;
}

h3,
.h3,
.h3 > * {
  font-size: 24px;
}

h4,
.h4,
.h4 > * {
  font-size: 18px;
}

h5,
.h5,
.h5 > * {
  font-size: 14px;
}

h6,
.h6,
.h6 > * {
  font-size: 12px;
}

h1,
h2,
h3,
h4,
h5,
h6,
.h1,
.h2,
.h3,
.h4,
.h5,
.h6 {
  margin: 15px 0 20px 0;
  color: #17347B;
  font-weight: normal;
  line-height: 1.3;
}

.text-small {
  font-size: 12px !important;
}

.text-large {
  font-size: 16px !important;
}

.text-light,
.text-light > *,
.text-light label {
  font-weight: 100 !important;
}

.text-normal,
.text-normal > *,
.text-normal label {
  font-weight: normal !important;
}

.text-semibold,
.text-semibold > *,
.text-semibold label {
  font-weight: 600 !important;
}

.text-bold,
.text-bold > *,
.text-bold label {
  font-weight: bold !important;
}

.text-default,
.text-default:hover {
  color: #555555 !important;
}

.text-primary,
.text-primary:hover {
  color: #0595DB !important;
}

.text-info,
.text-info:hover {
  color: #48B0F7 !important;
}

.text-success,
.text-success:hover {
  color: #76CA02 !important;
}

.text-warning,
.text-warning:hover {
  color: #F99B1D !important;
}

.text-danger,
.text-danger:hover {
  color: #ED1C24 !important;
}

.text-header {
  color: #17347B !important;
}

.text-detail {
  color: #888888 !important;
}

.text-white {
  color: #FFFFFF;
}

.text-left {
  display: block;
  text-align: left !important;
}

.text-center {
  display: block;
  text-align: center !important;
}

.text-right {
  display: block;
  text-align: right !important;
}

.text-justify {
  text-align: justify !important;
}

.text-lowercase {
  text-transform: lowercase !important;
}

.text-uppercase {
  text-transform: uppercase !important;
}

.text-capitalize {
  text-transform: capitalize !important;
}

.text-break {
  word-break: break-all !important;
  word-break: break-word !important;
  -ms-word-break: break-all !important;
  -webkit-hyphens: auto !important;
  -moz-hyphens: auto !important;
  hyphens: auto !important;
}

.text-nowrap {
  white-space: nowrap !important;
}

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

   Default Bootstrap containers
========================================================================== */
@media (max-width: 767px) {
  .row {
    margin-right: -7.5px;
    margin-left: -7.5px;
  }
}

.col-lg-1, .col-lg-10, .col-lg-11, .col-lg-12, .col-lg-2, .col-lg-3, .col-lg-4, .col-lg-5, .col-lg-6, .col-lg-7, .col-lg-8, .col-lg-9, .col-md-1, .col-md-10, .col-md-11, .col-md-12, .col-md-2, .col-md-3, .col-md-4, .col-md-5, .col-md-6, .col-md-7, .col-md-8, .col-md-9, .col-sm-1, .col-sm-10, .col-sm-11, .col-sm-12, .col-sm-2, .col-sm-3, .col-sm-4, .col-sm-5, .col-sm-6, .col-sm-7, .col-sm-8, .col-sm-9, .col-xs-1, .col-xs-10, .col-xs-11, .col-xs-12, .col-xs-2, .col-xs-3, .col-xs-4, .col-xs-5, .col-xs-6, .col-xs-7, .col-xs-8, .col-xs-9 {
  padding-right: 15px;
  padding-left: 15px;
}
@media (max-width: 767px) {
  .col-lg-1, .col-lg-10, .col-lg-11, .col-lg-12, .col-lg-2, .col-lg-3, .col-lg-4, .col-lg-5, .col-lg-6, .col-lg-7, .col-lg-8, .col-lg-9, .col-md-1, .col-md-10, .col-md-11, .col-md-12, .col-md-2, .col-md-3, .col-md-4, .col-md-5, .col-md-6, .col-md-7, .col-md-8, .col-md-9, .col-sm-1, .col-sm-10, .col-sm-11, .col-sm-12, .col-sm-2, .col-sm-3, .col-sm-4, .col-sm-5, .col-sm-6, .col-sm-7, .col-sm-8, .col-sm-9, .col-xs-1, .col-xs-10, .col-xs-11, .col-xs-12, .col-xs-2, .col-xs-3, .col-xs-4, .col-xs-5, .col-xs-6, .col-xs-7, .col-xs-8, .col-xs-9 {
    padding-right: 7.5px;
    padding-left: 7.5px;
  }
}

.v-center {
  display: table;
  width: 100%;
}
.v-center::before, .v-center::after {
  display: none;
}
.v-center .row {
  display: table-row;
}
.v-center .row > [class*="col-"] {
  display: table-cell;
  float: none;
  vertical-align: middle;
}
.v-center .row > [class*="col-"]:first-child {
  padding-left: 0;
}
.v-center .row > [class*="col-"]:last-child {
  padding-right: 0;
}

.no-gutter > [class*="col-"] {
  padding-right: 0;
  padding-left: 0;
}

.mx-progress {
  color: #555555;
  background: #F5F8FD;
}
.mx-progress .mx-progress-message {
  color: #555555;
}
.mx-progress .mx-progress-indicator {
  position: relative;
  overflow: hidden;
  width: 100%;
  max-width: 100%;
  height: 2px;
  margin: auto;
  padding: 0;
  border-radius: 0;
  background: #EEEEEE;
}
.mx-progress .mx-progress-indicator:before, .mx-progress .mx-progress-indicator:after {
  position: absolute;
  top: 0;
  left: 0;
  display: block;
  width: 50%;
  height: 2px;
  content: "";
  transform: translate3d(-100%, 0, 0);
  background: #0595DB;
}
.mx-progress .mx-progress-indicator::before {
  animation: loader 2s infinite;
}
.mx-progress .mx-progress-indicator::after {
  animation: loader 2s -2s infinite;
}

@keyframes loader {
  0% {
    transform: translate3d(-100%, 0, 0);
  }
  100% {
    transform: translate3d(200%, 0, 0);
  }
}
.profile-phone .mx-progress-empty {
  position: relative;
  top: 45px;
  left: 0;
  overflow: hidden;
  width: 100%;
  max-width: 100%;
  height: 1px;
  margin: auto;
  padding: 0;
  border-radius: 0;
  background: #EEEEEE;
}
.profile-phone .mx-progress-empty:before, .profile-phone .mx-progress-empty:after {
  position: absolute;
  top: 0;
  left: 0;
  display: block;
  width: 50%;
  height: 1px;
  content: "";
  transform: translate3d(-100%, 0, 0);
  background: #0595DB;
}
.profile-phone .mx-progress-empty::before {
  animation: loader 2s infinite;
}
.profile-phone .mx-progress-empty::after {
  animation: loader 2s -2s infinite;
}
.profile-phone .mx-progress-empty .mx-progress-indicator {
  display: none;
}

/* ==========================================================================
   Alignment Blocks

========================================================================== */
.flexcontainer {
  display: flex;
  overflow: hidden;
  flex: 1;
  flex-direction: row;
}
.flexcontainer .flexitem {
  margin-right: 15px;
}
.flexcontainer .flexitem:last-child {
  margin-right: 0;
}
.flexcontainer .flexitem-main {
  overflow: hidden;
  flex: 1;
}

.flex-center {
  align-items: center;
}

/* ==========================================================================
   Breadcrumbs

========================================================================== */
.breadcrumb {
  margin: 0;
  padding: 0;
  border-radius: 0;
  background-color: transparent;
  font-size: 14px;
}

.breadcrumb-item {
  display: inline-block;
  margin: 0;
}
.breadcrumb-item:last-child {
  color: #555555;
}
.breadcrumb-item:last-child a {
  text-decoration: none;
}

.breadcrumb-item + .breadcrumb-item::before {
  display: inline-block;
  padding-right: 10px;
  padding-left: 10px;
  content: "/";
  color: #888888;
}

.breadcrumb-large {
  font-size: 24px;
}

.breadcrumb-underline {
  padding-bottom: 15px;
  border-bottom: 1px solid #D7D7D7;
}

/* ==========================================================================
   Cards

========================================================================== */
.card {
  padding: 30px;
  border: 1px solid #D7D7D7;
  border-radius: 4px;
  background-color: #FFFFFF;
}

.card-title {
  margin-top: 0;
}

.cardaction .card-image .glyphicon {
  font-size: 58px;
}

.cardmetrics .card-title {
  margin-bottom: 0;
}
.cardmetrics .card-image {
  width: 100px;
  height: auto;
}
.cardmetrics .card-image.btn {
  width: 100px;
  height: 100px;
  padding: 0;
  cursor: default;
  pointer-events: none;
  font-size: 40px;
}
.cardmetrics .card-counter {
  margin: 0;
  font-size: 64px;
}

.cardinfo .card-text {
  margin-bottom: 30px;
}

.textwithicon {
  overflow: hidden;
  max-width: 100%;
  margin-bottom: 15px;
  text-overflow: ellipsis;
}
.textwithicon .textwithicon-icon,
.textwithicon .textwithicon-text {
  display: inline-block;
  vertical-align: middle;
}
.textwithicon .textwithicon-icon {
  margin-right: 15px;
  padding: 0;
  color: #0595DB;
  border: 0;
  background: transparent;
  font-size: 23px;
}

.socialprofiles .socialprofiles-title {
  display: block;
  margin-bottom: 10px;
  font-weight: bold;
}
.socialprofiles .socialprofiles-button {
  width: 24px;
  height: 24px;
  margin-right: 15px;
  padding: 0;
  border-radius: 24px;
}
.socialprofiles .socialprofiles-button .glyphicon {
  margin: 0;
}

.cardtabs {
  padding: 0;
}
.cardtabs .cardtabs-tabs {
  margin: 0;
}
.cardtabs .cardtabs-tabs ul.mx-tabcontainer-tabs {
  display: flex;
  margin: 0;
  background-color: #f7f7f7;
}
.cardtabs .cardtabs-tabs ul.mx-tabcontainer-tabs li {
  flex: 1 1 auto;
  text-align: center;
}
.cardtabs .cardtabs-tabs ul.mx-tabcontainer-tabs li a,
.cardtabs .cardtabs-tabs ul.mx-tabcontainer-tabs li a:hover,
.cardtabs .cardtabs-tabs ul.mx-tabcontainer-tabs li a:focus {
  border-top-width: 0;
  border-right-width: 1px;
  border-left-width: 0;
}
.cardtabs .cardtabs-tabs ul.mx-tabcontainer-tabs li:first-child a {
  border-radius: 4px 0 0 0;
}
.cardtabs .cardtabs-tabs ul.mx-tabcontainer-tabs li:last-child a {
  border-radius: 0 4px 0 0;
}
@media (max-width: 767px) {
  .cardtabs .cardtabs-tabs .mx-tabcontainer-pane {
    padding: 15px;
  }
}
@media (min-width: 768px) {
  .cardtabs .cardtabs-tabs .mx-tabcontainer-pane {
    padding: 30px;
  }
}
@media (min-width: 992px) {
  .cardtabs .cardtabs-tabs .mx-tabcontainer-pane {
    padding: 30px;
  }
}

.cardproduct, .cardproduct2, .cardproduct3 {
  padding: 0;
}
.cardproduct .cardproduct-header, .cardproduct2 .cardproduct-header, .cardproduct3 .cardproduct-header {
  position: relative;
  overflow: hidden;
  height: 200px;
}
.cardproduct .cardproduct-header .card-image, .cardproduct2 .cardproduct-header .card-image, .cardproduct3 .cardproduct-header .card-image {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: auto;
}
.cardproduct .cardproduct-header .cardproduct-overlay, .cardproduct2 .cardproduct-header .cardproduct-overlay, .cardproduct3 .cardproduct-header .cardproduct-overlay {
  position: absolute;
  bottom: 0;
  left: 0;
  width: 100%;
  padding: 20px 30px;
  background: rgba(0, 0, 0, 0.6);
}
.cardproduct .cardproduct-header .cardproduct-overlay .cardproduct-overlay-category, .cardproduct2 .cardproduct-header .cardproduct-overlay .cardproduct-overlay-category, .cardproduct3 .cardproduct-header .cardproduct-overlay .cardproduct-overlay-category,
.cardproduct .cardproduct-header .cardproduct-overlay .cardproduct-overlay-title,
.cardproduct2 .cardproduct-header .cardproduct-overlay .cardproduct-overlay-title,
.cardproduct3 .cardproduct-header .cardproduct-overlay .cardproduct-overlay-title {
  margin: 0;
  color: #FFFFFF;
}
.cardproduct .cardproduct-footer, .cardproduct2 .cardproduct-footer, .cardproduct3 .cardproduct-footer {
  position: relative;
  padding: 20px 30px;
}
.cardproduct .cardproduct-footer .cardproduct-name, .cardproduct2 .cardproduct-footer .cardproduct-name, .cardproduct3 .cardproduct-footer .cardproduct-name {
  margin: 0;
}
.cardproduct .cardproduct-footer .widget-star-rating-font, .cardproduct2 .cardproduct-footer .widget-star-rating-font, .cardproduct3 .cardproduct-footer .widget-star-rating-font {
  font-size: 20px;
}
.cardproduct .cardproduct-footer .cardproduct-btn, .cardproduct2 .cardproduct-footer .cardproduct-btn, .cardproduct3 .cardproduct-footer .cardproduct-btn {
  position: absolute;
  top: 0;
  right: 0;
  bottom: 0;
  display: flex;
  align-items: center;
  height: 100%;
  padding: 30px;
  border-left: 1px solid #D7D7D7;
}

.cardproduct2 .cardproduct-header::after {
  position: absolute;
  bottom: 0;
  left: 0;
  display: block;
  width: 100%;
  padding: 20px 30px;
  content: "";
  background: rgba(0, 0, 0, 0.6);
  background: -moz-linear-gradient(top, rgba(255, 255, 255, 0) 0%, rgba(250, 250, 250, 0) 2%, rgba(0, 0, 0, 0.99) 99%, black 100%);
  background: -webkit-linear-gradient(top, rgba(255, 255, 255, 0) 0%, rgba(250, 250, 250, 0) 2%, rgba(0, 0, 0, 0.99) 99%, black 100%);
  background: linear-gradient(to bottom, rgba(255, 255, 255, 0) 0%, rgba(250, 250, 250, 0) 2%, rgba(0, 0, 0, 0.99) 99%, black 100%);
}

.cardproduct3 .cardproduct-header {
  height: 320px;
}
.cardproduct3 .cardproduct-header img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}
.cardproduct3 .cardproduct-header .cardproduct-overlay {
  min-height: 100px;
  padding: 30px;
  background: -moz-linear-gradient(top, rgba(255, 255, 255, 0) 0%, rgba(250, 250, 250, 0) 8%, rgba(0, 0, 0, 0.99) 121%, black 100%);
  background: -webkit-linear-gradient(top, rgba(255, 255, 255, 0) 0%, rgba(250, 250, 250, 0) 8%, rgba(0, 0, 0, 0.99) 121%, black 100%);
  background: linear-gradient(to bottom, rgba(255, 255, 255, 0) 0%, rgba(250, 250, 250, 0) 8%, rgba(0, 0, 0, 0.99) 121%, black 100%);
  font-size: 14px;
}

.cardstatus {
  padding: 20px;
}
.cardstatus .card-linkicon {
  font-size: 30px;
}
.cardstatus .cardstatus-status {
  margin-bottom: 5px;
}

/* ==========================================================================
   Control Group
   
   A group of buttons next to eachother
========================================================================== */
.controlgroup .btn,
.controlgroup .btn-group {
  margin-right: 5px;
  margin-bottom: 5px;
}
.controlgroup .btn:last-child,
.controlgroup .btn-group:last-child {
  margin-right: 0;
}
.controlgroup .btn .btn,
.controlgroup .btn-group .btn {
  margin-right: 0;
  margin-bottom: 0;
}
.controlgroup .btn-group .btn + .btn {
  margin-left: -1px;
}

/* ==========================================================================
   Full page blocks
   
   Blocks that take up the full width and height
========================================================================== */
.fullpageblock {
  position: relative;
  height: 100%;
  min-height: 100%;
}
.fullpageblock .fullheight {
  height: 100% !important;
}
.fullpageblock .fullheight > .mx-dataview-content {
  height: inherit !important;
}
.fullpageblock .fullpage-overlay {
  position: absolute;
  z-index: 10;
  bottom: 0;
  left: 0;
  width: 100%;
}

/* ==========================================================================
   Pageheader
========================================================================== */
.pageheader {
  border-bottom: 1px solid #D7D7D7;
  background: #F5F8FD;
}

.mx-scrollcontainer .mx-placeholder .mx-layoutgrid .pageheader {
  background: transparent;
}
@media (max-width: 767px) {
  .mx-scrollcontainer .mx-placeholder .mx-layoutgrid .pageheader {
    margin-bottom: 15px;
  }
}
@media (min-width: 768px) {
  .mx-scrollcontainer .mx-placeholder .mx-layoutgrid .pageheader {
    margin-bottom: 30px;
  }
}
@media (min-width: 992px) {
  .mx-scrollcontainer .mx-placeholder .mx-layoutgrid .pageheader {
    margin-bottom: 30px;
  }
}
@media (max-width: 767px) {
  .mx-scrollcontainer .mx-placeholder .mx-layoutgrid .pageheader {
    padding-bottom: 15px;
  }
}
@media (min-width: 768px) {
  .mx-scrollcontainer .mx-placeholder .mx-layoutgrid .pageheader {
    padding-bottom: 30px;
  }
}
@media (min-width: 992px) {
  .mx-scrollcontainer .mx-placeholder .mx-layoutgrid .pageheader {
    padding-bottom: 30px;
  }
}

.pageheader-type {
  margin: 0;
}

.pageheader-title {
  margin: 0;
}

.pageheader-subtitle {
  margin: 0;
}

.pageheaderwithsearch .pageheader-title {
  margin-bottom: 1em;
}

/* ==========================================================================
   Pageheader
   
========================================================================== */
.heroheader {
  border-bottom: 1px solid #D7D7D7;
  background: #F5F8FD;
}

.heroheader-title {
  margin: 0 0 10px 0;
}

.heroheader-subtitle {
  margin: 0;
  padding: 0 15px;
}
.heroheader-subtitle::before {
  display: block;
  max-width: 330px;
  height: 1px;
  margin: auto auto 10px auto;
  content: "";
  background-color: #e1e1e1;
}

.heroheader1 {
  background-image: linear-gradient(152deg, #0CC7F0 0%, #087ECC 51%, #077AC9 55%, #0659B9 78%);
}
.heroheader1 .heroheader-title {
  margin-bottom: 10px;
  color: #FFFFFF;
}
.heroheader1 .heroheader-subtitle {
  padding: 0;
  color: #FFFFFF;
}
.heroheader1 .heroheader-subtitle::before {
  display: none;
}

.heroheadermap .heroheadermap-map {
  height: 350px;
}
.heroheadermap .heroheadermap-controls {
  background: #F5F8FD;
}

.heroheaderproduct {
  position: relative;
  overflow: hidden;
  height: 300px;
  background-color: #000000;
}
.heroheaderproduct .heroheaderproduct-backgroundimage {
  position: absolute;
  z-index: 0;
  top: 0;
  width: 100%;
  opacity: 0.7;
  filter: blur(5px);
}
.heroheaderproduct .heroheaderproduct-overlay {
  position: absolute;
  z-index: 1;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
}

.heroheaderexpense .heroheaderexpense-title {
  font-size: 72px;
}
.heroheaderexpense .heroheaderexpense-type {
  align-items: center;
}
.heroheaderexpense .heroheaderexpense-type::before {
  flex-grow: 1;
  height: 1px;
  margin-right: 10px;
  content: "";
  background-color: #D2D2D2;
}

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

   Used in default forms
========================================================================== */
.formblock-title {
  margin-bottom: 15px;
  padding-bottom: 15px;
  border-bottom: 1px solid #D7D7D7;
}

/* ==========================================================================
   Lists
   
   Pre-styled listviews with content
========================================================================== */
/* ==========================================================================
   Master Detail
   
    A list with a listening dataview
========================================================================== */
.masterdetail {
  position: relative;
}
@media (min-width: 992px) {
  .masterdetail .mx-layoutgrid {
    padding: 0 15px !important;
  }
}
.masterdetail .masterdetail-master .controlgroup {
  margin-bottom: 15px;
}
@media (min-width: 992px) {
  .masterdetail .masterdetail-master {
    position: absolute;
    top: 0;
    bottom: 0;
    left: 0;
    padding: 0;
    border-right: 1px solid #D7D7D7;
  }
  .masterdetail .masterdetail-master .mx-listview-searchbar {
    margin: 15px;
  }
  .masterdetail .masterdetail-master .controlgroup {
    margin: 0;
    padding: 15px;
    border-bottom: 1px solid #D7D7D7;
  }
}
@media (min-width: 992px) and (max-width: 767px) {
  .masterdetail .masterdetail-detail {
    padding: 15px 15px 15px 15px;
  }
}
@media (min-width: 992px) and (min-width: 768px) {
  .masterdetail .masterdetail-detail {
    padding: 30px 30px 30px 30px;
  }
}
@media (min-width: 992px) and (min-width: 992px) {
  .masterdetail .masterdetail-detail {
    padding: 30px 30px 30px 30px;
  }
}

@media (max-width: 767px) {
  .masterdetailvertical .masterdetail-master {
    margin-bottom: 15px;
  }
}
@media (min-width: 768px) {
  .masterdetailvertical .masterdetail-master {
    margin-bottom: 30px;
  }
}
@media (min-width: 992px) {
  .masterdetailvertical .masterdetail-master {
    margin-bottom: 30px;
  }
}
@media (max-width: 767px) {
  .masterdetailvertical .masterdetail-detail {
    padding-top: 15px;
  }
}
@media (min-width: 768px) {
  .masterdetailvertical .masterdetail-detail {
    padding-top: 30px;
  }
}
@media (min-width: 992px) {
  .masterdetailvertical .masterdetail-detail {
    padding-top: 30px;
  }
}

/* ==========================================================================
   User profile blocks
   -
========================================================================== */
.wizard {
  display: flex;
  justify-content: space-between;
}
.wizard .wizard-step {
  position: relative;
  width: 100%;
  text-align: center;
}
.wizard .wizard-step::before {
  position: absolute;
  z-index: -1;
  top: 30px;
  display: block;
  width: 100%;
  height: 2px;
  content: "";
  background-color: #D7D7D7;
}
.wizard .wizard-step .wizard-step-number {
  width: 60px;
  height: 60px;
  border-color: #D7D7D7;
  border-radius: 50%;
  background-color: #FFFFFF;
  font-size: 20px;
}
.wizard .wizard-step .wizard-step-text {
  display: block;
  margin-top: 15px;
}
.wizard .wizard-step-active .wizard-step-number {
  color: #FFFFFF;
  border-color: #0595DB;
  background-color: #0595DB;
}
.wizard .wizard-step-active .wizard-step-text {
  color: #0595DB;
}
.wizard .wizard-step-visited .wizard-step-number {
  color: #FFFFFF;
  border-color: #76CA02;
  background-color: #76CA02;
}

.wizardprogress {
  display: flex;
  justify-content: space-between;
}
.wizardprogress .wizard-step-text {
  width: 100%;
}
.wizardprogress .wizard-step {
  position: relative;
  width: 100%;
  height: 50px;
  margin-left: -25px;
  padding-left: 25px;
  border: 1px solid #D7D7D7;
  background: #FFFFFF;
}
.wizardprogress .wizard-step a {
  display: block;
  overflow: hidden;
  width: 100%;
  height: 100%;
  padding: 14px;
  white-space: nowrap;
  text-decoration: none;
  text-overflow: ellipsis;
  color: #555555;
}
.wizardprogress .wizard-step::before, .wizardprogress .wizard-step::after {
  position: absolute;
  z-index: 1;
  left: 100%;
  margin-left: -25px;
  content: " ";
  border-style: solid;
  border-color: transparent;
}
.wizardprogress .wizard-step::after {
  top: 1px;
  border-width: 24px;
  border-left-color: #FFFFFF;
}
.wizardprogress .wizard-step::before {
  top: 0;
  border-width: 25px;
  border-left-color: #D7D7D7;
}
.wizardprogress .wizard-step:first-child {
  margin-left: 0;
  padding-left: 0;
  border-radius: 5px 0 0 5px;
}
.wizardprogress .wizard-step:last-child {
  border-radius: 0 5px 5px 0;
}
.wizardprogress .wizard-step:last-child::before, .wizardprogress .wizard-step:last-child::after {
  display: none;
}
.wizardprogress .wizard-step-active {
  background: #0595DB;
}
.wizardprogress .wizard-step-active a {
  text-decoration: none;
  color: #FFFFFF;
}
.wizardprogress .wizard-step-active::after {
  border-left-color: #0595DB;
}
.wizardprogress .wizard-step-visited a {
  color: #0595DB;
}

.timeline .timeline-header {
  display: inline-block;
  width: 110px;
  padding: 8px;
  text-align: center;
  border: 1px solid #D7D7D7;
  border-radius: 30px;
}

.timeline-itemwrapper.mx-listview {
  margin-bottom: 0;
  margin-left: 55px;
  padding: 30px 0;
  border-left: 1px solid #D7D7D7;
}
.timeline-itemwrapper.mx-listview > ul > .mx-listview-item {
  position: relative;
  padding-left: 30px;
}
.timeline-itemwrapper.mx-listview > ul > .mx-listview-item::before {
  position: absolute;
  top: 5px;
  left: -5px;
  display: block;
  width: 10px;
  height: 10px;
  content: "";
  border-radius: 50%;
  background-color: #0595DB;
}
.timeline-itemwrapper.mx-listview .mx-listview-item + .mx-listview-item {
  margin-top: 30px;
}

.timeline2 .timeline-itemwrapper.mx-listview > ul > .mx-listview-item {
  padding-left: 15px;
}

/* ==========================================================================
   Atlas layout
   
   The core stucture of all atlas layouts
========================================================================== */
.layout-atlas .toggle-btn > .glyphicon {
  margin: 0;
}
.layout-atlas .region-sidebar {
  background-color: #252C36;
}
.layout-atlas .region-sidebar .mx-navigationtree .navbar-inner > ul > li > a {
  padding: 0 15px;
}
.layout-atlas .region-sidebar .mx-navigationtree .navbar-inner > ul > li > a .glyphicon {
  margin-right: 10px;
}
.layout-atlas .region-sidebar .toggle-btn {
  border-color: transparent;
  border-radius: 0;
  background: transparent;
}
.layout-atlas .region-topbar {
  position: relative;
  z-index: 1;
  min-height: 60px;
  border-bottom: 1px solid #D7D7D7;
  background-color: #FFFFFF;
  box-shadow: 0 1px 4px 0 rgba(0, 0, 0, 0.14);
}
.layout-atlas .region-topbar::before {
  z-index: 1;
  display: block;
  width: 100%;
  height: 4px;
  content: "";
  background-color: #0595DB;
}
.layout-atlas .region-topbar .topbar-content {
  display: flex;
  align-items: center;
  min-height: 60px;
}
.layout-atlas .region-topbar .toggle-btn {
  margin-right: 15px;
  padding: 5px;
}
.layout-atlas .region-topbar .navbar-brand {
  display: inline-block;
  float: none;
  height: auto;
  padding: 0;
  line-height: inherit;
}
.layout-atlas .region-topbar .navbar-brand img {
  display: inline-block;
  width: auto;
  height: 30px;
}
.layout-atlas .region-topbar .navbar-brand a {
  margin-left: 5px;
  color: #D7D7D7;
  font-size: 20px;
}
.layout-atlas .region-topbar .navbar-brand a:hover, .layout-atlas .region-topbar .navbar-brand a:focus {
  text-decoration: none;
}
.layout-atlas .region-topbar .mx-navbar {
  display: inline-block;
  margin-left: 15px;
  vertical-align: middle;
  background: transparent;
}
.layout-atlas .region-topbar .mx-navbar > .mx-navbar-item > a {
  margin-top: 5px;
  padding: 0 20px;
}

/* ==========================================================================
   Atlas layout
   
   Extra styling for phone layouts
========================================================================== */
.layout-atlas-phone .region-topbar {
  min-height: 45px;
  border-style: none;
  background-color: #FFFFFF;
}
.layout-atlas-phone .region-topbar::before {
  display: none;
}

/* ==========================================================================
   Atlas layout
   
   Extra styling for responsive layouts
========================================================================== */
@media (min-width: 768px) {
  .layout-atlas-responsive-default .mx-scrollcontainer:not(.mx-scrollcontainer-open) > .region-sidebar {
    width: 60px !important;
  }
  .layout-atlas-responsive-default .mx-scrollcontainer:not(.mx-scrollcontainer-open) > .region-sidebar .mx-scrollcontainer-wrapper > .mx-navigationtree ul li.mx-navigationtree-has-items:hover a {
    background-color: #1d222a;
  }
  .layout-atlas-responsive-default .mx-scrollcontainer:not(.mx-scrollcontainer-open) > .region-sidebar .mx-scrollcontainer-wrapper > .mx-navigationtree ul li.mx-navigationtree-has-items:hover ul {
    position: absolute;
    z-index: 100;
    top: 0;
    bottom: 0;
    left: 60px;
    display: block;
    overflow-y: scroll;
    min-width: 200px;
    padding-top: 10px;
  }
  .layout-atlas-responsive-default .mx-scrollcontainer:not(.mx-scrollcontainer-open) > .region-sidebar .mx-scrollcontainer-wrapper > .mx-navigationtree ul li.mx-navigationtree-collapsed ul, .layout-atlas-responsive-default .mx-scrollcontainer:not(.mx-scrollcontainer-open) > .region-sidebar .mx-scrollcontainer-wrapper > .mx-navigationtree ul li.mx-navigationtree-has-items ul {
    display: none;
  }
}
@media (max-width: 767px) {
  .layout-atlas-responsive-default .mx-scrollcontainer-open {
    width: 1100px;
  }
}
.layout-atlas-responsive-default .region-sidebar .toggle-btn {
  width: 60px;
  height: 60px;
  border-color: transparent;
  border-radius: 0;
  background: transparent;
}
.layout-atlas-responsive-default .region-sidebar .mx-scrollcontainer-wrapper > .mx-navigationtree .navbar-inner > ul > li > a {
  height: 60px;
}
.layout-atlas-responsive-default .region-sidebar .mx-scrollcontainer-wrapper > .mx-navigationtree .navbar-inner > ul > li > a .glyphicon {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 40px;
  height: 40px;
  margin-left: -5px;
  padding: 10px;
  border-radius: 3px;
}
.layout-atlas-responsive-default .region-sidebar .mx-scrollcontainer-wrapper > .mx-navigationtree .navbar-inner > ul > li > a.active .glyphicon {
  background: #0595DB;
}

.layout-atlas-responsive-default .region-topbar .toggle-btn,
.layout-atlas-responsive-topbar .region-topbar .toggle-btn {
  display: none;
}
@media (max-width: 767px) {
  .layout-atlas-responsive-default .region-topbar .toggle-btn,
  .layout-atlas-responsive-topbar .region-topbar .toggle-btn {
    display: inline-block;
  }
}

/* ==========================================================================
   Atlas layout
   
   Extra styling for tablet layouts
========================================================================== */
/* Based on https://github.com/mendixlabs/star-rating/blob/v1.1.1/src/ui/StarRating.scss */
div.widget-progress-bar .progress-bar-default {
  background-color: #DDDDDD;
}

div.widget-progress-bar .progress-bar-primary {
  background-color: #0595DB;
}

div.widget-progress-bar .progress-bar-success {
  background-color: #76CA02;
}

div.widget-progress-bar .progress-bar-info {
  background-color: #48B0F7;
}

div.widget-progress-bar .progress-bar-warning {
  background-color: #F99B1D;
}

div.widget-progress-bar .progress-bar-danger {
  background-color: #ED1C24;
}

div.widget-progress-bar .progress-bar-inverse {
  background-color: #252C36;
}

div.widget-progress-bar-alert.widget-progress-bar-text-contrast .progress-bar {
  color: #8e1116;
}

div.widget-progress-bar-text-contrast .progress-bar {
  color: #555555;
}

/* Based on https://github.com/mendixlabs/progress-circle/tree/master/src/ui/_progress-circle-theme.scss */
path.widget-progress-circle-path {
  stroke: #0595DB;
}

.widget-progress-circle-primary path.widget-progress-circle-path {
  stroke: #0595DB;
}

.widget-progress-circle-info path.widget-progress-circle-path {
  stroke: #48B0F7;
}

.widget-progress-circle-success path.widget-progress-circle-path {
  stroke: #76CA02;
}

.widget-progress-circle-warning path.widget-progress-circle-path {
  stroke: #F99B1D;
}

.widget-progress-circle-danger path.widget-progress-circle-path {
  stroke: #ED1C24;
}

.widget-progress-circle-inverse path.widget-progress-circle-path {
  stroke: #252C36;
}

div.widget-range-slider .rc-slider-handle,
div.widget-range-slider .rc-slider-dot-active {
  border-color: #DDDDDD;
}
div.widget-range-slider .rc-slider-handle:active,
div.widget-range-slider .rc-slider-dot-active:active {
  border-color: #DDDDDD;
  box-shadow: none;
}
div.widget-range-slider .rc-slider-handle:hover,
div.widget-range-slider .rc-slider-dot-active:hover {
  border-color: #DDDDDD;
}
div.widget-range-slider.has-error .rc-slider-track,
div.widget-range-slider.has-error .rc-slider-rail {
  background-color: #ED1C24;
}

div.widget-range-slider-primary .rc-slider-track {
  background-color: #0595DB;
}

div.widget-range-slider-info .rc-slider-track {
  background-color: #48B0F7;
}

div.widget-range-slider-success .rc-slider-track {
  background-color: #76CA02;
}

div.widget-range-slider-warning .rc-slider-track {
  background-color: #F99B1D;
}

div.widget-range-slider-danger .rc-slider-track {
  background-color: #ED1C24;
}

div.widget-range-slider-inverse .rc-slider-track {
  background-color: #252C36;
}

div.widget-slider .rc-slider-handle,
div.widget-slider .rc-slider-dot-active {
  border-color: #DDDDDD;
}
div.widget-slider .rc-slider-handle:active,
div.widget-slider .rc-slider-dot-active:active {
  border-color: #DDDDDD;
}
div.widget-slider .rc-slider-handle:hover,
div.widget-slider .rc-slider-dot-active:hover {
  border-color: #DDDDDD;
}
div.widget-slider.has-error .rc-slider-track,
div.widget-slider.has-error .rc-slider-rail {
  background-color: #ED1C24;
}

div.widget-slider-primary .rc-slider-track {
  background-color: #0595DB;
}

div.widget-slider-info .rc-slider-track {
  background-color: #48B0F7;
}

div.widget-slider-success .rc-slider-track {
  background-color: #76CA02;
}

div.widget-slider-warning .rc-slider-track {
  background-color: #F99B1D;
}

div.widget-slider-danger .rc-slider-track {
  background-color: #ED1C24;
}

div.widget-slider-inverse .rc-slider-track {
  background-color: #252C36;
}

/* Based on https://github.com/mendixlabs/star-rating/blob/v1.1.1/src/ui/StarRating.scss */
span.widget-star-rating-full-default {
  color: #DDDDDD;
}

span.widget-star-rating-full-primary {
  color: #0595DB;
}

span.widget-star-rating-full-success {
  color: #76CA02;
}

span.widget-star-rating-full-info {
  color: #48B0F7;
}

span.widget-star-rating-full-warning {
  color: #F99B1D;
}

span.widget-star-rating-full-danger {
  color: #ED1C24;
}

span.widget-star-rating-full-inverse {
  color: #252C36;
}

div.widget-switch.iOS .widget-switch-btn-wrapper.checked.widget-switch-btn-wrapper-default {
  border-color: #64bd63;
  background-color: #64bd63;
  box-shadow: #64bd63 0 0 0 16px inset;
}
div.widget-switch.iOS .widget-switch-btn-wrapper.checked.widget-switch-btn-wrapper-success {
  border-color: #76CA02;
  background-color: #76CA02;
  box-shadow: #76CA02 0 0 0 16px inset;
}
div.widget-switch.iOS .widget-switch-btn-wrapper.checked.widget-switch-btn-wrapper-info {
  border-color: #48B0F7;
  background-color: #48B0F7;
  box-shadow: #48B0F7 0 0 0 16px inset;
}
div.widget-switch.iOS .widget-switch-btn-wrapper.checked.widget-switch-btn-wrapper-primary {
  border-color: #0595DB;
  background-color: #0595DB;
  box-shadow: #0595DB 0 0 0 16px inset;
}
div.widget-switch.iOS .widget-switch-btn-wrapper.checked.widget-switch-btn-wrapper-warning {
  border-color: #F99B1D;
  background-color: #F99B1D;
  box-shadow: #F99B1D 0 0 0 16px inset;
}
div.widget-switch.iOS .widget-switch-btn-wrapper.checked.widget-switch-btn-wrapper-danger {
  border-color: #ED1C24;
  background-color: #ED1C24;
  box-shadow: #ED1C24 0 0 0 16px inset;
}
div.widget-switch.iOS .widget-switch-btn-wrapper.checked.widget-switch-btn-wrapper-inverse {
  border-color: #252C36;
  background-color: #252C36;
  box-shadow: #252C36 0 0 0 16px inset;
}
div.widget-switch.android .widget-switch-btn-wrapper.checked.widget-switch-btn-wrapper-default {
  background-color: #92cec7;
}
div.widget-switch.android .widget-switch-btn-wrapper.checked.widget-switch-btn-wrapper-default .widget-switch-btn {
  background: #6FBEB5;
}
div.widget-switch.android .widget-switch-btn-wrapper.checked.widget-switch-btn-wrapper-success {
  background-color: #94fd03;
}
div.widget-switch.android .widget-switch-btn-wrapper.checked.widget-switch-btn-wrapper-success .widget-switch-btn {
  background: #76CA02;
}
div.widget-switch.android .widget-switch-btn-wrapper.checked.widget-switch-btn-wrapper-info {
  background-color: #79c5f9;
}
div.widget-switch.android .widget-switch-btn-wrapper.checked.widget-switch-btn-wrapper-info .widget-switch-btn {
  background: #48B0F7;
}
div.widget-switch.android .widget-switch-btn-wrapper.checked.widget-switch-btn-wrapper-primary {
  background-color: #19b0fa;
}
div.widget-switch.android .widget-switch-btn-wrapper.checked.widget-switch-btn-wrapper-primary .widget-switch-btn {
  background: #0595DB;
}
div.widget-switch.android .widget-switch-btn-wrapper.checked.widget-switch-btn-wrapper-warning {
  background-color: #fab14f;
}
div.widget-switch.android .widget-switch-btn-wrapper.checked.widget-switch-btn-wrapper-warning .widget-switch-btn {
  background: #F99B1D;
}
div.widget-switch.android .widget-switch-btn-wrapper.checked.widget-switch-btn-wrapper-danger {
  background-color: #f14b52;
}
div.widget-switch.android .widget-switch-btn-wrapper.checked.widget-switch-btn-wrapper-danger .widget-switch-btn {
  background: #ED1C24;
}
div.widget-switch.android .widget-switch-btn-wrapper.checked.widget-switch-btn-wrapper-inverse {
  background-color: #3a4554;
}
div.widget-switch.android .widget-switch-btn-wrapper.checked.widget-switch-btn-wrapper-inverse .widget-switch-btn {
  background: #252C36;
}
div.widget-switch.auto .widget-switch-btn-wrapper.checked.widget-switch-btn-wrapper-default {
  border-color: #64bd63;
  background-color: #64bd63;
  box-shadow: #64bd63 0 0 0 16px inset;
}
div.widget-switch.auto .widget-switch-btn-wrapper.checked.widget-switch-btn-wrapper-success {
  border-color: #76CA02;
  background-color: #76CA02;
  box-shadow: #76CA02 0 0 0 16px inset;
}
div.widget-switch.auto .widget-switch-btn-wrapper.checked.widget-switch-btn-wrapper-info {
  border-color: #48B0F7;
  background-color: #48B0F7;
  box-shadow: #48B0F7 0 0 0 16px inset;
}
div.widget-switch.auto .widget-switch-btn-wrapper.checked.widget-switch-btn-wrapper-primary {
  border-color: #0595DB;
  background-color: #0595DB;
  box-shadow: #0595DB 0 0 0 16px inset;
}
div.widget-switch.auto .widget-switch-btn-wrapper.checked.widget-switch-btn-wrapper-warning {
  border-color: #F99B1D;
  background-color: #F99B1D;
  box-shadow: #F99B1D 0 0 0 16px inset;
}
div.widget-switch.auto .widget-switch-btn-wrapper.checked.widget-switch-btn-wrapper-danger {
  border-color: #ED1C24;
  background-color: #ED1C24;
  box-shadow: #ED1C24 0 0 0 16px inset;
}
div.widget-switch.auto .widget-switch-btn-wrapper.checked.widget-switch-btn-wrapper-inverse {
  border-color: #252C36;
  background-color: #252C36;
  box-shadow: #252C36 0 0 0 16px inset;
}

html div.dj_android .widget-switch.auto .widget-switch-btn-wrapper.checked.widget-switch-btn-wrapper-default {
  background-color: #92cec7;
}
html div.dj_android .widget-switch.auto .widget-switch-btn-wrapper.checked.widget-switch-btn-wrapper-default .widget-switch-btn {
  background: #6FBEB5;
}
html div.dj_android .widget-switch.auto .widget-switch-btn-wrapper.checked.widget-switch-btn-wrapper-success {
  background-color: #94fd03;
}
html div.dj_android .widget-switch.auto .widget-switch-btn-wrapper.checked.widget-switch-btn-wrapper-success .widget-switch-btn {
  background: #76CA02;
}
html div.dj_android .widget-switch.auto .widget-switch-btn-wrapper.checked.widget-switch-btn-wrapper-info {
  background-color: #79c5f9;
}
html div.dj_android .widget-switch.auto .widget-switch-btn-wrapper.checked.widget-switch-btn-wrapper-info .widget-switch-btn {
  background: #48B0F7;
}
html div.dj_android .widget-switch.auto .widget-switch-btn-wrapper.checked.widget-switch-btn-wrapper-primary {
  background-color: #19b0fa;
}
html div.dj_android .widget-switch.auto .widget-switch-btn-wrapper.checked.widget-switch-btn-wrapper-primary .widget-switch-btn {
  background: #0595DB;
}
html div.dj_android .widget-switch.auto .widget-switch-btn-wrapper.checked.widget-switch-btn-wrapper-warning {
  background-color: #fab14f;
}
html div.dj_android .widget-switch.auto .widget-switch-btn-wrapper.checked.widget-switch-btn-wrapper-warning .widget-switch-btn {
  background: #F99B1D;
}
html div.dj_android .widget-switch.auto .widget-switch-btn-wrapper.checked.widget-switch-btn-wrapper-danger {
  background-color: #f14b52;
}
html div.dj_android .widget-switch.auto .widget-switch-btn-wrapper.checked.widget-switch-btn-wrapper-danger .widget-switch-btn {
  background: #ED1C24;
}
html div.dj_android .widget-switch.auto .widget-switch-btn-wrapper.checked.widget-switch-btn-wrapper-inverse {
  background-color: #3a4554;
}
html div.dj_android .widget-switch.auto .widget-switch-btn-wrapper.checked.widget-switch-btn-wrapper-inverse .widget-switch-btn {
  background: #252C36;
}
html div.dj_ios .widget-switch.auto .widget-switch-btn-wrapper.checked.widget-switch-btn-wrapper-default {
  border-color: #64bd63;
  background-color: #64bd63;
  box-shadow: #64bd63 0 0 0 16px inset;
}
html div.dj_ios .widget-switch.auto .widget-switch-btn-wrapper.checked.widget-switch-btn-wrapper-success {
  border-color: #76CA02;
  background-color: #76CA02;
  box-shadow: #76CA02 0 0 0 16px inset;
}
html div.dj_ios .widget-switch.auto .widget-switch-btn-wrapper.checked.widget-switch-btn-wrapper-info {
  border-color: #48B0F7;
  background-color: #48B0F7;
  box-shadow: #48B0F7 0 0 0 16px inset;
}
html div.dj_ios .widget-switch.auto .widget-switch-btn-wrapper.checked.widget-switch-btn-wrapper-primary {
  border-color: #0595DB;
  background-color: #0595DB;
  box-shadow: #0595DB 0 0 0 16px inset;
}
html div.dj_ios .widget-switch.auto .widget-switch-btn-wrapper.checked.widget-switch-btn-wrapper-warning {
  border-color: #F99B1D;
  background-color: #F99B1D;
  box-shadow: #F99B1D 0 0 0 16px inset;
}
html div.dj_ios .widget-switch.auto .widget-switch-btn-wrapper.checked.widget-switch-btn-wrapper-danger {
  border-color: #ED1C24;
  background-color: #ED1C24;
  box-shadow: #ED1C24 0 0 0 16px inset;
}
html div.dj_ios .widget-switch.auto .widget-switch-btn-wrapper.checked.widget-switch-btn-wrapper-inverse {
  border-color: #252C36;
  background-color: #252C36;
  box-shadow: #252C36 0 0 0 16px inset;
}