/***
 *
 * Copyright (c) 2019-2024 Tony Confrey, DataFoundries LLC
 *
 * This file is part of the BrainTool browser manager extension, open source licensed under the GNU AGPL license.
 * See the LICENSE file contained with this project.
 *
 ***/


/* First define the basic theme variables */
:root {
    --btRowHeight: 30px;
    --btFont: Roboto;
    --btControlsFont: Roboto;
    --btLetterSpacing: 0.02em;
    
    --btTopicFontWeight: 900;
    --btTopicFontSize: 12px;
    --btTopicLineHeight: 14px;
    --btIndenterTopOffset: -8px;

    --btPageFontWeight: bold;
    --btPageFontSize: 10px;
    --btPageLineHeight: 12px;

    --btNoteFontWeight: normal;
    --btNoteFontSize: 10px;
    --btNoteLineHeight: 12px;
    --btNoteLineClamp: 2;  /* # of notes lines shown */

    --btRowButtonMarginTop: auto;
    --btFaviconPadding: 5px;
    --btTabgroupPadding: 5px 7px 5px 7px !important;

    --btTitleFontSize: 16px;
    --btTitleFontWeight: 700;
    --btTitleLineHeight: 19px;

    --btSubtitleFontSize: 14px;
    --btSubtitleFontWeight: 700;
    --btSubtitleLineHeight: 19px;

    --btFootnoteFontSize: 10px;
    --btFootnoteFontWeight: 400;
    --btFootnoteLineHeight: 12px;

    --btWenkBottom: 8px;
    --btWenkPadding:  0.2rem 0.5rem 0.2rem 0.5rem;
    --btIndentStepSize: 30px;

    --btSettingsSubtextFontSize: 10px;
    --btSettingsSubtextFontWeight: 400;
    --btSettingsSubtextLineHeight: 12px;
    --btSettingsSubtextFontColor: rgba(255, 255, 255, 0.7);

    --btSlideTextColor: #0C4F6B;
    --btSlideHeaderBackground: linear-gradient(#DFE3E2 0%, #C3CBCB 80.6%, #C8CFD0 100%);

    --btMessageBackground: #F598D4;
    --btWarningBackground: #F31D1D;
    --btTipBackground: #B9CDDF;

    /* Items below differ in the DARK theme */
    
    --btColor: #3C4749;  /* was #2a3f3e;*/
    --btNoteColor: #636363; /* was #808285; */
    --btTopicBackground: #bcc4c5;
    --btPageBackground: #d4dadb;

    /* uncomment to set note background color 
    --btNoteBackground: #e6e7e8;
    */
    
    --btInputBackground: white;
    --btInputForeground: #2d2d2d;
    --btHintColor: #BCBEC0;
    --btTooltipBackground: rgba(42, 63, 62, 0.85);
    --btTooltipForeground: #fff;
    
    --btRowSelected: #e0ece0; /* linear-gradient(180deg, #bcc4c5 0%, #d4dadb 50%, #bcc4c5 100%);*/
    --btRowHovered: #AAB6B8;
    
    --btGeneralBorder: #3f673f;
    --btGeneralBorderShadow: #3f673f90;
    --btButtonBackground: #7bb07b;
    --btButtonHighlight: #3f673f90;

    --btHeaderBackground: linear-gradient(180deg, #F1F1F1 0%, #C3CBCB 52.6%, #C8CFD0 100%);
    --btFooterBackground: linear-gradient(#e6e6e7, #c3cbcb, #a8b3b4);
    --btEmptyBackground: whitesmoke;
    --btRowBorderColor: white;
    --btHeaderBorder: #ddd;
    
    --btControlsBackground: #eeeeee;
    --btOptionsBackground: #e5e5e5;
    --btControlsHeaderPrimaryColor: #2a3f3e;
    --btControlsHeaderSecondaryColor: #435554;
    --btControlsDividerColor: #556463;

    --btLinkColor: #2a3f3e;
    --btLinkOpenedColor: rgba(5, 122, 159, 0.8);
    --btLinkSelectedOpenedColor: #057a9f;
    --btSearchResult: var(--btTipBackground);

    --btDialogBackground: #eeeeee;
    --btTextAreaBackground: #fff;
    --btDrawAttention: var(--btColor);

    --btOpenInfo: #0097C6;
}

[data-theme="DARK"] {

    --btColor: whitesmoke; /* was #aebabc #b6c3c3; */
    --btNoteColor: ghostwhite; /* #aab6b8 */
    --btTopicBackground: #3d4749;
    --btPageBackground: #626A6C;

    --btInputBackground: #2d2d2d;
    --btInputForeground: white;
    --btHintColor: white;
    
    --btTooltipForeground: rgba(42, 63, 62, 0.85);
    --btTooltipBackground: #fff;
    
    --btRowSelected: #202020; /* #e5e5e5; */
    --btRowHovered: #525a5c;
    --btRowButtonBackground: whitesmoke;
    --btButtonHighlight: white;

    --btGeneralBorder: #7bb07b;
    --btGeneralBorderShadow: #7bb07b90;
    --btButtonBackground: #7bb07b;

    --btHeaderBackground: linear-gradient(180deg, #6C7777 0%, #475354 100%);
    --btFooterBackground: linear-gradient(#6c7777, #475354);
    --btEmptyBackground: #2d2d2d;
    --btRowBorderColor: #2d2d2d;
    --btHeaderBorder: #2d2d2d;
    
    --btControlsBackground: #556463;
    --btOptionsBackground: #394847;
    --btControlsHeaderPrimaryColor: #ffffff;
    --btControlsHeaderSecondaryColor: rgba(255, 255, 255, 0.7);
    --btControlsDividerColor: rgba(255, 255, 255, 0.3);

    --btLinkColor: #e0e5e5;
    --btLinkOpenedColor: #78c6de;
    --btLinkSelectedOpenedColor: #5bc1e1;
    --btSearchResult: #2A3F3E;
    --btOpenInfo: #7ce0ff;

    --btDialogBackground: linear-gradient(180deg, #566564 0%, #394C4B 100%);
    --btTextAreaBackground: #202020;
    --btDrawAttention: var(--btButtonBackground);

    /* --btTipBackground: #CE88B5; */
}

[data-dense="DENSE"] {
    --btNoteLineClamp: 1;
    --btRowHeight: 20px;
    --btRowButtonMarginTop: -5px;
    --btIndenterTopOffset: -4px;
    --btFaviconPadding: 1px;
    --btTabgroupPadding: 3px 7px 3px 7px !important;

    --btWenkBottom: 3px;
    --btWenkPadding: 0.1rem 0.5rem 0.1rem 0.5rem;
    --btIndentStepSize: 20px;
}

[data-size="LARGE"] {
    --btTopicFontSize: 16px;
    --btTopicLineHeight: 18px;

    --btPageFontSize: 14px;
    --btPageLineHeight: 16px;

    --btNoteFontSize: 14px;
    --btNoteLineHeight: 16px;
    --btRowButtonMarginTop: -1px;
    --btRowHeight: 35px;
}
[data-dense="DENSE"][data-size="LARGE"] {
    --btRowHeight: 24px;
    --btIndenterTopOffset: -4px;
}
    
a {
    color: var(--btLinkColor);
}
a:link {
  text-decoration: none;
}
a:hover {
  text-decoration: underline;
}

html {
    background: var(--btEmptyBackground);
}
body {
    overflow-x: clip;
    margin-left: 0px;
    margin-right: 0px;
}

/*
 * Header Bar 
 */

#controlsHeader {
    z-index: 3;
}

.topBanner {
    width: 100%;
    height: 54px;
    left: 0px;
    top: 0px;
    background: var(--btHeaderBackground);
    color: var(--btColor);
    z-index: 2;
}
#topBar {
    position: fixed;
}

#brain {
    margin-left: 10px;
    margin-top: 8px;
}
#topBarRight {
    position: absolute;
    width: 80px;
    height: 46px;
    right: 0px;
    top: 0px;
    font-size: 11px;
}
#topBarRight div {
    cursor: pointer;
    font-family: var(--btFont);
}
#topBarRight img {
    position: relative;
    top: 3px;
    height: 14px;
    width: 14px;
}
#settingsButton {
    padding-right: 15px;
    padding-top: 6px;
    padding-bottom: 4px;
    padding-left: 5px;
}
#settingsButton.open {    
    background: rgba(42, 63, 62, 0.9);
    color:  rgba(255, 255, 255, 0.7);
}
#actionsButton {
    padding-right: 15px;
    padding-left: 2px;
    padding-bottom: 10px;
    padding-left: 5px;
}
#actionsButton.open {    
    background: rgba(42, 63, 62, 0.9);
    color:  rgba(255, 255, 255, 0.7);
}
#footerHelp.open {    
    background: rgba(42, 63, 62, 0.9);
    color:  rgba(255, 255, 255, 0.7);
}

/* Set version of icon based on theme, light icon for dark theme */
#settingsIcon.DARK {
    content:url("resources/settingsIconLight.png");
}
#settingsIcon.LIGHT {
    content:url("resources/settingsIcon.png");
}
#actionsIcon.DARK {
    content:url("resources/actionsIconLight.png");
}
#actionsIcon.LIGHT {
    content:url("resources/actionsIcon.png");
}

#search_entry {
    position: absolute;
    left: 75px;
    top: 12px;
    border: none;
    width: calc((100% - 190px) * 0.9);
    color: var(--btInputForeground);
    background: var(--btInputBackground);
    border-radius: 12px;
    box-shadow: inset 1px 1px 2px rgba(0, 0, 0, 0.5);
    margin-left: 5px;
    padding-left: 15px;
    height: 25px;
}

#searchCancelButton {
    position: absolute;
    cursor: pointer;
    top: 17px;
    left: 62px;
}
#searchUpBtn {
    position: absolute;
    cursor: pointer;
    top: 12px;
    left: calc((100% - 155px) * 0.9 + 72px);
}
#searchDownBtn {
    position: absolute;
    cursor: pointer;
    top: 25px;
    left: calc((100% - 155px) * 0.9 + 72px);
}
.searchButton {
    display: none;
}
    
.hint {
    /* alex */
    font-family: var(--btFont);
    font-style: var(--btNoteFontWeight);
    font-weight: var(--btNoteFontWeight);
    font-size: var(--btNoteFontSize);
    line-height: var(--btPageLineHeight);
    color: var(--btHintColor);
    z-index: 3;
}
.searchHint {
    position: absolute;
    top: 18px;
    left: 90px;
}
.hintText {
    position: relative;
    top: -4px;
}
#newTopLevelTopic {
    position: fixed;
    top: 54px;
    width: 100%;
    height: 28px;
    text-align: center;
    background: #2A3F3E;
    color: #85E20E;
    cursor: pointer;
    font-family: var(--btFont);
    font-size: var(--btTopicFontSize);
    z-index: 2;
}
#newTopic {
    position: relative; 
    top: 1px;
}
#newTopicNameHint {
    position: absolute;
    left: 10px;
    top: 4px;
}
#nameHint {
    position: relative;
    top: 3px;
    left: -20px;
}
#resizer {
    cursor: col-resize;
    position: absolute;
    top: 15px;
    left: calc(50% - 13px);  /* Center accounting for font width*/
    font-size: 11px;
    opacity: 50%;
}

/* style when input is active */
:focus-visible, button:not([disabled]):hover, input[type="text"]:not([disabled]):hover, textarea:not([disabled]):hover, .introNavButton:hover, .introButton:hover {
    outline-width: 1px;
    outline-color: var(--btButtonHighlight);
    outline-style: groove;
}
button:not([disabled]):hover, textarea:not([disabled]):not(:focus):hover, input[type="text"]:not([disabled]):not(:focus):hover {
    cursor: pointer;
}
textarea:focus, input[type="text"]:focus {
    cursor:text;
}
.highlight {
    background-color: #85E20E;
}
.extendedHighlight {
    background-color: #85E20EAA;
}
.failed {
    background-color: #E59A98 !important;
}

#trialExpiredWarning {
    position: fixed;
    top: 79px;
    border: solid;
    border-width: 1px;
    border-color: grey;
    z-index: 1;
    display: none;
}
#trialExpiredWarning .panelClose {
    margin-top: 7px;
    right: 10px;
}
#nagHeading {
    background-color: #CA4141;
    height: 40px;
    color: white;
    font-family: var(--btFont);
    font-size: var(--btTopicFontSize);
    text-align: center;
    line-height: 40px;
}

#nagContent {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 10px;
    background-color: #E2E2E2;
}

#BTTrialBuddy {
    height: 50px;
    margin-right: 20px;
}

#nagText {
    flex-grow: 1;
    font-family: var(--btFont);
    font-size: 12px;
    padding-right: 10px;
    color: #8E9EA0;
}
/*
 * BT Settings
 */

.settingsActions {
    display: none;
    position: fixed;
    width: 100%;
    top: 26px;
    padding-top: 15px;
    padding-bottom: 15px;
    border-top: 1px solid black;
    border-bottom: 2px solid black;
    background: rgba(43, 63, 62, 0.85); /* rgba(42, 63, 62, 0.95); */
    font-family: var(--btFont);
    font-size: 14px;
    font-weight: 400;
    color: #ffffff;
    text-align: center;
    z-index: 3;
    max-height: 80%;
    overflow-y: scroll;
}
#settings {    
    top: 26px;
}
#actions {
    top: 52px;
    height: 200px;
}
.settingsActions hr {
    margin-top: 7px;
    margin-bottom: 7px;
    border: none;
    border-top: 1px solid rgba(255, 255, 255, 0.4);
    margin-left: 25px;
    margin-right: 25px;
}
.settingsTitle {
    font-size: var(--btTitleFontSize);
    font-weight: var(--btTitleFontWeight);
    line-height: var(--btTitleLineHeight);
    margin-bottom: 15px;
}
.settingsSubtitle {
    font-size: var(--btSubtitleFontSize);
    font-weight: var(--btSubtitleFontWeight);
    line-height: var(--btSubtitleLineHeight);
}
.settingsFootnote {
    font-size: var(--btFootnoteFontSize);
    font-weight: var(--btFootnoteFontWeight);
    line-height: var(--btFootnoteLineHeight);
    color: rgba(255, 255, 255, 0.6);
    margin-top: 8px;
}
#importKey {
    color: #a0ec5f;
    margin-top: 5px;
    cursor: pointer;
}
.settingsSubText {   
    font-size: var(--btSettingsSubtextFontSize);
    font-weight: var(--btSettingsSubtextFontWeight);
    line-height: var(--btSettingsSubtextLineHeight);
    color: var(--btSettingsSubtextFontColor);
    margin-top: 15px;
    margin-bottom: 15px;
}
#settingsBackups {
    margin-top: 10px;
    font-size: 12px;
    opacity: 0.6;
}
#settingsBackups input {
    position: relative;
    top: 2px;
}
#youShallNotPass {
    position: absolute;
    width: 98%;
    height: 450px;
    top: 242px;left: 3px;
    z-index: 5;
    background-color: #888;
    opacity: 50%;
    border: solid;
    border-width: 2px;
    border-color: #DDD;
    display: none;
}
#warningBanner {
    position: relative;
    top: 40px;
    font-size: 80px;
    transform: rotate(-45deg);
}
#help {
    position: fixed;
    bottom: 26px;
    top: auto;
    max-height: 60%;
    overflow-y: auto;
}
#help .settingsSubtitle {
    font-size: 12px;
    cursor: pointer;
}
#help .helpAction:hover {
    color: #a0ec5f;
}
    
#BTVersion {
    font-size: 10px;
    margin-top: -12px;
    margin-bottom: -3px;
}
.settingsInput {
    display: flex;
    justify-content: space-evenly;
    margin-top: 5px;
    margin-bottom: 10px;
}
.settingsInput span {
    cursor: default;
}
#settings input {
    accent-color: #272F30; /* #3C4749; */
}
#settings input[type="radio"]:not(:checked) {
    cursor: pointer;
}
#settingsSubscription button {
    height: 35px;
    width: 24%;
    background: linear-gradient(180deg, #A0EC5F 0%, #55BA00 100%);
    border-radius: 5px;
    font-size: var(--btSubtitleFontSize);
    font-weight: var(--btTitleFontWeight);
    color: white;
    border: none;
    cursor: pointer;
}
#settingsSubscription button.subButton {
    background: linear-gradient(180deg, rgba(160, 236, 95, 0.8) 0%, rgba(85, 186, 0, 0.8) 100%) !important;
}
#settingsSubscription button.subButton:hover {
    outline-width: 1px;
    outline-color: white;
    outline-style: groove;
}
#actionsSyncStatus button {
    height: 30px;
    width: 30%;
    background: var(--btFooterBackground);
    border-radius: 1px;
    font-size: var(--btTopicFontSize);
    font-weight: var(--btSubtitleFontWeight);
    color: var(--btTooltipBackground);
    border: none;
}
#settingsSubscription a {
    color: #a0ec5f; 
}
.dropdown_text {    
    color: var(--btTooltipBackground);
}

/* 
 * Row Buttons
 */

#buttonRow {
    position: absolute;
    padding-right: 0px;
    border-radius: 0px;
    cursor: pointer;
    right: 2px;
    height: calc(var(--btRowHeight) - 2px);
    display: flex;
    align-items: center;
}
.rowButton {
    height: 28px;
    width: 26px;
    border: 1px solid var(--btTopicBackground);
    padding: 0px;
    margin-left: -2px;
    margin-right: -2px;
    /* margin-top: var(--btRowButtonMarginTop); */
    background-color: var(--btRowButtonBackground);
}

#tools {
    border-color: white;
    filter: invert(1);
}
#tools.toggled {
    border-color: var(--btTopicBackground);
    filter: invert(0);
}

/* 
 * Card editor
 */

#editOverlay {
  display: none; /* Hidden by default */
  position: fixed; /* Stay in place */
  z-index: 5; /* Sit on top */
  left: 0;
  top: 0;
  width: 100%; /* Full width */
  height: 100%; /* Full height */
  overflow: auto; /* Enable scroll if needed */
  background-color: #00000040;
  backdrop-filter: blur(1px);
}

#dialog{
    border-radius: 3px;
    padding: 10px 30px 20px 30px;
    margin-top: 0px;
    position: fixed;
    background: var(--btDialogBackground);
    color: var(--btControlsHeaderPrimaryColor);
    display: flex;
    flex-direction: column;
    gap: 8px;
}

#grant {
    color: var(--btControlsHeaderPrimaryColor);
}

#dialog textarea {
    resize: none;
    width: 100%;
    border: 1px solid #ddd;
    border-radius: 2px;
    background: var(--btTextAreaBackground);
    color: var(--btColor);
    font-size: 11px;
    margin-top: 10px;
}
#textText {
    flex-grow: 1;
}
#dialog input {
    border: 1px solid #ddd;
    width: 100%;
    border-radius: 2px;
    font-family: var(--btControlsFont);
    background: var(--btTextAreaBackground);
    color: var(--btColor);
}
#dialog #titleText,#topicName {
    white-space: nowrap;
}
#titleUrl {
    height: 2em;
    font-size: 0.6em;
    font-style: italic;
}
#distinguishedName {
    font-family:var(--btControlsFont);
    white-space: nowrap;
    text-align: center;
    overflow: scroll;
    padding-bottom: 10px;
}
#topic {
    position: relative;
    top: 10px;
}
#dialog button {
    border: none;
    height: 30px;
    width: 40%;
    border-radius: 5px;
    color: var(--btTooltipForeground);
}
#update {
    background-color: #58BA00;
    margin-right: -5px;
}
#update:disabled {
    background-color: var(--btButtonBackground);
}
#cancel {
    background-color: #ff5555c8;
}

/* 
 * Intro slides
 */

#intro {
    border-radius: 8px;
    border-style: solid;
    border-color: var(--btSlideTextColor);
    width: calc(100% - 16px);
    max-width: 460px;
    position: absolute;
    top: 8px;
    left: 50%;                      /* Center*/
    transform: translateX(-50%);    /* Shift the element back by half its width */
    height: 555px;
    background: white;
    font-family: var(--btFont);
}
#slide {
    width: 80%;
    margin-left: 10%;
    margin-top: 25px;
    color: var(--btSlideTextColor);
    text-align: center;
    font-size: var(--btSubtitleFontSize);
}
#slide p {
    margin-top: 7px;
    margin-bottom: 7px;
}
#slideHeader {
    background-color: var(--btSlideHeaderBackground);
    border-top-left-radius: 8px;
    border-top-right-radius: 8px;
}
#headerImage {
    width: 100%;
    height: 100%;
    object-fit: contain;
    position: relative;
    left: -190px;
}
#introClose {
    position: absolute;
    top: 10px;
    right: 10px;
    cursor: pointer;
}
#introTitle {
    text-align: center;
    width: 100%;
    position:relative;
    top: -45px;
    color: #0C4F6B;
    font-weight: var(--btTitleFontWeight);
    font-size: var(--btTitleFontSize);
}
#introSubtitle {
    width: 100%;
    text-align: center;
    position: relative;
    top: -38px;
    font-size: 11px;
    font-weight: 400;
    color: #808285;
}
.introImage {
    width: 100%;
    height: 100%;
    object-fit: contain;
}
.introNavButton {
    position: absolute;
    width: 35%;
    height: 38px;
    bottom: 20px;
    background: linear-gradient(180deg, #C3CBCB 0%, #C3CBCB 73.44%, #C8CFD0 100%);
    border-radius: 10px;
    text-align: center;
    color: white;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    font-weight: 500;
    letter-spacing: 0.05em;
}

#introNext {
    right: 40px;
}
#introPrev {
    left: 40px;
}
#introNext- {
    /* caret >> indicator png */
    position: relative;
    left: 45px;
}
#introPrev- {
    position: relative;
    left: -105px;
}


#introButtons {
    display:flex;
    justify-content: center;
    align-items: center;
    flex-direction: column;
    margin-top: 10px;
    display: none;
}
.introButton {
    width: 235px;
    height: 60px;
    background: linear-gradient(180deg, #A0EC5F 0%, #79D22E 100%);
    border-radius: 15px;
    margin-top: 20px;
    cursor: pointer;    
    font-family: 'Roboto';
    font-style: normal;
    font-weight: 700;
    font-size: 14px;
    line-height: 18px;
    display: flex;
    align-items: center;
    justify-content: center;
    color: #486543;
}

#slideFooter {
    position: absolute;
    cursor: pointer;
    bottom: 0px;
    left: 25%;
    font-size: 15px;
    color: #636363;
    display: none;
}
#dontShow {
    position: relative;
    top: 5px;
    display: none;
}
    
/* 
 * Key commands under Help
 */

#keyCommandsTable {
    font-size: var(--btSettingsLineHeight);
    margin-left: auto;
    margin-right: auto;
}
#keyCommands .keyCol {
    margin-left: auto;
    margin-right: auto;
    text-align: left;
}

#keyCommands .verticalCol {
    writing-mode: vertical-rl;
    text-align: center;
    padding-right: 10px;
}

.row_divider {
    border-bottom: solid;
    border-width: 1px;
    border-color: grey;
}

.panelClose {
    position: fixed;
    cursor: pointer;
    right: 15px;
    filter: invert(1);
}
#youShallNotPass .panelClose {
    top: 277px;
}

/* split button for import/export */
.button_text {
    font-size: var(--btTopicFontSize);
    font-weight: var(--btSubtitleFontWeight);
    color: rgba(42, 63, 62, 0.85);
}
.split_image {
    opacity: 0.8;
    margin-top: 0px;
    height: 20px;
    width: 20px;
}

#permissions {
    background-color: var(--btNoteColor);
    color: var(--btTooltipForeground);
}

#actions button, #permissions button {
    height: 30px;
    width: 100%;
    background: var(--btFooterBackground);
    border-radius: 1px;
    border: none;
    padding: 5px 5px 5px 8px;
}
#actions button:hover, #permissions button:hover {
    background-image: none;
    background-color: #a0ec5f;
}
#actionsSyncStatus button {
    width: 30%;
}
.dropdown_button {
    border-radius: 1px 1px 0px 0px;
}   
.dropdown_text {
    float: left;
    margin-top: 3px;
}
.button_image_wrapper {
    float: right;
}

.dropdown {
    display: inline-block;
    width: 30%;
}

.dropdown_content {
    display: none;
    position: absolute;
    text-align: left;
    background-color: #eee;
    border: solid 1px rgba(42, 63, 62, 0.9);
    border-radius: 0px 1px 1px 1px;
    z-index: 1;
    width: 27%;
    transform: translate(-1px, -1px);
}

.dropdown_content a {
    text-decoration: none;
    float: left;
}
.dropdown_content label {
    float: left;
    cursor: pointer;
}
.dropdown_content div {  
    cursor: pointer;
    float: left;
    padding: 5px 0px 5px 5px;
    width: calc(100% - 5px);
}
.dropdown_content div:hover {background-color: #a0ec5f;}
.dropdown:hover .dropdown_content {
    display: block;
}
/* end split button*/

#content {
    background-color: var(--btInputBackground);
}

body.waiting * {
    cursor: progress !important;
}

#backgroundLogo {
    position: fixed;
    width: 100px;
    height: 100px;
    left: calc(50% - 100px/2);
    top: calc(50% - 100px/2 + 0.5px);
    z-index: -1;
}

/* 
 * Tip Container
 */

#messageContainer {
    display: none;
    position: fixed;
    bottom: 30px;
    width: 100%;
    height: 40px;
    background: var(--btTipBackground); 
    font-family: Roboto;
    font-weight: 400;
    font-size: 11px;
    color: #59718C; 
    text-align: center;
    padding-top: 5px;
    padding-bottom: 5px;
}
#message {
    padding: 0px 20px 0px 20px;
}
#messageClose {
    position: absolute;
    cursor: pointer;
    top: 7px;
    left: 8px;
}
#messageNext {
    position: absolute;
    cursor: pointer;
    top: 7px;
    right: 8px;
}
#messageContainer.warning {
    background: var(--btWarningBackground);
    color: #fff;
}
#messageContainer.message {
    background: var(--btMessageBackground);
    color: #954073;
}
#messageContainer.tip > img {
    filter : hue-rotate(180deg);
}
#message .emoji {
    font-size: 18px;
    vertical-align: middle;
}
#message a {
    color: initial;
}
/* 
 * Footer
 */

#footer {
    position: fixed;
    bottom: 0px;
    width: 100%;
    height: 30px;
    background-image: var(--btFooterBackground); 
    font-family: Roboto;
    font-weight: 400;
    line-height: 11px;
    color: var(--btColor);
}
#footerSavedIcon {
    position: absolute;
    width: 16px;
    height: 16px;
    left: 16px;
    top: 6px;
}
#footerSavedInfo {
    position: absolute;
    height: 11px;
    left: 38px;
    top: 9px;
    font-size: 10px;
}
#footerHelp {
    cursor: pointer;
    position: absolute;
    right: 0px;
    font-size: 11px;
    
    padding-right: 15px;
    padding-bottom: 6px;
    padding-left: 5px;
    margin-top: 2px;
}
#footerHelpIcon {
    position: relative;
    top: 4px;
    left: 3px;
}
#footerHelpIcon.DARK {
    content:url("resources/helpLight.png");
}
#footerHelpIcon.LIGHT {
    content:url("resources/help.png");
}
#footerInfo {
    position: absolute;
    height: 12px;
    left: calc(50% - 138px/2 + 39px);
    top: 9px;
    font-size: 10px;
}
#footerOpenInfo {
    color: var(--btOpenInfo);
}

.left > img {
    height: 12px;
    width: 12px;    
    top: 2px;
}

img.faviconOn {
    display: inline;
}
img.faviconOff {
    display: none;
}

.tabgroup {
    padding: var(--btTabgroupPadding); 
    border-radius: 5px;
}
.tggrey {
    background: grey;
    color: white !important;
}
.tgblue {
    background: rgb(24, 89, 226);
    color: white !important;
}
.tgred {
    background: rgb(206, 26, 29);
    color: white !important;
}
.tgyellow {
    background: rgb(247, 155, 6);
    color: black !important;
}
.tggreen {
    background: green;
    color: white !important;
}
.tgpink {
    background: rgb(194, 0, 113);
    color: white !important;
}
.tgpurple {
    background: rgb(142, 28, 240);
    color: white !important;
}
.tgcyan {
    background: rgb(14, 104, 111);
    color: white !important;
}
.tgorange {
    background: orange;
    color: black !important;
}