*, *:before, *:after {
    box-sizing: border-box;
}

:root {
    --icon-filter-primary: brightness(0) saturate(100%) invert(37%) sepia(53%) saturate(7164%) hue-rotate(186deg) brightness(104%) contrast(87%);
    --primary-color: #1186d0;
    --primary-color-highlight: #26a1ed;
    --primary-color-highlight-disabled: #26a1ed80;
    --primary-color-disabled: #1186d080;
    --default-field-border: 1px solid #d3d3d3 !important;
    --default-field-box-shadow: 0 1px 1px 1px rgba(0, 0, 0, .05) !important;
    --info-color: var(--primary-color);
    --info-hover-color: var(--primary-color-highlight);
    --warning-color: #E1B13F;
    --warning-hover-color: #ebba49;
    --error-color: #c13535;
    --error-hover-color: #cb3f3f;
    --popup-color: var(--primary-color);
    --popup-hover-color: var(--primary-color-highlight);
    --icon-filter-grey: brightness(0) saturate(100%) invert(65%);
    --icon-filter-darkGrey: brightness(0) saturate(100%) invert(36%) sepia(0%) saturate(1%) hue-rotate(151deg) brightness(87%) contrast(89%);
    --icon-filter-blue: brightness(0) saturate(100%) invert(53%) sepia(65%) saturate(919%) hue-rotate(177deg) brightness(96%) contrast(84%);
}
    
html {
    height:100%;
    margin: 0;
    font-size: 11pt;
}

body {
    height: 100%;
    margin: 0;
    font-family: 'Nunito', sans-serif;
}

body#masterbody {
    background-color: #fff;
    min-height: 100vh;
}

form {
    width: 100%;
    margin: 0;
    font-family: 'Nunito', sans-serif;
    min-height: calc(100vh - 70px);
    max-height: calc(100vh - 70px);
    display: flex;
    flex-direction: column;
    overflow-x: auto;
    overflow-y: auto;
}

form:has(.page.popup), form:has(.full-page) {
    min-height: 100vh;
    max-height: 100vh;
}

.page {
    flex: auto;
    min-width: 960px;
    width: 100%;
    padding: 0px 25px 80px 25px;
    color: #000;
}

.page.with-footer {
    padding: 0px 25px 40px 25px;
}

.page.wide, .page.popup {
    min-width: 0;
    max-width: none;
}

.page.react {
    overflow: hidden;
    max-height: calc(100vh - 70px);
}

.page.popup {
    padding: 0rem 1.02rem 0rem 1.02rem;
}

.page span:not(.dxpc-headerText)[class^="dx"],
.page div[class^="dx"],
.page table[class^="dx"] td,
.page input {
    font-size: 0.9rem !important;
}

.icon-color-grey{
    filter: var(--icon-filter-grey);
}

.icon-color-darkGrey{
    filter: var(--icon-filter-darkGrey);
}

.icon-color-blue{
    filter: var(--icon-filter-blue);
}


/* HEADER
----------------------------------------------------------*/
nav.mainheader {
    display: inline-block; /*this prevents the div from collapsing when it only houses floating elements*/
    flex: initial;
    align-self: flex-start;
    width: 100%;
    font-weight: 100;
    height: 3.3rem;
}

@media only screen and (max-width : 1721px) {

    div.mastermenu, .footer {
        font-size: 1rem;
        font-weight:300;
    }

    div.mastermenu ul li a, div.mastermenu ul li a:visited {
        padding: 0rem 0.45rem !important;
    }

    .infobox-trialdays {
        font-size: 2.1rem;
    }

}

@media only screen and (max-width : 1709px) {

    .only-wide {
        display: none;
    }

    #nav_container_logo {
        order: 2 !important;
        flex-grow: 1 !important;
        text-align: left !important;
    }

    #nav_container_leftmenu {
        order: 1 !important;
        flex-grow: 0 !important;
        width: 64px;
    }
}

@media only screen and (max-width : 970px) {

    #nav_container_logo {
        display: none !important;
    }

}


.edit-page-menu {
    position: sticky;
    top: 0px;
    overflow: visible;
    align-self: flex-start;
    background: #ffffffE0;
    z-index: 20;
    box-shadow: -25px 0px 0px 0px white, 25px 0px 0px 0px white;
}

.dxmLite_Material .dxm-ltr {
    padding-top: 8px;
}

/* FOOTER
----------------------------------------------------------*/
footer {
    flex: initial;
    align-self: flex-end;
    width: 100%;
    padding-top: 0.5rem;
    padding-bottom: 0.5rem;
    text-align: center;
    text-decoration: none;
    font-size: 1.1rem;
    font-weight: 300;
    line-height: 2.5rem;
}

footer a, footer a:visited, footer a:link {
    color: #ffffff;
}

footer.partner-footer {
    background-color: #eee !important;
}

footer .partner-text-label,
footer .partner-info-label {
    font-size: 14px;
    line-height: 20px;
    vertical-align: middle;
    color: #444;
    display: inline;
    text-align: left;
    margin: 1rem 2rem;
}

footer .partner-text-label {
    order: 1;
    flex-grow: 1;
    float: left;
}

footer .partner-info-label {
    order: 2;
    flex-grow: 0;
    float: right;
}

/* LOGO
----------------------------------------------------------*/
#header_home_link {
    position: relative;
    display: inline-block;
}

#header_home_link:after {
  content: ""; 
  position: absolute;
  top: 0; 
  right: 0; 
  bottom: 0; 
  left: 0;
}

.mainheader .logo {
    float: left;
    height: 2.1rem;
    margin: 0.45rem 3rem 0.45rem 1.5rem;
    line-height: 3rem;
    max-width: 160px;
}

footer .logo
{
    height: 1.5rem;
    margin-right: 1.5rem;
    position: relative;
    bottom: -0.3rem;
}

footer .logo.partner {
    height: 2.3rem;
    float: left;
    flex-grow: 0;
    order: 0;
    margin: 1.0rem 2.0rem;
    bottom: 0;
}

/* BASIC PAGE ELEMENTS
----------------------------------------------------------*/

h1, h2, h3 {
    font-family: 'Nunito', sans-serif;
    font-weight: 400;
    margin: 0;
    padding: 0.5rem 0 0.4rem 0.2rem;
    color: #555;
}

h1 {
    padding-top: 0.5rem;
    font-size: 2rem;
}

h2 {
    font-size: 1.7rem;
}

h3 {   
    font-size: 1.3rem;
}

td {
    margin: 0;
    padding: 0;
    vertical-align:top; 
}

a:link, a:visited, a:active {
    color: #1c69b2;
    text-decoration:none;
}

hr {
    border: 0;
    height: 0;
    border-top: 1px solid rgba(0, 0, 0, 0.15);
}


/* FIELDSET
----------------------------------------------------------*/

fieldset {
    margin: 1rem 0;
    padding: 1rem;
    border: 1px solid #ccc;
    border-radius: 4px;
}

fieldset p {
    margin: 0.2rem 1rem 1rem 1rem;
}

fieldset.login label, fieldset.register label, fieldset.changePassword label {
    display: block;
}

fieldset label.inline {
    display: inline;
}

legend {
    padding: 0.2rem 0.4rem 0.5px 0.2rem;
    font-weight: 500;
}

/* MODIFIERS  
----------------------------------------------------------*/

.inline {
    display:inline !important;
}

.clear {
    clear: both;
}

.failureNotification {
    color: #ff0000;
}

.bold {
    font-weight: bold;
}

.clickable:hover {
    cursor: pointer;
    background-color: #eee;
}

.redcircle {
    background: #cc3333;
    height: 1.2rem;
    border-radius: 0.6rem;
    text-align: center;
    line-height: 1.2rem;
    margin-left: 0px !important;
    font-size: 0.8rem;
    font-weight: bold;
    padding-left: 4px;
    padding-right: 4px;
    display: inline-block;
    top: -5px;
    left: -15px;
    position: relative;
    box-shadow: 0px 0px 2px #999;
}

/* DOCKZONES
 ---------------------------------------------------------*/
.oneline-flex-container {
    display: -webkit-flex;
    display: flex;
}

.oneline-flex-item-flex1 {
    height:100%;
    -webkit-flex: 1;
    flex: 1;
}

.oneline-flex-item-flex2 {
    height:100%;
    -webkit-flex: 2;
    flex: 2;
}

.oneline-flex-item-flex3 {
    height:100%;
    -webkit-flex: 3;
    flex: 3;
}

.oneline-flex-item {
    height: 100%;
}

/* INFOBOXES
 ---------------------------------------------------------*/

.infobox-container {
    display: -webkit-flex;
    -webkit-flex-direction: row;
    display: flex;
    flex-direction: row; 
    width: 100%;
    height: 35rem;
    margin-top: 2rem;
    margin-bottom: 1rem;
}

.infobox {
    height: 100%;
    vertical-align:top;
    margin-left: 0.5rem;
    margin-right: 0.5rem;
    padding: 0.7rem 1.5rem 0.7rem 1.5rem;
    background-color: #ffffff;
    border-top: 1.5rem solid var(--primary-color);
    box-shadow: #dddddd 0.2rem 0.2rem 1.5rem;
    transition: all 0.1s;
    width: 0;
}

.infobox:first-child {
    margin-left: 0rem;
}

.infobox:last-child {
    margin-right: 0rem;
}

.clickable-infobox:hover {
    cursor: pointer;   
    transform: scale(1.01);
}

.infobox-trialdays {
    float: right;
    margin: 1rem;
    padding: 1rem;
    background-color: #eeeeee;
    font-size: 3rem;
    color: #333333;
    border-radius: 5rem;
}



/* VIEWS USED TO PRESENT OBJECT CARDS (TODO LIST ETC)
----------------------------------------------------------*/

.initials-box-big {
    text-align: center;
    vertical-align: middle;
    color: #ffffff;
    margin-right: 10px;
    width: 40px;
    height: 40px;
    padding-top: 5.5px;
    font-size: 1.5rem !important;
    font-weight: 300;
    display: inline-block;
    border-radius: 4px;
    font-weight: 400;
}


.initials-box-small {
    display: inline-block;
    text-align: center;
    vertical-align: middle;
    color: #ffffff;
    background-color: var(--primary-color);
    margin-right: 10px;
    width: 20px;
    height: 20px;
    font-size: 0.8rem !important;
    margin-top: 4px;
    padding-top: 1px;
}

.object-card {
    width:100%;
    padding: 0 6px 6px 6px;
    font-weight: 500;
    border-radius: 4px;
}

.object-card-type
{
    text-transform: uppercase;
    font-size: 1rem !important;
    padding-right:3px;
}

.object-card-pid-blue
{
    font-size: 1rem;
    color: var(--primary-color);
    font-weight: 600;
    display: inline !important;
    padding-right: 3px;
}

.object-card-pid-grey
{
    font-size: 1rem;
    color: #666;
    font-weight: 600;
    display: inline !important;
    padding-right: 3px;
}

.object-card-name
{
    font-size: 1rem;
    color: #333;
}

.object-card-details
{
    font-size: 0.8rem;
    font-style:italic;
    color: #666;
    display: inline;
}

.object-card-action-name
{
    font-size: 0.8rem;
    color: #444;
}

.object-card-action-summary
{
    width: 100%;
}

.object-card-action-type
{
    text-transform: uppercase;
    color: #555;
    font-size: 0.7rem !important;
    font-weight: bold;
}

.object-card-action-overdue {
    display: inline-block;
    color: #ffffff;
    border: 1px solid transparent;
    background-color: #c64848;
    font-size: 0.7rem;
    line-height: 0.8rem;
    height: 1rem;
    padding: 1px 2px 1px 2px;
    margin-left: 10px;
    border-radius: 3px;
}

.object-card-action-date {
    display: inline-block;
    color: #555555;
    border: 1px solid transparent;
    font-size: 0.7rem;
    line-height: 0.8rem;
    height: 1rem;
    padding: 1px 2px 1px 2px;
    margin-left: 10px;
}

.arrow-right {
  width: 0;
  height: 0; 
  border-top: 0.5rem solid transparent;
  border-bottom: 0.5rem solid transparent;
  border-left: 0.5rem solid var(--primary-color);
  display: inline-block;
  position:relative;
  top: 2px;
}


/* FORM ELEMENTS   
----------------------------------------------------------*/

div.smallBox {
    width: 42%;
}

.formMasterTable {
    margin: 0;
    padding: 0;
    width: 100%;
    border-radius: 4px !important;
    border-collapse: unset !important;
    border-spacing: 0;
    font-weight: 500;
}

table.dxeTextBoxSys, table.dxeMemoSys, table.dxeButtonEdit, td.dxeButtonEditButton {
    border-radius: 4px !important;
    -moz-border-radius: 4px !important;
    -webkit-border-radius: 4px !important;
    border: var(--default-field-border);
    box-shadow: var(--default-field-box-shadow);
}

table.dxeTextBoxSys{
    height: 30px;
}


.dxeMemoEditAreaSys {
    border-radius: 4px !important;
    -moz-border-radius: 4px !important;
    -webkit-border-radius: 4px !important;
}

.dxeMemoDiv {
    border-radius: 4px !important;
    -moz-border-radius: 4px !important;
    -webkit-border-radius: 4px !important;
    overflow: hidden !important;
    overflow-x: hidden !important;
    overflow-y: hidden !important;
}

.dxeToken_Material{
    margin-left: 2px;
    margin-right: 1px;
}

.caption {
    display: inline-block;
    margin-top: 0.5rem;
    padding: 0 1rem 0 0.2rem;
    color: #303030;
    font-size: 0.9rem;
    cursor: help;
}

.caption_in_front_of {
    display: inline-block;
    padding-top: 0.3rem;
    white-space: normal;
    word-wrap: break-word;
    font-size: 0.9rem;
    position: relative;
    top: 3.5px;
    color: #444 !important;
    font-weight: 500 !important;
}

.caption-large {
    font-size: 1.3rem !important;
    font-weight: 400 !important;
    color: #555 !important;
}

.timestamp {
    display: inline;
    color: #999999;
    font-size: 0.8rem;
    font-weight: 500;
}

.subtext {
    display: inline;
    color: #999999;
    font-size: 0.8rem;
}

.previous_value {
    display: inline;
    color: #999999;
    font-size: 0.8rem;
    text-decoration: line-through;
}

.checkbox {
    margin-top: 0.3rem;
    padding-left: 0 !important;
}

span.myname, span.overdue {
    display: inline-block;
    padding: 0.3rem;
    color: #ffffff;
    border: 1px solid transparent;
    white-space: nowrap;
}

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

span.overdue {
    background-color: #c64848;
    color: #fff;
}

.approved {
    padding: 0.3rem;
    background-color: #86c673;
    color: #fff;
    width: 100%;
    text-align: center;
    border-radius: 3px;
}

.notapproved {
    padding: 0.3rem;
    background-color: #c64848;
    color: #fff;
    width: 100%;
    text-align: center;
    border-radius: 3px;
}

.pending {
    padding: 0.3rem;
    background-color: #fdce3e;
    color: #fff;
    width: 100%;
    text-align: center;
    border-radius: 3px;
}

span.time {
  vertical-align: baseline;
  position: relative;
  top: -0.22em;
  font-size: 0.7rem;
  margin-left:3px;
}

input[type=submit] {
    border: 1px solid #aaa;
    padding: 3px 10px 3px 10px;
}

input[type=submit]:hover {
    background-color: var(--primary-color);
    border: 1px solid #0f8bc3;
    cursor: pointer;
    color: white;
    transition: all linear 0.08s;
}

div.divSign {
    max-height: 87.5px;
    margin-right: 16px;
    overflow-y: auto;
}

/* GRID
----------------------------------------------------------*/

img.gridicon {
    vertical-align: top;
    margin-right: 1rem;
}

.gridmenucontainer {
    display: -webkit-inline-flex;
    display: inline-flex;
    -webkit-flex-flow: row nowrap;
    flex-flow: row nowrap;
    width: 100%;
    -webkit-align-items: flex-end;
    align-items: flex-end;
    position: relative;
}

BodyContent > .gridmenucontainer {
    position: sticky;
    top: 0px;
    overflow: visible;
    align-self: flex-start;
    background: white;
    z-index: 50;
    box-shadow: -25px 0px 0px 0px white, 25px 0px 0px 0px white;
}

.gridmenucontainer h2,
.gridmenucontainer h3 {
    margin-right: auto;
    margin-bottom: 1px;
}

.gridmenucontainer dxm-ltr {
    display: inline-block !important;
}

.PageControl .gridmenucontainer.wide > .dxm-ltr{
    position: absolute;
    right: 25px;
}

/* PROCESS ARROWS
----------------------------------------------------------*/

.process_arrow {
    font-size: 1rem !important;
    display: inline-block;
    margin: 0.2rem !important;
    padding: 1px 10px 3px 20px;
    line-height: 24px;
    background: #a0a0a0;
    color: white;
    position: relative;
    text-align: center;
    white-space:nowrap;
    width: 140px;
}

.process_arrow:before {
    content: '' !important;
    border-left: 14px solid #fafafa;
    border-top: 14px solid transparent;
    border-bottom: 14px solid transparent;
    position: absolute;
    top: 0;
    left: 0;
}

.process_arrow:after {
    content: '' !important;
    border-left: 14px solid #a0a0a0;
    border-top: 14px solid transparent;
    border-bottom: 14px solid transparent;
    position: absolute;
    top: 0;
    left: 100%;
    z-index: 1;
}

.process_arrow_active {
    background: var(--primary-color) !important;
}

.process_arrow_active:after {
    border-left-color: var(--primary-color) !important;
}


/* GRID COLUMN STYLING
----------------------------------------------------------*/

.column-min-90 {
    min-width: 90px;
}

.column-min-130 {
    min-width: 130px;
}

.column-min-140 {
    min-width: 140px;
}

.column-min-150 {
    min-width: 150px;
}

.locked-item-container {
    display: flex;
    justify-content: space-between;
    align-items: center;
}

.locked-item {
    display: flex;
    align-items: center;
    border-radius: 3px;
    border: 1px solid #CEA100;
    background: #FFF0C3;
    height: fit-content;
}

.locked-item-container .locked-item .locked-item-icon {
    height: 0.7rem;
    margin: 0px 6px 0px 6px;
}

.locked-item .locked-item-text {
    color: #CEA100;
}

.locked-item-container .locked-item .locked-item-text {
    margin-right: 6px;
}

.folder-header-information {
    margin: 1rem 2rem 0rem 2rem;
}

.folder-header-information.document-grid-information-header{
    margin: 0px;
}

.folder-header-information.document-grid-react-information-header {
    margin: 1rem 0rem 0rem 0rem;
}

.folder-header-information .locked-item .locked-item-icon{
    height: 16px;
    margin: 10px 23px 10px 23px;
}

.small-icon {
    width: 16px;
    height: 16px;
}

.medium-icon {
    width: 23px;
    height: 23px;
}

.large-icon {
    width: 32px;
    height: 32px;
}

.linked-document-icon-container{
    position: relative;
    width: 25px;
    height: 25px;
}

.linked-document-icon-container .link-icon{
    position: absolute;
    bottom: -5px;
    right: -5px;
    width: 16px;
    height: 16px;
}

/* DEVEXPRESS OVERRIDES
----------------------------------------------------------*/
    /*Align fields in tab menu with other fields*/
    .dxtc-content {
        padding-left: 0 !important;
    }
/* Make sure fields fill their container*/
.dxeRoot_Material, .dxeTextBox_Material, .dxeButtonEdit_Material, .dxeMemo_Material, .dxeRadioButtonList_Material {
    width: 100% !important;
    border-radius: 4px !important;
}

.dxeButtonEdit_Material {
    border: var(--default-field-border);
    box-shadow: var(--default-field-box-shadow);
}
    
/* Margin between edit fields */
.dxeRoot_Material {
    margin-top: 0.5rem !important;
}

/* Normal input fields */
.dxeEditArea_Material {
    color: #444 !important;
    font-weight: 500 !important;
}

/* Upload controls */
.dxucEditArea_Material, input[type="text"].dxucEditArea_Material {
    color: #444 !important;
    font-weight: 500 !important;
}

/* Memo fields */
.dxeMemoSys textarea {
    color: #444 !important;
    font-weight: 500 !important;
}

/* Field captions */
.dxeCaptionCell_Material {
    min-width: 10rem !important;
    color: #444;
    font-weight: 500 !important;
    font-family: 'DXIcons', 'Nunito', sans-serif;
}
.dxeCaption {
    color: #444 !important;
    font-weight: 500 !important;
}

/* Padding of field captions */
.dxeCaptionCell_Material.dxeCLTSys {
    padding: 0.5rem 0.5rem 0.25rem 0.25rem !important;
}

.dxeListBoxItem_Material {
    padding: 0.3rem 0.7rem 0.3rem 0.7rem !important;
    font-weight: 500;
}

/* Menu buttons */
.dxm-main {
    background: transparent !important;
    border: 1px solid transparent !important;
    font-weight: 500;
}

/* Menu item texts */
nav .dxm-side-menu-mode .dxm-slide-panel, nav .dxm-side-menu-mode .dxm-slide-panel .dxm-popup, .dxmLite_Material.dxm-side-menu-mode .dxm-item, .dxmLite_Material.dxm-side-menu-mode .dxm-item .dxm-content {
    font-weight: 400 !important;
}

.dxm-ltr .dxm-horizontal .dxm-item, .dxm-ltr .dxm-horizontal .dxm-spacing, .dxm-ltr .dxm-horizontal .dxm-separator, .dxm-ltr .dxm-horizontal .dxm-alignSpacing, .dxm-ltr .dxm-content {
    font-weight: 400 !important;
}

/* Hide menu separator */
.dxm-separator {
    height: 0px !important;
}

/* Hovered menu button */
.dxm-hovered {
    background-color: transparent !important;
    color: #000 !important;
}

/* Disabled menu item */
.dxm-disabled .dxm-image {
    opacity: 0.5;
}

/* spacing of menu items */
.dxm-content {
    padding: 5px 8px 8px 8px !important;
}

/* Hide the border around radiobutton lists */
.dxeRadioButtonList_Material {
    border-color: transparent;
}

/* Grid rows */
.dxgvDataRow_Material > td {
    padding: 0px 1rem 0px 1rem !important;
    vertical-align: middle;
    height: 3rem;
    font-weight: 500 !important;
}

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

/* Grid header */
.dxgvHeader_Material {
    padding: 0 1rem 0 1rem !important;
    vertical-align: middle;
    height: 3rem !important;
    background-color: #eeeeee;
    color: #444 !important;
    font-weight: 600 !important;
}

/* Red asterisks for required fields*/
.dxeRequiredMark_Material {
    color: red !important;
    padding-left: 0.4rem !important;
    font-style: normal;
}

/* Style drop down menus */
.dxgvDataRowHover_Material .rowmenu {
    display: block !important;
}

/* Style drop down menus */
.dxgvDataRowHover_Material .rowmenu_nohover {
    display: none !important;
}

/* Style drop down menus */
.rowmenu {
    display: none;
}

/* Style drop down menus */
.rowmenu_nohover {
    display: block;
}


/* Prevent disabled boxes from becoming light grey */
[disabled], .dxeDisabled, .dxeDisabled_Material {
    color: #444 !important;
    -webkit-text-fill-color: #444;
    -webkit-opacity: 1;
}

/* Panel header arrows */
.dxrpControl_Material td.dxrpHeader_Material {
    font-size: 1.1rem !important;
}

/* Panels */
.dxrpControl_Material {
    border-radius: 4px !important;
    box-shadow: 0 2px 5px 0 rgba(0,0,0,0.1);
}

.dxrpcontent {
    background-color: #fff !important;
}

/* Panel header arrows */
.panelHeaderArrow .dxrpHT {
    padding: 1px 10px 3px 20px !important;
    line-height: 20px !important;
    background: #a0a0a0 !important;
    color: #fff !important;
    margin-top: 3px !important;
    position: relative !important;
}

/* Panel header arrows */
.panelHeaderArrow .dxrpHT:before {
    content: '' !important;
    border-left: 12px solid #f4f4f4 !important;
    border-top: 12px solid transparent !important;
    border-bottom: 12px solid transparent !important;
    position: absolute !important;
    top: 0 !important;
    left: 0 !important;
}

/* Panel header arrows */
.panelHeaderArrow .dxrpHT:after {
    content: '' !important;
    border-left: 12px solid #a0a0a0 !important;
    border-top: 12px solid transparent !important;
    border-bottom: 12px solid transparent !important;
    position: absolute !important;
    top: 0 !important;
    left: 100% !important;
    z-index: 20 !important;
}

/* Panel header arrows */
.panelHeaderArrow.active .dxrpHT {
    background: var(--primary-color) !important;
}

/* Panel header arrows */
.panelHeaderArrow.active .dxrpHT:after {
    border-left-color: var(--primary-color) !important;
}

/* Panel shadow */
.dxdpLite_Material {
    box-shadow: #dddddd 0.2rem 0.2rem 1.5rem;
    border-radius: 4px;
}

/* Popup header */
.dxpc-header[id^="pop"] {
    background-color: var(--popup-color) !important;
    padding: 0.7rem 0.5rem 0rem 2rem !important;
    vertical-align: middle !important;
    border-radius: 4px 4px 0px 0px;
}

/* Popup header font container */
.dxpc-header[id^="pop"] .dxpc-headerContent {
    padding-top: 0.7rem !important;
    text-align: center;
}

/* Popup header font */
.dxpc-header[id^="pop"] .dxpc-headerText {
    font-size: 1.5rem !important;
    color: #fff !important;
    margin-top: -1rem !important;
}

/* Popup border*/
.dxpc-mainDiv.dxpc-shadow{
    border: 0px !important;
}


.dxpc-header {
    background-color: transparent !important;
    overflow: hidden !important;
}

.dxeHyperlink_Material {
    font-size: 0.9rem !important;
}


/* Dockzone header font*/
.dxpc-headerText {
    font-family: 'Nunito', sans-serif !important;
    color: #555 !important;
    font-size: 1.4rem !important;
    font-weight: 500;
    overflow: hidden !important;
}

/* Progress bar */
.dxeProgressBar_Material {
    border-radius: 0px !important;
}

.dxeProgressBar_Material td.dxe {
    white-space: nowrap;
    text-align: center !important;
    margin: 0 auto !important;
    padding-right: 0rem !important;
    border-radius: 0px !important;
    height: 28px !important;
}

.dxeProgressBar_Material .dxpbVC {
    background-color: rgba(0, 0, 0, 0) !important;
    color: #333333 !important;
    border-radius: 0px !important;
    padding-left: 0px !important;
    padding-right: 0px !important;
}

.dxeProgressBarIndicator_Material {
    border-radius: 0px !important;
}

span[class^="dx"], div[class^="dx"], table[class^="dx"], a[class^="dx"], td, input, label {
    font-family: 'DXIcons', 'Nunito', sans-serif;
}

/* Heavier font on tabs */
.dxtc-tab, .dxtc-activeTab {
    font-weight: 600 !important;
    font-size: 1.1rem !important;

}

/* Hint control */
.dxhControl_Material {
    background-color: var(--primary-color) !important;
}
.dxh-callout::after, .dxh-callout {
    border-right-color: var(--primary-color) !important;
}

/* Align captions with headers */
.dxeCaptionCell_Material.dxeCaptionVATSys.dxeTextEditCTypeSys, .dxeCaptionCell_Material.dxeCLLSys {
    padding-left: 0.25rem;
}

.dxpc-content{
    font-weight: 500;
    color: #444;
}

.dxeBase_Material{
    font-weight: 500;
}

/* Remove borders from dashbord view */
.dxdpLite_Material .dxpc-mainDiv {
    border : 0px !important;
}

/* Dropdown menu */
.dxmLite_Material {
    font-weight : 500;
}

.dxtcLite_Material.dxtc-top > .dxtc-content {
    padding-right: 0;
}

.dxtcLite_Material > .dxtc-content {
    overflow: unset;
}
/*



.dxbButton:hover {
    background: #cbcbcb !important;
    border: 1px solid #888888 !important;
}


.dxbButton {
    margin-bottom: 0.2rem !important;
    padding-left: 1rem;
    padding-right: 1rem;
    background: #bbb !important;
    border: 1px solid transparent !important;
}



    .dxeProgressBar {
    border: 1px solid #aaaaaa;
}

*[class^='dxeBase'] label {
    vertical-align: middle;
}

.dxeHelpText {
        padding-bottom: 8px !important;
        font-size: 0.8rem !important;
        color: #4e99bf;
}

.dxgvDataRowHover {
    background-color: #eee;
}

    td.dxgvDetailCell {
    padding: 1rem !important;
    background-color: #eee;
}

    
.dxeCaption {
    color: #303030 !important;
    font-size: 5.9rem !important;
}
    .dxrpHeader {
    padding-top: 1px !important;
    padding-bottom: 3px !important;
}

.dxrpHeader, .dxrpHT {
    margin: 0rem !important;
}

.dxrpcontent {
    margin: 0rem !important;
}

    
.dxrpControl {
    box-shadow:#ddd 0.2rem 0.2rem 1.0rem;
    padding: 0px !important;
}

.dxrpControl > tbody > tr > td {
    border: 1px solid #a2a2a2;
}



.dxpcLite.dxpc-mainDiv, .dxdpLite .dxpc-mainDiv {
    border: 0px !important;
}



.dxpc-header {
    height: 2rem !important;
}

.dxpc-pinBtn {
    margin-top: 3px;
}

.dxpc-collapseBtn {
    margin-top: 3px;
    margin-right: 3px;
}

    .dxheViewArea_Material {
    border: none !important;
}

.dxheContentArea_Material {
    padding: 0px !important;
    padding-bottom: 0px !important;
    background-color: #fff !important;
}
*/
/* DEVEXTREME OVERRIDES
----------------------------------------------------------*/
.dx-button .dx-button-text {
    line-height: normal !important;
}


/* AMCHART STUFF
----------------------------------------------------------*/
.amcharts-chart-div > a {
    display: none !important;
}


.chartdiv-fullwindow {
   height: calc(100vh - 200px);   
}

.chartdiv-ontab {
    height: 350px;
}

/* STATS TABLES 
    -----------------------------------------------------*/

.statstable {
    width:100%;
    border-collapse: collapse;
}

.statsTableRow td {
    border-top: 1px solid #ddd;
    padding: 4px 25px 4px 0px;
    font-size: 0.9rem;
    color: #444;
}

/* MAINMENU */

.mainmenu .dxm-item:hover .dxm-content,
.mainmenu .dxm-item:hover,
.mainmenu .dxm-hovered .dxm-content,
nav .dxmLite_Material .dxm-popup .dxm-hovered a.dx,
nav .dxm-side-menu-mode .dxm-item:hover .dxm-content,
nav .dxm-side-menu-mode .dxm-item:hover {
    background-color: var(--primary-color) !important;
    background: var(--primary-color) !important;
    border: none !important;
    line-height: 2.2rem !important;
}

nav .dxm-bread-crubms span,
nav .dxm-item .dxm-content,
nav .dxm-item,
nav .dxm-side-menu-mode .dxm-item .dxm-content,
nav .dxm-side-menu-mode .dxm-item {
    border: none !important;
    line-height: 2.2rem !important;
}

nav .dxm-side-menu-mode .dxm-slide-panel,
nav .dxm-side-menu-mode .dxm-slide-panel .dxm-popup,
.dxmLite_Material.dxm-side-menu-mode .dxm-item,
.dxmLite_Material.dxm-side-menu-mode .dxm-item .dxm-content {
    background-color: #444444 !important;
    color: #ffffff !important;
}

nav .dxm-side-menu-button {
    background-color: #555555 !important;
    margin: 0.0rem 10rem 0rem 0.5rem !important;
    height: 32px !important;
    width: 32px !important;
    cursor: pointer;
}

nav .dxm-side-menu-button:hover {
    background-color: var(--primary-color) !important;
}

nav .mainmenu ul li a,
nav .mainmenu ul li div,
#MessageIcon,
nav .dxmSubMenu {
    line-height: 2.2rem !important;
    font-family: 'Nunito', sans-serif !important;
    font-size: 1.1rem !important;
    font-weight: 100 !important;
}

nav .dxm-popup {
    border: none !important;
    font-size: 1.1rem;
    font-weight: 100;
}

nav .dxm-overlay {
    z-index: 1000;
}

nav .menuitem_user div span {
    font-size: 0.8rem;
}

nav #MainMenuRight {
    text-align: right;
    float: right;
}

nav #nav_container_logo {
    order: 1;
    flex-grow: 0;
    text-align: center;
}

nav #nav_container_leftmenu {
    order: 2;
    flex-grow: 1;
}

nav #nav_container_rightmenu {
    order: 4;
    text-align: right;
    flex-grow: 0;
}

/* Tab */
.dxtc-link {
    padding-left: 12px !important;
    padding-right: 12px !important;
}

.dxsplHSeparator_Material {
    border-bottom: none !important;
    border-top: none !important;
    border-color: rgb(224, 224, 224) !important;
    width: 12px;
}

.dxsplVSeparator_Material{
    border-right: none !important;
    border-color: rgb(224, 224, 224) !important;
    border-left-width: 1.1px;
}

.dxsplHSeparatorHover_Material,
.dxsplVSeparatorHover_Material {
    background-color: rgb(224,224,224) !important;
}

.dxsplHSeparatorButtonHover_Material,
.dxsplVSeparatorButtonHover_Material {
    background-color: rgb(224,224,224) !important;
}

.fileRadioButton {
    position: relative;
    bottom: 15px;
}

.fileIcon {
    padding-top: 5px;
    width: 40px;
    height: 40px;
    object-fit: contain;
}

.btn-primary, .btn-secondary, .btn-outlined, .btn-popup, .btn-popup-outlined {
    -webkit-appearance: none;
    margin: 0;
    border: none !important;
    overflow: visible;
    font: inherit;
    color: #fff;
    text-transform: none;
    display: inline-block;
    box-sizing: border-box;
    padding: 0 22px;
    background: var(--primary-color);
    vertical-align: middle;
    line-height: 30px;
    min-height: 30px;
    font-size: 1rem;
    text-decoration: none;
    text-align: center;
    -webkit-border-radius: 6px;
    border-radius: 6px;
    margin: 3px 3px;
    min-width: 130px;
    padding: 3px 22px !important;
    cursor: pointer;
}

.btn-primary:hover {
    background: #44acf2 !important;
}

.btn-secondary {
    background: rgba(209, 40, 40, 1) !important;
}

.btn-secondary:hover {
    background: rgba(239, 70, 70, 1) !important;
}

.btn-outlined {
    background: #fff !important;
    border: 1px solid var(--primary-color) !important;
    color: var(--primary-color) !important;
}

.btn-outlined:hover {
    background: #fff !important;
}

.btn-popup-outlined {
    background: #fff !important;
    border: 2px solid var(--popup-color) !important;
    color: var(--popup-color) !important;
    font-weight: 600;
    opacity: 0.85;
}

.btn-popup-outlined:hover {
    background: #fff !important;
    opacity: 1;
}

.btn-outlined.info {
    border: 1px solid var(--info-color) !important;
    color: var(--info-color) !important;
}

.btn-outlined.warning {
    border: 1px solid var(--warning-color) !important;
    color: var(--warning-color) !important;
}

.btn-outlined.error {
    border: 1px solid var(--error-color) !important;
    color: var(--error-color) !important;
}

.btn-primary.info {
    background: var(--info-color) !important;
}

.btn-primary.warning {
    background: var(--warning-color) !important;
}

.btn-primary.error {
    background: var(--error-color) !important;
}

.btn-primary.info:hover {
    background: var(--info-hover-color) !important;
}

.btn-primary.warning:hover {
    background: var(--warning-hover-color) !important;
}

.btn-primary.error:hover {
    background: var(--error-hover-color) !important;
}

.btn-popup {
    background: var(--popup-color) !important;
    font-weight: 600;
}

.btn-popup:hover {
    background: var(--popup-hover-color) !important;
}

.dxbButton_Material.btn-primary {
    padding-bottom: 7px !important;
    padding-left: 7px !important;
    padding-right: 7px !important;
}

.dxbButton_Material.btn-secondary {
    padding-bottom: 7px !important;
    padding-left: 7px !important;
    padding-right: 7px !important;
}

a.black-link {
    color: rgba(72,72,72,1);
}

a.black-link:hover {
    color: rgba(0,0,0,1);
}

a.white-link {
    color: rgba(255,255,255,1);
}

a.white-link:hover {
    color: rgba(255,255,255,1);
}

.warning-label {
    color: red;
    font-weight: 500;
    font-size: 0.95rem;
}

.important-label {
    color: black;
    font-weight: 500;
    font-size: 0.95rem;
}

.disabled-list-edit-item {
    pointer-events: none !important;
    opacity: 0.85;
}

/* IN-GRID EDIT TABLE
----------------------------------------------------------*/

.in-grid-edit-table {
    border-collapse: collapse !important;
    width: 100% !important;
    background-color: White;
    border: 1px solid #DFDFDF;
    border-radius: 4px;
    box-shadow: 0 2px 5px 0 rgba(0,0,0,0.16);
}

.in-grid-edit-table .column-info-icon {
    width: 17px;
    float: right;
    margin-right: 0.4rem;
    margin-top: 10px;
    cursor: pointer;
}

.in-grid-edit-table .column-name {
    float: left;
    margin-left: 0.5rem;
}

.in-grid-edit-table table.fc-boxes {
    border-collapse: collapse;
    width: 100%;
    border: 1px solid #DFDFDF;
}

.in-grid-edit-table td.fc-boxes {
    text-align: center;
    padding: 0.5rem !important;
    border: 1px solid #DFDFDF;
    background: white !important;
    color: #484848 !important;
}

.in-grid-edit-table td.fc-boxes.header {
    background: #f5f5f5 !important;
    color: #444 !important;
    padding: 0.35rem !important;
    font-weight: 600 !important;
}

.in-grid-edit-table .dxeButton.dxeButtonEditButton_Material.dxeSpinIncButton_Material {
    height: 11px !important;
    margin-top: 3.5px !important;
}


/* HINT STYLING
----------------------------------------------------------*/

/* Normal hint */
.hint {
    background-color: #f5f5f5 !important;
    width: 250px;
    color: black;
    border: 1px solid rgb(200, 200, 200);
    box-shadow: 0 2px 5px 0 rgba(0,0,0,0.16);
    padding-bottom: 0.43rem;
    padding-top: 0.3rem;
    white-space: pre-line;
}

.hint .dxh-title{
    font-size: 1.15rem;
}

.hint .hint-subtitle {
    font-size: 1rem;
    font-weight: 500;
}

.hint .hint-subsection{
    margin-top: 1.25rem;
}

.hint .hint-subtext{
    margin-top: 0.75rem;
}

.hint .dxh-callout::after, .dxh-callout {
    border-right-color: transparent !important;
}

.hint.dxhControl_Material.dxh-top .dxh-callout::after {
    border-top-color: #aaaaaa !important;
}

.hint.dxhControl_Material.dxh-left .dxh-callout::after {
    border-left-color: #aaaaaa !important;
}

.hint.dxhControl_Material.dxh-right .dxh-callout::after {
    border-right-color: #aaaaaa !important;
}

.hint.dxhControl_Material.dxh-bottom .dxh-callout::after {
    border-bottom-color: #aaaaaa !important;
}

/* Warning hint */
.hint.warning {
    background-color: #ffdf61 !important;
}

.hint.warning.dxhControl_Material.dxh-top .dxh-callout::after {
    border-top-color: #ffdf61 !important;
}

.hint.warning.dxhControl_Material.dxh-left .dxh-callout::after {
    border-left-color: #ffdf61 !important;
}

.hint.warning.dxhControl_Material.dxh-right .dxh-callout::after {
    border-right-color: #ffdf61 !important;
}

.hint.warning.dxhControl_Material.dxh-bottom .dxh-callout::after {
    border-bottom-color: #ffdf61 !important;
}

/* Info hint */
.hint.info {
    background-color: #b2dff4 !important;
}

.hint.info.dxhControl_Material.dxh-top .dxh-callout::after {
    border-top-color: #b2dff4 !important;
}

.hint.info.dxhControl_Material.dxh-left .dxh-callout::after {
    border-left-color: #b2dff4 !important;
}

.hint.info.dxhControl_Material.dxh-right .dxh-callout::after {
    border-right-color: #b2dff4 !important;
}

.hint.info.dxhControl_Material.dxh-bottom .dxh-callout::after {
    border-bottom-color: #b2dff4 !important;
}

/* HTML editor */
.tox-tinymce{
    border-radius: 4px !important;
}

/* Info box */

.info-box {
    background: #e7f6fd;
    border-radius: 4px;
    border: 1px solid #abdcf2;
    display: flex;
    flex-direction: row;
    align-items: center;
    margin: 0.5rem 0 0.5rem 0;
    width: fit-content;
    padding: 0rem 1rem;
}

.info-box.warning {
    background: #e9c80020;
    border: 1px solid #e9c800;
}

.info-box.error {
    background: #c1353420;
    border: 1px solid #D9B1B1;
}

.info-box .info-icon {
    width: 25px;
    height: 25px;
}

.info-box.error .info-icon {
    margin-top: 5px;
}

.info-box .info-text {
    margin-left: 1rem;
    margin-right: 1rem;
}


/* Toast */
.toast {
    visibility: hidden;
    min-width: 250px;
    background-color: #444 !important;
    color: #fff !important;
    text-align: center;
    border-radius: 4px;
    border: none !important;
    padding: 2px;
    z-index: 10;
    left: 50%;
    bottom: 65px;
    font-size: 1.1rem;
    position: fixed;
    left: 50%;
    transform: translate(-50%, 0px);
}

.toast.shown {
    visibility: visible;
    -webkit-animation: fadein-toast 500ms, fadeout-toast 500ms 6510ms;
    animation: fadein-toast 500ms, fadeout-toast 500ms 6510ms;
}

.toast .info-icon{
    margin-left: 1rem;
}

    /* Validation from backend*/
    .validationList {
        font-size: 0.9rem !important;
        color: red;
        margin: unset;
    }

/* Animations to fade toast in and out */
@-webkit-keyframes fadein-toast {
    from {
        bottom: 0;
        opacity: 0;
    }

    to {
        bottom: 65px;
        opacity: 1;
    }
}

@keyframes fadein-toast {
    from {
        bottom: 0;
        opacity: 0;
    }

    to {
        bottom: 65px;
        opacity: 1;
    }
}

@-webkit-keyframes fadeout-toast {
    from {
        bottom: 65px;
        opacity: 1;
    }

    to {
        bottom: 0;
        opacity: 0;
    }
}

@keyframes fadeout-toast {
    from {
        bottom: 65px;
        opacity: 1;
    }

    to {
        bottom: 0;
        opacity: 0;
    }
} 

/*Validation */

.validationList {
    font-size: 0.9rem !important;
    color: red;
    margin: unset;
}


.copy-link-icon {
    width: 19px;
    height: 19px;
    cursor: pointer;
    margin-left: 7px;
    vertical-align: middle;
    filter: grayscale(1);
    opacity: 0.45;
    margin-bottom: 3px;
}

.copy-link-icon:hover {
    filter: grayscale(0);
    opacity: 1;
}

.copy-link-icon.list-page {
    width: 16px;
    height: 16px;
    margin-left: 6px;
}

/* General styling */

.formMasterTable.narrow {
    max-width: 900px;
}

/* Settings panel */

.settings-panel {
    border-collapse: collapse;
}

.settings-panel .row {
    border-top: 1px solid #E0E0E0;
}

.settings-panel .top.row {
    border-top: none;
}

.settings-panel .row .cell {
    padding-top: 2.5rem;
    padding-bottom: 2.5rem;
}

.settings-panel .sub-row .cell {
    padding-top: 0rem;
    padding-bottom: 2.5rem;
}

.settings-panel .cell.left {
    width: 400px;
    padding-right: 100px;
}

.settings-panel .settings-panel-info-header {
    padding-top: 0;
    padding-left: 0;
    font-weight: bold;
    text-transform: uppercase;
}

.settings-panel .row .settings-panel-info-header {
    font-size: 17px;
}

.settings-panel .settings-panel-info-body {
}

.settings-panel .cell.right {
    min-width: 600px;
}

.settings-panel .cell.right .top-field {
    margin-top: -4px !important;
}

.invalid-object-row {
    color: #b1b1b1;
    font-style: italic;
}

.invalid-object-row td img {
    filter: saturate(0);
    opacity: 0.4;
}

/* Load spinner */
@keyframes spinner {
    0% {
        transform: rotate(0deg);
    }

    100% {
        transform: rotate(360deg);
    }
}

.loading-spinner {
    width: 100px;
    height: 100px;
    border: 7px solid #f3f3f3;
    border-top: 7px solid var(--primary-color);
    border-radius: 50%;
    animation: spinner 1s linear infinite;
}

.loading-spinner.center-on-page {
    position: absolute;
    top: 30%;
    left: 50%;
    margin-left: 50px;
    margin-top: 50px;
}

.disableElement {
    pointer-events: none;
    opacity: 0.4;
}

.button {
    font-weight: 600;
    font-size: 14px;
    border-radius: 6px;
    height: 38px;
    margin: 1rem 0rem;
    display: block;
    text-align: center;
    line-height: 38px;
}

.button .button-text {
    font-family: 'Nunito', sans-serif;
}

.button.primary {
    background-color: var(--primary-color);
    color: white;
    border: none;
    min-width: 120px;
}

.button.primary:hover {
    background-color: #44acf2;
    color: white;
}

.button.primary:active {
    background-color: #44acf2;
    color: white;
}

.button.secondary {
    background-color: white;
    color: var(--primary-color);
    border-color: var(--primary-color);
    border-width: 2px;
    min-width: 120px;
}

.button.secondary:hover {
    background-color: white;
    color: #44acf2;
    border-color: #44acf2;
}

.button.secondary:active {
    background-color: white;
    color: #44acf2;
    border-color: #44acf2;
}

.button.secondary.disabled {
    border-color: #44acf280;
}