UserStyles.World (USw) - WideScreen v.14

Compact userstyle for a widescreen
目前為 2021-07-25 提交的版本，檢視最新版本。
Wrap lines
/* ==UserStyle==
@name        UserStyles.World (USw) - WideScreen v.14
@namespace   https://greasyfork.org/en/users/8-decembre?sort=updated
@version     14.00
@author      decembre
@description Compact userstyle for a widescreen
@license     unlicense
==/UserStyle== */

@namespace url(http://www.w3.org/1999/xhtml);

@-moz-document domain("userstyles.world") {

/* ==== 0- UserStyles.World (USw) - WideScreen v.14 - TEST FRESH ==== */

/* WIDESCREEN */

/* (new4) ALL */
html body > main {
    display: inline-block;
    min-height: calc(100vh - 130px);
    width: 100%;
}
/* (new6) */
.rwrap {
    flex-flow: row wrap;
    margin-top: 0 !important;
overflow-x: hidden !important;
}
/* FOOTER */
footer {
    -moz-user-select: text;
    height: 30px;
    outline-width: 0;
}
footer .wrapper {
    min-height: 30px !important;
    padding: 0 !important;
}
/* EXPLORE */
html body > main {
    display: inline-block;
    min-height: calc(100vh - 130px);
    width: 100%;
}
main .wrapper {
    margin: auto;
    max-width: 100%;
    padding-left: 1rem;
    padding-right: 1rem;
    width: 100%;
}

/* HEADER EXPLORE / SEARCH */
.wrapper.py\:l .ta\:c {
    position: sticky;
    display: inline-block;
    min-width: 100%;

    right: 42px;
    text-align: center;
    top: -5px !important;
    margin-top: -2rem;
    width: 100%;
    z-index: 500000 !important;
background: #111 !important;
}

/* (new9) SEARCH */
.wrapper.py\:l .ta\:c + section.mt\:l  {
    position: sticky;
    display: inline-block;
    width: 100%;
    min-width: 100% !important;
    top: 3.7vh !important;
    right: 42px;
    margin-top: -1rem;
    margin-bottom: 1rem;
    text-align: center;
    z-index: 5000;
background: #111 !important;
}

.wrapper.py\:l .ta\:c + section  + .mt\:l {
    margin-top: -1rem;
}
.wrapper.py\:l .ta\:c h1 {
    font-size: 1.5em !important;
}
/* NO DARK */
html[data-color-scheme="light"] .wrapper.py\:l .ta\:c h1 {
color: white !important;
}

.wrapper.py\:l .ta\:c + section>form {
    background-color: var(--bg-2);
    border: 1px solid var(--bg-4);
    border-radius: var(--br-3);
    margin: 1rem auto;
    max-width: 901px;
    padding: 1rem;
}
.wrapper.py\:l .ta\:c + section>form label {
    display: flex;
    float: left;
    max-width: 250px;
    margin-top: -12px;
/* border: 1px solid green; */
}
.wrapper.py\:l .ta\:c + section>form>input {
    float: left;
    margin-bottom: 0;
    margin-top: 0;
    padding-top: 0;
    padding-bottom: 0;
    margin-top: -12px !important;
    width: 75% !important;
}
/* (new13) EXPORE - INPUT hidden - */
.wrapper.py\:l .ta\:c + section>form>input[hidden] {
    display: none !important;
}

.wrapper.py\:l .ta\:c + section>form>.btn.primary {
    float: right;
    padding-bottom: 0;
    padding-top: 0;
    margin-top: -12px;
}

/* (new5) EXPLORE ORDER LABEL - OPACITY */
#sort>option[value]:before {
opacity: 0.3;
}
#sort>option[value]:hover:before {
opacity: 1;
}
/* (new5) EXPLORE ORDER LABEL - RECENT NEWEST " ▼ " */
#sort>option[value="recentlyupdated"]:before ,
#sort>option[value="newest"]:before {
content: "▼" ;
display: inline-block !important;
width: 17px ;
height: 15px ;
line-height: 14px ;
margin-right: 10px ;
/* border-radius: 50% ; */
text-align: center ;
background: green !important;
}

/* (new5) EXPLORE ORDER LABEL - RECENT LEAST " ▲ " */
#sort>option[value="leastupdated"]:before ,
#sort>option[value="oldest"]:before {
content: "▲" ;
display: inline-block !important;
width: 17px ;
height: 15px ;
line-height: 14px ;
margin-right: 10px ;
/* border-radius: 50% ; */
text-align: center ;
background: red !important;
}
/* (new5) EXPLORE ORDER LABEL - LEAST " - 📉 " */
#sort>option[value="leastinstalls"]:before ,
#sort>option[value="leastviews"]:before {
content: "📉" ;
display: inline-block !important;
width: 17px ;
height: 15px ;
line-height: 14px ;
margin-right: 10px ;
font-size: 13px !important;
/* border-radius: 50% ; */
text-align: center ;
background: red !important;
}
/* (new5) EXPLORE ORDER LABEL - MOST " 💹+ " */
#sort>option[value="mostinstalls"]:before ,
#sort>option[value="mostviews"]:before {
content: "💹" ;
display: inline-block !important;
width: 17px ;
height: 15px ;
line-height: 14px ;
margin-right: 10px ;
font-size: 13px !important;
text-align: center ;
background: green !important;
}

#sort {
    -moz-appearance: none !important;
/* display: inline-block !important;
color: red !important;
background: green !important; */
}

#sort>option:checked {
    -moz-appearance: none !important;
display: inline-block !important;
color: red !important;
background: green !important;
}

/* EXPLORE THUMBNAILS */

.card.animate.bd\:o  {
    min-width: 24%;
    max-width: 24%;
    height: 90px !important;
    margin: 0 7px 5px 10px !important;
    transition: transform 0.2s linear 0s;
    border: 1px solid red;
}
.card.animate figure{
    height: 100% !important;
    width: 100% !important;
    top: 0;
    left: 0;
    padding-top: 84px !important;
}
.card.animate .thumbnail {
    float: left !important;
    width: 42%;
/*     border-radius: 10px 0 0 10px !important; */
/*     border: 1px solid red; */
}

.card.animate figure img {
    height: 88px !important;
    left: 0;
    object-fit: contain;
    object-position: center top;
    position: absolute;
    top: 0;
    width: 100% !important;
}

.card.animate .f\:col {
    margin-top: 4px !important;
    padding: 0 !important;
}
.card.animate .card-footer {
    width: 100% !important;
    padding: 0 2px 0 0 !important;
}
.card.animate:hover {
    transform: none !important;
}
[tooltip-data]:hover::before , 
[tooltip-data]:hover::after ,
[tooltip-data]:hover {
    z-index: 500000 !important;
}
/* ACCOUNT */
/* TOOLTIP RIGHT */
/* .card.animate:nth-of-type(3n +3) .card-footer small:last-of-type span:hover::before */
.card.animate .card-footer small:last-of-type span:hover::before {
    margin-left: -195px;
border: 1px solid red !important;
}
/* TOOLTIP LEFT */
/* .card.animate:nth-of-type(3n +1) .card-footer small:first-of-type time:hover::before */
.card.animate .card-footer small:first-of-type time:hover::before {
    margin-left: -35px !important;
border: 1px solid green !important;
}

.my\:0 ,
.f\:h3 {
    font-size: 0.8em !important;
}
.card-body > .name {
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: pre-line !important;;
    width: 100%;
}

/* NO SCREENSHOT */
.card.animate  .thumbnail picture.no-screenshot ,
.card.animate figure.no-screenshot{
     display: inline-block !important;
/*     height: 140px;
    position: absolute;
    top: calc(50% - 70px); */
transform: translate(0px, 0px) scale(0.7) !important;
filter: grayscale(1); 
/* opacity: 0.4 !important; */
/* border: 1px solid yellow !important; */
}

/* CLICK FOR DETAIL */
.card .thumbnail picture::after ,
.card .thumbnail figure::after {
/* display: none !important; */
    bottom: unset;
    content: "Click to see details";
    top: calc(50% - 0.8rem);
    font-size: 1rem !important;
pointer-events: none !important;
}
.card .thumbnail picture::before ,
.card.col figure::before {
/* display: none !important; */
pointer-events: none !important;
}
.card .thumbnail picture::after , 
.card.animate figure.no-screenshot::after {
    bottom: unset;
    content: "Click to see details";
    top: calc(50% - 0.8rem);
    font-size: 1rem !important;
transform: translate(0px, 0px) scale(1.2) !important;
/* opacity: 1 !important; */
}
/*NEW*/
.grid.flex.rwrap .card.col.gap.animate .no-screenshot.flex {
    right: -26% !important;
}


.card.animate  .thumbnail picture.no-screenshot::after {
    content: "Click to see details";
    top: calc(20% - 0.8rem) !important;
right: 10% !important;
    font-size: 1rem !important;
transform: translate(-60px, 0px) scale(1.2) !important;
background-color: red !important;
outline: 1px solid gray !important;
/* opacity: 1 !important; */
}

/*  ACCOUNT */
.grid.flex.rwrap.mx\:r.mt\:m  .thumbnail>picture{
    height: 88px !important;
    padding-top: 0;;
}
.grid.flex.rwrap.mx\:r.mt\:m  .thumbnail>picture>img{
    position: absolute;
    height: 88px !important;
    width: 100% !important;
    top: 0;
    left: 0;
    object-fit: contain;
    object-position: center center;
    border-radius: 10px 0 0 10px !important;
}
.card .thumbnail picture::before ,
.card .thumbnail picture::after {
/*     width: 100% !important; */
pointer-events: none !important;
}

.card.animate .flex.cwrap.py\:m {
    float: right !important;
    width: 57%;
    height: 87px !important;
    padding: 0.3rem !important;
    border-left: 4px solid red;
}

/* STYLE INFO - PREVIEW - LEFT */

.preview {
    float: left !important;
clear: both !important;
    height: auto !important;
width: 50% !important;
    margin-top: -1.5rem !important;
    padding: 0.5rem !important;
}
.preview  h1 {
    min-width: 100% !important;
    font-size: 1.5em;
}
.preview  h1 .fg\:4 {
    float: left !important;
    width: 100% !important;
    font-size: 0.8em;
}
.preview .card{
    padding: 0.5rem !important;
    border-radius: 0 !important;
}

.card .screenshot {
    border-radius: 0 !important;
}
/* .card .screenshot .blurred {
    filter: unset !important;
} */
.card .screenshot ,
.card .screenshot .blurred ,
.card .screenshot img[alt] {
    height: 100% !important;
    width: 100% !important;
    border-radius: var(--br-3);
    object-fit: contain;
    object-position: center center;
}
/* SUPP? */
.card.bd\:o {
    height: auto !important;
    width: 100% !important;
/*     margin-top: 139px !important; */
}
.preview h1 + .card.bd\:o {
    height: auto !important;
    width: 100% !important;
    margin-top: 170px !important;
}


.card figure {
    position: relative;
height: 70vh !important;
/*     width: 20% !important; */
    margin: 0;
/*     padding-top: 56.25%; */
     padding-top: 0%;
}
.card figure img {
    position: absolute;
    width: 100%;
    left: 0;
    top: 0;
    object-fit: contain !important;
    object-position: center center;
    border-radius: var(--br-3);
}

/* STYLE INFO - STATS - RIGHT */
.details .mt\:m.stats:first-of-type  {
/*     position: absolute !important; */
    clear: none !important;
/*     float: none; */
    float: left;
clear: both !important;
width: 48% !important;
/*     width: 49% !important; */
    height: auto;
    max-height: 12vh !important;
    min-height: 12vh !important;
    left: 20px !important;
/*     bottom: 7vh; */
    margin-top: 1vh;
    padding: 0 0.5rem;
    overflow: hidden;
background: red !important;
border: 1px solid tomato;
}

.weekly-updates ,
.weekly-installs ,
.total-installs ,
.total-views {
display: inline-block !important;
    float: left ;
    width: 50% !important;
font-size: 15px !important;
border: 1px solid aqua;
}
/* .details .mt\:m.stats:first-of-type  .total +  .total {
display: inline-block !important;
    width: 100% !important;
border: 1px solid aqua;
} */


/* STYLE INFO - DESCR / NOTE - RIGHT*/
.wrapper.py\:l {
    max-width: 100%;
    padding-bottom: 2rem;
    padding-top: 2rem;
/* overflow-x: hidden !important; */
}

.preview + .mt\:l {
    margin-top: -1.5rem !important;
}
.preview + .mt\:l {
    float: right !important;
clear: none !important;
    height: auto !important;
max-height: 90vh !important;
width: 48% !important;
    margin-top: 0;
    padding: 0 1rem;
}

/* INSTAL */
.header.flex.mb\:m.ai\:c{
    display: inline-block !important;
    width: 100% !important;
     height: 35px !important;
    padding: 0 5px !important;
border: 1px solid #333 !important;
}
.actions.flex.ml\:a{
     display: inline-block !important;
     height: 24px !important;
}
.actions.flex.ml\:a .btn[target="_blank"]{
     height: 24px !important;
    padding: 0 5px !important;
border: 1px solid tomato !important;
}
.actions.flex.ml\:a .btn[target="_blank"]:first-of-type{
     height: 24px !important;
     line-height: 15px !important;
border: 1px solid green !important;
}

.share.flex {
    display: inline-block !important;
     height: 24px !important;
}
#btn-share {
    display: inline-block !important;
    min-height: 24px !important;
    max-height: 24px !important;
    line-height: 15px !important;
padding: 0 !important;
}
.share.flex span {
    display: inline-block;
    line-height: 15px;
    max-height: 15px !important;
    min-height: 15px !important;
    padding: 0;
}
.share.flex input  {
    display: inline-block !important;
    min-height: 24px !important;
    max-height: 24px !important;
    min-width: 40% !important;
    max-width: 40% !important;
    line-height: 15px !important;
    padding: 0 5px !important;
}
.share .mr\:s{
    display: inline-block !important;
}
.actions.flex.ml\:a.btn{
    display: inline-block !important;
}

.header.flex.mb\:m.ai\:c .unset{
    display: inline-block !important;
     height: 24px !important;
/*     padding: 0.2rem 0.2rem !important; */
}
.header.flex.mb\:m.ai\:c .unset .btn {
    display: inline-block;
    min-height: 24px !important;
    max-height: 24px !important;
padding: 0 !important;
}
.header.flex.mb\:m.ai\:c a {
    display: inline-block !important;
height: 24px !important;
    line-height: 22px !important;
    padding: 0 5px !important;
}
.header.flex.mb\:m.ai\:c a.btn.stylus {
    display: inline-block !important;
height: 24px !important;
    line-height: 15px !important;
    padding: 0 5px !important;
}


/* DETAILS */
.details > h2 {
width: 48% !important;
}
.details>p {
float: left !important;
clear: both !important;
    height: 0.5vh !important;
    line-height: 0.3vh !important;
width: 48% !important;
    margin-top: 0;
    padding: 1rem;
border: 1px solid gray !important;
}
.details > p span.minw ,
.details > p a ,
.details > p span ,
.details > p {
    line-height: 0.3vh;
    font-size: 0.8rem !important;
}

/* DESCRIPTION */
.details .mt\:m:first-of-type + .mt\:m {
float: right ;
clear: both !important;
    height: auto !important;
min-height: 35vh !important;
max-height: 35vh !important;
width: 50% !important;
    padding: 0rem 0.5rem ;
    margin-top: -35vh;
overflow: hidden !important;
border: 1px solid #333 !important;
}
.details .mt\:m:first-of-type + .mt\:m  .md > p {
min-height: 31vh !important;
max-height: 31vh !important;
line-height: 2vh;
    font-size: 1rem !important;
overflow: hidden !important;
overflow-y: auto !important;
border-bottom: 1px dashed gray !important;
}

/* (new8) HISTORY */
.history:hover ,
.history:not(:hover) ,
.details + .history:hover ,
.details + .history:not(:hover) {
    position: absolute !important;
    width: 15% !important;
min-height: 2.9vh !important;
max-height: 2.9vh !important;
    margin: 0 !important;
    right: 14% !important;
    top: 48.4vh !important;
    padding: 0 10px !important;
border-radius: 5px 5px 0 0 !important;
    border: 1px solid red;
}
.history:after ,
.details + .history:after {
position: absolute !important;
content: "▼" !important;
top: 6px !important;
margin-left: 120px !important;
font-size: 10px !important;
    text-decoration: none !important;
background: red !important;
}
.history:not(:hover) .chart ,
.details + .history:not(:hover) .chart {
    display: none !important;
border: 1px solid red;
}
.history:hover .chart {
position: absolute !important;
    display: inline-block !important;
    height: 408px;
    width: 870px;
    margin-left: -358px !important;
border-radius: 0 0 5px 5px !important;
margin-top: 0px !important;
visibility: hidden !important;
border: 1px solid red;
}
.history:hover .chart:hover {
position: absolute !important;
    display: inline-block !important;
    height: 408px;
    width: 870px;
    margin-left: -358px !important;
border-radius: 0 0 5px 5px !important;
margin-top: 0px !important;
visibility: visible !important;
z-index: 5000 !important;
border: 1px solid red;
}

.history:hover .chart:before {
    content: " " !important;
position: absolute !important;
    display: inline-block !important;
    height: 20px;
    width: auto !important;
top: -3.1vh !important;
padding: 0px 5px !important;
border-radius: 5px !important;
margin-top: 0px !important;
visibility: visible !important;
border: 1px solid red !important;
}


.history:hover .chart:first-of-type:before {
    content: "Daily" !important;
left: 57% !important;
}
.history:hover .chart:last-of-type:before {
    content: "Total" !important;
left: 66% !important;
}
.history:hover .chart:hover:before {
border: 1px solid yellow !important;
}

/* (new10) NO HISTORY  / INFOS */
.details + .history>i:not(:hover) {
    position: absolute;
/* width: 20px !important; */
    top: -20px;
padding: 0px !important;
border-radius: 3px !important;
font-size: 12px;
    text-decoration: none;
font-style: normal !important;
text-align: center !important;
visibility: hidden !important;
    z-index: 500 !important;
background: red !important;
}
.details + .history>i:hover {
    position: absolute;
/* width: 20px !important; */
    top: -20px;
padding: 0px !important;
border-radius: 3px !important;
font-size: 12px;
    text-decoration: none;
font-style: normal !important;
text-align: center !important;
visibility: visible !important;
    z-index: 500 !important;
background: red !important;
}
.details + .history>i:after {
    position: absolute;
    content: "🚫";
width: 20px !important;
    top: 26px;
    left: -5px !important;
    margin-left: 120px;
    font-size: 10px;
    text-decoration: none;
font-style: normal !important;
text-align: center !important;
    z-index: 500 !important;
visibility: visible !important;
background: red !important;
}


.history:not(:hover) > p ,
.details + .history:not(:hover) > p {
    display: none !important;
border: 1px solid red;
}
.history:hover > p ,
.details + .history:hover > p {
position: absolute !important;
    display: inline-block  !important;
width: 100% !important;
min-width: 288px !important;
max-width: 288px !important;
margin-left: -4% !important;
padding: 5px !important;
font-size: 15px !important;
text-align: center !important;
border: 1px solid red;
background: #111 !important;
}
.history:hover > p a ,
.details + .history:hover > p a {
    display: inline-block  !important;
width: 100% !important;
min-width: 275px !important;
max-width: 275px !important;
padding: 0px !important;
font-size: 15px !important;
text-align: center !important;
}
.history > p a:after ,
.details + .history > p a:after {
    color: red !important;
}

/* NO DARK */
html[data-color-scheme="light"] .history:hover > p ,
html[data-color-scheme="light"] .details + .history:hover > p {
background: white !important;
}


/* (new12) REVIEW */
.reviews:not(:hover) {
    position: absolute;
    display: inline-block;
    width: 9%;
    height: auto;
    max-height: 2.9vh;
    min-height: 2.9vh;
    right: 32% !important;
    top: 48.5vh;
    margin: 0;
    padding: 0 10px;
    border-radius: 5px 5px 0 0;
    overflow: hidden;
border: 1px solid red;
}
.reviews:hover {
    position: absolute;
    display: inline-block;
    width: 45%;
    height: auto;
max-height: 44vh;
    min-height: 44vh;
/*     max-height: 2.9vh;
    min-height: 2.9vh; */
    right: 2% !important;
    top: 51.5vh;
    margin: 0;
    padding: 0 10px;
    border-radius: 0 0 5px 5px;
/* overflow: hidden; */
z-index: 500000 !important;
background: #111 !important;
border: 1px solid red;
}
/* NO DARK */
html[data-color-scheme="light"] .reviews:hover {
background: white !important;
}
.reviews:hover h2 {
    position: absolute;
display: inline-block !important;
    width: 20% !important;
    height: auto;
/*     max-height: 47vh;
    min-height: 47vh; */
    top: -3.5vh !important;
    margin-top: 0;
left: 13% !important;
padding: 0 5px !important;
    border-radius: 5px 5px 0 0 !important;
border: 1px solid red !important;
}
.reviews:hover h2 + a {
    margin-top: 0;
    position: absolute;
display: inline-block !important;
    right: 20% !important;
    bottom: 0vh;
}
.reviews:hover h2 + a + i {
    position: absolute;
display: inline-block !important;
width: 100% !important;
min-width: 100% !important;
max-width: 100% !important;
max-height: 43.6vh;
    min-height: 43.6vh;
    margin-top: 0;
    top: 0vh !important;
left: 0%  !important;
padding: 5px !important;
color: gray !important;
background: #111 !important;
}

.Box {
    position: relative;
    margin-top: 0.2rem;
    padding: 1rem;
    border: 1px solid var(--bg-4);
    border-radius: var(--br-3);
background-color: #111 !important;
}

/* NO DARK */
html[data-color-scheme="light"] .reviews:hover h2 + a + i {
background: white !important;
}

/* NO DARK */
html[data-color-scheme="light"] .Box {
background-color: white !important;
}

/* (new7)NOTES  / CHANGELOG */
.details .mt\:m:last-of-type {
float: left ;
    height: auto !important;
min-height: 49vh !important;
max-height: 49vh !important;
width: 100% !important;
    margin-top: 0;
    padding: 1rem 0 0 0;
overflow: hidden !important;
border: 1px solid #333 !important;
}
.details .mt\:m:last-of-type > h2 {
width: 10% !important;
    padding: 0 10px ;
border-radius: 5px 5px 0 0 !important;
border: 1px solid red !important;
}

.details .mt\:m:last-of-type .md {
    height: auto !important;
min-height: 44.3vh !important;
max-height: 44.3vh !important;
margin-top: -5px !important;
    padding-left: 1rem;
overflow: hidden !important;
overflow-y: auto !important;
border-top: 3px solid gray !important;
/* border-left: 3px solid red !important; */
}
/* NO NOTES */
.details .mt\:m:last-of-type h2 + i {
display: inline-block !important;
width: 100% !important;
min-width: 100% !important;
    height: auto !important;
min-height: 44.3vh !important;
max-height: 44.3vh !important;
margin-top: -5px !important;
    padding-left: 1rem;
overflow: hidden !important;
overflow-y: auto !important;
border-top: 3px solid gray !important;
/* border-left: 3px solid red !important; */
}
.md>p>br {
    display: block !important;
    margin-bottom: 0px !important;
}

.td\:d {
    margin: -0.2em 0 0.2em;
    font-size: 1.2em;
    text-decoration: underline;
}
.md h1 {
    font-size: 1rem;
}

/* (new8) NOTES - COMPACT */
.md>ul>li>p>br + br{
    display: none !important;
}
.details .mt\:m:last-of-type .md>ul>li>p {
    margin-bottom: 0.2rem;
}
.details .mt\:m:last-of-type .md h2 {
    font-size: 1.6rem;
    margin-top: 0.5rem !important;
}






/* ======================= */


/* (new8) NEW CODE - NORMAL - CONTAINER  */
.history + .code.mt\:l:hover ,
.history + .code.mt\:l:not(:hover)  {
position: absolute !important;
display: inline-block !important;
/* float: right; */
    height: auto !important;
min-height: 2.9vh !important;
max-height: 2.9vh !important;
width: 9% !important;
/*     margin-top: 0; */
/*     margin-right: -272px; */
top: 48.5vh !important;
right: 36px !important;
    margin: 0px  !important;
    padding: 0 10px !important;
border-radius: 5px 5px 0 0 !important;
overflow: hidden !important;
/* overflow-y: hidden !important; */
/* transition: all ease 0s !important; */
/* visibility: hidden !important; */
border: 1px solid red !important;
}
/* (new8) NEW CODE - NORMAL - CONTAINER - HOVER */
.history + .code.mt\:l:hover {
position: absolute !important;
display: inline-block !important;
/* float: right; */
    height: auto !important;
min-height: 2.9vh !important;
max-height: 2.9vh !important;
width: 9% !important;
/*     margin-top: 0; */
/*     margin-right: -272px; */
top: 48.5vh !important;
right: 36px !important;
    margin: 0px  !important;
    padding: 0 10px !important;
border-radius: 5px 5px 0 0 !important;
overflow: visible !important;
/* overflow-y: hidden !important; */
/* transition: all ease 0s !important; */
/* visibility: hidden !important; */
border: 1px solid red !important;
}

/* (new8) NEW CODE - NORMAL - ARROW  */
.history + .code.mt\:l:before {
position: absolute !important;
content: "▼" !important;
top: 5px !important;
margin-left: 135px !important;
font-size: 10px !important;
    text-decoration: none !important;
background: red !important;
}

.history + .code.mt\:l:not(:hover)  .td\:d {
position: relative !important;
display: inline-block !important;
    font-size: 1.2em;
/*     margin: 0 !important; */
    text-decoration: underline;
}

/* CODE NORMAL - HOVER (BLUE) */
.code.mt\:l:hover  textarea {
position: absolute !important;
/* position: relative !important; */
display: inline-block !important;
float: none !important;
    height: auto !important;
min-height: 44vh !important;
max-height: 44vh !important;
width: 100% !important;
min-width: 869px !important;
max-width: 869px !important;
    margin: 0 !important;
    margin-top: 3vh !important;
top: 0vh !important;
left: -36.5vw !important;
/* margin-left: -705px !important; */
/*     padding: 0.2rem 0 0 0 !important; */
padding: 5px 5px 5px 10px !important;
border-radius: 0 0 5px 5px !important;
overflow: hidden !important;
overflow-y: auto !important;
z-index: 5000 !important;
border: 1px solid yellow !important;
border-right: 10px solid tomato !important;
/* background: blue !important; */
background: #111 !important;
cursor: default !important;
}
/* NO DARK */
html[data-color-scheme="light"] .code.mt\:l:hover  textarea {
background: white !important;
}

/* =============================== */
/* CODE + MARK -  WITHOUT B - HOVER (RED)
Flickr WideScreen - BigONE
https://userstyles.world/style/248
==== */
.details + .history + .code.mt\:l:hover mark +  textarea {
position: absolute !important;
/* position: relative !important; */
display: inline-block !important;
float: none !important;
    height: auto !important;
min-height: 44vh !important;
max-height: 44vh !important;
width: 100% !important;
min-width: 869px !important;
max-width: 869px !important;
    margin: 0 !important;
    margin-top: 3vh !important;
top: 0vh !important;
left: -36.5vw !important;
/* margin-left: -705px !important; */
/*     padding: 0.2rem 0 0 0 !important; */
padding: 5px 5px 5px 10px !important;
border-radius: 0 0 5px 5px !important;
overflow: hidden !important;
overflow-y: auto !important;
z-index: 5000 !important;
border: 1px solid yellow !important;
border-right: 10px solid tomato !important;
background: #111 !important;
/* background: red !important; */
}


/* ================================= */
/* OK - CODE MARK - STRANGE  WITH B (GREEN)
Mozilla Addon Widescreen NEW design
https://userstyles.world/style/61
.details + b .history + .code.mt\:l mark +  textarea
==== */

.details + b .history + .code.mt\:l:hover mark +  textarea {
position: absolute !important;
/* position: relative !important; */
display: inline-block !important;
float: none !important;
    height: auto !important;
min-height: 44vh !important;
max-height: 44vh !important;
width: 100% !important;
min-width: 869px !important;
max-width: 869px !important;
    margin: 0 !important;
    margin-top: 3vh !important;
top: 0vh !important;
left: -36.5vw !important;
/* margin-left: -705px !important; */
/*     padding: 0.2rem 0 0 0 !important; */
padding: 5px 5px 5px 10px !important;
border-radius: 0 0 5px 5px !important;
overflow: hidden !important;
overflow-y: auto !important;
z-index: 5000 !important;
border: 1px solid yellow !important;
border-right: 10px solid tomato !important;
/* background: green !important; */
background: #111 !important;
}

/* ================ */


/* CODE TEXTAERA H2 */
.details + b .code .mt\:l h2 ,
.details + .code.mt\:l h2 {
display: inline-block !important;
/*     transform: rotate(90deg); */
    position: absolute;
    right: 5px !important;
    top: 0px !important;
/* visibility: visible !important; */
}

.details + .code.mt\:l textarea  ,
.details + b .code.mt\:l textarea {
    border: 1px solid var(--bg-4);
    border-radius: var(--br-3);
    color: var(--fg-1);
    font-family: var(--font-mono);
    font-size: 0.875rem;
    max-width: 100%;
    min-height: 400px !important;
    min-width: 100%;
    padding: 0.5rem;
}

/* (new4) CODE WARNING */
.details + b .code.mt\:l  mark {
    display: inline-block !important;
 font-size: 13px !important;
}

/* (new4) CODE WARNING for:
https://userstyles.world/style/3/dark-gitlab
==== */
.history + .code.mt\:l:hover  mark {
position: absolute !important;
display: inline-block !important;
top: -9vh !important;
line-height: 13px !important;
padding: 3px !important;
border-radius: 5px !important;
font-size: 13px !important;
opacity: 0.5 !important;
    background-color: green !important;
}
.history + .code.mt\:l:hover  mark:after {
content: "▼" ;
position: absolute !important;
display: inline-block !important;
margin-left: 5px !important;
bottom: -1.3vh !important;
line-height: 13px !important;
padding: 0px !important;
border-radius: 0px !important;
font-size: 15px !important;
color: green ;
    background-color: transparent !important;
}

/* (new10) COLOR - LIGHT */

/* TEXT - GRAY */
[data-color-scheme="light"] .wrapper.py\:l section:first-of-type + section ,
[data-color-scheme="light"] .wrapper.py\:l section:first-of-type {
    color: black !important;
}
/* TEXT - WHITE */
[data-color-scheme="light"] .wrapper.py\:l .ta\:c i ,
[data-color-scheme="light"] .wrapper.py\:l .ta\:c p {
    color: white !important;
}
/* BACKGROUND - WHITE */
[data-color-scheme="light"] .wrapper.py\:l .ta\:c + section.mt\:l {
    background: white !important;
}

/* BACKGROUND - WHITE */

[data-color-scheme="light"] .details .mt\:m.stats:first-of-type  {
    background: white !important;
}

/* === END GENERAL === */

}

@-moz-document url-prefix("https://userstyles.world/edit/") {

/* START - URL PREF - EDIT ==== */
.wrapper.py\:l {
    max-width: 50% !important;
    padding-bottom: 2rem;
    padding-top: 2rem;
}

/* END URL PREF - EDIT === */

}

@-moz-document url-prefix("https://userstyles.world/account"), url-prefix("https://userstyles.world/user/") {

/* START - URL PREF - ACCOUNT / USER PROFILE ==== */
.wrapper.py\:l {
    max-width: 100%;
    padding-bottom: 0.5rem;
    padding-top: 0.5rem;
}
.welcome .mb\:m {
    margin: 0.5em 0 0.5em;
    font-size: 1em;
}

.styles.mt\:l>h2 ,
.settings.mt\:l>h2 {
    margin: 0.5em 0 0.5em;
    font-size: 1em;
}
/* WELCOME / INFOS BIO / SETTINGS */
.wrapper.py\:l  section:not(:last-of-type),
.settings.mt\:l {
/* float: left !important; */
/* clear: both !important; */
position: absolute !important;
display: inline-block !important;
/*     min-width: 20% !important; */
/*     max-width: 20% !important; */
    margin-top: 0;
left: 0 !important;
    padding: 0.5rem;
z-index: 500 !important;
background: red !important;
border: 1px solid red !important;
}
/* WELCOME */
.wrapper.py\:l section:first-of-type {
position: absolute !important;
min-width: 20% !important;
max-width: 20% !important;
height: 34px !important;
    margin-top: -2px;
    padding:  0 0.5rem 0 2rem;
overflow: hidden !important;
background: #222 !important;
border: 1px solid #333 !important;
}
.wrapper.py\:l section:first-of-type {
background: #111 !important;
}
/* (new11) NO DARK */
html[data-color-scheme="light"] .wrapper.py\:l section:first-of-type {
background: white !important;
}

.welcome .mb\:m {
    font-size: 1em;
margin: 0.2em 0 !important;
}
.wrapper.py\:l  section:first-of-type:hover {
height: auto !important;
}
/* DISPLAY NAME / DISPLAY NAME / BIO / SOCIAL / SETTINGS*/
.wrapper.py\:l  section:first-of-type + section {
position: absolute !important;
/* display: flex !important; */
min-width: 79% !important;
max-width: 79% !important;
height: 32px !important;
left: -77.6% !important;
    margin-top: 0;
    padding: 0.2rem !important;
/* white-space: nowrap !important; */
/* word-wrap: pre !important; */
overflow: hidden !important;
transition: all ease 0.7s !important;
background: #222 !important;
border: 1px solid gray !important;
}
/* NO DARK */
html[data-color-scheme="light"] .wrapper.py\:l  section:first-of-type + section {
color: gray !important;
/* background: white !important; */
border: 1px solid gray !important;
}
html[data-color-scheme="light"] .wrapper.py\:l section:first-of-type + section.settings > h2:first-of-type ~ p.updated + h2 + .md + form + h2.sub-title + .md + form + h2.sub-title + p + form input {
    background: white !important;
}



.wrapper.py\:l  section:first-of-type + section:after {
content: "💡" ;
position: absolute !important;
display: inline-block !important;
height: 26px !important;
width: 24px !important;
right: 00% !important;
top: 0 !important;
    margin-top: 0;
    padding: 2px;
text-align: center !important;
background: #111 !important;
border: none !important;
}
.wrapper.py\:l  section:first-of-type + section:hover {
position: absolute !important;
/* display: flex !important; */
min-width: 79% !important;
max-width: 79% !important;
height: auto !important;
left: 0% !important;
    margin-top: 0;
    padding: 0.5rem;
/* white-space: nowrap !important; */
/* word-wrap: pre !important; */
overflow: hidden !important;
transition: all ease 0.7s !important;
background: #111 !important;
border: 1px solid red !important;
}
/* ALL H2 */
.wrapper.py\:l  section:first-of-type + section h2 {
/* position: absolute !important; */
min-width: 30% !important;
max-width: 30% !important;
    margin-top: 0;
background: tan !important;
border: 1px solid red !important;
}

/* (new4) INFOS */
.wrapper.py\:l  section:first-of-type + section h2:first-of-type ,
.wrapper.py\:l  section:first-of-type + section.settings > h2:first-of-type ~ p.updated ,
.wrapper.py\:l  section:first-of-type + section.settings > h2:first-of-type ~p {
/* position: absolute !important; */
/* display: inline-block !important; */
/* float: left !important; */
/* clear: both !important; */
min-width: 30% !important;
max-width: 30% !important;
    margin-top: 0;
padding: 10px 20px !important;
background: #222 !important;
border: 1px solid gray !important;
}
.wrapper.py\:l  section:first-of-type + section h2:first-of-type{
    margin-bottom: 10px !important;
}


.wrapper.py\:l  section:first-of-type + section.settings > h2:first-of-type ~ p.updated ,
.wrapper.py\:l  section:first-of-type + section.settings > h2:first-of-type ~p {
    margin-top: -7px !important;
}

/* (new4) DISPLAY NAME */
.wrapper.py\:l  section:first-of-type + section.settings > h2:first-of-type ~ p.updated + h2 + .md + form ,
.wrapper.py\:l  section:first-of-type + section.settings > h2:first-of-type ~ p.updated + h2 + .md ,
.wrapper.py\:l  section:first-of-type + section.settings > h2:first-of-type ~ p.updated + h2{
/* position: absolute !important; */
/* display: inline-block !important; */
float: right !important;
clear: both !important;
min-width: 33% !important;
max-width: 33% !important;
    margin: 0;
margin-right: 1% !important;
margin-top: -384px !important;
background: #222 !important;
border: 1px solid gray !important;
}
.wrapper.py\:l  section:first-of-type + section.settings > h2:first-of-type ~ p.updated + h2 + .md + form {
    height: 253px !important;
    margin-bottom: -38px !important;
margin-top: -348px !important;
}


/* (new4) BIOGRAPHIE */
.wrapper.py\:l  section:first-of-type + section.settings > h2:first-of-type ~p.updated + h2 + .md + form + h2.sub-title + .md + form ,
/* .wrapper.py\:l  section:first-of-type + section.settings > h2:first-of-type ~p.updated + h2 + .md + form + h2.sub-title + .md , */
.wrapper.py\:l  section:first-of-type + section.settings > h2:first-of-type ~p.updated + h2 + .md + form + h2.sub-title {
/* position: absolute !important; */
/* position: relative !important; */
/* display: inline-block !important; */
float: left !important;
clear: both !important;
min-width: 33% !important;
max-width: 33% !important;
    margin: 0;
margin-left: 31.9% !important;
    margin-top: -384px;
background: #222 !important;
border: 1px solid gray !important;
}
.wrapper.py\:l  section:first-of-type + section.settings > h2:first-of-type ~p.updated + h2 + .md + form + h2.sub-title + .md + form {
    margin-top: -348px;
}

.wrapper.py\:l  section:first-of-type + section.settings > h2:first-of-type ~p.updated + h2 + .md + form + h2.sub-title + .md + form textarea {
    max-width: 100%;
    min-height: 100px !important;
    min-width: 100%;
    padding: 0.5rem;
}

/* SOCIAL */
.wrapper.py\:l  section:first-of-type + section.settings > h2:first-of-type ~p.updated + h2 + .md + form + h2.sub-title + .md + form + h2.sub-title + p + form ,
.wrapper.py\:l  section:first-of-type + section.settings > h2:first-of-type ~p.updated + h2 + .md + form + h2.sub-title + .md + form + h2.sub-title + p ,
.wrapper.py\:l  section:first-of-type + section.settings > h2:first-of-type ~p.updated + h2 + .md + form + h2.sub-title + .md + form + h2.sub-title {
/* position: absolute !important; */
float: left !important;
clear: both !important;
min-width: 100% !important;
max-width: 100% !important;
    margin: 0;
background: #111 !important;
border: none !important;
}
.wrapper.py\:l  section:first-of-type + section.settings > h2:first-of-type ~p.updated + h2 + .md + form + h2.sub-title + .md + form + h2.sub-title {
/* position: absolute !important; */
float: left !important;
clear: both !important;
height: 30px !important;
min-width: 100% !important;
max-width: 100% !important;
    margin-top: 5px !important;
background: #111 !important;
border-top: 1px solid gray !important;
}
.wrapper.py\:l  section:first-of-type + section.settings > h2:first-of-type ~p.updated + h2 + .md + form + h2.sub-title + .md + form + h2.sub-title + p + form  {
/* position: absolute !important; */
float: left !important;
clear: both !important;
min-width: 100% !important;
max-width: 100% !important;
    margin-bottom: 10px !important;
background: #111 !important;
border: 1px solid red !important;
}
.wrapper.py\:l  section:first-of-type + section.settings > h2:first-of-type ~p.updated + h2 + .md + form + h2.sub-title + .md + form + h2.sub-title + p + form label{
/* position: absolute !important; */
float: left !important;
clear: none !important;
min-width: 10% !important;
max-width: 10% !important;
    margin: 0 -1px 0 0 !important;
    padding: 0.5rem;
border-radius: 5px 0 0 5px !important;
background: #333 !important;
border: 1px solid gray !important;
border-right: 1px solid red !important;
}
.wrapper.py\:l  section:first-of-type + section.settings > h2:first-of-type ~p.updated + h2 + .md + form + h2.sub-title + .md + form + h2.sub-title + p + form input{
/* position: absolute !important; */
float: left !important;
clear: none !important;
min-width: 20% !important;
max-width: 20% !important;
    margin: 0 5px 0 0 !important;
border-radius: 0 5px 5px 0 !important;
background: #222 !important;
border: 1px solid gray !important;
}


/* (new4) USER SETTINGS */
.wrapper.py\:l  section:first-of-type + section.settings > h2:first-of-type ~p.updated + h2 + .md + form + h2.sub-title + .md + form + h2.sub-title + p + form + h2+ p  + .form-wrapper ,
 .wrapper.py\:l  section:first-of-type + section.settings > h2:first-of-type ~p.updated + h2 + .md + form + h2.sub-title + .md + form + h2.sub-title + p + form + h2+ p ,
.wrapper.py\:l  section:first-of-type + section.settings > h2:first-of-type ~p.updated + h2 + .md + form + h2.sub-title + .md + form + h2.sub-title + p + form + h2 {
/* position: absolute !important; */
float: left !important;
clear: both !important;
min-width: 20% !important;
max-width: 20% !important;
    margin: 0;
background: #333 !important;
border: none !important;
/* border-top: 1px solid red !important; */
}
.wrapper.py\:l  section:first-of-type + section.settings > h2:first-of-type ~p.updated + h2 + .md + form + h2.sub-title + .md + form + h2.sub-title + p + form + h2 {
height: 28px !important;
    margin: 0;
background: #333 !important;
border-top: 1px solid red !important;
}
 .wrapper.py\:l  section:first-of-type + section.settings > h2:first-of-type ~p.updated + h2 + .md + form + h2.sub-title + .md + form + h2.sub-title + p + form + h2+ p {
float: right !important;
min-width: 80% !important;
max-width: 80% !important;
height: 28px !important;
line-height: 5px !important;
    margin-top: -28px !important;
border-top: 1px solid red !important;
}
 .wrapper.py\:l  section:first-of-type + section.settings > h2:first-of-type ~p.updated + h2 + .md + form + h2.sub-title + .md + form + h2.sub-title + p + form + h2+ p  + .form-wrapper {
float: left !important;
clear: both !important;
min-width: 100% !important;
max-width: 100% !important;
text-align: center !important;
background: #111 !important;
border: 1px solid red !important;
}
 .wrapper.py\:l  section:first-of-type + section.settings > h2:first-of-type ~p.updated + h2 + .md + form + h2.sub-title + .md + form + h2.sub-title + p + form + h2+ p  + .form-wrapper >label {
float: left !important;
clear: both !important;
min-width: 15% !important;
max-width: 15% !important;
margin-left: 35% !important;
text-align: center !important;
background: #222 !important;
border: 1px solid red !important;
}
 .wrapper.py\:l  section:first-of-type + section.settings > h2:first-of-type ~p.updated + h2 + .md + form + h2.sub-title + .md + form + h2.sub-title + p + form + h2+ p  + .form-wrapper > select {
/* float: right !important; */
/* clear: both !important; */
min-width: 15% !important;
max-width: 15% !important;
margin-top: 3px !important;
text-align: center !important;
/* background: tan!important; */
border: 1px solid red !important;
}

/* (new6) USERSTYLES LIST - ACCOUNT */
.styles.mt\:l {
    float: left !important;
    clear: none !important;
    min-width: 100% !important;
    max-width: 100% !important;
/*     margin-top: -242px; */
    padding: 5px 5px 5px !important;
border: 1px solid #333 !important;
}
.styles.mt\:l > h2  {
    left: 34%;
    position: absolute;
    top: 7vh;
/*     z-index: 500; */
}
.styles.mt\:l > h2.sub-title + .description  {
    left: 44%;
    position: absolute;
    top: 8vh;
/*     z-index: 500; */
}
.card.col.gap.animate {
    border-radius: 5px;
    border: 1px solid gray;
}
.card.animate.bd\:o {
    max-width: 32%;
    min-width: 32%;
    height: 90px;
    margin: 0 3px 5px 5px;
    padding: 0 !important;
    transition: transform 0.2s linear 0s;
border: 1px solid blue;
}
.card.animate.bd\:o  .card-body.f\:col {
    display: flex;
    padding: 0 3px !important;
}
.card.animate.bd\:o .card-footer {
    padding: 0 !important;
}



/* END URL PREF - ACCOUNT === */

}

@-moz-document url-prefix("https://userstyles.world/import") {

/* START - URL PREF - IMPORT ==== */
.wrapper.py\:l .ta\:c + section > form {
    height: auto;
    max-width: 901px;
    margin: 1rem auto;
    padding: 1rem;
border: 1px solid red;
/* background-color: green !important; */
}

.import br {
    display: none !important;
}
/* LABEL - ALL */

.wrapper.py\:l .ta\:c + section > form.import i.fg\:3 + input + .ta\:l  label ,
.wrapper.py\:l .ta\:c + section > form.import label {
    display: inline-block !important;
    float: none !important;
    margin-top: 0px !important;
    margin-bottom: 14px;
    min-width: 100% !important;
    max-width: 100% !important;
}
/* LABEL - PREVIEW  CATEG / 2 MIRRORs / */
.wrapper.py\:l .ta\:c + section > form.import i.fg\:3 + input + .ta\:l + .ta\:l label ,
.wrapper.py\:l .ta\:c + section > form.import i.fg\:3 + input + .ta\:l  label ,
.wrapper.py\:l .ta\:c + section > form.import label ~ label {
    display: inline-block !important;
    float: none !important;
    margin-top: -10px !important;
    margin-bottom: 4px !important;
    min-width: 100% !important;
    max-width: 100% !important;
/* background: yellow !important; */
}
.wrapper.py\:l .ta\:c + section > form.import i.fg\:3 {
    display: inline-block !important;
    float: none !important;
    margin-top: -10px !important;
    margin-bottom: 2px;
    min-width: 100% !important;
    max-width: 100% !important;
/* background: blue !important; */
}

.wrapper.py\:l .ta\:c + section > form.import i.fg\:3 + input {
position: relative !important;
    display: inline-block;
    float: none;
    margin-bottom: 2px;
    margin-top: 15px !important;
    max-width: 100%;
    min-width: 100%;
/* background: aqua; */
}

/* END URL PREF - IMPORT === */

}

/* START -  URL PREF - EXPLORE */
@-moz-document url-prefix("https://userstyles.world/explore") {

/* EXPLORE - CARD SIZE */
.card.col.gap.animate {
    flex-basis: calc(100% / 4 - 1rem);
    min-width: var(--card-min-width);
    margin: 0 0.1rem 0.4rem 0.7rem ;
    border-radius: 5px !important;
    transition: transform 0.2s linear 0s;
border: 1px solid gray !important;
}
.grid.flex.rwrap .card.col.gap.animate .no-screenshot.flex {
    right: 15% !important;
}

/* EXPLORE ORDER */

.wrapper.py\:l .ta\:c {
    display: inline-block;
    margin-top: -2rem;
    min-width: 100%;
    position: sticky;
    right: 42px;
    text-align: center;
    top: -5px;
    width: 100%;
    z-index: 50!important;
    background: #111 !important;
}
.wrapper.py\:l .ta\:c + section.mt\:l {
    position: sticky !important;
    display: inline-block !important;
    width: 100%;
    margin-top: -0.5rem;
    min-width: 100%;
    right: 42px;
    top: 75px !important;
    text-align: center;
    z-index: 500 !important;
    background: #222 !important;
}
/* (new9) EXPLORE - TOP ORDEr - FORM 
.form-wrapper.plain.advanced.flex .section.flex
===  */
.wrapper.py\:l .ta\:c + section > form  {
position: sticky !important;
    display: inline-block !important;
    min-width: 100%;
    margin-top: -2rem;
    top: 0px;
    margin: 0.3rem auto;
    padding: 0  !important;
    z-index: 5000000 !important;
border: 1px solid gray !important;
}
.wrapper.py\:l .ta\:c + section > form .section.flex{
display: inline-block !important;
    min-width: 18%;
    max-width: 18%;
padding: 0rem;
border: 1px solid red !important;
}
.form-wrapper.advanced.plain .sort {
    margin: 0 0 0.5rem 0rem;
}
.wrapper.py\:l .ta\:c + section > form > .btn.primary {
display: inline-block !important;
    margin-top: 25px;
margin-right: 42% !important;
margin-left: -34% !important;
    padding-bottom: 0;
    padding-top: 0;
}
form input, form textarea, form select, 
.form-wrapper input, .form-wrapper textarea, 
.form-wrapper select {
display: inline-block !important;
    min-width: 100%;
    max-width: 100%;
}
.wrapper.py\:l .ta\:c + section > form label {
display: inline-block !important;
    float: none !important;
    margin-top: 0px;
    min-width: 250px !important;
    max-width: 250px;
}
/* EXPLORE */
/* TOOLTIP RIGHT */
/* .card.animate:nth-of-type(4n +4) .card-footer small:last-of-type span:hover::before */ 
.card.animate .card-footer small:last-of-type span:hover::before{
    margin-left: -195px;
border: 1px solid red !important;
}
/* TOOLTIP LEFT */
/* .card.animate:nth-of-type(4n +1) .card-footer small:first-of-type time:hover::before  */
.card.animate .card-footer small:first-of-type time:hover::before {
    margin-left: -35px !important;
border: 1px solid green !important;
}

/* END -  URL PREF - EXPLORE === */
}

/* START -  URL PREF - ACCOUNT */
@-moz-document url-prefix("https://userstyles.world/account") {

/* ACCOUNT - CARD SIZE */
.card.col.gap.animate {
    flex-basis: calc(100% / 3 - 0.5rem);
    min-width: var(--card-min-width);
    margin: 0 0.2rem 0.3rem;
    border-radius: 5px !important;
    transition: transform 0.2s linear 0s;
border: 1px solid gray !important;
}

/* END -  URL PREF - ACCOUNT === */
}

/* START -  URL PREF - SEARCH */
@-moz-document url-prefix("https://userstyles.world/search?q=") {

/* (new10)EXPLORE - CARD SIZE */
.card.col.gap.animate {
    flex-basis: calc(100% / 4 - 1rem);
    min-width: var(--card-min-width);
    margin: 0 0.1rem 0.4rem 0.7rem ;
    border-radius: 5px !important;
    transition: transform 0.2s linear 0s;
border: 1px solid gray !important;
}
.wrapper.py\:l .ta\:c + section > form > input {
    float: left;
    min-height: 25px !important;
    max-height: 25px !important;
    margin-bottom: 0;
    margin-top: -12px;
    padding-bottom: 0;
    padding-top: 0;
    width: 75%;
}
.wrapper.py\:l .ta\:c + section > form > .btn.primary {
    float: right;
    min-height: 25px !important;
    max-height: 25px !important;
    margin-top: -12px;
    padding-bottom: 0;
    padding-top: 0;
}

/* (new9) SEARCH ORDER - STICKY */

.wrapper.py\:l .ta\:c {
    display: inline-block;
    margin-top: -2rem;
    min-width: 100%;
    position: sticky;
    right: 42px;
    text-align: center;
    top: -5px;
    width: 100%;
    z-index: 50!important;
    background: #111 !important;
}
.wrapper.py\:l .ta\:c p ,
.wrapper.py\:l .ta\:c h1 {
    float: left !important;
    width: 50%;
padding: 0 20px !important;
}
.wrapper.py\:l .ta\:c h1 {
    text-align: right;
}
.wrapper.py\:l .ta\:c p {
    height: 36px !important;
    line-height: 36px !important;
    text-align: left;
}

/* (new9) SEARCH - FORMS */


/* SEARCH - TOP FORMS CONTAINER - ALL 
.form-wrapper.advanced .section
==== */ 
.wrapper.py\:l .ta\:c + section > form {
/*     position: sticky !important; */
    display: inline-block !important;
    vertical-align: top !important;
    min-width: 100%;
    margin-top: -2rem;
    top: 0px;
    margin: -0.5rem auto 0.5rem auto;
    padding: 0.3rem;
/*     z-index: 5000000 !important; */
border: 1px solid gray !important;
}

.wrapper.py\:l .ta\:c + section > form .section +  .section input {
    display: flex;
    margin: 0.5rem 0 1.5rem;
    width: 100%;
}
/* KEYWORD  / SORT FORMs v */
.wrapper.py\:l .ta\:c + section > form .section {
display: inline-block !important;
    min-width: 20%;
    max-width: 20%;
height: 8vh !important;
border: 1px solid tomato !important;
}
/* KEYWORD  LABEL */
.wrapper.py\:l .ta\:c + section > form label {
display: inline-block !important;
    float: none !important;
    margin-top: 0px !important;
    min-width: 250px !important;
    max-width: 250px;
}
.wrapper.py\:l .ta\:c + section > form .section > input {
    display: flex;
    margin: 0px 0px 0px 2px !important;
    width: 99% !important;
}

/* SORT FORM */
.wrapper.py\:l .ta\:c + section > form .section +  .section {
    position: relative !important;
display: inline-block !important;
    min-width: 20%;
    max-width: 20%;
top: -0.2vh !important;
border: 1px solid red !important;
}

.form-wrapper.advanced .sort {
    position: relative !important;
/* display: inline-block !important; */
    margin: 0vh 0px 0px 2px !important;
    width: 99% !important;
}
.form-wrapper.advanced .sort #sort {
    width: 99%;
    margin-bottom: 0 !important;
    margin-top: 0 !important;

}


/* SEARCH BUTTON */
.wrapper.py\:l .ta\:c + section > form > .btn.primary {
display: inline-block !important;
    margin-top: 30px;
margin-right: 22% !important;
margin-left: -40% !important;
    padding-bottom: 0;
    padding-top: 0;
}

/* END - URL PREF - SEARCH === */
}


/* (new10) START -  URL PREF - MOD LOG */
@-moz-document url-prefix("https://userstyles.world/modlog") {

.wrapper section > h1  {
display: inline-block !important;
    width: 23% !important;
    text-align: right;
}
/* NO DARK */
html[data-color-scheme="light"] .wrapper section > h1  {
color: white !important;
}

.wrapper section > h1 + p  {
display: inline-block !important;
    width: 41% !important;
    text-align: center;
}

.td\:d {
    font-size: 1.2em;
    margin: 1em 0 0.2em !important;
    text-decoration: underline;
}

/* END -  URL PREF - ACCOUNT === */
}

/* (new10) START -  URL PREF - REVIEW EDIT */
@-moz-document url-prefix("https://userstyles.world/styles/review/") {

section.limit .form-wrapper  label {
    display: inline-block !important;
    float: none !important;
    min-width: 100% !important;
    max-width: 100% !important;
    margin-top: 0px !important;
    margin-bottom: 20px !important;

}
.wrapper.py\:l .ta\:c + section > form > input {
    display: inline-block !important;
    float: none !important;
    margin-bottom: 0;
    margin-top: -12px;
    padding-bottom: 0;
    padding-top: 0;
    width: 75%;
}
/* END -  URL PREF - REVIEW EDIT  === */
}
/* (new12) START -  URL PREF - LOGIN PAGE */
@-moz-document url-prefix("https://userstyles.world/login") {

.wrapper.py\:l .ta\:c + section>form label {
    display: inline-block !important;
    float: none !important;
    min-width: 100% !important;
    max-width: 100% !important;
    margin-top: 0px;
    margin-bottom: 20px;
/* border: 1px solid green; */
}
.wrapper.py\:l .ta\:c + section>form>input {
    width: 100% !important;
    margin-top: -12px !important;

}

/* END - URL PREF - LOGIN PAGE  === */
}