.help_button {
    background: none;
    border: none;
    padding: 0;
    width: 16px;
}

.help_popup, .help_popup2, .help_popup3 {
    visibility: hidden;
    display: none;
    font-size: 1.4rem;
    background-color: #fff;
    text-align: left;
    border: 1px solid #A48036;
    padding: 10px;
    border-radius: 10px;
    position: absolute;
    z-index: 10;
    margin-left: 35px;
    margin-top: -10px;
    word-break: keep-all;
    min-width:300px;
    /*width:100%;*/
    /*max-width:100%;*/
}

.help_popup3 {
    margin-top: 15px;
    position: relative;
    max-width: 80%;
}


.help_popup::after, .help_popup2::after {
    content: "";
    position: absolute;
    top: 6px;
    left: 0%;
    margin-left: -29px;
    border-width: 14px;
    border-style: solid;
    border-color: #A48036 transparent transparent transparent;
    -moz-transform: rotate(90deg);
    -webkit-transform: rotate(90deg);
    -o-transform: rotate(90deg);
    -ms-transform: rotate(90deg);
    transform: rotate(90deg);
}

.help_popup3::after {
    content: "";
    position: absolute;
    top: -29px;
    right: 12px;
    margin-left: -29px;
    border-width: 14px;
    border-style: solid;
    border-color: #A48036 transparent transparent transparent;
    -moz-transform: rotate(180deg);
    -webkit-transform: rotate(180deg);
    -o-transform: rotate(180deg);
    -ms-transform: rotate(180deg);
    transform: rotate(180deg);
}

.show_help_popup {
    display: inline-block;
    visibility: visible;
    -webkit-animation: fadeIn 1s;
    animation: fadeIn 1s;
    font-weight: normal;
}

/* Add animation (fade in the popup) */
@-webkit-keyframes fadeIn {
    from {
        opacity: 0;
    }

    to {
        opacity: 1;
    }
}

@keyframes fadeIn {
    from {
        opacity: 0;
    }

    to {
        opacity: 1;
    }
}

button:disabled {
    cursor: default;
}

.icon-delete {
    float: right;
    top: 1.7rem;
    right: 1.3rem;
    font-size: 2rem;
    font-weight: 400;
}

    .icon-delete:hover {
        color: #A48036;
        cursor: pointer;
    }

@media (max-width:991px) {
    .help_popup {
        position: relative;
        /*max-width:50%;*/
        max-width: 100%;
    }

        .help_popup:after {
            /*top: auto !important;
            bottom: 6px;*/
            display:none;
        }

    .help_popup2, .help_popup3 {
        position: relative;
        max-width: 80%;
        margin-top: 15px;
    }

        .help_popup2:after, .help_popup3:after {
            top: -28px !important;
            left: auto !important;
            right: 6px !important;
            -moz-transform: rotate(180deg) !important;
            -webkit-transform: rotate(180deg) !important;
            -o-transform: rotate(180deg) !important;
            -ms-transform: rotate(180deg) !important;
            transform: rotate(180deg) !important;
        }

    .show_help_popup {
        display: block;
        visibility: visible;
        -webkit-animation: fadeIn 1s;
        animation: fadeIn 1s;
        position: absolute;
        top: 50%;
        /*width: 75%;*/
        /*width:100%;*/
        left: 50%;
        transform: translate(-50%,-50%);
        margin: auto;
    }
}

@media (max-width:767px) {
    .help_popup2, .help_popup3 {
        position: relative;
        max-width: 59%;
        margin-top: 15px;
    }
}