@import url("animation_72a7fa8d.css");

/**********************************************************************/
/******************** Standard HTML definitions ***********************/
/**********************************************************************/
* {
    box-sizing: border-box;
    font-family: var(--generalBackupFontFamily);
    font-family: var(--generalFontFamily);
}

*:not(b) {
    cursor: default;
    font-weight: lighter;
    font-size: var(--generalFontSize);
}

*:not(input) {
    -webkit-touch-callout: none;
    -webkit-user-select: none;
    -khtml-user-select: none;
    -moz-user-select: none;
    -ms-user-select: none;
    user-select: none;
}

::-webkit-input-placeholder {
    /* Safari, Chrome and Opera */
    color: var(--placeHolderColorWebkit);
}

:-moz-placeholder {
    /* Firefox 18- */
    color: var(--placeHolderColorFirefox);
}

::-moz-placeholder {
    /* Firefox 19+ */
    color: var(--placeHolderColorFirefox);
}

:-ms-input-placeholder {
    /* IE 10+ */
    color: var(--placeHolderColorMS);
}

::-ms-input-placeholder {
    /* Edge */
    color: var(--placeHolderColorMS);
}

:placeholder-shown {
    /* Standard one last! */
    color: var(--placeHolderColorWebkit);
}

html {
    height: 100%;
    min-height: 100%;
}

body {
    background: var(--bodyBackgroundColor);
    width: 100%;
    height: 100%;
}

body,
div {
    margin: 0px;
    border: 0px;
    padding: 0px;
    white-space: initial;
}

div {
    border: 0px solid #191919;
    vertical-align: top;
    color: var(--generalFontColor);
    display: inline-block;
}

img {
    filter: none;
}

footer {
    width: 100%;
    position: fixed;
    left: 0px;
    bottom: 0px;
    display: flex;
    justify-content: space-between;
    align-items: center;
    text-align: center;
    color: gray;
    background-color: var(--footerBackgroundColor);
    height: var(--footerHeight);
    padding: 2px 10px;
    -webkit-touch-callout: initial;
    -webkit-user-select: initial;
    -khtml-user-select: initial;
    -moz-user-select: initial;
    -ms-user-select: initial;
    user-select: initial;
}

footer * {
    color: var(--footerColor) !important;
}

footer a {
    font-size: 0.9em !important;
}

footer div {
    font-size: 0.85em !important;
    margin-bottom: 1px;
}

footer .social {
    border: 0 !important;
    background-color: rgba(0, 0, 0, 0) !important;
    height: 22px;
    width: 22px;
    background-size: 20px;
    background-repeat: no-repeat;
    background-position: 50% 50%;
    margin-right: 6px;
}

.social.facebook {
    background-image: url('/images/social/f_logo_RGB-Blue_58.png');
}

.social.youtube {
    background-image: url('/images/social/youtube_social_circle_red.png');
}

.social.instagram {
    background-image: url('/images/social/ig64.png');
}

.social.twitter {
    background-image: url('/images/social/Twitter social icons - circle - blue.png');
}

@media screen and (max-width: 1000px) {
    footer a {
        font-size: 0.75em !important;
    }

    footer div {
        font-size: 0.65em !important;
    }

    :root {
        --footerHeight: 20px;
    }
}

.footerInfo {
    color: red;
    font-size: 2em !important;
}

h1 {
    color: var(--headlineColor);
    font-size: 20px;
    margin-bottom: 5px;
}

h2 {
    padding-left: 20px;
    margin-bottom: 5px;
}

h3 {
    color: var(--headlineColor);
    width: 100%;
    padding-top: 5px;
    padding-bottom: 5px;
    background-color: #0000c3;
    text-align: center;
}

a {
    color: var(--generalLinkColor);
    cursor: pointer;
    -webkit-touch-callout: initial;
    -webkit-user-select: initial;
    -khtml-user-select: initial;
    -moz-user-select: initial;
    -ms-user-select: initial;
    user-select: initial;
}

b {
    font-weight: bold;
}

label {
    color: var(--generalFontColor);
}

input[type=text],
input[type=number],
input[type=tel],
input[type=password],
input[type=email],
input[type=date],
input[type=datetime-local] {
    height: var(--inputHeight);
    width: calc(100% - 2 * 3px);
    background-color: var(--inputBackgroundColor);
    border: var(--inputBorder);
    border-width: var(--inputBorderWidth);
    border-radius: var(--inputBorderRadius);
    color: var(--inputColor);
    padding-left: 3px;
    text-indent: 5px;
    font-size: var(--inputFontSize);
}

input:-webkit-autofill,
input:-webkit-autofill:hover,
input:-webkit-autofill:focus {
    border: var(--inputBorder);
    font-size: var(--inputFontSize);
    -webkit-text-fill-color: var(--inputColor);
    -webkit-box-shadow: 0 0 0 50px hsl( from var(--inputBackgroundColor) h s calc(l + 10)) inset;
    background-color: var(--inputBackgroundColor) !important;
    /*transition: background-color 5000s;*/
}

input[type=text]:focus::placeholder {
    color: transparent;
}

input[type=text]:hover,
input[type=number]:hover,
input[type=password]:hover {
    cursor: text;
    background-color: var(--inputBackgroundColorHover);
}

input[type=text]:disabled,
input[type=number]:disabled,
input[type=tel]:disabled,
input[type=password]:disabled,
input[type=email]:disabled,
input[type=date]:disabled,
input[type=datetime-local]:disabled {
    background-color: #232323;
    border-color: gray;
    color: gray;
    cursor: not-allowed;
}

input[type=button],
input[type=submit] {
    margin-top: 5px;
    color: var(--buttonColor);
    height: 30px;
    padding-left: 5%;
    padding-right: 5%;
    appearance: none;
    -webkit-appearance: none;
    -webkit-border-radius: 0;
    border: var(--buttonBorder);
    border-radius: var(--buttonBorderRadius);
    background: var(--buttonBackground);
    transition: var(--buttonTransition);
}

input[type=button]:hover,
input[type=submit]:hover {
    background-color: var(--buttonHoverBackgroundColor);
    color: var(--buttonHoverColor);
    cursor: pointer;
}

.feedbackBtnSelected {
    background-color: var(--buttonHoverBackgroundColor) !important;
    color: var(--buttonHoverColor) !important;  
}

.modeSelected {
    border: 1px solid #fff;
    padding: 5px;
}

.detailsButtonSelected {
    border: 2px solid #E4008B !important;
    padding: 5px;
}
.commentsButtonSelected {
     border: 2px solid #E4008B !important;
    padding: 5px;   
}

input[type=button]:disabled,
input[type=submit]:disabled {
    background-color: #232323;
    border-color: gray;
    color: gray;
    pointer-events: none;
    cursor: default;
}

input[type=button].outline,
input[type=submit].outline {
    background-color: transparent;
    border: 1px solid #3DB5E6;
    color: #3DB5E6;
}

input[type=button].outline:hover,
input[type=submit].outline:hover {
    background-color: transparent;
    border: 1px solid #40809a;
    color: #40809a;
    cursor: pointer;
}

input:focus {
    outline: none;
}

textarea {
    width: 100%;
    max-width: 100%;
    height: 100%;
    border-radius: 0px;
    padding-left: 7px;
    border: var(--textAreaBorder);
    border-width: var(--textAreaBorderWidth);
    background-color: var(--textAreaBackgroundColor);
    color: var(--textAreaColor);
    -webkit-touch-callout: text;
    -webkit-user-select: text;
    -khtml-user-select: text;
    -moz-user-select: text;
    -ms-user-select: text;
    user-select: text;
}

textarea::placeholder {
    color: var(--textAreaPlaceHolderColor);
}

.textarea {
    color: var(--textAreaColor);
    background-color: var(--textAreaBackgroundColor) !important;
    border: var(--textAreaBorder);
    border-width: var(--textAreaBorderWidth);
    border-radius: var(--textAreaBorderRadius);
}

select {
    border: var(--selectBorder);
    border-width: var(--selectBorderWidth);
    overflow: hidden;
    height: 100%;
    width: 100%;
    padding-left: 10px;
    padding-right: 25px;
    appearance: none;
    -webkit-appearance: none;
    -moz-appearance: none;
    color: var(--selectColor);
    font-size: 14px;
    white-space: pre-line;
    position: absolute;
    border-radius: 0px;
    z-index: 5;
    background-image: var(--selectImage);
    background-repeat: no-repeat;
    background-position-x: 97%;
    background-position-y: 50%;
    background-size: 20px;
    background: var(--selectBackground);
}

select:focus {
    outline: none;
}

select option {
    color: var(--optionColor);
    background: var(--optionBackground);
}

select option:disabled {
    color: gray;
}

input.inputWithClearButton {
    margin: 0;
    padding: 0;
    padding-left: 22px;
}

/**********************************************************************/
/******************** Standard Form classes ***************************/
/**********************************************************************/
.centerFlex {
    display: flex;
    flex-direction: column;
    align-items: center;
}

.centerFlexV {
    display: flex;
    align-items: center;
}

.formContainer {
    width: 100%;
    display: flex;
    flex-direction: column;
    align-items: center;
    padding: 0px 10vw;
    margin-bottom: 3em;
}

.flexRow {
    width: 100%;
    display: flex;
    justify-content: flex-start;
    align-items: center;
    margin-bottom: .5em;
    flex-wrap: wrap;
}

.flexRow>label {
    flex: 1;
    min-width: 15em;
}

.flexRow>input,
.flexRow>button,
.flexRow>textarea {
    margin-top: .5em;
    flex: 2;
    min-width: 20em;
}

.flexRow .inputFeedback {
    flex: 2;
    display: flex;
    align-items: center;
    margin-left: .5em;
    margin-top: .5em;
    min-width: 15em;
}

/*/////////////////////////////////////////////////////////////////////////////////////////////////*/
/*///////////////////////////////////////// Cookie Banner /////////////////////////////////////////*/
/*/////////////////////////////////////////////////////////////////////////////////////////////////*/

#cookieBanner {
    position: fixed;
    height: fit-content;
    bottom: 30px;
    padding: 1em 3em;
    background-color: var(--loginTopBannerBackgroundColor);
    color: var(--generalFontColor);
    z-index: 29;
}

#cookieBanner.fixtureShare {
    width: 70%;
    border-radius: var(--cookieBannerBorderRadius);
}

@media screen and (max-width: 800px) {
    #cookieBanner.fixtureShare {
        width: 99%;
    }
}

#cookieBanner>div {
    max-width: 1400px;
    width: 100%;
    margin: auto;

    display: flex;
    justify-content: space-between;
    align-items: center;
}

@media screen and (max-width: 768px) {
    #cookieBanner>div {
        flex-direction: column;
        align-items: flex-start;
    }
}

#cookieBanner h2 {
    font-size: 16px;
    line-height: 18px;
    color: var(--generalFontColor);
    font-weight: 300;
    padding-left: 0;
}

#cookieBanner p {
    font-size: 12px;
    color: var(--generalFontColor);
    font-weight: 300;
}

#cookieBanner .buttonsHorizontal {
    display: flex;
}

#cookieBanner input {
    margin: 0 .5em;
}

#cookieBanner button,
#cookieBanner input {
    font-weight: 500;
}

#cookiePopup {
    display: flex;
    flex-direction: column;
}

#cookiePopup p {
    margin: .5em 0;
}

#cookiePopup .checkWrapper {
    align-items: baseline;
}

#cookiePopup button {
    margin: .5em 0;
}

.checkWrapper {
    width: calc(100% - 1em);
    font-size: 1.3em;
    padding: 0.25em;
    display: flex;
    justify-content: space-between;
    max-width: 500px;
    border: 1px solid gray;
    border-radius: 5px;
    margin: 0.25em;
}

/**********************************************************************/
/******************** Headline structure ******************************/
/**********************************************************************/
#menuHead {
    height: var(--headlineHeight);
    line-height: var(--headlineHeight);
    vertical-align: middle;
    background-color: var(--headlineBackgroundColor);
    border-bottom: var(--headlineBorder);
    border-radius: var(--headlineBorderRadius);
    display: flex;
    flex-wrap: nowrap;
    justify-content: space-between;
}

@media screen and (max-width: 1000px) {
    #menuHead {
        height: 30px;
        line-height: 30px;
    }
}

@media screen and (max-width: 750px) {
    #menuHead {
        justify-content: flex-end;
    }
}

#headline {
    height: var(--headlineHeight);
    color: var(--generalHeadLineFontColor);
    padding: 0px 10px;
    font-size: var(--headlineFontSize);
    line-height: var(--headlineHeight);
    font-weight: bold;
    overflow: hidden;
    text-align: left;
    width: 100%;
}

.headlineText,
#headlineDynText {
    font-weight: bold;
    font-size: 1em;
}

#headlineDynText {
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    max-width: calc(100% - 200px);
    color: var(--generalHeadLineFontColor);
}

#headlineDynText a,
#headlineDynText i,
.headlineText a {
    font-size: inherit;
    font-weight: inherit;
    color: inherit;
    text-decoration: none;
    color: var(--generalHeadLineFontColor);
}

#headlineDynText a,
#headlineDynText i,
#headlineDynText span {
    font-weight: initial;
    font-size: inherit;
}

#headlineDynText a:hover,
.headlineText a:hover {
    text-decoration: underline;
}

@media screen and (max-width: 750px) {
    #headline {
        display: none;
    }
}

#toolStrip {
    display: flex;
    justify-content: flex-end;
    align-items: center;
}

#toolStrip .spacer {
    padding-right: 1em;
}

#currentUser {
    font-size: var(--currentUserFontSize);
    color: var(--generalHeadLineFontColor);
}

@media screen and (max-width: 1000px) {
    #headline {
        height: 30px;
        font-size: 1.2em;
    }

    #headlineDynText {
        max-width: calc(100% - 120px);
    }
}

#headlineLeftMenu {
    top: 2.5px;
    right: 5px;
    display: flex;
    justify-content: space-evenly;
    align-items: center;
    min-width: 100px;
}

.headlineLeftMenu {
    background-size: 85% !important;
    background-position: 50% 50% !important;
    background-repeat: no-repeat;
    height: var(--headlineIconSize);
    width: var(--headlineIconSize);
    border-radius: 5px;
    margin-top: var(--headlineIconOffset);
    transition: var(--buttonTransition);
}

.headlineLeftMenu:hover {
    cursor: pointer;
    background-color: rgba(255, 255, 255, 0.2);
}

#headlineLeftMenu .headlineLeftMenu {
    margin-top: 0;
}

@media screen and (max-width: 1000px) {
    .headlineLeftMenu {
        height: 25px;
        width: 25px;
    }
}

.shareIconDiv {
    padding: 3px 0px;
}

.shareIcon {
    border: 0 !important;
    background-image: url('/images/gdtf/gdtfLogo.png');
    background-color: rgba(0, 0, 0, 0) !important;
    height: 26px !important;
    width: 26px !important;
    background-size: 26px;
    background-repeat: no-repeat;
    background-position: 50% 50%;
    margin-left: 3px;
}

.shareIcon.gdtfMvr {
    background-image: url('/images/gdtf/gdtfMvrLogo.png');
}

.inlineIcon {
    height: 20px;
    width: 20px;
    vertical-align: text-top;
}

.inlineIcon:hover {
    cursor: pointer;
}

/**********************************************************************/
/******************** Main page structure *****************************/
/**********************************************************************/
.frameBody {
    overflow: auto;
    text-align: left;
}

.frameBody.flex {
    display: flex;
    flex-direction: column;
}

.frameBody.flex.center {
    align-items: center;
}

#content {
    width: 100%;
    display: block;
}

#menuContainer {
    width: 75%;
    height: 100%;
    background-color: transparent;
    border-top: var(--menuContainerBorder);
    overflow: hidden;
    float: left;
    display: flex;
    flex-direction: column;
    justify-content: flex-start;
    align-content: stretch;
    align-items: stretch;
    position: relative;
}

@media screen and (max-width: 750px) {
    #menuContainer {
        width: 100%;
    }
}

#menuContainer.collapsed {
    width: 5%;
}

#menuContainer hr {
    display: none;
}

#mainMenu {
    display: flex;
    overflow: hidden;
    flex: 1;
    height: 100%;
    border: var(--generalBorder);
    border-radius: var(--generalBorderRadius);
    margin-right: var(--mainViewSpacing);
    background-color: var(--menuContainerBackgroundColor);
}

#pageContainer {
    width: 95%;
    height: 100%;
    border: 0px;
    display: none;
    overflow-x: hidden;
    white-space: nowrap;
    float: left;
    border: var(--generalBorder);
    border-radius: var(--generalBorderRadius);
}

#rightSideWedge {
    height: 100%;
    margin-left: 75%;
    /* TODO check if needed*/
    overflow: hidden;
    display: flex;
    flex-direction: column;
    overflow-y: hidden;
}

@media screen and (max-width: 750px) {
    #rightSideWedge {
        display: none;
    }
}

#helpTextContainer {
    color: white;
    padding: 5px;
    line-height: 30px;
    width: 100%;
}

@media screen and (max-width: 1700px) {
    #helpTextContainer {
        font-size: 0.8em;
        line-height: 1.6em;
    }
}

@media screen and (max-width: 1700px) {
    #tipIcon {
        display: none;
    }
}

.nowrap {
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    color: var(--generalLabelColor);
}

.modalFadeout {
    background: none;
    height: 0px;
    width: 0px;
}

.modalFadeout.activated {
    background: rgba(80, 80, 80, 0.5);
    width: 100%;
    height: 100%;
    position: absolute;
    top: 0px;
    left: 0px;
    right: 0px;
    bottom: 0px;
    z-index: 100;
}

.popupFrame {
    width: 100%;
    border: 0;
    margin: 0;
    padding: 0;
    top: var(--headlineHeight);
    bottom: 0px;
    background: var(--bodyBackgroundColor);
    overflow: auto;
    z-index: 10;
    opacity: 0;
    position: absolute;
    transition: height .4s ease-out, opacity .4s ease-out;
}

.popupFrame.transition {
    opacity: 1;
}

.popupFrame.transitionOut {
    height: 0 !important;
}

@media screen and (max-width: 1000px) {
    .popupFrame {
        height: calc(100% - 30px - 26px);
    }
}

@-moz-document url-prefix() {
    .popupFrame {
        height: calc(100% - 30px - 32px);
    }
}

#popupWindow {
    margin: 0;
    padding: 0;
    width: 100%;
    height: 100%;
    top: 0px;
    left: 0px;
    position: relative;
    background: var(--bodyBackgroundColor);
    border: 1px solid #191919;
    text-align: center;
}

#closeIFrame {
    background-image: var(--closeImage);
    filter: var(--closeIframeIconFilter);
    width: 32px;
    height: 32px;
    position: fixed;
    right: 5px;
    top: 5px;
}

#closeIFrame:hover {
    background-image: var(--closeImageHover);
    filter: var(--closeIframeIconFilter);
    cursor: pointer;
}

/**********************************************************************/
/******************** Last uploads elements ***************************/
/**********************************************************************/
#lastRevisionContainer {
    display: flex;
    flex-direction: row;
    flex-wrap: wrap;
    padding: 5px;
    border: var(--generalBorder);
    border-radius: var(--generalBorderRadius);
    line-height: 20px;
    overflow-y: auto;
    overflow-x: hidden;
    background: var(--generalBackgroundColor);
}

.lastRevisionTitle {
    color: var(--lastUploadedFixtureTitleColor);
}

.lastFixtureElement {
    width: calc(50% - 2 * var(--lastUploadedFixtureEntryMargin));
    height: 100px;
    background: var(--lastUploadedFixtureEntryBackground);
    border: var(--lastUploadedFixtureEntryBorder);
    margin: var(--lastUploadedFixtureEntryMargin);
    overflow: hidden;
    display: flex;
    flex-direction: column;
    justify-content: center;
    text-align: center;
    transition: var(--buttonTransition);
    padding: .5em;
    transition: var(--lastUploadedFixtureTransition);
}

.lastFixtureElement:hover {
    background: var(--lastUploadedFixtureEntryHoverBackground);
    cursor: pointer;
}

@media screen and (max-width: 1750px) {
    .lastFixtureElement {
        width: 98%;
    }
}

.noRevisionsShownText {
    color: var(--generalLabelColor);
}

/**********************************************************************/
/******************** Search elements *********************************/
/**********************************************************************/
.customBar {
    position: relative;
    width: 100%;
    height: auto;
    background-color: var(--customBarBackgroundColor);
    bottom: 2px;
    border: var(--customBarBorder);
    border-radius: var(--generalBorderRadius);
    display: flex;
    flex-direction: column;
}

.customBar.favorite {
    width: calc(98% - 32px);
    top: 5px;
    left: 1%;
}

.favoriteFilterInput {
    position: relative;
    left: 0px;
    height: var(--inputHeight) !important;
    width: calc(100% - 10px) !important;
    background-color: #989898;
    border: 0;
    color: white;
    padding: 0px;
    margin: 6px 4px;
    vertical-align: bottom;
    text-indent: 8px;
    padding-left: 45px !important;
    border-radius: var(--filterInputBorderRadius) !important;
}

.customResult {
    width: 95%;
    overflow-x: hidden;
    overflow-y: auto;
    bottom: 0;
    top: 40px;
    border: var(--generalBorder);
    border-width: var(--customBarResultBorderWidth);
    border-radius: var(--generalBorderRadius);
    display: none;
    height: 100%;
    background-color: #393939;
}

.customResult.favorite {
    width: calc(98% - 32px);
    position: relative;
    top: 10px;
    left: 1%;
    height: auto;
    overflow-x: hidden;
    overflow-y: auto;
}

#searchWrapper {
    padding-bottom: var(--mainViewSpacing);
}

#searchBar {
    display: block;
    background-color: var(--searchBarBackgroundColor);
    white-space: nowrap;
    padding: 7px 5px;
    border: var(--generalBorder);
    border-radius: var(--generalBorderRadius);
}

#searchDiv {
    width: 100%;
    display: inline-flex;
    position: relative;
}

#searchDiv:nth-child(n) {
    height: 50%;
}

#searchBar div.emptyPreviousInput {
    padding-top: 10px;
}

#favoriteBar div.emptyPreviousInput {
    position: absolute;
    left: 10px;
    top: var(--clearInputImgOffset);
    width: var(--clearInputImgSize);
    height: var(--clearInputImgSize);
}

#searchString {
    height: var(--inputLikeButtonHeight);
    margin: 0;
    padding: 0;
    overflow: hidden;
    text-overflow: ellipsis;
    padding-left: 22px;
    transition: var(--buttonTransition);
    border-radius: var(--borderRoundingLeft);
    margin-bottom: var(--searchInputMarginBottom);
}

#emptyThis {
    width: var(--clearInputImgSize);
    height: var(--clearInputImgSize);
    position: absolute;
    top: var(--clearInputImgOffsetOutside);
    left: 0px;
    background-image: var(--clearInputImage);
    background-size: 50%;
    background-repeat: no-repeat;
    background-position: 50% 50%;
    cursor: pointer;
}

#search {
    width: 10em;
    height: var(--inputLikeButtonHeight);
    margin: 0;
    margin-left: var(--inputButtonSpacing);
    display: block;
    border-radius: var(--borderRoundingRight);
}

#searchFilters {
    width: 100%;
    display: flex;
    justify-content: flex-start;
    margin-top: .4em;
}

#showSearchFilters {
    background-image: var(--filterImage);
    width: 1.4em;
    height: 1.4em;
    background-size: 80%;
    background-position: 50% 50%;
    background-repeat: no-repeat;
    cursor: pointer;
    display: none;
}

#searchFiltersReset {
    cursor: pointer;
    margin-top: -3px;
    margin-bottom: -10px;
    background-size: 18px;
}

@media screen and (max-width: 1700px) {
    #searchFilters {
        flex-direction: column;
        display: none;
    }

    #showSearchFilters {
        display: inline-block;
    }

    #searchFilterHeader {
        display: initial;
    }
}

@media screen and (max-width: 750px) {
    #searchFilters {
        display: none;
    }
}

#searchFilters.visible {
    display: flex;
}

#searchResultDiv {
    width: 100%;
    height: 100%;
    overflow: hidden;
    display: none;
    position: absolute;
    z-index: 1;
    padding-right: var(--mainViewSpacing);
}

#searchResult {
    width: 100%;
    max-height: 100%;
    border: var(--generalBorderThick);
    overflow-x: hidden;
    overflow-y: auto;
    border-radius: var(--generalBorderRadius);
    position: relative;
    z-index: 2;
    background-color: var(--bodyBackgroundColor);
}

@media screen and (max-width: 750px) {
    #searchResultDiv {
        width: 100%;
    }
}

#restOverlay {
    width: 100%;
    height: 100%;
    background: rgba(40, 40, 40, 0.7);
    position: relative;
    z-index: inherit;
    margin-top: -6px;
}

.searchResultFrame {
    width: 100%;
    height: 1.5em;
    overflow: hidden;
    background-color: var(--searchResultBackgroundColor);
    border-bottom: 1px solid black;
    position: relative;
    right: 1px;
    white-space: nowrap;
}

.searchResultFrame.body:hover {
    background-color: var(--searchResultHoverBackgroundColor);
}

.searchResultFrame.body.oneLine {
    text-indent: .3em;
    font-weight: bold;
    background-color: gray;
}

.searchResultColumn {
    width: 25%;
    border-left: 1px solid black;
    padding-left: 10px;
    height: 100%;
    line-height: 20px;
    overflow: hidden;
}

.searchResultItemSubInfo {
    color: gray;
    font-size: 75%;
    float: right;
    margin-right: 5px;
}

.searchResultColumn.first {
    border-left: 0;
    margin-left: 0;
}

.searchResultColumn:has(.unfavorite) {
    cursor: pointer;
    text-align: center;
    padding-left: 0;
}

.searchResultColumn .unfavorite {
    background-image: var(--unFavoriteImage);
    background-size: 18px;
    background-repeat: no-repeat;
    background-position: 50%;
    filter: var(--unFavoriteInputFilter);
    height: 100%;
    width: 18px;
    cursor: pointer;
}

.searchResultColumn.unfavorite:hover {
    background-color: var(--unFavoriteInputHoverColor, #676767);
}

.searchResultRow {
    width: 100%;
    background-color: var(--searchResultBackgroundColor);
    border-left: 1px solid black;
    border-bottom: 1px solid black;
    padding-left: 10px;
    height: 20px;
    line-height: 20px;
}

.resultHeadText {
    font-weight: bold;
    text-decoration: underline;
    margin-left: -11px;
}

.emptyPreviousInput {
    position: absolute;
    height: var(--clearInputImgSize);
    width: var(--clearInputImgSize);
    background-image: var(--closeImage);
    background-size: 50%;
    background-repeat: no-repeat;
    background-position: 50% 50%;
    cursor: pointer;
}

/**********************************************************************/
/******************** Revision view elements **************************/
/**********************************************************************/
#scrollWindow {
    width: 100%;
    height: 100%;
    overflow: auto;
    display: flex;
    flex-direction: column;
}

#revisionTableContainer {
    width: 100%;
    flex: 4;
    overflow: auto;
    border-radius: var(--revisionContainerBorderRadius);
    background-color: var(--fileListBackgroundColor);
}

#revTable {
    width: 100%;
    min-width: 950px;
    border-collapse: var(--fileListBorderCollapse);
}

#fileListHeader {
    height: 30px;
    background-color: var(--fileListHeadBackgroundColor);
    max-height: 30px;
    text-align: left;
}

.fileListHeaderColumn {
    padding: 6px 10px;
    overflow: hidden;
    white-space: nowrap;
}

#scrollWindowSeparator {
    width: 100%;
    height: 3px;
    background-color: gray;
}

#fileListBody {
    height: 93%;
}

.fileList tr {
    transition: var(--fileListTransition);
}

.fileList tr:nth-child(2n+1) {
    background: var(--fileListBackgroundColorOdd);
}

.fileList tr:nth-child(2n) {
    background-color: var(--fileListBackgroundColorEven);
    transition: var(--buttonTransition);
}

.fileList .warning {
    background: #ff4500 !important;
    font-style: italic;
}

.fileList tr:hover {
    background-color: var(--fileListBackgroundColorHover);
    text-shadow: var(--fileListTextShadowHover);
    cursor: pointer;
}

.fileList .warning:hover {
    background: #ff7c4c !important;
}

/**********************************************************************/
/******************** Revision line elements **************************/
/**********************************************************************/
.fileListBodyLine {
    height: 30px;
    overflow-x: hidden;
    color: var(--fileListDefaultColor);
}

.fileListBodyLine:active {
    background-color: #393939;
}

.fileListBodyLine.selected>td {
    box-shadow: var(--selectedRevisionLineBorder);
    background-color: var(--fileListSelectedBackgroundColor);
    color: var(--fileListSelectedColor);
}

.fileListBodyLine.selected>td:first-child>.revisionNameContainer,
.fileListBodyLine.selected a {
    color: var(--selectedRevisionLineColor);
}

.fileListBodyLineColumn {
    overflow: visible;
    line-height: 30px;
    padding: 0px 7px;
    white-space: nowrap;
}

.fileListBodyLineColumn.revision {
    white-space: initial;
    -webkit-touch-callout: text;
    -webkit-user-select: text;
    -khtml-user-select: text;
    -moz-user-select: text;
    -ms-user-select: text;
    user-select: text;
}

.fileListBodyLineColumn.revision {
    max-width: 30vw;
}

.fileListBodyLine a {
    color: var(--fileListDefaultColor);
}

.revIconDiv {
    float: right;
    padding: 0px 5px;
}

.revIcon {
    border: 0 !important;
    background-color: rgba(0, 0, 0, 0) !important;
    height: 20px !important;
    width: 20px !important;
    background-size: 20px !important;
    background-repeat: no-repeat !important;
    background-position: 50% 50% !important;
    margin-left: 3px;
}

.tagDiv {
    margin-top: 4px;
    white-space: nowrap;
    display: flex;
    justify-content: space-around;
}

.testedIco {
    width: 20px;
    margin-right: 3px;
}

.fileListBodyLineTested {
    width: 20px;
    height: 20px;
    background-size: 100%;
    background-position: 50%;
    float: left;
    background-repeat: no-repeat;
}

.fileListBodyLineTested:hover {
    cursor: pointer;
}

.fileListBodyLineTested.tested:hover {
    -webkit-transform: scaleX(-1);
    -moz-transform: scaleX(-1);
    -o-transform: scaleX(-1);
    transform: scaleX(-1);
    -ms-filter: "FlipH";
    filter: FlipH;
}

.fileListBodyLineTested.orig:hover {
    cursor: auto;
}

.fileDiv {
    white-space: nowrap;
}

.revisionNameContainer {
    -webkit-touch-callout: text;
    -webkit-user-select: text;
    -khtml-user-select: text;
    -moz-user-select: text;
    -ms-user-select: text;
    user-select: text;
    word-break: break-all;
    padding-top: var(--revisionNameOffset);
    max-width: calc(100% - 80px);
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    color: var(--fileListDefaultColor);
}

.editNameDiv {
    display: inline-flex;
    align-items: flex-end;
}

.buttonCancel {
    height: 30px !important;
    width: 30px !important;
    background-image: var(--closeImage);
    background-size: 50%;
    background-repeat: no-repeat;
    background-position: 50% 50%;
    cursor: pointer;
    margin-left: 2px;
}

#fileListBody:hover * {
    cursor: pointer;
}

.fileStars {
    width: 2em;
    height: 2em;
    min-width: 20px;
    min-height: 20px;
    max-width: 25px;
    max-height: 25px;
    background-image: var(--rateImg);
    background-position: 0% 50%;
    background-size: 90%;
    background-repeat: no-repeat;
    filter: var(--fileListRateStarsFilter);
}

.fileStars:hover {
    cursor: pointer;
}

.ratersCount {
    float: right;
    font-weight: bold;
    color: var(--fileListDefaultColor);
}

.fileListBodyLine.selected .ratersCount {
    color: var(--fileListSelectedColor);
}

body:not(.grandMA1) .fileListBodyLine:not(.selected) .revIconDiv input,
body:not(.grandMA1) .fileListBodyLine:not(.selected) .fileStars,
body:not(.grandMA1) .fileListBodyLine:not(.selected) .tagDiv {
    filter: var(--fileListDefaultImageFilter);
}

/**********************************************************************/
/******************** Revision details elements ***********************/
/**********************************************************************/
#fileInfo {
    width: 100%;
    flex: 6;
    border-left: var(--revisionDetailsBorderLeft);
    border-top: var(--revisionDetailsBorderTop);
    border-radius: var(--revisionContainerBorderRadius);
    overflow: auto;
    margin-top: var(--revisionDetailsOffsetTop);
}

#modeHeader {
    background-color: var(--revisionDetailHeadlineBackgroundColor);
    color: var(--revisionDetailHeadlineColor);
    width: 100%;
    height: 30px;
    line-height: 30px;
    position: relative;
    text-align: center;
    overflow: hidden;
    margin-top: var(--revisionDetailsHeadlineOffsetTop);
}

.modeHeaderMenu {
    position: absolute;
    left: 20px;
}

#modeContent {
    width: 100%;
    background-color: var(--revisionDetailBackgroundColor);
}

#modeContentLeft img {
    filter: var(--fileListDefaultImageFilter);
}

#modeContentLeft {
    display: inline-block;
    padding-top: 10px;
    width: 96%;
    padding-left: 2%;
}

.warningContainer {
    border: 2px solid #E8A901;
    border-radius: 5px;
    max-width: 90%;
    display: flex;
    flex-direction: column;
    padding: 0.5em;
}

.warningHeadline {
    display: flex;
    align-items: center;
}

#revisionDiv,
#revisionDiv * {
    -webkit-touch-callout: text;
    -webkit-user-select: text;
    -khtml-user-select: text;
    -moz-user-select: text;
    -ms-user-select: text;
    user-select: text;
}

#revisionDiv {
    padding: 10px 10px 0px 10px;
}

#modeContentRight {
    display: inline-block;
    width: 98%;
}

@media (min-width: 768px) {

    #modeContentLeft {
        width: 63%;
    }

    #modeContentRight {
        width: 33%;
        margin-top: 50px;
        margin-bottom: 110px;
        margin-right: 2%;
    }
}

#fileTags div,
#footprintDiv div,
#footprintDiv label,
#revisionDiv div,
#revisionDiv h1,
#revisionDiv label,
#modeComments h1 {
    color: var(--generalLabelColor);
}

#fileTags {
    width: 95%;
    display: flex;
    justify-content: flex-start;
    align-content: space-around;
    flex-wrap: wrap;
    background-color: var(--tagsAreaBackgroundColor, transparent);
    padding: 10px 10px 0px 10px;
}

.tagDetail {
    display: inline-block;
    min-width: 50%;
}

.tagDetail * {
    color: var(--tagsAreaColor, --generalFontColor) !important;
}

@media screen and (max-width: 750px) {
    .tagDetail {
        min-width: 100%;
    }
}

.tags {
    margin-left: 10px;
}

#wheelsContainer {
    width: 100%;
}

#wheelsContainer * {
    color: var(--commentAreaColor);
}

#wheelsDiv {
    display: flex;
    flex-wrap: wrap;
}

.wheelDiv {
    min-width: 45%;
    width: 100%
}

.slotWrapper {
    overflow-x: auto;
    margin: 5px;
    min-height: 7em;
    max-width: 100%;
    width: 100%
}

.slotWrapperInner {
    display: flex;
}

.slot {
    width: 5em;
    height: 5em;
    border-radius: 50%;
    -webkit-filter: drop-shadow(0px 0px .5px rgba(255, 255, 255, 0.5));
    filter: drop-shadow(0px 0px .5px rgba(255, 255, 255, 0.5));
    position: relative;
    margin: 2px 5px;
}

.slot.color {
    box-shadow: 0px 0px 5px rgba(255, 255, 255, .2);
}

.slotImg {
    width: 5em;
    height: 5em;
    border-radius: 50%;
}

.slotIndexDiv {
    position: absolute;
    top: 0px;
    left: -1.4em;
    font-size: 12px;
    width: 2em;
    text-align: right;
}

#modeComments {
    display: inline-block;
    width: 100%;
    background-color: var(--commentDivBackgroundColor);
    margin-bottom: 110px;
    margin-right: 2%;
    overflow: hidden;
    border-radius: var(--generalDivBorderRadius);
}

body.grandMA2 #modeComments {
    border: var(--generalBorder);
    border-radius: var(--buttonBigBorderRadius);
}

/*#modeComments * {
    color: var(--fileListDefaultColor);
}*/

#modeComments .commentContentArea *,
#modeComments #commentAreaCharCount {
    color: var(--commentAreaColor);
}

#modeComments textarea {
    color: var(--commentTextAreaColor);
}

#modeComments img,
.modeLabel::after,
.commentDelete {
    filter: var(--fileListDefaultImageFilter);
}

.commentContentArea {
    width: 100%;
    height: auto;
    max-height: 500px;
    overflow-y: auto;
    overflow-x: hidden;
    padding: 5px 20px;
}

.commentTextArea {
    max-width: 100%;
    width: 100%;
    height: 64px;
    border: var(--commentTextAreaBorder);
    border-width: var(--commentTextAreaBorderWidth);
    border-radius: var(--commentTextAreaBorderRadius);
    background-color: var(--textAreaBackgroundColor);
    color: var(--textAreaColor);
    border-radius: var(--textAreaBorderRadius);
}

.commentTextArea::placeholder {
    color: var(--textAreaPlaceHolderColor);
}

.commentTextArea:hover {
    border: var(--commentTextAreaHoverBorder);
    border-width: var(--commentTextAreaHoverBorderWidth);
    cursor: text;
}

.submitWrapper {
    display: flex;
    justify-content: space-between;
    margin-left: 2%;
}

.commentAreaCharCount {
    display: block;
    text-align: left;
}

.commentWrapper {
    width: 100%;
    padding-top: 10px;
}

.commentUsername {
    color: var(--headline2Color);
    font-weight: bold;
}

.commentTimestamp {
    float: right;
    color: #969393;
    font-size: 12px;
}

.commentDelete {
    border: none !important;
    background-color: rgba(0, 0, 0, 0) !important;
    color: var(--generalFontColor);
    border-radius: 0px !important;
    height: 16px !important;
    width: 16px !important;
    background-image: var(--trashImage) !important;
    background-size: 100% !important;
    float: right;
    margin-top: -2px !important;
    margin-left: 5px;
    padding: 0px !important;
}

.commentText {
    color: gray;
    word-break: break-word;
}

.addCommentWrapper {
    text-align: right;
    padding: 20px;
}

input.submitComment {
    margin-top: var(--inputButtonSpacing) !important;
    border-radius: var(--borderRoundingBottom) !important;
}

button.submitComment {
    margin-top: var(--inputButtonSpacing) !important;
}

button.submitComment span {
    color: var(--buttonColor) !important;
}

button.submitComment:hover span {
    color: var(--buttonHoverColor) !important;
}

#modeDirectLinkContainer,
#modeDirectLinkButton,
#modeFixtureBuilderContainer,
#modeFixtureBuilderButton,
#modeSeeInUserPageButton {
    display: inline-block;
    width: 100%;
    border-radius: var(--buttonBigBorderRadius);
    margin-bottom: 6px;
}

#modeContentRight> :nth-last-child(2) {
    margin-bottom: 20px;
}

.internalLink {
    color: gray;
}

.internalLink:hover {
    cursor: pointer;
    text-decoration: underline;
}

.footprint {
    margin-bottom: 10px;
}

#footprintDiv {
    width: 95%;
    padding: 10px 10px 0px 10px;
}

body:not(.userPage) #footprintDiv {
    background-color: var(--footprintAreaBackgroundColor);
    border-radius: var(--generalDivBorderRadius);
}

body.grandMA2 #footprintDiv {
    border: var(--generalBorder);
    border-radius: var(--buttonBigBorderRadius);
}

#footprintHead {
    display: flex;
    justify-content: flex-start;
    align-items: baseline;
}

#footprintDiv h1 {
    color: var(--footprintAreaHeadlineColor, --generalLabelColor);
}

#footprintViewSwitch {
    margin-left: 5px;
}

#footprints {
    width: 100%;
    display: flex;
    flex-wrap: wrap;
    margin: 10px 0px;
    position: relative;
}

#footprints .modeDiv {
    border-bottom: 2px solid gray;
}

#footprints .modeDiv:last-child {
    border-bottom: none;
}

.modeDiv {
    width: 100%;
    margin-bottom: 1em;
}

.modeLabel {
    font-size: 1.3em;
    clear: both;
    padding-left: 3px;
    cursor: pointer;
}

.modeLabel::after {
    content: ' ';
    width: 6px;
    height: 6px;
    color: transparent;
    position: absolute;
    right: 5px;
    border: solid white;
    border-width: 0 3px 3px 0;
    padding: 3px;
    transform: rotate(45deg);
    -webkit-transform: rotate(45deg);
    transition: .2s linear;
}

.modeLabel.unCollapsed::after {
    margin-top: 2px;
    transform: rotate(-135deg);
    -webkit-transform: rotate(-135deg);
}

.channelCountLabel {
    font-size: 14px;
    margin-left: 1em;
}

.moduleContainers {
    display: none;
}

.moduleContainers.visible {
    display: block;
}

.moduleContainer {
    width: 100%;
    margin-bottom: 10px;
}

.moduleFootprint {
    width: 100%;
    margin-top: 3px;
    display: flex;
    flex-wrap: wrap;
}

.moduleHeadline {
    color: gray;
    font-size: 115%;
    text-decoration: underline;
    padding-left: 5px;
}

.instanceContainer {
    margin: 2px 0px;
}

.dmxBreak {
    width: 100%;
}

.breakLabel {
    color: var(--footprintAreaBreakLabelColor);
    font-weight: var(--footprintAreaBreakLabelFontWeight);
    padding-left: 0px;
}

.modeDiv .dmxBreak:nth-child(1n+0) {
    margin-bottom: 5px;
    border-bottom: 2px dashed gray;
    padding-bottom: 2px;
}

.modeDiv .dmxBreak:last-child {
    border-bottom: none;
}

#dmxFootprint {
    width: 100%;
    white-space: pre-line;
}

.dmxFootprint {
    color: var(--generalFontColor);
    margin-bottom: 2px;
    width: 33%;
    min-width: 250px;
    overflow: hidden;
}

div.dmxFootprintNumber {
    color: var(--footprintAreaColor, #797979) !important;
    font-weight: var(--footprintAreaFontWeight);
    width: 30px;
    text-align: right;
}

div.dmxFootprintName {
    color: var(--footprintAreaColor, --generalFontColor) !important;
    font-weight: var(--footprintAreaFontWeight);
    width: 150px;
    height: 17px;
    line-height: 16px;
    word-wrap: normal;
    padding-left: 4px;
}

.dmxFootprintNumberCount {
    color: #797979;
    width: 30px;
    text-align: right;
    margin-right: 7px;
}

#noteDiv {
    background-color: var(--notesAreaBackgroundColor);
    width: 95%;
    padding: 10px 10px 0px 10px;
}

#noteDiv h1 {
    color: var(--notesAreaHeadlineColor, --generalLabelColor);
}

.infoDot {
    position: absolute;
    left: -20px;
    background-color: var(--infoDotBackgroundColor);
    width: 10px;
    height: 10px;
    border-radius: 10px;
    top: 3px;
}

.infoText {
    color: var(--notesAreaColor);
    width: calc(100% + -20px);
    margin-left: 20px;
    margin-bottom: 30px;
    position: relative;
}

/* Report file */
#reportTable select {
    position: relative;
    width: 100%;
    height: var(--inputHeight);
    color: var(--reportSelectColor);
    padding-left: 3px;
    text-indent: 5px;
    font-size: 1.3em;
}

/**********************************************************************/
/******************** Global filters elements *************************/
/**********************************************************************/
#globalFiltersContainer {
    width: 100%;
    background-color: var(--globalFiltersBackgroundColor);
    border-bottom: var(--globalFiltersBorderBottom);
}

#globalFilters {
    overflow-y: hidden;
    width: 100%;
    display: flex;
    align-items: center;
}

#globalFilters .header {
    margin-left: 1em;
    margin-top: .2em;
}

#globalFilters .header .show {
    background-image: var(--filterImage);
    width: 1.6em;
    height: 1.6em;
    background-size: 80%;
    background-position: 50% 50%;
    background-repeat: no-repeat;
    cursor: pointer;
    display: none;
    margin: .4em .4em 0em 0em;
}

#globalFilters i {
    display: none;
}

#globalFiltersReset {
    margin-top: var(--globalFiltersResetImageOffset);
    margin-left: -10px;
    cursor: pointer;
}

@media screen and (max-width: 1000px) {
    #globalFilters {
        overflow-y: auto;
    }

    #globalFilters .filterDiv {
        width: 100%;
    }

    #globalFilters .filterDiv select {
        width: inherit;
        margin: 0;
    }

    #globalFilters .filterDiv.group0 label,
    #globalFilters .filterDiv.group1 label,
    #globalFilters .filterDiv.group2 label,
    #globalFilters .filterDiv.group3 label {
        padding-left: .6em;
    }
}

@media screen and (max-width: 1200px) {
    #globalFilters .header .show {
        display: inline-block;
    }
}

@media screen and (max-width: 1000px) {
    #globalFilters .header {
        min-width: 42px;
    }
    .filterDiv.group0 label,
    #globalFiltersTitle {
        display: none;
    }
}

@media screen and (min-width: 1201px) {
    #globalFilters .filterDiv.hidden {
        display: inline-block !important;
    }
}

#globalFilters .h1 {
    color: var(--generalFontColor);
    font-size: 1.5em;
    line-height: 1.6em;
    width: 100%;
    margin-left: -.17em;
}

#globalFilters .globalFiltersDescription {
    font-size: 1em;
}

@media screen and (max-width: 750px) {
    #globalFilters .header i {
        display: none;
    }
}

.filterDiv {
    padding: .6em 0em .6em 1em;
}

@media screen and (max-width: 1000px) {
    .filterDiv {
        padding: .0em 0em .6em 1em;
    }
}

@media screen and (max-width: 1200px) and (min-width: 1001px) {
    .filterDiv {
        margin-left: .6em;
    }
}

.filterDiv.hidden {
    display: none;
}

.filterDiv label {
    margin-left: -10px;
    line-height: 20px;
}

.filterDiv select {
    position: relative;
    margin: 0 .6em;
    padding: 2px 2em 2px .4em;
    height: auto;
    width: auto;
    border-radius: 2px;
    margin-top: -2px;
    font-size: var(--globalFiltersSelectFontSize);
}

/**********************************************************************/
/******************** Custom checkboxes *******************************/
/**********************************************************************/
.checkBoxLabelWrapper {
    display: flex;
    align-items: center;
}

.checkBoxLabelWrapper .checkBoxLabel {
    margin-left: 0px;
    padding-right: 2px;
}

.checkboxContainer {
    display: block;
    position: relative;
    width: 24px;
    min-width: 24px;
    height: 18px;
    margin-bottom: 12px;
    cursor: pointer;
    font-size: 22px;
    -webkit-user-select: none;
    -moz-user-select: none;
    -ms-user-select: none;
    user-select: none;
}

/* Hide the browser's default checkbox */
.checkboxContainer input {
    position: absolute;
    opacity: 0;
    cursor: pointer;
    height: 0;
    width: 0;
}

/* Create a custom checkbox */
.checkboxContainer .checkMark {
    position: absolute;
    top: 5px;
    left: 0;
    height: 20px;
    width: 20px;
    border-radius: 3px;
    border-radius: var(--checkBoxBorderRadius);
    border: 2px solid var(--checkBoxBorderColor);
    background: var(--checkBoxBackground);
}

.checkboxContainer:hover input~.checkMark {
    background-color: var(--checkBoxHoverBackgroundColor);
}

.checkboxContainer input:checked~.checkMark {
    background-color: var(--checkBoxCheckedBackgroundColor);
}

.checkboxContainer input:disabled~.checkMark {
    border: 2px solid gray;
    background-color: var(--checkBoxDisabledBackgroundColor);
}

.checkboxContainer .checkMark:after {
    content: "";
    position: absolute;
    display: none;
}

.checkboxContainer input:checked~.checkMark:after {
    display: block;
}

.checkboxContainer .checkMark:after {
    left: 4px;
    top: 1px;
    width: 5px;
    height: 8px;
    border: solid var(--checkBoxCheckMarkColor);
    border-width: 0 3px 3px 0;
    -webkit-transform: rotate(45deg);
    -ms-transform: rotate(45deg);
    transform: rotate(45deg);
}

/**********************************************************************/
/******************** Terms popup *************************************/
/**********************************************************************/

#termsPopup {
    position: absolute;
    top: 5%;
    left: 25%;
    width: 50%;
    height: 85%;
    transition: all .4s;
}

@media screen and (max-width: 1800px) {
    #termsPopup {
        left: 20%;
        width: 60%;
    }
}

@media screen and (max-width: 1300px) {
    #termsPopup {
        left: 10%;
        width: 80%;
    }
}

/* External Code*/
/*  External code for speech bubble start */
.reportInputDiv {
    position: relative;
    padding: 15px;
    margin: 1em 0 3em;
    color: black;
    background: var(--speechBubbleBackgroundColor);
    border: var(--speechBubbleBorder);
    -webkit-border-radius: 2px;
    -moz-border-radius: 2px;
    border-radius: 2px;
    z-index: 2;
}

/* Variant : for left/right positioned triangle
------------------------------------------ */

.reportInputDiv.left {
    margin-left: 50px;
}

/* Variant : for right positioned triangle
------------------------------------------ */

.reportInputDiv.right {
    margin-right: 50px;
}

/* THE TRIANGLE
------------------------------------------------------------------------------------------------------------------------------- */

/* creates triangle */
.reportInputDiv:after {
    content: "";
    position: absolute;
    bottom: -15px;
    /* value = - border-top-width - border-bottom-width */
    left: 50px;
    /* controls horizontal position */
    border-width: 15px 15px 0;
    /* vary these values to change the angle of the vertex */
    border-style: solid;
    border-color: var(--speechBubbleBackgroundColor) transparent;
    /* reduce the damage in FF3.0 */
    display: block;
    width: 0;
}

/* Variant : top
------------------------------------------ */

.reportInputDiv.top:after {
    top: -15px;
    /* value = - border-top-width - border-bottom-width */
    left: 78px;
    /* controls horizontal position */
    bottom: auto;
    right: auto;
    border-width: 0 15px 15px;
    /* vary these values to change the angle of the vertex */
    border-color: var(--speechBubbleBackgroundColor) transparent;
}

/* Variant : left
------------------------------------------ */

.reportInputDiv.left:after {
    top: 16px;
    /* controls vertical position */
    left: -50px;
    /* value = - border-left-width - border-right-width */
    bottom: auto;
    border-width: 10px 50px 10px 0;
    border-color: transparent var(--speechBubbleBackgroundColor);
}

/* Variant : right
------------------------------------------ */

.reportInputDiv.right:after {
    top: 16px;
    /* controls vertical position */
    right: -50px;
    /* value = - border-left-width - border-right-width */
    bottom: auto;
    left: auto;
    border-width: 10px 0 10px 50px;
    border-color: transparent var(--speechBubbleBackgroundColor);
}

/* External code for speech bubble end */

/* Keypass exception*/

.ui-menu.ui-widget.ui-widget-content.ui-autocomplete.ui-front,
.ui-menu.ui-widget.ui-widget-content.ui-autocomplete.ui-front * {
    background-color: white !important;
    color: black !important;
}

.aliasListSelect {
    position: relative;
    width: 100%;
    min-width: 200px;
    margin-top: 10px;
}

.wipHint {
    margin-top:10px;
    color: yellow;
}