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

.invisible {
  display: none;
}

/* Load Fonts */
@font-face {
  font-family: 'SourceSansPro';
  font-display: swap;
  src: url('../../files/projects-theme/fonts/SourceSansPro-Regular.ttf');
}

@font-face {
  font-family: 'SourceSansProBold';
  font-display: swap;
  src: url('../../files/projects-theme/fonts/SourceSansPro-Bold.ttf');
}

@font-face {
  font-family: 'FontAwesomeSolid';
  font-display: swap;
  src: url('../../files/projects-theme/fonts/fa-solid-900.woff');
}

body {
  font-family: 'SourceSansPro', Arial;
  font-size: 16px;
  color: #FFFFFF;
  background-color: #275C6B;
}

h1, h2, h3, h4, h5, h6 {
  font-family: 'SourceSansProBold', Arial;
  text-transform: uppercase;
}

p {
  font-family: 'SourceSansPro', Arial;
}

p.fa {
  font-family: 'FontAwesomeSolid';
}


/**
 Login Form
*/
.loginblock {
    position: fixed;
    display: flex;
    flex-direction: column;
    top: 50%;
    left: 50%;
    align-items: center;
    transform: translateX(-50%) translateY(-50%);
    justify-content: center;
}

.loginblock .ce_image {
    margin-bottom: 3rem;
}

.loginblock .ce_image img {
    width: 400px;
    height: auto;
}

.loginblock .formbody {
    width: 400px;
}

.widget {
    display: block;
    margin-bottom: 1rem;
}

.widget-checkbox label {
    vertical-align: middle;
}

.loginblock .widget label {
    display: none;
}

input {
    -webkit-appearance: none;
    -moz-appearance: none;
    width: 100%;
    appearance: none;
    padding: 0.5rem;
    border: 1px solid #CCCCCC;
    border-radius: 0;
    outline: none;
    font-size: 1rem;
    font-family: 'SourceSansPro', Arial;
    color: #666666;
    background-color: #FFFFFF;
    box-sizing: border-box;
    resize: none;
}

input[type=checkbox] {
    border: 1px solid #CCCCCC;
    width: 25px;
    height: 25px;
    background-color: #FFFFFF;
    float: left;
    margin-top: 3px;
    margin-right: 10px;
    vertical-align: bottom;
}

input[type="checkbox"]:checked {
    background-image: url(../../files/projects-theme/img/check.png);
    background-size: contain;
}

input[type="checkbox"]+label::before {
    vertical-align: bottom;
}

button[type=submit]{
    border: 2px solid #F89235;
    color: #FFFFFF;
    background-color: #F89235;
    font-family: 'SourceSansProBold', Arial;
    font-size: 1.2rem;
    text-transform: uppercase;
    width: 100%;
    line-height: 2rem;
    cursor: pointer;
    padding: 0.5rem 1rem;
    transition: background-color 0.5s, color 0.5s;
}

button[type=submit]:hover {
    color: #F89235;
    background-color: #334A52;
}
/**
 Project listing
*/
.ce_projects {
    padding: 7.0rem 3.4rem 3.4rem 3.4rem;
}

.ce_projects .project,
.ce_projects .legend {
    color: #000000;
    background-color: #EEEEEE;
    margin-bottom: 1rem;
    overflow: hidden;
    box-shadow: 0px 0px 10px #000000;
}

/* Filter Menu */
.ce_projects .controlpanel {
    position: absolute;
    top: 0;
    left: 0;
    margin-bottom: 3.4rem;
    padding: 0 3.4rem;
}

.ce_projects .controlpanel ul {
    display: flex;
    list-style-type: none;
    align-items: flex-start;
}

.ce_projects .controlpanel li {
    position: relative;
    margin-right: 1rem;
    padding: 0.5rem 1.4rem;
    background-color: #1C3C49;
    border-radius: 0 0 5px 5px;
    box-shadow: 0px 0px 10px #000000;
    transition: padding 0.35s;
}

.ce_projects .controlpanel li.new {
    background-color: #F79234;
    cursor: pointer;
}

.ce_projects .controlpanel li.active {
    padding: 1rem 1.4rem;
}

.ce_projects .controlpanel li:hover {
    padding: 1.25rem 1.4rem
}

.ce_projects .controlpanel a {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    cursor: pointer;
}

.ce_projects .controlpanel span {
    font-family: 'SourceSansProBold';
    text-transform: uppercase;
}


/* Dock Legend to Top */
.ce_projects .legend {
    position: sticky;
    top: 0;
    z-index: 9;
    border-bottom: 1px solid #275C6B;
    border-radius: 0px 0px 5px 5px;
}

.ce_projects .project {
    border-radius: 5px;
}

.ce_projects .project.hide {
  display: none;
}

.ce_projects .project.stalled .data.product{
    background-color: #ecd424;
}

.ce_projects .project.sleep {
    background-color: #1f263b;
    color: #FFFFFF;
}

.ce_projects .project.complete {
    background-color: #A4DD7B;
}

.ce_projects .project > .inside,
.ce_projects .legend > .inside {
    display: flex;
    justify-content: space-between;
    align-items: stretch;
}

.ce_projects .legend > .inside {
    justify-content: center;
}

.ce_projects .legend .inside > div {
    display: flex;
    align-items: center;
    justify-content: center;
    text-align: center;
    padding: 1rem;
}

.ce_projects .legend .label {
    font-family: 'FontAwesomeSolid';
    font-size: 1.7rem;
    margin-right: 0.5rem;
}

.ce_projects .legend h4 {
    text-align: center;
}

/* Legend Searchbar */
.ce_projects .legend form {
  background-color: #EEEEEE;
  padding: 0.2rem;
  box-sizing: border-box;
}

.ce_projects .legend input {
  background-color: #FFFFFF;
}
/**
 Color Highlight Status
*/

.ce_projects .project .data.finished {
    background-color: #A4DD7B;
}

.ce_projects .project .data.active {
    background-color: #96AFB8;
}

.ce_projects .project .data.stalled {
    background-color: #ecd424;
}

.ce_projects .project .data.locked {
    background-image: linear-gradient(45deg, #275c6b 25%, #1c3c49 25%, #1c3c49 50%, #275c6b 50%, #275c6b 75%, #1c3c49 75%, #1c3c49 100%);
    background-size: 56.57px 56.57px;
}


.ce_projects .project > .inside .data,
.ce_projects .legend > .inside > div {
    width: 10%;
}

.ce_projects .data {
    position: relative;
    display: flex;
    align-items: center;
    border-left: 2px dashed #EEEEEE;
    overflow: hidden;
}

.ce_projects .data.product {
    border-left: none;
}

.ce_projects .productdata {
    flex-direction: column;
    align-items: flex-start;
}

.ce_projects .data .inside,
.ce_projects .legend .inside {
    display: flex;
    flex-direction: row;
    align-items: center;
    justify-content: center;
    width: 100%;
}

.ce_projects .data.product .inside {
    flex-direction: column;
    text-align: center;
}

.ce_projects .data .inside {
    padding: 0.5rem 0.1rem;
}

.ce_projects .data .info {
    width: 70%;
    text-align: center;
    word-break: break-word;
}

/**
 Icons
 */


.ce_projects h3.priority:before,
.ce_projects h3.priority:after {
    content: '\f005';
    display: inline-block;
    font-family: 'FontAwesomeSolid';
    font-size: 1rem;
}

.ce_projects h3.priority:before {
    margin-right: 0.25rem;
}

.ce_projects h3.priority:after {
    margin-left: 0.25rem;
}

.ce_projects .legend .note {
    font-size: 0.8rem;
}

.ce_projects .legend .info {
    font-size: 0.9rem;
}

.ce_projects .editor {
    width: 30px;
    height: 30px;
    font-size: 1rem;
    border: 3px solid #000000;
    font-family: 'SourceSansProBold';
    border-radius: 100%;
    display: flex;
    align-items: center;
    justify-content: center;
    box-shadow: 0px 0px 10px #000000;
    margin: 0 auto 0.2rem auto;
}

/* Hover-Controls */
.controls {
    position: absolute;
    display: flex;
    width: 100%;
    height: 100%;
    top: 100%;
    left: 0;
    transform: translateY(0);
}

.project .data:hover .controls {
    transform: translateY(-100%);
}

.fabutton {
    position: relative;
    width: 100%;
    height: 100%;
    justify-content: center;
    align-items: center;
    background-color: #CCCCCC;
    cursor: pointer;
}

.fabutton input,
.fabutton {
    height: 100%;
    color: #FFFFFF;
    font-family: 'FontAwesomeSolid';
    font-size: 2rem;
    background-color: transparent;
    border: none;
    cursor: pointer;
    transition: font-size 0.2s;
}

.fabutton {
    display: flex;
    justify-content: center;
    align-items: center;
}

.fabutton p {
  font-family: 'FontAwesomeSolid';
  color: #FFFFFF;
}

.fabutton:hover input,
.fabutton:hover {
    font-size: 2.5rem;
}

.fabutton.delete,
.fabutton.lock {
    background-color: #C01414;
}

.fabutton.unlock {
    background-color: #4EBF85;
}

.fabutton.add {
    background-color: #00C5A6;
}

.fabutton.stall {
    background-color: #ecd424;
}

.fabutton.finish {
    background-color: #7bde34;
}

.fabutton.note {
    background-color: #f79234;
}

.fabutton.delivery {
    background-color: #8E6376;
}

.fabutton.priority {
    background-color: #F89235;
}

.fabutton.settings {
    background-color: #F89235;
}





/* Window for new Project */
.newproject,
.editdelivery,
.editnote,
.editsettings {
    position: fixed;
    max-width: 500px;
    width: 100%;
    top: 110%;
    left: 50%;
    background-color: #001017;
    transform: translateX(-50%) translateY(0%);
    transition: transform 0.2s, top 0.2s;
    box-shadow: 0px 0px 10px #000000;
    padding: 1.7rem;
    z-index: 99;
}

.newproject.active,
.editdelivery.active,
.editnote.active,
.editsettings.active {
    top: 50%;
    transform: translateX(-50%) translateY(-50%);
}

.newproject .inside,
.editdelivery .inside,
.editnote .inside,
.editsettings .inside {
    position: relative;
    display: flex;
    height: 100%;
    flex-direction: column;
    justify-content: center;
    align-items: center;;
    box-sizing: border-box;
}

.newproject .control,
.editdelivery .control,
.editnote .control,
.editsettings .control {
    position: absolute;
    top: 0;
    right: 0;
}

.newproject .control p,
.editdelivery .control p,
.editnote .control p,
.editsettings .control p {
    font-size: 2rem;
    cursor: pointer;
    font-family: 'FontAwesomeSolid';
}

.newproject h3,
.editdelivery h3,
.editnote h3,
.editsettings h3 {
    width: 100%;
    margin-bottom: 2rem;
    text-align: center;
}

/*
 * Settings
 */
.editsettings .content {
  display: flex;
  flex-direction: column;
  flex-wrap: wrap;
  width: 100%;
  padding: 4rem 1rem;
}

.editsettings .buttons .inside {
  display: flex;
  flex-wrap: nowrap;
  flex-direction: row;
  margin-bottom: 1.7rem;
}

.editsettings .fabutton {
  height: 75px;
  padding: 0.5rem;
  background-color: #30424a;
}

.editsettings .fabutton {
  display: flex;
  flex-direction: column;
  flex-wrap: nowrap;
}

.editsettings .fabutton p {
  font-family: 'SourceSansPro', Arial;
  font-size: 0.8rem;
  text-align: center;
}

/* Workaround */
#ctrl_hiddenid,
#ctrl_hiddennoteid {
    display: none;
}