/* Import body_settings */
@import "../../../general_settings/body_settings.css";

:root {
    --top-number: 10%;
}

.player {
    padding: 0;
    margin: 0;
}

.graphic-container {
    display: flex;
    justify-content: center;
    align-items: center;
    position: relative;
    border: 1px solid var(--color-primary);
    height: 320px;
    margin-top: 20px;
    overflow-x: hidden;
}

.computer {
    filter: invert(48%) sepia(79%) saturate(2476%) hue-rotate(86deg) brightness(118%) contrast(119%);
    max-width: 20%;
    max-height: 20%;
    position: absolute;
    top: calc(70% - var(--top-number));
    transform: translateY(-50%);
}

#IP-client {
    width: 100%;
    /*max-width: 20%;*/
    max-height: 20%;
    position: absolute;
    top: calc(90% - var(--top-number));
    transform: translateY(-50%);
    right: -15px;
}

#IP-server {
    width: 100%;
    /*max-width: 30%;*/
    max-height: 20%;
    position: absolute;
    top: calc(90% - var(--top-number));
    transform: translateY(-50%);
    left: calc(100% - 140px);
}

#svg-client {
    right: calc(100% - 80px);
}

#svg-server {
    left: calc(100% - 80px);
}

.buttons {
    padding: 0;
    margin: 0;
    border: 1px solid var(--color-primary);
    display: flex;
    justify-content: center;
}

.button {
    padding: 5px 5px 5px 5px;
    margin: 0 10px 0 10px;
    color: var(--color-primary);;
    background-color: rgb(0, 74, 14);
    border: 1px solid var(--color-primary);
    cursor: pointer;
}

.button:hover {
    background-color: rgb(0, 58, 11);
}

.button:disabled {
    background-color: rgb(0, 58, 11);
    pointer-events: none;
}

#line {
    position: absolute;
    top: calc(70% - var(--top-number));
    left: 45px;
    right: 45px;
    height: 2px;
    background-color: #fff;
    transform: translateY(-50%);
}

#textbox {
    text-size-adjust: auto;
    position: absolute;
    top: calc(25% - var(--top-number));
    left: 25px;
    padding: 5px 10px;
    color: var(--color-primary);
    border: 1px solid var(--color-primary);
}

#envelope {
    width: 15px;
    height: 15px;
    filter: invert(48%) sepia(79%) saturate(2476%) hue-rotate(86deg) brightness(118%) contrast(119%);
    position: absolute;
    top: calc(70% - var(--top-number));
    transform: translate(-50%, -50%);
}
@media screen and (max-width: 600px) {
    #svg-client {
        right: calc(100% - 70px);
    }
    
    #svg-server {
        left: calc(100% - 70px);
    }

    #IP-client {
        right: calc(100% - 290px);
    }
    
    #IP-server {
        left: calc(100% - 120px);
    }
}

@media screen and (max-width: 420px) {
    #svg-client {
        right: calc(100% - 70px);
    }
    
    #svg-server {
        left: calc(100% - 70px);
    }

    #IP-client {
        right: -20px;
        font-size: 10px;
    }
    
    #IP-server {
        left: 120px;
        font-size: 10px;
    }
}