:root {
    --blue: #007bff;
    --indigo: #6610f2;
    --purple: #6f42c1;
    --pink: #e83e8c;
    --red: #EA2027;
    --light-red: #ea858f;
    --orange: #fd7e14;
    --light-orange: #ffd96a;
    --yellow: #FFC107;
    --green: #44bd32;
    --light-green: #7eca8f;
    --teal: #20c997;
    --cyan: #17a2b8;
    --white: #fff;
    --gray: #6c757d;
    --gray-dark: #343a40;
    --primary: #3f51b5;
    --primary-hover: #303F9F;
    --primary-hover-border: #EA9762;
    --secondary: #546e7a;
    --secondary-hover: #37474F;
    --success: #00cc66;
    --info: #d6e7bc;
    --warning: #ffcc00;
    --danger: #c23616;
    --light: #f8f9fa;
    --dark: #343a40;
    --primary-nav: #353b48;
    --secondary-nav: #2f3640;
    --primary-bg: #f5f6fa;
    --secondary-bg: #7f8fa6;
    --breakpoint-xs: 0;
    --breakpoint-sm: 576px;
    --breakpoint-md: 768px;
    --breakpoint-lg: 992px;
    --breakpoint-xl: 1200px;
    --font-family-sans-serif: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, "Noto Sans", sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol", "Noto Color Emoji";
    --font-family-monospace: SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono", "Courier New", monospace;
}

/*!
 * Bootstrap v3.2.0 (http://getbootstrap.com)
 * Copyright 2011-2014 Twitter, Inc.
 * Licensed under MIT (https://github.com/twbs/bootstrap/blob/master/LICENSE)
 */



/*! normalize.css v3.0.1 | MIT License | git.io/normalize */
html {
    font-family: sans-serif;
    -webkit-text-size-adjust: 100%;
    -ms-text-size-adjust: 100%;
}

body {
    margin: 0;
}

article,
aside,
details,
figcaption,
figure,
footer,
header,
hgroup,
main,
nav,
section,
summary {
    display: block;
}

audio,
canvas,
progress,
video {
    display: inline-block;
    vertical-align: baseline;
}

    audio:not([controls]) {
        display: none;
        height: 0;
    }

[hidden],
template {
    display: none;
}

a {
    background: transparent;
}

    a:active,
    a:hover {
        outline: 0;
    }

abbr[title] {
    border-bottom: 1px dotted;
}

b,
strong {
    font-weight: bold;
}

dfn {
    font-style: italic;
}

h1 {
    margin: .67em 0;
    font-size: 2em;
}

mark {
    color: #000;
    background: #ff0;
}

small {
    font-size: 80%;
}

sub,
sup {
    position: relative;
    font-size: 75%;
    line-height: 0;
    vertical-align: baseline;
}

sup {
    top: -.5em;
}

sub {
    bottom: -.25em;
}

img {
    border: 0;
}

svg:not(:root) {
    overflow: hidden;
}

figure {
    margin: 1em 40px;
}

hr {
    height: 0;
    -webkit-box-sizing: content-box;
    -moz-box-sizing: content-box;
    box-sizing: content-box;
}

pre {
    overflow: auto;
}

code,
kbd,
pre,
samp {
    font-family: monospace, monospace;
    font-size: 1em;
}

button,
input,
optgroup,
select,
textarea {
    margin: 0;
    font: inherit;
    color: inherit;
}

button {
    overflow: visible;
}

button,
select {
    text-transform: none;
}

button,
html input[type="button"],
input[type="reset"],
input[type="submit"] {
    -webkit-appearance: button;
    cursor: pointer;
}

    button[disabled],
    html input[disabled] {
        cursor: default;
    }

    button::-moz-focus-inner,
    input::-moz-focus-inner {
        padding: 0;
        border: 0;
    }

input {
    line-height: normal;
}

    input[type="checkbox"],
    input[type="radio"] {
        -webkit-box-sizing: border-box;
        -moz-box-sizing: border-box;
        box-sizing: border-box;
        padding: 0;
    }

    input[type="number"]::-webkit-inner-spin-button,
    input[type="number"]::-webkit-outer-spin-button {
        height: auto;
    }

    input[type="search"] {
        -webkit-box-sizing: content-box;
        -moz-box-sizing: content-box;
        box-sizing: content-box;
        -webkit-appearance: textfield;
    }

        input[type="search"]::-webkit-search-cancel-button,
        input[type="search"]::-webkit-search-decoration {
            -webkit-appearance: none;
        }

fieldset {
    padding: .35em .625em .75em;
    margin: 0 2px;
    border: 1px solid #c0c0c0;
}

legend {
    padding: 0;
    border: 0;
}

textarea {
    overflow: auto;
}

optgroup {
    font-weight: bold;
}

table {
    border-spacing: 0;
    border-collapse: collapse;
}

td,
th {
    padding: 0;
}

@media print {
    * {
        color: #000 !important;
        text-shadow: none !important;
        background: transparent !important;
        -webkit-box-shadow: none !important;
        box-shadow: none !important;
    }

    a,
    a:visited {
        text-decoration: underline;
    }

        a[href]:after {
            content: " (" attr(href) ")";
        }

    abbr[title]:after {
        content: " (" attr(title) ")";
    }

    a[href^="javascript:"]:after,
    a[href^="#"]:after {
        content: "";
    }

    pre,
    blockquote {
        border: 1px solid #999;
        page-break-inside: avoid;
    }

    thead {
        display: table-header-group;
    }

    tr,
    img {
        page-break-inside: avoid;
    }

    img {
        max-width: 100% !important;
    }

    p,
    h2,
    h3 {
        orphans: 3;
        widows: 3;
    }

    h2,
    h3 {
        page-break-after: avoid;
    }

    select {
        background: #fff !important;
    }

    .navbar {
        display: none;
    }

    .table td,
    .table th {
        background-color: #fff !important;
    }

    .btn > .caret,
    .dropup > .btn > .caret {
        border-top-color: #000 !important;
    }

    .label {
        border: 1px solid #000;
    }

    .table {
        border-collapse: collapse !important;
    }

    .table-bordered th,
    .table-bordered td {
        border: 1px solid #ddd !important;
    }
}

@font-face {
    font-family: 'Glyphicons Halflings';
    src: url('../fonts/glyphicons-halflings-regular.eot');
    src: url('../fonts/glyphicons-halflings-regular.eot?#iefix') format('embedded-opentype'), url('../fonts/glyphicons-halflings-regular.woff') format('woff'), url('../fonts/glyphicons-halflings-regular.ttf') format('truetype'), url('../fonts/glyphicons-halflings-regular.svg#glyphicons_halflingsregular') format('svg');
}

.glyphicon {
    position: relative;
    top: 1px;
    display: inline-block;
    font-family: 'Glyphicons Halflings';
    font-style: normal;
    font-weight: normal;
    line-height: 1;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
}

.glyphicon-asterisk:before {
    content: "\2a";
}

.glyphicon-plus:before {
    content: "\2b";
}

.glyphicon-euro:before {
    content: "\20ac";
}

.glyphicon-minus:before {
    content: "\2212";
}

.glyphicon-cloud:before {
    content: "\2601";
}

.glyphicon-envelope:before {
    content: "\2709";
}

.glyphicon-pencil:before {
    content: "\270f";
}

.glyphicon-glass:before {
    content: "\e001";
}

.glyphicon-music:before {
    content: "\e002";
}

.glyphicon-search:before {
    content: "\e003";
}

.glyphicon-heart:before {
    content: "\e005";
}

.glyphicon-star:before {
    content: "\e006";
}

.glyphicon-star-empty:before {
    content: "\e007";
}

.glyphicon-user:before {
    content: "\e008";
}

.glyphicon-film:before {
    content: "\e009";
}

.glyphicon-th-large:before {
    content: "\e010";
}

.glyphicon-th:before {
    content: "\e011";
}

.glyphicon-th-list:before {
    content: "\e012";
}

.glyphicon-ok:before {
    content: "\e013";
}

.glyphicon-remove:before {
    content: "\e014";
}

.glyphicon-zoom-in:before {
    content: "\e015";
}

.glyphicon-zoom-out:before {
    content: "\e016";
}

.glyphicon-off:before {
    content: "\e017";
}

.glyphicon-signal:before {
    content: "\e018";
}

.glyphicon-cog:before {
    content: "\e019";
}

.glyphicon-trash:before {
    content: "\e020";
}

.glyphicon-home:before {
    content: "\e021";
}

.glyphicon-file:before {
    content: "\e022";
}

.glyphicon-time:before {
    content: "\e023";
}

.glyphicon-road:before {
    content: "\e024";
}

.glyphicon-download-alt:before {
    content: "\e025";
}

.glyphicon-download:before {
    content: "\e026";
}

.glyphicon-upload:before {
    content: "\e027";
}

.glyphicon-inbox:before {
    content: "\e028";
}

.glyphicon-play-circle:before {
    content: "\e029";
}

.glyphicon-repeat:before {
    content: "\e030";
}

.glyphicon-refresh:before {
    content: "\e031";
}

.glyphicon-list-alt:before {
    content: "\e032";
}

.glyphicon-lock:before {
    content: "\e033";
}

.glyphicon-flag:before {
    content: "\e034";
}

.glyphicon-headphones:before {
    content: "\e035";
}

.glyphicon-volume-off:before {
    content: "\e036";
}

.glyphicon-volume-down:before {
    content: "\e037";
}

.glyphicon-volume-up:before {
    content: "\e038";
}

.glyphicon-qrcode:before {
    content: "\e039";
}

.glyphicon-barcode:before {
    content: "\e040";
}

.glyphicon-tag:before {
    content: "\e041";
}

.glyphicon-tags:before {
    content: "\e042";
}

.glyphicon-book:before {
    content: "\e043";
}

.glyphicon-bookmark:before {
    content: "\e044";
}

.glyphicon-print:before {
    content: "\e045";
}

.glyphicon-camera:before {
    content: "\e046";
}

.glyphicon-font:before {
    content: "\e047";
}

.glyphicon-bold:before {
    content: "\e048";
}

.glyphicon-italic:before {
    content: "\e049";
}

.glyphicon-text-height:before {
    content: "\e050";
}

.glyphicon-text-width:before {
    content: "\e051";
}

.glyphicon-align-left:before {
    content: "\e052";
}

.glyphicon-align-center:before {
    content: "\e053";
}

.glyphicon-align-right:before {
    content: "\e054";
}

.glyphicon-align-justify:before {
    content: "\e055";
}

.glyphicon-list:before {
    content: "\e056";
}

.glyphicon-indent-left:before {
    content: "\e057";
}

.glyphicon-indent-right:before {
    content: "\e058";
}

.glyphicon-facetime-video:before {
    content: "\e059";
}

.glyphicon-picture:before {
    content: "\e060";
}

.glyphicon-map-marker:before {
    content: "\e062";
}

.glyphicon-adjust:before {
    content: "\e063";
}

.glyphicon-tint:before {
    content: "\e064";
}

.glyphicon-edit:before {
    content: "\e065";
}

.glyphicon-share:before {
    content: "\e066";
}

.glyphicon-check:before {
    content: "\e067";
}

.glyphicon-move:before {
    content: "\e068";
}

.glyphicon-step-backward:before {
    content: "\e069";
}

.glyphicon-fast-backward:before {
    content: "\e070";
}

.glyphicon-backward:before {
    content: "\e071";
}

.glyphicon-play:before {
    content: "\e072";
}

.glyphicon-pause:before {
    content: "\e073";
}

.glyphicon-stop:before {
    content: "\e074";
}

.glyphicon-forward:before {
    content: "\e075";
}

.glyphicon-fast-forward:before {
    content: "\e076";
}

.glyphicon-step-forward:before {
    content: "\e077";
}

.glyphicon-eject:before {
    content: "\e078";
}

.glyphicon-chevron-left:before {
    content: "\e079";
}

.glyphicon-chevron-right:before {
    content: "\e080";
}

.glyphicon-plus-sign:before {
    content: "\e081";
}

.glyphicon-minus-sign:before {
    content: "\e082";
}

.glyphicon-remove-sign:before {
    content: "\e083";
}

.glyphicon-ok-sign:before {
    content: "\e084";
}

.glyphicon-question-sign:before {
    content: "\e085";
}

.glyphicon-info-sign:before {
    content: "\e086";
}

.glyphicon-screenshot:before {
    content: "\e087";
}

.glyphicon-remove-circle:before {
    content: "\e088";
}

.glyphicon-ok-circle:before {
    content: "\e089";
}

.glyphicon-ban-circle:before {
    content: "\e090";
}

.glyphicon-arrow-left:before {
    content: "\e091";
}

.glyphicon-arrow-right:before {
    content: "\e092";
}

.glyphicon-arrow-up:before {
    content: "\e093";
}

.glyphicon-arrow-down:before {
    content: "\e094";
}

.glyphicon-share-alt:before {
    content: "\e095";
}

.glyphicon-resize-full:before {
    content: "\e096";
}

.glyphicon-resize-small:before {
    content: "\e097";
}

.glyphicon-exclamation-sign:before {
    content: "\e101";
}

.glyphicon-gift:before {
    content: "\e102";
}

.glyphicon-leaf:before {
    content: "\e103";
}

.glyphicon-fire:before {
    content: "\e104";
}

.glyphicon-eye-open:before {
    content: "\e105";
}

.glyphicon-eye-close:before {
    content: "\e106";
}

.glyphicon-warning-sign:before {
    content: "\e107";
}

.glyphicon-plane:before {
    content: "\e108";
}

.glyphicon-calendar:before {
    content: "\e109";
}

.glyphicon-random:before {
    content: "\e110";
}

.glyphicon-comment:before {
    content: "\e111";
}

.glyphicon-magnet:before {
    content: "\e112";
}

.glyphicon-chevron-up:before {
    content: "\e113";
}

.glyphicon-chevron-down:before {
    content: "\e114";
}

.glyphicon-retweet:before {
    content: "\e115";
}

.glyphicon-shopping-cart:before {
    content: "\e116";
}

.glyphicon-folder-close:before {
    content: "\e117";
}

.glyphicon-folder-open:before {
    content: "\e118";
}

.glyphicon-resize-vertical:before {
    content: "\e119";
}

.glyphicon-resize-horizontal:before {
    content: "\e120";
}

.glyphicon-hdd:before {
    content: "\e121";
}

.glyphicon-bullhorn:before {
    content: "\e122";
}

.glyphicon-bell:before {
    content: "\e123";
}

.glyphicon-certificate:before {
    content: "\e124";
}

.glyphicon-thumbs-up:before {
    content: "\e125";
}

.glyphicon-thumbs-down:before {
    content: "\e126";
}

.glyphicon-hand-right:before {
    content: "\e127";
}

.glyphicon-hand-left:before {
    content: "\e128";
}

.glyphicon-hand-up:before {
    content: "\e129";
}

.glyphicon-hand-down:before {
    content: "\e130";
}

.glyphicon-circle-arrow-right:before {
    content: "\e131";
}

.glyphicon-circle-arrow-left:before {
    content: "\e132";
}

.glyphicon-circle-arrow-up:before {
    content: "\e133";
}

.glyphicon-circle-arrow-down:before {
    content: "\e134";
}

.glyphicon-globe:before {
    content: "\e135";
}

.glyphicon-wrench:before {
    content: "\e136";
}

.glyphicon-tasks:before {
    content: "\e137";
}

.glyphicon-filter:before {
    content: "\e138";
}

.glyphicon-briefcase:before {
    content: "\e139";
}

.glyphicon-fullscreen:before {
    content: "\e140";
}

.glyphicon-dashboard:before {
    content: "\e141";
}

.glyphicon-paperclip:before {
    content: "\e142";
}

.glyphicon-heart-empty:before {
    content: "\e143";
}

.glyphicon-link:before {
    content: "\e144";
}

.glyphicon-phone:before {
    content: "\e145";
}

.glyphicon-pushpin:before {
    content: "\e146";
}

.glyphicon-usd:before {
    content: "\e148";
}

.glyphicon-gbp:before {
    content: "\e149";
}

.glyphicon-sort:before {
    content: "\e150";
}

.glyphicon-sort-by-alphabet:before {
    content: "\e151";
}

.glyphicon-sort-by-alphabet-alt:before {
    content: "\e152";
}

.glyphicon-sort-by-order:before {
    content: "\e153";
}

.glyphicon-sort-by-order-alt:before {
    content: "\e154";
}

.glyphicon-sort-by-attributes:before {
    content: "\e155";
}

.glyphicon-sort-by-attributes-alt:before {
    content: "\e156";
}

.glyphicon-unchecked:before {
    content: "\e157";
}

.glyphicon-expand:before {
    content: "\e158";
}

.glyphicon-collapse-down:before {
    content: "\e159";
}

.glyphicon-collapse-up:before {
    content: "\e160";
}

.glyphicon-log-in:before {
    content: "\e161";
}

.glyphicon-flash:before {
    content: "\e162";
}

.glyphicon-log-out:before {
    content: "\e163";
}

.glyphicon-new-window:before {
    content: "\e164";
}

.glyphicon-record:before {
    content: "\e165";
}

.glyphicon-save:before {
    content: "\e166";
}

.glyphicon-open:before {
    content: "\e167";
}

.glyphicon-saved:before {
    content: "\e168";
}

.glyphicon-import:before {
    content: "\e169";
}

.glyphicon-export:before {
    content: "\e170";
}

.glyphicon-send:before {
    content: "\e171";
}

.glyphicon-floppy-disk:before {
    content: "\e172";
}

.glyphicon-floppy-saved:before {
    content: "\e173";
}

.glyphicon-floppy-remove:before {
    content: "\e174";
}

.glyphicon-floppy-save:before {
    content: "\e175";
}

.glyphicon-floppy-open:before {
    content: "\e176";
}

.glyphicon-credit-card:before {
    content: "\e177";
}

.glyphicon-transfer:before {
    content: "\e178";
}

.glyphicon-cutlery:before {
    content: "\e179";
}

.glyphicon-header:before {
    content: "\e180";
}

.glyphicon-compressed:before {
    content: "\e181";
}

.glyphicon-earphone:before {
    content: "\e182";
}

.glyphicon-phone-alt:before {
    content: "\e183";
}

.glyphicon-tower:before {
    content: "\e184";
}

.glyphicon-stats:before {
    content: "\e185";
}

.glyphicon-sd-video:before {
    content: "\e186";
}

.glyphicon-hd-video:before {
    content: "\e187";
}

.glyphicon-subtitles:before {
    content: "\e188";
}

.glyphicon-sound-stereo:before {
    content: "\e189";
}

.glyphicon-sound-dolby:before {
    content: "\e190";
}

.glyphicon-sound-5-1:before {
    content: "\e191";
}

.glyphicon-sound-6-1:before {
    content: "\e192";
}

.glyphicon-sound-7-1:before {
    content: "\e193";
}

.glyphicon-copyright-mark:before {
    content: "\e194";
}

.glyphicon-registration-mark:before {
    content: "\e195";
}

.glyphicon-cloud-download:before {
    content: "\e197";
}

.glyphicon-cloud-upload:before {
    content: "\e198";
}

.glyphicon-tree-conifer:before {
    content: "\e199";
}

.glyphicon-tree-deciduous:before {
    content: "\e200";
}

* {
    -webkit-box-sizing: border-box;
    -moz-box-sizing: border-box;
    box-sizing: border-box;
}

    *:before,
    *:after {
        -webkit-box-sizing: border-box;
        -moz-box-sizing: border-box;
        box-sizing: border-box;
    }

html {
    font-size: 10px;
    -webkit-tap-highlight-color: rgba(0, 0, 0, 0);
}

body {
    font-family:"Nunito", "Helvetica Neue", Helvetica, Arial, sans-serif;
    font-size: 14px;
    line-height: 1.42857143;
    color: #333;
    background-color: #fff;
}

input,
button,
select,
textarea {
    font-family: inherit;
    font-size: inherit;
    line-height: inherit;
}

a {
    color: #3f51b5;
    color: var(--primary);
    text-decoration: none;
}

    a:hover,
    a:focus {
        color: #2a6496;
        text-decoration: underline;
    }

    a:focus {
        outline: thin dotted;
        outline: 5px auto -webkit-focus-ring-color;
        outline-offset: -2px;
    }

figure {
    margin: 0;
}

img {
    vertical-align: middle;
}

.img-responsive,
.thumbnail > img,
.thumbnail a > img,
.carousel-inner > .item > img,
.carousel-inner > .item > a > img {
    display: block;
    width: 100% \9;
    max-width: 100%;
    height: auto;
}

.img-rounded {
    border-radius: 6px;
}

.img-thumbnail {
    display: inline-block;
    width: 100% \9;
    max-width: 100%;
    height: auto;
    padding: 4px;
    line-height: 1.42857143;
    background-color: #fff;
    border: 1px solid #ddd;
    border-radius: 4px;
    -webkit-transition: all .2s ease-in-out;
    -o-transition: all .2s ease-in-out;
    transition: all .2s ease-in-out;
}

.img-circle {
    border-radius: 50%;
}

hr {
    margin-top: 20px;
    margin-bottom: 20px;
    border: 0;
    border-top: 1px solid #eee;
}

.sr-only {
    position: absolute;
    width: 1px;
    height: 1px;
    padding: 0;
    margin: -1px;
    overflow: hidden;
    clip: rect(0, 0, 0, 0);
    border: 0;
}

.sr-only-focusable:active,
.sr-only-focusable:focus {
    position: static;
    width: auto;
    height: auto;
    margin: 0;
    overflow: visible;
    clip: auto;
}

h1,
h2,
h3,
h4,
h5,
h6,
.h1,
.h2,
.h3,
.h4,
.h5,
.h6 {
    font-family: inherit;
    font-weight: 500;
    line-height: 1.1;
    color: inherit;
}

    h1 small,
    h2 small,
    h3 small,
    h4 small,
    h5 small,
    h6 small,
    .h1 small,
    .h2 small,
    .h3 small,
    .h4 small,
    .h5 small,
    .h6 small,
    h1 .small,
    h2 .small,
    h3 .small,
    h4 .small,
    h5 .small,
    h6 .small,
    .h1 .small,
    .h2 .small,
    .h3 .small,
    .h4 .small,
    .h5 .small,
    .h6 .small {
        font-weight: normal;
        line-height: 1;
        color: #777;
    }

h1,
.h1,
h2,
.h2,
h3,
.h3 {
    margin-top: 20px;
    margin-bottom: 10px;
}

    h1 small,
    .h1 small,
    h2 small,
    .h2 small,
    h3 small,
    .h3 small,
    h1 .small,
    .h1 .small,
    h2 .small,
    .h2 .small,
    h3 .small,
    .h3 .small {
        font-size: 65%;
    }

h4,
.h4,
h5,
.h5,
h6,
.h6 {
    margin-top: 10px;
    margin-bottom: 10px;
}

    h4 small,
    .h4 small,
    h5 small,
    .h5 small,
    h6 small,
    .h6 small,
    h4 .small,
    .h4 .small,
    h5 .small,
    .h5 .small,
    h6 .small,
    .h6 .small {
        font-size: 75%;
    }

h1,
.h1 {
    font-size: 36px;
}

h2,
.h2 {
    font-size: 30px;
}

h3,
.h3 {
    font-size: 24px;
}

h4,
.h4 {
    font-size: 18px;
}

h5,
.h5 {
    font-size: 14px;
}

h6,
.h6 {
    font-size: 12px;
}

p {
    margin: 0 0 10px;
}

.lead {
    margin-bottom: 20px;
    font-size: 16px;
    font-weight: 300;
    line-height: 1.4;
}

@media (min-width: 768px) {
    .lead {
        font-size: 21px;
    }
}

small,
.small {
    font-size: 85%;
}

cite {
    font-style: normal;
}

mark,
.mark {
    padding: .2em;
    background-color: #fcf8e3;
}

.text-left {
    text-align: left;
}

.text-right {
    text-align: right;
}

.text-center {
    text-align: center;
}

.text-justify {
    text-align: justify;
}

.text-nowrap {
    white-space: nowrap;
}

.text-lowercase {
    text-transform: lowercase;
}

.text-uppercase {
    text-transform: uppercase;
}

.text-capitalize {
    text-transform: capitalize;
}

.text-muted {
    color: #777;
}

.text-primary {
    color: #3f51b5;
    color: var(--primary);
}

a.text-primary:hover {
    color: #303F9F;
    color: var(--primary-hover);
}

.text-success {
    color: #3c763d;
}

a.text-success:hover {
    color: #2b542c;
}

.text-info {
    color: #31708f;
}

a.text-info:hover {
    color: #245269;
}

.text-warning {
    color: #8a6d3b;
}

a.text-warning:hover {
    color: #66512c;
}

.text-danger {
    color: #a94442;
}

a.text-danger:hover {
    color: #843534;
}

.bg-primary {
    color: #fff;
    background-color: #3f51b5;
    background-color: var(--primary);
}

a.bg-primary:hover {
    background-color: #303F9F;
    background-color: var(--primary-hover);
}

.bg-success {
    background-color: #dff0d8;
}

a.bg-success:hover {
    background-color: #c1e2b3;
}

.bg-info {
    background-color: #d9edf7;
}

a.bg-info:hover {
    background-color: #afd9ee;
}

.bg-warning {
    background-color: #fcf8e3;
}

a.bg-warning:hover {
    background-color: #f7ecb5;
}

.bg-danger {
    background-color: #f2dede;
}

a.bg-danger:hover {
    background-color: #e4b9b9;
}

.page-header {
    padding-bottom: 9px;
    margin: 40px 0 20px;
    border-bottom: 1px solid #eee;
}

ul,
ol {
    margin-top: 0;
    margin-bottom: 10px;
}

    ul ul,
    ol ul,
    ul ol,
    ol ol {
        margin-bottom: 0;
    }

.list-unstyled {
    padding-left: 0;
    list-style: none;
}

.list-inline {
    padding-left: 0;
    margin-left: -5px;
    list-style: none;
}

    .list-inline > li {
        display: inline-block;
        padding-right: 5px;
        padding-left: 5px;
    }

dl {
    margin-top: 0;
    margin-bottom: 20px;
}

dt,
dd {
    line-height: 1.42857143;
}

dt {
    font-weight: bold;
}

dd {
    margin-left: 0;
}

@media (min-width: 768px) {
    .dl-horizontal dt {
        float: left;
        width: 160px;
        overflow: hidden;
        clear: left;
        text-align: right;
        text-overflow: ellipsis;
        white-space: nowrap;
    }

    .dl-horizontal dd {
        margin-left: 180px;
    }
}

abbr[title],
abbr[data-original-title] {
    cursor: help;
    border-bottom: 1px dotted #777;
}

.initialism {
    font-size: 90%;
    text-transform: uppercase;
}

blockquote {
    padding: 10px 20px;
    margin: 0 0 20px;
    font-size: 17.5px;
    border-left: 5px solid #eee;
}

    blockquote p:last-child,
    blockquote ul:last-child,
    blockquote ol:last-child {
        margin-bottom: 0;
    }

    blockquote footer,
    blockquote small,
    blockquote .small {
        display: block;
        font-size: 80%;
        line-height: 1.42857143;
        color: #777;
    }

        blockquote footer:before,
        blockquote small:before,
        blockquote .small:before {
            content: '\2014 \00A0';
        }

    .blockquote-reverse,
    blockquote.pull-right {
        padding-right: 15px;
        padding-left: 0;
        text-align: right;
        border-right: 5px solid #eee;
        border-left: 0;
    }

        .blockquote-reverse footer:before,
        blockquote.pull-right footer:before,
        .blockquote-reverse small:before,
        blockquote.pull-right small:before,
        .blockquote-reverse .small:before,
        blockquote.pull-right .small:before {
            content: '';
        }

        .blockquote-reverse footer:after,
        blockquote.pull-right footer:after,
        .blockquote-reverse small:after,
        blockquote.pull-right small:after,
        .blockquote-reverse .small:after,
        blockquote.pull-right .small:after {
            content: '\00A0 \2014';
        }

    blockquote:before,
    blockquote:after {
        content: "";
    }

address {
    margin-bottom: 20px;
    font-style: normal;
    line-height: 1.42857143;
}

code,
kbd,
pre,
samp {
    font-family: Menlo, Monaco, Consolas, "Courier New", monospace;
}

code {
    padding: 2px 4px;
    font-size: 90%;
    color: #c7254e;
    background-color: #f9f2f4;
    border-radius: 4px;
}

kbd {
    padding: 2px 4px;
    font-size: 90%;
    color: #fff;
    background-color: #333;
    border-radius: 3px;
    -webkit-box-shadow: inset 0 -1px 0 rgba(0, 0, 0, .25);
    box-shadow: inset 0 -1px 0 rgba(0, 0, 0, .25);
}

    kbd kbd {
        padding: 0;
        font-size: 100%;
        -webkit-box-shadow: none;
        box-shadow: none;
    }

pre {
    display: block;
    padding: 9.5px;
    margin: 0 0 10px;
    font-size: 13px;
    line-height: 1.42857143;
    color: #333;
    word-break: break-all;
    word-wrap: break-word;
    background-color: #f5f5f5;
    border: 1px solid #ccc;
    border-radius: 4px;
}

    pre code {
        padding: 0;
        font-size: inherit;
        color: inherit;
        white-space: pre-wrap;
        background-color: transparent;
        border-radius: 0;
    }

.pre-scrollable {
    max-height: 340px;
    overflow-y: scroll;
}

.container {
    padding-right: 15px;
    padding-left: 15px;
    margin-right: auto;
    margin-left: auto;
}

@media (min-width: 768px) {
    .container {
        width: 750px;
    }
}

@media (min-width: 992px) {
    .container {
        width: 970px;
    }
}

@media (min-width: 1200px) {
    .container {
        width: 1170px;
    }
}

.container-fluid {
    padding-right: 15px;
    padding-left: 15px;
    margin-right: auto;
    margin-left: auto;
}

.row {
    margin-right: -15px;
    margin-left: -15px;
}

.col-xs-1, .col-sm-1, .col-md-1, .col-lg-1, .col-xs-2, .col-sm-2, .col-md-2, .col-lg-2, .col-xs-3, .col-sm-3, .col-md-3, .col-lg-3, .col-xs-4, .col-sm-4, .col-md-4, .col-lg-4, .col-xs-5, .col-sm-5, .col-md-5, .col-lg-5, .col-xs-6, .col-sm-6, .col-md-6, .col-lg-6, .col-xs-7, .col-sm-7, .col-md-7, .col-lg-7, .col-xs-8, .col-sm-8, .col-md-8, .col-lg-8, .col-xs-9, .col-sm-9, .col-md-9, .col-lg-9, .col-xs-10, .col-sm-10, .col-md-10, .col-lg-10, .col-xs-11, .col-sm-11, .col-md-11, .col-lg-11, .col-xs-12, .col-sm-12, .col-md-12, .col-lg-12 {
    position: relative;
    min-height: 1px;
    padding-right: 15px;
    padding-left: 15px;
}

.col-xs-1, .col-xs-2, .col-xs-3, .col-xs-4, .col-xs-5, .col-xs-6, .col-xs-7, .col-xs-8, .col-xs-9, .col-xs-10, .col-xs-11, .col-xs-12 {
    float: left;
}

.col-xs-12 {
    width: 100%;
}

.col-xs-11 {
    width: 91.66666667%;
}

.col-xs-10 {
    width: 83.33333333%;
}

.col-xs-9 {
    width: 75%;
}

.col-xs-8 {
    width: 66.66666667%;
}

.col-xs-7 {
    width: 58.33333333%;
}

.col-xs-6 {
    width: 50%;
}

.col-xs-5 {
    width: 41.66666667%;
}

.col-xs-4 {
    width: 33.33333333%;
}

.col-xs-3 {
    width: 25%;
}

.col-xs-2 {
    width: 16.66666667%;
}

.col-xs-1 {
    width: 8.33333333%;
}

.col-xs-pull-12 {
    right: 100%;
}

.col-xs-pull-11 {
    right: 91.66666667%;
}

.col-xs-pull-10 {
    right: 83.33333333%;
}

.col-xs-pull-9 {
    right: 75%;
}

.col-xs-pull-8 {
    right: 66.66666667%;
}

.col-xs-pull-7 {
    right: 58.33333333%;
}

.col-xs-pull-6 {
    right: 50%;
}

.col-xs-pull-5 {
    right: 41.66666667%;
}

.col-xs-pull-4 {
    right: 33.33333333%;
}

.col-xs-pull-3 {
    right: 25%;
}

.col-xs-pull-2 {
    right: 16.66666667%;
}

.col-xs-pull-1 {
    right: 8.33333333%;
}

.col-xs-pull-0 {
    right: auto;
}

.col-xs-push-12 {
    left: 100%;
}

.col-xs-push-11 {
    left: 91.66666667%;
}

.col-xs-push-10 {
    left: 83.33333333%;
}

.col-xs-push-9 {
    left: 75%;
}

.col-xs-push-8 {
    left: 66.66666667%;
}

.col-xs-push-7 {
    left: 58.33333333%;
}

.col-xs-push-6 {
    left: 50%;
}

.col-xs-push-5 {
    left: 41.66666667%;
}

.col-xs-push-4 {
    left: 33.33333333%;
}

.col-xs-push-3 {
    left: 25%;
}

.col-xs-push-2 {
    left: 16.66666667%;
}

.col-xs-push-1 {
    left: 8.33333333%;
}

.col-xs-push-0 {
    left: auto;
}

.col-xs-offset-12 {
    margin-left: 100%;
}

.col-xs-offset-11 {
    margin-left: 91.66666667%;
}

.col-xs-offset-10 {
    margin-left: 83.33333333%;
}

.col-xs-offset-9 {
    margin-left: 75%;
}

.col-xs-offset-8 {
    margin-left: 66.66666667%;
}

.col-xs-offset-7 {
    margin-left: 58.33333333%;
}

.col-xs-offset-6 {
    margin-left: 50%;
}

.col-xs-offset-5 {
    margin-left: 41.66666667%;
}

.col-xs-offset-4 {
    margin-left: 33.33333333%;
}

.col-xs-offset-3 {
    margin-left: 25%;
}

.col-xs-offset-2 {
    margin-left: 16.66666667%;
}

.col-xs-offset-1 {
    margin-left: 8.33333333%;
}

.col-xs-offset-0 {
    margin-left: 0;
}

@media (min-width: 768px) {
    .col-sm-1, .col-sm-2, .col-sm-3, .col-sm-4, .col-sm-5, .col-sm-6, .col-sm-7, .col-sm-8, .col-sm-9, .col-sm-10, .col-sm-11, .col-sm-12 {
        float: left;
    }

    .col-sm-12 {
        width: 100%;
    }

    .col-sm-11 {
        width: 91.66666667%;
    }

    .col-sm-10 {
        width: 83.33333333%;
    }

    .col-sm-9 {
        width: 75%;
    }

    .col-sm-8 {
        width: 66.66666667%;
    }

    .col-sm-7 {
        width: 58.33333333%;
    }

    .col-sm-6 {
        width: 50%;
    }

    .col-sm-5 {
        width: 41.66666667%;
    }

    .col-sm-4 {
        width: 33.33333333%;
    }

    .col-sm-3 {
        width: 25%;
    }

    .col-sm-2 {
        width: 16.66666667%;
    }

    .col-sm-1 {
        width: 8.33333333%;
    }

    .col-sm-pull-12 {
        right: 100%;
    }

    .col-sm-pull-11 {
        right: 91.66666667%;
    }

    .col-sm-pull-10 {
        right: 83.33333333%;
    }

    .col-sm-pull-9 {
        right: 75%;
    }

    .col-sm-pull-8 {
        right: 66.66666667%;
    }

    .col-sm-pull-7 {
        right: 58.33333333%;
    }

    .col-sm-pull-6 {
        right: 50%;
    }

    .col-sm-pull-5 {
        right: 41.66666667%;
    }

    .col-sm-pull-4 {
        right: 33.33333333%;
    }

    .col-sm-pull-3 {
        right: 25%;
    }

    .col-sm-pull-2 {
        right: 16.66666667%;
    }

    .col-sm-pull-1 {
        right: 8.33333333%;
    }

    .col-sm-pull-0 {
        right: auto;
    }

    .col-sm-push-12 {
        left: 100%;
    }

    .col-sm-push-11 {
        left: 91.66666667%;
    }

    .col-sm-push-10 {
        left: 83.33333333%;
    }

    .col-sm-push-9 {
        left: 75%;
    }

    .col-sm-push-8 {
        left: 66.66666667%;
    }

    .col-sm-push-7 {
        left: 58.33333333%;
    }

    .col-sm-push-6 {
        left: 50%;
    }

    .col-sm-push-5 {
        left: 41.66666667%;
    }

    .col-sm-push-4 {
        left: 33.33333333%;
    }

    .col-sm-push-3 {
        left: 25%;
    }

    .col-sm-push-2 {
        left: 16.66666667%;
    }

    .col-sm-push-1 {
        left: 8.33333333%;
    }

    .col-sm-push-0 {
        left: auto;
    }

    .col-sm-offset-12 {
        margin-left: 100%;
    }

    .col-sm-offset-11 {
        margin-left: 91.66666667%;
    }

    .col-sm-offset-10 {
        margin-left: 83.33333333%;
    }

    .col-sm-offset-9 {
        margin-left: 75%;
    }

    .col-sm-offset-8 {
        margin-left: 66.66666667%;
    }

    .col-sm-offset-7 {
        margin-left: 58.33333333%;
    }

    .col-sm-offset-6 {
        margin-left: 50%;
    }

    .col-sm-offset-5 {
        margin-left: 41.66666667%;
    }

    .col-sm-offset-4 {
        margin-left: 33.33333333%;
    }

    .col-sm-offset-3 {
        margin-left: 25%;
    }

    .col-sm-offset-2 {
        margin-left: 16.66666667%;
    }

    .col-sm-offset-1 {
        margin-left: 8.33333333%;
    }

    .col-sm-offset-0 {
        margin-left: 0;
    }
}

@media (min-width: 992px) {
    .col-md-1, .col-md-2, .col-md-3, .col-md-4, .col-md-5, .col-md-6, .col-md-7, .col-md-8, .col-md-9, .col-md-10, .col-md-11, .col-md-12 {
        float: left;
    }

    .col-md-12 {
        width: 100%;
    }

    .col-md-11 {
        width: 91.66666667%;
    }

    .col-md-10 {
        width: 83.33333333%;
    }

    .col-md-9 {
        width: 75%;
    }

    .col-md-8 {
        width: 66.66666667%;
    }

    .col-md-7 {
        width: 58.33333333%;
    }

    .col-md-6 {
        width: 50%;
    }

    .col-md-5 {
        width: 41.66666667%;
    }

    .col-md-4 {
        width: 33.33333333%;
    }

    .col-md-3 {
        width: 25%;
    }

    .col-md-2 {
        width: 16.66666667%;
    }

    .col-md-1 {
        width: 8.33333333%;
    }

    .col-md-pull-12 {
        right: 100%;
    }

    .col-md-pull-11 {
        right: 91.66666667%;
    }

    .col-md-pull-10 {
        right: 83.33333333%;
    }

    .col-md-pull-9 {
        right: 75%;
    }

    .col-md-pull-8 {
        right: 66.66666667%;
    }

    .col-md-pull-7 {
        right: 58.33333333%;
    }

    .col-md-pull-6 {
        right: 50%;
    }

    .col-md-pull-5 {
        right: 41.66666667%;
    }

    .col-md-pull-4 {
        right: 33.33333333%;
    }

    .col-md-pull-3 {
        right: 25%;
    }

    .col-md-pull-2 {
        right: 16.66666667%;
    }

    .col-md-pull-1 {
        right: 8.33333333%;
    }

    .col-md-pull-0 {
        right: auto;
    }

    .col-md-push-12 {
        left: 100%;
    }

    .col-md-push-11 {
        left: 91.66666667%;
    }

    .col-md-push-10 {
        left: 83.33333333%;
    }

    .col-md-push-9 {
        left: 75%;
    }

    .col-md-push-8 {
        left: 66.66666667%;
    }

    .col-md-push-7 {
        left: 58.33333333%;
    }

    .col-md-push-6 {
        left: 50%;
    }

    .col-md-push-5 {
        left: 41.66666667%;
    }

    .col-md-push-4 {
        left: 33.33333333%;
    }

    .col-md-push-3 {
        left: 25%;
    }

    .col-md-push-2 {
        left: 16.66666667%;
    }

    .col-md-push-1 {
        left: 8.33333333%;
    }

    .col-md-push-0 {
        left: auto;
    }

    .col-md-offset-12 {
        margin-left: 100%;
    }

    .col-md-offset-11 {
        margin-left: 91.66666667%;
    }

    .col-md-offset-10 {
        margin-left: 83.33333333%;
    }

    .col-md-offset-9 {
        margin-left: 75%;
    }

    .col-md-offset-8 {
        margin-left: 66.66666667%;
    }

    .col-md-offset-7 {
        margin-left: 58.33333333%;
    }

    .col-md-offset-6 {
        margin-left: 50%;
    }

    .col-md-offset-5 {
        margin-left: 41.66666667%;
    }

    .col-md-offset-4 {
        margin-left: 33.33333333%;
    }

    .col-md-offset-3 {
        margin-left: 25%;
    }

    .col-md-offset-2 {
        margin-left: 16.66666667%;
    }

    .col-md-offset-1 {
        margin-left: 8.33333333%;
    }

    .col-md-offset-0 {
        margin-left: 0;
    }
}

@media (min-width: 1200px) {
    .col-lg-1, .col-lg-2, .col-lg-3, .col-lg-4, .col-lg-5, .col-lg-6, .col-lg-7, .col-lg-8, .col-lg-9, .col-lg-10, .col-lg-11, .col-lg-12 {
        float: left;
    }

    .col-lg-12 {
        width: 100%;
    }

    .col-lg-11 {
        width: 91.66666667%;
    }

    .col-lg-10 {
        width: 83.33333333%;
    }

    .col-lg-9 {
        width: 75%;
    }

    .col-lg-8 {
        width: 66.66666667%;
    }

    .col-lg-7 {
        width: 58.33333333%;
    }

    .col-lg-6 {
        width: 50%;
    }

    .col-lg-5 {
        width: 41.66666667%;
    }

    .col-lg-4 {
        width: 33.33333333%;
    }

    .col-lg-3 {
        width: 25%;
    }

    .col-lg-2 {
        width: 16.66666667%;
    }

    .col-lg-1 {
        width: 8.33333333%;
    }

    .col-lg-pull-12 {
        right: 100%;
    }

    .col-lg-pull-11 {
        right: 91.66666667%;
    }

    .col-lg-pull-10 {
        right: 83.33333333%;
    }

    .col-lg-pull-9 {
        right: 75%;
    }

    .col-lg-pull-8 {
        right: 66.66666667%;
    }

    .col-lg-pull-7 {
        right: 58.33333333%;
    }

    .col-lg-pull-6 {
        right: 50%;
    }

    .col-lg-pull-5 {
        right: 41.66666667%;
    }

    .col-lg-pull-4 {
        right: 33.33333333%;
    }

    .col-lg-pull-3 {
        right: 25%;
    }

    .col-lg-pull-2 {
        right: 16.66666667%;
    }

    .col-lg-pull-1 {
        right: 8.33333333%;
    }

    .col-lg-pull-0 {
        right: auto;
    }

    .col-lg-push-12 {
        left: 100%;
    }

    .col-lg-push-11 {
        left: 91.66666667%;
    }

    .col-lg-push-10 {
        left: 83.33333333%;
    }

    .col-lg-push-9 {
        left: 75%;
    }

    .col-lg-push-8 {
        left: 66.66666667%;
    }

    .col-lg-push-7 {
        left: 58.33333333%;
    }

    .col-lg-push-6 {
        left: 50%;
    }

    .col-lg-push-5 {
        left: 41.66666667%;
    }

    .col-lg-push-4 {
        left: 33.33333333%;
    }

    .col-lg-push-3 {
        left: 25%;
    }

    .col-lg-push-2 {
        left: 16.66666667%;
    }

    .col-lg-push-1 {
        left: 8.33333333%;
    }

    .col-lg-push-0 {
        left: auto;
    }

    .col-lg-offset-12 {
        margin-left: 100%;
    }

    .col-lg-offset-11 {
        margin-left: 91.66666667%;
    }

    .col-lg-offset-10 {
        margin-left: 83.33333333%;
    }

    .col-lg-offset-9 {
        margin-left: 75%;
    }

    .col-lg-offset-8 {
        margin-left: 66.66666667%;
    }

    .col-lg-offset-7 {
        margin-left: 58.33333333%;
    }

    .col-lg-offset-6 {
        margin-left: 50%;
    }

    .col-lg-offset-5 {
        margin-left: 41.66666667%;
    }

    .col-lg-offset-4 {
        margin-left: 33.33333333%;
    }

    .col-lg-offset-3 {
        margin-left: 25%;
    }

    .col-lg-offset-2 {
        margin-left: 16.66666667%;
    }

    .col-lg-offset-1 {
        margin-left: 8.33333333%;
    }

    .col-lg-offset-0 {
        margin-left: 0;
    }
}

table {
    background-color: transparent;
}

th {
    text-align: left;
}

.table {
    width: 100%;
    max-width: 100%;
    margin-bottom: 20px;
}

    .table > thead > tr > th,
    .table > tbody > tr > th,
    .table > tfoot > tr > th,
    .table > thead > tr > td,
    .table > tbody > tr > td,
    .table > tfoot > tr > td {
        padding: 8px;
        line-height: 1.42857143;
        vertical-align: top;
        border-top: 1px solid #ddd;
    }

    .table > thead > tr > th {
        vertical-align: bottom;
        border-bottom: 2px solid #ddd;
    }

    .table > caption + thead > tr:first-child > th,
    .table > colgroup + thead > tr:first-child > th,
    .table > thead:first-child > tr:first-child > th,
    .table > caption + thead > tr:first-child > td,
    .table > colgroup + thead > tr:first-child > td,
    .table > thead:first-child > tr:first-child > td {
        border-top: 0;
    }

    .table > tbody + tbody {
        border-top: 2px solid #ddd;
    }

    .table .table {
        background-color: #fff;
    }

.table-condensed > thead > tr > th,
.table-condensed > tbody > tr > th,
.table-condensed > tfoot > tr > th,
.table-condensed > thead > tr > td,
.table-condensed > tbody > tr > td,
.table-condensed > tfoot > tr > td {
    padding: 5px;
}

.table-bordered {
    border: 1px solid #ddd;
}

    .table-bordered > thead > tr > th,
    .table-bordered > tbody > tr > th,
    .table-bordered > tfoot > tr > th,
    .table-bordered > thead > tr > td,
    .table-bordered > tbody > tr > td,
    .table-bordered > tfoot > tr > td {
        border: 1px solid #ddd;
    }

    .table-bordered > thead > tr > th,
    .table-bordered > thead > tr > td {
        border-bottom-width: 2px;
    }

.table-striped > tbody > tr:nth-child(odd) > td,
.table-striped > tbody > tr:nth-child(odd) > th {
    background-color: #f9f9f9;
}

.table-hover > tbody > tr:hover > td,
.table-hover > tbody > tr:hover > th {
    background-color: #f5f5f5;
}

table col[class*="col-"] {
    position: static;
    display: table-column;
    float: none;
}

table td[class*="col-"],
table th[class*="col-"] {
    position: static;
    display: table-cell;
    float: none;
}

.table > thead > tr > td.active,
.table > tbody > tr > td.active,
.table > tfoot > tr > td.active,
.table > thead > tr > th.active,
.table > tbody > tr > th.active,
.table > tfoot > tr > th.active,
.table > thead > tr.active > td,
.table > tbody > tr.active > td,
.table > tfoot > tr.active > td,
.table > thead > tr.active > th,
.table > tbody > tr.active > th,
.table > tfoot > tr.active > th {
    background-color: #f5f5f5;
}

.table-hover > tbody > tr > td.active:hover,
.table-hover > tbody > tr > th.active:hover,
.table-hover > tbody > tr.active:hover > td,
.table-hover > tbody > tr:hover > .active,
.table-hover > tbody > tr.active:hover > th {
    background-color: #e8e8e8;
}

.table > thead > tr > td.success,
.table > tbody > tr > td.success,
.table > tfoot > tr > td.success,
.table > thead > tr > th.success,
.table > tbody > tr > th.success,
.table > tfoot > tr > th.success,
.table > thead > tr.success > td,
.table > tbody > tr.success > td,
.table > tfoot > tr.success > td,
.table > thead > tr.success > th,
.table > tbody > tr.success > th,
.table > tfoot > tr.success > th {
    background-color: #dff0d8;
}

.table-hover > tbody > tr > td.success:hover,
.table-hover > tbody > tr > th.success:hover,
.table-hover > tbody > tr.success:hover > td,
.table-hover > tbody > tr:hover > .success,
.table-hover > tbody > tr.success:hover > th {
    background-color: #d0e9c6;
}

.table > thead > tr > td.info,
.table > tbody > tr > td.info,
.table > tfoot > tr > td.info,
.table > thead > tr > th.info,
.table > tbody > tr > th.info,
.table > tfoot > tr > th.info,
.table > thead > tr.info > td,
.table > tbody > tr.info > td,
.table > tfoot > tr.info > td,
.table > thead > tr.info > th,
.table > tbody > tr.info > th,
.table > tfoot > tr.info > th {
    background-color: #d9edf7;
}

.table-hover > tbody > tr > td.info:hover,
.table-hover > tbody > tr > th.info:hover,
.table-hover > tbody > tr.info:hover > td,
.table-hover > tbody > tr:hover > .info,
.table-hover > tbody > tr.info:hover > th {
    background-color: #c4e3f3;
}

.table > thead > tr > td.warning,
.table > tbody > tr > td.warning,
.table > tfoot > tr > td.warning,
.table > thead > tr > th.warning,
.table > tbody > tr > th.warning,
.table > tfoot > tr > th.warning,
.table > thead > tr.warning > td,
.table > tbody > tr.warning > td,
.table > tfoot > tr.warning > td,
.table > thead > tr.warning > th,
.table > tbody > tr.warning > th,
.table > tfoot > tr.warning > th {
    background-color: #fcf8e3;
}

.table-hover > tbody > tr > td.warning:hover,
.table-hover > tbody > tr > th.warning:hover,
.table-hover > tbody > tr.warning:hover > td,
.table-hover > tbody > tr:hover > .warning,
.table-hover > tbody > tr.warning:hover > th {
    background-color: #faf2cc;
}

.table > thead > tr > td.danger,
.table > tbody > tr > td.danger,
.table > tfoot > tr > td.danger,
.table > thead > tr > th.danger,
.table > tbody > tr > th.danger,
.table > tfoot > tr > th.danger,
.table > thead > tr.danger > td,
.table > tbody > tr.danger > td,
.table > tfoot > tr.danger > td,
.table > thead > tr.danger > th,
.table > tbody > tr.danger > th,
.table > tfoot > tr.danger > th {
    background-color: #f2dede;
}

.table-hover > tbody > tr > td.danger:hover,
.table-hover > tbody > tr > th.danger:hover,
.table-hover > tbody > tr.danger:hover > td,
.table-hover > tbody > tr:hover > .danger,
.table-hover > tbody > tr.danger:hover > th {
    background-color: #ebcccc;
}

@media screen and (max-width: 767px) {
    .table-responsive {
        width: 100%;
        margin-bottom: 15px;
        overflow-x: auto;
        overflow-y: hidden;
        -webkit-overflow-scrolling: touch;
        -ms-overflow-style: -ms-autohiding-scrollbar;
        border: 1px solid #ddd;
    }

        .table-responsive > .table {
            margin-bottom: 0;
        }

            .table-responsive > .table > thead > tr > th,
            .table-responsive > .table > tbody > tr > th,
            .table-responsive > .table > tfoot > tr > th,
            .table-responsive > .table > thead > tr > td,
            .table-responsive > .table > tbody > tr > td,
            .table-responsive > .table > tfoot > tr > td {
                white-space: nowrap;
            }

        .table-responsive > .table-bordered {
            border: 0;
        }

            .table-responsive > .table-bordered > thead > tr > th:first-child,
            .table-responsive > .table-bordered > tbody > tr > th:first-child,
            .table-responsive > .table-bordered > tfoot > tr > th:first-child,
            .table-responsive > .table-bordered > thead > tr > td:first-child,
            .table-responsive > .table-bordered > tbody > tr > td:first-child,
            .table-responsive > .table-bordered > tfoot > tr > td:first-child {
                border-left: 0;
            }

            .table-responsive > .table-bordered > thead > tr > th:last-child,
            .table-responsive > .table-bordered > tbody > tr > th:last-child,
            .table-responsive > .table-bordered > tfoot > tr > th:last-child,
            .table-responsive > .table-bordered > thead > tr > td:last-child,
            .table-responsive > .table-bordered > tbody > tr > td:last-child,
            .table-responsive > .table-bordered > tfoot > tr > td:last-child {
                border-right: 0;
            }

            .table-responsive > .table-bordered > tbody > tr:last-child > th,
            .table-responsive > .table-bordered > tfoot > tr:last-child > th,
            .table-responsive > .table-bordered > tbody > tr:last-child > td,
            .table-responsive > .table-bordered > tfoot > tr:last-child > td {
                border-bottom: 0;
            }
}

fieldset {
    min-width: 0;
    padding: 0;
    margin: 0;
    border: 0;
}

legend {
    display: block;
    width: 100%;
    padding: 0;
    margin-bottom: 20px;
    font-size: 21px;
    line-height: inherit;
    color: #333;
    border: 0;
    border-bottom: 1px solid #e5e5e5;
}

label {
    display: inline-block;
    max-width: 100%;
    margin-bottom: 5px;
    font-weight: bold;
}

input[type="search"] {
    -webkit-box-sizing: border-box;
    -moz-box-sizing: border-box;
    box-sizing: border-box;
}

input[type="radio"],
input[type="checkbox"] {
    margin: 4px 0 0;
    margin-top: 1px \9;
    line-height: normal;
}

input[type="file"] {
    display: block;
}

input[type="range"] {
    display: block;
    width: 100%;
}

select[multiple],
select[size] {
    height: auto;
}

input[type="file"]:focus,
input[type="radio"]:focus,
input[type="checkbox"]:focus {
    outline: thin dotted;
    outline: 5px auto -webkit-focus-ring-color;
    outline-offset: -2px;
}

output {
    display: block;
    padding-top: 7px;
    font-size: 14px;
    line-height: 1.42857143;
    color: #555;
}

.form-control {
    display: block;
    width: 100%;
    height: 34px;
    padding: 6px 12px;
    font-size: 14px;
    line-height: 1.42857143;
    color: #555;
    background-color: #fff;
    background-image: none;
    border: 1px solid #ccc;
    border-radius: 4px;
    -webkit-box-shadow: inset 0 1px 1px rgba(0, 0, 0, .075);
    box-shadow: inset 0 1px 1px rgba(0, 0, 0, .075);
    -webkit-transition: border-color ease-in-out .15s, -webkit-box-shadow ease-in-out .15s;
    -o-transition: border-color ease-in-out .15s, box-shadow ease-in-out .15s;
    transition: border-color ease-in-out .15s, box-shadow ease-in-out .15s;
}

    .form-control:focus {
        border-color: #66afe9;
        outline: 0;
        -webkit-box-shadow: inset 0 1px 1px rgba(0,0,0,.075), 0 0 8px rgba(102, 175, 233, .6);
        box-shadow: inset 0 1px 1px rgba(0,0,0,.075), 0 0 8px rgba(102, 175, 233, .6);
    }

    .form-control::-moz-placeholder {
        color: #777;
        opacity: 1;
    }

    .form-control:-ms-input-placeholder {
        color: #777;
    }

    .form-control::-webkit-input-placeholder {
        color: #777;
    }

    .form-control[disabled],
    .form-control[readonly],
    fieldset[disabled] .form-control {
        cursor: not-allowed;
        background-color: #eee;
        opacity: 1;
    }

textarea.form-control {
    height: auto;
}

input[type="search"] {
    -webkit-appearance: none;
}

input[type="date"],
input[type="time"],
input[type="datetime-local"],
input[type="month"] {
    line-height: 34px;
    line-height: 1.42857143 \0;
}

    input[type="date"].input-sm,
    input[type="time"].input-sm,
    input[type="datetime-local"].input-sm,
    input[type="month"].input-sm {
        line-height: 30px;
    }

    input[type="date"].input-lg,
    input[type="time"].input-lg,
    input[type="datetime-local"].input-lg,
    input[type="month"].input-lg {
        line-height: 46px;
    }

.form-group {
    margin-bottom: 15px;
}

.radio,
.checkbox {
    position: relative;
    display: block;
    min-height: 20px;
    margin-top: 10px;
    margin-bottom: 10px;
}

    .radio label,
    .checkbox label {
        padding-left: 20px;
        margin-bottom: 0;
        font-weight: normal;
        cursor: pointer;
    }

    .radio input[type="radio"],
    .radio-inline input[type="radio"],
    .checkbox input[type="checkbox"],
    .checkbox-inline input[type="checkbox"] {
        position: absolute;
        margin-top: 4px \9;
        margin-left: -20px;
    }

    .radio + .radio,
    .checkbox + .checkbox {
        margin-top: -5px;
    }

.radio-inline,
.checkbox-inline {
    display: inline-block;
    padding-left: 20px;
    margin-bottom: 0;
    font-weight: normal;
    vertical-align: middle;
    cursor: pointer;
}

    .radio-inline + .radio-inline,
    .checkbox-inline + .checkbox-inline {
        margin-top: 0;
        margin-left: 10px;
    }

input[type="radio"][disabled],
input[type="checkbox"][disabled],
input[type="radio"].disabled,
input[type="checkbox"].disabled,
fieldset[disabled] input[type="radio"],
fieldset[disabled] input[type="checkbox"] {
    cursor: not-allowed;
}

.radio-inline.disabled,
.checkbox-inline.disabled,
fieldset[disabled] .radio-inline,
fieldset[disabled] .checkbox-inline {
    cursor: not-allowed;
}

.radio.disabled label,
.checkbox.disabled label,
fieldset[disabled] .radio label,
fieldset[disabled] .checkbox label {
    cursor: not-allowed;
}

.form-control-static {
    padding-top: 7px;
    padding-bottom: 7px;
    margin-bottom: 0;
}

    .form-control-static.input-lg,
    .form-control-static.input-sm {
        padding-right: 0;
        padding-left: 0;
    }

.input-sm,
.form-horizontal .form-group-sm .form-control {
    height: 30px;
    padding: 5px 10px;
    font-size: 12px;
    line-height: 1.5;
    border-radius: 3px;
}

select.input-sm {
    height: 30px;
    line-height: 30px;
}

textarea.input-sm,
select[multiple].input-sm {
    height: auto;
}

.input-lg,
.form-horizontal .form-group-lg .form-control {
    height: 46px;
    padding: 10px 16px;
    font-size: 18px;
    line-height: 1.33;
    border-radius: 6px;
}

select.input-lg {
    height: 46px;
    line-height: 46px;
}

textarea.input-lg,
select[multiple].input-lg {
    height: auto;
}

.has-feedback {
    position: relative;
}

    .has-feedback .form-control {
        padding-right: 42.5px;
    }

.form-control-feedback {
    position: absolute;
    top: 25px;
    right: 0;
    z-index: 2;
    display: block;
    width: 34px;
    height: 34px;
    line-height: 34px;
    text-align: center;
}

.input-lg + .form-control-feedback {
    width: 46px;
    height: 46px;
    line-height: 46px;
}

.input-sm + .form-control-feedback {
    width: 30px;
    height: 30px;
    line-height: 30px;
}

.has-success .help-block,
.has-success .control-label,
.has-success .radio,
.has-success .checkbox,
.has-success .radio-inline,
.has-success .checkbox-inline {
    color: #3c763d;
}

.has-success .form-control {
    border-color: #3c763d;
    -webkit-box-shadow: inset 0 1px 1px rgba(0, 0, 0, .075);
    box-shadow: inset 0 1px 1px rgba(0, 0, 0, .075);
}

    .has-success .form-control:focus {
        border-color: #2b542c;
        -webkit-box-shadow: inset 0 1px 1px rgba(0, 0, 0, .075), 0 0 6px #67b168;
        box-shadow: inset 0 1px 1px rgba(0, 0, 0, .075), 0 0 6px #67b168;
    }

.has-success .input-group-addon {
    color: #3c763d;
    background-color: #dff0d8;
    border-color: #3c763d;
}

.has-success .form-control-feedback {
    color: #3c763d;
}

.has-warning .help-block,
.has-warning .control-label,
.has-warning .radio,
.has-warning .checkbox,
.has-warning .radio-inline,
.has-warning .checkbox-inline {
    color: #8a6d3b;
}

.has-warning .form-control {
    border-color: #8a6d3b;
    -webkit-box-shadow: inset 0 1px 1px rgba(0, 0, 0, .075);
    box-shadow: inset 0 1px 1px rgba(0, 0, 0, .075);
}

    .has-warning .form-control:focus {
        border-color: #66512c;
        -webkit-box-shadow: inset 0 1px 1px rgba(0, 0, 0, .075), 0 0 6px #c0a16b;
        box-shadow: inset 0 1px 1px rgba(0, 0, 0, .075), 0 0 6px #c0a16b;
    }

.has-warning .input-group-addon {
    color: #8a6d3b;
    background-color: #fcf8e3;
    border-color: #8a6d3b;
}

.has-warning .form-control-feedback {
    color: #8a6d3b;
}

.has-error .help-block,
.has-error .control-label,
.has-error .radio,
.has-error .checkbox,
.has-error .radio-inline,
.has-error .checkbox-inline {
    color: #a94442;
}

.has-error .form-control {
    border-color: #a94442;
    -webkit-box-shadow: inset 0 1px 1px rgba(0, 0, 0, .075);
    box-shadow: inset 0 1px 1px rgba(0, 0, 0, .075);
}

    .has-error .form-control:focus {
        border-color: #843534;
        -webkit-box-shadow: inset 0 1px 1px rgba(0, 0, 0, .075), 0 0 6px #ce8483;
        box-shadow: inset 0 1px 1px rgba(0, 0, 0, .075), 0 0 6px #ce8483;
    }

.has-error .input-group-addon {
    color: #a94442;
    background-color: #f2dede;
    border-color: #a94442;
}

.has-error .form-control-feedback {
    color: #a94442;
}

.has-feedback label.sr-only ~ .form-control-feedback {
    top: 0;
}

.help-block {
    display: block;
    margin-top: 5px;
    margin-bottom: 10px;
    color: #737373;
}

@media (min-width: 768px) {
    .form-inline .form-group {
        display: inline-block;
        margin-bottom: 0;
        vertical-align: middle;
    }

    .form-inline .form-control {
        display: inline-block;
        width: auto;
        vertical-align: middle;
    }

    .form-inline .input-group {
        display: inline-table;
        vertical-align: middle;
    }

        .form-inline .input-group .input-group-addon,
        .form-inline .input-group .input-group-btn,
        .form-inline .input-group .form-control {
            width: auto;
        }

        .form-inline .input-group > .form-control {
            width: 100%;
        }

    .form-inline .control-label {
        margin-bottom: 0;
        vertical-align: middle;
    }

    .form-inline .radio,
    .form-inline .checkbox {
        display: inline-block;
        margin-top: 0;
        margin-bottom: 0;
        vertical-align: middle;
    }

        .form-inline .radio label,
        .form-inline .checkbox label {
            padding-left: 0;
        }

        .form-inline .radio input[type="radio"],
        .form-inline .checkbox input[type="checkbox"] {
            position: relative;
            margin-left: 0;
        }

    .form-inline .has-feedback .form-control-feedback {
        top: 0;
    }
}

.form-horizontal .radio,
.form-horizontal .checkbox,
.form-horizontal .radio-inline,
.form-horizontal .checkbox-inline {
    padding-top: 7px;
    margin-top: 0;
    margin-bottom: 0;
}

.form-horizontal .radio,
.form-horizontal .checkbox {
    min-height: 27px;
}

.form-horizontal .form-group {
    margin-right: -15px;
    margin-left: -15px;
}

@media (min-width: 768px) {
    .form-horizontal .control-label {
        padding-top: 7px;
        margin-bottom: 0;
        text-align: right;
    }
}

.form-horizontal .has-feedback .form-control-feedback {
    top: 0;
    right: 15px;
}

@media (min-width: 768px) {
    .form-horizontal .form-group-lg .control-label {
        padding-top: 14.3px;
    }
}

@media (min-width: 768px) {
    .form-horizontal .form-group-sm .control-label {
        padding-top: 6px;
    }
}

.btn {
    display: inline-block;
    font-weight: 400;
    color: #212529;
    text-align: center;
    vertical-align: middle;
    user-select: none;
    background-color: transparent;
    border: 1px solid transparent;
    padding: 0.375rem 0.75rem;
    font-size: 1rem;
    line-height: 1.5;
    border-radius: 0.25rem;
}


.btn:hover {
    color: #212529;
    text-decoration: none;
}

.btn:focus, .btn.focus {
    outline: 0;
    box-shadow: 0 0 0 0.2rem rgba(97, 33, 112, 0.25);
}

.btn.disabled, .btn:disabled {
    opacity: 0.65;
}

a.btn.disabled,
fieldset:disabled a.btn {
    pointer-events: none;
}

.btn-primary {
    color: #fff;
    background-color: #3f51b5;
    background-color: var(--primary);
    border-color: #3f51b5;
    border-color: var(--primary);
}

    .btn-primary:hover {
        color: #fff;
        background-color: #303F9F;
        background-color: var(--primary-hover);
        border-color: #303F9F;
        border-color: var(--primary-hover);
    }

    .btn-primary:focus, .btn-primary.focus {
        box-shadow: 0 0 0 0.2rem rgba(121, 66, 133, 0.5);
        color: #fff;
    }

    .btn-primary.disabled, .btn-primary:disabled {
        color: #fff;
        background-color: #dfd2e2;
        border-color: #cfbcd4;
    }

    .btn-primary:not(:disabled):not(.disabled):active, .btn-primary:not(:disabled):not(.disabled).active,
    .show > .btn-primary.dropdown-toggle {
        color: #fff;
        background-color: indigo; /* ie11 */
        background-color: #303F9F;
        background-color: var(--primary-hover);
        border-color: #303F9F;
        border-color: var(--primary-hover);
    }

        .btn-primary:not(:disabled):not(.disabled):active:focus, .btn-primary:not(:disabled):not(.disabled).active:focus,
        .show > .btn-primary.dropdown-toggle:focus {
            box-shadow: 0 0 0 0.2rem rgba(121, 66, 133, 0.5);
        }

.btn-secondary {
    color: #ffffff;
    background-color: #546e7a;
    background-color: var(--secondary);
    border-color: #546e7a;
    border-color: var(--secondary);
}

    .btn-secondary:hover,
    .btn-secondary:focus,
    .btn-secondary:active,
    .btn-secondary.active,
    .open .dropdown-toggle.btn-secondary {
        color: #ffffff;
        background-color: indigo; /* ie11 */
        background-color: #37474F;
        background-color: var(--secondary-hover);
        border-color: #37474F;
        border-color: var(--secondary-hover);
    }

    .btn-secondary:active,
    .btn-secondary.active,
    .open .dropdown-toggle.btn-secondary {
        background-image: none;
    }

    .btn-secondary.disabled,
    .btn-secondary[disabled],
    fieldset[disabled] .btn-secondary,
    .btn-secondary.disabled:hover,
    .btn-secondary[disabled]:hover,
    fieldset[disabled] .btn-secondary:hover,
    .btn-secondary.disabled:focus,
    .btn-secondary[disabled]:focus,
    fieldset[disabled] .btn-secondary:focus,
    .btn-secondary.disabled:active,
    .btn-secondary[disabled]:active,
    fieldset[disabled] .btn-secondary:active,
    .btn-secondary.disabled.active,
    .btn-secondary[disabled].active,
    fieldset[disabled] .btn-secondary.active {
        background-color: #dfd2e2;
        border-color: #cfbcd4;
    }

    .btn-secondary .badge {
        color: #70377E;
        background-color: #ffffff;
    }

.btn-success {
    color: #fff;
    background-color: #00cc66;
    border-color: #00cc66;
}

    .btn-success:hover {
        color: #fff;
        background-color: #00a653;
        border-color: #00994d;
    }

    .btn-success:focus, .btn-success.focus {
        box-shadow: 0 0 0 0.2rem rgba(38, 212, 125, 0.5);
    }

    .btn-success.disabled, .btn-success:disabled {
        color: #fff;
        background-color: #00cc66;
        border-color: #00cc66;
    }

    .btn-success:not(:disabled):not(.disabled):active, .btn-success:not(:disabled):not(.disabled).active,
    .show > .btn-success.dropdown-toggle {
        color: #fff;
        background-color: #00994d;
        border-color: #008c46;
    }

        .btn-success:not(:disabled):not(.disabled):active:focus, .btn-success:not(:disabled):not(.disabled).active:focus,
        .show > .btn-success.dropdown-toggle:focus {
            box-shadow: 0 0 0 0.2rem rgba(38, 212, 125, 0.5);
        }

.btn-info {
    color: #212529;
    background-color: #d6e7bc;
    border-color: #d6e7bc;
}

    .btn-info:hover {
        color: #212529;
        background-color: #c5dda0;
        border-color: #bfda96;
    }

    .btn-info:focus, .btn-info.focus {
        box-shadow: 0 0 0 0.2rem rgba(187, 202, 166, 0.5);
    }

    .btn-info.disabled, .btn-info:disabled {
        color: #212529;
        background-color: #d6e7bc;
        border-color: #d6e7bc;
    }

    .btn-info:not(:disabled):not(.disabled):active, .btn-info:not(:disabled):not(.disabled).active,
    .show > .btn-info.dropdown-toggle {
        color: #212529;
        background-color: #bfda96;
        border-color: #b9d68d;
    }

        .btn-info:not(:disabled):not(.disabled):active:focus, .btn-info:not(:disabled):not(.disabled).active:focus,
        .show > .btn-info.dropdown-toggle:focus {
            box-shadow: 0 0 0 0.2rem rgba(187, 202, 166, 0.5);
        }

.btn-warning {
    color: #212529;
    background-color: #ffcc00;
    background-color: var(--warning);
    border-color: #ffcc00;
    border-color: var(--warning);
}

    .btn-warning:hover {
        color: #212529;
        background-color: #d9ad00;
        border-color: #cca300;
    }

    .btn-warning:focus, .btn-warning.focus {
        box-shadow: 0 0 0 0.2rem rgba(222, 179, 6, 0.5);
    }

    .btn-warning.disabled, .btn-warning:disabled {
        color: #212529;
        background-color: #ffcc00;
        background-color: var(--warning);
        border-color: #ffcc00;
        border-color: var(--warning);
    }

    .btn-warning:not(:disabled):not(.disabled):active, .btn-warning:not(:disabled):not(.disabled).active,
    .show > .btn-warning.dropdown-toggle {
        color: #212529;
        background-color: #cca300;
        border-color: #bf9900;
    }

        .btn-warning:not(:disabled):not(.disabled):active:focus, .btn-warning:not(:disabled):not(.disabled).active:focus,
        .show > .btn-warning.dropdown-toggle:focus {
            box-shadow: 0 0 0 0.2rem rgba(222, 179, 6, 0.5);
        }

.btn-danger {
    color: #fff;
    background-color: #cc0000;
    border-color: #cc0000;
}

    .btn-danger:hover {
        color: #fff;
        background-color: #a60000;
        border-color: #990000;
    }

    .btn-danger:focus, .btn-danger.focus {
        box-shadow: 0 0 0 0.2rem rgba(212, 38, 38, 0.5);
    }

    .btn-danger.disabled, .btn-danger:disabled {
        color: #fff;
        background-color: #cc0000;
        border-color: #cc0000;
    }

    .btn-danger:not(:disabled):not(.disabled):active, .btn-danger:not(:disabled):not(.disabled).active,
    .show > .btn-danger.dropdown-toggle {
        color: #fff;
        background-color: #990000;
        border-color: #8c0000;
    }

        .btn-danger:not(:disabled):not(.disabled):active:focus, .btn-danger:not(:disabled):not(.disabled).active:focus,
        .show > .btn-danger.dropdown-toggle:focus {
            box-shadow: 0 0 0 0.2rem rgba(212, 38, 38, 0.5);
        }

.btn-light {
    color: #212529;
    background-color: #f8f9fa;
    border-color: #f8f9fa;
}

    .btn-light:hover {
        color: #212529;
        background-color: #e2e6ea;
        border-color: #dae0e5;
    }

    .btn-light:focus, .btn-light.focus {
        box-shadow: 0 0 0 0.2rem rgba(216, 217, 219, 0.5);
    }

    .btn-light.disabled, .btn-light:disabled {
        color: #212529;
        background-color: #f8f9fa;
        border-color: #f8f9fa;
    }

    .btn-light:not(:disabled):not(.disabled):active, .btn-light:not(:disabled):not(.disabled).active,
    .show > .btn-light.dropdown-toggle {
        color: #212529;
        background-color: #dae0e5;
        border-color: #d3d9df;
    }

        .btn-light:not(:disabled):not(.disabled):active:focus, .btn-light:not(:disabled):not(.disabled).active:focus,
        .show > .btn-light.dropdown-toggle:focus {
            box-shadow: 0 0 0 0.2rem rgba(216, 217, 219, 0.5);
        }

.btn-dark {
    color: #fff;
    background-color: #343a40;
    border-color: #343a40;
}

    .btn-dark:hover {
        color: #fff;
        background-color: #23272b;
        border-color: #1d2124;
    }

    .btn-dark:focus, .btn-dark.focus {
        box-shadow: 0 0 0 0.2rem rgba(82, 88, 93, 0.5);
    }

    .btn-dark.disabled, .btn-dark:disabled {
        color: #fff;
        background-color: #343a40;
        border-color: #343a40;
    }

    .btn-dark:not(:disabled):not(.disabled):active, .btn-dark:not(:disabled):not(.disabled).active,
    .show > .btn-dark.dropdown-toggle {
        color: #fff;
        background-color: #1d2124;
        border-color: #171a1d;
    }

        .btn-dark:not(:disabled):not(.disabled):active:focus, .btn-dark:not(:disabled):not(.disabled).active:focus,
        .show > .btn-dark.dropdown-toggle:focus {
            box-shadow: 0 0 0 0.2rem rgba(82, 88, 93, 0.5);
        }

.btn-outline-primary {
    color: #3f51b5;
    color: var(--primary);
    border-color: #3f51b5;
    border-color: var(--primary);
}

    .btn-outline-primary:hover {
        color: #fff;
        background-color: #3f51b5;
        background-color: var(--primary);
        border-color: #3f51b5;
        border-color: var(--primary);
    }

    .btn-outline-primary:focus, .btn-outline-primary.focus {
        box-shadow: 0 0 0 0.2rem rgba(97, 33, 112, 0.5);
    }

    .btn-outline-primary.disabled, .btn-outline-primary:disabled {
        color: #3f51b5;
        color: var(--primary);
        background-color: transparent;
    }

    .btn-outline-primary:not(:disabled):not(.disabled):active, .btn-outline-primary:not(:disabled):not(.disabled).active,
    .show > .btn-outline-primary.dropdown-toggle {
        color: #fff;
        background-color: #3f51b5;
        background-color: var(--primary);
        border-color: #3f51b5;
        border-color: var(--primary);
    }

        .btn-outline-primary:not(:disabled):not(.disabled):active:focus, .btn-outline-primary:not(:disabled):not(.disabled).active:focus,
        .show > .btn-outline-primary.dropdown-toggle:focus {
            box-shadow: 0 0 0 0.2rem rgba(97, 33, 112, 0.5);
        }

.btn-outline-secondary {
    color: #546e7a;
    color: var(--secondary);
    border-color: #546e7a;
    border-color: var(--secondary);
}

    .btn-outline-secondary:hover {
        color: #fff;
        background-color: #546e7a;
        background-color: var(--secondary);
        border-color: #546e7a;
        border-color: var(--secondary);
    }

    .btn-outline-secondary:focus, .btn-outline-secondary.focus {
        box-shadow: 0 0 0 0.2rem rgba(160, 128, 173, 0.5);
    }

    .btn-outline-secondary.disabled, .btn-outline-secondary:disabled {
        color: #546e7a;
        color: var(--secondary);
        background-color: transparent;
    }

    .btn-outline-secondary:not(:disabled):not(.disabled):active, .btn-outline-secondary:not(:disabled):not(.disabled).active,
    .show > .btn-outline-secondary.dropdown-toggle {
        color: #fff;
        background-color: #546e7a;
        background-color: var(--secondary);
        border-color: #546e7a;
        border-color: var(--secondary);
    }

        .btn-outline-secondary:not(:disabled):not(.disabled):active:focus, .btn-outline-secondary:not(:disabled):not(.disabled).active:focus,
        .show > .btn-outline-secondary.dropdown-toggle:focus {
            box-shadow: 0 0 0 0.2rem rgba(160, 128, 173, 0.5);
        }

.btn-outline-success {
    color: #00cc66;
    border-color: #00cc66;
}

    .btn-outline-success:hover {
        color: #fff;
        background-color: #00cc66;
        border-color: #00cc66;
    }

    .btn-outline-success:focus, .btn-outline-success.focus {
        box-shadow: 0 0 0 0.2rem rgba(0, 204, 102, 0.5);
    }

    .btn-outline-success.disabled, .btn-outline-success:disabled {
        color: #00cc66;
        background-color: transparent;
    }

    .btn-outline-success:not(:disabled):not(.disabled):active, .btn-outline-success:not(:disabled):not(.disabled).active,
    .show > .btn-outline-success.dropdown-toggle {
        color: #fff;
        background-color: #00cc66;
        border-color: #00cc66;
    }

        .btn-outline-success:not(:disabled):not(.disabled):active:focus, .btn-outline-success:not(:disabled):not(.disabled).active:focus,
        .show > .btn-outline-success.dropdown-toggle:focus {
            box-shadow: 0 0 0 0.2rem rgba(0, 204, 102, 0.5);
        }

.btn-outline-info {
    color: #d6e7bc;
    border-color: #d6e7bc;
}

    .btn-outline-info:hover {
        color: #212529;
        background-color: #d6e7bc;
        border-color: #d6e7bc;
    }

    .btn-outline-info:focus, .btn-outline-info.focus {
        box-shadow: 0 0 0 0.2rem rgba(214, 231, 188, 0.5);
    }

    .btn-outline-info.disabled, .btn-outline-info:disabled {
        color: #d6e7bc;
        background-color: transparent;
    }

    .btn-outline-info:not(:disabled):not(.disabled):active, .btn-outline-info:not(:disabled):not(.disabled).active,
    .show > .btn-outline-info.dropdown-toggle {
        color: #212529;
        background-color: #d6e7bc;
        border-color: #d6e7bc;
    }

        .btn-outline-info:not(:disabled):not(.disabled):active:focus, .btn-outline-info:not(:disabled):not(.disabled).active:focus,
        .show > .btn-outline-info.dropdown-toggle:focus {
            box-shadow: 0 0 0 0.2rem rgba(214, 231, 188, 0.5);
        }

.btn-outline-warning {
    color: #ffcc00;
    border-color: #ffcc00;
}

    .btn-outline-warning:hover {
        color: #212529;
        background-color: #ffcc00;
        border-color: #ffcc00;
    }

    .btn-outline-warning:focus, .btn-outline-warning.focus {
        box-shadow: 0 0 0 0.2rem rgba(255, 204, 0, 0.5);
    }

    .btn-outline-warning.disabled, .btn-outline-warning:disabled {
        color: #ffcc00;
        background-color: transparent;
    }

    .btn-outline-warning:not(:disabled):not(.disabled):active, .btn-outline-warning:not(:disabled):not(.disabled).active,
    .show > .btn-outline-warning.dropdown-toggle {
        color: #212529;
        background-color: #ffcc00;
        border-color: #ffcc00;
    }

        .btn-outline-warning:not(:disabled):not(.disabled):active:focus, .btn-outline-warning:not(:disabled):not(.disabled).active:focus,
        .show > .btn-outline-warning.dropdown-toggle:focus {
            box-shadow: 0 0 0 0.2rem rgba(255, 204, 0, 0.5);
        }

.btn-outline-danger {
    color: #cc0000;
    border-color: #cc0000;
}

    .btn-outline-danger:hover {
        color: #fff;
        background-color: #cc0000;
        border-color: #cc0000;
    }

    .btn-outline-danger:focus, .btn-outline-danger.focus {
        box-shadow: 0 0 0 0.2rem rgba(204, 0, 0, 0.5);
    }

    .btn-outline-danger.disabled, .btn-outline-danger:disabled {
        color: #cc0000;
        background-color: transparent;
    }

    .btn-outline-danger:not(:disabled):not(.disabled):active, .btn-outline-danger:not(:disabled):not(.disabled).active,
    .show > .btn-outline-danger.dropdown-toggle {
        color: #fff;
        background-color: #cc0000;
        border-color: #cc0000;
    }

        .btn-outline-danger:not(:disabled):not(.disabled):active:focus, .btn-outline-danger:not(:disabled):not(.disabled).active:focus,
        .show > .btn-outline-danger.dropdown-toggle:focus {
            box-shadow: 0 0 0 0.2rem rgba(204, 0, 0, 0.5);
        }

.btn-outline-light {
    color: #f8f9fa;
    border-color: #f8f9fa;
}

    .btn-outline-light:hover {
        color: #212529;
        background-color: #f8f9fa;
        border-color: #f8f9fa;
    }

    .btn-outline-light:focus, .btn-outline-light.focus {
        box-shadow: 0 0 0 0.2rem rgba(248, 249, 250, 0.5);
    }

    .btn-outline-light.disabled, .btn-outline-light:disabled {
        color: #f8f9fa;
        background-color: transparent;
    }

    .btn-outline-light:not(:disabled):not(.disabled):active, .btn-outline-light:not(:disabled):not(.disabled).active,
    .show > .btn-outline-light.dropdown-toggle {
        color: #212529;
        background-color: #f8f9fa;
        border-color: #f8f9fa;
    }

        .btn-outline-light:not(:disabled):not(.disabled):active:focus, .btn-outline-light:not(:disabled):not(.disabled).active:focus,
        .show > .btn-outline-light.dropdown-toggle:focus {
            box-shadow: 0 0 0 0.2rem rgba(248, 249, 250, 0.5);
        }

.btn-outline-dark {
    color: #343a40;
    border-color: #343a40;
}

    .btn-outline-dark:hover {
        color: #fff;
        background-color: #343a40;
        border-color: #343a40;
    }

    .btn-outline-dark:focus, .btn-outline-dark.focus {
        box-shadow: 0 0 0 0.2rem rgba(52, 58, 64, 0.5);
    }

    .btn-outline-dark.disabled, .btn-outline-dark:disabled {
        color: #343a40;
        background-color: transparent;
    }

    .btn-outline-dark:not(:disabled):not(.disabled):active, .btn-outline-dark:not(:disabled):not(.disabled).active,
    .show > .btn-outline-dark.dropdown-toggle {
        color: #fff;
        background-color: #343a40;
        border-color: #343a40;
    }

        .btn-outline-dark:not(:disabled):not(.disabled):active:focus, .btn-outline-dark:not(:disabled):not(.disabled).active:focus,
        .show > .btn-outline-dark.dropdown-toggle:focus {
            box-shadow: 0 0 0 0.2rem rgba(52, 58, 64, 0.5);
        }

.btn-link {
    font-weight: 400;
    color: #3f51b5;
    color: var(--primary);
    text-decoration: none;
}

    .btn-link:hover {
        color: #2e1035;
        text-decoration: underline;
    }

    .btn-link:focus, .btn-link.focus {
        text-decoration: underline;
        box-shadow: none;
    }

    .btn-link:disabled, .btn-link.disabled {
        color: #6c757d;
        pointer-events: none;
    }

.btn-lg, .btn-group-lg > .btn {
    padding: 0.5rem 1rem;
    font-size: 1.25rem;
    line-height: 1.5;
    border-radius: 0.3rem;
}

.btn-sm, .btn-group-sm > .btn {
    padding: 0.25rem 0.5rem;
    font-size: 0.875rem;
    line-height: 1.5;
    border-radius: 0.2rem;
}

.btn-block {
    display: block;
    width: 100%;
}

    .btn-block + .btn-block {
        margin-top: 0.5rem;
    }

input[type="submit"].btn-block,
input[type="reset"].btn-block,
input[type="button"].btn-block {
    width: 100%;
}

.fade {
    opacity: 0;
    -webkit-transition: opacity .15s linear;
    -o-transition: opacity .15s linear;
    transition: opacity .15s linear;
}

    .fade.in {
        opacity: 1;
    }

.collapse {
    display: none;
}

    .collapse.in {
        display: block;
    }

tr.collapse.in {
    display: table-row;
}

tbody.collapse.in {
    display: table-row-group;
}

.collapsing {
    position: relative;
    height: 0;
    overflow: hidden;
    -webkit-transition: height .35s ease;
    -o-transition: height .35s ease;
    transition: height .35s ease;
}

.caret {
    display: inline-block;
    width: 0;
    height: 0;
    margin-left: 2px;
    vertical-align: middle;
    border-top: 4px solid;
    border-right: 4px solid transparent;
    border-left: 4px solid transparent;
}

.dropdown {
    position: relative;
}

.dropdown-toggle:focus {
    outline: 0;
}

.dropdown-menu {
    position: absolute;
    top: 100%;
    left: 0;
    z-index: 1000;
    display: none;
    float: left;
    min-width: 160px;
    padding: 5px 0;
    margin: 2px 0 0;
    font-size: 14px;
    text-align: left;
    list-style: none;
    background-color: #fff;
    -webkit-background-clip: padding-box;
    background-clip: padding-box;
    border: 1px solid #ccc;
    border: 1px solid rgba(0, 0, 0, .15);
    border-radius: 4px;
    -webkit-box-shadow: 0 6px 12px rgba(0, 0, 0, .175);
    box-shadow: 0 6px 12px rgba(0, 0, 0, .175);
}

    .dropdown-menu.pull-right {
        right: 0;
        left: auto;
    }

    .dropdown-menu .divider {
        height: 1px;
        margin: 9px 0;
        overflow: hidden;
        background-color: #e5e5e5;
    }

    .dropdown-menu > li > a {
        display: block;
        padding: 3px 20px;
        clear: both;
        font-weight: normal;
        line-height: 1.42857143;
        color: #333;
        white-space: nowrap;
    }

        .dropdown-menu > li > a:hover,
        .dropdown-menu > li > a:focus {
            color: #262626;
            text-decoration: none;
            background-color: #f5f5f5;
        }

    .dropdown-menu > .active > a,
    .dropdown-menu > .active > a:hover,
    .dropdown-menu > .active > a:focus {
        color: #fff;
        text-decoration: none;
        background-color: #3f51b5;
        background-color: var(--primary);
        outline: 0;
    }

    .dropdown-menu > .disabled > a,
    .dropdown-menu > .disabled > a:hover,
    .dropdown-menu > .disabled > a:focus {
        color: #777;
    }

        .dropdown-menu > .disabled > a:hover,
        .dropdown-menu > .disabled > a:focus {
            text-decoration: none;
            cursor: not-allowed;
            background-color: transparent;
            background-image: none;
            filter: progid:DXImageTransform.Microsoft.gradient(enabled = false);
        }

.open > .dropdown-menu {
    display: block;
}

.open > a {
    outline: 0;
}

.dropdown-menu-right {
    right: 0;
    left: auto;
}

.dropdown-menu-left {
    right: auto;
    left: 0;
}

.dropdown-header {
    display: block;
    padding: 3px 20px;
    font-size: 12px;
    line-height: 1.42857143;
    color: #777;
    white-space: nowrap;
}

.dropdown-backdrop {
    position: fixed;
    top: 0;
    right: 0;
    bottom: 0;
    left: 0;
    z-index: 990;
}

.pull-right > .dropdown-menu {
    right: 0;
    left: auto;
}

.dropup .caret,
.navbar-fixed-bottom .dropdown .caret {
    content: "";
    border-top: 0;
    border-bottom: 4px solid;
}

.dropup .dropdown-menu,
.navbar-fixed-bottom .dropdown .dropdown-menu {
    top: auto;
    bottom: 100%;
    margin-bottom: 1px;
}

@media (min-width: 768px) {
    .navbar-right .dropdown-menu {
        right: 0;
        left: auto;
    }

    .navbar-right .dropdown-menu-left {
        right: auto;
        left: 0;
    }
}

.btn-group,
.btn-group-vertical {
    position: relative;
    display: inline-block;
    vertical-align: middle;
}

    .btn-group > .btn,
    .btn-group-vertical > .btn {
        position: relative;
        float: left;
    }

        .btn-group > .btn:hover,
        .btn-group-vertical > .btn:hover,
        .btn-group > .btn:focus,
        .btn-group-vertical > .btn:focus,
        .btn-group > .btn:active,
        .btn-group-vertical > .btn:active,
        .btn-group > .btn.active,
        .btn-group-vertical > .btn.active {
            z-index: 2;
        }

        .btn-group > .btn:focus,
        .btn-group-vertical > .btn:focus {
            outline: 0;
        }

    .btn-group .btn + .btn,
    .btn-group .btn + .btn-group,
    .btn-group .btn-group + .btn,
    .btn-group .btn-group + .btn-group {
        margin-left: -1px;
    }

.btn-toolbar {
    margin-left: -5px;
}

    .btn-toolbar .btn-group,
    .btn-toolbar .input-group {
        float: left;
    }

    .btn-toolbar > .btn,
    .btn-toolbar > .btn-group,
    .btn-toolbar > .input-group {
        margin-left: 5px;
    }

.btn-group > .btn:not(:first-child):not(:last-child):not(.dropdown-toggle) {
    border-radius: 0;
}

.btn-group > .btn:first-child {
    margin-left: 0;
}

    .btn-group > .btn:first-child:not(:last-child):not(.dropdown-toggle) {
        border-top-right-radius: 0;
        border-bottom-right-radius: 0;
    }

.btn-group > .btn:last-child:not(:first-child),
.btn-group > .dropdown-toggle:not(:first-child) {
    border-top-left-radius: 0;
    border-bottom-left-radius: 0;
}

.btn-group > .btn-group {
    float: left;
}

    .btn-group > .btn-group:not(:first-child):not(:last-child) > .btn {
        border-radius: 0;
    }

    .btn-group > .btn-group:first-child > .btn:last-child,
    .btn-group > .btn-group:first-child > .dropdown-toggle {
        border-top-right-radius: 0;
        border-bottom-right-radius: 0;
    }

    .btn-group > .btn-group:last-child > .btn:first-child {
        border-top-left-radius: 0;
        border-bottom-left-radius: 0;
    }

.btn-group .dropdown-toggle:active,
.btn-group.open .dropdown-toggle {
    outline: 0;
}

.btn-group > .btn + .dropdown-toggle {
    padding-right: 8px;
    padding-left: 8px;
}

.btn-group > .btn-lg + .dropdown-toggle {
    padding-right: 12px;
    padding-left: 12px;
}

.btn-group.open .dropdown-toggle {
    -webkit-box-shadow: inset 0 3px 5px rgba(0, 0, 0, .125);
    box-shadow: inset 0 3px 5px rgba(0, 0, 0, .125);
}

    .btn-group.open .dropdown-toggle.btn-link {
        -webkit-box-shadow: none;
        box-shadow: none;
    }

.btn .caret {
    margin-left: 0;
}

.btn-lg .caret {
    border-width: 5px 5px 0;
    border-bottom-width: 0;
}

.dropup .btn-lg .caret {
    border-width: 0 5px 5px;
}

.btn-group-vertical > .btn,
.btn-group-vertical > .btn-group,
.btn-group-vertical > .btn-group > .btn {
    display: block;
    float: none;
    width: 100%;
    max-width: 100%;
}

    .btn-group-vertical > .btn-group > .btn {
        float: none;
    }

    .btn-group-vertical > .btn + .btn,
    .btn-group-vertical > .btn + .btn-group,
    .btn-group-vertical > .btn-group + .btn,
    .btn-group-vertical > .btn-group + .btn-group {
        margin-top: -1px;
        margin-left: 0;
    }

    .btn-group-vertical > .btn:not(:first-child):not(:last-child) {
        border-radius: 0;
    }

    .btn-group-vertical > .btn:first-child:not(:last-child) {
        border-top-right-radius: 4px;
        border-bottom-right-radius: 0;
        border-bottom-left-radius: 0;
    }

    .btn-group-vertical > .btn:last-child:not(:first-child) {
        border-top-left-radius: 0;
        border-top-right-radius: 0;
        border-bottom-left-radius: 4px;
    }

    .btn-group-vertical > .btn-group:not(:first-child):not(:last-child) > .btn {
        border-radius: 0;
    }

    .btn-group-vertical > .btn-group:first-child:not(:last-child) > .btn:last-child,
    .btn-group-vertical > .btn-group:first-child:not(:last-child) > .dropdown-toggle {
        border-bottom-right-radius: 0;
        border-bottom-left-radius: 0;
    }

    .btn-group-vertical > .btn-group:last-child:not(:first-child) > .btn:first-child {
        border-top-left-radius: 0;
        border-top-right-radius: 0;
    }

.btn-group-justified {
    display: table;
    width: 100%;
    table-layout: fixed;
    border-collapse: separate;
}

    .btn-group-justified > .btn,
    .btn-group-justified > .btn-group {
        display: table-cell;
        float: none;
        width: 1%;
    }

        .btn-group-justified > .btn-group .btn {
            width: 100%;
        }

        .btn-group-justified > .btn-group .dropdown-menu {
            left: auto;
        }

[data-toggle="buttons"] > .btn > input[type="radio"],
[data-toggle="buttons"] > .btn > input[type="checkbox"] {
    position: absolute;
    z-index: -1;
    filter: alpha(opacity=0);
    opacity: 0;
}

.input-group {
    position: relative;
    display: table;
    border-collapse: separate;
}

    .input-group[class*="col-"] {
        float: none;
        padding-right: 0;
        padding-left: 0;
    }

    .input-group .form-control {
        position: relative;
        z-index: 2;
        float: left;
        width: 100%;
        margin-bottom: 0;
    }

.input-group-lg > .form-control,
.input-group-lg > .input-group-addon,
.input-group-lg > .input-group-btn > .btn {
    height: 46px;
    padding: 10px 16px;
    font-size: 18px;
    line-height: 1.33;
    border-radius: 6px;
}

select.input-group-lg > .form-control,
select.input-group-lg > .input-group-addon,
select.input-group-lg > .input-group-btn > .btn {
    height: 46px;
    line-height: 46px;
}

textarea.input-group-lg > .form-control,
textarea.input-group-lg > .input-group-addon,
textarea.input-group-lg > .input-group-btn > .btn,
select[multiple].input-group-lg > .form-control,
select[multiple].input-group-lg > .input-group-addon,
select[multiple].input-group-lg > .input-group-btn > .btn {
    height: auto;
}

.input-group-sm > .form-control,
.input-group-sm > .input-group-addon,
.input-group-sm > .input-group-btn > .btn {
    height: 30px;
    padding: 5px 10px;
    font-size: 12px;
    line-height: 1.5;
    border-radius: 3px;
}

select.input-group-sm > .form-control,
select.input-group-sm > .input-group-addon,
select.input-group-sm > .input-group-btn > .btn {
    height: 30px;
    line-height: 30px;
}

textarea.input-group-sm > .form-control,
textarea.input-group-sm > .input-group-addon,
textarea.input-group-sm > .input-group-btn > .btn,
select[multiple].input-group-sm > .form-control,
select[multiple].input-group-sm > .input-group-addon,
select[multiple].input-group-sm > .input-group-btn > .btn {
    height: auto;
}

.input-group-addon,
.input-group-btn,
.input-group .form-control {
    display: table-cell;
}

    .input-group-addon:not(:first-child):not(:last-child),
    .input-group-btn:not(:first-child):not(:last-child),
    .input-group .form-control:not(:first-child):not(:last-child) {
        border-radius: 0;
    }

.input-group-addon,
.input-group-btn {
    width: 1%;
    white-space: nowrap;
    vertical-align: middle;
}

.input-group-addon {
    padding: 6px 12px;
    font-size: 14px;
    font-weight: normal;
    line-height: 1;
    color: #555;
    text-align: center;
    background-color: #eee;
    border: 1px solid #ccc;
    border-radius: 4px;
}

    .input-group-addon.input-sm {
        padding: 5px 10px;
        font-size: 12px;
        border-radius: 3px;
    }

    .input-group-addon.input-lg {
        padding: 10px 16px;
        font-size: 18px;
        border-radius: 6px;
    }

    .input-group-addon input[type="radio"],
    .input-group-addon input[type="checkbox"] {
        margin-top: 0;
    }

    .input-group .form-control:first-child,
    .input-group-addon:first-child,
    .input-group-btn:first-child > .btn,
    .input-group-btn:first-child > .btn-group > .btn,
    .input-group-btn:first-child > .dropdown-toggle,
    .input-group-btn:last-child > .btn:not(:last-child):not(.dropdown-toggle),
    .input-group-btn:last-child > .btn-group:not(:last-child) > .btn {
        border-top-right-radius: 0;
        border-bottom-right-radius: 0;
    }

    .input-group-addon:first-child {
        border-right: 0;
    }

    .input-group .form-control:last-child,
    .input-group-addon:last-child,
    .input-group-btn:last-child > .btn,
    .input-group-btn:last-child > .btn-group > .btn,
    .input-group-btn:last-child > .dropdown-toggle,
    .input-group-btn:first-child > .btn:not(:first-child),
    .input-group-btn:first-child > .btn-group:not(:first-child) > .btn {
        border-top-left-radius: 0;
        border-bottom-left-radius: 0;
    }

    .input-group-addon:last-child {
        border-left: 0;
    }

.input-group-btn {
    position: relative;
    font-size: 0;
    white-space: nowrap;
}

    .input-group-btn > .btn {
        position: relative;
    }

        .input-group-btn > .btn + .btn {
            margin-left: -1px;
        }

        .input-group-btn > .btn:hover,
        .input-group-btn > .btn:focus,
        .input-group-btn > .btn:active {
            z-index: 2;
        }

    .input-group-btn:first-child > .btn,
    .input-group-btn:first-child > .btn-group {
        margin-right: -1px;
    }

    .input-group-btn:last-child > .btn,
    .input-group-btn:last-child > .btn-group {
        margin-left: -1px;
    }

.nav {
    padding-left: 0;
    margin-bottom: 0;
    list-style: none;
}

    .nav > li {
        position: relative;
        display: block;
    }

        .nav > li > a {
            position: relative;
            display: block;
            padding: 10px 15px;
        }

            .nav > li > a:hover,
            .nav > li > a:focus {
                text-decoration: none;
                background-color: #eee;
            }

        .nav > li.disabled > a {
            color: #777;
        }

            .nav > li.disabled > a:hover,
            .nav > li.disabled > a:focus {
                color: #777;
                text-decoration: none;
                cursor: not-allowed;
                background-color: transparent;
            }

    .nav .open > a,
    .nav .open > a:hover,
    .nav .open > a:focus {
        background-color: #eee;
        border-color: #3f51b5;
        border-color: var(--primary);
    }

    .nav .nav-divider {
        height: 1px;
        margin: 9px 0;
        overflow: hidden;
        background-color: #e5e5e5;
    }

    .nav > li > a > img {
        max-width: none;
    }

.nav-tabs {
    border-bottom: 1px solid #ddd;
}

    .nav-tabs > li {
        float: left;
        margin-bottom: -1px;
    }

        .nav-tabs > li > a {
            margin-right: 2px;
            line-height: 1.42857143;
            border: 1px solid transparent;
            border-radius: 4px 4px 0 0;
        }

            .nav-tabs > li > a:hover {
                border-color: #eee #eee #ddd;
            }

        .nav-tabs > li.active > a,
        .nav-tabs > li.active > a:hover,
        .nav-tabs > li.active > a:focus {
            color: #555;
            cursor: default;
            background-color: #fff;
            border: 1px solid #ddd;
            border-bottom-color: transparent;
        }

    .nav-tabs.nav-justified {
        width: 100%;
        border-bottom: 0;
    }

        .nav-tabs.nav-justified > li {
            float: none;
        }

            .nav-tabs.nav-justified > li > a {
                margin-bottom: 5px;
                text-align: center;
            }

        .nav-tabs.nav-justified > .dropdown .dropdown-menu {
            top: auto;
            left: auto;
        }

@media (min-width: 768px) {
    .nav-tabs.nav-justified > li {
        display: table-cell;
        width: 1%;
    }

        .nav-tabs.nav-justified > li > a {
            margin-bottom: 0;
        }
}

.nav-tabs.nav-justified > li > a {
    margin-right: 0;
    border-radius: 4px;
}

.nav-tabs.nav-justified > .active > a,
.nav-tabs.nav-justified > .active > a:hover,
.nav-tabs.nav-justified > .active > a:focus {
    border: 1px solid #ddd;
}

@media (min-width: 768px) {
    .nav-tabs.nav-justified > li > a {
        border-bottom: 1px solid #ddd;
        border-radius: 4px 4px 0 0;
    }

    .nav-tabs.nav-justified > .active > a,
    .nav-tabs.nav-justified > .active > a:hover,
    .nav-tabs.nav-justified > .active > a:focus {
        border-bottom-color: #fff;
    }
}

.nav-pills > li {
    float: left;
}

    .nav-pills > li > a {
        border-radius: 4px;
    }

    .nav-pills > li + li {
        margin-left: 2px;
    }

    .nav-pills > li.active > a,
    .nav-pills > li.active > a:hover,
    .nav-pills > li.active > a:focus {
        color: #fff;
        background-color: #3f51b5;
        background-color: var(--primary);
    }

.nav-stacked > li {
    float: none;
}

    .nav-stacked > li + li {
        margin-top: 2px;
        margin-left: 0;
    }

.nav-justified {
    width: 100%;
}

    .nav-justified > li {
        float: none;
    }

        .nav-justified > li > a {
            margin-bottom: 5px;
            text-align: center;
        }

    .nav-justified > .dropdown .dropdown-menu {
        top: auto;
        left: auto;
    }

@media (min-width: 768px) {
    .nav-justified > li {
        display: table-cell;
        width: 1%;
    }

        .nav-justified > li > a {
            margin-bottom: 0;
        }
}

.nav-tabs-justified {
    border-bottom: 0;
}

    .nav-tabs-justified > li > a {
        margin-right: 0;
        border-radius: 4px;
    }

    .nav-tabs-justified > .active > a,
    .nav-tabs-justified > .active > a:hover,
    .nav-tabs-justified > .active > a:focus {
        border: 1px solid #ddd;
    }

@media (min-width: 768px) {
    .nav-tabs-justified > li > a {
        border-bottom: 1px solid #ddd;
        border-radius: 4px 4px 0 0;
    }

    .nav-tabs-justified > .active > a,
    .nav-tabs-justified > .active > a:hover,
    .nav-tabs-justified > .active > a:focus {
        border-bottom-color: #fff;
    }
}

.tab-content > .tab-pane {
    display: none;
}

.tab-content > .active {
    display: block;
}

.nav-tabs .dropdown-menu {
    margin-top: -1px;
    border-top-left-radius: 0;
    border-top-right-radius: 0;
}

.navbar {
    position: relative;
    min-height: 50px;
    margin-bottom: 20px;
    border: 1px solid transparent;
}

@media (min-width: 768px) {
    .navbar {
        border-radius: 4px;
    }
}

@media (min-width: 768px) {
    .navbar-header {
        float: left;
    }
}

.navbar-collapse {
    padding-right: 15px;
    padding-left: 15px;
    overflow-x: visible;
    -webkit-overflow-scrolling: touch;
    border-top: 1px solid transparent;
    -webkit-box-shadow: inset 0 1px 0 rgba(255, 255, 255, .1);
    box-shadow: inset 0 1px 0 rgba(255, 255, 255, .1);
}

    .navbar-collapse.in {
        overflow-y: auto;
    }

@media (min-width: 768px) {
    .navbar-collapse {
        width: auto;
        border-top: 0;
        -webkit-box-shadow: none;
        box-shadow: none;
    }

        .navbar-collapse.collapse {
            display: block !important;
            height: auto !important;
            padding-bottom: 0;
            overflow: visible !important;
        }

        .navbar-collapse.in {
            overflow-y: visible;
        }

    .navbar-fixed-top .navbar-collapse,
    .navbar-static-top .navbar-collapse,
    .navbar-fixed-bottom .navbar-collapse {
        padding-right: 0;
        padding-left: 0;
    }
}

.navbar-fixed-top .navbar-collapse,
.navbar-fixed-bottom .navbar-collapse {
    max-height: 340px;
}

@media (max-width: 480px) and (orientation: landscape) {
    .navbar-fixed-top .navbar-collapse,
    .navbar-fixed-bottom .navbar-collapse {
        max-height: 200px;
    }
}

.container > .navbar-header,
.container-fluid > .navbar-header,
.container > .navbar-collapse,
.container-fluid > .navbar-collapse {
    margin-right: -15px;
    margin-left: -15px;
}

@media (min-width: 768px) {
    .container > .navbar-header,
    .container-fluid > .navbar-header,
    .container > .navbar-collapse,
    .container-fluid > .navbar-collapse {
        margin-right: 0;
        margin-left: 0;
    }
}

.navbar-static-top {
    z-index: 1000;
    border-width: 0 0 1px;
}

@media (min-width: 768px) {
    .navbar-static-top {
        border-radius: 0;
    }
}

.navbar-fixed-top,
.navbar-fixed-bottom {
    position: fixed;
    right: 0;
    left: 0;
    z-index: 1030;
    -webkit-transform: translate3d(0, 0, 0);
    -o-transform: translate3d(0, 0, 0);
    transform: translate3d(0, 0, 0);
}

@media (min-width: 768px) {
    .navbar-fixed-top,
    .navbar-fixed-bottom {
        border-radius: 0;
    }
}

.navbar-fixed-top {
    top: 0;
    border-width: 0 0 1px;
}

.navbar-fixed-bottom {
    bottom: 0;
    margin-bottom: 0;
    border-width: 1px 0 0;
}

.navbar-brand {
    float: left;
    height: 50px;
    padding: 15px 15px;
    font-size: 18px;
    line-height: 20px;
}

    .navbar-brand:hover,
    .navbar-brand:focus {
        text-decoration: none;
    }

@media (min-width: 768px) {
    .navbar > .container .navbar-brand,
    .navbar > .container-fluid .navbar-brand {
        margin-left: -15px;
    }
}

.navbar-toggle {
    position: relative;
    float: right;
    padding: 9px 10px;
    margin-top: 8px;
    margin-right: 15px;
    margin-bottom: 8px;
    background-color: transparent;
    background-image: none;
    border: 1px solid transparent;
    border-radius: 4px;
}

    .navbar-toggle:focus {
        outline: 0;
    }

    .navbar-toggle .icon-bar {
        display: block;
        width: 22px;
        height: 2px;
        border-radius: 1px;
    }

        .navbar-toggle .icon-bar + .icon-bar {
            margin-top: 4px;
        }

@media (min-width: 768px) {
    .navbar-toggle {
        display: none;
    }
}

.navbar-nav {
    margin: 7.5px -15px;
}

    .navbar-nav > li > a {
        padding-top: 10px;
        padding-bottom: 10px;
        line-height: 20px;
    }

@media (max-width: 767px) {
    .navbar-nav .open .dropdown-menu {
        position: static;
        float: none;
        width: auto;
        margin-top: 0;
        background-color: transparent;
        border: 0;
        -webkit-box-shadow: none;
        box-shadow: none;
    }

        .navbar-nav .open .dropdown-menu > li > a,
        .navbar-nav .open .dropdown-menu .dropdown-header {
            padding: 5px 15px 5px 25px;
        }

        .navbar-nav .open .dropdown-menu > li > a {
            line-height: 20px;
        }

            .navbar-nav .open .dropdown-menu > li > a:hover,
            .navbar-nav .open .dropdown-menu > li > a:focus {
                background-image: none;
            }
}

@media (min-width: 768px) {
    .navbar-nav {
        float: left;
        margin: 0;
    }

        .navbar-nav > li {
            float: left;
        }

            .navbar-nav > li > a {
                padding-top: 15px;
                padding-bottom: 15px;
            }

        .navbar-nav.navbar-right:last-child {
            margin-right: -15px;
        }
}

@media (min-width: 768px) {
    .navbar-left {
        float: left !important;
    }

    .navbar-right {
        float: right !important;
    }
}

.navbar-form {
    padding: 10px 15px;
    margin-top: 8px;
    margin-right: -15px;
    margin-bottom: 8px;
    margin-left: -15px;
    border-top: 1px solid transparent;
    border-bottom: 1px solid transparent;
    -webkit-box-shadow: inset 0 1px 0 rgba(255, 255, 255, .1), 0 1px 0 rgba(255, 255, 255, .1);
    box-shadow: inset 0 1px 0 rgba(255, 255, 255, .1), 0 1px 0 rgba(255, 255, 255, .1);
}

@media (min-width: 768px) {
    .navbar-form .form-group {
        display: inline-block;
        margin-bottom: 0;
        vertical-align: middle;
    }

    .navbar-form .form-control {
        display: inline-block;
        width: auto;
        vertical-align: middle;
    }

    .navbar-form .input-group {
        display: inline-table;
        vertical-align: middle;
    }

        .navbar-form .input-group .input-group-addon,
        .navbar-form .input-group .input-group-btn,
        .navbar-form .input-group .form-control {
            width: auto;
        }

        .navbar-form .input-group > .form-control {
            width: 100%;
        }

    .navbar-form .control-label {
        margin-bottom: 0;
        vertical-align: middle;
    }

    .navbar-form .radio,
    .navbar-form .checkbox {
        display: inline-block;
        margin-top: 0;
        margin-bottom: 0;
        vertical-align: middle;
    }

        .navbar-form .radio label,
        .navbar-form .checkbox label {
            padding-left: 0;
        }

        .navbar-form .radio input[type="radio"],
        .navbar-form .checkbox input[type="checkbox"] {
            position: relative;
            margin-left: 0;
        }

    .navbar-form .has-feedback .form-control-feedback {
        top: 0;
    }
}

@media (max-width: 767px) {
    .navbar-form .form-group {
        margin-bottom: 5px;
    }
}

@media (min-width: 768px) {
    .navbar-form {
        width: auto;
        padding-top: 0;
        padding-bottom: 0;
        margin-right: 0;
        margin-left: 0;
        border: 0;
        -webkit-box-shadow: none;
        box-shadow: none;
    }

        .navbar-form.navbar-right:last-child {
            margin-right: -15px;
        }
}

.navbar-nav > li > .dropdown-menu {
    margin-top: 0;
    border-top-left-radius: 0;
    border-top-right-radius: 0;
}

.navbar-fixed-bottom .navbar-nav > li > .dropdown-menu {
    border-bottom-right-radius: 0;
    border-bottom-left-radius: 0;
}

.navbar-btn {
    margin-top: 8px;
    margin-bottom: 8px;
}

    .navbar-btn.btn-sm {
        margin-top: 10px;
        margin-bottom: 10px;
    }

    .navbar-btn.btn-xs {
        margin-top: 14px;
        margin-bottom: 14px;
    }

.navbar-text {
    margin-top: 15px;
    margin-bottom: 15px;
}

@media (min-width: 768px) {
    .navbar-text {
        float: left;
        margin-right: 15px;
        margin-left: 15px;
    }

        .navbar-text.navbar-right:last-child {
            margin-right: 0;
        }
}

.navbar-default {
    background-color: #f8f8f8;
    border-color: #e7e7e7;
}

    .navbar-default .navbar-brand {
        color: #777;
    }

        .navbar-default .navbar-brand:hover,
        .navbar-default .navbar-brand:focus {
            color: #5e5e5e;
            background-color: transparent;
        }

    .navbar-default .navbar-text {
        color: #777;
    }

    .navbar-default .navbar-nav > li > a {
        color: #777;
    }

        .navbar-default .navbar-nav > li > a:hover,
        .navbar-default .navbar-nav > li > a:focus {
            color: #333;
            background-color: transparent;
        }

    .navbar-default .navbar-nav > .active > a,
    .navbar-default .navbar-nav > .active > a:hover,
    .navbar-default .navbar-nav > .active > a:focus {
        color: #555;
        background-color: #e7e7e7;
    }

    .navbar-default .navbar-nav > .disabled > a,
    .navbar-default .navbar-nav > .disabled > a:hover,
    .navbar-default .navbar-nav > .disabled > a:focus {
        color: #ccc;
        background-color: transparent;
    }

    .navbar-default .navbar-toggle {
        border-color: #ddd;
    }

        .navbar-default .navbar-toggle:hover,
        .navbar-default .navbar-toggle:focus {
            background-color: #ddd;
        }

        .navbar-default .navbar-toggle .icon-bar {
            background-color: #888;
        }

    .navbar-default .navbar-collapse,
    .navbar-default .navbar-form {
        border-color: #e7e7e7;
    }

    .navbar-default .navbar-nav > .open > a,
    .navbar-default .navbar-nav > .open > a:hover,
    .navbar-default .navbar-nav > .open > a:focus {
        color: #555;
        background-color: #e7e7e7;
    }

@media (max-width: 767px) {
    .navbar-default .navbar-nav .open .dropdown-menu > li > a {
        color: #777;
    }

        .navbar-default .navbar-nav .open .dropdown-menu > li > a:hover,
        .navbar-default .navbar-nav .open .dropdown-menu > li > a:focus {
            color: #333;
            background-color: transparent;
        }

    .navbar-default .navbar-nav .open .dropdown-menu > .active > a,
    .navbar-default .navbar-nav .open .dropdown-menu > .active > a:hover,
    .navbar-default .navbar-nav .open .dropdown-menu > .active > a:focus {
        color: #555;
        background-color: #e7e7e7;
    }

    .navbar-default .navbar-nav .open .dropdown-menu > .disabled > a,
    .navbar-default .navbar-nav .open .dropdown-menu > .disabled > a:hover,
    .navbar-default .navbar-nav .open .dropdown-menu > .disabled > a:focus {
        color: #ccc;
        background-color: transparent;
    }
}

.navbar-default .navbar-link {
    color: #777;
}

    .navbar-default .navbar-link:hover {
        color: #333;
    }

.navbar-default .btn-link {
    color: #777;
}

    .navbar-default .btn-link:hover,
    .navbar-default .btn-link:focus {
        color: #333;
    }

    .navbar-default .btn-link[disabled]:hover,
    fieldset[disabled] .navbar-default .btn-link:hover,
    .navbar-default .btn-link[disabled]:focus,
    fieldset[disabled] .navbar-default .btn-link:focus {
        color: #ccc;
    }

.navbar-inverse {
    background-color: #222;
    border-color: #080808;
}

    .navbar-inverse .navbar-brand {
        color: #777;
    }

        .navbar-inverse .navbar-brand:hover,
        .navbar-inverse .navbar-brand:focus {
            color: #fff;
            background-color: transparent;
        }

    .navbar-inverse .navbar-text {
        color: #777;
    }

    .navbar-inverse .navbar-nav > li > a {
        color: #777;
    }

        .navbar-inverse .navbar-nav > li > a:hover,
        .navbar-inverse .navbar-nav > li > a:focus {
            color: #fff;
            background-color: transparent;
        }

    .navbar-inverse .navbar-nav > .active > a,
    .navbar-inverse .navbar-nav > .active > a:hover,
    .navbar-inverse .navbar-nav > .active > a:focus {
        color: #fff;
        background-color: #080808;
    }

    .navbar-inverse .navbar-nav > .disabled > a,
    .navbar-inverse .navbar-nav > .disabled > a:hover,
    .navbar-inverse .navbar-nav > .disabled > a:focus {
        color: #444;
        background-color: transparent;
    }

    .navbar-inverse .navbar-toggle {
        border-color: #333;
    }

        .navbar-inverse .navbar-toggle:hover,
        .navbar-inverse .navbar-toggle:focus {
            background-color: #333;
        }

        .navbar-inverse .navbar-toggle .icon-bar {
            background-color: #fff;
        }

    .navbar-inverse .navbar-collapse,
    .navbar-inverse .navbar-form {
        border-color: #101010;
    }

    .navbar-inverse .navbar-nav > .open > a,
    .navbar-inverse .navbar-nav > .open > a:hover,
    .navbar-inverse .navbar-nav > .open > a:focus {
        color: #fff;
        background-color: #080808;
    }

@media (max-width: 767px) {
    .navbar-inverse .navbar-nav .open .dropdown-menu > .dropdown-header {
        border-color: #080808;
    }

    .navbar-inverse .navbar-nav .open .dropdown-menu .divider {
        background-color: #080808;
    }

    .navbar-inverse .navbar-nav .open .dropdown-menu > li > a {
        color: #777;
    }

        .navbar-inverse .navbar-nav .open .dropdown-menu > li > a:hover,
        .navbar-inverse .navbar-nav .open .dropdown-menu > li > a:focus {
            color: #fff;
            background-color: transparent;
        }

    .navbar-inverse .navbar-nav .open .dropdown-menu > .active > a,
    .navbar-inverse .navbar-nav .open .dropdown-menu > .active > a:hover,
    .navbar-inverse .navbar-nav .open .dropdown-menu > .active > a:focus {
        color: #fff;
        background-color: #080808;
    }

    .navbar-inverse .navbar-nav .open .dropdown-menu > .disabled > a,
    .navbar-inverse .navbar-nav .open .dropdown-menu > .disabled > a:hover,
    .navbar-inverse .navbar-nav .open .dropdown-menu > .disabled > a:focus {
        color: #444;
        background-color: transparent;
    }
}

.navbar-inverse .navbar-link {
    color: #777;
}

    .navbar-inverse .navbar-link:hover {
        color: #fff;
    }

.navbar-inverse .btn-link {
    color: #777;
}

    .navbar-inverse .btn-link:hover,
    .navbar-inverse .btn-link:focus {
        color: #fff;
    }

    .navbar-inverse .btn-link[disabled]:hover,
    fieldset[disabled] .navbar-inverse .btn-link:hover,
    .navbar-inverse .btn-link[disabled]:focus,
    fieldset[disabled] .navbar-inverse .btn-link:focus {
        color: #444;
    }

.breadcrumb {
    padding: 8px 15px;
    margin-bottom: 20px;
    list-style: none;
    background-color: #f5f5f5;
    border-radius: 4px;
}

    .breadcrumb > li {
        display: inline-block;
    }

        .breadcrumb > li + li:before {
            padding: 0 5px;
            color: #ccc;
            content: "/\00a0";
        }

    .breadcrumb > .active {
        color: #777;
    }

.pagination {
    display: inline-block;
    padding-left: 0;
    margin: 20px 0;
    border-radius: 4px;
}

    .pagination > li {
        display: inline;
    }

        .pagination > li > a,
        .pagination > li > span {
            position: relative;
            float: left;
            padding: 6px 12px;
            margin-left: -1px;
            line-height: 1.42857143;
            color: #3f51b5;
            color: var(--primary);
            text-decoration: none;
            background-color: #fff;
            border: 1px solid #ddd;
        }

        .pagination > li:first-child > a,
        .pagination > li:first-child > span {
            margin-left: 0;
            border-top-left-radius: 4px;
            border-bottom-left-radius: 4px;
        }

        .pagination > li:last-child > a,
        .pagination > li:last-child > span {
            border-top-right-radius: 4px;
            border-bottom-right-radius: 4px;
        }

        .pagination > li > a:hover,
        .pagination > li > span:hover,
        .pagination > li > a:focus,
        .pagination > li > span:focus {
            color: #2a6496;
            background-color: #eee;
            border-color: #ddd;
        }

    .pagination > .active > a,
    .pagination > .active > span,
    .pagination > .active > a:hover,
    .pagination > .active > span:hover,
    .pagination > .active > a:focus,
    .pagination > .active > span:focus {
        z-index: 2;
        color: #fff;
        cursor: default;
        background-color: #3f51b5;
        background-color: var(--primary);
        border-color: #3f51b5;
        border-color: var(--primary);
    }

    .pagination > .disabled > span,
    .pagination > .disabled > span:hover,
    .pagination > .disabled > span:focus,
    .pagination > .disabled > a,
    .pagination > .disabled > a:hover,
    .pagination > .disabled > a:focus {
        color: #777;
        cursor: not-allowed;
        background-color: #fff;
        border-color: #ddd;
    }

.pagination-lg > li > a,
.pagination-lg > li > span {
    padding: 10px 16px;
    font-size: 18px;
}

.pagination-lg > li:first-child > a,
.pagination-lg > li:first-child > span {
    border-top-left-radius: 6px;
    border-bottom-left-radius: 6px;
}

.pagination-lg > li:last-child > a,
.pagination-lg > li:last-child > span {
    border-top-right-radius: 6px;
    border-bottom-right-radius: 6px;
}

.pagination-sm > li > a,
.pagination-sm > li > span {
    padding: 5px 10px;
    font-size: 12px;
}

.pagination-sm > li:first-child > a,
.pagination-sm > li:first-child > span {
    border-top-left-radius: 3px;
    border-bottom-left-radius: 3px;
}

.pagination-sm > li:last-child > a,
.pagination-sm > li:last-child > span {
    border-top-right-radius: 3px;
    border-bottom-right-radius: 3px;
}

.pager {
    padding-left: 0;
    margin: 20px 0;
    text-align: center;
    list-style: none;
}

    .pager li {
        display: inline;
    }

        .pager li > a,
        .pager li > span {
            display: inline-block;
            padding: 5px 14px;
            background-color: #fff;
            border: 1px solid #ddd;
            border-radius: 15px;
        }

            .pager li > a:hover,
            .pager li > a:focus {
                text-decoration: none;
                background-color: #eee;
            }

    .pager .next > a,
    .pager .next > span {
        float: right;
    }

    .pager .previous > a,
    .pager .previous > span {
        float: left;
    }

    .pager .disabled > a,
    .pager .disabled > a:hover,
    .pager .disabled > a:focus,
    .pager .disabled > span {
        color: #777;
        cursor: not-allowed;
        background-color: #fff;
    }

.label {
    display: inline;
    padding: .2em .6em .3em;
    font-size: 75%;
    font-weight: bold;
    line-height: 1;
    color: #fff;
    text-align: center;
    white-space: nowrap;
    vertical-align: baseline;
    border-radius: .25em;
}

a.label:hover,
a.label:focus {
    color: #fff;
    text-decoration: none;
    cursor: pointer;
}

.label:empty {
    display: none;
}

.btn .label {
    position: relative;
    top: -1px;
}

.label-default {
    background-color: #333;
}

    .label-default[href]:hover,
    .label-default[href]:focus {
        background-color: #5e5e5e;
    }

.label-primary {
    background-color: #3f51b5;
    background-color: var(--primary);
}

    .label-primary[href]:hover,
    .label-primary[href]:focus {
        background-color: #3071a9;
    }

.label-success {
    background-color: #4cd137;
}

    .label-success[href]:hover,
    .label-success[href]:focus {
        background-color: #449d44;
    }

.label-info {
    background-color: #5bc0de;
}

    .label-info[href]:hover,
    .label-info[href]:focus {
        background-color: #31b0d5;
    }

.label-warning {
    background-color: #FFC107;
    color: black;
}

    .label-warning[href]:hover,
    .label-warning[href]:focus {
        background-color: #ec971f;
    }

.label-danger {
    background-color: #EA2027;
}

    .label-danger[href]:hover,
    .label-danger[href]:focus {
        background-color: #c9302c;
    }

.label-template {
    background-color: #9c88ff;
    color: white;
}

.badge {
    display: inline-block;
    min-width: 10px;
    padding: 3px 7px;
    font-size: 12px;
    font-weight: bold;
    line-height: 1;
    color: #fff;
    text-align: center;
    white-space: nowrap;
    vertical-align: baseline;
    background-color: #777;
    border-radius: 10px;
}

    .badge:empty {
        display: none;
    }

.btn .badge {
    position: relative;
    top: -1px;
}

.btn-xs .badge {
    top: 0;
    padding: 1px 5px;
}

a.badge:hover,
a.badge:focus {
    color: #fff;
    text-decoration: none;
    cursor: pointer;
}

a.list-group-item.active > .badge,
.nav-pills > .active > a > .badge {
    color: #3f51b5;
    color: var(--primary);
    background-color: #fff;
}

.nav-pills > li > a > .badge {
    margin-left: 3px;
}

.jumbotron {
    padding: 30px;
    margin-bottom: 30px;
    color: inherit;
    background-color: #eee;
}

    .jumbotron h1,
    .jumbotron .h1 {
        color: inherit;
    }

    .jumbotron p {
        margin-bottom: 15px;
        font-size: 21px;
        font-weight: 200;
    }

    .jumbotron > hr {
        border-top-color: #d5d5d5;
    }

.container .jumbotron {
    border-radius: 6px;
}

.jumbotron .container {
    max-width: 100%;
}

@media screen and (min-width: 768px) {
    .jumbotron {
        padding-top: 48px;
        padding-bottom: 48px;
    }

    .container .jumbotron {
        padding-right: 60px;
        padding-left: 60px;
    }

    .jumbotron h1,
    .jumbotron .h1 {
        font-size: 63px;
    }
}

.thumbnail {
    display: block;
    padding: 4px;
    margin-bottom: 20px;
    line-height: 1.42857143;
    background-color: #fff;
    border: 1px solid #ddd;
    border-radius: 4px;
    -webkit-transition: all .2s ease-in-out;
    -o-transition: all .2s ease-in-out;
    transition: all .2s ease-in-out;
}

    .thumbnail > img,
    .thumbnail a > img {
        margin-right: auto;
        margin-left: auto;
    }

a.thumbnail:hover,
a.thumbnail:focus,
a.thumbnail.active {
    border-color: #3f51b5;
    border-color: var(--primary);
}

.thumbnail .caption {
    padding: 9px;
    color: #333;
}

.alert {
    padding: 15px;
    margin-bottom: 20px;
    border: 1px solid transparent;
    border-radius: 4px;
}

    .alert h4 {
        margin-top: 0;
        color: inherit;
    }

    .alert .alert-link {
        font-weight: bold;
    }

    .alert > p,
    .alert > ul {
        margin-bottom: 0;
    }

        .alert > p + p {
            margin-top: 5px;
        }

.alert-dismissable,
.alert-dismissible {
    padding-right: 35px;
}

    .alert-dismissable .close,
    .alert-dismissible .close {
        position: relative;
        top: -2px;
        right: -21px;
        color: inherit;
    }

.alert-success {
    color: #3c763d;
    background-color: #dff0d8;
    border-color: #d6e9c6;
}

    .alert-success hr {
        border-top-color: #c9e2b3;
    }

    .alert-success .alert-link {
        color: #2b542c;
    }

.alert-info {
    color: #31708f;
    background-color: #d9edf7;
    border-color: #bce8f1;
}

    .alert-info hr {
        border-top-color: #a6e1ec;
    }

    .alert-info .alert-link {
        color: #245269;
    }

.alert-warning {
    color: #8a6d3b;
    background-color: #fcf8e3;
    border-color: #faebcc;
}

    .alert-warning hr {
        border-top-color: #f7e1b5;
    }

    .alert-warning .alert-link {
        color: #66512c;
    }

.alert-danger {
    color: #a94442;
    background-color: #f2dede;
    border-color: #ebccd1;
}

    .alert-danger hr {
        border-top-color: #e4b9c0;
    }

    .alert-danger .alert-link {
        color: #843534;
    }

@-webkit-keyframes progress-bar-stripes {
    from {
        background-position: 40px 0;
    }

    to {
        background-position: 0 0;
    }
}

@-o-keyframes progress-bar-stripes {
    from {
        background-position: 40px 0;
    }

    to {
        background-position: 0 0;
    }
}

@keyframes progress-bar-stripes {
    from {
        background-position: 40px 0;
    }

    to {
        background-position: 0 0;
    }
}

.progress {
    height: 20px;
    margin-bottom: 20px;
    overflow: hidden;
    background-color: #f5f5f5;
    border-radius: 4px;
    -webkit-box-shadow: inset 0 1px 2px rgba(0, 0, 0, .1);
    box-shadow: inset 0 1px 2px rgba(0, 0, 0, .1);
}

.progress-bar {
    float: left;
    width: 0;
    height: 100%;
    font-size: 12px;
    line-height: 20px;
    color: #fff;
    text-align: center;
    background-color: #3f51b5;
    background-color: var(--primary);
    -webkit-box-shadow: inset 0 -1px 0 rgba(0, 0, 0, .15);
    box-shadow: inset 0 -1px 0 rgba(0, 0, 0, .15);
    -webkit-transition: width .6s ease;
    -o-transition: width .6s ease;
    transition: width .6s ease;
}

.progress-striped .progress-bar,
.progress-bar-striped {
    background-image: -webkit-linear-gradient(45deg, rgba(255, 255, 255, .15) 25%, transparent 25%, transparent 50%, rgba(255, 255, 255, .15) 50%, rgba(255, 255, 255, .15) 75%, transparent 75%, transparent);
    background-image: -o-linear-gradient(45deg, rgba(255, 255, 255, .15) 25%, transparent 25%, transparent 50%, rgba(255, 255, 255, .15) 50%, rgba(255, 255, 255, .15) 75%, transparent 75%, transparent);
    background-image: linear-gradient(45deg, rgba(255, 255, 255, .15) 25%, transparent 25%, transparent 50%, rgba(255, 255, 255, .15) 50%, rgba(255, 255, 255, .15) 75%, transparent 75%, transparent);
    -webkit-background-size: 40px 40px;
    background-size: 40px 40px;
}

.progress.active .progress-bar,
.progress-bar.active {
    -webkit-animation: progress-bar-stripes 2s linear infinite;
    -o-animation: progress-bar-stripes 2s linear infinite;
    animation: progress-bar-stripes 2s linear infinite;
}

.progress-bar[aria-valuenow="1"],
.progress-bar[aria-valuenow="2"] {
    min-width: 30px;
}

.progress-bar[aria-valuenow="0"] {
    min-width: 30px;
    color: #777;
    background-color: transparent;
    background-image: none;
    -webkit-box-shadow: none;
    box-shadow: none;
}

.progress-bar-success {
    background-color: #5cb85c;
}

.progress-striped .progress-bar-success {
    background-image: -webkit-linear-gradient(45deg, rgba(255, 255, 255, .15) 25%, transparent 25%, transparent 50%, rgba(255, 255, 255, .15) 50%, rgba(255, 255, 255, .15) 75%, transparent 75%, transparent);
    background-image: -o-linear-gradient(45deg, rgba(255, 255, 255, .15) 25%, transparent 25%, transparent 50%, rgba(255, 255, 255, .15) 50%, rgba(255, 255, 255, .15) 75%, transparent 75%, transparent);
    background-image: linear-gradient(45deg, rgba(255, 255, 255, .15) 25%, transparent 25%, transparent 50%, rgba(255, 255, 255, .15) 50%, rgba(255, 255, 255, .15) 75%, transparent 75%, transparent);
}

.progress-bar-info {
    background-color: #5bc0de;
}

.progress-striped .progress-bar-info {
    background-image: -webkit-linear-gradient(45deg, rgba(255, 255, 255, .15) 25%, transparent 25%, transparent 50%, rgba(255, 255, 255, .15) 50%, rgba(255, 255, 255, .15) 75%, transparent 75%, transparent);
    background-image: -o-linear-gradient(45deg, rgba(255, 255, 255, .15) 25%, transparent 25%, transparent 50%, rgba(255, 255, 255, .15) 50%, rgba(255, 255, 255, .15) 75%, transparent 75%, transparent);
    background-image: linear-gradient(45deg, rgba(255, 255, 255, .15) 25%, transparent 25%, transparent 50%, rgba(255, 255, 255, .15) 50%, rgba(255, 255, 255, .15) 75%, transparent 75%, transparent);
}

.progress-bar-warning {
    background-color: #f0ad4e;
}

.progress-striped .progress-bar-warning {
    background-image: -webkit-linear-gradient(45deg, rgba(255, 255, 255, .15) 25%, transparent 25%, transparent 50%, rgba(255, 255, 255, .15) 50%, rgba(255, 255, 255, .15) 75%, transparent 75%, transparent);
    background-image: -o-linear-gradient(45deg, rgba(255, 255, 255, .15) 25%, transparent 25%, transparent 50%, rgba(255, 255, 255, .15) 50%, rgba(255, 255, 255, .15) 75%, transparent 75%, transparent);
    background-image: linear-gradient(45deg, rgba(255, 255, 255, .15) 25%, transparent 25%, transparent 50%, rgba(255, 255, 255, .15) 50%, rgba(255, 255, 255, .15) 75%, transparent 75%, transparent);
}

.progress-bar-danger {
    background-color: #d9534f;
}

.progress-striped .progress-bar-danger {
    background-image: -webkit-linear-gradient(45deg, rgba(255, 255, 255, .15) 25%, transparent 25%, transparent 50%, rgba(255, 255, 255, .15) 50%, rgba(255, 255, 255, .15) 75%, transparent 75%, transparent);
    background-image: -o-linear-gradient(45deg, rgba(255, 255, 255, .15) 25%, transparent 25%, transparent 50%, rgba(255, 255, 255, .15) 50%, rgba(255, 255, 255, .15) 75%, transparent 75%, transparent);
    background-image: linear-gradient(45deg, rgba(255, 255, 255, .15) 25%, transparent 25%, transparent 50%, rgba(255, 255, 255, .15) 50%, rgba(255, 255, 255, .15) 75%, transparent 75%, transparent);
}

.media,
.media-body {
    overflow: hidden;
    zoom: 1;
}

    .media,
    .media .media {
        margin-top: 15px;
    }

        .media:first-child {
            margin-top: 0;
        }

.media-object {
    display: block;
}

.media-heading {
    margin: 0 0 5px;
}

.media > .pull-left {
    margin-right: 10px;
}

.media > .pull-right {
    margin-left: 10px;
}

.media-list {
    padding-left: 0;
    list-style: none;
}

.list-group {
    padding-left: 0;
    margin-bottom: 20px;
}

.list-group-item {
    position: relative;
    display: block;
    padding: 10px 15px;
    margin-bottom: -1px;
    background-color: #fff;
    border: 1px solid #ddd;
}

    .list-group-item:first-child {
        border-top-left-radius: 4px;
        border-top-right-radius: 4px;
    }

    .list-group-item:last-child {
        margin-bottom: 0;
        border-bottom-right-radius: 4px;
        border-bottom-left-radius: 4px;
    }

    .list-group-item > .badge {
        float: right;
    }

        .list-group-item > .badge + .badge {
            margin-right: 5px;
        }

a.list-group-item {
    color: #555;
}

    a.list-group-item .list-group-item-heading {
        color: #333;
    }

    a.list-group-item:hover,
    a.list-group-item:focus {
        color: #555;
        text-decoration: none;
        background-color: #f5f5f5;
    }

.list-group-item.disabled,
.list-group-item.disabled:hover,
.list-group-item.disabled:focus {
    color: #777;
    background-color: #eee;
}

    .list-group-item.disabled .list-group-item-heading,
    .list-group-item.disabled:hover .list-group-item-heading,
    .list-group-item.disabled:focus .list-group-item-heading {
        color: inherit;
    }

    .list-group-item.disabled .list-group-item-text,
    .list-group-item.disabled:hover .list-group-item-text,
    .list-group-item.disabled:focus .list-group-item-text {
        color: #777;
    }

.list-group-item.active,
.list-group-item.active:hover,
.list-group-item.active:focus {
    z-index: 2;
    color: #fff;
    background-color: #3f51b5;
    background-color: var(--primary);
    border-color: #3f51b5;
    border-color: var(--primary);
}

    .list-group-item.active .list-group-item-heading,
    .list-group-item.active:hover .list-group-item-heading,
    .list-group-item.active:focus .list-group-item-heading,
    .list-group-item.active .list-group-item-heading > small,
    .list-group-item.active:hover .list-group-item-heading > small,
    .list-group-item.active:focus .list-group-item-heading > small,
    .list-group-item.active .list-group-item-heading > .small,
    .list-group-item.active:hover .list-group-item-heading > .small,
    .list-group-item.active:focus .list-group-item-heading > .small {
        color: inherit;
    }

    .list-group-item.active .list-group-item-text,
    .list-group-item.active:hover .list-group-item-text,
    .list-group-item.active:focus .list-group-item-text {
        color: #e1edf7;
    }

.list-group-item-success {
    color: #3c763d;
    background-color: #dff0d8;
}

a.list-group-item-success {
    color: #3c763d;
}

    a.list-group-item-success .list-group-item-heading {
        color: inherit;
    }

    a.list-group-item-success:hover,
    a.list-group-item-success:focus {
        color: #3c763d;
        background-color: #d0e9c6;
    }

    a.list-group-item-success.active,
    a.list-group-item-success.active:hover,
    a.list-group-item-success.active:focus {
        color: #fff;
        background-color: #3c763d;
        border-color: #3c763d;
    }

.list-group-item-info {
    color: #31708f;
    background-color: #d9edf7;
}

a.list-group-item-info {
    color: #31708f;
}

    a.list-group-item-info .list-group-item-heading {
        color: inherit;
    }

    a.list-group-item-info:hover,
    a.list-group-item-info:focus {
        color: #31708f;
        background-color: #c4e3f3;
    }

    a.list-group-item-info.active,
    a.list-group-item-info.active:hover,
    a.list-group-item-info.active:focus {
        color: #fff;
        background-color: #31708f;
        border-color: #31708f;
    }

.list-group-item-warning {
    color: #8a6d3b;
    background-color: #fcf8e3;
}

a.list-group-item-warning {
    color: #8a6d3b;
}

    a.list-group-item-warning .list-group-item-heading {
        color: inherit;
    }

    a.list-group-item-warning:hover,
    a.list-group-item-warning:focus {
        color: #8a6d3b;
        background-color: #faf2cc;
    }

    a.list-group-item-warning.active,
    a.list-group-item-warning.active:hover,
    a.list-group-item-warning.active:focus {
        color: #fff;
        background-color: #8a6d3b;
        border-color: #8a6d3b;
    }

.list-group-item-danger {
    color: #a94442;
    background-color: #f2dede;
}

a.list-group-item-danger {
    color: #a94442;
}

    a.list-group-item-danger .list-group-item-heading {
        color: inherit;
    }

    a.list-group-item-danger:hover,
    a.list-group-item-danger:focus {
        color: #a94442;
        background-color: #ebcccc;
    }

    a.list-group-item-danger.active,
    a.list-group-item-danger.active:hover,
    a.list-group-item-danger.active:focus {
        color: #fff;
        background-color: #a94442;
        border-color: #a94442;
    }

.list-group-item-heading {
    margin-top: 0;
    margin-bottom: 5px;
}

.list-group-item-text {
    margin-bottom: 0;
    line-height: 1.3;
}

.panel {
    margin-bottom: 20px;
    background-color: #fff;
    border: 1px solid transparent;
    border-radius: 4px;
    -webkit-box-shadow: 0 1px 1px rgba(0, 0, 0, .05);
    box-shadow: 0 1px 1px rgba(0, 0, 0, .05);
}

.panel-body {
    padding: 15px;
}

.panel-heading {
    /*padding: 10px 15px;*/
    padding: 5px 5px;
    border-bottom: 1px solid transparent;
    border-top-left-radius: 3px;
    border-top-right-radius: 3px;
}

    .panel-heading > .dropdown .dropdown-toggle {
        color: inherit;
    }

.panel-title {
    margin-top: 0;
    margin-bottom: 0;
    font-size: 16px;
    color: inherit;
}

    .panel-title > a {
        color: inherit;
    }

.panel-footer {
    padding: 10px 15px;
    background-color: #f5f5f5;
    border-top: 1px solid #ddd;
    border-bottom-right-radius: 3px;
    border-bottom-left-radius: 3px;
}

.panel > .list-group {
    margin-bottom: 0;
}

    .panel > .list-group .list-group-item {
        border-width: 1px 0;
        border-radius: 0;
    }

    .panel > .list-group:first-child .list-group-item:first-child {
        border-top: 0;
        border-top-left-radius: 3px;
        border-top-right-radius: 3px;
    }

    .panel > .list-group:last-child .list-group-item:last-child {
        border-bottom: 0;
        border-bottom-right-radius: 3px;
        border-bottom-left-radius: 3px;
    }

.panel-heading + .list-group .list-group-item:first-child {
    border-top-width: 0;
}

.list-group + .panel-footer {
    border-top-width: 0;
}

.panel > .table,
.panel > .table-responsive > .table,
.panel > .panel-collapse > .table {
    margin-bottom: 0;
}

    .panel > .table:first-child,
    .panel > .table-responsive:first-child > .table:first-child {
        border-top-left-radius: 3px;
        border-top-right-radius: 3px;
    }

        .panel > .table:first-child > thead:first-child > tr:first-child td:first-child,
        .panel > .table-responsive:first-child > .table:first-child > thead:first-child > tr:first-child td:first-child,
        .panel > .table:first-child > tbody:first-child > tr:first-child td:first-child,
        .panel > .table-responsive:first-child > .table:first-child > tbody:first-child > tr:first-child td:first-child,
        .panel > .table:first-child > thead:first-child > tr:first-child th:first-child,
        .panel > .table-responsive:first-child > .table:first-child > thead:first-child > tr:first-child th:first-child,
        .panel > .table:first-child > tbody:first-child > tr:first-child th:first-child,
        .panel > .table-responsive:first-child > .table:first-child > tbody:first-child > tr:first-child th:first-child {
            border-top-left-radius: 3px;
        }

        .panel > .table:first-child > thead:first-child > tr:first-child td:last-child,
        .panel > .table-responsive:first-child > .table:first-child > thead:first-child > tr:first-child td:last-child,
        .panel > .table:first-child > tbody:first-child > tr:first-child td:last-child,
        .panel > .table-responsive:first-child > .table:first-child > tbody:first-child > tr:first-child td:last-child,
        .panel > .table:first-child > thead:first-child > tr:first-child th:last-child,
        .panel > .table-responsive:first-child > .table:first-child > thead:first-child > tr:first-child th:last-child,
        .panel > .table:first-child > tbody:first-child > tr:first-child th:last-child,
        .panel > .table-responsive:first-child > .table:first-child > tbody:first-child > tr:first-child th:last-child {
            border-top-right-radius: 3px;
        }

    .panel > .table:last-child,
    .panel > .table-responsive:last-child > .table:last-child {
        border-bottom-right-radius: 3px;
        border-bottom-left-radius: 3px;
    }

        .panel > .table:last-child > tbody:last-child > tr:last-child td:first-child,
        .panel > .table-responsive:last-child > .table:last-child > tbody:last-child > tr:last-child td:first-child,
        .panel > .table:last-child > tfoot:last-child > tr:last-child td:first-child,
        .panel > .table-responsive:last-child > .table:last-child > tfoot:last-child > tr:last-child td:first-child,
        .panel > .table:last-child > tbody:last-child > tr:last-child th:first-child,
        .panel > .table-responsive:last-child > .table:last-child > tbody:last-child > tr:last-child th:first-child,
        .panel > .table:last-child > tfoot:last-child > tr:last-child th:first-child,
        .panel > .table-responsive:last-child > .table:last-child > tfoot:last-child > tr:last-child th:first-child {
            border-bottom-left-radius: 3px;
        }

        .panel > .table:last-child > tbody:last-child > tr:last-child td:last-child,
        .panel > .table-responsive:last-child > .table:last-child > tbody:last-child > tr:last-child td:last-child,
        .panel > .table:last-child > tfoot:last-child > tr:last-child td:last-child,
        .panel > .table-responsive:last-child > .table:last-child > tfoot:last-child > tr:last-child td:last-child,
        .panel > .table:last-child > tbody:last-child > tr:last-child th:last-child,
        .panel > .table-responsive:last-child > .table:last-child > tbody:last-child > tr:last-child th:last-child,
        .panel > .table:last-child > tfoot:last-child > tr:last-child th:last-child,
        .panel > .table-responsive:last-child > .table:last-child > tfoot:last-child > tr:last-child th:last-child {
            border-bottom-right-radius: 3px;
        }

.panel > .panel-body + .table,
.panel > .panel-body + .table-responsive {
    border-top: 1px solid #ddd;
}

.panel > .table > tbody:first-child > tr:first-child th,
.panel > .table > tbody:first-child > tr:first-child td {
    border-top: 0;
}

.panel > .table-bordered,
.panel > .table-responsive > .table-bordered {
    border: 0;
}

    .panel > .table-bordered > thead > tr > th:first-child,
    .panel > .table-responsive > .table-bordered > thead > tr > th:first-child,
    .panel > .table-bordered > tbody > tr > th:first-child,
    .panel > .table-responsive > .table-bordered > tbody > tr > th:first-child,
    .panel > .table-bordered > tfoot > tr > th:first-child,
    .panel > .table-responsive > .table-bordered > tfoot > tr > th:first-child,
    .panel > .table-bordered > thead > tr > td:first-child,
    .panel > .table-responsive > .table-bordered > thead > tr > td:first-child,
    .panel > .table-bordered > tbody > tr > td:first-child,
    .panel > .table-responsive > .table-bordered > tbody > tr > td:first-child,
    .panel > .table-bordered > tfoot > tr > td:first-child,
    .panel > .table-responsive > .table-bordered > tfoot > tr > td:first-child {
        border-left: 0;
    }

    .panel > .table-bordered > thead > tr > th:last-child,
    .panel > .table-responsive > .table-bordered > thead > tr > th:last-child,
    .panel > .table-bordered > tbody > tr > th:last-child,
    .panel > .table-responsive > .table-bordered > tbody > tr > th:last-child,
    .panel > .table-bordered > tfoot > tr > th:last-child,
    .panel > .table-responsive > .table-bordered > tfoot > tr > th:last-child,
    .panel > .table-bordered > thead > tr > td:last-child,
    .panel > .table-responsive > .table-bordered > thead > tr > td:last-child,
    .panel > .table-bordered > tbody > tr > td:last-child,
    .panel > .table-responsive > .table-bordered > tbody > tr > td:last-child,
    .panel > .table-bordered > tfoot > tr > td:last-child,
    .panel > .table-responsive > .table-bordered > tfoot > tr > td:last-child {
        border-right: 0;
    }

    .panel > .table-bordered > thead > tr:first-child > td,
    .panel > .table-responsive > .table-bordered > thead > tr:first-child > td,
    .panel > .table-bordered > tbody > tr:first-child > td,
    .panel > .table-responsive > .table-bordered > tbody > tr:first-child > td,
    .panel > .table-bordered > thead > tr:first-child > th,
    .panel > .table-responsive > .table-bordered > thead > tr:first-child > th,
    .panel > .table-bordered > tbody > tr:first-child > th,
    .panel > .table-responsive > .table-bordered > tbody > tr:first-child > th {
        border-bottom: 0;
    }

    .panel > .table-bordered > tbody > tr:last-child > td,
    .panel > .table-responsive > .table-bordered > tbody > tr:last-child > td,
    .panel > .table-bordered > tfoot > tr:last-child > td,
    .panel > .table-responsive > .table-bordered > tfoot > tr:last-child > td,
    .panel > .table-bordered > tbody > tr:last-child > th,
    .panel > .table-responsive > .table-bordered > tbody > tr:last-child > th,
    .panel > .table-bordered > tfoot > tr:last-child > th,
    .panel > .table-responsive > .table-bordered > tfoot > tr:last-child > th {
        border-bottom: 0;
    }

.panel > .table-responsive {
    margin-bottom: 0;
    border: 0;
}

.panel-group {
    margin-bottom: 20px;
}

    .panel-group .panel {
        margin-bottom: 0;
        border-radius: 4px;
    }

        .panel-group .panel + .panel {
            margin-top: 5px;
        }

    .panel-group .panel-heading {
        border-bottom: 0;
    }

        .panel-group .panel-heading + .panel-collapse > .panel-body {
            border-top: 1px solid #ddd;
        }

    .panel-group .panel-footer {
        border-top: 0;
    }

        .panel-group .panel-footer + .panel-collapse .panel-body {
            border-bottom: 1px solid #ddd;
        }

.panel-default {
    border-color: #ddd;
}

    .panel-default > .panel-heading {
        color: #333;
        background-color: #f5f5f5;
        border-color: #ddd;
    }

        .panel-default > .panel-heading + .panel-collapse > .panel-body {
            border-top-color: #ddd;
        }

        .panel-default > .panel-heading .badge {
            color: #f5f5f5;
            background-color: #333;
        }

    .panel-default > .panel-footer + .panel-collapse > .panel-body {
        border-bottom-color: #ddd;
    }

.panel-primary {
    border-color: #3f51b5;
    border-color: var(--primary);
}

    .panel-primary > .panel-heading {
        color: #fff;
        background-color: #3f51b5;
        background-color: var(--primary);
        border-color: #3f51b5;
        border-color: var(--primary);
    }

        .panel-primary > .panel-heading + .panel-collapse > .panel-body {
            border-top-color: #3f51b5;
            border-top-color: var(--primary);
        }

        .panel-primary > .panel-heading .badge {
            color: #3f51b5;
            color: var(--primary);
            background-color: #fff;
        }

    .panel-primary > .panel-footer + .panel-collapse > .panel-body {
        border-bottom-color: #3f51b5;
        border-bottom-color: var(--primary);
    }

.panel-success {
    border-color: #d6e9c6;
}

    .panel-success > .panel-heading {
        color: #3c763d;
        background-color: #dff0d8;
        border-color: #d6e9c6;
    }

        .panel-success > .panel-heading + .panel-collapse > .panel-body {
            border-top-color: #d6e9c6;
        }

        .panel-success > .panel-heading .badge {
            color: #dff0d8;
            background-color: #3c763d;
        }

    .panel-success > .panel-footer + .panel-collapse > .panel-body {
        border-bottom-color: #d6e9c6;
    }

.panel-info {
    border-color: #bce8f1;
}

    .panel-info > .panel-heading {
        color: #31708f;
        background-color: #d9edf7;
        border-color: #bce8f1;
    }

        .panel-info > .panel-heading + .panel-collapse > .panel-body {
            border-top-color: #bce8f1;
        }

        .panel-info > .panel-heading .badge {
            color: #d9edf7;
            background-color: #31708f;
        }

    .panel-info > .panel-footer + .panel-collapse > .panel-body {
        border-bottom-color: #bce8f1;
    }

.panel-warning {
    border-color: #faebcc;
}

    .panel-warning > .panel-heading {
        color: #8a6d3b;
        background-color: #fcf8e3;
        border-color: #faebcc;
    }

        .panel-warning > .panel-heading + .panel-collapse > .panel-body {
            border-top-color: #faebcc;
        }

        .panel-warning > .panel-heading .badge {
            color: #fcf8e3;
            background-color: #8a6d3b;
        }

    .panel-warning > .panel-footer + .panel-collapse > .panel-body {
        border-bottom-color: #faebcc;
    }

.panel-danger {
    border-color: #ebccd1;
}

    .panel-danger > .panel-heading {
        color: #a94442;
        background-color: #f2dede;
        border-color: #ebccd1;
    }

        .panel-danger > .panel-heading + .panel-collapse > .panel-body {
            border-top-color: #ebccd1;
        }

        .panel-danger > .panel-heading .badge {
            color: #f2dede;
            background-color: #a94442;
        }

    .panel-danger > .panel-footer + .panel-collapse > .panel-body {
        border-bottom-color: #ebccd1;
    }

.embed-responsive {
    position: relative;
    display: block;
    height: 0;
    padding: 0;
    overflow: hidden;
}

    .embed-responsive .embed-responsive-item,
    .embed-responsive iframe,
    .embed-responsive embed,
    .embed-responsive object {
        position: absolute;
        top: 0;
        bottom: 0;
        left: 0;
        width: 100%;
        height: 100%;
        border: 0;
    }

    .embed-responsive.embed-responsive-16by9 {
        padding-bottom: 56.25%;
    }

    .embed-responsive.embed-responsive-4by3 {
        padding-bottom: 75%;
    }

.well {
    min-height: 20px;
    padding: 19px;
    margin-bottom: 20px;
    background-color: #f5f5f5;
    border: 1px solid #e3e3e3;
    border-radius: 4px;
    -webkit-box-shadow: inset 0 1px 1px rgba(0, 0, 0, .05);
    box-shadow: inset 0 1px 1px rgba(0, 0, 0, .05);
}

    .well blockquote {
        border-color: #ddd;
        border-color: rgba(0, 0, 0, .15);
    }

.well-lg {
    padding: 24px;
    border-radius: 6px;
}

.well-sm {
    padding: 9px;
    border-radius: 3px;
}

.close {
    float: right;
    font-size: 21px;
    font-weight: bold;
    line-height: 1;
    color: #000;
    text-shadow: 0 1px 0 #fff;
    filter: alpha(opacity=20);
    opacity: .2;
}

    .close:hover,
    .close:focus {
        color: #000;
        text-decoration: none;
        cursor: pointer;
        filter: alpha(opacity=50);
        opacity: .5;
    }

button.close {
    -webkit-appearance: none;
    padding: 0;
    cursor: pointer;
    background: transparent;
    border: 0;
}

.modal-open {
    overflow: hidden;
}

.modal {
    position: fixed;
    top: 0;
    right: 0;
    bottom: 0;
    left: 0;
    z-index: 1050;
    display: none;
    overflow: hidden;
    -webkit-overflow-scrolling: touch;
    outline: 0;
}

    .modal.fade .modal-dialog {
        -webkit-transition: -webkit-transform .3s ease-out;
        -o-transition: -o-transform .3s ease-out;
        transition: transform .3s ease-out;
        -webkit-transform: translate3d(0, -25%, 0);
        -o-transform: translate3d(0, -25%, 0);
        transform: translate3d(0, -25%, 0);
    }

    .modal.in .modal-dialog {
        -webkit-transform: translate3d(0, 0, 0);
        -o-transform: translate3d(0, 0, 0);
        transform: translate3d(0, 0, 0);
    }

.modal-open .modal {
    overflow-x: hidden;
    overflow-y: auto;
}

.modal-dialog {
    position: relative;
    width: auto;
    margin: 10px;
}

.modal-content {
    position: relative;
    background-color: #fff;
    -webkit-background-clip: padding-box;
    background-clip: padding-box;
    border: 1px solid #999;
    border: 1px solid rgba(0, 0, 0, .2);
    border-radius: 6px;
    outline: 0;
    -webkit-box-shadow: 0 3px 9px rgba(0, 0, 0, .5);
    box-shadow: 0 3px 9px rgba(0, 0, 0, .5);
}

.modal-backdrop {
    position: fixed;
    top: 0;
    right: 0;
    bottom: 0;
    left: 0;
    z-index: 1040;
    background-color: #000;
}

    .modal-backdrop.fade {
        filter: alpha(opacity=0);
        opacity: 0;
    }

    .modal-backdrop.in {
        filter: alpha(opacity=50);
        opacity: .5;
    }

.modal-header {
    min-height: 16.42857143px;
    padding: 15px;
    border-bottom: 1px solid #e5e5e5;
}

    .modal-header .close {
        margin-top: -2px;
    }

.modal-title {
    margin: 0;
    line-height: 1.42857143;
}

.modal-body {
    position: relative;
    padding: 15px;
}

.modal-footer {
    padding: 15px;
    text-align: right;
    border-top: 1px solid #e5e5e5;
}

    .modal-footer .btn + .btn {
        margin-bottom: 0;
        margin-left: 5px;
    }

    .modal-footer .btn-group .btn + .btn {
        margin-left: -1px;
    }

    .modal-footer .btn-block + .btn-block {
        margin-left: 0;
    }

.modal-scrollbar-measure {
    position: absolute;
    top: -9999px;
    width: 50px;
    height: 50px;
    overflow: scroll;
}

@media (min-width: 768px) {
    .modal-dialog {
        width: 600px;
        margin: 30px auto;
    }

    .modal-content {
        -webkit-box-shadow: 0 5px 15px rgba(0, 0, 0, .5);
        box-shadow: 0 5px 15px rgba(0, 0, 0, .5);
    }

    .modal-sm {
        width: 300px;
    }
}

@media (min-width: 992px) {
    .modal-lg {
        width: 900px;
    }
}

.tooltip {
    position: absolute;
    z-index: 1070;
    display: block;
    font-size: 12px;
    line-height: 1.4;
    visibility: visible;
    filter: alpha(opacity=0);
    opacity: 0;
}

    .tooltip.in {
        filter: alpha(opacity=90);
        opacity: .9;
    }

    .tooltip.top {
        padding: 5px 0;
        margin-top: -3px;
    }

    .tooltip.right {
        padding: 0 5px;
        margin-left: 3px;
    }

    .tooltip.bottom {
        padding: 5px 0;
        margin-top: 3px;
    }

    .tooltip.left {
        padding: 0 5px;
        margin-left: -3px;
    }

.tooltip-inner {
    max-width: 200px;
    padding: 3px 8px;
    color: #fff;
    text-align: center;
    text-decoration: none;
    background-color: #000;
    border-radius: 4px;
}

.tooltip-arrow {
    position: absolute;
    width: 0;
    height: 0;
    border-color: transparent;
    border-style: solid;
}

.tooltip.top .tooltip-arrow {
    bottom: 0;
    left: 50%;
    margin-left: -5px;
    border-width: 5px 5px 0;
    border-top-color: #000;
}

.tooltip.top-left .tooltip-arrow {
    bottom: 0;
    left: 5px;
    border-width: 5px 5px 0;
    border-top-color: #000;
}

.tooltip.top-right .tooltip-arrow {
    right: 5px;
    bottom: 0;
    border-width: 5px 5px 0;
    border-top-color: #000;
}

.tooltip.right .tooltip-arrow {
    top: 50%;
    left: 0;
    margin-top: -5px;
    border-width: 5px 5px 5px 0;
    border-right-color: #000;
}

.tooltip.left .tooltip-arrow {
    top: 50%;
    right: 0;
    margin-top: -5px;
    border-width: 5px 0 5px 5px;
    border-left-color: #000;
}

.tooltip.bottom .tooltip-arrow {
    top: 0;
    left: 50%;
    margin-left: -5px;
    border-width: 0 5px 5px;
    border-bottom-color: #000;
}

.tooltip.bottom-left .tooltip-arrow {
    top: 0;
    left: 5px;
    border-width: 0 5px 5px;
    border-bottom-color: #000;
}

.tooltip.bottom-right .tooltip-arrow {
    top: 0;
    right: 5px;
    border-width: 0 5px 5px;
    border-bottom-color: #000;
}

.popover {
    position: absolute;
    top: 0;
    left: 0;
    z-index: 1060;
    display: none;
    max-width: 276px;
    padding: 1px;
    text-align: left;
    white-space: normal;
    background-color: #fff;
    -webkit-background-clip: padding-box;
    background-clip: padding-box;
    border: 1px solid #ccc;
    border: 1px solid rgba(0, 0, 0, .2);
    border-radius: 6px;
    -webkit-box-shadow: 0 5px 10px rgba(0, 0, 0, .2);
    box-shadow: 0 5px 10px rgba(0, 0, 0, .2);
}

    .popover.top {
        margin-top: -10px;
    }

    .popover.right {
        margin-left: 10px;
    }

    .popover.bottom {
        margin-top: 10px;
    }

    .popover.left {
        margin-left: -10px;
    }

.popover-title {
    padding: 8px 14px;
    margin: 0;
    font-size: 14px;
    font-weight: normal;
    line-height: 18px;
    background-color: #f7f7f7;
    border-bottom: 1px solid #ebebeb;
    border-radius: 5px 5px 0 0;
}

.popover-content {
    padding: 9px 14px;
}

.popover > .arrow,
.popover > .arrow:after {
    position: absolute;
    display: block;
    width: 0;
    height: 0;
    border-color: transparent;
    border-style: solid;
}

.popover > .arrow {
    border-width: 11px;
}

    .popover > .arrow:after {
        content: "";
        border-width: 10px;
    }

.popover.top > .arrow {
    bottom: -11px;
    left: 50%;
    margin-left: -11px;
    border-top-color: #999;
    border-top-color: rgba(0, 0, 0, .25);
    border-bottom-width: 0;
}

    .popover.top > .arrow:after {
        bottom: 1px;
        margin-left: -10px;
        content: " ";
        border-top-color: #fff;
        border-bottom-width: 0;
    }

.popover.right > .arrow {
    top: 50%;
    left: -11px;
    margin-top: -11px;
    border-right-color: #999;
    border-right-color: rgba(0, 0, 0, .25);
    border-left-width: 0;
}

    .popover.right > .arrow:after {
        bottom: -10px;
        left: 1px;
        content: " ";
        border-right-color: #fff;
        border-left-width: 0;
    }

.popover.bottom > .arrow {
    top: -11px;
    left: 50%;
    margin-left: -11px;
    border-top-width: 0;
    border-bottom-color: #999;
    border-bottom-color: rgba(0, 0, 0, .25);
}

    .popover.bottom > .arrow:after {
        top: 1px;
        margin-left: -10px;
        content: " ";
        border-top-width: 0;
        border-bottom-color: #fff;
    }

.popover.left > .arrow {
    top: 50%;
    right: -11px;
    margin-top: -11px;
    border-right-width: 0;
    border-left-color: #999;
    border-left-color: rgba(0, 0, 0, .25);
}

    .popover.left > .arrow:after {
        right: 1px;
        bottom: -10px;
        content: " ";
        border-right-width: 0;
        border-left-color: #fff;
    }

.carousel {
    position: relative;
}

.carousel-inner {
    position: relative;
    width: 100%;
    overflow: hidden;
}

    .carousel-inner > .item {
        position: relative;
        display: none;
        -webkit-transition: .6s ease-in-out left;
        -o-transition: .6s ease-in-out left;
        transition: .6s ease-in-out left;
    }

        .carousel-inner > .item > img,
        .carousel-inner > .item > a > img {
            line-height: 1;
        }

    .carousel-inner > .active,
    .carousel-inner > .next,
    .carousel-inner > .prev {
        display: block;
    }

    .carousel-inner > .active {
        left: 0;
    }

    .carousel-inner > .next,
    .carousel-inner > .prev {
        position: absolute;
        top: 0;
        width: 100%;
    }

    .carousel-inner > .next {
        left: 100%;
    }

    .carousel-inner > .prev {
        left: -100%;
    }

        .carousel-inner > .next.left,
        .carousel-inner > .prev.right {
            left: 0;
        }

    .carousel-inner > .active.left {
        left: -100%;
    }

    .carousel-inner > .active.right {
        left: 100%;
    }

.carousel-control {
    position: absolute;
    top: 0;
    bottom: 0;
    left: 0;
    width: 15%;
    font-size: 20px;
    color: #fff;
    text-align: center;
    text-shadow: 0 1px 2px rgba(0, 0, 0, .6);
    filter: alpha(opacity=50);
    opacity: .5;
}

    .carousel-control.left {
        background-image: -webkit-linear-gradient(left, rgba(0, 0, 0, .5) 0%, rgba(0, 0, 0, .0001) 100%);
        background-image: -o-linear-gradient(left, rgba(0, 0, 0, .5) 0%, rgba(0, 0, 0, .0001) 100%);
        background-image: -webkit-gradient(linear, left top, right top, from(rgba(0, 0, 0, .5)), to(rgba(0, 0, 0, .0001)));
        background-image: linear-gradient(to right, rgba(0, 0, 0, .5) 0%, rgba(0, 0, 0, .0001) 100%);
        filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#80000000', endColorstr='#00000000', GradientType=1);
        background-repeat: repeat-x;
    }

    .carousel-control.right {
        right: 0;
        left: auto;
        background-image: -webkit-linear-gradient(left, rgba(0, 0, 0, .0001) 0%, rgba(0, 0, 0, .5) 100%);
        background-image: -o-linear-gradient(left, rgba(0, 0, 0, .0001) 0%, rgba(0, 0, 0, .5) 100%);
        background-image: -webkit-gradient(linear, left top, right top, from(rgba(0, 0, 0, .0001)), to(rgba(0, 0, 0, .5)));
        background-image: linear-gradient(to right, rgba(0, 0, 0, .0001) 0%, rgba(0, 0, 0, .5) 100%);
        filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#00000000', endColorstr='#80000000', GradientType=1);
        background-repeat: repeat-x;
    }

    .carousel-control:hover,
    .carousel-control:focus {
        color: #fff;
        text-decoration: none;
        filter: alpha(opacity=90);
        outline: 0;
        opacity: .9;
    }

    .carousel-control .icon-prev,
    .carousel-control .icon-next,
    .carousel-control .glyphicon-chevron-left,
    .carousel-control .glyphicon-chevron-right {
        position: absolute;
        top: 50%;
        z-index: 5;
        display: inline-block;
    }

    .carousel-control .icon-prev,
    .carousel-control .glyphicon-chevron-left {
        left: 50%;
        margin-left: -10px;
    }

    .carousel-control .icon-next,
    .carousel-control .glyphicon-chevron-right {
        right: 50%;
        margin-right: -10px;
    }

    .carousel-control .icon-prev,
    .carousel-control .icon-next {
        width: 20px;
        height: 20px;
        margin-top: -10px;
        font-family: serif;
    }

        .carousel-control .icon-prev:before {
            content: '\2039';
        }

        .carousel-control .icon-next:before {
            content: '\203a';
        }

.carousel-indicators {
    position: absolute;
    bottom: 10px;
    left: 50%;
    z-index: 15;
    width: 60%;
    padding-left: 0;
    margin-left: -30%;
    text-align: center;
    list-style: none;
}

    .carousel-indicators li {
        display: inline-block;
        width: 10px;
        height: 10px;
        margin: 1px;
        text-indent: -999px;
        cursor: pointer;
        background-color: #000 \9;
        background-color: rgba(0, 0, 0, 0);
        border: 1px solid #fff;
        border-radius: 10px;
    }

    .carousel-indicators .active {
        width: 12px;
        height: 12px;
        margin: 0;
        background-color: #fff;
    }

.carousel-caption {
    position: absolute;
    right: 15%;
    bottom: 20px;
    left: 15%;
    z-index: 10;
    padding-top: 20px;
    padding-bottom: 20px;
    color: #fff;
    text-align: center;
    text-shadow: 0 1px 2px rgba(0, 0, 0, .6);
}

    .carousel-caption .btn {
        text-shadow: none;
    }

@media screen and (min-width: 768px) {
    .carousel-control .glyphicon-chevron-left,
    .carousel-control .glyphicon-chevron-right,
    .carousel-control .icon-prev,
    .carousel-control .icon-next {
        width: 30px;
        height: 30px;
        margin-top: -15px;
        font-size: 30px;
    }

    .carousel-control .glyphicon-chevron-left,
    .carousel-control .icon-prev {
        margin-left: -15px;
    }

    .carousel-control .glyphicon-chevron-right,
    .carousel-control .icon-next {
        margin-right: -15px;
    }

    .carousel-caption {
        right: 20%;
        left: 20%;
        padding-bottom: 30px;
    }

    .carousel-indicators {
        bottom: 20px;
    }
}

.clearfix:before,
.clearfix:after,
.dl-horizontal dd:before,
.dl-horizontal dd:after,
.container:before,
.container:after,
.container-fluid:before,
.container-fluid:after,
.row:before,
.row:after,
.form-horizontal .form-group:before,
.form-horizontal .form-group:after,
.btn-toolbar:before,
.btn-toolbar:after,
.btn-group-vertical > .btn-group:before,
.btn-group-vertical > .btn-group:after,
.nav:before,
.nav:after,
.navbar:before,
.navbar:after,
.navbar-header:before,
.navbar-header:after,
.navbar-collapse:before,
.navbar-collapse:after,
.pager:before,
.pager:after,
.panel-body:before,
.panel-body:after,
.modal-footer:before,
.modal-footer:after {
    display: table;
    content: " ";
}

.clearfix:after,
.dl-horizontal dd:after,
.container:after,
.container-fluid:after,
.row:after,
.form-horizontal .form-group:after,
.btn-toolbar:after,
.btn-group-vertical > .btn-group:after,
.nav:after,
.navbar:after,
.navbar-header:after,
.navbar-collapse:after,
.pager:after,
.panel-body:after,
.modal-footer:after {
    clear: both;
}

.center-block {
    display: block;
    margin-right: auto;
    margin-left: auto;
}

.pull-right {
    float: right !important;
}

.pull-left {
    float: left !important;
}

.hide {
    display: none !important;
}

.show {
    display: block !important;
}

.invisible {
    visibility: hidden;
}

.text-hide {
    font: 0/0 a;
    color: transparent;
    text-shadow: none;
    background-color: transparent;
    border: 0;
}

.hidden {
    display: none !important;
    visibility: hidden !important;
}

.affix {
    position: fixed;
    -webkit-transform: translate3d(0, 0, 0);
    -o-transform: translate3d(0, 0, 0);
    transform: translate3d(0, 0, 0);
}

@-ms-viewport {
    width: device-width;
}

.visible-xs,
.visible-sm,
.visible-md,
.visible-lg {
    display: none !important;
}

.visible-xs-block,
.visible-xs-inline,
.visible-xs-inline-block,
.visible-sm-block,
.visible-sm-inline,
.visible-sm-inline-block,
.visible-md-block,
.visible-md-inline,
.visible-md-inline-block,
.visible-lg-block,
.visible-lg-inline,
.visible-lg-inline-block {
    display: none !important;
}

@media (max-width: 767px) {
    .visible-xs {
        display: block !important;
    }

    table.visible-xs {
        display: table;
    }

    tr.visible-xs {
        display: table-row !important;
    }

    th.visible-xs,
    td.visible-xs {
        display: table-cell !important;
    }
}

@media (max-width: 767px) {
    .visible-xs-block {
        display: block !important;
    }
}

@media (max-width: 767px) {
    .visible-xs-inline {
        display: inline !important;
    }
}

@media (max-width: 767px) {
    .visible-xs-inline-block {
        display: inline-block !important;
    }
}

@media (min-width: 768px) and (max-width: 991px) {
    .visible-sm {
        display: block !important;
    }

    table.visible-sm {
        display: table;
    }

    tr.visible-sm {
        display: table-row !important;
    }

    th.visible-sm,
    td.visible-sm {
        display: table-cell !important;
    }
}

@media (min-width: 768px) and (max-width: 991px) {
    .visible-sm-block {
        display: block !important;
    }
}

@media (min-width: 768px) and (max-width: 991px) {
    .visible-sm-inline {
        display: inline !important;
    }
}

@media (min-width: 768px) and (max-width: 991px) {
    .visible-sm-inline-block {
        display: inline-block !important;
    }
}

@media (min-width: 992px) and (max-width: 1199px) {
    .visible-md {
        display: block !important;
    }

    table.visible-md {
        display: table;
    }

    tr.visible-md {
        display: table-row !important;
    }

    th.visible-md,
    td.visible-md {
        display: table-cell !important;
    }
}

@media (min-width: 992px) and (max-width: 1199px) {
    .visible-md-block {
        display: block !important;
    }
}

@media (min-width: 992px) and (max-width: 1199px) {
    .visible-md-inline {
        display: inline !important;
    }
}

@media (min-width: 992px) and (max-width: 1199px) {
    .visible-md-inline-block {
        display: inline-block !important;
    }
}

@media (min-width: 1200px) {
    .visible-lg {
        display: block !important;
    }

    table.visible-lg {
        display: table;
    }

    tr.visible-lg {
        display: table-row !important;
    }

    th.visible-lg,
    td.visible-lg {
        display: table-cell !important;
    }
}

@media (min-width: 1200px) {
    .visible-lg-block {
        display: block !important;
    }
}

@media (min-width: 1200px) {
    .visible-lg-inline {
        display: inline !important;
    }
}

@media (min-width: 1200px) {
    .visible-lg-inline-block {
        display: inline-block !important;
    }
}

@media (max-width: 767px) {
    .hidden-xs {
        display: none !important;
    }
}

@media (min-width: 768px) and (max-width: 991px) {
    .hidden-sm {
        display: none !important;
    }
}

@media (min-width: 992px) and (max-width: 1199px) {
    .hidden-md {
        display: none !important;
    }
}

@media (min-width: 1200px) {
    .hidden-lg {
        display: none !important;
    }
}

.visible-print {
    display: none !important;
}

@media print {
    .visible-print {
        display: block !important;
    }

    table.visible-print {
        display: table;
    }

    tr.visible-print {
        display: table-row !important;
    }

    th.visible-print,
    td.visible-print {
        display: table-cell !important;
    }
}

.visible-print-block {
    display: none !important;
}

@media print {
    .visible-print-block {
        display: block !important;
    }
}

.visible-print-inline {
    display: none !important;
}

@media print {
    .visible-print-inline {
        display: inline !important;
    }
}

.visible-print-inline-block {
    display: none !important;
}

@media print {
    .visible-print-inline-block {
        display: inline-block !important;
    }
}

@media print {
    .hidden-print {
        display: none !important;
    }
}

html {
    position: relative;
    min-height: 100%;
}

ng-quill-editor {
    display: block;
}

.ql-editor {
    min-height: 150px;
    border: solid 2px #ddd;
    border-radius: 4px;
    width: 100%;
}

.ng-image-gallery .ng-image-gallery-thumbnails .thumb {
    border-radius: 4px;
}

.ql-editor-preview {
    background: transparent;
    min-height: 10px;
    padding: initial;
    overflow: initial;
    border: none;
}

    .ql-editor > img, .ql-editor-preview img {
        max-width: 100%;
    }

.specialTextFullWidth {
    width: 100%;
    margin-bottom: 0px;
}

/* if a header is swithced on, it should be affixed to the top of the page
        should only show when there is no background image or header control on the page
        should only show when the document meta has header text - should really only be available on templates.
    */
.document-header {
    position: absolute;
    height: 35px;
    font-size: 0.8em;
    color: grey;
    top: 3px;
    border-bottom: solid 1px #eee;
    padding-top: 1px;
    padding-left: 50px;
    padding-right: 50px;
    left: 0;
    overflow: hidden
}

.document-footer {
    position: absolute;
    height: 30px;
    font-size: 0.8em;
    color: grey;
    bottom: 10px;
    border-top: solid 1px #eee;
    padding-bottom: 1px;
    padding-left: 50px;
    padding-right: 50px;
    left: 0;
    overflow: hidden;
}

#CostingTemplates {
    overflow-x: hidden;
    padding: 15px;
    min-height: 100vh;
    height: 100%;
}

#customerDetails {
    padding: 10px;
}


/* DATE CONTROL 
*/
.uib-day {
    padding: 3px;
}

.previewBarPadding {
    left: calc(10%);
}
/*@media (min-width: 992px)  {
    .previewBarPadding {
        left: calc(12% + 10px);
    }
}*/


.QuotePeriod {
    color: #aaa;
    font-style: italic;
}

.QuotePeriodSelected {
    font-weight: bold;
    font-style: normal;
    color: #333;
    border-top: solid 2px #333;
    border-bottom: solid 2px #333;
    margin-bottom: 5px;
    padding-top: 10px;
    padding-bottom: 10px;
}

#CustomerList {
    overflow-x: hidden;
    padding: 10px;
    background-color: #f5f6fa;
    min-height: 100vh;
    height: 100%;
}

#QuoteList {
    overflow-x: hidden;
    padding: 15px;
    min-height: 100vh;
}

    #QuoteList .table {
        width: 100%;
        margin: 0;
    }

    #QuoteList .audit-view {
        padding: 10px;
        border: 1px solid #ccc;
        border-radius: 4px;
    }

    #QuoteList .quoteListBucketContainer {
        padding-right: 0;
    }

    #QuoteList .quoteListBucket {
        background-color: transparent;
        min-height: 100vh;
        border-radius: 0 0 4px 4px;
    }

    #QuoteList .quoteListBucket-v2 {
        background-color: transparent;
        border-radius: 0 0 4px 4px;
        margin-bottom: 10px;
    }

    #QuoteList .quoteListBucket h4 {
        color: #505171;
    }

    #QuoteList .quoteListCount {
        color: #505171;
    }

    #QuoteList .quoteListFilter {
        padding: 10px;
        background: #fff;
        border: solid 1px #ccc;
        border-bottom: solid 1px #aaa;
        border-radius: 4px;
        margin-top: 10px;
        box-shadow: 0 3.2px 7.2px 0 rgba(0, 0, 0, .132),0 .6px 1.8px 0 rgba(0, 0, 0, .108);
    }

    #QuoteList .quoteCard {
        padding: 0px 0px 10px 0px;
        background-color: #fff;
        border-radius: 4px;
        margin-top: 10px;
        box-shadow: 0 2px 6px rgba(58, 57, 68, 0.2);
    }

    #QuoteList .completed {
        background-color: #dfdfdf;
        border: solid 1px #ccc;
        box-shadow: none;
    }

    #QuoteList .overdue {
        background-color: #dfdfdf;
        border: solid 1px #ccc;
        box-shadow: none;
    }

#InvoiceList {
    overflow-x: hidden;
    padding: 10px, 0px;
    min-height: 100vh;
    height: 100%;
}

    #InvoiceList .table {
        width: 100%;
        margin: 0;
    }

    #InvoiceList .audit-view {
        padding: 10px;
        border: 1px solid #ccc;
        border-radius: 4px;
    }

#messages {
    overflow-x: hidden;
    padding: 10px;
    min-height: 100vh;
    height: 100%;
}

#SendMessage {
    overflow-x: hidden;
    padding: 10px;
    min-height: 100vh;
    height: 100%;
}

#Purchases {
    padding: 10px;
    min-height: 100vh;
    height: 100%;
}

    #Purchases .inbound-card {
        border: solid 1px #eee;
        border-radius: 4px;
        padding: 20px;
        margin: 0;
        background-color: #fff;
        box-shadow: 6px 7px 14px 0px hsla(0, 0%, 40%, 0.08);
        margin-bottom: 10px;
    }

    #Purchases .specialTextLarge {
        width: 100%;
    }

    #Purchases table {
        font-size: 1.15em;
    }

    /* #Purchases table th {
            padding: 15px;
        } */

    #Purchases .table td {
        border-top: none;
        vertical-align: middle;
    }

    #Purchases .table > thead > tr > th {
        border-bottom: none;
    }

    #Purchases table > thead {
        background-color: transparent;
    }

    #Purchases table {
        border: 1px solid transparent;
        border-collapse: separate;
        border-spacing: 0 10px;
        background-color: transparent;
    }

    #Purchases .table > thead > tr > th, .table > tbody > tr > th, .table > tfoot > tr > th, .table > thead > tr > td, .table > tbody > tr > td, .table > tfoot > tr > td {
        border-right: none;
    }

    /* #Purchases .table > tbody > tr > td {
        padding: 15px;
        background-color: transparent;
    } */

    /* #Purchases .table > tbody > tr {
        background-color: #fff;
        box-shadow: 6px 7px 14px 0px hsla(0, 0%, 40%, 0.08);
    } */

    #Purchases tr:first-child td:first-child {
        border-top-left-radius: 4px;
        border-bottom-left-radius: 4px;
    }

    #Purchases tr:first-child td:last-child {
        border-top-right-radius: 4px;
        border-bottom-right-radius: 4px;
    }

    #Purchases tr:last-child td:first-child {
        border-top-left-radius: 4px;
        border-bottom-left-radius: 4px;
    }

    #Purchases tr:last-child td:last-child {
        border-top-right-radius: 4px;
        border-bottom-right-radius: 4px;
    }

#Calendar {
    overflow-x: hidden;
    padding: 10px;
    min-height: 100vh;
    height: 100%;
}

#CompanyDetails {
    overflow-x: hidden;
    padding: 10px;
    min-height: 100vh;
    height: 100%;
}

#Manage {
}

#UserAccounts {
    overflow-x: hidden;
    padding: 10px;
    min-height: 100vh;
    height: 100%;
}

#UserHeirarchyChart table.google-visualization-orgchart-table {
    border-collapse: separate;
    background-color: transparent;
}

#UserHeirarchyChart td {
    background-color: transparent;
}

    #UserHeirarchyChart td.google-visualization-orgchart-node.google-visualization-orgchart-node-large {
        font-family: 'Open Sans','Nunito','Monda','Montserrat','Open Sans', montserrat, 'PT Sans', 'Segoe UI';
        min-height: 80px;
        min-width: 200px;
        color: #777;
        background: #fff;
        border: 1px solid lightgrey;
        border-radius: 2px;
        -webkit-box-shadow: rgba(0, 0, 0, 0.08) 3px 3px 6px 0px;
        -moz-box-shadow: rgba(0, 0, 0, 0.5) 3px 3px 3px;
    }

#UserHeirarchyChart .org-panel {
    background-color: #eee;
    min-height: 310px;
    overflow-x: auto;
}

#UserHeirarchyTable table {
    width: 100%;
    margin: 0;
}

#HomeHelp {
}

#electronic-signature .signature-box {
    padding: 20px;
    border: 1px solid blue;
    background-color: lightblue;
}

/* #costing_top {
    overflow-x: hidden;
} */


#costing_top .quote-table {
    display: block;
    overflow-x: auto;
    white-space: nowrap;
}

#costing_top .accountCodeLookup .table tbody > tr > td {
    line-height: 1.42857143;
    vertical-align: top;
    border-top: 1px solid #efefef;
    border-right: none;
}

#costing_top .customLayoutControls {
    position: absolute;
    left: -25px;
    top: 0;
}

    #costing_top .customLayoutControls .btn {
        width: 30px;
        height: 30px;
        border-radius: 15px;
        display: block;
        margin-top: 2px;
        margin-bottom: 2px;
        border: solid 1px #546e7a;
        border: solid 1px var(--secondary);
        color: #546e7a;
        color: var(--secondary);
    }

        #costing_top .customLayoutControls .btn:hover {
            background-color: #546e7a;
            background-color: var(--secondary);
            color: #fff;
        }

#costing_top .addSectionControls {
    position: absolute;
    bottom: 16px;
    width: 100%;
    height: 10px;
}

/* #costing_top input[type=range] {
        -webkit-appearance: none;
        width: 100%;
    }

        #costing_top input[type=range]::-webkit-slider-runnable-track {
            width: 1px;
            height: 8.4px;
            cursor: pointer;
            animate: 0.2s;
            background: #BFBFBF;
        }

        #costing_top input[type=range]::-webkit-slider-thumb {
            height: 36px;
            width: 16px;
            border-radius: 3px;
            background: #3f51b5;
            -webkit-appearance: none;
            margin-top: -14px;
        } */

#costing_top .table {
    width: 100%;
    margin: 0;
}

.modal-dialog,
.modal-content {
    /* 80% of window height */
    height: 90%;
}

.modal-body {
    /* 100% = dialog height, 120px = header + footer */
    height: 100%;
    max-height: calc(100% - 120px);
    overflow-y: scroll;
}

.modal-dialog {
    width: 80%;
    margin: 100px auto;
}

.centered-modal {
    z-index: 10006;
    position: fixed;
    width: 80%;
    height: 80%;
    left: 50%;
    top: 50%;
    transform: translate(-50%, -50%);
    box-shadow: 2px 1px 11px 1px #595959;
    opacity: 1;
    background-color: #fff;
    overflow: hidden;
    overflow-y: auto;
    border-radius: 4px;
}

.centered-modal-header {
    padding: 15px;
    border-bottom: 1px solid #e9ecef;
}

.centered-modal-footer {
    position: fixed;
    padding: 15px;
    border-top: 1px solid #e9ecef;
    bottom: 0;
    left: 0;
    width: 100%;
    background-color: #fff;
}

#ImageManagementModal {
    z-index: 11111111;
}

    #ImageManagementModal .image-gallery-item {
        height: 200px;
        width: 200px;
        display: inline-block;
        border: 1px solid #cbcbcb;
        border-radius: 4px;
        margin-right: 10px;
        margin-bottom: 10px;
        position: relative;
    }

        #ImageManagementModal .image-gallery-item.active {
            border: 3px solid dodgerblue;
        }

.progress-bar-pending {
    background-color: #FFC107;
    color: black;
}

.progress-bar-sent {
    background-color: #333;
}

.progress-bar-accepted {
    background-color: #4cd137;
}

.progress-bar-pending-approval {
    background-color: #ffcc00;
    color: black;
}

.progress-bar-approved {
    background-color: #ffcc00;
}

.progress-bar-rejected {
    background-color: #c23616;
}

#ops {
    z-index: 1;
    position: fixed;
    height: 50px;
    top: 50px;
    right: 0;
    width: inherit;
    background-color: #fff;
    color: #333;
    padding-top: 5px;
    border-bottom: solid 2px #eee;
}

.showDialog {
    border-top: 1px solid #eee;
    border-top-left-radius: 4px;
    border-top-right-radius: 4px;
}

.quote-accept {
    border: 1px solid #d6d6d6;
    border-radius: 4px;
    padding: 20px;
}

.documentPageLabel {
    min-width: 290px;
    padding: 0px;
    max-width: 21cm;
    position: relative;
    margin: 20px auto;
    font-weight: 700;
    font-size: 2.5em;
}

.documentPageLabelBuilder {
    min-width: 290px;
    padding: 0px;
    max-width: 25cm;
    position: relative;
    margin: 20px auto;
    margin-bottom: 10px;
    font-weight: 700;
    font-size: 2.5em;
}

.documentTags {
    min-width: 290px;
    padding: 0px;
    max-width: 25cm;
    position: relative;
    margin: 10px auto 5px auto;
}

.documentTag {
    position: relative;
    border: 1px solid #95afc0;
    border-radius: 3px;
    padding: 0.35em;
    background-color: #c7ecee;
    display: inline;
    margin-right: 10px;
}

.documentPageLabelBuilder .profit-and-loss {
    width: 50%;
    display: inline-block;
}

    .documentPageLabelBuilder .profit-and-loss span {
        display: inline-block;
    }

.documentPageLabelBuilder .preview-and-edit {
    width: 50%;
    display: inline-block;
    position: relative;
    float: right;
    top: 9px;
}

.label-outline {
    border: solid 1px #ddd;
    color: #333;
}

.proposalNav {
    position: fixed;
    bottom: 50%;
    z-index: 2000;
    opacity: 0.6;
    border-radius: 4px;
    color: #777;
}

.proposalNavDown:hover {
    color: #3f51b5;
    color: var(--primary);
}

.proposalNavUp:hover {
    color: #3f51b5;
    color: var(--primary);
}

.itemsection-container {
    border: dashed 2px #ddd;
    border-radius: 5px;
    width: 100%;
    padding: 10px;
    min-height: 150px;
    text-align: center;
    padding-top: 40px;
}

    .itemsection-container:hover {
        background-color: #f0f0f0;
    }

.addNewContainer {
    border: dashed 2px #ddd;
    border-radius: 5px;
    padding: 10px;
    min-height: 150px;
    text-align: center;
    padding-top: 40px;
    height: 300px;
    width: 200px;
}

.fa-plus-circle {
    color: #546e7a;
    color: var(--secondary);
}

.fa-minus-circle {
    color: #333;
}

.fa-warning {
    color: #fd7e14;
    color: var(--orange);
}

.spacedImage {
    float: right;
}

.offerBanner {
    min-height: 60px;
}

::-webkit-scrollbar {
    width: 10px;
}

::-webkit-scrollbar-track {
    border-radius: 10px;
}

::-webkit-scrollbar-thumb {
    border-radius: 10px;
    background: #ccc;
}

.logo-upload {
    border: dashed 2px #ddd;
    border-radius: 4px;
    background-color: inherit;
    padding: 5px;
    margin: 0px auto;
    height: 300px;
}

.logoNoImage {
    text-align: left;
    background-color: #fff;
    margin-bottom: 20px;
    font-weight: bold;
    font-size: 2em;
    word-break: break-word;
}

.sidePanelFixed {
    position: fixed;
    right: 0;
    top: 50px;
    height: 100%;
    overflow: auto;
    background-color: white;
    color: #fff;
    padding-left: 10px;
    padding-bottom: 60px;
    margin-top: 10px;
}

.documentPanelFixedLeft {
    position: fixed;
    left: 0;
    height: 100%;
    overflow: auto;
    background-color: inherit;
    color: #fff;
    padding-left: 10px;
    padding-bottom: 60px;
    box-shadow: -5px 0 20px -5px #eee;
}

.sidePanelFixedHeader {
    padding: 10px;
    margin-left: -15px;
    background-color: #333;
    margin-bottom: 20px;
    border-bottom: solid 1px #eee;
}

.documentBanner {
    -webkit-box-shadow: 0 4px 6px -6px #222;
    -moz-box-shadow: 0 4px 6px -6px #222;
    box-shadow: 0 4px 6px -6px #222;
    background-color: #71b6a2;
    padding: 20px;
    opacity: 0.90;
    margin-top: -10px;
}

.numberCircle {
    border-radius: 16px;
    width: 16px;
    height: 16px;
    padding: 6px;
    background: #EA2027;
    background: var(--red);
    border: 1px solid #eee;
    color: #fff;
    text-align: center;
    font-size: 8px;
    margin-top: 0;
}

.documentPageHeader {
    top: 0;
    height: 50px;
    display: table-cell;
    vertical-align: middle;
    padding: 0 0 0 0px;
    position: fixed;
    z-index: 9999;
    color: #fff;
    background-color: #fcfcfc;
    right: 0px;
    opacity: 0.98;
    width: 100%;
    border-bottom: none 1px #ddd;
}

.micro-copy-container {
    border: solid 2px #f0f0f0;
    padding: 20px;
    text-align: left;
    border-radius: 4px;
    background-color: #fcfcfc;
    margin-bottom: 10px;
}

.micro-copy {
    font-family: kalam;
    font-size: 14px;
    font-weight: bold;
    color: #777;
}

.error {
    color: #EA2027;
    color: var(--red);
    font-style: italic;
}

.highlightButton {
    border: none;
    border-radius: 4px;
    cursor: pointer;
    padding: 10px;
}

    .highlightButton:hover {
        color: #fff;
        border: solid 1px #000;
        transition: all linear 0.1s;
        background-color: #555;
        border-radius: 4px;
    }

@-webkit-keyframes pulse {
    to {
        box-shadow: 0 0 0 20px rgba(232, 76, 61, 0);
    }
}

@-moz-keyframes pulse {
    to {
        box-shadow: 0 0 0 20px rgba(232, 76, 61, 0);
    }
}

@-ms-keyframes pulse {
    to {
        box-shadow: 0 0 0 20px rgba(232, 76, 61, 0);
    }
}

@keyframes pulse {
    to {
        box-shadow: 0 0 0 20px rgba(232, 76, 61, 0);
    }
}

.linedInput {
    padding: 5px;
    border: none;
    border-bottom: dotted 1px #eee;
}

#btnConnect {
    background-image: url(/Content/connect_xero_button_white.png);
    background-color: transparent;
    background-repeat: no-repeat;
    border: none;
    cursor: pointer;
    vertical-align: middle;
    display: block;
    width: 150px;
    margin-top: 10px;
    height: 35px;
    text-indent: -9999px;
}

.moveItemParentLevel1 {
    position: absolute;
    left: 20px;
    margin-top: 0px;
}

.moveItemParentLevel2 {
    position: absolute;
    left: 45px;
    margin-top: 0px;
}

.moveItemParentLevel3 {
    position: absolute;
    left: 65px;
    margin-top: 0px;
}

.moveItemButton {
    max-width: 10px;
    color: #888;
    font-size: 1.2em;
}

    .moveItemButton:hover {
        font-weight: bold;
        color: #44bd32;
        color: var(--green);
        cursor: pointer;
    }

.stack_colour_1 {
    background-color: yellow;
}

.eager-feedback-app {
    display: none;
}

    .eager-feedback-app.eager-feedback-app-show {
        display: none;
    }

.eager-feedback-app-feedback-button {
    display: none;
}

.ta-scroll-window > .ta-bind {
    min-height: 200px;
}

.ta-editor.ta-html, .ta-scroll-window.form-control {
    min-height: 200px;
}

.tourStep.popover {
    z-index: 10011 !important;
    border-radius: 0;
    border: 0;
    padding: 0;
    max-width: 400px;
}

.ui-tour-popup-orphan {
    top: 50% !important;
    left: 50% !important;
    margin: 0 !important;
    transform: translateX(-50%) translateY(-50%) !important;
}

.ui-tour-backdrop {
    position: fixed !important;
    width: 100%;
    height: 100%;
    background-color: rgba(0, 0, 0, .2);
    fill: rgba(0, 0, 0, .5);
    z-index: 10010;
}

.popover-title.tour-step-title {
    border-radius: 0;
    background-color: #546e7a;
    background-color: var(--secondary);
    color: #fff;
}

.popover-inner {
    background-color: #fff;
    color: #333;
    font-size: 1em;
    z-index: 10002;
}

.popover-content .tour-step-content {
    padding-left: 0;
    padding-right: 0;
}

    .popover-content .tour-step-content h3 {
        margin-top: 0;
    }

.tour-step-title {
    background-color: #edcc5a;
    color: #333;
    font-weight: bold;
    border-radius: 0px;
}

.activeStep {
    color: #44bd32;
    color: var(--green);
}

.background {
    position: relative;
    z-index: 1;
}

    .background:before {
        border-top: 2px solid #dfdfdf;
        content: "";
        margin: 0 auto; /* this centers the line to the full width specified */
        position: absolute; /* positioning must be absolute here, and relative positioning must be applied to the parent */
        top: 50%;
        left: 0;
        right: 0;
        bottom: 0;
        width: 95%;
        z-index: -1;
    }

    .background span {
        /* to hide the lines from behind the text, you have to set the background color the same as the container */
        background: #fff;
        padding: 0 15px;
    }

.not-visible {
    visibility: hidden;
}

.rating {
    color: #333;
    margin: 0;
    padding: 0;
}

ul.rating {
    display: inline-block;
    text-align: center;
}

.rating li {
    list-style-type: none;
    display: inline-block;
    padding: 1px;
    text-align: center;
    font-weight: bold;
    cursor: pointer;
    font-size: 3em;
}

.rating .filled {
    color: #f0ad4e;
}

.helpUs {
    border: solid 1px #eee;
    padding: 5px;
    background-color: #dfdfdf;
    color: #333;
    border-radius: 4px;
    box-shadow: 0 3px 5px -1px hsl(0, 0%, 40%), inset 4px 1px 6px -8px black;
}

.lateInvoice {
    position: absolute;
    border: solid 1px #eee;
    padding: 5px 10px 5px 10px;
    top: -20px;
    left: 0px;
    background-color: #EA2027;
    background-color: var(--red);
    font-size: 0.6em;
    color: white;
    border-radius: 20px;
    box-shadow: 0 3px 5px -1px hsl(0, 0%, 40%), inset 4px 1px 6px -8px black;
}

.jobCompleted {
    position: absolute;
    border: solid 1px #eee;
    padding: 5px 10px 5px 10px;
    top: 30%;
    left: -15px;
    background-color: #9c88ff;
    font-size: 0.6em;
    color: white;
    border-radius: 20px;
    box-shadow: 0 3px 5px -1px hsl(0, 0%, 40%), inset 4px 1px 6px -8px black;
}

.jobOverdue {
    position: absolute;
    border: solid 1px #eee;
    padding: 5px 10px 5px 10px;
    top: 30%;
    left: -15px;
    background-color: orangered;
    font-size: 0.6em;
    color: white;
    border-radius: 20px;
    box-shadow: 0 3px 5px -1px hsl(0, 0%, 40%), inset 4px 1px 6px -8px black;
}

.side-image {
    max-height: 100px;
}

.uib-datepicker-popup.dropdown-menu {
    display: block;
    float: none;
    margin: 0;
    padding: 10px;
    top: 10px !important;
    margin-bottom: 50px;
    z-index: 11000;
}

.selectedTagsContainer {
    display: inline;
    margin-top: -30px;
    padding: 5px;
    position: absolute;
    width: 200px;
    max-width: 200px;
    float: right;
}

.selectedTagsMessagesContainer {
    display: inline;
    margin-top: -10px;
    margin-left: 0px;
    padding: 5px;
    position: absolute;
    width: 200px;
    max-width: 200px;
    float: right;
    z-index: 10;
}

.selectedTag {
    display: inline-block;
    height: 12px;
    width: 12px;
    padding: 0;
    margin-left: 10px;
    transform: rotate(224deg);
    font-size: 1.5em;
}

.pickColor {
    margin: 5px;
    padding: 5px;
    height: 20px;
    width: 20px;
    border-radius: 10px;
    cursor: pointer;
    border: solid 1px #999;
}

.tagCustomer {
    position: absolute;
    margin-top: 0;
    color: #333;
    margin-top: -2px;
    transform: rotate(90deg);
    top: 2px;
    cursor: pointer;
    left: 0px;
}

.tag {
    position: absolute;
    margin-top: 0;
    left: -40px;
    color: #333;
    margin-top: -14px;
    transform: rotate(90deg);
    top: 0px;
    cursor: pointer;
}

.tag2 {
    position: absolute;
    margin-top: 0;
    margin-top: -26px;
    transform: rotate(223deg);
    top: -7px;
    cursor: pointer;
    font-size: 2em;
    z-index: 0;
    margin-left: 5px;
    margin-right: 5px;
}

.wordcount:before {
    content: "[";
}

.wordcount:after {
    content: "]";
}

.wordcount {
    font-size: 0.8em;
    float: right;
    font-weight: normal;
}

.controlPanel {
    background-color: #f2f2f2;
    border: solid 1px #eee;
    margin-bottom: 10px;
    padding-bottom: 20px;
    padding-top: 20px;
}

.headlineMessage {
    text-align: right;
    font-size: 10px;
    font-weight: normal;
    color: #edcc5a;
}

#HW_badge.HW_softHidden {
    background: #fd7e14 red;
    background: var(--orange)red;
    opacity: 1;
    transform: scale(0.6);
}

#HW_badge_cont.HW_visible {
    visibility: visible;
}

#HW_badge_cont {
    visibility: hidden;
    pointer-events: none;
    display: block;
    height: 32px;
    width: 32px;
    cursor: pointer;
    position: relative;
}

eager-side-nav-button {
    top: 1em !important;
    left: 1em !important;
}

body {
    flood-opacity: 1;
    font-family: 'Open Sans','Nunito','Monda','Montserrat','Open Sans', montserrat, 'PT Sans', 'Segoe UI';
    font-kerning: auto;
    font-size: 12px;
    background-color: #fff;
    width: auto !important; /* Firefox will set width as auto */
    padding-bottom: 60px;
}

.thisPaySchedule {
    background-color: #f7f7f7;
}

.loud {
    color: #d47065;
}

.form-control {
    background-color: #fff;
    border-radius: 0px;
}

input:-webkit-autofill, textarea:-webkit-autofill, select:-webkit-autofill {
    background-color: #fd7e14;
    background-color: var(--orange);
    background-image: none;
}

ul.dropdown-menu {
    font-size: 12px;
    z-index: 10002;
}

.dropdown-menu {
    min-width: 260px;
}

.helpLink {
    font-size: 10px;
    font-weight: bold;
    width: 20px;
    height: 20px;
    -moz-border-radius: 10px;
    -webkit-border-radius: 10px;
    border-radius: 20px;
    border: solid 1px #aaa;
    padding: 5px;
    color: #5cb85c;
}

.chevron {
    color: #546e7a;
    color: var(--secondary);
    border-radius: 4px;
}

.centered {
    vertical-align: middle;
}

.separated {
    border-right: solid 6px #eee;
    margin-right: 5px;
    padding-right: 5px;
}


/* bootstrap ripoff */
.btn-default {
    color: #333;
    background-color: #fff;
    border-color: #ccc;
}

/* override - might mess up some heights but seems necessary to avoid white on white */
.btn-default {
    border: solid 1px #ddd;
}

    .btn-default:hover,
    .btn-default:focus,
    .btn-default:active,
    .btn-default.active,
    .open > .dropdown-toggle.btn-default {
        color: #333;
        background-color: #e6e6e6;
        border-color: #adadad;
    }

    .btn-default:active,
    .btn-default.active,
    .open > .dropdown-toggle.btn-default {
        background-image: none;
    }

    .btn-default.disabled,
    .btn-default[disabled],
    fieldset[disabled] .btn-default,
    .btn-default.disabled:hover,
    .btn-default[disabled]:hover,
    fieldset[disabled] .btn-default:hover,
    .btn-default.disabled:focus,
    .btn-default[disabled]:focus,
    fieldset[disabled] .btn-default:focus,
    .btn-default.disabled:active,
    .btn-default[disabled]:active,
    fieldset[disabled] .btn-default:active,
    .btn-default.disabled.active,
    .btn-default[disabled].active,
    fieldset[disabled] .btn-default.active {
        background-color: #fff;
        border-color: #ccc;
    }

    .btn-default .badge {
        color: #fff;
        background-color: #333;
    }

.btn-verify {
    background-color: #464648;
    color: #fcfcfc;
}

    .btn-verify:hover {
        color: #ccc;
        background-color: #555;
    }

#AcceptButton {
    font-size: 20px;
}

.loadingMessage {
    top: 50px;
    position: fixed;
    border-radius: 4px;
    margin-left: 10px;
    border: solid 2px #ddd;
    background-color: #fff;
    opacity: 0.99;
    z-index: 9999;
    padding: 10px;
    margin: 0 auto;
    color: #44bd32;
    color: var(--green);
    font-size: 0.9em;
    left: 50px;
    box-shadow: 0 3px 5px -1px hsl(0, 0%, 40%), inset 4px 1px 6px -8px black;
}

.loadingMessageHeader {
    font-size: 1.4em;
}

.loadingMessageDetail {
    font-size: 1em;
    font-style: italic;
}

.highlightMessage {
    background-color: cadetblue;
}

::-webkit-input-placeholder { /* WebKit, Blink, Edge */
    color: #bbb;
    font-style: italic;
    font-size: 0.8em;
}

:-moz-placeholder { /* Mozilla Firefox 4 to 18 */
    color: #bbb;
    font-style: italic;
}

::-moz-placeholder { /* Mozilla Firefox 19+ */
    color: #bbb;
    font-style: italic;
}

:-ms-input-placeholder { /* Internet Explorer 10-11 */
    color: #bbb;
    font-style: italic;
}

.tour-backdrop {
    background-color: rgba(0, 0, 0, 0.5);
}


.optionalRejected {
    /*font-style: normal;*/
    text-decoration: line-through;
}

.optionalAccepted {
    background-color: #fff;
    border-color: #6fbd73;
    border-top: solid 2px green;
    border-bottom: solid 2px green;
    font-style: normal;
    /*font-weight: bold;*/
}

.optionalCosting {
    font-style: italic;
    color: grey;
    margin-top: 0px;
    background-color: inherit;
    border-top: none 2px #eeefff;
    border-bottom: none 2px #eeefff;
    padding-top: 5px;
}

.optionalCostingText {
    margin: 5px 0 10px 0;
    padding-top: 5px;
    border-top: dotted 1px #aaa;
}

.optionalCostingText2 {
    margin: 5px 0 0px 0;
    padding-top: 5px;
    border-top: none 1px #aaa;
    font-style: normal;
    font-size: 0.8em;
}

.seeDocumentLink {
    margin-top: 10px;
    font-size: 0.8em;
}

.paidInvoice {
    z-index: 100;
    top: 5px;
    height: 100px;
    width: auto;
    position: absolute;
}

.userConversation {
    color: #3368e5;
    margin-bottom: 20px;
}

.customerConversation {
    color: #000;
    font-style: italic;
}

.conversationLine {
    padding: 20px;
    border: solid 1px #eee;
    border-radius: 4px;
    margin-top: 5px;
    margin-bottom: 25px;
    font-size: 1em;
    background-color: rgb(250,250,240);
}

.conversationBlock {
    margin-left: 3px;
    padding: 10px;
    border: solid 1px #ddd;
    border-radius: 1px;
    background-color: #fff;
}

.itemRow {
    border-bottom: solid 1px #ececec;
    padding-top: 5px;
    padding-bottom: 5px;
}

    .itemRow:hover, itemRowHeading:hover {
        background-color: none;
    }

.itemRowOptional {
    background-color: transparent;
    margin-top: 5px;
    border-radius: 0px;
    /*border: solid 1px #efecec;*/
    border-top: solid 2px orange;
    border-bottom: solid 2px orange;
    cursor: pointer;
    padding-bottom: 10px;
    font-style: normal;
    font-weight: normal;
}

    .itemRowOptional:hover, itemRowOptional:hover {
        background-color: #efecec;
        /*color: #fff;*/
        /*font-weight: normal;*/
        font-style: italic;
    }




.itemRowHeading {
    color: #bbb;
    border-bottom: solid 1px #eee;
    padding-bottom: 5px;
    margin-bottom: 5px;
}


.quoteLine {
    background-color: #f9fbc1;
}

.invoiceLine {
    background-color: #f1d8d7;
}

.dashboardCost {
    font-size: 2em;
    font-weight: bold;
    padding: 5px;
    margin-top: 10px;
    margin-bottom: 5px;
    border-left: solid 1px #ddd;
    color: grey;
}

.dashboardPanel {
    padding: 20px;
    margin-bottom: 20px;
    background-color: #fbfbfc;
}

.docAddressLogo {
    border: none;
    max-height: 250px;
    max-width: 250px;
    height: 100%;
    width: 100%;
    padding-right: 5px;
    padding-bottom: 5px;
}

.logoRight {
    padding-right: 5px;
    padding-bottom: 5px;
}

.logoTopCentered {
    padding-right: 5px;
    padding-bottom: 5px;
}

.mandatory {
    color: #EA2027;
    color: var(--red);
}

.goToTop {
    font-size: 14px;
    float: right;
}

.selectable {
    cursor: pointer;
    user-select: none;
}

a.selectable {
    text-decoration: none;
}

pre {
    font-family: inherit;
    font-size: inherit;
    margin: 0px;
    padding-left: 0px;
    padding: 5px;
    font-weight: normal;
    border-radius: 0;
}

label > input {
    margin-top: 0px;
}

.messageHeaderInfo {
    color: #777;
    font-style: italic;
    font-size: 0.8em;
    margin-bottom: 10px;
}

.view {
    padding: 20px;
    padding-top: 20px;
    padding-bottom: 20px;
    background-color: #fff;
    align-self: center;
    vertical-align: middle;
    border-radius: 4px;
    border: solid 1px #eee;
}

.actionBar {
    width: 100%;
    background-color: white;
    border-bottom: solid 1px grey;
    margin-top: -20px;
    margin-bottom: 20px;
    height: 45px;
    padding-left: 20px;
    padding-top: 10px;
}

    .actionBar .link {
        border: solid 1px grey;
        font-weight: bold;
        padding: 5px;
        color: black;
        background-color: #f0ad4e;
        border-radius: 4px;
    }

.huge {
    font-size: 2.9em;
    padding: 0px;
    margin-top: 20px;
    border-bottom-right-radius: 5px;
    border-bottom-left-radius: 5px;
}

.report {
    padding: 10px;
    border-left: 1px solid darkgrey;
    color: white;
    font-weight: bold;
}

a:hover {
    cursor: pointer;
}

button:hover {
    cursor: pointer;
}

label {
    color: #666;
    font-weight: bold;
    margin-left: 0px;
    font-size: 1em;
    padding-left: 0px;
    width: 100%;
}

#logInContainer .btn {
    font-size: 16px;
}

#logInButton {
    font-weight: bold;
    margin-top: 4px;
}

#SaveBar .btn {
    margin-top: 10px;
    font-size: 14px;
}

.navbar {
    background-color: #000;
    z-index: 1000;
    border-radius: 0px;
    opacity: 0.95;
    padding-right: 20px;
    padding-left: 20px;
    border-bottom: solid 1px #e6802a;
    height: 50px;
}

    .navbar > a {
        color: white;
    }


.dropdown-menu {
    margin-top: 0;
    border-top-left-radius: 2px;
    border-top-right-radius: 2px;
    background-color: #fcfcfc;
}

    .dropdown-menu > li > a {
        display: block;
        padding: 3px 20px;
        clear: both;
        font-weight: 400;
        line-height: 1.42857143;
        color: #000;
        white-space: nowrap;
        font-weight: bold;
    }



.nav-tabs > li > a {
    margin-right: 2px;
    color: #555;
    font-weight: bold;
    text-transform: uppercase;
    font-size: 10px;
}

.nav-tabs > li.active > a, .nav-tabs > li.active > a:hover, .nav-tabs > li.active > a:focus {
    color: #fff;
    cursor: default;
    background-color: #333;
    border: 1px solid #e0e0e0;
    border-bottom-color: transparent;
    font-weight: bold;
}

.navbar-default .navbar-nav > li > a {
    color: #fff;
    font-weight: normal;
    font-size: 1em;
    padding-bottom: 10px;
}

h2 {
    margin: 0px 0px 0px 0px;
}

.nav-tabs {
    font-size: 1.2em;
    margin-left: 0px;
    margin-right: 0px;
}

/* Set padding to keep content from hitting the edges */
.body-content {
    background-color: white;
    border-width: 1px;
    border-color: lightgreen;
    opacity: 1;
    margin-bottom: 30px;
}

/* Set width on the form input elements since they're 100% wide by default */
input,
select,
textarea {
    border-width: 1px;
    border-color: lightgrey;
    margin-bottom: 2px;
}

/* styles for validation helpers */
.field-validation-error {
    color: #b94a48;
}

.field-validation-valid {
    display: none;
}

input.input-validation-error {
    border: 1px solid #b94a48;
}

input[type="checkbox"].input-validation-error {
    border: 0 none;
}



input[type="checkbox"] {
    height: 15px;
    width: 15px;
}

.radio input[type=radio], .radio-inline input[type=radio], .checkbox input[type=checkbox], .checkbox-inline input[type=checkbox] {
    position: absolute;
    margin-left: 0px;
    margin-top: 0px;
}

input[type="radio"] {
    margin-top: 0px;
}

input[type="text"] {
}

.validation-summary-errors {
    font-size: 1em;
}

    .validation-summary-errors > ul {
        list-style: none;
        padding: 0;
    }

        .validation-summary-errors > ul > li {
        }

.validation-summary-valid {
    display: none;
}

input.specialText:hover, input.specialText:focus,
select.specialText:hover, select.specialText:focus, textarea.specialText:focus, textarea.specialText:hover {
    border-color: blue;
}

input:hover {
    border-color: blue;
    border: solid 1px blue;
}

textarea.specialText {
    height: 50px;
    background-color: #fff;
    border: solid 1px #eee;
    resize: none;
    font-size: 1em;
    color: #555;
    border-radius: 10px;
}

textarea.costingText {
    resize: none;
}

textarea {
    height: 50px;
    border-bottom: dotted 1px lightgrey;
    font-size: 1.2em;
    color: #555;
}

p.hover {
    cursor: pointer;
}

a.hover {
    cursor: pointer;
}

#footer {
    background-color: lightgrey;
    border-color: lightgrey;
    color: white;
    position: fixed;
    bottom: 100%;
    left: 0;
    height: 80px;
}


.DataSection {
}

.specialTextLarge {
    margin-bottom: 5px;
    border: none;
    border-color: #ced4da;
    border-width: 2px;
    padding: 5px;
    padding-top: 5px;
    padding-bottom: 5px;
    color: #777;
    font-size: 1.2em;
    font-weight: bold;
    height: 40px;
    border: solid 1px #ced4da;
    background-color: #fff;
    border-radius: 4px;
}

.specialText {
    margin-bottom: 5px;
    padding: 5px;
    padding-top: 5px;
    padding-bottom: 5px;
    color: #777;
    font-size: 1.2em;
    font-weight: normal;
    height: 40px;
    border: solid 1px #eee;
    background-color: #fff;
    border-radius: 4px;
}


.costingText {
    font-weight: normal;
    border: none;
    background-color: inherit;
    font-size: 1em;
    border: solid;
    border-color: lightgrey;
    border-width: 1px;
    margin-left: 5px;
    padding: 5px;
    border-radius: 4px;
    overflow: hidden;
}

    .costingText:hover, .costingText:focus {
        font-weight: normal;
        font-size: 1em;
        cursor: pointer;
        background-color: #c2e3e4;
    }


.costingSection {
}

    .costingSection .costingSectionText {
        background-color: inherit;
        font-size: 1.6em;
        font-weight: bold;
        border-color: transparent;
        border-width: 1px;
        margin-left: 0px;
        font-weight: bold;
        margin-bottom: 5px;
        margin-top: 5px;
        padding: 5px;
        border-radius: 0px;
        border-bottom: solid 1px lightgrey;
        background-color: white;
        background-color: transparent;
    }

    .costingSection .no-items-warn {
        margin-bottom: 5px;
    }

.costingSectionText:hover {
    cursor: pointer;
}

.costingSection #dropdownMenu2 {
    margin-top: 5px;
}

.costingSectionTextForTemplate {
    border: none;
    background-color: inherit;
    font-size: 1em;
    font-weight: bold;
    border: none;
    border-color: lightgrey;
    border-width: 1px;
    margin-left: -5px;
    font-weight: bold;
    margin-bottom: 5px;
    margin-top: 5px;
    padding: 5px;
    border-radius: 0px;
}

.costSummary {
    margin-top: 10px;
    margin-left: -5px;
    margin-right: -5px;
    margin-bottom: -5px;
    font-weight: bold;
    background-color: #E8E8E8;
    border-top: dotted;
    border-width: 1px;
    border-color: lightgrey;
    padding: 5px;
    color: black;
}


.quantity ::before {
    content: "#";
}

.price ::before {
    content: "£";
}

.costingTotal {
    color: #666;
    font-size: 1em;
    float: right;
    font-weight: bold;
    text-align: right;
}


.costingSection {
    margin-top: 10px;
    margin-left: 1px;
    margin-bottom: 15px;
    font-weight: bold;
    color: black;
    border-color: #eee;
    padding: 5px;
    border-width: 1px;
    border-radius: 4px;
    background-color: inherit;
}

.costingSectionItem {
    margin-top: -2px;
    margin-left: 1px;
    margin-right: 1px;
    margin-bottom: 5px;
    color: black;
    border: 1px solid #ddd;
    border-radius: 4px;
    background-color: white;
    padding: 0px;
    padding-left: 0px;
}

    .costingSectionItem .costing-item-code-text {
        padding-left: 10px;
        font-size: 12px;
        font-weight: 300;
        color: #b5b5b5;
    }

.optional {
    border-radius: 0px;
    background-color: #fff;
    padding: 5px;
    padding-bottom: 15px;
    border-left: solid 2px orange;
    /*font-style: italic !important;*/
}

.optionalAccepted {
    border-top: solid 2px green;
    border-bottom: solid 2px green;
    /*background-color: #fff;*/
}

.optionalNotAccepted {
}

.paidCostingSectionItem {
    border-left: solid 4px green;
}

.costingSectionItem input {
    border: none;
    border-bottom: 1px grey;
    background-color: inherit;
    border-radius: 0px;
    margin-top: 5px;
}

.costingSectionItem textarea {
    border: none;
    border-bottom: 1px grey;
    background-color: inherit;
    border-radius: 0px;
    margin-top: 5px;
    height: 30px;
}

    .costingSectionItem input:hover, .costingSectionItem textarea:hover {
        border: solid 1px #aaa;
    }


.btn .caret {
    display: none;
}

.costingSheet {
    padding: 10px;
    border: solid 1px lightgrey;
    background-color: white;
    margin-bottom: 60px;
}


.soft {
    font-weight: normal;
}

select.specialText {
    float: left;
    padding-top: 5px;
    font-size: 1em;
    border-radius: 4px;
}

.pageNumber {
    border: solid;
    background-color: cornflowerblue;
    color: white;
    /*font-size: 20px;*/
    font-weight: bold;
    border-radius: 2px;
    width: 40px;
}

thead > .specialText {
    height: 1em;
    padding: 5px;
    margin-left: 0px;
    margin-bottom: 0px;
    border: none;
}

.specialCheck {
    margin-left: 0px;
    padding-left: 0px;
    border: solid;
}

.heading {
    border-width: 1px;
    border-color: #44bd32;
    border-color: var(--green);
    margin-top: 3px;
    margin-bottom: 3px;
    margin-left: 5px;
    margin-right: 5px;
    padding-left: 5px;
    font-weight: normal;
    color: darkolivegreen;
    border-radius: 0px;
    border-color: lightgrey;
}

    .heading .l1 {
        font-weight: bold;
        color: darkolivegreen;
        border-radius: 0px;
    }



.action1 {
    border-bottom: solid;
    border-width: 1px;
    border-color: #44bd32;
    border-color: var(--green);
    margin-top: 5px;
    margin-bottom: 20px;
    padding: 5px;
    font-weight: bold;
    color: white;
    background-color: cornflowerblue;
}


.action2 {
    border-bottom: solid;
    border-width: 1px;
    border-color: #44bd32;
    border-color: var(--green);
    margin-top: 5px;
    margin-right: 10px;
    margin-left: 10px;
    margin-bottom: 20px;
    padding: 5px;
    font-weight: bold;
    color: white;
    background-color: #fd7e14;
    background-color: var(--orange);
    float: right;
}

.action3 {
    border-bottom: solid;
    border-width: 1px;
    border-color: #44bd32;
    border-color: var(--green);
    margin-top: 5px;
    margin-bottom: 20px;
    padding: 5px;
    font-weight: bold;
    color: white;
    background-color: darkslategrey;
}

.badge {
    margin-top: 15px;
    margin-bottom: 2px;
    font-size: 1.2em;
    border-color: #fd7e14;
    background-color: var(--orange);
    border-radius: 4px;
    padding: 0px 10px 0px 10px;
}

.badge_1 {
    margin-top: 0px;
    margin-bottom: 2px;
    padding: 0px 10px 0px 10px;
    font-size: 1.2em;
    font-weight: bold;
    background-color: cornflowerblue;
    border-radius: 4px;
    color: #eee;
}

.badge_2 {
    width: 100%;
    margin-top: 2px;
    margin-bottom: 0px;
    padding: 0px 10px 0px 10px;
    font-size: 1.2em;
    font-weight: bold;
    background-color: cornflowerblue;
    border-radius: 4px;
    color: #eee;
}

.badge_3 {
    margin-top: 0px;
    margin-bottom: 2px;
    margin-right: 10px;
    padding: 0px 10px 0px 10px;
    font-size: 1.2em;
    background-color: #44bd32;
    background-color: var(--green);
    border-radius: 4px;
    color: white;
}

.badge_4 {
    margin-top: 0px;
    margin-bottom: 2px;
    margin-right: 10px;
    padding: 02px 10px 02px 10px;
    font-size: 0.8em;
    background-color: grey;
    border-radius: 2px;
    color: white;
}

.badge_5 {
    margin-top: -5px;
    margin-bottom: 2px;
    margin-right: 10px;
    padding: 06px 10px 06px 10px;
    font-size: 0.8em;
    background-color: #fff;
    border-radius: 4px;
    color: #222;
}

.ng-modal-overlay {
    /* A dark translucent div that covers the whole screen */
    z-index: 9999;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-color: #555;
    opacity: 0.8;
    position: fixed;
    padding: 0;
    margin: 0;
}

@-webkit-keyframes modal-slide {
    from {
        right: 200px;
    }

    to {
        right: 0;
    }
}

@-moz-keyframes modal-slide {
    from {
        right: 200px;
    }

    to {
        right: 0;
    }
}

@-ms-keyframes modal-slide {
    from {
        right: 200px;
    }

    to {
        right: 0;
    }
}

@keyframes modal-slide {
    from {
        right: -200px;
    }

    to {
        right: 0;
    }
}

.ng-modal-dialog {
    z-index: 10000;
    position: fixed;
    width: 700px;
    height: 100%;
    right: 0;
    box-shadow: 4px 4px 80px #888;
    opacity: 1;
    font-size: 1em;
    background-color: #FAFAFA;
    top: 0;
    animation: modal-slide 0.2s;
    overflow: auto;
}

#notification-modal .ng-modal-dialog {
    z-index: 10007;
}

.delete-img {
    background-color: #EA2027;
    background-color: var(--red);
    font-size: 2em;
}


.ng-modal-dialog-header {
    top: 0;
    padding: 10px;
    width: 100%;
    margin: 0px 0px 10px 0px;
    border-bottom: solid 1px #ddd;
    border-width: 1px;
    font-size: 1.4em;
    background-color: #333;
    color: #fff;
    font-weight: bold;
    font-style: italic;
}

.ng-modal-dialog-footer {
    position: fixed;
    bottom: 0;
    margin: 0px 0px 0px 0px;
    padding: 10px;
    border-width: 1px;
    opacity: 1;
    z-index: 10006;
    opacity: 0.95;
    width: 100%;
    border-top: solid 1px #ccc;
    background: #eee;
    opacity: 0.95;
}

    .ng-modal-dialog-footer .btn {
        font-size: 18px;
    }



.ng-modal-dialog-content {
    width: 100%;
    text-align: left;
    overflow: auto;
    z-index: 10005;
    opacity: 1;
    background-color: inherit;
    padding-bottom: 60px
}

    .ng-modal-dialog-content label {
        color: #333;
        font-size: 1.2em;
    }

.systems {
    background-color: lightgreen;
}

.buildings {
}

.boilers {
}

.itemized-costings {
}

.orange {
    background-color: #fd7e14;
    background-color: var(--orange);
}

.grey {
    background-color: grey;
}

.CustomerDetailsWindow {
}

    .CustomerDetailsWindow:hover {
        background-color: #ddd;
        color: white;
        cursor: pointer;
    }

    .CustomerDetailsWindow:focus {
        background-color: #ace8f4;
        color: white;
    }

    .CustomerDetailsWindow .ImageBox {
        float: left;
        display: block;
        height: 40px;
        width: 60px;
        font-size: 1.6em;
        font-weight: bold;
        color: black;
        border-right: solid 1px black;
        display: flex;
        justify-content: flex-start; /* align horizontal */
        align-items: center; /* align vertical */
    }

    .CustomerDetailsWindow .DetailBox {
        display: block;
        float: left;
        background-color: none;
        margin-top: 0px;
        height: 40px;
        font-size: 1.1em;
        display: flex;
        justify-content: flex-start; /* align horizontal */
        align-items: center; /* align vertical */
    }

.Header {
    background-color: #ccc;
    padding-top: 5px;
    padding-bottom: 5px;
    font-size: 1.2em;
}

/* # */
.CustomerDetailsWindow .WidgetBox {
    background-color: none;
}

.circle2 {
    margin-top: 0px;
    margin-bottom: 10px;
    width: 40px;
    height: 40px;
    border-radius: 2px;
    color: #000;
    font-size: 1.2em;
    font-weight: bold;
    line-height: 40px;
    text-align: center;
    background-color: #fff;
    border: solid 2px #ddd;
}

.circle {
    margin-top: 0px;
}

.circle {
    width: 20px;
    height: 20px;
    -moz-border-radius: 10px;
    -webkit-border-radius: 10px;
    border-radius: 10px;
    border: solid 1px lightgrey;
    background-color: #fff;
    margin-right: 3px;
}

.circle4 {
    width: auto;
    height: 100px;
    border: solid 1px lightgrey;
    background-color: #fff;
    margin: 0 auto;
}

.circle_small_round {
    width: 10px;
    height: 10px;
    -moz-border-radius: 10px;
    -webkit-border-radius: 10px;
    border-radius: 10px;
    border: solid 1px lightgrey;
    background-color: #44bd32;
    background-color: var(--green);
    color: #fff;
    margin-right: 3px;
    padding: 10px;
}

.circle3 {
    border-radius: 50%;
    border: solid black 1px;
    padding: 5px;
}

.widget {
    margin-top: -5px;
    margin-left: 5px;
    margin-right: 5px;
    width: 40px;
    height: 40px;
    display: inline-block;
    font-size: 1em;
    font-weight: bold;
    vertical-align: central;
    text-align: center;
    align-self: center;
    align-content: center;
    align-items: center;
}

.jobs {
    color: #5cb85c;
}

    .jobs::after {
        content: "Jobs";
        display: block;
        border-top: solid;
        border-width: 1px;
        font: tahoma;
        font-size: 0.9em;
    }


.quotes {
    color: #5cb85c;
}

    .quotes::after {
        content: "Quotes";
        display: block;
        border-top: solid;
        border-width: 1px;
        font: tahoma;
        font-size: 0.9em;
    }

.headline {
    font-size: 1.6em;
    width: 100%;
    color: #1775c6;
    font-weight: bold;
    border-bottom: solid 1px #000;
}

img.boilerImageBox {
    margin: 5px;
    font-size: 1.2em;
    height: 50%;
    width: 50%;
    align-content: center;
}


/*  SB */
/*!
 * Start Bootstrap - SB Admin 2 Bootstrap Admin Theme (http://startbootstrap.com)
 * Code licensed under the Apache License v2.0.
 * For details, see http://www.apache.org/licenses/LICENSE-2.0.
 */
.navbar-default > .sidebar {
    background-color: white;
}

.navbar-default {
    background-image: none;
    color: white;
    border: none;
}

.navbar-brand {
    margin-top: 5px;
    color: cadetblue;
    text-shadow: initial;
    padding-top: 0px;
    margin-left: -20px;
    margin-bottom: 20px;
    height: 45px;
    width: auto;
}


    .navbar-brand > h1 {
        color: #fff;
    }



a > .navbar-link:hover {
    color: #000;
    font-weight: bold;
    border: solid;
    border-width: 2px;
    border-color: lightgrey;
    text-decoration: none;
}

a .navbar-link:focus {
    text-decoration: none;
    background-color: cornflowerblue;
    color: #000;
    font-weight: bold;
    border-radius: 4px;
}

.navbar-default .navbar-brand {
    color: #ffffff;
}

.ItemTotal {
    margin-top: 5px;
    padding: 5px;
    font-size: 0.9em;
    background-color: inherit;
    text-align: right;
    color: black;
}


#wrapper {
    width: 100%;
}

#page-wrapper {
    padding: 0 15px;
    min-height: 568px;
    background-color: #fff;
}

.navbar-default .navbar-nav > li > a:hover {
    border: none;
    border-bottom: solid 1px cornflowerblue;
    color: #fff;
    margin-bottom: 0px;
}

.navbar-default .navbar-nav > li > a:focus {
    color: #e6802a;
}

.navbar-top-links li {
    display: inline-block;
}

    .navbar-top-links li:last-child {
        margin-right: 15px;
    }

    .navbar-top-links li a {
        min-height: 50px;
    }

    .navbar-top-links li a {
        padding-left: 5px;
        padding-top: 0px;
        padding-bottom: 0px;
        min-height: 50px;
        border-left: solid;
        border-color: yellow;
        border-width: 6px;
        font-size: 1em;
        font-weight: normal;
    }

        .navbar-top-links li a :hover {
            background-color: yellow;
        }

.navbar-top-links .dropdown-menu li {
    display: block;
}

    .navbar-top-links .dropdown-menu li:last-child {
        margin-right: 0;
    }

    .navbar-top-links .dropdown-menu li a {
        padding: 3px 20px;
        min-height: 0;
    }

        .navbar-top-links .dropdown-menu li a div {
            white-space: normal;
        }

.navbar-top-links .dropdown-messages,
.navbar-top-links .dropdown-tasks,
.navbar-top-links .dropdown-alerts {
    width: 310px;
    min-width: 0;
}

.navbar-top-links .dropdown-messages {
    margin-left: 5px;
}

.navbar-top-links .dropdown-tasks {
    margin-left: -59px;
}

.navbar-top-links .dropdown-alerts {
    margin-left: -123px;
}

.navbar-top-links .dropdown-user {
    right: 0;
    left: auto;
}

.sidebar .sidebar-nav.navbar-collapse {
    padding-right: 0;
    padding-left: 0;
}

.sidebar .sidebar-search {
    padding: 15px;
}

.sidebar ul li {
    border-bottom: 1px solid #e7e7e7;
}

    .sidebar ul li a.active {
        background-color: #eee;
    }

.sidebar .arrow {
    float: right;
}

.sidebar .fa.arrow:before {
    content: "\f104";
}

.sidebar .active > a > .fa.arrow:before {
    content: "\f107";
}

.sidebar .nav-second-level li,
.sidebar .nav-third-level li {
    border-bottom: 0 !important;
}

    .sidebar .nav-second-level li a {
        padding-left: 37px;
    }

    .sidebar .nav-third-level li a {
        padding-left: 52px;
    }

@media(min-width:768px) {
    .sidebar {
        z-index: 1;
        position: absolute;
        width: 250px;
        margin-top: 51px;
    }


    .navbar-top-links .dropdown-messages,
    .navbar-top-links .dropdown-tasks,
    .navbar-top-links .dropdown-alerts {
        margin-left: auto;
    }
}

.chat {
    margin: 0;
    padding: 0;
    list-style: none;
}

    .chat li {
        margin-bottom: 10px;
        padding-bottom: 5px;
        border-bottom: 1px dotted #999;
    }

        .chat li.left .chat-body {
            margin-left: 60px;
        }

        .chat li.right .chat-body {
            margin-right: 60px;
        }

        .chat li .chat-body p {
            margin: 0;
        }

    .panel .slidedown .glyphicon,
    .chat .glyphicon {
        margin-right: 5px;
    }

.panel a {
    padding-bottom: 5px;
}

.chat-panel .panel-body {
    height: 350px;
    overflow-y: scroll;
}

.login-panel {
    margin-top: 25%;
}

.flot-chart {
    display: block;
    height: 400px;
}

.flot-chart-content {
    width: 100%;
    height: 100%;
}

table.dataTable thead .sorting,
table.dataTable thead .sorting_asc,
table.dataTable thead .sorting_desc,
table.dataTable thead .sorting_asc_disabled,
table.dataTable thead .sorting_desc_disabled {
    background: 0 0;
}

    table.dataTable thead .sorting_asc:after {
        content: "\f0de";
        float: right;
        font-family: fontawesome;
    }

    table.dataTable thead .sorting_desc:after {
        content: "\f0dd";
        float: right;
        font-family: fontawesome;
    }

    table.dataTable thead .sorting:after {
        content: "\f0dc";
        float: right;
        font-family: fontawesome;
        color: rgba(50,50,50,.5);
    }

.btn-circle {
    width: 30px;
    height: 30px;
    padding: 6px 0;
    border-radius: 15px;
    text-align: center;
    font-size: 1em;
    line-height: 1.428571429;
}

    .btn-circle.btn-lg {
        width: 50px;
        height: 50px;
        padding: 10px 16px;
        border-radius: 25px;
        font-size: 1.4em;
        line-height: 1.33;
    }

    .btn-circle.btn-xl {
        width: 70px;
        height: 70px;
        padding: 10px 16px;
        border-radius: 35px;
        font-size: 2em;
        line-height: 1.33;
    }

.show-grid [class^=col-] {
    padding-top: 10px;
    padding-bottom: 10px;
    border: 1px solid #ddd;
    background-color: #eee !important;
}

.show-grid {
    margin: 15px 0;
}



.panel {
    margin-bottom: 10px;
    padding-top: 0px;
    background-color: #fff;
    border: 1px solid lightgrey;
    border-radius: 0px;
}



.panel-default {
    background-color: none;
    border-left-color: #fff;
    border-left-width: 2px;
}


.panel-green {
    border-color: #5cb85c;
}

    .panel-green .panel-heading {
        border-color: #5cb85c;
        color: #fff;
        background-color: #5cb85c;
    }

    .panel-green a {
        color: #5cb85c;
    }

        .panel-green a:hover {
            color: #3d8b3d;
        }

.panel-light-blue {
    border-color: #787676;
}

    .panel-light-blue .panel-heading {
        border-color: #3c948b;
        color: #fff;
        background-color: #3c948b;
    }

    .panel-light-blue a {
        color: #5cb85c;
    }

        .panel-light-blue a:hover {
            color: #3d8b3d;
            font-weight: bold;
            font-size: 1.1em;
        }



.panel-red {
    border-color: #d9534f;
}

    .panel-red .panel-heading {
        border-color: #d9534f;
        color: #fff;
        background-color: #d9534f;
    }

    .panel-red a {
        color: #d9534f;
    }

        .panel-red a:hover {
            color: #b52b27;
        }

.panel-yellow {
    border-color: #f0ad4e;
}

    .panel-yellow .panel-heading {
        border-color: #f0ad4e;
        color: #fff;
        background-color: #f0ad4e;
    }

    .panel-yellow a {
        color: #f0ad4e;
    }

        .panel-yellow a:hover {
            color: #df8a13;
        }


.itemSection {
    border: none;
    border-bottom: solid;
    color: black;
}

.row .bottom-line {
    border-bottom: solid;
    border-width: 1px;
    border-color: darkgrey;
    margin-bottom: 5px;
}

/* The inputs have a right border */
.bottom-line > input {
    border-right: solid;
}

    /* The inputs have a right border */
    .bottom-line > input .last-field {
        border-right: none;
    }


.panel-default > .panel-heading {
    background-color: #fff;
}

.panel-projects {
    border: none;
    border-bottom: solid 1px #eee;
    border-left-width: 2px;
}

.panel-customermessage {
    background-color: #EA2027;
    background-color: var(--red);
}


.panel-quotes {
    border: none;
    border-bottom: solid 1px #eee;
    border-left-width: 2px;
    margin-bottom: 2px;
}

.panel-systems {
    border: none;
    border-bottom: solid 1px #eee;
    border-left-width: 2px;
}

.panel-enquiries {
    border: none;
    border-bottom: solid 1px #eee;
    border-left-width: 2px;
}

.panel-suppliers {
    background-color: none;
    border-left-color: #aa1d0e;
    border-left-width: 2px;
}

.panel-buildings {
    border: none;
    border-bottom: solid 1px #eee;
    border-left-width: 2px;
}

.panel-boilers {
    border: none;
    border-bottom: solid 1px #eee;
    border-left-width: 2px;
}

.panel-costing {
    border: none;
    border-bottom: solid 1px #eee;
    border-left-width: 2px;
}

.panel {
    border-radius: 0px;
}

.panel-heading {
    border-top: solid 2px #fafafa;
    border-radius: 0px;
    background-color: #fff;
    padding: 0px 0px 0px 0px;
    border-width: 2px;
    margin: 0 0 0 0;
    font-size: 1em;
}

    .panel-heading:hover {
        background-color: #fcfcfc;
    }


.default-flag {
    border: solid 1px #ddd;
    background-color: #fff;
}

.green-flag {
    background-color: #44bd32;
    background-color: var(--green);
    color: white;
}

.white-flag {
    color: white;
}

.green-flag-inverse {
    font-weight: bold;
    color: #44bd32;
    color: var(--green);
}

.black-flag {
    background-color: #333;
    color: white;
}

.black-flag-inverse {
    font-weight: bold;
    color: #333;
}

.red-flag {
    background-color: #EA2027;
    background-color: var(--red);
    color: white;
}

.red-flag-inverse {
    font-weight: bold;
    color: #EA2027;
    color: var(--red);
}

.customer-flag {
    background-color: #3c777d;
    color: white;
}

.warning-flag {
    background-color: #f2b4b4;
    color: #000;
}

.dataChanged {
    color: #d9534f;
    font-style: italic;
}

.amber-flag {
    background-color: #fd7e14;
    background-color: var(--orange);
    color: white;
}

.amber-flag-inverse {
    font-weight: bold;
    color: #fd7e14;
    color: var(--orange);
}


.lightgreen-flag {
    background-color: darkseagreen;
    color: #fff;
}

.lightgrey-flag {
    background-color: #ad8d3f;
    color: #fff;
}

.panel-heading a {
    font-size: 1em;
    margin-left: 0px;
    margin-top: 0px;
    color: #333;
    /*border-color: yellow;*/
    border-width: 1px;
    border-color: grey;
    border-radius: 4px;
    padding: 10px;
    display: flex;
    justify-content: flex-start; /* align horizontal */
    align-items: center; /* align vertical */
    width: 100%;
}

    .panel-heading a:hover {
        color: #333;
        border-width: 2px;
        text-decoration: none;
    }

    .panel-heading a:focus {
        text-decoration: none;
        font-weight: bold;
        border-radius: 4px;
    }

.panel-footer {
    background-color: inherit;
    border: none;
    margin-top: -2px;
    border-top: solid 1px #eee;
}

#SaveBar {
    display: table-cell;
    vertical-align: middle;
    padding: 0 0 0 0px;
    position: fixed;
    z-index: 10004;
    bottom: 0%;
    color: #fff;
    background-color: #000;
    opacity: 0.95;
    right: 0px;
    width: 100%;
}

.documentPreviewBannerTop {
    position: fixed;
    z-index: 10004;
    border-top: 1px solid #bdc3c7;
    width: inherit;
    padding-top: 20px;
    padding-bottom: 20px;
    background-color: rgba(255, 255, 255,0.3);
    -webkit-backdrop-filter: blur(10px);
    backdrop-filter: blur(10px);
}

.saveModal {
    height: 80px;
    position: fixed;
    z-index: 10004;
    bottom: 0;
    left: 0;
    border-top: 1px solid #bdc3c7;
    width: 100%;
    padding-top: 20px;
    padding-bottom: 20px;
    background-color: rgba(255, 255, 255,0.3);
    -webkit-backdrop-filter: blur(10px);
    backdrop-filter: blur(10px);
}

    .saveModal .btn {
        font-size: 16px;
        margin-left: 5px;
    }

    .saveModal .btn-primary {
        box-shadow: 1px 7px 10px rgba(63, 81, 181, 0.33);
    }

    .saveModal .btn-danger {
        box-shadow: 1px 7px 10px rgba(204, 0, 0, 0.33);
    }

ul.featureList {
    list-style: none;
    font-size: 1.5em;
    font-weight: bold;
    color: #333;
}

    ul.featureList > li.notAvailable {
        color: #aaa;
        text-decoration: line-through;
    }

.small {
    font-size: 0.9em;
}

.header-links {
    color: black;
    font-size: 1.2em;
    border-color: yellow;
    border-left: solid;
    border-width: 3px;
    padding: 0px;
}

.ItemCountBox {
    height: 100%;
    width: 50px;
    text-align: center;
    margin: 10px;
    font-size: 1.2em;
    background-color: yellow;
    color: darkseagreen;
}

.loginBox {
    margin-top: 20px;
    padding: 20px;
    border: solid 1px #ddd;
    background-color: #fcfcfc;
    border-radius: 4px;
    box-shadow: 0 3px 5px -1px hsl(0, 0%, 40%), inset 4px 1px 6px -8px black;
}

.form-horizontal .control-label {
    padding-top: 7px;
    margin-bottom: 0;
    text-align: left;
    font-size: 1.2em;
}

form-horizontal {
    margin: 10px;
    padding: 15px;
}

.quoteDocSelector {
    background-color: #fff;
    border-color: black;
    border-width: 1px;
    padding-bottom: 10px;
    font-size: 1.2em;
}

a.quoteDocSelector:hover {
    background-color: lightgrey;
    text-decoration: none;
    color: white;
}

.searchBox {
    background-color: cadetblue;
    padding-top: 10px;
    padding-bottom: 10px;
    border-radius: 4px;
}

.loader {
    left: 0px;
    top: 20px;
    height: 20px;
    width: 20px;
    opacity: 0.95;
    z-index: 9999;
    padding: 20px;
    position: fixed;
    z-index: 9999;
    bottom: 0%;
    background-color: #f0ad4e;
}

/* SLIDE THREE */
.slideThree {
    width: 80px;
    height: 26px;
    background: #333;
    margin: 20px auto;
    -webkit-border-radius: 50px;
    -moz-border-radius: 50px;
    border-radius: 50px;
    position: relative;
    -webkit-box-shadow: inset 0px 1px 1px rgba(0,0,0,0.5), 0px 1px 0px rgba(255,255,255,0.2);
    -moz-box-shadow: inset 0px 1px 1px rgba(0,0,0,0.5), 0px 1px 0px rgba(255,255,255,0.2);
    box-shadow: inset 0px 1px 1px rgba(0,0,0,0.5), 0px 1px 0px rgba(255,255,255,0.2);
}

    .slideThree:after {
        content: 'YES';
        font: 12px/26px Arial, sans-serif;
        color: #fff;
        position: absolute;
        right: 10px;
        z-index: 0;
        font-weight: bold;
        text-shadow: 1px 1px 0px rgba(255,255,255,.15);
    }

    .slideThree:before {
        content: 'NO';
        font: 12px/26px Arial, sans-serif;
        color: #00bf00;
        position: absolute;
        left: 10px;
        z-index: 0;
        font-weight: bold;
    }

    .slideThree label {
        display: block;
        width: 34px;
        height: 20px;
        -webkit-border-radius: 50px;
        -moz-border-radius: 50px;
        border-radius: 50px;
        -webkit-transition: all .4s ease;
        -moz-transition: all .4s ease;
        -o-transition: all .4s ease;
        -ms-transition: all .4s ease;
        transition: all .4s ease;
        cursor: pointer;
        position: absolute;
        top: 3px;
        left: 3px;
        z-index: 1;
        -webkit-box-shadow: 0px 2px 5px 0px rgba(0,0,0,0.3);
        -moz-box-shadow: 0px 2px 5px 0px rgba(0,0,0,0.3);
        box-shadow: 0px 2px 5px 0px rgba(0,0,0,0.3);
        background: #fcfff4;
        background: -webkit-linear-gradient(top, #fcfff4 0%, #dfe5d7 40%, #b3bead 100%);
        background: -moz-linear-gradient(top, #fcfff4 0%, #dfe5d7 40%, #b3bead 100%);
        background: -o-linear-gradient(top, #fcfff4 0%, #dfe5d7 40%, #b3bead 100%);
        background: -ms-linear-gradient(top, #fcfff4 0%, #dfe5d7 40%, #b3bead 100%);
        background: linear-gradient(top, #fcfff4 0%, #dfe5d7 40%, #b3bead 100%);
        filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#fcfff4', endColorstr='#b3bead',GradientType=0 );
    }

    .slideThree input[type=checkbox]:checked + label {
        left: 43px;
    }

.UserLogo {
    height: 70px;
    width: 70px;
    background-color: white;
    border-color: black;
    box-shadow: 0 3px 5px -1px hsl(0, 0%, 40%), inset 4px 1px 6px -8px black;
    margin-bottom: 20px;
    float: right;
    border-radius: 10px;
}

.SiteLogo {
    height: 100px;
    width: 100%;
    background-image: url('../Images/backgrounds/woodpanels.jpg');
    padding: 15px;
    font-family: Montserrat;
    background-color: black;
}

    .SiteLogo > h2 {
        opacity: 0.7;
        background-color: white;
        padding: 20px;
        font-size: 2.3em;
        width: 240px;
        font-weight: bold;
        border-radius: 10px;
    }

        .SiteLogo > h2 > span {
            font-size: 1em;
            font-style: italic;
        }


.btn-file {
    position: relative;
    overflow: hidden;
}

    .btn-file input[type=file] {
        position: absolute;
        top: 0;
        right: 0;
        min-width: 100%;
        min-height: 100%;
        font-size: 1em;
        text-align: right;
        filter: alpha(opacity=0);
        opacity: 0;
        outline: none;
        background: white;
        cursor: inherit;
        display: block;
    }

    .btn-file input[type=submit] {
        position: absolute;
        top: 0;
        right: 0;
        min-width: 100%;
        min-height: 100%;
        font-size: 1em;
        text-align: right;
        filter: alpha(opacity=0);
        opacity: 0;
        outline: none;
        background: white;
        cursor: inherit;
        display: block;
    }

.rightText {
    text-align: right;
}

.templateList {
    margin-left: 0px;
    margin-top: 5px;
    padding: 5px;
    font-size: 1em;
    border: 1px solid lightgrey;
    font-weight: bold;
    background-color: #fff;
    border-radius: 2px;
}

    .templateList:hover {
        cursor: pointer;
        background-color: #ffffe8;
        text-decoration: none;
        cursor: pointer;
        background-color: #ffffe8;
    }

    .templateList .primary {
        background-color: rgb(217, 83, 79);
        color: white;
    }

    .templateList:after {
        background-color: grey;
        color: white;
        font-style: italic;
    }



a > .templateItem:focus {
    background-color: #428bca;
    color: white;
}

a > .templateItem {
    margin-top: 5px;
}

.input-group {
    border: solid 1px #eee;
    border-radius: 4px;
    margin: 1px -10px 10px 0px;
    padding: 20px;
    background-color: #fff;
    width: 100%;
}

#DashboardPage .input-group {
    box-shadow: 0 3.2px 7.2px 0 rgba(0, 0, 0, .132),0 .6px 1.8px 0 rgba(0, 0, 0, .108);
}

.input-group > label {
    color: grey;
}

.input-group > .projects {
    background-color: cornflowerblue;
}


input-group {
    position: relative;
    margin-bottom: 20px;
    padding: 20px;
    background-color: #96a5be;
}

    input-group:last-child {
        margin-bottom: 0;
    }

    input-group:before, input-group:after {
        display: block;
        position: absolute;
        width: 40px;
        height: 40px;
        top: 0;
        right: 0;
        content: "";
    }

    input-group:before {
        border-top: solid 20px #fff;
        border-right: solid 20px #fff;
        border-left: solid 20px transparent;
        border-bottom: solid 20px transparent;
    }

    input-group:after {
        border-bottom: solid 20px #5b7093;
        border-left: solid 20px #5b7093;
        border-right: solid 20px transparent;
        border-top: solid 20px transparent;
    }

.left-inner-addon {
    position: relative;
}

    .left-inner-addon input {
        padding-left: 30px;
    }

    .left-inner-addon i {
        position: absolute;
        padding: 10px 12px;
        pointer-events: none;
    }

.right-inner-addon {
    position: relative;
}

    .right-inner-addon input {
        padding-right: 30px;
    }

    .right-inner-addon i {
        position: absolute;
        right: 0px;
        padding: 5px 20px;
        pointer-events: none;
    }

.mainView {
    border: solid 1px black;
}

.dropdown-menu {
    font-size: 0.9em;
}

.cs1 {
    background-color: #f0f0f0;
    color: black;
    border: solid 1px #f0f0f0;
}

.cs2 {
    background-color: #f6f6f6;
    border: solid 1px #f6f6f6;
    color: black;
}

.cs3 {
    background-color: #fcfcfc;
    color: black;
    border: solid 1px #fcfcfc;
}

.disabled {
}

.fullScreenImage {
    max-width: 100%;
    max-height: 100%;
    bottom: 0;
    left: 0;
    margin: auto;
    overflow: auto;
    position: fixed;
    right: 0;
    top: 0;
}

#DB {
    background-color: white;
    padding: 10px 10px 10px 10px;
    vertical-align: middle;
}

.bold {
    font-weight: bold;
}

.subText {
    font-size: 0.8em;
}

.subTextLight {
    font-style: italic;
    color: #aaa;
    font-size: 0.8em;
}

.btn .subText {
    font-size: 1em;
    font-style: italic;
}

.previewCostingSection {
    font-size: 1.0em;
    font-weight: normal;
    margin-top: 0px;
    padding: 5px 0 5px 0;
    color: #666;
    background-color: inherit;
}

.previewCostingSectionNoBorder {
    font-size: 1.0em;
    font-weight: normal;
    margin-top: 0px;
    padding: 5px 0 5px 0;
    border-left: none;
}

.previewCostingSectionHeading {
    font-size: 1.2em;
}


.previewCostingSection > .panel-footer {
    margin-right: -20px;
}

.previewItemTotal {
    font-size: 1em;
    text-align: right;
    margin-right: 15px;
}

.previewItemTotal2 {
    font-weight: bold;
    font-size: 1em;
    color: #666;
    margin-right: -5px;
}

.previewItemTotal3 {
    font-weight: bold;
    font-size: 1em;
    color: #444;
    margin-right: -5px;
}

.previewItemTotal4 {
    font-weight: bold;
    font-size: 1em;
    color: #f8342e;
    margin-right: -5px;
}

.previewItemTotal5 {
    font-weight: bold;
    font-size: 1.4em;
    color: #666;
    margin-right: -5px;
}

h1, h2, h3, h4, h5, h6 {
    color: #333;
}

.highlightable:hover {
    background-color: #f7f7f7;
    width: inherit;
    cursor: pointer;
}

.notHighlightable:hover {
    background-color: #fff;
    width: inherit;
    cursor: default;
}

.vcentre {
    display: inline-block;
    vertical-align: middle;
    float: none;
    height: 500px;
}

.highlight:hover {
    background-color: #fcf38a;
    color: #222;
}

.box {
    border: solid 1px lightgrey;
}

.costingBox {
    padding: 20px;
    margin-top: 20px;
    border: solid 1px lightgrey;
    background-color: #fbedda;
}

.page-description-heading {
    width: 100%;
    border-bottom: solid 1px darkgrey;
    font-size: 2em;
}

.pageLocked {
    margin-top: 10px;
    padding: 5px;
    border: solid 1px grey;
    color: white;
    background: #EA2027;
    background: var(--red);
}

    .pageLocked:hover {
        cursor: pointer;
    }

.pageUnlocked {
    margin-top: 10px;
    padding: 5px;
    border: solid 1px grey;
    color: white;
    background-color: #44bd32;
    background-color: var(--green);
}

    .pageUnlocked:hover {
        cursor: pointer;
    }


.previewDocumentWarning {
    color: #ccc;
}

.filterSection {
    padding: 10px;
    margin: 5px;
    margin-bottom: 10px;
    background-color: #fcfcfc;
    border-left: solid 1px #fcfcfc;
    color: #333;
    margin: -10px -20px;
}

    .filterSection label {
        font-size: 1em;
        font-style: italic;
        color: #555;
    }

    .filterSection .specialText {
        padding: 5px;
        padding-top: 5px;
        padding-bottom: 5px;
        color: #777;
        font-size: 1.2em;
        font-weight: bold;
        height: 40px;
        border: solid 1px #ced4da;
        background-color: #fff;
        border-radius: 4px;
    }

.startPageHighlightBox {
    font-size: 1em;
    margin: 10px;
    border: solid 1px lightgrey;
    padding: 4px;
    background-color: white;
    color: #555;
    word-break: normal;
    border-radius: 4px;
}

.btn-circle-large {
    width: 60px;
    height: 60px;
    text-align: center;
    font-size: 12px;
    line-height: 1.42;
}

.infoBox {
    padding: 10px;
    border: solid 0.5px #ddd;
    margin-bottom: 10px;
    height: 100%;
    color: #3f51b5;
    color: var(--primary);
    background-color: #fff;
    text-align: left;
    box-shadow: 0 3px 5px -1px hsl(0, 0%, 40%), inset 4px 1px 6px -8px black;
}

    .infoBox:hover {
        background-color: #fcfcfc;
    }

    .infoBox > .heading {
        font-size: 1.4em;
        font-weight: bold;
        width: 100%;
        color: #555;
    }

    .infoBox > .small {
        font-size: 1.5em;
    }

    .infoBox > .body {
        color: #666;
        font-size: 1.3em;
        padding: 10px;
        width: 100%;
    }

        .infoBox > .body > ul {
            list-style: none;
            font-size: 0.8em;
            margin-left: -30px;
        }

    .infoBox > .footer {
        width: 100%;
        border-top: solid 1px lightgrey;
        float: right;
    }

.showFilters {
    padding: 15px;
    margin-left: 15px;
    color: #333;
    text-decoration: none;
    border: solid 1px #eee;
    border-left: solid 2px #edcc5a;
}

a > .showFilters {
    text-decoration: none;
}

.showFilters:hover {
    background-color: #f8f8f8;
    text-decoration: none;
    color: #333;
}

.btn {
    font-size: 12px;
}

.goLink {
    font-family: montserrat;
    padding: 5px;
    margin-left: 10px;
    color: #333;
    font-weight: 700;
    text-decoration: none;
}

a > .goLink {
    text-decoration: none;
}

.goLink:hover {
    text-decoration: none;
    color: #999;
}

.back-to-top {
    background: none;
    margin: 0;
    position: fixed;
    bottom: 0;
    right: 0;
    width: 70px;
    height: 70px;
    z-index: 100;
    display: none;
    text-decoration: none;
    color: #ffffff;
    background-color: #ff9000;
}

#customerDetails .customer-note {
    color: black;
    border: 1px solid #eee;
    border-radius: 4px;
    margin-bottom: 10px;
    padding: 10px;
    min-height: 70px;
    position: relative;
}

    #customerDetails .customer-note.minimised {
        max-height: 70px;
        overflow: hidden;
    }

    #customerDetails .customer-note .meta {
        position: absolute;
        top: 0px;
        right: 10px;
        font-size: 8px;
    }

    #customerDetails .customer-note .buttons {
        position: absolute;
        top: 15px;
        right: 10px;
    }

    #customerDetails .customer-note .button {
    }

    #customerDetails .customer-note .created-by, #customerDetails .customer-note .created-on {
        font-style: italic;
        color: #555;
        font-size: 0.8em;
    }

#TemplateGallery {
    user-select: none;
}

    #TemplateGallery .grid-container {
        padding: 10px;
        margin-left: 10px;
    }

        #TemplateGallery .grid-container .grid-item {
            padding: 10px;
            height: 300px;
            padding-left: 0;
        }

            #TemplateGallery .grid-container .grid-item .template-label {
                text-align: center;
            }

            #TemplateGallery .grid-container .grid-item .template-item {
                border: 1px solid #ccc;
                margin: 0;
                padding: 0px;
                font-size: 16px;
                width: 200px;
                max-width: 200px;
                height: 280px;
                overflow: hidden;
                position: relative;
                box-shadow: 1px 2px 4px rgba(0,0,0,0.1);
                background-color: #fff;
            }

                #TemplateGallery .grid-container .grid-item .template-item .image-container {
                    padding: 15px;
                    height: 100px;
                    overflow: hidden;
                }

                    #TemplateGallery .grid-container .grid-item .template-item .image-container img {
                        width: 100%;
                        margin: auto auto;
                    }

                #TemplateGallery .grid-container .grid-item .template-item .description {
                    font-weight: bold;
                    font-size: 21px;
                    line-height: 21px;
                    height: 43px;
                    overflow: hidden;
                    margin-top: 15px;
                    padding: 0px 13px;
                }

                #TemplateGallery .grid-container .grid-item .template-item .price-placeholder {
                    margin-top: 10px;
                    width: 180px;
                    height: 80px;
                }

    #TemplateGallery .hover-overlay {
        position: absolute;
        width: 100%;
        height: 100%;
        background: rgba(0,0,0,0.7);
        top: 0;
        left: 0;
        cursor: pointer;
        z-index: 2;
    }

    #TemplateGallery .hover-content {
        padding: 12px;
        color: #f5f6fa;
    }

    #TemplateGallery .hover-overlay .hover-content .button-container {
        position: absolute;
        /* right: 12px; */
        margin: 0 auto;
        bottom: 45%;
        width: 100%;
        left: 0px;
    }

        #TemplateGallery .hover-overlay .hover-content .button-container button {
            margin-bottom: 5px;
            font-size: 12px;
        }

.edit-user-access-permissions-modal {
}

    .edit-user-access-permissions-modal ul {
        list-style: none;
    }

    .edit-user-access-permissions-modal .permissions-tree {
        width: 45%;
        margin-bottom: 100px;
        display: inline-block;
        vertical-align: top;
        padding-left: 30px;
    }

        .edit-user-access-permissions-modal .permissions-tree > li {
            /* first level only*/
            margin-bottom: 5px;
        }

        .edit-user-access-permissions-modal .permissions-tree label {
            display: inline;
            cursor: pointer;
        }
/* device specific styles*/
.btn.dropdown-toggle {
    min-width: 40px;
}

.tag-list-item {
    margin-bottom: 5px;
}

#registration .policy-link {
    margin-top: 10px;
}

#registration .btn {
    margin-top: 10px;
    font-size: 16px;
}

#messages #editMessages #dropdownMenu2 {
    min-width: 80px;
    margin: 10px;
}

.invoiceListBucketContainer {
}

#dashboard h3 {
    color: #3f51b5;
    color: var(--primary);
}

#dashboard .headline-number-heading {
    color: #343a40;
    color: var(--gray-dark);
}

#dashboard .headline-number {
    color: #546e7a;
    color: var(--secondary);
    font-size: 4em;
}

#dashboard .status-count {
    font-size: 1.5em;
}

#dashboard .status-label {
    font-size: 1.1em;
    color: #343a40;
    color: var(--gray-dark);
    display: block;
}

#dashboard .empty-section-label {
    text-align: left;
    font-size: 2em;
}

#PaymentSchedules .payment-schedule {
    min-height: 30px;
}

.card {
    color: #343a40;
    color: var(--gray-dark);
    background: white;
    background: var(--white);
    border-radius: 4px;
    padding: 10px;
    padding-bottom: 40px;
    min-width: 175px;
    overflow: hidden;
    position: relative;
    box-shadow: 0 4px 5px 0 rgba(0,0,0,0.14), 0 1px 10px 0 rgba(0,0,0,0.12), 0 2px 4px -1px rgba(0,0,0,0.20);
}

.moreOptionsPriceTitle {
    color: #333;
    font-size: 1.2em;
    font-weight: bold;
}

.moreOptionsPrice {
    font-size: 2em;
}

/* device specific styles
*/
/* Portrait and Landscape */
@media only screen and (min-device-width: 300px) and (max-device-width: 760px) and (-webkit-min-device-pixel-ratio: 2) {

    .document-header, .document-footer {
        padding-left: 30px;
        padding-right: 30px;
    }

    #intercom-container, .intercom-lightweight-app {
        display: none !important; /* don't show intercom widget on mobiles */
        margin-bottom: 100px !important;
    }

    #costing_top {
        padding: 0;
    }

    .previewBarPadding {
        left: 0;
    }

    #QuoteList .quoteListBucket {
        min-height: unset;
    }

    .fadeInLeft {
        -webkit-animation-name: none;
        animation-name: none;
    }

    .offerBanner {
        min-height: 100px;
    }

    .spacedImage {
        float: left;
    }

    .sidePanelFixed {
        position: relative;
        right: auto;
        overflow: auto;
        background-color: white;
        color: #333;
        padding-right: 0;
        padding-bottom: 0;
        margin-top: 0;
        box-shadow: none;
    }

    .documentPanelFixedLeft {
        left: 0;
        height: 100%;
        overflow: auto;
        background-color: inherit;
        color: #fff;
        padding-left: 10px;
        padding-bottom: 60px;
        margin-top: 10px;
        box-shadow: -5px 0 20px -5px #eee;
    }

    .documentBanner {
        margin-right: -25px;
    }

    .fadeInRight {
        -webkit-animation-name: none;
        animation-name: none;
    }

    .fadeInUp {
        -webkit-animation-name: none;
        animation-name: none;
    }

    .fadeInDown {
        -webkit-animation-name: none;
        animation-name: none;
    }

    .filterSection {
        border: solid 1px #eee;
        padding: 10px;
        margin: 5px;
        margin-bottom: 10px;
        border-radius: 2px;
        box-shadow: none;
    }

    .moveItemParentLevel1 {
        position: absolute;
        left: 0px;
        margin-top: 0px;
    }

    .moveItemParentLevel2 {
        position: absolute;
        left: 5px;
        margin-top: 0px;
    }

    .moveItemParentLevel3 {
        position: absolute;
        left: 10px;
        margin-top: 0px;
    }

    .ng-modal-dialog {
        z-index: 10004;
        position: fixed;
        min-width: 300px;
        width: 100%;
        height: 100%;
        right: 0;
        box-shadow: 4px 4px 80px #888;
        opacity: 1;
        font-size: 1em;
        background-color: #fff;
        top: 0;
        animation: modal-slide 0.2s;
    }

    .lateInvoice {
        position: absolute;
        border: solid 1px #eee;
        padding: 5px 10px 5px 10px;
        top: -20px;
        left: -5px;
        background-color: #EA2027;
        background-color: var(--red);
        font-size: 0.6em;
        color: white;
        border-radius: 20px;
        box-shadow: 0 3px 5px -1px hsl(0, 0%, 40%), inset 4px 1px 6px -8px black;
    }

    body {
        flood-opacity: 1;
        font-kerning: auto;
        font-size: 1em;
        background-color: #fff;
        background-attachment: fixed;
        background-image: none;
        width: auto !important; /* Firefox will set width as auto */
        /*padding-bottom: 55px;*/
    }

    .dropdown-menu {
        margin-top: 0;
        border-top-left-radius: 2px;
        border-top-right-radius: 2px;
        background-color: #fcfcfc;
    }

        .dropdown-menu > li > a {
            display: block;
            padding: 3px 20px;
            clear: both;
            font-weight: 400;
            line-height: 1.42857143;
            white-space: nowrap;
            font-weight: bold;
        }

    eager-side-nav-button {
        top: 1em !important;
        left: 1em !important;
    }

    .dashboard-input-group {
        border: solid 1px #eee;
        margin: 10px -20px 10px 0px;
        padding: 10px;
        background-color: #fcfcfc;
        width: 100%;
    }

    .btn {
        font-size: 10px;
    }



    .costingBox {
        padding: 10px;
        border: solid 1px lightgrey;
        background-color: #fbedda;
    }

    .previewItemTotal {
        text-align: right;
        margin-right: 15px;
    }

    .itemRow {
        font-size: 0.9em;
    }

    .previewItemTotal2 {
        font-weight: bold;
        font-size: 1em;
        margin-right: -5px;
    }

    .previewItemTotal3 {
        font-weight: bold;
        font-size: 1em;
        color: #444;
        margin-right: -5px;
    }

    .previewItemTotal4 {
        font-weight: bold;
        font-size: 1em;
        color: #f8342e;
        margin-right: -5px;
    }

    .previewItemTotal5 {
        font-weight: bold;
        font-size: 1.2em;
        /*color: var(--green);*/
        margin-right: -5px;
    }

    .documentPage {
        min-width: 290px;
        padding: 0px;
        border: solid 1px #aaa;
        max-width: 21cm;
        min-height: 400px;
        position: relative;
        font-size: 1em;
        margin: 0 auto;
        background-color: #fff;
    }



    .dashboardCost {
        font-size: 1.2em;
        font-weight: bold;
        padding: 5px;
        margin-top: 10px;
        margin-bottom: 5px;
        border-left: solid 1px #ddd;
        color: grey;
    }

    .showFilters {
        padding: 15px;
        margin-left: 15px;
        color: #333;
        text-decoration: none;
        border: solid 1px lightgrey;
        border-left: solid 2px #edcc5a;
    }

    a > .showFilters {
        text-decoration: none;
    }

    .showFilters:hover {
        background-color: #f8f8f8;
        text-decoration: none;
        color: #333;
    }

    .nav-tabs {
        font-size: 1.2em;
        margin-left: -10px;
        margin-right: -10px;
    }

    .costingSection {
        margin-top: 15px;
        margin-left: -10px;
        margin-right: -15px;
        color: black;
        border-style: solid;
        border-color: #eee;
        padding: 0px;
        border-width: 1px;
        border-radius: 4px;
    }

    .costingSectionItem {
        margin-top: -2px;
        margin-left: -10px;
        margin-right: -10px;
        margin-bottom: 0px;
        color: black;
        border-left: 1px solid darkgrey;
        border-right: 1px solid darkgrey;
        border-radius: 0px;
        background-color: white;
        padding: 0px;
        padding-left: 0px;
    }

        .costingSectionItem > input {
            margin-top: 3px;
        }


    .optional {
        border-radius: 0px;
        background-color: #fff;
        padding: 5px;
        padding-bottom: 15px;
        border-left: solid 2px orange;
        /*font-style: italic !important;*/
    }

    .huge {
        font-size: 1.5em;
        padding: 0px;
        margin-top: 20px;
    }

    .paidCostingSectionItem {
        border-left: solid 4px green;
    }

    .panel {
        margin-right: -9px;
        margin-left: -9px;
        padding: 2px 2px 0px 0px;
        background-color: #fff;
    }

        .panel a {
            padding-bottom: 5px;
        }

    .panel-footer {
        margin-left: 0px;
        margin-right: 0px;
    }

    .costingSheet {
        padding: 2px;
        margin-left: -15px;
        margin-right: -15px;
    }

    .loginBox {
        margin-top: 20px;
        padding: 20px;
        border-width: 1px;
        background-color: #fcfcfc;
        box-shadow: none;
        border-radius: 4px;
    }

    .costSummary {
        margin-top: 10px;
        margin-left: 0px;
        margin-right: 0px;
        margin-bottom: 0px;
        font-weight: bold;
        background-color: #E8E8E8;
        border-top: dotted;
        border-width: 1px;
        border-color: lightgrey;
        padding: 5px;
        color: black;
    }

    .view {
        margin-right: -10px;
        padding: 10px;
    }

    #QuoteList .quoteListBucketContainer {
        padding-right: 15px;
        margin: 0 0 15px 0;
    }
}

@media only screen and (min-device-width: 768px) and (max-device-width: 1024px) and (-webkit-min-device-pixel-ratio: 2) {
    body {
        flood-opacity: 1;
        font-kerning: auto;
        font-size: 1em;
        background-attachment: fixed;
        width: auto !important; /* Firefox will set width as auto */
    }

    .previewBarPadding {
        left: 0;
    }

    .moveItemParentLevel1 {
        position: absolute;
        left: 0px;
        margin-top: 0px;
    }

    .moveItemParentLevel2 {
        position: absolute;
        left: 5px;
        margin-top: 0px;
    }

    .moveItemParentLevel3 {
        position: absolute;
        left: 10px;
        margin-top: 0px;
    }

    eager-side-nav-button {
        top: 1em !important;
        left: 1em !important;
    }

    .dashboard-input-group {
        border: solid 1px #eee;
        margin: 10px -20px 10px 0px;
        padding: 10px;
        background-color: #fcfcfc;
        width: 100%;
    }

    .documentPageTermsAndConditions {
        font-size: 0.8em;
        margin: 20px -20px -20px -20px;
        padding: 20px;
        border: none 1px #ddd;
        border-radius: 0px;
        background-color: #eee;
        position: relative;
        bottom: 100%;
    }

    .documentPage {
        padding: 30px;
        border: solid 1px lightgrey;
        max-width: 21cm;
        min-height: 29.7cm;
        position: relative;
        font-size: 1em;
        margin: 0px auto;
        background-color: #fff;
    }

    .dashboardCost {
        font-size: 1.4em;
        font-weight: bold;
        padding: 5px;
        margin-top: 10px;
        margin-bottom: 5px;
        border-left: solid 1px #ddd;
        color: grey;
    }

    .costingSection {
        margin-top: 15px;
        margin-left: -10px;
        margin-right: -15px;
        font-weight: bold;
        color: black;
        border-style: solid;
        border-color: #eee;
        padding: 0px;
        border-width: 1px;
        border-radius: 4px;
    }

    .costingSectionItem {
        margin-top: -2px;
        margin-left: -10px;
        margin-right: -10px;
        margin-bottom: 0px;
        color: black;
        border-left: 1px solid darkgrey;
        border-right: 1px solid darkgrey;
        border-radius: 0px;
        background-color: white;
        padding: 0px;
        padding-left: 0px;
    }

    .paidCostingSectionItem {
        border-left: solid 4px green;
    }

    .huge {
        font-size: 2.9em;
        padding: 0px;
        margin-top: 20px;
        border-bottom-right-radius: 5px;
        border-bottom-left-radius: 5px;
    }

    .panel {
        margin-right: -10px;
        margin-left: -10px;
    }

        .panel a {
            padding-bottom: 5px;
        }

    .panel-footer {
        margin-left: 0px;
        margin-right: 0px;
    }

    .costingSheet {
        padding: 2px;
        margin-left: -10px;
        margin-right: -10px;
    }

    .loginBox {
        margin-top: 20px;
        padding: 20px;
        border-width: 1px;
        border-radius: 4px;
        background-color: #fcfcfc;
        box-shadow: none;
    }

    .costSummary {
        margin-top: 10px;
        margin-left: 0px;
        margin-right: 0px;
        margin-bottom: 0px;
        font-weight: bold;
        background-color: #E8E8E8;
        border-top: dotted;
        border-width: 1px;
        border-color: lightgrey;
        padding: 5px;
        color: black;
    }

    .view {
        margin-right: -10px;
        padding: 10px;
    }


    @media (min-width: 768px) and (max-width: 991px) {
        eager-side-nav-button {
            top: 1em !important;
            left: 1em !important;
        }

        .navbar-collapse.collapse {
            display: none !important;
        }

            .navbar-collapse.collapse.in {
                display: block !important;
            }

        .navbar-header .collapse, .navbar-toggle {
            display: block !important;
        }

        .navbar-header {
            float: none;
        }
    }
}

.multi-drop-down .multi-drop-down-list {
    overflow-y: auto;
    position: absolute;
    top: 42px;
    left: 0;
    height: auto;
    max-height: 250px;
    width: 100%;
    background: white;
    border-radius: 4px;
    border-left: 2px solid #333;
    position: absolute;
    box-shadow: 1px 2px 4px rgb(0 0 0 / 10%);
    z-index: 1;
    padding: 0;
}

.multi-drop-down .multi-drop-down-list-item {
    display: block;
    clear: both;
    width: 100%;
    overflow: auto;
}

    .multi-drop-down .multi-drop-down-list-item,
    .multi-drop-down .multi-drop-down-list-item * {
        cursor: pointer;
    }

        .multi-drop-down .multi-drop-down-list-item:hover {
            background: dodgerblue;
        }

            .multi-drop-down .multi-drop-down-list-item:hover .multi-drop-down-list-item-label {
                color: white;
            }

            .multi-drop-down .multi-drop-down-list-item:hover .multi-drop-down-list-item-checkbox {
                border-color: white;
            }

.multi-drop-down .multi-drop-down-button:hover {
    border-color: blue;
}

.multi-drop-down .multi-drop-down-button {
    text-align: left;
    font-size: 12px;
    overflow: hidden;
}

.multi-drop-down .multi-drop-down-list-item-label {
    float: left;
    width: calc(99% - 35px);
    margin-left: 5px;
    padding: 5px 15px 5px 5px;
}

.multi-drop-down .multi-drop-down-list-item-checkbox {
    float: left;
    width: 15px;
    margin-left: 15px;
    margin-top: 5px;
}

.multi-drop-down .multi-drop-down-switch {
    display: block;
    border: 1px solid #efefef;
    border-radius: 2px;
    width: 46px;
}

    .multi-drop-down .multi-drop-down-switch .label {
        display: inline-block;
        width: 3ch;
        margin: 8px 2px 2px 2px;
        float: left;
    }

/* Text angular override */
.ta-scroll-window > .ta-bind,
.ta-editor.ta-html, .ta-scroll-window.form-control {
    min-height: 100px !important;
    /*max-height: 500px !important;*/
}

.documentPage-background,
.documentPage-background-opacity {
    height: 100% !important;
    width: 100% !important;
    background-position-x: center;
    background-position-y: center;
    overflow: hidden;
}

.section-controls, .section-controls * {
    box-sizing: border-box;
}

.section-controls {
    float: right;
    position: relative;
    width: 100%;
}

.section-controls-open,
.section-control-draggable {
    border-radius: 50%;
    background: white;
    border: 1px solid #ccc;
    width: 30px;
    height: 30px;
    text-align: center;
    position: absolute;
    top: 20px;
    right: 30px;
}

.section-controls-open--close {
    background: #EA2027;
    color: white;
}

.section-controls-open--disabled,
.section-control-draggable--disabled {
    background: #eee;
    color: #ccc;
}

.section-controls-container {
    position: absolute;
    right: -30px;
    top: 40px;
    width: 280px;
    height: 430px;
}

.section-controls-container-inner {
    position: absolute;
    right: 15px;
    top: 15px;
    background: white;
    border: 1px solid #ccc;
    width: 250px;
    height: 300px;
    border-radius: 4px;
    z-index: 100000;
    box-shadow: 0px 1px 2px 0px rgb(60 64 67 / 30%), 0px 2px 6px 2px rgb(60 64 67 / 15%);
    overflow: auto;
    overflow-x: hidden;
}

    .section-controls-container-inner::-webkit-scrollbar {
        width: 10px;
    }

    .section-controls-container-inner::-webkit-scrollbar-track {
        background: transparent !important;
        box-shadow: none !important;
    }

    .section-controls-container-inner::-webkit-scrollbar-thumb {
        background: rgba(0, 0, 0, 0.1) !important;
        border: solid 2px white;
        box-shadow: none !important;
        border-radius: 4px !important;
    }

.section-control-title {
    display: block;
    width: 100%;
    clear: both;
    margin: 15px 0;
    text-align: center;
    color: #979797;
    font-size: 1.5rem;
}

.section-control-group {
    display: block;
    overflow: auto;
    overflow-y: hidden;
    overflow-x: hidden;
    margin-bottom: 15px;
    padding-bottom: 15px;
}

.section-control {
    position: relative;
    width: 33.33%;
    height: 85px;
    padding: 10px;
    border-radius: 4px;
    float: left;
}

    .section-control:hover {
        background: rgb(156 227 255 / 50%);
        cursor: pointer;
    }


.section-control-icon-container {
    margin: auto;
    margin-top: 8.75px;
    border-radius: 4px;
    height: 40px;
    width: 40px;
    border: 1px solid #ddd;
}

.section-control-icon {
    display: block;
    width: 30px;
    height: 100%;
    margin: auto;
    text-align: center;
    border-radius: inherit;
    font-size: 1.75rem;
    line-height: 2;
}

.section-control-icon--up {
    background: white;
    color: #333;
}

.section-control-icon--down {
    background: #333;
    color: white;
}

.section-control-icon--favourite {
    background: #333;
    color: yellow;
}

.section-control-icon--unfavourite {
    background: white;
    color: #EA2027;
}

.section-control-icon--resize {
    background: #FFC107;
    color: #333;
}

.section-control-icon--delete {
    background: #EA2027;
    color: white;
}

.section-control-icon--text {
    background: #3f51b5;
    color: white;
}

.section-control-icon--page-break {
    background: #eee;
    color: #666;
}

.section-control-icon--page-merge {
    background: #aaa;
    color: #666;
}

.section-control-icon--drawing {
    background: #8f8f8f;
    color: aliceblue;
}

.section-control-icon--signature {
    background: royalblue;
    color: white;
}

.section-control-icon--summary {
    background: #0d005e;
    color: white;
}

.section-control-icon--form {
    background: dodgerblue;
    color: white;
}

.section-control-icon--table {
    background: #4cd137;
    color: white;
}

.section-control-icon--images {
    background: hotpink;
    color: white;
}

.section-control-icon--import {
    background: orangered;
    color: white;
}

.section-control-icon--specifications {
    background: yellow;
    color: #333;
}

.section-control-icon--costing {
    background: #9c88ff;
    color: #fff;
}

.section-control-icon--previous-page {
    background: white;
    color: #666;
}

.section-control-icon--hide {
    background: white;
    color: crimson;
}

.section-control-icon--show {
    background: white;
    color: lightseagreen;
}

.section-control-text {
    width: 100%;
    font-size: 1.25rem;
    text-align: center;
}

.section-control--previous-page {
    float: none;
    clear: both;
}

.section-control-draggable {
    left: 0;
    visibility: hidden;
}

.builder-section:hover .section-control-draggable {
    visibility: visible;
}

.section-controls-open--hidden,
.section-control-draggable--hidden {
    top: 0;
}

.section-controls-container--hidden {
    top: 20px;
}

.image-gallery-designer-btn {
    border-radius: 4px;
}

.image-gallery-designer-btn-group {
    border-radius: none;
}

.image-gallery-designer-btn-group--first {
    border-radius: 4px 0 0 4px;
}

.image-gallery-designer-btn-group--first {
    border-radius: 4px 0 0 4px;
}

.image-gallery-designer-controls {
    display: block;
    position: relative;
    padding: 15px;
    box-sizing: border-box;
    margin-top: 15px;
}

.image-gallery-designer-controls-add {
    position: absolute;
    border-radius: 4rem;
    left: 50%;
    top: 50%;
    transform: translate(-50%, -50%);
    height: 3rem;
    width: auto;
    font-size: 1em;
}

    .image-gallery-designer-controls-add:focus {
        box-shadow: none !important;
    }

    .image-gallery-designer-controls-add::before,
    .image-gallery-designer-controls-add::after {
        content: '';
        position: absolute;
        top: 0;
        left: 0;
        height: 100%;
        width: 100%;
        border-radius: 4rem;
        z-index: 9;
        opacity: 0;
        transition: opacity 100ms linear;
    }

    .image-gallery-designer-controls-add::before {
        box-shadow: 0px 0px 3px 1px #666;
    }

    .image-gallery-designer-controls-add::after {
        box-shadow: inset 0px 0px 3px 1px #444;
    }

    .image-gallery-designer-controls-add:hover::before,
    .image-gallery-designer-controls-add:focus::after {
        opacity: 1;
    }

.image-gallery-designer-column-controls {
    display: block;
    float: none;
    clear: both;
    overflow: auto;
    margin: 10px 0;
}

    .image-gallery-designer-column-controls > *,
    .image-gallery-designer-column-img-controls > * {
        float: left;
    }

.image-gallery-designer-column-controls-divider {
    display: block;
    width: 1px;
    height: 25px;
    background: #ddd;
    margin-left: 10px;
    margin-right: 10px;
}

.image-gallery-designer-row-container {
    display: flex;
    flex-wrap: wrap;
    clear: both;
    float: none;
    width: 100%;
}

.image-gallery-designer-row--left .image-gallery-designer-row-container {
    justify-content: flex-start;
}

.image-gallery-designer-row--right .image-gallery-designer-row-container {
    justify-content: flex-end;
}

.image-gallery-designer-row--central .image-gallery-designer-row-container {
    justify-content: center;
}

.image-gallery-designer-row--column-reverse .image-gallery-designer-row-container {
    flex-direction: column-reverse;
}

.image-gallery-designer-row--row-reverse .image-gallery-designer-row-container {
    flex-direction: row-reverse;
}

.image-gallery-designer-row--align-top .image-gallery-designer-row-container {
    align-items: flex-start;
}

.image-gallery-designer-row--align-central .image-gallery-designer-row-container {
    align-items: center;
}

.image-gallery-designer-row--align-bottom .image-gallery-designer-row-container {
    align-items: flex-end;
}

/* This is just here for the buttons to look good. */
.image-gallery-designer-column {
    min-width: 100px;
    position: relative;
}

.image-gallery-designer-column-img-controls-bck {
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: rgba(255, 255, 255, 0.75);
    opacity: 0;
    transition: opacity 100ms linear;
    z-index: 9;
}

.image-gallery-designer-column-img-controls-bck--show {
    z-index: 15 !important;
    opacity: 1 !important;
}

.image-gallery-designer-column:hover .image-gallery-designer-column-img-controls-bck {
    opacity: 1;
}

.image-gallery-designer-column-img-controls {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
}

.image-gallery-designer-column {
    position: relative;
}

    .image-gallery-designer-column:before {
        position: absolute;
        transition: opacity 100ms linear;
        position: absolute;
        color: #000;
        opacity: .75;
        background: white;
        padding: 5px;
        border-radius: 4px;
        z-index: 2;
        top: 50%;
        left: 50%;
        transform: translate(-50%, -50%);
    }

    .image-gallery-designer-column:hover:before {
        opacity: 0;
    }

.image-gallery-designer-column--full:before {
    content: '1/1';
}

.image-gallery-designer-row img {
    width: 100%;
}

.image-gallery-designer-column--quarter:before {
    content: '1/4';
}

.image-gallery-designer-column--third:before {
    content: '1/3';
}

.image-gallery-designer-column--half:before {
    content: '1/2';
}

.image-gallery-designer-column--two-thirds:before {
    content: '2/3';
}

.image-gallery-designer-column--three-quarters:before {
    content: '3/4';
}

.image-gallery-designer-column--empty:before {
    content: '';
    display: none;
    opacity: 0;
}

.image-gallery-design-manual-header {
    position: relative;
    display: block;
    width: 100%;
}

    .image-gallery-design-manual-header .image-gallery-design-manual-heading {
        display: inline-block;
    }

.image-gallery-design-manual-header-close {
    position: absolute;
    top: 50%;
    right: 0;
    transform: translateY(-50%);
    border-radius: 50%;
}

.image-gallery-designer-manual {
    display: block;
    position: fixed;
    top: 0;
    left: 0;
    background: rgba(0, 0, 0, .75);
    z-index: 900;
    height: 100vh;
    width: 100vw;
}

.image-gallery-design-manual-content {
    display: block;
    position: fixed;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    background: white;
    border-radius: 4px;
    padding: 15px;
    box-sizing: border-box;
    min-width: 320px;
    max-height: calc(100vh - 130px);
    overflow: auto;
}

.image-gallery-manual-demo-btn {
    margin-bottom: 10px;
    min-width: 27px;
}

.image-gallery-designer-controls-add--demo {
    left: 15px;
    top: 0;
    transform: none;
}

.quoteEditBlockGroup {
    margin: 5px 5px 0 5px;
}


.quoteEditBlock select {
    margin: -5px 5px;
}

    .quoteEditBlock select:hover {
        /* color: #fff; */
    }

.quoteEditBlockGroup .pull-right + .pull-right {
    margin-right: 8px;
}

.quoteEditBlock .pull-left + .pull-left + .pull-left {
    margin: 3px 0 0 20px;
}

.editWindow .pull-right {
    margin: 10px;
}

.editWindow .btn-group {
    margin-top: -5px;
}

.editWindow .btn-danger {
    border: none;
    background: rgba(255,255,255,0.13);
}

    .editWindow .btn-danger:hover {
        background: rgba(0,0,0,0.1);
    }


.editWindow .btn-group i {
    margin-top: 18px;
}

.editWindow {
    margin: 0px 0;
}

    .editWindow .pull-right {
        margin: 10px;
    }

    .editWindow .btn-group {
        margin-top: -5px;
    }


        .editWindow .btn-group i {
            margin-top: 18px;
        }

    .editWindow input {
        min-width: 70%;
        border-radius: 4px;
    }

.quoteEditBlockGroup .btn-primary {
    background: transparent;
    border: none;
    color: #4a4a7e;
}

    .quoteEditBlockGroup .btn-primary:hover {
        background: rgba(0,0,0,0.1);
        color: #bcbcd7;
    }

    .quoteEditBlockGroup .btn-primary:active {
        background: rgba(255,255,255,0.1) !important;
    }


.editWindow input {
    background: transparent;
    border: none;
    border-bottom: solid 1px #393961;
    margin: 10px;
    width: 120px;
    outline: none;
}


    .editWindow input:focus {
        outline: 1px solid #393961;
    }

    .editWindow input[type="text"] {
        background: #fff;
        color: #222;
        border: solid 1px rgba(0,0,0,0.4);
        border-radius: 4px;
        padding: 3px 6px;
        box-shadow: inset 0px 1px 5px rgba(0, 0, 0, 0.1);
    }

        .editWindow input[type="text"]:focus {
            box-shadow: inset 1px 2px 4px rgba(0, 0, 0, 0.01), 0px 0px 8px rgba(0, 0, 0, 0.2);
        }

@keyframes input-bigger {
    1% {
        width: 120px;
        background: transparent;
    }

    100% {
        width: 150px;
        /*background: #fff;*/
    }
}

.ta-scroll-window.ng-scope.ta-text.ta-editor.form-control {
    margin-top: 10px;
}


@media(max-width: 1120px) {
    .quoteListTable {
        width: 100% !important;
    }

    .quoteSelection__btn {
        width: !important;
        float: left !important;
        display: inline !important;
        text-align: center !important;
        width: 14.28571428571429% !important;
        height: 60px;
    }

    .quoteSelection__btnAll {
        border: 0 !important;
        border-bottom: solid 3px #5479c8 !important;
    }

    .quoteSelection__btnAccepted {
        border: 0 !important;
        border-bottom: solid 3px #55d400 !important;
    }

    .quoteSelection__btnCompleted {
        border: 0 !important;
        border-bottom: solid 3px #9c88ff !important;
    }

    .quoteSelection__btnOverdue {
        border: 0 !important;
        border-bottom: solid 3px orangered !important;
    }

    .quoteSelection__btnPending {
        border: 0 !important;
        border-bottom: solid 3px #FFC107 !important;
    }

    .quoteSelection__btnRejected {
        border: 0 !important;
        border-bottom: solid 3px #b1234c !important;
    }

    .quoteSelection__btnSent {
        border: 0 !important;
        border-bottom: solid 3px #000 !important;
    }

    .quote-selection {
        width: 100% !important;
    }
}


@media (max-width: 615px) {
    .quoteSelection__btn {
        width: 33.33% !important;
        font-size: 10px;
    }

        .quoteSelection__btn:last-child {
            width: 100% !important;
        }
}

.quote-selection {
    position: relative;
    z-index: 5;
}


.floatystar--1 {
    top: 10px;
    left: 170px;
}

.floatystar--2 {
    bottom: 10px;
    left: 60px;
}

.floatystar--3 {
    top: 45px;
    right: 135px;
}

.floatystar--4 {
    bottom: 45px;
    left: 100px;
}

.floatystar--5 {
    top: 125px;
    left: 120px;
}

.floatystar--6 {
    bottom: 125px;
    right: 180px;
}

.floatystar--7 {
    top: 225px;
    left: 220px;
}

.floatystar {
    position: absolute;
    animation: floatingstar 30s infinite;
    opacity: 0.4;
}

@keyframes floatingstar {
    0% {
        transform: rotate(10deg) translateY(-10px) translateX(20px) scale(1);
    }

    12.5% {
        transform: rotate(5deg) translateY(-5px) translateX(10px) scale(0.5);
    }

    25% {
        transform: rotate(-0deg) translateY(0px) translateX(5px) scale(1);
    }

    37.5% {
        transform: rotate(-5deg) translateY(5px) translateX(0) scale(0.5);
    }

    50% {
        transform: rotate(0deg) translateY(0) translateX(-5px) scale(1);
    }

    62.5% {
        transform: rotate(-5deg) translateY(5px) translateX(0) scale(0.5);
    }

    75% {
        transform: rotate(-0deg) translateY(0px) translateX(5px) scale(1);
    }

    87.5% {
        transform: rotate(5deg) translateY(-5px) translateX(10px) scale(0.75);
    }

    100% {
        transform: rotate(10deg) translateY(-10px) translateX(20px) scale(1);
    }
}

.floatyman {
    animation: floatinginspace 15s infinite;
    position: absolute;
    top: 50%;
    left: 0%;
}

.floatyrocket {
    animation-name: floatingrocket;
    animation-duration: 30s;
    animation-iteration-count: infinite;
    animation-timing-function: linear;
    opacity: 0.5;
}

@keyframes floatingrocket {
    from {
        transform: rotate(360deg) translateX(20px);
    }

    to {
        transform: rotate(0deg) translateX(20px);
    }
}

@keyframes floatinginspace {
    0% {
        transform: rotate(0deg) translateY(0) translateX(-5px) scale(1);
    }

    12.5% {
        transform: rotate(-5deg) translateY(5px) translateX(0) scale(1.15);
    }

    25% {
        transform: rotate(-0deg) translateY(0px) translateX(5px) scale(1.35);
    }

    37.5% {
        transform: rotate(5deg) translateY(-5px) translateX(10px) scale(1.45);
    }

    50% {
        transform: rotate(10deg) translateY(-10px) translateX(20px) scale(1.5);
    }

    62.5% {
        transform: rotate(5deg) translateY(-5px) translateX(10px) scale(1.5);
    }

    75% {
        transform: rotate(0deg) translateY(0px) translateX(5px) scale(1.25);
    }

    87.5% {
        transform: rotate(-5deg) translateY(5px) translateX(0) scale(1.15);
    }

    100% {
        transform: rotate(0deg) translateY(0) translateX(-5px) scale(1);
    }
}

.bird-loader {
    animation-name: flashbang;
    animation-duration: 0.4s;
    animation-timing-function: linear;
    background: rgba(255,255,255,1);
}

@keyframes flashbang {
    1% {
        background: rgba(255,255,255,0);
    }

    100% {
        background: rgba(255,255,255,1);
    }
}

@keyframes preview-slide-down {
    1% {
        transform: translateY(-100%);
        opacity: 0;
    }

    100% {
        transform: translateY(0);
        opacity: 1;
    }
}

@keyframes enlarge {
    1% {
        transform: scale(0.9);
        opacity: 0.8;
    }

    100% {
        transform: scale(1);
        opacity: 1;
    }
}

@keyframes smaller {
    1% {
        transform: scale(1);
        opacity: 1;
    }

    100% {
        transform: scale(0.9);
        opacity: 0.8;
    }
}
/*
    Let's pray that the piece of 💩 that is V1 works! 🙏
*/

.quoteEditBlock .ql-align-center {
    text-align: center;
}

.quoteEditBlock .ql-align-right {
    text-align: right;
}

.quoteEditBlock .ql-align-justify {
    text-align: justify;
}

.quoteEditBlock .ql-align-center {
    text-align: center;
}

.quoteEditBlock .ql-size-huge {
    font-size: 2.5em;
}

.quoteEditBlock .ql-size-large {
    font-size: 1.5em;
}

.quoteEditBlock .ql-size-small {
    font-size: 0.75em;
}

.quoteEditBlock .ql-indent-1:not(.ql-direction-rtl) {
    padding-left: 3em;
}

.quoteEditBlock .ql-indent-2:not(.ql-direction-rtl) {
    padding-left: 6em;
}

.quoteEditBlock .ql-indent-3:not(.ql-direction-rtl) {
    padding-left: 9em;
}

.quoteEditBlock .ql-indent-4:not(.ql-direction-rtl) {
    padding-left: 12em;
}

.quoteEditBlock .ql-indent-5:not(.ql-direction-rtl) {
    padding-left: 15em;
}

.quoteEditBlock .ql-indent-6:not(.ql-direction-rtl) {
    padding-left: 18em;
}

.quoteEditBlock .ql-indent-7:not(.ql-direction-rtl) {
    padding-left: 21em;
}

.quoteEditBlock .ql-indent-7:not(.ql-direction-rtl) {
    padding-left: 24em;
}

.quoteEditBlock .ql-indent-7:not(.ql-direction-rtl) {
    padding-left: 24em;
}

.quoteEditBlock pre.ql-syntax {
    background-color: #23241f;
    color: #f8f8f2;
    overflow: visible;
}

.quoteEditBlock blockquote {
    border-left: 4px solid #ccc;
    margin-bottom: 5px;
    margin-top: 5px;
    padding-left: 16px;
}

.quoteEditBlock ul,
.quoteEditBlock ol {
    padding-left: 1.5em;
}

    .quoteEditBlock ol li:not(.ql-direction-rtl),
    .quoteEditBlock ul li:not(.ql-direction-rtl) {
        padding-left: 1.5em;
    }

.quoteEditBlock li.ql-indent-1:not(.ql-direction-rtl) {
    padding-left: 4.5em;
}

.quoteEditBlock li.ql-indent-2:not(.ql-direction-rtl) {
    padding-left: 7.5em;
}

.quoteEditBlock li.ql-indent-3:not(.ql-direction-rtl) {
    padding-left: 10.5em;
}

.quoteEditBlock li.ql-indent-4:not(.ql-direction-rtl) {
    padding-left: 13.5em;
}

.quoteEditBlock li.ql-indent-5:not(.ql-direction-rtl) {
    padding-left: 16.5em;
}

li.ql-indent-6:not(.ql-direction-rtl) {
    padding-left: 19.5em;
}

.quoteEditBlock li.ql-indent-8:not(.ql-direction-rtl) {
    padding-left: 25.5em;
}

.editModeBtn {
    font-size: 0.8em;
    background: linear-gradient(rgba(255,255,255,0.3) 1px, rgba(255,255,255,0.1) 5%, rgba(255,255,255,0));
    color: #fff;
    padding: 4px 6px;
    border: 0;
    border-left: solid 1px rgba(0,0,0,0.2);
    float: left;
}

    .editModeBtn:disabled {
        background: rgba(255,255,255,0.2);
        color: rgba(255,255,255,0.3);
    }

        .editModeBtn:disabled:hover {
            background: rgba(255,255,255,0.2);
            color: rgba(255,255,255,0.3);
        }

    .editModeBtn:first-child {
        border-left: none;
    }

.editModeBtnGroup {
    border: none 1px rgba(0,0,0,0.2);
    border-radius: 4px;
    box-shadow: 0 0 3px rgb(0 0 0 / 10%);
}

.editModeBtn:hover {
    background: rgba(0,0,0,0.05);
}

/*
 * Pipeline Builder
 */

.pipeline-builder__page,
.custom-document-list__page,
.organisations__page,
.customers__page {
    margin: 50px;
}

@media(max-width: 768px) {
    .pipeline-builder__page,
    .custom-document-list__page,
    .organisations__page,
    .customers__page {
        margin: 10px;
    }
}

.pipeline-builder {
    box-shadow: 0px 4px 15px -3px rgba(0,0,0,0.1);
    max-width: 1600px;
    margin: 50px 0;
    border: none 1px #dadada;
}

@media (max-width: 980px) {
    .pipeline-builder {
        width: 98%;
    }
}

.pipeline-builder__header-nav {
    background: #fdfdfd;
    padding: 35px 0;
    display: inline-block;
    width: 100%;
    border-radius: 10px;
}

.pipeline-builder__header-nav__states {
    margin: 15px 0;
}

/*
    This will be paginated to show 4 at a time
*/
.pipeline-builder__header-nav__states__state {
    position: relative;
    background: #FFF;
    padding: 15px;
    box-shadow: 0px 4px 15px -3px rgba(0,0,0,0.1);
    border-radius: 14px;
    min-width: 200px;
    /*float: left;*/
    margin-right: 1%;
    margin-bottom: 1%;
    border: solid 1px #ccc;
    font-weight: bold;
    width: 100px;
    /*display: inline-block;*/
}

    .pipeline-builder__header-nav__states__state:hover {
        background: rgba(0,0,0,0.02);
        cursor: pointer;
    }

    .pipeline-builder__header-nav__states__state:first-of-type {
        /*margin-left: 0;*/
    }

.pipeline-builder__header-nav__states__state--selected {
    border: solid 2px dodgerblue;
}
/* temporary input style*/
.pipeline-builder__input {
    background: #fff;
    color: #222;
    border: solid 1px rgba(0,0,0,0.4);
    border-radius: 4px;
    padding: 3px 6px;
    box-shadow: inset 0px 1px 5px rgba(0, 0, 0, 0.1);
}

.state-orb {
    margin-bottom: 0;
    height: 15px;
    width: 15px;
    border: 1px solid rgba(0, 0, 0, .1);
    border-radius: 50%;
    cursor: pointer;
}

.icon-block {
    display: block;
}

/* Jon, gl */

#document-right-col {
    position: fixed;
    right: 0;
    top: 50px;
    width: 400px;
    max-width: 100%;
    max-height: 100vh;
    box-sizing: border-box;
    overflow: auto;
    overflow-x: hidden;
    height: 100vh;
    scrollbar-width: none;
}

    #document-right-col::-webkit-scrollbar {
        display: none;
    }

    #document-right-col canvas {
        max-width: 100% !important;
    }

.analytics-sidebar {
    transition: ease .1s;
    z-index: 9;
}

.isVisibleBox {
    color: #fff;
    padding: 10px;
    border-radius: 4px;
    margin: 10px 0;
    cursor: pointer;
}

.analytics-sidebar--hide {
    transform: translateX(100%);
}

.analytics-sidebar--show {
    transform: translateX(0);
}

.analytics-sidebar {
    padding-bottom: 30px;
    background: #22272e;
    color: #fff;
    box-shadow: 0 0px 15px rgba(0,0,0,0.15);
    min-width: 300px;
}

.analytics__item {
    background: #3a424e;
    color: #fff;
    width: 100%;
    height: 50px;
    line-height: 51px !important;
    padding: 0 14px;
    border-bottom: solid 1px #4c5767;
    cursor: pointer;
}

    .analytics__item:hover {
        background: #485261;
    }

    .analytics__item span {
        margin: 0 12px;
        font-family: 'Nunito','Monda','Montserrat','Open Sans', montserrat, 'PT Sans', 'Segoe UI';
        font-weight: 400;
    }

    .analytics__item .fa-chevron-down,
    .analytics__item .fa-chevron-right,
    .analytics__item .fa-chevron-up {
        float: right;
        margin: 18px 0;
    }

.analytics-sidebar__item__content--hide {
    display: none !important;
}

.analytics-sidebar__item__content--show {
    display: block;
    margin: 20px;
}

.insights__item__content--hide {
    display: none;
}

.insights__item__content {
    display: block;
    margin-left: 30px;
    padding: 10px 0;
    width: calc(100% - 55px);
}

.insight__item__content__table {
    border: solid 1px rgba(255,255,255,0.3);
    border-radius: 4px;
}

.insights__item,
.margins__item {
    cursor: pointer;
    padding: 6px 10px;
    margin: 15px 0;
    border-radius: 6px;
}

    .insights__item:hover,
    .margins__item:hover {
        background: rgba(255,255,255,0.04);
    }

.insight__item__content__row {
    padding: 10px;
    border-bottom: solid 1px rgba(255,255,255,0.3);
}

    .insight__item__content__row:hover {
        background: rgba(255,255,255,0.06);
        cursor: pointer;
    }

    .insight__item__content__row:last-of-type {
        border-bottom: none;
    }

.quoteSummary {
    margin: 20px auto;
    height: 170px;
    width: 380px;
}

    .quoteSummary div {
        float: left;
        width: 50%;
        margin: 10px 0;
    }

        .quoteSummary div p {
        }

    .quoteSummary canvas {
        width: 60px !important;
        height: 60px !important;
        float: left;
        margin-right: 20px;
    }

#quote-margins-last-year-average,
#quote-margins-last-year {
    margin: 10px -20px !important;
}

.btn-topbar {
    border-radius: 6px;
    border: 0;
    padding: 6px 8px;
}

    .btn-topbar:hover {
        background: rgba(255,255,255,0.06);
    }

.btn-list-column {
    border-radius: 6px;
    border: 0;
    padding: 6px 8px;
    background: transparent;
    float: right;
    margin: 19px;
}

    .btn-list-column:hover {
        background: rgba(0,0,0,0.06);
    }

.quotesTable {
    width: 97%;
    margin: 120px auto;
    border-radius: 4px;
    border: solid 1px #ccc;
    border-top: 0;
}

    .quotesTable tr:hover td {
        background: rgba(0,0,0,0.06);
    }

.quoteListTable {
    box-shadow: 0 2px 6px rgb(58 57 68 / 20%);
    width: 88%;
    padding: 20px;
}

.quotesTable table td {
    padding: 10px;
    background-color: inherit;
}

.quotesTable th {
    padding: 20px 14px 14px 14px !important;
    background: #e8e8e8;
}

.quote-selection {
    font-size: 0;
    margin: 0 auto;
    background: #f0f0f0;
    width: 12%;
    height: 100% !important;
    float: left;
    box-shadow: inset -5px 0px 8px 0px rgb(0 0 0 / 05%);
}

.quoteSelection__btn {
    background: none;
    border: 0;
    font-size: 12px;
    padding: 15px;
    display: block;
    width: 100%;
    text-align: right;
}

    .quoteSelection__btn:hover {
        background: rgba(0,0,0,0.03) !important;
    }

.quoteSelection__btnAll {
    border-left: solid 3px #5479c8;
}

.quoteSelection__btnAccepted {
    border-left: solid 3px #55d400;
}

.quoteSelection__btnCompleted {
    border-left: solid 3px #9c88ff;
}

.quoteSelection__btnOverdue {
    border-left: solid 3px orangered;
}

.quoteSelection__btnPending {
    border-left: solid 3px #FFC107;
}

.quoteSelection__btnRejected {
    border-left: solid 3px #b1234c;
}

.quoteSelection__btnSent {
    border-left: solid 3px #000;
}


.organisations__organisation {
    background: linear-gradient(#FFF, #FAFAFA 2px);
    border-radius: 7px;
    padding: 20px;
    color: #212121;
    height: 145px;
    width: 280px;
    margin-left: 20px;
    float: left;
    box-shadow: 0px 0px 15px -3px rgb(0 0 0 / 30%);
    border: solid 1px #d5d5d5;
    margin-top: 20px;
}

    .organisations__organisation:hover {
        background: rgba(0,0,0,0.05);
        cursor: pointer;
    }

.organisations__organisation--active {
    border: solid 1px dodgerblue;
}

.organisations__organisation h3 {
    margin: 0 0 12px 0;
    font-size: 1.15em;
    color: #222;
    font-weight: bold;
}


.companyContact {
    font-weight: bold;
    color: var(--primary);
}

@keyframes organisation-slide-down {
    1% {
        opacity: 0;
        transform: translateY(-30px);
    }

    100% {
        opacity: 1;
        transform: translateY(0);
    }
}

.organisations__organisation__contact-details {
    padding: 16px;
    background: #FFF;
    border: solid 1px #ccc;
    margin: 12px 0;
    animation-name: organisation-slide-down;
    animation-duration: 0.06s;
    animation-timing-function: linear;
}

.organisations__organisation__contact-details__detail {
    margin: 10px 0;
}

.organisations__organisation__add-button {
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
    right: -16px;
    border: 0;
    background: #0D47A1;
    color: #fff;
    height: 32px;
    width: 32px;
    border-radius: 50%;
    box-shadow: 0px 0px 15px -3px rgb(0 0 0 / 20%);
}

    .organisations__organisation__add-button:hover {
        background: #0e57c7;
    }

@media (max-width: 768px) {
    .organisations__organisation {
        width: 100%;
        margin: 20px 0;
    }
}

/*
 * Overide these styles with newer input styles
*/
.specialText,
.specialTextLarge {
    border: solid 1px #d5d9db;
    background: #fff;
    padding: 7px 9px;
    border-radius: 4px;
    box-shadow: 0px 3px 5px -3px rgb(0 0 0 / 7%);
    color: #333;
}

    .specialText:hover,
    .specialTextLarge:hover {
        border: solid 1px #d5d9db !important;
    }

    .specialText:focus,
    .specialTextLarge:focus {
        color: #000;
        border: solid 1px dodgerblue !important;
        box-shadow: 0px 3px 5px -3px rgb(30 144 255 / 15%);
        outline: 0;
    }

    .specialText:invalid,
    .specialTextLarge:invalid {
        color: #000;
        border: solid 1px crimson !important;
        box-shadow: 0px 3px 5px -3px rgb(220 20 60 / 15%);
        outline: 0;
    }

.modal__btn,
.modal__header__actions__btn {
    cursor: pointer;
    background: #fff;
    border: solid 1px #ccc;
    box-shadow: 0 0 3px rgb(0 0 0 / 5%);
    padding: 7px 10px;
    color: #777;
    border-radius: 4px;
    height: 32px;
}

.modal__btn--crimson {
    border-color: crimson;
    color: crimson;
}

.modal__header__actions__btn {
    min-width: 32px;
}

.modal__btn:disabled {
    opacity: 0.2;
}

.modal__btn--disabled {
    background: #eee;
    color: #aaa;
}

.organisations__organisation__tags {
    width: 100%;
    margin-bottom: 12px;
    display: inline-block;
}

.organisations__organisation__tags__tag {
    display: inline-block;
    font-weight: bold;
    font-size: 10px;
    padding: 4px 8px;
    float: left;
    background: var(--primary);
    color: #fff;
    border-radius: 32px;
}

.organisations__organisation__tags__tag--blue {
    background: #42A5F5;
    color: #fff;
}

.organisations__organisation__tags__tag--orange {
    background: #FF5722;
    color: #fff;
}

.organisations__organisation__tags__tag--green {
    background: #00E676;
    color: #fff;
}

.organisations__organisation__tags__tag--red {
    background: #EF5350;
    color: #fff;
}

.organisations__side-panel {
    height: 100%;
    width: 400px;
    position: fixed;
    top: 50px;
    right: 0;
    background: #FAFAFA;
    box-shadow: -16px -3px 15px -12px rgba(0,0,0,0.2);
    padding: 20px;
    z-index: 1;
}

    .organisations__side-panel .row {
        margin-top: 20px;
    }

.organisations__topbar,
.customers__topbar {
    padding: 20px 12px;
    border-bottom: solid 1px #e4e4e4;
}

.organisations_side-panel__company-type {
    background: #fff;
    padding: 20px;
    margin: 12px 0;
    border-radius: 4px;
    box-shadow: 0px 0px 15px -3px rgb(0 0 0 / 10%);
}

.icon-space {
    margin-right: 12px;
}

.modal__btn--circle {
    border-radius: 50%;
}

.documents-window {
    white-space: nowrap;
    float: left;
    width: 100%;
    overflow: auto;
}

    .documents-window
    .quoteListBucketContainer {
        width: 400px;
        display: inline-block;
        vertical-align: top;
    }

@media(max-width: 1400px) {
    .documents-window
    .quoteListBucketContainer {
        width: 300px;
    }
}

@media(max-width: 1300px) {
    .documents-window
    .quoteListBucketContainer {
        width: 250px;
    }
}

@media(max-width: 1100px) {
    .documents-window
    .quoteListBucketContainer {
        width: 220px;
    }
}

/*
 * TODO: we may need some UI here to indicate this
 * is now side scrollable on mobile
*/
@media(max-width: 768px) {
    .documents-window
    .quoteListBucketContainer {
        width: 98%;
        padding-bottom: 10px;
    }
}

@media(min-width:1920px) {
    .documents-window
    .quoteListBucketContainer {
        width: 400px;
    }
}

.documents-window
.quoteListBucketContainer
.quoteListBucket-v2 {
    margin-right: 15px;
}

.customers__mobile-filter,
.organisations__mobile-filter {
    box-shadow: 0px 0px 15px -3px rgb(0 0 0 / 30%);
    background: #fff;
    float: left;
    padding: 20px;
    margin: 20px 0;
}

.show-xs-only {
    display: none;
}

@media (max-width: 768px) {
    .show-xs-only {
        display: block;
    }
}

.specialText--required {
    border: solid 1px red !important;
}

    .specialText--required:hover {
        border: solid 1px red !important;
    }

.table-responsive .table-striped td {
    border-right: 1px solid #efefef;
}

.btn-no-style {
    background: none;
    border: none;
}

.customer-company-document-type-tabs {
    margin: -14px -14px 14px -14px;
    border-bottom: solid 1px #ccc;
    background: rgb(239, 239, 239);
    box-shadow: 0px 3px 5px -3px rgb(0 0 0 / 7%);
}

.customer-company-document-type-tabs__tab {
    padding: 10px;
    cursor: pointer;
    background: transparent;
    border: 0;
    border-right: solid 1px #ccc;
}

    .customer-company-document-type-tabs__tab:last-of-type {
        border-right: 0;
    }

    .customer-company-document-type-tabs__tab:hover {
        background: rgba(0,0,0,0.03) !important;
    }

.job-details-document-type-tabs {
    padding: 10px;
    float: left;
}

.job-details-document-type-tabs__tab {
    padding: 10px;
    float: left;
    border-radius: 32px;
    border: solid 1px var(--primary);
    background: #fff;
    margin: 6px 4px;
    color: var(--primary);
}

    .job-details-document-type-tabs__tab:hover {
        background: var(--primary) !important;
        color: #fff !important;
    }

.form-field__boolean {
    padding: 10px;
}

.form-field__boolean__option {
    padding: 5px;
    float: left;
}

    .form-field__boolean__option label {
    }

.document-stats__stat {
    margin: 2px;
    padding: 7px;
}

    .document-stats__stat:first-of-type {
        border-right: none;
    }

    .document-stats__stat .stats-total {
        font-size: 36px;
        font-weight: 800;
        color: black;
    }

    .document-stats__stat .stats-text {
        color: #6A6A6A;
        font-size: 12px;
    }

.addImageUrlBox {
    padding: 20px;
    margin: 20px;
    box-shadow: rgb(0 0 0 / 15%) 0px 3px 20px -3px;
    border: 1px solid rgb(204, 204, 204);
    border-radius: 4px;
    position: absolute;
    right: 0;
    width: 94%;
    transform: translateY(-20%);
    background: #fff;
    z-index: 2;
    animation-name: imageBoxslideDown;
    animation-duration: 0.1s;
    animation-timing-function: linear;
}

@keyframes imageBoxslideDown {
    1% {
        transform: translateY(-23%);
    }

    100% {
        transform: translateY(-20%);
    }
}

.customDocumentActions {
    background: #fff;
    position: absolute;
    bottom: 0;
    padding: 40px 10px;
    width: 100%;
    z-index: 1;
}

.docflite-modal-message {
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
    padding: 40px 10px;
    width: 100%;
    z-index: 1;
}

.customDocumentActions p {
    color: #333;
}

.documentCard {
    position: relative;
    background-color: #fff;
    border-radius: 4px;
    margin-top: 10px;
    box-shadow: 0 2px 6px rgba(58, 57, 68, 0.2);
    border-radius: 4px;
    border: solid 1px #ccc;
}

.documentCard__content {
    padding: 10px 15px;
    width: 100%;
    float: left;
}

.documentCard__header {
    width: 100%;
    padding: 5px 15px;
    border-bottom: solid 1px #ddd;
    border-radius: 4px 4px 0 0;
    float: left;
}

.documentCard__footer {
    width: 100%;
    padding: 10px;
    background: #fff;
    color: #222;
    border-top: solid 1px #ddd;
    float: left;
    border-radius: 0 0 4px 4px;
}

.documentCard__footer--orange {
    background: #FFC107;
}

.table__modal__column-controls__button {
    border-right: solid 1px #ddd;
}

    .table__modal__column-controls__button:last-of-type {
        border-right: 0;
    }

.table__modal__table th {
    position: sticky;
    top: 0;
}

.customer-document-attachments {
    max-width: 21cm;
    margin: 0 auto;
    padding: 10px;
    clear: both;
    overflow: auto;
}

.customer-document-attachments__attachment {
    padding: 5px 10px;
    margin-right: 10px;
    float: left;
    border: solid 1px #ddd;
    background: #fff;
    border-radius: 4px;
    box-shadow: 0px 3px 5px -3px rgb(0 0 0 / 7%);
}

    .customer-document-attachments__attachment:hover {
        background: rgba(0,0,0,0.04);
    }

.image-gallery-designer-row .specialText {
    height: auto;
}

    .image-gallery-designer-row .specialText .ql-editor {
        min-height: unset;
        padding: 0;
        font-size: 10px;
    }

    .image-gallery-designer-row .specialText .ql-container.ql-snow {
        border: 0;
        padding: 0;
    }

.image-gallery-designer-row ng-quill-editor {
    display: block;
    width: 100%;
}

.image-gallery-designer-row .ql-editor.ql-blank::before {
    right: unset;
    left: unset;
}

.home-screen {
    width: 1500px;
    margin: 20px auto;
}

@media (max-width: 1600px) {
    .home-screen {
        width: calc(100% - 40px);
    }
}

.home-screen__documents {
    display: flex;
    flex-wrap: wrap;
    gap: 20px;
    margin-bottom: 20px;
}

.home-screen__documents__card {
    width: 360px;
    background: #fff;
    border-radius: 7px;
    box-shadow: 0px 0px 40px rgba(0, 0, 0, 0.05);
    border: solid 1px #ddd;
    flex-grow: 4;
    color: #222;
    background: #f8f8f8;
    position: relative;
    padding-bottom: 20px;
}

.home-screen__documents__card__header {
    background: #F5F5F5;
    padding: 10px;
    border-radius: 7px 7px 0 0;
    border-bottom: solid 1px #ddd;
}

.home-screen__documents__card__header__title {
    display: flex;
    padding: 10px 10px 20px 10px;
}

.home-screen__documents__card__header__stats {
    display: flex;
    justify-content: space-between;
    gap: 20px;
    padding: 0 10px;
    white-space: nowrap;
    overflow: auto;
    -ms-overflow-style: none;
    scrollbar-width: none;
}

.hide-scrollbar {
    -ms-overflow-style: none;
    scrollbar-width: none;
}

    .hide-scrollbar::-webkit-scrollbar {
        display: none
    }

.home-screen__documents__card__header__stats::-webkit-scrollbar {
    display: none;
}

.home-screen__documents__card__header__stats__stat label {
    font-weight: normal;
}

.button-primary {
    background: dodgerblue;
    color: #fff;
    border-radius: 4px;
}

    .button-primary:hover {
        background: #1873CC;
        color: #fff;
    }

    .button-primary:disabled {
        background: #B4D1EE;
        color: #aaa;
    }

.button-primary--large {
    padding: 7px 20px;
}

.home-screen__documents__card__header__title__btn {
    margin-left: auto;
}

.home-screen__documents__card__header__title__document-type {
    font-size: 20px;
    font-weight: bold;
    color: #222;
    align-self: center;
}

@media (max-width: 300px) {
    .hide-300 {
        display: none;
    }
}

.home-screen__documents__card__body {
    overflow: auto;
    background: #f8f8f8;
    padding: 20px;
    border-radius: 0 0 7px 7px;
}

    .home-screen__documents__card__body .transparent-btn {
        font-weight: bold;
        color: #222;
        padding: 10px 20px;
        position: absolute;
        bottom: 20px;
        right: 20px;
    }


.home-screen__documents__card__body__documents {
    padding: 10px 0;
}

.home-screen__documents__card__body__documents__document {
    background: #fff;
    border: solid 1px #efefef;
    border-radius: 4px;
    box-shadow: 0px 10px 15px -10px rgb(0 0 0 / 10%);
    padding: 12px;
    display: flex;
    justify-content: space-between;
    cursor: pointer;
    margin-bottom: 10px;
}

    /* override stylesheet cursor: default value */
    .home-screen__documents__card__body__documents__document label {
        cursor: pointer;
    }

    .home-screen__documents__card__body__documents__document:hover {
        background: #f8f8f8;
    }

.home-screen__documents__card__body h2 {
    font-size: 14px;
    color: #666;
}

.home-screen__documents__card__body__documents__document h2 {
    font-weight: bold;
    font-size: 12px;
    color: #222;
}

.home-screen__documents__card__body__documents__document label {
    font-weight: normal;
    font-size: 9px;
}

.document-label {
    border-radius: 4px;
    font-size: 10px;
    color: #fff;
    padding: 0 15px;
    font-weight: bold;
    height: 25px;
    line-height: 25px;
    align-self: center;
}

@media(max-width: 1380px) {
    .flexStart1380 {
        justify-content: flex-start !important;
    }
}

/*.new-modal,
.new-modal * {
    -webkit-touch-callout: none;*/ /* iOS Safari */
/*-webkit-user-select: none;*/ /* Safari */
/*-khtml-user-select: none;*/ /* Konqueror HTML */
/*-moz-user-select: none;*/ /* Old versions of Firefox */
/*-ms-user-select: none;*/ /* Internet Explorer/Edge */
/*user-select: none;
}*/

.new-modal::-webkit-scrollbar,
.new-modal *::-webkit-scrollbar {
    width: 10px;
}

/*
 * While I don't like it, we're using important here 
 * just to override the legacy scroll bar look/feel
 */
.new-modal::-webkit-scrollbar-track,
.new-modal *::-webkit-scrollbar-track {
    background: transparent !important;
    box-shadow: none !important;
}

/*
 * While I don't like it, we're using important here 
 * just to override the legacy scroll bar look/feel
 */
.new-modal::-webkit-scrollbar-thumb,
.new-modal *::-webkit-scrollbar-thumb {
    background: rgba(0, 0, 0, 0.1) !important;
    border: solid 2px white;
    box-shadow: none !important;
    border-radius: 4px !important;
}

.new-modal-background {
    position: fixed;
    top: 0;
    left: 0;
    background-color: rgba(0, 0, 0, .5);
    width: 100vw;
    height: 100vh;
    z-index: 10000;
}

.new-modal-container {
    position: fixed;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    width: 90vw;
    max-width: 960px;
    height: 90vh;
    max-height: 850px;
    background: white;
    z-index: 10000;
    overflow: hidden;
    border-radius: 4px;
    border: 1px solid #ccc;
    box-shadow: 0px 1px 2px 0px rgb(60 64 67 / 30%), 0px 2px 6px 2px rgb(60 64 67 / 15%);
    padding: 15px;
}

.new-modal-wrapper {
    position: relative;
    height: 100%;
    width: 100%;
}

.new-modal-tabs {
    height: auto;
    overflow: auto;
    width: 100%;
    display: block;
    clear: both;
    background: #eee;
    border-radius: 4px 4px 0 0;
    padding: 5px 5px 0px 5px;
}

.new-modal-tab {
    color: #666;
    background: #eee;
    padding: 7px 10px;
    border: 1px solid #ccc;
    /*border-radius: 4px 4px 0 0;*/
    cursor: pointer;
    width: auto;
    float: left;
}

.new-modal-tab--first {
    border-radius: 4px 0 0 0;
}

.new-modal-tab--last {
    border-radius: 0 4px 0 0;
}

.new-modal-tab--active {
    background: #3f51b5;
    border-bottom: 1px solid #3f51b5;
    border-color: #303F9F;
    color: white;
}

.new-modal-content {
    border: 1px solid #eee;
    border-radius: 4px;
    padding: 15px;
    max-height: calc(100% - 65px);
    overflow-x: hidden;
}

.new-modal-header {
    display: block;
    clear: both;
    position: relative;
}

.new-modal-close-button {
    position: absolute;
    top: 25px;
    right: 15px;
    border-radius: 50%;
}

.new-modal-body {
}

.new-modal-row {
    clear: both;
    margin-top: 15px;
    width: 100%;
}

.new-modal-row--overflow-auto {
    overflow: auto;
}

.new-modal-footer {
    position: absolute;
    bottom: -15px;
    left: -15px;
    width: calc(100% + 30px);
    border-top: 1px solid #eee;
    padding: 15px;
    background: white;
    height: 58px;
}

.new-modal-field,
.new-modal-field *,
.new-modal-form-switch,
.new-modal-form-switch * {
    cursor: pointer;
}

.new-modal-field {
    display: block;
    position: relative;
    overflow: auto;
    clear: both;
    max-width: 330px;
    padding: 10px 15px;
    margin-bottom: 0;
}

.new-modal-field--disabled {
    background: #eee;
}

    .new-modal-field--disabled .new-modal-field-border-bottom {
        border-color: #666;
    }

.new-modal-field-border-bottom {
    display: block;
    height: 1px;
    width: 100%;
    border-bottom: 1px solid #eee;
    position: absolute;
    bottom: 0;
    left: 0;
}

.new-modal-label {
    float: left;
    margin-right: 5px;
    width: auto;
    min-width: 50px;
    max-width: 120px;
    width: 100%;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.new-modal-input {
    float: left;
    margin-right: 5px;
    border: none;
    width: 150px;
    text-align: right;
}

input.new-modal-input:hover {
    border: none;
}

input.new-modal-input:focus {
    outline: none;
    box-shadow: none;
}

    input.new-modal-input:focus ~ .new-modal-field-border-bottom {
        border-color: dodgerblue;
    }

.new-modal-input-icon {
    float: left;
    width: auto;
    max-width: 30px;
}

.new-modal-form-switch {
    min-width: 50px;
    width: auto;
    float: left;
    margin-right: 15px;
    float: left;
}

.onoffswitch {
    position: relative;
    width: 50px;
    -webkit-user-select: none;
    -moz-user-select: none;
    -ms-user-select: none;
    display: block;
}

.onoffswitch-checkbox {
    position: absolute;
    opacity: 0;
    pointer-events: none;
}

.onoffswitch-label {
    display: block;
    overflow: hidden;
    cursor: pointer;
    border: 1px solid #ccc;
    border-radius: 50px;
}

.onoffswitch-inner {
    display: block;
    width: 200%;
    margin-left: -100%;
    transition: margin 0.1s ease-in 0s;
}

    .onoffswitch-inner:before,
    .onoffswitch-inner:after {
        display: block;
        float: left;
        width: 50%;
        height: 15px;
        padding: 0;
        line-height: 15px;
        font-size: 12px;
        color: white;
        font-family: Trebuchet, Arial, sans-serif;
        font-weight: bold;
        box-sizing: border-box;
        border-radius: 25px;
    }

    .onoffswitch-inner:before {
        /*content: "ON";*/
        content: "";
        padding-left: 12px;
        background-color: #303F9F;
        color: #FFFFFF;
    }

.onoffswitch--y-n .onoffswitch-inner:before {
    content: "Y"
}

.onoffswitch-inner:after {
    /*content: "OFF";*/
    content: "";
    padding-right: 12px;
    background-color: #EEEEEE;
    color: #999999;
    text-align: right;
}

.onoffswitch--y-n .onoffswitch-inner:after {
    content: "N"
}

.onoffswitch--blank .onoffswitch-inner:after,
.onoffswitch--blank .onoffswitch-inner:after {
    content: ""
}

.onoffswitch-switch {
    display: block;
    width: 26px;
    margin: -3.5px;
    background: #FFFFFF;
    position: absolute;
    top: 0;
    bottom: 0;
    right: 30px;
    border: 1px solid #ccc;
    border-radius: 50px;
    transition: all 0.1s ease-in 0s;
}

.onoffswitch-checkbox:checked + .onoffswitch-label .onoffswitch-inner {
    margin-left: 0;
}

.onoffswitch-checkbox:checked + .onoffswitch-label .onoffswitch-switch {
    right: 0px;
}


.onoffswitch-label[for='new-product-calculator-discount-type'] .onoffswitch-inner:after {
    content: '£'
}

.onoffswitch-label[for='new-product-calculator-discount-type'] .onoffswitch-inner:before {
    content: '%'
}

.onoffswitch-label[for='new-product-optional-optional'] .onoffswitch-inner:after,
.onoffswitch-label[for='new-product-optional-changeable'] .onoffswitch-inner:after,
.onoffswitch-label[for='new-product-calculator-fixed-discount'] .onoffswitch-inner:after {
    content: 'N'
}

.onoffswitch-label[for='new-product-optional-optional'] .onoffswitch-inner:before,
.onoffswitch-label[for='new-product-optional-changeable'] .onoffswitch-inner:before,
.onoffswitch-label[for='new-product-calculator-fixed-discount'] .onoffswitch-inner:before {
    content: 'Y'
}

.documentPage {
    box-shadow: 0px 1px 2px 0px rgb(60 64 67 / 30%), 0px 2px 6px 2px rgb(60 64 67 / 15%);
}

    .documentPage a {
        text-decoration: underline;
        cursor: pointer;
    }

td {
    background-color: transparent;
}

.user-defined-field {
    border: solid 1px #eee;
    padding: 10px;
    border-radius: 4px;
}

.quickAddButton {
    position: absolute;
    bottom: -10px;
    margin: 0 auto;
    left: 0px;
    min-height: 35px;
    z-index: 10;
}

.quoteEditBlockGroup > .btn {
    padding: 0.25rem 0.5rem;
    font-size: 0.875rem;
    line-height: 1.5;
    border-radius: 0.2rem;
    margin-top: -1px;
}

.ql-bubble .ql-tooltip {
    background-color: #040327;
    border-radius: 25px;
    padding: 10px;
    color: #fff;
    z-index: 1;
    max-width: 200px;
}

.section-hover {
    border-bottom: none 1px #eee;
}

.document-builder-empty-section {
    border: solid 1px #eee;
    margin-top: 10px;
    height: 90px;
    padding: 5px;
    width: 100%;
    border-radius: 4px;
    padding-top: 30px;
    text-align: center;
}


#document-ribbon {
    display: block;
    position: fixed;
    top: 50px;
    left: 50px;
    width: calc(100% - 50px);
    max-height: 40px;
    box-sizing: border-box;
    border-bottom: 1px solid #eee;
    background: white;
    z-index: 20;
}

#document-ribbon-bottom {
    display: block;
    position: fixed;
    bottom: 0px;
    left: 50px;
    width: calc(100% - 50px);
    height: 30px;
    box-sizing: border-box;
    border-top: 1px solid rgb(160, 160, 160);
    background: rgb(240, 240, 240);
    z-index: 20;
}

.surround-section {
    width: 100%;
}

    .surround-section ::after after {
        border: solid 1px red;
        width: 105%;
        height: 105%;
    }

#document-ribbon, #document-ribbon * {
    color: #58585b;
}

.ribbon-option {
    display: block;
    margin: 1px;
    color: black;
    float: left;
}

#document-right-col {
    position: fixed;
    right: 0px;
    top: 90px;
    width: 351px;
    max-height: calc(100vh - 120px);
    box-sizing: border-box;
    overflow: auto;
    overflow-x: hidden;
    height: 100vh;
    z-index: 100
}

.document-right-card {
    display: block;
    border-radius: 4px;
    background: white;
    box-shadow: 0px 1px 2px 0px rgb(60 64 67 / 30%), 0px 2px 6px 2px rgb(60 64 67 / 15%);
    padding: 10px;
}

.document-right-card {
    margin-top: 15px;
}

.document-right-card--first {
    margin-top: 0;
}

#document-drag-zone {
    display: block;
    width: auto;
    position: fixed;
    top: 50%;
    transform: translateY(-50%);
    margin-left: -75px;
    min-height: 100px;
    max-height: 200px;
    height: 100vh;
    /*z-index: 2;*/
    overflow-y: auto;
}

    #document-drag-zone .section-control {
        float: none;
        clear: both;
        width: 100%;
    }

#document-preview {
    min-width: 150px;
}

    #new-document-builder *::-webkit-scrollbar,
    #new-document-builder::-webkit-scrollbar,
    #document-preview::-webkit-scrollbar {
        width: 8px !important;
    }

    #new-document-builder *::-webkit-scrollbar-track,
    #new-document-builder::-webkit-scrollbar-track,
    #document-preview::-webkit-scrollbar-track {
        background: transparent !important;
        box-shadow: none !important;
    }

    #new-document-builder *::-webkit-scrollbar-thumb,
    #new-document-builder::-webkit-scrollbar-thumb,
    #document-preview::-webkit-scrollbar-thumb {
        background: rgba(0, 0, 0, 0.0) !important;
        border: solid 2px transparent;
        box-shadow: none !important;
        border-radius: 4px !important;
        transition: background-color 0.5s ease;
    }

    #new-document-builder *:hover::-webkit-scrollbar-thumb,
    #new-document-builder:hover::-webkit-scrollbar-thumb,
    #document-preview:hover::-webkit-scrollbar-thumb {
        background: rgba(0, 0, 0, 0.1) !important;
    }

    #document-preview .documentPage {
        background: none;
    }

.ribbon-option--level1 {
    display: inline-block;
    float: left;
    cursor: pointer;
    position: relative;
    padding: 11px 15px;
    margin: 0;
    height: 100%;
}

.ribbon-option--level1--first {
    margin-left: 0;
}

.ribbon-option--selected {
    background: rgba(0,0,0,.1);
}

.ribbon-option--level-2 {
    position: absolute;
    border-radius: 0 4px 4px 4px;
    background: white;
    /*padding: 15px;*/
    box-shadow: 0px 1px 2px 0px rgb(60 64 67 / 30%), 0px 2px 6px 2px rgb(60 64 67 / 15%);
    bottom: 0px;
    right: 0;
    margin: 0;
    transform: translateY(100%);
    min-width: 200px;
}

.ribbon-option-row {
    display: block;
    overflow: auto;
    cursor: pointer;
    padding: 2px 5px;
    margin: 0;
}

.ribbon-option-row--separator {
    border-top: 1px solid #eee;
}

.ribbon-option-row:hover {
    background: rgba(0,0,0,.1);
}

.ribbon-option-row--first {
    /*margin-top: 5px;*/
}

.ribbon-option-row--last {
    border-bottom: none;
}

.ribbon-option-label,
.ribbon-option-input {
    display: inline-block;
}

.ribbon-option-label {
    float: left;
    width: auto;
    cursor: pointer;
    max-width: 90%;
    padding: 5px 12px;
    overflow: hidden;
    white-space: nowrap;
    text-overflow: ellipsis;
    font-weight: 100;
    font-size: 12px;
}

.ribbon-option-input {
    float: right;
    cursor: pointer;
    max-width: 10%;
}

.ribbon-option-label-command {
    display: inline-block;
    float: right;
    font-size: 10px;
    font-family: Consolas, monaco, monospace;
    color: #808080 !important;
    padding: 1px 4px;
    border-radius: 4px;
    width: auto;
    border: 1px solid rgba(0,0,0,0.1);
    cursor: pointer;
    font-weight: 100;
    transform: translateY(15%);
}

.quote-status,
.quote-status .orb,
.quote-status .quote-status-label {
    display: inline-block;
    float: left;
}

    .quote-status .orb {
        margin-left: 5px;
        transform: translateY(25%);
    }

    .quote-status .orb {
        margin-left: 5px;
    }

.quote-status--yellow .quote-status-label {
    color: yellow !important;
}

.quote-status--yellow .orb {
    background: yellow;
    animation: pulse-yellow 0.6s linear infinite;
}

@keyframes pulse-yellow {
    0% {
        box-shadow: 0 0 0 yellow;
    }

    50% {
        box-shadow: 0 0 5px yellow;
    }

    100% {
        box-shadow: 0 0 0 yellow;
    }
}

.quote-status--red .quote-status-label {
    color: red !important;
}

.quote-status--red .orb {
    background: red;
    animation: pulse-red 0.6s linear infinite;
}

@keyframes pulse-red {
    0% {
        box-shadow: 0 0 0 red;
    }

    50% {
        box-shadow: 0 0 5px red;
    }

    100% {
        box-shadow: 0 0 0 red;
    }
}

.quote-status--gray .quote-status-label {
    color: gray !important;
}

.quote-status--gray .orb {
    background: gray;
    animation: pulse-gray 0.6s linear infinite;
}

@keyframes pulse-gray {
    0% {
        box-shadow: 0 0 0 gray;
    }

    50% {
        box-shadow: 0 0 5px gray;
    }

    100% {
        box-shadow: 0 0 0 gray;
    }
}

.quote-status--orange .quote-status-label {
    color: orange !important;
}

.quote-status--orange .orb {
    background: orange;
    animation: pulse-orange 0.6s linear infinite;
}

@keyframes pulse-orange {
    0% {
        box-shadow: 0 0 0 orange;
    }

    50% {
        box-shadow: 0 0 5px orange;
    }

    100% {
        box-shadow: 0 0 0 orange;
    }
}

.quote-status--green .quote-status-label {
    color: green !important;
}

.quote-status--green .orb {
    background: green;
    animation: pulse-green 0.6s linear infinite;
}

@keyframes pulse-green {
    0% {
        box-shadow: 0 0 0 green;
    }

    50% {
        box-shadow: 0 0 5px green;
    }

    100% {
        box-shadow: 0 0 0 green;
    }
}

.quote-status--pale-purple .quote-status-label {
    color: blueviolet !important;
}

.quote-status--pale-purple .orb {
    background: #9c88ff;
    animation: pulse-pale-purple 0.6s linear infinite;
}

.quote-status--pale-purple .quote-status-label {
    color: blueviolet !important;
}

@keyframes pulse-pale-purple {
    0% {
        box-shadow: 0 0 0 blueviolet;
    }

    50% {
        box-shadow: 0 0 5px blueviolet;
    }

    100% {
        box-shadow: 0 0 0 blueviolet;
    }
}


.quote-status--purple .quote-status-label {
    color: blueviolet !important;
}

.quote-status--purple .orb {
    background: blueviolet;
    animation: pulse-purple 0.6s linear infinite;
}

@keyframes pulse-purple {
    0% {
        box-shadow: 0 0 0 blueviolet;
    }

    50% {
        box-shadow: 0 0 5px blueviolet;
    }

    100% {
        box-shadow: 0 0 0 blueviolet;
    }
}

.quote-status-label {
    margin-bottom: 0;
    margin-top: 0;
}

.zoom-icon {
    display: inline;
    float: left;
    margin: 8px 5px 0 5px;
}

.document-builder-zoom {
    display: inline;
    float: left;
    max-width: 100px;
    width: 100px;
    margin-top: 5px;
}

input.document-builder-zoom:hover {
    border: none;
}

.bottom-divider {
    display: block;
    float: left;
    width: 1px;
    height: 100%;
    min-height: 30px;
    border-left: 1px solid rgb(140, 140, 140);
    margin: 0 14px;
}

.bottom-ribbon-drop-down {
    text-overflow: ellipsis;
    width: 100px;
    margin-top: 2px;
    margin-left: 2px;
    background: transparent;
    border: 1px solid rgba(0,0,0,.1);
    border-radius: 4px;
}

/* document builder draw */
.document-properties,
.document-properties__item__content {
    transition: ease .1s;
}

.document-properties--hide {
    transform: translateX(90%);
}

.properties-button {
    right: 30px;
}

@media(max-width: 925px) {
    .document-properties--hide {
        transform: translateX(100%);
    }
}

/* same width as hidden-xs*/
@media(max-width: 768px) {
    /*
     * Completely hide this bar at this resolution as we
     * we need as much horizontal screen estate as we can.
     */
    .properties-button {
        right: -2px;
    }

    .document-properties--hide {
        transform: translateX(100%);
    }

    #document-right-col {
        top: 0;
        z-index: 999;
        width: 100vw;
        height: calc(100vh - 50px);
        transition: ease-in-out .33s;
        max-height: unset;
    }
}



.document-properties--show {
    transform: translateX(0);
}

.document-properties__item__content--hide {
    display: none;
}

.document-properties__item__content--show {
    display: block;
}

.document-properties {
    padding-bottom: 30px;
    background: #4d5662;
    box-shadow: 0 0px 15px rgba(0,0,0,0.15);
    min-width: 300px;
}

.btn-document {
    font-size: 12px;
    color: #666;
    padding: 7px 10px;
    float: right;
    margin-top: 4px;
    margin-right: 4px;
    cursor: pointer;
    border-radius: 4px;
}

    .btn-document:hover {
        background: rgba(0,0,0,0.07);
    }

    .btn-document span {
        font-family: 'Nunito','Monda','Montserrat','Open Sans', montserrat, 'PT Sans', 'Segoe UI';
        padding: 0 4px;
    }

.btn--rounded {
    border-radius: 8px;
}

.document-properties input[type="text"],
.document-properties select {
    border: solid 1px #d5d9db;
    background: #fff;
    padding: 7px 9px;
    border-radius: 4px;
    box-shadow: 0px 3px 5px -3px rgb(0 0 0 / 7%);
    color: #333;
}

    .document-properties input[type="text"]:disabled,
    .document-properties select:disabled {
        background: #f1f1f1;
        color: #aaa;
        border: solid 1px #ccc;
        box-shadow: none;
    }

.document-properties select {
    box-shadow: none;
}

    .document-properties input[type="text"]:focus,
    .document-properties select:focus {
        outline: 0;
        color: #000;
        border: solid 1px dodgerblue !important;
        box-shadow: 0px 3px 5px -3px rgb(30 144 255 / 15%);
    }

.document-properties__item {
    background: #606e82;
    color: #fff;
    width: 100%;
    height: 50px;
    line-height: 51px !important;
    padding: 0 14px;
    border-bottom: solid 1px #4c5767;
    cursor: pointer;
}

    .document-properties__item:hover {
        background: #556274;
    }

.document-properties__item__content {
    background: #FAFAFA;
    padding: 14px;
}

.document-properties__item span {
    margin: 0 12px;
    font-family: 'Nunito','Monda','Montserrat','Open Sans', montserrat, 'PT Sans', 'Segoe UI';
    font-weight: 400;
}

.document-properties__item .fa-chevron-down,
.document-properties__item .fa-chevron-up {
    float: right;
    margin: 18px 0;
}

.document-properties__item__tab-menu {
    background: #75849a;
    margin: -14px -14px 0 -14px;
}


.selected-arrow {
    z-index: 9999;
    position: absolute;
    width: 0;
    height: 0;
    border-left: 5px solid transparent;
    border-right: 5px solid transparent;
    border-bottom: 5px solid #f9f9f9;
}

.document-properties__item__tab-menu__button,
.document-properties__item__tab-menu__button--active {
    border: 0;
    color: rgba(255,255,255, 0.7);
    background: none;
    padding: 10px;
}

.document-properties__item__tab-menu__button--active {
    color: #fff;
    position: relative;
}

    .document-properties__item__tab-menu__button--active:after {
        position: absolute;
        left: 50%;
        transform: translateX(-50%);
        bottom: 0;
        max-width: 7px;
        content: '';
        border-left: 10px solid transparent;
        border-right: 10px solid transparent;
        border-bottom: 7px solid white;
    }

.document-properties__item__tab-menu__button:hover {
    background: rgba(0,0,0,0.15);
}

.document-properties__item__content .draw__label {
    float: left;
    font-weight: 400;
    color: #808080;
}

.document-properties__item__content form div {
    margin: 10px 0;
}

    .document-properties__item__content form div input {
        width: 70%;
    }

    .document-properties__item__content form div .draw__label {
        width: 30%;
        line-height: 32px;
    }

.document-properties {
    box-shadow: -8px 0px 10px -3px rgba(0,0,0,0.1);
}

.sidebar-btn {
    background: transparent;
    color: #fff;
    border-radius: 3px;
    border: solid 1px #546e7a;
    padding: 4px 4px;
    font-size: 11px;
    color: #546e7a;
}

.sidebar-btn--wide {
    width: 100%;
    margin: 10px 0;
}

.sidebar-btn--red {
    color: red;
    border: solid 1px red;
}

.tableFontSettings {
    word-break: break-word; /* Probably want to change the width of the document-properties before this happens */
    border: solid 1px #d4d8de;
    width: 100%;
    border-radius: 4px;
    border-spacing: 0;
    border-collapse: initial;
    cursor: pointer;
    font-size: 10px;
}

@media(max-width: 1250px) {
    #document-preview {
        display: none;
    }
}

@media(max-height: 920px) {
    #document-drag-zone {
        top: calc(50% - 90px - 110px);
        transform: translateY(0%);
        /*max-height: calc(100vh - 110px);*/
    }
}

@media(max-width:768px) {
    #document-drag-zone {
        display: none;
    }
}

@media(max-width: 800px) {
    .modal__content {
        width: 100%;
        margin: 0;
    }
}

.tableFontSettings tbody {
    border-radius: 4px;
}

.tableFontSettings th {
    background: #f2f2f2;
    padding: 12px 8px;
    border-bottom: solid 1px #e4e4e4;
}

.tableFontSettings tr:hover {
    background: rgba(0, 0, 0, .1)
}

.tableFontSettings tr select {
    background: transparent;
    cursor: pointer;
}

.tableFontSettings tr {
    color: #666;
    border-bottom: solid 1px #b5bcc6;
    background: white;
}

.tableFontSettings td {
    padding: 8px 5px;
    background: transparent;
}

.tableFontSettings tr.first-row,
.tableFontSettings tr:first-child {
    border-radius: 4px 4px 0 0;
}

    .tableFontSettings tr.first-row .first-col,
    .tableFontSettings tr:first-child td:first-child {
        border-radius: 4px 0 0 0;
    }

    .tableFontSettings tr.first-row .last-col,
    .tableFontSettings tr:first-child td:last-child {
        border-radius: 0 4px 0 0;
    }

.tableFontSettings tr.last-row,
.tableFontSettings tr:last-child {
    border-radius: 0 0 4px 4px;
}

    .tableFontSettings tr.last-row .first-col,
    .tableFontSettings tr:last-child td:first-child {
        border-radius: 0 0 0 4px;
    }

    .tableFontSettings tr.last-row .last-col,
    .tableFontSettings tr:last-child td:last-child {
        border-radius: 0 0 4px 0;
    }

.tableFontSettings input[type="color"] {
    border: 0;
}

.tableFontSettings select {
    border: 0;
}

.orb-head {
    visibility: hidden;
    height: 0;
    width: 0;
}

.orb {
    height: 10px;
    width: 10px;
    border: 1px solid rgba(0, 0, 0, .1);
    border-radius: 50%;
    cursor: pointer;
    margin-left: 40%;
}

    .orb:hover {
        border: solid 1px #606e82;
    }

.document-properties__item__costing__item {
    background: #f2f2f2;
    border: solid 1px #ccc;
    padding: 10px;
    box-shadow: 0 2px 5px 0px rgba(0,0,0,0.19);
    cursor: pointer;
}

    .document-properties__item__costing__item:hover {
        background: rgba(0,0,0,0.1);
    }

    .document-properties__item__costing__item .fa-times,
    .document-properties__item__costing__item .fa-plus-circle {
        padding: 0 2px;
    }

    .document-properties__item__costing__item .fa-times {
        float: right;
    }

.document-properties__item__tab-menu__custom-fields .sidebar-btn {
    width: 100%;
    margin-top: -14px;
}

.document-properties__item__tab-menu__custom-fields label,
.document-properties__item__tab-menu__custom-fields input[type="text"] {
    width: 100%;
}

.document-properties__item__tab-menu__details .clearfix {
    margin: 20px 0;
}

.document-properties__item__tab-menu__details span {
    font-weight: 700;
    color: #666;
}

/** New costing styles!!! */
.costing-input-field:hover {
    border: none;
}

.documentPage .tableFontSettings tr:hover .costing-input-field {
    background: white;
}

.costing-input-field {
    border: none;
    background: transparent;
    width: calc(100% - 18px);
    margin-left: 8px;
    font-size: 14px;
    min-height: 30px;
    height: 30px;
    font-size: 1.2em;
    width: 100%;
    border-radius: 4px;
    border: none;
}

    .costing-input-field:hover {
        /*border: solid 1px #ddd;*/
    }

.costing-input-field--text-area {
    resize: none;
}

.costing-input-field--disabled {
    background: transparent;
}

.builder-version:focus {
    box-shadow: none !important;
}

.document-builder-toast-notification {
    position: fixed;
    background-color: #2a2a2f;
    bottom: 60px;
    left: 55px;
    height: 50px;
    border: 1px solid black;
    border-radius: 4px;
    z-index: 9999;
    padding: 8px 0px;
    transition: all ease .5s;
    color: white;
    box-shadow: -3px 3px 6px rgba(0,0,0,.5);
}

.document-builder-toast-notification-icon {
    display: block;
    float: left;
    margin-right: 10px;
    padding: 5px;
    border-radius: 4px;
    height: 30px;
    width: 30px;
    text-align: center;
    line-height: 0;
    font-size: 18px;
    margin-left: 10px;
}

.document-builder-toast-notification-message {
    display: block;
    float: left;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    font-size: 14px;
    padding-top: 5px;
    padding-right: 5px;
}

.document-builder-toast-notification--show {
    transform: translateX(0);
}

.document-builder-toast-notification--hide {
    transform: translateX(-250px);
}

.document-builder-toast-notification--info .document-builder-toast-notification-icon,
.document-builder-toast-notification--search .document-builder-toast-notification-icon {
    background: dodgerblue;
    color: white;
}

.document-builder-toast-notification--done .document-builder-toast-notification-icon,
.document-builder-toast-notification--save .document-builder-toast-notification-icon {
    background: #489268;
    color: white;
}

.document-builder-toast-notification--update .document-builder-toast-notification-icon,
.document-builder-toast-notification--warn .document-builder-toast-notification-icon,
.document-builder-toast-notification--loading .document-builder-toast-notification-icon {
    background: orange;
    /*color: #2a2a2f;*/
    color: white;
}

.document-builder-toast-notification--delete .document-builder-toast-notification-icon,
.document-builder-toast-notification--error .document-builder-toast-notification-icon,
.document-builder-toast-notification--denied .document-builder-toast-notification-icon,
.document-builder-toast-notification--missing .document-builder-toast-notification-icon {
    background: darkred;
    color: white;
}

.document-builder-toast-notification--favouriting .document-builder-toast-notification-icon {
    background: yellow;
    color: white;
}


.document-builder-toast-notification--sent .document-builder-toast-notification-icon {
    background: dodgerblue;
    color: white;
}

.document-builder-loader {
    position: fixed;
    top: 0;
    left: 0;
    z-index: 999999;
    background: rgba(255, 255, 255, .975);
    width: 100vw;
    height: 100vh;
}

.document-builder-loader-inner {
    position: relative;
    height: 100%;
    width: 100%;
}

.document-builder-loader-bird {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
}

.document-builder-startup-loader {
    position: absolute;
    top: calc(50% - 75px);
    left: calc(50% - 75px);
    border: 16px solid #401154;
    border-radius: 50%;
    border-top: 16px solid #a080ad;
    width: 150px;
    height: 150px;
    -webkit-animation: startUpSpin 2s linear infinite;
    animation: startUpSpin 2s linear infinite;
}

.document-builder-loader--fade-out {
    -webkit-animation: loaderFadeOut linear 2s 1 normal forwards;
    animation: loaderFadeOut linear 2s 1 normal forwards;
}

.document-builder-loader--hide {
    display: none;
}

@-webkit-keyframes startUpSpin {
    0% {
        -webkit-transform: rotate(0deg);
    }

    100% {
        -webkit-transform: rotate(360deg);
    }
}

@keyframes startUpSpin {
    0% {
        transform: rotate(0deg);
    }

    100% {
        transform: rotate(360deg);
    }
}

@-webkit-keyframes loaderFadeOut {
    0% {
        opacity: 1;
    }

    99% {
        opacity: 0;
    }

    100% {
        display: none;
    }
}

@keyframes loaderFadeOut {
    0% {
        opacity: 1;
    }

    99% {
        opacity: 0;
    }

    100% {
        display: none;
    }
}

/* 
 * New copy document modal styles
*/
.modal__header {
    height: 64px;
    width: 100%;
    background: #f2f2f2;
    border-bottom: solid 1px #ddd;
    box-shadow: 0px 7px 11px -9px rgb(0 0 0 / 10%);
}

    .modal__header h3 {
        color: #4d4d4d;
        padding: 2px 15px;
        font-size: 1.5em;
    }

        .modal__header h3 i {
            margin-right: 15px;
        }

@keyframes slide-down {
    1% {
        transform: translate(-50%, -43%);
    }

    100% {
        transform: translate(-50%, -50%);
    }
}

@keyframes slide-up {
    1% {
        transform: translateY(6px);
    }

    100% {
        transform: translateY(0);
    }
}

.modal__box {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    background: #f9f9f9;
    border: solid 1px #b4b4b4;
    box-shadow: 0 0 10px rgba(0,0,0,0.2);
    border-radius: 7px;
    animation-name: slide-down;
    animation-duration: 0.12s; /* speeeeeeeeeeeed */
    animation-timing-function: linear;
}

@media (min-width:450px) {
    .modal__box {
        min-width: 450px;
    }
}

@media (max-width: 450px) {
    .modal__header h3 {
        width: 40% !important;
        font-size: 1.3em;
    }

    .modal__header__actions {
        width: 60% !important;
    }
}

@media (max-width:350px) {
    .modal__box {
        width: 100% !important;
        margin: 4px;
        padding: 4px;
    }

    .modal__content {
        width: 100% !important;
        margin: 2px !important;
        padding: 4px !important;
    }
}

.modal__content__form {
    padding: 12px;
}

.modal__content {
    overflow-x: hidden;
    overflow-y: auto !important;
    width: 100%;
}

@media (max-width: 1000px) {
    .modal__content {
        width: 100% !important;
        margin: 2px !important;
        padding: 4px !important;
        max-height: calc(100vh - 150px) !important;
        overflow-y: auto !important;
    }
}

.modal__content__form label {
    display: inline;
}

.modal__content__form div {
    margin: 12px 0;
}

.modal__content__sidebar input[type="text"] {
    width: 100% !important;
}

modal__box input[type="text"],
modal__box input[type="number"],
.modal__box textarea,
.modal__box input[type="password"],
.modal__box select,
.modal-textbox,
.modal__content__form input {
    border: solid 1px #d5d9db;
    background: #fff;
    padding: 7px 9px;
    border-radius: 4px;
    box-shadow: 0px 3px 5px -3px rgb(0 0 0 / 7%);
}

    .modal__box input[type="text"]:disabled,
    .modal__box input[type="number"]:disabled,
    .modal__box textarea:disabled,
    .modal__box input[type="password"]:disabled,
    .modal__box select:disabled,
    .modal-textbox:disabled {
        background: #f1f1f1;
        color: #aaa;
        border: solid 1px #ccc;
        box-shadow: none;
    }

    .modal__box input[type="text"]:focus,
    .modal__box input[type="number"]:focus,
    .modal__box textarea:focus,
    .modal__box input[type="password"]:focus,
    .modal__box select:focus,
    .modal-textbox:focus {
        color: #000;
        border: solid 1px dodgerblue !important;
        box-shadow: 0px 3px 5px -3px rgb(30 144 255 / 15%);
        outline: 0;
    }

    /*
 * Excluded input[type="number"]:invalid from this as it would
 * complain when using an number with decimal points
 * A DIY solution might be needed here if we care about highlighting
 * a number box where it's contents is not a number.
 */
    .modal__box input[type="text"]:invalid,
    .modal__box textarea:invalid,
    .modal__box input[type="password"]:invalid,
    .modal__box select:invalid,
    .modal-textbox:invalid {
        color: #000;
        border: solid 1px crimson !important;
        box-shadow: 0px 3px 5px -3px rgb(220 20 60 / 15%);
        outline: 0;
    }

.modal__content__sidebar input[type="text"] {
    float: right;
}

.modal__content__sidebar__form-item {
    margin: 20px 0;
}

.modal-footer-fixed {
    position: fixed;
    bottom: 0;
    background-color: white;
    opacity: 0.9;
    width: 100%;
    padding: 10px;
}



.modal__content__sidebar label {
    display: inline;
}


.modal__header__actions {
    padding: 16px 10px;
    float: right;
    clear: right;
}

.modal__header__heading {
    padding: 16px 10px;
    float: left;
}

.modal__header__actions__btn {
    float: right;
}


    .modal__header__actions__btn:hover,
    .modal__btn:hover {
        background: #f5f5f5;
    }

.modal__content__form__actions {
    margin: 15px 0;
    width: 100%;
    float: left;
}


.modal__content__sidebar {
    animation-name: slide-left;
    animation-duration: 0.06s;
    animation-timing-function: linear;
    position: absolute;
    z-index: 3;
    top: 0;
    right: 0;
    height: 100%;
    width: 300px;
    background: #f2f2f2;
    border-left: solid 1px #ccc;
    padding: 12px;
    box-shadow: -1px 0px 4px 1px rgb(0 0 0 / 10%);
    overflow: auto;
}

.modal__content__sidebar--left {
    animation-name: slide-right-2;
    left: 0;
    right: unset;
    border-left: 0;
    border-right: solid 1px #ccc;
    box-shadow: 26px 0px 26px -17px rgb(0 0 0 / 10%) !important;
}

@media(max-width:500px) {
    .modal__content__sidebar {
        width: 65%;
    }
}

@media(max-width:380px) {
    .modal__content__sidebar {
        width: 80%;
    }
}

.fa-spinner {
    animation-name: spinning;
    animation-duration: 1s;
    animation-iteration-count: infinite;
    animation-timing-function: linear;
}

@keyframes spinning {
    1% {
        transform: rotateZ(0);
    }

    100% {
        transform: rotateZ(360deg);
    }
}

@keyframes slide-left {
    1% {
        transform: translateX(100px);
    }

    100% {
        transform: translateX(0);
    }
}

@keyframes slide-right-2 {
    1% {
        transform: translateX(-100px);
    }

    100% {
        transform: translateX(0);
    }
}

.modal__content__sidebar .import-results {
    margin: 50px 0;
}

.btn--slightly-rounded {
    border-radius: 4px;
}

.btn--danger {
    background: #cc0000 !important;
    color: #fff !important;
    border: solid 1px #880000 !important;
}

.import-results__imported-item {
    margin: 8px 0;
    cursor: pointer;
    border-radius: 4px;
    background: #fff;
    border: solid 1px #ccc;
    padding: 8px 4px;
    box-shadow: 0 3px 5px 0 rgba(0,0,0,0.14);
}

    .import-results__imported-item:hover {
        background: rgba(0,0,0,0.03) !important;
    }

.modal__btn__close {
    border-radius: 50%;
    background: red;
    color: #fff;
    box-shadow: 0 0 10px rgb(0 0 0 / 20%);
    color: #fff;
}

    .modal__btn__close .fa-times {
        font-size: 11px;
        transform: translateY(-1px);
    }

    .modal__btn__close:hover {
        background: crimson;
    }

.modal__btn__close__save {
    border-radius: 50%;
    background: var(--success);
    color: #fff;
    box-shadow: 0 0 10px rgb(0 0 0 / 20%);
    color: #fff;
}

    .modal__btn__close__save .fa-times {
        font-size: 11px;
        transform: translateY(-1px);
    }

    .modal__btn__close__save:hover {
        background: #00cc66;
    }

.modal-background {
    position: fixed;
    top: 0;
    left: 0;
    z-index: 999;
    background: rgba(0, 0, 0, .2);
    height: 100vh;
    width: 100vw;
}

@keyframes slide-right {
    1% {
        transform: translateY(-52px) translateX(40px);
        opacity: 0.2;
    }

    100% {
        transform: translateY(-52px) translateX(50px);
        opacity: 1;
    }
}

.payment-schedule__add {
    animation-name: slide-right;
    animation-duration: 0.3s;
    width: 300px;
    background: #fff;
    padding: 10px;
    margin: 0 0 30px 0;
    box-shadow: 0 0 10px rgba(0,0,10,0.20);
    transform: translateY(-52px) translateX(50px);
    position: absolute;
    border: solid 1px #aaa;
    border-radius: 8px;
}

@media(max-width: 420px) {
    .payment-schedule__add {
        animation: none !important;
        width: 98% !important;
        transform: none !important;
        box-shadow: 0 0 2px rgba(0,0,0,0.15) !important;
    }
}

.payment-schedule__add input[type="text"] {
    width: 60%;
}


.payment-schedule__add input[type="text"] {
    width: 60%;
}

.payment-schedule__add .ta-scroll-window .ta-bind {
    outline: none;
}

.modal__box--extra-large {
    width: 1240px;
}

.modal__box--responsive-large {
    width: 90%;
    max-width: 800px;
    height: 90%;
    max-height: 800px;
}

.modal__box--table {
    height: 95vh;
    width: 90vw;
    overflow-y: auto;
}

@media(min-width: 768px) {
    .modal__box--costings {
        height: 80vh;
    }

    #document-ribbon, #document-ribbon-bottom {
        left: 50px;
    }
}

@media(min-width: 1536px) {
    .modal__box--costings {
        width: 1500px !important;
    }
}

.modal__box--large {
    width: 960px;
}

.modal__box--medium {
    width: 640px;
}

.modal__box--small {
    width: 320px;
}

.modal__box--large,
.modal__box--medium,
.modal__box--small {
    overflow-x: hidden;
}

.modal__content {
    height: 100%;
    /*min-height:300px;margin-bottom:50px;*/
    overflow-y: auto;
}

.modal__content--fullscreen {
    max-height: calc(100vh - 360px);
}

@media (min-height: 580px) {
    .modal__box__payment-schedule {
        min-height: 440px;
        max-height: calc(100vh - 180px);
    }
}

@media (max-width: 1080px) {
    .modal__box--large {
        width: 90%;
    }
}

@media (max-width: 769px) { /* Side menu gone now, good to expand*/
    .modal__box--large,
    .modal__box--medium {
        width: 95%;
    }

    #document-ribbon, #document-ribbon-bottom {
        width: 100%;
        left: 0px;
    }
}

/* Indicate that these sections are draggable */
#document-drag-zone.section-control,
#new-document-builder *[draggable="true"] {
    cursor: move; /* fallback: no `url()` support or images disabled */
    cursor: url(images/grab.cur); /* fallback: Internet Explorer */
    cursor: -webkit-grab; /* Chrome 1-21, Safari 4+ */
    cursor: -moz-grab; /* Firefox 1.5-26 */
    cursor: grab; /* W3C standards syntax, should come least */
}

    #document-drag-zone.section-control:active,
    #new-document-builder *[draggable="true"]:active {
        cursor: url(images/grabbing.cur);
        cursor: -webkit-grabbing;
        cursor: -moz-grabbing;
        cursor: grabbing;
    }

/* This won't work on touch screen, so hide it. */

/* smartphones, touchscreens */
@media (hover: none) and (pointer: coarse) {

    #document-drag-zone {
        /*display: none;*/
    }

    /*  #document-ribbon, #document-ribbon-bottom {
        width: 100%;
        left: 0px;
    }*/

    #document-builder-mobile-navigation {
        display: block !important;
    }

    #mobile-review-btn {
        display: block !important
    }
}

#mobile-review-btn {
    bottom: 50px;
}

/* stylus-based screens */
@media (hover: none) and (pointer: fine) {
    #document-right-col,
    #document-ribbon-bottom,
    #document-ribbon,
    #document-drag-zone {
        display: none;
    }


    #mobile-review-btn {
        display: block !important;
    }

    #document-builder-mobile-navigation {
        display: block !important;
    }
}

/* Nintendo Wii controller, Microsoft Kinect */
@media (hover: hover) and (pointer: coarse) {
    #document-ribbon-bottom,
    #document-ribbon,
    #document-drag-zone {
        display: none;
    }

    #mobile-review-btn {
        display: block !important;
    }


    #document-builder-mobile-navigation {
        display: block !important;
    }
}

/* stop overflow */
.page-section,
.page-section img {
    max-width: 100%;
}

.moreSectionOptions {
    height: 59px;
    width: 100%;
    position: absolute;
    top: 0;
    padding: 0;
    right: 0;
    background: rgba(0,0,0,0.8);
    line-height: 60px;
    padding: 0 10px;
    animation-name: zoom;
    animation-duration: 0.1s;
    animation-timing-function: linear;
    overflow-x: hidden;
}

    .moreSectionOptions .btn {
        width: calc(33.33% - 3px);
        text-align: center;
        margin: 0;
        padding: 20px 0;
    }

    .moreSectionOptions .btn-group i {
        margin-top: 14px !important;
    }

@keyframes zoom {
    1% {
        opacity: 0;
        transform: scale(0.96);
    }

    100% {
        transform: scale(1);
        opacity: 1;
    }
}

.tooltipWindow {
    background: rgba(0,0,0,0.03);
    padding: 12px;
    color: #888;
    margin: 10px 0;
    height: 100%;
    width: 100%;
    box-shadow: 0px 2px 6px 0 rgb(0 0 0 / 30%);
    border-radius: 4px;
    animation-name: slide-up;
    animation-duration: 0.1s;
    animation-timing-function: linear;
    transform: translateY(0);
}

    .tooltipWindow .pull-right {
        background: transparent;
        color: #aaa;
        border: 0;
    }

/* Tooltips that can't be closed */
.tooltipWindow--static {
    margin: 6px 0 12px !important;
}

/* I don't know why the old version set the max width to 16cm for some strange reason?! */
@media only screen and (min-device-width: 300px) and (max-device-width: 1024px) and (-webkit-min-device-pixel-ratio: 2) {
    .documentPage {
        max-width: calc(100 / 23 * 21vw) !important;
        /*
        min-height:820px;*/
    }
}

/*
    Import draw & insert draw
*/
.import-draw {
    position: absolute;
    right: 0;
    top: 0;
    height: 100%;
    width: 300px;
    background: #f2f2f2;
    border-left: solid 1px #ccc;
    box-shadow: -1px 0px 4px 1px rgb(0 0 0 / 10%);
    z-index: 9999;
    transition: 0.1s all ease;
}

.import-draw--show {
    transform: translateX(0%);
}

.import-draw--hide {
    transform: translateX(100%);
}

.import-draw-btn {
    width: 28px;
    border: 0;
    color: #888;
    padding: 0.375rem 0.75rem;
}

.import-draw-close {
    position: absolute;
    top: 20px;
    right: 20px;
}

.import-draw-heading {
    position: absolute;
    top: 20px;
    left: 15px;
    padding: 0;
    margin: 0;
}

.import-draw-content {
    position: absolute;
    top: 55px;
    left: 15px;
    width: calc(100% - 30px);
    height: calc(100% - 65px);
    border-top: 1px solid #ccc;
}

.import-draw-row-name {
    max-width: calc(100% - 84px);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    float: left;
    margin: 0;
    padding-top: 5px;
}

.import-draw-row-remove {
    float: right;
}

.import-draw-row {
    display: block;
    clear: both;
    float: none;
    padding: 5px;
    overflow: auto;
    border-bottom: 1px solid #ccc;
}

.import-draw-row--last {
    border-bottom: none;
}

.import-draw-row--first {
    border-top: 1px solid #ccc;
}

.import-draw-empty-message {
    font-size: 2.5rem;
    text-align: center;
    margin-bottom: 0;
    margin-top: 35px;
}
/* redefining how this works */
@keyframes slide-down-y {
    1% {
        transform: translateY(-100%);
    }

    100% {
        transform: translateY(0);
    }
}

#document-cover-page-ribbon {
    animation-name: slide-down-y;
    animation-duration: 0.1s;
    animation-timing-function: linear;
}

.visibility-toggle {
    color: #aaa;
    padding: 10px;
    border-radius: 4px;
    margin: 10px 0;
    cursor: pointer;
    background: #eee;
}


/*
    Forcing quill to play ball when it's not in edit mode.
*/
.textBlock .ql-align-center {
    text-align: center;
}

.textBlock .ql-align-right {
    text-align: right;
}

.textBlock .ql-align-justify {
    text-align: justify;
}

.textBlock .ql-align-center {
    text-align: center;
}

.textBlock .ql-size-huge {
    font-size: 2.5em;
}

.textBlock .ql-size-large {
    font-size: 1.5em;
}

.textBlock .ql-size-small {
    font-size: 0.75em;
}

.textBlock .ql-indent-1:not(.ql-direction-rtl) {
    padding-left: 3em;
}

.textBlock .ql-indent-2:not(.ql-direction-rtl) {
    padding-left: 6em;
}

.textBlock .ql-indent-3:not(.ql-direction-rtl) {
    padding-left: 9em;
}

.textBlock .ql-indent-4:not(.ql-direction-rtl) {
    padding-left: 12em;
}

.textBlock .ql-indent-5:not(.ql-direction-rtl) {
    padding-left: 15em;
}

.textBlock .ql-indent-6:not(.ql-direction-rtl) {
    padding-left: 18em;
}

.textBlock .ql-indent-7:not(.ql-direction-rtl) {
    padding-left: 21em;
}

.textBlock .ql-indent-7:not(.ql-direction-rtl) {
    padding-left: 24em;
}

.textBlock .ql-indent-7:not(.ql-direction-rtl) {
    padding-left: 24em;
}

.textBlock pre.ql-syntax {
    background-color: #23241f;
    color: #f8f8f2;
    overflow: visible;
}

.textBlock blockquote {
    border-left: 4px solid #ccc;
    margin-bottom: 5px;
    margin-top: 5px;
    padding-left: 16px;
}

.textBlock ul,
.textBlock ol {
    padding-left: 1.5em;
}

    .textBlock ol li:not(.ql-direction-rtl),
    .textBlock ul li:not(.ql-direction-rtl) {
        padding-left: 1.5em;
    }

.textBlock li.ql-indent-1:not(.ql-direction-rtl) {
    padding-left: 4.5em;
}

.textBlock li.ql-indent-2:not(.ql-direction-rtl) {
    padding-left: 7.5em;
}

.textBlock li.ql-indent-3:not(.ql-direction-rtl) {
    padding-left: 10.5em;
}

.textBlock li.ql-indent-4:not(.ql-direction-rtl) {
    padding-left: 13.5em;
}

.textBlock li.ql-indent-5:not(.ql-direction-rtl) {
    padding-left: 16.5em;
}

.textBlock li.ql-indent-6:not(.ql-direction-rtl) {
    padding-left: 19.5em;
}

.textBlock li.ql-indent-8:not(.ql-direction-rtl) {
    padding-left: 25.5em;
}

.costings-navigation {
    position: relative;
}

.costings-view {
    position: relative;
    float: left;
    height: 97%;
    width: 97%;
    margin: 0 12px;
}

.costings-navigation ul {
    padding-left: 5px;
    list-style: none;
}

.costings-navigation li {
    position: relative;
    padding: 8px 0 8px 15px;
    box-sizing: border-box;
}

    .costings-navigation li:before {
        position: absolute;
        top: 15px;
        left: 0;
        width: 10px;
        height: 1px;
        margin: auto;
        content: '';
        background-color: #aaa;
    }

    .costings-navigation li:after {
        position: absolute;
        top: 0;
        bottom: 0;
        left: 0;
        width: 1px;
        height: 100%;
        content: '';
        background-color: #aaa;
    }

    .costings-navigation li:last-child:after {
        height: 15px;
    }

.costings-item-actions {
    float: right;
}

    .costings-item-actions div {
        padding: 3px;
        border-radius: 2px;
        margin-left: 1px;
    }

        .costings-item-actions div:hover {
            background: rgba(0,0,0,0.15);
        }

.costings-nav > .costings-nav__item:first-of-type {
    font-weight: bold;
}

.costings-nav__item .fa {
}

.costings-nav__item__divider {
    height: 43px;
    background: #fff;
    color: #4d4d4d;
    font-size: 14px;
    padding: 11px;
}

.costings__item__menu {
    width: 100%;
    clear: both;
    background: #fafafa;
    display: block;
    float: left;
    box-shadow: inset 0px 3px 2px 1px rgb(0 0 0 / 3%);
    border-radius: 0 0 7px 7px;
}

.costings-nav__item {
    border-radius: inherit;
    background: #fff;
    color: #4d4d4d;
    font-size: 12px;
    display: block;
    padding: 15px 14px;
    min-height: 48px;
}

.costings-nav__item-container {
    border-radius: 7px;
    border: solid 1px #ddd;
    box-shadow: 0px 1px 6px rgb(0 0 0 / 15%);
    margin-bottom: 10px;
    display: inline-block;
    width: 100%;
}

.costings-nav__item__divider {
    margin: 10px 0 30px 0;
    padding: 0;
    height: 0;
    box-shadow: 0px 1px 6px rgb(0 0 0 / 15%);
}

.costings-side-menu {
}

.section-header {
    display: block;
    position: relative;
    color: #888;
    font-size: 14px;
    text-align: center;
    width: 100%;
    clear: both;
    margin: 12px 0;
}

.section-header-border,
.section-header-text {
    display: inline;
    vertical-align: middle;
}

.section-header-text {
    background: #fff;
    /*z-index: 1;*/
    position: relative;
    padding: 0 10px;
    cursor: default;
}

.section-header-border {
    z-index: 0;
    display: block;
    height: 1px;
    width: 100%;
    border-top: 1px solid #ddd;
    position: absolute;
    top: 50%;
    left: 0;
}

.costings-nav__item:hover {
    cursor: pointer;
}

.costings-nav__item .fa-caret-right,
.costings-nav__item .fa-caret-down {
    padding: 17px 12px;
    margin: -13px;
    margin-right: 0;
}


.costings-nav__item--expanded {
    box-shadow: 0px 0px 4px rgba(0, 0, 0, 0.25);
    border-radius: 4px 4px 0px 0px;
}

.costings-add-section {
    color: #666;
    cursor: pointer;
    padding: 15px 8px;
    border-radius: 4px;
    background: none;
    border: 0;
    font-weight: bold;
}

    .costings-add-section:hover {
        background: rgba(0,0,0,0.02);
    }

    .costings-add-section .fa {
        margin-right: 10px;
    }

.costing-draw {
    overflow: auto;
    width: 250px;
    overflow-x: hidden;
    height: 100%;
}

.costings-product-information div,
.costings-product-controls div,
.costings-product-controls i,
.costings-product-information div {
    font-size: 12px;
    color: #666;
}


.costings-view .table-responsive {
    float: left;
}


.costings-product-information__controls__control,
.transparent-btn {
    border: 0;
    background: transparent;
    min-width: 32px;
    padding: 4px;
    border-radius: 4px;
    text-align: center;
    color: #666;
}

.transparent-btn--primary {
    color: var(--primary);
    font-weight: bold;
}

.transparent-btn--wide {
    width: 100%;
    padding: 12px 0;
}

.costings-product-information__controls__control {
    float: left;
}

    .costings-product-information__controls__control:hover,
    .transparent-btn:hover {
        cursor: pointer;
        background: rgba(0, 0, 0, 0.06);
    }

    .costings-product-information__controls__control:disabled,
    .transparent-btn:disabled {
        border: 0;
        background: transparent;
        width: 32px;
        float: left;
        padding: 4px;
        border-radius: 4px;
        text-align: center;
        color: #aaa;
    }

.modal-textbox,
.modal__box input[type="text"].modal-textbox {
    width: 100%
}

.transparent-textbox {
    background: none !important;
    padding: 10px 15px;
    color: #666 !important;
    border: 0 !important;
    width: 100% !important;
    box-shadow: none !important;
}

.line-seperator-margin {
    border-bottom: solid 1px #ccc;
    margin: 20px 0;
    width: 100%;
}

.modal-textbox:focus {
    outline: 0 !important;
}

.costings-product-information__header div {
    font-size: 18px;
    text-align: center;
    color: #4d4d4d;
}

.costings-side-menu__tabs {
    z-index: 1;
    background: #fff;
    position: sticky;
    inset-block-start: 0;
    border-bottom: solid 1px #ccc;
    float: left;
    clear: right;
    width: 100%;
}

.costings-side-menu__tabs__tab {
    box-shadow: 0;
    border: 0;
    background: #fff;
    padding: 12px 10px;
    color: #666;
    border-right: solid 1px #ccc;
    width: 20%;
    float: left;
    cursor: pointer;
    text-align: center;
}

    .costings-side-menu__tabs__tab:disabled {
        background: #efefef;
        color: #aaa;
    }

        .costings-side-menu__tabs__tab:disabled:hover {
            background: #efefef;
        }

    .costings-side-menu__tabs__tab:hover {
        background: rgba(0,0,0,0.03);
    }

.costings-product-calc-tabs {
    z-index: 1;
    border-bottom: solid 1px #ccc;
    width: 100%;
    position: sticky;
    inset-block-start: 0;
}

.costings-product-calc-tabs__tab {
    padding: 10px 7px;
    color: #aaa;
    border-right: solid 1px #ccc;
    border-bottom: solid 1px #ccc;
    width: 33.33%;
    float: left;
    cursor: pointer;
    text-align: center;
    background: #f4f4f4;
}

.costings-side-menu__tabs__tab:last-of-type {
    border-right: none;
}

.costings-side-menu__tabs__tab--active {
    color: dodgerblue;
    background: aliceblue;
}

.costings-product-information__header__imageBtn {
    background: aliceblue;
    padding: 5px;
    border-radius: 50%;
    color: #4D8EC7;
    width: 30px;
    height: 30px;
    float: left;
    clear: left;
    transform: translateX(40px);
    border: solid 1px #4D8EC7;
    cursor: pointer;
}

    .costings-product-information__header__imageBtn:hover {
        background: #D9EAF9;
    }

.costings-product-information__header .fa {
    color: #4D8EC7;
}

.costings-cell {
    border: 0 !important;
    width: 100% !important;
    height: 100%;
    margin: 0;
    padding: 0 !important;
    box-shadow: none !important;
    text-align: center;
    outline: none;
}

.new-product-row {
    /*border-bottom: solid 2px var(--primary);*/
    /*border-top: solid 2px var(--primary);*/
    border: solid 2px var(--success);
}

.costing-table-item {
    border: 0 !important;
    border-right: solid 1px #ccc !important;
    border-bottom: solid 1px #ccc !important;
    width: 100% !important;
    height: 100%;
    margin: 0;
    padding: 0 !important;
    text-align: center;
}

/* uh.. not proud of this*/
.border-bottom-0-important {
    border-bottom: 0 !important;
}

.costings-text {
    position: relative;
    display: inline-block;
    width: 100%;
    /* Piece of poop hack around the overflow on the parent. */
    overflow: hidden;
}

    .costings-text i,
    .new-modal-input-icon {
        position: absolute;
        top: 14px;
        left: 15px;
    }

.new-modal-input-icon {
    top: 11px;
}

.costings-text .modal-textbox {
    box-sizing: border-box;
    padding-left: 45px !important;
}

.costings__content {
    padding: 15px;
    float: left;
    width: 100%;
}

@keyframes slide-down-1 {
    1% {
        transform: translateY(-20px);
        opacity: 0;
    }

    100% {
        transform: translateY(0);
        opacity: 1;
    }
}

.costing-options__option {
    border: none;
    background: none;
    color: #666;
    border-top: solid 1px #e5e5e5;
    float: left;
    padding: 8px 0;
    text-align: center;
    cursor: pointer;
    width: 20%;
    animation-name: slide-down-1;
    animation-duration: 0.06s;
    animation-timing-function: linear;
}

    .costing-options__option:disabled {
        color: #bbb;
    }

/* Disabled this styling for now.. doesn't look too good.*/
.costing-highlighted {
    /*
    border-left: solid 1px #ccc;
    background: rgba(0,0,0,0.04);
    margin-bottom: 12px;
    padding: 8px 4px;
    border: solid 1px #ccc; */
}

.costing-options__option:hover {
    background: rgba(0,0,0,0.045);
}

.costing-options__option:disabled .fa-plus-circle {
    color: #aaa;
}

.costing-options__option:disabled {
    color: #aaa;
}

.costings-nav__item,
.costings-add-section-window {
    animation-name: zoom;
    animation-duration: 0.1s;
    animation-timing-function: linear;
}

.costings-add-section-window {
    background: #fff;
    border-radius: 7px;
    padding: 15px;
    width: 100%;
    box-shadow: -1px 12px 15px -7px rgba(0,0,0,0.1);
    float: left;
    border: solid 1px #ccc;
}

    .costings-add-section-window .transparent-btn {
        width: unset !important;
        margin-left: 15px !important;
        padding: 5px 15px;
    }

.costings__details__detail {
    margin: 4px 0;
}

.costings-product-information__details {
    margin-top: 12px;
}

.costings-text .transparent-textbox {
    margin-left: 30px;
}

.costings-settings__setting {
    cursor: pointer;
    padding: 6px 10px;
    margin: 10px 0;
    border-radius: 6px;
}

    .costings-settings__setting:hover {
        background: rgba(0,0,0,0.06);
    }

    .costings-settings__setting i {
        margin-right: 12px;
    }

.costings-setting__setting__toggle-switch {
    border-bottom: solid 1px #ededed;
    margin: 12px;
    padding: 12px 10px;
}

    .costings-setting__setting__toggle-switch:last-child {
        border-bottom: 0;
    }

.modal-textbox option:disabled {
    color: #aaa !important;
}


/* This stuff is explicit to the costings section */
/* Have to override the mobile bar, which has a z-index of 9999999 */
.modal-background--costings {
    z-index: 10000000;
}

.modal__box--costings {
    width: 98vw;
    overflow-y: auto;
}


.costing-table-item {
    min-width: 70px !important;
    height: 35px !important;
    margin: 0 !important;
    padding: 0 !important;
}

.costing-table-header {
    border: 0 !important;
    width: 100% !important;
    height: 100% !important;
    margin: 0 !important;
    padding: 0 !important;
    box-shadow: none !important;
    text-align: center !important;
}

    .costing-table-header .costings-cell {
        border-right: solid 1px #ccc !important;
        border-bottom: solid 1px #ccc !important;
        padding: 8px 0 !important;
    }

.costing-table-item[data-column="1"],
.costing-table-item[data-column="2"],
.costing-table-item[data-column="3"],
.costing-table-item[data-column="4"],
.costing-table-item[data-column="5"] {
    width: 16.66%;
}


.costing-table-item[data-column="0"] {
    width: 33.33%;
}

#middle-costing-piece {
    width: 48%;
    overflow-x: auto;
    min-height: 400px;
    margin-left: 20px;
}


#small-screen-costing-controls {
    max-width: 100%;
    overflow: auto;
    overflow-x: hidden;
    display: none;
    padding: 12px;
    margin: 10px 0;
    background: #fff;
    border: solid 1px #ddd;
    border-radius: 7px;
    box-shadow: 0px 10px 11px -9px rgb(0 0 0 / 10%) !important;
}

    #small-screen-costing-controls .transparent-btn {
        width: auto !important;
    }

.small-screen {
    display: none;
    padding: 15px 0;
    width: 100%;
}


.costings-text .modal-textbox {
    padding-left: 35px !important; /* I'm not happy about this, apologies */
}

.crimsonred {
    color: crimson;
}


.modal__box.modal__box--costings .modal__btn__close {
    margin-right: 10px;
}

.costings-product-information__controls__control .fa-trash-o {
    color: crimson;
}

.underline-textbox {
    background: transparent !important;
    border: 0 !important;
    box-shadow: none !important;
    border-bottom: solid 1px #ccc !important;
}

    .underline-textbox:focus {
        border-bottom: solid 1px dodgerblue !important;
        outline: none;
    }

/* Take into account borders, hence 460 becomes 458. */
.costings-side-menu__preview {
    width: 458px;
    margin: 10px 0;
    overflow-y: auto;
    padding-bottom: 15px;
}

#middle-costing-piece {
    margin-left: 12px;
}

@media(max-width: 1280px) {
    .costings-nav {
        padding: 5px
    }

    #left-costing-piece {
        width: 30%;
    }

    #middle-costing-piece {
        width: 70%;
        margin-left: 0;
    }

    .costing-draw {
        width: 100%;
    }

    .modal__box--costings {
        width: 98%;
    }
}

@media (max-width: 768px) {
    .modal__box--costings {
        height: 98%;
    }

    #middle-costing-piece {
        width: 100%;
    }
}

.costings-top-bar--preview {
    display: none;
}

@media(max-width: 1280px) {
    .costings-top-bar--preview {
        display: block;
    }
}

@media(max-width: 768px) {
    .costings-top-bar--preview {
        display: none;
    }
}

@media(max-width: 1460px) {
    .costings-side-menu__preview {
        width: 358px;
    }
}

#costing-modal-product-list-spreadsheet {
    width: calc(100% - 2px) !important;
    background: white !important;
}

@media(min-width: 1280px) {
    .costings-panel {
        overflow: auto;
    }
}

@media(max-width: 1280px) {
    .costings-side-menu.costings-side-menu--open {
        margin-top: -15px;
        position: fixed;
        height: 100vh;
        background: #fff;
        border-left: solid 1px #ccc;
        right: 0;
        box-shadow: -14px 0px 5px -10px rgb(0 0 0 / 10%);
    }

    .costings-side-menu {
        max-width: 400px;
        right: -200%;
        position: fixed;
        z-index: 1;
    }
}

@media(max-width: 768px) {
    .costings-panel {
        float: left;
        width: 100%;
    }

    #middle-costing-piece {
        margin-left: 0;
    }

    .costings-nav__item-container {
        margin-left: 12px;
    }

    .small-screen {
        display: block;
    }

    #small-screen-costing-controls {
        display: block;
    }

    .costings-nav {
        width: 95%;
    }

    .sidebar-transparent-btn {
        padding: 15px 8px;
        background: dodgerblue;
        color: #fff;
        width: 95%;
        box-shadow: 0px 0px 10px -4px rgba(0,0,0,0.1);
    }

        .sidebar-transparent-btn:hover {
            background: #0172e0 !important;
        }



    .costing-draw {
        left: -200%;
        background: #f9f9f9;
        max-width: 350px;
        position: fixed;
    }

        .costing-draw.costing-draw--open {
            height: 100vh;
            left: 0;
            position: fixed;
            background: #f0f3f5;
            z-index: 1;
            box-shadow: 14px 0px 5px -10px rgb(0 0 0 / 10%);
            margin-top: -15px;
        }



    .costings-side-menu__preview {
        margin: 0;
        padding: 15px;
        background: #fff;
        height: 100vh;
        width: 100%;
        border-left: solid 1px #ccc;
    }

    #middle-costing-piece {
        width: calc(100vw - 30px);
    }

    .modal__box--costings {
        margin: 0 !important;
    }
}

.costings-side-menu__preview__document {
    width: 460px;
    height: 800px;
    overflow-y: auto;
}

.modal__content__sidebar__collectionSettings {
    background: #fff;
    box-shadow: -26px 0px 26px -17px rgb(0 0 0 / 10%);
    width: 100%;
    max-width:700px;
}

.vcenter {
    display: inline-block;
    vertical-align: middle;
    float: none;
}

.vCenterFlex {
    display: flex;
    align-items: center;
}

.modal__content__sidebar__title h3 {
    font-size: 14px;
}

.modal__content__sidebar__title {
    margin: 10px 0 0 0;
    border-bottom: solid 1px #ddd;
    padding-bottom: 15px;
}

.costings-side-menu__actions {
    width: 100%;
    padding: 8px;
    display: inline-block;
    margin-top: 12px;
}

.btn-icon {
    padding-right: 5px;
}

@media (max-width: 800px) {
    .btn-icon {
        padding-right: 0;
    }
}

.modal__content__sidebar .onoffswitch-label {
    display: block;
}

.modal__content__sidebar .orb {
    display: block;
}

.documentPage--costing {
    padding: 15px !important;
    min-height: 100px !important;
    height: auto !important;
}

.costings-cell--heading {
    background: #fafafa !important;
    padding: 14px 0 !important;
    border-right: 0 !important;
}

.modal-overlay {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: rgba(0,0,0,0.04);
    z-index: 1;
}

.modal__box.modal__box--costings {
    overflow-x: hidden;
}

/* This is for me and the other 3 people in the world using a samsung s3 */
@media (max-width: 480px) {
    .costings-side-menu,
    .costing-draw {
        width: 75%;
    }

    .costings-side-menu__preview {
        padding: 0;
    }
}

.costings-pl-info {
    width: 790px;
    float: left;
    line-height: 45px !important;
}


/*
 * Costing info must be hidden as we don't have enough room
 * to display relatively large numbers
*/
@media (max-width: 1320px) {
    .costings-pl-info {
        display: none;
    }
}


.overflow-after-100000 {
    max-width: 90px;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    text-align: right;
    display: inline;
}

.costings-breadcrumb {
    font-size: 14px;
    padding: 8px;
    color: #666;
    margin-bottom: 12px;
}

.costings-empty {
    width: 100%;
    text-align: center;
    margin: 30px 0;
    font-size: 14px;
}

.costings-mobile-only {
    display: none;
}

@media(max-width: 1280px) {
    .costings-mobile-only {
        display: inline;
    }
}

@keyframes slide-in-cog {
    1% {
        transform: translateX(6px);
    }

    100% {
        transform: translateX(0);
    }
}

.costings-cog {
    display: none;
    background: none;
    border: 0;
    opacity: 0;
    transition: ease-in-out opacity;
    animation-name: slide-in-cog;
    animation-fill-mode: forwards;
    animation-timing-function: linear;
    animation-duration: 0.1s;
}

.costings-product-settings {
    width: 100%;
    display: inline-block;
}

.costings-product-settings__setting {
    float: right;
    padding: 8px 12px;
}

    .costings-product-settings__setting:hover {
        background: #f0f0f0;
    }

.user-defined-actions-list {
    position: absolute;
    top: 47px;
    right: 8px;
    min-width: 300px;
    background: white;
    border-radius: 4px;
    border: 1px solid #ccc;
    list-style: none;
    padding-left: 0px;
    padding: 0px;
    color: #666;
    text-align: left;
    cursor: pointer;
    box-shadow: 0px 1px 2px 0px rgb(60 64 67 / 30%), 0px 2px 6px 2px rgb(60 64 67 / 15%);
}

.user-defined-actions-list-item {
    padding: 10px 5px;
    border-bottom: solid 1px #ccc;
    font-size: 14px;
}

    .user-defined-actions-list-item:hover {
        background: rgba(0, 0, 0, 0.05);
    }

.new-page-btn {
    width: 100%;
    background: transparent;
    border: none;
    color: var(--secondary);
    padding: 12px;
    margin: 10px auto;
    border-radius: 4px;
}

    .new-page-btn:hover {
        background: rgba(84, 110, 122, 0.06);
    }

.table-row-controls__control {
    margin: 0 3px;
}

    .table-row-controls__control:first-of-type {
        margin: 0;
        margin-right: 6px
    }

.search-lookup {
    position: absolute;
    z-index: 100;
    background: #fff;
    padding: 20px;
    box-shadow: 0px 3px 5px -3px rgb(0 0 0 / 7%);
    border: solid 1px #d5d9db;
    border-radius: 4px;
}

.search-lookup__result {
    border-bottom: solid 1px #eee;
    padding: 10px;
    cursor: pointer;
    margin: 0 !important;
}

    .search-lookup__result:hover {
        background: #f5f5f5;
    }

.documentEmailStats {
    padding-top: 6px;
    margin-right: -10px;
    margin-left: -10px
}

.documentEmailStats__stat {
    cursor: default;
    float: left;
    padding: 0 6px;
    border-left: solid 1px #ccc;
}

    .documentEmailStats__stat:first-of-type {
        border-left: 0;
    }

.inline {
    display: inline;
}

.display-block {
    display: block !important;
}

.specialText--small {
    height: 32px;
    font-size: 12px;
}

.thin-separator {
    display: inline-block;
    float: left;
    border-left: 1px solid #eee;
    padding: 15px 5px;
    margin-left: 10px;
    float: left;
    width: 1px;
    margin-top: 3px;
}

@media (max-width: 500px) {
    .thin-separator {
        margin-left: 2px;
        padding: 15px 2px;
    }
}

.table__modal__ribbon,
.email__modal__ribbon {
    position: fixed;
    left: 0;
    right: 0;
    box-shadow: 0px 3px 5px -3px rgb(0 0 0 / 7%);
    z-index: 1;
    border-bottom: solid 1px #ddd;
    background: #fff;
    box-sizing: border-box;
}

.email__modal__ribbon {
    position: relative;
}

.table__modal__ribbon__item {
    padding: 2px 4px;
    float: left;
    border-radius: 4px;
}

.table__modal__ribbon__item__button {
    margin: 3px 0;
    cursor: pointer;
}

    .table__modal__ribbon__item__button:hover {
        background: rgba(0,0,0,0.06);
    }

.table__modal__row-controls {
    background: #f1f1f1;
    border-right: solid 1px #eee;
    width: 25px;
    float: left;
}

.table__modal__column-controls {
    border-bottom: solid 1px #ddd;
    width: 100%;
}

.table__modal__column-controls__button:hover,
.table__modal__row-controls__button:hover {
    background: #eaeaea;
    cursor: default;
}

.table__modal__column-controls__button:first-of-type {
    border-left: solid 1px #ddd;
}

.table__modal__column-controls__button--origin {
    float: left;
    padding: 0;
    width: 25px;
}

.table__modal__row-controls__button {
    border-bottom: solid 1px #ddd;
    border-right: solid 1px #ddd;
    font-weight: bold;
    cursor: default;
    width: 24px;
    text-align: center;
}

    .table__modal__row-controls__button:first-of-type {
        padding: 4px;
        border-top: solid 1px #ddd;
    }

.table__modal__column-controls__button--origin:hover {
    background: transparent;
}

.table__modal__cell {
    min-width: 140px;
    background: #fff;
    min-height: 24px;
    border-right: solid 1px #eee;
    border-bottom: solid 1px #eee;
    padding: 4px 8px;
    position: relative;
}

.table__modal_cell .ql-container .ql-editor {
    padding: 0;
}

.table__modal__table {
    width: 100%;
}

.table__modal__add-column {
    width: 5%;
    height: 100%;
}

    .table__modal__add-column button {
        border-radius: 50%;
        padding: 20px;
        height: 80px;
        width: 80px;
        margin-left: 15px;
    }

.table__modal__add-row {
    width: 100%;
}

.table__modal__table-area {
    width: 100%;
    float: left;
    box-shadow: 0px 2px 5px -3px rgb(0 0 0 / 7%);
    margin-bottom: 50px;
    margin-top: 41px;
}

.table__modal__column-controls__button textarea {
    cursor: default;
    border: 0;
}

.table__modal__cell textarea,
.table__modal__column-controls textarea {
    box-shadow: none;
    width: 100%;
    border: 0;
    resize: none;
    background: none;
}

    .table__modal__cell textarea:focus,
    .table__modal__column-controls textarea:focus {
        outline: none;
    }

.highlightedCell {
    background: aliceblue;
}

.highlightedCell--darker {
    /* Got to override the colour used for :hover */
    background: #bbdfff !important;
}

/* 
 * Got to overwrite a bunch of ng-quill styles
 */
.table__modal__table ng-quill-editor {
    display: inline;
}

.table__modal__table .ql-container.ql-snow {
    border: none;
    min-width: 10px;
    border: 0;
}

.table__modal__table .ql-editor {
    min-height: 24px;
    padding: 0;
    border: none;
}

    .table__modal__table .ql-editor p {
        margin-bottom: 0;
    }

.activeTableCell {
    background: aliceblue;
    border: solid 1px;
}

.hide-border-right {
    border-right: 0;
}

.hide-border-left {
    border-left: 0;
}

.hide-border-bottom {
    border-bottom: 0;
}

.hide-border-top {
    border-top: 0;
}

.cell-editable {
    /* Got to override hover effect */
    background: #00cc66 !important;
    color: #fff !important;
}

.cell-required {
    /* Got to override hover effect */
    background: #cc0000 !important;
    color: #fff !important;
}

.modal__header__settings {
    float: left;
    margin: 15px 0;
}

.modal__btn--transparent {
    background: none;
    border: none;
    box-shadow: none;
}

    .modal__btn--transparent:hover {
        background: rgba(0,0,0,0.08);
    }

.tableModal__actions {
    position: fixed;
    bottom: 0;
    width: 100%;
    background: rgba(255,255,255,0.7);
    border-top: solid 1px #ccc;
    padding: 10px 0;
}

.table-field-attributes {
}

.table-field-attributes__attribute {
    color: #aaa;
    font-size: 9px;
    float: left;
    margin-right: 10px;
    padding: 4px 0;
    cursor: default;
    font-style: italic;
}

.table__modal__ribbon__item .fa-trash {
    color: #cc0000;
}

.hidden-900,
.hidden-400 {
    display: initial;
}

@media (max-width: 900px) {
    .hidden-900 {
        display: none;
    }
}

@media (max-width: 400px) {
    .hidden-400 {
        display: none;
    }
}

.mobile-notifications-bar {
    display: none;
    color: #222;
    display: none;
    padding: 4px;
    width: 100%;
    background: rgba(255,255,255,0.7);
    border-top: solid 1px #ddd;
    position: fixed;
    bottom: 50px;
}

@media(max-width:1023px) {
    .mobile-notifications-bar {
        display: block;
    }
}

.mobile-page-actions {
    animation-name: slide-down-y;
    animation-duration: 0.04s;
    animation-timing-function: linear;
    animation-fill-mode: forwards;
}

.mobile-page-nav {
    padding: 7px;
    overflow: auto;
    clear: both;
    width: calc(100% - 40px);
}

@media (max-width: 768px) {
    .mobile-page-nav {
        width: 100%;
    }
}

.sendDocument__actions__action {
    margin-left: 10px;
}


    .sendDocument__actions__action:last-of-type {
        margin-left: 0;
    }

.sendDocument__tags,
.sendDocument__toggles,
.sendDocument__customer-details,
.sendDocument__types,
.sendDocument__actions {
    padding: 10px 0;
    overflow: auto;
}

.sendDocument__customer-details {
    padding: 15px 0;
}

.notification-circle {
    display: block;
    height: 18px;
    width: 20px;
    padding: 1px;
    background: dodgerblue;
    color: #fff;
    border-radius: 50px;
    animation-name: scaleUp;
    animation-duration: 0.1s;
    animation-timing-function: linear;
    animation-fill-mode: forwards;
    transform: scale(0.9) translateX(6px);
    box-shadow: 0px 10px 15px -3px rgba(0,0,0,0.1);
}

@keyframes scaleUp {
    1% {
        transform: scale(0.1) translateX(6px);
    }

    100% {
        transform: scale(0.9) translateX(6px);
    }
}

.document-conversation {
    display: block;
    box-shadow: -28px 0px 14px -18px rgb(0 0 0 / 6%);
    z-index: 100;
    background: #fff;
    position: fixed;
    right: 0;
    top: 90px;
    width: 350px;
    height: 100%;
    height: calc(100vh - 120px);
    box-sizing: border-box;
    animation-name: slide-left;
    animation-duration: 0.04s;
    animation-timing-function: linear;
    animation-fill-mode: forwards;
    border-left: solid 1px #ddd;
}

.document-conversation__conversation {
    overflow: auto;
    color: #555;
    width: 80%;
    margin: 3%;
    padding-bottom: 15px;
}

.document-conversation__conversation__bubble {
    /*color: #555;*/
    /*background: #dedede;*/
    background: #fff;
    border-color: #dedede;
    border-radius: 10px;
    padding: 10px;
    border:solid 1px;
}

    .document-conversation__conversation__bubble label {
        color: #fff;
    }

.document-conversation__reply-box .ql-container.ql-snow {
    border: 0;
}

.document-conversation__reply-box ng-quill-editor {
    height: 100px;
    font-size: 10px;
    padding: 0;
    font-weight: normal;
    overflow: auto;
}

.document-conversation__reply-box .ql-editor.ql-blank::before {
    right: unset;
    left: unset;
    font-size: 10px;
    color: #aaa;
    font-weight: normal;
}

.document-conversation__reply-box__inner {
   /* display: flex;
    flex-direction: row;
    align-items: center;
    justify-content: center;*/
    width: 100%;
}

.document-conversation__reply-box {
    padding: 10px;
    position: absolute;
    width: 100%;
    bottom: 0;
}

    .document-conversation__reply-box ng-quill-editor {
        width: 85%;
    }

    .document-conversation__reply-box .btn-circle:hover {
        background-color: rgba(0,0,0,0.07);
    }

.document-conversation-messages__inner {
    max-height: 100%;
    overflow: auto;
    float: left;
    width: 100%;
}

.document-conversation-messages {
    background: #f9f9f9;
    border-top: solid 1px #ddd;
    border-bottom: solid 1px #ddd;
    float: left;
    width: 100%;
    height: calc(100% - 190px);
    padding-bottom: 10px;
}

.sendDocument__message ng-quill-editor {
}

.sendDocument__message .ql-editor {
    max-height: 250px;
    border:none;
}

@media(max-width: 1024px) {
    .document-conversation {
        height: calc(100vh - 120px);
    }
}

@media(max-width: 768px) {
    .document-conversation {
        top: 50px;
        height: calc(100vh - 100px);
    }
}

.document-conversation {
    z-index: 998;
}

#document-builder-header {
    z-index: 999;
}

@media(max-width: 1024px) {
    #document-builder-header {
        bottom: unset;
        top: 0;
    }

        #document-builder-header .builder-version {
            display: none;
        }
}

.formFieldOptionsDialog {
    width: 100%;
    float: left;
    padding: 20px;
    border: solid 1px #efefef;
    border-radius: 4px;
    margin: 10px 0;
}

.formFieldOptionsDialog__option {
    padding: 10px;
    width: 100%;
    border-bottom: solid 1px #efefef;
}