* {
   padding: 0;
   margin: 0;
   box-sizing: border-box;
}

body {
   font-family: 'Microsoft JhengHei', '微軟正黑體', sans-serif;
   font-size: 10px;
}
button{
   font-family: 'Microsoft JhengHei', '微軟正黑體', sans-serif;
}

section {
   min-height: 100vh;
}

.flex {
   display: flex;
}

.mask {
   width: 100vw;
   height: 20em;
   background: linear-gradient(to right, rgba(0, 0, 0, 0.05), rgba(0, 0, 0, 0.6));
}

.header {
   width: 100vw;
   min-height: 20em;
   position: relative;
   background-color: rgb(150, 150, 150);

   background-size: cover;
   background-position: center;
   background-repeat: no-repeat;
   background-image: url('/static/images/meeting-theme.png');
}

.header-top {
   display: flex;
   font-size: 10px;
}

.topoo_logo {
   width: 25em;
   margin: 2em;
}

.menu {
   display: none;
}

.account {
   display: flex;
   color: #FFFFFF;
   font-size: 1.75em;
   height: 1.5em;
   margin-left: auto;
   margin-top: 1em;
   margin-right: 3.85vw;
}

.account p {
   padding-right: 1em;
   border-right: solid 0.15em #FFFFFF;
}

.account .icon {
   padding-top: 0.25em;
   margin-left: 1em;
}

.title {
   color: #FFFFFF;
   margin: 0 0.75em;
   font-weight: 600;
   font-size: 2.75em;
   text-align: justify;
   text-shadow: 0.1em 0.1em 0.2em #292929;

   display: box;
   line-clamp: 2;
   overflow: hidden;
   box-orient: vertical;
   display: -webkit-box;
   -webkit-line-clamp: 2;
   text-overflow: ellipsis;
   -webkit-box-orient: vertical;
}

.body-container {
   display: flex;
   position: relative;
}

.side-bar {
   width: 20vw;
   font-size: 10px;
   min-height: 100%;
   margin: 1.5vw 0 1.5vw;
   background-color: #FFFFFF;
   border-right: solid 0.15vw #a5a5a5;

   display: flex;
   align-items: center;
   flex-direction: column;
}

.bar-container {
   /* margin: 0 2em; */
}

.bar-container p {
   font-size: 1.25vw;
}

.recording-records {
   width: 100%;
   height: auto;
   border: none;
   font-size: 1.5vw;
   font-weight: 500;
   color: #FFFFFF;
   margin: 1.5em 0 1.5em;
   border-radius: 0.25em;
   padding: 0.5em 0.5em 0.5em;
   background-color: #5ad4a2;
}

.recording-records:hover {
   background-color: rgb(99, 221, 170);
}

.receive-records {
   display: flex;
   align-items: center;
   flex-direction: column;
}

.receive-count {
   margin-bottom: 1vw;
}

.receive-record {
   margin-bottom: 1vw;

   display: flex;
   align-items: center;
   flex-direction: column;
}

.refuse {
   color: #fc0004;
}

.accept {
   color: #5ad4a2;
}

.right-container {
   width: 80vw;
}

.meeting-row {
   background-color: #FFFFFF;
}

.meeting-col {
   display: flex;
   flex-wrap: wrap;
   padding: 0 1.5vw;
   justify-content: flex-start;
}

.search-wrapper {
   display: flex;
   border-radius: 10em;

   margin: 1.5vw 2.5vw 0.5vw;
   width: calc(33.333% - 3.5vw);
   background-color: #eaeaea;
}

.search-field {
   width: 100%;
   border: none;
   outline: none;
   font-size: 1vw;
   text-indent: 1vw;
   min-height: 3.5vw;
   border-radius: 10em;
   background-color: #eaeaea;
}

.search-logo {
   font-size: 1vw;
   margin-left: auto;
   border-radius: 10em;
   padding: 1.25em 1.25em;
}

.search-logo:hover {
   background-color: #e6e6e6;
}

.meeting-container {
   height: 20vw;
   min-width: 250px;
   font-size: 10px;
   margin: 1.5vw 1.25vw;
   position:relative;
   box-sizing: border-box;
   background-color: #FFFFFF;
   width: calc(33.333% - 2.5vw);
}

.meeting-bg {
   width: 100%;
   height: 40%;
   border-top-left-radius: 0.5vw;
   border-top-right-radius: 0.5vw;

   background-size: cover;
   background-position: center;
   background-repeat: no-repeat;
   background-image: url('/static/images/meeting-bg.png');
}

.info-container {
   width: 100%;
   height: 40%;
   color: #264265;
   border-left: solid 0.15vw #e7e7e7;
   border-right: solid 0.15vw #e7e7e7;
}

.info-container:hover {
   color: #FFFFFF;
   background-color: #929292;
}

.info-container p {
   font-size: 0.9vw;
}

.meet-field {
   width: auto;
   font-weight: 500;
   margin: 1em 1.5em 0;
}

.meet-name {
   width: 60%;
   margin-top: 1em;
   font-weight: 500;
   text-align: justify;

   display: box;
   line-clamp: 1;
   overflow: hidden;
   box-orient: vertical;
   display: -webkit-box;
   -webkit-line-clamp: 1;
   text-overflow: ellipsis;
   -webkit-box-orient: vertical;
}

.meet-info {
   width: 60%;
   margin-top: 1em;
   text-align: justify;

   display: box;
   line-clamp: 3;
   overflow: hidden;
   box-orient: vertical;
   display: -webkit-box;
   -webkit-line-clamp: 3;
   text-overflow: ellipsis;
   -webkit-box-orient: vertical;
}

.meet-btn {
   width: 100%;
   height: 20%;
   margin-top: auto;
   align-items: center;
   border-bottom-left-radius: 0.5vw;
   border-bottom-right-radius: 0.5vw;
   border-top: solid 0.15vw #e7e7e7;
   border-left: solid 0.15vw #e7e7e7;
   border-right: solid 0.15vw #e7e7e7;
   border-bottom: solid 0.15vw #e7e7e7;
}

.meet-btn button {
   width: 5vw;
   height: 2.5vw;
   padding: 0 1em;
   margin-left: 1em;
   font-size: 0.75vw;
   border-radius: 0.25em;
}

.join-btn {
   border: none;
   color: #000000;
   background-color: #C5CAE4;

   display: box;
   line-clamp: 1;
   overflow: hidden;
   box-orient: vertical;
   display: -webkit-box;
   -webkit-line-clamp: 1;
   text-overflow: ellipsis;
   -webkit-box-orient: vertical;
}

.invite-btn {
   border: none;
   color: #FFFFFF;
   background-color: #8382C6;

   display: box;
   line-clamp: 1;
   overflow: hidden;
   box-orient: vertical;
   display: -webkit-box;
   -webkit-line-clamp: 1;
   text-overflow: ellipsis;
   -webkit-box-orient: vertical;
}

/* 頁數按鈕 不需要可移除 */

.pagination-container {
   margin-right: 2vw;
   margin-bottom: 2vw;
   align-items: center;
   justify-content: flex-end;

}

.pagination-container p {
   font-size: 1vw;
   margin: 0.75vw;
}

.pagination-container button {
   padding: 1vw;
   border: none;
   margin: 0.75vw;
   font-size: 1vw;
   border-radius: 0.75vw;
   background-color: #b9b9e9;
}

.pagination-container button:hover,
.pagination-container button:focus {
   color: #FFFFFF;
   background-color: #8382C6;
}

.pagination-container2 {
   display: none;
}

.footer {
   border-top: solid 0.15vw #e6e6e6;
}

.footer p {
   margin: 1vw;
   font-size: 1vw;
}

.join_num {
   top: 0;
   right: 0;
   padding: 0.5vw;
   min-width: 5vw;
   display: flex;
   position: absolute;
   align-items: center;
   justify-content: center;
   background-color: #FF0000;
   border-top-right-radius: 0.5vw;
}
.join_num p {
   font-size: 1vw;color:#FFFFFF;
}

/* 中等裝置：2欄 */
@media screen and (max-width: 1200px) {
   .meeting-container {
      height: 30vw;
      width: calc(50% - 2.5vw);
   }

   .info-container p {
      font-size: 1.4vw;
   }

   .meet-btn button {
      width: 7vw;
      height: 3.5vw;
      padding: 0 1em;
      margin-left: 1.5em;
      font-size: 1vw;
      border-radius: 0.25em;
   }

   .join_num {
      padding: 0.85vw;
      min-width: 7.25vw;
   }
   .join_num p {
      font-size: 1.25vw;
   }
}

/* 手機裝置：1欄 */
@media screen and (max-width: 720px) {
   .join_num {
      padding: 1.5vw;
      min-width: 12.5vw;
   }
   .join_num p {
      font-size: 2vw;
      color: #ffffff;
   }

   .topoo_logo {
      display: none;
   }

   .menu {
      display: flex;
      margin: 0.75em;
      color: #FFFFFF;
      font-size: 2.5em;
      margin-left: 0.85em;

   }

   .meeting-container {
      height: 55vw;
      min-width: 95.75%;
   }

   /* 點選左上選單展開左側列 */
   .side-bar {
      width: 60vw;
      position: absolute;
   }

   .bar-container p {
      font-size: 3.5vw;
      margin-top: 2.5vw;
   }

   .recording-records {
      width: 100%;
      font-size: 3.5vw;
   }

   .right-container {
      width: 100vw;
   }

   .search-wrapper {
      height: 7.5vw;
      width: calc(70% - 2.5vw);
   }

   .search-field {
      font-size: 2.5vw;
   }

   .search-logo {
      font-size: 2.5vw;
      margin-left: auto;
      padding: 1em 0.75em;
   }

   .info-container p {
      font-size: 2.15vw;
   }

   .meet-btn button {
      width: 15vw;
      height: 7.5vw;
      padding: 0 1em;
      margin-left: 1.05em;
      font-size: 1.75vw;
      border-radius: 0.25em;
   }

   /* 頁數按鈕 不需要可移除 */

   .pagination-container {
      display: none;
   }

   .pagination-container2 {
      display: flex;
      margin-right: 2vw;
      margin-bottom: 2vw;
      align-items: center;
      justify-content: center;

   }

   .pagination-container2 p {
      font-size: 2.5vw;
      margin: 0.75vw;
   }

   .pagination-container2 button {
      padding: 1vw;
      border: none;
      margin: 0.75vw;
      font-size: 2.5vw;
      border-radius: 0.75vw;
      background-color: #b9b9e9;
   }

   .pagination-container2 button:hover,
   .pagination-container2 button:focus {
      color: #FFFFFF;
      background-color: #8382C6;
   }

   .footer p {
      margin: 3vw;
      font-size: 2vw;
   }
}