html,body{
    font-family: "Roboto", sans-serif;
    font-size:16px;
    font-weight: 400;
    height:100%;
}

body.site {
    background: radial-gradient(ellipse at center,  rgba(255,255,255,1) 48%,rgba(199,216,229,1) 100%); 
    display:flex;
    overflow-x:hidden;
}

/* SITE OUTLINE */
.outlines{
    height:100%;
    left:0;
    pointer-events:none;
    position:fixed;
    top:0;
    width:100%;
    z-index:1001;
}

.outlines .line-top,
.outlines .line-bottom{
    background:white;
    height:4px;
    position:absolute;
    width:100%;
}

.outlines .line-top{
    left:0;
    top:0;
}

.outlines .line-bottom{
    bottom:0;
    left:0;
}

.outlines .line-left,
.outlines .line-right{
    background:white;
    height:100%;
    position:absolute;
    width:4px;
}

.outlines .line-left{
    left:0;
    top:0;
}

.outlines .line-right{
    right:0;
    top:0;
}

/* HEADER */
header.header{
    height:100%;
    left:0;
    overflow:hidden;
    pointer-events:none;
    position:fixed;
    top:0;
    width:100%;
    z-index:1000;
}

header.header .mobile-header{
    background:black;
    height:60px;
    left:0;
    position:absolute;
    top:0;
    width:100%;
}

header.header .mobile-header:before{
    background:rgba(234, 164, 37,0.5);
    bottom:-2px;
    content:'';
    height:3px;
    left:0;
    position:absolute;
    width:100%;
}

header.header .mobile-header:after{
    background:#f4e871;
    bottom:0;
    content:'';
    height:1px;
    left:0;
    position:absolute;
    width:100%;
}

header.header .mobile-header .toggle{
    cursor:pointer;
    height:30px;
    pointer-events:all;
    position:absolute;
    right:15px;
    top:15px;
    width:30px;
}

header.header .mobile-header .toggle .bar{
    background:white;
    border-radius:0 5px 5px 0;
    height:5px;
    left:0;
    position:absolute;
    transform-origin: 50% 50%;
    width:100%;
}

header.header .mobile-header .toggle .bar.top{
    top:0;
    transition:600ms top, 600ms transform, 600ms border-radius;
}

header.header .mobile-header .toggle .bar.middle{
    top:50%;
    transform:translate3d(0, -50%, 0);
    transition:600ms height;
}

header.header .mobile-header .toggle .bar.bottom{
    bottom:0;
    transition:600ms bottom, 600ms transform, 600ms border-radius;
}

header.header .logo{
    background:url(../assets/CQ-logo-sm.webp) no-repeat center;
    background-size:contain;
    display:block;
    height:60px;
    left:50%;
    pointer-events:all;
    position:absolute;
    top:7px;
    transform:translate3d(-50%, 0px, 0);
    width:100px;
    z-index:10;
}

header.header .navbar{
    align-items:flex-start;
    background:rgba(0,0,0,0.8);
    display:flex;
    flex-direction:column;
    height:calc(100% - 60px);
    justify-content:flex-start;
    pointer-events:all;
    position:absolute;
    text-align:left;
    top:60px;
    transform:translate3d(-100%, 0,0);
    transition:800ms transform;
    width:100%;
}

header.header .navbar a,
header.header .navbar a:visited{
    color:white;
    font-size:18px;
    font-weight:600;
    padding:5px 0;
}

header.header .navbar a img{
    height:18px;
}

header.header .navbar .nav{
    flex-direction:column;
    margin-top:50px;
}

header.header .navbar .nav li a{
    padding-right: 0;
    padding-left: 0;
}

header.header .navbar .dropdown .dropdown-toggle:after{
    display:none;
}

header.header .navbar .dropdown-menu{
    background:none;
    display:block;
    margin-left:15px;
}

header.header .navbar .dropdown-menu .dropdown-item:hover{
    background:none;
}

/* HEADER TOGGLED*/
header.header.toggled .navbar{
    transform:translate3d(0, 0,0);
    transition:250ms transform;
}

header.header.toggled .mobile-header .toggle .bar.top{
    border-radius:5px 5px 5px 5px;
    top:50%;
    transform:translate3d(0, -50%, 0) rotate(45deg);
    transition:250ms top, 250ms transform, 250ms border-radius;
}

header.header.toggled .mobile-header .toggle .bar.middle{
    height:0;
    top:50%;
    transform:translate3d(0, -50%, 0);
    transition:250ms height;
}

header.header.toggled .mobile-header .toggle .bar.bottom{
    border-radius:5px 5px 5px 5px;
    bottom:50%;
    transform:translate3d(0, 50%, 0) rotate(-45deg);
    transition:250ms bottom, 250ms transform, 250ms border-radius;
}

#logout-button {
    right: 0px;
    position: absolute;
    margin-right: 3vw;
}

main{
    overflow-x:hidden;
    position:relative;
    width:100%;
}

main .container{
    display:flex;
    flex-direction:column;
    padding-bottom:60px;
    padding-top: 60px;
    margin-top:60px;
    position:relative;
}

body main .container .wrapper .title-text:has(.btn){
    align-items:flex-start;
    display:flex;
    flex-direction:column;
}

body main .container .wrapper .title-text .title{
    font-size: 34px;
    font-weight: 300;
}

body main .container .wrapper .title-text .title .alert{
    font-size:16px;
    font-weight:400;
    padding:0;
}

/* FORMS */
.form-container{
    margin-top:30px;
}

form .field input,
form .field select{
    background:rgb(243 226 252);
    border-radius:0;
    border-bottom:1px solid rgba(255,255,255,0.8);
    border-left:2px solid rgba(0,0,0,0.8);
    border-right:1px solid rgba(255,255,255,0.8);
    border-top:2px solid rgba(0,0,0,0.8);
    color:black;
    font-size:16px;
    padding:4px 8px;
    width:100%;
}

form .field select{
    padding:6px 8px;
}


form .fieldset{
    align-items:flex-end;
    display:flex;
    flex-direction:column;
    width:100%;
}

form .field input.btn,
body main .btn{
    background: rgb(59, 140, 255);
    border-radius:50px;
    border-bottom:none;
    border-left:none;
    border-right:none;
    border-top:none;
    color: white;
    padding:4px 24px;
    transition:1200ms background;
}

form .field input.btn.toggle-on,
form .field input.btn.toggle-off,
body main .btn.toggle-on,
body main .btn.toggle-off{
    background:white;
    color:black;
    padding-top:7px;
}

body main .btn:hover {
    background: rgb(137, 185, 253);
    transition:250ms background;
}

form .field input.btn.btn-danger,
body main .btn.btn-danger{
    background:rgb(145 33 33);
}

form .field input.btn.btn-danger:hover,
body main .btn.btn-danger:hover{
    background:rgb(221 54 99);
}

.form-container .field.checkbox input{
    margin-right:10px;
    width:20px;
}

/* MAIN CONTAINER*/
body main{
    align-items:center;
    background:url(../assets/wallpaper-suits.jpg);
    background-size:20%;
    display:flex;
    flex-direction:column;
}

body main .container{
    background:rgba(101, 8, 151, 0);
    color:rgb(243 226 252);
    margin-top:140px;
    margin-bottom: 100px;
    max-width: 1200px;
    padding:30px;
    transition:1200ms background 2000ms;
    width:calc(100% - 60px);
}


body.in main .container{
    background:rgba(101, 8, 151, 0.4);
}

body.in main .container:before{
    backdrop-filter: blur(4px) opacity(1);
    -webkit-backdrop-filter: blur(4px) opacity(1);
    transition:1200ms backdrop-filter, 1200ms -webkit-backdrop-filter, 1200ms background;
    opacity:1;
}

body.in main .container:after{
    border-top: 1px solid white;
    border-left: 1px solid white;
    border-right: 1px solid rgba(0, 0, 0, 0.3);
    border-bottom: 1px solid rgba(0, 0, 0, 0.8);
    transition:1200ms opacity, 1200ms border-top, 1200ms border-left, 1200ms border-right, 1200ms border-bottom;
    opacity:1;
}

main .container:before{ 
    backdrop-filter: blur(4px) opacity(0);
    -webkit-backdrop-filter: blur(4px) opacity(0);
    filter: grayscale(0.2);
    content:'';
    height:100%;
    left:0;
    opacity:0;
    position:absolute;
    top:0;
    width:100%;
    z-index:0;
}

main .container:after{ 
    background: linear-gradient(45deg,  rgba(115, 0, 175, 0.2) 0%,rgba(115, 0, 175, 0.75) 32%,rgba(115, 0, 175,0.2) 72%,rgba(115, 0, 175,0.5) 100%);
    border-top: 1px solid rgba(255,255,255,0);
    border-left: 1px solid rgba(255,255,255,0);
    border-right: 1px solid rgba(0, 0, 0, 0);
    border-bottom: 1px solid rgba(0, 0, 0, 0);
    content:'';
    height:100%;
    left:0;
    opacity:0;
    position:absolute;
    top:0;
    width:100%;
    z-index:0;
}

main .container .wrapper{
    opacity:0;
    position:relative;
    transition:1200ms opacity;
    z-index:1;
}

body.in main .container .wrapper{
    opacity:1;
}

main .container .wrapper.videos .row{
    margin-left:0;
    margin-right:0;
}

/* NAV CATEGORIES */
main .wrapper nav{
    background:rgba(0,0,0,0.4);
    border-left:1px solid rgba(0,0,0,0.8);
    border-top:1px solid rgba(0,0,0,0.8);
    border-bottom:1px solid rgba(255,255,255,0.3);
    border-right:1px solid rgba(255,255,255,0.3);
    display:flex;
    gap:10px;
    justify-content:center;
    margin-bottom:20px;
    padding:4px;
}

body main .nav-categories a,
body main .nav-categories a:visited,
body main .nav-categories a:active{
    color:rgba(255,255,255,0.8);
}

body main .nav-categories a.selected,
body main .nav-categories a.active{
    color:white;
}

body main .nav-categories a:hover{
    color:white;
    text-decoration:none;
}

/* TABLE */
main .wrapper .table thead{
    background-color:transparent;
    border-bottom:1px solid rgba(255,255,255, 1);
    border-top:1px solid rgba(255,255,255, 1);
    border-left:none;
    border-right:none;
}

main .wrapper .table thead th,
main .wrapper .table th,
main .wrapper .table td{
    border-bottom:none;
    border-top:none;
}

main .wrapper .table thead th{
    text-align:center;
}

main .wrapper .table tr{
    position:relative;
}

main .wrapper .table tbody tr{
    border-top:1px solid rgba(255,255,255,0.25);
    transition:1200ms background;
}

main .wrapper .table tbody tr:hover{
    background:rgba(124, 59, 183, 0.5);
    transition:250ms background;
}

main .wrapper .table tbody tr:first-child{
    border-top:none;
}

body.in main .wrapper .table tr:before{
    transform:translate3d(-50%, 0,0) scaleX(1);
    transition:1500ms transform;
}

main .wrapper .table tbody tr td{
    text-align:center;
}

main .wrapper .table tbody tr td.clickable{
    cursor:pointer;
}

main .wrapper .table tbody tr td.clickable:hover{
    text-decoration:underline;
}


/* COLLAPSIBLE */
.collapsible-content{
    margin-top:30px;
}

.collapsible-content .collapse,
.collapsible-content .collapsing{
    margin-bottom:30px;
    position:relative;
}

.collapsible-content .collapse:after,
.collapsible-content .collapsing:after{
    border-bottom:1px solid rgba(255,255,255,0.5);
    border-top:2px solid rgba(0,0,0,0.5);
    top:0;
    content:'';
    height:1px;
    left:0;
    position:absolute;
    transform:translate3d(0, -15px, 0);
    width:100%;
}

.collapsible-content .collapse form,
.collapsible-content .collapsing form{
    display:flex;
    flex-direction:row;
    flex-wrap:wrap;
    gap:10px;
}

.collapsible-content .collapse form span,
.collapsible-content .collapsing form span{
    width: calc(50% - 5px);
}

.collapsible-content .collapse form span select,
.collapsible-content .collapsing form span select{
    padding:7px 8px;
    width:100%;
}

.collapsible-content .collapse form span input,
.collapsible-content .collapsing form span input{
    padding:4px 8px;
    width:100%;
}

.collapsible-content .collapse .btn-container,
.collapsible-content .collapsing .btn-container{
    margin-top:10px;
    width:100%;
}

.banner{
    background: linear-gradient(45deg,  #8e1c3e 0%,#bc202a 25%,#8e1c3e 51%,#bc202a 85%,#8e1c3e 100%);
    bottom:0;
    height:auto;
    left:0;
    padding:5px 0;
    position:absolute;
    transform:translate3d(0,100%, 0);
    width:100%;
}

.banner a,
.banner a:active,
.banner a:visited{
    color:white;
    display:flex;
    justify-content:center;
    position:relative;
    text-decoration:none;
}

.banner .banner-content{
    max-width:1200px;
    width:calc(100% - 200px);
}

.banner .banner-bg{
    height:100%;
    left:0;
    position:absolute;
    top:0;
    width:100%;
}

.btn-set{
    display:flex;
    flex-wrap:wrap;
    gap:15px;
    justify-content:center;
    margin-top:15px;
}

.btn-set.left{
    justify-content:flex-start;
}



/*
USERNAME DISPLAY
*/

.user-tiered{
    align-self:flex-start;
    position:relative;
    z-index:1;
}

.user-tiered .rank{
    height:30px;
    position:absolute;
    transform: translate3d(-18px, -14px, 0);
    width:30px;
}

.user-tiered.right .rank{
    right:0;
    transform: translate3d(18px, -14px, 0);
}

.user-tiered .rank .rank-color{
    border-radius:50%;
    height:100%;
    overflow:hidden;
    position:absolute;
    width:100%;
}

.user-tiered .rank .rank-color:before{
    background: linear-gradient(135deg,  rgba(0,0,0,0.48) 0%,rgba(0,0,0,0) 50%,rgba(255,255,255,0.78) 93%,rgba(255,255,255,0.8) 94%,rgba(255,255,255,1) 100%); /* W3C, IE10+, FF16+, Chrome26+, Opera12+, Safari7+ */
    content:'';
    height:100%;
    left:0;
    position:absolute;
    transform:scale(-1);
    transform-origin:50% 50%;
    top:0;
    width:100%;
}

.user-tiered .rank .icon-design{
    background:url(../assets/username-icon.png)no-repeat center;
    background-size:contain;
    height:100%;
    position:relative;
    width:100%;
}

.user-tiered.right .rank .icon-design{
    transform:scaleX(-1);
    transform-origin:50% 50%;
}

.user-tiered .username{
    
    border-radius:18px 5px 5px 5px;
    color:white;
    left:0;
    overflow: hidden;
    padding: 4px 9px 5px;
    position:relative;
}

.user-tiered.right .username{
    border-radius:5px 18px 5px 5px;
}

.user-tiered .username .bg{
    border-radius:5px;
    height:100%;
    left:0;
    position:absolute;
    top:0;
    width:100%;
}

.user-tiered .username .bg.bg-color:before{
    background: linear-gradient(135deg,  rgba(0,0,0,0.2) 0%,rgba(255,255,255,0.2) 100%); /* W3C, IE10+, FF16+, Chrome26+, Opera12+, Safari7+ */
    content:'';
    height:100%;
    left:0;
    position:absolute;
    top:0;
    transform:scale(-1);
    width:100%;
}

.user-tiered.right .username .bg.bg-color:before{
    transform:scaleX(-1);
}

.user-tiered .username .bg.rim{
    border:0.5px solid rgba(255,255,255,0.7);
    transform:translate3d(-1px, -1px, 0);
    z-index:1;
}

.user-tiered .username .bg.rim.highlighted{
    border:1.5px solid black;
    transform:translate3d(0, 0, 0);
}

.user-tiered .username .username-name{
    color:black;
    font-size: 13px;
    font-weight:800;
    position:relative;
}

.user-tiered .username .username-name.highlighted{
    color:rgba(255,255,255,0.7);
    font-weight:800;
    position:absolute;
    transform: translate3d(0.5px, 0.5px, 0);
}

.user-tiered .rank-num{
    height:30px;
    left:0;
    position:absolute;
    top:0;
    transform: translate3d(-19px, -14px, 0);
    width:30px;
}

.user-tiered.right .rank-num{
    left:auto;
    right:0;
    transform: translate3d(18px, -14px, 0);
}

.user-tiered .rank-num span{
    color:white;
    font-size:17px;
    font-weight:800;
    position:absolute;
    left:50%;
    text-align:center;
    top:50%;
    transform:translate3d(-50%, -50%, 0);
    z-index:1;
}
.user-tiered .rank-num span.shadow{
    color:black;
    transform:translate3d(calc(-50% + 2px), calc(-50% + 2px), 0);
    z-index:0;
}


@media screen and (min-width:768px){

    header.header .mobile-header{
        display:none;
    }

    header.header .logo{
        left:10px;
        height:80px;
        top:0;
        transform: translate3d(0, 2px, 0);
        width:80px;
    }

    header.header .navbar{
        align-items:center;
        flex-direction:row;
        height:auto;
        justify-content:space-between;
        padding: 8px 16px 8px 86px;
        position:relative;
        top:0;
        transform:none;
        transition:none;
    }

    header.header .navbar:before{
        background:rgba(234, 164, 37,0.5);
        bottom:-2px;
        content:'';
        height:3px;
        left:0;
        position:absolute;
        width:100%;
    }
    
    header.header .navbar:after{
        background:#f4e871;
        bottom:0;
        content:'';
        height:1px;
        left:0;
        position:absolute;
        width:100%;
    }

    header.header .navbar .navbar-nav{
        flex-direction:row;
        padding-left:0px;
    }

    header.header .navbar .dropdown .dropdown-toggle{
        margin-right:10px;
        position:relative;
    }

    header.header .navbar .dropdown .dropdown-toggle:after{
        display:block;
        position:absolute;
        right:0;
        top:11px;
    }

    header.header .navbar .dropdown-menu{
        background:black;
        border:none;
        border-radius:0;
        display:none;
        margin-left:0;
    }

    header.header .navbar .dropdown-menu.show{
        display:block;
        position:absolute;
    }

    header.header .navbar .dropdown-menu .dropdown-item,
    header.header .navbar .dropdown-menu .dropdown-item:visited,
    header.header .navbar .dropdown-menu .dropdown-item:active{
        color:white;
    }

    header.header .navbar .dropdown-menu .dropdown-item:before{
        background:rgba(255,255,255,0.3);
        content:'';
        height:100%;
        left:0;
        position:absolute;
        top:0;
        transform-origin:0 0;
        transform:scaleX(0);
        transition:1200ms transform;
        width:100%;
    }

    header.header .navbar .dropdown-menu .dropdown-item:hover:before{
        transform:scaleX(1);
        transition:250ms transform;
    }

    header.header .navbar a, 
    header.header .navbar a:visited{
        font-size:12px;
        padding: 4px 10px;
        position:relative;
    }

    header.header .nav-item:first-child .navbar a, 
    header.header .nav-item:first-child .navbar a:visited{
        padding: 0;
    }

    header.header .navbar .nav{
        flex-direction:row;
        margin-top:0;
    }

    header.header .navbar .nav li a{
       padding:4px 10px;
    }

    main .container{
        margin-top: 45px;
        padding-top: 60px;
    }

    body main .container .wrapper .title-text:has(.btn){
        align-items:center;
        display:flex;
        flex-direction:row;
        gap:10px;
        justify-content:flex-end;
    }

    body main .container .wrapper .title-text:has(.btn) .title{
        margin-left:0;
        margin-right: auto;
    }

    /* FORMS */
    
    form .field input.btn:hover{
        background:rgb(137, 185, 253);
        transition:250ms background;
    }

    form .fieldset{
        flex-direction:row;
    }

    /* COLLAPSIBLE */
    .collapsible-content .collapse form span,
    .collapsible-content .collapsing form span,
    .collapsible-content .collapse form span.w-100,
    .collapsible-content .collapsing form span.w-100{
        width: auto !important;
    }

    .collapsible-content .collapse form span.w-100,
    .collapsible-content .collapsing form span.w-100{
        flex:1;
    }
}

@media screen and (min-width:1200px){

    header.header .navbar a, 
    header.header .navbar a:visited{
        font-size:14px;
    }
}