
/*---Option1--*/
.alert-bx {
    width: 100%;
    margin: auto;
    background: #fefefe;
    margin-top: 15%;
    border: 1px solid #ededed;
    border-radius: 3px 3px 0px 0px;
    background: #fefefe;
    padding: 80px 30px 20px;
    position: relative;
    box-shadow: 0px 0px 13px rgba(0, 0, 0, 0.06);
}

.alert-container {
    width: 680px;
    margin: auto;
    position: relative;
    left: 50%;
    margin-left: -340px;
}

.form-container {
    width: 100%;
    margin: auto;
    position: relative;
}

.alert-bx h6, .alert-infor h6 {
    font-size: 18px;
    margin-bottom: 30px;
    color: #249d6a;
}

.access_denied h2, .button-link:after, input[type=submit]:hover {
    background: #249d6a;
}

.button-green, .ruActions .ruAdd {
    background: #249d6a !important;
    color: #fff !important
}

.icona {
    text-align: center;
    font-size: 125px;
    line-height: 125px;
    color: #249d6a;
    margin-top: -20px;
    /*  margin-right: 35px;*/
}

.alert-bx .icon-business-card {
    font-size: 48px;
    position: absolute;
    right: 47px;
    margin-top: 34px;
    color: #249d6a;
}
/*.alert-section .next1{
	position: absolute;
    bottom: 95px;
    z-index: 9;
    left: 5%;
} 
.alert-section .prevw1{
	    position: absolute;
    bottom: 95px;
    z-index: 9;
    left: 115px;
}*/
.sub-icon {
    top: -48px !important;
    left: 41% !important;
    box-shadow: 0px -5px 7px rgba(220, 220, 220, 0.5) !important;
    width: 90px !important;
    height: 90px !important;
    line-height: 90px !important;
    font-size: 60px !important;
}

/*---Option1--*/

/*---Option2--*/
.alert-box {
    width: 680px;
    margin: auto;
    margin-top: 100px;
    overflow: hidden;
    box-shadow: 0px 0px 14px rgba(0, 0, 0, 0.06);
}

.skew-lft {
    width: 366px;
    position: relative;
    color: #FFF;
    background: #fefefe;
    float: left;
    padding: 20px 0px 20px 20px;
    border: 1px solid #dbdbdb;
    height: 245px;
}

    .skew-lft:after {
        content: " ";
        position: absolute;
        display: block;
        width: 100%;
        height: 100%;
        top: -1px;
        left: 2px;
        background: #fff;
        transform-origin: bottom left;
        -ms-transform: skew(-30deg, 0deg);
        -webkit-transform: skew(-30deg, 0deg);
        transform: skew(-30deg, 0deg);
        border: 1px solid #dbdbdb;
        border-left: none;
        border-bottom: none;
    }

.skew-rht {
    width: 168px;
    position: relative;
    color: #FFF;
    background: #f3f3f3;
    float: right;
    padding: 20px;
    height: 245px;
    border: 1px solid #d6d6d6;
}

.alert-infor {
    position: relative;
    z-index: 9;
    padding: 20% 0% 0% 5%;
}

.skew-rht:after {
    content: " ";
    position: absolute;
    display: block;
    width: 100%;
    height: 100%;
    top: 1px;
    left: -2px;
    background: #f3f3f3;
    transform-origin: top right;
    -ms-transform: skew(-30deg, 0deg);
    -webkit-transform: skew(-30deg, 0deg);
    transform: skew(-30deg, 0deg);
    border: 1px solid #d6d6d6;
    border-right: none;
    border-top: none;
}

.alert-icon .icon-business-card {
    font-size: 50px;
    position: absolute;
    left: 55px;
    color: #249d6a;
    z-index: 9;
    top: 127px;
}

.alert-icon .icon-male, .alert-icon .icon-direct-debit, .alert-icon .icon-law {
    font-size: 120px;
    position: absolute;
    left: -30px;
    color: #249d6a;
    z-index: 9;
    top: 90px;
}

.subject-icon {
    position: absolute;
    z-index: 9;
    border: 1px solid #ccc;
    border-radius: 100%;
    height: 60px;
    width: 60px;
    text-align: center;
    line-height: 60px;
    font-size: 44px;
    color: #249d6a;
    top: 100px;
    left: -105px;
    background: #fff;
}
/*
.noption2{
	bottom:70px !important;
    left: 5.5% !important;
}
.poption2{
	bottom: 70px !important;
	left: 125px !important;
} */
.infosize {
    color: #6f835c;
    font-size: 18px;
}
/*---Option2--*/

/*form styles*/
#msform {
    width: 100%;
    position: relative;
    margin-top: 30px;
    margin: auto;
    min-height: 400px;
}


    #msform .alert-section {
        width: 100%;
        margin: auto;
        float: left;
        position: relative;
    }

        /*Hide all except first fieldset*/
        #msform .alert-section:not(:first-of-type) {
            display: none;
        }

.back-btn {
    cursor: pointer;
    width: 100%;
    display: inline-block;
    margin-top: 15px;
    color: #249d6a;
    font-size: 18px;
}

    .back-btn i {
        font-size: 16px;
    }

@media screen and (max-width:800px) {
    .alert-container {
        width: 100%;
        margin-left: -50%;
    }

    .sub-icon {
        top: -30px !important;
        width: 60px !important;
        height: 60px !important;
        line-height: 60px !important;
        font-size: 40px !important;
    }

    .mobile-btn .noption2, .mobile-btn .poption2 {
        /* bottom: 20px !important;*/
    }

    .alert-bx {
        padding: 40px 15px 20px;
    }

    .back-btn {
        bottom: 0;
        margin: 0;
    }

    .alert-bx h6, .alert-infor h6 {
        font-size: 14px;
        line-height: 20px;
    }

    .alert-bx .icona {
        font-size: 79px;
        line-height: 80px;
        margin-right: 0;
    }

    .alert-bx .icon-business-card {
        display: none;
    }
}

@media screen and (max-width: 640px) {
    #msform, .alert-box, .alert-bx, .skew-lft, .skew-rht {
        width: 100%;
        border: none;
        height: auto;
    }
    /*.noption2, .poption2{bottom:20px !important;}
        .poption2{left: 110px !important;}
    */
    .alert-bx {
        padding-top: 60px;
    }

    .alert-infor {
        padding: 4% 0% 0% 0%;
    }

    .alert-center {
        text-align: center;
    }
}
