@font-face {
    font-family: 'redhatdisplay-regular';
    src: url('../fonts/red_hat_display/redhatdisplay-regular.ttf') format('truetype');
}

@font-face {
    font-family: Roboto;
    src: url('../fonts/ROBOTO-LIGHT.TTF') format('truetype');
}

@font-face {
    font-family: 'redhatdisplay-black';
    src: url('../fonts/red_hat_display/redhatdisplay-black.ttf') format('truetype');
}

@font-face {
    font-family: 'redhatdisplay-bold';
    src: url('../fonts/red_hat_display/redhatdisplay-bold.ttf') format('truetype');
}

@font-face {
    font-family: 'Century-Gothic';
    src: url('../fonts/CenturyGothic/GOTHIC.TTF') format('truetype');
}

@font-face {
    font-family: 'Century-Gothic-bold';
    src: url('../fonts/CenturyGothic/GOTHICB.TTF') format('truetype');
}

@font-face {
    font-family: 'Helvetica-Neue';
    src: url('../fonts/Helvetica Neue Bold Extended.ttf') format('truetype');
}

body {
    font-family: Century-Gothic, sans-serif;
    background-color: #fff; /*#202d5a;*/
}

h1, h2, h3 {
    font-family: Century-Gothic-bold;
}

.loginLogo {
    text-align: center;
    margin-bottom: 20px;
}

.logoDiv {
    float: left;
    margin: 10px 0 5px /*15px*/ 0;
}

.headerLogo {
    width: 220px;
}

.footerlogo {
    width: 75px;
}


.logoDiv .logoTxt {
    font-size: 16px /*20px*/;
    text-transform: Uppercase;
    text-decoration: none;
    /*margin: 0px 0 0 5px;*/
    position: relative;
    top: 20px;
    color: #b4142f;
}

.collapsible {
    background-color: rgba(0, 50, 95, 1);
    color: white;
    cursor: pointer;
    padding: 10px 10px 10px 20px;
    width: 100%;
    border: none;
    text-align: left;
    outline: none;
    font-size: 15px;
    font-weight: bolder;
}

    .collapsible:after {
        content: '\1401';
        font-size: 13px;
        color: #777;
        float: right;
        margin-left: 5px;
    }

    .collapsible:hover {
        background-color: rgba(0, 50, 95, 1);
    }

.active {
    background-color: rgba(0, 50, 95, 1);
    border-radius: 10px 10px 0px 0px;
}

    .active:after {
        content: "\1403";
    }

.collapsed {
    border-radius: 10px;
}

.headerCustomerName {
    color: #1fd5ff;
}

.content {
    padding: 10px;
    margin-bottom: 5px;
    border-radius: 0px 0px 10px 10px;
    display: block;
    overflow: hidden;
    color: whitesmoke;
    text-shadow: none !important;
}

#infoDiv {
    width: 1170px;
    margin-right: auto;
    margin-left: auto;
    margin-bottom: 5px;
}

#infoTextTitle {
    font-family: Century-Gothic;
    font-weight: 100;
    font-size: 16px /*18px*/;
}

#infoTextDiv {
    padding: 10px 20px;
    background-color: rgba(0, 50, 95, 1);
}

.custDiv {
    float: right;
    font-size: 14px /*18px*/;
    text-decoration: none;
    /*text-transform: uppercase;*/
    text-align: right;
}

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

        .custDiv ul li:nth-child(1) {
            font-size: 12px;
        }

        .custDiv ul li:nth-child(2) {
            margin-top: 30px /*37px*/;
        }

.navbar-brand {
    display: none;
}

    .navbar-brand .headerLogo {
        margin-top: -10px;
    }

.dx-menu-item-text {
    font-family: Century-Gothic-bold !important;
}

.navbar {
    font-family: Century-Gothic;
    /*background-image: linear-gradient(to bottom right, #1fd5ff, #00ffd4);*/
    background-size: contain;
    background-color: #fff !important;
    /*border-radius: 0px;*/
    /*border-top: 2px solid #d5d5d5;
    border-bottom: 6px solid #d5d5d5;*/
    width: 1170px;
    z-index: 999 !important;
    position: fixed !important;
    left: 50% !important;
    transform: translateX(-50%) !important;
}

/*.navbar-fixed-top {
    min-height: 80px;
}
.navbar-fixed-top .navbar-left {
    padding-top: 20px;
}

    .navbar-fixed-top .navbar-right {
        padding-top: 20px;
    }*/

.footer {
    margin: -15px -15px 0 -15px;
    color: #717c9e;
    padding: 10px;
    background-color: #00325F;
    border: 1px solid transparent;
}

    .footer .linkTitle {
        color: white; /*#337ab7*/
        font-family: Century-Gothic;
        margin-top: 4px;
        border-bottom: 1px solid #1fd5ff;
    }

    .footer ul {
        list-style: none;
    }

        .footer ul li a {
            text-decoration: none;
        }

    .footer .copyright {
        text-align: right;
    }

    .footer .contactDiv {
        padding-bottom: 5px;
    }

        .footer .contactDiv .headerRow h4 {
            margin: 2px;
        }

    .footer > div.contactDiv > table > tbody > tr > td {
        padding: 2px 20px;
    }

    .footer .contactDiv .descColumn {
        width: 110px;
    }

.jumbotron {
    background-color: #f9f9f9;
    border: 1px solid #d5d5d5;
}

    .jumbotron h2 {
        color: #202d5a; /*#337ab7*/
        font-weight: bold;
        font-family: Century-Gothic-bold;
    }

    .jumbotron p {
        font-family: Century-Gothic, sans-serif;
        color: #202d5a; /*#337ab7*/
        text-transform: none;
    }

.panel-heading {
    background-color: white !important;
    border: 0px none !important;
}

.panel-footer {
    background-color: white !important;
    border: 0px none !important;
}

.panel-heading h3 {
    background-color: white;
    color: #202d5a;
    text-transform: none;
    background-repeat: repeat-x;
    background-size: contain;
    border: 0px none !important;
    border-radius: 0px !important;
}

.panel {
    border-radius: 0px;
    border: 0px none !important;
    padding: 0 !important;
}

.form-container {
    padding: 20px !important;
    background-color: #fff;
}

.wideButton {
    width: 100% !important;
}

.navbar-inverse, .dx-submenu {
    border: 0;
    border-top: 2px solid #d4d4d3;
    border-bottom: 2px solid #d4d4d3;
}

.coinSetClass {
    margin: -28px -28px -28px 160px;
}

.detailRow {
    margin: -28px -28px -28px 120px;
}

.sealbagDetailForm {
    margin: -24px -24px -18px -28px;
    padding-left: 28px !important;
}

.loginBtn {
    width: 100%;
}



.dx-widget, .dx-datagrid, .dx-pivotgrid, .dx-box-item-content {
    font-family: Century-Gothic !important;
    font-size: 13px !important;
}

.dx-icon-edit, .dx-icon-trash {
    font-size: 18px !important;
}

.dxCenterText {
    vertical-align: middle !important;
}

.dx-toolbar-after {
    margin: 5px;
}

.dx-menu {
    margin-top: 21px;
    color: #333 !important;
}

.dx-submenu, .dx-context-menu-container-border {
    border: 0px !important;
}

.dx-menu-item {
    color: #202d5a !important;
    font-weight: bold;
    font-size: 14px;
    background-color: transparent /*#ab2f48*/ !important;
    border: 0px none !important;
}

    .dx-menu-item.dx-state-hover {
        color: #2983ff !important;
        background-color: transparent /*#ab2f48*/ !important;
        border: 0px none !important;
    }

.dx-menu-item-expanded {
    background-color: transparent !important;
    color: #333 !important;
    border: 0px none !important;
}

.dx-menu-item-active {
    color: #333 !important;
    background-color: #2c8bc1 !important;
    border: 0px none !important;
}

.dx-button-default {
    /*background-image: linear-gradient(to right, #1fd5ff, #00ffd4);*/
    background-color: #00325f !important;
    border: 0px none !important;
    border-radius: 10px;
    color: #fff !important;
    /*font-weight: bold;*/
    font-family: Century-Gothic-bold;
    transition: all 0.4s ease;
    text-decoration: none !important;
    opacity: 0.8;
}

    .dx-button-default:hover {
        color: white !important;
        opacity: 1;
    }

.dx-button-normal {
    border-radius: 10px;
}

    .dx-button-normal:hover {
        border-color: #1fd5ff !important;
    }

.dx-field-item-label-text {
    color: #202d5a; /*#337ab7*/
    font-weight: bold;
    font-family: Century-Gothic;
}

.dx-selection {
}

.form_rightAlign {
    text-align: right;
}

.order-dropdown, .dx-focused {
    padding-top: 5px !important;
    padding-bottom: 0px !important;
    padding-left: 0px !important;
    padding-right: 0px !important;
    outline: none !important;
}

    .order-dropdown.dx-selectbox-container {
        outline: none !important;
        border: 1px solid red !important;
    }

    .order-dropdown.dx-focused {
        outline: none !important;
        border: 1px solid red !important;
        box-shadow: 0 0 10px #719ECE !important;
    }

.hide-label > label.dx-field-item-label.dx-field-item-label-location-top {
    visibility: hidden;
}

.email-borders {
    border: 1px solid #111111;
    text-align: left;
    border-collapse: collapse;
    padding: 5px;
    background: #d7f6f6;
}

.email-field-right {
    text-align: right;
    padding: 5px;
}

/*------- button indicator ----------*/
#small-indicator, #medium-indicator, #large-indicator {
    vertical-align: middle;
    margin-right: 10px;
}

#button,
#button .dx-button-content {
    padding: 0;
}

    #button #button-indicator {
        height: 32px;
        width: 32px;
        display: inline-block;
        vertical-align: middle;
        margin-right: 5px;
    }

#messages > ul {
    list-style: none;
    padding-left: 0;
}

#toast {
    padding: 10px;
}

.dx-toast-message {
    white-space: pre-line;
    line-height: 200%;
    font-size: 16px;
}

.dx-toast-content {
    min-width: 600px;
    max-width: 1000px;
}

.dx-theme-ios7 #toast ul li {
    font-size: 16px;
}

.dx-theme-win10 #toast ul li {
    font-size: 15px;
}

.pettyCashGrid {
    padding: 5px 7px !important;
    vertical-align: middle !important;
}

.serialNumber {
    text-transform: uppercase;
}

.versionNumber {
    float: right;
    font-size: smaller;
    color: #fff;
    padding: 3px 10px 3px 10px;
    background-color: rgba(0, 50, 95, 0.4);
    border-radius: 2px;
    border: 1px solid #717c9e;
    text-shadow: 0px 0px 2px #000000;
}

.reminderDiv {
    margin-top: 10px;
    width: 1100px;
    border-radius: 10px;
    border: 1px solid #2983ff;
    padding: 10px 10px 10px 30px;
    color: #2983ff;
    background-color: white;
}

    .reminderDiv > span, .reminderDiv > div {
        font-size: 18px;
        font-weight: bolder;
    }

a, x-datagrid .dx-link, .dx-button .dx-icon {
    color: #2983ff !important;
}

#textBlock {
    font-family: Century-Gothic !important;
}

    #textBlock h5 {
        font-family: Century-Gothic-bold !important;
    }