/**
 * @copyright 2015 MarkCon
 * @link http://www.markcon.hu
 */

@CHARSET "UTF-8";

/* Profile oldal

    Mindegyik elején: #profile
     Alváltozatok: #profile.Index, #profile.Activate, #profile.ResendActivate
*/

/*  ----------  HEADER  ----------  */

#profile .Header {
    padding: 50px 0;
}

/*  ----------  FORM  ----------  */

    #profile .Form {
        width: 100%;
        background-image: url("../../Global/image/pattern-blue.png");
        background-repeat: repeat;
        position: relative;
        padding-top: 50px;
    }

    #profile .Form .Row {
         margin-bottom: 30px;
         padding-bottom: 30px;
         border-bottom: 1px solid rgba(255, 255, 255, 0.5);
     }

    #profile .Form .Row.Profile {
        padding-bottom: 0;
        border-bottom: 0 none;
    }

    #profile .Form h2 {
        text-align: left;
        margin-bottom: 0.5em;
    }

    #profile .Form .InputWrapper{
     margin: 5px 0;
    }

    #profile .Form .InputWrapper .Connect {
        display: block;
        width: 36px;
        height: 36px;
        margin: 4px;
        position: absolute;
        top: 30px;
        right: 15px;
        white-space: nowrap;
        overflow: hidden;
        text-indent: -9999px;
        background-color: #1ce4ae;
        border-radius: 1px;
        background-image: url("image/connect.png");
        background-repeat: no-repeat;
        background-position: center;
    }

    #profile .Form .InputWrapper.facebookProfileUrl input[type="text"],
    #profile .Form .InputWrapper.googleProfileUrl input[type="text"] {
        padding-right: 54px;
    }

    #profile .Form .InputWrapper label{
        display: block;
        text-transform: uppercase;
        font-size: 26px;
        font-family: 'PT Sans Narrow';
        color: #fff;
        white-space: nowrap;
        overflow: hidden;
        text-overflow: ellipsis;
        line-height: 30px;
        padding-left: 10px;
    }

    #profile .Form .Row.Buttons {
         padding-bottom: 30px;
         padding-top: 30px;
         position: relative;
         margin-bottom: 0;
     }

    #profile .Form .Row.Buttons:before {
        content: "";
        position: absolute;
        top: 0;
        left: -50%;
        right: -50%;
        height: 3px;
        z-index: 0;
        display: block;
        background-color: rgba(255, 255, 255, 0.5);;
    }

    #profile .Form .Row.Buttons .InputWrapper {
        width: 100%;
        text-align: right;
    }

    #profile .Form .InputWrapper button {
        display: inline-block;
        height: 44px;
        border-radius: 3px;
        line-height: 42px;
        text-align: center;
        text-decoration: none;
        text-transform: uppercase;
        font-size: 24px;
        font-family: 'PT Sans Narrow';
        padding: 0 15px;
        cursor: pointer;
        background-clip: padding-box;
        font-weight: bold;
        border: 1px solid #8affdf;
        background-color: #1ce4ae;
        color: #fff;
        min-width: 188px;
    }

    /* Responsive */
    @media (max-width: 768px) {
        #profile .Form .InputWrapper button {
            width: 100%;
        }
    }

/*  ----------  MESSAGE  ----------  */

    #profile .Overlay {
        z-index: 1;
        background-color: rgba(232,232,232,0.8);

        position: fixed;
        width: 100%;
        height: 100%;
        top: 0;
        left: 0;
    }

    #profile .MessageDialog {
        position: absolute;
        top: 50%;
        left: 50%;
        -webkit-transform: translate(-50%,-50%);
        -moz-transform: translate(-50%,-50%);
        -ms-transform: translate(-50%,-50%);
        transform: translate(-50%,-50%);
        background-color: #fff;
        margin: 0;
        width: auto;
        padding: 30px;
        border-radius: 5px;
        z-index: 1;
    }

    #profile .MessageDialog.Error {
        border: 5px solid #e46e4e;
    }

    #profile .MessageDialog.Success {
        border: 5px solid #21deb5;
    }

    #profile .MessageDialog .Message {
        margin: 0;
        min-height: 0;
        font-size: 26px;
        background-repeat: no-repeat;
        background-position: left top;
        background-size: 30px 32px;
        line-height: 28px;
        padding: 0 0 0 40px;
        min-height: 32px;
    }

    #profile .MessageDialog .Message.Error {
        background-image: url("image/error.png");
        color: #e46e4e;
    }

    #profile .MessageDialog .Message.Success {
        background-image: url("image/success.png");
        color: #21deb5;
    }