.FontOptionContainer {
  border: 1px #dbdbdb solid;
  background-color: #fff;
  position: fixed;
  right: 0;
  width: 250px;
  padding: 20px 20px 8px 20px;
  transition: all .3s ease-out; }
  .FontOptionContainer .FontOptionContainer__Item {
    padding-bottom: 12px; }
  .FontOptionContainer .FontOptionContainer__Title {
    font-family: 'Oswald', sans-serif;
    text-transform: uppercase;
    margin-bottom: 12px; }
  .FontOptionContainer ul {
    display: flex;
    width: 100%;
    flex-wrap: wrap; }
    .FontOptionContainer ul li {
      border: 3px #ffdf01 solid;
      border-radius: 3px;
      padding: 4px 5px;
      display: flex;
      justify-content: center;
      width: 100px;
      margin-bottom: 10px;
      cursor: pointer;
      text-transform: capitalize; }
      .FontOptionContainer ul li:nth-child(even) {
        margin-left: 8px; }
      .FontOptionContainer ul li:hover {
        background: #000000;
        color: #ffffff; }
      .FontOptionContainer ul li.active {
        background: #ffdf01;
        color: #000; }
  .FontOptionContainer .FontOptionContainer__Properties {
    display: flex;
    flex-direction: column; }
    .FontOptionContainer .FontOptionContainer__Properties .Select-option.is-selected, .FontOptionContainer .FontOptionContainer__Properties .Select-option.is-focused {
      background-color: rgba(255, 224, 0, 0.2);
      color: #333; }
    .FontOptionContainer .FontOptionContainer__Properties .Select {
      width: 100%;
      margin-bottom: 10px; }
      .FontOptionContainer .FontOptionContainer__Properties .Select.is-focused:not(.is-open) > .Select-control {
        border-color: #ffe000;
        box-shadow: inset 0 1px 1px rgba(0, 0, 0, 0.075), 0 0 0 3px rgba(255, 224, 0, 0.2); }
    .FontOptionContainer .FontOptionContainer__Properties .OtherProperties label {
      font-size: 16px;
      width: 200px;
      font-weight: bold;
      text-transform: uppercase;
      font-family: 'Oswald', sans-serif; }
    .FontOptionContainer .FontOptionContainer__Properties .OtherProperties .OtherProperties__Option {
      display: flex;
      align-items: center;
      margin-bottom: 10px; }
    .FontOptionContainer .FontOptionContainer__Properties .FontSize__Option input[type="number"] {
      width: 45px;
      height: 36px;
      text-align: center;
      -webkit-appearance: none;
      border: none;
      background: none;
      border: 1px #ccc solid;
      border-radius: 4px;
      font-size: inherit; }
      .FontOptionContainer .FontOptionContainer__Properties .FontSize__Option input[type="number"]:focus {
        outline: none;
        border-color: #ffe000;
        box-shadow: inset 0 1px 1px rgba(0, 0, 0, 0.075), 0 0 0 3px rgba(255, 224, 0, 0.2); }
    .FontOptionContainer .FontOptionContainer__Properties .ColorOption__BackGround .ColorPicker .ColorPicker__Color {
      box-shadow: 0 0 0 1px rgba(0, 0, 0, 0.1); }
    .FontOptionContainer .FontOptionContainer__Properties .ColorOption__ForeGround .ColorPicker .ColorPicker__Color {
      font-size: 32px;
      text-align: center;
      line-height: 27px; }