@import url('bootstrap.min.css');
body {
    background-image: url('../img/searchtile.png');
    background-repeat: repeat;
    text-align: center;
    height: 100%;
}

html {
    height: 100%;
}

#main {
    width: 50%;
    min-width: 500px;
    margin: auto;
    min-height: 100%;
    text-align: left;
    background: #222157;
    background-repeat: repeat;
    padding: 50px 60px;
    border: solid #ddd;

    border-width: 0 1px 1px 1px;
}

#main h1 {
    margin-top: 0;
    font-size: 35px;
}

#main ul {
    padding-left: 20px;
}

#main .error {
    border: 1px solid deepskyblue;
    background: white;
    color: white;
    padding: 20px;
    text-align: center;
    border-radius: 4px;
    margin-top: 10px;
}

#main .success {
    margin-top: 25px;
}

#main .success code {
    font-size: 12px;
    color: green;
    line-height: 13px;
}


#main .result-panel{
    margin-top: 10px;
    margin-bottom: 10px;
    background: white;
    color: black;
    font-size: medium;
    text-align: center;
}

#main .result-panel-reviewee{
    color: red;
}

#main .result-panel-score{
    font-size: x-large;
    font-weight: bold;
}

#main .result-panel-footer{
    font-size: smaller;
}

#main .attribute{
    text-align: center;
    color: black;
    padding-top: inherit;
    font-size: larger;
    font-weight: bold;
}

#main .attr-item{
    padding-left: 10px;
    padding-right: 10px;
    padding-top: 5px;
    padding-bottom: 5px;
    line-height: 1;
    text-align: center;
    font-size: 12px;
    width: 100px;
}

#main .attr-item-funny{
    background: #fff413;
}

#main .attr-item-attractive{
    background: #ff2124;
}

#main .attr-item-honest{
    background: #08e4f5;
}

#main .attr-item-happy{
    background: #07f529;
}

#main .attr-item-trustworthy{
    background: #fe009e;
}

#main .attr-item-talkative{
    background: #5e5ed4;
}

#main .attr-item-optimist{
    background: #ff7501;
}

#main .attr-item-passionate{
    background: #c500fe;
}

#main .attr-item-egotistical{
    background: #038f0A;
}

#main .attr-badge{
    border-top-left-radius: 4px;
    border-bottom-left-radius: 4px;
    border-top-right-radius: 0px;
    border-bottom-right-radius: 0px;
    padding: 5px;
    background: #e61663;
    float:left;
}

#main .logo{
    max-height: 100%;
    max-width: 100%;
    text-align: center;
    display: block;
}

.panel-default > .panel-heading-pink {
    background: #e61663;
    color: #fff;
}

#main .funny-color{
    color: #fff413;
    text-align: center;
    vertical-align: middle;
    display: inline-block;
}

#main .attractive-color{
    color: #ff2124;
    text-align: center;
    vertical-align: middle;
    display: inline-block;
}

#main .honest-color{
    color: #08e4f5;
    text-align: center;
    vertical-align: middle;
    display: inline-block;
}

#main .happy-color{
    color: #07f529;
    text-align: center;
    vertical-align: middle;
    display: inline-block;
}

#main .trustworthy-color{
    color: #fe009e;
    text-align: center;
    vertical-align: middle;
    display: inline-block;
}

#main .talkative-color{
    color: #5e5ed4;
    text-align: center;
    vertical-align: middle;
    display: inline-block;
}

#main .optimist-color{
    color: #ff7501;
    text-align: center;
    vertical-align: middle;
    display: inline-block;
}

#main .passionate-color{
    color: #c500fe;
    text-align: center;
    vertical-align: middle;
    display: inline-block;
}

#main .egotistical-color{
    color: #038f0A;
    text-align: center;
    vertical-align: middle;
    display: inline-block;
}

#main .alert-heading{
    text-align: center;
    color: black;
    padding-top: inherit;
    font-size: larger;
    font-weight: bold;
}

#main .download-btn{
    text-align: center;
    width: 120px;
    color: white;
    margin: 10%;
    font-weight: bold;
}