@import "./blue-fonts";
@import "./blue-config";

.cl-widget-ms-wrapper, .cl-widget-notif-wrapper {
  float: left;
  width: 100%;
  max-width: 270px;
  min-width: 260px;
  height: auto;
  margin: 0;
  padding: 0;
  box-sizing: border-box;
  position: absolute;
  z-index: 1000;
  overflow: unset;
  visibility: visible;
  outline: none;
  font-family: var(--lb3-widget-font);
  font-weight: 300;
  border: none;
  display: block;
  left: 10px;
  top: 10px;
}

.cl-widget-ms-overlay-wrapper {
  display: none;
  float: left;
  width: 100%;
  max-width: 100%;
  min-width: 99%;
  height: 100%;
  margin: 0;
  padding: 0;
  box-sizing: border-box;
  position: absolute;
  z-index: 999;
  overflow: hidden;
  visibility: visible;
  outline: none;
  border: none;
  left: 0;
  top: 0;
}

.cl-being-moved {
  touch-action: manipulation;
  overscroll-behavior-y: contain;
}

.cl-widget-ms-wrapper *, .cl-main-widget-wrapper *, .cl-widget-notif-wrapper * {
  box-sizing: border-box;
  line-height: 20px;
  margin: 0;
  padding: 0;
  border: 0;
  font-size: 100%;
  font: inherit;
  vertical-align: baseline;
  background: none;
}

.cl-widget-ms-wrapper .cl-widget-ms-icon-wrapper {
  position: absolute;
  left: 0;
  top: 0;
  z-index: 2;
}

.cl-widget-ms-wrapper .cl-widget-ms-icon-wrapper .cl-widget-ms-icon {
  display: block;
  min-height: 100%;
  background-image: var(--lb3-widget-icon);
  background-repeat: no-repeat;
  background-position: 50% 50%;
  width: 62px;
  height: 62px;
  background-size: 62px 62px;
  filter: none;
  -webkit-filter: blur(0px);
  -moz-filter: blur(0px);
  -ms-filter: blur(0px);
  filter: progid:DXImageTransform.Microsoft.Blur(PixelRadius='0');
}

.cl-widget-ms-wrapper .cl-widget-ms-information-top-wrapper {
  display: block;
  position: relative;
  float: left;
  left: 0;
  top: 0;
  z-index: 1;
  width: 100%;
  margin: 5px 0 0 25px;
  height: 50px;
}

.cl-widget-ms-wrapper .cl-widget-ms-information-wrapper {
  display: block;
  float: left;
  width: 100%;
  background: var(--lb3-widget-bg-color);
  border: 2px solid var(--lb3-widget-border-color);
  border-radius: 10px 5px 5px 10px;
  color: var(--lb3-widget-text-color);
  padding: 0 10px 0 42px;
  height: 50px;
  transition: all 0.3s ease;
  position: relative;
  left: -10px;
  opacity: 0;
  margin: 0;
}

.cl-widget-ms-wrapper .cl-widget-ms-information-wrapper.cl-show {
  opacity: 1;
  left: 0;
}

.cl-widget-ms-wrapper .cl-widget-ms-information-close-wrapper {
  position: absolute;
  top: -10px;
  right: -10px;
  z-index: 1;

  background: var(--lb3-close-btn-bg-color);
  width: 30px;
  height: 30px;
  border-radius: 100%;
  border: var(--lb3-miniscoreboard-close-wrapper-border);
  border-left: 2px solid transparent;
  border-bottom: 2px solid transparent;
}

.cl-widget-ms-wrapper .cl-widget-ms-information-close {
  float: left;
  background: var(--lb3-miniscoreboard-close-btn-back);
  width: 16px;
  height: 16px;
  color: var(--lb3-miniscoreboard-close-btn-color);
  text-decoration: none;
  text-align: center;
  border-radius: 100%;
  margin: 5px 0 0 5px;
  line-height: 14px;
  font-size: var(--lb3-miniscoreboard-close-btn-font-size);
}


/**
 * Mini Score Board - Opt-in layout
 */
.cl-widget-ms-wrapper .cl-widget-ms-optin-wrapper {
  float: left;
  width: 100%;
}

.cl-widget-ms-wrapper .cl-widget-ms-information-wrapper .time-ind {
  font-size: 7px;
}

.cl-widget-ms-wrapper .cl-widget-ms-optin-wrapper .cl-widget-ms-optin-date-wrapper {
  float: left;
  width: 100%;
  text-transform: uppercase;
  font-size: 11px;
  line-height: 20px;
}

.cl-widget-ms-wrapper .cl-widget-ms-optin-wrapper .cl-widget-ms-optin-date-label {
  float: left;
  width: 40%;
}

.cl-widget-ms-wrapper .cl-widget-ms-optin-wrapper .cl-widget-ms-optin-date {
  float: left;
  width: 60%;
  text-align: right;
  padding: 0 12px 0 0;
}

.cl-widget-ms-wrapper .cl-widget-ms-optin-wrapper .cl-widget-ms-optin-action-wrapper {
  float: left;
  width: 100%;
}

.cl-widget-ms-wrapper .cl-widget-ms-optin-wrapper .cl-widget-ms-optin-action {
  float: left;
  width: 100%;
  cursor: pointer;
  background: var(--lb3-miniscoreboard-opt-btn-back);
  text-align: center;
  text-transform: uppercase;
  color: var(--lb3-miniscoreboard-opt-btn-color);
  border-radius: 5px;
  line-height: var(--lb3-miniscoreboard-opt-line-height);
  font-size: var(--lb3-miniscoreboard-opt-font-size);
  font-weight: 400;
  transition: all 0.3s ease;
  border: var(--lb3-miniscoreboard-opt-btn-border);
}

.cl-widget-ms-wrapper .cl-widget-ms-optin-wrapper .cl-widget-ms-optin-action:hover {
  background: var(--lb3-miniscoreboard-opt-btn-back-hover);
}


/**
 * Mini score board default
 */
.cl-widget-ms-wrapper .cl-widget-ms-default-wrapper {
  float: left;
  width: 100%;
  font-size: 11px;
  line-height: 20px;
}

.cl-widget-ms-wrapper .cl-widget-ms-default-wrapper .cl-widget-ms-default-results-wrapper {
  float: left;
  width: 100%;
}

.cl-widget-ms-wrapper .cl-widget-ms-default-wrapper .cl-widget-ms-default-results-headers {
  float: left;
  width: 100%;
  display: block;
}

.cl-widget-ms-wrapper .cl-widget-ms-default-wrapper .cl-widget-ms-default-results-header-rank {
  float: left;
  width: 100px;
  color: var(--lb3-widget-header-text-color);
  text-transform: uppercase;
  font-size: 11px;
  text-align: right;
  padding: 0 20px 0 0;
}

.cl-widget-ms-wrapper .cl-widget-ms-default-wrapper .cl-widget-ms-default-results-header-points {
  float: left;
  width: 100px;
  color: var(--lb3-widget-header-text-color);
  text-transform: uppercase;
  font-size: 11px;
  text-align: right;
}

.cl-widget-ms-wrapper .cl-widget-ms-default-wrapper .cl-widget-ms-default-date-wrapper {
  float: left;
  width: 100%;
  padding: 2px 0 2px 0;
  font-size: 10px;
  line-height: 12px;
}

.cl-widget-ms-wrapper .cl-widget-ms-default-wrapper .cl-widget-ms-default-date-label {
  float: left;
  width: 40%;
  text-transform: uppercase;
}

.cl-widget-ms-wrapper .cl-widget-ms-default-wrapper .cl-widget-ms-default-date {
  float: left;
  width: 60%;
  text-transform: uppercase;
}

.cl-widget-ms-wrapper .cl-widget-ms-default-wrapper.cl-inverse .cl-widget-ms-default-date-label {
  float: left;
  width: 70%;
  text-align: center;
}

.cl-widget-ms-wrapper .cl-widget-ms-default-wrapper.cl-inverse .cl-widget-ms-default-date {
  float: left;
  width: 30%;
  text-align: center;
  color: var(--lb3-miniscoreboard-date-color);
}

.cl-widget-ms-wrapper .cl-widget-ms-default-mem-entry {
  float: left;
  width: 100%;
  padding: 0 0 5px 0;
}

.cl-widget-ms-wrapper .cl-widget-ms-default-mem-entry .cl-widget-ms-default-mem-label {
  float: left;
  width: 30px;
  height: 16px;
  line-height: 16px;
  background: none;
  font-weight: bold;
  padding: 0 4px 0 0;
}

.cl-widget-ms-wrapper .cl-widget-ms-default-mem-entry .cl-widget-ms-default-mem-rank {
  float: left;
  width: 53px;
  line-height: 16px;
  padding: 0 5px 0 0;
  text-align: right;
  text-overflow: ellipsis;
  overflow: hidden;
  white-space: nowrap;
}

.cl-widget-ms-wrapper .cl-widget-ms-default-mem-entry .cl-widget-ms-default-mem-icon {
  float: left;
  width: 26px;
}

.cl-widget-ms-wrapper .cl-widget-ms-default-mem-entry .cl-widget-ms-default-mem-img {
  float: left;
  height: 16px;
}

.cl-widget-ms-wrapper .cl-widget-ms-default-mem-entry .cl-widget-ms-default-mem-points {
  float: left;
  width: 90px;
  text-align: right;
  line-height: 16px;
}

.cl-widget-ms-wrapper.cl-ms-default-style .cl-widget-ms-information-top-wrapper {
  height: auto;
}

.cl-widget-ms-wrapper.cl-ms-default-style .cl-widget-ms-information-wrapper {
  height: auto;
}

.cl-widget-ms-wrapper .cl-widget-ms-default-wrapper.cl-inverse .cl-widget-ms-default-date-only .cl-widget-ms-default-date-label {
  height: 10px;
  width: 30%;
}

.cl-widget-ms-wrapper .cl-widget-ms-default-wrapper.cl-inverse .cl-widget-ms-default-date-only .cl-widget-ms-default-date {
  color: var(--lb3-widget-date-text-color);
  text-align: right;
  float: right;
  width: 58%;
  padding: 0 15px 0 0;
}

.cl-widget-ms-wrapper .cl-widget-ms-information-top-wrapper .cl-widget-ms-default-wrapper .cl-mem-rank-label {
  display: none;
}

.cl-widget-ms-wrapper .cl-widget-ms-information-top-wrapper .cl-widget-ms-default-wrapper .cl-mem-points-label {
  display: none;
}

.cl-widget-ms-wrapper.cl-vertical-mini .cl-widget-ms-information-top-wrapper .cl-widget-ms-default-wrapper .cl-widget-ms-default-mem-entry {
  display: none;
}

.cl-widget-ms-wrapper.cl-vertical-mini .cl-widget-ms-information-top-wrapper .cl-widget-ms-default-wrapper .cl-widget-ms-default-mem-entry.cl-widget-ms-default-mem-self {
  display: block;
}

.cl-widget-ms-wrapper.cl-vertical-mini .cl-widget-ms-information-top-wrapper .cl-widget-ms-default-wrapper .cl-widget-ms-default-date-label {
  display: none;
}

.cl-widget-ms-wrapper.cl-vertical-mini .cl-widget-ms-information-top-wrapper .cl-widget-ms-default-wrapper .cl-widget-ms-default-date {
  width: 100%;
  padding: 0;
  text-align: center;
}

.cl-widget-ms-wrapper.cl-vertical-mini .cl-widget-ms-information-top-wrapper .cl-widget-ms-default-wrapper .cl-widget-ms-default-results-headers {
  display: none;
}

.cl-widget-ms-wrapper.cl-vertical-mini .cl-widget-ms-information-top-wrapper .cl-widget-ms-default-wrapper .cl-widget-ms-default-mem-label {
  display: none;
}

.cl-widget-ms-wrapper.cl-vertical-mini .cl-widget-ms-information-top-wrapper .cl-widget-ms-default-wrapper .cl-widget-ms-default-mem-rank {
  width: 100%;
  text-align: center;
  padding: 0;
}

.cl-widget-ms-wrapper.cl-vertical-mini .cl-widget-ms-information-top-wrapper .cl-widget-ms-default-wrapper .cl-widget-ms-default-mem-icon {
  display: none;
}

.cl-widget-ms-wrapper.cl-vertical-mini .cl-widget-ms-information-top-wrapper .cl-widget-ms-default-wrapper .cl-widget-ms-default-mem-points {
  width: 100%;
  padding: 0;
  text-align: center;
}

.cl-widget-ms-wrapper.cl-vertical-mini .cl-widget-ms-information-top-wrapper .cl-widget-ms-default-wrapper .cl-mem-rank-label {
  display: block;
  font-size: 11px;
  padding: 10px 0 0 0;
  color: var(--lb3-miniscoreboard-rank-label-color);
  text-transform: uppercase;
}

.cl-widget-ms-wrapper.cl-vertical-mini .cl-widget-ms-information-top-wrapper .cl-widget-ms-default-wrapper .cl-mem-rank {
  font-size: 16px;
  line-height: 40px;
}

.cl-widget-ms-wrapper.cl-vertical-mini .cl-widget-ms-information-top-wrapper .cl-widget-ms-default-wrapper .cl-mem-points-label {
  display: block;
  font-size: 11px;
  padding: 10px 0 0 0;
  color: var(--lb3-miniscoreboard-points-label-color);
  text-transform: uppercase;
}

.cl-widget-ms-wrapper.cl-vertical-mini .cl-widget-ms-information-top-wrapper .cl-widget-ms-default-wrapper .cl-mem-points {
  font-size: 14px;
}


/**
 * Mini score board first to
 */
.cl-widget-ms-wrapper .cl-widget-ms-first-to-wrapper {
  float: left;
  width: 100%;
  font-size: 11px;
  line-height: 20px;
}

.cl-widget-ms-wrapper .cl-widget-ms-first-to-wrapper .cl-widget-ms-first-to-results-wrapper {
  float: left;
  width: 100%;
}

.cl-widget-ms-wrapper .cl-widget-ms-first-to-wrapper .cl-widget-ms-first-to-date-wrapper {
  float: left;
  width: 100%;
  padding: 2px 0 2px 0;
  font-size: 10px;
  line-height: 12px;
}

.cl-widget-ms-wrapper .cl-widget-ms-first-to-wrapper .cl-widget-ms-first-to-date-label {
  float: left;
  width: 40%;
  text-transform: uppercase;
}

.cl-widget-ms-wrapper .cl-widget-ms-first-to-wrapper .cl-widget-ms-first-to-date {
  float: left;
  width: 60%;
  text-transform: uppercase;
}

.cl-widget-ms-wrapper .cl-widget-ms-first-to-wrapper.cl-inverse .cl-widget-ms-first-to-date-label {
  float: left;
  width: 70%;
  text-align: center;
}

.cl-widget-ms-wrapper .cl-widget-ms-first-to-wrapper.cl-inverse .cl-widget-ms-first-to-date {
  float: left;
  width: 30%;
  text-align: center;
  color: var(--lb3-miniscoreboard-first-to-date-color);
}

.cl-widget-ms-wrapper .cl-widget-ms-first-to-mem-entry {
  float: left;
  width: 100%;
  padding: 0 0 5px 0;
}

.cl-widget-ms-wrapper .cl-widget-ms-first-to-mem-entry .cl-widget-ms-first-to-mem-label {
  float: left;
  width: 30px;
  height: 16px;
  line-height: 16px;
  background: none;
  font-weight: bold;
  padding: 0 4px 0 0;
}

.cl-widget-ms-wrapper .cl-widget-ms-first-to-mem-entry .cl-widget-ms-first-to-mem-rank {
  float: left;
  width: 53px;
  line-height: 16px;
  padding: 0 5px 0 0;
  text-align: right;
  text-overflow: ellipsis;
  overflow: hidden;
  white-space: nowrap;
}

.cl-widget-ms-wrapper .cl-widget-ms-first-to-mem-entry .cl-widget-ms-first-to-mem-icon {
  float: left;
  width: 26px;
}

.cl-widget-ms-wrapper .cl-widget-ms-first-to-mem-entry .cl-widget-ms-first-to-mem-img {
  float: left;
  height: 16px;
}

.cl-widget-ms-wrapper .cl-widget-ms-first-to-mem-entry .cl-widget-ms-first-to-mem-points {
  float: left;
  width: 90px;
  text-align: right;
  line-height: 16px;
}

.cl-widget-ms-wrapper.cl-ms-first-to-style .cl-widget-ms-information-top-wrapper {
  height: auto;
}

.cl-widget-ms-wrapper.cl-ms-first-to-style .cl-widget-ms-information-wrapper {
  height: auto;
}

.cl-widget-ms-wrapper .cl-widget-ms-first-to-wrapper.cl-inverse .cl-widget-ms-first-to-date-only .cl-widget-ms-first-to-date-label {
  height: 10px;
  width: 30%;
}

.cl-widget-ms-wrapper .cl-widget-ms-first-to-wrapper.cl-inverse .cl-widget-ms-first-to-date-only .cl-widget-ms-first-to-date {
  color: var(--lb3-miniscoreboard-inverse-first-to-date-only-color);
  text-align: right;
  float: right;
  width: 55%;
  padding: 0 15px 0 0;
}

.cl-widget-ms-wrapper .cl-widget-ms-first-to-wrapper .cl-widget-ms-first-to-results-headers {
  float: left;
  width: 100%;
  display: block;
}

.cl-widget-ms-wrapper .cl-widget-ms-first-to-wrapper .cl-widget-ms-first-to-results-headers.cl-show-headers {
  display: block;
}

.cl-widget-ms-wrapper .cl-widget-ms-first-to-wrapper .cl-widget-ms-first-to-results-header-rank {
  float: left;
  width: 100px;
  color: var(--lb3-miniscoreboard-first-to-header-rank-color);
  text-transform: uppercase;
  font-size: 11px;
  text-align: right;
  padding: 0 20px 0 0;
}

.cl-widget-ms-wrapper .cl-widget-ms-first-to-wrapper .cl-widget-ms-first-to-results-header-points {
  float: left;
  width: 100px;
  color: var(--lb3-miniscoreboard-first-to-header-points-color);
  text-transform: uppercase;
  font-size: 11px;
  text-align: right;
}

.cl-widget-ms-wrapper .cl-widget-ms-information-top-wrapper .cl-widget-ms-first-to-wrapper .cl-mem-rank-label {
  display: none;
}

.cl-widget-ms-wrapper .cl-widget-ms-information-top-wrapper .cl-widget-ms-first-to-wrapper .cl-mem-points-label {
  display: none;
}

.cl-widget-ms-wrapper.cl-vertical-mini .cl-widget-ms-information-top-wrapper .cl-widget-ms-first-to-mem-entry.cl-widget-ms-first-to-mem-self {
  display: block;
}

.cl-widget-ms-wrapper.cl-vertical-mini .cl-widget-ms-information-top-wrapper .cl-widget-ms-first-to-wrapper .cl-widget-ms-first-to-mem-entry {
  display: none;
}

.cl-widget-ms-wrapper.cl-vertical-mini .cl-widget-ms-information-top-wrapper .cl-widget-ms-first-to-wrapper .cl-widget-ms-first-to-mem-entry.cl-widget-ms-first-to-mem-self {
  display: block;
}

.cl-widget-ms-wrapper.cl-vertical-mini .cl-widget-ms-information-top-wrapper .cl-widget-ms-first-to-wrapper .cl-widget-ms-first-to-date-label {
  display: none;
}

.cl-widget-ms-wrapper.cl-vertical-mini .cl-widget-ms-information-top-wrapper .cl-widget-ms-first-to-wrapper .cl-widget-ms-first-to-date {
  width: 100%;
  padding: 0;
  text-align: center;
}

.cl-widget-ms-wrapper.cl-vertical-mini .cl-widget-ms-information-top-wrapper .cl-widget-ms-first-to-wrapper .cl-widget-ms-first-to-results-headers {
  display: none;
}

.cl-widget-ms-wrapper.cl-vertical-mini .cl-widget-ms-information-top-wrapper .cl-widget-ms-first-to-wrapper .cl-widget-ms-first-to-mem-label {
  display: none;
}

.cl-widget-ms-wrapper.cl-vertical-mini .cl-widget-ms-information-top-wrapper .cl-widget-ms-first-to-wrapper .cl-widget-ms-first-to-mem-rank {
  width: 100%;
  text-align: center;
  padding: 0;
}

.cl-widget-ms-wrapper.cl-vertical-mini .cl-widget-ms-information-top-wrapper .cl-widget-ms-first-to-wrapper .cl-widget-ms-first-to-mem-icon {
  display: none;
}

.cl-widget-ms-wrapper.cl-vertical-mini .cl-widget-ms-information-top-wrapper .cl-widget-ms-first-to-wrapper .cl-widget-ms-first-to-mem-points {
  width: 100%;
  padding: 0;
  text-align: center;
}

.cl-widget-ms-wrapper.cl-vertical-mini .cl-widget-ms-information-top-wrapper .cl-widget-ms-first-to-wrapper .cl-mem-rank-label {
  display: block;
  font-size: 11px;
  padding: 10px 0 0 0;
  color: var(--lb3-miniscoreboard-vertical-first-to-rank-color);
  text-transform: uppercase;
}

.cl-widget-ms-wrapper.cl-vertical-mini .cl-widget-ms-information-top-wrapper .cl-widget-ms-first-to-wrapper .cl-mem-rank {
  font-size: 16px;
  line-height: 40px;
}

.cl-widget-ms-wrapper.cl-vertical-mini .cl-widget-ms-information-top-wrapper .cl-widget-ms-first-to-wrapper .cl-mem-points-label {
  display: block;
  font-size: 11px;
  padding: 10px 0 0 0;
  color: var(--lb3-miniscoreboard-vertical-first-to-points-color);
  text-transform: uppercase;
}

.cl-widget-ms-wrapper.cl-vertical-mini .cl-widget-ms-information-top-wrapper .cl-widget-ms-first-to-wrapper .cl-mem-points {
  font-size: 14px;
}


/**
 * Mini Score Board - Sum of Best layout
 */
.cl-widget-ms-wrapper .cl-widget-ms-sum-best-wrapper {
  float: left;
  width: 100%;
  font-size: 11px;
  line-height: 20px;
}

.cl-widget-ms-wrapper .cl-widget-ms-sum-best-wrapper .cl-widget-ms-sum-best-results-wrapper {
  float: left;
  width: 100%;
}

.cl-widget-ms-wrapper .cl-widget-ms-sum-best-wrapper .cl-widget-ms-sum-best-date-wrapper {
  float: left;
  width: 100%;
  padding: 2px 0 2px 0;
  font-size: 10px;
  line-height: 12px;
}

.cl-widget-ms-wrapper .cl-widget-ms-sum-best-wrapper .cl-widget-ms-sum-best-date-label {
  float: left;
  width: 40%;
  text-transform: uppercase;
}

.cl-widget-ms-wrapper .cl-widget-ms-sum-best-wrapper .cl-widget-ms-sum-best-date {
  float: left;
  width: 60%;
  text-transform: uppercase;
}

.cl-widget-ms-wrapper .cl-widget-ms-sum-best-wrapper.cl-inverse .cl-widget-ms-sum-best-date-label {
  float: left;
  width: 70%;
  text-align: center;
}

.cl-widget-ms-wrapper .cl-widget-ms-sum-best-wrapper.cl-inverse .cl-widget-ms-sum-best-date {
  float: left;
  width: 30%;
  text-align: center;
  color: #7a7a7a;
}

.cl-widget-ms-wrapper .cl-widget-ms-sum-best-wrapper .cl-widget-ms-sum-best-area {
  float: left;
  width: 68%;
}

.cl-widget-ms-wrapper .cl-widget-ms-sum-best-wrapper .cl-widget-ms-sum-best-high-area {
  float: left;
  width: 100%;
  padding: 0 5px 0 0;
  line-height: 12px;
}

.cl-widget-ms-wrapper .cl-widget-ms-sum-best-wrapper .cl-widget-ms-sum-best-high-label, .cl-widget-ms-wrapper .cl-widget-ms-sum-best-wrapper .cl-widget-ms-sum-best-last-label {
  float: left;
  width: 60%;
  text-align: left;
  color: #7a7a7a;
  font-size: 9px;
  text-transform: uppercase;
}

.cl-widget-ms-wrapper .cl-widget-ms-sum-best-wrapper .cl-widget-ms-sum-best-high-score, .cl-widget-ms-wrapper .cl-widget-ms-sum-best-wrapper .cl-widget-ms-sum-best-last-score {
  float: left;
  width: 40%;
  text-align: right;
  color: var(--light-font-color);
  font-size: 10px;
}

.cl-widget-ms-wrapper .cl-widget-ms-sum-best-wrapper .cl-widget-ms-sum-best-last-area {
  float: left;
  width: 100%;
  padding: 0 5px 0 0;

  line-height: 12px;
}

.cl-widget-ms-wrapper .cl-widget-ms-sum-best-wrapper .cl-widget-ms-sum-best-rank-area {
  float: left;
  width: 32%;
  text-align: center;
}


.cl-widget-ms-wrapper .cl-widget-ms-sum-best-wrapper .cl-widget-ms-sum-best-rank-value {
  text-align: center;
  position: relative;
  z-index: 1;
  padding: 0 0 0 14px;
}

.cl-widget-ms-wrapper .cl-widget-ms-sum-best-wrapper .cl-widget-ms-sum-best-rank-value.cl-ms-rank-up::before {
  display: none;
  content: "";
  position: absolute;
  background-image: url(../../images/growth-arrow-icon.svg);
  background-repeat: no-repeat;
  background-position: 0 4px;
  background-size: 100%;
  width: 11px;
  height: 15px;
  left: 0;
  top: 0;
}

.cl-widget-ms-wrapper .cl-widget-ms-sum-best-wrapper .cl-widget-ms-sum-best-rank-value.cl-ms-rank-down::before {
  display: none;
  content: "";
  position: absolute;
  background-image: url(../../images/fall-arrow-icon.svg);
  background-repeat: no-repeat;
  background-position: 0 4px;
  background-size: 100%;
  width: 11px;
  height: 15px;
  left: 0;
  top: 0;
}


/**
 * Mini score board vertical
 */
.cl-widget-ms-wrapper.cl-vertical-mini {
  max-width: 74px;
  min-width: 74px;
}

.cl-widget-ms-wrapper.cl-vertical-mini .cl-widget-ms-information-top-wrapper {
  display: block;
  position: relative;
  float: left;
  left: -40px;
  top: 32px;
  z-index: 1;
  width: 88px;
  margin: 5px 0 0 25px;
  height: 200px;
}

.cl-widget-ms-wrapper.cl-vertical-mini .cl-widget-ms-information-wrapper {
  display: block;
  float: left;
  width: 100%;
  background: var(--darkest-color);
  border: 2px solid var(--primary-color);
  border-radius: 10px 10px 10px 10px;
  color: var(--light-font-color);
  padding: 27px 5px 0 5px;
  height: 199px;
  transition: all 0.3s ease;
  position: relative;
  left: 0;
  top: -10px;
  opacity: 0;
  margin: 0;
}

.cl-widget-ms-wrapper.cl-vertical-mini .cl-widget-ms-information-wrapper.cl-show {
  opacity: 1;
  top: 0;
}

.cl-widget-ms-wrapper.cl-vertical-mini .cl-widget-ms-information-close-wrapper {
  position: absolute;
  bottom: -13px;
  right: 26px;
  top: unset;
  z-index: 1;
  background: var(--darkest-color);
  width: 30px;
  height: 30px;
  border-radius: 100%;
  border-color: transparent;
}

.cl-widget-ms-wrapper.cl-vertical-mini .cl-widget-ms-sum-best-wrapper {
  float: left;
  width: 100%;
  font-size: 11px;
  line-height: 20px;
}

.cl-widget-ms-wrapper.cl-vertical-mini .cl-widget-ms-sum-best-wrapper .cl-widget-ms-sum-best-date-wrapper {
  float: left;
  width: 100%;
  padding: 0 0 10px 0;
  font-size: 10px;
  line-height: 12px;
}

.cl-widget-ms-wrapper.cl-vertical-mini .cl-widget-ms-sum-best-wrapper.cl-inverse .cl-widget-ms-sum-best-date-label {
  float: left;
  width: 100%;
  text-align: center;
  font-size: 10px;
}

.cl-widget-ms-wrapper.cl-vertical-mini .cl-widget-ms-information-wrapper .time-ind {
  font-size: 9px;
}

.cl-widget-ms-wrapper.cl-vertical-mini .cl-widget-ms-sum-best-wrapper.cl-inverse .cl-widget-ms-sum-best-date {
  display: none;
}

.cl-widget-ms-wrapper.cl-vertical-mini .cl-widget-ms-sum-best-wrapper .cl-widget-ms-sum-best-area {
  float: left;
  width: 100%;
}

.cl-widget-ms-wrapper.cl-vertical-mini .cl-widget-ms-sum-best-wrapper .cl-widget-ms-sum-best-high-area {
  float: left;
  width: 100%;
  padding: 0;
  line-height: 12px;
}

.cl-widget-ms-wrapper.cl-vertical-mini .cl-widget-ms-sum-best-wrapper .cl-widget-ms-sum-best-high-label,
.cl-widget-ms-wrapper.cl-vertical-mini .cl-widget-ms-sum-best-wrapper .cl-widget-ms-sum-best-last-label {
  float: left;
  width: 100%;
  color: #7a7a7a;
  font-size: 9px;
  text-transform: uppercase;
  text-align: center;
}

.cl-widget-ms-wrapper.cl-vertical-mini .cl-widget-ms-sum-best-wrapper .cl-widget-ms-sum-best-high-score,
.cl-widget-ms-wrapper.cl-vertical-mini .cl-widget-ms-sum-best-wrapper .cl-widget-ms-sum-best-last-score {
  float: left;
  width: 100%;
  text-align: center;
  color: var(--light-font-color);
  font-size: 12px;
  padding: 3px 0 10px 0;
  line-height: 17px;
  overflow: hidden;
  white-space: nowrap;
  text-overflow: ellipsis;
}

.cl-widget-ms-wrapper.cl-vertical-mini .cl-widget-ms-sum-best-wrapper .cl-widget-ms-sum-best-last-area {
  float: left;
  width: 100%;
  padding: 0;
  line-height: 12px;
}

.cl-widget-ms-wrapper.cl-vertical-mini .cl-widget-ms-sum-best-wrapper .cl-widget-ms-sum-best-rank-area {
  float: left;
  width: 100%;
  text-align: center;
}

.cl-widget-ms-wrapper.cl-vertical-mini .cl-widget-ms-sum-best-wrapper .cl-widget-ms-sum-best-rank-value {
  float: left;
  width: 100%;
  text-align: center;
  font-size: 14px;
  overflow: hidden;
  white-space: nowrap;
  text-overflow: ellipsis;
}

.cl-widget-ms-wrapper.cl-vertical-mini .cl-widget-ms-sum-best-wrapper .cl-widget-ms-sum-best-rank-value.cl-ms-rank-same {
  padding: 0 0 0 0;
}

.cl-widget-ms-wrapper.cl-vertical-mini .cl-widget-ms-sum-best-wrapper .cl-widget-ms-sum-best-rank-value.cl-ms-rank-up::before {
  background-position: 0 6px;
}

.cl-widget-ms-wrapper.cl-vertical-mini .cl-widget-ms-sum-best-wrapper .cl-widget-ms-sum-best-rank-value.cl-ms-rank-down::before {
  background-position: 0 6px;
}

.cl-widget-ms-wrapper.cl-vertical-mini .cl-widget-ms-optin-wrapper .cl-widget-ms-optin-date-label {
  float: left;
  width: 100%;
  text-align: center;
}

.cl-widget-ms-wrapper.cl-vertical-mini .cl-widget-ms-optin-wrapper .cl-widget-ms-optin-date {
  float: left;
  width: 100%;
  text-align: center;
  padding: 0 0 20px 0;
}

.cl-widget-ms-wrapper.cl-vertical-mini .cl-widget-ms-optin-wrapper .cl-widget-ms-optin-action {
  float: left;
  width: 100%;
  cursor: pointer;
  background: var(--primary-color);
  text-align: center;
  text-transform: uppercase;
  color: var(--light-font-color);
  border-radius: 5px;
  border: 1px solid var(--light-font-color);
  line-height: 16px;
  font-size: 9px;
  font-weight: 400;
  transition: all 0.3s ease;
  padding: 5px 0;
}


/**
 * Main Section area
 */
.cl-main-widget-wrapper {
  position: fixed;
  z-index: 1001;
  display: none;
  opacity: 0;
  top: 0;
  left: 50%;
  width: 100%;
  height: 100%;
  background: transparent;
  padding: 10px 20px;
  font-family: var(--lb3-widget-font);
  font-weight: 300;
  margin: 0;
  box-sizing: border-box;
  line-height: 20px;
  border: 0;
  vertical-align: baseline;
  background: none;
  max-width: 1000px;
  transform: translate(-50%, 0);
}

.cl-main-widget-wrapper.cl-show {
  opacity: 1;
  transition: all 0.3s ease;
}

.cl-main-widget-wrapper .cl-main-widget-inner-wrapper {
  position: relative;
  width: 100%;
  height: 100%;
  z-index: 1;
  left: 0;
  top: 0;
}

.cl-main-widget-wrapper .cl-main-widget-navigation-container {
  position: absolute;
  width: 92px;
  height: 100%;
  z-index: 2;
  left: 0;
  top: 0;
}
.cl-main-widget-wrapper .cl-hidden-navigation .cl-main-widget-navigation-container {
  display:none;
}

.cl-main-widget-wrapper .cl-main-widget-navigation-container .cl-main-widget-navigation-items {
  float: left;
  width: 100%;
  padding: 25px 0 0 0;
}

.cl-main-widget-wrapper .cl-main-widget-navigation-container .cl-main-widget-navigation-lb {
  margin: -3px -3px;
  width: var(--lb3-widget-navigation-icon-width);
  height: var(--lb3-widget-navigation-icon-height);
  background-image: var(--lb3-tournament-icon-bg-image);
  background-repeat: no-repeat;
  background-color: transparent;
  background-size: 100%;
}

.cl-main-widget-wrapper .cl-main-widget-navigation-container .cl-main-widget-navigation-lb-icon {
  display: block;
  min-height: 100%;
  background-image: var(--lb3-tournament-icon);
  background-repeat: no-repeat;
  background-position: 50% 50%;
  background-size: 50%;
  opacity: 0.7;
}

.cl-main-widget-wrapper .cl-main-widget-navigation-container .cl-main-widget-navigation-ach {
  margin: -6px -3px;
  width: var(--lb3-widget-navigation-icon-width);
  height: var(--lb3-widget-navigation-icon-height);
  background-image: var(--lb3-achievements-icon-bg-image);
  background-repeat: no-repeat;
  background-color: transparent;
  background-size: 100%;
}

.cl-main-widget-wrapper .cl-main-widget-navigation-container .cl-main-widget-navigation-ach-icon {
  display: block;
  min-height: 100%;
  background-image: var(--lb3-achievements-icon);
  background-repeat: no-repeat;
  background-position: 50% 50%;
  background-size: 45%;
  opacity: 0.7;
}

.cl-main-widget-wrapper .cl-main-widget-navigation-container .cl-main-widget-navigation-rewards {
  margin: -6px -3px;
  width: var(--lb3-widget-navigation-icon-width);
  height: var(--lb3-widget-navigation-icon-height);
  background-image: var(--lb3-rewards-icon-bg-image);
  background-repeat: no-repeat;
  background-color: transparent;
  background-size: 100%;
}

.cl-main-widget-wrapper .cl-main-widget-navigation-container .cl-main-widget-navigation-rewards-icon {
  display: block;
  min-height: 100%;
  background-image: var(--lb3-rewards-icon);
  background-repeat: no-repeat;
  background-position: 50% 50%;
  background-size: 45%;
  opacity: 0.7;
}

.cl-main-widget-wrapper .cl-main-widget-navigation-container .cl-main-widget-navigation-inbox {
  margin: -3px -3px;
  width: var(--lb3-widget-navigation-icon-width);
  height: var(--lb3-widget-navigation-icon-height);
  background-image: var(--lb3-messages-icon-bg-image);
  background-repeat: no-repeat;
  background-color: transparent;
  background-size: 100%;
}

.cl-main-widget-wrapper .cl-main-widget-navigation-container .cl-main-widget-navigation-inbox-icon {
  display: block;
  min-height: 100%;
  background-image: var(--lb3-messages-icon);
  background-repeat: no-repeat;
  background-position: 50% 42%;
  background-size: 45%;
  opacity: 0.7;
}

.cl-main-widget-wrapper .cl-main-widget-navigation-container .cl-main-widget-navigation-lb:hover {
  opacity: 0.8;
}

.cl-main-widget-wrapper .cl-main-widget-navigation-container .cl-main-widget-navigation-lb-icon:hover {
  opacity: 1;
}

.cl-main-widget-wrapper .cl-main-widget-navigation-container .cl-main-widget-navigation-ach:hover {
  opacity: 0.8;
}

.cl-main-widget-wrapper .cl-main-widget-navigation-container .cl-main-widget-navigation-ach-icon:hover {
  opacity: 1;
}

.cl-main-widget-wrapper .cl-main-widget-navigation-container .cl-main-widget-navigation-rewards:hover {
  opacity: 0.8;
}

.cl-main-widget-wrapper .cl-main-widget-navigation-container .cl-main-widget-navigation-rewards-icon:hover {
  opacity: 1;
}

.cl-main-widget-wrapper .cl-main-widget-navigation-container .cl-main-widget-navigation-inbox:hover {
  opacity: 0.8;
}

.cl-main-widget-wrapper .cl-main-widget-navigation-container .cl-main-widget-navigation-inbox-icon:hover {
  opacity: 1;
}


.cl-main-widget-wrapper .cl-main-widget-navigation-container .cl-main-widget-navigation-lb.cl-active-nav, .cl-main-widget-wrapper .cl-main-widget-navigation-container .cl-main-widget-navigation-lb.cl-active-nav:hover {
  width: 92px;
  height: 92px;
  opacity: 1;
  margin: -3px -3px 3px -3px;
}

.cl-main-widget-wrapper .cl-main-widget-navigation-container .cl-main-widget-navigation-lb.cl-active-nav .cl-main-widget-navigation-lb-icon, .cl-main-widget-wrapper .cl-main-widget-navigation-container .cl-main-widget-navigation-lb.cl-active-nav .cl-main-widget-navigation-lb-icon:hover {
  opacity: 1;
}

.cl-main-widget-wrapper .cl-main-widget-navigation-container .cl-main-widget-navigation-ach.cl-active-nav, .cl-main-widget-wrapper .cl-main-widget-navigation-container .cl-main-widget-navigation-ach.cl-active-nav:hover {
  width: 92px;
  height: 92px;
  opacity: 1;
  margin: -3px -3px 3px -3px;
}

.cl-main-widget-wrapper .cl-main-widget-navigation-container .cl-main-widget-navigation-ach.cl-active-nav .cl-main-widget-navigation-ach-icon, .cl-main-widget-wrapper .cl-main-widget-navigation-container .cl-main-widget-navigation-ach.cl-active-nav .cl-main-widget-navigation-ach-icon:hover {
  opacity: 1;
}

.cl-main-widget-wrapper .cl-main-widget-navigation-container .cl-main-widget-navigation-rewards.cl-active-nav, .cl-main-widget-wrapper .cl-main-widget-navigation-container .cl-main-widget-navigation-rewards.cl-active-nav:hover {
  width: 92px;
  height: 92px;
  opacity: 1;
  margin: -3px -3px 3px -3px;
}

.cl-main-widget-wrapper .cl-main-widget-navigation-container .cl-main-widget-navigation-rewards.cl-active-nav .cl-main-widget-navigation-rewards-icon, .cl-main-widget-wrapper .cl-main-widget-navigation-container .cl-main-widget-navigation-rewards.cl-active-nav .cl-main-widget-navigation-rewards-icon:hover {
  opacity: 1;
}

.cl-main-widget-wrapper .cl-main-widget-navigation-container .cl-main-widget-navigation-inbox.cl-active-nav, .cl-main-widget-wrapper .cl-main-widget-navigation-container .cl-main-widget-navigation-inbox.cl-active-nav:hover {
  width: 92px;
  height: 92px;
  opacity: 1;
  margin: -3px -3px 3px -3px;
}

.cl-main-widget-wrapper .cl-main-widget-navigation-container .cl-main-widget-navigation-inbox.cl-active-nav .cl-main-widget-navigation-inbox-icon, .cl-main-widget-wrapper .cl-main-widget-navigation-container .cl-main-widget-navigation-inbox.cl-active-nav .cl-main-widget-navigation-inbox-icon:hover {
  opacity: 1;
}

.cl-main-widget-wrapper .cl-main-widget-navigation-container .cl-main-widget-navigation-items .cl-hidden-navigation-item{
  display: none;
}


.cl-main-widget-wrapper .cl-main-widget-section-container {
  position: relative;
  width: 100%;
  height: 100%;
  z-index: 1;
  left: 0;
  top: 0;
  padding: 0 0 0 73px;
}
.cl-main-widget-wrapper .cl-hidden-navigation .cl-main-widget-section-container {
  padding: 0 0 0 0;
}

.cl-main-widget-wrapper .cl-main-widget-section-container .cl-main-widget-lb {
  display: none;
  position: relative;
  width: 100%;
  height: 100%;
  z-index: 1;
  left: 0;
  top: 0;
  background: var(--primary-color);
  border-radius: 5px;
  box-shadow: 0 3px 4px rgba(0, 0, 0, 0.6);
  overflow: hidden;
}

.cl-main-widget-wrapper .cl-main-widget-section-container .cl-main-widget-lb-header {
  float: left;
  width: 100%;
  height: 30px;
  background: var(--lb3-tournament-header-back);
  border-radius: 5px 5px 0 0;
  position: relative;
  z-index: 2;
  border-bottom: var(--lb3-tournament-header-border-bottom);
}

.cl-main-widget-wrapper .cl-main-widget-section-container .cl-main-widget-lb-header .cl-main-widget-lb-header-list {
  float: left;
  width: 20%;
}

.cl-main-widget-wrapper .cl-main-widget-section-container .cl-main-widget-lb-header .cl-main-widget-lb-header-list-icon {
  display: block;
  min-height: 100%;
  background-image: var(--lb3-tournament-header-list-back-image);
  background-repeat: no-repeat;
  background-position: 50% 50%;
  width: 30px;
  height: 30px;
  margin: 0 0 0 10px;
  background-size: 85%;
  cursor: pointer;
}

.cl-main-widget-wrapper .cl-main-widget-section-container .cl-main-widget-lb-header .cl-main-widget-lb-header-label {
  float: left;
  width: 60%;
  text-align: center;
  line-height: 30px;
  color: var(--lb3-tournament-header-label-color);
  text-transform: uppercase;
  font-size: 14px;
  font-weight: 500;
}

.cl-main-widget-wrapper .cl-main-widget-section-container .cl-main-widget-lb-header .cl-main-widget-lb-header-date {
  float: left;
  width: auto;
  position: absolute;
  top: 0;
  right: 50px;
  line-height: 30px;
  color: var(--lb3-tournament-header-date-color);
  font-size: 12px;
  min-width: 125px;
}

.cl-main-widget-wrapper .cl-main-widget-section-container .cl-main-widget-lb-header .cl-main-widget-lb-header-close {
  position: absolute;
  display: block;
  background-image: var(--lb3-tournament-header-close-back-image);
  background-repeat: no-repeat;
  background-position: 50% 50%;
  background-size: 70%;
  width: 30px;
  height: 30px;
  right: 3px;
  top: 0;
  cursor: pointer;
}

.cl-main-widget-wrapper .cl-main-widget-section-container .cl-main-widget-lb-details {
  float: left;
  width: 100%;
  height: 42px;
  background: var(--lb3-tournament-details-bg-color);
  position: relative;
  z-index: 2;
}

// .cl-main-widget-wrapper .cl-main-widget-section-container .cl-main-widget-lb-details-info {

// }

.cl-main-widget-wrapper .cl-main-widget-section-container .cl-main-widget-lb-details-content {
  float: left;
  width: 100%;
  text-align: center;
  padding: 10px 0 0 0;
}

.cl-main-widget-wrapper .cl-main-widget-section-container .cl-main-widget-lb-details-content-label {
  text-align: center;
  padding: 0 40px;
  line-height: 32px;
  color: var(--lb3-tournament-details-label-color);
  text-transform: uppercase;
  display: inline-block;
  position: relative;
  margin: 0 auto;
  overflow: hidden;
  white-space: nowrap;
  text-overflow: ellipsis;
  max-width: 100%;
}

.cl-main-widget-wrapper .cl-main-widget-section-container .cl-main-widget-lb-details-content-label::before {
  position: absolute;
  content: "";
  display: block;
  background-image: url(../../images/info-icon-dark.svg);
  background-repeat: no-repeat;
  background-position: 50% 50%;
  background-size: 70%;
  width: 30px;
  height: 30px;
  left: 0;
  top: 1px;
  cursor: pointer;
}

// .cl-main-widget-wrapper .cl-main-widget-section-container .cl-main-widget-lb-details-info-icon {

// }

.cl-main-widget-wrapper .cl-main-widget-section-container .cl-main-widget-lb-footer {
  float: left;
  width: 100%;
  height: 22px;
  position: absolute;
  bottom: 0;
  left: 0;
  background: var(--lb3-tournament-footer-bg-color);
  border-radius: 0 0 5px 5px;
  z-index: 2;
  border-top: var(--lb3-tournament-footer-top-border);
}

.cl-main-widget-wrapper .cl-main-widget-section-container .cl-main-widget-lb-missing-member {
  display: none;
  float: left;
  width: 100%;
  height: 30px;
  position: absolute;
  bottom: 22px;
  left: 0;
  background: var(--lb3-tournament-lb-active-member-row-back);
  z-index: 3;
  color: var(--lb3-tournament-lb-active-member-row-color);
  padding: 0 30px;
}
.cl-main-widget-wrapper .cl-main-widget-section-container .cl-main-widget-lb-missing-member .cl-col{
  color: var(--lb3-tournament-lb-active-member-row-color);
}

.cl-main-widget-wrapper .cl-main-widget-section-container .cl-main-widget-lb-footer-content {
  float: left;
  width: 100%;
  line-height: 22px;
  color: var(--lb3-tournament-footer-text-color);
  font-size: 11px;
  text-align: center;
}

.cl-main-widget-wrapper .cl-main-widget-section-container .cl-main-widget-lb-leaderboard {
  position: absolute;
  left: 0;
  top: 0;
  width: 100%;
  height: 100%;
  z-index: 1;
  padding: 72px 0 22px 0;
  background: var(--lb3-tournament-container-bg-color);
  border-radius: 5px;
}

.cl-main-widget-wrapper .cl-main-widget-section-container .cl-main-widget-lb-leaderboard-header {
  float: left;
  width: 100%;
  padding: 0 30px;
}

.cl-main-widget-wrapper .cl-main-widget-section-container .cl-main-widget-lb-leaderboard-header-labels {
  float: left;
  width: 100%;
}

.cl-main-widget-wrapper .cl-main-widget-section-container .cl-col {
  float: left;
  color: var(--lb3-tournament-container-text-color);
  font-size: var(--lb3-tournament-container-text-size);
  line-height: var(--lb3-tournament-container-line-height);
  background: none;
  height: var(--lb3-tournament-container-height);
}

.cl-main-widget-wrapper .cl-main-widget-section-container .cl-main-widget-lb-leaderboard-header-labels .cl-col {
  color: var(--lb3-tournament-header-text-color);
  font-size: var(--lb3-tournament-header-text-size);
  line-height: 20px;
  height: 20px;
}

.cl-main-widget-wrapper .cl-main-widget-section-container .cl-rank-col {
  width: 9%;
}

.cl-main-widget-wrapper .cl-main-widget-section-container .cl-icon-col {
  width: 9%;
}

.cl-main-widget-wrapper .cl-main-widget-section-container .cl-name-col {
  width: 24%;
  text-overflow: ellipsis;
  white-space: nowrap;
  overflow: hidden;
  padding: 0 10px 0 0;
}

.cl-main-widget-wrapper .cl-main-widget-section-container .cl-growth-col {
  width: 9%;
}

.cl-main-widget-wrapper .cl-main-widget-section-container .cl-points-col {
  width: 37%;
  text-overflow: ellipsis;
  overflow: hidden;
  padding: 0 10px 0 0;
}

.cl-main-widget-wrapper .cl-main-widget-section-container .cl-reward-col {
  width: 12%;
}

.cl-main-widget-wrapper .cl-main-widget-section-container .cl-main-widget-lb-leaderboard-header-top-res {
  float: left;
  width: 100%;
  background: var(--lb3-tournament-top-results-bg-color);
  padding: 0 30px;
  box-shadow: var(--lb3-tournament-top-results-bg-box-shadow);
  border-radius: 0 0 5px 5px;
}

.cl-main-widget-wrapper .cl-main-widget-section-container .cl-main-widget-lb-leaderboard-header-top-res {
  float: left;
  width: 100%;
  padding: 0 30px;
}

.cl-main-widget-wrapper .cl-main-widget-section-container .cl-main-widget-lb-leaderboard-body {
  position: relative;
  float: left;
  width: 100%;
  z-index: 1;
  overflow: auto;
  height: calc(100% - 103px);
}

.cl-main-widget-wrapper .cl-main-widget-section-container .cl-main-widget-lb-leaderboard-body-res {
  float: left;
  width: 100%;
  padding: 0 15px 0 30px;
  overflow: hidden;
}

.cl-main-widget-wrapper .cl-main-widget-section-container .cl-main-widget-lb-leaderboard-body.cl-element-scrollable .cl-main-widget-lb-leaderboard-body-res {
  padding: 0 15px 0 30px;
}

.cl-main-widget-wrapper .cl-main-widget-section-container .cl-rank-col {
  width: 9%;
}
.cl-main-widget-wrapper .cl-main-widget-section-container .cl-main-widget-lb-leaderboard-body .cl-rank-col {
  padding:0 0 0 3px;
}

.cl-main-widget-wrapper .cl-main-widget-section-container .cl-rank-col .cl-rank-col-value {
  float: left;
}

.cl-main-widget-wrapper .cl-main-widget-section-container .cl-rank-col-value {
  float: left;
  min-width: 20px;
  text-align: center;
}

.cl-main-widget-wrapper .cl-main-widget-section-container .cl-main-widget-lb-leaderboard-header-top-res .cl-rank-col-value {
  float: left;
  min-width: 20px;
  background: #ffe500;
  border: 1px solid #e2d45f;
  border-radius: 100%;
  color: var(--primary-color);
  text-align: center;
  font-size: 11px;
  font-weight: 400;
  line-height: 18px;
  padding: 0;
  min-height: 20px;
  margin: 3px 0 0 0;
  box-shadow: 1px 1px 3px #575f57;
}

.cl-main-widget-wrapper .cl-main-widget-section-container .cl-lb-rank-1 .cl-rank-col-value {
  background-image: var(--lb3-tournament-lb-first-place-back);
  background-repeat: no-repeat;
  background-color: var(--lb3-tournament-lb-first-place-color);
  border: var(--lb3-tournament-lb-first-place-border);
  height: 26px;
  width: 26px;
  font-size: 13px;
  line-height: 24px;
}

.cl-main-widget-wrapper .cl-main-widget-section-container .cl-lb-rank-2 .cl-rank-col-value {
  background-image: var(--lb3-tournament-lb-second-place-back);
  background-repeat: no-repeat;
  background-color: var(--lb3-tournament-lb-second-place-color);
  border: var(--lb3-tournament-lb-second-place-border);
  height: 26px;
  width: 26px;
  font-size: 13px;
  line-height: 24px;
}

.cl-main-widget-wrapper .cl-main-widget-section-container .cl-lb-rank-3 .cl-rank-col-value {
  background-image: var(--lb3-tournament-lb-third-place-back);
  background-repeat: no-repeat;
  background-color: var(--lb3-tournament-lb-third-place-color);
  border: var(--lb3-tournament-lb-third-place-border);
  height: 26px;
  width: 26px;
  font-size: 13px;
  line-height: 24px;
}

.cl-main-widget-wrapper .cl-main-widget-section-container .cl-icon-col {
  width: 9%;
}

.cl-main-widget-wrapper .cl-main-widget-section-container .cl-icon-col .cl-icon-col-img {
  height: 20px;
  float: left;
  box-shadow: 1px 2px 2px #979797;
  margin: 3px 0 0 0;
}

.cl-main-widget-wrapper .cl-main-widget-section-container .cl-name-col {
  width: 30%;
  max-width: 220px;
}

.cl-main-widget-wrapper .cl-main-widget-section-container .cl-growth-col {
  width: 9%;
  max-width: 65px;
}

.cl-main-widget-wrapper .cl-main-widget-section-container .cl-points-col {
  width: 31%;
  max-width: 240px;
}

.cl-main-widget-wrapper .cl-main-widget-section-container .cl-reward-col {
  width: 12%;
}


.cl-main-widget-wrapper .cl-main-widget-section-container .cl-main-widget-lb-leaderboard .cl-lb-row {
  float: left;
  width: 100%;
}
.cl-main-widget-wrapper .cl-main-widget-section-container .cl-main-widget-lb-leaderboard .cl-main-widget-lb-leaderboard-header-top-res .cl-lb-row {
  padding:0 0 2px 0;
}

.cl-main-widget-wrapper .cl-main-widget-section-container .cl-main-widget-lb-leaderboard .cl-lb-member-row {
  position: relative;
  background: var(--lb3-tournament-lb-active-member-row-back);
  color: var(--lb3-tournament-lb-active-member-row-color);
}

.cl-main-widget-wrapper .cl-main-widget-section-container .cl-main-widget-lb-leaderboard .cl-lb-member-row .cl-col {
  color:var(--lb3-tournament-lb-active-member-row-color);
}

.cl-main-widget-wrapper .cl-main-widget-section-container .cl-main-widget-lb-leaderboard .cl-lb-member-row .cl-name-col,
.cl-main-widget-wrapper .cl-main-widget-section-container .cl-main-widget-lb-missing-member .cl-name-col {
  text-transform: uppercase;
  font-weight: 400;
}

.cl-main-widget-wrapper .cl-main-widget-section-container .cl-main-widget-lb-leaderboard .cl-lb-member-row::before {
  position: absolute;
  left: -18px;
  top: 0;
  content: "";
  background: var(--lb3-tournament-lb-active-member-row-back);
  width: 18px;
  height: var(--lb3-tournament-lb-active-member-row-height);
  border-radius: 5px 0 0 5px;
}

.cl-main-widget-wrapper .cl-main-widget-section-container .cl-main-widget-lb-leaderboard .cl-lb-member-row::after {
  position: absolute;
  right: -10px;
  top: 0;
  content: "";
  background: var(--lb3-tournament-lb-active-member-row-back);
  width: 10px;
  height: var(--lb3-tournament-lb-active-member-row-height);
  border-radius: 0 5px 5px 0;
}

/*.cl-main-widget-wrapper .cl-main-widget-section-container .cl-main-widget-lb-leaderboard .cl-main-widget-lb-leaderboard-body.cl-element-scrollable .cl-lb-member-row::after{*/
/*    right:-10px;*/
/*    width:10px;*/
/*}*/
.cl-main-widget-wrapper .cl-main-widget-section-container .cl-growth-icon {
  float: left;
  width: 20px;
  height: 20px;
  line-height: 20px;
  background: none;
  background-repeat: no-repeat;
  margin: 3px 0 0 0;
}

.cl-main-widget-wrapper .cl-main-widget-section-container .cl-growth-up {
  display: none;
  background-image: url(./../images/growth-arrow-icon.svg)  ;
  background-repeat: no-repeat;
  background-position: 50% 50%;
  background-size: 100%;
}

.cl-main-widget-wrapper .cl-main-widget-section-container .cl-growth-same {
  display: none;
  background-image: url(../../images/growth-arrow-grey-icon.svg);
  background-position: 50% 50%;
  background-size: 100%;
}

.cl-main-widget-wrapper .cl-main-widget-section-container .cl-growth-down {
  display: none;
  background-image: url(../../images/fall-arrow-icon.svg);
  background-position: 50% 50%;
  background-size: 100%;
}

.cl-main-widget-wrapper .cl-main-widget-lb-details-container {
  position: absolute;
  height: calc(100% - 52px);
  background: var(--lb3-tournament-details-container-bg-color);
  top: 30px;
  left: -200px;
  width: 100%;
  z-index: 10;
  opacity: 0;
  display: none;
  transition: all 0.3s ease;
}

.cl-main-widget-wrapper .cl-main-widget-lb-details-container.cl-show {
  left: 0;
  opacity: 1;
}

.cl-main-widget-wrapper .cl-main-widget-lb-details-container .cl-main-widget-lb-details-header {
  float: left;
  width: 100%;
  min-height: 60px;
  padding: 10px 60px;
}

.cl-main-widget-wrapper .cl-main-widget-lb-details-container .cl-main-widget-lb-details-header-label {
  float: left;
  width: 100%;
  text-align: center;
  color: var(--lb3-tournament-details-header-color);
  height: 30px;
  line-height: 30px;
  font-size: 24px;
  font-weight: 400;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  padding: 0 20px;
}

.cl-main-widget-wrapper .cl-main-widget-lb-details-container .cl-main-widget-lb-details-header-date {
  float: left;
  width: 100%;
  text-align: center;
  color: var(--lb3-tournament-details-date-color);
  height: 30px;
  line-height: 30px;
  font-size: 18px;
  font-weight: 300;
}

.cl-main-widget-wrapper .cl-main-widget-lb-details-container .cl-main-widget-lb-details-back-btn {
  position: absolute;
  left: 20px;
  top: 16px;
  width: 30px;
  height: 26px;
  background-image: var(--prev-btn-icon-bg);
  background-repeat: no-repeat;
  background-size: 100%;
  cursor: pointer;
  z-index: 1;
}

.cl-main-widget-wrapper .cl-main-widget-lb-details-container .cl-main-widget-lb-details-body-container {
  float: left;
  width: 100%;
  overflow: auto;
  padding: 5px 40px 25px 40px;
  position: absolute;
  top: 80px;
  height: calc(100% - 80px);
}

.cl-main-widget-wrapper .cl-main-widget-lb-details-container .cl-main-widget-lb-details-body {
  float: left;
  width: 100%;
  color: var(--lb3-tournament-details-body-color);
  font-size: 14px;
  line-height: 20px;
  margin: 0;
  padding: 0 0 60px 0;
}

.cl-main-widget-wrapper .cl-main-widget-lb-details-container .cl-main-widget-lb-details-body-image-cont {
  float: left;
  width: 100%;
  padding: 0;
  margin: 0;
  text-align: center;
}

.cl-main-widget-wrapper .cl-main-widget-lb-details-container .cl-main-widget-lb-details-body-image-cont img {
  max-width: 100%;
}

.cl-main-widget-wrapper .cl-main-widget-lb-details-container .cl-main-widget-lb-details-body * {
  line-height: 20px;
  margin: 0;
  padding: 0;
  border: 0;
  font-size: 100%;
  font: inherit;
  vertical-align: baseline;
  background: none;
}

.cl-main-widget-wrapper .cl-main-widget-lb-details-container .cl-main-widget-lb-details-body img {
  max-width: 100%;
}

.cl-main-widget-wrapper .cl-main-widget-lb-details-container .cl-main-widget-lb-details-body p {
  position: unset;
  transform: none;
  text-align: left;
  font-size: 12px;
  float: none;
}

.cl-main-widget-wrapper .cl-main-widget-lb-details-container .cl-main-widget-lb-details-body a {
  position: unset;
  transform: none;
  text-align: left;
  font-size: 12px;
  float: none;
  color: var(--lb3-tournament-details-link-color);
}

.cl-main-widget-wrapper .cl-main-widget-pre-loader {
  position: absolute;
  right: 0;
  top: 0;
  width: calc(100% - 73px);
  height: 100%;
  background: rgba(0, 0, 0, 0.3);
  opacity: 0;
  display: none;
  z-index: 10;
  border-radius: 5px;
  transition: all 0.2s ease;
}
.cl-main-widget-wrapper .cl-hidden-navigation .cl-main-widget-pre-loader{
  width: 100%;
}

.cl-main-widget-wrapper .cl-main-widget-pre-loader-content {
  left: 48%;
  top: 30%;
  line-height: 30px;
  text-align: left;
  color: var(--light-font-color);
  font-size: 14px;
  font-weight: bold;
  display: inline-block;
  position: relative;
  width: 80px;
  height: 80px;
  margin: 0 0 0 -40px;
}

.cl-main-widget-wrapper .cl-main-widget-pre-loader-content .cl-pre-loader-bar {
  display: inline-block;
  position: absolute;
  left: 8px;
  width: 16px;
  background: var(--light-font-color);
  animation: cl-main-widget-pre-loader-content 1.2s cubic-bezier(0, 0.5, 0.5, 1) infinite;
}

.cl-main-widget-wrapper .cl-main-widget-pre-loader-content .cl-pre-loader-bar:nth-child(1) {
  left: 8px;
  animation-delay: -0.24s;
}

.cl-main-widget-wrapper .cl-main-widget-pre-loader-content .cl-pre-loader-bar:nth-child(2) {
  left: 32px;
  animation-delay: -0.12s;
}

.cl-main-widget-wrapper .cl-main-widget-pre-loader-content .cl-pre-loader-bar:nth-child(3) {
  left: 56px;
  animation-delay: 0;
}

@keyframes cl-main-widget-pre-loader-content {
  0% {
    top: 8px;
    height: 64px;
  }
  50%, 100% {
    top: 24px;
    height: 32px;
  }
}

/**
 * Competition list
 */
.cl-main-widget-tournaments-list {
  position: absolute;
  height: calc(100% - 63px);
  background: var(--lb3-tournament-list-bg-color);
  top: 40px;
  left: -200px;
  width: 100%;
  z-index: 10;
  opacity: 0;
  display: none;
  transition: all 0.3s ease;
}

.cl-main-widget-tournaments-list.cl-show {
  left: 0;
  opacity: 1;
}

.cl-main-widget-tournaments-list .cl-main-widget-tournaments-list-body {
  position: relative;
  float: left;
  width: 100%;
  z-index: 1;
  overflow: auto;
  height: calc(100% - 50px);
  top: 50px;
}

.cl-main-widget-tournaments-list .cl-main-widget-tournaments-list-body .cl-main-widget-tournaments-list-body-res {
  float: left;
  width: 100%;
}

.cl-main-widget-tournaments-list .cl-main-widget-tournaments-back-btn {
  position: absolute;
  left: 20px;
  top: 13px;
  width: 30px;
  height: 26px;
  background-image: var(--prev-btn-icon-bg);
  background-repeat: no-repeat;
  background-size: 100%;
  cursor: pointer;
  z-index: 1;
}


/**
 * ***** Body table reset styles START *****
 */
.cl-main-widget-wrapper .cl-main-widget-lb-details-body table,
.cl-main-widget-wrapper .cl-main-widget-lb-details-body thead,
.cl-main-widget-wrapper .cl-main-widget-lb-details-body tbody,
.cl-main-widget-wrapper .cl-main-widget-lb-details-body tfoot,
.cl-main-widget-wrapper .cl-main-widget-lb-details-body tr,
.cl-main-widget-wrapper .cl-main-widget-lb-details-body th,
.cl-main-widget-wrapper .cl-main-widget-lb-details-body td {
  display: table;
  width: 100%;
  height: auto;
  margin: 0;
  padding: 0;
  border: 1px solid var(--light-font-color);
  border-collapse: collapse;
  border-spacing: 0;
  vertical-align: inherit;
  text-align: left;
  font-weight: inherit;
  -webkit-border-horizontal-spacing: 0;
  -webkit-border-vertical-spacing: 0;
}

.cl-main-widget-wrapper .cl-main-widget-lb-details-body thead,
.cl-main-widget-wrapper .cl-main-widget-lb-details-body tbody,
.cl-main-widget-wrapper .cl-main-widget-lb-details-body tfoot {
  border: none;
}

.cl-main-widget-wrapper .cl-main-widget-lb-details-body th, .cl-main-widget-wrapper .cl-main-widget-lb-details-body td {
  display: table-cell;
  width: auto;
  border-collapse: collapse;
  padding: 2px 5px;
}

/******** Body table reset styles END *******/

/**
 * ***** Body list reset styles START ******
 */
.cl-main-widget-wrapper .cl-main-widget-lb-details-body ul {
  list-style-type: disc;
  list-style-position: inside;
}

.cl-main-widget-wrapper .cl-main-widget-lb-details-body ol {
  list-style-type: decimal;
  list-style-position: inside;
}

.cl-main-widget-wrapper .cl-main-widget-lb-details-body ul ul, .cl-main-widget-wrapper .cl-main-widget-lb-details-body ol ul {
  list-style-type: circle;
  list-style-position: inside;
  margin-left: 15px;
}

.cl-main-widget-wrapper .cl-main-widget-lb-details-body ol ol, .cl-main-widget-wrapper .cl-main-widget-lb-details-body ul ol {
  list-style-type: lower-latin;
  list-style-position: inside;
  margin-left: 15px;
}

/********Body list reset styles END *******/


.cl-main-widget-wrapper .cl-main-widget-lb-details-container .cl-main-widget-lb-details-optin-container {
  float: left;
  width: 100%;
  text-align: center;
  position: absolute;
  bottom: 0;
  padding: 10px 0;
  background: var(--lb3-tournament-details-opt-in-back);
  border-top: var(--lb3-tournament-details-opt-in-back-border-top);
}

.cl-main-widget-wrapper .cl-main-widget-lb-details-container .cl-main-widget-lb-details-optin-action {
  width: auto;
  cursor: pointer;
  background: var(--lb3-tournament-details-opt-in-btn-back);
  text-align: center;
  text-transform: uppercase;
  color: var(--lb3-tournament-details-opt-in-color);
  border-radius: 5px;
  line-height: 24px;
  font-size: 15px;
  font-weight: 400;
  transition: all 0.3s ease;
  display: inline-block;
  padding: 9px 28px;
  box-shadow: 0px 2px 4px rgba(0, 0, 0, 0.4);
  text-decoration: none;
  border: var(--lb3-tournament-details-opt-in-border);
}

.cl-main-widget-wrapper .cl-main-widget-lb-details-container .cl-main-widget-lb-details-optin-action:hover {
  background: var(--lb3-tournament-details-opt-in-btn-back-hover);
}

.cl-main-widget-wrapper .cl-main-widget-lb-details-container .cl-main-widget-lb-details-optin-action.cl-disabled {
  opacity: 0.4;
  cursor: not-allowed;
  pointer-events: none;
  filter: alpha(opacity=65);
  -webkit-box-shadow: none;
  box-shadow: none;
}

.cl-main-widget-wrapper .cl-main-widget-lb-optin-container {
  display: none;
  float: left;
  width: 100%;
  height: 68px;
  position: absolute;
  bottom: 22px;
  left: 0;
  z-index: 3;
  color: var(--light-font-color);
  padding: 10px 30px;
  background: var(--lb3-tournament-lb-opt-in-back);
  text-align: center;
}

.cl-main-widget-wrapper .cl-main-widget-lb-optin-action {
  width: auto;
  cursor: pointer;
  background: var(--lb3-tournament-lb-opt-in-btn-back);
  text-align: center;
  text-transform: uppercase;
  color: var(--lb3-tournament-lb-opt-in-btn-color);
  border-radius: 5px;
  line-height: 24px;
  font-size: 15px;
  font-weight: 400;
  transition: all 0.3s ease;
  display: inline-block;
  padding: 9px 28px;
  box-shadow: 0px 2px 4px rgba(0, 0, 0, 0.4);
  text-decoration: none;
  border: var(--lb3-tournament-lb-opt-in-border);
}

.cl-main-widget-wrapper .cl-main-widget-lb-optin-action:hover {
  background: var(--lb3-tournament-lb-opt-in-btn-back-hover);
}


/**
 * ****************************************
 * ********** Achievements Area ***********
 * ****************************************
 */
.cl-main-widget-wrapper .cl-main-widget-section-container .cl-main-widget-section-ach {
  display: none;
  position: relative;
  width: 100%;
  height: 100%;
  z-index: 1;
  left: 0;
  top: 0;
  background: var(--lb3-achievements-header-bg-color);
  border-radius: 5px;
  box-shadow: 0 3px 4px rgba(0, 0, 0, 0.6);
  overflow: hidden;
}

.cl-main-widget-wrapper .cl-main-widget-section-container .cl-main-widget-ach-header {
  float: left;
  width: 100%;
  height: 30px;
  background: var(--lb3-achievements-header-bg-color);
  border-radius: 5px 5px 0 0;
  position: relative;
  z-index: 2;
  border-bottom: var(--lb3-achievements-header-border-bottom);
}

.cl-main-widget-wrapper .cl-main-widget-section-container .cl-main-widget-ach-header .cl-main-widget-ach-header-label {
  float: left;
  width: 60%;
  text-align: center;
  line-height: 30px;
  color: var(--lb3-achievements-header-label-color);
  text-transform: uppercase;
  font-size: 14px;
  font-weight: 500;
  margin: 0 0 0 20%;
}

.cl-main-widget-wrapper .cl-main-widget-section-container .cl-main-widget-ach-header .cl-main-widget-ach-header-date {
  float: left;
  width: auto;
  position: absolute;
  top: 0;
  right: 50px;
  line-height: 30px;
  color: var(--lb3-achievements-header-date-color);
  font-size: 11px;
  min-width: 125px;
}

.cl-main-widget-wrapper .cl-main-widget-section-container .cl-main-widget-ach-header .cl-main-widget-ach-header-close {
  position: absolute;
  display: block;
  background-image: var(--lb3-achievements-header-close-image);
  background-repeat: no-repeat;
  background-position: 50% 50%;
  background-size: 70%;
  width: 30px;
  height: 30px;
  right: 3px;
  top: 0;
}

.cl-main-widget-wrapper .cl-main-widget-section-container .cl-main-widget-ach-details {
  float: left;
  width: 100%;
  height: 42px;
  background: var(--lb3-achievements-details-bg-color);
  position: relative;
  z-index: 2;
  display: none;
}

.cl-main-widget-wrapper .cl-main-widget-section-container .cl-main-widget-ach-list {
  position: absolute;
  left: 0;
  top: 0;
  width: 100%;
  height: 100%;
  z-index: 1;
  padding: 32px 0 22px 0;
  background: var(--lb3-achievements-container-bg-color);
  border-radius: 5px;
}

.cl-main-widget-wrapper .cl-main-widget-section-container .cl-main-widget-ach-list-body {
  position: relative;
  float: left;
  width: 100%;
  z-index: 1;
  overflow: auto;
  height: 100%;
}

.cl-main-widget-wrapper .cl-main-widget-section-container .cl-main-widget-ach-list-body-res {
  float: left;
  width: 100%;
  padding: 20px 30px 20px 30px;
}

.cl-main-widget-wrapper .cl-main-widget-ach-details-container {
  position: absolute;
  height: calc(100% - 52px);
  background: var(--lb3-achievements-details-bg-color);
  top: 30px;
  left: -200px;
  width: 100%;
  z-index: 10;
  opacity: 0;
  display: none;
  transition: all 0.3s ease;
}

.cl-main-widget-wrapper .cl-main-widget-ach-details-container.cl-show {
  left: 0;
  opacity: 1;
}

.cl-main-widget-wrapper .cl-main-widget-ach-details-container .cl-main-widget-ach-details-header {
  float: left;
  width: 100%;
  min-height: 60px;
  padding: 10px 60px;
}

.cl-main-widget-wrapper .cl-main-widget-ach-details-container .cl-main-widget-ach-details-header-label {
  float: left;
  width: 100%;
  text-align: center;
  color: var(--lb3-achievements-details-header-text-color);
  height: 30px;
  line-height: 30px;
  font-size: 24px;
  font-weight: 400;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  padding: 0 20px;
}

.cl-main-widget-wrapper .cl-main-widget-ach-details-container .cl-main-widget-ach-details-header-date {
  float: left;
  width: 100%;
  text-align: center;
  color: var(--lb3-achievements-details-date-color);
  height: 30px;
  line-height: 30px;
  font-size: 18px;
  font-weight: 300;
}

.cl-main-widget-wrapper .cl-main-widget-ach-details-container .cl-main-widget-ach-details-back-btn {
  position: absolute;
  left: 20px;
  top: 16px;
  width: 30px;
  height: 26px;
  background-image: var(--prev-btn-icon-bg);
  background-repeat: no-repeat;
  background-size: 100%;
  cursor: pointer;
}

.cl-main-widget-wrapper .cl-main-widget-ach-details-container .cl-main-widget-ach-details-body-container {
  float: left;
  width: 100%;
  overflow: auto;
  padding: 5px 40px 25px 40px;
  position: absolute;
  top: 80px;
  height: calc(100% - 80px);
}

.cl-main-widget-wrapper .cl-main-widget-ach-details-container .cl-main-widget-ach-details-body {
  float: left;
  width: 100%;
  color: var(--lb3-achievements-details-body-color);
  font-size: 14px;
  line-height: 20px;
  margin: 0;
  padding: 0 0 60px 0;
}

.cl-main-widget-wrapper .cl-main-widget-ach-details-container .cl-main-widget-ach-details-body * {
  line-height: 20px;
  margin: 0;
  padding: 0;
  border: 0;
  font-size: 100%;
  font: inherit;
  vertical-align: baseline;
  background: none;
}

.cl-main-widget-wrapper .cl-main-widget-ach-details-container .cl-main-widget-ach-details-body img {
  max-width: 100%;
}

.cl-main-widget-wrapper .cl-main-widget-ach-details-container .cl-main-widget-ach-details-body p {
  position: unset;
  transform: none;
  text-align: left;
  font-size: 12px;
  float: none;
}

.cl-main-widget-wrapper .cl-main-widget-ach-details-container .cl-main-widget-ach-details-body a {
  position: unset;
  transform: none;
  text-align: left;
  font-size: 12px;
  float: none;
  color: var(--lb3-achievements-details-link-color);
}

.cl-main-widget-wrapper .cl-main-widget-ach-details-container .cl-main-widget-ach-details-body-image-cont {
  float: left;
  width: 100%;
  padding: 0;
  margin: 0;
  text-align: center;
}

.cl-main-widget-wrapper .cl-main-widget-ach-details-container .cl-main-widget-ach-details-body-image-cont img {
  max-width: 100%;
}


.cl-main-widget-wrapper .cl-main-widget-section-container .cl-main-widget-ach-footer {
  float: left;
  width: 100%;
  height: 22px;
  position: absolute;
  bottom: 0;
  left: 0;
  background: var(--lb3-achievements-footer-bg-color);
  border-radius: 0 0 5px 5px;
  z-index: 2;
  border-top: var(--lb3-achievements-footer-top-border);
}

.cl-main-widget-wrapper .cl-main-widget-section-container .cl-main-widget-ach-footer-content {
  float: left;
  width: 100%;
  line-height: 22px;
  color: var(--lb3-achievements-footer-text-color);
  font-size: 11px;
  text-align: center;
}

.cl-main-widget-wrapper .cl-main-widget-section-container .cl-main-widget-section-ach .cl-ach-list-item {
  float: left;
  width: 100%;
  min-height: 70px;
  padding: 0 0 25px 0;
  border-bottom: 1px solid var(--lb3-achievements-divider-color);
  margin: 0 0 10px 0;
}

.cl-main-widget-wrapper .cl-main-widget-section-container .cl-main-widget-section-ach .cl-ach-list-item:last-child {
  border-bottom: none;
}

.cl-main-widget-wrapper .cl-main-widget-section-container .cl-main-widget-section-ach .cl-ach-list-details-cont {
  float: left;
  width: 100%;
  position: relative;
  z-index: 1;
}

.cl-main-widget-wrapper .cl-main-widget-section-container .cl-main-widget-section-ach .cl-ach-list-details-wrap {
  float: left;
  width: 100%;
}

.cl-main-widget-wrapper .cl-main-widget-section-container .cl-main-widget-section-ach .cl-ach-with-image .cl-ach-list-details-wrap {
  padding: 0 0 0 70px;
  min-height: 50px;
}

.cl-main-widget-wrapper .cl-main-widget-section-container .cl-main-widget-section-ach .cl-ach-list-details-label {
  float: left;
  width: 100%;
  color: var(--lb3-achievements-item-label-color);
  font-size: 16px;
  font-weight: 500;
  line-height: 30px;
  text-transform: uppercase;
}

.cl-main-widget-wrapper .cl-main-widget-section-container .cl-main-widget-section-ach .cl-ach-list-details-category {
  float: left;
  width: 100%;
  color: var(--lb3-achievements-item-body-color);
  font-size: 14px;
  font-weight: 500;
}

.cl-main-widget-wrapper .cl-main-widget-section-container .cl-main-widget-section-ach .cl-ach-list-details-description {
  float: left;
  width: 100%;
  display: none;
}

.cl-main-widget-wrapper .cl-main-widget-section-container .cl-main-widget-section-ach .cl-ach-list-progression {
  float: left;
  width: 100%;
  padding: 10px 126px 0 0;
  position: relative;
  z-index: 1;
}

.cl-main-widget-wrapper .cl-main-widget-section-container .cl-main-widget-section-ach .cl-ach-list-progression-cont {
  float: left;
  width: 100%;
  background: var(--lb3-achievements-progress-bg-color);
  height: 13px;
  border-radius: 5px;
  border: var(--lb3-achievements-progress-border);
}

.cl-main-widget-wrapper .cl-main-widget-section-container .cl-main-widget-section-ach .cl-ach-list-progression-bar {
  float: left;
  width: 0;
  height: 11px;
  background: var(--lb3-achievements-progress-fill-color);
  border-radius: 5px;
  transition: all 0.3s ease;
}

.cl-main-widget-wrapper .cl-main-widget-section-container .cl-main-widget-section-ach .cl-ach-list-progression-bar.cl-ach-complete {
  font-size: 10px;
  line-height: 13px;
  color: var(--lb3-achievements-progress-text-color);
  width: 100%;
  text-align: right;
  padding: 0 6px;
  text-transform: uppercase;
}

.cl-main-widget-wrapper .cl-main-widget-section-container .cl-main-widget-section-ach .cl-ach-list-more {
  float: left;
  text-align: center;
  color: var(--light-font-color);
  position: absolute;
  top: -2px;
  right: 0;
  line-height: 25px;
  background: var(--lb3-achievements-btn-bg-color);
  text-decoration: none;
  border-radius: var(--lb3-achievements-btn-border-radius);
  box-shadow: var(--lb3-achievements-btn-box-shadow);
  text-transform: uppercase;
  padding: 4px 25px;
  cursor: pointer;
  transition: all 0.3s ease;
  border: var(--lb3-achievements-btn-border);
}

.cl-main-widget-wrapper .cl-main-widget-section-container .cl-main-widget-section-ach .cl-ach-list-more:hover {
  background: var(--lb3-achievements-btn-hover-color);
}

.cl-main-widget-wrapper .cl-main-widget-section-container .cl-main-widget-section-ach .cl-ach-list-item-img-wrapper {
  float: left;
  width: 50px;
  height: 50px;
  text-align: center;
  position: absolute;
  left: 0;
  top: 0;
  z-index: 1;
}

.cl-main-widget-wrapper .cl-main-widget-section-container .cl-main-widget-section-ach .cl-ach-list-item-img {
  float: left;
  width: 100%;
  max-height: 50px;
}


/**
 * ****************************************
 * ************ Rewards Area **************
 * ****************************************
 */
.cl-main-widget-wrapper .cl-main-widget-section-container .cl-main-widget-section-reward {
  display: none;
  position: relative;
  width: 100%;
  height: 100%;
  z-index: 1;
  left: 0;
  top: 0;
  background: var(--lb3-rewards-header-bg-color);
  border-radius: 5px;
  box-shadow: 0px 3px 4px rgba(0, 0, 0, 0.6);
  overflow: hidden;
}

.cl-main-widget-wrapper .cl-main-widget-section-container .cl-main-widget-reward-header {
  float: left;
  width: 100%;
  height: 30px;
  background: var(--lb3-rewards-header-bg-color);
  border-radius: 5px 5px 0 0;
  position: relative;
  z-index: 2;
}

.cl-main-widget-wrapper .cl-main-widget-section-container .cl-main-widget-reward-header .cl-main-widget-reward-header-label {
  float: left;
  width: 60%;
  text-align: center;
  line-height: 30px;
  color: var(--light-font-color);
  text-transform: uppercase;
  font-size: 14px;
  font-weight: 500;
  margin: 0 0 0 20%;
}

.cl-main-widget-wrapper .cl-main-widget-section-container .cl-main-widget-reward-header .cl-main-widget-reward-header-date {
  float: left;
  width: auto;
  position: absolute;
  top: 0;
  right: 50px;
  line-height: 30px;
  color: var(--light-font-color);
  font-size: 11px;
  min-width: 125px;
}

.cl-main-widget-wrapper .cl-main-widget-section-container .cl-main-widget-reward-header .cl-main-widget-reward-header-close {
  position: absolute;
  display: block;
  background-image: var(--lb3-rewards-header-close-image);
  background-repeat: no-repeat;
  background-position: 50% 50%;
  background-size: 70%;
  width: 30px;
  height: 30px;
  right: 3px;
  top: 0;
  border-bottom: var(--lb3-rewards-header-border-bottom);
}

.cl-main-widget-wrapper .cl-main-widget-section-container .cl-main-widget-reward-details {
  float: left;
  width: 100%;
  height: 42px;
  background: var(--lb3-rewards-bg-color);
  position: relative;
  z-index: 2;
  display: none;
}

.cl-main-widget-wrapper .cl-main-widget-section-container .cl-main-widget-reward-list {
  position: absolute;
  left: 0;
  top: 0;
  width: 100%;
  height: 100%;
  z-index: 1;
  padding: 36px 0 22px 0;
  background: var(--lb3-rewards-bg-color);
  border-radius: 5px;
}

.cl-main-widget-wrapper .cl-main-widget-section-container .cl-main-widget-reward-list-body {
  position: relative;
  float: left;
  width: 100%;
  z-index: 1;
  overflow: auto;
  height: calc(100vh - 75px);
}

.cl-main-widget-wrapper .cl-main-widget-section-container .cl-main-widget-reward-list-body-res {
  float: left;
  width: 100%;
}

.cl-main-widget-wrapper .cl-main-widget-section-container .cl-main-widget-reward-footer {
  float: left;
  width: 100%;
  height: 22px;
  position: absolute;
  bottom: 0;
  left: 0;
  background: var(--lb3-rewards-footer-bg-color);
  border-top: var(--lb3-rewards-footer-top-border);
  border-radius: 0 0 5px 5px;
  z-index: 2;
}

.cl-main-widget-wrapper .cl-main-widget-section-container .cl-main-widget-reward-footer-content {
  float: left;
  width: 100%;
  line-height: 22px;
  color: var(--lb3-rewards-footer-text-color);
  font-size: 11px;
  text-align: center;
}

.cl-main-widget-wrapper .cl-main-widget-section-container .cl-main-widget-reward-list-body-res .cl-rew-list-item {
  float: left;
  width: 100%;
  padding: 10px 15px 15px 15px;
  margin: 0;
  border-bottom: 1px solid var(--lb3-rewards-divider-color);
  transition: background-color 0.3s ease;
  cursor: pointer;
}

.cl-main-widget-wrapper .cl-main-widget-section-container .cl-main-widget-reward-list-body-res .cl-rew-list-item:hover {
  background-color: var(--lb3-rewards-item-bg-color-hover);
}

.cl-main-widget-wrapper .cl-main-widget-section-container .cl-main-widget-reward-list-body-res .cl-rew-list-details-cont {
  float: left;
  width: 100%;
}

.cl-main-widget-wrapper .cl-main-widget-section-container .cl-main-widget-reward-list-body-res .cl-rew-list-details-wrap {
  float: left;
  width: 100%;
}

.cl-main-widget-wrapper .cl-main-widget-section-container .cl-main-widget-reward-list-body-res .cl-rew-list-details-label {
  float: left;
  width: 100%;
  color: var(--lb3-rewards-item-label-color);
  text-transform: uppercase;
  font-size: 14px;
  font-weight: 500;
}

.cl-main-widget-wrapper .cl-main-widget-section-container .cl-main-widget-reward-list-body-res .cl-rew-list-details-description {
  float: left;
  width: 100%;
  font-size: 11px;
  max-height: 40px;
  line-height: 16px;
  color: var(--lb3-rewards-item-body-color);
}

.cl-main-widget-wrapper .cl-main-widget-section-container .cl-main-accordion-container {
  float: left;
  width: 100%;
}

.cl-main-widget-wrapper .cl-main-widget-section-container .cl-main-accordion-container .cl-accordion {
  float: left;
  width: 100%;
}

.cl-main-widget-wrapper .cl-main-widget-section-container .cl-main-accordion-container .cl-accordion-label {
  float: left;
  width: 100%;
  text-align: center;
  height: 26px;
  line-height: 26px;
  font-size: 14px;
  text-transform: uppercase;
  color: var(--light-font-color);
  font-weight: bold;
  position: relative;
  z-index: 1;
  background: var(--lb3-rewards-accordion-bg-color);
  border-radius: 4px;
  cursor: pointer;
  transition: background-color 0.3s ease;
}

.cl-main-widget-wrapper .cl-main-widget-section-container .cl-main-accordion-container .cl-accordion-label:hover {
  background: var(--lb3-rewards-accordion-hover-color);
}

.cl-main-widget-wrapper .cl-main-widget-section-container .cl-main-accordion-container .cl-accordion-label::after {
  content: "+";
  color: var(--lb3-tournament-list-accordion-label-icon);
  width: 20px;
  height: 26px;
  position: absolute;
  top: 0;
  right: 30px;
  line-height: 24px;
  font-size: 23px;
}

.cl-main-widget-wrapper .cl-main-widget-section-container .cl-main-accordion-container .cl-accordion-entry {
  float: left;
  width: 100%;
}

.cl-main-widget-wrapper .cl-main-widget-section-container .cl-main-accordion-container .cl-accordion-list-container {
  float: left;
  width: 100%;
  min-height: 200px;
  max-height: 325px;
  overflow: auto;
  display: none;
}

.cl-main-widget-wrapper .cl-main-widget-section-container .cl-main-accordion-container .cl-shown .cl-accordion-label {
  background: var(--lb3-rewards-accordion-container-show-bg-color);
  color: var(--lb3-rewards-accordion-container-show-color);
}

.cl-main-widget-wrapper .cl-main-widget-section-container .cl-main-accordion-container .cl-shown .cl-accordion-label::after {
  content: "-";
  color: var(--lb3-tournament-list-accordion-label-icon-show);
}

.cl-main-widget-wrapper .cl-main-widget-section-container .cl-main-accordion-container .cl-shown .cl-accordion-entry {
  display: none;
}

.cl-main-widget-wrapper .cl-main-widget-section-container .cl-main-accordion-container .cl-shown .cl-accordion-list-container {
  display: block;
}


.cl-main-widget-wrapper .cl-main-widget-section-container .cl-main-widget-tournaments-list .cl-main-accordion-container .cl-accordion-label {
  background: var(--lb3-tournament-list-accordion-label-back);
}

.cl-main-widget-wrapper .cl-main-widget-section-container .cl-main-widget-tournaments-list .cl-main-accordion-container .cl-accordion-label:hover {
  background: var(--lb3-tournament-list-accordion-label-back-hover);
}

.cl-main-widget-wrapper .cl-main-widget-section-container .cl-main-widget-tournaments-list .cl-main-accordion-container .cl-shown .cl-accordion-label {
  background: var(--lb3-tournament-list-accordion-label-back-show);
  color: var(--lb3-tournament-list-accordion-label-color-show);
}

.cl-main-widget-wrapper .cl-main-widget-section-container .cl-main-widget-tournaments-list .cl-accordion-list {
  float: left;
  width: 100%;
}

.cl-main-widget-wrapper .cl-main-widget-section-container .cl-main-widget-tournaments-list .cl-tour-list-details-cont {
  float: left;
  width: 100%;
  padding: 10px 15px 15px 15px;
  margin: 0;
  border-bottom: var(--lb3-tournament-list-item-cont-border-bottom);
  transition: background-color 0.3s ease;
  cursor: pointer;
}

.cl-main-widget-wrapper .cl-main-widget-section-container .cl-main-widget-tournaments-list .cl-tour-list-details-cont:hover {
  background-color: var(--lb3-tournament-list-item-cont-back-hover);
}

.cl-main-widget-wrapper .cl-main-widget-section-container .cl-main-widget-tournaments-list .cl-tour-list-details-label {
  float: left;
  width: 100%;
  color: var(--primary-font-color);
  text-transform: uppercase;
  font-size: 14px;
  font-weight: 500;
}

.cl-main-widget-wrapper .cl-main-widget-section-container .cl-main-widget-tournaments-list .cl-tour-list-details-description {
  float: left;
  width: 100%;
  font-size: 11px;
  max-height: 40px;
  line-height: 16px;
  color: var(--primary-font-color);
}


.cl-main-widget-wrapper .cl-main-widget-reward-details-container {
  position: absolute;
  height: calc(100% - 52px);
  background: var(--lb3-rewards-details-bg-color);
  top: 30px;
  left: -200px;
  width: 100%;
  z-index: 10;
  opacity: 0;
  display: none;
  transition: all 0.3s ease;
}

.cl-main-widget-wrapper .cl-main-widget-reward-details-container.cl-show {
  left: 0;
  opacity: 1;
}

.cl-main-widget-wrapper .cl-main-widget-reward-details-container .cl-main-widget-reward-details-header {
  float: left;
  width: 100%;
  min-height: 60px;
  padding: 10px 60px;
}

.cl-main-widget-wrapper .cl-main-widget-reward-details-container .cl-main-widget-reward-details-header-label {
  float: left;
  width: 100%;
  text-align: center;
  color: var(--lb3-rewards-details-title-color);
  height: 30px;
  line-height: 30px;
  font-size: 24px;
  font-weight: 400;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  padding: 0 20px;
}

.cl-main-widget-wrapper .cl-main-widget-reward-details-container .cl-main-widget-reward-details-header-date {
  float: left;
  width: 100%;
  text-align: center;
  color: var(--lb3-rewards-details-date-color);
  height: 30px;
  line-height: 30px;
  font-size: 18px;
  font-weight: 300;
}

.cl-main-widget-wrapper .cl-main-widget-reward-details-container .cl-main-widget-reward-details-back-btn {
  position: absolute;
  left: 20px;
  top: 16px;
  width: 30px;
  height: 26px;
  background-image: var(--prev-btn-icon-bg);
  background-repeat: no-repeat;
  background-size: 100%;
  cursor: pointer;
}

.cl-main-widget-wrapper .cl-main-widget-reward-details-container .cl-main-widget-reward-details-body-container {
  float: left;
  width: 100%;
  overflow: auto;
  padding: 5px 40px 25px 40px;
  position: absolute;
  top: 80px;
  height: calc(100% - 130px);
}

.cl-main-widget-wrapper .cl-main-widget-reward-details-container .cl-main-widget-reward-details-body {
  float: left;
  width: 100%;
  color: var(--lb3-rewards-details-body-color);
  font-size: 14px;
  line-height: 20px;
  margin: 0;
  padding: 0 0 30px 0;
}

.cl-main-widget-wrapper .cl-main-widget-reward-details-container .cl-main-widget-reward-details-body-image-cont {
  float: left;
  width: 100%;
  padding: 0;
  margin: 0;
  text-align: center;
}

.cl-main-widget-wrapper .cl-main-widget-reward-details-container .cl-main-widget-reward-details-body-image-cont img {
  max-width: 100%;
}

.cl-main-widget-wrapper .cl-main-widget-reward-details-container .cl-main-widget-reward-winnings-container {
  float: left;
  width: 100%;
  background: var(--lb3-rewards-winnings-bg-color);
  position: relative;
  z-index: 1;
}

.cl-main-widget-wrapper .cl-main-widget-reward-details-container .cl-main-widget-reward-winnings-icon {
  float: left;
  width: 50%;
  padding: 18px 20px 18px 0;
  height: 100%;
  position: absolute;
  left: 0;
  top: 0;
}

.cl-main-widget-wrapper .cl-main-widget-reward-details-container .cl-place-holder-reward-image {
  float: right;
  width: 100%;
  max-width: 84px;
  background-color: var(--lb3-rewards-details-reward-bg-color);
  background-image: url(../../images/big-reward-icon.svg);
  background-repeat: no-repeat;
  background-position: 50% 50%;
  background-size: 63%;
  height: 100%;
  border-radius: 50%;
}

.cl-main-widget-wrapper .cl-main-widget-reward-details-container .cl-main-widget-reward-winnings-value {
  float: right;
  width: 50%;
  padding: 30px 0 30px 20px;
  font-size: 40px;
  line-height: 60px;
  color: var(--light-font-color);
}

.cl-main-widget-wrapper .cl-main-widget-reward-details-container .cl-main-widget-reward-claim-container {
  float: left;
  width: 100%;
  position: absolute;
  bottom: 0;
  height: 40px;
  text-align: center;
}

.cl-main-widget-wrapper .cl-main-widget-reward-details-container .cl-main-widget-reward-claim-btn {
  display: inline-block;
  text-align: center;
  color: var(--light-font-color);
  right: 0;
  line-height: 22px;
  background: var(--lb3-rewards-btn-bg-color);
  border: var(--lb3-rewards-btn-border);
  text-decoration: none;
  border-radius: var(--lb3-rewards-btn-border-radius);
  box-shadow: var(--lb3-rewards-btn-box-shadow);
  text-transform: uppercase;
  padding: 4px 39px;
  cursor: pointer;
  transition: all 0.3s ease;
  font-size: 14px;
}

.cl-main-widget-wrapper .cl-main-widget-reward-details-container .cl-main-widget-reward-claim-btn:hover {
  background: var(--lb3-rewards-btn-hover-color);
}

.cl-main-widget-wrapper .cl-main-widget-reward-details-container .cl-main-widget-reward-claim-btn.cl-claimed {
  opacity: 0.6;
  cursor: not-allowed;
  pointer-events: none;
}


/**
 * ****************************************
 * ************ Inbox Area **************
 * ****************************************
 */
.cl-main-widget-wrapper .cl-main-widget-section-container .cl-main-widget-section-inbox {
  display: none;
  position: relative;
  width: 100%;
  height: 100%;
  z-index: 1;
  left: 0;
  top: 0;
  background: var(--lb3-messages-header-bg-color);
  border-radius: 5px;
  box-shadow: 0 3px 4px rgba(0, 0, 0, 0.6);
  overflow: hidden;
}

.cl-main-widget-wrapper .cl-main-widget-section-container .cl-main-widget-inbox-header {
  float: left;
  width: 100%;
  height: 30px;
  background: var(--lb3-messages-header-bg-color);
  border-radius: 5px 5px 0 0;
  position: relative;
  z-index: 2;
}

.cl-main-widget-wrapper .cl-main-widget-section-container .cl-main-widget-inbox-header .cl-main-widget-inbox-header-label {
  float: left;
  width: 60%;
  text-align: center;
  line-height: 30px;
  color: var(--lb3-messages-header-text-color);
  text-transform: uppercase;
  font-size: 14px;
  font-weight: 500;
  margin: 0 0 0 20%;
}

.cl-main-widget-wrapper .cl-main-widget-section-container .cl-main-widget-inbox-header .cl-main-widget-inbox-header-date {
  float: left;
  width: auto;
  position: absolute;
  top: 0;
  right: 50px;
  line-height: 30px;
  color: var(--lb3-messages-header-date-color);
  font-size: 11px;
  min-width: 125px;
}

.cl-main-widget-wrapper .cl-main-widget-section-container .cl-main-widget-inbox-header .cl-main-widget-inbox-header-close {
  position: absolute;
  display: block;
  background-image: var(--lb3-messages-header-close-image);
  background-repeat: no-repeat;
  background-position: 50% 50%;
  background-size: 70%;
  width: 30px;
  height: 30px;
  right: 3px;
  top: 0;
  border-bottom: var(--lb3-messages-header-border-bottom);
}

.cl-main-widget-wrapper .cl-main-widget-section-container .cl-main-widget-inbox-details {
  float: left;
  width: 100%;
  height: 42px;
  background: var(--lb3-messages-item-bg-color);
  position: relative;
  z-index: 2;
  display: none;
}

.cl-main-widget-wrapper .cl-main-widget-section-container .cl-main-widget-inbox-list {
  position: absolute;
  left: 0;
  top: 0;
  width: 100%;
  height: 100%;
  z-index: 1;
  padding: 30px 0 22px 0;
  background: var(--lb3-messages-item-bg-color);
  border-radius: 5px;
}

.cl-main-widget-wrapper .cl-main-widget-section-container .cl-main-widget-inbox-list-body {
  position: relative;
  float: left;
  width: 100%;
  z-index: 1;
  overflow: auto;
  height: calc(100vh - 73px);
}

.cl-main-widget-wrapper .cl-main-widget-section-container .cl-main-widget-inbox-list-body-res {
  float: left;
  width: 100%;
  padding: 0;
}

.cl-main-widget-wrapper .cl-main-widget-section-container .cl-inbox-list-item {
  float: left;
  width: 100%;
  padding: 10px 15px 15px 15px;
  margin: 0;
  border-bottom: 1px solid var(--lb3-messages-item-divider-color);
  transition: background-color 0.3s ease;
  cursor: pointer;
}

.cl-main-widget-wrapper .cl-main-widget-section-container .cl-main-widget-inbox-list-body-res .cl-inbox-list-item:hover {
  background-color: var(--lb3-messages-item-hover-color);
}

.cl-main-widget-wrapper .cl-main-widget-section-container .cl-main-widget-inbox-list-body-res .cl-inbox-list-details-cont {
  float: left;
  width: 100%;
}

.cl-main-widget-wrapper .cl-main-widget-section-container .cl-main-widget-inbox-list-body-res .cl-inbox-list-details-wrap {
  float: left;
  width: 100%;
}

.cl-main-widget-wrapper .cl-main-widget-section-container .cl-main-widget-inbox-list-body-res .cl-inbox-list-details-label {
  float: left;
  width: 100%;
  color: var(--lb3-messages-item-label-color);
  text-transform: uppercase;
  font-size: 14px;
  font-weight: 500;
}

.cl-main-widget-wrapper .cl-main-widget-section-container .cl-main-widget-inbox-list-body-res .cl-inbox-list-details-description {
  float: left;
  width: 100%;
  font-size: 11px;
  max-height: 40px;
  line-height: 16px;
  color: var(--lb3-messages-item-text-color);
}

.cl-main-widget-wrapper .cl-main-widget-inbox-details-container {
  position: absolute;
  height: calc(100% - 52px);
  background: var(--lb3-messages-details-bg-color);
  top: 30px;
  left: -200px;
  width: 100%;
  z-index: 10;
  opacity: 0;
  display: none;
  transition: all 0.3s ease;
}

.cl-main-widget-wrapper .cl-main-widget-inbox-details-container.cl-show {
  left: 0;
  opacity: 1;
}

.cl-main-widget-wrapper .cl-main-widget-inbox-details-container .cl-main-widget-inbox-details-header {
  float: left;
  width: 100%;
  min-height: 60px;
  padding: 10px 60px;
}

.cl-main-widget-wrapper .cl-main-widget-inbox-details-container .cl-main-widget-inbox-details-header-label {
  float: left;
  width: 100%;
  text-align: center;
  color: var(--lb3-messages-details-title-color);
  height: 30px;
  line-height: 30px;
  font-size: 24px;
  font-weight: 400;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  padding: 0 20px;
}

.cl-main-widget-wrapper .cl-main-widget-inbox-details-container .cl-main-widget-inbox-details-header-date {
  float: left;
  width: 100%;
  text-align: center;
  color: var(--lb3-messages-details-date-color);
  height: 30px;
  line-height: 30px;
  font-size: 18px;
  font-weight: 300;
}

.cl-main-widget-wrapper .cl-main-widget-inbox-details-container .cl-main-widget-inbox-details-back-btn {
  position: absolute;
  left: 20px;
  top: 16px;
  width: 30px;
  height: 26px;
  background-image: var(--prev-btn-icon-bg);
  background-repeat: no-repeat;
  background-size: 100%;
  cursor: pointer;
}

.cl-main-widget-wrapper .cl-main-widget-inbox-details-container .cl-main-widget-inbox-details-body-container {
  float: left;
  width: 100%;
  overflow: auto;
  padding: 5px 40px 25px 40px;
  position: absolute;
  top: 80px;
  height: calc(100% - 130px);
}

.cl-main-widget-wrapper .cl-main-widget-inbox-details-container .cl-main-widget-inbox-details-body {
  float: left;
  width: 100%;
  color: var(--lb3-messages-details-text-color);
  font-size: 14px;
  line-height: 20px;
  margin: 0;
  padding: 0 0 30px 0;
}


.cl-main-widget-wrapper .cl-main-widget-section-container .cl-main-widget-inbox-footer {
  float: left;
  width: 100%;
  height: 22px;
  position: absolute;
  bottom: 0;
  left: 0;
  background: var(--lb3-messages-footer-bg-color);
  border-top: var(--lb3-messages-footer-top-border);
  border-radius: 0 0 5px 5px;
  z-index: 2;
}

.cl-main-widget-wrapper .cl-main-widget-section-container .cl-main-widget-inbox-footer-content {
  float: left;
  width: 100%;
  line-height: 22px;
  color: var(--lb3-messages-footer-text-color);
  font-size: 11px;
  text-align: center;
}


/**
 * ******************************************
 * ********** Navigation controls ***********
 * ******************************************
 */

.cl-main-widget-wrapper .cl-main-widget-section-container .cl-main-section-item {
  transition: all 0.3s ease;
  opacity: 0;
  left: -40px;
}

.cl-main-widget-wrapper .cl-main-widget-section-container .cl-main-section-item.cl-main-active-section {
  opacity: 1;
  left: 0;
}


/**
 * ******************************************
 * ********** Notifiation layout ************
 * ******************************************
 */
.cl-widget-notif-wrapper {
  z-index: 1001;
  display: none;
  max-width: 280px;
  left: 5px;
  top: 5px;
}

.cl-widget-notif-wrapper .cl-widget-notif-icon-wrapper {
  position: absolute;
  left: 0;
  top: 0;
  z-index: 2;
}

.cl-widget-notif-wrapper .cl-widget-notif-icon-wrapper .cl-widget-notif-icon {
  display: block;
  min-height: 100%;
  background-image: var(--lb3-notification-back-image);
  background-repeat: no-repeat;
  background-position: 50% 50%;
  width: 80px;
  height: 80px;
  background-size: 78px 79px;

  filter: none;
  -webkit-filter: blur(0px);
  -moz-filter: blur(0px);
  -ms-filter: blur(0px);
  filter: progid:DXImageTransform.Microsoft.Blur(PixelRadius='0');
}

.cl-widget-notif-wrapper .cl-widget-notif-icon-wrapper .cl-widget-notif-icon::after {
  content: "";
  display: block;
  min-height: 100%;
  background-image: url(../../images/big-challenge-icon.svg);
  background-repeat: no-repeat;
  background-position: 50% 50%;
  background-size: 45%;
}

.cl-widget-notif-wrapper .cl-widget-notif-information-top-wrapper {
  display: block;
  position: relative;
  float: left;
  left: 0;
  top: 0;
  z-index: 1;
  width: 100%;
  margin: 8px 0 0 25px;
  height: 50px;
}

.cl-widget-notif-wrapper .cl-widget-notif-information-wrapper {
  display: block;
  float: left;
  width: 100%;
  background: var(--darkest-color);
  border: 2px solid var(--primary-color);
  border-radius: 10px 5px 5px 10px;
  color: var(--light-font-color);
  padding: 0 10px 0 42px;
  height: 63px;
  transition: all 0.3s ease;
  position: relative;
  left: -10px;
  opacity: 0;
  margin: 0;
}

.cl-widget-notif-wrapper .cl-widget-notif-information-wrapper.cl-show {
  opacity: 1;
  left: 0;
}

.cl-widget-notif-wrapper .cl-widget-notif-information-close-wrapper {
  position: absolute;
  top: -10px;
  right: -10px;
  z-index: 1;

  background: var(--darkest-color);
  width: 30px;
  height: 30px;
  border-radius: 100%;
  border: 2px solid var(--primary-color);
  border-left: 2px solid transparent;
  border-bottom: 2px solid transparent;
}

.cl-widget-notif-wrapper .cl-widget-notif-information-close {
  float: left;
  background: #767676;
  width: 16px;
  height: 16px;
  color: #262626;
  text-decoration: none;
  text-align: center;
  border-radius: 100%;
  margin: 5px 0 0 5px;
  line-height: 14px;
  font-size: 12px;
}

.cl-widget-notif-wrapper .cl-widget-notif-information-wrapper.cl-show {
  opacity: 1;
  left: 0;
}

.cl-widget-notif-wrapper .cl-widget-notif-information-details-wrapper {
  float: left;
  width: 100%;
  padding: 0 0 0 20px;
}

.cl-widget-notif-wrapper .cl-widget-notif-information-details-label {
  float: left;
  width: 100%;
  color: var(--light-font-color);
  font-size: 12px;
  line-height: 18px;
  text-transform: uppercase;
  padding: 4px 0 0 0;
}

.cl-widget-notif-wrapper .cl-widget-notif-information-details-description {
  float: left;
  width: 100%;
  color: var(--light-font-color);
  font-size: 10px;
  line-height: 16px;
}


/**
 * *************************************
 * ********** Mobile Devices ***********
 * *************************************
 */
/* Portrait and Landscape [@media only screen and (min-device-width: 375px) and (max-device-width: 812px)] */
@media (max-width: 1000px) {
  .cl-main-widget-wrapper {
    left: 0;
    max-width: unset;
    transform: unset;
  }

  .cl-main-widget-wrapper .cl-main-widget-section-container .cl-name-col {
    max-width: 200px;
  }
  .cl-main-widget-wrapper .cl-main-widget-section-container .cl-growth-col {
    max-width: 55px;
  }
  .cl-main-widget-wrapper .cl-main-widget-section-container .cl-points-col {
    max-width: 220px;
  }
}

@media (max-width: 812px) {
  .cl-main-widget-wrapper {
    padding: 5px 12px 10px 12px;
  }
  .cl-main-widget-wrapper .cl-main-widget-navigation-container {
    width: 91%;
    height: 88px;
    left: 25px;
  }
  .cl-main-widget-wrapper .cl-main-widget-navigation-container .cl-main-widget-navigation-items {
    padding: 0;
  }
  .cl-main-widget-wrapper .cl-main-widget-navigation-container .cl-main-widget-navigation-lb {
    float: left;
    margin: 0px -5px 0 -3px;
    width: 76px;
    height: 76px;
  }
  .cl-main-widget-wrapper .cl-main-widget-navigation-container .cl-main-widget-navigation-lb.cl-active-nav, .cl-main-widget-wrapper .cl-main-widget-navigation-container .cl-main-widget-navigation-lb.cl-active-nav:hover {
    margin: 0 -6px 0 -3px;
    width: 88px;
    height: 88px;
  }
  .cl-main-widget-wrapper .cl-main-widget-navigation-container .cl-main-widget-navigation-ach {
    float: left;
    margin: 0px -5px 0 1px;
    width: 76px;
    height: 76px;
  }
  .cl-main-widget-wrapper .cl-main-widget-navigation-container .cl-main-widget-navigation-ach.cl-active-nav, .cl-main-widget-wrapper .cl-main-widget-navigation-container .cl-main-widget-navigation-ach.cl-active-nav:hover {
    margin: 0 -6px 0 -3px;
    width: 88px;
    height: 88px;
  }
  .cl-main-widget-wrapper .cl-main-widget-navigation-container .cl-main-widget-navigation-rewards {
    float: left;
    margin: 0px -5px 0 1px;
    width: 76px;
    height: 76px;
  }
  .cl-main-widget-wrapper .cl-main-widget-navigation-container .cl-main-widget-navigation-rewards.cl-active-nav, .cl-main-widget-wrapper .cl-main-widget-navigation-container .cl-main-widget-navigation-rewards.cl-active-nav:hover {
    margin: 0 -6px 0 -3px;
    width: 88px;
    height: 88px;
  }
  .cl-main-widget-wrapper .cl-main-widget-navigation-container .cl-main-widget-navigation-inbox {
    float: left;
    margin: 0px -5px 0 1px;
    width: 76px;
    height: 76px;
  }
  .cl-main-widget-wrapper .cl-main-widget-navigation-container .cl-main-widget-navigation-inbox.cl-active-nav, .cl-main-widget-wrapper .cl-main-widget-navigation-container .cl-main-widget-navigation-inbox.cl-active-nav:hover {
    margin: 0 -6px 0 -3px;
    width: 88px;
    height: 88px;
  }
  .cl-main-widget-wrapper .cl-main-widget-section-container {
    padding: 82px 0 0 0;
  }
  .cl-main-widget-wrapper .cl-hidden-navigation .cl-main-widget-section-container {
    padding: 0 0 0 0;
  }
  .cl-main-widget-wrapper .cl-main-widget-pre-loader {
    opacity: 1;
    top: 81px;
    height: calc(100% - 80px);
    width: 100%;
  }
  .cl-main-widget-wrapper .cl-hidden-navigation .cl-main-widget-pre-loader{
    height: 100%;
    width: 100%;
    top:0;
  }

  .cl-main-widget-wrapper .cl-main-widget-section-container .cl-main-widget-lb-header {
    height: 42px;
  }
  .cl-main-widget-wrapper .cl-main-widget-section-container .cl-main-widget-lb-header .cl-main-widget-lb-header-list-icon {
    width: 35px;
    height: 35px;
    margin: 3px 0 0 10px;
  }
  .cl-main-widget-wrapper .cl-main-widget-section-container .cl-main-widget-lb-header .cl-main-widget-lb-header-date {
    line-height: 42px;
    font-size: 14px;
  }
  .cl-main-widget-wrapper .cl-main-widget-section-container .cl-main-widget-lb-header .cl-main-widget-lb-header-label {
    line-height: 42px;
    font-size: 16px;
    display: none;
  }
  .cl-widget-ms-wrapper .cl-main-widget-lb-header-date .time-ind {
    font-size: 7px;
  }
  .cl-main-widget-wrapper .cl-main-widget-section-container .cl-main-widget-lb-leaderboard {
    padding: 84px 0 22px 0;
  }
  .cl-main-widget-wrapper .cl-main-widget-lb-details-container {
    height: calc(100% - 64px);
    top: 42px;
  }
}

@media (max-height: 520px) and (max-width: 812px) {
  .cl-main-widget-wrapper .cl-main-widget-section-container .cl-main-widget-lb-header {
    height: 34px;
  }
  .cl-main-widget-wrapper .cl-main-widget-section-container .cl-main-widget-lb-header .cl-main-widget-lb-header-list-icon {
    width: 31px;
    height: 31px;
    margin: 3px 0 0 10px;
  }
  .cl-main-widget-wrapper .cl-main-widget-section-container .cl-main-widget-lb-header .cl-main-widget-lb-header-date {
    line-height: 34px;
    font-size: 13px;
  }
  .cl-main-widget-wrapper .cl-main-widget-section-container .cl-main-widget-lb-details {
    height: 38px;
  }
  .cl-main-widget-wrapper .cl-main-widget-section-container .cl-main-widget-lb-details-content {
    padding: 2px 0 0 0;
  }
  .cl-main-widget-wrapper .cl-main-widget-section-container .cl-main-widget-lb-leaderboard {
    padding: 70px 0 22px 0;
  }
  .cl-main-widget-wrapper .cl-main-widget-pre-loader {
    top: 61px;
    height: calc(100% - 60px);
  }
  .cl-main-widget-wrapper .cl-hidden-navigation .cl-main-widget-pre-loader{
    height: 100%;
    width: 100%;
    top:0;
  }
  .cl-main-widget-wrapper .cl-main-widget-navigation-container {
    height: 66px;
  }
  .cl-main-widget-wrapper .cl-main-widget-navigation-container .cl-main-widget-navigation-lb {
    float: left;
    margin: 0px -5px 0 -3px;
    width: 58px;
    height: 58px;
  }
  .cl-main-widget-wrapper .cl-main-widget-navigation-container .cl-main-widget-navigation-lb.cl-active-nav, .cl-main-widget-wrapper .cl-main-widget-navigation-container .cl-main-widget-navigation-lb.cl-active-nav:hover {
    margin: 0 -6px 0 1px;
    width: 68px;
    height: 68px;
  }
  .cl-main-widget-wrapper .cl-main-widget-navigation-container .cl-main-widget-navigation-ach {
    float: left;
    margin: 0px -5px 0 3px;
    width: 58px;
    height: 58px;
  }
  .cl-main-widget-wrapper .cl-main-widget-navigation-container .cl-main-widget-navigation-ach.cl-active-nav, .cl-main-widget-wrapper .cl-main-widget-navigation-container .cl-main-widget-navigation-ach.cl-active-nav:hover {
    margin: 0 -6px 0 1px;
    width: 68px;
    height: 68px;
  }
  .cl-main-widget-wrapper .cl-main-widget-navigation-container .cl-main-widget-navigation-rewards {
    float: left;
    margin: 0px -5px 0 3px;
    width: 58px;
    height: 58px;
  }
  .cl-main-widget-wrapper .cl-main-widget-navigation-container .cl-main-widget-navigation-rewards.cl-active-nav, .cl-main-widget-wrapper .cl-main-widget-navigation-container .cl-main-widget-navigation-rewards.cl-active-nav:hover {
    margin: 0 -6px 0 1px;
    width: 68px;
    height: 68px;
  }
  .cl-main-widget-wrapper .cl-main-widget-navigation-container .cl-main-widget-navigation-inbox {
    float: left;
    margin: 0px -5px 0 3px;
    width: 58px;
    height: 58px;
  }
  .cl-main-widget-wrapper .cl-main-widget-navigation-container .cl-main-widget-navigation-inbox.cl-active-nav, .cl-main-widget-wrapper .cl-main-widget-navigation-container .cl-main-widget-navigation-inbox.cl-active-nav:hover {
    margin: 0 -6px 0 -3px;
    width: 68px;
    height: 68px;
  }
  .cl-main-widget-wrapper .cl-main-widget-section-container {
    padding: 60px 0 0 0;
  }
  .cl-main-widget-wrapper .cl-hidden-navigation .cl-main-widget-section-container {
    padding: 0 0 0 0;
  }
}

/**
 * for retina resolution
 */
@media only screen and (min--moz-device-pixel-ratio: 2),
only screen and (-o-min-device-pixel-ratio: 2/1),
only screen and (-webkit-min-device-pixel-ratio: 2),
only screen and (min-device-pixel-ratio: 2) {

  .cl-widget-ms-wrapper .cl-widget-ms-icon-wrapper .cl-widget-ms-icon {
    background-image: var(--lb3-widget-icon-2x);
  }
  .cl-main-widget-wrapper .cl-main-widget-navigation-container .cl-main-widget-navigation-ach {
    background-image: var(--lb3-achievements-icon-bg-image-2x);
  }
  .cl-main-widget-wrapper .cl-main-widget-navigation-container .cl-main-widget-navigation-lb {
    background-image: var(--lb3-tournament-icon-bg-image-2x);
  }
  .cl-main-widget-wrapper .cl-main-widget-navigation-container .cl-main-widget-navigation-rewards {
    background-image: var(--lb3-rewards-icon-bg-image-2x);
  }
  .cl-main-widget-wrapper .cl-main-widget-navigation-container .cl-main-widget-navigation-inbox {
    background-image: var(--lb3-messages-icon-bg-image-2x);
  }
  .cl-widget-notif-wrapper .cl-widget-notif-icon-wrapper .cl-widget-notif-icon {
    background-image: var(--lb3-achievements-icon-bg-image-2x);
  }
}