/*********************************************************
 **Importing Css files.
 **Adding a random number to the version to assure that the cache of an old midas.css doesn't override the new one.
 *********************************************************/
@random: `Math.random()`; //NOSONAR - Checked to work with both IE and Chrome. Approved by TBA.
@link: "../css/midas.css?v=";
@url: "@{link}@{random}";

@import (less) '../../lib/jquery-ui-1.13.1.custom/jquery-ui.min.css';
@import (less) url(@url); // Oprindelig style fra Midas - Read only
@import (css) '../../lib/bootstrap/css/bootstrap.min.css';

/********************************************************
** LESS variables - BEGIN
*********************************************************/
//In setClassesByNumberOfTabRows change "var tabHeight" to "40" + the number of the width you add below. This is done to create the space in the navigation bar.
@tab-border-width: 2px;

@fontsize-header-lg: 14px;
@fontsize-header-sm: 12px;
@fontsize-standard: 11px;                                   // The standard text-size - equivalent to the font-size in jquery-ui
@fontsize-sm: 10px;

@z-index-content: 1029;                                     // Z-index for content. Must be below navbar.
@z-index-navbar: 1030;                                      // Z-index for bootstrap navbar. Not really used here. Just for refrence ...
@z-index-dialog: 1031;                                      // Z-index for dialogs. Must be on top of navbar.
@z-index-popup: 1032;                                       // Z-index for popups, e.g. datapicker and autocomplete. Must be on top of dialogs.

@textcolor-standard: #222222;                               // The standard text-color - equivalent to the text-color in jquery-ui
@line-height: 14px;                                         // Standard line-height
@input-border: 1px solid #0AA0AA;                           // The standard border for the input elements
@input-space-after: 0;                                      // The margin between input elements (bottom) (stod til 4px)
@input-box-shadow: inset 0 1px 1px rgba(0, 0, 0, 0.075);    // The box-shadow for input elements
@input-box-shadow-focus: inset 0 1px 1px rgba(176, 176, 176, .075), 0 0 8px rgba(98, 98, 98, .6); // The box-shadow for input elements in focus
@input-transition: border linear .2s, box-shadow linear .2s;// The transition for input elements
@color-border: #B0B0B0;                                     // The border color
@color-warning-text: #000000;                               // The color for warning text
@color-warning-shadow: 0 0 6px #FCDA7F;                     // The shadow color for warning input when in focus
@color-warning-bg: #FDECBF;                                 // The background color for warning
@color-warning-border: #FDECBF;                             // The border color for warning
@color-warning-text-without-bg: #FAB600;                    //
@color-error-text: #000000;                                 // The color for error text for tooltips
@color-error-shadow: 0 0 6px #FF8292;                       // The shadow color for error input when in focus
@color-error-bg: #FFC1C9;                                   // The background color for error
@color-error-border: #FFC1C9;                               // The border color for error
@color-error-text-without-bg: #FF001D;                      // The color for error text for when fx. PFC's needs new prices
@color-info-text: #000000;                                  // The color for info text
@color-info-bg: #ffffff;                                    // The background color for info
@color-info-border: #B0B0B0;
@color-info-bubble: #626262;// The border color for info
@color-success-text: #000000;                               // The color for success text
@color-success-bg: #87B287;                                 // The background color for success
@color-success-border: #00B600;                             // The border color for success
@color-formelements-background: #000000;                    // The background color used for different form elements
@color-header-background: #ffffff;                          // The background color used for headers
@color-header-border: #B0B0B0;                              // The border color used for headers
@color-button-text: #000000;                                // The text color used for default buttons
@color-addon-bg: #eeeeee;                                   // The background color used for input add-ons
@color-uiicons-standard: #0AA0AA;                           // The standard color jQuery UI used for icons
@color-hover-table: #BBE1E3;                                // The standard color for marking a row e.g. list hover
@color-main-tabs: #B0B0B0;                                  // The standard color for the tab e.g navbar color
@color-container-background: #0AA0AA;                       // The standard color for the container e.g. tabs and header spaces
@color-container-background-inactive: #B0B0B0; //Sub-tabs color
@color-container: #ffffff;                                  // The standard color for the container
@color-hover: #BBE1E3;                                      // The standard :hover color for text
@color-text-dimmed: #B0B0B0;                                // The light color for dimmed text
@table-padding: 4px 10px;                                   // The padding for the tables
@small-margin: 6px;                                         // Small margin used eg for text following an input
/********************************************************
** LESS variables - END
*********************************************************/



/********************************************************
** Mixin Classes - BEGIN
*********************************************************/
.no-bg-and-borders {
    background: none #ffffff;
    border-top: 0;
    border-right: 0;
    border-left: 0;
    border-radius: 0;
}
/********************************************************
** Mixin Classes - END
*********************************************************/



/********************************************************
** General Classes - BEGIN
*********************************************************/
/* margin and padding values are reset for all these elements
   twb has removed h1-h6-tags
   twb: don't know if we should keep the p-tag here!
*/
body, dl, dt, dd, ul, ol, li, pre, code, form, fieldset, legend, input, button, textarea, blockquote, th, td {
    margin: 0;
    padding: 0;
}
body {
    font-family: 'Verdana', sans-serif;
    font-size: @fontsize-standard;
    line-height: 17px;
    color: @textcolor-standard;
    background-color: #ffffff;
}
h2 {
    border-bottom: solid 1px #B0B0B0;
    font-size: @fontsize-header-lg;
}

//Hyperlink color
a:link, a:visited, a:hover, a:active {
    color: #0AA0AA;
    text-decoration: none;
}

//Hyperlink hover
a:hover {
   color: @color-hover;
}
.fa {
    cursor: pointer;
}
.con_dimmed {
    color: @color-text-dimmed;
}
.ui-widget.ui-widget-content {
  border: none;
}

/********************************************************
** General Classes - END
*********************************************************/


/********************************************************
** Style for Bootstrap navbar - BEGIN
*********************************************************/

.navbar-brand {
    padding: 0 15px;
    >img {
        max-width: 159px;
        max-height: 60px;
    }
}

.navbar-form {
    padding-top: 4px;
    padding-right: 0;
    .form-group {
        margin-right: 10px;
    }
}

@media (max-width: 1595px) {
    .navbar-form .form-control {
        width: 165px;
    }
}

@media (max-width: 1275px) {
    .navbar-form .form-control {
        width: 135px;
    }
}

.navbar-default {
    background-color: @color-header-background;
    border: none;
    .caret {
        margin-left: 5px;
        padding-bottom: 2px; //To make the triangle center
    }
}

.navbar-default .navbar-nav>li>a {
    color: @textcolor-standard;
    font-size: @fontsize-header-lg;
}

.navbar-default .navbar-form input[type="text"] {
    font-size: @fontsize-header-sm;
    padding: 3px;
    height: 25px;
    box-sizing: border-box;
}

.nav>li>a {
    padding-left: 10px;
    padding-right: 10px;
}

.dropdown-menu {
    font-size: @fontsize-standard;
    border-radius: 0;
    border-color: @color-border;
    >li>a {
        cursor: pointer;
    }
}

.dropdown-header {
    color: @textcolor-standard;
    text-transform: uppercase;
}

.nav li + .dropdown-header {
    padding-top: 15px;
}

/********************************************************
** Style for Bootstrap navbar - END
*********************************************************/


/********************************************************
** Style for main tabs - BEGIN
*********************************************************/
@navbar-height: 60px;
@tab-height: 40px;

.midas-content {
    padding: 0;
    border: none;
    background: none;
}

/***************
**Navbar Color**
***************/
.midas-tabs.ui-tabs-nav {
    position: fixed;
    top: @navbar-height;
    left: 0;
    right: 0;
    z-index: @z-index-content;
    min-height: 40px;
    background: @color-main-tabs none;
    border: @color-container;
    border-radius: 0px;
    color: #ffffff;
    padding: 0;
    overflow: hidden;
    margin: -@tab-border-width;

    /****************************
    **Navbar inactive-Tab color**
    *****************************/
    li.ui-state-default {
        color: #ffffff;
        padding-top: 0;
        padding-bottom: 0;
        margin: 0;
        border-radius: 0;
        min-height: @tab-height;
        height: 100%;
        background: #B0B0B0;
        border: 0px solid #B0B0B0;
        border-right-color: @color-container;
        border-left-color: @color-container;
        border-bottom-color: #B0B0B0;
        border-top-color: #B0B0B0;
        box-shadow: -@tab-border-width 0px 0px 0px #ffffff, @tab-border-width 0px 0px 0px #ffffff, @tab-border-width @tab-border-width 0px 0px #ffffff;
        margin-top: @tab-border-width;
        >div {
            margin-top: 6px;
        }
        a {
            color: #ffffff;
            font-size: @fontsize-header-lg;
        }
        i:hover {
            color: @color-uiicons-standard;
        }
        .fa-refresh {
            transform: rotate(0.001deg); // To avoid bad rendering of icon in IE
        }

        /**************************
        **Navbar active-Tab color**
        ***************************/
        &.ui-state-default.ui-state-active {
            background-color: @color-container-background;
            border-color: @color-container-background @color-container @color-container-background @color-container;
            a, i {
                color: #ffffff;
            }
            i:hover {
                color: @color-hover-table;
            }
        }
        &.ui-state-default {
            font-weight: normal;
        }
        .fa {
            float: left;
            margin: 7px 7px 7px 0;
        }
      }
    .ui-tabs-anchor {
        padding: 3px 10px;
    }
}

// Generate classes based on tab rows 1-5
.generate-classes-by-tab-rows(5);

.generate-classes-by-tab-rows(@n, @i: 1) when (@i =< @n) {
    @offset: @i * @tab-height + @navbar-height;
    .ui-tabs .ui-tabs-panel.main-tab-panel-@{i} {
        padding: @offset 0 0 0;
    }
    .con-success-position-@{i} {
        top: (@offset + 5);
    }
    .generate-classes-by-tab-rows(@n, (@i + 1));
}

/********************************************************
** Style for Bootstrap main tabs - END
*********************************************************/

/********************************************************
** Style for bootstrap-select - BEGIN
*********************************************************/

.bootstrap-select {
    .btn {
        padding-top: 2px;
        padding-left: 10px;
        padding-bottom: 2px;
        margin: 0;
        border-radius: 0;
    }

    /**********************
    **Dropdown menu color - price feed**
    **********************/
    .btn-default {
        border: 1px solid @color-border;
        background-color: #ffffff;
        &.con-error-input {
            border-color: @color-error-text;
        }
    }

    .btn-default:active:hover,
    .btn-default.active:hover,
    .open>.dropdown-toggle.btn-default:hover,
    .btn-default:active:focus,
    .btn-default.active:focus,
    .open>.dropdown-toggle.btn-default:focus,
    .btn-default:active.focus,
    .btn-default.active.focus,
    .open>.dropdown-toggle.btn-default.focus {
        .btn-default;
    }

    .btn-default:focus,
    .btn-default.focus {
        .btn-default;
    }

    .btn-default:hover {
        .btn-default;
    }

    .btn-default:active,
    .btn-default.active,
    .open > .dropdown-toggle.btn-default {
        .btn-default;
    }

    &.btn-group .dropdown-menu li .opt {
        padding-left: 20px;
    }

    .dropdown-menu {
        z-index: @z-index-popup;
    }
}

.bootstrap-select.btn-group.show-tick .dropdown-menu .selected a .check-mark {
    margin-top: 2px;
}

.bootstrap-select > .dropdown-toggle.bs-placeholder,
.bootstrap-select > .dropdown-toggle.bs-placeholder:hover,
.bootstrap-select > .dropdown-toggle.bs-placeholder:focus,
.bootstrap-select > .dropdown-toggle.bs-placeholder:active {
    color: @textcolor-standard;
}

.bootstrap-select:not([class*=col-]):not([class*=form-control]):not(.input-group-btn) {
    width: 190px;
}

/********************************************************
** Style for bootstrap-select - END
*********************************************************/


/********************************************************
** Style for buttons - BEGIN
*********************************************************/
//Menu for dropdown button
.ui-menu {
    position: absolute;
    width: auto;
}

.ui-widget.ui-button:active {
    color: @color-button-text;
}

.con-btn-small {
    height: 21px;
    padding: 2px 10px;
}

/********************************************************
** Style for buttons - END
*********************************************************/



/********************************************************
** Style for status areas - BEGIN
*********************************************************/
.mixin-status-msg {
    padding: 0 .7em;
    i {
        margin-right: 5px;
    }
}

.con-state-success {
    .mixin-status-msg;
    background-color: @color-success-bg;
    border: 1px solid @color-success-border;
    color: @color-success-text;
    a {
        color: @color-success-text;
    }
}

.con-state-warning {
    .mixin-status-msg;
    border: 1px solid @color-warning-border;
    background-color: @color-warning-bg;
    color: @color-warning-text;
    a {
        color: @color-warning-text;
        text-decoration: underline;
    }
}

.con-state-error {
    .mixin-status-msg;
    border: 1px solid @color-error-border;
    background-color: @color-error-bg;
    color: @color-error-text;
    a {
        color: @color-error-text;
        text-decoration: underline;
    }
}

.con-state-info {
    .mixin-status-msg;
    border: 1px solid @color-info-border;
    background-color: @color-info-bg;
    color: @color-info-text;
    a {
        color: @color-info-text;
        text-decoration: underline;
    }
}

.con-status-icon {
    float: left;
    margin-right: .3em;
    margin-top: 2px;
}

.con-success {
    .con-state-success;
    position: fixed;
    left: 50%;
    transform: translateX(-50%);
    width: 600px;
    z-index: @z-index-popup;
    border-bottom-right-radius: 0;
    border-bottom-left-radius: 0;
    border-bottom: none;
    table {
        width: 100%;
        td {
            padding: 10px;
        }
        td:first-child {
            padding-right: 0;
        }
        .icon {
            width: 1%;
            vertical-align: top;
        }
    }
}

.con-info {
    color: @color-info-bubble;
}
/********************************************************
** Style for status areas - END
*********************************************************/



/********************************************************
** Style for dialogs - BEGIN
*********************************************************/
.mixin-shadow {
    box-shadow: 0 3px 7px rgba(0, 0, 0, 0.3);
}

.mixin-dialog {
    .mixin-shadow;
    padding: 0;
    border: none;
    border-radius: 0;
}

.mixin-dialog-header {
    border-radius: 0;
    background: @color-main-tabs none;
    font-size: @fontsize-header-sm;
    font-weight: normal;
}

.con-dialog {
    .mixin-shadow;
}
.con-dialog-titlebar {
    .no-bg-and-borders;
}

// Overwrite jquery dialog padding as it is based on font size (em) and in some cases this gives rounding errors that
// causes a horizontal scrollbar due to a negative margin of 15px specified by bootstrap.
// Also overwrite container-fluid padding when used inside dialogs as it causes double padding.
.ui-dialog {
    .mixin-dialog;
    z-index: @z-index-dialog;
    .ui-dialog-titlebar {
        .mixin-dialog-header;
        .ui-dialog-titlebar-close {
            background: none;
            border: none;
            .ui-icon {
                background-image: url(../../lib/jquery-ui-1.13.1.custom/images/ui-icons_ffffff_256x240.png);
            }
        }
        .ui-dialog-titlebar-close:focus {
            outline: none;
        }
        .ui-dialog-titlebar-close:after {
            font-family: FontAwesome; // NOSONAR TBA valid with only one family
            content: "\f00d";
            position: relative;
            top: -24px;
            left: -6px;
            font-size: 16px;
            color: white;
        }
        .ui-dialog-titlebar-close:hover:after {
            color: @color-hover;
        }
    }
    .ui-dialog-content {
        padding-left: 15px;
        padding-right: 15px;
        >.con-container {
            padding-top: 0;
        }
        .con-container:first-child {
            margin-top: 10px;
        }
        .container-fluid {
            padding-left: 0;
            padding-right: 0;
        }
        &.overflow-visible {
            overflow: visible;
        }
    }
    &.overflow-visible {
        overflow: visible;
    }
}
/********************************************************
** Style for dialogs - END
*********************************************************/



/********************************************************
** Style for Tabs - BEGIN
*********************************************************/
.ui-tabs .ui-tabs-nav, .ui-tabs-panel {
    border-radius: 0;
}

.ui-tabs .ui-tabs-panel { padding: 5px; }

/********************************************************
** Style for Tabs - END
*********************************************************/



/********************************************************
** Style for Datepicker - BEGIN
*********************************************************/

.ui-datepicker {
    .mixin-dialog;
    z-index: @z-index-popup;
    .ui-datepicker-header {
        .mixin-dialog-header;
        .ui-datepicker-prev, .ui-datepicker-next {
            top: 3px;
        }
        .ui-datepicker-month, .ui-datepicker-year {
            width: 49%;
        }
        .ui-state-hover {
            background: none;
            border: none;
        }
    }
}

/********************************************************
** Style for Datepicker - END
*********************************************************/


/********************************************************
** Style for Autocomplete - BEGIN
*********************************************************/
//E.g. search results pop-up
.ui-autocomplete {
    z-index: @z-index-popup;

    .ui-menu-item-wrapper {
        display: block;
    }

    .ui-state-active {
        border: 1px solid @color-border;
        background: @color-hover;
        font-weight: inherit;
        color: inherit;

        &.con-warning-text {
            color: @color-warning-text;
        }
    }

    &.ui-widget.ui-widget-content {
        border: 1px solid @color-border;
    }
}

/********************************************************
** Style for Autocomplete - END
*********************************************************/



/********************************************************
** Style for icons - START
*********************************************************/

.con-icon-alert {
    .ui-icon;
    .ui-icon-alert;
}
.con-icon-info {
    .ui-icon;
    .ui-icon-info;
}

.con-icon-document {
    .ui-icon;
    .ui-icon-document;
}

.con-icon-triangle-1-s {
    .ui-icon;
    .ui-icon-triangle-1-s;
}


/********************************************************
** Style for icons - END
*********************************************************/



/********************************************************
** Style for Form - BEGIN
*********************************************************/

input[type="file"],
input[type="password"],
input[type="text"],
textarea,
textarea.form-control,
select,
select.form-control {
    .ui-widget-content;
    padding: 1px 3px; /* for at få samme padding som det gamle design */
    line-height: normal; /* Får line-height fra Bootstraps body, da den ellers ville overskrives af body i midasoverwrite.less, som ville give højre inputfelter */
}

input[type="text"].con-error-input, input[type="text"].formInvalid, select.con-error-input, select.formInvalid, textarea.formInvalid {  // NOSONAR TBA Necessary with overqualified select.con-error-input, select.formInvalid
    border: 1px solid @color-error-border;
}

// con-state-warning adds a box and border, so the text has to be readable on that background
.con-state-warning .con-warning-text {
    color: @color-warning-text;
}

.con-warning-text {
  color: @color-warning-text-without-bg;
}

// con-state-error adds a box and border, so the text has to be readable on that background
.con-state-error .con-error-text {
    color: @color-error-text;
}

.con-error-text {
  color: @color-error-text-without-bg;
}

.con-success-text {
  color: @color-success-text;
}
.con-radio,
.con-checkbox,
select,
input[type="reset"],
input[type="submit"],
input[type="radio"],
input[type="checkbox"] {
    cursor: pointer;
}
textarea {
    overflow: auto;
    vertical-align: top;
}
select,
textarea {
    margin-bottom: @input-space-after;
    font-size: @fontsize-standard;
    .ui-widget-content;
}

input[type="radio"],
input[type="checkbox"],
.radio-inline input[type="radio"],
.checkbox-inline input[type="checkbox"] {
    margin: 0;
    accent-color: @color-uiicons-standard;
    line-height: normal;
}
.radio-inline input[type="radio"],
.checkbox-inline input[type="checkbox"] {
    position: absolute;
    margin-left: -20px;
}

select[multiple],
select[size] {
    height: auto;
}

// Overwrite customfile-feedback margins when used inside bootstrap forms.
.form-group .customfile-feedback {
    margin-left: 0;
    margin-right: 0;
}

/********************************************************
** Conscius specifiede form - BEGIN
*********************************************************/

/* .con-form-text is used for text elements in forms to apply the same width between input elements */
label, .con-form-text {
    padding-top: 5px;
    line-height: 13px;            // Indsat for at aligne check- og radiobox korrekt
    font-weight: normal;
}
.con-form-text, .con-inline-label {
    display: inline-block;
}
.con-radio.con-inline-label,
.con-checkbox.con-inline-label {
    margin-right: 12px;
}
.con-radio,
.con-checkbox {
    min-height: 19px;
    padding-left: 20px;
    display: inline-block;
}
.con-radio input[type="radio"],
.con-checkbox input[type="checkbox"] {
    float: left;
    margin-left: -20px;
}
.con-checkbox input:last-child,
.con-radio input:last-child {
    margin-bottom: @input-space-after;
}


input.con-warning-input {  // NOSONAR TBA Necessary with over qualified selector
    border-color: @color-warning-text;
    color: @color-warning-text;
}
.con-info-input {
    border-color: @color-info-text;
    color: @color-info-text;
}
input:focus.con-info-input {
    border-color: @color-info-text;
}

/* Style for inline forms */
.con-form-inline input,
.con-form-inline textarea,
.con-form-inline select {
    display: inline-block;
    margin-bottom: 0;
    vertical-align: middle;
}
.con-form-inline label {
    display: inline-block;
}
.con-form-inline .con-radio,
.con-form-inline .con-checkbox {
    padding-left: 0;
    margin-bottom: 0;
    vertical-align: middle;
}
.con-form-inline .con-radio input[type="radio"],
.con-form-inline .con-checkbox input[type="checkbox"] {
    float: left;
    margin-right: 3px;
    margin-left: 0;
}

/* Style for making inline-forms inside a horizontal form align correct */
.form-horizontal .form-inline .form-group{
    margin-left: 0;
    margin-right: 0;
}

/* Indsat for at få check- og radio-bokse til at aligne bedre med label'en i det gamle Midas style  */
.radio input[type="radio"],
.radio-inline input[type="radio"],
.checkbox input[type="checkbox"],
.checkbox-inline input[type="checkbox"] {
    margin-top: 0;
}

.radio-inline,
.checkbox-inline {
    padding-top: 0;
}

/* Lånt fra Bootstrap, som har ".radio-inline + .radio-inline" for at lave mellemrum mellem to efterfølgende radio eller checkbox. Vi har i Midas behov for mellemrum mellem input og checkbox */
input + .radio-inline,
input + .checkbox-inline {
    margin-top: 0;
    margin-left: 10px;
}
/* Lavet for at styre flere input-bokse, som har det samme label, så de kan stables oven på hinanden */
.form-horizontal .con-form-stack .form-group {
    margin-left: 0;
    margin-right: 0;
}
.form-group .form-group:last-child { /* fjerner dobbelt mellemrum ved form-group i form-group */
    margin-bottom: 0;
}
.con-2level-label {
    font-weight: normal;
}
/********************************************************
** Conscius specifiede form - END
*********************************************************/


/********************************************************
** Conscius overwrite of Bootstrap form in order to look like Midas Form - BEGIN
*********************************************************/
.con-input-append {
    display: table;
}
.con-input-append .add-on, .con-input-prepend .add-on {
    display: table-cell;
}
.add-on {
    vertical-align: middle;
    padding-left: 5px;
}
.form-horizontal .control-label {
    padding-top: 5px;
    text-align: left;
}
input[type="text"],
input[type="password"],
select,
.form-control {
    height: 21px;
    border-radius: 0;
}

input:disabled[type="text"],
select:disabled,
.form-control:disabled {
    height: 21px;
    border-radius: 0;
    border: 1px solid #D7D7D7;
    color: #B0B0B0;
}

.form-group {
    margin-bottom: 5px;
}
.form-horizontal .radio, .form-horizontal .checkbox, .form-horizontal .radio-inline, .form-horizontal .checkbox-inline {
    padding-top: 0;
}
.form-control-static {
    padding-bottom: 1px;
    padding-top: 1px;
}
.form-horizontal .radio, .form-horizontal .checkbox {
    min-height: 18px;
}

.input-group {
    width: 100%;
    .form-control {
        z-index: auto; // Overwrite bootstrap (which is 2)
    }
    button.ui-state-default {
        border-left: 0;
        border-color: @color-border;
        margin-right: 0;
    }
}

/********************************************************
** Conscius overwrite of Bootstrap form in order to look like Midas Form - END
*********************************************************/



/********************************************************
** Style for con-container - BEGIN
*********************************************************/
.con-container {
    border: 1px solid @color-border;
    overflow: hidden;
    background-color: #ffffff;
    margin-top: 30px; // Match grid gutter width
    h1 {
        .con-container-title;
    }
    & > div {
        .con-container-content;
    }
    &.overflow-visible {
        overflow: visible;
    }
}
.con-container-title {
    font-size: @fontsize-header-sm;
    font-weight: normal;
    margin: 0;
    padding: 6px 14px;
    line-height: 18px;
    color: @textcolor-standard;
    background-color: @color-container;
    border-bottom: 1px solid @color-border;
}
.con-container-content {
    padding: 10px 15px;
}
.con-dialog-buttonpane {
    border: solid @color-border;
    .ui-dialog .ui-dialog-buttonpane;
    padding-left: 0;
    padding-right: 0;
    padding-bottom: 0;
}


/********************************************************
** Style for con-container - END
*********************************************************/


/********************************************************
** Style for accordions and tabs - BEGIN
*********************************************************/

//Also UI icon/Buttons background (e.g. price feed upload icon)
.ui-accordion-header.ui-state-default, .ui-tabs-nav .ui-state-default, .ui-widget.ui-button, .yearpicker-items {
    background: #626262 none;
    font-size: @fontsize-header-sm;
    font-weight: normal;
    border-radius: 0;
}

.yearpicker-items {
    border: 1px solid @color-info-bg;
    padding: 1px;
    color: @color-info-bg;
}

.yearpicker-items:hover {
    background: #80CBD0;
    color: @color-info-bg;
}

.yearpicker-items.selected {
    background: @color-container-background;
    color: @color-info-bg;
}

.ui-accordion-header:focus {
    outline: none;
}

/*Sub-tabs main color*/
.ui-state-default, .ui-widget-content .ui-state-default, .ui-widget-header .ui-state-default {
    //background: #ff001d;
    font-weight: normal;
}

/*Sub-tabs hover color*/
.ui-tabs-nav .ui-state-default.ui-state-hover  {
    background: @color-hover none;
    border-color: @color-hover;
}

.ui-tabs-nav .ui-state-default.ui-state-active {
    background: #0AA0AA none;
    a {
        color: @color-container;
    }
}

// Make active elements behave (have color) like default elements - start.
.ui-state-active a, .ui-state-active a:link, .ui-state-active a:visited {
    color: @color-container;
}

.ui-accordion-content {
    border-radius: 0;
    &.overflow-visible {
        overflow: visible;
    }
}
// Make active elements behave (have color) like default elements - end.

/********************************************************
** Style for accordions and tabs - END
*********************************************************/


/********************************************************
** Style for con-datatable - BEGIN
*********************************************************/

//Class consisting of properties and mixins (the use of other classes)
.con-datatable {
    width: 100%;
    border-collapse: collapse;

    th {
        border: none;
        padding: @table-padding;
        font-weight: bold;
        background: none;
        vertical-align: bottom;
        text-align: left;
        >span {
            display: inline-block;
            vertical-align: middle;
            height: @line-height;
        }
        .con-table-unit {
            display: block;
            font-weight: normal;
            color: #737373;
        }
        input[type="checkbox"] {
            margin: 1px 0;
        }
        label {
            font-weight: bold;
            padding: 1px;
            margin: 0;
        }
        &.sort {
            cursor: pointer;
            &.asc, &.desc {
                border-bottom: 3px solid @color-border;
                padding-bottom: 3px;
            }
        }
    }
    > thead > tr {
        .con-divider;
    }
    > tbody > tr {
        /*line-height: 32px;*/
        .con-divider;
        &:hover {
            background-color: @color-hover-table;
        }
        > td {
            vertical-align: top;
            padding: @table-padding;
            > input[type="checkbox"], > input[type="radio"], > label {
                margin: 3px 0;
            }
            > .radio-inline {
                margin-top: -2px;
            }
            > input[type="text"] {
                margin-top: -2px;
                margin-bottom: -2px;
            }
            > .con-btn-small {
                margin-top: -5px;
                margin-bottom: -2px;
            }
            > i {
                padding: 0 5px;
            }
        }
        > .fit-to-content {
            width: 1%;
            white-space: nowrap;
        }
    }
}

.con-datatable-wrap-word {
    overflow-wrap: break-word;
    table-layout: fixed;
}

.con-datatable-compact {
    > thead > tr > th {
        padding-top: 0;
        padding-bottom: 0;
    }
    > tbody {
        > tr {
            border-bottom: none;
            > td {
                padding-top: 0;
                padding-bottom: 0;
            }
        }

        > tr.con-total {
            border-top: 1px solid #b5b5b5;
        }

        > tr.con-total td {
            padding-top: 5px;
        }
    }
}
.con-datatable-no-hover {
    > tbody > tr {
        &:hover {
            background-color: @color-header-background;
        }
    }
}
.con-datatable-no-last-line {
    > tbody > tr:last-child {
        border-bottom: none;
    }
}

//Used when other none tables don't use this compatct class and the padding is off.
//Use ONLY if other tables can't be fixed.
.con-no-padding {
    > thead > tr > th {
        padding-left: 0;
        padding-right: 0;
    }
    > tbody > tr > td {
        padding-left: 0;
        padding-right: 0;
    }
}

//Override of datatables filter input
.dataTables_filter {
    margin-bottom: 10px;
}

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

.align-right {
    text-align: right;
}
//Conscius divider
.con-divider {
    border-bottom: solid 1px lightgrey;
}

/********************************************************
** Style for con-datatable - END
*********************************************************/


/********************************************************
** Style for consciusmonthpicker - BEGIN
*********************************************************/
.month-picker {
    .mixin-dialog;
    z-index: @z-index-popup;
    .month-picker-header {
        .mixin-dialog-header;
        margin: 0;
        .ui-button {
            color: #ffffff;
            background: none;
            border: none;
            font-weight: normal;
            cursor: pointer;
        }
        .ui-button-icon{
            position: absolute;
            top: 50%;
            left: 50%;
            margin-top: -8px;
            margin-left: -8px;
            background-image:url(../../lib/jquery-ui-1.13.1.custom/images/ui-icons_626262_256x240.png);
        }
        .ui-button-icon:hover {
            background-image:url(../../lib/jquery-ui-1.13.1.custom/images/ui-icons_0AA0AA_256x240.png);

        }
    }
    .month-picker-year-table .ui-button-text {
        padding: 0;
    }

    .ui-button:hover{
        background: @color-hover;
    }

    .month-picker-month-table .ui-state-active {
        background: #0aa0aa;
        font-weight: bold;
        color: @color-container;
    }



    .ui-state-highlight{
        background: #FDECBF;
    }
}

/********************************************************
** Style for consciusmonthpicker - END
*********************************************************/



/********************************************************
** Tooltip Classes - BEGIN
*********************************************************/
body .ui-tooltip {
    border: 1px solid #999;
    background: none #f7f7f7;
    padding: 2px 6px;
}
/********************************************************
** Tooltip Classes - END
*********************************************************/



/********************************************************
** Validation Classes - BEGIN
*********************************************************/
.tooltipster-base {
    .mixin-shadow;
}

.tooltipster-light {
    border: @input-border;
    background: @color-addon-bg;
    color: @color-button-text;
}
.tooltipster-light .tooltipster-content {
    font-size: @fontsize-header-lg;
    line-height: 16px;
    padding: 6px 10px;
}
/********************************************************
** Validation Classes - END
*********************************************************/



/********************************************************
** Help Classes - BEGIN
*********************************************************/
.con-float-right {
    float: right;
}
.con-float-left {
    float: left;
}
.con-align-center, th.con-align-center { // NOSONAR TBA Necessary with overqualified th.con-align-center
    text-align: center;
}
.con-align-left, th.con-align-left { // NOSONAR TBA Necessary with overqualified th.con-align-left
    text-align: left;
}
.con-align-right, th.con-align-right { // NOSONAR TBA Necessary with overqualified th.con-align-right
    text-align: right;
}
.con-nowrap {
    white-space: nowrap;
}
.con-small-margin-left {
    margin-left: @small-margin;
}
.con-xs-width {
    width: 47px;
}
.con-s-width {
    width: 100px;
}
.con-m-width {
    width: 200px;
}
.con-l-width {
    width: 300px;
}
.con-xl-width {
    width: 400px;
}
.con-capitalize {
    text-transform: capitalize;
}
.con-fontsize-lg {
    font-size: @fontsize-header-lg;
}

//Conscius divider til deling af elementer fx i salgsbilledet
.con-divider {
    border-bottom: solid 1px @color-border;
}

.con-overflow-y-auto {
    overflow-y: auto;
}
/********************************************************
** Help Classes - END
*********************************************************/



/********************************************************
** Truncate Classes - BEGIN
*********************************************************/
th.con-truncate, td.con-truncate {
    max-width: 1px;
}
.ui-tabs .ui-tabs-anchor,
.con-truncate {
    overflow: hidden;
    white-space: nowrap;
    text-overflow: ellipsis;
}
.ui-tabs-nav a {
    max-width: 200px;
}
/********************************************************
** Truncate Classes - END
*********************************************************/



 /********************************************************
** Login Classes - BEGIN
*********************************************************/
.login-container {
    border: 1px solid @color-border;
    background-color: #ffffff;
    min-height: 182px;
    margin: 200px auto;
    padding-left: 30px;
    padding-top: 40px;
    width: 482px;
    box-sizing: border-box;
}
/********************************************************
** Login Classes - END
*********************************************************/



/********************************************************
** Classes that overwrits Bootstrap style - BEGIN
** should be in midas.css, but because of the hierarchy it is not possible
*********************************************************/
.new-product-period label {
    font-weight: normal;
}

a:focus {
    outline: none;
}
/********************************************************
** Classes that overwrits Bootstrap style - END
*********************************************************/

/********************************************************
** Validation Classes - BEGIN
*********************************************************/
.mixin-tooltipster {
    border: @input-border;
    .tooltipster-content {
        font-size: @fontsize-standard;
        line-height: 16px;
        padding: 6px 10px;
        white-space: pre-line;
    }
}

.tooltipster-error {
    .mixin-tooltipster;
    border-color: @color-error-border;
    background: @color-error-bg;
    color: @color-error-text;
}

.tooltipster-warning {
    .mixin-tooltipster;
    border-color: @color-warning-border;
    background: @color-warning-bg;
    color: @color-warning-text;
}

.tooltipster-generic {
    .mixin-tooltipster;
    border-color: @textcolor-standard;
    background: @color-header-background;
    color: @textcolor-standard;
}

.tooltipster-arrow-left {
    margin-left: 1px;
}

.tooltipster-arrow-right{
  margin-left: -1px;
}
/********************************************************
** Validation Classes - END
*********************************************************/

/********************************************************
** Tree table - START
*********************************************************/

.mixin-treetable {
    font-family: FontAwesome; // NOSONAR TBA valid with only one family
    position: relative;
    top: 1px;
    left: -7px;
    font-size: 14px;
    color: @textcolor-standard;
}

.treetable .collapsed .indenter a:after {
    .mixin-treetable;
    content: "\f0da";
}

.treetable .expanded .indenter a:after {
    .mixin-treetable;
    content: "\f0d7";
}

.con-datatable.treetable tr:hover {
    background-color: @color-hover;
}

.treetable .parent {
    background-color: #ffffff;
}

.treetable .parent.con-state-warning {
    background-color: @color-warning-bg;
    color: @color-warning-text;
}

.treetable .customer-name {
    max-width: 250px;
}

.treetable .address {
    max-width: 200px;
}
/********************************************************
** Tree table - END
*********************************************************/

/********************************************************
** Help dialog - START
*********************************************************/
.help-icon {
    float: right;
    margin-top: 3px;
}

.help-icon-dialog {
    margin-right: 30px;
}
.help-icon-dialog:hover {
    color: @color-hover;
}

.help-dialog {
    p:first-child {
        margin-top: 0;
    }
    .header {
        border-bottom: 1px solid @color-border;
        font-weight: bold;
    }
    .header + p {
        margin-top: 0;
    }
    ul {
        margin: 1em 0; //Same as <p>
        li {
            margin-left: 15px;
            .name {font-style: italic;}
        }
    }
}
/********************************************************
** Help dialog - END
*********************************************************/