@import url('https://fonts.googleapis.com/css2?family=Montserrat:ital,wght@0,100;0,200;0,300;0,400;0,500;0,600;0,700;0,800;0,900;1,100;1,200;1,300;1,400;1,500;1,600;1,700;1,800;1,900&display=swap');
:root{
    --color-primary: #00cc70;
    --color-secondary: #00cc70;
    --color-emphasis: #f5f7fa;
    --color-bg: #f5f7fa;
    --color-bg_2: #f5f5f5;
    --color-opacity: #3b3aef1f;
    --color-font: #090909;
    --color-border: #1d262b;
    --color-shadow: #d5d5d5;
}
body{
    background: #111111;
    color: #f5f7fa;
    overflow-x: hidden;
    display: flex;
    flex-direction: column;
    min-height: 100vh;
}
body *{
    font-family: Montserrat;
}
::-webkit-scrollbar{
    width: 16px;
}
::-webkit-scrollbar-thumb{
    background-color: #212737;
    border-radius: 20px;
    border: 5px solid #111111;
}
::-webkit-scrollbar-track{
    background: #111111;
}
::-webkit-scrollbar-corner {
  background: transparent;
}

#btn-subscrever,#btn-enviar{
    display: none !important;
}

.drag-scroll{
    user-select: none;
}
.drag-scroll.active{
    cursor: grabbing;
}

.ou{
    display: flex;
    justify-content: center;
    align-items: center;
    position: relative;
    margin: 30px 0;
}
.ou:before{
    content: '';
    width: 100%;
    height: 1px;
    background: var(--color-border);
}
.ou span{
    position: absolute;
    background: #1f1f1f;
    padding: 0 10px;
}

.upload-image{
    position: relative;
}
.upload-image input{
    background: 0 !important;
    border: 0 !important;
    padding: 0 !important;
    width: 0 !important;
    height: 0 !important;
    position: absolute;
}
.upload-image > div:first-of-type{
    background: #111111;
    min-width: 90px;
    width: 90px;
    height: 90px;
    border-radius: 50%;
    display: flex;
    justify-content: center;
    align-items: center;
    margin: 0 auto;
    margin-bottom: 12px;
}
.upload-image > div:last-of-type{
    display: flex;
    flex-direction: column;
    align-items: center;
}
.upload-image [class*="btn-"]{
    margin-top: 12px;
}
.formulario .image{
    width: 100%;
    margin-top: 20px;
    border-top: 1px solid var(--color-border);
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 10px;
    padding-top: 20px;
}
.formulario .image img{
    width: 100%;
    max-width: 400px;
    display: block;
}

.formulario .color{
    border: 1px solid var(--color-border);
    padding: 10px;
    border-radius: 10px;
    display: flex;
    align-items: center;
    gap: 10px;
}
.formulario .color > div{
    min-width: 42px;
    width: 42px;
    height: 42px;
    display: flex;
    justify-content: center;
    align-items: center;
    overflow: hidden;
    border-radius: 10px;
}
.formulario .color > div input{
    min-width: 50px;
    width: 50px !important;
    height: 50px;
    padding: 0 !important;
    border: 0 !important;
    border-radius: 0 !important;
}

.catalogo .icon,
.catalogo .item .icon{
    background: rgba(0, 204, 112, .1);
    color: var(--color-primary);
    width: 48px;
    height: 48px;
    display: flex;
    justify-content: center;
    align-items: center;
    border-radius: 12px;
}
.catalogo .item .icon.color-primary{
    background: rgba(0, 204, 112, .1);
    color: var(--color-primary);
    font-size: 18px;
    font-weight: bold;
}
.catalogo .icon svg,
.catalogo .item .icon svg{
    width: 24px;
    height: 24px;
}
.catalogo .itens{
    display: flex;
    flex-wrap: wrap;
    gap: 20px;
    margin-top: 20px;
    margin-bottom: 36px;
}
.modal-1 .catalogo .itens{
    margin-bottom: 40px !important;
}
.catalogo .item{
    display: block;
    background: #010101;
    border-radius: 12px;
    padding: 20px;
    width: calc(33.333333% - 14px);
    border: 1px solid var(--color-border);
    position: relative;
    font-size: 14px;
}
.modal-1 .catalogo .item{
    width: calc(50% - 10px);
}
.catalogo .item .icon{
    background: #11180f;
    color: #5e7c57;
}
.catalogo .tag{
    background: #11180f;
    color: #bcacac;
}
.catalogo .item button{
    display: inline-flex;
    justify-content: center;
    align-items: center;
    gap: 8px;
    text-decoration: none;
    background: 0;
    padding: 9px 14px;
    border-radius: 7px;
    font-size: 14px;
    text-align: center;
    cursor: pointer;
    transition: .3s;
    color: #fff;
    border: 0;
    font-weight: 600;
}
.catalogo .item button:hover,
.catalogo .item button.selected{
    background: var(--color-primary);
    color: #010101;
}
.catalogo .item .footer{
    display: flex;
    justify-content: space-between;
    align-items: center;
    border-top: 1px solid var(--color-border);
    margin-top: 16px;
    padding-top: 16px;
}
.catalogo .popular{
    background-image: linear-gradient(to right, rgb(245, 158, 11), rgb(249, 115, 22));
    font-size: 10px;
    position: absolute;
    top: -0.5rem;
    right: -0.5rem;
    border-radius: 100px;
    display: flex;
    align-items: center;
    gap: 3px;
    padding: 4px 10px;
    font-weight: 500;
    animation: pulse 2s infinite;
}
.catalogo .popular svg{
    width: 12px;
    height: 12px;
}

.catalogo .pacote{
    width: 100%;
    border: 2px solid rgba(0, 203, 230, 0.4);
    background: linear-gradient(135deg, #0a404c, #0b2631);
}
.catalogo .pacote .recomendado{
    background: var(--color-primary);
    color: #010101;
    font-size: 10px;
    border-radius: 100px;
    display: inline-flex;
    align-items: center;
    gap: 3px;
    padding: 4px 10px;
    font-weight: 500;
    margin-bottom: 20px;
}
.catalogo .pacote .recomendado svg{
    width: 12px;
    height: 12px;
}
.catalogo .pacote .icon{
    width: 60px;
    height: 60px;
    background: var(--color-primary);
    color: #010101;
    box-shadow: rgba(0, 0, 0, 0) 0px 0px 0px 0px, rgba(0, 0, 0, 0) 0px 0px 0px 0px, rgba(0, 203, 230, 0.3) 0px 20px 25px -5px, rgba(0, 203, 230, 0.3) 0px 8px 10px -6px;
}
.catalogo .pacote .vantagens{
    background-color: rgba(12, 30, 39, 0.5);
    padding: 10px;
    border-radius: 7px;
    margin-top: 20px;
}
.catalogo .pacote .vantagens .icon{
    min-width: 20px;
    width: 20px;
    height: 20px;
    background-color: rgba(0, 203, 230, 0.2);
    display: flex;
    justify-content: center;
    align-items: center;
    border-radius: 50%;
    box-shadow: none;
}
.catalogo .pacote .vantagens .icon svg{
    stroke: rgb(0, 203, 230);
    width: 12px;
    height: 12px;
}
.catalogo .pacote h4{
    margin: 0;
    font-weight: 600;
    font-size: 28px;
}
.catalogo .pacote .footer{
    border: 0;
}
.catalogo .pacote .title small{
    color: #8b8b8b;
}

.btn-cart-float{
    position: fixed;
    top: 110px;
    right: 20px;
    border-radius: 50%;
    width: 55px;
    height: 55px;
    padding: 0;
    z-index: 999;
    background: var(--color-primary);
    color: #000;
    border: 0;
}
.btn-cart-float:focus{
    outline: none;
}
.btn-cart-float svg{
    width: 20px;
    height: 20px;
}
.btn-cart-float span{
    background: #fff;
    position: absolute;
    top: -5px;
    right: -5px;
    color: #000;
    width: 20px;
    height: 20px;
    display: flex;
    justify-content: center;
    align-items: center;
    border-radius: 50%;
    font-size: 12px;
    font-weight: 700;
    box-shadow: 0 0 5px 5px rgba(0, 0, 0, .1);
}
.cart-float{
    display: none;
    position: fixed;
    top: 175px;
    right: 20px;
    max-width: calc(100vw - 40px) !important;
    max-height: calc(100vh - 250px);
    box-shadow: 0 0 10px 10px rgba(0, 0, 0, .1);
    overflow: auto;
    z-index: 998;
    background: #171717;
    border: 1px solid var(--color-border);
    max-width: 1050px;
    margin: 0 auto;
    border-radius: 10px;
    padding: 20px;
}
.cart-float.open{
    display: block;
}
.cart-float .vazio{
    min-width: 220px;
    padding: 10px;
    display: block;
    text-align: center;
}
.cart-float > span{
    cursor: pointer;
    position: absolute;
    top: 5px;
    right: 5px;
    background: 0;
}
.cart-float > span svg{
    width: 20px;
    height: 20px;
}
.cart-float .main > div{
    border-bottom: 1px solid #ffffff38;
    padding: 10px;
}
.cart-float .main > div b{
    margin-bottom: 5px;
    display: block;
}
.cart-float .main > div > div{
    display: flex;
    align-items: center;
    flex-wrap: wrap;
}
.cart-float .quantidade{
    display: flex;
    border: 1px solid #ffffff38;
    margin: 0 20px;
    border-radius: 100px;
}
.cart-float .quantidade input{
    background: 0 !important;
    padding: 0 !important;
    border: 0 !important;
    outline: none !important;
    text-align: center;
    width: 40px !important;
}
.cart-float .quantidade button{
    color: #f5f7fa;
    border: 0;
    padding: 0;
    display: flex;
    align-items: center;
    padding: 6px;
    background: 0 !important;
    outline: none !important;
}
.cart-float .main > div > div span{
    color: #f00;
    text-decoration: underline;
    cursor: pointer;
}
.cart-float .footer > div > div{
    display: flex;
    justify-content: space-between;
    align-items: center;
    flex-wrap: wrap;
    margin-top: 20px;
    gap: 20px;
}

.box.resumo section > div > div{
    border-bottom: 1px solid #494949;
    padding: 10px;
}
.box.resumo section > div > div span{
    opacity: .7;
}
.box.resumo .total{
    padding: 10px;
}
.box.pessoal label,
.modal-1 .checkout .pagamento > section > div > div label{
    width: 100%;
    margin-bottom: 20px;
}

body.atualizar .atualizar-briefing{
    display: none !important;
}

.tag-experiencia-premium{
    background: linear-gradient(to right, rgba(245, 158, 11, 0.2), rgba(249, 115, 22, 0.2));
    border: 1px solid rgba(245, 158, 11, 0.3);
    color: #f59e0b;
    display: inline-flex;
    align-items: center;
    gap: 5px;
    padding: 6px 12px;
    border-radius: 100px;
}
.catalogo .funil{
    width: calc(50% - 10px);
    border: 2px solid #5c4929;
}
.catalogo .funil .tag-premium{
    background: #fbbf24;
    color: #010101;
    font-size: 10px;
    border-radius: 100px;
    display: inline-flex;
    align-items: center;
    gap: 3px;
    padding: 4px 10px;
    font-weight: 600;
    margin-bottom: 20px;
}
.catalogo .funil .tag-lucas{
    background: #15aa5b47;
    color: #15aa5b;
    font-size: 10px;
    border-radius: 100px;
    display: inline-flex;
    align-items: center;
    gap: 3px;
    padding: 4px 10px;
    font-weight: 600;
    margin-bottom: 20px;
}
.catalogo .funil .tag-premium svg,
.catalogo .funil .tag-lucas svg{
    width: 12px;
    height: 12px;
}
.catalogo .funil .icon{
    width: 60px;
    height: 60px;
    background: linear-gradient(to right bottom, rgb(251, 191, 36), rgb(217, 119, 6));
    color: #010101;
    box-shadow: rgba(0, 0, 0, 0) 0px 0px 0px 0px, rgba(0, 0, 0, 0) 0px 0px 0px 0px, rgba(245, 158, 11, 0.2) 0px 10px 15px -3px, rgba(245, 158, 11, 0.2) 0px 4px 6px -4px;
}
.catalogo .funil .vantagens{
    background: rgba(251, 191, 36, .07);
    padding: 10px;
    border-radius: 7px;
    margin-top: 20px;
}
.catalogo .funil .vantagens .icon{
    min-width: 13px;
    width: 13px;
    height: 13px;
    background: rgba(251, 191, 36, .2);
    display: flex;
    justify-content: center;
    align-items: center;
    border-radius: 50%;
    box-shadow: none;
}
.catalogo .funil .vantagens .icon svg{
    color: #fbbf24;
    width: 7px;
    height: 7px;
}
.catalogo .funil h4{
    margin: 0;
    font-weight: 600;
    font-size: 28px;
}
.catalogo .funil .footer{
    border: 0;
}
.catalogo .funil .title small{
    color: #8b8b8b;
}
.catalogo .funil .btn-1{
    background-image: linear-gradient(to right, rgb(245, 158, 11), rgb(217, 119, 6));
}
.catalogo-gestor{
    width: 100%;
    border: 2px solid rgba(0, 203, 230, 0.4);
    background: linear-gradient(135deg, #0a404c, #0b2631);
    border-radius: 12px;
    padding: 40px;
    text-align: center;
    margin-top: 20px;
}
.catalogo-gestor .icon{
    background: rgba(0, 204, 112, .2);
    color: var(--color-primary);
    width: 64px;
    height: 64px;
    display: flex;
    justify-content: center;
    align-items: center;
    border-radius: 12px;
    margin: 0 auto;
    margin-bottom: 20px;
}
.catalogo-gestor h2{
    font-size: 24px;
}
.catalogo-gestor small{
    opacity: .7;
    max-width: 488px;
    display: block;
    margin: 0 auto;
    margin-bottom: 20px;
}

.creditos{
    display: flex;
    justify-content: end;
    margin-bottom: 10px;
}
.creditos div{
    position: sticky;
    top: 66px;
    background: #010101;
    display: inline-flex;
    align-items: center;
    padding: 5px 12px;
    border-radius: 100px;
    gap: 5px;
}
.creditos div svg{
    color: var(--color-primary);
    width: 18px;
    height: 18px;
}

.criativos{
    display: flex;
    gap: 20px;
    flex-wrap: wrap;
}
.criativos .criativo{
    width: calc(16.66666666666667% - 17px);
    background: #010101;
    border-radius: 12px;
    border: 1px solid var(--color-border);
    overflow: hidden;
}
.criativos .criativo .image{
    display: flex;
    justify-content: center;
    align-items: center;
    height: 140px;
    background: #10141d;
}
.criativos .criativo .image img{
    width: 100%;
    height: 100%;
    object-fit: cover;
}
.criativos .criativo .image svg{
    opacity: .3;
    width: 30px;
    height: 30px;
}
.criativos .criativo > div:last-child{
    padding: 20px;
}
.criativos .criativo small{
    display: block;
    color: #7d7d7d;
    margin-top: 10px;
}

#kanban ::-webkit-scrollbar-thumb,
.modal-1 ::-webkit-scrollbar-thumb{
    background-color: #212737;
    border-radius: 20px;
    border: 5px solid #1f1f1f;
}
#kanban ::-webkit-scrollbar-track,
.modal-1 ::-webkit-scrollbar-track{
    background: #1f1f1f;
}

#planilha{
    background: #1f1f1f;
    max-height: calc(100vh - 109px);
    overflow: auto;
    border: 1px solid #1f1f1f;
}
#planilha table{
    width: 100%;
}
#planilha th,
#planilha td{
    outline: 1px solid #1f1f1f;
    background: #111111;
    padding: 0px 10px;
    white-space: nowrap;
    min-height: 44px;
}
#planilha th{
    padding: 11px 10px;
}
#planilha td.sim{
    background: #15aa5b47;
}
#planilha td.nao{
    background: #aa151547;
}
#planilha td select{
    border: 0;
    min-width: 85px;
    background: 0 !important;
}
#planilha td select option{
    background: #111111 !important;
}
#planilha thead{
    position: sticky;
    top: 0px;
    z-index: 9;
}

/*audio::-webkit-media-controls-panel {
    background-color: #212737;
    color: white;
}*/
audio{
    max-width: 100%;
}

.select-multiple{
    position: relative;
}
.select-multiple > span{
    background: #010101;
    border: 0;
    padding: 10px 15px;
    border-radius: 10px;
    width: 100%;
    color: #f5f7fa;
    outline: none !important;
    border: 1px solid #010101;
    white-space: nowrap;
    display: inline-flex;
    justify-content: space-between;
    align-items: center;
    gap: 8px;
    cursor: pointer;
}
.select-multiple > span svg{
    stroke: #f5f7fa;
    width: 14px;
    height: 14px;
}
td .select-multiple > span{
    background: #111111;
    border-color: #111111;
}
.select-multiple > div{
    position: absolute;
    z-index: 10;
    background: #111111;
    color: #f5f7fa;
    border-radius: 10px;
    top: calc(100% + 4px);
    display: none;
    flex-direction: column;
    min-width: 100%;
    box-shadow: 0 0 10px -1px var(--color-border);
    max-height: 300px;
    overflow: auto;
}
.select-multiple > div.open{
    display: flex;
}
.select-multiple > div > b{
    padding: 10px 10px 0;
}
.select-multiple > div label{
    display: flex;
    align-items: center;
    gap: 7px;
    padding: 10px;
    cursor: pointer;
}
.select-multiple > div label input{
    padding: 0;
    min-width: 15px;
    margin: 0;
}
.select-multiple > div label span{
    /*white-space: nowrap;*/
}

footer{
    margin-left: 50px;
    padding: 5px;
    text-align: center;
}

.cursor-pointer{
    cursor: pointer;
}

.gradient-text{
    font-weight: bold;
    background: linear-gradient(to right, var(--color-primary), var(--color-secondary));
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
}

.aviso{
    background: #1f1f1f;
    padding: 10px;
    border-radius: 10px;
    margin-bottom: 24px;
    border: 1px solid;
}

textarea::-webkit-scrollbar-thumb{
    background-color: #111111;
    border-radius: 20px;
    border: 5px solid #1f1f1f;
}
textarea::-webkit-scrollbar-track{
    background: #1f1f1f;
}

input[type="date"]::-webkit-calendar-picker-indicator,
input[type="datetime-local"]::-webkit-calendar-picker-indicator{
  filter: invert(1);
}
input[type=range]{
    -webkit-appearance: none;
    appearance: none;
    display: inline-block;
    width: 100%;
    height: 8px;
    border-radius: 5px;
    background-color: #3071a9;
    outline: none;
    padding: 0 !important;
}
input[type=range]::-webkit-slider-thumb{
    -webkit-appearance: none;
    border: none;
    width: 15px;
    height: 15px;
    border-radius: 50% !important;
    background: var(--color-primary);
}
input[type=range]::-ms-range-thumb{
    -webkit-appearance: none;
    border: none;
    width: 15px;
    height: 15px;
    border-radius: 50% !important;
    background: var(--color-primary);
}
input[type=range]::-moz-range-thumb{
    -webkit-appearance: none;
    border: none;
    width: 15px;
    height: 15px;
    border-radius: 50% !important;
    background: var(--color-primary);
}
a{
    color: #f5f7fa;
    text-decoration: none;
}

input[type="checkbox"],input[type="radio"]{
    width: 15px !important;
    height: 15px !important;
    /*margin-top: 0.2em;*/
    vertical-align: top;
    background-repeat: no-repeat;
    background-position: center;
    background-size: contain;
    border: 1px solid var(--color-primary) !important;
    -webkit-appearance: none;
    -moz-appearance: none;
    appearance: none;
    print-color-adjust: exact;
    border-radius: 0.25em;
}
input[type="radio"]{
    border-radius: 50%;
}
input[type="checkbox"]:checked{
    background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 20 20'%3e%3cpath fill='none' stroke='%23000' stroke-linecap='round' stroke-linejoin='round' stroke-width='3' d='M6 10l3 3l6-6'/%3e%3c/svg%3e") !important;
    background-color: var(--color-primary) !important;
    border-color: var(--color-primary) !important;
}
input[type="radio"]:checked{
    background-color: var(--color-primary) !important;
    border-color: var(--color-primary) !important;
}

.unstyle{
    background: 0;
    color: #939295;
    border: 0;
}
.btn-danger{
    display: inline-flex;
    align-items: center;
    gap: 8px;
    text-decoration: none;
    border: 0;
    background: #d22d2d !important;
    color: #f5f7fa !important;
    padding: 10px 20px;
    border-radius: 7px;
    font-size: 16px;
    text-align: center;
    cursor: pointer;
}
.btn-success{
    display: inline-flex;
    align-items: center;
    gap: 8px;
    text-decoration: none;
    border: 0;
    background: #22c55e !important;
    color: #010101 !important;
    padding: 10px 20px;
    border-radius: 7px;
    font-size: 16px;
    text-align: center;
    cursor: pointer;
}
.btn-1{
    display: inline-flex;
    justify-content: center;
    align-items: center;
    gap: 8px;
    text-decoration: none;
    border: 0;
    background: linear-gradient(to left, var(--color-primary), var(--color-secondary));
    color: #010101 !important;
    padding: 10px 20px;
    border-radius: 7px;
    font-size: 16px;
    font-weight: bold;
    text-align: center;
    cursor: pointer;
}
.btn-1[disabled]{
    background: #1111118c;
    color: #939295 !important;
}
.btn-float{
    position: fixed;
    bottom: 20px;
    right: 20px;
    box-shadow: 0 0 14px 14px #111111;
}
.btn-green{
    display: inline-flex;
    justify-content: center;
    align-items: center;
    gap: 8px;
    text-decoration: none;
    background: 0;
    color: #15aa5b !important;
    padding: 10px 20px;
    border: 1px solid #15aa5b;
    border-radius: 7px;
    font-size: 16px;
    text-align: center;
    cursor: pointer;
    transition: .3s;
}
.btn-2{
    display: inline-flex;
    justify-content: center;
    align-items: center;
    gap: 8px;
    text-decoration: none;
    background: 0;
    color: var(--color-primary) !important;
    padding: 10px 20px;
    border: 1px solid var(--color-primary);
    border-radius: 7px;
    font-size: 16px;
    text-align: center;
    cursor: pointer;
    transition: .3s;
}
.btn-2:hover{
    background: var(--color-primary);
    border-color: var(--color-primary);
    color: #0e1116 !important;
}
.btn-2.btn-small{
    padding: 5px 10px;
    font-size: 13px;
}
.btn-2.selected{
    background: linear-gradient(to left, var(--color-primary), var(--color-secondary));
    color: #0e1116 !important;
}
.btn-3{
    display: inline-flex;
    justify-content: center;
    align-items: center;
    gap: 8px;
    text-decoration: none;
    background: 0;
    color: #a1a1a1 !important;
    padding: 10px 20px;
    border: 1px solid #a1a1a1;
    border-radius: 7px;
    font-size: 16px;
    text-align: center;
    cursor: pointer;
    transition: .3s;
}
.btn-excluir{
    display: inline-flex;
    align-items: center;
    gap: 8px;
    text-decoration: none;
    background: #f74747;
    color: #f5f7fa !important;
    padding: 10px 20px;
    border: 1px solid #f74747;
    border-radius: 7px;
    font-size: 16px;
    text-align: center;
    cursor: pointer;
    transition: .3s;
}
.btn-1 > svg,.btn-2 > svg{
    min-width: 16px;
}
.acoes{
    display: flex;
    justify-content: center;
    flex-wrap: wrap;
    gap: 20px;
}
h1{
    text-align: center;
    margin-bottom: 0px;
    color: #f5f7fa;
    font-size: 30px;
    font-weight: 700;
}
.acoes a img{
    /*width: 50px;*/
    width: auto;
    height: 33px;
}
.acoes .btn-revisar img{
    width: 40px;
}
.acoes .btn-rapida,
.acoes .btn-escreva{
    padding: 9px 10px;
}
.acoes a{
    flex-direction: column;
    width: 200px;
    min-height: 123px;
}
.acoes h4{
    font-size: 16px;
}
.acoes a > div{
    text-align: center;
    flex: 1;
    display: flex;
    flex-direction: column;
}
.acoes a > div small{
    flex: 1;
}
.acoes a > div button{
    border: 0;
    display: flex;
    align-items: center;
    color: #f5f7fa;
    padding: 10px;
    justify-content: center;
    gap: 6px;
    border-radius: 8px;
    margin: 0 auto;
    margin-top: 20px;
}
.acoes a > div button img{
    width: 20px !important;
    height: 20px !important;
}
.acoes a > div button span{
    font-size: 12px;
    margin-top: 5px;
}
.btn-escreva{
    text-align: left;
    display: flex;
    align-items: center;
    gap: 10px;
    color: #f5f7fa;
    background: #503908;
    border-radius: 10px;
    border: 1px solid #fdd80f;
    padding: 5px 10px;
}
.btn-escreva small{
    display: block;
    color: #f5f7fa;
    font-size: 12px;
}
.btn-escreva button{
    background: #61460a;
}
.btn-rapida{
    text-align: left;
    display: flex;
    align-items: center;
    gap: 10px;
    color: #f5f7fa;
    background: #002c3b;
    border-radius: 10px;
    border: 1px solid #00d4c3;
    padding: 5px 10px;
}
.btn-rapida button{
    background: #003a47;
}
.btn-rapida small{
    display: block;
    color: #f5f7fa;
    font-size: 12px;
}
.btn-avancada{
    text-align: left;
    display: flex;
    align-items: center;
    gap: 10px;
    color: #FF9900;
    background: #ff99002b;
    border-radius: 10px;
    border: 1px solid #FF9900;
    padding: 0 10px;
}
.btn-avancada small{
    display: block;
    color: #f5f7fa;
    font-size: 12px;
}
.btn-revisar{
    text-align: left;
    display: flex;
    align-items: center;
    gap: 10px;
    color: #f5f7fa;
    background: #0f3156;
    border-radius: 10px;
    border: 1px solid #168dc8;
    padding: 9px 10px;
}
.btn-revisar button{
    background: #143d65;
}
.btn-revisar small{
    display: block;
    color: #f5f7fa;
    font-size: 12px;
}
.btn-titulo{
    text-align: left;
    display: flex;
    align-items: center;
    gap: 10px;
    color: #f5f7fa;
    background: #191550;
    border-radius: 10px;
    border: 1px solid #5231c7;
    padding: 9px 10px;
}
.btn-titulo button{
    background: #2a206b;
}
.btn-titulo small{
    display: block;
    color: #f5f7fa;
    font-size: 12px;
}

.detalhes-nav{
    margin-bottom: 24px;
    border-bottom: 1px solid #ffffff38;
    padding-bottom: 20px;
}
.detalhes-nav ul{
    margin: 0 !important;
    display: flex;
    align-items: center;
    gap: 15px;
}
.detalhes-nav li button{
    background: 0;
    border: 0;
    padding: 0;
    color: #f5f7fa;
    opacity: .7;
    font-weight: 700;
}
.detalhes-nav li button.selected{
    color: var(--color-primary);
    opacity: 1;
}

.truncate-1{
    display: -webkit-box;
    -webkit-line-clamp: 1;
    overflow: hidden;
    -webkit-box-orient: vertical;
}

blockquote{
    border-left: 1px solid var(--color-border);
    padding: 10px;
}

.dropdawn{
    background: #1f1f1f;
    padding: 20px;
    border-radius: 10px;
}
.dropdawn h3{
    margin-bottom: 0px;
    font-size: 22px;
    display: flex;
    justify-content: space-between;
    align-items: center;
    cursor: pointer;
}
.dropdawn h3 svg{
    width: 20px;
    height: 20px;
    stroke: #939295;
}
.dropdawn > div{
    padding-top: 20px;
    min-width: 100%;
}

.dropdawn-1{
    border: 1px solid var(--color-border);
    border-radius: 10px;
    padding: 20px;
}
.dropdawn-1 h4{
    margin: 0;
}
.dropdawn-1 > div{
    padding-top: 20px;
    min-width: 100%;
}

.cards{
    display: flex;
    flex-wrap: wrap;
    gap: 20px;
}
.card-1{
    width: calc(25% - 15px);
    padding: 20px;
    display: flex;
    flex-direction: column;
    position: relative;
    overflow: hidden;
    border: 1px solid transparent;
    border-radius: 20px;
    background: linear-gradient(#010101, #010101) padding-box,
        radial-gradient(circle at 50% 0%, #00cc70, transparent 70%), /* Brilho no Topo */
        radial-gradient(circle at 50% 100%, #00cc70, transparent 70%), /* Brilho na Base */
        linear-gradient(rgba(0, 204, 112, 0.1), rgba(0, 204, 112, 0.1)) border-box;
    box-shadow: 0 0 15px rgba(0, 204, 112, 0.15), 0 0 5px rgba(0, 204, 112, 0.1);
}
.card-1 .vazio{
    display: flex;
    justify-content: center;
    align-items: center;
    width: 100%;
    margin-top: 30px;
    opacity: .7;
}
.modal-1 .card-1{
    background: #111111;
}
.modal-1 .card-1 .loader-container{
    background: #111111 !important;
}
.card-1 .loader-container{
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: #010101 !important;
    z-index: 2;
}
.card-1.green{
    outline: 2px solid #4ade80;
}
.card-1 > div{
    display: flex;
    justify-content: space-between;
    align-items: center;
}
.card-1.green > div{
    color: #4ade80;
}
.card-1.green svg{
    fill: #4ade80;
}
.card-1 > div > span{
    border-radius: 50%;
    min-width: 35px;
    width: 35px;
    height: 35px;
    background: #00cc703d;
    display: flex;
    justify-content: center;
    align-items: center;
}
.card-1 h2{
    font-size: 23px;
    margin: 8px 0;
    flex: 1;
}
.card-1 small{
    opacity: .7;
}
.card-1 small.green{
    color: #25e82b;
    display: flex;
    align-items: center;
    gap: 4px;
    font-weight: 600;
}
.card-1 small.green svg{
    transform: rotate(315deg);
}
.card-1 small.red{
    color: #ff0000;
    display: flex;
    align-items: center;
    gap: 4px;
    font-weight: 600;
}
.card-1 small.red svg{
    transform: rotate(45deg);
}

#campanhas .grafico{
    height: 50px;
    margin: 20px 0;
}
#campanhas .dado{
    background: #19272e9c;
    padding: 12px;
    border-radius: 10px;
    text-align: center;
}
#campanhas .dado h2{
    font-size: 18px;
}
#campanhas .dado small{
    font-size: 12px;
    display: flex;
    gap: 5px;
    justify-content: center;
    align-items: center;
}
#campanhas .dado-1{
    background: #00cbe61a;
}
#campanhas .dado-4{
    background: #00c2811a;
}
#campanhas .dado-1 h2{
    color: var(--color-primary);
}
#campanhas .dado-1 svg{
    stroke: var(--color-primary);
}
#campanhas .dado-2 h2,
#campanhas .dado-4 h2{
    color: #00c281;
}
#campanhas .dado-2 svg,
#campanhas .dado-4 svg{
    stroke: #00c281;
}

.color-primary{
    color: var(--color-primary) !important;
}
.color-green{
    color: #00c281 !important;
}
.color-red{
    color: #d22d2d !important;
}
.color-grey{
    color: #7d7d7d !important;
}

.formulario{
    width: 100%;
    max-width: 850px;
    margin: 0 auto;
}
.formulario .box{
    background: #010101;
    border: 1px solid var(--color-border);
    padding: 40px;
    border-radius: 20px;
}
.formulario .box .logo{
    width: 100%;
    max-width: 150px;
}
.formulario .box .icon{
    background: linear-gradient(to right bottom, rgb(0, 203, 230), rgb(0, 194, 129));
    width: 80px;
    height: 80px;
    margin: 0 auto;
    border-radius: 50%;
    display: flex;
    justify-content: center;
    align-items: center;
}
.formulario .box h3{
    font-size: 36px;
    font-weight: 700;
    margin-bottom: 20px !important;
    margin-top: 30px !important;
}
.formulario .box p{
    color: #7d7d7d;
}
.formulario .box input[type="text"],
.formulario .box textarea,
.formulario .box select{
    background: #111111 !important;
    border: 1px solid var(--color-border) !important;
}
.formulario .box .etapa-acoes{
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 10px;
    padding-top: 24px;
    border-top: 1px solid var(--color-border);
}
.formulario .radio,
.modal-1 .radio{
    display: flex;
    align-items: center;
    gap: 10px;
    border: 1px solid var(--color-border);
    padding: 16px;
    border-radius: 10px;
    cursor: pointer;
}
.formulario .radio.selected,
.modal-1 .radio.selected{
    border-color: var(--color-primary);
    background: rgba(0, 204, 112, .1);
}
.modal-1 .formulario .radio input,
.formulario .radio input,
.modal-1 .radio input{
    border: 2px solid #111111 !important;
    outline: 1px solid var(--color-primary) !important;
    min-width: 15px;
    padding: 0;
    border-radius: 50%;
    background-image: none !important;
}
.modal-1 .radio{
    border: 1px solid #4b4b4b;
}
.modal-1 .radio > div{
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    width: 100%;
    justify-content: space-between;
}
.modal-1 .radio img{
    max-height: 40px;
}
.modal-1 .vazio{
    border: 1px solid #4b4b4b;
    padding: 10px;
    text-align: center;
    border-radius: 10px;
    color: #7d7d7d;
}
.modal-1 .vazio a{
    color: #7d7d7d;
    text-decoration: underline;
}
.formulario .btn-gravar{
    background: rgba(0, 204, 112, .2);
    color: var(--color-primary);
    border: 0;
    min-width: 32px;
    width: 32px;
    height: 32px;
    border-radius: 50%;
}
.formulario .btn-parar{
    background: rgb(210, 45, 45);
    color: #fff;
    border: 0;
    min-width: 32px;
    width: 32px;
    height: 32px;
    border-radius: 50%;
    animation: pulse 2s infinite;
}
.formulario .btn-parar svg{
    width: 10px;
    height: 10px;
}

header{
    position: sticky;
    top: 0;
    z-index: 11;
    background: #010101;
    border-bottom: 1px solid var(--color-border);
    padding: 10px 20px;
    display: flex;
    justify-content: space-between;
    align-items: center;
}
header .notificacoes{
    position: relative;
}
header > div:not(.notificacoes){
    display: flex;
    gap: 10px;
    align-items: center;
}
header > div:not(.notificacoes) a{
    display: flex;
    align-items: center;
    gap: 5px;
}
header .notificacoes > button{
    background: 0;
    border: 0;
    color: #0e1116;
    position: relative;
}
header .notificacoes > button svg{
    fill: #f5f7fa;
    width: 18px;
    height: 18px;
}
header .notificacoes > button.com-notificacao svg{
    animation: swing 900ms ease-in-out infinite;
}
header .notificacoes > button span{
    background: linear-gradient(to left, var(--color-primary), var(--color-secondary));
    display: flex;
    justify-content: center;
    align-items: center;
    width: 18px;
    height: 18px;
    position: absolute;
    top: -9px;
    right: -10px;
    font-size: 11px;
    border-radius: 50%;
    font-weight: bold;
}
header .notificacoes > button span:empty{
    display: none;
}
header .notificacoes .btn-2{
    width: 100%;
    margin-top: 10px;
    font-size: 12px;
}
header .notificacoes > div{
    display: none;
    position: absolute;
    right: 0;
    top: calc(100% + 10px);
    background: #1f1f1f;
    width: 300px;
    border-radius: 10px;
    padding: 10px;
    box-shadow: 0 0 14px 0px rgba(0, 0, 0, 0.5);
}
header .notificacoes > div.open{
    display: block;
}
header .notificacoes > div ul{
    list-style: none;
    padding: 0;
    margin: 0;
    overflow: auto;
    max-height: 261px;
}
header .notificacoes > div ul::-webkit-scrollbar-thumb{
    background-color: #111111;
    border-radius: 20px;
    border: 5px solid #1f1f1f;
}
header .notificacoes > div ul::-webkit-scrollbar-track{
    background: #1f1f1f;
}
header .notificacoes > div ul li{
    border-bottom: 1px solid var(--color-border);
}
header .notificacoes > div ul li.nova{
    background: #23293b;
}
header .notificacoes > div ul li.vazio{
    border: 0;
    text-align: center;
    padding: 10px;
}
header .notificacoes > div ul li a{
    padding: 10px;
    display: block;
    font-size: 14px;
}
header .notificacoes > div ul li a > b{
    font-size: 16px;
    margin-bottom: 5px;
    display: block;
}
header .notificacoes > div ul li a p{
    margin: 0;
}
header .notificacoes > div ul li a small{
    display: block;
    text-align: end;
    font-size: 12px;
}
header .btn-menu{
    background: 0;
    border: 0;
    color: #7d7d7d;
}
header .status-sistema{
    color: #00c281;
    background: #00c28126;
    display: inline-flex;
    align-items: center;
    gap: 5px;
}
header .status-sistema:before{
    content: '';
    display: block;
    width: 7px;
    height: 7px;
    border-radius: 50%;
    background: #00c281;
}
header .preview{
    width: 40px;
    height: 40px;
    margin: 0;
}
@keyframes swing{
    0% { transform: rotate(0deg); }
    10% { transform: rotate(-20deg); }
    30% { transform: rotate(15deg); }
    50% { transform: rotate(-10deg); }
    70% { transform: rotate(6deg); }
    90% { transform: rotate(-3deg); }
    100% { transform: rotate(0deg); }
}

aside{
    width: 240px;
    height: 100vh;
    overflow: auto;
    background: #010101;
    border-right: 1px solid var(--color-border);
    position: fixed;
    top: 0;
    left: 0;
    display: none;
    flex-direction: column;
    z-index: 12;
}
aside .btn-menu{
    display: none;
    background: 0;
    border: 0;
}
aside .btn-menu svg{
    fill: #7d7d7d;
}
body.menu-open aside{
    display: flex;
}
aside > div{
    padding: 5px;
}
aside > div:first-child{
    border-bottom: 1px solid var(--color-border);
    display: flex;
    justify-content: space-between;
    align-items: center;
    height: 60.89px;
    padding-left: 10px;
}
aside > div:last-child{
    border-top: 1px solid var(--color-border);
}
aside ul::-webkit-scrollbar-thumb{
    background-color: #2c323b !important;
    border-radius: 20px;
    border: 5px solid #010101 !important;
}
aside ul::-webkit-scrollbar-track{
    background: #010101 !important;
}
aside img{
    /*width: 100%;
    max-width: 120px;*/
    max-height: 43px;
}
aside ul{
    flex: 1;
    margin: 0;
    padding: 0;
    overflow: auto;
    padding: 5px;
}
aside ul li{
    list-style: none;
}
aside ul li > span{
    color: #7d7d7d;
    padding: 15px 10px 10px;
    display: block;
    font-size: 13px;
}
aside a{
    display: flex;
    align-items: center;
    padding: 10px;
    position: relative;
    color: #f5f7fa;
    border-radius: 7px;
    overflow: hidden;
}
aside a svg{
    min-width: 20px;
}
aside a span{
    width: 100%;
    line-height: 8px;
}
aside a.selected{
    background: #1a2617;
    color: var(--color-primary);
}
aside a:not(.selected):hover{
    background: #11180f;
}
aside a.selected:before{
    content: '';
    background: var(--color-primary);
    position: absolute;
    left: 0;
    top: 0;
    height: 100%;
    width: 4px;
}
aside a:hover img,
aside a.selected img{
    display: none;
}
aside a.selected svg{
    fill: var(--color-primary);
}
aside svg{
    fill: #f5f7fa;
    width: 20px;
    height: 20px;
}
aside svg.bi-lock-fill{
    fill: #fdbc4b;
}
aside svg.bi-unlock-fill{
    fill: #3bd971;
}
aside a span{
    white-space: nowrap;
    padding: 8px;
    border-radius: 6px;
    font-size: 14px;
}
.new{
    background: #cc0000;
    color: #fff;
    animation: pulse 2s infinite;
    white-space: nowrap;
    padding: 2px 8px;
    border-radius: 6px;
    font-size: 14px;
}
aside .new{
    padding: 8px;
}

.infos-gestor{
    /*background-image: linear-gradient(to right, rgba(0, 204, 112,.2), rgba(0, 204, 112,.1), rgba(0,194,129,.2));*/
    background: #010101;
    background: #00cc700f;
    display: flex;
    align-items: center;
    padding: 20px;
    border-radius: 20px;
    gap: 20px;
    border: 2px solid var(--color-primary);
    box-shadow: 0 0 15px rgba(0, 204, 112, 0.15), 0 0 5px rgba(0, 204, 112, 0.1);
}
.infos-gestor button{
    font-size: 14px;
}
.infos-gestor .image{
    min-width: 104px;
    width: 104px;
    height: 104px;
    border-radius: 50%;
    overflow: hidden;
    border: 4px solid var(--color-primary);
    box-shadow: 0 0 #0000, 0 0 #0000, 0 20px 25px -5px rgba(0,229,255,.3), 0 8px 10px -6px rgba(0,229,255,.3);
}
.infos-gestor .image img{
    width: 100%;
    height: 100%;
    object-fit: cover;
}
.infos-gestor b{
    color: var(--color-primary);
    font-weight: 400;
}
.infos-gestor h2{
    font-weight: 700;
}
.infos-gestor small{
    color: #a1a1a1;
}

main{
    padding: 20px;
    display: flex;
    flex-direction: column;
    position: relative;
    flex: 1;
    position: relative;
}
body.menu-open header,
body.menu-open main{
    margin-left: 240px;
}
main h3{
    color: #f5f7fa;
    text-align: center;
    margin-bottom: 40px;
}

#chats{
    padding: 0;
    flex-direction: row;
}
#chats .aside{
    padding: 20px;
    width: 300px;
    height: 100%;
    overflow: hidden auto;
    border-right: 1px solid #2b2b2f;
    max-height: calc(100vh - 41px);
}
#chats .aside .container-status{
    margin-top: 10px;
}
#chats .aside .container-status > div{
    display: flex;
    gap: 10px;
    flex-wrap: wrap;
    padding-top: 6px;
}
#chats .aside .container-status label{
    display: block;
    border: 1px solid var(--color-primary);
    border-radius: 100px;
    padding: 5px 11px;
    background: #151515;
    cursor: pointer;
    font-size: 13px;
    white-space: nowrap;
    position: relative;
}
#chats .aside .container-status label.selected{
    background: var(--color-primary);
    color: #0e1116;
}
#chats .aside .container-status label small{
    position: absolute;
    top: -6px;
    right: -6px;
    background: var(--color-primary);
    color: #0e1116;
    width: 17px;
    height: 17px;
    text-align: center;
    border-radius: 50%;
}
#chats .aside .container-status label small:empty{
    display: none;
}
#chats .aside .limpar-form button{
    display: flex;
    align-items: center;
    gap: 3px;
    margin: 0 auto;
    margin-top: 10px;
    background: 0;
    color: #939295;
    border: 0;
}
#chats .chat{
    width: calc(100% - 300px);
    max-height: calc(100vh - 41px);
    height: 100%;
    overflow: auto;
    position: relative;
}
#chats .lista{
    display: flex;
    flex-direction: column-reverse;
    gap: 3px;
    margin-top: 10px;
}
#chats .lista > div{
    padding: 10px;
    border-radius: 10px;
    cursor: pointer;
    transition: .3s;
}
#chats .lista > div > div:last-child{
    display: flex;
    justify-content: space-between;
    align-items: center;
}
#chats .lista > div:hover,
#chats .lista > div.selected{
    background: #1f1f1f;
}
#chats .lista > div > div:last-child span{
    background: var(--color-primary);
    color: #0e1116;
    min-width: 20px;
    width: 20px;
    height: 20px;
    display: flex;
    justify-content: center;
    align-items: center;
    border-radius: 50%;
    font-size: 11px;
    font-weight: bolder;
}
#chats .lista > div .etiquetas{
    margin-bottom: 5px;
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 5px;
}
#chats .lista > div .etiquetas button{
    background: 0;
    border: 0;
    color: #939295;
}
#chats .lista > div .etiquetas span{
    font-size: 12px;
    font-weight: 400;
    padding: 6px 10px;
}
#area-cliente h2{
    text-align: center;
    font-weight: bolder;
    margin-bottom: 24px;
    color: #f5f7fa;
}
#area-cliente h3{
    text-align: start;
    margin-bottom: 20px;
}
#area-cliente .box{
    border: 1px solid var(--color-border);
    padding: 20px;
    border-radius: 10px;
    margin-bottom: 24px;
}

.frase{
    text-align: center;
    max-width: 280px;
    margin: 0 auto;
    margin-top: 80px;
}
.frase svg{
    width: 40px;
    height: 40px;
    color: var(--color-primary);
}
.frase div{
    color: var(--color-primary);
    margin: 10px 0 5px;
}

.preview{
    width: 60px;
    height: 60px;
    border-radius: 50%;
    overflow: hidden;
    display: flex;
    justify-content: center;
    align-items: center;
    background: rgb(0, 204, 112, .1);
    color: var(--color-primary);
}
.preview img{
    width: 100%;
    height: 100%;
    object-fit: cover;
}
label .preview{
    width: 80px;
    height: 80px;
}

.title{
    margin-bottom: 24px;
}
.title h2{
    margin: 0;
}
.title h3{
    margin: 0;
    text-align: left;
}
.title small{
    color: #8b8b8b;
}

hr{
    color: #3e525d;
}

.pesquisa{
    position: relative;
}
.pesquisa .resultado{
    position: absolute;
    top: calc(100% + 10px);
    box-shadow: 0 0 18px 0px rgba(0, 0, 0, .3);
    width: 100%;
    z-index: 999;
    list-style: none;
    padding: 0;
    margin: 0;
    background: #1f1f1f;
    border-radius: 10px;
    overflow: hidden;
}
.pesquisa .resultado li{
    padding: 10px;
    font-size: 14px;
    cursor: pointer;
    transition: .3s;
}
.pesquisa .resultado li:hover{
    background: #151515;
}

form{
    /*display: flex;
    flex-direction: column;
    flex: 1;*/
    margin: 0;
}

form label{
    display: block;
}
form input:not([type="radio"]):not([type="checkbox"]),form textarea,
form select,
td select,
td input,
#area-cliente input, #area-cliente select, #area-cliente textarea{
    background: #010101;
    border: 0;
    padding: 10px 15px;
    border-radius: 10px;
    display: block;
    width: 100%;
    color: #f5f7fa;
    outline: none !important;
    border: 1px solid #010101;
}
input::placeholder,
textarea::placeholder {
    color: #a1a1a1;
    opacity: 1;
}
form select{
    padding: 11.5px 15px;
}
form #editor{
    background: #010101;
    border: 0;
    padding: 10px 15px;
    border-radius: 10px;
    display: block;
    width: 100%;
    color: #f5f7fa;
    outline: none !important;
    border: 1px solid #1f1f1f;
    min-height: 262px;
    white-space: pre-wrap;
    word-wrap: break-word;
}
form #editor .highlight{
    background-color: #ffe066;
    color: #000;
    font-weight: bold;
    transition: background-color 0.3s ease;
}

.resposta h2{
    color: #f5f7fa;
    font-size: 22px;
    margin-bottom: 20px;
}
.resposta .box{
    background: #1f1f1f;
    padding: 20px;
    border-radius: 10px;
}
.resposta .box h3{
    color: #f5f7fa;
    font-size: 19px;
    margin-bottom: 12px;
    text-align: start;
}
.resposta h3 svg{
    fill: var(--color-primary);
}

.table{
    background: #010101;
    padding: 20px;
    border-radius: 10px;
    margin: 0;
    overflow: auto;
}
.table table{
    width: 100%;
}
.table table thead{
    display: none;
}
.table table tr{
    border: 0;
    position: relative;
}
.table table tbody tr:hover{
    background: #151515;
}
.table table tr td,
.table table tr th{
    padding: 10px 5px;
}
.table table tr td:first-child,
.table table tr th:first-child{
    border-radius: 10px 0 0 10px;
    padding-left: 10px;
}
.table table tr td:first-child a,
.table table tr th:first-child a{
    position: absolute;
    top: 0;
    right: 0;
    bottom: 0;
    left: 0;
}
.table table tr td:last-child,
.table table tr th:last-child{
    border-radius: 0 10px 10px 0;
    padding-right: 10px;
}
.table table tr .disabled{
    opacity: .6;
}
.table table tr td.vazio{
    border-radius: 10px;
    text-align: center;
}
.table .excluir{
    background: #1f1f1f;
    color: red;
    position: relative;
    z-index: 2;
    /*top: 12px;
    right: 10px;*/
}
.table .vazio{
    color: #f5f7fa94;
    padding: 10px;
    text-align: center;
}

#listagem.table{
    border: 1px solid var(--color-border);
    padding: 0;
}
.table .linha{
    display: flex;
    justify-content: space-between;
    color: #7d7d7d;
    font-size: 14px;
    border-bottom: 1px solid var(--color-border);
    padding: 16px;
    flex-wrap: wrap;
}
.table .linha div{
    padding: 0;
}
.table .linha .vazio{
    width: 100%;
    text-align: center;
}
.table .linha b{
    color: #f5f7fa;
    font-size: 16px;
}
.table .linha:last-child{
    border-bottom: 0;
}
.table .linha button{
    background: 0;
    border: 0;
    color: #f5f7fa;
}

.feedback{
    display: flex;
    justify-content: end;
    font-size: 90%;
    position: sticky;
    bottom: 20px;
    margin-left: auto;
}
.feedback button{
    font-size: 90%;
    padding: 5px 10px;
}
.feedback > div{
    background: #1f1f1f;
    border: 1px solid var(--color-border);
    border-radius: 7px;
    padding: 20px;
    /*width: 100%;
    max-width: 240px;*/
    text-align: center;
}
.feedback > div svg{
    fill: var(--color-primary);
}
.feedback img{
    width: 50px;
    display: block;
    margin: 0 auto;
    margin-bottom: 10px;
}
.feedback > div > div > button:last-child:hover{
    background: #e10000;
    border-color: #e10000;
}

.switch__container {
    width: 40px;
}

.switch {
    visibility: hidden;
    position: absolute;
    margin-left: -9999px;
}

.switch + label {
    display: block;
    position: relative;
    cursor: pointer;
    outline: none;
    user-select: none;
}

.switch--shadow + label {
    padding: 1px;
    width: 35px;
    height: 20px;
    background-color: #dddddd;
    border-radius: 15px;
}
.switch--shadow + label:before,
.switch--shadow + label:after {
    display: block;
    position: absolute;
    top: 1px;
    left: 1px;
    bottom: 1px;
    content: "";
}
.switch--shadow + label:before {
    right: 1px;
    background-color: #f1f1f1;
    border-radius: 15px;
    transition: background 0.4s;
}
.switch--shadow + label:after {
    width: 18px;
    background-color: #f5f7fa;
    border-radius: 100%;
    box-shadow: 0 2px 5px rgba(0, 0, 0, 0.3);
    transition: all 0.4s;
}
.switch--shadow:checked + label:before {
    background-color: var(--color-secondary);
}
.switch--shadow:checked + label:after {
    transform: translateX(15px);
}

.pagination{
    border-radius: 100px;
    overflow: hidden;
}
.pagination button{
    background: #1f1f1f;
    color: #939295;
    border: 0;
    padding: 5px 10px;
}
.pagination button:disabled{
    opacity: .5;
}
.pagination button:hover:not(:disabled){
    background: #151515;
}

.modal-1{
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    display: flex;
    justify-content: center;
    align-items: center;
    z-index: 999;
}
.modal-1.modal-status{
    z-index: 9999;
}
.modal-1 > div:first-child{
    position: absolute;
    left: 0;
    top: 0;
    width: 100%;
    height: 100%;
    background: rgba(0,0,0,.3);
}
.modal-1.erro h4{
    text-align: center;
    margin-bottom: 20px;
    color: #f00;
    margin: 0;
}
.modal-1.success h4{
    text-align: center;
    margin-bottom: 20px;
    color: #00ab1a;
    margin: 0;
}
.modal-1 p{
    text-align: center;
}
.modal-1 > div:last-child{
    position: relative;
    background: #171717;
    border-radius: 10px;
    z-index: 999;
    padding: 20px;
    width: 100%;
    max-width: 390px;
    margin: 20px;
}
.modal-1 > div:last-child > button{
    background: 0;
    border: 0;
    position: absolute;
    top: 5px;
    right: 5px;
    color: #939295;
}
.modal-1 > div:last-child > div{
    max-height: calc(100vh - 60px);
    overflow-y: auto;
    overflow-x: hidden;
}
.modal-1.modal-copy > div:last-child > div{
    overflow-wrap: break-word;
    word-break: break-word;
}
.modal-1:not(.modal-status) > div:last-child{
    max-width: 590px;
    padding: 40px;
    padding-right: 0;
}
.modal-1:not(.modal-status).modal-medio > div:last-child{
    max-width: 1000px;
}
.modal-1:not(.modal-status) > div:last-child h2{
    color: #f5f7fa;
    font-size: 24px;
}
.modal-1:not(.modal-status) > div:last-child h3{
    color: var(--color-primary);
}
.modal-1:not(.modal-status) > div:last-child .title h3{
    color: #f5f7fa;
}
.modal-1:not(.modal-status) > div:last-child ul{
    padding: 0;
    margin: 20px 0;
}
.modal-1:not(.modal-status) > div:last-child ul li{
    list-style: none;
    text-align: start;
}
.modal-1:not(.modal-status) > div:last-child > div{
    max-height: calc(100vh - 120px);
    padding-right: 40px;
}
.modal-1.modal-cliente:not(.modal-status) > div:last-child > div{
    height: calc(100vh - 120px);
}
.modal-1:not(.modal-status) > div:last-child > div > div{
    /*color: var(--color-primary);*/
    text-align: start;
    margin-bottom: 20px;
}
.modal-1:not(.modal-status) > div:last-child > div button{
    font-weight: 500;
}
.modal-1 input, .modal-1 select, .modal-1 .select-multiple > span, .modal-1 textarea, td select, td input{
    background: #010101 !important;
    border: 1px solid var(--color-border) !important;
}
.modal-1 input.border-danger, .modal-1 select.border-danger, .modal-1 .select-multiple > span.border-danger, .modal-1 textarea.border-danger, td select.border-danger, td input.border-danger{
    border-color: rgb(220, 53, 69) !important;
}
.modal-1 .box{
    border: 1px solid #494949;
    padding: 20px;
    border-radius: 10px;
}
.modal-1 .box-fill{
    background: #111111;
    color: #f5f7fa;
    padding: 10px 15px;
    border-radius: 10px;
    overflow-wrap: break-word;
    word-break: break-word;
}
.modal-1 .box-fill *{
    text-align: unset;
}
.modal-1 .box h3{
    color: #f5f7fa !important;
}
.modal-1 textarea,
.modal-1 input:not([type="checkbox"]){
    border: 0;
    outline: none !important;
    border-radius: 10px;
    display: block;
    width: 100%;
    padding: 10px 15px;
    color: #f5f7fa;
}
.modal-1 .stars{
    display: flex;
    justify-content: center;
    margin-bottom: 24px;
}
.modal-1 .stars button{
    background: 0;
    border: 0;
    color: var(--color-primary);
}
.modal-1 .stars button svg{
    width: 20px;
    height: 20px;
}

.criterios{
    display: flex;
    flex-direction: column;
    gap: 10px;
}
.criterios .criterio{
    border-radius: 7px;
    border: 1px solid rgba(0, 203, 230, 0.4);
    display: flex;
    align-items: center;
    padding: 20px;
    gap: 5px;
}
.criterios .criterio .icon{
    background: rgba(0, 204, 112, .1);
    min-width: 48px;
    width: 48px;
    height: 48px;
    display: flex;
    justify-content: center;
    align-items: center;
    border-radius: 12px;
}
.criterios .criterio .icon svg{
    stroke: var(--color-primary);
}

.items{
    display: flex;
    flex-direction: column;
    gap: 10px;
}
.items .item{
    background: #54546517;
    border-radius: 10px;
}
.items .item > div:first-child{
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 10px;
    cursor: pointer;
    gap: 10px;
}
.items .item.open > div:first-child > svg{
    transform: rotate(180deg);
}
.items .item > div:last-child{
    display: none;
    padding: 20px;
}
.items .item.open > div:last-child{
    display: block;
}

#problemas > div{
    border: 1px solid #d22d2d33;
    background: #d22d2d1a;
    border-radius: 10px;
    padding: 16px;
    margin-top: 24px;
}
#problemas h3{
    text-align: left;
    margin-bottom: 0;
}
#problemas .items .item{
    background: #010101;
    color: #7d7d7d;
    display: flex;
    justify-content: space-between;
    align-items: baseline;
    padding: 16px;
}
#problemas .items .item div{
    display: block;
    padding: 0;
}
#problemas .items .item b{
    color: #f5f7fa;
}

.etapas{
    background: #010101;
    border: 1px solid var(--color-border);
    padding: 20px;
    border-radius: 20px;
    margin-top: 24px;
}
.etapas .icon{
    background: linear-gradient(to right bottom, rgb(0, 203, 230), rgb(0, 194, 129));
    color: #f5f7fa;
    width: 56px;
    height: 56px;
    border-radius: 50%;
    display: flex;
    justify-content: center;
    align-items: center;
}
.etapas > div:last-child .icon{
    min-width: 48px;
    width: 48px;
    height: 48px;
    background: linear-gradient(to right bottom, rgb(0, 194, 129), rgba(0, 194, 129, 0.6));
    box-shadow: rgba(0, 0, 0, 0) 0px 0px 0px 0px, rgba(0, 0, 0, 0) 0px 0px 0px 0px, rgba(0, 194, 129, 0.3) 0px 10px 15px -3px, rgba(0, 194, 129, 0.3) 0px 4px 6px -4px;
}
.etapas .lista-etapas .etapa.atual > div:last-child > div:first-child, .etapas .lista-etapas .etapa.atual > div:last-child > div:last-child{
    background: #00cc7033;
}
.etapas .lista-etapas{
    display: flex;
    flex-direction: column;
    gap: 10px;
    position: relative;
    margin-left: 10px;
}
.etapas .lista-etapas::before{
    content: '';
    background: #1a2617;
    width: 4px;
    height: 100%;
    position: absolute;
    left: 12px;
}
.etapas .lista-etapas .etapa{
    display: flex;
    align-items: center;
    gap: 10px;
    position: relative;
}
.etapas .lista-etapas .etapa > div:first-child{
    min-width: 28px;
    width: 28px;
    height: 28px;
    display: flex;
    justify-content: center;
    align-items: center;
    background: #1a2617;
    border-radius: 50%;
    z-index: 2;
    position: relative;
}
.etapas .lista-etapas .etapa > div:first-child::before{
    content: '';
    background: #1a2617;
    width: 11px;
    height: 3px;
    position: absolute;
    left: calc(100% - 1px);
}
.etapas .lista-etapas .etapa > div:last-child{
    width: 100%;
    border-radius: 20px;
    padding: 20px;
    display: flex;
    align-items: center;
    gap: 20px;
    color: #7d7d7d;
    background: #1a26174d;
    border: 1px solid #212c3180;
}
.etapas .lista-etapas .etapa > div:last-child > div:first-child,
.etapas .lista-etapas .etapa > div:last-child > div:last-child{
    background: #1a2617;
    min-width: 40px;
    width: 40px;
    height: 40px;
    display: flex;
    justify-content: center;
    align-items: center;
    border-radius: 12px;
    font-weight: bolder;
}
.etapas .lista-etapas .etapa > div:last-child > div:last-child{
    border-radius: 50%;
}

.etapas .lista-etapas .etapa.concluido > div:first-child,
.etapas .lista-etapas .etapa.atual > div:first-child{
    color: #010101;
}

.etapas .lista-etapas .etapa.concluido::before{
    content: '';
    background: #00c281;
    position: absolute;
    width: 3px;
    height: calc(100% + 10px);
    left: 12px;
    top: 0;
}
.etapas .lista-etapas .etapa.concluido > div:first-child{
    background: #00c281;
}
.etapas .lista-etapas .etapa.concluido > div:first-child::before{
    background: #00c281;
}
.etapas .lista-etapas .etapa.concluido > div:last-child{
    border: 1px solid #00c2814d;
    color: #00c281;
    background: linear-gradient(to right, rgba(0, 194, 129, 0.15), rgba(0, 194, 129, 0.05));
}
.etapas .lista-etapas .etapa.concluido > div:last-child > div:first-child, .etapas .lista-etapas .etapa.concluido > div:last-child > div:last-child{
    background: #00c28133;
}

.etapas .lista-etapas .etapa.atual::before{
    content: '';
    background: var(--color-primary);
    position: absolute;
    width: 3px;
    height: calc(100% + 10px);
    left: 12px;
    top: 0;
}
.etapas .lista-etapas .etapa.atual > div:first-child{
    background: var(--color-primary);
}
.etapas .lista-etapas .etapa.atual > div:first-child::before{
    background: var(--color-primary);
}
.etapas .lista-etapas .etapa.atual > div:last-child{
    border: 1px solid #00cc704d;
    color: var(--color-primary);
    background: linear-gradient(to right, rgb(0 204 112 / 15%), rgba(0, 204, 112, 0.05));
}

.editor-texto{
    background: #111111;
    border: 0;
    padding: 10px 15px;
    border-radius: 10px;
    display: block;
    width: 100%;
    color: #f5f7fa;
    outline: none !important;
    border: 1px solid #111111;
}
.editor-texto div:focus-visible{
    outline: none !important;
}
.editor-texto .toolbar{
    margin-bottom: 10px;
    display: flex;
    align-items: center;
    gap: 5px;
    flex-wrap: wrap;
}

.editor-texto .toolbar .divisor{
    height: 28px;
    width: 1px;
    background: var(--color-border);
    display: block;
}
.editor-texto .toolbar select{
    display: inline-block;
    width: auto;
}
.editor-texto .toolbar button,
.editor-texto .toolbar .fake-button{
    padding: 1px 6px;
    border: 0;
    background: 0;
    color: #f5f7fa;
    text-align: center;
    min-width: 26px;
    min-height: 26px;
}
.editor-texto .toolbar .fake-button{
    display: inline-flex;
    flex-direction: column;
    align-items: center;
}
/*.editor-texto .toolbar button:hover,
.editor-texto .toolbar .fake-button:hover{
    background: #1f1f1f;
    border-radius: 5px;
}*/
.editor-texto .toolbar .color{
    outline: 1px solid var(--color-border);
    width: 22px;
    height: 3px;
    display: flex;
    justify-content: center;
    align-items: center;
    overflow: hidden;
    position: relative;
}
.editor-texto .toolbar .color input{
    padding: 0;
    width: 30px;
    height: 10px;
    position: absolute;
}
.editor-texto .toolbar label{
    padding: 1px 6px;
    display: inline-block;
    text-align: center;
}
.editor-texto .editor{
    border-radius: 10px;
    padding: 10px 15px;
    min-height: 68px;
    max-height: calc(100vh - 250px);
    overflow: auto;
}
.editor-texto .editor *:not(font){
    /*color: #000;*/
    text-align: unset;
}
.editor-texto .editor h1,
.editor-texto .editor h2,
.modal-1:not(.modal-status) > div:last-child .editor-texto .editor h2,
.editor-texto .editor h3,
.editor-texto .editor h4,
.editor-texto .editor h5,
.editor-texto .editor h6{
    margin: 0;
    font-weight: bold;
    unicode-bidi: isolate;
    text-align: start;
    line-height: normal;
    /*color: #000;*/
}
.editor-texto .editor h1{
    font-size: 2em;
}
.editor-texto .editor h2{
    font-size: 1.5em;
}
.editor-texto .editor h3{
    font-size: 1.17em;
}
.editor-texto .editor h4,
.editor-texto .editor h5,
.editor-texto .editor h6{
    font-size: unset;
}
.editor-texto .editor img{
    max-width: 100%;
}

[class*="etiqueta-"]{
    font-size: 14px;
    padding: 8px 10px;
    border-radius: 15px;
    display: inline-block;
    text-align: center;
    line-height: 14px;
    font-weight: 700;
}
.etiqueta-expirado{
    color: #dc3545;
    outline: 1px solid #dc3545;
    font-size: 12px;
    font-weight: 400;
    padding: 6px 10px;
}
.etiqueta-0{
    color: #939295;
    background: #26262b;
}
.etiqueta-1{
    color: #baf3db;
    background: #164b35;
}
.etiqueta-2{
    color: #f5e989;
    background: #533f04;
}
.etiqueta-3{
    color: #fce4a6;
    background: #693200;
}
.etiqueta-4{
    color: #ffd5d2;
    background: #5d1f1a;
}
.etiqueta-5{
    color: #eed7fc;
    background: #48245d;
}
.etiqueta-6{
    color: #baf3db;
    background: #216e4e;
}
.etiqueta-7{
    color: #f5e989;
    background: #7f5f01;
}
.etiqueta-8{
    color: #fce4a6;
    background: #9e4c00;
}
.etiqueta-9{
    color: #ffd5d2;
    background: #ae2e24;
}
.etiqueta-10{
    color: #eed7fc;
    background: #803fa5;
}
.etiqueta-11{
    color: #1f1f21;
    background: #4bce97;
}
.etiqueta-12{
    color: #1f1f21;
    background: #ddb30e;
}
.etiqueta-13{
    color: #1f1f21;
    background: #fca700;
}
.etiqueta-14{
    color: #1f1f21;
    background: #f87168;
}
.etiqueta-15{
    color: #1f1f21;
    background: #c97cf4;
}
.etiqueta-16{
    color: #cfe1fd;
    background: #123263;
}
.etiqueta-17{
    color: #c6edfb;
    background: #164555;
}
.etiqueta-18{
    color: #d3f1a7;
    background: #37471f;
}
.etiqueta-19{
    color: #fdd0ec;
    background: #50253f;
}
.etiqueta-20{
    color: #e2e3e4;
    background: #4b4d51;
}
.etiqueta-21{
    color: #cfe1fd;
    background: #1558bc;
}
.etiqueta-22{
    color: #c6edfb;
    background: #206a83;
}
.etiqueta-23{
    color: #d3f1a7;
    background: #4c6b1f;
}
.etiqueta-24{
    color: #fdd0ec;
    background: #943d73;
}
.etiqueta-25{
    color: #e2e3e4;
    background: #63666b;
}
.etiqueta-26{
    color: #1f1f21;
    background: #669df1;
}
.etiqueta-27{
    color: #1f1f21;
    background: #6cc3e0;
}
.etiqueta-28{
    color: #1f1f21;
    background: #94c748;
}
.etiqueta-29{
    color: #1f1f21;
    background: #e774bb;
}
.etiqueta-30{
    color: #1f1f21;
    background: #96999e;
}

.tabela-kanban .coluna.lista-cor-1{
    background: #164b35;
}
.tabela-kanban .coluna.lista-cor-1 .header *{
    color: #baf3db;
}
.tabela-kanban .coluna.lista-cor-1 ul::-webkit-scrollbar-thumb{
    background-color: #baf3db !important;
    border-radius: 20px;
    border: 5px solid #164b35 !important;
}
.tabela-kanban .coluna.lista-cor-1 ul::-webkit-scrollbar-track{
    background: #164b35 !important;
}
.tabela-kanban .coluna.lista-cor-2{
    background: #533f04;
}
.tabela-kanban .coluna.lista-cor-2 .header *{
    color: #f5e989;
}
.tabela-kanban .coluna.lista-cor-2 ul::-webkit-scrollbar-thumb{
    background-color: #f5e989 !important;
    border-radius: 20px;
    border: 5px solid #533f04 !important;
}
.tabela-kanban .coluna.lista-cor-2 ul::-webkit-scrollbar-track{
    background: #533f04 !important;
}
.tabela-kanban .coluna.lista-cor-3{
    background: #693200;
}
.tabela-kanban .coluna.lista-cor-3 .header *{
    color: #fce4a6;
}
.tabela-kanban .coluna.lista-cor-3 ul::-webkit-scrollbar-thumb{
    background-color: #fce4a6 !important;
    border-radius: 20px;
    border: 5px solid #693200 !important;
}
.tabela-kanban .coluna.lista-cor-3 ul::-webkit-scrollbar-track{
    background: #693200 !important;
}
.tabela-kanban .coluna.lista-cor-4{
    background: #5d1f1a;
}
.tabela-kanban .coluna.lista-cor-4 .header *{
    color: #ffd5d2;
}
.tabela-kanban .coluna.lista-cor-4 ul::-webkit-scrollbar-thumb{
    background-color: #ffd5d2 !important;
    border-radius: 20px;
    border: 5px solid #5d1f1a !important;
}
.tabela-kanban .coluna.lista-cor-4 ul::-webkit-scrollbar-track{
    background: #5d1f1a !important;
}
.tabela-kanban .coluna.lista-cor-5{
    background: #48245d;
}
.tabela-kanban .coluna.lista-cor-5 .header *{
    color: #eed7fc;
}
.tabela-kanban .coluna.lista-cor-5 ul::-webkit-scrollbar-thumb{
    background-color: #eed7fc !important;
    border-radius: 20px;
    border: 5px solid #48245d !important;
}
.tabela-kanban .coluna.lista-cor-5 ul::-webkit-scrollbar-track{
    background: #48245d !important;
}
.tabela-kanban .coluna.lista-cor-6{
    background: #216e4e;
}
.tabela-kanban .coluna.lista-cor-6 .header *{
    color: #baf3db;
}
.tabela-kanban .coluna.lista-cor-6 ul::-webkit-scrollbar-thumb{
    background-color: #baf3db !important;
    border-radius: 20px;
    border: 5px solid #216e4e !important;
}
.tabela-kanban .coluna.lista-cor-6 ul::-webkit-scrollbar-track{
    background: #216e4e !important;
}
.tabela-kanban .coluna.lista-cor-7{
    background: #7f5f01;
}
.tabela-kanban .coluna.lista-cor-7 .header *{
    color: #f5e989;
}
.tabela-kanban .coluna.lista-cor-7 ul::-webkit-scrollbar-thumb{
    background-color: #f5e989 !important;
    border-radius: 20px;
    border: 5px solid #7f5f01 !important;
}
.tabela-kanban .coluna.lista-cor-7 ul::-webkit-scrollbar-track{
    background: #7f5f01 !important;
}
.tabela-kanban .coluna.lista-cor-8{
    background: #9e4c00;
}
.tabela-kanban .coluna.lista-cor-8 .header *{
    color: #fce4a6;
}
.tabela-kanban .coluna.lista-cor-8 ul::-webkit-scrollbar-thumb{
    background-color: #fce4a6 !important;
    border-radius: 20px;
    border: 5px solid #9e4c00 !important;
}
.tabela-kanban .coluna.lista-cor-8 ul::-webkit-scrollbar-track{
    background: #9e4c00 !important;
}
.tabela-kanban .coluna.lista-cor-9{
    background: #ae2e24;
}
.tabela-kanban .coluna.lista-cor-9 .header *{
    color: #ffd5d2;
}
.tabela-kanban .coluna.lista-cor-9 ul::-webkit-scrollbar-thumb{
    background-color: #ffd5d2 !important;
    border-radius: 20px;
    border: 5px solid #ae2e24 !important;
}
.tabela-kanban .coluna.lista-cor-9 ul::-webkit-scrollbar-track{
    background: #ae2e24 !important;
}
.tabela-kanban .coluna.lista-cor-10{
    background: #803fa5;
}
.tabela-kanban .coluna.lista-cor-10 .header *{
    color: #eed7fc;
}
.tabela-kanban .coluna.lista-cor-10 ul::-webkit-scrollbar-thumb{
    background-color: #eed7fc !important;
    border-radius: 20px;
    border: 5px solid #803fa5 !important;
}
.tabela-kanban .coluna.lista-cor-10 ul::-webkit-scrollbar-track{
    background: #803fa5 !important;
}
.tabela-kanban .coluna.lista-cor-11{
    background: #4bce97;
}
.tabela-kanban .coluna.lista-cor-11 .header *{
    color: #1f1f21;
}
.tabela-kanban .coluna.lista-cor-11 ul::-webkit-scrollbar-thumb{
    background-color: #1f1f21 !important;
    border-radius: 20px;
    border: 5px solid #4bce97 !important;
}
.tabela-kanban .coluna.lista-cor-11 ul::-webkit-scrollbar-track{
    background: #4bce97 !important;
}
.tabela-kanban .coluna.lista-cor-12{
    background: #ddb30e;
}
.tabela-kanban .coluna.lista-cor-12 .header *{
    color: #1f1f21;
}
.tabela-kanban .coluna.lista-cor-12 ul::-webkit-scrollbar-thumb{
    background-color: #1f1f21 !important;
    border-radius: 20px;
    border: 5px solid #ddb30e !important;
}
.tabela-kanban .coluna.lista-cor-12 ul::-webkit-scrollbar-track{
    background: #ddb30e !important;
}
.tabela-kanban .coluna.lista-cor-13{
    background: #fca700;
}
.tabela-kanban .coluna.lista-cor-13 .header *{
    color: #1f1f21;
}
.tabela-kanban .coluna.lista-cor-13 ul::-webkit-scrollbar-thumb{
    background-color: #1f1f21 !important;
    border-radius: 20px;
    border: 5px solid #fca700 !important;
}
.tabela-kanban .coluna.lista-cor-13 ul::-webkit-scrollbar-track{
    background: #fca700 !important;
}
.tabela-kanban .coluna.lista-cor-14{
    background: #f87168;
}
.tabela-kanban .coluna.lista-cor-14 .header *{
    color: #1f1f21;
}
.tabela-kanban .coluna.lista-cor-14 ul::-webkit-scrollbar-thumb{
    background-color: #1f1f21 !important;
    border-radius: 20px;
    border: 5px solid #f87168 !important;
}
.tabela-kanban .coluna.lista-cor-14 ul::-webkit-scrollbar-track{
    background: #f87168 !important;
}
.tabela-kanban .coluna.lista-cor-15{
    background: #c97cf4;
}
.tabela-kanban .coluna.lista-cor-15 .header *{
    color: #1f1f21;
}
.tabela-kanban .coluna.lista-cor-15 ul::-webkit-scrollbar-thumb{
    background-color: #1f1f21 !important;
    border-radius: 20px;
    border: 5px solid #c97cf4 !important;
}
.tabela-kanban .coluna.lista-cor-15 ul::-webkit-scrollbar-track{
    background: #c97cf4 !important;
}
.tabela-kanban .coluna.lista-cor-16{
    background: #123263;
}
.tabela-kanban .coluna.lista-cor-16 .header *{
    color: #cfe1fd;
}
.tabela-kanban .coluna.lista-cor-16 ul::-webkit-scrollbar-thumb{
    background-color: #cfe1fd !important;
    border-radius: 20px;
    border: 5px solid #123263 !important;
}
.tabela-kanban .coluna.lista-cor-16 ul::-webkit-scrollbar-track{
    background: #123263 !important;
}
.tabela-kanban .coluna.lista-cor-17{
    background: #164555;
}
.tabela-kanban .coluna.lista-cor-17 .header *{
    color: #c6edfb;
}
.tabela-kanban .coluna.lista-cor-17 ul::-webkit-scrollbar-thumb{
    background-color: #c6edfb !important;
    border-radius: 20px;
    border: 5px solid #164555 !important;
}
.tabela-kanban .coluna.lista-cor-17 ul::-webkit-scrollbar-track{
    background: #164555 !important;
}
.tabela-kanban .coluna.lista-cor-18{
    background: #37471f;
}
.tabela-kanban .coluna.lista-cor-18 .header *{
    color: #d3f1a7;
}
.tabela-kanban .coluna.lista-cor-18 ul::-webkit-scrollbar-thumb{
    background-color: #d3f1a7 !important;
    border-radius: 20px;
    border: 5px solid #37471f !important;
}
.tabela-kanban .coluna.lista-cor-18 ul::-webkit-scrollbar-track{
    background: #37471f !important;
}
.tabela-kanban .coluna.lista-cor-19{
    background: #50253f;
}
.tabela-kanban .coluna.lista-cor-19 .header *{
    color: #fdd0ec;
}
.tabela-kanban .coluna.lista-cor-19 ul::-webkit-scrollbar-thumb{
    background-color: #fdd0ec !important;
    border-radius: 20px;
    border: 5px solid #50253f !important;
}
.tabela-kanban .coluna.lista-cor-19 ul::-webkit-scrollbar-track{
    background: #50253f !important;
}
.tabela-kanban .coluna.lista-cor-20{
    background: #4b4d51;
}
.tabela-kanban .coluna.lista-cor-20 .header *{
    color: #e2e3e4;
}
.tabela-kanban .coluna.lista-cor-20 ul::-webkit-scrollbar-thumb{
    background-color: #e2e3e4 !important;
    border-radius: 20px;
    border: 5px solid #4b4d51 !important;
}
.tabela-kanban .coluna.lista-cor-20 ul::-webkit-scrollbar-track{
    background: #4b4d51 !important;
}
.tabela-kanban .coluna.lista-cor-21{
    background: #1558bc;
}
.tabela-kanban .coluna.lista-cor-21 .header *{
    color: #cfe1fd;
}
.tabela-kanban .coluna.lista-cor-21 ul::-webkit-scrollbar-thumb{
    background-color: #cfe1fd !important;
    border-radius: 20px;
    border: 5px solid #1558bc !important;
}
.tabela-kanban .coluna.lista-cor-21 ul::-webkit-scrollbar-track{
    background: #1558bc !important;
}
.tabela-kanban .coluna.lista-cor-22{
    background: #206a83;
}
.tabela-kanban .coluna.lista-cor-22 .header *{
    color: #c6edfb;
}
.tabela-kanban .coluna.lista-cor-22 ul::-webkit-scrollbar-thumb{
    background-color: #c6edfb !important;
    border-radius: 20px;
    border: 5px solid #206a83 !important;
}
.tabela-kanban .coluna.lista-cor-22 ul::-webkit-scrollbar-track{
    background: #206a83 !important;
}
.tabela-kanban .coluna.lista-cor-23{
    background: #4c6b1f;
}
.tabela-kanban .coluna.lista-cor-23 .header *{
    color: #d3f1a7;
}
.tabela-kanban .coluna.lista-cor-23 ul::-webkit-scrollbar-thumb{
    background-color: #d3f1a7 !important;
    border-radius: 20px;
    border: 5px solid #4c6b1f !important;
}
.tabela-kanban .coluna.lista-cor-23 ul::-webkit-scrollbar-track{
    background: #4c6b1f !important;
}
.tabela-kanban .coluna.lista-cor-24{
    background: #943d73;
}
.tabela-kanban .coluna.lista-cor-24 .header *{
    color: #fdd0ec;
}
.tabela-kanban .coluna.lista-cor-24 ul::-webkit-scrollbar-thumb{
    background-color: #fdd0ec !important;
    border-radius: 20px;
    border: 5px solid #943d73 !important;
}
.tabela-kanban .coluna.lista-cor-24 ul::-webkit-scrollbar-track{
    background: #943d73 !important;
}
.tabela-kanban .coluna.lista-cor-25{
    background: #63666b;
}
.tabela-kanban .coluna.lista-cor-25 .header *{
    color: #e2e3e4;
}
.tabela-kanban .coluna.lista-cor-25 ul::-webkit-scrollbar-thumb{
    background-color: #e2e3e4 !important;
    border-radius: 20px;
    border: 5px solid #63666b !important;
}
.tabela-kanban .coluna.lista-cor-25 ul::-webkit-scrollbar-track{
    background: #63666b !important;
}
.tabela-kanban .coluna.lista-cor-26{
    background: #669df1;
}
.tabela-kanban .coluna.lista-cor-26 .header *{
    color: #1f1f21;
}
.tabela-kanban .coluna.lista-cor-26 ul::-webkit-scrollbar-thumb{
    background-color: #1f1f21 !important;
    border-radius: 20px;
    border: 5px solid #669df1 !important;
}
.tabela-kanban .coluna.lista-cor-26 ul::-webkit-scrollbar-track{
    background: #669df1 !important;
}
.tabela-kanban .coluna.lista-cor-27{
    background: #6cc3e0;
}
.tabela-kanban .coluna.lista-cor-27 .header *{
    color: #1f1f21;
}
.tabela-kanban .coluna.lista-cor-27 ul::-webkit-scrollbar-thumb{
    background-color: #1f1f21 !important;
    border-radius: 20px;
    border: 5px solid #6cc3e0 !important;
}
.tabela-kanban .coluna.lista-cor-27 ul::-webkit-scrollbar-track{
    background: #6cc3e0 !important;
}
.tabela-kanban .coluna.lista-cor-28{
    background: #94c748;
}
.tabela-kanban .coluna.lista-cor-28 .header *{
    color: #1f1f21;
}
.tabela-kanban .coluna.lista-cor-28 ul::-webkit-scrollbar-thumb{
    background-color: #1f1f21 !important;
    border-radius: 20px;
    border: 5px solid #94c748 !important;
}
.tabela-kanban .coluna.lista-cor-28 ul::-webkit-scrollbar-track{
    background: #94c748 !important;
}
.tabela-kanban .coluna.lista-cor-29{
    background: #e774bb;
}
.tabela-kanban .coluna.lista-cor-29 .header *{
    color: #1f1f21;
}
.tabela-kanban .coluna.lista-cor-29 ul::-webkit-scrollbar-thumb{
    background-color: #1f1f21 !important;
    border-radius: 20px;
    border: 5px solid #e774bb !important;
}
.tabela-kanban .coluna.lista-cor-29 ul::-webkit-scrollbar-track{
    background: #e774bb !important;
}
.tabela-kanban .coluna.lista-cor-30{
    background: #96999e;
}
.tabela-kanban .coluna.lista-cor-30 .header *{
    color: #1f1f21;
}
.tabela-kanban .coluna.lista-cor-30 ul::-webkit-scrollbar-thumb{
    background-color: #1f1f21 !important;
    border-radius: 20px;
    border: 5px solid #96999e !important;
}
.tabela-kanban .coluna.lista-cor-30 ul::-webkit-scrollbar-track{
    background: #96999e !important;
}


.etiquetas-cores{
    display: flex;
    justify-content: center;
    flex-wrap: wrap;
    gap: 10px;
    margin: 0 !important;
    padding: 0 2px !important;
}
.etiquetas-cores li{
    width: 50px;
    height: 32px;
    border-radius: 7px;
    border: 3px solid #1f1f1f;
    cursor: pointer;
    position: relative;
}
.etiquetas-cores li.selected{
    outline: 1px solid #f5f7fa;
}
.etiquetas-cores li label{
    width: 100%;
    height: 100%;
    position: absolute;
    top: 0;
    cursor: pointer;
}
.modal-1.modal-etiquetas > div:last-child,
.modal-1.modal-cores > div:last-child{
    max-width: 374px;
}
.modal-1 .editor-texto{
    background: #111111;
}

.modal-1 .checkout{
    display: flex;
    gap: 20px;
    flex-wrap: wrap;
    justify-content: start;
    align-items: start;
    flex-direction: row-reverse;
}
.modal-1 .checkout .box{
    width: 100%;
}
.modal-1 .checkout .resumo{
    max-width: calc(40% - 10px);
}
.modal-1 .checkout .pessoal{
    max-width: calc(60% - 10px);
}
.modal-1 .checkout .pagamento{
    max-width: calc(60% - 10px);
}
.modal-1 .checkout .pagamento .radio{
    width: 20px;
    height: 20px;
    border: 1px solid #29B765;
    border-radius: 50%;
    display: inline-flex;
    justify-content: center;
    align-items: center;
    padding: 0;
}
.modal-1 .checkout .pagamento .radio:after{
    content: '';
    display: block;
    border-radius: 50%;
    width: 10px;
    height: 10px;
}
.modal-1 .checkout .pagamento .selected .radio:after{
    background: #29B765;
}
.modal-1 .checkout .pagamento > section > div{
    border-radius: 4px;
    border: 1px solid #494949;
}
.modal-1 .checkout .pagamento > section > div.selected{
    border: 1px solid #29B765;
}
.modal-1 .checkout .pagamento > section > div:nth-child(3){
    margin-top: 10px;
}
.modal-1 .checkout .pagamento > section > div > label{
    display: flex;
    justify-content: space-between;
    padding: 16px;
    cursor: pointer;
    
}
.modal-1 .checkout .pagamento > section > div > label > input{
    width: 0;
    height: 0;
    padding: 0;
    margin: 0;
    opacity: 0;
}
.modal-1 .checkout .pagamento > section > div > label > div{
    width: 100%;
}
.modal-1 .checkout .pagamento > section > div > div{
    min-width: 100%;
}
.modal-1 .checkout .pagamento > section > div > div label{
    padding: 0 20px;
}
.modal-1 .checkout .pagamento > section > div > div label select{
    outline: none !important;
    border-radius: 10px;
    display: block;
    width: 100%;
    padding: 10px 15px;
    color: #f5f7fa;
}
.modal-1 .checkout .pagamento .finalizar{
    display: flex;
    justify-content: end;
    margin-top: 24px;
}

.modal-1 .container-pix{
    text-align: center !important;
}
.modal-1 .container-pix img{
    width: 100%;
    max-width: 300px;
}
.modal-1 .container-pix .or{
    margin: 12px 0;
}

#etiqueta-lista ul{
    display: flex;
    flex-direction: column;
    gap: 10px;
}
#etiqueta-lista ul li{
    display: flex;
    align-items: center;
    gap: 10px;
}
#etiqueta-lista ul li input{
    min-width: 15px;
}
#etiqueta-lista ul li [class*="etiqueta-"]{
    width: 100%;
    display: flex;
    justify-content: center;
    align-items: center;
    gap: 5px;
}
#etiqueta-lista ul li svg{
    min-width: 16px;
    cursor: pointer;
}

.modal-cliente{
    display: flex;
    gap: 20px;
}
.modal-cliente .principal{
    width: 60%;
    padding-right: 20px;
    border-right: 1px solid #ffffff38;
}
.modal-cliente .principal .infos input{
    background: 0 !important;
    font-size: 24px;
    padding: 0;
    font-weight: 500;
    line-height: 1.2;
    border-radius: 0;
}
.modal-cliente .principal .infos button{
    background: 0;
    color: #0e1116;
    border: 0;
}
.modal-cliente .principal .infos button.selected{
    background: linear-gradient(to left, var(--color-primary), var(--color-secondary));
    padding: 5px;
    border-radius: 5px;
}
.modal-cliente .lateral{
    width: 40%;
}
.modal-cliente #anexos-comentarios,
.modal-cliente .container-anexos{
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 10px;
    padding: 10px;
}
.modal-cliente .container-anexos{
    padding: 0;
    margin-bottom: 10px;
}
.modal-cliente #anexos-comentarios > div,
.modal-cliente .container-anexos > a{
    display: flex;
    align-items: center;
    gap: 10px;
    background: #1111118c;
    border-radius: 40px;
    padding: 3px 10px;
}
.modal-cliente #anexos-comentarios > div button{
    background: 0;
    color: red;
    border: 0;
    padding: 0;
}
.modal-cliente nav ul{
    margin: 0;
    display: flex;
    gap: 10px;
    flex-wrap: wrap;
}
.modal-cliente nav button{
    font-size: 13px;
}
.modal-cliente .principal .etiquetas{
    display: flex;
    align-items: center;
    gap: 10px;
    flex-wrap: wrap;
}

[class*="status-"],
[class*="material-"]{
    font-size: 14px;
    padding: 5px 10px;
    border-radius: 100px;
    display: inline-flex;
    justify-content: center;
    align-items: center;
    gap: 5px;
    border: 1px solid;
    text-wrap: nowrap;
}
small[class*="status-"],
small[class*="material-"]{
    font-size: 12px;
}
.status-0{
    color: #f76e17;
    border-color: #f76e17 !important;
}
.status-1{
    color: #15aa5b;
    border-color: #15aa5b !important;
}
.status-2{
    color: red;
    border-color: red !important;
}
.status-3{
    color: var(--color-primary);
    border-color: var(--color-primary) !important;
}
.status-4{
    color: #8894a8;
    border-color: #8894a8 !important;
}
select[class*="status-"] option{
    color: #f5f7fa !important;
}
.material-0 {
    color: #f71717;
    border-color: #f71717;
}
.material-1 {
    color: #179af7;
    border-color: #179af7;
}
.material-2 {
    color: #f76e17;
    border-color: #f76e17;
}

.block{
    position: fixed;
    top: 0;
    right: 0;
    bottom: 0;
    left: 0;
    z-index: 999;
}

.loader-container{
    display: flex;
    justify-content: center !important;
    align-items: center;
    background: 0 !important;
}
.loader{
    border: 5px solid var(--color-primary);
    border-top: 5px solid #1f1f1f;
    border-radius: 50%;
    width: 50px;
    height: 50px;
    animation: spin 1s linear infinite;
}

#arquivosLista .loader,
#otimizacoesLista .loader{
    width: 30px;
    height: 30px;
    border-width: 4px;
}

.tag{
    background: #2d2d2d;
    padding: 3px 10px;
    display: inline-block;
    border-radius: 100px;
    color: #f5f7fa;
    cursor: pointer;
}
.tag.selected{
    background: linear-gradient(to left, var(--color-primary), var(--color-secondary));
}
.tag > input{
    opacity: 0 !important;
    width: 0 !important;
    height: 0 !important;
    border: 0 !important;
    margin: 0 !important;
    padding: 0 !important;
    position: absolute !important;
}

/*.cliente-1{
    background: #c80000 !important;
}
.cliente-2,.cliente-0{
    background: #d36e00 !important;
}
.cliente-3{
    background: #00c89b !important;
}
.cliente-4{
    background: #008ec8 !important;
}
.cliente-5{
    background: #003dc8 !important;
}
.cliente-6{
    background: #8700c8 !important;
}
.cliente-7{
    background: #c80073 !important;
}*/
.cliente-0{
    background: #797979 !important;
}
.cliente-1{
    background: #9D4EDD !important;
}
.cliente-2{
    background: #4361EE !important;
}
.cliente-3{
    background: #06D6A0 !important;
}
.cliente-4{
    background: #FFD60A !important;
}
.cliente-5{
    background: #00C853 !important;
}
.cliente-6{
    background: #FF9F1C !important;
}
.cliente-7{
    background: #3A86FF !important;
}
.cliente-8{
    background: #00B4D8 !important;
}
.cliente-9{
    background: #FCA311 !important;
}
.cliente-10{
    background: #D000FF !important;
}


.barra-progresso{
    width: 150px;
    min-width: 150px;
    height: 22px;
    border-radius: 50px;
    background: #1f1f1f;
    display: flex;
    justify-content: start;
    align-items: center;
    position: relative;
    overflow: hidden;
}
.barra-progresso > div{
    background: linear-gradient(to left, var(--color-primary), var(--color-secondary));
    height: 100%;
}
.barra-progresso > span{
    position: absolute;
    width: 100%;
    text-align: center;
    color: #f5f7fa;
}

#kanban{
    overflow: auto;
    /*min-height: calc(100vh - 100px);*/
    display: flex;
    align-items: start;
    gap: 15px;
}
.tabela-kanban{
    display: flex;
    align-items: start;
    gap: 15px;
}
.tabela-kanban .coluna{
    max-width: 300px;
    min-width: 300px;
    background: #1f1f1f;
    border-radius: 10px;
    font-size: 14px;
}
.tabela-kanban > .ui-state-highlight{
    min-height: 71px;
    max-width: 300px;
    min-width: 300px;
    background: #1f1f1f70;
    border-radius: 10px;
}
.tabela-kanban .coluna .header{
    padding: 10px;
    display: flex;
    justify-content: space-between;
    align-items: center;
}
.tabela-kanban .coluna .header > div{
    display: flex;
    align-items: center;
    gap: 5px;
}
.tabela-kanban .coluna .header > .acoes{
    position: relative;
    flex-direction: column;
    align-items: end;
}
.tabela-kanban .coluna .header > .acoes ul{
    display: none;
    list-style: none;
    padding: 0;
    margin: 0;
    background: #1f1f1f;
    box-shadow: 0 0 10px 2px rgba(0, 0, 0, .4);
    border-radius: 7px;
    position: absolute;
    top: calc(100% + 5px);
    overflow: hidden;
}
.tabela-kanban .coluna .header > .acoes ul.open{
    display: block;
}
.tabela-kanban .coluna .header > .acoes ul li{
    padding: 5px 10px;
    cursor: pointer;
    color: #939295 !important;
    transition: .3s;
}
.tabela-kanban .coluna .header > .acoes ul li:hover{
    background: #252529;
}
.tabela-kanban .coluna .header button{
    border: 0;
    background: 0;
    color: #f5f7fa;
}
.tabela-kanban .coluna .header b{
    color: #f5f7fa;
}
.tabela-kanban .coluna .header h3{
    margin: 0;
    font-size: 20px;
}
.tabela-kanban .coluna .header small{
    display: block;
    text-align: center;
}
.tabela-kanban .coluna > ul{
    list-style: none;
    padding: 15px;
    display: flex;
    flex-direction: column;
    gap: 15px;
    margin: 0;
    max-height: calc(100vh - 100px);
    overflow: auto;
}
.tabela-kanban .coluna > ul .ui-state-highlight{
    background: #111111;
    border-radius: 10px;
    width: 100%;
    min-height: 72px;
    height: 72px;
    opacity: .7;
}
.tabela-kanban .coluna > ul li > div{
    background: #111111;
    border-radius: 10px;
    padding: 15px;
    cursor: pointer;
    border-left: 4px solid var(--color-primary);
}
.tabela-kanban .coluna > ul li > div.expirado{
    background: #ff00184f;
    color: red;
}
.tabela-kanban .coluna > ul li > div .etiquetas{
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 5px;
    margin-bottom: 10px;
}
.tabela-kanban .coluna > ul li > div .etiquetas:empty{
    display: none;
}
.tabela-kanban .coluna > ul li > div .etiquetas span{
    font-size: 12px;
    font-weight: 400;
    padding: 6px 10px;
}
.tabela-kanban [class*="cliente-"]{
    border: 0;
    outline: none !important;
    padding: 2px;
    border-radius: 100px;
    display: inline-block;
}
.tabela-kanban #coluna-adicionar{
    background: #1f1f1fb8;
}
.tabela-kanban #coluna-adicionar .header{
    cursor: pointer;
}
.tabela-kanban #coluna-adicionar .adicionar{
    padding: 10px;
}
.tabela-kanban #coluna-adicionar .adicionar input{
    background: 0;
    border: 1px solid var(--color-border);
    width: 100%;
    padding: 10px 15px;
    border-radius: 10px;
    outline: none !important;
    color: #f5f7fa;
    margin-bottom: 10px;
}
.tabela-kanban #coluna-adicionar .adicionar > div{
    display: flex;
    align-items: center;
    gap: 10px;
}
.tabela-kanban #coluna-adicionar .adicionar button{
    width: 100%;
}

[class*="cliente-"] option{
    background: #111111 !important;
    color: #939295;
}

#caminho{
    display: flex;
    align-items: center;
    gap: 7px;
    flex-wrap: wrap;
}
#caminho span,
#caminho svg.bi-house{
    cursor: pointer;
}
#caminho svg.bi-chevron-right{
    stroke: #939295;
}

.tabela .acoes{
    position: relative;
    flex-direction: column;
    align-items: end;
}
.tabela .acoes button{
    background: 0;
    border: 0;
    color: #939295;
}
.tabela .acoes ul{
    display: none;
    list-style: none;
    padding: 0;
    margin: 0;
    background: #1f1f1f;
    box-shadow: 0 0 10px 2px rgba(0, 0, 0, .4);
    border-radius: 7px;
    position: absolute;
    top: calc(100% + 5px);
    overflow: hidden;
    z-index: 9;
}
.tabela .acoes ul.open{
    display: block;
}
.tabela .acoes ul li{
    padding: 5px 10px;
    cursor: pointer;
    color: #939295 !important;
    transition: .3s;
}
.tabela .acoes ul li:hover{
    background: #252529;
}

/*.chat{
    position: fixed;
    right: 20px;
    bottom: 20px;
    z-index: 9999;
    background: #1f1f1f;
    box-shadow: 0 0 12px 3px rgba(0, 0, 0, .1);
    overflow: hidden;
    border-radius: 10px;
    height: 80vh;
    width: 100%;
    max-width: 350px;
}*/
.chat > div{
    display: flex;
    flex-direction: column;
    height: 100%;
}
.chat .header{
    background: linear-gradient(to left, var(--color-primary), var(--color-secondary));
    color: #212737 !important;
    padding: 10px 15px;
    display: flex;
    justify-content: space-between;
    align-items: center;
}
.chat .header > div{
    display: flex;
    align-items: center;
    gap: 10px;
}
.chat .header > div select,
.chat .header > div button:not([type="button"]){
    border: 0;
    border-radius: 7px;
    padding: 5px 10px;
    outline: none !important;
    background: 0;
    color: #212737;
    font-weight: bolder;
    border: 1px solid #212737;
}
.chat .header > div select option{
    background: #111111;
}
.chat .header button{
    border: 0;
    background: 0;
    color: #212737;
}
.chat .main::-webkit-scrollbar-thumb{
    background-color: #151515;
    border-radius: 20px;
    border: 5px solid #111111;
}
.chat .main::-webkit-scrollbar-track{
    background: #111111;
}
.chat .main{
    max-height: calc(100vh - 108px);
    height: 100%;
    padding: 10px;
    overflow: auto;
    display: flex;
    flex-direction: column;
    flex: 1;
    gap: 10px;
}
.chat .main > div:not(.me):not(.carregar){
    display: flex;
    align-items: start;
    flex-direction: column;
}
.chat .main > .aviso{
    color: #f5f7fa;
    border: 0;
    text-align: center;
    background: 0;
    margin: 24px 0;
    align-items: center !important;
}
.chat .main > .aviso > div{
    background: #151515;
}
.chat .main > .me{
    display: flex;
    align-items: end;
    flex-direction: column;
}
.chat .main > div > div{
    border-radius: 7px;
}
.chat .main > div > div:not(.player-container){
    padding: 10px;
    overflow-wrap: break-word;
    word-break: break-word;
}
.chat .main > div > div:not(.player-container) > a{
    display: flex;
    align-items: center;
    gap: 10px;
}
.chat .main > div > div:not(.player-container) > a svg{
    min-width: 16px;
}
.chat .main > div > div{
    width: auto;
    max-width: 80%;
    background: #1f1f1f;
}
.chat .main > div > div:not(.player-container).setores{
    background: 0;
    display: flex;
    flex-direction: column;
    align-items: start;
    gap: 10px;
}
.chat .main > div > div:not(.player-container).setores label{
    border: 1px solid var(--color-primary);
    border-radius: 100px;
    padding: 7px 14px;
    background: #151515;
}
.chat .main > div > div:not(.player-container).setores label.selected{
    background: var(--color-primary);
    color: #0e1116;
}
.chat .main > .me > div{
    background: #151515;
    position: relative;
    overflow: visible;
}
.chat .main > .me > div > .acoes{
    display: none;
    position: absolute;
    top: 0;
    right: 0;
    flex-direction: column;
    align-items: end;
}
.chat .main > .me > div > .acoes button:not(.play-btn){
    background: #151515;
    color: #f5f7fa;
    border: 0;
    padding: 6px;
}
.chat .main > .me > div:hover > .acoes,
.chat .main > .me > div > .acoes.open{
    display: flex;
}
.chat .main > .me > div > .acoes ul{
    display: none;
    list-style: none;
    padding: 0;
    margin: 0;
    background: #1f1f1f;
    box-shadow: 0 0 10px 2px rgba(0, 0, 0, .4);
    border-radius: 7px;
    position: absolute;
    top: 100%;
}
.chat .main > .me > div > .acoes.open ul{
    display: block;
    overflow: hidden;
}
.chat .main > .me > div > .acoes ul li{
    padding: 5px 10px;
    cursor: pointer;
    color: #939295 !important;
    transition: .3s;
}
.chat .main > .me > div > .acoes ul li:hover{
    background: #252529;
}
.chat .main > div > .player-container{
    width: 100%;
}
.chat .footer{
    box-shadow: 0 0 12px 3px rgba(0, 0, 0, .1);
    background: #151515;
    margin: 10px;
    border-radius: 22px;
    overflow: hidden;
}
.chat .footer > div{
    display: flex;
    align-items: end;
}
.chat .footer > div.anexos:empty{
    display: none;
}
.chat .footer > div.anexos{
    flex-wrap: wrap;
    padding: 10px;
    gap: 10px;
}
.chat .footer > div.anexos > div{
    display: flex;
    align-items: center;
    gap: 10px;
    background: #1f1f1f;
    border-radius: 40px;
    padding: 3px 10px;
}
.chat .footer > div.anexos > div button{
    background: 0;
    color: red;
    border: 0;
    padding: 0;
}
.chat .footer textarea{
    border: 0 !important;
    background: 0 !important;
    resize: none !important;
    max-height: 100%;
}
.chat .footer textarea::-webkit-scrollbar-thumb{
    background-color: #1f1f1f;
    border-radius: 20px;
    border: 5px solid #151515;
}
.chat .footer textarea::-webkit-scrollbar-track{
    background: #151515;
}
.chat .footer label{
    width: 34px;
    min-width: 34px;
    height: 34px;
    border: 0;
    padding: 0;
    border-radius: 50%;
    display: flex;
    justify-content: center;
    align-items: center;
    margin-left: 5px;
    margin-bottom: 5px;
    cursor: pointer;
}
.chat .footer label svg{
    width: 18px;
    height: 18px;
}
.chat .footer > div:not(.anexos) button{
    background: linear-gradient(to left, var(--color-primary), var(--color-secondary));
    width: 34px;
    min-width: 34px;
    height: 34px;
    border: 0;
    padding: 0;
    border-radius: 50%;
    display: flex;
    justify-content: center;
    align-items: center;
    margin-right: 5px;
    margin-bottom: 5px;
}
.chat .footer > div:not(.anexos) button svg{
    fill: #0e1116;
    width: 16px;
    height: 16px;
}
.chat .player{
    display: flex;
    align-items: center;
    background: #151515;
    margin: 10px;
    border-radius: 22px;
    overflow: hidden;
    height: 44px;
    padding: 0 5px;
    position: absolute;
    bottom: 0;
    right: 0;
    left: 0;
}
.chat .player-container,.audio{
    display: flex;
    align-items: center;
    background: #111111;
    border-radius: 22px;
    overflow: hidden;
    height: 44px;
    padding: 0 5px;
}
.audio{
    border: 1px solid var(--color-border);
}
.chat .player button,
.chat .player-container button,
.audio button{
    background: 0;
    border: 0;
    color: #f5f7fa;
}
.chat .player button:last-child{
    background: linear-gradient(to left, var(--color-primary), var(--color-secondary));
    width: 34px;
    min-width: 34px;
    height: 34px;
    border-radius: 50%;
    display: flex;
    justify-content: center;
    align-items: center;
}
.chat .player button:last-child svg{
    fill: #f5f7fa;
    width: 16px;
    height: 16px;
}
.chat .player .play-btn svg,
.chat .player-container .play-btn svg,
.audio .play-btn svg{
    width: 20px;
    height: 20px;
}
.chat .player .progress-bar,
.chat .player-container .progress-bar,
.audio .progress-bar{
    flex: 1;
    height: 6px;
    background: #414149;
    border-radius: 4px;
    cursor: pointer;
    position: relative;
}
.chat .player .progress-bar .progress,
.chat .player-container .progress-bar .progress,
.audio .progress-bar .progress{
    width: 0%;
    height: 100%;
    border-radius: 4px;
    background: linear-gradient(to left, var(--color-primary), var(--color-secondary));
}
.chat .player .time,
.chat .player-container .time,
.audio .time{
    font-size: 12px;
    margin: 0 6px;
}
.chat .carregar{
    padding: 10px;
    display: flex;
    justify-content: center;
    height: 50px;
}
.chat .carregar button{
    border: 0;
    background: #151515;
    color: #939295;
    padding: 2px 7px;
    border-radius: 7px;
}
.chat .carregar .loader-container{
    padding: 0;
    background: 0;
}
.chat .carregar .loader{
    border: 4px solid var(--color-primary);
    border-top: 5px solid #1f1f1f;
    width: 30px;
    height: 30px;
}

.btn-chat{
    position: fixed;
    right: 20px;
    bottom: 20px;
    z-index: 9999;
    padding: 0;
    border: 0;
    background: 0;
    display: flex;
    cursor: pointer;
    outline: none !important;
}
.btn-chat svg{
    width: 40px;
    height: 40px;
    fill: var(--color-primary);
}
.chat-float{
    position: fixed;
    right: 20px;
    bottom: 20px;
    z-index: 9999;
    background: #171717;
    box-shadow: 0 0 12px 3px rgba(0, 0, 0, .1);
    overflow: hidden;
    border-radius: 10px;
    height: 80vh;
    width: 100%;
    max-width: 350px;
}
.chat-float > div{
    display: flex;
    flex-direction: column;
    height: 100%;
}
.chat-float .header{
    background: linear-gradient(to left, var(--color-primary), var(--color-secondary));
    color: #010101 !important;
    padding: 10px 15px;
    display: flex;
    justify-content: space-between;
    align-items: center;
}
.chat-float .header button{
    border: 0;
    background: 0;
    color: #010101;
}
.chat-float .main::-webkit-scrollbar-thumb{
    background-color: #272727;
    border-radius: 20px;
    border: 5px solid #171717;
}
.chat-float .main::-webkit-scrollbar-track{
    background: #171717;
}
.chat-float .main{
    height: calc(80vh - 96px);
    padding: 10px;
    overflow: auto;
    display: flex;
    flex-direction: column;
    flex: 1;
    gap: 10px;
}
.chat-float .main > div:not(.me):not(.carregar){
    display: flex;
    align-items: start;
    flex-direction: column;
}
.chat-float .main > .me{
    display: flex;
    align-items: end;
    flex-direction: column;
}
.chat-float .main > div > div{
    border-radius: 7px;
}
.chat-float .main > div > div:not(.player-container){
    padding: 10px;
    overflow-wrap: break-word;
    word-break: break-word;
}
.chat-float .main > div > div:not(.player-container) > a{
    display: flex;
    align-items: center;
    gap: 10px;
}
.chat-float .main > div > div:not(.player-container) > a svg{
    min-width: 16px;
}
.chat-float .main > div > div:not(.player-container).setores{
    background: 0;
    display: flex;
    flex-direction: column;
    align-items: start;
    gap: 10px;
}
.chat-float .main > div > div:not(.player-container).setores label{
    border: 1px solid var(--color-primary);
    border-radius: 100px;
    padding: 7px 14px;
    background: #272727;
    cursor: pointer;
}
.chat-float .main > div > div:not(.player-container).setores label.selected{
    background: var(--color-primary);
    color: #fff;
}
.chat-float .main > div > div{
    width: auto;
    max-width: 80%;
    background: #010101;
}
.chat-float .main > .me > div{
    background: #272727;
}
.chat-float .main > div > .player-container{
    width: 100%;
}
.chat-float .footer{
    box-shadow: 0 0 12px 3px rgba(0, 0, 0, .1);
    background: #272727;
    margin: 10px;
    border-radius: 22px;
    overflow: hidden;
}
.chat-float .footer > div{
    display: flex;
    align-items: end;
}
.chat-float .footer > div.anexos:empty{
    display: none;
}
.chat-float .footer > div.anexos{
    flex-wrap: wrap;
    padding: 10px;
    gap: 10px;
}
.chat-float .footer > div.anexos > div{
    display: flex;
    align-items: center;
    gap: 10px;
    background: #010101;
    border-radius: 40px;
    padding: 3px 10px;
}
.chat-float .footer > div.anexos > div button{
    background: 0;
    color: red;
    border: 0;
    padding: 0;
}
.chat-float .footer textarea{
    border: 0 !important;
    background: 0 !important;
    resize: none !important;
    max-height: 100%;
}
.chat-float .footer textarea::-webkit-scrollbar-thumb{
    background-color: #010101;
    border-radius: 20px;
    border: 5px solid #272727;
}
.chat-float .footer textarea::-webkit-scrollbar-track{
    background: #272727;
}
.chat-float .footer label{
    width: 34px;
    min-width: 34px;
    height: 34px;
    border: 0;
    padding: 0;
    border-radius: 50%;
    display: flex;
    justify-content: center;
    align-items: center;
    margin-left: 5px;
    margin-bottom: 5px;
    cursor: pointer;
}
.chat-float .footer label svg{
    width: 18px;
    height: 18px;
}
.chat-float .footer > div:not(.anexos) button{
    background: linear-gradient(to left, var(--color-primary), var(--color-secondary));
    width: 34px;
    min-width: 34px;
    height: 34px;
    border: 0;
    padding: 0;
    border-radius: 50%;
    display: flex;
    justify-content: center;
    align-items: center;
    margin-right: 5px;
    margin-bottom: 5px;
}
.chat-float .footer > div:not(.anexos) button svg{
    fill: #010101;
    width: 16px;
    height: 16px;
}
.chat-float .player{
    display: flex;
    align-items: center;
    background: #272727;
    margin: 10px;
    border-radius: 22px;
    overflow: hidden;
    height: 44px;
    padding: 0 5px;
    position: absolute;
    bottom: 0;
    right: 0;
    left: 0;
}
.chat-float .player-container{
    display: flex;
    align-items: center;
    background: #272727;
    border-radius: 22px;
    overflow: hidden;
    height: 44px;
    padding: 0 5px;
}
.chat-float .player button,
.chat-float .player-container button{
    background: 0;
    border: 0;
    color: #fff;
}
.chat-float .player button:last-child{
    background: linear-gradient(to left, var(--color-primary), var(--color-secondary));
    width: 34px;
    min-width: 34px;
    height: 34px;
    border-radius: 50%;
    display: flex;
    justify-content: center;
    align-items: center;
}
.chat-float .player button:last-child svg{
    fill: #fff;
    width: 16px;
    height: 16px;
}
.chat-float .player .play-btn svg,
.chat-float .player-container .play-btn svg{
    width: 20px;
    height: 20px;
}
.chat-float .player .progress-bar,
.chat-float .player-container .progress-bar{
    flex: 1;
    height: 6px;
    background: #414149;
    border-radius: 4px;
    cursor: pointer;
    position: relative;
}
.chat-float .player .progress-bar .progress,
.chat-float .player-container .progress-bar .progress{
    width: 0%;
    height: 100%;
    border-radius: 4px;
    background: linear-gradient(to left, var(--color-primary), var(--color-secondary));
}
.chat-float .player .time,
.chat-float .player-container .time{
    font-size: 12px;
    margin: 0 6px;
}
.chat-float .carregar{
    padding: 10px;
    display: flex;
    justify-content: center;
}
.chat-float .carregar button{
    border: 0;
    background: #272727;
    color: #939295;
    padding: 2px 7px;
    border-radius: 7px;
}
.chat-float .carregar .loader-container{
    padding: 0;
    background: 0;
}
.chat-float .carregar .loader{
    border: 4px solid var(--color-primary);
    border-top: 5px solid #010101;
    width: 30px;
    height: 30px;
}

.aulas video{
    width: 100%;
}
.aulas .items{
    width: 100%;
    max-width: 850px;
    margin: 0 auto;
    gap: 20px;
}
.aulas .items .item{
    /*background: #5454654a;
    border: 1px solid #54546557;*/
    background: linear-gradient(#010101, #010101) padding-box, radial-gradient(circle at 50% 0%, #00cc70, transparent 70%), /* Brilho no Topo */ radial-gradient(circle at 50% 100%, #00cc70, transparent 70%), /* Brilho na Base */ linear-gradient(rgba(0, 204, 112, 0.1), rgba(0, 204, 112, 0.1)) border-box;
    box-shadow: 0 0 15px rgba(0, 204, 112, 0.15), 0 0 5px rgba(0, 204, 112, 0.1);
}
.aulas .items .item > div:first-child{
    padding: 24px;
}
.aulas .items .item.open{
    border-color: #00cc7047;
}
.aulas .items .item iframe{
    width: 100%;
}
.aulas .items .item > div > div > svg{
    width: 30px;
    height: 30px;
    color: var(--color-primary);
}
.aulas .barra-progresso{
    width: 100%;
    height: 14px;
}

#bloqueio{
    position: absolute;
    left: 0;
    right: 0;
    top: 0;
    bottom: 0;
    background: #ffffff1a;
    backdrop-filter: blur(2px);
    -webkit-backdrop-filter: blur(8px);
    z-index: 99999;
    display: flex;
    justify-content: center;
    align-items: center;
}
#bloqueio > div{
    background: #171717;
    border-radius: 10px;
    padding: 20px;
    width: 100%;
    max-width: 390px;
    text-align: center;
}
#bloqueio > div > div:first-child{
    display: flex;
    justify-content: center;
    align-items: center;
}
#bloqueio > div > div:first-child::after{
    content: '';
    box-shadow: 0 0 45px 20px #fdbc4b;
    position: absolute;
    border-radius: 50%;
}
#bloqueio svg{
    fill: #fdbc4b;
    width: 50px;
    height: 50px;
    margin-bottom: 20px;
}

.lista-paginas{
    
}
.lista-paginas .pagina{
    width: 100%;
    aspect-ratio: 16 / 9;
    display: flex;
    justify-content: center;
    align-items: center;
    overflow: hidden;
    border-radius: 7px;
    position: relative;
    border: 1px solid #3e3e3e;
}
.lista-paginas .pagina > span{
    position: absolute;
    top: 10px;
    right: 10px;
}
.lista-paginas .pagina img{
    width: 100%;
    height: 100%;
    object-fit: cover;
}
.lista-paginas .pagina svg{
    width: 24px;
    height: 24px;
    fill: #6b6b6b;
    transition: .3s;
}
.lista-paginas .pagina.adicionar{
    border: 2px dashed #3e3e3e;
    transition: .3s;
}
.lista-paginas .pagina.adicionar:hover{
    border-color: #858585;
}
.lista-paginas .pagina:hover svg{
    fill: #858585;
}

.editor-layout main{
    padding: 0;
}
.editor-layout aside{
    width: 350px;
}
body.editor-layout.menu-open header, body.editor-layout.menu-open main{
    margin-left: 350px;
}
.editor-layout iframe{
    height: 100%;
}
.editor-layout aside .historico{
    flex: 1;
}
.editor-layout aside .footer{
    padding: 10px;
}
.editor-layout aside .footer form{
    background: #111111;
    padding: 10px 15px;
    border-radius: 10px;
    display: block;
    width: 100%;
    color: #f5f7fa;
    outline: none !important;
    border: 1px solid #010101;
}
.editor-layout aside .footer form textarea{
    background: #111111;
}
.editor-layout aside .footer form button{
    background: var(--color-primary);
    width: 34px;
    min-width: 34px;
    height: 34px;
    border: 0;
    padding: 0;
    border-radius: 50%;
    display: flex;
    justify-content: center;
    align-items: center;
}
.editor-layout aside .footer form button svg{
    width: 16px;
    height: 16px;
}

@media(max-width: 500px){
    .chat-float{
        top: 0;
        left: 0;
        bottom: 0;
        right: 0;
        inset: 0;
        width: 100vw;
        max-width: 100vw;
        height: calc(var(--vh, 1vh) * 100);
        border-radius: 0;
    }
}

@keyframes spin {
    0% { transform: rotate(0deg); }
    100% { transform: rotate(360deg); }
}
@keyframes pulse {
    50% { opacity: 0.5; }
}
@media(max-width: 1400px){
    .criativos .criativo{
        width: calc(25% - 15px);
    }
}
@media(max-width: 1300px){
    .catalogo .item{
        width: calc(50% - 10px);
    }
}
@media(max-width: 1060px){
    .criativos .criativo{
        width: calc(33.333333333% - 14px);
    }
}
@media(max-width: 1000px){
    .catalogo .item{
        width: 100%;
    }
    .infos-gestor{
        flex-wrap: wrap;
    }
}
@media(max-width: 590px){
    .criativos .criativo{
        width: calc(50% - 10px);
    }
}
@media(max-width: 480px){
    .catalogo .item{
        width: 100%;
    }
}
@media(max-width: 1024px){
    .card-1{
        width: calc(33.3333333% - 15px);
    }
}
@media(max-width: 768px){
    header,main{
        margin-left: 0 !important;
    }
    aside .btn-menu{
        display: block;
    }
    header .status-sistema{
        display: none;
    }
    .card-1{
        width: calc(50% - 10px);
    }
    #area-cliente aside{
        width: 50px;
        padding: 5px;
    }
    #area-cliente aside li span{
        display: none;
    }
    #area-cliente main{
        margin-left: 50px;
    }
    .pesquisa-datas{
        flex-wrap: wrap;
    }
}
@media(max-width: 525px){
    header .logo{
        display: none;
    }
    
    .card-1{
        width: 100%;
    }
}