.sample-tutorial {
    position: relative;
    height: 100%;
}

.sjss {
   width: 70%;
   height: 100%;
   display: inline-block;
}

.sample-spreadsheets {
   width: 100%;
   height: 58%;
   overflow: hidden;
}

.sample-spreadsheets-details{
   width: 100%;
   height: 40%;
   overflow: hidden;
}

body {
   position: absolute;
   top: 0;
   bottom: 0;
   left: 0;
   right: 0;
   overflow: hidden;
}

#config {
   width: 75%;
   margin-left: 10%;
}

.sample-panel {
   position: relative;
   float: right;
   width: 30%;
   padding: 12px;
   height: 100%;
   box-sizing: border-box;
   background: #fbfbfb;
   overflow-y: auto;
   overflow-x: hidden;
}
#app {
   height: 100%;
}

label{
  position: relative;
}
.check{
  width: 2rem;
  height: 1rem;
  border-radius: 100rem;
  border: 1px solid #a19b9b;
  transition: .3s;
}
.circle{
  width: 1rem;
  height: 1rem;
  border-radius: 50%;
  background: #a19b9b;
  position: absolute;
  left: 1px;
  top: 1px;
  transform: translateX(0rem);
  transition: .3s;
}
input:checked ~.check{
  background: #0099CC;
  transition: .3s;
  border-color: #0099CC;
}
input:checked ~ .circle{
  transform: translateX(1rem);
  transition: .3s;
  background: #EEEEEE;
}

.control-label {
   display: inline-block;
   top: 3px;
}

#config h2 {
   width: 100%;
   margin-top: 0;
   text-align: center;
}

.label-text {
   user-select: none;
   line-height: 20px;
   white-space: nowrap;
}

.option {
   font-size: 15px;
   vertical-align: middle;
   white-space: nowrap;
}
.node {
   width: 100%;
   position: relative;
}
.textarea-block textarea {
   outline: none;
   resize: none;
   border: none;
   width: 100%;
   border-top: 1px solid #0099CC;
   font-size: 12px;
   font-family: 'Calibri', 'Segoe UI',  Tahoma, Geneva, Verdana, sans-serif;
   background-color: transparent;
}
#config button {
   line-height: 18px;
   padding: 8px 4px;
   font-size: 13px;
   border: 1px solid #0099CC;
   cursor: pointer;
   background: transparent; 
   color: #0099CC;
   text-align: center;
   -webkit-transition-duration: 0.3s; /* Safari */
   transition-duration: 0.3s;
   text-decoration: none;
   text-transform: uppercase;
}
#config button:hover {
   background-color: #008CBA;
   color: white;
}

#setNodeValue {
   position: absolute;
   width: 30%;
   right: 0;
}

.label-block {
   position: absolute;
   left: 0;
   border: 1px solid #0099CC;
   padding: 8px 4px;
   color: #0099CC;
   width: 50%;
   white-space:nowrap;
   font-size: 13px;
   overflow: hidden;
   line-height: 18px;
}

.label-block input {
   display: inline-block;
   border: none;
   outline: none;
   width: 48%;
}

.label-block span {
   display: inline-block;
   width: 48%;
}

.textarea-block {
   display: block;
   margin-bottom: 10px;
   margin-top: 10px;

   padding: 8px 8px;
   color: #0e84ab;

   border: 1px solid #0099CC;
}

input[type=number]::-webkit-inner-spin-button, 
input[type=number]::-webkit-outer-spin-button { 
  -webkit-appearance: none;
  margin: 0; 
}
input[type=number] {
    -moz-appearance:textfield;
}
#syncValue {
   display: inline-block;
   margin-left: 25%;
   margin-top: 10px;
   width: 50%;
}

.sync-value {
   margin-top: 60px;
}