html {
    position: relative;
    min-height: 100%;
}

body {
    /* Margin bottom by footer height */
    margin-bottom: 50px;
    background-color: #F4F5F7; /*#65686b; #25282b;*/
    /*background-color: rgb(230, 230, 230);*/
}


/* Account for fixed navbar */
body {
    font: 14px/1.5 "Roboto", Arial, Helvetica, sans-serif;
    letter-spacing: .01rem;
    /*line-height: 1.5;*/
    padding-top: 50px;
    /*padding-bottom: 30px;*/
}

p {
    -moz-hyphens: auto;
    -webkit-hyphens: auto;
    -ms-hyphens: auto;
    hyphens: auto;
}

/* Finesse the page header spacing */
.page-header {
    margin-bottom: 20px;
}

    .page-header .lead {
        margin-bottom: 10px;
    }

/*for invoice and credit note*/
/*a_link, a_link:visited, a_link:focus, a_link:active {
    text-decoration: none;
    color: black;
    outline: none;
}*/
.no-wrap {
    white-space: nowrap;
}

a, a:visited, a:focus, a:active {
    text-decoration: none;
    color: #3594c6;
    outline: none;
}

    a.btn:visited, a.btn:focus, a.btn:active {
        color: #fff !important;
    }

    a:hover h2 {
        text-decoration: underline;
    }

.resizable {
    height: 100px;
    overflow-y: hidden;
}

a.resizable-btn-more {
    position: absolute;
    bottom: 10px;
    background-color: #fff;
}

.multicol-2 {
    -webkit-column-count: 2; /* Chrome, Safari, Opera */
    -moz-column-count: 2; /* Firefox */
    column-count: 2;
    -webkit-column-gap: 40px; /* Chrome, Safari, Opera */
    -moz-column-gap: 40px; /* Firefox */
    column-gap: 40px;
    text-align: justify;
}

.multicol-3 {
    -webkit-column-count: 3; /* Chrome, Safari, Opera */
    -moz-column-count: 3; /* Firefox */
    column-count: 3;
    -webkit-column-gap: 30px; /* Chrome, Safari, Opera */
    -moz-column-gap: 30px; /* Firefox */
    column-gap: 30px;
    text-align: justify;
}


fieldset {
    margin: 5px 0;
}

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

div.error > span {
    color: red !important;
}

.errorinline {
    color: red !important;
}

fieldset > div.error span {
    margin-left: 150px;
}

fieldset label, label.fieldset-label {
    /*display: block;*/
    float: left;
    width: 150px;
    color: #666666;
    font-weight: 600;
}

    fieldset label.shortlabel {
        width: 100px;
    }


    fieldset label.mediumlabel {
        width: 170px;
    }

    fieldset label.longlabel {
        width: 300px;
    }

    fieldset label.verylonglabel {
        width: 380px;
    }

.short, fieldset input[type='text'].short {
    width: 140px;
}

.medium {
    width: 240px;
}

.alr {
    text-align: right;
}

.tcapt fieldset label {
    display: block;
    float: none;
}

fieldset input[type='text'], fieldset textarea, fieldset select, fieldset input[type='password'],
fieldset input[type='text'].form-control, fieldset textarea, fieldset select.form-control, fieldset input[type='password'].form-control {
    border: 1px solid #CCCCCC;
    padding: 4px 8px;
    width: 310px;
    color: #333333;
}

    fieldset input[type='text'].time {
        text-align: right;
        width: 80px;
    }

    fieldset input[type='text'].datemask {
        width: 100px;
        text-align: right;
    }

input[type='text'].datemask {
    text-align: right;
}

fieldset div.input-group, div.input-group {
    width: 190px;
}

    fieldset div.input-group.money.lg {
        width: 240px;
    }

    fieldset div.input-group.file {
        width: 500px;
    }

    fieldset div.input-group.money > input, div.input-group.money > input {
        text-align: right;
    }



    fieldset div.input-group.percent {
        width: 65px;
    }

        fieldset div.input-group.percent input[type='text'] {
            width: 65px;
        }

        fieldset div.input-group.percent > input, div.input-group.percent > input {
            text-align: right;
        }


    fieldset div.input-group.quantity-small,
    fieldset input.quantity-small {
        width: 65px;
    }

        fieldset div.input-group.quantity-small input[type='text'] {
            width: 65px;
        }

    fieldset div.input-group.input-group-sm {
        width: 60px;
    }

    fieldset div.input-group input[type='text'] {
        text-align: right;
        width: 150px;
    }

    fieldset div.input-group.input-group-checkable span.input-group-addon {
        padding: 10px 10px 5px;
    }

    fieldset div.input-group.input-group-checkable, div.input-group.input-group-checkable {
        width: 310px;
    }

        fieldset div.input-group.input-group-checkable select {
            width: 270px;
        }

    fieldset div.input-group.input-group-sm input[type='text'] {
        width: 60px;
    }


    fieldset div.input-group.date,
    div.input-group.date {
        width: 100px;
    }

        fieldset div.input-group.date input[type='text'],
        div.input-group.date input[type='text'] {
            width: 100px;
        }

        fieldset div.input-group.date .custom-disabled,
        div.input-group.date .custom-disabled {
            text-align: left;
        }



fieldset.city input.zip {
    width: 82px;
    text-align: right;
}

fieldset.city input.city {
    width: 220px;
    margin-left: 4px;
}


.custom-disabled {
    text-align: right;
}

    .custom-disabled + .input-group-addon {
        padding: 2px 5px;
        background: none;
        border: none;
        vertical-align: top;
    }

    .custom-disabled + .input-group-editonly {
        display: none;
        visibility: hidden;
    }

.input-group-editonly:first-child {
    display: none;
    visibility: hidden;
}

.left {
    float: left;
}

.right {
    float: right;
}

section {
    padding-top: 60px;
    margin-top: -60px;
}

.margin-top-sm {
    margin-top: 15px;
}

.margin-top-md {
    margin-top: 30px;
}

.margin-top-lg {
    margin-top: 45px;
}

.margin-bottom-sm {
    margin-bottom: 15px;
}

.margin-bottom-md {
    margin-bottom: 30px;
}

.margin-bottom-lg {
    margin-bottom: 45px;
}

.btn-fixed {
    position: fixed;
    right: 0px;
    top: 10px;
    z-index: 1040;
}

span.glyphicon.glyphicon-menu-down.float-right {
    height: 25px;
    width: 25px;
    text-align: right;
    cursor: pointer;
}

/* UpdateProgress
------------------------------------------------------------------------------*/

.progress-wrap {
    height: auto !important;
    /*min-height: 35px;
	position: relative;*/
    visibility: visible;
}

.progress-inner {
    position: absolute;
    left: 0px;
    top: 0px;
    background-color: #D3D5D7;
    display: block;
    height: 100%;
    opacity: 0.8;
    width: 100%;
    z-index: 20000;
}

.progress-msg {
    margin: 0 auto;
    position: relative;
    top: 40%;
}

    .progress-msg p {
        background: url("/img/common/loading_back_small.gif") no-repeat scroll 0 0 transparent;
        height: 20px;
        margin: 0px auto !important;
        padding-left: 20px;
        width: 200px;
    }

/* 
------------------------------------------------------------------------------*/


.bonustable ul {
    list-style: none;
}

    .bonustable ul li .range-add {
        display: none;
    }

    .bonustable ul li:hover .range-add {
        display: inline-block;
        cursor: pointer;
    }

.row > .row-title h2 {
    margin-top: 0px;
}

.row > .row-content {
    padding: 10px 15px;
    background-color: #fff;
    box-shadow: 1px 1px 1px rgba(0, 0, 0, 0.376);
    border-radius: 3px;
}

.percentmask {
    width: 80px !important;
    text-align: right;
}

/*.e-treeview .e-active, .e-treeview .e-node-hover {
    background-color: #ff9200 !important;
}*/

::selection {
    color: #fff;
    background: #ff9200; /* WebKit/Blink Browsers */
}

::-moz-selection {
    color: #fff;
    background: #ff9200; /* Gecko Browsers */
}

/* Bonus definition
------------------------------------------------------------------------------*/

ul.conditions, ul.lowerlimits {
    /*padding-top: 20px;*/
    margin-bottom: 10px;
    padding-left: 30px;
    /*border-left: 1px solid #eee;*/
    list-style: none;
}

div.operator > div > select {
    width: 100px;
}

div.condition > div > select, div.condition > div > span, div.condition > div > .btn-group {
    margin-left: 10px;
}

div.condition > div > input[type="text"] {
    margin-left: 10px;
    text-align: right;
    width: 100px;
}

div.operator > div.well, div.condition > div.well {
    /*margin-left: -20px;
			margin-bottom: 0px;*/
}

div.condition span.condition-name {
    display: inline-block;
    margin-right: 10px;
    font-weight: bold;
}

.panel-footer {
    font-style: italic;
    min-height: 42px;
}


.footer p {
    display: block;
    width: 380px;
    margin: 15px auto 0;
    color: #fff;
}

table.scaletable-rowcontainer {
    padding: 0px;
}

    table.scaletable-rowcontainer thead {
        /*border-bottom: 1px solid #D5DCE3;*/
        border-bottom: 2px solid #7B8690;
    }

        table.scaletable-rowcontainer thead tr:nth-child(2) th {
            background-color: #f5f5f5;
            border-top: 2px solid #7B8690;
        }

    table.scaletable-rowcontainer td {
        padding: 0 2px;
    }

        table.scaletable-rowcontainer td:nth-child(2) {
            border-right: 2px solid #7B8690;
            /*padding-right: 5px;*/
        }

    table.scaletable-rowcontainer th {
        padding: 0 2px;
        padding-bottom: 5px;
    }

    table.scaletable-rowcontainer tr:first-child th:nth-child(2), table.scaletable-rowcontainer tr:nth-child(2) th:first-child {
        border-right: 2px solid #7B8690;
    }

    table.scaletable-rowcontainer fieldset div.input-group.money,
    table.scaletable-rowcontainer fieldset div.input-group.quantity {
        width: 180px;
    }

        table.scaletable-rowcontainer fieldset div.input-group.money input[type='text'],
        table.scaletable-rowcontainer fieldset div.input-group.quantity input[type='text'] {
            width: 110px;
        }

    table.scaletable-rowcontainer fieldset div.input-group.perpiece {
        width: 150px;
    }

        table.scaletable-rowcontainer fieldset div.input-group.perpiece input[type='text'] {
            width: 90px;
        }

.scaletable-row {
    padding: 2px 5px;
    border-radius: 5px;
}

    .scaletable-row:hover {
        background-color: rgb(245, 245, 245);
    }

.scaleselector {
    width: 120px;
    margin: 0 5px;
}

.ui-state-highlight > div.well {
    background-color: lightyellow;
}

.drop-hover > div.well {
    background-color: lightgreen;
}

.selectr-selected-item {
    /*background: #E9ECEF;*/ /*#EF8300;*/
    border-radius: 20px;
    /*color: #000;*/
    cursor: default;
    float: left;
    line-height: 2em;
    margin: 2px;
    padding: 2px 5px;
}

    .selectr-selected-item a {
        float: left;
        /*color: #000;*/
        padding: 0 5px;
    }


/* ********************************* Lower limits ************************************** */
.productlist {
    display: inline-block;
}

    .productlist .lowerlimit-selected-product {
        display: inline-block;
        background: #4484c7;
        border-radius: 3px;
        color: #fff;
        cursor: default;
        margin: 2px;
        padding: 2px 5px;
        /*line-height: 1.22em;*/
    }

        .productlist .lowerlimit-selected-product a {
            color: #fff;
            padding-left: 5px;
            cursor: pointer;
        }

/* ********************************* Segment list ************************************** */
li.segmentcontainer > div.alert.alert-primary {
    padding: 0.5em 0.3em;
    margin-bottom: 0;
}

li.segment-dateseparator-container {
    list-style: none;
    margin-top: 10px;
    font-size: 16px;
}


/* ********************************* Agreement popup ************************************** */
.agreement-detail-table {
    width: 100%;
}

.agreement-popup ul {
    list-style: none;
    padding-left: 0px;
}

    .agreement-popup ul li span {
        display: inline-block;
        font-weight: bold;
        width: 100px;
    }

    .agreement-popup ul li p {
        display: inline-block;
    }

.agreement-detail-table ul {
    list-style: disc;
    margin-left: 20px;
}

ul.bonuslist {
    padding-left: 0;
    list-style: none;
}

    ul.bonuslist li {
        background-color: #fff;
        cursor: move;
    }

        ul.bonuslist li.ui-state-highlight {
            height: 100px;
            line-height: 1.2em;
        }

        ul.bonuslist li.ui-sortable-helper {
            padding: 15px;
        }


table.member-list td.col-agreement {
    padding-left: 20px;
}

    table.member-list td.col-agreement .resumedoc,
    table.companygroup-list td.col-agreement .resumedoc,
    table.itg-list td.col-agreement .resumedoc,
    table.ntg-list td.col-agreement .resumedoc,
    table.tradinggroup-list td.col-agreement .resumedoc {
        background: url("/img/common/print.gif") no-repeat scroll 0 0 transparent;
        height: 16px;
        width: 16px;
        display: inline-block;
        vertical-align: middle;
        margin-left: 5px;
        cursor: pointer;
    }

/* Comments
------------------------------------------------------------------------------*/

ul.comments {
    list-style: none;
    padding-left: 0;
}

span.commentcount {
}

.commentcontainer {
    background-color: #FFFFFF;
    margin: 0px;
    padding: 5px 0 5px 10px;
}

ul.comments .commentoptions {
    padding: 10px 5px;
}

ul.comments .commentoptions-container {
    padding: 5px;
}

ul.comments .commentitem {
    margin-bottom: 20px;
}

    ul.comments .commentitem .commentbox {
        margin: 0 50px 10px 0;
    }

    ul.comments .commentitem > .commentbox {
        position: relative;
    }

    ul.comments .commentitem div.timestamp {
        text-align: left;
        padding-top: 2px;
    }

    ul.comments .commentitem.own .commentbox {
        margin-left: 50px;
        margin-right: 0;
    }

    ul.comments .commentitem.own div.timestamp {
        text-align: right;
    }

ul.comments li div.text {
    border: 1px solid #CCCCCC;
    border-radius: 5px;
    background-color: #f8f8f8;
    padding: 5px 10px;
}

ul.comments li span.author {
    color: #2E96D3;
}

ul.comments li span.lastchange {
    color: #999999;
}

ul.comments li div.text {
}

/*Right triangle, placed bottom left side slightly in*/
.tri-right.btm-left:before {
    content: ' ';
    position: absolute;
    width: 0;
    height: 0;
    left: 40px;
    right: auto;
    top: auto;
    bottom: -15px;
    border: 8px solid;
    border-color: #CCCCCC transparent transparent #CCCCCC;
}

.tri-right.btm-left:after {
    content: ' ';
    position: absolute;
    width: 0;
    height: 0;
    left: 41px;
    right: auto;
    top: auto;
    bottom: -13px;
    border: 11px solid;
    border-color: #fff transparent transparent #fff;
    /*border-color: #f8f8f8 transparent transparent #f8f8f8;*/
}

ul.comments .commentitem.own .commentbox.tri-right.btm-left:before {
    left: auto;
    right: 138px;
    border-color: #CCCCCC #CCCCCC transparent transparent;
}

ul.comments .commentitem.own .commentbox.tri-right.btm-left:after {
    left: auto;
    right: 139px;
    border-color: #fff #fff transparent transparent;
    /*border-color: #f8f8f8 #f8f8f8 transparent transparent;*/
}

ul.comments .commentbox:hover .commentoptions {
    display: none;
}

ul.comments .commentbox .commentoptions-container {
    overflow: hidden;
    height: 0;
    opacity: 0;
    margin-right: 10px;
}

ul.comments .commentbox:hover .commentoptions-container {
    height: auto;
    opacity: 1;
    transition: opacity 0.5s ease-in-out;
    display: inline;
}

table.forecasttable th {
    padding: .25rem;
}

table.forecasttable td {
    padding: .25rem;
}

table.forecasttable th:nth-child(n+2) {
    text-align: right;
}

table.forecasttable td:nth-child(n+2) {
    text-align: right;
}

/**** From NX project ****/

/*div.dataTables_wrapper {
    width: 800px;
    margin: 0 auto;
}*/

.dt-body-lastaction {
    color: #7B8690;
}

.tcontainer {
    width: 100%;
}



.table.memberperformancetable > tbody > tr > td,
.table.memberperformancetable > tbody > tr > th,
.table.memberperformancetable > tfoot > tr > td,
.table.memberperformancetable > tfoot > tr > th {
    padding: 4px;
    vertical-align: middle;
}


.table.memberperformancetable > thead > tr > td,
.table.memberperformancetable > thead > tr > th {
    padding: 8px 4px;
    vertical-align: middle;
}

.table.topxtable > thead > tr > td,
.table.topxtable > thead > tr > th {
    padding: 4px;
    border-bottom: none;
}

.table.topxtable > tbody > tr > td,
.table.topxtable > tbody > tr > th {
    padding: 4px;
    border-top: none;
}


.topXlist {
    overflow: hidden !important;
    white-space: nowrap;
    text-overflow: ellipsis;
    width: 200px;
    display: inline-block;
}

/* Dashboard */

.dashboardtile.menu {
    cursor: pointer;
}

table.data tr td.grid_member_deactivated {
    color: red;
}

table.data tr td.grid_member_prospect {
    color: dodgerblue;
}



div.waiting-overlay {
    position: absolute; /* Sit on top of the page content */
    width: 100%; /* Full width (cover the whole page) */
    height: 100%; /* Full height (cover the whole page) */
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background-color: rgba(0,0,0,0.5); /* Black background with opacity */
    z-index: 2; /* Specify a stack order in case you're using a different order for other elements */
    cursor: pointer; /* Add a pointer on hover */
    display: flex;
    justify-content: center;
}

    div.waiting-overlay img {
        display: block;
        margin: auto;
        width: 50px; /* Full width (cover the whole page) */
        height: 50px; /* Full height (cover the whole page) */
    }


.fileupload-box {
    width: 100%;
    min-height: 50px;
    text-align: center;
    vertical-align: middle;
    background: #F4F5F7;
    border-radius: 5px;
}

    .fileupload-box i.fileupload-box-icon {
        font-size: 2.0em;
        color: #EF8300;
    }

ul#notificationcenterlist {
    padding: 0px;
}


/*---------Custom Color CheckBox--------*/
.lss-custom-checkbox .custom-control-label::before,
.lss-custom-checkbox .custom-control-label::after {
    border-radius: .25rem
}

.lss-custom-checkbox .custom-control-label::before {
    background-color: #fff;
}

.lss-custom-checkbox .custom-control-input:checked ~ .custom-control-label::before,
.lss-custom-checkbox .custom-control-input:checked ~ .custom-control-label::after {
    background-color: #EF8300;
    background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' width='8' height='8' viewBox='0 0 8 8'%3e%3cpath fill='%23fff' d='M6.564.75l-3.59 3.612-1.538-1.55L0 4.26l2.974 2.99L8 2.193z'/%3e%3c/svg%3e") border-radius: 50%;
}

.lss-custom-checkbox .custom-control-input:active ~ .custom-control-label::before {
    color: #fff;
    background-color: #EF8300;
}

.lss-custom-checkbox .custom-control-input:focus ~ .custom-control-label::before {
    box-shadow: 0 0 0 .2rem rgba(239, 131, 0,.25)
}


/*This is the default state*/
.lss-custom-radio .custom-control-label::before {
    background-color: #fff;
}

/*This is the checked state*/
.lss-custom-radio .custom-control-input:checked ~ .custom-control-label::before,
.lss-custom-radio .custom-control-input:checked ~ .custom-control-label::after {
    background-color: #EF8300;
    background-image: url("data:image/%3Csvg+xml;charset=utf8,svg xmlns='http://www.w3.org/2000/svg' viewBox='-4 -4 8 8'%3E%3Ccircle r='4' fill='#fff'/%3E%3C/svg%3E");
    border-radius: 50%;
}

/*active state i.e. displayed while the mouse is being pressed down*/
.lss-custom-radio .custom-control-input:active ~ .custom-control-label::before {
    color: #fff;
    background-color: #EF8300;
}

/*the shadow; displayed while the element is in focus*/
.lss-custom-radio .custom-control-input:focus ~ .custom-control-label::before {
    box-shadow: 0 0 0 .2rem rgba(239, 131, 0,.25);
}