.leftbanner .button,
.sidebar h2 {
    text-transform: uppercase;
    font-weight: 600
}

.leftpanel,
.reports-last-header-bar {
    margin-bottom: 30px
}

.leftpanel {
    background: #fff;
    border-radius: 8px;
    box-shadow: 0 2px 8px rgba(0, 0, 0, .05);
    padding: 20px 15px
}

.sidebar h2 {
    font-size: 18px;
    color: #112a46;
    margin-bottom: 15px;
    letter-spacing: .5px
}

.categories a {
    display: block;
    color: #333;
    font-size: 14px;
    text-decoration: none;
    padding: 8px 10px;
    border-radius: 4px;
    transition: .25s
}

.categories a:hover {
    /* background-color: #f3f7ff;
    color: #0d6efd; */

    background-color: #DCE3F4;
    color: #4966AB;

    padding-left: 14px
}

.categories a.active {
    background-color: #0d6efd;
    color: #fff;
    font-weight: 600
}

.leftbanner {
    background: #f8fafc;
    border: 1px solid #e5e7eb;
    border-radius: 8px;
    padding: 20px;
    margin-top: 25px
}

.leftbanner .title {
    font-size: 16px;
    font-weight: 600;
    color: #112a46;
    margin-bottom: 12px
}

.leftbanner .button {
    display: inline-block;
    background: linear-gradient(135deg, #fff 0, #f3f8ff 100%);
    color: #4966AB;
    /* color: #8B0000; */

    padding: 12px 28px;
    border-radius: 50px;
    text-decoration: none;
    letter-spacing: .8px;
    transition: .35s;
    border: none;
    box-shadow: 0 3px 10px rgba(13, 110, 253, .25);
    /* box-shadow: 0 3px 10px #FFD6D6; */

    position: relative;
    overflow: hidden
}

.leftbanner .button::before {
    content: "";
    position: absolute;
    top: 0;
    left: -75px;
    width: 50px;
    height: 100%;
    background: linear-gradient(120deg, rgba(255, 255, 255, .6), transparent);
    transform: skewX(-25deg);
    transition: left .7s
}

.leftbanner .button:hover::before {
    left: 120%
}

.leftbanner .button:hover {
    background: linear-gradient(135deg, #526EB0 0, #4966AB 100%);
    /* background: linear-gradient(135deg, #b30000 0%, #8B0000 100%); */
    /* background: linear-gradient(135deg, #8B0000 0%, #5c0000 100%); */


    color: #fff;
    transform: translateY(-3px);
    box-shadow: 0 6px 18px rgba(13, 110, 253, .35)
    /* box-shadow: 0 6px 18px rgba(13, 110, 253, .35); */
    /* box-shadow: 0 6px 18px rgba(90, 0, 0, 0.3); */


}

.logo-container {
    margin-top: 25px;
    text-align: center
}

.logo-container img {
    display: inline-block;
    width: 80px;
    height: auto;
    margin: 10px 8px;
    opacity: .9;
    transition: transform .3s, opacity .3s
}

.logo-container img:hover {
    transform: scale(1.05);
    opacity: 1
}

.reportlistbox,
.rightpanel .search {
    margin-bottom: 20px
}

.rightpanel {
    background: #fff;
    border-radius: 12px;
    padding: 25px 20px;
    box-shadow: 0 2px 12px rgba(0, 0, 0, .05)
}

.rightpanel .search input.form-ui {
    width: 100%;
    padding: 12px 15px;
    border-radius: 8px;
    border: 1px solid #d1d5db;
    font-size: 14px;
    outline: 0;
    transition: .3s
}

.rightpanel .search input.form-ui:focus {
    /* border-color: #0d6efd; */
    border-color: #4966AB;

    box-shadow: 0 2px 6px rgba(13, 110, 253, .15);
    /* box-shadow: 0 2px 6px rgba(139, 0, 0, 0.25); */

}

.reportlist {
    max-height: 700px;
    overflow-y: auto;
    padding-right: 5px
}

.reportlistbox {
    background: #fff;
    border-radius: 10px;
    padding: 18px 20px;
    box-shadow: 0 2px 10px rgba(0, 0, 0, .03);
    transition: transform .3s, box-shadow .3s
}

.reportlistbox:hover {
    transform: translateY(-2px);
    box-shadow: 0 6px 18px rgba(0, 0, 0, .08)
}

.reportlistbox h3 .reportlstitle {
    font-size: 18px;
    font-weight: 600;
    color: #112a46;
    text-decoration: none;
    transition: color .3s
}

.reportlistbox h3 .reportlstitle:hover {
    /* color: #0d6efd; */
    color: #4966AB;

}

.reportlistbox p.mb-3 {
    font-size: 14px;
    color: #4b5563;
    line-height: 1.6
}

.reportbotom {
    margin-top: 10px;
    font-size: 13px;
    color: #6b7280
}

.reportbotom span {
    margin-left: 10px;
    color: #9ca3af
}

.reportlist::-webkit-scrollbar {
    width: 6px
}

.reportlist::-webkit-scrollbar-track {
    background: #f1f1f1;
    border-radius: 6px
}

.reportlist::-webkit-scrollbar-thumb {
    background: #cbd5e1;
    border-radius: 6px
}

.reportlist::-webkit-scrollbar-thumb:hover {
    background: #0d6efd
}

@media (max-width:767px) {
    .hidden-mobile {
        display: none !important
    }

    .leftpanel {
        padding: 15px
    }

    .reportlistbox h3 .reportlstitle,
    .sidebar h2 {
        font-size: 16px
    }

    .categories a {
        font-size: 13px;
        padding: 6px 8px
    }

    .reportlistbox {
        padding: 15px 12px
    }

    .reportlistbox p.mb-3 {
        font-size: 13px
    }

    .rightpanel {
        padding: 20px 15px
    }
}