@import url('https://fonts.googleapis.com/css2?family=Roboto:wght@500&display=swap');
@import url('https://fonts.googleapis.com/css2?family=Open+Sans:wght@300&display=swap');
@import url('https://fonts.googleapis.com/css2?family=Montserrat&display=swap');
@import url('https://fonts.googleapis.com/css2?family=Manrope:wght@700&display=swap');


* {
    padding: 0px;
    margin: 0px;
}

.triangle-left {
	width: 0px;
	height: 0px;
	border-top: 500px solid transparent;
	border-right: 1890px solid #e63912;
	border-bottom: 500px solid transparent;
    position: relative;
    top: -520px;
    opacity: 0.5;
    z-index: -1;
}

.hidden-id {
    display: none;
}

.required:after {
    content:" *";
    color: #e63912;
  }

.js body {
    display: none;
}

.loged_user {
    margin-left: -25px;
    padding: 10px 10px 0px 0px;
    font-family: 'Montserrat', sans-serif;
    font-size: 12px;
    font-style: italic;
    text-align: right;
    width: 20%;
    background: linear-gradient(to right, #ffffff 0%, #f2f2f2 100%);
    border-radius: 10px;
}

.loged_user a {
    color: #4d4d4d;
    text-decoration: none;
    transition: all .35s;
}

.loged_user a:hover {
    font-weight: bold;
    color: #e63912;
}

/*-----Lost pass-----*/
.lost-cont {
    padding: 40px;
    margin: 0px;
    margin: auto;
    text-align: center;
    width: 20%; 
    height: 300px;
    border-radius: 8px;
    box-shadow: 0 4px 8px 0 rgba(0, 0, 0, 0.2), 0 6px 20px 0 rgba(0, 0, 0, 0.19);
}

.lost-cont .hiba {
    font-family: 'Roboto', sans-serif;
    font-weight: bold;
    font-size: 18px;
    color: #4d4d4d;
    padding: 25px;
}

.lost-cont div {
    padding: 10px;
}

.lost-cont label {
    font-family: 'Montserrat', sans-serif;
    font-weight: bold;
    font-size: 16px;
}

.lost-cont input[type=email] {
    border: none;
    border-bottom: 1px solid #555;
    width: 90%;
    padding: 12px 20px;
    font-family: 'Montserrat', sans-serif;
    font-size: 14px;
    border-radius: 6px;
    margin-top: 10px;
}

.lost-cont input[type=submit] {
    background-color: #f2f2f2;
    border: 1px solid #4d4d4d;
    border-radius: 6px;
    color: #4d4d4d;
    text-decoration: none;
    padding: 5px;
    cursor: pointer;
    font-size: 15px;
    font-family: 'Montserrat', sans-serif;
    width: 30%;    
    margin-top: 20px;
}

.lost-cont input[type=submit]:hover {
    color: #4d4d4d;
    font-weight: bold;
}

/*----------MENÜ----------*/
.nav {
    background-color: #fff;
    display: flex;
    justify-content: space-between;
    width: 100%;
    margin: 5px auto;
}

.menu * {
    box-sizing: border-box;
    transition: all .35s ease;
}
  
.menu li {
    display: inline-block;
    list-style: outside none none;
    margin: 8px;
    padding: 5px;
    font-family: 'Montserrat', sans-serif;
    text-transform: uppercase;
}
  
.menuBtn {
    padding: 8px;
    color: #4d4d4d;
    position: relative;
    text-decoration: none;
    font-size: 15px;
}
  
.menuBtn::before,
.menuBtn::after {
    content: '';
    height: 14px;
    width: 14px;
    position: absolute;
    transition: all .35s ease;
    opacity: 0;
}
  
.menuBtn::before {
    content: '';
    right: 0;
    top: 0;
    border-top: 3px solid #e63912;
    border-right: 3px solid #e63912;
    transform: translate(-100%, 50%);
}
  
.menuBtn:after {
    content: '';
    left: 0;
    bottom: 0;
    border-bottom: 3px solid #e63912;
    border-left: 3px solid #e63912;
    transform: translate(100%, -50%)
}
  
.menuBtn:hover:before,
.menuBtn:hover:after{
    transform: translate(0,0);
    opacity: 1;
}
  
.menu a:hover {
    color: #e63912;
}

.newTimeLogo {
    margin-top: 0px;
    padding-top: 25px;
    padding-left: 10px;
    opacity: 0.7;
}

/*----------MENÜ GOMBOK----------*/
.openMenu {
    font-size: 25px;
    margin: 5px;
    padding: 5px;  
    display:none;
    cursor: pointer;
    float: right;
    color: #4d4d4d;
}

.closeMenu {
    font-size: 25px;
    display:none;
    cursor: pointer;
    margin: 5px;
    padding: 5px; 
    opacity: 0.8;
    color: #4d4d4d;
}

/*----------Logout button----------*/
.menu .logoutBtn{
    background-color: white;
    border: 3px solid #e63912;
    border-radius: 100px;
    color: #e63912;
    text-decoration: none;  
    opacity: 0.7; 
    font-family: 'Montserrat', sans-serif;
    font-weight: bold;
    font-size: 15px;
    display: inline-block;
    padding: 4px;
    margin: 8px;
    height: 32px;
    width: 32px;
    text-align: center;
    vertical-align: center;
    transition: width 0.5s, text-align 0.5s, color 1s, opacity 1s;
}

.menu .logoutBtn:hover {
    width: 50px;
    text-align: right;
    color: #e63912;
    opacity: 1;
}

@media screen and (max-width: 1255px) {
    .menu {
        height: 400px;
        position: fixed;
        top: 0;
        right: 0;
        left: 0;
        z-index: 10;
        padding: 20px 20px 20px 20px;
        flex-direction: column;
        justify-content: center;
        align-items: center;
        background: white;
        transition: top 1s ease;
        display: none;
        text-align: center;
    }

    .menuBtn {
        font-size: 16px;
        margin: 5px;
        padding: 3px;
    }

    .logoutBtn {
        font-size: 18px;
        margin: 5px;
        padding: 3px;
    }

    .closeMenu {
        display: block;
        position: absolute;
        top: 2px;
        right: 10px;
    }

    .openMenu {
        display: block;
        margin-top: 15px;
        margin-bottom: 30px;
    }
}

@media screen and (max-width: 665px) {
    .menuBtn {
        margin: 45px;
        padding: 15px;
    }

    .menu .logoutBtn {
        margin: 45px;
    }
}

@media screen and (max-width: 405px) {
    .menuBtn {
        margin: 25px;
        padding: 15px;
    }

    .menu .logoutBtn {
        margin: 25px;
    }
}

.activeMenu {
    border-bottom: 1px solid #e63912;
    border-radius: 6px;
    color: #e63912;
}

h1 {
    color: white;
    padding: 25px 0px 25px 0px;
    font-size: 25px;
    animation: showTitle 0.5s linear 0s 1;
}

h2 {
    color: white;
    padding: 25px 0px 25px 0px;
    font-size: 25px;
    animation: showTitle 0.5s linear 0s 1;
}

.title {
    margin: 30px 0px 80px -25px;
    padding-left: 30px;
    font-family: 'Manrope', sans-serif;    
    background: linear-gradient(to left, rgb(255, 255, 255) 0%, rgb(230, 57, 18) 80%);
    border-radius: 6px;
    animation: slideTitle 0.5s linear 0s 1;
}

@keyframes slideTitle {
    0% {
        width: 0px;
        font-size: 5px;
    }

    25% {
        width: 25%;
        font-size: 10px;
    }

    50% {
        width: 50%;
    }

    100% {
        width: 100%;
        font-size: 25px;
    }
}

@keyframes showTitle {
    0% {
        font-size: 5px;
    }

    25% {
        font-size: 10px;
    }

    50% {
        font-size: 15px;
    }

    100% {
        font-size: 25px;
    }
}

/*----------LOGIN FORM----------*/
.loginForm {
    z-index: 3;
}

.login {
    width: 50%;
    height: auto;
    margin: 50px auto;
    padding: 60px 0;
    text-align: center;
    font-family: 'Montserrat', sans-serif;
    font-weight: bold;
    font-size: 14px;
    box-shadow: 0 4px 8px 0 rgba(0, 0, 0, 0.2), 0 6px 20px 0 rgba(0, 0, 0, 0.19);
}

.loginForm p {
    font-family: 'Montserrat', sans-serif;
    color: white;
    text-shadow: 2px 2px 6px #000000;
}

/*----------Login button----------*/
.log {
    background-color: #e63912;
    border: 1px solid #e63912;
    border-radius: 5px;
    color: white;
    font-family: 'Montserrat', sans-serif;
    font-weight: bold;
    font-size: 15px;
    padding: 8px;
    margin: 10px auto;
    width: 70%;
    font-weight: bold; 
    cursor: pointer;  
    transition: box-shadow 1s;
}

.log:hover {
    box-shadow: 0 12px 10px 0 rgba(0,0,0,0.10), 0 17px 30px 0 rgba(0,0,0,0.19);
}

/*----------Login form adatmezők----------*/
.userData {
    border: none;
    border-bottom: 2px solid #ccc;
    border-radius: 6px;
    padding: 7px 7px;
    width: 70%;
    color: #595959;
}

::placeholder {
    color: #cccccc;
    font-family: 'Montserrat', sans-serif;
    font-style: italic;
}

.userData:focus {
    border: 3px solid #ccc;
    border-radius: 6px;
}

/*----------Reminder----------*/
.reminder a {
    color: #595959;
    text-decoration: none;
    font-size: 14px;
    padding: 4px;
    font-family: 'Montserrat', sans-serif;
    transition: all 0.5s;    
}

.reminder a:hover {
    color:#595959;
    font-weight: bold;
    border-bottom: 2px solid #ccc; 
    border-radius: 8px;
}

/*----------ERROR----------*/
.error { 
    color: #e63912;
    text-align: center;
    font-size: 13px;
    font-weight: bold;
    width:500px;
    margin: auto;
}

/*-----SEARCH------*/
.search-div {
    width: 100%;
    margin: 10px, auto;
    text-align: right;
}

.searchBar {
    width: 5%;
    border: 1px solid #ccc; 
    border-radius: 10px;
    padding: 5px;
    font-size: 14px;
    transition: width 0.4s ease-in-out;
}

.searchBar:focus {
    width: 15%;
}

.searchBtn {
    border: none;
    font-size: 18px;
    color: #ccc; 
    background-color: white;
    border-radius: 10px;
    padding: 5px;
    transition: color 0.8s;
}

.searchBtn:hover {
   color: #4d4d4d;
}

.search-results {
    display: none;
    width: 100%;
    height: 20px;
    padding: 10px;
    margin: 10px;
    font-family: 'Montserrat', sans-serif;
    font-weight: bold;
    font-size: 14px;
    text-align: right;
}

.search-div label {
    font-size: 12px;
    color: #4d4d4d;
}

.result-data {
    width: 20%;
    margin: 10px;
    padding: 20px;
    text-align: right;
    float : right;
    position: relative;
    top: -43px;
    background-color: white;
    border-radius: 10px;
    box-shadow: 0 4px 8px 0 rgba(0, 0, 0, 0.2), 0 6px 20px 0 rgba(0, 0, 0, 0.19);
    animation: slideSearch 0.5s linear 0s 1;
}

.result-data div {
    border-bottom: 1px solid #ccc; 
    padding: 10px 0px;
}

.result-data h6 {
    font-weight: bold;
    font-family: 'Roboto', sans-serif;
    padding-bottom: 5px;
    color: #e63912;
}

.result-data a {
    color: #4d4d4d;
    text-decoration: none;
    padding-right: 10px;
}

.result-data p {
    margin: 10px 0px 0px 0px;
    padding: 0;
    color: #4d4d4d;
    font-weight: bold;
    text-transform: uppercase;
}

.result-data a:hover {
    color: #e63912;
    font-weight: bold;
}

#search input[type=checkbox] {
    border: 2px solid #ccc;
    border-radius: 6px;
    padding: 5px;
    margin-left: 5px;
}

.closeSearch {
    color: #e63912;
    cursor: pointer;
    position: relative;
    top: -35px;
}

@keyframes slideSearch {
    0% {
        opacity: 0;
    }

    25% {
        opacity: 0.25;
    }

    50% {
        opacity: 0.5;
    }

    75% {
        opacity: 0.75;
    }

    100% {
        opacity: 1;
    }
}

/*----------WORKERS LIST----------*/
.workers {
    width: 100%;
    border-radius: 20px;
    box-shadow: 0 4px 8px 0 rgba(0, 0, 0, 0.2), 0 6px 20px 0 rgba(0, 0, 0, 0.19);
}

.workers table {
    text-align: center;
    border-collapse: collapse;
    width: 100%;
    margin: auto;
    padding: 10px;
    border-radius: 20px;
    overflow: hidden;
}

.workers table th, td {
    padding: 8px; 
}

.workers table td {
    font-family: 'Montserrat', sans-serif;
}

.workers table th {
    background-color: #cccccc;
    font-family: 'Roboto', sans-serif;
}

.workers table th button {
    color: #f2f2f2;
    font-weight: bold;
    transition: color 0.3s;
}

.workers table th button:hover {
    color: black;
}

.workers table tr:nth-child(even) {
    background-color: #f2f2f2;
}

.workers table tr {
    transition: background-color 0.3s;
}

.workers table tr:hover {
    background-color: #cccccc;
}

.op {
    text-decoration: none;
    color: #4d4d4d;
    font-weight: bold;
}

.opDelete  {
    text-decoration: none;
    color: #4d4d4d;
    font-weight: bold;
}

.op:hover {
    color:black; 
}

.opDelete:hover {
    color:#e63912; 
}

.addNew {
    width: 100%;
    text-align: center;
    margin: auto;
    padding: 20px 0px 20px 0px;
}

.addNew a {
    position: relative;
    box-sizing: border-box;
    display: inline-block;
    overflow: hidden;
    padding: 6px;
    margin: 0px 3px 6px;
    text-align: center;
    border: 2px solid #e63912;
    border-radius: 5px;
    text-decoration: none;
    color: #e63912;
    white-space: nowrap;
    z-index: 0;
    font-weight: bold;
    font-family: 'Montserrat', sans-serif;
    font-size: 15px;
}

.addNew a::before {
    position: absolute;
    content: "";
    background: #e63912;
    transition-duration: 0.3s;
    z-index: -1;
    inset: 0px auto auto 0px;
    width: 0px;
    height: 100%;
    opacity: 1;
} 

.addNew a:hover::before {
    width: 100%;
    height: 100%;
    opacity: 1;
} 

.addNew a:hover {
    color: white;
    background: #e63912;
    transition: color 0.3s ease 0s, background 0s ease 0.5s;
} 

.leaveData input[type=text] {
    border: none !important;
}

.daysDate {
    margin-top: 5px;
    margin-bottom: 5px;
}

.leave-date {
    width: 100%;
    margin-bottom: 5px;
}

.dayCount input[type=text] {
    width: 5% !important;
}

.readLeave {
    width: 100%;
    text-align: center;
    margin: auto;
}

.leaveDays {
    width: 100%;
    text-align: center;
}

.leaveDays table {
    width: 100%;
    text-align: center;
    margin: auto;
    border-collapse: collapse;
    padding: 10px;
    color: #4d4d4d;
}

.leaveDays th {
    background-color: #cccccc;
    padding: 8px 0px;
}

.leaveDays tr {    
    border-top: 1px solid #cccccc;
    border-bottom: 1px solid #cccccc;    
}

/*----------CARDOK----------*/
#userCard {
    padding: 20px;
    margin: 0px;
    margin-left: -15px;
    width: 70%; 
    border-radius: 8px;
    box-shadow: 0 4px 8px 0 rgba(0, 0, 0, 0.2), 0 6px 20px 0 rgba(0, 0, 0, 0.19);
}

#passCard {
    padding: 20px;
    margin: 0px;
    margin-left: -15px;
    width: 40%; 
    border-radius: 8px;
    box-shadow: 0 4px 8px 0 rgba(0, 0, 0, 0.2), 0 6px 20px 0 rgba(0, 0, 0, 0.19);
}

#insert {
    padding: 50px;
    margin: 0px;
    margin-left: -15px;
    width: 70%; 
    border-radius: 8px;
    box-shadow: 0 4px 8px 0 rgba(0, 0, 0, 0.2), 0 6px 20px 0 rgba(0, 0, 0, 0.19);
}

#edit {
    padding: 50px;
    margin: 0px;
    margin-left: -15px;
    width: 70%; 
    border-radius: 8px;
    box-shadow: 0 4px 8px 0 rgba(0, 0, 0, 0.2), 0 6px 20px 0 rgba(0, 0, 0, 0.19);
}

/*----------USER SZERKESZTÉS----------*/
.userForm label {
    font-size: 18px;
    font-family: 'Roboto', sans-serif;
}

.userForm select{
    border: none;
    font-family: 'Montserrat', sans-serif;
    font-size: 15px;
    width: 50%;
}

.userForm input[type=text] {
    border: none;
    border-bottom: 1px solid #555;
    width: 30%;
    padding: 12px 20px;
    font-family: 'Montserrat', sans-serif;
    font-size: 15px;
}

.userForm input[type=text]:focus {
    border: 2px solid #555;
}

.userForm input[type=password] {
    border: none;
    border-bottom: 1px solid #262626;
    width: 30%;
    padding: 12px 20px;
}

.userForm input[type=password]:focus {
    border: 2px solid #555;
}

.userForm #status{
    font-family: 'Montserrat', sans-serif;
    font-size: 15px;
    width: 15%;
    border-radius: 3px;
    background-color: #f2f2f2;
    border: 1px solid #e6e6e6;
}

.userForm #jog {
    border: none;
    font-family: 'Montserrat', sans-serif;
    font-size: 15px;
    padding: 5px;
}

.userForm #azon {
    border: none;
    width: 10%;
}

/*----------NewPass----------*/
.newPassForm {
    margin: auto;
    padding: 20px;
    width: 100%; 
}

.newPassForm label {
    font-size: 18px;
    font-family: 'Roboto', sans-serif;
}

.newPassForm input[type=password] {
    border: none;
    border-bottom: 1px solid #262626;
    width: 25%;
    padding: 12px 20px;
}

.newPassForm input[type=password]:focus {
    border: 2px solid #555;
}

.newPassForm .sub {
    text-align: right;
}

/*----------Formok - add, edit - általános----------*/
.userForm {
    margin: auto;
    padding: 20px;
    width: 95%;  
}

.taskForm {    
    margin: auto;
    padding: 50px;
    width: 95%;
}

/*----------FOOTER----------*/
.footer {
    width: 100%;
    margin: auto;
    margin-top: 100px;
    text-align: center;
    font-family: 'Montserrat', sans-serif; 
    font-size: 14px;
    padding: 50px 0px;
}

/*----------PROJEKTEK----------*/
.projects {
    margin: 10px;
    border-radius: 20px;
    box-shadow: 0 4px 8px 0 rgba(0, 0, 0, 0.2), 0 6px 20px 0 rgba(0, 0, 0, 0.19);
}

.projects table {
    text-align: center;    
    border-collapse: collapse;
    width: 100%;
    margin: auto;
    padding: 10px;
    color: #262626;
    border-radius: 20px;
    overflow: hidden;
}

.projects table th, td {   
    padding: 8px; 
}

th button {
    border: none;
    background-color: #cccccc;
}

.projects table th button {
    color: #f2f2f2;
    font-weight: bold;
    transition: color 0.3s;
}

.projects table th button:hover {
    color: black;
}

.projects table td {
    font-family: 'Montserrat', sans-serif;
}

.projects table th {
    background-color: #cccccc;
    font-family: 'Roboto', sans-serif;
}

.projects table tr:nth-child(even) {
    background-color: #f2f2f2;
}

.projects table tr {
    transition: background-color 0.3s;
}

.projects table tr:hover {
    background-color: #cccccc;
}

.titleBtn {
    text-decoration: none;
    color: #262626;
}

.titleBtn:hover {
    color: #262626;
}

.projects #azon {
    width: 5%;
}

.projects #title {
    width: 30%;
}

.projects #status {
    width: 10%;
}

.projects #date {
    width: 10%;
}

.projects #ed {
    width: 5%;
}

.projects #del {
    width: 5%;
}

.filter {
    color: #4d4d4d;
    font-family: 'Montserrat', sans-serif;
    font-size: 12px;
    margin-left: 10px;
    padding: 0px;
}

.filterBtn {
    background-color: white;
    font-family: 'Montserrat', sans-serif;
    border: 1px solid #4d4d4d;
    border-radius: 5px;
    color: #4d4d4d;
    text-decoration: none;
    padding: 3px;
    cursor: pointer;
    font-size: 12px;
    width: 6%;
    transition: background-color 0.5s;
}

.filterBtn:hover {
    background-color: #f2f2f2;
}

.sub-save {
    text-align: center;
}

.sub {
    text-align: center;
    padding: 15px;
    font-family: 'Montserrat', sans-serif;
    width: 100%;
}

.back {
    background-color: white;
    border: 1px solid #4d4d4d;
    border-radius: 6px;
    color: #4d4d4d;
    text-decoration: none;
    text-align: center;
    padding: 6px;
    cursor: pointer;
    font-size: 15px;
    font-family: 'Montserrat', sans-serif;
    transition: all 0.5s;
}

.back span {
    cursor: pointer;
    display: inline-block;
    position: relative;
    transition: 0.5s;
}

.back span:after {
    content: '\00bb';
    position: absolute;
    opacity: 0;
    top: 0;
    right: -10px;
    transition: 0.5s;
}

.back:hover span {
    padding-right: 10px;
    color: #4d4d4d;
    font-weight: bold;
  }
  
.back:hover span:after {
    opacity: 1;
    right: 0;
}

.save {
    background-color: #f2f2f2;
    border: 1px solid #4d4d4d;
    border-radius: 6px;
    color: #4d4d4d;
    text-decoration: none;
    padding: 5px;
    cursor: pointer;
    font-size: 15px;
    font-family: 'Montserrat', sans-serif;
    transition: all 0.5s;
}

.save:hover {
    background-color: #e63912;
    border: 1px solid #e63912;
    color: #f2f2f2;
    font-weight: bold;
}

/*-----SETTINGS MENÜ-----*/
.settingsForm {
    padding: 50px;
    margin: 0px;
    margin-left: -15px;
    width: 50%; 
    border-radius: 8px;
    min-height: 300px;
    box-shadow: 0 4px 8px 0 rgba(0, 0, 0, 0.2), 0 6px 20px 0 rgba(0, 0, 0, 0.19);
}

.settingsForm div{
    padding: 5px;
}

.settingsForm label {
    font-size: 18px;
    font-family: 'Roboto', sans-serif;
}

.settingsForm select{
    font-size: 15px;
    width: 20%;
    height: 28px;
    border-radius: 3px;
    padding: 3px;
    background-color: #f2f2f2;
    border: 1px solid #e6e6e6;
    font-family: 'Montserrat', sans-serif;
}

/*----------PROJEKTEK SZERKESZTÉSE----------*/
.projectCard {
    background-image: url("/circleNewT.png");
    width: 100%;
    background-size: 1000px;
    background-position: center right; 
    background-repeat: no-repeat; 
    position: relative;
    margin-left: -15px;    
}

.projectEditor .projectCard  {
    min-height: 700px;
}

.desc {
    width: 70%;
}

.taskEditor .projectCard {
    min-height: 900px;
}

.projectRead {
    height: 750px;
    align-content:center;
}

.projectForm {
    min-height: 750px;
}

#projectUser .projectRead {
    min-height: 850px;
}

.projectForm div{
    padding: 5px;
}

.projectForm label {
    font-size: 18px;
    font-family: 'Roboto', sans-serif;    
    color: #4d4d4d;
    padding-bottom: 10px;
}

.projectForm .text input[type=text]{
    border: none;
    border-bottom: 1px solid #555;
    font-family: 'Montserrat', sans-serif;
    font-size: 15px;
    font-weight: none;
    width: 30%;
    height: 30px;
}

.projectForm .hours input[type=text]{
    border: 1px solid #4d4d4d;
    font-family: 'Montserrat', sans-serif;
    font-size: 15px;
    font-weight: none;
    width: 5%;
    padding: 5px;
}

.projectForm select{
    border: none;
    font-family: 'Montserrat', sans-serif;
    font-size: 15px;
    width: 50%;
}

.projectForm #status{
    font-family: 'Montserrat', sans-serif;
    font-size: 15px;
    width: 15%;
    border-radius: 3px;
    background-color: #f2f2f2;
    border: 1px solid #e6e6e6;
}

.projectForm input[type=date]{
    border: none;
    font-family: 'Montserrat', sans-serif;
    font-size: 15px;
    width: 20%;
}

.azon {
    border: none !important;
    font-family: 'Montserrat', sans-serif;
    font-size: 15px;
    font-weight: bold;
    padding: 5px;
    width: 5%;
}

.new-project-title {
    border: none;
    border-bottom: 1px solid #555;
    font-family: 'Montserrat', sans-serif;
    font-size: 15px;
    font-weight: none;
    width: 30%;
    padding: 5px;
    height: 30px;
}

/*----------TASKOK----------*/
.tasks {
    margin: 10px;
    border-radius: 20px;
    box-shadow: 0 4px 8px 0 rgba(0, 0, 0, 0.2), 0 6px 20px 0 rgba(0, 0, 0, 0.19);
}

.tasks table {
    text-align: center;
    border-collapse: collapse;
    width: 100%;
    margin: auto;
    padding: 10px;
    color: #262626;
    border-radius: 20px;
    overflow: hidden;
}

.tasks table th, td {
    padding: 8px; 
}

.tasks table td {
    font-family: 'Montserrat', sans-serif;
}

.tasks table th {
    background-color: #cccccc;
    font-family: 'Roboto', sans-serif;
}

.tasks table th button {
    color: #f2f2f2;
    font-weight: bold;
    transition: color 0.3s;
}

.tasks table th button:hover {
    color: black;
}

.tasks table tr:nth-child(even) {
    background-color: #f2f2f2;
}

.tasks table tr {
    transition: background-color 0.3s;
}

.tasks table tr:hover {
    background-color: #cccccc;
}

.tasks #azon {
    width: 10%;
}

.tasks #title {
    width: 30%;
}

.tasks #hours {
    width: 10%;
}

.tasks #regD {
    width: 10%;
}

.tasks #startD {
    width: 10%;
}

.tasks #endD {
    width: 10%;
}

.tasks #ed {
    width: 5%;
}

.tasks #del {
    width: 5%;
}

.project-filter {
    color: #4d4d4d;
    font-size: 12px;
    margin-left: 20px;
    margin: auto;
    width: 90%;
}

.selector {
    width: 20%;
    height: 28px;
    border-radius: 3px;
    padding: 3px;
    font-size: 15px;
    background-color: #f2f2f2;
    border: 1px solid #e6e6e6;
    font-family: 'Montserrat', sans-serif;
}

.filterBtn-task {
    background-color: white;
    border: 1px solid #4d4d4d;
    border-radius: 5px;
    color: #4d4d4d;
    text-decoration: none;
    padding: 3px;
    cursor: pointer;
    font-size: 14px;
    width: 3%;
    transition: background-color 0.5s;
}

.filterBtn-task:hover {
    background-color: #f2f2f2;
}

/*----------TASKOK SZERKESZTÉSE----------*/
.taskForm {
    margin: 0px;
    padding: 20px;
    width: 80%;
}

.taskForm div{
    padding: 5px;
}

.taskForm label {
    font-size: 18px;
    font-family: 'Roboto', sans-serif;
}

.taskForm input[type=text]{
    border: none;
    border-bottom: 1px solid #555;
    font-family: 'Montserrat', sans-serif;
    font-size: 15px;
    font-weight: none;
    width: 70%;
    padding: 5px;
    height: 30px;
}

.taskForm .hours input[type=text]{
    border: none;
    border-bottom: 1px solid #555;
    font-family: 'Montserrat', sans-serif;
    font-size: 15px;
    font-weight: none;
    width: 5%;
    padding: 5px;
}

.taskForm textarea{
    border: 1px solid #4d4d4d;
    width: 70%;
    height: 200px;
    font-family: 'Montserrat', sans-serif;
    font-size: 15px;
}

.project-selector .selector{
    border: none;
    font-family: 'Montserrat', sans-serif;
    font-size: 15px;
    width: 50%;
}

.taskForm #status{
    font-family: 'Montserrat', sans-serif;
    font-size: 15px;
    width: 15%;
    border-radius: 3px;
    background-color: #f2f2f2;
    border: 1px solid #e6e6e6;
}

.taskForm input[type=date]{
    border: none;
    font-family: 'Montserrat', sans-serif;
    font-size: 15px;
}

.taskForm .azon {
    border: none;
    font-family: 'Montserrat', sans-serif;
    font-size: 15px;
    font-weight: bold;
    padding: 5px;
    width: 5%;
}

.taskForm .task-title {
    width: 30%;
    border: none;
    font-family: 'Montserrat', sans-serif;
    font-size: 15px;
    font-weight: bold;
    padding: 5px;
}

.taskForm input[type=date] {
    width: 20%;
}

.taskForm .check {
    margin: 20px 0px;
    padding: 5px;
}

.taskForm .check label {    
    font-size: 16px;
}

/*----------LAPOZÓ----------*/
.pagination {
    width: 100%;
    text-align: center;
    padding: 25px 0px 0px 0px;
    font-family: 'Montserrat', sans-serif;
    font-weight: bold;
}

.visible {
    display: block;
    text-decoration: none;
    color: #4d4d4d;
    font-size: 14px;
    margin: auto;
    padding: 2px;
    transition: all 0.8s; 
}

.visible:hover {
    color: #4d4d4d;
    border-bottom: 1px solid #4d4d4d;
    border-radius: 6px;
}

.invisible {
    display: none;
}

/*----------USER READ----------*/
.read_task {
    display: block;
}

.projectRead label {
    font-size: 18px;
    font-family: 'Roboto', sans-serif;
}

.projectRead input[type=text]{
    border: none;
    font-family: 'Montserrat', sans-serif;
    font-size: 16px;
    font-weight: none;
    width: 50%;
}

.projectRead textarea{
    border: none;
    width: 70%;
    height: 200px;
    font-family: 'Montserrat', sans-serif;
    font-size: 16px;
}

.projectRead select{
    border: none;
    font-family: 'Montserrat', sans-serif;
    font-size: 16px;
}

.projectRead input[type=date]{
    border: none;
    font-family: 'Montserrat', sans-serif;
    font-size: 16px;
}

.taskRead h2 {
    color: #4d4d4d;
    font-family: 'Roboto', sans-serif;
    padding: 20px 5px;
}

.taskRead {
    margin: 5px auto;
    padding: 25px;
}

.taskRead table {
    text-align: center;
    border-collapse: collapse;
    width: 100%;
    margin: auto;
    padding: 10px;
    color: #262626;
    border-radius: 20px;
    overflow: hidden;
}

.taskRead table th, td {
    padding: 8px; 
}

.taskRead table td {
    font-family: 'Montserrat', sans-serif;
}

.taskRead table th {
    background-color: #cccccc;
    font-family: 'Roboto', sans-serif;
}

.taskRead table tr:nth-child(even) {
    background-color: #f2f2f2;
}

.taskRead table tr:hover {
    background-color: #cccccc;
}

.titleArrow {
    font-weight: bold;
}

.sub .save {
    font-family: 'Montserrat', sans-serif;
    font-size: 16px;
    font-weight: bold;
    margin: 5px;
}

.sub .back {
    font-family: 'Montserrat', sans-serif;
    font-size: 16px;
}

/*----------TIMETRACKER----------*/
.timeRead {
    margin: 10px;
    border-radius: 20px;
    box-shadow: 0 4px 8px 0 rgba(0, 0, 0, 0.2), 0 6px 20px 0 rgba(0, 0, 0, 0.19);
}

.time-project {
    margin: 5px auto;
    padding: 25px;
}

.time-menu {
    margin: 0px auto;
    padding: 0px 25px;
}

.time-menu h2 {
    color: #4d4d4d;
    font-family: 'Roboto', sans-serif;
    padding: 20px 5px;
}

.time-project h2 {
    color: #4d4d4d;
    font-family: 'Roboto', sans-serif;
    padding: 10px 5px;
}

.sub-more {
    text-align: center;
    font-family: 'Montserrat', sans-serif;
    width: 100%;
}

.timeRead h2 {
    color: #4d4d4d;
    font-family: 'Roboto', sans-serif;
    padding: 25px 0px 25px 0px;
}

.timeRead table {
    text-align: center;
    border-collapse: collapse;
    width: 100%;
    margin: auto;
    padding: 10px;
    color: #262626;
    border-radius: 20px;
    overflow: hidden;
}

.timeRead table th, td {
    padding: 8px; 
}

.timeRead table td {
    font-family: 'Montserrat', sans-serif;
}

.timeRead table th {
    background-color: #cccccc;
    font-family: 'Roboto', sans-serif;
}

.timeRead th button {
    font-size: 14px;
    padding: 3px;
}

.timeRead table th button {
    color: #f2f2f2;
    font-weight: bold;
    transition: color 0.3s;
}

.timeRead table th button:hover {
    color: black;
}

.timeRead .hided-td {
    background-color: #f2f2f2;
}

.timeRead table tr {
    transition: background-color 0.3s;
}

.timeRead table tr:hover {
    background-color: #cccccc;
}

/*----------PROJECT, TIMETRACKER, STATISZTIKA ÉS KOMMENT MENÜ + DOLGOZÓ - SZABADSÁG----------*/
.projectMore {
    padding: 10px 5px;
    margin: 0px;
    width: 100%;
}

.pMenuInactive {
    font-family: 'Montserrat', sans-serif;
    font-size: 14px;
    text-decoration: none;
    background-color:  #f2f2f2;
    color: #262626;
    font-weight: bold;
    padding: 10px 5px 10px;
    border-top: 1px solid #f2f2f2;
    border-left: 1px solid #f2f2f2;
    border-right: 1px solid #f2f2f2;
    transition: color 0.5s;
}

.pMenuInactive:hover {
    color: #e63912;
}

.pMenuActive {
    font-family: 'Montserrat', sans-serif;
    font-size: 14px;
    text-decoration: none;
    color: #e63912;
    font-weight: bold;
    padding: 10px 5px 10px;
    border-top: 1px solid #f2f2f2;
    border-left: 1px solid #f2f2f2;
    border-right: 1px solid #f2f2f2;
    box-shadow: 0 2px 4px 0 rgba(0, 0, 0, 0.1);
    transition: color 0.5s;
}

.pMenuActive:hover {
    color: #e63912;
}

.projectMore a:hover {
    color: #e63912;
}

.t_projectMore {
    padding: 5px 11px;
    margin: 0px;
}

.projectMore #notific {
    color:#e63912;
    position: relative;
    top: -8px;
}

.t_projectMore #notific {
    color:#e63912;
    position: relative;
    top: -8px;
}

.hotkeys {
    width: 100%;
    margin: 0px;
    padding: 10px 5px;
}

.hotkeys_btn {
    text-decoration: none;
    font-family: 'Montserrat', sans-serif;
    font-size: 14px;
    text-decoration: none;
    color: #e63912;
    font-weight: bold;
    padding: 10px 5px 5px;
    margin: 0px 10px;
    transition: all 0.8s;
}

.hotkeys_btn:hover {
    border-bottom: 1px solid #e63912;
    color: #e63912;
    border-radius: 6px;
}

.workerMore {
    padding: 10px 5px;
    margin: 0px;
    width: 100%;
}

.wMenuInactive {
    font-family: 'Montserrat', sans-serif;
    font-size: 14px;
    text-decoration: none;
    background-color:  #f2f2f2;
    color: #262626;
    font-weight: bold;
    padding: 10px 5px 10px;
    border-top: 1px solid #f2f2f2;
    border-left: 1px solid #f2f2f2;
    border-right: 1px solid #f2f2f2;
    transition: color 0.5s;
}

.wMenuInactive:hover {
    color: #e63912;
}

.wMenuActive {
    font-family: 'Montserrat', sans-serif;
    font-size: 14px;
    text-decoration: none;
    color: #e63912;
    font-weight: bold;
    padding: 10px 5px 10px;
    border-top: 1px solid #f2f2f2;
    border-left: 1px solid #f2f2f2;
    border-right: 1px solid #f2f2f2;
    box-shadow: 0 2px 4px 0 rgba(0, 0, 0, 0.1);
    transition: color 0.5s;
}

.wMenuActive:hover {
    color: #e63912;
}

.workerMore a:hover {
    color: #e63912;
}

/*----------NAPTÁR-----------*/
.time-calendar {
    width: 40%;
    position: absolute;
    top: 410px;
    left: 1100px;
}

#calendar_mini {
    width: 5%;
}

#calendar_div {
    display: none;
    position: absolute;
    top: 15px;
    left: 40px;
    background-color: white;
    width: 60%;
    margin: 0px auto;
    padding: 20px;
    box-shadow: 0 4px 8px 0 rgba(0, 0, 0, 0.2), 0 6px 20px 0 rgba(0, 0, 0, 0.19);
}

#open-calendar {
    padding: 5px;
    border-radius: 20px;
    border: none;
    background-color:white;
    font-size: 30px;
    color: #e63912;
}

.calendar-wrap {
    width: 95%;
    margin: 0px auto;
}

.calendar-wrap a {
    color: #4d4d4d;
}

.calendar-wrap a:hover {
    color: #4d4d4d;
}

#year_dropdown {
    border: 2px solid #f2f2f2;
    border-radius: 8px;
    padding: 3px;
    text-align: center;
}

#month_dropdown {
    border: 2px solid #f2f2f2;
    border-radius: 8px;
    padding: 3px;
    text-align: center;
}

.cal-nav {
    margin-bottom: 5px;
    text-align: center;
    width: 100%;
}

.calendar-wrap table {
    border: 2px solid #f2f2f2;
    border-collapse: collapse;
    border-radius: 20px;
    margin: auto;
}

.calendar-wrap .days th{
    padding: 10px;
    border: 2px solid #f2f2f2;
    font-family: 'Roboto', sans-serif;
    color: #4d4d4d;
    width: 50px;
    height: 25px;
    text-align: center;
}

.calendar-wrap table tr td{
    border: 2px solid #f2f2f2;
    padding: 0px;
    width: 80px;
    height: 90px;
}

.calendar-wrap table td {
    text-align: right;
    vertical-align: top;
    font-family: 'Montserrat', sans-serif;
    color: #4d4d4d;
    font-size: 15px;
    position: relative;
}

.eventDays {
    padding-right: 5px;
    margin: 0px;
    margin-top: 3px;
    text-align: right;
}

.act_date {
    text-align: right;
}

.act_date .eventDays {
    font-weight: bold;
    color: white;
    background-color: #4d4d4d;
    border-radius: 20px;
    text-align: right;
    width: 50%;
    margin-left: 28px;
    margin-bottom: 10px;
    box-shadow: 0 4px 8px 0 rgba(0, 0, 0, 0.2), 0 6px 10px 0 rgba(0, 0, 0, 0.19);
}

.calendar-wrap table .mileTitle {
    font-size: 8px;
    padding: 0px;
    padding-right: 3px;
    max-height: 5px;
    margin: 0px;
    color: #e63912;
    position: relative;
    top: -28%;
    left: -50%;
    display: inline-block;
    transition: all 0.3s ease-in-out;
    cursor: pointer;
    text-align: center;
}

.act_date .mileTitle {
    position: relative;
    top: -200%;
    left: -80%;
}

.calendar-wrap table .taskTooltip {
    font-size: 8px;
    padding: 0px;
    margin: 0px;
    color: #e63912;
    position: relative;
    display: inline-block;
    transition: all 0.3s ease-in-out;
    border: none;
    cursor: pointer;
    width: 100%;
    height: 10%;
}

.calendar-wrap table .showTitle {
    visibility: hidden;
    z-index: 1;
    opacity: .40;
    width: 200px;
    height: 25px;
    padding: 5px 10px;
    position: absolute;
    top: -520%;
    left: -25%;
    color: #4d4d4d;
    font-family: 'Montserrat', sans-serif;
    border-radius: 9px;
    font-size: 12px;
    text-align: left;    
    background-color: #f2f2f2;
    transform: translateY(9px);
    transition: all 0.3s ease-in-out;  
    box-shadow: 0 0 3px rgba(56, 54, 54, 0.86);
}

.calendar-wrap table .showTitle a{
    text-decoration: none;
    font-weight: bold;
}

.calendar-wrap table .showTask {
    visibility: hidden;
    z-index: 1;
    opacity: .40;
    width: 250px;
    min-height: 20px;
    padding: 5px 10px;
    position: absolute;
    top: -800%;
    left: -25%;
    border-radius: 9px;
    font-size: 12px;
    text-align: left;
    color: #4d4d4d;
    font-family: 'Montserrat', sans-serif;
    background-color: #f2f2f2;
    transform: translateY(9px);
    transition: all 0.3s ease-in-out;  
    box-shadow: 0 0 3px rgba(56, 54, 54, 0.86);
}

.calendar-wrap table .showTask a{
    text-decoration: none;
    font-weight: bold;
}

.calendar-wrap table .mileTitle:hover .showTitle{
    visibility: visible;
    transform: translateY(40px);
    transform: translateX(-20px);
    opacity: 1;
    transition: .3s linear;
}

.calendar-wrap table .taskTooltip:hover .showTask{
    visibility: visible;
    transform: translateY(40px);
    transform: translateX(-20px);
    opacity: 1;
    transition: .3s linear;
}

.calendar-wrap table #cell-0 {
    width: 100%;    
    height: 10%;
    border: none;
    position: absolute;
    top: 30%;
    left: 0%;
}

.calendar-wrap table #cell-1 {
    width: 100%;    
    height: 10%;
    border: none;
    position: absolute;
    top: 45%;    
    left: 0%;
}

.calendar-wrap table #cell-2 {
    width: 100%;    
    height: 10%;
    border: none;
    position: absolute;
    top: 60%;
    left: 0%;
}

.calendar-wrap table #cell-3 {
    width: 100%;    
    height: 10%;
    border: none;
    position: absolute;
    top: 75%;
    left: 0%;
}

.calendar-wrap table #cell-4 {
    width: 100%;    
    height: 10%;
    border: none;
    position: absolute;
    top: 90%;
    left: 0%;
}

.calendar-wrap table .task {
    width: 100%;
    height: 100%;
    margin: 0px;
    padding: 0px;
    border: none;
}

/*----------REPORT----------*/
.reportBtn {
    position: relative;
    box-sizing: border-box;
    overflow: hidden;
    padding: 5px;
    margin: 0px 3px;
    text-align: center;
    border: 2px solid #e63912;
    font-family: 'Montserrat', sans-serif;
    border-radius: 5px;
    text-decoration: none;
    color: #e63912;
    white-space: nowrap;
    z-index: 0;    
    font-weight: bold;
    font-size: 15px;
}

.reportBtn::before {
    position: absolute;
    content: "";
    background: #e63912;
    transition-duration: 0.3s;
    z-index: -1;
    inset: 0px auto auto 0px;
    width: 0px;
    height: 100%;
    opacity: 1;
} 

.reportBtn:hover::before {
    width: 100%;
    height: 100%;
    opacity: 1;
} 

.reportBtn:hover {
    color: white;
    background: #e63912;
    transition: color 0.3s ease 0s, background 0s ease 0.5s;
} 

.report div {
    padding: 8px;
}

.report {
    margin: 0px;
    padding: 15px;
}

.report label {
    font-family: 'Roboto', sans-serif;
    font-size: 18px;
    color: #4d4d4d;
}

.report #add-title {
    border: none;
    border-bottom: 1px solid #555;
    font-family: 'Montserrat', sans-serif;
    font-size: 15px;
    font-weight: none;
    width: 70%;
    padding: 5px;
    height: 30px;
}

.report .text {
    border: none;
    border-bottom: 1px solid #555;
    font-family: 'Montserrat', sans-serif;
    font-size: 15px;
    font-weight: none;
    width: 30%;
    height: 30px;
}

.tiny {
    width: 5%;
}

.report .chooseAgain {
    padding-left: 20px;
}

.visible-users select {
    width: 15%;
    height: 28px;
    border-radius: 3px;
    color: #4d4d4d;
    font-size: 14px;
    background-color: #f2f2f2;
    border: 1px solid #e6e6e6;
    display: block;
    font-family: 'Montserrat', sans-serif;
}

.visible-users label {
    font-family: 'Roboto', sans-serif;
    font-size: 18px;
    color: #4d4d4d;
}

/*-----------KOMMENTEK------------*/
.comment-menu {
    width: 80%;
    margin: auto;
}

.comment-menu h5 {
    font-family: 'Roboto', sans-serif;
    color: #4d4d4d;
}

.commentRead {
    width: 100%;
    margin: auto;
    padding: 10px;
}

.comm_tbl {
    border: 1px solid #e6e6e6;    
    border-radius: 25px;
    width: 50%;
    margin: 30px auto;
    border-collapse: collapse;
    overflow: hidden;
    box-shadow: 0 4px 8px 0 rgba(0, 0, 0, 0.2), 0 6px 20px 0 rgba(0, 0, 0, 0.19);
}

.comm_tbl td {
    font-family: 'Montserrat', sans-serif;
    padding: 15px;
}

.comm_text {
    font-size: 18px;
}

.comm_data {
    background-color: #e6e6e6;
    font-family: 'Roboto', sans-serif;
    font-weight: bold;
    color: #4d4d4d;
    font-size: 13px;
    max-height: 10px;
}

.comm_date {
    text-align: right;
}

.newComm {
    width: 50%;
    margin: 25px auto;
    color: #4d4d4d;
}

.newComm .send_new{
    margin: 10px auto;
    text-align: center;
    color: #4d4d4d;
}

.no_comm {
    width: 80%;
    margin: 25px auto;
    text-align: center;
    color: #4d4d4d;
}

/*----------DÁTUM ÉS IDŐ FORMÁTUM----------*/
input[type=date] {
    border: 1px solid #e6e6e6;
    width: 15%;
    height: 28px;
    padding: 5px;
    text-align: center;
    background-color: #f2f2f2;
}

input[type=time] {
    border: 1px solid #e6e6e6;
    width: 15%;
    height: 28px;
    padding: 5px;
    text-align: center;
    background-color: #f2f2f2;
}

/*------MÉRFÖLDKÖVEK------*/
#mileCard {
    padding: 20px;
    margin: 0px;
    margin-left: -15px;
    width: 70%; 
    border-radius: 8px;
    box-shadow: 0 4px 8px 0 rgba(0, 0, 0, 0.2), 0 6px 20px 0 rgba(0, 0, 0, 0.19);
}

.mileForm {
    padding: 25px;
}

.mileForm label {
    font-size: 18px;
    font-family: 'Roboto', sans-serif;
}

.mileForm div {
    padding: 8px;
}

.mileForm select{
    border: none;
    font-family: 'Montserrat', sans-serif;
    font-size: 15px;
    width: 30%;
}

.mileForm input[type=text] {
    border: none;
    border-bottom: 1px solid #555;
    width: 30%;
    padding: 12px 20px;
    font-family: 'Montserrat', sans-serif;
    font-size: 15px;
}

.mileRead {
    margin: auto;
    border-radius: 20px;
    box-shadow: 0 4px 8px 0 rgba(0, 0, 0, 0.2), 0 6px 20px 0 rgba(0, 0, 0, 0.19);
}

.mileRead h2 {
    color: #4d4d4d;
    font-family: 'Roboto', sans-serif;
    padding: 25px 0px 25px 0px;
}

.mileRead table {
    text-align: center;
    border-collapse: collapse;
    width: 100%;
    margin: auto;
    padding: 10px;
    color: #262626;
    border-radius: 20px;
    overflow: hidden;
}

.mileRead table th, td { 
    padding: 8px; 
}

.mileRead table td {
    font-family: 'Montserrat', sans-serif;
}

.mileRead table th {
    background-color: #cccccc;
    font-family: 'Roboto', sans-serif;
}

.mileRead .hided-td {
    background-color: #f2f2f2;
}

.mileRead table tr {  
    transition: background-color 0.3s;
}

.mileRead table tr:hover {
    background-color: #cccccc;
}

.mileRead .m_title {
    width: 30%;
}

.mileRead .project {
    width: 30%;
}

.mileRead .date {
    width: 10%;
}

.mileRead .operation {
    width: 5%;
}

/*----------JAVASCRIPTHEZ----------*/
.hidden-desc {
    display: none;
    max-height: 550px;
    max-width: 100%;
    padding: 0px;
    overflow: hidden;
    text-rendering: auto;
    letter-spacing: normal;
    word-spacing: normal;
    text-transform: none;
    text-indent: 0px;
    text-shadow: none;
    text-align: start; 
    white-space: pre-wrap;
    overflow-wrap: break-word;
}

.show {
    cursor: pointer;
}

.hidden-desc div {
    max-width: 550px;
    padding: 5px;
    background-color: #f2f2f2;
}

.hidden-desc {
    background-color: #f2f2f2;
}

.whiteBack {
    background-color: #f2f2f2;

}

.navBack {
    background-color: #f2f2f2;
}

.trLink {
    cursor: pointer;
}

/*----------EXPORT----------*/
.export div {
    padding: 8px;
}

.export {
    margin: 0px;
    padding: 15px;
}

.exportForm {
    padding: 25px;
    margin: 0px;
    margin-left: -5px;
    width: 50%; 
    border-radius: 8px;
    box-shadow: 0 4px 8px 0 rgba(0, 0, 0, 0.2), 0 6px 20px 0 rgba(0, 0, 0, 0.19);
}

.exportForm label {
    font-size: 18px;
    font-family: 'Roboto', sans-serif;
}

.exportForm input[type=date] {
    width: 50%;
    border-radius: 3px;
}

.exportForm p {
    font-family: 'Montserrat', sans-serif;
}

.exportForm select {
    width: 80%;
    height: 28px;
    border-radius: 3px;
    padding: 3px;
    background-color: #f2f2f2;
    border: 1px solid #e6e6e6;
    font-family: 'Montserrat', sans-serif;
}

.export-btn {
    width: 100%;
    text-align: right;
    margin: 5px;
}

.sub-export {
    position: relative;
    box-sizing: border-box;
    display: inline-block;
    overflow: hidden;
    padding: 6px;
    margin: 0px 3px 6px;
    text-align: center;
    border: 2px solid #e63912;
    font-family: 'Montserrat', sans-serif;
    border-radius: 3px;
    text-decoration: none;
    color: #e63912;
    background-color: white;
    white-space: nowrap;
    z-index: 0;    
    font-weight: bold;
    font-size: 15px;
}

.sub-export::before {
    position: absolute;
    content: "";
    background: #e63912;
    transition-duration: 0.3s;
    z-index: -1;
    inset: 0px auto auto 0px;
    width: 0px;
    height: 100%;
    opacity: 1;
} 

.sub-export:hover::before {
    width: 100%;
    height: 100%;
    opacity: 1;
} 

.sub-export:hover {
    color: white;
    background: #e63912;
    transition: color 0.3s ease 0s, background 0s ease 0.5s;
} 


.export-back {
    background-color: white;
    border: 1px solid #4d4d4d;
    border-radius: 3px;
    color: #4d4d4d;
    text-decoration: none;
    padding: 8px;
    cursor: pointer;
    font-family: 'Montserrat', sans-serif;
    transition: all 0.5s;
}

.export-back span {
    cursor: pointer;
    display: inline-block;
    position: relative;
    transition: 0.5s;
}

.export-back span:after {
    content: '\00bb';
    position: absolute;
    opacity: 0;
    top: 0;
    right: -10px;
    transition: 0.5s;
}

.export-back:hover span {
    padding-right: 10px;
    color: #4d4d4d;
    font-weight: bold;
  }
  
.export-back:hover span:after {
    opacity: 1;
    right: 0;
}

.sub-export:hover {
    font-weight: bold;
}

/*-----STAT-----*/
.stat-cont {
    margin: auto;
    width: 98%; 
    min-height: 1000px;
    border-top: 1px solid #f2f2f2;
    border-radius: 20px;
}

.date-picker {
    width: 80%;
    padding: 20px;
    margin: auto;
    height: 150px;
}

.statFrom {
    width: 70%;
    height:120px;
}

.stat-cont label {
    position: relative;
    top: 25px;
    left: -150px;
}

.stat-filter {
    position: relative;
    top: -70px;
    left: 150px;
    width: 5%;
    margin: 0px;
    color: #4d4d4d;
    font-family: 'Montserrat', sans-serif;
    font-size: 12px;
    margin-left: 10px;
    border: 1px solid #4d4d4d;
    border-radius: 6px;
    cursor: pointer;
    font-size: 12px;
    padding: 3px;
}

.stat-filter:hover {
    font-weight: bold;
}

.show_delete {
    display:block;
}

.hide_delete {
    display: none;
}

.to {
    position: relative;
    top: -68px;
    left: 250px;
}

.mainCont {
    margin: auto;
    width: 100%; 
    border-radius: 8px;
    min-height: 300px;
    box-shadow: 0 4px 8px 0 rgba(0, 0, 0, 0.2), 0 6px 20px 0 rgba(0, 0, 0, 0.19);
}

.mainCont-users {
    margin: auto;
    width: 100%; 
    border-radius: 8px;
    min-height: 300px;
    box-shadow: 0 4px 8px 0 rgba(0, 0, 0, 0.2), 0 6px 20px 0 rgba(0, 0, 0, 0.19);
}

.mainStat {
    padding-left: 80px;
    padding-bottom: 50px;
    width: 100%;
}

.all {
    max-width: 600px;
    border-radius: 4px;
    height: 26px;
    position: relative;
    animation: slideStat 1s linear 0s 1;
}

.mainCont .sum {
    padding: 50px 0px 20px 0px;
    text-align: center;
    width: 70%;
    margin: auto;
    font-family: 'Roboto', sans-serif;
    color: #4d4d4d;
}

.mainCont ul {
    padding-left: 0;
    max-width: 600px;
    border-right: 2px solid #e63912;
    border-left: 2px solid #e63912;
    list-style-type: none;
    font-family: 'Roboto', sans-serif;
    color: #4d4d4d;
}

.mainCont li {
    margin-top: 15px;
    margin-bottom: 15px;
    position: relative;
}

.mainCont-users .sum {
    padding: 50px 0px 20px 0px;
    text-align: center;
    width: 70%;
    margin: auto;
    font-family: 'Roboto', sans-serif;
    color: #4d4d4d;
}

.mainCont-users ul {
    padding-left: 0;
    max-width: 600px;
    border-left: 2px solid #e63912;
    list-style-type: none;
    font-family: 'Roboto', sans-serif;
    color: #4d4d4d;
}

.mainCont-users li {
    margin-top: 15px;
    margin-bottom: 15px;
    position: relative;
}

.task-title {
    margin-top: 20px;
    width: 100%;
    margin-bottom: 5px; 
    height: 30px;    
}

.task-title h6 {
    font-size: 14px;
    padding-left: 10px;
}

.user-name {
    margin-top: 20px;
}

.user-name h6 {
    font-size: 20px;
    padding-left: 10px;
}

.max-hours {
    color: #e63912;
    text-align: center;
    width: 20%;
    position: relative;
    top: -35px;
    left: 620px;
}

.actual {
    position: absolute;
    text-align: center;
    height: 30px;
    top: -0.6px;
    left: -0.6px;
    color: white;
    border: 1px solid #e63912;
    border-radius: 4px;
    font-family: 'Roboto', sans-serif;
    max-width: 100%;
    background-color: #e63912;
    animation: slideActual 1s linear 0s 1;
}

.plus_hours {
    background-image: linear-gradient(to right, #e63912 0%, #ff9900 40%); 
    border-radius: 4px;
    position: relative;
    top: -1px;
    left: 99%;
    width: 50px;
    height: 30px;
    margin: 0px;
    padding: 0px;
}

@keyframes slideStat {
    0% {
        width: 0px;
    }

    100% {
        max-width: 600px;
    }
}

@keyframes slideActual {
    0% {
        width: 0%;
    }

    100% {
        max-width: 110%;
    }
}

/*-----FILES-----*/
.uploaded_files {
    width: 100%;
    font-size: 14px;
    color: #4d4d4d;
    padding: 5px;
}

.uploaded_files table {
    width: 30%;
    border: 2px solid #e6e6e6;
}

.uploaded_files .down_file {
    color: #4d4d4d;
    font-size: 13px;
    transition: color 0.5s;
}

.uploaded_files td {
    border-bottom: 1px solid #e6e6e6;
}

.uploaded_files .del_file {
    color: #4d4d4d;
    font-size: 13px;
    transition: color 0.5s;
}

.up {
    width: 100%;
    font-size: 14px;
    color: #4d4d4d;
    padding: 5px;
}

.up p {
    color: #e63912;
    padding: 10px 0px;
    font-size: 14px;
}

.uploaded_files .down_file:hover {
    color: black;
}

.uploaded_files .del_file:hover {
    color: #e63912;
}


/*----------MEDIA QUERY----------*/
@media screen and (max-width: 1700px) {
    .filterBtn {
        width: 10%;
    }

    .time-calendar {
        left: 1050px;
    }
}

@media screen and (max-width: 1605px) {
    .time-calendar {
        left: 700px;
    }
}

@media screen and (max-width: 1500px) {
    .mainStat {
        padding-left: 5px;
        padding-right: 5px;
    }

    .actual {
        max-width: 100%;
    }

    .mileForm input[type=date] {
        width: 20%;
    }

}

@media screen and (max-width: 1480px) {
    .login {
        width: 100%;
    }

    .max-hours {
        left: 400px;
    }

    .title {
        margin: 20px auto;
    }
    
    .title {
        margin: 30px 0px 80px -35px;
    }
}

@media screen and (max-width: 1374px) {
    .projectRead input[type=date] {
        width: 25%;
    }

    .settingsForm select {
        width: 50%;
    }

    .searchBar {
        width: 10%;
    }

    .date-picker {
        width: 100%;
        padding: 5px;
    }

    .stat-cont label {
        top: 25px;
        left: 0px;
    }

    .from {
        position: relative;
        top: 0px;
        left: 150px;
        width: 100%;
    }

    .to {
        position: relative;
        top: -68px;
        left: 450px;
        width: 100%;
    }

    .stat-filter {
        left: 300px;
        width: 10%;
    }

    #calendar_div {
        width: 80%;
    }
}

@media screen and (max-width: 1253px) {
    .time-calendar {
        top: 440px;
    }
}

@media screen and (max-width: 1200px) {

    h1 {
        padding: 10px 0 10px 0;
    }

    #edit {
        width: 100%;
    }

    .projectCard {
        width: 100%;
    }

    .projectEditor {
        width: 100%;
    }

    .adminSettings {
        width: 100%;
    }

    #insert {
        width: 100%;
    }

    #passCard {
        width: 70%;
    }

    .exportForm {
        width: 100%;
    }

    .report {
        width: 100%;
    }
    
    #mileCard {
        width: 100%;
    }

    .mileForm {
        width: 100%;
    }

    .stat-cont label {
        top: 25px;
        left: 0px;
    }

    .from {
        position: relative;
        top: 0px;
        left: 120px;
        width: 100%;
    }

    .to {
        position: relative;
        top: -68px;
        left: 300px;
        width: 90%;
    }

    .stat-filter {
        left: 200px;
        width: 10%;
    }
}

@media screen and (max-width: 1055px) {
    .loged_user {
        width: 40%;
    }

    .filterBtn {
        width: 20%;
    }

    .result-data {
        width: 40%;
    }
}

@media screen and (max-width: 992px) {
    .second{
        margin-top: 20px;
    }

    .max-hours {
        left: 620px;
    }

    .comm_tbl {
        width: 80%;
    }

    .newComm {
        width: 80%;
    }

    .mainStat .task-title {
        height: 60px;
        margin-bottom: 10px;
        margin-top: 40px;
    }

}

@media screen and (max-width: 900px) {
    #userCard {
        width: 100%;
    }

    .userForm {
        width: 100%;
    }

    .settingsForm {
        width: 80%;
    }

    .tiny {
        width: 10%;
    }
}

@media screen and (max-width: 858px) {
    .projectForm label {
        font-size: 15px;
    }

    .projectForm .text input[type=text]{
        width: 90%;
    }

    .projectForm #status{
        width: 40%;
    }

    .projectForm input[type=date]{
        width: 90%;
    }

    .settingsForm label {
        font-size: 15px;
    }

    .azon {
        width: 20%;
    }

    .new-project-title {
        width: 90%;
    }

    .workers {
        overflow: scroll;
    }
    
    .projects {
        overflow: scroll;
    }

    .tasks {
        overflow: scroll;
    }

    .taskRead {
        overflow: scroll;
    }

    .timeRead {
        overflow: scroll;
    }

    .task-title {
        width: 80%;
    }

    .taskForm label {
        font-size: 15px;
    }

    .taskForm .text input[type=text] {
        width: 80%;
    }

    .taskForm .hours input[type=text] {
        width: 15%;
    }

    .taskForm #status {
        width: 20%;
    }

    .taskForm input[type=date] {
        width: 80%;
    }

    .sub .back {
        padding: 3px;
        font-size: 14px;
    }

    .report label {
        font-size: 13px;
    }
    
    .report input[type=text] {
        width: 90%;
    }
    
    .visible select {
        width: 80%;
    }

    .report .selector {
        width: 90%;
    }

    .report input[type=date] {
        width: 75%;
    }
    
    .report input[type=time] {
        width: 75%;
    }

    .save {
        padding: 3px;
        font-size: 14px;
    }

    .reportBtn {
        font-size: 14px;
        padding: 3px;
    }

    .projectRead input[type=text] {
        width: 90%;
    }

    #passCard {
        width: 70%;
    }

    .newPassForm  input[type=password] {
        width: 60%;
    }

    .report .tiny {
        width: 10%;
    }

    .mileForm input[type=date] {
        width: 25%;
    }

    .date-picker {
        width: 100%;
        padding: 5px;
    }

    .stat-cont label {
        font-size: 13px;
    }

    .from {
        position: relative;
        top: 0px;
        left: 150px;
        width: 80%;
    }

    .to {
        position: relative;
        top: -68px;
        left: 300px;
        width: 80%;
    }

    .stat-filter {
        left: 200px;
        width: 10%;
    }
    
}

@media screen and (max-width: 760px) {
    .userForm label {
        font-size: 15px;
    }

    .exportForm label {
        font-size: 15px;
    }

    #azon {
        width: 60%;
    }

    .userForm #status {
        width: 40%;
        padding: 5px;
    }

    .userForm input[type=text] {
        width: 80%;
    }

    .userForm input[type=password] {
        width: 80%;
    }

    .projectRead input[type=date] {
        width: 95%;
    }

    .max-hours {
        left: 500px;
    }

    .searchBar {
        width: 15%;
    }

    .mileForm .selector {
        width: 45%;
    }

    .mileForm input[type=text] {
        width: 45%;
    }
}

@media screen and (max-width: 707px) {
    .mileForm input[type=date] {
        width: 40%;
    }

    .stat-cont label {
        font-size: 13px;
    }

    .from {
        position: relative;
        top: 0px;
        left: 100px;
        width: 80%;
    }

    .to {
        position: relative;
        top: -68px;
        left: 200px;
        width: 80%;
    }

    .stat-filter {
        left: 100px;
        width: 20%;
    }

    .comm_tbl {
        width: 90%;
    }

    .newComm {
        width: 90%;
    }
}

@media screen and (max-width: 600px) {
    .result-data {
        width: 60%;
    }

    .comment-menu {
        width: 100%;
    }

    .newComm {
        width: 90%;
    }

    .max-hours {
        left: 450px;
    }
}

@media screen and (max-width: 540px) {
    .searchBar {
        width: 20%;
    }

    .mileForm .selector {
        width: 55%;
    }

    .mileForm input[type=text] {
        width: 55%;
    }

    .from {
        position: relative;
        top: 0px;
        left: 150px;
        width: 80%;
    }

    .to {
        position: relative;
        top: -68px;
        left: 100px;
        width: 80%;
    }

    .stat-filter {
        left: 100px;
        width: 25%;
    }

    .max-hours {
        left: 400px;
    }
}

@media screen and (max-width: 480px) {
    .mainStat .task-title {
        width: 100%;
        height: 30px;
        overflow: scroll;
    }

    .max-hours {
        top: -25px;
        left: 280px;
    }

    .max-hours h5 {
        font-size: 15px;
    }

    .task-title h6 {
        font-size: 15px;
    }

    .user-name h6 {
        font-size: 15px;
    }

    .actual {
        font-size: 15px;
    }

    .mileForm input[type=date] {
        width: 45%;
    }
}

@media screen and (max-width: 442px) {
    .mileForm input[type=date] {
        width: 70%;
    }

    .mileForm .selector {
        width: 65%;
    }

    .mileForm input[type=text] {
        width: 65%;
    }

    .loged_user {
        width: 60%;
    }

    .pMenuInactive {
        font-size: 12px;
        padding: 5px 2.5px 5px;
    }

    .pMenuActive {
        font-size: 12px;
        padding: 5px 2.5px 5px;       
    }
}

@media screen and (max-width: 400px) {
    .exportForm input[type=date] {
        width: 90%;
    }

    .settingsForm {
        width: 100%;
    }

    .settingsForm select{
        width: 90%;
    }

    .title {
        font-size: 18px;
        padding: 10px 0 10px 0;
    }

    .addNew a {
        font-size: 14px;
        padding: 3px;
    }

    .reportBtn {
        font-size: 14px;
        padding: 3px;
    }

    .filter {
        font-size: 11px;
        font-family: 'Montserrat', sans-serif;
    }

    .filterBtn {
        font-size: 11px;
        padding: 2px;
        font-family: 'Montserrat', sans-serif;
    }

    .projects table td {
        font-size: 12px;
        font-family: 'Montserrat', sans-serif;
    }

    .tasks table td {
        font-size: 12px;
        font-family: 'Montserrat', sans-serif;
    }

    .taskRead table td {
        font-size: 12px;
        font-family: 'Montserrat', sans-serif;
    }

    .project-filter {
        font-size: 11px;
        font-family: 'Montserrat', sans-serif;
        padding: 2px;
    }

    .workers table td {
        font-size: 12px;
        font-family: 'Montserrat', sans-serif;
    }

    .timeRead table td {
        font-size: 12px;
        font-family: 'Montserrat', sans-serif;
    }

    table th {
        font-size: 12px;
    }

    .projectRead {
        width: 100%;
    }

    .newPassForm  input[type=password] {
        width: 90%;
    }

    #passCard {
        width: 95%;
    }

    .loged_user {
        width: 50%;
    }

    .report .tiny {
        width: 30%;
    }

    .searchBar {
        width: 25%;
    }

    .mileForm .selector {
        width: 80%;
    }

    .mileForm input[type=text] {
        width: 80%;
    }

    .result-data {
        width: 80%;
    }

}

@media screen and (max-width: 320px) {
    .max-hours {
        left: 200px;
    }

    .mileForm input[type=date] {
        width: 80%;
    }

    .mileForm .selector {
        width: 95%;
    }

    .mileForm input[type=text] {
        width: 95%;
    }

    .title {
        padding-left: 35px;
    }
}

@media screen and (max-width: 280px) {
    .back {
        margin: 50px;
    }

    .mileRead {
        overflow: scroll;
    }

    .searchBar {
        width: 30%;
    }

    .mileForm input[type=date] {
        width: 90%;
    }
}