/* GRID */
html{box-sizing:border-box}*,:after,:before{box-sizing:inherit}body{margin:0;padding:0;-webkit-font-smoothing: antialiased;}
.container{margin-left:auto;margin-right:auto;padding-left:15px;padding-right:15px}@media (min-width:768px){.container{width:750px}}@media (min-width:992px){.container{width:970px}}@media (min-width:1200px){.container{width:1170px}}.row{display:grid;grid-template-columns:repeat(12,1fr);grid-gap:20px}.col-xs-12{grid-column:span 12}.col-xs-11{grid-column:span 11}.col-xs-10{grid-column:span 10}.col-xs-9{grid-column:span 9}.col-xs-8{grid-column:span 8}.col-xs-7{grid-column:span 7}.col-xs-6{grid-column:span 6}.col-xs-5{grid-column:span 5}.col-xs-4{grid-column:span 4}.col-xs-3{grid-column:span 3}.col-xs-2{grid-column:span 2}.col-xs-1{grid-column:span 1}@media (min-width:768px){.col-sm-12{grid-column:span 12}.col-sm-11{grid-column:span 11}.col-sm-10{grid-column:span 10}.col-sm-9{grid-column:span 9}.col-sm-8{grid-column:span 8}.col-sm-7{grid-column:span 7}.col-sm-6{grid-column:span 6}.col-sm-5{grid-column:span 5}.col-sm-4{grid-column:span 4}.col-sm-3{grid-column:span 3}.col-sm-2{grid-column:span 2}.col-sm-1{grid-column:span 1}}@media (min-width:992px){.col-md-12{grid-column:span 12}.col-md-11{grid-column:span 11}.col-md-10{grid-column:span 10}.col-md-9{grid-column:span 9}.col-md-8{grid-column:span 8}.col-md-7{grid-column:span 7}.col-md-6{grid-column:span 6}.col-md-5{grid-column:span 5}.col-md-4{grid-column:span 4}.col-md-3{grid-column:span 3}.col-md-2{grid-column:span 2}.col-md-1{grid-column:span 1}}@media (min-width:1200px){.col-lg-12{grid-column:span 12}.col-lg-11{grid-column:span 11}.col-lg-10{grid-column:span 10}.col-lg-9{grid-column:span 9}.col-lg-8{grid-column:span 8}.col-lg-7{grid-column:span 7}.col-lg-6{grid-column:span 6}.col-lg-5{grid-column:span 5}.col-lg-4{grid-column:span 4}.col-lg-3{grid-column:span 3}.col-lg-2{grid-column:span 2}.col-lg-1{grid-column:span 1}}
/*SPACES*/
.mt-0{margin-top:0px;}.mt-1{margin-top:5px;}.mt-2{margin-top:10px;}.mt-3{margin-top:15px;}.mt-4{margin-top:30px;}.mt-5{margin-top:60px;}.mb-0{margin-bottom:0px;}.mb-1{margin-bottom:5px;}.mb-2{margin-bottom:10px;}.mb-3{margin-bottom:15px;}.mb-4{margin-bottom:30px;}.mb-5{margin-bottom:60px;}.ml-0{margin-left:0px;}.ml-1{margin-left:5px;}.ml-2{margin-left:10px;}.ml-3{margin-left:15px;}.ml-4{margin-left:30px;}.ml-5{margin-left:60px;}.mr-0{margin-right:0px;}.mr-1{margin-right:5px;}.mr-2{margin-right:10px;}.mr-3{margin-right:15px;}.mr-4{margin-right:30px;}.mr-5{margin-right:60px;}
/*PADDING*/
.pt-0{padding-top:0px;}.pt-1{padding-top:5px;}.pt-2{padding-top:10px;}.pt-3{padding-top:15px;}.pt-4{padding-top:30px;}.pt-5{padding-top:60px;}.pb-0{padding-bottom:0px;}.pb-1{padding-bottom:5px;}.pb-2{padding-bottom:10px;}.pb-3{padding-bottom:15px;}.pb-4{padding-bottom:30px;}.pb-5{padding-bottom:60px;}.pl-0{padding-left:0px;}.pl-1{padding-left:5px;}.pl-2{padding-left:10px;}.pl-3{padding-left:15px;}.pl-4{padding-left:30px;}.pl-5{padding-left:60px;}.pr-0{padding-right:0px;}.pr-1{padding-right:5px;}.pr-2{padding-right:10px;}.pr-3{padding-right:15px;}.pr-4{padding-right:30px;}.pr-5{padding-right:60px;}
/*TEXT ALIGN*/
.text-left{text-align: left;}.text-right{text-align: right;}.text-center{text-align: center;}
/*WIDTH*/
.w-100{width:100%;}
/*LOADER*/
.lds-ellipsis{position:absolute; display:inline-block;}.lds-ellipsis div{position:absolute;top:0px;width:13px;height:13px;border-radius:50%;background:#3797f1;animation-timing-function:cubic-bezier(0,1,1,0)}.lds-ellipsis div:nth-child(1){left:8px;animation:lds-ellipsis1 .6s infinite}.lds-ellipsis div:nth-child(2){left:8px;animation:lds-ellipsis2 .6s infinite}.lds-ellipsis div:nth-child(3){left:32px;animation:lds-ellipsis2 .6s infinite}.lds-ellipsis div:nth-child(4){left:56px;animation:lds-ellipsis3 .6s infinite}@keyframes lds-ellipsis1{0%{transform:scale(0)}100%{transform:scale(1)}}@keyframes lds-ellipsis3{0%{transform:scale(1)}100%{transform:scale(0)}}@keyframes lds-ellipsis2{0%{transform:translate(0,0)}100%{transform:translate(24px,0)}}
/*TABLE*/
table{width:100%;border-collapse:collapse;color:#fff;background:#222222}table tr{border:1px solid #303030;}tr:nth-of-type(odd){background:#2b2b2b;}th{background:#2b2b2b;color:#3797f1;font-weight:bold;}td,th{max-width:40ch;height:28px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;padding:7px;text-align:left;font-size:13px;}
/**SWITCHES FOR CHECKBOX */
.onoffswitch {position: relative;width: 50px; -webkit-user-select: none;-moz-user-select: none; -ms-user-select: none;display: table-cell;}.onoffswitch-checkbox {position: absolute;opacity: 0;pointer-events: none;}
.onoffswitchLabel {display: table-cell;}.onoffswitch-label {display: block;overflow: hidden;cursor: pointer;height: 21px;padding: 0;line-height: 21px;border: 2px solid #8a8a8a;border-radius: 21px;background-color: #8a8a8a;transition: background-color 0.3s ease-in;}.onoffswitch-label:before {content: "";display: block;width: 21px;margin: 0px;height: 21px;background: #222222;position: absolute;top: 0;bottom: 0;right: 27px;border: 2px solid #8a8a8a;border-radius: 21px;transition: all 0.3s ease-in 0s;}.onoffswitch-checkbox:checked+.onoffswitch-label {background-color: #3797f1;}.onoffswitch-checkbox:checked+.onoffswitch-label,.onoffswitch-checkbox:checked+.onoffswitch-label:before {border-color: #3797f1;}.onoffswitch-checkbox:checked+.onoffswitch-label:before {right: 0px;background-color: #222222;}
/*HIDE AND SHOW*/
@media only screen and (max-width: 768px) {
.mobile-hide {display:none;}
}
@media only screen and (min-width: 768px) {
.desktop-hide {display:none;}
}
/*ALIGNMENTS*/
.alignItemsCenter {align-items:center;}
.breakWord {word-break:break-all;}
.textCenter {text-align:center;}
.textLeft {text-align:left;}
.textRight {text-align:right;}
/*SCROLLBAR*/
::-webkit-scrollbar {width: 6px; height:6px;}
::-webkit-scrollbar-track {background:#333;}
::-webkit-scrollbar-thumb {background:#666;}
::-webkit-scrollbar-thumb:hover{background:#444;}
/*EVENTS*/
.noClick {
pointer-events: none;
}
/* Controles do painel visíveis apenas para equipe Interago (userType 2): barra + tooltip nativo (title) */
.adminUserEffect {
border-left: 3px solid #ff6a6a !important;
padding-left: 14px !important;
box-shadow: none !important;
}
/* Menu lateral: alinhamento do ícone após a barra admin (padding base 55px) */
.navigationMenuItem.adminUserEffect {
padding-left: 54px !important;
}
@import url('https://fonts.googleapis.com/css2?family=Raleway:wght@200;300;400;500;600;700;900&display=swap');
/*BLOCKS STYLING */
@import "https://www.interago.com.br/App/Templates/default/css/blocks.css";
body {
background-color: #1f1f1f;
background-image: radial-gradient(circle at top, #2a2b2f 0%, #1f1f1f 62%, #1b1b1b 100%);
background-repeat: no-repeat;
background-size: cover;
background-attachment: fixed;
transition: 0.3s ease;
color:white;
font-family: 'Raleway', sans-serif;
font-size:15px;
overflow-x:hidden;
}
button,
input,
select,
textarea,
option {
font-family: system-ui, -apple-system, "Segoe UI", Roboto, Arial, sans-serif;
}
button {
transition:
filter 0.28s ease-out,
background-color 0.28s ease-out,
border-color 0.28s ease-out,
opacity 0.28s ease-out;
}
button:not(.button):not(.listOption):not(.deleteButton):hover:not(:disabled) {
filter: brightness(1.03);
}
button:not(.button):not(.listOption):not(.deleteButton):active:not(:disabled) {
filter: brightness(0.99);
transition-duration: 0.15s;
}
.numericSans {
font-family: system-ui, -apple-system, "Segoe UI", Roboto, Arial, sans-serif !important;
font-variant-numeric: tabular-nums;
}
main {
overflow-x:hidden;
}
label {
color:#969696;
font-size:14px;
}
h2 {
font-family: 'Raleway', sans-serif;
}
h3 {
color:#d0d0d0;
}
hr {
border: none;
height: 1px;
background-color: #3a3b3c;
margin-left: 20px;
margin-right: 20px;
}
a {
color:#3797f1;
font-weight: 500;
text-decoration:none;
transition:0.3s ease;
display:inline-block;
}
a:hover {
color:#0098da;
}
strong,
b {
font-weight: 700;
}
a[href^="#create"] {
font-weight:800;
}
textarea {
font-family: system-ui, -apple-system, "Segoe UI", Roboto, Arial, sans-serif;
}
.form-select-sm{
width: 100%;
padding: 9px 15px;
font-size: 16px;
color: #aeaeae;
cursor: pointer;
transition: 0.3s ease;
background-color: #333435;
border-radius: 10px;
border: 3px solid #484848;
line-height: 1.5;
min-height: calc(1.5em + .75rem + 2px);
margin-top: 7px;
}
.form-control {
display: block;
width: 100%;
min-height: calc(1.5em + .75rem + 2px);
padding: 0.4rem .5rem;
font-size: 16px;
font-weight: 400;
line-height: 1.5;
color: #ececec;
background-color: #333435;
background-clip: padding-box;
-webkit-appearance: none;
-moz-appearance: none;
appearance: none;
border-radius: 10px;
transition: 0.3s ease;
border: 3px solid #484848;
margin-top:2px;
}
.form-control:disabled {
background-color:#202021;
}
small {
color:#b3b3b3;
}
.form-control:focus {
border:3px solid #3797f1;
background-color:#242222;
}
.disabledColor {
filter:grayscale(1);
transition:0.3s ease;
}
.removeGap {
grid-gap:0px;
}
.blackCard{
background-color: #2b2b2b;
padding: 20px;
border-radius: 10px;
box-shadow:none;
border:1px solid #1e1d1d;
}
.blackCardHover {
transition:0.3s ease;
cursor:pointer;
}
.blackCardHover:hover {
border:1px solid #3797f1;
box-shadow:none;
}
/* Tela Atualizar (#refresh): ações centralizadas no mobile, à direita a partir do breakpoint col-md */
.refreshRowActions {
display: flex;
flex-wrap: wrap;
gap: 8px;
justify-content: center;
align-items: center;
text-align: center;
}
@media (min-width: 992px) {
.refreshRowActions {
justify-content: flex-end;
text-align: right;
}
}
/* #refresh.main: colunas reservadas vazias não ocupam faixa na grade (.row tem grid-gap: 20px) */
#refreshMain > .blackCard > .row > .col-xs-12:empty {
display: none;
}
/* Vários cartões dentro de #outdatedPages (ex.: Páginas + Htaccess): um único grid-cell, então espaçamento explícito */
#refreshMain #outdatedPages > .row.blackCard + .row.blackCard {
margin-top: 10px;
}
.button {
border-radius: 30px;
padding: 8px 20px;
font-weight: 600;
font-size: 14px;
background-image: linear-gradient(to right, #1E70E3, #3897F1);
color: white;
text-align: center;
cursor: pointer;
border: none;
box-shadow: none;
margin: 7px 1px 1px 1px;
position:relative;
overflow:hidden;
display:inline-grid;
align-content: center;
filter: brightness(1);
transition: filter 0.28s ease-out, color 0.28s ease-out;
}
.button:after {
content: "";
background: #90cfee;
display: block;
position: absolute;
padding-top: 300%;
padding-left: 350%;
margin-left: -30px!important;
border-radius:30px;
margin-top: -120%;
opacity: 0;
transition: all 0.8s
}
.button:active:after {
padding: 0;
margin: 0;
opacity: 1;
transition: 0s;
}
.button:hover:not(:disabled) {
filter: brightness(1.06);
border: none;
color: white;
}
.button:active:not(:disabled) {
filter: brightness(0.97);
transition-duration: 0.15s;
}
.button:disabled {
filter: none;
background-image: none;
background-color: #272727;
border: #666 1px solid;
color: #666;
}
.buttonOutline {
background-image: none !important;
background: transparent !important;
border: 1px solid #3797f1 !important;
color: #3797f1 !important;
}
.buttonOutline:hover:not(:disabled) {
filter: none;
background-color: rgba(55, 151, 241, 0.12) !important;
color: #3797f1 !important;
}
.sponsorEco p{
color:#999;
font-size:11px;
}
.sponsorEco img {
width:150px;
}
.loginLinks {
font-size:14px;
line-height:22px;
}
#passwordDescription,
#handlerMessagePass .pwdStrength {
font-size:13px;
}
.pwdStrength {
font-weight: 600;
}
.pwdStrength--0 { color: #ff8a80; }
.pwdStrength--25 { color: #f88b8b; }
.pwdStrength--50 { color: #ffeb3b; }
.pwdStrength--75 { color: #00bcd4; }
.pwdStrength--100 { color: #bbff6c; }
#globalAlert {
position:fixed;
width:70%;
z-index:100;
}
#globalAlert .close {
cursor: pointer;
font-weight: bold;
font-size: 11px;
align-items: center;
display: flex;
}
#globalAlert p {
width:95%;
}
@media (max-width: 768px) {
#globalAlert {
width:100%;
}
}
.globalAlertMessage {
padding: 10px 10px;
margin: 2px 5%;
display: inline-block;
width: 90%;
font-size: 14px;
font-weight: 600;
border-radius: 10px;
word-wrap:break-word;
display:inline-flex;
}
.globalAlertMedia {
width:48px;
border-radius: 15px;
width:48px;
border-radius:15px;
box-shadow: 0 0 6px 1px rgba(55,151,241,0.9);
animation: globalAlertGlow 5s ease-in-out infinite;
will-change: box-shadow;
}
@keyframes globalAlertGlow {
0% {
box-shadow: 0 0 6px 1px rgba(55,151,241,0.9); /* blue */
}
50% {
box-shadow: 0 0 22px 6px rgba(130,71,200,0.9); /* purple */
}
100% {
box-shadow: 0 0 6px 1px rgba(55,151,241,0.9);
}
}
@keyframes conquerBorderPulse {
0% {
border-color: #2d8bff;
box-shadow: 0 0 0 1px rgba(120, 190, 255, 0.35), 0 0 10px rgba(31, 113, 227, 0.35);
}
50% {
border-color: #ffffff;
box-shadow: 0 0 0 1px rgba(255, 255, 255, 0.65), 0 0 16px rgba(155, 207, 255, 0.45);
}
100% {
border-color: #2d8bff;
box-shadow: 0 0 0 1px rgba(120, 190, 255, 0.35), 0 0 10px rgba(31, 113, 227, 0.35);
}
}
@keyframes conquerShimmer {
0% {
background-position: 220% 0;
}
100% {
background-position: -220% 0;
}
}
#globalAlert p {
font-size: 13px;
margin: 0 10px;
line-height:18px;
}
#globalAlert .error {
background-image: url('../img/error.svg');
background-size: 24px;
background-repeat: no-repeat;
background-position: 8px center;
padding-left:40px;
border: 1px solid rgba(248, 81, 73, 0.78);
padding-left: 40px;
color: white;
background-color: #771a1af7;
backdrop-filter: blur(2px);
font-size: 14px;
}
#globalAlert .error .close {
color: #be5f58;
}
#globalAlert .error .close:hover {
color:#a4453e;
}
#globalAlert .ok .close {
color:#40c41b;
}
#globalAlert .ok .close:hover {
color:#298610;
}
#globalAlert .alert .close {
color:#ffca2c;
}
#globalAlert .alert .close:hover {
color:#c79d21;
}
#globalAlert .info .close {
color:#00b0f0;
}
#globalAlert .info .close:hover {
color:#0098db;
}
#globalAlert .conquer .close {
color:#00b0f0;
}
#globalAlert .conquer .close:hover {
color:#0098db;
}
#globalAlert .conquer {
padding-left: 40px;
border: 1px solid rgb(3, 85, 168);
padding-left: 40px;
color: white;
background-color: #051d35;
background-image: linear-gradient(115deg, rgba(255,255,255,0.06) 20%, rgba(255,255,255,0.32) 40%, rgba(255,255,255,0.06) 58%);
background-size: 220% 100%;
font-size: 14px;
display:flex;
align-items:center;
animation: conquerBorderPulse 2.2s ease-in-out infinite, conquerShimmer 3.8s linear infinite;
}
#globalAlert .conquer p {
align-items:center;
display:flex;
}
#globalAlert .info {
padding-left: 40px;
border: 1px solid rgb(3, 85, 168);
padding-left: 40px;
color: white;
background-color: #09345ff2;
backdrop-filter: blur(2px);
font-size: 14px;
}
#globalAlert .alert {
padding-left:40px;
border: 1px solid rgba(248, 201, 73, 0.78);
padding-left: 40px;
color: white;
background-color: #656307e8;
backdrop-filter: blur(2px);
font-size: 14px;
}
#globalAlert .ok {
background-image: url('../img/ok.svg');
background-size: 24px;
background-repeat: no-repeat;
background-position: 8px center;
padding-left: 40px;
border: 1px solid #6cbb3f;
color: white;
background-color: #27620ddb;
backdrop-filter: blur(2px);
}
.itemResultSql{
display:flex;
}
.itemResultSql div, .itemResultSql h4{
margin: 10px 0px 10px 10px;
}
#iMain {
margin-left:228px;
margin-right:30px;
}
#iHeader {
width: 100%;
font-size: 13px;
text-align: left;
display: inline-block;
overflow-x: auto;
height: auto;
white-space: nowrap;
scrollbar-width: none;
margin-left: 228px;
margin-top: 5px;
height:30px;
}
#iHeader:hover {
scrollbar-width: thin;
}
@media only screen and (min-width: 768px) {
input[type="number"]::-webkit-inner-spin-button,
input[type="number"]::-webkit-outer-spin-button {
-webkit-appearance: none;
margin: 0;
}
input[type="number"] {
-moz-appearance: textfield;
}
}
input[type="checkbox"]{
cursor:pointer;
transform:scale(1.2);
}
.listItemHover {
transition:0.3s ease;
}
.listItemHover:hover {
background-color:#252525;
}
.switchToggle {
float: left;
background: #242729;
border:1px solid #242729;
}
.switchToggle input {
position: absolute;
opacity: 0;
}
.switchToggle input + label {
padding: 7px;
float:left;
color: #fff;
cursor: pointer;
border: 1px solid #242729;
}
.switchToggle input:checked + label {
color:#10afef;
border:1px solid #10afef;
}
.newMailSend{
height: 80px;
margin: 30px auto;
width: 100px;
background-image: url('../img/general/mail-icon.svg');
background-size: contain;
background-position: center;
background-repeat: no-repeat;
}
.checkEmail{
height: 80px;
margin: 30px auto;
width: 100px;
background-image: url('../img/general/check.svg');
background-size: contain;
background-position: center;
background-repeat: no-repeat;
}
.optActiveAtivities{
background-color: #3a3b3c!important;
}
/*
#profileEdit{
margin: 14px 0px 0px auto;
width: 80%;
height: 80%;
background-image: url('../img/general/profile-edit.svg');
background-size: contain;
background-position: center;
background-repeat: no-repeat;
}
*/
#profileResume{
margin: 14px 0px 0px auto;
width: 80%;
height: 80%;
background-image: url('../img/general/profile-resume.svg');
background-size: contain;
background-position: center;
background-repeat: no-repeat;
}
#profileProducts{
margin: 14px 0px 0px auto;
width: 80%;
height: 80%;
background-image: url('../img/general/profile-list.svg');
background-size: contain;
background-position: center;
background-repeat: no-repeat;
}
#profileBilling{
margin: 14px 0px 0px auto;
width: 80%;
height: 80%;
background-image: url('../img/general/profile-bill.svg');
background-size: contain;
background-position: center;
background-repeat: no-repeat;
}
#profileActivity{
margin: 14px 0px 0px auto;
width: 80%;
height: 80%;
background-image: url('../img/general/activities.svg');
background-size: contain;
background-position: center;
background-repeat: no-repeat;
}
#profileSettings{
margin: 14px 0px 0px auto;
width: 80%;
height: 80%;
background-image: url('../img/general/profile-settings.svg');
background-size: contain;
background-position: center;
background-repeat: no-repeat;
}
#profileMailConfirm {
width: 100%;
height: 64px;
background-image: url('../img/menu/mail.svg');
background-size: contain;
background-position: center;
background-repeat: no-repeat;
}
.profileShell .iTitle#profileTitle {
background-image: url('../img/menu/profile.svg');
}
.profilePageLead {
margin: 4px 0 0;
font-size: 13px;
color: rgba(255, 255, 255, 0.55);
line-height: 1.45;
}
.profileOptionCard {
height: 100%;
display: flex;
flex-direction: column;
align-items: center;
text-align: center;
padding: 22px 16px !important;
transition: border-color 0.2s ease;
background-color: #313131 !important;
border: 1px solid #3a3a3a !important;
}
.profileOptionCard:hover {
border-color: rgba(55, 151, 241, 0.45) !important;
}
.profileOptionCardIcon {
width: 64px;
height: 64px;
margin: 0 auto 14px;
display: flex;
align-items: center;
justify-content: center;
flex-shrink: 0;
}
.profileOptionCardIcon > div,
.profileOptionCardIcon > img {
width: 64px;
height: 64px;
}
.profileOptionCardIcon > img {
border-radius: 50%;
object-fit: cover;
}
.profileOptionCardIcon #profileActivity,
.profileOptionCardIcon #menuDisconnect,
.profileOptionCardIcon #profileMailConfirm {
margin: 0;
width: 100%;
height: 64px;
}
.profileOptionCardTitle {
display: block;
margin: 0 0 6px;
font-size: 15px;
font-weight: 600;
color: #f3f4f6;
line-height: 1.35;
}
.profileOptionCard:not(:has(.profileOptionCardDesc)) .profileOptionCardTitle {
margin-bottom: 14px;
}
.profileOptionCardDesc {
margin: 0 0 14px;
font-size: 12px;
line-height: 1.45;
color: rgba(255, 255, 255, 0.55);
max-width: 240px;
}
.profileConfirmModalCopy {
font-size: 14px;
line-height: 1.5;
max-width: 360px;
margin: 0 auto;
color: rgba(255, 255, 255, 0.72);
}
#newWebProject {
width: 100%;
height: 100%;
background-image: url('../img/general/newSite.svg');
background-size: contain;
background-position: center;
background-repeat: no-repeat;
}
#listWebProject {
width: 100%;
height: 100%;
background-image: url('../img/general/listSite.svg');
background-size: contain;
background-position: center;
background-repeat: no-repeat;
}
#statsWebProject {
width: 100%;
height: 100%;
background-image: url('../img/general/resumeSite.svg');
background-size: contain;
background-position: center;
background-repeat: no-repeat;
}
#newWebsiteConcept {
width: 100%;
height: 300px;
/*background-image: url('../img/general/newWebsiteConcept.webp');*/
background-image: url('../img/general/newpage.svg');
background-size: contain;
background-position: center;
background-repeat: no-repeat;
}
#newPageConcept {
width: 100%;
height: 300px;
background-image: url('../img/page/landing-page.svg');
background-size: 80%;
background-position: center center;
background-repeat: no-repeat;
}
.backLink {
background-image: url('../img/general/back.svg');
background-size: contain;
background-position: center;
background-repeat: no-repeat;
height:32px;
width:32px;
}
.trashItemSql {
background-image: url('../img/general/trash.svg');
background-size: 20px;
background-position: center;
background-repeat: no-repeat;
cursor: pointer;
display: inline-block;
height:20px;
width:20px;
margin-bottom: -6px;
}
.copyItem {
background-image: url('../img/general/copy.svg');
background-size: 20px;
background-position: center;
background-repeat: no-repeat;
cursor: pointer;
display: inline-block;
height:20px;
width:20px;
margin-bottom: -6px;
}
.pointer {
cursor:pointer;
}
.pointerLess {
pointer-events:none;
}
.newPageIcon {
width: 100%;
background-image: url('../img/page/new.svg');
background-size: contain;
background-position: center center;
background-repeat: no-repeat;
}
.buildPageIcon {
width: 100%;
background-image: url('../img/page/build.svg');
background-size: contain;
background-position: center center;
background-repeat: no-repeat;
}
.publishPageIcon {
width: 100%;
background-image: url('../img/page/publish.svg');
background-size: contain;
background-position: center center;
background-repeat: no-repeat;
}
.newPageContent {
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
}
.newPageContent h3{
text-overflow: ellipsis;
overflow: hidden;
font-size:13px;
line-height:16px;
font-weight:600;
}
.newPageContent h4 {
text-overflow: ellipsis;
overflow: hidden;
margin-left:0px;
font-size:14px;
color:#999;
line-height:16px;
margin-top:1px;
}
.newPageContent p {
text-overflow: ellipsis;
overflow: hidden;
font-size:12px;
line-height:16px;
margin-top:2px;
}
.homePage {
background-color:#162b43 !important;
}
.managePage {
padding:10px 0 !important;
transition:0.3s ease;
}
.managePage:hover {
background-color:#373737;
}
.panelBackRow {
margin: 0 0 14px 0;
}
.iExtPanel > .panelBackRow {
margin: 0 0 12px 0;
}
.profileShell > .panelBackRow {
margin: 0 0 12px 0;
}
.managePageBackRow {
margin-top: 0;
margin-bottom: 12px;
}
.managePageShell > .panelBackRow,
#managePageMain > .panelBackRow.managePageBackRow {
margin-top: 0;
margin-bottom: 12px;
}
.managePageHeader .editPage {
opacity: 0.92;
filter: brightness(0) invert(0.88);
}
html[data-panel-theme="light"] .managePageHeader .editPage {
filter: brightness(0) saturate(100%) invert(36%) sepia(86%) saturate(1450%) hue-rotate(186deg) brightness(96%) contrast(95%);
opacity: 1;
}
.editPage {
height:24px;
width:24px;
background-image: url('../img/general/edit.svg');
background-size: contain;
background-position: center center;
background-repeat: no-repeat;
float:left;
display:block;
}
#deletePageButton {
float: right;
font-size: 12px;
padding: 5px 20px;
border: #480a0a 1px solid;
color: white;
background-color: #480a0a;
}
.managePageTitle {
color:#dedede;
}
.managePageUrl {
font-weight:400;
font-size:14px;
color:#999;
display:block;
line-height:20px;
}
.managePageFile {
font-weight:400;
font-size:14px;
color:#c0bebe;
display:block;
line-height:20px;
}
.managePageComment {
font-weight:400;
font-size:13px;
color:#999;
font-style:italic;
display:block;
line-height:20px;
}
.pageCodeButtons {
position:fixed;
z-index:19;
bottom:10px;
right:10px;
}
.iRefreshHtaccessActions {
display: flex;
flex-wrap: wrap;
gap: 10px;
margin-top: 16px;
padding-top: 16px;
border-top: 1px solid rgba(255, 255, 255, 0.08);
position: static;
z-index: auto;
width: 100%;
}
#modalContent_newHtaccess #monacoEditorContainer {
width: 100%;
min-height: 280px;
}
#modalContent_newHtaccess #monacoEditorSize {
width: 100%;
}
.editBlock, .editInstall {
height:24px;
width:24px;
background-image: url('../img/general/edit.svg');
background-size: contain;
background-position: center center;
background-repeat: no-repeat;
display: inline-block;
}
#draftQuery {
cursor:pointer;
display: flex;
align-items: flex-end;
}
.draftIcon, .buildIcon, .publishIcon {
height:14px;
width:14px;
margin-right:5px;
background-size: contain;
background-position: center center;
background-repeat: no-repeat;
float:left;
display:block;
}
.draftIcon {
background-image: url('../img/page/save.svg');
}
.buildIcon {
background-image: url('../img/page/build.svg');
}
.publishIcon {
background-image: url('../img/page/publish.svg');
}
#draftSituation, #buildSituation, #publishSituation {
font-weight: 400;
font-size: 12px;
color: #999;
font-weight:bold;
}
#refreshActivity, #refreshBlocks,#refreshMedia {
display:block;
width:16px;
height:16px;
background-image: url('../img/general/refresh.svg');
background-size:contain;
background-repeat:no-repeat;
float:right;
}
/*desktop menu*/
#Navigation {
position: fixed;
top: 0px;
bottom: 0;
width: 216px;
background: #1a1a1a;
padding-bottom: 10px;
overflow-y: auto;
scrollbar-width: thin;
scrollbar-color: #555 #2a2a2a;
box-sizing: border-box;
border-right: 1px solid #2e2e2e;
z-index: 10;
transition:0.3s ease;
overflow-x:hidden;
}
#Navigation::-webkit-scrollbar {
width: 4px;
height: 4px;
}
#Navigation::-webkit-scrollbar-thumb {
background: #555;
border-radius: 10px;
}
#Navigation::-webkit-scrollbar-track {
background: #2a2a2a;
border-radius: 10px;
}
#menuResizeSmall {
transform:0.3s ease;
height: 24px;
width: 24px;
position: fixed;
background-color: #252525;
margin-left: 192px;
border: 1px solid #333;
border-bottom-left-radius: 5px;
box-shadow: none;
transform: rotate(0deg);
}
.navigationProfileCard {
margin: 12px 10px 10px;
padding: 10px 12px;
border-radius: 10px;
border: 1px solid #333;
background: #252525;
}
.navigationMobileDivider {
display: none;
}
.navigationMenuScroll {
display: contents;
}
.navigationProfileCard .navigationUserLink {
display: block;
text-decoration: none;
color: inherit;
}
.navigationUserRow {
align-items: center;
}
.navigationUserRow:hover {
background-color: transparent;
}
.navigationUserAvatar img{
width:28px;
height:28px;
border-radius:50%;
object-fit: cover;
margin-left:0;
margin-top:0;
}
.navigationUserName h2 {
font-size:12px;
max-width:100%;
font-weight:600;
margin:0;
color:#fafafa;
}
.navigationModoSwitch {
display: flex;
align-items: center;
justify-content: space-between;
gap: 8px;
width: 100%;
margin-top: 10px;
padding: 6px 10px;
border: 1px solid #3a3a3a;
border-radius: 8px;
background: #2a2a2a;
cursor: pointer;
font-family: inherit;
color: inherit;
}
.navigationModoLabelWrap {
display: inline-flex;
align-items: center;
gap: 6px;
line-height: 1;
}
.navigationModoIcon {
width: 14px;
height: 14px;
flex-shrink: 0;
background-repeat: no-repeat;
background-position: center;
background-size: contain;
}
.navigationModoSwitch[data-theme="default"] .navigationModoIcon {
background-image: url('../img/menu/theme.svg');
}
.navigationModoSwitch[data-theme="light"] .navigationModoIcon {
background-image: url('../../light/img/menu/theme.svg');
}
.navigationModoSwitch[data-theme="system"] .navigationModoIcon {
background-image: url('../img/menu/theme.svg'), url('../../light/img/menu/theme.svg');
background-size: 16px;
background-repeat: no-repeat, no-repeat;
background-position: 1px center, calc(100% - 1px) center;
width: 35px;
}
.navigationModoLabel {
font-size: 11px;
font-weight: 500;
color: #a1a1aa;
line-height: 1;
}
.navigationModoValueWrap {
display: inline-flex;
align-items: center;
gap: 6px;
font-size: 11px;
font-weight: 500;
color: #e4e4e7;
line-height: 1;
}
.navigationModoTrack {
position: relative;
width: 26px;
height: 14px;
border-radius: 999px;
background: #404040;
flex-shrink: 0;
}
.navigationModoThumb {
position: absolute;
top: 2px;
left: 2px;
width: 10px;
height: 10px;
border-radius: 50%;
background: #d4d4d8;
transition: left 0.15s ease, transform 0.15s ease;
}
.navigationModoSwitch[data-theme="light"] .navigationModoThumb {
left: calc(100% - 12px);
background: #1E70E3;
}
.navigationModoSwitch[data-theme="system"] .navigationModoThumb {
left: 50%;
transform: translateX(-50%);
}
@media only screen and (min-width: 601px) {
#Navigation.navigationIsCollapsed .navigationProfileCard {
margin: 8px 4px 10px;
padding: 8px 0;
border: none;
background: transparent;
}
#Navigation.navigationIsCollapsed .navigationUserAvatar img {
display: block;
margin: 0 auto;
}
}
.navigationMenuItem {
width: calc(100% - 16px);
margin: 0 8px 6px;
padding: 7px 14px 7px 55px;
background-size: 24px;
background-repeat: no-repeat;
align-items: center;
display: grid;
color: #d4d4d8;
font-size: 13px;
letter-spacing: 0.2px;
background-position: 14px center;
font-weight: 500;
transition:0.3s ease;
height:36px;
border-radius: 8px;
box-sizing: border-box;
}
/* Ripple estilo listOption + recorte: só no menu lateral (mobile usa barra horizontal em max-width:600px) */
@media only screen and (min-width: 601px) {
.navigationMenuItem {
position: relative;
overflow: hidden;
}
.navigationMenuItem > .navigationResizeChange,
.navigationMenuItem > span.navigationResizeChange {
position: relative;
z-index: 2;
}
.navigationMenuItem::after {
content: "";
background: #90cfee;
display: block;
position: absolute;
padding-top: 300%;
padding-left: 350%;
margin-left: -30px!important;
border-radius: 30px;
margin-top: -120%;
opacity: 0;
transition: all 0.8s;
pointer-events: none;
z-index: 1;
}
.navigationMenuItem:active::after {
padding: 0;
margin: 0;
opacity: 1;
transition: 0s;
}
}
.navigationMenuItem:hover {
background-color:rgb(42, 42, 42);
}
.navigationMenuItem.navigationMenuItemActive {
background-color: #1e3a5f;
color: #3897F1 !important;
}
.navigationMenuItem.navigationMenuItemActive:hover {
background-color: #243d55;
color: #3897F1 !important;
}
/* Dashboard lite: link “versão antiga” — mobile-first (fluxo); desktop fixo no canto */
.dashboardLegacyPanelLink {
display: block;
text-align: center;
margin-top: 20px;
padding: 0 8px 8px 8px;
position: static;
right: auto;
bottom: auto;
z-index: auto;
}
@media only screen and (min-width: 601px) {
.dashboardLegacyPanelLink {
position: fixed;
right: 16px;
bottom: 16px;
z-index: 5;
margin-top: 0;
padding: 0;
text-align: right;
}
}
/* Cache antigo com style="" inline: !important só no mobile */
@media only screen and (max-width: 600px) {
.dashboardLegacyPanelLink {
position: static !important;
right: auto !important;
bottom: auto !important;
z-index: auto !important;
}
}
/* Store dashboard lite: grid de cards e gráficos */
.storeDashboardLiteShell { width: 100%; }
.storeDashboardLiteBanner {
grid-column: 1 / -1;
margin-bottom: 4px;
}
.storeDashboardLiteBanner .blackCard { margin-bottom: 0; }
.storeDashboardLiteGrid {
display: grid;
grid-template-columns: repeat(3, minmax(0, 1fr));
gap: 20px;
}
.storeDashboardLiteGrid > .blackCard,
.storeDashboardLiteGrid > .storeDashboardLiteGridSpacer {
min-height: 100%;
}
.storeDashboardLiteGridSpacer {
visibility: hidden;
min-height: 1px;
pointer-events: none;
}
.storeDashboardLiteGraphGrid {
display: grid;
grid-template-columns: repeat(2, minmax(0, 1fr));
gap: 20px;
margin-top: 20px;
}
.storeDashboardLiteGraphEmpty h3 {
font-size: 16px;
font-weight: 600;
line-height: 1.35;
}
@media (max-width: 960px) {
.storeDashboardLiteGrid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (max-width: 640px) {
.storeDashboardLiteGrid,
.storeDashboardLiteGraphGrid { grid-template-columns: 1fr; gap: 14px; }
}
#menuWebsite, #websiteTitle {
background-image: url('../img/menu/website.svg');
}
#menuUser, #userTitle {
background-image: url('../img/menu/user.svg');
}
#menuTemplate, #templateTitle, #templateNewsTitle, #templateCatalogTitle {
background-image: url('../img/menu/template.svg');
}
#menuMenu, #menuTitle {
background-image: url('../img/menu/menu.svg');
}
#menuExtension {
background-image: url('../img/menu/extension.svg');
}
#menuExtensionConfig {
background-image: url('../img/menu/extensionConfig.svg');
}
#menuPage, #pageTitle {
background-image: url('../img/menu/page.svg');
}
#menuActivity {
background-image: url('../img/menu/activity.svg');
}
#menuVisit, #visitTitle {
background-image: url('../img/menu/visit.svg');
}
#menuAccess, #accessTitle {
background-image: url('../img/menu/access.svg');
}
#menuUpload, #uploadTitle {
background-image: url('../img/menu/upload.svg');
}
#menuApi, #apiTitle {
background-image: url('../img/menu/api.svg');
}
#menuInstall, #installTitle {
background-image: url('../img/menu/install.svg');
}
#menuDisconnect {
background-image: url('../img/menu/disconnect.svg');
}
#menuPwa, #pwaTitle {
background-image: url('../img/menu/pwa.svg');
}
#menuAmp, #ampTitle {
background-image: url('../img/menu/amp.svg');
}
#menuProduction, #productionTitle {
background-image: url('../img/menu/production.svg');
}
#menuPressRelease, #prTitle {
background-image: url('../img/menu/pressRelease.svg');
}
#menuWebsiteDashboard {
background-image: url('../img/menu/dashboard.svg');
}
#menuBlock, #blockTitle {
background-image: url('../img/page/block.svg');
}
#menuBlockConfig, #blockConfigTitle {
background-image: url('../img/page/block.svg');
}
#menuExtension, #extensionTitle {
background-image: url('../img/menu/extension.svg');
}
#menuExtensionConfig, #extensionConfigTitle {
background-image: url('../img/menu/extensionConfig.svg');
}
#menuRefresh, #refreshTitle {
background-image: url('../img/menu/refresh.svg');
}
#menuScript, #routinesCheckTitle {
background-image: url('../img/menu/refreshOk.svg');
}
#menuContacts, #contactsTitle {
background-image: url('../img/menu/menuContacts.svg');
}
#menuBilling, #billingTitle {
background-image:url('../img/menu/billing.svg');
}
#menuAlerts{
background-image: url('../img/menu/alerts.svg');
}
#menuTemplateOnlineStore {
background-image: url('../img/menu/menuTemplateOnlineStore.svg');
}
#menuCRMMailing, #crmMailingTitle, #crmSendTitle, #crmContactsTitle, #crmSegmentationTitle, #crmTemplatesTitle, #crmSheetsTitle, #crmConfigTitle {
background-image: url('../img/menu/menuCRMMailing.svg');
}
#menuHosting, #HostingTitle {
background-image: url('../img/menu/menuHosting.svg');
}
/* AI Plans — magic wand (SVG colorido; filtro só no ::before para não afetar o texto) */
#menuAiPlans.navigationMenuItem {
position: relative;
background-image: none;
}
#menuAiPlans.navigationMenuItem::before {
content: '';
position: absolute;
left: 14px;
top: 50%;
transform: translateY(-50%);
width: 18px;
height: 18px;
background: url('../img/general/magicWand.svg') center / contain no-repeat;
filter: brightness(0) invert(0.82);
pointer-events: none;
}
#alertsTitle {
background-image: url('../img/menu/sendmail.svg');
width: 100%;
height: 100%;
background-position: center;
background-size: contain;
background-repeat: no-repeat;
}
.boxBtnSelect{background-color: #222222;border-radius: 10px 10px 0 0;}
.boxSelectedOpt{background-color: #222222;border-radius: 0 0 10px 10px;}
.iTitle {
background-size: 30px;
background-repeat: no-repeat;
background-position: left;
padding-left: 40px;
padding-top: 10px;
padding-bottom: 10px;
}
.menuWebsite {
color:#c3c3c3;
background-color:#262626;
}
/* end desktop menu */
/* default modal */
.modalOverlay {
position: fixed;
top: 0;
right: 0;
bottom: 0;
left: 0;
cursor: pointer;
background-color: #09090973;
z-index: 20;
width: 400%;
backdrop-filter: blur(5px);
}
.modal {
transition: top .25s ease;
position: fixed;
top: 0%;
right: 0;
bottom: 0;
left: 0;
width: 80%;
margin: auto;
overflow: auto;
height: 90%;
background-color: #2b2b2b;
box-shadow: 0 2px 12px #111;
z-index:30;
border-radius:10px;
}
.modalHeader {
position: fixed;
width: inherit;
background-color: #2b2b2b;
box-shadow: 0 3px 3px #262626;
padding: 5px;
display:flex;
border-top-left-radius: 10px;
border-top-right-radius: 10px;
margin-top:-10px;
z-index:9;
}
.modalForm {
max-width:1000px;
margin:0 auto;
}
.modalHeader h2 {
padding: 0;
margin: 5px 0 0 30px;
color: #3797f1;
text-overflow: ellipsis;
white-space: nowrap;
overflow: hidden;
font-weight: 500;
font-size: 15px;
letter-spacing: 0px;
font-weight:bold;
}
.modalContent {
margin:50px 20px 0 20px;
}
.closeModal {
background-image: url('../img/close.svg');
width: 24px;
height: 24px;
background-size: 16px;
background-repeat: no-repeat;
display: inline-block;
cursor: pointer;
background-position: center;
}
/* end of default modal */
/* Pagar.me partner modal — token help image zoom */
.pagarmePartnerTokenHelpZoom {
border: none;
padding: 0;
margin: 0 auto;
background: transparent;
cursor: zoom-in;
display: block;
width: 100%;
max-width: 480px;
text-align: left;
}
.pagarmePartnerTokenHelpZoom:focus {
outline: 2px solid #3797f1;
outline-offset: 2px;
}
.pagarmePartnerTokenHelpZoomInner {
position: relative;
display: block;
width: 100%;
}
.pagarmePartnerTokenHelpZoomInner img {
width: 100%;
height: auto;
display: block;
vertical-align: top;
border-radius: 4px;
}
.pagarmePartnerTokenHelpZoomLens {
position: absolute;
inset: 0;
display: flex;
align-items: center;
justify-content: center;
background: rgba(0, 0, 0, 0.35);
opacity: 0;
transition: opacity 0.2s ease;
pointer-events: none;
border-radius: 4px;
}
.pagarmePartnerTokenHelpZoom:hover .pagarmePartnerTokenHelpZoomLens,
.pagarmePartnerTokenHelpZoom:focus .pagarmePartnerTokenHelpZoomLens {
opacity: 1;
}
.pagarmePartnerTokenHelpZoomLens svg {
filter: drop-shadow(0 1px 2px rgba(0, 0, 0, 0.5));
}
.pagarmePartnerTokenHelpOverlay {
position: fixed;
inset: 0;
z-index: 99999;
background: rgba(0, 0, 0, 0.88);
display: flex;
align-items: center;
justify-content: center;
padding: 24px;
box-sizing: border-box;
cursor: zoom-out;
}
.pagarmePartnerTokenHelpOverlay img {
max-width: min(960px, 95vw);
max-height: 90vh;
width: auto;
height: auto;
object-fit: contain;
cursor: default;
box-shadow: 0 8px 32px rgba(0, 0, 0, 0.45);
border-radius: 6px;
}
.pagarmePartnerTokenHelpOverlayClose {
position: absolute;
top: 12px;
right: 16px;
width: 44px;
height: 44px;
border: none;
border-radius: 8px;
background: rgba(255, 255, 255, 0.12);
color: #fff;
font-size: 28px;
line-height: 1;
cursor: pointer;
display: flex;
align-items: center;
justify-content: center;
padding: 0;
z-index: 1;
}
.pagarmePartnerTokenHelpOverlayClose:hover {
background: rgba(255, 255, 255, 0.22);
}
/* Confirm Modal */
.modalOverlay:has(.confirmModal) {
width: 100%;
z-index: 99;
}
.confirmModal {
padding: 30px;
width: 600px;
text-align: center;
margin: auto;
max-width: 90%;
margin-top: 50px;
}
/* default float window */
.float {
position: fixed;
z-index: 40;
width: calc(100% - 60px);
margin: 0 30px;
background-color: #3b3b3b;
box-shadow: 0 -5px 5px #202020;
padding: 10px;
bottom:0;
-webkit-animation: slide-in-bottom 0.5s cubic-bezier(0.250, 0.460, 0.450, 0.940) both;
animation: slide-in-bottom 0.5s cubic-bezier(0.250, 0.460, 0.450, 0.940) both;
text-align:center;
border-top-left-radius: 15px;
border-top-right-radius: 15px;
}
.floatHeader h2{
text-align:left;
font-size:18px;
padding-right:30px;
margin:0;
}
.closeFloat {
width: 24px;
height: 24px;
position: absolute;
left: calc(100% - 30px);
border-radius: 10px;
cursor: pointer;
background-image: url('../img/close.svg');
background-size: 24px;
}
.closeFloatOut {
-webkit-animation: slide-out-bottom 0.5s cubic-bezier(0.550, 0.085, 0.680, 0.530) both;
animation: slide-out-bottom 0.5s cubic-bezier(0.550, 0.085, 0.680, 0.530) both;
}
#progressBar {
width: calc(100% - 120px);
height: 20px;
background-color: #333;
box-shadow: inset 0 -8px 13px #242424, 0 3px 13px #060606;
position: relative;
margin-top: -20px;
z-index: -1;
border-radius: 10px;
}
#progressBarProgess {
height: 20px;
position: relative;
width: 0px;
background-color: #5eee9d;
box-shadow: inset 0 -22px 3px #4fb77c;
border-radius:10px;
}
#ftpLog {
text-align: left;
height: 150px;
overflow-y: auto;
}
.sendingFile {
color:#aaffab !important;
}
/* ---- Envio FTP (iFloat): anel circular ao redor do ícone cloudTransfer ---- */
.ftpTransfer {
max-width: 360px;
margin: 0 auto;
text-align: center;
padding: 6px 8px 10px;
}
.ftpTransferHero {
display: flex;
flex-direction: column;
align-items: center;
transition: opacity 0.42s ease, transform 0.42s ease;
}
.ftpTransferHero--out {
opacity: 0;
transform: scale(0.9);
pointer-events: none;
}
.ftpTransferRingWrap {
position: relative;
width: 132px;
height: 132px;
margin: 4px auto 14px;
}
.ftpTransferRing {
width: 100%;
height: 100%;
transform: rotate(-90deg);
display: block;
}
.ftpTransferRingTrack {
fill: none;
stroke: #333;
stroke-width: 7;
}
.ftpTransferRingFill {
fill: none;
stroke: #5eee9d;
stroke-width: 7;
stroke-linecap: round;
transition: stroke-dashoffset 1.2s cubic-bezier(0.25, 0.46, 0.45, 0.94);
filter: drop-shadow(0 0 4px rgba(94, 238, 157, 0.45));
}
.ftpTransferRingFill--warning {
stroke: #f2e09a;
filter: drop-shadow(0 0 4px rgba(242, 224, 154, 0.45));
}
.ftpTransferRingFill--error {
stroke: #f06363;
filter: drop-shadow(0 0 4px rgba(240, 99, 99, 0.45));
}
.ftpTransferStatus--warning {
color: #f2e09a;
}
.ftpTransferStatus--error {
color: #f06363;
}
.ftpTransferIcon {
position: absolute;
top: 50%;
left: 50%;
width: 78px;
height: 78px;
transform: translate(-50%, -50%);
}
.ftpTransferIcon svg {
width: 100%;
height: 100%;
display: block;
}
.ftpTransferRingWrap--complete {
animation: ftpTransferPop 0.6s cubic-bezier(0.34, 1.56, 0.64, 1) both;
}
@keyframes ftpTransferPop {
0% { transform: scale(1); }
45% { transform: scale(1.18); }
100% { transform: scale(1); }
}
.ftpTransferStatus {
margin: 0;
font-size: 16px;
font-weight: 600;
color: #f0f0f0;
letter-spacing: -0.01em;
}
.ftpTransferError {
display: flex;
flex-direction: column;
align-items: center;
gap: 6px;
padding: 4px 8px 8px;
opacity: 0;
transform: translateY(8px);
transition: opacity 0.42s ease, transform 0.42s ease;
}
.ftpTransferError--hidden {
display: none;
}
.ftpTransferError--in {
opacity: 1;
transform: translateY(0);
}
.ftpTransferErrorIcon {
width: 120px;
height: 120px;
margin: 0 auto;
}
.ftpTransferErrorIcon svg {
width: 100%;
height: 100%;
display: block;
}
.ftpTransferErrorTitle {
margin: 0;
font-size: 17px;
font-weight: 600;
color: #f0c0c0;
}
.ftpTransferErrorText {
margin: 0 0 6px;
font-size: 13.5px;
line-height: 1.5;
color: #c9b3b3;
max-width: 320px;
}
.ftpTransferErrorClose {
margin-top: 2px;
}
/* Garante espaço para o anel/ícone independente do tamanho passado ao iFloat. */
#float_floatForFtp {
height: auto !important;
min-height: 250px;
}
/* publish upload modal — ver bloco Stripe (.publishUploadModal) */
/* animation */
/* ----------------------------------------------
* Generated by Animista on 2021-7-6 22:48:10
* Licensed under FreeBSD License.
* See http://animista.net/license for more info.
* w: http://animista.net, t: @cssanimista
* ---------------------------------------------- */
/**
* ----------------------------------------
* animation slide-in-bottom
* ----------------------------------------
*/
@-webkit-keyframes slide-in-bottom {
0% {
-webkit-transform: translateY(1000px);
transform: translateY(1000px);
opacity: 0;
}
100% {
-webkit-transform: translateY(0);
transform: translateY(0);
opacity: 1;
}
}
@keyframes slide-in-bottom {
0% {
-webkit-transform: translateY(1000px);
transform: translateY(1000px);
opacity: 0;
}
100% {
-webkit-transform: translateY(0);
transform: translateY(0);
opacity: 1;
}
}
/* ----------------------------------------------
* Generated by Animista on 2021-7-6 22:50:24
* Licensed under FreeBSD License.
* See http://animista.net/license for more info.
* w: http://animista.net, t: @cssanimista
* ---------------------------------------------- */
/**
* ----------------------------------------
* animation slide-out-bottom
* ----------------------------------------
*/
@-webkit-keyframes slide-out-bottom {
0% {
-webkit-transform: translateY(0);
transform: translateY(0);
opacity: 1;
}
100% {
-webkit-transform: translateY(1000px);
transform: translateY(1000px);
opacity: 0;
}
}
@keyframes slide-out-bottom {
0% {
-webkit-transform: translateY(0);
transform: translateY(0);
opacity: 1;
}
100% {
-webkit-transform: translateY(1000px);
transform: translateY(1000px);
opacity: 0;
}
}
/* end of float window */
/*specific for pages */
.activityBox {
margin-top:260px;
}
#resourceItemBox {
height: 150px;
overflow-y: auto;
scrollbar-width: thin;
}
@media only screen and (max-width: 870px) {
.activityBox {
margin-top:0;
}
.blocksInPageBox {
position:initial;
}
#resourceItemBox {
height: 400px;
overflow-y: auto;
scrollbar-width: thin;
}
}
@media only screen and (min-width: 1400px) {
#resourceItemBox {
height: 400px;
overflow-y: auto;
scrollbar-width: thin;
}
}
.accountTypeProfile{
display: flex;
background-color: #3a3b3c;
width: max-content;
}
.accountType-google{
width: 50px;height: 50px;margin: 5px;
background-image: url('../img/general/google-logo.svg');
background-size: contain;
background-position: center;
background-repeat: no-repeat;
}
.accountType-fb{
width: 50px;height: 50px;margin: 5px;
background-image: url('../img/general/fb-logo.svg');
background-size: contain;
background-position: center;
background-repeat: no-repeat;
}
#contentToCryptResult {
font-size:14px;
word-wrap:anywhere;
color:#c1c1c1;
}
.contentItemMenu{
border-radius: 3px;
padding: 10px;
box-shadow: -2px 2px 2px 0px #282828;
}
.defaultAvatar {
background-image: url('../img/general/userDefault.svg');
}
.listOption {
background-image: linear-gradient(to right, #1E70E3, #3897F1);
display: inline-block;
padding: 8px 20px;
margin: 4px;
font-size: 14px;
font-weight: 600;
letter-spacing: 1px;
border-radius: 15px;
cursor: pointer;
color: white;
border: none;
box-shadow: none;
position:relative;
overflow: hidden;
filter: brightness(1);
transition: filter 0.28s ease-out, color 0.28s ease-out;
}
.listOption:after {
content: "";
background: #90cfee;
display: block;
position: absolute;
padding-top: 300%;
padding-left: 350%;
margin-left: -30px!important;
border-radius:30px;
margin-top: -120%;
opacity: 0;
transition: all 0.8s
}
.listOption:active:after {
padding: 0;
margin: 0;
opacity: 1;
transition: 0s;
}
.listOption:hover {
filter: brightness(1.06);
border: none;
color: white;
}
.listOption:active {
filter: brightness(0.97);
transition-duration: 0.15s;
}
/* Grupo de ações em cards (dashboard, hub): botões .listOption inline com wrap responsivo */
.cardActions {
display: flex;
flex-wrap: wrap;
gap: 8px;
justify-content: center;
align-items: center;
width: 100%;
margin-top: 4px;
}
.cardActions .listOption {
margin: 0;
}
@media (max-width: 480px) {
.cardActions .listOption {
flex: 1 1 calc(50% - 4px);
min-width: 120px;
text-align: center;
box-sizing: border-box;
}
}
/* Fallback: cards com vários .listOption diretos (legado / widgets) */
.blackCard.textCenter:not(.profileOptionCard):has(> .listOption + .listOption),
.instDashboardCard:has(> .listOption + .listOption) {
display: flex;
flex-wrap: wrap;
flex-direction: row;
justify-content: center;
align-items: center;
}
.blackCard.textCenter:not(.profileOptionCard):has(> .listOption + .listOption) > :not(.listOption),
.instDashboardCard:has(> .listOption + .listOption) > :not(.listOption) {
flex: 0 0 100%;
width: 100%;
}
.blackCard.textCenter:not(.profileOptionCard):has(> .listOption + .listOption) > .listOption,
.instDashboardCard:has(> .listOption + .listOption) > .listOption {
margin: 0;
flex: 0 1 auto;
}
@media (max-width: 480px) {
.blackCard.textCenter:not(.profileOptionCard):has(> .listOption + .listOption) > .listOption,
.instDashboardCard:has(> .listOption + .listOption) > .listOption {
flex: 1 1 calc(50% - 4px);
min-width: 120px;
text-align: center;
box-sizing: border-box;
}
}
@keyframes freeStoreCtaPulse {
0%, 100% {
filter: brightness(1);
transform: scale(1);
}
50% {
filter: brightness(1.12);
transform: scale(1.045);
}
}
.listOption.freeStoreCtaPulse {
animation: freeStoreCtaPulse 2.2s ease-in-out infinite;
}
@media (prefers-reduced-motion: reduce) {
.listOption.freeStoreCtaPulse {
animation: none;
}
}
.buttonWithIcon img {
width:16px;
margin-right:5px;
}
.deleteButton {
font-size: 12px;
padding: 5px 20px;
border: #480a0a 1px solid;
color: white;
background-image: none;
background-color: #480a0a !important;
}
.deleteButton:hover {
background-image: none;
background-color: #dc3838 !important;
border:1px solid #dc3838;
}
#notLoggedContent {
margin-left:-230px;
transition:0.3s ease;
}
.pageActivityListItemImage {
float: left;
width: 24px;
height: 24px;
border-radius: 50%;
margin-right: 10px;
}
.pageActivityListItemP {
margin: 1px 0 0 0;
font-size: 12px;
color:#999;
}
.pageActivityListItemName {
color: #3797f1;
}
.pageActivityListItemAct {
color:#dedede;
}
#activityContent {
scrollbar-width: thin;
max-height:100px;
overflow-y:auto;
}
#newInstall {
width: 100%;
height: 100%;
background-image: url('../img/general/newInstall.svg');
background-size: contain;
background-position: center;
background-repeat: no-repeat;
}
#listInstall {
width: 100%;
height: 100%;
background-image: url('../img/general/listInstall.svg');
background-size: contain;
background-position: center;
background-repeat: no-repeat;
}
#newInstallConcept {
width: 100%;
height: 200px;
background-image: url('../img/general/newInstall.svg');
background-size: contain;
background-position: center;
background-repeat: no-repeat;
}
#newProduction {
width: 100%;
height: 100%;
background-image: url('../img/general/productionNew.svg');
background-size: contain;
background-position: center;
background-repeat: no-repeat;
}
#listProduction {
width: 100%;
height: 100%;
background-image: url('../img/general/productionList.svg');
background-size: contain;
background-position: center;
background-repeat: no-repeat;
}
#fileExplorerProduction {
width: 100%;
height: 100%;
max-width: 64px;
max-height: 64px;
background-image: url('../img/file/folder.svg');
background-size: contain;
background-position: center;
background-repeat: no-repeat;
}
#newProductionConcept {
width: 100%;
height: 200px;
background-image: url('../img/general/productionConcept.svg');
background-size: contain;
background-position: center;
background-repeat: no-repeat;
}
.fileRow {
line-height:20px;
color:#dedede;
padding:5px 2px;
align-items:center;
border-bottom:1px solid #333;
}
.fileItem {
padding-left:28px;
background-size:20px;
background-position:left;
background-repeat:no-repeat;
word-break:break-all;
}
#urlBreadcrumb {
color: #666;
background-color: #222;
padding: 2px 10px;
border-radius: 5px;
font-size: 12px;
}
.breadcrumb {
background-color:#222;
}
.htaccessFile { background-image: url('../img/file/config.svg'); }
.htmlFile { background-image: url('../img/file/html.svg'); }
.phpFile { background-image: url('../img/file/php.svg'); }
.jsFile { background-image: url('../img/file/javascript.svg'); }
.cssFile { background-image: url('../img/file/css.svg'); }
.txtFile { background-image: url('../img/file/txt.svg'); }
.docxFile, .docFile { background-image: url('../img/file/doc.svg'); }
.xlsFile, .cvsFile, .xlsxFile { background-image: url('../img/file/excel.svg'); }
.jsonFile { background-image: url('../img/file/json-file.svg'); }
.xmlFile { background-image: url('../img/file/xml.svg'); }
.folderFile { background-image: url('../img/file/folder.svg'); }
.pdfFile { background-image: url('../img/file/pdf.svg'); }
.videoFile, .mp4File, .webmFile { background-image: url('../img/file/video-file.svg'); }
.customFile { background-image: url('../img/file/file.svg'); }
.woffFile { background-image: url('../img/file/file.svg'); }
.woff2File { background-image: url('../img/file/file.svg'); }
/* page blocks */
.iBlock {
background-size: 32px;
background-repeat: no-repeat;
padding-top: 0;
background-position-x: left;
background-position-y: center;
text-align: left;
padding-left: 42px;
}
.iBlock h3 {
color: #3797f1;
margin-bottom:0;
}
.iBlock p {
margin-top:0;
font-size:11px;
}
.blockCode { background-image: url('../img/general/code.svg');}
.imgBlock { background-image: url('../img/general/imgBlock.svg');}
.imgBlockPicture { background-image: url('../img/page/imgBlockPicture.svg');}
.blockCodeCss { background-image: url('../img/page/blockCodeCss.svg');}
.blockCodeHtml { background-image: url('../img/page/blockCodeHtml.svg');}
.blockCodeJs { background-image: url('../img/page/blockCodeJs.svg');}
.blockLoop { background-image: url('../img/page/blockLoop.svg'); background-repeat:no-repeat;}
.cardsBannersMidias {background-image: url('../img/general/cardsBannersMidias.svg'); background-repeat:no-repeat;}
.blockSnapshotIcon {
background-image: url('../img/history.svg');
}
#blockSnapshotButton {
display: inline-block;
background-size: contain;
position: absolute;
font-size: 12px;
color: #dedede;
background-repeat: no-repeat;
font-weight: normal;
padding: 6px 10px 5px 30px;
margin-top: 1px;
transition: 0.3s ease;
}
#blockSnapshotButton:hover {
color:#10afef;
}
/* Histórico no cabeçalho do modal Sass (mesmo padrão do #blockSnapshotButton no BlockEditor) */
#sassBlockDbEditModalContent .modalHeader #sassBlockHistoryBtn {
display: inline-block;
background-size: contain;
position: absolute;
font-size: 12px;
color: #dedede;
background-repeat: no-repeat;
font-weight: normal;
padding: 6px 10px 5px 30px;
margin-top: 1px;
transition: 0.3s ease;
}
#sassBlockDbEditModalContent .modalHeader #sassBlockHistoryBtn:hover {
color: #10afef;
}
.blockText { background-image: url('../img/general/text.svg');}
.blockTextRich { background-image: url('../img/page/blockTextRich.svg');}
.blockTextSimple { background-image: url('../img/page/blockTextSimple.svg');}
.trashIcon { background-image: url('../img/general/trash.svg');}
.editIcon { background-image: url('../img/general/edit.svg');}
.blockinwebsiteOpt {
width:16px;
height:16px;
background-size: contain;
display:none;
}
.blockFilterButton {
display: inline-block;
font-size: 15px;
padding: 5px 10px;
margin: 4px;
background-color: #404040;
border-radius: 5px;
}
.blockFilterCounter {
font-size: 12px;
position: relative;
float: right;
margin-left: 5px;
padding: 2px 5px;
color: #3797f1;
font-weight: bold;
background-color: #2b2b2b;
border-radius: 3px;
}
.blockinwebsiteName {
background-size: 16px;
background-position: left;
background-repeat: no-repeat;
padding-left: 20px;
margin: 5px 0;
transition:0.3s ease;
font-size:13px;
color:#b1b1b1;
}
.blockinwebsiteName:hover {
color:#10afef;
}
.blockinwebsiteRow:hover {
background-color:#222;
}
.blockinwebsiteRow:hover .blockinwebsiteOpt {
display:block;
}
.blockinwebsiteNameOn {
font-weight: bold;
font-size: 15px;
}
.blockinwebsiteNameOn p {
color: #10acea;
font-size:14px;
}
.bwItemInLine {
margin:0;
padding:0;
font-size:12px !important;
font-style:italic;
font-weight:400;
}
/* end of page blocks */
/* block Editor page */
.blockEditorItemMajorIcon {
width: 48px;
height: 48px;
background-position: center;
background-size: contain;
margin: 0 auto;
}
.blockEditorItemMinorIcon {
width: 24px;
height: 24px;
position: absolute;
background-size: 75%;
background-color: #363636;
border: none;
border-radius: 4px;
margin-top: -70px;
box-shadow: 0 2px 2px black;
background-position: center;
background-repeat: no-repeat;
margin-left: 0;
}
.blockEditorLabels h3 {
margin:0;
font-size:15px;
word-wrap: break-word;
}
.blockEditorLabels p {
display: block;
}
.blockEditorLabels h3 + p {
display: none;
}
.blockEditorPageNameLink {
color: #10afef;
font-weight: normal;
font-size: 13px;
padding: 4px 5px;
background-color: #1f1f1f;
border-radius: 5px;
margin: 3px 5px;
box-shadow: 2px 2px 2px black;
transition:0.3s ease;
}
.blockEditorPageNameLink:hover {
background-color:#0f1b29;
}
.visibleIcon {
background-image:url('../img/general/visible.svg');
}
.invisibleIcon {
background-image:url('../img/general/invisible.svg');
}
.codeBlockVisibleIcon {
width: 16px;
height: 16px;
display: inline-block;
background-position: center;
background-size: contain;
margin-right: 5px;
margin-bottom: -3px;
}
#showAndHideCode,
.iBlockCodeToggle {
font-size: 12px;
margin-top: 0;
color: #c0bfbf;
cursor: pointer;
white-space: nowrap;
}
.hideCodeBlocks {
display:none;
transition:0.3 ease;
}
/* ---- Block editor — grid + toolbar (padrão iMedia) ---- */
.iBlockEditorShell {
padding-bottom: 8px;
}
.iBlockEditorShell--empty .iBlockToolbar,
.iBlockToolbar.is-hidden {
display: none !important;
}
.iBlockListLoading {
padding: 28px 16px;
font-size: 14px;
color: #9a9a9a;
text-align: center;
}
.iBlockEditorHeader {
margin-bottom: 16px;
}
.iBlockEditorHeaderMain {
display: flex;
flex-wrap: wrap;
align-items: center;
justify-content: space-between;
gap: 12px 16px;
}
.iBlockEditorHeaderMain h2 {
margin: 0;
}
.iBlockToolbar {
display: flex;
flex-direction: column;
gap: 12px;
margin-bottom: 18px;
padding: 14px;
border: 1px solid #353535;
border-radius: 12px;
background-color: #262626;
}
.iBlockSearchPlace .form-control {
max-width: none;
margin-top: 0;
}
.iBlockToolbarRow {
display: flex;
flex-wrap: wrap;
align-items: center;
gap: 10px 12px;
}
.iBlockPageFilter {
flex: 0 1 220px;
min-width: 160px;
}
.iBlockPageSelect {
margin-top: 0;
}
.iBlockTypeFilters {
display: flex;
flex-wrap: wrap;
align-items: center;
gap: 8px;
}
.iBlockTypeChip {
display: inline-flex;
align-items: center;
gap: 6px;
padding: 6px 12px;
border-radius: 20px;
border: 1px solid #454545;
background-color: #2b2b2b;
color: #e6e6e6;
font-size: 12px;
font-weight: 500;
cursor: pointer;
transition: border-color 0.2s ease, color 0.2s ease, background-color 0.2s ease;
}
.iBlockTypeChip:hover {
border-color: #3797f1;
}
.iBlockTypeChipActive {
border-color: #3797f1;
color: #3797f1;
background-color: rgba(55, 151, 241, 0.08);
}
.iBlockTypeChipIcon {
width: 14px;
height: 14px;
display: inline-block;
background-size: contain;
background-position: center;
background-repeat: no-repeat;
flex-shrink: 0;
opacity: 0.85;
}
.iBlockToolbarAi {
display: flex;
flex-wrap: wrap;
align-items: center;
gap: 8px;
margin-left: auto;
}
.iBlockAiBtn {
display: inline-flex;
align-items: center;
gap: 6px;
margin: 0;
}
.iBlockVisibleCount {
font-size: 11px;
color: #8a8a8a;
white-space: nowrap;
}
.iBlockEmptyPanel {
border-radius: 12px;
}
.iBlockEmpty {
padding: 48px 20px;
text-align: center;
border: 1px dashed #454545;
border-radius: 14px;
background-color: #262626;
}
.iBlockEmptyTitle {
font-size: 16px;
font-weight: 650;
color: #f4f5f7;
margin: 0 0 8px 0;
}
.iBlockEmptyBody {
font-size: 13.5px;
line-height: 1.55;
color: #9a9a9a;
margin: 0 auto 16px;
max-width: 440px;
}
.iBlockGrid {
display: grid;
grid-template-columns: repeat(auto-fill, minmax(160px, 1fr));
gap: 12px;
}
.blockEditorListItem.iBlockGridItem {
display: grid;
margin: 0;
}
.iBlockCard {
display: flex;
flex-direction: column;
gap: 8px;
padding: 12px;
min-height: 132px;
height: 100%;
background-color: #2b2b2b;
border: 1px solid #353535;
border-radius: 12px;
cursor: pointer;
transition: border-color 0.2s ease, background-color 0.2s ease, transform 0.15s ease, box-shadow 0.2s ease;
}
.iBlockCard:hover {
border-color: #3797f1;
background-color: #2f2f2f;
box-shadow: 0 6px 18px rgba(0, 0, 0, 0.35);
transform: translateY(-2px);
}
.iBlockCardHead {
display: flex;
align-items: flex-start;
justify-content: space-between;
gap: 8px;
}
.iBlockCardIcons {
position: relative;
width: 48px;
height: 42px;
flex-shrink: 0;
}
.iBlockCardMajorIcon {
width: 36px;
height: 36px;
background-position: center;
background-size: contain;
background-repeat: no-repeat;
margin: 4px auto 0;
}
.iBlockCardMinorIcon {
width: 18px;
height: 18px;
position: absolute;
left: 0;
top: 0;
background-size: 75%;
background-color: #363636;
border: none;
border-radius: 4px;
background-position: center;
background-repeat: no-repeat;
box-shadow: 0 2px 2px rgba(0, 0, 0, 0.35);
}
.iBlockCardId {
flex-shrink: 0;
font-size: 11px;
color: #8a8a8a;
}
.iBlockCardName {
margin: 0;
font-size: 13px;
font-weight: 600;
line-height: 1.35;
word-break: break-word;
}
.iBlockCardType {
margin: 0;
font-size: 11px;
line-height: 1.35;
color: #8a8a8a;
overflow: hidden;
display: -webkit-box;
-webkit-line-clamp: 2;
-webkit-box-orient: vertical;
}
@media (max-width: 992px) {
.iBlockToolbarAi {
margin-left: 0;
width: 100%;
}
}
@media (max-width: 576px) {
.iBlockEditorHeaderMain {
flex-direction: column;
align-items: stretch;
}
.iBlockEditorHeaderMain #blockEditorQuickCreateButton {
width: 100%;
text-align: center;
justify-content: center;
}
.iBlockGrid {
grid-template-columns: repeat(auto-fill, minmax(130px, 1fr));
}
}
/* end block Editor page */
/* end of specific for pages */
/* start extensions */
#newExtension {
width: 100%;
height: 100%;
background-image: url('../img/extension/create.svg');
background-size: contain;
background-position: center;
background-repeat: no-repeat;
}
#listExtension {
width: 100%;
height: 100%;
background-image: url('../img/extension/lists.svg');
background-size: contain;
background-position: center;
background-repeat: no-repeat;
}
#newExtensionConcept {
width: 100%;
height: 300px;
background-image: url('../img/extension/create.svg');
background-size: contain;
background-position: center;
background-repeat: no-repeat;
}
.extensionIcon {
width: 100%;
height: 100%;
background-position: center;
background-size: contain;
background-repeat: no-repeat;
}
.extensionIcon.extensionIconICheckoutLottieHost,
.extensionIcon.extensionIconIShippingLottieHost,
.extensionIcon.extensionIconICatalogLottieHost,
.extensionIcon.extensionIconICouponsLottieHost,
.extensionIcon.extensionIconIVisitsReportsLottieHost,
.extensionIcon.extensionIconISeoLottieHost,
.extensionIcon.extensionIconICartLottieHost,
.extensionIcon.extensionIconINotificationLottieHost,
.extensionIcon.extensionIconIAccountLottieHost,
.extensionIcon.extensionIconIRatingLottieHost,
.extensionIcon.extensionIconINewsLottieHost,
.extensionIcon.extensionIconIWebstoriesLottieHost {
background-image: none;
}
/*icons of extensions*/
.visitsReports {
background-image: url('../img/extension/visits.svg');
}
.seoMetas {
background-image: url('../img/extension/seo.svg');
}
.publishArticle {
background-image: url('../img/extension/publishArticle.svg');
}
.catalog {
background-image: url('../img/extension/catalog.svg');
}
.iCart {
background-image: url('../img/extension/basketIcon.svg');
}
.iCustomNotification {
background-image: url('../img/extension/customNotification.svg');
}
.iAccount {
background-image: url('../img/extension/accountExtension.svg');
}
.iShipping {
background-image:url('../img/extension/shipping.svg');
}
.iCheckout {
background-image:url('../img/extension/checkout.svg');
}
.iDiscount {
background-image:url('../img/extension/discountExtension.svg');
}
.bling {
background-image:url('../img/extension/bling.svg');
}
.iRating {
background-image:url('../img/extension/rating.svg');
}
.webstories {
background-image:url('../img/extension/webstories.png');
}
.itoolshub {
background-image:url('../img/extension/itoolshub_vector.svg');
}
.extensionInstalled {
background-color: #222;
border: 1px solid;
}
.blackCard.extensionInstalled {
border-color: #3797f1;
}
.sassLayoutRailPick.installedExtension {
border: 1px solid;
background-color: #222;
}
.sassLayoutRailPick.extensionInstalled,
.sassLayoutRailPick.extensionInstalled h3,
.sassLayoutRailPick.extensionInstalled p,
.sassLayoutRailPick.extensionInstalled small,
.sassLayoutRailPick.extensionInstalled .invalidDomain {
color: #fff;
}
.sassLayoutRailPick.extensionInstalled {
border: 1px solid #1E70E3;
background-color: #1E70E3;
}
.sassLayoutRailPick.extensionInstalled .extensionIcon {
filter: brightness(5);
}
#pmGatewayButtons .paymentMethodGatewayCol {
display: flex;
}
#pmGatewayButtons .paymentMethodGatewayCol [data-gateway] {
flex: 1;
width: 100%;
}
#categoryContent {
overflow-x:scroll;
padding:0;
}
.catalogFolder {
background-image: url(https://www.interago.com.br/App/Templates/default/img/file/folder.svg);
background-size: 16px;
background-position:0px 4px;
background-repeat: no-repeat;
padding-left: 23px;
display: flex;
align-items: center;
font-size: 12px;
margin-bottom: 0px;
flex-wrap: wrap;
border-left: 1px dashed #aaa;
width:260px;
}
.categoryName {
font-size: 15px;
cursor: pointer;
transition: 0.3s ease;
width: 150px;
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
}
.categoryName:hover {
color: #11a4df;
}
.categoryEdit {
background-image: url(https://www.interago.com.br/App/Templates/default/img/general/edit.svg);
background-size: 16px;
background-repeat: no-repeat;
display: inline-block;
height: 24px;
width: 24px;
cursor: pointer;
margin-left: 10px;
}
.categoryAdd {
background-image: url(https://www.interago.com.br/App/Templates/default/img/file/newFolder.svg);
background-size: 20px;
background-position: left;
position: relative;
background-repeat: no-repeat;
padding-left: 24px;
font-size: 13px;
color: #aaa;
cursor: pointer;
text-decoration: underline;
transition:0.3s ease;
width: 100%;
margin-top:0px;
margin-bottom:15px;
}
.categoryAdd:hover {
color: #11a4df;
}
.categoryQtd {
background-color: #004159;
padding: 2px 5px;
border-radius: 5px;
margin-left: 10px;
}
.categoryAppend {
margin-top:30px;
display:contents;
}
#productsList {
font-size:13px;
color:#d9d5d5;
}
#getProductsBar {
margin-left:80px;
}
@media (max-width: 600px) {
#getProductsBar {
margin-left:0px;
}
}
.productTitle {
font-size:13px;
color:#d9d5d5;
}
.variationOpt {
color:#e7e7e7;
display:flex;
align-items:center;
transition:0.3s ease;
cursor:pointer;
display: inline-flex;
align-items: center;
width:100%;
}
.variationOpt:hover {
color:white;
}
.choicesSymbolCircle {
border-radius:50%;
}
.choicesSymbolSquare, .choicesSymbolCircle {
width:18px;
height:18px;
border: 2px solid;
margin:5px 5px 5px 0;
pointer-events: none;
}
.variationOptContainer {
margin-left: 8px;
border-left: 1px dotted #e7e7e7;
padding-left: 5px;
}
.addNewOpt {
color: #3797f1;
border-radius: 50%;
height: 14px;
width: 45px;
text-align: center;
padding-top: 0px;
font-size: 13px;
cursor: pointer;
margin-left: 18px;
margin-top: -5px;
display: block;
padding-bottom:18px;
}
.addNewOpt:hover {
color:#0c96c9;
color:white;
}
#addNewTag small {
color: #3797f1 !important;
cursor:pointer !important;
}
.purpleColor {
color:#cd32e2;
}
.redColor {
color:#f15757;
}
.yellowColor {
color:#f7f75b;
}
.greenColor {
color:#6dfe96;
}
.aiGeneratedText {
color:#cbdeff;
font-family: 'Raleway', sans-serif;
}
/* Success checkmark animation */
.success-checkmark {
width: 80px;
height: 115px;
margin: 0 auto;
}
.success-checkmark .check-icon {
width: 80px;
height: 80px;
position: relative;
border-radius: 50%;
box-sizing: content-box;
border: 4px solid #4CAF50;
}
.success-checkmark .check-icon::before {
top: 3px;
left: -2px;
width: 30px;
transform-origin: 100% 50%;
border-radius: 100px 0 0 100px;
}
.success-checkmark .check-icon::after {
top: 0;
left: 30px;
width: 60px;
transform-origin: 0 50%;
border-radius: 0 100px 100px 0;
animation: rotate-circle 4.25s ease-in;
}
.success-checkmark .check-icon::before,
.success-checkmark .check-icon::after {
content: "";
height: 100px;
position: absolute;
transform: rotate(-45deg);
}
.success-checkmark .check-icon .icon-line {
height: 5px;
background-color: #4CAF50;
display: block;
border-radius: 2px;
position: absolute;
z-index: 10;
}
.success-checkmark .check-icon .icon-line.line-tip {
top: 46px;
left: 14px;
width: 25px;
transform: rotate(45deg);
animation: icon-line-tip 1s;
}
.success-checkmark .check-icon .icon-line.line-long {
top: 38px;
right: 8px;
width: 47px;
transform: rotate(-45deg);
animation: icon-line-long 1s;
}
.success-checkmark .check-icon .icon-circle {
top: -4px;
left: -4px;
z-index: 10;
width: 80px;
height: 80px;
border-radius: 50%;
position: absolute;
box-sizing: content-box;
border: 4px solid rgba(76, 175, 80, 0.5);
}
.success-checkmark .check-icon .icon-fix {
top: 8px;
width: 5px;
left: 26px;
z-index: 1;
height: 85px;
position: absolute;
transform: rotate(-45deg);
}
@keyframes rotate-circle {
0% { transform: rotate(-45deg); }
5% { transform: rotate(-45deg); }
12% { transform: rotate(-405deg); }
100% { transform: rotate(-405deg); }
}
@keyframes icon-line-tip {
0% { width: 0; left: 1px; top: 19px; }
54% { width: 0; left: 1px; top: 19px; }
70% { width: 50px; left: -8px; top: 37px; }
84% { width: 17px; left: 21px; top: 48px; }
100% { width: 25px; left: 14px; top: 45px; }
}
@keyframes icon-line-long {
0% { width: 0; right: 46px; top: 54px; }
65% { width: 0; right: 46px; top: 54px; }
84% { width: 55px; right: 0px; top: 35px; }
100% { width: 47px; right: 8px; top: 38px; }
}
/* Theme-specific background for success checkmark (dark) */
.success-checkmark .check-icon::before,
.success-checkmark .check-icon::after,
.success-checkmark .check-icon .icon-fix {
background: #2b2b2b;
}
/*news old style.css */
#generalWrite {
margin:0 auto;
width:100%;
max-width: 800px;
}
#previewWindow {
position: fixed;
top: 10px;
right: 10px;
border-radius: 10px;
box-shadow: 0 5px 5px black;
border-bottom: 25px solid #282828;
border-top: 25px solid #333;
border-left: 10px solid #313131;
border-right: 10px solid #201e1e;
transition:0.3s ease;
background-color:white;
}
.tox.tox-tinymce-inline {
position:absolute;
margin-top:-40px;
}
/*margin-top -160 on screen lower than 457px*/
@media (max-width: 411px) {
.tox.tox-tinymce-inline {
margin-top:-43px;
}
}
#optionsPreview {
position:absolute;
width:140px;
top:-70px;
}
#closePreviewIframe {
position: fixed;
top: 10px;
right: 10px;
z-index: 9999;
background-color: #1e1d1d;
color: white;
border: none;
border-radius: 5px;
font-size: 20px;
padding: 3px 10px;
cursor:pointer;
}
.writerButtons #buttonSaveDraft {
background-repeat: no-repeat;
font-size: 12px;
}
#buttonLoadPreview {
background-repeat: no-repeat;
font-size: 12px;
}
#buttonPublish {
background-repeat: no-repeat;
font-size: 12px;
}
#optionsPublishPreview {
position: absolute;
bottom: 100%;
right: 0;
}
#buttonSchedulePublish {
background-image: url(https://www.interago.com.br/App/Templates/default/img/extension/calendarIcon.svg);
background-size: 20px;
background-position: 9px center;
background-repeat: no-repeat;
}
#optionsPublishPreview .listOption {
display: block;
width: 100%;
padding: 5px 20px;
padding-left: 40px;
font-size: 14px;
}
@media only screen and (max-width: 992px) {
#optionsPublishPreview {
bottom: auto;
top: 100%;
padding: 15px;
border-radius: 10px;
background-color: #151515;
}
#optionsPublishPreview .listOption {
padding-block: 10px;
margin-top: 10px;
}
}
.dynamicElement {
margin-top:20px;
margin-bottom:40px;
}
.dynamicElement[type="p"] {
max-height: 400px;
overflow-y: scroll;
}
#btnGoTop{
bottom:50px;
width: 68px;
position: fixed;
right: 5px;
padding-bottom: 5px;
background-color:#333333b0;
margin: 20px auto;
box-shadow: #1e1e1e 0px 2px 2px;
transform: rotate(0deg);
border-radius: 5px;
text-align: center;
}
#boxImgSize{
display: grid;
grid-template-columns: 100px auto 20px auto 20px;
align-items: center;
text-align: center;
}
.imgAlign img {
height: 70px;
}
.imgAlign:hover {
border: 1px solid #1ca0f1;
}
.imgAlign {
cursor: pointer;
background-color: #3a3b3c;
border-radius: 10px;
margin: 10px 10px 0 0;
border: 1px solid #3a3b3c;
}
.alignActv{
background-color: #2a2a2a;
border: 1px solid #1ca0f1;
}
#GoogleSearchPreview{
display:block;
}
#InSitePreview {
max-width: 500px;
width: 40vw;
position: fixed;
top: 290px;
}
.newContentBlockOptionsItem {
font-size: 9px;
width: 62px;
text-align: center;
height: 62px;
vertical-align: middle;
box-shadow: 0 3px 5px #131313;
border-radius: 3px;
cursor: pointer;
transition: 0.3s ease;
margin: 9px;
padding-top:5px;
border: 1px solid #222;
}
.newContentBlockOptionsItem:hover {
border:1px solid #129fd8;
box-shadow: 1px 4px 4px #282626;
}
.closeLink{
display: none;
position: absolute;
right: 10px;
margin-top: 25px;
cursor: pointer;
color: #11a2dd;
}
.commandBarUp{
cursor: pointer;
position: absolute;
margin-top: -21px;
font-size: 10px;
background-color: #1e1d1d;
border-radius: 3px;
width: 20px;
height: 15px;
text-align: center;
margin-left: 24px;
}
.commandBarDown{
cursor: pointer;
position: absolute;
margin-top: -21px;
font-size: 10px;
background-color: #1e1d1d;
border-radius: 3px;
width: 20px;
height: 15px;
text-align: center;
margin-left: 48px;
}
.moveUp {
font-size:11px;
cursor:pointer;
transition:0.3s ease;
}
.commandBarUp:hover > .moveUp{
color: #3dc7ff;
}
.commandBarUp:hover{
background-color: #101010;
}
.moveDown {
font-size:11px;
cursor:pointer;
transition:0.3s ease;
}
.commandBarDown:hover{
background-color: #101010;
}
.commandBarDown:hover > .moveDown{
color: #3dc7ff;
}
#publishPragraph{
margin-left: 0px;
margin-top: 12px;
position: absolute;
width: 36px;
height: 36px;
background-image: url('https://www.interago.com.br/App/Templates/default/img/page/blockTextSimple.svg');
background-size: contain;
background-position: center;
background-repeat: no-repeat;
}
.form-check-input[disabled] {
filter: grayscale(1);
}
#publishImage{
margin-left: -2px;
margin-top: 12px;
position: absolute;
width: 36px;
height: 36px;
background-image: url('https://www.interago.com.br/App/Templates/default/img/page/imgBlockPicture.svg');
background-size: contain;
background-position: center;
background-repeat: no-repeat;
}
#publishVideo{
margin-left: -12px;
margin-top: 6px;
position: absolute;
width: 48px;
height: 48px;
background-image: url('https://www.interago.com.br/App/Templates/default/img/page/video.svg');
background-size: contain;
background-position: center;
background-repeat: no-repeat;
}
#publishRelatedLinks{
margin-left: -8px;
margin-top: 12px;
position: absolute;
width: 36px;
height: 32px;
background-image: url(https://www.interago.com.br/App/Templates/default/img/write/link.svg);
background-size: contain;
background-position: center;
background-repeat: no-repeat;
}
#publishGallery {
margin-left: -6px;
margin-top: 12px;
position: absolute;
width: 43px;
height: 36px;
background-image: url(https://www.interago.com.br/App/Templates/default/img/general/cardsBannersMidias.svg);
background-size: contain;
background-position: 6px 0;
background-repeat: no-repeat;
}
#publishTwitter{
margin-left: -2px;
margin-top: 12px;
position: absolute;
width: 36px;
height: 36px;
background-image: url('https://www.interago.com.br/App/Templates/default/img/write/twitter.svg');
background-size: contain;
background-position: center;
background-repeat: no-repeat;
}
#publishFacebook{
margin-left: 3px;
margin-top: 14px;
position: absolute;
width: 32px;
height: 32px;
background-image: url('https://www.interago.com.br/App/Templates/default/img/write/facebook.png');
background-size: contain;
background-position: center;
background-repeat: no-repeat;
}
#publishInstagram{
margin-left: 3px;
margin-top: 12px;
position: absolute;
width: 36px;
height: 36px;
background-image: url('https://www.interago.com.br/App/Templates/default/img/write/instagram.svg');
background-size: contain;
background-position: center;
background-repeat: no-repeat;
}
#publishPoll{
margin-left: 3px;
margin-top: 12px;
position: absolute;
width: 32px;
height: 32px;
background-image: url('https://www.interago.com.br/App/Templates/default/img/write/poll.svg');
background-size: contain;
background-position: center;
background-repeat: no-repeat;
}
#publishFaq{
margin-left: -6px;
margin-top: 12px;
position: absolute;
width: 32px;
height: 32px;
background-image: url('https://www.interago.com.br/App/Templates/default/img/write/faq.svg');
background-size: contain;
background-position: center;
background-repeat: no-repeat;
filter: contrast(0);
}
.deleteImageGalleryComponent {
width: 16px;
height: 16px;
font-size: 12px;
padding: 3px;
font-weight: bold;
color: #cacaca;
position: absolute;
margin-left: 64px;
margin-top: -74px;
}
.disableBtn{
pointer-events: none;
cursor: auto;
filter: grayscale(1);
}
.writerButtons {
position: fixed;
z-index: 19;
bottom: 10px;
right: 10px;
}
.totalsCaracter{
position: absolute;
padding: 2px 5px;
border-radius: 3px;
margin-top: 2px;
font-size:11px;
}
.commandBar {
cursor: pointer;
position: absolute;
margin-top: -21px;
font-size: 10px;
background-color: #1e1d1d;
border-radius: 3px;
width: 20px;
height: 15px;
text-align: center;
}
.closeEl {
cursor:pointer;
transition:0.3s ease;
font-size:11px;
}
.commandBar:hover > .closeEl {
color: #3dc7ff;
}
.commandBar:hover{
background-color: #101010;
}
.resumeAutoSave .onoffswitch {
width: 45px;
}
.resumeAutoSave .onoffswitch-label {
height: 18px;
margin-bottom: -4px;
}
.resumeAutoSave .onoffswitch-label:before {
height: 18px;
width: 18px;
}
#listTagContent, #listSubTagContent{
width: 97%;
margin: 0px auto auto 5px;
position: absolute;
z-index: 1;
background-color: #222222f9;
border-radius: 5px;
}
.chooseNews{
margin: 0;
padding: 10px 10px;
cursor: pointer;
transition: 0.3s ease;
}
.chooseNews:hover{
background-color: #171717;
transition: 0.3s ease;
}
.listNewsContent div{
width: 97%;
margin: -10px auto auto 5px;
position: absolute;
z-index: 1;
background-color: #222222f9;
border-radius: 5px;
}
.chooseTag, .chooseSubTag{
margin: 0;
padding: 15px 10px;
cursor: pointer;
transition: 0.3s ease;
}
.chooseTag:hover, .chooseSubTag:hover{
background-color: #171717;
transition: 0.3s ease;
}
#tagContent{
background-color: #1d1d1d;
color: #10afef;
padding: 12px 15px;
font-size: 15px;
border-radius: 10px;
}
#closeChosenTag{
cursor: pointer;
font-size: 12px;
color: #d0d0d0;
float: right;
}
#closeChosenTag:hover {
color: #10afef;
}
.closeChosenSubtag{
cursor: pointer;
font-size: 12px;
color: #d0d0d0;
float: right;
}
.closeChosenSubtag:hover {
color: #10afef;
}
#boxPublishSubtag .form-control:focus {
border:0;
background-color: #3a3b3c;
outline: none;
}
#btnAddSubTag{
color: #d0d0d0;
background-color: #3a3b3c;
font-size: 22px;
border-radius: 10px;
padding: 6px 12px 0px 12px;
margin-left: -37px;
cursor: pointer;
height: 39px;
margin-top:2px;
}
#btnAddSubTag:hover {
color: #10afef;
}
.subtagsContent{
margin-right: 5px;
margin-top: 5px;
background-color: #1d1d1d;
color: #10afef;
padding: 11px 22px;
font-size: 15px;
/*width: fit-content;*/
border-radius: 10px;
}
#urlPreviewSearch{
font-size: 14px;
line-height: 1.3;
color: #bdc1c6;
font-style: normal;
margin: 10px 0;
}
#titlePreviewSearch{
font-weight: 600;
font-size: 20px;
color: #8ab4f8;
font-size: 20px;
font-weight: normal;
margin: 0 0px;
}
#subtitlePreviewSearch{
font-size: 14px;
color: #bdc1c6;
max-width:585px;
}
#titlePreviewSite{
font-size: 20px;
margin: 10px auto;
}
#subtitlePreviewSite{
font-weight: 500;
font-size: 16px;
color: #d0d0d0;
margin: 10px auto;
line-height: 1.4;
}
.chosePreview{
position:absolute;
width:22px;
}
#authorPreviewSite{
display: block;
color: #d0d0d0;
font-size: 14px;
margin: 10px auto;
}
#contentBlock{
text-align: center;
}
.imgPreviewSite{
margin: 0 15px;
}
.imagePreviewSiteContent {
margin: 5px auto;
max-width: 420px;
object-fit: cover;
}
.videoPreviewSiteContent {
margin: 5px auto;
}
.editorPreviewSiteContent {
margin: 5px auto;
text-align: left;
color: #d0d0d0;
font-size: 13px;
max-width: 445px;
}
.contentGeneral{
padding: 10px;
border: 1px dashed #515151;
max-height: 600px;
overflow-y: auto;
margin-top: 10px;
}
#subtagsPreviewSite{
font-size: 12px;
color: #d0d0d0;
}
.embed-responsive-item {
width:100%;
max-width:600px;
height:300px;
}
@media only screen and (max-width: 992px){
#generalPreview {
display:none;
}
.writerButtons {
bottom:auto;
top:10px;
background-color:#151515;
padding:10px;
border-radius:10px;
}
}
@media only screen and (max-height: 900px){
.contentGeneral{
max-height: 450px;
}
}
.form-check-input:checked {
background-color: #10afef;
border-color: #127fab;
}
.form-check-input[type=radio] {
border-radius: 50%;
}
.form-check .form-check-input {
float: left;
margin-left: -1.5em;
}
.form-check-input {
width: 1em;
height: 1em;
margin-top: 0.25em;
vertical-align: top;
background-color: #fff;
background-repeat: no-repeat;
background-position: center;
background-size: contain;
border: 1px solid rgba(0,0,0,.25);
-webkit-appearance: none;
-moz-appearance: none;
appearance: none;
}
.form-check-input:active {
filter: brightness(90%);
}
.form-check-input:focus {
border-color: #10afef;
outline: 0;
box-shadow: 0 0 0 0.25rem #10afef21;
}
/* end extensions */
/* start visit */
.callGraph {
background-position: left;
background-size: 32px;
background-repeat: no-repeat;
padding: 10px 2px 10px 35px;
font-size: 14px;
border-radius:30px;
position:relative;
overflow:hidden;
transition-duration:0.4;
}
.callGraph:after {
content: "";
background: #90cfee;
display: block;
position: absolute;
padding-top: 300%;
padding-left: 350%;
margin-left: -50px!important;
border-radius:100%;
margin-top: -120%;
opacity: 0;
transition: all 0.8s
}
.callGraph:active:after {
padding: 0;
margin: 0;
opacity: 1;
transition: 0s;
}
#graphTitleH>span {
margin-top:-20px;
}
.visitIconTitle {
width: 64px;
height: 64px;
background-position: center;
background-repeat: no-repeat;
background-size: 145%;
float:left;
margin-bottom: -20px;
background-size: 100%;
}
.visitsOrders { background-image: url('../img/extension/checkout.svg'); }
.visitsIntentionToBuy { background-image: url('../img/extension/basketIcon.svg'); }
.visitResume { background-image: url('../img/reports/pageviews.svg'); }
.visitUnique { background-image: url('../img/reports/unique.svg'); }
.visitWhatsapp { background-image: url('../img/reports/whatsapp.svg'); }
.visitMaps { background-image: url('../img/reports/maps.svg'); }
.visitPhone { background-image: url('../img/reports/phone.svg'); }
.visitMail { background-image: url('../img/reports/mail.svg'); }
.visitOrigin { background-image: url('../img/reports/google.svg'); }
.visitSocial { background-image: url('../img/reports/social.svg'); }
.visitChatGPT { background-image: url('../img/reports/reportChatGPT.svg'); }
.visitOtherAI { background-image: url('../img/reports/reportotherAI.svg'); }
.visitMobile { background-image: url('../img/reports/mobile.svg'); }
.visitRead { background-image: url('../img/reports/scroll.svg'); }
.visitEvents { background-image: url('../img/reports/click.svg'); }
.visitForm { background-image: url('../img/reports/form.svg'); }
.visitLeads { background-image: url('../img/reports/leads.svg'); }
.visitLink { background-image: url('../img/reports/link.svg'); }
.visitTime { background-image: url('../img/reports/time.svg'); }
.visitGrow { background-image: url('../img/reports/grow.svg'); }
.visitTopSkus { background-image: url('../img/reports/visitTopSkus.svg'); }
.visitTicketMedio { background-image: url('../img/reports/visitTicketMedio.svg'); }
.visitPedidosCancelados { background-image: url('../img/reports/visitPedidosCancelados.svg'); }
.visitOrdersByRegion { background-image: url('../img/reports/visitOrdersByRegion.svg'); }
.visitRecurringCustomers { background-image: url('../img/reports/visitRecurringCustomers.svg'); }
.visitCheckoutConversion { background-image: url('../img/reports/visitCheckoutConversion.svg'); }
.visitAbandonedCartValue { background-image: url('../img/reports/visitAbandonedCartValue.svg'); }
.visitsRevenue { background-image: url('../img/reports/receita_lojas.svg'); }
.visitsRevenueYear { background-image: url('../img/reports/receita_lojas.svg'); }
.articleViews { background-image: url('../img/reports/articleIcon.svg'); }
.articleQtd { background-image: url('../img/reports/articleAuthorIcon.svg'); }
.tagViews { background-image: url('../img/reports/tagIcon.svg'); }
.authorViews { background-image: url('../img/reports/authorIcon.svg'); }
.aiUsage { background-image: url('../img/reports/chatgptIcon.svg'); }
.visitEventsOrigin { background-image: url('../img/reports/origem_eventos.svg'); }
.visitLeadsYear { background-image: url('../img/reports/origem_contatos.svg'); }
.visitOrderOrigin { background-image: url('../img/reports/origem_pedidos.svg'); }
.callGraph.visitsRevenue, .callGraph.visitsRevenueYear {
background-size: 22px;
background-position: 5px;
}
.callGraph.articleViews, .callGraph.articleQtd, .callGraph.tagViews, .callGraph.authorViews, .callGraph.aiUsage {
background-size: 22px;
background-position: 5px;
}
.callGraph.visitTopSkus, .callGraph.visitTicketMedio, .callGraph.visitPedidosCancelados, .callGraph.visitOrdersByRegion, .callGraph.visitRecurringCustomers, .callGraph.visitCheckoutConversion, .callGraph.visitAbandonedCartValue {
background-size: 22px;
background-position: 8px;
}
.visitIconTitle.visitsRevenue, .visitIconTitle.visitsRevenueYear {
width: 38px;
margin-right: 10px;
}
.eventsIcon {
height: 80px;
width: 80px;
background-size: cover;
display: inline-block;
margin-top: -20px;
}
/* start visit modern UI (visit.main) */
.iVisitHeader {
display: flex;
align-items: center;
justify-content: space-between;
gap: 12px;
flex-wrap: wrap;
margin-bottom: 8px;
}
.iVisitHeaderMain {
display: flex;
align-items: center;
gap: 12px;
min-width: 0;
}
.iVisitConfigBtn {
white-space: nowrap;
}
.iVisitEmptyState {
text-align: center;
padding: 40px 16px;
max-width: 560px;
margin: 0 auto;
}
.iVisitEmptyIcon {
width: 120px;
height: 120px;
margin: 0 auto 16px;
background-size: contain;
background-repeat: no-repeat;
background-position: center;
}
.iVisitEmptyTitle {
margin: 0 0 8px;
}
.iVisitEmptyText {
margin: 0 0 16px;
opacity: .8;
}
.iVisitShell {
width: 100%;
}
.iVisitToolbar {
display: flex;
flex-direction: column;
align-items: stretch;
gap: 12px;
margin-bottom: 16px;
}
.iVisitSegments {
display: flex;
flex-wrap: wrap;
gap: 8px;
flex: 1 1 auto;
min-width: 0;
}
.iVisitChip {
display: inline-flex;
align-items: center;
border: 1px solid #454545;
background-color: #2b2b2b;
color: #e6e6e6;
border-radius: 20px;
padding: 6px 14px;
font-size: 12px;
font-weight: 500;
cursor: pointer;
transition: border-color .2s ease, color .2s ease, background-color .2s ease;
}
.iVisitChip:hover {
border-color: #3797f1;
}
.iVisitChipActive {
border-color: #3797f1;
color: #3797f1;
background-color: rgba(55, 151, 241, 0.08);
font-weight: 600;
}
.iVisitSearchWrap {
flex: 0 0 auto;
width: 100%;
max-width: 320px;
margin-left: auto;
}
.iVisitSearch {
width: 100%;
}
.iVisitBody {
display: grid;
grid-template-columns: 230px 1fr;
gap: 24px;
align-items: start;
}
.iVisitGrid {
display: flex;
flex-direction: column;
gap: 4px;
padding-right: 4px;
}
.iVisitGraphArea {
min-width: 0;
}
.iVisitCard.callGraph {
display: block;
width: 100%;
text-align: left;
min-height: auto;
padding: 9px 12px;
border-radius: 8px;
border: 1px solid transparent;
background: transparent;
background-image: none;
color: inherit;
font-family: inherit;
font-size: 13px;
line-height: 1.35;
white-space: normal;
overflow: visible;
position: static;
flex-shrink: 0;
cursor: pointer;
transition: background-color .15s ease, color .15s ease, border-color .15s ease;
}
.iVisitCard.callGraph::after {
display: none;
}
.iVisitCard.callGraph:hover {
background-color: rgba(55, 151, 241, 0.08);
color: #3797f1;
}
.iVisitCard.iVisitCardActive {
background-color: rgba(55, 151, 241, 0.12);
border-color: #3797f1;
color: #3797f1;
font-weight: 600;
}
.iVisitGraphTitle {
font-size: 22px;
font-weight: 600;
letter-spacing: -0.01em;
margin: 0 0 4px;
line-height: 1.2;
}
/* area de exibicao do grafico + conteudo complementar */
.iVisitGraphArea #graphTools {
margin-bottom: 16px;
}
.iVisitGraphArea #graphExibition {
position: relative;
min-height: 320px;
margin: 8px 0 4px;
display: flex;
flex-direction: column;
gap: 20px;
}
.iVisitChartSlot {
position: relative;
width: 100%;
height: 320px;
max-height: 420px;
}
.iVisitChartSlot--compact {
height: 280px;
max-height: 280px;
}
.iVisitChartSlot canvas {
display: block;
width: 100% !important;
height: 100% !important;
max-height: 100%;
}
.iVisitGraphArea #graphExibition > canvas {
display: block;
width: 100% !important;
height: 320px !important;
max-height: 320px;
}
#graphMoreInfo {
font-size: 13px;
color: rgba(255, 255, 255, 0.75);
}
#graphMoreInfo h2 {
font-size: 15px;
font-weight: 600;
letter-spacing: -0.01em;
margin: 28px 0 12px;
color: #ffffff;
}
#graphMoreInfo h3 {
font-weight: 600;
}
#graphMoreInfo .row {
align-items: center;
}
#graphMoreInfo hr {
border: 0;
border-top: 1px solid rgba(255, 255, 255, 0.08);
margin: 8px 0;
}
@media (max-width: 768px) {
.iVisitBody {
grid-template-columns: 1fr;
}
}
/* end visit modern UI */
/* end visit */
/* start API modern UI (api.main) */
.iApiHeader {
display: flex;
align-items: center;
justify-content: space-between;
gap: 12px;
flex-wrap: wrap;
margin-bottom: 8px;
}
.iApiHeaderMain {
display: flex;
align-items: center;
gap: 12px;
min-width: 0;
}
.iApiToolbar {
display: flex;
align-items: center;
justify-content: space-between;
gap: 12px;
flex-wrap: wrap;
margin-bottom: 16px;
}
.iApiSegments {
display: flex;
flex-wrap: wrap;
gap: 8px;
}
.iApiChip {
display: inline-flex;
align-items: center;
border: 1px solid #454545;
background-color: #2b2b2b;
color: #e6e6e6;
border-radius: 20px;
padding: 6px 14px;
font-size: 12px;
font-weight: 500;
cursor: pointer;
transition: border-color .2s ease, color .2s ease, background-color .2s ease;
}
.iApiChip:hover {
border-color: #3797f1;
}
.iApiChipActive {
border-color: #3797f1;
color: #3797f1;
background-color: rgba(55, 151, 241, 0.08);
font-weight: 600;
}
.iApiChipUnavailable {
opacity: .55;
}
.iApiSearchWrap {
flex: 1 1 220px;
max-width: 320px;
}
.iApiSearch {
width: 100%;
}
.iApiBody {
display: grid;
grid-template-columns: 240px 1fr;
gap: 24px;
align-items: start;
}
.iApiMethodGrid {
display: flex;
flex-direction: column;
gap: 4px;
padding-right: 4px;
max-height: min(70vh, 640px);
overflow-y: auto;
}
.iApiMethodCard {
display: block;
width: 100%;
text-align: left;
min-height: auto;
padding: 9px 12px;
border-radius: 8px;
border: 1px solid transparent;
background: transparent;
background-image: none;
color: inherit;
font-family: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, monospace;
font-size: 12px;
line-height: 1.35;
white-space: normal;
overflow: visible;
cursor: pointer;
transition: background-color .15s ease, color .15s ease, border-color .15s ease;
}
.iApiMethodCard:hover {
background-color: rgba(55, 151, 241, 0.08);
color: #3797f1;
}
.iApiMethodCardActive {
background-color: rgba(55, 151, 241, 0.12);
border-color: #3797f1;
color: #3797f1;
font-weight: 600;
}
.iApiMethodArea {
min-width: 0;
}
.iApiMethodTitle {
font-size: 20px;
font-weight: 600;
line-height: 1.25;
}
.iApiMethodDetailHead {
display: flex;
align-items: center;
gap: 10px;
flex-wrap: wrap;
}
.iApiMethodBadge {
display: inline-flex;
align-items: center;
padding: 2px 8px;
border-radius: 6px;
font-size: 11px;
font-weight: 700;
letter-spacing: .04em;
background: rgba(55, 151, 241, 0.15);
color: #3797f1;
}
.iApiMethodDesc {
opacity: .92;
}
.iApiMethodEmptyHint {
opacity: .75;
}
.iApiMethodToolbar {
margin-top: 4px;
}
.iApiMethodCount {
opacity: .75;
}
.iApiModuleMeta {
margin-bottom: 12px;
padding-bottom: 12px;
border-bottom: 1px solid rgba(255, 255, 255, 0.08);
}
.iApiMethodDivider {
border: 0;
border-top: 1px solid rgba(255, 255, 255, 0.08);
margin: 16px 0;
}
.iApiMethodActions {
margin-top: 12px;
}
.iApiMethodTestPanel {
margin-top: 4px;
}
.apiMethodCurl,
.apiMethodResult {
background: #1a1a1a;
border: 1px solid #333;
border-radius: 8px;
padding: 12px;
font-size: 12px;
line-height: 1.45;
overflow-x: auto;
white-space: pre-wrap;
word-break: break-word;
color: #d8d8d8;
}
.iApiGeneralPanel {
max-width: 760px;
}
.iApiGeneralIntro {
margin-bottom: 16px;
padding-bottom: 16px;
border-bottom: 1px solid rgba(255, 255, 255, 0.08);
}
.iApiGeneralTitle {
font-size: 20px;
font-weight: 600;
}
.iApiGeneralSection {
margin-bottom: 16px;
padding-bottom: 16px;
border-bottom: 1px solid rgba(255, 255, 255, 0.08);
}
.iApiGeneralRow {
display: flex;
align-items: center;
justify-content: space-between;
gap: 16px;
flex-wrap: wrap;
}
.iApiGeneralLabel {
font-weight: 600;
}
.iApiGeneralTokenRow {
display: grid;
grid-template-columns: 1fr auto;
gap: 12px;
align-items: end;
}
.iApiGeneralTokenField {
min-width: 0;
}
.iApiGeneralNotes {
margin-bottom: 16px;
opacity: .9;
}
.iApiGeneralActions {
display: flex;
flex-wrap: wrap;
gap: 8px;
}
.iApiGeneralAlert {
margin-bottom: 16px;
padding: 12px;
border-radius: 8px;
}
.iApiEmptyState {
text-align: center;
padding: 40px 16px;
max-width: 560px;
margin: 0 auto;
}
.iApiEmptyIcon {
font-size: 56px;
line-height: 1;
margin-bottom: 12px;
}
.iApiEmptyTitle {
margin-bottom: 8px;
}
.iApiEmptyText {
opacity: .8;
}
@media (max-width: 768px) {
.iApiBody {
grid-template-columns: 1fr;
}
.iApiMethodGrid {
max-height: none;
flex-direction: row;
flex-wrap: wrap;
}
.iApiMethodCard {
width: auto;
flex: 0 1 auto;
}
.iApiGeneralTokenRow {
grid-template-columns: 1fr;
}
}
/* end API modern UI */
/* start Routines modern UI (RoutinesCheck.main) */
.iRoutineHeader {
display: flex;
align-items: center;
justify-content: space-between;
gap: 12px;
flex-wrap: wrap;
margin-bottom: 8px;
}
.iRoutineHeaderMain {
display: flex;
align-items: center;
gap: 12px;
min-width: 0;
}
.iRoutineScreenTitle {
font-size: 22px;
font-weight: 600;
}
.iRoutineToolbar {
display: flex;
align-items: center;
justify-content: space-between;
gap: 12px;
flex-wrap: wrap;
margin-bottom: 16px;
}
.iRoutineNavCount {
opacity: .75;
}
.iRoutineSearchWrap {
flex: 1 1 220px;
max-width: 320px;
}
.iRoutineSearch {
width: 100%;
}
.iRoutineBody {
display: grid;
grid-template-columns: 240px 1fr;
gap: 24px;
align-items: start;
}
.iRoutineNav {
display: flex;
flex-direction: column;
gap: 4px;
padding-right: 4px;
max-height: min(70vh, 640px);
overflow-y: auto;
}
.iRoutineNavCard {
display: block;
width: 100%;
text-align: left;
min-height: auto;
padding: 9px 12px;
border-radius: 8px;
border: 1px solid transparent;
background: transparent;
background-image: none;
color: inherit;
font-family: inherit;
font-size: 13px;
line-height: 1.35;
white-space: normal;
overflow: visible;
text-decoration: none;
cursor: pointer;
transition: background-color .15s ease, color .15s ease, border-color .15s ease;
}
.iRoutineNavCard::after {
display: none;
}
.iRoutineNavCard:hover {
background-color: rgba(55, 151, 241, 0.08);
color: #3797f1;
}
.iRoutineNavCardActive {
background-color: rgba(55, 151, 241, 0.12);
border-color: #3797f1;
color: #3797f1;
font-weight: 600;
}
.iRoutineArea {
min-width: 0;
}
.iRoutineAreaHead {
margin-bottom: 12px;
}
.iRoutinePageContent {
min-width: 0;
}
.iRoutinePileMount {
margin-bottom: 16px;
}
.iRoutinePileCard,
.iRoutinePileEmpty {
margin-bottom: 16px;
padding: 12px 14px;
border-radius: 10px;
background: rgba(255, 255, 255, 0.03);
border: 1px solid rgba(255, 255, 255, 0.08);
}
.iRoutinePileHead {
display: flex;
justify-content: space-between;
align-items: flex-start;
gap: 12px;
flex-wrap: wrap;
margin-bottom: 8px;
}
.iRoutinePileTitle {
font-weight: 600;
}
.iRoutinePileLegend {
font-size: 13px;
opacity: .9;
}
.iRoutinePileLegendOk { color: #4caf50; margin-right: 8px; }
.iRoutinePileLegendPending { color: #ff9800; margin-right: 8px; }
.iRoutinePileLegendError { color: #f44336; }
.iRoutinePileTrack {
background: #ececec;
border-radius: 6px;
height: 18px;
overflow: hidden;
display: flex;
}
.iRoutinePileSegment { height: 100%; }
.iRoutinePileSegmentOk { background: #4caf50; }
.iRoutinePileSegmentPending { background: #ff9800; }
.iRoutinePileSegmentError { background: #f44336; }
.iRoutinePileMeta,
.iRoutinePileEta {
font-size: 12px;
opacity: .75;
margin-top: 6px;
}
.iRoutineSectionHead {
margin-bottom: 12px;
}
.iRoutineSectionTitle {
font-size: 18px;
font-weight: 600;
}
.iRoutineInfoBlock {
margin-bottom: 12px;
}
.iRoutineHubIntro {
opacity: .88;
}
.iRoutineHubCards {
display: grid;
grid-template-columns: repeat(auto-fill, minmax(240px, 1fr));
gap: 12px;
}
.iRoutineHubCard {
display: flex;
align-items: flex-start;
gap: 12px;
padding: 14px;
border-radius: 10px;
border: 1px solid rgba(255, 255, 255, 0.08);
background: rgba(255, 255, 255, 0.02);
text-decoration: none;
color: inherit;
transition: border-color .2s ease, background-color .2s ease, color .2s ease;
}
.iRoutineHubCard:hover {
border-color: #3797f1;
background: rgba(55, 151, 241, 0.08);
color: #3797f1;
}
.iRoutineHubCardIcon {
font-size: 24px;
line-height: 1;
flex-shrink: 0;
}
.iRoutineHubCardBody {
display: flex;
flex-direction: column;
gap: 4px;
min-width: 0;
}
.iRoutineHubCardLabel {
font-weight: 600;
font-size: 14px;
}
.iRoutineHubCardDesc {
font-size: 12px;
opacity: .8;
line-height: 1.4;
}
.iRoutineProgressList {
margin-bottom: 16px;
}
.iRoutineProgressItem {
display: flex;
justify-content: space-between;
align-items: center;
gap: 12px;
padding: 10px 0;
border-bottom: 1px solid rgba(255, 255, 255, 0.08);
flex-wrap: wrap;
}
@media (max-width: 768px) {
.iRoutineBody {
grid-template-columns: 1fr;
}
.iRoutineNav {
max-height: none;
flex-direction: row;
flex-wrap: wrap;
}
.iRoutineNavCard {
width: auto;
flex: 0 1 auto;
}
}
/* end Routines modern UI */
/* ----- default of MEDIA window imedia ----- */
.mediaItemContainer {
padding:20px;
border:3px solid #606060;
margin:5px;
border-radius:10px;
transition:0.3s ease;
}
.mediaItemContainer:hover {
border:3px solid #10afef;
}
.mediaItemContainerChosen {
border:3px solid #99e83d !important;
}
.mediaItemContainerChose:hover {
border:3px solid #99e83d !important;
}
.adjustOverlay {
position: fixed;
top: 0;
right: 0;
bottom: 0;
left: 0;
cursor: pointer;
background-color:#000000cc;
z-index:70;
width:400%;
}
.adjustContent {
transition: top .25s ease;
position: fixed;
top: 0%;
right: 0;
bottom: 0;
left: 0;
width: 80%;
margin: auto;
overflow: auto;
height: 90%;
background-color: #2b2b2b;
box-shadow: 0 2px 2px black;
z-index:80;
}
/* imedia icons --*/
.mediaIcon {
background-size:contain;
width:48px;
height:48px;
background-repeat:no-repeat;
margin:0 auto;
}
.mediaUploadIcon {
background-image: url('../img/file/upload.svg');
}
.mediaNewFolderIcon {
background-image: url('../img/file/newFolder.svg');
}
.mediaStorageIcon {
background-image: url('../img/file/storage.svg');
float:left;
width:24px;
height:24px;
}
.folderMedia {
background-image: url('../img/file/folder.svg');
width:64px;
height:64px;
background-size:contain;
margin:0 auto;
}
.fileMedia {
width:64px;
height:64px;
display:flex;
justify-content:center;
align-items:center;
margin:0 auto;
background-size:contain;
background-repeat:no-repeat;
}
.fileMediaName {
overflow: hidden;
text-overflow: ellipsis;
display: -webkit-box;
-webkit-line-clamp: 2;
-webkit-box-orient: vertical;
font-size: 10px;
color: #a2a2a2;
margin-top: 5px;
height: 29px;
word-break:break-all;
}
/* end imedia icons --*/
.listLink {
background-color: #3c3c3c;
display: inline;
padding: 10px 8px;
border-radius: 50%;
font-size: 13px;
border: 3px solid #2b2b2b;
transition:0.3s ease;
cursor:pointer;
}
.listLink:hover {
border:3px solid #3797f1;
}
.mediatemOpt {
margin-top:15px;
}
.listLink p {
color: #10afef;
overflow: hidden;
text-overflow: ellipsis;
display: -webkit-box;
-webkit-line-clamp: 2;
-webkit-box-orient: vertical;
font-size: 12px;
margin-top: 5px;
height: 30px;
word-break:break-all;
}
.fileMediaSize {
position: absolute;
font-size: 10px;
background-color: #474747;
padding: 2px 6px;
margin-top: -65px;
margin-left:-100px;
border-radius: 2px;
box-shadow: 0 1px 2px black;
}
.fileMediaExt {
position: absolute;
font-size: 10px;
background-color: #474747;
padding: 2px 6px;
margin-top: -65px;
margin-left:-20px;
border-radius: 2px;
box-shadow: 0 1px 2px black;
}
.fileMediaDimension {
position: absolute;
font-size: 10px;
background-color: #474747;
padding: 2px 6px;
margin-top: -65px;
margin-left:70px;
border-radius: 2px;
box-shadow: 0 1px 2px black;
}
.fileMediaDelete {
background-image: url('../img/general/trash.svg');
background-size: 20px;
background-position: center;
background-repeat: no-repeat;
cursor: pointer;
display: inline-block;
height: 20px;
width: 20px;
margin-bottom: -6px;
}
.fileMediaAdjust {
background-image: url('../img/general/adjust.svg');
background-size: 20px;
background-position: center;
background-repeat: no-repeat;
cursor: pointer;
display: inline-block;
height: 20px;
width: 20px;
margin-bottom: -6px;
}
.breadCrumbItem {
margin-left: 5px;
padding: 5px 10px;
font-size: 12px;
background-color: #454343;
line-height: 20px;
border-radius: 10px;
margin-top: 2px;
white-space: nowrap;
}
#breadCrumbContent {
padding:2px 0;
}
#mediaWindow {
position: fixed;
z-index: 60;
width: calc(100% - 40px);
height:100%;
margin: 0;
background-color: #2f2f2f;
box-shadow: 0 10px 10px black;
padding: 10px;
bottom:0;
overflow-y: auto;
scrollbar-width: thin;
-webkit-animation: slide-in-left 0.5s cubic-bezier(0.250, 0.460, 0.450, 0.940) both;
animation: slide-in-left 0.5s cubic-bezier(0.250, 0.460, 0.450, 0.940) both;
}
#newFolderFormContent {
transition:0.3s ease;
}
#mediaWindowCallNewFolder {
color:white;
}
#mediaWindowCallNewFolder:disabled {
color: #666;
border:1px solid #10afef;
}
.mediaWindowHeader {
text-align:right;
margin-bottom:30px;
}
#mediaWindowTitle {
margin:5px;
text-align:left;
}
.closeMediaWindowOut {
height:100%;
-webkit-animation: slide-out-left 0.5s cubic-bezier(0.550, 0.085, 0.680, 0.530) both;
animation: slide-out-left 0.5s cubic-bezier(0.550, 0.085, 0.680, 0.530) both;
}
#progressBar {
width: calc(100% - 120px);
height: 10px;
background-color: #333;
box-shadow: inset 0 -8px 13px #242424, 0 3px 3px #060606;
position:relative;
margin-top:-10px;
z-index:-1;
}
.mediaPreviewUploadRow {
background-color: #272727;
padding: 10px 0;
margin: 5px 0px;
-webkit-animation: slide-in-left 0.5s cubic-bezier(0.250, 0.460, 0.450, 0.940) both;
animation: slide-in-left 0.5s cubic-bezier(0.250, 0.460, 0.450, 0.940) both;
}
.mediaPreviewUploadImg {
width:100%;
max-width:64px;
}
.mediaPreviewCustomIcon {
width:64px;
height:64px;
margin:0 auto;
background-size:100%;
}
.fileDescription p {
font-size: 12px;
padding: 0;
margin: 0;
line-height: 17px;
color: #aeaeae;
}
.mediaProgressBar {
height: 10px;
position: relative;
width: 0px;
background-color: #4a9335;
box-shadow: inset 0 6px 5px #4ebc40, 0 2px 2px #222;
}
#mediaStorageSize {
font-size:12px;
}
/* ----------------------------------------------
* Generated by Animista on 2021-8-19 11:7:44
* Licensed under FreeBSD License.
* See http://animista.net/license for more info.
* w: http://animista.net, t: @cssanimista
* ---------------------------------------------- */
/**
* ----------------------------------------
* animation slide-in-left
* ----------------------------------------
*/
@-webkit-keyframes slide-in-left {
0% {
-webkit-transform: translateX(-1000px);
transform: translateX(-1000px);
opacity: 1;
}
100% {
-webkit-transform: translateX(0);
transform: translateX(0);
opacity: 1;
}
}
@keyframes slide-in-left {
0% {
-webkit-transform: translateX(-1000px);
transform: translateX(-1000px);
opacity: 1;
}
100% {
-webkit-transform: translateX(0);
transform: translateX(0);
opacity: 1;
}
}
/* ----------------------------------------------
* Generated by Animista on 2021-8-19 11:8:41
* Licensed under FreeBSD License.
* See http://animista.net/license for more info.
* w: http://animista.net, t: @cssanimista
* ---------------------------------------------- */
/**
* ----------------------------------------
* animation slide-out-left
* ----------------------------------------
*/
@-webkit-keyframes slide-out-left {
0% {
-webkit-transform: translateX(0);
transform: translateX(0);
opacity: 1;
}
100% {
-webkit-transform: translateX(-1000px);
transform: translateX(-1000px);
opacity: 1;
}
}
@keyframes slide-out-left {
0% {
-webkit-transform: translateX(0);
transform: translateX(0);
opacity: 1;
}
100% {
-webkit-transform: translateX(-1000px);
transform: translateX(-1000px);
opacity: 1;
}
}
/* ----------------------------------------------
* Generated by Animista on 2022-11-30 9:6:17
* Licensed under FreeBSD License.
* See http://animista.net/license for more info.
* w: http://animista.net, t: @cssanimista
* ---------------------------------------------- */
/**
* ----------------------------------------
* animation shake-horizontal
* ----------------------------------------
*/
@-webkit-keyframes shake-horizontal {
0%,
100% {
-webkit-transform: translateX(0);
transform: translateX(0);
}
10%,
30%,
50%,
70% {
-webkit-transform: translateX(-3px);
transform: translateX(-3px);
}
20%,
40%,
60% {
-webkit-transform: translateX(3px);
transform: translateX(3px);
}
80% {
-webkit-transform: translateX(2px);
transform: translateX(2px);
}
90% {
-webkit-transform: translateX(-2px);
transform: translateX(-2px);
}
}
@keyframes shake-horizontal {
0%,
100% {
-webkit-transform: translateX(0);
transform: translateX(0);
}
10%,
30%,
50%,
70% {
-webkit-transform: translateX(-3px);
transform: translateX(-3px);
}
20%,
40%,
60% {
-webkit-transform: translateX(3px);
transform: translateX(3px);
}
80% {
-webkit-transform: translateX(2px);
transform: translateX(2px);
}
90% {
-webkit-transform: translateX(-2px);
transform: translateX(-2px);
}
}
.shakeHorizontal {
-webkit-animation: shake-horizontal 4s infinite both;
animation: shake-horizontal 4s infinite both;
}
/*cropper specific css */
.cropper-container{direction:ltr;font-size:0;line-height:0;position:relative;-ms-touch-action:none;touch-action:none;-webkit-user-select:none;-moz-user-select:none;-ms-user-select:none;user-select:none}.cropper-container img{image-orientation:0deg;display:block;height:100%;max-height:none!important;max-width:none!important;min-height:0!important;min-width:0!important;width:100%}.cropper-canvas,.cropper-crop-box,.cropper-drag-box,.cropper-modal,.cropper-wrap-box{bottom:0;left:0;position:absolute;right:0;top:0}.cropper-canvas,.cropper-wrap-box{overflow:hidden}.cropper-drag-box{background-color:#fff;opacity:0}.cropper-modal{background-color:#000;opacity:.5}.cropper-view-box{display:block;height:100%;outline:1px solid #39f;outline-color:rgba(51,153,255,.75);overflow:hidden;width:100%}.cropper-dashed{border:0 dashed #eee;display:block;opacity:.5;position:absolute}.cropper-dashed.dashed-h{border-bottom-width:1px;border-top-width:1px;height:33.33333%;left:0;top:33.33333%;width:100%}.cropper-dashed.dashed-v{border-left-width:1px;border-right-width:1px;height:100%;left:33.33333%;top:0;width:33.33333%}.cropper-center{display:block;height:0;left:50%;opacity:.75;position:absolute;top:50%;width:0}.cropper-center:after,.cropper-center:before{background-color:#eee;content:" ";display:block;position:absolute}.cropper-center:before{height:1px;left:-3px;top:0;width:7px}.cropper-center:after{height:7px;left:0;top:-3px;width:1px}.cropper-face,.cropper-line,.cropper-point{display:block;height:100%;opacity:.1;position:absolute;width:100%}.cropper-face{background-color:#fff;left:0;top:0}.cropper-line{background-color:#39f}.cropper-line.line-e{cursor:ew-resize;right:-3px;top:0;width:5px}.cropper-line.line-n{cursor:ns-resize;height:5px;left:0;top:-3px}.cropper-line.line-w{cursor:ew-resize;left:-3px;top:0;width:5px}.cropper-line.line-s{bottom:-3px;cursor:ns-resize;height:5px;left:0}.cropper-point{background-color:#39f;height:5px;opacity:.75;width:5px}.cropper-point.point-e{cursor:ew-resize;margin-top:-3px;right:-3px;top:50%}.cropper-point.point-n{cursor:ns-resize;left:50%;margin-left:-3px;top:-3px}.cropper-point.point-w{cursor:ew-resize;left:-3px;margin-top:-3px;top:50%}.cropper-point.point-s{bottom:-3px;cursor:s-resize;left:50%;margin-left:-3px}.cropper-point.point-ne{cursor:nesw-resize;right:-3px;top:-3px}.cropper-point.point-nw{cursor:nwse-resize;left:-3px;top:-3px}.cropper-point.point-sw{bottom:-3px;cursor:nesw-resize;left:-3px}.cropper-point.point-se{bottom:-3px;cursor:nwse-resize;height:20px;opacity:1;right:-3px;width:20px}@media (min-width:768px){.cropper-point.point-se{height:15px;width:15px}}@media (min-width:992px){.cropper-point.point-se{height:10px;width:10px}}@media (min-width:1200px){.cropper-point.point-se{height:5px;opacity:.75;width:5px}}.cropper-point.point-se:before{background-color:#39f;bottom:-50%;content:" ";display:block;height:200%;opacity:0;position:absolute;right:-50%;width:200%}.cropper-invisible{opacity:0}.cropper-bg{background-image:url("data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABAAAAAQAQMAAAAlPW0iAAAAA3NCSVQICAjb4U/gAAAABlBMVEXMzMz////TjRV2AAAACXBIWXMAAArrAAAK6wGCiw1aAAAAHHRFWHRTb2Z0d2FyZQBBZG9iZSBGaXJld29ya3MgQ1M26LyyjAAAABFJREFUCJlj+M/AgBVhF/0PAH6/D/HkDxOGAAAAAElFTkSuQmCC")}.cropper-hide{display:block;height:0;position:absolute;width:0}.cropper-hidden{display:none!important}.cropper-move{cursor:move}.cropper-crop{cursor:crosshair}.cropper-disabled .cropper-drag-box,.cropper-disabled .cropper-face,.cropper-disabled .cropper-line,.cropper-disabled .cropper-point{cursor:not-allowed}
/*cropper image editor svg´s */
#openCropperEditor {
height: 64px;
width: 64px;
background-size: 80%;
background-color: #161616;
background-position: center;
border-radius: 50%;
background-repeat: no-repeat;
box-shadow: 0 2px 2px black;
margin-left: 10px;
margin-top: -50px;
position: relative;
cursor: pointer;
transition:0.3s ease;
}
#openCropperEditor:hover {
background-color:#026786;
box-shadow:none;
}
#cropperOptionButtons {
display: flex;
align-items: center;
justify-content: center;
margin-top: -5px;
position:relative;
}
.cropperButton {
background-position: center;
background-repeat: no-repeat;
height: 32px;
width: 32px;
background-size: 90%;
cursor: pointer;
background-color: #242424;
margin: 2px;
border-radius: 10px;
box-shadow: 0 2px 2px black;
transition:0.3s ease;
}
.cropperButton:hover {
background-color:#026786;
box-shadow:none;
}
.editImageCropper {background-image: url('../img/cropperjs/edit.svg');}
.turnLeft {background-image: url('../img/cropperjs/turnLeft.svg');}
.turnRight {background-image: url('../img/cropperjs/turnRight.svg');}
.flipH {background-image: url('../img/cropperjs/flipH.svg');}
.flipV {background-image: url('../img/cropperjs/flipV.svg');}
.aspect169 {background-image: url('../img/cropperjs/aspect169.svg');}
.aspect43 {background-image: url('../img/cropperjs/aspect43.svg');}
.aspect11 {background-image: url('../img/cropperjs/aspect11.svg');}
.aspect916 {background-image: url('../img/cropperjs/aspect916.svg');}
.zoomIn {background-image: url('../img/cropperjs/zoomIn.svg');}
.zoomOut {background-image: url('../img/cropperjs/zoomOut.svg');}
.modify {background-image: url('../img/cropperjs/modify.svg');}
/* end of cropper specific css */
/* =========================================================
iMedia — modernização (dark)
Espaçamento e usabilidade inspirados no Stripe,
usando a paleta do projeto (#3797f1 / cinzas escuros).
Sobrescreve os estilos legados da janela de Mídias.
========================================================= */
#mediaWindow {
width: calc(100% - 40px);
left: 0;
padding: 0;
background-color: #1f1f1f;
box-shadow: 0 10px 50px rgba(0, 0, 0, 0.55);
scrollbar-width: thin;
-webkit-animation: slide-in-left 0.45s cubic-bezier(0.25, 0.46, 0.45, 0.94) both;
animation: slide-in-left 0.45s cubic-bezier(0.25, 0.46, 0.45, 0.94) both;
}
.mediaWindowHeader {
display: flex;
flex-direction: row-reverse;
justify-content: space-between;
align-items: center;
text-align: left;
margin: 0;
padding: 16px 28px;
border-bottom: 1px solid #303030;
position: sticky;
top: 0;
background: rgba(31, 31, 31, 0.92);
backdrop-filter: blur(8px);
z-index: 5;
}
#mediaWindowTitle {
margin: 0;
text-align: left;
font-size: 19px;
font-weight: 600;
color: #ffffff;
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
}
.mediaWindowHeader .closeModal {
width: 32px;
height: 32px;
border-radius: 9px;
background-color: #2b2b2b;
background-size: 14px;
border: 1px solid #3a3b3c;
transition: background-color 0.2s ease, border-color 0.2s ease;
}
.mediaWindowHeader .closeModal:hover {
background-color: #333435;
border-color: #3797f1;
}
#mediaWindowContent {
max-width: 1100px;
margin: 0 auto;
padding: 26px 28px 80px;
}
/* ---- Toolbar (enviar / nova pasta / sincronizar) ---- */
.iMediaToolbar {
display: flex;
gap: 16px;
align-items: stretch;
flex-wrap: wrap;
}
.iMediaUploadZone {
flex: 1 1 320px;
display: flex;
align-items: center;
gap: 16px;
padding: 20px 24px;
border: 2px dashed #3d3d3d;
border-radius: 14px;
background-color: #262626;
cursor: pointer;
transition: border-color 0.2s ease, background-color 0.2s ease;
}
.iMediaUploadZone:hover,
.iMediaUploadZone.iMediaDragOver {
border-color: #3797f1;
background-color: rgba(55, 151, 241, 0.08);
}
.iMediaUploadZoneIcon {
width: 38px;
height: 38px;
flex: 0 0 auto;
margin: 0;
opacity: 0.92;
}
.iMediaUploadZoneText {
display: flex;
flex-direction: column;
gap: 2px;
text-align: left;
}
.iMediaUploadZoneText strong {
font-size: 15px;
font-weight: 600;
color: #ffffff;
}
.iMediaUploadZoneText span {
font-size: 12.5px;
color: #969696;
}
.iMediaToolbarActions {
display: flex;
gap: 12px;
align-items: stretch;
}
.iMediaToolBtn {
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
gap: 7px;
min-width: 104px;
padding: 14px 18px;
border: 1px solid #3a3b3c;
border-radius: 14px;
background-color: #2b2b2b;
color: #d0d0d0;
font-size: 12.5px;
font-weight: 500;
cursor: pointer;
}
.iMediaToolBtn:hover:not(:disabled) {
border-color: #3797f1;
background-color: #2f2f2f;
color: #ffffff;
}
.iMediaToolBtn:disabled {
opacity: 0.5;
cursor: default;
}
.iMediaToolBtn .mediaIcon {
width: 24px;
height: 24px;
margin: 0;
}
.iMediaSyncIcon {
background-image: url('../img/general/refresh.svg');
}
/* ---- Formulário de nova pasta ---- */
.iMediaNewFolderForm {
grid-template-columns: 1fr auto;
gap: 12px;
align-items: center;
margin: 16px 0 0;
padding: 16px;
background-color: #262626;
border: 1px solid #303030;
border-radius: 12px;
}
.iMediaNewFolderField .form-group {
margin-bottom: 0;
}
.iMediaNewFolderSubmit .button {
margin: 0;
}
/* ---- Barra de caminho (breadcrumb + uso + atualizar) ---- */
.iMediaPathBar {
display: flex;
align-items: center;
gap: 12px;
margin: 24px 0 20px;
padding: 9px 12px;
background-color: #262626;
border: 1px solid #303030;
border-radius: 12px;
}
#breadCrumbContent {
flex: 1 1 auto;
min-width: 0;
overflow-x: auto;
padding: 0;
scrollbar-width: none;
}
#breadCrumbContent::-webkit-scrollbar {
display: none;
}
#breadCrumbContent p {
margin: 0;
display: flex;
align-items: center;
gap: 2px;
white-space: nowrap;
}
.breadCrumbItem {
margin: 0;
padding: 6px 11px;
font-size: 12.5px;
line-height: 18px;
background-color: transparent;
color: #a2a2a2;
border-radius: 8px;
white-space: nowrap;
box-shadow: none;
transition: background-color 0.2s ease, color 0.2s ease;
}
.breadCrumbItem:hover {
background-color: #333435;
color: #ffffff;
}
.iMediaPathBarMeta {
display: flex;
align-items: center;
gap: 10px;
flex: 0 0 auto;
}
.iMediaStoragePill {
display: flex;
align-items: center;
gap: 7px;
padding: 6px 12px;
border-radius: 20px;
background-color: #2b2b2b;
border: 1px solid #3a3b3c;
}
.iMediaStoragePill .mediaStorageIcon {
float: none;
width: 16px;
height: 16px;
margin: 0;
opacity: 0.85;
}
#mediaStorageSize {
font-size: 12px;
color: #cfcfcf;
margin: 0;
font-family: system-ui, -apple-system, "Segoe UI", Roboto, Arial, sans-serif;
font-variant-numeric: tabular-nums;
}
.iMediaRefreshBtn {
flex: 0 0 auto;
width: 34px;
height: 34px;
border-radius: 9px;
border: 1px solid #3a3b3c;
background: #2b2b2b url('../img/general/refresh.svg') center / 15px no-repeat;
display: inline-block;
cursor: pointer;
transition: background-color 0.2s ease, border-color 0.2s ease, transform 0.45s ease;
}
.iMediaRefreshBtn:hover {
border-color: #3797f1;
background-color: #2f2f2f;
}
.iMediaRefreshBtn:active {
transform: rotate(180deg);
}
/* ---- Busca ---- */
.iMediaSearchBar {
margin: 4px 0 18px;
}
.iMediaSearchBar .form-control {
max-width: 380px;
margin-top: 0;
}
/* ---- Grid de arquivos e pastas ---- */
.iMediaGrid {
display: grid;
grid-template-columns: repeat(auto-fill, minmax(150px, 1fr));
gap: 16px;
}
.mediaItemRow {
display: grid;
grid-template-rows: 1fr auto;
gap: 8px;
margin: 0;
}
.iMediaCard {
position: relative;
display: flex;
flex-direction: column;
gap: 9px;
padding: 14px;
background-color: #2b2b2b;
border: 1px solid #353535;
border-radius: 12px;
cursor: pointer;
text-align: center;
transition: border-color 0.2s ease, background-color 0.2s ease, transform 0.15s ease, box-shadow 0.2s ease;
}
.iMediaCard:hover {
border-color: #3797f1;
background-color: #2f2f2f;
box-shadow: 0 6px 18px rgba(0, 0, 0, 0.35);
transform: translateY(-2px);
}
/* feedback de "link copiado" reaproveita o estado legado .mediaItemContainerChosen */
.mediaItemContainer {
padding: 14px;
margin: 0;
border: 1px solid #353535;
}
.mediaItemContainer:hover {
border-width: 1px;
}
.mediaItemContainerChosen,
.mediaItemContainerChosen:hover {
border-color: #99e83d !important;
box-shadow: 0 0 0 1px rgba(153, 232, 61, 0.55), 0 6px 18px rgba(153, 232, 61, 0.15) !important;
}
.iMediaThumb {
position: relative;
width: 100%;
aspect-ratio: 1 / 1;
display: flex;
align-items: center;
justify-content: center;
background-color: #202020;
border-radius: 9px;
overflow: hidden;
background-size: 44px;
background-position: center;
background-repeat: no-repeat;
}
.iMediaThumb.folderMedia {
background-image: url('../img/file/folder.svg');
background-size: 54px;
width: 100%;
height: auto;
margin: 0;
}
.mediaThumbImg {
max-width: 100%;
max-height: 100%;
width: auto;
height: auto;
object-fit: contain;
display: block;
}
.mediaThumbExt {
position: absolute;
bottom: 7px;
left: 7px;
padding: 2px 7px;
font-size: 10px;
font-weight: 700;
letter-spacing: 0.04em;
text-transform: uppercase;
color: #ffffff;
background-color: rgba(0, 0, 0, 0.62);
border-radius: 5px;
backdrop-filter: blur(2px);
}
.mediaCardName {
font-size: 12.5px;
font-weight: 500;
line-height: 1.3;
color: #e6e6e6;
word-break: break-word;
overflow: hidden;
display: -webkit-box;
-webkit-line-clamp: 2;
-webkit-box-orient: vertical;
min-height: 32px;
}
.mediaCardSub {
font-size: 11px;
color: #8a8a8a;
font-family: system-ui, -apple-system, "Segoe UI", Roboto, Arial, sans-serif;
font-variant-numeric: tabular-nums;
margin: -3px 0 0;
}
.mediaCopyHint {
font-size: 10.5px;
color: #6f6f6f;
opacity: 0;
transition: opacity 0.2s ease, color 0.2s ease;
}
.iMediaCard:hover .mediaCopyHint {
opacity: 1;
}
.mediaItemContainerChosen .mediaCopyHint {
opacity: 1;
color: #99e83d;
}
.mediaCardActions {
display: flex;
justify-content: center;
gap: 8px;
}
.mediaAction {
width: 34px;
height: 34px;
display: inline-flex;
align-items: center;
justify-content: center;
padding: 0;
border-radius: 9px;
background-color: #333435;
border: 1px solid #3a3b3c;
cursor: pointer;
transition: border-color 0.2s ease, background-color 0.2s ease;
}
.mediaAction:hover {
border-color: #3797f1;
background-color: #3a3b3c;
}
.mediaActionDanger:hover {
border-color: #ff7373;
background-color: #3a2b2b;
}
.mediaAction .fileMediaAdjust,
.mediaAction .fileMediaDelete {
width: 18px;
height: 18px;
margin: 0;
background-size: 18px;
}
/* ---- Estado vazio ---- */
.mediaEmpty {
text-align: center;
padding: 64px 20px;
}
.mediaEmptyIcon {
font-size: 44px;
margin-bottom: 10px;
}
.mediaEmptyTitle {
font-size: 16px;
font-weight: 600;
color: #d0d0d0;
margin: 0 0 6px;
}
.mediaEmptySub {
font-size: 13px;
color: #8a8a8a;
margin: 0 auto;
max-width: 360px;
}
/* ---- Extensões 4/5 — listas e cards de painel ---- */
.iExtPanelSearch {
margin: 8px 0 18px;
}
.iExtPanelSearch .form-control {
max-width: 420px;
margin-top: 0;
}
.iExtPanelToolbar {
display: flex;
flex-wrap: wrap;
align-items: center;
justify-content: space-between;
gap: 12px;
margin: 12px 0 16px;
}
.iExtPanelCardGrid {
display: flex;
flex-direction: column;
gap: 10px;
}
.iExtPanelCard {
display: grid;
grid-template-columns: 72px 1fr auto;
gap: 14px;
align-items: center;
padding: 14px 16px;
background-color: #2b2b2b;
border: 1px solid #353535;
border-radius: 12px;
transition: border-color 0.2s ease, background-color 0.2s ease, transform 0.15s ease;
}
.iExtPanelCard:hover {
border-color: #3797f1;
background-color: #2f2f2f;
transform: translateY(-1px);
}
.iExtPanelCard.is-disabled {
opacity: 0.55;
filter: grayscale(0.4);
}
.iExtPanelCardThumb {
width: 72px;
height: 72px;
border-radius: 9px;
object-fit: cover;
background-color: #202020;
}
.iExtPanelCardBody {
min-width: 0;
}
.iExtPanelCardTitle {
font-size: 14px;
font-weight: 600;
color: #e8e8e8;
line-height: 1.35;
word-break: break-word;
}
.iExtPanelCardMeta {
font-size: 12px;
color: #9a9a9a;
margin-top: 4px;
}
.iExtPanelCardActions {
display: flex;
flex-wrap: wrap;
align-items: center;
justify-content: flex-end;
gap: 8px;
}
.iExtPanelEmpty {
text-align: center;
padding: 48px 20px;
color: #9a9a9a;
}
@media (max-width: 640px) {
.iExtPanelCard {
grid-template-columns: 56px 1fr;
}
.iExtPanelCardActions {
grid-column: 1 / -1;
justify-content: flex-start;
padding-left: 70px;
}
}
/* ---- Preview de upload ---- */
#mediaWindowCallUploadPreview {
display: flex;
flex-direction: column;
gap: 8px;
margin-top: 16px;
}
.mediaPreviewUploadRow {
display: flex;
align-items: center;
gap: 14px;
padding: 12px 14px;
margin: 0;
background-color: #262626;
border: 1px solid #303030;
border-radius: 12px;
}
.mediaPreviewThumb {
flex: 0 0 auto;
width: 46px;
height: 46px;
border-radius: 8px;
background-color: #1f1f1f;
display: flex;
align-items: center;
justify-content: center;
overflow: hidden;
}
.mediaPreviewThumb.mediaPreviewCustomIcon {
width: 46px;
height: 46px;
background-size: 28px;
background-position: center;
background-repeat: no-repeat;
}
.mediaPreviewUploadImg {
width: 100%;
height: 100%;
max-width: none;
object-fit: cover;
}
.mediaPreviewInfo {
flex: 1 1 auto;
min-width: 0;
}
.mediaPreviewName {
font-size: 13px;
font-weight: 500;
color: #e6e6e6;
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
}
.fileDescription p {
font-size: 11.5px;
line-height: 16px;
color: #9a9a9a;
}
.mediaProgressTrack {
margin-top: 8px;
width: 100%;
height: 6px;
background-color: #1b1b1b;
border-radius: 6px;
overflow: hidden;
}
.mediaProgressBar {
height: 100%;
width: 0;
background-image: linear-gradient(to right, #1E70E3, #3897F1);
box-shadow: none;
border-radius: 6px;
transition: width 0.2s ease;
}
.mediaPreviewStatus {
flex: 0 0 auto;
}
.mediaUploadBadge {
font-size: 11px;
font-weight: 600;
padding: 4px 11px;
border-radius: 20px;
white-space: nowrap;
}
.mediaUploadOk {
color: #a6e88a;
background-color: rgba(74, 147, 53, 0.2);
}
.mediaUploadFail {
color: #ff9c9c;
background-color: rgba(255, 115, 115, 0.16);
}
/* ---- Painel de ajuste / detalhes ---- */
.adjustOverlay {
inset: 0;
width: 100%;
background-color: rgba(0, 0, 0, 0.6);
backdrop-filter: blur(4px);
}
.adjustContent {
top: 50%;
left: 50%;
right: auto;
bottom: auto;
transform: translate(-50%, -50%);
width: min(940px, 92%);
height: auto;
max-height: 88vh;
margin: 0;
overflow: auto;
background-color: #222222;
border: 1px solid #303030;
border-radius: 16px;
box-shadow: 0 20px 60px rgba(0, 0, 0, 0.55);
}
.adjustHeader {
display: flex;
align-items: center;
justify-content: space-between;
padding: 16px 22px;
border-bottom: 1px solid #303030;
position: sticky;
top: 0;
background-color: #222222;
z-index: 2;
}
.adjustHeader h2 {
margin: 0;
font-size: 17px;
font-weight: 600;
color: #ffffff;
}
.adjustBody {
display: grid;
grid-template-columns: 1fr 1fr;
gap: 24px;
padding: 24px;
}
.adjustPreview {
display: flex;
flex-direction: column;
align-items: center;
justify-content: flex-start;
gap: 4px;
padding: 16px;
min-height: 130px;
background-color: #1b1b1b;
border: 1px solid #2c2c2c;
border-radius: 12px;
}
.adjustPreview img,
#thumbnailPreviewImage {
max-width: 100%;
border-radius: 8px;
}
.adjustPanel {
display: flex;
flex-direction: column;
gap: 18px;
}
.adjustFieldLabel,
.adjustField label,
.adjustLinkHead label {
display: block;
font-size: 12px;
font-weight: 600;
color: #b9b9b9;
margin-bottom: 6px;
}
.adjustLinkBlock {
padding: 14px 16px;
background-color: #262626;
border: 1px solid #303030;
border-radius: 12px;
}
.adjustLinkHead {
display: flex;
align-items: center;
justify-content: space-between;
gap: 10px;
margin-bottom: 8px;
}
.adjustLinkHead label {
margin: 0;
}
.adjustLinkValue {
margin: 0;
padding: 9px 11px;
font-size: 12px;
font-family: system-ui, -apple-system, "Segoe UI", Roboto, Arial, sans-serif;
color: #9fd0ff;
background-color: #1b1b1b;
border: 1px solid #2c2c2c;
border-radius: 8px;
word-break: break-all;
line-height: 1.5;
}
.iMediaCopyBtn,
.mediaCopyBtn {
display: inline-flex;
align-items: center;
gap: 6px;
padding: 5px 11px;
font-size: 12px;
font-weight: 600;
color: #3797f1;
background-color: transparent;
border: 1px solid #3a3b3c;
border-radius: 8px;
cursor: pointer;
transition: border-color 0.2s ease, background-color 0.2s ease, color 0.2s ease;
}
.mediaCopyBtn:hover {
border-color: #3797f1;
background-color: rgba(55, 151, 241, 0.1);
color: #5cabf5;
}
.mediaCopyBtn .copyItem {
width: 14px;
height: 14px;
margin: 0;
}
.adjustTransformGrid {
display: grid;
grid-template-columns: repeat(3, 1fr);
gap: 12px;
margin-bottom: 4px;
}
.adjustField input {
text-align: center;
}
.adjustHint {
font-size: 11.5px;
color: #8a8a8a;
margin: 0 0 10px;
}
.adjustTransform small.adjustHint {
display: block;
margin: 8px 0 0;
}
.adjustRename .form-group {
margin-bottom: 10px;
}
@media (max-width: 768px) {
#mediaWindowContent {
padding: 20px 16px 64px;
}
.mediaWindowHeader {
padding: 14px 18px;
}
.iMediaToolbarActions {
width: 100%;
}
.iMediaToolBtn {
flex: 1 1 auto;
}
.adjustBody {
grid-template-columns: 1fr;
gap: 16px;
padding: 18px;
}
.iMediaGrid {
grid-template-columns: repeat(auto-fill, minmax(120px, 1fr));
gap: 12px;
}
}
/* ----- end of MEDIA window ----- */
/* =========================================================
Componentes — modernização (dark)
iModal, iFloat, botões e formulários no mesmo padrão
visual da janela de Mídias. Diagramação e espaçamentos
inspirados no Stripe, usando a paleta do projeto
(#3797f1 / cinzas escuros). Bloco de override: vem depois
das definições legadas para sobrescrevê-las.
========================================================= */
/* ---- Overlay compartilhado (modal/confirm) ---- */
.modalOverlay {
background-color: rgba(9, 9, 9, 0.58);
backdrop-filter: blur(6px);
}
/* ---- iModal ---- */
.modal {
top: 50%;
right: auto;
bottom: auto;
left: 50%;
transform: translate(-50%, -50%);
width: min(1000px, calc(100% - 40px));
height: auto;
max-height: 90vh;
margin: 0;
padding: 0;
overflow: auto;
scrollbar-width: thin;
background-color: #1f1f1f;
border: 1px solid #303030;
border-radius: 16px;
box-shadow: 0 24px 64px rgba(0, 0, 0, 0.55);
-webkit-animation: iModalPop 0.22s cubic-bezier(0.25, 0.46, 0.45, 0.94) both;
animation: iModalPop 0.22s cubic-bezier(0.25, 0.46, 0.45, 0.94) both;
}
@keyframes iModalPop {
from { opacity: 0; transform: translate(-50%, -48%) scale(0.985); }
to { opacity: 1; transform: translate(-50%, -50%) scale(1); }
}
.modalHeader {
position: sticky;
top: 0;
width: auto;
margin: 0;
padding: 16px 26px;
display: flex;
flex-direction: row-reverse;
justify-content: space-between;
align-items: center;
background: rgba(31, 31, 31, 0.92);
backdrop-filter: blur(8px);
border-bottom: 1px solid #303030;
box-shadow: none;
border-radius: 16px 16px 0 0;
z-index: 9;
}
.modalHeader h2 {
margin: 0;
padding: 0;
font-size: 19px;
font-weight: 600;
letter-spacing: 0;
color: #ffffff;
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
}
.modalHeader .closeModal {
width: 32px;
height: 32px;
background-size: 14px;
background-color: #2b2b2b;
border: 1px solid #3a3b3c;
border-radius: 9px;
transition: background-color 0.2s ease, border-color 0.2s ease;
}
.modalHeader .closeModal:hover {
background-color: #333435;
border-color: #3797f1;
}
.modalContent {
margin: 0;
padding: 24px 26px 28px;
}
.modalFooter:not(:empty) {
position: sticky;
bottom: 0;
display: flex;
flex-wrap: wrap;
justify-content: flex-end;
gap: 10px;
margin: 0;
padding: 14px 26px;
background: rgba(31, 31, 31, 0.94);
backdrop-filter: blur(8px);
border-top: 1px solid #303030;
border-radius: 0 0 16px 16px;
}
/* Press Release popup — sem modalHeader, só (X) + conteúdo */
.modal.pressReleaseModalBox .modalCloseBar {
display: flex;
justify-content: flex-end;
padding: 14px 18px 0;
position: sticky;
top: 0;
z-index: 9;
}
.modal.pressReleaseModalBox .modalCloseBar .closeModal {
width: 32px;
height: 32px;
background-size: 14px;
background-color: #2b2b2b;
border: 1px solid #3a3b3c;
border-radius: 9px;
transition: background-color 0.2s ease, border-color 0.2s ease;
}
.modal.pressReleaseModalBox .modalCloseBar .closeModal:hover {
background-color: #333333;
border-color: #3797f1;
}
.modal.pressReleaseModalBox .modalContent {
margin: 0;
padding: 12px;
max-height: min(72vh, 640px);
overflow-y: auto;
}
.modal.pressReleaseModalBox .modalContent::-webkit-scrollbar {
height: 4px;
width: 4px;
}
.modal.pressReleaseModalBox .modalContent::-webkit-scrollbar-thumb {
background: #888;
border-radius: 10px;
}
.modal.pressReleaseModalBox .modalContent::-webkit-scrollbar-track {
background: #f1f1f1;
border-radius: 10px;
}
.modal.pressReleaseModalBox .prModalFooter {
text-align: center;
margin-top: 14px;
}
/* ---- Confirm modal ---- */
.confirmModal.blackCard {
width: 460px;
max-width: calc(100% - 40px);
margin: 0 auto;
margin-top: 12vh;
padding: 26px 26px 24px;
text-align: left;
background-color: #1f1f1f;
border: 1px solid #303030;
border-radius: 16px;
box-shadow: 0 24px 64px rgba(0, 0, 0, 0.55);
}
.confirmModal.blackCard h2 {
margin: 0 0 10px;
font-size: 18px;
font-weight: 600;
color: #ffffff;
}
.confirmModal.blackCard p {
font-size: 13.5px;
line-height: 1.55;
color: #b9b9b9;
}
/* ---- iFloat ---- */
.float {
width: calc(100% - 48px);
margin: 0 24px;
padding: 0;
background-color: #1f1f1f;
border: 1px solid #303030;
border-bottom: none;
box-shadow: 0 -12px 40px rgba(0, 0, 0, 0.45);
border-radius: 16px 16px 0 0;
}
.floatHeader {
display: flex;
flex-direction: row-reverse;
justify-content: space-between;
align-items: center;
padding: 15px 24px;
border-bottom: 1px solid #303030;
}
.floatHeader h2 {
margin: 0;
padding: 0;
font-size: 18px;
font-weight: 600;
color: #ffffff;
text-align: left;
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
}
.closeFloat {
position: static;
left: auto;
width: 32px;
height: 32px;
flex: 0 0 auto;
background-size: 14px;
background-position: center;
background-repeat: no-repeat;
background-color: #2b2b2b;
border: 1px solid #3a3b3c;
border-radius: 9px;
transition: background-color 0.2s ease, border-color 0.2s ease;
}
.closeFloat:hover {
background-color: #333435;
border-color: #3797f1;
}
.floatContent {
padding: 20px 24px;
}
.floatFooter:not(:empty) {
padding: 0 24px 18px;
}
/* ---- Modal publicar páginas (upload) ---- */
.publishUploadModal {
max-width: 520px;
margin: 0 auto;
text-align: center;
}
.publishUploadModalIntro,
.publishUploadModalHint,
.publishUploadModalBatchNote,
.publishUploadModalEmptyText {
font-size: 13.5px;
line-height: 1.55;
color: #b8bcc4;
margin: 0 0 14px;
}
.publishUploadModalActions {
margin: 0 0 18px;
}
.publishUploadModalBatchNote {
padding: 10px 14px;
background: rgba(55, 151, 241, 0.08);
border: 1px solid rgba(55, 151, 241, 0.22);
border-radius: 10px;
color: #c8d8f0;
text-align: left;
}
.publishUploadModalListLabel {
font-size: 12px;
font-weight: 600;
letter-spacing: 0.04em;
text-transform: uppercase;
color: #888;
margin: 18px 0 10px;
text-align: left;
}
.publishUploadModalListLabel--compact {
margin-top: 22px;
}
.publishUploadModalCount {
font-weight: 500;
text-transform: none;
letter-spacing: 0;
color: #777;
}
.publishUploadModalList {
max-height: 220px;
overflow-y: auto;
text-align: left;
padding: 4px 0;
border: 1px solid #3a3a3a;
border-radius: 12px;
background: #2a2a2a;
scrollbar-width: thin;
}
.publishUploadModalList--progress {
max-height: 260px;
}
.publishUploadModalPageRow {
display: flex;
align-items: center;
gap: 10px;
padding: 9px 14px;
font-size: 12.5px;
line-height: 1.35;
color: #aaa;
border-bottom: 1px solid #353535;
transition: background-color 0.2s ease, color 0.2s ease;
}
.publishUploadModalPageRow:last-child {
border-bottom: none;
}
.publishUploadModalPageDot,
.publishUploadModalPageState {
width: 8px;
height: 8px;
border-radius: 50%;
flex-shrink: 0;
background: #555;
}
.publishUploadModalPageRow--active {
background: rgba(55, 151, 241, 0.1);
color: #eee;
}
.publishUploadModalPageRow--active .publishUploadModalPageState {
background: #3797f1;
box-shadow: 0 0 0 3px rgba(55, 151, 241, 0.22);
}
.publishUploadModalPageRow--done {
color: #7dcea0;
}
.publishUploadModalPageRow--done .publishUploadModalPageState {
background: #22c55e;
}
.publishUploadModalPageRow--error {
color: #e88;
}
.publishUploadModalPageRow--error .publishUploadModalPageState {
background: #e74c3c;
}
.publishUploadModalPageUrl {
flex: 1;
min-width: 0;
overflow: hidden;
text-overflow: ellipsis;
white-space: nowrap;
}
.publishUploadModalHero {
padding: 8px 12px 20px;
transition: opacity 0.38s ease, transform 0.38s ease;
}
.publishUploadModalHero--out {
opacity: 0;
transform: translateY(-6px) scale(0.985);
pointer-events: none;
}
.publishUploadModalLottie {
width: 112px;
height: 112px;
margin: 0 auto 6px;
}
.publishUploadModalLottie svg {
width: 100%;
height: 100%;
display: block;
}
.publishUploadModalStatus {
margin: 0 0 12px;
font-size: 22px;
font-weight: 600;
color: #f0f0f0;
letter-spacing: -0.02em;
}
.publishUploadModalProgressTrack {
position: relative;
width: 100%;
height: 6px;
border-radius: 999px;
background: #3a3a3a;
overflow: hidden;
}
.publishUploadModalProgressFill {
height: 100%;
width: 0%;
border-radius: 999px;
background: linear-gradient(90deg, #3797f1 0%, #5eb3ff 100%);
transition: width 0.35s cubic-bezier(0.25, 0.46, 0.45, 0.94);
}
.publishUploadModalSuccess {
padding: 12px 8px 8px;
opacity: 0;
transform: translateY(8px);
transition: opacity 0.42s ease, transform 0.42s ease;
}
.publishUploadModalSuccess--hidden {
display: none;
}
.publishUploadModalSuccess--in {
display: block;
opacity: 1;
transform: translateY(0);
}
.publishUploadModalSuccessMark {
display: flex;
justify-content: center;
margin-bottom: 4px;
}
.publishUploadModalSuccessTitle {
margin: 0 0 6px;
font-size: 18px;
font-weight: 600;
color: #f0f0f0;
}
.publishUploadModalSuccessText {
margin: 0;
font-size: 13.5px;
line-height: 1.5;
color: #b8bcc4;
}
.publishUploadModal--empty {
padding: 24px 12px;
}
.publishUploadModalEmptyTitle {
margin: 0 0 8px;
font-size: 18px;
font-weight: 600;
color: #f0f0f0;
}
.publishPagesModal--locked .closeModal,
.publishPagesFloat--locked .closeFloat {
cursor: not-allowed;
}
#publishPagesOverlay.modalOverlay {
z-index: 35;
}
#float_publishPagesModal {
z-index: 40;
height: auto !important;
min-height: 0;
max-height: 55vh;
overflow-y: auto;
text-align: left;
background-color: #1f1f1f;
border-color: #303030;
box-shadow: 0 -16px 48px rgba(0, 0, 0, 0.55);
}
#float_publishPagesModal.publishPagesFloat--empty {
max-height: none;
}
#float_publishPagesModal .floatHeader {
background: #1f1f1f;
border-bottom-color: #303030;
}
#float_publishPagesModal .floatHeader h2 {
color: #f5f5f5;
}
#float_publishPagesModal .closeFloat {
background-color: #2b2b2b;
border-color: #3a3b3c;
}
#float_publishPagesModal .floatContent {
padding: 20px 24px 24px;
text-align: left;
color: #e8e8e8;
}
#float_publishPagesModal .publishUploadModal {
width: 100%;
}
#float_publishPagesModal .publishUploadModalList {
background: #161616;
border-color: #333333;
}
#float_publishPagesModal .publishUploadModalPageRow {
border-bottom-color: #2a2a2a;
}
#float_publishPagesModal .publishUploadModalPageRow--active {
background: rgba(55, 151, 241, 0.12);
}
#float_publishPagesModal .publishUploadModalProgressFill {
background: #3797f1;
}
#float_publishPagesModal .publishUploadModalEmptyTitle {
color: #f0f0f0;
}
#float_publishPagesModal .success-checkmark .check-icon::before,
#float_publishPagesModal .success-checkmark .check-icon::after,
#float_publishPagesModal .success-checkmark .check-icon .icon-fix {
background: #1f1f1f;
}
/* ---- Botões ---- */
.button {
padding: 9px 22px;
letter-spacing: 0.2px;
box-shadow: 0 1px 2px rgba(0, 0, 0, 0.3);
}
.button:focus-visible {
outline: 2px solid #3797f1;
outline-offset: 2px;
}
/* botão secundário (contorno) — equivalente geral ao .iMediaToolBtn */
.buttonSecondary {
display: inline-flex;
align-items: center;
justify-content: center;
gap: 7px;
padding: 9px 18px;
margin: 7px 1px 1px 1px;
font-size: 14px;
font-weight: 600;
color: #d0d0d0;
background-color: #2b2b2b;
border: 1px solid #3a3b3c;
border-radius: 10px;
cursor: pointer;
transition: border-color 0.2s ease, background-color 0.2s ease, color 0.2s ease;
}
.buttonSecondary:hover:not(:disabled) {
border-color: #3797f1;
background-color: #2f2f2f;
color: #ffffff;
}
.buttonSecondary:focus-visible {
outline: 2px solid #3797f1;
outline-offset: 2px;
}
.buttonSecondary:disabled {
opacity: 0.5;
cursor: default;
}
/* botão fantasma (texto/ação leve) */
.buttonGhost {
display: inline-flex;
align-items: center;
justify-content: center;
gap: 6px;
padding: 8px 14px;
margin: 7px 1px 1px 1px;
font-size: 13.5px;
font-weight: 600;
color: #3797f1;
background-color: transparent;
border: 1px solid transparent;
border-radius: 10px;
cursor: pointer;
transition: background-color 0.2s ease, color 0.2s ease;
}
.buttonGhost:hover:not(:disabled) {
background-color: rgba(55, 151, 241, 0.1);
color: #5cabf5;
}
/* botão de ícone quadrado */
.buttonIcon {
display: inline-flex;
align-items: center;
justify-content: center;
width: 38px;
height: 38px;
padding: 0;
background-color: #333435;
border: 1px solid #3a3b3c;
border-radius: 10px;
cursor: pointer;
transition: border-color 0.2s ease, background-color 0.2s ease;
}
.buttonIcon:hover:not(:disabled) {
border-color: #3797f1;
background-color: #3a3b3c;
}
/* grupo de botões alinhados (ações de formulário/modal) */
.buttonGroup {
display: flex;
flex-wrap: wrap;
gap: 10px;
align-items: center;
}
.buttonGroupEnd {
justify-content: flex-end;
}
/* ---- Formulários ---- */
.form-control {
background-color: #2b2b2b;
border-color: #3a3b3c;
}
.form-control:hover:not(:focus):not(:disabled) {
border-color: #4a4b4c;
}
.form-control:focus {
background-color: #242222;
border-color: #3797f1;
box-shadow: 0 0 0 3px rgba(55, 151, 241, 0.16);
}
.form-control::placeholder {
color: #6f6f6f;
}
label {
display: inline-block;
margin-bottom: 6px;
font-size: 13px;
font-weight: 500;
color: #b9b9b9;
}
/* mantém alinhamento dos toggles/radios (não usam o espaçamento de label de formulário) */
.onoffswitch-label,
.onoffswitch + label,
.switchToggle input + label {
margin-bottom: 0;
}
.modalForm {
max-width: 760px;
}
/* Painel reutilizável (superfície de seção, igual ao iMedia) */
.iPanel {
padding: 16px 18px;
background-color: #262626;
border: 1px solid #303030;
border-radius: 12px;
}
.iPanelMuted {
padding: 14px 16px;
background-color: #1b1b1b;
border: 1px solid #2c2c2c;
border-radius: 12px;
}
.iSectionTitle {
margin: 0 0 12px;
font-size: 13px;
font-weight: 600;
letter-spacing: 0.02em;
text-transform: uppercase;
color: #8a8a8a;
}
/* Layout de campos: empilhado por padrão, grade opcional */
.iFieldGrid {
display: grid;
grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
gap: 0 18px;
}
.iFieldRow {
display: flex;
flex-wrap: wrap;
gap: 12px;
align-items: flex-end;
}
.iFieldRow .form-group {
flex: 1 1 220px;
margin-bottom: 0;
}
@media only screen and (max-width: 600px) {
.modal {
width: calc(100% - 24px);
max-height: 92vh;
}
.modalHeader { padding: 14px 18px; }
.modalContent { padding: 18px 18px 22px; margin-top: 30px; }
.modalFooter:not(:empty) { padding: 12px 18px; }
.float { width: calc(100% - 20px); margin: 0 10px; }
.floatHeader { padding: 13px 18px; }
.floatContent { padding: 16px 18px; }
}
/* Extensao de notificacoes (Ext 7) */
.ext7Panel .ext7Subtitle {
margin: 6px 0 0;
font-size: 13.5px;
line-height: 1.5;
color: #969696;
max-width: 660px;
}
.ext7MailGrid {
display: grid;
grid-template-columns: repeat(auto-fit, minmax(320px, 1fr));
gap: 18px;
margin-top: 6px;
}
.ext7MailCard {
display: flex;
flex-direction: column;
}
.ext7MailDomain {
display: inline-flex;
align-items: center;
height: 44px;
color: #b9b9b9;
font-size: 13.5px;
white-space: nowrap;
}
.ext7Hint {
margin: 6px 0 0;
font-size: 12.5px;
line-height: 1.5;
color: #8a8a8a;
}
.ext7LogoBlock {
margin-top: 10px;
}
.ext7LogoPreview {
margin-bottom: 10px;
}
.ext7LogoPreview img {
border-radius: 8px;
}
.ext7SwitchRow {
gap: 10px;
margin-bottom: 4px;
}
.ext7SwitchLabel {
margin: 0;
font-size: 13.5px;
color: #e6e6e6;
}
.ext7TestLink {
display: inline-block;
margin-top: 8px;
}
.ext7Actions {
margin-top: 18px;
}
@media only screen and (max-width: 600px) {
.ext7MailGrid { grid-template-columns: 1fr; }
}
/* Painel de extensao reutilizavel (cabecalho + navegacao em abas) */
.iExtHeader {
display: flex;
align-items: center;
gap: 18px;
margin-bottom: 18px;
}
.iExtIcon {
flex-shrink: 0;
width: 96px;
height: 96px;
display: flex;
align-items: center;
justify-content: center;
}
.iExtHeaderText { min-width: 0; }
.iExtHeaderText h1 { margin: 0 0 6px; }
.iExtSubtitle {
margin: 0;
font-size: 13.5px;
line-height: 1.5;
color: #969696;
max-width: 680px;
}
.iExtNav {
display: flex;
gap: 6px;
overflow-x: auto;
padding-bottom: 8px;
margin-bottom: 18px;
border-bottom: 1px solid #303030;
scrollbar-width: thin;
}
.iExtNavWrap { display: inline-flex; }
.iExtNavItem {
display: inline-flex;
align-items: center;
gap: 6px;
white-space: nowrap;
padding: 9px 14px;
border-radius: 20px;
font-size: 13px;
font-weight: 500;
color: #b9b9b9;
cursor: pointer;
text-decoration: none;
transition: background-color 0.15s ease, color 0.15s ease;
}
.iExtNavItem:hover { background-color: rgba(255, 255, 255, 0.06); color: #ffffff; }
.iExtNavItemActive { background-color: rgba(55, 151, 241, 0.14); color: #ffffff; }
@media only screen and (max-width: 600px) {
.iExtHeader { gap: 12px; }
.iExtIcon { width: 64px; height: 64px; }
}
/* Producao (hub, listas, formulario) */
.iProdBack {
display: inline-flex;
align-items: center;
gap: 6px;
margin-bottom: 14px;
font-size: 13px;
font-weight: 550;
color: #9a9a9a;
text-decoration: none;
background-image: none;
width: auto;
height: auto;
transition: color 0.15s ease;
}
.iProdBack:hover { color: #3797f1; }
.iProdBack::before {
content: "";
width: 7px;
height: 7px;
border-left: 2px solid currentColor;
border-bottom: 2px solid currentColor;
transform: rotate(45deg);
margin-left: 2px;
flex-shrink: 0;
}
.iProdHeader { margin-bottom: 18px; }
.iProdHeader h1,
.iProdHeader h2,
.iProdHeader .iTitle { margin: 0 0 6px; }
.iProdHeader .iTitle#productionTitle {
padding-top: 4px;
padding-bottom: 4px;
}
.iProdHeader .iTitle#prTitle {
padding-top: 4px;
padding-bottom: 4px;
}
.iProdSubtitle {
margin: 0;
font-size: 13.5px;
line-height: 1.5;
color: #969696;
max-width: 680px;
}
.iProdHub {
display: grid;
grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
gap: 16px;
}
.iProdCard {
display: flex;
flex-direction: column;
padding: 20px;
background-color: #262626;
border: 1px solid #303030;
border-radius: 14px;
text-decoration: none;
transition: border-color 0.15s ease, transform 0.15s ease;
}
.iProdCard:hover { border-color: #3797f1; transform: translateY(-2px); }
.iProdCardIcon { font-size: 26px; line-height: 1; margin-bottom: 12px; }
.iProdCardTitle { margin: 0 0 6px; font-size: 15px; font-weight: 600; color: #ffffff; }
.iProdCardDesc { margin: 0; font-size: 13px; line-height: 1.5; color: #8a8a8a; }
.iProdToolbar { margin: 4px 0 14px; }
.iProdFormPanel { max-width: 720px; }
.iProdFormActions {
display: flex;
flex-wrap: wrap;
gap: 10px;
margin-top: 8px;
}
.iProdList { display: flex; flex-direction: column; gap: 10px; }
.iProdRow {
display: flex;
align-items: center;
gap: 14px;
padding: 14px 16px;
background-color: #262626;
border: 1px solid #303030;
border-radius: 12px;
transition: border-color 0.15s ease;
}
.iProdRow:hover { border-color: #3a3b3c; }
.iProdRowMain { display: flex; align-items: center; gap: 12px; min-width: 0; flex: 1 1 auto; }
.iProdRowAvatar img, .iProdRowAvatar .defaultAvatar {
width: 36px;
height: 36px;
border-radius: 50%;
object-fit: cover;
display: block;
}
.iProdRowText { min-width: 0; }
.iProdRowName {
display: flex;
align-items: center;
gap: 6px;
font-size: 14px;
font-weight: 600;
color: #e6e6e6;
}
.iProdRowHost { font-size: 12.5px; color: #8a8a8a; word-break: break-all; }
.iProdStar { color: #ffd52b; }
.iProdActions { display: flex; flex-wrap: wrap; gap: 8px; justify-content: flex-end; }
.iProdBtn {
padding: 7px 14px;
font-size: 12.5px;
font-weight: 500;
color: #e6e6e6;
background-color: #2b2b2b;
border: 1px solid #3a3b3c;
border-radius: 20px;
cursor: pointer;
transition: border-color 0.15s ease, color 0.15s ease, background-color 0.15s ease;
}
.iProdBtn:hover { border-color: #3797f1; color: #ffffff; }
.iProdBtnDanger:hover { border-color: #ff7373; color: #ff7373; }
.iProdEmpty { text-align: center; padding: 48px 16px; }
.iProdEmptyIcon { font-size: 40px; line-height: 1; }
.iProdEmptyTitle { margin: 12px 0 4px; font-size: 16px; color: #e6e6e6; }
.iProdEmptySub { margin: 0; font-size: 13px; color: #8a8a8a; }
.iProdSkeletonRow {
height: 68px;
border-radius: 12px;
border: 1px solid #303030;
background: linear-gradient(90deg, rgba(255, 255, 255, 0.05), rgba(255, 255, 255, 0.12), rgba(255, 255, 255, 0.05));
background-size: 200% 100%;
animation: iProdSkeletonPulse 1.2s ease-in-out infinite;
}
@keyframes iProdSkeletonPulse {
0% { background-position: 200% 0; }
100% { background-position: -200% 0; }
}
@media only screen and (max-width: 600px) {
.iProdRow { flex-direction: column; align-items: stretch; }
.iProdActions { justify-content: flex-start; }
}
/* =========================================================
Extensão 3 — SEO Avançado (painel)
Espaçamento inspirado no Stripe / iMedia (#3797f1, #303030).
Escopo: #extensionContent
========================================================= */
#extensionContent .iSeoExtensionDivider {
border: none;
border-top: 1px solid #303030;
margin: 16px 0;
}
#extensionContent .iSeoExtensionTabs {
display: flex;
flex-wrap: wrap;
justify-content: center;
gap: 10px;
margin-bottom: 16px;
}
#extensionContent .iSeoExtensionTabs .listOption {
margin: 0;
font-size: 13px;
padding: 8px 18px;
}
#extensionContent .iSeoExtensionTabs .listOption.active {
background-image: none;
background-color: #3797f1;
color: #ffffff;
}
#extensionContent .iSeoExtensionContent {
display: flex;
flex-direction: column;
gap: 16px;
}
#extensionContent .iSeoHint {
margin: 0 0 16px;
font-size: 12.5px;
line-height: 1.5;
color: #969696;
}
#extensionContent .iSeoHint strong {
color: #d0d0d0;
font-weight: 600;
}
#extensionContent .iSeoSectionSubtitle {
display: block;
margin: -4px 0 14px;
font-size: 12px;
font-weight: 400;
color: #6f6f6f;
}
#extensionContent .iSeoProgressPanel {
margin-bottom: 16px;
}
#extensionContent .iSeoProgressMeta {
display: flex;
flex-wrap: wrap;
gap: 12px 20px;
align-items: center;
font-size: 12.5px;
color: #c8c8c8;
margin-bottom: 12px;
}
#extensionContent .iSeoProgressMeta b {
color: #ffffff;
font-weight: 600;
}
#extensionContent .iSeoChecklist {
margin: 0;
padding: 0;
list-style: none;
display: flex;
flex-direction: column;
gap: 12px;
}
#extensionContent .iSeoChecklistItem {
display: flex;
flex-wrap: wrap;
align-items: center;
gap: 8px 12px;
font-size: 13px;
line-height: 1.45;
color: #e6e6e6;
}
#extensionContent .iSeoChecklistStatus {
min-width: 14px;
font-weight: 700;
}
#extensionContent .iSeoChecklistConfirm {
display: inline-flex;
align-items: center;
gap: 8px;
font-size: 12.5px;
color: #969696;
cursor: pointer;
}
#extensionContent .iSeoCodeBlock {
margin: 0 0 16px;
padding: 14px 16px;
font-family: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, monospace;
font-size: 14px;
line-height: 1.5;
word-break: break-all;
color: #99e83d;
background-color: #1b1b1b;
border: 1px solid #303030;
border-radius: 10px;
}
#extensionContent .iSeoToolbar {
display: flex;
flex-wrap: wrap;
gap: 16px;
align-items: stretch;
margin-bottom: 0;
}
#extensionContent .iSeoToolbarSearch {
min-width: 0;
}
#extensionContent .iSeoToolbarSearch .form-control {
font-size: 13.5px;
padding: 10px 14px;
border-radius: 10px;
border-color: #3a3b3c;
background-color: #1f1f1f;
}
#extensionContent .iSeoToolbarActions {
flex: 0 0 auto;
display: flex;
align-items: center;
justify-content: flex-end;
}
#extensionContent .iSeoMetaLine {
margin: 12px 0 0;
font-size: 12px;
line-height: 1.5;
color: #969696;
}
#extensionContent .iSeoMetaLine:first-of-type {
margin-top: 14px;
}
#extensionContent .iSeoPagesListShell {
padding: 10px;
overflow: visible;
background: transparent;
border: none;
}
#extensionContent .seoPageRow {
display: grid;
grid-template-columns: 36px minmax(108px, 1.05fr) minmax(120px, 1.15fr) minmax(120px, 1.25fr) 84px minmax(156px, auto);
gap: 10px 14px;
align-items: center;
padding: 14px 16px;
margin: 0 0 8px;
border: 1px solid #353535;
border-radius: 12px;
background-color: #262626;
font-size: 12.5px;
line-height: 1.4;
transition: border-color 0.2s ease, background-color 0.2s ease, box-shadow 0.2s ease;
}
#extensionContent .seoPageRowHeader {
font-weight: 600;
font-size: 11px;
text-transform: uppercase;
letter-spacing: 0.04em;
color: #8a8a8a;
background-color: transparent;
border: none;
border-radius: 0;
padding: 0 16px 8px;
margin-bottom: 4px;
}
#extensionContent .seoPageRow:hover:not(.seoPageRowHeader) {
background-color: #2f2f2f;
border-color: #3797f1;
}
#extensionContent .seoPageRowSelected {
background-color: rgba(55, 151, 241, 0.08);
border-color: rgba(55, 151, 241, 0.45);
box-shadow: 0 0 0 1px rgba(55, 151, 241, 0.12);
}
#extensionContent .seoPageRowCheck {
display: flex;
align-items: center;
justify-content: center;
align-self: stretch;
padding: 2px 0;
overflow: visible;
}
#extensionContent .seoPageRowCheck input[type="checkbox"] {
margin: 0;
cursor: pointer;
accent-color: #3797f1;
transform: none;
width: 16px;
height: 16px;
flex-shrink: 0;
}
#extensionContent .seoPageRowCell {
min-width: 0;
overflow: hidden;
text-overflow: ellipsis;
}
#extensionContent .seoPageRowTitle,
#extensionContent .seoPageRowDesc {
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
color: #b8b8b8;
}
#extensionContent .seoPageRowName b {
color: #ffffff;
font-size: 13px;
}
#extensionContent .seoPageRowUrl {
display: inline-block;
margin-top: 2px;
font-size: 11px !important;
line-height: 1.35;
color: #8a8a8a !important;
font-weight: 500;
}
#extensionContent .seoPageRowStatus {
display: flex;
align-items: center;
justify-content: flex-start;
}
#extensionContent .seoStatusBadge {
display: inline-flex;
align-items: center;
justify-content: center;
min-width: 52px;
padding: 4px 10px;
font-size: 11px;
font-weight: 600;
line-height: 1.2;
border-radius: 999px;
white-space: nowrap;
letter-spacing: 0.02em;
}
#extensionContent .seoStatusBadgeOk {
color: #a6e88a;
background-color: rgba(74, 147, 53, 0.22);
border: 1px solid rgba(166, 232, 138, 0.22);
}
#extensionContent .seoStatusBadgeWeak {
color: #ff9c9c;
background-color: rgba(255, 115, 115, 0.16);
border: 1px solid rgba(255, 156, 156, 0.2);
}
#extensionContent .seoStatusBadgeNew {
color: #93c5fd;
background-color: rgba(55, 151, 241, 0.14);
border: 1px solid rgba(147, 197, 253, 0.22);
}
#extensionContent .seoPageRowActions {
display: flex;
flex-wrap: nowrap;
align-items: center;
justify-content: flex-end;
gap: 8px;
min-width: 0;
}
#extensionContent .seoPageRowActions .buttonSecondary,
#extensionContent .seoPageRowActions .iSeoChipBtn {
flex: 0 0 auto;
white-space: nowrap;
min-width: 0;
font-size: 11px !important;
padding: 6px 11px !important;
line-height: 1.2 !important;
}
#extensionContent .iSeoChipBtn {
font-size: 12px !important;
padding: 6px 14px !important;
margin: 0 !important;
border-radius: 10px !important;
letter-spacing: 0.02em !important;
}
#extensionContent .seoPagesPagination {
display: flex;
flex-wrap: wrap;
gap: 6px;
margin-top: 14px;
}
#extensionContent .seoPagesPagination .listOption {
font-size: 12px;
padding: 5px 12px;
margin: 0;
}
#extensionContent .seoPagesPagination .listOption.active {
background-image: none;
background-color: #3797f1;
color: #fff;
}
#extensionContent .iSeoBulkBar {
display: none;
margin-top: 16px;
padding-top: 16px;
border-top: 1px solid #303030;
}
#extensionContent .iSeoBulkBarVisible {
display: block;
}
#extensionContent .iSeoBulkCount {
display: block;
margin-bottom: 10px;
font-size: 12.5px;
}
#extensionContent .iSeoBulkActions {
display: flex;
flex-wrap: wrap;
gap: 8px;
align-items: center;
margin-top: 10px;
}
#extensionContent .iSeoBulkActions .buttonSecondary,
#extensionContent .iSeoBulkActions .button,
#extensionContent .iSeoBulkActions .buttonGhost {
margin: 0;
font-size: 12.5px;
padding: 7px 14px;
}
#extensionContent .seoPageCard {
padding: 16px 18px;
}
#extensionContent .seoPageCardHeader {
margin-bottom: 12px;
}
#extensionContent .seoFieldBlock {
margin-bottom: 14px;
}
#extensionContent .seoFieldBlock label,
#extensionContent .seoFieldLabel {
display: block;
font-size: 11px;
color: #969696;
margin-bottom: 6px;
}
#extensionContent .seoPageCard .form-control {
font-size: 12.5px;
padding: 8px 10px;
border-radius: 8px;
border-color: #3a3b3c;
background-color: #1f1f1f;
color: #e8e8e8;
}
#extensionContent .seoPageCard .form-control:focus {
background-color: #242222;
border-color: #3797f1;
box-shadow: 0 0 0 3px rgba(55, 151, 241, 0.16);
}
#extensionContent .seoPageCard .form-control::placeholder {
color: #6f6f6f;
}
#extensionContent .seoPageEditModalCard .form-control {
font-size: 12.5px;
padding: 8px 10px;
border-radius: 8px;
border-color: #3a3b3c;
background-color: #1f1f1f;
color: #e8e8e8;
}
#extensionContent .seoPageEditModalCard .form-control:focus {
background-color: #242222;
border-color: #3797f1;
box-shadow: 0 0 0 3px rgba(55, 151, 241, 0.16);
}
#extensionContent .seoPageCard .seoDesc {
min-height: 96px;
resize: vertical;
line-height: 1.45;
}
#extensionContent .seoImageFieldTop {
display: flex;
flex-wrap: wrap;
align-items: center;
justify-content: space-between;
gap: 8px 12px;
margin-bottom: 8px;
}
#extensionContent .seoImageFieldTop .seoFieldLabel {
margin-bottom: 0;
}
#extensionContent .seoImageMediaBtn {
margin: 0 !important;
white-space: nowrap;
text-decoration: none;
}
#extensionContent .seoCharCount {
color: #8a8a8a;
font-weight: normal;
}
#extensionContent .seoPageActionsRow {
display: flex;
flex-wrap: wrap;
align-items: center;
justify-content: space-between;
gap: 12px 16px;
margin-top: 4px;
padding-top: 14px;
border-top: 1px solid #303030;
}
#extensionContent .seoPageTogglesGroup {
display: flex;
flex-wrap: wrap;
align-items: center;
gap: 10px 20px;
flex: 1 1 auto;
min-width: 0;
}
#extensionContent .seoToggleItem,
#extensionContent .seoActionCode {
display: inline-flex;
align-items: center;
gap: 8px;
flex: 0 0 auto;
}
#extensionContent .seoToggleLabel {
font-size: 11px;
margin: 0;
color: #969696;
}
#extensionContent .seoToggleSwitch {
transform: scale(0.82);
transform-origin: center;
margin: 0;
}
#extensionContent .seoPageSaveStatus {
float: right;
font-size: 11px;
min-width: 72px;
text-align: right;
}
#extensionContent #seoPagesList label {
font-size: 11px;
color: #969696;
}
#extensionContent #seoPagesList .seoForm {
font-size: 12.5px;
padding: 8px 10px;
border-radius: 8px;
border-color: #3a3b3c;
}
#extensionContent .codeIcon {
background-image: url('../img/general/code.svg');
background-size: 22px;
width: 32px;
height: 32px;
display: block;
cursor: pointer;
background-color: #333435;
background-position: center;
background-repeat: no-repeat;
border: 1px solid #3a3b3c;
border-radius: 9px;
transition: border-color 0.2s ease, background-color 0.2s ease;
margin-top: 0;
}
#extensionContent .codeIcon:hover {
background-color: #3797f1;
border-color: #3797f1;
}
#extensionContent .iSeoCodePreview {
margin: 0;
padding: 16px;
font-size: 12px;
line-height: 1.5;
color: #e8e8e8;
background: #1e1f20;
border: 1px solid #3a3b3c;
border-radius: 10px;
max-height: 70vh;
overflow: auto;
}
#extensionContent .titleCheckBar,
#extensionContent .descriptionCheckBar {
height: 5px;
margin-top: 6px;
background: #2a2b2c;
border-radius: 3px;
overflow: hidden;
}
#extensionContent .titleCheckBar span,
#extensionContent .descriptionCheckBar span {
display: block;
height: 100%;
border-radius: 3px;
transition: width 0.2s ease, background-color 0.2s ease;
}
#extensionContent .seoPageEditModalCard {
padding: 4px 0;
}
#extensionContent .seoPageEditModalCard .seoPageCard {
margin-bottom: 0;
border: none;
padding: 0;
background: transparent;
}
#extensionContent .iSeoErrorReportList {
max-height: min(60vh, 420px);
overflow-y: auto;
margin-top: 12px;
}
#extensionContent .iSeoErrorReportGroup {
margin-bottom: 16px;
}
#extensionContent .iSeoErrorReportMessage {
margin: 0 0 6px;
font-size: 0.95em;
line-height: 1.45;
}
#extensionContent .iSeoErrorReportPages {
margin: 0;
padding-left: 1.2em;
font-size: 0.9em;
color: #b8b8b8;
}
#extensionContent .iSeoErrorReportPages li {
margin-bottom: 4px;
}
#extensionContent .iFieldGrid .form-group {
margin-bottom: 16px;
}
#extensionContent a.buttonSecondary {
display: inline-flex;
align-items: center;
justify-content: center;
text-decoration: none;
color: #d0d0d0;
}
#extensionContent a.buttonSecondary:hover {
color: #ffffff;
}
@media only screen and (max-width: 768px) {
#extensionContent .seoPageRow {
grid-template-columns: 1fr;
gap: 8px;
padding: 14px 16px;
}
#extensionContent .seoPageRowHeader {
display: none;
}
#extensionContent .seoPageRowCheck {
justify-content: flex-start;
}
#extensionContent .seoPageRowActions {
justify-content: flex-start;
flex-wrap: wrap;
}
#extensionContent .iSeoToolbarActions {
width: 100%;
}
#extensionContent .iSeoToolbarActions .button {
width: 100%;
}
}
/* ----- end of components modernization ----- */
/*
* Panel list toolbars — diretriz para busca em listas modernizadas
* Desktop (row): .panelListSearchWrap usa flex: 1 1 auto + min-width: 0.
* Mobile (column): não usar flex-basis em px no search (vira altura e estica o campo).
* Sempre combinar .panelListToolbar + .panelListSearchWrap no HTML do toolbar.
*/
.panelListToolbar {
display: flex;
flex-wrap: wrap;
gap: 12px;
align-items: stretch;
}
.panelListSearchWrap {
position: relative;
flex: 1 1 auto;
min-width: 0;
max-width: 100%;
}
.panelListFilterWrap {
flex: 0 1 auto;
min-width: 0;
max-width: 100%;
}
@media only screen and (max-width: 768px) {
.panelListToolbar,
.websitesListToolbar,
.pagesToolbar,
.usersToolbar,
.accessToolbar,
.iVisitToolbar,
#extensionContent .iSeoToolbar {
flex-direction: column;
align-items: stretch;
}
.panelListSearchWrap,
.websitesListSearchWrap,
.pagesSearchWrap,
.usersSearch,
.accessSearch,
.iVisitSearchWrap,
#extensionContent .iSeoToolbarSearch,
.panelListFilterWrap,
.websitesListFilterWrap {
flex: 0 0 auto;
width: 100%;
max-width: 100%;
min-width: 0;
}
.iVisitSearchWrap {
max-width: 100%;
}
}
#websiteDashboard p{
font-size:13px;
}
.validDomain {
padding: 0;
margin: 0;
font-size: 10px !important;
color: #63ffa7;
}
.invalidDomain {
padding: 0;
margin: 0;
font-size: 10px !important;
color: #ff7373;
}
/*refresh page */
.pageListToRefresh {
display:flex;
}
.refreshPageIcon {
background-image: url('../img/general/refresh.svg');
background-size:contain;
width:18px;
height:18px;
margin-right:5px;
transition:0.3s ease;
background-repeat:no-repeat;
}
/* edit online store */
#templateInstallIcon {
width: 100%;
height: 100%;
background-image: url('../img/general/templateInstall.svg');
background-size: contain;
background-position: center;
background-repeat: no-repeat;
}
#templateBlocks {
width: 100%;
height: 100%;
background-image: url('../img/general/templateBlocks.svg');
background-size: contain;
background-position: center;
background-repeat: no-repeat;
}
#templateStorePages {
width: 100%;
height: 100%;
background-image: url('../img/general/templatePages.svg');
background-size: contain;
background-position: center;
background-repeat: no-repeat;
}
#templateLayouts {
width: 100%;
height: 100%;
background-image: url('../img/general/templateLayouts.svg');
background-size: contain;
background-position: center;
background-repeat: no-repeat;
}
#templateMail {
width: 100%;
height: 100%;
background-image: url('../img/general/templateMail.svg');
background-size: contain;
background-position: center;
background-repeat: no-repeat;
}
/*ONLY DESKTOP ADJUSTS GOES HERE FOR MIN 600*/
@media only screen and (min-width: 600px) {
.modalSmaller{
height: 50%;
width: 50%;
}
}
/*MOBILE ADJUSTS GOES HERE FOR MAX 600*/
@media only screen and (max-width: 600px) {
.sponsorEco {
text-align:center;
}
#iMain {
margin-left:10px;
margin-right:10px;
padding-bottom:100px;
}
#iHeader {
margin-left:10px;
}
#Navigation {
width:100%;
height:72px;
top:auto;
bottom:0;
overflow-x:auto;
display:flex;
margin-bottom:0;
padding-bottom:0;
overflow-y:hidden;
z-index:20;
border-right:none;
scrollbar-width: thin;
scrollbar-color: #888 #f1f1f1;
}
#Navigation::-webkit-scrollbar {
height: 4px;
}
#Navigation::-webkit-scrollbar-thumb {
background: #888;
border-radius: 10px;
}
#Navigation::-webkit-scrollbar-track {
background: #f1f1f1;
border-radius: 10px;
}
.navigationProfileCard {
display: flex;
flex-direction: row;
align-items: stretch;
flex-shrink: 0;
align-self: center;
margin: 8px 0 8px 8px;
padding: 0;
border: 1px solid #333;
border-radius: 10px;
background: #252525;
overflow: hidden;
max-height: 56px;
}
.navigationProfileCard .navigationUserLink {
display: flex;
flex: 0 0 48px;
width: 48px;
min-width: 48px;
max-width: 48px;
padding: 0;
border-right: 1px solid #333;
text-decoration: none;
align-items: center;
justify-content: center;
}
.navigationUserRow {
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
width: 100%;
margin: 0;
}
.navigationUserAvatar {
width: auto;
text-align: center;
padding: 0;
}
.navigationUserAvatar img {
width: 30px;
height: 30px;
margin: 0;
}
.navigationUserLink {
display:inline-block;
width:75px;
}
.navigationModoSwitch {
display: flex;
flex-direction: row;
align-items: center;
justify-content: center;
gap: 4px;
width: auto;
min-width: 0;
margin: 0;
padding: 0 8px;
border: none;
border-radius: 0;
background: transparent;
}
.navigationModoLabelWrap,
.navigationModoValueWrap {
flex-direction: row;
align-items: center;
gap: 4px;
}
.navigationModoLabel {
display: none;
}
#menuThemeLabel {
font-size: 10px;
line-height: 1;
color: #a1a1aa;
white-space: nowrap;
}
.navigationModoIcon {
width: 18px;
height: 18px;
flex-shrink: 0;
}
.navigationModoSwitch[data-theme="system"] .navigationModoIcon {
width: 30px;
background-size: 14px, 14px;
}
.navigationModoTrack {
display: none;
}
.navigationMobileDivider {
display: block;
width: 1px;
flex-shrink: 0;
align-self: stretch;
margin: 8px 4px;
background: #3a3a3a;
}
.navigationMenuScroll {
display: flex;
flex: 1 1 auto;
min-width: 0;
overflow-x: auto;
align-items: stretch;
gap: 8px;
padding: 0 10px 0 4px;
}
.navigationMenuItem {
display: inline-flex;
flex-direction: column;
align-items: center;
justify-content: flex-end;
width: auto;
min-width: 76px;
margin: 0;
background-size: 22px;
background-position: center 14px;
padding: 34px 10px 10px 10px;
font-size: 11px;
text-align: center;
height: 72px;
border-radius: 0;
letter-spacing: 0.2px;
box-sizing: border-box;
flex-shrink: 0;
}
.navigationMenuItem.navigationMenuItemActive {
background-color: #1e3a5f;
color: #3897F1 !important;
}
.navigationMenuItem.adminUserEffect {
border-left: none !important;
border-top: 3px solid #ff6a6a !important;
padding: 31px 10px 10px 10px !important;
margin-top: 0;
}
.navigationMenuItem span {
width: 80px;
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
display: inline-block;
z-index: 2;
}
.navigationUserName {
display:none;
}
#notLoggedContent {
margin-left:0px;
}
.modal {
width:95%;
height:98%;
position:fixed;
}
.modalHeader {
position: fixed;
width: inherit;
background-color: #2b2b2b;
box-shadow: 0 3px 3px #222, inset 0 5px 20px 10px #222020;
padding: 8px 5px 2px 5px;
display: flex;
border-top-left-radius: 10px;
border-top-right-radius: 10px;
}
.modalHeader h2 {
margin:5px 0 0 10px;
font-size:15px;
font-weight:normal;
}
.pageCodeButtons {
top: 0;
background-color: #2b2b2b;
height: 61px;
width: 100%;
left: 0;
text-align: center;
margin-top: 0;
padding-top: 2px;
padding-right: 10px;
box-shadow: 0 2px 5px black;
}
}
/*MONACO EDITOR CSS HACKS*/
.codicon-find-collapsed {
width:15px;
padding:0;
}
.codicon-find-expanded {
width:15px;
padding:0;
}
.suggest-widget {
background-color: #33333375;
backdrop-filter: blur(1px);
border: 1px solid #333;
border-radius:5px;
}
/* -------------------------------- GRIDJS CSS -------------------------------- */
.gridjs-head button, .gridjs-footer button {
cursor: pointer;
background-color: transparent;
background-image: none;
padding: 0;
margin: 0;
border: none;
outline: none; }
.gridjs-temp {
position: relative; }
.gridjs-head {
width: 100%;
margin-bottom: 5px;
padding: 5px 1px; }
.gridjs-head::after {
content: '';
display: block;
clear: both; }
.gridjs-head:empty {
padding: 0;
border: none; }
.gridjs-container {
overflow: hidden;
display: inline-block;
padding: 2px;
color: #fff;
position: relative;
z-index: 0; }
.gridjs-footer {
display: block;
position: relative;
width: 100%;
z-index: 5;
padding: 12px 24px;
border-top: 1px solid #1a1814;
background-color: #000;
box-shadow: 0 1px 3px 0 rgba(255,255,255, 0.1), 0 1px 2px 0 rgba(255,255,255, 0.26);
border-radius: 0 0 8px 8px;
border-bottom-width: 1px;
border-color: #1a1814; }
.gridjs-footer:empty {
padding: 0;
border: none; }
input.gridjs-input {
outline: none;
background-color: #3a3b3c;
border: 1px solid #2d2923;
border-radius: 5px;
padding: 10px 13px;
font-size: 14px;
line-height: 1.45;
-webkit-appearance: none;
-moz-appearance: none;
color:#999;
appearance: none; }
input.gridjs-input:focus {
box-shadow: 0 0 0 3px rgba(66, 57, 46, 0.5);
border-color: #262626;
color:white;
}
.gridjs-pagination {
color: #c2bfbb; }
.gridjs-pagination::after {
content: '';
display: block;
clear: both; }
.gridjs-pagination .gridjs-summary {
float: left;
margin-top: 5px; }
.gridjs-pagination .gridjs-pages {
float: right; }
.gridjs-pagination .gridjs-pages button {
padding: 5px 14px;
border: 1px solid #2d2923;
background-color: #000;
border-right: none;
outline: none;
-webkit-user-select: none;
-moz-user-select: none;
-ms-user-select: none;
user-select: none; }
.gridjs-pagination .gridjs-pages button:focus {
box-shadow: 0 0 0 2px rgba(106,66,12, 0.5); }
.gridjs-pagination .gridjs-pages button:hover {
background-color: #080808;
color: #c3bda8;
outline: none; }
.gridjs-pagination .gridjs-pages button:disabled,
.gridjs-pagination .gridjs-pages button[disabled],
.gridjs-pagination .gridjs-pages button:hover:disabled {
cursor: default;
background-color: #000;
color: #948d7f; }
.gridjs-pagination .gridjs-pages button.gridjs-spread {
cursor: default;
box-shadow: none;
background-color: #000; }
.gridjs-pagination .gridjs-pages button.gridjs-currentPage {
background-color: #080808;
font-weight: bold; }
.gridjs-pagination .gridjs-pages button:last-child {
border-bottom-right-radius: 6px;
border-top-right-radius: 6px;
border-right: 1px solid #2d2923; }
.gridjs-pagination .gridjs-pages button:first-child {
border-bottom-left-radius: 6px;
border-top-left-radius: 6px; }
button.gridjs-sort {
float: right;
height: 24px;
width: 13px;
background-color: transparent;
background-repeat: no-repeat;
background-position-x: center;
cursor: pointer;
padding: 0;
margin: 0;
border: none;
outline: none;
background-size: contain; }
button.gridjs-sort-neutral {
opacity: 0.3;
background-image: url("data:image/svg+xml;base64,PHN2ZyB2ZXJzaW9uPSIxLjEiIGlkPSJDYXBhXzEiIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyIgeG1sbnM6eGxpbms9Imh0dHA6Ly93d3cudzMub3JnLzE5OTkveGxpbmsiIHg9IjBweCIgeT0iMHB4IgoJIHdpZHRoPSI0MDEuOTk4cHgiIGhlaWdodD0iNDAxLjk5OHB4IiB2aWV3Qm94PSIwIDAgNDAxLjk5OCA0MDEuOTk4IiBzdHlsZT0iZW5hYmxlLWJhY2tncm91bmQ6bmV3IDAgMCA0MDEuOTk4IDQwMS45OTg7IgoJIHhtbDpzcGFjZT0icHJlc2VydmUiPgo8Zz4KCTxnPgoJCTxwYXRoIGQ9Ik03My4wOTIsMTY0LjQ1MmgyNTUuODEzYzQuOTQ5LDAsOS4yMzMtMS44MDcsMTIuODQ4LTUuNDI0YzMuNjEzLTMuNjE2LDUuNDI3LTcuODk4LDUuNDI3LTEyLjg0NwoJCQljMC00Ljk0OS0xLjgxMy05LjIyOS01LjQyNy0xMi44NUwyMTMuODQ2LDUuNDI0QzIxMC4yMzIsMS44MTIsMjA1Ljk1MSwwLDIwMC45OTksMHMtOS4yMzMsMS44MTItMTIuODUsNS40MjRMNjAuMjQyLDEzMy4zMzEKCQkJYy0zLjYxNywzLjYxNy01LjQyNCw3LjkwMS01LjQyNCwxMi44NWMwLDQuOTQ4LDEuODA3LDkuMjMxLDUuNDI0LDEyLjg0N0M2My44NjMsMTYyLjY0NSw2OC4xNDQsMTY0LjQ1Miw3My4wOTIsMTY0LjQ1MnoiLz4KCQk8cGF0aCBkPSJNMzI4LjkwNSwyMzcuNTQ5SDczLjA5MmMtNC45NTIsMC05LjIzMywxLjgwOC0xMi44NSw1LjQyMWMtMy42MTcsMy42MTctNS40MjQsNy44OTgtNS40MjQsMTIuODQ3CgkJCWMwLDQuOTQ5LDEuODA3LDkuMjMzLDUuNDI0LDEyLjg0OEwxODguMTQ5LDM5Ni41N2MzLjYyMSwzLjYxNyw3LjkwMiw1LjQyOCwxMi44NSw1LjQyOHM5LjIzMy0xLjgxMSwxMi44NDctNS40MjhsMTI3LjkwNy0xMjcuOTA2CgkJCWMzLjYxMy0zLjYxNCw1LjQyNy03Ljg5OCw1LjQyNy0xMi44NDhjMC00Ljk0OC0xLjgxMy05LjIyOS01LjQyNy0xMi44NDdDMzM4LjEzOSwyMzkuMzUzLDMzMy44NTQsMjM3LjU0OSwzMjguOTA1LDIzNy41NDl6Ii8+Cgk8L2c+CjwvZz4KPGc+CjwvZz4KPGc+CjwvZz4KPGc+CjwvZz4KPGc+CjwvZz4KPGc+CjwvZz4KPGc+CjwvZz4KPGc+CjwvZz4KPGc+CjwvZz4KPGc+CjwvZz4KPGc+CjwvZz4KPGc+CjwvZz4KPGc+CjwvZz4KPGc+CjwvZz4KPGc+CjwvZz4KPGc+CjwvZz4KPC9zdmc+");
background-position-y: center; filter: invert(100%);}
button.gridjs-sort-asc {
background-image: url("data:image/svg+xml;base64,PHN2ZyB2ZXJzaW9uPSIxLjEiIGlkPSJDYXBhXzEiIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyIgeG1sbnM6eGxpbms9Imh0dHA6Ly93d3cudzMub3JnLzE5OTkveGxpbmsiIHg9IjBweCIgeT0iMHB4IgoJIHdpZHRoPSIyOTIuMzYycHgiIGhlaWdodD0iMjkyLjM2MXB4IiB2aWV3Qm94PSIwIDAgMjkyLjM2MiAyOTIuMzYxIiBzdHlsZT0iZW5hYmxlLWJhY2tncm91bmQ6bmV3IDAgMCAyOTIuMzYyIDI5Mi4zNjE7IgoJIHhtbDpzcGFjZT0icHJlc2VydmUiPgo8Zz4KCTxwYXRoIGQ9Ik0yODYuOTM1LDE5Ny4yODdMMTU5LjAyOCw2OS4zODFjLTMuNjEzLTMuNjE3LTcuODk1LTUuNDI0LTEyLjg0Ny01LjQyNHMtOS4yMzMsMS44MDctMTIuODUsNS40MjRMNS40MjQsMTk3LjI4NwoJCUMxLjgwNywyMDAuOTA0LDAsMjA1LjE4NiwwLDIxMC4xMzRzMS44MDcsOS4yMzMsNS40MjQsMTIuODQ3YzMuNjIxLDMuNjE3LDcuOTAyLDUuNDI1LDEyLjg1LDUuNDI1aDI1NS44MTMKCQljNC45NDksMCw5LjIzMy0xLjgwOCwxMi44NDgtNS40MjVjMy42MTMtMy42MTMsNS40MjctNy44OTgsNS40MjctMTIuODQ3UzI5MC41NDgsMjAwLjkwNCwyODYuOTM1LDE5Ny4yODd6Ii8+CjwvZz4KPGc+CjwvZz4KPGc+CjwvZz4KPGc+CjwvZz4KPGc+CjwvZz4KPGc+CjwvZz4KPGc+CjwvZz4KPGc+CjwvZz4KPGc+CjwvZz4KPGc+CjwvZz4KPGc+CjwvZz4KPGc+CjwvZz4KPGc+CjwvZz4KPGc+CjwvZz4KPGc+CjwvZz4KPGc+CjwvZz4KPC9zdmc+");
background-position-y: 35%;
background-size: 10px; filter: invert(100%);}
button.gridjs-sort-desc {
background-image: url("data:image/svg+xml;base64,PHN2ZyB2ZXJzaW9uPSIxLjEiIGlkPSJDYXBhXzEiIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyIgeG1sbnM6eGxpbms9Imh0dHA6Ly93d3cudzMub3JnLzE5OTkveGxpbmsiIHg9IjBweCIgeT0iMHB4IgoJIHdpZHRoPSIyOTIuMzYycHgiIGhlaWdodD0iMjkyLjM2MnB4IiB2aWV3Qm94PSIwIDAgMjkyLjM2MiAyOTIuMzYyIiBzdHlsZT0iZW5hYmxlLWJhY2tncm91bmQ6bmV3IDAgMCAyOTIuMzYyIDI5Mi4zNjI7IgoJIHhtbDpzcGFjZT0icHJlc2VydmUiPgo8Zz4KCTxwYXRoIGQ9Ik0yODYuOTM1LDY5LjM3N2MtMy42MTQtMy42MTctNy44OTgtNS40MjQtMTIuODQ4LTUuNDI0SDE4LjI3NGMtNC45NTIsMC05LjIzMywxLjgwNy0xMi44NSw1LjQyNAoJCUMxLjgwNyw3Mi45OTgsMCw3Ny4yNzksMCw4Mi4yMjhjMCw0Ljk0OCwxLjgwNyw5LjIyOSw1LjQyNCwxMi44NDdsMTI3LjkwNywxMjcuOTA3YzMuNjIxLDMuNjE3LDcuOTAyLDUuNDI4LDEyLjg1LDUuNDI4CgkJczkuMjMzLTEuODExLDEyLjg0Ny01LjQyOEwyODYuOTM1LDk1LjA3NGMzLjYxMy0zLjYxNyw1LjQyNy03Ljg5OCw1LjQyNy0xMi44NDdDMjkyLjM2Miw3Ny4yNzksMjkwLjU0OCw3Mi45OTgsMjg2LjkzNSw2OS4zNzd6Ii8+CjwvZz4KPGc+CjwvZz4KPGc+CjwvZz4KPGc+CjwvZz4KPGc+CjwvZz4KPGc+CjwvZz4KPGc+CjwvZz4KPGc+CjwvZz4KPGc+CjwvZz4KPGc+CjwvZz4KPGc+CjwvZz4KPGc+CjwvZz4KPGc+CjwvZz4KPGc+CjwvZz4KPGc+CjwvZz4KPGc+CjwvZz4KPC9zdmc+");
background-position-y: 65%;
background-size: 10px; filter: invert(100%);}
button.gridjs-sort:focus {
outline: none; }
table.gridjs-table {
max-width: 100%;
border-collapse: collapse;
text-align: left;
display: table;
margin: 0;
padding: 0;
overflow: auto;
table-layout: fixed; }
.gridjs-tbody {
background-color: #000; }
td.gridjs-td {
border: 1px solid #1a1814;
padding: 12px 24px;
background-color: #222020;
box-sizing: content-box;
word-break:break-word;
overflow:auto;
text-overflow:unset;
white-space:break-spaces;
}
td.gridjs-td:first-child {
border-left: none; }
td.gridjs-td:last-child {
border-right: none; }
td.gridjs-message {
text-align: center; }
th.gridjs-th {
position: relative;
color: #00afef;
background-color: #171717;
border: 1px solid #1a1814;
border-top: none;
padding: 5px 24px;
-webkit-user-select: none;
-moz-user-select: none;
-ms-user-select: none;
user-select: none;
box-sizing: border-box;
white-space: nowrap;
outline: none;
vertical-align: middle;
font-size:12px; }
th.gridjs-th .gridjs-th-content {
text-overflow: ellipsis;
overflow: hidden;
width: 100%;
float: left; }
th.gridjs-th-sort {
cursor: pointer; }
th.gridjs-th-sort .gridjs-th-content {
width: calc(100% - 15px); margin-top:4px;}
th.gridjs-th-sort:hover {
background-color: #1a1814; }
th.gridjs-th-sort:focus {
background-color: #1a1814; }
th.gridjs-th-fixed {
position: sticky;
box-shadow: 0 1px 0 0 #1a1814; }
@supports (-moz-appearance: none) {
th.gridjs-th-fixed {
box-shadow: 0 0 0 1px #1a1814; } }
th.gridjs-th:first-child {
border-left: none; }
th.gridjs-th:last-child {
border-right: none; }
.gridjs-tr {
border: none;
margin-bottom:5px;
}
.gridjs-tr-selected td {
background-color: #140a00; }
.gridjs-tr:last-child td {
border-bottom: 0; }
.gridjs *,
.gridjs :after,
.gridjs :before {
box-sizing: border-box; }
.gridjs-wrapper {
position: relative;
z-index: 1;
overflow: auto;
width: 100%;
-webkit-font-smoothing: antialiased;
-moz-osx-font-smoothing: grayscale;
box-shadow: 0 1px 3px 0 rgba(0, 0, 0, 0.1), 0 1px 2px 0 rgba(0, 0, 0, 0.26);
border-radius: 8px 8px 0 0;
display: block;
border-top-width: 1px;
border-color: #1a1814; }
.gridjs-wrapper:nth-last-of-type(2) {
border-radius: 8px;
border-bottom-width: 1px; }
.gridjs-search {
float: left; }
.gridjs-search-input {
width: 250px; }
.gridjs-loading-bar {
z-index: 10;
position: absolute;
left: 0;
right: 0;
top: 0;
bottom: 0;
background-color: #000;
opacity: 0.5; }
.gridjs-loading-bar::after {
position: absolute;
top: 0;
right: 0;
bottom: 0;
left: 0;
transform: translateX(-100%);
background-image: linear-gradient(90deg, rgba(51,51,51, 0) 0, rgba(51,51,51, 0.2) 20%, rgba(51,51,51, 0.5) 60%, rgba(51,51,51, 0));
-webkit-animation: shimmer 2s infinite;
animation: shimmer 2s infinite;
content: ''; }
@-webkit-keyframes shimmer {
100% {
transform: translateX(100%); } }
@keyframes shimmer {
100% {
transform: translateX(100%); } }
.gridjs-td .gridjs-checkbox {
display: block;
margin: auto;
cursor: pointer; }
.gridjs-resizable {
position: absolute;
top: 0;
bottom: 0;
right: 0;
width: 5px; }
.gridjs-resizable:hover {
cursor: ew-resize;
background-color: #643d08; }
@media only screen and (max-width: 760px) {
td {
height:16px !important;
}
}
/* CSS Improvements for mobile */
.gridjs-footer .gridjs-pagination .gridjs-pages button.gridjs-currentPage {
background-color: #1256a8; font-weight: bold;
}
.gridjs-tbody > .gridjs-tr:hover { filter: brightness(1.1); }
.gridjs-tbody td>span { display: flex; gap: 5px; align-items: center; font-size: 11px; justify-content: center; }
.gridjs-footer, .gridjs-pagination .gridjs-pages button {
background-color: #171717; color: #f5f5f5; border: 1px solid #1a1814;
}
td.gridjs-td { padding: 12px; }
th.gridjs-th input[type="checkbox"] { width: 25px; height: 13px; margin-inline: auto; }
th[data-column-id="selecionar"] .gridjs-th-content { display: none; }
@media (max-width: 992px) {
table.gridjs-table { overflow: auto; }
td.gridjs-td, th.gridjs-th { padding: 5px; text-align: center; }
}
/* -------------------------------- END GRIDJS CSS -------------------------------- */
/* File Explorer */
.fileExplorerRowHeader {
font-weight: 700;
border-bottom: 1px solid #7f7f7f;
padding-bottom: 6px;
margin-bottom: 6px;
}
.fileExplorerRowItem {
border-bottom: 1px solid rgba(127, 127, 127, 0.22);
padding: 8px 0;
}
.fileExplorerDateCol {
white-space: nowrap;
font-size: 11px;
}