tvapp2/tvapp2/www/css/tvapp2.min.css

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

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

@-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 scale-in
{
    from {
        transform:              scale(1, 1);
    }
    to {
        transform:              scale(1.1, 1.1);
    }
}

.container
{
    text-align:                 left;
}

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

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

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

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

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

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

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

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

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

.header .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.1);
}

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

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

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

.footer a
{
    color:                      #f7296c;
}

.navbar
{
    padding:                    15px 0;
}

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

.header .navbar-brand
{
    padding:                    0 8px;
    font-size:                  16px;
    line-height:                24px;
    height:                     24px;
}

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

#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;
}

.header-container
{
    padding-top:                30px;
}

#list a,
#list a:focus
{
    color:                      #ff286e !important;
    font-weight:                100;
}

#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:                  8vw !important;
    text-wrap:                  nowrap;
    font-size:                  clamp(0.7em, 1vw, 0.9em);
    font-weight:                800;
    vertical-align:             middle;
}

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

#list .link
{
    word-break:                 break-all;
    white-space:                normal;
    min-width:                  11vw !important;
    text-wrap:                  nowrap;
    font-size:                  clamp(0.7em, 1vw, 0.9em);
    vertical-align:             middle;
}

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

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

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

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

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

.table thead tr
{
    border-bottom:              2px solid #575757;
    background-color:           #181818;
    color:                      #717171;
}

.table thead th
{
    vertical-align:             bottom;
    border-bottom:              0px solid #575757;
    font-size:                  clamp(0.7em, 1vw, 0.9em);
    line-height:                2.5vmin;
}

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

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

#warning-firewall
{
    background-color:           #1A1A1A;
    padding:                    2vh;
    margin-bottom:              1vh;
    font-size:                  clamp(0.7em, 1vw, 0.9em);
    font-weight:                100;
    border:                     1px dashed #FF6C00;
    width:                      100%;
    line-height:                25px;
}

#warning-localhost
{
    background-color:           #1A1A1A;
    padding:                    2vh;
    font-size:                  clamp(0.7em, 1vw, 0.9em);
    font-weight:                100;
    border:                     1px dashed #FF0048;
    width:                      100%;
    line-height:                25px;
}

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);
}

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

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

.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;
}

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

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

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

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