/* depends on seafile-ui.css */
/**
 * CONTENTS
 *
 */
p {
  color: #6A737D;
  line-height: 2;
}

 /* overwrite the max-width set by seatable-ui */
@media (min-width: 1200px) {
  .container {
    max-width: 1140px;
  }
}

@media (min-width: 768px) {
  .top-nav-item {
    align-self: stretch;
    line-height: 64px;
  }

  .top-nav-item:hover {
    text-decoration: none;
    border-bottom: 3px solid #ff8000;
  }

  #solutions-toggle::after {
    display: inline-block;
    content: '';
    border-style: solid;
    border-width: 0 2px 2px 0;
    padding: 2px;
  }

  #solutions-toggle[aria-expanded="false"]::after {
    margin: 0 0 3px 3px;
    transform: rotate(45deg);
  }

  #solutions-toggle[aria-expanded="true"]::after {
    margin: 0 0 0 3px;
    transform: rotate(-135deg);
  }

  #solutions {
    top: 65px;
    box-shadow: 0 12px 34px rgba(255,128,0, 0.15);
  }

  #solutions .category {
    margin-right: 20px;
    flex-basis: 40.6%;
  }

  #solutions .category:last-child {
    margin-right: 0;
    flex-basis: auto;
  }

  #solutions .category-title {
    font-size: 16px;
    margin-top: 28px;
  }

  #solutions .items-list {
    margin: 20px 0;
    display: flex;
    flex-wrap: wrap;
  }

  #solutions .item {
    color: inherit;
    font-size: 14px;
    height: 36px;
    line-height: 36px;
    padding: 0 10px;
    width: 150px;
  }

  #solutions .item:hover {
    background: #ffefe0;
    text-decoration: none;
  }

}

#content {
  margin-top: 65px;
}

.a-simulate {
  color: #eb8205 !important;
  text-decoration: none;
  font-weight: normal;
  cursor: pointer;
}

.a-simulate:hover {
  text-decoration: underline;
}

.btn-login {
  width: 80px; }

.btn-register {
  width: 140px; }

.h2-lg {
  font-size: 1.75rem; }
  
@media (min-width: 768px) { 
  .h2-lg {
    font-size: 2.75rem;
  }

  .home-h2-lg {
    font-size: 2.5rem;
  }
}

.h2-md {
  font-size: 2.25rem; }

.h2-sm {
  font-size: 1.5rem; }

.h3-sm {
  font-size: 1.15rem; }

.rounded-2x {
  border-radius: 6px !important; }

.shadow-x {
  box-shadow: 0 2px 18px rgba(0, 0, 0, 0.08) !important; }

.scene {
  cursor: pointer;
  border: 1px solid #e2e2e2;
  display: flex;
  justify-content: center !important;
  align-items: center;
}
.scene-current,
.scene-highlighted {
  border: 1px solid #f09f3f;
  color: #eb8205;
}
.scene-icon {
  opacity: 0.4;
}
.scene-current .scene-icon,
.scene-highlighted .scene-icon {
  opacity: 1;
}

.client-logos-container {
  justify-content: center;
  flex-wrap: wrap;
  height: 400px;
}

@media (min-width: 768px) {
  .client-logos-container {
    justify-content: space-between;
    flex-wrap: nowrap;
    height: 120px;
  }
}

#footer ul a {
  color: #999;
}

#footer ul a:hover {
  color: #eb8205
}

.wechat-icon:hover .wechat-account-container {
  display: block;
}

.wechat-account-container {
  bottom: 1.5rem;
  left: -0.625rem;
  width: 120px;
  display: none;
}

.text-lg-size {
  font-size: 1.5rem
}

.text-normal-size {
  font-size: 1rem;
}

.text-sm-size {
  font-size: 12px;
}

.pricing-list {
  padding-top: 7rem;
  padding-bottom: 7rem; 
}

.price-table-line {
  border: 2px solid #f2ad51;
  width: 30%;
}

.price-table-btn-details {
  background-color: #fcecd9;
  width: 80%;
  border-color: transparent;
  padding: 0.5rem 1rem;
}

.price-version-container-header {
  width: 16%;
  border: 2px solid #ededed;
  border-bottom: 0;
  border-radius: 4px 4px 0 0;
  padding: 0.5rem 0.5rem 1.5rem;
}

.price-table-cell-text {
  width: 18%;
  text-align: left;
}

.price-table-cell {
  border-left: 2px solid #ededed;
  border-right: 2px solid #ededed;
  width: 16%;
}

.price-table-cell-bottom {
  border-bottom: 2px solid #ededed;
  border-radius: 0 0 4px 4px; 
}

.price-question-sign {
  width: 19px;
}

.resource-list, .features-list {
  color: #707070;
}

.resource-list h4, .features-list h4,
.resource-list h5, .features-list h5 {
  color: #000;
}

.price-table-row:hover {
  background: #f2f2f2;
  border-radius: 4px;
}

.features-list .dtable-font {
  color: #21bc2e;
}

.price-table-mobile-title {
  font-size: 36px;
}

.price-table-mobile-btn-details {
  width: 140px;
  border-color: transparent;
  padding: 0.5rem 1rem;
}

.price-table-mobile-line {
  border: 2px solid #f2ad51;
  width: 30%;
  margin: 0 auto;
}

.price-version-mobile-container {
  border: 2px solid #ededed;
  border-radius: 4px 4px 0 0;
  padding: 0.5rem;
}

/* doc page */
.doc-item {
  height: 220px;
  max-width: 480px;
  padding: 5em 2em 2em;
  border: 2px solid transparent;
  border-radius: 4px;
  box-shadow: 0 0 14px rgba(0, 0, 0, 0.1);
  margin: 10px;
}
.doc-item-hover {
  border-color: #f09f3f;
  background: #fffbf8;
  cursor: pointer;
}

/* market-project-management page */
.project-template-item {
  border: 1px solid transparent;
  box-shadow: 0 0 0.5625rem rgba(0, 0, 0, 0.1);
  padding: 0;
  background: #fff;
}
.project-template-item:hover {
  border-color: #f09f3f;
  background: #fffbf8;
  cursor: pointer;
}

/* wechat page */
.text-lg {
  font-size: 1.125rem;
}

.text-md {
  font-size: 1rem;
}

.register-btn {
  width: 200px;
  height: 50px;
  background: #2484dd;
  border: none;
  border-radius: 5px;
  font-size: 1rem;
  color: #ffffff;
  margin-bottom: 5px;
}

@media (min-width: 992px) {
  .register-btn {
    margin: 0 30px 0 0;
  }
}

.install-btn {
  width: 200px;
  height: 50px;
  background: #eff8ff;
  border: 2px solid #2484dd;
  border-radius: 5px;
  font-size: 1rem;
  color: #2484dd;
}

.bg-seatable-wechat {
  background: #f4faff;
}

.service-list {
  display: flex;
  flex-wrap: wrap;
  justify-content: space-around;
}

@media (min-width: 992px) {
  .service-list {
    flex-wrap: nowrap;
    justify-content: space-between;
  }
}

.service-item {
  width: 260px;
  height: 200px;
  box-shadow: 0 2px 7px 1px rgb(0,0,0, 8%);
  border-radius: 6px;
}

.reason-item {
  width: 260px;
  background: #fff;
  border-radius: 6px;
  box-shadow: 6px 6px 15px 0px rgb(195,98,0, 8%);
}

.reason-item-title {
  font-size: 20px;
  margin: 20px auto 12px;
}

.seatable-tab-nav {
  height: 91px;
  border-bottom: 1px solid #f0f0f0;
  margin: 40px auto 78px;
}

.seatable-tab-nav .btn {
  color: #aaa;
  font-size: 20px;
  height: 90px;
  border-radius: 0;
}

.seatable-tab-nav .btn:focus {
  box-shadow: none;
}

.seatable-tab-nav .btn[aria-expanded="true"] {
  color: #ff8000;
  border-bottom: 2px solid #ff8000;
  margin-bottom: -1px;
}

.client-list {
  margin: 80px 0 100px;
}

.client-item {
  padding: 20px;
  width: 350px;
  border-radius: 10px;
  box-shadow: 6px 10px 20px 1px rgb(0,0,0, 8%);
}

.client-item-title {
  font-size: 20px;
  margin: 20px auto 10px;
}

.why-choose-seatable {
  background-image: url('../img/platform-for-small/background.png');
  background-size: cover;
}

/* 'plugin list' in 'home' page */
.plugin-intro {
  padding: 18px 16px;
  background: #fafafa;
  border-radius: 4px;
}

.plugin-intro {
  margin-top: 10px;
}

.plugin-intro:hover {
  background: #f5f5f5;
}

.plugin-intro.active {
  background: #ffdec3;
}

.plugin-icon {
  margin-right: 10px;
}

.plugin-intro-text {
  margin: 10px 0 0 28px;
}

.plugin-screenshot {
  border-radius: 10px;
  box-shadow: 0 0 8px rgba(0,0,0, 0.2);
}

.ind-screenshot {
  border-radius: 10px;
  box-shadow: 0 2px 28px rgba(0,0,0, 0.12);
}

/* mobile style */

@media (max-width: 767px) { 
  .seatable-header {
    width: 100%;
    max-width: none;
    padding: 0 16px;
  }

  .navbar-toggle {
    padding: 9px 10px;
    border: 1px solid #ddd;
    border-radius: 4px;
    position: relative;
    cursor: pointer;
  }

  .navbar-toggle .icon-bar {
    display: block;
    width: 22px;
    height: 2px;
    border-radius: 1px;
    background-color: #888;
    margin-top: 4px;
  }

  .navbar-nav-list {
    position: absolute;
    top: 65px;
    left: 0px;
    width: 100%;
    background: #fff;
    z-index: 2;
    overflow: auto;
    display: none;
  }

  .top-nav-item {
    display: block;
    padding: 15px 0;
    font-size: 16px;
    border-bottom: 1px solid rgba(0, 40, 100, 0.12) !important;
  }

  .solutions-toggle-mobile {
    display: flex!important;
    justify-content: space-between;
    align-items: center;
    padding: 15px 2px 15px 0;
  }

  .solutions-toggle-mobile:hover {
    text-decoration: none;
  }

  .solutions-toggle-mobile::after {
    display: inline-block;
    content: '';
    border-style: solid;
    border-width: 0 2px 2px 0;
    padding: 3px;
  }

  .solutions-toggle-mobile[aria-expanded="false"]::after {
    transform: rotate(45deg);
  }

  .solutions-toggle-mobile[aria-expanded="true"]::after {
    transform: rotate(-135deg);
  }

  #solutions-mobile .category {
    padding-left: 10px;
  }

  #solutions-mobile .category-title {
    font-size: 14px;
    color: #999;
  }

  #solutions-mobile .items-list {
    margin: 0;
    padding-left: 10px;
  }

  #solutions-mobile .item {
    padding: 15px 0;
    font-size: 14px;
    color: inherit;
  }
}