#root {
    display: flex;
    min-height: 100vh;
    flex-direction: column;
}

body, section {
    flex: 1;
}

.button.start-tag {
    position: absolute;
    top: 0;
    right: 0;
    display: none;
}

.can-tag-container {
    min-width: 250px;
}

.can-tag-container.can-tag:hover .button.start-tag {
    display: initial;
}

.can-tag-container.tagging textarea.textarea {
    line-height: 1.2;
    overflow-y: hidden;
    padding: 0;
    border: 0;
}

.is-vertical-aligned-top {
    vertical-align: top;
}

.margin-b-half-em {
    margin-bottom: 0.5em;
}

.margin-b-1-em {
    margin-bottom: 1em;
}

.pad-r-quarter-em {
    padding-right: 0.25em;
}

.pad-l-quarter-em {
    padding-left: 0.25em;
}

.pad-r-half-em {
    padding-right: 0.5em;
}

.pad-1-em {
    padding: 1em;
}

.margin-1-em {
    margin: 1em;
}

.margin-l-1-em {
    margin-left: 1em;
}

.margin-r-1-em {
    margin-right: 1em;
}

.margin-l-half-em {
    margin-left: 0.5em;
}

.margin-r-half-em {
    margin-right: 0.5em;
}

.margin-b-1-em {
    margin-bottom: 1em;
}

.margin-tb-1-em {
    margin-top: 1em;
    margin-bottom: 1em;
}

.select-guard {
    user-select: none;
}

.select-guard .can-select-text {
    user-select: text;
}

.red-underline {
  text-decoration: #ff3860b0 underline;
}

.green-underline {
  text-decoration: #23d160b0 underline;
}

.underline {
    text-decoration: underline;
}

.line-through {
    text-decoration: line-through;
}

.control.inverted-input .input {
    background-color: #00000020;
    border: 0;
    color: white;
}

.control.inverted-input .input::placeholder {
    color: whitesmoke;
}

.control.has-icons-left.inverted-input .input:focus ~.icon {
    color: white;
}


/* Styling Firebase login flow */

.firebaseui-card-content {
    /*margin-top: 2em;*/
    margin-bottom: 2em;
}

.firebaseui-textfield {
    margin-top: 0.5em;
    margin-bottom: 1em;
}

label.firebaseui-label {
    display: block;
    font-size: 11px;
    letter-spacing: 1px;
    margin-bottom: 5px;
    text-transform: uppercase;
}

.firebaseui-textfield input::selection {
    color: #ff6c41;
    background: white;
}
.firebaseui-textfield input {
    background-color: #00000020;
    box-shadow: inset 0 4px 8px #00000010;
    border: 0;
    color: white;
    width: 100%;
    padding: 0.5em 1em;
    border-radius: 4px;
}

.firebaseui-form-actions {
    display: flex;
    justify-content: flex-end;
}

.firebaseui-label[for="name"] {
    height: 1.5em;
    color: transparent;
}
.firebaseui-label[for="name"]::before {
    content: 'Display Name (alphanumeric/hyphen (-) only)';
    color: white;
}

.firebaseui-title {
    height: 1.5em;
    color: transparent;
}
.firebaseui-title::before {
    content: 'Input email to log in or sign up.';
    color: white;
}

.firebaseui-card-actions button {
    margin-left: 1em;
    background: transparent;
    border: 1px solid white;
    color: white;
    cursor: pointer;
    justify-content: center;
    text-align: center;
    white-space: nowrap;
    border-radius: 4px;
    box-shadow: none;
    display: inline-flex;
    font-size: 1rem;
    height: 2.25em;
    line-height: 1.5;
    position: relative;
    vertical-align: top;
}

.firebaseui-card-actions button:hover {
    background-color: white;
    color: #ff6c41;
}

.firebaseui-error-wrapper .firebaseui-error:not(:empty) {
    background: white;
    border-radius: 4px;
    box-shadow: 0 4px 8px #0001;
    padding: 1em;
    color: #ff3860;
}

.navbar .dropdown .user-img {
    height: 24px;
}


/*Color picker*/

.color-picker-container {
    height: 30px;
    width: 30px;
    background-size: auto 100% !important;
    padding: 0;
    background: url("https://storage.googleapis.com/thoughtvector-public/taggit/etc/color_picker.png") no-repeat;
}

.color-picker-container * {
    cursor: pointer;
}

.svg-2-radius svg {
    border-radius: 2px;
}

.svg-4-radius svg {
    border-radius: 4px;
}

.topic-extras a:hover {
    background-color: #00000010;
}

.taggit-topic-button .tag {
    font-weight: 400;
}

.taggit-topic-button a.tag:hover {
    text-decoration: none;
}

.taggit-topic-button .tag.is-dark:hover {
    background-color: #242424 !important;
}

.card.content-card .card-header {
    box-shadow: none;
    border-bottom: 1px solid #dbdbdb;
}

.strikeout {
      position: relative;
}
.strikeout::after {
  border-bottom: 4px solid;
  content: "";
  left: 0;
  line-height: 1em;
  margin-top: calc(0.125em / 2 * -1);
  position: absolute;
  right: 0;
  top: 50%;
}


header.hero .tabs .is-active a {
    font-weight: 700;
    border-bottom: 4px solid white;
}

header.hero .tabs a {
    border-bottom: 4px solid transparent;
}

header.hero .tabs a:hover {
    background-color: #00000010;
}

.hero.is-primary .button.is-loading {
    background-color: white;
}

.auto-tag-correction-dropdown > .dropdown-menu {
    user-select: none;
}
.auto-tag-correction-dropdown:hover .auto-tagged, .auto-tag-correction-dropdown.is-active .auto-tagged {
    text-decoration: underline;
}

.tagged, .auto-tagged {
    text-shadow: -1px 0 0 #fff4, 1px 0 0 #fff4, 0 -1px 0 #fff4, 0 1px 0 #fff4, -1px -1px 0 #fff4, 1px 1px 0 #fff4, 1px -1px 0 #fff4, -1px 1px 0 #fff4;
    cursor: pointer;
    line-height: 1.5;
    border: 3px solid transparent;
    border-radius: 8px;
    padding-left: 2px;
    padding-right: 2px;
}

.tagged::selection, .auto-tagged::selection {
    text-shadow: none;
}

.can-tag-container span, .tag-text span {
    white-space: pre-wrap;
    line-height: 1.65;
}

.auto-tag-correction-dropdown .dropdown-menu {
    left: initial;
    right: 0;
}
td:last-child .auto-tag-correction-dropdown .dropdown-menu {
    left: initial;
    right: 0;
}
td:first-child .auto-tag-correction-dropdown .dropdown-menu {
    left: 0;
    right: initial;
}
td:first-child:last-child .auto-tag-correction-dropdown .dropdown-menu {
    left: initial;
    right: initial;
}

/* Considered briefly for splitting auto tagged borders across lines - needs more work */
/*.can-tag-container span.auto-tagged, .tag-text span.autotagged {*/
/*    padding: 0 0.25em;*/
/*    -webkit-box-decoration-break: clone;*/
/*}*/

/*.can-tag-container:not(first) span.auto-tagged, .tag-text:not(first) span.autotagged {*/
/*    margin-left: 2px;*/
/*}*/

strong {
    color: #ff6c41;
}


/* Progress Bar Styling */
.taggit-progress-bar-container .bar-components {
    display: flex;
    flex-flow: row nowrap;
}
.taggit-progress-bar-component {
    flex: 1;
    height: 16px;
    border-top: 4px #dbdbdb solid;
    border-bottom: 4px #dbdbdb solid;
    position: relative;
    transition: all 0.3s ease;
}
.taggit-progress-bar-component:first-child {
    border-radius: 1000px 0 0 1000px;
    border-left: 4px #dbdbdb solid;
}
.taggit-progress-bar-component:last-child {
    border-radius: 0 1000px 1000px 0;
    border-right: 4px #dbdbdb solid;
}
.progress-bar-annotation .heading {
    display: inline-block;
    margin-right: 4px;
    line-height: 2;
    vertical-align: top;
}
.bar-annotations {
    position: relative;
    margin: 4px;
}
.progress-bar-annotation-tick {
    display: inline-block;
    width: 1px;
    height: 9px;
    background: grey;
    position: absolute;
    top: -2px;
}


/* Taggie Styling */
.taggie-root {
    position: fixed;
    bottom: 2.5em;
    right: 0.5em;
}
.taggie-root > svg {
    margin: 1.5em;
}
.taggie-content {
    max-width: 21em;
    background-color: rgba(255, 255, 255, 0.9);
}
@keyframes taggie-jump {
    0%   {transform: translate3d(0,0,0) scale3d(1,1,1);}
    5%   {transform: translate3d(0,10%,0) scale3d(1,0.8,1);}
    30%  {transform: translate3d(0,-15%,0) scale3d(1,1.3,1);}
    60% {transform: translate3d(0,-30%,0) scale3d(1,0.9,1);}
    100% {transform: translate3d(0, 0,0) scale3d(1,1,1);}
}
@keyframes taggie-die {
    0%   {transform: translate3d(0,0,0) scale3d(1,1,1);}
    5%   {transform: translate3d(-5%,-10%,0) scale3d(0.8,1.2,1);}
    25%   {transform: translate3d(-5%,-10%,0) scale3d(0.8,1.2,1);}
    30%   {transform: translate3d(0,-10%,0) scale3d(1,1,1);}
    40%   {transform: translate3d(10%,0,0) scale3d(1.1,0.9,1);}
    50%   {transform: translate3d(-10%,0,0) scale3d(1.2,0.8,1);}
    60%   {transform: translate3d(15%,0,0) scale3d(1.2,0.8,1);}
    80%   {transform: translate3d(-10%,0,0) scale3d(1.2,0.8,1);}
    95%   {transform: translate3d(0,0,0) scale3d(1.2,0.8,1);}
    100%   {transform: translate3d(0,0,0) scale3d(1,1,1);}
}
.taggie-die {
    animation: taggie-die 1s linear 1;
}
.taggie-jump {
    animation: taggie-jump .4s linear 1;
}
.taggie-happy-jump {
    animation: taggie-jump .3s linear 3;
}

/* Tutorial styling */
div.tutorial-content p {
    margin-bottom: 1em;
}
button.skip-tutorial:hover {
    background-color: rgb(255, 56, 96) !important;
    color: white !important;
}


/* Stripe Styling */
.StripeElement {
    box-sizing: border-box;

    height: 40px;

    padding: 10px 12px;

    border: 1px solid transparent;
    border-radius: 4px;
    background-color: white;

    box-shadow: 0 1px 3px 0 #e6ebf1;
    -webkit-transition: box-shadow 150ms ease;
    transition: box-shadow 150ms ease;
}

.StripeElement--focus {
    box-shadow: 0 1px 3px 0 #cfd7df;
}

.StripeElement--invalid {
    border-color: #fa755a;
}

.StripeElement--webkit-autofill {
    background-color: #fefde5 !important;
}

.billing-form input.input {
    border-width: 0;
    box-shadow: 0 1px 3px 0 #e6ebf1;
}

.vega-embed {
    padding-right: 0 !important;
}

.vega-embed details {
    display: none;
}

@media screen and (min-width: 1396px) {
    .fullhd-columns {
        display: flex;
    }
}

.classifier-score {
    opacity: 0.5;
}

.classifier-score.active-classifier {
    opacity: 1.0;
}

label[for="ui-sign-in-name-input"] {
    color: transparent;
}

label[for="ui-sign-in-name-input"]::before {
    content: 'Display Name';
    color: white;
}