/*   

   Filename: style.css
   Author: Niko Zahn
   
-----------------------------

   19/08/2021 | Niko Zahn | Created File

------------------------------
*/

/* --- GENERAL --- */
html, #Content{ background-color: black; overflow: hidden;}

body{margin: 3px;}

* {color: white; font-family: Arial, Helvetica, sans-serif;}

h1{font-size: 30px; margin: 2px;}

/* --- GENERAL --- */
/* --- INPUTS --- */

.button, button{background-color: black; border-bottom: 2px solid #69b46c; width: 100%; height: 35px; margin: 5px;}

.button:hover, button:hover{background-color: #69b46c; border: 2px solid white; color: white; }

.button.selected, button.selected{background-color: #69b46c; border: 2px solid white; color: white; }

.button:disabled, button:disabled{opacity: 0.7; }

input[type="text"],input[type="password"],input[type="date"],input[type="number"]{color: black; width: 100%;}

/* --- INPUTS --- */
/* --- LOGIN --- */

#Window{ width: 175px; height: 200px; border: 2px solid white; padding: 15px;}

#Window form{display: flex; flex-direction: column;}

#Window label{text-align: center; margin: 5px;}

/* --- LOGIN --- */
/* --- TABS --- */

#Tabs {display: flex; min-width: 1500px; }

.Tab {width: auto; margin: 2px; font-size: 17px;}

.vertical {margin: 0px 5px;}

/* --- TABS --- */
/* --- VIEWS --- */

#Views{text-align: center; display: flex; flex-direction: column; }

#ViewSelect{width: 175px !important; margin: 5px auto; background-color: black; border-bottom: 2px solid #69b46c; font-size: 17px;}

/* --- VIEWS --- */
/* --- PROJECTVIEW --- */
#ProjectView{margin:auto; }

#ProjectView ul{list-style-type: none; margin: 0; margin-bottom: 5px;}

#ProjectView li{height: 30px; background: rgb(100, 100, 100); text-align: left; margin: 5px 0px; font-size: 20px; padding: 5px 0px 0px 5px;}

#Arrow{width: 30px; height: 30px; float: right;}

#Edit{position: absolute; bottom: 0; height: 40px; width: 150px; font-size: 22px; right: 0;}

.hidden{display: none;}

.shown{display: block;}

.mark{border: 2px solid white;}

.mark td{border: 2px solid white;}

.Category li{width: 500px;}

.Project li{width: 600px;}

.Task li, #Milestone li{width: 700px;}

.Info li{width: 700px;}

/* --- PROJECTVIEW --- */
/* --- PROJECTTABLE --- */

#ProjectTable{width: 99%; height: 75%; display: flex; flex-direction: column; overflow: scroll; min-width: 1350px; user-select: none;-ms-overflow-style: none; scrollbar-width: none; }

#TableHead th{border-bottom: 2px solid white; padding-bottom: 5px;}

#ProjectTable hr{width: 100%;}

#ProjectTable::-webkit-scrollbar {display: none;}

#ProjectTable td{text-align: center; height: 30px; border-left: 1px solid white; padding: 0px 5px;}

#ProjectTable .Project{font-weight: bold;}

#Header{width: 100%; min-height: 100px; display: flex; flex-direction: row;}

#priority div{width: 100%;height: 100%;}

#background{position: absolute; width: 100%; height: 100%; background: rgb(0,0,0,0.6); top: 0; display: flex;}

#editor{width: 450px; border: 2px solid white; margin: auto; display: flex; flex-direction: column; padding: 15px 0px;}

#editor input{width: 70% !important; margin: 0px auto; font-size: 16px;}

#editor button{width: 70% !important; font-size: 22px; margin: 5px auto;}

#editor hr{width: 100%;}

#editor div{display: flex; flex-direction: row;}

#editor div .UIInput{margin: 0 0 0 auto !important;}

#editor #EditPerm{height: 35px; width: 10%; margin: 0 13px;}

#editor #EditPerm:hover{opacity: 0.6;}

label{text-align: center; font-size: 20px; margin: 5px 0px;}

.important{background-color:rgb(255,0,0);}

.medium{background-color:rgb(255,155,0);}

.notimportant{background-color:rgb(0,255,0);}

.row{width: 50%; display: flex; flex-direction: column; padding: 10px;}

.row div{display: flex; flex-direction: row;}

.row p{font-weight: bold !important;}

.CreateEdit{font-size: 20px;}

.UISelect{width: 70% !important; font-size: 22px; margin: 5px auto; background-color: black; border-bottom: 1px solid rgb(0,255,0);}


/* --- PROJECTTABLE --- */
/* --- PERMISSIONS --- */

#PermSelect{padding: 0px 10px;}

#PermSelect li{display: flex; padding: 2px 0; border-bottom: 1px solid;}

#PermSelect p{width: 100%; margin: auto;}

#PermSelect input{width: 60% !important;}

#PermSelect .title{margin: 0 0 5px 0; font-size: 20px; text-align: center;}

#PermSelect .title p {width: 60%;}

/* --- PROJECTTABLE --- */