body {
    background: linear-gradient(to top,#f8f9fa,#e9ecef);
}
.bg-custom-gradient {
    background-image: linear-gradient(to top, #7557f3 10%, #161251 85%);
}
.custom-hr {
    border:none;
    height:1px;
    background:transparent;
    margin:20px 0;
}
.sidebar {
    width: 200px;
    min-width: 180px;
    position: fixed;
    height: 100vh;
    overflow-y: auto;
    overflow-x: hidden;
}
.sidebar-content{
    display:flex;
    flex-direction:column;
    max-height:100%;
    align-items:center;
    overflow-y:auto;
    padding:0;
}
.sidebar-brand {
    display: flex;
    align-items: center;
    justify-content: center;
    height: 100%;
    
}
.brand-text {
    font-size:12px;
}

.sidebar-brand img {
    max-width: 100%;
    height: auto;
    object-fit: cover;
    margin-bottom: 10px;
}
.user-image-container img {
    padding-right: 50px;
    width: 30px;
    height: auto;
    object-position:center;
    transition:transform 0.3s ease;
    margin: 0;
  
}

.container-fluid{
   
    padding-left:140px;
}
.User-image-container {
    display: flex;
    width:100%;
    height:auto;
    align-items: center;
    justify-content:flex-end;
    gap: 25px;
    margin:0;
    color: #666;
    padding-right :20px;
    transition: color 0.3s;
}
    .User-image-container button {
        border: none;
        background-color: transparent;
        cursor: pointer;
        padding: 5px 10px;
       
        
        transition: background-color 0.3s,box-shadow 0.3s;
    }
.User-image-container button:hover, .User-image-container button:focus {
        background: linear-gradient(to top,#f8f9fa,#e9ecef);
        box-shadow: 0 0 8px rgba(255,255,255,0.8);
}
.User-image-container button.active {
        background: linear-gradient(to top,#f8f9fa,#e9ecef);
        box-shadow: 0 0 8px rgba(255,255,255,0.8);
}
.button-floating {
    transform: translateY(-5px);
    box-shadow: 0 10px 20px rgba(0,0,0,0.5);
    z-index: 1000;
    position: relative;
    transition: all 0.3s ease;
}

.dropdown-toggle{
    background:transparent;
    border:none;
    padding:0;
    box-shadow:none;
}
.dropdown-toggle::after{
    display:none;
}
.dropdown-item {
    
    padding: 20px 10px ;
    border: none;
    font-weight: bold;
    font-size:large;
    font-family: cursive;
   
    
    
}
.dropdown-item.update-password{
        color: #28a745;
        background-color: #f2fcf4;
    }
.dropdown-item.update-password:hover {
        background-color: #f2fcf4;
        box-shadow: 0 0 8px rgba(52,206,87,0.5);
    }
.dropdown-item.signout {
            color: #dc3545;
            background-color: #faf2f2;
        }
.dropdown-item.signout:hover {
        background-color: #faf2f2;
        box-shadow: 0 0 8px rgba(228,96,109,0.5);
    }
.dropdown-menu {
    padding: 0;
    border: none;
    box-shadow: 0 2px 5px rgba(0,0,0,0.15);
   
}
.dropdown-toggle:active,.dropdown-toggle:focus{
    box-shadow:none;
    outline:none;
}
.card {
    background:linear-gradient(to right,#f8f9fa,#e9ecef);
    transition:transform 0.3s ease,box-shadow 0.3s ease;
    cursor:pointer;
    border:none;
    box-shadow:0 2px 5px rgba(0,0,0,0.1);
}
.card-floating{
    transform:scale(1.1);
    box-shadow:0 8px 16px rgba(0,0,0,0.25);
    z-index:1000;
    position:relative;
}
.marquee-container {
    width: calc(100%-40px);
    margin-left:240px;
    overflow: hidden;
    margin-right:6px;
    white-space: nowrap;
    box-sizing: border-box;
}
.marquee{
    display:inline-block;
    padding-left:100%;
    animation:marquee 25s linear infinite;
}
@keyframes marquee{
    0%{
        transform:translate(0,0);
    }
    100%{
        transform:translate(-100%,0);
    }
}
.marquee span{
    display:inline-block;
    font-family:Arial, Helvetica, sans-serif;
    font-size:large;
    padding-right:100%;
   
}
.border-left-teal{
    border-left:5px solid #008080 !important;
}
.bg-teal{
    background-color:#008080 !important;
}
.text-teal{
    color:#008080 !important;
}
/*high resolution*/
@media screen and (min-resolution:2dppx){
    .card {
        background: linear-gradient(to right,#f8f9fa,#e9ecef);
    }
    .user-image-container img{
        width:120px;
    }
}
/*low resolution*/
@media screen and (max-resolution:1dppx){
    .card {
        background: linear-gradient(to right,#f8f9fa,#e9ecef);
    }
    .user-image-container img{
        width:80px;
    }
}