﻿body {
    font-family: OpenSansRegular;
    background-color: #f2f2f2;
}

.body-container {
    float: left;
    width: 100%;
    padding: 80px 0px 50px 0px;
    overflow: hidden;
}

.forgot-div {
    width: 60%;
    margin: 50px auto;
    background-color: #fff;
    box-shadow: 0px 0px 10px #8c8989;
    transition: visibility 0s, opacity 0.5s linear;
    padding: 50px 70px;
    border-radius: 4px;
}

.forgot-head {
    text-align: center;
    font-size: 24px;
    font-family: OpenSansBold;
    text-transform: uppercase;
}

.forgot-desc {
    text-align: center;
    font-size: 14px;
    font-family: OpenSansRegular;
    padding-top: 10px;
    color: #6b6b6b;
}

.forgot-form {
    float: left;
    width: 100%;
    margin-top: 50px;
}

.forgot-center {
    width: 70%;
    margin: 0 auto;
}

.form-controls {
    float: left;
    width: 100%;
    padding: 5px;
    overflow: hidden;
    border-bottom: 1px solid #ccc;
}

.forgot-icon {
    float: left;
    background-position: center center;
    background-repeat: no-repeat;
    width: 24px;
    height: 24px;
}

.forgot-text {
    border: 0;
    color: #666666;
    outline: none;
    width: 90%;
    padding-left: 10px;
}

.email-icon {
    background-image: url(https://cdn2.onference.in/images/cutouts/mail.png);
    background-size: 18px 13px;
}

.form-error {
    width: calc(100% - 76px);
}

.get-help {
    width: 76px;
    float: right;
    font-size: 14px;
    color: #666666;
}

    .get-help i {
        font-size: 16px;
    }

    .get-help i:focus {
        outline: none;
    }

.submit-query {
    color: #ff9933 !important;
    cursor: pointer !important;
}

.btn-forgot {
    margin: 30px 0px 20px;
    float: left;
    overflow: hidden;
    width: 100%;
    border-radius: 10px;
    background-color: #ff9933;
    padding: 10px;
    text-align: center;
    font-family: OpenSansBold;
    font-size: 16px;
    color: #ffffff;
    cursor: pointer;
}

/*#region modal popup custom css */

.md-content {
    background: #fff !important;
    width: 100%;
    float: left;
}

.md-show.md-effect-12 ~ .md-overlay {
    background: #ffa346;
}

.md-overlay {
    background: rgba(12, 12, 12, 0.59);
}

.custom-close {
    position: absolute;
    height: 25px;
    width: 25px;
    right: 5px;
    top: -30px;
    background-image: url(https://cdn2.onference.in/images/md-close.png);
    background-repeat: no-repeat;
    padding: 0px !important;
    cursor: pointer;
}

.md-close {
    display: none;
}

/*#endregion */

/*#region query popup custom css */

.modal-query-submit {
    float: left;
    padding: 40px 80px !important;
    overflow-y: scroll;
}

.query-title {
    font-family: OpenSansBold;
    color: #333;
    text-align: center;
    font-size: 18px;
}

#query-form {
    float: left;
    width: 100%;
    margin-top: 40px;
}

.query-input-group {
    float: left;
    width: 100%;
    overflow: hidden;
}

    .query-input-group span.label {
        background-color: #ffae18;
        padding: 5px 18px;
        border: 1px solid #cccccc;
        float: left;
        border-top-left-radius: 4px;
        border-top-right-radius: 4px;
        border-bottom-left-radius: 4px;
        width: 50px;
        height: 39px;
        padding: 5px 0px;
    }

    .query-input-group span i {
        color: #ffffff;
        width: 100%;
        text-align: center;
    }

    .query-input-group input[type="text"] {
        float: left;
        border: 0px;
        border-bottom: 1px solid #cccccc;
        width: 85%;
        height: 39px;
        padding: 5px 15px;
        outline: none;
        font-size: 14px;
        font-family: OpenSansRegular;
    }

    .query-input-group textarea {
        float: left;
        border: 0px;
        border-bottom: 1px solid #cccccc;
        width: 85%;
        padding: 5px 15px;
        outline: none;
        font-size: 14px;
        font-family: OpenSansRegular;
    }

    .query-input-group span.error {
        float: left;
        width: 100%;
        color: red;
        font-size: 12px;
        height: 18px;
        font-family: OpenSansRegular;
        padding-left: 60px;
    }

    .char-count {
        float: left;
        color: #666666;
        font-size: 12px;
        text-align: right;
        width: 80px;
    }

.query-form-submit {
    float: left;
    width: 100%;
    overflow: hidden;
    padding-top: 20px;
}

    .query-form-submit button {
        background-color: #ffae18;
        color: #fff;
        font-size: 16px;
        font-family: OpenSansRegular;
        padding: 10px 50px;
        outline: none;
    }

/*#endregion */

.swal2-container {
    z-index: 2000 !important;
}

/*#region media queries */

@media only screen and (max-width : 1321px) and (min-width: 1209px) {
}

@media only screen and (max-width: 1208px) and (min-width: 992px) {
}
/*@media only screen and (max-width : 1024px) {
}*/
/*Custom Layout instaed 959px*/
@media only screen and (max-width : 991px) {
    .body-container {
        padding: 100px 0px 50px 0px;
    }

    .forgot-div {
        width: 70%;
        margin: 0px auto;
        padding: 50px;
    }

    .forgot-center {
        width: 100%;
    }
}
/* Medium Devices, Desktops */
@media only screen and (max-width : 959px) {
    .body-container {
        padding: 100px 0px 50px 0px;
    }

    .forgot-div {
        width: 70%;
        margin: 0px auto;
        padding: 50px;
    }

    .forgot-center {
        width: 100%;
    }
}
/* Small Devices, Tablets */
@media only screen and (max-width : 768px) {
    .body-container {
        padding: 100px 0px 60px 0px;
    }

    .forgot-div {
        width: 80%;
        margin: 0px auto;
        padding: 40px 20px;
    }

    .forgot-form {
        margin-top: 40px;
    }

    .forgot-center {
        width: 90%;
    }
}
/* Extra Small Devices, Phones */
@media only screen and (max-width : 480px) {
    .body-container {
        padding: 90px 0px 60px 0px;
    }

    .forgot-div {
        width: 85%;
        margin: 0px auto;
        margin-top: 10px;
        padding: 30px 10px;
    }

    .forgot-form {
        margin-top: 20px;
    }

    .forgot-center {
        width: 90%;
    }
}
/* Custom, iPhone Retina */
@media only screen and (max-width : 320px) {
    .body-container {
        padding: 90px 0px 60px 0px;
    }

    .forgot-div {
        width: 85%;
        margin: 0px auto;
        margin-top: 10px;
        padding: 30px 10px;
    }

    .forgot-form {
        margin-top: 20px;
    }

    .forgot-center {
        width: 90%;
    }
}
/*#endregion */
