.appScreen {
   width: 412px;
   height: 800px;
   background-color: #f5f6fb;
   border-radius: 20px;
   overflow: hidden;
   position: absolute;
   left: calc(50% - 206px);
}

body {
   background: none;
   padding: 0px;
   margin: 0px;
}

@media only screen and (min-width: 600px) {
   body {
      background-color: #e7eaf3;
      -webkit-box-shadow: 0px 42px 54px 0px rgba(156, 151, 194, 0.32);
      -moz-box-shadow: 0px 42px 54px 0px rgba(156, 151, 194, 0.32);
      box-shadow: 0px 42px 54px 0px rgba(156, 151, 194, 0.32);
   }
}

.screen {
   width: 100%;
   height: 100%;
   overflow: hidden;
   box-sizing: border-box;
   position: absolute;
   top: 0px;
   left: 0px;
   background-color: #f5f6fb;
}

.logo_container {
   margin-top: 30px;
   width: 100%;
   margin-left: 0px;
   height: 250px;
   margin-bottom: 120px;
   text-align: center;
   position: relative;
}

.logo_main_screen {
   display: inline-block;
   width: 100%;
}

/* form starting stylings ------------------------------- */
.group {
   position: relative;
   margin-bottom: 45px;
}

.group input {
   font-size: 18px;
   font-family: 'Open Sans', sans-serif;
   padding: 10px 10px 10px 5px;
   display: block;
   width: 300px;
   border: none;
   border-bottom: 5px solid #ecedf1;
   box-sizing: border-box;
   padding-left: 20px;
   background: none;
}

.group input:focus {
   outline: none;
}

/* LABEL ======================================= */
label {
   color: #999;
   font-family: 'Fredoka One', cursive;
   font-size: 18px;
   font-weight: normal;
   position: absolute;
   pointer-events: none;
   left: 5px;
   top: 10px;
   transition: 0.2s ease all;
   -moz-transition: 0.2s ease all;
   -webkit-transition: 0.2s ease all;
}

/* active state */
.group input:focus~label, .group input:valid~label {
   top: -20px;
   font-size: 14px;
   color: #4b36ed;
}

/* BOTTOM BARS ================================= */
.bar {
   position: relative;
   display: block;
   width: 300px;
}

.bar:before, .bar:after {
   content: '';
   height: 2px;
   width: 0;
   bottom: 1px;
   position: absolute;
   background: #4b36ed;
   transition: 0.2s ease all;
   -moz-transition: 0.2s ease all;
   -webkit-transition: 0.2s ease all;
}

.bar:before {
   left: 50%;
}

.bar:after {
   right: 50%;
}

/* active state */
.group input:focus~.bar:before, input:focus~.bar:after {
   width: 50%;
}

/* HIGHLIGHTER ================================== */
.highlight {
   position: absolute;
   height: 60%;
   width: 100px;
   top: 25%;
   left: 0;
   pointer-events: none;
   opacity: 0.5;
}

/* active state */
.group input:focus~.highlight {
   -webkit-animation: inputHighlighter 0.3s ease;
   -moz-animation: inputHighlighter 0.3s ease;
   animation: inputHighlighter 0.3s ease;
}

/* ANIMATIONS ================ */
@-webkit-keyframes inputHighlighter {
   from {
      background: #5264AE;
   }

   to {
      width: 0;
      background: transparent;
   }
}

@-moz-keyframes inputHighlighter {
   from {
      background: #5264AE;
   }

   to {
      width: 0;
      background: transparent;
   }
}

@keyframes inputHighlighter {
   from {
      background: #5264AE;
   }

   to {
      width: 0;
      background: transparent;
   }
}

.center {
   margin-left: calc(50% - 157px);
}

.inlogBtn {
   background-color: #0be881;
   width: 314px;
   height: 60px;
   border-radius: 7px;
   line-height: 60px;
   font-family: 'Fredoka One', cursive;
   font-size: 22px;
   color: white;
   text-align: center;
   background-color: #3de2da;
   background-image: linear-gradient(146deg, #3de2da 0%, #1bd38b 100%);
}

.padding {
   box-sizing: border-box;
   padding: 30px;
}

.welcomeHeader {
   font-family: 'Fredoka One', cursive;
   color: #333333;
   font-size: 35px;
}

.screenSelectorBtn {
   margin-top: 20px;
   float: left;
   width: 55px;
   height: 25px;
   background: none;
   margin-right: 5px;
   text-align: center;
   line-height: 25px;
   font-size: 13px;
   font-family: 'Fredoka One', cursive;
   color: #c2c2c2;
   position: relative;
   display: block;
   cursor: pointer;
   border-bottom: 5px solid #dfdfdf;
}

.selected {
   color: #4b36ed;
   border-bottom: 5px solid #4b36ed;
}

.ScreenBtn {
   margin-top: 15px;
   float: right;
   width: 35px;
   height: 35px;
   border-radius: 40px;
   background: none;
   margin-left: 10px;
   text-align: center;
   line-height: 47px;
   background-color: #c2c2c2;
   color: #808e9b;
   position: relative;
   display: block;
   cursor: pointer;
}

.itemHolder {
   width: 100%;
   height: 550px;
   position: relative;
   overflow: hidden;
   margin-top: 0px;
   box-sizing: border-box;
   padding-bottom: 20px;
   overflow-y: scroll;
}

.fileHolder {
   background-color: white;
   height: 60px;
   border-radius: 6px;
   width: 100%;
   margin-bottom: 15px;
   -webkit-box-shadow: 0px 6px 20px 0px rgba(218, 216, 237, 0.13);
   -moz-box-shadow: 0px 6px 20px 0px rgba(218, 216, 237, 0.13);
   box-shadow: 0px 6px 20px 0px rgba(218, 216, 237, 0.13);
}

.fileName {
   width: 70%;
   height: 100%;
   float: left;
   line-height: 60px;
   box-sizing: border-box;
   padding-left: 30px;
   font-family: 'Fredoka One', cursive;
   color: #3e3969;
   overflow: hidden;
}

.fileDate, .fileAmount {
   width: calc(30% - 6px);
   height: 30px;
   float: left;
   line-height: 30px;
   font-family: 'Open Sans', sans-serif;
   font-weight: 400;
   color: #c2c2c2
}

.fileOfferte {
   background-color: #1bd38b;
}

.fileFactuur {
   background-color: #4b36ed;
}

.quickAction {
   margin-top: -30px;
   width: 34px;
   margin-left: -28px;
   float: left;
   height: 60px;
   border-radius: 6px;
   overflow: hidden;
   text-align: center;
   line-height: 30px;
   color: white;
   font-family: sans-serif;
}

.addBtn {
   margin-left: 20px;
   background-color: #0be881;
   width: 314px;
   height: 60px;
   border-radius: 7px;
   line-height: 60px;
   font-family: 'Fredoka One', cursive;
   font-size: 22px;
   color: #333333;
   text-align: center;
   background-color: #ecedf1;
   cursor: pointer;
   border-radius: 7px;
   position: absolute;
}

.add2 {
   margin-top: -500px;
   height: 200px;
   z-index: 99;
   text-align: left;
   box-sizing: border-box;
   font-size: 20px;
   padding-top: 10px;
   background-color: white;
   -webkit-box-shadow: 0px 6px 178px 0px rgba(218, 216, 237, 1);
   -moz-box-shadow: 0px 6px 178px 0px rgba(218, 216, 237, 1);
   box-shadow: 0px 6px 178px 0px rgba(218, 216, 237, 1);
}

.addBtnSpec {
   cursor: pointer;
   width: 50%;
   height: 100px;
   float: left;
   text-align: center;
   line-height: 100px;
}

.add2>.group {
   width: calc(100% - 50px);
   height: 115px;
   margin-left: 25px;
   margin-top: 0px;
   overflow: hidden;
   margin-bottom: 20px;
}

.add2>.group>input {
   background: none;
   border-bottom: 3px solid white;
}

.add2>.group>label {
   color: black;
}

.offerte_verder, .offerte_sluiten {
   float: left;
   width: calc(50% - 10px);
   margin-right: 5px;
   margin-left: 5px;
   height: 50px;
   border-radius: 6px;
   line-height: 50px;
   text-align: center;
}

.offerte_verder {
   background-color: #5a3fe8;
   color: white;
}

.offerte_sluiten {
   background: none;
   color: grey;
}

.editorBalk {
   position: relative;
   overflow: hidden;
   width: 100%;
   height: 150px;
   background-color: white;
   margin-top: 15px;
   margin-bottom: 20px;
   border-radius: 7px;
   -webkit-box-shadow: 0px 6px 11px 0px rgba(218, 216, 237, 0.27);
   -moz-box-shadow: 0px 6px 11px 0px rgba(218, 216, 237, 0.27);
   box-shadow: 0px 6px 11px 0px rgba(218, 216, 237, 0.27);
}

.editorBalk_regel {
   width: 50%;
   float: left;
   height: 35px;
   line-height: 35px;
   box-sizing: border-box;
   padding-left: 10px;
   font-family: 'Open Sans', sans-serif;
   font-size: 16px;
   color: #485460;
   border: none;
   background: none;
   position: relative;
}

.invoiceBuilderCanvas {
   margin-top: 20px;
   height:
}

.invoice_builderBody {
   width: 100%;
   height: 100px;
   border-radius: 6px;
   background-color: white;
   -webkit-box-shadow: 0px 6px 11px 0px rgba(218, 216, 237, 0.27);
   -moz-box-shadow: 0px 6px 11px 0px rgba(218, 216, 237, 0.27);
   box-shadow: 0px 6px 11px 0px rgba(218, 216, 237, 0.27);
   overflow: hidden;
   margin-bottom: 20px;
}

.invoice_builder_name {
   height: 50px;
   width: calc(100% - 150px);
   border: none;
   background-color: #ecedf1;
   border-radius: 0px 0px 10px 0px;
   font-size: 16px;
   box-sizing: border-box;
   color: #1e272e;
   padding-left: 20px;
   float: left;
}

.invoice_builder_btn {
   height: 50px;
   width: 49px;
   border: none;
   background: none;
   float: left;
   box-sizing: border-box;
   line-height: 50px;
   text-align: center;
   font-family: 'Fredoka One', cursive;
   font-size: 20px;
   color: #d2dae2;
}

.blue {
   color: #4b36ed;
}

.amount {
   height: 45px;
   width: calc(100% - 120px) !important;
   margin-left: 20px !important;
   background: none;
   float: left;
}

.invoice_builder_rate {
   height: 50px;
   border-radius: 10px 0px 0px 0px;
   width: 80px;
   float: right;
   background-color: white;
   border: none;
   font-family: 'Fredoka One', cursive;
   font-size: 20px;
   color: #4b36ed;
   text-align: center;
}

.invoice_builder_screenLower {
   width: calc(100% - 40px);
   height: 100px;
   margin-top: -55px;
   margin-left: -10px;
   border-radius: 7px;
   background-color: white;
   box-sizing: border-box;
   padding-top: 7px;
   position: absolute;
   -webkit-box-shadow: 0px 6px 11px 0px rgba(218, 216, 237, 0.27);
   -moz-box-shadow: 0px 6px 11px 0px rgba(218, 216, 237, 0.27);
   box-shadow: 0px 6px 11px 0px rgba(218, 216, 237, 0.27);
   transition-duration: 0.4s;
   -webkit-transition: all 500ms cubic-bezier(0.165, 0.010, 0.005, 0.980);
   -moz-transition: all 500ms cubic-bezier(0.165, 0.010, 0.005, 0.980);
   -o-transition: all 500ms cubic-bezier(0.165, 0.010, 0.005, 0.980);
   transition: all 500ms cubic-bezier(0.165, 0.010, 0.005, 0.980);
   /* custom */
   -webkit-transition-timing-function: cubic-bezier(0.165, 0.010, 0.005, 0.980);
   -moz-transition-timing-function: cubic-bezier(0.165, 0.010, 0.005, 0.980);
   -o-transition-timing-function: cubic-bezier(0.165, 0.010, 0.005, 0.980);
   transition-timing-function: cubic-bezier(0.165, 0.010, 0.005, 0.980);
   /* custom */
}

.invoice_total {
   float: left;
   height: 30px;
   width: 160px;
   box-sizing: border-box;
   padding-left: 20px;
   font-family: 'Open Sans', sans-serif;
   color: #808e9b;
}

.number {
   font-family: 'Fredoka One', cursive;
}

.blue {
   color: #5a3fe8;
}

.screenLower2 {
   margin-top: -130px;
   transition-duration: 0.4s;
   -webkit-transition: all 500ms cubic-bezier(0.165, 0.010, 0.005, 0.980);
   -moz-transition: all 500ms cubic-bezier(0.165, 0.010, 0.005, 0.980);
   -o-transition: all 500ms cubic-bezier(0.165, 0.010, 0.005, 0.980);
   transition: all 500ms cubic-bezier(0.165, 0.010, 0.005, 0.980);
   /* custom */
   -webkit-transition-timing-function: cubic-bezier(0.165, 0.010, 0.005, 0.980);
   -moz-transition-timing-function: cubic-bezier(0.165, 0.010, 0.005, 0.980);
   -o-transition-timing-function: cubic-bezier(0.165, 0.010, 0.005, 0.980);
   transition-timing-function: cubic-bezier(0.165, 0.010, 0.005, 0.980);
   /* custom */
}

.saveScreen {
   width: calc(100% - 40px);
   height: 50px;
   margin-top: -5px;
   margin-left: -10px;
   border-radius: 7px;
   background-color: white;
   box-sizing: border-box;
   position: absolute;
}

.saveItem {
   box-sizing: border-box;
   padding-left: 15px;
   width: 50%;
   float: left;
   height: 100%;
   line-height: 50px;
   font-family: 'Fredoka One', cursive;
}

.saveIcon {
   width: 30px;
   margin-bottom: -9px;
   margin-right: 10px;
   filter: invert(100%);
}

.notificationModal {
   position: absolute;
   z-index: 99;
   top: 0px;
   left: 0px;
   border-radius: 20px;
   width: calc(100%);
   height: 150px;
   background-color: white;
   -webkit-box-shadow: 0px 16px 37px -2px rgba(92, 92, 92, 0.10);
   -moz-box-shadow: 0px 16px 37px -2px rgba(92, 92, 92, 0.10);
   box-shadow: 0px 16px 37px -2px rgba(92, 92, 92, 0.10);
}

.notification_illustration {
   width: 150px;
   height: 150px;
   float: left;
   position: relative;
   border-radius: 20px 0px 0px 20px;
   overflow: hidden;
}

.notification_title {
   position: relative;
   font-family: 'Fredoka One', cursive;
   margin-left: 150px;
   font-size: 20px;
   width: calc(100% - 150px);
   height: 50px;
   line-height: 50px;
   box-sizing: border-box;
   padding-left: 10px;
   color: #4b36ed;
}

.notification_text {
   position: relative;
   font-family: 'Open Sans', sans-serif;
   font-size: 14px;
   width: calc(100% - 150px);
   margin-left: 150px;
   box-sizing: border-box;
   padding: 10px;
   padding-top: 10px;
   height: calc(100% - 50px);
   color: grey;
}

.notification_close {
   position: absolute;
   left: 20px;
   top: 20px;
   width: 30px;
   height: 30px;
   border-radius: 30px;
   color: white;
   line-height: 30px;
   text-align: center;
   box-sizing: border-box;
   overflow: hidden;
   font-family: 'Open Sans', sans-serif;
   cursor: pointer;
   -webkit-box-shadow: 4px 5px 16px 1px rgba(255, 41, 41, 0.13);
   -moz-box-shadow: 4px 5px 16px 1px rgba(255, 41, 41, 0.13);
   box-shadow: 4px 5px 16px 1px rgba(255, 41, 41, 0.13);
   background-color: #ff3bd1;
   background-image: linear-gradient(147deg, #ff3bd1 0%, #FF2525 74%);
}

.addItemBtn {
   width: 50%;
   float: left;
   height: 50px;
   background-color: white;
   font-family: 'Fredoka One', cursive;
   color: grey;
   text-align: center;
   line-height: 50px;
   margin-top: 10px;
   margin-bottom: 300px;
}

.fileViewStatic {
   background: white;
   color: #c2c2c2;
   height: 50px;
   box-shadow: none;
}

.screen1Slide-enter-active {
   animation: slideInLeft .4s;
}

.screen1Slide-leave-active {
   animation: slideOutLeft .4s;
}

.screen2Slide-enter-active {
   animation: slideInRight .4s;
}

.screen2Slide-leave-active {
   animation: slideOutRight .4s;
}

.lowerScreenFade-enter-active {
   animation: fadeIn .4s;
}

.inlogBtwn-enter-active {
   animation: slideInUp .4s;
}

.inlogBtwn-leave-active {
   animation: slideOutDown .4s;
}

.slideDown-enter-active {
   animation: slideInDown .3s;
}

.slideDown-leave-active {
   animation: slideOutUp .3s;
}

.fader {
   position: sticky;
   pointer-events: none;
   z-index: 5;
   left: 0px;
   top: 0px;
   width: 100%;
   height: calc(100% + 20px);
   margin-bottom: -500px;
   background-image: linear-gradient(0deg, #f5f6fb 2%, rgba(255, 0, 0, 0) 9%, rgba(255, 0, 0, 0) 89%, #F5F6FB 100%);
}

.fileHolder:last-of-type {
   margin-bottom: 50px;
}

.invoiceBuilderCanvas {
   height: 480px;
}

.editorBtns {
   width: 100%;
   height: 80px;
   margin-top: 70px;
}

.editor_btn {
   width: 33%;
   height: 80px;
   text-align: center;
   float: left;
   cursor: pointer;
}

.editor_btn i {
   float: none;
   height: 50px;
   line-height: 60px;
   font-size: 45px;
   margin-left: calc(50% - 25px);
   margin-right: calc(50% - 25px);
   display: inline-block;
   color: #808e9b;
}

.editor_btn span {
   font-family: 'Open Sans', sans-serif;
   font-size: 12px;
   color: #808e9b;
}

.timer_body {
   width: 100%;
   height: 50px;
   background-color: white;
   border-radius: 5px;
   -webkit-box-shadow: 0px 6px 11px 0px rgba(218, 216, 237, 0.27);
   -moz-box-shadow: 0px 6px 11px 0px rgba(218, 216, 237, 0.27);
   box-shadow: 0px 6px 11px 0px rgba(218, 216, 237, 0.27);
   box-sizing: border-box;
   position: relative;
   padding-left: 15px;
   margin-bottom: 15px;
}

.actionBorder {
   position: absolute;
   top: 0px;
   left: 0px;
   width: 10px;
   border-radius: 5px;
   background-color: none;
   height: 100%;
   margin-left: -10px;
}

/*.active .actionBorder{
   margin-left: 0px;
   background-color: #ff00bb;
   background-image: linear-gradient(147deg, #ff00bb 0%, #FF2525 74%);
   animation: active 2s;
   animation-iteration-count: infinite;
}
/*@keyframes active {
0%{
   margin-top: -50px;
}
10%{
  margin-top: -50px;
}
45%{
   margin-top: 50px;
}
55%{
  margin-top: 50px;
}
90%{
  margin-top: -50px;
}
100%{
   margin-top:  -50px;
}
}*/
.active .actionBorder {
   margin-left: 0px;
   background-image: linear-gradient(270deg, #ff4e4d 0%, rgba(0, 0, 0, 0) 20%, rgba(0, 0, 0, 0) 80%, #ff4e4d 100%);
   width: 100%;
   animation: active 2s;
   animation-iteration-count: infinite;
   z-index: 0;
   pointer-events: none;
}

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

   50% {
      opacity: 0.2;
   }

   100% {
      opacity: 0;
   }
}

.title, .project {
   width: 150px;
   height: 25px;
   float: left;
   font-family: 'Open Sans', sans-serif;
   font-size: 16px;
   color: #485460;
   border: none;
}

.timeIn, .timeOut {
   float: left;
   width: 77px;
   font-family: 'Open Sans', sans-serif;
   font-size: 16px;
   color: #aab5bd;
}

.timeTotal {
   float: left;
   width: 80px;
   color: #8295a3;
   font-family: 'Open Sans', sans-serif;
   font-size: 16px;
}

.timeStopBtn {
   width: 50px;
   height: 50px;
   border-radius: 5px;
   position: absolute;
   right: 0px;
   top: 0px;
   text-align: center;
   line-height: 50px;
   font-family: 'Fredoka One', cursive;
   color: #5a3fe8;
   cursor: pointer;
   display: none;
}

.timeOPTBtn {
   width: 50px;
   height: 50px;
   border-radius: 5px;
   position: absolute;
   right: 0px;
   top: 0px;
   text-align: center;
   line-height: 50px;
   font-family: 'Fredoka One', cursive;
   color: blue;
   cursor: pointer;
   display: block;
}

.active .timeOPTBtn {
   display: none;
}

.active .timeStopBtn {
   display: block;
   color: red;
}

.selectedTime .actionBorder {
   margin-left: 0px;
   background-color: #4b36ed;
   transition-duration: 0.2s;
}

.editBTNS {
   width: calc(100%);
   height: 50px;
   border-radius: 5px;
   position: absolute;
   left: -0px;
   top: 0px;
   display: none;
   background-color: white;
}

.active .editBTNS {
   display: none;
}

.editBtn {
   width: 25%;
   height: 50px;
   float: left;
   line-height: 50px;
   text-align: center;
   line-height: 50px;
   font-family: 'Fredoka One', cursive;
   color: #5a3fe8;
   cursor: pointer;
}

.selectingTimeSheetItem .editBTNS {
   display: block;
}

.timerScreen>.screenSelectorBtn {
   border: none;
}

.savedNotification {
   width: calc(100% - 20px);
   height: 30px;
   position: absolute;
   top: 10px;
   left: 10px;
   background-color: red;
   z-index: 999;
   border-radius: 10px;
   -webkit-box-shadow: 0px 6px 11px 0px rgba(218, 216, 237, 0.27);
   -moz-box-shadow: 0px 6px 11px 0px rgba(218, 216, 237, 0.27);
   box-shadow: 0px 6px 11px 0px rgba(218, 216, 237, 0.27);
   background-color: rgba(255, 255, 255, 0.7);
   line-height: 30px;
   font-family: 'Fredoka One', cursive;
   color: #5a3fe8;
   box-sizing: border-box;
   overflow: hidden;
   box-sizing: border-box;
   padding-left: 5px;
}

.savedNotification .buble {
   width: 100px;
   height: 10px;
   background-color: #ecedf1;
   position: absolute;
   right: 10px;
   top: 10px;
   border-radius: 20px;
   overflow: hidden;
   box-sizing: border-box;
}

.savedNotification .buble div {
   width: 0px;
   height: 100%;
   background-color: #4b36ed;
   border-radius: 20px;
   animation: barUp 1s;
   animation-delay: 0.5s;
   animation-fill-mode: forwards;
}

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

   100% {
      width: 100px;
   }
}

.slideInDown-enter-active {
   animation: slideInDown 1s;
}

.slideInDown-leave-active {
   animation: fadeOutUp 1s;
   animation-delay: 1.5s;
}

.material-icons {
   pointer-events: none;
}

.timeTracker .screenSelectorBtn {
   width: 80px;
   font-size: 15px;
}

.timeTracker .itemHolder {
   box-sizing: border-box;
   padding-top: 25px;
}

.totallingScreen {
   width: 100%;
   text-align: center;
   height: 20px;
   line-height: 20px;
   font-family: 'Fredoka One', cursive;
   color: #c2c2c2;
   margin-bottom: 50px;
}

.screenSlideNext-enter-active {
   animation-delay: 0.4s;
   animation-name: fadeInRight;
   animation-duration: 0.4s;
}

.screenSlideNext-leave-active {
   animation-name: fadeOutLeft;
   animation-duration: 0.4s;
}

.screenSlidePrev-enter-active {
   animation-delay: 0.4s;
   animation-name: fadeInLeft;
   animation-duration: 0.4s;
}

.screenSlidePrev-leave-active {
   animation-name: fadeOutRight;
   animation-duration: 0.4s;
}

.filterBody {
   position: absolute;
   width: calc(100% - 60px);
   top: 30px;
   height: 100px;
   border-radius: 6px;
   background-color: white;
   -webkit-box-shadow: 0px 16px 37px -2px rgba(92, 92, 92, 0.10);
   -moz-box-shadow: 0px 16px 37px -2px rgba(92, 92, 92, 0.10);
   box-shadow: 0px 16px 37px -2px rgba(92, 92, 92, 0.10);
   z-index: 9999;
}

.filterBody .weekSelector {
   width: 100%;
   height: 100px;
   float: left;
   background-color: lightgrey;
}

.filterBody .projectSelector {
   box-sizing: border-box;
   overflow: hidden;
   width: 100%;
   height: 100px;
   padding-top: 0px;
   padding-left: 20px;
}

.filterBody .projectSelector p {
   float: none;
   margin-bottom: 5px;
   font-size: 16px;
   font-family: 'Fredoka One', cursive;
   color: #5a3fe8;
}

.select-css {
   display: block;
   font-size: 16px;
   font-family: sans-serif;
   font-weight: 700;
   color: #444;
   line-height: 1.3;
   padding: .6em 1.4em .5em .8em;
   margin-top: 20px;
   margin-left: 20px;
   width: calc(100% - 40px);
   box-sizing: border-box;
   margin: 0;
   border: 2px solid #5a3fe8;
   border-radius: .5em;
   -moz-appearance: none;
   -webkit-appearance: none;
   appearance: none;
   background-color: #fff;
}

.select-css::-ms-expand {
   display: none;
}

.select-css:hover {
   border-color: #888;
}

.select-css:focus {
   border-color: #aaa;
   box-shadow: 0 0 1px 3px rgba(59, 153, 252, .7);
   box-shadow: 0 0 0 3px -moz-mac-focusring;
   color: #222;
   outline: none;
}

.select-css option {
   font-weight: normal;
}

.slideInDown-enter-active {
   animation: slideInDown 0.4s;
}

.slideInDown-leave-active {
   animation: fadeOutUp 0.4s;
}

.filterBody .closeBtn {
   position: absolute;
   right: 20px;
   top: 20px;
   color: red;
   font-family: 'Open Sans', sans-serif;
   font-size: 20px;
}

.flipIn-enter-active {
   animation: flipInX 0.4s;
}

.flipIn-leave-active {
   animation: flipOutX 0.4s;
}

.filteractive {
   color: white;
   background-color: #5a3fe8;
}

.editTimeInst {
   width: calc(100% - 60px);
   position: absolute;
   top: calc(50% - 200px);
   height: 400px;
   border-radius: 6px;
   background-color: white;
   -webkit-box-shadow: 0px 16px 37px -2px rgba(92, 92, 92, 0.10);
   -moz-box-shadow: 0px 16px 37px -2px rgba(92, 92, 92, 0.10);
   box-shadow: 0px 16px 37px -2px rgba(92, 92, 92, 0.10);
   z-index: 9999;
   box-sizing: border-box;
   padding: 20px;
}

.editTimeInst h3 {
   margin-top: 10px;
   margin-bottom: 5px;
   color: #5a3fe8;
   ;
   font-size: 24px;
   font-family: 'Fredoka One', cursive;
}

.numberSpinner {
   width: 40px;
   height: 120px;
   float: left;
   margin-right: 20px;
}

.numberSpinner div {
   width: 100%;
   height: 33%;
   text-align: center;
   line-height: 40px;
   font-size: 24px;
   font-family: 'Fredoka One', cursive;
   cursor: pointer;
}

.numberSpinner div:first-of-type, .numberSpinner div:last-of-type {
   color: grey;
   border-radius: 7px;
   -webkit-box-shadow: 0px 3px 13px 0px rgba(0, 0, 0, 0.13);
   -moz-box-shadow: 0px 3px 13px 0px rgba(0, 0, 0, 0.13);
   box-shadow: 0px 3px 13px 0px rgba(0, 0, 0, 0.13);
}

.gradGreen {
   background-color: #08ea68;
   background-image: linear-gradient(0deg, #08ea68 0%, #2AF598 100%);
}

.gradGreen span {
   color: white;
}

.bandIn-enter-active {
   animation: rubberBand .6s;
}

.screen .animated {
   animation-delay: 0.5s;
}

.inlogBtn:active {
   animation: pulse 0.4s;
}

.addBtn:active {
   animation: pulse 0.4s;
}

.fileholder-enter-active {
   animation: bounceIn 0.7s;
}

.fileholder-leave-active {
   animation: bounceOut 0.4s;
}

.webtify_logo {
   width: 40px;
}

.addBtns .addBtn:first-of-type {
   width: 60px;
   height: 60px;
   background-color: #21D4FD;
   cursor: pointer;
   background-image: linear-gradient(135deg, #21D4FD 0%, #8421ff 100%);
   box-sizing: border-box;
   padding: 10px;
}

.addBtns .addBtn:last-of-type {
   width: calc(100% - 170px);
   margin-left: 90px;
}

@media (min-width: 1025px) {
   .appScreen {
      width: 100%;
      left: 0px;
      top: 0px;
   }

   .logo_main_screen {
      width: 300px;
      position: relative;
      margin-top: 50px;
   }

   .inlogBtn {
      margin-top: -50px;
   }
}
.deadlineHolder
{
   width: 100%;
   margin-top: 20px;
   height: 600px;
   box-sizing: border-box;
}
.deadlineBalk
{
   width: 100%;
   height: 130px;
   box-sizing: border-box;
   border-radius: 5px;
   background-color: white;
   -webkit-box-shadow: 0px 10px 34px 1px rgba(153,183,199,0.10);
   -moz-box-shadow: 0px 10px 34px 1px rgba(153,183,199,0.10);
   box-shadow: 0px 10px 34px 1px rgba(153,183,199,0.10);
   padding: 10px;
   margin-bottom: 20px;
}
.deadlineBalk .titel{
   font-family: 'Fredoka One', cursive;
   font-size: 20px;
   color: #4d4d4d;
   width: 100%;
   height: 30px;
}
.deadlineBalkBody
{
   width: 100%;
   height: 10px;
   border-radius: 20px;
   background-color: #ffffff;
   background-image: linear-gradient(90deg, #ffffff 0%, #ededed 99%);
   box-sizing: border-box;
   padding: none;
   overflow: hidden;
}
.deadlineStatus
{
   width: 50%;
   height: 100%;
   border-radius: 20px;
   background-color: #08AEEA;
   background-image: linear-gradient(90deg, #08AEEA 0%, #2AF598 100%);
}
.deadlineBalk .deadline
{
   margin-top: 5px;
   font-family: 'Open Sans', sans-serif;
   font-size: 16px;
   color: #9c9c9c;
   width: 50%;
   height: 20px;
   line-height: 20px;
   float: left;
}
.deadlineBalk .counter
{
   margin-top: 5px;
   font-family: 'Open Sans', sans-serif;
   font-size: 16px;
   color: #9c9c9c;
   width: 50%;
   height: 20px;
   line-height: 20px;
   float: left;
}
.doneIcon
{
   position: relative;
   width: calc(50% - 5px);
   height: 30px;
   font-family: 'Open Sans', sans-serif;
   font-size: 16px;
   margin-top: 15px;
   border-radius: 5px;
   background-color: white;
   color: #4d4d4d;
   box-sizing: border-box;
   text-align: center;
   float: left;
   line-height: 30px;
   box-shadow: none;
   border: none;
   cursor: pointer;
}
.doneIcon:last-of-type
{
   float: left;
   background-color: #d8d6e3;
   color: #4d4d4d;
   font-weight: 900;
}
.deadlineAddBtn
{
   margin-left: 20px;
   background-color: #0be881;
   width: 314px;
   height: 60px;
   border-radius: 7px;
   font-family: 'Fredoka One', cursive;
   font-size: 22px;
   color: #333333;
   background-color: #ecedf1;
   cursor: pointer;
   border-radius: 7px;
   position: absolute;
}
.deadline_name
{
   width: calc(100% - 60px);
   height: 100%;
   box-shadow: none;
   border: none;
   box-sizing: border-box;
   padding-left: 20px;
   font-size: 20px;
   background:none;
}
.deadlineAdd
{
   width: 60px;
   height: 60px;
   float: right;
   background-color: none;
   text-align: center;
   padding-top: 13px;
   cursor: pointer;
}
.deadlineAdd .material-icons
{
   font-size: 34px;
}