.modal_overlay {
    display: none;
    position: fixed;
    inset: 0;
    background: rgba(0, 0, 0, .7);
    backdrop-filter: blur(5px);
    z-index: 99999;
    justify-content: center;
    align-items: center;
}

.modal_overlay.active {
    display: flex;
}

body.modal-open {
    overflow: hidden;
}

.modal_top {
    width:100%;
    display: flex;
    justify-content: end;
    position:relative;
    z-index:9999;
    margin-bottom:-30px;
}

.modal_close {
    width:fit-content;
    padding:2px;
    box-sizing: border-box;
    border-radius: 6px;
    background:transparent;
    display: flex;
    align-items: center;
    justify-content: center;
    transition:all .1s;
    cursor: pointer;
}

.modal_close svg {
    width:30px;
    height:30px;
    color:rgba(255, 255, 255, .7);
    transition:all .1s;
    cursor:pointer;
}

.modal_close:hover {
    background:rgba(255, 255, 255, .1);
}

.modal_close:hover svg {
    color:#ffffff;
}

.modal_add_content {
    width: 600px;
    max-height:700px;
    max-width: 90%;
    padding: 20px;
    box-sizing: border-box;
    background: #0F0F14;
    border-radius: 20px;
    overflow-y: auto;
}

.modal_add_content2 {
    width: 600px;
    max-height:700px;
    max-width: 90%;
    padding: 30px;
    box-sizing: border-box;
    background: var(--dark1);
    border-radius: 20px;
    overflow-y: auto;
}

.modal_overlay.active .modal_add_content {
    animation: modalSlideInTop 0.25s ease-out forwards;
}

.modal_overlay.closing .modal_add_content {
    animation: modalSlideOutTop 0.25s ease-in forwards;
}

.modal_overlay.active .modal_add_content2 {
    animation: modalSlideInTop 0.25s ease-out forwards;
}

.modal_overlay.closing .modal_add_content2 {
    animation: modalSlideOutTop 0.25s ease-in forwards;
}

@keyframes modalSlideInTop {
    from {
        opacity: 0;
        transform: translateY(-40px);
    }

    to {
        opacity: 1;
        transform: translateY(0);
    }
}

@keyframes modalSlideOutTop {
    from {
        opacity: 1;
        transform: translateY(0);
    }

    to {
        opacity: 0;
        transform: translateY(-40px);
    }
}

.modal_add_content a {
    color:inherit;
    text-decoration: underline;
}

.modal_add_content a:hover {
    color:var(--blue);
}

.modal_add_content2 a {
    color:inherit;
    text-decoration: underline;
}

.modal_add_content2 a:hover {
    color:var(--blue);
}

.modal-smallhead {
    width:100%;
    font-size:15px;
    font-weight: 500;
    margin-bottom:5px;
}
.modal-smallhead2 {
    width:100%;
    font-size:13px;
    font-weight: 500;
    margin-bottom:5px;
    margin-top:5px;
}

.modal-text {
    width:100%;
    font-size:12px;
    font-weight: 500;
}

.modal-hl {
    width:100%;
    height:1px;
    background:rgba(255, 255, 255, .1);
    margin-top:20px;
    margin-bottom:20px;
}

.modal_add-popup-page {
    width:100%;
    display: flex;
    flex-direction: column;
}

.modal_add-popup-top {
    width:100%;
    display: flex;
    justify-content: center;
    margin-top:30px;
}

.modal_add-popup-top img {
    width:120px;
    height:120px;
}

.modal_add-popup-head1 {
    width:100%;
    display: flex;
    justify-content: center;
    font-size:18px;
    font-weight: 600;
}

.modal_add-popup-head2 {
    width:100%;
    display: flex;
    justify-content: center;
    font-size:12px;
    font-weight: 700;
    margin-bottom:-5px;
    color:var(--gold);
    text-transform: uppercase;
    letter-spacing: 3px;
    margin-top:10px;
    font-family: 'Montserrat',sans-serif;
}

.modal_add-popup-image {
    width:100%;
    display: flex;
    align-items: center;
    justify-content: center;
    margin-bottom:-30px;
    user-select: none;
    -webkit-user-drag: none;
}

.modal_add-popup-image img {
    width:150px;
    height:150px;
    user-select: none;
    -webkit-user-drag: none;
}

.modal_add-popup-headsmall {
    width:fit-content;
    display: flex;
    justify-content: center;
    margin:0 auto;
    font-size:22px;
    font-weight: 500;
    color:rgba(255, 255, 255, 1);
    margin-bottom:15px;
}

.modal_add-popup-text {
    width:100%;
    display: flex;
    justify-content: center;
    font-size:14px;
    font-weight: 500;
    color:rgba(255, 255, 255, .7);
    margin-bottom:20px;
}

.modal_add-popup-serverinfobox {
    width:90%;
    margin:0 auto;
    margin-top:20px;
}

.modal_add-popup-servername {
    width: 100%;
    font-size: 20px;
    font-weight: 700;
    margin-bottom: 8px;
    text-align: center;
    overflow: hidden;
    white-space: nowrap;
    text-overflow: ellipsis;
}

.modal_add-popup-serverinfo {
    width:100%;
    display: flex;
    align-items: center;
    justify-content: center;
    gap:20px;
}

.modal_add-popup-serverinfoitem {
    display: flex;
    align-items: center;
    justify-content: center;
    font-size:13px;
    font-weight: 600;
    letter-spacing: 1px;
    color:rgba(255, 255, 255, .6);
}

.modal_add-providedrow-head {
    width:100%;
    font-size:13px;
    color:rgba(255, 255, 255, .7);
    text-align: center;
    margin-bottom:4px;
}

.modal_add-providedrow {
    width:fit-content;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size:12px;
    font-weight: 500;
    color:rgba(255, 255, 255, .7);
    background:rgba(0, 0, 0, .3);
    padding:10px 20px;
    box-sizing: border-box;
    border-radius: 10px;
    margin:0 auto;
    margin-bottom:40px;
    gap:40px;
}

.modal_add-providedrow-item {
    display: flex;
    width:fit-content;
}

.modal_add-wronglink {
    width:100%;
    font-size:13px;
    font-weight: 400;
    transition:all .1s;
    text-align: center;
}

.modal_add-wronglink a {
    color:rgba(255, 255, 255, .7);
    text-decoration: none;
}

.modal_add-wronglink a:hover {
    color:var(--blue);
}

.modal_add_bottombtnrow {
    width:100%;
    display: flex;
    flex-direction: column;
    margin-top:50px;
}

.modal_add-notfoundtop {
    width:100%;
    display: flex;
    align-items:center ;
    justify-content: center;
    user-select: none;
    -webkit-user-drag: none!important;
    margin-bottom:-10px;
}

.modal_add-notfoundtop img {
    width:150px;
    height:150px;
    user-select: none;
    -webkit-user-drag: none!important;
}

.modal_add-notfoundhead {
    width:fit-content;
    font-size:25px;
    font-weight: 500;
    text-align: center;
    color:#ff7070;
    margin:0 auto;
}

.modal_add-notfoundtext1 {
    width:fit-content;
    margin:0 auto;
    font-size:12px;
    font-weight:800;
    color: rgba(255, 255, 255, .7);
    text-transform: uppercase;
    letter-spacing: 4px;
    word-spacing: 7px;
    font-family: 'Sora',sans-serif;
    margin-top:10px;
}

.modal_add-addedtop {
    width:100%;
    display: flex;
    align-items:center ;
    justify-content: center;
    user-select: none;
    -webkit-user-drag: none!important;
    margin-bottom:10px;
}

.modal_add-addedtop img {
    width:120px;
    height:120px;
    user-select: none;
    -webkit-user-drag: none!important;
}

.modal_add-addedhead {
    width:fit-content;
    font-size:30px;
    font-weight: 700;
    text-align: center;
    color:var(--gold);
    margin:0 auto;
}

.modal_add-addedtext1 {
    width:fit-content;
    margin:0 auto;
    font-size:12px;
    font-weight:600;
    color: var(--blue);
    text-transform: uppercase;
    letter-spacing: 4px;
    word-spacing: 1px;
    font-family: 'Sora',sans-serif;
    margin-top:8px;
}

.modal_add-addedservername {
    width:90%;
    text-align: center;
    font-size:18px;
    font-weight:600;
    margin:0 auto;
    margin-top:10px;
    overflow: hidden;
    white-space: nowrap;
    text-overflow: ellipsis;
}

.modal_add-addedinfotext {
    width:fit-content;
    margin:0 auto;
    margin-top:20px;
    font-size:14px;
    font-weight: 400;
    display: flex;
    flex-direction: column;
    align-items: center;
    color:rgba(255, 255, 255, .4);
    letter-spacing: .5px;
}

.modal_add-addedinfotext svg {
    width:50px;
    height:50px;
    color:rgba(255, 255, 255, .6);
}