.content{
    
}
.container{
    display: flex;
    flex-direction: column;
    align-items: center;
    /* justify-content: center; */
    background: url(../assets/img/champRepresentBg.jpg);
    background-size: cover;
    min-height: 770px;
    position: relative;
    &::after{
        content: "";
        position: absolute;
        top: 0;
        right: 0;
        bottom: 0;
        left: 0;
        background-color: #0a0a0c;
        background-image: -webkit-linear-gradient(top,#0a0a0c,rgba(0,0,0,0),#0a0a0c);
        background-image: linear-gradient(180deg,#0a0a0c,rgba(0,0,0,0),#0a0a0c);
        background-color: rgba(0,0,0,0);
    }
}
.storeWrapper{
    margin-top: 20px;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    /* border: 1px solid #ffffffff; */
    width: 60%;
    min-width: 865px;
    position: relative;
    z-index: 1000;
    & select{
        /* text-align: center; */
        outline: none;
        border: none;
        border: 1px solid #937341;
        border-radius: 8px;
        background-color: transparent;
        padding: 5px;
        margin: 10px;
        font-size: 16px;
        font-weight: 700;
        color: #c09c62;
        cursor: pointer;
        & option{
            background-color: #0a0a0c;
            color: #c09c62;
        }

    }
    & .title{
        display: block;
        text-align: center;

        font-weight: 500;
        font-size: 104px;
        letter-spacing: .2em;
        padding-top: 20px;
        color: rgb(103, 71, 31);

        background: -webkit-linear-gradient(90deg, rgb(103, 71, 31), rgb(203, 172, 98)) ;
        -webkit-background-clip: text;
        -webkit-text-fill-color: transparent;
        text-transform: uppercase;
    }
    & .tableWrapper{
        width: 100%;
        & table{
            border-collapse: collapse;
            width: 100%;
            background-color: #111318af;
            backdrop-filter: blur(2px);
            
            overflow: hidden;
            
            & th, td {
            border: 1px solid #31271e;
            color: #c4b998;
                padding: 8px;
                width: 150px;
                
                &:nth-child(1){
                    width: 50px;
                    text-align: center;
                }
            }
            & .checkBox{
                
                /* width: 50px; */
                /* text-align: center; */
                .checkbox-wrapper-12 {
                    position: relative;
                    display: flex;
                    align-items: center;
                    justify-content: center;
                    gap: 10px;
                    
                    /* margin-right: 20px; */
                  }
                  
                  .checkbox-wrapper-12 > svg {
                    position: absolute;
                    top: -130%;
                    left: -170%;
                    width: 110px;
                    pointer-events: none;
                    
                  }
                  
                  .checkbox-wrapper-12 * {
                    box-sizing: border-box;
                  }
                  
                  .checkbox-wrapper-12 input[type="checkbox"] {
                    -webkit-appearance: none;
                    -moz-appearance: none;
                    appearance: none;
                    -webkit-tap-highlight-color: transparent;
                    cursor: pointer;
                    margin: 0;
                  }
                  
                  .checkbox-wrapper-12 input[type="checkbox"]:focus {
                    outline: 0;
                  }
                  
                  .checkbox-wrapper-12 .cbx {
                    width: 24px;
                    height: 24px;
                    position: relative;
                    /* top: calc(100px - 12px);
                    left: calc(100px - 12px); */
                  }
                  
                  .checkbox-wrapper-12 .cbx input {
                    position: absolute;
                    top: 0;
                    left: 0;
                    width: 24px;
                    height: 24px;
                    border: 2px solid #bfbfc04b;
                    border-radius: 30%;
                  }
                  
                  .checkbox-wrapper-12 .cbx label {
                    width: 24px;
                    height: 24px;
                    background: none;
                    border-radius: 30%;
                    position: absolute;
                    top: 0;
                    left: 0;
                    transform: trasnlate3d(0, 0, 0);
                    pointer-events: none;
                  }
                  
                  .checkbox-wrapper-12 .cbx svg {
                    position: absolute;
                    top: 5px;
                    left: 4px;
                    z-index: 1;
                    pointer-events: none;
                  }
                  
                  .checkbox-wrapper-12 .cbx svg path {
                    stroke: #fff;
                    stroke-width: 3;
                    stroke-linecap: round;
                    stroke-linejoin: round;
                    stroke-dasharray: 19;
                    stroke-dashoffset: 19;
                    transition: stroke-dashoffset 0.3s ease;
                    transition-delay: 0.2s;
                  }
                  
                  .checkbox-wrapper-12 .cbx input:checked + label {
                    animation: splash-12 0.6s ease forwards;
                  }
                  
                  .checkbox-wrapper-12 .cbx input:checked + label + svg path {
                    stroke-dashoffset: 0;
                  }
            }
        }
    }
}


@-moz-keyframes splash-12 {
40% {
    background: #c09c62;
    box-shadow: 0 -18px 0 -8px #c09c62, 16px -8px 0 -8px #c09c62, 16px 8px 0 -8px #c09c62, 0 18px 0 -8px #c09c62, -16px 8px 0 -8px #c09c62, -16px -8px 0 -8px #c09c62;
}

100% {
    background: #c09c62;
    box-shadow: 0 -36px 0 -10px transparent, 32px -16px 0 -10px transparent, 32px 16px 0 -10px transparent, 0 36px 0 -10px transparent, -32px 16px 0 -10px transparent, -32px -16px 0 -10px transparent;
}
}

@-webkit-keyframes splash-12 {
40% {
    background: #c09c62;
    box-shadow: 0 -18px 0 -8px #c09c62, 16px -8px 0 -8px #c09c62, 16px 8px 0 -8px #c09c62, 0 18px 0 -8px #c09c62, -16px 8px 0 -8px #c09c62, -16px -8px 0 -8px #c09c62;
}

100% {
    background: #c09c62;
    box-shadow: 0 -36px 0 -10px transparent, 32px -16px 0 -10px transparent, 32px 16px 0 -10px transparent, 0 36px 0 -10px transparent, -32px 16px 0 -10px transparent, -32px -16px 0 -10px transparent;
}
}

@-o-keyframes splash-12 {
40% {
    background: #c09c62;
    box-shadow: 0 -18px 0 -8px #c09c62, 16px -8px 0 -8px #c09c62, 16px 8px 0 -8px #c09c62, 0 18px 0 -8px #c09c62, -16px 8px 0 -8px #c09c62, -16px -8px 0 -8px #c09c62;
}

100% {
    background: #c09c62;
    box-shadow: 0 -36px 0 -10px transparent, 32px -16px 0 -10px transparent, 32px 16px 0 -10px transparent, 0 36px 0 -10px transparent, -32px 16px 0 -10px transparent, -32px -16px 0 -10px transparent;
}
}

@keyframes splash-12 {
40% {
    background: #c09c62;
    box-shadow: 0 -18px 0 -8px #c09c62, 16px -8px 0 -8px #c09c62, 16px 8px 0 -8px #c09c62, 0 18px 0 -8px #c09c62, -16px 8px 0 -8px #c09c62, -16px -8px 0 -8px #c09c62;
}

100% {
    background: #c09c62;
    box-shadow: 0 -36px 0 -10px transparent, 32px -16px 0 -10px transparent, 32px 16px 0 -10px transparent, 0 36px 0 -10px transparent, -32px 16px 0 -10px transparent, -32px -16px 0 -10px transparent;
}
}