/* button loader */
.lds-ring {
    display: inline-block;
    position: relative;
    width: 10px;
    height: 10px;
}

.lds-ring div {
    box-sizing: border-box;
    display: block;
    position: absolute;
    width: 12px;
    height: 12px;
    margin-left: 5px;
    border: 1px solid #ff7f00ba;
    border-radius: 50%;
    animation: lds-ring 1.2s cubic-bezier(0.5, 0, 0.5, 1) infinite;
    border-color: #ff7f00ba transparent transparent transparent;
}

.lds-ring div:nth-child(1) {
    animation-delay: -0.45s;
}

.lds-ring div:nth-child(2) {
    animation-delay: -0.3s;
}

.lds-ring div:nth-child(3) {
    animation-delay: -0.15s;
}

@keyframes lds-ring {
    0% {
        transform: rotate(0deg);
    }

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

/* Main Loader */
.loading {
    width: 100%;
}

div#loading2,
div#loading3,
div#loading4,
div#archived-loading4,
div#loading5 {
    background-color: #fff;
    padding: 40px;
}

.lds-ring {
    display: inline-block;
    position: relative;
    width: 80px;
    height: 80px;
}

.lds-ring div {
    box-sizing: border-box;
    display: block;
    position: absolute;
    width: 64px;
    height: 64px;
    margin-left: 5px;
    border: 5px solid #ff7f00ba;
    border-radius: 50%;
    animation: lds-ring 1.2s cubic-bezier(0.5, 0, 0.5, 1) infinite;
    border-color: #ff7f00ba transparent transparent transparent;
}

.lds-ring div:nth-child(1) {
    animation-delay: -0.45s;
}

.lds-ring div:nth-child(2) {
    animation-delay: -0.3s;
}

.lds-ring div:nth-child(3) {
    animation-delay: -0.15s;
}

@keyframes lds-ring {
    0% {
        transform: rotate(0deg);
    }

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

/* Alerts */
.jconfirm .btn-default:hover {
    background-color: #e7e7e7 !important;
}

.jconfirm .btn-default {
    background-color: #efefef !important;
    border: 1px solid #767676 !important;
    -webkit-box-shadow: 1px 1px 2px 0px #76767666 !important;
    -moz-box-shadow: 1px 1px 2px 0px #76767666 !important;
    box-shadow: 1px 1px 2px 0px #76767666 !important;
    text-transform: capitalize !important;
    font-weight: 300 !important;
}

.jconfirm .jconfirm-buttons {
    margin-right: -16px;
}

.jconfirm .jconfirm-box div.jconfirm-content-pane .jconfirm-content span {
    font-weight: 600;
    display: inline-block;
    padding-bottom: 5px;
}

.jconfirm .jconfirm-box .jconfirm-buttons>button {
    min-width: 71px;
    padding: 10px 16px !important;
}

.jconfirm .jconfirm-box .jconfirm-buttons>button:first-child {
    float: left;
    display: flex;
    align-items: center;
    gap: 8px;
    background-color: #fff !important;
    color: #1A1A1A !important;
    box-shadow: none !important;
    border: none !important;
    text-transform: uppercase !important;
    margin-left: -16px;
    font-feature-settings: 'clig' off, 'liga' off;
    font-family: Arial;
    font-size: 14px !important;
    font-style: normal;
    font-weight: 400 !important;
    line-height: 16px;
}

.jconfirm .jconfirm-cell.confirm .jconfirm-box .jconfirm-buttons>button:first-child::after,
.jconfirm .jconfirm-cell.three-buttons .jconfirm-box .jconfirm-buttons>button:first-child::after {
    content: url(../images/cancel-icon.svg);
    color: #1A1A1A !important;
    font-feature-settings: 'clig' off, 'liga' off;
    font-family: Arial;
    font-size: 14px !important;
    font-style: normal;
    font-weight: 400 !important;
    line-height: 16px;
    width: 18px;
    height: 18px;
}

.jconfirm .jconfirm-box .jconfirm-buttons>button:last-child,
.jconfirm .jconfirm-box .jconfirm-buttons>button:nth-child(2) {
    float: right;
    display: flex;
    align-items: center;
    flex-direction: column;
    justify-content: center;
    border-radius: 4px;
    background-color: #FF5F00 !important;
    color: #FFF !important;
    box-shadow: none !important;
    border: none !important;
    text-transform: uppercase !important;
    font-feature-settings: 'clig' off, 'liga' off;
    font-family: Arial;
    font-size: 14px !important;
    font-style: normal;
    font-weight: 400 !important;
    line-height: 16px;
}

.jconfirm .manual-confirm .jconfirm-box .jconfirm-buttons>button:first-child {
    justify-content: center;
}

.jconfirm .manual-confirm .jconfirm-box .jconfirm-buttons>button:first-child:hover {
    background-color: #FF5F00 !important;
    color: #FFF !important;
}

.jconfirm-box.jconfirm-hilight-shake.jconfirm-type-default.jconfirm-type-animated {
    text-align: left;
    padding: 24px 24px 4px 24px;
}

.jconfirm .jconfirm-box div.jconfirm-title-c {
    color: #1A1A1A;
    font-feature-settings: 'clig' off, 'liga' off;
    font-family: Arial;
    font-size: 20px !important;
    font-style: normal;
    font-weight: 700;
    line-height: 24px !important;
    text-align: left;
    padding-bottom: 8px !important;
}

.jconfirm .jconfirm-box div.jconfirm-content-pane .jconfirm-content {
    color: var(--Gray-100, #666);
    font-feature-settings: 'clig' off, 'liga' off;
    font-family: Arial;
    font-size: 16px;
    font-style: normal;
    font-weight: 400;
    line-height: 24px;
}

.jconfirm.jconfirm-white .jconfirm-box .jconfirm-buttons,
.jconfirm.jconfirm-light .jconfirm-box .jconfirm-buttons {
    float: none !important;
}

.jconfirm-cell {
    transition: all 0.6s ease-out;
}

/* .topp {
    transform: translateY(-30.5%);
} */

#ordersQueueToast,
#ordersQueueToastResend,
#ordersQueueToastApproved,
#ordersQueueToastConfimed,
#ordersQueueToastArchived,
#ordersQueueToastUnarchived,
#ordersQueueToastSentConfirmation,
#ordersQueueToastFraudStatusChanged,
#ordersQueueToastCopy,
#ordersQueueToastRequestCopy {
    visibility: hidden;
    display: flex;
    padding: 6px 0px 6px 16px;
    align-items: center;
    gap: 8px;
    border-radius: 12px;
    background: #1A1A1A;
    position: fixed;
    z-index: 1000;
    left: calc(50% - 300px);
    bottom: 30px;
    color: var(--White, #FFF);
    text-align: center;
    font-feature-settings: 'clig' off, 'liga' off;
    font-family: Arial;
    font-size: 14px;
    font-style: normal;
    font-weight: 400;
    line-height: 20px;
    /* 142.857% */
}

div#ordersQueueToastCopy,
div#ordersQueueToastRequestCopy {
    right: 25px;
    left: auto;
    padding-right: 16px;
}

#ordersQueueToast .toastAccept,
#ordersQueueToastResend .toastAccept,
#ordersQueueToastApproved .toastAccept,
#ordersQueueToastConfimed .toastAccept,
#ordersQueueToastArchived .toastAccept,
#ordersQueueToastUnarchived .toastAccept,
#ordersQueueToastSentConfirmation .toastAccept,
#ordersQueueToastFraudStatusChanged .toastAccept,
#ordersQueueToastCopy .toastAccept {
    display: flex;
    padding: 10px 16px;
    align-items: center;
    gap: 8px;
}

#ordersQueueToast .toastAccept a,
#ordersQueueToastResend .toastAccept a,
#ordersQueueToastApproved .toastAccept a,
#ordersQueueToastConfimed .toastAccept a,
#ordersQueueToastArchived .toastAccept a,
#ordersQueueToastUnarchived .toastAccept a,
#ordersQueueToastSentConfirmation .toastAccept a,
#ordersQueueToastFraudStatusChanged .toastAccept a
{
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    text-decoration: none;
    color: #FFF;
}

#ordersQueueToast.showS,
#ordersQueueToastResend.showS,
#ordersQueueToastApproved.showS,
#ordersQueueToastConfimed.showS,
#ordersQueueToastArchived.showS,
#ordersQueueToastUnarchived.showS,
#ordersQueueToastSentConfirmation.showS,
#ordersQueueToastFraudStatusChanged.showS,
#ordersQueueToastCopy.showS,
#ordersQueueToastRequestCopy.showS {
    visibility: visible;
    -webkit-animation: fadein 0.8s, fadeout 0.8s 2.8s;
    animation: fadein 0.8s, fadeout 0.8s 2.8s;
}

div#ordersQueueToastResend,
div#ordersQueueToastApproved,
div#ordersQueueToastConfimed,
div#ordersQueueToastArchived,
div#ordersQueueToastUnarchived,
div#ordersQueueToastSentConfirmation,
div#ordersQueueToastFraudStatusChanged
{
    left: calc(50% - 136px);
}

/* Animations to fade the snackbar in and out */
@-webkit-keyframes fadein {
    from {
        bottom: 0;
        opacity: 0;
    }

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

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

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

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

    to {
        bottom: 0;
        opacity: 0;
    }
}

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

    to {
        bottom: 0;
        opacity: 0;
    }
}

.select2-results__options {
    max-height: 400px !important;
}

.select2-container--open .select2-dropdown--below {
    margin-top: 3px;
    border-radius: 2px;
    border: 1px solid #aaa;
}

.select2-container .select2-selection--single .select2-selection__rendered .select2-selection__clear {
    font-size: 19px;
    margin-top: -2px;
    color: #757575;
}

div.daterangepicker div.ranges li {
    font-feature-settings: 'clig' off, 'liga' off;
    font-family: Arial;
    font-size: 13px;
    font-style: normal;
    font-weight: 400;
    line-height: normal;
}


div.daterangepicker div.ranges li.active {
    background-color: rgba(243, 243, 243, 0.50);
    color: #1F2937;
}

.daterangepicker {
    margin-top: 3px;
    min-width: 143px;
    border-radius: 2px;
    border-color: #aaaaaa;
}

.daterangepicker ul li {
    width: 143px;
}

@media (min-width: 564px) {
    .daterangepicker .ranges ul {
        width: 143px;
    }
}

.daterangepicker div.ranges li:hover,
.daterangepicker div.ranges li.active:hover {
    background-color: #5897fb !important;
    color: #fff !important;
}


.daterangepicker.openscenter:before,
.daterangepicker.openscenter:after {
    display: none !important;
}

.daterangepicker.show-ranges.ltr .drp-calendar.left {
    background-color: #fff;
}

.tooltip>.tooltip-inner {
    padding: 10px !important;
}

/* Login */
#welcomeMessage {
    display: flex;
    gap: 10px;
    align-items: center;
    justify-content: end;
}

.logout-btn {
    display: flex;
    width: 21px;
    height: 28px;
    padding: 0;
    justify-content: center;
    align-items: center;
    border-radius: 2px;
    border: none;
    background: transparent;
}
.logout-btn svg {
    width: 21px;
    height: 21px;;
}
/* End Login */