/* general */

/* uncomment to remove corners */
/*
.ui-corner-all, .ui-state-default {
     border-radius: 0 !important;
}
*/

/* corner */
.ui-corner-all, .ui-corner-top, .ui-corner-left, .ui-corner-tl {
    -moz-border-radius-topleft: @default-border-radius;
    -webkit-border-top-left-radius: @default-border-radius;
    -khtml-border-top-left-radius: @default-border-radius;
    border-top-left-radius: @default-border-radius;
}

.ui-corner-all, .ui-corner-top, .ui-corner-right, .ui-corner-tr {
    -moz-border-radius-topright: @default-border-radius;
    -webkit-border-top-right-radius: @default-border-radius;
    -khtml-border-top-right-radius: @default-border-radius;
    border-top-right-radius: @default-border-radius;
}

.ui-corner-all, .ui-corner-bottom, .ui-corner-left, .ui-corner-bl {
    -moz-border-radius-bottomleft: @default-border-radius;
    -webkit-border-bottom-left-radius: @default-border-radius;
    -khtml-border-bottom-left-radius: @default-border-radius;
    border-bottom-left-radius: @default-border-radius;
}

.ui-corner-all, .ui-corner-bottom, .ui-corner-right, .ui-corner-br {
    -moz-border-radius-bottomright: @default-border-radius;
    -webkit-border-bottom-right-radius: @default-border-radius;
    -khtml-border-bottom-right-radius: @default-border-radius;
    border-bottom-right-radius: @default-border-radius;
}

/* Overlays */
.ui-widget-overlay {
    background: #1f2226;
    opacity: .60;
    filter: Alpha(Opacity=60);
}

.ui-widget-shadow {
    margin: -8px 0 0 -8px;
    padding: 8px;
    background: #1f2226;
    opacity: .60;
    filter: Alpha(Opacity=60);
    -moz-border-radius: 8px;
    -khtml-border-radius: 8px;
    -webkit-border-radius: 8px;
    border-radius: 8px;
}

.ui-selectable-helper {
    position: absolute;
    z-index: 100;
    border: 1px dotted black;
}

.ui-progressbar .ui-progressbar-value {
    border: 1px solid #156090;
    background: @light-blue;
}

.ui-progressbar .ui-progressbar-label {
    color: #1f89ce;
}

.ui-toggle-switch label {
    text-align: left;
    width: auto;
    cursor: pointer;
}

/* Ribbon */
.ui-ribbon-group-content .ui-button.ui-state-default {
    border: 1px solid #d3d3d3;
    background: #f9f9fc;
    font-weight: normal;
    color: #555555;
    box-shadow: none !important;
    text-shadow: none !important;
}

.ui-ribbon-group-content .ui-button.ui-state-hover {
    border: 1px solid #a6a6ac;
    background: #ededf0;
    font-weight: normal;
    color: #212121;
}

.ui-ribbon-group-content .ui-button.ui-state-default span {
    text-shadow: none !important;
}

/* Steps */
.ui-steps .ui-state-highlight span {
    color: #ffffff;
}

/* Shadow */
.ui-shadow {
    .box-shadow(@card-shadow);
}

.bg-dark-red {
    background-color: @dark-red !important;
}

hr.ui-separator .ui-state-default {
    border: 1px solid #eee;
}

/* mobile load bar */
.load-bar {
    position: fixed;
    z-index: 9999;
    margin-top: 0;
    width: 100%;
    height: 5px;
    background-color: #fdba2c;
}

.bar {
    content: "";
    display: inline;
    position: absolute;
    width: 0;
    height: 100%;
    left: 50%;
    text-align: center;
}

.bar:nth-child(1) {
    background-color: #da4733;
    animation: loading 3s linear infinite;
}

.bar:nth-child(2) {
    background-color: #3b78e7;
    animation: loading 3s linear 1s infinite;
}

.bar:nth-child(3) {
    background-color: #fdba2c;
    animation: loading 3s linear 2s infinite;
}

@keyframes loading {
    from {
        left: 50%;
        width: 0;
        z-index: 100;
    }
    33.3333% {
        left: 0;
        width: 100%;
        z-index: 10;
    }
    to {
        left: 0;
        width: 100%;
    }
}

div.card {
    background: #fff;
    border-top: 0;
    .box-shadow(@card-shadow);
}

body div.ui-flat {
    .ui-inputfield, .ui-button, .ui-selectcheckboxmenu,.ui-selectonemenu, .ui-chkbox .ui-chkbox-box, .ui-selectonelistbox,
    .ui-picklist-list-wrapper, .ui-panel, ul.ui-tabs-nav.ui-widget-header li[role="tab"], .ui-menu, .ui-selectbooleanbutton.ui-button,.ui-picklist-caption,
    .ui-carousel, .ui-selectonebutton .ui-button, .ui-autocomplete input.ui-autocomplete-dd-input,
    .ui-splitbutton, .ui-menubutton, .ui-selectbooleanbutton.ui-button,.ui-panelmenu-content,
    .ui-picklist-list, .ui-accordion-header, .ui-tabs-header, .ui-panelmenu-panel, .ui-panelmenu-header, .ui-menu-list, .ui-menu-item {
        .border-radius(0);
        border-width: .5px;
    }

    .ui-radiobutton .ui-radiobutton-box { //we can't remove radius from radiobutton
                                          border-width: .5px;
                                          padding-left: 1px;
    }

}

body hr.ui-separator.ui-state-default {
    border-width: 1px 0 0 0;
}

@media (max-width: @screen-xm) {
    body div.ui-flat {
        .ui-radiobutton .ui-radiobutton-box {
            padding-left: 0;
        }

    }
}

.center-navbar {
    display: block;
    text-align: center;
    color: white;
    @media (max-width: @screen-sm-max) {
        display: none;
    }
}

.mobile-header {
    display: block;
    text-align: center;
    color: white;
    height: 100%;
    margin-top: 15px;
    @media (min-width: (@screen-xm + 1)) {
        display: none;
    }
    span {
        font-weight: bold;
    }
    i {
        top: 1px;
        position: relative;
        font-weight: 500;
    }
}

body.layout-top-nav .mobile-header {
    margin-top: -10px;
}

body:not(.layout-top-nav) .mobile-header {
    margin-left: 100px;
    @media (max-width: @screen-xs) {
        margin-left: 50px;
    }
}

//template breadcrumb icon
body .content-header > .breadcrumb {

    >li+li {
        &:before {
            content: '\e258';
            font-family: 'Glyphicons Halflings';
            font-size: 8px;
        }
    }

    i.fa-home {
        padding-right: 2px;
    }

    a:hover:not(#link-home) {
        opacity: .7;
    }
}

.scroll-top {
    display:none;
    position: fixed;
    bottom: 10px;
    right: 20px;
    width: 34px;
    height: 34px;
    color: rgb(238, 238, 238);
    line-height: 34px;
    text-align: center;
    background-color: rgb(34, 45, 50);
    cursor: pointer;
    border-radius: 50%;
    z-index: 99999;
    opacity: 0.7;

    .fa {
        position:relative;
        top: -2px
    }
}

/* content-header customizations */

body section.content-header {

  h1 {
    display: inline;
    @media (max-width: @screen-sm) {
      display: block;
    }
  }

  ol.breadcrumb {
    display: inline;
    position: initial;
    @media (max-width: @screen-sm) {
      position: relative;
      display: block;
    }
  }
}