.contest-form {
    display: block;
    width: 100%;
    .form-group {
        margin: 30px 0;
        position: relative;
        .image-preview {
            position: absolute;
            top: 0;
            left: 0;
            background: $white;
            @include size(100%,100%);
            .remove {
                position: absolute;
                top: 10px;
                right: 10px;
                display: block;
                background: $red;
                @include size(20px,20px);
                @extend %arrowClose;
                cursor: pointer;
                &:before,
                &:after {
                    background: $white;
                    @include size(20px,2px);
                    pointer-events: none;
                }
            }
            img {
                width: auto;
                height: 100%;
            }
        }
    }
    label sup { color: $red; }
    input,
    textarea {
        background: rgba($grey, 0.4);
        border: 0;
        resize: none;
        &:focus {
            background: rgba($grey, 0.4);
            outline: none;
        }
        &[type="file"] {
            display: flex;
            @extend %flexCenterCenter;
            height: 160px;
            position: relative;
            &:before {
                content: attr(data-title);
                position: absolute;
                top: 0;
                left: 0;
                display: flex;
                @extend %flexCenterCenter;
                background: lighten($grey, 10%);
                @include size(100%,100%);
                font-weight: $light;
                color: $black;
                padding: 50px;
                text-align: center;
                pointer-events: none;
            }
        }
    }
    textarea {
        height: 160px;
        overflow: auto;
    }
    .col-form-label {
        position: relative;
        .suggestion {
            position: absolute;
            top: 12px;
            right: 0;
            display: block;
            @include size(20px,20px);
            &__trigger {
                display: flex;
                @extend %flexCenterCenter;
                background: $red;
                @include size(100%,100%);
                border-radius: 100%;
                font-weight: $bold;
                font-family: $title;
                color: $white;
                pointer-events: all;
                cursor: pointer;
            }
            &__box {
                position: absolute;
                top: 50%;
                left: 100%;
                display: block;
                background: lighten($grey, 5%);
                width: 400px;
                padding: 30px;
                color: $black;
                z-index: 100;
                margin-left: 20px;
                transform: translateY(-40%);
                text-align: center;
                pointer-events: none;
                opacity: 0;
                transition: 300ms linear;
                &:before {
                    content: '';
                    position: absolute;
                    top: 50%;
                    left: -30px;
                    @include size(30px,20px);
                    border-top: 30px solid transparent;
                    border-bottom: 30px solid transparent;
                    border-right: 20px solid lighten($grey, 5%);
                    transform: translateY(-50%);
                }
            }
            &:hover {
                .suggestion__box { opacity: 1; transform: translateY(-50%);}
            }
        }
    }
    .chars-check {
        .chars-check__input {
            position: relative;
            padding-bottom: 30px;
            .char-count {
                position: absolute;
                bottom: 0;
                right: 15px;
                display: flex;
                @extend %flexCenterEnd;
                @include size(100px,30px);
                color: $black;
                text-align: right;
            }
        }
    }
    .taken-col { position: relative; }
    .taken {
        position: absolute;
        top: 50%;
        left: 50%;
        display: flex;
        @extend %flexCenterCenter;
        width: 100%;
        height: 100%;
        transform: translate(-50%,-50%);
        pointer-events: none;
        &__icon {
            display: flex;
            @extend %flexCenterCenter;
            background: $red;
            @include size(20px, 20px);
            font-weight: $bold;
            font-family: $title;
            color: $white;
            border-radius: 100%;
            margin-right: 20px;
        }
    }
    .guideline {
        .dropdown { width: 50%; margin-bottom: 30px; }
        .guideline-block {
            position: relative;
        }
        .add-guideline {
            display: flex;
            @extend %flexCenterBetween;
            margin: 20px 0;
            &__add {
                display: block;
                background: $red;
                width: 50%;
                font-weight: $bold;
                font-family: $title;
                font-size: $f12;
                color: $white;
                padding: 8px 0;
                text-align: center;
                text-transform: uppercase;
                border: 0;
                position: relative;
                @extend %arrowClose;
                &:before,
                &:after {
                    left: auto;
                    right: 0;
                    background: $white;
                    @include size(16px,3px);
                    border-radius: 6px;
                }
                &:before { transform: translate(-50%,-50%); }
                &:after { transform: translate(-50%,-50%) rotate(90deg); }
            }
            &__remove {
                display: flex;
                @extend %flexCenterEnd;
                .label {
                    font-weight: $bold;
                    font-family: $title;
                    font-size: 0.9em;
                    color: $black;
                    text-transform: uppercase;
                    padding-right: 10px;
                }
                .icon {
                    display: block;
                    background: $red;
                    @include size(35px,35px);
                    border-radius: 100%;
                    position: relative;
                    @extend %arrowClose;
                    &:before,
                    &:after {
                        background: $white;
                        @include size(60%,4px);
                        border-radius: 6px;
                    }
                }
            }
        }
    }
    .checkboxes {
        display: flex;
        align-items: center;
        &-box {
            display: flex;
            align-items: center;
        }
        .form-check {
            position: relative;
            label {
                position: relative;
                margin-right: 30px;
                padding-left: 30px;
                input[type="radio"] {
                    position: absolute;
                    top: 50%;
                    left: 5px;
                    transform: translateY(-50%);
                }
                .radio-custom {
                    position: absolute;
                    top: 50%;
                    left: 0;
                    display: block;
                    @include size(20px,20px);
                    background: $grey;
                    border-radius: 100%;
                    transform: translateY(-50%);
                    &:after {
                        content: '';
                        position: absolute;
                        top: 50%;
                        left: 50%;
                        display: block;
                        background: $red;
                        @include size(10px,10px);
                        border-radius: 100%;
                        transform: translate(-50%,-50%) scale(0);
                        transition: 180ms linear;
                    }
                }
                & input:checked ~ .radio-custom {
                    &:after { transform: translate(-50%,-50%) scale(1); }
                }
            }
        }
    }
    .datepickers-box {
        .date {
            .row {
                div {
                    display: flex;
                    align-items: center;
                }
            }
        }
    }
    @media (max-width: 1023px) {
        .col-form-label {
            .suggestion {
                &__box {
                    top: calc(100% + 40px);
                    left: 50%;
                    width: 80vw;
                    transform: translate(-50%, 10%);
                    margin: 0;
                    &:before {
                        top: -30px;
                        left: 50%;
                        border-top: 0;
                        @include size(20px,30px);
                        border-left: 30px solid transparent;
                        border-right: 30px solid transparent;
                        border-bottom: 20px solid lighten($grey, 5%);
                        transform: translate(-50%,0);
                    }
                }
                &:hover {
                    .suggestion__box { opacity: 1; transform: translate(-50%,0); }
                }
            }
        }
    }
    @media (max-width: 767px) {
        .guideline {
            .dropdown { width: 100%; }
        }
        .col-form-label {
            .suggestion {
                &__box {
                    top: calc(100% + 40px);
                    left: auto;
                    right: 0;
                    width: 80vw;
                    transform: translate(0, 10%);
                    margin: 0;
                    &:before {
                        top: -30px;
                        left: auto;
                        right: 0;
                        border-top: 0;
                        @include size(20px,30px);
                        border-left: 30px solid transparent;
                        border-right: 30px solid transparent;
                        border-bottom: 20px solid lighten($grey, 5%);
                        transform: translate(0,0);
                    }
                }
                &:hover {
                    .suggestion__box { opacity: 1; transform: translate(0,0); }
                }
            }
        }
        .btn { width: 100%; margin: 10px 0; }
    }
}