::selection {
    color: none;
    background: none;
}
/* For Mozilla Firefox */
::-moz-selection {
    color: none;
    background: none;
}

.fantasyHeader {
    background-color: #36012c;
}

.fantasyHeader h1 img {
    max-width: 350px;
    transition: all 2s;
}

.recent {
    background-color: #6c0d48;
}

.recent a.recentItem{
    background-color: #d73242;
}

.recent a.recentItem.pair{
    background-color: #36012c;
}

a.btn, button.btn{
    background-color: #d90118;
}

a.btn:hover, button.btn:hover{
    background-color: #8c020f;
}




#screenscontainer{
    position: relative;
    min-height: 750px; 
    overflow: hidden;   
}
.screen {
    position:absolute;
    width: 96%;
    height: 700px;
    background-color: #6b0959;
    background: rgb(54,0,44);
    background: linear-gradient(180deg, rgba(54,0,44,1) 0%, rgba(239,17,118,1) 100%);
    overflow: hidden;
    border-radius: 4px;
    box-shadow: 0 0 2px 1px rgb(0 0 0 / 20%);
    padding: 2%;  
    text-align: center;  
    display: none;
    opacity: 0;
    border-radius: 10px;
    margin:auto;
}




.fantasyHeader {
    padding: 15px;
}

.screen .screencontainer {
    width: 100%;
    height: 100%;
    display: flex;
    flex-direction: row;
    align-items: center;  
    vertical-align: middle;
    margin: 0px;
    padding: 0px;
    text-align: center;
    justify-content: center;
    position: absolute;
    top:0px;
    left:0px;    
}

.screen .screencontainer .screencontent{
    display: block;
    width: 100%;    
}

.screen a.btn, .screen button.btn{
    background-color: #fec501;
    color:#6b0959;
    box-shadow: 0px 5px 10px 1px rgba(0,0,0,0.2);
}

.screen a.btn:hover, .screen button.btn:hover{
    background-color: #b58d0b;
}

.fantasyHeader.simlator {
    padding: 20px;
}

#episodesplash.screen .screencontainer{
    display: flex;
    vertical-align: middle;
}

#episodesplash .bg {            
    background: linear-gradient(135deg, #5D0C3080 50%, transparent 0),linear-gradient(-135deg, #5D0C3080 50%, transparent 0);
        background-size: 6em 6em;
        background-color: #ef1176;        
    opacity: 0.3;
    background-blend-mode: overlay;
    position: absolute;
    width: 100%;
    height: 100%;
    top:0px;
    left:0px;

}



#episodesplash h1{
    display: block;
    margin: 0;
    width: 100%;
}


#episodesplash h2{
    opacity: 0.85;
    background-color:#f00baf38;
    border-radius: 18px;
    display: inline-block;
    margin-top: 5px;
    padding: 2px 10px;
    padding-top: 4px;
    box-shadow: 0px 5px 10px 1px rgba(0,0,0,0.2);    
    min-width: 100px;    
}

#episodesplash .btn{
    min-width: 100px;
    margin-top: 30px;
}

.screen img.logo {
    width: 100%;
    opacity: 0.7;     
    position: absolute;
    bottom: 30%;
    right: 0px;
}

#episoderun{
    position: relative;
}

#episoderun .bg {            
    background: linear-gradient(135deg, #5D0C3080 50%, transparent 0),linear-gradient(-135deg, #5D0C3080 50%, transparent 0);
        background-size: 6em 6em;
        background-color: #ef1176;        
    opacity: 0.1;
    background-blend-mode: overlay;
    position: absolute;
    width: 100%;
    height: 100%;
    top:0px;
    left:0px;

}



#episoderun .screencontent{
    height: 100%;
}
#episoderun .queen {
    width: 100px;
    height: 100px;
    position:absolute;
    top:0px;
    left:0px;
    display: inline-block;
    transform-origin: top left;
    transform: translateX(0px) translateY(0px) scale(1) ;
}

#episoderun .queen img.crown {
    position: absolute;
    top: -29px;
    left: 27px;
    width: 44px;
    z-index: 201;
    transform: rotate(45deg);
    opacity: 0;
}

#episoderun .queen .imageWrapper {    
    height: 80px;
    width: 80px;
    border: 5px solid #f1efe8;
}

#episoderundrags{
    position: relative;
    display: block;
    width: 100%;
    height: 75%;
}


#episoderundetails{
    display: block;
    width: 100%;
    height: 20%;
}

#episoderundetails h1 {
    font-size: 35px;
    opacity: 0.7;
    padding-top: 20px;
}

#episoderundetails h2{
    opacity: 0.85;
    background-color:#f00baf38;
    border-radius: 18px;
    display: inline-block;
    margin-top: 5px;
    padding: 2px 10px;
    padding-top: 4px;
    box-shadow: 0px 5px 10px 1px rgba(0,0,0,0.2);    
    min-width: 100px;
    scale: 0.8;
}

#maintext{
    display: block;
    position: absolute;
    font-size: 35px;
    font-weight: 500;
    font-family: 'Yanone Kaffeesatz', sans-serif;
    padding: 20px 3%;
    width: 94%;
    text-align: center;
    opacity: 0;
    top:115px;
    line-height: 35px;    
}

#episoderunactions{
    display: flex;
    align-items: center;  
    vertical-align: middle;
    width: 300px;    
    background-color: #fec501;
    border-radius: 10px;
    position: absolute;
    bottom: -100px;
    z-index: 1000;
    box-shadow: 0px 5px 10px 1px rgba(0,0,0,0.5);
    font-size: 25px;
    font-weight: 500;
    font-family: 'Yanone Kaffeesatz', sans-serif;
    padding: 20px;
    text-align: center;
    color:#6b0959;
    line-height: 23px;
    min-height: 55px;
}

#episoderunoptions{
    display: block;    
    align-items: center;      
    width: 300px;        
    position: absolute;
    bottom: -100px;
    z-index: 1000;    
    padding: 20px;
    text-align: center;
    color:#6b0959;    
}

#episoderunoptions a.btn {
    display: inline-block;
    font-size: 25px;
    padding: 10px;
}

.container img.recaplogo{
    height: 130px;
    width: auto;
}

.discord{
    background-color: #742f67;
    padding: 40px 20px;
}

.simulator{
    background-color: #36002c;
    opacity: 1;
    background-image:  radial-gradient(#83116e 0.5px, transparent 0.5px), radial-gradient(#83116e 0.5px, #36002c 0.5px);
    background-size: 20px 20px;
    background-position: 0 0,10px 10px;
}

#loader-wrapper{    
    display: flex;
    vertical-align: middle;    
    position: absolute;
    width: 96%;
    padding: 2%;       
    height: 600px;
}

.custom-loader {
    width: 100px;
    height: 100px;
    display: grid;   
    margin:auto;
    padding-top: -50px; 
    opacity: 0.8;   

}
.custom-loader::before,
.custom-loader::after {    
    content:"";
    grid-area: 1/1;
    --c: radial-gradient(farthest-side,#ff0a85 80%,#0000);
    background: 
      var(--c) 50%  0, 
      var(--c) 50%  100%, 
      var(--c) 100% 50%, 
      var(--c) 0    50%;
    background-size: 24px 24px;
    background-repeat: no-repeat;
    animation: s2 1s infinite;
}
.custom-loader::before {
  margin:8px;
  filter:hue-rotate(-45deg);
  background-size: 16px 16px;
  animation-timing-function: linear
}

@keyframes s2{ 
  100%{transform: rotate(.5turn)}
}

.grecaptcha-badge { 
    visibility: hidden;
}

#episoderunsong{        
    display: flex;
    align-items: center;  
    vertical-align: middle;
    width: 310px;            
    height: 80px;
    position: absolute;
    bottom: -250px;
    z-index: 1000;    
    font-size: 18px;    
    font-family: 'Yanone Kaffeesatz', sans-serif;
    padding: 20px;
    text-align: center;
    color:#6b0959;
    line-height: 16px;
    min-height: 55px;
}

#episoderunsongdetails{
    color:#FFF;
    line-height: 22px;
    padding:10px;
}

#episoderunsongdetails a{
    color:#FFF;
}

.tingle-modal p{
    margin-bottom:5px;
    font-size: 25px;    
    font-family: 'Yanone Kaffeesatz', sans-serif;
    color:#e0b1d6;
}

.tingle-modal .slidecontainer{
    margin-bottom: 10px;
}

.tingle-modal h2{
    font-weight: 500;
    font-size: 45px;
    color:#ebc2e2;
    margin-bottom: 0px;
}





.generate_action{
    transform: scale(1.2);
    margin-right: 15px;
}

.generate_cancel{
    opacity: 0.8;
    margin-right: 10px;
}

#generate_btn, #add_btn{
    padding: 5px 20px;
    background-color: #ff01de;
}

#season-timeline-section{
    background: rgb(50,1,43);
    background: linear-gradient(180deg, rgba(50,1,43,1) 0%, rgba(133,19,112,1) 100%);
}


.selectorsection{
    background-color: #1d0118;
}


/*modes styles*/

.screen.legacy {
    background: linear-gradient(180deg, rgba(54,0,44,1) 0%, rgb(171, 18, 182) 100%);
}

.screen.assassin {
    background: linear-gradient(180deg, rgba(54,0,44,1) 0%, rgb(173, 12, 122) 100%);
}

.screen.beaver {
    background: linear-gradient(180deg, rgba(54,0,44,1) 0%, rgb(175, 6, 160) 100%);
}


#episodesplash.legacy .bg {
    background-color: #4b0e40;
    opacity: 0.3;
    background: radial-gradient(circle, transparent 20%, #4b0e40 20%, #4b0e40 80%, transparent 80%, transparent), radial-gradient(circle, transparent 20%, #4b0e40 20%, #4b0e40 80%, transparent 80%, transparent) 85px 85px, linear-gradient(#b11b96 6.800000000000001px, transparent 6.800000000000001px) 0 -3.4000000000000004px, linear-gradient(90deg, #b11b96 6.800000000000001px, #4b0e40 6.800000000000001px) -3.4000000000000004px 0;
    background-size: 170px 170px, 170px 170px, 85px 85px, 85px 85px;
}

#episodesplash.assassin .bg {
    background-color: #ab076c;
    opacity: 0.8;
    background: linear-gradient(135deg, #5b0d3d55 25%, transparent 25%) -100px 0/ 200px 200px, linear-gradient(225deg, #5b0d3d 25%, transparent 25%) -100px 0/ 200px 200px, linear-gradient(315deg, #5b0d3d55 25%, transparent 25%) 0px 0/ 200px 200px, linear-gradient(45deg, #5b0d3d 25%, #ab076c 25%) 0px 0/ 200px 200px;
}

#episodesplash.beaver .bg {
    background-color: #b747ff;
    opacity: 0.7;
    background-image:  linear-gradient(135deg, rgba(175,6,60,1) 25%, transparent 25%), linear-gradient(225deg, rgba(175,6,60,1) 25%, transparent 25%), linear-gradient(45deg, rgba(175,6,60,1) 25%, transparent 25%), linear-gradient(315deg, rgba(175,6,60,1) 25%, #b747ff 25%);
    background-position:  23px 0, 23px 0, 0 0, 0 0;
    background-size: 46px 46px;
    background-repeat: repeat;
}

#episodesplash.noeliminations .bg{
    background-color: #3d0b7b;
    opacity: 0.6;
    background-image:  repeating-linear-gradient(45deg, #f714cd 25%, transparent 25%, transparent 75%, #f714cd 75%, #f714cd), repeating-linear-gradient(45deg, #f714cd 25%, #3d0b7b 25%, #3d0b7b 75%, #f714cd 75%, #f714cd);
    background-position: 0 0, 18px 18px;
    background-size: 36px 36px;
    filter: blur(4px);
}


#episoderun.legacy .bg {
    background-color: #4b0e40;
    opacity: 0.05;
    background: radial-gradient(circle, transparent 20%, #4b0e40 20%, #4b0e40 80%, transparent 80%, transparent), radial-gradient(circle, transparent 20%, #4b0e40 20%, #4b0e40 80%, transparent 80%, transparent) 85px 85px, linear-gradient(#b11b96 6.800000000000001px, transparent 6.800000000000001px) 0 -3.4000000000000004px, linear-gradient(90deg, #b11b96 6.800000000000001px, #4b0e40 6.800000000000001px) -3.4000000000000004px 0;
    background-size: 170px 170px, 170px 170px, 85px 85px, 85px 85px;
}

#episoderun.assassin .bg{
    background-color: #ab076c;
    opacity: 0.18;
    background: linear-gradient(135deg, #5b0d3d55 25%, transparent 25%) -100px 0/ 200px 200px, linear-gradient(225deg, #5b0d3d 25%, transparent 25%) -100px 0/ 200px 200px, linear-gradient(315deg, #5b0d3d55 25%, transparent 25%) 0px 0/ 200px 200px, linear-gradient(45deg, #5b0d3d 25%, #ab076c 25%) 0px 0/ 200px 200px;
}

#episoderun.beaver .bg{
    background-color: #b747ff;
    opacity: 0.25;
    background-image:  linear-gradient(135deg, rgba(175,6,60,1) 25%, transparent 25%), linear-gradient(225deg, rgba(175,6,60,1) 25%, transparent 25%), linear-gradient(45deg, rgba(175,6,60,1) 25%, transparent 25%), linear-gradient(315deg, rgba(175,6,60,1) 25%, #b747ff 25%);
    background-position:  23px 0, 23px 0, 0 0, 0 0;
    background-size: 46px 46px;
    background-repeat: repeat;
}

#episoderun.noeliminations .bg{
    background-color: #3d0b7b;
    opacity: 0.3;
    background-image:  repeating-linear-gradient(45deg, #f714cd 25%, transparent 25%, transparent 75%, #f714cd 75%, #f714cd), repeating-linear-gradient(45deg, #f714cd 25%, #3d0b7b 25%, #3d0b7b 75%, #f714cd 75%, #f714cd);
    background-position: 0 0, 18px 18px;
    background-size: 36px 36px;
    filter: blur(4px);
}

.screen a.btn#trackRecordBtn{
    background-color: #FF00DF;
    color:#FFF;
    padding-top: 5px;
    padding-bottom: 5px;
    display: none;
    font-size: 24px;
    position: absolute;
    bottom: 20px;
    left: 50%;
    transform: translateX(-70px);    
}

.screen #seasonrecapcontent{ 
    display: block;
    width: 100%;
    height:750px;
    overflow: auto;
}

.screen #closeRecapBtn{
    position: absolute;
    top: 0px;
    right: 0px;
    padding: 5px 10px;
    font-size: 24px;
    z-index: 1000;
}

.screen#seasonrecap {
    height: 150%;    
}

.screen#seasonrecap .screencontent{
    display: block;
    width: 100%;
    height: 100%;
    overflow: auto;
}