/* Typography */
body {
	font-family: "Helvetica Neue", Arial, sans-serif;
	font-size: 11pt;
    line-height: 18pt;
}

table {
    font-size: 100%;
    line-height: 160%;
    border-collapse: collapse;
}

th {
    text-align: left;
}

th, td {
    padding: 0;
}


.page {
    padding: 3em 3.5em;
}


.page,
.page textarea {
	font-family: "Helvetica Neue", Arial, sans-serif;
    font-size: 100%;
    line-height: 160%;
    border: 0px;
}

.page textarea {
    width: 100%;
    min-height: 30em;
    outline: none;
}

.stats {
    margin: -3em -2.5em;
    margin-top: 0em;
    margin-bottom: -1.5em;

    -border-top: 1px solid #ccc;

    padding-top: 1em;
    padding-bottom: .5em;

    color: #333;
    font-size: .8em;
    line-height: 1.4em;

    height:  2.2em;

    overflow: hidden;
    /* opacity: 0; /* hidden by default */
}


.stats .stats-sections {
}


.stats .stats-sections em {
    white-space: nowrap;
}

.stats span.value {
    font-weight: bold;
}


.stats .stats-score-div,
.stats .stats-text-div,
.stats .stats-result-div {
    float: left;
}

.stats .stats-score-div {
    width: 33%;
}

.stats .stats-text-div {
    width: 25%;
}

.stats .stats-result-div {
    width: 41%;
}

.stats .stats-score {
    display: block;
    float: left;
    height: 30px;
    font-weight: bold;
    font-size: 35px;
    line-height: 26px;
    padding-top: 2px;

    margin-right: 8px;

    transition: color .5s;
}

.stats .stats-score.-red {
    color: #bb0002;
}
.stats .stats-score.-orange {
    color: #da570f;
}
.stats .stats-score.-green {
    color: #077213;
}


.stats .stats-sections {
    margin-right: -1em;
}

.stats .stats-sections em {
    margin-right: .5em;

    font-style: normal;
    color: #da570f;
    border-bottom: 1px dotted #fdc;
    border-radius: 0.1px; /* HACK to aviod double and triple dots on Safari */
}


.stats .stats-sections em.-highlighted {
    background: #fdc;
    border-bottom-color: #fdc;
}

.stats .stats-sections em.blue {
    color: #10807F;
    border-bottom-color: #cfe6e5; 
}

.stats .stats-sections em.blue.-highlighted {
    background: #cfe6e5;
}

.stats .stats-sections em.purple {
    color: #4d0063;
    border-bottom-color: #e6dfe5;
}

.stats .stats-sections em.purple.-highlighted {
    background: #e6dfe5;
}


.stats.-obsolete .stats-score,
.stats.-obsolete .stats-stopwords,
.stats.-obsolete .stats-stopwords-suffix,
.stats.-obsolete .stats-sections-prefix,
.stats.-obsolete .stats-sections em {
    color: #999;
    border-color: #ccc;
    transition: color 0s;
}

.stats.-processing .stats-score,
.stats.-processing .stats-stopwords,
.stats.-processing .stats-stopwords-suffix,
.stats.-processing .stats-sections-prefix,
.stats.-processing .stats-sections em {
    color: #999;
    border-color: #ccc;
    transition: color 0s;
}


h1 {
    font-size: 140%;
    margin: 0;
    padding: 0;
    margin-bottom: .5em;
}

h2 {
    font-size: 100%;
    margin: 0;
    padding: 0;
    margin-top: .85em;
    margin-bottom: .5em;
}


p { 
    padding: 0;
    margin: 0;
    margin-bottom: .5em;
}

.sidebar {
    font-size: 90%;
    line-height: 140%;
}



.header {
    margin-right: 3em;
}

.header p {
    margin-bottom: 1em;
}

.header .menu {
    margin-top: 1.5em;
}

.menu a.menu-item,
.menu b.menu-item
{
    margin-right: 1.5em;
}


.footer {
    line-height: 1.2em;
    margin-top: 2em;
}


.footer,
.footer a
{
    color: #888;
}


.footer a {
    border-bottom-color: #ccc;
}


.footer p:last-child{
    margin-bottom: 0;
}





/* Appearance */

body {
    background: #f7f7f7;
    margin: 0px;
    padding: 0px;
}

a {
    color: #0160A0;
    text-decoration: none;
    border-bottom: 1px solid #acd;
}

a:hover {
    color: #86b0ce;
    border-bottom-color: 1px solid #d5e5ed;
}

.page {
    background: #fff;
    --box-shadow: 0px 25px 40px -15px #afa9a0;
    outline: none;
}



.page .rest-bullet {
    color: #DA570F;
    font-size: 200%;
    line-height: 0;
    position: relative;
    top: .2em;
}

.page .rest {
    color: #999;
}


.large-button {
    background: none;
    border: 1px solid #DA570F;
    font-size: 120%;
    color: #DA570F;
    border-radius: .55em;
    padding: 1em 2em;
    cursor: pointer;
    -webkit-transition: .333s;
}

.large-button:hover {
    background: #DA570F;
    color: #fff;
    -webkit-transition: 0s;

}



/* Layout */


body {
    position: relative;
}


.sidebar {
    overflow: visible;
}


.glavred {
    margin: 3em;
    margin-right: 3em;
    padding-top: 4em;
}

.glavred .text-container {
    position: relative;
}




table.rule-examples {
    margin-right: -2em;
    margin-top: .85em;
    margin-left: 0em;
    width: 100%;

    font-size: 85%;
    line-height: 150%;
    border-collapse: collapse;

}

table.rule-examples th {
}

table.rule-examples td {
    vertical-align: top;

    vertical-align: top;
    padding-right: 1.2em;
    padding-bottom: .5em;
}

ul.see-also {
    margin: 0;
    padding: 0;
    list-style: none;
}

ul.see-also li {
    margin: 0;
    padding: 0;
    margin-bottom: .5em;
    line-height: 120%;
}

/*
table.layout td.contains-text {
    position: relative;
}

table.layout td.contains-text .text {
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
}
*/

body {
    padding: 3em;
}

.two-columns {
    width: 100%;
    position: relative;
}

.column-left {
    position: relative;
    width: 66%;
    float: left;
    margin-right: 3%;
    padding-bottom: 20px;
}

.column-right {
    position: relative;
    width: 30%;
    float: left;
    padding-bottom: 20px;
}




.debug-bar {
    width: 100%;
    height: 24px;
    background: #b0b0b0;
    background: -webkit-linear-gradient(#ccc, #bbb);
    opacity: 0.95;
    color: #333;
    font-size: 0.85em;
    padding-left: 4em;
    text-shadow: 0px 1px 1px #eee;
    box-shadow: 0px 1px 0px #888;

    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    z-index: 1000;
}


.debug-bar a {
    font-weight: bold;
    color: #369;
    border-bottom-color: #69c;
}

.debug-bar .admin {
    line-height: 130%;
    display: inline-block;
    position: absolute;
    top: .25em;
    right: 8em;
}

body {
    padding-top: 24px;
}




.tutorial {
    position: relative;
    margin-top: 50px;
    display: none;
}

.tutorial:before {
    position: absolute;
    z-index: 1000px;

    left: -185%;
    right: 102%;

    height: 200px;
    margin-top: -200px;

    background-image: url(/static/tutorial-arrow.svg);
    background-size: 100%, auto;
    background-position: 0 bottom;
    background-repeat: no-repeat;

    content: ' ';

    pointer-events: none;
}

.tutorial {
    opacity: 0;
    display: none;
}

.tutorial.-visible {
    opacity: 1;
    display: block;
}

.mailchimp-input {
}

.mailchimp-submit {
}

.mailchimp-submit:hover {
}




.share {
    position: absolute;
    right: 0;
    top: 30;
}


.share {
    width: auto;

    padding-top: 10px;
    padding-right: 15px;
    padding-bottom: 10px;
    padding-left: 10px;

    -background: #ffc;
    text-align: right;
    position: absolute;
    white-space: nowrap;
}


.share .share-hint_1  { display: none; }
.share .share-hint_2  { display: none; }
.share .share-input { display: none; }
.share .share-icon  { display: none; }



.share .share-hint_1,
.share .share-hint_2 {
    transition: opacity .5s,
                max-width 0s .5s;

    max-width: 400px;
    overflow: hidden;
    opacity: 0;

    font-size: 12px;
    color: #999;
}

.share .share-hint_1 {
    display: inline-block;
    vertical-align: middle;
}


.share.-start {
    cursor: pointer;
}

.share.-start.-with-disabled .share-hint_1 {
    opacity: 1;
}

.share.-start.-with-disabled .share-icon {
    opacity: 1;
}


.share.-start:hover .share-hint_1 {
    transition: opacity 0s,
                max-width 0s;
    max-width: 400px;
    opacity: 1;
}

.share.-start .share-icon {
    display: inline-block;
}

.share .share-icon {
    margin-bottom: -4px; /* Adjust position relative to the hint */
    width: 13px;
    height: 13px;
    border-radius: 3px;
    border: 1px solid #ddd;
    margin-left: 2px;

    transition: border-color .5s;
    opacity: 0.5;
}


.share .share-icon-arrow,
.share .share-icon-spinner {
    display: block;
    position: absolute;
    margin-left: 0px;
    width: 13px;
    height: 13px;
}

.share .share-icon-spinner {
    margin-top: 0px;
}


.share .share-icon-arrow {
    transition: margin-top .25s,
                opacity .25s;
    margin-top: -10px;
}

.share.-start:hover .share-icon {
    transition: border-color .0s;
    border-color: #ccc;
}

.share:hover .share-icon {
    transition: opacity .15s;
    opacity: 1;
}

.share:hover .share-icon-arrow {
    transition: margin-top .15s;
    margin-top: -12px;
}


/* onboarding */

.share.-onboarding .share-icon {
    --border-color: #dA570f !important;
    border-color: #666 !important;
}

.share.-onboarding .share-icon-arrow path.svg-arrow {
    --stroke: #dA570f;
    stroke: #666;
}



.share.-saving .share-icon {
    display: inline-block;
    border-color: #ccc;
}



.share.-start .share-icon .share-icon-spinner {
    opacity: 0;
}

.share.-saving .share-icon .share-icon-arrow { opacity: 0; }

.share.-saving .share-icon .share-icon-spinner {
    transition: opacity .5s;
    opacity: 1; 
}

.share .share-input {
    display: none;
    position: absolute;
    margin-top: 6px;
    right: 15px;

    text-align: left;
    border-radius: 3px;
    border: 1px solid #ccc;
    background: none;
    outline: none;

    font-family: Arial, sans-serif;
    font-size: 11px;
    line-height: 13px;

    height: 13px !important;
    max-width: 13px;
    width: 140px;
    padding: 0;
}


.share.-saving .share-input {
    display: inline-block;
    opacity: 0;

    max-width: 25px;
    color: #fff;
}


.share.-saved .share-input {
    display: inline-block;
    opacity: 1;

    transition: max-width .25s,
                color .25s;
    max-width:  140px;
    color: #000;
}


.share.-saved .share-hint_2 {
    display: inline-block;
    opacity: 1;
    max-width: 400px;
    position: absolute;
    right: 165px;
    margin-top: 2px;
}



.standard-input {
	font-family: "Helvetica Neue", Arial, sans-serif;
    font-size: 80%;
    border: 1px solid #999;
    padding: .5em;

    outline: none;
    border-radius: .35em;
    margin: 0;
}


.standard-button {
	font-family: "Helvetica Neue", Arial, sans-serif;
    background: none;
    border: 1px solid #DA570F;
    font-size: 80%;
    color: #DA570F;
    padding: .5em 1em;
    cursor: pointer;
    -webkit-transition: .333s;
    border-radius: .35em;
    margin: 0;
}

.standard-button:hover {
    color: #fff;
    background: #DA570F;
    -webkit-transition: 0s;
}


.disable-rule-button {
    border: 1px solid #999;
    color: #000;
    background: none;
}

.disable-rule-button:hover {
    color: #DA570F;
    border-color: #DA570F;
    background: none;
}


.mainmenu {
    margin-top: -4px;
    margin-bottom: -14px;
    z-index: 1000;
}

.mainmenu span, .mainmenu a {
    margin-right: 1em;
}

.mainmenu .mainmenu-logo {
    font-weight: bold;
    margin-right: 1em;
}

.mainmenu-active {
}



/* TUESDAY */
body {
    padding-top: 75px;
}

.beta-banner {
    box-sizing: border-box;
    position: absolute;
    left: 0;
    right: 0;
    top: 0;
    width: 100%;
    overflow: hidden;
    white-space: nowrap;
    height: 50px;
    background: #4d0063;
    color: white;
    padding: 12px 45px;
}

.beta-banner a {
    color: white;
    border-bottom-color: #96c;
}

.beta-banner a:hover {
    opacity: .5;
}







.rule.-animated {
    transition: margin-top .25s;
}



.sidebar.-mode-rule .rule     { display: block; }
.sidebar.-mode-rule .tutorial { display: none !important; }
.sidebar.-mode-rule .super    { display: none !important; }

.sidebar.-mode-tutorial .rule     { display: none !important; }
.sidebar.-mode-tutorial .tutorial { display: block; }
.sidebar.-mode-tutorial .super    { display: none !important; }

.sidebar.-mode-super .rule     { display: none !important; }
.sidebar.-mode-super .tutorial { display: none !important; }
.sidebar.-mode-super .super    { display: block; }


button.dotted {
    border: 0;
    padding: 0;
    margin: 0;
    background: none;
    font-size: 100%;
    line-height: 150%;
    border-bottom: 1px dotted #999;
}

button.dotted:hover {
    opacity: 0.5;
}



.superbackground {
    position: fixed;
    left: 0;
    top: 0;
    width: 100%;
    height: 100%;
    overflow: hidden;
    pointer-events: none;

    opacity: 0;
    transition: opacity 3s;
}

.superbackground.-visible.-loaded {
    opacity: 1;
}

.superbackground img {
    position: absolute;
}



.super_badge {
    background: rgba(0,0,0,.1);
    border: 1px solid rgba(0,0,0,.115);
    border-radius: 2px;
    padding: .25em .5em;
}



.mainmenu {
    margin-bottom: -70px;
    z-index: 1000;
}

.mainmenu span, .mainmenu a {
    margin-right: 1em;
}

.mainmenu .mainmenu-logo {
    font-weight: bold;
    margin-right: 1em;
}

.mainmenu-active {
}


button.dotted {
    border: 0;
    padding: 0;
    margin: 0;
    background: none;
    font-size: 100%;
    line-height: 150%;
    border-bottom: 1px dotted #999;
    cursor: pointer;
}

button.dotted:hover {
    opacity: 0.5;
}



.ql-glaveditor {
    margin-bottom: 1.5em !important;

}

.ql-glaveditor.ql-container {
    height: auto;
}

.ql-glaveditor .ql-editor {
    outline: none;
    font-size: 14.6px;
    line-height: 160%;
    padding: 0;

    height: auto;
    min-height: 400px;
}

.ql-glaveditor p {
    margin-bottom: 0;

}


.hint {
    font-style: normal;
    font-weight: normal;
    border-radius: .2em;
    padding-bottom: 3px;
}

.hint.-highlighted {
    -webkit-transition: background-color .25s, color .25s;

    padding: 3px 2px;
    margin: 0 -2px;
}


.hint.-selected {
    -webkit-transition: background-color 0s, color 0s;

    padding: 3px 2px;
    margin: 0 -2px;
}



.hint.-disabled {
    background: url(/static/underline-disabled.svg) 0 100% repeat-x;
    color: #999;
}

.hint.-disabled.-highlighted {
    background: #eee;
}

.hint.-disabled.-highlighted.-selected {
    background: #999;
    color: #fff;
}







.tab {
    border: 0;
    background: none;
    margin: 0;
    font-size: 100%;
    padding: .5em 1em;
    cursor: pointer;
    display: inline-block;

    /*
     * Should be set by style attr
    color: attr(data-text-color);
    border-top-color: attr(data-line-color);
    */

    border-top-width: 0px;
    border-top-style: solid;
    border-top-color: none;

}

.tab::focus {
    -webkit-outline: none !important;
    -o-outline: none !important;
    outline: none !important;

}

.tab.-selected {
    background: #fff;
    cursor: default;
    border-top-width: 1px;

}

.tab.-disabled {
    opacity: .5;
    cursor: default;
}


/*
.tab.-red {
    color: #dA570f;
    border-top-color: #dA570f;
}


.tab.-blue {
    color: #10807F;
    border-top-color: #10807F;
}

.tab.-purple {
    color: #4d0063;
    border-top-color: #4d0063;
}

.tab.-green {
    color: #00631d;
    border-top-color: #00631d;
}
*/