/*
* Globals
*/


.orange                             { color:#ff8400 !important}
.red                                { color:#e21102 !important}
.white                              { color:#ffffff !important}
.purple                             { color:#a970ff !important}
.tweet                              { color:#08aef1 !important}
/*
rgba(255, 132, 0, 1)
*/

a                                   { color:#ff8400}

body                                { height: 100%; background-position: center;
                                        text-shadow:0 .05rem .1rem rgba(0, 0, 0, .5);}
.text-bg-dark                       { background-image: linear-gradient(to bottom, rgba(14, 23, 32, 0.59) 25%, rgba(0, 0, 0, 100) 80%), url('../images/backgrounds/pio_3.jpg'); background-repeat:no-repeat; background-attachment: fixed;}
header                              { margin-bottom: 20px;}
.bg-dark                            { background-color: rgba(14, 23, 30, 1) !important}
.btn                                { --bs-btn-padding-x: 1.8rem; --bs-btn-padding-y: 0.6rem; border-radius:6px;}
/* Custom default button */

.btn-light, .btn-light:hover,
.btn-light:focus                    { color: #333; text-shadow: none; /* Prevent inheritance from `body` */}
span.highlight                      { color: #ff8400; font-weight:bold}
h3.card-title                       { color: #ff8400; font-weight:bold}
h5.tag                              { font-size:19px; color:#ff8400}
h5.tagVal                           { font-size:19px; color:#6b0c00}
h5.tag span                         { font-size:13px; margin:0 10px; color:#ffffff; padding-bottom:2px}
h5.tag span.next                    { border-bottom:2px solid #ffffff;}
.text-left                          { text-align:left}

.mr-20                              { margin-right:20px}


.games                              { text-align:center}
.games .game                        { display:inline-block; max-width: 45%; margin: 0 auto 30px 0}
.games .game .btn-game              { background: rgba(34, 34, 34, 0.5); border-radius:8px; border: 1px solid #ff8400; display: inline-block; margin:auto 2px}
.game .btn-game img                 { display:inline-block; width: 280px; height:auto; min-height:45px;}
.btn-game-sf                        { min-height:140px}
.btn-game-sf img                    { margin:40px auto;}
.btn-game-val                       { min-height:140px}
.btn-game-val img                   { margin:11px auto;}
.btn-game-mc                        { min-height:140px}
.btn-game-mc img                    { margin:32px auto;}


.dropdown-item                      { color:#efefef}
.dropdown-item:hover                { color:#efefef; background-color: rgba(14, 23, 30, 0.69) !important}

.btn-primary {
    --bs-btn-color: #222;
    --bs-btn-bg: #ff8400;
    --bs-btn-border-color: #ff8400;
    --bs-btn-hover-color: #222;
    --bs-btn-hover-bg: #ae5a00;
    --bs-btn-hover-border-color: #ae5a00;
    --bs-btn-focus-shadow-rgb: 60,153,110;
    --bs-btn-active-color: #222;
    --bs-btn-active-bg: #ae5a00;
    --bs-btn-active-border-color: #222;
    --bs-btn-active-shadow: inset 0 3px 5px rgba(0, 0, 0, 0.125);
    --bs-btn-disabled-color: #222;
    --bs-btn-disabled-bg: #ff8400;
    --bs-btn-disabled-border-color: #ff8400;
}
.btn-outline-primary {
  --bs-btn-color: #ff8400;
  --bs-btn-border-color: #ff8400;
  --bs-btn-hover-color: #fff;
  --bs-btn-hover-bg: #ff8400;
  --bs-btn-hover-border-color: #ff8400;
  --bs-btn-focus-shadow-rgb: 13,110,253;
  --bs-btn-active-color: #fff;
  --bs-btn-active-bg: #ff8400;
  --bs-btn-active-border-color: #ff8400;
  --bs-btn-active-shadow: inset 0 3px 5px rgba(0, 0, 0, 0.125);
  --bs-btn-disabled-color: #ff8400;
  --bs-btn-disabled-bg: transparent;
  --bs-btn-disabled-border-color: #ff8400;
  --bs-gradient: none;
}
.btn-success {
    --bs-btn-color: #222;
    --bs-btn-bg: #ff8400;
    --bs-btn-border-color: #ff8400;
    --bs-btn-hover-color: #222;
    --bs-btn-hover-bg: #ae5a00;
    --bs-btn-hover-border-color: #ae5a00;
    --bs-btn-focus-shadow-rgb: 60,153,110;
    --bs-btn-active-color: #222;
    --bs-btn-active-bg: #ae5a00;
    --bs-btn-active-border-color: #222;
    --bs-btn-active-shadow: inset 0 3px 5px rgba(0, 0, 0, 0.125);
    --bs-btn-disabled-color: #222;
    --bs-btn-disabled-bg: #ff8400;
    --bs-btn-disabled-border-color: #ff8400;
}
.btn-secondary {
    --bs-btn-color: #222;
    --bs-btn-bg: #a970ff;
    --bs-btn-border-color: #a970ff;
    --bs-btn-hover-color: #222;
    --bs-btn-hover-bg: #6a38b6;
    --bs-btn-hover-border-color: #6a38b6;
    --bs-btn-focus-shadow-rgb: 60,153,110;
    --bs-btn-active-color: #222;
    --bs-btn-active-bg: #a970ff;
    --bs-btn-active-border-color: #222;
    --bs-btn-active-shadow: inset 0 3px 5px rgba(0, 0, 0, 0.125);
    --bs-btn-disabled-color: #222;
    --bs-btn-disabled-bg: #a970ff;
    --bs-btn-disabled-border-color: #a970ff;
}
.btn-secondary2 {
    --bs-btn-color: #222;
    --bs-btn-bg: #6f2cd4;
    --bs-btn-border-color: #6f2cd4;
    --bs-btn-hover-color: #222;
    --bs-btn-hover-bg: #43158a;
    --bs-btn-hover-border-color: #43158a;
    --bs-btn-focus-shadow-rgb: 60,153,110;
    --bs-btn-active-color: #222;
    --bs-btn-active-bg: #6f2cd4;
    --bs-btn-active-border-color: #222;
    --bs-btn-active-shadow: inset 0 3px 5px rgba(0, 0, 0, 0.125);
    --bs-btn-disabled-color: #222;
    --bs-btn-disabled-bg: #6f2cd4;
    --bs-btn-disabled-border-color: #6f2cd4;
}
.btn-outline-secondary {
  --bs-btn-color: #a970ff;
  --bs-btn-border-color: #a970ff;
  --bs-btn-hover-color: #fff;
  --bs-btn-hover-bg: #6a38b6;
  --bs-btn-hover-border-color: #6a38b6;
  --bs-btn-focus-shadow-rgb: 13,110,253;
  --bs-btn-active-color: #fff;
  --bs-btn-active-bg: #a970ff;
  --bs-btn-active-border-color: #a970ff;
  --bs-btn-active-shadow: inset 0 3px 5px rgba(0, 0, 0, 0.125);
  --bs-btn-disabled-color: #a970ff;
  --bs-btn-disabled-bg: transparent;
  --bs-btn-disabled-border-color: #a970ff;
  --bs-gradient: none;
}
.btn-small                          { padding: 0px 6px; margin: 0 0 0 10px}

div.time_now                        { font-size: 30px; color:#00b118}
div.time_now span                   { font-weight:bold; color:#e21102}
div.time_now i                      { color:#00b118}

.fl-right                           { float:right}
.clear                              { clear:both}

select                              { appearance:auto; -webkit-appearance: auto; -moz-appearance: auto;}
.prepend                            { border-top-right-radius:0; border-bottom-right-radius:0}
.select.prepend                     { height:40px; margin:0;}
.select.prepend, .select.append     { appearance:auto; -webkit-appearance: auto; -moz-appearance: auto;}
.btn.append                         { height:40px; margin:-5px 0 0 0}
.append                             { border-top-left-radius:0; border-bottom-left-radius:0; line-height:18px}

.input-group .form-control          { display:inline-block}
input#terms                         { width: 40px; height: 40px; margin-left:10px}
label.terms_label                   { font-size:30px;}
select#participant_level            { max-width:260px}
select#feedback_category            { max-width:260px}
textarea#feedback_text              { max-width:800px; margin: 10px auto;}


.big-btn                            { font-size:24px}
a.basic                             { text-decoration:none; font-weight:bold; color:#ff8400}
a.vid                               { background-color:#ff0000}
iframe.yt-e-vid                     { width:560px; height:315px; margin:20px auto}
#uMessage                           { display:none; position:fixed; width:100%; z-index:999}
#uMessage li                        { margin-right:30px}
/*
* Base structure
*/
ol, ul                              { padding-left:0}

h1                                  { color:#ff8400}
h1.homeh1                           { margin:140px auto 10px}
.cover-container                    { max-width:1080px; z-index:10;}

a.close-notify                      { position:absolute; top:2px; right:10px; padding:6px 8px; font-size:20px;}
/*
* Header
*/
.navbar-brand img                   { max-height:69px; margin-left:16px}
.nav-masthead .nav-link             { color:rgba(255, 255, 255, .5); color:#ffffff; border-bottom: .25rem solid transparent; max-height: 37px;}
.nav-masthead .dropdown-custom      {}
.nav-masthead .nav-link span        { color:#ffffff; padding:0 15px 0 15px}
.nav-masthead .nav-link:hover,      
.nav-masthead .nav-link:focus       { border-bottom-color: rgba(255, 255, 255, 100);}
.nav-masthead .bt-twitch            { border-bottom-color: rgba(100, 65, 165, 100); position:relative; margin-right:45px}
.nav-masthead .nav-twitch           { top:-11px; position: relative; border-bottom:none}
.nav-masthead .bt-twitch:hover,
.nav-masthead .nav-twitch:focus     { border-bottom-color: rgba(35, 13, 77, 100); border-bottom:none }
.nav-masthead .bt-twitch span       { position: absolute; top:0px; right:-44px;}
.nav-masthead .bt-twitch span img   { max-width:40px; max-height:40px;}
.nav-masthead .nav-link + .nav-link { margin-left: 1rem; max-height: 37px;}
.nav-masthead .nav-link + li .nav-link{ margin-left: 1rem; /*padding:0 !important*/}

.nav-masthead .bt-twitch-login      { margin-left: 1rem;}
.nav-masthead .active               { color: #fff; border-bottom-color: #fff; }
.nav-masthead .dropdown-custom      { border-bottom: .25rem solid transparent; border-bottom-color: #ffffff; position:relative; padding: 0 0 5px 0 !important; margin-top:4px}
img.profile-pic                     { max-width:50px; max-height:50px;}


div.team                            { width:100%; margin:0; padding:0}
div.team .col                       { padding: 20px;}
div.team img                        { max-width: 240px; display: block; margin:auto;}
div.team h2                         { margin: 10px auto; color:#a970ff;}
div.team span                       { color:#ffffff;}
div.team p                          { color:#ffffff;}
div.team a                          { color:#ffffff; text-decoration: none;}

.events-home                        { margin:80px auto 110px}
.events-home .event-home                 { width: 320px; height:480px;color:#efefef; display:inline-block; text-decoration:none; margin:20px; border-radius: 7px; border: 1px solid #cecece;position: relative;}

.events-home .event-home span            { background:#cecece; color:#000000; display:block; text-decoration:none; padding:10px 0; border-radius: 0px 0px 7px 7px;text-shadow: 0 .05rem .1rem rgba(0, 0, 0, .5);}
.events-home .event-home:hover           { color:#ff8400; background:rgba(0, 0, 0, .4)}
.events-home .event-bg                   { width: 100%; height: 219px; border-radius:4px; padding:0px; resize: vertical; padding-top: 18px; position: absolute; bottom: 0;}
.event-info                         { width: 100%; padding: 8px;}
.event-info h2                      { font-size:25px}
.event-info h3                      { font-size:20px; margin-bottom: 20px;}

@media (max-width: 1024px) {
  .events-home .event-home            { margin:10px;}
}
@media (max-width: 768px) {
  .events-home .event-home            { margin:10px;}
  .events-home .event-bg              { }
}

.notifications                      {}
.notification                       { border-bottom: 2px solid #efefef;}
.notification.read                  { background:rgba(0, 0, 0, .4); border-bottom: 2px solid #201d49;}
.notification.old                   { background:rgba(0, 0, 0, .4); border-bottom: 2px solid #201d49;}
.notification h3                    { color:#ff8400; font-size:17px}
.notification h3 span               { color:#a8641a}

/* EVENTS */
.text-white.bg-dark.mb-3.event      { padding: 20px 0;}
.text-white.bg-dark.mb-3.event-header { padding: 0px 0; background:none !important}

.event .event-header-img            { width:100%; height:240px; display: inline-block; margin: 0px auto;}
.event img.game-header-img          { width:100%; height:auto; display: inline-block; margin: 0px auto;}
.event .event-bg                    { width: 20%; height: 200px; display: inline-block;margin: 10px auto;}
.event .event-info                  { width: 76%; display: inline-block;}
.event .event-info .btn             { margin:2px 4px 6px 4px; min-width: 200px}


.bd-placeholder-img                 { font-size: 1.125rem; text-anchor: middle; -webkit-user-select: none; -moz-user-select: none; user-select: none;}

.b-example-divider                  { height: 3rem; background-color: rgba(0, 0, 0, .1); border: solid rgba(0, 0, 0, .15); border-width: 1px 0; box-shadow: inset 0 .5em 1.5em rgba(0, 0, 0, .1), inset 0 .125em .5em rgba(0, 0, 0, .15);}

.b-example-vr                       { flex-shrink: 0; width: 1.5rem; height: 100vh; }

.bi                                 { vertical-align: -.125em; fill: currentColor;}

.nav-scroller                       { position: relative; z-index: 2; height: 2.75rem; overflow-y: hidden; }

.nav-scroller .nav                  { display: flex; flex-wrap: nowrap; padding-bottom: 1rem; margin-top: -1px; overflow-x: auto; text-align: center; white-space: nowrap; -webkit-overflow-scrolling: touch;}

.form-group                         { margin-bottom:6px;}

.bg-dark                            { background:linear-gradient(180deg, rgb(9,9,9,) 15%, rgb(0, 0, 0) 80%);}
h5.card-title                       { color:#ff8400}

div.poll_options                    { width:80%; margin:4px auto}
div.poll_options img                { width:140px; height:auto}
div.poll_options input              { width: 20px}
div.poll_option label.name          { text-align:right; width: 250px}
.multi-vote                         { display: inline-block; width:46px;}
div.poll_options svg                { width: 100px; height: 100px; margin: 20px; display:inline-block;}
.vote-img                           { display: inline-block}
.vote-details                       { display: inline-block}

.image-preview                      { max-width: 160px; display: inline-block}
.vote-info                          { display: inline-block; width: 400px}
.vote-info label.name               { width:240px; text-align:right}
.multi-vote .btn.btn-outline-primary{ padding: 4px 10px;}
.votes-fixed                        { position:fixed; top:200px; left:-2px; width:70px; height:78px; border-radius: 0px 10px 10px 0;
                                      border: 2px solid #ff8400; z-index: 100; padding: 5px; text-align: center; background: #0d151c;}
.votes-fixed input                  { background:none; border:none; color:#ff0000; width:60px; font-size: 22px; text-align: center}


.image-gallery                      { max-width: 760px; display: inline-block; margin: 5px auto}


.scheduling                         { display:inline-block}
select.select                       { max-width: 160px; width: 40%; margin: 10px auto; appearance:auto; -webkit-appearance: auto; -moz-appearance: auto}
.scheduling.name-field              { max-width: 60px;}
.scheduling.name-field input        { max-width: 60px;}
.scheduling.hours-field             { max-width: 60px;}
.scheduling.hours-field input       { max-width: 60px;}
.scheduling.mins-field              { max-width: 60px;}
.scheduling.mins-field input        { max-width: 60px;}
.scheduling.order-field             { max-width: 60px;}
.scheduling.order-field input       { max-width: 60px;}
.scheduling.availability-field      { max-width: 340px;}
.scheduling select.availability-field { width: 160px;}
.scheduling .image-upload-field     { max-width: 160px}
.scheduling .image-upload-field a   { max-width: 160px}
.bt-image-add                       { width:120px}
.bt-image-update                    { width:120px}


.scheduling.twitter-select          { max-width: 420px;}

footer                              { padding-top:20px; padding-bottom:20px; text-align:center}
footer i                            { font-size:20px; padding:0 8px}


img.wheel-of-pain                   { width:720px}


div.backgropund_holder              { margin:0; padding:0; height:100%; width:100%; position:absolute;}
/* Animation */

li.timeslots                        { width:100%}
li.timeslots .time-info             { width:528px; display:inline-block}
li.timeslots .name                  { width:50px; display:inline-block; line-height:10px}
li.timeslots .start                 { width:208px; display:inline-block; line-height:10px}
li.timeslots .start_title           { width:208px; display:inline-block}
li.timeslots .end                   { width:210px; display:inline-block; line-height:10px}
li.timeslots .end_title             { width:210px; display:inline-block}
li.timeslots .date                  { width:100px; display:inline-block}
li.timeslots .time                  { width:60px; display:inline-block}
li.timeslots .length                { width:100px; display:inline-block; line-height:10px}
li.timeslots .length_title          { width:100px; display:inline-block}
li.timeslots .availability          { width:394px; display:inline-block; text-align: right;}
li.timeslots .availability span     { font-size: 11px}
li.timeslots .availabile            { width:100px; display:inline-block;}
li.timeslots .before                { width:120px; display:inline-block;}
li.timeslots .after                 { width:120px; display:inline-block;}
.availabile label, .before label, .after label  { text-align: center}
li.timeslots .data                  { width:100%}
li.timeslots .availability label    { width:100px;}


.highlighted                        { background-image: url('../images/live-now.png'); background-repeat:no-repeat; background-size: 80px 80px; 
                                      display: block; position: absolute; top: 0; right: 0; width: 80px; height: 80px;}

ul li                               { display: inline-block; width:100%}

ul li input[type="checkbox"]:checked+label,.checked { border: 1px solid gray; 
  background-color: #14772a; color: #fff; transition: all .2s;}

ul li                               { padding: 2px 0px; margin: 2px 0px; }
ul li input[type="checkbox"]        { display: absolute;}

ul li input[type="checkbox"]        { position: absolute; opacity: 0;}

ul li label                         { border: 1px solid gray; padding: 4px 4px; cursor: pointer; height:60px; min-width:100px}

.poll-results                       { display:inline-block; text-align:right}
.poll-results span                  { display:inline-block; padding:0 4px}
.poll-results span.option           { width:40px}
.poll-results span.votes strong     { width:40px}



li.availability                     { width:100%; border-bottom: 1px solid #7f7f7f; padding: 0 0 8px 0px}
li.availability .number             { width:70px; display:inline-block}
li.availability .date               { width:140px; display:inline-block}
li.availability .name               { width:760px; display:inline-block; text-align:left}
li.availability .name span          { display:inline-block; padding:0 4px}
li.availability .name span.default  { color:#ff0000}
li.availability .name span.before   { color:#00ccff}
li.availability .name span.after    { color:#ea00ff}
li.availability .name span.all      { color:#00b118}

ul li.nav-item                      { display: inline-block; width:auto; margin:0 10px; padding:0; color:#a970ff}
.nav-tabs .nav-link                 { border:#525252 solid 1px; border-bottom:#000000 solid 1px}
.nav-tabs .nav-item.show .nav-link, 
.nav-tabs .nav-link.active          { background-color: rgba(14, 23, 30, 1) !important; border-color:#000000; color:#ff8400}
ul.nav-tabs                         { border-bottom:#000000 solid 1px; margin:10px 0px;}
button.nav-link                     { color:#a970ff}
button.nav-link:hover    { border:#000000 solid 1px !important; color:#a970ff}
.nav-tabs .nav-item.show .nav-link, 
.nav-tabs .nav-link.hover { border:#000000 solid 1px !important; color:#a970ff}




.slot                               { border-bottom:1px solid #000000; margin-bottom:1px; text-align:left}
.slot .tbc                          { display:inline-block; width:100%; padding:10px 0; text-align:center; font-size: 30px; color: #27c0c8}
.slot .profile-pic                  { display:inline-block; width:70px}
.slot img.slot-build-pic            { display:inline-block; width:69px; height:auto; margin-left:8px}
.slot img.slot-build-pic-big        { display:block; width:680px; height:auto; margin:10px auto; max-width:90%;}
.slot img.slot-profile-pic          { display:inline-block; width:69px; height:auto; margin-right:0px; padding:4px 0}
.slot .order                        { display:inline-block; width:50px; text-align:center; font-size:20px}
.slot .name                         { display:inline-block; width:280px; text-align:left; padding-left:10px; font-size:18px }
.slot .streamer                     { display:inline-block; width:420px}
.slot .info                         { display:inline-block; width:584px; text-align:left}
.slot .start-time                   { display:inline-block; width:90px;}
.slot .end-time                     { display:inline-block; width:90px;}
.slot .status                       { display:inline-block; width:360px; padding-right:0px; text-align:right}
.slot .status span                  { display:inline-block}
.slot.completed .status             { color:#8c8c8c;}
.slot.completed1                    { background-image: linear-gradient(to right, rgba(3, 56, 108, 0) 40%, rgba(  3,  56, 108, 0.29) 80%); }
.slot.previous                      { background-image: linear-gradient(to right, rgba(3, 56, 108, 0) 40%, rgba(134,  76,   0, 0.29) 80%); }
.slot.live-now                      { background-image: linear-gradient(to right, rgba(3, 56, 108, 0) 40%, rgba( 23, 199,   0, 0.69) 80%); }
.slot.live-next                     { background-image: linear-gradient(to right, rgba(3, 56, 108, 0) 40%, rgba( 90,   0,  90, 0.29) 80%); }
.slot a.twitch-ch                   { margin-top:0px; text-align:left; padding:6px 6px 6px 8px; min-width:230px; border-radius:6px 0 0 6px}
.slot a.twitter-ch                  { margin-top:0px; text-align:left; padding:6px 6px 6px 8px; min-width:30px; border-radius:0 6px 6px 0; background-color:#08aef1; border-color:#08aef1}
.slot a.twitter-ch-off              { background-color: #494f53; border-color:#494f53}
.slot.newDate                       { font-size: 28px; text-align:center; text-decoration:underline; margin:20px auto 6px; color:#ff8400}

.select-dd                          { width:200px; display:block; margin:2px auto; padding:2px 0; background:#131313}
.timezone-select                    { width:190px; margin:2px auto; display:block; color:#b7b7b7; text-decoration:none}
.timezone-select:hover              { background:#575757}


h3.gr-article                       { font-size:28px; line-height:40px}
img.gr-article                      { width:169px; margin:0 0 0 10px}

.hiw                                  { position:relative;}
.hiw .info                            { position:relative; padding:0 10px; width:100%; margin:0;}
.hiw .info h2                         { margin:60px 0 20px 0}

.hiw .info .steps                     { width:240px; min-height:300px; display: block;}
.hiw .info .steps .step               { text-align: center;}
.hiw .info .arrow1                    { position: absolute; top:210px; right:260px; background: url('../images/arrow1.png') no-repeat; width:100px; height:120px}
.hiw .info .arrow2                    { position: absolute; bottom:-280px; /*top:500px;*/ left:443px; background: url('../images/arrow2.png') no-repeat; width:140px; height:100px}
.hiw .info .arrow1b                   { position: absolute; top:210px; right:260px; background: url('../images/arrow1.png') no-repeat; width:100px; height:120px}
.hiw .info .arrow2b                   { position: absolute; bottom:-280px; /*top:500px;*/ left:443px; background: url('../images/arrow2.png') no-repeat; width:140px; height:100px}
.hiw .info .steps .step-title h3      { font-size:34px; color:#ff8400; display:none}
.hiw .info .steps .step-icon          { padding:20px}
.hiw .info .steps .step-icon i        { font-size:140px; color:#6441a5}
.hiw .info .steps .step-icon svg      { font-size:160px; color:#6441a5}
.hiw .info .steps .step-description p { font-size:20px; color:#eaeaea}

.hiw .info .step1                     { margin:0 auto;}

.hiw .info .step2,.hiw .info .step3   { display:inline-block; margin:0 100px}

.hiw .rules                           { text-align:left; padding:10px;}
.hiw .rules .rule                     { float:none; width:100%; padding-bottom:10px; margin-top:50px}
.hiw .rules .rule i.hiw               { font-size:50px; width:69px; float:left; padding-top:0px; color:#6441a5; margin-bottom: 3px;}
.hiw .rules .rule h2                  { width:auto; text-align:left; float:left; color:#ff8400}
.hiw .rules .rule p                   { clear:both; color:#d3d3d3; margin:6px 0 0 0}
.hiw .rules .rule ul                  { margin:0; padding:0;}
.hiw .rules .rule ul li               { margin:0; padding:0; text-decoration:none}
.hiw .rules .rule ul li strong        { width:80px; display:inline-block}
.hiw .rules .rule ul li p             { width:auto; display:inline-block}



.allBuilds li                         {}
.allBuilds li span                    { display:inline-block; text-align:left}
.allBuilds li span.builderName        { width:240px}
.allBuilds li p.buildName             { display:inline-block; text-align:left; width:320px}
.allBuilds li span.theme              { width:240px}



#myInput {
  background-image: url('/css/searchicon.png'); /* Add a search icon to input */
  background-position: 10px 12px; /* Position the search icon */
  background-repeat: no-repeat; /* Do not repeat the icon image */
  width:400px; /* Full-width */
  font-size: 16px; /* Increase font-size */
  padding: 12px 20px 12px 40px; /* Add some padding */
  border: 1px solid #ddd; /* Add a grey border */
  margin:2px auto 12px auto; /* Add some space below the input */
}

#quickSearch {
  /* Remove default list styling */
  list-style-type: none;
  padding: 0;
  margin: 0;
}

#quickSearch li a {
  border: 1px solid #ddd; /* Add a border to all links */
  margin-top: -1px; /* Prevent double borders */
  background-color: #f6f6f6; /* Grey background color */
  padding: 12px; /* Add some padding */
  text-decoration: none; /* Remove default text underline */
  font-size: 18px; /* Increase the font-size */
  color: black; /* Add a black text color */
  display: block; /* Make it into a block element to fill the whole list */
}

#myquickSearchUL li span:hover:not(.header) {
  background-color: #eee; /* Add a hover effect to all links, except for headers */
}
















@media (max-width: 970px) {
  .hiw .info .arrow1, .hiw .info .arrow2, .hiw .info .arrow1b, .hiw .info .arrow2b { display:none}
  .hiw .info .steps .step-title     { display:none}
  .hiw .info .steps .step           { padding:0}
  .hiw .info h1                     { margin:0}
  .hiw .info h2                     { padding:0;  margin:10px 0 0 0}
}
@media (max-width: 768px) {
.hiw .rules .rule h2                { float:none; padding-left:0}
}
@media (max-width: 500px) {
.hiw .info .step2,.hiw .info .step3 { margin:0}
}


.hiw .info .step2                   {}
.hiw .info .step3                   {}

.hiw h1                             {}
.hiw h2                             {}
.hiw h3                             {}
.hiw h3.wide                        {}
.hiw .step                          {}
.step i.hiw                         {}

.header {
    position:relative;
    text-align:center;
    
    color:white;
  }
  .logo {
    width:50px;
    fill:white;
    padding-right:15px;
    display:inline-block;
    vertical-align: middle;
  }
  
  .spacer {
    height:75.5vh;
    width:100%;
    margin: 0;
    padding: 0;
  }
  
  .flex { /*Flexbox for containers*/
    display: flex;
    justify-content: center;
    align-items: center;
    text-align: center;
  }
  
  .waves {
    position:relative;
    width: 100%;
    height:15vh;
    margin-bottom:-7px; /*Fix for safari gap*/
    min-height:100px;
    max-height:150px;
  }
  
  .content {
    position:relative;
    height:10vh;
    text-align:center;
    background-color:rgba(14, 23, 32,1);
  }
  
  /* Animation */
  
  .parallax > use {
    animation: move-forever 25s cubic-bezier(.55,.5,.45,.5)     infinite;
  }
  .parallax > use:nth-child(1) {
    animation-delay: -2s;
    animation-duration: 7s;
  }
  .parallax > use:nth-child(2) {
    animation-delay: -3s;
    animation-duration: 10s;
  }
  .parallax > use:nth-child(3) {
    animation-delay: -4s;
    animation-duration: 13s;
  }
  .parallax > use:nth-child(4) {
    animation-delay: -5s;
    animation-duration: 20s;
  }
  @keyframes move-forever {
    0% {
     transform: translate3d(-90px,0,0);
    }
    100% { 
      transform: translate3d(85px,0,0);
    }
  }





  @media (max-width: 1080px) {
    li.timeslots                        { font-size:12px;}
    li.timeslots .time-info             { width: 378px}
    li.timeslots .name                  { width:30px}
    li.timeslots .start                 { width:150px}
    li.timeslots .start_title           { width:150px}
    li.timeslots .end                   { width:150px}
    li.timeslots .end_title             { width:150px}
    li.timeslots .date                  { width:80px}
    li.timeslots .time                  { width:50px}
    li.timeslots .length                { width:70px}
    li.timeslots .length_title          { width:70px}
    li.timeslots .availability          { width:208px}
    li.timeslots .availabile            { width:65px}
    li.timeslots .before                { width:65px}
    li.timeslots .after                 { width:65px}
    li.timeslots .availability label    { width:60px !important; min-width:60px; height:50px}
  }

  /*Shrinking for mobile*/
  @media (max-width: 768px) {
    .waves {
      height:40px;
      min-height:40px;
    }
    .content {
      height:30vh;
    }
    h1 {
      font-size:24px;
    }
    form#update                         { text-align:center}
    form#update p                       { text-align:center}
    form#update div.col-md-12           { width:100%}
    .hiw .step                          { padding: 32px 10px 40px; text-align:left;}
    .hiw h2                             { padding-left: 110px; }
    .nav                                { margin-bottom:10px;}
    .navbar-brand img                   { max-width:50px; display: block; margin:0 auto;}
    .nav-masthead .bt-twitch            { margin-right: 0;}
    .slot a.twitch-ch                   { min-width:211px; font-size:12px}
    .slot img.slot-build-pic            { margin-top:-13px; margin-bottom:8px}
    .slot .info                         { width:100%}
    .slot .name                         { width:260px}
    .slot .start-time                   { width:50px; margin-left:20px}
    .slot.completed .status             { width:200px}
    .slot .status                       { width:120px; padding:0}
    

    .bd-placeholder-img-lg              { font-size: 3.5rem;}
    .cover-container                    { width:100% !important}
    .px-3                               { padding-left:4px !important; padding-right:4px !important}
    .p-3                                { padding: 10px 0 !important;}
    
    li.timeslots                        { border-bottom: 1px solid #494f53}
    li.timeslots .name                  { width:30px; display:inline-block; line-height:10px; position: absolute; top: 0; left: 0;}
    li.timeslots .time-info             { width:200px}
    li.timeslots .start                 { width:60px; display:inline-block; line-height:10px}
    li.timeslots .start_title           { width:60px; display:inline-block}
    li.timeslots .end                   { width:60px; display:inline-block; line-height:10px}
    li.timeslots .end_title             { width:60px; display:inline-block}
    li.timeslots .date                  { width:60px; display:inline-block}
    li.timeslots .time                  { width:60px; display:inline-block}
    li.timeslots .length                { width:50px; display:inline-block; line-height:10px}
    li.timeslots .length_title          { width:70px; display:inline-block}
    li.timeslots .availability          { width:164px; display:inline-block}
    li.timeslots .availability span     { font-size: 11px}
    li.timeslots .availabile            { width:52px; display:inline-block}
    li.timeslots .before                { width:52px; display:inline-block}
    li.timeslots .after                 { width:52px; display:inline-block}
    div.poll_options                    { width: 100%}
    .image-preview                      { max-width: 150px}
    .vote-info                          { width:240px; height: 64px;}
    .vote-info label.name               { width:240px; text-align:left; padding-left:10px; top: -20px; position: relative;}
    .multi-vote                         { float:left; width: 50px;margin-top: -9px;}
    .multi-vote .btn.btn-outline-primary{ padding: 2px 7px;}
    li.timeslots .availability label    { width:50px !important; min-width:50px; height:50px}
}
@media (max-width: 460px) {
    li.timeslots .length                { width:50px}
    li.timeslots .start                 { width:60px; display:inline-block; line-height:10px}
    li.timeslots .start_title           { width:60px; display:inline-block}
    li.timeslots .end                   { width:60px; display:inline-block; line-height:10px}
    li.timeslots .end_title             { width:60px; display:inline-block}
    li.timeslots .date                  { width:60px; display:inline-block}
    li.timeslots .time                  { width:60px; display:inline-block}
}
@media (max-width: 480px) {
    .games .game                        { max-width:100%}

}


/*
.bg-bubbles{
	position: absolute;
	top: 0;
	left: 0;
	width: 100%;
	height: 100%;
    margin:0;
    padding:0;
	
	z-index: 2;
}
.bg-bubbles li{
		position: absolute;
        z-index: 5;;
		list-style: none;
		display: block;
		width: 40px;
		height: 40px;
		background:rgb(40, 65, 89, 1);
		bottom: -160px;
		
		-webkit-animation: square 25s infinite;
		animation:         square 25s infinite;
		
		-webkit-transition-timing-function: linear;
		transition-timing-function: linear;
}
.bg-bubbles li:nth-child(1){
    left: 10%;
}

.bg-bubbles li:nth-child(2){
    left: 20%;
    
    width: 80px;
    height: 80px;
    
    animation-delay: 2s;
    animation-duration: 17s;
}

.bg-bubbles li:nth-child(3){
    left: 25%;
    animation-delay: 4s;
}

.bg-bubbles li:nth-child(4){
    left: 40%;
    width: 60px;
    height: 60px;
    
    animation-duration: 22s;
    
    background-color: fade(white, 25%);
}

.bg-bubbles li:nth-child(5){
    left: 70%;
}

.bg-bubbles li:nth-child(6){
    left: 80%;
    width: 120px;
    height: 120px;
    
    animation-delay: 3s;
    background-color: fade(white, 20%);
}

.bg-bubbles li:nth-child(7){
    left: 32%;
    width: 160px;
    height: 160px;
    
    animation-delay: 7s;
}

.bg-bubbles li:nth-child(8){
    left: 55%;
    width: 20px;
    height: 20px;
    
    animation-delay: 15s;
    animation-duration: 40s;
}

.bg-bubbles li:nth-child(9){
    left: 25%;
    width: 10px;
    height: 10px;
    
    animation-delay: 2s;
    animation-duration: 40s;
    background-color: fade(white, 30%);
}
		
.bg-bubbles li:nth-child(10){
    left: 90%;
    width: 160px;
    height: 160px;
    
    animation-delay: 11s;
}

@-webkit-keyframes square {
  0%   { transform: translateY(0); }
  100% { transform: translateY(-700px) rotate(600deg); }
}
@keyframes square {
  0%   { transform: translateY(0); }
  100% { transform: translateY(-700px) rotate(600deg); }
}
*/