html,
body {
    font-family: Arial, sans-serif;
    margin: 0;
    padding: 0;
    font-size: 16px;
    height: 100%;
    background-color: white;
}

@font-face {
    font-family: 'pageTitles';
    src: url('fonts/sumedTitle.woff2') format('woff2'),
        url('fonts/sumedTitle.woff') format('woff');
    font-weight: normal;
    font-style: normal;
}

body {
    position: relative;
}

div,
table,
tbody,
tr,
td,
span,
form {
    background-color: transparent;
}

#header {
    position: fixed;
    width: 100%;
    height: 90px;
    background-color: rgba(40, 41, 44, 1);
    z-index: 5;
    box-sizing: content-box;
    line-height: normal;
}

body.noBodyMargin #header {
    background-color: rgba(40, 41, 44, 0.5);
}

/**
-------------------
Logo And Title
-------------------
*/

#header>#logo {
    display: flex;
    margin-left: 10px;
    background: url(images/logo-jubilee.gif) no-repeat left 0 center;
    background-size: auto 72px;
    width: 360px;
    max-width: 60%;
    height: 90px;
    color: #ffce75;
    align-items: flex-end;
}

#header.hasTitle>#logo {
    background-size: auto 52px;
    background-position: left 0 top 10px;
}

#header>#logo span {
    white-space: nowrap;
    padding-bottom: 7px;
}

@media (max-width: 600px) {
    #header>#logo {
        background-size: 100% auto;
    }
}

@media (max-width: 420px) {
    #header.hasTitle>#logo {
        background-size: 100% auto;
        font-size: 0.8em;
    }
}

/**
-------------------
Menu Button
-------------------
*/

#header>a#menuButton {
    display: inline-block;
    box-sizing: border-box;
    vertical-align: middle;
    position: absolute;
    background: url(images/menu.png) no-repeat 100% 0;
    height: 20px;
    padding-right: 30px;
    right: 20px;
    top: 35px;
    font-weight: bold;
    color: white;
}

#header .dts {
    display: inline-block;
    height: 15px;
    background: url(images/dts.png) no-repeat 0 50%;
    background-size: 15px auto;
    position: absolute;
    right: 15px;
    bottom: 5px;
    color: #ccc;
    font-size: 10px;
    padding-left: 20px;
    padding-top: 3px;
}

@media (max-width: 365px) {
    #header>a#menuButton {
        color: transparent;
    }

    #header .dts span {
        display: none;
    }
}

#topBody {
    display: inline-block;
    position: relative;
    width: 100%;
    top: 90px;
}

body.noBodyMargin #topBody {
    top: 0;
}

.coverPhoto {
    width: 100%;
    height: 300px;
    background-repeat: no-repeat;
    background-position: 50% 50%;
    background-size: 100% auto;
}

.coverPhoto>.title {
    position: absolute;
    bottom: 10px;
    background: rgba(0, 0, 0, 0.5);
    padding: 10px;
    width: 100%;
    color: #FFFFFF;
    font-size: 2em;
    font-weight: bolder;
    text-align: center;
    box-sizing: border-box;
    white-space: pre-line;
}

body,
#body {
    background: #f39200;
    color: #585858;
}

#body {
    position: relative;
    z-index: 3;
    top: 90px;
    text-align: center;
    width: 100%;
    max-width: 100%;
}

body.noBodyMargin #body {
    top: 0;
}

.intro {
    text-align: center;
    background: none;
}

.intro div {
    display: inline-block;
    max-width: 90%;
    text-align: left;
    margin: 20px 0;
}

.rollImage {
    position: fixed;
    top: 0;
}

a:link,
a:visited {
    text-decoration: none;
    color: inherit;
    font-weight: bold;
}

a:hover {}

.tab1 {
    padding-left: 15px;
}

.tab2 {
    padding-left: 30px;
}

.tab3 {
    padding-left: 45px;
}

.bold {
    font-weight: bold;
}

.italic {
    font-style: italic;
}

.red {
    color: red;
}

h1 {
    display: block;
}

h1.orange,
h2.orange {
    color: #f39200;
    text-shadow: 0px 0px 1px #9c9c9c;
}

h2 {
    display: block;
    font-size: 1.3em;
}

h3 {
    display: block;
    font-size: 1em;
}

h4 {
    display: block;
}

.par1,
.par2,
.par3,
.par4,
.par5 {
    margin: 0;
    display: inline-block;
    width: 90%;
    padding: 10px;
    text-align: left;
    -webkit-box-shadow: 0px 4px 35px 0px rgba(0, 0, 0, 0.42);
    -moz-box-shadow: 0px 4px 35px 0px rgba(0, 0, 0, 0.42);
    box-shadow: 0px 4px 35px 0px rgba(0, 0, 0, 0.42);
    border-radius: 5px 5px 5px 5px;
    -moz-border-radius: 5px 5px 5px 5px;
    -webkit-border-radius: 5px 5px 5px 5px;
    border: 0px solid #000000;
    box-sizing: border-box;
}

.par1 {
    background-color: #F9F9F9;
    width: 100%;
    border-radius: 0;
    -moz-border-radius: 0;
    -webkit-border-radius: 0;
}

.par2 {
    background: #000000;
    color: rgb(245, 245, 245);
}

.par3 {
    padding: 20px;
    background-color: rgb(40, 41, 44);
    color: rgb(191, 191, 191);
    width: 100%;
    border-radius: 0;
    -moz-border-radius: 0;
    -webkit-border-radius: 0;
}

.par4,
.par5 {
    background: rgb(245, 245, 245);
    margin: 10px 0;
}

.par5 {
    width: auto;
    max-width: 90%;
}

.par90 {
    display: inline-block;
    width: 90%;
    text-align: left;
}

.noshadow {
    -webkit-box-shadow: none;
    -moz-box-shadow: none;
    box-shadow: none;
}

.bggrey {
    background-color: #e8e8e8;
    color: #353535;
}

.bgpattern {
    background: url(images/bg-pattern.png) repeat-x #e8e8e8;
}

/* Paragraphs with image */
.parCont::after {
    content: '';
    clear: both;
    display: block;
}

.parCont .parText {
    float: left;
    max-width: 45%;
    text-align: left;
}

.parCont .parImage {
    margin: 0 0 30px 30px;
    width: 90%;
    max-width: 500px;
    float: right;
    background-repeat: no-repeat;
    background-position: 50% 0;
    background-size: 100% 100%;
}

.parCont .parImage img {
    width: 100%;
    visibility: hidden;
}

@media (max-width: 1000px) {

    .parCont {
        text-align: center;
    }

    .parCont .parImage {
        margin: 0 0 30px 0;
        float: none;
        display: inline-block;
    }

    .parCont .parText {
        float: none;
        min-width: auto;
        max-width: none;
    }

}

/* Input styling */
input[type='text']:not(.q-field__native),
input[type='password']:not(.q-field__native),
.textInput:not(.q-field__native) {
    border: 1px solid rgb(209, 209, 209);
    padding: 5px;
    box-sizing: border-box;
}

input[type='submit']:not(#app *, .q-dialog *, #sumed-ai-widget-root *, #ai-conversations-root *, #oil-market-root *, #surveys-app-root *, #procurement-root *, #social-status-root *, [id^='q-portal--'] *, .q-notifications *),
input[type='button']:not(#app *, .q-dialog *, #sumed-ai-widget-root *, #ai-conversations-root *, #oil-market-root *, #surveys-app-root *, #procurement-root *, #social-status-root *, [id^='q-portal--'] *, .q-notifications *),
button:not(#chatbase-bubble-button, .xdsoft_datetimepicker button, .tox button, #app *, .q-dialog *, #sumed-ai-widget-root *, #ai-conversations-root *, #oil-market-root *, #surveys-app-root *, #procurement-root *, #social-status-root *, [id^='q-portal--'] *, .q-notifications *),
a.button:not(#app *, .q-dialog *, #sumed-ai-widget-root *, #ai-conversations-root *, #oil-market-root *, #surveys-app-root *, #procurement-root *, #social-status-root *, [id^='q-portal--'] *, .q-notifications *):link,
a.button:not(#app *, .q-dialog *, #sumed-ai-widget-root *, #ai-conversations-root *, #oil-market-root *, #surveys-app-root *, #procurement-root *, #social-status-root *, [id^='q-portal--'] *, .q-notifications *):visited {
    display: inline-block;
    background: rgb(255, 255, 255);
    background: linear-gradient(180deg, rgba(255, 255, 255, 1) 0%, rgba(240, 240, 240, 1) 100%);
    color: rgb(0, 0, 0);
    border: 1px solid rgb(209, 209, 209);
    border-collapse: collapse;
    padding: 3px 15px;
    text-decoration: none;
    font-size: 15px;
    font-weight: normal;
    cursor: pointer;
}

input[type='submit']:hover,
input[type='button']:hover,
button:hover:not(#chatbase-bubble-button, .xdsoft_datetimepicker button, #app button, .q-dialog button, #sumed-ai-widget-root button, #ai-conversations-root button, #oil-market-root button, #surveys-app-root button, #procurement-root button, #social-status-root button, [id^='q-portal--'] button, .q-notifications button),
a.button:hover {
    background: white;
    background: linear-gradient(180deg, rgba(255, 255, 255, 1) 0%, rgb(244, 244, 244) 100%);
    border-color: rgb(203, 203, 203);
}

input[disabled]:not(.q-field__native),
input[disabled]:hover:not(.q-field__native),
a.button[disabled]:hover {
    background: rgb(221, 221, 221);
    background: linear-gradient(180deg, rgb(221, 221, 221) 0%, rgba(240, 240, 240, 1) 100%);
}

input[type='text'].readonly,
input[type='number'].readonly {
    border: 1px dashed rgb(209, 209, 209);
    background: #ffffff;
    color: #0d0099;
}

input[type='text'].error {
    border: 1px dashed rgb(255, 0, 0);
    background: #ffffff;
    color: #ff0000;
}

/* Short text inputs */
input[type="text"].short,
input[type="number"].short {
    width: 100px;
}

/* Long text inputs */
input[type="text"].long {
    width: 100%;
}

input[type="text"].large {
    font-size: 1.5em;
}

.inputContainer {
    margin: 5px 0;
    position: relative;
    padding: 10px 2px 2px 2px;
    border: 1px solid #666666;
    border-radius: 5px;
    -moz-border-radius: 5px;
    -webkit-border-radius: 5px;
}

.inputContainer>span:first-child {
    background-color: rgb(245, 245, 245);
    font-size: 0.7em;
    padding: 0 2px;
    position: absolute;
    top: -7px;
    left: 8px;
}

.inputContainer div {
    padding-left: 8px;
}

.inputContainer input[type="text"] {
    padding-left: 10px;
    border: none;
}

.inputContainer input[disabled] {
    background: none;
}

/* Message BAr */
#mainMessageBar {
    padding: 0 20px;
}

/* Misc */
.center {
    text-align: center;
}

.comment {
    font-size: 0.8em;
}

/* Action buttons */
.actionBtnWrap {
    display: inline-block;
    white-space: nowrap;
}

a.actionBtn {
    display: inline-block;
    background: rgb(255, 255, 255);
    background-position: 50% 2px;
    background-repeat: no-repeat;
    color: rgb(0, 0, 0);
    border: 1px solid rgb(209, 209, 209);
    border-collapse: collapse;
    text-align: center;
    text-decoration: none;
    font-size: 0.8em;
    font-weight: normal;
    padding: 27px 5px 0px 5px;
}

a.actionBtn.horizontal {
    display: inline-table;
    background-image: linear-gradient(180deg, rgba(255, 255, 255, 1) 0%, rgba(240, 240, 240, 1) 100%);
}

a.actionBtn.horizontal div {
    display: table-cell;
    vertical-align: middle;
}

a.actionBtn.horizontal div:not(:first-child) {
    padding: 5px;
}

a.actionBtn.horizontal div:first-child {
    width: 20px;
    background-size: 15px 15px;
    background-repeat: no-repeat;
    background-position: 50% 50%;
}

a.actionBtn:hover {
    text-decoration: underline;
}

a.actionBtn.horizontal.approve div:first-child {
    background-image: url(images/success.png);
}

a.actionBtn.remove {
    min-width: 22px;
    background-image: url(images/remove.png), linear-gradient(180deg, rgba(255, 255, 255, 1) 0%, rgba(240, 240, 240, 1) 100%);
}

a.actionBtn.reject {
    min-width: 22px;
    background-image: url(images/reject.png), linear-gradient(180deg, rgba(255, 255, 255, 1) 0%, rgba(240, 240, 240, 1) 100%);
}

a.actionBtn.reject.disabled {
    opacity: 0.5;
    color: gray;
}

a.actionBtn.edit {
    min-width: 25px;
    background-image: url(images/edit.png), linear-gradient(180deg, rgba(255, 255, 255, 1) 0%, rgba(240, 240, 240, 1) 100%);
}

a.actionBtn.privileges {
    min-width: 25px;
    background-image: url(images/access.png), linear-gradient(180deg, rgba(255, 255, 255, 1) 0%, rgba(240, 240, 240, 1) 100%);
}

a.actionBtn.move {
    min-width: 25px;
    background-image: url(images/move.png), linear-gradient(180deg, rgba(255, 255, 255, 1) 0%, rgba(240, 240, 240, 1) 100%);
}

a.actionBtn.family {
    min-width: 25px;
    background-image: url(images/family.png), linear-gradient(180deg, rgba(255, 255, 255, 1) 0%, rgba(240, 240, 240, 1) 100%);
    background-size: 25px auto;
}

a.actionBtn.attendance:not(.edit) {
    min-width: 25px;
    background-image: url(images/menus/attendance.png), linear-gradient(180deg, rgba(255, 255, 255, 1) 0%, rgba(240, 240, 240, 1) 100%);
    background-size: 25px auto;
}

a.actionBtn.open:not(.horizontal) {
    min-width: 25px;
    background-image: url(images/open.png), linear-gradient(180deg, rgba(255, 255, 255, 1) 0%, rgba(240, 240, 240, 1) 100%);
}

a.actionBtn.horizontal.open div:first-child {
    background-image: url(images/open.png);
}

a.actionBtn.horizontal.zip div:first-child {
    background-image: url(images/fileExt/zip.png);
}

a.actionBtn.horizontal.excel div:first-child {
    background-image: url(images/fileExt/xlsx.png);
}

a.actionBtn.hide {
    min-width: 25px;
    background-image: url(images/hide.png), linear-gradient(180deg, rgba(255, 255, 255, 1) 0%, rgba(240, 240, 240, 1) 100%);
}

a.actionBtn.eye {
    min-width: 25px;
    background-image: url(images/eye.png), linear-gradient(180deg, rgba(255, 255, 255, 1) 0%, rgba(240, 240, 240, 1) 100%);
    background-size: 35px auto, auto;
}

a.actionBtn.start {
    min-width: 25px;
    background-image: url(images/start.png), linear-gradient(180deg, rgba(255, 255, 255, 1) 0%, rgba(240, 240, 240, 1) 100%);
}

a.actionBtn.list {
    min-width: 25px;
    background-image: url(images/list.png), linear-gradient(180deg, rgba(255, 255, 255, 1) 0%, rgba(240, 240, 240, 1) 100%);
}

a.actionBtn.copyLink {
    min-width: 25px;
    background-image: url(images/copy-link.png), linear-gradient(180deg, rgba(255, 255, 255, 1) 0%, rgba(240, 240, 240, 1) 100%);
}

a.actionBtn.add:not(.horizontal) {
    min-width: 25px;
    background-image: url(images/add.png), linear-gradient(180deg, rgba(255, 255, 255, 1) 0%, rgba(240, 240, 240, 1) 100%);
}

a.actionBtn.horizontal.add div:first-child {
    background-image: url(images/add.png);
}

a.actionBtn.print {
    min-width: 25px;
    background-image: url(images/print.png), linear-gradient(180deg, rgba(255, 255, 255, 1) 0%, rgba(240, 240, 240, 1) 100%);
}

a.actionBtn.variants {
    min-width: 25px;
    background-image: url(images/variants.png), linear-gradient(180deg, rgba(255, 255, 255, 1) 0%, rgba(240, 240, 240, 1) 100%);
}

a.actionBtn.assign {
    min-width: 25px;
    background-image: url(images/assign.png), linear-gradient(180deg, rgba(255, 255, 255, 1) 0%, rgba(240, 240, 240, 1) 100%);
}

a.actionBtn.arrowUp {
    min-width: 25px;
    background-image: url(images/arrow-up-down.png), linear-gradient(180deg, rgba(255, 255, 255, 1) 0%, rgba(240, 240, 240, 1) 100%);
}

a.actionBtn.arrowDown {
    min-width: 25px;
    background-image: url(images/arrow-up-down.png), linear-gradient(180deg, rgba(255, 255, 255, 1) 0%, rgba(240, 240, 240, 1) 100%);
    -moz-transform: scale(-1, -1);
    -o-transform: scale(-1, -1);
    -webkit-transform: scale(-1, -1);
    transform: scale(-1, -1);
}

a.actionBtn.email {
    min-width: 25px;
    background-size: 25px 25px;
    background-image: url(images/email.png), linear-gradient(180deg, rgba(255, 255, 255, 1) 0%, rgba(240, 240, 240, 1) 100%);
}

a.actionBtn.icon {
    padding: 0;
    min-width: auto !important;
    width: 15px;
    height: 15px;
    background-position: 50% 50%;
    background-size: 100% 100%;
}

.bg.teleconference {
    background-image: url(images/teleconference.png), linear-gradient(180deg, rgba(255, 255, 255, 1) 0%, rgba(240, 240, 240, 1) 100%);
}

a.actionBtn.noText {
    min-width: auto !important;
    background-position: 50% 50%;
    background-size: 80% 80%;
    padding: 10px;
}

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

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

.rtl input[type='text'] {
    direction: rtl;
    text-align: right;
}

#navigation {
    position: relative;
    top: 90px;
    box-sizing: border-box;
    display: inline-block;
    width: 100%;
    padding: 10px;
    z-index: 4;
    border-bottom: 3px solid rgba(40, 41, 44, 1);
    background: rgb(98, 100, 107);
    -webkit-box-shadow: inset 1px 1px 2px 0px rgba(0, 0, 0, 0.75);
    -moz-box-shadow: inset 1px 1px 2px 0px rgba(0, 0, 0, 0.75);
    box-shadow: inset 1px 1px 2px 0px rgba(0, 0, 0, 0.75);
    color: #FFFFFF;
    font-weight: bold;
}

#navigation span a {
    text-decoration: underline;
}

#navigation span:not(:first-child)::before {
    content: "/";
    padding: 0 7px;
}


/* Top page header title */
.pageHeaderTitle {
    font-family: 'pageTitles', Arial, sans-serif;
    font-size: 2em;
    color: #ffffff;
    background-image: linear-gradient(to bottom, #5a5a5c, #575759, #545457, #525254, #4f4f52, #4f4f52, #4f4f52, #4f4f52, #525254, #545457, #575759, #5a5a5c);
    border-top: 2px solid rgba(40, 41, 44, 1);
    border-bottom: 2px solid rgba(40, 41, 44, 1);
}

.pageHeaderTitle.hasCover {
    background-repeat: no-repeat;
    background-size: 100% auto;
    background-position: 50% 0;
    font-size: 3em;
    text-shadow: 0px 0px 5px #000000;
    border-top: none;
    border-bottom: none;
    height: 100px;
    padding-top: 150px;
}

.pageHeaderTitle.hasCover.large {
    font-size: 3.5em;
    height: 200px;
    padding-top: 200px;
}

.pageHeaderTitle.hasCover.xlarge {
    font-size: 3.5em;
    height: 350px;
    padding-top: 250px;
}

/* For any viewports less than 1400px wide */
@media (max-width: 1400px) {

    .pageHeaderTitle.hasCover {
        background-size: 1400px auto;
        /* Force the image to its minimum width */
    }

}

.sumedLine img {
    width: 90%;
    max-width: 850px;
    height: auto;
}

.sumedLine {
    display: inline-block;
    background: url(images/horizontal-line.png) no-repeat 50% 50%;
    background-size: 100% 100%;
}

hr {
    border: 0;
    height: 1px !important;
    background-image: linear-gradient(to right, rgba(0, 0, 0, 0), rgba(0, 0, 0, 0.75), rgba(0, 0, 0, 0));
}

.list>div {
    position: relative;
    border: 1px solid #666666;
    margin: 10px 0;
    padding: 10px 20px;
    -webkit-box-shadow: 1px 1px 3px 0px rgba(0, 0, 0, 0.75);
    -moz-box-shadow: 1px 1px 3px 0px rgba(0, 0, 0, 0.75);
    box-shadow: 1px 1px 3px 0px rgba(0, 0, 0, 0.75);
    border-radius: 0 10px 10px 0;
    -moz-border-radius: 0 10px 10px 0;
    -webkit-border-radius: 0 10px 10px 0;
}

.list>div:before {
    content: "";
    position: absolute;
    top: 0;
    left: 0;
    height: 100%;
    width: 10px;
    background: #f39200;
}

a.social_icon:link {
    display: inline-block;
    background: url(images/social.png) no-repeat;
    width: 25px;
    height: 25px;
    opacity: 0.6;
}

a.social_icon:hover {
    opacity: 1;
}

a.social_icon.instagram {
    background-position: 0 0;
}

a.social_icon.twitter {
    background-position: -25px 0;
}

a.social_icon.youtube {
    background-position: -50px 0;
}

a.social_icon.linkedin {
    background-position: -75px 0;
}

a.social_icon.facebook {
    background-position: -100px 0;
}

a.inline {
    text-decoration: underline;
}

table td.fit {
    width: 0.1%;
    white-space: nowrap;
}

table.listTable {
    width: 100%;
    border-collapse: collapse;
    border: thin solid #a8a8a8;
    -webkit-box-shadow: 1px 1px 3px 0px rgba(0, 0, 0, 0.75);
    -moz-box-shadow: 1px 1px 3px 0px rgba(0, 0, 0, 0.75);
    box-shadow: 1px 1px 3px 0px rgba(0, 0, 0, 0.75);
    border-radius: 10px;
    -moz-border-radius: 10px;
    -webkit-border-radius: 10px;
    overflow: hidden;
}

table.listTable tr {
    background: #FFFFFF;
}

table.listTable td {
    padding: 5px;
}

table.listTable tr.alt {
    background: #f1f1f1;
}

.requiredField {
    color: #ff0000;
    font-weight: bold;
    text-decoration: underline;
}

/* Labels */
.label {
    margin: 0 5px;
    border: 2px solid #000;
    background-color: #fafafa;
    padding: 2px 5px;
    border-radius: 10px;
    -moz-border-radius: 10px;
    -webkit-border-radius: 10px;
    font-weight: bold;
    font-size: 0.8em;
    white-space: nowrap;
}

.alarm {
    border: 2px solid #d10000;
    color: #d10000;
}

.label.green {
    border: 2px solid #72d181;
    color: #72d181;
}

.label.green.withBg {
    background: #72d181;
    color: #FFFFFF;
}

.label.yellow {
    border: 2px solid #d7b417;
    color: #d7b417;
}

.label.yellow.withBg {
    background: #d7b417;
    color: #FFFFFF;
}

.label.blue {
    border: 2px solid #72a2d1;
    color: #72a2d1;
}

.label.blue.withBg {
    background: #72a2d1;
    color: #FFFFFF;
}

.label.black {
    border: 2px solid #000;
    color: #000;
}

.label.black.withBg {
    background: #000;
    color: #FFFFFF;
}

.label.grey {
    border: 2px solid #999;
    color: #999;
}

.label.grey.withBg {
    background: #999;
    color: #FFFFFF;
}

.infoBox {
    margin-top: 20px;
    padding: 15px 5px 5px 10px;
    position: relative;
    border: 1px solid #666666;
    border-radius: 5px;
    -moz-border-radius: 5px;
    -webkit-border-radius: 5px;
}

.infoBox>span:first-child {
    position: absolute;
    top: -0.6em;
    background-color: #FFFFFF;
    padding: 0 5px;
    font-weight: bold;
}

/* Display and visibility */
.noDisplay {
    display: none;
}

/* No breaking */
.noBreak {
    white-space: nowrap;
}

/* Margin */
.margin {
    margin: 5px;
}

.marginv {
    margin: 5px 0;
}

.marginh {
    margin: 0 5px;
}

/* Inline Block */
.inline {
    display: inline-block;
}

/* Hidden */
.hidden {
    visibility: hidden;
}

/* More information */
i.information {
    display: inline-block;
    background: url('images/question-mark.png') no-repeat;
    height: 10px;
    width: 10px;
}

i.information2 {
    display: inline-block;
    background: url('images/information.png') no-repeat;
    height: 15px;
    width: 15px;
}

/* Stripes */
.stripes {
    background: url("images/stripes.jpg") repeat;
}

#developedBy {
    display: inline-block;
    font-size: 0.7em;
    color: #e4e4e4;
    background: #28292c;
    padding: 2px 5px;
    border-radius: 5px;
    -moz-border-radius: 5px;
    -webkit-border-radius: 5px;
    margin-bottom: 10px;
}

.topGradient {
    width: 100%;
    height: 3px;
    background: linear-gradient(270deg, #447dd4, #9494fb, #b79fdc, #84dcf9);
    background-size: 800% 800%;

    -webkit-animation: topGradient 5s ease infinite;
    -moz-animation: topGradient 5s ease infinite;
    -o-animation: topGradient 5s ease infinite;
    animation: topGradient 5s ease infinite;
}

@-webkit-keyframes topGradient {
    0% {
        background-position: 0 50%
    }

    50% {
        background-position: 100% 50%
    }

    100% {
        background-position: 0 50%
    }
}

@-moz-keyframes topGradient {
    0% {
        background-position: 0 50%
    }

    50% {
        background-position: 100% 50%
    }

    100% {
        background-position: 0 50%
    }
}

@-o-keyframes topGradient {
    0% {
        background-position: 0 50%
    }

    50% {
        background-position: 100% 50%
    }

    100% {
        background-position: 0 50%
    }
}

@keyframes topGradient {
    0% {
        background-position: 0 50%
    }

    50% {
        background-position: 100% 50%
    }

    100% {
        background-position: 0 50%
    }
}

.maintenanceMessage {
    margin: 10px;
    text-align: center;
    font-weight: bolder;
    padding: 5px;
    background:
        /* On "top" */
        repeating-linear-gradient(45deg,
            transparent,
            transparent 10px,
            #000000 10px,
            #000000 20px),
        /* on "bottom" */
        linear-gradient(to bottom,
            #ffe900,
            #ffe900);
    border: 1px solid #6a6969;
    box-shadow: 0px 0px 5px 5px rgba(0, 0, 0, 0.19);
    -webkit-box-shadow: 0px 0px 5px 5px rgba(0, 0, 0, 0.19);
    -moz-box-shadow: 0px 0px 5px 5px rgba(0, 0, 0, 0.19);
    border-radius: 5px;
}

.maintenanceMessage .container {
    background: rgb(245, 245, 245);
    border: 1px solid #6a6969;
    border-radius: 5px;
}


.maintenanceMessage .container>div {
    display: inline-flex;
    align-items: center;
}

.maintenanceMessage .container>div>div {
    padding: 10px 5px;
}

.zoomIcon {
    cursor: zoom-in;
}

/* TinyMCE floating layer (toolbar dropdowns, colour pickers, "..." overflow,
   menus and dialogs). Every editor in the app lives inside a WindowBox modal,
   and windows.js highest_index() gives a new window the highest z-index it can
   find BELOW 9999. The skin pins this sink at 1300 (same in 5.2.0 and 8.3.1),
   so the sink itself pushed the next window to 1301 and every popup opened
   behind the modal. Parking it above the 9999 cut-off does both jobs at once:
   popups float over every window, and the sink stops inflating the next one.
   Keep this value >= 9999 or the bug comes straight back. !important is needed
   to beat the skin's own .tox-fullscreen .tox.tox-tinymce-aux{z-index:1201}.
   Do NOT add .tox-fullscreen here - the fullscreen editor container sits INSIDE
   #windowN and would cover the modal's title bar and close button. */
.tox-tinymce-aux {
    z-index: 100000 !important;
}