@font-face {
    font-family: DXICONS2;
    src: url(icons/dxicons2.woff2) format("woff2");
    font-weight: 400;
    font-style: normal;
}
.grid-column-button {
    font: 17px/17px DXICONS2;
    width: 23px;
    height: 23px;
    text-align: center;
    padding: 3px 0px;
    display: inline-block;
}

.grid-column-button:hover,
.grid-column-button:focus {
    text-decoration: none;
    background: rgba(0, 0, 0, .05);
    border-radius: 12px;
}

.grid-column-button-edit::before {
    content: "\f023";
}

.grid-column-button-view::before {
    content: "\f168";
}
@font-face {
    font-family: "NotoSansRegular";
    src: url("fonts/NotoSans/NotoSans-Regular.eot");
    src: url("fonts/NotoSans/NotoSans-Regular.eot?#iefix") format("embedded-opentype"), url("fonts/NotoSans/NotoSans-Regular.woff") format("woff"), url("fonts/NotoSans/NotoSans-Regular.ttf") format("truetype");
    font-style: normal;
    font-weight: 400;
}

* {
    font-family: NotoSansRegular;
    outline: none;
    -webkit-box-shadow: none;
}

::-webkit-input-placeholder {
    color: #dde6e9;
    font-style: italic;
}

::-moz-placeholder {
    color: #dde6e9;
    font-style: italic;
}

:-moz-placeholder {
    color: #dde6e9;
    font-style: italic;
}

:-ms-input-placeholder {
    color: #dde6e9;
    font-style: italic;
}

:focus::-webkit-input-placeholder {
    color: transparent;
}

:focus::-moz-placeholder {
    color: transparent;
}

:focus:-moz-placeholder {
    color: transparent;
}

:focus:-ms-input-placeholder {
    color: transparent;
}

::-webkit-scrollbar {
    width: 12px;
    height: 12px
}

::-webkit-scrollbar-track {
    border-radius: 0;
}

    ::-webkit-scrollbar-track:hover {
        background: rgba(0, 0, 0, .05);
    }

::-webkit-scrollbar-thumb {
    background: rgba(0, 0, 0, .2);
    border-radius: 0;
}

    ::-webkit-scrollbar-thumb:hover {
        background: rgba(0, 0, 0, .3);
        border-radius: 0;
    }

textarea {
    resize: none;
}

input[type=text],
input[type=password],
select,
option,
textarea,
.checkList span,
.checkList span sup {
    font-family: NotoSansRegular, serif !important;
    font-size: 1em;
}

select {
    background-color: #fff;
}

input[type=button],
input[type=submit] {
    /*padding: 6px 0;*/
    background: transparent;
    border: solid 1px #999;
    cursor: pointer;
}

input[readonly],
input[disabled],
textarea[readonly],
textarea[disabled] {
    background-color: #fbfbfb;
    border: solid 1px #fbfbfb;
    opacity: 1;
    color: #888;
}


html, body {
    margin: 0;
    padding: 0;
    min-height: 100%;
    height: 100%;
    font-size: .9em;
}

a {
    text-decoration: none;
    color: #005587;
}

    a:focus,
    a:hover {
        text-decoration: underline;
    }



.headerTop {
    padding: 0;
    list-style-type: none;
    margin: 0;
    border-bottom: solid 1px #ddd;
    height: 60px;
}






.dxpnl-edge.t.headerPane {
    background-color: #EDEDED;
    background-position: left top;
    background-repeat: no-repeat;
}

    .dxpnl-edge.t.headerPane.panel {
        padding: 0;
    }

.headerMenu {
    border-width: 0 !important;
    border-top-width: 1px !important;
}

.expandedPanel {
    padding: 2px !important;
}

    .expandedPanel .headerMenu {
        border-top-width: 0 !important;
    }

    .expandedPanel .headerTop {
        display: none;
    }

.templateTitle {
    float: left;
    margin: 10px;
}

.dxpnl-edge.t.headerPane.bar .templateTitle {
    margin: 0;
}

.templateTitle a {
    text-decoration: none;
    font-size: x-large;
    color: black;
}

.loginControl {
    float: right;
    margin: 19px 16px 0 16px;
}

    .loginControl a {
        text-decoration: none;
        display: inline-block;
    }


/* Footer */
.dxpnl-edge.b.footerPane {
    background-color: #EDEDED;
}

    .dxpnl-edge.b.footerPane.panel {
        padding: 0;
    }

.footerMenu {
    float: right;
    padding-top: 7px;
}

.copyright {
    float: left;
    margin: 10px 15px;
}

.content {
    padding: 5px;
}

/* Left Panel */
.leftPane.panel {
    padding: 1px;
    width: 200px;
}

/* Right Panel */
.rightPane.panel {
    padding: 0;
    width: 250px;
}

/* Account */
.accountHeader h2 {
    margin: 10px 0 7px 0;
    font-size: 16px;
}

.accountHeader p {
    margin: 0;
    padding: 0;
}

.accountHeader {
    margin-bottom: 20px;
}


/* iOS */
.dxpnlControl_iOS.leftPane,
.dxpnlControl_iOS.rightPane,
.dxpnlControl_iOS.contentPane {
    border-width: 1px !important;
}

    .dxpnlControl_iOS.leftPane.panel {
        width: 300px;
    }

.dxpnlControl_iOS.rightPane {
    width: 450px;
}

.dxpnlControl_iOS .templateTitle {
    margin: 17px 25px;
}

    .dxpnlControl_iOS .templateTitle a {
        color: #303030;
        font-size: 26px;
        line-height: 1em;
        font-weight: bold;
    }

.dxpnlControl_iOS .loginControl a {
    color: #0160E7;
    text-decoration: underline;
    font-size: 20px;
    font-weight: bold;
}

.dxpnlControl_iOS.mainContentPane {
    border-width: 0px !important;
    box-shadow: initial;
    -webkit-box-shadow: initial;
    -moz-box-shadow: initial;
}

.dxpnlControl_iOS.dxpnl-edge.b.footerPane {
    border-width: 1px !important;
}

.dxpnlControl_iOS .accountHeader p {
    color: #303030;
}

.dxpnlControl_iOS .accountHeader h2 {
    color: #303030;
    font-size: 26px;
    margin-bottom: 10px;
}

.dxtlControl_MetropolisBlue {
    font-size: inherit;
    font-family: inherit;
}

    .dxtlControl_MetropolisBlue table {
        border-collapse: collapse;
        border-spacing: 0;
    }

.dxtlNode_MetropolisBlue td {
    background: transparent;
}

.dxtlNode_MetropolisBlue:nth-child(2n+1) td {
    background: #f7f7f7;
}

.dxtlNode_MetropolisBlue td.dxtl {
    padding: 8px;
    border: none 0 !important;
    border-left: solid 1px #ddd !important;
}

.dxgvHeader_MetropolisBlue td {
    white-space: normal;
}

.dxtlHeader_MetropolisBlue,
.dxtlNode_MetropolisBlue td.dxtl {
    white-space: normal;
}

/*
.dxtlNode_MetropolisBlue td:nth-child(2) {
    background: rgba(0, 0, 0, .05);
}
    */
.dxeCheckBoxList_MetropolisBlue {
    border: none 0;
}

.dxe .dxeTAR .dxichTextCellSys label {
    padding: 0;
    white-space: nowrap !important;
}

/* Aqua */
.dxpnlControl_Aqua.dxpnl-edge.t.headerPane,
.dxpnlControl_Aqua.dxpnl-edge.b.footerPane,
.dxpnlControl_Aqua .footerMenu li {
    background-color: #BFDBFF;
}

.dxpnlControl_Aqua.dxpnl-edge.t.headerPane {
    background-image: url('images/AquaHeader.jpg');
}

.dxpnlControl_Aqua .accountHeader h2 {
    color: #5689C5;
}

.dxpnlControl_Aqua .loginControl a,
.dxpnlControl_Aqua .templateTitle a {
    color: White;
    border-color: White;
}


/* DevEx */
.dxpnlControl_DevEx.dxpnl-edge.t.headerPane,
.dxpnlControl_DevEx.dxpnl-edge.b.footerPane,
.dxpnlControl_DevEx .footerMenu li {
    background-color: #F2F3F4;
}

.dxpnlControl_DevEx .templateTitle a,
.dxpnlControl_DevEx .loginControl,
.dxpnlControl_DevEx .loginControl a {
    color: #4B4B57;
}

    .dxpnlControl_DevEx .loginControl a {
        border-bottom-color: #4B4B57;
    }


/* BlackGlass */
.dxpnlControl_BlackGlass.dxpnl-edge.t.headerPane,
.dxpnlControl_BlackGlass.dxpnl-edge.b.footerPane,
.dxpnlControl_BlackGlass .footerMenu li {
    background-color: #2A2A2A;
    color: white;
}

.dxpnlControl_BlackGlass.dxpnl-edge.t.headerPane {
    background-image: url('images/BlackGlassHeader.jpg');
}

.dxpnlControl_BlackGlass .accountHeader p {
    color: #585858;
}

.dxpnlControl_BlackGlass .loginControl a,
.dxpnlControl_BlackGlass .templateTitle a {
    color: White;
    border-color: White;
}


/* Glass */
.dxpnlControl_Glass.dxpnl-edge.t.headerPane,
.dxpnlControl_Glass.dxpnl-edge.b.footerPane,
.dxpnlControl_Glass .footerMenu li {
    background-color: #CFE0E7;
}

.dxpnlControl_Glass.dxpnl-edge.t.headerPane {
    background-image: url('images/GlassHeader.jpg');
}

.dxpnlControl_Glass .footerMenu * {
    background-image: none !important;
}

.dxpnlControl_Glass .templateTitle a,
.dxpnlControl_Glass .loginControl,
.dxpnlControl_Glass .loginControl a {
    color: #4B4B57;
}

    .dxpnlControl_Glass .loginControl a {
        border-bottom-color: #4B4B57;
    }

.dxpnlControl_Glass .accountHeader h2 {
    color: #387FA4;
}

.dxpnlControl_Glass .accountHeader p {
    color: #575757;
}



/* Office2003Blue */
.dxpnlControl_Office2003Blue.dxpnl-edge.t.headerPane,
.dxpnlControl_Office2003Blue.dxpnl-edge.b.footerPane,
.dxpnlControl_Office2003Blue .footerMenu li {
    background-color: #BCD4F6;
}

.dxpnlControl_Office2003Blue .footerMenu div {
    background: transparent none;
}

.dxpnlControl_Office2003Blue .templateTitle a,
.dxpnlControl_Office2003Blue .loginControl,
.dxpnlControl_Office2003Blue .loginControl a {
    color: #4B4B57;
}

    .dxpnlControl_Office2003Blue .loginControl a {
        border-bottom-color: #4B4B57;
    }

.dxpnlControl_Office2003Blue .accountHeader p {
    color: #424242;
}


/* Office2003Olive */
.dxpnlControl_Office2003Olive.dxpnl-edge.t.headerPane,
.dxpnlControl_Office2003Olive.dxpnl-edge.b.footerPane,
.dxpnlControl_Office2003Olive .footerMenu li {
    background-color: #D6DCBB;
}

.dxpnlControl_Office2003Olive .footerMenu div {
    background: transparent none;
}

.dxpnlControl_Office2003Olive .templateTitle a,
.dxpnlControl_Office2003Olive .loginControl,
.dxpnlControl_Office2003Olive .loginControl a {
    color: #4B4B57;
}

    .dxpnlControl_Office2003Olive .loginControl a {
        border-bottom-color: #4B4B57;
    }

.dxpnlControl_Office2003Olive .accountHeader p {
    color: #424242;
}

/* Office2003Silver */
.dxpnlControl_Office2003Silver.dxpnl-edge.t.headerPane,
.dxpnlControl_Office2003Silver.dxpnl-edge.b.footerPane,
.dxpnlControl_Office2003Silver .footerMenu li {
    background-color: #D0D0DE;
}

.dxpnlControl_Office2003Silver .footerMenu div {
    background: transparent none;
}

.dxpnlControl_Office2003Silver .templateTitle a,
.dxpnlControl_Office2003Silver .loginControl,
.dxpnlControl_Office2003Silver .loginControl a {
    color: #4B4B57;
}

    .dxpnlControl_Office2003Silver .loginControl a {
        border-bottom-color: #4B4B57;
    }

.dxpnlControl_Office2003Silver .accountHeader p {
    color: #424242;
}

/* Office2010Black */
.dxpnlControl_Office2010Black.dxpnl-edge.t.headerPane,
.dxpnlControl_Office2010Black.dxpnl-edge.b.footerPane,
.dxpnlControl_Office2010Black .footerMenu li {
    background-color: #393939;
    color: white;
}

.dxpnlControl_Office2010Black .footerMenu a {
    color: white !important;
}

.dxpnlControl_Office2010Black .accountHeader h2 {
    color: #3C3C3C;
}

.dxpnlControl_Office2010Black .loginControl a,
.dxpnlControl_Office2010Black .templateTitle a {
    color: White;
    border-color: White;
}


/* Office2010Blue */
.dxpnlControl_Office2010Blue.dxpnl-edge.t.headerPane,
.dxpnlControl_Office2010Blue.dxpnl-edge.b.footerPane,
.dxpnlControl_Office2010Blue .footerMenu li {
    background-color: #D3E4F6;
}

.dxpnlControl_Office2010Blue .templateTitle a,
.dxpnlControl_Office2010Blue .loginControl,
.dxpnlControl_Office2010Blue .loginControl a {
    color: Black;
}

    .dxpnlControl_Office2010Blue .loginControl a {
        border-bottom-color: Black;
    }

.dxpnlControl_Office2010Blue .accountHeader h2 {
    color: #498BC2;
}


/* Office2010Silver */
.dxpnlControl_Office2010Silver.dxpnl-edge.t.headerPane,
.dxpnlControl_Office2010Silver.dxpnl-edge.b.footerPane,
.dxpnlControl_Office2010Silver .footerMenu li {
    background-color: #A9ACB4;
    color: white;
}

.dxpnlControl_Office2010Silver .accountHeader h2 {
    color: #3B3B3B;
}

.dxpnlControl_Office2010Silver .loginControl a,
.dxpnlControl_Office2010Silver .templateTitle a {
    color: White;
    border-color: White;
}



/* PlasticBlue */
.dxpnlControl_PlasticBlue.dxpnl-edge.t.headerPane,
.dxpnlControl_PlasticBlue.dxpnl-edge.b.footerPane,
.dxpnlControl_PlasticBlue .footerMenu li {
    background-color: #3C4F8F;
    color: white;
}

.dxpnlControl_PlasticBlue.dxpnl-edge.t.headerPane {
    background-image: url('images/PlasticBlueHeader.jpg');
}

.dxpnlControl_PlasticBlue .accountHeader h2 {
    color: #5A83D0;
}

.dxpnlControl_PlasticBlue .accountHeader p {
    color: #575757;
}

.dxpnlControl_PlasticBlue .loginControl a,
.dxpnlControl_PlasticBlue .templateTitle a {
    color: White;
    border-color: White;
}


/* RedWine */
.dxpnlControl_RedWine.dxpnl-edge.t.headerPane,
.dxpnlControl_RedWine.dxpnl-edge.b.footerPane,
.dxpnlControl_RedWine .footerMenu li {
    background-color: #78002B;
    color: white;
}

.dxpnlControl_RedWine.dxpnl-edge.t.headerPane {
    background-image: url('images/RedWineHeader.jpg');
    background-position: top right;
}

.dxpnlControl_RedWine .footerMenu div {
    background: transparent none;
}

.dxpnlControl_RedWine .accountHeader h2 {
    color: #8A0A37;
}

.dxpnlControl_RedWine .loginControl a,
.dxpnlControl_RedWine .templateTitle a {
    color: White;
    border-color: White;
}


/* SoftOrange */
.dxpnlControl_SoftOrange.dxpnl-edge.t.headerPane,
.dxpnlControl_SoftOrange.dxpnl-edge.b.footerPane,
.dxpnlControl_SoftOrange .footerMenu li {
    background-color: #F9F9F9 !important;
    background-image: none !important;
}

.dxpnlControl_SoftOrange .templateTitle a,
.dxpnlControl_SoftOrange .loginControl,
.dxpnlControl_SoftOrange .loginControl a {
    color: Black;
}

    .dxpnlControl_SoftOrange .loginControl a {
        border-bottom-color: Black;
    }

.dxpnlControl_SoftOrange .accountHeader h2 {
    color: Black;
}

.dxpnlControl_SoftOrange .accountHeader p {
    color: #707070;
}


/* Youthful */
.dxpnlControl_Youthful.dxpnl-edge.t.headerPane,
.dxpnlControl_Youthful.dxpnl-edge.b.footerPane,
.dxpnlControl_Youthful .footerMenu li {
    background-color: #8AA150;
    color: white !important;
}

.dxpnlControl_Youthful .accountHeader h2 {
    color: #80A70E;
}

.dxpnlControl_Youthful .loginControl a,
.dxpnlControl_Youthful .templateTitle a {
    color: White;
    border-color: White;
}


.dxgvTable_MetropolisBlue {
    /*   margin: 0 0 0 -10px;*/
}

.dxpnlControl_Metropolis.dxpnl-edge.t.headerPane,
.dxpnlControl_Metropolis .footerMenu li {
    background-color: White;
    color: Black;
}

.dxpnlControl_Metropolis.rightPane {
    width: 400px;
}

.dxpnlControl_Metropolis .accountHeader h2 {
    color: #3B3B3B;
}

.dxpnlControl_Metropolis .loginControl a,
.dxpnlControl_Metropolis .templateTitle a {
    color: Black;
    border-color: Black;
}

.dxpnlControl_Metropolis .templateTitle a {
    font-size: 28px;
}

/* MetropolisBlue */
.dxpnlControl_MetropolisBlue.dxpnl-edge.t.headerPane,
.dxpnlControl_MetropolisBlue .footerMenu li {
    background-color: #fff;
    color: Black;
}

.dxpnlControl_MetropolisBlue {
    border: none 0;
}

    .dxpnlControl_MetropolisBlue.rightPane {
        width: 400px;
    }

    .dxpnlControl_MetropolisBlue .accountHeader h2 {
        color: #3B3B3B;
    }

    .dxpnlControl_MetropolisBlue .loginControl a,
    .dxpnlControl_MetropolisBlue .templateTitle a {
        color: Black;
        border-color: Black;
    }

    .dxpnlControl_MetropolisBlue .templateTitle a {
        font-size: 20px;
    }

/* Moderno */
.dxpnlControl_Moderno.dxpnl-edge.t.headerPane,
.dxpnlControl_Moderno .footerMenu li {
    background-color: White;
    color: Black;
}

.dxpnlControl_Moderno.headerPane .headerMenu .dxm-main {
    border-color: #d1d1d1;
    border-style: solid;
}

.dxpnlControl_Moderno.leftPane {
    padding: 0px;
}

    .dxpnlControl_Moderno.leftPane .dxnbLite_Moderno .dxnb-gr:first-child .dxnb-header,
    .dxpnlControl_Moderno.leftPane .dxnbLite_Moderno .dxnb-gr:first-child .dxnb-headerCollapsed {
        border-top: 0px;
    }

.dxpnlControl_Moderno.rightPane {
    width: 350px;
}

.dxpnlControl_Moderno .accountHeader h2 {
    color: #3B3B3B;
}

.dxpnlControl_Moderno .loginControl a,
.dxpnlControl_Moderno .templateTitle a {
    font-size: 14px;
    color: #0072c6;
    border-color: #0072c6;
}

.dxpnlControl_Moderno .templateTitle a {
    font-size: 28px;
}

.dxpnlControl_Moderno .contentPane .dxgvControl_Moderno .dxgvTable_Moderno {
    border: 0 !important;
}

.dxpnlControl_Moderno .contentPane .dxgvControl_Moderno .dxgvHeader_Moderno {
    border-top: 0 !important;
}

.dxpnlControl_Moderno.dxpnl-edge.b.footerPane {
    background: #EDEDED;
}

/* Mulberry */
.dxpnlControl_Mulberry .footerMenu li {
    background-color: White;
    color: Black;
}

.dxpnlControl_Mulberry .accountHeader h2 {
    color: #3B3B3B;
}

.dxpnlControl_Mulberry .loginControl a,
.dxpnlControl_Mulberry .templateTitle a {
    color: #BF4E6A;
    border-color: #BF4E6A;
    font-size: 14px;
}

.dxpnlControl_Mulberry .templateTitle a {
    font-size: 28px;
}

.dxpnlControl_Mulberry.dxpnl-edge.t.headerPane,
.dxpnlControl_Mulberry.dxpnl-edge.b.footerPane {
    background: #F1F2F5;
}

.dxpnlControl_Mulberry .contentPane .dxgvControl_Mulberry .dxgvTable_Mulberry {
    border: 0 !important;
}

.dxpnlControl_Mulberry .contentPane .dxgvControl_Mulberry .dxgvHeader_Mulberry {
    border-top: 0 !important;
}

.navigation {
    margin: 15px 0 15px 0;
    overflow: auto;
}

    .navigation .links {
        overflow: auto;
    }

        .navigation .links > div > a {
            color: #344044;
            padding: 2px;
            float: left;
            margin: 0;
        }

            .navigation .links > div > a:last-of-type {
                color: #005587;
            }

        .navigation .links div img {
            float: left;
        }

        .navigation .links a.navLink {
            display: inline-block;
            padding-top: 2px;
            padding-left: 4px;
            /*   text-transform: uppercase;*/
            text-decoration: none;
            font-size: 1em;
        }

            .navigation .links a.navLink:focus,
            .navigation .links a.navLink:hover {
                text-decoration: underline;
            }

    .navigation a.button {
        float: right;
        padding: 9px 25px;
        border: solid 1px #005587;
        font-size: 1.2em;
        min-width: 100px;
        margin-left: 5px;
        background: #005587;
        color: #fff;
        text-transform: none;
        text-decoration: none;
        text-align: center;
        line-height: 1.2em;
    }

.dxgvDataRow_MetropolisBlue td.dxgv {
    /*    padding: 5px 10px;*/
    background: #f7f7f7;
    border-color: #fff;
    border-right: solid 1px #ddd;
}

.dxgvHeader_MetropolisBlue,
.dxtlHeader_MetropolisBlue {
    background: #fff;
    color: #333;
    border: none 0;
    padding: 8px;
    font-size: 1em;
    white-space: normal;
    text-align: center;
    border-bottom: solid 1px #ddd;
    border-left: solid 1px #ddd;
    border-right: solid 1px #ddd;
}

    .dxgvHeader_MetropolisBlue:first-child,
    .dxtlHeader_MetropolisBlue:first-child {
        border-left: none 0;
    }

    .dxgvHeader_MetropolisBlue:last-child,
    .dxtlHeader_MetropolisBlue:last-child {
        border-right: none 0;
    }

.dxgvDataRow_MetropolisBlue:nth-child(2n) td.dxgv {
    background: #fff;
}

.dxgvDataRow_MetropolisBlue.dxgvFocusedRow_MetropolisBlue td.dxgv {
    background: transparent;
}

.dxgvFocusedRow_MetropolisBlue {
    background-color: #005587;
}


.dxpLite_MetropolisBlue .dxp-num {
    padding: 8px 12px;
}

.dxgvFilterRow_MetropolisBlue td.dxgv {
    padding: 0;
    border-bottom: solid 1px #ddd;
    border-right: solid 1px #ddd;
}

input[type=text].dxeEditArea_MetropolisBlue {
    padding: 6px 8px;
}

.form .body .column2x input[type=text].dxeEditArea_MetropolisBlue {
    width: auto;
    padding: 4px;
}

.dxgvGroupPanel_MetropolisBlue {
    margin-bottom: 5px;
}

.dxeButtonEdit_MetropolisBlue {
    border-radius: 0;
}

.jobs .dxeButtonEdit_MetropolisBlue {
    margin-left: 10px;
}

.jobs .dxgvHeader_MetropolisBlue td {
    white-space: nowrap;
}

.dxgvFilterRow_MetropolisBlue td.dxgv .dxeTextBox_MetropolisBlue,
.dxgvFilterRow_MetropolisBlue td.dxgv .dxeButtonEdit_MetropolisBlue {
    border: none 0;
}

.mainMenu .dxm-item {
    width: 14%;
    position: relative;
}

    .mainMenu .dxm-item .dxm-content {
        margin: 0;
        position: absolute;
        top: 50%;
        left: 50%;
        margin-right: -50%;
        transform: translate(-50%, -50%);
    }

.dxmLite_MetropolisBlue .dxm-main.mainMenu {
    background-color: transparent;
}

.list {
    padding: 0;
    overflow: auto;
}

.form {
    padding: 0;
    /*    border: solid 1px #ddd;*/
    /*background: #fff;*/
}

    .form .body {
        /*   padding-bottom: 10px;*/
        padding: 0;
        margin: 0;
        list-style-type: none;
        background: #fff;
        float: left;
        width: 100%;
    }

        .form .body h3 {
            font-size: 1.2em;
            padding: 20px 0 3px 0;
            margin: 0;
        }

        .form .body label {
            padding: 17px 0 3px 0;
            display: block;
            color: black;
            margin-bottom: 0;
            color: #666;
        }

        .form .body li:last-child {
            margin-right: 0;
        }

        .form .body .column1x,
        .form .body .column2x,
        .form .body .column3x,
        .form .body .column4x {
            margin: 0;
            padding-bottom: 15px;
            float: left;
            width: 25%;
            padding-left: 15px;
            padding-right: 15px;
            box-sizing: border-box;
            border-left: solid 1px #f7f7f7;
            border-right: solid 1px #f7f7f7;
            min-width: 278px;
        }

        .form .body .column2x {
            width: 50%;
        }

        .form .body .column3x {
            width: 75%;
        }

        .form .body .column4x {
            width: 100%;
        }


        .form .body .column2x > div {
            margin-left: 1%;
            margin-right: 1%;
        }

        .form .body .column2x table select,
        .form .body .column2x table input[type=text],
        .form .body .column2x table textarea {
            width: inherit;
        }

        input.text,
        .form .body input[type=password],
        .form .body input[type=text],
        .form .body textarea,
        .form .body select {
            padding: 8px;
            min-height: 36px;
            font-size: 1em;
            width: 100%;
            background-color: transparent;
            border: solid 1px #ccc;
            display: block;
            box-sizing: border-box;
            border-radius: 0;
        }

        .form .body select {
            padding-top: 7px;
            padding-bottom: 7px;
            min-height: 36px;
        }

            input.text:focus,
            .form .body input[type=password]:focus,
            .form .body input[type=text]:focus,
            .form .body textarea:focus,
            .form .body select:focus {
                border-color: #999;
            }

            .form .body input[disabled],
            .form .body textarea[disabled],
            .form .body select[disabled] {
                background-color: #fafafa;
            }

                .form .body input[disabled]:hover,
                .form .body input[disabled]:focus,
                .form .body textarea[disabled]:hover,
                .form .body textarea[disabled]:focus,
                .form .body select[disabled]:hover,
                .form .body select[disabled]:focus {
                    border: solid 1px #ccc;
                    background-color: #fafafa;
                }

            .form .body input.input-validation-error,
            .form .body textarea.input-validation-error,
            .form .body select.input-validation-error {
                border: solid 1px red;
            }

        .form .body .column2x select.for2x,
        .form .body .column2x input.for2x,
        .form .body .column2x textarea.for2x {
            width: 100%;
            box-sizing: border-box;
        }

        .form .body select.half,
        .form .body input.half,
        .form .body textarea.half /*,
        .form .body span.field-validation-error*/ {
            width: 49%;
        }

        .form .body > div {
            margin-left: 1%;
            margin-right: 1%;
        }

        .form .body div.half {
            float: left;
            width: 48%;
            margin-left: 1%;
            margin-right: 1%;
            box-sizing: border-box;
        }

        .form .body .tagsinput {
            margin: 0;
            resize: vertical;
        }

            .form .body .tagsinput:focus-within {
                border: solid 1px #999;
            }

        .form .body .checkList {
            margin: 0;
            border: solid 1px #ccc;
            border-radius: 0;
            border-bottom: none 0;
            padding: 0;
            overflow: auto;
            max-height: 300px;
            min-height: 200px;
        }

            .form .body .checkList .list-item {
                float: left;
                width: 33.33%;
                padding: 8px;
                box-sizing: border-box;
            }

                .form .body .checkList .list-item:nth-child(2n) {
                    background: #f7f7f7;
                }

        .form .body .checkListFooter {
            margin: 0;
            border: solid 1px #ccc;
            border-radius: 0;
            background: #ccc;
            padding: 8px;
        }

            .form .body .checkList input,
            .form .body .checkListFooter input {
                float: left;
                margin: 3px;
            }

        .form .body input[readonly],
        .form .body textarea[readonly] {
            background-color: #fafafa;
        }

    .form .footer {
        margin: 0 0 0 -10px;
        padding: 10px 0 0 0;
        clear: both;
        overflow: auto;
    }

        .form .footer input,
        .form .footer a,
        .form .footer a.default {
            border-radius: 0;
            padding: 10px;
            border: solid 1px #005587;
            background: #005587;
            color: #fff;
            float: right;
            margin: 0 0 0 10px;
            text-decoration: none;
            text-align: center;
            font-size: 1em;
            min-width: 110px;
            box-sizing: border-box;
            line-height: 1em;
        }

            .form .footer input:focus,
            .form .footer input:hover {
                color: #fff;
                border-color: #344044;
                background-color: #344044;
            }

            .form .footer input[disabled],
            .form .footer input[disabled]:focus,
            .form .footer input[disabled]:hover {
                border: solid 1px #dfe4e6;
                background: #dfe4e6;
                color: #fff;
                cursor: default;
            }

    .form .body .form-labes {
        width: 35%;
        float: left;
    }

    .form .body .form-inputs {
        width: 65%;
        float: left;
    }

        .form .body .form-labes div, .form .body .form-inputs div {
            min-height: 70px;
            display: flex;
            align-items: center;
        }

    .form .footer a {
        color: #005587;
        border-color: #005587;
        background: transparent;
    }

        .form .footer a.blue {
            color: #fff;
            background: #005587;
        }

        .form .footer a:focus,
        .form .footer a:hover {
            border-color: #344044;
            color: #344044;
        }

        .form .footer a.blue:focus,
        .form .footer a.blue:hover {
            color: #fff;
            background: #344044;
        }

.export,
.button {
    border-radius: 0;
    padding: 8px;
    border: none 0;
    font-size: 1em;
    min-width: 100px;
    color: #344044;
    display: inline-block;
    text-decoration: none;
    text-align: center;
    margin-left: 10px;
    box-sizing: border-box;
}

.button {
    margin-bottom: 10px
}

    .button.blue {
        border: solid 1px #005587;
        background: #005587;
        color: #fff;
    }

        .button.blue:hover,
        .button.blue:focus {
            border: solid 1px #344044;
            background-color: #344044;
            color: #fff;
            text-decoration: none
        }

    .button.white {
        border: solid 1px #005587;
        color: #005587;
        /*    background-color: #fff;*/
        position: relative;
    }

        .button.white:hover,
        .button.white:focus {
            border: solid 1px #344044;
            color: #344044;
            text-decoration: none;
            background: rgba(52, 64, 68, .05);
        }

        .button.white.triangle:after {
            content: '';
            width: 0;
            height: 0;
            border-style: solid;
            border-width: 0 10px 10px 0;
            border-color: transparent #005587 transparent transparent;
            right: 0;
            top: 0;
            position: absolute;
        }

    .button.red {
        border: solid 1px red;
        color: red;
    }

        .button.red:hover,
        .button.red:focus {
            /*border: solid 1px red;
            color: red;*/
            text-decoration: none;
            background: rgba(52, 64, 68, .05);
        }

    .button.blue[disabled],
    .button.blue[disabled]:hover,
    .button.blue[disabled]:focus {
        border: solid 1px #dfe4e6;
        color: #fff;
        background-color: #dfe4e6;
        cursor: default;
    }

    .button.white[disabled],
    .button.white[disabled]:hover,
    .button.white[disabled]:focus {
        border: solid 1px #dfe4e6;
        color: #dfe4e6;
        cursor: default;
        background-color: transparent;
    }

.OptionsBottomMargin {
    padding: 10px 0;
    background: #fff;
    margin-top: 1px;
    overflow: auto
}

    .OptionsBottomMargin > div {
        float: right;
        margin-right: 10px;
    }

.export {
    padding: 16px 0;
    background: transparent;
    color: #005587;
    border: solid 1px #005587;
}

    .export:focus, .export:hover {
        color: #344044;
        border: solid 1px #344044;
        text-decoration: none;
    }

.validation-summary-errors {
    margin: 10px 0;
    /*   border: solid 1px #e31b09;*/
    color: #e31b09;
    padding: 0;
    border-radius: 0;
}

    .validation-summary-errors ul {
        padding: 0;
        margin: 0;
        list-style: none;
        text-align: justify;
    }

.input-validation-error {
    border-radius: 0 !important;
    border-color: red !important;
}

.field-validation-error {
    display: block;
    padding: 1px 6px 3px 6px;
    background-color: red;
    color: #fff;
    font-size: 1em;
    font-style: italic;
    border-radius: 0;
}

    .field-validation-error span {
        font-family: NotoSansRegular, serif !important;
        font-size: .9em;
    }

.field-validation-warning {
    display: block;
    padding: 1px 6px 3px 6px;
    background-color: orange;
    color: black;
    font-size: 1em;
    font-style: italic;
    border-radius: 0;
}

    .field-validation-warning span {
        font-family: NotoSansRegular, serif !important;
        font-size: .9em;
    }

.form .body .form-notification-row {
    min-height: 70px;
    display: flex;
    align-items: center;
}

    .form .body .form-notification-row input {
        min-width: 100px !important;
        width: 90%;
    }

    .form .body .form-notification-row select {
        min-width: 100px !important;
        width: 100%;
    }

.dxgvControl_MetropolisBlue {
    border: none 0;
    background-color: transparent;
    font-size: inherit;
}

.dxgvSearchPanel_MetropolisBlue {
    padding: 0 0 10px 0;
    border: none 0;
}

.form .body .payment-visit input {
    max-width: 88px !important;
    min-width: 30px !important;
    width: 100%;
}

.form .body .payment-visit select {
    max-width: 140px !important;
    min-width: 50px !important;
    width: 100%;
}

.form .body .payment-detail input {
    max-width: 88px !important;
    min-width: 30px !important;
    display: inline-flex;
}

.form .body .payment-detail select {
    max-width: 88px !important;
    min-width: 50px !important;
}

.form .body .payment-detail label {
    max-width: 90px !important;
    min-width: 90px !important;
    display: inline-flex;
    margin-top: 25px;
}

.form .body .random-center {
    opacity: 0.8;
    font-weight: bold;
}

.form .body .random-table input {
    min-width: 0px !important;
    padding: 0px !important;
}

.contextMenu {
    display: block;
}

.ui-menu {
    z-index: 100;
    box-shadow: 0 4px 6px rgba(0,0,0,.2);
    border: none 0;
    margin-top: 1px;
}

    .ui-menu .ui-menu-divider {
        border-bottom: solid 1px #ddd;
    }

.ui-icon-settings {
    background-image: url(../Content/Images/ic_settings_black_24dp_1x.png) !important;
    background-size: contain;
}

.ui-icon-lock-screen {
    background-image: url(../Content/Images/ic_lock_outline_black_24dp_1x.png) !important;
    background-size: contain;
}

.user-menu,
.frontend-menu {
    position: absolute;
    z-index: 2147483647;
}

    .user-menu.ui-menu,
    .frontend-menu.ui-menu {
    }
    .ui-menu .ui-menu-item-wrapper {
        padding: 5px 10px;
    }
    .ui-menu-icons .ui-menu-item-wrapper {
        padding: 0;
    }

    .user-menu.ui-menu .ui-menu-item, .frontend-menu.ui-menu .ui-menu-item {
        padding: 0;
        position: relative;
    }

        .user-menu.ui-menu.ui-menu-icons .ui-menu-item a,
        .frontend-menu.ui-menu.ui-menu-icons .ui-menu-item a {
            padding-left: 24px;
        }

        .user-menu.ui-menu .ui-menu-item a,
        .frontend-menu.ui-menu .ui-menu-item a {
            padding: 5px 10px;
            display: block;
            text-align: left;
        }

            .user-menu.ui-menu .ui-menu-item a.ui-state-active,
            .frontend-menu.ui-menu .ui-menu-item a.ui-state-active {
                background: #005587;
            }


            .user-menu.ui-menu .ui-menu-item a:focus,
            .user-menu.ui-menu .ui-menu-item a:hover,
            .frontend-menu.ui-menu .ui-menu-item a:focus,
            .frontend-menu.ui-menu .ui-menu-item a:hover {
                text-decoration: none;
            }

.ui-menu .ui-menu-item {
    padding: 0;
    text-align: left;
    position: relative;
}





.contextMenu {
    cursor: pointer;
    display: block;
}

.menuContainer,
.grid-menu-container,
.treelist-menu-container {
    z-index: 2147483647;
}

    .menuContainer a,
    .menuContainer div,
    .grid-menu-container a,
    .grid-menu-container div,
    .treelist-menu-container a {
        display: block;
        padding: 5px 10px;
        text-decoration: none;
        min-width: 175px;
    }

    .menuContainer .ui-widget-header,
    .grid-menu-container .ui-widget-header,
    .treelist-menu-container .ui-widget-header {
        font-weight: normal;
        padding: 5px 0;
        border: none 0;
    }

.ui-dialog {
    padding: 0;
    border: none 0;
    border-radius: 0;
    box-shadow: 0 1px 5px rgba(0,0,0,.2);
    max-width: 1510px;
    overflow: initial;
    box-sizing: border-box;
    z-index: 99999 !important;
}

    .ui-dialog .form .footer {
        padding: 0 15px 15px 0;
    }

    .ui-dialog .ui-dialog-titlebar {
        background: transparent;
        color: #555;
        border-radius: 0;
    }

    .ui-dialog .ui-widget-header {
        border: none 0;
        border-bottom: solid 1px #ccc;
        font-size: 1.15em;
        padding-left: 10px
    }
    /*
    .ui-dialog.ui-widget.ui-widget-content {
        border: none 0;
    }
    */

    .ui-dialog .ui-dialog-title {
        padding: 4px 8px;
        font-weight: normal;
    }

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

    .ui-dialog .ui-dialog-buttonpane {
        border-top: none 0;
    }

        .ui-dialog .ui-dialog-buttonpane button {
            border-radius: 0;
            margin: 8px 0;
            padding: 8px 0;
            border: solid 1px #005587;
            color: #005587;
            min-width: 110px;
            margin-left: 10px;
        }

            .ui-dialog .ui-dialog-buttonpane button:hover,
            .ui-dialog .ui-dialog-buttonpane button:focus {
                border-color: #344044;
                color: #344044;
            }

    .ui-dialog .ui-button {
        border: none 0;
        background: transparent;
        margin-right: 10px;
    }

        .ui-dialog .ui-button.blue {
            border: none 0;
            background: #005587;
            color: #fff;
        }

            .ui-dialog .ui-button.blue:focus,
            .ui-dialog .ui-button.blue:hover {
                border: none 0;
                background: #344044;
                color: #fff;
            }

    .ui-dialog .ui-dialog-buttonpane button .ui-button-text {
        padding: 0;
    }

.treeButton.expanded,
.treeButton.collapsed {
    background-image: url(/MVCxGridViewDemos/DXR.axd?r=0_1562-bxsle);
    background-position: -70px -142px;
    width: 13px;
    height: 13px;
    margin: 5px;
    display: block;
}

.treeButton.collapsed {
    background-position: -14px -156px;
}

.passwordStrengthLevel1 {
    background: #FF9999;
}

.passwordStrengthLevel2 {
    background: #FFCC66;
}

.passwordStrengthLevel3 {
    background: #FFFF99;
}

.passwordStrengthLevel4 {
    background: #CCFF99;
}

.passwordStrengthLevel5 {
    background: #82ca9c;
}

.front.button {
    text-align: center;
    min-width: 100px;
    background: #fff;
    float: right;
    padding: 8px;
    border: solid 1px #005587;
    color: #005587;
    margin: 0;
    border-radius: 0;
}

.form .body a.button {
    padding: 7px;
}

.front.button svg {
    fill: #005587;
}

.front.button:hover,
.front.button:focus {
    border-color: #344044;
    color: #344044;
}

    .front.button:hover svg,
    .front.button:focus svg {
        fill: #344044;
    }
/*
.custom-combobox {
    position: relative;
    display: inline-block;
}

.custom-combobox-toggle {
    position: absolute;
    top: 0;
    bottom: 0;
    margin-left: -28px;
    padding: 0;
}

.custom-combobox-input {
    margin: 0;
    box-sizing: border-box;
    padding-left: 34px !important;
    cursor: default;
}

.custom-combobox-color {
    width: 16px;
    height: 16px;
    position: absolute;
    top: 10px;
    left: 10px;
    border-radius: 2px
}
*/
.ui-datepicker {
    padding: 0 1px 0 0;
    border-radius: 0;
    width: 250px;
    border: none 0;
    box-shadow: 0 4px 6px rgba(0,0,0,.2);
    z-index: 2147483647 !important;
}

    .ui-datepicker .ui-widget-header {
        border: none 0;
        border-bottom: none 0;
        background: #fff;
        border-radius: 0;
        color: #344044;
        font-weight: normal;
    }

    .ui-datepicker table.ui-datepicker-calendar {
    }

    .ui-datepicker table {
        margin: 0;
    }

.ui-datepicker-calendar td {
    padding: 0;
    border-left: solid 1px #fff;
    border-bottom: solid 1px #fff;
}

    .ui-datepicker-calendar td a {
        display: block;
        padding: 8px 10px;
    }

.ui-datepicker th {
    font-weight: normal;
}

.ui-datepicker-calendar a.ui-state-default {
    border: none 0;
}

.ui-state-active,
.ui-widget-content .ui-state-active {
    background-color: #005587;
    background-size: contain;
    border: solid 1px #005587;
    color: #fff;
}

.ui-autocomplete .ui-menu-item > div {
    padding: 5px 10px;
}

.ui-autocomplete .ui-autocomplete-category {
    padding: 5px 10px;
    background: #bbb;
    color: #fff;
}

.bodyEnd {
    background: #f7f7f7;
    background-image: linear-gradient(to bottom right, #f7f7f7, #f0f0f0);
    min-width: 643px; /*768-100-20-5*/
    padding: 10px;
    border-right: solid 4px #005587;
    box-sizing: content-box;
}

.header {
    padding: 0;
    list-style-type: none;
    margin: 0;
    border-bottom: solid 1px #ddd;
    height: 46px;
    box-sizing: content-box;
}

ul.header > li {
    float: left;
    padding: 0;
    margin: 0;
}

.header > li > a {
    display: inline-block;
    padding: 8px 32px 0 16px;
    height: 46px;
    text-align: center;
    box-sizing: border-box;
}

    .header > li > a.arrow-icon {
        min-width: 300px;
        background: transparent url('data:image/svg+xml;charset=UTF-8,<svg xmlns="http://www.w3.org/2000/svg" fill="%23005587" width="30px" height="18px" viewBox="6 0 24 24"><path d="M16.594 8.578l1.406 1.406-6 6-6-6 1.406-1.406 4.594 4.594z"></path></svg>') no-repeat center right;
    }

    .header > li > a:hover,
    .header > li > a:focus {
        background-color: #f7f7f7;
        text-decoration: none;
    }

    .header > li > a .navbar-account-expand {
        width: 16px;
        height: 16px;
        position: relative;
        top: 1px;
    }

        .header > li > a .navbar-account-expand svg {
            fill: #005587;
        }

.ui-tooltip {
    padding: 15px;
    color: #fff;
    background: rgba(0,0,0,.5);
    border-radius: 0;
    border: none 0;
    text-transform: initial;
    box-shadow: none;
}

.ui-widget-shadow {
    opacity: 1;
}

.pageName {
    color: #555;
    font-size: 2em;
    text-overflow: ellipsis;
    overflow: hidden;
    max-width: 800px;
    display: inline-block;
    white-space: nowrap
}

















.dxeCalendarButton_MetropolisBlue {
    display: none;
}

.ui-draggable .ui-dialog-titlebar {
    background: transparent;
    border-bottom: solid 1px #eee;
}

.button-with-check,
.button-with-check-new {
    padding: 0 5px;
    margin: 0 0 10px 0;
    border-radius: 0;
    float: left;
    border: solid 1px #005587;
}

    .button-with-check > input,
    .frontEnd .button-with-check > input {
        float: left;
        margin: 11px 6px 0 6px;
    }

    .button-with-check > a,
    .button-with-check-new a {
        float: left;
        padding: 8px 4px;
        color: #005587;
    }

.button-with-check-new {
    border: solid 1px #fff;
    width: 36px;
    height: 36px;
    overflow: hidden;
    transition: all .25s ease-out;
}

    .button-with-check-new a {
        display: none
    }

.checked-hover-expand:hover,
.checked-hover-expand:focus {
    border: solid 1px #005587;
    background: #fff;
    width: 162px;
}

.button-with-check-new:hover a,
.button-with-check-new:focus a {
    border-color: #344044;
    display: block
}

.button-with-check:hover,
.button-with-check:focus {
    border-color: #344044;
    background: rgba(52, 64, 68, .05)
}

.button-with-check > a:focus,
.button-with-check > a:hover {
    color: #344044;
    text-decoration: none;
}

.dxgvControl_MetropolisBlue, .dxgvDisabled_MetropolisBlue {
    background: transparent;
}

.frontEnd {
    max-width: 1600px;
    width: 100%;
    margin: 0 auto;
    box-sizing: border-box;
    padding: 0 40px;
}

    .frontEnd input,
    .frontEnd select,
    .frontEnd textarea {
        border: solid 1px #dfe4e6;
        border-radius: 0;
        font-size: 1em;
    }

        .frontEnd input.calculate:read-only,
        .frontEnd select[disabled].calculate,
        .frontEnd textarea.calculate:read-only,
        .frontEnd input.calculate:focus:read-only,
        .frontEnd select[disabled].calculate:focus,
        .frontEnd textarea.calculate:focus:read-only,
        .frontEnd input.calculate:hover:read-only,
        .frontEnd select[disabled].calculate:hover,
        .frontEnd textarea.calculate:hover:read-only {
            background-color: #eee;
            border: solid 1px #dfe4e6;
        }


        .frontEnd input:hover,
        .frontEnd input:focus,
        .frontEnd select:hover,
        .frontEnd select:focus,
        .frontEnd textarea:hover,
        .frontEnd textarea:focus {
            border-color: #ccc;
        }

    .frontEnd input,
    .frontEnd select,
    .frontEnd textarea {
        margin: 0;
        padding: 8px;
        box-sizing: border-box;
    }

    .frontEnd select {
        padding-top: 7px;
        padding-bottom: 7px;
    }

        .frontEnd input[disabled],
        .frontEnd select[disabled],
        .frontEnd textarea[disabled],
        .frontEnd input[disabled]:hover,
        .frontEnd select[disabled]:hover,
        .frontEnd textarea[disabled]:hover,
        .frontEnd input[disabled]:focus,
        .frontEnd select[disabled]:focus,
        .frontEnd textarea[disabled]:focus {
            background-color: #dfe4e6;
            border: solid 1px #dfe4e6;
            opacity: 1;
            color: #888;
        }
    /*
    .frontEnd input[type=button] {
        border: solid 1px #005587;
        color: #005587;
        text-align: center;
    }
        */
    .frontEnd .navigator {
        margin: -49px 0 23px 0;
        padding: 0;
        list-style-type: none;
        overflow: auto;
        height: 46px;
        box-sizing: border-box;
    }

    .frontEnd ul.navigator > li {
        float: left;
        padding: 14px 0 0 0;
    }

        .frontEnd ul.navigator > li > img {
            float: left;
        }

        .frontEnd ul.navigator > li > a {
            float: left;
            color: #005587;
            margin: 2px 2px;
        }

    .frontEnd .label {
    }

    .frontEnd .ui-spinner {
        border: none 0;
        border-radius: 0;
    }

        .frontEnd .ui-spinner .ui-button {
            border: solid 1px #dfe4e6;
        }

        .frontEnd .ui-spinner input {
            border: solid 1px #dfe4e6;
        }

.navbar-account-expand {
    width: 16px;
    height: 16px;
    position: relative;
    top: 1px;
}

/* svg {
     fill: #777; 
 } */

.form.dialog {
    padding: 0;
    border: solid 1px #eee;
    color: #777;
    top: 50%;
    left: 50%;
    margin-top: -100px;
    margin-left: -305px;
    position: absolute;
    line-height: normal;
}

    .form.dialog h3 {
        margin: 0;
        padding: 10px 15px;
        font-size: 1.15em;
        font-weight: normal;
        border-bottom: solid 1px #eee;
    }

.form .information {
    background: #7cc576;
    border-radius: 0 4px 4px 4px;
    color: #fff;
    margin-top: 8px;
    padding: 16px 24px;
    text-align: justify;
}

.form.dialog .footer {
    border: none 0;
    margin: 0;
}

    .form.dialog .footer a,
    .form.dialog .footer input {
        border-radius: 0;
        transition: all 0.1s cubic-bezier(0.445, 0.05, 0.55, 0.95);
        min-width: 100px;
    }


















.ui-spinner,
.ui-spinner a.ui-spinner-button {
    border-color: #dde6e9;
    border-radius: 0;
}

.admin-image-preview {
    margin: 10px 0 0 0;
    display: block;
    height: 180px;
    width: 240px;
    border: solid 1px #ccc;
    background: transparent no-repeat center center;
    background-size: contain;
    border-radius: 0;
    box-sizing: border-box;
}

.upload {
    position: relative;
    display: inline-block;
    cursor: pointer;
    overflow: hidden;
}

    .upload input[type="file"] {
        position: absolute;
        left: 0;
        top: 0;
        right: 0;
        bottom: 0;
        width: 100%;
        height: 100%;
        opacity: 0;
    }

.ui-slider {
}

    .ui-slider .ui-slider-handle {
        border: solid 1px #005587;
        background: #fff;
        height: 24px;
        width: 24px;
        box-sizing: border-box;
        border-radius: 12px;
    }

    .ui-slider.ui-slider-horizontal {
        border-radius: 0;
        height: 24px;
        border: none 0;
        background: linear-gradient(to bottom, #fff, #fff 11px, #ddd 12px, #ddd 13px, #fff 14px);
        margin: 0 auto;
    }

        .ui-slider.ui-slider-horizontal .ui-slider-handle {
            top: 0;
            margin-left: -12px;
        }

    .ui-slider.ui-slider-vertical {
        border-radius: 0;
        border: none 0;
        width: 24px;
        background: linear-gradient(to right, #fff, #fff 11px, #ddd 12px, #ddd 13px, #fff 14px);
        margin: 20px auto;
    }

.ui-slider-vertical .ui-slider-handle {
    left: 0;
}

.ui-slider .ui-slider-handle:hover,
.ui-slider .ui-slider-handle:focus {
    border-color: #344044;
    background: #f0f0f0;
}

.ui-slider-handle.ui-state-active {
}

.switch-list {
    border-radius: 13px;
    height: 26px;
    padding: 0 13px;
    box-sizing: border-box;
}

    .switch-list .ui-slider {
        border: none 0;
        border-radius: 0;
        height: 26px;
        border-color: none;
        background: transparent;
    }

        .switch-list .ui-slider .ui-slider-handle {
            border: solid 1px #fff;
            background: #fff;
            border-radius: 12px;
            top: 1px;
            margin-left: -12px;
            height: 24px;
            width: 24px;
            box-sizing: border-box;
        }

            .switch-list .ui-slider .ui-slider-handle:hover,
            .switch-list .ui-slider .ui-slider-handle:focus {
            }

    .switch-list .ui-slider-handle.ui-state-active {
    }







.button.white.uploader-browse {
    float: left;
    background-color: #fff;
    min-width: 0;
    margin: 0;
    border-radius: 0;
    border-left: none 0;
    border-right: none 0;
}

.button.white.uploader-run {
    float: left;
    background-color: #fff;
    min-width: 0;
    margin: 0;
    border-radius: 0;
    background: transparent url(Images/ic_upload_blue_24dp_1x.png) no-repeat center center;
}

.dxgvPagerTopPanel_MetropolisBlue,
.dxgvPagerBottomPanel_MetropolisBlue {
    background: #fff;
}

.sidebar {
    padding: 0;
    margin: 0;
    overflow-y: auto;
    display: none;
    right: 0;
    top: 0;
    height: 100%;
    width: 400px;
    position: fixed;
    background: #fff;
    box-shadow: 0 0 10px rgba(0,0,0,.25);
    z-index: 100;
    text-align: left;
}

.popup-sidebar {
    padding: 0;
    margin: 0;
    overflow-y: auto;
    right: 35px;
    top: 0;
    bottom: 0;
    position: absolute;
    background: #fff;
    /*box-shadow: 0 0 10px rgba(0,0,0,.25);*/
    border-left: solid 1px #eee;
    border-right: solid 1px #eee;
    z-index: 100;
    text-align: left;
    width: 365px;
    box-sizing: border-box;
}

.settings-sidebar li > div {
    float: left;
    width: 50%;
    padding-right: 10px;
    box-sizing: border-box
}

    .settings-sidebar li > div.for2x {
        float: none;
        width: auto;
    }

.settings-sidebar textarea,
.settings-sidebar select,
.settings-sidebar input {
    width: 100% !important;
    box-sizing: border-box !important;
}

.login-dialog {
    padding: 10px;
    margin: 0 auto;
    width: 480px;
    background-color: rgba(255,255,255,.75);
    box-shadow: 0 0 0 1px rgba(19,24,26,0.05), 0 1px 5px rgba(19,24,26,0.075);
    border-radius: 0;
    box-sizing: border-box;
}

.root-footer.login-page {
    margin: 5px auto 0 auto;
    width: 480px
}

.root-footer {
    margin: 5px 0 0 0;
    padding: 0;
    list-style-type: none;
    text-transform: uppercase;
    font-size: .85em;
    box-sizing: border-box;
    min-height: 20px;
}

    .root-footer li:first-child {
        float: left;
        padding: 0;
        margin: 0
    }

    .root-footer li:last-child {
        float: right;
        padding: 0;
        margin: 0
    }

.study-form {
    float: left;
    width: 25%;
    min-height: 100px;
    min-width: 300px;
}

.progress-bar {
    height: 3px;
    width: 100%;
    margin: 0 0 10px 0;
    box-sizing: border-box;
    background: repeating-linear-gradient(90deg, #fff 0px, #fff 1px, #dedede 2px, #dedede 3px);
}
    /*
    .progress-bar.transparent {
        background: transparent;
    }*/

    .progress-bar div {
        height: 3px;
        background: repeating-linear-gradient(-45deg, #005587, #dedede);
    }

.visit-header-container {
    padding: 0 20px 0 20px;
    margin: 0;
    clear: left
}

.visit-header-name {
    padding: 12px;
    font-size: 1.8em;
    float: left;
    color: #999
}

.identifier {
    background: #bbb;
    color: #fff;
    padding: 0 2px;
    margin-left: 3px;
    text-transform: uppercase;
    font-size: .7em;
    border-radius: 2px 0 2px 0
}

.visit-header-name .identifier {
    font-size: .4em;
}

.visit-header-statistics {
    padding: 0 10px 10px 10px;
    float: right
}

a.button.addNewVisit {
    padding: 10px 0 0 0;
    border: none 0;
    float: left;
}

.forms-table {
    width: 100%;
    padding: 0;
    margin: 0;
    /*border-right: solid 1px #fff;*/
    border-spacing: 0;
}

    .forms-table tr:nth-child(2n+1) {
        background: linear-gradient(to right, #fbfbfb, #f6f6f6);
    }

    .forms-table td {
    }

        .forms-table td:nth-child(1) {
            padding: 0 15px 0 20px
        }

        .forms-table td.forms-table-name {
            padding: 20px 5px;
            width: 50%;
        }

            .forms-table td.forms-table-name .identifier {
                font-size: .7em;
            }

            .forms-table td.forms-table-name > a,
            .forms-table td.forms-table-name > span {
                text-overflow: ellipsis;
                max-width: 450px;
                display: inline-block;
                font-size: 1.2em;
            }

        .forms-table td.forms-table-link,
        .forms-table td.forms-table-flow {
            padding: 5px;
            font-size: 1em;
            min-width: 75px;
            text-align: left;
        }

        .forms-table td.forms-table-flow {
            border-left: solid 1px #eee;
            text-align: center;
            width: 40%;
        }

.popup-modal-dialog {
    width: 640px;
    box-sizing: content-box;
}

.popup-modal-dialog-wide {
    width: 960px;
    box-sizing: content-box;
}

.popup-modal-dialog-full {
    min-width: 960px;
    box-sizing: border-box;
}

.dynamic-form-container {
    /*margin: 40px;*/
    /*float: left;*/
}

.frontEnd input.formCheck {
    margin-left: 10px;
    margin-right: 10px
}

div a.toggle.horizontal {
    border-radius: 0;
    margin-left: -1px;
    margin-right: 0;
    float: left;
}

    div a.toggle.horizontal:first-of-type {
        border-radius: 0;
        margin-left: 0;
        margin-right: 0
    }

    div a.toggle.horizontal:last-of-type {
        border-radius: 0;
        margin-left: -1px;
    }

div a.toggle.vertical {
    border-radius: 0;
    margin-top: -1px;
    margin-right: 0;
    float: none;
    display: block
}

    div a.toggle.vertical:first-of-type {
        border-radius: 4px 4px 0 0;
        margin-top: 0
    }


    div a.toggle.vertical:last-of-type {
        border-radius: 0 0 4px 4px;
        margin-top: -1px;
    }

.waiting-container {
    padding: 20px;
    position: absolute;
    top: 50%;
    left: 50%;
    margin-top: -35px;
    width: 280px;
    margin-left: -140px
}

.waiting-bar {
    margin-right: 10px;
    width: 30px;
    height: 30px;
    position: relative;
    float: left;
}

.cube1, .cube2 {
    background-color: #005587;
    width: 10px;
    height: 10px;
    position: absolute;
    top: 0;
    left: 0;
    -webkit-animation: sk-cubemove 2s infinite ease-in-out;
    animation: sk-cubemove 2s infinite ease-in-out;
}

.cube2 {
    animation-delay: -1s;
}

@keyframes sk-cubemove {
    25% {
        transform: translateX(20px) rotate(-90deg) scale(0.1);
    }

    50% {
        transform: translateX(20px) translateY(20px) rotate(-179deg);
    }

    50.1% {
        transform: translateX(20px) translateY(20px) rotate(-180deg);
    }

    75% {
        transform: translateX(0px) translateY(20px) rotate(-270deg) scale(0.1);
    }

    100% {
        transform: rotate(-360deg);
    }
}

.dxpLite_MetropolisBlue .dxp-current {
    background-color: #005587;
}

.dxpLite_MetropolisBlue .dxp-num {
    padding: 5px 0 0 0;
    margin: 0;
    height: 24px;
    min-width: 24px;
    width: auto;
    border-radius: 2px;
    text-align: center;
    box-sizing: border-box;
}

.switch-list {
    display: inline-block;
    background-color: #dfe4e6;
}

    .switch-list:hover,
    .switch-list:focus {
        background-color: #ccc;
    }

.ui-menu-icon.ui-icon {
    background-position-x: -36px;
}

.button.white.open-filter-settings,
.button.white.create-filter {
    float: left;
    margin-left: -1px;
    border-radius: 0;
    background-image: url(/Content/Images/ic_settings_grey_24dp_1x.png);
    background-repeat: no-repeat;
    background-position: center center;
    background-size: 60%;
    min-width: 36px;
    min-height: 36px;
    box-sizing: border-box;
    border: solid 1px #ccc
}

.button.white.open-filter-settings {
    border-radius: 0;
}

.button.white.create-filter {
    background-image: url(/Content/Images/ic_plus_grey_24dp_1x.png);
    background-size: auto;
}

.frontEnd input.filter-textbox {
    width: 250px;
    border: solid 1px #ccc;
    float: left;
    border-radius: 0 !important;
    padding: 8px 72px 8px 16px !important;
    box-sizing: border-box;
    margin: 0;
}

.frontEnd input.subject-autocomplete {
    width: 250px;
    border: solid 1px #ccc;
    float: left;
    border-radius: 0 !important;
    padding: 8px 72px 8px 16px !important;
    box-sizing: border-box;
    margin: 0 0 4px 0;
}

.button.white.run-search-grid {
    float: left;
    margin-left: -1px;
    border-radius: 0;
    background-image: url(/Content/Images/ic_search_black_24dp_1x.png);
    background-repeat: no-repeat;
    background-position: center center;
    min-width: 36px;
    min-height: 36px;
    box-sizing: border-box;
    border: solid 1px #ccc
}

.search-grid-textbox,
.frontEnd input.search-grid-textbox {
    width: 250px;
    -webkit-transition: width .5s ease-in-out;
    -moz-transition: width .5s ease-in-out;
    -o-transition: width .5s ease-in-out;
    transition: width .5s ease-in-out;
    border: solid 1px #ccc;
    float: left;
    border-radius: 0;
    padding: 8px 16px;
    box-sizing: border-box;
    margin: 0;
}

    .search-grid-textbox:focus,
    .frontEnd input.search-grid-textbox:focus {
        width: 300px;
    }


.clear-search-grid,
.clear-filter,
.clear-filters,
.apply-filter,
.remove-item {
    float: left;
    background: transparent url(/Content/Images/delete.png) no-repeat center center;
    background-size: 25%;
    width: 36px;
    padding: 0;
    min-width: initial;
    margin-left: -36px;
    display: none;
    min-height: 34px;
    box-sizing: border-box;
    margin-top: 1px;
    text-decoration: none;
}

.apply-filter {
    margin-left: -72px;
    background-image: none;
    padding-top: 8px;
    padding-top: 9px;
    padding-left: 11px;
}

    .apply-filter:hover,
    .apply-filter:focus,
    .clear-filter:hover,
    .clear-filter:focus {
        background-color: #f7f7f7;
        text-decoration: none;
    }

    .apply-filter::before {
        font: normal 12px DXIcons;
        content: "\f050";
    }

.clear-filters,
.remove-item {
    float: none;
    background-size: 60%;
    width: auto;
    margin-left: auto;
    min-height: 18px;
}

.dx-datagrid-filter-row .clear-filters {
    height: 18px;
    background-size: 40%;
}

.search::-ms-clear {
    display: none;
}

.support-custom-control .checkmark:after {
    content: "";
    position: absolute;
    display: none;
}

/*
.radio-container {
    float: left;
    position: relative;
    -webkit-user-select: none;
    -moz-user-select: none;
    -ms-user-select: none;
    user-select: none;
}

    .radio-container input {
        position: absolute;
        opacity: 0;
        width: 0;
        height: 0;
        box-sizing: border-box;
    }

    .radio-container .checkmark {
        position: absolute;
        top: 0;
        left: 0;
        height: 24px;
        width: 24px;
        background-color: #fff;
        border: solid 1px #dfe4e6;
        border-radius: 50%;
        box-sizing: border-box;
    }

    .radio-container:focus input ~ .checkmark,
    .radio-container:hover input ~ .checkmark {
        border: solid 1px #ccc;
    }

    .radio-container input:checked ~ .checkmark {
        border: solid 1px #005587;
    }

.radio-container input:checked ~ .checkmark:after {
    display: block;
}

.radio-container .checkmark:after {
    top: 4px;
    left: 4px;
    width: 14px;
    height: 14px;
    border-radius: 50%;
    background: #aaa;
    background: linear-gradient(-45deg, #005587, #4d69be);
}
    */

.support-custom-control .check-container {
    display: inline-block;
    position: relative;
    -webkit-user-select: none;
    -moz-user-select: none;
    -ms-user-select: none;
    user-select: none;
    height: 18px;
    width: 18px;
}

    .support-custom-control .check-container input {
        position: absolute;
        opacity: 0;
        width: 0;
        height: 0;
        box-sizing: border-box;
    }

    .support-custom-control .check-container .checkmark {
        position: absolute;
        top: 0;
        left: 0;
        height: 18px;
        width: 18px;
        background-color: #fff;
        border: solid 1px #ccc;
        border-radius: 0;
        box-sizing: border-box;
    }

        .support-custom-control .check-container .checkmark.checkmark-sdv {
            height: 21px;
            width: 21px;
        }

    .support-custom-control .check-container input:disabled ~ .checkmark,
    .support-custom-control .check-container:focus input:disabled ~ .checkmark,
    .support-custom-control .check-container:hover input:disabled ~ .checkmark {
        border: solid 1px #ccc;
        background: #dfe4e6;
    }


    .support-custom-control .check-container:focus input ~ .checkmark,
    .support-custom-control .check-container:hover input ~ .checkmark {
        border: solid 1px #aaa;
    }

    .support-custom-control .check-container input:checked ~ .checkmark {
        border: solid 1px #005587;
    }

        .support-custom-control .check-container input:checked ~ .checkmark:after {
            display: block;
        }

    .support-custom-control .check-container .checkmark:after {
        top: 0;
        left: 5px;
        width: 5px;
        height: 11px;
        border-style: solid;
        border-color: #005587;
        border-width: 0 2px 2px 0;
        -webkit-transform: rotate(45deg);
        -ms-transform: rotate(45deg);
        transform: rotate(45deg);
    }

    .support-custom-control .check-container .checkmark.checkmark-sdv:after {
        top: 0;
        left: 0;
        width: 19px;
        height: 19px;
        border-style: none;
        border-width: 0;
        -webkit-transform: none;
        -ms-transform: none;
        transform: none;
        color: #fff;
        background-color: #005587;
        font-family: NotoSansRegular;
        font-size: 9px;
        content: "SDV";
        box-sizing: border-box;
        padding: 3px 0 0 1px;
    }

    .support-custom-control .check-container .checkmark.checkmark-sdv.invalid-sdv {
        color: #fff;
        background-color: rgba(255, 0, 0, .25);
        border-color: red;
    }










.dynamic-check-container,
.dynamic-radio-container {
    display: inline-block;
    position: relative;
    -webkit-user-select: none;
    -moz-user-select: none;
    -ms-user-select: none;
    user-select: none;
    height: 13px;
    width: 13px;
}

    .dynamic-check-container input,
    .dynamic-radio-container input {
        position: absolute;
        opacity: 0;
        width: 0;
        height: 0;
        box-sizing: border-box;
    }

    .dynamic-check-container .checkmark,
    .dynamic-radio-container .checkmark {
        position: absolute;
        top: 0;
        left: 0;
        height: 13px;
        width: 13px;
        background-color: #fff;
        border: solid 1px #ccc;
        border-radius: 0;
        box-sizing: border-box;
    }

    .dynamic-radio-container .checkmark {
        border-radius: 7px;
    }

    .dynamic-check-container input:disabled ~ .checkmark,
    .dynamic-check-container:focus input:disabled ~ .checkmark,
    .dynamic-check-container:hover input:disabled ~ .checkmark,
    .dynamic-radio-container input:disabled ~ .checkmark,
    .dynamic-radio-container:focus input:disabled ~ .checkmark,
    .dynamic-radio-container:hover input:disabled ~ .checkmark {
        border: solid 1px #dfe4e6;
        background: #dfe4e6;
    }


    .dynamic-check-container:focus input ~ .checkmark,
    .dynamic-check-container:hover input ~ .checkmark,
    .dynamic-radio-container:focus input ~ .checkmark,
    .dynamic-radio-container:hover input ~ .checkmark {
        border: solid 1px #aaa;
    }

    .dynamic-check-container input:checked ~ .checkmark,
    .dynamic-radio-container input:checked ~ .checkmark {
        border: solid 1px #005587;
    }

        .dynamic-check-container input:checked ~ .checkmark:after,
        .dynamic-radio-container input:checked ~ .checkmark:after {
            display: block;
        }

    .dynamic-check-container .checkmark:after {
        top: 0px;
        left: 3px;
        width: 3px;
        height: 7px;
        border-style: solid;
        border-color: #005587;
        border-width: 0 2px 2px 0;
        -webkit-transform: rotate(45deg);
        -ms-transform: rotate(45deg);
        transform: rotate(45deg);
    }

    .dynamic-radio-container .checkmark:after {
        top: 2px;
        left: 2px;
        width: 7px;
        height: 7px;
        border-style: solid;
        border-color: #005587;
        border-width: 1px;
        box-sizing: border-box;
        border-radius: 3px;
        background: #005587;
    }



.ui-widget input,
.ui-widget select,
.ui-widget textarea,
.ui-widget button {
    font-family: inherit
}

.trumbowyg-editor p, .draggableControl p {
    margin: 0;
}

.trumbowyg-box .trumbowyg-removeformat-button svg {
    fill: red;
}

.trumbowyg-modal-box label {
    padding: 0 !important;
    height: auto;
}

    .trumbowyg-modal-box label .trumbowyg-input-infos {
        display: none;
    }

    .trumbowyg-modal-box label input {
        position: initial;
        margin-bottom: 10px
    }

.form .body textarea.trumbowyg-textarea {
    border: none 0;
    min-height: 151px;
}

.trumbowyg-modal-box .trumbowyg-modal-title {
    text-align: left;
    font-size: 1.2em;
    font-weight: normal;
    color: #808080;
    padding: 16px;
    background: #fff;
}

.ui-widget-content a.help-bar-button,
.help-bar-button,
.help-bar-button-dll,
.clear-statement-button,
.copy-button,
.paste-button {
    float: right;
    padding: 8px 0;
    width: 34px;
    box-sizing: border-box;
    margin-top: -36px;
    margin-right: -35px;
    border-radius: 0;
    background: #7cc576;
    color: #fff;
    text-align: center;
    text-decoration: none;
}

.copy-button,
.paste-button {
    background: #aaa;
}

.clear-statement-button {
    background: red;
}

    .clear-statement-button:hover,
    .clear-statement-button:focus {
        text-decoration: none;
    }

.help-bar-button-dll {
    position: relative;
    margin-right: -35px;
}

.help-bar-button:hover,
.help-bar-button:focus {
    text-decoration: none;
    background: #76bb70;
}

.help-bar-panel {
    margin: 4px 0 0 0;
    padding: 8px 24px 8px 24px;
    background: #7cc576;
    color: #fff;
    text-align: justify;
    border-radius: 0 4px 4px 4px;
    max-height: 200px;
    overflow-y: auto
}

    .help-bar-panel ul {
        list-style: disc
    }

    .help-bar-panel sup {
        padding: 0 4px 1px 4px;
        background: rgba(255, 255, 255, .5);
        color: #7cc576;
    }

.drawbox {
    background-image: url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAIAAAACCAYAAABytg0kAAAAGXRFWHRTb2Z0d2FyZQBBZG9iZSBJbWFnZVJlYWR5ccllPAAAABZJREFUeNpi2r9//38gYGAEESAAEGAAasgJOgzOKCoAAAAASUVORK5CYII=);
}

    .drawbox[readonly] {
        background: #fbfbfb;
    }

.container-preview-canvas {
    border: solid 1px #dfe4e6;
    border-radius: 0;
    box-sizing: border-box;
    position: relative;
    padding: 1px;
    margin-bottom: 1px;
}

.navigation-preview-canvas-pdf {
    height: 34px;
    background: rgba(255, 255, 255, .8);
    display: none;
    position: absolute;
    bottom: 1px;
    left: 1px;
    right: 1px;
    border-radius: 0;
}

.container-preview-canvas:hover .navigation-preview-canvas-pdf,
.container-preview-canvas:focus .navigation-preview-canvas-pdf {
    display: block
}

.dx-widget,
.dx-scheduler-time-panel,
.dx-scheduler-header-panel {
    font-size: inherit !important;
}

.dx-datagrid .dx-texteditor-input {
    border: none 0;
}

.grid-context-menu {
    display: block;
    text-align: center;
    padding: 2px 0;
    text-decoration: none;
}

    .grid-context-menu svg {
        fill: #005587;
        display: block;
        width: 20px;
        height: 20px;
    }

    .grid-context-menu:hover,
    .grid-context-menu:focus {
        color: #344044;
        text-decoration: none;
        background: rgba(0, 0, 0, .05);
        border-radius: 12px;
    }

        .grid-context-menu:hover svg,
        .grid-context-menu:focus svg {
            fill: #344044;
        }

.contextMenu svg,
.contextMenu svg {
    fill: #005587;
    display: block;
}

.contextMenu:hover,
.contextMenu:focus {
}

    .contextMenu:hover svg,
    .contextMenu:focus svg {
        fill: #344044;
        background: rgba(0, 0, 0, .05);
        border-radius: 12px;
    }


.formatDate {
}

.timepicker-now,
.datepicker-now,
.datetimepicker-now {
    float: right;
    border-radius: 0;
    border: none 0;
    min-height: 34px;
    min-width: 34px;
    margin-top: -35px;
    margin-right: 1px;
    background-color: #fff;
    padding: 8px;
}

    .ui-datepicker-trigger:disabled,
    .ui-datepicker-trigger:disabled:hover,
    .ui-datepicker-trigger:disabled:focus,
    .timepicker-now:disabled,
    .timepicker-now:disabled:hover,
    .timepicker-now:disabled:focus,
    .datepicker-now:disabled,
    .datepicker-now:disabled:hover,
    .datepicker-now:disabled:focus,
    .datetimepicker-now:disabled,
    .datetimepicker-now:disabled:hover,
    .datetimepicker-now:disabled:focus {
        background-color: transparent;
        cursor: default;
    }

        .ui-datepicker-trigger:disabled svg,
        .ui-datepicker-trigger:disabled:hover svg,
        .ui-datepicker-trigger:disabled:focus svg {
            stroke: #aaa;
        }

        .timepicker-now:disabled svg,
        .timepicker-now:disabled:hover svg,
        .timepicker-now:disabled:focus svg,
        .datepicker-now:disabled svg,
        .datepicker-now:disabled:hover svg,
        .datepicker-now:disabled:focus svg,
        .datetimepicker-now:disabled svg,
        .datetimepicker-now:disabled:hover svg,
        .datetimepicker-now:disabled:focus svg {
            stroke: #aaa;
            fill: #aaa;
        }

.ui-datepicker-trigger svg {
    stroke: #005587;
    stroke-width: 1px;
    fill: none;
    display: block;
    width: 18px;
    height: 18px;
}

.timepicker-now svg,
.datepicker-now svg,
.datetimepicker-now svg {
    stroke: #005587;
    stroke-width: 1px;
    fill: #005587;
    display: block;
    width: 18px;
    height: 18px;
}

.ui-datepicker-trigger:hover svg,
.ui-datepicker-trigger:focus svg {
    stroke: #000;
}

.timepicker-now:hover svg,
.timepicker-now:focus svg,
.datepicker-now:hover svg,
.datepicker-now:focus svg,
.datetimepicker-now:hover svg,
.datetimepicker-now:focus svg {
    stroke: #000;
    fill: #000;
}

.timepicker-now:hover,
.timepicker-now:focus,
.datepicker-now:hover,
.datepicker-now:focus,
.datetimepicker-now:hover,
.datetimepicker-now:focus {
    color: #344044;
    background-color: #f5f5f5;
    border: none 0 !important;
}

.ui-datepicker-trigger {
    width: 34px;
    height: 34px;
    border: none 0;
    float: right;
    margin-top: -35px;
    margin-right: 1px;
    border-radius: 0;
    box-sizing: border-box;
    background-color: #fff;
    color: #555;
    padding: 8px;
}

    .ui-datepicker-trigger:hover,
    .ui-datepicker-trigger:focus {
        color: #344044;
        background-color: #f5f5f5;
    }

.ui-datepicker-trigger {
    margin-right: 36px;
}
/*
[class="ui-datepicker-trigger"]:before {
    font: normal 18px DXIcons;
    content: "\f026";
}

*/

.side-filters {
    float: right;
    margin-right: -30px;
    margin-top: 46px;
    height: 0;
    overflow: visible
}

a.side-filter {
    text-orientation: mixed;
    writing-mode: vertical-rl;
    padding: 12px 8px;
    min-width: 18px;
    box-sizing: border-box;
    border-radius: 0;
    color: #fff;
    background-color: #005587;
    display: block;
    margin-bottom: 1px;
    white-space: nowrap;
}

@media screen and (-ms-high-contrast: active), (-ms-high-contrast: none) {
    a.side-filter {
        writing-mode: tb-rl;
    }

    .question-modal-popup-sidebar-switcher {
        writing-mode: tb-rl;
    }
}

a.side-filter.expanded,
a.side-filter.expanded:hover,
a.side-filter.expanded:focus {
    background: #fff;
    color: #005587;
    box-shadow: 0 1px 5px rgba(0,0,0,.2);
}

a.side-filter:hover,
a.side-filter:focus {
    background-color: #344044;
    text-decoration: none
}

.ui-datepicker-month,
.ui-datepicker-year {
    border-color: #ccc;
}

.ui-datepicker .ui-datepicker-title select {
    margin: 10px 2px 0 2px;
    padding: 4px 6px;
}

.tp-hrs-cont {
    border-left: solid 1px #fff;
    border-bottom: solid 1px #fff;
    background: #f6f6f6;
    min-width: 36px;
    min-height: 30px;
}

    .tp-hrs-cont a {
        display: block;
        padding: 6px 9px;
        min-width: 36px;
        min-height: 30px;
        box-sizing: border-box;
        text-decoration: none;
        text-align: right;
        color: #454545;
    }

        .tp-hrs-cont a:hover,
        .tp-hrs-cont a:focus {
            background: #eee;
        }

        .tp-hrs-cont a.selected {
            background: #005587;
            color: #fff
        }

.open-question-help {
    float: left;
    width: 20px;
    height: 20px;
    background: transparent url(/Content/Images/ic_help_black_24dp_1x.png) no-repeat center center;
    margin-right: 4px;
    background-size: 24px;
}

.open-notes {
    float: left;
    width: 20px;
    height: 20px;
    background: transparent url(/Content/Images/ic_message_black_24dp_1x.png) no-repeat center center;
    margin-right: 4px;
    background-size: 24px;
}

.control-builder-tabs {
    margin: 0;
    padding: 0;
    list-style-type: none;
    user-select: none;
    overflow: auto;
}

    .control-builder-tabs > li {
        float: left;
    }

        .control-builder-tabs > li:first-child span,
        .control-builder-tabs > li:last-child span {
            padding: 8px 12px;
            width: 36px;
            /*border: solid 1px transparent;*/
            /*border-bottom: solid 1px #005587;*/
            /*border-right: solid 1px #005587;*/
            display: block;
            box-sizing: border-box
        }

        .control-builder-tabs > li:last-child span {
            width: auto;
            border-right: none 0;
        }

        .control-builder-tabs > li > a {
            padding: 8px 12px;
            display: block;
            text-decoration: none;
            border-top: solid 2px #eee;
            background: #eee
        }

        .control-builder-tabs > li:not(:first-child) > a {
            /*border-left: none 0;*/
        }

            .control-builder-tabs > li:not(:first-child) > a:not(.selected):not(.add-control-builder-tab):hover,
            .control-builder-tabs > li:not(:first-child) > a:not(.selected):not(.add-control-builder-tab):focus {
                /*border: solid 1px #344044;*/
                color: #344044;
                text-decoration: none;
                background: rgba(52, 64, 68, .1);
                border-top-color: rgba(52, 64, 68, 0);
            }

        .control-builder-tabs > li > a.selected {
            /*border-bottom: solid 1px #fff;*/
            background-color: #fff;
            /*border-radius: 4px 4px 0 0;*/
            /*box-shadow: 0px -3px 3px 0px rgba(0, 0, 0, .05);*/
            border-top: solid 2px #005587;
        }

.crf-tabs {
    margin: 0;
    padding: 0;
    list-style-type: none;
    user-select: none;
}

    .crf-tabs > li {
        float: left;
    }

        .crf-tabs > li:first-child span,
        .crf-tabs > li:last-child span {
            padding: 8px 12px;
            width: 36px;
            display: block;
            box-sizing: border-box
        }

        .crf-tabs > li:last-child span {
            width: auto;
            border-right: none 0;
        }

        .crf-tabs > li > div {
            padding: 8px 12px;
            display: block;
            text-decoration: none;
            border-top: solid 2px #eee;
            background: #eee;
            overflow: unset;
            cursor: pointer;
        }

        .crf-tabs > li:not(:first-child) > div:not(.selected):hover,
        .crf-tabs > li:not(:first-child) > div:not(.selected):focus {
            color: #344044;
            text-decoration: none;
            background: rgba(52, 64, 68, .1);
            border-top-color: rgba(52, 64, 68, 0);
        }

        .crf-tabs > li > div.selected.forms {
            background-color: #fff;
            border-top: solid 2px #3cb878;
        }

        .crf-tabs > li > div.selected.subforms {
            background-color: #fff;
            border-top: solid 2px #1cbbb4;
        }

        .crf-tabs > li > div.selected.direct-forms {
            background-color: #fff;
            border-top: solid 2px #acd373;
        }

        .crf-tabs > li > div.selected.views {
            background-color: #fff;
            border-top: solid 2px #a864a8;
        }

        .crf-tabs > li > div.selected.econsent {
            background-color: #fff;
            border-top: solid 2px #7da7d9;
        }

div[data-tab-index] {
    margin: 0 0 10px 0;
    padding: 20px 40px 40px 0;
    margin: 0;
    background: #fff;
    /*float: left;*/
    box-sizing: content-box;
    overflow: auto;
}

td:has(> .delete-class) {
    vertical-align: middle !important;
}

.dynamic-form-container div[data-tab-index],
#toArea.preview div[data-tab-index] {
    margin: 0;
    padding: 0;
    background: #fff;
}

.timebarpicker {
    padding: 0;
    box-sizing: border-box;
    position: absolute;
    font-size: .9em;
    z-index: 2147483647;
    background: #fff;
    overflow: auto;
    box-shadow: 0 4px 6px rgba(0,0,0,.2);
}

.view-control {
    padding: 0;
    margin: 0;
    display: block;
    border: dotted 1px #dfe4e6;
    background: #fbfbfb;
    border-radius: 0;
    overflow: auto;
    box-sizing: border-box;
}

.dx-overlay-wrapper {
    z-index: 2147483647 !important;
}

.button.open-uploader {
    position: absolute;
    right: 3px;
    top: 3px;
    border-radius: 0;
    background-color: #fff;
    width: 64px;
    box-sizing: border-box;
    float: right;
    min-width: 0;
    padding: 5px;
    border-color: #dfe4e6;
}

.highlight-form input.highlight,
.highlight-form select.highlight,
.highlight-form textarea.highlight,
.highlight-form span.highlight,div.highlight {
    border-color: orange !important;
    background: rgba(255, 165, 00, .25) !important
}

.highlight-form select.highlight option {
        background-color: #fff
    }

.highlight-form canvas.highlight {
    background-color: rgba(255, 165, 00, .1) !important
}

.highlight-form a.highlight {
    border-color: orange !important;
    color: #dd8f00;
    border-bottom-color: orange !important;
}

.highlight-form a.selected.highlight {
    border-color: orange !important;
    color: #dd8f00;
    border-bottom-color: #fff !important;
}

.highlight-form .dynamic-check-container input.highlight,
.highlight-form .dynamic-check-container input.highlight ~ .checkmark,
.highlight-form .dynamic-check-container input.highlight:checked ~ .checkmark,
.highlight-form .dynamic-check-container input.highlight:checked ~ .checkmark:after,
.highlight-form .dynamic-radio-container input.highlight,
.highlight-form .dynamic-radio-container input.highlight ~ .checkmark,
.highlight-form .dynamic-radio-container input.highlight:checked ~ .checkmark,
.highlight-form .dynamic-radio-container input.highlight:checked ~ .checkmark:after {
    border-color: orange !important;
    background: rgba(255, 165, 00, .25) !important;
}

.highlight-form .dynamic-radio-container input.highlight:checked ~ .checkmark:after {
        background: orange !important;
}

.highlight-form span.highlight {
    border-color: orange !important;
    background: #ffe8bf !important
}

.highlight-form .switch-list.highlight {
    /*background: rgba(255, 165, 00, .25) !important;*/
}

.highlight-form .slider-control.highlight {
    background: linear-gradient(to bottom, #fff, #fff 11px, orange 12px, orange 13px, #fff 14px);
}

.question-modal-popup-sidebar-switcher,
.barcode-modal-popup-sidebar-switcher {
    padding: 16px 8px;
    text-orientation: mixed;
    writing-mode: vertical-rl;
    box-sizing: border-box;
    text-decoration: none;
    min-width: 35px;
    display: block;
    border-bottom: solid 1px #f0f0f0
}

    .question-modal-popup-sidebar-switcher:hover,
    .question-modal-popup-sidebar-switcher:focus,
    .barcode-modal-popup-sidebar-switcher:hover,
    .barcode-modal-popup-sidebar-switcher:focus {
        background: #f0f0f0;
        background: rgba(0, 0, 0, .05);
        color: #344044;
        text-decoration: none
    }

.dynamic-form-dialog {
    top: 70px;
    left: 50%;
    position: absolute;
    background: #fff;
    z-index: 9999;
    /*max-width: 1476px*/
    box-sizing: border-box;
}

.side-filter-container {
    min-width: 0;
    min-height: 0;
    float: right;
    margin-top: 0;
    position: relative
}

.side-filter-panel {
    position: absolute;
    width: 360px;
    min-height: 350px;
    background: #fff;
    right: -10px;
    z-index: 99999;
    box-shadow: -3px 0 5px rgba(0, 0, 0, .1);
    display: none;
    box-sizing: border-box;
    padding: 0;
    overflow-y: auto
}

.sidebar-tab-container {
    background: #fff;
    position: absolute;
    right: 0;
    top: 0;
    bottom: 0;
    z-index: 999;
    min-width: 34px;
    border-left: solid 1px #f0f0f0;
    box-sizing: border-box;
    /*box-shadow: -4px 0 4px 0 rgba(0, 0, 0, .1)*/
}

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

.tagStatementInput,
.tag-statement,
.action-target-tag-statement,
.target-tag-statement {
    height: 139px;
}

.grey-description {
    display: block;
    color: #aaa;
    font-size: .85em;
    text-align: left;
    white-space: normal;
}

.black-sup-status {
    background: #bbb;
    color: #fff;
    padding: 0 2px;
    margin-left: 3px;
    text-transform: uppercase;
    font-size: .7em;
    border-radius: 2px 0 2px 0
}

.blink-sup-status {
    animation: 1s blinker-sup-status ease-in infinite;
    animation-delay: 2s;
    animation-iteration-count: 3;
}

.details-block {
    float: left;
    padding: 10px 10px 10px 15px;
    background-image: radial-gradient(#ddd 1px, transparent 0);
    background-size: 3px 3px;
    background-position: -1px -1px;
    margin: 5px;
    width: 250px;
    height: 250px;
    box-sizing: border-box;
    overflow: hidden;
}

    .details-block .black-sup-status {
        float: right
    }

    .details-block .details-name {
        font-size: 1.2em
    }

    .details-block .delete-date {
        color: red;
        font-size: .85em;
    }

    .details-block .edit-button {
        color: white;
        text-decoration: none;
        float: right;
        min-width: auto;
        margin: 0 0 5px 0;
        padding: 0;
        width: 34px;
        height: 34px;
        background-color: #005587;
        border-radius: 20px;
    }

        .details-block .edit-button::before {
            font: normal 17px DXIcons;
            content: "\f023";
            display: block;
            margin: 7px;
        }

    .details-block .grid-context-menu {
        float: right;
        min-width: auto;
        margin: 0;
        padding: 0;
        width: 34px;
        height: 34px;
        background-color: #005587;
        border-radius: 30px;
        clear: right;
    }

        .details-block .grid-context-menu:hover,
        .details-block .grid-context-menu:focus,
        .details-block .edit-button:hover,
        .details-block .edit-button:focus {
            background-color: #344044;
        }

        .details-block .grid-context-menu svg {
            margin: 5px;
            fill: white;
        }

        .details-block .grid-context-menu:hover svg,
        .details-block .grid-context-menu:focus svg {
            margin: 5px;
            fill: white;
        }

    .details-block .run-update-button {
        color: #005587;
        text-decoration: none;
        margin-left: 5px;
        background-color: white;
        padding: 4px;
        border: solid 1px #005587;
        border-radius: 20px;
    }

        .details-block .run-update-button:hover,
        .details-block .run-update-button:focus {
            color: #344044;
            border-color: #344044;
        }

.grid-edit-button {
    color: #005587;
    text-decoration: none;
    float: right;
    min-width: auto;
    margin: 0;
    padding: 0;
    width: 24px;
    height: 24px;
}

    .grid-edit-button::before {
        font: normal 13px DXIcons;
        content: "\f023";
        display: block;
        margin: 5px 0 0 2px;
    }

    .grid-edit-button:hover,
    .grid-edit-button:focus {
        color: #344044;
        text-decoration: none;
        background: rgba(0, 0, 0, .05);
        border-radius: 12px;
    }

.dx-treelist-content .dx-data-row .grid-custom-hotlink .grid-edit-button,
.dx-treelist-content .dx-column-lines .grid-custom-hotlink .grid-edit-button,
.dx-datagrid-rowsview .dx-data-row .grid-custom-hotlink .grid-edit-button {
    display: none;
}

.dx-treelist-content .dx-data-row:hover .grid-custom-hotlink .grid-edit-button,
.dx-treelist-content .dx-data-row:focus .grid-custom-hotlink .grid-edit-button,
.dx-treelist-headers .grid-custom-hotlink:hover .grid-edit-button,
.dx-treelist-headers .grid-custom-hotlink:focus .grid-edit-button,
.dx-datagrid-rowsview .dx-data-row:hover .grid-custom-hotlink .grid-edit-button,
.dx-datagrid-rowsview .dx-data-row:focus .grid-custom-hotlink .grid-edit-button {
    display: block;
}

.dx-treelist-headers .grid-custom-hotlink .grey-description,
.dx-treelist-content .grid-custom-hotlink .grey-description {
    display: unset;
}

.dx-datagrid-rowsview .grid-custom-context-menu,
.dx-datagrid-rowsview .grid-custom-hotlink {
    padding: 4px !important;
}

    .dx-datagrid-rowsview .grid-custom-context-menu .grid-context-menu {
        padding: 3px !important;
    }

    .dx-datagrid-rowsview .grid-custom-hotlink a:not(.grid-edit-button) {
        padding: 3px !important;
        display: block;
        overflow-x: hidden;
        text-overflow: ellipsis;
    }

.dx-treelist-content .grid-custom-hotlink .dx-treelist-text-content > div > a {
    display: block;
    overflow-x: hidden;
    text-overflow: ellipsis;
}

.dx-treelist-content .grid-custom-hotlink .dx-treelist-text-content > div > sup {
    float: right;
    margin-right: 3px;
}

.dx-datagrid-rowsview .dx-data-row:hover .grid-custom-hotlink a:not(.grid-edit-button),
.dx-datagrid-rowsview .dx-data-row:focus .grid-custom-hotlink a:not(.grid-edit-button) {
    margin-right: 24px;
}
.grid-column-button-code::before {
    content: "\f009";
}

.grid-column-button-approve-code::before {
    content: "\f15b";
}

.grid-column-button-reject-code::before {
    content: "\f15c";
}
@keyframes blinker-sup-status {
    50% {
        opacity: .25;
    }
}

.codeTerms, .codeTerms form, .codeTerms ul li {
    height: 100%
}

.codeTerms ul, .codeTerms .termsContent {
    height: 90%
}

.tag-statement[readonly] + div {
    background: #fafafa;
}
.tag-statement[readonly] + #VisibilityStatement_f_expression_statement_tagsinput > #VisibilityStatement_f_expression_statement_addTag > input {
    border: 0
}

.addItem[disabled], .addItem[disabled] > svg, .addItem[disabled] > sup {
    color: #aaa !important;
    fill: #aaa !important;
    pointer-events: none;
}

.tagsinput[readonly] {
    background: #fafafa;
}

.tagsinput[readonly] > input {
        border: 0
}

.disable-action {
    pointer-events: none;
    cursor: default;
    opacity: 0.6;
}