SillyTavern/public/css/st-tailwind.css

.text_warning {
    color: rgb(220 173 16);
}

.text_danger {
    color: var(--fullred);
}

.highlighted {
    color: black;
    background-color: yellow;
    text-shadow: none !important;
}

.m-t-0 {
    margin-top: 0;
}

.m-t-1 {
    margin-top: 1em;
}

.m-t-2 {
    margin-top: 2em;
}

.m-t-3 {
    margin-top: 3em;
}

.m-t-4 {
    margin-top: 4em;
}

.m-t-5 {
    margin-top: 5em;
}

.m-b-1 {
    margin-bottom: 1em;
}

.m-b-2 {
    margin-bottom: 2em;
}

.m-b-3 {
    margin-bottom: 3em;
}

.m-b-4 {
    margin-bottom: 4em;
}

.m-b-5 {
    margin-bottom: 5em;
}

.tooltip {
    cursor: help;
}

.margin-bot-10px,
.marginBot10 {
    margin-bottom: 10px !important;
}

.marginTop10 {
    margin-top: 10px !important;
}

.marginBot5 {
    margin-bottom: 5px !important;
}

.marginTop5 {
    margin-top: 5px !important;
}

.marginTopBot5 {
    margin-top: 5px !important;
    margin-bottom: 5px !important;
}

.margin5 {
    margin: 5px;
}

.overflowYAuto {
    overflow-y: auto;
}

.heightMinContent {
    height: min-content;
}

.justifySpaceBetween {
    justify-content: space-between;
}

.alignitemsflexstart {
    align-items: flex-start !important;
}

.alignItemsFlexEnd {
    align-items: flex-end !important;
}

.alignItemsBaseline {
    align-items: baseline !important;
}

.alignSelfStart {
    align-self: start;
}

.gap0 {
    gap: 0 !important;
}

.gap3px {
    gap: 3px !important;
}

.gap5px {
    gap: 5px !important;
}

.gap10px {
    gap: 10px !important;
}

.gap10h20v {
    gap: 10px 20px !important;
}

.gap10h5v {
    gap: 5px 10px !important;
}

.wide10pMinFit {
    width: 10%;
    min-width: fit-content;
}

.wide100pLess70px {
    width: calc(100% - 70px);
}

.wideMax100px {
    max-width: 100px;
}

.width100px {
    width: 100px;
}

.widthUnset {
    width: unset;
}

.no-border {
    border: none !important;
}

.no-shadow {
    box-shadow: none !important;
}

.height100p {
    height: 100%;
}

.height100pSpaceEvenly {
    align-content: space-evenly;
    height: 100%;
}

.height32px {
    height: 32px;
}

.TxtLrgBoldCenter {
    text-align: center;
    font-size: large;
    font-weight: 600;
}

.textAlignCenter {
    text-align: center;
}

.margin-right-10px {
    margin-right: 10px;
}


.success {
    color: green;
}

.failure {
    color: red;
}

.optional {
    color: lightgray;
}

.monospace {
    font-family: monospace;
}

.expander {
    flex-grow: 1;
}

.redOverlayGlow {
    color: #800;
    opacity: 0.8 !important;
    text-shadow: none !important;
}

.width100p {
    width: 100%;
}

.flex {
    display: flex;
}

.flexBasis100p {
    flex-basis: 100%;
}

.flexBasis50p {
    flex-basis: 50%
}

.flexBasis25p {
    flex-basis: 25%
}

.flexBasis200px {
    flex-basis: 200px
}

.flexBasis48p {
    flex-basis: 48%
}

.flex-container {
    display: flex;
    gap: 5px;
    flex-wrap: wrap;
}

.flexNoGap {
    gap: unset !important;
}

.flexGrow {
    flex-grow: 1;
}

.flexShrink {
    flex-shrink: 1
}

.flexWrap {
    flex-wrap: wrap;
}

.flexnowrap,
.flexNoWrap {
    flex-wrap: nowrap;
}

.alignitemscenter,
.alignItemsCenter {
    align-items: center;
}

.alignitemsstart,
.alignItemsStart {
    align-items: start;
}

.overflow-hidden {
    overflow: hidden;
    white-space: nowrap;
    text-overflow: ellipsis;
}

.maxWidth200px {
    max-width: 200px;
}

.alignContentFlexStart {
    align-content: flex-start;
}

.alignContentCenter {
    align-content: center;
}

.overflowHidden {
    overflow: hidden;
}

.padding0 {
    padding: 0;
}

.padding5 {
    padding: 5px;
}

.padding10 {
    padding: 10px;
}

.margin0 {
    margin: 0;
}

.margin0auto {
    margin: 0 auto;
}

.margin-r5 {
    margin-right: 5px;
}

.flex0 {
    flex: 0;
}

.flex1 {
    flex: 1;
}

.flex2 {
    flex: 2 !important;
}

.flexFlowColumn {
    flex-flow: column;
}

.flexFlowRow {
    flex-flow: row;
}

.wideMinContent {
    width: min-content;
}

.flexWide50p {
    flex: 50%;
}

.wide25p {
    width: 25%;
}

.wide30p {
    width: 30% !important;
}

.justifyLeft {
    text-align: start;
    justify-content: left;
    margin-left: unset;
}

.justifyCenter {
    justify-content: center;
    margin: 0 auto;
}

.justifyContentSpaceAround {
    justify-content: space-around;
}

.justifyContentFlexStart {
    justify-content: flex-start;
}

.justifyContentFlexEnd {
    justify-content: flex-end;
}

.spaceEvenly {
    justify-content: space-evenly;
}

.spaceBetween {
    justify-content: space-between;
}

.widthNatural {
    width: unset !important;
    min-width: unset !important;
    max-width: unset !important;
}

.widthFreeExpand {
    width: -webkit-fill-available;
    width: -moz-available;
}

.wide100p {
    width: 100%;
}

.wide50p {
    width: 50%;
}

.wide50px {
    width: 50px;
}

.indent20p {
    margin-left: 20px;
}

/*used to fix smallness of certain FontAwesome glyph which break button squareness*/
/*currently used on: CharList Import*/

.faSmallFontSquareFix {
    font-size: calc(var(--mainFontSize) *1.25);
    width: calc(var(--mainFontSize) *1.95);
}

.textarea_compact {
    font-size: calc(var(--mainFontSize) * 0.95);
    line-height: 1.2;
}

.custom-katex-html,
.katex-html {
    display: none;
}

.hoverglow {
    transition: opacity 200ms;
}

.hoverglow:hover {
    opacity: 1 !important;
    cursor: pointer;
}

input:disabled,
textarea:disabled {
    cursor: not-allowed;
    filter: brightness(0.5);
}

.debug-red {
    border: 1px solid red !important;
}

.debug-yellow {
    border: 1px solid yellow !important;
}

.debug-green {
    border: 1px solid green !important;
}

.debug-blue {
    border: 1px solid blue !important;
}

.debug-purple {
    border: 1px solid purple !important;
}

.fontsize120p {
    font-size: calc(var(--mainFontSize) * 1.2) !important;
}

.fontsize80p {
    font-size: calc(var(--mainFontSize) * 0.8) !important;
}

.fontsize60p {
    font-size: calc(var(--mainFontSize) * 0.6) !important;
}

.paddingBottom5px {
    padding: unset;
    padding-bottom: 5px;
}

.paddingTopBot5 {
    padding: 5px 0;
}

.paddingLeftRight5 {
    padding: 0 5px;
}

.heightFitContent {
    height: fit-content;
}

.widthFitContent {
    width: fit-content;
    min-width: fit-content;
}

.flexGap5 {
    gap: 5px;
}

.flexGap10 {
    gap: 10px;
}

.opacity50p {
    opacity: 0.5
}

.grayscale {
    filter: grayscale(100%);
}

.opacity1 {
    opacity: 1 !important;
}

.circleborder30px {
    right: 30px;
    top: 10px;
    position: absolute;
    border: 1px solid var(--SmartThemeBodyColor);
    border-radius: 100%;
    aspect-ratio: 1 / 1;
    height: 30px;
    text-align: center;
    padding: 5px;
}