/* stylelint-disable */
/* stylelint-disable */
/* stylelint-disable */
/* stylelint-disable */
/* stylelint-disable */
/**
* Transforms a given palette color to the transparent version of it
*/
/* stylelint-disable */
/* stylelint-disable */
/* stylelint-disable */
/* stylelint-disable */
/* stylelint-disable */
/* stylelint-disable */
/**
* Transforms a given palette color to the transparent version of it
*/
/* stylelint-disable */
.container {
  width: 100%;
  height: 100%;
  overflow: hidden;
}

.records_widget_container {
  margin-left: -15px;
  margin-right: -15px;
}
.records_widget_container:before, .records_widget_container:after {
  content: " ";
  display: table;
}
.records_widget_container:after {
  clear: both;
}
@media (max-height: 50px) {
  .records_widget_container {
    display: none;
  }
}

.header_container {
  width: 100%;
  height: 20%;
  height: 20vh;
  text-align: center;
}
@media (min-aspect-ratio: 2/1) {
  .header_container {
    float: left;
    width: 20%;
    height: 100%;
    height: 100vh;
  }
}
.header_container .widget_title {
  font-size: 18px;
  font-weight: bold;
  color: #595959;
}
@media (min-width: 589px) and (min-height: 339px) {
  .header_container .widget_title {
    font-size: 22px;
  }
}

.records_container {
  width: 100%;
  height: 55%;
  height: 55vh;
  display: flex;
  justify-content: space-around;
  background-color: #f7f7f7;
}
@media (max-aspect-ratio: 1/1) {
  .records_container {
    flex-direction: column;
  }
}
@media (min-aspect-ratio: 2/1) {
  .records_container {
    display: block;
    overflow: hidden;
    float: left;
    width: 55%;
    height: 100%;
    height: 100vh;
  }
}
.records_container .record_result {
  max-width: 64px;
  margin: 7px 4px;
  font-size: 12px;
  word-wrap: break-word;
}
@media (max-aspect-ratio: 1/1) {
  .records_container .record_result {
    display: flex;
    max-height: 64px;
    max-width: none;
  }
}
@media (min-aspect-ratio: 2/1) {
  .records_container .record_result {
    float: left;
    height: 100%;
    max-height: none;
    max-width: none;
    padding: 3px;
    margin: inherit;
  }
}
@media (min-width: 589px) and (min-height: 339px) {
  .records_container .record_result {
    max-width: 96px;
    font-size: 13px;
  }
}
@media (min-width: 589px) and (min-height: 339px) and (max-aspect-ratio: 1/1) {
  .records_container .record_result {
    max-height: 96px;
    max-width: none;
  }
}
@media (min-width: 589px) and (min-height: 339px) and (min-aspect-ratio: 2/1) {
  .records_container .record_result {
    max-width: none;
  }
}
@media (max-aspect-ratio: 1/1) {
  .records_container .record_result .record_aligner {
    width: 100%;
  }
}
@media (min-aspect-ratio: 2/1) {
  .records_container .record_result .record_aligner {
    position: relative;
    top: 50%;
    transform: translateY(-50%);
  }
}
.records_container .record_result .record_aligner .widget_record {
  display: inline-block;
  margin-right: 5px;
  min-width: 64px;
}
@media (max-aspect-ratio: 1/1) {
  .records_container .record_result .record_aligner .widget_record {
    float: left;
  }
}
@media (max-aspect-ratio: 2/1) {
  .records_container .record_result .record_aligner .widget_record {
    display: block;
  }
}
.records_container .record_result .record_aligner .widget_record .record_image {
  max-width: 100%;
}
@media (max-aspect-ratio: 1/1), (min-aspect-ratio: 2/1) {
  .records_container .record_result .record_aligner .widget_record .record_image {
    max-width: 64px;
  }
}
@media (max-aspect-ratio: 1/1) and (min-width: 589px) and (min-height: 339px), (min-aspect-ratio: 2/1) and (min-width: 589px) and (min-height: 339px) {
  .records_container .record_result .record_aligner .widget_record .record_image {
    max-width: 96px;
  }
}
.records_container .record_result .record_aligner .widget_result {
  display: block;
  float: right;
}
.records_container .record_result .record_aligner .widget_record_result {
  color: #595959;
}

.footer_container {
  width: 100%;
  height: 25%;
  height: 25vh;
  text-align: center;
}
@media (min-aspect-ratio: 2/1) {
  .footer_container {
    float: left;
    width: 25%;
    height: 100%;
    height: 100vh;
  }
}

#show_all_records {
  margin: auto;
  white-space: normal;
  max-height: 50px;
}

.tiny_result {
  display: none;
  height: 100%;
  text-align: center;
  background-color: #f7f7f7;
}
@media (max-height: 50px) {
  .tiny_result {
    display: block;
  }
}
.tiny_result .tiny_record_result {
  font-size: 12px;
  font-weight: bold;
  color: #595959;
}
.tiny_result #show_all_records_tiny {
  padding-top: 1px;
  padding-bottom: 1px;
}

.vertical_align {
  position: relative;
  top: 50%;
  transform: translateY(-50%);
}