/* Definições de cor */
:root {
    --themeColor: #0B409C6f;
}

/* Message containers */
.message-row {
    clear: both;
    margin: 10px;
    width: 100%;
}
/* You message container */
.you{
    float: right;
    border-radius: 28px;
    border-bottom-right-radius: 0;
    background-color: whitesmoke;
    text-align: right;
    padding: 10px;
    margin: 10px;
    overflow: hidden;
    max-width: 100%;
}
/* Him message container */
.him {
    float: left;
    border-radius: 28px;
    border-bottom-left-radius: 0;
    background-color: lightgray;
    text-align: left;
    padding: 10px;
    margin: 10px;
    overflow: hidden;
    max-width: 100%;
}
/* Date message container */
.date {
    float: none;
    border-radius: 16px;
    background-color: lightgray;
    text-align: center;
    padding: 10px;
    margin: 10px;
    overflow: hidden;
    max-width: 100%;
}
.pending {
    opacity: 0.5;
}
.unsent {
    border: solid 2px red;
}
.unsent:after {
    content: "";
    background-image: url("/assets/get/?i=noInternet&p=%230B409C&s=%23FFE867");
    background-size: cover;
    display: inline-block;
    width: 40px;
    height: 40px;
}
.retry {
    border: solid 2px var(--primaryColor);
}
.retry:after {
    content: "";
    background-image: url("/assets/get/?i=Atualizar&p=%230B409C&s=%23FFE867");
    background-size: cover;
    display: inline-block;
    width: 40px;
    height: 40px;
}
/* GIF do Tenor container */
img[alt="GIF do Tenor"] {
    max-width: 200px;
    max-height: 100%;
}
/* Preview container */
img.preview {
    max-width: 20px;
    max-height: 20%;
    float: none;
    margin-right: 0px;
}
/* Online img container */
img.online {
    border: solid 2px green;
    border-radius: 16px;
    transition-duration: 0.2s;
}
/* Online span container */
span.online {
    color: green;
    font-size: 12px;
}
/* Online span container */
span.offline {
    color: gray;
    font-size: 12px;
}
@media (prefers-color-scheme: dark) {
    body {
        background-color: black;
        color: white;
    }
    input, select {
        background-color: black;
        color: white;
    }
    button, input[type="submit"], input[type="image"] {
        background-color: black;
    }
    code {
        background-color: darkgray;
    }
    a {
        color: white;
    }
    a:link {
        color: white;
    }
    a:visited {
        color: white;
    }
    .title {
        background-color: black;
    }
    .box div {
        background-color: black;
    }
    .popup div {
        background-color: black;
    }
    #notificationList .container {
        background-color: black;
    }
    .you {
        background-color: gray;
    }
    .him {
        background-color: darkgray;
    }
    .date {
        background-color: gray;
    }
}