quickshare/public/static/css/default.css

.hidden {
  display: none;
}

.txt-cap {
  text-transform: capitalize;
}

.font-xs {
  font-size: 1.2rem;
  line-height: 1.8rem;
}

.font-s {
  font-size: 1.4rem;
  line-height: 2.1rem;
}

.font-m {
  font-size: 1.6rem;
  line-height: 2.4rem;
}

.font-l {
  font-size: 1.8rem;
  line-height: 2.7rem;
}

.font-xl {
  font-size: 2rem;
  line-height: 3rem;
}

.padding-xs {
  padding: 0.25rem;
}

.padding-s {
  padding: 0.5rem;
}

.padding-m {
  padding: 1rem;
}

.padding-l {
  padding: 2rem;
}

.padding-xl {
  padding: 4rem;
}

.padding-l-xs {
  padding-left: 0.25rem;
}

.padding-l-s {
  padding-left: 0.5rem;
}

.padding-l-m {
  padding-left: 1rem;
}

.padding-l-l {
  padding-left: 2rem;
}

.padding-l-xl {
  padding-left: 4rem;
}

.padding-r-xs {
  padding-right: 0.25rem;
}

.padding-r-s {
  padding-right: 0.5rem;
}

.padding-r-m {
  padding-right: 1rem;
}

.padding-r-l {
  padding-right: 2rem;
}

.padding-r-xl {
  padding-right: 4rem;
}

.padding-t-xs {
  padding-top: 0.25rem;
}

.padding-t-s {
  padding-top: 0.5rem;
}

.padding-t-m {
  padding-top: 1rem;
}

.padding-t-l {
  padding-top: 2rem;
}

.padding-t-xl {
  padding-top: 4rem;
}

.padding-b-xs {
  padding-bottom: 0.25rem;
}

.padding-b-s {
  padding-bottom: 0.5rem;
}

.padding-b-m {
  padding-bottom: 1rem;
}

.padding-b-l {
  padding-bottom: 2rem;
}

.padding-b-xl {
  padding-bottom: 4rem;
}

.margin-xs {
  margin: 0.25rem;
}

.margin-s {
  margin: 0.5rem;
}

.margin-m {
  margin: 1rem;
}

.margin-l {
  margin: 2rem;
}

.margin-xl {
  margin: 4rem;
}

.margin-l-xs {
  margin-left: 0.25rem;
}

.margin-l-s {
  margin-left: 0.5rem;
}

.margin-l-m {
  margin-left: 1rem;
}

.margin-l-l {
  margin-left: 2rem;
}

.margin-l-xl {
  margin-left: 4rem;
}

.margin-r-xs {
  margin-right: 0.25rem;
}

.margin-r-s {
  margin-right: 0.5rem;
}

.margin-r-m {
  margin-right: 1rem;
}

.margin-r-l {
  margin-right: 2rem;
}

.margin-r-xl {
  margin-right: 4rem;
}

.margin-t-xs {
  margin-top: 0.25rem;
}

.margin-t-s {
  margin-top: 0.5rem;
}

.margin-t-m {
  margin-top: 1rem;
}

.margin-t-l {
  margin-top: 2rem;
}

.margin-t-xl {
  margin-top: 4rem;
}

.margin-b-xs {
  margin-bottom: 0.25rem;
}

.margin-b-s {
  margin-bottom: 0.5rem;
}

.margin-b-m {
  margin-bottom: 1rem;
}

.margin-b-l {
  margin-bottom: 2rem;
}

.margin-b-xl {
  margin-bottom: 4rem;
}

.blue0-font {
  color: #3498db;
}

.blue1-font {
  color: #2980b9;
}

.cyan0-font {
  color: #1abc9c;
}

.cyan1-font {
  color: #16a085;
}

.purple0-font {
  color: #9b59b6;
}

.purple1-font {
  color: #8e44ad;
}

.red0-font {
  color: #e74c3c;
}

.red1-font {
  color: #c0392b;
}

.yellow0-font {
  color: #f1c40f;
}

.yellow1-font {
  color: #f39c12;
}

.yellow2-font {
  color: #e67e22;
}

.yellow3-font {
  color: #d35400;
}

.green0-font {
  color: #2ecc71;
}

.green1-font {
  color: #27ae60;
}

.green2-font {
  color: #15cd3d;
}

.white-font {
  color: #fff;
}

.white0-font {
  color: #ecf0f1;
}

.white1-font {
  color: #bdc3c7;
}

.grey0-font {
  color: #95a5a6;
}

.grey1-font {
  color: #7f8c8d;
}

.grey2-font {
  color: #ecf0f6;
}

.grey3-font {
  color: #697384;
}

.black-font {
  color: #000;
}

.black0-font {
  color: #34495e;
}

.black1-font {
  color: #2c3e50;
}

.blue0-bg {
  background-color: #3498db;
}

.blue1-bg {
  background-color: #2980b9;
}

.blue2-bg {
  background-color: #2f45c5;
}

.cyan0-bg {
  background-color: #1abc9c;
}

.cyan1-bg {
  background-color: #16a085;
}

.purple0-bg {
  background-color: #9b59b6;
}

.purple1-bg {
  background-color: #8e44ad;
}

.red0-bg {
  background-color: #e74c3c;
}

.red1-bg {
  background-color: #c0392b;
}

.yellow0-bg {
  background-color: #f1c40f;
}

.yellow1-bg {
  background-color: #f39c12;
}

.yellow2-bg {
  background-color: #e67e22;
}

.yellow3-bg {
  background-color: #15cd3d;
}

.yellow3-bg {
  background-color: #d35400;
}

.green0-bg {
  background-color: #2ecc71;
}

.green1-bg {
  background-color: #27ae60;
}

.green2-bg {
  background-color: #15cd3d;
}

.white-bg {
  background-color: #fff;
}

.white0-bg {
  background-color: #ecf0f1;
}

.white1-bg {
  background-color: #bdc3c7;
}

.grey0-bg {
  background-color: #95a5a6;
}

.grey1-bg {
  background-color: #7f8c8d;
}
.grey2-bg {
  background-color: #ecf0f6;
}

.grey3-bg {
  background-color: #697384;
}

.black-bg {
  background-color: #000;
}

.black0-bg {
  background-color: #34495e;
}

.black1-bg {
  background-color: #2c3e50;
}

.title-l {
  font-size: 1.8rem;
  font-weight: bold;
  line-height: 2.5rem;
  overflow: hidden;
  white-space: nowrap;
  text-overflow: ellipsis;
  overflow-wrap: break-word;
  display: block;
}

.desc-l {
  font-size: 1.2rem;
  line-height: 2rem;
  overflow: hidden;
  white-space: nowrap;
  text-overflow: ellipsis;
  overflow-wrap: break-word;
  display: block;
}

.title-m {
  font-size: 1.4rem;
  line-height: 2rem;
  overflow: hidden;
  white-space: nowrap;
  text-overflow: ellipsis;
  overflow-wrap: break-word;
  display: block;
}

.title-m-wrap {
  font-size: 1.4rem;
  line-height: 2rem;
  overflow: hidden;
  overflow-wrap: break-word;
  display: block;
}

.desc-m {
  font-size: 1.2rem;
  line-height: 2rem;
  overflow: hidden;
  white-space: nowrap;
  text-overflow: ellipsis;
  overflow-wrap: break-word;
  display: block;
}

.clickable {
  cursor: pointer;
}

.v-mid {
  display: flex;
  flex: 0 0 auto;
  align-items: center;
  justify-content: flex-start;
}

.v-mid-r {
  display: flex;
  flex: 0 0 auto;
  align-items: center;
  justify-content: flex-end;
}

.full-width {
  width: 100%;
}

.bold {
  font-weight: bold;
}

.fix {
  clear: both;
}

.anm-rotate-s {
  animation: trm-rotate-s 1s infinite linear;
}

.anm-rotate-m {
  animation: trm-rotate-m 1s infinite linear;
}

.anm-rotate-f {
  animation: trm-rotate-f 1s infinite linear;
}

@keyframes trm-rotate-f {
  20% {
    transform: rotate(72deg);
  }
  40% {
    transform: rotate(144deg);
  }
  60% {
    transform: rotate(216deg);
  }
  80% {
    transform: rotate(288deg);
  }
  100% {
    transform: rotate(360deg);
  }
}

@keyframes trm-rotate-m {
  20% {
    transform: rotate(36deg);
  }
  40% {
    transform: rotate(72deg);
  }
  60% {
    transform: rotate(144deg);
  }
  80% {
    transform: rotate(288deg);
  }
  100% {
    transform: rotate(360deg);
  }
}

@keyframes trm-rotate-s {
  20% {
    transform: rotate(18deg);
  }
  40% {
    transform: rotate(36deg);
  }
  60% {
    transform: rotate(72deg);
  }
  80% {
    transform: rotate(144deg);
  }
  100% {
    transform: rotate(360deg);
  }
}

.float-l {
  float: left;
}

.txt-align-l {
  text-align: left;
}

.txt-align-r {
  text-align: right;
}