form {
    height: 100%;

    &.form_group {
        margin: 0 -25px;
    }

    label {
        text-align: left;
        display   : block;
        &.text-center {
            text-align: center;
        }
    }

    &>div {
        flex: 1;
    }

    .form-column {
        padding-left: 26px;

        &:first-child {
            padding-left: 0;
        }

        &.buttonColumn {
            max-width: 237px;
        }
    }

    .inputColumn {
        position        : relative;
        background-color: #ffffff;

        .customIcon {
            position  : absolute;
            font-size : 25px;
            color     : customColor(dark_secondary);
            top       : 50%;
            margin-top: -12.5px;
            left      : 21px;

            &.icon-eposta {
                left     : 24px;
                font-size: 25px;
                color    : rgba(0, 0, 0, 0.25);
            }

            &.icon-user2 {
                font-size: 25px;
                color    : rgba(0, 0, 0, 0.25);
            }
        }

    }

    input[type="text"],
    input[type="email"],
    textarea,
    button,
    .selectArea {
        width        : 100%;
        height       : 50px;
        border       : none;
        outline      : 0;
        background   : none;
        color        : #9a9a9a;
        border-radius: 2px;
        font-size    : 1.209rem;

        &::placeholder {
            color: rgba(154, 154, 154, 0.8);
        }
    }

    input[type="text"] {
        padding-left  : 65px;
        font-family   : 'GilroySemibold';
        padding-right : 12px;
        letter-spacing: -0.7px;
    }

    input[type="email"] {
        font-family : 'GilroySemibold';
        padding-left: 65px;
    }

    textarea {
        height: auto;
    }

    select {
        width  : 100%;
        height : 100%;
        border : none;
        outline: 0;
    }

    .form_group {
        position: relative;
        margin  : 9px 0;

        .error_message {
            top             : -4px;
            background-color: #ffffff;
        }

        label {
            font-family: 'GilroyBold';
            font-size  : 1.25rem;
            color      : #2a2a2a;
            margin-top : 8px;
        }

        select {
            font-family: 'GilroyMedium';
            color      : #2a2a2a;
            font-size  : 1.170rem;
        }

        textarea {
            height     : auto;
            padding-top: 10px;
        }

        .selectArea {
            margin      : 0 0;
            padding-left: 0;
        }

        button {
            margin-top: 25px;
        }
    }
    .form_col{
        input[type="text"],
        input[type="email"],
        textarea,
        input[type="password"],
        .selectArea {
            font-family : 'GilroySemibold';
            font-size   : 11.09px;
            color       : rgba(23, 23, 23, 1);
            height      : 45px;
            padding-left: 18px;
            margin      : 0 0;
            border      : 1px solid #e1e1e1;
            width       : 100%;

            &::placeholder {
                color: rgba(23, 23, 23, 0.52);
            }
        }
    }

    .inputArea {
        position: relative;
        height  : 45px;
        width   : 100%;

        .customIcon {
            position  : absolute;
            left      : 10px;
            top       : 50%;
            margin-top: -10px;

            &.icon-padlock {
                margin-top: -11px;
            }
        }
    }

    .icon-user {
        font-size: 20px;
        color    : rgba(23, 23, 23, 0.52);
    }

    .icon-padlock {
        font-size: 22px;
        color    : rgba(23, 23, 23, 0.52);
    }

    .justifyBetween {
        justify-content: space-between;
    }

    &.loginForm {
        .forgotLink {
            font-family: 'GilroyBold';
            font-size  : 11.09px;
            color      : rgba(23, 23, 23, 0.52);
            transition : all .3s ease-in-out;

            &:hover {
                color: rgba(23, 23, 23, 1);
            }
        }

        .secondaryButton {
            font-size : 11.09px;
            margin-top: 5px;
        }

        .facebookLoginButton {
            background-color: #365899;
            border          : 2px solid #365899;
            color           : #ffffff;
            font-family     : 'GilroyBlack';
            font-size       : 11.09px;
            display         : flex;
            align-items     : center;
            justify-content : center;
            height          : 45px;
            margin-top      : 13px;
            transition      : all .3s ease-in-out;

            &:hover {
                color           : #365899;
                background-color: #ffffff;
                cursor          : pointer;

                .customIcon {
                    color: #365899;
                }
            }

            .customIcon {
                font-size : 18px;
                transition: all .3s ease-in-out;
            }
        }

        .form_group {

            input[type="text"],
            input[type="email"],
            textarea,
            input[type="password"],
            .selectArea {
                padding-left: 36px;
                font-family : 'GilroyBold';
                font-size   : 11.09px;
                color       : rgba(23, 23, 23, 0.52);
            }

            .error_message {
                top             : -6px;
                background-color: #ffffff;
            }
        }

        .form_row {
            margin-top: 10px;
        }

        .cb-checkbox {
            span {
                &.text {
                    font-family: 'GilroyBold';
                    font-size  : 11.09px;
                    color      : rgba(23, 23, 23, 0.52);
                    transition : all .3s ease-in-out;
                }
            }

            &:hover {
                span {
                    &.text {
                        color: rgba(23, 23, 23, 1);
                    }
                }
            }
        }
    }
}
.grayButton{
    width: 230px;
    height: 52px;
    display: flex;
    align-items: center;
    justify-content: center;
    font-family: 'GilroyBold';
    font-size:1.486rem;
    color:#9b9b9b;
    background-color:#f4f4f4;
    border:2px solid #f4f4f4;
    // margin: 35px auto;
    outline: 0;
    &:hover{
        background-color:rgba(0,0,0,0);
        border:2px solid #9b9b9b;
        cursor: pointer;
        outline: 0;
    }
}
.noneM {

    input[type="text"],
    input[type="email"],
    textarea,
    input[type="password"],
    .selectArea {
        margin: 0 !important;
    }
}

.noneIcon {

    input[type="text"],
    input[type="email"],
    textarea,
    input[type="password"],
    .selectArea {
        padding-left: 12px !important;
    }
}

.form_row {
    display    : flex;
    align-items: center;
    width      : 100%;

    .form_col {
        width: 50%;
    }

    &.justify-right {
        justify-content: flex-end;
    }
}

.eBultenSuccess {
    display: none;

    &.active {
        display: block;
    }
}

.form_col {
    display       : flex;
    flex-direction: column;
    position      : relative;
    padding       : 0 25px;
}

.error_message {
    position   : absolute;
    color      : #d60000;
    bottom     : 0;
    opacity    : 0;
    visibility : hidden;
    overflow   : hidden;
    font-family: 'GilroyRegular';
    transition : all .3s linear;

    &.error {
        opacity   : 1;
        visibility: visible;
        overflow  : visible;
        bottom    : calc(100% - 7px);
    }
}

/*Button*/
.secondaryButton {
    font-family     : 'GilroyBlack';
    transition      : all .3s ease-in-out;
    background-color: #d60000;
    border          : 1px solid #d60000;
    color           : #ffffff;

    &:hover {
        cursor          : pointer;
        color           : #d60000;
        background-color: #ffffff;
    }
}

.button {
    font-family    : 'GilroyBlack';
    font-size      : 1.302rem;
    color          : #171717;
    opacity        : 0.38;
    border         : 3px solid rgba(0, 0, 0, 0.09);
    height         : 65px;
    width          : 228px;
    display        : flex;
    align-items    : center;
    justify-content: center;
    margin-left    : 30px;
    transition     : all .3s ease-in-out;

    &:first-child {
        margin-left: 0;
    }

    .customIcon {
        color       : #171717;
        font-size   : 25px;
        margin-right: 30px;
    }

    &:hover {
        opacity: 0.5;
        border : 3px solid rgba(0, 0, 0, 0.2);
    }

}
.editForm{
    margin-bottom: 50px;
    .form_group{
        input[type="text"],
        input[type="password"],
        input[type="email"]{
            font-family: 'GilroySemibold';
            font-size:1.197rem;
            color:#171717;
        }
        input[type="password"]{
            color: rgba(0,0,0,0.52);
            letter-spacing: 5.5px;
            font-size: 35.6px;
        }       
    }   
    label{
        font-family: 'GilroySemibold';
        font-size:1.197rem;
        color:#171717;
        margin-bottom:16px;
    }
    .passwordSee{
        position: absolute;
        right: 15px;
        width: 22px;
        height: 22px;
        top: 50%;
        margin-top: -11px;
        color:rgba(0,0,0,0.27);
        &:hover{
            .customIcon{
                cursor: pointer;
                color:rgba(0,0,0,1);
            }
            #seePasswordCheck{
                cursor: pointer;
            }
        }
        .customIcon{
            color:rgba(0,0,0,0.27);
            position: relative;
            top: auto;
            left: auto;
            margin-top: 0;
            font-size: 22px;
            transition: all .3s ease-in-out;
        }
        #seePasswordCheck{
            position: absolute;
            top: 0;
            width: 100%;
            height: 100%;
            right: 0;
            z-index: 9;
        }
        #seePasswordCheck:checked~.icon-eye{
            color:rgba(0,0,0,1);
        }
    }

}
.editInput{
    position: relative;
    .customIcon{
        &.icon-edit{
            font-size:25px;
            color:rgba(0,0,0,0.27);
            position: absolute;
            right: 15px;
            top:50%;
            margin-top:-12.5px;
            left: auto;
        }
    }
}

#filigransizPhoto{
    textarea{
        height: auto;
    }
}
@media screen and(max-width:1120px) {
    form {
        &#contactForm {
            margin: 0 0;
        }
    }
}

@media screen and(max-width:768px) {
    form {
        display: block;
        padding: 20px 25px 20px 35px;

        .form-column {
            padding-left: 0;
            margin      : 10px 0;

            &.buttonColumn {
                max-width: initial;
            }
        }

        .form_group {

            input[type="text"],
            input[type="email"],
            textarea,
            .selectArea {
                margin: 5px 0;
            }
        }

        .form_col {
            padding: 0;
        }
    }

    .form_row {
        display: block;
        margin : 0;

        .form_col {
            width: 100%;
        }
    }
    .editForm{
        .form_group{
            input[type="password"]{
                color: rgba(0,0,0,0.52);
                letter-spacing: 3.5px;
                font-size: 18px;
            }      
            label{
                margin-bottom: 6px;
                margin-top:20px;
            } 
        }   
        .passwordSee{
            width: 20px;
            height: 20px;
            margin-top: -7px;
        }
    }
}

@media screen and (max-width:480px) {
    form {

        input[type="text"],
        button {
            font-size: 1.05rem;
        }

        &.form_group {
            padding: 20px 0;
        }
    }
    .form_row {
        padding: 20px 0;
    }

}