One Hat Cyber Team

Edit File: _candidates.scss

.candidates-profile.bg-color {
    background: $light-bg;
}
.candidate-profile-card {
    overflow: hidden;
    background: #fff;
    border-radius: 10px;
    position: relative;
    border: 1px solid rgba($color: #244034, $alpha: 0.1);
    @include transition (0.2s);
    &:hover {
        box-shadow: 0px 20px 35px rgba(22, 105, 70, 0.05);
    }
    &.grid-layout {
        padding: 27px 18px 30px;
        display: flex;
        flex-direction: column;
        width: 100%;
        .save-btn {
            color: #b9b9b9;
            position: absolute;
            top:10px;
            right: 10px;
            font-size: 18px;
            &:hover {
                color: $color-three;
            }
        }
    }
    &.favourite::before {
        content: '';
        position: absolute;
        width: 60px;
        height: 60px;
        background: $color-five;
        top:-30px;
        left: -30px;
        transform: rotate(45deg);
    }
    &.favourite::after {
        content: "\f586";
        font-family: bootstrap-icons !important;
        position: absolute;
        color: #fff;
        font-size: 13px;
        top:4px;
        left: 7px;
    }
    .cadidate-avatar {
        width: 80px;
        height: 80px;
        border-radius: 50%;
        &.online:before {
            content: '';
            position: absolute;
            width: 11px;
            height: 11px;
            border-radius: 50%;
            background: #00A939;
            top:5px;
            right: 8px;
        }
    }
    .candidate-name {
        font-family: $main-font;
        font-size: 18px;
        a:hover {
            color: $color-three;
        }
    }
    .candidate-post {
        font-size: 15px;
        color: rgba($color: #000, $alpha: 0.4);
    }
    .cadidate-skills {
        margin: 0 -2px;
        li {
            margin: 0 2px 5px;
            line-height: 25px;
            padding: 0 14px;
            border-radius: 30px;
            font-size: 12px;
            font-weight: 500;
            color: rgba($color: #000, $alpha: 0.55);
            background: rgba($color: #31795A, $alpha: 0.1);
            &.more {
                background: $color-two;
                color: #000;
            }
        }
    }
    .candidate-info span {
        font-size: 15px;
        color: rgba($color: $color-one, $alpha: 0.6);
    }
    .candidate-info div {
        font-size: 15px;
        font-weight: 500;
        color: $color-one;
        margin: 2px 0 0;
    }
    .profile-btn {
        font-size: 14px;
        font-weight: 500;
        letter-spacing: -0.5px;
        line-height: 40px;
        color: #fff;
        background: $color-five;
        text-align: center;
        padding: 0 18px;
        border-radius: 40px;
        &:hover {
            background: $color-three;
        }
    }
    .msg-btn {
        font-size: 14px;
        font-weight: 500;
        letter-spacing: -0.5px;
        line-height: 38px;
        color: $color-five;
        border: 1px solid $color-five;
        text-align: center;
        padding: 0 15px;
        border-radius: 40px;
        &:hover {
            background: $color-three;
            border-color: $color-three;
            color: #fff;
        }
    }
    &.list-layout {
        padding: 27px 30px 38px;
        .cadidate-skills {
            position: absolute;
            left: 0;
            bottom: -45px;
        }
        .right-side {
            width: calc(100% - 80px);
            padding-left: 30px;
        }
        .save-btn {
            width: 40px;
            height: 40px;
            line-height: 40px;
            border: 1px solid #E4E4E4;
            font-weight: 900;
            color: $color-five;
            font-size: 18px;
            &:hover {
                color: #fff;
                background: $color-five;
                border-color: $color-five;
            }
        }
    }
}
// Candidates Profile Details
.candidates-profile-details {
    position: relative;
    .inner-card {
        background: #fff;
        border-radius: 10px;
        padding: 25px 35px 20px;
        &.border-style {
            border: 1px solid #DEDEDE;
            position: relative;
            border-radius: 15px;
            padding: 35px 35px 20px;
            .title {
                position: absolute;
                background: #fff;
                padding: 0 10px;
                top:-18px;
                left: 25px;
                z-index: 1;
            }
        }
    }
    .title {
        font-size: 28px;
        font-weight: 500;
        font-family: $main-font;
        margin-bottom: 22px;
    }
    .video-post {
        background: url(../images/candidates/img_10.jpg) no-repeat center;
        background-size: cover;
        height: 430px;
        border-radius: 15px;
        .video-icon {
            width: 65px;
            height: 65px;
            background: $color-two;
            color: #000;
            font-size: 45px;
            line-height: 65px;
            padding-left: 7px;
            &:hover {
                background: $color-three;
                color: #fff;
            }
        }
    }
    .time-line-data .info {
       padding: 0 0 45px 65px;
       &:before {
            content: '';
            position: absolute;
            left: 22px;
            top:66px;
            bottom: 7%;
            width: 1px;
            background: #E1E1E1;
       }
       &:last-child {
            padding-bottom: 0;
            &::before {
                display: none;
            }
       }
       .numb {
            width: 45px;
            height: 45px;
            color: $color-five;
            border: 1px solid $color-five;
            position: absolute;
            left: 0;
            top:3px;
       }
       .text_1 {
            font-size: 14px;
            color: $color-five;
       }
       h4 {
            font-size: 18px;
            font-family: $main-font;
            margin: 5px 0 12px;
       }
    }
    .skill-tags {
        margin: 0 -8px;
        li {
            font-size: 16px;
            color: $color-four;
            margin: 18px 8px 0;
            line-height: 45px;
            padding: 0 30px;
            border-radius: 30px;
            background: #EFF6F3;
            &.more {
                width: 45px;
                height: 45px;
                border-radius: 50%;
                padding: 0;
                color: #000;
                text-align: center;
                background: $color-two;
            }
        }
    }
    .candidate-portfolio-slider .slick-dots {
        padding: 0;
        margin: 0;
        position: absolute;
        right: 10px;
        top:-35px;
    }
}
.cadidate-profile-sidebar {
    .bg-wrapper {
        background: #fff;
        border-radius: 15px;
        padding: 0 20px 25px;
        &.bg-color {
            background: $light-bg;
        }
    }
    .cadidate-bio {
        .cadidate-avatar {
            width: 80px;
            height: 80px;
        }
        .cadidate-name {
            font-family: $main-font;
            font-size: 20px;
            margin: 18px 0 20px;
        }
        .invite-btn {
            font-size: 15px;
            letter-spacing: -0.5px;
            color: #008FDF;
            text-decoration: underline;
        }
        ul li {
            border-top: 1px solid #E6E6E6;
            padding: 14px 0;
            span {
                font-size: 15px;
                color: rgba($color: $color-one, $alpha: 0.6);
            }
            div {
                font-size: 15px;
                font-weight: 500;
                color: $color-one;
                margin: 4px 0 0;
                a:hover {
                    text-decoration: underline;
                    color: $color-one;
                }
            }
        }
    }
    .sidebar-title {
        font-family: $main-font;
        font-size: 20px;
        margin: 0 0 15px;
    }
    .map-area {
        height: 235px;
        border-radius: 10px;
        overflow: hidden;
    }
    .email-form {
        p {
            font-size: 15px;
            line-height: 22px;
            padding: 20px 0 0;
        }
        label {
            font-size: 13px;
            font-weight: 500;
            color: $color-five;
            width: 65px;
            display: inline;
        }
        input {
            width: calc(100% - 65px);
            height: 45px;
            border-radius: 5px;
            border: 1px solid #e9e9e9;
            background: #fff;
            padding: 0 15px;
            font-size: 13px;
        }
        textarea {
            width: calc(100% - 65px);
            height: 135px;
            max-height: 135px;
            border-radius: 5px;
            border: 1px solid #e9e9e9;
            background: #fff;
            padding: 10px 15px;
            font-size: 13px;
            resize: none;
        }
    }
}