@import url(//fonts.googleapis.com/earlyaccess/notosanstc.css);
@import 'main.css';

@font-face {
  font-family: 'kaiu';
  src: url('../fonts/kaiu.ttf')  format('truetype'); /* Safari, Android, iOS */

  font-family: 'Free-HK-Kai_4700';
  src: url('../fonts/Free-HK-Kai_4700.ttf')  format('truetype'); /* Safari, Android, iOS */
}
/* Define Color Code Variables for style update*/
:root {
  --header-color:#ffffffa8;
  --button-color:#7298CF;
  --title-text-color: #353b7c;
  --container-color-1: #EBF0F8;
  --container-color-2: #CCE1F4;
}

body {
  font-family: 'Noto Sans TC', sans-serif;
  overflow-y: hidden;
  overflow-x: auto;
  min-width: 375px; /*768px*/
  width: 100%;
  height: 100%;
  position: fixed;
  background: linear-gradient(to bottom right, var(--container-color-1), var(--container-color-2)) fixed !important;
}

a,
a:link,
a:active,
a:visited,
a:hover {
  text-decoration: none;
  color: inherit;
}

#login_header {
  background-color:var(--header-color);
  color: #333;
  width:100%;
  min-width: 375px; /*768px*/
  /* height:50px; */
  /* height: 130px; */
  /* position: fixed; */
  margin: 0px;
  top:0px;
  z-index: 1000;
  padding: 20px 40px;
}

#login_header_logo {
  width: 40px;
  height: 40px;
  vertical-align: middle;
}

#login_header_title {
  width: calc(100% - 50px);
  display: inline-block;
  line-height: 30px;
  text-align: left;
  font-weight: bold;
  color: var(--title-text-color);
  font-size: 140%;
  text-overflow: ellipsis;
  overflow: hidden;
  white-space: nowrap;
  vertical-align: middle;
  margin-bottom: 2rem;
}

#login_header_title>span:first-child{
  font-size: 180%;
}

#login_footer {
  background-color:var(--footer-color);
  color: #333;
  width:100%;
  min-width: 375px; /*768px*/
  height:145px;
  position: fixed;
  margin: 0px;
  bottom:0px;
  z-index: -1;
}

#login_footer_logo {
  width: 40px;
  height: 40px;
  margin: 5px;
}

#login_footer_content {
  width: 100%;
  line-height: 50px;
  position: absolute;
  text-align: right;
  color: #fff;
  font-size: 12px;
  overflow: hidden;
  white-space: nowrap;
  bottom: 0;
}

#login_container {
  /* background-color: var(--container-color); */
  /* background-image: linear-gradient(to bottom right, var(--container-color-1), var(--container-color-2), var(--container-color-3)); */
  width: 100%;
  height: 100%;
  padding-left: 20px;
  padding-right: 20px;
  /* padding-top: 60px; */
  padding-bottom: 10px;
  overflow: hidden;
  overflow-y: auto;
}


#leftContainer{
  /* background: #fcf; */
  height: calc(100% - 180px);
  display: flex;
  justify-content: center;
}

#rightContainer{
  /* background: #cfc; */
  height: calc(100% - 180px);
  padding-top: 8vh;
  display: flex;
  justify-content: center;
}

#login_logo_img{
  /* width: 400px;
  margin: 10px; */
  width: 100%;
  height: auto;
  object-fit: contain;
  padding-right: 100px;
  z-index: 1001;
}

#login_box {
  /* position: absolute; */
  background-color: white;
  border: 1px solid #cccccc;
  border-radius: 16px;
  /* top: 50%;
  left: 50%; */
  height: 190px;
  /* margin-top: -175px;
  margin-left: -240px; */
  width: 480px;
  padding: 15px 0px;
}
#reg_box {
  background-color: white;
  border: 1px solid #cccccc;
  border-radius: 16px;
  height: 80px;
  width: 480px;
  padding: 15px 0px;
  margin-top: 20px;
}
.link_btn{
  color:#439dd8;
}



@media screen and (max-width: 991px) {
  #leftContainer{
    height: auto;
  }
  #rightContainer{
    padding-top: 10px;
    height: auto;
  }
  #login_logo_img{
    max-height: 50vh;
    object-fit: contain;
    padding-right: 0;
  }
  #login_header{
    font-size: 80%;
    padding: 20px;
  }
}

@media screen and (max-width: 480px) {
  #login_box{
    width: 380px;
    padding: 5px 0px;
    height:170px;
  }
  #reg_box{
    margin-top: 10px;
    width: 380px;
    padding: 5px 0px;
    height:55px;
  }
  #login_header{
    font-size: 50%;
    padding: 20px;
  }
}

@media screen and (max-width: 375px) {
  #login_box{
    width: 330px;
  }
  #reg_box{
    width: 330px;
    
  }
  #login_logo_img{
    max-height: 300px;
    width: auto;
    padding-right: 0;
  }
}

.login_fields {
  background: #eee;
  text-align: center;
  width: 84%;
  margin: 0 8%;
  line-height: 30px;
  border: none;
  opacity: 0.8;
  border-bottom: 2px solid var(--footer-color);
}

#login_button {
  background-color: var(--footer-color);
  cursor: pointer;
  margin-top: 15px;
  padding: 10px 15px;
  color: white;
  border-radius: 5px;
  text-align: center;
  display: inline-block;
  width: 40%;
}
#login_button:hover{
  opacity: 0.7;
}

#reg_button, #reg_info {
  background-color: var(--button-color);
  padding: 10px 15px;
  margin: 0 auto;
  border-radius: 5px;
  color: #fff;
  transition: 0s;
  cursor: pointer;
}
#reg_button:hover, #reg_info:hover{
  opacity: 0.7;
}

#organizer_wrapper {
  color: #3e3a39
}

#organizer_wrapper .div1, #organizer_wrapper .div9{
  color: var(--title-text-color);
}

@media only screen and (max-width: 600px){
  #login_footer_content{
    text-align: center;
  }
}