body{background-image: url(../app/assets/img/bluelaneBackGround.jpg); background-repeat: no-repeat; background-size: cover;background-position: right center; min-height: 100vh;}
/* Back btn style */
.backBtn { position: fixed; padding: 15px 30px; margin-left: 1rem; margin-top: 1rem; font-size: 18px; outline: none; border: none; border-radius: 10px;transition: 0.5s; background: #1e1e1e; cursor: pointer; color: lightblue; box-shadow: 0 0 10px #363636, inset 0 0 10px #363636; z-index: 1;}
.backBtn:hover { animation: a 0.5s 1 linear;}
/* Back btn style */

/* View Style */
.share-icon path { fill: #fff;}
/* View Style */

/* Table styles */
th, tr{ text-align: center;}
.dailyReport{ background-color: #0073cf; color: #fff;}
.totals{ font-weight: bolder;}
/* Table styles */

/* Style for Tooltip */
/* From Uiverse.io by Mohammad-Rahme-576 */ 
/* Container Styles */
.tooltip-container { position: relative; display: inline-block; font-family: "Arial", sans-serif; overflow: visible;}

/* Button Styles */
.button-content { display: flex; align-items: center; justify-content: center; background: linear-gradient(135deg, #6e8efb, #a777e3); color: white;padding: 14px 28px; border-radius: 50px; cursor: pointer; transition: background 0.4s cubic-bezier(0.25, 0.8, 0.25, 1), transform 0.3s ease, box-shadow 0.4s ease; box-shadow: 0 8px 15px rgba(0, 0, 0, 0.1); position: relative; z-index: 10; overflow: hidden;}
.button-content::before { content: ""; position: absolute; inset: 0; border-radius: inherit; background: linear-gradient( 135deg,rgba(110, 142, 251, 0.4),rgba(167, 119, 227, 0.4)); filter: blur(15px); opacity: 0; transition: opacity 0.5s ease; z-index: -1;}
.button-content::after { content: ""; position: absolute; top: -50%; left: -50%; width: 200%; height: 200%; background: radial-gradient( circle,rgba(255, 255, 255, 0.3) 0%,
rgba(255, 255, 255, 0) 70%); transform: scale(0); transition: transform 0.6s ease-out; z-index: -1;}
.button-content:hover::before { opacity: 1;}
.button-content:hover::after { transform: scale(1);}
.button-content:hover { background: linear-gradient(135deg, #a777e3, #6e8efb); box-shadow: 0 12px 24px rgba(0, 0, 0, 0.2); transform: translateY(-4px) scale(1.03);}
.button-content:active { transform: translateY(-2px) scale(0.98); box-shadow: 0 5px 10px rgba(0, 0, 0, 0.15);}
.text { font-size: 18px; font-weight: 600; margin-right: 12px; white-space: nowrap; text-shadow: 0 1px 2px rgba(0, 0, 0, 0.1); transition: letter-spacing 0.3s ease;}
.button-content:hover .text { letter-spacing: 1px;}
.share-icon { fill: white; transition: transform 0.4s cubic-bezier(0.68, -0.55, 0.265, 1.55), fill 0.3s ease; filter: drop-shadow(0 1px 2px rgba(0, 0, 0, 0.1));}
.button-content:hover .share-icon { transform: rotate(180deg) scale(1.1); fill: #ffffff;}
/* Button Styles */

/* Tooltip Styles */
.tooltip-content { position: absolute; top: 102%; left: 50%; transform: translateX(-50%) scale(0.8); background: white; border-radius: 15px; padding: 22px;box-shadow: 0 15px 30px rgba(0, 0, 0, 0.2); opacity: 0; visibility: hidden; transition: opacity 0.5s cubic-bezier(0.68, -0.55, 0.265, 1.55), transform 0.5s cubic-bezier(0.68, -0.55, 0.265, 1.55), visibility 0.5s ease; z-index: 100; pointer-events: none; backdrop-filter: blur(10px); background: rgba(255, 255, 255, 0.9); z-index: 2;}
.tooltip-container:hover .tooltip-content { opacity: 1; visibility: visible; transform: translateX(-50%) scale(1); pointer-events: auto;}
/* Social Icons Styles */
.social-icons { display: flex; justify-content: space-between;gap: 12px;}
.social-icon { display: flex; align-items: center; justify-content: center; width: 48px; height: 48px; border-radius: 50%; background: #f0f0f0; transition: transform 0.4s cubic-bezier(0.68, -0.55, 0.265, 1.55), background 0.3s ease, box-shadow 0.4s ease; box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1); position: relative; overflow: hidden;}
.social-icon::before { content: ""; position: absolute; inset: 0; background: radial-gradient( circle at center, rgba(255, 255, 255, 0.8) 0%, rgba(255, 255, 255, 0) 70%); opacity: 0; transition: opacity 0.3s ease;}
.social-icon:hover::before { opacity: 1;}
.social-icon svg { width: 24px; height: 24px; fill: #333; transition: transform 0.4s cubic-bezier(0.68, -0.55, 0.265, 1.55), fill 0.3s ease; z-index: 1;}
.social-icon:hover { transform: translateY(-5px) scale(1.1); box-shadow: 0 10px 20px rgba(0, 0, 0, 0.15);}
.social-icon:active { transform: translateY(-2px) scale(1.05); box-shadow: 0 5px 10px rgba(0, 0, 0, 0.1);}
.social-icon:hover svg { transform: scale(1.2); fill: white;}
.social-icon.twitter:hover { background: linear-gradient(135deg, #1da1f2, #1a91da);}
.social-icon.facebook:hover { background: linear-gradient(135deg, #1877f2, #165ed0);}
.social-icon.linkedin:hover { background: linear-gradient(135deg, #0077b5, #005e94);}
/* Animation for Pulse Effect */
@keyframes pulse { 0% { box-shadow: 0 0 0 0 rgba(110, 142, 251, 0.4);}
70% { box-shadow: 0 0 0 20px rgba(110, 142, 251, 0);}
100% { box-shadow: 0 0 0 0 rgba(110, 142, 251, 0);}}
.button-content { animation: pulse 3s infinite;}
/* Hover Ripple Effect */
@keyframes ripple { 0% { transform: scale(0); opacity: 1;}
100% { transform: scale(4); opacity: 0;}}
.button-content::before { content: ""; position: absolute; inset: 0; background: rgba(255, 255, 255, 0.3); border-radius: inherit; transform: scale(0);opacity: 0;}
.button-content:active::before { animation: ripple 0.6s linear;}
/* Tooltip Arrow */
.tooltip-content::before { content: ""; position: absolute; top: -10px; left: 50%; transform: translateX(-50%); border-width: 0 10px 10px 10px; border-style: solid; border-color: transparent transparent rgba(255, 255, 255, 0.9) transparent; filter: drop-shadow(0 -3px 3px rgba(0, 0, 0, 0.1));}
/* Accessibility */
.button-content:focus { outline: none; box-shadow: 0 0 0 3px rgba(110, 142, 251, 0.5), 0 8px 15px rgba(0, 0, 0, 0.1);}
.button-content:focus:not(:focus-visible) { box-shadow: 0 8px 15px rgba(0, 0, 0, 0.1);}
/* Custom Scrollbar for Tooltip Content */
.tooltip-content::-webkit-scrollbar { width: 6px;}
.tooltip-content::-webkit-scrollbar-track { background: #f1f1f1; border-radius: 3px;}
.tooltip-content::-webkit-scrollbar-thumb { background: #888; border-radius: 3px;}
.tooltip-content::-webkit-scrollbar-thumb:hover { background: #555;}
/* Style for Tooltip */

/* Vehicle Strandies*/
@media screen and (min-width: 320px){
    /* Index BlueLane Tittle */
        .strandiesTitleContainer{ display: flex; align-items: center; justify-content: center; padding-top: 7.5rem; margin-bottom: 2rem; height: 10rem;}
        .blueLaneTitle{font-weight:bolder; font-size: 3rem; color:#3c91e6; animation: shadowAnimation 15s infinite;}
        @keyframes shadowAnimation {0% { text-shadow: 5px 5px 10px rgba(0, 0, 0, 0.5);} 50% { text-shadow: 10px 10px 20px rgba(0, 0, 0, 0.7); }100% { text-shadow: 5px 5px 10px rgba(0, 0, 0, 0.5); }}
    /* Index BlueLane Tittle */

    /* ToolTip */
    .tooltip-container{ position: fixed; right: 15px; top: 20px;}
    /* ToolTip */

    /* Cards Style Section */
    .mainContentContainer{ height: 100%; display: flex; align-items: center; justify-content: center;}
    .cardsContainer{ display: grid; grid-template-columns: auto; gap: 0.5rem; margin-bottom: 1rem;}
    .contentContainer{ height: auto; display: grid; grid-template-columns: auto; align-items: center; justify-content: center; flex-direction: column; gap: 1rem;}
    .insideMatnogPortContainer, .blueLaneAreaContainer, .overAllTotalContainer{ border: 2px solid rgba(110, 142, 251, 0.5); padding: 0.5rem 0.5rem 1rem 0.5rem; border-radius: 1rem;}
    .impText, .blaText{ text-align: center; font-weight: bolder; text-transform: uppercase; font-size: 25px; font-weight: 700; color: #f5f5f5; text-shadow: 5px 2px 1px rgba(110, 142, 251, 0.5), 1px 2px 1px #919191, 1px 3px 1px #919191, 1px 4px 1px #919191, 1px 1px 1px #919191, 1px 1px 1px #919191, 1px 1px 1px #919191, 1px 1px 1px #919191, 1px 1px 1px #919191, 1px 1px 1px #919191, 1px 30px 60px;}
    .totalNumVehicles, .totalNumPassengers{ border: 1px solid grey; position: relative; z-index: -1; width: 16.5rem; height: auto; padding: 2rem 2rem; border-radius: 0.5rem; background-color: #fff; box-shadow: rgba(0, 0, 0, 0.4) 0px 2px 4px, rgba(0, 0, 0, 0.3) 0px 7px 13px -3px, rgba(0, 0, 0, 0.2) 0px -3px 0px inset;}
    .total{ font-size: 2rem; font-weight: bolder; margin-top: 2.5rem;}
    .titleName{ font-size: 1rem;}
    .viewImg, .cardsImg{ width: 3rem; position: absolute; top: 10px; left: 10px; border: 1px solid grey; border-radius: 2rem; padding: 0.2rem;}
    /* Cards Style Section */   
    }

@media screen and (min-width: 568px){
    /* Index BlueLane Tittle */
    .strandiesTitleContainer{ padding-top: 4rem; height: auto;}
    /* Index BlueLane Tittle */
    /* Cards Style Section */
    .mainContentContainer{ padding-bottom: 2rem;}
    .contentContainer{ grid-template-columns: auto auto; width: auto; height: auto;}
    /* Cards Style Section */
}

@media screen and (min-width: 1024px){ 
    /* Index BlueLane Tittle */
        .strandiesTitleContainer{ margin-bottom: 3rem; padding-top: 4rem;}
        .blueLaneTitle{font-weight:bolder; font-size: 6.5rem; margin-top: 0;}
    /* Index BlueLane Tittle */
    /* Cards Style Section */
        .contentContainer{ gap: 2rem; overflow-x: hidden;}
        .totalNumVehicles, .totalNumPassengers{ width: 30rem; height: 22rem;}
        .cardsImg{ top: 15px; left: 15px; width: 6rem; border-radius: 5rem; padding: 0.5rem;}
        .total{ margin-top: 4.5rem; font-size: 5rem;}
        .titleName{ font-size: 2rem; margin-top: 2.5rem;}
        .impText, .blaText{ font-size: 2rem;}
    /* Cards Style Section */
}
@media screen and (min-width: 1680px){
    /* Index BlueLane Tittle */
        .strandiesTitleContainer{padding-top: 0; margin-bottom: 0;}
    /* Index BlueLane Tittle */
    /* Cards Style Section */
        .cardsContainer{ grid-template-columns: auto auto; gap: 1rem;}
        .cardsImg{ width: 3.5rem;}
        .totalNumVehicles, .totalNumPassengers{ width: 24rem; height: 13rem;}
        .total{ margin-top: 5rem; font-size: 4rem; margin: 0;}
        .titleName{ font-size: 1.5rem; margin-top: 3.5rem; margin: 0;}
        .impText, .blaText{ font-size: 2rem;}
    /* Cards Style Section */
}