أرابيكا:بوابة المجتمع/styles.css

.grid {
  display: grid;
  grid-template-columns: repeat(8, 1fr);
  grid-gap: 15px;
  padding: 10px;
}

.span-c8 {
  grid-column: span 8 / auto;
}

.span-c7 {
  grid-column: span 7 / auto;
}

.span-c6 {
  grid-column: span 6 / auto;
}

.span-c5 {
  grid-column: span 5 / auto;
}

.span-c4 {
  grid-column: span 4 / auto;
}

.span-c3 {
  grid-column: span 3 / auto;
}

.span-c2 {
  grid-column: span 2 / auto;
}

.span-c1 {
  grid-column: span 1 / auto;
}

.span-r {
  grid-row: span 2 / auto;
}

@media screen and (max-width: 675px) {
  .grid {
    display: grid;
    grid-template-columns: repeat(1, 1fr);
    grid-gap: 10px;
  }

  .span-c8 {
    grid-column: auto;
  }

  .span-c7 {
    grid-column: auto;
  }

  .span-c6 {
    grid-column: auto;
  }

  .span-c5 {
    grid-column: auto;
  }

  .span-c4 {
    grid-column: auto;
  }

  .span-c3 {
    grid-column: auto;
  }

  .span-c2 {
    grid-column: auto;
  }

  .span-c1 {
    grid-column: auto;
  }
  .span-r {
    grid-row: auto;
  }

  .nav-links {
    flex-direction: column;
  }

  .sec-title,
  .main-title,
  .card-title,
  .sub-title {
    text-align: center;
  }
}

.card {
  border: 1px solid #e7e8f3;
  background-color: #ffffff;
  padding: 30px;
}

.main-title {
  color: #38327c;
  font-size: 24px;
  font-weight: bold;
}
.sub-title {
  color: #1b68ff;
  font-size: 18px;
}
.sec-title {
  color: #38327c;
  font-size: 22px;
  font-weight: bold;
}

.card-title {
  color: #38327c;
  font-size: 18px;
  font-weight: bold;
}

.wcard {
  background-color: #ffffff;
  margin-left: -1rem;
  margin-right: -1rem;
  padding: 20px;
}

.mcard {
  border: 1px solid #e7e8f3;
  border-top: 3px solid #1b68ff;
  background-color: #ffffff;
  padding: 10px 15px;
  vertical-align: middle;
}

.mcard1 {
  padding: 15px;
  vertical-align: middle;
}

.mcard2 {
  border: 1px solid #e7e8f3;
  background-color: #ffffff;
  padding: 10px 15px;
  vertical-align: middle;
}

.mcard p,
.mcard1 p {
  padding: 0;
  margin: 0;
  font-size: 90%;
}

.mcard-title {
  color: #38327c;
  font-size: 0.5em;
  font-weight: bold;
  margin: 10px;
}

.w-btn {
  float: left;
  min-width: 55px;
  color: #38327c;
  font-size: 85%;
  background-color: #f9fafe;
  border-radius: 20px;
  padding: 0px 5px;
  margin: 5px 1px 0px 5px;
  text-align: center;
  cursor: pointer;
}

.w-btn a {
  color: #38327c;
}

.b-btn {
  float: left;
  min-width: 55px;
  color: #f9fafe;
  font-size: 85%;
  background-color: #1b68ff;
  border-radius: 20px;
  padding: 0px 5px;
  margin: 5px 1px 0px 5px;
  text-align: center;
  cursor: pointer;
}

.b-btn a {
	color: #f9fafe;
}

.wcard .sec-title .sub-title {
  text-align: center;
}

.wcard ul {
  border-right: 1px solid #e7e8f3;
  padding-right: 15px;
  font-size: 90%;
}

.task ul {
	font-size: 90%;
}

.task-des {
  font-size: 85%;
  color: #878cbd;
  padding: 0;
}

.cm {
  max-height: 400px;
  overflow: auto;
  vertical-align: top;
}

.cm ol,
.cm ul {
  display: flex;
  flex-direction: column-reverse;
  list-style-type: disc;
}

.stat > .card-title {
	color: #686868;
    font-size: 16px;
    font-weight: bold;
    text-align: center;
}
.stat > .w-btn {
	float:none;
}

.num {
	font-size: 36px;
    font-weight: bold;
    text-align: center;
    padding: 10px;
}

.users-table {
	height:250px;
	overflow-y:auto;
	margin:5px;
	padding:5px;
}

.wikitable,
.sortable,
.jquery-tablesorter {
  border-collapse: collapse;
  font-size: 0.9em;
  border-radius: 5px 5px 0 0;
  overflow: hidden;
  width: 100%;
  margin: auto;
  background: none;
  text-align: center;
  border: none;
}
.wikitable tr,
.wikitable td {
  border: none;
}
table thead tr th {
	background: #1b68ff;
}
.wikitable > * > tr > th {
  background-color: #1b68ff;
  color: #ffffff;
  border: none;
  padding: 10px;
}

.wikitable td,
.sortable td,
.jquery-tablesorter td {
  background: none;
  padding: 5px;
}

.jquery-tablesorter tbody tr {
  border-bottom: 1px solid #dddddd;
}

.jquery-tablesorter tbody tr:last-of-type {
  border-bottom: 2px solid #1b68ff;
}
.jquery-tablesorter tbody tr:nth-of-type(even) {
  background-color: #f9fafe;
}