
/* Text  */
/*********/
html {
    font-size: 62.5%; // 1 rem = 10 px
}
*{
    text-rendering: optimizeLegibility;
    font-family: @fontFamily;
    -webkit-font-smoothing: antialiased;
}

p {
    line-height:1.5em;
}

.break-word {
    word-break:break-word;
}

.break-all {
    word-break:break-all;   
}

b,.bold {
    font-weight:700;
}

.uppercase {
    text-transform: uppercase;
}

.upper-first {
    display:inline-block;
    text-transform: lowercase;
}

.lowercase {
    text-transform: lowercase;
}

.capitalize {
    text-transform:capitalize !important;
}

.italic {
    font-style:italic;
}

.v-top {
   vertical-align:top; 
}

.center {
    text-align:center;
}
.absoluteCentered {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
}
.right {
    text-align: right;
}

sup {
    color:@CFE_orange;
}

.muted{
 color:@grayLight;
}

em.muted {
    margin-left: 5px;
}

.red {
    color:@redHost;
}

.white {
    color: #fff !important;
}

.green {
    color:@greenHost;
}

.blue {
    color: @logoBlue;
}
.blue500 {
    color: @Blue500;
}

.warning { 
    color: @warningText !important;
}

/* Lists */
/*********/

ul.unstyled {
    list-style:none;
}

ul li {
    line-height:1.5em;
}



/* Layout */
/**********/

.float-left {
    float:left;
} 
.float-right {
    float:right;
}

.inline {
    display:inline;
}

.inline-block {
    display:inline-block;
}

.inline-table {
    display:inline-table;
}

.overflow {
    overflow:visible;
}

.overflow-hidden {
    overflow:hidden;
}

.horizontal-scroll {
    overflow-x:auto;
    width: 100%;
}

.hide {
    display:none;
}

.notVisible {
    visibility: hidden;
}

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

/* Headers */
/***********/

h1 {
    color:@CFE_orange;
}


h3.title{
    font-size:20px;
    color:@grayDark;
}

h1,h2,h3 {
    -webkit-font-smoothing: antialiased;
}

h3{
    font-size:20px;
    line-height:26px;
}

h4 {
    font-size: 16px;
    font-weight: bold;
}

.pageTitle {
    h1,h2,h3,h4,h5,h6 {
        color: @textColor;
        line-height:1.2;
        font-weight:300;
    }
    h1 {
        margin-top: 30px;
        font-weight: bold;
        font-size: 28px;
        line-height: 110%;
        letter-spacing: -0.015em;
    }

    span:first-child {
      white-space: normal;
      word-break: break-all;
      max-width: 100%;
      position: relative;
    }
}



/* Links */
/*********/

a:hover {
    text-decoration:underline;
    cursor:pointer;
}

a:hover i {
    text-decoration:none;
    color:@fontAwesomeHoverColor;
}

a.filter {
    font-size:16px;
}

a:visited {
    text-decoration:none;
}

a:active i{
    color:@iconActive;
}

a.add-link {

    &:after {
      content: "\f067";
      display: inline-block;
      font-family: FontAwesome;
      font-size: 11px;
      padding: 0 5px;
    }
    &:hover:after {
        color: @iconHover;
    }
}

a.remove {
    &:after {
      content: "\f014";
      display: inline-block;
      font-family: FontAwesome;
      padding: 0 5px;
    }
     &:hover:after {
        color: @iconHover;
    }
}

a.edit {
    &:after {
      content: "\f040";
      display: inline-block;
      font-family: FontAwesome;
      padding: 0 5px;
    }
    &:hover:after {
        color: @iconHover;
    }
}

a.option-dropdown {
    &:after {
        content: "\F013";
        display: inline-block;
        font-family: FontAwesome;
        padding: 5px 10px;
        border-radius: 2px;
    }
    &:hover:after {
        color: @iconHover;
        background-color: #fafafa;
    }
}

a.option-menu {
    padding: 2px 0px !important;
    margin-top: 10px;
    display: block;
    background: #EEEFF0 !important;
     &:after {
        content: "\f229";
        display: inline-block;
        font-family: "bootstrap-icons";
        padding: 5px 10px;
        font-size: 16px;
        border-radius: 2px;
        background: #EEEFF0;
    }
    &:hover, &:hover:after {
        background: #D1D2D3 !important;
    }
}
.open  {
    a.option-menu, a.option-menu:hover, a.option-menu:after {
        background: #D1D2D3 !important;
    }

    a.option-menu.dashboard-dropdown, a.option-menu.dashboard-dropdown:after {
        background: #EEEFF0 !important;
    }
}
a.option-menu.dashboard-dropdown {
    background: none !important;
     &:after {
         content: "\f282"; // chevron down
         font-family: bootstrap-icons;
         border-radius: 4px;
         padding: 1px 4px;
         background: none;
    }
    margin-top: 0;
    margin-left: 20px !important;

    &:hover, &:hover:after {
        background: #EEEFF0 !important;
    }
}

.ui-icon-gripsmall-diagonal-se {
    background-position: -80px -224px
}

ul.dashboard-dropdown.dropdown-menu {
    min-width: 260px;

    h4 {
        margin-left: 13px;
        margin-right: 13px;
        color: @CFE_blue;
        font-weight: 500;
        font-size: 16px;
    }
}

ul.dashboard-dropdown.dropdown-menu.left {
    right: initial;
    &:before {
        right: initial !important;
        left:6px;
    }
    &:after {
        right: initial !important;
        left:7px;
    }
}

.no-btn>.pull-right.dropdown-menu.dashboard-dropdown {
    right: -6px;
}

.dropdown-menu {
    box-shadow: 0px 5px 8px 2px rgba(173, 186, 205, 0.35);
    border-radius: 0px 0px 4px 4px;
}

.dropdown-menu li.divider.header {
    margin-left: 13px;
    margin-right: 13px;
}

.btn-group.open a.option-menu:after,
.btn-group.open a.option-dropdown:after {
    background-color: #fafafa;
}

a.clear-search {
    &:after{
        content: "\F00D";
        display: inline-block;
        font-family: FontAwesome;
        font-size: 11px;
        padding: 0 5px 0 10px;
        vertical-align: middle;
        .transition(0.2s ease-out width);
        width:10px;
    }

    &.no-width:after {
        width:0;
        padding: 0;
        overflow: hidden;
    }

    &:hover:after {
        color: @iconHover;
    }
}



/* Bootstrap alert messages */
/****************************/

.alert i{
    color:@linkColor;
}

.alert-info {
    color:@textColor;
}

#notification_block_wrapper {
    .alert {
        margin-top:20px;
    }
}



/* Font awesome icons */
/**********************/

span i{
    padding:0 5px;
}

i {
    color: @MP_gray_base;
    &:hover {
        color: @CFE_blue;
    }
    &:active {
        color: @CFE_blue;
    }

    &.no-hover:hover {
        color: @linkColor;
    }
}

i.icon {
    cursor:pointer;
}

i.help {
    font-size:20px;
    color: @MP_gray_base;
    margin-left:4px;
    margin-top:14px;
    &:hover {
        color: @Blue600;
        cursor:pointer;
        border:none!important;
        background:none !important;
    }
    &:active {
        color:@iconActive;
    }
}

i.icon-time {
    color:@grayLight;
    &.no-hover:hover {
         color:@grayLight;
    }
}



/* Borders & lines */
/*******************/

.border-bottom {
    border-bottom:1px solid @dividerDark;
    padding-bottom:15px;
    margin-bottom:15px;
    overflow:visible;
}

.border-light {
    border-color: #f7f7f7;
}

.border-top {
    border-top:1px solid @dividerDark;
    padding-top:15px;
}

.horizontalLine{
    .horizontalLine(#bbc0ce,2px)
}

.horizontalLine1px{
    .horizontalLine(#ddd,1px);
}

.no-border {
    border: 0 !important;
}



/* Padding and margins */
/***********************/

.no-padding {
    padding:0 !important;    
}

.no-margin {
    margin:0 !important;
}

.no-top-margin {
    margin-top:0;
}

.no-right-margin{
   padding-right:0px;
}

.margin-bottom {
    margin-bottom:20px;
}

.margin-bottom-small {
    margin-bottom:10px;
}

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

.margin-top-small {
    margin-top:10px;
}

.margin-bottom-large {
    margin-bottom:40px;
}

.margin-top-large {
    margin-top:40px;
}

.margin-left {
    margin-left:20px;
}

.margin-left_13 {
    margin-left: 13px;
}

.margin-left_8 {
    margin-left: 8px;
}

.margin-left-small {
    margin-left:10px;
}

.margin-right {
    margin-right:20px;
}

.margin-right-small {
    margin-right:10px;
}


.margin-right-xs {
    margin-right: 8px;
}

.margin-sides {
    margin:0 10px;
}

.padding-right {
    padding-right:20px;
}

.padding-right-x2 {
    padding-right: 40px;
}

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

.padding-top-small {
    padding-top:10px;
}

.padding-bottom {
    padding-bottom:20px;
}

.text-transform_none {
    text-transform: none !important;
}



/* Breadcrumbs */
/***************/

ul.breadcrumb {
    list-style:none;
    background:none;
    margin:0;
}

ul.breadcrumb li {
    display:inline;

    i {
        margin:0 5px;
    }

    &:first-child i {
         display:none;
    }
}

ol.breadcrumb {
    background: none;
    color: @inactiveTextColor;
    font-weight: 500;
    font-size: 14px;
    line-height: 16px;
    padding-left: 0;
    a {
        color: #69707D;
    }
    > li + li:before {
        color: #D3DAE6;
    }
    .active {
        color: @inactiveTextColor;
    }
}


/* modal dialog */
/****************/

.customdlg {
    overflow:hidden;
    margin:0;
}



/* HELP MANUAL */
/***************/

.help {
    font-size:16px;
    line-height:1.5em;

    h2 {
        font-weight:300;
        color:@CFE_orange;
    }
}

pre.prettyprint {
    padding:10px !important;
    border: 1px solid #ccc !important; // fallback for IE7-8
    border: 1px solid rgba(0,0,0,.15) !important;
}



/* Dropdowns */
/*************/

ul.group-items {
    margin-left:0;
    list-style:none;
    margin-right:40px;

    li {
        margin-bottom:4px;
    }
}

.group-header {
    display:inline-block;
    margin-right:40px;
    vertical-align:top;
}



/* Scroll top/bottom buttons */
/*****************************/

.go-to-top,.go-to-bottom {
    display:none;
    cursor:pointer;
    position:fixed;
    bottom:400px;
    right:50px;
    z-index:2;
    width:50px;
    height: 50px;
    border-radius: 5px;
    background-color: #CCCCCC;
    background-color:rgba(204,204,204,0.5);
    i {
        position: absolute;
        padding:18px;
    }
}

.go-to-bottom {
    bottom:340px;
}



/* Tooltips */
/************/
.tooltip.top .tooltip-arrow {
  bottom: 2px;
  left: 50%;
  margin-left: -5px;
  border-top-color: #fff;
  border-bottom-color: #d5d5d5;
  border-width: 5px 5px 0;
}

.tooltip-inner {
  border-radius: 4px;
  font-size:14px;
}

.ui-tooltip {
    background: #dcdcdc;
}

div.tooltip {
    position: fixed;
}

[rel="tooltip"]{
    cursor: pointer;
    //display:inline-block; /* chrome-fix */
}

/* Beta apps */
/*************/

.pageTitle span.beta {
    font-size:18px;
    vertical-align:super;
    font-style:italic;
    margin-left:10px;
}

#tab-nav span.beta {
    position: relative;
    top: -21px;
    font-style: italic;
    color: @helpText;
}



//reset font of jquery uiwidget
.ui-widget{
font-family: @fontFamily;
}

.ui-widget-content{
    color:@textColor;
}

.clear-both {
    clear: both !important;
}

.m-l_20 {
    margin-left: 20px !important;
}

.padding_5 {
    padding: 5px !important;
}

.show-password-button {
    color: black;
    margin-left: -30px;
    z-index: 10;
    color: @Gray400;
    cursor: pointer;
}

i.copy-inner-text {
    display: none
}

*:hover > .copy-inner-text {
    display: inline-block;
}

.pinned-container {
    display: flex;
    justify-content: space-between;
    font-weight: 500;
    flex-wrap: wrap;
    .muted {
        color: @grayTextColor;
    }
    .grayed {
        color: @grayLight;
        padding: 0;
    }
    > div {
        position: relative;
        flex-basis: 45%;
        @media (min-width: 1440px) {
            flex-basis: 30%;
        }
    }
    @media (min-width: 1440px) {
       flex-wrap: nowrap;
    }
}

.icon-pushpin.pin {
    display: none;
}

*:hover > .pin,   *:hover > .unpin {
    display: inline-block;
}

i.green:hover {
    color:@greenHost !important;
}

i.muted:hover {
    color:@grayLight !important;
}

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

.flex {
    display: flex;

    &--end {
        justify-content: flex-end;
    }

    &--start {
        justify-content: flex-start;
    }

    &--middle {
        justify-content: center;
    }

    &--align_center {
        align-items: center
    }

    &--align_end {
        align-items: flex-end;
    }

    &--align_start {
        align-items: flex-start !important;
    }

    &--align_baseline {
        align-items: baseline;
    }

    &-space-between {
        justify-content: space-between !important;
    }

    &-space-around {
        justify-content: space-around;
    }

    &-grow {
        flex-grow: 1;
    }

    &--wrap {
        flex-wrap: wrap;
    }

    &--column-reverse {
        flex-direction: column-reverse;
    }
}

.relative {
    position: relative;
}

.absolute {
    position: absolute;
}

// scroll styling
::-webkit-scrollbar {
     width: 6px;
     height: 6px;
 }

::-webkit-scrollbar-track {
    background: #fff;
}

::-webkit-scrollbar-thumb {
    background: #A5A5A5;
    border-radius: 10px;
}

::-webkit-scrollbar-thumb:hover {
    background: darken(#A5A5A5, 5%);
}

.relative {
    position: relative;
}

.flex {
    display: flex !important;
}

.flexbox {
    display: flex;
    &.center-aligned,
    &.centered {
        align-items: center;
    }
    &.centered {
        justify-content: center;
    }
    &.column {
        flex-direction: column;
    }
    &.space-between {
        justify-content: space-between;
    }
    &.no-basis {
        flex-basis: 0;
    }
}

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

.flex-grow_1 {
    flex-grow: 1;
}

.ellipsis {
    overflow: hidden;
    text-overflow: ellipsis;
}
.user_notification{
    &.user_notification_warning{
        color: @Gray900;
        background: #FDF1DD;
        &:before {
            font-family: "bootstrap-icons";
            content: "\f334"; // exclamation diamond fill icon
            color: @CFE_orange;
            font-size: 16px;
            margin-right: 8px;
            top: 2px;
            position: relative;
        }
    }
    &.user_notification_info{
        color: @Gray900;
        background: #EAF1FB;
        &:before {
            font-family: "bootstrap-icons";
            content: "\f430"; // info circle fill icon
            color: @black;
            font-size: 16px;
            margin-right: 8px;
            top: 2px;
            position: relative;
        }
    }
    padding: 14px 22px;
    border-radius: 4px;
    display: inline-block;
    font-weight: 500;
}

.disabledArea {
    pointer-events: none;
    & * {
        color: @Gray500 !important;
    }
}

#editor *, .ace_content * {
    font-family: @monospaceFontFamily !important;
}

.dropdown-menu-select-disabled{
  &:hover{
    background-color: transparent !important;
    color: #999999 !important;
    cursor: auto;
  }
  background-color: transparent;
  color: #999999 !important;
}

.clickable {
    cursor: pointer;
}

.capitalized-start::first-letter {
    text-transform: capitalize;
}

.two-columns {
    display: grid;
    grid-template-columns: 1fr 1fr;
    column-gap: 12px;
    &.column-data {
        max-width: 30 * 12px;
        row-gap: 5px;
        &.compact {
            grid-template-columns: max-content 1fr;
        }
        &.multiple {
            grid-template-columns: 1fr 1fr;
            max-width: 30 * 12px;
        }
        .key > b {
            padding: 2px 14px;
            border-radius: 10px;
        }
    }
}

.two-columns-multiple {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(max-content, 25vw));
    column-gap: 12px;
    row-gap: 5px;
}
