/* Mod 98.css */

.title-bar-text {
    display: flex;
}

/* END */

.icon {
    background: url('https://www.torn.com/images/v2/items/dark_mode/item_icons_n.svg') left top no-repeat;
    background-repeat: no-repeat;
    display: inline-block;
    --icon-size: 1.25em;
    
    width: var(--icon-size);
    height: var(--icon-size);
    background-size: calc(3em + 4px) auto;

    &.icon-flowers {
        background-position: -2px -347px;
    }

    &::after{
        content: ''
    }
}


body {
    background-color: #008080;
    padding: 0;
    margin: 0;

    &.modal-is-open { overflow:hidden }
}

.needlogin {
    position: absolute;
    background: #008080;
    top: 0;
    bottom: 0;
    left: 0;
    right: 0;
    display: none;
    justify-content: center;
    align-items: center;
    z-index: 5;

    &.pop {
        display: flex;
    }
}

.profile-button {
    box-shadow: 0px 4px 4px 2px rgba(0,0,0,0.75);
    background-color: black;
    border: 2px solid black;
    border-radius: 4px;
    width: 48px;
    height: 48px;
    cursor: pointer;
    position: fixed;
    right: 4px;
    top: 4px;

    img {
        width: 100%;
        height: 100%;
        border-radius: inherit;
        object-fit: cover;
        object-position: top;
    }

    &:hover {
        border-color: burlywood;
        background-color: burlywood;
    }
}

header {
    margin-top: 80px;
    margin-bottom: 40px;

    h1 {
        font-size: 2.75rem;
        text-align: center;               
    }
}

.window_profile { 
    max-width: 90vw;
    
    .window-body {margin: 0} 
}
#profile {
    padding: 0 3px;
    display: flex;

    .profile-picture {
        width: min(240px, 70%);
        padding: 8px;

        img {
            display: block;
            width: 100%;
            border: 2px solid wheat;
            box-sizing: border-box;
            border-radius: 4px;
        }
    }

    .profile-data {
        padding: 8px;
        width: 100%;
    }
}


#windows {
    display: flex;
    justify-content: center;
    align-items: center;
    flex-direction: column;
    padding: 0 min(10%, 80px);

    .window_inventory {
        min-width: min(480px, 90vw);
    }
}


.modals {
    position: absolute;
    top: 0;
    right: 0;
    left: 0;
    bottom: 0;
    background: rgba(0,0,0, .50);
    display: none;
    justify-content: center;
    align-items: center;

    &.active { display: flex; }
}

.table_inventory {
    border-collapse: collapse;
    position: relative;
    text-align: left;
    white-space: nowrap;
    background-color: #fff;
    color: #222;
    width: 100%;
    border: 4px groove #d5d2c1;
    
    & > thead > tr > * {
        background: silver;
        box-shadow: inset -1px -1px #0a0a0a,inset 1px 1px #fff,inset -2px -2px grey,inset 2px 2px #dfdfdf;
        box-sizing: border-box;
        font-weight: 400;
        height: 17px;
        padding: 0 6px;
        position: sticky;
        top: 0;                            
    }

    & > thead > tr > th:nth-child(1) {
        width: 4.5em;
    }

    & > tbody > tr {
        border-top: 1px solid black;
    }

    & > tbody > tr:nth-child(2n+1) {
        background-color: #b2aca040;
    }

    & td:not(:last-child) {
        border-right: 1px solid #00000075;
    }
}