.GiveMeIdeasButton {
    white-space: nowrap;
}

.SaveThisIdeaButton {
    white-space: nowrap;
}

#ViewSavedIdeasButton {
    margin-bottom: 0px;
}

#ButtonCenteringSaveIdea {
    text-align: center;
    margin-top: 14px;
    margin-bottom: 11px;
}

#ButtonCentering {
    text-align: center;
    margin-top: 14px;
}

#ButtonCentering2 {
    Display: flex;
    justify-content: center;
}

#ButtonCentering2v1 {
    max-width: 10%;
    min-width: 10%;
    margin-right: 10px;
    display: flex;
}

.hide-stuff-arrow-2 {
    display: none !important;
    color: #ffffff !important;
}

#ButtonCentering2v2 {
    Display: flex;
    Justify-content: center;
}

#ButtonCentering2v3 {
    max-width: 10%;
    min-width: 10%;
    margin-left: 10px;
    display: flex;
    align-items: center;
}

#ButtonCentering3 {
    Display: flex;
    justify-content: center;
    margin-bottom: 30px;
    padding-left: 14px;
    padding-right: 14px;
}

#ButtonCentering3v1 {
    max-width: 10%;
    min-width: 10%;
    margin-right: auto;
    display: flex;
}

#ButtonCentering3v2 {
    Display: flex;
}

#ButtonCentering3v3 {
    max-width: 10%;
    min-width: 10%;
    margin-left: auto;
    display: flex;
    align-items: center;
}

.hide-stuff-arrow {
    color: #ffffff;
    visibility: hidden;
    font-size: 18px !important;
}

.hide-stuff-arrow-3 {
    color: #ffffff;
    visibility: hidden;
    font-size: 18px !important;
}

.user-scrolled-down.button-got-clicked {
    color: rgb(180, 180, 180);
    cursor: pointer;
}

.user-scrolled-down.button-got-clicked:hover {
    color: #1b1b1b;
}

.is-pinned-4 {
    color: #ccc !important;
}

#ButtonSubtext {
    text-align: center;
    margin-top: -10px;
    display: none;
}

#ButtonSubtext2 {
    text-align: center;
    margin-top: -10px;
    display: none;
}

#SavedTweetText {
    text-align: center;
}

#SaveNotification {
    text-align: center;
    font-style: italic;
}

h3 {
    text-align: center;
    white-space: nowrap;
    margin-left: 40px;
    margin-right: 40px;
}

h2 {
    text-align: center;
}

#HideAllSavedIdeas {
    display: none;
}

.GiveMeIdeasButton {
    display: inline-block;
    outline: 0;
    border: 0;
    cursor: pointer;
    transition: box-shadow 0.15s ease,transform 0.15s ease;
    will-change: box-shadow,transform;
    background: #FCFCFD;
    box-shadow: 0px 2px 4px rgb(45 35 66 / 40%), 0px 7px 13px -3px rgb(45 35 66 / 30%), inset 0px -3px 0px #d6d6e7;
    height: 38px;
    padding: 0 16px;
    font-size: 16px;
    border-radius: 6px;
    color: #36395a;
    transition: box-shadow 0.15s ease,transform 0.15s ease;
}

.GiveMeIdeasButton:hover {
    box-shadow: 0px 4px 8px rgb(45 35 66 / 40%), 0px 7px 13px -3px rgb(45 35 66 / 30%), inset 0px -3px 0px #d6d6e7;
    transform: translateY(-2px);
}

.GiveMeIdeasButton:active {
    box-shadow: inset 0px 3px 7px #d6d6e7;
    transform: translateY(2px);
}

.SaveThisIdeaButton {
    display: inline-block;
    outline: 0;
    border: 0;
    cursor: pointer;
    transition: box-shadow 0.15s ease,transform 0.15s ease;
    will-change: box-shadow,transform;
    background: #FCFCFD;
    /* box-shadow: 0px 2px 4px rgb(45 35 66 / 40%), 0px 7px 10px -3px rgb(45 35 66 / 30%), inset 0px -3px 0px #d6d6e7; */
    box-shadow: 0px 2px 5px rgb(45 35 66 / 40%), 0px 2px 5px -3px rgb(45 35 66 / 30%), inset 0px -2px 0px #d6d6e7;
    height: 28px;
    padding: 0 10px;
    font-size: 10px;
    border-radius: 6px;
    color: #36395a;
    transition: box-shadow 0.15s ease,transform 0.15s ease;
}

.SaveThisIdeaButton:hover {
    /* box-shadow: 0px 4px 8px rgb(45 35 66 / 40%), 0px 7px 13px -3px rgb(45 35 66 / 30%), inset 0px -3px 0px #d6d6e7; */
    box-shadow: 0px 3px 7px rgb(45 35 66 / 40%), 0px 3px 7px -3px rgb(45 35 66 / 30%), inset 0px -3px 0px #d6d6e7;
    transform: translateY(-2px);
}

.SaveThisIdeaButton:active {
    box-shadow: inset 0px 3px 7px #d6d6e7;
    transform: translateY(2px);
}

.SaveThisIdeaButton2 {
    display: inline-block;
    outline: 0;
    border: 0;
    cursor: pointer;
    transition: box-shadow 0.15s ease,transform 0.15s ease;
    will-change: box-shadow,transform;
    background: #FCFCFD;
    /* box-shadow: 0px 2px 4px rgb(45 35 66 / 40%), 0px 7px 10px -3px rgb(45 35 66 / 30%), inset 0px -3px 0px #d6d6e7; */
    box-shadow: 0px 2px 5px rgb(45 35 66 / 40%), 0px 2px 5px -3px rgb(45 35 66 / 30%), inset 0px -2px 0px #d6d6e7;
    height: 28px;
    padding: 0 10px;
    font-size: 10px;
    border-radius: 6px;
    color: #36395a;
    transition: box-shadow 0.15s ease,transform 0.15s ease;
    margin-right: -4px;
}

.SaveThisIdeaButton2:hover {
    /* box-shadow: 0px 4px 8px rgb(45 35 66 / 40%), 0px 7px 13px -3px rgb(45 35 66 / 30%), inset 0px -3px 0px #d6d6e7; */
    box-shadow: 0px 3px 7px rgb(45 35 66 / 40%), 0px 3px 7px -3px rgb(45 35 66 / 30%), inset 0px -3px 0px #d6d6e7;
    transform: translateY(-2px);
}

.SaveThisIdeaButton2:active {
    box-shadow: inset 0px 3px 7px #d6d6e7;
    transform: translateY(2px);
}

.ShitTestIdeasButton {
    display: inline-block;
    outline: 0;
    border: 0;
    cursor: pointer;
    transition: box-shadow 0.15s ease,transform 0.15s ease;
    will-change: box-shadow,transform;
    background: #FCFCFD;
    box-shadow: 0px 2px 4px rgb(45 35 66 / 40%), 0px 7px 13px -3px rgb(45 35 66 / 30%), inset 0px -3px 0px #d6d6e7;
    height: 38px;
    padding: 0 16px;
    font-size: 16px;
    border-radius: 6px;
    color: #36395a;
    transition: box-shadow 0.15s ease,transform 0.15s ease;
}

.ShitTestIdeasButton:hover {
    box-shadow: 0px 4px 8px rgb(45 35 66 / 40%), 0px 7px 13px -3px rgb(45 35 66 / 30%), inset 0px -3px 0px #d6d6e7;
    transform: translateY(-2px);
}

.ShitTestIdeasButton:active {
    box-shadow: inset 0px 3px 7px #d6d6e7;
    transform: translateY(2px);
}

.ViewSavedIdeasButton {
    display: inline-block;
    outline: 0;
    border: 0;
    cursor: pointer;
    transition: box-shadow 0.15s ease,transform 0.15s ease;
    will-change: box-shadow,transform;
    background: #FCFCFD;
    box-shadow: 0px 2px 4px rgb(45 35 66 / 40%), 0px 7px 13px -3px rgb(45 35 66 / 30%), inset 0px -3px 0px #d6d6e7;
    height: 38px;
    padding: 0 16px;
    font-size: 16px;
    border-radius: 6px;
    color: #36395a;
    transition: box-shadow 0.15s ease,transform 0.15s ease;
}

.ViewSavedIdeasButton:hover {
    box-shadow: 0px 4px 8px rgb(45 35 66 / 40%), 0px 7px 13px -3px rgb(45 35 66 / 30%), inset 0px -3px 0px #d6d6e7;
    transform: translateY(-2px);
}

.ViewSavedIdeasButton:active {
    box-shadow: inset 0px 3px 7px #d6d6e7;
    transform: translateY(2px);
}

#ShitTestQuestionText {
    text-align: center;
    margin-top: 0px;
    margin-bottom: 0px;
    font-family:'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
    font-size: 15px; 
    display: block;
    padding-top: 24px;
    display: none;
    font-weight: bold;
}

#ShitTesting {
    color: black;
}

.ShitTestingScroll {
    color: black;
}

.myElement {
    font-family:'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
    font-size: 13px; 
    margin-left: auto;
    margin-right: auto;
    max-width: 400px;
    padding-left: 14px;
    padding-right: 14px;
    padding-bottom: 24px;
    margin-bottom: 4px;
    /* transition: ease all .2s; */
}

#ButtonCentering3Div {
    font-family:'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
    font-size: 13px; 
    margin-left: auto;
    margin-right: auto;
    max-width: 280px;
}

.myElement.is-pinned {
    font-family:'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
    font-size: 13px; 
    margin-left: auto;
    margin-right: auto;
    max-width: 400px;
    padding-left: 14px;
    padding-right: 14px;
    padding-bottom: 24px;
    margin-bottom: 4px;
    box-shadow: 0px 5px 3px -3px rgb(0 0 0 / 30%) !important;
    transition: ease all .2s;
}

.myElement2.is-pinned-2 {
    box-shadow: 0px -5px 3px -3px rgb(0 0 0 / 25%) !important;
    transition: ease all .2s;
}

.myElement3.text-selected.is-pinned-3 {
    box-shadow: 0px -5px 3px -3px rgb(0 0 0 / 25%) !important;
    transition: ease all .2s;
}

.myElement5.is-pinned-5 {
    box-shadow: 0px -5px 3px -3px rgb(0 0 0 / 25%) !important;
    transition: ease all .2s;
}

#StuffOnVeryBottom {
    position: sticky;
    bottom: -1px;
    background-color: #ffffff;
    padding-bottom: 27px;
    max-width: 500px;
    margin-left: auto;
    margin-right: auto;
    z-index: 3;
    box-shadow: 0px -5px 3px -3px rgb(0 0 0 / 25%) !important;
    transition: ease all .2s;
}

#StuffOnVeryBottom.is-pinned-2 {
    background-color: #ffffff;
}

#ShitTesting2 {
    margin-left: auto;
    margin-right: auto;
}



.close {
    display: inline-block;
    outline: 0;
    appearance: none;
    padding-left: 0px;
    padding-right: 0px;
    border-radius: 0px;
    text-decoration: none;
    cursor: pointer;
    background-color: rgb(255 255 255);
    border: 0px;
    /* box-shadow: rgb(6 22 33 / 30%) 0px 1px 2px; */
    color: rgb(110, 110, 110);
    font-size: 14px !important;
    font-weight: 500;
    height: 22px;
    /* transition: all 150ms ease-in-out 0s; */
    width: 22px;
}

.close:hover {
    color: rgb(0 0 0);
}

#ButtonsOnBottomP {
    text-align: center;
}

#LowerButton1, #LowerButton2, #LowerButton3 {
    float: left;
    width: 33.3333%;
    margin-left: 0px;
    margin-right: 0px;
    padding-left: 0px;
    padding-right: 0px;
}

#HideStuff {
    font-size: 10px;
    font-family:'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
    white-space: nowrap;
    width: 90%;
    margin-left: 6.66%;
    margin-right: 3.33%;
    margin-bottom: 5px;
    cursor: pointer;
}

#Feedback {
    font-size: 10px;
    font-family:'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
    white-space: nowrap;
    width: 90%;
    margin-left: 5%;
    margin-right: 5%;
    margin-bottom: 5px;
    cursor: pointer;
}

#Help {
    font-size: 10px;
    font-family:'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
    white-space: nowrap;
    width: 90%;
    margin-left: 3.33%;
    margin-right: 6.66%;
    margin-bottom: 5px;
    cursor: pointer;
}

body {
    margin-left: 0px;
    margin-right: 0px;
    margin-top: 0px;
    margin-bottom: 0px;
    min-width: 300px;
    font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
    font-size: 12px;
}

#CreateAccountText, #LoginAccountText, #LogOutText, #AccountText {
    color:rgb(3, 0, 172);
    font-weight: 500;
    font-size: 11px;
    cursor: pointer;
}

#CreateAccountText:hover, #LoginAccountText:hover, #LogOutText:hover, #AccountText:hover {
    text-decoration: underline;
}

#ButtonsOnTop {
    min-width: 100%;
    display: flex;
    margin-bottom: 0px;
}

#AccountButtons {
    display: flex;
    flex-grow: 1;
    padding-top: 4px;
    padding-left: 8px;
    padding-right: 4px;
    justify-content: flex-end;
}

#TopButton1, #TopButton2, #TopButtonSlash1 {
    display: flex;
} 

#TopButtonSlash1 {
    margin-left: 3px;
    margin-right: 3px;
}

#CreateAccountButton, #LoginAccountButton {
    float: right;
    margin-top: 4px;
    margin-bottom: 10px;
    font-size: 12px;
    cursor: pointer;
}

#MainTitle {
    display: inline-block;
    min-width: 100%;
}

#TitleHeadline {
    margin-bottom: 10px;
    margin-top: 6px;
    font-size: 20px;
    text-align: center;
    text-decoration: underline;
}

#FormInputs1, #CreateAccountForm1, #FormInputs2, #CreateAccountForm2 {
    width: 100%;
    display: none;
}

#FormInputHolder {
  min-width: 300px;
  padding-left: 0px;
  padding-right: 0px;
  max-width: 300px;
  margin-left: auto;
  margin-right: auto;
}

#inputemail1, #inputpassword1 {
    width: 100%;
    box-sizing: border-box;
    margin-top: 4px;
    margin-bottom: 4px;
}

#inputemail2, #inputpassword2 {
    width: 100%;
    box-sizing: border-box;
    margin-top: 4px;
    margin-bottom: 4px;
}

#labelemail, #labelpassword {
    font-size: 12px;
}

#ButtonsOnTop2 {
    min-width: 100%;
}

#TopButton3 {
    width: 50%;
    float: left;
} 

#TopButton4 {
    width: 50%;
    float: left;
}

#CreateAccountButton, #LoginAccountButton {
    float: right;
    margin-top: 4px;
    margin-bottom: 10px;
    font-size: 11px;
}

#HexColorTesting {
    background: #66f2ff !important;
}

#UserInfoHolder {
    text-align: center;
    margin-bottom: 12px;
}

#UserAccountInfo {
    display: none;
}

#UpgradeOption {
    font-size: 12px;
    margin-top: 9px;
    border-radius: 4px;
    box-shadow: 0 2px 5px 0 rgb(213 217 217 / 50%);
    background: #FFD814;
    border: 1px solid #b6b6b6;
    font-size: 12px;
    height: 31px;
    padding: 0 11px;
    text-align: center;
    font-weight: 600;
    color: #0F1111;
    cursor: pointer;    
}

#UpgradeOption:hover {
    background: #FFEF12;
    border-color: #b6b6b6;
    box-shadow: 0 2px 5px 0 rgb(213 217 217 / 50%);
    transition: all .1s ease;
}

#ShitTestingSticky {
    position: sticky;
    top: -1px;
    margin-top: 0px;
    padding-top: 18px;
    background: #ffffff;
    z-index: 2;
}

.input,
.textarea {
  border: 1px solid #ccc;
  font-family: inherit;
  font-size: inherit;
  padding: 1px 6px;
}

.textarea {
    display: block;
    width: auto;
    overflow: auto; /* dynamically creates a scroll bar, if needed, based on amount of text added */
    /* resize: both; */
    resize: vertical; /* allowers users to manually resize text box, within the min/max limits I've set */
    min-height: 100px;
    max-height: 160px;
    line-height: 16px;
    margin-left: 10px;
    margin-right: 10px;
    box-sizing: border-box; 
    margin-bottom: 0px;
  }
  
  .textarea[contenteditable]:empty::before {
    /* content: "Type here..."; */
    color: gray;
  }

.text-selected {
    position: sticky;
    bottom: 0px;
    background-color: #ffffff;
    padding-bottom: 10px;
    padding-top: 4px;
    margin-top: -1px;
    margin-bottom: 1px;
    z-index: 2;
}

#UserTextArea {
    bottom: -1px;
}

#SaveComments {
    display: none;
}

#SavedCommentConfirmation {
    display: none;
    color: gray;
    text-align: center;
    margin-bottom: 6px;
}

#HideComments {
    width: 90%;
    margin-left: auto;
    margin-right: auto;
    display: block;
    background: white;
    border-width: 0px;
    font-size: 10px;
    text-align: center;
    padding-right: 0px;
    padding-left: 0px;
    margin-bottom: 5px;
    margin-top: 7px;
    cursor: pointer;
}

#HideComments, .textarea {
    display: none;
}

#ShowComments {
    width: 100%;
    margin-left: auto;
    margin-right: auto;
    display: block;
    background: white;
    border-width: 0px;
    font-size: 10px;
    text-align: center;
    padding-right: 0px;
    padding-left: 0px;
    padding-bottom: 5px;
    padding-top: 7px;
    position: sticky;
    bottom: -1px;
    margin-top: -1px;
    margin-bottom: 1px;
    cursor: pointer;
}

.remove-symbol-1, .add-symbol-1 {
    font-size: 9px !important;
}

.x-button-1 {
    padding-left: 0px;
    padding-right: 0px;
    border-radius: 0px;
    cursor: pointer;
    color: rgb(130, 130, 130);
    font-size: 14px !important;
    max-height: 20px;
    min-height: 20px;
}

.arrow-down-1, .arrow-up-1 {
    padding-left: 0px;
    padding-right: 0px;
    border-radius: 0px;
    cursor: pointer;
    color: rgb(180, 180, 180);
    font-size: 20px !important;
    max-height: 20px !important;
    min-height: 20px !important;
    display: block !important;
}

.x-button-1:hover, .arrow-down-1:hover, .arrow-up-1:hover {
    color: rgb(0 0 0);
}

.SavedIdeaDivContainer {
    font-family:'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
    font-size: 13.5px; 
    margin-left: auto;
    margin-right: auto;
    max-width: 400px;
    /* padding-left: 20px;
    padding-right: 20px; */
    padding-top: 16px;
    padding-bottom: 16px;
    border-bottom: 1px solid #ccc;
}

#ArrowDiv {
    display: inline-block;
    /* display: none; will keep it like this until I figure out how to make the arrow rearranging work */
}

.IdeaTextDivParagraph {
    display: inline-block;
    padding-left: 3.5%;
    padding-right: 3.5%;
}


#IdeaTextDivs {
    max-width: 100%;
    display: flex;
    padding-top: 0px;
    text-align: left;
    padding-right: 2.5%;
    padding-left: 2.5%;
}

#DeleteIdeaDivs {
    display: inline-block;
    justify-content: flex-end;
    margin-left: auto;
}

#SavedIdeaPText {
    margin-top: 0px;
    text-align: left;
    margin-bottom: 0px;
}

.hide-shit-testing-1 {
    display: block !important;
    text-align: center !important;
}

#move-item-top, #move-item-bottom {
    display: none;
    padding-left: 0px;
    padding-right: 0px;
    border-radius: 0px;
    cursor: pointer;
    color: rgb(180, 180, 180);
    font-size: 20px !important;
    max-height: 20px !important;
    min-height: 20px !important;
}

/* testing drag and drop stuff */
  
.item.onDrag {
    /*transform: scale(1.05, 1.1);*/
    opacity: 1;
    background-color: #F5F5F5;
    box-shadow: 0 0 5px rgba(0, 0, 0, .1);
}
  
#itemClip {
    display: none;
}

#AddIdeas {
    width: 100%;
    margin-left: auto;
    margin-right: auto;
    display: none;
    background: white;
    border-width: 0px;
    font-size: 10px;
    text-align: center;
    padding-right: 0px;
    padding-left: 0px;
    cursor: pointer;
    max-width: 500px;
    margin-left: auto;
    margin-right: auto;
}

.input,
.textarea2 {
  border: 1px solid #ccc;
  font-family: inherit;
  font-size: inherit;
  padding: 1px 6px;
}

.textarea2 {
    display: none;
    width: auto;
    overflow: auto; /* dynamically creates a scroll bar, if needed, based on amount of text added */
    /* resize: both; */
    resize: vertical; /* allowers users to manually resize text box, within the min/max limits I've set */
    min-height: 60px;
    max-height: 160px;
    line-height: 16px;
    margin-left: 10px;
    margin-right: 10px;
    box-sizing: border-box; 
    margin-bottom: 0px;
    max-width: 500px;
    margin-left: auto;
    margin-right: auto;
  }
  
  .textarea2[contenteditable]:empty::before {
    /* content: "Type here..."; */
    color: gray;
  }

  #SaveAddedIdeaDiv {
    display: flex;
    justify-content: flex-end;
    max-width: 500px;
    margin-left: auto;
    margin-right: auto;
  }

  #SaveAddedIdeaButton {
    font-size: 10px;
    margin-right: 0px;
    margin-bottom: 2px;
    margin-top: 1%;
    display: none;
  }

  #IdeaCategories {
    margin-bottom: 2px;
    text-align: center;
    display: none;
  }

  .checkboxes label {
    display: inline-block;
    padding-right: 10px;
    white-space: nowrap;
  }
  .checkboxes input {
    vertical-align: middle;
  }
  .checkboxes label span {
    vertical-align: middle;
  }

  .checkboxes {
    padding-left: auto;
    padding-right: auto;
    margin-top: 14px;
  }

  #SelectCategoriesBox {
    display: flex;
    justify-content: center;
  }

  #SelectCategoriesMiddle {
    text-align:center
  }

  .GiveMeIdeasButton .tooltiptext {
    color: #979797;
    text-align: center;
    border-radius: 6px;
    font-size: 10px;
    position: absolute;
    z-index: 1;
    padding-left: 30px;
    padding-right: 0px;
    padding-top: 4px;
    padding-bottom: 0px;
    opacity: 0;
    transition: visibility 0s linear 300ms, opacity 300ms;
  }

  .GiveMeIdeasButton:hover .tooltiptext {
    opacity: 1;
    transition: visibility 0s linear 300ms, opacity 300ms;
  }

  .SaveThisIdeaButton .tooltiptext2 {
    color: #979797;
    text-align: center;
    border-radius: 6px;
    font-size: 10px;
    position: absolute;
    z-index: 1;
    padding-left: 24px;
    padding-right: 0px;
    padding-top: 0px;
    padding-bottom: 0px;
    opacity: 0;
    transition: visibility 0s linear 300ms, opacity 300ms;
  }

  .SaveThisIdeaButton:hover .tooltiptext2 {
    opacity: 1;
    transition: visibility 0s linear 300ms, opacity 300ms;
  }

  .SaveThisIdeaButton2 .tooltiptext5 {
    color: #979797;
    text-align: center;
    border-radius: 6px;
    font-size: 10px;
    position: absolute;
    z-index: 1;
    padding-left: 24px;
    padding-right: 0px;
    padding-top: 0px;
    padding-bottom: 0px;
    opacity: 0;
    transition: visibility 0s linear 300ms, opacity 300ms;
  }

  .SaveThisIdeaButton2:hover .tooltiptext5 {
    opacity: 1;
    transition: visibility 0s linear 300ms, opacity 300ms;
  }

  .ShitTestIdeasButton .tooltiptext3 {
    color: #979797;
    text-align: center;
    border-radius: 6px;
    font-size: 10px;
    position: absolute;
    z-index: 1;
    padding-left: 30px;
    padding-right: 0px;
    padding-top: 4px;
    padding-bottom: 0px;
    opacity: 0;
    transition: visibility 0s linear 300ms, opacity 300ms;
  }

  .ShitTestIdeasButton:hover .tooltiptext3 {
    opacity: 1;
    transition: visibility 0s linear 300ms, opacity 300ms;
  }

  .ViewSavedIdeasButton .tooltiptext4 {
    color: #979797;
    text-align: center;
    border-radius: 6px;
    font-size: 10px;
    position: absolute;
    z-index: 1;
    padding-left: 30px;
    padding-right: 0px;
    padding-top: 4px;
    padding-bottom: 0px;
    opacity: 0;
    transition: visibility 0s linear 300ms, opacity 300ms;
  }

  .ViewSavedIdeasButton:hover .tooltiptext4 {
    opacity: 1;
    transition: visibility 0s linear 300ms, opacity 300ms;
  }

  .tooltiptext, .tooltiptext2, .tooltiptext3, .tooltiptext4, .tooltiptext5 {
    pointer-events: none;
    white-space: nowrap;
  }

  #VolumeSlider {
    display: flex;
    justify-content: flex-end;
    flex-grow: 1;
  }

  #volume {
    display: flex;
    max-width: 100px;
    min-width: 40px;
    margin-top: 9px;
    height: 5px;
    margin-right: 7px;
  }

  .volume-mute {
    margin-right: -4px;
    font-size: 18px !important;
    color: #000000;
    padding-top: 2px;
  }

  .volume-up {
    display: none;
  }

  #IdeaTextContainer1 {
    text-align: left;
    margin-top: 4px;
    /* margin-bottom: 38px; */
    /* padding-left: 32px; */
    /* padding-right: 32px; */
    font-size: 14px;
  }

  #IdeaSummaryContainer1 {
    text-align: center;
    /* margin-top: 28px;*/
    margin-bottom: 0px;
    padding-left: 32px;
    padding-right: 32px;
    font-size: 14px;
  }

  #IdeaSummary {
    text-align: center;
    font-size: 13.5px;
    margin-bottom: 4px;
    font-weight: bold;
    color: #8b8b8b;
    margin-top: 14px;
}

#OriginalIdea {
    text-align: center;
    font-size: 13px;
    margin-bottom: 4px;
    font-weight: bold;
    color: #adadad;
    display: none;
}

  #IdeaTextParagraph {
    margin-top: 0px;
    margin-bottom: 6px;
    font-size: 16px;
    padding-right: 8px;
  }

  #IdeaSummaryParagraph {
    margin-top: 0px;
    font-size: 18px;
    font-weight: bold;
    margin-bottom: 0px;
  }

  #PointingDownArrow {
    text-align: center;
    font-size: 20px;
    margin-top: 0px;
    margin-bottom: 4px;
  }

  .input-container {
    display: flex;
    width: 400px;
    border: 1px solid #a9a9a9;
    border-radius: 2px;
    justify-content: space-between;
    padding-left: 6px;
    box-shadow: 0px 2px 5px 0px rgb(0 0 0 / 15%) !important;
    }
.input-container input:focus, .input-container input:active {
    outline: none;
}
.input-container input {
    border: none;
}

.input-holder-div {
    display: flex;
    justify-content: center;
    margin-bottom: 10px;
}

.input-field {
    font-size: 13px;
    width: 100%;
}

#SearchbarTitle1 {
    text-align: center;
    font-size: 13px;
    margin-bottom: 4px;
    font-weight: bold;
    margin-top: 10px;
}

#SearchbarTitle2 {
    text-align: center;
    font-size: 13.5px;
    margin-bottom: 4px;
    font-weight: bold;
    margin-top: 15px;
}

#DemandTitle {
    text-align: center;
    font-size: 13px;
    margin-bottom: 4px;
    font-weight: bold;
    margin-top: 0px;
}

#DemandText1 {
    margin-top: 8px;
    text-align: center;
    margin-bottom: 32px;
    padding-left: 32px;
    padding-right: 32px;
    font-size: 12px;
}

#IsThereDemand1 {
    display: none;
}

.idea-keywords-include, .idea-keywords-exclude {
    max-width: 200px;
}

.input-holder-div-2 {
    display: flex;
    justify-content: center;
    margin-bottom: 0px;
    box-shadow: 0px 2px 5px 0px rgb(0 0 0 / 25%) !important;
}

.input-holder-div-3 {
    display: flex;
    justify-content: center;
    margin-bottom: 0px;
    box-shadow: 0px 2px 5px 0px rgb(0 0 0 / 25%) !important;
}

#ActiveDemand1 {
    display: flex;
    justify-content: center;
    display: none;
}

#ActiveDemand2 {
    max-width: 50%; 
    min-width: 25%;
}

table {
    font-family: arial, sans-serif;
    border-collapse: collapse;
    width: 100%;
  }
  
  td, th {
    border: 1px solid #dddddd;
    text-align: center;
    padding: 8px;
  }
  
  tr:nth-child(even) {
    background-color: #dddddd;
  }

  #SpyFuAttribution {
    display: flex;
    justify-content: flex-end;
    font-size: 10px;
    margin-top: 3px;
  }

  #SpyFuImage {
    max-height: 1.4em;
    margin-left: 2px;
    margin-right: 4px;
  }

  .avator {
    border-radius:100px;
    width:48px;
    margin-right: 10px;
  }
  
  .tweet-wrap {
    max-width: 490px;
    background: #fff;
    margin: 0 auto;
    margin-top: 0px;
    border-radius: 3px;
    padding-left: 14px;
    padding-right: 10px;
    padding-top: 6px;
    padding-bottom: 22px;
    /* border-bottom: 1px solid #e6ecf0;
    border-top: 1px solid #e6ecf0;
    border-right: 1px solid #e6ecf0;
    border-left: 1px solid #e6ecf0; */
    border-bottom: 1px solid #cdd3d7;
    border-top: 1px solid #cdd3d7;
    border-right: 1px solid #cdd3d7;
    border-left: 1px solid #cdd3d7;
    font-family: 'Asap', sans-serif;
    font-family: 'Roboto', sans-serif;
    box-shadow: 0px 2px 5px 0px rgb(0 0 0 / 25%) !important;
  }
  
  .tweet-header {
    display: flex;
    align-items:flex-start;
    font-size:12px;
  }
  .tweet-header-info {
    font-weight:bold;
  }
  .tweet-header-info #user-account-name {
    color:#000000;
    font-weight: bold;
    margin-left: 0px;
  }
  .tweet-header-info #user-screen-name {
    color:#657786;
    font-weight: normal;
    margin-left: 0px;
  }
  .tweet-header-info p {
    font-weight:normal;
    margin-top: 5px;
    
  }
  .tweet-img-wrap {
    padding-left: 60px;
  }
  
  .tweet-info-counts {
    display: flex;
    margin-left: 60px;
    margin-top: 10px;
    justify-content: flex-start;
  }
  .tweet-info-counts .metrics {
    display: flex;
    margin-right: 20px;
  }
  .tweet-info-counts div svg {
    color:#657786;
    margin-right: 10px;
  }
  @media screen and (max-width:430px){
    body {
      padding-left: 20px;
      padding-right: 20px;
    }
    .tweet-header {
      flex-direction:column;
    }
    .tweet-header img {
      margin-bottom: 20px;
    }
    .tweet-header-info p {
      margin-bottom: 30px;
    }
    .tweet-img-wrap {
      padding-left: 0;
    }
    .tweet-info-counts {
    display: flex;
    margin-left: 0;
  }
  .tweet-info-counts div {
    margin-right: 10px;
  }
  }

  .created-at-datetime {
    display: flex;
    margin-left: auto;
    margin-right: 14px;
  }

  #twitter-reply-function, #twitter-like-function, #twitter-retweet-function {
    text-decoration: none;
    color: #000000;
    cursor: pointer;
  }

  #link-to-user-account, #link-to-user-account-2 {
    text-decoration: none;
  }

  #UpperInfoContainer {
    display: flex;
    justify-content: flex-start;
  }

  #TwitterLogoContainer {
    display: flex;
    justify-content: flex-end;
    margin-bottom: -10px;
    align-items: center;
  }

  #TwitterLogo {
    max-height: 1.1em;
    margin-bottom: -0px;
    margin-left: 3px;
  }

  #KeywordOptions {
    display: flex;
    justify-content: center;
  }

  #IncludeTheseKeywords {
    margin-right: 10px;
  }

  #ExcludeTheseKeywords {
    margin-left: 10px;
  }

  #HorizontalLine1 {
    max-width: 400px;
    margin-top: 14px;
    margin-bottom: 0px;
    display: none;
  }

  #HorizontalLine2 {
    max-width: 20%;
    margin-top: 14px;
    margin-bottom: 0px;
    display: none;
  }

  #BusinessIdeaSummaryBox {
    max-width: 540px;
    background: #fff;
    margin: 0 auto;
    margin-top: 14px;
    border-radius:3px;
    padding-left: 10px;
    padding-right: 10px;
    padding-top: 0px;
    padding-bottom: 20px;
    border-bottom: 1px solid #cdd3d7;
    border-top: 1px solid #cdd3d7;
    border-right: 1px solid #cdd3d7;
    border-left: 1px solid #cdd3d7;
    box-shadow: 0px 2px 5px 0px rgb(0 0 0 / 25%) !important;
  }

  #GoogleLogo {
    max-height: 1.4em;
    margin-top: 5px;
  }

  #search-google-button {
    appearance: auto;
    writing-mode: horizontal-tb !important;
    text-rendering: auto;
    letter-spacing: normal;
    word-spacing: normal;
    line-height: normal;
    text-transform: none;
    text-indent: 0px;
    text-shadow: none;
    display: inline-block;
    text-align: center;
    align-items: flex-start;
    cursor: default;
    box-sizing: border-box;
    background-color: #ffffff;
    margin: 0em;
    padding: 1px 6px;
    border-width: 1px;
    border-style: solid;
    border-color: #999797;
    border-image: initial;
    border-radius: 2px;
    cursor: pointer;
  }
  
  #search-google-button:hover {
    background-color: #f7f7f7;
  }

  #SaveIdeaButtonv2 {
    display: flex;
    justify-content: flex-end;
    margin-top: 6px;
    margin-bottom: -30px;
    margin-right: -4px;
  }

  #SaveIcon1 {
    color:#000d99;
    cursor: pointer;
  }

  #SaveThisIdeaButtonv2 {
    display: inline-block;
    outline: none;
    border-width: 0px;
    border-radius: 3px;
    box-sizing: border-box;
    font-size: inherit;
    font-weight: 500;
    max-width: 100%;
    text-align: center;
    text-decoration: none;
    transition: background 0.1s ease-out 0s, box-shadow 0.15s cubic-bezier(0.47, 0.03, 0.49, 1.38) 0s;
    background: rgb(0, 82, 204);
    cursor: pointer;
    height: 22px;
    line-height: 22px;
    padding: 0px 8px;
    vertical-align: middle;
    width: auto;
    font-size: 11px;
    color: rgb(240, 240, 240);
  }

  #SaveThisIdeaButtonv2:hover {
    background: rgb(0, 101, 255);
    text-decoration: inherit;
    transition-duration: 0s, 0.15s;
    color: rgb(255, 255, 255);
}

html {
  overflow: scroll;
  /* the purpose of this? it prevents layout shifting when the scrollbar appears or vanishes based on text size.
  The scrollbar is instead just -- always there. It also doesn't trigger any vertical shifts either! Way better UI this way. */
}

#Help, #HideStuff {
  padding: 2px 6px;
  border-width: 1px;
  border-radius: 2px;
  border-color: #424242;
  background-color: #f0f0f0;
  backface-visibility: hidden;
  transform: translateZ(0) scale(1, 1);
}

#Help:hover, #HideStuff:hover {
  background-color: #e2e2e2;
}


#Feedback {
  padding: 2px 6px;
  border-width: 1px;
  border-radius: 2px;
  border-color: #424242;
  backface-visibility: hidden;
  transform: translateZ(0) scale(1, 1);
  /* the purpose of the above two lines of code?
  these (somehow) stop a bug, where during CSS animations?
  the element shifts down (or up, or to the side) by 1 pixel.
  it's a known bug, this is a fix that works.
  I applied the same lines of code to the other buttons down there,
  #Help and #HideStuff, because this makes all 3 of them leveled and aligned */
}


@keyframes goldFlash {
  0% { background-color: #f0f0f0; }
  70% { background-color: #f0f0f0; }
  75% { background-color: gold; }
  80% { background-color: #f0f0f0; }
  85% { background-color: gold; }
  90% { background-color: #f0f0f0; }
  95% { background-color: gold; }
  100% { background-color: #f0f0f0; }
}

/* Apply the animation to the button element */
#Feedback.NoFeedbackYet {
  animation-name: goldFlash;
  animation-duration: 8s;
  animation-delay: 180s;
  animation-timing-function: linear;
  animation-iteration-count: 1;
}

#Feedback {
  background-color: #f0f0f0;
}

#Feedback:hover {
  background-color: #e2e2e2;
}

#VolumeSlider {
  display: none;
}

#TopButton1, #TopButton2, #TopButtonSlash1 {
  display: none;
}

#VerifyPremiumUserButton {
  margin-left: 6px;
}

#PremiumUserVerificationDiv {
  display: flex;
}

#VerifyPremiumUserTextInput, #VerifyPremiumUserButton {
  font-size: 12px;
}