/*   CREATE NEW GAME STYLES  */

.datgamCreateForm {
    width: 500px;
    max-width: 500px;
    margin: 25px 0;
    border-radius: 8px;
    padding: 25px 25px 60px; 
    text-shadow: var(--textshadowlyt);
    transition: text-shadow 0.5s;
} 
.datgamCreateForm h1 {
    margin: 15px 0 30px;
} 

.datgamType,
.datgamCatSet  {
    display: flex;
    align-items: center;
}
.datgamCatSet  {
    margin: 0 0 40px 0;
}

label.gamecatLabel,
.datgamType h4 {
    min-width: 240px;
    display: inline-block;
    font-weight: 900;
}
label.gamecatLabel h4 {
    margin: 0;
}

/* Radio buttons styling  */

:root {
    --radio-border-color: #737B9999;
    --radio-checked-color: #FF6600;
    --radio-hover-color: #ffe0cc;
    --radio-disabled-bg-color: #FFFFFF;
}

.gamTypeRadios{
    min-width: calc(100% - 240px);
}
.gamTypeRadios div {
    margin: 8px 0;
}
.gamTypeRadios input[type="radio"] {
    box-sizing: border-box;
    width: 20px;
    height: 20px;
    margin: 6px 12px -4px 6px;
    padding: 0;
    border: 2px solid var(--radio-border-color);
    border-radius: 50%;
    appearance: none;
    background-color: transparent;
    outline: none;
    transition: outline 0.5s; 
    box-shadow: inset 2px 2px 5px #737B99, inset -2px -2px 6px #FFF;
}
.gamTypeRadios input[type="radio"]:not(:disabled):checked {
    border-color: var(--radio-checked-color);
    background-color: var(--radio-checked-color);
    background-clip: content-box;
    padding: 2px;
    box-shadow: none;
    background-image: radial-gradient(
        circle,
        var(--radio-checked-color) 0%,
        var(--radio-checked-color) 50%,
        transparent 60%,
        transparent 100%
    );
}
.gamTypeRadios input[type="radio"]:disabled {
    background-color: var(--radio-disabled-bg-color);
}
.gamTypeRadios input[type="radio"]:disabled:checked {
    background-image: radial-gradient(
        circle,
        var(--radio-border-color) 0%,
        var(--radio-border-color) 50%,
        transparent 50%,
        transparent 100%
    );
}
@media (hover: hover) {
    .gamTypeRadios input[type="radio"]:not(:disabled):hover {
        background-color: var(--radio-hover-color);
        outline: 6px solid var(--radio-hover-color);
        transform: scale(1.05);
    }
}
.gamTypeRadios input[type="radio"]:focus-visible {
    background-color: var(--radio-hover-color);
    outline: 6px solid var(--radio-hover-color);
    transform: scale(1.05);
}
@media (prefers-reduced-motion: reduce) {
    input[type="radio"] {
        transition: none;
    }

    input[type="radio"]:focus-visible {
        transform: scale(1);
    }
}

@media (prefers-reduced-motion: reduce) and (hover: hover) {
    input[type="radio"]:not(:disabled):hover {
        transform: scale(1);
    }
}
/*  END Radio Buttons Styling */



.datgamCatSet select#gameCats {
    min-width: calc(100% - 245px);
    -webkit-appearance: button;
    -moz-appearance: button;
    -webkit-user-select: none;
    -moz-user-select: none;
    -webkit-padding-end: 20px;
    -moz-padding-end: 20px;
    -webkit-padding-start: 2px;
    -moz-padding-start: 2px;
    background-color: #E5E5E5;  
    border: none;
    border-radius: 8px;
    box-shadow: -2px -2px 3px #FFF, 2px 2px 3px #7379BB99;
    color: #7379BB;
    font-size: inherit;
    margin: 0 3px 0 0;
    overflow: hidden;
    padding: 2px 5px 4px;
    text-overflow: ellipsis;
    white-space: nowrap;
}


.datgamType fieldset{
    border: none;
    margin: 0;
    padding: 0;
}


.gameDeets {
    height: max-content;
}

.gameDeets fieldset {
    border: none;
    margin: 40px 0 0;
    padding: 0;
}

.gameDeetSet {
    margin: 0;
}

.gameDeets h4 {
    margin: 0 0 20px;
    font-weight: 900;
}

.ratingDeets input,
.ratingDeets textarea {
    min-width: calc(100% - 15px);
    display: inline-block;
    height: 29px;
    margin: 10px 0 0 2px;
    border-radius: 10px;
    background: #E5E5E5;
    border: none;
    box-shadow: inset 2px 2px 5px #737B99, inset -2px -2px 6px #FFF;
    color: #737B99;
    font-size: 0.9em;
    font-weight: 600;
    font-family: Inter,Helvetica,Arial,sans-serif,system-ui;
    padding: 0 0 0 10px;
}
.ratingDeets textarea {
    min-width: calc(100% - 25px); 
    padding: 10px; 
    height: 60px;
    min-height: 60px;
    max-height: 180px; 
}
.ratingDeets input[type=file],
.rankingDeets input[type=file] {
    border-radius: 0;
    background: none;
    box-shadow: none;
    height: 40px;
    color: #797B99;
}


.rankingDeets label {
    min-width: 160px;
    display: inline-block;
}
.rankingDeets input {
    min-width: calc(100% - 180px);
    display: inline-block;
    height: 29px;
    border-radius: 10px;
    background: #E5E5E5;
    border: none;
    box-shadow: inset 2px 2px 5px #737B99, inset -2px -2px 6px #FFF;
    color: #333;
    font-size: 0.9em;
    padding: 0 0 0 10px;
}

.datgamInput {
    margin: 16px 0;
}
.gameDeetSet label {
    font-weight: 600;
}



.expiryGroup {
    display: flex;
    align-items: center;
    height: 40px;
}
.ratingDeets .expiryGroup input[type=checkbox],
.rankingDeets .expiryGroup input[type=checkbox] { 
    /* Add if not using autoprefixer */
    -webkit-appearance: none;
    appearance: none;
    /* For iOS < 15 to remove gradient background */
    background-color: #fff;
    margin: 0 0 0 10px;
    padding: 0;
    background: none;
    box-shadow: none;
    min-width: auto;
    display: flex;
    position: relative;
    cursor: pointer;
    align-items: center;
    width: 20px;
    height: 20px;
}
.ratingDeets .expiryGroup input[type=checkbox]:before,
.rankingDeets .expiryGroup input[type=checkbox]:before {
    content: "";
    display: block;
    position: absolute;
    width: 16px;
    height: 16px;
    top: 0;
    left: 0;
    border: 1px solid #737B99;
    border-radius: 3px;
    background-color: #F5F5F5;
}
.ratingDeets .expiryGroup input[type=checkbox]:checked:after,
.rankingDeets .expiryGroup input[type=checkbox]:checked:after {
    content: "";
    display: block;
    width: 5px;
    height: 10px;
    border: solid #FF6600;
    border-width: 0 3px 3px 0;
    -webkit-transform: rotate(45deg);
    -ms-transform: rotate(45deg);
    transform: rotate(45deg);
    position: absolute;
    top: 2px;
    left: 6px;
}

.expiryNo,
.expirySelector {
    width: 50%;
    display: flex;
    align-items: center;
}

.expiryNo {
}
.ratingDeets .expirySelector input,
.rankingDeets .expirySelector input {
    min-width: calc(100% - 20px);
    margin: 5px 0;
    padding: 0 10px 0 10px;
    color-scheme: auto;
}
.datgamExpiry p {
    margin: 0;
    text-align: center;
}




.datgamratItem {
    margin: 15px 0;
    border-radius: 14px;
    padding: 4px 20px;
    box-shadow: -2px -2px 7px #FFF, 2px 2px 5px 0px #737B9977;
    width: auto; 
}

#addItemSet,
#submitSet,
#finalSubmitSet {
    border: none;
    margin: 0;
    padding: 0;
}

#addItemSet h4 span {
    font-size: 0.8em;
    font-weight: 400;
}
#addItemSet ol  {
    margin: 0;
    padding: 0;
    list-style: none;
}
#addItemSet li {
    margin: 0;
    padding: 0;
}


.datgamratItem .datgamitmInput {
    margin: 5px 0 12px;
}
.datgamratItem label {
    font-size: 0.8em;
}
.datgamratItem input.gamitmName,
.datgamratItem input.gamitmFileName {
    min-width: calc(100% - 10px);
    height: 28px;
    margin: 4px 0 0;
    border-radius: 9px;
    background: #E5E5E511;
    border: none;
    color: #333;
    font-size: 0.9em;
    padding: 0 0 0 10px;
}


.ratingDeets input[type=file]::file-selector-button,
.rankingDeets input[type=file]::file-selector-button,
.datgamratItem input[type=file]::file-selector-button {
    border-radius: 6px;
    height: 28px;
    margin: 6px 12px 6px 3px;
    padding: 0 15px;
    background: #737B99;
    border: none;
    color: #E5E5E5;
    box-shadow: -2px -2px 7px #FFF, 2px 2px 5px 0px #737B9977;
    cursor: pointer;
}
.ratingDeets input[type=file]::file-selector-button:hover,
.rankingDeets input[type=file]::file-selector-button:hover,
.datgamratItem input[type=file]::file-selector-button:hover {
    background-color: #FF6600;
    color: #FFF;
    border: none; 
}

.fileInput {
    display: flex;
    justify-content: space-between;
    align-items: flex-end;
}

.addGameItem {
    height: 40px;
    display: flex;
    align-items: center;
    justify-content: center;
    margin: 20px 0;
}

button#lastSubmitButn,
button#finalSubmitButn,
button#backToStep2,
.addGameItem button {
    border-radius: 14px;
    height: 28px;
    padding: 0 15px;
    background: #E5E5E5;
    border: none;
    color: #737B99;
    box-shadow: -2px -2px 7px #FFF, 2px 2px 5px 0px #737B9977;
    cursor: pointer;
}
button#finalSubmitButn {
    background: #FE3300;
    color: #FFFFFF;
}
button#lastSubmitButn:hover,
button#backToStep2:hover,
.addGameItem button:hover {
    background: #FF6600;
    color: #FFFFFF;
    box-shadow: -2px -2px 7px #FFF, 2px 2px 5px 0px #737B99BB;
}
button#finalSubmitButn:hover {
    background: #007700;
    color: #FFFFFF;
}

.submitArea {
    height: 60px;
    text-align: center;
    margin: 0;
    font-size: 0.8em;
}
.submitArea input {
    border-radius: 12px;
    height: 36px;
    padding: 0 20px;
    margin: 10px 0 0;
    background: #E5E5E5;
    border: none;
    color: #737B99;
    font-weight: 800;
    font-size: 1.1em;
    box-shadow: -2px -2px 7px #FFF, 2px 2px 5px 0px #737B9977;
    cursor: pointer;
}
.submitArea input:hover {
    background: #FF6600;
    color: #FFF;
    box-shadow: -2px -2px 7px #FFF, 2px 2px 5px 0px #737B99BB;
}

.gameDeets input:focus-visible,
.gameDeets textarea:focus-visible,
.datgamCatSet select#gameCats:focus-visible,
.newgameItem input:focus-visible {
    outline: 1px solid #FF6600;
}
.newgameImg img {
    border-radius: 10px;
}

.newgameItem.newgameItem-enter {
    opacity: 0.2;
    transform: scale(0.75); 
}
.newgameItem {
    opacity: 1;
    transform: scale(1);
    transition: opacity 0.65s, transform 0.65s;
}
.newgameItem.newgameItem-exit {
    opacity: 0.1;
    transform: scale(0.75);
    transition: opacity 1.65s, transform 1.65s;
}

#newgameItemsSuxs {
    margin: 0 0 0 -2px;
    padding: 0;
    list-style: none;
    counter-reset: item-counter;
}
#newgameItemsSuxs li { 
    counter-increment: item-counter;
    display: flex;
    align-items: center;
}
#newgameItemsSuxs li:before {
    content: counter(item-counter) "";
    width: 20px;
    height: 20px;
    color: var(--text-color);
    background-color: var(--sortitembg);
    border: none;
    box-shadow: var(--shadup);
    font-size: 12pt;
    font-weight: 800;
    text-align: center;
    padding: 10px;
    margin: 0 15px 0 0;
    border-radius: 20px;
    transition: box-shadow 0.5s, background-color 0.5s, color 0.5s;
}
.newgameItemSuxs {
    display: flex;
    margin: 15px 0;
    border-radius: 8px;
    padding: 9px 7px 5px 9px; 
    width: 100%; 
}
.itemImgSuxs {
    margin: 0 15px 0 0;
}
.itemImgSuxs img {
    border-radius: 5px;
}
.itemTagSuxs {
    width: 100%;
    display: flex;
    flex-direction: column;
}
.itemTag {
    font-weight: 600;
    word-break: break-word;
} 
.itemAdmin {
    margin-top: auto;
    margin-right: 4px;
    margin-bottom: 3px;
    text-align: right;
    font-size: 0.7em;
}
.newgameImg {
    display:flex;
}
.gameAdmin {
    font-size: 0.7em;
    margin-top: auto;
    margin-left: auto;
}


.newgamesep {
    margin: 25px 0;
    border: 0;
    height: 0;
    border-top: 1px solid #737b99;
    border-bottom: 2px solid #FFFFFF;
}

.loading-spinner { 
    text-align: center;
    width: 100%; 
    height: auto; 
}