/*
    Animations
*/

@keyframes heartbeat
{
    0%
    {
            transform: scale(1.2);
    }
    20%
    {
            transform: scale(1.5);
    }
    40%
    {
            transform: scale(1.2);
    }
    60%
    {
            transform: scale(1.5);
    }
    80%
    {
            transform: scale(1.2);
    }
    100%
    {
            transform: scale(1.2);
    }
}

@-webkit-keyframes fadeOut {
    0% {
        opacity: 1;
    }

    100% {
        opacity: 0;
    }
}

@keyframes fadeOut {
    0% {
        opacity: 1;
    }

    100% {
        opacity: 0;
    }
}

@-webkit-keyframes fade-in
{
    from { opacity: 0.6; }
    to { opacity: 1; }
}

@-moz-keyframes fade-in
{
    from { opacity: 0.6; }
    to { opacity: 1; }
}

@keyframes fade-in
{
    from { opacity: 0.6; }
    to { opacity: 1; }
}

@keyframes fade-in-dimmer
{
    from { opacity: 0; }
    to { opacity: 0.90; }
}

@keyframes fade-in-dimmer-repeat
{
    from { opacity: 0.90; }
    to { opacity: 0.7; }
}

@keyframes scale-in
{
    from {
        transform:              scale(1, 1);
    }
    to {
        transform:              scale(1.5, 1.5);
    }
}

@keyframes spin-scale
{
    to {
        transform:              rotate(0deg) scale(1, 1);
    }
    from {
        transform:              rotate(360deg) scale(1.5, 1.5);
    }
}

@keyframes spin
{
    from {
        transform:              rotate(0deg);
    }
    to {
        transform:              rotate(360deg);
    }
}

/*
    General
*/

body
{
    background-color:           #f8f9fa;
    padding-bottom:             20px;
    overflow:                   auto;
}

@media (prefers-color-scheme: dark)
{
    body
    {
        background-color:       #262626;
        color:                  #fff;
    }
}


/*
    Boostrap 5 > Tooltips
*/

.tooltip-inner
{
    background-color:           #3061a1;
    box-shadow:                 0px 0px 4px black;
    opacity:                    1;
    color:                      #FFF;
}

.tooltip.bs-tooltip-right .tooltip-arrow::before
{
    border-right-color:         #3061a1 !important;
}

.tooltip.bs-tooltip-left .tooltip-arrow::before
{
    border-left-color:          #3061a1 !important;
}

.tooltip.bs-tooltip-bottom .tooltip-arrow::before
{
    border-bottom-color:        #3061a1 !important;
}

.tooltip.bs-tooltip-top .tooltip-arrow::before
{
    border-top-color:           #3061a1 !important;
}

/*
    Media
*/

@media (prefers-color-scheme: dark)
{
    #list a,
    #list a:focus,
    #list a:hover {
        color:                  #fff;
    }
}

@media (prefers-color-scheme: dark)
{
    body
    {
        background-color:       #262626;
        color:                  #fff;
    }
}

@media screen and (max-width: 480px)
{
    .notifications {
        display: none !important;
    }
}

@media screen and (max-height: 640px)
{
    .notifications {
        display: none !important;
    }
}

.container
{
    text-align:                 left;
}

.container nav
{
    margin-left:                -8px;
}

.container .about
{
    padding-left:               8px;
    padding-bottom:             4vh;
    font-size:                  clamp(0.5em, 1vw, 0.8em);
    line-height:                1.6;
    font-weight:                100;
}

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

a
{
    color:                      #FF0E7F;
    text-decoration:            underline dotted #606060;
    font-weight:                600;
}

a:hover
{
    color:                      #FFF;
    text-decoration:            underline dotted #FF0048;
    font-weight:                600;
}

p
{
    margin-top:                 0;
    margin-bottom:              0;
}

code
{
    font-size:                  96%;
    color:                      #ffa42e !important;
    word-break:                 break-word !important;
    padding-right:              5px;
    padding-left:               4px;
}

/*
    Containers > Base Classes
*/

.container
{
    width:                      100%;
    padding:                    0px;
    margin-right:               auto;
    margin-left:                auto;
    padding-top:                0.5rem;
    padding-bottom:             0.5rem;
}

.col, .col-1, .col-10, .col-11, .col-12, .col-2, .col-3, .col-4, .col-5, .col-6, .col-7, .col-8, .col-9, .col-auto, .col-lg, .col-lg-1, .col-lg-10, .col-lg-11, .col-lg-12, .col-lg-2, .col-lg-3, .col-lg-4, .col-lg-5, .col-lg-6, .col-lg-7, .col-lg-8, .col-lg-9, .col-lg-auto, .col-md, .col-md-1, .col-md-10, .col-md-11, .col-md-12, .col-md-2, .col-md-3, .col-md-4, .col-md-5, .col-md-6, .col-md-7, .col-md-8, .col-md-9, .col-md-auto, .col-sm, .col-sm-1, .col-sm-10, .col-sm-11, .col-sm-12, .col-sm-2, .col-sm-3, .col-sm-4, .col-sm-5, .col-sm-6, .col-sm-7, .col-sm-8, .col-sm-9, .col-sm-auto, .col-xl, .col-xl-1, .col-xl-10, .col-xl-11, .col-xl-12, .col-xl-2, .col-xl-3, .col-xl-4, .col-xl-5, .col-xl-6, .col-xl-7, .col-xl-8, .col-xl-9, .col-xl-auto {
    position:                   relative;
    width:                      auto;
    min-height:                 1px;
    padding-right:              15px;
    padding-left:               15px;
}

.accent1
{
    font-weight:                bold;
    color:                      #d0c273;
}

.accent2
{
    font-weight:                bold;
    color:                      #2d6db6;
}

.segment
{
    padding-right:              10px;
}

/*
    Container > Header
*/

.header
{
    background-color:           #a82147;
    color:                      #fff;
}

.header a
{
    color:                      #FFF !important;
    text-decoration:            none;
    padding-left:               7px;
}

.header .health
{
    color:                      #ff7575;
    text-decoration:            none;
}

.navbar
{
    padding:                    15px 0;
}

.navbar .brand svg
{
    width:                      28px;
    margin-left:                0px;
}

.navbar .social svg
{
    font-size:                  clamp(0.7em, 2vw, 1.0em);
    margin-left:                10px;
}

.navbar .social .heart
{
    position:                   relative;
    animation:                  heartbeat 1s infinite;
}

/*
    Container > Body > Intro
*/

.introduction
{
    padding-top: clamp(1.5em, 1vh, 2.5em);
    padding-bottom: clamp(1.5em, 1vh, 2.5em);
    border-bottom: 1px dashed #6C6C6C;
    margin-bottom: clamp(1.5em, 1vh, 2.5em);
}

.introduction .introduction-body
{
    display: flex;
    flex-direction: row;
    flex-wrap: nowrap;
    justify-content: space-between;
    padding-bottom: 20px;
}

.introduction .introduction-body > div
{
    height: clamp(6.8em, 1vw, 8.0em);
    font-family: -apple-system,BlinkMacSystemFont,"Segoe UI","Noto Sans",Helvetica,Arial,sans-serif,"Apple Color Emoji","Segoe UI Emoji";
    font-size: clamp(0.6em, 1vw, 0.9em);
    line-height: 1.6;
    word-wrap: break-word;
}

.introduction .introduction-body img.logo
{
    height: 100%;
    object-fit: contain;
    padding: 0px;
    padding-right: 0px;
    margin: 0 !important;
    display: flex;
    padding-right: 30px;
}

.introduction .introduction-body .desc
{
    text-align: justify;
}

.introduction .introduction-body .badges
{
    padding-top: clamp(1.5em, 1vh, 2.5em);
    text-align: center;
}

/*
    Object > Logo
*/

.logo
{
    animation-name:             fade-in, scale-in;
    animation-duration:         1s, 0.5s;
    animation-timing-function:  ease-in, linear;
    animation-direction:        alternate, alternate;
    animation-iteration-count:  infinite, 1;
    transition:                 all 0.3s;
    opacity:                    0.5;
    transform:                  scale(1.2);
}

.logo:hover
{
    animation-name:             scale-in, spin;
    animation-duration:         1s, 0.5s;
    animation-timing-function:  ease-in, linear;
    animation-direction:        alternate, alternate;
    animation-iteration-count:  infinite, 1;
    transition:                 all 0.3s;
    opacity:                    1;
    transform:                  scale(1.8);
}

img.logo-main
{
    width: 100px;
    height: auto;
}

.examples
{
    padding-top: clamp(2.4em, 1vw, 3.0em);
}

.restart
{
    animation-name:             fade-in, scale-in;
    animation-duration:         1s, 0.5s;
    animation-timing-function:  linear, linear;
    animation-direction:        alternate, alternate;
    animation-iteration-count:  infinite, 1;
    transition:                 all 0.3s;
    opacity:                    0.5;
    transform:                  scale(1.2);
}

.restart:hover
{
    animation-name:             spin-scale;
    animation-duration:         1s;
    animation-delay:            0s;
    animation-timing-function:  linear;
    animation-direction:        alternate;
    animation-iteration-count:  infinite;
    transition:                 all 0.3s;
    opacity:                    1;
}

.spin
{
    transition-property:        transform;
    transition-duration:        0.5s;
    animation-name:             spin;
    animation-duration:         0.5s;
    animation-iteration-count:  infinite;
    animation-timing-function:  linear;
}

/*
    Object > Table
*/

.table
{
    --bs-table-bg:              #1b1b1b;
    --bs-table-border-color:    #313131;
}

.table-striped > tbody > tr:nth-of-type(2n+1) > *
{
    --bs-table-bg-type:         #242424;
}

.table thead th a
{
    color:                      #9b9b9b !important;
    font-weight:                normal;
}

.table td, .table th
{
    padding:                    .35rem;
    vertical-align:             baseline;
    border-top:                 0px solid #dee2e6;
    font-size:                  clamp(0.5em, 1vw, 0.8em);
    line-height:                1.6;
}

.table thead tr
{
    border-bottom:              2px solid #325eb3;
}

.table thead th
{
    vertical-align:             bottom;
    border-bottom:              0px solid #325eb3;
}

.table-hover tbody tr:hover
{
    background-color:           rgba(155, 155, 155, 0.075);
}

/*
    Indicator > Container > Parent
*/

.ntfy-parent
{
    padding-top:                1.5vh;
    padding-bottom:             1.5vh;
    padding-left:               2vh;
    padding-right:              2vh;
    margin-bottom:              1vh;
    line-height:                clamp(1.8em, 1vw, 2.2em);
    width:                      100%;
}

/*
    Indicator > Container > Child

    contains tag and message
*/

.ntfy-child
{
    margin:                     0px;
}

/*
    Indicator > Message Body
*/

.ntfy-child .msg { }

/*
    Indicator > Note
*/

.indicator-note
{
    background-color:           #1A1A1A;
    font-size:                  clamp(0.5em, 1vw, 0.8em);
    font-weight:                100;
    border:                     1px dashed #2257a5;
    display:                    none;
}

.indicator-note a
{
    color:                      #346fc6 !important;
}

.indicator-note a:hover
{
    color:                      #346fc6 !important;
    text-decoration:            underline dotted #c5c5c5;
    font-weight:                600;
}

.indicator-note a svg
{
    color:                      #FFE300;
    font-size:                  16px;
}

.ntfy-child span.note
{
    color:                      #FFF;
    background-color:           #2257a5;
    padding-left:               7px;
    padding-right:              7px;
    padding-top:                2px;
    padding-bottom:             2px;
    font-family:                SFMono-Regular,Menlo,Monaco,Consolas,"Liberation Mono","Courier New",monospace;
    margin-right:               8px;
    animation-name:             fade-in, scale-in;
    animation-duration:         1s, 0.5s;
    animation-timing-function:  ease-in, linear;
    animation-direction:        alternate, alternate;
    animation-iteration-count:  infinite, 1;
    transition:                 all 0.3s;
    opacity:                    0.5;
    transform:                  scale(1.1);
}

/*
    Indicator > Warning
*/

.indicator-warning
{
    background-color:           #1A1A1A;
    font-size:                  clamp(0.5em, 1vw, 0.8em);
    font-weight:                100;
    border:                     1px dashed #FF6C00;
    display:                    none;
}

.indicator-warning a
{
    color:                      #FF6C00 !important;
}

.indicator-warning a:hover
{
    color:                      #FF6C00 !important;
    text-decoration:            underline dotted #c5c5c5;
    font-weight:                600;
}

.indicator-warning a svg
{
    color:                      #FF6C00;
    font-size:                  16px;
}

.ntfy-child span.warning
{
    color:                      #FFF;
    background-color:           #97950A;
    padding-left:               7px;
    padding-right:              7px;
    padding-top:                2px;
    padding-bottom:             2px;
    font-family:                SFMono-Regular,Menlo,Monaco,Consolas,"Liberation Mono","Courier New",monospace;
    margin-right:               8px;
    animation-name:             fade-in, scale-in;
    animation-duration:         1s, 0.5s;
    animation-timing-function:  ease-in, linear;
    animation-direction:        alternate, alternate;
    animation-iteration-count:  infinite, 1;
    transition:                 all 0.3s;
    opacity:                    0.5;
    transform:                  scale(1.1);
}

/*
    Indactor > Danger
*/

.indicator-danger
{
    background-color:           #1A1A1A;
    font-size:                  clamp(0.5em, 1vw, 0.8em);
    font-weight:                100;
    border:                     1px dashed #FF0048;
    display:                    none;
}

.indicator-danger a
{
    color:                      #FF0048 !important;
}

.indicator-danger a:hover
{
    color:                      #FF0048 !important;
    text-decoration:            underline dotted #c5c5c5;
    font-weight:                600;
}

.indicator-danger a svg
{
    color:                      #FF0048;
    font-size:                  16px;
}

.ntfy-child span.danger
{
    color:                      #FFF;
    background-color:           #aa102d;
    padding-left:               7px;
    padding-right:              7px;
    padding-top:                2px;
    padding-bottom:             2px;
    font-family:                SFMono-Regular,Menlo,Monaco,Consolas,"Liberation Mono","Courier New",monospace;
    margin-right:               8px;
    animation-name:             fade-in, scale-in;
    animation-duration:         1s, 0.5s;
    animation-timing-function:  ease-in, linear;
    animation-direction:        alternate, alternate;
    animation-iteration-count:  infinite, 1;
    transition:                 all 0.3s;
    opacity:                    0.5;
    transform:                  scale(1.1);
}

/*
    Indactor > Success
*/

.indicator-success
{
    background-color:           #1a1a1a;
    font-size:                  clamp(0.5em, 1vw, 0.8em);
    font-weight:                100;
    border:                     1px dashed #208848;
    display:                    none;
    z-index:                    5000 !important;
}

.indicator-success a
{
    color:                      #208848 !important;
}

.indicator-success a:hover
{
    color:                      #208848 !important;
    text-decoration:            underline dotted #c5c5c5;
    font-weight:                600;
}

.indicator-success a svg
{
    color:                      #208848;
    font-size:                  16px;
}

.ntfy-child span.success
{
    color:                      #FFF;
    background-color:           #227c1f;
    padding-left:               7px;
    padding-right:              7px;
    padding-top:                2px;
    padding-bottom:             2px;
    font-family:                SFMono-Regular,Menlo,Monaco,Consolas,"Liberation Mono","Courier New",monospace;
    margin-right:               8px;
    animation-name:             fade-in, scale-in;
    animation-duration:         1s, 0.5s;
    animation-timing-function:  ease-in, linear;
    animation-direction:        alternate, alternate;
    animation-iteration-count:  infinite, 1;
    transition:                 all 0.3s;
    opacity:                    0.5;
    transform:                  scale(1.1);
}

/*
    Container > Footer
*/

.footer
{
    position:                   absolute;
    bottom:                     0;
    width:                      100%;
    margin:                     0;
    padding-top:                20px;
}

.footer .sub
{
    margin:                     0;
    padding-bottom:             10px;
    padding-top:                10px;
    background-color:           #151515;
}

.footer .statistics
{
    font-size: 0.9rem;
    color: #717171;
}

.footer a,
.footer a:focus,
.footer a:hover
{
    color:                      #FFFFFF;
}

.footer a
{
    color:                      #f7296c;
}

/*
    Container > Placement
*/

.fixed-top
{
    position:                   fixed;
    top:                        0;
    right:                      0;
    left:                       0;
    z-index:                    200;
}

.fixed-bottom
{
    position:                   fixed;
    right:                      0;
    bottom:                     0;
    left:                       0;
    z-index:                    200;
}

.sticky-top
{
    @supports (position: sticky)
    {
        position:               sticky;
        top:                    0;
        z-index:                99999;
    }
}

.sticky-bottom
{
    position:                   -webkit-sticky;
    position:                   relative !important;
    bottom:                     0;
    z-index:                    500 !important;
}

.sticky-bottom
{
    @supports (position: sticky)
    {
        position:               sticky;
        bottom:                 0;
        z-index:                200;
    }
}

/*
    Effect > Dimmer
*/

#dimmer
{
	z-index:                    200;
    position:                   fixed;
    background-color:           #000000;
    width:                      100%;
    float:                      left;
    height:                     100%;
    visibility:                 hidden;
    top:                        0px;
    left:                       0px;
}

.aboveDimmer
{
	z-index:                    301;
    position:                   relative;
}

.dimmer-out
{
    transition:                 opacity 1s ease-in-out !important;
    opacity:                    0 !important;
}

.dimmer-in
{
    opacity:                    0.7;
    animation-name:             fade-in-dimmer, fade-in-dimmer-repeat;
    animation-delay:            0s, 0.7s;
    animation-duration:         0.7s, 1s;
    animation-timing-function:  ease-in, linear;
    animation-direction:        alternate, alternate;
    animation-iteration-count:  1, infinite;
    transition:                 opacity 250ms ease-in, visibility 0ms ease-in 250ms;
}

/*
    Breadcrumb
*/

.breadcrumb
{
    background-color:           transparent;
    padding:                    0rem 1rem;
}

.breadcrumb .breadcrumb-item a
{
    color:                      #4caf50;
}

#breadcrumbs::before
{
    margin-top:                 4px;
    padding-right:              15px;
    content:                    url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 576 512' fill='white' width='19px' height='19px'%3E%3Cdefs%3E%3Cstyle%3E.fa-secondary%7Bopacity:.4%7D%3C/style%3E%3C/defs%3E%3Cpath class='fa-primary' d='M160 384H512c35.3 0 64-28.7 64-64V160c0-35.3-28.7-64-64-64H394.5c-17 0-33.3-6.7-45.3-18.7L322.7 50.7c-12-12-28.3-18.7-45.3-18.7H160c-35.3 0-64 28.7-64 64V320c0 35.3 28.7 64 64 64z'%3E%3C/path%3E%3Cpath class='fa-secondary' d='M24 96c13.3 0 24 10.7 24 24V344c0 48.6 39.4 88 88 88H456c13.3 0 24 10.7 24 24s-10.7 24-24 24H136C60.9 480 0 419.1 0 344V120c0-13.3 10.7-24 24-24z'%3E%3C/path%3E%3C/svg%3E");
}

.breadcrumb-item.active
{
    color:                      #6c757d;
    padding-left:               10px;
}

.breadcrumb
{
    padding-top:                30px;
}

/*
    Container > Lists
*/

#list a,
#list a:focus
{
    color:                      #bbbbbb;
    font-weight:                100;
    cursor:                     pointer;
}

#list a:hover
{
    color:                      #FFF !important;
    text-decoration:            underline dotted #FF0048;
    font-weight:                100;
}

#list colgroup
{
    display:                    none;
}

#list .file
{
    word-break:                 keep-all;
    white-space:                normal;
    min-width:                  7vw !important;
    text-wrap:                  nowrap;
    font-size:                  clamp(0.5em, 1vw, 0.8em);
    font-weight:                800;
    vertical-align:             middle;
}

#list .file a
{
    font-weight:                600;
}

#list .link
{
    white-space: normal;
    min-width: 9vw !important;
    font-size: clamp(0.5em, 1vw, 0.8em);
    vertical-align: middle;
    overflow-wrap: break-word;
}

#list .link a
{
    color:                      #ff286e;
    font-weight:                400;
}

#list .link a:hover
{
    color:                      #ffffff;
    font-weight:                400;
}

#list .icon
{
    font-size:                  2.2vmin;
    vertical-align:             middle;
    color:                      #5b5b5b;
}

#list .size,
#list .date,
#list .example
{
    min-width:                  5vw !important;
    font-size:                  clamp(0.5em, 1vw, 0.8em);
    word-break:                 break-all;
    white-space:                normal;
    text-wrap:                  nowrap;
    vertical-align:             middle;
}

#list .desc
{
    font-size:                  clamp(0.5em, 1vw, 0.8em);
    vertical-align:             middle;
}



span.success
{
    color:                      #FFF;
    background-color:           #97950A;
    padding-left:               7px;
    padding-right:              7px;
    padding-top:                2px;
    padding-bottom:             2px;
    font-family:                SFMono-Regular,Menlo,Monaco,Consolas,"Liberation Mono","Courier New",monospace;
    margin-right:               8px;
    animation-name:             fade-in, scale-in;
    animation-duration:         1s, 0.5s;
    animation-timing-function:  ease-in, linear;
    animation-direction:        alternate, alternate;
    animation-iteration-count:  infinite, 1;
    transition:                 all 0.3s;
    opacity:                    0.5;
    transform:                  scale(1.1);
}

span.notice
{
    color:                      #FFF;
    background-color:           #97950A;
    padding-left:               7px;
    padding-right:              7px;
    padding-top:                2px;
    padding-bottom:             2px;
    font-family:                SFMono-Regular,Menlo,Monaco,Consolas,"Liberation Mono","Courier New",monospace;
    margin-right:               8px;
    animation-name:             fade-in, scale-in;
    animation-duration:         1s, 0.5s;
    animation-timing-function:  ease-in, linear;
    animation-direction:        alternate, alternate;
    animation-iteration-count:  infinite, 1;
    transition:                 all 0.3s;
    opacity:                    0.5;
    transform:                  scale(1.1);
}

span.warning
{
    color:                      #FFF;
    background-color:           #aa102d;
    padding-left:               7px;
    padding-right:              7px;
    padding-top:                2px;
    padding-bottom:             2px;
    font-family:                SFMono-Regular,Menlo,Monaco,Consolas,"Liberation Mono","Courier New",monospace;
    margin-right:               8px;
    animation-name:             fade-in, scale-in;
    animation-duration:         1s, 0.5s;
    animation-timing-function:  ease-in, linear;
    animation-direction:        alternate, alternate;
    animation-iteration-count:  infinite, 1;
    transition:                 all 0.3s;
    opacity:                    0.5;
    transform:                  scale(1.1);
}