@charset "utf-8";
/* CSS Document */
@font-face {
    font-family: "Chakra Petch";
    src: url('https://starterhorse.metaderby.com/static/font/ChakraPetch-Regular.ttf');
}
@font-face {
    font-family: "Noto Sans";
    src: url('https://starterhorse.metaderby.com/static/font/NotoSans-Regular.ttf');
}
*{
	padding:0;
	margin:0;
	list-style:none;
}
a{
	color:#fff;
	text-decoration:none;
}
*,body,html{
  /* -moz-user-select: none;
  -webkit-user-select: none;
  -ms-user-select: none;
  user-select: none; */
}
body{
	background: #0B141B;
	/* font-family: "Chakra Petch"; */
    font-family: "Noto Sans";
	line-height:1.414;
	-webkit-text-size-adjust:none;
	min-height:100vh;
	height:auto !important;
	height:100vh;
	color: #fff;
}
img{
	vertical-align:middle;
	max-width:100%;
}

input:focus{
	border: none;
	outline: none;
}
.blue {
    color: #00e0ff;
}

.c-btn-01{
	background:#00E0FF;
	display: inline-block;
	font-weight:bold;
	font-style:italic;
	background: linear-gradient(45deg,transparent 5px,#00E0FF 0) left;
	position:relative;
	cursor: pointer;
	text-align: center;
	width: 156px;
	height: 32px;
	line-height: 32px;
	font-size: 14px;
	overflow: hidden;
	color:#fff!important;
	vertical-align:middle;
	box-sizing: border-box;
    font-family: "Chakra Petch";
}
.c-btn-01::after{
	content:'';
	position:absolute;
	background:#000;
	transform:rotateZ(45deg);
	right:-30px;
	top:12px;
	height:6px;
	width:60px;
}

.c-btn-01:hover{
	background:linear-gradient(90deg, #2BABCA 0%, #2BABCA 100%);
	background: linear-gradient(45deg,transparent 5px,#2BABCA 0) left;
}
.c-btn-01.disabled{
	background:#8A8A8A;
	background: linear-gradient(45deg,transparent 5px,#8A8A8A 0) left;
	cursor:inherit;
}
.c-btn-01.loading {
    cursor: default;
    pointer-events: none;
}
.c-btn-01.loading:before {
    content: '';
    display: inline-block;
    width: 0.8em;
    height: 0.8em;
    margin-right: 0.5em;
    color: #fff;
    border: 2px solid #fff;
    border-radius: 50%;
    vertical-align: -5%;
    clip-path: polygon(0% 0%, 100% 0%, 100% 30%, 0% 30%);
    animation: rotate 0.5s linear infinite;
}
.el-message{
	background: #152634!important;
	border-color: #152634!important;
}
@keyframes rotate {
    from {
        transform: rotatez(0deg);
    }
    to {
        transform: rotatez(360deg);
    }
}