@import "modules/importAll";
@import "print.global"; 
@import "~react-quill/dist/quill.snow";
@import "~bootstrap/scss/_functions.scss";
@import "~bootstrap/scss/_variables.scss";
@import "~bootstrap/scss/_mixins.scss";
@import "~bootstrap/scss/_tooltip.scss";

html, body, #root, #root > div {
    min-height: calc(100vh);
}

* {
    box-sizing: border-box;
}

html, body, #root {
    min-width: 1024px;
    font-size: 14px;
    line-height: 1.42857;
}

body {
    &.exporting {
        .supporthero-button {
            display: none !important;
        }
    } 
}

/* Very basic text styling */

body, button, input {
    font-family: $bodyFont;
    color: $black;
}

p, h1, h2, h3, h4, h5, button, input {
    line-height: 1.4em;
    font-family: $bodyFont;
    color: $black;
}

code {
    font-family: $codeFont;
    background-color: rgb(250, 250, 250);
    padding: 0 0.25rem;
    border: 1px solid $lightBlueGrey !important;

    @include border-radius(3px);
}

/* Identify elements that can be clicked or tap to interact with */

.clickable, a {
    cursor: pointer;
    color: $black;

    &:hover {
        opacity: 0.8;
    }

    &:active {
        opacity: 0.6;
    }

    &:disabled {
        opacity: 1;
        cursor: not-allowed;
    }
}

.disabled {
    cursor: not-allowed;
}

.noPointerEvents {
    pointer-events: none;
}

.noSelect {
    user-select: none;
}

/* Always show modals on top of the stack */

.ReactModalPortal {
    > * {
        z-index: 99;
    }
}

/* Remove outline from input elements */
*:focus, button:focus, input:focus {
    outline: none;
}

/* tmp for dashboards */

.Dashboard {
    width: 100%;
}

/* Style the "empty value" label for visualisations as italic text */
.emptyValue {
    font-style: italic;
}

.loadingIndicator {
    padding: 6rem 1rem;
}

/* Features that have not been implemented yet */
.notImplemented {
    cursor: not-allowed;
    filter: grayscale(100%);
    display: none !important;
}

.breakAll {
    word-break: break-all;
}

.capitalize {
    text-transform: capitalize;
}

.clearfix {
    width: 100%;
    clear: both;
}

.alert {
    padding: 10px;
    border: 1px solid $lightBlueGrey;
    display: inline-block;
    display: flex;
    margin-bottom: 10px;

    @include border-radius(6px);

    &.alert-success {
        color: $darkLime;
        border-color: $darkLime;
    }

    &.alert-danger {
        color: $errorRed;
        border-color: $errorRed;
    }
}

.introjs-tooltip {
    width: 322px;
    background-color: #1B1F23;
    padding: 20px;

    .introjs-arrow.left {
        border-right-color: #1B1F23;
    }

    .introjs-tooltiptext {
        color: rgba(255, 255, 255, 0.92);
    }

    .introjs-button {
        background: #2C3136;
        color: rgba(255, 255, 255, 0.92);
        font-size: 13px;
        text-shadow: none;
        border: none;
        font-weight: 500;
        padding: 7px 14px;

        &:hover {
            box-shadow: none;
        }

        &.introjs-disabled,
        &.introjs-prevbutton {
            display: none;
        }

        &.introjs-skipbutton:not(.introjs-donebutton) {
            background: #1B1F23;
        }
    }

    h2 {
      color: rgba(255, 255, 255, 0.92);  
    }
  
    p {
      margin-top: 1rem;
      color: rgba(255, 255, 255, 0.92);
    }
}


