@import url("https://img.silverservers.com/css/snowflake/midnight.css") only screen and (prefers-color-scheme: dark); /* Dark Mode Default */
@import url("https://img.silverservers.com/css/snowflake/winter.css") only screen and (prefers-color-scheme: light); /* Light Mode Default */
 
 /* ======================================================================= */
    /* global */

    *{
        box-sizing:border-box;
        font-family: var(--font_ptserif);
    }
    .green{
        background-color: #33cc33 !important;
        color: var(--text);
    }
    .blue{
        background-color: #33a6cc !important;
        color: var(--text);
    }
    .red{
        background-color: #cc3333 !important;
        color: var(--text);
    }
    .yellow{
        background-color: #ffcc00 !important;
        color: var(--text);
    }
    .green:hover{
        background-color: #66ff66 !important;
    }
    .blue:hover{
        background-color: #66ccff !important;
    }
    .red:hover{
        background-color: #ff6666 !important;
    }
    .yellow:hover{
        background-color: #ffd600 !important;
    }
    .center{
        text-align:center;
    }
    body{
        margin:0;
        min-width:320px;
        color: var(--text);
        font-size: var(--text_size);
        background: var(--secondary_bg);
        margin-top:50px;
    }
    p, h1, h2, h3, h4, h5, h6, ul, ol, li, a, button, input, textarea, select, option, label, form, table, tr, td, th, div, span{
        margin:0;
    }
    a{
        text-decoration:none;
        color: var(--text);
    }
    a:hover{
        text-decoration:underline;
    }
    a.link{
        color: var(--text);
    }
    form{
        display: inline;
        padding:0;
        margin:0;
    }
    form.flexform {
        display: flex;
        justify-content: space-between;
        align-content: center;
        flex-wrap: nowrap;
        flex-direction: row;
        align-items: center;
    }
    input, button, select {
        border: 1px solid #656565;
        padding: 10px 30px;
        margin: 10px;
        font-size: 1em;
        border-radius: 5px;
        display: inline-block;
        color: var(--text);
        background: var(--input);
        border-image: var(--secondary_bg) 1;
        box-shadow: var(--box_shadow);
        border-radius: var(--border-radius);
        cursor:pointer;
        vertical-align:middle;
    }
    
    input[type=submit], button {
        border:none;
        display: inline-block;
        background: var(--button);
        box-shadow: var(--box_shadow);
        border-radius: var(--border-radius);
        transition: background-color ease-in-out 0.2s;
        height:calc(1rem + 25px);
    }
    
    input[type=submit]:hover, button:hover {
        background: var(--element_accent);
        color: var(--text);
    }
    
    input[type=range] {
        padding: 0;
    }
    textarea{
        background: var(--input);
        color: var(--text);
    }
    .microphone{
        display: inline;
        border: none;
        cursor: pointer;
        padding:2px 10px;
        background-color: #33a6cc;
        margin:0;
    }
    .microphone.live{
        background-color: #ff6666;
    }
    div.buttonGroup :not(:first-child){
        border-top-left-radius: 0;
        border-bottom-left-radius: 0;
        padding-right:-30px;
        background: var(--button);
    }
    div.buttonGroup :not(:last-child){
        border-top-right-radius: 0;
        border-bottom-right-radius: 0;
    }
    div.buttonGroup > *{
        margin:0;
        font-size: initial;
    }
    div.buttonGroup{
        font-size:0;
        display:inline-block;
        vertical-align:middle;
    }
    div.buttonGroup > select{
        width:30px;
        font-size:0;
        padding:5px;
        height:calc(1rem + 25px);
        transition: background-color ease-in-out 0.2s;
        border:none;
        border-left:1px solid rgba(255, 255, 255, 0.3);
        background: var(--button);
    }
    option{
        all:initial !important;
        font-size:1rem !important;
        display:block !important;
        padding:5px !important;
        color:black !important;
        background-color:white !important;
    }

    .hosts{
        display: flex;
        flex-wrap: wrap;
        align-items: center;
    }

    .btn{
        border:none;
        background: var(--button);
        box-shadow: var(--box_shadow);
        border-radius: var(--border-radius);
        transition: background-color ease-in-out 0.2s;
        margin:5px;
        padding:20px 40px;
        text-decoration: none;
        display: inline-grid;
        place-items: center;
    }
    .btn:hover{
        background: var(--element_accent);
        color: var(--text);
        text-decoration: none;
    }
    .btn > *{
        margin:0;
        padding:0;
        text-decoration: none;
    }
    .btn > img{
        height: 100px;
        width: 100px;
        object-fit: contain;
        -webkit-filter: drop-shadow(0px 0px 5px rgba(0,0,0,0.5));
        filter: drop-shadow(0px 0px 5px rgba(0,0,0,0.5));
        transition: -webkit-filter ease-in-out 0.2s, transform ease-in-out 0.2s;
        transition: filter ease-in-out 0.2s, transform ease-in-out 0.2s;
    }
    .btn:hover > img{
        -webkit-filter: drop-shadow(0px 0px 10px rgba(0,0,0,0.5));
        filter: drop-shadow(0px 0px 10px rgba(0,0,0,0.5));
        transform: scale(1.3);
    }
    
    /* ======================================================================= */
        /* header */
    
    div.header div.timeblock {
        padding: 10px 30px;
        display: inline-grid; 
        grid-template-columns: auto 1fr 1fr; 
        grid-auto-rows: auto; 
        gap: 0px 0px; 
        grid-template-areas: 
            "logo running time"
            "logo buttons buttons"; 
    }
    
    div.header {
        width: 100%;
        border-bottom: 1px solid #000000;
    }
    div.header div.logo {
        grid-area: logo; 
        padding:5px 10px 5px 0;
        width: fit-content;
        overflow: hidden;
        display:grid;
        place-items: center;
        position:relative;
        padding-right:25px;
        margin-right:25px;
    }
    div.header div.logo .hourglass {
        position:absolute;
        bottom:0;
        right:0;
        width:50px;
        z-index:1;
        pointer-events:none;
    }
    div.header div.logo img {
        max-height: clamp(60px, 10vw, 100px);
        object-fit: contain;
    }
    div.header div.running {
        grid-area: running;
        align-self: end;
    }
    div.header div.running span{
        font-size: 3em;
        font-weight: bold;
    }
    div.header div.time {
        grid-area: time;
        align-self: end;
    }
    div.header div.time span:first-child{
        vertical-align:bottom;
        color: var(--input);
        display:inline-block;
        padding:2px 10px;
    }
    div.header div.time span:last-child{
        font-size: 1.5em;
        font-weight: bold;
        vertical-align:bottom;
        color: var(--text);
        display:inline-block;
    }
    div.header div.buttons {
        grid-area: buttons;
    }
    div.menu {
        position:fixed;
        top:0;
        left:0;
        width:100%;
        z-index:1;
        white-space: nowrap;
        display: flex;
        align-items: center;
        justify-content: space-evenly;
        background: var(--main_bg);
        box-shadow: var(--box_shadow);
        border-bottom: 1px solid #000000;
        backdrop-filter: blur(10px);
    }
    span.hours{
        font-size: 0.5em;
        font-weight: bold;
        vertical-align:bottom;
        color: var(--cta_color);
        display:inline-block;
        margin: 0;
        padding: 0;
    }
    div.menu ul {
        margin: 0;
        padding: 0;
        list-style-type: none;
    }
    div.menu ul li {
        display: inline-block;
        margin: 0;
        position: relative;
    }
    div.menu ul li a, div.menu ul li span {
        text-decoration: none;
        color: var(--text) !important;
        font-size: 1.2em;
        display:block;
        padding: 10px 20px;
        border: 1px solid transparent;
    }
    div.menu ul li:hover > a, div.menu ul li:hover > span{
        background: var(--element_colour) !important;
        border-left: 1px solid #000;
        border-right: 1px solid #000;
    }
    div.menu ul li ul li:hover > a, div.menu ul li ul li:hover > span{
        background: var(--element_colour) !important;
        border: 1px solid transparent;
    }
    div.menu ul li:hover > ul {
        display: block;
    }
    div.menu ul li ul {
        display: none;
        position: absolute;
        top: calc(1.3em + 24px);
        min-width: 10em;
        background: var(--main_bg);
        border: 1px solid #000;
        border-bottom:none;
        z-index: 1;
    }
    div.menu ul li ul ul {
        top: 0;
        left: calc(100% - 1px);
    }
    div.menu ul li ul ul ul {
        top: 0;
        left: calc(100% - 1px);
    }
    div.menu ul li ul li {
        display: block;
        border-bottom: 1px solid #000;
        margin: 0;
        padding: 0;
        backdrop-filter: blur(10px);
    }
    div.menu ul li ul li a {
        color: var(--text);
        padding: 10px 15px;
        font-size: 1em;
        display:block;
    }
    
    #mobile-menu {
        display: none;
    }

     /* ======================================================================= */
        /* DAY */
    
    div.container > div{
        border-top: 1px solid #000;
    }
    
    div.date {
        width:100%;
        padding:10px;
        display:grid;
        place-items:center;
        font-size: 3em;
        font-weight: bold;
        display:inine-block;
        background: var(--main_bg);
        box-shadow: var(--box_shadow);
        color: var(--text);
    }
    div.container {
        display: grid;
        grid-template-columns: 1fr 1fr 0.5fr 0.25fr;
        grid-auto-rows: auto;
        gap: 0px 0px;
        grid-auto-flow: row;
        background: var(--transparent_secondary_bg);
    }
    
    div.container div.client {
        padding:10px;
        cursor:pointer;
        display: flex;
        align-items: center;
        flex-wrap: wrap;
        position:relative;
        overflow:hidden;
    }
    
    div.container div.client p.notes{
        font-size: 0.8em;
        overflow: hidden; 
        width: 100%;
        margin:0;
        padding:0;
    }
    div.container div.client svg.icon{
        position:absolute;
        top:0;
        right:0;
        width:1.8em;
        height:1.8em;
        padding:5px;
    }
    div.container div.client svg.icon:hover{
        transform:scale(1.2);
        color: var(--text);
    }
    
    div.container div.client .event {
        width: 100%;
        height: 100%;
        font-size: 1.3em;
        font-weight: bold;
        font-style: italic;
    }
    
    div.container div.task {
        display: flex;
        align-items: center;
        border-left: 1px solid #000;
        cursor:pointer;
        flex-wrap: wrap;
    }
    div.container div.task > p{
        cursor:pointer;
        display: inline-block;
        color: var(--text);
        transition: background-color ease-in-out 0.2s;
        padding: 5px 10px;
        margin: 5px;
        border-radius: 5px;
        background: var(--button);
        white-space: nowrap;
    }
    
    div.container div.timer {
        display: grid;
        grid-auto-rows: auto;
        border-left: 1px solid #000;
        place-items: center;
        font-size: 1.5em;
        padding:10px;
        cursor:pointer;
    }
    
    div.container div.time {
        display: grid;
        grid-template-columns: 1fr;
        grid-template-rows: 1fr 1fr;
        gap: 0px 0px;
        border-left: 1px solid #000;
        cursor:pointer;
    }
    
    div.container div.start {
        border-bottom: 1px solid #000;
        padding:10px;
        display: flex;
        align-items: center;
    }
    div.container div.start p{
        border-left: 10px solid #c2f0c2;
        padding-left:3px;
    }
    
    div.container div.stop {
        padding:10px;
        display: flex;
        align-items: center;
    }
    div.container div.stop p{
        border-left: 10px solid #f0c2c2;
        padding-left:3px;
    }
    
    div.container div.taskTitle, div.container div.timeTitle{
        border-left: 1px solid #000;
    }
    div.container div.clientTitle, div.container div.taskTitle, div.container div.timeTitle {
        background: var(--main_bg);
        box-shadow: var(--box_shadow);
        color: var(--text);
        display:grid;
        place-items:center;
        font-size: 1.2em;
        font-weight: bold;
        padding:10px;
    }
    div.container div.timeTitle {
        grid-column: 3 / 5;
    }
    
    div.container div.alt{
        background-color: var(--transparent_main_bg);
    }
    
    div.container div.end{
        grid-column: 1 / 5;
        padding:0;
        margin:0;
    }
    
    div.container div.newClient{
        padding:10px;
        cursor:pointer;
    }
    div.container div.newTags{
        padding:10px;
        cursor:pointer;
    }
    div.container div.newTime{
        grid-column: 3 / 5;
        padding:10px;
        cursor:pointer;
    }
    div.container div.newClient > p{
        cursor:pointer;
        display: inline-block;
        color: var(--text);
        transition: background-color ease-in-out 0.2s;
        padding: 5px 10px;
        margin: 5px;
        border-radius: 5px;
        background: var(--button);
    }
    div.container div.bold{
        font-weight: bold;
    }
    
    div.container form.edit {
        grid-column: 1 / 5;
        border-top: 5px solid #248f24 !important;
        border-bottom: 5px solid #248f24 !important;
        background:var(--transparent_main_bg);
        color: var(--text);
        display: grid; 
        grid-template-columns: 1fr 1fr 1fr 1.125fr;
        grid-auto-rows: minmax(100px, auto);
        gap: 0px 0px; 
        grid-template-areas: 
            "client tagdesc tagsearch start"
            "description tags tags stop"
            "description tags tags buttons"
    }
    div.container form.edit .clientSelect { 
        grid-area: client; 
        padding:10px;
        display:grid;
        place-items:center;
        border-right: 1px solid #000;
    }
    div.container form.edit .clientSelect select{
        width:100%;
        padding:10px;
    }
    div.container form.edit .description { 
        grid-area: description; 
        padding:10px;
        border-top: 1px solid #000;
        border-right: 1px solid #000;
    }
    div.container form.edit .description textarea{
        width:100%;
        resize: vertical;
        height:100px;
        min-height:100px;
    }
    div.container form.edit .start { 
        grid-area: start; 
        border-left: 1px solid #000;
        display: flex;
        align-items: center;
        justify-content: space-around;
        border-bottom: 1px solid #000;
    }
    div.container form.edit .stop { 
        grid-area: stop; 
        border-left: 1px solid #000;
        display: flex;
        align-items: center;
        justify-content: space-around;
    }
    div.container form.edit .tags { 
        grid-area: tagsearch; 
        padding:10px;
        display:flex;
        align-items:center;
    }
    div.container form.edit .buttons { 
        grid-area: buttons; 
        border-top: 1px solid #000;
        border-left: 1px solid #000;
        display: flex;
        align-items: center;
        justify-content: space-around;
    }
    div.container form.edit .tag{
        cursor:pointer;
        display: inline-block;
        color: var(--text);
        transition: background-color ease-in-out 0.2s;
        padding: 5px 10px;
        margin: 5px;
        border-radius: 5px;
        background: var(--input) !important;
    }
    div.container form.edit .tag:hover{
        background: var(--element_colour) !important
    }
    div.container form.edit .tag-list{
        grid-area: tags; 
        display: flex;
        flex-wrap: wrap;
        align-items: center;
        justify-content: space-around;
    }
    div.container form.edit .tagdesc{
        grid-area: tagdesc;
        padding:10px;
        display:grid;
        place-items:center;
    }
    
    /* ======================================================================= */
        /* CALENDAR */
    
    .calendar{
        display:grid;
        grid-template-columns: 1fr 1fr 1fr 1fr 1fr 1fr 1fr;
        grid-gap: 1px;
        background:var(--main_bg);
        color: var(--text);
        padding: 10px;
        grid-column: 1;
    }
    .calendar .monthName{
        grid-column: 2 / 7;
        grid-row: 1;
        color: var(--text);
        text-align: center;
        text-decoration:none;
        font-size: 1.5em;
    }
    .calendar .monthNav{
        font-weight: bold;
        text-align: right;
        text-decoration:none;
        color: var(--text);
        font-size: 1em;
    }
    .calendar .monthNav:nth-child(1){
        text-align: left;
    }
    .calendar .monthNav:hover, .calendar .monthName:hover{
        text-decoration:underline;
    }
    .calendar .monthHeader{
        padding: 5px;
    }
    .calendar .calendarDayName{
        background: var(--input);
        border: 1px solid rgba(0, 0, 0, 0.8);
        padding: 5px;
        text-align: center;
        font-size: 1.5em;
        border-radius:3px;
    }
    .calendar .calendarDay{
        background: var(--input);
        color: var(--text);
        border: 1px solid #000;
        padding: 5px;
        aspect-ratio: 3/2;
        overflow:hidden;
        position:relative;
        text-decoration:none;
        color:black;
        transition: all 0.2s;
        border-radius:3px;
    }
    .calendar .calendarDay:hover{
        transform: scale(1.05);
        z-index:1;
    }
    .calendar .calendarDay .calendarDayNumber{
        font-weight: bold;
        font-size: 1.5em;
        position:absolute;
        top:5;
        left:5;
        background: var(--input);
        color: var(--text);
        border-radius:3px;
    }
    .calendar .calendarDayPlaceholder{
        background: var(--v_gradient);
        color: var(--text);
    }
    .calendar .calendarDayPlaceholder .calendarDayNumber{
        background: var(--v_gradient);
        color: var(--text);
    }
    .calendar .calendarDayHoliday{
        font-weight: bold;
        font-size: 1em;
        position:absolute;
        top:5px;
        left:2.5em;
        right:0;
        text-align: center;
        color: var(--transparent_v_gradient);
    }
    .calendar .calendarDay .calendarDayList{
        max-height: 100%;
        overflow-y: auto;
        margin:0;
        list-style-type: none;
        padding: 5px;
        padding-top:1.6em;
    }
    .calendar .calendarDay .calendarDayList li{
        text-overflow: ellipsis;
        white-space: nowrap;
        overflow: hidden;
    }
    .calendar .today{
        border: 3px solid red;
    }
    .calendar .weekend .calendarDayNumber{
        color: red;
    }
    .calendar .holiday .calendarDayNumber{
        animation: colorRotate 2s linear 0s infinite;
        text-shadow: -1px -1px 0 #000, 1px -1px 0 #000, -1px 1px 0 #000, 1px 1px 0 #000;
    }
    @keyframes colorRotate {
        0%   {color: #09F63F;}
        25%  {color: #7398fa;}
        50%  {color: #F609C0;}
        75%  {color: #F6B609;}
        100% {color: #09F63F;}
    }
    
    /* fancy scrollbars */
    .calendar .calendarDay .calendarDayList::-webkit-scrollbar {
        width: 10px;
    }
    .calendar .calendarDay .calendarDayList::-webkit-scrollbar-track {
        background: transparent;
    }   
    .calendar .calendarDay .calendarDayList::-webkit-scrollbar-thumb {
        background: var(--transparent_element_colour);
        border-radius: 5px;
    }
    .calendar .calendarDay .calendarDayList::-webkit-scrollbar-thumb:hover {
        background: var(--transparent_h_gradient);
    }
    
    .months{
        text-align:center;
    }
    .months a.month {
        border:none;
        display: inline-grid;
        background: var(--main_bg);
        color: var(--text);
        transition: background-color ease-in-out 0.2s;
        height:calc(1rem + 25px);
        width:calc(10% - 10px);
        place-items: center;
        margin:5px;
    }
    .months a.month:hover {
        background: var(--element_accent);
        color: var(--text);
        text-decoration: none;
    }
    
    /* ======================================================================= */
        /* REPORTS */
    
    div.reports{
        padding:20px;
    }
    div.reports a{
        color: #33a6cc;
    }
    div.reports a:hover{
        color: #66ccff;
    }
    
    /* ======================================================================= */
        /* TAGS */
    
    .tagTable{
        display: grid;
        grid-template-columns: 1fr 1fr 1fr 1fr 1fr;
        grid-auto-rows: auto;
        gap: 0px 0px;
        background: var(--transparent_secondary_bg);
    }
    .tagTable div.title {
        background: var(--main_bg);
        font-weight: bold;
        display: grid;
        place-items: center;
        border-top: none;
    }
    .tagTable>div {
        border-top: 1px solid #000;
        padding: 10px;
        display: flex;
        align-items: center;
    }
    .tagTable div.endTag {
        margin: 0;
        padding: 0;
    }
    .tagTable div.billing{
        border-left: 1px solid #000;
    }
    
    .tagTable>div:not(.Title) {
        cursor: pointer;
    }
    
    .tagTable div.alt {
        background: var(--transparent_main_bg);
    }
    .tagTable form.edit {
        border-top: 5px solid #248f24 !important;
        border-bottom: 5px solid #248f24 !important;
        grid-column: 1 / 6;
        display: grid;
        background: var(--transparent_main_bg);
        grid-auto-columns: 1fr;
        grid-template-columns: 1fr 1fr;
        grid-auto-rows: auto;
        gap: 0px 0px;
        grid-template-areas:
            "display billing"
            "project buttons";
    }
    
    .tagTable form.edit>div {
        border-top: 1px solid #000;
        padding: 10px;
    }
    
    .tagTable form.edit .billing {
        grid-area: billing;
    }
    
    .tagTable form.edit .display {
        grid-area: display;
    }
    
    .tagTable form.edit .buttons {
        grid-area: buttons;
    }
    
    .tagTable div.newTag > p{
        cursor:pointer;
        display: inline-block;
        color: var(--text);
        transition: background-color ease-in-out 0.2s;
        padding: 5px 10px;
        margin: 5px;
        border-radius: 5px;
        background: var(--main_bg);
    }
    
    /* ======================================================================= */
        /* USERS */
    
    .userTable{
        display: grid;
        grid-template-columns: 1fr 1fr 1fr 1fr 1fr 1fr 1fr;
        grid-auto-rows: auto;
        gap: 0px 0px;
        background: var(--transparent_secondary_bg);
    }
    .userTable div.title {
        background: var(--main_bg);
        font-weight: bold;
        display: grid;
        place-items: center;
    }
    .userTable>div {
        border-top: 1px solid #000;
        padding: 10px;
        display: flex;
        align-items: center;
    }
    .userTable div.endUser {
        margin: 0;
        padding: 0;
    }
    
    .userTable .tasks{
        position:relative;
    }
    
    .userTable svg.icon{
        position:absolute;
        top:0;
        right:0;
        width:1.8em;
        height:1.8em;
        padding:5px;
    }
    .userTable svg.icon:hover{
        transform:scale(1.2);
        color: var(--text);
    }
    
    .userTable div:not(.display):not(.noline) {
        border-left: 1px solid #000;
        display: grid;
        place-items: center;
    }
    .userTable .title{
        border-top: none;
    }
    .userTable>div:not(.Title) {
        cursor: pointer;
    }
    
    .userTable div.alt {
        background: var(--transparent_main_bg);
    }
    .userTable form.edit {
        border-top: 5px solid #248f24 !important;
        border-bottom: 5px solid #248f24 !important;
        grid-column: 1 / 8;
        display: grid;
        grid-auto-columns: 1fr;
        background: var(--transparent_main_bg);
        grid-template-columns: 1fr 1fr 1fr 1fr 1fr 1fr 1fr 1fr;
        grid-auto-rows: auto;
        gap: 0px 0px;
        grid-template-areas:
            "display clients tags users tasks lockout active reports"
            "password password password password password password password password"
            "buttons buttons buttons buttons buttons buttons buttons buttons";
    }
    
    .userTable form.edit>div {
        border-top: 1px solid #000;
        padding: 10px;
    }
    
    .userTable form.edit .display {
        grid-area: display;
    }
    .userTable form.edit .clients {
        grid-area: clients;
    }
    .userTable form.edit .tags {
        grid-area: tags;
    }
    .userTable form.edit .users {
        grid-area: users;
    }
    .userTable form.edit .tasks {
        grid-area: tasks;
    }
    .userTable form.edit .reports {
        grid-area: reports;
    }
    .userTable form.edit .lockout {
        grid-area: lockout;
    }
    .userTable form.edit .password {
        grid-area: password;
    }
    .userTable form.edit .password input[type=password] {
        width: 100%;
        max-width: 320px;
        padding: 8px 12px;
        margin-top: 6px;
        box-sizing: border-box;
    }
    .userTable form.edit .password p {
        margin: 0;
        font-weight: bold;
    }

    .userTable form.edit .buttons {
        grid-area: buttons;
        border-top: 1px solid #000;
        display: flex;
        align-items: center;
    }
    
    .userTable div.newTag > p{
        cursor:pointer;
        display: inline-block;
        color: var(--text);
        transition: background-color ease-in-out 0.2s;
        padding: 5px 10px;
        margin: 5px;
        border-radius: 5px;
        background-color: var(--main_bg);
    }
    
    .userCodes{
        display: grid;
        grid-template-columns: 1fr 1fr;
        grid-auto-rows: auto;
        gap: 0px 0px;
        background: var(--transparent_secondary_bg);
    }
    .userCodes div.title {
        background: var(--main_bg);
        font-weight: bold;
        display: grid;
        place-items: center;
        border-top: none;
    }
    .userCodes>div {
        border-top: 1px solid #000;
        padding: 10px;
        display: flex;
        align-items: center;
    }
    .userCodes>div:not(.Title) {
        cursor: pointer;
    }
    
    .userCodes div.alt {
        background: var(--transparent_main_bg);
    }
    .userCodes form.edit {
        border-top: 5px solid #248f24 !important;
        border-bottom: 5px solid #248f24 !important;
        grid-column: 1 / 3;
        display: grid;
        grid-auto-columns: 1fr;
        background: var(--transparent_main_bg);
        grid-template-columns: 1fr 1fr 1fr;
        grid-auto-rows: auto;
        gap: 0px 0px;
        grid-template-areas:
            "code expires buttons";
    }
    
    .userCodes form.edit>div {
        border-top: 1px solid #000;
        padding: 10px;
    }
    
    .userCodes form.edit .code {
        grid-area: code;
    }
    .userCodes form.edit .expires {
        grid-area: expires;
    }
    
    .userCodes form.edit .buttons {
        grid-area: buttons;
        border-top: 1px solid #000;
        display: flex;
        align-items: center;
    }
    
    .userCodes div.newTag > p{
        cursor:pointer;
        display: inline-block;
        color: var(--text);
        transition: background-color ease-in-out 0.2s;
        padding: 5px 10px;
        margin: 5px;
        border-radius: 5px;
        background-color: var(--main_bg);
    }

    /* ======================================================================= */
        /* CLIENTS */
    
    .clientTable {
        display: grid;
        grid-auto-columns: 1fr;
        grid-template-columns: 1fr 1fr 1fr 1fr 1fr;
        grid-auto-rows: auto;
        gap: 0px 0px;
        background: var(--transparent_secondary_bg);
    }
    
    .clientTable>div {
        border-top: 1px solid #000;
        padding: 10px;
        display: flex;
        align-items: center;
    }
    
    .clientTable div:not(.name):not(.noline) {
        border-left: 1px solid #000;
    }
    
    .clientTable div.title {
        border-top: none;
    }
    
    .clientTable>div:not(.Title) {
        cursor: pointer;
    }
    
    .clientTable div.contact {
        display:block;
    }
    .clientTable div.contact p{
        display:block;
    }
    
    .clientTable div.alt {
        background: var(--transparent_main_bg);
    }
    
    .clientTable div.inactive {
        text-decoration: line-through;
        color: red;
    }
    
    .clientTable div.title {
        background: var(--main_bg);
        font-weight: bold;
        display: grid;
        place-items: center;
    }
    
    .clientTable div.tags {
        display: flex;
        align-items: center;
        cursor: pointer;
    }
    .clientTable div.endClient {
        margin: 0;
        padding: 0;
    }
    
    .clientTable p.tag {
        cursor: pointer;
        display: inline-block;
        color: var(--text);
        transition: background-color ease-in-out 0.2s;
        padding: 5px 10px;
        margin: 5px;
        border-radius: 5px;
        background-color: var(--main_bg);
        white-space: nowrap;
    }
    
    .clientTable form.edit {
        border-top: 5px solid #248f24 !important;
        border-bottom: 5px solid #248f24 !important;
        grid-column: 1 / 6;
        display: grid;
        background: var(--transparent_main_bg);
        grid-auto-columns: 1fr;
        grid-template-columns: 1fr 1fr 1fr 1fr 1fr;
        grid-auto-rows: auto;
        gap: 0px 0px;
        grid-template-areas:
            "name contact website tags comments"
            "active buttons buttons buttons buttons";
    }
    
    .clientTable form.edit>div {
        padding: 10px;
    }
    
    .clientTable form.edit .name {
        grid-area: name;
    }
    
    .clientTable form.edit .contact {
        grid-area: contact;
    }
    
    .clientTable form.edit .tagSelect {
        grid-area: tags;
    }
    
    .clientTable form.edit .website {
        grid-area: website;
    }
    
    .clientTable form.edit .comments {
        grid-area: comments;
    }
    
    .clientTable form.edit .active {
        grid-area: active;
        border-left:none;
        border-top: 1px solid #000;
    }

    .clientTable form.edit .tags {
        display:flex;
        flex-direction: column;
        text-align:left !important;
    }
    
    .clientTable form.edit .buttons {
        grid-area: buttons;
        border-top: 1px solid #000;
    }
    
    .clientTable div.newClient > p{
        cursor:pointer;
        display: inline-block;
        color: var(--text);
        transition: background-color ease-in-out 0.2s;
        padding: 5px 10px;
        margin: 5px;
        border-radius: 5px;
        background: var(--main_bg);
    }
    
    /* ======================================================================= */
        /* TASKS */
    
    .taskTable {
        display: grid;
        grid-auto-columns: 1fr;
        grid-template-columns: 1fr 1fr 1fr 1fr;
        grid-auto-rows: auto;
        gap: 0px 0px;
        background: var(--transparent_secondary_bg);
    }
    
    .taskTable>div {
        border-top: 1px solid #000;
        padding: 10px;
        display: flex;
        align-items: center;
    }
    
    .taskTable div:not(.name):not(.noline) {
        border-left: 1px solid #000;
    }
    
    .taskTable>div:not(.Title) {
        cursor: pointer;
    }
    
    .taskTable .newTask{
        border-top: none;
    }
    
    .taskTable div.newTask > p{
        cursor:pointer;
        display: inline-block;
        color: var(--text);
        transition: background-color ease-in-out 0.2s;
        padding: 5px 10px;
        margin: 5px;
        border-radius: 5px;
        background: var(--main_bg);
    }
    .taskTable div.alt {
        background: var(--transparent_main_bg);
    }
    
    .taskTable div.title {
        background: var(--main_bg);
        font-weight: bold;
        display: grid;
        place-items: center;
    }
    
    .taskTable div.tags {
        display: flex;
        align-items: center;
        cursor: pointer;
    }
    .taskTable div.endTask {
        margin: 0;
        padding: 0;
    }
    
    .taskTable p.tag {
        cursor: pointer;
        display: inline-block;
        color: var(--text);
        transition: background-color ease-in-out 0.2s;
        padding: 5px 10px;
        margin: 5px;
        border-radius: 5px;
        background: var(--main_bg);
        white-space: nowrap;
    }
    
    .taskTable form.edit {
        border-top: 5px solid #248f24 !important;
        border-bottom: 5px solid #248f24 !important;
        grid-column: 1 / 5;
        background: var(--transparent_main_bg);
        display: grid;
        grid-auto-columns: 1fr;
        grid-template-columns: 1fr 1fr 1fr 1fr;
        grid-auto-rows: auto;
        gap: 0px 0px;
        grid-template-areas:
            "display tagdesc tagselect description"
            "client tags tags buttons";
    }
    
    .taskTable form.edit>div {
        padding: 10px;
    }
    
    .taskTable form.edit .display {
        grid-area: display;
        border-left:none;
    }
    
    .taskTable form.edit .client {
        grid-area: client;
        border-top: 1px solid #000;
        border-left:none;
    }
    
    .taskTable form.edit .tagdesc {
        grid-area: tagdesc;
    }
    .taskTable form.edit .tagselect {
        grid-area: tagselect;
        border-left:none;
    }
    .taskTable form.edit .tags {
        grid-area: tags;
    }
    
    .taskTable form.edit div.tags > p{
        cursor:pointer;
        display: inline-block;
        color: var(--text);
        transition: background-color ease-in-out 0.2s;
        padding: 5px 10px;
        margin: 5px;
        border-radius: 5px;
        background: var(--main_bg);
        white-space: nowrap;
    }
    
    .taskTable form.edit .description {
        grid-area: description;
    }
    
    .taskTable form.edit .buttons {
        grid-area: buttons;
        border-top: 1px solid #000;
    }
    
    .taskTable div.newClient > p{
        cursor:pointer;
        display: inline-block;
        color: var(--text);
        transition: background-color ease-in-out 0.2s;
        padding: 5px 10px;
        margin: 5px;
        border-radius: 5px;
        background: var(--main_bg);
    }
    
    .taskTable form.edit .tag{
        cursor:pointer;
        display: inline-block;
        color: var(--text);
        transition: background-color ease-in-out 0.2s;
        padding: 5px 10px;
        margin: 5px;
        border-radius: 5px;
        background: var(--main_bg);
    }
    
    /* ======================================================================= */
        /* EVENTS */
    
        div.eventcontainer > div{
            border-top: 1px solid #000;
        }
        div.eventcontainer {
            display: grid;
            grid-template-columns: 1fr 1fr 0.5fr;
            grid-auto-rows: auto;
            gap: 0px 0px;
            grid-auto-flow: row;
            background: var(--transparent_secondary_bg);
        }
        
        div.eventcontainer div.event {
            padding:10px;
            cursor:pointer;
            display: flex;
            align-items: center;
            flex-wrap: wrap;
            position:relative;
            overflow:hidden;
        }
    
        div.eventcontainer div.details {
            display: flex;
            align-items: center;
            border-left: 1px solid #000;
            cursor:pointer;
            flex-wrap: wrap;
        }
        
        div.eventcontainer div.time {
            display: grid;
            grid-template-columns: 1fr;
            grid-template-rows: 1fr 1fr;
            gap: 0px 0px;
            border-left: 1px solid #000;
            cursor:pointer;
        }
        
        div.eventcontainer div.detailsTitle, div.eventcontainer div.timeTitle{
            border-left: 1px solid #000;
        }
        div.eventcontainer div.eventTitle, div.eventcontainer div.detailsTitle, div.eventcontainer div.timeTitle {
            background: var(--main_bg);
            display:grid;
            place-items:center;
            font-size: 1.2em;
            font-weight: bold;
            padding:10px;
        }
        
        div.eventcontainer div.alt{
            background: var(--transparent_main_bg);
        }
        
        div.eventcontainer div.end{
            grid-column: 1 / 4;
            padding:0;
            margin:0;
        }
        
        div.eventcontainer div.newEvent{
            padding:10px;
            cursor:pointer;
        }
        div.eventcontainer div.newdetails{
            padding:10px;
            cursor:pointer;
        }
        div.eventcontainer div.newTime{
            padding:10px;
            cursor:pointer;
        }
        div.eventcontainer div.newEvent > p{
            cursor:pointer;
            display: inline-block;
            transition: background-color ease-in-out 0.2s;
            padding: 5px 10px;
            margin: 5px;
            border-radius: 5px;
            background: var(--main_bg);
        }
        
        div.eventcontainer form.edit {
            grid-column: 1 / 4;
            border-top: 5px solid #248f24 !important;
            border-bottom: 5px solid #248f24 !important;
            background: var(--transparent_main_bg);
            display: grid; 
            grid-template-columns: 1fr 1fr 1fr 1.125fr;
            grid-auto-rows: minmax(100px, auto);
            gap: 0px 0px; 
            grid-template-areas: 
                "event details time users buttons"
        }
        div.eventcontainer form.edit .event { 
            grid-area: event; 
            padding:10px;
            display:grid;
            place-items:center;
        }
        div.eventcontainer form.edit .details { 
            grid-area: details; 
            padding:10px;
            border-left: 1px solid #000;
        }
        div.eventcontainer form.edit .details textarea{
            width:100%;
            resize: vertical;
            height:100px;
            min-height:100px;
        }
        div.eventcontainer form.edit .time { 
            grid-area: time; 
            display: flex;
            align-items: center;
            justify-content: space-around;
            border-left: 1px solid #000;
        }
        div.eventcontainer form.edit .users { 
            grid-area: users; 
            border-left: 1px solid #000;
        }
        div.eventcontainer form.edit .buttons { 
            grid-area: buttons; 
            display: flex;
            align-items: center;
            justify-content: space-around;
            border-left: 1px solid #000;
        }