body {
    background: #111;
}

#app {
    background: #fff;
    color: #212529;
}

#footer {
    background: #111; color: #ccc;
}

.opcions-aplicacio .btn.disabled {
    opacity: 1;
    cursor: default;
}

.opcions-aplicacio .btn-group .btn {
    padding-left: 4px;
    padding-right: 4px;
}

.opcions-aplicacio > .btn-group > .btn:first-child {
    padding-left: .75rem;
}

.btn-group .btn.active { font-weight: bold; }

.loader {
    position: relative;
    min-height: 3rem;
}

.loader .spinner-border, .keywords-template .not-found {
    width: 3rem; height: 3rem;
    position: absolute; top: 0; left: 0; right: 0; bottom: 0; margin: auto;
}

#keywords-ranking {
    background: #333; color: #eee;
}

.keywords-template {
    position: relative;
}

.not-found {
    width: auto !important; text-align: center;
    padding: 15px 0;
}

.keywords-cloud, .keywords-table, .keywords-template .loader { min-height: 380px; }

.keywords-table {
    background: #eee;
    color: #111;
    padding: 10px;
}

.view-single-website .multiple-websites, .view-multiple-websites .single-website {display: none;}

.jqcloud{font:10px Helvetica,Arial,sans-serif;line-height:normal;overflow:hidden;position:relative}.jqcloud-word{margin:0;padding:0}.jqcloud-word.w1{color:#838383;font-size:100%}.jqcloud-word.w2{color:#9B9B9B;font-size:150%}.jqcloud-word.w3{color:#A7A7A7;font-size:200%}.jqcloud-word.w4{color:#B3B3B3;font-size:250%}.jqcloud-word.w5{color:#BEBEBE;font-size:300%}.jqcloud-word.w6{color:#CACACA;font-size:350%}.jqcloud-word.w7{color:#D6D6D6;font-size:400%}.jqcloud-word.w8{color:#D6D6D6;font-size:450%}.jqcloud-word.w9{color:#E2E2E2;font-size:500%}.jqcloud-word.w10{color:#EEEEEE;font-size:550%}.jqcloud-word a{color:inherit;font-size:inherit;text-decoration:none}
.jqcloud-word { transition: 200ms transform linear;}
.jqcloud-word:hover, .jqcloud-word:focus { background: #111; color: #eee !important; border-radius: 2px; transform: scale(1.2,1.2); z-index: 10;}

.jqcloud span { cursor: pointer; }

#website-info-list.multiple .website-header {
    border-bottom: 1px dotted #ccc;
    font-size: 8px; vertical-align: middle; padding-top: 5px; padding-bottom: 5px;
    
}

#website-info-list.multiple .website-legend, #website-keywords-compare-list h2 {
    padding-left: 25px;
    position: relative;
}

#website-keywords-compare-list h2 {
    padding-left: 35px;
}

#website-info-list.multiple .website-legend:after,
#website-keywords-compare-list h2:after {
    content: ' ';
    position: absolute;
    height: 15px; width: 15px; border-radius: 50%;
    background: #ccc;
    left: 0; top: 0; bottom: 0; margin: auto 0;
}

#website-keywords-compare-list h2:after {
    height: 25px; width: 25px;
}
    

#website-keywords-compare-list .website-keywords-compare {
    border-top: 1px dotted #eee; padding: 20px 0;
}

#website-keywords-compare-list .website-keywords-compare:last-child {
    border-bottom: none;
}

#website-info-list.multiple .website-header:nth-child(1) .website-legend:after,
#website-keywords-compare-list h2:after,
#website-keywords-compare-list .website-keywords-compare .jqcloud-word:hover,
.view-multiple-websites .search-result.website-1 .card-header {
    background: #007bff
}

.view-multiple-websites .search-result.website-1 .card-header,
.view-multiple-websites .search-result.website-2 .card-header,
.view-multiple-websites .search-result.website-3 .card-header,
.view-multiple-websites .search-result.website-4 .card-header,
.view-multiple-websites .search-result.website-5 .card-header {
    color: #fff;
    text-shadow: 0 0 5px rgba(0,0,0,.6);
}


#website-info-list.multiple .website-header:nth-child(2) .website-legend:after,
#website-keywords-compare-list .website-keywords-compare:nth-child(1) .keyword-second h2:after,
#website-keywords-compare-list .website-keywords-compare:nth-child(1) .keyword-second .jqcloud-word:hover,
.view-multiple-websites .search-result.website-2 .card-header {
    background: #dc3545
}

#website-info-list.multiple .website-header:nth-child(3) .website-legend:after,
#website-keywords-compare-list .website-keywords-compare:nth-child(2) .keyword-second h2:after,
#website-keywords-compare-list .website-keywords-compare:nth-child(2) .keyword-second .jqcloud-word:hover,
.view-multiple-websites .search-result.website-3 .card-header {
    background: #28a745
}

#website-info-list.multiple .website-header:nth-child(4) .website-legend:after,
#website-keywords-compare-list .website-keywords-compare:nth-child(3) .keyword-second h2:after,
#website-keywords-compare-list .website-keywords-compare:nth-child(3) .keyword-second .jqcloud-word:hover,
.view-multiple-websites .search-result.website-4 .card-header {
    background: #b88a00
}

#website-info-list.multiple .website-header:nth-child(5) .website-legend:after,
#website-keywords-compare-list .website-keywords-compare:nth-child(4) .keyword-second h2:after,
#website-keywords-compare-list .website-keywords-compare:nth-child(4) .keyword-second .jqcloud-word:hover,
.view-multiple-websites .search-result.website-5 .card-header {
    background: #B7179F
}

#website-info-list.multiple .website-header.main-website {
    background: rgba(0,0,0,0.1);
}

#website-info-list.multiple .website-header .h3 { font-size: 18px; display: inline; margin: 0; vertical-align: middle;}
#website-info-list.multiple .website-header .h1 { font-size: 18px;}
#website-info-list.multiple .website-header a { font-size: 8px; vertical-align: middle;}

#website-info-list.multiple .website-change, #website-info-list.multiple .domain-change { font-size: 14px;}

#websites-compare .modal-body { height: 200px; overflow: auto; }
#websites-compare .form-check { border-bottom: 1px dotted #ccc; margin-bottom: 0; padding-top: 0.5rem; padding-bottom: 0.5rem;}

.search-content {
    min-height: 510px;
}

.search-result a.search-title {
    font-size: 17px;
    line-height: 1.3;
    font-weight: normal;
    margin: 0;
    padding: 0;
    color: #1a0dab;
}

.search-result a:hover.search-title {
    text-decoration: underline;
}

.search-result .search-visible-link {
    font-size: 13px;
    padding-top: 1px;
    line-height: 1.5;
    color: #006621;
}

.search-result .search-snippet {
    font-size: 11px;
    line-height: 1.58;
    color: #545454;
    max-width: 48em;
    min-height: 40px
}


@media (max-width: 767px){
    .website-toolbar {
        text-align: center;
    }
    
    .website-toolbar .btn {
        margin-top: 4px;
    }
    
    .navbar .btn, .navbar-brand {
        font-size: 12px;
    }
    .navbar {
        padding-left: 10px;
        padding-right: 3px;
    }
    
    #keyword .display-4 {
        font-size: 2em;
    }
}