body {
}

modal-message, modal-message * {
    display: block;
    float: left;
    width: 100%;
}

modal-message {
    position: fixed;
    top: 0;
    bottom: 0;
    left: 0;
    right: 0;
    width: 100%;
    height: 100%;
    background: rgba(0,0,0,0.5);
    z-index: 8000;
    opacity: 0;
}

    modal-message modal-message-inner {
        width: 480px;
        max-width: 90vw;
        position: absolute;
        top: 100px;
        left: 50%;
        z-index: 8000;
        -moz-transform: translateX(-50%);
        -webkit-transform: translateX(-50%);
        -o-transform: translateX(-50%);
        -ms-transform: translateX(-50%);
        transform: translateX(-50%);
        border-radius: 8px;
    }

        modal-message modal-message-inner modal-message-close {
            float: right;
            font-family: feather;
            width: 32px;
            height: 32px;
            line-height: 32px;
            text-align: right;
            font-size: 25px;
            margin-bottom: 8px;
            cursor: pointer;
            color: white;
            text-shadow: 0 0 4px #000000;
        }

            modal-message modal-message-inner modal-message-close:before {
                content: "\e117";
            }

        modal-message modal-message-inner modal-message-inner-message {
            width: 100%;
            float: left;
            border-radius: 8px;
            background: white;
            -webkit-box-shadow: 0 20px 32px 16px rgba(0,0,0,0.15);
            box-shadow: 0 20px 32px 16px rgba(0,0,0,0.15);
        }

            modal-message modal-message-inner modal-message-inner-message modal-message-header,
            modal-message modal-message-inner modal-message-inner-message modal-message-body,
            modal-message modal-message-inner modal-message-inner-message modal-message-footer {
                padding: 32px;
                font-size: 16px;
            }

            modal-message modal-message-inner modal-message-inner-message modal-message-header,
            modal-message modal-message-inner modal-message-inner-message modal-message-footer {
                padding-top: 16px;
                padding-bottom: 16px;
                font-family: 'citrfontbold';
            }

            modal-message modal-message-inner modal-message-inner-message modal-message-header {
                background: dodgerblue;
                color: white;
                font-size: 24px;
                -webkit-border-radius: 4px 4px 0 0;
                border-radius: 4px 4px 0 0;
            }

                modal-message modal-message-inner[modal-type="success"] modal-message-inner-message modal-message-header {
                    background: #47ab6c;
                }

                modal-message modal-message-inner[modal-type="warning"] modal-message-inner-message modal-message-header {
                    background: #de9d00;
                }

                modal-message modal-message-inner[modal-type="error"] modal-message-inner-message modal-message-header {
                    background: #b62727;
                }

                modal-message modal-message-inner[modal-type="clpos"] modal-message-inner-message modal-message-header {
                    background-color: #23282e;
                }

        modal-message modal-message-inner modal-message-inner-message modal-message-body {
            max-height: calc(100vh - 350px);
            overflow: auto;
        }

        modal-message modal-message-inner modal-message-inner-message modal-message-footer {
            border-top: 1px solid #d7d7d7;
            font-size: 14px;
            text-align: right;
            letter-spacing: 0.035em;
        }

            modal-message modal-message-inner modal-message-inner-message modal-message-footer span {
                display: block;
                margin-left: 16px;
                float: right;
                width: auto;
                cursor: pointer;
            }

                modal-message modal-message-inner modal-message-inner-message modal-message-footer span[onclick*="false)"] {
                    color: #999;
                }

                modal-message modal-message-inner modal-message-inner-message modal-message-footer span[onclick*="true)"] {
                    color: dodgerblue;
                }

                    modal-message modal-message-inner[modal-type="success"] modal-message-inner-message modal-message-footer span[onclick*="true)"] {
                        color: #47ab6c;
                    }

                    modal-message modal-message-inner[modal-type="warning"] modal-message-inner-message modal-message-footer span[onclick*="true)"] {
                        color: #de9d00;
                    }

                    modal-message modal-message-inner[modal-type="error"] modal-message-inner-message modal-message-footer span[onclick*="true)"] {
                        color: #b62727;
                    }

                    modal-message modal-message-inner[modal-type="clpos"] modal-message-inner-message modal-message-footer span[onclick*="true)"] {
                        color: yellowgreen;
                    }

@media screen and (max-width: 767.9px) {
    modal-message modal-message-inner {
        top: 14px;
    }

        modal-message modal-message-inner modal-message-inner-message modal-message-body {
            max-height: calc(100vh - 200px);
            overflow: auto;
        }
}