/*
    * Author: Tim Plate
    * Project: Advanced Roleplay Environment
    * Copyright (c) 2022 Tim Plate Solutions
*/

@import url('https://fonts.googleapis.com/css2?family=Inconsolata:wght@200;300;400;500;600;700;800;900&display=swap');
@import url('https://fonts.googleapis.com/css2?family=Oxanium:wght@200;300;400;500;600;700;800;900&display=swap');

body {
    font-family: "Oxanium";
    user-select: none;
}

.debugContainer {
    position: absolute;

    width           : 10vw;
    height          : auto;
    background-color: rgba(15, 14, 22, 0.562);
    border-radius   : 7px;

    right: 10px;
    top  : 10px;

    font-family: 'Inconsolata';
}

.debugValue {
    font-size    : 13px;
    width        : 100%;
    height       : 20px;
    line-height  : 20px;
    margin-bottom: 10px;
}

.debugValue .key {
    position  : absolute;
    text-align: right;
    left      : 20px;
    color     : white;
    display   : inline-block;
}

.debugValue .value {
    position  : absolute;
    text-align: left;
    right     : 20px;
    color     : #ffa800;
    display   : inline-block;
}

.debugSection {
    position     : relative;
    left         : 50%;
    transform    : translateX(-50%);
    overflow     : hidden;
    text-align   : center;
    width        : 90%;
    margin-top   : 10px;
    margin-bottom: 10px;
    font-size    : 12px;
    color        : white;
}

.debugSection:before,
.debugSection:after {
    background-color: #ffa800;
    content         : "";
    display         : inline-block;
    height          : 1px;
    position        : relative;
    vertical-align  : middle;
    margin-right    : 5px;
    margin-left     : 5px;
    width           : 50%;
}

.debugSection:before {
    right      : 0.5em;
    margin-left: -50%;
}

.debugSection:after {
    left        : 0.5em;
    margin-right: -50%;
}

.unconsciousScreen,
.anesthesiaScreen {
    position  : absolute;
    top       : 0;
    left      : 0;
    width     : 100%;
    height    : 100%;
    background: rgba(0, 0, 0, 1);
    animation : unconsciousEffect 5s alternate infinite;
    display   : none;
}

.unconsciousScreen .text_header,
.anesthesiaScreen .text_header {
    position   : absolute;
    top        : 50%;
    left       : 50%;
    transform  : translate(-50%, -50%);
    font-size  : 50px;
    opacity    : 0.8;
    font-weight: 600;
    color      : white;
}

.un_actions {
    position   : absolute;
    top        : 73%;
    left       : 50%;
    transform  : translate(-50%, -50%);
    font-size  : 20px;
    height     : 300px;
    opacity    : 0.8;
    font-weight: 600;
    color      : white;
}

.contact_medic_box {
    position  : relative;
    left      : 50%;
    transform : translate(-50%, -50%);
    min-width : 500px;
    width     : auto;
    height    : 50px;
    text-align: center;
    display   : none;
}

.contact_medic_key {
    position        : relative;
    top             : 50%;
    left            : 2%;
    transform       : translateY(-50%);
    display         : inline-block;
    background-color: rgb(22, 22, 22);
    width           : 25px;
    height          : 25px;
    text-align      : center;
    line-height     : 25px;
    color           : #ffa800;
    border-radius   : 4px;
    font-weight     : 600;
}

.contact_medic_text {
    position     : relative;
    top          : 47%;
    color        : white;
    padding-left : 20px;
    padding-right: 20px;
    transform    : translateY(-50%);
    display      : inline-block;
}

.manual_respawn_box {
    position  : relative;
    left      : 50%;
    transform : translate(-50%, -50%);
    min-width : 500px;
    width     : auto;
    height    : 50px;
    text-align: center;
    display   : none;
}

.manual_respawn_key {
    position        : relative;
    top             : 50%;
    left            : 2%;
    transform       : translateY(-50%);
    display         : inline-block;
    background-color: rgb(22, 22, 22);
    width           : 25px;
    height          : 25px;
    text-align      : center;
    line-height     : 25px;
    color           : #ffa800;
    border-radius   : 4px;
    font-weight     : 600;
}

.manual_respawn_text {
    position     : relative;
    top          : 47%;
    color        : white;
    padding-left : 20px;
    padding-right: 20px;
    transform    : translateY(-50%);
    display      : inline-block;
}

.remaining_time {
    position : absolute;
    top      : 54%;
    left     : 50%;
    transform: translate(-50%, -50%);
    color    : white;
    opacity  : 0.4;
    font-size: 20px;
}

.progressbar {
    position        : absolute;
    bottom          : 0%;
    width           : 100%;
    height          : 5px;
    background-color: #ffa800;
    transition      : all 0.2s ease-in-out;
}

@keyframes unconsciousEffect {
    25% {
        background: rgba(0, 0, 0, 1);
    }

    50% {
        background: rgba(0, 0, 0, 0.9);
    }

    75% {
        background: rgba(0, 0, 0, 1);
    }
}

.nearbyPlayersContainer {
    background-color: rgba(11, 11, 11, 0.85);
    width           : 500px;
    height          : 550px;

    position: absolute;
    left    : 0;
    right   : 0;
    top     : 0;
    bottom  : 0;
    margin  : auto;

    max-width    : 100%;
    max-height   : 100%;
    overflow     : hidden;
    border-radius: 9px;

    z-index: 999999999;

    display: none;
}

.nearbyPlayersContainer>.containerClose {
    color     : white;
    text-align: center;
    font-size : 14px;
    position  : absolute;
    top       : 10px;
    right     : 15px;
}

.nearbyPlayersContainer>.containerClose:hover {
    color : #ffa800;
    cursor: pointer;
}

.nearbyPlayersContainer>.containerTitle {
    color     : white;
    text-align: center;
    font-size : 24px;
    position  : relative;
    top       : 20px;
}

.nearbyPlayersContainer>.nearbyPlayers {
    position: relative;
    width   : 90%;
    height  : 80%;
    top     : 30px;
    left    : 0;
    right   : 0;
    bottom  : 0;
    margin  : auto;
}

.nearbyPlayersContainer>.nearbyPlayers>.nearbyPlayer {
    background-color: rgba(11, 11, 11, 0.7);
    color           : #fff;
    padding         : 5px;
    text-align      : center;
    font-size       : 14px;
    margin-bottom   : 5px;
    border-radius   : 5px;
}

.nearbyPlayersContainer>.nearbyPlayers>.nearbyPlayer:hover {
    color : #ffa800;
    cursor: pointer;
}

.menuContainer {
    background-color: rgba(11, 11, 11, 0.85);
    width           : 1200px;
    height          : 750px;

    position: absolute;
    left    : 0;
    right   : 0;
    top     : 0;
    bottom  : 0;
    margin  : auto;

    max-width    : 100%;
    max-height   : 100%;
    overflow     : hidden;
    border-radius: 9px;

    display: none;
}

.menuTitle {
    height: 30px;

    line-height: 30px;

    padding-left    : 15px;
    font-weight     : 400;
    font-size       : 20px;
    background-color: #ffa800;
    color           : #fff;
    text-align      : center;
}

.menuTitle .closeButton {
    position   : absolute;
    top        : 1px;
    text-align : right;
    font-size  : 15px;
    right      : 15px;
    opacity    : 0.5;
    font-weight: 600;
}

.menuTitle .playersButton {
    position   : absolute;
    top        : 1px;
    text-align : right;
    font-size  : 15px;
    right      : 40px;
    opacity    : 0.5;
    font-weight: 600;
}

.menuTitle .closeButton:hover,
.menuTitle .playersButton:hover {
    opacity: 1.0;
    cursor : pointer;
}

.menuTitle .loadingIndicator {
    position: absolute;
    left    : 15px;
    top     : 0px;
    display : none;
}

.menuTitle .loadingIndicator span {
    position   : relative;
    left       : 3px;
    bottom     : 1px;
    font-size  : 12px;
    opacity    : 0.4;
    font-weight: 400;
}

.menuTitle .loadingIndicator i {
    font-size: 15px;
    opacity  : 0.4;
}

.menuContent .actionCategory {
    width : 28%;
    height: 35px;

    padding      : 5px;
    border-radius: 7px;

    letter-spacing  : 8px;
    background-color: rgba(11, 11, 11, 0.5);
    text-align      : center;
}

.menuContent .actionCategory i {
    color      : #fff;
    opacity    : 0.3;
    font-size  : 26px;
    line-height: 35px;
}

.menuContent .actionCategory i.disabled {
    opacity: 0.1;
}

.menuContent .actionCategory i:not(.disabled):hover {
    opacity: 1.0;
    cursor : pointer;
}

.menuContent .actionCategory i:not(.disabled).active {
    opacity: 1.0;
    color  : #ffa800;
}

.menuContent .actionButtons {
    display         : block;
    margin-top      : 20px;
    background-color: rgba(11, 11, 11, 0.5);
    width           : 28%;
    border-radius   : 7px;
    padding         : 5px;
    height          : 420px;
    overflow        : auto;
}

.menuContent .actionButtons .actionButton {
    background-color: rgba(11, 11, 11, 0.7);
    color           : #fff;
    padding         : 5px;
    text-align      : center;
    font-size       : 14px;
    margin-bottom   : 5px;
    border-radius   : 5px;
}

.menuContent .actionButtons .actionButton.disabled {
    color: rgba(255, 255, 255, 0.4);
}

.menuContent .actionButtons .actionButton:not(.disabled):hover {
    color : #ffa800;
    cursor: pointer;
}

.menuContent .humanBody {
    background-image: url(assets/images/body_background.png);
    width           : 512px;
    height          : 512px;
}

.menuContent .humanBody .bodyPart {
    position: absolute;
}

.menuContent .humanBody .bodyPart:hover {
    cursor: pointer;
}

.menuContent .triageSelection {
    position: absolute;
    left    : 67.5%;
    top     : 5.5%;
    width   : 365px;
    height  : 40px;

    display: none;
}

.menuContent .triageSelection select {
    position        : absolute;
    background-color: rgba(11, 11, 11, 0.5);
    color           : white;
    border          : 0;
    outline         : none;
    height          : 100%;
    width           : 100%;
    border-radius   : 7px;
    font-family     : "Oxanium";
    font-weight     : 600;
    font-size       : 14px;

    padding-left: 10px;
    border-right: 10px solid transparent;
}

.menuContent .triageSelection select[data-value="none"] {
    background-color: rgba(11, 11, 11, 0.5);
}

.menuContent .triageSelection select[data-value="green"] {
    background-color: rgba(0, 255, 0, 0.4);
}

.menuContent .triageSelection select[data-value="yellow"] {
    background-color: rgba(255, 255, 0, 0.4);
}

.menuContent .triageSelection select[data-value="red"] {
    background-color: rgba(255, 0, 0, 0.4);
}

.menuContent .triageSelection select[data-value="black"] {
    background-color: rgba(0, 0, 0, 0.4);
}

select:active>option:checked,
option:hover,
option:active {
    background: #000 !important;
}

.menuContent .menuInjuries {
    position: absolute;
    right   : 0;
    top     : 9.2%;

    margin-right: 25px;

    margin-top      : 20px;
    background-color: rgba(11, 11, 11, 0.5);
    width           : 28%;
    border-radius   : 7px;
    padding         : 15px;
    height          : 420px;
    color           : #fff;
    display         : block;
}

.menuContent .menuInjuries .bodyInjuries {
    position: absolute;
    top     : 30px;

    list-style-type    : none;
    list-style-position: inside;
    padding-left       : 0;
    font-size          : 14px;
}

.menuContent .menuInjuries .bodyInjuries li {
    margin-bottom: 5px;
}

.menuContent .menuInjuries .bodyPartTitle {
    position: absolute;
    top     : 10px;

    font-size  : 16px;
    font-weight: 500;
}

.left {
    position   : relative;
    left       : 0;
    margin-top : 15px;
    margin-left: 25px;
}

.center {
    position         : absolute;
    left             : 50%;
    top              : 50%;
    -webkit-transform: translate(-50%, -65%);
    transform        : translate(-50%, -65%);
}

.bottom {
    position   : relative;
    bottom     : -1%;
    left       : 2%;
    user-select: none;
}

.activityLog {
    width           : 96%;
    height          : 175px;
    overflow        : auto;
    margin-right    : 15px;
    background-color: rgba(11, 11, 11, 0.5);
    border-radius   : 7px;
    user-select     : none;
}

.bottom .logTitle {
    color           : white;
    position        : absolute;
    width           : 96%;
    height          : 30px;
    line-height     : 30px;
    z-index         : 9999;
    text-align      : center;
    background-color: rgba(11, 11, 11, 0.5);
    border-radius   : 7px 7px 0px 0px;
}

.activityLog ul {
    position           : relative;
    padding-left       : 0;
    margin             : 0;
    top                : 35px;
    list-style-type    : none;
    list-style-position: inside;
    user-select        : none;
    user-select        : none;
}

.activityLog li {
    position        : relative;
    width           : 100%;
    left            : 50%;
    transform       : translateX(-50.8%);
    line-height     : 33px;
    height          : 30px;
    margin-bottom   : 10px;
    background-color: rgba(11, 11, 11, 0.5);
    color           : white;
    border-radius   : 4px;
    user-select     : none;
}

.activityLog li:hover>.content {
    color: #ffa800;
}

.activityLog li .content {
    position   : absolute;
    left       : 10px;
    top        : 0;
    font-weight: 400;
    font-size  : 14px;
}

.activityLog li .time {
    position : absolute;
    right    : 10px;
    opacity  : 0.4;
    top      : 0;
    font-size: 14px;
}

::-webkit-scrollbar {
    width     : 0;
    background: transparent;
}

#logCopy {
    position: absolute;
    right   : 5%;
    z-index : 99999;
    top     : 6px;
    color   : white;
    opacity : 0.4;
}

#logCopy:hover {
    opacity: 1;
    cursor : pointer;
}

.ecg {
    display: none;

    position : absolute;
    top      : 10px;
    left     : 50%;
    transform: translateX(-50%);

    width : 600px;
    height: 154px;
}

.ecg .ecg-display {
    position: absolute;
    width : 600px;
    height: 154px;
}

.ecg .bpm {
    position   : absolute;
    bottom     : 8px;
    right       : 100px;
    color      : white;
    font-family: 'Oxanium';
    font-size: 12px;
    opacity: 0.6;
}

.ecg .mute {
    position   : absolute;
    bottom     : 8px;
    left      : 10px;
    font-size: 12px;
    opacity: 0.6;
    z-index: 99999999;
}

.ecg .mute:hover i {
    color      : #ffa800;
}

.ecg .pressure {
    position   : absolute;
    bottom     : 8px;
    right      : 10px;
    color      : white;
    font-family: 'Oxanium';
    font-size: 12px;
    opacity: 0.6;
}