.hwt-container {
    display: inline-block;
    position: relative;
    overflow: hidden !important;
    -webkit-text-size-adjust: none !important;
    background-color: white;
    border: 1px solid #dbdbdb;
    border-radius: 4px;
    font-size: 16px;
    width: 100%;
    font-family: Montserrat, sans-serif;
}

.hwt-container textarea {
    color: #363636;
    outline: none;
}

.hwt-backdrop {
    position: absolute !important;
    top: 0 !important;
    right: -99px !important;
    bottom: 0 !important;
    left: 0 !important;
    padding-right: 99px !important;
    overflow-x: hidden !important;
    overflow-y: auto !important;
}

.hwt-highlights {
    width: auto !important;
    height: auto !important;
    border-color: transparent !important;
    white-space: pre-wrap !important;
    word-wrap: break-word !important;
    color: transparent !important;
    overflow: hidden !important;
}

.hwt-input {
    display: block !important;
    position: relative !important;
    margin: 0;
    padding: 0;
    border-radius: 0;
    font: inherit;
    overflow-x: hidden !important;
    overflow-y: auto !important;

    resize: none;
    width: 100%;
    height: 100px;
}

.hwt-content {
    border: 0;
    background: none transparent !important;
    padding: 7px 12px !important;
}

.hwt-content mark.variable {
    position: relative;
    z-index: 0;

    padding: 0 !important;
    color: inherit;
    border-radius: 2px;
    background-color: rgb(248,248,248);
    box-shadow: 0 0 2px #888888;
}

.hwt-content mark.variable._lodds {
    background-color: rgb(255, 252, 235);
    box-shadow: 0 0 0 1.4px rgb(237, 228, 173);
}

.hwt-content mark.variable._podds {
    background-color: rgb(225, 252, 244);
    box-shadow: 0 0 0 1.4px rgb(182, 227, 213);
}

.hwt-content mark.variable-bad {
    position: relative;
    z-index: 2;

    padding: 0 !important;
    color: inherit;
    border-radius: 2px;
    background-color: rgba(255,120,120,0.4);
    box-shadow: 0 0 2px rgba(255,120,120,0.5);
    animation: bad-variable-pulse 1s ease-out infinite;
}

.hwt-content mark.variable-bad mark.variable {
    background-color: transparent;
    box-shadow: none;
}

.hwt-content mark.operand {
    position: relative;
    z-index: 1;

    padding: 0 !important;
    color: inherit;
    border-radius: 2px;
    background-color: rgb(215, 242, 252);
    box-shadow: 0 0 0 1.4px rgb(148, 200, 227);
}

.hwt-content mark.bracket
{
    position: relative;
    z-index: 1;

    padding: 0 !important;
    color: inherit;
    border-radius: 2px;
    background-color: rgb(233, 255, 176);
    box-shadow: 0 0 0 1.4px rgb(191, 219, 118);
}


@-webkit-keyframes bad-variable-pulse {
    0%   { box-shadow: 0 0 1.4px rgba(255,120,120,0.9); }
    50%  { box-shadow: 0 0 10px rgba(255,120,120,0.9); }
    100% { box-shadow: 0 0 1.4px rgba(255,120,120,0.9); }
}


/** DARK THEME */
body.is-dark .hwt-container {
    background-color: #2d2d30;
    border-color: #404046;
}

body.is-dark .hwt-container textarea {
    color: #aaaab3;
}

body.is-dark .hwt-content mark.variable {
    background-color: rgb(80,80,80);
    box-shadow: 0 0 2px rgb(195,195,195);
}

body.is-dark .hwt-content mark.variable._lodds {
    background-color: rgb(74, 69, 33);
    box-shadow: 0 0 0 1.4px rgb(103, 97, 57);
}

body.is-dark .hwt-content mark.variable._podds {
    background-color: rgb(48, 79, 69);
    box-shadow: 0 0 0 1.4px rgb(71, 103, 93);
}

body.is-dark .hwt-content mark.variable-bad {
    background-color: rgba(255,120,120,0.8);
    box-shadow: 0 0 2px rgba(255,120,120,0.8);
}

body.is-dark .hwt-content mark.operand {
    background-color: rgb(24, 98, 153);
    box-shadow: 0 0 0 1.4px #188ae2;
}

body.is-dark .hwt-content mark.bracket
{
    background-color: rgb(32, 84, 32);
    box-shadow: 0 0 0 1.4px #498A49;
}