@font-face {
    font-family: 'FontAwesome';
    src: url('/_fonts/font-awesome/fonts/fontawesome-webfont.eot?v=4.1.0');
    src: url('/_fonts/font-awesome/fonts/fontawesome-webfont.eot?#iefix&v=4.1.0') format('embedded-opentype'), url('/_fonts/font-awesome/fonts/fontawesome-webfont.woff?v=4.1.0') format('woff'), url('/_fonts/font-awesome/fonts/fontawesome-webfont.ttf?v=4.1.0') format('truetype'), url('/_fonts/font-awesome/fonts/fontawesome-webfont.svg?v=4.1.0#fontawesomeregular') format('svg');
    font-weight: normal;
    font-style: normal;
}
.inputWithButton {
    position:relative;
}
 body {
        font-family: 'Open Sans', sans-serif;
        width: 100%;
        min-width: 1000px;
        -ms-overflow-x: auto !important;
        -ms-overflow-y: auto !important;
        overflow: auto !important;
    }
.hoverStyle:hover  {
    text-decoration: underline;
}
td{
    line-height: 30px;
}
.detailActionPanel h4 {
    font-size: 110%;
    color:#1C5978;
}
.padding-left-0 {
    padding-left: 0px !important;
}
.padding-right-0 {
    padding-right: 0px !important;
}
.padding-left-15{
    padding-left:15px;
}
.padding-right-15{
    padding-right:15px;
}
.padding-top-25{
    padding-top:25px;
}
.padding-top-5 {
    padding-top: 5px !important;
}
.padding-bottom-10{
    padding-bottom:10px;
}
.padding-bottom-25{
    padding-bottom:25px;
}
.padding-bottom-0 {
    padding-bottom: 0 !important;
}
.bold{
    font-weight: bold;
}
.noBold {
    font-weight: normal;
}
.no-pad-right {
    padding-right: 0;
}
.margin-top-0 {
    margin-top: 0 !important;
}
.margin-top-5 {
    margin-top: 5px !important;
}
.margin-left-5 {
    margin-left: 5px !important;
}
.margin-left-10 {
    margin-left: 10px !important;
}
.margin-left-12 {
    margin-left: 12px !important;
}
.margin-left-15 {
    margin-left: 15px !important;
}
.margin-right-5 {
    margin-right: 5px !important;
}
.margin-right-10 {
    margin-right: 10px !important;
}
.margin-right-15 {
    margin-right: 15px !important;
}
.margin-top-10 {
    margin-top: 10px !important;
}
.margin-top-25 {
    margin-top: 25px !important;
}
.margin-top-50 {
    margin-top: 50px;
}
.margin-bottom-0 {
    margin-bottom: 0px !important;
}
.margin-bottom-10 {
    margin-bottom: 10px !important;
}
.margin-bottom-25 {
    margin-bottom: 25px !important;
}

.text-wrap {
    white-space: pre-wrap;
}

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

.position-relative {
    position: relative;
}
.position-absolute {
    position: absolute;
}

.valign-baseline {
    vertical-align: baseline !important;
}
.valign-bottom {
    vertical-align: bottom !important;
}
.valign-middle {
    vertical-align: middle !important;
}

.overflow-elipsis-100 {
    overflow: hidden !important;
    text-overflow: ellipsis !important;
    white-space: nowrap !important;
    width: 100%;
}

.alignBottom {
    position: absolute;
    bottom: 0px;
}

.inlineDisplayStyle{
    display:inline !important;
}
.floatRight {
    float: right;
}
.RadGrid_MetroTouch, .RadGrid_MetroTouch .rgMasterTable,
.RadGrid_MetroTouch .rgDetailTable,
.RadGrid_MetroTouch .rgGroupPanel table,
.RadGrid_MetroTouch .rgCommandRow table,
.RadGrid_MetroTouch .rgEditForm table,
.RadGrid_MetroTouch .rgPager table {
    font-size: 14px !important;
}

.grid-wip-orderdetail .rgIcon {
    display: none !important;
}
.grid-wip-orderdetail .rgStatus {
    border: none !important
}
.grid-wip-orderdetail tr.rgNoRecords td {
    padding-left: 10px !important;
}
.grid-wip-orderdetail .rgPager .rgPagerLabel {
    margin-right: 5px !important;
}

.rtsTxt {
    font-size: 14px;
}
.RadComboBoxDropDown_MetroTouch {
    font-size: 14px !important;
 }

.ui-front{
    z-index:101;
}
.rcbInput,
.riTextBox,
.rcbItem,
.RadComboBoxDropDown_MetroTouch,
span.RadButton_MetroTouch .rbDecorated,
.RadWindow .rwTitleRow em,
.RadInputMgr_MetroTouch,
.RadComboBox_MetroTouch {
    font: 100 14px 'Open Sans', sans-serif !important;
    font-family: 'Open Sans', sans-serif !important;
    font-size: 14px !important;
}
.fa:hover {
    text-decoration: none;
}
.RadComboBox_MetroTouch table td.rcbInputCellLeft,
.RadComboBoxDropDown_MetroTouch .rcbItem,
.RadComboBoxDropDown_MetroTouch .rcbHovered,
.RadComboBoxDropDown_MetroTouch .rcbCheckAllItemsHovered,
.RadComboBoxDropDown_MetroTouch .rcbDisabled,
.RadComboBoxDropDown_MetroTouch .rcbLoading {
    padding: 5px 5px !important;
}
.RadPicker td a {
    margin: 0 0 0 -1px !important;
}
.logbox {
    background-color: silver;
    margin-bottom: 5px;
}
.logheader {
    background-color: dimgrey;
    padding: 3px;
    font-size: 10pt;
    color: white;
}
.logmessage {
    padding: 3px;
    font-size: 10pt;
    color: black;
}
.rbText {
    color: white !important;
}
.photographerResponse .rbText {
    color: #333333 !important;
}
.photographerResponse .RadButton_MetroTouch {
    font-size: 14px !important;
}
.photographerResponse .RadButton .rbIcon:before {
    vertical-align: baseline !important;
}
.photographerResponse .RadButton.rbHovered .rbIcon {
    color: #767676 !important;
}
.rbToggleButton .rbText {
    color: black !important;
    position: relative;
    left: 12px;
    top: 0;
}
.rbTextDark .rbText {
    color: black !important;
    position: relative;
    top: 2px;
}
.buttonStyle {
    height: auto;
    width: auto;
    font-weight: bold;
    font-size: .75em;
    color: white;
    padding: .6875em;
    background-color: #898989;
}
.warninglate {
    background-color: lightcoral;
}
.warningcritical {
    background-color: red;
    color: white;
}
.warning {
    color: red;
}
.warningimage {
    margin-left: 3px;
    vertical-align: initial;
}
.employeeList {
    overflow: hidden;
    width: 100%;
}
.employeeListRow60 {
    float: left;
    width: 60%;
}
.employeeListRow20 {
    float: left;
    width: 20%;
}
.rsCustomAppointmentContainer div {
    width: 100% !important;
    height: 80% !important;
}
.schedularHeader {
    border: 1px solid #e5e5e5;
    color: black;
    font: normal 12px "Segoe UI",Arial,Helvetica,sans-serif;
    line-height: 18px;
    font-weight: 700;
    padding: 2px 2px 2px 2px;
    border-spacing: 2px;
}
.planningOk {
    color: green;
}
.planningNotOk {
    color: red;
}
.rwTopResize{
    height: 0 !important; 
}
.rwTitlebarControls td {
 vertical-align: middle !important;   
}
footer.home {
    position: relative;
    height: auto;
    width: 100%;
    padding: 0 .75em;
}
footer.home a {
        display: block;
        position: relative;
        float: right;
        color: #bfbfbf;
        height: 2em;
        text-decoration: none;
        padding: .5em 7.5em 0 0;
        margin: .5em;
        background: url('/_gfx/webwonders_logo.png') right center no-repeat;
    }
footer.home a:hover {
            text-decoration: underline;
        }

/* ================ Login screen ============== */
header.login {
    position: relative;
    top: 0;
    left: 0;
    height: auto;
    width: 100%;
    padding: 0;
    background-color: white;
    z-index: 50;
}
.login .title {
    display: block;
    position: relative;
    font-size: 1em;
    float: left;
    height: 100%;
    width: 14.625em;
    padding-right: 1em;
    margin: 1em 0;
    padding-left: .475em;
}
section.login {
    background-color: #EEEEEE;
}
section.login .loginCenter {
        position: relative;
        width: 30em;
        height: auto;
        margin: 8.5em auto;
        padding: 1em;
    }
section.login .loginCenter h1 {
            position: relative;
            width: 100%;
            color: #1C5979;
            font-weight: normal;
            text-transform: uppercase;
        }
    section.login .loginCenter .lockIcon {
        position: relative;
        float: left;
        height: 4.175em;
        width: 4.175em;
        background: #afabab url(/_gfx/login_lock_icon.png) no-repeat;
        background-size: contain;
        margin: 0 .5em .5em 0;
        border-radius: 4px;
    }
    section.login .loginCenter .loginMain input {
        display: block;
        position: relative;
        float: left;
        width: 19em;
        height: 2.2em;
        margin-bottom: .5em;
        border: 2px solid #afabab;
        padding-left: .5em;
        border-radius: 0px 3px 3px 0px;
        font-size: 0.85em;
    }
    section.login .loginCenter .loginMain label {
        display: block;
        position: relative;
        float: left;
        width: 7.14em;
        height: 1.875em;
        padding: .25em 0 0 .6em;
        background-color: #afabab;
        color: white;
        font-weight: bold;
        border-radius: 3px 0px 0px 3px;
    }
section.login .loginCenter .loginMain label:first-of-type,
section.login .loginCenter .loginMain input:first-of-type {
                /*margin-bottom: .625em;*/
            }
section.login .loginButton {
        display: block;
        position: relative;
        float: right;
        width: auto;
        height: auto;
        background-color: #1C5979;
        color: white;
        line-height: 1em;
        padding: .5em 2.5em .5em .8em;
        text-transform: uppercase;
        text-decoration: none;
        border-radius: 4px;
    }

    section.login .loginButton:hover {
        background-color: #1d678f !important;
    }

section.login .loginButton:active {
    background-color: #1b6288 !important;
}

section.login .loginButton::after {
            content: "\f084";
            font-family: 'FontAwesome';
            display: block;
            position: absolute;
            right: .125em;
            top: .5em;
            height: 1.5em;
            width: 1.5em;
            color: white;
        }
section.login .capchaCheck {
        position: relative;
        float: left;
        width: 100%;
    }
section.login .capchaCheck input {
            display: block;
            position: relative;
            float: left;
            width: 16em;
            height: 1.875em;
            margin-bottom: .5em;
            border: 1px solid #d4d4d4;
            padding-left: .25em;
        }
section.login .capchaCheck label {
            display: block;
            position: relative;
            float: left;
            width: 12em;
            height: 1.875em;
            padding: .25em 0 0 .5em;
            background-color: #D4D4D4;
        }
section.login .capchaCheck > label.capchaLabel {
            height: 3.75em;
        }
section.login .capchaCheck .radCapcha {
            position: relative;
            float: left;
            width: 16em;
            height: auto;
        }
section.login .capchaCheck .radCapcha img {
                position: relative;
                float: left;
                border: 1px solid #d4d4d4;
                height: 3.75em !important;
                width: 13.625em !important;
                margin-bottom: .5em;
            }
section.login .capchaCheck a {
            display: block;
            position: relative;
            float: left;
            background: url('/_gfx/login_refresh_icon.png');
            background-size: contain;
            height: 30px;
            width: 30px;
            margin: 15px 0 15px 8px;
            border: solid 1px #d4d4d4;
            line-height: 0;
            font-size: 0;
            color: transparent;
        }
section.login .errorText {
        position: relative;
        float: left;
        width: 100%;
        height: auto;
        background-color: #F4CACA;
        border: solid 2px #FF0000;
        padding: .5em;
        padding-left: 1em;
        margin-bottom: .5em;
        border-radius: 4px;
    }
section.login .errorText h2 {
            margin: 0;
            color: #FF0000;
        }
section.login .errorText p {
            color: #FF0000;
        }

section.login .error {
        position: relative;
        float: left;
        height: auto;
        width: auto;
    }

    section.login .error input {
        background-color: #F4CACA !important;
        border: solid 2px #FF0000 !important;
        border-radius: 4px;
    }
    /*.error::after {
    content: "";
    display: block;
    position: absolute;
    background: url(/_gfx/warning_icon.png) no-repeat;
    background-size: contain;
    height: 16px;
    width: 16px;
    top: 7px;
    right: -24px;
}*/
section.login .loginConfirm {
        position: relative;
        float: left;
        margin-top: .1em;
        width: 100%;
        height: auto;
    }
section.login .loginConfirm .fancyCheckbox {
            position: relative;
            float: left;
            clear: both;
        }
section.login .loginConfirm .fancyCheckbox + label {
                position: relative;
                float: left;
                width: auto;
                background: none;
                height: auto;
                margin: 0 0 0 .25em;
                padding-top: 0;
            }
/* ================ Login screen ============== */

/* ========== Login Two Factor screen ========= */
header.login2f {
    position: relative;
    top: 0;
    left: 0;
    height: auto;
    width: 100%;
    padding: 0;
    background-color: white;
    z-index: 50;
}

.login2f .title {
    display: block;
    position: relative;
    font-size: 1em;
    float: left;
    height: 100%;
    width: 14.625em;
    padding-right: 1em;
    margin: 1em 0;
    padding-left: .475em;
}

section.login2f {
    background-color: #EEEEEE;
}

    section.login2f .login2fCenter {
        position: relative;
        width: 30em;
        height: auto;
        margin: 6.5em auto;
        padding: 1em;
    }

        section.login2f .login2fCenter h1 {
            position: relative;
            width: 100%;
            color: #1C5979;
            font-weight: normal;
            text-transform: uppercase;
        }

        section.login2f .login2fCenter .lockIcon {
            position: relative;
            float: left;
            height: 6.45em;
            width: 4.5em;
            background: #afabab url(/_gfx/login2f_lock_icon.png) no-repeat;
            background-size: 60%;
            margin: 0 .5em .5em 0;
            border-radius: 4px;
            background-position: center;
        }

        section.login2f .login2fCenter .lockIcon.hasSecret  {
            height: 4.5em !important;
            background-size: 45%;
        }


        section.login2f .login2fCenter .login2fMain input {
            display: block;
            position: relative;
            float: left;
            width: 16em;
            height: 2em;
            border: 2px solid #afabab;
            padding-left: .5em;
            border-radius: 0px 3px 3px 0px;
        }

        section.login2f .login2fCenter .login2fMain label {
            display: block;
            position: relative;
            float: left;
            width: 7em;
            height: 2em;
            padding: .3em 0 0 .8em;
            background-color: #afabab;
            border-radius: 3px 0px 0px 3px;
            color: white;
            font-weight: bold;
        }

            section.login2f .login2fCenter .login2fMain label:first-of-type,
            section.login2f .login2fCenter .login2fMain input:first-of-type {
                margin-bottom: .32em;
            }

    section.login2f .login2fButton {
        display: block;
        position: relative;
        float: right;
        width: auto;
        height: auto;
        background-color: #1C5979;
        color: white;
        line-height: 1em;
        padding: .5em 2.5em .5em .5em;
        text-transform: uppercase;
        text-decoration: none;
        border-radius: 4px;
        text-align: center;
        height: 1.9em;
        width: 23em;
        margin-bottom: 0.3em;
    }

    section.login2f .login2fButton:hover{
        background-color: #1d678f !important;
    }

        section.login2f .login2fButton:active {
            background-color: #1b6288 !important;
        }

        section.login2f .login2fButton.hasSecret {
            margin-top: 0.1em !important;
        }

        section.login2f .login2fButton::after {
            content: "\f084";
            font-family: 'FontAwesome';
            display: block;
            position: absolute;
            right: .2em;
            top: .5em;
            height: 1.5em;
            width: 1.5em;
            color: white;
        }

    section.login2f .login2fButtonConfig {
        display: block;
        position: relative;
        float: right;
        width: auto;
        height: auto;
        background-color: #1C5979;
        color: white;
        line-height: 1em;
        padding: .5em 2.5em .5em .5em;
        text-transform: uppercase;
        text-decoration: none;
        border-radius: 4px;
        text-align: center;
        height: 1.9em;
        width: 23em;
        margin-bottom: 0.3em;
    }

        section.login2f .login2fButtonConfig:hover {
            background-color: #1d678f !important;
        }

        section.login2f .login2fButtonConfig:active {
            background-color: #1b6288 !important;
        }

        section.login2f .login2fButtonConfig::after {
            content: "\f013";
            font-family: 'FontAwesome';
            display: block;
            position: absolute;
            right: .2em;
            top: .5em;
            height: 1.5em;
            width: 1.5em;
            color: white;
        }


    section.login2f .login2fButtonSendEmail {
        display: block;
        position: relative;
        float: right;
        width: auto;
        height: auto;
        background-color: #1C5979;
        color: white;
        line-height: 1.6em;
        padding: .5em 2.5em .5em .5em;
        text-transform: uppercase;
        text-decoration: none;
        border-radius: 4px;
        text-align: center;
        height: 2.5em;
        width: 28em;
        margin-bottom: 0.3em;
    }

        section.login2f .login2fButtonSendEmail:hover {
            background-color: #1d678f !important;
        }

        section.login2f .login2fButtonSendEmail:active {
            background-color: #1b6288 !important;
        }

        section.login2f .login2fButtonSendEmail::after {
            content: "\f0e0";
            font-family: 'FontAwesome';
            display: block;
            position: absolute;
            right: .5em;
            top: .5em;
            height: 1.5em;
            width: 1.5em;
            color: white;
        }


    section.login2f .errorText {
        position: relative;
        float: left;
        width: 100%;
        height: auto;
        background-color: #F4CACA;
        border: solid 2px #FF0000;
        padding: .5em;
        padding-left: 1em;
        margin-bottom: .5em;
        margin-top: .2em;
        border-radius: 4px;
    }

        section.login2f .errorText h2 {
            margin: 0;
            color: #FF0000;
        }

        section.login2f .errorText p {
            color: #FF0000;
        }

    section.login2f .error {
        position: relative;
        float: left;
        height: auto;
        width: auto;
    }

        section.login2f .error input {
            background-color: #F4CACA !important;
            border: solid 2px #FF0000 !important;
            border-radius: 4px;
        }

    section.login2f .login2fConfirm {
        position: relative;
        float: left;
        margin-top: .1em;
        width: 100%;
        height: auto;
    }

        section.login2f .login2fConfirm .fancyCheckbox {
            position: relative;
            float: left;
            clear: both;
        }

            section.login2f .login2fConfirm .fancyCheckbox + label {
                position: relative;
                float: left;
                width: auto;
                background: none;
                height: auto;
                margin: 0 0 0 .25em;
                padding-top: 0;
            }

#divLogin2fResetTitleContainer {
    margin-bottom: 0em;
    padding-bottom: 0em;
}

#divLogin2fResetContainer {
    background-color: #dedede;
    border-radius: 8px;
    width: 30em;
    margin-top: 0em;
}

    #divLogin2fResetContainer p {
        margin-bottom: 0em;
    }

#divLogin2fConfigContainer {
    display: inline-block;
    margin-top: 1em;
    margin-bottom: 1em;
    font-size: 14px !important;
    width: 100%;
}

.login2fQRCodeContainer {
    text-align: center;
    margin-bottom: 0.5em;
}

.login2fQRCode {
    border-radius: 5px;
    margin-top: 0.5em;
    margin-bottom: 1em;
}

#divLoginStatus2f {
    padding-top: 0.5em !important;
}

.login2fLinkButton {
    color: #008dc3;
    display: inline-block;
    margin-top: 0.1em;
}
/* ========== Login Two Factor screen ========= */

/* checkBox */
.fancyCheckbox {
    width: 22px;
    height: 22px;
    background: #D4D4D4;
    margin: 0;
    position: relative;
}
.fancyCheckbox input[type=checkbox] {
        visibility: hidden;
    }
.fancyCheckbox label.styledCheck {
        cursor: pointer;
        position: absolute;
        width: 22px;
        height: 22px;
        left: 0;
        top: 0;
        background-color: white;
        border: 1px solid #D4D4D4;
    }
.fancyCheckbox label.styledCheck:after {
            -ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=0)";
            filter: alpha(opacity=0);
            display: none;
            content: '';
            position: absolute;
            width: 13px;
            height: 5px;
            background: transparent;
            top: 3px;
            left: 2px;
            border: 4px solid #1C5979;
            border-top: none;
            border-right: none;
            -webkit-transform: rotate(-45deg);
            -moz-transform: rotate(-45deg);
            -o-transform: rotate(-45deg);
            -ms-transform: rotate(-45deg);
            transform: rotate(-45deg);
        }
.fancyCheckbox input[type="checkbox"]:checked + label.styledCheck:after {
        -ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=100)";
        filter: alpha(opacity=100);
        display: block;
    }

* .gridTextBox label.styledCheck[type="text"], * .gridTextBox span label.styledCheck[type="text"] {
    width: 90% !important;
}
* .radInput, * .RadComboBox {
    display: inline-block !important;
    white-space: nowrap !important;
    text-align: left !important;
    background: white !important;
}
.RadComboBox_MetroTouch .rcbFocused .rcbReadOnly .rcbInputCell {
    border-color: #cdcdcd !important;
    color: #666 !important;
    background-color: #fff !important;
}
.RadComboBox_MetroTouch .rcbFocused .rcbReadOnly .rcbInput {
    color: #000 !important;
}
.RadComboBox_MetroTouch .rcbFocused .rcbArrowCell,
.RadComboBox_MetroTouch .rcbReadOnly .rcbInputCell,
.RadComboBox_MetroTouch .rcbArrowCell {
    border-color: #cdcdcd !important;
    color: black !important;
    background-color: #fff !important;
}
.RadComboBox_MetroTouch .rcbFocused .rcbReadOnly .rcbArrowCell a {
    background-position: -11px -58px !important;
}
.RadComboBoxDropDown_MetroTouch .rcbHovered, .RadComboBoxDropDown_MetroTouch .rcbCheckAllItemsHovered,
.RadComboBoxDropDown .rcbList > li {
    color: black !important;
    font-weight: 100 !important;
}
/* Facturen*/
.list-facturen {
    list-style-type: none;
    padding: 0px;
    margin: 0px;
}
.list-facturen li {
        list-style-type: none;
        margin-bottom: 0px;
        padding-bottom: 0px;
    }
.list-facturen .factuur {
        color: #000000;
        padding: 10px 10px 10px 10px;
    }
.list-facturen .bg-light {
        background-color: #ffffff;
    }
.list-facturen .bg-dark {
        background-color: #1C5979;
        color: #ffffff;
    }
.list-facturen .factuur li {
        height: 2.5em;
        clear: both;
    }
.list-facturen .factuur li span {
            float: left;
            position: relative;
            padding: .4em .4em .4em .4em;
            /**padding: .4em;*/
            margin: .2em .2em .2em .2em;
            text-decoration: none;
            text-align: left;
            border-radius: .3em;
            font-weight: normal;
            transition: all .3s ease-out;
        }
.list-facturen .factuur li span:nth-of-type(2) {
                width: 10%;
            }

.list-facturen .factuur li span:nth-of-type(3) {
                width: 30%;
            }

.list-facturen .factuur li span:nth-of-type(4) {
                width: 10%;
            }

.list-facturen .bg-light li span {
        background: #61a1c3;
        color: #fff;
    }
.list-facturen .bg-light li span:nth-of-type(1) {
            background: #1C5979;
            font-weight: bold;
            text-align: center;
        }
    .list-facturen .bg-dark li span {
        background: #fff;
        color: #1C5979;
    }
.list-facturen .bg-dark li span:nth-of-type(1) {
            background: #61a1c3;
            color: #fff;
            font-weight: bold;
            text-align: center;
        }
/* Styles door Frans */
/* ==========================================================================
   Helper classes
   ========================================================================== */
.ir {
    background-color: transparent;
    border: 0;
    overflow: hidden;
    *text-indent: -9999px;
}
.ir:before {
        content: "";
        display: block;
        width: 0;
        height: 150%;
    }
.hidden {
    display: none !important;
    visibility: hidden;
}
.visuallyhidden {
    border: 0;
    clip: rect(0 0 0 0);
    height: 1px;
    margin: -1px;
    overflow: hidden;
    padding: 0;
    position: absolute;
    width: 1px;
}
.visuallyhidden.focusable:active,
.visuallyhidden.focusable:focus {
        clip: auto;
        height: auto;
        margin: 0;
        overflow: visible;
        position: static;
        width: auto;
    }
.invisible {
    visibility: hidden;
}
.clearfix:before,
.clearfix:after {
    content: " ";
    display: table;
}
.clearfix:after {
    clear: both;
}
.clearfix {
    *zoom: 1;
}
/*! HTML5 Boilerplate v4.3.0 | MIT License | http://h5bp.com/ */
/*
* What follows is the result of much research on cross-browser styling.
* Credit left inline and big thanks to Nicolas Gallagher, Jonathan Neal,
* Kroc Camen, and the H5BP dev community and team.
*/

/* ==========================================================================
Base styles: opinionated defaults
========================================================================== */
html,
button,
input,
select,
textarea,
body * {
    font-family: 'Open Sans', sans-serif;
}
html {
    font-size: 100%;
    line-height: 1.4;
}
body {
    background: #373B3E;
}
.bodyDetail {
    background: #FFFFFF;
}
/*
* Remove text-shadow in selection highlight: h5bp.com/i
* These selection rule sets have to be separate.
* Customize the background color to match your design.
*/
::-moz-selection {
    background: #b3d4fc;
    text-shadow: none;
}
::selection {
    background: #b3d4fc;
    text-shadow: none;
}
/*
* A better looking default horizontal rule
*/
hr {
    display: block;
    height: 1px;
    border: 0;
    border-top: 1px solid #ccc;
    margin: 1em 0;
    padding: 0;
}
/*
* Remove the gap between images, videos, audio and canvas and the bottom of
* their containers: h5bp.com/i/440
*/
audio,
canvas,
img,
video {
    vertical-align: middle;
}
/*
* Remove default fieldset styles.
*/
fieldset {
    border: 0;
    margin: 0;
    padding: 0;
}
/*
* Allow only vertical resizing of textareas.
*/
textarea {
    resize: vertical;
}
/* ==========================================================================
Browse Happy prompt
========================================================================== */
.browsehappy {
    margin: 0.2em 0;
    background: #ccc;
    color: #000;
    padding: 0.2em 0;
}
/* ==========================================================================
Author's custom styles
========================================================================== */

/* Load icon-set */
@font-face {
    font-family: 'FontAwesome';
    src: url('/_fonts/font-awesome/fonts/fontawesome-webfont.eot?v=3.2.1');
    src: url('/_fonts/font-awesome/fonts/fontawesome-webfont.eot?#iefix&v=3.2.1') format('embedded-opentype'), url('/_fonts/font-awesome/fonts/fontawesome-webfont.woff?v=3.2.1') format('woff'), url('/_fonts/font-awesome/fonts/fontawesome-webfont.ttf?v=3.2.1') format('truetype'), url('/_fonts/font-awesome/fonts/fontawesome-webfont.svg#fontawesomeregular?v=3.2.1') format('svg');
    font-weight: normal;
    font-style: normal;
}
.truncate {
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
* .icon {
    font-family: FontAwesome;
    display: block;
    position: relative;
    color: inherit;
    font-size: 150%;
}
* .iconinline {
    font-family: FontAwesome;
    display: inline-block;
    position: relative;
    color: inherit;
    font-size: 150%;
}
* .iconinlinesamefont {
    font-family: FontAwesome;
    display: inline-block;
    position: relative;
    color: inherit;
}
h1 {
    margin-top: 0;
    font-weight: normal;
    line-height: 1em;
}
h3 {
    font-size: 14px;
    margin-top: 0;
    margin-bottom: 0;
}
h4, h5, h6 {
}
* {
    -moz-box-sizing: border-box;
    -webkit-box-sizing: border-box;
    box-sizing: border-box;
    font-family: 'Open Sans', sans-serif;
}
section {
    position: relative;
}
p {
    margin: .5em 0;
    color: black;
}
a {
    text-decoration: none;
}
li {
}
li a {
        color: inherit;
    }
* .pad {
    padding: 1em;
}
* .padWidth2x {
    padding: 1em 2em;
}
/* Header ==================================================*/
header {
    position: relative;
    width: 100%;
    height: 4em;
    background: #4E5357;
    color: white;
}
header a.logo {
        display: block;
        position: absolute;
        top: 0;
        left: 0;
        height: 100%;
        width: auto;
        padding: 0 1em;
    }
    header .logo img {
        display: block;
        position: relative;
        width: auto;
        height: 100%;
        padding: .5em;
    }
header .loginStatus {
        width: auto;
        position: relative;
        float: right;
        padding: 3px 1em;
    }
header .loginStatus p {
            margin: 0;
            color: white;
        }
header .loginStatus .loginStatusLeft, header .loginStatus .loginStatusRight {
        display: block;
        position: relative;
        float: left;
    }
header .loginStatus .loginStatusRight {
            padding-left: 1em;
        }
header .loginStatus .loginStatusRight img {
                border-radius: 50%;
            }
header .loginStatus a {
            display: block;
            position: relative;
            width: auto;
            height: auto;
            color: white;
            margin: .25em 0;
        }
header .loginStatus a span.icon {
                float: left;
                margin-right: .5em;
                font-size: 110%;
                color: #00adef;
            }
/* Navigation ==================================================*/
nav {
    position: absolute;
    width: 3em;
    top: 0;
    bottom: 0;
    left: 0;
    height: 100%;
    z-index: 100;
    -moz-transition: all ease-in-out .125s;
    -o-transition: all ease-in-out .125s;
    -webkit-transition: all ease-in-out .125s;
    transition: all ease-in-out .125s;
}
.mainNav a:focus{
    color:white;
}

.mainNav a:hover {
    color: white;    
}
nav.open {
        /*width: 15em;*/
        -moz-transition: all ease-in-out .125s;
        -o-transition: all ease-in-out .125s;
        -webkit-transition: all ease-in-out .125s;
        transition: all ease-in-out .125s;
    }
nav ul {
        display: block;
        position: relative;
        margin: 0;
        padding: 0;
    }
nav ul li {
            display: block;
            position: relative;
            width: 100%;
            height: 3.0625em;
            overflow: hidden;
        }
nav ul li ul {
                background: #4E5357;
            }
    nav a {
        display: block;
        position: relative;
        text-align: left;
        padding: .5em 0;
        height: 3.0625em;
        line-height: 2em;
        padding-left: 3em;
        margin: 0 auto;
        color: white;
        overflow: hidden;
    }
a,
a:hover,
a:active,
a:focus {
    outline: 0;
}
nav a span.icon {
    display: block;
    position: absolute;
    width: 2em;
    text-align: center;
    left: 0;
}
nav #menuButton {
    background: #737475;
}
nav .active {
    background: #A5BDC9;
}
nav .active::after {
        content: "";
        display: block;
        position: absolute;
        top: 35%;
        right: 0;
        width: 0;
        height: 0;
        border-style: solid;
        border-width: .5em .5em .5em 0;
        border-color: transparent white transparent transparent;
    }
nav.open .jsContainsSubnav.active.open::after {
    content: "";
    display: none;
}
nav ul li ul li.active {
    background: #1C5979;
}
/* Maincontent ==================================================*/
section.mainContent {
    position: relative;
    width: 100%;
    height: auto;
}
section.mainContent .mainContentInner {
        float: left;
        width: 100%;
        padding-left: 3em;
        -moz-transition: all ease-in-out .125s;
        -o-transition: all ease-in-out .125s;
        -webkit-transition: all ease-in-out .125s;
        transition: all ease-in-out .125s;
    }
section.mainContent .mainContentHeader {
        position: relative;
        width: 100%;
        float: left;
        padding: .5em;
        height: auto;
        background: #1C5979;
    }

section.mainContent .mainContentHeader a {
            float: left;
            color: white;
        }

section.mainContent .mainContentContent {
        position: relative;
        width: 100%;
        float: left;
        height: auto;
        background: white;
        /*min-height: 660px;*/
        min-height:858px;
        z-index:100;
    }
.contentInner {
    min-width: 94em;
}
.contentInner.dashboard.pad.clear {
    min-width: 84em;
}
/* Telerik ===============================================*/
.ToggleButton {
    position: relative !important;
    width: 20em !important;
    height: 1.8em !important;
    font-size: 1em !important;
    color: white !important;
    font-weight: bold !important;
    text-align: center !important;
    margin-right: 0.3em !important;
    margin-bottom: 1.5em !important;
    border: none !important;
    padding: .125em 0 .4em !important;
}
.ToggleButton:focus {
        outline: none;
    }
.ToggleButtonNormal {
    background-color: #4E5357 !important;
    border: none !important;
}
.ToggleButtonPressed {
    background-color: #4E5357 !important;
    border: none !important;
}

.ToggleButtonChecked {
    background-color: #1C5979 !important;
    border: none !important;
}
.ToggleButtonChecked::after {
        content: "";
        display: block;
        position: absolute;
        bottom: -.5em;
        right: 0;
        left: 0;
        margin: 0 auto;
        width: 0;
        height: 0;
        border-style: solid;
        border-width: .5em .5em 0 .5em;
        border-color: #1C5979 transparent transparent transparent;
    }
.ToggleButtonRadioHide {
    visibility: hidden !important;
}
.filterWrapper {
    position: relative;
    height: auto;
    padding: 1em;
    background: #e8e8e8;
}
.filterWrapper .filterInputs {
        position: relative;
        float: right;
        height: auto;
        width: 100%;
    }
.RadInput_Metro, .RadInputMgr_Metro {
    width: auto !important;
    font-size: 1em !important;
}
.filterInner {
    position: relative;
    float: left;
    width: auto;
}
.filterInner .rbIcon.rbToggleRadio,
.filterInner .rbIcon.rbToggleRadioChecked {
        line-height: 25px !important;
    }
.filterInner .rbText {
        color: #333333 !important;
    }
.filterInner .rbCheckBox {
    padding-right: 0px;
    }
.filterInner .warning .rbIcon.rbToggleCheckbox,
.filterInner .warning .rbIcon.rbToggleCheckboxChecked {
        color: red !important;
    }
.filterInner .warningmsg {
    color: red;
    display: inline-block;
    float: left;
    margin-top: 15px;
    margin-bottom: 5px;
    font-size: 14px;
    font-style: italic;
    }
.filterInner .lblCbTitle {
        color: #333333 !important;
        white-space: nowrap;
        margin-right: 20px;
        margin-left: -2px;
        vertical-align: middle;
    }
    .filterInner .filterControlRow {
       margin-top: 8px;
       margin-left: 25px;
    }
.RadComboBox select {
        margin-bottom: 0;
        padding: 0;
        border-width: 1px !important;
    }
.filterWrapper .styledFilter {
    position: relative;
    float: left;
    width: 17em;
    padding-bottom: 5px;
}

.filterWrapper .styledFilter20em {
    position: relative;
    float: left;
    width: 28em;
    padding-bottom: 5px;
}

.filterWrapper .styledFilter input, .filterWrapper .styledFilter select {
        width: 15em !important;
        height: 33px;
        padding-left: .25em;
        border-color: #C7C7C7 !important;
        font: normal 1em "Segoe UI",Arial,Helvetica,sans-serif !important;
        line-height: 1;
    }
.filterWrapper input[type=checkbox] {
    width: auto !important;
}
.filterInner input[type=checkbox] {
    height: 15px;
    vertical-align: bottom;
    margin-bottom: 3px;
}

.filterWrapper .styledFilter.checkbox div {
    display: inline-block;
}
.filterWrapper .styledFilter.checkbox .frmLabel {
    margin-right: 5px;
}


.rightNav .riSingle,
.rightNav .RadComboBox {
    display: inline !important;
}
.filterWrapper .styledFilter select.navTab,
.filterWrapper .styledFilter input.navTab,
.filterWrapper .styledFilter.rightNav input {
    width: 100% !important;
}
 .filterWrapper .styledFilter select {
        padding-top: 0 !important;
    }
.filterWrapper .styledFilter.telerikCombo {
       width: 400px;
    } 
    /*It was wrong in Werkorders in Filter on product tab combo box in desktop*/
     /*.filterWrapper .styledFilter.telerikCombo .RadComboBox {
       width: 372px !important;
    }*/ 
.RadComboBox_MetroTouch .rcbReadOnly,
.filterWrapper .styledFilter.telerikCombo .RadComboBox_MetroTouch .rcbReadOnly.rcbFocused {
        border-color: #cdcdcd !important;
        color: #000 !important;
        background-color: #ffffff !important;
    }

.RadComboBox_MetroTouch .rcbFocused .rcbActionButton,
.RadComboBox_MetroTouch .rcbActionButton {
        border-color: #cdcdcd !important;
        color: #000 !important;
        background-color: #ffffff !important;
    }
.calenderBlock
{
    position:relative;
}
.filterWrapper .styledFilter .RadComboBox input {
    height: 25px !important;
    width: 100% !important;
}
.filterWrapper .filterButtons {
    position: relative;
    float: right;
    clear:both;
    height: auto;
    width: auto;
    margin: 1em 0 .5em;
}
/*.orderDetailRightColumn  .filterButtons {
    margin: 1em 15px .5em;
}*/
.RadComboBox_MetroTouch td.rcbArrowCell.rcbArrowCellRight a {
    height: 33px;
}
/* Footer ==================================================*/
footer {
    position: relative;
    width: 100%;
    height: auto;
    border-top: .25em solid #3CB4CF;
}
.footerContact {
    position: relative;
    float: left;
    width: auto;
    color: white;
}
.footerContact a {
        position: relative;
        float: left;
        color: inherit;
        padding: .25em .5em;
    }
.footerContact a:first-of-type {
            padding: .25em .5em .25em 0;
        }
.footerContact a::after {
            content: "|";
            display: block;
            position: absolute;
            top: .125em;
            right: -.25em;
            color: #00adef;
        }
/* ==========================================================================
Helper classes
========================================================================== */

* .HLC {
    color: #999;
}
* .SPCL {
    color: #00adef;
}
* .SPBG {
    background-color: #00adef;
}
.note {
    text-align: left;
    color: #cc0000;
}
.error {
    float: left;
    color: #cc0000;
}
input::-webkit-input-placeholder {
    color: #999;
    font-style: italic;
}
input:-moz-placeholder {
    color: #999;
    font-style: italic;
}
input::-moz-placeholder {
    color: #999;
    font-style: italic;
}
input:-ms-input-placeholder {
    color: #999;
    font-style: italic;
}
textarea::-webkit-input-placeholder {
    color: #999;
    font-style: italic;
}
textarea.moz-placeholder {
    color: #999;
    font-style: italic;
}
textarea::-moz-placeholder {
    color: #999;
    font-style: italic;
}
textarea:-ms-input-placeholder {
    color: #cc0000;
}
input.error, textarea.error {
    color: #cc0000 !important;
    border-color: #cc0000 !important;
    background-color: #ffb1b1 !important;
}
input.error::-webkit-input-placeholder {
        color: #cc0000;
    }
input.error:-moz-placeholder {
        color: #cc0000;
    }
input.error::-moz-placeholder {
        color: #cc0000;
    }
input.error:-ms-input-placeholder {
        color: #cc0000;
    }
textarea.error::-webkit-input-placeholder {
        color: #cc0000;
    }
textarea.error:-moz-placeholder {
        color: #cc0000;
    }
textarea.error::-moz-placeholder {
        color: #cc0000;
    }
textarea.error:-ms-input-placeholder {
        color: #cc0000;
    }
.clear:before,
.clear:after {
    content: " "; /* 1 */
    display: table; /* 2 */
}
.clear:after {
    clear: both;
}
/* ==========================================================================
Print styles.
Inlined to avoid required HTTP connection: h5bp.com/r
========================================================================== */
@media print {
    * {
        background: transparent !important;
        color: #000 !important; /* Black prints faster: h5bp.com/s */
        box-shadow: none !important;
        text-shadow: none !important;
    }
    a,
    a:visited {
        text-decoration: underline;
    }
        a[href]:after {
            content: " (" attr(href) ")";
        }
    abbr[title]:after {
        content: " (" attr(title) ")";
    }
    /*
	* Don't show links for images, or javascript/internal links
	*/

    .ir a:after,
    a[href^="javascript:"]:after,
    a[href^="#"]:after {
        content: "";
    }
    pre,
    blockquote {
        border: 1px solid #999;
        page-break-inside: avoid;
    }
    thead {
        display: table-header-group; /* h5bp.com/t */
    }

    tr,
    img {
        page-break-inside: avoid;
    }
    img {
        max-width: 100% !important;
    }

    @page {
        margin: 0.5cm;
    }
    p, h2,
    h3 {
        orphans: 3;
        widows: 3;
    }
    h2,
    h3 {
        page-break-after: avoid;
    }
}
/* EDITOR PROPERTIES - PLEASE DON'T DELETE THIS LINE TO AVOID DUPLICATE PROPERTIES */
/* Einde styles door Frans*/
.progressbarContainer {
    width: 100%;
    height: 25px;
    border: 1px solid #fff;
    overflow: hidden;
}
.progressbar {
    height: 25px;
    background-color: #13781b;
}
.progressbarText {
    color: #fff;
    font-size: 15px;
    font-weight: bold;
    text-align: center;
}
.actionButton {
    background: #888C8F !important;
    border: none !important;
    color: white !important;
}
.actionButton input {
        color: white !important;
    }
.printButton {
    display: inline-block;
    position: relative;
    background-color: transparent;
    background-repeat: no-repeat;
    border: 0 none;
    height: 1.5em;
    text-align: center;
    text-decoration: none;
    padding: 0 .5em;
    vertical-align: top;
    font-size: 150%;
    font-family: 'Fontawesome';
    color: #888c8f;
}
footer.login a {
    display: block;
    position: relative;
    float: right;
    color: #bfbfbf;
    height: 2em;
    text-decoration: none;
    padding: .5em 7.5em 0 0;
    margin: 1em;
    background: url('/_img/webwonders_logo.png') right center no-repeat;
}
.textDeleted {
    text-decoration: line-through;
    color: #bfbfbf;
}
/*=========== OrderDetail ======================================*/
.detailOverview {
    position: absolute;
    top: 1em;
    left: 0;
    width: 600px;
    background: none;
    margin: 0;
    padding: 0;
}
.contentFeedback {
    padding: .75em 1em;
    width: 100%;
    border-radius: .5em;
}
.contentFeedback.error {
    background-color: #F2DEDF;
    color: #AA4344;
    border: 1px solid #AA4344;

}
.orderDetailWrapperMainRow {
    margin: 0;
}
.orderDetailWrapperMainRow a {
        color:#00adef;
    }
.orderDetailWrapperMainRow a:hover {
            text-decoration: underline;
        }
.orderDetailLeftColumn {
    padding-left: 0;       
}
.orderDetailLeftColumn .row {
    margin-left: 0;
    position:relative;
}
.orderDetailRightColumns {
    background-color: #E8E8E8;
}
.orderDetailRightColumn {
    background-color: #DCDCDC;
    min-height: 871px;
    padding: 0;
}
    .orderDetailRightColumn h3 {
        color: #1C5979;
        margin: 0 0 13px;
        font-weight: bold;
    }
.orderDetailWrapper hr {
    margin: 0;
    height: 0;
    border-color: #E9E9E9;
}
.orderDetailWrapper .detailIcon {
    padding: .7em .5em;
    color: #00adef;
}
.bagInformation {
    margin-top: -.25em;
    color: #7e7e7e;
}
.bagInformation .fa-exclamation {
    padding-right: 1em;
    color: #e88317;
}
.normalRow.editable .editIcon,
.productSubRow .editIcon {
    position: absolute;
    top: 0;
    right: 1em;
    color: #00adef;
    padding: .5em;
}
.addButtonRow {
    padding: 1em 0;
}
.addButtonRow a {
        color: #00adef;
        padding-right: 1.5em;
    }
.normalRow.editable.active,
.addButtonRow.active,
.productRow.active {
    background-color: #F6F6F6;
    margin-top: -1px;
    margin-bottom: -1px;
    border: 1px solid #E9E9E9;
    /*padding-bottom:7px;*/
}
.productRow {
    cursor: pointer;
}
.productRow.productMainRow {
        margin-bottom: .125em;
    }
.productRow.productSubRow {
        padding: .5em 0;
    }
.subLineIndicator {
    padding-left: 4px;
    padding-left: 20px;
}    
.productRow img{
        display: inline-block;
        vertical-align: top;
        margin: 0 10px 0;
    }
.product.active .productMainRow,
.productRow.active {
    font-weight: bold;    
}
.viewEdit {
    padding-right: 3em;
}
.viewEdit .editIcon{
    position: absolute;
    top: 0;
    right: 1em;
    color: #00adef;
    padding: .5em;
}
.productRow a {
    display: block;
    color: black;
}
.productRow p.subText {
    color: #888C8F;
    margin-top: -.5em;
}
.productRow p.subTextColor {
    color: #7e7e7e;
}
.productRow p.productTitle {
    margin-top: .5em;
}
.productRow.active p.productSubline {
    font-weight: normal;
    display:inline-block;
}
.productRow p.productSubline {
    position: relative;
    padding-left: 2em;
    display:inline-block
}
.productRow span.productSubline {
    position: relative;
    padding-left: 2.5em;
}
.productRow p.productSubline .productSublineIcon,
    .productRow span.productSubline .sublineIcon {
        position: absolute;
        left: 0;
        top: 0;
        font-size: 16px;
    }
.productRow span.productSubline .sublineIcon {
        margin-top: 2px;
        margin-left: .5em;
    }
    .productRow.active p.productSubline,
    .productRow span.productSubline {
    font-weight: normal;
}
.normalRow.editable.active::before,
.productRow.active::before,
.addButtonRow.active::before {
    content: "";
    position: absolute;
    display: block;
    top: 0;
    right: -12px;
    left: auto;
    width: 0;
    height: 0;
    border-style: solid;
    border-width: 17px 0px 17px 12px;
    border-color: transparent transparent transparent #F6F6F6;
    z-index: 99;
  
}
.detailContent .contactDetail {
    margin-top: -.25em;
} 
.normalRow .detailContent {
    padding-right: 3em;
}
detailContent .row {
        margin-left: -15px;
     }
.detailContent.strong {
        font-weight: bold;
    }
.detailArrowDownButton {
    position: absolute;
    top: .5em;
    right: 1.25em;
    display: inline-block;
    padding: 0 4px;
    border-radius: 3px;
    border: 1px solid #D1D1D1;
}
.detailArrowDown {
    display: inline-block;
    content: "";
    width: 0;
    height: 0;
    border-style: solid;
    border-width: 8px 6px 0 6px;
    border-color: #25A0DB transparent transparent transparent;
}
.detailActionPanel {
    background: #F8F8F8;
    margin-bottom: 27px;
}
.detailActionPanel .detailLabel,
.detailActionPanel .detailText {
        display: inline-block;
        padding-top: 10px;
        padding-bottom: 8px;
    }
    /*for the order(link)  for the vastgoedfotografie in  the center block*/
.orderDetailCenterColumn .detailText:not(.checkboxAlign) {
    padding-top: 0px;
}
.clientWishPanel .detailLabel,
.clientWishPanel .detailText {
        display: inline-block;
        padding-top: 6px;
        padding-bottom: 8px;
    }
.detailActionPanelHeaderBlue {
    color: #1D5A79;
}
/*.orderDetailCenterColumn .clientWishPanel h3 {
    margin: 0 0 10px;
}*/
.detailActionPanel .detailTextList {
        display: inline-block;
        float: left;
        padding-top: 9px;
        clear: left;
    }
.detailActionPanelHeader {
    background: #F0F0F0;
}
    .detailActionPanelHeader i {
        color: #00adef;
        margin-left: .5em;
    }
.textareaLine textarea,
.inputLine input {
    padding: .25em .5em;
}
.textareaLine textarea {
    width: 100%;
    min-height: 100px;
}
.inputLine input {
    width: 100%;
}
.nav-tabs {
    border: none;
}
.nav-tabs > li{
        width: 50%;
    }
.checkBoxLine input[type="checkbox"] {
    margin: 0 .25em .25em 0;
}
.checkBoxLine label {
    cursor: pointer;
    }
.nav-tabs > li > a {
    margin-right: 0;
    line-height: 1.42857143;
    border-radius: 0;
    color: #1D5A79;
    background-color: #C4C4C4;
    border: none; 
    cursor: pointer;
    text-align: center;
    font-size: 14px;
}
.nav-tabs > li.active > a, .nav-tabs > li.active > a:hover, .nav-tabs > li.active > a:focus {
    color: #1D5A79;
    background-color: #DCDCDC;
    border: none; 
    cursor: default;
}
.ui-button.btn {
     display: inline-block !important;
    padding: .5em .75em !important;
    color: white !important;
    background: #888C8F !important;
    border: none !important;
    border-radius: 0 !important;
    transition: all .2s cubic-bezier(.4,0,.2,1) !important;
}
.btn {
    display: inline-block;
    padding: .5em .75em;
    color: white;
    background: #888C8F;
    border: none;
    border-radius: 0 !important;
    transition: all .2s cubic-bezier(.4,0,.2,1);
}
.ui-button.btn:hover {
    background: #6f7376 !important;
    transition: all .2s cubic-bezier(.4,0,.2,1) !important;
}
.btn:hover {
    background: #6f7376;
    transition: all .2s cubic-bezier(.4,0,.2,1);
}
.buttonGray{
    background-color: #888C8F!important;
    color: white;
}
.btn.darkBlue {
    background-color: #1D5A79;
    color: white;
}

    .btn.darkBlue:hover {
        background: #2779A3 !important;
        transition: all .2s cubic-bezier(.4,0,.2,1);
        text-decoration: none;
    }

.btn.blue {
    background-color: #00adef;
    color: white !important;
}
    .btn.blue:hover {
        background: #0094d6 !important;
        transition: all .2s cubic-bezier(.4,0,.2,1);
        text-decoration: none;
    }
.ui-button.btn.blue {
    background-color: #00adef !important;
    color: white !important;
}
.ui-button.btn.blue:hover {
        background: #0094d6 !important;
        transition: all .2s cubic-bezier(.4,0,.2,1) !important;
        text-decoration: none !important;
    }
.divPublishButtonTitle:hover {
    background: #2779A3 !important;
    transition: all .2s cubic-bezier(.4,0,.2,1) !important;
    text-decoration: none !important;
}

.btn.redButton {
    background-color: #ff4500 !important;
    color: white;
    padding: 0;
}
.btn.redButton:hover {
        background: #a52a2a !important;
        transition: all .2s cubic-bezier(.4,0,.2,1);
        text-decoration: none;
    }
.btn.gray {
    background-color: gainsboro !important;
    color: #000000;
    padding: 0;
}
.btn.gray:hover {
        background: gray !important;
        transition: all .2s cubic-bezier(.4,0,.2,1);
        text-decoration: none;
    }

.btn-fp-popup {
    min-height: 36px;
    padding: 0px 10px !important;
    margin: 0px 0px 0px 10px !important;
}

.btn-subtitle {
    padding-top: 0px;
    padding-bottom: 0px;
    line-height: inherit;
}

    .btn-subtitle .div-content {
        height: 34px;
    }

    .btn-subtitle .lbl-subtitle {
        font-size: 10px;
        vertical-align: text-top;
        margin-top: -1px;
        display: inline-block;
    }
.detailClosedWorkOrders .panel-title a,
.detailMessages .panel-title a {
    display: inline-block;
    position: relative;
    padding: .5em 2em .25em 0;
    width: 100%;
    color: #1C5978;
    text-decoration: none;
    border-top: 1px solid #BCBCBC;
}
.detailClosedWorkOrders .panel-title a {
    border-top: none;
}
.detailClosedWorkOrders .panel-title.noBorder a {
    background: none;
}
 .detailClosedWorkOrders .panel-title a span.dateTime,
 .detailMessages .panel-title a span.dateTime {
    color: #868686;
    font-size: 90%;
    line-height: 1.7;
    font-style: italic;
 }
 .detailClosedWorkOrders .panel-title.noBorder a,
.detailMessages .panel-title.noBorder a {
    border-top: none;
    padding: 0 0 .5em;
}
.detailClosedWorkOrders .panel-title a::after,
.detailMessages .panel-title a::after {
    display: block;
    content: "\f107";
    position: absolute;
    font-family: FontAwesome;
    right: .5em;
    top: 7px;
    color: #00adef;
    font-size: 14px;
    -moz-transition: all ease-in-out .25s;
    -o-transition: all ease-in-out .25s;
    -webkit-transition: all ease-in-out .25s;
    transition: all ease-in-out .25s;
}
.detailClosedWorkOrders .panel-title a[aria-expanded="false"]::after,
.detailMessages .panel-title a[aria-expanded="false"]::after {
    -moz-transform: rotate(90deg);
    -ms-transform: rotate(90deg);
    -o-transform: rotate(90deg);
    -webkit-transform: rotate(90deg);
    transform: rotate(90deg);
}
.detailClosedWorkOrders .panel-title.noBorder a::after
.detailMessages .panel-title.noBorder a::after {
    top: 1px;
}
.detailMessages .panel-title a i.fa {
        margin-right: 6px;
        margin-left: 5px;
        color: #00adef;
    }
i.fa.fa-envelope.detailIconMessages {

    color: #767676 !important;
}
.zibberIcon {
    content: "";
    display: inline-block;
    background-image: url('/_img/zibber-icon.png');
    background-repeat: no-repeat !important;
    height: 16px;
    width: 16px;
    margin-top: 2px;
    margin-bottom: -4px;
    vertical-align: baseline;
}
.peopleIcon {
    content: "";
    display: inline-block;
    color: black !important;
    /*background-image: url('../../_img/people-icon.png');*/
    background-repeat: no-repeat !important;
    height: 16px;
    width: 16px;
    margin-top: 2px;
    margin-bottom: -4px;
    vertical-align: baseline;
}

.productRow .zibberIcon,
.orderlineworkorderline .zibberIcon,
.orderlinerow .zibberIcon {
    background-image: url('/_img/zibber-icon-grey.png');
    background-repeat: no-repeat !important;
}

.marker-yellow {
    background-image: url('/_img/zibber-icon-yellow.png') !important;
    background-repeat: no-repeat !important;
    color: #f5f70c !important;
}
.marker-blue {
    background-image: url('/_img/zibber-icon-blue.png') !important;
    background-repeat: no-repeat !important;
    color: #1E6EE6 !important;
}
.marker-green {
    background-image: url('/_img/zibber-icon-green.png') !important;
    background-repeat: no-repeat !important;
    color: #39BF58 !important;
}
.marker-orange {
    background-image: url('/_img/zibber-icon-orange.png') !important;
    background-repeat: no-repeat !important;
    color: #FF7E14 !important;
}
.marker-red {
    background-image: url('/_img/zibber-icon-red.png') !important;
    background-repeat: no-repeat !important;
    color: #FF3529 !important;
}

.customerIcon, .customerIcon-detail {
    font-size: 1.5em;
    padding-top: 5px;
    padding-left: 5px;
    stroke: #00adef;
    stroke-width: 1px;
    -webkit-text-stroke-width: 1px;
    -webkit-text-stroke-color: #00adef;
    background-image: none !important;
}
.customerIcon-detail {
    padding-top: 0px;
    vertical-align: middle;
}

.publishIcon {
    content: "";
    display: inline-block;
    background-image: url('/_img/publish_grey.png');
    background-repeat: no-repeat !important;
    height: 24px;
    width: 24px;
    margin-top: 2px;
    margin-bottom: -4px;
    vertical-align: baseline;
    cursor: default;
}

.publishIconButton {
    content: "";
    display: inline-block;
    background-image: url('/_img/publish_white.png');
    background-repeat: no-repeat !important;
    height: 24px;
    width: 24px;
    margin-top: 2px;
    margin-bottom: -4px;
    vertical-align: baseline;
    cursor: default;
}

.unpublishIconButton {
    content: "";
    display: inline-block;
    background-image: url('/_img/unpublish_white.png');
    background-repeat: no-repeat !important;
    height: 24px;
    width: 24px;
    margin-top: 2px;
    margin-bottom: -4px;
    vertical-align: baseline;
    cursor: default;
}

.resendEmailIconButton {
    content: "";
    display: inline-block;
    background-image: url('/_img/resendemail_white.png');
    background-repeat: no-repeat !important;
    height: 24px;
    width: 24px;
    margin-top: 2px;
    margin-bottom: -4px;
    vertical-align: baseline;
    cursor: default;
    margin-right: 6px;
}

.divPublishButtonTitle {
    float: right;
    margin-right: 2px;
    padding-top: 0.3em;
    cursor: pointer;
    display: inline-block;
    white-space: nowrap;
}

.zibberIconYellow-detail {
    background-image: url('/_img/zibber-icon-yellow.png') !important;
    background-repeat: no-repeat !important;
    margin-top: 4px;
    margin-left: 4px;
}



.detailClosedWorkOrders .panel-title a i.zibberIcon,
.detailMessages .panel-title a i.zibberIcon {
    margin-right: 5px;
}
.detailClosedWorkOrders > .panel-group > .panel,
.detailMessages > .panel-group > .panel {
    margin-bottom: 1em;
    border-bottom: 1px solid #BCBCBC;
}
.detailClosedWorkOrders .panel-body .panel {
    border-bottom: none;
    margin: .5em 0 .25em;
    background: #F0F0F0;
    padding-top: .25em;
}
.detailClosedWorkOrders > .panel-group > .panel {
    border-bottom: none;
    }
.detailClosedWorkOrders  .noBorder {
    border-bottom: 1px solid #BCBCBC;
    background: none;
}
.detailClosedWorkOrders .panel .panel .panel-body {
    padding-bottom: 1em;
    font-style: italic;
}
.detailPresets .panel-title a::after,
.detailMessages .panel-title a::after {
    display: block;
    content: "\f107";
    position: absolute;
    font-family: FontAwesome;
    right: .5em;
    top: -3px;
    color: #00adef;
    font-size: 20px;
    -moz-transition: all ease-in-out .25s;
    -o-transition: all ease-in-out .25s;
    -webkit-transition: all ease-in-out .25s;
    transition: all ease-in-out .25s;
}
.detailMessages .panel .panel .panel-body{
    padding-bottom: 1em;
    font-style:normal;
}
.productname,
.orderDetailCenterColumn h2,
.orderDetailCenterColumn h3 {
    margin-top: .25em;
    margin-bottom: 1em;
    font-size: 20px;
    color: #1D5A79;
}
.orderDetailCenterColumn h2.h2Status {
    margin-top: 0;
    margin-bottom: 0;
    /*font-size: 1.75em;*/
}
.orderDetailCenterColumn h3 {
    font-size: 14px;
    margin: 15px 0 13px;
    font-weight: bold;
}
.paddingTot {
    padding: 0 1em;
}
.customerWishes {
    margin-bottom: 1em;
}
.customerRemark {
        font-style: italic;
        margin: 0;
}
.cbxCustomerSetting {
    margin-top: -15px;
}
/*TODO PLEASE CHECK THIS WITH RENATA => NK*/
.cbxCustomerSetting .rbText {
    color: black !important;
}
.RadInput_MetroTouch.riSingle .riTextBox, .editProductPopup .editproduct .editproductquantity .prodLineControls {
    padding-left: 10px !important;
}
.RadInput_MetroTouch.riSingle textarea.riTextBox,  .RadInput_MetroTouch textarea.riTextBox {
    padding: 7px 10px  !important;
}
.paddedLabel {
    display: inline-block;
    padding-top: 8px;
    padding-bottom: 8px;
}
.dropdownCorrection {
    margin-left: -4px;
}
.invoiceH2{
    font-size: 20px;
    color: #1C5979;
    font-weight: bold;
    text-transform: uppercase;
}
.invoiceContactBlock label {
    display: block;
    width: 100%;
    border: solid 2px #F0F0F0;
    background-color: #F0F0F0;
    padding: 10px 2.5em 10px 10px;
    position: relative;
}
.invoiceContactBlock input[type="radio"]:checked + label {
    background-color: #f8f8f8;
    border: solid 2px #00ADEF;
}
.invoiceContactBlock input[type="radio"]:checked + label::after {
        content: "\f00c";
        display: inline-block;
        position:absolute;
        right: 10px;
        top: 10px;
        color: #00adef;
        font: normal normal normal 14px/1 FontAwesome;
        font-size: inherrit;
        text-rendering: auto;
        -webkit-font-smoothing: antialiased;
        -moz-osx-font-smoothing: grayscale;
    }
.invoiceContactBlock input {
    position: absolute;
    top: 13px;
    left: 25px;
}
.uploadButton ul,
 .uploadButton ul li,
.uploadButton .ruFileWrap {
    width: 100%;
}
.uploadButton .ruFakeInput {
    width: 60% !important;
    max-width: 290px;
}
.uploadOrderDetail .ruRemove {
    position: absolute;
    right: 0px;
}

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

.uploadCommentAttachment {
    padding-left: 15px;
}

.uploadButton .ruBrowse {
    border: none !important;
    background-color: #00adef !important;
    display: inline-block;
    padding: .5em .75em;
    color: white !important;
    background: #888C8F;
    border: none;
    border-radius: 0 !important;
    transition: all .2s cubic-bezier(.4,0,.2,1);
    cursor: pointer !important;
}
.uploadButton .ruBrowse.ruButtonHover {
    background: #0094d6 !important;
    transition: all .2s cubic-bezier(.4,0,.2,1) !important;
    text-decoration: none !important;
        cursor: pointer !important;

}

.fileupload .ruFileWrap {
    display: inline !important;
}

.fileupload .ruSelectWrap .ruFileWrap {
    display: inline-block !important;
}

.fileupload .ruButton.ruRemove {
    float: right;
}

.employeeImageContainer {
    margin: 2em  0;
    padding: 2em 1em;
    background-color: #E8E8E8;
}
.employeeImageContainer img {
        border-radius: 150px;
    }
.employeeImageButtons {
    margin-top: 4em;
}
.userImageColomn img {
    border-radius: 50%;
}
/*old?*/
.detailOverview table {
    table-layout: fixed;
    border-collapse: collapse;
    width: 100%;
}
.detailOverview table td {
        width: auto;
        padding: .5em;
        vertical-align: top;
    }
.detailOverview table tr:last-of-type td {
        border-bottom: 1px solid #E9E9E9;
    }
.detailOverview table tr:last-of-type td.spacer {
            border: none;
        }
.detailOverview table td.firstCol {
        width: 105px;
    }
.detailOverview table.hasSubItems td.firstCol {
        width: 250px;
    }
.detailOverview table td.lastCol {
        width: 20px;
        padding: .5em 0;
    }
.detailOverview table td.spacer {
        width: 20px;
        padding: 0;
    }
.detailOverview table td.blueText,
.detailOverview table td.subItem {
        color: #25a0da;
    }
.detailOverview table .lastCol .icon {
        font-size: 90%;
        color: #25a0da;
    }
.iconaction {
    color: #f56800 !important;
}
.detailOverview table tr.current td.spacer {
    position: relative;
}
.detailOverview table tr.current td.spacer::after {
        content: "";
        position: absolute;
        display: block;
        top: 12px;
        right: 0;
        width: 0;
        height: 0;
        border-style: solid;
        border-width: 8px 8px 8px 0;
        border-color: transparent #e8e8e8 transparent transparent;
        z-index: 500;
    }
.detailOverview table tr.current .lastCol .icon {
    display: none;
}
.detailOverview table tr.current td {
    background: #B0B0B0;
    color: white;
}
.checkboxList input {
    margin-right: .5em;
}
.detailDetail {
    float: left;
    padding-left: 600px;
    max-width: 100%;
}
.detailDetailInner {
    width: 100%;
    padding: 20px;
    background: #e8e8e8;
}
.detailDetailInner .detailCol1,
.detailDetailInner .detailCol2,
.detailDetailInner .detailCol3 {
        position: relative;
        float: left;
        min-width: 350px;
        width: 33%;
        padding: 0 15px;
   }
.detailDetailInner .detailCol2 {
        min-width: 600px;
        width: 66%;
    }
.detailDetailInner .detailCol3 {
        width: 100%;
    }
.detailDetailBlock .titleBar,
.detailDetailBlock .buttonBar {
    position: relative;
    clear: both;
    width: 100%;
    margin-bottom: 1em;
}
.detailDetailBlock .titleBar h2 {
        font-weight: 100;
        color: #1C5979;
        margin: 0;
    }
.detailDetailBlock table {
    table-layout: fixed;
    border-collapse: collapse;
    max-width: 100%;
}

.detailDetailBlock table td {
        width: auto;
        padding: .5em 0 .5em .5em;
        vertical-align: top;
    }
.detailDetailBlock table td.firstCol {
            width: 160px;
            padding: .5em .5em .5em 0;
        }
.divHundredPercentWidth .riSingle {
    /*width: 80% !important;*/
    width: auto !important;
    max-width: 100%;
    padding-bottom: 10px;
}
.divRadioButtonNormalSize{
    margin-top:15px;
}
.divRadioButtonWidth20 {
    width: 20%;
    float: left;
}
.divRadioButtonWidth80 {
    width: 80%;
    float: left;
}
.detailDetailBlock {
    /*border-bottom: 1px solid #B0B0B0;
    padding: 1em 1em;*/
}
.left {
    margin-bottom: 1em;
}
.detailDetailBlock:first-of-type {
    padding-top: 0;
}
.detailDetailBlock:last-of-type {
    border-bottom: none;
    padding-bottom: 0;
}
.left .detailDetailBlock:last-of-type {
    border-bottom: 1px solid #B0B0B0;
    padding-bottom: 1em;
}
.fullWidth{
    padding-bottom:10px;
    padding-left:5px;
}
.detailDetailBlock a {
    color: #25a0da;
}
.detailDetailBlock a .icon {
        display: inline-block;
        font-size: 90%;
    }
.detailDetailBlock .fullWidth label{
            color:#666;
    }
    /* /old? */
@media (min-width:1540px) {
.left, .right {
        float: left;
        margin-bottom: 0;
    }
.detailDetailBlock {
        width: 376px;
    }
.left .detailDetailBlock:last-of-type {
        border-bottom: none;
        padding-bottom: 0;
    }
.right {
        min-height: 850px;
        border-left: 1px dashed #B0B0B0;
        margin-left: 2em;
        padding-left: 1em;
    }
}
.uploadFileHeader {
    background: #B0B0B0;
    color: white;
}
.fileTypeImage {
    content: '\f1c5';
}
.colorGrey {
    color: #B0B0B0 !important;
}
.colorBlue {
    color: #1C5979 !important;
}
.lockedIcon {
    display: inline;
    float: right;
    font-size: 1.2em;
    padding-left: 2px;
}
.ahrefSmall {
    font-size: .80em;
}
.correspondence h2 {
    font-weight: 100;
    color: #1C5979;
    margin: 0;
}
.correspondenceMessageContainer {
    border-bottom: 1px solid #B0B0B0;
    padding: 0em 0em 1em 0em;
}
.correspondenceUserContainer {
    color: #B0B0B0;
    /*float:right;*/
    position: relative;
    top: -15px;
    padding: 0em 0em 0em 0em;
}
.noPadding {
    padding: 0em 0em 0em 0em !important;
}
/*=========== /OrderDetail ======================================*/
/*Detail styles*/
.subHeader {
    position: relative;
    height: auto;
    padding: 0 0 2em;
    background-color: white;
}
    .subHeader hgroup {
        position: relative;
        float: left;
        margin-left: 1em;
        width: auto;
        min-width: 100px;
    }
.subHeader hgroup h1 {
            font-size: 1.2em !important;
            color: #898989;
            font-weight: normal;
            margin: 1em 0 0 0;
            padding: 0;
        }
        .subHeader hgroup.autowidth {
            width: auto;
            margin-right: 1em;
        }
        .subHeader hgroup.identwidthtoorderactions {
            width: 6.2%;
            margin-right: 0px;
        }
.subHeader h2 {
        font-size: 1.75em;
        color: #1C5979;
        font-weight: bold;
        margin: 0;
        padding: 0;
        text-transform: uppercase;
    }
.subHeader .btnBlock {
        position: relative;
        float: right;
        margin: 2em 1em 0 0;
    }
.subHeader .btnBlock span {
            height: auto;
            width: auto;
        }
.subHeader .orderActionsContainer {
        position: relative;
        float: left;
        margin: 1.9em 1em 0em 0em;
    }
span.RadButton_MetroTouch.rbSkinnedButton.btn.blue,
span.RadButton_MetroTouch.rbLinkButton.btn.blue,
span.RadButton_MetroTouch.rbVerticalButton.btn.blue,
span.RadButton_MetroTouch.RadButton.rbDisabled.btn.blue,
span.RadButton_MetroTouch.RadButton.rbDisabled.btn.blue.rbHovered,
span.RadButton_MetroTouch.RadButton.rbDisabled.btn.blue:active,
span.RadButton_MetroTouch.RadButton.rbDisabled.btn.blue:focus,
span.RadButton_MetroTouch.rbSkinnedButton.btn.grey,
span.RadButton_MetroTouch.rbLinkButton.btn.grey,
span.RadButton_MetroTouch.rbVerticalButton.btn.grey,
span.RadButton_MetroTouch.RadButton.rbDisabled.btn.grey,
span.RadButton_MetroTouch.RadButton.rbDisabled.btn.grey.rbHovered,
span.RadButton_MetroTouch.RadButton.rbDisabled.btn.grey:active,
span.RadButton_MetroTouch.RadButton.rbDisabled.btn.grey:focus {
    border: none !important;
    padding: 0 !important;
    background: #00adef !important;
    transition: all .2s cubic-bezier(.4,0,.2,1);
}
span.RadButton_MetroTouch.rbSkinnedButton.btn.blue.rbHovered {
    background: #0094d6 !important;
    transition: all .2s cubic-bezier(.4,0,.2,1);
    }
span.RadButton_MetroTouch.rbSkinnedButton.btn.orderActions.rbHovered {
        background: #0094d6 !important;
        transition: all .2s cubic-bezier(.4,0,.2,1);
    }
.subHeader .btnBlock .btnSave,
.subHeader .btnBlock .btnSave:hover,
.subHeader .btnBlock .btnSave:active {
    background-color: #7dba00;
}
.subHeader .btnBlock .btnSaveExit,
.subHeader .btnBlock .btnSaveExit:hover,
.subHeader .btnBlock .btnSaveExit:active {
    background-color: #f56800;
}
.subHeader .btnBlock .btnCancel,
.subHeader .btnBlock .btnClose,
.subHeader .btnBlock .btnCancel:hover,
.subHeader .btnBlock .btnCancel:active,
.subHeader .btnBlock .btnClose:hover,
.subHeader .btnBlock .btnClose:active {
    background-color: #e8171f;
}
.subHeader .btnBlock input {
    position: relative;
    float: left;
    height: auto;
    width: auto;
    font-weight: bold;
    font-size: 1em;
    color: white;
    padding: .8em;
}
.subHeader .btnBlock #btnSaveExit_input {
    background-color: #f56800;
}
.subHeader .btnBlock #btnCancel_input, header .btnBlock #btnClose_input {
    background-color: #e8171f;
}
.subHeader .feedbackBar {
    position: relative;
    float: left;
    width: 100%;
    height: auto;
    padding: 1em;
    animation: slideup 7s;
    -moz-animation: slideup 7s;
    -webkit-animation: slideup 7s;
    -o-animation: slideup 7s;
}  
.subHeader .feedbackBar p {
        position: relative;
        text-align: right;
        height: auto;
        width: 100%;
        margin: 0;
        padding: .25em 1.25em .3em;
        text-transform: uppercase;
        font-size: .85em;
    }
.subHeader .feedbackBar p.ok {
            background-color: #7dba00;
            color: white;
        }
.subHeader .feedbackBar p.error {
            background-color: #e8171f;
            color: white;
        }
.subHeader .feedbackBar p.warning {
            background-color: #e88317;
            color: white;
        }
.subHeader .rbSkinnedButton {
    padding: 0 !important;
    margin: 0 0 0 1.25em !important;
}

* .unPad {
    margin: -1em;
}
.listTab .tabBar{
        display: block;
    position: relative;
    width: 100%;
    padding: 0;
    z-index: 50;
    clear: both;
}
.listTab .tabBar .tabBarBackground{
            position: absolute;
        bottom: 0;
        height: 2em;
        width: 100%;
        background: #f2f2f2;
}
.listTab .RadTabStrip_MetroTouch .rtsLevel1 .rtsLink{
        height: 32px !important;
    margin-top: 6px !important;
    color: #1B5877 !important;
    background: #fcfcfc !important;
}
.listTab .RadTabStrip_MetroTouch .rtsLevel1 .rtsLink:hover,
    .RadTabStrip_MetroTouch .rtsLevel1 .rtsLink.clicked{
            background: #e8e8e8 !important;
        color: #1C5979 !important;
}
.listTab .RadTabStrip_MetroTouch .rtsLevel1 .rtsLink.rtsBefore{
    border-right: none !important;
}
.listTab .RadTabStrip_MetroTouch .rtsLevel1 .rtsLink.rtsAfter{
    border-left: none !important;
}
.listTab .RadTabStrip_MetroTouch .rtsLevel1 .rtsSelected,  .RadTabStrip_MetroTouch .rtsLevel1 .rtsSelected:hover{
        border: none !important;
    color: #1B5877 !important;
    background-color: #e8e8e8 !important;
    top: 1px !important;
    height: 38px !important;
    margin-top: 0 !important;
    line-height: 2.4 !important;
    border-top: 1px solid #cdcdcd !important;
    border-right: 1px solid #cdcdcd !important;


}
.listTab .RadTabStripTop_MetroTouch .rtsLevel1{
        border-bottom: none !important;
}
.listTab .RadTabStrip_MetroTouch .rtsLevel1 .rtsFirst .rtsSelected,
.RadTabStrip_MetroTouch .rtsLevel1 .rtsFirst:hover .rtsSelected{
        border-left: 1px solid #e8e8e8 !important;
    background: #e8e8e8 !important;

}
.tabBar {
    display: block;
    position: relative;
    width: 100%;
    padding: 0;
    z-index: 50;
    clear: both;
}
.tabBar .tabBarBackground {
        position: absolute;
        bottom: 0;
        height: 2em;
        width: 100%;
        background: #f2f2f2;
    }
.RadTabStrip_MetroTouch .rtsLevel1 .rtsLink {
    height: 32px !important;
    margin-top: 6px !important;
    color: #1B5877 !important;
    background: #e8e8e8 !important;
}
.RadTabStrip_MetroTouch .rtsLevel1 .rtsLink:hover,
.RadTabStrip_MetroTouch .rtsLevel1 .rtsLink.clicked {
        background: white !important;
        color: #1C5979 !important;
    }
.RadTabStrip_MetroTouch .rtsLevel1 .rtsLink.rtsBefore {
        border-right: none !important;
    }
.RadTabStrip_MetroTouch .rtsLevel1 .rtsLink.rtsAfter {
        border-left: none !important;
    }
 .RadTabStrip_MetroTouch .rtsLevel1 .rtsSelected,  .RadTabStrip_MetroTouch .rtsLevel1 .rtsSelected:hover {
    border: none !important;
    color: #1B5877 !important;
    background-color: #fcfcfc !important;
    top: 1px !important;
    height: 38px !important;
    margin-top: 0 !important;
    line-height: 2.4 !important;
    border-top: 1px solid #cdcdcd !important;
    border-right: 1px solid #cdcdcd !important;
}
 .RadTabStripTop_MetroTouch .rtsLevel1 {
    border-bottom: none !important;
}
.RadTabStrip_MetroTouch .rtsLevel1 .rtsFirst .rtsSelected,
.RadTabStrip_MetroTouch .rtsLevel1 .rtsFirst:hover .rtsSelected {
    border-left: 1px solid #f2f2f2 !important;
    background: #fcfcfc !important;

}
.RadTabStrip_MetroTouch {
    line-height: 2 !important;
}
.tabContent {
    position: relative;
    width: 100%;
    height: auto;
    padding: 1em 0 0;
    margin-bottom: 1em;
}
.addButton {
    margin-bottom: .5em;
}
.publishButtonRow {
    margin-top: 5px;
}
#btnPublish {
    border-radius: 5px !important;
    width: 118px;
    padding: 0.2em 0.75em;
}

#btnUnPublish {
    border-radius: 5px !important;
    width: 178px;
    padding: 0.2em 0.75em;
}

#btnResendInvite {
    border-radius: 5px !important;
    /*width: 118px;*/
    padding: 0.2em 0.75em;
}

.styledDetailList {
    position: relative;
    padding: 1em 1.5em 1.5em 0;
    /*padding: 1em 1.5em 1.5em 1.5em;*/
    width: 100%;
    border: solid 1px #cdcdcd;
    border-top: none;
}
.styledDetailList.borderTop {
    border: solid 1px #cdcdcd;
}
.styledDetailList.customerSettings, .styledDetailList.productSettings {
    padding: 1em 0 1.5em 0;
}
.orderDetailCenterColumn .styledDetailList.borderTop {
    border: none;
    padding: 0;
}
.orderDetailCenterColumn .styledDetailList .detailLabel,
.orderDetailCenterColumn .styledDetailList .detailText {
    display: inline-block;
    padding-top: 8px;
    padding-bottom: 8px;
}
/*Changed for the (settings) werkorders page radio button styling*/
.orderDetailRightColumns label.detailLabel {
    padding-top: 0;
}
.styledDetailList .inputWrapper,
.styledDetailList .labelInput {
    position: relative;
    padding-left: 1.5em;
    width: 100%;
    float: left;
    max-width: 1300px;
    /*max-width: 1092px;*/
}
.styledDetailList.customerSettings .inputWrapper {
    position: inherit;
}
.styledDetailList .labelInput {
    padding-left: 0;
}
.styledDetailList .labelInput .inputWrapper {
            position: relative;
            float: left;
            padding-left: 1.5em;
            width: 49.5%;
        }
    .styledDetailList .inputWrapper:not(.portal-notification-inputWrapper) > span:not(.rbSkinnedButton),
    /*.styledDetailList .inputWrapper > span:not(.errorSpan),*/
    .styledDetailList .inputWrapper:not(.portal-notification-inputWrapper) > div:not(.rbSkinnedButton),
    .styledDetailList .inputWrapper .labelInput > span {
        display: block;
        float: left;
        width: 100% !important;
        clear: both;
        margin: .5em 0 !important;
        min-height: 36px;
    }
.styledDetailList .labelInput .label {
        width: auto !important;
        float: left;
        padding: .25em .5em;
    }
.styledDetailList .labelInput .label * {
            color: #666;
        }
.riSingle.RadInput.RadInput_MetroTouch .checkbox {
    display: block;
    height: auto;
}
.riSingle.RadInput.RadInput_MetroTouch .checkbox input,
.riSingle.RadInput.RadInput_MetroTouch .radioWrapper input {
        vertical-align: top;
        margin-top: 7px;
    }
.styledDetailList .inputWrapper > span.rbSkinnedButton {
    margin-top: 1em;
    float: right;
}
.styledDetailList .inputWrapper > span > label,
.styledDetailList .inputWrapper > div > label {
    float: left !important;
    /*width: 17% !important;*/
    width: 19% !important;
    padding-right: 1em !important;
}
.customerSettings .inputWrapper div label{
    width:25% !important;
}
.styledDetailList .inputWrapper > span > label.riLabelRadioButton,
.styledDetailList .inputWrapper > div > label.riLabelRadioButton {
    width: 14% !important;
}
.riSingle .riTextBox .test{
    width:60% !important;
}
.styledDetailList .labelInput .inputWrapper > span > label,
.styledDetailList .labelInput .inputWrapper > div > label {
    /*width: 35% !important;*/
    width: 39% !important;
}
.ui-dialog .styledDetailList .inputWrapper > span > label,
.ui-dialog .styledDetailList .inputWrapper > div > label {
    width: 28% !important;
}
.styledDetailList .inputWrapper > span > span,
.styledDetailList .inputWrapper > div > div, .portal-notification-formcontrol {
    /*width: 83% !important;*/
    width: 56.6% !important;
}
.styledDetailList .labelInput .inputWrapper > span > span,
.styledDetailList .labelInput .inputWrapper > div > div {
    /*width: 65% !important;*/
    width: 61% !important;
}
.ui-dialog .styledDetailList .inputWrapper > span > span,
.ui-dialog .styledDetailList .inputWrapper > div > div {
    width: 72% !important;
}
.ui-dialog span.ui-button-text{
    padding:0;

}
.ui-dialog span.ui-button-text:focus{
    display:none;

}

.portal-notification-inputWrapper {
    width: 100%;
    display: flex;
}
    .portal-notification-inputWrapper .errorSpan {
        width: 25px !important;
        right: -25px;
    }

.divContainerRadioButton {
    float: left;
    margin-left: 25%;
}
.divTopRadioButtonNormalSize{
    margin-top:-2%;
}
.divContainerRadioButtonShortDescription{
    float:left;
    margin-left:14%;
}
.divContainerRadioButtonLongDescription{
    float:left;
    margin-left:14%
}
 .divContainerRadioButtonLongDescription .divHundredPercentWidth .riSingle {
       width: 90% !important;
       max-width: 100%;
         }
 .divContainerRadioButtonShortDescription .divHundredPercentWidth .riSingle {
    width: 90% !important;   
    max-width: 100%;

}
.divOriginal{
    padding-bottom: 5px;
}

.marginleft-25perc {
    margin-left: 25% !important;
}

.width-100perc {
    width: 100% !important;
}

#divPanoramaContainer, #divNadirPatchContainer, #divPanoramaBrightRiverKeyContainer {
    width: 100% !important;
}

#divContainerVideoExtraFile {

}

.size10 {
    width: 7ex !important;
    max-width: 100% !important;
}
.size20 {
    width: 14ex !important;
    max-width: 100% !important;
}
.size40 {
    width: 30ex !important;
    max-width: 100% !important;
}
.size50 {
    width: 50ex !important;
    max-width: 100% !important;
}
.RadPicker.RadPicker_MetroTouch.riContentWrapper {
    width: 19ex !important;
}
.size200 {
    width: 100ex !important;
    max-width: 100% !important;
}
.size400 {
    width: 200ex !important;
    max-width: 100% !important;
}
.sizeCustom {
    width:100ex !important;
    max-width:100%;
}

.formlabel {
    display: inline-block;
    width: 25%;
    color: #666666;
    vertical-align: middle;
}
    .formlabel input[type="radio"] {
        margin-right: 8px;
    }
/*for tab in klant page (instellingen*/
/*.sizeCustom.KlantTab {
    width: 100ex !important;
    max-width: 100%;
}*/
.size100proc {
    width: 100% !important;
}
.radioWrapper .radio,
.radioWrapper .radio + label {
    position: relative;
    float: left;
    padding-right: 1em;
}
.riSingle .riContentWrapper {
    vertical-align: top !important;
}
body .riSingle textarea {
    padding-right: 5px;
    padding-left: 5px;
    margin: 0;
    margin-left: -3px;
    width: 100%;
    /*line-height: 31px;*/
    line-height: 18px;
    border-color: #cdcdcd;
    background: white;
    color: black;
    font-family: 'Open Sans', sans-serif;
    border-style: solid;
    border-width: 1px;
}
/*Radwindow style*/
.RadWindow_MetroTouch {
    font-family: 'Open Sans', sans-serif;
    font-size: 14px;
    border: 1px solid #cdcdcd;
    background-color: #fff;
}
.RadWindow_MetroTouch .rwTable .rwControlButtons li a {
        cursor: pointer;
    }
.RadWindow_MetroTouch .rwTable .rwControlButtons li a:hover {
            border-color: transparent !important;
        }
.RadWindow_MetroTouch a.rwPopupButton, .RadWindow_MetroTouch td.rwWindowContent a.rwPopupButton:hover {
        border: none !important;
        cursor: pointer !important;
        margin-top: 1em !important;
        background-color: #888C8F !important;
    }
.RadWindow .rwPopupButton, .RadWindow .rwPopupButton span {
    color: white !important;
}
.RadWindow_MetroTouch .rwTable .rwTitlebarControls {
    height: 40px !important;
}
.RadWindow_MetroTouch table .rwContentRow,
.RadWindow_MetroTouch table .rwFooterRow {
    background: #fff;
}
.RadWindow_MetroTouch .rwTable a.rwIcon,
.RadWindow_MetroTouch .rwDialogPopup {
    background-image: none !important;
}
.RadWindow_MetroTouch .rwTable a.rwIcon {
    height: 0 !important;
    width: 16px !important;
    padding: 0 !important;
    margin: 0 !important;
}
.RadWindow_MetroTouch .rwDialogPopup {
    padding-left: 4px !important;
}
.RadWindow_MetroTouch .rwShadow ul.rwControlButtons {
    margin-top: 2px !important;
}
.RadWindow_MetroTouch .rwTitleRow .rwTitlebar,
.RadWindow_MetroTouch .rwTitleRow .rwTopLeft,
.RadWindow_MetroTouch .rwTitleRow .rwTopRight {
    background-color: #A5BDC9 !important;
}
.RadWindow_MetroTouch .rwTable .rwTitlebarControls em {
    font-size: 18px !important;
    padding-top: 0 !important;
}
.md-content {
    background: white;
}
.md-content h3 {
        margin: 0;
        padding: 0.4em;
        text-align: center;
        font-size: 1.5em;
        font-weight: 300;
        opacity: 1;
        background: #1C5979;
        border-radius: 3px 3px 0 0;
    }
.md-content .progressbar {
        background-color: #25a0da;
    }
.md-content .progressbarContainer {
        border: 1px solid #1C5979;
    }
.md-content .downloadButtonWrap {
        margin-top: 1em;
        height: 2em;
    } 
.md-content .downloadButtonWrap a {
            float: left;
            padding: .25em .5em;
            font-size: 1em;
            background: #1C5979;
        }
.md-close, .md-close:hover {
    background-position: -111px -1911px;
}
.exportButton {
    margin: .5em 0;
}
/* List styles */
.RadGrid_MetroTouch .rgDetailTable caption.rgCaption {
        font-weight: bold !important;
        text-align: left !important;
        padding-left: .5em !important;
    }
.RadGrid_MetroTouch .rgHeader {
    background-color: #A5BDC9 !important;
    color: white !important;
}
.RadGrid_MetroTouch .rgHeader a {
        color: white !important;
    }
.RadGrid_MetroTouch .orderTitleRow + tr .rgHeader a {
    color: black !important;
}
.RadGrid_MetroTouch .orderTitleRow + tr .rgHeader {
    padding-top: 0px;
    padding-bottom: 1px;
}
.RadGrid_MetroTouch .rgDetailTable .rgHeader {
    background-color: #efefef !important;
    color: black !important;
}
.RadGrid_MetroTouch .rgDetailTable tbody tr {
    background-color: white;
}
.rgMasterTable td.rgExpandCol + td > .rgDetailTable:last-of-type {
    margin-bottom: 0!important;
}
.rgMasterTable tr.rgAltRow + tr:not(.rgRow) > td.rgExpandCol + td {
    background: whitesmoke !important;
}
.RadGrid_MetroTouch .rgAltRow {
    background: whitesmoke !important;
    color: black !important;
}
.RadGrid_MetroTouch .rgRow td {
    border-style: none !important;
}
.orderOverviewListMargin {
    margin-top: 0em;
}
.RadGrid_MetroTouch .rgAltRow:hover,
.RadGrid_MetroTouch .rgRow:hover,
.RadGrid_MetroTouch .rgRow:hover .rgSorted,
.RadGrid_MetroTouch .rgAltRow:hover .rgSorted {
    background: #e8e8e8 !important;
    cursor: pointer;
}
.RadGrid_MetroTouch .rgMasterTable .rgSelectedCell:hover,
.RadGrid_MetroTouch .rgSelectedRow:hover,
.RadGrid_MetroTouch td.rgEditRow .rgSelectedRow:hover,
.RadGrid_MetroTouch .rgSelectedRow td.rgSorted:hover {
    color: #fff;
    background: #25a0da !important;
    border-color: #25a0da !important;
}
.RadGrid_MetroTouch .rgAltRow td.rgSorted {
    background-color: whitesmoke !important;
    border-color: transparent !important;
}
.RadGrid_MetroTouch td.rgSorted {
    background-color: white !important;
    border-color: transparent !important;
}
.RadGrid_MetroTouch .rgAltRow.rgSelectedRow,
.RadGrid_MetroTouch .rgRow.rgSelectedRow td.rgSorted,
.RadGrid_MetroTouch .rgAltRow.rgSelectedRow td.rgSorted {
    color: white !important;
    background: #25a0da !important;
    border-color: #25a0da !important;
}
.RadGrid_MetroTouch .rgPagePrev, .RadGrid_MetroTouch .rgPageNext, .RadGrid_MetroTouch .rgPageFirst, .RadGrid_MetroTouch .rgPageLast {
    border: none !important;
    background-color: transparent !important;
}
.RadGrid_MetroTouch .rgNumPart a {
    background-color: transparent !important;
    border: none !important;
    color: #888C8F !important;
}
.RadGrid_MetroTouch .rgNumPart a.rgCurrentPage, .RadGrid_MetroTouch .rgNumPart a.rgCurrentPage:hover, .RadGrid_MetroTouch .rgNumPart a:hover {
        background-color: transparent !important;
        border: none !important;
        color: #25a0da !important;
    }
.RadGrid_MetroTouch .rgMasterTable td.rgPagerCell {
    border-width: 1px 0 0 0px !important;
}
input[type="radio"] + label,
input[type="checkbox"] + label {
    cursor: pointer;
}
.rbRadioButton.rbRounded.centerRadioButton{
    line-height:20px !important;
}
.checkbox {
    display: inline-block;
    padding-top: 0;
    padding-bottom: 0px;
}
.radio input[type="radio"] + label, .checkboxAlign input[type="checkbox"] + label {
    padding-left: 5px;
    vertical-align: text-bottom;
}
.checkboxAlign input[type="checkbox"] {
    display: block;
    float: left;
    margin-top: 4px;
}
.checkboxAlign input[type="checkbox"] + label {
    display: block;
    width: 85%;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}
/* === orderOverview =========================================*/
.orderOverview.RadGrid_MetroTouch .rgDetailTable {
    margin-bottom: .5em !important;
    float: left;
    width: 89.5% !important;
    margin: 0 auto 2em 5%;
}
.RadProgressBar_MetroTouch {
    font-size: 14px !important;
}
.orderOverview.RadGrid_MetroTouch .rgDetailTable {
    border-collapse: collapse !important;
    border: none !important;
}
.orderOverview.RadGrid_MetroTouch .orderList > tbody > .orderTitleRow > td {
    padding-bottom: 10px;
}
.orderOverview.RadGrid_MetroTouch .orderTitleRow td.orderId {
    width: 5%;
}
.orderOverview.RadGrid_MetroTouch .orderList > tbody > .orderTitleRow > td:first-child {
    background:#e8e8e8 !important;
}
.orderOverview.RadGrid_MetroTouch .orderList > tbody > .orderTitleRow .created,
.orderOverview.RadGrid_MetroTouch .orderList > tbody > .orderTitleRow .customerName,
.orderOverview.RadGrid_MetroTouch .orderList > tbody > .orderTitleRow .objectAddress {
    font-weight: bold;
}
.orderOverview.RadGrid_MetroTouch .orderList > tbody > .orderTitleRow .deleteIcon {
        font-size: 18px;
    }
.orderOverview.RadGrid_MetroTouch .rgDetailTable tr td {
    border: none !important;
    display: inline-block;
}
.orderOverview.RadGrid_MetroTouch .rgDetailTable tr td:first-of-type
{
    padding-right:0;
}
.orderOverview.RadGrid_MetroTouch .rgDetailTable tr {
    background: white !important;
    border-top: 1px solid #E8e8e8 !important;
    border-bottom: none !important;
}
.nestedGrid.RadGrid_MetroTouch .rgMasterTable  > tbody > .orderTitleRow + tr > td,
.normalGrid.RadGrid_MetroTouch .rgMasterTable  > tbody > tr > td
 {
    border-bottom: 1px solid #A6BCC9 !important;
    padding-bottom: 10px;
}
/*error message input the table from alignment*/
  /*.rgNoRecords td{
    padding-left:8px;
   }*/
        
.nestedGrid.RadGrid_MetroTouch .rgPager .rgStatus,
.nestedGrid.RadGrid_MetroTouch td.rgPagerCell,
.normalGrid.RadGrid_MetroTouch td.rgPagerCell,
.normalGrid.RadGrid_MetroTouch td.rgStatus {
    border: none !important;
}
.orderOverview.RadGrid_MetroTouch .rgAltRow + tr .rgDetailTable tr {
    background: whitesmoke !important;
}
.orderOverview.RadGrid_MetroTouch .rgDetailTable tr:hover {
        background: white !important;
}
.orderOverview.RadGrid_MetroTouch .rgAltRow + tr .rgDetailTable tr:hover {
    background: whitesmoke !important;
}
.orderOverview .RadProgressBar_MetroTouch {
    background-color: #dddddd;
}
.orderOverview .RadProgressBar_MetroTouch > .rpbLabelWrapper {
    border: none !important;
}
.orderOverview .RadProgressBar_MetroTouch .rpbStateSelected {
    border-color: #25a0da !important;
}
.customerAssortmentDropdownList .RadComboBox_MetroTouch {
    width:60% !important;
}
/*.customerAssortmentDropdownList {
    width: 40% !important;
}*/
#divAssortment .rbText {
    padding-left: 0 !important;
}
#divAssortment .rbRadioButton{
    padding-right:0 !important;
}
#divAssortment h3{
    font-size:17px;
    color: #666;
    font-weight: bold;
}
.RadComboBox .rcbActionButton .rcbIcon { 
    cursor:pointer !important;
}
.RadComboBox .rcbArrowCell a {
    cursor:pointer !important;
}
.demo-container label {
    padding-right: 10px;
    width: 185px;
    display: inline-block;
}
 
.demo-container .RadButton {
    margin-top: 20px;
}
 
/** Columns */
.rcbHeader ul,
.rcbFooter ul,
.rcbItem ul,
.rcbHovered ul,
.rcbDisabled ul {
    margin: 0;
    padding: 0;
    width: 100%;
    display: inline-block;
    list-style-type: none;
} 
.exampleRadComboBox.RadComboBoxDropDown .rcbHeader {
    padding: 5px 27px 4px 7px;
} 
.rcbScroll {
    overflow: scroll !important;
    overflow-x: hidden !important;
} 
.col1,
.col2,
.col3 {
    margin: 0;
    padding: 0 5px 0 0;
    width: 30%;
    line-height: 14px;
    float: left;
    margin-left: 10%;
} 
/** Multiple rows and columns */
.multipleRowsColumns .rcbItem,
.multipleRowsColumns .rcbHovered {
    float: left;
    margin: 0 1px;
    min-height: 13px;
    overflow: hidden;
    padding: 2px 19px 2px 6px;
    width: 193px;
} 
.results {
    display: block;
    margin-top: 20px;
}
.orderOverview .productLineTitle {
   color: #00adef !important;
}
.orderOverview .col2,
.orderOverview .col3,
.orderOverview .col4 {
    font-weight: bold;
}
/*.orderOverview .subCol1 {
    width: 5%
}*/
.orderOverview .subCol2 {
    width: 25%
}
.orderOverview .subCol3 {
    width: 5%
}
.orderOverview .subCol4 {
    width: 30%
}
.orderOverview .subCol5 {
    width: 35%
}
.orderOverview .subCol6 {
    width: 40%
}
.orderOverview .fa.prioCrit {
    color: #E21B00;
}
.orderOverview .fa.prioWarn {
    color: #FE9D00;
}
.orderOverview .grey{
       color: #9D9495;
}
.orderOverview .fa.blue {
    color: #00adef;
}
/* TOOLTIP*/
a.tooltip {
    outline: none;
}
a.tooltip strong {
        line-height: 30px;
    }
a.tooltip:hover {
        text-decoration: none;
    }
a.tooltip span {
        z-index: 10;
        display: none;
        padding: 14px 20px;
        margin-top: -30px;
        margin-left: -300px;
        width: 300px;
        line-height: 16px;
    }
a.tooltip:hover span {
        display: inline;
        position: absolute;
        color: #fff;
        border: 1px solid #888C8F;
        background: #888C8F;
    }
.callout {
    z-index: 20;
    position: absolute;
    top: 30px;
    border: 0;
    left: -12px;
}
/*CSS3*/
a.tooltip span {
    /*  border-radius:4px;
    box-shadow: 5px 5px 8px #CCC;*/
}
a.tooltip i {
    color: #888C8F;
    display: inline-block;
    font-style: normal;
}
.tooltipGreen {
    color: lightgreen !important;
    background-color: inherit !important;
    border-radius: inherit !important;
}
.tooltipRed {
    color: #ff0f0f !important;
    background-color: inherit !important;
    border-radius: inherit !important;
}
.tooltipCRUDStatus {
    color: #007abb !important;
    background-color: inherit !important;
    border-radius: inherit !important;
    display: inline;
    padding: 10px;
}
.tooltipCRUDStatusLabel {
    vertical-align: top;
}
.RadGrid td.rgPagerCell {
    padding-top: 10px !important;
}
.RadGrid .rgPagerLabel {
    line-height: 1.75;
}
.RadDropDownList_MetroTouch .rddlFakeInput {
    line-height: 1.35;
}
.RadDropDownList_MetroTouch .rddlFocused .rddlIcon {
    background-position: -111px -60px !important;
}
.RadDropDownList_MetroTouch .rddlIcon {
    background-position: -11px -60px !important;
}
.RadInput .riLabel {
    white-space: normal !important;
}
label.required::after {
    content: '*';
    display: inline;
    font-size: 100%;
    margin: 0 .45em 0 .25em;
    color: #e8171f;
    font-weight: bold;
    line-height: 1;
}
.required .RadInput .riLabel::after,
.required .RadInput i.info::after {
    content: '*';
    display: inline;
    font-size: 100%;
    margin: 0 .45em 0 .25em;
    color: #1D5A79;
    font-weight: normal;
    line-height: 1;
}
.required .RadInput i.info::after {
    margin: 0 .45em 0 0;
}
    /*.styledDetailList .inputWrapper > span.errorSpan,
.errorSpan {
    position: absolute;
    width: 17px !important;
    top: 10px;
    left: 2.2em;
}*/
    .errorSpanContactOrderDetail {
    position: absolute;
    width:  10px !important;
    top: .5em;
    left: -.4em;
}
.RadDropDownList .rddlInner {
    margin-top: -6px;
}
.errorActive {
    border: 1px solid #e8171f;
    background-color: rgba(232, 23, 31, .2);
    color: #e8171f;
    margin: 1em 0;
    padding: 1em;
}
.errorActive * {
        color: #e8171f;
    }
.errorActive h2 {
        color: #e8171f;
        margin: 0;
    }
ul {
    padding-left: 20px;
}
.contactdisabled {
    background-color: lightgray !important;
}
span.RadButton_MetroTouch.RadButton.rbHovered.wissen {
    background-color: #f9f9f9 !important;
}
.productDetails {
    margin-bottom: 0px;
    height: 280px;
    border: none;
    clear: both;
}
.productDetailBlock {
    float: left;
    width: 49%;
    margin-right: 10px;
    height: inherit;
}
.productdetailitem {
    background-color: #f9f9f9;
    cursor: pointer;
    height: 30px;
}
.productdetailitem:hover {
        background-color: #b3d4fc !important;
    }
.productdetailitem:hover > div {
            background-color: #b3d4fc !important;
        }
.productdetailitem > div {
        background-color: #f9f9f9;
        height: 30px;
    }
.productdetailitemalternate {
    background-color: #f0f0f0;
    cursor: pointer;
    height: 30px;
}
.productdetailitemalternate > div {
        background-color: #f0f0f0;
        height: 30px;
    }
.productdetailitemalternate:hover {
        background-color: #b3d4fc !important;
    }
.productdetailitemalternate:hover > div {
            background-color: #b3d4fc !important;
        }
.productDetailBlock .scrollable {
    overflow-y: auto;
    height: 200px;
}
.communicationHeader {
    background-color: #25a0da !important;
    color: white;
    border: 1px solid #25a0da;
    padding-left: 3px;
}
.communicationRemark {
    font-size: 0.9em !important;
    word-break: break-word;
    word-wrap: break-word;
    margin-left: 8px;
}
.communicationItem {
    border: 1px solid transparent;
    margin-bottom: 8px;
}
.communicationItem:hover {
        border: 1px solid #25a0da;
        margin-bottom: 8px;
        cursor: pointer;
    }
.orderLineDetailLoading {
    display: none;
    width: 100%;
}
.lineedit {
    font-size: 125%;
}
.productDetailAddButton {
    background-color: #7dba00 !important;
    color: white !important;
}
.fileItem {
}
.emailCopyAddressPanel {
    width: 100%;
    padding-left: 16px;
}
.emailCopyAddressPanel .checkbox {
        margin-bottom: 7px;
    }
.emailCopyAddressPanel .checkbox label {
            font-style: italic;
        }
/*Overlay*/
div.PostbackBackground {
    display: none;
    margin-left: 10px;
}
div.OverlayBackground {
    position: absolute;
    top: 0;
    left: 0;
    z-index: 99990;
    width: 100%;
    height: 100%;
    background-color: #4E5357;
    filter: alpha(opacity=90);
    -moz-opacity: 0.9;
    opacity: 0.9;
    cursor: wait;
}
div.PostbackWaitMessage {
    position: absolute;
    z-index: 99991;
    top: 40%;
    width: 100%;
    height: 75px;
    text-align: center;
    line-height: 2;
    cursor: wait;
}
div.PostbackMessage {
    width: 216px;
    height: auto;
    text-align: center;
    margin: 0 auto 0 auto;
    cursor: wait;
    color: #eee;
}
img.PostbackWaitImage {
    position: relative;
}
div.PostbackMessage i {
    padding: 10px 10px 10px 10px;
    color: #00adef;
}
.saveButton {
    color: white;
    font-weight: bold;
    font-size: .75em !important;
    padding: .5em 1em !important;
    background-color: #7dba00 !important;
    text-transform: uppercase;
}
.editButton {
    color: white;
    font-weight: bold;
    font-size: .75em !important;
    padding: .5em 1em !important;
    background-color: #f56800 !important;
    text-transform: uppercase;
}
.cancelButton {
    color: white;
    font-weight: bold;
    font-size: .75em !important;
    padding: .5em 1em !important;
    background-color: #e8171f !important;
    text-transform: uppercase;
}
.simpleBorderBlue {
    border: 1px solid #00adef;
}
.orderFirstCol {
    float: left;
    width: 145px;
}
.orderSecondCol {
    float: left;
    width: 300px;
}
.orderThirdCol {
    float: left;
    width: 50px;
    text-align: right;
}
.orderThirdCol .icon {
        font-size: 90%;
        color: #25a0da;
    }
.pointer {
    cursor: pointer;
}
.commentsTable {
    width: 100%;
}
.comments {
    width: 100%;
    border: 1px solid #cdcdcd;
    padding: 2px 2px 2px 2px;
    margin-bottom: 2px;
    height: 100px;
    overflow: auto !important;
}
.commentsSettings {
    width: 100%;
    border: 1px solid #cdcdcd;
    padding: 2px 2px 2px 2px;
    margin-bottom: 2px;
}
.commentsNew {
    width: 100%;
    border: 1px solid #cdcdcd;
    padding: 2px 2px 2px 2px;
    margin-bottom: 2px;
}
.commentItem {
    border: 1px solid transparent;
    cursor: pointer;
    background-color: white;
}
.commentItemAlternate {
    border: 1px solid transparent;
    cursor: pointer;
    background-color: #cdcdcd;
}
.commentItem:hover {
    border: 1px solid #b3d4fc;
}
.commentItemAlternate:hover {
    border: 1px solid #b3d4fc;
}
.commentItemHeader {
    background-color: #1C5979;
    color: white;
}
.commentOrderLine .commentItem {
    padding-left: 5px;
}
.commentOrderLine .commentItemAlternate {
    padding-left: 5px;
}
.commentGlow {
    -webkit-box-shadow: 0 0 20px #1C5979;
    -moz-box-shadow: 0 0 20px #1C5979;
    box-shadow: 0 0 20px #1C5979;
}
.closeaction {
    width: 100%;
    cursor: pointer;
    display: none;
    min-height: 25px;
    background-image: url(../_gfx/icons_cancel.png);
    background-position: right;
    background-repeat: no-repeat;
    background-color: #F4CACA;
    border: 1px solid #cc0000;
}
div.closedworkordertoggle {
  border: 1px solid #cdcdcd;
  padding: 2px 2px 2px 2px;
}
div.closedworkorderinfo {
  padding: 5px;
  background-color: #f2f2f2;
}
div.closedworkorderstatusfailed {
  background-color: #F4CACA;
}
span.closedworkordertoggle {
  font-family: 'FontAwesome';
  display: block;
  height: 1.5em;
  width: 1.5em;
  color: #25a0da;
  cursor: pointer;
}
div.tabheader {
  color: black;
  float: left;
  width: 50%;
  border: 1px solid #cdcdcd;
  text-align:center;
  height:30px;
  cursor: pointer;
}
div.tabCommentsContent {
  display:inline-block;
}
div.tabFilesContent {
  display:none;
}
div.tabSelected {
  background-color: #cdcdcd;
  color: white !important;
}
.top-spacing-1 {
    margin-top: 5px;
}
.top-spacing-2 {
    margin-top: 10px;
}
.top-spacing-3 {
    margin-top: 15px;
}
.top-spacing-4 {
    margin-top: 20px;
}
.bottom-spacing-1 {
    margin-bottom: 5px;
}
.bottom-spacing-2 {
    margin-bottom: 10px;
}
.bottom-spacing-3 {
    margin-bottom: 15px;
}
.bottom-spacing-4 {
    margin-bottom: 20px;
}
/* Google calendar popup */
.ui-widget-header {
    font-size: 18px;
    font-weight: normal;
    margin-bottom: 1em;
}

.googleCalendarTable tr {
    padding-bottom: .5em;
}
.googleCalendarTable td {
    vertical-align: top;
    padding-bottom: 12px;
}
.googleCalendarTable td.label,
.googleCalendarTable td.plainText {
    padding-top: 7px;
}

.ui-dialog .ui-dialog-content {
    padding: 0 2em;
}

.googleCalendarButton {
    text-align: right;
}

.googleCalendarTable input[type="text"],
.googleCalendarTable textarea {
    padding: 7px 5px;
    border: 1px solid #cdcdcd;
}
.googleCalendarTable {
  width:100%;
}
d.googleCalendarTimeFrom, td.googleCalendarTimeTo, td.googleCalendarDate {
  color: #1C5979;
}
td.googleCalendarButton {
  width: 100px;
}
div.googleCalendarCopyMessage {
  display:none;
  color: white;
  background-color: #25a0da;
}
.col-xs-12 table td {
    margin-right: 5px;
    padding: 2px;
}
/* /Google calendar popup */

a.disabled {
  color:#999;
  cursor: default;
  text-decoration: none !important;
}
i.prepareftpbrowser,
i.deletefile {
  cursor:pointer;
}
#divFTPSelector .rtPlus, #divFTPSelector .rtPlusHover
{
    background-image:url('../_gfx/folder.png') !important;
    color: transparent !important;
}
#divFTPSelector .rtMinus, #divFTPSelector .rtMinusHover
{
    background-image:url('../_gfx/folder-open.png') !important;
    color: transparent !important;
}
.copytoclipboard,
.removeexisting
{
  color: #00ADEF;
  cursor:pointer;
}
.subworkorderslist
{
    border-top: solid 1px #cdcdcd;
}
.multiactionwarning {

}
.multiactionwarning span {
    padding-left: 10px;
}
.multiactionwarning .fa.prioWarn {
    color: #FE9D00;
}

.reTool .InsertTag {
    background-image:url('../_gfx/icons_edit_18x18.png') !important;
}
.tagroweven {
    padding: 2px;
    background-color: #e8e8e8;
    color: black !important;
    cursor: pointer;
}
.tagrowodd {
    padding: 2px;
    background-color: whitesmoke;
    color: black !important;
    cursor: pointer;
}
.tagrowhover {
    background-color: #b3d4fc !important;
}
.editortag {
    background-color: #FE9D00;
    color: black;
}
.dashboardsection {
    border: 1px solid #e5e5e5;
    color: black;
    font: normal 16px "Segoe UI",Arial,Helvetica,sans-serif;
    line-height: 18px;
    font-weight: 700;
    padding: 2px 2px 2px 2px;
    border-spacing: 2px;
    vertical-align: middle;
    margin-bottom:5px;
}

.gridcontainer {
    border: 1px solid #e5e5e5;
    color: black;
    font: normal 16px "Segoe UI",Arial,Helvetica,sans-serif;
    line-height: 18px;
    font-weight: 700;
    padding: 2px 2px 2px 2px;
    border-spacing: 2px;
    vertical-align: middle;
    margin-bottom: 5px;
    position: relative;
}
.clickable {
    cursor:pointer;
    color:#00adef;
}
.clickable:hover {
    text-decoration: underline;
}
.dashboardimg {
    float:left;
}
.dashboardtitle {
    float:left;
    padding-left: 10px;
    padding-top: 15px;
}
.dashboardtext {
    float:left;
    color: #FE9D00;
    padding-left: 10px;
    padding-top: 15px;
}

.dashboardazurelink {
    display: flex;
    width: 100%;
    margin-left: 5px;
    margin-top: 5px;
}
    .dashboardazurelink button {
        top: 1px !important;
        right: 1px !important;
        padding: 8px 12px !important;
    }

.dashboardsection .imgAzureExplorer {
    height: 49px;
    margin-left: -2px
}

/* Global popup styles */
.ui-dialog .ui-dialog-content .inputWrapper {
    margin-bottom: 1em;
    position: relative;
}
.ui-dialog .ui-dialog-content .inputWrapper .RadInput {
        width: 100% !important;
    }
.ui-dialog .ui-dialog-content .inputWrapper .riSingle .riLabel,
.ui-dialog .ui-dialog-content .inputWrapper label {
    vertical-align: middle;
    display: inline-block;
    margin: 0;
    width: 30% !important;
    max-width: 150px !important;
    color: #666;
}
.ui-dialog .ui-dialog-content .inputWrapper.required label::after {
    content: '*';
    display: inline;
    font-size: 100%;
    margin: 0 .45em 0 .25em;
    color: #1D5A79;
    font-weight: normal;
    line-height: 1;
}
.ui-dialog .ui-dialog-content .inputWrapper .contentWrapper
    {
        width: 70% !important;
        display: inline-block;
     }
    .ui-dialog .ui-dialog-content .inputWrapper .riContentWrapper {
        width: 68% !important;
    }
.ui-dialog .ui-dialog-content .errorSpan {
    left: -1.5em;
}
/* Assortment */
.rbCheckBox.contactdisabled{
    background-color:transparent !important;
} 
.rbCheckBox.contactdisabled span.rbIcon{
    color:lightgray;
} 
.assortmentProductLabel {
    float: left;
    width: 95px;
}
.salesProductsListbox {
    margin-top: 10px;
}
.rlbCategory {
    font-size: 20px !important;
}
.categoryCheckbox{
    position:relative;
    top:5px;
}
.assortmentProductDDLClass{
        width: 94%;
    padding-left: 24%;
}
.RadButton_MetroTouch.rbRounded.isNotCombination{
    margin-left:-15px;
    line-height:0 !important;
    height:0 !important;
    padding:0 !important;
    width: 30px;
}
.RadButton_MetroTouch.rbRounded.isCombination{
    margin-left:-15px;
    line-height:0 !important;
    height:0 !important;
    padding:0 !important;
    width: 30px;
}
.fullWidth span.isCombination .rbIcon{
    line-height:0;
}
span.RadButton_MetroTouch{
    font-size:14px !important;
}
.radioButtonsNewAssortmentProduct {            
}
.radioButtonsNewAssortmentProduct .rbText {
    padding-left: 30px !important;
    color: black !important;
}
.radioButtonsNewAssortment{
    border-bottom:white;
    margin-left:-20px;
}
.radioButtonsNewAssortment .rbText {
    padding-left: 30px !important;
    font-size: 14px;
    color: #666 !important;
}
#isNewAssortment{
    padding-top: 20px;
}
.orderlineparent {
    font-size: 8pt;
    font-style: italic;
}
table.missingproducts {
    vertical-align: top;
	color: black;
	font-size: 10pt;
	border-collapse: collapse;
	border-spacing: 0px;
	font-family: Arial;
    width: 100%;
}
.missingproducts th {
    background-color: #00adef;
    color: white;
    padding:2px;
    text-align:center;
    border-bottom:1px solid White;
    border-right:1px solid White;
}
.missingproducts th:last-child {
    border-right:1px solid #00adef;
}
.missingproducts td {
    text-align:left;
    border-right:1px solid #888888;
    padding-left: 2px;
    padding-right: 2px;
}
.missingproducts tr {
    border:1px solid #888888;
    border-collapse: collapse;
}
.editProductPopup .editproduct .riSingle {
    width: 300px !important;
    padding: .5em 0 .5em 1em;
}
.editProductPopup .editproduct .editproductquantity .riSingle {
    width: 50px !important;
    padding: .5em 0;
}
.editProductPopup .editproductitle h3 {
    margin-bottom: .5em;
}
.editProductPopup .editproductinfo {
    margin: 0 0 1em;
}
.editProductPopup .actionButton {
    background: #888C8F !important;
    border: none !important;
    color: white !important;
}
.filelistcheckboxes {
    color: #888C8F;
    padding-left: 8px;
    margin-right: 8px;
    font-size: 0.8em;
}
.filelistcheckboxes i {
    cursor: pointer;
}
.lightgrey {
    color: #cdcdcd;
}
.grey {
    color: #888C8F;
}
.blue {
    color: #00adef;
}
.black {
    color: #333333;
}
.red {
    color: red;
}

.orange {
    color: #FE9D00;
}
.darkBlue {
    color: #1D5A79;
}
.blue a {
    color: #00adef !important;
}
a span.darkBlue {
    font-size: 14px;
    font-weight:bold;
}
.filelistfilenames {
    font-style: italic;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}
.filelistinfobar i, .itemlistinfobar i {
    font-size: 14px;
    padding-top: 3px;
    margin-left: 8px;
    cursor: pointer;
}
.filelistinfobar i:last-child {
    margin-right: 5px;
}
.filelistitem {
    padding: 7px 2px 7px 2px;
    border-bottom: solid 1px #cdcdcd;
}
.fileinfoheader {
    color: #00adef;
    font-style:italic;
    font-size: 1.3em;
    margin-top: 3px;
    margin-bottom: 4px;
    padding-top: 3px;
    padding-bottom: 3px;
}
.fileinfosection {
    color: #888C8F;
    font-size: 0.9em;
    padding-bottom: 15px;
    margin-top: 4px;
    margin-bottom:5px;
    border-bottom: solid 1px #cdcdcd;
}
.fileinfosection h3 {
    color:black;
    font-size: 1.2em;
    margin-top: 12px;
    margin-bottom: 12px;
}
.fileinfotablesmall a {
    color: #00adef;
}
.fileinfotablesmall tr {
    vertical-align: top;
}
.fileinfotablesmall .fa {
    font-size: 1.2em;
}
.fileinfotablesmall input[type=radio]{
    position: relative;
    top: 1px;
}
.fileinfotable td {
    padding-bottom: 3px;
}
.fileinfotable td:first-child {
    width: 100px;
}
.fileinfotablesmall td:first-child {
    width: 18px;
    padding-bottom: 3px;
}
.fileinfodownload {
    position: absolute;
    bottom: 10px;
    left: 10px;
    font-style: italic;
}
.fileinfodownload a {
    color: #00adef;
}
.previousresult tr {
    vertical-align: top;
}
.previousresult td:nth-child(1) {
    color: #25a0da;
    width:120px;
}
.previousresult td:nth-child(2) {
    color: #1c5978;
}
.previousresult .remarks {
    color: #1c5978 !important;
}
.fileremoved {
    color: #999 !important;
    text-decoration: line-through;
    cursor:pointer;
}
.textBubble{
    position: relative;
    padding: 15px;
    margin: 15px 0 20px 0.5em;
    color: #333;
    background: white;
    -webkit-border-radius: 10px;
    -moz-border-radius: 10px;
    border-radius: 10px;
    border:solid 1px #EEEEEE;
    overflow:auto;
    max-height:500px;
}
.textBubble:after{
    content: "";
    position: absolute;
    top: -30px;
    left: 50px;
    border: 15px solid transparent;
    border-bottom-color:white;
    display: block;
    width: 0;
}
.dateTime .detailIconMessages {
    padding-top: 2px;
    position: relative;
    top: -1px;
}
.dateTime .detailIconMessages.fa-eye-slash {
        color: #767676 !important;
    }
i.fa.fa-comment.commentIconMessages.pull-right   {
    color:#767676;
    padding-top: 2px;
}
.commentIconAttachment-nas {
    color: #00adef !important;
}
.commentIconAttachment {
    color: #767676 !important;
}
.padding-right5 {
    padding-right: 5px;
}
.ewarpreworknewfiles {
    margin-left: 5px;
    margin-top: 3px;
    margin-right: 10px;
    margin-bottom: 10px;
    padding: 6px;
    border:1px solid black;
    width:98%;
}
.ewarpprffiles {
    padding-left: 10px;
    margin-bottom: 15px;
    max-height: 150px;
    overflow-y: auto;
}
.ewarpreworknewfiles span {
    color: #1C5979;
}
.ewarpreworktitle {
    color: #1C5979;
    margin-bottom: 15px;
}
.uubireworknewfiles {
    margin-left: 5px;
    margin-top: 3px;
    margin-right: 10px;
    margin-bottom: 10px;
    padding: 6px;
    border: 1px solid black;
    width: 98%;
}
.uubiprffiles {
    padding-left: 10px;
    margin-bottom: 15px;
    max-height: 150px;
    overflow-y: auto;
}
.uubireworknewfiles span {
    color: #1C5979;
}
.uubireworktitle {
    color: #1C5979;
    margin-bottom: 15px;
}
.toggleeye-old::before {
    content: "\f06e"; 
    font-family: FontAwesome;
    display: inline-block;
    position: absolute;
    right: 41px;
    top: 5px;
    color: #9D9495;
}
.filetoggleeye {
    float: right;
    margin-top: -18px;
    margin-right: 26px;
    position: relative;
    cursor: pointer !important;
}
.filetoggleeye:hover{
    cursor:default;
}
/* Photofraphy Detail */
.photographyDropZone {
    background: transparent !important;
    border: 2px dashed #d3d3d3; 
    height: 125px;
    margin: 0px 0 20px;
}
 .photographyDropZone i, .photographyDropZone p {
        display: block;
        color:#00adef;
        margin-top: 20px;
        font-size: 30px;
    } 
    .photographyDropZone p {
        margin-top: 10px;
        font-size: 14px;
        color:#C4C4C4;
    }
.photographerfile {
    padding:2px;
}
    .photographerfile .removeUpload:before, .cancelUpload:before {
        content: "\f00d";
        font-family: FontAwesome;
        color: red;
        margin-right: 5px;
    }
    .photographerfile .removeUpload {
        color: #00adef;
    }
    .photographerfile .removeUpload:hover, .cancelUpload:hover {
        cursor:pointer;
        text-decoration: underline;
    }
    .photographerfile .fa-spinner {
        color: #1D5A79;
    }
    .photographerfile .fa-check {
        color: Green;
    }
.photoDetailMargin {
    margin: 10px 0 20px;
}    
.photographerappointment {
    color: #1C5978;
    margin-bottom: 10px;
    }
.photographerchoice {
    padding: 20px 0 10px;
    width: 100%;
}
.photographerBtn {
    position: relative;
    border: none !important;
    background: #E8E8E8 !important;
    height: auto !important;
    margin-right: 20px;
    margin-bottom: 5px;
}
.photographerBtn::before{
    content: "\f111";
    display: block;
    position: absolute;
    top: 9px;
    left: 10px;
    font-family: FontAwesome;
    color: #f8f8f8;
    font-size: 40px;
}
.photographerBtn .rbDecorated {
        padding: 15px 15px 15px 60px !important;
        height: auto !important;
        width: 140px;
        text-align: left;
    }
.photographerchosen:after {
     content: "\f00c";
    display: block;
    position: absolute;
    top: 9px;
    left: 17px;
    font-family: FontAwesome;
    font-size: 20px;
    color: #00adef;
}
.orderlineworkorderline span, .orderlinerow span{
    cursor: pointer;
}
.orderlineworkorderline span{
    padding-left: 10px;
}
.orderlinerow span{
    margin-right: 10px;
}
span.blue.hoverStyle.fixedWidth.col-sm-4, span.orderlinesubitems.col-sm-4, .orderlinerow span.col-sm-2, .withoutSidePadding {
    padding-left: 0;
    padding-right: 0;
}
.orderlineworkorderline .fixedWidth,
.orderlinerow .fixedWidth {
    display: inline-block;
    width: 260px;
}
.orderlineworkorderline:hover .hoverStyle, .orderlinerow:hover .hoverStyle {
    text-decoration: underline;
}
.productSubRow .fa-angle-right,
.orderlineworkorderline i.fa-angle-right {
    -moz-transform: rotate(135deg);
    -ms-transform: rotate(135deg);
    -o-transform: rotate(135deg);
    -webkit-transform: rotate(135deg);
    transform: rotate(135deg);
    color: #cdcdcd;
    font-size: 18px;
}
.orderLabelStatus {
    width: 35%;
    float: left;
    display: block;
    padding-left: 15px;
}
.orderCheckboxStatus {
    width: 65%;
    float: left;
    display: block;
}
.orderCheckboxCancel {
    margin: 10px 0;
    z-index:10;
}
.orderCheckboxComplete {
    margin: 10px 0;
    z-index: 10;
}
.orderDropDownStatus {
    width: 80%;
    float: left;
    display: block;
}
.orderDropDownLabelStatus {
    width: 20%;
    float: left;
    display: block;
}
.orderStatusDiv label {
    color: #666;
}
.productSubRow .fa-angle-right {
    margin-right: 5px;
}
i.toggleall {
    font-size: 1.2em;
    cursor: pointer;
}
i.naslocation {
    font-size: 0.9em;
    cursor: pointer;
}
.copied {
    position: absolute;
    left: 3px;
    top: -1px;
    padding: 3px;
    background-color: white;
    color: #00adef;
    border: 1px solid #1C5979;
}
.copiedEmbedded {
    position: absolute;
    top: 10px;
    padding: 3px;
    background-color: white;
    color: #00adef;
    border: 1px solid #1C5979;
}

div.fpstatuscircle {
    float: left;
    width: 30px;
    height: 30px;
    border-radius: 50%;
    border: 1px solid #1C5979;
    background: linear-gradient(0deg, #white, #white);
}
div.fpstatusline {
    float: left;
    width: 30px;
    height: 8px;
    margin-top: 11px;
    border-top: 1px solid #1C5979;
    border-bottom: 1px solid #1C5979;
    border-collapse: collapse;
    background-color: #00adef;
}
div.fpstatusvalue {
    float: left;
    width: 26px;
    text-align: center;
    padding-top: 2px;
    margin: auto;
    font-weight: bold;
    text-shadow: -1px -1px 0 #fff, 1px -1px 0 #fff, -1px 1px 0 #fff, 1px 1px 0 #fff;
}
.detailText .RadUpload {
    width: 100% !important;
}

    .detailText .RadUpload .ruFileLI {
        width: 100%;
        margin: 0;
    }
        .detailText .RadUpload .ruFileLI .radIcon {
            width: 4.5% !important;
        }
        .detailText .RadUpload .ruFileLI .ruFileWrap {
            width: 74% !important;
            white-space: nowrap;
            overflow: hidden;
            text-overflow: ellipsis;
        }

        .detailText .RadUpload .ruFileLI .ruButton {
            width: 20% !important;
        }
.RadCalendar_MetroTouch .rcMain .rcOutOfRange span {
    color: #c5c5c5 !important;
}

.RadCalendar_MetroTouch .rcMain .rcWeekend a {
    color: black !important;
}

.RadCalendar_MetroTouch .rcMain .rcOtherMonth a {
    color: #666 !important;
}
.productoptions{
    font-weight: bold;
}
.lastsyncdate {
    color: #25a0da;
    font-size: 8pt;
    font-style: italic;
    margin-bottom: 3px;
}
.niceDropDown .radPreventDecorate {
    padding: 7px;
    width: auto !important;
}
td.reLeftVerticalSide
{
    display:none;
}
.Metro.RadEditor .reNoBorder div.reContentArea {
    /*border: none !important;*/
    border-top: 1px solid #e5e5e5 !important;
   border-right: 1px solid #e5e5e5;
}
.wordWrap .Metro.RadEditor .reNoBorder div.reContentArea {
    white-space: pre-wrap;
}
.RadEditor .reContentArea
{
    padding:5px 10px!important;
    overflow:auto!important;
}
.reContentArea.reContentAreaToggle p {
    margin: 0 !important;

}
/*.reContentArea.reContentAreaToggle {
    
     width: 700px !important;
}*/
/*for  onderwerp and body in templates*/
.templateBoxWidth .reContentArea.reContentAreaToggle {
    width: 723px !important;
    max-width: 100%;
}


/*for SAlgemeen nd Instellingen Page*/
.styledDetailList .inputWrapper > span.errorSpan, .errorSpan img {
    float: right;
    position: absolute;
    /*margin-top: 10PX;
    z-index: 17;
    right: -13px;*/
}

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

/*for  assortment label */
.styledDetailList .inputWrapper > span > label, .styledDetailList .inputWrapper > div > label {
    float: left !important;
    width: 25% !important;
    padding-right: 1em !important;
    word-break: break-word;
}
/*for Subklant accounts and AccountManagers popup*/
/*.ui-dialog-content.ui-widget-content .errorSpan {
    position: absolute;
    top: 15px;
    right: 0;
}
 .ui-dialog-content.ui-widget-content .errorSpan img {
    float: right;
    margin-top: -7PX;
    z-index: 17;
    position: relative;
    margin-right: -12px!important;
}*/
/*for klant accounts popup*/

/*.ui-dialog.ui-widget .styledDetailList.borderTop .errorSpan img {
    float: right;
    margin-top: -7PX;
    z-index: 17;
    position: relative;
    margin-right: -23px !important;
}*/
.riSingle.RadInput.RadInput_MetroTouch span.riContentWrapper .RadEditor.Metro.reWrapper.size200 {
    border-right: 1px solid #e5e5e5 !important;
}
td .reEditorModes {
    display: block !important;
}
.reBottomTable tr {
    border-top: 1px solid #e5e5e5;
}
.reLeftVerticalSide, .reRightVerticalSide
{
    padding:0px!important;
}

span.riContentWrapper .reLayoutWrapper .Metro.reToolbarWrapper {
    display: block !important;
}


span.riContentWrapper li.reToolFirstItem a.reTool {
    display: block !important;
}
.prepareinputs.height230 .RadEditor.Metro.reWrapper.size200 {
    height: 230px!important;
}

.pad .RadAjaxPanel .reContentCell iframe {
    height: 168px !important;
}
.prepareinputs.height230 td.reEditorModesCell,
.prepareinputs.height230 td.reBottomZone,
.prepareinputs.height230 td.reResizeCell {
    border-top: 1px solid transparent !important;
}
.textareaLine.bottom-spacing-2 .RadEditor.Metro.reWrapper{
    height:204px!important;
}
.row.bottom-spacing-2 .RadEditor.Metro.reWrapper{
    height:180px!important;
}
.col-xs-12 .RadEditor.Metro.reWrapper table td {
    padding: 0 !important;
    border: none !important;
}
.col-xs-0 {
    padding-left: 15px;
    padding-right: 15px;
    float: left;
}

.tblDashBoard {
    border-spacing: 0px 5px;
    border-collapse: separate;
}
.tdDashBoardTitle {
    padding-right: 10px;
    font-weight: bold;
    color: #333333;
    width: 90px;
    text-align: right;
    white-space: nowrap;
}
.tdDashBoardValue {
    padding-right: 25px;
    font-weight: bold;
    color: #333333;
    width: 90px;
    vertical-align: bottom;
}

.tdTitle {
    padding-left: 15px;
    padding-right: 15px;
    font-weight: bold;
    white-space: nowrap;
    width: 90px;
}
.tdValue {
    padding-left: 5px;
    padding-right: 15px;
}

.tbESoftProcess {
    border: 1px solid rgb(205, 205, 205) !important;
    text-indent: 5px;
}

.radButtonEnabled {
    padding: 0px;
    padding-top: 5px;
    height: 44px !important;
    background-color: #00adef !important;
    color: white !important;
    border: initial !important;
    margin-bottom: 3px !important;
}

.radButtonDisabled {
    padding: 0px;
    padding-top: 5px;
    height: 44px !important;
    background-color: #888C8F !important;
    color: white !important;
    border: initial !important;
    margin-bottom: 3px !important;
}

table.disabled {
    color: gray;
}

.inputWrapper span.riContentWrapper .reContentCell.reNoBorder .reContentArea {
    border: none;
}
.reNoBorder .reContentArea.reContentAreaToggle {
    border-top: 1px solid #e5e5e5 !important;
}
/*for  onderwerp and body in templates*/
/*.noBorderRight .reContentCell.reNoBorder {
    border-right: none !important;
}*/

.inputWrapper.divider {
    display: block;
    border: 0;
    /* border-top: 1px solid #ccc; */
    border-bottom: 1px solid #ccc;
    margin-bottom: 2em;
    padding: 2em 0 0em;
    overflow: hidden;
}

.borderTopWithTitle .inputWrapper.divider {
    border-bottom: 1px solid transparent;
    margin-bottom: 0;
    padding: 0;
}
.tabContent.width30.clearfix .rmpView .riSingle.RadInput.RadInput_MetroTouch label.riLabel,
.tabContent.width30.clearfix .rmpView .riSingle.RadInput.RadInput_MetroTouch div.labelWithInfoIcon,
.styledDetailList.productSettings.borderTop.clearfix .inputWrapper > div > div, .portal-notification-formlabel {
    width: 25% !important;
    word-wrap: break-word;
}
.tabContent.width30.clearfix .rmpView .riSingle.RadInput.RadInput_MetroTouch div.labelWithInfoIcon {
    vertical-align: top;
}
    .tabContent.width30.clearfix .rmpView .riSingle.RadInput.RadInput_MetroTouch div.labelWithInfoIcon .divLabel,
    .styledDetailList.productSettings.borderTop.clearfix .inputWrapper .riSingle.RadInput.RadInput_MetroTouch div.labelWithInfoIcon .divLabel {
        float: left;
    }
    .tabContent.width30.clearfix .rmpView .riSingle.RadInput.RadInput_MetroTouch div.labelWithInfoIcon .divIcon,
    .styledDetailList.productSettings.borderTop.clearfix .inputWrapper .riSingle.RadInput.RadInput_MetroTouch div.labelWithInfoIcon .divIcon {
        float: left;
    }
    .styledDetailList.customerSettings.borderTop.clearfix .divContainerRadioButton {
        margin-left: 25%;
    }
label.riLabel.info:after {
    content: '\f05a';
    display: inline;
    font-size: 100%;
    margin: 0 .5em;
    color: #1D5A79;
    font-family: FontAwesome;
    font-weight: normal;
    line-height: 1.2;
    font-size: 15px;
}

i.info::before {
    content: '\f05a';
    display: inline;
    font-size: 100%;
    margin: 0 .3em 0 .5em;
    color: #1D5A79;
    font-family: FontAwesome;
    font-weight: normal;
    line-height: 1.2;
    font-size: 15px;
}

.labeltooltip {
    background: #C8C8C8;
    padding: 10px;
    position: absolute;
    width: 335px;
    transform: translate(9%, 1%);
    white-space: normal;
    z-index: 1;
}

    textarea:focus, select:focus {
        outline-offset: -2px;
        outline: -webkit-focus-ring-color auto 5px;
    }
/*input, textarea, select, button, meter, progress {
    -ms-writing-mode: horizontal-tb;
    writing-mode: horizontal-tb;
  
}*/
body .riSingle textarea:focus {
    border-color: #25a0da;
    /*line-height:18px!important;*/
}
.labelInput.width62 .inputWrapper span.riSingle.RadInput.RadInput_MetroTouch label.riLabel {
    width: 51.2% !important;
}
.styledDetailList .labelInput.width62 .label {
    padding: .25em 6.5em;
}
.labelInput.width62 .errorSpan img{
        float: right;
        margin-top: 7PX;
        z-index: 17;
        position: absolute;
        right: -44%;
    }
.styledDetailList.borderTop.paddingLeft {
    padding: 1em 1.5em 1.5em 1.5em;
}
.rcbList > li:nth-of-type(2n+1) {
    background-color: #f5f5f5;
   
}
ul.rcbList li.rcbItem.rcbTemplate.col1,
ul.rcbList li.rcbItem.rcbTemplate.col2,
ul.rcbList li.rcbItem.rcbTemplate.col3 {
    width: 48% !important;
    margin-left: 2%;
}
.ui-dialog .ui-dialog-content {
    padding: 0 2.2em;
}
.dividerText {
    /*margin: 0 0 2em 0;*/
   margin: 0 0 2em 1.2em;
    /*float: left;*/
}

.textBetweenLines {
    line-height: 0.1;
   
}

    .textBetweenLines span {
        display: inline;
        position: relative;
        color: #666;
        padding: 0 5px;
        background-color:white;
        font-weight:bold;
    }
       .textBetweenLines span:after {
            content: "";
            position: absolute;
            height: 5px;
            border-top: 1px solid #ccc;
            top: 8px;
            width: 915px;
        }
        .textBetweenLines span:after {
            position: absolute;
            height: 5px;
            border-top: 1px solid #ccc;
            top: 10px;
            width: 1137px;
            left: -18px;
            right: 0;
            z-index: -1;
        }
.borderTopWithTitle .textBetweenLines span:after {
    border-top: 1px solid transparent;
}

.borderTopWithTitle {
    border-top: 1px solid #ccc;
    margin: 1.2em 0 0 0;
}
.margin-top-panel{
    margin-top: 2em;
}
.inputWrapper.divider .inputWrapper.clearfix:last-of-type {
    margin-bottom: 20px !important;
}
/*.mainContentContent.pad tr .riLabel {
    width: 32% !important;
}*/
/*.mainContentContent.pad td span.riContentWrapper {
    width: 68% !important;
}*/
/*for the sanity checks time command calender td*/
.mainContentContent.pad td span.riContentWrapper {
    width: 57.2% !important;
}
.mainContentContent.pad tr .riLabel {
    width: 42.7% !important;
}
/*.RadButton.RadButton_MetroTouch.rbCheckBox.rbRounded {
    height: 0 !important;
    line-height: 2px !important;
    margin-top: -3px;
}*/
.RadButton.rbCheckBox .rbIcon.rbToggleCheckbox,
.RadButton.rbCheckBox .rbIcon.rbToggleCheckboxChecked,
.RadButton.rbCheckBox .rbIcon.rbToggleCheckboxFilled,
.RadButton.rbToggleButton .rbIcon.rbToggleCheckbox, 
.RadButton.rbToggleButton .rbIcon.rToggleCheckboxChecked,
.RadButton.rbToggleButton .rbIcon.rbToggleCheckboxFilled,
.RadButton.rbRadioButton .rbIcon.rbToggleRadio,
.RadButton.rbRadioButton .rbIcon.rbToggleRadioChecked {
    margin: -0.125em .61667em 0 0 !important;
}
/*.RadButton.RadButton_MetroTouch.rbButton.rbRounded.actionButton.exportButton {
    padding: .25em 1.875em !important;
}
.RadButton_MetroTouch.actionButton.exportButton span.rbSplitPart.rbSplitPartRight {
    background-color: transparent !important;
    border-color: transparent !important;
    color: black;
   
}*/
.actionButton.exportButton span.rbIcon.rbSplitIcon {
    margin: 0 !important;
}
.noPadding{
    padding:0;
}
.btn .caret {
    margin-left: 0;
}
 .caret {
    display: inline-block;
    width: 0;
    height: 0;
    margin-left: 2px;
    vertical-align: middle;
    border-top: 4px dashed;
    border-top: 4px solid\9;
    border-right: 4px solid transparent;
    border-left: 4px solid transparent;
}
 /*.exportButton .dropdown{
    position:relative;
}
.exportButton .dropdown ul.dropdown-menu {
    list-style-type: none !important;
    display: block;
    display: none;
    position: absolute;
    top: 0;
    background-color: white;
    right: 0;
    left: 0px;
    width: 12%;
    bottom: auto;
    top: 0;
    border: 1px solid #ccc;
    padding-right: 0;
    margin-top: 34px;
}*/
.exportButton .btn-group {
    position: relative;
    display: inline-block;
    vertical-align: middle;
}
.exportButton .btn {
    display: inline-block;
    padding: 6px 12px;
    margin-bottom: 0;
    font-size: 14px;
    font-weight: 400;
    line-height: 1.42857143;
    text-align: center;
    white-space: nowrap;
    vertical-align: middle;
    -ms-touch-action: manipulation;
    touch-action: manipulation;
    cursor: pointer;
    -webkit-user-select: none;
    -moz-user-select: none;
    -ms-user-select: none;
    user-select: none;
    background-image: none;
    border: 1px solid transparent;
}
.exportButton .open > .dropdown-menu {
    display: block;
}
.exportButton .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;
    font-size: 14px;
    text-align: left;
    list-style: none;
    background-color: #fff;
    -webkit-background-clip: padding-box;
    background-clip: padding-box;
    border: 1px solid #ccc;
    border: 1px solid rgba(0,0,0,.15);
    /*border-radius: 4px;*/
    -webkit-box-shadow: 0 6px 12px rgba(0,0,0,.175);
    box-shadow: 0 6px 12px rgba(0,0,0,.175);
}
#dropdownDashboardButton {
    right: 0;
    left: unset;
}
#divDashboardExportOptions {
    float: right;
    margin-top: 2px;
    margin-right: 2px;
}
.buttonExportCustomerList .exportButton .dropdown-menu {
    margin: 2px 0 0 -61px;
}
.exportButton .dropdown-menu > li > a {
    display: block;
    padding: 3px 20px;
    clear: both;
    font-weight: 400;
    line-height: 1.42857143;
    color: #333;
    white-space: nowrap;
}
    .exportButton .dropdown-menu li a:hover {
        text-decoration: none;
    }
.fa-plus.blue {
    color: #00adef;
    padding-right: 4px;
    font-size: 13px;
    /*opacity:.7;*/
    font-weight: normal;
    padding-left: 20px;
}
.nestedGrid, .normalGrid {
    margin-bottom: 127px;
}
.gridGraph, .normalGrid {
    margin-bottom: 10px;
}
.orderCancellationReason .normalGrid {
    margin-bottom: -2px;
}
.noBgSelectBox.size200,
.noBgSelectBox.size100 {
    background-color: transparent !important;
}
.styledDetailList .inputWrapper .noBgSelectBox.size200,
.styledDetailList .inputWrapper .noBgSelectBox.size100 {
    float: none !important;
    width: auto!important;
    margin: 0.5em 0 !important;
}
label.specialLabel {
    width: 24.7% !important;
    vertical-align: middle;
    display: inline-block;
}
  /*form customer page*/

.RadButton .rbToggleRadioChecked:before,
.RadButton .rbToggleRadio:before {
    content: " " !important;
}
/*for the assortiment & customer page*/
 .RadButton .rbToggleRadioChecked:before
{
    content: "\E14B" !important;
}
 .RadButton .rbToggleRadio:before {
    content: "\E14C" !important;
}
.basisAssortimentPage  .styledDetailList .inputWrapper > span > span, .styledDetailList .inputWrapper > div > div {
   
    width: 70% !important;
    display: inline-block;
}
.basisAssortimentPage .divContainerRadioButton,
.basisAssortimentPage .divContainerRadioButtonLongDescription,
.basisAssortimentPage .divContainerRadioButtonShortDescription {
    margin-left: 0%;
}
.basisAssortimentPage .RadButton.RadButton_MetroTouch
{
    height:auto;
    line-height:1.2;
}
.basisAssortimentPage .styledDetailList .inputWrapper > div > label.riLabelRadioButton
{
    width:25% !important;
}
.basisAssortimentPage .divContainerRadioButton
{
    float:none;
}
.basisAssortimentPage .styledDetailList .inputWrapper
{
    margin-bottom:5px;
}
/*.width80 input{
    width:73.6% !important;

}*/
/* for checkbox in assortiment*/
/*.RadButton.rbCheckBox .rbIcon.rbToggleCheckboxChecked,
.RadButton.rbCheckBox .rbIcon.rbToggleCheckbox {
    margin-top: 1px !important;
}*/
/*for the order view checklist*/
span.aspNetDisabled.checkBoxInOrder {
    position: absolute;
    top: 8px;
}
p.checkBoxLabelInOrder {
    position: absolute;
    left: 30px;
}
.googleCalendarTitle{
    overflow-y:hidden;
}
.rcCalPopup.special{
    background-repeat:no-repeat;
}
.styledFilter.rightNav {
    width: 100%;
    margin-bottom: 20px;
}
.width100 .riSingle.RadInput.RadInput_MetroTouch {
    width: 97% !important;
}

.width300px {
    width: 300px !important;
}
/*for othe page and for basis assortiment*/

.riSingle .riContentWrapper.width100,
.riSingle .riContentWrapper.defaultErrorImages {
    width: auto;
}
/*for the page in  basis assortiment for code and naam */
.riSingle .riContentWrapper.width60
{
    width:60%;
}
.riSingle.inlineInput {
    display: inline !important;
}
/**/
a.contactPhoneLess,
a.contactPhoneMore,
a.contactPhoneLess:hover,
a.contactPhoneLess:focus,
a.contactPhoneMore:hover,
a.contactPhoneMore:focus {
    text-decoration: none;
    color: #0197D6;
    cursor: pointer;
    display: block;
    margin-top: 10px;
    /*margin-bottom: -5px;*/
    font-size: 14px;
}
.contactPhone1 {
    position: relative;
}
a.contactPhoneLess {
    position: absolute;
    top: -4px;
    right: -3px;
}
    a.contactPhoneMore:before,
    a.contactPhoneLess:before {
        font-family: 'FontAwesome';
        font-size: 14px;
    }
a.contactPhoneMore:before {
    content: '\f067 ';
    padding-right: 5px
}
a.contactPhoneLess:before {
    content: '\f00d ';
}
/**/
a.contactPhoneLessInvoice,
a.contactPhoneMoreInvoice,
a.contactPhoneLessInvoice:hover,
a.contactPhoneLessInvoice:focus,
a.contactPhoneMoreInvoice:hover,
a.contactPhoneMoreInvoice:focus {
    text-decoration: none;
    color: #0197D6;
    cursor: pointer;
    display: block;
    margin-top: 10px;
    /*margin-bottom: -5px;*/
    font-size: 14px;
}
a.contactPhoneLessInvoice {
    position: absolute;
    top: -4px;
    right: -3px;
}
    a.contactPhoneMoreInvoice:before,
    a.contactPhoneLessInvoice:before {
        font-family: 'FontAwesome';
        font-size: 14px;
    }
a.contactPhoneMoreInvoice:before {
    content: '\f067 ';
    padding-right: 5px
}
a.contactPhoneLessInvoice:before {
    content: '\f00d ';
}
/*for order page (right column) label*/
/*for different width in the input forms in different page*/
.riLabel.width34 {
    width: 34.2% !important;
    vertical-align: -webkit-baseline-middle !important;
}
.riContentWrapper.width66 {
    width: 65.2% !important;
}
.riLabel.width24 {
    width: 24.2% !important;
}
.riLabel.width40 {
    width: 39.2% !important;
}
.riContentWrapper.width60 {
    width: 60% !important;
}
.riContentWrapper.width75 {
    width: 75.2% !important;
}
.riSingle  .riContentWrapper.width57 {
    width: 57%;
}
.inlineInput .riSingle {
    display: inline !important;
}
.riContentWrapper.width30{
    width:30%;
}
.riSingle .riContentWrapper.width30
{
    width:30% !important;
}
 /*form klant page issue bcoz color-profile this*/
/*.width30 .riSingle
{
    display:inline;
}*/
/*table.rcTable.rcSingle{
    width:64% !important;
}*/
/*for label input the sanity checks page label*/
.afsprakPageLabel table.rcTable.rcSingle {
    width: 64% !important;
}
.riContentWrapper.width36
{
    width:36% !important;
}
.noMargin hgroup {
    margin: 0 !important;
}
.subHeader.noMargin hgroup h1
{
    margin:0 !important;
}
/*In assortiment besteregels toevoegen and categorie toevoegen*/
.inlineTab .RadAjaxPanel {
    display: inline !important;
}
.styledDetailList .inputWrapper > span.errorSpan, .errorSpan img {
    padding-bottom: 11px;
    padding-left: 3px;
    padding-top: 8px;
}
.styledFilter.rightNav .frmLabel {
    margin-bottom: 7px;   
    display: inline-block;
    font-size:16px;
}
.greyBackground {
    background: #C4C4C4;
    height: 1em;
    margin-top: -1em;
}
.rightNav .RadPicker_Metro .rcCalPopup {
    background-position: 0 0;
   }
/*Order Page right coumn*/
.smallInputText {
    color: #7e7e7e;
    font-size:12px;
}
.badge {
    display: inline-block;
    min-width: 10px;
    padding: 3px 7px;
    font-size: 12px;
    font-weight: 700;
    line-height: 1;
    color: #fff;
    text-align: center;
    white-space: nowrap;
    vertical-align: middle;
    background-color: #777;
    border-radius: 10px;
}
.btn .badge {
    position: relative;
    top: -1px;
}
.badgeStyle {
    background-color: #00adef;
    margin-bottom: 10px;
    border-radius: 4px !important;
    padding: 0.2em .75em;
    vertical-align: bottom;
    margin-right: 5px;
}
.btn-primary .badge {
    color: #337ab7;
    background-color: transparent;
}
.badgeStyle .badge {
    margin-left: 10px;
}
.badgeStyle .fa-times {
    color: white;
}
/*for the new list item in every page*/
.styledFilter.filterTab input,
.styledFilter.filterTab,
.styledFilter.filterTab .RadInput_Metro,
.styledFilter.rightNav select {
    width: 100% !important;
}
.styledFilter.filterTab {
    width: 100% !important;
    display: inline;
}
    .styledFilter.filterTab .riSingle {
        display: inline;
    }
    /*photogrpaher page login as photographer*/
.greyText {
    color: #7e7e7e;
}
.copyClipboardButton {
    position: absolute;
    top: 11px;
    right: 16px;
    border-style: none;
    background-color: white;
    padding: 7px 12px;
    outline: 0;
}
.copyClipboardButton:hover {
    background-color: #eee;
}
.detailLabel.OuterTruncate input {
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    padding-right: 50px !important;
}
.detailLabel.OuterTruncate .fa-files-o {
    color: #00adef;
    font-size: 16px;
}
.presetButtonTab.clear {
    position: relative;
    /* float: right; */
    clear: both;
    height: auto;
    width: auto;
    margin: 1em 0 .5em;
}
/*form assortiment popup box thead radio button command check box aligned equally*/
.AssortmentPopup .RadButton.RadButton_MetroTouch {
    height: auto !important;
    line-height: 0 !important;
}

/*form assortiment popup box thead radio button command check box aligned equally*/
.ProductDetail .RadButton.RadButton_MetroTouch {
    height: auto !important;
    line-height: 0 !important;
}

/*rightside filter tab*/
.filterSidebar .filterWrapper .styledFilter {
    position: relative;
    float: none;
    width: 100%;
    padding-bottom: 5px;
}
.filterSidebar .filterWrapper .SearchOrderField4 .styledFilter {
    position: relative;
    float: left;
    width: 100%;
    padding-bottom: 5px;
}
.filterSidebar  .filterInner {
    position: relative;
    float: none;
    width: 100%;
}
.filterSanitySp .filterInner {
    position: relative;
    float: none;
    width: 100%;
}
.filterSidebar .filterWrapper .styledFilter input {
    width: 100% !important;
}
.filterSidebar .riSingle.RadInput.RadInput_Metro {
    width: 100% !important;
}
/*.filterSidebar .riTextBox.riEnabled.frmInput.smallfield
{
    width:80%;
}*/
.presetButtonTab .riTextBox.riEnabled.frmInput.smallfield {
    height: 33px;
    }
.filterSidebar .RadPicker.RadPicker_Metro {
    display: inline !important;
  
}
.filterSidebar td.rcInputCell {
    width: 100% !important;
}
.filterDateField {
    width: 50%;
    float: left;
}

.filterDateField2 {
    width: 100%;
    float: left;
}
div[class^="SearchOrderField"] {
    margin-bottom: 22px;
}
/*.RadButton.RadButton_MetroTouch.rbSkinnedButton.actionButton {
    width:20%;
}*/
.presetButtonTab .riSingle.RadInput.RadInput_Metro {
    padding: 0 74px 0 0;
    position:relative;
}
.presetButtonTab .btn.btn-primary {
    /*position:absolute;
    top:0;
    left:0;*/
}
.presetButtonTab.styledFilter input.btn.btn-primary {
    width: auto !important;
    padding: 7px 15px;
    height: 33px;
    position: absolute;
    right: 0;
    top: 0;
    bottom: 0;
} 
/*UUBI Work WOrder Form*/

.orderDetailCenterColumn.uubiworkorder {
    padding:2em 2em 0;
}
.pad .RadAjaxPanel .width200 .reContentCell iframe {
    height: 248px !important;
}
/*for the textbox in the order page *(rightside)*/
.width200.textareaLine.bottom-spacing-2 .RadEditor.Metro.reWrapper {
    height: 275px !important;
} 
.width200.textareaLine.bottom-spacing-2 .RadEditor.Metro.reWrapper td.reContentCell.reNoBorder
{
    width:100%;
}
.detailTab .reModule.reStatistic {
    display: none;
}

#ctl00_cphMain_tbxCommentsNew {
    width: 100% !important;
    overflow-y: hidden;
    overflow-x: auto;
}
#ctl00_cphMain_tbxCommentsNewCenter {
    overflow-y: auto;
    overflow-x: hidden;
}

#ctl00_cphMain_tbxCommentsNew_contentDiv {
    overflow-x: hidden !important;
}

.editorEmbeddedContainer {
    margin-bottom: 10px;
}

#pnlMediaEmbeddedItems, #pnlMediaFiles {
    padding-top: 20px;
}

.imgbtnCopyOrder {
    margin-left: 5px;
    font-weight: bold;
    font-size: 15px;
    cursor: pointer;
}

.parentOrder {
    font-family: 'Open Sans', sans-serif;
    font-size: 12px;
    text-transform: none;
    font-style: italic;
}

#divContainereSoftUseCompanyLogo {
    width: 60% !important;
}
.clearboth {
    clear: both;
}
.divLabel label{
    color: #666;
}
.cbxDisabledColor {
    color: #cdcdcd !important; 
}

.tbDisabled {
    opacity: 0.5 !important;
}

.requiredBottomLabel {
    position: absolute !important;
    margin: 24px 15px !important;
    left: 0px !important;
}

.nonclickable {
    cursor: default !important;
}
.breakFilename a{
    word-wrap: break-word;
}
.btnWeekDates {
    padding: 0.3em .75em .6em !important;
}
    .btnWeekDates i {
        font-size: 20px;
    }

.ddl-role {
    width: 200px !important;
}

/* ========================= REPORTS ========================= */
.reportAPvsMPFilter .filterWrapper .filterButtons {
    margin: 0px !important;
}

.reportAPvsMPContainer {
    width: 100%;
    background-color: #e8e8e8;
    padding: 1em;
}

    .reportAPvsMPContainer table .tdValue {
        font-weight: bold;
        padding-left: 10px !important;
        padding-right: 0px !important;
        text-align: right;
    }
    .reportAPvsMPContainer table .tdPct {
        font-weight: bold;
        padding-left: 10px;
        text-align: left;
    }

.reportAPvsMPExport {
    display: inline-block;
}
/* ========================= REPORTS ========================= */

/* ===================== TELERIK OVERRIDE ==================== */
span.RadButton_MetroTouch.rbSkinnedButton {
    padding: 0px !important;
}

span.RadButton_MetroTouch.rbSkinnedButton .rbDecorated {
    height: 34px;
    padding: 0 15px;
}

.RadButton.RadButton_MetroTouch {
    height: 34px;
    line-height: 33px;
}

.RadButton .rbToggleCheckboxChecked:before {
    content: "\E14D";
}

.RadButton .rbIcon:before {
    display: inline-block;
    vertical-align: inherit;
    line-height: 1 !important;
    font-family: "TelerikWebUI" !important;
    font-size: 1.33333em !important;
    font-weight: inherit !important;
    /*  margin: 0px;
    padding: 0px;*/
}

.RadButton_MetroTouch.rbCheckBox .rbIcon, .RadButton_MetroTouch.rbRadioButton .rbIcon, .RadButton_MetroTouch.rbToggleButton .rbIcon {
    color: #767676;
}

.p-i-checkbox:before, .rfdCheckboxUnchecked:before {
    content: "\E14E" !important;
}

.k-icon, .p-icon, .t-icon, .t-font-icon, .t-efi {
    font-weight: inherit !important;
}


.RadButton .rbToggleCheckbox, .RadButton .rbToggleCheckboxChecked {
    vertical-align: middle !important;
}

.RadButton .rbToggleRadio, .RadButton .rbToggleRadioChecked {
    vertical-align: -1px !important;
}

.RadUpload_MetroTouch .ruSelectWrap .ruButton {
    line-height: 2.4em !important;
    padding: 0 .5em .125em;
    border-color: #cdcdcd;
    background-color: #f9f9f9;
}

.RadUpload .ruFakeInput {
    display: inline-block;
    width: 10.83333em;
    height: 1.66667em;
    border-width: 1px;
    border-style: solid;
}

.RadUpload .ruBrowse {
    display: inline-block;
    min-width: 5em !important;
    margin-left: .25em;
    padding: .08333em .5em;
    line-height: 2.4em !important;
    text-align: center;
    border: 1px solid transparent;
    outline-offset: -2px;
    height: inherit !important;
}

.RadUpload_MetroTouch .ruSelectWrap .ruFakeInput {
    height: 2.5em;
    border-color: #cdcdcd !important;
    background-color: inherit !important;
}

.RadUpload .ruSelectWrap {
    margin-top: .58333em;
}

.RadUpload .ruFileLI .ruButton {
font-size: inherit !important;
margin-top: 1px;
}
    .RadUpload .ruFileLI .ruButton.ruRemove:before {
        /* font-family: TelerikWebUI; */
        content: "\2715" !important;
    }

.RadUpload_MetroTouch {
    color: #000;
    font-family: "Segoe UI",Arial,Helvetica,sans-serif;
}
/* ===================== TELERIK OVERRIDE ==================== */


/* ===================== ERROR PAGES ==================== */
.errorPageContainer {
    position: absolute;
    left: 50%;
    top: 38%;
    -webkit-transform: translate(-50%, -50%);
    transform: translate(-50%, -50%);
    text-align: center
}

.errorPageTitle {
    font-size: 40px;
    font-weight: bold;
}

.errorPageSubtitle {

}

.errorPageButton {
    margin-top: 30px;
}
/* ===================== ERROR PAGES ==================== */

/* ===================== FilterControl Right Side ==================== */

.row.filterControlOnRightSide {
    margin-right: -12px;
}
.row.orderFilterControlOnRightSide {
    margin-right: -14px;
}
.row.filterControlOnRightSide .col-md-12 .RadGrid, .radGridOrderList .RadGrid {
    width: 100% !important;
}
.filterControlOnRightSide .RadTabStrip ul.rtsUL {
    width: 100%;
}
.filterControlOnRightSide .RadTabStrip ul.rtsUL li {
    width: 50%;
}
.filterControlOnRightSide .filterWrapper {
    background: #DCDCDC;
}
.filterControlOnRightSide .col-md-3 .filterWrapper .styledFilter,
.filterControlOnRightSide .col-md-3 .filterWrapper .styledFilter .RadPicker.RadPicker_Metro,
.filterControlOnRightSide .col-md-3 .filterWrapper .styledFilter .riSingle,
.filterControlOnRightSide .col-md-3 .filterWrapper .styledFilter .riSingle .riTextBox,
.filterControlOnRightSide .col-md-3 .filterWrapper .styledFilter .RadComboBox,
.filterControlOnRightSide .col-md-3 .filterWrapper .styledFilter .RadComboBox .radPreventDecorate,
.orderFilterControlOnRightSide .filterWrapper .styledFilter select,
.orderFilterControlOnRightSide .col-md-3.noPadding .filterWrapper .styledFilter .RadComboBox{
    width: 100% !important;
}
.filterControlOnRightSide .RadTabStrip .rtsLevel1 .rtsTxt {
    font-weight: bold;
}
.filterControlOnRightSide .col-md-3 {
    padding-left: 0;
}
.filterControlOnRightSide .col-md-3 .listTab .RadTabStrip_MetroTouch .rtsLevel1 .rtsFirst .rtsSelected,
.filterControlOnRightSide .col-md-3 .listTab .RadTabStrip_MetroTouch .rtsLevel1 .rtsFirst:hover .rtsSelected,
.filterControlOnRightSide .col-md-3 .listTab .RadTabStrip_MetroTouch .rtsLevel1 .rtsLast .rtsSelected,
.filterControlOnRightSide .col-md-3 .listTab .RadTabStrip_MetroTouch .rtsLevel1 .rtsLast:hover .rtsSelected{
    color: #1D5A79 !important;
    background-color: #DCDCDC !important;
    border: none !important;
    cursor: default !important;
}
.filterControlOnRightSide .col-md-3 .listTab .RadTabStrip_MetroTouch .rtsLevel1 .rtsLink {
    color: #1D5A79 !important;
    background-color: #C4C4C4 !important;
    border: none !important;
    cursor: default !important;
}
.filterControlOnRightSide .col-md-3 .listTab .RadTabStrip_MetroTouch .rtsLevel1 .rtsFirst:hover a,
.filterControlOnRightSide .col-md-3 .listTab .RadTabStrip_MetroTouch .rtsLevel1 .rtsLast:hover a {
    background-color: #e8e8e8 !important;
}
.filterControlOnRightSide .col-md-3 .listTab .RadTabStrip_MetroTouch .rtsLevel1 .rtsFirst:hover .rtsDisabled,
.filterControlOnRightSide .col-md-3 .listTab .RadTabStrip_MetroTouch .rtsLevel1 .rtsLast:hover .rtsDisabled {
    background-color: #C4C4C4 !important;
}
.text-word-break {
    word-break: break-all;
}
.text-break-word {
    word-break: break-word;
}
.width8perc {
    width: 8%;
}
.width10perc {
    width: 10%;
}
.width15perc {
    width: 15%;
}
.width30perc {
    width: 30%;
}
/* ===================== FilterControl ==================== */


/* ======================== Charts ======================== */
.divChart {
    float: left;
    float: left;
    border: thin;
    margin: 10px;
    box-shadow: 0 4px 8px 0 rgba(0, 0, 0, 0.2), 0 6px 20px 0 rgba(0, 0, 0, 0.19);
}


.divChartContainer {
    width: 100%;
    text-align: center;
}
/* ======================== Charts ======================== */


/* ==================== DIALOG POPUPS ===================== */
.divPopupContent {
    /*font-size: 0.9em;*/
}

.iframePopup {
    margin-left: 10px;
}

.ui-dialog .ui-dialog-title {
    float: left;
    margin: .1em 0;
    white-space: nowrap;
    width: 90%;
    overflow: hidden;
    text-overflow: ellipsis;
    font-weight: bold;
}

.ui-dialog .ui-dialog-buttonpane button {
    margin: .5em .4em .5em 0;
    cursor: pointer;
    background-color: #00ADEF;
    color: white;
    border-radius: 5px;
    padding: 8px;
    outline: none;
}

button.ui-button.ui-widget.ui-state-default.ui-corner-all.ui-button-icon-only.ui-dialog-titlebar-close {
    outline: none;
}

.weekselection {
    display: inline;
}
/* ==================== DIALOG POPUPS ===================== */

.radiosAppointmentContact .rbText {
    color: black !important;    
}

.txtDisabled {
    background-color: #cccccc !important;
    pointer-events: none;
}

/* ==================== POWER BI REPORTS ===================== */
.powerBiContainer {
    margin: 0;
    padding: 0;
    width: 100%;
    height: 100%;
}

.powerBiReport {
    width: 100%;
    height: 845px;
}
/* ==================== POWER BI REPORTS ===================== */

.RadUpload.removeButton-right .ruFileLI .ruFileWrap {
    width: calc(100% - 100px) !important;
}

#pnlPrepareResultFilesBOGCAD {
    margin-left: 40px;
}
#pnlAproveSourceFiles .riTextBox:disabled {
    opacity: 0.7 !important;
}

.radio-container input[type="radio"] {
    margin-right: 10px;
}

.tabsCRM ul.rtsUL li {
    width: 25% !important;
}


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

.filewith0kb::before {
    content: "\f06a";
    display: block;
    position: relative;
    top: -17px;
    left: 16px;
    color: red;
    font: normal normal normal 14px/1 FontAwesome;
    font-size: 14px;
    text-rendering: auto;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
    transform: translate(0, 0);
}

.filewith0kbUUBI::before {
    content: "\f06a";
    display: block;
    position: relative;
    top: -17px;
    left: -31px;
    color: red;
    font: normal normal normal 14px/1 FontAwesome;
    font-size: 14px;
    text-rendering: auto;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
    transform: translate(0, 0);
}


/* ==================== ORDER DETAIL CONTACTS INFO ===================== */
.grid-wrapper {
    display: grid;
    grid-template-columns: minmax(0, 1fr);
    column-gap: 1rem;
    row-gap: 0.25rem;
    margin-top: 0.5rem;
    margin-bottom: 0.5rem;
}
    .grid-wrapper .editable-inline-block .editIcon {
        float: right;
        margin-right: 0.5em;
    }
/* ==================== ORDER DETAIL CONTACTS INFO ===================== */