/* --- Reset --- */
* { 
   -moz-box-sizing: border-box; 
   -webkit-box-sizing: border-box; 
   box-sizing: border-box; 
   padding: 0px;
   margin: 0px;
}

html, body { 
   height: 100%; 
   width: 100%; 
}

body {
  font-family: 'Inter', sans-serif;
  font-weight: 300;
  background-color: #000;
  color: #fff;
}

::-webkit-input-placeholder, :-moz-placeholder, ::-moz-placeholder, :-ms-input-placeholder { 
  color:    #999;
  font-family: 'Inter', sans-serif;
  font-weight: 300;
}

p {
  font-size: 18px;
}

a:hover, input, textarea, select, button {
  -o-transition:.5s;
  -ms-transition:.5s;
  -moz-transition:.5s;
  -webkit-transition:.5s;
  transition:.5s;
  appearance: none;
  -webkit-appearance: none;
  font-family: 'Inter', sans-serif;
}

/* --- Colours --- */

:root {
  --main-accent: rgb(173, 53, 53);
  --main-accent-hov: rgb(99, 31, 31);
}

/* --- Main styles --- */
.dashboard {
  display: flex;
  height: 100%;
}

.sidebar {
  width: 320px;
  color: #000;
  overflow-y: auto;
  padding: 20px;
  display: flex;
  justify-content: space-between;
  flex-direction: column;
}

.sidebar .logo {
  font-size: 28px;
  font-weight: bold;
  color: #ebebee;
}

.sidebar .links ul {
  list-style: none;
  padding: 0;
  margin: 0;
}

.sidebar .links {
  display: flex;
  flex-direction: column;
  gap: 10px;
  margin-top: 20px;
}

.sidebar .links a {
  text-decoration: none;
  display: flex;
  align-items: center;
  gap: 10px;
  font-size: 18px;
  color: #B9B9C1;
  padding: 10px 20px;
  border-radius: 10px;
}

.sidebar .links a.selected {
  background-color: var(--main-accent);
  color: white;
}

.sidebar .profile {
  display: flex;
  color: white;
  gap: 10px;
  align-items: center;
}

.sidebar .profile .image {
  flex: 1;
  max-width: 50px;
}

.sidebar .profile .image img {
  width: 100%;
  height: auto;
  aspect-ratio: 1 / 1;
  border-radius: 50%;
}

.sidebar .profile .text {
  display: flex;
  flex-direction: column;
  flex: 1.5;
  gap: 2px;
}

.sidebar .profile .text .name {
  font-size: 20px;
  font-weight: bold;
}

.sidebar .profile .text .points {
  font-size: 14px;
}



.content {
  padding: 30px 50px;
  width: 100%;
  background-color: #ebebee;
  color: black;
  overflow-y: auto;
}

.content .top {
  display: flex;
  justify-content: space-between;
}

.content .top .RAI {
  max-width: 600px;
  width: 100%;
}

.content .top .RAI form {
  display: flex;
  width: 100%;
  gap: 15px;
  align-items: center;
}

.content .top .RAI .raiText {
  width: calc(100% - 100px);
  display: inline-block;
  font-size: 14px;
  padding: 10px;
  background-color: white;
  border: solid 1px var(--main-accent);
  border-radius: 3px;
  flex-grow: 1;
}

.content .top .RAI label {
  display: inline-block;
  font-size: 30px;
  color: var(--main-accent);
}

.tiles {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(650px, 1fr));
  grid-gap: 20px;
  margin-top: 30px;
  /*align-items: start;*/
}

.tile {
  background: #fff;
  padding: 30px;
  border: 1px solid #ddd;
  border-radius: 5px;
  box-shadow: 0 2px 4px 0 rgb(0 0 0/8%);
}

.tile .head {
  display: flex;
  justify-content: space-between;
  margin-bottom: 10px;
}

.tile .head .title {
  font-size: 22px;
}

.tile .head .score {
  color: white;
  background: limegreen;
  padding: 5px 10px;
  border-radius: 3px;
  display: flex;
  align-items: center;
  gap: 5px;
}

.tile .head .score span {
  font-weight: bold;
}




.businessModel .logo {
  margin: 50px 0;
  text-align: center;
}

.businessModel .timeline {
  display: flex;
  gap: 20px;
}

.businessModel .timeline .current {
  padding: 20px;
  border: solid 1px var(--main-accent);
  flex: 2;
  text-align: center;
  border-radius: 5px;
  align-items: center;
  justify-content: center;
  display: flex;
}

.businessModel .timeline .arrow {
  font-size: 60px;
  font-weight: bold;
  text-align: center;
  padding: 20px 0;
}

.businessModel .timeline .next {
  flex: 2;
  text-align: center;
  padding: 20px;
  align-items: center;
  justify-content: center;
  display: flex;
}

.businessModel .timeline .stageName {
  font-size: 20px;
  font-weight: bold;
}

.businessModel .stages {
  display: flex;
  margin-bottom: 30px;
  margin-top: 20px;
}

.businessModel .stages div {
  padding: 10px 20px;
  background-color: #ebebee;
}

.businessModel .stages .selected {
  background-color: var(--main-accent);
  color: white;
  flex-grow: 1;
}


.evoCycle .calendar {
  display: flex;
  gap: 10px;
  width: 100%;
}

.evoCycle .calendar .day {
  flex: 1;
}

.evoCycle .calendar .day .dayTitle {
  font-weight: bold;
  padding: 10px;
  width: 100%;
  text-align: center;
  background-color: #ebebee;
  border-radius: 3px;
  margin-bottom: 5px;
}

.evoCycle .calendar .day .events {
  display: flex;
  flex-direction: column;
  gap: 0;
}

.evoCycle .calendar .day .events .event {
  background-color: grey;
  padding: 5px;
  --event-height: 100px; /* Default height, adjust as needed */
}

.evoCycle .calendar .day .events .event .time {
  font-size: 12px;
  font-weight: bold;
  margin-bottom: 2px;
}

.evoCycle .calendar .day .events .event[data-duration="30"] .time {
  display: none;
}

.evoCycle .calendar .day .events .event .activity {
  font-size: max(10px, min(16px, calc(var(--event-height) * 0.2)));
  font-weight: bold;
}

.blue {
  color: rgb(0, 0, 0) !important;
  background-color: rgb(87, 174, 255) !important;
}

.blue + .blue {
  border-top: solid 1px #000;
}

.yellow {
  color: rgb(0, 0, 0) !important;
  background-color: rgb(255, 255, 119) !important;
}

.yellow + .yellow {
  border-top: solid 1px #000;
}

.green {
  color: rgb(0, 0, 0) !important;
  background-color: rgb(144, 238, 144) !important;
}

.green + .green {
  border-top: solid 1px #000;
}

.purple {
  color: rgb(0, 0, 0) !important;
  background-color: rgb(204, 153, 255) !important;
}

.purple + .purple {
  border-top: solid 1px #000;
}

.grey {
  color: black !important;
  background-color: #ccc !important;
}

.grey + .grey {
  border-top: solid 1px #000;
}

.evoCycle .values {
  display: flex;
  gap: 20px;
  margin-top: 20px;
}

.evoCycle .values span {
  font-size: 24px;
  font-weight: bold;
}

.evoCycle .values .key {
  width: 20px;
  height: 20px;
  border-radius: 50%;
  display: inline-block;
}

.note {
  color: #666;

}


.team .teamHolder {
  display: flex;
  flex-direction: column;
  gap: 15px;
}

.team .teamHolder .teamMember {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 10px;
  border-radius: 3px;
}

.team .teamHolder .teamMember img {
  width: 50px;
  height: 50px;
  border-radius: 50%;
}

.team .teamHolder .teamMember .percents {
  display: flex;
  gap: 20px;
}

.critical {
  background-color: #ffdada;
}

.focus {
  color: rgb(169, 25, 25);
  font-weight: bold;
  text-decoration: underline;
}


.missions ol {
  margin-left: 50px;
  font-size: 20px;
  margin-top: 20px;
  display: flex;
  flex-direction: column;
  gap: 10px;
}

.activity .feed {
  display: flex;
  flex-direction: column;
  background-color: #ebebee;
}

.activity .feed .item {
  padding: 10px;
}

.activity .feed .item + .item {
  border-top: solid 1px #ccc;
}



.oneToOne {
  background-color: white;
  border-radius: 3px;
  overflow: hidden;
  box-shadow: 0 2px 4px 0 rgb(0 0 0/8%);
}

.oneToOne .hero {
  background-image: url(img/team-call.png);
  background-size: cover;
  background-position: center;
  height: 500px;
}

.oneToOne .hero .overlay {
  width: 100%;
  height: 100%;
  background: rgba(0, 0, 0, 0.7);
  color: white;
  display: flex;
  align-items: flex-end;
  padding: 30px;
}

.oneToOne .hero .overlay .group h2 {
  font-size: 30px;
}

.oneToOne .hero .overlay .group p {
  font-size: 18px;
  margin-top: 10px;
}

.leftAndRight {
  display: flex;
  justify-content: space-between;
  padding: 30px;
  align-items: center;
}

.leftAndRight a {
  background-color: var(--main-accent);
  padding: 15px 30px;
  color: white;
  border-radius: 3px;
  font-weight: bold;
  text-decoration: none;
  outline: none;
  border: none;
  display: inline-block;
}

.leftAndRight a:hover {
  background-color: var(--main-accent-hov);
}

.jobs {
  display: flex;
  flex-direction: column;
  gap: 50px;
}

.jobs .job {
  background-color: white;
  border-radius: 3px;
  overflow: hidden;
  box-shadow: 0 2px 4px 0 rgb(0 0 0/8%);
}

.job .header {
  background-color: rgb(255, 187, 187);
  padding: 30px;
  color: rgb(0, 0, 0);
}

.job .header .group {
  border-left: solid 2px var(--main-accent);
  padding-left: 20px;
}


/* --- Dark mode --- 
@media (prefers-color-scheme: dark) {
	body {
		background-color: #2b2b2b;
		color: #ccc !important;
	}
}
*/

/* Small desktop sizing issues --- */
@media only screen and (max-width: 1410px) {
	.inner {
		width: 95%;
	}
}

/* --- Mobile styles --- */
@media only screen and (max-width: 800px) {

}