/*@import url(fontawesome-all.min.css);*/
@import url("https://fonts.googleapis.com/css2?family=Roboto:ital,wght@0,200;0,300;0,400;0,600;0,700;0,800;0,900;1,200;1,300;1,400;1,600;1,700;1,800;1,900&display=swap");
:root {
  --clr-primary-green: #afca0f;
  --clr-primary-blue: #5a9ed6;
  --clr-primary-grey: #999998;
}

/* Freelancer color */
.--bg-subscription-freelancer-light {
  background-color: RGB(153, 255, 255, 0.4);
}

.--bg-subscription-freelancer-dark {
  background-color: RGB(153, 255, 255, 1);
}

.--color-subscription-freelancer-light {
  color: RGB(153, 255, 255, 0.4);
}

.--color-subscription-freelancer-dark {
  color: RGB(153, 255, 255, 1);
}

/* Solo color */
.--bg-subscription-solo-light {
  background-color: RGB(102, 178, 255, 0.4);
}

.--bg-subscription-solo-dark {
  background-color: RGB(102, 178, 255, 1);
}

.--color-subscription-freelancer-light {
  color: RGB(102, 178, 255, 0.4);
}

.--color-subscription-freelancer-dark {
  color: RGB(102, 178, 255, 1);
}

/* Midi color */
.--bg-subscription-midi-light {
  background-color: RGB(178, 102, 255, 0.4);
}

.--bg-subscription-midi-dark {
  background-color: RGB(178, 102, 255, 1);
}

.--color-subscription-freelancer-light {
  color: RGB(178, 102, 255, 1);
}

.--color-subscription-freelancer-dark {
  color: RGB(178, 102, 255, 0.4);
}

/* Maxi color */
.--bg-subscription-maxi-light {
  background-color: RGB(255, 102, 102, 0.4);
}

.--bg-subscription-maxi-dark {
  background-color: RGB(255, 102, 102, 1);
}

.--color-subscription-freelancer-light {
  color: RGB(255, 102, 102, 0.4);
}

.--color-subscription-freelancer-dark {
  color: RGB(255, 102, 102, 1);
}

html,
body,
nav,
footer {
  height: 100%;
  margin: 0;
  padding: 0;
  scroll-behavior: smooth;
}

body,
input,
select {
  color: #585858;
  font-family: "Roboto", sans-serif;
  font-size: 12pt;
  line-height: 1.75;
  outline: none;
  height: 1.75em;
  vertical-align: middle;
  padding: 0;
}

textarea {
  color: #585858;
  font-family: "Roboto", sans-serif; /*font-family: "Source Sans Pro", Helvetica, sans-serif;*/
  font-size: 12pt;
  line-height: 1.2;
  outline: none;
  vertical-align: middle;
  padding: 10px 0 0 5px;
}

p {
  margin-top: 0;
}

.container-input-animated {
  position: relative;
}

.input-animated {
  background-color: transparent;
}

.label-animated {
  position: absolute;
  top: 0px;
  left: 5px;
  transition: font-size 0.5s ease 0s;
  font-size: 16pt;
  z-index: -1;
}

h1,
h2,
h3,
h4 {
  margin: 0em;
}

.select:hover {
  outline: none;
  border: none;
}

a {
  text-decoration: none;
  color: #585858;
}

a:hover {
  color: #afca0f;
}

a:active {
  color: #5a9ed6;
}

.box > div > a:hover {
  color: black;
  transition: 1;
}

.video {
  width: 100%;
  height: 200;
}

.logo-company {
  object-fit: cover;
  width: 100%;
  height: 120px;
}

.pdfobject-container {
  height: 450px;
  border: 5px solid #3e3e3e;
  background-color: #3e3e3e;
  padding-top: 1em;
}

#container {
  position: relative;
  height: min-content;
  min-height: 100vh;
}

/* Photo Gallery */
div.gallery {
  border: 1px solid #ccc;
}

div.gallery:hover {
  border: 1px solid #777;
}

div.gallery img {
  width: 100%;
  height: auto;
}

div.desc {
  padding: 15px;
  text-align: left;
}

.responsive {
  padding: 0 6px;
  margin: 6px 0;
  float: left;
  width: 97%;
}

.clearfix:after {
  content: "";
  display: table;
  clear: both;
}

/* INFO TITLE */
.info-title {
  font-size: 11pt;
  color: red;
}

/* ADD NEW */
.container-add-line {
  display: grid;
  grid-template-columns: 1fr max-content 1fr;
  cursor: pointer;
  opacity: 0.6;
}

.container-add-line:hover {
  opacity: 1;
}

.container-add-line > .add-line {
  position: relative;
  margin: 0 1em;
}

.container-add-line > .add-line > div {
  position: absolute;
  top: 50%;
  width: 100%;
  border-bottom: 1px solid black;
}

.container-add-line > .add-line-text {
  font-weight: bold;
}

.noPadding {
  padding: 0 !important;
}

/* Navigation */
.container-nav {
  width: 100%;
  background-color: #ffffff;
  position: fixed;
  top: 0;
  overflow: hidden;
  z-index: 100;
  box-shadow: 0px 2px 10px #999998;
  display: grid;
  grid-template-columns: 1fr;
  grid-template-areas: "nav";
}

#nav {
  grid-area: nav;
  height: 3.5em;
  vertical-align: middle;
  display: grid;
  grid-template-columns: minmax(auto, 100%) repeat(2, minmax(auto, 4em));
  grid-template-areas: "nav_logo current-workspace menu-wrap";
}

.header-backToCockpit {
  display: none;
}

.desktop-menu {
  display: none;
}

/* .menu-wrap in menu.css */

.nav_logo {
  grid-area: nav_logo;
  padding-left: 0.5em;
  align-self: center;
  line-height: 0;
}

/* Menu bar */

.tab_2 {
  grid-area: tab_2;
}

/* Content in the tab fields */

.tabcontent {
  padding-top: 0em;
  padding-bottom: 3em;
}

/* Helper class to hide element */
.hidden {
  display: none !important;
}

/* Class for read more function */
.readMore {
  cursor: pointer;
}
.readMore:hover {
  color: #2ecc40;
}

/* Buttons for tabs */

.tablinks {
  width: 100%;
  background-color: inherit;
  color: rgba(0, 0, 0, 0.5);
  font-weight: bold;
  float: left;
  border: none;
  outline: none;
  cursor: pointer;
  transition: 0.3s;
  font-size: 20px;
}

.tablinks:hover {
  color: #afca0f;
}

/* Change background color of buttons on hover */

.tablinks:hover {
  color: #afca0f;
  font-weight: bold;
}

/* Create an active/current tablink class */

.tablinks.active {
  color: #5a9ed6;
  font-weight: bold;
}

/* Icons for Menu bar*/
.icon-container {
  display: inline-block;
  margin: 0px;
  padding: 2px;
  text-align: center;
}

.my-text {
  display: block;
  font-size: 10px;
}

.my-icon {
  vertical-align: middle;
  font-size: 25px;
}

/* Icons footer follow */
.container-footer-icon {
  display: flex;
  grid-gap: 5px;
  flex-wrap: wrap;
}

.icon-container-footer {
  display: flex;
  justify-content: center;
  align-items: center;
  width: 35px;
  height: 35px;
  border: 2px solid #999998;
  border-radius: 5px;
}

.icon-container-footer:hover {
  border: 2px solid #5a9ed6;
}

.icon-footer {
  display: block !important;
  font-size: 25px;
  color: #999998;
}

.icon-footer:hover {
  color: #afca0f;
}

/* athemi header logo */
.header-logo {
  width: 120px;
}

.logo-athemi-footer {
  width: 50%;
  min-width: 50px;
  max-width: 300px;
}

/* HAS SAVED INFO */
.has-saved-container {
  display: none;
  opacity: 0;
  align-items: center;
  position: fixed;
  bottom: 4.5em;
  right: 50%;
  margin-right: -150px;
  padding-right: 40px;
  width: max-content;
  height: 50px;
  background-color: #0074d9;
  font-size: 12pt;
  color: #ffffff;
  border-radius: 5px;
  z-index: 98;
}

.has-saved-container.close {
  transition: opacity 2s;
}

.has-saved-info {
  padding-left: 1em;
}

.has-saved-close {
  position: absolute;
  right: 10px;
  cursor: pointer;
}

.settings-expl-text {
  padding-bottom: 1em;
}

/* SETTING PAGE */
.margin-top-bottom-2em {
  margin: 2em 0;
}

/* CREDIT CARD INFO */
.flex-abonnement {
  display: grid;
  grid-gap: 1em;
  grid-template-columns: minmax(auto, 100%);
}

.abo-additional {
  display: flex;
  justify-content: space-between;
  text-align: right;
  font-weight: bold;
  font-size: 12pt;
  color: #585858;
  opacity: 0.9;
  cursor: pointer;
}

.abo-additional:hover {
  color: #585858;
  opacity: 1;
}

.abo-additional-info {
  opacity: 0;
  cursor: default;
  font-size: 12pt;
  color: red;
}

.container-abo-overview {
  position: relative;
}

#stripeInvoices {
  margin: 0;
  padding-left: 20px;
}

/* TABLE INVOICE */
.table-invoice {
  width: 100%;
  text-align: left;
}

.table-invoice th {
  border-top: 1px solid #e3e8ee;
  border-bottom: 1px solid #e3e8ee;
}

.table-invoice td {
  border-bottom: 1px solid #e3e8ee;
}

.table-invoice .invoice-align-center {
  text-align: center;
}

.table-invoice .invoice-pointer {
  cursor: pointer;
}

.table-invoice .invoice-width-max-content {
  width: max-content;
}

.table-invoice .invoice-indicator-green,
.table-invoice .invoice-indicator-blue,
.table-invoice .invoice-indicator-red {
  width: min-content;
  line-height: 1;
  padding: 5px;
  border-radius: 5px;
  color: #ffffff;
  font-size: 11pt;
  font-weight: bold;
}

.table-invoice .invoice-indicator-green {
  background-color: #afca0f;
}

.table-invoice .invoice-indicator-blue {
  background-color: #0074d9;
}

.table-invoice .invoice-indicator-red {
  background-color: #ff0000;
}

.table-invoice .invoice-state {
  position: relative;
  cursor: pointer;
}

.table-invoice .invoice-state .popUpMessage {
  display: none;
  position: absolute;
  top: 26px;
  left: 0;
  margin-left: -60px;
  width: max-content;
  max-width: 200px;
  padding: 8px;
  box-shadow: 2px 4px 5px grey;
  border-radius: 2px;
  background-color: #5a9ed6;
  font-size: 10pt;
  font-weight: normal;
  color: #fff;
  z-index: 100;
}

.table-invoice .invoice-num,
.table-invoice .invoice-email,
.table-invoice .invoice-due-date,
.table-invoice .invoice-created-date,
.table-invoice .invoice-num-title,
.table-invoice .invoice-email-title,
.table-invoice .invoice-due-date-title,
.table-invoice .invoice-created-date-title {
  display: none;
}

.grid-abo-typ {
  border-top: 1px solid #e3e8ee;
  border-bottom: 1px solid #e3e8ee;
  line-height: 1.25em;
  padding: 5px 0;
  cursor: pointer;
  display: grid;
  grid-template-columns: 30px auto 100px;
  grid-template-areas:
    "payment-show-more payment-short-info payment-edit-buttons"
    "payment-long-info payment-long-info payment-long-info";
}

.grid-abo-typ:hover {
  background-color: #f7fafc;
}

.abo-symbol {
  display: none;
  width: 50px;
  height: 50px;
  margin: auto;
  text-align: center;
  vertical-align: middle;
  line-height: 50px;
  color: lightgrey;
  font-size: 14pt;
  font-weight: bold;
  border-radius: 5px;
}

.abo-symbol-color-Freelancer {
  background-color: RGB(153, 255, 255, 0.8);
}

.abo-symbol-color-solo {
  background-color: RGB(102, 178, 255, 0.8);
}

.abo-symbol-color-midi {
  background-color: RGB(178, 102, 255, 0.8);
}

.abo-symbol-color-maxi {
  background-color: RGB(255, 102, 102, 0.8);
}

.container-payment-methods {
  position: relative;
  height: min-content;
}

.grid-payment-method {
  border-top: 1px solid #e3e8ee;
  border-bottom: 1px solid #e3e8ee;
  line-height: 1.25em;
  padding: 5px 0;
  cursor: pointer;
  display: grid;
  grid-template-columns: 30px auto 120px;
  grid-template-areas:
    "payment-show-more payment-short-info payment-edit-buttons"
    "payment-long-info payment-long-info payment-long-info";
}

.abo-short-title .stars {
  display: none;
}

.grid-payment-method:hover {
  background-color: #f7fafc;
}

.abo-show-more {
  grid-area: payment-show-more;
  margin: auto;
}

.payment-symbol {
  display: none;
  grid-area: payment-symbol;
  margin: auto;
}

.abo-short-info {
  grid-area: payment-short-info;
  display: flex;
  flex-direction: column;
  justify-content: center;
}

.abo-short-info > div {
  display: flex;
  align-items: baseline;
}

.abo-short-info > div > b {
  display: flex;
  margin-right: 5px;
}

.abo-date {
  display: none !important;
  font-size: 14pt;
}

.sub-additional-text {
  display: none;
}

.sub-lifetime {
  display: none !important;
  font-size: 10pt;
}

.info-big {
  color: red;
}

.payment-short-info-indicator,
.abo-short-info-indicator {
  font-size: 11pt;
  font-weight: bold;
  padding: 0 3px;
  border-radius: 5px;
}
.abo-short-info-indicator {
  background-color: #d6ecff;
}

.abo-edit-buttons {
  grid-area: payment-edit-buttons;
  margin: auto;
}

.abo-edit-buttons > div {
  display: flex;
  justify-content: center;
  align-items: center;
  padding: 3px 1px;
  border: 1px solid #e3e8ee;
  border-radius: 10px;
  background-color: #f7fafc;
}

.payment-bttn {
  font-size: 16px !important;
  padding: 0 5px;
}

.payment-hideBttn {
  opacity: 0 !important;
  width: 0 !important;
  padding: 0 1px 0 0 !important;
  pointer-events: none !important;
}

.abo-edit-buttons > div > i {
  padding: 0 5px;
}

.abo-edit-buttons > div > i:hover {
  color: #727272;
}

.abo-long-info {
  grid-area: payment-long-info;
  display: none;
  padding-left: 1em;
  font-size: 11pt;
}

.table-abo-long-info {
  width: 100%;
}

.abo-table-row:nth-child(even) {
  width: max-content;
}

.abo-table-row:nth-child(odd) {
  width: auto;
}

/* SUCCESS WINDOW */
.container-import-success-message {
  max-width: 500px;
  margin: 30px auto;
}

.container-import-success-message .success-body {
  height: max-content;
  padding: 50px 10px;
  text-align: center;
  font-weight: bold;
}

.success-header {
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  height: 200px;
  border-top-left-radius: 15px;
  border-top-right-radius: 15px;
  color: #ffffff;
  font-size: 18pt;
  font-weight: bold;
}

.success-header-color {
  background-color: #afca0f;
}

.failed-header-color {
  background-color: #b24848;
}

.success-body {
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  height: 300px;
  border-bottom-left-radius: 15px;
  border-bottom-right-radius: 15px;
  background-color: #ffffff;
}

.success-body > .success-title {
  font-size: 18pt;
  font-weight: bold;
}

.success-body i {
  --fa-primary-color: #5a9ed6;
  --fa-secondary-color: grey;
}

/* HIDE BAR */
.container-hide-bar {
  display: flex;
  flex-direction: column;
}

.hide-bar {
  padding-bottom: 10px;
  cursor: pointer;
}

.hide-bar:hover {
  color: #323232;
}

.hide-bar > div {
  display: flex;
}

.hide-more {
  display: none;
  width: 100%;
  margin-bottom: 1em;
}

.hide-bar {
  font-size: 18pt;
  font-weight: bold;
}

.hide-bar .hide-bar-indicator {
  width: 25px;
  padding-right: 5px;
}

/* MINI POP-UP */
.container-pop-up {
  display: none;
  position: absolute;
  top: 30px;
  right: 50%;
  box-shadow: 2px 2px 5px grey;
  background-color: #ffffff;
  z-index: 20;
}

.container-pop-up > div {
  padding: 10px;
}

/* GOOGLE MAPS */
.googleMaps {
  min-width: 110px;
  max-width: 220px;
  width: max-content;
  height: min-content;
  font-size: 10pt;
  text-align: left;
}

.googleMaps > .mapAdditional {
  font-size: 12pt;
}

/* State dot */

/* Aktiv */
.dot-green {
  height: 14px;
  width: 14px;
  margin-left: 5px;
  background-color: #2ecc40;
  border-radius: 50%;
  display: inline-block;
}

/* Wartend */
.dot-orange {
  height: 15px;
  width: 15px;
  background-color: #ff851b;
  border-radius: 50%;
  display: inline-block;
}

/* Abgelehnt */
.dot-red {
  height: 15px;
  width: 15px;
  background-color: #ff4136;
  border-radius: 50%;
  display: inline-block;
}

/* Neu */
.dot-blue {
  height: 15px;
  width: 15px;
  background-color: #0074d9;
  border-radius: 50%;
  display: inline-block;
}

/* Kein Angebot */
.dot-grey {
  height: 15px;
  width: 15px;
  background-color: grey;
  border-radius: 50%;
  display: inline-block;
}

/* Inaktiv */
.dot-brown {
  height: 15px;
  width: 15px;
  background-color: #85144b;
  border-radius: 50%;
  display: inline-block;
}

/* LOAD SCREEN */
.container-load-screen {
  display: flex;
  justify-content: center;
  align-items: center;
  position: fixed;
  top: 0;
  bottom: 0;
  left: 0;
  right: 0;
  background-color: rgba(0, 0, 0, 0.6);
  color: #ffffff;
  z-index: 100;
}

.container-load-screen > div {
  filter: unset !important;
  font-size: 3em;
}

/* DAYLI UPDATE EMAIL*/
.wrapper-dayli {
  display: none;
  align-items: center;
  line-height: 1;
}

.wrapper-dayli * {
  cursor: pointer;
}

.wrapper-dayli input {
  width: 16px;
  margin-right: 5px;
}

/* CONTACT */
.grid-split {
  display: grid;
  grid-gap: 1em;
  grid-template-columns: 1fr;
}

.wrapper-contacts {
  position: relative;
  border-radius: 5px;
}

.wrapper-contacts .openContact {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 5px;
  box-shadow: 2px 2px 5px grey;
  background-color: #fff;
  border-radius: 6px;
  cursor: pointer;
}

.wrapper-contacts .openContact:hover {
  box-shadow: 2px 4px 5px grey;
}

.wrapper-contacts .container-info {
  display: flex;
  align-items: center;
}

.wrapper-contacts .container-profile-picture {
  position: relative;
  display: flex;
  justify-content: center;
  align-items: center;
  width: 60px;
  height: 60px;
  font-size: 30px;
  border-top-left-radius: 5px;
  border-bottom-left-radius: 5px;
  background-color: var(--clr-primary-blue);
}

.wrapper-contacts .container-profile-picture > .profilePic {
  display: flex;
  justify-content: center;
  align-items: center;
  width: 50px;
  height: 50px;
  background-color: #fff;
  border-radius: 50%;
}

.wrapper-contacts .container-profile-picture .banned-profile {
  position: absolute;
  top: 5px;
  right: 5px;
  font-size: 16px;
  color: red;
}

.wrapper-contacts .container-profile-picture > div > img {
  border-radius: 50% !important;
}

.wrapper-contacts .container-name {
  font-size: 12pt;
  margin-left: 10px;
}

.wrapper-contacts .container-menu {
  position: relative;
  width: 25px;
  margin-right: 15px;
  text-align: center;
  cursor: pointer;
}

.wrapper-contacts .container-menu > div {
  display: none;
  padding: 10px;
  box-shadow: 2px 2px 5px grey;
  cursor: default;
}

.wrapper-contacts .container-menu ul {
  list-style-type: none;
  margin: unset;
  padding: unset;
  font-weight: bold;
  font-size: 12pt;
  line-height: 1.5;
}

.wrapper-contacts .container-menu li {
  position: relative;
  display: flex;
  justify-content: space-between;
  align-items: center;
  cursor: pointer;
}

.wrapper-contacts .dot-menu {
  position: absolute;
  top: 8px;
  right: 25px;
  background-color: #fff;
  text-align: left;
  width: max-content;
  border-radius: 5px;
  z-index: 10;
}

.wrapper-contacts .dot-menu .sub-dotMenu {
  display: none;
  position: absolute;
  top: -10px;
  background-color: #fff;
  padding: 10px;
  box-shadow: 2px 2px 5px grey;
  border-radius: 5px;
  min-width: 150px;
  z-index: 50;
}

.container-contact-title {
  display: flex;
  justify-content: space-between;
  align-items: center;
  flex-wrap: wrap;
}

.container-contact-title .container-title {
  font-size: 18pt;
  font-weight: bold;
}

.container-left-list-header {
  display: flex;
  align-items: baseline;
  margin-right: 15px;
}

.ul-table-sort {
  margin: unset;
  padding: unset;
}

.container-contact-title .add-contact {
  font-size: 12pt;
  font-weight: bold;
  cursor: pointer;
}

/* CONTACT SORT TABLE */
.container-sort {
  position: relative;
  font-size: 14pt;
}

.container-sort > .wrapper-sort {
  display: flex;
  align-items: center;
  margin-right: 15px;
  font-size: 11pt;
}

.container-sort .sortTitle {
  display: none;
}

.container-sort > .wrapper-sort > .toggleSortMenuPerson,
.container-sort > .wrapper-sort > .toggleSortMenuCompany {
  cursor: pointer;
}

.container-sort > .container-sort-table {
  position: absolute;
  right: 15px;
  display: none;
  flex-direction: column;
  padding: 10px 0;
  font-size: 11pt;
  background-color: #fff;
  min-width: 100px;
  width: max-content;
  box-shadow: 2px 2px 5px grey;
  border-radius: 5px;
  z-index: 10;
}

.container-sort > .container-sort-table > div {
  padding: 0 10px;
  cursor: pointer;
}

.container-sort > .container-sort-table > div:hover {
  background-color: rgba(90, 158, 214, 0.4);
}

/* CONTACT DETAILED */
.wrapper-account {
  background-color: unset !important;
  padding: unset !important;
}

.wrapper-contact {
  padding: 1em;
  background-color: rgba(153, 153, 152, 0.2);
  font-size: 11pt;
  line-height: 1.4;
  display: grid;
  grid-gap: 1em;
  grid-template-columns: 1fr;
}

.container-new-contact {
  grid-template-rows: min-content;
}

.container-new-contact .contact-box {
  height: unset !important;
}

.import-box {
  min-height: 300px;
  position: relative;
  box-shadow: 2px 2px 5px grey;
  background-color: #fff;
  border-radius: 5px;
  padding: 10px;
}

.contact-box {
  display: flex;
  min-height: 300px;
  position: relative;
  box-shadow: 2px 2px 5px grey;
  background-color: #fff;
  border-radius: 5px;
}

.contact-box .box-wrapper {
  position: relative;
  flex: 1;
  padding: 10px;
}

.contact-box .container-multi-address {
  display: flex;
  width: 100%;
}

.contact-box .section {
  margin-bottom: 1em;
}

.contact-box .wrapper-edit {
  display: none;
  position: absolute;
  top: 5px;
  right: 5px;
  font-size: 18pt;
  color: #5a9ed6;
  cursor: pointer;
  z-index: 10;
}

.contact-box .google-map {
  min-height: 240px;
}

.contact-box .input-prefix {
  width: 50px;
}

.contact-box .input-housenumber {
  width: 60px;
}

.contact-box .input-zip {
  width: 55px;
}

.contact-box .fixedMinLength {
  min-width: 100px;
  width: max-content;
  margin-right: 8px;
}

.contact-box .wrapper-save-cancel {
  display: none;
  position: absolute;
  top: 5px;
  right: 5px;
  font-size: 18pt;
  color: #5a9ed6;
  cursor: pointer;
  z-index: 10;
}

.contact-box .wrapper-save-cancel > .add {
  margin-right: 10px;
  color: #ffffff;
  /*
  color: #5a9ed6;
  */
}

.contact-box .wrapper-save-cancel > .save {
  margin-right: 10px;
  color: #ffffff;
  /*
  color: #afca0f;
  */
}

.contact-box .wrapper-save-cancel > .delete {
  margin-right: 10px;
  color: #ffffff;
  /*
  color: #b24848;
  */
}

.contact-box .box-title {
  font-size: 16pt;
  font-weight: bold;
  color: #5a9ed6;
  margin-bottom: 5px;
}

.contact-box .box-title > input {
  margin-bottom: 5px;
  font-size: 16pt;
  font-weight: bold;
  color: #5a9ed6;
}

.contact-box .container-history {
  margin: unset;
}

.contact-box .container-story {
  height: 220px;
  padding: 10px 0;
}

.contact-box .flex-title {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
}

.contact-box .flex-title > .container-title-functions {
  display: flex;
  align-items: center;
  color: #585858;
  font-size: 11pt;
}

.contact-box .flex-title > .container-title-functions > .function {
  cursor: pointer;
}

.contact-box .flex-title > .container-title-functions > div {
  margin-left: 8px;
}

.contact-box .grid-splitted {
  display: grid;
  grid-column-gap: 10px;
  grid-template-columns: 1fr 1fr;
  margin-bottom: 1em;
  width: 100%;
}

.contact-box .grid-address-splitted {
  display: grid;
  grid-gap: 10px;
  grid-template-columns: 1fr;
  margin-bottom: 2em;
  width: 100%;
}

.contact-box .flex-splitted {
  display: flex;
}

.contact-box .container-general {
  width: 100%;
  height: 100%;
  display: grid;
  grid-gap: 1em;
  grid-template-columns: 1fr;
}

.contact-box .container-general .picture-frame {
  position: relative;
  border-radius: 5px 5px 0 0;
  background-color: #5a9ed6;
  color: #fff;
  padding: 5px 0;
  display: flex;
  justify-content: center;
  align-items: center;
}

.contact-box .container-general .wrapper-edit-icon {
  display: flex;
  justify-content: center;
  align-items: center;
  position: absolute;
  top: 50%;
  margin-top: -40px;
  right: 50%;
  margin-right: -40px;
  width: 28px;
  height: 28px;
  font-size: 12pt;
  cursor: pointer;
  color: #5a9ed6;
  background-color: #fff;
  box-shadow: 2px 2px 5px #5a9ed6;
  border-radius: 50%;
}

.contact-box .container-general .wrapper-edit-logo-icon {
  display: flex;
  justify-content: center;
  align-items: center;
  position: absolute;
  top: 4px;
  right: 4px;
  width: 28px;
  height: 28px;
  font-size: 12pt;
  cursor: pointer;
  color: #5a9ed6;
  background-color: #fff;
  box-shadow: 2px 2px 5px #5a9ed6;
  border-radius: 50%;
}

.contact-box .container-general .container-profile-pic {
  width: 80px;
  height: 80px;
  font-size: 50px;
  background-color: #fff;
  color: #585858;
  border-radius: 50%;
  display: flex;
  justify-content: center;
  align-items: center;
}

.contact-box .container-general .container-logo-pic {
  position: absolute;
  top: 2px;
  left: 2px;
  right: 2px;
  display: flex;
  justify-content: center;
  align-items: center;
  height: 50px;
  font-size: 30px;
  background-color: #5a9ed6;
  color: #585858;
  border: 1px solid #fff;
  border-top-left-radius: 5px;
}

.contact-box .container-general .container-logo-pic > img {
  border-top-left-radius: 4px;
}

.contact-box .container-general .container-profile-pic > img {
  border-radius: 50% !important;
}

.contact-box .container-general .selectProfilePic {
  cursor: pointer;
}

.contact-box .container-general .general-info {
  padding: 0 10px;
}

.contact-box .container-socialmedia {
  display: flex;
  flex-wrap: wrap;
  /*
  display: grid;
  grid-template-columns: 1fr;
  grid-gap: 10px;
  */
  font-size: 50px;
}

.contact-box .container-socialmedia > div {
  margin-bottom: 10px;
}

.contact-box .container-socialmedia > div:not(:last-child) {
  margin-right: 10px;
}

.contact-box .container-socialmedia > .container-media {
  display: flex;
  align-items: center;
  border-radius: 5px;
}

.contact-box .container-socialmedia > .container-media-secondary {
  box-shadow: 2px 2px 5px grey;
}

.contact-box .container-socialmedia > .container-media > .media-logo {
  display: flex;
  justify-content: center;
  align-items: center;
  width: 70px;
  height: 60px;
  cursor: pointer;
}

.contact-box .container-socialmedia > .container-media > .media-logo-primary {
  border-radius: 5px;
  color: #454545;
}

.contact-box .container-socialmedia > .container-media > .media-logo-secondary {
  background-color: #5a9ed6;
  color: #fff;
  border-radius: 5px 0 0 5px;
}

.contact-box .container-socialmedia > .container-media > .media-text {
  display: none;
  flex: 1;
  font-size: 14pt;
  padding: 0 10px;
}

.container-projects {
  display: grid;
  grid-gap: 10px;
  grid-template-columns: repeat(auto-fill, minmax(230px, 1fr));
  margin-bottom: 2em;
  min-height: 260px;
}

.container-project-nav {
  position: absolute;
  bottom: 10px;
  left: 0;
  right: 0;
  padding-top: 10px;
  display: flex;
  justify-content: space-around;
  align-items: center;
  font-size: 14pt;
}

.container-project-nav > .nav-left,
.container-project-nav > .nav-right {
  width: 100px;
  text-align: center;
  cursor: pointer;
}

.container-textoutput {
  position: relative;
  display: flex;
  padding-top: 15px;
}

.container-textoutput > div {
  position: absolute;
  top: 3px;
  left: 0;
  font-size: 7pt;
  color: #5a9ed6;
  cursor: default;
}

.box-wrapper .swipper-company,
.box-wrapper .swipper-address {
  display: flex;
  width: 100%;
  margin: 0 15px;
}

.box-wrapper .wrapper-company,
.box-wrapper .wrapper-address {
  width: 100%;
  padding: 10px;
}

.box-wrapper .wrapper-flex-center {
  display: flex;
  align-items: center;
  width: 100%;
}

.box-wrapper .wrapper-flex-center > .flex-center {
  width: 100%;
}

.box-wrapper .wrapper-flex-center > .flex-center > form {
  width: 100%;
}

.box-wrapper .company-swipper {
  min-height: 230px;
}

.box-wrapper .address-swipper {
  min-height: 180px;
}

.box-wrapper .company-swipper,
.box-wrapper .address-swipper {
  display: flex;
  justify-content: space-between;
  align-items: center;
}

.box-wrapper .swipper-left,
.box-wrapper .swipper-right {
  display: flex;
  justify-content: center;
  align-items: center;
  width: 25px;
  height: 100px;
  font-size: 20pt;
  cursor: pointer;
}

.contact-box .dot-menu {
  display: none;
  position: absolute;
  top: 10px;
  right: 38px;
  padding: 10px;
  box-shadow: 2px 2px 5px grey;
  cursor: default;
  background-color: #fff;
  text-align: left;
  width: max-content;
  border-radius: 5px;
  z-index: 10;
}

.contact-box .dot-menu ul {
  list-style-type: none;
  margin: unset;
  padding: unset;
  font-weight: bold;
  font-size: 12pt;
  line-height: 1.5;
  color: rgb(88, 88, 88);
}

.contact-box .dot-menu li {
  cursor: pointer;
}

.contact-box .dot-menu li button {
  border: unset;
  background-color: unset;
  cursor: pointer;
  font-size: 12pt;
  font-weight: bold;
  line-height: 1.5;
}

.container-connected-contact-info {
  display: none;
  margin-top: 10px;
  font-size: 10pt;
  color: red;
}

.container-connected-contact-info > div > div {
  margin-right: 15px;
}

.container-connected-contact-info > div > div:last-child {
  margin-right: unset;
}

.container-connect-user-info {
  display: flex;
  align-items: center;
}

/* SETTINGS */
.contact-box .container-subscription {
  display: flex;
  box-shadow: 2px 2px 5px grey;
  border-radius: 5px;
  padding: 15px;
}

.contact-box .container-subscription > * {
  flex-basis: 100%;
}

.contact-box .container-subscription .container-subscription-title {
  font-size: 14pt;
  margin-bottom: 10px;
}

.contact-box .container-subscription .wrapper-subscription-logo {
  border-radius: 5px;
  color: #fff;
  padding: 1px 8px;
  font-size: 12pt;
  letter-spacing: 0.1em;
}

.contact-box .container-subscription .container-subscription-info {
  margin-left: 10px;
  font-size: 11pt;
}

.contact-box .container-subscription .container-subscription-row {
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  font-size: 10pt;
}

.contact-box .container-subscription .container-subscription-bttns {
  display: flex;
  flex-direction: column;
  align-items: flex-end;
  margin-bottom: 4px;
}

.contact-box .container-subscription .container-subscription-bttns > * + * {
  margin-top: 10px;
}

.contact-box .container-subscription .subscription-price {
  display: flex;
  justify-content: flex-end;
  line-height: 1;
}

.contact-box .container-subscription .subscription-price > .wrapper-currency {
  padding-top: 2px;
  padding-right: 5px;
  font-size: 10pt;
}

.contact-box .container-subscription .subscription-price > .wrapper-price {
  font-size: 20pt;
  font-weight: bold;
}

.contact-box .container-subscription .subscription-price > .wrapper-interval {
  padding-top: 4px;
  padding-left: 5px;
  font-size: 8pt;
}

.contact-box .container-payment {
  position: relative;
  display: flex;
  flex-direction: column;
  box-shadow: 2px 2px 5px grey;
  border-radius: 5px;
  padding: 15px;
}

.contact-box .container-payment .list-payment {
  background-color: lightgray;
  padding: 5px;
  border-radius: 5px;
}

.--payment-background-green {
  background-color: rgba(175, 202, 15, 0.5) !important;
}

.contact-box .container-payment .list-payment > * + * {
  margin-top: 5px;
}

.contact-box .container-payment .container-payment-tile {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 2px 5px;
  background-color: #fff;
  border-radius: 5px;
  font-size: 11pt;
}

.contact-box .container-payment .card-info {
  display: flex;
  align-items: center;
}

.contact-box .container-payment .card-info > * + * {
  margin-left: 10px;
}

.contact-box .container-payment .card-menu {
  position: relative;
  padding: 5px 10px;
  cursor: pointer;
}

/* Progress */
.wrapper-progress {
  margin-bottom: 5px;
  margin-top: 1px;
  height: 5px;
  border-radius: 2.5px;
}

.wrapper-progress > span {
  display: block;
  height: 5px;
  border-radius: 2.5px;
}

/* EMPTY TEMPLATE */
.empty-tile {
  display: flex;
  justify-content: center;
  align-items: center;
  height: 100%;
  border: 2px dashed #585858;
  border-radius: 5px;
}

.empty-tile > .empty-placeholder {
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
}

.empty-tile .icon-placeholder {
  font-size: 4em;
}

.empty-tile .icon-text {
  font-size: 14pt;
  font-weight: bold;
}

/* Table */
.container-table {
  width: 100%;
}

.table-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 1em;
}

.table-title {
  display: flex;
}

.table-title > h2 {
  line-height: 1;
}

.table-title > div {
  margin-left: 10px;
}

.table-title > div > span {
  padding: 0 5px;
}

.table-add {
  display: flex;
  align-items: flex-end;
  font-size: 18pt;
  font-weight: bold;
  cursor: pointer;
}

.table-add:hover {
  color: #afca0f;
}

.table-add > a {
  display: flex;
}

.table-add-text {
  display: none;
}

.table-add-icon > i {
  font-size: 1.2em;
}

.flex-table {
  display: flex;
  flex-direction: column;
  width: 100%;
  height: max-content;
}

.table-row-container {
  position: relative;
  padding: 10px;
  border-top: 1px solid #9f9f9f;
  border-bottom: 1px solid #9f9f9f;
  cursor: pointer;
}

.table-row-container:hover {
  background-color: #f7fafc;
}

.table-show-more-grid {
  display: grid;
  grid-column-gap: 10px;
  grid-template-columns: max-content 1fr;
}

.table-flex-row {
  display: flex;
  justify-content: space-between;
  align-items: center;
}

.table-info {
  display: flex;
  align-items: center;
}

.table-more {
  padding-right: 10px;
}

.table-info-text {
  display: flex;
}

.contact-name {
  max-width: 180px;
  overflow: hidden; /* make sure it hides the content that overflows */
  white-space: nowrap; /* don't break the line */
  text-overflow: ellipsis; /* give the beautiful '...' effect */
}

.contact-name-add {
  display: none;
  font-size: 12pt;
  font-weight: bold;
}

.table-button {
  display: flex;
  align-items: center;
  height: 24px;
  padding: 0 5px;
  border: 1px solid #5a9ed6;
  background-color: #f7fafc;
  border-radius: 12px;
}

.table-button > button {
  display: flex;
  font-size: unset;
  margin: 0 6px;
}

.table-button > button > i {
  font-size: 11pt;
}

.table-more-info {
  display: none;
  padding: 10px 0;
}

.table-more-grid {
  display: grid;
  grid-template-columns: 75px 195px;
  font-size: 12pt;
  line-height: 1.5;
  box-shadow: 2px 2px 5px grey;
  padding: 5px;
  width: 270px;
}

.table-more-grid > div {
  overflow: hidden; /* make sure it hides the content that overflows */
  white-space: nowrap; /* don't break the line */
  text-overflow: ellipsis; /* give the beautiful '...' effect */
}

.flex-navigator {
  display: flex;
  justify-content: space-around;
  padding: 1em 0;
}

.container-previous,
.container-next {
  border: none;
  color: #585858;
  background-color: transparent;
  cursor: pointer;
}

/* Edit menu */
.edit-menu {
  display: none;
  position: absolute;
  top: 54px;
  right: -42px;
  z-index: 5;
  background-color: white;
  border: 1px solid #5a9ed6;
  border-radius: 15px;
  padding: 0.5em;
}

.edit-menu > form > ul {
  padding: 0 0 0 18px;
  margin: 0;
}

.edit-menu > form > ul > li > button {
  color: #585858;
  font-size: 12pt;
  padding: 5px 4px;
  cursor: pointer;
  border: none;
  background-color: transparent;
}

.edit-menu > form > ul > li > button:hover {
  color: #5a9ed6;
}

/* Wrapper */
.wrapper {
  display: grid;
  overflow: auto;
  padding-top: 5em;
  padding-bottom: 6em;
  grid-template-columns: 10px minmax(340px, 748px) 10px;
  grid-template-areas: ". main .";
}

.main {
  grid-area: main;
}

/* DOC ACCEPTANCE ("ANGEBOT") */
.flex-acceptance {
  display: grid;
  grid-row-gap: 1em;
  grid-template-columns: 1fr minmax(auto, 175px) minmax(auto, 175px) 1fr;
  grid-template-areas:
    ". acceptInfo acceptInfo ."
    ". acceptBttnTrue acceptBttnFalse .";
}

.wrapper-doc {
  margin-top: 4em;
}

#acceptInfo,
#paymentInfo {
  grid-area: acceptInfo;
}

#acceptBttnTrue,
#acceptBttnFalse {
  width: min-content;
}

#acceptBttnTrue,
#paymentBttnTrue {
  grid-area: acceptBttnTrue;
}

#acceptBttnFalse,
#paymentBttnFalse {
  grid-area: acceptBttnFalse;
  justify-self: right;
}

.textAccept {
  display: none;
}

.iconAccept {
  display: block;
  font-size: 25px;
}

.flex-acceptance > button {
  margin: 0 !important;
}

.flex-acceptance > .red:hover {
  background-color: rgba(178, 72, 72, 0.35) !important;
  color: #ffffff !important;
  box-shadow: inset 0 0 0 2px #b24848 !important;
}

.acceptance-info {
  max-width: 350px;
  text-align: center;
  padding: 10px;
  border: 1px solid #585858;
  color: #ffffff;
}

.background-green {
  background-color: rgb(175, 202, 15, 0.8);
}

.background-blue {
  background-color: rgba(90, 158, 214, 0.8);
}

.background-red {
  background-color: rgba(178, 72, 72, 0.8);
}

/* INDEX-PAGE */

.grid {
  display: grid;
  overflow: auto;
  height: min-content;
  padding-top: 5em;
  padding-bottom: 2em;
  /*grid-row-gap: 1em;*/
  grid-template-columns: 15px minmax(330px, 738px) 15px;
  grid-auto-rows: min-content;
}

.content1 {
  display: grid;
  grid-column-start: 2;
  grid-column-end: 3;
  height: min-content;
  grid-gap: 0em;
  grid-template-columns: 1fr;
  grid-template-areas:
    "frontpage-title"
    "feed-title"
    "feed-pic"
    "feed-text";
}

.content2 {
  display: grid;
  grid-column-start: 2;
  grid-column-end: 3;
  height: min-content;
  grid-gap: 0em;
  grid-template-columns: 1fr;
  grid-template-areas:
    "feed-title"
    "feed-pic"
    "feed-text";
  background-color: #fdfdfd;
  padding-top: 1em;
}

.content3 {
  display: grid;
  grid-column-start: 2;
  grid-column-end: 3;
  height: min-content;
  grid-gap: 0em;
  grid-template-columns: 1fr;
  grid-template-areas:
    "feed-pic"
    "feed-text";
  background-color: #fdfdfd;
}

.content4 {
  display: grid;
  grid-column-start: 2;
  grid-column-end: 3;
  height: min-content;
  grid-gap: 0em;
  grid-template-columns: 1fr;
  grid-template-areas:
    "feed-pic"
    "feed-text";
  background-color: #fdfdfd;
}

.content5 {
  display: grid;
  grid-column-start: 2;
  grid-column-end: 3;
  height: min-content;
  grid-gap: 0em;
  grid-template-columns: 1fr;
  grid-template-areas:
    "feed-title"
    "feed-text";
  padding-top: 1em;
}

.content6 {
  display: grid;
  grid-column-start: 2;
  grid-column-end: 3;
  height: min-content;
  grid-gap: 0em;
  grid-template-columns: 1fr;
  grid-template-areas:
    "feed-title"
    "feed-pic"
    "feed-text";
  padding-top: 1em;
  background-color: #fdfdfd;
}

.content7 {
  display: grid;
  grid-column-start: 2;
  grid-column-end: 3;
  height: min-content;
  grid-gap: 0em;
  grid-template-columns: 1fr;
  grid-template-areas: "feed-title";
  padding-top: 1em;
}

.content8 {
  display: grid;
  grid-column-start: 2;
  grid-column-end: 3;
  height: min-content;
  grid-gap: 0em;
  grid-template-columns: 1fr;
  grid-template-areas:
    "inputfield1"
    "inputfield2"
    "inputfield3"
    "inputfield4"
    "inputfield5"
    "inputfield6"
    "inputfield7"
    "inputfield8";
}

.frontpage-title {
  grid-area: frontpage-title;
  /*text-align: center;*/
  padding-top: 2em;
  padding-bottom: 2em;
  /*letter-spacing: 0.6rem;*/
  font-size: 1.6rem;
}

.feed-title {
  grid-area: feed-title;
  display: grid;
  align-items: flex-end;
  /*text-align: center;*/
}

.feed-subtitle {
  grid-area: feed-subtitle;
  display: grid;
  align-items: flex-end;
  text-align: center;
}

.feed-text {
  grid-area: feed-text;
  display: flex;
  align-items: center;
  justify-content: center;
}

.feed-text p {
  font-size: 15pt;
}

.feed-pic {
  grid-area: feed-pic;
  text-align: center;
  /*padding-top: 10%;*/
  margin-bottom: -1em;
  z-index: 0;
}

.feed-img {
  /*width: 60%;*/
  max-height: 300px;
}

.info-text {
  padding: 5px 0;
  font-size: 12pt;
  color: red;
}

/* PROFILE */
.container-logo-divider {
  display: grid;
  height: min-content;
  padding-bottom: 2em;
  grid-row-gap: 2em;
  grid-template-columns: minmax(auto, 100%);
}

.container-logo-divider > form {
  margin: auto;
}

.container-pb {
  position: relative;
  text-align: center;
}

.container-pb-upload {
  display: flex;
  justify-content: center;
  align-items: center;
  width: 100%;
  height: min-content;
}

.pb-upload-preshow {
  display: flex;
  justify-content: center;
  position: relative;
  width: 100px;
  height: 100px;
  border: 4px solid #5a9ed6;
  border-radius: 15px;
}

.pb-upload-preshow > i {
  position: absolute;
  top: 50%;
  left: 50%;
  margin-top: -0.5em;
  margin-left: -0.6em;
  height: 100%;
  font-size: 38pt;
  z-index: 0;
}

.logo-upload-preshow {
  display: flex;
  justify-content: center;
  position: relative;
  width: 250px;
  height: 60px;
  border: 4px solid #5a9ed6;
  border-radius: 15px;
}

.logo-upload-preshow > i {
  position: absolute;
  top: 50%;
  left: 50%;
  margin-top: -0.5em;
  margin-left: -0.6em;
  height: 100%;
  font-size: 35pt;
  z-index: 0;
}

.pb-text {
  position: absolute;
  width: max-content;
  bottom: -30px;
  text-align: center;
  color: red;
  font-size: 10pt;
}

.profile-pic-preshow {
  object-fit: cover;
  position: absolute;
  top: 50%;
  left: 50%;
  margin-top: -50px;
  margin-left: -50px;
  height: 100%;
  z-index: 1;
  border-radius: 12px;
}

.logo-preshow {
  object-fit: cover;
  position: absolute;
  top: 50%;
  left: 50%;
  margin-top: -30px;
  margin-left: -125px;
  height: 100%;
  width: 100%;
  z-index: 1;
  border-radius: 12px;
}

.container-pb-select-bttn,
.container-logo-select-bttn {
  position: absolute;
  bottom: -12px;
  right: -40px;
  cursor: pointer;
}

.container-pb-select-bttn > i,
.container-logo-select-bttn > i {
  font-size: 1.5em;
}

.profile-pic {
  object-fit: cover;
  position: absolute;
  top: 50%;
  left: 50%;
  margin-top: -40px;
  margin-left: -40px;
  height: 100%;
  z-index: 1;
  border-radius: 11px;
}

.columns {
  position: relative;
  display: flex;
  justify-content: center;
}

.file-upload {
  display: none;
}
.circle {
  border-radius: 15px !important;
  overflow: hidden;
  width: 80px;
  height: 80px;
  border: 4px solid rgba(12, 119, 157, 1);
  position: relative;
  top: 0px;
}
.circle > i {
  display: flex;
  justify-content: center;
  align-items: center;
  height: 100%;
  color: #5a9ed6;
}
img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  /*
  max-width: 100%;
  height: auto;
  */
}
.p-image {
  cursor: pointer;
  position: absolute;
  top: 0px;
  right: 0px;
  color: #666666;
  transition: all 0.3s cubic-bezier(0.175, 0.885, 0.32, 1.275);
  z-index: 5;
}
.p-image:hover {
  transition: all 0.3s cubic-bezier(0.175, 0.885, 0.32, 1.275);
}

.upload-button {
  font-size: 1.2em;
}

.upload-button:hover {
  transition: all 0.3s cubic-bezier(0.175, 0.885, 0.32, 1.275);
  color: #999;
}

/* CONTACT PAGE */
.container-contact {
  height: min-content;
  width: 100%;
  padding-top: 1em;
  display: grid;
  grid-template-columns: auto;
  grid-column-gap: 1em;
}

.contact-page-title {
  grid-area: contact-page-title;
}

.container-contact-switch {
  display: flex;
  margin: auto 0;
}

.contact-person-contact {
  grid-area: contact-person-contact;
  display: grid;
  grid-template-columns: minmax(auto, 100%);
  grid-column-gap: 1em;
}

.contact-person-address {
  grid-area: contact-person-address;
  display: grid;
  grid-template-columns: minmax(auto, 100%);
  grid-column-gap: 1em;
}

.contact-person-add {
  display: none !important;
  grid-area: contact-person-add;
  text-align: center;
}

.contact-company-contact {
  grid-area: contact-company-contact;
  display: grid;
  grid-template-columns: minmax(auto, 100%);
  grid-column-gap: 1em;
}

.contact-company-address {
  grid-area: contact-company-address;
  display: grid;
  grid-template-columns: minmax(auto, 100%);
  grid-column-gap: 1em;
}

.contact-company-address-add {
  display: none !important;
  grid-area: contact-company-address-add;
  text-align: center;
}

.grid-contact-more-company {
  grid-area: grid-contact-more-company;
}

.contact-more-company {
  display: grid;
  grid-template-columns: minmax(auto, 100%);
  grid-column-gap: 1em;
}

.contact-company-add {
  display: none !important;
  grid-area: contact-company-add;
  text-align: center;
}

.contact-title-checkbox {
  display: flex;
  margin-top: 1.5em;
}

.container-contact-checkbox {
  margin: auto 0;
}

.tbl-import {
  border-collapse: collapse;
  width: 100%;
  max-width: 800px;
  text-align: left;
  margin: 40px 0;
  background-color: #ffffff;
}

.tbl-import th,
.tbl-import td {
  border: 1px solid black;
  text-align: left;
  padding: 8px;
}

.tbl-import td:first-child {
  width: 1%;
  white-space: nowrap;
}

.tbl-import select {
  width: 100%;
  max-width: 500px;
  background-color: transparent;
  border: unset;
  border-bottom: 1px solid #999998;
  text-overflow: ellipsis;
}

.tbl-import ul {
  margin: unset;
  padding-left: 15px;
}

.container-select-import .container-bttn {
  max-width: 800px;
}

/* SEARCH BAR */
.serachBar-selectMainGroup > .select-mainGroup {
  width: 100%;
  margin: unset !important;
}

.container-alphaFilter {
  margin-right: 10px;
  cursor: pointer;
}

.filter-bttn {
  margin-left: 10px;
  cursor: pointer;
}

.container-apply-filter {
  display: flex;
  justify-content: center;
  margin-top: 20px;
}

/* FILTER */
.wrapper-filter-bar {
  display: grid;
  grid-gap: 1em;
  grid-template-columns: auto max-content;
  grid-auto-rows: min-content;
  grid-template-areas:
    "filter search"
    "filter-menu filter-menu";
  font-size: 12pt;
  margin-bottom: 1em;
}

.wrapper-filter {
  grid-area: filter;
  display: flex;
  align-items: flex-end;
}

/* SEARCH */
.container-search {
  display: flex;
  justify-content: flex-end;
  width: 100%;
  margin-top: -1.5em;
}

.search-field > input {
  min-width: auto;
  max-width: 100%;
}

.input-search-field {
  border: none;
  border-radius: 0;
  border-bottom: 1px solid #999998;
  padding: 0 4px;
  -webkit-appearance: none;
  background-color: transparent;
}

.splittedTitle {
  display: flex;
  align-items: flex-end;
}

.splittedTitle > .title-text {
  margin-right: 10px;
}

.table-title > .title-text {
  display: flex;
  align-items: flex-end;
  line-height: 1;
}

.table-title > .title-text > div {
  padding-right: 1em;
}

.title-sort {
  position: relative;
  display: flex;
}

.splittedTitle > .title-sort {
  font-weight: normal;
  font-size: 14pt;
}

.title-sort > span {
  padding-left: 5px;
}

/* SELECT TITLE */
.container-select-title {
  border-bottom: 1px solid #999998;
  padding-right: 10px;
}

.container-select-list {
  position: relative;
}

.select-current {
  display: flex;
  align-items: center;
  cursor: pointer;
  height: 1.75em;
}

.select-current > i {
  padding-right: 10px;
}

.wrapper-ul-select-list {
  display: none;
  position: absolute;
  z-index: 50;
}

.wrapper-ul-select-list-deal {
  display: none;
  position: absolute;
  z-index: 50;
}

.ul-select-list {
  list-style-type: none;
  margin: 0;
  padding: 5px 10px;
  background-color: #ffffff;
  box-shadow: 2px 2px 5px grey;
}

.ul-select-list > li {
  cursor: pointer;
  width: max-content;
}

/* FILTER */
.wrapper-filter-menu {
  display: none;
  position: absolute;
  top: 40px;
  right: 0;
  width: 300px;
  height: min-content;
  padding: 15px;
  background-color: #ffffff;
  box-shadow: 2px 2px 5px grey;
  color: #585858 !important;
  z-index: 50;
}

.container-searchBar {
  grid-area: search;
  margin-top: 0.5em;
  display: grid;
  grid-template-columns: min-content 1fr;
  grid-auto-rows: min-content;
  grid-template-areas: "search-field add-filter";
}

.container-searchBar input {
  font-size: 12pt;
}

.container-add-filter {
  position: relative;
  grid-area: add-filter;
  align-self: flex-end;
  padding-bottom: 5px;
  margin-left: 15px;
  cursor: pointer;
}

.wrapper-add-filter-menu {
  display: none;
  position: absolute;
  top: 0;
  right: 32px;
  background-color: #ffffff;
  box-shadow: 2px 2px 5px grey;
  padding: 10px;
  cursor: default;
  z-index: 50;
}

.wrapper-add-filter-menu > div {
  margin: -5px 0;
}

.ul-add-filter {
  list-style-type: none;
  margin: unset;
  padding: unset;
}

.ul-add-filter > li {
  min-width: max-content;
  width: 100%;
  margin: 10px 0;
}

.li-add-filter-flex {
  display: flex;
  align-items: center;
}

.li-add-filter-flex > label {
  margin-right: 5px;
}

.li-add-filter-title {
  font-weight: bold;
  padding-bottom: 5px;
}

.li-add-filter-bttn {
  display: flex;
  justify-content: center;
  margin-top: 1em;
}

.li-add-filter-bttn > button {
  font-size: 11pt;
  font-weight: bold;
  padding: 8px 12px;
  letter-spacing: 3px;
  text-transform: uppercase;
  color: #585858;
  border: none;
  box-shadow: inset 0 0 0 2px #585858;
  background-color: #ffffff;
  cursor: pointer;
}

.li-add-filter-bttn > button:hover {
  background-color: rgba(175, 202, 15, 0.35);
  color: #ffffff !important;
  box-shadow: inset 0 0 0 2px #afca0f;
}

.container-searchField {
  grid-area: search-field;
}

.container-filter {
  display: none;
  grid-area: filter-menu;
  flex-direction: column;
}

.container-filter > div {
  margin-bottom: 1em;
  height: min-content;
}

.wrapper-reset-bttn {
  display: flex;
  align-self: flex-end;
  cursor: pointer;
  color: red;
}

.container-date-filter {
  display: flex;
  flex-direction: column;
}

.container-date-filter > label {
  font-weight: bold;
  padding-right: 10px;
}

.container-date-filter > input {
  padding: unset;
  margin-bottom: unset;
}

.container-date-filter:nth-child(1) > input {
  margin-right: 0.5em;
}

.wrapper-ul-filter-list {
  display: none;
  position: absolute;
  top: 35px;
  right: 0;
  z-index: 50;
}

.sort-filter {
  display: flex;
  position: relative;
}

.sort-filter-title {
  display: none;
}

.sort-filter-title-icon {
  grid-area: filter-icon;
  display: block;
  cursor: pointer;
}

.sort-filter-current {
  display: none;
}

.ul-filter-list {
  list-style-type: none;
  padding: 5px 10px;
  margin: -5px -10px;
  background-color: #ffffff;
  box-shadow: 2px 2px 5px grey;
}

.ul-filter-list > li {
  min-width: max-content;
  width: 100%;
  padding: 5px 0;
  margin: 10px 0;
  font-weight: bold;
  cursor: pointer;
}

.blue-color {
  color: #5a9ed6;
}

.container-filter-categorie {
  width: 100%;
  height: min-content;
}

.filter-sub-title {
  font-weight: bold;
}

.wrapper-filter-date {
  display: grid;
  grid-gap: 5px;
  grid-template-columns: repeat(2, minmax(auto, 50%));
}

.container-date-from > input,
.container-date-to > input {
  width: 100%;
}

/* HOVER */
.green-hover:hover {
  color: #afca0f !important;
}

/* COMPANY-SIDE */
.grid-dash {
  overflow: auto;
  height: min-content;
  padding-top: 5em;
  padding-bottom: 2em;
  display: grid;
  grid-template-columns: 10px minmax(auto, 708px) 15px;
  grid-auto-rows: min-content;
  grid-template-areas: ". tabbox .";
}

.addMenuPadding {
  padding-bottom: 8em;
}

.tabbed {
  display: none;
}

.tab-content-cockpit,
.tab-content-project,
.tab-content-contact {
  position: relative;
  grid-area: tabbox;
  padding: 10px 8px 4em 8px;
  min-height: 700px;
  height: min-content;
  background-color: transparent;
  border-radius: 0 5px 5px 5px;
  overflow-x: hidden;
}

.bgc-cockpit {
  background-color: RGB(175, 202, 15, 0.2);
}
.bgc-project {
  background-color: RGB(90, 158, 214, 0.2);
}
.bgc-contact {
  background-color: RGB(153, 153, 152, 0.2);
}

.container-table-more {
  display: grid;
  grid-gap: 1em;
  grid-template-columns: repeat(1, 1fr);
}

.container-table-more-title {
  white-space: nowrap;
  overflow: unset !important;
  text-overflow: unset !important;
}

.table-more-title {
  padding-top: 8px;
  font-size: 16pt;
  font-weight: bold;
}

.project-show {
  grid-area: project-show;
  display: grid;
  grid-gap: 0.5em;
  padding: 0.1em;
  padding-bottom: 1em;
  grid-template-columns: repeat(auto-fill, minmax(345px, 1fr));
  grid-template-rows: auto;
}

.child-upload {
  border: 3px dashed rgb(88, 88, 88, 0.6);
  font-weight: bold;
  color: rgb(88, 88, 88, 0.6);
  min-height: 182px;
  height: 90%;
  max-width: 100%;
  margin: 0.5em;
}

.upload-icon {
  font-size: 70px;
  color: rgb(88, 88, 88, 0.6);
  z-index: -1;
}

.p-header {
  grid-area: p-header;
  display: grid;
  height: min-content;
  grid-template-rows: 1fr 1fr;
  line-height: initial;
  padding-top: 0.3em;
}

.p-body {
  grid-area: p-body;
  display: grid;
  height: min-content;
  grid-template-columns: 30% 70%;
  font-size: 13pt;
  padding-bottom: 0.3em;
}

.p-title {
  padding-left: 0.2em;
  font-weight: bold;
  font-size: 18pt;
  min-height: 40px;
}

.p-subtitle {
  padding-left: 0.5em;
  font-size: 13pt;
}

.p-edit {
  display: grid;
  text-align: center;
  overflow: auto;
  padding-top: 0.3em;
  grid-template-columns: 1fr;
  grid-template-rows: 1fr 1fr;
  grid-template-areas:
    "delete"
    "com"
    "action"
    "send";
}

.edit {
  grid-area: edit;
}

.com {
  grid-area: com;
}

.send {
  grid-area: send;
}

.action {
  grid-area: action;
}

.delete {
  grid-area: delete;
}

.delete-nofunction {
  display: none;
  grid-area: delete;
  pointer-events: none;
  cursor: default;
}

.p-text {
  padding-left: 0.5em;
  height: 30px;
  width: 75%;
  overflow: hidden;
  white-space: nowrap;
  text-overflow: ellipsis;
}

.p-text-label {
  padding-left: 0.5em;
  height: 30px;
  width: 100%;
  overflow: hidden;
  white-space: nowrap;
  text-overflow: ellipsis;
}

.file {
  padding-left: 0;
  padding-right: 0;
}

.modal-input {
  display: grid;
  grid-gap: 1em;
  grid-template-columns: minmax(auto, 50%) minmax(auto, 50%);
  grid-template-areas:
    "1fr 1fr"
    "1fr 1fr"
    "textarea textarea";
}

.textarea {
  grid-area: textarea;
}

.grid-project {
  display: grid;
  overflow: hidden;
  height: min-content;
  grid-template-columns: 100%;
  grid-auto-rows: min-content;
  grid-template-areas:
    "radio-btn-title"
    "radio-btn"
    "drag-and-drop"
    "error-message"
    "box"
    "pdf-show-1"
    "pdf-show-2"
    "pdf-show-3"
    "pdf-show-4"
    "pdf-show-5"
    "pdf-show-6"
    "storno-btn";
}

.error-message {
  grid-area: error-message;
  padding: 0.1em;
  padding-bottom: 2em;
}

.radio-btn-title {
  grid-area: radio-btn-title;
  padding-top: 1.5em;
  padding: 0.1em;
}

.radio-btn {
  grid-area: radio-btn;
  display: grid;
  overflow: auto;
  height: min-content;
  min-width: max-content;
  padding-bottom: 1em;
  padding: 0.1em;
  grid-template-columns: 1fr 1fr;
  grid-auto-rows: min-content;
  grid-gap: 5px;
}

.drag-and-drop {
  grid-area: drag-and-drop;
  padding-bottom: 1.5em;
  padding: 0.1em;
  text-align: center;
}

.grid-doc {
  display: grid;
  grid-gap: 1em;
  grid-template-columns: repeat(auto-fill, minmax(220px, 1fr));
}

/* TILE */
.tile {
  height: max-content;
  box-shadow: 2px 2px 5px grey;
  border-radius: 5px;
  position: relative;
  padding: 0.5em;
  cursor: default;
  background-color: #ffffff;
}

.cursor-pointer {
  cursor: pointer !important;
}

.tile:hover {
  color: #0a0a0a;
}

.tile-active {
  box-shadow: 2px 2px 5px #5a9ed6 !important;
}

.container-dotMenu-tile {
  width: 25px;
  height: 25px;
  position: absolute;
  top: 5px;
  right: 5px;
  display: flex;
  justify-content: center;
  align-items: center;
}

.container-dotMenu-tile > .openBttn-tile {
  display: flex;
  justify-content: center;
  align-items: center;
  width: 100%;
  height: 100%;
}

.container-dotMenu-tile .dot-menu {
  top: 0 !important;
  right: 25px !important;
}

.container-dotMenu-tile i {
  font-size: 12pt;
}

.tile-state {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 5px;
  border-top-left-radius: 5px;
  border-top-right-radius: 5px;
}

/* Active */
.state-active {
  background-color: #afca0f;
}
/* New */
.state-new {
  box-shadow: inset 0px 25px 12px -15px #5a9ed6;
}
/* Finished */
.state-finished {
  box-shadow: inset 0px 25px 12px -15px #ffd700;
}
/* Refused */
.state-refused {
  box-shadow: inset 0px 25px 12px -15px #ff0000;
}
/* Inactive */
.state-inactive {
  box-shadow: inset 0px 25px 12px -15px #800080;
}
/* Archive */
.state-archive {
  box-shadow: inset 0px 25px 12px -15px #a52a2a;
}
/* Waiting */
.state-waiting {
  box-shadow: inset 0px 25px 12px -15px #ffa500;
}
/* Temporary */
.state-temp {
  box-shadow: inset 0px 25px 12px -15px #00c5ff;
}
/* Canceled */
.state-cancled {
  box-shadow: inset 0px 25px 12px -15px #ff0000;
}

.tile-info {
  width: 94%;
  height: 100%;
}

.tile-info > .tile-title {
  position: relative;
  display: flex;
  flex-direction: column;
  width: max-content;
  max-width: 95%;
  margin-bottom: 10px;
  padding-right: 19px;
  line-height: 1.2;
  font-size: 14pt;
  overflow: hidden;
  white-space: nowrap;
  text-overflow: ellipsis;
}

.tile-info > .tile-title > .tile-title-text {
  width: 100%;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.tile-info > .tile-title > span {
  padding-top: 2px;
  font-size: 11pt;
}

.tile-list {
  width: 100%;
  line-height: 1.5;
  display: grid;
  grid-column-gap: 5px;
  grid-template-columns: minmax(auto, max-content) 1fr;
  grid-template-rows: min-content;
}

.tile-list > div {
  font-size: 11pt;
  overflow: hidden;
  white-space: nowrap;
  text-overflow: ellipsis;
}

.tile-bttn {
  display: flex;
  flex-direction: column;
  position: absolute;
  top: 10px;
  right: 6px;
}

.tile-bttn > button {
  position: relative;
  margin: 2px;
}

.tile-bttn > button > i {
  font-size: 18px;
}

/* SELECT LIST */
.modal-select .container-select-list {
  margin: 15px 0;
}

.modal-select .container-select-list ul {
  list-style: none;
  margin: 0;
  padding: 0;
  width: 100%;
}

.modal-select .container-select-list li {
  box-shadow: 2px 4px 5px grey;
  background-color: #ffffff;
  border-radius: 6px;
  padding: 5px;
  cursor: pointer;
  overflow: hidden;
  white-space: nowrap;
  text-overflow: ellipsis;
}

.modal-select .container-select-list li:hover {
  box-shadow: 2px 5px 5px grey;
}

.modal-select .container-select-list li:not(:last-child) {
  margin-bottom: 10px;
}

/* CONTACT IMPORT */
.container-import-guidance .container-upload {
  display: flex;
  justify-content: space-between;
  align-items: center;
  border: 1px solid #454545;
  padding: 0 15px;
  min-height: 80px;
}

.container-import-guidance .container-guidance-description {
  margin-top: 15px;
}

.container-import-guidance .container-guidance-description ul {
  margin-top: 0;
  margin-bottom: 5px;
}

.import-guidance-illustration {
  display: flex;
  justify-content: space-between;
  align-items: center;
  max-width: 800px;
  margin: 20px auto;
}

.import-guidance-illustration .guidance-img {
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  font-size: 12pt;
}

.import-guidance-illustration i {
  font-size: 40px;
}

/* TILE MINI */
.tile-mini {
  width: 220px;
  min-height: 110px;
  height: max-content;
  box-shadow: 2px 2px 5px grey;
  border-radius: 5px;
  position: relative;
  padding: 0.5em;
  cursor: default;
  background-color: #ffffff;
  font-size: 10pt;
}

.tile-mini .empty-placeholder {
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
}

.tile-mini .icon-placeholder {
  font-size: 4em;
}

.tile-mini .icon-text {
  font-size: 16pt;
  font-weight: bold;
}

.tile-mini:hover {
  box-shadow: 2px 4px 5px grey;
}

.tile-info-mini > .tile-title-mini {
  display: flex;
  flex-direction: column;
  width: max-content;
  max-width: 95%;
  margin-bottom: 8px;
  padding-right: 19px;
  line-height: 1.1;
  font-size: 14pt;
  overflow: hidden;
  white-space: nowrap;
  text-overflow: ellipsis;
}

.tile-info-mini > .tile-title-mini > .tile-title-text-mini {
  width: 100%;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.tile-info-mini > .tile-title-mini > .title-span-mini {
  padding-top: 2px;
  font-size: 12pt;
}

.tile-list-mini {
  width: 100%;
  display: grid;
  grid-column-gap: 5px;
  grid-template-columns: minmax(auto, max-content) 1fr;
  grid-template-rows: min-content;
  align-items: center;
}

.tile-list-mini > div {
  overflow: hidden;
  white-space: nowrap;
  text-overflow: ellipsis;
}

.tile-list-mini input,
.tile-list-mini select {
  font-size: 10pt;
}

.tile-icon-mini {
  display: flex;
  flex-direction: column;
  position: absolute;
  top: 12px;
  right: 10px;
}

.tile-icon-mini i {
  font-size: 12pt;
}

/* IFRAME */
.container-iframe {
  width: 100%;
  height: min-content;
  margin: auto;
  padding: 1em 0;
}

.container-iframe > iframe {
  width: 100%;
  height: 450px;
}

.iframe-nav {
  display: flex;
  justify-content: space-around;
  padding-bottom: 1em;
}

.previous-iframe,
.next-iframe {
  width: 40px;
  text-align: center;
  cursor: pointer;
}

.container-gallery {
  width: 100%;
  height: min-content;
}

.gallery-current-img {
  position: relative;
  width: 90vw;
  height: 30vh;
  margin: auto;
  background-color: rgba(0, 0, 0, 0.9);
}

.gallery-current-img > img {
  position: absolute;
  max-height: 100%;
  max-width: 100%;
  width: auto;
  height: auto;
  top: 0;
  bottom: 0;
  left: 0;
  right: 0;
  margin: auto;
  transition: transform 2s;
}

.gallery-container-preshow {
  display: flex;
  overflow-x: auto;
  overflow-y: hidden;
  padding: 1em 0;
}

.gallery-preshow-slider {
  display: flex;
  cursor: pointer;
  width: min-content;
  height: 100%;
}

.gallery-preshow {
  position: relative;
  width: 100px;
  height: 60px;
  margin: 0 0.5em;
  background-color: rgba(0, 0, 0, 0.9);
  text-align: center;
}

.gallery-img-bttn > form > button > i {
  position: absolute;
  top: 2px;
  right: 2px;
  font-size: 18px;
  color: #ffffff;
}

.gallery-img-bttn > form > button > i:hover {
  color: #585858;
}

.gallery-preshow > img {
  object-fit: cover;
  height: 100%;
}

.gallery-previous,
.gallery-next {
  position: absolute;
  top: 50%;
  margin-top: -1em;
  cursor: pointer;
  font-size: 2em;
  color: #ffffff;
}

.gallery-previous:hover,
.gallery-next:hover {
  color: #dfdfdf;
}

.gallery-previous {
  left: 10px;
}

.gallery-next {
  right: 10px;
}

.gallery-img-head,
.gallery-img-title {
  display: none;
  position: absolute;
  width: 100%;
  text-align: center;
  color: #ffffff;
  background-color: rgba(0, 0, 0, 0.9);
  overflow: hidden;
  white-space: nowrap;
  text-overflow: ellipsis;
  z-index: 1;
}

.gallery-img-head {
  top: 0;
}

.gallery-img-title {
  bottom: 0;
}

.preshow-img-title {
  display: none;
  position: absolute;
  width: 100%;
  bottom: 0;
  text-align: center;
  font-size: 8pt;
  color: #ffffff;
  background-color: rgba(0, 0, 0, 0.9);
  overflow: hidden;
  white-space: nowrap;
  text-overflow: ellipsis;
}

.storno-btn {
  grid-area: storno-btn;
  grid-gap: 0.5em;
  padding: 0.1em;
  padding-bottom: 3em;
}

.grid-internal {
  display: grid;
  grid-row-gap: 1em;
  grid-template-columns: 1fr;
  grid-template-areas:
    "intern-docs"
    "history";
}

.container-intern-doc {
  grid-area: intern-docs;
}

.container-intern-doc > .child-box:hover {
  background-color: rgb(175, 202, 15, 1);
}

.container-intern-doc > div > a:hover {
  color: black;
}

.container-history {
  grid-area: history;
  overflow: hidden;
}

.history-head {
  display: flex;
  justify-content: space-between;
  align-items: flex-end;
  padding: 0 5px;
  border-bottom: 1px solid #909090;
}

.history-title {
  display: flex;
  align-items: flex-end;
  font-size: 16pt;
  font-weight: bold;
}

.wrapper-ul-select-list {
  display: none;
  position: absolute;
  z-index: 50;
}

.ul-select-filter {
  list-style-type: none;
  margin: 0;
  padding: 5px 10px;
  background-color: #ffffff;
  box-shadow: 2px 2px 5px grey;
}

/* BREAD CRUMB */
.bread-crumb {
  font-size: 10pt;
  margin-bottom: 1em;
}

/* HISTORY FILTER */
.wrapper-select-filter {
  margin-left: 1em;
  font-size: 14pt;
  font-weight: bold;
}

.container-select-filter {
  cursor: pointer;
}

.select-filter-type {
  display: flex;
  align-items: center;
}

.select-filter-type > i {
  padding-right: 5px;
}

.container-history-addBttn {
  display: flex;
}

.container-history-addBttn > div {
  margin-left: 8px;
  font-size: 12pt;
  font-weight: bold;
  cursor: pointer;
}

.container-history-addBttn > div:hover {
  color: #afca0f;
}

.container-story {
  padding: 10px 5px;
  overflow-y: auto;
  height: 340px;
}

.history-body {
  display: flex;
}

.container-icon {
  display: flex;
  flex-direction: column;
  align-items: center;
  padding-top: 8px;
}

.container-history-connector-line {
  height: 100%;
  padding-right: 15px;
}

.history-connector-line {
  width: 1px;
  height: 120%;
  background-color: #585858;
}

.history-symbol {
  display: flex;
  padding-right: 15px;
  padding-bottom: 2px;
}

.history-symbol > i {
  font-size: 16px;
}

.history-textfield {
  padding-bottom: 8px;
  font-size: 12pt;
  line-height: 1.2 !important;
}

.history-text {
  display: flex;
  flex-wrap: wrap;
}

.history-prenote {
  font-weight: bold;
  cursor: pointer;
}

.history-additional-info {
  font-size: 10pt;
  padding-top: 4px;
}

.history-note-container {
  display: none;
  padding: 10px 5px 0 5px;
}

.history-note-input > textarea {
  width: 100%;
  box-sizing: border-box;
  padding: 0 5px;
  margin: 0 !important;
  font-size: 12pt !important;
  resize: none;
}

.history-task-input > * {
  font-size: 12pt;
}

.container-task-date {
  display: flex;
  align-items: baseline;
}

.container-task-date > * {
  margin-left: 10px;
  font-size: 12pt;
}

.text-checkbox {
  margin: unset;
}

.container-task-date > input {
  width: max-content;
}

.history-note {
  display: flex;
  align-items: center;
}

.history-note > input {
  margin-right: 8px;
}

.history-note-control {
  display: flex;
  justify-content: flex-end;
  padding: 10px;
}

.history-bttn {
  border-radius: 1px;
  border: 0;
  box-shadow: inset 0 0 0 2px #585858;
  background-color: transparent;
  color: #585858 !important;
  cursor: pointer;
  font-size: 11pt;
  height: 30px;
  padding: 5px;
  text-align: center;
  margin-left: 10px;
}

.cancel-bttn:hover {
  background-color: rgba(178, 72, 72, 0.35) !important;
  color: #ffffff !important;
  box-shadow: inset 0 0 0 2px #b24848 !important;
}

.accept-bttn:hover {
  background-color: rgba(175, 202, 15, 0.35) !important;
  color: #ffffff !important;
  box-shadow: inset 0 0 0 2px #afca0f !important;
}

/* MERGE WORKSPACE */
.container-merge-workspace > div {
  display: flex;
  justify-content: space-around;
  flex-wrap: wrap;
}

/* CUSTOMER-SIDE */
.info-box {
  display: grid;
  overflow: auto;
  height: min-content;
  padding-top: 1em;
  padding-bottom: 1em;
  text-align: center;
  grid-template-columns: 1fr;
  grid-auto-rows: min-content;
  grid-template-areas:
    "body-extension-text"
    "body-title"
    "body-text";
}

.body-extension-text-mobil {
  display: block;
  align-self: end;
}

.body-extension-text-desktop {
  grid-area: body-extension-text;
  display: none;
}

.body-text {
  grid-area: body-text;
  margin-top: 1em;
}

.box {
  height: min-content;
  display: grid;
  grid-gap: 1em;
  grid-template-columns: 1fr;
}

.content {
  display: block;
}

.child-box {
  position: relative;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  height: 290px;
  text-decoration: none;
  padding: 2em 0;
  text-align: center;
  color: #585858 !important;
}

.box-empty {
  background-image: linear-gradient(
    to bottom right,
    rgba(227, 227, 227, 1),
    rgba(120, 120, 120, 1)
  ) !important;
}

.child-box:nth-of-type(odd) {
  background-image: linear-gradient(
    to bottom right,
    rgb(175, 202, 15, 1),
    rgb(175, 202, 15, 0.5)
  );
}

.child-box:nth-of-type(even) {
  background-image: linear-gradient(
    to bottom right,
    rgb(90, 158, 214, 1),
    rgb(90, 158, 214, 0.5)
  );
}

.child-box > a {
  height: 180px;
}

.box-head > * {
  margin: 0;
}

.box-foot {
  width: minmax(auto, 100%);
  height: 80px;
  margin: 0 1em;
  border: 2px dashed #585858;
  border-radius: 5px;
  text-align: center;
  cursor: pointer;
}

.box-foot:hover {
  color: #3c3c3c !important;
  border: 2px dashed #3c3c3c;
}

.tile-dropzone {
  display: block !important;
  min-height: unset !important;
}

.box-foot:hover > form > div > i {
  color: #3c3c3c !important;
}

.tile-dropzone > div {
  display: flex;
  flex-direction: column;
  margin: unset !important;
  padding: 5px;
  height: 100% !important;
}

.box-drop-icon {
  z-index: 79;
}

.grey-child-box {
  background-image: linear-gradient(
    to bottom right,
    rgb(153, 153, 152, 1),
    rgb(153, 153, 152, 0.5)
  ) !important;
  pointer-events: none !important;
  cursor: default !important;
  text-decoration: none !important;
  color: black !important;
}

.acceptance-text {
  grid-area: acceptance;
  padding-bottom: 1em;
  display: grid;
  overflow: auto;
  height: min-content;
  grid-template-columns: 25% 50% 25%;
  grid-auto-rows: min-content;
}

.acceptance-icon-container {
  display: inline-block;
  width: 30px;
  margin: 0px;
  padding: 2px;
  text-align: center;
  font-size: 38px;
}

.acceptance-text-container {
  display: none;
}

.status-true {
  height: 58px;
  line-height: 16px;
  margin-left: 0.5em;
  margin-right: 0.5em;
  color: #ffffff;
  text-align: center;
  background: #afca0f;
}

.status-false {
  height: 58px;
  line-height: 16px;
  margin-left: 0.5em;
  margin-right: 0.5em;
  color: #ffffff;
  text-align: center;
  background: #999998;
}

.status-unknown {
  height: 58px;
  line-height: 16px;
  margin-left: 0.5em;
  margin-right: 0.5em;
  color: #ffffff;
  text-align: center;
  background: #5a9ed6;
}

.pdf {
  grid-area: pdf;
  padding-bottom: 1em;
}

.pdf-show {
  grid-area: pdf-show;
  padding-bottom: 1em;
}

.left {
  float: left;
}

.middle {
  float: middle;
}

.right {
  float: right;
}

/* EMPTY FOLDER */
.container-empty-folder {
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  margin: 2em 0;
}

.empty-folder-icon {
  font-size: 4em;
}

.empty-folder-text {
  font-size: 16pt;
  font-weight: bold;
  text-align: center;
}

/* GRID */
.grid-notification {
  display: grid;
  grid-template-columns: 1fr;
}

/* PROJECT */
.grid-project-split {
  display: grid;
  grid-column-gap: 5em;
  grid-template-columns: auto minmax(250px, max-content);
}

.grid-project-split .container-project-data .project-title {
  font-size: 22pt;
  font-weight: bold;
  line-height: 1.25;
}

.grid-project-split .container-project-data .project-number {
  font-weight: bold;
  line-height: 1.25;
  margin-bottom: 10px;
}

.grid-project-split .container-project-data .project-description {
  line-height: 1.5;
}

.grid-project-split .container-project-contact > div {
  margin-bottom: 1em;
}

.grid-project-split .container-project-contact > div:last-child {
  margin-bottom: 0;
}

.grid-project-split .container-project-contact {
  width: max-content;
}

.grid-project-split .container-project-contact .project-contact {
  line-height: 1.25;
}

.grid-project-split .container-project-contact .contact-title {
  font-size: 14pt;
  font-weight: bold;
  margin-bottom: 3px;
}

.container-project-table {
  display: flex;
  width: 100%;
  overflow-x: auto;
  scroll-snap-type: x mandatory;
}

.container-project-table > div {
  margin-right: 10px;
}

.container-project-table > div:last-child {
  margin-right: 0;
}

.container-project-table .project-table-column {
  display: flex;
  flex-direction: column;
  flex-grow: 1;
  height: min-content;
  height: 600px;
  max-height: 600px;
  min-width: 300px;
  width: 300px;
  max-width: 50%;
  padding-bottom: 15px;
  background-color: rgba(62, 62, 62, 0.5);
  border-radius: 5px;
  scroll-snap-align: center;
  scroll-snap-stop: normal;
}

.container-project-table .column-height-newsfeed {
  height: 300px !important;
  max-height: 300px !important;
}

.container-project-table .project-table-column-title {
  display: flex;
  justify-content: space-between;
  align-items: center;
  min-height: 50px;
  height: 50px;
  padding: 0 15px;
  background-color: #3e3e3e;
  font-size: 14pt;
  font-weight: bold;
  color: #fff;
  border-radius: 5px 5px 0 0;
}

.container-project-table .project-table-column-title .column-title {
  position: relative;
  padding-right: 18px;
}

.container-project-table .new-button {
  box-shadow: unset;
}

.container-project-table .project-table-column-title .container-row-filter {
  position: relative;
  cursor: pointer;
  margin-left: 15px;
}

.container-project-table .container-column-sort-menu {
  display: none;
  flex-direction: column;
  position: absolute;
  top: 0;
  right: 25px;
  width: max-content;
  padding: 10px;
  font-size: 12pt;
  color: #585858;
  background-color: #ffffff;
  border-radius: 5px;
  box-shadow: 2px 2px 5px grey;
  z-index: 50;
}

.container-project-table .container-column-sort-menu > div:hover {
  color: #5a9ed6;
}

.container-project-table .project-table-column-content {
  margin: 5px;
  padding: 5px;
  min-height: 60px;
  height: 100%;
  overflow-y: scroll;
  overflow-x: hidden;
}

.container-project-table .container-project-column-content {
  display: flex;
  flex-direction: column;
  height: 100%;
}

.container-project-table .container-project-column-content > div {
  margin-bottom: 10px;
}

.container-project-table .container-project-column-content > div:last-child {
  margin-bottom: unset;
}

.wrapper-scroll {
  height: 100%;
}

.container-project-table
  .project-table-column-content
  .placeholder-project-column {
  display: flex;
  justify-content: center;
  align-items: center;
  height: 100%;
  font-size: 14pt;
  color: #fffef7;
}

/* PROJECT HEAD */
.grid-project-head {
  margin: 1em 0;
  display: grid;
  grid-gap: 1em;
  grid-template-columns: 1fr;
}

.grid-project-head.clientPage {
  grid-template-areas:
    "company-logo"
    "contact-info"
    "project-info";
}

.grid-project-head.vendorPage {
  grid-template-areas:
    "project-info"
    "project-info"
    "contact-info";
}

.container-logo.clientPage {
  grid-area: company-logo;
  width: 250px;
  height: 60px;
  margin-bottom: 15px;
}

.container-logo.vendorPage {
  display: none;
}

.company-logo > img {
  object-fit: cover;
}

.container-project-info {
  grid-area: project-info;
  display: flex;
  flex-direction: column;
}

.container-project-info > div {
  line-height: 1.5;
}

.container-project-info > #company-project-leader {
  display: none;
  margin-top: 10px;
}

.container-project-info > #company-project-leader > a {
  font-weight: bold;
}

.container-project-info > .project-title {
  display: flex;
  font-weight: bold;
  padding-bottom: 5px;
  cursor: pointer;
}

.container-project-info > .project-title:hover {
  color: #afca0f;
}

.container-project-info > h1 {
  display: flex;
  align-items: baseline;
  line-height: 1.1;
}

.title-info {
  display: none;
  font-size: 22pt;
  color: red;
  margin-left: 10px;
}

.container-contact-info {
  grid-area: contact-info;
  line-height: 1.5;
  width: max-content;
}

#company-name,
#company-street,
#company-city,
#company-telephone,
#company-email,
#person-title,
#contact-name,
#contact-telephone,
#contact-mobile,
#contact-email {
  display: none;
}

#person-title {
  padding-top: 8px;
}

#company-info {
  margin-bottom: 0.5em;
}

.contact-info-icon {
  width: 24px;
  text-align: center;
  padding-right: 3px;
}

.container-contact-action {
  display: flex;
  justify-content: flex-end;
}

.container-contact-action > div {
  margin-right: 10px;
}

.cockpit-table {
  width: 100%;
}

.cockpit-table-tr {
  display: block;
  border-top: 1px solid #b4b9b9;
  border-bottom: 1px solid #b4b9b9;
}

.cockpit-table-tr:hover {
  background-color: RGB(175, 202, 15, 0.3);
}

.cockpit-table-td {
  display: block;
  position: relative;
  padding: 20px 1em;
}

.cockpit-table-td > .cockpit-table-bttns-container {
  display: flex;
  justify-content: space-between;
  align-items: center;
  height: 30px;
  position: absolute;
  right: 20px;
  top: 50%;
  margin-top: -15px;
  border: 1px solid black;
  border-radius: 5px;
  padding: 0 10px;
  background-color: whitesmoke;
}

.cockpit-table-td > .cockpit-table-bttns-container > form {
  display: flex;
  justify-content: space-between;
  width: 60px;
}

.cockpit-table-td > .cockpit-table-bttns-container > form > button {
  font-size: 20px;
  color: #585858;
  cursor: pointer;
  background-color: transparent;
  border: none;
}

.cockpit-table-td
  > .cockpit-table-bttns-container
  > form
  > .cockpit-table-accept-bttn:hover {
  color: #afca0f;
}

.cockpit-table-td
  > .cockpit-table-bttns-container
  > form
  > .cockpit-table-refuse-bttn:hover {
  color: #b24848;
}

/* NEW AND MODIFY PAGES */

.grid-newmod-company {
  display: grid;
  padding-bottom: 5em;
  padding-left: 1em;
  padding-right: 1em;
  margin-top: 0em;
  grid-template-columns: minmax(250px, 767px);
  grid-template-areas:
    "title"
    "compic"
    "inputfield1"
    "inputfield2"
    "inputfield3"
    "inputfield4"
    "inputfield5"
    "inputfield6"
    "inputfield7"
    "inputfield8"
    "inputfield9"
    "inputfield10"
    "bttn"
    "subtitle"
    "notification"
    "grid-abo-setting";
}

/* NEW AND MODIFY PAGES */
.container-new-project {
  border-radius: 5px;
  padding: 10px 20px;
}

.container-new-project > h1 {
  margin-bottom: 10px;
}

.container-new-project textarea {
  height: 200px;
}

.grid-new-project {
  display: grid;
  grid-template-columns: 1fr;
  grid-gap: 1em;
}

.flex-new-project > div {
  max-width: 50%;
}

.container-new-project .container-project-switch {
  display: flex;
  justify-content: center;
  margin-top: 50px;
}

.compic {
  display: grid;
  grid-area: compic;
  grid-row-gap: 0.5em;
  grid-template-columns: 1fr 1fr 1fr;
  grid-template-areas: "logo-img logo-img logo-img";
}

.company-logo {
  width: 100%;
}

/* Import Customer */
.multi-customer-container {
  grid-area: multi-customer-container;
  text-align: center;
  border: 2px dashed #999998;
  margin-top: 2em;
  margin-bottom: 2em;
  padding-top: 1em;
  padding-bottom: 1em;
}

.customer-import-icons {
  text-align: center;
  display: flex;
  justify-content: center;
  text-align: center;
  padding-top: 1em;
  font-weight: bold;
}

.import-icon-size {
  font-size: 3em;
}

.import-icon-size-2 {
  font-size: 2em;
}

.import-icon-container {
  font-size: 9pt;
}

.import-icon-container > i {
  display: block;
}

.import-icon-container > span {
  display: block;
  text-transform: uppercase;
}

.customer-import-icons > i {
  padding: 0.4em;
}

.customer-import-icons > a:hover {
  color: #5a9ed6 !important;
}

.customer-import-icons > label:hover {
  color: #5a9ed6 !important;
  cursor: pointer;
}

/* Project Navigation */
.project-nav {
  display: grid;
  grid-template-columns: 70px 70px 70px;
  grid-template-areas: "previous-one back-to-dash next-one";
  position: fixed;
  bottom: 70px;
  left: 50%;
  transform: translate(-50%, 0);
  background-color: #ffffff;
  border-radius: 30px;
  box-shadow: 1px 1px 4px 0px #585858;
  padding-top: 0.4em;
  z-index: 79;
}

.flexbox {
  display: flex !important;
}

/* Individual company logo */
.logo-img {
  grid-area: logo-img;
  justify-self: left;
  width: 80%;
  min-width: 100px;
  max-width: 500px;
  max-height: 150px;
  object-fit: cover;
}

.back-to-dash {
  grid-area: back-to-dash;
  width: 100%;
  height: 50px;
  text-align: center;
}

.previous-one {
  grid-area: previous-one;
  width: 100%;
  height: 50px;
  text-align: center;
}

.previous-one-nofunction {
  grid-area: previous-one;
  width: 100%;
  height: 50px;
  text-align: center;
  pointer-events: none;
  cursor: default;
}

.next-one {
  grid-area: next-one;
  justify-self: end;
  width: 100%;
  height: 50px;
  text-align: center;
}

.next-one-nofunction {
  grid-area: next-one;
  justify-self: end;
  width: 100%;
  height: 50px;
  text-align: center;
  pointer-events: none;
  cursor: default;
}

.edit-pen {
  position: relative;
  top: -65px;
  left: 100%;
}

.container-prefix-number {
  display: grid;
  grid-column-gap: 0.5em;
  grid-template-columns: minmax(auto, 15%) minmax(auto, 85%);
}

.container-street-number {
  display: grid;
  grid-column-gap: 0.5em;
  grid-template-columns: minmax(auto, 80%) minmax(auto, 20%);
}

.container-zip-city {
  display: grid;
  grid-column-gap: 0.5em;
  grid-template-columns: minmax(auto, 30%) minmax(auto, 70%);
}

.container-input {
  position: relative;
}

.input,
.input-static {
  box-sizing: border-box;
  width: 100%;
  border: none;
  border-radius: 0;
  border-bottom: 1px solid #999998;
  padding: 5px 5px 1px 5px;
  margin-bottom: 1em;
  -webkit-appearance: none;
  background-color: transparent;
}

.input-label-empty {
  position: absolute;
  top: 3px;
  left: 5px;
  color: #5a9ed6;
  transition: top 0.3s, font-size 0.3s;
  z-index: 0;
}

.input-label-filled {
  position: absolute;
  top: -4px;
  left: 5px;
  font-size: 6pt;
  color: #5a9ed6;
  transition: top 0.3s, font-size 0.3s;
  z-index: 0;
}

.input-noSelect {
  color: #989898;
}

/* EDITABLE INPUT FIELD */
.edit-input {
  box-sizing: border-box;
  width: 100%;
  padding: 0 5px;
  margin-top: 2px;
  margin-right: 5px;
  line-height: 1.2;
  font-size: 11pt;
  border: 1px dashed #585858;
  border-radius: 5px;
  background-color: transparent;
  resize: none;
}

.static-input {
  padding: 0 5px;
  margin-top: 2px;
  margin-right: 5px;
  line-height: 1.2;
  font-size: 11pt;
  border: unset;
  border-bottom: 1px solid #999998;
  background-color: #fff;
  resize: none;
}

.readonly {
  cursor: default;
  height: 100%;
  border: none;
  padding: unset;
  margin: unset;
  /* for Firefox */
  -moz-appearance: none;
  /* for Chrome */
  -webkit-appearance: none;
}

.readonly > option {
  padding: unset;
}

.container-editable-text {
  position: relative;
}

.container-editable-text div {
  position: absolute;
  top: -0.5em;
  left: 0;
  color: #5a9ed6;
  font-weight: normal;
  font-size: 8pt;
  cursor: default;
}

.container-editable-text .editable-input {
  opacity: 0.8;
  border: none;
  padding: unset;
  background-color: transparent;
  font-size: inherit;
  font-weight: inherit;
  line-height: inherit;
}

/* For IE10 */
.readonly::-ms-expand {
  display: none;
}

.storno-input {
  width: 50%;
}

.inputfield1 {
  grid-area: inputfield1;
  vertical-align: middle;
  text-align: center;
}

.inputfield2 {
  grid-area: inputfield2;
  vertical-align: middle;
  text-align: center;
}

.inputfield3 {
  grid-area: inputfield3;
  vertical-align: middle;
  text-align: center;
}

.inputfield4 {
  grid-area: inputfield4;
  vertical-align: middle;
  text-align: center;
}

.inputfield5 {
  grid-area: inputfield5;
  vertical-align: middle;
  text-align: center;
}

.inputfield6 {
  grid-area: inputfield6;
  vertical-align: middle;
  text-align: center;
}

.inputfield7 {
  grid-area: inputfield7;
  vertical-align: middle;
  text-align: center;
}

.inputfield8 {
  grid-area: inputfield8;
  vertical-align: middle;
  text-align: center;
}

.inputfield9 {
  grid-area: inputfield9;
  vertical-align: middle;
  text-align: center;
}

.inputfield10 {
  grid-area: inputfield10;
  vertical-align: middle;
  text-align: center;
}

.inputfield11 {
  grid-area: inputfield11;
  vertical-align: middle;
  text-align: center;
}

.inputfield12 {
  grid-area: inputfield12;
  vertical-align: middle;
  text-align: center;
}

.inputfield13 {
  grid-area: inputfield13;
  vertical-align: middle;
  text-align: center;
}

.inputfield14 {
  grid-area: inputfield14;
  vertical-align: middle;
  text-align: center;
}

.klickarea {
  grid-area: klickarea;
  vertical-align: middle;
  text-align: center;
}

.input:hover {
  border: none;
  border-bottom: 2px solid #afca0f;
  box-shadow: 2px 2px 4px 0px #999998;
  padding-bottom: 0px;
}

.input:focus {
  border: 1px #999998;
  border-bottom: 2px solid #5a9ed6;
  box-shadow: 2px 2px 4px 0px #999998;
  padding-bottom: 0px;
}

/* UPLOAD PDF/PHOTO */

.grid-upload {
  display: grid;
  padding-left: 1em;
  padding-right: 1em;
  padding-bottom: 2em;
  grid-template-columns: minmax(250px, 767px);
  grid-template-areas: "project" "leader" "description" "upload" "bttn" "table";
}

.project {
  grid-area: project;
  align-self: center;
}

.leader {
  grid-area: leader;
  align-self: center;
  text-align: right;
}

.description {
  grid-area: description;
  align-self: flex-start;
}

.upload {
  grid-area: upload;
}

.table {
  grid-area: table;
}

.header {
  grid-area: header;
}

.title {
  grid-area: title;
  text-align: left;
  padding-top: 2em;
}

.subtitle {
  grid-area: subtitle;
}

.picture {
  grid-area: picture;
  justify-self: center;
  align-self: flex-end;
}

/* REGISTRATION AND LOGIN */
.grid-login {
  display: grid;
  height: min-content;
  padding-top: 6em;
  padding-bottom: 12em;
  grid-template-columns: minmax(8px, 1fr) minmax(340px, 400px) minmax(8px, 1fr);
  grid-auto-rows: min-content;
  grid-template-areas:
    ". title ."
    ". inputfield1 ."
    ". inputfield2 ."
    ". inputfield3 ."
    ". inputfield4 ."
    ". inputfield5 ."
    ". inputfield6 ."
    ". inputfield7 ."
    ". inputfield8 ."
    ". klickarea .";
}

.google-sign-in-pic {
  width: 100%;
  height: 100%;
}

/* Footer */

#footer {
  display: none;
}

.footerlogo {
  grid-area: footerlogo;
  align-self: center;
  text-align: center;
}

.footersection1 {
  grid-area: footersection1;
}

.footersection2 {
  grid-area: footersection2;
}

.footerfollow {
  grid-area: footerfollow;
}

#footer p {
  font-family: Arial, Helvetica, sans-serif;
  color: #999998;
  font-size: 24px;
}

.footertitle {
  font-size: 16pt;
  font-weight: bold;
  text-align: left;
  margin-bottom: 0em;
  margin-top: 0.5em;
}

.footerlink {
  line-height: 1.2em;
  list-style-type: none;
  margin-top: 0em;
  padding-left: 0;
}