/* #region Variables (126) */
/* #endregion Variables */

@font-face {
  font-family: 'Noto Sans';
  src: url('https://resources.mjukvarufabriken.se/fonts/NotoSans-BoldItalic.woff2') format('woff2'), url('https://resources.mjukvarufabriken.se/fonts/NotoSans-BoldItalic.woff') format('woff');
  font-weight: bold;
  font-style: italic;
  font-display: swap;
}
@font-face {
  font-family: 'Noto Sans';
  src: url('https://resources.mjukvarufabriken.se/fonts/NotoSans-Bold.woff2') format('woff2'), url('https://resources.mjukvarufabriken.se/fonts/NotoSans-Bold.woff') format('woff');
  font-weight: bold;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: 'Noto Sans';
  src: url('https://resources.mjukvarufabriken.se/fonts/NotoSans-Italic.woff2') format('woff2'), url('https://resources.mjukvarufabriken.se/fonts/NotoSans-Italic.woff') format('woff');
  font-weight: normal;
  font-style: italic;
  font-display: swap;
}
@font-face {
  font-family: 'Noto Sans';
  src: url('https://resources.mjukvarufabriken.se/fonts/NotoSans.woff2') format('woff2'), url('https://resources.mjukvarufabriken.se/fonts/NotoSans.woff') format('woff');
  font-weight: normal;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: 'Cera Pro';
  src: url('https://resources.mjukvarufabriken.se/fonts/CeraPro-Medium.woff2') format('woff2'), url('https://resources.mjukvarufabriken.se/fonts/CeraPro-Medium.woff') format('woff');
  font-weight: 500;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: 'Cera Pro';
  src: url('https://resources.mjukvarufabriken.se/fonts/CeraPro-Light.woff2') format('woff2'), url('https://resources.mjukvarufabriken.se/fonts/CeraPro-Light.woff') format('woff');
  font-weight: 300;
  font-style: normal;
  font-display: swap;
}
/* #region Variables */
/* #endregion */

input[readonly],
textarea[readonly] {
  background-color: rgba(255, 255, 255, 0.3);
  /*SIMON*/

}
.selectbox > .container svg {
  fill-opacity: 0.2;
  /* SIMON */

}
.selectbox > .container svg:hover svg {
  fill-opacity: 0.5;
  /* SIMON */

}
.context-menu > .container > .group > .container > .content > .container > .button {
  background-color: #005d6e;
  /*SIMON*/

}
.itemToggler > .container > .stateContainer > .container > .header {
  color: #333333;
  /* SIMON */

}
.itemToggler > .container > .stateContainer > .container > .content > .container > .item .text {
  color: #333333;
  /* SIMON */

}
.editor.multi-select-editor > .container > .control > .container > .multi-select > .container .tagholder .tag {
  background-color: #005d6e;
  /* SIMON */

}
.editor.multi-select-editor > .container > .control > .container > .multi-select > .container .label {
  color: #bbbbbb;
  /*SIMON*/

}
.grid > .container > .selection-field > .container > .tag-textbox > .container > .tags > .container > .tag {
  background-color: #005d6e;
}
.editor.dropdown-editor > .container > .control > .container > span.readonly {
  padding: 2px 10px;
  /*SIMON*/
  background-color: rgba(255, 255, 255, 0.3);
  white-space: nowrap;
  text-overflow: ellipsis;
  /*SIMON*/

}
.editor.valuepicker-editor > .container > .control > .container > div > .container > .box.included {
  background-color: #005d6e;
  /*SIMON*/

}
.editor.valuepicker-editor > .container > .control > .container > div > .container > .box:hover,
.editor.valuepicker-editor > .container > .control > .container > div > .container > .box.selected,
.editor.valuepicker-editor > .container > .control > .container > div > .container > .box.included:hover {
  background-color: #005d6e;
  /*SIMON*/

}
.editor.percent-editor > .container > .control > .container > div > .container > .progress-bar > .container > .progress-bar-value {
  background-color: #005d6e;
  /*SIMON*/

}
.grid .selectbox > .container svg {
  fill: #005d6e;
  /* SIMON */

}
.grid > .container > .header > .container > .selectbox > .container > svg {
  fill: #005d6e;
  /* SIMON */

}
.grid > .container > .header > .container > .icons > .container > .icon.selected svg {
  fill: #005d6e;
  /* SIMON */

}
.grid > .container > .header > .container > .columns > .container > .main-columns > .container > .column:hover {
  background-color: #80c8d5;
}
.grid > .container > .data > .container > .group[data-group-type="default"] > .container > .header {
  display: none;
}
.grid > .container > .data > .container > .group > .container > .row > .container > .content > .container > .main-row > .container > .cell > .container svg {
  fill: #005d6e;
  /*SIMON*/

}
.grid.sub-list .selectbox > .container > svg {
  fill: #005d6e;
  /* SIMON */

}
.grid.sub-list > .container > .header > .container > .icons > .container > .icon svg {
  fill: #005d6e;
  /* SIMON */

}
.group > .container > .content > .container > .table td {
  border-bottom: 1px solid #cccccc;
  /* SIMON */

}
.body > .container > .navbars > .container > .navbar {
  color: #333333;
  /*SIMON*/

}
.body > .container > .navbars > .container > .navbar > .container .group > .container > .title {
  background-color: transparent;
  /*SIMON*/
  font-size: 30px;
  margin-bottom: 10px;
  /*SIMON*/

}
.body > .container > .navbars > .container > .navbar > .container .group > .container > .title > .container .text {
  color: #333333;
  /*SIMON*/

}
.body > .container > .navbars > .container > .navbar > .container .group > .container > .title > .container .icon > .container svg {
  display: none;
  /*SIMON*/

}
.body > .container > .page > .container > .titlebar > .container > .history-button > .container > svg {
  fill: #005d6e;
  /* SIMON FACELIFT */

}
.body > .container > .page > .container > .titlebar > .container > .history-button:hover > .container > svg {
  fill: #273248;
  /* SIMON FACELIFT */

}
.activity-bar > .container > .activity-bar-right > .container > .current-role > .container > .icon > .container svg {
  fill: #005d6e;
  /* SIMON */

}
.activity-bar > .container > .activity-bar-right > .container > .help-button > .container svg {
  fill: #005d6e;
  /* SIMON */

}
.activity-bar > .container > .activity-bar-right > .container > .help-button:hover svg {
  fill: #005d6e;
  /* SIMON */

}
.editor.boolean-editor > .container > .control > .container .checkbox > .container > svg {
  fill: #005d6e;
}
/*CSS*/

.grid > .container > .data > .container > .group > .container > .row > .content > .main-row > .cell svg {
  fill: #005d6e;
}
.grid > .container > .data > .container > .group > .container > .row > .content > .main-row > .cell > .tree-icon > .container > .plus > .container > svg,
.grid > .container > .data > .container > .group > .container > .row > .content > .main-row > .cell > .tree-icon > .container > .minus > .container > svg {
  fill: #005d6e;
}
.editor.text-editor > .container > .control > .container > .text.readonly > .container {
  background-color: white;
}
.dialog.text-editor-dialog > .container > .content > .container > textarea {
  background-color: white;
}
.editor.option-editor > .container > .control > .container > select.color-red {
  background-color: #c4262c !important;
}
.body > .container > .navbars > .container > .horizontal-navbar > .container {
  background-color: #005d6e;
}
.widget.diagram-widget.type-0 > .full-screen-button:hover,
.widget.diagram-widget.type-1 > .full-screen-button:hover,
.widget.diagram-widget.type-2 > .full-screen-button:hover,
.widget.diagram-widget.type-3 > .full-screen-button:hover,
.widget.diagram-widget.type-4 > .full-screen-button:hover,
.widget.diagram-widget.type-6 > .full-screen-button:hover {
  opacity: 1;
  fill: #777777;
}
.widget.diagram-widget.type-3 > .full-screen-button {
  display: block;
  fill: #666666;
}
.editor.option-editor > .container > .control > .container > select.color-green {
  background-color: #005d6e !important;
}
.widget.entity-widget > svg {
  fill: #005d6e;
}
.editor.option-editor > .container > .control > .container > select.color-orange {
  background-color: #f8ac45 !important;
}
.editor.option-editor > .container > .control > .container > select.color-blue {
  background-color: #4b82be !important;
}
@media only screen and (max-width: 768px) {
  .body > .container > .page > .container > .titlebar > .container > .buttons > .container > .button.bookmark.bookmarked svg,
  .body > .container > .page > .container > .titlebar > .container > .buttons > .container > .bookmark {
    display: none;
  }
}
.body > .container > .page > .container > .titlebar > .container > .buttons > .container > .button.bookmark.bookmarked svg {
  fill: #005d6e;
}
.grid > .container > .data > .container > .group > .container > .row > .container > .content > .container > .main-row > .container > .cell > .container > .tree-icon > .container > .plus > .container > svg {
  fill: #999999;
}
.grid > .container > .data > .container > .group > .container > .row > .container > .content > .container > .main-row > .container > .cell > .container > .tree-icon > .container > .minus > .container > svg {
  fill: #999999;
}
.grid > .container > .data > .container > .group > .container > .row > .container > .edit > .container > a svg {
  fill: #d0d0d0;
}
.grid > .container > .header > .container > .selectbox > .container > svg {
  fill: white;
}
/*Datepicker*/

.ui-datepicker > .ui-widget-header {
  background-color: #005d6e;
}
.ui-datepicker > .ui-widget-header > .ui-corner-all.ui-datepicker-prev > span,
.ui-datepicker > .ui-widget-header > .ui-corner-all.ui-datepicker-next > span {
  background-color: #005d6e;
}
.ui-datepicker > .ui-datepicker-calendar > tbody > tr > td > a {
  color: #005d6e;
}
.ui-datepicker > .ui-datepicker-calendar > tbody > tr > td.ui-datepicker-current-day {
  border: 2px solid #b3dee6;
}
.ui-datepicker > .ui-datepicker-calendar > tbody > tr > td.ui-datepicker-today > a {
  background-color: #005d6e;
  color: white;
}
.ui-datepicker > .ui-widget-header > .ui-corner-all.ui-datepicker-prev > span:hover,
.ui-datepicker > .ui-widget-header > .ui-corner-all.ui-datepicker-next > span:hover {
  background-color: #005d6e;
}
.grid > .container > .header > .container > .selectbox > .container > svg {
  fill: #005d6e;
}
.grid > .container > .header > .container > .selectbox > .container:hover > svg {
  fill: #555555;
}
.items > .container > .grid > .container > .header > .container > .selectbox > .container > svg {
  fill: white;
}
.container > .pages > .container > .page > .container > .grid.sub-list > .container > .header > .container > .icons > .container > .icon.selected {
  background-color: #ececec;
}
.toast {
  background-color: #005d6e;
}
.page > .container > .content > .container > .grid > .container > .header > .container > .selectbox > .container > svg {
  fill: white;
}
.selectbox > .container svg {
  fill-opacity: 0.3;
}
/*Fix av hover p? plupp*/

.grid.sub-list .selectbox:hover > .container > svg {
  fill: #005d6e;
  fill-opacity: 1;
}
.grid .selectbox:hover > .container svg {
  fill: #005d6e;
  fill-opacity: 1;
}
.grid > .container > .header > .container > .selectbox > .container:hover > svg {
  fill: #005d6e;
}
/*Laddar*/

.activity-bar > .container > .activity-bar-left > .container > * svg {
  fill: #005d6e;
}
.activity-bar > .container > .activity-bar-left > .container > *:hover svg {
  fill: #005d6e;
}
/*V?rderingsboxar*/

.chart > .container > .more > .container > svg {
  fill: #969696;
}
.chart > .container > .more:hover > .container > svg {
  fill: #005d6e;
}
/*Rubrik*/

.body > .container > .page > .container > .titlebar > .container > .text > .container > .title > .container {
  font-family: 'Cera Pro';
  font-weight: 300;
}
/*Titlar*/

.button-list > .container > .title > .container {
  font-family: 'Cera Pro';
  font-weight: 500;
}
/*Knappar i dialoger*/

.dialog > .container > .bottombar > .container > .button,
.dialog > .container > .bottombar > .container .link-control {
  background-color: #005d6e;
}
/*Knappar i dialoger*/

.dialog > .container > .bottombar > .container > .button:hover,
.dialog > .container > .bottombar > .container .link-control:hover {
  background-color: #273248;
}
.button-list > .container > .button {
  border-radius: 5px;
}
.grid > .container > .header {
  border-radius: 5px;
}
.tab-control > .container > .headers {
  border-radius: 5px;
}
.tab-control > .container > .headers > .container > .header.selected {
  border-radius: 5px;
}
.tab-control > .container > .pages > .container > .page > .container > .group {
  border-radius: 5px;
}
.tab-control > .container > .pages > .container > .page > .container > .group > .container > .title {
  font-family: 'Cera Pro';
  font-weight: 500;
}
.method-control,
.link-control {
  border-radius: 5px;
}
.dialog > .container > .titlebar {
  border-radius: 5px;
}
.dialog > .container {
  border-radius: 5px;
}
.dialog > .container > .bottombar > .container::before {
  border-radius: 5px;
}
.dialog > .container > .bottombar > .container > .button,
.dialog > .container > .bottombar > .container .link-control {
  border-radius: 5px;
}
.body > .container > .navbars > .container > .navbar > .container .group > .container > .title > .container .text {
  color: white;
  font-family: 'Cera Pro';
  font-weight: 300;
}
.body > .container > .navbars > .container > .navbar > .container .group > .container > .item a {
  color: white;
}
.body > .container > .navbars > .container > .navbar > .container .group > .container > .item a:hover {
  background-color: inherit;
}
.body > .container > .navbars > .container > .navbar > .container .group > .container > .item a .title {
  font-family: 'Cera Pro';
  font-weight: 500;
}
.body > .container > .page > .container > .content .helpText {
  color: white;
}
.login > .container > .form > .container .button > .container > input {
  border-radius: 10px;
}
.login > .container > .form > .container .textbox .control input {
  border-radius: 10px;
}
.login > .container > .form > .container {
  text-align: left;
}
.login > .container > .form > .container > .forgot-password-button {
  background-color: inherit;
}
.login-layout.use-background.page-mode > .container .login {
  background-color: #273248;
}
.login-layout.use-background.page-mode > .container .login {
  background-color: #273248;
}
.login-layout > .container > .login > .container > .form > .container .button > .container > input {
  border-radius: 10px;
}
.login-layout > .container > .login > .container > .form > .container .textbox .control input {
  border-radius: 10px;
}
.login-layout > .container > .login > .container > .form > .container {
  text-align: left;
}
.login-layout > .container > .login > .container > .form > .container > .forgot-password-button {
  background-color: inherit;
}
.login-layout.use-background.page-mode {
  background: none;
  background-color: #273248;
}
.login-layout.use-background.page-mode > .container .login {
  background-color: #273248;
}
@media only screen and (min-width: 800px) {
  .login-layout.use-background.page-mode {
    background: url("../Images/login-background.png");
    background: url("../Images/login-background.png"), linear-gradient(45deg, #5e8396, #577c8f);
    background-repeat: no-repeat;
    background-color: #273248;
    background-position: bottom 0px left 50%;
    background-size: contain;
  }
  .login-layout.use-background.page-mode > .container .login {
    background-color: #273248;
    width: 50%;
    max-width: none;
    min-width: 350px;
  }
  .login-layout.use-background.page-mode > .login-splash {
    display: block;
  }
}
@media only screen and (max-width: 800px) {
  .login-layout.use-background.page-mode > .container > .login {
    background-color: #273248;
    min-width: 100%;
    max-width: none;
  }
  .login-layout.use-background.page-mode > .login-splash {
    display: none;
  }
}
.login-layout.splash-enabled.page-mode > .container > .login > .container > .logotype {
  display: block;
}
/*
.login-layout.use-background.page-mode > .container .login {
    background-color: #273248;
    width: 50%;
    max-width: none;
    min-width: 350px;
}
*/