/* Account Statement Balance Summary */

@font-face {
    font-family: 'Noto Kufi Arabic';
    font-style: normal;
    font-weight: 500;
    font-display: swap;
    src: url('https://fonts.gstatic.com/s/notokufiarabic/v21/CSRp4ydQnPyaDxEXLFF6LZVLKrodhu8t57o1kDc5Wh5v37bNlrWWfw.woff2') format('woff2');
    unicode-range: U+0600-06FF, U+0750-077F, U+0870-088E, U+0890-0891, U+0897-08E1, U+08E3-08FF, U+200C-200E, U+2010-2011, U+204F, U+2E41, U+FB50-FDFF, U+FE70-FE74, U+FE76-FEFC, U+102E0-102FB, U+10E60-10E7E, U+10EC2-10EC4, U+10EFC-10EFF, U+1EE00-1EE03, U+1EE05-1EE1F, U+1EE21-1EE22, U+1EE24, U+1EE27, U+1EE29-1EE32, U+1EE34-1EE37, U+1EE39, U+1EE3B, U+1EE42, U+1EE47, U+1EE49, U+1EE4B, U+1EE4D-1EE4F, U+1EE51-1EE52, U+1EE54, U+1EE57, U+1EE59, U+1EE5B, U+1EE5D, U+1EE5F, U+1EE61-1EE62, U+1EE64, U+1EE67-1EE6A, U+1EE6C-1EE72, U+1EE74-1EE77, U+1EE79-1EE7C, U+1EE7E, U+1EE80-1EE89, U+1EE8B-1EE9B, U+1EEA1-1EEA3, U+1EEA5-1EEA9, U+1EEAB-1EEBB, U+1EEF0-1EEF1;
}

body {
    font-family: var(--font-primary);
    font-weight: 500;
}


.balance-summary {
    position: relative; /* Make sure the parent container has relative positioning */
    display: flex;
    justify-content: space-between; /* Ensure the customer is centered and balance is at the end */
    align-items: center; /* Align items vertically centered */
    padding: 5px;
    //margin: 10px auto;
    background-color: #8EA9DB; /* Light grey background */
    border-radius: 8px; /* Rounded corners */
    box-shadow: 0 5px 8px rgba(0, 0, 0, 0.1); /* Subtle shadow */
    max-width: 1200px; /* Set a max-width for better readability */    
    color: #333; /* Dark text color for better readability */
}

/* Customer Name Styling */
.customer  {
    font-size: 1.4rem; /* Larger font size for the customer's name */
    font-weight: bold; /* Make the name bold */
    color: black; /* Darker color for the name */
    margin-bottom: 0px; /* Spacing below the name */    
    text-align: center;
    flex: 1; /* Make the customer name take up remaining space */
    height: 41px;
    font-family: var(--font-primary);
    text-transform: capitalize;
}
.customer {    
    align-content: center;
    text-transform: capitalize;
}

/* Outstanding Balance Styling */
.balance p {
    position: absolute; /* Position the balance div on top */
    font-size: 14px; /* Slightly smaller than the customer name */
    font-weight: bold; /* Normal weight for the balance text */
    color: white; /* White text color for contrast against red background */
    text-align: right; /* Align the text to the right */
    background: #FF0000; /* Red background */
    padding: 17.5px; /* Add padding to make the background larger than the text */
    border-top-left-radius: 0px; /* Optional: rounded corners for the background */
    border-top-right-radius: 8px; /* Optional: rounded corners for the background */
    border-bottom-left-radius: 0px; /* Optional: rounded corners for the background */
    border-bottom-right-radius: 8px; /* Optional: rounded corners for the background */
    line-height: 1.2; /* Vertically center the text inside the background */
    margin-top: 0px; /* Add a little space above the balance */
    margin-bottom: 0px; /* Spacing below the name */
    right: 0; /* Align the balance div to the right side of the parent */
    top: 0; /* Align the balance div to the top */
    z-index: 1; /* Ensure it appears on top of other content */
}


.table-row-link {
    // display: block;
    text-decoration: none;
    color: inherit; /* Inherit text color from the table-cell elements */
}

/*.table-row-link:hover {
        background-color: #f0f0f0;*/ /* Light background color on hover */
/*cursor: pointer;*/ /* Indicate that it's clickable */
/*}*/

.table-row {
    cursor: pointer; /* Change cursor for entire row to indicate it's clickable */
}


.date {
    flex: 0 1 70px !important;
    text-align: center;
}

.id {
    flex: 0 1 40px !important;
    text-align: center;
}

.type {
    flex: 0 1 50px !important;
    text-align: center;
}

.desc {
    flex: 0 1 140px !important;
    text-align: left;
}


.price {
    flex: 0 1 80px !important;
    text-align: right;    
}

.qty {
    flex: 0 1 40px !important;
    text-align: center;
}

.xsname {
    flex: 0 1 180px !important;
    text-align: center;
}

.item {
    flex: 1 0 250px !important;
    text-align: left;
}

.amountpaid {
    color: red;
}






/* Income Page Style */
.card-container {
    width: 100%;
    margin: 0px;
    margin-top: 0px;
    padding-top: 10px;
    font-size: 11px;
}

.row {
    display: flex;
    margin-bottom: 0px;
}

.cell {
    flex: 1; /* Ensure cells expand equally */
    text-align: center;
    padding: 5px;
    transition: background-color 0.3s ease;
}

.month-header {
    font-weight: bold;
    cursor: pointer;
}

.month-data {
    cursor: pointer;
}

.header-row {
    background-color: #f2f2f2; /* Light grey background for the header */
}

.data-row:nth-child(even) {
    background-color: #f9f9f9; /* Light background for even rows */
}

.highlight {
    /* background-color: #ffcc00 !important; */ /* Highlighted cells in yellow */
    background-color: #444;
    color: white !important;
}

#hover-info {
    margin-top: 20px;
    font-size: 12px;
    padding: 10px;
    background-color: #444;
    color: white;
    text-align: center;
}






/* Income Calender Page */

.calendar-navigation form {
    width: 95%;
    max-height: 51px;
    //display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 2px;
}


/* Container for arrows, aligning them in the same row */
/* Resize the select dropdowns */
.calendar-navigation .form-control {
    font-size: 0.6rem; /* Smaller text inside the select */
    display: flex;
    padding: 5px 5px; /* Reduce padding inside the dropdown */
    height: 25px; /* Adjust the height */
    width: 280px; /* Limit the max width */
    margin-top: -3px;
}

/* Optionally, you can target the individual select elements */
.year, .month {
    font-size: 0.6rem; /* Smaller text inside the select */
    padding: 5px 5px; /* Reduce padding inside the dropdow */
    width: 65px; /* Set a specific width for the dropdown */
    max-width: 70px; /* Limit the max width */
    margin-top: 3px;
}

.year {
    margin-right: 2px; /* Adds space between the year and the month */
}

.month {
    margin-left: 2px; /* Optional, can be adjusted for extra space */
}



.cal-row {
    display: flex;
    //background: lightblue;
    justify-content: space-between; /* Space between columns */
    align-items: center; /* Vertically center the items */
    width: 100%;
    height: 34px;
}

.calendar-col {
    flex: 1;
    max-width: 100%; /* Ensures the columns don't overflow */
    gap: 10px;
}

    .calendar-col .btn {
        display: flex;
        justify-content: center;
        align-items: center;
        //padding-left: 100px;
        font-size: 0.7rem; /* Decrease font size */
        padding: 5px 5px; /* Reduce padding to make the button smaller */
        height: 22px; /* Adjust the button height */
        width: 58px;
        margin-top: 3px;
        margin-left: 18px;
        //justify-content: space-between;
        gap: 7px !important;
        padding-left: 0px !important;
    }

    .calendar-col .fa-search {
        font-size: 12px !important;        
    }


        /* Styling the arrows */
        .calendar-col .arrow {
            font-size: 40px;
            display: inline-flex; /* This reduces the hover area to only around the arrow */
            align-items: center;
            //gap: 5px;
            //justify-content: center;
            //justify-content: space-between;
            margin-left: 20px;
            margin-right: -7px;
            text-decoration: none; /* Remove underline */
            color: red; /* Inherit color from parent */
            transform: rotate(90deg); /* Flip the arrow upside down */
            transition: color 0.1s ease; /* Optional: add a smooth transition on hover */
        }

        /* Optional: Hover effect for the arrows */
        .calendar-col .arrow:hover {
            color: greenyellow; /* Change color on hover */
            padding-inline: revert;
        }

        /* Optionally, you can adjust the size or add hover effects */
        .calendar-col .arrow:hover {
            color: greenyellow; /* Change color on hover if desired */
        }







.calendar-container {
    background: white;
    padding: 0px;
    border-radius: 0px;
    padding-bottom: 15px;
    padding-top: 10px;
}

.calendar h6 {
    margin-left: 0;
    color: greenyellow;
}

.calendar-grid {
    flex: 0 1 auto;
    width: 25%;
    max-width: 500px;
    text-align: center;
    display: flex;
    flex-direction: column;
    gap: 2px;
    background-color: #3C3C3C;
    border: 0px solid #ddd;
    padding: 9px;
    box-shadow: 15px 10px 10px rgba(0, 0, 0, 0.3);
    border-radius: 10px;
    margin-left: 25px;
}


.calendar {
    display: flex; /* Use Flexbox for layout */
    //justify-content: flex-start; /* Align items to the start of the container */
    //gap: 20px; /* Adds space between the calendar and canvas */
}



.canvas-container {
    flex: 0 1 auto;
    width: 780px;
    max-width: 780px;
    height: 240px;
    text-align: center;
    display: flex;
    flex-direction: column;
    background-color: #3C3C3C; /* Keep the dark background */
    color: white !important; /* Change the font color to white */
    border: 0px solid #ddd;
    padding: 5px;
    box-shadow: 15px 15px 10px rgba(0, 0, 0, 0.3);
    border-radius: 10px;
    margin-left: 50px;
    margin-top: 20px;
    justify-content: center;
}


    /* Optional: Ensure that the canvas inside the .canvas-container is responsive */
    .canvas-container canvas {
        max-width: 100%;
        //max-height: 100%;
        //border: 1px solid black;
    }




.calendar-header, .calendar-row {
    display: flex;
    height: 30px;
}

.calendar-cell {
    flex: 1;
    padding: 1px;
    text-align: center;
    border: 1px solid #ddd;
    min-height: 30px;
    padding-top: 1px;
    transition: transform 0.3s ease, box-shadow 0.3s ease; /* Add smooth transition for zoom effect */
}

    .calendar-cell:hover {
        transform: scale(1.4); /* Zoom in the day when hovering */
        z-index: 20; /* Bring the hovered cell above others */
        box-shadow: 0 4px 15px rgba(0, 0, 0, 0.7); /* Add a subtle shadow to make the zoom effect more prominent */
    }


.cal-header {
    flex: 1;
    padding: 1px;
    text-align: center;
    border: 1px solid #ddd;
    font-weight: bold;
    background-color: #f0f0f0;
    height: 25px;
    font-size: 8px;
    text-align: center;
    align-content: center;
}

.calendar-row {
    gap: 1px;
}


.calendar-cell div {
    display: block;
    color: #f0f0f0;
    font-size: 7px;
    transition: transform 0.3s ease; /* Ensure inner content also zooms */
}

    .calendar-cell div span {
        display: block;
        color: greenyellow;
        font-weight: bold;
    }

        .calendar-cell div span.no-revenue {
            color: red;
        }




.pagecontainer .header-container {
    display: flex;
    justify-content: space-between;
    align-items: center;
    width: 100%;
}


    .mtitle.right {
        text-align: right;
    }

















.print {
    display: flex;
    justify-content: flex-end;
    margin-top: 0px;
    gap: 5px;
}


.btn-print a {
    font-size: 12px !important;
    color: var(--primary) !important;
    outline-color: var(--primary) !important;
    padding: 4px 10px;
    border: 1px solid var(--primary) !important;
    background-color: white;
    border-radius: 5px;
    text-decoration: none;
    height: 25px !important;
    width: 80px !important;
}


    .btn-print a:hover {
        background-color: var(--primary) !important;
        color: var(--white) !important;
        cursor: pointer;
        opacity: 0.60;
    }




.email-icon {
    position: absolute;
    top: 35%;
    left: 22px;
    transform: translateY(-50%);
    color: black;
    pointer-events: none;
}

#manualEmail {
    padding-left: 35px; /* Leave space for the icon */
}