/* Color Variables */
:root {  
   --lightgrey: #ededed; /* Lightgrey color */
    --darkgrey: #343940 ; /* Darkgrey color */
    --lighttext: white; /* Text on dark background */
    --darktext: black; /* Text on light background*/
    --lightbackground: white; /* Light background color */
    --bluebutton: #00BFFF /* Data blue color */
}


                    /* OVERALL FOR THE WEBSITE */


* {
    margin: 0;
    padding: 0rem 0rem;
    box-sizing: border-box;
}

html {
    height: 100%;
}


.w100 {
    width: 100%;
    
}


                                /* Test på grids */
.col {
    width: 40rem;
}

                                /* FLEXBOX */


.flexbox-container-center {
    display: flex; /* Responsive grid-ish */
    justify-content: center; /* Centers content vertically */
}




                            /* NAVIGATIONBAR */


nav { /* This determens the navbar height/width & the navbar's backgrund color */
    width: 100%;
    height: 6rem;
    position: absolute;
}

nav p:hover { /* This determens the size and placement of the loguot text/button */
    font-family: monospace;
    font-size: 0.875rem;
    line-height: 1.4375rem;
    padding: 1rem 1.25rem;
}


nav ul { /* This determens where the ul main text is located */
    float: right;
    color: var(--darktext);
    padding: 3rem 0rem;
    text-align: center;

}

nav ul li { /* This determens where the menu text is located */
    float: right;
    list-style: none; /* Removes the list styling dot */
    position: relative;
    background-color: var(--darkgrey); /* Color of navbar*/
    padding: 0.15rem 0.9rem; /* Decides the width of the main menu items */
    text-align: center;

}

nav ul li a { /* This determens the size of the menu text */
    display: block; /* New line and full width */
    color: var(--darktext);
    font-size: 0.875rem;
    padding: 0.5rem 0.75rem;
}

nav ul li a:hover { /* This makes the menu change color when hovering */
    background-color: #222;
    border-radius: 0.25rem 0.25rem 0.25rem 0.25rem;
     
}

.navbar-nav {
    min-width: 12rem;
}

.navbar-dark .navbar-nav .nav-link:focus { /* Changes the color of the dropdownmenu after click (this fixes that) */
    color: var(--lightgrey);
}

.navbar-dark .navbar-nav .nav-link { 
    color: var(--lightgrey); /* Color on the menu */
}

#techupload { /* Special upload nav bar item for technicians */
    background-color: var(--lightgrey);
    border-radius: 0.2rem !important;
}
#techupload:hover { /* Special upload nav bar item for technicians */
    background-color: silver;
    border-radius: 0.2rem;
}
#techupload>a { /* Special upload nav bar item for technicians */
    color: var(--darkgrey);
    font-weight: 600;
}
#techupload>a:hover { /* Special upload nav bar item for technicians */
    background-color: silver;
}
.navbar-collapse.collapse.show #techupload {    /* Border when dropdown is opened */
    border-left: 0.4rem solid var(--darkgrey);
    border-right: 0.4rem solid var(--darkgrey);
    border-radius: 0 !important;
}
.navbar-collapse.collapsing #techupload { /* Border also when opening */
    border-left: 0.4rem solid var(--darkgrey);
    border-right: 0.4rem solid var(--darkgrey);
    border-radius: 0 !important;
}


                        /* OVERALL FOR MAIN */


main { 
    margin-top: 10rem;
    display: flex; /* Responsive grid-ish */
    align-items: center; /* Aligns horisontally */
    justify-content: center; /* Aligns vertically */
    flex-direction: column; /* Sets the flex direction to colomn */
}


body {
    background-color: var(--lightbackground);
    background-size: cover;
    font-family: sans-serif;
    min-height: 100%;
    display: flex; /* Responsive grid-ish */
    flex-direction: column; /* Sets the flex direction to colomn */
}

.bodyindex { /* Places everything in the middle (having spacing on each side) */
    width: 70%;
}

                        /*Table uploaded files and useroverview*/

.tablewidth{ /* Places tables in the middle (having spacing on each side) */
    width: 70%;
}

.table-fixed {
    border-collapse: collapse; /* Removes margin-ish in table */
    text-align: center/* Else the lines will go over eachother */
}

.table-fixed tbody tr td {
    background: white;
    
}
/* > Sign it will target elements which are DIRECT children of a particular element.*/
.table-fixed>thead>tr>th {
    border: 0 !important;
    background: var(--lightgrey);
    color: black;
    position: sticky; /* Makes the titles stay when scrolling */
    top: 0;
}

.table-fixed>tbody>tr>td:last-child {
    border-right: 0;
}

.table-fixed tbody td,
table-fixed thead>tr>th {
    font-size: 1rem;
    padding-left: 1rem;
    text-align: left;
}

.tableaccess {
    padding-left: 0 !important;
}

.tabledelete {
    padding-left: 0 !important;
    text-align: center !important;
}




                            /* Upload files functionen */


.txtfile { /* This controls the width of the txtfile input field */
    width: 30rem;
}

.uploadfunktion { /* The hole function */
    margin-top: 0rem;
}


                            /* Login Form */


.login { /* All about the loginbox*/
    text-align: center;
    background-color: var(--lightgrey);
    padding: 1rem 1rem 1rem 1rem;
    border: 0.2rem solid var(--darkgrey);
    border-radius: 0.3rem;
    width: 27rem;
    margin-top: 8%;
    
}


.login_form {
    width: 75%;
}


.forgotpassword { /* Color of forgot password*/
    color: black;
}


                            /* Headlines*/


.heading { /*The design off all headlines*/
    text-align: center;
    font-size: 2rem;
    font-weight: 600;
    padding: 1rem 1rem 1rem 1rem;
    background-color: var(--lightgrey);
    border-radius: 0.2rem;
    margin-top: 0;
    width: 70%;
}

/* For some unexplainable reason - we NEED to have the .heading class TWICE for it to work!? */

.heading { /*The design off all headlines*/
    text-align: center;
    font-size: 2rem;
    font-weight: 600;
    padding: 1rem 1rem 1rem 1rem;
    background-color: var(--lightgrey);
    border-radius: 0.2rem;
    margin-top: 0;
    width: 70%;
}
                            /* Homepage */  

.masterboxhomepage::after { /* This box surrounds the boxhomepage */
    width: 70%;
    display: table; /* Displays content like a table element */
    clear: both;   /* There can't be floating elements on either side of this object */
}
.boxhomepage { /* Inside the masterbox */
    float: left;
    width: 30%;
    padding: 1rem;
    border: 0.3rem solid var(--darkgrey);
    border-radius: 0.3rem;
    min-height: 15rem;
    text-align: center;
    margin-left: 1.5%;
    margin-right: 1.5%;
    margin-top: 3rem;
}

.text { /* Inside the 3 boxes */
    font-size: 1.5rem;
}

.numbers { /* Inside the 3 boxes */
    font-size: 3rem;
    font-weight: 600;
}

.numbersbox { /* Inside the 3 boxes */
    margin-top: 1rem;
}

                            /* Account overview */

.no_display {
    display:none;
}

.profilepic {
    height: 20rem;
    width: 20rem;
}

.userimg {
    height: 5rem !important; 
    width: 5rem !important;
}


                            /* Delete old files*/


.boxdelete { /* Delete button */
    text-align: center;
    margin-bottom: 2rem;
}

                            /*Manage Users*/


.signupfield {
    margin: 0.5rem;    
}

.categorybox {
    width: 9rem;
}

.hidesignup {
    width: 70%;
}


                             /* FOOTER */


.footer {
    background-color: var(--darkgrey);
    color: var(--lighttext);
    width: 100%;
    text-align: center;
    height: 8%;
    padding: 1.3rem 1rem 0.3rem 1rem;
    bottom: 0;
    overflow: hidden; /*If there is too much text in the footer, hide it, don't mess with the footer, hace muchos problemas :( no me gusta */
    margin-top: auto;
}

.form-group {
    margin-bottom: 0;
}

                            /*RAW DATA*/
#languagebox {
    font-size: 0.75rem; 
}

#languagebox div input[type="radio"] {
    border: 0;
    height: 0.75rem;
    width: 0.75rem;
}