/* GLOBAL STYLES
-------------------------------------------------- */
/* Padding below the footer and lighter body text */

body {
    padding-top: 3rem;
    padding-bottom: 3rem;
    color: rgb(var(--bs-tertiary-color-rgb));
}


/* CUSTOMIZE THE CAROUSEL
-------------------------------------------------- */

/* Carousel base class */
.carousel {
    margin-bottom: 4rem;
}
/* Since positioning the image, we need to help out the caption */
.carousel-caption {
    bottom: 3rem;
    z-index: 10;
}

/* Declare heights because of positioning of img element */
.carousel-item {
    height: 42rem;
    background-size: cover; /* or "contain" depending on what you want */
    background-position: center center;
    background-repeat: no-repeat;
}

.carousel-item:nth-child(1) { /* Targets the first slide */
    background-image: url("images/bg_lemons.jpg");
}

.carousel-item:nth-child(2) { /* Targets the second slide */
    background-image: url("images/bg_plazamarket.jpg");
}

.carousel-item:nth-child(3) { /* Targets the second slide */
    background-image: url("images/bg_walking.jpg");
}

/* MARKETING CONTENT
-------------------------------------------------- */

/* Center align the text within the three columns below the carousel */
.marketing .col-lg-4 {
    margin-bottom: 1.5rem;
    text-align: center;
}
    /* rtl:begin:ignore */
    .marketing .col-lg-4 p {
        margin-right: .75rem;
        margin-left: .75rem;
    }
/* rtl:end:ignore */


/* Featurettes
------------------------- */

.featurette-divider {
    margin: 5rem 0; /* Space out the Bootstrap <hr> more */
}

/* Thin out the marketing headings */
/* rtl:begin:remove */
.featurette-heading {
    letter-spacing: -.05rem;
}

/* rtl:end:remove */

/* RESPONSIVE CSS
-------------------------------------------------- */

@media (min-width: 40em) {
    /* Bump up size of carousel content */
    .carousel-caption p {
        margin-bottom: 1.25rem;
        font-size: 1.25rem;
        line-height: 1.4;
    }

    .featurette-heading {
        font-size: 50px;
    }
}

@media (min-width: 62em) {
    .featurette-heading {
        margin-top: 7rem;
    }
}

.checkAlluncheckAll {
    width: 2.5vw;
    cursor: pointer;
}

/* Library Icons
-------------------------------------------------- */
.libraryIcons {
    text-align: left;
    float: left;
    font-weight: normal;
    width: 100%;
}
    .libraryIcons input {
        visibility: hidden;
    }
        .libraryIcons input:checked {
            font-weight: bold;
            background-color: #EEEEEE;
        }
    .libraryIcons label {
        text-indent: 3vw;
        letter-spacing: 1px;
        white-space: nowrap;
        /*font-family: Tahoma;*/
        font-size: 1.5vw;
    }
    .libraryIcons input + label {
        cursor: pointer;
        float: left;
        margin: 2px;
        background-size: 2vw;
        background-repeat: no-repeat;
        background-position: 1% 50%;
        height: 2vw;
    }

    .libraryIcons.doc input + label {
        background-image: url('images/icons/doc.ico');
    }
    .libraryIcons.docx input + label {
        background-image: url('images/icons/docx.ico');
    }
    .libraryIcons.xxx input + label {
        background-image: url('images/icons/faq.ico');
    }
    .libraryIcons.csv input + label {
        background-image: url('images/icons/xls.ico');
    }
    .libraryIcons.xls input + label {
        background-image: url('images/icons/xls.ico');
    }
    .libraryIcons.xlsx input + label {
        background-image: url('images/icons/xlsx.ico');
    }
    .libraryIcons.folder input + label {
        background-image: url('images/icons/folder.ico');
    }
    .libraryIcons.folderOpen input + label {
        background-image: url('images/icons/folderOpen.png');
    }
    .libraryIcons.pdf input + label {
        background-image: url('images/icons/pdf.ico');
    }
    .libraryIcons.pps input + label {
        background-image: url('images/icons/pps.ico');
    }
    .libraryIcons.ppsx input + label {
        background-image: url('images/icons/ppsx.ico');
    }
    .libraryIcons.htm input + label {
        background-image: url('images/icons/html.ico');
    }
    .libraryIcons.html input + label {
        background-image: url('images/icons/html.ico');
    }
    .libraryIcons.newFolder input + label {
        background-image: url('images/icons/FolderNew.ico');
    }
    .libraryIcons.newFile input + label {
        background-image: url('images/icons/FileNew.ico');
    }
    .libraryIcons.back input + label {
        background-image: url('images/icons/back.ico');
    }
    .libraryIcons.txt input + label {
        background-image: url('images/icons/txt.png');
    }
    .libraryIcons.jpg input + label {
        background-image: url('images/icons/jpg.png');
    }
    .libraryIcons.jpeg input + label {
        background-image: url('images/icons/jpg.png');
    }
    .libraryIcons.gif input + label {
        background-image: url('images/icons/gif.png');
    }
    .libraryIcons.png input + label {
        background-image: url('images/icons/png.png');
    }
    .libraryIcons input + label:hover {
        font-weight: bold;
        background-color: #BBBBBB !important;
    }

.librarySelectedItem {
    font-weight: bold;
    background-color: #EEEEEE !important; /*rgb(82, 113, 255) !important;*/
}
    .librarySelectedItem input {
        visibility: hidden;
        /*float: left;*/
    }
    .librarySelectedItem label {
        font-weight: bold;
    }

.libraryOwnerFolder {
    margin-top:20px;
    border-top: solid black 1px;
}

/* Main Anamorphic Card Style */
.custom-shadow {
    box-shadow: 0px 10px 20px rgba(0, 0, 0, 0.15), 0px 6px 6px rgba(0, 0, 0, 0.1); /* Customize as needed */
    transition: box-shadow 0.3s ease;
}

    .custom-shadow:hover {
        box-shadow: 0px 15px 30px rgba(0, 0, 0, 0.2), 0px 10px 10px rgba(0, 0, 0, 0.15); /* Stronger shadow on hover */
    }

.neumorphic-card {
    border-radius: 8px;
    border: 1px solid black;
    height: 27vh;
    /* overflow:
        box-shadow: 8px 8px 15px rgba(0, 0, 0, 0.2), 
                -8px -8px 15px rgba(255, 255, 255, 0.7);*/
    transition: box-shadow 0.3s ease;
    background-color: #ffffff;
}

    /* Neumorphic Hover Effect */
    .neumorphic-card:hover {
        box-shadow: 12px 12px 20px rgba(0, 0, 0, 0.25), -12px -12px 20px rgba(255, 255, 255, 0.9);
    }

.neumorphic-card1 {
    border-radius: 5px;
    border: 1px solid black;
    height: 18.5vh;
    /*    box-shadow: 8px 8px 15px rgba(0, 0, 0, 0.2), 
                -8px -8px 15px rgba(255, 255, 255, 0.7);*/
    transition: box-shadow 0.3s ease;
    background-color: #ffffff;
}

    /* Neumorphic Hover Effect */
    .neumorphic-card1:hover {
        box-shadow: 12px 12px 20px rgba(0, 0, 0, 0.25), -12px -12px 20px rgba(255, 255, 255, 0.9);
    }

.neumorphic-card2 {
    border-radius: 5px;
    border: 1px solid black;
    height: 40vh;
    /*    box-shadow: 8px 8px 15px rgba(0, 0, 0, 0.2), 
                -8px -8px 15px rgba(255, 255, 255, 0.7);*/
    transition: box-shadow 0.3s ease;
    background-color: #ffffff;
}

    /* Neumorphic Hover Effect */
    .neumorphic-card2:hover {
        box-shadow: 12px 12px 20px rgba(0, 0, 0, 0.25), -12px -12px 20px rgba(255, 255, 255, 0.9);
    }

@media (min-width: 1200px) {
    .neumorphic-card {
    }

    .card-body {
        overflow-y: auto;
    }
}

.imgSzSm {
    height: 4vh !important;
    width: 2vw !important;
}

.imgSz {
    height: 6vh !important;
    width: 3vw !important;
}

.imgSzLg {
    height: 8vh !important;
    width: 4vw !important;
}



/*   Buttons STYLING */

.btn-b1 {
    --bs-btn-color: #fff !important;
    --bs-btn-bg: #2b637b !important;
    --bs-btn-border-color: #2b637b !important;
    --bs-btn-hover-color: #fff !important;
    --bs-btn-hover-bg: #424649 !important;
    --bs-btn-hover-border-color: #373b3e !important;
    --bs-btn-focus-shadow-rgb: 66, 70, 73 !important;
    --bs-btn-active-color: #fff !important;
    --bs-btn-active-bg: #4d5154 !important;
    --bs-btn-active-border-color: #373b3e !important;
    --bs-btn-active-shadow: inset 0 3px 5px rgba(0, 0, 0, 0.125) !important;
    --bs-btn-disabled-color: #fff !important;
    --bs-btn-disabled-bg: #2b637b !important;
    --bs-btn-disabled-border-color: #2b637b !important;
    font-size: 15px !important;
}

.btn-b2 {
    --bs-btn-color: #fff !important;
    --bs-btn-bg: #38b6ff !important;
    --bs-btn-border-color: #38b6ff !important;
    --bs-btn-hover-color: #fff !important;
    --bs-btn-hover-bg: #424649 !important;
    --bs-btn-hover-border-color: #373b3e !important;
    --bs-btn-focus-shadow-rgb: 66, 70, 73 !important;
    --bs-btn-active-color: #fff !important;
    --bs-btn-active-bg: #4d5154 !important;
    --bs-btn-active-border-color: #373b3e !important;
    --bs-btn-active-shadow: inset 0 3px 5px rgba(0, 0, 0, 0.125) !important;
    --bs-btn-disabled-color: #fff !important;
    --bs-btn-disabled-bg: #38b6ff !important;
    --bs-btn-disabled-border-color: #38b6ff !important;
    font-size: 15px !important;
}


.btn-b3 {
    --bs-btn-color: rgb(0, 0, 0, 1.00) !important;
    --bs-btn-bg: #5ce1e6 !important;
    --bs-btn-border-color: #5ce1e6 !important;
    --bs-btn-hover-color: #fff !important;
    --bs-btn-hover-bg: #424649 !important;
    --bs-btn-hover-border-color: #373b3e !important;
    --bs-btn-focus-shadow-rgb: 66, 70, 73 !important;
    --bs-btn-active-color: rgba(0, 0, 0, 0.125) !important;
    --bs-btn-active-bg: #4d5154 !important;
    --bs-btn-active-border-color: #5ce1e6 !important;
    --bs-btn-active-shadow: inset 0 3px 5px rgba(0, 0, 0, 0.125) !important;
    --bs-btn-disabled-color: rgba(0, 0, 0, 0.125) !important;
    --bs-btn-disabled-bg: #5ce1e6 !important;
    --bs-btn-disabled-border-color: #5ce1e6 !important;
    font-size: 15px !important;
}

.h-25vh {
    height: 25vh !important;
}

.h-50vh {
    height: 50vh !important;
}

.h-75vh {
    height: 75vh;
}

.h-100vh {
    height: 100vh;
}


/*My Grid styling*/



#MyImageGrid img {
    transition: border 0.2s ease; /* Optional: smooth transition */
}

    #MyImageGrid img:active {
        border: 1px solid #000; /* Adjust thickness and color as needed */
    }
/*LOGO Styling*/

.letterSpacing1 {
    letter-spacing: .1rem;
}

.logo {
    width: 10vw;
    height: 5vh;
    object-fit: contain;
    display: inline-block; /* This keeps the element inline so it doesn’t force a line break */
    vertical-align: middle; /* Optional: helps with vertical alignment */
}



/*ListBox Styling*/
.listbox-style {
    width: 300px;
    max-height: 400px;
    overflow-y: auto; /* Enable vertical scrolling */
    list-style: none;
    padding-left: 0;
    margin-bottom: 0;
    border: 1px solid rgba(0,0,0,.125);
    border-radius: .25rem;
    cursor:pointer;
}

    .listbox-style option {
        display: block;
        padding: .75rem 1.25rem;
        background-color: #fff;
        border-bottom: 1px solid rgba(0,0,0,.125);
        color: #495057;
        text-decoration: none;
    }

        .listbox-style option:last-child {
            border-bottom: 0;
        }

        .listbox-style option:hover, .listbox-style option:focus {
            background-color: #f8f9fa;
            text-decoration: none;
            color: #495057;
        }

        .listbox-style option:checked {
            background-color: #007bff;
            color: #fff;
        }


.listbox-style2 {
    width: 300px;
    max-height: 400px;
    overflow-y: auto; /* Enable vertical scrolling */
    list-style: none;
    padding-left: 0;
    margin-bottom: 0;
    border: 1px solid rgba(0,0,0,.125);
    border-radius: .25rem;
}

    .listbox-style2 option {
        display: block;
        padding: .75rem 1.25rem;
        background-color: #fff;
        border-bottom: 1px solid rgba(0,0,0,.125);
        color: #495057;
        text-decoration: none;
    }

        .listbox-style2 option:last-child {
            border-bottom: 0;
        }

        .listbox-style2 option:hover, .listbox-style2 option:focus {
            background-color: #5271ff;
            text-decoration: none;
            color: #fff;
        }

        .listbox-style2 option:checked {
            background-color: #007bff;
            color: #fff;
        }


.listbox-style3 {
    width: 300px;
    max-height: 400px;
    overflow-y: auto; /* Enable vertical scrolling */
    list-style: none;
    padding-left: 0;
    margin-bottom: 0;
    counter-reset: list-counter; /* Reset the counter */
}

    .listbox-style3 option {
        display: block;
        padding: .75rem 1.25rem;
        background-color: #fff;
        border-bottom: 1px solid rgba(0,0,0,.125);
        color: #495057;
        text-decoration: none;
        counter-increment: list-counter; /* Increment the counter for each item */
    }

        .listbox-style3 option::before {
            content: counter(list-counter) ". "; /* Display the counter */
            margin-right: 10px;
            font-weight: bold; /* Make the number bold */
        }

        .listbox-style3 option:last-child {
            border-bottom: 0; /* Remove bottom border for the last item */
        }

        .listbox-style3 option:hover, .listbox-style3 option:focus {
            background-color: #f8f9fa;
            text-decoration: none;
            color: #495057;
        }

        .listbox-style3 option:checked {
            background-color: #007bff;
            color: #fff;
        }



        /*MENU*/

.sidebar-menu .metismenu i {
    color: rgb(82, 113, 255) !important;
}

.viewActive {
    color: rgb(82, 113, 255) !important;
}


#imgLogo {
    /*width: 25vw;*/
    height: 25vh;
}


.sidebar-menu {
    display: block !important;
    visibility: visible !important;
    z-index: 10;
}

.custom-listbox {
    background-color: #E6E7E9; /* Match card background */
    border: none; /* Remove default border */
    color: #333; /* Adjust text color to ensure visibility */
    font-size: 1rem; /* Adjust font size if necessary */
    border-radius: 10px; /* Match card border-radius */
    box-shadow: inset 2px 2px 5px rgba(0, 0, 0, 0.1), inset -2px -2px 5px rgba(255, 255, 255, 0.7); /* Optional neumorphic effect */
    padding: 8px; /* Adjust padding */
    outline: none; /* Remove focus outline */
    height: auto; /* Adjust height if necessary */
    width: 30vw;
    overflow: hidden auto;
}

    .custom-listbox option {
        background-color: transparent; /* Match background for options */
        color: #333; /* Ensure option text is visible */
        padding: 5px; /* Add padding to options */
    }



/* Money Cards */
.dollarMade {
    height: 19vh;
    width: 22vw;
}

/*  MESSAGES/NOTES */

.messNotesA:hover {
    text-shadow: 1px 1px 2px rgba(0, 0, 0, 0.2); /* Light shadow */
    color: #0056b3; /* Slightly darker text color */
    transition: color 0.3s ease, text-shadow 0.3s ease; /* Smooth transition */

    transform: scale(1.05); /* Slightly enlarges the text */
    color: #007bff; /* Optional: Change color on hover */
    transition: transform 0.2s ease, color 0.2s ease; /* Smooth transition */
}
.sidebar-menu .metismenu i {
    color: #deaf41 !important;
}

.viewActive {
    color: rgb(82, 113, 255) !important;
}

#menuK {
    display: none;
    position: absolute;
    width: 60px;
    background-color: white;
    box-shadow: 0 0 5px grey;
    border-radius: 3px;
}

    #menuK button {
        width: 100%;
        background-color: white;
        border: none;
        margin: 0;
        padding: 10px;
    }


/*Dropdown Styling*/
.custom-dropdown {
    position: relative;
    display: inline-block;
}

    .custom-dropdown select {
        appearance: none;
        -webkit-appearance: none;
        -moz-appearance: none;
        background-color: #ffffff;
        border: 1px solid #ced4da;
        border-radius: 0.25rem;
        padding: 0.375rem 1.75rem 0.375rem 0.75rem;
        font-size: 1rem;
        line-height: 1.5;
        color: #495057;
        display: block;
        width: 100%;
        height: calc(1.5em + 0.75rem + 2px);
        background-image: url('data:image/svg+xml;charset=UTF-8,%3Csvg xmlns="http://www.w3.org/2000/svg" width="4" height="5" viewBox="0 0 4 5"%3E%3Cpath fill="%23343a40" d="M2 0L0 2h4L2 0zM2 5l2-2H0l2 2z"/%3E%3C/svg%3E');
        background-repeat: no-repeat;
        background-position: right 0.75rem center;
        background-size: 8px 10px;
    }

        .custom-dropdown select:focus {
            border-color: #80bdff;
            outline: 0;
            box-shadow: 0 0 0 0.2rem rgba(0, 123, 255, 0.25);
        }

.btn-xlarge {
    padding: 18px 28px;
    font-size: 40px;
    line-height: normal;
    -webkit-border-radius: 8px;
    -moz-border-radius: 8px;
    border-radius: 8px;
}


/* Main Anamorphic Card Style */
.custom-shadow {
    box-shadow: 0px 10px 20px rgba(0, 0, 0, 0.15), 0px 6px 6px rgba(0, 0, 0, 0.1); /* Customize as needed */
    transition: box-shadow 0.3s ease;
}

    .custom-shadow:hover {
        box-shadow: 0px 15px 30px rgba(0, 0, 0, 0.2), 0px 10px 10px rgba(0, 0, 0, 0.15); /* Stronger shadow on hover */
    }

/* Main Neumorphic Card Style */
.neumorphic-card {
    border-radius: 25px;
    /*    box-shadow: 8px 8px 15px rgba(0, 0, 0, 0.2), 
                -8px -8px 15px rgba(255, 255, 255, 0.7);*/
    transition: box-shadow 0.3s ease;
    background-color: #E6E7E9;
    border: solid;
}

    /* Neumorphic Hover Effect */
    .neumorphic-card:hover {
        box-shadow: 12px 12px 20px rgba(0, 0, 0, 0.25), -12px -12px 20px rgba(255, 255, 255, 0.9);
    }

@media (min-width: 1200px) {
    .neumorphic-card {
        height: 39vh; /* Set your desired height */
    }

    .card-body {
        overflow-y: auto;
    }
}


/*   CHARTS   */
.chartjs-render-monitor {
    -webkit-animation: chartjs-render-animation 1s !important;
    animation-duration: 1s !important;
    animation-timing-function: ease;
    animation-delay: 0s;
    animation-iteration-count: 1;
    animation-direction: normal;
    animation-fill-mode: none;
    animation-play-state: running;
    animation-name: chartjs-render-animation;
    animation-timeline: auto;
    animation-range-start: normal;
    animation-range-end: normal;
}

.chartjs-render-monitor {
    animation: chartjs-render-animation 1s !important;
    animation-duration: 1s !important;
    animation-timing-function: ease;
    animation-delay: 0s;
    animation-iteration-count: 1;
    animation-direction: normal;
    animation-fill-mode: none;
    animation-play-state: running;
    animation-name: chartjs-render-animation;
    animation-timeline: auto;
    animation-range-start: normal;
}

.custom-legend ul {
    list-style: none;
    text-align: center;
    padding: 0;
}

.custom-legend li {
    display: inline-block;
    margin-right: 10px;
    font-size: 10px; /* Smaller font size */
}

    .custom-legend li span {
        display: inline-block;
        width: 8px; /* Smaller color box */
        height: 8px; /* Smaller color box */
        margin-right: 5px;
        vertical-align: middle;
    }