* {
    user-select: none;
}

body, html {
    margin: 0;
    padding: 0;
    height: 100svh;
    box-sizing: border-box;
    background-color: #000000;
}

.hidden-soft {
    border: 0;
    height: 0;
    margin: 0;
    padding: 0;
    overflow: hidden;
    width: 0;
}

.container-fluid {
    margin-right: auto;
    margin-left: auto;
    padding-left: 0;
    padding-right: 0;
}

.centfont {
    -webkit-user-select: text; /* Safari/Chrome */
    -moz-user-select: text;    /* Firefox */
    -ms-user-select: text;     /* IE10+ */
    user-select: text;         /* Standard */
}

span.centfont {
    cursor: text;
}

.divider {
    position: absolute;
    top: calc(50svh - 28px);
    left: 50%;
    transform: translateX(-50%);
    cursor: ns-resize;
}
.divider img {
    width: 70px; /* Adjust size as needed */
    height: 30px;
    cursor: ns-resize;
    pointer-events: none;
    user-select: none;
}

.canvas {
    height: 50svh;
    width: 100%;
    background-color: #000000; /* Example background color for canvas */
    overflow: auto;
    margin-left: auto;
    margin-right: auto;
    text-align: center;
}

#myCanvas {
    transition: transform 0.1s ease-out; /* Maakt het zoomen vloeiend */
    transform-origin: center center;    /* Zoomt vanuit het midden */
}

.canvas::-webkit-scrollbar {
    width: 12px; /* Set the width of the scrollbar */
}

.canvas::-webkit-scrollbar-track {
    background: #33333300; /* Set the color of the scrollbar track */
}

.canvas::-webkit-scrollbar-thumb {
    background: rgb(98, 179, 197); /* Set the color of the scrollbar thumb */
    border-radius: 10px; /* Set the border radius of the thumb */
}

.canvas::-webkit-scrollbar-thumb:hover {
    background: rgb(190, 232, 241); /* Set the color of the scrollbar thumb on hover */
}

#backgroundColorPicker {
    margin-top: 60px;
    cursor: pointer;
}

.inventory {
    height: 50svh;
    width: calc(100%); /* Example background color for inventory*/
    display: flex;
    overflow: hidden;
}

.inventory-pages{
    height: calc(100%);
    width: 50px;
    flex-direction: column;
}

.inventory-items {
    height: calc(100%);
    width: calc(100% - 100px);
    flex:1;
    flex-direction: column;
    background-color: rgb(48, 91, 117);
    border: 5px solid rgb(190, 232, 241); /* Add a white border */
    border-top-right-radius: 10px; /* Optional: Add border radius for rounded corners */
    border-bottom-right-radius: 10px;
    box-shadow: #000 2px 2px,#000 2px 2px inset;
    overflow: hidden;
}

.search-bar {
    padding: 10px;
    height: 32px;
    width: calc(100%); /* Adjust width as needed */
}

.search-bar img {
    width: 24px; /* Adjust width of the image as needed */
    height: auto; /* Maintain aspect ratio */
    margin-right: 10px; /* Add some spacing between the image and the input */
}

.search-bar input {
    font-size: 14px;
    background-color: rgb(62, 118, 152);
    flex-grow: 1;
    height: 32px; /* Maintain aspect ratio */
    width: calc(80% - 50px);
    box-shadow: #000 2px 2px,#000 2px 2px inset;
    
    color: white;
    font-family: CenturyGothicBold;
    padding-left: 4px;
    
    border: 5px solid rgb(190, 232, 241); /* Add a white border */
    border-radius: 10px; /* Optional: Add border radius for rounded corners */
}

.search-bar input::placeholder {
    color: white; /* Set placeholder text color */
    font-size: 14px; /* Set font size for placeholder text */
    font-family: CenturyGothicBold;
}

.search-bar select {
    font-size: 14px;
    background-color: rgb(62, 118, 152);
    flex-grow: 1;
    height: 32px; /* Maintain aspect ratio */
    width: calc(20%);
    box-shadow: #000 2px 2px,#000 2px 2px inset;
    
    color: white;
    font-family: CenturyGothicBold;
    padding-left: 4px;
    
    border: 5px solid rgb(190, 232, 241); /* Add a white border */
    border-radius: 10px; /* Optional: Add border radius for rounded corners */
}

.search-bar option {
    font-size: 14px;
    background-color: rgb(62, 118, 152);
    flex-grow: 1;
    height: 32px; /* Maintain aspect ratio */
    width: calc(20%);
    
    color: white;
    font-family: CenturyGothicBold;
    padding-left: 4px;
    
    border: 5px solid rgb(190, 232, 241); /* Add a white border */
    border-radius: 10px; /* Optional: Add border radius for rounded corners */
}

.equipped-content {
    display: flex;
    margin-top: 12px;
    margin-left: 5px;
    margin-right:5px;
    flex-wrap: wrap; /* Allow items to wrap to the next line */
    justify-content: flex-start; /* Align items starting from the left */
}

.inventory-content {
    display: flex;
    width: calc(100% - 10px);
    /*height: calc(100% - 44px);*/
    /*flex-grow: 1;*/
    margin-left: 5px;
    margin-right:5px;
    flex-wrap: wrap; /* Allow items to wrap to the next line */
    justify-content: flex-start; /* Align items starting from the left */
    overflow-y: scroll;
    max-height: calc(100% - 44px); /* Adjust as needed to prevent overflow */
}

.itemsequipped {
    height: calc(100% - 44px - 65px); /* Expand to fill the remaining space */
}

.inventory-content::-webkit-scrollbar {
    width: 12px; /* Set the width of the scrollbar */
}

.inventory-content::-webkit-scrollbar-track {
    background: #33333300; /* Set the color of the scrollbar track */
}

.inventory-content::-webkit-scrollbar-thumb {
    background: rgb(98, 179, 197); /* Set the color of the scrollbar thumb */
    border-radius: 10px; /* Set the border radius of the thumb */
}

.inventory-content::-webkit-scrollbar-thumb:hover {
    background: rgb(190, 232, 241); /* Set the color of the scrollbar thumb on hover */
}

.item-box {
    width: 55px;
    height: 55px;
    margin: 5px;
    background-color: #3e7698; /* Example background color */
    border: 5px solid rgb(190, 232, 241); /* Example border */
    border-radius: 10px;
    box-shadow: #000 2px 2px,#000 2px 2px inset;
    /* Add more styles as needed */

    display: flex;
    justify-content: center; /* Center the image horizontally */
    align-items: center; /* Center the image vertically */
    cursor: pointer;
}

.orange-border {
    border-color: orange;
}

.item-box:hover {
    border-color: #ffffff; /* Change border color on hover */
    background-color: rgb(87, 128, 154);
    width: 59px;
    height: 59px;
    margin: 3px;
}

.item-image {
    width: 32px;
    height: 32px;
    pointer-events: none;
}

.item-name {
    position: absolute;
    top: -10px; /* Adjust this value to position the text above the item box */
    /*left: 50%; /* Center the text horizontally */
    /*transform: translateX(-25%); /* Center the text horizontally */
    background-color: rgba(0, 0, 0, 0.7); /* Example background color */
    color: white; /* Example text color */
    font-family: CenturyGothicBold;

    padding: 5px; /* Example padding */
    border-radius: 5px; /* Example border radius */
    pointer-events: none; /* Ensure the text doesn't capture mouse events */
    z-index: 1; /* Ensure the text appears above the item box */
}

.zoom-buttons {
    position: absolute;
    top: 10px; /* Adjust vertical position as needed */
    right: 10px; /* Adjust horizontal position as needed */
    z-index: 1; /* Ensure buttons appear above the canvas */
}

.zoom-button {
    font-size: 18px;
    padding: 5px 10px;
    background-color: #fff; /* Button background color */
    border: 1px solid #000; /* Button border */
    cursor: pointer;
}

.zoom-button:hover {
    background-color: #f0f0f0; /* Button background color on hover */
}