html {
    position: relative;
    min-height: 100%;
}

body {
    position: absolute;
    left: 0;
    right: 0;
    min-height: 100%;
    background: #fff;
    margin: 0;
    padding: 0;
    font-size: 100%;
}

body,
td {
    font-family: "Helvetica Neue", Helvetica, "Lucida Grande", Tahoma, Arial,
        Verdana, sans-serif;
    line-height: 1.5em;
    -webkit-text-rendering: geometricPrecision;
    text-rendering: geometricPrecision;
}

h1 {
    font-size: 1.5em;
    font-weight: normal;
    color: #555;
}

h2 {
    font-size: 1.3em;
    font-weight: normal;
    color: #555;
}

h2.caption {
    margin: 2.5em 0 0;
}

h3 {
    font-size: 1.1em;
    font-weight: normal;
    color: #555;
}

h3.pad {
    margin: 2em 0 1em;
}

h4 {
    font-size: 1em;
    font-weight: normal;
    color: #555;
}

p.pad {
    margin-top: 1.5em;
}

a {
    outline: none;
}

.cfg-btn {
    background-color: rgb(55, 181, 114);
    color: #fff;
    border: 0;
    box-shadow: 0 0 1px 0px rgba(0, 0, 0, 0.3);
    outline: 0;
    cursor: pointer;
    width: 200px;
    padding: 10px;
    font-size: 1em;
    position: relative;
    display: inline-block;
    margin: 10px auto;
}

.cfg-btn:hover:not([disabled]) {
    background-color: rgb(37, 215, 120);
}

.mobile-magic .cfg-btn:hover:not([disabled]) {
    background: rgb(55, 181, 114);
}

.cfg-btn[disabled] {
    opacity: 0.5;
    color: #808080;
    background: #ddd;
}

.cfg-btn.btn-preview,
.cfg-btn.btn-preview:active,
.cfg-btn.btn-preview:focus {
    font-size: 1em;
    position: relative;
    display: block;
    margin: 10px auto;
}

.cfg-btn,
.preview,
.app-figure,
.api-controls,
.wizard-settings,
.wizard-settings .inner,
.wizard-settings .footer,
.wizard-settings input,
.wizard-settings select {
    -webkit-box-sizing: border-box;
    -moz-box-sizing: border-box;
    box-sizing: border-box;
}

.preview,
.wizard-settings {
    padding: 10px;
    border: 0;
    min-height: 1px;
}

.preview {
    position: relative;
}

.api-controls {
    text-align: center;
}

.api-controls button,
.api-controls button:active,
.api-controls button:focus {
    width: 80px;
    font-size: 0.7em;
    white-space: nowrap;
}

.app-figure {
    width: 100% !important;
    margin: 0px auto;
    border: 0px solid red;
    padding: 0px;
    position: relative;
    text-align: center;
}

.selectors {
    margin-top: 10px;
}

.selectors .mz-thumb img {
    max-width: 56px;
}

.app-code-sample {
    max-width: 80%;
    margin: 30px auto 0;
    text-align: center;
    position: relative;
}

.app-code-sample input[type="radio"] {
    display: none;
}

.app-code-sample label {
    display: inline-block;
    padding: 2px 12px;
    margin: 0;
    font-size: 0.8em;
    text-decoration: none;
    cursor: pointer;
    color: #666;
    border: 1px solid rgba(136, 136, 136, 0.5);
    background-color: transparent;
}

.app-code-sample label:hover {
    color: #fff;
    background-color: rgb(253, 154, 30);
    border-color: rgb(253, 154, 30);
}

.app-code-sample input[type="radio"]:checked+label {
    color: #fff;
    background-color: rgb(110, 110, 110) !important;
    border-color: rgba(110, 110, 110, 0.7) !important;
}

.app-code-sample label:first-of-type {
    border-radius: 4px 0 0 4px;
    border-right-color: transparent;
}

.app-code-sample label:last-of-type {
    border-radius: 0 4px 4px 0;
    border-left-color: transparent;
}

.app-code-sample .app-code-holder {
    padding: 0;
    position: relative;
    border: 1px solid #eee;
    border-radius: 0px;
    background-color: #fafafa;
    margin: 15px 0;
}

.app-code-sample .app-code-holder>div {
    display: none;
}

.app-code-sample .app-code-holder pre {
    text-align: left;
    white-space: pre-line;
    border: 0px solid #eee;
    border-radius: 0px;
    background-color: transparent;
    padding: 25px 50px 25px 25px;
    margin: 0;
    min-height: 25px;
}

.app-code-sample input[type="radio"]:nth-of-type(1):checked~.app-code-holder>div:nth-of-type(1) {
    display: block;
}

.app-code-sample input[type="radio"]:nth-of-type(2):checked~.app-code-holder>div:nth-of-type(2) {
    display: block;
}

.app-code-sample .app-code-holder .cfg-btn-copy {
    display: none;
    z-index: -1;
    position: absolute;
    top: 10px;
    right: 10px;
    width: 44px;
    font-size: 0.65em;
    white-space: nowrap;
    margin: 0;
    padding: 4px;
}

.copy-msg {
    font: normal 11px/1.2em "Helvetica Neue", Helvetica, "Lucida Grande",
        "Lucida Sans Unicode", Verdana, Arial, sans-serif;
    color: #2a4d14;
    border: 1px solid #2a4d14;
    border-radius: 4px;
    position: absolute;
    top: 8px;
    left: 0;
    right: 0;
    width: 200px;
    max-width: 70%;
    padding: 4px;
    margin: 0px auto;
    text-align: center;
}

.copy-msg-failed {
    color: #b80c09;
    border-color: #b80c09;
    width: 430px;
}

.mobile-magic .app-code-sample .cfg-btn-copy {
    display: none;
}

#code-to-copy {
    position: absolute;
    width: 0;
    height: 0;
    top: -10000px;
}

.lt-ie9-magic .app-code-sample {
    display: none;
}

.wizard-settings {
    background-color: #4f4f4f;
    color: #a5a5a5;
    position: absolute;
    right: 0;
    width: 340px;
}

.wizard-settings .inner {
    width: 100%;
    margin-bottom: 30px;
}

.wizard-settings .footer {
    color: #c7d59f;
    font-size: 0.75em;
    width: 100%;
    position: relative;
    vertical-align: bottom;
    text-align: center;
    padding: 6px;
    margin-top: 10px;
}

.wizard-settings .footer a {
    color: inherit;
    text-decoration: none;
}

.wizard-settings .footer a:hover {
    text-decoration: underline;
}

.wizard-settings a {
    color: #cc9933;
}

.wizard-settings a:hover {
    color: #dfb363;
}

.wizard-settings table>tbody>tr>td {
    vertical-align: top;
}

.wizard-settings table {
    min-width: 300px;
    max-width: 100%;
    font-size: 0.8em;
    margin: 0 auto;
}

.wizard-settings table caption {
    font-size: 1.5em;
    padding: 16px 8px;
}

.wizard-settings table td {
    padding: 4px 8px;
}

.wizard-settings table td:first-child {
    white-space: nowrap;
}

.wizard-settings table td:nth-child(2) {
    text-align: left;
}

.wizard-settings table td .values {
    color: #a08794;
    font-size: 0.8em;
    line-height: 1.3em;
    display: block;
    max-width: 126px;
}

.wizard-settings table td .values:before {
    content: "";
    display: block;
}

.wizard-settings input,
.wizard-settings select {
    width: 126px;
}

.wizard-settings input {
    padding: 0px 4px;
}

.wizard-settings input[disabled] {
    color: #808080;
    background: #a7a7a7;
    border: 1px solid #a7a7a7;
}

.preview {
    width: 70%;
    float: left;
}

@media (min-width: 0px) {
    .preview {
        width: 100%;
        float: none;
    }
}

@media (min-width: 1024px) {
    .preview {
        width: calc(100% - 340px);
    }

    .wizard-settings {
        top: 0;
        min-height: 100%;
    }

    .wizard-settings .inner {
        margin-top: 60px;
    }

    .wizard-settings .footer {
        position: absolute;
        bottom: 0;
        left: 0;
    }

    .wizard-settings .settings-controls {
        position: fixed;
        top: 0;
        right: 0;
        width: 340px;
        padding: 10px 0 0;
        text-align: center;
        background-color: inherit;
    }
}

@media screen and (max-width: 1024px) {

    .api-controls button,
    .api-controls button:active,
    .api-controls button:focus {
        width: 70px;
    }
}

@media screen and (max-width: 1023px) {
    .app-figure {
        width: 98% !important;
        margin: 50px auto;
        padding: 0;
    }

    .app-code-sample {
        display: none;
    }

    .wizard-settings {
        width: 100%;
    }
}

@media screen and (max-width: 600px) {
    .mz-thumb img {
        max-width: 39px;
    }
}

@media screen and (max-width: 560px) {
    .api-controls .sep {
        content: "";
        display: table;
    }
}

@media screen and (min-width: 1600px) {
    .preview {
        padding: 10px 160px;
    }
}