* {
   box-sizing: border-box;
}

.FarrisEditorButtons {
   display: flex;
   flex-direction: row;
   flex-wrap: wrap;
   align-items: center;
   justify-content: space-evenly;
   gap: 3px;
   width: 100%;
   min-height: 50px;
   overflow: auto;
   padding: 5px;
   background-color: #eee;
   border: 1px solid #ddd;
   border-radius: 5px 5px 0px 0px;
}

.FarrisHTML {
   display: block;
   width: 100%;
   min-height: 400px;
   overflow: auto;
   padding: 25px;
   background-color: #eee;
   border: 1px solid #ddd;
   border-top: none;
   outline: none;
   margin-bottom: 0px;
}

/* --------------------------- */
/* --------------------------- */
/* FARRIS HTML */
.FarrisHTML {
   display: block;
   width: 100%;
   height: auto;
   overflow: auto;
   padding: 25px;
   background-color: #2a2a2a;
   border-bottom: 1px solid #4a4a4a;
}

.FarrisHTML img {
   display: block;
   width: 100% !important;
   height: auto;
   padding: 15px;
   margin: 15px 0px;
   background-color: var(--background-secondary);
   border: 1px solid var(--border-color);
   border-radius: 5px;
}

.FarrisHTML h2 {
   display: block;
   width: 100%;
   min-height: 25px;
   overflow: auto;
   margin-bottom: 15px;
   font-size: 25px;
   font-weight: 600;
   line-height: 1.4;
   color: var(--text-primary);
   word-wrap: break-word;
}

.FarrisHTML h3 {
   display: block;
   width: 100%;
   min-height: 20px;
   overflow: auto;
   margin-bottom: 15px;
   font-size: 20px;
   font-weight: 600;
   line-height: 1.4;
   color: var(--text-primary);
   word-wrap: break-word;
}

.FarrisHTML p {
   display: block;
   width: 100% !important;
   min-height: 15px;
   overflow: auto;
   margin-bottom: 15px;
   font-size: 20px;
   font-weight: 300;
   line-height: 1.6;
   color: var(--text-primary);
   word-wrap: break-word;
}

.FarrisHTML p:last-child {
   margin-bottom: 0px;
}

.FarrisHTML a {
   color: var(--primary-color);
}

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

.FarrisHTML ul, .FarrisHTML ol{
   display: block;
   margin-left: 15px;
   margin-top: 5px;
   padding-left: 25px;
}

.FarrisHTML ul li, .FarrisHTML ol li {
   display: list-item;
   list-style: square;
   margin-bottom: 15px;
   padding-left: 15px;
   line-height: 1.6;
   font-size: 20px;
   font-weight: 300;
}

.FarrisButton {
   position: relative;
   display: block;
   width: 52px;
   height: 52px;
   padding: 15px;
   background-color: #eee;
   border: 1px outset #ccc;
   border-radius: 5px;
   float: left;
}

.FarrisButton:hover {
   cursor: pointer;
   border: 1px outset #aaa;
}

.FarrisButton:active {
   border: 1px inset #ccc;
}

.FarrisButton .Small {
   position: absolute;
   display: block;
   right: 2.5px;
   bottom: 2.5px;
   width: 12.5px;
   height: 12.5px;
   font-size: 12.5px;
}

/* --------------------------- */
/* FARRIS HTML MOBILE */
@media screen and (max-width:425px)  {
   
   .FarrisHTML {
      display: block;
      width: 100%;
      height: auto;
      overflow: auto;
      padding: 20px;
      background-color: #2a2a2a;
      border-bottom: 1px solid #4a4a4a;
   }
   
   .FarrisHTML img {
      display: block;
      width: 100% !important;
      height: auto;
      padding: 10px;
      margin: 15px 0px;
      background-color: var(--background-secondary);
      border: 1px solid var(--border-color);
      border-radius: 5px;
   }
   
   .FarrisHTML h2 {
      display: block;
      width: 100%;
      min-height: 22px;
      overflow: auto;
      margin-bottom: 15px;
      font-size: 22px;
      font-weight: 600;
      line-height: 1.4;
      color: var(--text-primary);
      word-wrap: break-word;
   }
   
   .FarrisHTML h3 {
      display: block;
      width: 100%;
      min-height: 18px;
      overflow: auto;
      margin-bottom: 15px;
      font-size: 18px;
      font-weight: 600;
      line-height: 1.4;
      color: var(--text-primary);
      word-wrap: break-word;
   }
   
   .FarrisHTML p {
      display: block;
      width: 100% !important;
      min-height: 14px;
      overflow: auto;
      margin-bottom: 14px;
      font-size: 14px;
      font-weight: 400;
      line-height: 1.6;
      color: var(--text-primary);
      word-wrap: break-word;
   }
   
   .FarrisHTML p:last-child {
      margin-bottom: 0px;
   }
   
   .FarrisHTML a {
      color: var(--primary-color);
   }
   
   .FarrisHTML a:hover {
      text-decoration: underline;
   }
   
   .FarrisHTML ul, .FarrisHTML ol{
      display: block;
      margin-left: 10px;
      margin-top: 5px;
      padding-left: 15px;
   }
   
   .FarrisHTML ul li, .FarrisHTML ol li {
      display: list-item;
      list-style: square;
      margin-bottom: 15px;
      padding-left: 15px;
      line-height: 1.6;
      font-size: 14px;
      font-weight: 400;
   }
   
   .FarrisButton {
      position: relative;
      display: block;
      width: 30px;
      height: 30px;
      padding: 8px;
      background-color: #eee;
      border: 1px outset #ccc;
      border-radius: 5px;
      float: left;
   }
   
   .FarrisButton:hover {
      cursor: pointer;
      border: 1px outset #aaa;
   }
   
   .FarrisButton:active {
      border: 1px inset #ccc;
   }
   
   .FarrisButton .Small {
      position: absolute;
      display: block;
      right: 1px;
      bottom: 1px;
      width: 10px;
      height: 10px;
      font-size: 10px;
   }

}