@charset "utf-8";

@import url("bootstrap.css");
@import url("font-awesome.css");
@import url("v13-common-style-default.css");
@import url("v13-common-style-webtop.css");

/* openbase */

 /** =================================== 
 1.default-change (light-theme)
===================================*/

/* all bg*/
body,
body.webtop {
	background-color: #525252;
    background: url(/public/share/images/main.png) no-repeat center center fixed;
	-webkit-background-size: cover;
	-moz-background-size: cover;
	-o-background-size: cover;
	background-size: cover;
}

/* all logo*/
.brand,
#credentials_table_header::before,
#interaction_table_header::before,
.main_table table:before,
div#webtop_favorites_outer_container:before,
div#webtop_favorites_outer_container2:before{
    content: url(/public/share/logo/logo.png);
    padding-top: 30px;
    padding-bottom: 10px;
}

/* login-btn-color*/
table#main_table table#credentials_table input.credentials_input_submit, 
input.credentials_input_submit_disabled,
table#main_table table#credentials_table button,
.download_btn {
	color: #ffffff;
	background-color: #3F51B5;
	border-color: #33439a;
}

/* download-btn-color*/
table#main_table table#credentials_table button,
.download_btn {
	color: #ffffff;    
	background-color: #00BCD4;
	border-color: #0097A7;
}

/* color with opacity*/
table#main_table table#credentials_table, 
table#main_table table#interaction_table, 
.main_table {
	background-color: rgba(255, 255, 255, 0.88);
}

/*  webtop-width*/
@media (min-width: 1024px) {
div#webtop_favorites_outer_container,
div#webtop_favorites_outer_container2{
    width: 50%;
    }
}


/** Mobile
===================================*/
@media (min-width: 350px) {
    table#main_table table#credentials_table,
    table#main_table table#interaction_table,
    .main_table,
    div#webtop_favorites_outer_container,
    div#webtop_favorites_outer_container2 {
		border-radius:0px;
	}
}

@media (min-width: 768px) {
    table#main_table table#credentials_table,
    table#main_table table#interaction_table,
    .main_table,
    div#webtop_favorites_outer_container,
    div#webtop_favorites_outer_container2     {
		border-radius:0px;
	}
}

@media (min-width: 1024px) {
    table#main_table table#credentials_table,
    table#main_table table#interaction_table,
    .main_table,
    div#webtop_favorites_outer_container,
    div#webtop_favorites_outer_container2 {
		border-radius:7px; 
    }    
} 


 /** =================================== 
 3-2.contents-add, align-Center
===================================*/

.btn3 {margin-top: 33px;text-align: center;}

.btn3 .download_btn {
  width:auto;
  font-size: 14px;
  margin-top: 0px;
  height: 30px;
  line-height: 14px;
  display: inline-block;
  margin-left: 10px;
  width: 46%;
}

.btn3 .download_btn + .download_btn {margin-left: 5px;}

/* QRCode page - iRules */
.qrcode_page {
    text-align: center;
    width: 500px;
    display: block;
    margin: 17vh auto 0;
    height: auto;
}

.qrcode_page div:first-child {
    background: #000000cc;
    padding: 75px 50px 20px;
    background-color: rgba(0, 0, 0, 0.7);
    border-radius: 7px;
    box-shadow: 0 0.25rem 0.125rem 0 rgba(0,0,0,.05);
    box-shadow: 1px 2px 8px #777777;
}

.qrcode_page a {
    padding: 10px 16px;
    width: 100%;
    display: inline-block;
    margin-top: 10px;
    color: #ffffff;
    background-color: #f58220;
    border-color: #e67a1d;
    font-size: 23px;
    line-height: 42px;
    border-radius: 6px;
    height: 61px;
    text-decoration: none;
    margin-bottom: 10px;
}

.qrcode_page strong {
    font-size: 22px;
    color: #FFEB3B;
}

.qrcode_page span {
    display: block;
    padding-top: 20px;
    text-align: left;
}

.qrcode_page img {
    padding: 7px;
    background: #ffffff;
    margin-bottom: 5px;
}


/** Mobile
===================================*/
@media (min-width: 350px) {
    .qrcode_page {
        width: 100%;
        margin-top: 5vh;
    }
    .qrcode_page div:first-child{
        box-shadow:none;
        border-radius: 0px;
	}
}

@media (min-width: 768px) {
    .qrcode_page {
	width: 95%;
    margin-top: 10vh;
    }
    .qrcode_page div:first-child{    
    box-shadow:none;
    border-radius: 7px;
	}
}

@media (min-width: 1024px) {
    .qrcode_page {
        width: 500px;
        margin-top: 17vh;
    }
    .qrcode_page div:first-child{        
        box-shadow: 0 2px 5px rgba(0, 0, 0, 0.2);  
        border-radius: 7px;
    }    
} 
/** 20210119 - partner Accept Terms of Service add
===================================*/
.warning-logon #input_1,
.warning-logon #input_3 {display: none;}
.warning-logon #label_input_1 {
  color: #ffffff;
  margin-top: -17px !important;
  margin-bottom: 1px !important;
  opacity: .9;
  font-size: 12px;
  font-weight: 400;
  background: #000000;
  padding: 10px 16px !important;
  border: 1px solid rgb(132 132 132 / 0.5);
}

.warning-logon #label_input_1 ol, 
.warning-logon #label_input_1 ul {
  padding-inline-start: 21px;
  margin-bottom: 0px;
}
.warning-logon #label_input_1 ul li {
  list-style: disc;
}

.warning-logon #label_input_1 p {margin-bottom: 5px;}
.warning-logon #label_input_2 {
  padding-left: 21px !important; 
  color: #000000; font-size: 14px; 
}
.warning-logon #input_2 {
  position:absolute; 
  margin-top: -20px
}

.warning-logon #label_input_3 {
  color: #ff3b4f;
  font-weight: 300;
  font-size: 13px;
}
.dv_access .access_list {float:left;width:calc(60% - 20px);padding-top: 8px;box-sizing:border-box;}
.dv_access .access_list li {margin-top:15px}
.dv_access .access_list li:nth-of-type(1) {margin-top:0}
.dv_access .access_list li button {width:100%; padding:15px 0; border-radius:6px; color:#fff}
.dv_access .access_list li:nth-of-type(1) button {background:#e60012 url(/public/share/images/icon_sso.png) no-repeat 20px 50%}
.dv_access .access_list li:nth-of-type(1) button:hover {background:#eb3341 url(/public/share/images/icon_sso.png) no-repeat 20px 50%}
.dv_access .access_list li:nth-of-type(2) p {position:relative;padding:15px 70px;border-radius:6px;border:1px solid #cfcfcf;background-color:#fff;font-weight:500;font-size:18px;color:#000f26;text-align: left;}
.dv_access .access_list li:nth-of-type(2) span {display:block; font-size:12px; font-weight:300}
.dv_access .access_list li:nth-of-type(2) p[data-state="connecting"]::before {content:""; display:inline-block; position:absolute; top:50%; left:15px; margin-top:-20px; width:40px; height:40px; background:url(/public/share/images/bg_connecting.png); border-radius:40px; animation: connecting 5s linear infinite}
.dv_access .access_list li:nth-of-type(2) p[data-state="complete"]::before {content:""; display:inline-block; position:absolute; top:50%; left:15px; margin-top:-20px; width:40px; height:40px; background:#78c13b url(/public/share/images/bg_complete.png) no-repeat 50% 50%; border-radius:40px}
.dv_access ul{list-style: none;}
.dv_access {height: 260px;padding: 30px 40px 0;background-color:rgba(0, 0, 0, .0001);box-sizing:border-box;width: 600px;margin: 0 auto;}
.dv_access  h2 {display:none}
.dv_access .access_list {float:left;width:100%; padding-top: 8px;box-sizing:border-box;}
.dv_access .access_list ul{padding-inline-start: 0px; margin-bottom: 20px; padding-left:0px;}
.dv_access .access_list li {margin-top:15px}
.dv_access .access_list li:nth-of-type(1) {margin-top:0}
.dv_access .access_list li button {width:100%; padding:15px 0; border-radius:0px; color:rgba(0, 0, 0, .0001)}
.dv_access .access_list li button:focus {outline: none;}
.dv_access .access_list li:nth-of-type(1) p {position:relative;padding: 20px 25px 20px 20px;border-radius:0px;border:1px solid #cfcfcf;background-color:#fff;font-weight:800;font-size:18px;color:#000f26;text-align: center;height:80px;}
.dv_access .access_list li:nth-of-type(1) span {display:block; font-size:12px; font-weight:300}
.dv_access .access_list li:nth-of-type(1) p[data-state="connecting"]::before {content:""; display:inline-block; position:absolute; top:50%; left:20px; margin-top:-20px; width:40px; height:40px; background:url(/public/share/images/bg_connecting_g.png); border-radius:40px; animation: connecting 5s linear infinite}
.dv_access .access_list li:nth-of-type(1) p[data-state="complete"]::before {content:""; display:inline-block; position:absolute; top:50%; left:15px; margin-top:-20px; width:40px; height:40px; background:#78c13b url(	
/public/share/images/bg_complete.png) no-repeat 50% 50%; border-radius:40px}
@keyframes connecting
{
 from{transform:rotate(0deg);}
 to{transform:rotate(360deg);}
}
.dv_access .access_info {
	float: right;
    padding-top: 0px;
    box-sizing: border-box;
    text-align: left;}


@media not all and (min-resolution:.001dpcm)
{ @supports (-webkit-appearance:none) and (stroke-color:transparent) {
    div#webtop_wrapper  {padding-bottom: 0px;margin-bottom: -3px; }
}}

.approval-logon #input_5{
  display: inline-block;
  width: 100% !important;
  height: 34px !important;
  padding: 6px 12px;
  font-size: 14px !important;
  line-height: 1.42857143;
  color: #333;
  background-color: #fff;
  background-image: none;
  border: 1px solid #ccc !important;
  border-radius: 0px;
  font-weight: 700;
  max-width: 100% !important;
}