/*

== COLORS ==
Dark Gray (Header):     #333
Gray:                   rgb(87, 87, 87);

*/

h1
{
    color: white;
    font-size: 50px;
    margin: 0px;
}

/* Body Section */
body 
{
    background-color: #333;
    font-family: 'Helvetica';
    color: rgb(255, 255, 255);
    height: 100%;
    margin: 0px;
    padding: 0px;
    align-self: center;
}

/* Generic HTML */
html
{
    height: 100%;
    align-self: center;
}

p
{
    margin: 15px;
    text-align: justify;
    text-justify: inter-word;
}

/* Table Cell Entries */
td
{
    width: 600px;
    font-size: 30px;

    /* Smooth Color Transition */
    transition: background 0.1s linear;
    -moz-transition: background 0.1s linear;
    -webkit-transition: background 0.1s linear;
}

input
{
    font-size: 20px;
    width: 50%;
    height: 30px;
    border: 1px solid rgb(73, 73, 73); /* Add a grey border */
    background-color: rgb(209, 209, 209);
    color: rgb(0, 0, 0);
    align-self: center;
    margin: 4px;
}

/* ==== EXTRA ================================================= */

#pancake
{
    width: 2.5%;
    height: 5%;
}

#hand
{
    margin: 10px;
    width: 50%;
    height: 18%;
    -webkit-transform:rotate(180deg);
    -moz-transform: rotate(180deg);
    -ms-transform: rotate(180deg);
    -o-transform: rotate(180deg);
    transform: rotate(180deg);
}

#underline
{
    border-bottom: 1px solid black;
}

/* ==== SIDEBAR =============================================== */

/* Sidebar itself */
#infoSidebar
{
    /* border-right: 2px solid #333; */
    position: fixed;
    top: 20px;
    width: 300px;
    height: 65%;
    margin: 0px;
    padding: 0px;
    z-index: 2;
    left: -302px;                                                   /* Hides the sidebar */
    transition: all 400ms cubic-bezier(0.165, 0.84, 0.44, 1);       /* Transition settings */
    border-radius: 10px;
    border: 1px solid black;
    background-color: rgb(209, 209, 209);
    color: black;
}

/* Sidebar (when clicked) */
#infoSidebar.active
{
    /* Moves the sidebar back into place when button is first clicked */
    left: 0px;
    box-shadow: 5px 5px 30px #333;
}

/* Sidebar Button */
#infoSidebar .infoButton
{
    top: 30px;
    left: 301px;
    position: absolute;
    color: black;
    background-color: rgb(131, 131, 131);
    padding: 10px;
    height: 30px;
    font-size: 22px;

    /* Smooth Color Transition */
    transition: background 0.1s linear;
    -moz-transition: background 0.1s linear;
    -webkit-transition: background 0.1s linear;
}

/* Sidebar Button (hover) */
#infoSidebar .infoButton:hover
{
    background-color: rgb(170, 170, 170);
}

/* ==== INPUTS/BUTTONS ======================================== */

#input-and-buttons
{
    margin: auto;
    text-align: center;
    align-self: center;
    margin: 0px;
    border: 10px white Solid;
}

#enterButton
{
    align-self: center;
    width: 90px;
    padding: 10px;
    font-size: 20px;
    background-color: rgb(0, 99, 21);
    border-radius: 6px;
    right: 220px;
    margin: 10px;

    /* Smooth Color Transition */
    transition: background 0.1s linear;
    -moz-transition: background 0.1s linear;
    -webkit-transition: background 0.1s linear;
}

#enterButton:hover
{
    background-color: rgb(0, 128, 28);
}

#enterButton:active
{
    background-color: rgb(0, 156, 34);
}

/* ==== QUEUE ================================================= */

/* Container that holds the table */
#queueContainer
{
    border-radius: 20px;
    padding: 20px;
    background-color: rgb(87, 87, 87);
    height: 650px;
    margin: 10px;
    overflow: auto;
    /* border: 1px solid white; */
    /* border-bottom: 1px solid #ffffff; */
    /* border-top: 1px solid #ffffff; */
}

/* Table Itself */
#queueTable
{
    margin: auto;
    height: 100%;
    overflow: auto;
    font-size: 12px;
    /* border: 1px solid white; */
}

/* Table Rows */
#queueTable tr
{
    /* Smooth Color Transition */
    transition: background-color 0.1s linear;
    -moz-transition: background-color 0.1s linear;
    -webkit-transition: background-color 0.1s linear;
}

/* Highlights member row when mouse is hovering over it */
#queueTable tr:hover
{
    /* Add a grey background color to the table header and on hover */
    background-color: rgb(104, 104, 104);
}

#copyright
{
    margin: 5px;
    font-size: 12px;
}

/* ==== SCROLLBAR =================================================== */

/* width */
::-webkit-scrollbar {
    width: 10px;
}

/* Track */
::-webkit-scrollbar-track {
    background: rgba(0, 0, 0, 0.1);
    border-radius: 10px;
}

/* Handle */
::-webkit-scrollbar-thumb {
    background: rgb(134, 134, 134);
    border-radius: 10px;
}

/* Handle on hover */
::-webkit-scrollbar-thumb:hover {
    background: rgb(107, 107, 107);
}