/* This is css porperties that will apply to everything */
* {
    transition: all 0.5s ease-out;
}

.row {
    width:100%;
}

.col {
    height:100%;
}

/*The screen displayed initially when opening the page*/
#loginScreen {
    position:absolute;
    left:0%;
    top:0%;
    width:100%;
    height:100%;
    background-color:rgba(0,0,0,0.9);
    z-index:10;
}

/* The little login box */
#loginInput {
    position:absolute;
    left:50%;
    top:50%;
    background-color:rgb(120,120,120);
    transform: translate(-50%, -50%);
    width:30%;
    padding:20px;
}

/*The little error displayed for login errors */
#loginError {
    color:rgb(98, 14, 14);
    font-size:20px;
}


note {
    font-style:italic;
    font-size:12px;

}

/* Chat box and send message box */
textarea {
    background-color:rgb(213, 213, 213) !important;
    border-color:black !important;
    color:black !important;
}


body {
    overflow: hidden;
}

/* The entire application */
#app {
    /*Initial blur (that goes away when you login)*/
    filter: blur(8px);
    background-color:rgb(56, 54, 54);
    color:white;
    height:100%;
    border: 5px solid black;

}

/* The box for connected users */
#connected {
    background-color:rgb(213, 213, 213);
    color:black;
    height:200px;
    overflow-y:scroll;
    overflow-wrap:normal;
}

/* Each individual user button under the connected user list */
.userBtn {
    width:100%;
    background-color:rgb(50,50,50);
    color:White;
    text-align:center;
    border-style:solid;
    border-width:2;
    border-color:black;
    font-size:20px;
    font-weight:bold;

}


/*The entire log*/
#log {
    background-color:rgb(213, 213, 213);
    color:black;
    height:200px;
    overflow-y:scroll;
    overflow-wrap:normal;
}

/* Log Messages */
.logMessage {
    font-size:14px;
}

button:hover {
    background-color:rgb(200,255,200);
}

label {
    color:black;
    font-weight:bold;
}

.downloadButton {
    width:100%;
    color:white;
    background-color:rgb(24, 24, 24);
}

.downloadButton:hover {
    background-color:rgb(120,120,120);
}

.closeBtn {
    color:white;
    background-color:red;
    width:32px;
    height:32px;
    float:right;
}

.closeBtn:hover {
    background-color:rgb(98, 14, 14);
}

#files {
    width:100%;
    height:150px;
    background-color:rgb(213, 213, 213);
    overflow:auto;
}

#whiteboardColor {
    transform:translate(0,20%);
}


/* For the icons */
.material-symbols-outlined {
    font-family: 'Material Symbols Outlined';
    font-weight: normal;
    font-style: normal;
    font-size: 24px;  /* Preferred icon size */
    display: inline-block;
    line-height: 0;
    text-transform: none;
    letter-spacing: normal;
    word-wrap: normal;
    white-space: nowrap;
    direction: ltr;
    vertical-align: center;
    transform: translate(0px, 5px);
  }


.connectCheckBox {
	transform: translate(-50%, 22%);
	top:50%;
	float:right;
	width:22px;
	height:22px;
}