.personalised-section {
    margin-left: auto;
    margin-right: auto;
    max-width: 100%;
    width: 1250px;
    margin-top: 25px;
    font-family: 'Hamlin';
    padding-left: 10px;
    padding-right: 10px;
    padding-bottom:50px;
}

.personalised-tabs{
    display:flex;
    border-bottom: 2px solid var(--dark-green);
}

.personalised-section h2 {
    font-family: HamlinBold;
}

.personalised-tab {
    padding: 10px 20px;
    width: 170px;
    text-align: center;
    cursor: pointer;
    background: var(--dark-green);
    color: white;
    font-family: HamlinBold;
    opacity: 0.8;
    font-size: 1.2em;
}

    .personalised-tab:hover {
        opacity: 1;
    }

.tab-selected {
    opacity: 1;
}

.personalised-tab{
    padding: 5px 10px;
}

p{
    margin-bottom:0px;
}

.personalised-link-container {
    display: flex;
    gap: 10px;
    align-items:center;
}

.personalised-link-input {
    border: 1px solid var(--dark-green);
    color: var(--dark-green);
    padding: 2px 5px !important;
    border-radius: 2px;
    width: 250px;
    max-width: 50%;
    height: fit-content;
}

.personalised-save {
    background: var(--dark-green);
    border: none;
    padding: 3px 15px;
    border-radius: 5px;
    color: white;
    opacity: 0.8;
    margin-top: 20px;
    transition: 0.3s;
}

.personalised-settings-row{
    display:flex;
    max-width: 100%;
}

    .personalised-settings-row label {
        width: 250px;
        max-width: 50%;
    }

.personalised-save:hover {
    opacity: 1;
}

.personalised-settings-container {
    padding: 25px 15px;
    background: var(--banner-green);
    width: 100%;
    border-radius: 5px;
    border-top-left-radius: 0px;
    display: flex;
    flex-direction: column;
    gap: 20px;
    padding-bottom: 0px;
}

.personalised-status-row {
    display: flex;
    flex-direction:column;
    gap: 20px;
}

.Unlimited{
    background: var(--green-blue) !important;
}

.Limited {
    background: var(--light-background-square) !important;
}

.personalised-status {
    display: flex;
    gap: 5px;
    align-items: center;
    margin-top: 10px;
}

    .status {
        background: var(--subtle-red);
        padding: 3px 7px;
        border-radius: 5px;
        color: white !important;
    }

    .status-processing {
        background: var(--purple) !important;
    }
    .personalised-status span {
        color: var(--blue-green);
    }

.personalised-status a {
    text-decoration: none;
    background: var(--dark-blue);
    color: white;
    padding: 3px 15px;
    border-radius: 5px;
}

.personalised-container {
    display: flex;
    margin-top: 25px;
    gap: 50px;
    max-height: 370px;
    overflow: hidden;
    padding: 25px;
}

.my-puzzles-button {
    margin-top: auto;
    margin-bottom: auto;
    border-radius: 15px;
    overflow:hidden;
    color: white !important;
    font-family: 'Hamlin';
    text-decoration: none;
    display: flex;
    flex-direction: column;
    justify-content: center;
    gap: 15px;
    align-items: center;
    width: 250px;
    padding-bottom: 25px;
    transition: 0.3s ease-out;
}

.personalised-separator {
    width: 100%;
    height: 1px;
    background: var(--bs-gray-400);
    margin-top:50px;
    margin-bottom:50px;
}

.popular-players-container {
    display: flex;
    flex-wrap: wrap;
    gap: 50px;
    max-height: 385px;
    overflow: hidden;
    padding: 20px;
}

.my-puzzles-button:hover, .my-puzzle:hover {
    transform: scale(1.02);
}

.my-puzzle {
    transition: 0.3s ease-out;
    border-radius: 15px;
    overflow: hidden;
    font-family: 'Hamlin';
}


.puzzle-button-image {
    width:100%;
    border-radius: 0px;
}

.more-button {
    margin-top: 50px;
    margin-left: auto;
    margin-right: auto;
    display: block;
    width: fit-content;
    text-decoration: none;
    color: var(--bs-gray-800) !important;
    background: none;
    border-radius: 5px;
    padding: 5px 20px;
    font-family: HamlinBold;
    font-size: 1.2em;
    border: 1px solid var(--bs-gray-800);
    transition: 0.2s;
}

.more-button:hover {
    transform: scale(1.05);
}

.puzzle-button-text {
    width: 75%;
    text-align: center;
}

.popular-section {
    width: 100%;
    background: var(--bs-gray-200);
    margin-top: 50px;
    padding: 25px;
}

.off-white-back {
    background:#FEFBF4;
}

.puzzle-type-span {
    font-family: 'HamlinBold';
    background: var(--dark-blue);
    padding: 2px 5px;
    color: white;
    border-radius: 2px;
    font-size: 0.8em;
}

.puzzle-tags {
    display: flex;
    flex-wrap: wrap;
    gap: 5px;
    margin-bottom: 5px;
}

.search-options{
    width:100%;
    display:flex;
    flex-wrap:wrap;
    gap:25px;
    font-family: Hamlin;
    justify-content:center;
    padding: 20px;
    background: rgba(0,0,0,0.075);
}

.puzzle-options-container{
    margin-top:25px;
}

.filter-select {
    width: 125px;
    text-align: right;
    margin-left: 5px;
    border-radius: 8px;
}

.personalised-search {
    background: var(--dark-green);
    border: none;
    padding: 3px 15px;
    border-radius: 5px;
    color: white;
    opacity: 0.8;
    transition: 0.3s;
}

.popular-info {
    font-size: 1.2em;
    font-family: 'Hamlin';
    color: white;
    text-align: center;
}

.popular-header-image {
    margin-left: auto;
    display: block;
    margin-right: auto;
    width: 200px;
    border-radius: 15px;
    margin-bottom: 15px;
}

.personalised-search:hover{
    opacity:1;
}

.puzzle-type-Checkmate {
    background-color: #edb974!important;
}

.puzzle-preview-container {
    display: flex;
    gap: 50px;
    width: 100%;
    flex-wrap: wrap;
}

.missed {
    background-color: var(--subtle-red) !important;
}

.correct {
    background-color: var(--subtle-green) !important;
}

.puzzle-control-Blitz {
    background-color: #db7f32 !important;
}

.puzzle-control-Bullet {
    background-color: var(--purple) !important;
}

.puzzle-control-Rapid {
    background-color: var(--dark-brown) !important;
}

.puzzle-control-Daily {
    background-color: var(--dark-green) !important;
}

@media (max-width: 768px) {
    .search-option label {
        width: 130px;
    }

    .filter-select{
        text-align:left;
    }

    .puzzle-type-span{
        font-size:1.2em;
    }
}