// Copyright 2016 - 2019 Ellucian Company L.P. and its affiliates.
@import "variables.less";
@import "global.less";
@import "form.less";
@import "bootstrap/variables.less";
@import "bootstrap/mixins.less";

@secondary-color: #026BC8;
@form-title-color: @secondary-color;
@form-title-color: @secondary-color;
@link-active-bg: @body-bg;
@light-color: #ddd;
@dark-color: #222;

@card-active-bg: @body-bg;
@card-area-bg: #ddd;
@card-color: #222;

@border-color: @border-common;
@text-color: #333333;
@bar-graph-border: #CB0004;
@privacy-warning: @bar-graph-border;
@bar-graph-text: #013563;
@black-color: #4F585F;
@progress-bar-background-color: #f5f5f5;
@progress-bar-border-color: #013563;
@progress-bar-failure-color: #FCE3DD;
@nav-bar-color: #5353D1;

@badge-background: #ffdb72;
@context-diable-bg: #c2c2c2;
@round-corner: #6f6f6f;
@box-shadow: #EFEFEF;
@card-panel: #E8E3E3;
@card-warning: #FFFEEA;
@input-shadow: #e2e2e2;
@warning-shadow: #E0D397;
@warning-border: #C29100;
@border-common: #999;
@button-hover-common: #f0f6f5;
@action-shadow: #bedcd8;
@btn-border: #797979;
@instruct-border: #0255A0;
@btn-text-hover: #2d544f;
@gray-common: #666;
@active-card: darken(@secondary-color, 10%);
@result-hover: #CEE7FF;
@icon-fill: #869FB1;
@gray-disabled: #d0d0d0;
@gray-disabled-text: #6C6C6C;

@sidebar-icon-color: #d5d5d5;
@misc-border: #dcdcdc;
@require-border: #de1c5a;
@dot-warning: #b83b3b;
@instruction-bg: #b0cfd9;
@instruction-text: #013D72;
@instruction-msg-bg: #ebfbfd;
@modal-footer: #cfe5e2;
@modal-footer-border: #cfe5e2;
@blue-border-light: #BECCD9;
@blue-border-dark: #8CC1BA;
@theme-preview: #5353D1;
@theme-preview1: #326DB2;
@theme-preview2: #D48012;
@theme-preview3: #308432;
@theme-preview4: #852222;
@card-disabled: #014886;
@multi-editor-border: #80DEFC;
@preference-red-color: #C00;
@privacy-warning-color: #A61D20;

@primary-color: #1F2F5f;
@university-default: #1F2F5f;

@navbar-default-bg: @primary-color;
@nav-bar-color: @primary-color;
@primary-border: darken(@primary-color, 10%);
@selected-bg: lighten(@primary-color, 63%);
@hover-bg: lighten(@selected-bg, 20%);
@primary-highlight: lighten(@primary-color, 15%);
@primary-slection: lighten(@primary-color, 15%);
@navbar-default-border: darken(@navbar-default-bg, 6.5%);
@navbar-default-link-active-color: darken(@navbar-default-bg, 6.5%);
@navbar-default-toggle-hover-bg: darken(@navbar-default-bg, 10%);

@font-color: @nav-bar-color;

//region Custom Field Sequence Colors

@sequence-order-color: #025095; //Same as active card color
@first-field-color: #C00; // Same as preference red color
@last-field-color: #C00; // Same as preference red color
@container-background-color: #BEDCD8; // Same as action shadow
@container-dropdown-color: #000;
@container-text-disabled-color: #999;

@context-card-bg: lighten(@primary-color, 40%);

//endregion Custom Field Sequence Colors

// Theme Editor Variables
@signInBackground: ~'../assets/sign-in-background.jpg';
@signInLogo: ~'../assets/sign-in-logo.png';
@headerLogo: ~'../assets/header-logo.png';
@primary-color-focus: #0074DB;
@primary-color-light: @result-hover;
@action-color: #0074DB;
@action-hover-color: #005FB3;
@action-hover-border: #4DABFF;
@secondary-color-active: #C0E1FE;

// Text color overrides for calendar widget previous and next month dates for accessibility
.myDpNextMonth, .myDpPrevMonth {
    color: #767676 !important;
}

.action-button {
    color: @action-color  !important;
    border-color: @action-color  !important;
    outline: none !important;
}

.btn-group .btn {
    color: @action-color  !important;
    border-color: @action-color  !important;
}

.btn-default:hover,
.btn-default:focus,
.btn-default:active {
    background-color: @action-color  !important;
    color: #FFFFFF !important;
}

input[type=text]:focus {
    border: 2px solid @primary-border;
    outline: none !important;
}

.popover {
    width: auto !important;
    max-width: none;
    border-radius: 0px;
}

.context-chain {
    background-color: #d0d0d0;
    margin-left: 45px;
}

.person-details tr:last-child td {
    padding-top: 0px;
    padding-bottom: 2px;
}

.person-details>tbody>tr>td {
    padding: 0px;
}

.popover-content {
    padding: 0px 15px;
}

table.borderless.person-details.selected {
    background: #FF0000;
}

.btn-position {
    margin: 3rem 0rem 0rem 0rem;
}

.input-prepend {
    position: relative;
}

.valcode-icon {
    background-image: url("../assets/dropdown.svg");
    display: inline-block;
    max-width: 25px;
    max-height: 100%;
    background-size: 100% 100%;
    vertical-align: middle;
}

.valcode-add-on {
    width: 10px;
    height: 7px;
    position: absolute;
    z-index: 2;
    top: 8px;
    cursor: pointer;
}

input:required,
select:required {
    border: 1px solid #DE1C5A;
    margin-left: 0px;
}

input[readonly] {
    background-color: #EEE;
    opacity: 1;
    cursor: not-allowed;
}

.form-tab-scaling {
    height: 29px !important;
    top: 56px !important;
    overflow: hidden !important;
}

.form-title-area .btn-sm {
    font-size: 13px;
    color: #555;
}

.form-title-area .text-primary {
    font-size: 16px;
    text-decoration: none;
}

.calculatorInputHide {
    width: 0;
    margin: -1px;
    padding: 0;
    border: 0;
    visibility: hidden;
}

.valcodetext-position {
    position: absolute;
    //width: 150px;
}

.inquiry-field {
    margin-top: -19px;
}

//Button Progress Bar Start
.progress-button {
    display: inline-block;
    font-size: 24px;
    text-decoration: none !important;
    padding: 14px 60px;
    line-height: 1;
    overflow: hidden;
    position: relative;
    box-shadow: 0 1px 1px #ccc;
    border-radius: 2px;
}

/* Hide the original text of the button. Then the loading or finished
   text will be shown in the :after element above it. */

.progress-button.in-progress:after,
.progress-button.finished:after {
    position: absolute;
    z-index: 2;
    width: 100%;
    height: 100%;
    text-align: center;
    top: 0;
    padding-top: inherit;
    left: 0;
}

/* If the .in-progress class is set on the button, show the
   contents of the data-loading attribute on the butotn */

.progress-button.in-progress:after {
    content: attr(data-loading);
}

/* The same goes for the .finished class */

.progress-button.finished:after {
    content: attr(data-finished);
}

/* The colorful bar that grows depending on the progress */

.progress-button .tz-bar {
    background-color: #CDE5E2;
    height: 3px;
    bottom: 0;
    left: 0;
    width: 0;
    position: absolute;
    z-index: 1;
    border-radius: 0 0 2px 2px;
    -webkit-transition: width 0.5s, height 0.5s;
    -moz-transition: width 0.5s, height 0.5s;
    transition: width 0.5s, height 0.5s;
}

/* The bar can be either horizontal, or vertical */

.progress-button .tz-bar.background-horizontal {
    height: 100%;
    border-radius: 2px;
}

.progress-button .tz-bar.background-vertical {
    height: 0;
    top: 0;
    width: 100%;
    border-radius: 2px;
}

// Button Progress Bar End

.cliackable {
    cursor: pointer;
}

.logout-button {
    cursor: pointer;
}

.popover-content {
    max-height: 90vh;
    overflow-y: auto;
    overflow-x: hidden;
}

.search-popover-content {
    max-height: 75vh;
    overflow-y: auto;
    overflow-x: hidden;
}

.windowControl {
    width: 925px !important;
    height: 35px !important;
    padding-top: 5px;
}

.window-control-paging-jump {
    width: 35px !important;
    padding: 2px 5px;
    border: 1px solid #999999;
    border-radius: 0.429em;
    box-shadow: inset 2px 2px 0 0 #efefef;
    -webkit-transition: all 0.1s ease-in-out;
    -moz-transition: all 0.1s ease-in-out;
    -o-transition: all 0.1s ease-in-out;
    transition: all 0.1s ease-in-out;
    font-size: 10px;
}

.popupHeader {
    font-family: inherit;
    padding: 0;
    margin: 0;
    font-weight: 500;
    line-height: 1.1;
    color: inherit;
}

.person-card {
    border-bottom: 1px solid #999;
    border-right: none;
}

button.person-card {
    display: block;
    border: none;
    border-bottom: 1px solid #999;
    width: 100%;
    margin: 0;
    padding: 0;
    cursor: default;
    background-color: transparent;
}

button.person-card:focus,
[person-navigation] [selectable]:focus {
    border: 1px solid @primary-color  !important;
    outline-color: @primary-color auto 1px !important;
}

.form-area-section {
    position: relative;
    top: -1em;
}

.navigation-help {
    margin-top: -10px;
    margin-right: 10px;
}

.card-image {
    max-width: 60px;
    max-height: 60px;
    display: inline-block;
    margin: 0px;
    padding: 0px;
    vertical-align: top;
    border-radius: 40px;
    border: 1px solid #fff;
    margin-top: -5px;
}

.browseMenuText {
    font-weight: bold;
    font-size: 100% !important;
}

/*
 *Dragging css for person grid view
 *
 */

.dragtable-drag-handle {
    cursor: move;
}

.dragtable-drag-wrapper {
    display: none;
}

/*
.dragtable-col-placeholder {is
   border-left: 1px dotted black;
   border-right: 1px dotted black;
   color:#EFEFEF;
   background: #EFEFEF !important;
   visibility: visible !important;
}
table .dragtable-col-placeholder:first{
   border-top:1px dotted black;
}

.dragtable-col-placeholder * {
   opacity: 0.0;
   visibility: hidden;
}
*/
.form-Mnemonic-title-separation {
    border: 1px solid #B9B9B9;
    background-color: #B9B9B9;
    border-radius: 5px;
    height: 7px;
    width: 7px;
    display: inline-block;
    vertical-align: middle;
    margin-top: -4px;
}

.form-inactive {
    color: #999 !important;
}

.activeForm-title-separation {
    border-right-color: rgb(204, 204, 204);
    border-right: 2px solid #999;
}

.form-title-spacing {
    padding: 5px;
    padding-right: 2px;
}

button.person-card {
    display: block;
    border: none;
    border-bottom: 1px solid #999;
    width: 100%;
    margin: 0;
    padding: 0;
    cursor: default;
    background-color: transparent;
}

/* Shared List begins */

#shared-list-dialog #shared-list-dialog-label {
    color: #4F585F;
    font-size: 18px;
    padding: 2px 0 19px 23px;
    display: inline-block;
}

#shared-list-dialog .shared-list-subheader {
    color: #4F585F;
    font-size: 14px;
    padding: 0 23px;
}

#shared-list-dialog .shared-list-subheader hr {
    margin: 10px 0;
}

#shared-list-dialog .round-context-icon.favorites-icon {
    color: #026BC8 !important;
    border: 2px solid #026BC8 !important;
    width: 21px !important;
    height: 21px !important;
    margin-right: 10px;
    top: -3px;
    position: relative;
}

.recent {
    color: #026BC8 !important;
    font-weight: bold;
    font-size: 14px;
    margin: 3px 10px 0 0;
}

#shared-list-dialog .round-context-icon.favorites-icon .material-icons.md-18 {
    position: relative;
    top: -4px;
    left: -1px;
}

.shared-list-content {
    text-align: center;
}

.shared-list-content span {
    font-size: 13px;
    color: #283036;
    margin-bottom: 120px;
    display: inline-block;
}

.shared-list-content .material-icons {
    border: 2px solid #4EC76A;
    color: #4EC76A;
    border-radius: 50%;
    padding: 5px;
    margin: 46px 0 35px;
    font-size: 35px;
}

/* Shared List ends */

/* recently created shared list starts */
#recently-shared-lists {
    .modal-header {
        border-bottom: 1px solid #E2E2E2 !important;
    }

    .modal-body {
        padding: 15px 18px 25px 18px;
    }

    .modal-footer {
        .btn {
            width: 100%;
        }
    }
}

/* recently created shared list ends */

.rightBorder {
    position: fixed;
    top: 35px !important;
    margin-top: 0px;
    width: 1px;
    background-color: lighten(@navbar-default-bg, 40%);
    height: 100%;
    z-index: 999;
    display: block;
    margin-left: 1008px;
}

//textarea[readonly] {
//background-color: #efefef !important;
//}

#waitDiv {
    /* Do not display it on entry */
    display: none;
    /* Display it on the layer with index 1051.
Make sure this is the highest z-index value
used by layers on that page */
    z-index: 1051;
    /* make it cover the whole screen */
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    /* make it white but fully transparent */
    background-color: transparent;
}

#waitDiv div {
    position: relative !important;
    top: 30%;
    //left: 37%;
    background-color: #FFFFFF;
    border: 1px solid #555;
    border-radius: 6px;
    width: 500px;
    color: black;
    margin: auto;
    box-shadow: 0 19px 20px 0 rgba(0, 0, 0, 0.5);
}

#waitDiv textarea {
    background-color: transparent;
    color: black;
    font-size: 1.1em;
    border: none;
    outline: none !important;
    text-align: center;
    width: 100%;
    resize: none;
    overflow: hidden;
    -webkit-appearance: none;
}

.btn-stop-waiting {
    background-color: #D42828 !important;
    border-color: #D42828 !important;
    box-shadow: none !important;
    border-radius: 22px !important;
    font-weight: normal !important;
}

.btn-cancel-person-search {
    box-shadow: none !important;
    border-radius: 22px !important;
    font-weight: normal !important;
}

body {
    font-family: 'open_sansregular', 'Open Sans', Helvetica, Arial, sans-serif !important;
    font-size: 14px;
    min-width: 1024px;
    color: #000 !important;
    -webkit-text-size-adjust: 100%;
}

.universityDefault {
    background-color: @university-default;
}

.status-message {
    height: 20px;
    display: block;
    margin-bottom: 20px;
    padding-left: 10px;
    margin-left: -15px;
    font-size: 15px;
}

.left-title-field {
    left: -35px !important;
    top: -5px !important;
    width: 650px !important;
}

.left-title-field-link {
    text-decoration: none;
    cursor: default;
    //color: @primary-color !important;
}

.left-title-field-link:hover {
    text-decoration: none;
    cursor: text;
    color: @primary-color  !important;
}

.favoritesOptions:focus {
    border: 2px solid @secondary-color;
}

.favoritesOptions {
    line-height: 0;
}

.left-title-field-link:focus {
    text-decoration: none;
    cursor: text;
    color: @primary-color  !important;
}

.imageNow_area {
    visibility: collapse;
    display: none;
    font-family: Arial;
    font-size: 12px;
}

// IE Clear Input Remove.
input::-ms-clear {
    display: none;
}

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

.readonly-input-disabled {
    color: #000 !important;
    background-color: khaki !important;
}

html,
body {
    height: 100%;
}

.icon-fill {
    fill: lighten(@primary-color, 50%);
}

.search-result-image-position {
    position: absolute;
    left: 25px;
    top: 5px;
}

.search-result-index-position {
    position: absolute;
    left: 5px;
    top: 20px;
}

.horizontal-line {
    border-bottom: 1px solid #999;
}

.vertical-line {
    border-right: 1px solid #999;
}

.double-horizontal-line {
    border-bottom: 2px solid #999;
}

.icon-stroke {
    stroke: lighten(@primary-color, 50%);
}

.navbar-product {
    font-size: 75%;
}

.dbPasswordChangeLabel {
    padding-top: 10px;
}

.container {
    width: 1024px !important;
    position: relative;
    top: -20px;
    z-index: 1;
}

.close-popover-icon {
    margin-top: 3px;
}

.col-sm-12 {
    width: 1024px;
}

.sidebar.hidden-xs {
    display: block !important;
}

.dialog-prompt-password {
    -webkit-text-security: disc;
}

@media (min-width: 768px) {
    .navbar-right .dropdown-menu {
        left: auto;
        right: 0;
    }

    ul.dropdown-menu-right {
        width: 350px;
        margin-top: -10px;
    }
}

/* Val code styles*/
.dropdown-menu_ul {
    max-height: 200px !important;
    overflow-y: auto !important;
    overflow-x: hidden !important;
    font-size: 11.5px !important;
}

.dropdown-menu_ul li {
    margin-left: -10px !important;
}

.dropdown-menu_ul li a:hover,
.dropdown-menu_ul li a:focus {
    background-color: lighten(@secondary-color, 45%) !important;
}

.dropdown-toggle_btn,
.dropdown-toggle_btn:focus {
    width: 0px !important;
    height: 0px !important;
    z-index: -10 !important;
    border: none !important;
    background: none !important;
    cursor: default !important;
    display: block;
}

@media (min-width: 320px) {
    .navbar-collapse.collapse {
        display: block !important;
        height: auto !important;
        padding-bottom: 0;
        overflow: visible !important;
        width: 1024px;
    }

    .navbar-toggle.collapsed {
        display: none !important;
    }

    .navbar-header {
        float: left !important;
    }

    .navbar-nav {
        float: left !important;
        margin-left: -85px !important;
    }

    .navbar-nav>li {
        float: left !important;
    }

    .navbar-right {
        float: right !important;
    }

    .navbar.navbar-default.navbar-fixed-top {
        position: fixed;
    }

    .navbar.navbar-default.navbar-fixed-top .container {
        width: 1024px;
        padding: 0;
        background: @nav-bar-color;
        top: 0 !important;
        height: 35px;
    }

    .nav-justified {
        color: @primary-color;
    }

    #rightTitleField {
        color: #000000 !important;
    }

    #rightTitleField:hover {
        color: @primary-color  !important;
    }

    .navbar-default .navbar-nav .open .dropdown-menu>li>a {
        color: @nav-bar-color;
    }

    .navbar-default .navbar-nav .open .dropdown-menu>li>a:hover {
        background: @nav-bar-color;
    }

    .navbar-nav li.first {
        border-left: 1px solid lighten(@navbar-default-bg, 40%);
        border-right: 1px solid lighten(@navbar-default-bg, 40%);
    }

    .navbar-default {
        #gradient>.vertical(@start-color: lighten(@navbar-default-bg, 10%);
            @end-color: @navbar-default-bg);
        background-color: @navbar-default-bg;
        border-color: @navbar-default-border;

        .navbar-nav>.active>a {
            #gradient>.vertical(@start-color: darken(@navbar-default-bg, 5%);
                @end-color: darken(@navbar-default-bg, 2%));
        }

        .navbar-collapse,
        .navbar-form {
            border-color: @navbar-default-border;
        }

        .navbar-nav {
            >.active>a {

                &,
                &:hover,
                &:focus {
                    color: @navbar-default-link-active-color;
                }
            }

            >.open>a {

                &,
                &:hover,
                &:focus {
                    color: @navbar-default-link-active-color;
                }
            }
        }

        .navbar-toggle {

            &:hover,
            &:focus {
                background-color: @navbar-default-toggle-hover-bg;
            }
        }
    }

    #colleague-ui {
        padding: 0 !important;
    }

    .navbar-nav.navbar-right:last-child {
        margin: 0 !important;
    }

    /*.navbar-nav .open .dropdown-menu{*/
    .dropdown-menu {
        position: absolute;
        top: 100%;
        left: 0;
        z-index: 1000;
        display: none;
        float: left;
        min-width: 160px;
        padding: 5px 0;
        margin: 2px 0 0;
        list-style: none;
        font-size: 14px;
        background-color: @body-bg;
        border: 1px solid @btn-default-border;
        border: 1px solid rgba(0, 0, 0, 0.15);
        border-radius: 4px;
        box-shadow: 0 6px 12px rgba(0, 0, 0, 0.175);
        background-clip: padding-box;
        // font-family: 'Open Sans';
    }

    .navbar-default .navbar-nav .open .dropdown-menu>li>a {
        padding-top: 10px;
        padding-bottom: 10px;
        display: block;
        clear: both;
        font-weight: normal;
        line-height: 1.42857143;
        white-space: nowrap;
    }

    .navbar-default .navbar-nav .open .dropdown-menu>li>a:hover {
        color: @body-bg;
    }

    .open>.dropdown-menu {
        display: block !important;
    }

    .person-details {
        overflow: hidden;
        min-height: 75px;
        max-width: 980px;
        cursor: pointer;
    }

    .person-details .row .col-lg-1 {
        width: 8.33%;
        float: left;
    }

    .person-details .row .col-lg-10 {
        width: 83.33%;
        float: left;
    }

    @media screen and (-ms-high-contrast: active),
    (-ms-high-contrast: none) {

        /* IE10+ specific styles go here */
        .left-action .card-navigation-icon a.disabled,
        .right-action .card-navigation-icon a.disabled,
        .left-action .card-navigation-icon a,
        .right-action .card-navigation-icon a {
            position: relative;
            top: -50px;
        }

        //region context header positions for IE11 and Edge
        .esg-icon--right {
            transform: rotate(0deg);
        }

        .esg-icon--left {
            transform: rotate(180deg);
        }

        .esg-icon--up {
            transform: rotate(270deg);
        }

        .esg-icon--down {
            transform: rotate(90deg);
        }

        .pin-position {
            margin-left: -2px !important;
            margin-bottom: 1px !important;
        }

        .disabled-context-help-position {
            margin-left: -4.5px !important;
            margin-bottom: 3px !important;
        }

        .enabled-context-help-position {
            margin-bottom: 2px !important;
            margin-left: -4px !important;
        }

        .viewAll-enabled-position {
            margin-left: -3px !important;
        }

        .viewAll-disabled-position {
            margin-left: 1px !important;
            margin-top: 1px !important;
        }

        .context-close-disabled-position {
            margin-left: -2px !important;
        }

        .context-close-enabled-position {
            margin-left: -2px !important;
        }

        .context-favorite-disabled {
            margin-left: -5px !important;
            margin-bottom: 1px !important;
        }

        .context-favorite-enabled {
            margin-left: -4px !important;
            margin-bottom: 1px !important;
        }

        //endregion context header positions for IE11 and Edge
    }

    @-moz-document url-prefix() {
        //region context header positions for Firefox

        .pin-position {
            margin-left: -2px !important;
            margin-bottom: 1px !important;
        }

        .disabled-context-help-position {
            margin-left: -4.5px !important;
            margin-bottom: 2px !important;
        }

        .enabled-context-help-position {
            margin-bottom: 2px !important;
            margin-left: -4px !important;
        }

        .viewAll-enabled-position {
            margin-left: -3px !important;
        }

        .viewAll-disabled-position {
            margin-top: 1px !important;
        }

        .context-close-disabled-position {
            margin-left: -2px !important;
            margin-bottom: 0px !important;
        }

        .context-close-enabled-position {
            margin-left: -2px !important;
            margin-bottom: 0px !important;
        }

        .context-favorite-disabled {
            margin-left: -4.5px !important;
        }

        .context-favorite-enabled {
            margin-left: -3.5px !important;
        }

        //endregion context header positions for Firefox
    }
}

@media (min-width: 320px) {

    //Navbar
    .navbar-brand {
        padding-top: 7px;
        padding-bottom: 10px;
        height: 38px;
        text-align: left;
    }

    .navbar-nav li a {
        padding-top: 10px;
    }

    .navbar {
        min-height: 38px;
        height: 38px;
    }

    .navbar-nav li .dropdown {
        padding-top: 10px;
        padding-bottom: 10px;
    }

    .right-dropdown-toggle {
        color: @light-color;
        padding: 10px 10px;
        background-color: transparent !important;
        border: none;
        margin-top: -20px;
        height: 38px;
    }

    .right-dropdown-toggle:hover {
        color: @body-bg;
    }

    .right-menu-gear-icon-align {
        margin-bottom: 4px;
    }

    .right-menu-button.clickable {
        padding: 10px 30px;
        background-color: transparent !important;
        color: @navbar-default-bg;
        text-align: left;
        width: 100%;
    }

    .right-menu-button.clickable:hover {
        background-color: @navbar-default-bg  !important;
    }

    .right-menu-button.disabled {
        padding: 10px 30px;
        background-color: transparent !important;
        text-align: left;
        width: 100%;
    }

    .right-menu-button.clickable .right-text {
        color: lighten(@navbar-inverse-bg, 20%);
        display: inline-block;
    }

    .dropdown-menu-right li button.clickable:hover {
        color: @body-bg;
    }

    .dropdown-menu-right li button.clickable:hover .right-text {
        color: @body-bg;
    }

    ul.dropdown-menu li.clickable div {
        color: @navbar-default-bg;
        padding: 10px 15px;
    }

    ul.dropdown-menu li.clickable:hover div {
        background-color: @navbar-default-bg;
    }

    ul.dropdown-menu li.disabled div {
        padding: 10px 15px;
    }

    ul.dropdown-menu li.clickable div .right-text {
        color: lighten(@navbar-inverse-bg, 20%);
        display: inline-block;
    }

    ul.dropdown-menu li.clickable:hover div {
        color: @body-bg;
    }

    ul.dropdown-menu li.clickable:hover div .right-text {
        color: @body-bg;
    }

    .search-icon {
        vertical-align: middle;
        fill: @navbar-default-link-active-bg;
    }

    svg {
        vertical-align: middle;
    }

    .dropdown-toggle {
        height: 38px;
    }

    .search-input {
        width: 280px;
        // margin-left: 10px;
        border: none;
        height: 37px;
        background-color: @navbar-default-bg;
        color: @navbar-default-link-color;
        padding-left: 35px;
        font-weight: 400;
        padding-right: 40px;
    }

    .search-input.search-input-padding::placeholder {
        /* Chrome, Firefox, Opera, Safari 10.1+ */
        color: grey;
        opacity: 1;
        /* Firefox */
    }

    .search-input.search-input-padding:-ms-input-placeholder {
        /* Internet Explorer 10-11 */
        color: grey;
    }

    .search-input.search-input-padding::-ms-input-placeholder {
        /* Microsoft Edge */
        color: grey;
    }

    .search-input::placeholder {
        /* Chrome, Firefox, Opera, Safari 10.1+ */
        color: @navbar-default-link-color;
        opacity: 1;
        /* Firefox */
    }

    .search-input:-ms-input-placeholder {
        /* Internet Explorer 10-11 */
        color: @navbar-default-link-color;
    }

    .search-input::-ms-input-placeholder {
        /* Microsoft Edge */
        color: @navbar-default-link-color;
    }

    .primary-fill {
        fill: @primary-color;
    }

    .search-result-caret {
        color: @navbar-default-link-active-bg;
        width: 30px;
        display: inline-block;
        text-align: center;
    }

    // .search-result-caret .primary-fill {
    //   g {
    //      fill: @primary-color;
    //   }
    //   polygon {
    //      fill: @primary-color;
    //   }
    //   path {
    //      fill: @primary-color;
    //   }
    // }
    //  .search-result-caret .Form-and-Person-Search-History{
    //    path {
    //     fill: @body-bg;
    //   }
    //    g {
    //      fill: @body-bg;
    //   }
    //   polygon {
    //      fill: @body-bg;;
    //   }
    //  }
    [hidden] {
        display: none !important;
    }

    .search-history-caret {
        position: absolute;
        left: 260px;
    }

    .search-result-caret svg {
        margin-top: -1px;
        margin-left: -2px;
    }

    .search-results-options {
        border-style: solid !important;
        border-color: #FFFFFF !important;
        border-radius: 5px !important;
        border-width: 1px !important;
        width: 30px !important;
        height: 30px !important;
        //  padding: 0px 1px 2px 1px;
    }

    .search-results-options:hover,
    .search-results-options:focus {
        background-color: @body-bg;
        border: 1px solid @body-bg;
    }

    .search-results-options .Form-and-Person-Search-Results {
        fill: @body-bg;
    }

    .active-btn-Search-Results {
        background-color: @body-bg  !important;
        border: 1px solid @body-bg  !important;
    }

    .search-results-options:hover .Form-and-Person-Search-Results,
    .search-results-options:focus .Form-and-Person-Search-Results {
        fill: @primary-color;
    }

    .search-results-options .active-Form-and-Person-Search-Results {
        fill: @primary-color  !important;
    }

    .active-Form-and-Person-Search-Results {
        fill: @primary-color  !important;
    }

    .search-history-arrow {
        margin-left: 0px;
        // position: absolute;
    }

    .search-result-caret .Form-and-Person-Search-History {
        fill: @body-bg;
    }

    .search-input:focus .Form-and-Person-Search-History {
        fill: @primary-color  !important;
    }

    .search-result-caret:hover,
    .search-result-caret:focus {
        color: @navbar-default-link-active-bg;
        cursor: pointer;
    }

    .search-result-fixed-content {
        max-height: 78vh;
        overflow-y: auto;
        overflow-x: hidden;
    }

    .btn-advanced-search:focus,
    .btn-advanced-search:hover {
        background-color: @body-bg;
        border: 1px solid @body-bg;
        color: @nav-bar-color;
    }

    .advancedSearchActive {
        background-color: @body-bg  !important;
        border: 1px solid @body-bg  !important;
        color: @nav-bar-color  !important;
    }

    .btn-advanced-search {
        background-color: @nav-bar-color;
        border: 1px solid @body-bg;
        color: @body-bg;
        height: 30px;
        border-radius: 4px;
        margin-right: 5px;
        font-size: 16px;
    }

    .labelCol {
        margin-bottom: 0px !important;
    }

    .inputField {
        width: 100% !important;
    }

    .search-input:focus {
        color: @navbar-default-bg;
        background-color: @navbar-default-link-color;
    }

    .search-link {
        //border-right: 1px solid lighten(@navbar-default-bg,40%);
        color: @navbar-default-link-color;
        padding-left: 20px;
    }

    .searchTypeMenu {
        background-color: @body-bg;
    }

    .searchTypeMenuTitle {
        min-width: 50px;
        display: inline-block;
    }

    .searchTypeMenu li a {
        color: @navbar-default-bg;
    }

    .searchTypeMenu li a:hover {
        color: @navbar-default-link-hover-color;
        background-color: @navbar-default-bg;
    }

    .navbar-gear {
        background-color: darken(@navbar-default-bg, 6.5%);
        border-right: none !important;
        height: 38px;
    }

    .right-dropdown-toggle:focus {
        background-color: #fff !important;
    }

    .right-dropdown-toggle:focus #settings {
        fill: @navbar-default-bg;
    }

    .notification-badge {
        background-color: @badge-background;
        border-right: none !important;
        height: 38px;
    }

    .search-result-open-button {
        margin-top: 1px !important;
    }

    //Sidebar
    .sidebar {
        position: fixed;
        top: 35px !important;
        margin-top: 0px;
        width: 50px;
        margin-left: -15px;
        background-color: @navbar-inverse-link-disabled-color;
        height: 100%;
        z-index: 999;
    }

    .sidebar li a:hover {
        background-color: @navbar-default-bg;
    }

    .sidebar li a {
        color: @navbar-default-color;
        padding: 12px;
    }

    .side-focusable:focus {
        border-right: 1px solid lighten(@navbar-default-bg, 40%);
        border-left: 1px solid lighten(@navbar-default-bg, 40%);
    }

    //Context-Area
    .context-area {
        background-color: @context-diable-bg;
        margin-left: 50px;
        min-height: 102px;
        max-height: 102px;
        padding-left: 0px;
        padding-right: 0px;
        width: 973px;
        margin-top: -1px;
    }

    .context-manager {
        right: -260px;
        width: 920px;
        color: #000000;
        vertical-align: top;
        position: absolute;
        background-color: #fff;
        padding-top: 5px;
        padding-left: 15px;
        padding-right: 15px;
        z-index: 1060;
        overflow-x: hidden;
        overflow-y: hidden;
        max-height: 800px;

        .context-manager-header {
            padding: 5px 0;
        }

        .context-manager-body {
            overflow-x: hidden;
            overflow-y: scroll;
            max-height: 650px;
        }

        .context-manager-card {
            padding: 0 0 10px 0;
            cursor: pointer;

            .contextCardImage {
                margin-top: -8px;
                margin-left: 10px;
            }

            .contextCardName {
                display: inline-block;
                color: @nav-bar-color;
                width: 150px;
                white-space: nowrap;
                overflow: hidden !important;
                text-overflow: ellipsis;
            }

            .contextCardid {
                color: #000000;
            }
        }

        .card-record {
            min-height: 95px;
        }

        #select-number {
            width: 60px;
            border-radius: 4px;
        }

        .context-pager .btn-form-action {
            width: 60px !important;
        }

        .btn-form-action {
            height: 25px !important;
        }

        #btnContextManagerOpen {
            width: 60px !important;
        }

        .card-count {
            width: 150px;
            text-align: center;
            background: @btn-default-border;
            color: #000000 !important;
        }

        .helpicon {
            margin-right: 20px;
        }

        #btnContextManagerFavorites {
            width: 75px !important;
        }

        .selected {
            background-color: @primary-slection;

            .contextCardName {
                color: #000;
            }
        }

        #selectAllContextCards {
            width: 18px !important;
        }
    }

    .main-container {
        margin-top: 59px;
    }

    .card-column {
        margin-left: 5px;
        margin-right: 5px;
        padding-left: 0px;
        padding-right: 0px;
        display: inline-block;
    }

    .round-context-icon.context-tag>.fa {
        -ms-transform: rotate(35deg);
        -webkit-transform: rotate(35deg);
        transform: rotate(35deg);
        padding-top: 4px;
        padding-left: 2px;
    }

    .left-action .round-context-icon.context-tag {
        background-color: @navbar-default-bg;
    }

    .left-action .round-context-icon.context-tag.autoClose path {
        color: @body-bg;
    }

    .left-action .round-context-icon.context-tag.autoCloseContext {
        background-color: @body-bg;
    }

    .round-context-icon.context-tag.autoCloseContext.autoClose path {
        fill: #000000;
    }

    .left-action {
        float: left;
        width: 25px;
        min-height: 102px;
        max-height: 102px;
        margin-left: 10px;
    }

    .right-action {
        float: right;
        width: 25px;
        min-height: 102px;
        max-height: 102px;
        margin-right: 10px;
    }

    .right_action_button_selected {
        background-color: lighten(@navbar-inverse-bg, 40%);
        width: 32px;
    }

    .right-action.right-action-icon {
        margin-right: 13px;
    }

    .card-area {
        margin-left: 65px;
        margin-right: 65px;
        padding-top: 5px;
    }

    .card-area .card.keepOpen {
        border: 1px solid @navbar-default-bg;
        background-color: @context-card-bg  !important;
    }

    .card-area .card:nth-child(1) {
        z-index: 3;
        margin-left: 11px;
        background: @box-shadow;
    }

    .card-area .card:nth-child(2) {
        z-index: 2;
        margin: 0 0 0 0;
        background-color: @body-bg;
        margin-left: 5px;
        margin-right: 5px;
        margin-top: -80px;
    }

    .card {
        background-color: @navbar-default-link-active-bg  !important;
        height: 100%;
        min-height: 86px;
        max-height: 86px;
        font-size: 100%;
        border: 1px solid @btn-default-border;
        position: relative;
        width: 826px;
    }

    .card-back-panel {
        background-color: @card-panel  !important;
        margin-top: -80px;
        margin-left: 20px !important;
        width: 801px;
    }

    .card .table td {
        border-top: none !important;
        padding: 0 5px;
    }

    .card .table td div {
        margin-bottom: 2px;
    }

    .card .table td:first-child {
        text-align: center;
    }

    .card-pager {
        background-color: lighten(@navbar-inverse-bg, 20%);
        color: @navbar-inverse-link-active-color;
        font-size: 80%;
        padding: 2px;
        padding-left: 10px;
        padding-right: 10px;
    }

    .card-image {
        max-width: 60px;
        max-height: 60px;
        display: inline-block;
        margin: 0px;
        padding: 0px;
        vertical-align: top;
        border-radius: 40px;
        border: 1px solid @navbar-default-link-color;
        // margin-top: -5px;
    }

    .image-container-absolute {
        left: 0px !important;
        top: 0px !important;
    }

    .search-result-image-div {
        display: block;
        margin: 0 auto;
        height: 60px;
        width: 60px;
        background-size: contain !important;
    }

    .search-result-image {
        display: none;
    }

    .search-result-image-container {
        max-width: 60px;
        max-width: 60px;
        height: auto;
        position: relative;
        overflow: hidden;
        border: 1px solid @navbar-default-link-color;
        -webkit-border-radius: 50%;
        -moz-border-radius: 50%;
        -ms-border-radius: 50%;
        -o-border-radius: 50%;
        border-radius: 50%;
        left: 25px;
        top: -15px;
        background-color: #ddd;
    }

    .context-search-result-title a {
        padding-top: 5px !important;
        padding-bottom: 10px !important;
    }

    .context-search-result .selection {
        margin-right: 35px !important;
        color: #000000;
    }

    .privacy-card-view-container {
        width: 205px;
        float: left;
    }

    .privacy-card-view-result {
        width: 200px;
    }

    .privacy-card-view-item {
        width: 215px;
        text-align: left;
    }

    .privacy-card-view-message {
        width: 610px;
        margin-top: 25px;
    }

    .privacy-message-alert-danger {
        background-color: @state-danger-bg  !important;
    }

    .privacy-message-alert-danger-text {
        color: red;
    }

    .primary-data {
        color: @primary-color;
        font-size: 100%;
    }

    .text-secondary {
        color: @secondary-color;
    }

    .text-black {
        color: #000000 !important;
    }

    .fill-secondary {
        fill: @secondary-color;
    }

    .text-grey {
        color: @list-group-link-color;
    }

    .primary-data.bold {
        font-size: 15px;
        font-weight: 500;
        line-height: 1;
    }
}

.sort-icon {
    height: 12px;
    margin-top: 5px;
    cursor: pointer;
}

//Form Area
.form-area {
    background-color: #f7f7f7; //@body-bg;
    padding-left: 0px;
    padding-right: 0px;
}

.text-error {
    color: red;
}

.row-top-margin {
    margin-top: 20px;
}

.form-title-area {
    // background-color: darken(@navbar-default-link-active-bg,5%);
    height: 32px;
    padding: 5px 10px;
    border-bottom: 1px solid #c2c2c2; //darken(@navbar-default-link-active-bg,10%);
    margin-left: 50px;
    margin-right: 0.9px;
}

.form-title-area .btn.btn-default.btn-form-action {
    margin-top: 2px;
}

.form-title {
    position: absolute;
    left: 55px;
    max-width: 540px;
}

//region New button
.esg-button-style {
    //font-family: "Nunito", Helvetica, Arial, sans-serif;
    //font-style: normal;
    //font-weight: 600;
    margin: 0;
    padding: 0;
    border: 0;
    background: none;
    background-image: none;
    font: inherit;
    text-transform: none;
    cursor: pointer;
    overflow: visible;
    -webkit-appearance: none;
    -moz-appearance: none;
    appearance: none;
}

.esg-button {
    //font-family: "Nunito", Helvetica, Arial, sans-serif;
    //font-style: normal;
    font-weight: 600;
    transition: all 0.1s ease-in-out;
    -ms-touch-action: manipulation;
    touch-action: manipulation;
    -webkit-user-select: none;
    -moz-user-select: none;
    -ms-user-select: none;
    user-select: none;
    display: inline-block;
    position: relative;
    padding: 0.625rem 1.25rem 0.75rem 1.25rem;
    border: 0.0625rem solid;
    border-radius: 0.429rem;
    background-image: none;
    //font-size: .875rem;
    line-height: 1.45;
    text-align: center;
    text-decoration: none;
    text-shadow: none;
    cursor: pointer;
    vertical-align: middle;
    box-sizing: border-box;
}

.esg-button:hover,
.esg-button:focus,
.esg-button:active,
.esg-button:active:hover,
.esg-button:active:focus {
    transition: all 0.1s ease-in-out;
    text-decoration: none;
    cursor: pointer;
}

.esg-button[disabled] {
    cursor: not-allowed;
    opacity: .6;
}

.esg-button--primary,
.esg-button--primary:visited {
    // border-color: #4DABFF;
    // background-color: #0074DB;
    // color: #ffffff;
    color: #ffffff;
    background-color: @action-color;
    border-color: @action-color;
    border: 1px solid @action-color  !important;
    box-shadow: inset 0 -0.25rem 0 0 @action-color;
}

.esg-button--primary:hover,
.esg-button--primary:focus,
.esg-button--primary:active,
.esg-button--primary:visited:hover,
.esg-button--primary:visited:focus,
.esg-button--primary:visited:active {
    border-color: @action-hover-border;
    background-color: @action-hover-color;
    color: #ffffff;
    box-shadow: inset 0 -0.25rem 0 0 @action-hover-color;
}

.esg-button--secondary,
.esg-button--secondary:visited {
    // border-color: #4DABFF;
    // background-color: #0074DB;
    // color: #ffffff;
    color: @action-color;
    background-color: #FFFFFF;
    border-color: @action-color;
    border: 1px solid @action-color  !important;
}

.esg-button--secondary:hover,
.esg-button--secondary:focus,
.esg-button--secondary:active,
.esg-button--secondary:visited:hover,
.esg-button--secondary:visited:focus,
.esg-button--secondary:visited:active {
    border-color: @action-hover-border;
    background-color: @action-hover-color;
    color: #FFFFFF;
}

.esg-button--large {
    padding: 0.75rem 1.625rem 1rem 1.625rem;
    font-size: 1rem;
}

.esg-button--xlarge {
    padding: 0.75rem 1.625rem 1rem 1.625rem;
    font-size: 1.125rem;
}

.esg-button--small {
    padding: 0.4375rem 1rem 0.5625rem 1rem;
    font-size: .75rem;
}

.esg-button--fluid {
    display: block;
    width: 100%;
}

//endregion

.btn-form-action.btn-cancel-all {
    position: absolute;
    right: 30px;
    font-weight: normal !important;
}

.btn-form-action.btn-cancel {
    position: absolute;
    right: 110px;
    font-weight: normal !important;
}

.btn-form-action.btn-save-all {
    position: absolute;
    right: 190px;
    font-weight: normal !important;
}

.btn-form-action.btn-save {
    position: absolute;
    right: 270px;
    font-weight: normal !important;
}

.btn-form-action {
    height: 22px;
    padding: 0px 3px;
    width: 75px;
    margin-left: 5px;
    /*color: lighten(@navbar-inverse-bg,20%);*/
    //background-color: white;
    //box-shadow: inset 0 -2px 0 0 @input-shadow;
    //-webkit-box-shadow: inset 0 -2px 0 0 @input-shadow;
    //border: 1px solid @border-common;
    //color: @list-group-link-color;
}

//.btn-form-action:hover {
//  background-color: @button-hover-common;
//  box-shadow: inset 0 -2px 0 0 @action-shadow;
//  -webkit-box-shadow: inset 0 -2px 0 0 @action-shadow;
//  border: 1px solid @btn-border;
//  color: @btn-text-hover;
//}

.btn-window {
    height: 22px;
    padding: 2px 2px;
    width: 20px;
    margin-left: 5px;
    color: lighten(@navbar-inverse-bg, 20%);
    text-align: center;
}

.window {
    background-color: lighten(@form-title-color, 50%);
    /*border-top: 1px solid @form-title-color;
border-bottom: 1px solid @form-title-color;*/
    padding-right: 15px;
    padding-top: 5px;
    padding-bottom: 7px;
    vertical-align: middle;
}

.headerWindow {
    height: 35px;
    background-color: lighten(@secondary-color, 70%);
    position: absolute;
    width: 974px;
    margin-left: 50px;
    border-bottom: 1px solid @secondary-color;
}

//icons
.round-context-icon {
    display: inline-block;
    -moz-border-radius: 60px;
    -webkit-border-radius: 60px;
    border-radius: 60px;
    width: 24px;
    height: 24px;
    background-color: @navbar-default-link-active-bg;
    color: lighten(@navbar-inverse-bg, 30%);
    text-align: center;
    margin: 5px 3px 3px 3px;
    cursor: pointer;
    text-align: center;
    vertical-align: middle;
    border: none;
}

.round-context-icon .icon {
    margin-top: -5px;
    margin-left: -8px;
}

.round-context-icon .selected {
    fill: @brand-success;
}

.round-context-icon .notSelected {
    fill: lighten(@navbar-inverse-bg, 30%);
}

.round-context-icon .notSelected:hover {
    fill: @navbar-inverse-bg;
}

.round-context-icon.selected {
    box-shadow: inset 0 0 0 1px darken(@navbar-default-link-active-bg, 40%), inset 0 2px 4px darken(@navbar-default-link-active-bg, 65%);
}

.round-context-icon .fill-color {
    fill: lighten(@navbar-inverse-bg, 30%);
}

.round-context-icon:hover,
.round-context-icon .fill-color:hover {
    fill: @navbar-inverse-bg;
}

.round-context-icon #help:hover {
    fill: @navbar-inverse-bg;
}

.disabled-context-help-position {
    margin-left: -3px;
    margin-bottom: 3px;
}

.enabled-context-help-position {
    margin-bottom: 2px;
    margin-left: -2px;
}

.viewAll-enabled-position {
    margin-left: -1px;
}

.context-close-disabled-position {
    margin-bottom: 1px;
}

.context-close-enabled-position {
    margin-bottom: 1px;
}

.context-favorite-disabled {
    margin-left: -3px;
    margin-top: -1px;
}

.context-favorite-enabled {
    margin-left: -2px;
    margin-top: -1px;
}

/*.pin-icon {
    background-image: url(../assets/pin.svg);
}*/

/*.caret-icon {
    background-image: url(../assets/triangle.svg);
}*/

.favorites-icon {
    background-size: 90% 90%;
}

.addToFavoritesIconFocused {
    border: solid 2px #51abff;
    ;
}

.favorites-icon img {
    margin-top: -5px;
    margin-left: 1px;
}

/*.close-icon {
    background-image: url(../assets/close.svg);
}*/

.round-context-icon:hover {
    color: lighten(@navbar-inverse-bg, 10%);
}

.round-context-icon-extra-margin {
    margin-top: 38px;
}

.card-navigation-icon {
    margin-top: 25px;
    text-align: center;
    padding-left: 5px;
}

.card-navigation-icon a {
    color: lighten(@dark-color, 10%);
    cursor: pointer;
}

.card-navigation-icon .next {
    transform: rotate(180deg);
}

.card-navigation-icon.active polygon {
    fill: @secondary-color;
}

.card-navigation-icon:hover.active polygon {
    fill: @active-card;
}

.card-navigation-icon .disabled {
    fill: @gray-light;
    cursor: not-allowed;
}

.card-navigation-icon a:hover {
    color: lighten(@dark-color, 10%);
}

.detail {
    min-width: 20px;
    height: 20px;
    text-align: center;
    cursor: pointer;
    vertical-align: middle;
}

.detail-add-on {
    width: 20px;
    height: 14px;
    text-align: center;
    vertical-align: middle;
    position: absolute;
    z-index: 2;
    right: 8px;
    top: 18%;
}

.colleague-icon {
    display: inline-block;
    text-indent: -9999px;
    max-width: 100%;
    max-height: 100%;
    background-size: 100% 100%;
    position: absolute;
    margin: -20px 0px 0px 0px;
    right: -23px;
    z-index: 1;
}

.ngxmdp {
    z-index: 1000 !important;
}

.calendar-add-on {
    display: inline-block;
    max-width: 100%;
    max-height: 100%;
    background-size: 100% 100%;
    position: absolute;
    margin: -22px 0px 4px 4px;
}

.calender-overlay {
    position: fixed;
    width: 100%;
    height: 1000px;
    left: 0;
    top: 0;
    z-index: 999;
}

.detail-icon {
    //background-image: url(../assets/detail.svg);
    right: -28px !important;
    margin-top: -21px !important;
    margin: -20px 0px 0px 0px;
    position: absolute;
}

.form-field-icon {
    border: 1px solid #5B5E65;
    border-radius: 4px;
    background-color: #fff;
}

.calendar-icon {
    right: -7px !important;
    z-index: 1;
    position: absolute;
    margin: -22px 0px 4px 4px;
}

.icon-pos {
    fill: #5B5E65;
    margin-top: -5px;
}

.calculator-icon {
    right: -7px !important;
    background-size: 15px 15px;
    background-image: url(../assets/calculator.svg);
    background-position-x: 1.4px;
    background-position-y: 1.4px;
    background-repeat: no-repeat;
}

.lookup-icon {
    background-image: url(../assets/lookup.svg);
    display: inline-block;
    text-indent: -9999px;
    max-width: 25%;
    max-height: 100%;
    background-size: 100% 100%;
    vertical-align: middle;
}

.lookup-add-on {
    width: 20px;
    height: 14px;
    text-align: center;
    vertical-align: middle;
    position: absolute;
    z-index: 2;
    right: 4px;
    top: 23%;
}

.restricted-add-on {
    // empty-used to target elements
}

.restricted-revealed {
    // empty, used to target elements
}

.restricted-calendar {
    width: 10rem;
}

.restricted-obscured {
    display: none !important;
    z-index: -1;
}

.restricted-dummy {
    background-color: #333;
    color: #fff !important;
    box-shadow: none !important;
    text-align: center !important;
    padding-top: 2px !important;
}

.restricted-icon {
    font-size: 1.2em !important;
}

.input-group .form-control {
    position: static;
}

.input-group-addon {
    padding: 0px 6px;
}

.sidebar-icon {
    width: 50px;
    height: 45px;
    text-align: center;
    cursor: pointer;
    vertical-align: middle;
    background-repeat: no-repeat;
    background-position: center;
    color: @sidebar-icon-color;
}

.sidebar-icon.active {
    background-color: @gray-base;
    border-bottom: 3px solid @navbar-default-bg;
}

.sidebar-icon:hover {
    color: @navbar-default-link-color;
}

.sidebar-icon-margin {
    margin-top: 70px;
}

.sidebar-icon .fill-color {
    fill: @body-bg;
}

.icon-addon {
    position: relative;
    //display: inline-block;
}

// .icon-addon:after,
// .icon-addon:before {
//   display: inline-block;
//   content: "";
// }

.form-group {
    margin-bottom: 0px;
}

.icon-addon a {
    margin: -2px;
}

.form-label {
    font-size: 80%; //oops
}

.form-area-control {
    display: inline-block;
    margin-left: 5px;
    width: auto;
    height: auto;
    font-size: 80%; //oops
    padding: 2px 5px;
    vertical-align: middle;
}

.form-area-control:focus {
    outline: none !important;
    border: 1px solid @navbar-default-bg;
    box-shadow: none;
}

.form-row {
    margin: 5px;
    margin-bottom: 8px;
}

.container {
    border-right: 1px solid lighten(@navbar-default-bg, 40%);
    width: 100%;
    max-width: 1024px;
    padding: 0 15px 0 15px;
    height: 100%;
}

//Navigation
.navgation ul {
    list-style-type: none;
    margin: 0px;
    padding: 0px;
}

.navigation .help {
    padding-top: 0px !important;
    margin-right: 10px;
}

.navgation ul li.first {
    margin-left: 20px;
    margin-right: 20px;
    border: none;
    font-size: 70%;
    font-weight: 600;
}

.navgation ul li {
    display: inline;
    margin: 5px;
    border: none;
    padding: 5px 5px 5px 10px;
    font-size: 100%;
}

.navgation .navigation-menu ul li {
    display: inline;
    //margin: 5px;
    border: none;
    //padding: 0px 0px 0px 10px;
    font-size: 80%;
}

.navigation ul li.active {
    background-color: @primary-color;
    color: @gray-lighter;
    font-weight: 600;
    opacity: 0.75;
}

.navigation-menu .item.open {
    background-color: lighten(@primary-color, 60%);
    border-top: 1px solid lighten(@primary-color, 40%);
    border-bottom: 1px solid lighten(@primary-color, 40%);
}

.navigation-menu {
    margin-top: 20px;
    font-size: 12px;
}

.navigation-menu-no-items {
    font-size: 14px;
    color: #000000;
    text-align: center;
}

.navigation-menu ul {
    padding-left: 0px;
    padding-right: 0px;
}

.navigation-menu ul,
li {
    margin: 0px;
    padding: 0px;
}

.navigation-menu .item:hover {
    background-color: lighten(@secondary-color, 45%);
}

.navigation-menu .item.selection {
    background-color: lighten(@secondary-color, 45%);
}

.navigation-menu .item:focus {
    background-color: lighten(@secondary-color, 45%) !important;
    border: 1px solid lighten(@secondary-color, 50%) !important;
}

.navigation-menu .item:active {
    background-color: lighten(@secondary-color, 45%) !important;
    border: 1px solid lighten(@secondary-color, 50%) !important;
}

.selectedUp {
    background-color: lighten(@secondary-color, 45%) !important;
}

.navigation-menu .item {
    padding-top: 5px;
    padding-bottom: 5px;
    display: block;
}

.navigation-menu li button {
    color: @primary-color;
    padding-left: 50px;
}

.navigation-menu li li button {
    padding-left: 75px;
}

.navigation-menu li li li button {
    padding-left: 100px;
}

.btnFormItem {
    display: inline-block !important;
}

.navigation-menu ul {
    list-style: none;
    font-size: 14px;
    margin-left: -10px !important;
}

.navigation-menu li button {
    border: none;
    list-style: none;
    font-size: 14px;
    //margin-left: 10px !important;
    width: 100%;
    text-align: left;
    text-decoration: none;
    cursor: pointer;
    background-color: white;
    margin-top: -15px;
}

.navigation-menu li button :focus {
    background-color: lighten(@secondary-color, 45%);
}

.navigation-menu ul ul button {
    margin-top: 0px;
}

.navigation-menu ul ul ul ul button {
    margin-top: 0px;
}

.navigation-menu li li li li button {
    padding-left: 130px;
}

.navigation-menu li li li li li button {
    padding-left: 160px;
}

.navigation-menu li li li li li li button {
    padding-left: 185px;
}

.navigation-menu button i {
    font-size: 10px;
    width: 15px;
}

.navigation-current-items {
    margin-left: 5px !important;
    font-size: 12px !important;
}

.navigation-menu-font {
    font-size: 14px;
}

.navigation-menu-font div:focus {
    outline-color: @primary-color-focus;
}

.navigate-color {
    fill: @primary-color;
    stroke: @primary-color;
}

ul.navigation-menu-font>li {
    margin: 0;
    padding: 0;
}

.navigation-spinner {
    vertical-align: middle;
    margin-left: 45%;
}

.tablet-button {
    display: none !important;
}

.popover-content {
    max-height: 90vh;
    overflow-y: auto;
    overflow-x: hidden;
}

.popover-content-area {
    max-height: 500px;
    overflow-y: auto;
}

.required {
    border: 1px solid @require-border;
    margin-left: 0px;
}

.dot {
    content: "\A";
    width: 5px;
    height: 5px;
    border-radius: 50%;
    background: @dot-warning;
    display: inline-block;
    position: absolute;
    left: -2px;
    top: -2px;
}

.dot_date {
    left: 2px !important;
    top: -2px !important;
}

.borderless td,
.borderless th {
    border: none !important;
}

.search-result-history {
    border: 1px solid @primary-color;
}

.person-search-result ul li {
    border-bottom: 1px solid @border-common;
    border-right: none;
}

.person-search-result ul li.selected {
    border-top: 1px solid lighten(@navbar-default-bg, 20%);
    border-bottom: 1px solid lighten(@navbar-default-bg, 20%);
    background-color: lighten(@navbar-default-bg, 60%);
}

.person-search-result ul li:first-child {
    border-top: 1px solid @border-common;
    border-right: none;
}

.person-search-result span.span-non-form-sr-input {
    display: inline-block;
    font-weight: bold;
}

.person-search-result ul li table tr .middle {
    vertical-align: middle;
}

.search-filter-dropdown {
    display: inline-block;
    width: 200px;
}

.borderless {
    margin-bottom: 0px;
}

.btn-transparent {
    background-color: transparent;
    border: 1px solid @border-common;
    border-radius: 4px;
    margin-left: 10px;
}

.person-search-result .row {
    margin-left: 0px;
    margin-right: 0px;
}

.context-search-result td {
    padding-bottom: 2px !important;
    padding-top: 2px !important;
}

.person-search-result {
    width: 975px;
    color: #000000;
    vertical-align: middle;
    position: absolute;
    background-color: #fff;
    right: -290px;
    padding-left: 15px;
    padding-right: 15px;
    z-index: 1060; // higher than lightbox (1050).
}

.person-search-result ul {
    list-style: none;
    margin-left: -50px;
    margin-right: -15px;
}

.person-search-result ul li:last-child .btn {
    margin-top: 10px;
    margin-bottom: 10px;
}

.person-search-result ul li:last-child span {
    margin-top: 10px;
    margin-bottom: 10px;
    min-height: 30px;
    margin-right: 5px;
    margin-left: 5px;
}

.person-search-result ul li:last-child span.text-only {
    margin-top: 14px;
}

.page-number {
    display: inline-block !important;
    width: auto;
    max-width: 30px;
}

.page-input {
    display: inline-block !important;
    width: auto;
    max-width: 80px;
    line-height: 1;
}

.pager {
    margin-top: 10px;
}

.person-search-result ul li:last-child {
    padding-right: 10px;
}

.strong {
    font-weight: 600;
}

.preferences-modal {
    top: 20px !important;
    right: 70px !important;
}

.person-search-result .btn-group .btn {
    background-color: transparent;
    border: none;
}

.person-search-result .btn-group .btn.active {
    background-color: @navbar-default-bg;
    border-radius: 0;
    color: @btn-default-border;
}

.person-search-result .btn-group .btn.active:focus {
    border: 2px solid @btn-default-border;
}

.person-search-result .btn-group .btn.active:focus .selected-cardView {
    margin-top: -4px !important;
    margin-left: -7px !important;
}

.person-search-result .btn-group .btn.active:focus .selected-gridView {
    margin-top: -4px !important;
    margin-left: -7px !important;
}

.person-search-result .btn-group .btn:focus {
    border: 2px solid @navbar-default-bg;
}

.fa-th-list-active,
.fa-th-active {
    color: @body-bg;
}

.context-search-result-title span {
    margin-right: 14px;
}

.context-search-result-title a {
    margin-right: 15px;
}

.sr-results-container table {
    width: 100%;
}

.person-search-result input[type='checkbox'] {
    display: inline-block;
    height: 30px;
    width: 20px;
    vertical-align: middle;
    border: none;
    margin: 0px;
    -webkit-box-shadow: none;
    box-shadow: none;
    -webkit-transition: none;
    transition: none;
}

.person-advanced-search {
    width: 925px;
    color: @list-group-link-color;
    font-weight: 500;
}

.person-advanced-search select {
    max-width: 100%;
    min-width: 100%;
}

.person-advanced-search .row {
    margin-top: 15px;
}

.lightbox {
    position: fixed;
    z-index: 1050;
    width: 100%;
    height: 100%;
    text-align: center;
    top: 38px;
    left: 0;
    background: rgba(0, 0, 0, 0.5);
}

.lightbox-full {
    position: fixed;
    z-index: 1050;
    width: 100%;
    height: 100%;
    text-align: center;
    top: 0;
    left: 0;
    background: rgba(0, 0, 0, 0.5);
}

.lightbox-transparent {
    position: fixed;
    z-index: 1050;
    width: 100%;
    height: 100%;
    text-align: center;
    top: 0;
    left: 0;
    background-color: transparent;
}

.close-context-popover {
    position: absolute;
    z-index: 1060;
    left: 680px;
    background-color: #fff;
    border: solid 1px @primary-border;
    border-radius: 5px;
    width: 329px;
    height: 82px;
}

.form-search-result .row {
    margin-left: 0px;
    margin-right: 0px;
}

.form-search-result .input-area {
    margin-left: 25px;
}

.form-search-result-last-child {
    padding-top: 5px;
    padding-bottom: 5px;
    border-top: 1px solid @border-common;
    border-bottom: 1px solid @border-common;
}

.form-search-result {
    width: 950px;
    color: #000000;
    vertical-align: middle;
    position: absolute;
    background-color: #fff;
    right: -290px;
    padding-left: 15px;
    padding-right: 15px;
    z-index: 1060;
}

.form-search-result ul {
    list-style: none;
    margin-left: -50px;
    margin-right: -15px;
}

.form-search-result ul li:last-child .btn {
    margin-top: 10px;
    margin-bottom: 10px;
}

.form-search-result ul li:last-child span {
    margin-top: 10px;
    margin-bottom: 10px;
    min-height: 30px;
    margin-right: 5px;
    margin-left: 5px;
}

.form-search-result ul li:last-child span.text-only {
    margin-top: 14px;
}

.form-search-result ul li:last-child {
    padding-right: 10px;
}

.form-search-result .btn-group .btn {
    background-color: transparent;
    border: none;
}

.form-search-result .btn-group .btn.active {
    /*border: 1px solid @border-common;*/
    background-color: @navbar-default-bg;
    border-radius: 4px;
    color: @btn-default-border;
}

.form-search-result input[type='checkbox'] {
    display: inline-block;
    height: 30px;
    width: 20px;
    vertical-align: middle;
    border: none;
    margin: 0px;
    -webkit-box-shadow: none;
    box-shadow: none;
    -webkit-transition: none;
    transition: none;
}

.form-search-result span.span-form-sr-input {
    display: inline-block;
    font-weight: bold;
}

.history-node a {
    color: @list-group-link-color;
    text-decoration: none;
}

/*
.history-title {
    margin-bottom: 10px;
    font-size: 90%;
}
*/
.history-node {
    border: 1px solid @border-common;
    border-radius: 4px;
    display: inline-block;
    padding-left: 10px;
    padding-right: 10px;
    margin-top: 5px;
    margin-bottom: 5px;
}

.round-context-icon .fa {
    text-align: center;
    padding-top: 5px;
}

.round-context-icon .material-icons {
    text-align: center;
    padding-top: 2px;
}

.popover {
    width: auto !important;
    max-width: none;
    border-radius: 0px;
}

.popover .arrow,
.popover .arrow::after {
    border-style: none;
}

//.primary-data .navigation-area {
//  width: 950px !important;
//  max-width: 950px;
//  max-height: 90vh;
//  overflow: scroll !important;
//  overflow-x: hidden;
//}

.navgation {
    width: 950px !important;
    max-width: 950px !important;
    max-height: 90vh !important;
    //overflow: scroll !important;
    //overflow-x: hidden !important;
}

.popover .search-history-area {
    width: 950px !important;
    max-width: 950px;
    color: @list-group-link-color;
}

.search-history-area .button-text-length {
    max-width: 265px;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.label-col-1 {
    display: inline-block;
    width: 150px;
    text-align: right;
}

.material-icons {
    vertical-align: middle;
    padding-left: 1px;
    max-width: 100%;
}

.material-icons.md-18 {
    font-size: 18px;
}

.material-icons.md-24 {
    font-size: 24px;
}

.material-icons.md-36 {
    font-size: 36px;
}

.material-icons.md-48 {
    font-size: 48px;
}

.close-context-popover {
    border: 2px solid @navbar-default-bg;
    width: 270px !important;
    border-radius: 4px;
}

.favorite-context-popover {
    width: 270px !important;
    border: 2px solid @navbar-default-bg;
    padding: 0px 10px;
    border-radius: 4px;
}

.close-context-popover .row:first-child {
    margin-bottom: 10px;
}

.close-context-popover ul {
    list-style: none;
    margin-left: -40px;
    margin-bottom: 0;
}

.close-context-popover ul li {
    padding: 6px 15px;
}

.close-context-popover ul li a {
    color: @navbar-inverse-bg;
    text-decoration: none;
}

.close-context-popover ul li:hover {
    background-color: lighten(@secondary-color, 40%);
    border-top: 1px solid lighten(@secondary-color, 20%);
}

.close-context {
    margin: 0 -15px !important;
}

.close-context button {
    width: 100%;
}

.popover {
    top: 5px !important;
}

.open-sidebar {
    position: fixed;
    height: 100%;
    width: 250px;
    z-index: 1100;
    background-color: @navbar-inverse-link-disabled-color;
    display: block;
    margin-left: 35px;
    border-left: 1px solid @gray-common;
    -webkit-transition: all 600ms cubic-bezier(0.47, 0, 0.745, 0.715);
    transition: all 2000ms cubic-bezier(0.47, 0, 0.745, 0.715);
    top: 38px;
}

.open-sidebar ul li:hover {
    background-color: @navbar-default-bg;
}

.open-sidebar ul {
    list-style: none;
    padding-left: 0px;
    //   font-family:'Open Sans';
}

.open-sidebar ul li {
    height: 46px;
    color: @body-bg;
    border-bottom: 1px solid @gray-common;
    vertical-align: middle;
    padding-top: 10px;
    padding-left: 20px;
    cursor: pointer;
}

.open-sidebar ul li a {
    font-size: 17px;
    color: @body-bg;
    padding-top: 10px;
    text-decoration: none;
}

.open-sidebar ul li a:hover {
    text-decoration: none;
}

.open-sidebar ul li.header {
    background-color: @gray-base;
}

.open-sidebar ul li.disabled {
    background-color: @list-group-link-color  !important;
    color: @gray-light;
}

.clickable {
    cursor: pointer;
}

.hover-result:hover {

    >td,
    >th {
        background-color: @primary-color-light  !important;
    }
}

.disabled {
    color: @gray-disabled-text  !important;
    cursor: not-allowed;
}

a svg:hover #settings {
    fill: @body-bg;
}

a svg:hover #autoClose {
    fill: white;
}

.custom-form-control {
    border-radius: 3px;
    background-color: white;
    /*box-shadow: 0 2px 0 0 @input-shadow;
-webkit-box-shadow: inset 0 -2px 0 0 @input-shadow;*/
    padding: 2px;
}

.form-control-disabled {
    background-color: khaki !important;
    box-shadow: none !important;
    color: #000 !important;
}

.btn-black[disabled] {
    color: #555 !important;
}

.form-control[readonly] {
    background-color: #fff;
}

.custom-form-control:focus {
    border: 2px solid @navbar-default-bg;
}

.form-control:focus {
    border: 2px solid @primary-color-focus;
}

.form-control {
    border: 1px solid #999;
    color: #000;
}

//Cursor Style for disabled or readonly input field. CUI-3000
.form-control[disabled],
.form-control[readonly],
fieldset[disabled] .form-control {
    cursor: text;
}

.secure-input {
    background-color: #000 !important;
    box-shadow: none !important;
}

.secure-input-hide-icon {
    display: none;
}

.btn-search-result-action {
    height: 28px;
    padding: 0px 2px;
    width: auto;
    margin-left: 2px;
    margin-right: 2px;
    padding-left: 5px;
    padding-right: 5px;
    font-weight: normal !important;
}

button.disabled svg {
    fill: #929292 !important;
    stroke: #929292 !important;
}

.sr-btn-prev {
    margin-bottom: 1px;
}

.sr-btn-first {
    margin-bottom: 1px;
}

.sr-btn-next {
    margin-bottom: 3px;
}

.sr-btn-last {
    margin-bottom: 3px;
}

.btn-non-form-search-result-action {
    margin-top: 8px;
}

.btn-search-result-action-top-open {
    margin-top: -5px !important;
}

.btn-window-pagination-action {
    height: 25px;
    padding: 0px 2px;
    width: auto;
    margin-left: 2px;
    margin-right: 2px;
    padding-left: 5px;
    padding-right: 5px;
    background-color: white;
    box-shadow: inset 0 -2px 0 0 @input-shadow;
    -webkit-box-shadow: inset 0 -2px 0 0 @input-shadow;
    border: 1px solid @border-common;
    color: @list-group-link-color;
}

.btn-window-pagination-action :hover {
    background-color: @button-hover-common;
    box-shadow: inset 0 -2px 0 0 @action-shadow;
    -webkit-box-shadow: inset 0 -2px 0 0 @action-shadow;
    border: 1px solid @btn-border;
    color: @btn-text-hover;
}

.tooltip-inner {
    white-space: pre-wrap;
    max-width: 600px;
    width: auto;
}

.tooltip.right.in .tooltip-inner {
    display: initial;
}

.tooltip.right .tooltip-inner {
    display: none;
}

.popover-close {
    position: absolute;
    right: -35px;
    top: -5px;
    padding-top: 0px !important;
    padding-bottom: 0px !important;
}

.popover-close-favorite,
.popover-close-about {
    position: absolute;
    right: -35px;
    top: 95px;
}

#about {
    .modal-dialog {
        width: 450px;
    }

    .modal-body {
        padding-top: 20px;
    }

    .copyright-message {
        text-align: center;
    }
}

.context-result-grid .selected td {
    border-top: 1px solid lighten(@navbar-default-bg, 20%) !important;
    border-bottom: 1px solid lighten(@navbar-default-bg, 20%) !important;
    background-color: @primary-slection  !important;
}

.context-result-grid .highlight td {
    border-top: 1px solid lighten(@navbar-default-bg, 20%) !important;
    border-bottom: 1px solid lighten(@navbar-default-bg, 20%) !important;
    background-color: @primary-slection  !important;
}

.form-controller-scaling-fixed {
    border-right: 1px solid lighten(@primary-color, 40%);
}

.highlight {
    background-color: @primary-color  !important;
    color: #FFF;
}

.context-result-grid td {
    //min-width: 130px; -- Width of index column displaying row numbers is pushing the other data off screen, remove this to see if it helps
    padding-right: 40px;
    border: 1px;
}

.context-result-grid th {
    border-top: 1px solid @border-common  !important;
    border-right: 1px solid @border-common;
    border-bottom: 1px solid @border-common  !important;
}

.context-result-grid .no-minimum-width {
    min-width: 0px;
}

.context-result-grid {
    border-collapse: separate;
    max-height: 70vh;
    overflow-y: hidden;
    overflow-x: hidden;

    @supports (-webkit-overflow-scrolling: touch) {
        overflow-x: auto;
    }
}

// Setting grid table's max-width to none for Safari horizontal scroll bar issue
.search-grid-table {
    max-width: none !important;
}

/* notification */
.notification-badge .right-dropdown-toggle {
    color: @list-group-link-color;
}

.notification-type-icon {
    height: 25px;
}

.notification-type-icon-fill {
    fill: @icon-fill;
}

/* line 1, _instructions.sass */
.instruction {
    background-image: none;
    text-shadow: none;
    -webkit-box-shadow: none;
    box-shadow: none;
    border-radius: 0;
    line-height: 1;
    font-weight: 400;
    position: relative;
    padding: 0;
    margin-top: 10px;
    margin-bottom: 20px;
    width: 100%;
    min-height: 20px;
    display: table;
    white-space: nowrap;
    box-sizing: border-box;
    border: 1px solid @instruct-border;
    background-color: @instruction-bg;
    color: @instruction-text;
    -webkit-box-shadow: inset 4px 4px 0 0 rgba(58, 118, 131, 0.15);
    box-shadow: inset 0 -4px 0 0 rgba(58, 118, 131, 0.15);
}

/* line 24, _instructions.sass */
.instruction:before {
    display: table;
    content: "";
}

/* line 28, _instructions.sass */
.instruction:after {
    clear: both;
}

/* line 31, _instructions.sass */
.instruction .instruction-icon-wrap {
    display: table-cell;
    width: 50px;
    vertical-align: middle;
    text-align: center;
}

/* line 37, _instructions.sass */
.instruction .instruction-icon-wrap .EllucianIcon {
    position: relative;
}

/* line 40, _instructions.sass */
.instruction .instruction-icon-wrap .EllucianIcon svg {
    margin-top: 0;
    width: 15px;
    height: 15px;
}

/* line 44, _instructions.sass */
.instruction .instruction-icon-wrap .EllucianIcon svg path {
    fill: @instruction-text;
}

/* line 47, _instructions.sass */
.instruction .instruction-message {
    display: block;
    margin: 0;
    line-height: 1.4;
    width: 100%;
    padding: 10px;
    white-space: normal;
    font-weight: 500;
    background-color: @instruction-msg-bg;
    -webkit-box-shadow: inset 4px 4px 0 0 rgba(58, 118, 131, 0.15);
    box-shadow: inset 0 -4px 0 0 rgba(58, 118, 131, 0.15);
    color: @instruct-border;
}

/* line 60, _instructions.sass */
.instruction .instruction-message:after {
    clear: both;
}

/* line 62, _instructions.sass */
.instruction a {
    color: @instruct-border;
}

.instruction {
    margin-top: 0px;
    margin-bottom: 0px;
}

.info-icon-fill {
    fill: @icon-fill;
}

.notification-badge ul li {
    margin-top: -8px;
    margin-bottom: -5px;
}

.notification-badge ul {
    width: 450px;
}

/* Modal */
.modalLoginMessage {
    font-size: 18px;
}

.modalForm {
    margin-top: 10px;
}

/* line 1, _modals.sass */
.modal-backdrop {
    z-index: 1040;
}

/* line 4, _modals.sass */
.modal {
    position: fixed;
    top: 0;
    right: 0;
    bottom: 0;
    left: 0;
    z-index: 1050;
    display: none;
    overflow: hidden;
    -webkit-overflow-scrolling: touch;
    outline: 0;
}

/* line 16, _modals.sass */
.modal .navbar {
    overflow: hidden;
}

/* line 19, _modals.sass */
.modal-dialog {
    width: 100%;
    height: 100%;
    margin: 0 auto;
}

/* line 24, _modals.sass */
.modal-content {
    -webkit-box-shadow: 0 0 40px rgba(0, 0, 0, 0.35);
    box-shadow: 0 0 40px rgba(0, 0, 0, 0.35);
    border: none;
    border-radius: 0;
    background-color: white;
}

/* line 31, _modals.sass */
.modal-header {
    min-height: 1em;
    padding: 20px 20px 10px 20px;
    border: 0;
    border-radius: none;
}

.modal-header a {
    cursor: pointer !important;
}

.modal-header a:hover {
    text-decoration: none;
}

/* line 37, _modals.sass */
.modal-header .close {
    margin-top: -10px;
}

/* line 41, _modals.sass */
.modal-header>h3 {
    font-size: 18px;
    color: @black-color;
}

/* line 45, _modals.sass */
.modal-body {
    padding: 0 18px 25px 18px;
    // color: @black-color;
    color: #475057;
}

/* line 48, _modals.sass */
.modal-body ul:after {
    display: block;
    position: relative;
    content: "";
    width: 4em;
    height: 1px;
    margin-top: 20px;
    background-color: @navbar-default-link-disabled-color;
}

/* line 57, _modals.sass */
.modal-body ul:nth-last-child(1):after {
    display: none;
}

/* line 60, _modals.sass */
.modal-body>p {
    font-size: 1em;
    line-height: 1.25em;
}

/* line 64, _modals.sass */
.modal-footer {
    padding: 0;
    text-align: center;
    font-size: 1.125em;
    color: @modal-footer;
    border-top: 0;
}

/* line 71, _modals.sass */
.modal-footer .btn {
    text-transform: none;
    border-top-left-radius: 0;
    border-top-right-radius: 0;
    border-bottom-left-radius: 0.429em;
    border-bottom-right-radius: 0.429em;
    border-bottom: 0;
    border-left: 0;
    border-right: 0;
}

/* line 81, _modals.sass */
.modal-content .modal-footer .btn-default {
    color: @secondary-color;
    //border-bottom: 5px solid @input-shadow !important;
}

/* line 87, _modals.sass */
.modal-footer .btn-group-justified>.btn:not(:first-child),
.modal-footer .btn-group-justified>.btn-group:not(:first-child) {
    padding-left: 0;
}

/* line 90, _modals.sass */
.modal-footer .btn-group>.btn-group:first-child:not(:last-child)>.btn:last-child,
.modal-footer .btn-group>.btn-group:first-child:not(:last-child)>.dropdown-toggle {
    border-top-right-radius: 0;
    border-bottom-right-radius: 0;
    border-top-left-radius: 0;
}

/* line 95, _modals.sass */
.modal-footer .btn-group>.btn-group:first-child:not(:last-child)>.btn-default:last-child,
.modal-footer .btn-group>.btn-group:first-child:not(:last-child)>.dropdown-toggle {
    border-right: 0;
    border-left: 0;
    border-bottom: 1px solid @input-shadow;
}

/* line 100, _modals.sass */
.modal-footer .btn-group>.btn-group:first-child:not(:last-child)>.btn-default:last-child:hover,
.modal-footer .btn-group>.btn-group:first-child:not(:last-child)>.btn-default:last-child:focus,
.modal-footer .btn-group>.btn-group:first-child:not(:last-child)>.btn-default:last-child:active,
.modal-footer .btn-group>.btn-group:first-child:not(:last-child)>.dropdown-toggle:hover,
.modal-footer .btn-group>.btn-group:first-child:not(:last-child)>.dropdown-toggle:focus,
.modal-footer .btn-group>.btn-group:first-child:not(:last-child)>.dropdown-toggle:active {
    border-bottom: 1px solid @action-shadow;
}

/* line 103, _modals.sass */
.modal-footer .btn-group>.btn-group:not(:first-child)>.btn-default:first-child {
    border-top-left-radius: 0;
    border-top-right-radius: 0;
    border-bottom-left-radius: 0;
    border-left: 1px solid @navbar-default-link-disabled-color;
    border-right: 0;
    border-bottom: 1px solid @input-shadow;
}

/* line 111, _modals.sass */
.modal-footer .btn-group>.btn-group:not(:first-child)>.btn-default:first-child:hover,
.modal-footer .btn-group>.btn-group:last-child:not(:first-child)>.btn-default:first-child:focus,
.modal-footer .btn-group>.btn-group:not(:first-child)>.btn-default:first-child:active {
    border-bottom: 1px solid @action-shadow;
}

/* line 114, _modals.sass */
.modal-footer .btn-group>.btn:not(:first-child),
.modal-footer .btn-group>.dropdown-toggle:not(:first-child),
.modal-footer .btn-group>.btn-group:not(:first-child)>.btn:first-child {
    border-top-left-radius: 0;
    border-bottom-left-radius: 0;
}

/* line 118, _modals.sass */
.modal-footer .btn-group>.btn-group:not(:first-child)>.btn-primary:first-child {
    border-left: 1px solid @secondary-color;
}

/* line 121, _modals.sass */
.modal-footer .btn-primary {
    border: 1px solid @secondary-color;
}

/* line 124, _modals.sass */
.modal-footer .btn-primary:hover,
.modal-footer .btn-primary:focus,
.modal-footer .btn-primary:active {
    border: 1px solid @modal-footer-border;
}

.modal-content .modal-footer.btn-default:active {
    background-color: lighten(@secondary-color, 45%) !important;
    border: 1px solid lighten(@secondary-color, 50%) !important;
}

@media screen and (min-width: 30em) {

    /* line 128, _modals.sass */
    .modal-dialog {
        max-width: 36.714em;
        margin: 1.429em auto;
    }

    /* line 132, _modals.sass */
    .modal-content {
        border-radius: 0.429em;
        overflow: hidden;
    }

    /* line 136, _modals.sass */
    .modal-body>p {
        font-size: 1.125em;
        line-height: 1.5em;
    }

    /* line 140, _modals.sass */
    .modal-header {
        padding: 18px;
    }

    /* line 143, _modals.sass */
    .modal-header>h3 {
        font-size: 18px;
        /* font-size: 1.714em;*/
    }
}

/* ------------- custom css -------------------------------*/
.person-search-result .selection {
    margin-right: 0 !important;
}

.person-search-result .row {
    margin-bottom: 3px;
    margin-top: 3px;
}

.search-link .popover {
    top: 38px !important;
    left: -365px !important;
}

.ellucian-logo {
    background-image: url("@{signInLogo}");
    text-align: center;
    padding: 35px;
    background-repeat: no-repeat;
    margin-left: 65px;
    cursor: default;
    z-index: 2000;
}

.popover {
    // font-family:'Open Sans';
    font-size: 14px;
}

/*#navbar .navbar-nav{
  margin-left:70px !important;
}*/
.person-card .person-details .selection:first-child {
    padding: 20px 0 0 0 !important;
    font-weight: 600;
}

.person-card .data-column {
    padding: 5px 0 0 0 !important;
}

.person-card {
    min-height: 75px;
}

.person-card .selected {
    border-top: 1px solid @primary-border;
    border-bottom: 1px solid @primary-border;
    background-color: @primary-slection  !important;
    //color: #FFFFFF;
}

//.person-card .selected .search-result-index-position {
//  color: #FFFFFF;
//}

.person-card:hover {
    background-color: @primary-color-light;
}

.person-card>div:hover {
    background-color: @primary-color-light;
}

.context-result-grid tr:focus {
    outline: @primary-color auto 5px !important;
}

.context-result-grid th:focus {
    outline: @primary-color auto 5px !important;
}

.context-result-grid td:focus {
    outline: @primary-color auto 5px !important;
}

.sr-results-container tr:focus {
    outline: @primary-color auto 5px !important;
}

.no-animate {
    -webkit-transition: none !important;
    transition: none !important;
}

.form-title-area .text-primary {
    color: @primary-color;
}

.form-title-area .text-primary:hover {
    color: #42a5fd !important;
}

.form-title-area .form-title-area-favorite {
    fill: #42a5fd !important;
}

.alert-modal-footer {
    padding: 1px;
}

.context-table {
    width: 100%;
}

.context-name-width {
    margin-top: -10px;
    margin-bottom: 6px;
    font-size: 15px;
}

.footer {
    background-color: @primary-color;
    border-color: @primary-border;
}

.navActive {
    background-color: @primary-color;
    color: @gray-lighter;
    font-weight: 600;
    opacity: 0.75;
}

.hover:hover {
    background-color: @primary-color-light;
}

.hover-fav {
    background-color: transparent;
}

.favorite-content .highlight {
    background-color: @primary-slection  !important;
}

.formActive {
    text-decoration: none;
}

.context-image {
    margin-top: 0px;
}

.context-parent {
    float: right;
    width: 720px;
}

.context-parent-noimage {
    width: 790px !important;
}

.context-parent .card-pager {
    position: absolute;
    top: 0;
    right: 0;
    height: 15px;
    width: 86px;
    text-align: center;
    padding: 0px;
}

.context-parent .context-name-width {
    height: 20px;
}

.context-parent a {
    color: @gray-base;
}

.context-parent .text-center h3 {
    font-size: 18px;
    color: @gray-common;
    margin-top: 25px;
}

.panel-body {
    overflow: hidden;
    font-size: 11.9px;
    line-height: 16px;
}

.context-show-image {
    width: 70px;
    float: left;
}

.search-result-title {
    font-size: 14px;
    font-weight: bold;
}

#colleague-ui .navbar-brand {
    width: 200px;
    margin-right: 90px;
    background-image: url("@{headerLogo}");
    background-repeat: no-repeat;
    margin-left: 10px;
    background-size: contain;
    margin-top: 2px;
    height: 32px;
}

.popover-overlay,
.favorite-overlay {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    z-index: -1;
}

// search history style  important

.search-history-area {
    .text-primary {
        display: inline-block;
        padding: 10px 0 0 0;
    }

    .text-secondary {
        padding: 12px;
        display: inline-block;
    }
}

.menu-help-disable {
    cursor: not-allowed !important;
}

#advanced-search {
    padding-bottom: 15px !important;

    .advancedbtn {
        margin: 15px 0 0 0;
        border-radius: 5px;
    }
}

.selectedpadd {
    padding: 0 15px;
}

.search-table-body {
    -moz-user-select: none;
    user-select: none;
}

.denial-message {
    background-color: @state-danger-bg  !important;
    background-repeat: repeat;
}

#person-search-grid {
    width: 100%;
    overflow-x: hidden;
    overflow-y: visible;

    .table1 {
        float: left;
        width: 50px;
    }

    .table2 {
        float: left;
        width: 900px;
        overflow-x: auto !important;
        /* @supports (-webkit-overflow-scrolling: touch) {
        -webkit-overflow-scrolling: touch;
    }*/
    }

    .searchResultRow {
        // CUI-5565
        min-height: 21px !important;
        height: 21px !important;
    }

    .context-result-grid th.search-table-index {
        min-width: 50px !important;
        left: 35px;
        border-right: 1px solid @navbar-default-link-disabled-color;
    }

    .context-result-grid tr:nth-child(even)>td:first-child,
    .context-result-grid th.search-table-header {
        background-color: @body-bg;
    }

    .context-result-grid tr td {
        white-space: nowrap;
        margin: 0;
        line-height: 1.1;
        cursor: pointer;
        min-width: 65px; // CUI-5565
    }

    .search-table-index {
        float: left;
        width: 35px;
    }

    .sort-icon {
        width: 12px;
        cursor: pointer;
    }
}

.context-image .card-image {
    // margin-top:-4px!important;
    width: 100% !important;
}

.card table .context-td-width:nth-child(2) {
    padding: 0;
}

.card table .context-td-width:nth-child(2) .primary-data.bold.ng-binding {
    color: @primary-color;
    font-weight: bold;
    height: 40px;
    overflow: hidden;
}

.card table .context-td-width:nth-child(2) .primary-data.ng-binding {
    font-size: 95%;
    color: @gray-dark;
}

.card-area .card.disabled,
.left-action .round-context-icon.disabled,
.right-action .round-context-icon.disabled {
    background: @gray-disabled;
    color: @gray-disabled-text  !important;
    border: none;
}

.card-area .card.disabled h3 {
    padding-top: 15px;
}

.context-area .left-action .round-context-icon.disabled,
.context-area .right-action .round-context-icon.disabled {
    border: 1px solid @gray-disabled-text;
}

.context-area .card-navigation-icon.disabled,
.context-area .card.disabled .card-pager {
    display: none;
}

h3.privacy-warning {
    color: @privacy-warning;
}

.context-table .ng-binding {
    display: block;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.card-used.ng-binding {
    width: 53px;
}

.card-email {
    width: 90px;
}

.link-email {
    color: #1a0dab !important;
}

@media (max-width: 768px) {
    .navbar.navbar-default.navbar-fixed-top {
        position: absolute;
    }
}

.search-alert-header {
    color: #4F585F;
    font-size: 18px;
}

.maintenance-form-icon {
    background-image: url(../assets/form-icon-maintenance.svg);
}

.process-form-icon {
    background-image: url(../assets/form-icon-process.svg);
}

.inquiry-form-icon {
    background-image: url(../assets/form-icon-inquiry.svg);
}

.batch-form-icon {
    background-image: url(../assets/form-icon-batch.svg);
}

/*span.batch-form-icon, span.inquiry-form-icon {
    margin-left: 10px !important;
    width: 25px !important;
}

span.maintenance-form-icon {
    margin-left: 13px !important;
    width: 23px !important;
}*/

.form-icon {
    display: inline-block;
    height: 15px;
    width: 10px;
    background-repeat: no-repeat;
    margin-left: 15px;
}

//Add to Favorite //
.favorite-header {
    padding-top: 5px;
    padding-bottom: 25px;
    padding-left: 10px;
    padding-right: 5px;
    border-bottom: 1px solid @input-color-placeholder;
    font-size: 17px;
}

.add-entry-list {
    padding-left: 5px;
    padding-right: 5px;
    list-style: none;
    overflow-y: auto;
    height: 100px;
    border: 1px solid gray;
    border-radius: 4px;
}

.favorite-row-style {
    padding-left: 14px;
    padding-right: 7px;
    padding-top: 7px;
}

.check-in-label {
    padding-top: 20px;
}

.favorite-header-text {
    padding-top: 5px;
    padding-left: 14px;
    font-size: 14px;
}

.favorite-folder-style {
    border-radius: 4px;
    padding-left: 0px;
    cursor: default;
}

.new-folder-btn {
    width: 80px;
    height: 23px;
    font-weight: normal;
    padding: unset;
    font-size: 12px;
}

.add-folder-dropdown {
    width: 390px;
}

.new-folder-success-icon {
    text-align: center;
    color: @success-popup-text-color;
}

.new-folder-success {
    text-align: center;
}

.favorite-popup-top-align {
    top: 100px;
}

/*  */
/* panel design */
.search-history-area .history-title .text-primary {
    color: #4F585F;
    padding: 25px 0 18px 30px;
    font-size: 18px;
    line-height: 24px;
}

.text-primary {
    color: @primary-color;
}

.form-title-area {
    border-right: 1px solid lighten(@primary-color, 40%);
}

.search-history-area .history-title .text-secondary:first-child {
    margin: 20px 7px 0 22px;
    padding: 0;
}

.search-history-area .history-title .text-secondary:last-child {
    margin: 25px 0 0 0;
    padding: 0;
    color: @secondary-color;
    font-size: 13px;
    font-weight: bold;
    line-height: 18px;
}

.search-history-area .history-title .text-secondary .material-icons {
    width: 30px;
    height: 30px;
}

.search-history-area .history-node {
    margin: 4px 0 4px 29px;
    padding: 0 8px;
    height: 24px;
    background: @table-bg-accent;
    border: 1px solid @blue-border-light;
}

.search-history-area .history-node a {
    font-size: 15px;
    line-height: 22px;
}

// .search-history-area div:nth-child(2) div:last-child {
//   margin-bottom: 20px;
// }

.history-node .material-icons.md-18 {
    font-size: 14px;
    margin-right: 10px;
    padding: 0 0 3px 0;
}

.advanced-search-footer {
    margin-top: 10px;
    margin-bottom: -15px;
    border-top: 1px solid #d5d5d5;
    margin-left: -15px;
    margin-right: -15px;

    button {
        height: 40px;
    }
}

.advanced-search {
    width: 925px;
    color: #555;
    vertical-align: middle;
    position: absolute;
    background-color: #fff;
    right: -270px;
    z-index: 1060;
}

.navigate {
    width: 984px;
    color: #555;
    //vertical-align: middle;
    position: absolute;
    background-color: #fff;
    right: -300px;
    z-index: 1060;
    top: 50px;
}

.advanced-search-area {
    padding: 0px 10px 0px 0px;
}

.popover-content .round-context-icon.popover-close {
    width: 30px;
    height: 30px;
    right: -40px;
}

.popover-content .round-context-icon.popover-close .material-icons.md-18 {
    font-size: 24px;
    padding-top: 3px;
}

.primary-data.navigation-area .navgation>ul {
    margin: 25px 0 0 2px;
    padding: 0;
}

.primary-data.navigation-area .navgation ul li {
    font-size: 100%;
}

.primary-data.navigation-area .navgation .browseMenuText {
    font-size: 13px !important;
    padding: 0;
}

.primary-data.navigation-area .navgation .navgation-header {
    margin-top: 15px;
    margin-left: 25px;
}

.primary-data.navigation-area .navgation .navigation-header-height {
    height: 30px;
}

.primary-data.navigation-area .navgation .navgation-body {
    width: 950px !important;
    max-width: 950px !important;
    max-height: 80vh !important;
    overflow: scroll !important;
    overflow-x: hidden !important;
    margin-top: 10px;
}

.primary-data.navigation-area .navigation-menu {
    margin-top: 0;
}

.primary-data.navigation-area .navigation-menu>ul {
    margin: 17px 0 7px 0px;
}

.primary-data.navigation-area .navigation-menu ul {
    margin-left: 0 !important;
}

.primary-data.navigation-area .navigation-menu ul ul {
    padding: 5px 0 0 10px !important;
}

.primary-data.navigation-area .navigation-menu ul ul li>div {
    padding: 3px 0 !important;
}

.primary-data.navigation-area .navigation-menu ul ul.navigation-current-items li {
    margin: 0 !important;
    padding: 0 !important;
}

.primary-data.navigation-area .navigation-menu ul ul.navigation-current-items {
    padding: 0 !important;
}

.primary-data.navigation-area .navigation-menu li button {
    padding-left: 29px;
    padding-top: 0;
    margin-left: 0 !important;
}

.popover-content .person-advanced-search .primary-data {
    margin: 25px 0 22px 7px;
    font-size: 13px !important;
    padding: 0;
    font-weight: bold;
    text-transform: uppercase;
}

.popover-content .person-advanced-search .advancedbtn {
    height: 30px;
}

.popover-content .person-advanced-search .advance-search-text-field {
    padding: 0 0 0 15px;
}

.popover-content .person-advanced-search #advanced-search {
    padding-bottom: 30px !important;
}

.context-search-result-title {
    height: 64px;
    padding: 16px 0 0 7px;
}

.context-search-result-title .primary-data.strong,
.search-result-title {
    color: @font-color;
    margin-top: -10px;
    font-size: 11.5px;
    line-height: 17px;
}

.context-search-result-title .primary-data.strong,
.search-result-title>span.text-limit {
    font-size: 11.5px;
    font-weight: bold;
}

.person-search-result .primary-data.search-result-title {
    width: 170px;
    display: inline-block;
    float: left;
}

.search-result-detail {
    min-width: 31px;
    height: 30px;
    text-align: center;
    cursor: pointer;
    vertical-align: middle;
}

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

/* favorites panal modal dialog*/
#favorites {
    .modal-dialog {
        min-width: 641px;
    }

    .modal-header {
        padding-bottom: 0;
    }

    .modal-body {
        padding: 0;

        .favorite-divider {
            margin: 0;
        }
    }

    li.highlight,
    .tree-level:hover,
    .tree-level:focus {
        outline: 0;
    }

    li.hover-fav,
    .tree-level:hover,
    .tree-level:focus {
        background-color: transparent;
    }

    .favorite-divider>div:first-child {
        border-right: 1px solid @navbar-default-link-disabled-color;
    }

    .row.favorite-divider>div {
        padding: 30px 0 0 0;
    }

    .favorite-divider ul {
        list-style-type: none;
    }

    .favorite-content>div>ul.favorite-list {
        padding-left: 0;
    }

    .favorite-subheader-title {
        color: @nav-bar-color;
        font-size: 12px;
    }

    .favorite-header {
        padding-left: 22px;
    }

    .favorite-subheader {
        padding-left: 23px;

        .dropdown {
            margin-right: 21px;
            margin-top: -8px;
        }

        a.dropdown-toggle {
            color: #000;
            display: inline-block;
            text-align: center;
            max-height: 15px;
            min-width: 10px;
        }

        ul.dropdown-menu {
            padding: 0;
            border: 1px solid @nav-bar-color;

            >li>a {
                padding: 10px 26px 10px 17px;
                border-radius: 5px;
                color: @navbar-inverse-link-disabled-color;
            }

            >li:nth-last-child(2)>a {
                padding-bottom: 20px;
            }

            >li>a:hover,
            >li>a:focus {
                background-color: @button-hover-common;
                border-bottom: 1px solid @blue-border-dark;
                border-top: 1px solid @blue-border-dark;
                outline: 0;
            }
        }
    }

    .favorite-content {
        color: #000000;
        font-size: 15px;
        height: 325px;
        overflow: auto;
        margin-top: 12px;
        cursor: pointer;

        .tree-leaf {
            color: #000000;
            display: flex;
        }

        li {
            padding: 6px 0;
            white-space: nowrap;
        }

        .parant-branch {
            padding: 0;
        }

        i {
            margin-right: 5px;
            padding: 0 7px;
        }

        >div {
            margin-top: 135px;
            margin-left: 69px;
        }
    }

    .favorite-active {
        margin-right: 13px;
        display: inline-block;

        .round-context-icon {
            //border: 2px solid @secondary-color;
            margin: 0;
            width: 22px;
            height: 22px;
            color: @secondary-color;

            .material-icons {
                margin-top: -11px;
                font-size: 16px;
            }
        }

        .dropdown-menu {
            right: 0;
            left: auto;
        }
    }

    .favorites-relative {
        position: relative;
    }

    .folder-highlight {
        margin-top: -6px;
    }

    .favorites-icon {
        color: #5B5E65 !important;
        border: 2px solid #5B5E65 !important;
        width: 21px !important;
        height: 21px !important;
        background-color: none !important;
    }

    li.highlight,
    .tree-level:hover,
    .tree-level:focus {
        background-color: @primary-slection;
        border-bottom: 1px solid @primary-border;
        border-top: 1px solid @primary-border;
    }

    .favoritePopup {
        border: 2px solid @navbar-default-bg;
        width: 220px !important;
        border-radius: 4px;
        padding-top: 1px;
        padding-bottom: 1px;
    }

    .favoritePopupDesign>a {
        padding-top: 8px;
        padding-bottom: 8px;
        padding-left: 10px;
    }

    .favorite-active ul li:hover {
        background-color: @modal-hover-background-color;
        border-top: 1px solid @modal-hover-border-color;
    }

    span.user-icon {
        position: relative;
        float: left;
        width: 14px;
        height: 14px;
        margin-top: -2px;
        margin-right: 10px;
        margin-left: 7px;

        svg {
            fill: #000000;
            stroke: #000000;
            font-size: 10px;
            position: absolute;
            top: 4px;
        }
    }

    ul.outer-tree-wrap,
    .favorite-content li {
        display: table;
        width: 100%;
    }

    ul.outer-tree-wrap,
    ul.outer-tree-wrap ul {
        padding: 0;
    }

    .form-icon {
        margin-left: 7px;
        margin-top: 4px;
    }
}

.favorite-list li button {
    border: none;
    list-style: none;
    font-size: 14px;
    text-align: left;
    text-decoration: none;
    cursor: pointer;
    background-color: white;
    width: 100%;
}

.favorite-list li button.highlight {
    background-color: lighten(@primary-color, 60%);
    border-top: 1px solid lighten(@primary-color, 50%);
    border-bottom: 1px solid lighten(@primary-color, 50%);
}

.favorite-list li button:active {
    background-color: lighten(@secondary-color, 45%) !important;
    border-top: 1px solid lighten(@secondary-color, 50%) !important;
    border-bottom: 1px solid lighten(@secondary-color, 50%) !important;
}

.favorite-list li button:focus {
    background-color: lighten(@secondary-color, 45%) !important;
    border-top: 1px solid lighten(@secondary-color, 50%) !important;
    border-bottom: 1px solid lighten(@secondary-color, 50%) !important;
}

.favorite-list li button:hover {
    background-color: lighten(@secondary-color, 45%) !important;
    border-top: 1px solid lighten(@secondary-color, 50%) !important;
    border-bottom: 1px solid lighten(@secondary-color, 50%) !important;
}

.emptyFolderPosition {
    margin-left: 10px;
}

.form-search-result .tooltip,
.person-search-result .tooltip {
    top: 44px !important;
    opacity: 1 !important;
}

/* favorite panal modal dialog ends */
@media screen and (-webkit-min-device-pixel-ratio: 0) {
    .person-search-result .context-search-result-title a {
        position: relative;
        top: 0;
    }
}

@media all and (-ms-high-contrast: none),
(-ms-high-contrast: active) {
    .history-node .md-18.material-icons {
        margin-top: 5px;
    }
}

/* Preference style begins */

.preference-wrapper .modal-content {
    width: 695px;
    height: 550px;
}

.preference-wrapper .modal-footer {
    margin-top: 45px;
}

/* Support Chrome, Opera and safari */
@media screen and (-webkit-min-device-pixel-ratio: 0) and (min-resolution: .001dpcm) {
    .preference-wrapper .modal-footer {
        margin-top: 50px !important;
    }
}

.preference-wrapper .popover-close-favorite {
    right: -165px;
}

.preference-wrapper .modal-header {
    height: 90px;
    padding: 20px 35px;
}

.preference-wrapper hr {
    margin: 0;
}

.preference-wrapper .modal-header .header {
    color: @black-color;
    font-size: 18px;
    line-height: 24px;
}

.preference-wrapper .modal-header h4 {
    color: @black-color;
    font-size: 14px;
    line-height: 20px;
    margin-top: 10px;
}

.preference-wrapper .modal-body {
    padding-top: 15px;
}

.preference-wrapper .text-primary {
    font-size: 12px;
    line-height: 17px;
}

.preference-wrapper legend {
    border: 0 none;
}

.preference-wrapper div.col-sm-6.misc-right legend {
    border: 0 none;
    margin-bottom: -5px;
}

.preference-wrapper span.text-primary {
    display: inline-block;
    font-weight: bold;
}

.change-password-heading {
    display: inline-block;
    font-weight: bold;
}

.preference-wrapper div.col-sm-6.misc-right {
    margin-top: -6px;
    border-left: 2px solid @misc-border;
}

.preference-wrapper .text-secondary {
    color: @secondary-color;
    font-size: 13px;
    line-height: 18px;
}

.prefer-radio {
    margin-top: 10px;
    position: relative;
    top: 5px;
}

.miscell {
    margin: 15px 0;
}

.radio-inline span {
    display: inline-block;
    min-width: 30px;
    min-height: 30px;
    margin-right: 10px;
    border-radius: 3px;
}

span.purple {
    background-color: @theme-preview;
}

span.blue {
    background-color: @theme-preview1;
}

span.orange {
    background-color: @theme-preview2;
}

span.green {
    background-color: @theme-preview3;
}

span.brown {
    background-color: @theme-preview4;
}

span.red {
    background-color: @btn-default-border;
}

span.black {
    background-color: @gray-base;
}

.preferenceRed {
    background-color: @preference-red-color;
}

.misce-label {
    margin-bottom: 5px;
    display: inline-block;
    font-size: 16px;
    font-weight: bold;
}

.prev-grid-view {
    margin-left: 15px;
}

.display-note {
    margin-top: 12px;
    color: @black-color;
    font-size: 14px;
    line-height: 20px;
}

.rename-input {
    color: #000000;
    border: 2px solid @primary-color;
    padding-left: 5px;
    min-width: 25%;
}

.search-icon-focus {
    fill: @primary-color;
}

span[disabled] {
    pointer-events: none;
}

.excel-form-icon {
    background-image: url(../assets/excel.svg);
}

.pagination-icon {
    display: inline-block;
    background-repeat: no-repeat;
    margin-top: 3px;
    max-width: 100%;
    max-height: 100%;
    background-size: cover;
    margin-left: 3px;
    margin-right: 3px;
}

.excel-window-icon {
    display: inline-block;
    background-repeat: no-repeat;
    max-width: 100%;
    max-height: 100%;
    background-size: 16px 20px;
    background-position: 2px top !important;
    padding: 0px;
    height: 18px !important;
}

.excel-icon {
    display: inline-block;
    background-repeat: no-repeat;
    margin-top: 3px;
    max-width: 100%;
    max-height: 100%;
    background-size: cover;
}

.window-control-paging {
    border: none;
    cursor: pointer;
    font-size: 1.2em;
    font-weight: 600;
    padding: 1px;
    margin-right: 1px;
}

.window-control-paging-disabled {
    border: none;
    cursor: pointer;
    font-size: 1.2em;
    font-weight: 600;
    padding: 1px;
    margin-right: 1px;
}

.window-control-paging-cursor {
    cursor: pointer;
}

.window-control-paging-cursor-disabled {
    cursor: default;
}

.scaling-first-svg {
    margin-left: 10px;
}

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

.scaling-prev-svg {
    margin-left: 0px;
}

.window-pagination-input {
    margin-left: 10px;
    margin-right: 25px;
}

.paging-controls {
    margin-left: 10px;
}

.scaling-next-svg {
    margin-left: 0px;
}

.scaling-last-svg {
    margin-left: 0px;
}

.Zone1Message {
    top: 8px;
    text-align: left;
    margin-left: 100px;
    position: absolute !important;
}

.Zone3Message {
    top: 8px;
    margin-left: 20px;
    position: absolute !important;
    left: 670px;
}

.active-color svg {
    cursor: pointer;
}

.disable-color svg {
    fill: #B8B8B8;
    cursor: default;
}

.sidebar-icon .tooltip {
    width: 150px;
}

/* Preference style ends */

/* Context area bug fixing begins */
.left-action .card-navigation-icon #left-arrow,
.right-action .card-navigation-icon #right-arrow {
    height: 40px;
    width: 13px;
    margin-top: 5px;
}

.right-action .round-context-icon {
    margin: 6px 0 0 0;
}

.left-action .round-context-icon {
    margin: 6px 0 0 3px;
}

.context-name-width .nav-justified>li {
    font-size: 16.3px;
    line-height: 20px;
    position: relative;
    left: -3px;
}

.right-action.right-action-icon .close-context-popover {
    width: 329px !important;
    height: 78px;
}

.card-area .card.disabled {
    background: @context-diable-bg  !important;
    cursor: default !important;
    opacity: 1 !important;
}

.card-area .card.context-open {
    border: 1px solid @nav-bar-color;
    box-shadow: 0 1px 1px @nav-bar-color inset;
}

.card-area .card.disabled h3 {
    color: #283036 !important;
    font-size: 16.3px;
    padding-top: 22px;
    font-weight: bold;
}

.card-area .card.disabled a {
    color: @card-disabled  !important;
    cursor: pointer !important;
    text-decoration: none !important;
}

/* for warning */
.card-area .card .warning {
    width: 542px;
    left: 40px;
    background: @card-warning;
    border: 1px solid @warning-border;
    opacity: 1;
    border-radius: 3.5px;
    box-shadow: -0px 4px 14px @warning-shadow;
    height: 50px;
    margin-top: -50px;
    position: relative;
    padding: 14px;
}

.card-area .card .dismiss {
    background: @card-warning;
    border: 1px solid @warning-border;
    opacity: 1;
    border-radius: 0 3.5px 3.5px 0;
    height: 50px;
    margin-top: -50px;
    position: relative;
    padding: 14px;
    width: 93px;
    right: 47px;
    float: right;
    box-shadow: 8px 3px 14px @warning-shadow;
}

.warning-message {
    width: 100%;
    position: absolute;
    left: 14px;
    top: 14px;
}

.card-area .card .warning span {
    color: @warning-border;
    font-size: 14px;
    line-height: 19px;
    font-weight: bold;
}

.card-area .card .warning .dismiss {
    color: @warning-border;
    line-height: 15px;
    // font-family: Helvetica Neue !important;
    font-weight: bold;
    font-size: 14px;
}

.warning-dismiss {
    margin-left: 0%;
    cursor: pointer;
    color: #C29100;
    font-weight: bold;
    font-size: 14px;
}

/* for denied */
.card-area .card .denied {
    font-size: 16.3px !important;
    line-height: 20px;
    text-align: center;
    padding-top: 30px;
}

.card-area .card .denied label {
    color: @privacy-warning-color;
    font-size: 16.3px !important;
    line-height: 22px;
    font-weight: bold;
}

/* Context area bug fixing ends */

/* Grid privacy message */

#showme {
    display: none;
}

.privacy-message-alert-danger-text:hover #showme {
    display: block !important;
    position: absolute;
    z-index: 10;
    height: 40px;
    padding: 10px;
    margin-top: 2px;
    background-color: @state-danger-bg  !important;
    border: 2px solid red;
    color: @black-color;
    border-radius: 5px;
    font-weight: 600;
}

.privacy-message-alert-danger-text:focus #showme {
    display: block !important;
    position: absolute;
    z-index: 10;
    height: 40px;
    padding: 10px;
    margin-top: 2px;
    background-color: @state-danger-bg  !important;
    border: 2px solid red;
    color: @black-color;
    border-radius: 5px;
    font-weight: 600;
}

.popup-processing-spinner {
    margin-bottom: 20px;
    margin-top: 10px;
}

/* Bar Graph */
.barGraph-wrapper .modal-content {
    width: 540px;
    height: 700px;
}

.bar-graph-modal-dialog {
    top: 60px !important;
    bottom: 30px;
}

.bar-graph-modal {
    padding-left: 192px !important;
    padding-right: 191px;

    .checkbox {
        margin-left: 0 !important;
    }
}

.bar-graph {
    padding-top: 5px !important;
    padding-left: 20px !important;
    padding-right: 20px !important;
}

.bar-graph-footer,
.report-browser-footer {
    margin-left: -20px;
    margin-right: -20px;
}

.bar-graph-header {
    border-bottom: 1px solid @border-color  !important;
    padding-left: 20px !important;
}

.bar-graph-label {
    padding-top: 15px;
    padding-bottom: 15px;
}

.bar-graph-process-value {
    padding-bottom: 15px;
    margin-left: 30%;
}

.bar-graph-process-percentage {
    float: right;
}

.bar-graph-textArea {
    color: @text-color;
    font-size: 13px;
    padding-top: 5px !important;
}

.progress-bar-style,
.progressOuter {
    overflow: hidden;
    height: 40px;
    margin-bottom: 20px;
    background-color: @progress-bar-background-color  !important;
    border-radius: 0;
    border: 2px solid @border-color;
}

.progressInner {
    background-color: @secondary-color;
    height: 40px;
}

.barGraph-on-success {
    color: @bar-graph-text  !important;
    font-size: 13px !important;
    background-color: @secondary-color-active  !important;
    height: 40px;
}

.barGraph-on-failure {
    background-color: @progress-bar-failure-color;
    border: 1px @bar-graph-border;
    color: @bar-graph-border;
}

.bar-graph-processComplete {
    margin-top: 20px;
    color: @text-color;
}

.progress {
    height: 3em;

    i {
        line-height: 3.5em;
    }
}

.progress-bar {
    transition: width 1s ease-in-out;
}

.progress-bar-primary {
    width: 107%;
    margin-left: -15px;
    border: 2px solid @border-color;
    color: @black-color;
}

.progress-bar-border {
    border: 1px solid @progress-bar-border-color  !important;
}

.progress-bar-text {
    padding-top: 10px !important;
}

.bar-graph-dataText {
    padding-left: 3px;
}

.bar-graph-text-color {
    color: @black-color;
}

/*  General Modal Styling*/
.modal .modal-header {
    padding: 20px 35px;
}

.modal hr {
    margin: 0;
}

.modal .modal-header .header {
    color: @black-color;
    font-size: 18px;
    line-height: 24px;
}

.modal .modal-header h4 {
    color: @black-color;
    font-size: 14px;
    line-height: 20px;
    margin-top: 10px;
}

.modal .modal-body {
    padding-top: 15px;
}

.modal .text-primary {
    font-size: 12px;
    line-height: 17px;
}

.modal .text-secondary {
    color: @secondary-color;
    font-size: 13px;
    line-height: 18px;
}

#viewallcontext {
    .popover {
        left: 80px !important;
        width: 890px !important;
    }

    .popover-content {
        padding: 0;
    }

    .context-manager-header {
        padding: 20px 0;
    }

    .card-record {
        min-height: 95px;
    }

    .context-manager-card {
        padding: 0 0 10px 0;

        .contextCardImage {
            margin-top: -8px;
            margin-left: 10px;
        }

        .contextCardName {
            display: inline-block;
            color: @nav-bar-color;
            width: 150px;
            white-space: nowrap;
            overflow: hidden !important;
            text-overflow: ellipsis;
        }

        .contextCardid {
            color: #000000;
        }
    }

    #select-number {
        width: 60px;
        border-radius: 4px;
    }

    .context-pager .btn-form-action {
        width: 60px !important;
    }

    .btn-form-action {
        height: 25px !important;
    }

    #manager-header input[type="checkbox"] {
        width: 18px !important;
    }

    .card-count {
        width: 150px;
        text-align: center;
        background: @btn-default-border;
    }

    .helpicon {
        margin-right: 20px;
    }

    .context-favorite-button {
        width: 75px;
    }

    .selected {
        background-color: @primary-slection;
    }
}

/* Report browser*/
.report-browser-modal .modal-content {
    width: 874px;
    right: 160px;
    top: 45px;
}

.report-browser-modal {
    z-index: 1049 !important;
}

.report-browser-content {
    height: 400px;
    width: 846px;
    border: 1px solid @navbar-default-link-disabled-color;
    border-radius: 5px;
    box-shadow: inset 0 -2px 0 0 @input-shadow;
    -webkit-box-shadow: inset 3px 3px 4px 0 @input-shadow;
    margin-left: 10px;
    padding-left: 10px;
}

.report-browser .modal-body {
    padding: 24px;
    padding-top: 12px;
    padding-left: 5px;
}

.report-browser-content>div {
    width: 960px;
}

.full-screen.report-browser-content {
    height: calc(~"100vh - 170px") !important;
    ;
    width: 915px;
    max-height: calc(~"100vh - 170px") !important;
}

.report-browser-modal .full-screen.modal-content {
    width: 945px;
    right: 216px;
}

.report-browser-modal.modal .modal-header {
    padding: 24px;
}

input.report-browser-pagination {
    padding: 0 5px;
    border: 1px solid @navbar-default-link-disabled-color;
    border-radius: 0.429em;
    box-shadow: inset 2px 2px 0 0 @box-shadow;
    width: 50px;
    height: 24px;
}

.report-browser-btn {
    margin-left: 10px;
    height: 25px;
    width: auto;
    padding: 0 1.25rem 0 1.25rem !important;
    font-weight: inherit;
}

.pagination-ctr {
    width: 17px;
    padding: 2px;
    font-size: 12px;
    display: inline-block;
    text-align: center;
}

.pagination-ctr:hover {
    border: 1px solid @btn-default-border;
    border-radius: 5px;
    -webkit-box-shadow: inset 0 -2px 0 0 @input-shadow;
    box-shadow: inset 0 -2px 0 0 @input-shadow;
}

.page-view-size {
    padding: 0 20px;
    font-size: 14px;
    color: blue;
}

.report-browser-close {
    margin-left: 5px;
}

.report-browser-content pre {
    padding: 0;
    margin: 0;
    height: 100%;
    background-color: transparent;
    border: none;
}

.report-browser-text {
    font-size: 10.5px;
    font-family: monospace !important;
}

.fileDownload {
    top: 100px;
}

/* modal popup text alignment*/
.normal {
    width: 540px !important;
}

.extra {
    width: 700px !important;
}

.popup-position {
    top: 20px !important;
}

#prompt .modal-body p {
    font-size: 14px !important;
    padding: 4px 0 !important;
    text-align: center !important;
}

.input-sm {
    padding-left: 1.5px !important;
    min-width: 2rem !important;
    font-size: 11.5px !important;
}

/* form and person button in search*/

.transparent-button {
    background-color: transparent;
    border: none;
}

.btn-selected-view {
    height: 32px;
    width: 38px;
    border-radius: 5px !important;
}

.selected-cardView {
    margin-left: -5px;
    margin-top: -2px;
}

.toggle-cardView {
    margin-top: -2px;
}

.selected-gridView {
    margin-left: -5px;
    margin-top: -2px;
}

.toggle-gridView {
    margin-top: -2px;
}

.search-link .full-height-button {
    height: 36px;
}

.searchTypeMenuTitle {
    a {
        color: @body-bg  !important;
    }

    .user-search {
        padding: 10px 20px 8px 15px;
        text-align: center;
        color: #fff;
    }

    .form-search {
        padding: 10px 20px 7px 20px;
        text-align: center;
        color: white;

        .fa-file-o {
            font-size: 15px;
            font-weight: bold;
        }
    }

    .search-active {
        background: @primary-highlight  !important;
    }
}

.form-element {
    margin-left: 4px !important;
}

.search-link input {
    position: relative;
    //top: -2px;
}

.screen-reader-text {
    clip: rect(1px, 1px, 1px, 1px);
    height: 1px;
    width: 1px;
    overflow: hidden;
    position: absolute !important;
}

button:focus {
    border: 1px dotted #333;
}

button:focus {
    border: 1px dotted #333;
}

.search-icon {
    position: absolute !important;
    z-index: 1;
    top: 9px;
    left: 25px;
}

.search-icon-button {
    left: 238px !important;
    cursor: pointer;
}

.search-input-padding {
    padding-left: 5px !important;
    padding-right: 65px !important;
}

.textunderline {
    text-decoration: underline;
}

/* Multi Line Editor */

.multi-line-popup {
    padding-left: 0px;
    padding-right: 80px;
}

.multi-line-wrapper .popover-close-multi-line-editor {
    right: -255px;
}

.multi-line-editor-modal {
    padding-left: 192px !important;
    padding-right: 191px;
}

.multi-line-wrapper .modal-content {
    width: 740px;
    height: 600px;
}

.multi-line-editor {
    padding-top: 5px !important;
    padding-left: 20px !important;
    padding-right: 20px !important;
}

.multi-line-btn {
    padding-right: 20px;
    padding-left: 20px;
    margin-right: 10px;
    line-height: 1;
    font-weight: normal !important;
}

.multi-line-row {
    padding-top: 25px;
}

.multi-line-input {
    width: 687px;
    height: 45px;
    background-color: @primary-slection  !important;
    border-color: #ccc !important;
    pointer-events: none;
    border-radius: 0px;
    border-width: 2px;
    text-align: center;
}

.multi-line-content {
    width: 687px;
    height: 200px;
}

.find-next-btn {
    background-color: @button-hover-common;
    border-color: @multi-editor-border;
    opacity: 1.0;
    border-radius: 4.3px;
}

.search-btn {
    max-width: 130px !important;
    height: 28px !important;
}

// calculator theme color
.calcTable {
    border: 2px solid @primary-color;
}

.multi-line-editor-outline {
    border: 1px solid #ccc;
    height: 207px;
    width: 99%;
    overflow-y: auto;
}

.textarea-view {
    resize: none;
    overflow: auto;
    outline: none;
    -webkit-box-shadow: none;
    -moz-box-shadow: none;
    box-shadow: none;
    height: 350px;
    font-family: monospace;
    font-size: 12px;
    overflow-y: scroll;
}

.textarea-view-ie {
    word-wrap: normal !important;
}

.report-browser-text-area {
    border: none;
    border-radius: 3px;
    width: 100%;
    margin: 0px;
    height: 100%;
    overflow: auto;
    background-color: white !important;
    outline: none;
    margin-left: -5px;
    margin-right: -5px;
    resize: none;
}

.multi-line-btn:active {
    background-color: #CEE7FF !important;
    border-bottom: 0 !important;
}

.rightAlign {
    text-align: right;
    padding-right: 3px !important;
}

.matchString {
    color: #53185c;
    margin-left: 84%;
}

.exportPDFRow {
    margin-left: 10px;
    margin-top: 15px;
}

.exportPDFCol1 {
    width: 60px;
    margin-right: 5px;
    text-align: right;
    margin-left: 52px;
}

.exportPDFCol2 {
    width: 90px;
    margin-right: 10px;
    text-align: right;
    margin-left: 10px;
}

.fontsizeinput {
    width: 50px;
}

.selectControl {
    width: 200px;
}

.horizantalline {
    margin-top: 25px;
    margin-right: 20px;
}

.orientationradio {
    margin-top: -10px;
}

.sign-in-bg::after {
    background-color: @primary-color;
}

.temp-context {
    text-align: center;

    >p {
        color: @primary-color;
        font-size: 16.3px;
        line-height: 20px;
        position: relative;
        left: -3px;
    }

    >h3 {
        color: #999 !important;
        font-size: 16.3px;
        padding-top: 10px;
        font-weight: bold;
    }
}

#chess {
    width: 30px;
    height: 30px;
    /* margin: 0.5em; */
    border: 1px solid #808080;
}

#chess div {
    float: left;
    width: 14px;
    height: 14px;
    background-color: #fff;
}

#chess div:nth-child(2),
#chess div:nth-child(3) {
    background-color: #000;
}

// advanced search

/* styling for printer devices*/
@media print {

    html,
    body {
        height: 100% !important;
        page-break-after: always;
        margin: 0 0 0 0;
    }

    @page {
        size: auto;
        /* auto is the initial value */
    }

    .printer-head {
        position: fixed;
        top: 20px;
        width: 100%;
        border-bottom: 1px solid #ccc;
        height: 30px;
        left: 0;
        text-align: center;
    }

    #ui-form.form-scaling-fixed {
        transform: scale(0.87) !important;
        /* default scale of form for printing*/
    }

    .person-Count-in-form-header {
        float: right;
        margin-top: -20px;
    }

    .form-width {
        border: 1px solid #ccc;
        display: inline;
        margin: 0;
        float: none !important;
        padding: 0;
        overflow-y: visible;
        overflow-x: visible;
        width: 100% !important;
        height: auto !important;
        background: transparent;
    }

    .form-title-area,
    .container {
        border: none;
    }

    .collegue-form-label {
        white-space: nowrap;
    }

    .search-result-image {
        display: inline;
        margin: 0 auto;
        height: 60px;
        width: 60px;
    }
}

.privacy-warning-icon,
.warning-icon {
    position: absolute;
    top: 1px;
    left: 1px;
    color: @privacy-warning-color;
    font-size: 18px;
}

.warning-li {
    width: 20px !important;
    height: 25px !important;
}

.warning-icon {
    color: @warning-border;
}

.warning-icon-margin {
    margin-bottom: 7px;
}

.advanced-search-help {
    margin-top: 25px;
}

.helpFill {
    fill: #5B5E65;
}

.helpStroke {
    stroke: #5B5E65;
}

.form-icon-margin {
    margin-top: -10px !important;
    margin-left: -5px !important;
    stroke: #000000;
    fill: #000000;
}

.batch-form-icon-margin {
    margin-top: -10px !important;
    margin-left: -5px !important;
    stroke: #000000;
    fill: #000000;
}

.maintenance-form-icon-margin {
    margin-top: -10px !important;
    margin-left: -5px !important;
    stroke: #000000;
    fill: #000000;
}

.inq-form-icon-margin {
    margin-top: -10px !important;
    margin-left: -5px !important;
    stroke: #000000;
    fill: #000000;
}

//region Custom Field Sequence

/**
Style for Sequence Order span
 */
.sequence-Order-Icon {
    background: #7272D9;
    color: #FFFFFF;
    width: 20px;
    height: 20px;
    text-align: center;
    vertical-align: middle;
    position: absolute;
    z-index: 2;
    left: 1px;
    top: 1px;
    border-radius: 3px;
    -webkit-border-radius: 3px;
    -moz-border-radius: 3px;
}

/**
Enlarge the sequence order icon when the field is selected
 */
.selected-Sequence-Order-Icon {
    margin-left: 26px !important;
    font-weight: bolder;
    font-size: larger;
    top: -2px !important;
    width: 25px !important;
    height: 25px !important;
}

/**
Change color for any customized element
 */
.customized-sequence-order-icon {
    background: #de1c5a !important;
}

/**
Style applied to Sequence Order span when Element order is displayed to the left of it
 */
.shift-Sequence-Order-Icon {
    margin-left: 21px;
}

/**
Style for Element Order span
 */
.element-Order-Icon {
    background: #0255A0;
    color: #FFFFFF;
    width: 20px;
    height: 20px;
    text-align: center;
    vertical-align: middle;
    position: absolute;
    z-index: 1031; // Keep the element order icon enabled
    left: 1px;
    top: 1px;
    border-radius: 3px;
    -webkit-border-radius: 3px;
    -moz-border-radius: 3px;
    cursor: pointer;
}

/**
Enlarge the element order icon when the field is selected
 */
.selected-Element-Order-Icon {
    font-weight: bolder;
    font-size: larger;
    top: -2px !important;
    width: 25px !important;
    height: 25px !important;
}

/**
Style for header element order icons
 */
.header-element-Order-Icon {
    background: #0255A0;
    color: #FFFFFF;
    width: 20px;
    height: 20px;
    text-align: center;
    vertical-align: middle;
    position: absolute;
    z-index: 1031; // Keep the element order icon enabled
    left: 0px;
    top: 1px;
    border-radius: 3px;
    -webkit-border-radius: 3px;
    -moz-border-radius: 3px;
    cursor: pointer;
}

/**
Enlarge the element order icon when the header field is selected
 */
.selected-Header-Element-Order-Icon {
    font-weight: bolder;
    font-size: larger;
    top: -2px;
    width: 25px;
    height: 25px;
}

/**
Style for the div that disables the background when "Show Field Sequence" or "Customize Field Sequence" option is selected
 */
#disablingDiv {
    /* Do not display it on entry */
    display: none;
    /* Display it on the layer with index 1031.
   Make sure this is the highest z-index value
   used by layers on that page */
    z-index: 1031;
    /* make it cover the whole screen */
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    /* make it white but fully transparent */
    background-color: white;
    opacity: .00;
    filter: alpha(opacity=00);
}

/**
Style for the tick mark in front of "Disable Custom Field Sequence" option
 */
#disableCustomFieldSequenceCheck {
    display: none;
    margin-left: -18px;
}

/**
Style for the Customize Field Sequence And Properties overlay on top of context card area
 */
div.customFieldSequenceContainer {
    background-color: #EFF7FF !important;
    box-shadow: 0 2px 20px 0 rgba(0, 0, 0, 0.15);
    border: solid 1px #0255A0;
    color: @sequence-order-color;
    width: 1024px;
    height: 172px !important;
    position: absolute;
    border-radius: 15px;
    -webkit-border-radius: 3px;
    -moz-border-radius: 3px;
    z-index: 1031;
    top: 0;
    left: 0;
    padding: 0px 5px 5px 5px !important;
}

/**
Style for the title in customize field sequence and properties window
 */
.customFieldSequenceContainerTitle {
    width: 614px;
    height: 24px;
    font-size: 18px;
    font-weight: 600;
    text-align: left;
    color: #0255A0;
}

/**
Style for labels in Customize field sequence and properties
 */
.customFieldSequenceFieldLabel {
    font-size: 14px;
    font-weight: 600;
    text-align: left;
    color: #0255A0;
}

/**
Style for Checkbox labels in Customize field sequence and properties
 */
.customFieldSequenceCheckboxLabel {
    font-weight: 600;
    font-size: 14px;
    text-align: left;
    color: #0255A0;
}

/**
Make the "first" and "last" text bold
 */
.customFieldSequenceBoldLabel {
    font-size: 16px;
}

/**
Style for the labels in front of checkboxes. This will align the labels to the middle and keep them in
line with the checkbox in front of them.
 */
.vCenter {
    vertical-align: middle;
    vertical-align: -webkit-baseline-middle;
    float: none !important;
    padding-left: 1px;
}

/**
Style for height of each row inside the Customize Field Sequence and Properties overlay
 */
div.customFieldSequenceContainer div.row {
    height: 35px;
}

/**
First row in the Customize Field sequence and Properties overlay will be padded from the top a little.
This is done so that the text and controls are not touching the top edge of the container.
 */
.firstRowStyle {
    padding-top: 2px;
}

/**
Style to change width of Current Field Dropdown and Next Field Dropdown list
 */
.fieldDropdown {
    width: 150px;
    height: 24px;
    object-fit: contain;
    border-radius: 6px;
    background-color: #ffffff;
    box-shadow: inset 2px 2px 0 0 rgba(64, 116, 128, 0.1);
    border: solid 1px #0255A0;
    color: #444444;
    font-size: 14px;
    font-weight: 600;
}

/**
Style to change width of Clear All Fields button so that it aligns with the Clear this field button
 */
.clearFieldButton {
    width: 150px;
    height: 24px;
    font-size: 14px;
    font-weight: normal;
    object-fit: contain;
    border-radius: 6px;
    padding: unset;
}

/**
Style for checkboxes
 */
.customFieldSequenceCheckbox {
    width: 20px;
    height: 20px;
    object-fit: contain;
    border-radius: 4px;
    background-color: #ffffff;
    box-shadow: inset 1px 1px 0 0 rgba(64, 116, 128, 0.1);
    border: solid 1px #0255A0;
}

/**
Style to change the width of Customize For Dropdown list
 */
.customizeForDropdown {
    width: 140px;
    height: 24px;
    object-fit: contain;
    border-radius: 6px;
    background-color: #ffffff;
    box-shadow: inset 2px 2px 0 0 rgba(64, 116, 128, 0.1);
    border: solid 1px #0255A0;
    font-size: 14px;
    font-weight: 600;
    color: #444444;
}

/**
Style to change width of Save and Cancel actions in Customize Field Sequence and Properties overlay
 */
.customizeFieldSequenceActionBtn {
    width: 69px;
    height: 24px;
    object-fit: contain;
    border-radius: 6px;
    font-size: 14px;
    font-weight: normal;
    text-align: center;
    padding: unset;
}

/**
Style for disabled text
 */
.customFieldSequenceDisabledText {
    color: @container-text-disabled-color  !important;
}

/**
Display background color to highlight the hovered element
 */
#divCopyToOtherUsersItem:hover {
    background-color: @result-hover;
}

#divCopyToOtherUsersItem {
    color: #000;
    padding: 3px;
    border: 0px solid;
    border-radius: 3px;
}

/**
Style for any user that is already customized.
 */
.copyToUserCustomized {
    font-weight: bold !important;
}

/**
Disable Copy to other users link
 */
.disableCopyToUsersLink {
    color: #808080 !important;
    cursor: default;
}

/**
Style for copy to other users
 */
.spanCopyToOtherUsers {
    position: absolute;
    margin-top: -35px;
    margin-left: -250px;
}

/**
Style for numbered boxes legend modal
 */
.spanNumberedBoxesLegendModal {
    position: absolute;
    margin-top: -5px;
    margin-left: -250px;
}

.divNumberedBoxesLegend {
    z-index: 1032;
    position: absolute;
    padding: 4px;
    float: left;
    margin-left: -250px;
    width: 330px;
    height: 400px;
    border-radius: 6px;
    background-color: #ffffff;
    box-shadow: 0 2px 40px 0 rgba(0, 0, 0, 0.35);
    border: solid 1px #979797;
}

/**
Style for title of numbered boxes legend modal
 */
.numberedBoxesLegendModalTitle {
    width: 82px;
    height: 30px;
    font-size: 24px;
    line-height: 1.25;
    text-align: left;
    color: #444444;
}

/**
Style for element order icon legend
 */
.elementOrderBox {
    width: 20px;
    height: 19.6px;
    border-radius: 4px;
    background-color: #0255A0;
    margin-top: 4px;
}

/**
Style for sequence order icon legend
 */
.sequenceOrderBox {
    width: 20px;
    height: 19.6px;
    border-radius: 4px;
    background-color: #8F8FE1;
    margin-top: 4px;
}

/**
Style for customized sequence order icon legend
 */
.customizedSequenceOrderBox {
    width: 20px;
    height: 19.6px;
    border-radius: 4px;
    background-color: #de1c5a;
    margin-top: 4px;
}

/**
Style for Copy to other users link
 */
.copyToOtherUsersLink {
    width: 129px;
    height: 24px;
    font-weight: 600;
    font-size: 14px;
    line-height: 1.71;
    color: #0255A0;
    text-decoration: underline;
}

/**
Style for Copy to other users modal
 */
.copyToOtherUsers {
    width: 330px;
    height: 550px;
    border-radius: 6px;
    background-color: #ffffff;
    box-shadow: 0 2px 40px 0 rgba(0, 0, 0, 0.35);
    border: solid 1px #979797;
    z-index: 1032;
    position: absolute;
    padding: 4px;
    float: left;
    margin-left: -250px;
}

/**
Style for Copy to other users title
 */
.copyToOtherUsersModalTitle {
    width: 147px;
    height: 60px;
    font-size: 24px;
    line-height: 1.25;
    text-align: left;
    color: #444444;
}

/**
Style for Copy to other users Note in the body
 */
.copyToOtherUsersModalNote {
    width: 296px;
    height: 110px;
    font-size: 16px;
    text-align: left;
    color: #444444;
}

.copyToOtherUsersBold {
    font-weight: bold;
}

/**
Horizontal line in the copy to other users modal body
 */
.copyToOtherUsersHorizontalLine {
    border-bottom: solid 1px #797979;
}

.copyToOtherUsersSelectUser {
    width: 76px;
    height: 19px;
    font-size: 14px;
    font-weight: 600;
    line-height: 1;
    text-align: left;
    color: #4f585f;
}

.divCopyToOtherUsersCheckboxContainer {
    display: block;
    overflow: auto;
    height: 250px;
    padding: 5px;
}

.copyToOtherUserLabel {
    height: 19px;
    font-size: 14px;
    text-align: left;
    color: #4f585f;
}

.selectUser {
    height: 19px;
    font-size: 14px;
    font-weight: 600;
    line-height: 1;
    text-align: left;
    color: #4f585f;
}

.customFieldSequenceFloatingSpan {
    float: none;
    margin: 0 auto;
}

.numberedBoxesLegendLink {
    width: 242px;
    height: 14px;
    font-size: 14px;
    line-height: 1;
    color: #0255A0;
    text-decoration: underline;
    float: left;
    font-weight: 600;
}

//endregion Custom Field Sequence

.unselectable {
    -moz-user-select: -moz-none;
    -moz-user-select: none;
    -o-user-select: none;
    -khtml-user-select: none;
    -webkit-user-select: none;
    -ms-user-select: none;
    user-select: none;
}

//region New Logout Link

.li-userid {
    border-right: 1px solid white !important;
}

.userid-text {
    color: #fff;
    cursor: text;
}

.li-logout-link {
    border-right: 1px solid white !important;
}

.logout-link {
    color: #fff;
}

//endregion New Logout Link

.icon-img {
    height: 23px;
    width: 27px;
}

//region Login Page

.esg-form__label {
    display: inline-block;
    max-width: 100%;
    margin-bottom: .375rem;
    color: #444444;
    font-family: "open_sanssemibold", "Open Sans", Helvetica, sans-serif;
    font-style: normal;
    font-weight: 500;
}

.esg-form__label--sign-in {
    margin-bottom: .375rem;
    color: #444;
}

.esg-form__input--sign-in {
    height: 46px !important;
    padding: .6875rem .75rem;
    transition: all .1s ease-in-out;
    border: .0625rem solid #999;
    border-radius: .429rem;
    outline: none;
    color: #333;
    font-family: Open Sans, Helvetica, Arial, sans-serif;
    font-style: normal;
    font-weight: 400;
    width: 100%;
    background-color: rgba(255, 255, 255, .08);
    box-shadow: none;
}

.esg-form__input--sign-in:focus {
    transition: all .1s ease-in-out !important;
    border: .0625rem solid #0074db !important;
}

.esg-sign-in__page::before {
    left: 0;
    right: 0;
    display: block;
    position: fixed;
    top: 0;
    width: 100%;
    height: 100%;
    background-color: #bdbdbd;
    background-image: url("@{signInBackground}");
    background-position: center;
    background-size: cover;
    content: '';
    overflow: hidden;
    z-index: -2;
    background-blend-mode: luminosity;
    -webkit-filter: blur(5px);
    filter: blur(5px);
}

.esg-sign-in__page::after {
    left: 0;
    right: 0;
    background: lighten(@primary-color, 10%);
    //background: linear-gradient(to bottom, #9a3da9 0%, #5353D1 100%);
    background: linear-gradient(to bottom, lighten(@primary-color, 10%) 0%, @primary-color 100%);
    filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#ffffff', endColorstr='#000000', GradientType=0);
    display: block;
    position: fixed;
    top: 0;
    width: 100%;
    height: 100%;
    box-shadow: inset 0 0 0.75rem 0 rgba(0, 0, 0, 0.6);
    content: '';
    z-index: -1;
    mix-blend-mode: multiply;
    opacity: 0.9 !important;
}

.ete-esg-sign-in__page::before {
    left: 0;
    right: 0;
    display: block;
    position: fixed;
    top: 0;
    width: 100%;
    height: 100%;
    // background-color: #bdbdbd;
    background-image: url("@{signInBackground}");
    background-position: center;
    background-size: cover;
    content: '';
    overflow: hidden;
    z-index: -2;
    // background-blend-mode: luminosity;
    // -webkit-filter: blur(5px);
    // filter: blur(5px);
}

.ete-esg-sign-in__page::after {
    left: 0;
    right: 0;
    // background: lighten(@primary-color, 10%);
    // background: linear-gradient(to bottom, lighten(@primary-color, 10%) 0%, @primary-color 100%);
    filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#ffffff', endColorstr='#000000', GradientType=0);
    display: block;
    position: fixed;
    top: 0;
    width: 100%;
    height: 100%;
    box-shadow: inset 0 0 0.75rem 0 rgba(0, 0, 0, 0.6);
    content: '';
    z-index: -1;
    mix-blend-mode: multiply;
    opacity: 0.9 !important;
}

//endregion Login Page

//region SVG icons
.esg-icon {
    position: relative;
    width: 1.5rem;
    height: 1.5625rem;
    //fill: #51968d;
}

.esg-icon-secondary {
    fill: @secondary-color;
    display: inline;
    width: 24px;
    height: 24px;
}

.esg-icon--outline {
    stroke: @secondary-color;
    fill: transparent;
    stroke-width: .0625rem;
    stroke-linecap: round;
    stroke-linejoin: round;
}

.esg-icon--xsmall {
    width: .75rem;
    height: .8125rem;
}

.esg-icon--small {
    width: 1rem;
    height: 1.0625rem;
}

.esg-icon--medium {
    width: 1.75rem;
    height: 1.8125rem;
}

.esg-icon--large {
    width: 2rem;
    height: 2.0625rem;
}

.esg-icon--xlarge {
    width: 4rem;
    height: 4.0625rem;
}

.esg-icon--right {
    transform: rotate(0deg);
}

.esg-icon--left {
    transform: rotate(180deg);
}

.esg-icon--up {
    transform: rotate(270deg);
}

.esg-icon--down {
    transform: rotate(90deg);
}

.esg-icon--reversed {
    fill: #ffffff;
}

.esg-icon--reversed.esg-icon--outline {
    fill: transparent;
    stroke: #ffffff;
}

.esg-icon--light {
    fill: #8cc1ba;
}

.esg-icon--light.esg-icon--outline {
    fill: transparent;
    stroke: #8cc1ba;
}

.esg-icon--warning {
    fill: #c29100;
}

.esg-icon--warning.esg-icon--outline {
    fill: transparent;
    stroke: #c29100;
}

.esg-icon--warning-dark {
    fill: #7b5c00;
}

.esg-icon--warning-dark.esg-icon--outline {
    fill: transparent;
    stroke: #7b5c00;
}

.esg-icon--error {
    fill: #cb0004;
}

.esg-icon--error.esg-icon--outline {
    fill: transparent;
    stroke: #cb0004;
}

.esg-icon--error-dark {
    fill: #a61d20;
}

.esg-icon--error-dark.esg-icon--outline {
    fill: transparent;
    stroke: #a61d20;
}

.esg-icon--success {
    fill: #013563;
}

.esg-icon--success.esg-icon--outline {
    fill: transparent;
    stroke: #013563;
}

.esg-icon--success-dark {
    fill: #145f32;
}

.esg-icon--success-dark.esg-icon--outline {
    fill: transparent;
    stroke: #145f32;
}

.esg-icon--info {
    fill: #0255A0;
}

.esg-icon--info.esg-icon--outline {
    fill: transparent;
    stroke: #0255A0;
}

.esg-icon--info-dark {
    fill: #013D72;
}

.esg-icon--info-dark.esg-icon--outline {
    fill: transparent;
    stroke: #013D72;
}

.esg-icon--neutral {
    fill: #767676;
}

.esg-icon--neutral.esg-icon--outline {
    fill: transparent;
    stroke: #767676;
}

.esg-icon--white {
    fill: #ffffff;
}

.esg-icon--down {
    transform: rotate(90deg);
}

//endregion SVG icons

.lightBackground {
    background-color: #F8F8F8 !important;
}

.mediumBackground {
    background-color: #DCDCDC !important;
}

.darkBackground {
    background-color: #C0C0C0 !important;
}

.bgPadding {
    padding-left: 25px !important;
    padding-right: 5px !important;
}

.ngxmdp .selectedday .datevalue.currmonth {
    background-color: @primary-color  !important;
    color: #FFF !important;
}

.ngxmdp .daycell:focus,
.daycell:hover {
    background-color: lighten(@secondary-color, 45%) !important;
}

//search result grid content td
.context-result-grid td:focus {
    outline-color: @primary-color  !important;
}

//search result grid header th
.context-result-grid th:focus {
    outline-color: @primary-color  !important;
}

.context-result-grid .recordSelected td {
    border-top: 1px solid lighten(@navbar-default-bg, 20%) !important;
    border-bottom: 1px solid lighten(@navbar-default-bg, 20%) !important;
    background-color: @primary-slection  !important;
    //color: #FFFFFF;
}

.configuration {
    width: 450px;
    margin-top: 50px !important;
    margin: auto;
    z-index: 3000;
    max-width: 400px !important;
}

//region Loader
.esg-spinner-wrapper {
    position: fixed;
    width: 100%;
    height: 100%;
    margin: 0 auto;
    //background: rgba(255, 255, 255, 0.8);
    z-index: 2000;
}

@keyframes rotation {
    from {
        transform: rotate(0deg);
    }

    to {
        transform: rotate(359deg);
    }
}

.esg-spinner {
    left: 450px;
    //right: 0;
    border-left: 0.25rem solid rgba(0, 116, 219, 0.4);
    border-right: 0.25rem solid rgba(0, 116, 219, 0.4);
    position: absolute;
    //top: 0;
    //bottom: 0;
    width: 1.5rem;
    height: 1.5rem;
    margin: auto;
    border-top: 0.25rem solid #51ABFF;
    border-bottom: 0.25rem solid rgba(0, 116, 219, 0.4);
    border-radius: 100%;
    box-sizing: border-box;
    animation: rotation .6s infinite linear;
}

//@media only screen and (min-width: 30.06em) {
//  .esg-spinner {
//    width: 3.75rem;
//    height: 3.75rem;
//  }
//}

@media only screen and (max-width: 30em) {
    .esg-table-spinner-wrapper .esg-spinner-wrapper {
        position: fixed;
    }
}

//endregion

use {
    pointer-events: none;
}

// shared list search

.shared-list-search-input {
    width: 100%;
}

.shared-list-search-container input[type=text]:focus {
    border: 2px solid @primary-color  !important;
}

.shared-list-search-dropdown {
    border: 1px solid #ccc;
    background-color: #fff;
    z-index: 10;
    position: absolute;
    width: 432px;
    display: none;
    overflow: auto;
    max-height: 200px;
}

.shared-list-search-dropdown.active {
    display: block;
}

.shared-list-search-dropdown-item {
    padding: 3px 0 3px 3px;
    font-size: small;
}

.shared-list-search-dropdown-item.highlighted {
    background-color: @primary-color;
    color: #fff;
}

.shared-list-search-dropdown-item:hover {
    background-color: @primary-color;
    color: #fff;
    cursor: pointer;
}

.shared-list-search-dropdown-item:focus {
    background-color: @primary-color;
    color: #fff;
    cursor: pointer;
}

.shared-list-search-dropdown-header {
    font-size: 11px;
    color: #666;
    font-weight: bold;
    padding-left: 3px;
    padding-top: 3px;
    padding-bottom: 3px;
}

//region EDS 1.5 Modal Dialog

.esg-details-list,
.esg-modal__details-list,
.esg-modal-dialog__details-list {
    margin: 1.25rem 0;
    padding: 0;
    list-style: none;
}

.esg-details-list li,
.esg-modal__details-list li,
.esg-modal-dialog__details-list li {
    margin: 0;
    line-height: 1.4;
}

.esg-modal-overlay {
    left: 0;
    display: none;
    position: fixed;
    top: 0;
    width: 100%;
    width: 100vw;
    height: 100%;
    height: 100vh;
    background: #000000;
    opacity: .25;
    z-index: 1200;
}

.esg-modal.esg-is-open+.esg-modal-overlay,
.esg-modal-dialog.esg-is-open+.esg-modal-overlay,
.esg-modal-overlay.esg-is-open+.esg-modal-overlay,
.esg-modal-wizard.esg-is-open+.esg-modal-overlay {
    display: block;
}

.esg-modal,
.esg-modal-dialog {
    left: 0;
    position: fixed;
    top: 0;
    bottom: 0;
    width: 100%;
    height: 100%;
    margin: 0;
    transform: none;
    border-radius: 0;
    background: #ffffff;
    box-shadow: none;
    z-index: 1210;
}

@media only screen and (min-width: 125rem) {

    .esg-modal,
    .esg-modal-dialog {
        width: 30%;
    }
}

.esg-modal.esg-is-hidden,
.esg-is-hidden.esg-modal-dialog {
    animation-name: slideOutDown;
    animation-duration: .5s;
}

@media only screen and (min-width: 62rem) {

    .esg-modal.esg-is-hidden,
    .esg-is-hidden.esg-modal-dialog {
        animation-name: zoomOut;
        animation-duration: .5s;
    }
}

.esg-modal.esg-is-visible,
.esg-is-visible.esg-modal-dialog {
    animation-name: slideInUp;
    animation-duration: .5s;
}

@media only screen and (min-width: 62rem) {

    .esg-modal.esg-is-visible,
    .esg-is-visible.esg-modal-dialog {
        animation-name: zoomIn;
        animation-duration: .5s;
    }
}

@media only screen and (min-width: 62rem) {

    .esg-modal,
    .esg-modal-dialog {
        left: 50%;
        position: fixed;
        top: 50%;
        bottom: inherit;
        width: 60%;
        height: auto;
        padding: 0;
        transform: translate(-50%, -50%);
        border-radius: 0.375rem;
        background-color: #ffffff;
        box-shadow: 0 0 2.5rem rgba(0, 0, 0, 0.35);
        overflow-y: visible;
    }
}

@media only screen and (min-width: 75rem) {

    .esg-modal,
    .esg-modal-dialog {
        width: 50%;
    }
}

@media only screen and (min-width: 90rem) {

    .esg-modal,
    .esg-modal-dialog {
        width: 40%;
    }
}

.esg-modal__header,
.esg-modal-dialog__header {
    padding: 0.5rem 1rem 1rem 0.2rem;
    position: fixed;
    top: 0;
    width: 100%;
    z-index: 1220;
}

@media only screen and (min-width: 48rem) {

    .esg-modal__header,
    .esg-modal-dialog__header {
        padding: .6rem 1rem;
    }
}

@media only screen and (min-width: 62rem) {

    .esg-modal__header,
    .esg-modal-dialog__header {
        padding: 1.125em 1.25em 0.625em 1.125em;
        position: relative;
    }

    .esg-modal__header::after,
    .esg-modal-dialog__header::after {
        clear: both;
    }
}

.esg-modal__title,
.esg-modal-dialog__title {
    display: inline-block;
    width: auto;
    margin: 0;
    padding: 0;
    border: 0;
}

.esg-modal__close,
.esg-modal-dialog__close {
    float: right;
    transition: all 0.3s ease-in-out;
    display: inline-block;
    padding: 0;
    cursor: pointer;
}

.esg-modal__close:hover,
.esg-modal__close:focus,
.esg-modal__close:active,
.esg-modal__close:active:hover,
.esg-modal__close:active:focus,
.esg-modal-dialog__close:hover,
.esg-modal-dialog__close:focus,
.esg-modal-dialog__close:active,
.esg-modal-dialog__close:active:hover,
.esg-modal-dialog__close:active:focus {
    transition: all 0.3s ease-in-out;
}

.esg-modal__close .esg-icon,
.esg-modal-dialog__close .esg-icon {
    width: 1.625rem;
    height: 1.625rem;
    margin-top: .125rem;
    cursor: pointer;
}

.esg-modal__close path,
.esg-modal-dialog__close path {
    cursor: pointer;
    fill: #6c6c6c;
}

.esg-modal__body,
.esg-modal-dialog__body {
    margin-top: 2.750em;
    margin-bottom: 4.063em;
    padding: 1em;
}

@media only screen and (min-width: 48rem) {

    .esg-modal__body,
    .esg-modal-dialog__body {
        margin-top: 3.438em;
    }
}

@media only screen and (min-width: 62rem) {

    .esg-modal__body,
    .esg-modal-dialog__body {
        position: relative;
        max-height: calc(80vh - 8.3em);
        margin-top: 0;
        margin-bottom: 0;
        overflow-y: auto;
    }

    .esg-modal__body::after,
    .esg-modal-dialog__body::after {
        clear: both;
    }
}

.esg-modal__footer,
.esg-modal-dialog__footer {
    position: relative;
}

.esg-modal__action-section,
.esg-modal-dialog__action-section {
    position: fixed;
    bottom: 0;
    text-align: center;
    -ms-flex-pack: center;
    justify-content: center;
    width: 100%;
}

@media only screen and (min-width: 62rem) {

    .esg-modal__action-section,
    .esg-modal-dialog__action-section {
        position: static;
    }

    .esg-modal__action-section::after,
    .esg-modal-dialog__action-section::after {
        clear: both;
    }
}

.esg-modal__button,
.esg-modal-dialog__button {
    -webkit-border-top-left-radius: 0;
    -moz-border-topleft-radius: 0;
    border-top-left-radius: 0;
    -webkit-border-top-right-radius: 0;
    -moz-border-topright-radius: 0;
    border-top-right-radius: 0;
    -webkit-border-bottom-left-radius: 0;
    -moz-border-bottomleft-radius: 0;
    border-bottom-left-radius: 0;
    -webkit-border-bottom-right-radius: 0;
    -moz-border-bottomright-radius: 0;
    border-bottom-right-radius: 0;
    transition: all 0.3s ease-in-out;
    width: 100%;
    margin: 0;
}

.esg-modal__button:hover,
.esg-modal__button:active,
.esg-modal__button:focus,
.esg-modal__button:active:hover,
.esg-modal__button:active:focus,
.esg-modal-dialog__button:hover,
.esg-modal-dialog__button:active,
.esg-modal-dialog__button:focus,
.esg-modal-dialog__button:active:hover,
.esg-modal-dialog__button:active:focus {
    transition: all 0.3s ease-in-out;
}

@media only screen and (min-width: 62rem) {

    .esg-modal__button,
    .esg-modal-dialog__button {
        border-left: 0;
        border-right: 0;
        border-bottom: 0;
    }

    .esg-modal__button:hover,
    .esg-modal__button:active,
    .esg-modal__button:focus,
    .esg-modal__button:active:hover,
    .esg-modal__button:active:focus,
    .esg-modal-dialog__button:hover,
    .esg-modal-dialog__button:active,
    .esg-modal-dialog__button:focus,
    .esg-modal-dialog__button:active:hover,
    .esg-modal-dialog__button:active:focus {
        border-left: 0;
        border-right: 0;
        border-bottom: 0;
    }

    .esg-modal__button:first-child,
    .esg-modal-dialog__button:first-child {
        -webkit-border-bottom-left-radius: 0.375rem;
        -moz-border-bottomleft-radius: 0.375rem;
        border-bottom-left-radius: 0.375rem;
        border-right: 0;
        border-left: 0;
        border-bottom: 0;
    }

    .esg-modal__button:last-child,
    .esg-modal-dialog__button:last-child {
        -webkit-border-bottom-right-radius: 0.375rem;
        -moz-border-bottomright-radius: 0.375rem;
        border-bottom-right-radius: 0.375rem;
        border-right: 0;
        border-bottom: 0;
    }
}

.esg-modal-dialog__action-section.esg-button-group--fluid .esg-button-group__item {
    padding: 0;
}

@media only screen and (min-width: 62rem) {
    .esg-modal-dialog__action-section.esg-button-group--fluid .esg-button-group__item:first-child .esg-button {
        -webkit-border-bottom-left-radius: 0.375rem;
        -moz-border-bottomleft-radius: 0.375rem;
        border-bottom-left-radius: 0.375rem;
        -webkit-border-bottom-right-radius: 0;
        -moz-border-bottomright-radius: 0;
        border-bottom-right-radius: 0;
        border-right: 0;
        border-left: 0;
        border-bottom: 0;
    }

    .esg-modal-dialog__action-section.esg-button-group--fluid .esg-button-group__item:last-child .esg-button {
        -webkit-border-bottom-right-radius: 0.375rem;
        -moz-border-bottomright-radius: 0.375rem;
        border-bottom-right-radius: 0.375rem;
        -webkit-border-bottom-left-radius: 0;
        -moz-border-bottomleft-radius: 0;
        border-bottom-left-radius: 0;
        border-right: 0;
        border-left: 0.0625rem solid;
        border-bottom: 0;
    }

    .esg-modal-dialog__action-section.esg-button-group--fluid .esg-button-group__item:last-child .esg-button--primary {
        border-color: @action-color;
    }
}

.esg-button--login {
    height: 3.75rem !important;
    max-width: 100% !important;
    padding: .5rem 2.5rem !important;
    border-radius: 6.25rem !important;
    margin-left: auto !important;
    margin-right: auto !important;
    display: block !important;
    line-height: 1.25rem !important;
}

//endregion

//region ESG Alert

.esg-alert {
    font-family: "Open Sans", Helvetica, Arial, sans-serif;
    font-style: normal;
    font-weight: 400;
    display: block;
    position: relative;
    width: 100%;
    min-height: 1.25rem;
    margin-top: .625rem;
    margin-bottom: 1.25rem;
    padding: 0;
    border: .0625rem solid transparent;
    border-radius: 0;
    background-image: none;
    // font-size: .875rem;
    line-height: 1;
    text-shadow: none;
    white-space: nowrap;
    box-sizing: border-box;
}

.esg-alert::before {
    display: table;
    content: '';
}

.esg-alert::after {
    clear: both;
}

.esg-alert__icon-wrapper {
    display: table-cell;
    width: 3.125rem;
    text-align: center;
    vertical-align: middle;
}

.esg-alert__icon {
    position: relative;
}

.esg-alert__icon svg {
    width: 3.125rem;
    margin-top: 0;
    fill: #ffffff;
}

.esg-alert__message {
    padding: 1.125rem 1.25rem 1.125rem 1.25rem;
    font-family: "Open Sans", Helvetica, Arial, sans-serif;
    font-style: normal;
    font-weight: 600;
    display: table-cell;
    width: 100%;
    margin: 0;
    line-height: 1.4;
    white-space: normal;
}

.esg-alert__message::after {
    clear: both;
}

.esg-alert--fluid {
    max-width: 100%;
}

.esg-alert--success {
    border-color: #00804d;
    background-color: #00af69;
    color: #00804d;
}

.esg-alert--success .esg-alert__message {
    background-color: #eaf7f2;
    color: #00804d;
}

.esg-alert--success a {
    color: #00804d;
}

.esg-alert--info {
    border-color: #2874bb;
    background-color: #51abff;
    color: #2874bb;
}

.esg-alert--info .esg-alert__message {
    background-color: #eff7ff;
    color: #2874bb;
}

.esg-alert--info a {
    color: #51abff;
}

.esg-alert--warning {
    border-color: #8a6a00;
    background-color: #efc728;
    color: #8a6a00;
}

.esg-alert--warning .esg-alert__message {
    background-color: #f5f2e7;
    color: #8a6a00;
}

.esg-alert--warning a {
    color: #8a6a00;
}

.esg-alert--error {
    border-color: #d42828;
    background-color: #ff3030;
    color: #d42828;
}

.esg-alert--error .esg-alert__message {
    background-color: #ffeeed;
    color: #d42828;
}

.esg-alert--error a {
    color: #d42828;
}

//endregion

// region ESG 1.5 Table

.esg-table,
.esg-table-head,
.esg-table-body,
.esg-table-head__row,
.esg-table-head__th,
.esg-table-head__td,
.esg-table-body__row,
.esg-table-head__row,
.esg-table-body__td {
    font-family: "Open Sans", Helvetica, Arial, sans-serif;
    font-style: normal;
    font-weight: 400;
    border-color: #bdbdbd;
    font-size: .75rem;
    box-sizing: border-box;
}

@media only screen and (min-width: 48rem) {

    .esg-table,
    .esg-table-head,
    .esg-table-body,
    .esg-table-head__row,
    .esg-table-head__th,
    .esg-table-head__td,
    .esg-table-body__row,
    .esg-table-head__row,
    .esg-table-body__td {
        font-size: .875rem;
    }
}

.esg-table-head__row,
.esg-table-body__row,
.esg-table-footer__row {
    margin-left: 0;
    margin-right: 0;
    display: block;
    margin-top: -.0625rem;
    padding: 0;
    border: 0.0625rem solid #bdbdbd;
    background-color: #ffffff;
    line-height: 1.5em;
}

@media only screen and (min-width: 48rem) {

    .esg-table-head__row,
    .esg-table-body__row,
    .esg-table-footer__row {
        display: table-row;
        padding: 1.125rem 1.25rem;
    }
}

.esg-table-head__th,
.esg-table-body__th,
.esg-table-head__th,
.esg-table-footer__th {
    text-align: left;
    display: block;
    border-top: 0;
    vertical-align: top;
}

@media only screen and (min-width: 48rem) {

    .esg-table-head__th,
    .esg-table-body__th,
    .esg-table-head__th,
    .esg-table-footer__th {
        display: table-cell;
    }
}

.esg-table-head__td,
.esg-table-body__td,
.esg-table-footer__td {
    display: block;
    padding: 0 1rem;
    border-top: 0;
    vertical-align: top;
}

.esg-table-head__td:first-child,
.esg-table-body__td:first-child,
.esg-table-footer__td:first-child {
    padding-top: .625rem;
}

.esg-table-head__td:last-child,
.esg-table-body__td:last-child,
.esg-table-footer__td:last-child {
    padding-bottom: .625rem;
}

@media only screen and (min-width: 48rem) {

    .esg-table-head__td,
    .esg-table-body__td,
    .esg-table-footer__td {
        display: table-cell;
        position: relative;
        padding: .625rem .875rem;
        border-bottom: .0625rem solid #ff0000;
    }

    .esg-table-head__td:first-child,
    .esg-table-body__td:first-child,
    .esg-table-footer__td:first-child {
        padding-left: 1.25rem;
    }

    .esg-table-head__td:last-child,
    .esg-table-body__td:last-child,
    .esg-table-footer__td:last-child {
        padding-bottom: 1rem;
    }
}

.esg-table {
    display: block;
    width: 100%;
    line-height: 1.5em;
    white-space: nowrap;
    border-collapse: collapse;
    table-layout: auto;
}

@media only screen and (min-width: 48rem) {
    .esg-table {
        display: table;
        table-layout: fixed;
    }
}

.esg-table svg path {
    fill: #80C3FF;
}

.esg-table-head {
    margin-left: 0;
    margin-right: 0;
    display: none;
    margin-top: -.0625rem;
    padding: 0;
    border: 0.0625rem solid #bdbdbd;
    background-color: transparent;
    line-height: 1.5em;
}

@media only screen and (min-width: 48rem) {
    .esg-table-head {
        display: table-header-group;
        border: 0;
    }
}

.esg-table-head__row {
    font-family: "Open Sans", Helvetica, Arial, sans-serif;
    font-style: normal;
    font-weight: 600;
    display: none;
    padding: 0;
    background-color: #efefef;
}

.esg-table-head__row:hover,
.esg-table-head__row:focus {
    background-color: #efefef;
}

@media only screen and (min-width: 48rem) {
    .esg-table-head__row {
        display: table-row;
    }
}

.esg-table-head__th {
    transition: all 0.1s ease-in-out;
    position: relative;
    padding: .875rem .625rem;
    border: 0.0625rem solid #d5d5d5;
    border-bottom: 0.25rem solid #bdbdbd;
    border-top-color: #bdbdbd;
    background-color: transparent;
}

.esg-table-head__th:hover,
.esg-table-head__th:focus,
.esg-table-head__th:active:focus {
    transition: all 0.1s ease-in-out;
    background: #000000;
    background: rgba(0, 0, 0, 0.05);
    cursor: pointer;
}

.esg-table-head__th::after {
    right: 0;
    border-left: 0.5625rem solid transparent;
    display: block;
    position: absolute;
    bottom: 0;
    width: 0;
    height: 0;
    border-bottom: 0.5625rem solid #0074DB;
    content: ' ';
}

.esg-table-head__th.esg-is-active {
    border-bottom-color: #0074DB;
}

.esg-table-head__th.esg-dropdown {
    padding: 0;
}

.esg-table-head__button {
    text-align: left;
    width: 100%;
    padding: .875rem .625rem;
}

.esg-table-head__button:active,
.esg-table-head__button.esg-is-active,
.esg-table-head__button.esg-is-open {
    background-color: #ffffff;
    box-shadow: 0 0 0 0.0625rem #0074DB;
}

.esg-table-body {
    display: block;
    background-color: #ffffff;
}

@media only screen and (min-width: 48rem) {
    .esg-table-body {
        display: table-header-group;
    }
}

.esg-table-body__row {
    transition: all 0.1s ease-in-out;
}

.esg-table-body__row:hover,
.esg-table-body__row:focus,
.esg-table-body__row:active,
.esg-table-body__row.esg-is-active {
    transition: all 0.1s ease-in-out;
    background-color: #f4faff;
    color: #191919;
}

.esg-table-body__th,
.esg-table-head__th {
    padding: .75rem .875rem;
    text-overflow: ellipsis;
    white-space: normal;
}

.esg-table-body__td {
    position: relative;
    border: 0;
    background-color: transparent;
    text-overflow: ellipsis;
    white-space: normal;
}

.esg-table-body__title {
    margin-right: 0.5rem;
    font-family: "Open Sans", Helvetica, Arial, sans-serif;
    font-style: normal;
    font-weight: 600;
    display: inline;
    line-height: 2.75;
}

.esg-table__icon,
.esg-table__icon--sort,
.esg-table__icon--detail {
    position: absolute;
}

.esg-table__icon svg {
    position: absolute;
    width: 1rem;
    height: 1rem;
}

.esg-table__icon svg path {
    fill: #0074DB;
}

.esg-table__icon--sort,
.esg-table__icon--detail {
    margin-left: 0.3125rem;
    right: 2rem;
    margin-top: .3125rem;
}

@media only screen and (min-width: 48rem) {

    .esg-table__icon--sort,
    .esg-table__icon--detail {
        right: 1.75rem;
    }
}

.esg-table__icon--detail {
    right: 0.25rem;
    position: absolute;
    bottom: 1.125rem;
}

.esg-table__icon--detail .esg-icon {
    width: 1.25rem;
    height: 1.25rem;
}

// endregion

//region Attach Component

.attachDialog {
    position: relative !important;
    top: 440px !important;

    .attach-header-text {
        padding: 0 0 0 20px !important;
    }

    .attach-table {
        padding: 10px;
    }
    
    .esg-table-head__th label{
        font-size: 14px;
    }

    .attachment-name-th{
        width: 50%;
    }

    .uploaded-on-th{
        width: 30%;
    }

    .esg-table-body__td {
        vertical-align: middle;
    }

    .attachment-text {
        width: 100%;
        word-break: break-word;
        word-wrap: break-word;
        overflow-wrap: break-word;
        font-size:14px;
    }

    .attach-button {
        background-color: transparent !important;
        border: none !important;
    }

    button.footer-btn {
        font-weight: 300 !important;
        color: @action-color  !important;
        border-color: @action-color  !important;
        background-color: #FFFFFF !important;
        border-left-color: trasnparent !important;
        -webkit-border-bottom-left-radius: 0.375rem !important;
        -moz-border-bottomleft-radius: 0.375rem !important;
        border-bottom-left-radius: 0.375rem !important;
    }

    button.footer-btn:hover,
    button.footer-btn:focus,
    button.footer-btn:active {
        background-color: @action-color  !important;
        color: #FFFFFF !important;
    }

    .attach-esg-spinner {
        margin-left: -140px !important;
        margin-top: -10px !important;
    }

    .esg-alert__message {
        word-break: break-word;
        word-wrap: break-word;
        overflow-wrap: break-word;
    }

    .div-attach-upload {
        padding: 5px !important;

        .btn-upload-attachment {
            font-weight: 300 !important;
            // margin-left: -50px !important;
        }

        .btn-cancel-attachment {
            font-weight: 300 !important;
            margin-left: 10px !important;
        }

        .div-file-uploader {
            padding: 0 0 0 20px !important;

            .attach-file-uploader {
                border: #999999 solid 1px !important;
                padding: 5px 12px 5px 12px !important;
                border-radius: 4px !important;
                width: 100% !important;
            }
        }

        .upload-helper-text {
            padding: 0 0 0 50px !important;
        }
    }

    .div-no-attachments {
        text-align: center !important;
        padding: 10px 0 0 0 !important;
    }
}

//endregion