* {
   box-sizing: border-box;
}

.FarrisEditorButtons {
   display: block;
   width: 100%;
   min-height: 50px;
   overflow: auto;
   padding: 10px;
   padding-bottom: 5px;
   background-color: #eee;
   border: 1px solid #ddd;
   border-radius: var(--borderRadiusTwo);
}

.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: 15px;
}

/* --------------------------- */
/* --------------------------- */
/* FARRIS HTML */
.FarrisHTML {
   display: block;
   width: 100%;
   height: auto;
   overflow: auto;
   padding: 25px;
   background-color: var(--backgroundMainColor);
   border-bottom: 1px solid var(--borderMainColor);
}

.FarrisHTML img {
   display: block;
   width: 100%;
   height: auto;
   padding: 15px;
   margin: 15px 0px;
   background-color: var(--borderMainColor);
   border-radius: var(--borderRadiusOne);
}

.FarrisHTML h1 {
   display: block;
   width: 100%;
   min-height: 30px;
   overflow: auto;
   padding: 15px;
   border-left: 10px solid var(--borderMainColor);
   margin-bottom: 15px;
   font-size: 30px;
   font-weight: var(--fontTwo);
   line-height: 1.4;
   color: var(--fontMainColor);
   word-wrap: break-word;
}

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

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

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

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

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

.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: 5px;
   padding-left: 15px;
   line-height: 1.6;
   font-size: 20px;
   font-weight: var(--fontOne);
}

.FarrisButton {
   position: relative;
   display: block;
   width: 40px;
   height: 40px;
   padding: 10px;
   background-color: #eee;
   border: 1px outset #ccc;
   border-radius: var(--borderRadiusOne);
   float: left;
   margin-right: 5px;
   margin-bottom: 5px;
}

.FarrisButton:hover {
   cursor: pointer;
   border: 1px outset var(--placeholderMainColor);
}

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

.FarrisButton .Small {
   position: absolute;
   display: block;
   right: 3px;
   bottom: 3px;
   width: 11px;
   height: 11px;
   color: #000;
   font-size: 11px;
}