/*
 * page styles 
 */

div#newsletter-builder-shortcode-section.x-section {
    z-index: 1 !important;
}

#newsletter-email-builder {
    opacity: 0;
}

#newsletter-email-builder a {
    cursor: pointer;
}

#newsletter-email-builder .email-one-off {
    text-align: left;
}

#newsletter-email-builder .email-one-off .kcm-close-modal {
    font-size: 1.4em;
    display: inline-block;
    line-height: 1em;
    margin: 0;
}

#newsletter-email-builder input[type="radio"] {
    vertical-align: top;
}

#newsletter-email-builder.pageLoaded {
    opacity: 1;
    -webkit-transition: opacity 2s ease-in;
    -moz-transition: opacity 2s ease-in;
    -ms-transition: opacity 2s ease-in;
    -o-transition: opacity 2s ease-in;
    transition: opacity 2s ease-in;
}

#newsletter-email-builder table,
#newsletter-email-builder tr,
#newsletter-email-builder td {
    border-collapse: collapse;
}

#newsletter-email-builder td {
    margin: 0;
    padding: 0;
    color: #000000;
}

#newsletter-email-builder h5,
#newsletter-email-builder h6 {
    margin: 0;
    text-transform: none;
}

#newsletter-email-builder body {
    font-family: "Open Sans", sans-serif;
    line-height: 1.8;
}

#newsletter-email-builder blockquote {
    margin: 0;
    padding: 0;
    border: none !important;
    font-size: inherit;
    color: black !important;
}

#newsletter-template-preview a,
#preview-document-wrapper a {
    font-family: "Open Sans", sans-serif;
    text-decoration: underline;
}

#newsletter-email-builder i {
    cursor: pointer;
}

#newsletter-email-builder .x-alert-dummy {
    position: relative;
    margin-bottom: 1.5em;
    padding: 0.824em 2.25em 1em 1.15em;
    font-size: 14px;
    line-height: 1.5;
    height: 46.53px;
}

#newsletter-email-builder .x-btn-transparent {
    color: #00AEEF;
    border-color: transparent;
    background-color: transparent!important;
}

#newsletter-email-builder .x-btn-transparent:hover {
    text-decoration: underline;
}


/*
 * main container and header styles
 */

#main-container {
    padding: 5px;
    width: 100%;
}

.section-header {
    display: inline-block;
}

.section-heading {
    width: 100%;
}

#email-one-off-header-wrapper {
    margin-bottom: 10px;
}

.email-one-off-header {
    border-bottom: 1px solid #ddd;
}

#preview-page-toolbar {
    margin-bottom: 10px
}

#preview-page-toolbar .x-btn.x-btn-small {
    width: auto;
    display: inline-block;
}

.section-heading-intro {
    margin-bottom: 50px;
}

.section-title {
    display: inline;
}

#filter-containers-filters .section-title:first-of-type {
    margin-top: 0px;
}

#filter-containers-filters .section-title {
    margin-top: 20px;
}

.section-title a {
    font-size: 18px;
}

.section-description {
    margin-bottom: 20px;
}

div.section-title,
span.section-title {
    font-weight: bold;
}

.subsection-title {
    font-weight: bold;
    margin-bottom: 50px;
}

.no-click,
.kcm-disable-checkbox label,
.kcm-disable-checkbox input {
    pointer-events: none;
}

.kcm-disable-checkbox,
.kcm-disable-checkbox label {
    color: #bbb;
}

.kcm-slider-checkbox.kcm-disable-checkbox input:checked+.kcm-slider-checkbox-label:before,
.kcm-slider-checkbox.kcm-disable-checkbox .kcm-slider-checkbox-label:before,
.kcm-disable-checkbox input[type='checkbox']:checked+label.kcm_simple_checkbox_label span,
.kcm-disable-checkbox input[type='radio']:checked+label.kcm_simple_checkbox_label span {
    background-color: #bbb;
}

.kcm-disable-checkbox label.kcm_simple_checkbox_label span {
    border: 2px solid #bbb;
}

#newsletter-email-builder label.kcm_simple_checkbox_label {
    display: inline;
}

.section-option-disabled {
    font-size: 12px;
    text-align: right;
    color: orange !important;
    font-style: italic;
}

.article-is-selected {
    box-shadow: 0px 0px 6px rgb(146, 211, 110) !important;
}

.article-container-insert.grayscale {
    /* Safari 6.0 - 9.0 */
    -webkit-filter: grayscale(100%);
    filter: grayscale(100%);
}

.article-container-insert.grayscale:after {
    content: "Article Added" !important;
    color: white;
    background-color: grey !important;
    position: relative !important;
    top: -70px !important;
    border-radius: 5px !important;
    padding: 5px;
}

.article-container-insert.grayscale.video:after {
    content: "Video Added" !important;
}

.article-is-selected .article-subcontainer:after {
    color: white;
    content: '';
    background-color: rgba(146, 211, 110, .5);
    position: absolute;
    top: -2px;
    left: -1px;
    width: 101%;
    height: 101%;
    border-radius: 5px;
    padding: 5px;
}

.article-add-error {
    margin-bottom: 0;
    line-height: 2;
}

.quick-start-selection-image {
    border-radius: 4px;
    margin: 5px;
}


/**
 * transition and effect styles
 */

.next-step-transition-enter-active,
.fade-enter-active,
.fade-leave-active {
    -webkit-transition: opacity .5s ease-in;
    -moz-transition: opacity .5s ease-in;
    -ms-transition: opacity .5s ease-in;
    -o-transition: opacity .5s ease-in;
    transition: opacity .5s ease-in;
}

.next-step-transition-leave-active {
    -webkit-transition: opacity 0s ease-in;
    -moz-transition: opacity 0s ease-in;
    -ms-transition: opacity 0s ease-in;
    -o-transition: opacity 0s ease-in;
    transition: opacity 0s ease-in;
}

.next-step-transition-enter,
.next-step-transition-leave-to,
.fade-enter,
.fade-leave-to {
    opacity: 0;
}

.article-container:hover {
    filter: opacity(.5);
}

#formattedHtml_modal *:after {
    pointer-events: none;
    background-color: none;
    box-shadow: none;
}

.formatted-IE-warning {
    font-size: 14px;
}

.modal-export-buttons {
    display: inline-block;
}

.more-info-modal {
    position: absolute;
    width: 40%;
    padding: 2%;
    right: -500px;
    top: 0px;
    height: 100%;
    background-color: white;
    border-left: 1px solid gray;
    border-radius: 4px;
    box-shadow: -1px 0px 5px gray;
    transition: all .5s linear;
    font-size: 14px;
}

.article-selected-toolbar-image:hover:after,
.article-selected-remove-icon:hover:after,
.preview-selected-remove-icon:hover:after,
.title-input:hover:after,
.article-added-preview:hover:after,
.preview-document-filled:hover:after,
.preview-document-empty-section:hover:after,
.article-container-preview:hover:after,
.preview-document-article-selected:after,
.guide-section:hover:after {
    pointer-events: none;
    content: "\A";
    background-color: rgba(255, 0, 0, 0.5);
    position: absolute;
    cursor: pointer;
    z-index: 10;
    box-shadow: 0px 0px 15px rgba(255, 0, 0);
}

.preview-document-empty-section:hover:after,
.article-container-preview:hover:after,
.preview-document-article-selected:after {
    width: 100%;
    height: 100%;
    top: 0;
    left: 0;
    background-color: rgba(146, 211, 110, .5);
    border-radius: 2%;
    box-shadow: 0px 0px 15px rgba(146, 211, 110);
}

.article-added-preview:hover:after,
.preview-document-filled:hover:after,
.guide-section:hover:after {
    width: 100%;
    height: 100%;
    top: 0;
    left: 0;
    border-radius: 2%;
}

.article-selected-toolbar-image:hover:after,
.article-selected-remove-icon:hover:after {
    width: 85px;
    height: 46px;
    margin-left: -85px;
}

.article-selected-remove-icon:hover:after {
    margin-left: -93px;
    margin-top: -32px;
}

.preview-selected-remove-icon:hover:after {
    width: 145px;
    height: 79px;
    top: -65px;
    left: -71px;
}

#preview-articles-container-header {
    margin: 20px;
}

#preview-articles-container-title {
    border-bottom: 1px lightgrey solid;
}

.title-input:hover:after {
    width: 580px;
    height: 40px;
    margin-left: -290px;
    margin-top: -47px;
}

@media all and (-ms-high-contrast: none) {
    .title-input:hover:after {
        margin-left: 10px !important;
    }
}

.no-click .article-container:hover,
.no-click .article-container-preview:hover {
    z-index: 10;
}


/* intro-step styles */

.quick-start-btn-section i {
    background-color: #00AEEF;
    color: #FFFFFF;
    border-radius: 100%;
    width: 2em;
    height: 2em;
    margin-top: -1em;
    font-size: 0.65em;
    letter-spacing: 0;
    line-height: 2em;
    text-align: center;
    text-decoration: none;
    margin-right: 0.2em;
}

#newsletter-email-builder .quick-start-btn-section h5 {
    font-size: 22px;
    text-transform: uppercase;
    text-decoration: underline;
    vertical-align: bottom;
}

#newsletter-email-builder .quick-start-btn-section h5 {
    margin-bottom: 5px;
}

.quick-start-btn-wrapper,
.user-options-wrapper {
    display: flex;
    justify-content: space-evenly;
    align-content: stretch;
    flex-wrap: wrap;
}

.quick-start-btn-section {
    text-align: left;
    cursor: pointer;
    margin: 5px;
    box-shadow: 3px 3px 6px grey;
    border-radius: 4px;
    padding: 5px;
    flex: 1 1 0px;
}

#build-your-own .quick-start-btn-section {
    min-width: 24%;
    text-align: center;
}

.pre-built-btn {
    width: 31%;
}

.build-own-btn {
    width: 100%;
}

.quick-start-btn-image {
    width: 100%;
    height: 9.33vw;
    overflow: hidden;
    background-size: cover;
    background-position: center center;
    border-radius: 4px;
    background-size: 100% 100%;
}

#quick-start-buyers {
    background-image: url('../images/title/undraw_buy_house_560d.svg');
}

#quick-start-sellers {
    background-image: url('../images/title/undraw_for_sale_viax.svg');
}

#quick-start-top-posts {
    background-image: url('../images/title/undraw_new_ideas_jdea.svg');
}

#quick-start-select-articles {
    background-image: url('../images/title/undraw_under_construction_46pa.svg');
}

.user-options-section {
    display: inline-block;
    padding: 1%;
    text-align: center;
    vertical-align: top;
}

.user-options-section h4 {
    margin: 0 0 2vh 0;
}

#build-your-own {
    flex: 1 1 0px;
}

#pre-built-options {
    border-right: 1px lightgrey solid;
    width: 60%;
}

.step-btn-section {
    clear: left;
}

#newsletter-template-preview *,
#formattedHtml_modal .modal-body * {
    pointer-events: none;
}

#formattedHtml_modal,
#sourceCode_modal {
    overflow-x: hidden;
}

#templateSettings_modal {
    margin-top: -5vw;
}


/**
 * title step styles
 */


/**
 * add headline/article styles
 */

#articles-selected-previews {
    margin-top: 5px;
    margin-bottom: 5px;
    padding-left: 5px;
    width: 100%;
}

#articles-subcontainer {
    padding-bottom: 15px;
    overflow: hidden;
}

.article-selected-toolbar,
.article-selected-toolbar-span {
    display: inline-block;
}

.articles-selected-toolbar {
    margin: 0px 10px;
}

.article-selected-toolbar-span {
    font-weight: bold;
}

.article-selected-toolbar-empty {
    border: 1px grey dashed;
    border-radius: 4px;
    background-color: lightgrey;
    height: 48px;
    width: 83px;
    text-align: center;
    margin-left: 20px;
    margin-top: 3px;
    line-height: 40px;
}

.article-selected-toolbar-container {
    border-radius: 4px;
    text-align: center;
    margin-left: 20px;
    margin-top: 3px;
    line-height: 40px;
}

.article-selected-toolbar-full {
    width: 85px;
    height: 46.45px;
    cursor: pointer;
    border-radius: 4px;
}

.article-selected-toolbar-image {
    display: inline-block;
}

.more-info-icon {
    font-size: 12px;
    position: relative;
}

.more-info-icon:hover:after,
.more-info-icon:active:after,
.more-info-toolbar:hover:after,
.more-info-toolbar:active:after {
    content: "Formatted HTML can be pasted directly into your email to send. Raw HTML is source code and can be sent to your CRM or placed into a code based email editor.";
    font-size: 12px;
    line-height: 2;
    font-family: "Open Sans", sans-serif;
    text-transform: none;
    position: absolute;
    background-color: rgba(102, 102, 102, 0.933) !important;
    color: white;
    font-weight: normal;
    border-radius: 4px;
    z-index: 30;
    margin: 2px;
    padding: 4px;
    width: 290px;
    left: -2px;
    top: 30px;
}

.more-info-icon-pp:hover:after,
.more-info-icon-pp:active:after {
    left: -278px;
    content: "If you'd like to make adjustments to your personalization, click the 'Change Email Template Settings' button to open the Email Template settings and make your changes. Then click the refresh icon here to update your template with the changes." !important;
    top: 0 !important;
}

.more-info-icon-modal:hover:after,
.more-info-icon-modal:active:after {
    left: 0 !important;
    top: -46px !important;
}

.more-info-format:hover:after,
.more-info-format:active:after {
    content: "Formatted HTML can be pasted directly into email platforms such as Gmail and Outlook to send." !important;
}

.more-info-source:hover:after,
.more-info-source:active:after {
    content: "Raw HTML is source code that is better suited for use with CRMs such as BoomTown, WiseAgent, BombBomb, etc." !important;
}

.article-selected-remove-icon {
    position: relative;
    float: left;
    left: 90%;
    margin-top: 32%;
    color: red;
}

.article-selected-removal-icon,
.article-read-blog-icon,
.article-selected-add-icon {
    position: relative;
    font-size: 30px;
    text-decoration: none;
}

.article-read-blog-icon {
    font-size: 20px;
    text-decoration: none !important;
}

.article-read-blog-icon span {
    font-family: 'Open Sans', sans-serif;
}

.article-selected-add-icon {
    color: rgb(146, 211, 110);
}

.article-selected-removal-icon {
    color: red;
}

.article-read-blog-icon {
    color: #00AEEF;
    position: inherit;
    text-align: center;
    width: 100%;
}

.article-read-blog-text {
    font-size: 12px;
    vertical-align: middle;
}

.article-select-filters {
    float: right;
}

#content-browser {
    border-radius: 4px;
    overflow: hidden;
}

.article-container {
    vertical-align: top;
    display: inline-block;
    text-align: center;
    margin: 0px;
    cursor: pointer;
    position: relative;
    border: 1px lightgrey solid;
    border-radius: 4px;
    padding: 5px 10px;
    background-color: white;
    box-shadow: 0 1px 2px rgba(0, 0, 0, .5);
}

.article-container-wrapper {
    width: 23%;
}

.article-container-preview {
    vertical-align: top;
    margin: 5px;
    display: inline-block;
    text-align: center;
    cursor: pointer;
    position: relative;
}

.article-container-insert {
    width: 145px !important;
    height: 89px;
    padding: 5px 0px;
}

.preview-subcontainer {
    height: 82px;
    overflow: hidden;
    border-radius: 4pt;
}

.article-subcontainer-btn {
    margin: 5px;
    display: flex;
    align-items: center;
    flex-direction: column;
    justify-content: center;
}

.article-subcontainer-headline {
    height: auto;
}

#article-select-buttons {
    width: 100%;
    padding-bottom: 15px;
}

#close-article-select {
    float: left;
}

#close-article-row {
    width: 100%;
}

.article-container-headline {
    height: auto;
    text-align: center;
}

#remove-all-articles-btn {
    display: inline-block;
    margin-left: 20px;
}

.step-btn-off {
    color: grey !important;
    background-color: none !important;
    text-decoration: none !important;
}

.step-btn-on {
    text-transform: uppercase;
}


/**
 * filter page rules
 */

#filter-container,
#settings-container {
    text-align: left;
}

#settings-container {
    border: 1px lightgrey solid;
    border-radius: 4px;
    margin-top: -20px;
    background-color: white;
}

.filter-post-column {
    display: inline-flex;
    flex-direction: column;
    width: 30%;
    margin: 1%;
}

#filter-save,
#filter-reset {
    margin: 5px 0px 5px 0px;
}

#filter-containers-filters {
    padding: 10px;
}

#video-spanish-disclaimer {
    font-size: 10px;
}

#refresh-personalization {
    position: relative;
}

#refresh-personalization-icon,
#refresh-personalization-check {
    font-size: 24px;
    text-align: center;
    transition: opacity 1s linear;
}

#refresh-personalization-check {
    opacity: 0;
    position: absolute;
    top: 0px;
    left: 0px;
    pointer-events: none;
    color: rgb(146, 211, 110);
}


/**
 * preview page styles
 */

#export-buttons-section {
    margin-bottom: 10px;
    text-align: center;
}

.alter-content-button {
    margin-bottom: 4px;
}

#preview-titles-section {
    width: 600px;
}

#preview-section-title {
    background-color: white;
    margin-bottom: 0px;
}

.modal-body {
    overflow-y: auto;
    height: 40vh;
    margin: 10px;
}

.kcm-modal.kcm-modal-widevw {
    width: 70vw;
    margin-left: -30vw;
}

#html-to-clipboard-alert,
#src-to-clipboard-alert {
    text-align: center;
    font-style: italic;
    font-size: 12px;
    color: #92d36e;
}

#toolbar-buttons {
    float: right;
}

#preview-section {
    float: left;
    width: 66%;
}

.preview-selected-remove-icon {
    height: 100%;
    color: red;
    position: relative;
    top: 77px;
    left: -90px;
}

#preview-document-wrapper {
    float: left;
    overflow: auto;
    width: 100%;
    padding: 0px 5px 0px 5px;
    border-left: 1px grey solid;
    border-right: 1px grey solid;
    border-bottom: 1px grey solid;
}

#article-placement-wrapper {
    float: left;
    width: 33%;
    overflow: auto;
    height: 80%;
    position: relative;
    z-index: 20;
    background-color: white;
    text-align: center;
    left: 2vw;
}

.article-wrapper {
    display: inline-block;
    padding: 0px 0px 5px 0px;
    margin: 0;
}

.sticky {
    position: fixed;
    top: 96px;
    left: 70vw;
    width: 22vw;
    background-color: white;
}

.stickySelection {
    position: fixed;
    top: 46px;
    left: calc(260px + 8vw);
    z-index: 20;
    width: calc(80% - 260px);
}

#preview-document-dummy-wrapper {
    width: 100%;
    height: 18px;
    overflow-x: scroll;
    overflow-y: hidden;
    border-top: 1px grey solid;
    border-left: 1px grey solid;
    border-right: 1px grey solid;
}

#preview-document-dummy-content {
    width: 600px;
    height: 20px;
}

.preview-document-empty-section,
.preview-document-empty-section-selected {
    border: 2px black dashed!important;
    cursor: pointer;
    text-align: center;
    position: relative;
    font-weight: bold;
}

.preview-document-filled {
    position: relative;
    cursor: pointer;
}

.preview-document-empty-section-selected {
    background-color: #00AEEF;
    color: white!important;
}


/**
 * document styles 
 */

#preview-container {
    text-align: left;
}

.title-input {
    cursor: pointer;
    position: relative;
}

.edit-able-title:before {
    font-family: "FontAwesome";
    font-weight: 900;
    content: "\f044";
    right: 30px;
    position: absolute;
    pointer-events: none;
    color: rgb(255, 255, 255, .5);
}

.modal-body .edit-able-title:before {
    display: none;
}

.edit-able-title.title-light-background:before {
    color: rgb(0, 0, 0, .5);
}

.title-input-editor {
    width: 580px;
    text-align: center;
    color: black;
    position: relative;
    font-weight: bold !important;
}

.title-input-editor:focus {
    background-color: white;
    font-family: "Open Sans", sans-serif;
    border: 0;
}

.title-input-edit,
.article-added-preview {
    cursor: pointer;
}

.article-added-preview,
.guide-section {
    position: relative;
}

.article-container-title {
    font-size: 12px;
    width: 190px;
    font-weight: bold;
}

.article-container-title-headline {
    font-size: 18px;
    width: 390px;
    font-weight: bold;
}

.article-container-excerpt {
    font-size: 10px;
    display: block;
    overflow-y: auto;
    overflow-x: hidden;
    width: 190px;
}

.article-container-excerpt-headline {
    font-size: 14px;
    display: block;
    overflow-y: auto;
    overflow-x: hidden;
    height: auto;
    width: 390px;
}

.article-container-feature-img {
    width: 180px;
}

.article-container-headline .article-container-feature-img {
    width: 380px;
}


/** toolbar styles **/

div#kcm_newsletter_main_nav ul li.kcm_newsletter_active_page span {
    color: #fff;
}

div#kcm_newsletter_main_nav ul li span {
    color: #00aeff;
}

div#kcm_newsletter_main_nav ul li span {
    padding: 5px 35px;
    display: inline-block;
}

div#kcm_newsletter_main_nav ul li.kcm_newsletter_active_page {
    background-color: #00aeff;
}

div#kcm_newsletter_main_nav ul li span:hover {
    color: #fff;
}

div#kcm_newsletter_main_nav ul li:hover {
    background-color: #00aeff;
}

div#kcm_newsletter_main_nav ul li {
    border-bottom: 1px solid #00aeff;
    border-top: 1px solid #00aeff;
    border-right: 1px solid #00aeff;
}

ul.kcm_newsletter_horizontal_menu {
    margin: 0 0 10px;
}

ul.kcm_newsletter_horizontal_menu li {
    display: inline-block;
    padding: 0 20px;
    position: relative;
    float: left;
}

div#kcm_newsletter_main_nav ul li:first-child {
    -webkit-border-top-left-radius: 20px;
    -webkit-border-bottom-left-radius: 20px;
    -moz-border-radius-topleft: 20px;
    -moz-border-radius-bottomleft: 20px;
    border-top-left-radius: 20px;
    border-bottom-left-radius: 20px;
    border: 1px solid #00aeff;
}

div#kcm_newsletter_main_nav ul li:last-child {
    -webkit-border-top-right-radius: 20px;
    -webkit-border-bottom-right-radius: 20px;
    -moz-border-radius-topright: 20px;
    -moz-border-radius-bottomright: 20px;
    border-top-right-radius: 20px;
    border-bottom-right-radius: 20px;
    border: 1px solid #00aeff;
    border-left: none;
}

div#kcm_newsletter_main_nav ul {
    display: inline-block;
}

div#kcm_newsletter_main_nav {
    cursor: pointer;
    text-align: center;
}

div#kcm_newsletter_main_nav ul li.kcm_newsletter_active_page:before {
    content: "";
    width: 0;
    height: 0;
    position: absolute;
    border-width: 11px;
    border-style: solid;
    border-color: transparent;
    border-top-color: #00aeff;
    bottom: -22px;
    left: 50%;
    margin-left: -11px;
}


/** function bar styles **/

#current-articles-selected {
    width: 100%;
    text-align: center;
}

#current-articles-section {
    padding: 0px;
}

.kcm_newsletter_toolbar_menu>li>span i {
    padding-right: 5px;
}

.kcm_newsletter_toolbar_menu>li:hover span {
    color: #00aeff;
}

.kcm_newsletter_toolbar_menu>li#current-articles-selected:hover span {
    color: #444;
}

.kcm_newsletter_toolbar_menu>li>span {
    padding: 10px 20px;
    display: inline-block;
    border-right: 1px solid #d2d2d2;
    border-left: 1px solid #fbfbfb;
    margin: 0!important;
    color: #444;
    font-size: 14px;
}

.kcm_newsletter_toolbar_menu>li:hover {
    background-color: #fff;
    border-bottom: 2px solid #00aeff;
    cursor: pointer;
}

.kcm_newsletter_toolbar_menu>li.settingsShown {
    background-color: #fff;
    border-bottom: 2px solid #00aeff;
    cursor: pointer;
}

.kcm_newsletter_toolbar_menu>li.settingsShown span {
    color: #00aeff;
}

.kcm_newsletter_toolbar_menu>li#current-articles-selected:hover {
    background-color: #f3f3f3;
    border-bottom: 1px solid #d2d2d2;
}

.kcm_newsletter_toolbar_menu>li#current-articles-selected {
    border-bottom: 1px solid #d2d2d2;
    padding-bottom: 3px;
}

.kcm_newsletter_toolbar_menu>li#current-articles-selected span {
    border-right: 0;
}

ul.kcm_newsletter_horizontal_menu li {
    display: inline-block;
    padding: 0 20px;
    position: relative;
    float: left;
}

ul.kcm_newsletter_horizontal_menu_no_margin li {
    padding: 0;
    margin: 0 5px;
}

.kcm_newsletter_toolbar_menu>li {
    margin: 0!important;
    border-bottom: 2px solid transparent;
}

ul.kcm_newsletter_toolbar_menu {
    background-color: #f3f3f3;
    border-radius: 3px;
    border: 1px solid #c3c3c3;
    display: inline-block!important;
}

.refresh-frame-one {
    animation: rotation 1s infinite linear;
}

.opacity-off {
    opacity: 0 !important;
}

.opacity-on {
    opacity: 1 !important;
}

.show {
    display: block !important;
}

.hide {
    display: none !important;
}


/* oneoff styles */

span.post-title {
    font-weight: bold;
    width: 100%;
    display: inline-block;
}

.post-info-wrapper {
    width: 80%;
    display: inline-block;
    padding: 20px 20px 10px;
}

.close-post {
    width: 18%;
    display: inline-block;
    position: absolute;
    right: 0;
    text-align: right;
    font-size: 1.4em;
    vertical-align: top;
    padding: 20px 20px 10px;
}

@media screen and (min-width: 680px) {
    .close-post {
        position: relative;
    }
}

@media only screen and (max-width: 1478px) {
    #newsletter-email-builder .quick-start-btn-section h5 {
        font-size: 18px;
    }
    .user-options-section h4 {
        font-size: 26px;
    }
}

@media only screen and (max-width: 1273px) {
    #newsletter-email-builder .quick-start-btn-section h5 {
        font-size: 14px;
    }
    .user-options-section h4 {
        font-size: 20px;
    }
    div#kcm_newsletter_main_nav ul li span {
        font-size: 14px;
    }
}

@media only screen and (max-width: 1066px) {
    #newsletter-email-builder .quick-start-btn-section h5 {
        font-size: 10px;
    }
}

@media only screen and (max-width: 979px) {
    .sticky {
        top: 50px;
        left: 67vw;
        width: 23vw;
    }
    .stickySelection {
        top: -5px;
        left: 9vw;
        width: 80%;
    }
    #article-placement-wrapper {
        top: -10px;
    }
    .article-container-insert {
        width: 100px !important;
        height: 60px;
    }
    .article-container-insert.grayscale::after {
        content: "Added" !important;
        top: -73px !important;
        font-size: 10px;
    }
}

@media only screen and (max-width: 768px) {
    #remove-all-articles-btn {
        margin-left: 0;
    }
    .sticky {
        top: 100px;
        left: 63vw;
        width: 24vw;
    }
    #preview-articles-container-header,
    #preview-articles-buttons {
        display: none;
    }
    div#kcm_newsletter_main_nav ul li span {
        padding: 5px 10px;
        font-size: 12px;
    }
}

@media only screen and (min-width: 1450px) {
    #preview-document-wrapper {
        border-top: 1px grey solid;
    }
    #preview-document-dummy-wrapper {
        visibility: hidden;
    }
}

@keyframes rotation {
    from {
        transform: rotate(0deg);
    }
    to {
        transform: rotate(359deg);
    }
}