.btn-navbar, .homebutton{
    position: relative; /* Make the button container a positioning context */
    display: inline-block; /* To allow for the button size to wrap the images */
    height:60px;
    width:180px;
    padding-top: 10px;
    left: 0px;
    background:radial-gradient(#302d26,#070706 );
    border-radius:9px 9px 9px 9px;
     border:1px solid #3f3d38;
    transition: opacity 0.3s ease;
}
.btn-small{
    position: relative; /* Make the button container a positioning context */
    /*display: inline-block;  To allow for the button size to wrap the images */
    height:30px;
    width:30px;
    right: 20px;
    background:radial-gradient(#302d26,#070706 );
    border-radius:9px 9px 9px 9px;
    border:1px solid #3f3d38;
    --bs-btn-color:transparent;
    --bs-btn-bg:#0d6efd;
    --bs-btn-hover-bg:radial-gradient(#3398CC,#32332c );
    --bs-btn-focus-shadow-rgb:49,132,253;
    --bs-btn-active-color:radial-gradient(#eefffd , #59c9ec );
    --bs-btn-active-bg:#0a58ca;
    --bs-btn-active-shadow:inset 0 3px 5px #9b8f80;
    --bs-btn-disabled-color:#fff;
    --bs-btn-disabled-bg:#0d6efd;
    --bs-btn-disabled-border-color:#3f3d38;
    --bs-btn-hover-border-color:1px solid skyblue;
    --bs-btn-active-border-color:1px solid #fff;

    transition: opacity 0.3s ease;
}
.btn-small img {
     position: absolute;
  width: 25px;
  height: 25px;
  right:2px;
    top:2px;
}
/* Icon inside the button */
.btn-icon {
    transform: translate(-3px, -2px);
    fill: var(--icon-color, #9b8f80); /* Default icon color */
}


.btn-small:hover {
    background:radial-gradient(#3398CC,#32332c );
     border-color:skyblue;
}

.btn-small:hover .btn-icon {
    fill: var(--icon-color-hover, cyan);
}

.btn-small:active {
    background:radial-gradient(#eefffd , #59c9ec );
         border-color:black;
}

.btn-small:active .btn-icon {
    fill: var(--icon-color-active, #000);

}

.homebutton img{
    position: absolute; /* Stack images on top of each other */
    top: 5px;
    right: 12.5px;
    width: 85%; /* Adjust based on the image size, if needed */
    height: 85%;
    opacity: 1; /* Initially hide all images */
    transition: opacity 0.3s ease; /* Add transition for smooth visibility change */
}


.createbutton, .editbutton, .deletebutton, .savebutton, .cancelbutton, .loginbutton, .logoutbutton, .registerbutton, .viewbutton, .parawheelbutton, .pausebutton, .profilebutton, .buybutton{
    position: relative; /* Make the button container a positioning context */
    height:60px;
    width:60px;
    background:radial-gradient(#302d26,#070706 );
    border-radius:9px 9px 9px 9px;
    border:1px solid #3f3d38;
    gap: 100px;
    opacity:1;
    z-index: 1; 
}


 .createbutton-text, .editbutton-text, .deletebutton-text, .savebutton-text, .cancelbutton-text, .loginbutton-text, .logoutbutton-text, .registerbutton-text, .viewbutton-text, .buybutton-text{
    position: absolute;  /* Position the text absolutely */
    top: 60%;  /* Center it vertically */
    left: 50%;  /* Center it horizontally */
    transform: translate(-50%, -20%);  /* Center the text exactly */
    color: #fff;  /* Adjust text color */
    font-family: 'calibri';
    font-weight: bold;  /* Optional: make the text bold */
    z-index: 3;  /* Ensure text is on top of images */
    font-size: 15px;
}

.createbutton-text:hover, .editbutton-text:hover, .deletebutton-text:hover,.savebutton-text:hover, .cancelbutton-text:hover,  .loginbutton-text:hover, .logoutbutton-text:hover, .registerbutton-text:hover{color:cyan;}
.createbutton-text:active, .editbutton-text:active,.deletebutton-text:active, .savebutton-text:active, .cancelbutton-text:active,  .loginbutton-text:active, .logoutbutton-text:active, .registerbutton-text:active{color:#32332c;}


.createbutton img, .editbutton img, .deletebutton img, .cancelbutton img, .savebutton img, .loginbutton img, .logoutbutton img,  .registerbutton img,  .viewbutton img , .parawheelbutton img , .pausebutton img, .profilebutton img, .buybutton img{
    position: absolute; /* Stack images on top of each other */
    top: 5px;
    left: 5px;
    width: 50px;
    height: 50px;
    opacity: 1; /* Initially hide all images */
    transition: opacity 0.3s ease; /* Add transition for smooth visibility change */
    z-index: 2; 
}


.createbutton:hover, .editbutton:hover, .deletebutton:hover, .cancelbutton:hover, .savebutton:hover,  .loginbutton:hover, .logoutbutton:hover, .registerbutton:hover, .viewbutton:hover, .parawheelbutton:hover , .homebutton:hover , .pausebutton:hover, .profilebutton:hover, .buybutton:hover{
    background:radial-gradient(#3398CC,#32332c );
    border-color:skyblue;
}
.createbutton:active, .editbutton:active, .deletebutton:active,.cancelbutton:hover, .savebutton:hover, .loginbutton:active, .logoutbutton:active, .registerbutton:active , .viewbutton:active, .parawheelbutton:active, .homebutton:active, .pausebutton:active, .profilebutton:active, .buybutton:active{
    background:radial-gradient(#eefffd , #59c9ec );
         border-color:black;}


.createbutton:hover img{content:  url("/static/images/create_hover.png") ;width:auto; }
.createbutton:active img{content:  url("/static/images/create_active.png");width:auto ; }
.editbutton:hover img{content:  url("/static/images/edit_hover.png"); width:auto; }
.editbutton:active img{content:  url("/static/images/edit_active.png");width:auto;}
.deletebutton:hover img{content:  url("/static/images/delete_hover.png"); width:auto; }
.deletebutton:active img{content:  url("/static/images/delete_active.png");width:auto;}

.loginbutton:hover img{content:  url("/static/images/login_hover.png"); width:auto; }
.loginbutton:active img{content:  url("/static/images/login_active.png");width:auto;}
.logoutbutton:hover img{content:  url("/static/images/logout_hover.png"); width:auto; }
.logoutbutton:active img{content:  url("/static/images/logout_active.png");width:auto;}
.registerbutton:hover img{content:  url("/static/images/register_hover.png"); width:auto; }
.registerbutton:active img{content:  url("/static/images/register_active.png");width:auto;}

.viewbutton:hover img{content:  url("/static/images/view_hover.png"); width:auto; }
.viewbutton:active img{content:  url("/static/images/view_active.png");width:auto;}
.cancelbutton:hover img{content:  url("/static/images/cancel_hover.png"); width:auto; }
.cancelbutton:active img{content:  url("/static/images/cancel_active.png");width:auto;}
.pausebutton:hover img{content:  url("/static/images/pause_hover.png"); width:auto; }
.pausebutton:active img{content:  url("/static/images/pause_active.png");width:auto;}

.savebutton:hover img{content:  url("/static/images/save_hover.png"); width:auto; }
.savebutton:active img{content:  url("/static/images/save_active.png");width:auto;}

.parawheelbutton:hover img{content:  url("/static/images/parawheel_hover.png"); width:auto; }
.parawheelbutton:active img{content:  url("/static/images/parawheel_active.png");width:auto;}
.homebutton:hover img{content:  url("/static/images/home_hover.png"); width:auto; }
.homebutton:active img{content:  url("/static/images/home_active.png");width:auto;}

.profilebutton:hover img{content:  url("/static/images/profile_hover.png"); width:auto; }
.profilebutton:active img{content:  url("/static/images/profile_active.png");width:auto;}

.buybutton:hover img{content:  url("/static/images/buy_hover.png"); width:auto; }
.buybutton:active img{content:  url("/static/images/buy_active.png");width:auto;}


/* When the panel is shown */
.side-panel.show {
    display: block; /* Make the panel visible */
    transform: translateX(0); /* Slide the panel in from the right */
}
.hide-button, .show-button {
    position: relative; /* Make the button container a positioning context */
    display:inline-block;
    height: 30px;
    width: 80px;
    border-radius: 9px;
    border: 1px solid #3f3d38;
    text-align: left; /* Align the text in the center */
    font-size: 14px;
    font-weight: bold;
    color: white; /* Default text color */
    cursor: pointer;
    transition: all 0.3s ease;
    overflow: hidden; /* Ensure no overflow of images */
    background: radial-gradient(#302d26, #070706);
}
.hide-button img, .show-button img {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%); /* Ensure the image is centered */

    max-width: 100%; /* Keep the image within button bounds */
    max-height: 100%; /* Keep the image within button bounds */
    transition: transform 0.3s ease; /* Smooth scaling on hover */
    opacity: 1; /* Ensure img opacity is visible */

}

.show-button{
    display: none;
}


.hide-button{
    display: block;
}


.hide-button:hover, .show-button:hover {
    border-color: skyblue;
    color: skyblue;
      transform: scale(1);
}

.hide-button:active, .show-button:active {
    border-color: black;
    color: black;
    transform: scale(1);
}

.show-button {
    background: radial-gradient(#302d26, #070706);
}

.show-button:hover {
    background: radial-gradient(#3398CC, #32332c);

}

.show-button:active {
    background: radial-gradient(#eefffd , #59c9ec );
}

.hide-button:hover {
    background: radial-gradient(#3398CC, #32332c);
}

.hide-button:active {
    background: radial-gradient(#eefffd , #59c9ec );
}

.hide-button:hover img{content:  url("/static/images/showhide/hide_hover.png") ;width:auto; }
.hide-button:active img{content:  url("/static/images/showhide/hide_active.png");width:auto ; }
.show-button:hover img{content:  url("/static/images/showhide/show_hover.png"); width:auto; }
.show-button:active img{content:  url("/static/images/showhide/show_active.png");width:auto;}