/*Account Header CSS*/
.account-header {
    background: linear-gradient(45deg, #FFFFFF 14.57%, rgba(255, 255, 255, 0.9) 42.01%, rgba(2, 35, 62, 0.85) 86.02%);
    min-height:12rem;
}

    .account-header .name {
        font-family: Georgia;
        font-weight: 700;
        font-size: 59px;
    }

/*Parterns CSS*/
.partners {
    font-family: 'Inter', sans-serif;
    font-size: 44px;
    display: flex; /* Use flexbox to align items in a row */
    align-items: center; /* Center align items vertically */
    width: auto;
}

.partners-label {
    font-weight: 300; /* Bold for label */
    margin-right: .75rem; /* Space between label and date */
}

.partners-date {
    font-weight: 700; /* Lighter weight for the date */
}

.partners-line {
    width: 4px;
    height: 90px;
    background-color: #BBAEA2;
}

/*TelerikCard CSS*/
.TelerikCard {
    margin-top: -60px;
    position: relative; /* Ensures z-index works within its container */
    overflow:visible !important;
}

.kard {
    background-color: transparent;
    z-index: 1; /* This ensures the TelerikCard is on top */
}

    .kard .records {
        background-color: #E9E8E9;
    }

#kard {
    background-color: #02233E;
    color: white;
}

    #kard .vertical-text {
        writing-mode: vertical-rl;
        transform: rotate(180deg);
        text-align: center;
        line-height: 0.68;
        font-family: 'Inter', sans-serif;
        font-weight: 300;
        font-size: 44px;
    }

.card-container {
    display: flex;
    align-items: center;
    gap: 16px;
}

.icon-container {
    background-color: #001f3f;
    border-radius: 50%;
    height: 80px;
    width: 100px;
    display: flex;
    justify-content: center;
    align-items: center;
}

.text-container {
    display: flex;
    flex-direction: column;
    width: 100%;
    font-family: 'Inter', sans-serif;
}

.card-title {
    font-weight: 600;
    color: #8B909B;
}

.card-text {
    color: #8B909B;
    margin-bottom: .25rem;
    font-weight: 300;
}

/* New Card Style */
.new-card {
    position: absolute; /* Absolute positioning to be behind the TelerikCard */
    width: 520px; /* Adjust width according to the design */
    height: 289px; /* Adjust height based on card design */
    top: -22px; /* Position relative to parent container */
    border: 3px solid #BBAEA2 !important; /* Use solid border with a specified width */
}

/*Companies Portfolio*/

.header-wrapper p {
    font-weight: 700;
    font-size: 30px;
    color: #02233E;
    margin-bottom: 0rem;
}

.header-wrapper .count {
    font-weight:600;
    font-size:24px;
}

/* Add padding to the wrapper for the carousel */
.carousel-wrapper {
    padding: 0 20px; /* Adjust the padding value as needed */
}

/* Center the Carousel horizontally */
.k-scrollview {
    margin: 0 auto;
    border: none !important; /* Remove borders from the scrollview */
}

/* Enable absolute positioning inside the Carousel template */
.image-with-text {
    position: relative;
    text-align: center;
    flex: 0 0 auto; /* Prevent flex items from shrinking */
    margin: 0 5px; /* Adjust spacing between images */
}

/* Ensure carousel items don't overflow */
.d-flex {
    overflow: hidden; /* Prevent overflow */
}

/* Remove borders from the carousel */
.k-carousel {
    border: none !important; /* Remove borders from the carousel */
    box-shadow: none !important; /* Remove any box shadow */
}

/* Hide the navigation wrapper */
.k-scrollview-nav-wrap {
    display: none !important; /* Hides the navigation wrapper */
}

.k-scrollview-next .k-icon {
    color: #5D504A;
    bottom: 32px;
}

.k-scrollview-prev .k-icon {
    color: #E9E8E9;
    bottom: 32px;
}

/*PipeLine Data Grid*/
.btn-custom-secondary {
    background-color: #455262;
    color: white;
}

.grid-heading {
    padding-left: 10px;
    color: #02233E;
    font-weight: 700;
    margin-bottom: 0; /* Remove bottom margin to align with the fixed element */
}

.fixed-element {
    width: 52px;
    height: 52px;
    border-radius: 30px;
    background-color: #02233E;
}

    .fixed-element img {
        width: 80%;
        height: auto;
    }


/*Active Data Grid*/
.team-image {
    width: 30px;
    height: 30px;
    margin-right: 5px;
    border-radius: 30px;
}

.active-fixed-element {
    width: 52px;
    height: 52px;
    border-radius: 30px;
    background-color: #02233E;
}

    .active-fixed-element img {
        width: 60%;
        height: auto;
    }


/*Placement Data Grid*/
.team-image {
    width: 30px;
    height: 30px;
    margin-right: 5px;
    border-radius: 30px;
}

.placement-fixed-element {
    width: 52px;
    height: 52px;
    border-radius: 30px;
    background-color: #02233E;
}

/*Funtional Map & Placement Heatmap*/

.FunctionalMap {
    font-family: 'Inter', sans-serif;
    font-weight: 700;
    font-size: 30px;
    color: #02233E;
}

.years-container .first-year {
    background-color: #E5E5E5;
    margin-left: 5%;
    width: 72%;
}

.years-container .second-year {
    background-color: #E5E5E5;
    width: 20%;
    margin-left: 2%;
}

.bar-chart-legend-item .color-bar {
    width: 15px;
    height: 3px;
    margin-right: 5px;
}

.market-segments-heading {
    margin-left: 15px;
}

.color-bar {
    width: 15px;
    height: 15px;
    margin-right: 5px;
}

.heatmap-legend-container {
    display: flex;
    justify-content: center;
    flex-wrap: wrap;
    margin-top: 10px;
}

.legend-item {
    display: flex;
    align-items: center;
    margin-right: 19px;
}

.placement-fixed-element i {
    width: 60%;
    height: auto;
    color: #fff;
    font-size: 24px;
}

.heat-chart-legend {
    flex-wrap: wrap;
}

.heat-chart-legend-item {
    display: flex;
    align-items: center;
    margin-right: 15px;
    margin-bottom: 5px;
}

.color-bar {
    width: 20px;
    height: 20px;
    margin-right: 5px;
}

/*Overlapping Circle*/
.circle-container {
    display: flex;
    align-items: center;
}

.circle {
    width: 45px;
    height: 45px;
    border-radius: 50%;
}

.telerik-grid * {
    font-family: 'Inter', sans-serif;
}