/*--------------------------------------------
    CSS INDEX
    ===================

    1. Loading
    2. preloader
    3. select (dropdown list)
    4. button
    5. icon
    6. other setting
    7. tooltips
    8. chip
    9. report
    10. Group Layout
    11. trumbowyg
    12. sort
    13. Calendar
    14. Print
-----------------------------------------------------------------------------------*/


/* 1. Loading  Start */
@keyframes configure-clockwise {
    0% {
        transform: rotate(0);
    }
    25% {
        transform: rotate(90deg);
    }
    50% {
        transform: rotate(180deg);
    }
    75% {
        transform: rotate(270deg);
    }
    100% {
        transform: rotate(360deg);
    }
}

@keyframes configure-xclockwise {
    0% {
        transform: rotate(45deg);
    }
    25% {
        transform: rotate(-45deg);
    }
    50% {
        transform: rotate(-135deg);
    }
    75% {
        transform: rotate(-225deg);
    }
    100% {
        transform: rotate(-315deg);
    }
}

.spinner-box {
    width: 100%;
    height: 100%;
    position: fixed;
    display: flex;
    justify-content: center;
    align-items: center;
    top: 0%;
    left: 0%;
    background: #00000087;
    z-index: 9999999;
}

.configure-border-1 {
    width: 80px;
    height: 80px;
    padding: 3px;
    position: absolute;
    display: flex;
    justify-content: center;
    align-items: center;
    background: #ffab91;
    animation: configure-clockwise 3s ease-in-out 0s infinite alternate;
}

.configure-border-2 {
    width: 80px;
    height: 80px;
    padding: 3px;
    left: -80px;
    display: flex;
    justify-content: center;
    align-items: center;
    background: rgb(63,249,220);
    transform: rotate(45deg);
    animation: configure-xclockwise 3s ease-in-out 0s infinite alternate;
}

.configure-core {
    width: 100%;
    height: 100%;
    background-color: #37474f;
}
/* 1. Loading  End */

/* 2. preloader Start */
#preloader {
    position: fixed;
    left: 0;
    top: 0;
    z-index: 99999;
    height: 100%;
    width: 100%;
    background: rgba(207, 214, 222, 0.4);
    display: flex;
}
.loader{
    margin: auto;
    height: 50px;
    width: 50px;
    border-radius: 50%;
    position: relative;
}
.loader:before{
    content: '';
    position: absolute;
    left: 0;
    top: 0;
    height: 100%;
    width: 100%;
    background: #000;
    border-radius: 50%;
    opacity: 0;
    animation: popin 1.5s linear infinite 0s;
}
.loader:after{
    content: '';
    position: absolute;
    left: 0;
    top: 0;
    height: 100%;
    width: 100%;
    background: #000;
    border-radius: 50%;
    opacity: 0;
    animation: popin 1.5s linear infinite 0.5s;
}

@keyframes popin{
    0%{
        opacity: 0;
        transform: scale(0);
    }
    1%{
        opacity: 0.1;
        transform: scale(0);
    }
    99%{
        opacity: 0;
        transform: scale(2);
    }
    100%{
        opacity: 0;
        transform: scale(0);
    }
}

/* loading2  */
:root {
    --loading-color: white;
}
.loading2-container {
    display: flex;
    justify-content: center;
    align-items: center;
    animation-delay: 1s;
}

.item-1 {
    width: 20px;
    height: 20px;
    border-radius: 50%;
    background-color: var(--loading-color);
    margin: 7px;
    display: flex;
    justify-content: center;
    align-items: center;
}
@keyframes scale {
    0% {
        transform: scale(1);
    }
    50%,
    75% {
        transform: scale(2.5);
    }
    78%, 100% {
        opacity: 0;
    }
}
.item-1:before {
    content: '';
    width: 20px;
    height: 20px;
    border-radius: 50%;
    background-color: var(--loading-color);;
    opacity: 0.7;
    animation: scale 2s infinite cubic-bezier(0, 0, 0.49, 1.02);
    animation-delay: 200ms;
    transition: 0.5s all ease;
    transform: scale(1);
}

.item-2 {
    width: 20px;
    height: 20px;
    border-radius: 50%;
    background-color: var(--loading-color);;
    margin: 7px;
    display: flex;
    justify-content: center;
    align-items: center;
}
@keyframes scale {
    0% {
        transform: scale(1);
    }
    50%,
    75% {
        transform: scale(2.5);
    }
    78%, 100% {
        opacity: 0;
    }
}
.item-2:before {
    content: '';
    width: 20px;
    height: 20px;
    border-radius: 50%;
    background-color: var(--loading-color);;
    opacity: 0.7;
    animation: scale 2s infinite cubic-bezier(0, 0, 0.49, 1.02);
    animation-delay: 400ms;
    transition: 0.5s all ease;
    transform: scale(1);
}

.item-3 {
    width: 20px;
    height: 20px;
    border-radius: 50%;
    background-color: var(--loading-color);;
    margin: 7px;
    display: flex;
    justify-content: center;
    align-items: center;
}
@keyframes scale {
    0% {
        transform: scale(1);
    }
    50%,
    75% {
        transform: scale(2.5);
    }
    78%, 100% {
        opacity: 0;
    }
}
.item-3:before {
    content: '';
    width: 20px;
    height: 20px;
    border-radius: 50%;
    background-color: var(--loading-color);;
    opacity: 0.7;
    animation: scale 2s infinite cubic-bezier(0, 0, 0.49, 1.02);
    animation-delay: 600ms;
    transition: 0.5s all ease;
    transform: scale(1);
}

.item-4 {
    width: 20px;
    height: 20px;
    border-radius: 50%;
    background-color: var(--loading-color);;
    margin: 7px;
    display: flex;
    justify-content: center;
    align-items: center;
}
@keyframes scale {
    0% {
        transform: scale(1);
    }
    50%,
    75% {
        transform: scale(2.5);
    }
    78%, 100% {
        opacity: 0;
    }
}
.item-4:before {
    content: '';
    width: 20px;
    height: 20px;
    border-radius: 50%;
    background-color: var(--loading-color);;
    opacity: 0.7;
    animation: scale 2s infinite cubic-bezier(0, 0, 0.49, 1.02);
    animation-delay: 800ms;
    transition: 0.5s all ease;
    transform: scale(1);
}

.item-5 {
    width: 20px;
    height: 20px;
    border-radius: 50%;
    background-color: var(--loading-color);;
    margin: 7px;
    display: flex;
    justify-content: center;
    align-items: center;
}
@keyframes scale {
    0% {
        transform: scale(1);
    }
    50%,
    75% {
        transform: scale(2.5);
    }
    78%, 100% {
        opacity: 0;
    }
}
.item-5:before {
    content: '';
    width: 20px;
    height: 20px;
    border-radius: 50%;
    background-color: var(--loading-color);;
    opacity: 0.7;
    animation: scale 2s infinite cubic-bezier(0, 0, 0.49, 1.02);
    animation-delay: 1000ms;
    transition: 0.5s all ease;
    transform: scale(1);
}
/* loading2 */

/* 2. preloader End */

/* 3. select Start */
.select-dropdown-container {
    z-index: 1070;
}

.select-dropdown.open {
    transform: scaleY(1);
    opacity: 1;
}

.select-dropdown {
    background-color: #fff;
    box-shadow: 0 2px 5px 0 rgb(0 0 0 / 16%), 0 2px 10px 0 rgb(0 0 0 / 12%);
    margin: 0;
    min-width: 100px;
    outline: 0;
    position: relative;
    transform: scaleY(.8);
    opacity: 0;
    transition: all .2s;
}

.select-option {
    width: 100%;
    white-space: nowrap;
    text-overflow: ellipsis;
    overflow: hidden;
    cursor: pointer;
    display: flex;
    flex-direction: row;
    align-items: center;
    justify-content: space-between;
    color: rgba(0,0,0,.87);
    padding-left: 16px;
    padding-right: 16px;
    font-size: 1rem;
    font-weight: 400;
    background-color: transparent;
    -webkit-user-select: none;
    -moz-user-select: none;
    user-select: none;
}

.select-options-wrapper {
    overflow-y: auto;
}

.select-options-list {
    list-style: none;
    margin: 0;
    padding: 0;
}
/* 3. select End */

/* 4. button Start */

[data-copy],
.linkA {
    color: #1890ff !important;
    text-decoration: none !important;
    background-color: transparent;
    outline: none !important;
    cursor: pointer;
    transition: color .3s !important;
    user-select: none;
}

.btn-primary {
    border-color: #a5a5a5 !important;
}

.btn-primary:focus {
    color: #FFF;
    background-color: #5E50EE!important;
}

.btn-danger {
    border-color: #a5a5a5 !important;
}

.log-bwn button {
    animation: loginEffec 3s linear infinite;
}

copy {
    cursor: pointer;
    color: dodgerblue;
}

@keyframes loginEffec {
    0% {
        background: #b38a10 radial-gradient(circle, transparent 0%, #b38a10 0%) center/15000%;
        background-size: 0;
        transition: background 0s;
    }
    50% {
        background-color: rgba(255, 255, 255, 0.67);
        background-size: 100%;
        transition: background 0s;
    }
    100% {
        background: #b38a10 radial-gradient(circle, transparent 1%, #b38a10 1%) center/15000%;
    }
}

.selected1 {
    position: relative;
}
.selected1:before {
    content: '';
    position: absolute;
    right: 0;
    bottom: 0;
    border: 17px solid orange;
    border-top-color: transparent;
    border-left-color: transparent;
}
.selected1:after {
    content: '';
    width: 7px;
    height: 14px;
    position: absolute;
    color: blue;
    right: 7px;
    bottom: 6px;
    border: 2px solid #fff;
    border-top-color: transparent;
    border-left-color: transparent;
    transform: rotate(45deg);
}

/* 4. button End */

/* 5. icon Start */
.btn .spinner-border-sm {
    --bs-spinner-width: 0.9rem !important;
    --bs-spinner-height: 0.9rem !important;
}

.tableActionEdit {
    background: #49b149;
    color: white;
    border-radius: 6px;
    height: 2rem;
    width: 2rem;
}

.tableActionDelete {
    background: red;
    color: white;
    border-radius: 6px;
    height: 2rem;
    width: 2rem;
}
/* 5. icon End */

/* 6. other setting Start */

/* 6. other setting End */


/* 7. tooltips Start */

#operatorTooltips {
    z-index: 2222;
    top: 10%;
    left: calc((100% - (350px / 2)) / 2);
}

#operatorTooltips img {
    width: 20px;
    height: 20px;
}

#operatorTooltips .toast-header {
    background: #7c387afa;
    color: white;
}

#operatorTooltips .toast-body {
    background-color: white;
}

.tooltip-inner {
    max-width: unset;
    background-color: darkslateblue;
    color: white;
    box-shadow: rgba(0, 0, 0, 0.02) 0px 1px 3px 0px, rgba(27, 31, 35, 0.15) 0px 0px 0px 1px;
}

.bs-tooltip-auto[data-popper-placement^=top] .tooltip-arrow::before, .bs-tooltip-top .tooltip-arrow::before {
    border-top-color: darkslateblue;
}
/* 7. tooltips End */


/* 8. chip Start */
.i_Chip {
    color: #1890ff;
    background: #e6f7ff;
    border-color: #91d5ff;
    width: fit-content;

    box-sizing: border-box;
    font-size: 14px;
    font-variant: tabular-nums;
    line-height: 1.5715;
    list-style: none;
    font-feature-settings: "tnum";
    display: inline-block;
    height: auto;
    margin: 0 8px 0 0;
    padding: 0 7px;
    font-size: 12px;
    line-height: 20px;
    white-space: nowrap;
    border: 1px solid #d9d9d9;
    border-radius: 2px;
    opacity: 1;
    transition: all .3s;
}

.ChipColor1 {
    background: #ffdfa5;
    color: black;
}

.ChipColor2 {
    color: black;
    background: #dcf9ff;
    border-color: #ffd591;
}

.ChipColor3 {
    color: white;
    background: red;
    border-color: #ffd591;
}

.ChipColor4 {
    color: white;
    background: #1266f1a8;
    border-color: #ffd591;
}

.stamp {
    display: inline-block;
    background-color: red;
    color: white;
    font-size: 1rem;
    font-weight: bold;
    text-align: center;
    line-height: 50px;
    width: 50px;
    height: 50px;
    border-radius: 50%;
    /*transform: rotate(-45deg);*/
}

/* 8. chip End */

/* 9. Report Start */

.left {
    text-align: left;
}

.right {
    text-align: right;
}

.center {
    text-align: center;
}

#reportBox #PrintDate,
#reportBox #From,
#reportBox #Locations,
#reportBox #Terminals {
    white-space: nowrap;      /* 强制文本不换行 */
    overflow: hidden;        /* 隐藏超出部分 */
    text-overflow: ellipsis; /* 显示省略号 */
} 

.reportContainer {
    padding: 10px;
    overflow: auto;
}

.reportContainer #rTitle {
    text-align: center;
    font-size: 1.5rem;
}

.reportContainer .rHead {
    font-weight: 700 !important;
    display: flex;
    justify-content: space-between;
    flex-wrap: wrap;
    margin-top: 20px;
}

.reportContainer .rContent .rRow {
    border: 1px solid;
    width: 750px;
    margin: 5px;
    height: fit-content;
    padding: 0;
}

.reportContainer .rContent .rRow .rowTitle {
    width: 100%;
    background: #473c58;
    color: #fff;
    text-align: center;
    padding: 5px;
    font-size: 1rem;
}

.reportContainer .rContent .rRow .rowContent {
    width: 100%;
    padding-left: 10px;
    padding-right: 10px;
}

.reportContainer .rContent .rRow .rowContent tr td {
    padding-left: 10px;
    padding-right: 10px;
    display: inline-flex;
    flex-direction: row;
}

.reportContainer .rContent .rRow .rowContent tr {
    width: 100%;
}

.reportContainer .rContent .rRow .rowContent tr .c1 {
    width: 50%;
    display: block;
}

.reportContainer .rContent .rRow .rowContent tr .c2 {
    width: 20%;
    padding-left: 0;
}

.reportContainer .rContent .rRow .rowContent tr .c3 {
    width: 30%;
    padding-left: 0;
}

/**
 * 报表需要一个宽度100%撑满整个布局
 */
.reportContainer table {
    width: 100%;
    /*max-width: 1200px;*/
}

#reportContent thead tr th {
    min-width: 65px;
    height: 30px;
    text-align: center;
    white-space: nowrap;
    padding: 10px;
    border: 1px solid white;
}

#reportContent tbody tr td {
    text-align: center;
    white-space: nowrap;
    border-right-width: 1px;
    border-bottom-width: 1px;
    font-size: 12px;
    color: #616161;
}

.rowDT {
    width: 100%;
    display: flex;
    justify-content: space-around;
    font-weight: 700;
    padding-right: 20px;
    padding-left: 10px;
}

.cmpTitle {
    background: #575252;
    padding: 10px;
    margin-bottom: 5px;
    color: white;
    border-radius: 6px;
}

.LocationNode .locationTitle {
    background-color: #cad536;
    color: black;
}

#reportBox thead th {
    text-align: center;
    border-right: 1px solid white;
}


#reportBox th.summary,
#reportBox td.summary,
#reportBox .summary th,
#reportBox .summary td {
    background: orange;
    color: #000;
    font-weight: 700;
    text-wrap: nowrap;
    text-align: center;
    border-right: 1px solid rgb(153 155 150 / 87%);
    border-bottom: 1px solid rgba(172,179,166,.8705882353);
}

#reportBox .subSummary td {
    background-color: #ffd891;
    color: #000;
    font-weight: 700;
    text-wrap: nowrap;
    text-align: center;
}

#reportBox td.subSummary1,
#reportBox .subSummary1 td {
    background-color: #ffefd1;
    color: #000;
    text-wrap: nowrap;
    text-align: center;
}

#reportBox .left {
    text-align: left !important;
}

#reportBox .right {
    text-align: right !important;
}

#reportBox .center {
    text-align: center !important;
}

.locTitle {
    background: #cad536;
    padding: 10px;
    margin-bottom: 5px;
}

.reportContainer .rContent {
    width: 100%;
    /*max-height: calc(100vh - 430px);*/
    overflow: auto;
    min-height: 100px;
}

.stickyReport table {
    overflow: unset;
}

.stickyReport table thead {
    position: sticky;
    top: 0;
    background-color: white;
}

.stickyReport table thead tr:first-child th:first-child {
    border-top-left-radius: 10px;
    overflow: hidden;
    display: table-cell;
}
.stickyReport table thead tr:first-child th:last-child {
    border-top-right-radius: 10px;
    overflow: hidden;
    display: table-cell;
}

.reportHoverRow tbody tr:hover {
    background: gainsboro;
}

.reportSum {
    background: #fff1f1 !important;
    color: red !important;
    font-weight: bold !important;
}

.chartBox {
    height: 350px;
    overflow-x: hidden;
    overflow-y: auto;
}

.chartBoxW {
    overflow-x: auto;
    overflow-y: hidden;
}

/*9. Report End*/

/* 10. Group Layout Start */

.xk-form-group {
    border: 2px solid orangered;
    border-radius: 8px;
    padding: 2rem 1rem 1rem;
}

.xk-form-group-label {
    float: left;
    margin-top: -3rem;
    padding-left: 10px;
    padding-right: 10px;
    background: white;
    font-size: 1.2rem;
    width: fit-content;
}

/* 10. Group Layout End */

/* 11. trumbowyg Start */

/* 11. trumbowyg End */

/* 12. sort Start */
#sortable {
    max-height: 400px;
    list-style-type: none;
    padding: 10px;
    margin: 0;
    overflow-y: auto;
    border: 1px solid #b8c4d1;
    border-radius: 8px;
    background-color: #f4f7fa;
    box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);
}

#sortable li,
.ui-sortable li{
    padding: 6px 12px;
    margin: 6px;
    background-color: #dbe3eb;
    border: 1px solid #b8c4d1;
    border-radius: 5px;
    cursor: move;
    font-weight: 500;
    color: #1c395a;
    transition: background-color 0.2s, transform 0.2s;
    z-index: 1050;
}
#sortable li:hover {
    background-color: #b8c4d1;
}
#sortable li:active {
    transform: scale(1.03);
    background-color: #a1b2c3;
}

.ui-state-default {
    /*height: 35px;*/
    /*line-height: 35px;*/
}

/* 12. sort End */


/* 13. Calendar Start */

.fc-view .fc-scrollgrid-section-header th a {
    color: white;
}

.fc-view .fc-daygrid-event-harness a {
    cursor: pointer;
}

/* 13. Calendar End */