/*******************************************************************************
**
**  ANATOLY IVANOV / DESIGN
**
**  http://www.anatolyivanov.com/
**
**  Copyright (c) Anatoly IVANOV .com, all rights reserved - subject to and
**  governed by French and international intellectual property law
**
**
*******************************************************************************/


:root {
  --TypographyLineHeight: 28px;
  --TypographyFontSizeMain: 17px;
  /*--module_inside_width: calc(var(--TypographyLineHeight) * 21);*/
  --module_inside_width: calc(var(--TypographyLineHeight) * 23);
  --FormTextAreaHeight: calc(var(--TypographyLineHeight) * 11);
  --RoundingLarge: 2px;
}


/**** Main CSS ****/

html {
  padding-left: var(--TypographyLineHeight);
  padding-top: var(--TypographyLineHeight);
}

body {
  background-color: hsl(0, 0%, 8%);
}

.Module {
  background-color: #555555;
  margin-bottom: var(--TypographyLineHeight);
  padding: var(--TypographyLineHeight);
  float: left;
  clear: both;
  border-radius: var(--RoundingLarge);
}

div,
h1,
p,
ul,
li,
form,
select,
input,
textarea {
  font-family: Inter, 'Helvetica Neue', Arial, sans-serif;
  font-weight: normal;
}

textarea {
  font-variant-numeric: slashed-zero;
  font-feature-settings: "ss01"on;
}


h1,
p,
ul,
li {
  color: #EEEEEE;
}

h1,
h2 {
  font-size: 39px;
  line-height: 40px;
  padding-bottom: 40px;
}

h2 {
  font-size: 30px;
}

body > div:first-child,
body > div:nth-child(2) {
  padding-bottom: 0px;
}

p,
select,
input,
textarea,
#PostText {
  font-size: var(--TypographyFontSizeMain);
  line-height: var(--TypographyLineHeight);
  padding-bottom: 19px;
  border-color: #8c8c8c;
}

p:last-child {
  padding-bottom: 0px;
}

li {
  line-height: var(--TypographyLineHeight);
  margin-left: calc(var(--TypographyLineHeight) - 12px);
}

select {
  font-size: 15px;
  padding: 4px;
  border-radius: 2px;
  background-color: #e1e1e1;
}

select#SleepDrugID {
  width: 140px;
}

input[type="submit"] {
  padding: calc(var(--TypographyLineHeight) / 3);
  padding-left: var(--TypographyLineHeight);
  padding-right: var(--TypographyLineHeight);
  border: solid #a5e9ee 3px;
  border-radius: 4px;
  background-color: #D3D3D3;
}

#LoginSubmitButton {
  margin-left: 120px;
  margin-bottom: 40px;
}


.InputText {
  line-height: normal;
  padding-bottom: 0px;
  margin-bottom: 19px;
  border-radius: 3px;
}

div:focus,
input:focus {
  box-shadow: 0px 0px 0px 2px hsl(75, 100%, 57%);
}

.accent1 {
  color: #C9FF26;
}


.accent2 {
  color: #80FF00;
}


.accent3 {
  color: #73FFFF;
}

.accent4 {
  color: #FF24CE;
}

.accent5 {
  color: #FFDC2F;
}

.accent6 {
  color: rgb(190, 190, 190);
}

.accent7 {
  color: rgb(150, 150, 150);
}

.NumberSign {
  position: relative;
  bottom: 3px;
}


.Graph24Day {
  letter-spacing: -0.025em;
}


.HypnoticsUsed {
  color: #FAB22C;

}

.AccentLess {
  font-weight: 300;
}


#FutureDays,
.Graph24Day {
  font-feature-settings: "tnum"on;
}

#FutureDays {
  font-size: calc(var(--TypographyFontSizeMain) - 1px);
}

#Graph24 {
  font-size: calc(var(--TypographyFontSizeMain) - 2px);
}

/* Space between weeks */
#FutureDays ul:not(:first-of-type) {
  margin-top: var(--TypographyLineHeight);
}

#FutureDays li,
.WordGenerator li {
  border-bottom-style: solid;
  border-bottom-width: 1px;
  border-bottom-color: hsl(0, 0%, 40%);
}

#FutureDays li {
  width: calc(var(--TypographyLineHeight) * 19);
}

.WordGenerator li {
  width: calc(var(--TypographyLineHeight) * 13);
}

#FutureDays li:last-child,
.WordGenerator li:last-child {
  border: none;
}

/* Remove breaking of line */
#FutureDays li {
  white-space: nowrap;
}

.FutureDaysWakeUpAsleep {
  display: inline-block;
  width: calc(var(--TypographyLineHeight) * 11);
}

/* Day of week (workday or weekend) */
.FutureDaysWakeUpAsleep .accent1,
.FutureDaysWakeUpAsleep .accent5 {
  display: inline-block;
  width: calc(var(--TypographyLineHeight) * 3);
}

.FutureDaysWakeUpAsleep .accent6 {
  display: inline-block;
  width: calc(var(--TypographyLineHeight) * 3);
}


#Graph24 {
  color: #cecece;
  padding-right: 0px;
  width: calc(var(--module_inside_width) + var(--TypographyLineHeight));
}

#Graph24 div {
  float: left;
  width: 100%;
}

#Graph24 .NoData {
  box-sizing: border-box;
  padding-right: 130px;
  text-align: center;
}

#Graph24 .NoData p {
  color: rgb(110, 110, 110);
  margin-top: -1px;
  margin-bottom: 1px;
}

#Graph24 div div {
  width: 20px;
  height: 20px;
  margin-right: 3px;
  margin-bottom: 3px;
  float: left;
  background-color: #ececec;
}


#Graph24 div div div {
  width: 5px;
  margin: 0px;
  float: left;
}

#Graph24 div div div.SleepCore {
  background-color: #1960cb;
}

/* Date and hypnotics-use display */
#Graph24 div div.Graph24DayDate {
  width: calc(var(--TypographyLineHeight) * 4);
  background-color: transparent;
}

#Graph24 div.Graph24labelsHours div {
  background-color: transparent;
  margin-right: 3px;
  text-align: center;
}


/* NEW */

.Module {
  width: var(--module_inside_width);
}


#PostText {
  box-sizing: border-box;
  width: var(--module_inside_width);
  min-height: var(--FormTextAreaHeight);
  padding: var(--TypographyLineHeight);
  background-color: hsl(0, 0%, 97%);
  border-radius: var(--RoundingLarge);
}

#PostImages {
  display: block;
}

#PostPublishToSelector {
  width: var(--module_inside_width);
  display: flex;
}

#PostPublishToSelector input,
#PostPublishToSelector label {
  display: block;
  padding-left: 2px;
  padding-right: 19px;
  color: rgb(190, 190, 190);
}

input[type=file] {
  margin-top: calc(var(--TypographyLineHeight) / 2);
  margin-bottom: calc(var(--TypographyLineHeight) / 2 * -1);

  color: rgb(190, 190, 190);
}

#PostSubmit {
  margin-top: var(--TypographyLineHeight);
  text-align: center;
  vertical-align: middle;
}