@import url('https://fonts.googleapis.com/css2?family=Ubuntu&display=swap');
@import url('https://db.onlinewebfonts.com/c/c81f9b4d38b44a93359f55811d0cb18d?family=MessinaSans-Regular');

:root {
    /* p25 */
    --accent-1: #ff674c; /*--pink: #FF0041; */
    --accent-2: #8aa282;
    --accent-3: #c7b5ed;
    --background: #f1eeee; /*--gray: #E0E1E3; */
    --bright: #fafafa;
    --dark: #333333; /*--black: #1A1818; */
}

body{
    text-align: center;
    font-family: 'MessinaSans-Regular';
    color: var(--dark);
    background-color: var(--background);
    font-size: 15pt;
    line-height: 1.5em;
    font-weight: 100;
    word-spacing: 0.07em;
    letter-spacing: 0.07em;
}

/* section/block definitions */
.block {
    width: 100%;
    padding-top: 0.8rem;
    padding-bottom: 0.8rem;
    margin-bottom: 0.2rem;    
}
.header-block {
    width: 100%;
    padding-top: 0px;
    padding-bottom: 40px;
    margin-bottom: 10px;    
}

/* headlines and sub headline text */
h1{
    text-transform: lowercase;
    letter-spacing: 0.015em;
    line-height: 1.5;
    font-weight: 100;
    font-size: 2.4rem;
    color: var(--accent-1);
    margin: 0;
}

p {
    margin-bottom: 1em;
}

/* links im text */
/* unvisited link */
a:link {
    text-decoration: underline;
    color: inherit;
}
/* visited link */
a:visited {
    text-decoration: underline;
    color: inherit;
}
/* mouse over link */
a:hover {
    text-decoration: underline;
    color: inherit;
}
/* selected link */
a:active {
    text-decoration: underline;
    color: inherit;
}

a.card-link {
    color: var(--accent-1);
}
.card .card-action a:not(.btn):not(.btn-large):not(.btn-floating):hover {
    color: var(--accent-1);
}
.card .card-action a:not(.btn):not(.btn-large):not(.btn-floating) {
    color: var(--accent-1);
    margin-right: 20px;
    transition: color .3s ease;
}

.icon {
    width: 24px;
    height: 24px;
}

.crm-label {
    font-size: smaller;
    padding: 2px;
    border-width: 1px;
    border-style: solid;
    -moz-border-radius: 10px;
    -webkit-border-radius: 10px;
    border-radius: 10px;
}

.crm-smaller, .smaller {
    font-size: smaller;
}

ul.crm-inline,
ul.crm-inline li {
    margin: 0;
    padding: 2px;
}

ul.crm-inline li {
    display: inline-block;
    /* For IE 7 */
    zoom: 1;
    display: inline;
}

footer {
    font-size: smaller;
}

.week-row {
    display: flex;
    margin-bottom: 0 !important;
}

.day-cell {
    border: var(--dark) solid thin;
    border-collapse: collapse;
    font-size: smaller;
    flex: 1;
    min-height: 8.3vw;
} 
.today-cell {
    border: var(--accent-1) solid 2px;
    border-collapse: collapse;
    font-size: smaller;
    flex: 1;
    min-height: 8.3vw;
}

a.btn {
    text-decoration: none;
}

div.usericon {
    color: white; 
    width: 1.8em;
    height: 1.8em;
    text-align:center;
    vertical-align:middle;
    line-height: 1.8em;    
    display:inline-block;
}

div.smallusericon {
    width: 1.6em;
    height: 1.6em;
    line-height: 1.6em;
    font-size: xx-small;
}
div.midusericon, div.midicon {
    width: 2.2em;
    height: 2.2em;
    line-height: 2.2em;
    font-size: xx-small;
}
i.midicon {
    font-size: small;
    line-height: 1.6em;
}

.card-content-side{
    font-size: smaller;
}

.label-chip {
    height: 18px;
    line-height: 18px;
    font-weight: bold;
    font-family: 'Ubuntu';
    font-size: small;
    margin: 2px;
    padding: 0 4px;
    overflow: hidden;
    white-space: nowrap;
    text-overflow: ellipsis;
}
.label-circle {
    height: 20px !important;
    width: 20px !important;
    margin: 0 0 0 -10px !important;
}

.crm-inline-list>li {
    /*white-space: nowrap;*/
    white-space: normal;
    min-width: 8vw;
    margin: 0 !important;
}

.task-content, .task-action {
    padding: 0.2em 0.2em !important;
}

.chip {
    margin-right: 0px !important;
}

.card {
    background-color: transparent;
    border: var(--accent-1) solid 1px;
    border-radius: 0 !important;
    border-collapse: collapse;
    padding: 1.5px;
}

.card .card-content {
    padding: 10px !important;
}
.card.smaller .card-content {
    height: 180px;
}
.card.smallest {
    height: 130px;
}
.card-content-split, .list-task {
    margin: 0.2em;
}
.project-card-list {
    padding: 0.1em !important;
}

.smallest-text {
    font-size: xx-small;
}

.smaller-text {
    font-size: smaller;
}

.bigger-text {
    font-size: x-large;
}
.biggest-text {
    font-size: xx-large;
}

.error-php {
    font-size: x-small !important;
    text-align: left !important;
    width: 500px !important;
}

.tooltip-card {
    position: fixed;
    top: 10px;
    left: 10px;
    z-index: 999;
    width: 700px;
}

.crmlist-note {
    height: 6rem;
}

table.crm-table-listing td {
    text-align: left;
    font-size: smaller;
    padding: 0px;
}

.numeric-cell {
    text-align: right;
}

th {
    background-color: var(--accent-2);
    color: var(--bright);
    top: 64px;
    position: sticky;
    z-index: 9;
}
th, td {
    padding: 5px;
}

.card.smaller {
    height: 250px;
    margin: 0 !important;
}

.badge-crmlist {
    padding: 0.25rem 0.5rem;
    margin: 0;
}

.sticky {
    position: sticky;
    z-index: 9;
    top: 64px;
}

.resolved {
    text-decoration: line-through;
    text-decoration-color: var(--accent-1);
}

.todo {
    cursor: pointer;
}

.modal {
    width: 98vw !important;
}

/* --------------------- FAB quicktrack and dropdown --------------- */

#modal-quick-timetrack {
    min-height: 90vh;
    max-height: 90vh;
}

.select-task {
    padding-left: 0.5rem;
    padding-right: 0.5rem;
    min-height: 38px !important;
}
span.select-task-info {
    display: inline !important;
    font-size: medium !important;
    padding: 0 !important;
    color: var(--dark) !important;
}
.select-starttime, .select-date {
    padding-left: 0.5rem;
    padding-right: 0.5rem;
    min-height: 28px !important;
}

/* -------------------------------- Format Blocks ---------------- */
/*
    all fore- and background colours needed.
    foreground: .ps-{colour-name}
    background: .ps-{colour-name}-text
*/
/* ps-black */
.ps-black, .black, .new.black.badge {
    background-color: var(--dark) !important;
}
.ps-black-text {
    color: var(--dark);
}

/* ps-accent-1 */
.ps-accent-1, .new.ps-accent-1.badge {
    background-color: var(--accent-1);
}
.ps-accent-1-text, .err, .error {
    color: var(--accent-1);
}

/* ps-accent-2 */
.ps-accent-2 {
    background-color: var(--accent-2);
}
.ps-accent-2-text {
    color: var(--accent-2);
}

/* ps-accent-3 */
.ps-accent-3 {
    background-color: var(--accent-3);
}
.ps-accent-3-text {
    color: var(--accent-3);
}

.ps-grid-2 {
    background-color: var(--bright);
}

/*forms helper */
label.error {
    width: 100%;
    text-align: right;
}
.input-field label {
    color: var(--dark);
    transform: translateY(-110%);
}
input:not([type]), input[type=text], input[type=password], input[type=email], input[type=url], input[type=time], input[type=date], input[type=datetime], input[type=datetime-local], input[type=tel], input[type=number], input[type=search], textarea.materialize-textarea {
    background-color: var(--bright) !important;
    color: var(--dark);
    font-size: large;
}

input:not([type]):focus:not([readonly]), input[type=text]:focus:not([readonly]), input[type=password]:focus:not([readonly]), input[type=email]:focus:not([readonly]), input[type=url]:focus:not([readonly]), input[type=time]:focus:not([readonly]), input[type=date]:focus:not([readonly]), input[type=datetime]:focus:not([readonly]), input[type=datetime-local]:focus:not([readonly]), input[type=tel]:focus:not([readonly]), input[type=number]:focus:not([readonly]), input[type=search]:focus:not([readonly]), textarea.materialize-textarea:focus:not([readonly]) {
    background-color: var(--bright) !important;
    border-bottom: 1px solid var(--accent-1);
    box-shadow: 0 1px 0 0 var(--accent-1);
}


.btn, .btn-flat {
    border: var(--accent-1) solid 1px;
    border-radius: 0;
    background-color: var(--background);
    color: var(--accent-1) !important;
}

.btn-floating:hover, .btn:hover, .btn-large:hover, .btn:focus, .btn-large:focus, .btn-floating:focus, .btn-flat:hover, .btn-flat:focus {
    background-color: var(--accent-1);
    color: var(--bright) !important;
}

.picker__date-display, .datepicker-date-display, .is-selected {
    background-color: var(--accent-1) !important;
}
.picker__weekday-display {
    background-color: var(--dark);
}

.datepicker-table {
    color: var(--dark);
}

.picker__close, .picker__today, .picker__day.picker__day--today, .datepicker-done, .datepicker-cancel, .is-today {
    color: var(--accent-1) !important;
}
.picker__day--selected, .picker__day--selected:hover, .picker--focused .picker__day--selected {
    background-color: var(--accent-1) !important;
}

.project-list {
    /*border: #FF0041 dashed thin;*/
    margin: .5em;
}

/* label underline focus color */
.input-field input[type=text]:focus {
    border-bottom: 1px solid var(--accent-1) !important;
    box-shadow: 0 1px 0 0 var(--accent-1) !important;
}
/* icon prefix focus color */
.input-field .prefix.active {
    color: var(--accent-1) !important;
}
::-webkit-input-placeholder {
    font-family: 'MessinaSans-Regular';
}

[type="radio"]:checked+span:after {
    background-color: var(--accent-1) !important;
    border: 2px solid var(--accent-1) !important;
}
[type="radio"]:not(:checked)+span, [type="radio"]:checked+span {
    color: var(--dark) !important;
}

/* -------------------------------- Navigation ------------------- */
#pslogo-material {
    margin-top: 2px;
    margin-bottom: 2px;
    width: 60px;
    height: 60px;
    color: var(--accent-1);
    /*
    border: 2px solid var(--background);
    border-radius: 30px;
    */ 
}

.nav-wrapper {
    background-color: var(--background);
    border: var(--accent-1) solid 1px;
}

/* navigation links */
a.navlink:visited, a.navlink:link {
    color: var(--background);
    text-decoration: none;
}
a.navlink:hover, a.navlink:active {
    color: var(--bright) !important;
    background-color: var(--accent-1);
    text-decoration: var(--accent-1) solid;
}
.navlink {
    color: var(--accent-1) !important;
    font-size: medium;
    text-transform: uppercase;
    text-decoration: none;
    font-weight: 700;
    padding: 0 0.4rem;
    --border: var(--accent-1) solid 1px;
    --border-collapse: collapse;
}
.navlink > .left {
    margin-right: 0.2rem;
}

#simple_query {
    background-color: var(--background);
}
#simple_query::-webkit-input-placeholder {
    font-family: 'Open Sans Condensed';
    color: var(--dark);
}

.celebrate {
    background-image: url("../img/celebrate.jpg");
    background-repeat: no-repeat;
    background-size: cover;
}

.card {
    box-shadow: none !important;
    -webkit-box-shadow: none !important;
}