:root {
    --success: #21b30a;
    --info: #ff0000;
    --warn: #efee00;
    --error: #ff1100;
    --green: #00d600;
    --green-inactive: #008000;
    --green-background: #80ff80;
    --green-active: #0bbf0b;
    --green-disabled: #adafad;
    --red: #ff0000;
    --red-active: #ff0000;
    --red-inactive: #980000;
    --red-background: #ff8080;
    --red-disabled: #c7bbbb;
   
    --blue: #38558F;
    --orange: #f59c1a;
    --black: #000000;
    --white: #ffffff;
    --yellow: #DDCE3E;
    --yellow-inactive: #8f8326;
    --yellow-background: #fff27f;
    --light-grey: #dddddd;
    --medium-grey: #a2a2a2;
    --dark-grey: #808080;
    --captured: #808080;
    --historic: #dddddd;
    --ordered: #242A30;
    --billed: #f6bb63;
    --charged: #f59c1a;
    --pending: #348fe2;
    --issued: #00acac;
    --cancelled: #ff0000;
    --invalid: #ff0000;
    --changed: #ee00ff;
    --package: #ff2b8a;
    --issuechanged: #6200ac;
    --postsale: #ff7957;
    --void: #cdcdcd;
    --proccesing: #c7d91e;
    --statusGreen: rgba(57, 186, 38, 0.7);
    --statusYellow: rgba(255, 153, 0, 0.5);
    --statusPurple: rgba(97, 0, 130, 0.5);
    --information: #91e2ff;

    --on: rgba(60 ,154, 0, 1);
    --onDisabled: rgb(122 144 108);
    --off: rgb(134, 134, 134);
    --offDisabled: rgb(204 204 204);
}


/* SHORTS*/
.relative {
    position: relative;
}

.absolute {
    position: absolute;
}

.right {
    text-align: right;
}

.left {
    text-align: left;
}

.fleft {
    float: left;
}

.full {
    width: 100%
}
.text-red{
    color: var(--red)!important;
}
.text-green{
    color: var(--green);
}
/* END SHORTS*/
/* ALERTS*/
.alerts {
    padding: 6px 0;
    text-align: center;
    font-size: 15px;
    font-weight: 700;
    width: 100%;
}

.alerts > label {
    font-size: 12px;
    display: block;
    color: inherit;
}


.alerts-information {
    background-color: var(--information);
}

.alerts-warning {
    background-color: var(--warn);
}

.alerts-danger {
    background-color: var(--error);
    color: var(--white);
}

/* END ALERTS*/
/* LOADING*/
.dlr-loading {
    display: inline-block;
    position: absolute;
    width: 80px;
    height: 80px;
    margin: 0px auto;
    top: 50%;
    left: 50%;
}

.dlr-loading div {
    position: absolute;
    border: 4px solid #120e1b;
    opacity: 1;
    border-radius: 50%;
    animation: dlr-loading 1s cubic-bezier(0, 0.2, 0.8, 1) infinite;
}

.dlr-loading div:nth-child(2) {
    animation-delay: -0.5s;
}

@keyframes dlr-loading {
    0% {
        top: 36px;
        left: 36px;
        width: 0;
        height: 0;
        opacity: 1;
    }
    100% {
        top: 0;
        left: 0;
        width: 72px;
        height: 72px;
        opacity: 0;
    }
}

/* END LOADING*/
/* LOADER */
.resumePanelBody.form-control {
    height: 20px
}

.loaderControlButton {
    width: 61px;
}

/* END LOADER*/
/* LOADER FOOTER*/
.loaderBottom {
    /* float: right; */
    width: 100%;
    display: flex;
    /* flex-direction: column; */
    flex-wrap: wrap;
    /* justify-content: flex-end; */
}

.leftContainer {
    display: flex;
}

.rightContainer {
    display: flex;
    margin-left: auto;
}

.loaderBottomRightItem1 {
    /* display: flex; */
    /* flex-direction: column; */
    /* flex: 1; */
    /* float: left; */
    /* align-items: flex-end; */
}

.loaderBottomLeftItem1 {
    /* display: flex; */
    /* flex-direction: column; */
    /* flex: 1; */
}


.loaderBottomRightItem2 {
    /* display: flex; */
    /* flex-direction: column; */
    /* flex: 2; */
    /* align-items: flex-end; */
}

.loaderBottomRightItem3 {
    display: flex;
    flex-direction: column;
    flex: 3;
}

/* END LOADER FOOTER*/
/*PAY METHODS BUTTONS*/
.btn-pay-grp {
    margin-left: 220px
}

.btn-pay {
    background-color: var(--issued);
    color: var(--white);
    height: 21px;
    font-size: 12px;
    padding: 1px 4px;
    margin: 0 2px;
}

label.btn.btn-pay:hover {
    background-color: #008484;
    color: var(--white);
}

label.btn.btn-pay.active {
    background-color: #008484;
    color: var(--white);
}

.btnCharge {
    height: 22px;
    padding: 0;
    font-size: 10px;
    width: 70px;
}

.btnChargeAndRefundLeft {
    height: 22px;
    padding: 0;
    font-size: 10px;
    width: 70px;
    border-radius: 3px 0 0 3px !important;
}

.btnChargeAndRefundRight {
    height: 22px;
    padding: 0;
    font-size: 10px;
    width: 15px;
    border-radius: 0 3px 3px 0 !important;
    -webkit-border-radius: 0 3px 3px 0 !important;
    -moz-border-radius: 0 3px 3px 0 !important;
    -ms-border-radius: 0 3px 3px 0 !important;
    -o-border-radius: 0 3px 3px 0 !important;
}

.btnTpvCharge {
    height: 22px;
    padding: 0;
    font-size: 10px;
    width: 55px;
    background-color: var(--captured);
    color: var(--white);
}

.btnCopy {
    color: inherit;
    background: inherit;
    border: inherit;
    padding: 4px;
}

.payLinkBtn {
    font-size: 11px;
    color: white;
    background: var(--info);
    border: none;
    border-radius: 0;
    height: 24px;
}

.actionTokenBtn {
    font-size: 11px;
    color: white;
    background: var(--info);
    border: none;
    border-radius: 0;
    height: 24px;
}

/*END PAY METHODS BUTTONS*/
/* FORMS CONTROLS*/
.flex-control {
    border: 1px solid var(--light-grey);
    -webkit-box-shadow: none;
    box-shadow: none;
    border-radius: 3px;
    -webkit-border-radius: 3px;
    -moz-border-radius: 3px;
    width: 100%;
    height: 25px;
}

/* END FORMS CONTROLS*/
/* INPUT MANIPULATION*/
.text-uppercase {
    text-transform: uppercase;
}

.no-border-input {
    border: none;
}

/*END INPUT MANIPULATION*/

/*INPUTS*/
input.disabled {
    background-color: var(--light-grey) !important;
    border-radius: 2px;
    border: 2px solid;
    cursor: not-allowed;
    color: var(--green);
    text-align: center;
}

input.disabled:focus-visible {
    outline: none;
}

input.enabled {
    background-color: var(--white) !important;
}

input.readonly {
    cursor: not-allowed;
    color: transparent;
    text-shadow: 0 0 1px var(--dark-grey);
}



/* Styled Selector */
.styledSelector {
    position: relative;
    max-width: 200px;
    height: fit-content;
    border: 1px solid #e9e5f3;
    border-radius: 0px;
    background-color: #fff;
    transition: border-color 0.3s ease, box-shadow 0.3s ease;
    -webkit-border-radius: 0px;
    -moz-border-radius: 0px;
    -ms-border-radius: 0px;
    -o-border-radius: 0px;
}
.hidden{
    display: none;
}

.styledSelector i {
    position: absolute;
    right: 0px;
    top: 0;
    pointer-events: none;
    color: rgb(97 102 120 / 90%);
    font-size: 16px;
    width: 20px;
    text-align: center;
    background-color: #fff;
    display: flex;
    height: 100%;
    justify-content: center;
    align-items: center;
}

.styledSelector input {
    /* width: 100%;
    height: 100%; */
    background: none;
    border: none;
    font-size: 12px;
    color: #333;
    outline: none;
    cursor: pointer;
    transition: all 0.3s ease;
    border-radius: 0px;
    border: 0px !important;
    caret-color: transparent;
    -webkit-border-radius: 0px;
    -moz-border-radius: 0px;
    -ms-border-radius: 0px;
    -o-border-radius: 0px;
}


.styledSelector input::placeholder {
    color: #aaa;
    font-size: 12px;
}

.styledSelector input:hover{
    outline: 0px !important;
}

/* .styledSelector input:focus {
    border-color: #3d9cff !important;
    box-shadow: 0 2px 8px rgba(61, 156, 255, 0.1);
    border-radius: 0px !important;
    -webkit-border-radius: 0px !important;
    -moz-border-radius: 0px !important;
    -ms-border-radius: 0px !important;
    -o-border-radius: 0px !important;
} */

.styledSelector:has(input:focus) {
    border: 1px solid #4e8afac1 !important;
}

.styledSelector input.default {
    padding: 8px 10px;
}

.styledSelector input.xl {
    padding: 9px 30px 9px 15px;
}

.styledSelector input.md,
.styledSelector input.sm {
    padding: 8px 10px;
}

.styledSelector input.xs {
    padding: 6px;
    max-width: 140px;
}

/* Dropdown Menu */
.select-container {
    position: relative;
    border: 0px;
}


.select-container ul {
    list-style: none;
    position: absolute;
    top: 5px;
    left: 0;
    width: 170px;
    max-height: 250px;
    overflow-y: auto;
    background: #fff;
    border-radius: 0px;
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1);
    z-index: 1000;
    padding: 0;
    margin: 0;
    /*opacity: 0;
    *//*visibility: hidden;
    */transition: opacity 0.3s ease, visibility 0s 0.3s;
    -webkit-transition: opacity 0.3s ease, visibility 0s 0.3s;
    -moz-transition: opacity 0.3s ease, visibility 0s 0.3s;
    -ms-transition: opacity 0.3s ease, visibility 0s 0.3s;
    -o-transition: opacity 0.3s ease, visibility 0s 0.3s;
    opacity: 1;
    visibility: visible;
    -webkit-border-radius: 0px;
    -moz-border-radius: 0px;
    -ms-border-radius: 0px;
    -o-border-radius: 0px;
}



.select-container ul li {
    padding: 12px 16px;
    cursor: pointer;
    border-bottom: 1px solid #eee;
    font-size: 12px;
    color: #161719;
    font-weight: 400;
    /* transition: background-color 0.1s, color 0.1s ease;
    -webkit-transition: background-color 0.1s, color 0.1s ease;
    -moz-transition: background-color 0.1s, color 0.1s ease;
    -ms-transition: background-color 0.1s, color 0.1s ease;
    -o-transition: background-color 0.1s, color 0.1s ease; */
}

.select-container ul li:hover {
    background-color: #e6f3fe;
}

.select-container ul li.selected {
    background-color: #b9dbf9;
}

.select-container ul li:not(.selected):active {
    background-color: #b9dbf9;
}



#rowsPerPageSelect.styledSelector input{
    max-width: 60px;
}
#rowsPerPageSelect .select-container ul{
    top: -204px;
    left: -115px;
}
/*End of StyledSelector*/


#fromDate,
#toDate,
#dateFrom,
#dateTo,
.dateRange{
    border: 1px solid #e9e5f3;
    font-size: 11px;
    padding: 9px 30px 9px 15px;
    background: none;
    color: #333;
    outline: none;
    cursor: pointer;
    transition: all 0.3s ease;
    border-radius: 4px;
    -webkit-transition: all 0.3s ease;
    -moz-transition: all 0.3s ease;
    -ms-transition: all 0.3s ease;
    -o-transition: all 0.3s ease;
    -webkit-border-radius: 4px;
    -moz-border-radius: 4px;
    -ms-border-radius: 4px;
    -o-border-radius: 4px;
}


input.text {
    border: none;
    outline: none;
    padding: 0;
    letter-spacing: unset;
    height: 14px;
}

input.number {
    text-align: right;
}

input.toggleable {
    background-color: var(--light-grey) !important;
    border-radius: 2px;
    border: 2px solid;
    cursor: pointer;
    color: var(--green);
    text-align: center;
}

/*END INPUTS*/

/*SELECTS*/
select.disabled {
    background-color: var(--light-grey) !important;
    color: var(--white);
    border-radius: 2px;
    border: none;
    cursor: not-allowed;
}

select.disabled:focus-visible {
    outline: none;
}

select.enabled {
    background-color: var(--white) !important;
}

select.readonly {
    cursor: not-allowed;
    color: transparent;
    text-shadow: 0 0 1px var(--dark-grey);
}

select.text {
    border: none;
    outline: none;
    padding: 0;
    letter-spacing: unset;
    height: 14px;
}

select.toggleable {
    background-color: var(--light-grey) !important;
    border-radius: 2px;
    border: 2px solid;
    cursor: pointer;
    color: var(--green);
    text-align: center;
}

/*END SELECT*/
/*TEXTAREA*/
textarea.disabled {
    background-color: var(--light-grey) !important;
    color: var(--light-grey);
    border-radius: 2px;
    border: none;
    cursor: not-allowed;
}

textarea.disabled:focus-visible {
    outline: none;
}

textarea.fake-disabled {
    background-color: var(--light-grey) !important;
    color: var(--light-grey);
    border-radius: 2px;
    border: none;
    cursor: not-allowed;
}

textarea.fake-disabled:focus-visible {
    outline: none;
}

textarea.enabled {
    background-color: var(--white) !important;
}

textarea.readonly {
    cursor: not-allowed;
    color: transparent;
    text-shadow: 0 0 1px var(--dark-grey);
}

textarea.text {
    border: none;
    outline: none;
    padding: 0;
    letter-spacing: unset;
    height: 14px;
}

/*END TEXTAREA*/
.toIssueItemRow {
    border: 1px solid var(--dark-grey);
    border-radius: 4px;
    /* height: 40px; */
    padding: 4px;
    margin-bottom: 2px;
    background-color: var(--pending);
    color: var(--white);
}

.toIssueItemColumn {
    align-items: flex-start;
}

.toIssueItemColumnRight {
    align-items: flex-end;
    padding: 5px;
}

.toCartItemRow {
    border: 1px solid var(--dark-grey);
    border-radius: 4px;
    height: 40px;
    padding: 4px;
    margin-bottom: 2px;
    background-color: var(--ordered);
    color: var(--white);
}

.toCartItemColumn {
    align-items: flex-start;
}

.toCartItemColumnRight {
    align-items: flex-end;
    padding: 5px;
}

div.itemToBillContainer {
    flex: auto;
}

div.itemToBill {
    margin: 0 4%;
    border: 1px solid white;
    border-radius: 9px;
    background-color: var(--black);
    color: var(--white);
    font-size: 12px;
}

.cartChangeIcon {
    padding: 2px 3px 0 3px;
}

/*FLEX*/
.flex{
   display: flex;
}
.flex-row {
    display: flex;
    flex-direction: row;
    flex-wrap: wrap;
    width: 100%;
}

.flex-row.h {
    flex-wrap: nowrap;
}

.flex-column {
    display: flex;
    flex-direction: column;
}

.flex05 {
    flex: 0.5;
}

.flex1 {
    flex: 1;
}

.flex2 {
    flex: 2;
}

.flex3 {
    flex: 3;
}

.flex4 {
    flex: 4;
}

.flex5 {
    flex: 5;
}

.flex-column05 {
    display: flex;
    flex-direction: column;
    flex: 0.5;
}

.flex-column1 {
    display: flex;
    flex-direction: column;
    flex: 1;
}

.flex-row.h > .flex-column1 {
    display: flex;
    flex-direction: column;
    flex: 2;
}

.flex-column2 {
    display: flex;
    flex-direction: column;
    flex: 2;
}

.flex-column3 {
    display: flex;
    flex-direction: column;
    flex: 3;
}

.flex-column4 {
    display: flex;
    flex-direction: column;
    flex: 4;
}

.flex-column5 {
    display: flex;
    flex-direction: column;
    flex: 5;
}
.flex-column6 {
    display: flex;
    flex-direction: column;
    flex: 6;
}
.flex-no-grow {
    flex-grow: 0;
}
.flex-auto {
    flex: auto;
}
.flex-label {
    display: flex;
    /* flex: 1 1 100%; */
    font-size: 11px;
    flex-direction: column;
}

.flex-label-lg {
    font-size: 12px;
}

.flex-row.h > .flex-label {
    display: flex;
    font-size: 10px;
    flex-direction: column;
    flex: 1 1 10%;
}
.flex-inline{
   flex-direction: row;
   align-items: baseline;
}
.flex-input {
    display: flex;
    flex: 1 1 100%;
    /* border-bottom: 1px solid var(--light-grey); */
    margin-bottom: 6px;
}

.flex-input-noborder {
    display: flex;
    flex: 1 1 100%;
}

.flex-row.top-border {
    border-top: 1px solid var(--light-grey);
    margin-bottom: 6px;
}

.flex-row.dotted-bottom {
    border-bottom: 1px dotted var(--light-grey);
    margin-bottom: 3px;
}

.flex-jstart {
    justify-content: flex-start;
}

.flex-jend {
    justify-content: flex-end;
}

.flex-alg-item-end {
    align-items: flex-end;
}

.flex-alg-item-start {
    align-items: flex-start;
}

.flex-jcenter {
    justify-content: center;
}

.flex-alg-item-center {
    align-items: center;
}

.flex-jspacea {
    justify-content: space-around;
}

.flex-jspacee {
    /* justify-content: space-evenly; */
}

.flex-jspaceb {
    justify-content: space-between;
}

.flex-left {
    align-items: flex-start;
}

.flex-right {
    align-items: flex-end
}

.grow0 {
    flex-grow: 0;
}

.flex-note {
    display: flex;
    /* flex: 1 1 100%; */
    font-size: 9px;
    /* flex-direction: column; */
}
.flex-note2 {
    display: flex;
    /* flex: 1 1 100%; */
    font-size: 11px;
    /* flex-direction: column; */
}
.flex-userImg {
    width: 23px;
    height: 23px;
    overflow: hidden;
    border-radius: 50%;
}

.flex-rightButtons {
    height: 100%;
    display: flex;
}

.flex-title {
    background-color: var(--billed);
    color: var(--white);
    width: 100%;
    padding: 3px;
    font-size: 12px;
    height: auto;
}
.gap10{
    gap: 10px;
}

.gap20{
    gap: 20px;
}

/*END FLEX*/
/*PADDING*/
.pad1 {
    padding: 0 1% !important;
}

.pad2 {
    padding: 0 2%;
}
.lpadxs {
    padding-left: 0.1%;
}
.lpad1 {
    padding-left: 1%;
}

.lpad2 {
    padding-left: 2%;
}

.lpad3 {
    padding-left: 3%;
}

.lpad4 {
    padding-left: 4%;
}
.rpadxs {
    padding-right: 0.1%;
}
.rpad1 {
    padding-right: 1%;
}

.rpad2 {
    padding-right: 2%;
}

.rpad3 {
    padding-right: 3%;
}

.rpad4 {
    padding-right: 4%;
}
.tpadxs {
    padding-top: 0.1%;
}
.tpad1 {
    padding-top: 1%;
}

.tpad2 {
    padding-top: 2%;
}
.tlabelpad{
    padding-top: 1.3em;
}
.bpad1 {
    padding-bottom: 1%;
}
.bpad2 {
    padding-bottom: 2%;
}
.vtmarg1 {
    margin-top: 3%;
}

.vtmarg2 {
    margin-top: 6%;
}

.vbmarg1 {
    margin-bottom: 3%;
}

.vbmarg2 {
    margin-bottom: 6%;
}

.vmarg1 {
    margin: 3% 0;
}

.vmarg2 {
    margin: 6% 0;
}

/*END PADDING*/
/**BORDERS**/
.solid-border-top {
    border-top: 1px solid var(--dark-grey);
}
.solid-border-bottom {
    border-bottom: 1px solid var(--dark-grey);
}
.solid-border-right {
    border-right: 1px solid var(--dark-grey);
}
.solid-border-left {
    border-left: 1px solid var(--dark-grey);
}
.solid-border {
    border: 1px solid var(--dark-grey);
}
.solid-border-laterals {
    border-left: 1px solid var(--dark-grey);
    border-right: 1px solid var(--dark-grey);
}
/**END BORDERS**/
.resumeItem {
    display: table;
}

.yellow-back {
    background-color: var(--yellow);
    color: var(--black);
}

.blue-back {
    background-color: var(--blue);
    color: var(--white);
}

.green-back {
    background-color: var(--green);
    color: var(--white);
}

.red-back {
    background-color: var(--red);
    color: var(--white);
}

.orange-back {
    background-color: var(--postsale);
    color: var(--white);
}

.white-back {
    background-color: var(--white);
    color: var(--black);
}

.issue-back {
    background-color: var(--issued);
    color: var(--white);
}

.request-back {
    background-color: var(--pending);
    color: var(--white);
}

.refund-back {
    background-color: var(--white);
    color: var(--black);
}

/*PRICES AND RATES*/
.table.table-bordered.pricesTable > thead > tr > th {
    color: var(--white);
    font-weight: 600;
    border-bottom: 2px solid var(--dark-grey) !important;
}

.table.table-bordered.pricesTable > tbody > tr > td.disabled {
    color: var(--dark-grey);
    background-color: var(--light-grey);
    /* font-weight: 600; */
}

.table.table-bordered.pricesTable > tfoot > tr > td.disabled {
    color: var(--dark-grey);
    background-color: var(--light-grey);
    font-weight: 600;
}


.table.table-bordered.pricesTable.priceTableTyperates > thead {
    background-color: var(--issued);
    color: white !important;
}

.table.table-bordered.pricesTable.priceTableTypeprices > thead {
    background-color: var(--blue);
    color: white !important;
}

.totalRows {
    width: 50% !important;
    float: right
}

/* FLAGS */
.cartpriceModsContainer {
    position: absolute;
    border: 1px solid var(--dark-grey);
    background-color: var(--yellow);
    font-size: 10px;
    border-radius: 3px;
    padding: 4px;
    top: -36px;
    right: 0px;
    color: var(--black);
}

.cartpriceModsContainer > span {
    display: block;
    text-align: right;
}
.split-icon {
    font-size: 1em;
    font-style: normal;
    content: "\21FC";
}
/* END FLAGS */

/*END PRICES AND RATES*/
/* ITINERARY */
.itineraryContainer {
    /* float: left; */
    padding: 9px;
    width: 100%;
    /* display: block; */
    margin-bottom: 8px;
}

.itinerarySegment {
    /* display: table; */
}

.itineraryAirline {
    /* float: left; */
    /* width: 20px; */
    font-weight: bold;
    padding-right: 15px;
}

.itineraryCity {
    /* width: 50px; */
    /* float: left; */
    display: flex;
    padding: 0 15px;
    align-content: flex-start;
    /* flex-wrap: wrap; */
    /* flex-direction: column; */
}

.itineraryTitle {
    padding: 10px 0;
    font-weight: bold;
    font-size: 14px
}

.itineraryFlight {
    width: 50px;
    float: left;
    font-weight: bold;
    padding: 0 15px;
}

.itineraryData {
    position: relative
}

.itineraryChanged {
    color: var(--red);
    cursor: pointer;
    border-bottom: 1px solid;
    float: left;
}

.itineraryChanges {
    position: absolute;
    top: -18px;
    /* left: 66px; */
    /* border: 1px solid var(--red); */
    border-radius: 4px;
    padding: 2px;
    color: var(--white);
    background-color: #707478;
}

/* PASSENGERT */
.passengersContainer {
    width: 100%;
}

.passengerName {
    position: relative;
}

.passengersTitle {
    padding: 10px 0;
    font-weight: bold;
    font-size: 14px
}

.resumeTotal {
    float: right;
}

.passengerType {
    /* float: left; */
    font-weight: bold;
    padding: 0 15px;
}

.passengerDate {
    /* float: left; */
    /* padding: 0 15px; */
}

.passengerTicket {
    /* float: left; */
    /* padding: 0 15px; */
}

/*INFORMATION*/
.infoRow {
    display: flex;
    flex-direction: row;
}

.infoLabel {
    width: 30%;
    padding: 5px 10px;
}

.infoData {
    width: 70%;
    padding: 5px 10px;
    font-weight: 600;
}

.infoData.invalid {
    color: var(--red);
}

/* DROPDOWN MENU */
/*
div.dlr-dropdown-menu ul {
    position: absolute;
    margin: 0;
    list-style: none;
    padding: 0;
    width: 223px;
    overflow-wrap: break-word;
}

div.dlr-dropdown-menu li {
    display: block;
    padding: 5px 10px;
    position: relative;
    background-color: var(--yellow);
    width: 100%;
    color: var(--black);
}
div.dlr-dropdown-menu li:hover {
    background-color: var(--black);
    color: var(--yellow);
}
div.dlr-dropdown-menu li:hover > ul {
    display: block;
}

div.dlr-dropdown-menu-right ul{
    right: 0;
}
div.dlr-dropdown-menu-right ul li ul {
    top: 0;
    right: 110px;
    display: none;
}
div.dlr-dropdown-menu-right ul li:hover > ul {
   display: block;
}
div.dlr-dropdown-menu-container {
    display: inline-table;
}

.cartcommercialAttentionBtn{
    float: right;
}
.saleOrderMenuInput{
    color: var(--black);
    border-radius: 3px;
    border: none;
    float: right;
}*/
/*ISSUE STATUS */
.issueStatusLabel100000 {
    background-color: var(--historic);
}

.issueStatusLabel300000 {
    background-color: var(--pending);
}

.issueStatusLabel400000 {
    background-color: var(--changed);
}

.issueStatusLabel500000 {
    background-image: linear-gradient(to right, var(--pending), var(--issued));
}

.issueStatusLabel600000 {
    background-color: var(--issued);
}

.issueStatusLabel700000, .issueStatusLabel1000000, .issueStatusLabel1300000, .issueStatusLabel1500000, .issueStatusLabel1100000, .issueStatusLabel1200000 {
    background-color: var(--postsale);
}

.issueStatusLabel800000 {
    background-color: var(--cancelled);
}

.issueStatusLabel900000 {
    background-color: var(--invalid);
}

.issueStatusLabel1300000 {
    background-color: var(--invalid);
}

/*END ISSUE TABLE */
/* ORDER STATUS */
.cartOrderCaptured {
    color: white;
    border: 1px solid var(--captured);
    background: var(--captured);
}

.cartOrderOrdered {
    color: white;
    border: 1px solid var(--ordered);
    background: var(--ordered);
}

.cartOrderBilled {
    color: white;
    border: 1px solid var(--billed);
    background-image: linear-gradient(to right, var(--ordered), var(--billed));
}

.cartOrderCharged {
    color: white;
    border: 1px solid var(--charged);
    background: var(--charged);
}

.cartOrderCanceled {
    color: white;
    border: 1px solid var(--cancelled);
    background: var(--cancelled);
}

.cartOrderIssued {
    color: white;
    border: 1px solid var(--issued);
    background: var(--issued);
}


.cartOrderPending {
    color: white;
    border: 1px solid var(--pending);
    background-image: linear-gradient(to right, var(--pending), var(--issued));
}

.cartOrderEmmited {
    color: white;
    border: 1px solid var(--issued);
    background: var(--issued);
}
.cartOrderRequest {
    color: white;
    border: 1px solid var(--postsale);
    background: var(--postsale);
}
.cartOrderChanged {
    color: white;
    border: 1px solid var(--changed);
    background: var(--changed);
}

.cartOrderInvalid {
    color: white;
    border: 1px solid var(--invalid);
    background: var(--invalid);
}

.cartOrderPost {
    color: white;
    border: 1px solid var(--postsale);
    background: var(--postsale);
}


.cartOrderVoid {
    color: white;
    border: 1px solid var(--void);
    background: var(--void);
}

.cartOrderProcessing {
    color: white;
    border: 1px solid var(--proccesing);
    background-image: linear-gradient(to right, var(--pending), var(--issued));
}

.cartOrderIssueChanged {
    color: white;
    border: 1px solid var(--issuechanged);
    background: var(--issuechanged);
}

.cartOrderFdvUsed {
    color: white;
    border: 1px solid var(--issuechanged);
    background: var(--issuechanged);
}

.cartOrderOpenTkUsed {
    color: white;
    border: 1px solid var(--issuechanged);
    background: var(--issuechanged);
}

.cartOrderCancelling {
    color: white;
    border: 1px solid var(--issuechanged);
    background: var(--issuechanged);
}

.cartOrderChanging {
    /* border: 1px solid var(--issuechanged)!important; */
    /* background-color: var(--white); */
}

/* END ORDER STATUS */
/* POST SALE STATUS */
.postSaleStatusInitial {
    border: 1px solid rgba(182, 194, 201, 0.5);
}

.postSaleStatusRequested {

    border: 1px solid rgba(40, 141, 200, 0.5);
}

.postSaleStatusSolved {
    border: 1px solid rgba(57, 186, 38, 0.5);
}

.postSaleStatusBonus {
    border: 1px solid rgba(0, 255, 166, 0.5);
}

.postSaleStatusOpen {
    border: 1px solid rgba(255, 153, 0, 0.5);
}

.postSaleStatusReplaced {

}

.postSaleStatusInvalid {

}

/* END POST SALE STATUS */
/* ISSUE MODULE */
.gridIssueOrdersLoaderHeader {
    grid-area: header;
    background-color: var(--dark-grey);
    /* height: 39px; */
}

.gridIssueOrdersLoaderHeader > div {
    color: var(--white);
    /* padding: 5px 15px; */
}

.gridIssueOrdersItems {
    grid-area: items;
}

.gridIssueOrdersSubtotalHeader {
    grid-area: subtotalHeader;
    background-color: var(--medium-grey);
    /* height: 27px; */
    color: var(--white);
}

.gridIssueOrdersSubtotal {
    grid-area: subtotal;
    background-color: var(--light-grey);
    /* height: 25px; */
}

.gridIssueOrdersRefundsHeader {
    grid-area: refundsHeader;
    background-color: var(--dark-grey);
    height: 34px;
    margin-top: 19px;
}

.gridIssueOrdersRefundsSubtotalHeader {
    grid-area: refundsSubtotalHeader;
    background-color: var(--light-grey);
    /* height: 34px; */
    /* color: var(--dark-grey); */
}

.gridIssueOrdersRefundsHeader > div {
    color: var(--white);
    /* padding: 8px 15px; */
}

.gridIssueOrdersLoaderHeader > div {
    color: var(--white);
}

.gridIssueOrdersRefunds {
    grid-area: refunds;
    /* color: var(--white); */
}

.gridIssueOrdersRefundsSubtotal {
    grid-area: refundsSubtotal;
    background-color: var(--medium-grey);
    /* height: 27px; */
    color: var(--white);
    align-content: stretch;
}

.gridIssueOrdersTotals {
    grid-area: totals;
    background-color: var(--dark-grey);
    color: var(--white);
    height: 36px;
    margin-top: 21px;
}

.gridIssueOrdersContainer {
    display: grid;
    grid-template-columns: [row] 100%;
    /* grid-template-rows: auto; */
    column-gap: 10px;
    row-gap: 2px;
    grid-template-areas:
        "header "
        "items"
        "subtotalHeader"
        "subtotal"
        "refundsHeader"
        "refunds"
        "refundsSubtotalHeader"
        "refundsSubtotal"
        "totals";
    align-content: stretch;
}

.gridIssueOrdersContainerTitle {
    grid-area: title;
    padding: 3px 8px;
}

.gridIssueOrdersContainerInfo {
    grid-area: info;
    padding: 4px 0;
}

.gridIssueOrdersContainerPrices {
    grid-area: prices;
    padding-top: 14px;
}

.gridIssueOrdersHeadersContainer {
    display: grid;
    grid-template-columns: [title] 20% [info] 29% [prices]46%;
    /* grid-template-rows: auto; */
    column-gap: 10px;
    /* row-gap: 2px; */
    /* color: var(--white); */
}

.gridIssueItemContainer {
    display: grid;
    grid-template-columns: [scol1] 20% [scol2] 5% [scol3] 12% [scol4] 10% [scol5] 46% [scol6];
    /* grid-template-rows: auto; */
    column-gap: 1%;
    row-gap: 3px;
    align-content: stretch;
}

.gridIssueItem1 {
    display: grid;
    grid-column-start: 1;
    grid-column-end: 2;
}

.gridIssueItem2 {
    display: grid;
    grid-column-start: 2;
    grid-column-end: 3;
}

.gridIssueItem3 {
    display: grid;
    grid-column-start: 3;
    grid-column-end: 4;
}

.gridIssueItem4 {
    display: grid;
    grid-column-start: 4;
    grid-column-end: 5;
}

.gridIssueItem5 {
    display: grid;
    grid-column-start: 5;
    grid-column-end: 6;
}

.gridIssueItemEnd {
    display: grid;
    grid-column-start: 6;
    justify-self: end;
}

.gridIssueLocator {
    display: grid;
    grid-column-start: 1;
    grid-column-end: 4;
}

.gridIssueFlags {
    display: grid;
    grid-column: 2/1;
}

.gridIssueItemUserImg {
    width: 23px;
    height: 23px;
    overflow: hidden;
    border-radius: 50%;
    display: grid;
    grid-column: 4/6;
    justify-self: end;
}

.gridIssuePricesContainer {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(50px, 1fr));
    /* grid-template-rows: auto; */
    column-gap: 10px;
    row-gap: 4px;
}

.gridIssuePricesItem {
    /* display: grid; */
    /* grid-column: 1; */
    justify-self: end;
    height: 21px;
}

.gridSubTotalCol1 {
    display: grid;
    grid-column: 1/5;
}

.gridSubTotalCol1 > div {
    /* padding: 11px 15px; */
}

.gridSubTotalCol2 {
    display: grid;
    grid-column: 5/6;
    font-weight: bold;
    align-content: stretch;
}

.gridSubTotalCol3 {
    display: grid;
    grid-column: 1/5;
}


/*END GRID*/
.issueOrdersContainer {
    display: flow-root;
}

.issueOrdersStepBody {
    border-left: 1px solid var(--light-grey);
}

.issueRequestItem {
    border: 1px solid var(--pending);
    border-radius: 1px;
    margin-bottom: 2px;
}

.issueRequestItemBooking {
    /* margin: 4px; */
    /* border-radius: 4px; */
    background-color: var(--pending);
    color: var(--white);
    padding: 7px;
}

.issueRequestItemInfo {
    padding: 6px;
    border-bottom: 1px solid var(--pending);
}

.issueOrdersLoaderHeader {
    width: 100%;
    float: left;
    background-color: grey;
    height: 41px;
    border-top-left-radius: 3px;
    border-top-right-radius: 3px;
    color: white;
    font-size: 12px;
    padding: 10px;
}

.issueItemAction {
    /* float: left; */
    /* padding: 1px 0; */
    display: flex;
    flex-direction: column;
    flex-basis: 100%;
    flex: 1;
}

.issueItemRow {
    display: flex;
    flex-direction: row;
    flex-wrap: wrap;
    width: 100%;
    /* margin: 0 5px; */
    padding: 1px 2px;
}

.issueItemDescription {
    /* width: 100%; */
    /* float: left; */
    display: flex;
    flex-direction: row;
    flex-wrap: wrap;
    width: 100%;
    /* align-content: center; */
    /* justify-content: flex-start; */
}

.issueItemDescriptionRow {
    /* margin: 1px; */
    /* padding: 2px; */
    /* float: left; */
    border: 1px solid;
    height: 48px;
    display: flex;
    flex-direction: column;
    /* flex-basis: 100%; */
    flex: 66;
}

.issueItemRow {
    display: flex;
    flex-direction: row;
    flex-wrap: wrap;
    width: 100%;
    /* margin: 0 5px; */
    padding: 1px 2px;
}

.issueItemDataColumn {
    display: flex;
    flex-direction: column;
    flex: 1;
}

.issueItemDataRow {
    display: flex;
    flex-direction: row;
    flex-wrap: wrap;
    width: 100%;
}

.issueItemSisloc {
    font-weight: 600;
    display: flex;
    flex: 1;
}

.issueItemUserImg {
    width: 23px;
    height: 23px;
    overflow: hidden;
    border-radius: 50%;
    display: flex;
    flex-direction: column;
    align-self: revert;
    align-content: stretch;
    align-items: flex-end;
}

.issueItemDiv {
    font-weight: 600;
    display: flex;
    flex-direction: column;
    flex: 1;
    align-items: flex-end;
}

.issueItemAction {
    /* float: left; */
    /* padding: 1px 0; */
    display: flex;
    flex-direction: column;
    flex-basis: 100%;
    flex: 1;
}

.issueSaleSubtotalSpacer {
    flex: 1.42;
    padding: 1px 2px;
}

.issueRefundsLoaderHeaderTitle {
    background-color: var(--medium-grey);
    color: var(--white);
    margin: 1px 0;
    height: 28px;
}

.issueRefundsLoaderHeaderTitle {
    padding: 5px 10px;
    font-size: 12px;
}

.issueRefundItemDescriptionRow {
    border: 1px solid;
    /* height: 48px; */
    display: flex;
    flex-direction: column;
    flex: 66;
}

/* END ISSUE MODULE */
/* TABLE */
.table-sm {
    margin-bottom: 0px;
}

.table-sm > thead > tr > th, .table-sm > tbody > tr > th, .table-sm > tfoot > tr > th, .table-sm > thead > tr > td, .table-sm > tbody > tr > td, .table-sm > tfoot > tr > td {
    padding: 3px 15px;
}

.table-sm > thead > tr > th.right, .table-sm > tbody > tr > th.right, .table-sm > tfoot > tr > th.right, .table-sm > thead > tr > td.right, .table-sm > tbody > tr > td.right, .table-sm > tfoot > tr > td.right {
    text-align: right;
}
.table-bordered{
    border: 1px solid var(--dark-grey)
}
/* END TABLE */

/* REFUND MODULE*/
.conditionGroupContainer {
    border: 1px solid var(--light-grey);
    border-radius: 4px;
    margin-top: 2px;
    padding: 0 4px;
}

.conditionGroup > label {
    color: var(--dark-grey);
}

.conditionFormText {
    border: 1px solid var(--light-grey);
    border-radius: 4px;
    height: 100%;
    min-height: 300px
}

.conditionsButtons {
    position: absolute;
    right: 21px;
    top: 17px;
}

.refundStatusRequested {
    background-color: var(--medium-grey);
}

.refundStatusProcessing {
    background-color: var(--medium-grey);
}

.refundStatusPending {
    background-color: var(--postsale);
}

.refundStatusAvailable {
    background-color: var(--yellow);
}

.refundStatusRefunded {
    background-color: var(--green);
}

.refundStatusCancel {
    background-color: var(--red);
}

.refundStatusInvalid {
    background-color: var(--red);
}

/* END REFUND MODULE*/
/* FDV */
.priorityButton1 {
    background-color: var(--red);
}

.priorityButton2 {
    background-color: var(--yellow);
}

.priorityButton3 {
    background-color: var(--green);
}

.fDVStatusLabel1 {
    background-color: var(--statusGreen);
}

.fDVStatusLabel2 {
    background-color: var(--statusYellow);
}

.fDVStatusLabel3 {
    background-color: var(--statusPurple);
}

.chosenFDV {
    background-color: var(--green);
    border: 1px solid;
    border-radius: 5px;
    height: 24px;
    color: var(--white);
}

/* END FDV */
/* RESUME */
.resumeBox {

    border-radius: 4px;
    /* padding:1px 5px; */
    margin-top: 5px;
}

.resumeBoxTitle {
    font-size: 12px;
    padding: 4px 8px;
    margin-bottom: 5px;
}

.resumeBox.grey {
    border: 1px solid var(--light-grey);
}

.resumeBoxTitle.grey {
    background-color: var(--light-grey);
}

.resumeBox.blue {
    border: 1px solid var(--blue);
}

.resumeBoxTitle.blue {
    background-color: var(--blue);
}

.resumeBoxTitle.blue > label {
    color: var(--white);
}

.resumeBoxTitle > label {
    margin: 0;
}

.resumeBoxBody {
    padding: 0 10px;
}

.resumeBoxAlert {
    /* background-color: var(--info); */
    color: var(--white);
    /* display: inline-block; */
    padding: 3px 8px;
    /* margin-bottom: 6px; */
    border: 1px solid;
    border-radius: 5px;
}

.resumeBoxAlertHeader {

    background-color: var(--info);

    border: 1px solid;

    border-radius: 5px;

    padding: 3px 10px;
}

.resumeBoxAlertText > label {
    color: var(--white);
    display: inline-block;
}

.resumeBoxAlertText > input {
}

.resumeBoxAlertBody {


}

.resumeBoxAlertBody.form-group > label {
    color: var(--white);
    padding-top: 6px !important;
}

/* END RESUME */
/* SECTION */
.section {
    /*display: flex;*/
    /*flex-direction: row;*/
    /*flex-wrap: nowrap;*/
    /*width: 100%;*/
    background-color: var(--white);
}

.section > .section-header {
    background: var(--white);
    padding: 4px 9px;
    display: flex;
    flex-direction: column;
    flex-wrap: nowrap;
    justify-content: space-evenly;
    align-items: baseline;
    /* width: 100%; */
    border-bottom: 1px solid black;
}

.section > .section-header > .title {
    font-size: 18px;
    color: var(--black);
    font-weight: 100;
    display: flex;
    flex: 1 1 0;
    align-items: baseline;
    flex-direction: row;
}

.section > .section-header > .title > .title-container > span {
    padding-right: 4px;
    /* flex-direction: column; */
}

.section > .section-header > .title > .title-container > i {
    padding-right: 4px;
    flex-direction: column;
}

.section > .section-header > .button-menu {
    flex: 1 1 100%;
    flex-direction: column;
}

.section > .section-header > .button-menu > .button-container {
    display: flex;
    justify-content: space-around;
    width: 100%;
}


.section > .section-header > .button-menu > .button-container > .button-toolbar {
    flex: 1 1 0;
    display: inline-flex;

}

.section > .section-header > .button-menu > .button-container > .button-toolbar > div {
    border: 1px solid var(--black);
    padding: 9px 5px 0 5px;
    border-radius: 4px;
}

.toolbar-btn {
    height: 25px;
    border: 1px solid;
    border-radius: 4px;
    padding: 1px 6px;
}

.toolbar-btn.green {
    background-color: var(--green-inactive);
    color: var(--white);
}

.toolbar-btn.green.disabled {
    cursor: not-allowed;
    background-color: var(--green-disabled);
}

.toolbar-btn.green:hover, .toolbar-btn.red.active {
    background-color: var(--green-active);

}

.toolbar-btn.green.disabled:hover {
    background-color: var(--green-disabled);

}

.toolbar-date-range {
    width: max-content;
    border: 1px solid;
    border-radius: 4px;
    border-color: white;
}

.toolbar-input {

}

.section > .section-body {
    padding-top: 5px;
    padding:5px 9px 0px 9px
}

/* END SECTION */
/* MACRO */
.recordMacro {
    width: 10px;
    height: 10px;
    background-color: green;
    border: 1px solid white;
    border-radius: 6px;
    display: inline-block;
    cursor: pointer;
}

.recording {
    background-color: red;
    border: 1px solid white;
}

/*END MACRO */

/* reconciliedStatus */
.reconciliedStatus {
    background-color: rgb(142, 43, 224);
}

.btn-svg {
    padding: 0;
    background-color: inherit;
    font-size: 0;
    border: 0;
}

/*radioButton*/
.radioButtonContainer {
    display: flex;
    flex-direction: row;
    width: max-content;
    color: var(--white);
}

.radioButton {
    background-color: var(--off);
    cursor: pointer;
    border: 1px solid;
    border-radius: 4px;
    margin: 0 auto;
    position: relative;
}
.radioButton.disabled {
    background-color: var(--off);
    cursor: not-allowed;
    border: 1px solid;
    border-radius: 4px;
    margin: 0 auto;
    position: relative;
}

.radioButton label {
    cursor: pointer;
    padding: 3px 6px;
    color: inherit;
    margin: 0;
}

.radioButton input {
    height: 100%;
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    margin: 0;
}

.radioButton input[type="radio"] {
    opacity: 0.011;
    z-index: 1000;
    /* cursor: pointer; */
}

.radioButton input[type="radio"]:checked + label {
    background: var(--on);
    border-radius: 4px;
}
.radioButton input[type="radio"] .disabled {
    opacity: 0.011;
    z-index: 1000;
    cursor: not-allowed;
}
/*end radioButton*/
/*checkBoxButton*/
.checkBoxButtonContainer {
    display: flex;
    flex-direction: row;
    width: max-content;
    color: var(--white);
}

.checkBox {
    background-color: var(--off);
    cursor: pointer;
    border: 1px solid;
    border-radius: 4px;
    margin: 0 auto;
    position: relative;
    padding: 2px;
}
.checkBox.disabled {
    background-color: var(--off);
    cursor: not-allowed;
    border: 1px solid;
    border-radius: 4px;
    margin: 0 auto;
    position: relative;
}

.checkBox label {
    cursor: pointer;
    padding: 3px 6px;
    color: inherit;
    margin: 0;
}

.checkBox input {
    height: 100%;
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    margin: 0;
}

.checkBox input[type="checkbox"] {
    opacity: 0.011;
    z-index: 1000;
    /* cursor: pointer; */
}

.checkBox input[type="checkbox"]:checked + label {
    background: var(--on);
    border-radius: 4px;
}
.checkBox input[type="checkbox"] .disabled {
    opacity: 0.011;
    z-index: 1000;
    cursor: not-allowed;
}
/*end checkboxButton*/
/* login */
.nearest{
    padding: 50px!important;
}
.nearest div{

font-size: 19px;

}
.userOfficeDiv{
    background-color: var(--light-grey);
    padding: 10px;
    border-radius: 5px;
    margin: 2px;
}
.userOfficeDiv div{
    padding-bottom: 5px;

}
/* end login */
.filtering {
    background: #348fe2;
    color: white;
}
.navBarTableWidget{
    font-size: 25px;
    background-color: var(--light-grey);
    padding: 3px;
    text-align: center;
    width: 100%;
}

.modal-xl{
    width: 90% !important;
}
.debug-footer {
    position: fixed;
    width: 100%;
    z-index: 9999999;
    background-color: black;
    color: white;
    text-align: center;
    bottom: 0px;
}


/* .position-relative{
    position: relative !important;
} */
 

.new-loading {
    position: fixed;
    width: 100%;
    height: 100%;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    background-color: rgba(255, 255, 255, 0.6);
    z-index: 200;
    opacity: 0;
    transition: opacity 0.5s ease;
    -webkit-transition: opacity 0.5s ease;
    -moz-transition: opacity 0.5s ease;
    -ms-transition: opacity 0.5s ease;
    -o-transition: opacity 0.5s ease;

    display: flex !important;
    align-items: center;
    justify-content: center;
}

.new-loading.show {
    opacity: 1; 
}

/* Squares Loader */
.new-loading .boxes {
    --size: 32px;
    --duration: 800ms;
    height: calc(var(--size) * 2);
    width: calc(var(--size) * 3);
    position: relative;
    transform-style: preserve-3d;
    transform-origin: 50% 50%;
    margin-top: calc(var(--size) * 1.5 * -1);
    transform: rotateX(60deg) rotateZ(45deg) rotateY(0deg) translateZ(0px);
  }
  
  .new-loading .boxes .box {
    width: var(--size);
    height: var(--size);
    top: 0;
    left: 0;
    position: absolute;
    transform-style: preserve-3d;
  }
  
  .new-loading .boxes .box:nth-child(1) {
    transform: translate(100%, 0);
    -webkit-animation: box1 var(--duration) linear infinite;
    animation: box1 var(--duration) linear infinite;
  }
  
  .new-loading .boxes .box:nth-child(2) {
    transform: translate(0, 100%);
    -webkit-animation: box2 var(--duration) linear infinite;
    animation: box2 var(--duration) linear infinite;
  }
  
  .new-loading .boxes .box:nth-child(3) {
    transform: translate(100%, 100%);
    -webkit-animation: box3 var(--duration) linear infinite;
    animation: box3 var(--duration) linear infinite;
  }
  
  .new-loading .boxes .box:nth-child(4) {
    transform: translate(200%, 0);
    -webkit-animation: box4 var(--duration) linear infinite;
    animation: box4 var(--duration) linear infinite;
  }
  
  .new-loading .boxes .box > div {
    --background: #5C8DF6;
    --top: auto;
    --right: auto;
    --bottom: auto;
    --left: auto;
    --translateZ: calc(var(--size) / 2);
    --rotateY: 0deg;
    --rotateX: 0deg;
    position: absolute;
    width: 100%;
    height: 100%;
    background: var(--background);
    top: var(--top);
    right: var(--right);
    bottom: var(--bottom);
    left: var(--left);
    transform: rotateY(var(--rotateY)) rotateX(var(--rotateX)) translateZ(var(--translateZ));
  }
  
  .new-loading .boxes .box > div:nth-child(1) {
    --top: 0;
    --left: 0;
  }
  
  .new-loading .boxes .box > div:nth-child(2) {
    --background: #145af2;
    --right: 0;
    --rotateY: 90deg;
  }
  
  .new-loading .boxes .box > div:nth-child(3) {
    --background: #447cf5;
    --rotateX: -90deg;
  }
  
  .new-loading .boxes .box > div:nth-child(4) {
    --background: #DBE3F4;
    --top: 0;
    --left: 0;
    --translateZ: calc(var(--size) * 3 * -1);
  }
  
  @-webkit-keyframes box1 {
    0%, 50% {
      transform: translate(100%, 0);
    }
  
    100% {
      transform: translate(200%, 0);
    }
  }
  
  @keyframes box1 {
    0%, 50% {
      transform: translate(100%, 0);
    }
  
    100% {
      transform: translate(200%, 0);
    }
  }
  
  @-webkit-keyframes box2 {
    0% {
      transform: translate(0, 100%);
    }
  
    50% {
      transform: translate(0, 0);
    }
  
    100% {
      transform: translate(100%, 0);
    }
  }
  
  @keyframes box2 {
    0% {
      transform: translate(0, 100%);
    }
  
    50% {
      transform: translate(0, 0);
    }
  
    100% {
      transform: translate(100%, 0);
    }
  }
  
  @-webkit-keyframes box3 {
    0%, 50% {
      transform: translate(100%, 100%);
    }
  
    100% {
      transform: translate(0, 100%);
    }
  }
  
  @keyframes box3 {
    0%, 50% {
      transform: translate(100%, 100%);
    }
  
    100% {
      transform: translate(0, 100%);
    }
  }
  
  @-webkit-keyframes box4 {
    0% {
      transform: translate(200%, 0);
    }
  
    50% {
      transform: translate(200%, 100%);
    }
  
    100% {
      transform: translate(100%, 100%);
    }
  }
  
  @keyframes box4 {
    0% {
      transform: translate(200%, 0);
    }
  
    50% {
      transform: translate(200%, 100%);
    }
  
    100% {
      transform: translate(100%, 100%);
    }
  }
/* End Squares Loader */

/* Pyramid Loader */
.pyramid-loader {
    position: relative;
    width: 300px;
    height: 300px;
    display: block;
    transform-style: preserve-3d;
    transform: rotateX(-20deg);
  }
  
  .pyramid-loader .wrapper {
    position: relative;
    width: 100%;
    height: 100%;
    transform-style: preserve-3d;
    animation: spin 4s linear infinite;
  }
  
  @keyframes spin {
    100% {
      transform: rotateY(360deg);
    }
  }
  
  .pyramid-loader .wrapper .side {
    width: 70px;
    height: 70px;
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    margin: auto;
    transform-origin: center top;
    clip-path: polygon(50% 0%, 0% 100%, 100% 100%);
  }
  
  .pyramid-loader .wrapper .side1 {
    transform: rotateZ(-30deg) rotateY(90deg);
    background: conic-gradient( #2BDEAC, #F028FD, #D8CCE6, #2F2585);
  }
  
  .pyramid-loader .wrapper .side2 {
    transform: rotateZ(30deg) rotateY(90deg);
    background: conic-gradient( #2F2585, #D8CCE6, #F028FD, #2BDEAC);
  }
  
  .pyramid-loader .wrapper .side3 {
    transform: rotateX(30deg);
    background: conic-gradient( #2F2585, #D8CCE6, #F028FD, #2BDEAC);
  }
  
  .pyramid-loader .wrapper .side4 {
    transform: rotateX(-30deg);
    background: conic-gradient( #2BDEAC, #F028FD, #D8CCE6, #2F2585);
  }
  
  .pyramid-loader .wrapper .shadow {
    width: 60px;
    height: 60px;
    background: #8B5AD5;
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    margin: auto;
    transform: rotateX(90deg) translateZ(-40px);
    filter: blur(12px);
  }
/* End Pyramid Loader */
  
/* Wifi Loader */
#wifi-loader {
    --background: #62abff;
    --front-color: #4f29f0;
    --back-color: #c3c8de;
    --text-color: #414856;
    width: 64px;
    height: 64px;
    border-radius: 50px;
    position: relative;
    display: flex;
    justify-content: center;
    align-items: center;
  }
  
  #wifi-loader svg {
    position: absolute;
    display: flex;
    justify-content: center;
    align-items: center;
  }
  
  #wifi-loader svg circle {
    position: absolute;
    fill: none;
    stroke-width: 6px;
    stroke-linecap: round;
    stroke-linejoin: round;
    transform: rotate(-100deg);
    transform-origin: center;
  }
  
  #wifi-loader svg circle.back {
    stroke: var(--back-color);
  }
  
  #wifi-loader svg circle.front {
    stroke: var(--front-color);
  }
  
  #wifi-loader svg.circle-outer {
    height: 86px;
    width: 86px;
  }
  
  #wifi-loader svg.circle-outer circle {
    stroke-dasharray: 62.75 188.25;
  }
  
  #wifi-loader svg.circle-outer circle.back {
    animation: circle-outer135 1.8s ease infinite 0.3s;
  }
  
  #wifi-loader svg.circle-outer circle.front {
    animation: circle-outer135 1.8s ease infinite 0.15s;
  }
  
  #wifi-loader svg.circle-middle {
    height: 60px;
    width: 60px;
  }
  
  #wifi-loader svg.circle-middle circle {
    stroke-dasharray: 42.5 127.5;
  }
  
  #wifi-loader svg.circle-middle circle.back {
    animation: circle-middle6123 1.8s ease infinite 0.25s;
  }
  
  #wifi-loader svg.circle-middle circle.front {
    animation: circle-middle6123 1.8s ease infinite 0.1s;
  }
  
  #wifi-loader svg.circle-inner {
    height: 34px;
    width: 34px;
  }
  
  #wifi-loader svg.circle-inner circle {
    stroke-dasharray: 22 66;
  }
  
  #wifi-loader svg.circle-inner circle.back {
    animation: circle-inner162 1.8s ease infinite 0.2s;
  }
  
  #wifi-loader svg.circle-inner circle.front {
    animation: circle-inner162 1.8s ease infinite 0.05s;
  }
  
  #wifi-loader .text {
    position: absolute;
    bottom: -40px;
    display: flex;
    justify-content: center;
    align-items: center;
    text-transform: lowercase;
    font-weight: 400;
    font-size: 12px;
    letter-spacing: 0.2px;
    font-family: "Euclid Circular A", "Poppins";
  }
  
  #wifi-loader .text::before, #wifi-loader .text::after {
    content: attr(data-text);
  }
  
  #wifi-loader .text::before {
    color: var(--text-color);
  }
  
  #wifi-loader .text::after {
    color: var(--front-color);
    animation: text-animation76 3.6s ease infinite;
    position: absolute;
    left: 0;
  }
  
  @keyframes circle-outer135 {
    0% {
      stroke-dashoffset: 25;
    }
  
    25% {
      stroke-dashoffset: 0;
    }
  
    65% {
      stroke-dashoffset: 301;
    }
  
    80% {
      stroke-dashoffset: 276;
    }
  
    100% {
      stroke-dashoffset: 276;
    }
  }
  
  @keyframes circle-middle6123 {
    0% {
      stroke-dashoffset: 17;
    }
  
    25% {
      stroke-dashoffset: 0;
    }
  
    65% {
      stroke-dashoffset: 204;
    }
  
    80% {
      stroke-dashoffset: 187;
    }
  
    100% {
      stroke-dashoffset: 187;
    }
  }
  
  @keyframes circle-inner162 {
    0% {
      stroke-dashoffset: 9;
    }
  
    25% {
      stroke-dashoffset: 0;
    }
  
    65% {
      stroke-dashoffset: 106;
    }
  
    80% {
      stroke-dashoffset: 97;
    }
  
    100% {
      stroke-dashoffset: 97;
    }
  }
  
  @keyframes text-animation76 {
    0% {
      clip-path: inset(0 100% 0 0);
    }
  
    50% {
      clip-path: inset(0);
    }
  
    100% {
      clip-path: inset(0 0 0 100%);
    }
  }
/* End Loader */
   

@media (max-width: 1400px) {
    .styledSelector i{
        font-size: 12px;
    }

    .select-container ul li,
    .styledSelector input::placeholder{
        font-size: 11px;
    }

    .styledSelector input{
        font-size: 11px;
    }
}