$primary-color: #112f4e;

.downloadBoxContainer {

    color: whitesmoke;
    margin: auto;

    .downloadBox {
      background-color: $primary-color;
      border-radius: 6px 6px;

      .downloadBoxTextBox {
        padding: 25px 25px;
        display: flex;
        flex-direction: column;
        
        .downloadBoxTitle {
          font-weight: bold;
          margin-bottom: 10px;
        }

        .downloadBoxText {
          margin-bottom: 20px;
          span {
            font-style: italic;
          }
        }

        .downloadBoxButtonContainer {
          margin-top: 20px 0 0 0;
          align-self: center;

          a {
            text-decoration: none;
          }

          img {
            // This should be a global css-filter value as it's generated
            // from the primary color.
            filter: invert(15%) sepia(9%) saturate(5666%) hue-rotate(175deg) brightness(96%) contrast(95%);
          }
        }

        .downloadBoxButton{
          background-color: white;
          color: $primary-color;
          display: flex;

          .downloadPacketText {
            padding-top: 4px;
            padding-left: 5px;
          }
        }

      }
    }
  }