:root {
  --color-dark-purple: #0E021C;
  --color-grey: #f0f0f0;
  --color-dark-grey: #cfcfcf;
  --color-grey-p: #9A9A9A;
  --color-blue :#708EB0;
  --color-blue-2 :#57718F;
  --color-white :#fefefe;
  --color-darkmode-main: #2c3541;
  --color-darkmode-secondary: #1c2229;
}

*{
  margin : 0;
}


/*** TAGS ***/

body {
  font-family: 'Roboto', sans-serif;
  min-width: 1100px;
}

h1 {
  font-weight: bold;
  font-size: initial;
}

h3, .main-text {
  font-weight: bold;
  font-size: 13px;
  line-height: 15px;
  color: var(--color-dark-purple);
}

p {
  font-style: normal;
  font-weight: normal;
  font-size: 12px;
  line-height: 15px;
  color: var(--color-grey-p);
}

p a {
  font-style: normal;
  font-weight: normal;
  font-size: 12px;
  line-height: 15px;
}

h3.dark-mode, .dark-mode p, label.dark-mode {
  color: var(--color-white);
}

strong {
  margin-left: 4px;
  color: var(--color-blue-2);
  font-weight:bold;
}

select {
  transition: .2s all ease;
  cursor: pointer;
  background-color: var(--color-grey);
  color: var(--color-blue);
  border-width: 1px;
  border-radius: 2px;
  border-color: var(--color-blue);
  height: 30px;
}


select:hover {
  background-color: var(--color-dark-grey);
}


#multi-select-sensors {
  padding-right: 0;
  height: 12rem;
  border-radius: 8px;
  border: none;
  width: 25rem;
  overflow: auto;
  scrollbar-width: none; /*For Firefox*/;
  -ms-overflow-style: none;
}

#multi-select-sensors > option {
  white-space: normal;
  outline-color: var(--color-blue);
  font-size: 20px;
  padding: 15px;
  border-radius: 8px;
  border: 1px solid transparent;
}

#multi-select-sensors > option:hover {
  border: 1px solid var(--color-grey-background-selected-item);
}

#multi-select-sensors > option:checked {
  border: 1px solid var(--color-grey-background-selected-item);
  background-color: transparent;
}

#multi-select-sensors:hover{
  background-color: var(--color-grey-background);
}

#multi-select-label{
  margin:1em;
}

canvas {
  /*width: 100% !important;
  height: 100% !important;*/
  position: absolute;
}


/*** CLASSES ***/

.full-height {
  height: 100vh;
}

/** FLEXBOXES **/
.row {
  display: flex;
  flex-direction: row;
}

.column {
  display:flex;
  flex-direction: column;
}

.row.center-x-spaced, .column.center-y-spaced {
  justify-content: space-between;
}

.row.center-x, .column.center-y {
  justify-content: center;
}

.row.center-y, .column.center-x {
  align-items: center;
}


.hidden {
  display: none !important;
}

.space-y {
  padding: 10px 0;
}

.warning-message {
  color: red;
}

.number-nodes {
  line-height: 25px;
  font-weight: bold;
  margin-left: 29px;
  margin-top: 20px;
}

/** SENSORS UI **/
.sensorUI {
  background-color: var(--color-white);
  border-bottom: 2px solid var(--color-dark-grey);
}

.sensor-color {
  width: 10px;
  height: 10px;
  margin-right: 8px;
}

.sensorUI [data-icon] {
  width: 13px;
  height: 13px;
  margin: 0 8px;
  color: var(--color-dark-purple);
  cursor: pointer;
}

.sensorUI > .sections-container {
  gap: 10px;
}

.sensor-transformations > * {
  flex-basis: 25%;
}

.draggable {
  cursor: ew-resize;
}

.underlined {
  text-decoration: underline;
}

.bold-font {
  font-weight: bold;
}

.normal-font{
  font-weight: normal;
}

.cam-spec {
  width: 75%;
}

.cam-spec p {
  flex-grow: 1;
  flex-basis: 10%;
  text-align: end;
}

.spec-title {
  flex-grow: 2 !important;
  text-align: left !important;
}


/** MODALS **/
.modal {
  /* Center the modal */
  display: flex;
  justify-content: center;
  align-items: center;

  position: fixed; /* Stay in place */
  z-index: 100; /* Sit on top */
  left: 0;
  top: 0;
  width: 100%; /* Full width */
  height: 100%; /* Full height */
  overflow: auto; /* Enable scroll if needed */
  background-color: rgba(0,0,0,0.4); /* Black w/ opacity */
}

/* Modal Content */
.modal-content {
  background-color: var(--color-white);
  border: 4px solid var(--color-grey);
  padding: 30px;
}

.modal-content.dark-mode {
  background-color: var(--color-darkmode-main) !important;
  border-color: var(--color-darkmode-secondary) !important;
}

.sections-container {
  gap: 25px;
}

.close {
  float: right;
  color: var(--color-grey-p);
  font-size: 28px;
  font-weight: bold;
}

.close:hover {
  color: var(--color-dark-purple);
  cursor: pointer;
}


/** BUTTONS **/
.button {
  box-sizing: border-box;
  width: 140px;
  height: 24px;
  border: 1px solid var(--color-blue);
  border-radius: 2px;
  cursor: pointer;

  display: flex;
  flex-direction: row;
  justify-content: center;
  align-items: center;
  margin: 0 20px 0 20px;
  text-align: center;

  filter: drop-shadow(0px 4px 4px rgba(0, 0, 0, 0.15));
  transition: .2s all ease;
}

.default-button {
  background-color: var(--color-white);
}

.default-button:hover {
  background-color: var(--color-grey);
}

.default-button p {
  color: var(--color-blue);
}

.main-button {
  background-color: var(--color-blue);
}

.main-button:hover {
  background-color: var(--color-blue-2);
}

.main-button p {
  color: var(--color-white);
}

a.main-button {
  text-decoration: none;
}


/** GIZMO **/ 
.orbit-controls-gizmo {
  position: absolute;
  top: 2em;
  right: 2em;
  z-index: 50;
  background-color: #FFF0;
  border-radius: 100%;
  transition: background-color .15s  linear;
  cursor: pointer;
}

.orbit-controls-gizmo.dragging, 
.orbit-controls-gizmo:hover {
  background-color: #FFF3;
}

.orbit-controls-gizmo.inactive {
  pointer-events: none;
  background-color: #FFF0  !important;
}




/*** DATASETS ***/

[data-tool] [data-icon] {
  width : 24px;
  height : 24px;
  margin: 7px;
  color : var(--color-white);
}

[data-tool] {
  width: 40px;
  height: 40px;
  background-color: var(--color-grey-p);
  transition: 0.2s all ease;
}

[data-tool]:hover:not(.active) {
    background-color: var(--color-blue-2);
    cursor: pointer;
}

[data-tool]:nth-child(1) {
  border-radius: 2px 2px 0px 0px;

}
[data-tool]:nth-child(4) {
  border-radius: 0px 0px 2px 2px;
}

[data-tool].active {
  background: var(--color-blue); ;
}




/*** IDs ***/

/** SECTIONS **/
#left-section {
  width : calc( 100% - 400px);
  overflow: hidden;
}

#right-section {
  width : 400px;
  overflow: auto;
}


/** HEADER **/
#header {
  box-sizing: border-box;
  height: 46px;
  width: 100%;
  padding: 0 35px;
  background-color: var(--color-dark-purple);
}

#header img {
  width: 20px;
  height: 20px;
}

#website-title {
  color: var(--color-white);
}

/** VIEWPORT **/
#viewport {
  position: relative;
  height : calc( 100vh - 46px);
  width: 100%;
  background-color:var(--color-grey);
}

#toolbar {
  position: absolute;
  height: 100%;
  margin-left: 25px;
  justify-content : center;
  flex-direction: column;
  width: 40px;
}

#viewport-buttons {
  position: absolute;
  width: 100%;
  bottom: 25px;
}

#dummies-buttons {
  display: grid;
  position: absolute;
  bottom: 25px;
  right: 25px;
}

/** INSPECTOR **/

#inspector > * {
  padding: 10px 10px;
}

#inspector.dark-mode {
  background-color: var(--color-darkmode-main) !important;
}

#scene-infos {
  background-color: var(--color-grey);
}

#scene-infos.dark-mode {
  background-color: var(--color-darkmode-secondary) !important;
}

/** LOAD FILE BUTTON **/
#load-file-input{
  background-color: rgba(0, 0, 0, 0);
  outline: 0;
}

/** HEADER BUTTONS SECTION **/
#header-buttons {
  display: inline-flex;
}

/** SHARE MODAL **/
#share-modal-content {
  width: 20%;
  padding: 10px 30px 30px 30px;
}

#close-share-modal{
  align-self: flex-end;
}

/** WIZARD MODAL **/
#wizard-content {
  width: 35%;
}

/** CONTACT BUTTON **/
#contact-button {
  margin-left: 1em;
}



/*** ICONS ***/

.main-icon{
  color: white;
  padding: 4px;
}

.secondary-icon{
  color: #708EB0;
  padding:4px;
}

#scene-fully-covered-icon{
  color: #2b2
}

.scene-fully-covered-text{
  margin: auto 0;
}

/*** POPUP classes ***/

.cd-popup {
  position: fixed;
  left: 0;
  top: 0;
  height: 100%;
  width: 100%;
  background-color: rgba(94, 110, 141, 0.9);
  opacity: 0;
  visibility: hidden;
  -webkit-transition: opacity 0.3s 0s, visibility 0s 0.3s;
  -moz-transition: opacity 0.3s 0s, visibility 0s 0.3s;
  transition: opacity 0.3s 0s, visibility 0s 0.3s;
  z-index: 500;
}

.cd-popup.is-visible {
  opacity: 1;
  visibility: visible;
  -webkit-transition: opacity 0.3s 0s, visibility 0s 0s;
  -moz-transition: opacity 0.3s 0s, visibility 0s 0s;
  transition: opacity 0.3s 0s, visibility 0s 0s;
}

.cd-popup-container {
  position: relative;
  width: 70%;
  max-width: 80vw;
  height: 75vh;
  margin: 6em auto;
  background: #FFF;
  border-radius: .25em .25em .4em .4em;
  text-align: center;
  box-shadow: 0 0 20px rgba(0, 0, 0, 0.1);
  -webkit-transform: translateY(-40px);
  -moz-transform: translateY(-40px);
  -ms-transform: translateY(-40px);
  -o-transform: translateY(-40px);
  transform: translateY(-40px);
  /* Force Hardware Acceleration in WebKit */
  -webkit-backface-visibility: hidden;
  -webkit-transition-property: -webkit-transform;
  -moz-transition-property: -moz-transform;
  transition-property: transform;
  -webkit-transition-duration: 0.3s;
  -moz-transition-duration: 0.3s;
  transition-duration: 0.3s;
}

.cd-popup-container p {
  padding: 2em 1em;
  font-family: 'Inter', sans-serif;
  letter-spacing: 1px;
}

.cd-popup-container h3 {
  font-family: 'Inter', sans-serif;
  letter-spacing: 1px;
}

.cd-popup-container .cd-popup-close {
  position: absolute;
  top: 8px;
  right: 8px;
  width: 30px;
  height: 30px;
}

.cd-popup-container .cd-popup-close::before, .cd-popup-container .cd-popup-close::after {
  content: '';
  position: absolute;
  top: 12px;
  width: 14px;
  height: 3px;
  background-color: #8f9cb5;
}
.cd-popup-container .cd-popup-close::before {
  -webkit-transform: rotate(45deg);
  -moz-transform: rotate(45deg);
  -ms-transform: rotate(45deg);
  -o-transform: rotate(45deg);
  transform: rotate(45deg);
  left: 8px;
}
.cd-popup-container .cd-popup-close::after {
  -webkit-transform: rotate(-45deg);
  -moz-transform: rotate(-45deg);
  -ms-transform: rotate(-45deg);
  -o-transform: rotate(-45deg);
  transform: rotate(-45deg);
  right: 8px;
}
.is-visible .cd-popup-container {
  -webkit-transform: translateY(0);
  -moz-transform: translateY(0);
  -ms-transform: translateY(0);
  -o-transform: translateY(0);
  transform: translateY(0);
}
@media only screen and (min-width: 1170px) {
  .cd-popup-container {
    margin: 8em auto;
  }
} 

.img-replace {
  /* replace text with an image */
  display: inline-block;
  overflow: hidden;
  text-indent: 100%;
  color: transparent;
  white-space: nowrap;
}

/*** new UI ***/

:root {
  --color-grey-background-selected-item: #1b0c386c;
  --color-grey-background: #fcfcfc;
  --color-grey-unselected: #b3b3b3;
  --color-grey-line: #afafaf;
  --color-grey-selectable: #5c5c5c;
  --color-blue-buttons: #68a3e7;
  
  --color-grey-text: #494949;
  --color-red-warning: #d12525;

  --color-red-x: #BF4747;
  --color-green-y: #37A48A;
  --color-blue-z: #708EB0;
}

textarea::placeholder {
  color: var(--color-grey-text);
}

textarea:focus {
  outline: 0;
}

.wrap{
  flex-wrap: wrap;
}

#bottom-section {
  position: relative;
  width: 100%;
  height: 100%;
  background-color: var(--color-grey-background);
}

#builder-tabs{
  height: 8vh;
  margin-top: 2vh;
  gap: 60px;
}

.tab{
  height: 100%;
  width: 10vw;
  padding: 1vh 0;
  cursor:default;
}

.tab > h3 {
  color: var(--color-grey-unselected);
  font-size: 15px;
}

.tab > hr {
  color: var(--color-grey-line);
}

.tab.passed-tab > h3 {
  color: var(--color-dark-purple);
}

.tab.passed-tab > hr {
  color: var(--color-dark-purple);
}

.tab-line{
  width: 60%;
  margin-top: 2vh;
  border-top: 1px solid var(--color-grey-line);
}

.tab.passed-tab > .tab-line{
  border-top-color: var(--color-dark-purple);
}

.builder-section{
  height: 68%;
  width: 90%;
  margin: 2vh 0;
}

.builder-section-content{
  height: 60%;
  padding-top: 2%;
}

.builder-section-buttons{
  padding-top: 5cqb;
  height: 18vh;
  gap: 1vh;
}

.builder-section-content.vertical-view{
  height: 70%;
}

.builder-section-buttons.vertical-view{
  height: 20%;
}

.bottom-line{
  width: 70%;
  margin-top: 3vh;
  border-top: 1px solid var(--color-grey-line);
}

.tracking-img{
  display:inline-block;
  position: relative;
  width: 50%;
  margin: auto;
  background-color: var(--color-grey-background-selected-item);
  border-radius: 4px;
  padding: 10px;
}

/** BUTTONS **/
.builder-button{
  width: 25vw;
  height: 100%;
  margin: 0 1vw;
  cursor: pointer;
  display: flex;
  flex-direction: row;
  justify-content: center;
  align-items: center;
  text-align: center;
  filter: drop-shadow(0px 4px 4px rgba(0, 0, 0, 0.15));
  transition: .2s all ease;
}

.builder-button.vertical-view{
  width: 7vw;
  height: 80%;
}

.nav-buttons{
  width: 100%;
  height: 40%;
}

.builder-button >  p, svg{
  color: var(--color-blue);
  letter-spacing: 2px;
  padding: 8px 0px;
  font-size: 15px;
}

.builder-main-button{
  outline: 1px solid var(--color-blue);
}

.text-button{
  color: var(--color-blue);
  text-decoration: underline;
  cursor: pointer;
  padding-left: 4px;
}

.warning-text{
  color: var(--color-red-warning);
}

.hardware-warning-message{
  height: 10vh;
  padding: 1%;
}

.popup-target-overlap-select > p{
  padding: 1em 0.5em;
}

.popup-target-overlap-select > select{
  color: var(--color-blue);
  border-color: var(--color-blue);
  width: 10em;
}

.popup-target-overlap-select > option{
  border-radius: 0;
}

/* HIDE RADIO */
[type=radio] {
  position:absolute;
  opacity: 0;
  width: 0;
  height: 0;
}

/*SETUP IMAGES STYLE */
.tracking-mode-choice > img {
  cursor: pointer;
  height: 8vw;
  padding: 2vh;
  outline: 1px solid var(--color-grey-unselected);
  border-radius: 4px;
  margin: 2vh;
  background-color: var(--color-grey-background-selected-item);
}

.vertical-view .tracking-mode-choice > img {
  height: 10vh;
}

#tracking-mode-advanced > img{
  outline: 0;
}

.tracking-mode-choice [type=radio]:disabled  + img {
  cursor: default;
}

/* CHECKED STYLES */
.tracking-mode-choice [type=radio]:checked + img {
  outline: 0;
  background-color: var(--color-grey-background-selected-item);
  filter: drop-shadow(0px 2px 2px rgba(12, 5, 58, 0.877));
}


/** DIMENSIONS SECTION **/
#dimensions-section-builder{
  gap: 1vh;
}

#gizmo-helper-image > img{
  height: 8vh;
}

.dimensions-inputs{
  gap: 1vh;
}

.dimensions-inputs input {
	background-color: rgba(0,0,0,0);
	color: var(--color-dark-purple);
	border-width: 1px 1px 1px 10px;
	border-style: solid;
  width: 12vw;
  height: 4vh;
  padding-left: 10px;
  font-weight: 600;
}

.dimensions-inputs input::placeholder {
	color: var(--color-grey-unselected);
  font-size: 10px;
}

.dimensions-inputs input:focus {
	outline: 0;
}

#dimensions-width-input{
  caret-color: var(--color-red-x);
  border-color: var(--color-grey-unselected) var(--color-grey-unselected) var(--color-grey-unselected) var(--color-red-x);
}

#dimensions-width-text{
  color: var(--color-red-x);
}

#dimensions-length-input{
  caret-color: var(--color-green-y);
  border-color: var(--color-grey-unselected) var(--color-grey-unselected) var(--color-grey-unselected) var(--color-green-y);
}

#dimensions-length-text{
  color: var(--color-green-y);
}

#dimensions-table-height-input{
  caret-color: var(--color-blue-z);
  border-color: var(--color-grey-unselected) var(--color-grey-unselected) var(--color-grey-unselected) var(--color-blue-z);
}

#dimensions-table-height-text{
  color: var(--color-blue-z);
}

#dimensions-distance-input{
  caret-color: var(--color-blue-z);
  border-color: var(--color-grey-unselected) var(--color-grey-unselected) var(--color-grey-unselected) var(--color-blue-z);
}

#dimensions-distance p{
  color: var(--color-blue-z);
}

/** HARDWARES SECTION **/
#hardware-section-builder{
  padding-bottom: 2%;
}

.hardware-radio-label [type=radio] + div {
  cursor: pointer;
  padding: 4vh;
  outline: 1px solid var(--color-grey-selectable);
}

.hardware-radio-label [type=radio] + div > p {
  color: var(--color-grey-selectable);
  font-weight: 600;
}

#hardware-switch-indoor-outdoor {
  width: 50%;
  height: 35%;
}

#hardware-switch-indoor-outdoor > label {
  width: 50%;
  height: 100%
}

#hardware-switch-indoor-outdoor [type=radio]:checked + div{
  background-color: var(--color-grey-background-selected-item);
}

#hardware-sensors-selection{
  width: 100%;
  padding-top: 4vh;
}

#hardware-sensors-selection > label {
  width: 20vw;
  height: 5vh
}

#hardware-sensors-selection.vertical-view > label {
  width: 100%;
}

.hardware-sensors-type [type=radio] + div {
  width: 100%;
}

.vertical-view .hardware-sensors-type [type=radio] + div {
  width: 50%;
}

.hardware-sensors-type [type=radio]:checked + div{
  background-color: var(--color-grey-background-selected-item);
}

.hardware-sensors-type.unselectable [type=radio] + div{
  cursor: default;
  outline-color: var(--color-grey-unselected);
}

.hardware-sensors-type.unselectable [type=radio] + div > p{
  color: var(--color-grey-unselected);
}

/** MY SYSTEM SECTION **/
.my-system-section{
  height: 80%;
  width: 25%;
  padding: 20px;
}

.my-system-section.vertical-view{
  height: 25%;
  width: 80%;
  padding: 20px;
}

.my-system-section.my-system-line{
  border-right: 1px solid var(--color-grey-line);
  border-bottom: 0;
}

.my-system-section.my-system-line.vertical-view{
  border-right: 0;
  border-bottom: 1px solid var(--color-grey-line);
}

#my-system-scene-infos{
  width: 50%;
  height: 80%;
}

#my-system-scene-infos.vertical-view{
  width: 80%;
  height: 50%;
}

#my-system-tracking-mode .tracking-mode-choice [type=radio]:disabled + img{
  cursor: default;
  width: 10vw;
  height: 10vw;
}

.vertical-view #my-system-tracking-mode .tracking-mode-choice [type=radio]:disabled + img{
  width: 10vh;
  height: 10vh;
}

#my-system-dimensions{
  width: 40%;
}

.dimensions-inputs input:read-only {
  width: 80%;
  cursor: default;
  color: var(--color-grey-text);
}

#my-system-hardware > label{
  width: 70%;
}

#my-system-hardware .hardware-sensors-type [type=radio] + div{
  cursor: default;
}

#my-system-recap{
  padding-left: 4vh;
  gap: 5px;
}

#my-system-scene-name-input::placeholder{
  color: var(--color-grey-text);
}
#open-wizard-button {
  background-color: #7c4596;
  height: 3em;
  width: 70%;
}

#open-wizard-button p {
  font-weight: bold;
  font-size: large;
}

a{
  color: var(--color-blue);
  text-decoration: none;
}

a:hover {
  color: var(--color-blue-2);
  text-decoration: none;
}

/* Button 1 */
#button-1 .knobs:before {
  content: "";
  position: absolute;
  top: 4px;
  left: 4px;
  width: 20px;
  height: 10px;
  color: #fff;
  font-size: 10px;
  font-weight: bold;
  text-align: center;
  line-height: 1;
  padding: 9px 4px;
  background-color: #03a9f4;
  border-radius: 50%;
  transition: 0.3s cubic-bezier(0.18, 0.89, 0.35, 1.15) all;
} 

#button-1 .checkbox:checked + .knobs:before {
  content: "";
  left: 42px;
  background-color: rgb(34, 221, 65);
}

#button-1 .checkbox:checked ~ .layer {
  background-color: #e5fde5;
}

#button-1 .knobs,
#button-1 .knobs:before,
#button-1 .layer {
  transition: 0.3s ease all;
}

/* Button 2 */
#button-2 .knobs:before {
  content: "";
  position: absolute;
  top: 4px;
  left: 4px;
  width: 20px;
  height: 10px;
  color: #fff;
  font-size: 10px;
  font-weight: bold;
  text-align: center;
  line-height: 1;
  padding: 9px 4px;
  background-color: #03a9f4;
  border-radius: 50%;
  transition: 0.3s cubic-bezier(0.18, 0.89, 0.35, 1.15) all;
} 

#button-2 .checkbox:checked + .knobs:before {
  content: "";
  left: 42px;
  background-color: rgb(34, 221, 65);
}

#button-2 .checkbox:checked ~ .layer {
  background-color: #e5fde5;
}

#button-2 .knobs,
#button-2 .knobs:before,
#button-2 .layer {
  transition: 0.3s ease all;
}

/* Button 3 */
#button-3 .knobs:before {
  content: "";
  position: absolute;
  top: 4px;
  left: 4px;
  width: 20px;
  height: 10px;
  color: #fff;
  font-size: 10px;
  font-weight: bold;
  text-align: center;
  line-height: 1;
  padding: 9px 4px;
  background-color: #03a9f4;
  border-radius: 50%;
  transition: 0.3s cubic-bezier(0.18, 0.89, 0.35, 1.15) all;
} 

#button-3 .checkbox:checked + .knobs:before {
  content: "";
  left: 42px;
  background-color: rgb(34, 221, 65);
}

#button-3 .checkbox:checked ~ .layer {
  background-color: #e5fde5;
}

#button-3 .knobs,
#button-3 .knobs:before,
#button-3 .layer {
  transition: 0.3s ease all;
}

.button-toggle.r,
.button-toggle.r .layer {
  border-radius: 100px;
}

.button-toggle {
  position: relative;
  top: 0%;
  width: 74px;
  height: 36px;
  margin: -20px auto 0 auto;
  overflow: hidden;
}

 .button-cover,
.knobs,
.layer {
  position: absolute;
  top: 0;
  right: 0;
  bottom: 0;
  left: 0;
}

.knobs {
  z-index: 2;
}

.layer {
  width: 100%;
  background-color: #ebf7fc;
  transition: 0.3s ease all;
  z-index: 1;
}

.checkbox {
  position: relative;
  width: 100%;
  height: 100%;
  padding: 0;
  margin: 0;
  opacity: 0;
  cursor: pointer;
  z-index: 3;
}

#button-toggle-text{
  margin: 1em;
}

#button-toggle-text-2{
  margin: 1em;
}

#new-toggle{
  padding-left: 20px;
  width: 8em;
}