body {
    margin: 0;
    font-family: Arial, Helvetica, sans-serif;
    background-color: #13161e;
    color: white;
}


header {
    position: inherit;
    background-color: #1d2333;
    color: white;
    overflow: hidden;
    padding: 0 10px;
    height: 56px;
    display: flex;
    align-items: center;
    justify-content: space-between;
}

.logo {
    height: 100%;
    display: flex;
    align-items: center;
}

.logo img {
    height: 100%;
}

.logo font {
    font-size: 36px;
}

nav {
    height: 100%;
    gap: 15px;
    display: flex;
    align-items: center;
}

.btn-primary {
    background-color: #14AF8A;
    color: black;
    text-decoration: none;
    border: none;
    cursor: pointer;
}

.btn-primary:hover {
    background-color: #14AF8A;
}

.btn-primary:focus {
    background-color: #14AF8A;
}

.btn-primary:active {
    background-color: #14AF8A;
}

.btn-primary:disabled {
    box-shadow: #00000080 0px 0px 0px 1em inset;
    background-color: #14AF8A;
    cursor: not-allowed;
}

.btn-secondary {
    background-color: rgba(0, 0, 0, 0);
    color: #14AF8A;
    border: #14AF8A 1px solid;
    text-decoration: none;
    cursor: pointer;
}

.btn-secondary:hover {
    background-color: #14AF8A;
    color: black;
}

.btn-secondary:focus {
    background-color: #14AF8A;
    color: white;
}

.btn-secondary:active {
    background-color: #14AF8A;
    color: white;
}

.btn-secondary:disabled {
    background-color: unset;
    color: #14AF8A;
    border-color: #1d2333;
    cursor: not-allowed;
}

.btn-tertiary {
    background-color: rgba(0, 0, 0, 0);
    color: #14AF8A;
    border: none;
    text-decoration: underline;
    cursor: pointer;
}

.btn-tertiary:hover {
    background-color: #1d2333;
    color: white;
}

.btn-tertiary:focus {
    background-color: #1d2333;
    color: white;
}

.btn-tertiary:active {
    background-color: #14AF8A;
    color: white;
}

.btn-tertiary:disabled {
    background-color: unset;
    color: #14AF8A;
    cursor: not-allowed;
}

button {
    display: flex;
    align-items: center;
    gap: 5px;
    padding: 5px 15px;
    border-radius: 7px;
    font-size: 20px;
}

button.mobile {
    padding: 5px 10px;
}

button svg {
    margin-right: 0;
    margin-left: 0;
    height: 25px;
}

.userthumb {
    height: 80%;
    display: flex;
    align-items: center;
    justify-content: center;
    background-color: white;
    border-radius: 50%;
}

.rightsidebar {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: space-between;
    position: fixed;
    top: 66px;
    right: 10px;
    width: calc(300px - 20px);
    bottom: 30px;
    padding: 10px;
    background-color: #1d2333;
    overflow: hidden;
    border-radius: 10px;
}

.leftsidebar {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: space-between;
    position: fixed;
    top: 66px;
    left: 10px;
    width: calc(100px - 20px);
    bottom: 30px;
    padding: 10px;
    background-color: #1d2333;
    overflow: hidden;
    border-radius: 10px;
}

.leftsidebar .item {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    width: 80px;
    color: white;
    text-decoration: none;
    font-weight: bold;
}

.widthcontainer {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 10px;
    width: 100%;
}

.heightcontainer {
    display: flex;
    flex-direction: row;
    align-items: center;
    gap: 10px;
    height: 100%;
}

.chatbox {
    height: 45px;
    width: inherit;
    background-color: #171b27;
    border: none;
    border-radius: 5px;
}

#chatcontainer {
    display: flex;
    justify-content: flex-end;
    color: #171b27;
    overflow: hidden;
    position: absolute;
    top: 65px;
    bottom: 65px;
}

.chatline {
    width: calc(100% - 20px);
    flex: 0 0 auto;
    display: flex;
    gap: 10px;
    overflow: hidden;
    position: relative;
}

.chatline .userthumb {
    height: 40px;
}

.chatline .name {
    font-weight: bold;
    word-wrap: break-word;
    font-size: 18px;
}

.chatline .msg {
    width: calc(100% - 20px);
    word-wrap: break-word;
    font-size: 14px;
}

.chatline .name.server {
    display: flex;
    align-items: center;
    color: #ff0000;
}

.chatline .name.server:after {
    width: 20px;
    height: 20px;
    display: inline-block;
    content: "";
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' xmlns:xlink='http://www.w3.org/1999/xlink' aria-hidden='true' role='img' id='footer-sample-full' width='20' height='20' preserveAspectRatio='xMidYMid meet' viewBox='0 0 24 24' class='iconify iconify--bxs'%3E%3Cpath fill='%23ff0000' d='m2.344 15.271l2 3.46a1 1 0 0 0 1.366.365l1.396-.806c.58.457 1.221.832 1.895 1.112V21a1 1 0 0 0 1 1h4a1 1 0 0 0 1-1v-1.598a8.094 8.094 0 0 0 1.895-1.112l1.396.806c.477.275 1.091.11 1.366-.365l2-3.46a1.004 1.004 0 0 0-.365-1.366l-1.372-.793a7.683 7.683 0 0 0-.002-2.224l1.372-.793c.476-.275.641-.89.365-1.366l-2-3.46a1 1 0 0 0-1.366-.365l-1.396.806A8.034 8.034 0 0 0 15 4.598V3a1 1 0 0 0-1-1h-4a1 1 0 0 0-1 1v1.598A8.094 8.094 0 0 0 7.105 5.71L5.71 4.904a.999.999 0 0 0-1.366.365l-2 3.46a1.004 1.004 0 0 0 .365 1.366l1.372.793a7.683 7.683 0 0 0 0 2.224l-1.372.793c-.476.275-.641.89-.365 1.366zM12 8c2.206 0 4 1.794 4 4s-1.794 4-4 4s-4-1.794-4-4s1.794-4 4-4z'%3E%3C/path%3E%3C/svg%3E");
    background-repeat: no-repeat;
    background-position: center;
}

.chatline .name.mod {
    display: flex;
    align-items: center;
    color: #ffc000;
}

.chatline .name.mod:after {
    width: 20px;
    height: 20px;
    display: inline-block;
    content: "";
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' xmlns:xlink='http://www.w3.org/1999/xlink' aria-hidden='true' role='img' id='footer-sample-full' width='20' height='20' preserveAspectRatio='xMidYMid meet' viewBox='0 0 16 16' class='iconify iconify--bi'%3E%3Cpath fill='%23ffc000' fill-rule='evenodd' d='M8 14.933a.615.615 0 0 0 .1-.025c.076-.023.174-.061.294-.118c.24-.113.547-.29.893-.533a10.726 10.726 0 0 0 2.287-2.233c1.527-1.997 2.807-5.031 2.253-9.188a.48.48 0 0 0-.328-.39c-.651-.213-1.75-.56-2.837-.855C9.552 1.29 8.531 1.067 8 1.067v13.866zM5.072.56C6.157.265 7.31 0 8 0s1.843.265 2.928.56c1.11.3 2.229.655 2.887.87a1.54 1.54 0 0 1 1.044 1.262c.596 4.477-.787 7.795-2.465 9.99a11.775 11.775 0 0 1-2.517 2.453a7.159 7.159 0 0 1-1.048.625c-.28.132-.581.24-.829.24s-.548-.108-.829-.24a7.158 7.158 0 0 1-1.048-.625a11.777 11.777 0 0 1-2.517-2.453C1.928 10.487.545 7.169 1.141 2.692A1.54 1.54 0 0 1 2.185 1.43A62.456 62.456 0 0 1 5.072.56z'%3E%3C/path%3E%3C/svg%3E");
    background-repeat: no-repeat;
    background-position: center;
}

.chatline .name.owner {
    display: flex;
    align-items: center;
    color: #00ff00;
}

.chatline .name.owner:after {
    width: 20px;
    height: 20px;
    display: inline-block;
    content: "";
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' xmlns:xlink='http://www.w3.org/1999/xlink' aria-hidden='true' role='img' id='footer-sample-full' width='20' height='20' preserveAspectRatio='xMidYMid meet' viewBox='0 0 64 64' class='iconify iconify--emojione-monotone'%3E%3Cpath fill='%2300ff00' d='M61.287 53.542c-2.649-2.041-9.702-7.678-16.271-14.452c-4.366-4.505-6.223-9.015-9.533-12.429c-2.998-3.092-5.725-4.894-5.725-4.894l-.768.792l-5.188-5.35l2.004-2.067a.912.912 0 0 0 0-1.262l-.414-.427c.002-.002 5.898-7.936 13.353-5.742c.866.257 1.638.694 1.857.471c.298-.306-.837-1.482-1.502-2.162c-9.431-9.65-19.834 1.104-19.839 1.109l-.367-.379a.846.846 0 0 0-1.222 0l-9.239 9.528a.912.912 0 0 0 0 1.262s1.131 1.979-1.835 2.335c-1.194.145-1.942.414-2.366.769a431.18 431.18 0 0 0-1.979 2.009a.912.912 0 0 0 0 1.262l6.914 7.132a.847.847 0 0 0 1.223 0s1.906-1.99 1.947-2.042c.343-.438.605-1.208.743-2.44c.348-3.06 2.264-1.892 2.264-1.892a.846.846 0 0 0 1.224 0l2.004-2.067l5.186 5.349l-.768.793s1.748 2.813 4.746 5.905c3.309 3.413 7.683 5.328 12.05 9.833c6.567 6.774 12.032 14.047 14.014 16.78c.748 1.029.867.934 1.78-.009l2.849-2.938l2.847-2.937c.915-.946 1.009-1.068.011-1.84'%3E%3C/path%3E%3Cpath fill='%2300ff00' d='M34.008 22.689a53.27 53.27 0 0 1 2.497 2.408c1.592 1.642 2.924 3.479 4.259 5.44l8.942-8.943A9.938 9.938 0 0 0 61.72 9.584L53.604 17.7l-5.76-1.543l-1.544-5.763l8.114-8.111a9.92 9.92 0 0 0-9.381 2.63a9.932 9.932 0 0 0-2.631 9.38l-8.394 8.396m-7.519 12.74a53.723 53.723 0 0 1-2.479-2.743l-9.717 9.718a9.926 9.926 0 0 0-9.381 2.629c-3.883 3.88-3.882 10.174 0 14.055a9.934 9.934 0 0 0 14.054 0a9.939 9.939 0 0 0 2.631-9.384l10.004-10.003c-1.84-1.338-3.567-2.679-5.112-4.272M13.483 57.821l-5.761-1.544l-1.543-5.762l4.218-4.215l5.76 1.541l1.543 5.763l-4.217 4.217'%3E%3C/path%3E%3C/svg%3E");
    background-repeat: no-repeat;
    background-position: center;
}

.clickable {
    cursor: pointer;
}

.clickable:hover {
    box-shadow: #0b7b9d80 0 0 0 1em inset;
}

.clickable:focus {
    box-shadow: #0b7b9d80 0 0 0 1em inset;
}

.clickable:active {
    box-shadow: #0b8cA3 0 0 0 1em inset;
}

.hidden {
    display: none !important;
}

.blur {
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    z-index: 100;
    background: rgba(25, 25, 26, 0.75);
    backdrop-filter: blur(2px);
}

.popup {
    position: fixed;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    display: flex;
    flex-direction: column;
    gap: 10px;
    z-index: 101;
    width: 48em;
    max-width: 90%;
    max-height: calc(90% - 2.5em);
    overflow-y: auto;
    padding: 1.25em 0;
    border: none;
    border-radius: 0.5em;
    background: #1d2333;
    color: white;
    align-items: center;
    font-family: inherit;
    font-size: 1rem;
}

.popup * {
    flex: 0 0 auto;
}

.main {
    overflow-y: auto;
    position: fixed;
    display: flex;
    top: 66px;
    bottom: 30px;
    left: 120px;
    right: 320px;
    border-radius: 5px;
    padding: 10px;
}

.section {
    width: calc(50% - 1em);
    display: flex;
    flex-direction: column;
    gap: 10px;
    padding: 0.5em;
    border-radius: 5px;
}

.row {
    width: calc(100% - 1em);
    display: flex;
    flex-direction: row;
    justify-content: space-around;
    flex-wrap: wrap;
    align-items: center;
    gap: 10px;
    padding: 0.5em;
    border-radius: 5px;
    background-color: #1d2333;
}

h2 {
    display: flex;
    align-items: center;
    gap: 10px;
    font-size: 1.5rem;
    font-weight: bold;
    margin: 0;
}

/* Scroll Bar */
/* width */
::-webkit-scrollbar {
    border-radius: 0.5em;
    width: 7px;
}

/* Handle */
::-webkit-scrollbar-thumb {
    border-radius: 0.5em;
    background: #ffffff40;
}

/* Handle on hover */
::-webkit-scrollbar-thumb:hover {
    background: #ffffff20;
}

@media only screen and (min-width: 1081px) {
    .mobile-only {
        display: none !important;
    }
}

@media only screen and (max-width: 1080px) {
    .rightsidebar {
        width: auto;
        left: 120px;
    }

    .section {
        width: calc(100% - 1em);
    }

    .desktop-only {
        display: none !important;
    }

    .main {
        width: calc(100% - 20px);
        padding: 10px;
        position: unset;
        flex-direction: column;
    }
}