/*!*body*!*/
html,body {
    margin:0;
    padding:0;
    font-family: 'Microsoft JhengHei','Source Sans Pro','Helvetica Neue',Helvetica,Arial,sans-serif;
    min-height: 100%;
}

/*scrollbar hidden*/
main::-webkit-scrollbar ,body::-webkit-scrollbar {
    display: none;
}

main {
    background-color: #eceff4;
}
h1, h2, h3, h4, h5, h6, .h1, .h2, .h3, .h4, .h5, .h6 , .popover{
    font-family: 'Microsoft JhengHei', 'Source Sans Pro', sans-serif;
}

p {
    font-size: 12px;
}

.popover{
    font-family: 'Microsoft JhengHei', 'Source Sans Pro', sans-serif;
}

/*login*/
.login-box {
    max-width: 490px;
    margin: 0 auto;
    padding-top: 8%;
}

.login-box-msg{
    font-size: 14px;
}
.login-box-body {
    position: relative;
    padding: 0;
    box-shadow: 0 0 10px 0 #CAC8C8;
    border-radius: 3px;
    color: #666;
}

/*最上面的彩虹條*/
/*.login-box-body:before, .header-bar {*/
    /*content: '';*/
    /*position: absolute;*/
    /*top: 0;*/
    /*left: 0;*/
    /*right: 0;*/
    /*height: 5px;*/
    /*background: #c4e17f;*/
    /*border-radius: 3px 3px 0 0;*/
    /*background-image: -webkit-linear-gradient(left, #c4e17f, #c4e17f 12.5%, #f7fdca 12.5%, #f7fdca 25%, #fecf71 25%, #fecf71 37.5%, #f0776c 37.5%, #f0776c 50%, #db9dbe 50%, #db9dbe 62.5%, #c49cde 62.5%, #c49cde 75%, #669ae1 75%, #669ae1 87.5%, #62c2e4 87.5%, #62c2e4);*/
    /*background-image: -moz-linear-gradient(left, #c4e17f, #c4e17f 12.5%, #f7fdca 12.5%, #f7fdca 25%, #fecf71 25%, #fecf71 37.5%, #f0776c 37.5%, #f0776c 50%, #db9dbe 50%, #db9dbe 62.5%, #c49cde 62.5%, #c49cde 75%, #669ae1 75%, #669ae1 87.5%, #62c2e4 87.5%, #62c2e4);*/
    /*background-image: -o-linear-gradient(left, #c4e17f, #c4e17f 12.5%, #f7fdca 12.5%, #f7fdca 25%, #fecf71 25%, #fecf71 37.5%, #f0776c 37.5%, #f0776c 50%, #db9dbe 50%, #db9dbe 62.5%, #c49cde 62.5%, #c49cde 75%, #669ae1 75%, #669ae1 87.5%, #62c2e4 87.5%, #62c2e4);*/
    /*background-image: linear-gradient(to right, #c4e17f, #c4e17f 12.5%, #f7fdca 12.5%, #f7fdca 25%, #fecf71 25%, #fecf71 37.5%, #f0776c 37.5%, #f0776c 50%, #db9dbe 50%, #db9dbe 62.5%, #c49cde 62.5%, #c49cde 75%, #669ae1 75%, #669ae1 87.5%, #62c2e4 87.5%, #62c2e4);*/
    /*z-index: 1001;*/
/*}*/

.header-bar {
    position: relative;
}

.login-box-header {
    margin-bottom: 10px;
}

#uuid {
    font-size: 14px;
    font-weight: 700;
}

.login-box-footer {
    font-size: 12px;
    color: #9a9898;
    padding: 20px 0;
    text-align: center;
}

.logo-login {
    width: 200px;
}

.login-page {
    background: #E2E2E2 url(../images/login-page-bg.jpg) no-repeat center center;
    background-size: cover;
}

.main-header {
    background-color: #1595dc;
    height: 3rem;
}

.login-logo {
    font-size: 35px;
    text-align: center;
    margin-bottom: 10px;
    font-weight: 300;
}

#login {

    margin-top: 20px;
}
#passErr {
    font-size: .9rem;
}

#password::-webkit-input-placeholder {
    font-size: 12px;
    line-height: 2;
}

#animalHeader {
    background: url(../images/contact-bg.jpg) center no-repeat;
    background-size: cover;
    height: 20vh;
}
/*navbar 去邊框*/
.navbar-light .navbar-toggler {
    border: 0;
}
.navbar {
    padding: 0 0 0 16px;
}

/*uid*/
#animalTitle {
    transform: translateY(-100%);
}

.subTitle{
    color: gray;
}

/*header logo+logout*/
#logo {
    display: inline-block;
    line-height: 3;
}

.logout-logo {
    width: 40px;
}

/*功能下拉選單小箭頭*/
.dropdown-toggle:after {
    border: none;
}

/*功能下拉選單滑鼠點擊樣式*/
.dropdown-item.active, .dropdown-item:active {
    color: #212529;
    text-decoration: none;
    background-color: #f8f9fa;
}

/*陰影*/
.shadow {
    box-shadow: 2px 2px 5px grey;
}

/*loading*/
#nickname {
    position: relative;
    padding-top: 25%;
}

/*預設人物圖*/
.card {
    max-width: 230px;
    width: 35vw;
}

.card-body {
    padding: 0;
}
/*依據標籤推估的興趣*/
.box {
    position: relative;
    border-radius: 10px;
    background: #ffffff;
    margin-bottom: 20px;
    width: 100%;
}

/*tab css*/
#select_label {
    overflow-x: auto;
    width: 100%;
}

#select_label > li {
    width: 20%;
    margin: 0;
}

/*標籤顏色*/
.IT {
    background-color: #Be9063;
}

.IE {
    background-color: #525B56;
}

.IP{
    background-color: #6A8A82;
}

.CT {
    background-color: #A4978E;
}

.CN{
    background-color: #A7414A;
}

.IL{
    background-color: #7b68ee;
}

.IG{
    background-color: #003399;
}

.IO{
    background-color: #b85798;
}

.nav-tabs .nav-link {
    color: white;
    font-size: 0.6rem;
}
.nav-tabs .nav-link.active {
    color: white;
}
.demographic {
    border-radius: 10px;
    margin-bottom: 5px;
}

.demographic > p {
    margin: auto 0;
}

.attrImg {
    max-width: 50px;
    max-height: 5vw;
}
/*tag圖片*/
.imageInfo {
    margin: 20px auto 0 auto;
}
/*tab懸浮視窗*/
.popover.top {
    margin-top: 20px;
}

/*範例人物維持一排五個*/
.example {
    max-width: 20%;
    height: auto;
    padding: 0 1.5vw;
}

/*下拉選單右邊向下箭頭*/
.urlSelect-div:after {
    content:"\f078";
    font-family: "FontAwesome";
    font-size: 11px;
    color:#aaa;
    right:8px;
    top: 30px;
    padding:0 0 2px;
    position:absolute;
    pointer-events:none;
}

/*!*即時查詢內容*!*/
.tags-content {
    font-size: 0.8rem;
}

.tag {
    overflow: hidden;
    height: auto;
}

.less {
    height: 35px;
}

.tag>span {
    display: inline-block;
    color: white;
    border-radius: 20px;
    margin: 5px;
    padding: 3px;
}
/*tag 遮擋*/
.mask{
    z-index: 2;
    position: relative;
    overflow: hidden;
}
.mask:hover {
    cursor: pointer;
}
.rotate-180{
    transform: rotate(180deg);
}
.mask>i {
    -webkit-transition: transform 0.5s;
    -moz-transition: transform 0.5s;
    transition: transform 0.5s;
}

/*即時來源radio*/
#instantVisitRadio {
    margin: 20px 10px;
}

/*圓環圖中心文字*/
#pieChartText {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%,-40%);
}

/*外層*/
.search-input, .data-content,.tags-content{
    position: relative;
    border-radius: 10px;
    background-color: white;
    padding: 10px 20px;
}
/*uid小神器內層*/
.inside {
    padding: 10px;
    background-color: white;
    border: solid 2px #f6f6f6;
}

/*url表*/
#url-table {
    border-top: solid 2px #f6f6f6;
    table-layout: fixed;
    word-break: break-all;
}

#uid-input-message{
    font-size: .75rem;
    color: rgba(0,0,0,.6);
}

#uid-input,#url-table td,#url-table th {
    font-size: .8rem;
}


/*footer*/
.main-footer {
    background: #fff;
    padding: 0 15px;
    color: #444;
    border-top: 1px solid #d2d6de;
}

.main-footer >p{
    background: #fff;
    padding: 0 15px;
    color: #444;
    border-top: 1px solid #d2d6de;
}

@media (min-width: 960px){
    /*.tags-content,.bmd-layout-drawer>.list-group .list-group-item {*/
        /*font-size: 0.9rem;*/
    /*}*/

    p ,.nav-tabs .nav-link, .main-footer >p {
        font-size: .9rem;
    }
    /*小神器寬度*/
    /*.uid-container {*/
        /*max-width: 1340px;*/
    /*}*/
}

@-webkit-keyframes move1
{
    0% { -webkit-transform: rotate(0)}
    25% { -webkit-transform: rotate(5deg)}
    75% { -webkit-transform: rotate(-10deg) }
    100% { -webkit-transform: rotate(5deg)}
}

.shake {
    -webkit-animation: move1 .1s linear;
}