/**
 * // Updater info (must be valid json)
  [updater]{
  "version": 3.01,
  "force": false,
  "allowupdate": true,
  "minimumVersion": 0,
  "tags": ["core"]
  }[/updater]
 */
/***************************************************************************
* LISTS
***************************************************************************/
.list {
    margin: 10px 0;
    padding: 0;
}

.list--primary {
    border: 1px solid var(--listPrimaryBorder);
    color: var(--listPrimaryRowFontColor);
}

.list--secondary {
    border: 1px solid var(--listSecondaryBorder);
    color: var(--listSecondaryRowFontColor);
}

.list--success {
    border: 1px solid var(--listSuccessBorder);
    color: var(--listSuccessRowFontColor);
}

.list--info {
    border: 1px solid var(--listInfoBorder);
    color: var(--listInfoRowFontColor);
}

.list--warning {
    border: 1px solid var(--listWarningBorder);
    color: var(--listWarningRowFontColor);
}

.list--danger {
    border: 1px solid var(--listDangerBorder);
    color: var(--listDangerRowFontColor);
}

.list__item {
    padding: 5px 10px;
    list-style-type: none;
}

.list--primary .list__item {
    background-color: var(--listPrimaryRowOddBackground);
}

.list--primary .list__item:nth-child(even) {
    background-color: var(--listPrimaryRowEvenBackground);
}

.list--secondary .list__item {
    background-color: var(--listSecondaryRowOddBackground);
}

.list--secondary .list__item:nth-child(even) {
    background-color: var(--listSecondaryRowEvenBackground);
}

.list--success .list__item {
    background-color: var(--listSuccessRowOddBackground);
}

.list--success .list__item:nth-child(even) {
    background-color: var(--listSuccessRowEvenBackground);
}

.list--info .list__item {
    background-color: var(--listInfoRowOddBackground);
}

.list--info .list__item:nth-child(even) {
    background-color: var(--listInfoRowEvenBackground);
}

.list--warning .list__item {
    background-color: var(--listWarningRowOddBackground);
}

.list--warning .list__item:nth-child(even) {
    background-color: var(--listWarningRowEvenBackground);
}

.list--danger .list__item {
    background-color: var(--listDangerRowOddBackground);
}

.list--danger .list__item:nth-child(even) {
    background-color: var(--listDangerRowEvenBackground);
}

.list__item--clickable {
    cursor: pointer;
}

.list__item--clickable:hover {
    opacity: 0.6;
    color: rgba(229, 0, 168, 1);
    background-color: rgb(203, 229, 240);
}

/***************************************************************************
* TABLES
***************************************************************************/
/* Removed due to replacement of ftables */


/***************************************************************************
* TABLE div system (mobile friendly)
***************************************************************************/

.ftable {
    margin-bottom: 10px;
}

.ftable--primary {
    border: 1px solid var(--listPrimaryBorder);
    color: var(--listPrimaryRowFontColor);
}

.ftable--secondary {
    border: 1px solid var(--listSecondaryBorder);
    color: var(--listSecondaryRowFontColor);
}

.ftable--success {
    border: 1px solid var(--listSuccessBorder);
    color: var(--listSuccessRowFontColor);
}

.ftable--info {
    border: 1px solid var(--listInfoBorder);
    color: var(--listInfoRowFontColor);
}

.ftable--warning {
    border: 1px solid var(--listWarningBorder);
    color: var(--listWarningRowFontColor);
}

.ftable--danger {
    border: 1px solid var(--listDangerBorder);
    color: var(--listDangerRowFontColor);
}

.ftable--minimalistic {
    border: 0;
}

.ftable--on-white {
    color: #000000;
}

.ftable__row,
.ftable__cell--inherit {
    display: flex;
    flex-direction: row;
    flex-wrap: wrap;
}

.ftable__row--bordered {
    border-style: solid;
    border-width: 1px;
}

.ftable--primary .ftable__row {
    background-color: var(--listPrimaryRowOddBackground);
    border-color: var(--listPrimaryBorder);
}

.ftable--primary .ftable__row:nth-child(even) {
    background-color: var(--listPrimaryRowEvenBackground);
    border-color: var(--listPrimaryBorder);
}

.ftable--secondary .ftable__row {
    background-color: var(--listSecondaryRowOddBackground);
    border-color: var(--listSecondaryBorder);
}

.ftable--secondary .ftable__row:nth-child(even) {
    background-color: var(--listSecondaryRowEvenBackground);
    border-color: var(--listSecondaryBorder);
}

.ftable--success .ftable__row {
    background-color: var(--listSuccessRowOddBackground);
    border-color: var(--listSuccessBorder);
}

.ftable--success .ftable__row:nth-child(even) {
    background-color: var(--listSuccessRowEvenBackground);
    border-color: var(--listSuccessBorder);
}

.ftable--info .ftable__row {
    background-color: var(--listInfoRowOddBackground);
    border-color: var(--listInfoBorder);
}

.ftable--info .ftable__row:nth-child(even) {
    background-color: var(--listInfoRowEvenBackground);
    border-color: var(--listInfoBorder);
}

.ftable--warning .ftable__row {
    background-color: var(--listWarningRowOddBackground);
    border-color: var(--listWarningBorder);
}

.ftable--warning .ftable__row:nth-child(even) {
    background-color: var(--listWarningRowEvenBackground);
    border-color: var(--listWarningBorder);
}

.ftable--danger .ftable__row {
    background-color: var(--listDangerRowOddBackground);
    border-color: var(--listDangerBorder);
}

.ftable--danger .ftable__row:nth-child(even) {
    background-color: var(--listDangerRowEvenBackground);
    border-color: var(--listDangerBorder);
}

.ftable__row.ftable__row--primary {
    background-color: var(--listPrimaryRowOddBackground);
    border-color: var(--listPrimaryBorder);
}

.ftable__row.ftable__row--primary:nth-child(even) {
    background-color: var(--listPrimaryRowEvenBackground);
    border-color: var(--listPrimaryBorder);
}

.ftable__row.ftable__row--secondary {
    background-color: var(--listSecondaryRowOddBackground);
    border-color: var(--listSecondaryBorder);
}

.ftable__row.ftable__row--secondary:nth-child(even) {
    background-color: var(--listSecondaryRowEvenBackground);
    border-color: var(--listSecondaryBorder);
}

.ftable__row.ftable__row--success {
    background-color: var(--listSuccessRowOddBackground);
    border-color: var(--listSuccessBorder);
}

.ftable__row.ftable__row--success:nth-child(even) {
    background-color: var(--listSuccessRowEvenBackground);
    border-color: var(--listSuccessBorder);
}

.ftable__row.ftable__row--info {
    background-color: var(--listInfoRowOddBackground);
    border-color: var(--listInfoBorder);
}

.ftable__row.ftable__row--info:nth-child(even) {
    background-color: var(--listInfoRowEvenBackground);
    border-color: var(--listInfoBorder);
}

.ftable__row.ftable__row--warning {
    background-color: var(--listWarningRowOddBackground);
    border-color: var(--listWarningBorder);
}

.ftable__row.ftable__row--warning:nth-child(even) {
    background-color: var(--listWarningRowEvenBackground);
    border-color: var(--listWarningBorder);
}

.ftable__row.ftable__row--danger {
    background-color: var(--listDangerRowOddBackground);
    border-color: var(--listDangerBorder);
}

.ftable__row.ftable__row--danger:nth-child(even) {
    background-color: var(--listDangerRowEvenBackground);
    border-color: var(--listDangerBorder);
}

.ftable__row--clickable {
    cursor: pointer;
}

.ftable__row--clickable:hover {
    opacity: 0.4;
}

.ftable__cell {
    flex-grow: 1;
    flex-basis: 100px;
    margin: 1px;
    padding: 4px 10px;
    white-space: normal;
    /* Angelo: Changed from pre-wrap, issue with items in html getting wrapped unwanted */
    word-wrap: break-word;
    overflow: visible;
    /* Angelo: Changed from hidden, issue with popup elements like selectorize in a table not showing */
    max-width: 100%;
}

.ftable--primary .ftable__cell--header {
    background: var(--listPrimaryRowHeaderBackground);
    color: var(--listPrimaryRowHeaderFontColor);
    font-weight: bold;
}

.ftable--secondary .ftable__cell--header {
    background: var(--listSecondaryRowHeaderBackground);
    color: var(--listSecondaryRowHeaderFontColor);
    font-weight: bold;
}

.ftable--success .ftable__cell--header {
    background: var(--listSuccessRowHeaderBackground);
    color: var(--listSuccessRowHeaderFontColor);
    font-weight: bold;
}

.ftable--info .ftable__cell--header {
    background: var(--listInfoRowHeaderBackground);
    color: var(--listInfoRowHeaderFontColor);
    font-weight: bold;
}

.ftable--warning .ftable__cell--header {
    background: var(--listWarningRowHeaderBackground);
    color: var(--listWarningRowHeaderFontColor);
    font-weight: bold;
}

.ftable--danger .ftable__cell--header {
    background: var(--listDangerRowHeaderBackground);
    color: var(--listDangerRowHeaderFontColor);
    font-weight: bold;
}


.ftable__row--primary .ftable__cell--header,
.ftable__cell--primary.ftable__cell--header {
    background: var(--listPrimaryRowHeaderBackground);
    color: var(--listPrimaryRowHeaderFontColor);
    font-weight: bold;
}

.ftable__row--secondary .ftable__cell--header,
.ftable__cell--secondary.ftable__cell--header {
    background: var(--listSecondaryRowHeaderBackground);
    color: var(--listSecondaryRowHeaderFontColor);
    font-weight: bold;
}

.ftable__row--success .ftable__cell--header,
.ftable__cell--success.ftable__cell--header {
    background: var(--listSuccessRowHeaderBackground);
    color: var(--listSuccessRowHeaderFontColor);
    font-weight: bold;
}

.ftable__row--info .ftable__cell--header,
.ftable__cell--info.ftable__cell--header {
    background: var(--listInfoRowHeaderBackground);
    color: var(--listInfoRowHeaderFontColor);
    font-weight: bold;
}

.ftable__row--warning .ftable__cell--header,
.ftable__cell--warning.ftable__cell--header {
    background: var(--listWarningRowHeaderBackground);
    color: var(--listWarningRowHeaderFontColor);
    font-weight: bold;
}

.ftable__row--danger .ftable__cell--header,
.ftable__cell--danger.ftable__cell--header {
    background: var(--listDangerRowHeaderBackground);
    color: var(--listDangerRowHeaderFontColor);
    font-weight: bold;
}

.ftable--minimalistic .ftable__row,
.ftable--minimalistic .ftable__cell {
    background-color: inherit !important;
}

.ftable--minimalistic.ftable--primary .ftable__cell--header,
.ftable--minimalistic .ftable__row--primary .ftable__cell--header,
.ftable--minimalistic .ftable__cell--primary.ftable__cell--header {
    color: var(--FontPrimaryColor);
}

.ftable--minimalistic.ftable--secondary .ftable__cell--header,
.ftable--minimalistic .ftable__row--secondary .ftable__cell--header,
.ftable--minimalistic .ftable__cell--secondary.ftable__cell--header {
    color: var(--FontSecondaryColor);
}

.ftable--minimalistic.ftable--success .ftable__cell--header,
.ftable--minimalistic .ftable__row--success .ftable__cell--header,
.ftable--minimalistic .ftable__cell--success.ftable__cell--header {
    color: var(--FontSuccessColor);
}

.ftable--minimalistic.ftable--info .ftable__cell--header,
.ftable--minimalistic .ftable__row--info .ftable__cell--header,
.ftable--minimalistic .ftable__cell--info.ftable__cell--header {
    color: var(--FontInfoColor);
}

.ftable--minimalistic.ftable--warning .ftable__cell--header,
.ftable--minimalistic .ftable__row--warning .ftable__cell--header,
.ftable--minimalistic .ftable__cell--warning.ftable__cell--header {
    color: var(--FontWarningColor);
}

.ftable--minimalistic.ftable--danger .ftable__cell--header,
.ftable--minimalistic .ftable__row--danger .ftable__cell--header,
.ftable--minimalistic .ftable__cell--danger.ftable__cell--header {
    color: var(--FontDangerColor);
}


.ftable__cell--fixedwidth {
    flex-grow: 0;
    flex-basis: auto;
}

.ftable__cell--overflow {
    overflow: visible;
}

.ftable__cell--clickable {
    cursor: pointer;
}

.ftable__cell--clickable:hover {
    opacity: 0.4;
}

.ftable__colgroup {
    flex-grow: 1;
    margin: 0;
    padding: 0;
    display: flex;
}

.ftable__cell--cspan-2,
.ftable__colgroup--cspan-2 {
    flex-grow: 2;
    flex-basis: 202px;
    /* (basis x cols) + (margin x cols) */
}

.ftable__cell--cspan-3,
.ftable__colgroup--cspan-3 {
    flex-grow: 3;
    flex-basis: 303px;
}

.ftable__cell--cspan-4 {
    flex-grow: 4;
    flex-basis: 404px;
}

.ftable__cell--cspan-5 {
    flex-grow: 5;
    flex-basis: 505px;
}

.ftable__cell--cspan-6 {
    flex-grow: 6;
    flex-basis: 606px;
}

.ftable__cell--cspan-7 {
    flex-grow: 7;
    flex-basis: 707px;
}

.ftable__cell--cspan-8 {
    flex-grow: 8;
    flex-basis: 808px;
}

.ftable__cell--cspan-9 {
    flex-grow: 9;
    flex-basis: 909px;
}

.ftable__cell--base0 {
    flex-basis: 0;
}

.ftable--compact .ftable__cell {
    padding: 0 4px;
}

/***************************************************************************
* FLEXBOX
***************************************************************************/
.fx {
    display: flex;
    flex-direction: row;
    flex-wrap: wrap;

}

.fx--col {
    flex-direction: column;
}

.fx--nowrap {
    flex-wrap: nowrap;
}

.fx--jc-start {
    justify-content: flex-start;
}

.fx--jc-end {
    justify-content: flex-end;
}

.fx--jc-center {
    justify-content: center;
}

.fx--jc-space-between {
    justify-content: space-between;
}

.fx--jc-space-around {
    justify-content: space-around;
}

.fx--jc-space-evenly {
    justify-content: space-evenly;
}

.fx--ai-start {
    align-items: flex-start;
}

.fx--ai-end {
    align-items: flex-end;
}

.fx--ai-center {
    align-items: center;
}

.fx--ai-baseline {
    align-items: baseline;
}

.fx--ai-stretch {
    align-items: stretch;
}

.fx--ac-start {
    align-content: flex-start;
}

.fx--ac-end {
    align-content: flex-end;
}

.fx--ac-center {
    align-content: center;
}

.fx--ac-space-between {
    align-content: space-between;
}

.fx--ac-space-around {
    align-content: space-around;
}

.fx--ac-stretch {
    align-content: stretch;
}

.fx__i {
    flex: 1 1 auto;
    max-width: 100%;
}

.fx__i--grow,
.fx__i--grow-1 {
    flex-grow: 1;
}

.fx__i--grow-2 {
    flex-grow: 2;
}

.fx__i--grow-3 {
    flex-grow: 3;
}

.fx__i--grow-4 {
    flex-grow: 4;
}

.fx__i--grow-5 {
    flex-grow: 5;
}

.fx__i--grow-6 {
    flex-grow: 6;
}

.fx__i--nogrow {
    flex-grow: 0;
}

.fx__i--shrink,
.fx__i--shrink-1 {
    flex-shrink: 1;
}

.fx__i--shrink-2 {
    flex-shrink: 2;
}

.fx__i--shrink-3 {
    flex-shrink: 3;
}

.fx__i--shrink-4 {
    flex-shrink: 4;
}

.fx__i--shrink-5 {
    flex-shrink: 5;
}

.fx__i--shrink-6 {
    flex-shrink: 6;
}

.fx__i--noshrink {
    flex-shrink: 0;
}

.fx__i--basis-0 {
    flex-basis: 0;
}

.fx__i--basis-100 {
    flex-basis: 100px;
}

.fx__i--basis-200 {
    flex-basis: 200px;
}

.fx__i--basis-300 {
    flex-basis: 300px;
}

.fx__i--basis-0 {
    flex-basis: 0;
}

.fx__i--as-start {
    align-self: flex-start;
}

.fx__i--as-end {
    align-self: flex-end;
}

.fx__i--as-center {
    align-self: center;
}

.fx__i--as-baseline {
    align-self: baseline;
}

.fx__i--as-stretch {
    align-self: stretch;
}

/***************************************************************************
* INPUT ELEMENTS + INPUTSTACKS
***************************************************************************/
.inputstack {
    background-color: #fff;
}

.input,
.inputstack {
    font-size: var(--InputFontSize);
    padding: 5px;
    color: var(--InputFontColor);
    border: var(--InputBorder);
    border-radius: 3px;
    margin: 2px 0;
    box-sizing: border-box;
    max-width: 100%;
    background: var(--InputBackground);
}

.input[type=checkbox],
.input[type=radio] {
    vertical-align: middle;
    position: relative;
    bottom: 1px;
}

.inputstack__input {
    flex: 1;
    width: 10px;
    border: 0;
    padding: 5px;
    margin: 0;
    font-size: inherit;
    color: inherit;
    background-color: inherit;
}

.inputstack {
    display: flex;
    padding: 0;
}

.inputstack * {
    border-radius: 0 !important;
}

.inputstack *:first-child {
    border-radius: 3px 0 0 3px !important;
}

.inputstack *:last-child {
    border-radius: 0 3px 3px 0 !important;
}

.input:disabled {
    opacity: 0.7;
}

.input--primary,
.inputstack--primary {
    background-color: var(--InputPrimaryBackground);
    border-color: var(--InputPrimaryBorderColor);
    color: var(--InputPrimaryFontColor);
}

.input--secondary,
.inputstack--secondary {
    background-color: var(--InputSecondaryBackground);
    border-color: var(--InputSecondaryBorderColor);
    color: var(--InputSecondaryFontColor);
}

.input--success,
.inputstack--success {
    background-color: var(--InputSuccessBackground);
    border-color: var(--InputSuccessBorderColor);
    color: var(--InputSuccessFontColor);
}

.input--info,
.inputstack--info {
    background-color: var(--InputInfoBackground);
    border-color: var(--InputInfoBorderColor);
    color: var(--InputInfoFontColor);
}

.input--warning,
.inputstack--warning {
    background-color: var(--InputWarningBackground);
    border-color: var(--InputWarningBorderColor);
    color: var(--InputWarningFontColor);
}

.input--danger,
.inputstack--danger {
    background-color: var(--InputDangerBackground);
    border-color: var(--InputDangerBorderColor);
    color: var(--InputDangerFontColor);
}

input[type=radio].input--primary+label,
input[type=checkbox].input--primary+label {
    color: var(--FontPrimaryColor);
}

input[type=radio].input--secondary+label,
input[type=checkbox].input--secondary+label {
    color: var(--FontSecondaryColor);
}

input[type=radio].input--success+label,
input[type=checkbox].input--success+label {
    color: var(--FontSuccessColor);
}

input[type=radio].input--info+label,
input[type=checkbox].input--info+label {
    color: var(--FontInfoColor);
}

input[type=radio].input--warning+label,
input[type=checkbox].input--warning+label {
    color: var(--FontWarningColor);
}

input[type=radio].input--danger+label,
input[type=checkbox].input--danger+label {
    color: var(--FontDangerColor);
}

.input--minimal {
    border-right: 0;
    border-top: 0;
    border-left: 0;
    background: inherit;
    border-radius: 0;
}

.input--file {
    color: #FFF;
    border: 0;
}

.input--xs,
.inputstack--xs {
    /* input extra small */
    width: 50px;
}

.input--s,
.inputstack--s {
    /* input small */
    width: 100px;
}

.input--m,
.inputstack--m {
    /* input medium */
    width: 200px;
}

.input--l,
.inputstack--l {
    /* input large */
    width: 300px;
}

.input--xl,
.inputstack--xl {
    /* input extra large */
    width: 500px;
}

.input--xxl,
.inputstack--xxl {
    /* input extra extra large */
    width: 800px;
}

.input--w100,
.inputstack--w100 {
    /* input 100% width */
    width: 100%;
}


.input--noLMargin {
    /* Removes left margin. */
    margin-left: 0;
}

.input--noRMargin {
    /* Removes left margin. */
    margin-right: 0;
}

.input--noLRMargin {
    /* Removes left+Right margin. */
    margin-left: 0;
    margin-right: 0;
}

.input--ta-s {
    /* Input textarea small */
    height: 50px;
}

.input--ta-m {
    /* Input textarea medium */
    height: 100px;
}

.input--ta-l {
    /* Input textarea large */
    height: 200px;
}

.input--ta-h100,
.inputstack--ta-h100 {
    /* nput textarea 100% height */
    height: 100%;
}


/***************************************************************************
* BUTTONS + INPUTSTACK BUTTONS
***************************************************************************/
.btn,
.inputstack__btn {
    background-color: var(--ButtonBackgroundStart);
    background-image: linear-gradient(to bottom, var(--ButtonBackgroundStart) 0%, var(--ButtonBackgroundMid) 33%, var(--ButtonBackgroundMid2) 66%, var(--ButtonBackgroundEnd) 100%);

    /* background-image: linear-gradient(to bottom, rgba(235,235,235,0.2) 0%, rgba(20,20,20,0.2) 33%, rgba(20,20,20,0.2) 66%, rgba(235,235,235,0.2) 100%); */
    background-repeat: repeat-x;
    background-size: 1px 300%;
    border-style: solid;
    border-width: 1px;
    border-radius: 4px;
    border-color: rgba(0, 0, 0, 0.1) rgba(0, 0, 0, 0.1) rgba(0, 0, 0, 0.25);
    text-shadow: 0 1px 0 rgba(255, 255, 255, 0.3);
    box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.2), 0 1px 2px rgba(0, 0, 0, 0.05);
    color: var(--ButtonFontColor);
    padding: 6px 15px;

    font-family: inherit;
    font-size: 14px;
    margin: 2px 0;

    cursor: pointer;
    transition: background-position 0.15s;

    display: inline-block;
}

.inputstack__btn {
    border: 0;
    margin: 0;
}

.btn--block {
    display: block;
    width: 100%;
}

.btn--small {
    padding: 6px;
}

.btn--square {
    border-radius: 0;
}

.btn--minimaldark {
    background-color: rgba(0, 0, 0, 0.9) !important;
}

.btn--minimaldark:hover {
    border-color: #FFFFFF !important;
    color: #FFFFFF !important;
}

.btn--minimallight {
    background-color: rgba(220, 220, 220, 0.1) !important;
    box-shadow: 1px 1px 1px rgba(0, 0, 0, 0.3);
}

.btn--minimallight:hover {
    border-color: #000000 !important;
    color: #000000 !important;
}

.btn:hover,
.inputstack__btn:hover {
    background-position: 0 50%;
}

.btn:active,
.inputstack__btn:active {
    background-position: 0 100%;
}

.btn:disabled,
.btn[disabled],
.inputstack__btn:disabled,
.btn--disabled,
.inputstack__btn--disabled {
    background-position: 0 130% !important;
    opacity: 0.5;
}

.btn--dark,
.inputstack button.inputstack__btn--dark {
    background-color: #202425;
    background-image: linear-gradient(to bottom, #202425 0%, #101112 33%, #101112 66%, #202425 100%);
    text-shadow: 0 -1px 0 rgba(0, 0, 0, 0.25);
    color: #d7d7d7;
}

.btn--minimaldark.btn--dark,
.btn--minimallight.btn--dark {
    color: #d7d7d7;

    border: 1px solid #d7d7d7;
    background-image: none;
    text-shadow: 0 -1px 0 rgba(0, 0, 0, 0.25);
}

.btn--light,
.inputstack button.inputstack__btn--light {
    background-color: #d7d7d7;
    background-image: linear-gradient(to bottom, #eee7e7 0%, #d7d7d7 33%, #d7d7d7 66%, #eee7e7 100%);
    color: #202425;
}

.btn--minimaldark.btn--light,
.btn--minimallight.btn--light {
    color: #202425;
    border: 1px solid #202425;
    background-image: none;
}

.btn--primary,
.inputstack button.inputstack__btn--primary,
.inputstack--primary .inputstack__btn {
    background-color: var(--ButtonPrimaryBackgroundStart);
    background-image: linear-gradient(to bottom, var(--ButtonPrimaryBackgroundStart) 0%, var(--ButtonPrimaryBackgroundMid) 33%, var(--ButtonPrimaryBackgroundMid2) 66%, var(--ButtonPrimaryBackgroundEnd) 100%);
    text-shadow: 0 -1px 0 rgba(0, 0, 0, 0.25);
    color: var(--ButtonPrimaryFontColor);
}

.btn--minimaldark.btn--primary,
.btn--minimallight.btn--primary {
    color: var(--primaryColorHighlight);

    border: 1px solid var(--primaryColorHighlight);
    background-image: none;
    text-shadow: 0 -1px 0 rgba(0, 0, 0, 0.25);
}


.btn--secondary,
.inputstack button.inputstack__btn--secondary,
.inputstack--secondary .inputstack__btn {
    background-color: var(--ButtonSecondaryBackgroundStart);
    background-image: linear-gradient(to bottom, var(--ButtonSecondaryBackgroundStart) 0%, var(--ButtonSecondaryBackgroundMid) 33%, var(--ButtonSecondaryBackgroundMid2) 66%, var(--ButtonSecondaryBackgroundEnd) 100%);
    text-shadow: 0 -1px 0 rgba(0, 0, 0, 0.25);
    color: var(--ButtonSecondaryFontColor);
}

.btn--minimaldark.btn--secondary,
.btn--minimallight.btn--secondary {
    color: var(--secondaryColorHighlight);

    border: 1px solid var(--secondaryColorHighlight);
    background-image: none;
    text-shadow: 0 -1px 0 rgba(0, 0, 0, 0.25);
}


.btn--success,
.inputstack button.inputstack__btn--success,
.inputstack--success .inputstack__btn {
    background-color: var(--ButtonSuccessBackgroundStart);
    background-image: linear-gradient(to bottom, var(--ButtonSuccessBackgroundStart) 0%, var(--ButtonSuccessBackgroundMid) 33%, var(--ButtonSuccessBackgroundMid2) 66%, var(--ButtonSuccessBackgroundEnd) 100%);
    text-shadow: 0 -1px 0 rgba(0, 0, 0, 0.25);
    color: var(--ButtonSuccessFontColor);
}

.btn--minimaldark.btn--success,
.btn--minimallight.btn--success {
    color: var(--successColorHighlight);

    border: 1px solid var(--successColorHighlight);
    background-image: none;
    text-shadow: 0 -1px 0 rgba(0, 0, 0, 0.25);
}


.btn--info,
.inputstack button.inputstack__btn--info,
.inputstack--info .inputstack__btn {
    background-color: var(--ButtonInfoBackgroundStart);
    background-image: linear-gradient(to bottom, var(--ButtonInfoBackgroundStart) 0%, var(--ButtonInfoBackgroundMid) 33%, var(--ButtonInfoBackgroundMid2) 66%, var(--ButtonInfoBackgroundEnd) 100%);
    text-shadow: 0 -1px 0 rgba(0, 0, 0, 0.25);
    color: var(--ButtonInfoFontColor);
}

.btn--minimaldark.btn--info,
.btn--minimallight.btn--info {
    color: var(--infoColorHighlight);

    border: 1px solid var(--infoColorHighlight);
    background-image: none;
    text-shadow: 0 -1px 0 rgba(0, 0, 0, 0.25);
}


.btn--warning,
.inputstack button.inputstack__btn--warning,
.inputstack--warning .inputstack__btn {
    background-color: var(--ButtonWarningBackgroundStart);
    background-image: linear-gradient(to bottom, var(--ButtonWarningBackgroundStart) 0%, var(--ButtonWarningBackgroundMid) 33%, var(--ButtonWarningBackgroundMid2) 66%, var(--ButtonWarningBackgroundEnd) 100%);
    text-shadow: 0 -1px 0 rgba(0, 0, 0, 0.25);
    color: var(--ButtonWarningFontColor);
}

.btn--minimaldark.btn--warning,
.btn--minimallight.btn--warning {
    color: var(--warningColorHighlight);

    border: 1px solid var(--warningColorHighlight);
    background-image: none;
    text-shadow: 0 -1px 0 rgba(0, 0, 0, 0.25);
}


.btn--danger,
.inputstack button.inputstack__btn--danger,
.inputstack--danger .inputstack__btn {
    background-color: var(--ButtonDangerBackgroundStart);
    background-image: linear-gradient(to bottom, var(--ButtonDangerBackgroundStart) 0%, var(--ButtonDangerBackgroundMid) 33%, var(--ButtonDangerBackgroundMid2) 66%, var(--ButtonDangerBackgroundEnd) 100%);
    text-shadow: 0 -1px 0 rgba(0, 0, 0, 0.25);
    color: var(--ButtonDangerFontColor);
}

.btn--minimaldark.btn--danger,
.btn--minimallight.btn--danger {
    color: var(--dangerColorHighlight);

    border: 1px solid var(--dangerColorHighlight);
    background-image: none;
    text-shadow: 0 -1px 0 rgba(0, 0, 0, 0.25);
}

.btn--file {
    display: inline-block;
    position: relative;
    overflow: hidden;
}

.btn--file input {
    position: absolute;
    top: 0;
    right: 0;
    bottom: 0;
    left: 0;
    margin: 0;
    padding: 0;
    font-size: 20px;
    cursor: pointer;
    opacity: 0;
}

/***************************************************************************
* ANCHORS
***************************************************************************/
a {
    color: var(--LinkColor, inherit);
    text-decoration: none;
    transition: color .2s;
}

.a {}

.a:hover {
    color: #FFF;
}

.a--hover-dark:hover {
    color: #000;
}

.a--primary,
.a--hover-primary:hover {
    /*text-shadow: 0 -1px 0 rgba(0, 0, 0, 0.25);*/
    color: var(--LinkPrimaryColor);
}

.a--primary-light,
.a--hover-primary-light:hover {
    /*text-shadow: 0 -1px 0 rgba(0, 0, 0, 0.25);*/
    color: var(--primaryColorHighlight);
}

.a--secondary,
.a--hover-secondary:hover {
    /*text-shadow: 0 -1px 0 rgba(0, 0, 0, 0.25);*/
    color: var(--LinkSecondaryColor);
}

.a--secondary-light,
.a--hover-secondary-light:hover {
    /*text-shadow: 0 -1px 0 rgba(0, 0, 0, 0.25);*/
    color: var(--secondaryColorHighlight);
}

.a--success,
.a--hover-success:hover {
    /*text-shadow: 0 -1px 0 rgba(0, 0, 0, 0.25);*/
    /*color: #3efc7c;*/
    color: var(--LinkSuccessColor);
}

.a--info,
.a--hover-info:hover {
    /*text-shadow: 0 -1px 0 rgba(0, 0, 0, 0.25);*/
    /*color: #40fcfe;*/
    color: var(--LinkInfoColor);
}

.a--warning,
.a--hover-warning:hover {
    /*text-shadow: 0 -1px 0 rgba(0, 0, 0, 0.25);*/
    /*color: #ffb830;*/
    color: var(--LinkWarningColor);
}

.a--danger,
.a--hover-danger:hover {
    /*text-shadow: 0 -1px 0 rgba(0, 0, 0, 0.25);*/
    /*color: #fd4926;*/
    color: var(--LinkDangerColor);
}

/***************************************************************************
* HORIZONTAL RULERS
***************************************************************************/
.hr {
    border: 0;
    height: 1px;
    background: #333;
}


.hr--primary {
    background-color: var(--listPrimaryBorder);
}

.hr--secondary {
    background-color: var(--listSecondaryBorder);
}

.hr--success {
    background-color: var(--listSuccessBorder);
}

.hr--info {
    background-color: var(--listInfoBorder);
}

.hr--warning {
    background-color: var(--listWarningBorder);
}

.hr--danger {
    background-color: var(--listDangerBorder);
}

/***************************************************************************
    * SORTABLE
    ***************************************************************************/
.sortable {
    display: flex;

}

.sortable__item {
    display: inline-block;
    position: relative;
    background: rgba(0, 0, 0, 0.3);
    border: 1px solid #fff;
    text-align: center;
    margin: 10px;
    display: flex;
    align-items: center;
    align-content: center;
    justify-content: space-around;
    overflow: hidden;
}

.sortable__handle {
    cursor: move;
}

.sortable__item:hover {
    border-color: #999;
}

.sortable__item img {
    flex-grow: 0;
    max-width: 100%;
    max-height: 100%;
}

.sortable__itemoverlay {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    display: flex;
    align-items: center;
    justify-content: center;
    background: rgba(0, 0, 0, 0.6);
    color: #FFFFFF;
    opacity: 0;
    transition: opacity .3s;
}

.sortable__item:hover .sortable__itemoverlay {
    opacity: 1;
}

.sortable__delete {
    position: absolute;
    top: 5px;
    right: 5px;
}

.sortable__delete:hover {
    opacity: 0.5;
}

/***************************************************************************
    * DROPZONE
    ***************************************************************************/
.dropzone * {}

.dropzone--drag-over {
    position: relative;
}

.dropzone--drag-over * {
    pointer-events: none;
}

.dropzone--drag-over:before {
    content: "Laat hier los om toe te voegen!";
    position: absolute;
    display: flex;
    align-items: center;
    justify-content: center;
    height: 100%;
    width: 100%;
    top: 0;
    left: 0;
    color: #FFFFFF;
    background: rgba(0, 0, 0, 0.6);
}

/***************************************************************************
* GENERAL MODIFIERS
***************************************************************************/
.text-center {
    text-align: center !important;
}

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

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

.text-bold {
    font-weight: bold !important;
}

.text-strike {
    text-decoration: line-through !important;
}

.text-underline {
    text-decoration: underline !important;
}

.text-italic {
    font-style: italic !important;
}

.float-left {
    float: left;
}

.float-right {
    float: right;
}

.background-default {
    background-color: var(--generalBackgroundColor);
}

/***************************************************************************
* TEXT COLOR/STYLE MODIFIERS
***************************************************************************/
.primary {
    color: var(--FontPrimaryColor) !important;
}

.secondary {
    color: var(--FontSecondaryColor) !important;
}

.success {
    color: var(--FontSuccessColor) !important;
}

.info {
    color: var(--FontInfoColor) !important;
}

.warning {
    color: var(--FontWarningColor) !important;
}

.danger {
    color: var(--FontDangerColor) !important;
}

.background--primary {
    background-color: var(--primaryColor);
}

.background--secondary {
    background-color: var(--secondaryColor);
}

.background--success {
    background-color: var(--successColor);
}

.background--info {
    background-color: var(--infoColor);
}

.background--warning {
    background-color: var(--warningColor);
}

.background--danger {
    background-color: var(--dangerColor);
}

.gradient-lr--primary {
    background-image: linear-gradient(to right, var(--primaryColorHighlight), var(--primaryColorShadow));
}

.gradient-lr--secondary {
    background-image: linear-gradient(to right, var(--secondaryColorHighlight), var(--secondaryColorShadow));
}

.gradient-lr--success {
    background-image: linear-gradient(to right, var(--successColorHighlight), var(--successColorShadow));
}

.gradient-lr--info {
    background-image: linear-gradient(to right, var(--infoColorHighlight), var(--infoColorShadow));
}

.gradient-lr--warning {
    background-image: linear-gradient(to right, var(--warningColorHighlight), var(--warningColorShadow));
}

.gradient-lr--danger {
    background-image: linear-gradient(to right, var(--dangerColorHighlight), var(--dangerColorShadow));
}

.gradient-tb--primary {
    background-image: linear-gradient(to bottom, var(--primaryColorHighlight), var(--primaryColorShadow));
}

.gradient-tb--secondary {
    background-image: linear-gradient(to bottom, var(--secondaryColorHighlight), var(--secondaryColorShadow));
}

.gradient-tb--success {
    background-image: linear-gradient(to bottom, var(--successColorHighlight), var(--successColorShadow));
}

.gradient-tb--info {
    background-image: linear-gradient(to bottom, var(--infoColorHighlight), var(--infoColorShadow));
}

.gradient-tb--warning {
    background-image: linear-gradient(to bottom, var(--warningColorHighlight), var(--warningColorShadow));
}

.gradient-tb--danger {
    background-image: linear-gradient(to bottom, var(--dangerColorHighlight), var(--dangerColorShadow));
}



.font-s15 {
    /* Font size 15% smaller */
    font-size: 0.85em;
}

.font-s30 {
    /* Font size 30% smaller */
    font-size: 0.7em;
}

.font-s50 {
    /* Font size 50% smaller */
    font-size: 0.5em;
}

.font-p15 {
    /* Font size 15% bigger */
    font-size: 1.15em;
}

.font-p30 {
    /* Font size 30% bigger */
    font-size: 1.30em;
}

.font-p50 {
    /* Font size 50% bigger */
    font-size: 1.5em;
}

.font-p75 {
    /* Font size 75% bigger */
    font-size: 1.75em;
}

.font-2x {
    /* Font size 2x bigger */
    font-size: 2em;
}

.cursor-pointer {
    cursor: pointer !important;
}

.cursor-move {
    cursor: move !important;
}

.cursor-default {
    cursor: default !important;
}


.hover-opacity:hover {
    opacity: 0.5 !important;
}

.hover-color:hover {
    color: var(--FontSecondaryColor) !important;
}

.opacity-10 {
    opacity: 1 !important;
}

.opacity-9 {
    opacity: 0.9 !important;
}

.opacity-8 {
    opacity: 0.8 !important;
}

.opacity-7 {
    opacity: 0.7 !important;
}

.opacity-6 {
    opacity: 0.6 !important;
}

.opacity-5 {
    opacity: 0.5 !important;
}

.opacity-4 {
    opacity: 0.4 !important;
}

.opacity-3 {
    opacity: 0.3 !important;
}

.opacity-2 {
    opacity: 0.2 !important;
}

.opacity-1 {
    opacity: 0.1 !important;
}

.opacity-0 {
    opacity: 0 !important;
}



/***************************************************************************
    * TRANSITIONS
    ***************************************************************************/
.transition {
    /* Enable all properties fast transition */
    transition-duration: 0.2s;
}

.transition--opacity {
    transition-property: opacity;
}

.transition--duration-fast {
    transition-duration: 0.2s;
}

.transition--duration-slow {
    transition-duration: 0.6s;
}

.transition--duration-1s {
    transition-duration: 1s;
}

.notransition {
    transition: none !important;
}

/***************************************************************************
    * ICONGROUPS
    ***************************************************************************/
.icon-group {
    display: table;
}

.icon-group__icon {
    display: table-cell;
    width: 35px;
}

.icon-group__content {}


/***************************************************************************
* OTHER TAGS
***************************************************************************/
h1,
h2,
h3,
h4,
h5,
h6 {
    margin: 0 0 10px 0;
    padding: 0;
}

/***************************************************************************
    * MOBILE CONDITIONAL STYLES
    ***************************************************************************/
.mobile {}

@media all and (min-width: 1101px) {
    .mobile--1000 {
        display: none;
    }
}

@media all and (min-width: 801px) {
    .mobile--800 {
        display: none;
    }
}

@media all and (min-width: 601px) {
    .mobile--600 {
        display: none;
    }
}

@media all and (min-width: 401px) {
    .mobile--400 {
        display: none;
    }
}

.nomobile {}

@media all and (max-width: 1100px) {
    .nomobile--1000 {
        display: none;
    }
}

@media all and (max-width: 800px) {
    .nomobile--800 {
        display: none;
    }
}

@media all and (max-width: 600px) {
    .nomobile--600 {
        display: none;
    }
}

@media all and (max-width: 400px) {
    .nomobile--400 {
        display: none;
    }
}


/***************************************************************************
* GENERAL STYLES
***************************************************************************/
* {
    box-sizing: border-box;
}

.clear {
    clear: both;
}

.hidden {
    display: none;
}

.vcenter {
    vertical-align: center;
}

.invalid {
    border: 1px solid #e50000;
    background-color: #fdd1d1;
}

input[type=radio].invalid+label,
input[type=checkbox].invalid+label {
    color: #e500a8;
}

.pre {
    white-space: pre-wrap;
    word-wrap: break-word;
}

.nomargin {
    margin: 0 !important;
}

.nopadding {
    margin: 0 !important;
}

.noborderradius {
    border-radius: 0 !important;
}