@media print {
    .no-print, .no-print *
    {
        display: none !important;
    }
    
    /* add padding when print*/
    body {
        height: 90%;
        padding: 25px;
    }
    
    @page {
        size: auto; /* auto is the initial value */
        margin: 0; /* this affects the margin in the printer settings */
    }
    
    #addInvoiceContainer{
        height: 280mm;
    }
}


/* visible when print only */
@media screen {
    .yes-print{
        display: none !important;
    }
}



@font-face {
    font-family: kufi;
    src: url(NotoKufiArabic-Regular.ttf);
}


* {
    font-family: kufi;
}


body {
    /*background-image: linear-gradient(to right, #344c7b99 , #16a8b199);*/
    background: #e9eaec;
}


a {
    text-decoration: none;
}


#navbar {
    background: #fff !important;
}


.itemImage {
    object-fit: cover;
}


/* #add {
    position: fixed;
    bottom: 10px;
    right: 10px;
    border-radius: 20px;
} */


.alert-message{
    position: fixed;
    top: 50%;
    left: 0px;
    width: 100%;
    box-shadow: 10px 5px 15px #666;
    z-index: 999;
}



#loading-icon {
    position: fixed;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    z-index: 9999;
}



.rating-stars {
    color: #ccc;
}

.star {
    font-size: 24px;
    cursor: pointer;
}

.star:hover, .star.selected {
    color: gold;
}



/* tooltip */
.tooltipX {
    position: relative;
    cursor: pointer;
}

/* tooltip content */
.tooltipX::before {
    content: attr(tooltipText);
    font-size: 8px;
    position: absolute;
    top: -200%;
    left: 50%;
    transform: translateX(-50%); /* make tooltip position at center */
    background-color: #6c757d;
    color: white;
    padding: 3px;
    border-radius: 5px 5px 5px 5px;
    white-space: nowrap;
    z-index: 2;
}

/* tooltip arrow */
.tooltipX::after {
    content: "";
    position: absolute;
    top: -75%;
    left: 50%;
    transform: translateX(-50%); /* make arrow position at center */
    border-width: 10px;
    border-style: solid;
    border-color: #6c757d transparent transparent transparent;
    z-index: 1;
}




/* ballon scalling animation */
@keyframes balloonScaleAnimation {
    0% {
        transform: scale(1);
    }
    100% {
        transform: scale(1.2);
    }
}

.trackingStateContainer {
    position: relative;
    border-radius: 10px;
}
/* trackingState balloon image */
.trackingStateContainer img {
    width: 50px;
    height: 50px;
    position: absolute;
    top: -250%;
    /* make origin (anchor point) of balloon animation at center of balloon image */
    translate: 33.5%;
    /* applay scalling balloon animation */
    animation: balloonScaleAnimation 3s linear infinite alternate;
}


/* trackingStateContainer progress animation */
@keyframes backgroundAnimation1 {
    0% {
        background-position: 0% 0%;
    }
    100% {
        background-position: 33.7% 0;
    }
}

/* balloon animation (make balloon move with trackingStateContainer progress) */
@keyframes balloonAnimation1 {
    0% {
        right: 0%;
    }
    100% {
        right: 33.7%;
    }
}

/* trackingStateContainer progress animation */
@keyframes backgroundAnimation2 {
    0% {
        background-position: 0% 0%;
    }
    100% {
        background-position: 66.3% 0;
    }
}

/* balloon animation (make balloon move with trackingStateContainer progress) */
@keyframes balloonAnimation2 {
    0% {
        right: 0%;
    }
    100% {
        right: 66.3%;
    }
}

/* trackingStateContainer progress animation */
@keyframes backgroundAnimation3 {
    0% {
        background-position: 0% 0%;
    }
    100% {
        background-position: 98.9% 0;
    }
}

/* balloon animation (make balloon move with trackingStateContainer progress) */
@keyframes balloonAnimation3 {
    0% {
        right: 0%;
    }
    100% {
        right: 98.9%;
    }
}


.trackingStateContainer1 {
    position: relative;
    background: linear-gradient(90deg, transparent 50%, #34db7c 50%);
    background-size: 200% 100%;
    animation: backgroundAnimation1 3s linear forwards;
}
/* trackingState balloon image */
.trackingStateContainer1 img {
    width: 50px;
    height: 50px;
    position: absolute;
    top: -250%;
    /* make origin (anchor point) of balloon animation at center of balloon image */
    translate: 50%;
    /* applay moving and scalling balloon animation */
    animation: balloonAnimation1 3s linear forwards, balloonScaleAnimation 3s linear infinite alternate;
}


.trackingStateContainer2 {
    position: relative;
    background: linear-gradient(90deg, transparent 50%, #34db7c 50%);
    background-size: 200% 100%;
    animation: backgroundAnimation2 3s linear forwards;
}
/* trackingState balloon image */
.trackingStateContainer2 img {
    width: 50px;
    height: 50px;
    position: absolute;
    top: -250%;
    /* make origin (anchor point) of balloon animation at center of balloon image */
    translate: 50%;
    /* applay moving and scalling balloon animation */
    animation: balloonAnimation2 3s linear forwards, balloonScaleAnimation 3s linear infinite alternate;
}


.trackingStateContainer3 {
    position: relative;
    /* overflow: hidden; */
    background: linear-gradient(90deg, transparent 50%, #34db7c 50%);
    background-size: 200% 100%;
    animation: backgroundAnimation3 3s linear forwards;
}
/* trackingState balloon image */
.trackingStateContainer3 img {
    width: 50px;
    height: 50px;
    position: absolute;
    top: -250%;
    /* make origin (anchor point) of balloon animation at center of balloon image */
    translate: 50%;
    /* applay moving and scalling balloon animation */
    animation: balloonAnimation3 3s linear forwards, balloonScaleAnimation 3s linear infinite alternate;
}




#addInvoiceContainer{
    max-height: 280mm;
}


.activeInvoiceSection{
    color: #2a9fa9;
    background: #fff;
    border-bottom: 2px solid #2a9fa9 !important;
}