:root {
    --primary: #f67336;
    --secondary: #4b4948;
    --DarkGrey: #858383;
    --LightGrey: #ececec;
    --active: #f6733630;
    --bg-color: #e6e6e6;
    --rowOrange: #f9efe8;
    --approve: #48ac73;
    --decline: #ed1c23;
    --buttonPrimary: #F8A98A;
    --buttonSecondary: #f67336;
}

/***START OF GENERAL***/
:webkit-scrollbar-thumb {
    background: var(--primary);
}



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

.form-control:focus {
    border-color: var(--active);
    outline: 0;
    outline-color: initial;
    outline-style: initial;
    outline-width: 0px;
    -webkit-box-shadow: inset 0 1px 1px rgb(0 0 0 / 8%), 0 0 8px var(--active);
    box-shadow: inset 0 1px 1px rgb(0 0 0 / 8%), 0 0 8px var(--active);
}

.dxbs-textbox.valid.modified .form-control,
.dxbs-memo.valid.modified .form-control,
.dxbs-spin-edit.valid.modified .form-control,
.dxbs-combobox.valid.modified .form-control,
.dxbs-date-edit.valid.modified .form-control,
.dx-listbox-scrollable.valid.modified.form-control,
.dx-listbox-scrollable.valid.modified .form-control,
.dxbs-listbox.valid.modified.form-control,
.dxbs-listbox.valid.modified .form-control,
.dxbs-calendar.valid.modified,
.dx-blazor-checkbox.valid.modified .custom-checkbox .custom-control-input + .custom-control-label::before {
    border-color: var(--active);
}

body {
    background: var(--bg-color);
}

.no-padding {
    padding: 0px !important;
}

a {
    color: var(--secondary);
}

    a:hover {
        color: var(--secondary);
    }

.dxbs-listbox > ul > li:hover {
    background-color: var(--active);
}

.dropdown-item .dxbs-clickable .focused {
    color: var(--primary);
    font-weight: normal;
}

h1 {
    color: var(--secondary) !important;
}

h2 {
    color: var(--secondary) !important;
}

h3 {
    color: var(--secondary) !important;
}

h4 {
    color: var(--secondary) !important;
}

.marginTop15 {
    margin-top: 15px;
}

.marginTop20 {
    margin-top: 20px;
}

.marginTop25 {
    margin-top: 25px;
}

.marginBottom15 {
    margin-bottom: 15px;
}

.marginBottom20 {
    margin-bottom: 20px;
}

.marginBottom25 {
    margin-bottom: 25px;
}

.sidebar {
    background-color: #ffffff !important;
}

#rowSidebarVersion {
    bottom: 15px;
    position: fixed;
    flex-direction: column;
    padding-left: 27px;
    left: 0;
    font-size: 11px;
}

.gnlink a {
    color: #ffff;
}

.gnLink {
    color: #F6921E;
}

.mainContainer {
    box-shadow: 0px 0px 10px var(--secondary);
    padding: 60px;
    border-radius: 15px;
    background-color: #ffffff;
}

.background-orange {
    background-color: var(--active) !important;
}

.centerText {
    text-align: center;
}

.btn-sm {
    height: 35px;
}

.dxbs-table th {
    background-color: var(--DarkGrey);
    color: #ffffff;
}

.table-bordered {
    border: 1px solid var(--DarkGrey);
}

.bg-primary {
    background-color: var(--active);
    color: var(--secondary);
    font-weight: bold;
}

.pagination > .active > a,
.pagination > .active > a:focus,
.pagination > .active > a:hover,
.pagination > .active > span,
.pagination > .active > span:focus,
.pagination > .active > span:hover {
    background-color: var(--active);
    border-color: var(--active);
    color: var(--secondary);
}

th {
    border: 1px solid #000000 !important;
    border-top: none !important;
}

.table > tbody > tr > td,
.table > tbody > tr > th,
.table > tfoot > tr > td,
.table > tfoot > tr > th,
.table > thead > tr > td,
.table > thead > tr > th {
    line-height: 2;
}

.table-active {
    font-weight: normal !important;
}

.text-separator {
    display: flex;
    align-items: center;
    text-align: center;
}

    .text-separator::before,
    .text-separator::after {
        content: '';
        flex: 1;
        border-bottom: 1px solid var(--primary);
    }

    .text-separator::before {
        margin-left: 25%;
    }

    .text-separator::after {
        margin-right: 25% !important;
    }

    .text-separator:not(:empty)::before {
        margin-right: .25em;
    }

    .text-separator:not(:empty)::after {
        margin-right: .25em;
    }

.pageTitle {
    text-align: left;
    margin-bottom: 2rem;
}

.form-control[readonly] {
    background-color: #ffffff;
}

.form-control.form-control-sm.dxbs-btn-group.dxbs-input-group-append.input-group-append {
    z-index: 999;
}

tbody,
.table-bordered > tbody > tr > td,
.table-bordered > tbody > tr > th,
.table-bordered > tfoot > tr > td,
.table-bordered > tfoot > tr > th,
.table-bordered > thead > tr > td,
.table-bordered > thead > tr > th {
    border: 1px solid var(--secondary);
}

.dxbs-pager .card-body {
    margin-left: auto;
}

.dxbs-sort-order-indicator {
    width: auto !important;
    border-radius: 0 !important;
}

.override-vertical .form-group {
    display: inline !important;
}

.dxbs-combobox .btn.btn-sm.dx-btn.btn-secondary.dxbs-edit-btn.dropdown-toggle.dxbs-dropdown-toggle:after {
    content: "▼";
    padding: 12px 8px;
    position: absolute;
    right: 10px;
    top: 0;
    z-index: 1;
    text-align: center;
    width: 10%;
    height: 100%;
    pointer-events: none;
    margin-top: -15px;
    margin-right: -4px;
}

.dec .dropdown-toggle.dxbs-dropdown-toggle.dxbs-spin-edit-toggle:before {
    content: "▼";
    padding: 17px 13px;
    position: absolute;
    right: 10px;
    top: 0;
    z-index: 1;
    text-align: center;
    width: 10%;
    height: 100%;
    pointer-events: none;
    margin-top: -15px;
    margin-right: -6px;
    font-size: 12px;
}

.inc .dropdown-toggle.dxbs-dropdown-toggle.dxbs-spin-edit-toggle:before {
    content: "▲";
    padding: 17px 13px;
    position: absolute;
    right: 10px;
    top: 0;
    z-index: 1;
    text-align: center;
    width: 10%;
    height: 100%;
    pointer-events: none;
    margin-top: -15px;
    margin-right: -6px;
    font-size: 12px;
}

.form-control.form-control-sm.dxbs-btn-group.dxbs-input-group-append.input-group-append.dxbs-spin-btn-group {
    z-index: 999;
}

.validation-errors {
    width: 40%;
    margin-left: 60%;
}

    .validation-errors .validation-message {
        font-size: 14px;
        text-align: left;
    }

.NetPenaltyColumn {
    color: var(--decline);
}


.hasFile .disabledCursor {
    display: none;
}

.noFile .disabledCursor {
    cursor: no-drop;
    display: block;
}

.hasFile .showIcon {
    display: block;
}

.noFile .showIcon {
    display: none;
}

.header-top-wraper .header-right-info li a, .header-top-wraper #mainNavbar button {
    color: #f9f9f9;
}

.customDataGrid {
    width: 100%;
}

    .customDataGrid dxbs-grid-hsd {
        width: 100% !important;
    }



.noDetails p {
    text-align: center;
    font-size: 18px;
    border: 1px solid #f67336;
    border-radius: 10px;
    padding-top: 0.5rem;
    padding-bottom: 0.5rem;
}

.orangeRow .noDetails.noClaim {
    margin-top: 1rem;
}

.inGridRowAttachmentIcon {
    font-size: 24px;
    position: relative;
    top: 5px;
    padding-right: 5px;
    padding-left: 5px;
}

.wrapText, button.btn.btn-sm.btn-primary.popup-button.wrapText {
    white-space: nowrap;
}

/***END OF GENERAL***/
/***START OF NAVIGATION***/
#mainNavbar button, #mainNavbar button:active, #mainNavbar button:hover {
    width: auto;
    margin-bottom: 0;
    padding: 0;
}

    #mainNavbar button:active, #mainNavbar button:hover {
        border-radius: 0px !important;
    }



#mainNavbar .dropdown-menu {
    max-height: 60vh;
    overflow-y: scroll;
}

.subMenuContainer {
}

    .subMenuContainer > li:first-of-type {
        padding-top: 0 !important;
    }

.nav-link .fa, .nav-link .fas {
    width: 2rem;
    font-size: 1.1rem;
    vertical-align: text-top;
    top: -2px;
}

.nav-link .fa-user-circle {
    font-size: 1.2rem;
}

.sidebar .nav-item a.active {
}

.nav-tabs > li {
    margin-bottom: 0px;
}

.nav-tabs {
    margin-bottom: 15px;
}

    .nav-tabs a {
        color: var(--secondary);
    }

.dxbs-tabs .nav-item {
    background-color: #ffffff;
    border-left: #00000010 2px solid;
    border-right: white 2px solid;
}

    .dxbs-tabs .nav-item .active {
        background-color: var(--primary);
        font-weight: bolder;
        width: 101%;
        color: #ffffff;
    }


i.longTitle.submenutext {
    margin-left: 14%;
}

#sidebar:hover a.nav-link.myActiveClass {
    background-color: #d3a7a773;
}

.parentLink .longTitle:after {
    padding-left: 5px;
    font-size: 9px;
}

.parentLinkDown .longTitle:after {
    content: "\25BC";
    color: #ffffff;
}

.parentLinkUp .longTitle:after {
    content: "\25B2";
    color: #ffffff;
}

/***END OF NAVIGATION***/


/***START OF BUTTONS***/
button, .linkButton, .linkButton-secondary:hover, .linkButton-secondary:focus {
    width: 100%;
    border-radius: 15px !important;
    margin-bottom: 15px;
    outline: none !important;
    background-color: #ffffff;
    border: 3px solid var(--primary);
    color: var(--secondary);
    font-weight: bold;
}

    button:hover, button:active, button:focus,
    .linkButton:hover, linkButton:active, .linkButton:focus,
    .linkButton-secondary, .btn-primary.active, {
        background-color: var(--primary) !important;
        border: 3px solid var(--primary) !important;
        border-radius: 15px;
        margin-bottom: 15px;
        width: 100%;
        color: var(--secondary);
        font-weight: bold;
        outline: none !important;
    }

.btn-primary {
    background-color: #ffffff;
    border: 3px solid var(--primary);
    color: var(--secondary);
    font-weight: bold;
}

    .btn-primary:disabled {
        background-color: var(--LightGrey);
        border: 3px solid var(--primary);
        color: var(--secondary);
        font-weight: bold;
    }

        .btn-primary:disabled:hover {
            background-color: var(--DarkGrey);
            border: 3px solid var(--primary);
            color: var(--secondary);
            font-weight: bold;
        }

    .btn-primary:hover, .btn-primary:focus, .btn-primary:active {
        background-color: var(--primary);
        border: 3px solid var(--primary) !important;
        color: #ffffff;
        font-weight: bold;
    }

.btnApprove {
    border-color: var(--approve) !important;
}

.btnDecline {
    border-color: var(--decline) !important;
}


.btn-primary:active, .open > .dropdown-toggle.btn-primary, .btn-primary.focus, .btn-primary:focus
.btn-primary.active.focus, .btn-primary.active:focus, .btn-primary.active:hover, .btn-primary:active.focus,
.btn-primary:active:focus, .btn-primary:active:hover,
.open > .dropdown-toggle.btn-primary.focus,
.open > .dropdown-toggle.btn-primary:focus,
.open > .dropdown-toggle.btn-primary:hover {
    background-color: var(--DarkGrey) !important;
    border-color: var(--DarkGrey) !important;
    color: #ffffff;
}

#btnQuestionWarnings, #btnQuestionWarnings:hover, #btnQuestionWarnings:after {
    background-color: transparent !important;
    color: #000;
}

.btn.btn-sm.dx-btn.btn-primary #btnQuestionWarnings:hover {
    background-color: transparent !important;
}

#btnQuestionWarnings {
    /*border-radius: 0 !important;
    margin-top: -5px;*/
}

    #btnQuestionWarnings .educate-icon {
        font-size: 20px;
        margin-right: 10px;
    }

    #btnQuestionWarnings .indicator-nt {
        height: 10px;
        width: 10px;
        border-radius: 50%;
        top: 0px;
        margin-right: 10px;
    }

#btnLogOut {
    color: #f67336 !important;
}

    #btnLogOut:hover, #btnLogOut:active, #btnLogOut:focus {
        /*        border-radius: 0px !important;
    background-color: transparent !important;
    color: var(--secondary) !important;
    border: none !important;*/
        text-decoration: none !important;
    }

.btn-group-sm > .btn, .btn-sm {
    line-height: 2;
    font-size: 1rem;
}

.downloadFileButton {
    vertical-align: middle;
    line-height: 2.45 !important;
    cursor: pointer;
}
/***END OF BUTTONS***/


/***START OF NOTIFICATION***/
.notification-single-top h1 {
    font-size: 16px;
    padding: 7px 10px;
    margin: 0px;
    font-weight: 700;
    text-align: left;
    border-bottom-color: var(--DarkGrey);
}

.message-single-top h1 {
}

#notificationList {
    /*padding-top:10px;*/
}

    #notificationList li {
        border-bottom: 1px solid var(--LightGrey);
        cursor: pointer;
    }

        #notificationList li * {
            cursor: pointer;
        }

        #notificationList li:last-child {
            border-bottom: none;
        }

.notificationContainer {
    padding: 5px;
    display: flex;
    min-width: 240px;
}

#notificationList li:hover, #notificationList li:active, #notificationList li:focus {
    background-color: var(--buttonPrimary);
}

.notificationLeft {
    padding-left: 5px;
    padding-right: 5px;
    width: calc(100% - 10px);
}

.notificationRight {
    width: 10px;
    flex: none;
    position: relative;
}

.notificationSubject {
    font-weight: 700;
    font-size: smaller;
}

.notificationBody {
    display: block;
    font-size: smaller;
}

.notificationDate {
    display: block;
    font-size: 10px;
}

.notificationCircle {
    width: 10px;
    height: 10px;
    border-radius: 50%;
    background-color: var(--primary);
    top: 50%;
    transform: translateY(-50%);
    position: absolute;
}

.notificationCircleRead {
    background-color: transparent;
    border: 2px solid var(--primary);
    width: 10px;
    height: 10px;
    border-radius: 50%;
    top: 50%;
    transform: translateY(-50%);
    position: absolute;
}

.notificationPopupContainer {
    display: flex !important;
    flex-direction: column !important;
    /*position: fixed !important;*/
    width: 400px !important;
    /*bottom: 0 !important;*/
    animation: slideUpFadeIn 1.5s;
    transform: translate(-150%, 300%);
    min-height: 200px;
}

    .notificationPopupContainer .dxbs-close {
        z-index: 999999;
    }

    .notificationPopupContainer .modal-content.dxbs-modal-content {
        padding: 5px;
        border: solid 2px var(--primary);
    }

    .notificationPopupContainer .modal-header {
        border-bottom: none !important;
        padding: 0 !important;
    }

.notificationPopupSubject {
    font-weight: 600;
}


.notificationPopupContainer {
    margin-bottom: -45% !important;
    margin-left: -69% !important;
    transform: none !important;
}

.notificationPopupContainer2 {
    top: 82vh;
    position: absolute;
    left: -10px;
    padding: 5px;
    border: solid 2px var(--primary);
    z-index: 999999;
    min-width: 300px !important;
    background-color: white;
    animation: slideUpFadeIn 1.5s;
    border-radius: 10px;
}

    .notificationPopupContainer2 i {
        right: 10px;
        top: 10px;
        position: absolute;
    }

        .notificationPopupContainer2 i:hover {
            color: var(--primary);
            cursor: pointer;
        }

.notificationMarkAsRead {
    width: -webkit-fill-available;
    display: block;
    text-align: right;
}

    .notificationMarkAsRead a {
        color: #333 !important;
        text-align: right;
        padding-right: 10px;
        font-size: smaller;
        width: fit-content;
    }

        .notificationMarkAsRead a:hover, .notificationMarkAsRead a:active, .notificationMarkAsRead a:focus {
            color: #ffffff !important;
        }

.notificationPopupBody, .notificationPopupSubject {
    color: #333333;
    width: 90%;
    margin-right: 5px;
    margin-left: 5px;
    text-align: left;
}

.btn-notfications {
    border: none;
}

/***END OF NOTIFICATION***/

/***START OF USER SELECTION FILTER***/
#UserSelectionFilters {
    display: inline-flex;
}

    #UserSelectionFilters .dx-blazor-checkbox {
        margin-right: 10px;
    }

    #UserSelectionFilters #txtFilter {
        margin-top: 10px;
        margin-bottom: 10px;
    }

/***END OF USER SELECTION FILTER***/


/***START OF POPUP MODALS***/
.dxbs-modal > .dxbs-popup {
    min-width: 550px !important;
}

.modal-header.dxbs-modal-header.drag {
    display: flex;
    justify-content: center;
}

.dxbs-modal > .dxbs-popup .dxbs-close {
    position: absolute;
    right: 15px;
}

.modal-title {
    font-size: 20px;
    font-weight: 700;
}

.dxbs-popup .modal-content {
    flex-direction: column;
    height: fit-content;
    height: -webkit-fill-available;
    width: fit-content;
    width: -webkit-fill-available;
}

.dxbs-modal > .dxbs-popup > .dxbs-modal-content > .dxbs-modal-footer {
    display: flex;
    justify-content: center;
    bottom: 0;
    position: absolute;
    width: 100%;
}

.popup-button {
    background-color: var(--primary);
    width: 35%;
    color: #ffffff;
    word-wrap: break-word;
    line-height: 1;
    font-size: 0.9rem;
    overflow-wrap: break-word;
    white-space: normal;
    text-decoration: none;
    margin: 5px;
}


    .popup-button:hover {
        background-color: #ffffff;
        border-color: var(--primary);
        color: var(--primary);
    }

    .popup-button.confirmButton.completePaymetnButton {
        width: 98% !important;
    }

.popup-body {
    margin: 10px;
}

.popupFooter {
    bottom: 0;
}

#rowPopupButtons {
    text-align: center;
    display: flex;
    justify-content: space-evenly;
    width: 100%;
    margin: 20px 0;
}

.rowPopupButtons button {
    width: 35% !important;
}

#studentAnswerReviewButtons.rowPopupButtons button {
    width: 100% !important;
}

#rowPopupButtons div {
    width: 40%;
}

#rowPopupButtons .twoLineButton, .rowPopupButtons .twoLineButton {
    line-height: 0.9rem !important;
    font-size: 0.9rem !important;
}

.rowPopupButtons {
    text-align: center;
    display: flex;
    justify-content: space-evenly;
    width: 100%;
    margin: 20px 0;
}

#popupAnswerHistory .popup-body {
    display: block;
    min-height: 100px;
}

#popupAnswerHistory .lds-roller {
    transform: translateX(-20px);
}

.HoverButton, .btn-primary, .btn.btn-sm.dx-btn.btn-primary.btn-sm, .btn.btn-primary, .cancelButton.btn {
    display: inline-block !important;
    padding: .75rem .3rem;
    border-radius: 5px !important;
    color: var(--secondary);
    text-transform: uppercase;
    font-size: 1rem;
    letter-spacing: 0.01rem;
    transition: all .3s;
    position: relative !important;
    overflow: hidden;
    line-height: 1;
    border: none;
    z-index: 1 !important;
    font-weight: normal;
}

    .btn.btn-sm.dx-btn.btn-primary.btn-sm:after, .HoverButton:after, .btn.btn-primary:after, .cancelButton.btn:after {
        content: '';
        position: absolute;
        bottom: 0;
        left: 0;
        width: 100%;
        height: 100%;
        background-color: var(--buttonPrimary);
        border-radius: 5px;
        z-index: -2;
    }

    .btn.btn-sm.dx-btn.btn-primary.btn-sm:before, .HoverButton:before, .btn.btn-primary:before, .btn.cancelButton:before, .cancelButton.btn:before {
        content: '';
        position: absolute;
        bottom: 0;
        left: 0;
        width: 0%;
        height: 100%;
        background-color: var(--buttonSecondary);
        transition: all .3s;
        border-radius: 5px;
        z-index: -1;
    }

    .btn.btn-sm.dx-btn.btn-primary.btn-sm:hover, .btn.btn-sm.dx-btn.btn-primary.btn-sm:active, .btn.btn-sm.dx-btn.btn-primary.btn-sm:focus, .btn.btn-sm.dx-btn.btn-primary.btn-sm:active:focus,
    .HoverButton:hover, .HoverButton:active, .HoverButton:focus, .HoverButton:active:focus, .btn.btn-primary:hover, .btn.btn-primary:active, .btn.btn-primary:focus, .btn.btn-primary:active:focus,
    .cancelButton.btn:hover, .cancelButton.btn:active, .cancelButton.btn:focus {
        color: var(--secondary);
        border: none !important;
        background-color: inherit !important;
        font-weight: normal;
    }

        .btn.btn-sm.dx-btn.btn-primary.btn-sm:hover:before, .HoverButton:hover:before, .btn.btn-primary:hover:before, .cancelButton.btn:before {
            width: 100%;
        }

.btn.cancelButton:before, .btn.cancelButton:after {
    background-color: var(--secondary) !important;
    color: #ffffff !important;
}

.btn.btn-primary.cancelButton:hover, .btn.btn-primary.cancelButton:active, .btn.btn-primary.cancelButton:focus,
.btn.btn-primary.cancelButton:active:focus, .btn.btn-primary.cancelButton:hover:before {
    background-color: #000000 !important;
}

.cancelButton.btn {
    /* background-color: #ffffff !important;
    border: 3px solid var(--secondary) !important;
    color: var(--secondary) !important;*/
    color: #ffffff !important;
}

    .cancelButton.btn:hover, .cancelButton.btn:focus, .cancelButton.btn:active {
        background-color: var(--secondary) !important;
        /*border: 3px solid var(--secondary) !important;*/
        color: #ffffff !important;
    }

.confirmButton button {
    width: 100%;
}

.positionedPopup .dxbs-modal-footer {
    position: unset !important;
}

#rowPromptBidDeadline .col-xs-5 label,
#rowPromptBidDeadline .col-lg-5.col-xs-5,
#rowPromptBidDeadline .col-xs-5 span,
#rowPromptBidDeadline .col-xs-7 span.deadline,
#rowPromptBidDeadline .col-lg-3.col-xs-7,
#rowPromptBidDeadline .col-lg-7.col-xs-7,
#rowPromptBidDeadline .col-lg-5.col-xs-5,
#rowPromptBidDeadline .col-lg-5.col-xs-7 span,
#rowPromptBidDeadline div.col-lg-5.col-xs-7 {
    text-align: left;
}

/***START OF ANSWER BID RATING***/
.popup-body input.fa.fa-star {
    -webkit-appearance: none;
    -moz-appearance: none;
    -ms-appearance: none;
    -o-appearance: none;
    appearance: none;
}

    .popup-body input.fa.fa-star:focus {
        outline: none !important;
    }

#popupAnswerRating {
    text-align: center;
}

/***END OF ANSWER BID RATING***/

#studentAnswerReviewButtons button {
    display: inline-flex !important;
}

#studentAnswerReviewButtons .twoLineButton, #rowAutomatedAnswerMessages .twoLineButton {
    font-size: 0.69rem !important;
    line-height: 0.69rem !important;
    white-space: pre-wrap !important;
    display: inline-flex !important;
}


/***END OF POPUP MODALS***/
/***START OF STUDENT AVAILABLE QUESTIONS***/
#myQuestionsToolbar .dxbs-toolbar {
    height: 49px !important;
    margin-top: 5px !important;
}

.disableClick button {
    pointer-events: none;
}
/***END OF STUDENT AVAILABLE QUESTIONS*/
/***START OF STUDENT BID ACCEPTANCE***/
/*#rowBids .row:nth-child(even) {
    background-color: var(--primary);
}

#rowBids .row {
    background-color: var(--LightGrey);
}*/
.rowBid {
    padding: 10px;
    border: 3px solid var(--LightGrey);
    border-radius: 15px;
    margin-bottom: 15px;
}

#rowBids h2 {
    margin-top: 30px;
}

.rowBid:hover {
    background-color: #ffffff;
    border-radius: 15px;
}

#page-QuestionBidPreview .rowBidTopRow {
    padding-bottom: 5px;
}

    #page-QuestionBidPreview .rowBidTopRow h4 {
        padding-top: 8px;
        margin-bottom: 0px;
        white-space: nowrap;
    }

#page-QuestionBidPreview .labelCenterVertically {
    height: auto !important;
    line-height: normal !important;
    white-space: normal !important;
}

#page-QuestionBidPreview hr {
    background-color: var(--secondary);
}

.lblBidAmount {
    color: var(--primary);
}

.btnAcceptBid {
    position: absolute;
}

    .btnAcceptBid button {
        transform: translateY(200%);
    }

.labelCenterVertically {
    align-items: center;
    display: flex;
}

.rowBidTopRow .col-lg-5 {
    padding-left: 25px;
}
/***END OF STUDENT BID ACCEPTANCE***/


/***START OF PROFESSIONAL AVAILABLE QUESTIONS***/
#page-Questions #rich-container {
    width: 100% !important;
}

#page-Questions, #page-StudentQuestions {
    padding: 60px;
    background-color: #ffffff;
}

.questionDetails {
    padding-top: 40px;
}

#colQuestionPreview {
    padding-top: 10px;
    background-color: #00000005;
    padding-bottom: 15px;
    border-radius: 15px;
    box-shadow: 0px 0px 10px var(--secondary);
}

#page-Questions #txtSubject, #page-StudentQuestions {
    border-color: transparent;
}

#colQuestionPreview input, #colQuestionPreview textarea {
    width: 100%;
    border-color: transparent;
    background-color: transparent;
}

#colQuestionPreview .row {
    margin-top: 13px;
}

#page-Questions #colBidAmount {
    padding-top: 5px;
}

    #page-Questions #colBidAmount button {
        border-radius: 0 !important;
    }

#page-Questions #rowQuestionContent label, #page-StudentQuestions #rowQuestionContent label {
    padding-left: 15px;
}

#page-Questions #colBidAmount label {
    padding: 5px;
}

#page-Questions #rowUploadedFiles, #page-StudentQuestions #rowUploadedFiles {
    margin-left: 0;
    margin-right: 0;
}

#page-Questions #rowPlaceBid {
    margin-top: 15px;
    margin-bottom: 15px;
}

#page-Questions #colBidAmount {
    margin-left: -20px;
}

/***END OF PROFESSIONAL AVAILABLE QUESTIONS***/

/***START OF STUDENT ASK QUESTION***/
#studentTitleWrapper {
    display: flex;
}

    #studentTitleWrapper > span {
        font-weight: 700;
        font-size: 30px;
    }

#studentAskNewButton {
    width: fit-content;
    margin-left: 25px;
    padding-top: 5px;
}

#rowQuestionInputBox .col-lg-12, #rowQuestionInputBox label {
    width: 100%;
    padding-left: 30px;
    padding-right: 30px;
}

#page-QuestionAsk textarea {
    width: 100%;
}

.formRow div.row {
    margin-bottom: .5rem;
}

.rowFileUploadZone {
    border: 3px dashed #e68710;
    padding: 3rem;
    display: flex;
    align-items: center;
    justify-content: center;
    background-color: #eee;
    box-shadow: inset 0 0 8px rgba(0,0,0,0.2);
    color: #aeaeae;
    font-size: 1.5rem;
    cursor: pointer;
    margin: 1.5rem 0 2rem 0;
    position: relative;
    margin-left: 15px;
    margin-right: 15px;
}

    .rowFileUploadZone:hover {
        background-color: #f5f5f5;
    }

    .rowFileUploadZone input {
        position: absolute;
        width: 100%;
        height: 100%;
        opacity: 0;
        cursor: pointer;
    }

pre {
    position: absolute;
    width: 100%;
    height: 100%;
    opacity: 0;
    cursor: pointer;
}

.rowUploadedFile {
    background-color: #e4e4e4;
    border-radius: 0.6rem;
    color: #555;
    margin-left: 5px;
    margin-right: 5px;
    min-height: 100px;
    min-width: 300px;
    padding: 10px;
}

    .rowUploadedFile button, .rowUploadedFile button:hover {
        margin-bottom: 0;
        line-height: 1.2rem;
        width: 60px;
        right: 0;
        float: right;
        position: absolute;
        top: 50%;
        margin-top: 20px;
        height: 38px;
    }

.btnCol {
    padding-right: 0px;
    padding-left: 0px;
}

#rowFilesUploaded {
    padding-left: 30px;
    padding-right: 30px;
    display: flex;
    align-items: center;
    height: 100px;
    width: 300px;
}

#rowUploadedFiles a, .colUploadedFiles a {
    margin-left: 5px;
}

/* Button style for FileCollectionComponent */
.FileCollectionButton {
    /*word-break: break-word !important;
    whit*/ e-space: normal !important;
    /*overflow-wrap: anywhere !important;*/
    overflow: hidden !important;
    background-color: dodgerblue !important;
    color: white !important;
    border-color: dodgerblue !important;
}

#rowPromptBidDeadline {
    padding-left: 15px;
    padding-right: 15px;
}

    #rowPromptBidDeadline .col-lg-2, #rowPromptBidDeadline .col-lg-3, #rowPromptBidDeadline .col-lg-7 {
        padding: 0;
    }

.deadlineLabel {
    padding: 0;
}

.deadline {
    color: var(--primary);
    font-weight: 800;
}

a.close-btn.oi.oi-x {
    float: right;
}

.align-content-right {
    text-align: right;
}

.button-width-40 button {
    width: 40%;
}

.fullWidth {
    width: 100%;
}

.floatRight {
    float: right;
}

/***END OF STUDENT ASK QUESTION***/
/***START OF MANAGEMENT MANAGE APPROVAL REQUESTS***/
#page-ManageApprovalRequests #rowButtons div:first-child {
    padding-left: 0px;
}

#page-ManageApprovalRequests #rowButtons div:last-child {
    padding-right: 0px;
}

#page-ManageApprovalRequests #colSideManagement .row {
    padding-top: 10px;
    padding-bottom: 10px;
}
/***END OF MANAGEMENT MANAGE APPROVAL REQUESTS***/

#page-RequestApproval .dxbs-toolbar-btn, .dxbs-dropdown-toggle {
    border-radius: 0px !important;
}

.fileUploadButtons button {
    /*background-color:transparent;
    border-color:transparent;
        */
}

.showBids {
    margin-top: 15px;
}

.rowMargin-bottom {
    margin-bottom: 5px;
}

/***START OF QUESTION AND ANSWER***/
.labelCenterVertically {
    height: 60px;
    line-height: 60px;
    white-space: nowrap;
}

    .labelCenterVertically button {
        margin: auto 0;
    }

.answerReviewRow {
    display: flex;
}

.containerQuestion {
    padding-right: 20px;
    padding-bottom: 10px;
    flex: 1;
}

.containerAnswer {
    padding-bottom: 10px;
    padding-left: 20px;
    flex: 1;
}

#rowQuestionSimpleDetails {
    background-color: var(--rowOrange);
    margin-bottom: 20px;
    padding: 20px;
    height: 100%;
    border-radius: 10px;
    box-shadow: 0px 5px 10px #00000050;
}

.orangeRow {
    background-color: var(--rowOrange);
    margin-bottom: 20px;
    padding: 20px;
    height: 100%;
    border-radius: 10px;
    box-shadow: 0px 5px 10px #00000050;
}

.rowAnswer, .rowQuestion, .borderedRow {
    background-color: #ffffff;
    margin-bottom: 10px;
    padding: 20px;
    height: 100%;
    border-radius: 10px;
    border: solid lightgrey;
}


#rowClarifications .col-md-12, #rowClarifications .col-md-10, #rowClarifications .col-md-8,
#rowSatisfiedWithAnswer .col-md-10, rowSatisfiedWithAnswer .col-md-8,
#rowQuestionSimpleDetails .col-md-6 {
    padding: 0;
}


.chatMessageSenderContainer {
    float: right;
    width: 80%;
}

.chatMessageSender {
    border: medium;
    color: #000000;
    padding: 10px 5px 5px 10px;
    border: 1px solid var(--secondary);
    border-top-right-radius: 20px;
    border-top-left-radius: 20px;
    border-bottom-left-radius: 20px;
    background-image: linear-gradient(#e7e7e7, #ffffff 80%);
}

.chatMessageSenderContainer span {
    padding-top: -5px;
    float: right;
    color: gray;
}

.chatMessageRecipientContainer {
    float: left;
    width: 80%;
}

.chatMessageRecipient {
    border: medium;
    color: #000000;
    padding: 10px;
    border: 1px solid var(--primary);
    border-top-right-radius: 20px;
    border-top-left-radius: 20px;
    border-bottom-right-radius: 20px;
    background-color: var(--primary);
    background-image: linear-gradient(#F6D2C1, white 90%);
}

.chatMessageRecipientContainer span {
    color: gray;
}

#rowSendMessage {
    padding-top: 30px !important;
    margin-top: 30px;
    border-top: 1px solid var(--secondary);
}

#btnIsNotSatisfied {
    margin-top: 10px;
}

.labelRegularText {
    font-weight: normal;
    margin-left: 5px;
}

#chkboxClarification {
    margin-bottom: 10px;
    padding-right: 0;
}

    #chkboxClarification .dx-blazor-checkbox {
        display: flex;
        flex-direction: row-reverse;
        float: left;
        /* padding-left: 25px;*/
    }

        #chkboxClarification .dx-blazor-checkbox .custom-control {
            margin-right: 5px;
        }

#page-professionalAnswer #rowUploadedFiles {
    margin: 0;
}

#page-professionalAnswer #rowQuestionInputBox {
    margin-top: 15px;
}

.hide2 {
    opacity: 0;
    max-height: 0;
    visibility: hidden;
}

.show2 {
    -moz-transition: opacity 0.4s ease-in-out;
    -o-transition: opacity 0.4s ease-in-out;
    -webkit-transition: opacity 0.4s ease-in-out;
    transition: opacity 0.4s ease-in-out;
}

.slide-down-fade-in {
    animation: slideDownFadeIn 0.5s ease-in-out forwards;
    position: relative;
}

.slide-down-fade-out {
    animation: slideDownFadeOut 0.5s ease-in-out forwards;
    position: relative;
}

.slide-up-fade-out {
    animation: slideUpFadeOut 0.5s ease-in-out forwards;
    position: relative;
}

.slide-up-fade-in {
    animation: slideUpFadeIn 0.5s ease-in-out forwards;
    position: relative;
}

.fade-in {
    animation: fadeIn 0.5s ease-in-out forwards;
    position: relative;
}

.fade-out {
    animation: fadeOut 0.5s ease-in-out forwards;
    position: relative;
}

#rowAutomatedAnswerMessages {
    margin-top: 10px;
    margin-bottom: 15px;
    background-color: var(--rowOrange);
    margin-left: 0px;
    margin-right: 0px;
    padding-top: 15px;
    padding-bottom: 15px;
}

@keyframes slideDownFadeIn {
    from {
        bottom: 15px;
        opacity: 0;
    }

    to {
        bottom: 0;
        opacity: 1;
        height: auto;
    }
}

@keyframes slideUpFadeOut {
    from {
        bottom: 0;
        opacity: 1;
    }

    to {
        bottom: 15px;
        opacity: 0;
        height: 0;
        max-height: 0;
    }
}

@keyframes slideDownFadeOut {
    from {
        bottom: 15px;
        opacity: 1;
    }

    to {
        bottom: 0;
        opacity: 0;
        max-height: 0;
        height: 0;
    }
}

@keyframes slideUpFadeIn {
    from {
        bottom: -15px;
        opacity: 0;
    }

    to {
        bottom: 0;
        opacity: 1;
        height: auto;
    }
}

@keyframes fadeIn {
    from {
        opacity: 0;
    }

    to {
        opacity: 1;
    }
}

@keyframes fadeOut {
    from {
        opacity: 1;
    }

    to {
        opacity: 0;
    }
}

#rowAutomatedAnswerMessages button {
    margin-right: 5px;
    width: auto;
}

#rowAutomatedAnswerMessages label {
    margin-right: 5px;
    margin-top: 5px;
}

#btnQuestionWarnings {
    font-size: 0.71rem;
    padding-top: 0.4rem;
    white-space: pre-wrap;
    padding-right: 20px;
}

.twoLineButton {
    padding: 1px !important;
    /* line-height: 0.69rem;*/
}

/***END OF QUESTION AND ANSWER***/
/***START OF PROFESSIONAL DASHBOARD***/
#cardProfessionalEarnings {
    margin-top: 5%;
}
/***END OF PROFESSIONAL DASHBOARD***/

/***START OF PROFESSIONAL REQUEST APPROVAL ***/
.proRegistration input {
    line-height: 2;
}

.registrationFeedbackContainer {
    border-color: var(--decline);
    padding: 10px;
    border-radius: 10px;
    background-color: var(--decline);
    color: white;
}

    .registrationFeedbackContainer h4 {
        color: white !important;
    }

/***END OF PROFESSIONAL REQUEST APPROVAL ***/
@media (min-width:1500px) and (max-width: 1600px) {
    .header-top-area {
        left: 235px;
    }
}

/* Question Details Action Area - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -  */

.questionDetailsAction {
    height: 50px;
    padding-left: 20px;
    padding-right: 20px;
}

    .questionDetailsAction.col {
        width: 50%;
    }

    .questionDetailsAction .dxbs-spin-edit {
        border-radius: 15px;
        border: 3px var(--primary) solid;
    }

        .questionDetailsAction .dxbs-spin-edit input {
            height: 30px;
        }


/* Question Details Action Area - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -  */


.questionDetailsAct {
    padding-bottom: 20px;
    padding-left: 20px;
    padding-right: 20px;
}

    .questionDetailsAct.col {
        width: 50%;
    }


    .questionDetailsAct .dxbs-spin-edit {
        border-radius: 15px;
        border: 3px var(--primary) solid;
    }

        .questionDetailsAct .dxbs-spin-edit input {
            height: 30px;
        }
/* Question Status/Stages - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -  */
.status-btn {
    width: 85px;
    font-size: 12px;
}

.status-tag {
    color: #ffffff;
    font-weight: bold;
    border-radius: 15px;
    width: 100% !important;
    font-size: 12px;
    display: flex;
    justify-content: center;
    text-align: center;
}

.status-Open {
    background-color: #FEC00F
}

.status-ReOpen {
    background-color: #F89938;
}

.status-PendingBidAcceptance {
    background-color: #EE3923;
}

.status-FailedBid {
    background-color: #AFABAB;
}

.status-PendingAnswer {
    background-color: #CB3494;
}

.status-PendingReview {
    background-color: #1A4F79;
}

.status-Answered {
    background-color: #53823B;
}

.status-Withdrawn {
    background-color: lightslategrey;
}

.status-Reassigned {
    background-color: #E36FAB;
}

.status-Failed {
    background-color: #3A3838;
}

.status-Clarification {
    background-color: #1171B9;
}

/***END OF Question Status/Stages***/

.dxbs-listbox > li > a, .dxbs-listbox > ul > li > a, .dxbs-listbox > li > .form-check, .dxbs-listbox > ul > li > .form-check {
    cursor: pointer;
    width: 100%;
    display: block;
}

/***START OF FILE UPLOAD COMPONENT****/
.jumbotron {
    border: 1px dashed var(--secondary);
}

#overviewDemoDropZone {
    text-align: center;
}

    #overviewDemoDropZone svg {
        display: none;
    }

    #overviewDemoDropZone button {
        width: 30% !important;
        margin-top: 10px;
        margin-bottom: 10px;
    }

    #overviewDemoDropZone a.rule {
        display: block;
    }

    #overviewDemoDropZone label.rule {
        display: block;
    }

    #overviewDemoDropZone span.m-1 {
        display: block;
    }

.custom-drag-over {
    background: var(--active);
}

.progress-bar {
    background-color: var(--approve);
}

.dxuc-file-view .col-auto {
    width: max-content;
    position: absolute;
    display: inline-block;
    margin-left: 5px;
}

.dxuc-file-view .col {
    display: inline-block;
    width: max-content;
}

.noFilesAvailable {
    color: red;
    text-align: left;
    margin-left: 15px;
}
/***END OF FILE UPLOAD COMPONENT***/

/***START OF BID PREVIEW PROFESSIONAL RATING***/
#ProfessionalRatingTooltip #spanText {
    white-space: pre-wrap;
    line-height: 1.3;
}


#ProfessionalRatingTooltip.tooltip-wrapper {
    line-height: 1;
}

.tooltipHoverContent, .tooltipHoverContentBottom {
    visibility: hidden;
    position: absolute;
    width: 240px;
    left: 50%;
    margin-left: -120px;
    background-color: #ffffff;
    border: 1px solid #ececec;
    color: #000000;
    text-align: left;
    padding: 10px;
    border-radius: 6px;
    z-index: 1;
    margin-bottom: 5px;
}

.tooltipHoverContentBottom {
    top: 100%;
}

    .tooltipHoverContent::after, .tooltipHoverContentBottom::after {
        content: "";
        position: absolute;
        top: 100%;
        left: 50%;
        margin-left: -5px;
        border-width: 5px;
        border-style: solid;
        border-color: #ececec transparent transparent transparent;
    }

    .tooltipHoverContentBottom::after {
        border-left-color: transparent;
        border-top-color: transparent;
        border-right-color: transparent;
        border-bottom-color: #ffffff !important;
        top: -4%;
    }

    .tooltipHoverContentBottom #spanText::after {
        content: "";
        position: absolute;
        top: -25%;
        left: 50%;
        margin-left: -5px;
        border-width: 5px;
        border-style: solid;
        border-color: transparent transparent #808080 transparent;
    }

.tooltip-wrapper:hover .tooltipHoverContent, .tooltip-wrapper:hover .tooltipHoverContentBottom {
    visibility: visible;
}

#tooltipTotalRating label {
    margin-left: 10px;
}

#tooltipTotalCount {
    margin-top: 5px;
    margin-bottom: 10px;
}

#tooltipRatingBreakdown {
}

    #tooltipRatingBreakdown meter {
        margin-right: 5px;
        width: 130px;
        height: 30px;
        vertical-align: -11px;
    }

.meterWrapper div {
    padding-left: 0;
    padding-right: 0;
}

.meterWrapper {
    width: 100%;
    vertical-align: middle;
    margin: 5px 0;
}

#tooltipRatingBreakdown meter::-webkit-meter-optimum-value {
    background: var(--primary);
}

.meterWrapper .text-right {
    text-align: right;
    right: 0;
    position: absolute;
    margin-top: 8px;
}

/***END OF BID PREVIEW PROFESSIONAL RATING***/

#page-ManageApprovalRequests h3 {
    margin-bottom: 35px;
}

/***START OF COLOR CODE LEGEND TABLE***/
#tableStagesStudent {
    margin-right: 0;
    margin-left: auto;
    border-spacing: 2px;
    border-collapse: separate;
}

    #tableStagesStudent tr, #tableStagesStudent th, #tableStagesStudent td, #tableStagesStudent, #tableStagesStudent tbody, #tableStagesStudent thead {
        border: none !important;
    }

        #tableStagesStudent th {
            text-align: center;
            border: 1px solid green;
            margin-left: 5px;
            margin-right: 5px;
            padding-left: 5px;
            padding-right: 5px;
            font-size: 9px;
            background-color: transparent;
        }

        #tableStagesStudent td {
            text-align: center;
            color: #ffffff;
            font-size: 12px;
            height: 1px;
        }

        #tableStagesStudent tr > * + * {
            padding-left: 5px;
            padding-right: 0px;
        }

        #tableStagesStudent div {
            border-radius: 5px;
            height: 100%;
            width: 100%;
            display: inline-block;
            overflow: hidden;
            position: relative;
            min-width: 80px;
            white-space: nowrap;
            padding-top: 3px;
        }

        #tableStagesStudent span {
            transform: translateY(-50%);
            bottom: 0;
            top: 50%;
            width: 100%;
            left: 0;
            right: 0;
            min-width: 50px;
            overflow: hidden;
            position: absolute;
            min-height: min-content;
        }

        #tableStagesStudent * {
            cursor: default;
        }



/***END OF COLOR CODE LEGEND TABLE*/

/***START OF CONTENT NOT FOUND***/
#notFoundContainer {
    border: 2px solid var(--primary);
    border-radius: 15px;
    background-color: #ffffff;
    padding-top: 15px;
}

    #notFoundContainer a {
        color: var(--primary);
    }

        #notFoundContainer a:hover {
            color: var(--active);
        }

    #notFoundContainer i {
        color: var(--primary);
    }
/***END OF CONTENT NOT FOUND***/

/***START OF SPINNER***/
.spinnerFullScreen {
    height: 100%;
}

.spinnerOffcenter > div {
    position: absolute;
    top: 50%;
    transform: translate(-50%, -50%);
}

.spinnerInContainer {
    position: relative !important;
}
/***END OF SPINNER***/


/**CUSTOM TABLE**/
.customtable {
    display: flex;
    width: 80%;
    margin-left: 20%;
}

.ctcolumn {
    display: flex;
    flex-direction: column;
    margin: 2px;
    flex-grow: 1;
    /*border: 1px solid green;*/
}

.ch {
    font-size: 9px;
    text-align: center;
    cursor: default;
    /*border: 1px solid yellow;*/
}

.cd {
    height: 100%;
    margin: 1px;
    width: 100%;
    display: flex;
    align-items: center;
    padding: 4px;
    border-radius: 5px;
    /*border: solid 1px red;*/
}

    .cd span {
        width: 100%;
        /*border: 1px solid;*/
        cursor: default;
    }

.cb {
    display: flex;
    flex-direction: column;
    height: 100%;
    width: 100%;
    justify-content: center;
    text-align: center;
    align-items: center;
    color: white;
    font-size: 12px;
    /*border: solid 1px blue;*/
}
/***END OF CUSTOM TABLE***/

/***INPUT BOXES***/
.dxbs-textbox, .dxbs-input-group {
    width: 100%;
}

.uploadFile {
    border: transparent;
    -webkit-box-shadow: none;
    box-shadow: none;
    padding: 0;
}

/***START OF TOAST***/

.blazored-toast-close {
    text-align: right;
}

.blazored-toast-container {
    z-index: 99999;
}

.blazored-toast h5 {
    color: #ffff;
}
/***END OF TOAST***/
/***START OF PAYMENT COMPLETION PAGE***/
#rowPaymentDetails {
    margin-top: 20px;
    margin-bottom: 20px;
}

.paymentStatusApproved {
    color: #53823B !important;
}

.paymentStatusPending {
    color: #F89938 !important;
}

.paymentStatusFailed {
    color: #EE3923 !important;
}
/***END OF PAYMENT COMPLETION PAGE***/

/***START OF PAYMENTS***/
#jccButtonContainer button {
    width: 100%;
    line-height: 2.5;
    border-radius: 5px !important;
}

    #jccButtonContainer button:hover {
        background-color: var(--primary);
    }
/***END OF PAYMENTS***/

/***START OF MANAGER PAGES***/

/***START OF DASHBOOARD */
#dash-cards {
    margin: 20px !important;
}

/* Manage Requests page*/

#colSideManagement {
    padding: 25px;
    border-radius: 15px;
    box-shadow: 0px 0px 5px var(--secondary);
    margin-top: 60px;
    background-color: var(--rowOrange);
}

.top-buffer {
    margin-top: 50px;
}

.feedback_cont {
    padding: 25px;
    border-radius: 15px;
    box-shadow: 0px 0px 5px var(--secondary);
    margin-top: 60px;
    background-color: var(--rowOrange);
    display: block;
}

.personPreviewSideCol {
    padding: 25px;
    border-radius: 15px;
    box-shadow: 0px 0px 5px var(--secondary);
    margin-left: 25px;
    background-color: var(--rowOrange);
    display: inline-block;
    width: -webkit-fill-available;
}

.orange-form {
    background-color: var(--rowOrange);
}

.myTagBox .form-control {
    background: var(--rowOrange);
}

#myMemo .form-control[readonly] {
    background-color: var(--rowOrange);
}

.section-title h4 {
    text-align: left;
    color: #f67336 !important;
}

.dashboardRow #dash-label {
    color: var(--secondary);
    font-size: 14px;
}

.dashboardRow #dash-info {
    color: #f67336 !important;
}


#rowBtnSmall {
    margin-top: 15px;
}

#smallViewCard {
    float: right;
    margin-top: -20px;
}

.popupClaimApproval .modal-content.dxbs-modal-content {
    width: 95em;
    transform: translate(-30%, 0);
}

.popupClaimApproval #approveContend {
    width: 90em;
    height: 50em;
}

/** Accept Bid PopUp **/

.VoucherRow {
    margin-top: 1em;
    margin-left: 2em;
    margin-right: 1.5em;
}

    .VoucherRow .voucherCodeInsert {
        margin-top: 0.5em;
    }

    .VoucherRow #btnVoucherRedeem {
        padding-left: 1.2em;
        padding-right: 1.2em;
    }

.JccPaymentRow {
    margin: 1em;
    margin-left: 3em;
    margin-right: 3em;
}

    .JccPaymentRow .JccGatewayContainer {
        text-align: center;
        border: 1px solid #80c242;
        border-radius: 5px;
        background-color: whitesmoke;
    }

        .JccPaymentRow .JccGatewayContainer .JccGatewayLogo {
            height: 45px;
            cursor: pointer;
            padding-left: 6.5rem;
            padding-right: 6.5rem;
        }

        .JccPaymentRow .JccGatewayContainer:hover, .JccPaymentRow .JccGatewayContainer:active {
            background-color: #f1f1f1;
        }

.PayPalPaymentRow {
    margin: 1em;
    margin-left: 3em;
    margin-right: 3em;
}

    .PayPalPaymentRow #paypal-button-container .paypal-buttons {
    }

.noMarginP p {
    margin: 0 !important;
}

.boldP p {
    font-weight: bold;
}

.input-group .form-control:last-child, .input-group-addon:last-child, .input-group-btn:first-child > .btn-group:not(:first-child) > .btn,
.input-group-btn:first-child > .btn:not(:first-child), .input-group-btn:last-child > .btn, .input-group-btn:last-child > .btn-group > .btn,
.input-group-btn:last-child > .dropdown-toggle {
    border-radius: 4px;
}



th.dxbs-calendar-dow {
    border: none !important;
    background-color: transparent;
}

.headerSpacer {
    margin-left: 1rem;
}


#downloadExpertiseValidationFileContainer {
    text-align: center;
}

.pictureText {
    display: none;
}

/***START OF MOBILE VIEW ***/
@media (max-width: 641px) {

    .longTitle.submenutext .oi, .longTitle.submenutext .fa, .longTitle.submenutext .far, .longTitle.submenutext .fas {
        font-size: 1.2rem !important;
    }

    #smallViewCard {
        float: left;
        width: 100%;
        margin-bottom: 5px;
        margin-top: 0;
    }

    .profileRow {
        margin: 20px;
    }

    .orangeRow {
        margin: 20px;
    }

    .smallScreenRow {
        margin-left: -25px;
    }

    .myPopUp {
        height: auto;
    }

        .myPopUp > .dxbs-modal-content {
            max-width: -webkit-fill-available;
            text-align: center;
        }

    .dxbs-modal > .dxbs-popup {
        min-width: auto !important;
    }

    .modal-dialog.dxbs-popup.dxbs-popup-adaptivity.dxbs-popup-fixed-width.myPopUp {
        width: auto !important;
    }

    .dxbl-modal > .dxbs-modal > .dxbs-popup {
        width: auto !important;
    }

    .confirmaitonPopup {
        height: auto;
    }

        .confirmaitonPopup > .dxbs-modal-content {
            max-width: 320px;
            top: 50%;
            left: 30%;
            transform: translate(-50%, 0%);
            text-align: center;
        }

    .confirmSubmit {
        height: auto;
    }

        .confirmSubmit > .dxbs-modal-content {
            max-width: 320px;
            top: 50%;
            left: 30%;
            transform: translate(-50%, 0%);
        }

    .mainContainer {
        padding: 20px;
    }

    #page-StudentQuestionReview.mainContainer {
        padding: 35px !important;
    }

    #page-StudentQuestionFeedback.mainContainer {
        padding: 35px !important;
    }

    #colSideManagement {
        padding: 45px;
    }

    #rowSidebarVersion {
        display: none !important;
    }

    #myMemo .form-control[readonly] {
        width: 300px !important;
    }


    #page-Questions, #page-StudentQuestions {
        padding: 20px;
    }

        #page-Questions .text-separator {
            margin-right: 100px;
        }

    #overviewDemoDropZone button {
        font-size: 12px;
        width: auto !important;
    }

    #questionStages {
        padding-left: 0px;
        margin-left: -50px;
    }

    #colQuestionPreview {
        margin: 20px;
    }

    .spinnerOffcenter > div {
        position: relative;
        transform: translate(0%, 50%);
    }

    .rowPopupButtons button {
        width: 100% !important;
    }

    #tableStagesStudent div {
        min-width: 60px;
    }

    .navbar {
        min-height: 35px !important;
    }

    .dxbs-memo .form-control:not(.dxbs-disable-mh) {
        min-height: 4em;
        /* width: 265px;*/
    }

    .btn.btn-primary {
        overflow: unset !important;
    }

    .popupClaimApproval .modal-content.dxbs-modal-content {
        width: 70em;
        transform: translate(-50%, 0%);
    }

    .popupClaimApproval #approveContend {
        width: 21em;
        height: 30em;
    }

    #declineClaimPopup #declineContend {
        width: 270px;
    }

    .tallBtn .btn-sm {
        height: 50px;
    }

    #noClaimsMsg {
        margin-left: 15px;
    }

    #spacedBtn {
        margin-top: 15px;
    }

    #rowSendMessage {
        border-top: 0px;
    }


    .headerSpacer {
        margin-bottom: 1rem;
        margin-top: 1rem;
    }

    .btn.btn-primary {
        font-size: 0.9rem;
    }



    /**************************/
    .navbar-brand {
        padding-top: 0px;
    }

    .nav-item a {
        color: var(--secondary) !important;
    }

    .ShortTitle .oi, .ShortTitle .fa, .ShortTitle .fas {
        display: none !important;
    }


    .subMenuContainer .nav-item:hover, .nav > li > a:focus, .nav > li > a:hover {
        background-color: #ededed !important;
    }

    .submenutext {
        color: var(--secondary) !important;
    }



    .headerLogo img {
        margin-left: 5px;
        margin-right: 5px;
        transform: translateY(-8px) !important;
        height: auto !important;
        margin-top: 2px;
    }

    #btnQuestionWarnings .educate-icon {
        font-size: 25px;
        font-weight: 600;
        color: #f67336 !important;
        position: absolute;
    }

    .notification-item {
        transform: translate(-15px,-24px);
    }

    .header-right-info .navbar-nav > li .dropdown-menu {
        transform: translate(0px, 20px);
    }

    #btnQuestionWarnings .indicator-nt {
        transform: translate(25px, 0px);
    }

    .login-item {
        transform: translateY(-8px);
    }

    #btnQuestionWarnings .educate-icon {
        margin-left: 5px;
    }

    .nav-item.login-item {
        width: max-content;
    }

    .nav-item.notification-item {
        margin-right: 18px;
    }

    .ShortTitle span {
        display: none;
    }

    .login-controls-container {
        z-index: 999;
        margin-left: 3.5rem;
        margin-top: 3.5rem;
        background-size: contain;
        height: 2rem;
    }



    .mobileMenu ul.nav {
        border-bottom: 1px solid #ffff;
        border-radius: 10px;
        margin-bottom: 1rem;
        box-shadow: 0 3px 3px -2px var(--secondary);
    }


    .mobileMenu .nav-item {
        margin: 0px !important;
    }

        .mobileMenu .nav-item i {
            color: #525252 !important;
        }

    .header-right-info {
        margin: 0 auto;
        text-align: center;
    }

    .orangeRow {
        margin: 14px;
        padding: 14px;
    }

    .professionalDashCard {
        font-size: 12px;
        text-align: left !important;
        margin-bottom: 2rem;
    }

        .professionalDashCard h1 {
            font-size: 16px;
        }

        .professionalDashCard .text-separator {
            display: none;
        }


        .professionalDashCard .card-body {
            display: flex;
        }

        .professionalDashCard .card-subtitle {
            margin-left: 15px;
        }

        .professionalDashCard #ProfessionalRatingTooltip.tooltip-wrapper {
            line-height: 1;
            margin-left: 15px;
            margin-top: 4px;
        }


    .dx-tabs-content {
        padding: 10px;
    }

    .customtable {
        display: flex;
        width: 100%;
        margin-left: 17%;
    }

    #txtFilter.dxbs-textbox {
        margin-bottom: 0.5rem;
    }


    .dashboardRow {
        margin: 8px !important;
    }

    .noDetails p {
        margin-top: 1rem;
        margin-right: 0.5rem;
        margin-left: 0.5rem;
    }

    #btnFilter, .dxbs-input-group, #btnPaidStatus, #btnRefundedStatus {
        margin-top: 0.5rem;
    }

    .studentNoDetails {
        margin: 0px 0px 26px 0px;
        padding: 0px;
    }

    .dragText {
        display: none;
    }

    .validation-errors {
        width: 100%;
        margin-top: 6px;
        margin-left: 0;
    }

    textarea {
        line-height: 1rem !important;
    }

    .form-control.form-control-sm.dxbs-btn-group.dxbs-input-group-append.input-group-append {
        z-index: 0;
    }

    #spinBidAmount .dxbs-input-group {
        margin-top: 0px;
    }

    .dxbs-modal {
        overflow: hidden !important;
    }

    #rowQuestionSimpleDetails .text-separator {
        font-size: 17px;
        font-weight: 700;
    }

    textarea#txtClarification {
        line-height: 2rem !important;
    }

    .orangeRow .noDetails.noClaim {
        margin-top: 0rem !important;
    }

    .longTitle {
        /*  margin: 0 auto !important;*/
    }

    .submitQuestionBtn {
    }

    .centerOnMobile {
        padding-left: 2rem;
    }


    #studentTitleWrapper #studentAskNewButton {
        margin-left: 7px;
    }

    .parentLinkDown .longTitle:after {
        content: "\25BC";
        color: #000000;
    }

    .questionAttachment {
        order: 1;
    }

    .questionText {
        order: 2;
    }

    .pictureText {
        display: block !important;
    }

    #overviewDemoDropZone span.m-1 {
        display: none;
    }

    .JccPaymentRow .JccGatewayContainer .JccGatewayLogo {
        height: 45px;
        cursor: pointer;
        padding-left: 0;
        padding-right: 0;
    }

    .answerReviewRow {
        display: block;
    }

    .deregisterButton {
        white-space: unset;
        height: auto;
    }

    .centerOnMobileAuto {
        margin: 0 auto;
        text-align: center;
        display: table;
    }

    dxbl-modal > .dxbs-modal > .dxbs-popup {
        margin: 1rem !important;
    }

    .dxbs-checkbox {
        margin-right: 1rem;
        display: flex;
    }

    #UserSelectionFilters {
        display: inline-flex;
        flex-wrap: wrap;
    }

    .examinationInputWrapper .inputLabelContainer {
        display: table;
        margin: 0 auto;
    }
}

/***END OF MOBILE VIEW***/

/***START OF LAPTOP VIEW***/
@media (min-width: 642px) and (max-width: 1400px) {
    #smallViewCard {
        float: left;
        width: 100%;
        margin-bottom: 5px;
        margin-top: 0;
    }

    .myPopUp {
        height: auto;
        z-index: 999999;
    }

        .myPopUp > .dxbs-modal-content {
            max-width: 800px;
            /* top: 50%;*/
            left: 15%;
            transform: translate(0%, 0%);
        }

    #myMemo .form-control[readonly] {
        width: 200px !important;
    }

    .mainContainer {
        padding: 40px;
    }

    .sidebar[b-pct835abcm] {
        height: 115vh;
    }

    .popupClaimApproval .modal-content.dxbs-modal-content {
        width: 70em;
        transform: translate(-30%, 6%);
    }

    .popupClaimApproval #approveContend {
        width: 55em;
        height: 30em;
    }

    #declineClaimPopup #declineContend {
        width: 270px;
    }

    .tallBtn .btn-sm {
        height: 50px;
    }

    #page-professionalAnswer .InfoBox .btn {
        font-size: 0.9rem;
    }

    #declineClaimPopup #declineContend {
        width: 450px;
    }

    .moveOnLaptop {
        margin-left: 20px;
    }

    .btn-smallCaption {
        font-size: 0.8rem !important;
    }


    body {
        zoom: 75% !important;
    }
}

/***END OF LAPTOP VIEW***/

/***START OF GENERIC MOBILE STYLES***/
@media (pointer: coarse), (hover: none) {
    [title] {
        position: relative;
        /*display: inline-flex;*/
        justify-content: center;
    }

        [title]:focus::after {
            content: attr(title);
            position: absolute;
            top: 100%;
            color: #000;
            background-color: #fff;
            border: 1px solid;
            width: fit-content;
            padding: 3px;
            left: 0;
            z-index: 9999999999;
        }
}
/***END OF GENERIC MOBILE STYLES***/

.answerInfoRow {
    margin-bottom: 1rem;
}

.pagination.pagination-sm {
    display: flex;
}

.page-item {
    margin-right: 10px;
}

.dxbs-checkbox {
    margin-right: 1rem;
    display: flex;
}



.invalid .dxbs-input-group input.form-control, .invalid .dxbs-input-group textarea.form-control, .invalid .dx-blazor-tagbox {
    border-color: #dc3545;
}

#popupSubmitClaim .submitClaimForm .dxbs-input-group.input-group.input-group-sm {
    margin-top: 0.5rem;
}

.dxbs-pager-navbutton-container {
    display: flex;
    position: absolute;
    top: unset;
    left: unset;
    width: unset;
    height: unset;
    align-items: center;
    margin-top: 0;
    padding-top: 0;
}


    .dxbs-pager-navbutton-container .dx-image.dx-image-size-09em {
        width: 0.9em;
        height: 0.9em;
        transform: translate(-2px, -14px);
    }

@media (max-width: 640.98px) {
    #content {
        overflow-y: auto !important;
    }
}

.row.rowBid > div.col-log-2, #page-QuestionBidPreview .row.rowBid > .col-lg-2 {
    min-width: fit-content;
}

@media (max-width: 1200px) {

    #page-QuestionBidPreview .row.rowBid .col-lg-12 .col-lg-1:has(.btn.btn-primary) {
        margin-top: 8px !important;
    }
}

@media (max-width: 450px) {

    .voucher-heading {
        padding-top: 13px;
    }
}

#page-ManageApprovalRequests .col-lg-3 .row.orangeRow .row.rowMargin-bottom .col-md-9 button.btn.btn-primary {
    min-width: fit-content;
}