#wrenchButton {
    position: absolute;
    top: 10px; /* Adjust the top position as needed */
    left: 65px; /* Adjust the left position as needed */
    z-index: 998; /* Ensure the image is on top of the canvas */
}

.canvasIcon {
    display: inline-block;
    margin: 5px;
    z-index: 998; /* Ensure the image is on top of the canvas */
    cursor: pointer; /* Change cursor to pointer on hover */
    width: 32px; /* Set width to 55px */
    height: 32px; /* Set height to 55px */
}

.canvasButton {
    background-color: rgb(48, 91, 117);
    border: 5px solid rgb(190, 232, 241);
    width: 50px; /* Set width to 55px */
    height: 50px; /* Set height to 55px */
    border-radius: 10px;
    box-shadow: #000 2px 2px,#000 2px 2px inset;
    justify-content: center; /* Center the image horizontally */
    align-items: center; /* Center the image vertically */
    cursor: pointer; /* Change cursor to pointer on hover */
}

.canvasButton:hover {
    border-color: #ffffff; /* Change border color on hover */
    background-color: rgb(87, 128, 154);
}

/* Close Button */
#closeWrench {
    background: #89c3d6;
}

#closeWrench{
    background: #89c3d6;
}

@keyframes wiggle {
    /*0% { transform: rotate(0deg); }*/
    0% { transform: rotate(-15deg); }
    /*50% { transform: rotate(0deg); }*/
    50% { transform: rotate(15deg); }
    100% { transform: rotate(-15deg); }
    /*100% { transform: rotate(0deg); }*/
}

.wiggle {
    animation: wiggle 3s ease-in-out infinite;
}

.wrench-box {
    margin: 5px;
    /* Add more styles as needed */
    display: flex;
    cursor: pointer;
    font-family: CenturyGothicBold;
    font-size: 22px;
}

.wrench-image {
    width: 150px;
    height: auto;
    pointer-events: none;
}

.custom-swift-wrench-card {
    box-sizing: border-box;
    width: 150px;
    height: 98px;
    padding: 5px 6px 6px;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    gap: 1px;
    overflow: hidden;
    color: #fff;
    background: #2db9d5;
    border: 3px solid #fff;
    border-radius: 6px;
    box-shadow: #000 2px 2px;
    text-align: center;
}

.custom-swift-wrench-icon {
    width: 53px;
    height: 53px;
    object-fit: contain;
    image-rendering: pixelated;
    pointer-events: none;
}

.custom-swift-wrench-name {
    max-width: 136px;
    color: #fff;
    font-family: CenturyGothicBold;
    font-size: 13px;
    line-height: 13px;
    text-shadow: #44758c 1px 2px;
    pointer-events: none;
}

.wrench-content{
    display: flex;
    width: 100%;
    flex-wrap: wrap; /* Allow items to wrap to the next line */
    justify-content: flex-start; /* Align items starting from the left */
    overflow-y: auto;
    font-family: CenturyGothicBold;
    font-size: 22px;
}

#cancelModal{
    background: rgb(255,205, 5);
    font-family: CenturyGothicBold;
    font-size: 22px;
}

#updateModal{
    background: #89c3d6;
    font-family: CenturyGothicBold;
    font-size: 22px;
}

#resetModal{
    background: #89c3d6;
    font-family: CenturyGothicBold;
    font-size: 22px;
    margin-right: 150px;
}

#modaloverlay-content {
    max-width: 500px;
}

.modalcolorpicker {
    background-color: #00000000;
    font-family: CenturyGothicBold;
    font-size: 20px;
    color: antiquewhite;
    height: auto;
    margin:0;
}

.modaltoggle {
    background-color: #00000000;
    font-family: CenturyGothicBold;
    font-size: 16px;
    color: antiquewhite;
    margin:0;
    padding: 5px;
}

.centfont {
    font-family: CenturyGothicBold;
    font-size: 20px;
    color: antiquewhite;
    margin:0;
    padding: 0;
}

.rgbbar {
    font-size: 20px;
    background-color: rgb(62, 118, 152);
    flex-grow: 1;
    height: 26px; /* Maintain aspect ratio */
    width: 100px;
    box-shadow: #000 2px 2px,#000 2px 2px inset;
    position: relative;
    justify-content: center;
    align-items: center;
    
    color: white;
    font-family: CenturyGothicBold;
    padding-left: 4px;
    margin-top: 18px;
    margin-left:6px;
    
    border: 4px solid rgb(190, 232, 241); /* Add a white border */
    border-radius: 10px; /* Optional: Add border radius for rounded corners */
    box-sizing: content-box;
}

.rgbcontainer {
    display: flex;
    align-items: center;
    margin:0;
    padding: 0px;
}

.textcontainermodal {
    font-size: 18px;
    background-color: rgb(62, 118, 152);
    flex-grow: 1;
    height: 26px; /* Maintain aspect ratio */
    width: 90%;
    box-shadow: #000 2px 2px,#000 2px 2px inset;
    position: relative;
    justify-content: center;
    align-items: center;
    
    color: white;
    font-family: CenturyGothicBold;
    padding-left: 4px;
    margin-top: 10px;
    margin-left:6px;
    margin-bottom: 10px;
    
    border: 4px solid rgb(190, 232, 241); /* Add a white border */
    border-radius: 10px; /* Optional: Add border radius for rounded corners */
    box-sizing: content-box;
    overflow:visible;
}

.dropdown {
    background-color: rgb(62, 118, 152);       /* Light gray background */
    border: 1px solid rgb(190, 232, 241);          /* Light gray border */
    border-radius: 4px;              /* Rounded corners */
    box-shadow: 0px 4px 8px rgba(0, 0, 0, 0.2); /* Subtle shadow for depth */
    color: white;
    font-family: CenturyGothicBold;
}

/* Style for each item in the dropdown */
.dropdown .dropdown-item {
    display: flex;                   /* Align sprite and text horizontally */
    align-items: center;             /* Center-align sprite and text vertically */
    padding: 2px 2px;
    cursor: pointer;
    font-size: 14px;
    color: #333;
    position: relative;
}

/* Hover effect for dropdown items */
.dropdown .dropdown-item:hover {
    background-color: rgb(87, 128, 154);
}

.dropdown .item-named {
    color: white;
    font-family: CenturyGothicBold;
    padding-left: 4px;
    margin-top: 10px;
    margin-left:6px;
    margin-bottom: 10px;
    font-size: 14px;
    overflow: hidden;
}

.dropdown .item-sprited {
    width: 32px;
    height: 32px;
    background-image: url('assets/sprites.png');  /* Path to the spritesheet */
    background-size: auto;
    margin-right: 8px;              /* Space between sprite and item name */
}

.togglecontainer {
    display: flex;
    align-items: center;
    margin:0;
    padding: 0px;
    z-index: 999;
}

.extogglecontainer {
    display: flex;
    align-items: center;
    margin:0;
    padding: 0px;
    z-index: 999;
}

.rgbbar-text {
    color: white; /* Text color */
    font-weight: bold; /* Make text bold */
    pointer-events: none;
    margin:0;
    padding: 0px;
}

.other-text {
    color: white; /* Text color */
    margin:0;
    width: 100%;
    max-height: 24px;
    display: inline-block;
    padding: 0px;
    cursor: text;
    z-index: 1000;
    background-color: #00000000;
    outline: none; /* Removes the focus outline */
    overflow: hidden;
}