/* Basic tags */
.body-container {
    max-width: 100%;
}

html {
    height: 100%;
}


/* Smaller font for Supplier Portal */
.dx-widget td {
    font-size: 12px !important;
}

.form-control {
    font-size: 12px !important;
}

.form-select {
    font-size: 12px !important;
}

.btn {
    font-size: 12px !important;
}
/* End of Small Font Size */

body {
    background-color: #363434;
    color: #505050;
    font-family: Helvetica, Arial, sans-serif;
    font-size: 12px;
    height: 100%;
    margin: 0;
    min-width: 720px;
}

#mainSection {
    margin-left: 35px;
    margin-right: 35px;
}

.body-content {
    margin: 0;
    padding: .5rem 2.15rem;
}

.form-group {
    margin-bottom: 1rem;
}

h2 {
    margin-top: 1em;
}

h4 {
    margin-top: 1em;
}

.p-4-no-top {
    padding-top: 0rem !important;
    padding-left: 1.5rem !important;
    padding-bottom: 1.5rem !important;
    padding-right: 1.5rem !important;
}

.py-3-no-top {

}

#frmMain {
    height: 100%;
}

input[type="text"], input[type="password"] {
    line-height: normal;
}

input[type="button"] {
    margin-top: 10rem;
}

/* Header area */
header {
    color: black;
    margin: 0;
    min-width: 720px;
    font-size: .8rem;
    width: 100%;
}

    header a {
        color: black;
        text-decoration: none;
    }

        header a:hover {
            color: black;
            text-decoration: none;
        }

#topBar {
    align-items: center;
    background-color: white;
    color: black;
    display: flex;
    height: 5rem;
    margin: 0;
    min-width: 720px;
    padding: 16px 80px 16px 55px;
}

#topLogo {
    height: 100%;
    object-fit: contain;
}

#loginBar {
    display: block;
    text-align: right;
    position: absolute;
    right: 3rem;
}

/*#topNavBar {
    padding: 1.5rem;
}*/

.nav-item {
    padding-right: 1rem;
}

.navbar {
    align-items: flex-start; /* Change this to center to align the menu items to center */
    /*background: url('../img/navbar_bg_triangle.png') no-repeat;*/
    background-color: #363434;
    border: 0;
    border-radius: 0;
    color: white;
    display: flex;
    flex-flow: column;
    height: 44px;
    padding: 0 0 0 3.25rem;
    text-align: left;
    z-index: 100;
}

    .navbar, .navbar div.dropdown-menu, .navbar div.dropdown-menu a:hover {
        background-color: #363434;
    }

.custom-toggler .navbar-toggler-icon {
    /* Changing the color of the navbar collapse button to fit the page design. */
    background-image: url("data:image/svg+xml;charset=utf8,%3Csvg viewBox='0 0 32 32' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath stroke='rgba(255,255,255, 1)' stroke-width='2' stroke-linecap='round' stroke-miterlimit='10' d='M4 8h24M4 16h24M4 24h24'/%3E%3C/svg%3E") !important;
}

.custom-toggler.navbar-toggler {
    border-color: white;
}

#topNavBar ul {
    background-color: #363434;
}

#topNavBar a {
    color: #C5C5C5;
}

    #topNavBar a:hover {
        text-decoration: underline;
    }

#topNavBar ul li {
    border-collapse: collapse;
    height: 50%;
    text-align: left;
    align-items: center;
}

.show li {
    padding-left: .75rem;
}

/* Main content */

#pageContainer {
    min-height: 100%;
    min-width: 720px;
    position: relative;
    padding-bottom: 0;
}

#breadCrumb {
    margin-bottom: 15px;
}

    #breadCrumb, #breadCrumb a {
        background: #F0F0F0;
        color: #505050;
        font-size: .75rem;
        padding: 0rem 2.15rem;
        text-align: left;
    }

        #breadCrumb a {
            text-decoration: none;
            padding: 0px;
        }

            #breadCrumb a:hover {
                text-decoration: underline;
            }

            #breadCrumb ol {
                display: none;
            }
/* Main content - Extra space for fixed footer */

/* centerInfo is only used for _CenterLayout */
.centerInfo {
    align-content: center;
    position: fixed;
}

.container {
    min-width: 100%;
    margin-bottom: 0;
}

.contentCard {
    min-height:45.5rem;
    height: 100%;
}

.title {
    font-size: 2rem;
    margin-top: 1rem;
    margin-bottom: 1.25rem;
}

#mainContent {
    padding: .5rem 2.15rem;
    margin: 0;
}

.errorLabel {
    color: #E60012;
    font-weight: bold;
}

#footerPadding {
    height: 3rem;
}

/* Footer */

/* pageFooter is modified from the original.  Original styles are commented out for now */
#pageFooter {
    background: #363434;
    bottom: 0;
    color: white;
    font-size: .7rem;
    /* height: 1.7rem; */
    height: 3.5rem;
    width: 100%;
    margin: auto;
    padding-top: .5rem;
    position: fixed;
    text-align: center;
    z-index: 99;
}

    #pageFooter a {
        color: #d9d9d9;
    }

        #pageFooter a:visited {
            color: #bfbfbf;
        }

        #pageFooter a:hover {
            color: #f2f2f2;
        }

/* Dropdown Menu */

li.dropdown {
    padding-right: 15px;
}

.dropdown-submenu {
    position: relative;
}

    .dropdown-submenu > .dropdown-menu {
        -webkit-border-radius: 0 6px 6px 6px;
        -moz-border-radius: 0 6px 6px 6px;
        border-radius: 0 6px 6px 6px;
    }

    .dropdown-submenu > a:after {
        display: block;
        content: " ";
        float: right;
        width: 0;
        height: 0;
        border-color: transparent;
        border-style: solid;
        border-width: 5px 5px 5px 5px;
        border-left-color: #cccccc;
        margin-top: 5px;
        margin-right: -10px;
    }

.dropdown-menu {
    min-width: 15rem !important;
}
    /* This CSS code below specifically controls the size of the navbar dropdown item font-size */
    .dropdown ul li {
    font-size: 13px;
}

/*Dev Express Grid Overload Styles*/
td a.btn {
    display: inline;
    font-size: inherit;
}

.DisplayBar {
    width: 100%;
    text-align: center;
}

[role=columnheader] {
    color: black;
    font-weight: 500;
}

/* Class used for icons in datagrid */
.gridIcon {
    font-size: 1.6rem !important;
    background-color: transparent !important;
}

/* Rotate element 90 degrees */
.rotate90 {
    -webkit-transform: rotate(90deg);
    -webkit-transform-origin: left top;
    -moz-transform: rotate(90deg);
    -moz-transform-origin: left top;
    -ms-transform: rotate(90deg);
    -ms-transform-origin: left top;
    -o-transform: rotate(90deg);
    -o-transform-origin: left top;
    transform: rotate(90deg);
    transform-origin: left top;
}

/* DataGrid Row Selection */
.dx-selection td {
    background-color: #FFFF9F !important;
}


.dx-selection td .error {
    background-color: #FCEBEB !important;
}


/* region Toast / Snackbar Notification */
#toast-notify {
    visibility: hidden;
    min-width: 15rem;
    max-width: 25rem;
    margin-left: 35%;
    text-align: center;
    border-radius: 0.5rem;
    padding: 1rem;
    position: fixed;
    z-index: 9999;
    /*left: 50%;*/
    top: 7.5rem;
    font-size: 0.75rem;
    opacity: 0.8;
}

    #toast-notify.show-toast {
        visibility: visible;
        -webkit-animation: fadein 0.5s, fadeout 0.5s 9.7s;
        animation: fadein 0.5s, fadeout 0.5s 9.7s;
    }

#toast-redirect-notify {
    visibility: hidden;
    min-width: 15rem;
    max-width: 25rem;
    margin-left: 35%;
    text-align: center;
    border-radius: 0.5rem;
    padding: 1rem;
    position: fixed;
    z-index: 9999;
    /*left: 50%;*/
    top: 7.5rem;
    font-size: 0.75rem;
    opacity: 0.8;
}

    #toast-redirect-notify.show-toast {
        visibility: visible;
        -webkit-animation: fadein 0.5s, fadeout 0.5s 9.7s;
        animation: fadein 0.5s, fadeout 0.5s 9.7s;
    }

@-webkit-keyframes fadein {
    from {
        top: 0;
        opacity: 0;
    }

    to {
        top: 30px;
        opacity: 1;
    }
}

@keyframes fadein {
    from {
        top: 0;
        opacity: 0;
    }

    to {
        top: 30px;
        opacity: 1;
    }
}

@-webkit-keyframes fadeout {
    from {
        top: 30px;
        opacity: 1;
    }

    to {
        top: 0;
        opacity: 0;
    }
}

@keyframes fadeout {
    from {
        top: 30px;
        opacity: 1;
    }

    to {
        top: 0;
        opacity: 0;
    }
}

.toast-none {
    visibility: hidden;
}

.toast-error {
    background-color: #d81a1a;
    color: #fff;
}

.toast-success {
    background-color: #379d00;
    color: #fff;
}

.toast-warning {
    background-color: #ffc500;
    color: #000;
}

.toast-information {
    background-color: #8894b5;
    color: #000;
}
.toast-javascript {
    visibility: hidden;
}

.toast-close-x {
    float: right;
    margin-top: -10px;
    margin-left: 10px;
    z-index: 9999;
}

/* endregion Snackbar / Toast Notification */

/* Maintenance Form Styles */

.asterisk {
    color: red;
}

/* END of Maintenance Form Styles */

/* Modal Style */

.modal-vertical-alignment {
    display: table;
    height: 100%;
    width: 100%;
    pointer-events: none; /* This makes sure that we can still click outside of the modal to close it */
}

.modal-vertical-align-center {
    /* To center vertically */
    display: table-cell;
    vertical-align: middle;
    pointer-events: none;
}

.modal-content {
    /* Bootstrap sets the size of the modal in the modal-dialog class, we need to inherit it */
    width: inherit;
    max-width: inherit;
    height: inherit;
    /* To center horizontally */
    margin: 0 auto;
    pointer-events: all;
}

.modal-no-top-padding {
    /* Cut the extra margin/padding off of the header on the Modal */
    padding-top: 0 !important;
    margin-top: 0 !important;
}

/* END of Modal Style */

/* Bootstrap Danger Button Override w/ 52nd Shade of Red */

.btn-danger {
    background-color: #E95D5D;
    margin-top: 0 !important; /* Fixes weird issue with button on some forms */
}

    .btn-danger:hover {
        background-color: #C94A4A;
        margin-top: 0 !important; /* Fixes weird issue with button on some forms */
    }

/* END of Bootstrap Danger Button Override */

/* Message Box Stylings */

/* COMMON MESSAGE BOX STYLINGS */
.messageBox {
    min-height: 4rem;
    margin-bottom: .5rem;
}

.iconBox {
    display: flex;
    justify-content: center;
    align-items: center;
}

.displayIcon {
    color: #FFFFFF;
    font-size: 2.25rem;
}

.messageArea {
    display: flex;
    align-items: center;
    color: #000000;
}

/* DISPLAY MESSAGE */
#displayBox {
    border: 3px solid #91DDF2;
    margin: 0;
    padding-left: 0;
    padding-right: 0;
}

#displayIconBox {
    background-color: #91DDF2;
}

#displayMessageBox {
    background-color: #91ddf230;
}

/* ERROR MESSAGE */
#errorBox {
    border: 3px solid #E95D5D;
    margin: 0;
    padding-left: 0;
    padding-right: 0;
}

#errorIconBox {
    background-color: #E95D5D;
}

#errorMessageBox {
    background-color: #e95d5d4a;
}


/* WARNING MESSAGE */
#warningBox {
    border: 3px solid #ffc000;
    margin: 0;
    padding-left: 0;
    padding-right: 0;
}

#warningIconBox {
    background-color: #ffc000;
}


#warningMessageBox {
    background-color: #ffc00085;
}

/* SUCCESS MESSAGE */
#successBox {
    border: 3px solid #7ed17e;
    margin: 0;
    padding-left: 0;
    padding-right: 0;
}

#successIconBox {
    background-color: #7ed17e;
}

#successMessageBox {
    background-color: #7ed17e47;
}

/* End of Message Box Stylings */

/* Data Grid & Datagrid control stylings */
.dx-header-row {
    background-color: #e1e1e1;
    border: 1px solid #bdbdbd !important;
}

.dx-checkbox-icon {
    border: solid 1px #a3a2a2 !important;
}

.dx-datagrid-headers .dx-datagrid-table .dx-row > td {
    border: 1px solid #bdbdbd !important;
}

.dx-datagrid-export-button .dx-icon-export-to::before {
    color: #217346 !important;
}

.dx-icon-xlsxfile {
    color: #217346 !important;
}

.dx-icon-exportselected {
    color: #217346 !important;
}

/* End of DataGrid Stylings */

/* #region Spinner  */
.modal-content.loading-spinner {
    background-color: transparent;
    border: none;
    height: auto;
}

.spinner-overrides {
    height: 10rem;
    width: 10rem;
    animation-duration: 2s;
}
/* #endregion Spinner  */

/* #region Tool Tip Text; Tooltip Text ; Hover Over Text ; Hoverover Text */

/* In your HTML, you will need to do something like this to utilize the tooltip: 
    <div class="tool-tip">
        {Here would be the text/icon/whatever to activate the hover over. Don't include the curly braces}
        <span class="tool-tip-text">
            {Here would be the text you want to display in the tooltip. Don't include curly braces}
        </span>
    </div>
*/

.tool-tip {
    position: relative;
    display: inline-block;
    border-bottom: 1px black;
}

    .tool-tip .tool-tip-text {
        visibility: hidden;
        /*width: 120px;*/
        background-color: #b6cffc;
        color: #000;
        text-align: center;
        border-radius: 6px;
        padding: 5px 0;
        position: absolute;
        z-index: 1;
        bottom: 100%;
        left: 50%;
        margin-left: -60px;
        /* Fade in tooltip - takes 1 second to go from 0% to 100% opac: */
        opacity: 0;
        transition: opacity 1s;
    }

        .tool-tip .tool-tip-text .indented-tooltip {
            visibility: hidden;
            /*width: 120px;*/
            background-color: #b6cffc;
            color: #000;
            text-align: center;
            border-radius: 6px;
            padding: 5px 0;
            position: absolute;
            z-index: 1;
            bottom: 100%;
            left: 50%;
            margin-left: 20rem;
            /* Fade in tooltip - takes 1 second to go from 0% to 100% opac: */
            opacity: 0;
            transition: opacity 1s;
        }

    .tool-tip:hover .tool-tip-text {
        visibility: visible;
        opacity: 1;
        padding: .5rem;
    }

.tool-tip-text-extra-short {
    width: 10rem;
}

.tool-tip-text-shorter {
    width: 26rem;
}

.tool-tip-text-longer {
    width: 42rem;
}

.success-checkmark {
    color: green;
}

.exclamation-mark {
    color: goldenrod;
}

.information-question-mark {
    color: steelblue;
}


.information-question-mark-tool-tip {
    background-color: #b6cffc;
    color: #fff;
}

.tool-tip-big-icon {
    font-size: 1.5rem;
}

.tool-tip-small-icon {
    font-size: 0.8rem;
}

/* #endregion Tool Tip Text ; Hover Over Text ; Hoverover Text */