/* basic config */
html {
    font-family:PingFang, NotoSansHans-Regular, AvenirNext-Regular, proxima-nova, "Hiragino Sans GB", "Microsoft YaHei", "WenQuanYi Micro Hei", "Open Sans", "Helvetica Neue", Arial, sans-serif;
    font-size: 14px;
    height: 100%;
}

body {
    color: #494a4a;
    background: #FFF;
    font-size: 1rem; /* 14 px */
    height: 100%;
}

/* font size settings */
.font-12 {
    font-size: 0.85rem;
}
.font-14 {
    font-size: 1.000rem;
}

.font-16 {
    font-size: 1.143rem;
}

.font-20 {
    font-size: 1.429rem;
}

.font-24 {
    font-size: 1.714rem;
}

.font-36 {
    font-size: 2.571rem;
}

.font-50 {
    font-size: 3.571rem;
}
/* text color settings */
.text-main {
    color: #0058df;
}

.text-contrast {
    color: #FFF;
}

.text-dark {
    color: #494a4a;
}

/* background filled settings */
.image-filled {
    background-color: #FFF;
    background-position: center;
    background-size: cover;
}

.color-filled-white {
    background-color: #FFF;
}

.color-filled-grey {
    background-color: #F6F6F6;
}

.color-filled-darkgrey {
    background-color: #2B2B2B;
}

.color-filled-grident-grey {
    background: linear-gradient(90deg, #F4F4F4, #E7EAF1);
}
/* links */
a {
    color: #0058df;
}

a:hover {
    color: #7fb7ff;
}
.btn-outline-primary {
    border-color:#0058df;
    color:#0058df;
}

.btn-outline-primary:hover {
    background:#0058df;
    border-color:#0058df;
    color:#fff;
}

/* transition animations */
.with-transition {
    transition: all 200ms ease-out 0s;
}


/* backgrund image icon */
i.img {
    display: inline-block;
    font-style: normal;
    font-variant: normal;
    text-rendering: auto;
    line-height: 1;
    width: 100%;
    height: 100%;
    background-size: contain;
    background-repeat: no-repeat;
    background-position: center;
    margin: 0%;
}

i.img.half-size {
    width: 60%;
    height: 60%;
    margin: 20%;
}

i.img-zhihu {
    background-image: url(/static/image/zhihu_gray.png);
}

li:hover i.img-zhihu {
    background-image: url(/static/image/zhihu_white.png);
}

i.img-chrome {
    background-image: url(/static/image/icon_chrome.png);
}

i.img-firefox {
    background-image: url(/static/image/icon_firefox.png);
}

i.img-safari {
    background-image: url(/static/image/icon_safari.png);
}

i.img-opera {
    background-image: url(/static/image/icon_opera.png);
}

i.img-ie {
    background-image: url(/static/image/icon_ie.png);
}

i.img-android {
    background-image: url(/static/image/icon_android.png);
}

i.img-apple {
    background-image: url(/static/image/icon_apple.png);
}

.text-primary{
    color:#0058df !important;
}
.text-primary:hover {
    color: #0058df !important;
}
a.text-primary:hover {
    color: #0058df !important;
}

/* .text-primary:hover, .btn-primary:hover{
    color:#7fb7ff !important;
} */

.text-primary:active, .btn-primary:active{
    color:#7fb7ff !important;
}

.btn-primary {
    background-color:#0058df;
    border-color:#0058df;
}

.btn-primary:hover {
    background-color:#7fb7ff;
    border-color:#7fb7ff;
}

.btn-primary:active, .btn-primary:focus{
    background-color:#7fb7ff;
    border-color:#7fb7ff;
}

.btn-primary:active { background-color:#7fb7ff; border-color:#7fb7ff; }

.btn-primary:not(:disabled):not(.disabled).active, .btn-primary:not(:disabled):not(.disabled):active {
    color: #fff;
    background-color: #7fb7ff;
    border-color: #7fb7ff;

input:focus, select:focus{
	border-color:#7fb7ff;
}

.form-control:focus {
  color: #495057;
  background-color: #fff;
  border-color: #7fb7ff;
  outline: 0;
  box-shadow: 0 0 0 0.05rem #7fb7ff;
}
.tips-with-border {
    display: flex;
    align-items: center;
    justify-content: 'center';
}
.tips-with-border > .tips {
margin: 0;
}
.tips-with-border > .right-border ,
.tips-with-border > .left-border {
    height: 1px;
    flex-grow: 1;
}
/* Chrome, Safari, Edge, Opera */
input::-webkit-outer-spin-button,
input::-webkit-inner-spin-button {
  -webkit-appearance: none;
  margin: 0;
}

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

.mb-30 { margin-bottom: 30px; }
.mb-20 { margin-bottom: 20px; }
.my-30 { margin-bottom: 30px;margin-top: 30px; }
.text-gray { color: #c2c2c2; }
.bg-gray { background-color: #e3e3e3; }
.border-gray { border-color: #e3e3e3; }
.bg-primary {
    background-color:#7fb7ff !important;
}

.bg-primary:hover {
    background-color:#7fb7ff !important;
}

/* login */
.login-input {
    line-height:2.25rem;
}
.login-third .col-sm-3, .col-xs-3 {
    -ms-flex: 0 0 25%;
    flex: 0 0 25%;
    max-width: 25%;
}