@font-face {
  font-family: PingFangHK-Regular;
  src: url('../fonts/pingfang.ttf');
}
#__react-tooltip-alwaysVisibleTooltip {
  opacity: 1 !important;
  visibility: visible !important;
}
.CircleBg {
  display: flex;
  flex-direction: row;
  justify-content: center;
  align-items: center;
  width: 20px;
  height: 20px;
  border-radius: 10px;
  color: #ffffff;
  font-size: 10px;
  background-color: #389bff;
  margin-bottom: 3px;
}
.CircleBgSelected {
  display: flex;
  flex-direction: row;
  justify-content: center;
  align-items: center;
  width: 20px;
  height: 20px;
  border-radius: 10px;
  color: #389bff;
  font-size: 10px;
  border: 1px solid #389bff;
  background-color: #ffffff;
  margin-bottom: 3px;
}

.MyToolTip {
  background-color: #f00;
  color: #000;
  border: 1px solid #062e56;
}

.MyToolTip .tooltip-inner {
  background-color: #f00;
  color: #000;
  border: 1px solid #062e56;
}

.MyToolTip .tooltip-arrow {
  border-top: 5px solid #062e56;
}

::-webkit-scrollbar {
  width: 6px;
  height:6px;
  background: '#DDDDDD';
}

::-webkit-scrollbar-track {
  -webkit-box-shadow: inset 0 0 2px rgba(0, 0, 0, 0.5);
  border-radius: 15px;
}

::-webkit-scrollbar-thumb {
  border-radius: 15px;
  -webkit-box-shadow: inset 0 0 2px rgba(0, 0, 0, 0.5);
  background: '#DDDDDD';
}

.arrow-up {
  margin-left: 10px;
  width: 0;
  height: 0;
  border-left: 5px solid transparent;
  border-right: 5px solid transparent;
  border-bottom: 5px solid white;
}

.arrow-down {
  margin-left: 10px;
  width: 0;
  height: 0;
  border-left: 5px solid transparent;
  border-right: 5px solid transparent;
  border-top: 5px solid white;
}

.arrow-up-gray {
  cursor: pointer;
  margin-left: 10px;
  width: 0;
  height: 0;
  border-left: 5px solid transparent;
  border-right: 5px solid transparent;
  border-bottom: 5px solid #cccfd4;
}

.dashboard_pre_name {
  cursor: pointer;
}

.arrow-down-black {
  cursor: pointer;
  margin-left: 10px;
  width: 0;
  height: 0;
  border-left: 5px solid transparent;
  border-right: 5px solid transparent;
  border-top: 5px solid #444444;
}

.arrow-up-black {
  cursor: pointer;
  margin-left: 10px;
  width: 0;
  height: 0;
  border-left: 5px solid transparent;
  border-right: 5px solid transparent;
  border-bottom: 5px solid #444444;
}

.arrow-down-gray {
  cursor: pointer;
  margin-left: 10px;
  width: 0;
  height: 0;
  border-left: 5px solid transparent;
  border-right: 5px solid transparent;
  border-top: 5px solid #cccfd4;
}

.LoginPage {
  min-width: 600px;
  min-height: 500px;
  position: absolute;
  top: 0px;
  left: 0px;
  height: 100vh;
  background-image: url('../img/phase3/bg_1440.png');
  width: 100%;
  -webkit-background-size: cover; /* For WebKit*/
  -moz-background-size: cover; /* Mozilla*/
  -o-background-size: cover; /* Opera*/
  background-size: cover;
  background-position: center;
  background-repeat: no-repeat;
  display: flex;
  flex-direction: column;
  justify-content: center;
}

.Shadow {
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  min-width: 600px;
  min-height: 500px;
  padding: 24px 24px 10px 24px;
  margin: 0 auto;
  position: absolute;
  top: 0px;
  left: 0px;
  height: 100vh;
  width: 100%;
  -webkit-background-size: cover; /* For WebKit*/
  -moz-background-size: cover; /* Mozilla*/
  -o-background-size: cover; /* Opera*/
  background-size: contain;
  background-position: center;
  background-repeat: no-repeat;
  background: #000000cc;
}

.Shadow .Dialog {
  width: 336px;
  height: 351px;
  border-radius: 8px;
  border: solid 1px #dde0e3;
  background-color: #ffffff;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
}

.Shadow .Dialog .Message {
  margin-top: 110px;
  width: 256px;
  height: 48px;
  font-family: PingFangHK-Regular, Helvetica, Arial, sans-serif;
  font-size: 16px;
  font-weight: 500;
  font-style: normal;
  font-stretch: normal;
  line-height: 1.5;
  letter-spacing: normal;
  text-align: center;
}

.Shadow .Dialog .Button {
  cursor: pointer;
  padding-top: 8px;
  text-align: center;
  margin-top: 100px;
  width: 108px;
  height: 38px;
  border-radius: 4px;
  background-color: #7ac943;
  color: white;
}

.extraClass {
  opacity: 1 !important;
  visibility: visible !important;
  display: block !important;
}

.UpperMenu {
  z-index: 1;
  position: absolute;
  top: 0;
  right: 24px;
  height: 64px;
  display: flex;
  flex-direction: row;
  justify-content: flex-end;
  align-items: center;
}

.SettingMenu {
  position: absolute;
  top: 100%;
  right: 0;
  width: 200px;
  height: 392px;
  background-color: #ffffff;
  border: solid 1px #e8e8e8;
  display: flex;
  flex-direction: column;
  justify-content: flex-start;
  align-items: center;
}

.SettingMenu .Item {
  cursor: pointer;
  width: 176px;
  height: 56px;
  display: flex;
  flex-direction: row;
  justify-content: flex-start;
  align-items: center;
  padding-left: 10px;
  text-decoration: none;
}

.SettingMenu .Item .ContactImage {
  margin-right: 16px;
  width: 20px;
  height: 24px;
  -webkit-background-size: cover; /* For WebKit*/
  -moz-background-size: cover; /* Mozilla*/
  -o-background-size: cover; /* Opera*/
  background-size: contain;
  background-position: center;
  background-repeat: no-repeat;
  background-image: url('../img/phase3/contact.png');
}

.SettingMenu .Item .GuidelineImage {
  margin-right: 16px;
  width: 20px;
  height: 24px;
  -webkit-background-size: cover; /* For WebKit*/
  -moz-background-size: cover; /* Mozilla*/
  -o-background-size: cover; /* Opera*/
  background-size: contain;
  background-position: center;
  background-repeat: no-repeat;
  background-image: url('../img/phase3/guideline.png');
}

.SettingMenu .Item .AboutImage {
  margin-right: 16px;
  width: 20px;
  height: 24px;
  -webkit-background-size: cover; /* For WebKit*/
  -moz-background-size: cover; /* Mozilla*/
  -o-background-size: cover; /* Opera*/
  background-size: contain;
  background-position: center;
  background-repeat: no-repeat;
  background-image: url('../img/phase3/about.png');
}

.SettingMenu .Item .PrivacyImage {
  margin-right: 16px;
  width: 20px;
  height: 24px;
  -webkit-background-size: cover; /* For WebKit*/
  -moz-background-size: cover; /* Mozilla*/
  -o-background-size: cover; /* Opera*/
  background-size: contain;
  background-position: center;
  background-repeat: no-repeat;
  background-image: url('../img/phase3/privacy.png');
}

.SettingMenu .Item .TermImage {
  margin-right: 16px;
  width: 20px;
  height: 24px;
  -webkit-background-size: cover; /* For WebKit*/
  -moz-background-size: cover; /* Mozilla*/
  -o-background-size: cover; /* Opera*/
  background-size: contain;
  background-position: center;
  background-repeat: no-repeat;
  background-image: url('../img/phase3/term.png');
}

.SettingMenu .Item .AccountImage {
  margin-right: 16px;
  width: 20px;
  height: 24px;
  -webkit-background-size: cover; /* For WebKit*/
  -moz-background-size: cover; /* Mozilla*/
  -o-background-size: cover; /* Opera*/
  background-size: contain;
  background-position: center;
  background-repeat: no-repeat;
  background-image: url('../img/phase3/account.png');
}

.SettingMenu .Item .LogOutImage {
  margin-right: 16px;
  width: 20px;
  height: 24px;
  -webkit-background-size: cover; /* For WebKit*/
  -moz-background-size: cover; /* Mozilla*/
  -o-background-size: cover; /* Opera*/
  background-size: contain;
  background-position: center;
  background-repeat: no-repeat;
  background-image: url('../img/phase3/log_out.png');
}

.SettingMenu .Divide {
  background-color: #ccc;
  height: 1px;
  width: 100%;
}

.SettingMenu .Item p {
  margin: auto 0;
  font-family: PingFangHK-Regular, Helvetica, Arial, sans-serif;
  font-size: 14px;
  font-weight: 600;
  font-style: normal;
  font-stretch: normal;
  line-height: 1;
  letter-spacing: normal;
  color: #57595c;
  text-align: left;
}

.TopMainMenu {
  position: absolute;
  top: 150%;
  width: 140px;
  height: 80px;
  display: flex;
  flex-direction: column;
  justify-content: flex-start;
  align-items: flex-start;
  padding-left: 16px;
  padding-top: 16px;
  background: #FFFFFF;
  /* elevation/dropdown */

  box-shadow: 0px 3px 6px 2px rgba(0, 0, 0, 0.15);
  border-radius: 4px;
}

.TopMainMenu .Item {
  cursor: pointer;
  font-family: PingFangHK-Regular, Helvetica, Arial, sans-serif;
  font-size: 14px;
  font-weight: 600;
  font-style: normal;
  font-stretch: normal;
  line-height: 1;
  letter-spacing: normal;
  text-align: left;
  display: flex;
}
.TopMainMenu .Item .CheckImage {
  margin-right: 5px;
  width: 15px;
  height: 15px;
  -webkit-background-size: cover; /* For WebKit*/
  -moz-background-size: cover; /* Mozilla*/
  -o-background-size: cover; /* Opera*/
  background-size: contain;
  background-position: center;
  background-repeat: no-repeat;
}

.LanguageMenu {
  position: absolute;
  top: 100%;
  right: 0;
  width: 88px;
  height: 106px;
  background-color: #ffffff;
  border: solid 1px #e8e8e8;
  display: flex;
  flex-direction: column;
  justify-content: flex-start;
  align-items: flex-start;
  padding-left: 16px;
}
.LanguageMenu .SelectedItem {
  cursor: pointer;
  margin-top: 16px;
  font-family: PingFangHK-Regular, Helvetica, Arial, sans-serif;
  font-size: 14px;
  font-weight: 600;
  font-style: normal;
  font-stretch: normal;
  line-height: 1;
  letter-spacing: normal;
  color: #389bff;
  text-align: left;
}
.LanguageMenu .Item {
  cursor: pointer;
  margin-top: 16px;
  font-family: PingFangHK-Regular, Helvetica, Arial, sans-serif;
  font-size: 14px;
  font-weight: 600;
  font-style: normal;
  font-stretch: normal;
  line-height: 1;
  letter-spacing: normal;
  color: #57595c;
  text-align: left;
}
.UpperMenu p {
  margin: auto 0;
  height: 16px;
  font-family: PingFangHK-Regular, Helvetica, Arial, sans-serif;
  font-size: 16px;
  font-weight: 500;
  font-style: normal;
  font-stretch: normal;
  line-height: 1;
  letter-spacing: normal;
  text-align: left;
  color: white;
}
.UpperMenu .UserImageType {
  width: 32px;
  height: 32px;
  margin-left: 35px;
  border-radius: 16px;
  -webkit-background-size: cover; /* For WebKit*/
  -moz-background-size: cover; /* Mozilla*/
  -o-background-size: cover; /* Opera*/
  background-size: contain;
  background-position: center;
  background-repeat: no-repeat;
}
.UpperMenu .Image {
  width: 32px;
  height: 32px;
  margin-left: 35px;
  -webkit-background-size: cover; /* For WebKit*/
  -moz-background-size: cover; /* Mozilla*/
  -o-background-size: cover; /* Opera*/
  background-size: contain;
  background-position: center;
  background-repeat: no-repeat;
  background-image: url('../img/avatar_default.png');
}

.UpperMenu .LangZone {
  position: relative;
  cursor: pointer;
  height: 100%;
  width: 300px;
  margin-right: 20px;
  display: flex;
  flex-direction: row;
  justify-content: flex-end;
  align-items: center;
}

.UpperMenu .UserZone {
  cursor: pointer;
  margin: auto 0;
  margin-left: 20px;
  height: 100%;
  position: relative;
  font-family: PingFangHK-Regular, Helvetica, Arial, sans-serif;
  font-size: 16px;
  font-weight: 500;
  font-style: normal;
  font-stretch: normal;
  line-height: 1;
  letter-spacing: normal;
  text-align: left;
  display: flex;
  flex-direction: row;
  justify-content: flex-end;
  align-items: center;
  color: white;
}
.UpperMenu .UserZone > p {
  font-family: PingFangHK-Regular, Helvetica, Arial, sans-serif;
  font-size: 16px;
  font-weight: 500;
  font-style: normal;
  font-stretch: normal;
  line-height: 1;
  letter-spacing: normal;
  text-align: left;
  color: white;
}
.CollapseImage {
  cursor: pointer;
  position: absolute;
  top: 22px;
  left: 15px;
  width: 20px;
  height: 20px;
  -webkit-background-size: cover; /* For WebKit*/
  -moz-background-size: cover; /* Mozilla*/
  -o-background-size: cover; /* Opera*/
  background-size: contain;
  background-position: center;
  background-repeat: no-repeat;
  background-image: url('../img/phase3/collapse.png');
}

.LogoText {
  cursor: pointer;
  position: absolute;
  top: 18px;
  left: 45px;
  width: 140px;
  height: 32px;
  font-family: Noto Sans TC;
  font-style: normal;
  font-weight: 900;
  font-size: 28px;
  line-height: 28px;
  color: #FFF;
}

.LogoImage {
  cursor: pointer;
  position: absolute;
  top: 16px;
  left: 45px;
  width: 351px;
  height: 29px;
  -webkit-background-size: cover; /* For WebKit*/
  -moz-background-size: cover; /* Mozilla*/
  -o-background-size: cover; /* Opera*/
  background-size: contain;
  background-position: center;
  background-repeat: no-repeat;
  background-image: url('../img/phase3/fatek_cloud_service.png');
}

.LogoImageWhite {
  cursor: pointer;
  position: absolute;
  top: 16px;
  left: 45px;
  width: 140px;
  height: 32px;
  -webkit-background-size: cover; /* For WebKit*/
  -moz-background-size: cover; /* Mozilla*/
  -o-background-size: cover; /* Opera*/
  background-size: contain;
  background-position: center;
  background-repeat: no-repeat;
  background-image: url('../img/phase3/fatek_white.png');
}

.LoginLogo{
  margin: 0px auto 10px auto;;
  width: 100px;
  height: 64px;
  -webkit-background-size: cover; /* For WebKit*/
  -moz-background-size: cover; /* Mozilla*/
  -o-background-size: cover; /* Opera*/
  background-size: contain;
  background-position: center;
  background-repeat: no-repeat;
  background-image: url('../img/phase3/logo.png');
}

.LoginLogo_CN{
  margin: 0px auto 10px auto;;
  width: 100px;
  height: 64px;
  -webkit-background-size: cover; /* For WebKit*/
  -moz-background-size: cover; /* Mozilla*/
  -o-background-size: cover; /* Opera*/
  background-size: contain;
  background-position: center;
  background-repeat: no-repeat;
  background-image: url('../img/phase3/logo_cn.png');
}

.LoginPage .LoginForm {
  padding: 24px 24px 10px 24px;
  margin: 0 auto;
  /*width: 263px;*/
  height: 450px;
  border-radius: 8px;
  background-color: #ffffff;
  display: flex;
  flex-direction: column;
  justify-content: flex-start;
}

.LoginPage .LoginForm .Title {
  color: #636363;
  width: 194px;
  height: 20px;
  font-family: PingFangHK-Regular, Helvetica, Arial, sans-serif;
  font-size: 16px;
  font-weight: 400;
  font-style: normal;
  font-stretch: normal;
  line-height: 1;
  letter-spacing: normal;
  text-align: left;
  display: flex;
  align-items: center;
}
.LoginPage .LoginForm .Input {
  margin-top: 10px;
  padding-left: 5px;
  width: 215px;
  height: 32px;
  border-radius: 4px;
  border: solid 1px #dde0e3;
  font-family: HelveticaNeue;
  font-size: 14px;
  font-weight: normal;
  font-style: normal;
  font-stretch: normal;
  line-height: normal;
  letter-spacing: normal;
  text-align: left;
}

.LoginPage .LoginForm .Input::placeholder{
  color: #636363;
  opacity: 0.3;
}

.LoginPage .LoginForm .Input::-webkit-input-placeholder{
  color: #636363;
  opacity: 0.3;
}

.LoginPage .LoginForm .Input::-ms-input-placeholder {
  color: #636363;
  opacity: 0.3;
}

.LoginPage .LoginForm .Input::-moz-placeholder{
  color: #636363;
  opacity: 0.3;
}

.LoginPage .LoginForm .Submit {
  width: 215px;
  height: 32px;
  border-radius: 4.3px;
  background-color: #3BB6D1;
  font-family: PingFangHK-Regular, Helvetica, Arial, sans-serif;
  font-size: 14px;
  font-weight: normal;
  font-style: normal;
  font-stretch: normal;
  line-height: 1;
  letter-spacing: normal;
  text-align: center;
  color: white;
  border-width: 0px;
  border: none;
}

.LoginPage .LoginForm .Error {
  margin-top: 4px;
  margin-bottom: 10px;
  width: 219px;
  /*height: 10px;*/
  font-family: PingFangHK-Regular, Helvetica, Arial, sans-serif;
  font-size: 10px;
  font-weight: normal;
  font-style: normal;
  font-stretch: normal;
  line-height: 1;
  letter-spacing: normal;
  text-align: left;
  color: red;
}

.LoginPage .LoginForm .BottomText {
  cursor: pointer;
  margin-top: 15px;
  width: 215px;
  height: 10px;
  display: flex;
  flex-direction: column;
  justify-content: flex-start;
  align-items: center;
}

.LoginPage .LoginForm .BottomText p {
  height: 10px;
  font-family: PingFangHK-Regular, Helvetica, Arial, sans-serif;
  font-size: 10px;
  font-weight: 500;
  font-style: normal;
  font-stretch: normal;
  line-height: 1;
  letter-spacing: normal;
  text-align: center;
  color: #3BB6D1;
  text-decoration: underline;
}

.LoginPage .LoginForm .Options {
  cursor: pointer;
  display: flex;
  flex-direction: row;
  justify-content: flex-start;
}

.LoginPage .LoginForm .Options p {
  color: #636363;
  height: 10px;
  font-family: PingFangHK-Regular, Helvetica, Arial, sans-serif;
  font-size: 10px;
  font-weight: normal;
  font-style: normal;
  font-stretch: normal;
  line-height: 1;
  letter-spacing: normal;
  text-align: left;
  margin-right: 5px;
}

.LoginIconId {
  width: 20px;
  height: 20px;
  margin-right: 5px;
  -webkit-background-size: cover; /* For WebKit*/
  -moz-background-size: cover; /* Mozilla*/
  -o-background-size: cover; /* Opera*/
  background-size: contain;
  background-position: center;
  background-repeat: no-repeat;
  background-image: url('../img/phase3/user_normal.png');
}

.LoginIconMail {
  width: 20px;
  height: 20px;
  margin-right: 5px;
  -webkit-background-size: cover; /* For WebKit*/
  -moz-background-size: cover; /* Mozilla*/
  -o-background-size: cover; /* Opera*/
  background-size: contain;
  background-position: center;
  background-repeat: no-repeat;
  background-image: url('../img/phase3/email_normal.png');
}

.LoginIconPwd {
  width: 20px;
  height: 20px;
  margin-right: 5px;
  -webkit-background-size: cover; /* For WebKit*/
  -moz-background-size: cover; /* Mozilla*/
  -o-background-size: cover; /* Opera*/
  background-size: contain;
  background-position: center;
  background-repeat: no-repeat;
  background-image: url('../img/phase3/privacy.png');
}

.TouchPage {
  z-index: 1;
  position: absolute;
  top: 0px;
  left: 0px;
  min-width: 1100px;
  min-height: 700px;
  height: 100vh;
  width: 100%;
  background-color: #77777777;
}

.MainPage {
  position: absolute;
  top: 0px;
  left: 0px;
  min-width: 1100px;
  min-height: 700px;
  height: 100vh;
  width: 100%;
  background-color: #F5F4F4;
}

.MainPage .BottomPart {
  height: -webkit-calc(100% - 70px);
  height: -moz-calc(100% - 70px);
  height: calc(100% - 70px);
  width: 100%;
  min-width: 1000px;
  overflow-x: auto;
  -webkit-background-size: cover; /* For WebKit*/
  -moz-background-size: cover; /* Mozilla*/
  -o-background-size: cover; /* Opera*/
  background-size: contain;
  background-position: center;
  background-repeat: no-repeat;
  display: flex;
  flex-direction: row;
  justify-content: flex-start;
}

.MainPage .UpperPart[classtype=super_admin] {
  width: 100%;
  height: 64px;
  background: linear-gradient(166.03deg, #12C2E9 -52.18%, #2D6DE9 117.89%);
}

.MainPage .UpperPart[classtype=iMonitor] {
  width: 100%;
  height: 64px;
  background: linear-gradient(176.44deg, #FFDF37 -106.82%, #FF5621 182.21%);
}

.MainPage .UpperPart[classtype=iAccess] {
  width: 100%;
  height: 64px;
  background: linear-gradient(211.76deg, #90FC8E -38.96%, #11A49B 100.89%);
}

.MainPage .BottomPart .MainPart {
  overflow-x: auto;
  width: 100%;
  height: 100%;
}
.MainPage .BottomPart .MainMenu {
  overflow-y: auto;
  overflow-x: hidden;
  list-style-type: none;
  width: 280px;
  padding-bottom: 24px;
  background-color: #ffffff;
  height: 100%;
  border-top: 0;
}
.MainPage .BottomPart .MainMenu .ProjectName {
  height: 76px;
  padding-top: 24px;
  padding-left: 16px;
  padding-right: 24px;
  padding-bottom: 15px;
  font-family: PingFangHK-Regular, Helvetica, Arial, sans-serif;
  font-size: 20px;
  font-weight: 600;
  font-style: normal;
  font-stretch: normal;
  line-height: 1;
  letter-spacing: normal;
  text-align: left;
  color: #636363;
  background: linear-gradient(0deg, #F7F7F7, #F7F7F7);
}

.MainPage .BottomPart .MainMenu .SubTitle {
  margin: 16px;
  margin-top: 24px;
  font-family: PingFangHK-Regular, Helvetica, Arial, sans-serif;
  font-size: 16px;
  font-weight: 600;
  font-style: normal;
  font-stretch: normal;
  line-height: 1;
  letter-spacing: normal;
  text-align: left;
  color: #636363;
}

.MainPage .BottomPart .MainMenu .Divide {
  background-color: #ccc;
  height: 1px;
  width: 100%;
}

.MainPage .BottomPart .MainMenu .SubDivide {
  background-color: #ececec;
  height: 1px;
  width: 100%;
}

.MainPage .BottomPart .MainMenu .SelectedItem{
  cursor: pointer;
  padding-left: 32px;
  height: 50px;
  text-decoration: none;
  display: flex;
  flex-direction: row;
  justify-content: flex-start;
  align-items: center;
  background-color: #f5f5f5;
  color: #389BFF;
}

.MainPage .BottomPart .MainMenu .SelectedItem[classtype=iMonitor]{
  cursor: pointer;
  padding-left: 32px;
  height: 50px;
  text-decoration: none;
  display: flex;
  flex-direction: row;
  justify-content: flex-start;
  align-items: center;
  background-color: #f5f5f5;
  color: #FF9100;
}

.MainPage .BottomPart .MainMenu .SelectedItem[classtype=iAccess]{
  cursor: pointer;
  padding-left: 32px;
  height: 50px;
  text-decoration: none;
  display: flex;
  flex-direction: row;
  justify-content: flex-start;
  align-items: center;
  background-color: #f5f5f5;
  color:#00BFA5;
}

.MainPage .BottomPart .MainMenu .SelectedItem p{
  cursor: pointer;
  margin: auto 0;
  font-family: PingFangHK-Regular, Helvetica, Arial, sans-serif;
  font-size: 14px;
  font-weight: 600;
  font-style: normal;
  font-stretch: normal;
  line-height: 1;
  letter-spacing: normal;
  text-align: left;
}

.MainPage .BottomPart .MainMenu .SelectedSubItem {
  cursor: pointer;
  padding-left: 67px;
  height: 50px;
  text-decoration: none;
  display: flex;
  flex-direction: row;
  justify-content: flex-start;
  align-items: center;
  background-color: #f5f5f5;
  color: #389BFF;
}

.MainPage .BottomPart .MainMenu .SelectedSubItem[classtype=iMonitor] {
  cursor: pointer;
  padding-left: 67px;
  height: 50px;
  text-decoration: none;
  display: flex;
  flex-direction: row;
  justify-content: flex-start;
  align-items: center;
  background-color: #f5f5f5;
  color: #FF9100;
}

.MainPage .BottomPart .MainMenu .SelectedSubItem[classtype=iAccess] {
  cursor: pointer;
  padding-left: 67px;
  height: 50px;
  text-decoration: none;
  display: flex;
  flex-direction: row;
  justify-content: flex-start;
  align-items: center;
  background-color: #f5f5f5;
  color:#00BFA5;
}

.MainPage .BottomPart .MainMenu .SelectedSubItem p {
  cursor: pointer;
  margin: auto 0;
  font-family: PingFangHK-Regular, Helvetica, Arial, sans-serif;
  font-size: 14px;
  font-weight: 600;
  font-style: normal;
  font-stretch: normal;
  line-height: 1;
  letter-spacing: normal;
  text-align: left;
}


.MainPage .BottomPart .MainMenu .Item {
  cursor: pointer;
  padding-left: 32px;
  height: 50px;
  text-decoration: none;
  display: flex;
  flex-direction: row;
  justify-content: flex-start;
  align-items: center;
  background-color: #ffffff;
  transition-duration: 0.3s;
}

.MainPage .BottomPart .MainMenu .Item:hover {
  background-color: #f2f2f2;
}

.MainPage .BottomPart .MainMenu .Item p {
  cursor: pointer;
  margin: auto 0;
  font-family: PingFangHK-Regular, Helvetica, Arial, sans-serif;
  font-size: 14px;
  font-weight: normal;
  font-style: normal;
  font-stretch: normal;
  line-height: 1;
  letter-spacing: normal;
  text-align: left;
  color: #A2A2A2;
}

.MainPage .BottomPart .MainMenu .SubItem {
  cursor: pointer;
  padding-left: 67px;
  height: 50px;
  text-decoration: none;
  display: flex;
  flex-direction: row;
  justify-content: flex-start;
  align-items: center;
  background-color: #ffffff;
  transition-duration: 0.3s;
}

.MainPage .BottomPart .MainMenu .SubItem:hover {
  background-color: #f2f2f2;
}

.MainPage .BottomPart .MainMenu .SubItem p {
  cursor: pointer;
  margin: auto 0;
  font-family: PingFangHK-Regular, Helvetica, Arial, sans-serif;
  font-size: 14px;
  font-weight: normal;
  font-style: normal;
  font-stretch: normal;
  line-height: 1;
  letter-spacing: normal;
  text-align: left;
  color: #A2A2A2;
}

.MainPage .BottomPart .MainMenu .Item .CloudMenuImage {
  width: 20px;
  height: 18px;
  margin-right: 15px;
  -webkit-background-size: cover; /* For WebKit*/
  -moz-background-size: cover; /* Mozilla*/
  -o-background-size: cover; /* Opera*/
  background-size: contain;
  background-position: center;
  background-repeat: no-repeat;
  background-image: url('../img/phase3/dashboard.png');
}

.MainPage .BottomPart .MainMenu .SelectedItem .CloudMenuImage {
  width: 20px;
  height: 18px;
  margin-right: 15px;
  -webkit-background-size: cover; /* For WebKit*/
  -moz-background-size: cover; /* Mozilla*/
  -o-background-size: cover; /* Opera*/
  background-size: contain;
  background-position: center;
  background-repeat: no-repeat;
  background-image: url('../img/phase3/dashboard_imonitor.png');
}

.MainPage .BottomPart .MainMenu .Item .CloudManageMenuImage {
  width: 20px;
  height: 18px;
  margin-right: 15px;
  -webkit-background-size: cover; /* For WebKit*/
  -moz-background-size: cover; /* Mozilla*/
  -o-background-size: cover; /* Opera*/
  background-size: contain;
  background-position: center;
  background-repeat: no-repeat;
  background-image: url('../img/phase3/group_normal.png');
}

.MainPage .BottomPart .MainMenu .Item .P2PManageMenuImage {
  width: 20px;
  height: 18px;
  margin-right: 15px;
  -webkit-background-size: cover; /* For WebKit*/
  -moz-background-size: cover; /* Mozilla*/
  -o-background-size: cover; /* Opera*/
  background-size: contain;
  background-position: center;
  background-repeat: no-repeat;
  background-image: url('../img/phase3/group_normal.png');
}

.MainPage .BottomPart .MainMenu .SelectedItem .CloudManageMenuImage {
  width: 20px;
  height: 18px;
  margin-right: 15px;
  -webkit-background-size: cover; /* For WebKit*/
  -moz-background-size: cover; /* Mozilla*/
  -o-background-size: cover; /* Opera*/
  background-size: contain;
  background-position: center;
  background-repeat: no-repeat;
  background-image: url('../img/phase3/group_imonitor.png');
}

.MainPage .BottomPart .MainMenu .SelectedItem .P2PManageMenuImage {
  width: 20px;
  height: 18px;
  margin-right: 15px;
  -webkit-background-size: cover; /* For WebKit*/
  -moz-background-size: cover; /* Mozilla*/
  -o-background-size: cover; /* Opera*/
  background-size: contain;
  background-position: center;
  background-repeat: no-repeat;
  background-image: url('../img/phase3/group_iaccess.png');
}

.MainPage .BottomPart .MainMenu .Item .CloudImage {
  width: 20px;
  height: 15px;
  margin-right: 15px;
  -webkit-background-size: cover; /* For WebKit*/
  -moz-background-size: cover; /* Mozilla*/
  -o-background-size: cover; /* Opera*/
  background-size: contain;
  background-position: center;
  background-repeat: no-repeat;
  background-image: url('../img/sidebar/user_admin - user_cloud/cloud.png');
}
.MainPage .BottomPart .MainMenu .SelectedItem .CloudImage {
  width: 20px;
  height: 15px;
  margin-right: 15px;
  -webkit-background-size: cover; /* For WebKit*/
  -moz-background-size: cover; /* Mozilla*/
  -o-background-size: cover; /* Opera*/
  background-size: contain;
  background-position: center;
  background-repeat: no-repeat;
  background-image: url('../img/sidebar/user_admin - user_cloud/cloud_active.png');
}

.MainPage .BottomPart .MainMenu .Item .P2PImage {
  width: 20px;
  height: 18px;
  margin-right: 15px;
  -webkit-background-size: cover; /* For WebKit*/
  -moz-background-size: cover; /* Mozilla*/
  -o-background-size: cover; /* Opera*/
  background-size: contain;
  background-position: center;
  background-repeat: no-repeat;
  background-image: url('../img/phase3/dashboard.png');
}
.MainPage .BottomPart .MainMenu .SelectedItem .P2PImage[classtype=iMonitor] {
  width: 20px;
  height: 18px;
  margin-right: 15px;
  -webkit-background-size: cover; /* For WebKit*/
  -moz-background-size: cover; /* Mozilla*/
  -o-background-size: cover; /* Opera*/
  background-size: contain;
  background-position: center;
  background-repeat: no-repeat;
  background-image: url('../img/phase3/dashboard_imonitor.png');
}
.MainPage .BottomPart .MainMenu .SelectedItem .P2PImage[classtype=iAccess] {
  width: 20px;
  height: 18px;
  margin-right: 15px;
  -webkit-background-size: cover; /* For WebKit*/
  -moz-background-size: cover; /* Mozilla*/
  -o-background-size: cover; /* Opera*/
  background-size: contain;
  background-position: center;
  background-repeat: no-repeat;
  background-image: url('../img/phase3/dashboard_iaccess.png');
}

.MainPage .BottomPart .MainMenu .Item .LocationImage{
  width: 20px;
  height: 18px;
  margin-right: 15px;
  -webkit-background-size: cover; /* For WebKit*/
  -moz-background-size: cover; /* Mozilla*/
  -o-background-size: cover; /* Opera*/
  background-size: contain;
  background-position: center;
  background-repeat: no-repeat;
  background-image: url('../img/phase3/location_normal.png');
}
.MainPage .BottomPart .MainMenu .SelectedItem .LocationImage[classtype=iMonitor] {
  width: 20px;
  height: 18px;
  margin-right: 15px;
  -webkit-background-size: cover; /* For WebKit*/
  -moz-background-size: cover; /* Mozilla*/
  -o-background-size: cover; /* Opera*/
  background-size: contain;
  background-position: center;
  background-repeat: no-repeat;
  background-image: url('../img/phase3/location_imonitor.png');
  color: #FF9100;
}
.MainPage .BottomPart .MainMenu .SelectedItem .LocationImage[classtype=iAccess] {
  width: 20px;
  height: 18px;
  margin-right: 15px;
  -webkit-background-size: cover; /* For WebKit*/
  -moz-background-size: cover; /* Mozilla*/
  -o-background-size: cover; /* Opera*/
  background-size: contain;
  background-position: center;
  background-repeat: no-repeat;
  background-image: url('../img/phase3/location_iaccess.png');
  color: #00BFA5;
}


.MainPage .BottomPart .MainMenu .Item .DashboardImage{
  width: 20px;
  height: 18px;
  margin-right: 15px;
  -webkit-background-size: cover; /* For WebKit*/
  -moz-background-size: cover; /* Mozilla*/
  -o-background-size: cover; /* Opera*/
  background-size: contain;
  background-position: center;
  background-repeat: no-repeat;
  background-image: url('../img/phase4/dashboard_normal.png');
}
.MainPage .BottomPart .MainMenu .SelectedItem .DashboardImage[classtype=iMonitor] {
  width: 20px;
  height: 18px;
  margin-right: 15px;
  -webkit-background-size: cover; /* For WebKit*/
  -moz-background-size: cover; /* Mozilla*/
  -o-background-size: cover; /* Opera*/
  background-size: contain;
  background-position: center;
  background-repeat: no-repeat;
  background-image: url('../img/phase4/dashboard_imonitor.png');
  color: #FF9100;
}
.MainPage .BottomPart .MainMenu .SelectedItem .DashboardImage[classtype=iAccess] {
  width: 20px;
  height: 18px;
  margin-right: 15px;
  -webkit-background-size: cover; /* For WebKit*/
  -moz-background-size: cover; /* Mozilla*/
  -o-background-size: cover; /* Opera*/
  background-size: contain;
  background-position: center;
  background-repeat: no-repeat;
  background-image: url('../img/phase4/dashboard_iaccess.png');
  color: #00BFA5;
}


.MainPage .BottomPart .MainMenu .Item .SettingImage {
  width: 20px;
  height: 23px;
  margin-right: 15px;
  -webkit-background-size: cover; /* For WebKit*/
  -moz-background-size: cover; /* Mozilla*/
  -o-background-size: cover; /* Opera*/
  background-size: contain;
  background-position: center;
  background-repeat: no-repeat;
  background-image: url('../img/phase3/setting_normal.png');
}
.MainPage .BottomPart .MainMenu .SelectedItem .SettingImage {
  width: 20px;
  height: 23px;
  margin-right: 15px;
  -webkit-background-size: cover; /* For WebKit*/
  -moz-background-size: cover; /* Mozilla*/
  -o-background-size: cover; /* Opera*/
  background-size: contain;
  background-position: center;
  background-repeat: no-repeat;
  background-image: url('../img/phase3/setting_super.png');
}


.MainPage .BottomPart .MainMenu .Item .MemberImage {
  width: 20px;
  height: 23px;
  margin-right: 15px;
  -webkit-background-size: cover; /* For WebKit*/
  -moz-background-size: cover; /* Mozilla*/
  -o-background-size: cover; /* Opera*/
  background-size: contain;
  background-position: center;
  background-repeat: no-repeat;
  background-image: url('../img/phase3/dashboard_normal.png');
}
.MainPage .BottomPart .MainMenu .SelectedItem .MemberImage {
  width: 20px;
  height: 23px;
  margin-right: 15px;
  -webkit-background-size: cover; /* For WebKit*/
  -moz-background-size: cover; /* Mozilla*/
  -o-background-size: cover; /* Opera*/
  background-size: contain;
  background-position: center;
  background-repeat: no-repeat;
  background-image: url('../img/phase3/dashboard_super.png');
}

.MainPage .BottomPart .MainMenu .Item .ProjectImage {
  width: 20px;
  height: 23px;
  margin-right: 15px;
  -webkit-background-size: cover; /* For WebKit*/
  -moz-background-size: cover; /* Mozilla*/
  -o-background-size: cover; /* Opera*/
  background-size: contain;
  background-position: center;
  background-repeat: no-repeat;
  background-image: url('../img/phase3/user_normal.png');
}
.MainPage .BottomPart .MainMenu .SelectedItem .ProjectImage {
  width: 20px;
  height: 23px;
  margin-right: 15px;
  -webkit-background-size: cover; /* For WebKit*/
  -moz-background-size: cover; /* Mozilla*/
  -o-background-size: cover; /* Opera*/
  background-size: contain;
  background-position: center;
  background-repeat: no-repeat;
  background-image: url('../img/phase3/user_super.png');
}

.MainPage .BottomPart .MainMenu .Item .NotificationMenuImage {
  width: 20px;
  height: 23px;
  margin-right: 15px;
  -webkit-background-size: cover; /* For WebKit*/
  -moz-background-size: cover; /* Mozilla*/
  -o-background-size: cover; /* Opera*/
  background-size: contain;
  background-position: center;
  background-repeat: no-repeat;
  background-image: url('../img/phase3/notification_normal.png');
}
.MainPage .BottomPart .MainMenu .SelectedItem .NotificationMenuImage {
  width: 20px;
  height: 23px;
  margin-right: 15px;
  -webkit-background-size: cover; /* For WebKit*/
  -moz-background-size: cover; /* Mozilla*/
  -o-background-size: cover; /* Opera*/
  background-size: contain;
  background-position: center;
  background-repeat: no-repeat;
  background-image: url('../img/phase3/notification_super.png');
}

.MainPage .BottomPart .MainMenu .Item .AgentImage {
  width: 20px;
  height: 23px;
  margin-right: 15px;
  -webkit-background-size: cover; /* For WebKit*/
  -moz-background-size: cover; /* Mozilla*/
  -o-background-size: cover; /* Opera*/
  background-size: contain;
  background-position: center;
  background-repeat: no-repeat;
  background-image: url('../img/phase3/files_normal.png');
}
.MainPage .BottomPart .MainMenu .SelectedItem .AgentImage {
  width: 20px;
  height: 23px;
  margin-right: 15px;
  -webkit-background-size: cover; /* For WebKit*/
  -moz-background-size: cover; /* Mozilla*/
  -o-background-size: cover; /* Opera*/
  background-size: contain;
  background-position: center;
  background-repeat: no-repeat;
  background-image: url('../img/phase3/files_super.png');
}

.MainPage .BottomPart .MainMenu .SelectedItem .DeviceImage {
  width: 20px;
  height: 23px;
  margin-right: 15px;
  -webkit-background-size: cover; /* For WebKit*/
  -moz-background-size: cover; /* Mozilla*/
  -o-background-size: cover; /* Opera*/
  background-size: contain;
  background-position: center;
  background-repeat: no-repeat;
  background-image: url('../img/phase3/device_super.png');
}

.MainPage .BottomPart .MainMenu .Item .UserImage {
  width: 20px;
  height: 23px;
  margin-right: 15px;
  -webkit-background-size: cover; /* For WebKit*/
  -moz-background-size: cover; /* Mozilla*/
  -o-background-size: cover; /* Opera*/
  background-size: contain;
  background-position: center;
  background-repeat: no-repeat;
  background-image: url('../img/phase3/user_normal.png');
}
.MainPage .BottomPart .MainMenu .SelectedItem .UserImage[classtype=iMonitor] {
  width: 20px;
  height: 23px;
  margin-right: 15px;
  -webkit-background-size: cover; /* For WebKit*/
  -moz-background-size: cover; /* Mozilla*/
  -o-background-size: cover; /* Opera*/
  background-size: contain;
  background-position: center;
  background-repeat: no-repeat;
  background-image: url('../img/phase3/user_imonitor.png');
}
.MainPage .BottomPart .MainMenu .SelectedItem .UserImage[classtype=iAccess] {
  width: 20px;
  height: 23px;
  margin-right: 15px;
  -webkit-background-size: cover; /* For WebKit*/
  -moz-background-size: cover; /* Mozilla*/
  -o-background-size: cover; /* Opera*/
  background-size: contain;
  background-position: center;
  background-repeat: no-repeat;
  background-image: url('../img/phase3/user_iaccess.png');
}

.MainPage .BottomPart .MainMenu .Item .CloudManageImage {
  width: 20px;
  height: 15px;
  margin-right: 15px;
  -webkit-background-size: cover; /* For WebKit*/
  -moz-background-size: cover; /* Mozilla*/
  -o-background-size: cover; /* Opera*/
  background-size: contain;
  background-position: center;
  background-repeat: no-repeat;
  background-image: url('../img/sidebar/user_admin - user_cloud/cloud_manage.png');
}
.MainPage .BottomPart .MainMenu .SelectedItem .CloudManageImage {
  width: 20px;
  height: 15px;
  margin-right: 15px;
  -webkit-background-size: cover; /* For WebKit*/
  -moz-background-size: cover; /* Mozilla*/
  -o-background-size: cover; /* Opera*/
  background-size: contain;
  background-position: center;
  background-repeat: no-repeat;
  background-image: url('../img/sidebar/user_admin - user_cloud/cloud_manage_active.png');
}

.MainPage .BottomPart .MainMenu .Item .DeviceImage {
  width: 20px;
  height: 23px;
  margin-right: 15px;
  -webkit-background-size: cover; /* For WebKit*/
  -moz-background-size: cover; /* Mozilla*/
  -o-background-size: cover; /* Opera*/
  background-size: contain;
  background-position: center;
  background-repeat: no-repeat;
  background-image: url('../img/phase3/device_normal.png');
}
.MainPage .BottomPart .MainMenu .SelectedItem .DeviceImage[classtype=iMonitor] {
  width: 20px;
  height: 20px;
  margin-right: 15px;
  -webkit-background-size: cover; /* For WebKit*/
  -moz-background-size: cover; /* Mozilla*/
  -o-background-size: cover; /* Opera*/
  background-size: contain;
  background-position: center;
  background-repeat: no-repeat;
  background-image: url('../img/phase3/device_imonitor.png');
}
.MainPage .BottomPart .MainMenu .SelectedItem .DeviceImage[classtype=iAccess] {
  width: 20px;
  height: 20px;
  margin-right: 15px;
  -webkit-background-size: cover; /* For WebKit*/
  -moz-background-size: cover; /* Mozilla*/
  -o-background-size: cover; /* Opera*/
  background-size: contain;
  background-position: center;
  background-repeat: no-repeat;
  background-image: url('../img/phase3/device_iaccess.png');
}


.MainPage .BottomPart .MainMenu .Item .ConnectLogImage {
  width: 20px;
  height: 20px;
  margin-right: 15px;
  -webkit-background-size: cover; /* For WebKit*/
  -moz-background-size: cover; /* Mozilla*/
  -o-background-size: cover; /* Opera*/
  background-size: contain;
  background-position: center;
  background-repeat: no-repeat;
  background-image: url('../img/phase4/connect_log_normal.png');
}


.MainPage .BottomPart .MainMenu .SelectedItem .ConnectLogImage {
  width: 20px;
  height: 20px;
  margin-right: 15px;
  -webkit-background-size: cover; /* For WebKit*/
  -moz-background-size: cover; /* Mozilla*/
  -o-background-size: cover; /* Opera*/
  background-size: contain;
  background-position: center;
  background-repeat: no-repeat;
  background-image: url('../img/phase4/connect_log.png');
}

.MainPage .BottomPart .MainMenu .Item .P2PManageImage {
  width: 20px;
  height: 18px;
  margin-right: 15px;
  -webkit-background-size: cover; /* For WebKit*/
  -moz-background-size: cover; /* Mozilla*/
  -o-background-size: cover; /* Opera*/
  background-size: contain;
  background-position: center;
  background-repeat: no-repeat;
  background-image: url('../img/phase3/group_normal.png');
}
.MainPage .BottomPart .MainMenu .SelectedItem .P2PManageImage[classtype=iMonitor] {
  width: 20px;
  height: 18px;
  margin-right: 15px;
  -webkit-background-size: cover; /* For WebKit*/
  -moz-background-size: cover; /* Mozilla*/
  -o-background-size: cover; /* Opera*/
  background-size: contain;
  background-position: center;
  background-repeat: no-repeat;
  background-image: url('../img/phase3/group_imonitor.png');
}
.MainPage .BottomPart .MainMenu .SelectedItem .P2PManageImage[classtype=iAccess] {
  width: 20px;
  height: 18px;
  margin-right: 15px;
  -webkit-background-size: cover; /* For WebKit*/
  -moz-background-size: cover; /* Mozilla*/
  -o-background-size: cover; /* Opera*/
  background-size: contain;
  background-position: center;
  background-repeat: no-repeat;
  background-image: url('../img/phase3/group_iaccess.png');
}

.MainPage .BottomPart .MainMenu .Item .ResourceImage {
  width: 20px;
  height: 18px;
  margin-right: 15px;
  -webkit-background-size: cover; /* For WebKit*/
  -moz-background-size: cover; /* Mozilla*/
  -o-background-size: cover; /* Opera*/
  background-size: contain;
  background-position: center;
  background-repeat: no-repeat;
  background-image: url('../img/phase3/resource_normal.png');
}

.MainPage .BottomPart .MainMenu .SelectedItem .ResourceImage[classtype=iMonitor] {
  width: 20px;
  height: 24px;
  margin-right: 15px;
  -webkit-background-size: cover; /* For WebKit*/
  -moz-background-size: cover; /* Mozilla*/
  -o-background-size: cover; /* Opera*/
  background-size: contain;
  background-position: center;
  background-repeat: no-repeat;
  background-image: url('../img/phase3/resource_imonitor.png');
}

.MainPage .BottomPart .MainMenu .SelectedItem .ResourceImage[classtype=iAccess] {
  width: 20px;
  height: 24px;
  margin-right: 15px;
  -webkit-background-size: cover; /* For WebKit*/
  -moz-background-size: cover; /* Mozilla*/
  -o-background-size: cover; /* Opera*/
  background-size: contain;
  background-position: center;
  background-repeat: no-repeat;
  background-image: url('../img/phase3/resource_iaccess.png');
}

.LocationSubpage {
  height: 100%;
  background-color: #f8faff;
  width: 100%;
  -webkit-background-size: cover; /* For WebKit*/
  -moz-background-size: cover; /* Mozilla*/
  -o-background-size: cover; /* Opera*/
  background-size: contain;
  background-position: center;
  background-repeat: no-repeat;
  display: flex;
  flex-direction: column;
  justify-content: center;
  color: black;
}
.Nopage {
  padding: 24px 24px 24px 24px;
  height: 100%;
  background-color: #f8faff;
  width: 100%;
  font-size:40px;
  -webkit-background-size: cover; /* For WebKit*/
  -moz-background-size: cover; /* Mozilla*/
  -o-background-size: cover; /* Opera*/
  background-size: contain;
  background-position: center;
  background-repeat: no-repeat;
  display: flex;
  flex-direction: column;
  align-items:center;
  justify-content: center;
}

.Subpage {
  padding: 12px 24px 24px 10px;
  background-color: #F5F4F4;
  width: 100%;
  height:100%;
  -webkit-background-size: cover; /* For WebKit*/
  -moz-background-size: cover; /* Mozilla*/
  -o-background-size: cover; /* Opera*/
  background-size: contain;
  background-position: center;
  background-repeat: no-repeat;
  display: flex;
  flex-direction: column;
  justify-content: flex-start;
}
.Subpage.hide {
  display: none;
}

.Subpage .Head {
  margin-top: 15px;
  margin-bottom: 15px;
  font-family: Noto Sans TC;
  font-style: normal;
  font-weight: 500;
  font-size: 20px;
  font-stretch: normal;
  line-height: 1.33;
  letter-spacing: normal;
  text-align: left;
  color: #4a4a4a;
}

.Subpage .Head .sep {
  margin: 0 8px;
  font-size: 20px;
  color: #8A8A8A;
}

.Subpage .Head .subTitle {
  font-size: 20px;
}

.Subpage .Boarder {
  height: 400px;
  width: 100%;
  border: solid 1px #e8e8e8;
  background-color: #ffffff;
  margin-bottom: 40px;
  overflow-y: auto;
}

.Subpage .Content {
  width: 100%;
  /*border: solid 1px #e8e8e8;*/
  display: flex;
  flex-direction: column;
  justify-content: flex-start;
  background-color: #ffffff;
  box-shadow: 0px 12px 26px rgba(16, 30, 115, 0.06);
  border-radius: 8px;
  height: 100%;
  overflow: auto;
}

.Subpage .SubtitleContainer {
  height: 180px;
  padding-top: 10px;
  display: flex;
  flex-direction: row;
  justify-content: flex-start;
  align-items: center;
}

.Subpage .SubtitleContainer .Text {
  margin-left: 5px;
  height: 24px;
  font-family: PingFangHK-Regular, Helvetica, Arial, sans-serif;
  font-size: 24px;
  font-weight: 500;
  font-style: normal;
  font-stretch: normal;
  line-height: 1;
  letter-spacing: normal;
  text-align: left;
  color: #57595c;
}

.Subpage .SubtitleContainer .Button {
  cursor: pointer;
  width: 64px;
  height: 26px;
  border-radius: 4.3px;
  border: solid 1px #389bff;
  background-color: #ffffff;
  color: #389bff;
  margin: auto 0;
  padding-top: 7px;
  font-family: PingFangHK-Regular, Helvetica, Arial, sans-serif;
  font-size: 12px;
  font-weight: normal;
  font-style: normal;
  font-stretch: normal;
  line-height: 1;
  letter-spacing: normal;
  text-align: center;
}

.Subpage .TabContainer {
  height: 48px;
  min-height: 48px;
  width: 100%;
  display: flex;
  flex-direction: row;
  justify-content: flex-start;
  margin-bottom:12px;
  align-items: center;
}

.Subpage .Tabs {
  height: 48px;
  min-height: 48px;
  margin-right: 48px;
  display: flex;
  flex-direction: row;
  justify-content: flex-start;
  align-items: flex-start;
}

.Subpage .Tabs > div:last-child {
  border-right: solid 1px #e8e8e8;
}
.Subpage .SelectedTab[classtype=iMonitor] {
  background: linear-gradient(257.87deg, #FFDF37 -26.83%, #FF5621 124.1%);
  box-shadow: 0px 12px 26px rgba(16, 30, 115, 0.06);
  border-radius: 5px;
  border-top: solid 1px #e8e8e8;
  border-left: solid 1px #e8e8e8;
  cursor: pointer;
  width: 115px;
  height: 48px;
  font-family: PingFangHK-Regular, Helvetica, Arial, sans-serif;
  font-size: 12px;
  font-weight: 500;
  font-style: normal;
  font-stretch: normal;
  line-height: 1.33;
  letter-spacing: normal;
  text-align: center;
  display: flex;
  flex-direction: row;
  justify-content: center;
  align-items: center;
  color: #FFFFFF;
  margin: 0px 6px;
}

.Subpage .SelectedTab[classtype=iAccess] {
  background: linear-gradient(211.76deg, #90FC8E -38.96%, #11A49B 100.89%);
  box-shadow: 0px 12px 26px rgba(16, 30, 115, 0.06);
  border-radius: 5px;
  border-top: solid 1px #e8e8e8;
  border-left: solid 1px #e8e8e8;
  cursor: pointer;
  width: 115px;
  height: 48px;
  font-family: PingFangHK-Regular, Helvetica, Arial, sans-serif;
  font-size: 12px;
  font-weight: 500;
  font-style: normal;
  font-stretch: normal;
  line-height: 1.33;
  letter-spacing: normal;
  text-align: center;
  display: flex;
  flex-direction: row;
  justify-content: center;
  align-items: center;
  color: #FFFFFF;
  margin: 0px 6px;
}

.Subpage .Tab {
  cursor: pointer;
  background: #FFFFFF;
  border: 1px solid #FFFFFF;
  box-shadow: 0px 12px 26px rgba(16, 30, 115, 0.06);
  border-radius: 5px;
  width: 114px;
  height: 48px;
  font-family: PingFangHK-Regular, Helvetica, Arial, sans-serif;
  font-size: 12px;
  font-weight: 500;
  font-style: normal;
  font-stretch: normal;
  line-height: 1.33;
  letter-spacing: normal;
  text-align: center;
  display: flex;
  flex-direction: row;
  justify-content: center;
  align-items: center;
  color: #535353;
  transition-duration: 0.3s;
  margin: 0px 6px;
}
/*.Subpage .Tab:hover {
  background-color: #ffffff;
  border-bottom: solid 4px #389bff;
}*/

.Subpage .PageNums {
  height: 30px;
  width: 100%;
  margin-top: 24px;
  margin-bottom: 20px;
  display: flex;
  flex-direction: row;
  justify-content: center;
}

.Subpage .PageNums .Item {
  padding-top: 2px;
  width: 28px;
  height: 28px;
  border-radius: 2.8px;
  border: solid 0.9px #c7cdd9;
  text-align: center;
  color: #c7cdd9;
}

.Subpage .PageNums .SelectedItem {
  cursor: pointer;
  padding-top: 2px;
  width: 28px;
  height: 28px;
  border-radius: 2.8px;
  background-color: #389bff;
  text-align: center;
  color: white;
}

.Subpage .PageNums .Middle {
  width: 20px;
  padding-top: 5px;
  height: 24px;
  font-family: HelveticaNeue;
  font-size: 14px;
  font-weight: normal;
  font-style: normal;
  font-stretch: normal;
  line-height: normal;
  letter-spacing: normal;
  text-align: center;
  color: #c7cdd9;
}

.P2PSubpage {
  height: 100%;
  background-color: #f8faff;
  width: 100%;
  -webkit-background-size: cover; /* For WebKit*/
  -moz-background-size: cover; /* Mozilla*/
  -o-background-size: cover; /* Opera*/
  background-size: contain;
  background-position: center;
  background-repeat: no-repeat;
  display: flex;
  flex-direction: column;
  justify-content: center;
  color: black;
}

.P2PManageSubpage {
  height: 100%;
  background-color: #f8faff;
  width: 100%;
  -webkit-background-size: cover; /* For WebKit*/
  -moz-background-size: cover; /* Mozilla*/
  -o-background-size: cover; /* Opera*/
  background-size: contain;
  background-position: center;
  background-repeat: no-repeat;
  display: flex;
  flex-direction: column;
  justify-content: center;
  color: black;
}

.CloudManageSubpage {
  height: 100%;
  background-color: #f8faff;
  width: 100%;
  -webkit-background-size: cover; /* For WebKit*/
  -moz-background-size: cover; /* Mozilla*/
  -o-background-size: cover; /* Opera*/
  background-size: contain;
  background-position: center;
  background-repeat: no-repeat;
  display: flex;
  flex-direction: column;
  justify-content: center;
  color: black;
}

.UserSubpage {
  height: 100%;
  background-color: #f8faff;
  width: 100%;
  -webkit-background-size: cover; /* For WebKit*/
  -moz-background-size: cover; /* Mozilla*/
  -o-background-size: cover; /* Opera*/
  background-size: contain;
  background-position: center;
  background-repeat: no-repeat;
  display: flex;
  flex-direction: column;
  justify-content: center;
  color: black;
}

.ResourceSubpage {
  height: 100%;
  background-color: #f8faff;
  width: 100%;
  -webkit-background-size: cover; /* For WebKit*/
  -moz-background-size: cover; /* Mozilla*/
  -o-background-size: cover; /* Opera*/
  background-size: contain;
  background-position: center;
  background-repeat: no-repeat;
  display: flex;
  flex-direction: column;
  justify-content: center;
  color: black;
}
.LogsContainer {
  border-radius: 8px;
  /*overflow-y: auto;
  overflow-x: hidden;*/
  display: flex;
  flex-direction: column;
}
.LogsList {
  flex: 1;
}

.RightSearchBox {
  position: absolute;
  top: 94px;
  right: 50px;
}
.SearchContainer {
  width: 291px;
  height: 32px;
  border-radius: 50px;
  display: flex;
  flex-direction: row;
  justify-content: flex-start;
  align-items: center;
  border: solid 1px #dddddd;
}
.SearchContainer input {
  margin-left: 15px;
  height: 30px;
  width: 220px;
  max: 15;
  border: solid 0px;
  font-family: PingFangHK-Regular, Helvetica, Arial, sans-serif;
  font-size: 14px;
  font-weight: 500;
  font-style: normal;
  font-stretch: normal;
  line-height: 1;
  letter-spacing: normal;
  text-align: left;
  color: #57595c;
}
*:focus {
  outline: none;
}

.SearchContainer input.middle:focus {
  outline-width: 0;
}

.GroupTypeContainer {
  width: 215px;
  height: 142px;
  position: absolute;
  top: 150px;
  right: 100px;
  background-color: #ffffff00;
}
.GroupTypeDropDown {
  padding-left: 12px;
  padding-right: 12px;
  width: 215px;
  height: 34px;
  display: flex;
  flex-direction: row;
  justify-content: flex-start;
  align-items: center;
  background-image: linear-gradient(to bottom, #ffffff, #e6e6e6);
}

.GroupTypeDropDown p {
  margin-top: 10px;
  font-family: PingFangHK-Regular, Helvetica, Arial, sans-serif;
  font-size: 14px;
  font-weight: 500;
  font-style: normal;
  font-stretch: normal;
  line-height: 1;
  letter-spacing: normal;
  text-align: left;
  color: #57595c;
}

.GroupSelectMenu {
  padding: 1px 1px 1px 1px;
  background-color: #ffffff;
}

.GroupSelectMenu .Item {
  padding: 3px 3px 3px 3px;
  font-family: PingFangHK-Regular, Helvetica, Arial, sans-serif;
  font-size: 14px;
  font-weight: 500;
  font-style: normal;
  font-stretch: normal;
  line-height: 1;
  letter-spacing: normal;
  text-align: left;
  color: #57595c;
}

.table-responsive {
  overflow: auto;
}

.AboutWrapper {
  padding: 2rem;
}
.AboutContent {
  display: flex;
}
.AboutContentLogo {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 200px;
  height: 200px;
  flex: 0 0 200px;
}

.AboutContentLogo .LogoImage {
  position: relative;
  top: 0;
  left: 0;
}

.AboutContentText {
  flex: 1;
  padding-left: 2rem;
}

.AboutContentText h3{
  color: #389BFF;
}

.AboutContentText h3[classtype=iMonitor]{
  color: #FF9100;
}

.AboutContentText h3[classtype=iAccess]{
  color: #00BFA5;
}


.AboutContent a {
  width: 120px;
  margin-right: 1rem;
}
.AboutContent img {
  max-width: 100%;
}

.AboutQrCodes {
  display: flex;
  margin-top: 1rem;
  margin-left: -20px;
  margin-right: -20px;
}

.AboutQrCode {
  display: flex;
  flex: 0 0 45%;
  align-items: center;
  padding: 10px;
  border: solid 1px #dde0e3;
  margin: 10px;
}

.AboutQrCodeContent h5{
  color: #389BFF;
}

.AboutQrCodeContent h5[classtype=iMonitor]{
  color: #FF9100;
}

.AboutQrCodeContent h5[classtype=iAccess]{
  color: #00BFA5;
}

.AboutCopyright {
  margin-top: 1rem;
  margin-bottom: -1rem;
}
.ExpDateInput {
  background: white;
  color: #57595c;
  padding-left: 5px;
  border-style: solid;
  width: 140px;
  height: 32px;
  border-radius: 3px;
  font-family: PingFangHK-Regular, Helvetica, Arial, sans-serif;
  font-size: 16px;
  font-weight: 500;
  font-style: normal;
  font-stretch: normal;
  letter-spacing: normal;
  border: solid 1px #EBEFF2;
  margin: 0 5px;
}

.ExpDateInput input {
  border: 0;
  width: 60px;
  height: 100%;
}

/* Chrome, Safari, Edge, Opera */
.ExpDateInput input::-webkit-outer-spin-button,
.ExpDateInput input::-webkit-inner-spin-button {
  -webkit-appearance: none;
  margin: 0;
}

/* Firefox */
.ExpDateInput input[type=number] {
  -moz-appearance: textfield;
}

.ExpDateInputWrap {
  display: flex;
  align-items: center;
}

.ExpDateInputWrap button {
  color:#FFF;
  border: 0px;
  width: 30px;
  height: 30px;
  background: linear-gradient(166.03deg, #12C2E9 -52.18%, #2D6DE9 117.89%);
  border-radius: 50%;
}

.ExpDateInputWrap button[classtype=iMonitor] {
  width: 30px;
  height: 30px;
  border: solid 1px #cccccc;
  background: #efefef;
  border-radius: 50%;
}

.ExpDateInputWrap button[classtype=iAccess] {
  width: 30px;
  height: 30px;
  border: solid 1px #cccccc;
  background: #efefef;
  border-radius: 50%;
}


.ExpDateInputWrap button:focus {
  outline: none;
}


.DataitemSelectorButton {
  margin-top:15px;
  height: 36px;
  width: 280px;
  border-radius:4px;
  border: solid 1px #bbbbbb;
  padding-left:10px;
  padding-right:10px;
  display: flex;
  flex-direction: row;
  justify-content: flex-start;
  align-items: center;
}

.DataitemSelectorButton .Message {
  flex:1;
  font-family: PingFangHK-Regular, Helvetica, Arial, sans-serif;
  font-size:14px;
  font-style: normal;
  font-stretch: normal;
  letter-spacing: normal;
  text-align: left;
}

.arrow {
  border: solid #bbbbbb;
  border-width: 0 2px 2px 0;
  display: inline-block;
  padding: 4px;
}

.right {
  transform: rotate(-45deg);
  -webkit-transform: rotate(-45deg);
}

.left {
  transform: rotate(135deg);
  -webkit-transform: rotate(135deg);
}

.up {
  transform: rotate(-135deg);
  -webkit-transform: rotate(-135deg);
}

.down {
  transform: rotate(45deg);
  -webkit-transform: rotate(45deg);
}


.DataitemSelectionZone {
  overflow-y: auto;
  overflow-x: hidden;
  margin-bottom:20px;
  width: 100%;
}

.tasksContainer {
  background-color: #ffffff;
  border-radius: 8px;
  overflow-y: auto;
  overflow-x: hidden;
  display: flex;
  flex-direction: column;
  margin-bottom: 15px;
}

.Collapse{
  background: linear-gradient( 90deg, #999 -999%, #F5F4F4 100%);
  width: 18px;
  position: relative;
  display:flex;
  align-items: center;
}

.Collapse .CollapseButton{
  cursor: pointer;
  width:15px;
  height:35px;
  background-color: #ffffff;
  border-radius: 0 3px 3px 0;
  position: relative;
  display:flex;
  align-items: center;
}

.Collapse .CollapseButton .CollapseButtonLeft{
  background-position:15px 0px;
  cursor: pointer;
  width:20px;
  height:20px;
  background-image: url('../img/phase3/arrow_left.png');
}

.Collapse .CollapseButton .CollapseButtonRight{
  background-position:15px 0px;
  cursor: pointer;
  width:20px;
  height:20px;
  background-image: url('../img/phase3/arrow_right.png');
}

.CollapseToleft{
  width:0px !important;
}

.Dot{
  width:8px;height:8px;
  border-radius:999em;
  margin: 0px 6px;
}

.StaticItems{
  cursor: pointer;
  width:260px;
  height: 36px;
  border: 1px solid #EBEFF2;
  border-radius: 3px;
  display: flex;
  flex-direction:row;
  margin:3px;
  font-family: PingFangHK-Regular, Helvetica, Arial, sans-serif;
  font-size: 14px;
  font-weight: normal;
  font-style: normal;
  font-stretch: normal;
  line-height: 20px;
  display: flex;
  align-items: center;
  color: #57595c;
}

.Opacity{
  opacity: 0.3;
}

.Outline{
  background: #FFFFFF;
  border: 1px solid #EBEFF2;
  border-radius: 4px;
}

.SepArrowRight{
  margin: 0px 15px;
  width:15px;
  height:20px;
  background-image: url('../img/phase3/arrow_right.png');
}

.HeadRowContainer{
  display: flex;
  flex-direction:row;
  align-items: center;
}

.MuiFormControl-root{
  border: 1px solid #EBEFF2 !important;
  border-radius: 3px !important;
}

.MuiInput-underline:before{
  border-bottom: 0px !important;
}

.Section{
  border: 1px solid #EBEFF2 ;
  border-radius: 3px;
  padding: 15px;
}

.ql-container {
  height: 300px !important;
}

.ql-editor {
  height: 300px !important;
}

.ql-toolbar.ql-snow{
  border: 1px solid #EBEFF2 !important;
  border-radius: 3px !important;
}

.ql-container.ql-snow{
  border: 1px solid #EBEFF2  !important;
  border-radius: 3px !important;
}

.KeyboardDatePickerInitail button{
  background:initial;
  color:#A2A2A2;
}


.ContainerRowCenter {
  display: flex;
  flex-direction: row;
  justify-content: center;
  align-items: center;
}

.ContainerColumnCenter {
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
}


.ItemAbsolute {
    position: absolute;
}