@font-face{
    font-family: 'AlibabaPuHuiTi-2';
    src: url('./../fonts/AlibabaPuHuiTi-2-55-Regular.woff');
    font-weight: normal;
}
@font-face{
    font-family: 'AlibabaPuHuiTi-2';
    src: url('./../fonts/AlibabaPuHuiTi-2-75-SemiBold.woff');
    font-weight: bold;
}
@font-face{
    font-family: 'Oxygen';
    src: url('./../fonts/Oxygen-Regular.woff');
    font-weight: normal;
}
@font-face{
    font-family: 'Oxygen';
    src: url('./../fonts/Oxygen-Bold.woff');
    font-weight: bold;
}

input, textarea, button{
    font-size: inherit;
    font-family: inherit;
}
html, body{
	width: 100%;
	height: 100%;
	padding: 0;
	margin: 0;
}
body{
    background-color: #7d0dff;
    position: relative;
}
#CountryUoutside102{
    width: 100%;
    min-height: 100%;
    display: flex;
    justify-content: center;
    align-items: center;
    background-image: linear-gradient(175deg, #f6efff 0px, #f6efff 140px, #bbe3ff 180px, #cfffcf 240px, #fff 400px, #fff 100%);
}
#CountryUoutside101{
    padding: 75px 10px 100px;
	width: 90%;
    max-width: 800px;
    display: block;
    font-family: 'Oxygen', 'AlibabaPuHuiTi-2';
    z-index: 2;
    background-color: transparent;
    box-sizing: border-box;
}
.lang-content{
    border: 3px solid #7d0dff;
    border-radius: 20px;
    padding: 18px 18px;
    background-color: #f6efff66;
}
#error-page-bgimg{
    width: 100%;
    z-index: 1;
    position: fixed;
    bottom: 0;
    left: 0;
}
#error-page-bgimg img{
    width: 100%;
}
#error-page-bgimg-normal{
    display: block;
}
#error-page-bgimg-phone{
    display: none;
}
@media screen and (max-width: 499.99px){
    #error-page-bgimg-phone{
        display: block;
    }
    #error-page-bgimg-normal{
        display: none;
    }
}
.noJSNoticeP{
    text-align: left;
    font-size: 18px;
    color: #000000;
}
.noJSCnIcpNo{
    text-align: center;
    font-size: 16px;
}
.cn-public-security-icon{
    position: relative;
    top: 4px;
}

/* Link */
.a-nostyle{
    text-decoration: none;
    background-color: transparent;
}
a:not(.a-nostyle):not(.btn-small),
a:visited:not(.a-nostyle):not(.btn-small){
    text-decoration: none;
    background-color: transparent;
    border-bottom-color: #7d0dff;
    border-bottom-style: solid;
    border-bottom-width: 2px;
    transition: background-color 0.3s ease;
    color: inherit;
}
a:hover:not(.a-nostyle):not(.btn-small),
a:focus:not(.a-nostyle):not(.btn-small){
    background-color: #f6efff;
    border-bottom-width: 3px;
}

/* Buttons (Small) */
.btn-small{
    color: blue;
    font-weight: bold;
    width: max-content;
    cursor: pointer;
    text-decoration: none;
    margin-top: 0.7em;
    margin-bottom: 1em;
    display: inline-block;
    transition: color 0.3s ease-in-out;
}
.btn-small:hover{
    color: #00bb00 !important;
}

.title2{
    color: #7d0dff;
    text-align: center;
    margin-top: 5px;
    margin-bottom: 5px;
    font-size: 24px;
}
.title3{
    color: #0000ff;
    text-align: center;
    margin-top: 15px;
    margin-bottom: 15px;
    font-size: 20px;
}
.logo{
    width: 45px;
    vertical-align: middle;
}
.logo-title{
	font-size: 24px;
	font-weight: bold;
	position: relative;
	top: 4px;
	margin-left: 12px;
	display: inline-block;
	color: #7d0dff;
}
@media screen and (max-width: 800px){
    .title2{
        font-size: 24px;
    }
    .title3{
        font-size: 18px;
    }
    .logo{
        max-width: 150px;
    }
    body{
        background-size: auto 100%;
    }
}
.langbox-out{
	width: 100%;
    text-align: center;
}

#continue-btn-container{
    text-align: center;
}

/* Colours */
.blue{
    color: #0000ff !important;
}
.red{
    color: #ff0000 !important;
}
.green{
    color: #00cc00 !important;
}
.orange{
    color: #ff7700 !important;
}
.violet{
    color: #7d0dff !important;
}

/* Buttons and Text Input Boxes Style */
.btn{
    background-color: #7d0dff;
    padding: 12px 18px;
    color: white;
    text-decoration: none;
    border: none;
    outline: none;
    cursor: pointer;
    position: relative;
    display: inline-block;
    transition: background-color 0.3s ease;
    border-radius: 14px;
}
.btn:after{
    content: '';
    position: absolute;
    left: 50%;
    top: 50%;
    transform: translate(-50%, -50%);
    width: 0;
    height: 0;
    background-color: #f6efff;
    transition: width 0.3s ease;
    z-index: -1;
    border-radius: 14px;
}
.btn:hover, .btn:focus{
    color: #7d0dff;
    background-color: transparent;
}
.btn:hover:after, .btn:focus:after{
    width: 100%;
    height: 100%;
}
.btn-no-margin{
    margin-top: 0;
    margin-bottom: 0;
}

/* New Buttons */
.option{
    display: inline-block;
    padding: 8px 10px;
    cursor: pointer;
    position: relative;
    z-index: 0;
    margin-right: 5px;
    border: none;
    background-color: transparent;
    border-radius: 1.5px;
    transition: background-color 0.3s ease-in-out;
}
.option:hover, .option:focus{
	background-color: #f3f3f3;
}
.option:after{
	content: "";
	z-index: 1;
	width: 0%;
	height: 3px;
	border-radius: 1.5px;
	bottom: 0;
	left: 50%;
	position: absolute;
	transition: width 0.3s, left 0.3s;
}
.option:after{
	background-color: #7d0dff;
}
.option:hover,
.option:focus,
.option
{
	color: #7d0dff;
}
.option:hover:after,
.option:focus:after
{
	width: 100%;
	left: 0;
}
.option-selected{
	font-weight: bold;
	cursor: default;
}
.option-selected:after{
	content: "";
	z-index: 1;
	width: 100%;
	height: 3px;
	border-radius: 1.5px;
	bottom: 0;
	left: 0;
	position: absolute;
}
.option-selected:hover, .option-selected:focus{
	background-color: transparent;
}

@media (prefers-color-scheme: dark){
    a:hover:not(.a-nostyle):not(.btn-small),
    a:focus:not(.a-nostyle):not(.btn-small)
    {
        background-color: #241e2d;
    }
    #CountryUoutside102{
        background-image: linear-gradient(175deg, #241e2d 0px, #241e2d 140px, #263036 180px, #283228 240px, #000000 400px, #000000 100%);
    }
    .lang-content{
        background-color: #00000066;
    }
    .noJSNoticeP{
        color: white;
    }
    .title3{
        color: #00aaff;
    }
    .btn-small{
        color: #00aaff;
    }
    .blue{
        color: #00aaff !important;
    }
	.option:hover, .option:focus{
		background-color: #1c1822;
	}
    .option:hover,
    .option:focus,
    .option
    {
        color: #8b67ff;
    }
    .logo-title{
        color: #8b67ff;
    }
    .title2{
        color: #8b67ff;
    }
    .violet{
        color: #8b67ff !important;
    }
    .option::after {
        background-color: #8b67ff;
    }
	.option-selected:hover, .option-selected:focus{
		background-color: transparent;
	}
}