* {
    font-size: 14px;
    font-family: sans-serif;
}

button {
    cursor: pointer;
}

/*!
 * Load Awesome v1.1.0 (http://github.danielcardoso.net/load-awesome/)
 * Copyright 2015 Daniel Cardoso <@DanielCardoso>
 * Licensed under MIT
 */
.la-line-scale,.la-line-scale>div{
    box-sizing:border-box;
    position:relative;
}
.la-line-scale{
    color:#fff;
    display:block;
    font-size:0;
}
.la-line-scale.la-dark{
    color:#333;
}
.la-line-scale>div{
    background-color:currentColor;
    border:0 solid;
    display:inline-block;
    float:none;
}
.la-line-scale{
    height:32px;
    width:40px;
}
.la-line-scale>div{
    animation:line-scale 1.2s ease infinite;
    border-radius:0;
    height:32px;
    margin:0 2px;
    width:4px;
}
.la-line-scale>div:first-child{
    animation-delay:-1.2s;
}
.la-line-scale>div:nth-child(2){
    animation-delay:-1.1s;
}
.la-line-scale>div:nth-child(3){
    animation-delay:-1s;
}
.la-line-scale>div:nth-child(4){
    animation-delay:-.9s;
}
.la-line-scale>div:nth-child(5){
    animation-delay:-.8s;
}
.la-line-scale.la-sm{
    height:16px;
    width:20px;
}
.la-line-scale.la-sm>div{
    height:16px;
    margin:0 1px;
    width:2px;
}
.la-line-scale.la-2x{
    height:64px;
    width:80px;
}
.la-line-scale.la-2x>div{
    height:64px;
    margin:0 4px;
    width:8px;
}
.la-line-scale.la-3x{
    height:96px;
    width:120px;
}
.la-line-scale.la-3x>div{
    height:96px;
    margin:0 6px;
    width:12px;
}
@keyframes line-scale{
    0%,40%,to{
        transform:scaleY(.4);
    }
    20%{
        transform:scaleY(1);
    }
}
/*
    References:
        https://github.com/filipelinhares/ress/blob/master/ress.css
        https://github.com/jtrost/Complete-CSS-Reset/blob/master/reset.css
        https://github.com/jgthms/minireset.css/blob/master/minireset.css
        https://github.com/jasonkarns/css-reset/blob/master/reset.css
        http://yui.yahooapis.com/3.18.1/build/cssreset/cssreset.css
        https://github.com/shannonmoeller/reset-css/blob/master/reset.css
        https://github.com/RafaelDeJongh/Rafael-CSS-Reset/blob/gh-pages/reset.css
        https://github.com/jaydenseric/Fix/blob/master/fix.css
        https://github.com/necolas/normalize.css/blob/master/normalize.css
*/

/* https://css-tricks.com/inheriting-box-sizing-probably-slightly-better-best-practice/ */
*,
::before,
::after {
    box-sizing: inherit;
}
html {
    box-sizing: border-box;
}

*,
::before,
::after {
    background-repeat: no-repeat;
}

* {
    vertical-align: baseline;
    font-size: 100%;            /* Helpful for tags like: h1, h2, h3, h4, h5, h6 */
    font-style: normal;         /* Helpful for tags like: address, cite, dfn, em, var */
}

* {
    font-family: inherit;       /* Helpful for tags like: code, kbd, samp, tt */
}
html {
    /* https://www.smashingmagazine.com/2009/09/complete-guide-to-css-font-stacks/#the-myth-of-web-safe-fonts */
    /* http://code.stephenmorley.org/html-and-css/the-myth-of-web-safe-fonts/#narrowsansserif */
    font-family: Tahoma, Arial, Helvetica, sans-serif;
}

* {
    font-weight: inherit;        /* Helpful for tags like: strong, h1, h2, h3, h4, h5, h6 */
}
html {
    font-weight: normal;
}

* {
    word-break: break-word;
}

*:not(button, dialog, input, textarea) {
    margin: 0;
    padding: 0;
    border: 0;                  /* Helpful for tags like: hr */
}

html {
    /*
        Disable the text inflation algorithm used on some smartphones and tablets.
        Ref: https://developer.mozilla.org/en-US/docs/Web/CSS/text-size-adjust
    */
    -webkit-text-size-adjust: none;
    text-size-adjust: none;
}

body {
    line-height: normal;        /* Don't reset line-height to "1" as many of the CSS Reset libraries do because that reduces readability */
}

iframe,
img {
    display: block;
}

iframe {
    border: 0;
    vertical-align:bottom;
}

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

ol,
ul {
    list-style: none;
}

caption,
th {
    text-align: left;
}

blockquote,
q {
    quotes: none;
}
blockquote::before,
blockquote::after,
q::before,
q::after {
    content: '';
    content: none;
}

/* Begin: Single property shorthand-classes */

/* Note: Sorted by the property name */

.bgColor_000 { background-color: #000; }
.bgColor_111 { background-color: #111; }
.bgColor_222 { background-color: #222; }
.bgColor_333 { background-color: #333; }
.bgColor_444 { background-color: #444; }
.bgColor_555 { background-color: #555; }
.bgColor_666 { background-color: #666; }
.bgColor_777 { background-color: #777; }
.bgColor_888 { background-color: #888; }
.bgColor_999 { background-color: #999; }
.bgColor_aaa { background-color: #aaa; }
.bgColor_bbb { background-color: #bbb; }
.bgColor_ccc { background-color: #ccc; }
.bgColor_ddd { background-color: #ddd; }
.bgColor_eee { background-color: #eee; }
.bgColor_fff { background-color: #fff; }

.color_000 { color: #000; }
.color_111 { color: #111; }
.color_222 { color: #222; }
.color_333 { color: #333; }
.color_444 { color: #444; }
.color_555 { color: #555; }
.color_666 { color: #666; }
.color_777 { color: #777; }
.color_888 { color: #888; }
.color_999 { color: #999; }
.color_aaa { color: #aaa; }
.color_bbb { color: #bbb; }
.color_ccc { color: #ccc; }
.color_ddd { color: #ddd; }
.color_eee { color: #eee; }
.color_fff { color: #fff; }

.flex { display: flex; }

.hide { display: none; }

.serif     { font-family: serif;      }
.sansSerif { font-family: sans-serif; }

.fontSize_8  { font-size:  8px; }
.fontSize_9  { font-size:  9px; }
.fontSize_10 { font-size: 10px; }
.fontSize_11 { font-size: 11px; }
.fontSize_12 { font-size: 12px; }
.fontSize_13 { font-size: 13px; }
.fontSize_14 { font-size: 14px; }
.fontSize_15 { font-size: 15px; }
.fontSize_16 { font-size: 16px; }
.fontSize_18 { font-size: 18px; }
.fontSize_20 { font-size: 20px; }
.fontSize_22 { font-size: 22px; }
.fontSize_24 { font-size: 24px; }
.fontSize_28 { font-size: 28px; }
.fontSize_32 { font-size: 32px; }
.fontSize_36 { font-size: 36px; }
.fontSize_40 { font-size: 40px; }
.fontSize_44 { font-size: 44px; }
.fontSize_48 { font-size: 48px; }
.fontSize_54 { font-size: 54px; }
.fontSize_60 { font-size: 60px; }
.fontSize_66 { font-size: 66px; }
.fontSize_72 { font-size: 72px; }
.fontSize_84 { font-size: 84px; }
.fontSize_96 { font-size: 96px; }

.italic { font-style: italic; }

.bold { font-weight: bold; }

.opacity0  { opacity:    0; }
.opacity05 { opacity: 0.05; }
.opacity10 { opacity: 0.10; }
.opacity15 { opacity: 0.15; }
.opacity20 { opacity: 0.20; }
.opacity25 { opacity: 0.25; }
.opacity30 { opacity: 0.30; }
.opacity35 { opacity: 0.35; }
.opacity40 { opacity: 0.40; }
.opacity45 { opacity: 0.45; }
.opacity50 { opacity: 0.50; }
.opacity55 { opacity: 0.55; }
.opacity60 { opacity: 0.60; }
.opacity65 { opacity: 0.65; }
.opacity70 { opacity: 0.70; }
.opacity75 { opacity: 0.75; }
.opacity80 { opacity: 0.80; }
.opacity85 { opacity: 0.85; }
.opacity90 { opacity: 0.90; }
.opacity95 { opacity: 0.95; }

.textAlignLeft   { text-align: left;   }
.textAlignCenter { text-align: center; }
.textAlignRight  { text-align: right;  }

.strike    { text-decoration: line-through; }
.underline { text-decoration: underline;    }

.zIndexMax { z-index: 2147483647; }

/* End: Single property shorthand-classes */

/* https://stackoverflow.com/questions/41169791/word-break-on-whitespace-pre/41170010#41170010 */
.code {
    font-family: monospace;
    white-space: pre-wrap;
}

.opaqueOnHover:hover { opacity: 1; } /* To be used in conjunction with: .opacity0, .opacity05, ..., .opacity90, .opacity95 */

.opacity0UntilHover  { opacity:    0; } .opacity0UntilHover:hover  { opacity: unset; }
.opacity05UntilHover { opacity: 0.05; } .opacity05UntilHover:hover { opacity: unset; }
.opacity10UntilHover { opacity: 0.10; } .opacity10UntilHover:hover { opacity: unset; }
.opacity15UntilHover { opacity: 0.15; } .opacity15UntilHover:hover { opacity: unset; }
.opacity20UntilHover { opacity: 0.20; } .opacity20UntilHover:hover { opacity: unset; }
.opacity25UntilHover { opacity: 0.25; } .opacity25UntilHover:hover { opacity: unset; }
.opacity30UntilHover { opacity: 0.30; } .opacity30UntilHover:hover { opacity: unset; }
.opacity35UntilHover { opacity: 0.35; } .opacity35UntilHover:hover { opacity: unset; }
.opacity40UntilHover { opacity: 0.40; } .opacity40UntilHover:hover { opacity: unset; }
.opacity45UntilHover { opacity: 0.45; } .opacity45UntilHover:hover { opacity: unset; }
.opacity50UntilHover { opacity: 0.50; } .opacity50UntilHover:hover { opacity: unset; }
.opacity55UntilHover { opacity: 0.55; } .opacity55UntilHover:hover { opacity: unset; }
.opacity60UntilHover { opacity: 0.60; } .opacity60UntilHover:hover { opacity: unset; }
.opacity65UntilHover { opacity: 0.65; } .opacity65UntilHover:hover { opacity: unset; }
.opacity70UntilHover { opacity: 0.70; } .opacity70UntilHover:hover { opacity: unset; }
.opacity75UntilHover { opacity: 0.75; } .opacity75UntilHover:hover { opacity: unset; }
.opacity80UntilHover { opacity: 0.80; } .opacity80UntilHover:hover { opacity: unset; }
.opacity85UntilHover { opacity: 0.85; } .opacity85UntilHover:hover { opacity: unset; }
.opacity90UntilHover { opacity: 0.90; } .opacity90UntilHover:hover { opacity: unset; }
.opacity95UntilHover { opacity: 0.95; } .opacity95UntilHover:hover { opacity: unset; }

.hideForContainerLT200  { display: none; } @container (min-width:  200px) { .hideForContainerLT200  { display: block; } }
.hideForContainerLT250  { display: none; } @container (min-width:  250px) { .hideForContainerLT250  { display: block; } }
.hideForContainerLT300  { display: none; } @container (min-width:  300px) { .hideForContainerLT300  { display: block; } }
.hideForContainerLT350  { display: none; } @container (min-width:  350px) { .hideForContainerLT350  { display: block; } }
.hideForContainerLT400  { display: none; } @container (min-width:  400px) { .hideForContainerLT400  { display: block; } }
.hideForContainerLT450  { display: none; } @container (min-width:  450px) { .hideForContainerLT450  { display: block; } }
.hideForContainerLT500  { display: none; } @container (min-width:  500px) { .hideForContainerLT500  { display: block; } }
.hideForContainerLT550  { display: none; } @container (min-width:  550px) { .hideForContainerLT550  { display: block; } }
.hideForContainerLT600  { display: none; } @container (min-width:  600px) { .hideForContainerLT600  { display: block; } }
.hideForContainerLT650  { display: none; } @container (min-width:  650px) { .hideForContainerLT650  { display: block; } }
.hideForContainerLT700  { display: none; } @container (min-width:  700px) { .hideForContainerLT700  { display: block; } }
.hideForContainerLT750  { display: none; } @container (min-width:  750px) { .hideForContainerLT750  { display: block; } }
.hideForContainerLT800  { display: none; } @container (min-width:  800px) { .hideForContainerLT800  { display: block; } }
.hideForContainerLT850  { display: none; } @container (min-width:  850px) { .hideForContainerLT850  { display: block; } }
.hideForContainerLT900  { display: none; } @container (min-width:  900px) { .hideForContainerLT900  { display: block; } }
.hideForContainerLT950  { display: none; } @container (min-width:  950px) { .hideForContainerLT950  { display: block; } }
.hideForContainerLT1000 { display: none; } @container (min-width: 1000px) { .hideForContainerLT1000 { display: block; } }
.hideForContainerLT1050 { display: none; } @container (min-width: 1050px) { .hideForContainerLT1050 { display: block; } }
.hideForContainerLT1100 { display: none; } @container (min-width: 1100px) { .hideForContainerLT1100 { display: block; } }
.hideForContainerLT1150 { display: none; } @container (min-width: 1150px) { .hideForContainerLT1150 { display: block; } }
.hideForContainerLT1200 { display: none; } @container (min-width: 1200px) { .hideForContainerLT1200 { display: block; } }
.hideForContainerLT1250 { display: none; } @container (min-width: 1250px) { .hideForContainerLT1250 { display: block; } }
.hideForContainerLT1300 { display: none; } @container (min-width: 1300px) { .hideForContainerLT1300 { display: block; } }
.hideForContainerLT1350 { display: none; } @container (min-width: 1350px) { .hideForContainerLT1350 { display: block; } }
.hideForContainerLT1400 { display: none; } @container (min-width: 1400px) { .hideForContainerLT1400 { display: block; } }
.hideForContainerLT1450 { display: none; } @container (min-width: 1450px) { .hideForContainerLT1450 { display: block; } }
.hideForContainerLT1500 { display: none; } @container (min-width: 1500px) { .hideForContainerLT1500 { display: block; } }

.flexColumn { display: flex; flex-direction: column; }
.flexRow    { display: flex; flex-direction: row;    }

.flexCenter           { display: flex; align-items: center; justify-content: center; }
.flexCenterHorizontal { display: flex;                      justify-content: center; }
.flexCenterVertical   { display: flex; align-items: center;                          }

.error                    { color: red;                      }
.errorWithPleasantColor   { color: rgba(128,   0,   0, 0.5); }
.info                     { color: blue;                     }
.infoWithPleasantColor    { color: rgba(  0,   0, 128, 0.5); }
.success                  { color: green;                    }
.successWithPleasantColor { color: rgba(  0, 128,   0, 0.5); }
.verbose                  { color: gray;                     }
.warn                     { color: orange;                   }
.warnWithPleasantColor    { color: rgba(128,  83,   0, 0.5); }

.readonly { background-color: #ddd; }

body {
    background-color: rgb(232, 234, 237);
}

.column-width-auto {
    width: auto;
}
.column-width-min {
    width: 1px;
    white-space: nowrap;
}

.translucentWaitingForHover {
    opacity: 0.5;
}
.translucentWaitingForHover:hover {
    opacity: unset;
}

body {
    /* Remove the default blue highlight on tap for touch devices */
    -webkit-tap-highlight-color: transparent;
}

/* TODO: Verify if all these are needed */
.InputNumberWithoutArrows input {
    -moz-appearance: textfield;
}

/* TODO: Verify if all these are needed */
.InputNumberWithoutArrows input::-webkit-inner-spin-button,
.InputNumberWithoutArrows input::-webkit-outer-spin-button {
    -webkit-appearance: none;
    margin: 0;
}

/* Declare CSS variable for layout padding */
:root {
    --layoutPadding: 20px;
}
@media (min-width: 640px) {
    :root {
        --layoutPadding: 35px;
    }
}

/* Export for JavaScript consumption */

.Layout__LayoutAbsoluteFullWidth--IPPqd {
}

.Layout__LayoutFullWidth--cfJzA {
    padding-left: var(--layoutPadding);
    padding-right: var(--layoutPadding);
}

.Layout__LayoutContentZone--vjD9i {
    max-width: 1024px;

    margin-left: auto;
    margin-right: auto;
}

@media (min-width: 900px) {
    .Layout__LayoutContentZone--vjD9i {
        max-width: 750px;
    }
}

/* https://stackoverflow.com/questions/36830283/creating-a-light-sweep-effect-shiny-on-an-image-logo/36830389#36830389 */

#bodyShiningEffect {
    pointer-events: none;

    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-color: rgba(0, 0, 0, 0.2);
    z-index: 999999;
}

#bodyShiningEffect:before {
    content: "";
    position: absolute;
    width: 225%;
    height: 225%;
    background: linear-gradient(transparent 0%, rgba(255, 255, 255, 0.1) 45%, rgba(255, 255, 255, 0.5) 50%, rgba(255, 255, 255, 0.1) 55%, transparent 100%);
    transform: rotate(-45deg);
    animation: NonSelfLink__bodyShine--bizoL 4s;
}

@keyframes NonSelfLink__bodyShine--bizoL {
    0% {
        left: -100%;
        top: -100%;
    }
    40% {
        left: 40%;
        top: 40%;
    }
    60% {
        left: 60%;
        top: 60%;
    }
    100% {
        left: 125%;
        top: 125%;
    }
}

[data-simplebar]{position:relative;flex-direction:column;flex-wrap:wrap;justify-content:flex-start;align-content:flex-start;align-items:flex-start}.simplebar-wrapper{overflow:hidden;width:inherit;height:inherit;max-width:inherit;max-height:inherit}.simplebar-mask{direction:inherit;position:absolute;overflow:hidden;padding:0;margin:0;left:0;top:0;bottom:0;right:0;width:auto!important;height:auto!important;z-index:0}.simplebar-offset{direction:inherit!important;box-sizing:inherit!important;resize:none!important;position:absolute;top:0;left:0;bottom:0;right:0;padding:0;margin:0;-webkit-overflow-scrolling:touch}.simplebar-content-wrapper{direction:inherit;box-sizing:border-box!important;position:relative;display:block;height:100%;width:auto;max-width:100%;max-height:100%;overflow:auto;scrollbar-width:none;-ms-overflow-style:none}.simplebar-content-wrapper::-webkit-scrollbar,.simplebar-hide-scrollbar::-webkit-scrollbar{display:none;width:0;height:0}.simplebar-content:after,.simplebar-content:before{content:' ';display:table}.simplebar-placeholder{max-height:100%;max-width:100%;width:100%;pointer-events:none}.simplebar-height-auto-observer-wrapper{box-sizing:inherit!important;height:100%;width:100%;max-width:1px;position:relative;float:left;max-height:1px;overflow:hidden;z-index:-1;padding:0;margin:0;pointer-events:none;flex-grow:inherit;flex-shrink:0;flex-basis:0}.simplebar-height-auto-observer{box-sizing:inherit;display:block;opacity:0;position:absolute;top:0;left:0;height:1000%;width:1000%;min-height:1px;min-width:1px;overflow:hidden;pointer-events:none;z-index:-1}.simplebar-track{z-index:1;position:absolute;right:0;bottom:0;pointer-events:none;overflow:hidden}[data-simplebar].simplebar-dragging{pointer-events:none;-webkit-touch-callout:none;-webkit-user-select:none;-khtml-user-select:none;-moz-user-select:none;-ms-user-select:none;user-select:none}[data-simplebar].simplebar-dragging .simplebar-content{pointer-events:none;-webkit-touch-callout:none;-webkit-user-select:none;-khtml-user-select:none;-moz-user-select:none;-ms-user-select:none;user-select:none}[data-simplebar].simplebar-dragging .simplebar-track{pointer-events:all}.simplebar-scrollbar{position:absolute;left:0;right:0;min-height:10px}.simplebar-scrollbar:before{position:absolute;content:'';background:#000;border-radius:7px;left:2px;right:2px;opacity:0;transition:opacity .2s .5s linear}.simplebar-scrollbar.simplebar-visible:before{opacity:.5;transition-delay:0s;transition-duration:0s}.simplebar-track.simplebar-vertical{top:0;width:11px}.simplebar-scrollbar:before{top:2px;bottom:2px;left:2px;right:2px}.simplebar-track.simplebar-horizontal{left:0;height:11px}.simplebar-track.simplebar-horizontal .simplebar-scrollbar{right:auto;left:0;top:0;bottom:0;min-height:0;min-width:10px;width:auto}[data-simplebar-direction=rtl] .simplebar-track.simplebar-vertical{right:auto;left:0}.simplebar-dummy-scrollbar-size{direction:rtl;position:fixed;opacity:0;visibility:hidden;height:500px;width:500px;overflow-y:hidden;overflow-x:scroll;-ms-overflow-style:scrollbar!important}.simplebar-dummy-scrollbar-size>div{width:200%;height:200%;margin:10px 0}.simplebar-hide-scrollbar{position:fixed;left:0;visibility:hidden;overflow-y:scroll;scrollbar-width:none;-ms-overflow-style:none}

.PostEntry__PostEntry--a8bsi,
.PostEntry__PostEntry--a8bsi input {
    cursor: pointer;
}

.PostEntry__PostEntry--a8bsi {
    background-color: #fff;
    border-radius: 999px;

    /* This is useful for showing the appropriate outline effect when the element is in focus (for use with keyboard
       navigation). Without this,the outline effect may be slightly cut-off (impact would be more noticeable for first
       entry in the posts list). */
    border: 1px solid transparent;
}
.PostEntry__PostEntry--a8bsi:hover {
    background-color: rgba(21, 44, 74, 0.1);
}
.PostEntry__PostEntry--a8bsi.PostEntry__selected--Blrzz {
    background-color: rgba(21, 44, 74, 0.2);
}
.PostEntry__PostEntry--a8bsi.PostEntry__selected--Blrzz:hover {
    background-color: rgba(21, 44, 74, 0.3);
}

.PostEntry__PostEntryTitle--ITJB2 {
    width: 100%; /* Without this, the <input> element may occupy some minimum width which lead to some unexpected layout
                    when the width of the left panel is small */
    text-overflow: ellipsis;
}

.PostEntry__PostEntryTitle--ITJB2[readonly] {
    background-color: transparent;
    border-color: transparent;
}

.PostEntry__PostEntryTitle--ITJB2[readonly]:focus {
    outline: 0;
}
.PostEntry__PostEntryTitle--ITJB2:focus:not([readonly]) {
    cursor: text;
}

.PostEntry__PostEntry--a8bsi.PostEntry__notSelected--DRY9G .PostEntry__MoreOptionsContainer--wIZGh {
    opacity: 0;
}
.PostEntry__PostEntry--a8bsi.PostEntry__notSelected--DRY9G:hover .PostEntry__MoreOptionsContainer--wIZGh,
.PostEntry__PostEntry--a8bsi.PostEntry__notSelected--DRY9G:focus-within .PostEntry__MoreOptionsContainer--wIZGh,
.PostEntry__PostEntry--a8bsi.PostEntry__active--UbqLB .PostEntry__MoreOptionsContainer--wIZGh,
.PostEntry__PostEntry--a8bsi.PostEntry__editing--GUahj .PostEntry__MoreOptionsContainer--wIZGh {
    opacity: 1;
}

.CreateAPost__CreateAPost--XoKvT {
}

.PostsSettings__PostsSettings--_mSZN {
}

.PostsSettings__ExpandCollapseBarContainer--qCL_n {
    display: flex;
    flex-direction: column;
}

.PostsSettings__ExpandCollapseBar--en4EM {
    border-radius: 0;
}

.PostsSettings__ExpandCollapseBar--en4EM:hover {
    background-color: rgba(21, 44, 74, 0.1);
}

.GroupOfPosts__GroupOfPosts--z0K9l {
}

.MyPostsDrawer__MyPostsDrawer--hrKUo {
}

.MyFeatureIcon__MyFeatureIcon--Rz4ZF {
}

.MyToolBar__MyToolBar--ay18t {
}

.MyToolBar__LinksInHeader--eUB_s {
    font-weight: bold;
    font-size: 14px;
}

.MyDrawer__MyDrawer--i9Y8z {
}

.MyAppBarAndDrawer__MyAppBarAndDrawer--thS8k {
}

.PageHeader__PageHeader--W1gaq {
}

.PageBody__PageBody--GlOJX {
}

.GeneralLinks__GeneralLinks--SxGhG {
    font-size: 14px;
}

.PageFooter__PageFooter--FQzz0 {
}

.PageFooter__PageFooterContents--AeGrz {
    display: flex;
    flex-direction: column;
}

@media (min-width: 600px) {
    .PageFooter__PageFooterContents--AeGrz {
        flex-direction: row;
        justify-content: space-between;
    }
}

.PageFooter__SecondPanel--L7iz8 {
    margin-top: 30px;
}
@media (min-width: 600px) {
    .PageFooter__SecondPanel--L7iz8 {
        margin-top: 0;
    }
}

.ResponsiveDialog__ResponsiveDialog--GSXzv {
}

.CustomAjaxTimeout__CustomAjaxTimeout--rKmg6 {
}

.FrontendConfig__FrontendConfig--R0fBh {
}

.ZustandState__ZustandState--AZArw {
}

.UserData__UserData--xlcN1 {
}

.DevHelperMenuOption__DevHelperMenuOption--njhdm {
}

.DevHelper__DevHelper--vLwVs {
}

.EloComparisonsDialog__EloComparisonsDialog--ZnfdH {
}

.EloComparisonsDialog__selectedEntry--LjBhT {
    background-color: #bdd1ec;
}

.EloComparisonsDialog__notSelectedEntry--YG5Ei {
    color: #555;
}

.EloComparisonsDialog__chosen--isX1X,
.EloComparisonsDialog__notChosen--LRU79 {
    cursor: pointer;
    border: 1px solid #ddd;
}

.EloComparisonsDialog__chosen--isX1X {
    background-color: #c8e3c8;
}
.EloComparisonsDialog__chosen--isX1X:hover {
    background-color: #a8c3a8;
}

.EloComparisonsDialog__notChosen--LRU79:hover {
    background-color: #99b1d0;
}

.CopyToClipboardDialog__CopyToClipboardDialog--h0VkT {
}

/* Note: The UI / UX isn't consistent across browsers due to the limited implementation of styling options from their end */

label.CopyToClipboardDialog__inputRow--cn4FV {
    cursor: pointer;
}

.CopyToClipboardDialog__inputRow--cn4FV {
    position: relative;
    display: flex;

    min-width: 275px;

    margin-top: 8px;
    justify-content: space-between;
    border: 1px solid #eee;
    border-radius: 10px;
}

.CopyToClipboardDialog__inputRow--cn4FV:focus-within {
    border: 1px solid #777;
    border-radius: 10px;
    background-color: #f0f0f0;
}

.CopyToClipboardDialog__inputRow--cn4FV:hover {
    background-color: #e7e7e7;
}

.CopyToClipboardDialog__inputRow--cn4FV:focus-within:hover {
    background-color: #e0e0e0;
}

.CopyToClipboardDialog__inputRow--cn4FV select {
    background-color: transparent;

    padding-top: 5px;

    padding-bottom: 5px;
    padding-right: 30px;              /* This is applicable for the <select> */
    /* text-indent: calc(...);           This is applicable for the <select> (might be useful in some case) */
    padding-left: calc(100% - 115px); /* This is applicable for the <option> */

    width: 100%;

    outline: 0;

    appearance: none;
    cursor: pointer;
}

.CopyToClipboardDialog__inputRow--cn4FV:focus-within select:active {
    width: calc(115px + 10px);
    margin-left: auto;
    padding-left: 10px;
}

.CopyToClipboardDialog__inputRow--cn4FV select option {
    padding-left: 10px;
}

.CopyToClipboardDialog__inputRow--cn4FV input[type="checkbox"] {
    margin-left: auto;
    margin-right: 8px;
    margin-top: 8px;
    margin-bottom: 8px;
}


.CopyToClipboardDialog__fieldTitle--p0HjQ {
    position: absolute;
    padding-left: 15px;
    padding-top: 5px;
    pointer-events: none;
}

.CopyToClipboardDialog__dropdownArrow--ZdGz1 {
    position: absolute;
    right: 5px;
    top: 5px;
    pointer-events: none;
}

.PostsSettingsDialog__PostsSettingsDialog--U65UI {
}

.PostsSettingsDialog__checkboxLabel--hJ9wB {
    margin-top: 11px;
    margin-left: 2px;
    font-size: 14px;

    /* This is useful in adding some gap which is applicable when the screen width is small and the text wraps over to the next line */
    padding-bottom: 5px;
}

.DeletePostConfirmationDialog__DeletePostConfirmationDialog--LTKjo {
    max-width: 600px;
}

.TextareaWithBulletSupport__TextareaWithBulletSupport--s7pI8 {
}

/* The parent element (upon focus of which, the button should be visible) should have the class `AiGenerateTextContainer` */

.AiGenerateTextContainer .btnGenerate {
    visibility: hidden;
    opacity: 0;

    transition: opacity 0.3s ease-in-out;
}

.AiGenerateTextContainer:focus-within .btnGenerate,
.AiGenerateTextContainer:hover .btnGenerate,
.AiGenerateTextContainer .btnGenerate.generating {
    visibility: visible;
    opacity: 1;
}

.GenerateTextButton__Icon--vtyxD {
    padding: 4px;

    /* This is required to prevent some styles from MUI (which get applied in some other states, eg: background-color
    may become transparent in case of disabled state) */
    background-color: #fff !important;

    box-shadow: 0 0 10px 0 rgba(21, 44, 74, 0.5);
}

.GenerateTextButton__Icon--vtyxD:hover {
    box-shadow: 0 0 10px 0 rgba(21, 44, 74, 1);
}

.CreatePostDialog__CreatePostDialog--UVUux {
}

.SuggestionsConfigDialog__SuggestionsConfigDialog--Od3G9 {
}

.MainHome__MainHome--JPHgj {
}

.PageMain__PageMain--Belne {
}

.PageAccount__PageAccount--w3xOW {
}

.AddCategory__AddCategory--HE4FY {
    display: flex;
}

.BookmarkCategories__BookmarkCategories--XmsO5 th {
    font-weight: bold;
}
.BookmarkCategories__BookmarkCategories--XmsO5 th:not(:first-child),
.BookmarkCategories__BookmarkCategories--XmsO5 td:not(:first-child) {
    padding-left: 15px;
    padding-right: 1px; /* As per the status when implemented, this is required to not crop the 1px border in the top-right of the "Delete" button when the horizontal scrollbar is shown due to less screen width */
}

.BookmarkCategories__BookmarkCategories--XmsO5 td:first-child {
    min-width: 100px;
}

.BookmarkCategoriesView__BookmarkCategoriesView--PHul2 {
}

.PageBookmarks__PageBookmarks--h9Tuo {
}

.ListContext__ListContext--M3Y7_ {
}

.ListOperations__ListOperations--Cn3ez {
}

.AddEntry__AddEntry--DyMz0 {
}

.AddEntry__AddEntryContent--qGU87 {
}

.AddEntry__AddEntryButton--X388A {
}

.AddEntry__AddEntryTextarea--ZZ7DZ::placeholder {
    font-style: italic;
}

.EntriesLineup__EntriesLineup--J9QWG {
}

.EntriesLineup__EntriesLineupContents--MLSds {
    display: grid;
    gap: 10px;
}

.EntriesLineup__Entry--xM5uS {
}

.TheList__TheList--mbZAm {
}

.TheList__ListOperations--FqwHz {
}

.GenerateSuggestions__GenerateSuggestions--XqqtS {
}

.Suggestions__Suggestions--h0Yty {
}

.BannedSuggestions__BannedSuggestions--V7Il4 {
}

.SavedForLater__SavedForLater--gU57G {
}

.SavedForLater__Entries--eQFxA {
}

.SavedForLater__Entry--wfH51 {
}

.BuildList__BuildList--fx7Lu {
}

.BuildMarkdown__BuildMarkdown--ctIZm {
}

.ScrollableList__scrollContainer--iGfKC {
    background: linear-gradient(135deg, #f5f7fa 0%, #d8dce2 100%);
}

.ScrollableList__listItem--CHsPU {
    position: relative; /* BECAUSE: because/cross-browser-issues/absolute-positioning.md */

    display: flex;
    align-items: center;
    gap: 10px;
    padding: 12px 15px;
    margin-top: 10px;
    cursor: pointer;
    transition: box-shadow 0.4s, border-left-color 0.4s;
}

.ScrollableList__listItem--CHsPU:first-child {
    margin-top: 0;
}

.ScrollableList__listItem--CHsPU * {
    z-index: 1; /* BECAUSE: because/cross-browser-issues/absolute-positioning.md */
}

.ScrollableList__listItemBackgroundLayer--cdf8y {
    /* BECAUSE: because/cross-browser-issues/absolute-positioning.md */
    position: absolute;
    z-index: 0;

    top: 0;
    left: 0;
    width: 100%;
    height: 100%;

    /* White background for card effect */
    background-color: #fff;

    border-left-width: 4px;
    border-left-style: solid;
    border-left-color: transparent;

    transition: transform 0.2s, border-left-color 0.2s;
}

.ScrollableList__listItem--CHsPU:hover .ScrollableList__listItemBackgroundLayer--cdf8y {
    transform: scaleY(1.1) scaleX(1.02);
    border-left-color: #152c4a;
}

.ScrollableList__listItemIcon--Yv5dd {
    width: 40px;
    height: 40px;
    display: flex;
    align-items: center;
    justify-content: center;
}

.ScrollableList__listItemIcon--Yv5dd svg {
    display: block;
}

.ScrollableList__listItemTitle--N7koB {
    font-weight: bold;
    color: #333;
    font-size: 16px;
}

.ScrollableList__listItemDescription--ScK0z {
    margin-top: 4px;
    font-size: 14px;
    color: #555;
}

/* https://css-tricks.com/css-link-hover-effects/ */
.ScrollableList__rainbowUnderlineOnHover--aCvWM {
    background:
        linear-gradient(
            to right,
            transparent,
            transparent
        ),
        linear-gradient(
            to right,
            rgba(0, 100, 200, 0.5),
            rgba(25, 200, 25, 0.5),
            rgba(255, 0, 0, 0.5)
        );
    background-size: 100% 2px, 0 2px;
    background-position: 100% 100%, 0 100%;
    background-repeat: no-repeat;
    transition: background-size 0.4s;
}
.ScrollableList__listItem--CHsPU:hover .ScrollableList__rainbowUnderlineOnHover--aCvWM {
    background-size: 0 2px, 100% 2px;
}

.CreateListIceBreaker__CreateListIceBreaker--fEnmQ {
}

.CreateListIceBreaker__ListIdeas--KexHz {
}

.CreateListIceBreaker__CollapseExpandButtonContainer--ZZpiD {
    /* BECAUSE: because/cross-browser-issues/absolute-positioning.md */
    position: relative;
    z-index: 2;
}

.CreateListIceBreaker__IceBreakerList--P6zRV {
}

.SelectOrCreate__SelectOrCreate--fFRlm {
}

.CustomizeViewButton__CustomizeViewButton--advwR {
}

.DiscardChangesButton__DiscardChangesButton--VQrxl {
}

.CopyButton__CopyButton--Mk06o {
}

.SaveButton__SaveButton--bMYnv {
}

.BuildListAccordion__BuildListAccordion--pIw3r {
}

.PageDrafts__PageDrafts--Dft4P {
}

.PageDrafts__PageDrafts--Dft4P .simplebar-content {
    height: 100%; /* Useful for vertical-middle-aligning the initial "loading" state */
}

.CopyToClipboard__CopyToClipboard--Uyz_2 {
    opacity: 0.5;
}

.CopyToClipboard__CopyToClipboard--Uyz_2:hover {
    opacity: 1;
}

.SampleUserPrefs__SampleUserPrefs--nMp5G {
}

.Sample__Sample--FRhSn {
}

.PageSample__PageSample--ATMUi {
}

.SignInForm__SignInForm--c4J3M {
    display: flex;
    flex-direction: column;
    align-items: center;

    container-type: inline-size;
}

.SignInForm__SignInForm--c4J3M .SignInForm__wrapper--NxG1q {
    width: 400px;
}
@container (max-width: 500px) {
    .SignInForm__SignInForm--c4J3M .SignInForm__wrapper--NxG1q {
        width: 100%;
    }
}

.SignInForm__SignInForm--c4J3M .SignInForm__wrapper--NxG1q input {
    width: 100%;
    padding: 10px;
    margin: 10px 0;
    border: 1px solid #ccc;
    border-radius: 5px;
}

.PageSignIn__PageSignIn--Mzf55 {
}

.PageUnderConstruction__PageUnderConstruction--SHq5U {
}

.PageNotFound__PageNotFound--z8OZm {
}