/*!
 * Correcties op styling voor Mendix 9 van het oude Gpass Mendix 7 theme
 */

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

label {
  padding-top: 7px;
  margin-bottom: 0;
}

.mx-grid-search-label > label {
  font-weight: normal;
}

.control-label {
  font-weight: 700;
}

/* ==========================================================================
   Radio buttons
   ========================================================================== */

.mx-radiobuttons .radio {
  margin: 0px;
  padding-top: 4px;
}
.mx-radiobuttons .radio label {
  padding-top: -0px;
}

/* ==========================================================================
   Padding fixes
   ========================================================================== */

.mx-scrollcontainer-wrapper {
  padding: 0px;
}

.header .mx-scrollcontainer-right .mx-dataview {
  padding-top: 11px;
}

/* ==========================================================================
   Multi-select search fields
   ========================================================================== */

.mx-dropdown > li > input {
  margin-top: 0px;
}
.mx-dropdown > li > label {
  font-weight: normal;
  padding-left: 4px;
}

/* ==========================================================================
   Left sidebar
   ========================================================================== */

.mx-scrollcontainer-left.mx-scrollcontainer-toggleable {
  background-color: #f7f7f7;
}

.mx-scrollcontainer-left .mx-textbox {
  padding: 10px;
  font-size: 16px;
  font-family: "OpenSans-SemiBold", Arial, sans-serif;
  font-weight: 700;
}

/* ==========================================================================
   Main content container
   ========================================================================== */

.mx-scrollcontainer-shrink
  > .mx-scrollcontainer-center
  > .mx-scrollcontainer-wrapper
  > .mx-scrollcontainer
  > .mx-scrollcontainer-center
  > .mx-scrollcontainer-wrapper {
  padding: 6px 32px 0px;
}

/* ==========================================================================
   Dataview footer buttons
   ========================================================================== */

.mx-dataview-controls .mx-button:not(:first-child) {
  margin-left: 0.3em;
}

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

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

.mx-name-head-row {
  background: #eee;
}

.mx-datagrid-head-caption {
  font-family: "OpenSans-Semibold";
}

.mx-grid-content > table > tbody > tr.selected > td {
  background-color: #e7f1fb;
}

/* ==========================================================================
   Tables / NewEdit pages
   ========================================================================== */

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

/* ==========================================================================
   Listviews
   ========================================================================== */

.mx-listview > ul > li {
  padding-bottom: 2px;
}
.mx-listview .mx-listview-selection > input {
  margin-top: 4px;
}
.mx-listview .mx-listview-content .form-group {
  margin: 0px;
}
.mx-listview .mx-listview-content .form-group .form-control-static {
  padding-top: 9px;
}
.mx-listview li:nth-child(2n + 1) {
  background: initial;
}

/* ==========================================================================
   Simple Checkbox Set Selector Widget
   ========================================================================== */

.checkboxMainContainer {
  margin-left: 0px !important;
}
.checkboxMainContainer > div > div:first-child {
  padding-top: 0px;
}

/* ==========================================================================
   Mendix Datepicker 
   ========================================================================== */

.mx-calendar {
  z-index: 10010 !important;
  padding: 8px;
  font-size: 12px;
  background: white;
  border: 1px solid lightgrey;
  box-shadow: 0 2px 10px 0 rgba(0, 0, 0, 0.06);
}
.mx-calendar .mx-calendar-month-header {
  display: flex;
  flex-direction: row;
  justify-content: space-between;
  margin: 0 3px 10px 3px;
}
.mx-calendar .mx-calendar-month-next,
.mx-calendar .mx-calendar-month-previous,
.mx-calendar .mx-calendar-month-dropdown {
  border: 0;
  cursor: pointer;
  background: transparent;
}
.mx-calendar .mx-calendar-month-next:hover,
.mx-calendar .mx-calendar-month-previous:hover {
  color: gray;
}
.mx-calendar .mx-calendar-month-dropdown {
  display: flex;
  align-items: center;
  justify-content: center;
  position: relative;
}
.mx-calendar
  .mx-calendar-month-dropdown
  .mx-calendar-month-current:first-child {
  margin-right: 10px;
}
.mx-calendar th {
  color: #e30613;
}
.mx-calendar th,
.mx-calendar td {
  width: 35px;
  height: 35px;
  text-align: center;
}
.mx-calendar td {
  color: black;
}
.mx-calendar td:hover {
  cursor: pointer;
  border-radius: 50%;
  color: #fff;
  background-color: #ee7203;
}
.mx-calendar .mx-calendar-day-month-next,
.mx-calendar .mx-calendar-day-month-previous {
  color: #737373;
}
.mx-calendar .mx-calendar-day-selected,
.mx-calendar .mx-calendar-day-selected:hover,
.mx-calendar .mx-calendar-day-active,
.mx-calendar .mx-calendar-day-active:hover{
  color: #fff;
  border-radius: 50%;
  background: #ee7203;
}

.mx-calendar .mx-calendar-year-switcher {
  text-align: center;
  margin-top: 10px;
  color: #fec28c;
}
.mx-calendar .mx-calendar-year-switcher span.mx-calendar-year-selected {
  color: #ee7203;
  margin-left: 10px;
  margin-right: 10px;
}
.mx-calendar .mx-calendar-year-switcher span:hover {
  cursor: pointer;
  text-decoration: underline;
  background-color: transparent;
}

.mx-calendar-month-dropdown-options {
  z-index: 10020 !important;
  position: absolute;
  top: 25px;
  padding: 2px 10px;
  background-color: white;
}
.mx-calendar-month-dropdown-options div {
  cursor: pointer;
  font-size: 12px;
  padding: 2px 0;
}
.mx-calendar-month-dropdown-options div:hover,
.mx-calendar-month-dropdown-options div:focus {
  color: red;
}

.mx-calendar-month-spacer {
  position: relative;
  height: 0px;
  overflow: hidden;
  visibility: hidden;
}


/* ==========================================================================
   Mendix Reference (Set) Selector validation feedback styling
   ========================================================================== */

.mx-referenceselector > .mx-compound-control,
.mx-referencesetselector > .mx-compound-control {
  display: flex;
  flex: 1;
  flex-wrap: wrap;
  max-width: 100%;
}
.mx-referenceselector > .mx-compound-control > input,
.mx-referencesetselector > .mx-compound-control > input {
  display: flex;
  flex: 1;
}

.mx-referenceselector > .mx-compound-control > .mx-validation-message,
.mx-referencesetselector > .mx-compound-control > .mx-validation-message {
  flex-basis: 100%;
}



/* ==========================================================================
   Mendix Rich Text editor
   ========================================================================== */

.widget-rich-text.editor-bordered > .cke {
  border-radius: 4px;
}

.widget-rich-text.editor-bordered .cke_inner {
  border-radius: 4px;
}

.widget-rich-text.editor-bordered .cke_wysiwyg_div {
  background-color: #eee;
  opacity: 1;
  border-radius: 4px;
}

/* ==========================================================================
   Mendix Combo box
   ========================================================================== */

.widget-combobox >.form-control{
    height: 100%;
}