:root {
  --main-bg-color:  #eceef0;
  --mild-black:     #4a4a4a;
  --mild-blueblack: #495c7e;
  --yellow:         #fbbc04;


  --pastel-yellow:  #faedcb;
  --pastel-green:   #c9e4de;
  --pastel-blue:    #c6def1;
  --pastel-purple:  #dbcdf0;
  --pastel-pink:    #f2c6de;
  --pastel-orange:  #f7d9c4;
}

* {
  box-sizing: border-box;
  line-height: 1;
  /* transition: .3s ease-in-out, margin 0s, padding 0s; */
}

html, body {
  width: 100%;
  height: 100%;
  margin: 0;
  padding: 0;
}
body {
  font-family: "Open sans", sans-serif;
  /* color: rgba(0, 0, 0, 0.9); */
  color: var(--mild-black);
  background-color: var(--main-bg-color);
  -webkit-font-smoothing: antialiased;
  font-size: 15px;
}

header {
  background-color: white;
  box-shadow: 0 4px 8px 0 rgba(0, 0, 0, 0.1), 0 6px 20px 0 rgba(0, 0, 0, 0.1);
  padding: 1.5em 1.5em 0 1.5em;
}

header img {
  width: 100%;
}
.logoContainer {
  margin-right: 2em;
}
.nameContainer {
  /* padding-top: 0.25em; */
}

.nameContainer h2 {
  margin: 0 0 0 0;
  padding: 0;
  font-size: 1.5em;
  font-weight: 400;
}

.menuButton {
  padding: 0.25em;
  border-radius: 0.25em;
  /* font-size: 2em; */
}
.menuButton:hover {
  cursor: pointer;
  background-color: #eee;
}

.menu_mobile {
  display: none;
}

.start {
  max-width: 50em;
}
h1, h2, h3, h4 {
}

input {
  color: inherit;
}



nav {
  position: fixed;
  top: 0;
  right: 0;
  padding: 1em;
  background-color: #fff;
  width: 20em;
  height: 100%;
  box-sizing: border-box;
  z-index: 2;
  box-shadow: 0 4px 8px 0 rgba(0, 0, 0, 0.1), 0 6px 20px 0 rgba(0, 0, 0, 0.1);
  display: none;
}

nav ul {
  font-size: 1em;
  font-weight: 400;
  margin: 0;
  padding: 1.5em 0;
  border-bottom: 1px solid #eee;
}

nav ul:first-of-type {
  margin: 10em 0 0;
}

nav ul:last-of-type {
  border: none;
}

nav li {
  margin: 0 0 0.75em;
}

nav li:hover {
  cursor: pointer;
  text-decoration: underline;
}

nav li .material-icons {
  margin-right: 0.5em;
}

nav .close {
  font-size: 1.5em;
  color: inherit;
}

.navBg {
  width: 100%;
  height: 100%;
  min-height: 100%;
  position: fixed;
  top: 0;
  right: 0;
  background-color: rgba(22, 24, 26, 0.32);
  display: none;
  z-index: 1;
}


footer img {
  max-height: 2em;
}

table {
  margin: auto;
}
td {
  padding: 0.5em;
  white-space: nowrap;
}

.top-section {
  display: flex;
  padding: 1em;
}

.main-section {
  min-height: calc(100% - 10em);
  display: flex;
  padding: 1em;
}

.left-column {
  flex: 1;
  border-right: 1px solid lightgray;
  padding: 0 1em 0 0;
}

.main-column {
  flex: 2;
  padding: 0 1em 0 1em;
}

.right-column {
  flex: 2;
  border-left: 1px solid lightgray;
  padding: 0 0 0 1em;
}

footer {
  background-color: #333537;
  overflow: hidden;
  height: 20em;
  color: rgba(255, 255, 255, 0.75);
}
.footerTable {
  width: 80%;
  margin: 1em auto;
}
.footerTable td {
  /* border: 1px solid white; */
  vertical-align: top;
  width: 33%;
  white-space: normal;
}
.seeThrough {
  opacity: 0.75;
}

/* Responsive layout - makes the menu and the content (inside the section) sit on top of each other instead of next to each other */
/* @media (max-width: 600px) {
  section {
    -webkit-flex-direction: column;
    flex-direction: column;
  }
} */

hr {
  border: 0;
  border-top: 1px solid #ccc;
  margin: 2em 0;
}

h1 {
  font-size: 2em;
  margin-top: -0.05em;
  font-weight: bold;
}

h1.startPage {
  font-size: 2.5em;
  font-family: "Protest Riot", sans-serif;
  font-weight: 400;
  font-style: normal;
  color: #166ea7;
  /* text-shadow: 0px 0px 6px rgba(0,0,0,.3); */
}
section h1 {
  margin: 1em 0 0.5em 0;
}
h3 {
  font-size: 1.25em;
  font-weight: bold;
  margin: 0 0 0.75em;
  color: var(--mild-blueblack);
}
h4 {
  font-size: 1em;
  font-weight: 600;
  padding: 0.5em 1em;
  background-color: rgba(0,0,0,0.5);
  color: white;
  margin: 2em 0 0.5em 0;
}
h5 {
  background-color: rgba(0, 0, 0, 0.1);
  padding: 0.25em;
  font-weight: bold;
  margin: 1em 0 0 0;
}
.thin {
  font-weight: 400;
}
p, ul {
  margin: 1em 0 1em 0;
  line-height: 1.25;
}
a, .link {
  color: var(--mild-blueblack);
  text-decoration: none;
  font: inherit;
}
a:hover, .link:hover {
  cursor: pointer;
  text-decoration: underline;
}

.iconButton {
  opacity: 0.5;
  border-radius: 0.25em;
  padding: 0.2em;
}
.iconButton:hover {
  opacity: 1;
  cursor: pointer;
  background-color: #eee;
}

.material-icons {
  vertical-align: text-bottom;
  font-size: 1.5em;
}

.box {
  box-shadow: 1px 1px 1px rgba(0,0,0,.1);
  border-radius: 4px;
  background-color: white;
  padding: 1em 1em;
  border: 1px solid #e7eaf0;
  margin: 0 0 1em 0;
  position: relative;
  overflow: hidden;
}

.tight_box {
  box-shadow: 1px 1px 1px rgba(0,0,0,.1);
  border-radius: 4px;
  background-color: white;
  padding: 0em 0.5em 0.25em;
  border: 1px solid #e7eaf0;
  margin: 0 0 1em 0;
  position: relative;
  overflow: hidden;
}

.tight_box h5 {
  margin: -0.25em -0.5em 0.5em;
  padding: 0.75em 0.5em 0.5em;
}

.tight_box label {
  display: inline-block;
  font-weight: 600;
}

.tight_box .material-icons {
  vertical-align: sub;
}

.column {
  height: 100%;
  display: inline-block;
  vertical-align: top;
  padding: 1em;
  margin: 0;
  border-right: 1px solid gray;
}

.column:last-child {
  margin: 0 0 1em 0;
  border: none;
}

h2 {
  font-size: 1.5em;
  font-weight: 600;
  margin: 0.5em 0 1em;
}


.align-left {
  text-align: left;
}
.align-center {
  text-align: center;
}
.align-right {
  text-align: right;
}
.align-middle {
  align-items: center;
}

.bg_green {
  background-color: #34a853;
}
.bg_red {
  background-color: #a83434;
}
.bg_gray {
  background-color: gray;
}
.bg_yellow {
  background-color: #fbbc04;
}
.bg_blue {
  background-color: #2c78e7;
}
.bg_lightyellow {
  background-color: lightyellow;
}

.color_green {
  color: #34a853;
}
.color_red {
  color: #a83434;
}
.color_gray {
  color: gray;
}
.color_yellow {
  color: #fbbc04;
}
.color_blue {
  color: #2c78e7;
}
.color_white {
  color: white;
}

label {
  display: block;
  margin: 0.25em 0 1em;
  padding: 0 0.25em;
  font-size: 1em;
}

.ajaxInput {
  background-color: transparent;
  border: none;
  padding: 0;
  margin: 0;
  font: inherit;
  max-width: calc(100% - 2em);
}
.ajaxInput:hover {
  border: none;
  border-bottom: 1px dashed gray;
}
.ajaxInput.nodash:hover {
  border: none;
}
.dashed {
  border: none;
  border-bottom: 1px dashed gray;
}
.ajaxNumber {
  width: 6em;
}
.ajaxInput:focus {
  outline: none;
  background-color: lightyellow;
  border-bottom: 1px dashed gray;
}

.semi_bold {
  font-weight: 600;
}

.postInput {
  font: inherit;
  width: 100%;
  min-height: 2.5em;
  border: none;
  border-bottom: 1px dashed gray;
  padding: 0.5em 1em;
  line-height: 1.5;
  appearance: none;
}

.box .postInput {
  background-color: #f2f2f2;
}

.postInput:focus {
  outline: none;
  border-bottom: 1px dashed black;
  background-color: lightyellow;
}
.bold {
  font-weight: bold;
}

.large {
  font-size: 2em;
  height: 2em;
}

.air {
  line-height: 1.5;
}


.width20em {
  width: 20em;
}

.width40em {
  width: 40em;
}
.width50em {
  width: 50em;
}

.float {
  float: left;
  margin: 0 1em 1em 0;
}

.float:last-child {
  margin: 0;
}

.halfWidth {
  width: 50%;
  float: left;
}
.fullWidth {
  width: 100%;
}


/* --------- DOCUMENT --------- */


.bg_lightgreen {
	background-color:lightgreen;
}
.bg_lightcoral {
	background-color:lightcoral;
}
i {
  vertical-align: middle;
}

/* --------- ATTENDANT --------- */

.attendant {
	/* float:left;
	margin: 1em 2em 1em 0em;
	padding:0.5em;
	background-color: #fff;
	min-width:250px;
	min-height:330px;
	position: relative; */
}

.attendant h3 {
  font-weight: 400;
}

.attendant p {
  margin: 0;
}

.attendant_fields p {
  margin: 0.5em 0;
}

.attendant:last-of-type {
  margin-right: 0em;
}

h4.attendant_name {
  margin: -0.35em -0.35em 1em;
	font-size: 1.5em;
	font-family: 'Nunito', sans-serif;
	background-color: #e1e8e2;
	padding: 0.5em 0.5em 0.5em;
	color: #5a5555;
	vertical-align: bottom;
}
h4.attendant_name i {
  font-size: 2em;
  color: #60c0b2;
  margin-bottom: 0em;
  vertical-align: bottom;
}

.loading_attendant_transaktions {
  margin: 1em;
  text-align: center;
  display: none;
}
.loading_attendant_transaktions img {
  height: 3em;
}

.attendant_table {
  width: 100%;
}
.attendant_table th {
  padding: 0.2em;
}
.attendant_table td {
  padding: 0.2em;
}
.attendant_table_top_row {
  text-align: center;
  text-transform: uppercase;
  font-weight: bold;
  font-size: 0.75em;
}
.attendant_table_second_row {
  text-align: center;
  font-weight: bold;
  font-size: 1.5em;
}
.will_get, .will_pay {
  display: none;
}

.attendant ul {
  margin-top: 1em;
  font-size: 1em;
}

.attendant ul li {
  margin-bottom: 0.5em;
}


/* --------- COST --------- */

.cost {
	/* float:left;
	margin: 1em 2em 1em 0em;
	padding:0.5em;
	background-color: #fff;
	width:250px;
	min-height:330px;
	position: relative; */
}
.cost h3 {
  margin: 0;
}
.cost p {
  /* margin: 0; */
}
.cost img {
  max-width: 100%;
}
.costName {
  font-weight: 400;
}
.cost_attendant {
  display: inline-block;
	margin:0.2em;
	padding:0.2em;
	background-color: rgba(255, 255, 255, 0.5);
}

.delete {
  /* margin-bottom: -2em; */
}

h4.cost_name {
  margin: -0.35em -0.35em 1em;
	font-size: 1.5em;
	font-family: 'Nunito', sans-serif;
	background-color: #efe9e6;
	padding: 0.5em 0.5em 0.5em;
	color: #5a5555;
	vertical-align: bottom;
}

h4.cost_name i {
  font-size: 2em;
  color: #d5605e;
  margin-bottom: 0em;
  vertical-align: bottom;
}



.cost form {
  /* display: none; */
}
.cost_attendant {
  line-height: 1.5;
  width: 100%;
}
.cost_attendant h5 {
  font-family: 'Nunito', sans-serif;
  color: #d5605e;
  font-size: 1.2em;
}
.cost_attendant table {
  width: 80%;
}
.cost_right {
  text-align: right;
}


.costAttendants {
  /* display: none; */
}

.flexColumns {
  display: flex;
  flex-direction: column;
}
.flexRows {
  display: flex;
  flex-direction: row;
}
.flex1 {
  flex: 1;
}
.flex2 {
  flex: 2;
}
.flex3 {
  flex: 3;
}
.flex4 {
  flex: 4;
}
.width1em {
  width: 1em;
}
.width4em {
  width: 4em;
}
.width6em {
  width: 6em;
}
.width10em {
  width: 10em;
}
.width20em {
  width: 20em;
}

thead {
}

thead tr {
  border-bottom: 2px solid #252525;
  font-weight: bold;
}

.button {
  font-size: inherit;
}
.button img {
  max-height: 1.25em;
  vertical-align: sub;
}

.expandContainer {
  display: none;
}

.totalCosts {
  /* margin-left: 1em; */
}

.redBoarder {
  border: 1px solid red;
}

.noWrap {
  white-space: nowrap;
}

.small {
  font-size: 1em;
}

.smaller {
  font-size: 0.75em;
}

.previousContainer span {
  font-weight: bold;
  color: var(--mild-blueblack);
}

.previousContainer {
  padding: 0.4em 0;
  text-align: right;
}

.previousContainer a:hover {
  text-decoration: underline;
}

.cost p.costPayer {
  margin: 0.5em 0 0 0.25em;
}
.cost p.costDate {
  margin: 0.5em 0 0 0.25em;
}
.cost p.costPlace {
  margin: 0.5em 0 0 0.25em;
}

.cost .costDescription {
  margin: 2em 0 1em 0;
  max-width: 100%;
}

.splash {
  background-image: var(--start-bg-image);
  background-repeat: no-repeat;
  background-size: cover;
  background-position: center;
  margin: -1em -1em -1em 0;
}


.dropzone:hover {
  cursor: pointer;
}

header .dropzone {
  margin-top: -1.5em;
  margin-bottom: -1.5em;
  padding: 1.5em 0;
}

.cost .dropzone {
  margin: 1em 0;
  background-color: rgba(0, 0, 0, 0.05);
  padding: 1em;
  text-align: center;
}

.cost p.costImage {
  margin: 0 0 1em 0;
}

.uploadCostImage {
  position: relative;
}

.progressBarContainer {
  width: 100%;
  height: 1em;
  border-radius: 0.5em;
  position: relative;
  overflow: hidden;
}
.progressBar {
  background-color: rgba(0, 255, 0, 0.75);
  width: 0%;
  height: 100%;
  position: absolute;
  top: 0;
  left: 0;
  color: green;
  text-align: right;
  /* font-weight: bold; */
  overflow: hidden;
}

.fetchingChangesBg {
  position: fixed;
  width: 100%;
  height: 100%;
  top: 0;
  left: 0;
  background-color: rgba(0, 0, 0, 0.5);
  z-index: 1;
  display: none;
  align-items: center;
  justify-content: center;
}

.fetchingChanges {
  padding: 2em;
  border: 1px solid green;
}

.modalBg {
  width: 100%;
  height: 100%;
  min-height: 100%;
  position: fixed;
  top: 0;
  left: 0;
  background-color: rgba(22, 24, 26, 0.32);
  display: none;
  justify-content: center;
  align-items: center;
  z-index: 1;
  padding: 2em;
}
.modalWrapper {
  position: relative;
  /* width: calc(100% - 5em);
  height: calc(100% - 5em); */
  background-color: white;
  display: flex;
  padding: 5em;

  /* height: calc(100vh - 5em); */
  max-width: calc(100% - 5em);
  /* top: 48px; */
  /* width: 75em; */
  border-radius: 1.5em;
  box-shadow: 0 8px 16px rgba(0, 0, 0, .12), 0 0 0 1px hsla(0, 0%, 100%, 0.08);
  max-height: 100%;
}

.modalContent {
  max-width: 100%;
  overflow: auto;
}

.close {
  position: absolute;
  top: 0.5em;
  right: 0.5em;
  padding: 0.25em;
  border-radius: 0.25em;
  font-size: 2em;
  color: #707f8f;
}
.close:hover {
  cursor: pointer;
  background-color: #eee;
}

.maxWidth10 {
  max-width: 10em;
}

.overflowDots {
  overflow: hidden;
  text-overflow: ellipsis;
}


.error {
  background-color: rgb(250, 226, 227);
  color: rgb(236, 85, 93);
  padding: 0.5em 1em;
  margin: 1em 0em;
  border-radius: 0.25em;
}

.error p {
  margin: 0.5em;
}

.error ul {
  margin: 0.5em 0em;
  list-style: disc;
}

.error li {
  margin: 0 0 0 2em;
}

.info {
  background-color: rgb(219, 239, 251);
  /* color: rgb(133, 200, 250); */
  padding: 0.5em 1em;
  margin: 1em 0em;
  border-radius: 0.25em;
}

.hidden {
  display: none;
}

.login h3 {
  font-size: 1em;
  color: gray;
}

.loginField {
  background-color: gray;
}

.login .button {
  font-size: 1em;
  padding: 0.25em 0.5em;
}


.subNav {
  margin: 0 0 1em;
  font-family: 'Barlow', sans-serif;
  display: flex;
  vertical-align: middle;
  padding-top: 0.25em;
}
.subNav li {
  display: inline-block;
  /* background-color: var(--mild-blueblack); */
  border: 1px solid var(--mild-blueblack);
  padding: 0.5em 1em;
  font-weight: bold;
  font-size: 0.8em;
  text-transform: uppercase;
  color: var(--mild-blueblack);
  margin: 0 0 0 -0.4em;
  text-align: center;
}

.subNav li:hover {
  cursor: pointer;
}

.subNav li:first-child {
  border-top-left-radius: 0.3em;
  border-bottom-left-radius: 0.3em;
  margin: 0;
}

.subNav li:last-child {
  border-top-right-radius: 0.3em;
  border-bottom-right-radius: 0.3em;
}
.subNav li a {
  /* color: var(--mild-blueblack); */
}

.subNav li.marked a {
  color: white;
  background-color: var(--mild-blueblack);
}

.subNav li.marked {
  color: white;
  background-color: var(--mild-blueblack);
}

.costsCards, .costsTable {
  display: none;
}

.costsTable td {
  max-width: 8em;
}

div.show {
  display: block;
}

table.show {
  display: table;
}

.hide {
  display: none;
}

.updating {
  background-color: lightgreen !important;
}

.deleting {
  background-color: lightcoral !important;
}

input.apple-switch {
  position: relative;
  -webkit-appearance: none;
  outline: none;
  width: 50px;
  height: 30px;
  background-color: #fff;
  border: 1px solid #D9DADC;
  border-radius: 50px;
  box-shadow: inset -20px 0 0 0 #fff;
}

input.apple-switch:after {
  content: "";
  position: absolute;
  top: 1px;
  left: 1px;
  background: transparent;
  width: 26px;
  height: 26px;
  border-radius: 50%;
  box-shadow: 2px 4px 6px rgba(0,0,0,0.2);
}

input.apple-switch:checked {
  box-shadow: inset 20px 0 0 0 #4ed164;
  border-color: #4ed164;
}

input.apple-switch:checked:after {
  left: 20px;
  box-shadow: -2px 4px 3px rgba(0,0,0,0.05);
}

.addCostRowContainer {
  display: none;
}

.label_wrap {
  position: relative;
  /* margin: 1em 0 0 0; */
}

.label_wrap label {
  color: #666;
  padding: 0.5em 1em;
  position: absolute;
  top: 0;
  left: 0;
  transition:0.2s ease all;
  -moz-transition:0.2s ease all;
  -webkit-transition:0.2s ease all;
  pointer-events: none;
  background-color: #f2f2f2;
}

.label_wrap input:focus + label, .label_wrap input:not(:placeholder-shown) + label, .label_wrap select + label, .label_wrap [type=date] + label, .label_wrap [type=month] + label, .label_wrap textarea:focus + label {
  font-size: 0.75em;
  top: -0.75em;
  left: 0;
  /* background: #ffffff; */
  /* background-color: lightyellow; */
  padding: 0 1em;
}

.label_wrap input::placeholder, .label_wrap textarea::placeholder, .label_wrap select::placeholder {
  color: transparent;
}

.startPageList {
  list-style: disc;
  padding-left: 1.5em;
  margin-bottom: 1em;
}

.addButton {
  text-align: center;
  font-size: 0.75em;
  /* padding: 1em 0.25em; */
  padding: 0.5em;
  /* border-bottom: 1px solid var(--mid-mid-gray); */
  /* height: 7em; */
  border-radius: 0.25em;
  display: inline-block;
}

.addButton .material-icons {
  font-size: 3em;
}

.addButton:hover {
  background-color: #fff;
  cursor: pointer;
}

.meMy {
  border-left: 0.25em solid #269CE9;
}

.costSettings {
  /* margin: 1em 0; */
}

.nordeaAction:hover {
  cursor: pointer;
}

.analyzingUpload {
  font-weight: bold;
  color: var(--mild-blueblack);
}

.analyzingUpload img {
  vertical-align: bottom;
}

.somethingWentWrong {
  font-weight: bold;
  color: lightcoral;
}

.groupActivitiesWrapper {
  overflow: hidden;
  width: 100%;
}

.groupActivities {
  white-space: nowrap;
  overflow: auto;
  padding: 0;
  margin: 1em 0 0;
}

.groupActivities::-webkit-scrollbar {
    height: 0px; /* Sätt höjden på den horisontella scrollbaren till 0 */
}

.groupActivities li {
  display: inline-block;
  width: 10em;
  background-color: #fff;
  border-top: 1px solid #ccc;
  border-right: 1px solid #ccc;
  border-left: 1px solid #ccc;
  padding: 0.5em;
  border-radius: 0.5em 0.5em 0 0;
}

.groupActivities li.active {
  background-color: #eee;
  /* font-weight: bold; */
}

.groupActivities li:hover {
  font-weight: bold;
  background-color: #eee;
}

.groupActivities li a {
  display: block;
  width: 100%;
  height: 100%;
}

.groupActivities li a:hover {
  text-decoration: none;
}

.addActivityImage img {
  max-width: 20em;
}

/* .deletePayment:hover {
  cursor: pointer;
} */

.activityDates {
  font-size: 0.6em;
  background-color: #eee;
  padding: 0.05em 0.5em;
  color: #252525;
  display: inline-block;
}

.totalContainer {
  
}