/**
 * All of the CSS for your public-facing functionality should be
 * included in this file.
 */
.m2a-message .m2a-warning, .m2a-message .m2a-success { padding: 5px 20px; margin: 10px; border-radius: 20px; font-size: 18px;}
.m2a-message .m2a-warning {background: #ff7171; color: #fff;}
.m2a-message .m2a-success {background: #cff6cf; color: #111;}
.m2a-message {border: 5px solid #2ec1ac;border-radius: 20px;padding: 30px;display: flex; max-width: 900px; width: 100%; margin: 15px auto}
.m2a-message .form {width: calc(82% - 7px);margin-left: 7px;text-align: center;display: inline-block; flex-basis: 82%;}
.m2a-message .m2a-title { max-width: calc(18% - 7px); height: 355px; margin-right: 7px; border-radius: 20px; background-color: #2ec1ac;text-align: center; display: flex; flex-basis: 18%;}
.m2a-message .m2a-title h2 { -webkit-writing-mode: vertical-lr; writing-mode:vertical-lr; transform: scale(-1); font-size: 40px; color: #fff; line-height: 110%; margin: auto; padding: 5px}
.m2a-message .m2a-title h2::before {display: none}
.m2a-message textarea, .m2a-message .form input {box-shadow: inset 4px 4px 10px #1111;border-radius: 20px;background-color: #f8f8f8;padding-left: 30px;font-weight: bold;border: 0;outline: none !important;}
.m2a-message textarea {padding-top: 30px; width: 100%; min-height: 155px; max-height: 155px; font-family: inherit;}
.m2a-message .form input {width: 100%;margin-bottom: 15px; min-height: 50px; height: 50px; font-family: inherit;}
.m2a-message .form .m2a-subject.full {width: 100%;}
.m2a-message .form .m2a-submit {background-color: #2ec1ac; color: #fff;margin-top: 15px; margin-bottom: 0;width: 100%; box-shadow: none; border: none}
.m2a-message.m2a-popup { margin-left: 15px;}
.m2a-message.m2a-popup .m2a-title h2 {font-size: 30px;}
/*Logded-in*/
.logged-in .m2a-message textarea {min-height: 222px; max-height: 222px;}
/*btn*/
.thickbox.btn.button:hover { color: inherit;}
@media (max-width: 1024px) {
    .m2a-message .m2a-title h2 {font-size: 30px;}
    .m2a-message.m2a-popup { display: block; }
    .m2a-message.m2a-popup .m2a-title {max-width: 100%; height: 100px; margin-bottom: 15px; margin-right: 0;}
    .m2a-message.m2a-popup .m2a-title h2 {writing-mode: horizontal-tb; font-size: 20px;  transform: scaleX(1)}
    .m2a-message.m2a-popup .form {max-width: 100%; margin-left: 0; width: 100%;}
}
@media (max-width: 767px) {
    .m2a-message { display: block; }
    .m2a-message .m2a-title { max-width: 100%; height: 100px; }
    .m2a-message .m2a-title h2 { writing-mode: horizontal-tb; font-size: 28px}
    .m2a-message .form {width: 100%; margin-left: 0; margin-top: 15px;}
    .m2a-message .form input {width: 100%;}
    .m2a-message textarea, .m2a-message .form input {box-shadow: inset 4px 4px 10px #1112}
}
@media (max-width: 543px) {
    .m2a-message .m2a-title h2 {font-size: 26px}
    .m2a-message {padding: 15px;}
}