body {
    margin:0;
    font-family:sans-serif
}
* {
    background-size:cover
}
#header {
    width:100vw;
    height:7vh;
    background-color:gray;
    align-items:center;
    user-select:none;
    position:fixed;
    z-index:1
}
#header h1 {
    color:white;
    font-weight:initial;
    font-size:large;
    padding:20px
}
#header * {
    display:flex;
    align-items:center;
    cursor:pointer
}
#avatar {
    border:1px solid cyan;
    border-radius:100%;
    background:white;
    width:6vh
}
#user {
    padding:0;
    margin-left:15px;
    color:white;
    height:100%;
    min-width:200px
}
p {
/*     padding-right:20px; */
    padding-left:10px
}
#burger {
    padding:0 10px;
}
#wrapper {
    display:flex;
    padding-top:7vh
}
#menu {
    color:#4a4a4a;
    font-weight:300;
    user-select:none;
    cursor:default;
    min-width:7em;
    transition:all 500ms
}
#menu p:hover{
    color:gray;
    transition:all 200ms
}
#menu p {
    margin:0;
    padding:1em 6.5em 0.5em 1em
}
#r svg:hover {
    animation:ring 1s linear;
}
#r {
    height:inherit;
    display:none
}
@keyframes ring {
    0% { transform: rotate(17deg); }
    10% { transform: rotate(-15deg); }
    20% { transform: rotate(13deg); }
    30% { transform: rotate(-11deg); }
    40% { transform: rotate(9deg); }
    50% { transform: rotate(-7deg); }
    60% { transform: rotate(6deg); }
    70% { transform: rotate(-5deg); }
    80% { transform: rotate(2deg); }
    90% { transform: rotate(-1deg); }
    100% { transform: rotate(0); }
}
.hidden {
    margin-left:-11em
}
#studentsscreen h1 {
    font-weight:normal;
    font-size:6vh;
    line-height:1
}
.flex-between {
    display:flex;
    justify-content:space-between;
    align-items:center;
    gap:3vw;
    /* word-wrap:anywhere; */
    user-select:none
}
#studentsscreen {
    width:100%;
}
.smallspacer {
    margin-right:25px;
    transition:all 500ms;
}
svg.smallspacer {
    cursor:pointer;
    width:4vw
}
.spacer {
    margin-right:7vh
}
#grid {
    grid-template-columns:4fr 5fr 10fr 4fr 6fr 4fr 6fr;
    grid-template-rows:12vh 12vh 12vh 12vh 12vh 12vh;
    height:62vh
}
#grid * {
    border-right:0;
    border-bottom:0;
    margin:auto;
    align-content:center
}
#grid.smallspacer {margin-right:27px !important}
#grid.spacer {margin-right:62px !important}
.box {
    width:100%;
    height:100%;
    border:2px solid;
    font-size:3vh;
    text-align:center;
    min-width:max-content
}
.lastboxr {
    border-right:2px solid !important
}
.lastboxb {
    border-bottom:2px solid !important
}
.square {
    width:6vh;
    height:6vh;
    border:2px solid !important;
    user-select:none;
    cursor:pointer;
    line-height:6vh
}
.false {
    width:6vh;
    height:6vh;
    background:gray;
    border-radius:100%;
    cursor:pointer
}
.true {
    background:green
}
#dashboardscreen {
    background-image:url(cat.webp);
    height:80vh;
    width:80vh
}

#tasksscreen {
    background-image:url(cake.webp);
    height:80vh;
    width:80vh
}
#gray {
    width:100vw;
    height:100vh;
    opacity:0.5;
    background:black;
    position:fixed;
    z-index:1
}
.edit {
    position:absolute;
    width:60vw;
    margin:10vh 20vw;
    height:80vh;
    border-radius:1vh;
    background:white;
    border:3px solid;
    z-index:2
}
.edit .flex-between {
    margin-top:3vh;
    margin-left:2vw;
    width:56vw
}
.hr {
    background:black;
    width:100%;
    height:3px
}
#bukvi {
    font-size:4vh;
    margin:auto;
}
.small {
    width:60% !important;
}
.grid {
    display: grid
}
.input {
    width:-moz-available;
    font-size:2.5vh;
    line-height:1;
    margin-top:-2px;
    background:unset;
    height:1.5em;
    text-transform:capitalize
}
#bukvi p {
    display:flex;
    white-space:nowrap;
    line-height:1;
    gap:10px
}
.downb {
    justify-content:end;
    gap:10px;
    margin-top:0;
    line-height:2
}

.downb div {width:auto}
.dropdown {
    position:fixed;
    border:1px solid black !important;
    background:white;
    width:unset;
    color:black;
    top:7vh;
    display:none!important;
    height:unset;
    width:-moz-available;
    margin-right:4px
}
.dropdown a {
    padding:10px;
    margin:0;
    text-decoration:none
}
a:visited {
    color:black
}
#user:hover .dropdown {
    display:unset!important;
}
#warning {
    height:65vh
}
#warning .hr {
    margin-top:25vh
}
#choose {
    justify-content:center;
    gap:10px;
    line-height:2
}
#reddot {
    background:red;
    position:absolute;
    border-radius:100%;
    margin-left:1vw;
    margin-top:-10px;
    animation:reddot 1s infinite
}
@keyframes reddot {
    0% {width:12px;
        height:12px; }
        50% {
            width:4px;
            height:4px; }

            100% {width:12px;
                height:12px; }
}
.wrong {
    box-shadow: 0px 0px 5px 3px red
}
#err {
    color:brown;
    font-size:3vh;
    position:absolute
}
svg {
    width:2vw
}
#new {
    padding-right:10px;
    cursor:pointer;
    font-size:2vh
}
.chatprofile {
    border-radius:20px;
    width:80%;
    margin-left:10%;
    display:flex;
    background:gray;
    align-items:center;
    user-select:none
}
.chatprofile img, .grid img {
    width:8vh;
    height:8vh;
    margin:0 20px;
    object-fit:cover
}
#messages .box {height:80vh}
#profiles {
    display:flex;
    flex-direction:column;
    gap:1vh;
    overflow-y:auto;
    height:73vh
}
#chatgrid {
    grid-template-columns:3fr 7fr;
    grid-gap:10vw;
    width:97%
}
#chat {
    padding:0 1vw
}
#chat p {
    width:fit-content;
    margin:0
}
#avatars {
    width:fit-content;
    display:flex;
    align-items:center
}
#avatars span {
    background:gray;
    line-height:4vw;
    width:4vw;
    border-radius:100%;
    font-size:4vw;
    cursor:pointer;
    color:white;
    margin-left:20px
}
.message {
    margin:1vh 0;
    min-height:4vw;
    min-width:6vw;
    width:unset;
    max-width:30vw;
    position:relative;
}
.recieved::before {
    content:"";
    border:0 solid transparent;
    border-width:0 75px 50px;
    border-color:transparent transparent gray;
    left:-50px;
    position:absolute;
/*     margin-top:-50px; */
    z-index:-1
}
.sent .message::after {
    content:"";
    border:0 solid transparent;
    border-width:0 75px 50px;
    border-color:transparent transparent mediumpurple;
    right:-50px;
    position:absolute;
/*     margin-top:-50px; */
    z-index:-1
}
.sent {
    width:100%!important;
    justify-content:end
}
.sent .message {
    background:mediumpurple
}
#spacer .flex-between {
    width:fit-content;
    gap:25px
}
.message p {padding-left:35px}
#profiles .chatprofile {
    cursor:pointer;
    padding:20px 0
}
#send {
    height:6vh!important;
    border:3px solid gray;
    border-radius:20px;
    display: none
}
#spacer {
    height:70%;
    overflow-y:auto
}
#send input {
    width:-moz-available;
    margin:3vh;
    padding:1vh
}
#send svg {cursor:pointer}
.cornsilk {
    background:cornsilk;
    margin-left:-1vw!important;
    width:100%!important;
    padding:0 2vw;
    text-align:left;
    padding-left:0
}
span {text-align:center}

#bell:hover .dropdown {
    display:unset!important;
}
#bell .dropdown {
    position:absolute;
    right:0;
    width:unset!important;
    padding:20px
}
.dropdown .grid {display:block!important}
#login {
    position:absolute;
    right:0;
    width:15vw
}
#login input{
    height:inherit;
    width:inherit
}
#login {height:inherit}
#profileSettings input {text-transform:none}
img {border-radius:100%}
.vh7 {height:7vh}
@media (max-aspect-ratio: 14/9) {
    #chatgrid {grid-gap:1vw}
    .flex-between {gap:0}
    .box {font-size:2vw}
    #chat {padding:0}
    .cornsilk {padding:0;margin-left:0!important}
    #chat.box {font-size:3vh !important}
}
@media (max-aspect-ratio: 1) {
    #chatgrid {display:unset}
    #chatgrid .chat {width:70vw}
    #profiles {width:72vw}
    #profiles {height:unset}
    .messages .box {height:unset}
    #chat {margin-top:2vh}
    .message {max-width:55vw}
}
h1 {
    font-size:xxx-large;
    line-height:2vh
}
.chatprofile .flex-between .flex-between {
    min-width:5vw;
    gap:0
}
#spacer {
    padding: 10px;
}

.loading, .empty-chat, .error-message {
    text-align: center;
    padding: 20px;
    color: #666;
}

.message-time {
    font-size: 0.8em;
    color: #999;
    text-align: right;
    margin-top: 5px;
}

.new-message-indicator {
    animation: pulse 1s infinite;
}

@keyframes pulse {
    0% { transform: scale(1); }
    50% { transform: scale(1.2); }
    100% { transform: scale(1); }
}

.attachment img {
    max-width: 200px;
    max-height: 150px;
    border-radius: 8px;
    margin-top: 5px
}

#spacer .grid {
    max-width:6vw;
    overflow:hidden;
    white-space:nowrap;
    font-size:1.5vh
}