/*==-- login page --==*/
.grecaptcha-badge {
    opacity: 0;
}

.login-bg {
    width: 100vh;
    height: 100vw;
    background-color: #e9e9e9;
}

.login {
    max-width: 400px;
    width: 100%;
    position: absolute !important;
    top: calc(50vh - 200px);
    /*left: calc(50vw - 200px);*/
    border: 1px solid #e9e9e9;
    border-radius: 10px;
    left: 50%;
    transform: translate(-50%, -10%);
}

    .login .panel-body {
        padding: 40px;
    }

    .login .panel-heading {
        padding: 20px 40px;
        background-color: #e9e9e9;
        text-align: center;
        border-radius: 10px 10px 0 0px;
    }

    .login .logo {
        max-width: 90%;
        max-height: 50px;
    }

.btn-msoft {
    color: #ffffff;
    -webkit-text-shadow: 0 -1px 0 rgba(0, 0, 0, 0.25);
    text-shadow: 0 -1px 0 rgba(0, 0, 0, 0.25);
    background-color: #00a2ed;
    border-color: #133783 #133783 #091b40;
    border-color: rgba(0, 0, 0, 0.1) rgba(0, 0, 0, 0.1) rgba(0, 0, 0, 0.25);
    filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#ff3b5998', endColorstr='#ff133783', GradientType=0);
    filter: progid:DXImageTransform.Microsoft.gradient(enabled=false);
}

    .btn-msoft:hover,
    .btn-msoft:focus,
    .btn-msoft:active,
    .btn-msoft.active,
    .btn-msoft.disabled,
    .btn-msoft[disabled] {
        color: #ffffff;
        background-color: #0082be !important;
    }

/*===--- 2022 grid cards ---===*/
.card {
    padding: 20px;
    border-radius: 20px;
    /*box-shadow: 0px 5px 15px #e9e9e9;*/
    box-shadow: 0px 5px 15px var(--gray);
    margin-bottom: 20px;
}

    .card[data-theme='dark'] {
        box-shadow: 0px 5px 15px var(--primary);
    }

    .card .card {
        padding: inherit;
        border-radius: 0;
        box-shadow: none !important;
    }

    .card .shadow {
        box-shadow: none !important;
    }

    .card.dxbs-th {
        border-left: 2px dotted;
        border-radius: 5px;
    }

.dxbs-toolbar .dxbs-toolbar-btn .image + span, .dxbs-toolbar .dxbs-ta-ag .image + span, .dxbs-toolbar .dxbs-toolbar-btn .dxbs-check.image, .dxbs-toolbar-dropdown-item .image + span {
    margin-left: 0px !important;
}

.btn-group > .btn.dxbs-toolbar-btn:not(:first-child), .btn-group > .btn-group.dxbs-toolbar-btn:not(:first-child) {
    margin-left: 8px;
}

.dxbs-gridview .card .card {
    width: auto;
}


.sidebar-right {
    box-shadow: 0px 2px 8px 0px rgba(0, 0, 0, 0.16);
    transition: all 0.2s;
    width: 340px;
    right: 0;
    z-index: 1029;
    display: block !important;
    position: fixed;
    height: 100vh;
    padding: 60px 10px 10px 10px;
    background-color: inherit;
}

    .sidebar-right .footer {
        padding-top: 20px;
        bottom: 0;
        left: 0;
        right: 0;
        padding-left: 30px;
        background-color: inherit;
        text-align: left;
        position: absolute;
        bottom: -11px;
    }

@media (max-height: 800px) {
    .sidebar-right .footer {
        padding-left: 30px;
        position: absolute;
        background-color: inherit;
        text-align: left;
    }
}

.sidebar.d-xl-none, .sidebar-right.d-xl-none {
    width: 0px !important;
    padding: 0;
    overflow: hidden;
}

    .sidebar.d-xl-none .footer,
    .sidebar-right.d-xl-none .footer,
    .sidebar-right.d-xl-none .sidebar-content {
        display: none !important;
    }

.sidebar-content {
    padding: 10px;
    max-height: 100%;
    overflow-y: auto;
}

.profile {
    display: flex;
    flex-direction: row;
    align-items: center;
}

    .profile i {
        font-size: larger;
    }

    .profile * {
        transition: all 0.2s;
    }

    .profile .nav-link:hover, .profile li:hover {
        opacity: 0.6;
    }

    .profile .avatar {
        max-width: 40px;
        border-radius: 40px;
        transition: all 0.2s;
        cursor: pointer;
        /*Without this Seedspark icon disappears in black backgrounds*/
        background-color: white;
    }

    .profile .avalert {
        position: relative;
    }

        .profile .avalert.alerts:before {
            content: "";
            height: 16px;
            width: 16px;
            border-radius: 1em;
            font-size: 10px;
            line-height: 15px;
            text-align: center;
            display: block;
            background-color: red;
            border: 1px solid white;
            position: absolute;
            right: 7px;
            top: 7px;
            z-index: 100;
        }

    .profile .avatar:hover {
        opacity: 0.8;
    }

    .profile .avatar:active {
        opacity: 0.5;
    }

    .profile .nav-tabs {
        border: none;
    }

    .profile .nav-link, .profile li {
        padding: 10px;
        cursor: pointer;
    }

        .profile li:not(.nav-item) {
            background-color: #2C3E50
        }

        .profile .nav-link:hover, .profile li:hover {
            opacity: 0.6;
        }

    .profile .dropdown {
        display: flex;
        flex-direction: column;
        position: absolute;
        padding: 10px;
        border: 1px solid #e9e9e9;
        transition: all 0.2s;
        color: #000;
        top: 55px;
        right: 5px;
        background: inherit;
    }

        .profile .dropdown a {
            margin: 2px 0;
        }

.alertcount {
}


/*=====----- tablet & below -----=====*/
@media (max-width: 999.98px) {
    .sidebar {
        display: block !important;
        width: 100%;
    }

        .sidebar.d-xl-none {
            display: flex !important;
            width: 0px !important;
            overflow: hidden;
            height: 1px;
        }
}

/*======------ Toast CSS ------ ======*/
.toast {
    display: none;
    padding: 1.2rem;
    color: #fff;
    z-index: 1;
    position: absolute;
    width: 25rem;
    top: 2rem;
    border-radius: 1rem;
}

.toast-icon {
    display: flex;
    flex-direction: column;
    justify-content: center;
    padding: 0 1rem;
    font-size: 2.5rem;
}

.toast-body {
    display: flex;
    flex-direction: column;
    flex: 1;
    padding-left: 1rem;
}

    .toast-body p {
        margin-bottom: 0;
    }

.toast-visible {
    display: flex;
    flex-direction: row;
    animation: fadein 1.5s;
    animation-fill-mode: forwards;
    position: fixed;
    top: 0;
    left: 50%;
    z-index: 10400;
    transform: translate(-50%, 0);
    margin-top: 1rem;
}

@keyframes fadein {
    from {
        opacity: 0;
    }

    to {
        opacity: 1;
    }
}

/*Extra Grid Styling*/
.dxbs-toolbar-btn > span.oi {
    top: -1px;
}

/*File Browser Css*/
/* this is optional styling ^ */


/*===--- the nav & folder tree ---===*/
.nav-header {
    min-height: 60px;
    padding: 10px;
    width: 100%;
    margin-bottom: 20px;
    top: 0;
    z-index: 100;
}

    .nav-header .search {
        height: 38px;
        float: right;
        max-width: 200px;
    }

.file-manager h5 {
    text-transform: uppercase;
}

.file-manager {
    list-style: none outside none;
    margin: 0;
    padding: 0;
}

.folder-list li a {
    color: #666666;
    display: block;
    padding: 5px 0;
}

.folder-list li {
    border-bottom: 1px solid #e7eaec;
    display: block;
}

    .folder-list li.active {
        background: #eee;
    }

    .folder-list li.sub1 {
        padding-left: 10px;
    }

    .folder-list li.sub2 {
        padding-left: 20px;
    }

    .folder-list li.sub3 {
        padding-left: 30px;
    }

    .folder-list li.sub4 {
        padding-left: 40px;
    }

    .folder-list li.sub5 {
        padding-left: 50px;
    }

    .folder-list li i {
        padding-right: 8px;
        color: #3d4d5d;
    }



/*===--- the file folders ---===*/
.file-field .crumbs {
    height: 38px;
    padding: 0 10px 10px 10px;
    font-style: italic;
    float: right;
    width: 100%;
    border-bottom: 1px solid #a6a6a6;
    margin-bottom: 20px;
}

.file-box {
    float: left;
    width: 220px;
}

.file {
    border: 1px solid #e7eaec;
    padding: 0;
    position: relative;
    margin: 0 0 20px 20px;
}

.file-manager .hr-line-dashed {
    margin: 15px 0;
}

.file .icon,
.file .image {
    height: 100px;
    overflow: hidden;
}

.file .icon {
    padding: 15px 10px;
    text-align: center;
    width: 100%;
}

.file-control {
    color: inherit;
    font-size: 11px;
    margin-right: 10px;
}

    .file-control.active {
        text-decoration: underline;
    }

.file .icon i {
    font-size: 70px;
    color: #dadada;
}

.file .file-name {
    padding: 10px;
    overflow: hidden;
    /*  cut off titles that get too long  */
}

.file-name small {
    color: #676a6c;
}
/*===--- list view! ---===*/
.file-field.listview .file-box {
    float: left;
    width: auto;
}

.file-field.listview .icon, .file-field.listview .image, .file-field.listview .icon {
    display: none;
}


.ibox {
    clear: both;
    padding: 0;
    height: 100%;
}

    .ibox:after,
    .ibox:before {
        display: table;
    }

.ibox-content {
    color: inherit;
    padding: 15px 20px 20px 20px;
    height: 100%;
    top: 60px;
}


a:hover {
    text-decoration: none;
}

.crumbs {
    display: none;
}

/*===--- mobile ---===*/
@media (max-width: 768px) {
    .ibox {
        height: auto;
        display: none;
    }

    .crumbs {
        display: block;
    }

    .ibox-content {
        height: auto;
        position: relative;
    }
}

/*Manage Page Styling*/

.ss-tabs {
    font-size: 15px;
}
/* Table Styles */

.table-wrapper {
    margin: 10px 20px 25px;
    box-shadow: 0px 10px 30px rgba( 0, 0, 0, 0.2 );
}

.status-wrapper {
    margin: 10px 20px 25px;
    box-shadow: 0px 10px 30px rgba( 0, 0, 0, 0.2 );
    border-radius: 6px;
    border: solid black 1px;
    -moz-border-radius: 6px;
}

.fl-table {
    border-collapse: separate;
    border: solid black 1px;
    border-radius: 6px;
    -moz-border-radius: 6px;
    font-size: 15px;
    font-weight: normal;
    width: 100%;
    max-width: 100%;
    /* white-space: nowrap;*/
    /*background-color: white;*/
}

    .fl-table td, .fl-table th {
        text-align: center;
        padding: 8px 15px 8px 15px;
    }

    .fl-table td {
        /* border-right: 1px solid #f8f8f8;*/
        font-size: 15px;
        max-width: 200px;
        overflow: visible;
        text-align: left;
    }

        /*.fl-table tr:nth-child(even) {
        background: none !important;
    }*/

        .fl-table td:first-child, th:first-child {
            border-left: none;
        }


/* Responsive */

@media (max-width: 767px) {
    .fl-table {
        display: block;
        width: 100%;
    }

    .table-wrapper:before {
        content: "Scroll horizontally >";
        display: block;
        text-align: right;
        font-size: 11px;
        /*color: white;*/
        padding: 0 0 10px;
    }

    .fl-table thead, .fl-table tbody, .fl-table thead th {
        display: block;
    }

        .fl-table thead th:last-child {
            border-bottom: none;
        }

    .fl-table thead {
        float: left;
    }

    .fl-table tbody {
        width: auto;
        position: relative;
        overflow-x: auto;
    }

    .fl-table td, .fl-table th {
        padding: 20px .625em .625em .625em;
        /*height: 60px;*/
        vertical-align: middle;
        box-sizing: border-box;
        overflow-x: hidden;
        overflow-y: auto;
        /*width: 120px;*/
        font-size: 13px;
        text-overflow: ellipsis;
    }

    .fl-table thead th {
        text-align: left;
        border-bottom: 1px solid #f7f7f9;
    }

    .fl-table tbody tr {
        display: table-cell;
    }

        .fl-table tbody tr:nth-child(odd) {
            background: none;
        }

    .fl-table tr:nth-child(even) {
        background: transparent;
    }

    .fl-table tr td:nth-child(odd) {
        /*background: #F8F8F8;*/
        /*border-right: 1px solid #E6E4E4;*/
    }

    .fl-table tr td:nth-child(even) {
        /*border-right: 1px solid #E6E4E4;*/
    }

    .fl-table tbody td {
        display: block;
        text-align: center;
    }
}

.hidden {
    display: none !important;
}

.fourteenpt {
    font-size: 14px;
}

.commentGrid td {
    border-left-width: 0px;
    border-right-width: 0px;
    border-style: dotted;
}

.commentGrid th {
    border-left-width: 0px;
    border-right-width: 0px;
}

/* Comment Sidebar */

.comment-sidebar-right {
    box-shadow: 0px 2px 8px 8px rgba(0, 0, 0, 0.16);
    transition: all 0.2s;
    width: 50%;
    right: 0;
    z-index: 1030;
    display: block !important;
    position: fixed;
    height: 80%;
    padding: 10px 10px 100px 10px;
    background-color: white;
    overflow: auto;
    border-radius: 0.25rem;
    position: fixed !important;
    top: 6%;
}

    .comment-sidebar-right .footer {
        padding-left: 30px;
        text-align: left;
    }

    .comment-sidebar-right.d-xl-none {
        width: 0px !important;
        padding: 0;
        overflow: hidden;
    }

        .comment-sidebar-right.d-xl-none .footer,
        .comment-sidebar-right.d-xl-none .sidebar-content {
            display: none !important;
        }

    .comment-sidebar-right .comment-header {
        padding: 0.3rem 0rem 0 0.6rem;
        font-size: 1.4rem;
        /* justify-content: right; */
        display: flex;
        align-items: center;
    }

        .comment-sidebar-right .comment-header .close-button {
            font-size: 0.9rem;
            margin-left: auto;
            margin-bottom: 0.2rem;
            margin-right: 0.9rem;
        }


.padded-button {
    padding: 10px;
    margin: 10px;
}

.SsRichEditor {
    height: 1000px !important;
}


.btn-group button {
    margin-left: auto;
    margin-right: auto;
    display: block;
}

/* Color changing Comment button */

.blue-comment {
    color: blue !important;
    text-decoration: underline !important;
    cursor: pointer;
}

.grey-comment {
    color: #606060 !important;
    text-decoration: underline !important;
    cursor: pointer;
}

.standard-comment {
    text-decoration: underline !important;
    cursor: pointer;
}

/*Custom Comments button in Datagrid*/
.jobgridcss .dxbs-gridview > .card > .table-bordered > thead > tr > th:last-child,
.jobgridcss .dxbs-gridview > .card > .table-bordered > thead > tr > td:last-child,
.jobgridcss .dxbs-gridview > .card > .table-bordered > tbody > tr > th:last-child,
.jobgridcss .dxbs-gridview > .card > .table-bordered > tbody > tr > td:last-child,
.jobgridcss .dxbs-gridview > .card > .table-bordered > tfoot > tr > th:last-child,
.jobgridcss .dxbs-gridview > .card > .table-bordered > tfoot > tr > td:last-child {
    text-align: center !important;
}

.button-comment {
    background-color: transparent;
    border: none;
}


/* Custom Grids Add Row Button to the Left */

.addRowLeft .dx-toolbar-after {
    right: auto !important;
}

/*Tooltip*/

.tooltip-grid {
    position: relative;
    display: inline-block;
}

    .tooltip-grid .tooltiptext {
        visibility: hidden;
        max-width: 400px;
        padding: 5px;
        width: max-content;
        box-shadow: -5px 5px 10px 2px rgb(5 0 0 / 45%);
        text-align: center;
        border-radius: 6px;
        padding: 5px;
        /* Position the tooltip */
        z-index: 1;
        position: absolute;
        top: 47%;
        left: 50%;
        white-space: break-spaces;
    }


@media (max-width: 1000px) {
    .tooltip-grid .tooltiptext {
        visibility: hidden;
        max-width: 400px;
        padding: 5px;
        width: max-content;
        box-shadow: -5px 5px 10px 2px rgb(5 0 0 / 45%);
        text-align: center;
        border-radius: 6px;
        padding: 5px;
        /* Position the tooltip */
        z-index: 1;
        position: absolute;
        top: 47%;
        left: 50%;
        white-space: break-spaces;
    }
}

.tooltip-grid:hover .tooltiptext {
    visibility: visible;
}

/*Editable Grid Color Fix*/
.dx-widget {
    color: unset !important;
}

    .dx-widget .dx-datagrid {
        background-color: unset !important;
        overflow-x: auto;
        display: grid;
    }

.dx-datagrid {
    color: unset !important;
}

/*Editable Grid Button Colors are the same as the card headers they are on 
    and are hard to see without this. Does break some stuff like Revert/Undo Button on Editable Grids */
.dx-button {
    background-color: unset !important;
    border-color: unset !important;
    color: unset !important;
}
/*Fix for invisible editable grid undo/revert button*/
.dx-datagrid-revert-tooltip .dx-revert-button {
    background-color: #ea4444 !important;
    border-color: #ea4444 !important;
}


.dx-datagrid-summary-item {
    color: unset !important;
}

/*Opportunity Manage Page Detail and Status*/
.opp-card-body {
    display: flex;
    flex-wrap: wrap;
}

@media (max-width: 1000px) {
    .opp-card-body .col-sm-6 {
        flex: 100%
    }
}

.detail-card {
    padding: 0 !important;
}

.no-border {
    border: none !important;
}

.opp-sub-card {
    padding-bottom: 15px;
}

/*Opportunity Manage Page Header*/

.opp-header-left {
    -webkit-box-flex: 0;
    -ms-flex: 0 0 85%;
    flex: 85%;
    max-width: 85%;
    position: relative;
    width: 100%;
}

.opp-header-right {
    -webkit-box-flex: 0;
    -ms-flex: 0 0 15%;
    flex: 15%;
    display: flex;
    max-width: 15%;
    position: relative;
    width: 100%;
    justify-content: center;
}

@media(max-width: 600px) {
    .opp-header-left, .opp-header-right {
        max-width: unset;
        flex: unset;
    }
}

.theme-dx-button {
    display: inline-block;
    cursor: pointer;
    text-align: center;
    vertical-align: middle;
    max-width: 100%;
    -webkit-user-select: none;
    -khtml-user-select: none;
    -moz-user-select: none;
    -ms-user-select: none;
    -o-user-select: none;
    user-select: none;
    -webkit-touch-callout: none;
    -webkit-user-drag: none;
    -moz-user-drag: none;
    -ms-user-drag: none;
    -o-user-drag: none;
    user-drag: none;
    background-color: var(--primary);
    /*border-color: unset !important;
    color: unset !important;*/
}

/*Proposal Tab*/
.dxreRoot {
    width: 100% !important;
}

.dxreControl .dxrePage {
    width: 100%;
    overflow-x: auto;
}

/*Delete Popup Modals*/
.dxbs-modal.modal {
    z-index: 99999 !important;
}

/*Delete Popup content thead OppManage JSINTEROP grids*/

.dx-popup-wrapper > .dx-overlay-content {
    color: initial;
}

/*Traveler Popup*/

@media(max-width: 700px) {
    .dxbs-modal > .dxbs-popup {
        min-width: 75%;
        width: unset;
    }
}

/*Removed this because it was messing with the CopyOpp popup*/
/* .modal-dialog {
    max-width: unset !important;
}*/

.dxbrv-wrapper {
    min-width: unset !important;
}

/*DataGrid*/

.datagrid-border-radius-top-0 > .card {
    border-top-left-radius: 0;
    border-top-right-radius: 0;
}

.datagrid-popup-edit-form .dxbs-popup-scrollable .modal-content,
.datagrid-popup-edit-form .dxbs-popup-scrollable .modal-body {
    overflow: visible !important;
}

.dxbs-gridview {
    display: flex !important;
}

.dxbs-gridview .card {
    overflow: auto;
    width: -webkit-fill-available;

}
.spinner {
    border: 16px solid silver;
    border-top: 16px solid #337AB7;
    border-radius: 50%;
    width: 80px;
    height: 80px;
    animation: spin 700ms linear infinite;
    top: 40%;
    left: 55%;
    position: fixed;
    z-index: 99;
}

@keyframes spin {
    0% {
        transform: rotate(0deg)
    }

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



/*smaller RichEditor PageLayout Dropdown List*/
html > body > dxbl-popup-root > dxbl-popup-cell > dxbl-dropdown > dxbl-dropdown-dialog > div > ul > li > dxbl-toolbar-menu-item > button > svg {
    max-width: 40px;
    max-height: 50px;
}

.dx-blazor-context-menu-item.dropdown-item .dx-blazor-context-menu-item-icon {
    max-width: 40px;
    max-height: 50px;
}


/*FOR FILEBROWSER*/
.file-box {
    height: 220px;
}


.drop-zone {
    border: 2px dashed #0087F7;
    border-radius: 5px;
    height: auto;
}

.drop-zone-hover {
    border: 2px solid;
    height: auto;
}


/*Fix for Non Scrollable DxGrid Dropdowns*/
.dx-scrollable-vertical {
    display: flex;
}

/*Javascript DxPivotGrid Style*/

/*all the text inside */
.dxPivotGrid-javascript-style .dx-pivotgrid .dx-pivotgrid-area td {
    color: unset;
}

/*the grand total background*/ 
.dxPivotGrid-javascript-style .dx-pivotgrid .dx-grandtotal {
    background-color: var(--light) !important;
}

/*the row total headers*/ 
.dxPivotGrid-javascript-style .dx-row-total {
    background-color: var(--light) !important;
}

/*the row total headers*/ 
.dxPivotGrid-javascript-style .dx-total {
    background-color: var(--light) !important;
}

/*FOR Grid Header Buttons (like "New" and "Show Filter Row"), this will make it stand out a little*/

.dxbs-toolbar.dxbs-ta-nib .dxbs-ta-ag > .btn:not(:hover):not(:active):not(.active), .dxbs-toolbar .dxbs-toolbar-btn.btn.dxbs-ta-nib:not(:hover):not(:active):not(.active), .dxbs-toolbar .dxbs-toolbar-btn > .btn.dxbs-ta-nib:not(:hover):not(:active):not(.active), .dxbs-toolbar .dxbs-toolbar-btn.btn.dxbs-ta-nib:not(.active):disabled, .dxbs-toolbar .dxbs-toolbar-btn > .btn.dxbs-ta-nib:not(.active):disabled {
    background: var(--light) !important;
}