/* ==========================================================================
   Candidate overview
   ========================================================================== */

#candidateOverview {

}

#candidateOverview a.candidate {
    display:            block;
    position:           relative;
    margin-bottom:      2em;
    overflow:           hidden;
    -webkit-transition: none;
    transition:         none;
}

#candidateOverview a.candidate .candidateImage {
    position: relative;
    overflow: hidden;
}

#candidateOverview a.candidate .candidateImage img {
    -webkit-transition: transform .3s;
    transition:         transform .3s;
    transform:          scale(1);
}

#candidateOverview a.candidate .candidateName {
    position:           absolute;
    width:              100%;
    bottom:             0;
    background:         rgba(45, 60, 75, .9);
    color:              #FFF;
    text-align:         center;
    padding:            10px;
    -webkit-transition: background-color .3s;
    transition:         background-color .3s;
}

#candidateOverview a.candidate .candidateName h4 {
    color:     #FFF;
    padding:   0;
    margin:    0;
    font-size: 1.2em;
}

#candidateOverview a.candidate .candidateName h4 small {
    color: #FFF;
}

#candidateOverview a.candidate:hover .candidateImage img {
    transform: scale(1.1);
}

#candidateOverview a.candidate:hover .candidateName {
    background: var(--cdu-orange);
}

@media only screen and (min-width: 550px) {
    #candidateOverview {
        display:        flex;
        flex-direction: row;
        width:          calc(100% + 2em);
        margin-left:    -1em;
        flex-wrap:      wrap;
    }

    #candidateOverview a.candidate {
        width:        calc(50% - 2em);
        margin-left:  1em;
        margin-right: 1em;
    }
}

@media only screen and (min-width: 850px) {

    #candidateOverview a.candidate {
        width: calc(33.3333333% - 2em);
    }
}

@media only screen and (min-width: 1200px) {
    /*#candidateOverview a.candidate {*/
    /*    width: calc(25% - 2em);*/
    /*}*/
}

/* ==========================================================================
   Candidate search
   ========================================================================== */

#searchCandidateMask {
    margin-bottom: 1em;
    background:    var(--cdu-red);
    padding:       1em;
    color:         #FFF;
}

input#streetSearch {
    padding:            1em;
    font-family:        'Inter', Arial, Helvetica, Verdana, sans-serif;
    font-weight:        700;
    font-size:          1em;
    background:         #EEE;
    border:             1px solid #AAA;
    -webkit-transition: all .3s;
    transition:         all .3s;
    display:            inline-block;
    width:              100%;
    max-width:          400px;
    outline:            0;
    color:              var(--cdu-petrol);
}

input#streetSearch:hover,
input#streetSearch:focus {
    border-color: #333;
}

input#streetSearch:focus {
    background: #FFF;
}

.autocomplete-suggestions {
    border:     1px solid #333;
    border-top: none;
    background: #FFF;
    overflow:   auto;
    box-shadow: 0 .8em 1em rgba(0, 0, 0, .3);
}

.autocomplete-suggestion {
    padding:            2px 5px;
    white-space:        nowrap;
    overflow:           hidden;
    -webkit-transition: all .3s;
    transition:         all .3s;
    cursor:             pointer;
}

.autocomplete-selected {
    background: #F0F0F0;
}

.autocomplete-suggestions strong {
    font-weight: bold;
    color:       var(--cdu-orange);
}

.autocomplete-group {
    padding: 2px 5px;
}

.autocomplete-group strong {
    display:       block;
    border-bottom: 1px solid #000;
}

/* ==========================================================================
   Candidate details
   ========================================================================== */

#cadidateDetailContainer {
    display:        flex;
    flex-direction: column;
    background:     var(--cdu-petrol);
}

#cadidateDetailContainer #candidateImage {
}

#cadidateDetailContainer #candidateDetails {
    padding:     1em;
    display:     flex;
    align-items: center;
    line-height: 1.3em;
    color:       #555;
}

#cadidateDetailContainer #candidateDetails h2 {
    margin-bottom: .1em;
    color:         var(--cdu-red);
    font-weight:   600;
}

#cadidateDetailContainer #candidateDetails h4 {
    color:         #FFF;
    margin-bottom: .1em;
    font-size:     1em;
    font-weight:   400;
}

#cadidateDetailContainer #candidateDetails h4:nth-of-type(1) {
    font-weight: 600;
}

#cadidateDetailContainer #candidateDetails a {
    color: var(--cdu-red);
}

#cadidateDetailContainer #candidateDetails a:hover {
    color: #FFF;
}

#cadidateDetailContainer #candidateImage .zoom img {
    border: #2E9AD0 !important;
}

#candidateText {
    width:  100%;
    margin: 2em 0;
}

#candidateText ul {
    margin-bottom:   3em;
    list-style-type: none;
}

#candidateText ul li {
    position:  relative;
    font-size: .95em;
}

#candidateText ul li:before {
    position:    absolute;
    content:     '\f0c8';
    font-size:   8px;
    font-family: FontAwesome;
    width:       20px;
    height:      20px;
    left:        -13px;
    top:         1px;
    color:       var(--cdu-orange);
}

#candidateText p {
    color: #000;
}

@media only screen and (min-width: 600px) {

    #cadidateDetailContainer {
        flex-direction: row;
        flex-wrap:      wrap;
        width:          100%;
    }

    #cadidateDetailContainer.right {
        flex-direction: row-reverse;
    }

    #cadidateDetailContainer #candidateImage {
        margin-bottom: 0;
        width:         50%;
    }

    #cadidateDetailContainer #candidateDetails {
        width:   50%;
        padding: 1em 2em;
    }
}

@media only screen and (min-width: 860px) {

    #cadidateDetailContainer #candidateImage {
        width: 40%;
    }

    #cadidateDetailContainer #candidateDetails {
        width: 60%;
    }
}

table.gremiumFunc {
    border: none;
}

table.gremiumFunc tr:first-of-type td {
    font-weight: bold;
}

table.gremiumFunc tr td {
    padding: 5px;
}

table.gremiumFunc tr td:nth-of-type(2) {
    padding-left: 1em;
}