.lsboard {
border-top: 1px solid #ccc;
border-left: 1px solid #ccc;
margin-left: auto;
margin-right: auto;
margin-top: 2.5rem;
max-width: 992px;
display: flex;
flex-wrap: wrap;
position: relative;
font-family: Roboto, sans-serif;
box-sizing: border-box
}
.lsboard * {
box-sizing: border-box
}
.lsboard__square {
border-right: 1px solid #ccc;
border-bottom: 1px solid #ccc;
padding: 0.3rem;
position: relative;
text-align: center;
line-height: 1.1;
color: #ccc;
font-size: 0.875rem;
display: flex;
flex-wrap: wrap;
justify-content: center;
cursor: pointer;
width: 9.9%;
margin: 0.3px;
}
@media (max-width: 570px) {
.lsboard__square {
font-size: 8px;
padding: 3px
}
}
.lsboard__square-position {
position: absolute;
display: flex;
align-items: center;
justify-content: center;
left: 0;
bottom: 0;
padding: 0.5rem 0.2rem;
width: 100%;
z-index: 1;
font-size: 1rem;
background: #5c5a5a
}
@media (max-width: 767px) {
.lsboard__square-position {
padding: 0;
font-size: 0.7rem
}
}
.lsboard__square-position img {
margin-right: 0.2rem;
width: 1.1rem
}
@media (max-width: 767px) {
.lsboard__square-position img {
width: 0.6rem;
margin-right: 0
}
}
.lsboard__square-position--1st {
background: #cd7f32;
color: #ffffff
}
.lsboard__square-position--2nd {
background: #cd7f32;
color: #ffffff
}
.lsboard__square-position--3rd {
background: #cd7f32;
color: #ffffff
}
.lsboard__square-position--4th {
background: #cd7f32;
color: #ffffff
}
.lsboard__square-position--5th {
background: #cd7f32;
color: #ffffff
}
.lsboard__square-number {
font-size: 1.3rem;
font-weight: 700
}
@media (max-width: 991px) {
.lsboard__square-number {
font-size: 14px
}
}
@media (max-width: 570px) {
.lsboard__square-number {
font-size: 9px
}
}
.lsboard__square--pending,
.lsboard__square--verified,
.lsboard__square--selected {
color: #fff
}
.lsboard__square--pending {
background-color: #d24141
}
.lsboard__square--selected {
background-color: #edef4ca8
}
.lsboard__square--verified {
background-color: #55d273
}
.lsboard__name {
font-weight: 700;
font-size: 1.4rem;
position: absolute;
z-index: 1;
white-space: nowrap
}
@media (max-width: 991px) {
.lsboard__name {
font-size: 0.875rem
}
}
.lsboard-header {
width: 100%
}
.lsboard-header .lsboard__square {
background-color: #000;
color: #fff;
font-size: 0.9rem;
font-weight: 700;
cursor: text !important
}
@media (min-width: 992px) {
.lsboard-header .lsboard__square {
font-size: 1.3rem
}
}
.lsboard__left {
position: absolute;
left: 0;
top: 0;
height: 100%;
width: 70px
}
@media (max-width: 767px) {
.lsboard__left {
width: 30px
}
}
.lsboard__left .lsboard__square {
width: 100% !important
}
.lsboard__left .lsboard__name {
position: absolute;
left: 0;
transform-origin: left;
top: 50%;
-moz-transform: rotate(-90deg) translate(0, -50%);
-o-transform: rotate(-90deg) translate(0, -50%);
-ms-transform: rotate(-90deg) translate(0, -50%);
-webkit-transform: rotate(-90deg) translate(0, -50%);
transform: rotate(-90deg) translate(0, -50%)
}
.lsboard__left .lsboard__name+.lsboard__square {
max-height: 70px
}
@media (max-width: 767px) {
.lsboard__left .lsboard__name+.lsboard__square {
max-height: 30px
}
}
.lsboard__top .lsboard__name {
top: -1.4rem;
position: absolute;
left: 50%;
-moz-transform: translate(-50%, 0);
-o-transform: translate(-50%, 0);
-ms-transform: translate(-50%, 0);
-webkit-transform: translate(-50%, 0);
transform: translate(-50%, 0)
}
@media (min-width: 992px) {
.lsboard__top .lsboard__name {
top: -2.4rem
}
}
.lsboard__top .lsboard__square {
align-items: center;
max-height: 70px
}
@media (max-width: 767px) {
.lsboard__top .lsboard__square {
max-height: 30px
}
}
.lsboard--has-header {
padding-left: 70px
}
@media (max-width: 767px) {
.lsboard--has-header {
padding-left: 30px;
margin-left: 8px
}
}
.lsboard__squares-wrapper {
display: flex;
flex-wrap: wrap
}
.lsboard--25squares {
max-width: 580px
}
.lsboard--25squares .lsboard__square {
width: 20%;
margin: 0px !important;
}
.lsboard--1000squares {
max-width: 901px !important
}
.lsboard-demo .lsboard__square {
padding-top: 1rem;
padding-bottom: 1rem;
width: 5rem;
height: 5rem
}
@media (max-width: 991px) {
.wp-admin .lsboard__left .lsboard__name {
left: -0.5rem !important
}
}
@media (max-width: 991px) {
.wp-admin .lsboard__left .lsboard__name {
left: -0.1rem !important
}
}
.lsboard__square {
opacity: 0; transform: scale(0.5) translateY(20px); animation: slideScaleFadeIn 0.5s ease-out forwards; }
@keyframes slideScaleFadeIn {
from {
transform: scale(0.5) translateY(20px); opacity: 0;
}
to {
transform: scale(1) translateY(0); opacity: 1; }
}
.lsplugin-margin-top {
margin-top: -50px;
margin-bottom: -30px;
}
.lsplugin-btn-margin {
margin-bottom: -20px;
}
.lsplugin-btn-margin-sport {
margin-bottom: 0px;
}
@media (max-width: 570px) {
.lsboard__square {
margin: 0.1px;
}
}