/* MAIN FEED STYLE */
* {
    box-sizing: border-box;
    margin: 0;
    padding: 0;
    font-family: 'News Cycle', 'Open Sans',' Helvetica Neue', Helvetica, 'Times New Roman', serif;
    outline: none;
}
html, body {
    font-size: 18px;
    font-weight: normal;
    line-height: 1.3;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;

    width: 100%;
    height: 100%;   
    background-color: #212121;
    color: rgb(217, 217, 217);
    overflow-y: auto;
    scrollbar-color: #262626 #161717; /* FireFox scrollbar */
}
html {
    overflow-y: hidden;
}
.wall-color {
    background-color: #212121!important;
}
b {
    font-weight: bold;
}
a {
    color: #eee;
}
a i.fa:active, input.fa:active {
    opacity: 0.7;
}
a:link {
    text-decoration: none;
}
.bg {
    background-color: #2d2d2d;
}
a:visited {
    text-decoration: none;
}
a:hover {
    text-decoration: none;
}
h1 a:hover, h1 a:active {
    text-decoration: underline;
}
a:active {
    text-decoration: none;
    filter: brightness(110%);
    -webkit-filter: brightness(110%);
}
input, button, submit { border:none; } 
/* WEBKIT SCROLLBAR */
body::-webkit-scrollbar {
    width: 12px;
}

body::-webkit-scrollbar-track {
    background: #161717;
}

body::-webkit-scrollbar-thumb {
    background-color: #262626;    
    border-radius: 20px;       
    border: 3px solid #161717;  
}
.grid {
    overflow-x: auto;
    overflow-y: hidden;
}
iframe {
    height: 100vh;
    width: 22rem;
    border: 0px;
    float: left;
    overflow-x: hidden;
}
.feed_column {
    float: left;
    height: 100vh;    
    cursor: move;
}
.over {
    border: 0.25rem dashed rgba(255, 255, 255, 0.383);
}
[draggable] {
    user-select: none;
}
.dragger_handle {
    z-index: 99999999;
    position: relative; /* Changed from absolute to fixed */
    width: 1.2rem;
    height: 3rem;
    top: 0;
    display: none;

}
.fa.fa-grip:before {
    content: "\f141 \A \f141 \A \f141";
}
.feed_column:hover .dragger_handle {
    display: block;
}
.hidden {
    display: none;
}
.menu {
    float: left;
    height: 100vh;
    background-color: #161717;
    margin-right: 0.7rem;
    padding-top: 0.2rem;
    width: 3rem;
    z-index: 900;
    position: absolute;
}
.menu li {
    padding: 0.8rem; 
    height: 2.9rem;
    text-align: center;    
    list-style-type: none;
}
.menu li:hover {
  background-color: #313131;
}
.menu #decks_list:hover {
    background-color: #222222;
}
.menu .active {
    background-color: #313131;
}
#columns_wrapper {
    margin-left: 3.4rem;
}
#logo {
    position:absolute;
    bottom: 1.4rem;
    left: 1.4rem;
    transform: rotate(-90deg);
    transform-origin: center left;
    font-size: 1rem;
    z-index: 999;
}
.add-col {
    float: left;
    height: 100vh;
    width: 0.5rem;
    font-size: 0.8rem;
    padding: 0.8rem 0rem 0.5rem 0.2rem;    
}
#deck_rollout_parent {
    position: relative;
}
#deck_rollout {
    position: absolute;
    width: 20rem;
    z-index: 500;
    top: 0;
    left: 0;
    margin-left: 3rem;
    display: block;
    padding: 1rem;
    display: none;
    border-radius: 0 0.5rem 0.5rem 0;
    box-shadow: 0.2rem 0.2rem 0.6rem rgba(12, 12, 12, 0.15);
}
#decks_list:hover #deck_rollout {
    display: block;
}
/* FEED KRINGLE */
.strike {
    display: block;
    text-align: center;
    overflow: hidden;
    white-space: nowrap; 
    margin: -0.9rem 0.5rem 0.5rem 0.5rem;
}
.strike > span {
    position: relative;
    display: inline-block;    
    font-size: 0.5rem;
    color: #ffffff82;
}
.strike > span:before,
.strike > span:after {
    content: "";
    position: absolute;
    top: 50%;
    width: 9999px;
    height: 1px;
    background: #ffffff14;
}
.strike > span:before {
    right: 100%;
    margin-right: 0.5rem;
}
.strike > span:after {
    left: 100%;
    margin-left: 0.5rem;
}
.feed_name {
    margin-right: 0.5rem;
}
h1 i:before{
    content: "";
}
.fa-drag-handle:before {
    content: "\f142 \f142";
    letter-spacing: 0.1em;
}
.bell {
    margin-left: 0.2rem;
}
i.slack::before {
    content: "\f198";
    margin-right: 0.3rem;
}
#reload:hover i.bell::before {
    content: "\f0f3";
}
.deck_list:hover i.edit::before, #reload:hover i.edit::before {
    content: "\f044";
}
#reload:hover i.copy::before {
    content: "\f0c5";
}
.deck_list:hover i.edit::before {
    margin-left: 0.5rem;
}
.deck_list:hover i.edit::before {
    font-size: 0.8rem;
    margin-right: 0.01rem;
    position: relative;
    top: -0.08rem;
}
.deck_list:hover i.remove::before{
    content: "\f00d";
    margin-left: 0.1rem;
}
.deck_list:hover i.clone::before{
    content: "\f24d";
    margin-left: 0.05rem;
    font-size: 0.8rem;
    position: relative;
    top: -0.12rem;
}
#reload:hover i.remove::before{
    content: "\f00d";
    font-size: 0.8rem;
    position: relative;
    top: 0.02rem;
    left: 0.02rem;
}
#reload:hover i.bell::before{
    content: "\f0f3";
}
#reload:hover i.bell-slash::before{
    content: "\f1f6";
}
h1 i.dragger::before{
    content: "\f7a5";
    opacity: 0;
    margin-right: 0.3rem;
}
body:hover i.dragger::before{
    opacity: 0.5;
}
#feed {
    overflow-x: hidden;
    padding-bottom: 0.7rem;
}
#sources i.remove::before{
    content: "\f00d";
    font-size: 0.8rem;
    position: relative;
    top: 0.02rem;
    left: 0.02rem;
}
i.plus::before{
    content: "\f067";
    font-size: 0.65rem;
    margin-right: 0.2rem;
}
.pointer:hover, .selectable-flag:hover {
    cursor: pointer;
}
i.angle-right::before{
    content: "\f105";
}
i.read-more::before{
    font-size: 0.6rem;
    color: rgb(235, 235, 235);
    position: relative;
    top: -0.1rem;
}
p:hover i.read-more::before{
    content: "\f35d";
}
i.read-more:hover{
    color: rgb(255, 255, 255);
}
i.back_arrow::before{
    margin-right: 0.5rem;
    content: "\f060";
}
i.twitter::before{
    content: "\f099";
    opacity: 0.5;
}
i.robot::before{
    content: "\f544";
    opacity: 0.5;
}
i.from_app::before{
    content: "\f3cd";
    opacity: 0.5;
}

/* PUSH STYLE */
.push {
    margin: 0rem 0.45em 1rem 0.45rem;
    border-radius: 0.5rem;
    /*max-width: 50rem;*/
    overflow-x: hidden;
    overflow-y: hidden;
}
.push_inside {
    padding-right: 1rem; 
    padding-left: 1rem; 
    padding-top: 0.7rem; 
    padding-bottom: 0.7rem;
}
.horiz_marg {
    margin-right: 1rem; 
    margin-left: 1rem; 
}
.horiz_padd {
    padding-right: 1rem; 
    padding-left: 1rem; 
}
.left_padd {
    padding-left: 1rem; 
}
.details_content {  
    padding-left: 0.6rem;
    border-left: 0.1rem solid #75757545;
    margin-left: 0rem;
}
.right_padd {
    padding-right: 1rem; 
}
.top_marg {
    margin-top: 0.7rem;
}
.top_padd {
    padding-top: 0.7rem; 
}
.slide_up {  
    margin-top: -2.6rem;
}
.bottom_marg {    
    padding-bottom: 0.5rem;
}
.no_max_height {
    max-height: none!important;
    -webkit-mask-image: none!important;
    mask-image: none!important;
}
.right {
    float: right;
}
.bread_click_me {
    opacity: 0.0;
    margin-top: 0.2rem;
    margin-left: 0.3rem;
}
.push:hover .bread_click_me {
    opacity: 0.5;
}
.push:hover .more_in_cluster * .bread_click_me {
    opacity: 1;
    animation: psst 1.1s cubic-bezier(.36,.07,.19,.97) 3 forwards;
    transform: translate3d(0, 0, 0);
    backface-visibility: hidden;
    perspective: 1000px;
}
.share {
    font-size: 0.7rem;
    margin-right: 0rem;
    padding-left: 1rem;
}
.push:hover .share {
    display: inline;
}
.share .fa-ellipsis-h {
    opacity: 0.2;
}
.share:hover .fa-ellipsis-h {
    /*
    background-color: rgba(0, 0, 0, 0.2);
    border-radius: 50%;
    padding: 0.2rem;
    margin: -0.2rem -0.2rem 0 0;
    */
}
.hamburger-rollout-parent {
    position: relative;
}
.hamburger-rollout {
    position: absolute;
    width: 8.5rem;
    text-align: left;
    z-index: 999999900;
    top: -0.3rem;
    left: -7.0rem;
    margin-left: 0rem;
    display: none;
}
.hamburger-content {
    margin-top: 0.3rem;
    padding: 0.3rem 0.6rem 0.5rem 0.6rem;
    border-radius: 0.2rem;
    box-shadow: 0rem 0.4rem 0.3rem rgba(12, 12, 12, 0.15);
}
.hamburger-content i {
    width: 0.9rem;
}
.hamburger-content a:hover {
    text-decoration: underline;
}
.share:hover .hamburger-rollout {
    display: inline-block;
}
.share:hover i {
    opacity: 0.85;
}
.prc30_opacity {
    opacity: 0.3;
}
.prc50_opacity {
    opacity: 0.5;
}
.more_in_cluster:hover .bread_click_me, .go_to_push_url:hover .bread_click_me {
    opacity: 1;
}
.copy {
    cursor: pointer;
}
.copy:active {
    color: #000;
}
.more_in_cluster:hover {
    /*background-color: rgba(244, 244, 244, 0.032);*/
}
.more_in_cluster:hover .see_through {
    opacity: 1;
}
.go_to_push_url:hover {
    background-color: rgba(244, 244, 244, 0.032);
}
form .push:hover {
    filter: brightness(100%);
    -webkit-filter: brightness(100%);
    cursor: default;
}
h1 {
    padding: 1rem 1.3rem 1rem 0.5rem;
    font-size: 0.7rem;
    text-transform: uppercase;
    font-weight: bold;
}
.top_sticky {
    width: 100%;
    position: sticky;
    top: 0;
    z-index: 98;
}
#sources .push {  
    padding-bottom: 0.4rem;
    padding-top: 0.7rem;
}
.sources_wrapper {
    padding-top: 0.7rem;
}
#settings .push_inside {
    margin-bottom: 0.3rem;
}
#settings h1 {
    position: relative;  
    margin-left: 1.2em;
}
.settings_divider {
    height: 0.9rem;
    display: block;
}
.scrolled_down {
    box-shadow: 0.1rem 0.1rem 0.3rem rgb(36, 36, 36, 0.57);
}
.menu_shadow {
    box-shadow: 0.1rem 0.1rem 0.3rem rgb(36, 36, 36, 0.57);
}
p {
    padding-bottom: 0.05rem; /* Font News Cycle cuts g:s otherwise */
}
#load_more_content {
    padding: 0rem 0.5rem 1rem 1.5rem;
    margin-right: 1rem;
    text-align: center;
    cursor: pointer;
    display: block;
    font-size: 0.7rem;
    max-width: 50rem;
    min-width: 20rem;
    text-transform: uppercase;
    font-weight: bold;
}
.opaque .dot {
    opacity: 1!important;
}
.opaque {
    opacity: 1!important;
}
.topbar {
    height: 1rem;
    margin-bottom: 0.4rem;
    position: relative;
    cursor: default;
}
.topbar-right {
    position: absolute;
    right: 1rem;
}
.side_dish {
    font-size: 0.7rem;
    font-weight: bold;
}
.topbar-right {
    position: absolute;
    right: 1rem;
}
.topbar-left {
    position: absolute;
    left: 1rem;
}
.time_since_timestamp {
    float: left;
    margin-left: 0.35rem;
    font-feature-settings: "tnum";
    font-variant-numeric: tabular-nums;
}
.app_name {
    float: left;
    font-size: 0.7rem;
    text-transform: uppercase;
    font-weight: bold;
}
.app_name_nobr {
    white-space: nowrap;
    overflow: hidden;
    max-width: 10rem;
    /*
    -webkit-mask-image: linear-gradient(to right, rgba(0,0,0,1) 90%, rgba(0,0,0,0));
    mask-image: linear-gradient(to right, rgba(0,0,0,1) 90%, rgba(0,0,0,0));
    width: 45%;
    */
}
.see_through {
    opacity: 0.6;
}
.more_in_cluster {
    display: block;
    cursor: pointer;
    padding-top: 0.2rem;
    padding-bottom: 0.5rem;
    padding-right: 1.15rem;  
    overflow: hidden;
    text-overflow: clip;
    line-height: 1.7;
}
.more_in_cluster .angle-right {
    margin-top: 0.35rem;
}
.more_in_cluster_overflow {
    white-space: nowrap;
    -webkit-mask-image: linear-gradient(to right, rgba(0,0,0,1) 90%, rgba(0,0,0,0));
    mask-image: linear-gradient(to right, rgba(0,0,0,1) 90%, rgba(0,0,0,0));
    width: calc(100% - 0.5rem);
}
.agencies_tag {
    padding: 0.0rem 0.17rem 0.1rem 0.2rem;
    border-radius: 0.15rem;
    font-size: 0.8rem;
    color: #ffffffe6;
    background-color: #62626273;
    display: inline-block;
    box-shadow: 0.05rem 0.05rem 0.15rem rgba(36, 36, 36, 0.57);
}
.tag, .search-choice {
    padding: 0.0rem 0.1rem 0.1rem 0.2rem;
    margin: 0 0.75rem 0 0.15rem;
    border-radius: 0.15rem;
    font-size: 0.6rem;
    text-transform: uppercase;
    font-weight: bold;
    color: #ffffffe6; 
}
.tag_hover {
    display: none;
}
#toplist .tag {
    font-size: 0.4rem;
    margin: 0;
    padding: 0.0rem 0.1rem 0.06rem 0.1rem;
}
.push:hover .tag_hover {
    display: inline-block;
}
.just_a_bitta_room {
    display: block;
    margin-bottom: 0.3rem;
}
.hl {
    font-weight: bold;
    font-style: italic;
    margin-left: -0.1rem;
    margin-right: 0.1rem;
}
.live {
    border-radius: 20%;
    background-color: #6c103f;
    color: white;
    font-size: 0.6rem;
    font-weight: bold;
    padding: 0.1rem 0.3rem;
    margin-left: 0.3rem;
}
.yellow {
    background-color: #800b24!important;
}
li.logo {    
    text-align: left;
    font-size: 0.36rem;
    line-height: 120%;
    text-transform: uppercase;
    font-weight: bold;
    padding-top: 1.0rem;
    height: 2.3rem;
    z-index: 999;
}
summary {
    float: none!important;
    margin-top: 0.5rem;
}
.hover_package {
    display: none;
}
.package, .push_id {
    display: none;
}
.timestamp, .language, .added_timestamp {
    display: none;
}
h2 {
    font-size: 1rem;
    padding: 0.1rem 0 0.2rem 0;
}
.bread {
    overflow: hidden;
    padding-bottom: 0.4rem;
    max-height: 6.5rem;
    position: relative;
    transition: max-height 0.4s ease, -webkit-mask-image 0.4s ease, mask-image 0.4s ease;
    -webkit-mask-image: linear-gradient(to bottom, rgba(0,0,0,1) 90%, rgba(0,0,0,0));
    mask-image: linear-gradient(to bottom, rgba(0,0,0,1) 90%, rgba(0,0,0,0));
}

/* Expand bread when hovering over the push */
.push:hover .bread {
    max-height: 30rem; /* Large enough to show most content */
    -webkit-mask-image: none;
    mask-image: none;
}

/* Remove the expand indicator - we don't need it anymore */
.expand-indicator {
    display: none;
}

/* Ensure bread content has a position context for animations */
.bread p {
    position: relative;
}

.bread_sep {
    font-weight: bold;
    margin: 0.4rem 0rem;
    display: block;
}
.icon {
    height: 0.85rem;
    width: 0.85rem;
    float: left;
    border-radius: 50%;
    margin-right: 0.4rem;
    margin-top: 0.1rem;
    background-position: center; 
    background-repeat: no-repeat; 
    background-size: cover; 
    opacity: 1;
}
.cluster {
    color: #fff;
    font-size: 0.4rem;
    text-align: center;
    padding: 0.15rem 0;
    font-weight: bold;
    overflow: hidden;
}
.shake {
    animation: shake 0.82s cubic-bezier(.36,.07,.19,.97) both;
    transform: translate3d(0, 0, 0);
    backface-visibility: hidden;
    perspective: 1000px;
}
@keyframes shake {
    10%, 90% {
        transform: translate3d(-1px, 0, 0);
    }
    
    20%, 80% {
        transform: translate3d(2px, 0, 0);
    }
  
    30%, 50%, 70% {
        transform: translate3d(-4px, 0, 0);
    }
  
    40%, 60% {
        transform: translate3d(4px, 0, 0);
    }
}
.psst {
    animation: psst 1.1s cubic-bezier(.36,.07,.19,.97) both;
    transform: translate3d(0, 0, 0);
    backface-visibility: hidden;
    perspective: 1000px;
}
@keyframes psst {
    10%, 90% {
        transform: translate3d(-0.025rem, 0, 0);
    }
    
    20%, 80% {
        transform: translate3d(0.05rem, 0, 0);
    }
  
    30%, 50%, 70% {
        transform: translate3d(-0.1rem, 0, 0);
    }
  
    40%, 60% {
        transform: translate3d(0.1rem, 0, 0);
    }
}

@keyframes try_me {
    22% {
        transform: rotate(720deg);
    }
    70% {
        transform: rotate(0deg);
    }
}

@keyframes ima_bird {
    22% {
        transform: rotate(10deg);
    }
    42% {
        transform: rotate(-10deg);
    }
    62% {
        transform: rotate(5deg);
    }
    70% {
        transform: rotate(0deg);
    }
}
.try_me {
    animation: try_me 5s infinite;
}
.extra_clickable {
    display: inline-block;     
    position: relative;    
    z-index: 1;     
    padding: 0.5em;     
    margin: -0.5em; 
}
.extra_clickable:hover {
    background-color: rgba(0, 0, 0, 0.11);
	border-radius: 20%;
}
.extra_clickable:active {
    background-color: rgba(0, 0, 0, 0.28);
	border-radius: 20%;
}
#logo:hover .fa-crow {
    animation: ima_bird 0.5s 1;
}
#add_col {
    margin-left: 0em;
}

#next_state_on_load { display: none; }

.blob {
	background: #eee;
	border-radius: 50%;
	box-shadow: 0 0 0 0 rgba(0, 0, 0, 1);
	height: 1rem;
	width: 1rem;
    margin: 0.2rem 0rem 0rem 0.2rem;
	transform: scale(1);
    float: left;
    cursor: pointer;
}

.blob.live {
	background: rgba(255, 82, 82, 1);
	box-shadow: 0 0 0 0 rgba(255, 82, 82, 1);
	animation: pulse-red 2s infinite;
}
ul {
    list-style-type: none;
}
.fa-question-circle {
    cursor: pointer;
}

@keyframes pulse-red {
	0% {
		transform: scale(0.95);
		box-shadow: 0 0 0 0 rgba(255, 82, 82, 0.7);
	}
	
	70% {
		transform: scale(1);
		box-shadow: 0 0 0 10px rgba(255, 82, 82, 0);
	}
	
	100% {
		transform: scale(0.95);
		box-shadow: 0 0 0 0 rgba(255, 82, 82, 0);
	}
}
.dots-cont {
    display: none;
    margin-left: 0.25rem;
}
.dot {
    width: 0.1rem;
    height: 0.1rem;
    opacity: 1;
    background: #fff;
    display: inline-block;
    border-radius: 50%;
    right: 0px;
    bottom: 0px;
    margin: 0px 0.015rem;
    position: relative;
    animation: jump 1s infinite;
  }
  
  .dots-cont:hover > .dot {
    /* position: relative; */
    /* bottom: 0px; */
    /* animation: jump 1s infinite; */
  }
  
  .dots-cont .dot-1 {
    -webkit-animation-delay: 100ms;
    animation-delay: 100ms;
  }
  
  .dots-cont .dot-2 {
    -webkit-animation-delay: 200ms;
    animation-delay: 200ms;
  }
  
  .dots-cont .dot-3 {
    -webkit-animation-delay: 300ms;
    animation-delay: 300ms;
  }
  
  @keyframes jump {
     0%   {bottom: 0px;}
     20%  {bottom: 0.22rem;}
     40%  {bottom: 0px;}
  }
  
/* SOURCES LIST */
.done-btn {
    position: fixed;
    right: 1.8rem;
    top: 0.8rem;
    min-width: 1rem!important;
    max-width: 5rem!important;
    padding: 0.3rem 0.5rem;
    font-size: 0.7rem;
    font-weight: normal;
    z-index: 999;    
    font-family: 'Font Awesome 5 Free';
    font-weight: 900;
}
#sources_page {
    padding: 1rem 1rem 1rem 1rem; 
}
input {
    font-size: 0.7rem; 
}
input[type=submit] {
    color: #fff;
}
input[type=submit]:hover {
    background-color: rgb(126, 126, 126);
    cursor: pointer;
}
input[type=text], input[type=search]  {
    margin-bottom: 0rem;
    width: 100%; 
    border-radius: 0.2rem;
    padding: 0.5rem; 
    background-color: #e8e8e8;
    -webkit-appearance: none;
}
input[type=search]::-webkit-search-cancel-button {
    -webkit-appearance: searchfield-cancel-button;
}
input[type=range] {
    margin-bottom: 0.4rem;
    width: 100%; 
    -webkit-appearance: none;
    width: 100%;
    height: 0.3rem;
    border-radius: 0rem;
    outline: none;
    background: #a7a7a7;
}
input[type=radio] {
    height: 0.9rem;
}
summary {
    cursor: pointer;
}
select {
    font-size: 0.7rem; 
}
.no-bottom-marg {
    margin-bottom: 0rem!important;
}
.form-info {
    font-weight: normal;
    text-transform: none;
}
.sources_filter {
    background-image: url('../img/searchicon.png'); /* Add a search icon to input */
    background-position: 0.5rem 0.6rem; /* Position the search icon */
    background-repeat: no-repeat; 
    background-size: 1rem;
    padding: 0.5rem 1rem 0.5rem 1.9rem!important; 
    margin-bottom: 0rem;
}
#filter_input {
    background-image: url('../img/searchicon.png'); 
    background-position: 0.5rem 0.6rem; 
    background-repeat: no-repeat; 
    background-size: 1rem;
    border: 0; 
    color: #fff;
    margin: 0.5rem 0rem 0rem 0rem;
    padding: 0.5rem 1rem 0.5rem 1.9rem; 
}
h3 {    
    font-size: .8rem;
}
#sources {
    margin: 0rem 0rem 0rem 0rem;
    padding-bottom: 1rem;
}
#redirect, #error {
    padding-top: 1rem;
}
#sources li {
    list-style-type: none;
}
#sources .topbar {    
    margin-top: 0.6rem;
    margin-bottom: 0.3rem;
}
#settings .topbar {    
    margin-bottom: 0.3rem;
}
.source-label {
    display: block;
    position: relative;
    padding-left: 1.3rem;
    font-size: 0.8rem;
    cursor: pointer;
    -webkit-user-select: none;
    -moz-user-select: none;
    -ms-user-select: none;
    user-select: none;
}
.source-label input {
    position: absolute;
    opacity: 0;
    cursor: pointer;
    height: 0;
    width: 0;
}

/* Create a custom checkbox */
.checkmark {
    position: absolute;
    top: 0;
    left: 0;
    height: 0.85rem;
    width: 0.85rem;
    float: left;
    border-radius: 15%;
    margin-right: 0rem;
    margin-top: 0.1rem;
    background-color: #545454;
}
.select_all {
    margin-top: 0.75rem;
}

/* On mouse-over, add a grey background color */
.source-label:hover input ~ .checkmark {
    background-color: #ccc;
}

/* When the checkbox is checked, add a blue background */
.source-label input:checked ~ .checkmark {
    background-color: #2196F3;
}

/* Create the checkmark/indicator (hidden when not checked) */
.checkmark:after {
    content: "";
    position: absolute;
    display: none;
}

/* Show the checkmark when checked */
.container input:checked ~ .checkmark:after {
    display: block;
}

/* Style the checkmark/indicator */
.source-label .checkmark:after {
    left: 9px;
    top: 5px;
    width: 5px;
    height: 10px;
    border: solid white;
    border-width: 0 3px 3px 0;
    -webkit-transform: rotate(45deg);
    -ms-transform: rotate(45deg);
    transform: rotate(45deg);
}

/* OVERLAY LOADER */
*.hidden {
    display: none !important;
}
div.loading{
    position: fixed;
    z-index: 9999;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-color: rgba(16, 16, 16, 0.5);
}
@-webkit-keyframes uil-ring-anim {
    0% {
        -ms-transform: rotate(0deg);
        -moz-transform: rotate(0deg);
        -webkit-transform: rotate(0deg);
        -o-transform: rotate(0deg);
        transform: rotate(0deg);
    }
    100% {
        -ms-transform: rotate(360deg);
        -moz-transform: rotate(360deg);
        -webkit-transform: rotate(360deg);
        -o-transform: rotate(360deg);
        transform: rotate(360deg);
    }
    }
    @-webkit-keyframes uil-ring-anim {
    0% {
        -ms-transform: rotate(0deg);
        -moz-transform: rotate(0deg);
        -webkit-transform: rotate(0deg);
        -o-transform: rotate(0deg);
        transform: rotate(0deg);
    }
    100% {
        -ms-transform: rotate(360deg);
        -moz-transform: rotate(360deg);
        -webkit-transform: rotate(360deg);
        -o-transform: rotate(360deg);
        transform: rotate(360deg);
    }
    }
    @-moz-keyframes uil-ring-anim {
    0% {
        -ms-transform: rotate(0deg);
        -moz-transform: rotate(0deg);
        -webkit-transform: rotate(0deg);
        -o-transform: rotate(0deg);
        transform: rotate(0deg);
    }
    100% {
        -ms-transform: rotate(360deg);
        -moz-transform: rotate(360deg);
        -webkit-transform: rotate(360deg);
        -o-transform: rotate(360deg);
        transform: rotate(360deg);
    }
    }
    @-ms-keyframes uil-ring-anim {
    0% {
        -ms-transform: rotate(0deg);
        -moz-transform: rotate(0deg);
        -webkit-transform: rotate(0deg);
        -o-transform: rotate(0deg);
        transform: rotate(0deg);
    }
    100% {
        -ms-transform: rotate(360deg);
        -moz-transform: rotate(360deg);
        -webkit-transform: rotate(360deg);
        -o-transform: rotate(360deg);
        transform: rotate(360deg);
    }
    }
    @-moz-keyframes uil-ring-anim {
    0% {
        -ms-transform: rotate(0deg);
        -moz-transform: rotate(0deg);
        -webkit-transform: rotate(0deg);
        -o-transform: rotate(0deg);
        transform: rotate(0deg);
    }
    100% {
        -ms-transform: rotate(360deg);
        -moz-transform: rotate(360deg);
        -webkit-transform: rotate(360deg);
        -o-transform: rotate(360deg);
        transform: rotate(360deg);
    }
    }
    @-webkit-keyframes uil-ring-anim {
    0% {
        -ms-transform: rotate(0deg);
        -moz-transform: rotate(0deg);
        -webkit-transform: rotate(0deg);
        -o-transform: rotate(0deg);
        transform: rotate(0deg);
    }
    100% {
        -ms-transform: rotate(360deg);
        -moz-transform: rotate(360deg);
        -webkit-transform: rotate(360deg);
        -o-transform: rotate(360deg);
        transform: rotate(360deg);
    }
    }
    @-o-keyframes uil-ring-anim {
    0% {
        -ms-transform: rotate(0deg);
        -moz-transform: rotate(0deg);
        -webkit-transform: rotate(0deg);
        -o-transform: rotate(0deg);
        transform: rotate(0deg);
    }
    100% {
        -ms-transform: rotate(360deg);
        -moz-transform: rotate(360deg);
        -webkit-transform: rotate(360deg);
        -o-transform: rotate(360deg);
        transform: rotate(360deg);
    }
    }
    @keyframes uil-ring-anim {
    0% {
        -ms-transform: rotate(0deg);
        -moz-transform: rotate(0deg);
        -webkit-transform: rotate(0deg);
        -o-transform: rotate(0deg);
        transform: rotate(0deg);
    }
    100% {
        -ms-transform: rotate(360deg);
        -moz-transform: rotate(360deg);
        -webkit-transform: rotate(360deg);
        -o-transform: rotate(360deg);
        transform: rotate(360deg);
    }
}
.uil-ring-css {
    margin: auto;
    position: absolute;
    top: -94%;
    left: 0;
    bottom: 0;
    right: 0;
    width: 200px;
    height: 200px;
}
.uil-ring-css > div {
    position: absolute;
    display: block;
    width: 5rem;
    height: 5rem;
    top: 50%;
    left: calc(50% - 2.5rem);
    border-radius: 4.375rem;
    box-shadow: 0 0.2185rem 0 0 #ffffff;
    -ms-animation: uil-ring-anim 1s linear infinite;
    -moz-animation: uil-ring-anim 1s linear infinite;
    -webkit-animation: uil-ring-anim 1s linear infinite;
    -o-animation: uil-ring-anim 1s linear infinite;
    animation: uil-ring-anim 1s linear infinite;
}
.feed_loader {
    top: 2rem!important;
    /* width: calc(100% - 14px)!important; */
}
/* TINGLE */
.tingle {
    animation-name: tingle;
    animation-duration: 4s;
    animation-iteration-count: 1;
    -webkit-transform-origin: 50% 0%;
    transform-origin: 50% 0%;
  }
  
  @keyframes tingle {
    0% {
        filter: brightness(140%);
        -webkit-filter: brightness(140%);
        /* transform: scale(0.95); */ 
    }
    10% {
        /* transform: scale(1); */ 
    }
    100% {
        filter: brightness(100%);
        -webkit-filter: brightness(100%);
        /* transform: scale(1); */
    }
}
@keyframes zoom_up {
    0% { transform: scale(1); }
    50% { transform: scale(1.025); }
    100% { transform: scale(1); }
}

/* SNACKBAR */
.snackbar-container {
    min-width: 1rem;
    max-width: 30rem;
    margin: 0.8rem;
    border-radius: 0.3rem;
    box-shadow: 0.2rem 0.2rem 0.6rem rgba(12, 12, 12, 0.15);
    z-index: 99999999999999;
}
  
/* SETTINGS */
#settings {
    padding-left: 3.5rem;
}
/* STACKED */
.card {
    position: relative;
    margin-bottom: 1.3rem;
}
.card .inner {
    position: relative;
    z-index: 3;
}
.card:before,
.card:after {
    content: '';
    display: block;
    position: absolute;
    height: 2rem;
    border-radius: 0.3rem;
}
.card:before {
    bottom: -0.25rem;
    left: 0.8rem;
    right: 0.8rem;
    background-color: #262626546;
    z-index: 2;
}
.card:after {
    bottom: -0.5rem;
    left: 1.1rem;
    right: 1.1rem;
    background-color: #3B3F40;
    z-index: 1;
}
#highlight_words {        
    width: 22.6rem;
    height: 4rem;
    font-size: 0.7rem;
    line-height: 1.0rem;
    padding: 0.3rem;
}

/* EXPIRATIONS */
.masked {
    opacity: 0.2;
    line-height: 1.1rem;
    letter-spacing: -0.35rem;
    font-size: 1.5rem;
    padding-bottom: 0.8rem;
    word-spacing: 0.4rem;
}
.message {
    padding: 1rem 1rem 1rem 5rem;
    font-size: 1rem;
    font-weight: bold;
}
.warn {
    background-color: rgba(38, 1, 1, 0.54);
}

/* HTMX */
div.deck_list.htmx-swapping {
    opacity: 0;
    transition: opacity 0.15s ease;
}

.deck_list input[type=text], .deck_list button {
    margin: 0.2rem 0 0rem 0;
    width: 70%; 
    border-radius: 0.2rem;
    padding: 0.2rem 0.5rem; 
    background-color: rgba(0, 0, 0, 0.212);
    font-size: 0.9rem;
    color: #fff;
    -webkit-appearance: none;
}
.deck_list button {
    width: 10%;
}

/* AVAILABILITY SOURCES HEALTHCHECK */
#availability {
    line-height: 1;
    text-align: right;
}
.awailability_source {    
    width: 20rem;
    height: 0.6rem;
    overflow: hidden;
    font-size: 0.6rem;
    display: inline-block;
}
.awailability_date {    
    width: 0.6rem;
    height: 0.6rem;
    display: inline-block;
}
.red {
    background-color: #6c103f;
}
.green {
    background-color: #186c10;
}

/* CHOOSEN */
.chosen-container .chosen-results {
    max-height: 5rem;
}
.chosen-container-multi .chosen-choices {
    padding: 0 0.3rem;
    border: none;
}
.chosen-container-multi .chosen-choices li.search-choice {
    position: relative;
    margin: 3px 5px 3px 0;
    padding: 3px 20px 3px 5px;
    border: 1px solid #aaa;
    max-width: 100%;
    border-radius: 3px;
    background-color: #eeeeee;
    background-image: -webkit-gradient(linear, left top, left bottom, color-stop(20%, #f4f4f4), color-stop(50%, #f0f0f0), color-stop(52%, #e8e8e8), to(#eee));
    background-image: linear-gradient(#f4f4f4 20%, #f0f0f0 50%, #e8e8e8 52%, #eee 100%);
    background-size: 100% 19px;
    background-repeat: repeat-x;
    background-clip: padding-box;
    -webkit-box-shadow: 0 0 2px #fff inset, 0 1px 0 rgba(0, 0, 0, 0.05);
    box-shadow: 0 0 2px #fff inset, 0 1px 0 rgba(0, 0, 0, 0.05);
    color: #333;
    line-height: 13px;
    cursor: default;
}
.chosen-container-multi .chosen-choices li.search-choice .search-choice-close {
    position: absolute;
    top: 4px;
    right: 3px;
    display: block;
    width: 12px;
    height: 12px;
    background: url("/static/img/chosen-sprite.png") -42px 1px no-repeat;
        background-repeat: no-repeat;
        background-image: url("/static/img/chosen-sprite.png");
        background-size: auto;
    font-size: 1px;
}
.chosen-container-multi .chosen-choices li.search-choice .search-choice-close {
    background: url("/static/img/chosen-sprite.png") -42px 1px no-repeat;
}
/* @group Retina compatibility */
@media only screen and (-webkit-min-device-pixel-ratio: 1.5), only screen and (min-resolution: 144dpi), only screen and (min-resolution: 1.5dppx) {
    .chosen-rtl .chosen-search input[type="text"],
    .chosen-container-single .chosen-single abbr,
    .chosen-container-single .chosen-single div b,
    .chosen-container-single .chosen-search input[type="text"],
    .chosen-container-multi .chosen-choices .search-choice .search-choice-close,
    .chosen-container .chosen-results-scroll-down span,
    .chosen-container .chosen-results-scroll-up span {
        background-image: url("/static/img/chosen-sprite@2x.png") !important;
    }
}
.chosen-container-multi .chosen-choices li.search-field input[type="text"] {
    font-size: 0.7rem;
    font-family: 'News Cycle', 'Open Sans',' Helvetica Neue', Helvetica, 'Times New Roman', serif;
}
/* TIPS */
/*
#tips {
    width: 7.5rem;
    font-size: 0.7rem;
    margin-top: 0.6rem;
    padding: 0.6rem;
    border-radius: 0.3rem;
    border: 0.1rem solid rgba(204, 204, 204, 0.2);
    background-color: rgba(0, 0, 0, 0.063);
}
#tips:hover {
    background-color: rgba(0, 0, 0, 0.33);
}
#tips:hover i.remove::before{
    content: "\f00d";
}
#tips h2 {
    font-size: 0.7rem;
}
*/

.neon {
    text-decoration: none;
    color: #64ed85;
    font-size: 1rem;
    padding: 0.4rem 0.8rem;
    border-radius: 0.2rem;
    transition: background .5s, color .5s;
}

.neon:hover {
    background: #64ed85;
    box-shadow: 0 0 0.8rem #64ed85;
    color: #23252f;
    transition: background .5s, color .5s;
    filter: hue-rotate(20deg);
}

.neon:active {
    box-shadow: 0 0 0.4rem #64ed85;
    filter: hue-rotate(40deg);
}

/* TOPLIST */
.toplist {
    border-spacing: 0;
    width: 100%;
}
.toplist th {
    font-size: 0.5rem;
    padding: 1rem 1rem 0.2rem 0;
    text-align: left;
    white-space: nowrap;
}
.toplist td {
    font-size: 0.8rem;
    padding-top: 0.2rem;
    padding-bottom: 0.2rem;
    vertical-align: top;
}
.toplist td:nth-child(1), .toplist td:nth-child(2), .toplist td:nth-child(4), .toplist td:nth-child(5)  {
    width: 0;
    white-space: nowrap;
}
.toplist td:nth-child(1) {
    text-align: center;
    padding: 0 0.5rem 0 1rem;
}
.toplist td:nth-child(4), .toplist th:nth-child(4) {
    text-align: right;
    padding-right: 0.5rem;
}   
.toplist td:nth-child(5), .toplist td:nth-child(1) {
    opacity: 0.5;
}   
.toplist td:nth-child(2) {
    padding-right: 0.15rem;
}
.toplist td:nth-child(2) span.icon {
    margin-top: 0.15rem;
}
.toplist td:nth-child(3) {
    padding-right: 1rem;
    max-width: 7rem;
}
.toplist td:nth-child(6), .toplist th:nth-child(6) {
    text-align: right;
    padding-right: 1rem;
    padding-left: 0.5rem;
}   
.toplist tr:hover {
    background-color: rgba(0, 0, 0, 0.22);
}
.toplist td:nth-child(3):hover .tag {
    display: inline-block;
}
.toplist td:nth-child(3):hover .toplist_via {
    display: block;
    font-size: 0.6rem;
}
.toplist_via {
    display: none;
}
.toplist .tag {
    display: none;
}
.toplist .hover_me {
    cursor: pointer;
}
.toplist td.position {
    padding-top: 0.19rem;
}
.percent {
    padding-left: 0.1rem;
}
.toplist_explainer {
    font-size: 0.6rem;
    opacity: 0.65;
    padding: 0;
    margin: 0;
    text-align: left;
}
.toplist_stats {
    padding: 0.2rem 0;
    font-size: 0.5rem;
}
code {
    background-color: rgba(0, 0, 0, 0.25);
    border-radius: 0.2rem;
    font-size: 0.5rem;
    padding: 0.02rem 0.16rem;
    white-space: nowrap;
}
.toplist_marg {
    padding: 1rem 0.45em 1rem 0.45rem;
}
.no_marg {
    margin: 0;
}
.golden {
    color: transparent;
    -webkit-background-clip: text;
    background-clip: text;
    background-image: radial-gradient(ellipse farthest-corner at right bottom, #FEDB37 0%, #FDB931 8%, #9f7928 30%, #8A6E2F 40%, transparent 80%),
                radial-gradient(ellipse farthest-corner at left top, #FFFFFF 0%, #FFFFAC 8%, #D1B464 25%, #5d4a1f 62.5%, #5d4a1f 100%);
    filter: brightness(150%);
}
.bouncy {
    animation: zoom-in-zoom-out 1s ease infinite;
}

@keyframes zoom-in-zoom-out {
0% {
    transform: scale(1, 1);
}
50% {
    transform: scale(1.5, 1.5);
}
100% {
    transform: scale(1, 1);
}
}

.invite-box {
    margin-top: 0.5rem;
    width: 100%; 
    border-radius: 0.2rem;
    padding: 0.2rem 0.5rem; 
    background-color: rgba(0, 0, 0, 0.212);
    font-size: 0.9rem;
    color: #fff;
    -webkit-appearance: none;
}
.invite-box:active {
    text-decoration: none;
    background-color: rgba(0, 0, 0, 0.312);
}
.invite-box:hover {
    text-decoration: none;
    filter: brightness(80%);
    -webkit-filter: brightness(80%);
}
.black {
    color: #000000;
}
.bold {
    font-weight: bold;
}

.cta {
    width: 10rem;
  }
  
  .ctabtn {
    color: #fff;
    position: relative;
      background: linear-gradient(-90deg, #5b1f3a, #3f3b2f, #23A6D5, #353535, #5b1f3a);
      background-size: 400% 100%;
    text-transform: uppercase;
    text-align: center;
    font-weight: 700;
    border: none;
    border-radius: 0.25em;
    font-size: 13px;
    letter-spacing: 1px;
    padding: 0;
    margin: 0;
    animation: Gradient 4s ease infinite;
    text-decoration: none;
  }
  
  .ctabtn div {
    padding: 0.7rem 0.7rem 0.8rem 0.8rem;
    border-radius: inherit;
    background-size: inherit;
    background-image: inherit;
    animation: Gradient 4s ease infinite;
    position: relative;
  }
  
  @keyframes Gradient {
      50% {
          background-position: 140% 50%;
      transform: skew(-2deg);
      }
  }
  
.pagination-controls {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding-top: 0.7rem;
    padding-bottom: 0.4rem;
}

.pagination-arrows {
    display: flex;
    gap: 0.7rem;
}

.pagination-arrow {
    color: rgba(255, 255, 255, 0.6);
    font-size: 0.7rem;
    transition: color 0.2s;
}

.pagination-arrow:hover {
    color: rgba(255, 255, 255, 0.9);
}

.toplist_explainer {
    font-size: 0.6rem;
    opacity: 0.65;
    padding: 0;
    margin: 0;
    text-align: left;
}

/* Style for strikethrough text in filters */
#toplist_filters .striked-out {
    text-decoration: line-through;
    opacity: 0.6; /* Slightly dim the text */
}