/*! HTML5 Boilerplate v8.0.0 | MIT License | https://html5boilerplate.com/ */

/* main.css 3.0.0 | MIT License | https://github.com/h5bp/main.css#readme */
/*
 * What follows is the result of much research on cross-browser styling.
 * Credit left inline and big thanks to Nicolas Gallagher, Jonathan Neal,
 * Kroc Camen, and the H5BP dev community and team.
 */

/* ==========================================================================
   Base styles: opinionated defaults
   ========================================================================== */

html {
  color: #222;
  font-size: 1em;
  line-height: 1.4;
  height: 100%;
  font-family: "IBM Plex Sans", sans-serif;
}

body{
  height: 100%;
  font-family: "IBM Plex Sans", sans-serif !important;
  overflow-x: hidden;
  background-color: #F8F9FF;
}

/*
 * Remove text-shadow in selection highlight:
 * https://twitter.com/miketaylr/status/12228805301
 *
 * Customize the background color to match your design.
 */

::-moz-selection {
  background: #b3d4fc;
  text-shadow: none;
}

::selection {
  background: #b3d4fc;
  text-shadow: none;
}

Copied the text: /* ===== Scrollbar CSS ===== */
  /* Firefox */
  * {
    scrollbar-width: auto;
    scrollbar-color: #9aacbe #ffffff;
  }

  /* Chrome, Edge, and Safari */
  *::-webkit-scrollbar {
    width: 16px;
  }

  *::-webkit-scrollbar-track {
    background: #ffffff;
  }

  *::-webkit-scrollbar-thumb {
    background-color: #9aacbe;
    border-radius: 10px;
    border: 3px solid #ffffff;
  }

    *::-ms-scrollbar {
    width: 16px;
  }

  *::-ms-scrollbar-track {
    background: #ffffff;
  }

  *::-ms-scrollbar-thumb {
    background-color: #9aacbe;
    border-radius: 10px;
    border: 3px solid #ffffff;
  }

  *::-o-scrollbar {
    width: 16px;
  }

  *::-o-scrollbar-track {
    background: #ffffff;
  }

  *::-o-scrollbar-thumb {
    background-color: #9aacbe;
    border-radius: 10px;
    border: 3px solid #ffffff;
  }

  *::-moz-scrollbar {
    width: 16px;
  }

  *::-moz-scrollbar-track {
    background: #ffffff;
  }

  *::-moz-scrollbar-thumb {
    background-color: #9aacbe;
    border-radius: 10px;
    border: 3px solid #ffffff;
  }

  input:focus,
select:focus,
textarea:focus {
    outline: none;
    box-shadow: none;
}

/*
 * A better looking default horizontal rule
 */

hr {
  display: block;
  height: 1px;
  border: 0;
  border-top: 1px solid #ccc;
  margin: 1em 0;
  padding: 0;
}

/*
 * Remove the gap between audio, canvas, iframes,
 * images, videos and the bottom of their containers:
 * https://github.com/h5bp/html5-boilerplate/issues/440
 */

audio,
canvas,
iframe,
img,
svg,
video {
  vertical-align: middle;
}

/*
 * Remove default fieldset styles.
 */

fieldset {
  border: 0;
  margin: 0;
  padding: 0;
}

/*
 * Allow only vertical resizing of textareas.
 */

textarea {
  resize: vertical;
}

.material-placeholder img {
    border-radius: 20px !important;
    overflow: hidden;
}


::placeholder { /* Chrome, Firefox, Opera, Safari 10.1+ */
color: #2B2D34; opacity: 1; /* Firefox */ }
:-ms-input-placeholder { /* Internet Explorer 10-11 */
color: #2B2D34; }
:-o-input-placeholder { /* Internet Explorer 10-11 */
color: #2B2D34; }
:-moz-input-placeholder { /* Internet Explorer 10-11 */
color: #2B2D34; }
::-ms-input-placeholder { /* Microsoft Edge */
color: #2B2D34; }

/* Estilo base para o alerta */
.toast { background-color: #2D6CFF; /* Fundo azul */ color: #FFFFFF; /* Texto branco */ font-size: 18px; /* Tamanho da fonte */ border-radius: 6px; /* Bordas arredondadas */ border: 1px solid #9BC8FE; /* Borda azul clara */ box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1); /* Sombra leve */ padding: 12px 16px; /* Espaçamento interno */ margin-top: 10px; /* Espaçamento entre alertas */ }
/* Ícones dentro do alerta */
.toast i.material-icons { font-size: 20px; /* Tamanho do ícone */ margin-right: 8px; /* Espaçamento ao lado do texto */ vertical-align: middle; /* Alinhar ícone ao texto */ color: #FFFFFF; /* Ícone branco */ }

/* Animação de entrada */
.toast { animation: fadeIn 0.3s ease-in-out; }

.opacidade{opacity: 0; cursor: default !important;}

#gif-responsivo{width: 180px; height: 180px; position: fixed; left: 50%; top: -550%; margin-top: -150px; margin-left: -90px; z-index: 9999; background: url('img/gif-responsivo.gif'); background-size: 180px;}
#msg-responsivo { width: 400px; height: auto; position: absolute; bottom: -60px; left: 50%; margin-left: -200px; font-size: 19px; color: #000; text-align: center; }

/*Estilos gerais*/
#mascara{width: 100%; height:0%; position: fixed; background-color: #ececf2; opacity: 0; z-index: 1000; overflow: hidden;}

/* ==========================================================================
  Login screen
   ========================================================================== */
#bg-login-screen{width: 100%; height: 100%; position: fixed; z-index: 1; background-color:#F4F7FB; min-height: 950px;}
#view-login-screen{width: 1600px;  height: 100%; position: relative; margin: auto; z-index: 2;}

.swiper, swiper-container { margin-left: auto; margin-right: auto; min-height: 50px; position: relative; overflow: hidden; list-style: none; padding: 0; z-index: 1; display: block; }
.swiper-pagination-bullet { width: var(--swiper-pagination-bullet-width, var(--swiper-pagination-bullet-size, 15px)); height: var(--swiper-pagination-bullet-height, var(--swiper-pagination-bullet-size, 15px)); background-color: #B1DAFF; }
.swiper-pagination-bullet-active { background-color: #66c4ff !important; }

#div-slider-onboard{width: 40%; height: 100%; position: relative; float: left;}
#bg-slider-onboard { width: 90%; height: 92% !important; position: relative; float: left; margin-top: 7%; margin-left: 0%; background-color: #0093FC; border-radius: 20px; }
#box-slider-int { width: 100%; height: 620px; position: absolute; top: 50%; margin-top: -360px; }
.item-slider-onboard { width: 100%; height: 100%; position: relative; float: left; }
.img-slider-onboard { width: 100%; height: auto; position: relative; float: left; padding: 0px 40px; box-sizing: border-box; }
.legenda-slider-onboard { width: 100%; height: auto; position: relative; float: left; }
.legenda-slider-onboard h3 { width: 100%; height: auto; position: relative; float: left; margin-top: -50px; font-size: 28px; font-weight: 700; text-align: center; color: #fff; }
.legenda-slider-onboard p { width: 100%; height: auto; position: relative; float: left; margin-top: -12px; font-size: 18px; color: #fff; text-align: center; padding: 0px 40px; font-weight: 300; box-sizing: border-box; }
#paginacao-slider-home { width: 100%; height: auto; position: absolute; bottom: 10px; }
#int-paginacao { width: 120px; height: auto; position: relative; margin: auto; }
.swiper-pagination-bullet { width: 20px !important; height: 20px !important; position: relative !important; float: left !important; margin-left: 10px !important; margin-right: 10px !important; background-color: #fff !important; border-radius: 100% !important; }
.swiper-pagination-bullet-active { background-color: #010101 !important; }

/*Form login*/
#div-form-login { width: 60%; height: 100%; position: relative; float: left; padding-top: 40px; padding-left: 0px; }

#div-form-login h1{width: auto; height: auto; position: relative; float: left;   font-family: "IBM Plex Mono", monospace; font-size: 22px; color: #000;}
#logo-pg-login{width:129px; height: 25px; position: absolute; top: 55px; right: 0px; background: url('img/logo-azzurra.png'); background-size: 129px; }

#faixa-formulario-login-screen{width: 100%; height: 400px; position: absolute; top: 50%; margin-top: -210px;}
#faixa-formulario-login-screen h2{width: 100%; height: auto; position: relative; float: left; margin-top: 20px; color:#000; font-size: 48px; font-weight: 700;}
#faixa-formulario-login-screen h2 span{color:#51A9DE;}

#box-campos-login{width: 100%; height: auto; position: relative; float: left; margin-top: 10px; }

.faixa-label{width:300px; height: auto; position: relative; float: left;  margin-right: 50%;}
/*#box-campos-login input{width: 300px; height: auto; position: relative; float: left; padding: 18px 50px 18px 18px; border: 1px solid #000; border-bottom: 1px solid #000 !important; border-radius: 12px; font-size: 16px;}*/

#cta-formulario-login {width: 370px; height: auto; position: relative; float: left; margin-top: 10px; padding: 14px 20px 14px 20px; background-color: #2B2D34; color: #fff; font-size: 22px; font-weight: 600; border-radius: 15px; cursor: pointer;}
#cta-formulario-login:hover {background-color: #1759F3;}

.icn-form { width: 28px; height: 28px; position: absolute; right: -59px; top: 50%; margin-top: -24px; z-index: 2; }
.icn-user{background: url(img/icn-user.png); background-size: 28px;}
.icn-password{background: url(img/icn-password.png); background-size: 28px;}
.icn-arrow { background: url(img/icn-arrow.png); background-size: 28px; margin-top: -9px; }

/* ==========================================================================
 Dashboard
   ========================================================================== */
#bg-ds{width: 100%; height: 100%; min-height: 950px; position: absolute; z-index: -1; background-color:#F8F9FF;}   

/*Menu de navegação*/
#ds-menu-navegacao{width: 85px; height: 100%; position:fixed; background-color:#FFFFFF; border-right: 1px solid #F4F5F8; z-index: 10;}
#logo-ds-navegacao{width: 100%; height: auto; position: relative; float: left; margin-top: 60px;}
#logo-int-ds-navegacao{width: 40px; height: 30px; position: relative; margin: auto; background: url('img/zz-mini-logo.png'); background-size: 40px;}

#box-btns-meu-ds{width: 100%; height: 233px; position:absolute; left: 0px; top: 50%; margin-top: -116.5px;}

.item-btn-ds{width: 100%; height: auto; position: relative; float: left; cursor: pointer; margin-bottom: 10px;}
.item-int-btn-ds{width: 50px; height: 50px; position: relative; margin: auto; border-radius: 50%;}
.item-icn-btn-ds{width: 32px; height: 32px; position: absolute; top: 50%; left: 50%; margin-top: -16px; margin-left: -16px;}

.atv-btn-ds{background-color:#2B2D34;}
.atv-btn-ds:hover{background-color:#555967;}

.inatv-btn-ds{background-color:#fff;}
.inatv-btn-ds:hover{background-color:#E6F3FF;}

.alerta-btn-ds { width: 40px; height: 40px; position: absolute; right: -10px; top: -10px; background-color: rgb(43, 45, 51); border-radius: 50%; z-index: 90; display: none;}
.alerta-txt { width: 100%; height: 10px; position: absolute; top: 50%; margin-top: -9px; font-size: 14px; color: #fff; text-align: center; font-weight: 600; }

.bg-btn-aprovar-demanda{background-color: #1659f3;}
.bg-btn-aprovar-demanda:hover{background-color:#00b4ff;}


#btn-logout-ds{width: 100%; height: auto; position: absolute; bottom: 40px;}
#btn-int-logout-ds{width: 38px; height: 38px; position: relative; margin: auto; cursor: pointer; opacity: 0.8;}
#btn-int-logout-ds:hover{opacity: 1;}

/*Area de trabalho*/
#ds-area-de-trabalho{width: 100%; height: 85%; position: relative; float: left; z-index: 9; padding: 28px 60px 80px 130px; }

/*Barra de ferramentas àrea de trabalho*/
#toolbar-area-trabalho{width: 100%; height: auto; position: relative; float: left;}
#selecao-cliente-toolbar-ds{width: auto; height: auto; position: relative; float: right;}
#logo-cliente-toolbar-ds{width: 65px; height: 65px; position: relative; float: right; background-color:#fff; border: 1px solid #ECEFF8; border-radius: 10px;}

#logo-int-cliente{width: 40px; height: 40px; position: absolute; left: 50%; top: 50%; margin-top: -20px; margin-left: -20px;} 
#selecao-cliente-toolbar-ds p {width:auto; height: auto; position: relative; float: right; margin-right: 20px; margin-top: 19px; font-size:20px; font-weight: 600; }
#selecao-cliente-toolbar-ds:hover #logo-cliente-toolbar-ds{background-color:#E6F3FF; border: 1px solid #C6E4FF;}
#toolbar-area-trabalho h2{width: auto; position: relative; float: left; font-size: 36px; color:#000; font-weight: 700;}
#toolbar-area-trabalho h2 span{color:#51A9DE;}

/*Barra de ferramentas board demandas*/
#board-ds { width: 100%; height: 93%; position: relative; float: left; background-color: #FFFFFF; border-radius: 20px; border: 1px solid #F4F5F8; padding: 20px 40px 20px 40px; }
#toolbar-board-ds{width: 100%; height: auto; position: relative; float: left; }
#toolbar-board-ds h3{width: auto; height: auto; position: relative; float: left; font-size: 26px; color: #000; font-weight: 600;}

#filtro-demandas { width: auto; height: auto; position: relative; float: right; margin-right: 24px; border: 1px solid #000; border-radius: 35px; margin-top: 17px; }
.item-filtro-demanda { width: auto; height: auto; position: relative; float: left; padding: 9px 20px; font-size: 16px; color: #000; z-index: 2; opacity: 0.6;}
.item-filtro-demanda:hover{color: #000; opacity: 1;}

#marcador-demanda{width: 85px; height: 40px; position: absolute; left: 0px; top:0px; background-color: #000; border-radius: 45px; z-index: 1;}

.atv-filtro-demanda{color: #fff !important; opacity: 1;}
.atv-filtro-demanda:hover;{color: #fff !important;}

#cta-toolbar-board-ds{width: auto; height: auto; position: relative; float: right; margin-top: 18px; padding: 10px 50px 10px 20px; background-color: #1759F3; border-radius: 70px; font-size: 16px; color: #fff; cursor: pointer;}
#cta-toolbar-board-ds:hover{background-color:#1828FB;}
#icn-cta-toolbar-board-ds{width: 24px; height: 24px; position: absolute; right: 15px; top: 9px; background: url('img/icn-btn-ds-toolbar.png'); background-size: 24px;}
#icn-cta-toolbar-board-ds-busca{width: 24px; height: 24px; position: absolute; right: 15px; top: 9px; background: url('img/icn-busca.png'); background-size: 24px;}



/*Legendas*/
#tabela-demandas { width: 100%; height: 90%; position: relative; float: left; overflow-y: scroll; overflow-x: scroll; }
#faixa-legendas-board-ds{width: 100%; height: auto; position: relative; float: left; padding: 20px 20px 7px 20px; border-bottom: 1px solid #EEEEEE;}
#legenda-por{width: 5%; height: auto; position: relative; float: left;}
#legenda-nome{width: 35%; height: auto; position: relative; float: left;}
#legenda-data{width: 15%; height: auto; position: relative; float: left; padding-left: 40px;}
#legenda-hora{width: 15%; height: auto; position: relative; float: left; padding-left: 40px;}
#legenda-status{width: 30%; height: auto; position: relative; float: left; padding-left: 40px;}
.tm-legendas{color:#6F6F6F; font-size: 16px; font-weight: 300;}

/*Lista de demandas*/
#lista-demandas-ds-board{width: 100%; height: 85%; position: relative; float: left;}

/*Item demanda*/
.tm-demandas{color:#000; font-size: 16px; font-weight: 300;}
.item-demanda { width: 100%; height: auto; position: relative; float: left; padding: 15px 20px; border-radius: 5px; margin-bottom: 2px; }

.pc{background-color: #ebf8ff;}
.pc:hover{background-color:#d5f0ff !important;}

.item-demanda:hover{background-color:#F3F6F9;}
.item-demanda-por{width: 5%; height: auto; position: relative; float: left; margin-top: 4px;}
.item-demanda-nome{width: 35%; height: auto; position: relative; float: left; margin-top: 4px;}

.item-demanda-data{width: 15%; height: auto; position: relative; float: left;}
.demanda-avatar{width: 30px; height: 30px; position: relative; float: left; background-color:#BADEFE; border-radius: 50%; overflow: hidden;}
.demanda-avatar-l{width: 100%; height: 10px; position: absolute; top: 50%; margin-top: -11px; font-size: 16px; color: #FFFFFF; font-weight: 600; text-align: center;}
.demanda-data-int{width: auto; height: auto; position: relative; float: left; margin-left: 10px; margin-top: 4px;}

.demanda-avatar-foto{width: 32px; height: 32px; position: absolute; left: 50%; top: 50%; margin-left: -16px; margin-top: -16px; }

.demanda-horario{width: 15%; height: auto; position: relative; float: left; margin-left: 40px; margin-top: 4px;}
.fix-dm-horario{float: right !important; padding-left: 0px !important;}

.demanda-status{width: 20%; height: auto; position: relative; float: left;}
.tag-status-campanha{width: 20px; height: 20px; position: relative; float: left; margin-top: 5px; border-radius: 50%; background-color:#40B1B2;} 
.status-demanda-int{width: auto; height: auto; position: relative; float: left; margin-top: 4px; margin-left: 10px;}
.criacao{background-color:#40B1B2 !important;}
.standby{background-color:#656F7D !important;}
.backlog{background-color:#656F7D !important;}
.desenvolvimento{background-color:#BBA399 !important;}
.conteudo{background-color:#9F49FC !important;}
.midia{background-color:#E78845 !important;}
.aprovacao{background-color:#32A069 !important;}
.gerentedecontas{background-color:#DC646A !important;}
.emailmarketing{background-color:#C580E6 !important;}

.comentarios-demanda-lista { width: 7%; height: auto; position: relative; float: left; }
.icn-comentario-lista-demanda{width: 40px; height: 40px; position: absolute; top: -1px; right: -10px; background-color: #52a9de; border-radius: 50%;}
.icn-talk-int{width: 24px; height: 24px; position: absolute; left: 50%; top: 50%; margin-left: -12px; margin-top: -12px; background: url('img/icn-coment-list.png'); background-size: 24px;}
.n-comentarios-lista { width: auto; height: auto; position: absolute; right: -16px; top: -6px; background-color: #BADEFE; border-radius: 50%; font-size: 15px; color: #fff; padding: 4px 10px; }
.nova-messagem{background-color: #000;}


.redacao{background-color:#F17EAD !important;}
.sac{background-color:#C580E6 !important;}
.emexecucao{background-color:#580000 !important;}
.midiaon{background-color:#E78945 !important;}
.midiaoff{background-color:#E78945 !important;}
.desenvolvimento{background-color:#1ED760 !important;}
.liderdeconteudo{background-color:#9F4AFF !important;}
.liderdecriacao{background-color:#3FB1B2 !important;}

.liderdemidia{background-color:#E78945 !important;}
.financeiroadm{background-color:#33A069 !important;}


.gerentedeprojetos{background-color:#40A6E6 !important;}
.diretoriaoperacional{background-color:#3963FF !important;}
.ceo{background-color:#C60101 !important;}
.aprovacaointerna{background-color:#EF35D4 !important;}
.aprovacaocliente{background-color:#FFAE0A !important;}
.monitoramento{background-color:#87909E !important;}
.standby{background-color:#3C414A !important;}
.financeiroadm{background-color:#33A069 !important;}
.financeiroadm{background-color:#33A069 !important;}
.financeiroadm{background-color:#33A069 !important;}
.financeiroadm{background-color:#33A069 !important;}

/*Sidebar Abertura de demandas*/
#sidebar-out-demandas{width:0px; height: 100%; position: fixed; right: 0px; z-index: 90; overflow: hidden;}
#sidebar-demandas-int{width:500px; height: 100%; position: absolute; right: -600px; background-color:#fff; border-radius: 20px 0px 0px 20px;
-webkit-box-shadow: 8px 0px 39px 0px rgba(0,0,0,0.20);
-moz-box-shadow: 8px 0px 39px 0px rgba(0,0,0,0.20);
-o-box-shadow: 8px 0px 39px 0px rgba(0,0,0,0.20);
-ms-box-shadow: 8px 0px 39px 0px rgba(0,0,0,0.20);
box-shadow: 8px 0px 39px 0px rgba(0,0,0,0.20);
padding: 0px 40px 0px 40px;
}

#toolbar-sidebar{width:440px; height: 100px; position:relative; float: left;}
#toolbar-sidebar h4{width: auto; height: auto; position: relative; float: left; margin-top: 40px; font-size: 28px; color: #000; font-weight: 700;}
#toolbar-sidebar h4 span{color:#51A9DE;}

#cta-fechar-sidebar{width: auto; height: auto; position: relative; float: right; margin-right: 20px; padding: 5px 25px; margin-top: 39px; font-size:16px; color:#000; border: 1px solid #000000; border-radius: 50px; cursor: pointer;}
#cta-fechar-sidebar:hover {background-color:#2B2D34; color: #fff;}

#div-ctas-forms{width: 100%; height: 90%; position: relative; float: left; margin-top: 0%; overflow-x: hidden; overflow-y:scroll;}

/*categoria ctas forms*/
.fast-transition { transition: all 0.3s ease-out; -ms-transition: all 0.3s ease-out; -moz-transition: all 0.3s ease-out; -o-transition: all 0.3s ease-out; -webkit-transition: all 0.3s ease-out; }

.item-ctas-categoria-forms { width: 100%; height: 35px; /* Altura padrão */ position: relative; float: left; margin-bottom: 15px; overflow: hidden; /* Evita elementos fora da área visível */ transition: height 0.3s ease-out; /* Transição suave ao expandir/colapsar */ }
.toolbar-categoria-forms{width: 100%; height: auto; position: relative; float: left; border-bottom: 1px solid #F0F0F0; padding-bottom: 0px; cursor: pointer;}
.icn-categoria-form{width: 24px; height: 24px; position: relative; float: left;}
.icn-criacao{background: url('img/icn-criacao.png'); background-size: 24px;}


.toolbar-categoria-forms h3{width: auto; height: auto; position: relative; float: left; margin-left: 10px; margin-top: 1px; font-size: 18px; color:#010101; font-weight: 400;}
.btn-abrir-categoria{width: 35px; height: 35px; position: relative; float: right; margin-right: 0px; margin-top: -2px; background: url('img/icn-abrir-categoria.png'); background-size: 35px; cursor: pointer;}
.item-cta-int-form { width: 100%; height: 42px; /* Altura do item */ position: relative; float: left; margin-top: 5px; padding: 10px 38px; border-radius: 10px; color: #000000; font-size: 16px; font-weight: 300; cursor: pointer; }
.item-cta-int-form:hover{background-color:#E5F3FF;}


/*Sidebar Clientes*/
#sidebar-out-clientes{width:0px; height: 100%; position: fixed; right: 0px; z-index: 90; overflow: hidden;}
#sidebar-clientes-int{width:500px; height: 100%; position: absolute; right:-600px; background-color:#fff; border-radius: 20px 0px 0px 20px;
-webkit-box-shadow: 8px 0px 39px 0px rgba(0,0,0,0.20);
-moz-box-shadow: 8px 0px 39px 0px rgba(0,0,0,0.20);
-o-box-shadow: 8px 0px 39px 0px rgba(0,0,0,0.20);
-ms-box-shadow: 8px 0px 39px 0px rgba(0,0,0,0.20);
box-shadow: 8px 0px 39px 0px rgba(0,0,0,0.20);
padding: 0px 40px 0px 40px;
}

#toolbar-sidebar-clientes{width:440px; height: auto; position:fixed;}
#toolbar-sidebar-clientes h4{width: auto; height: auto; position: relative; float: left; margin-top: 40px; font-size: 28px; color: #000; font-weight: 700;}
#toolbar-sidebar-clientes h4 span{color:#51A9DE;}

#cta-fechar-sidebar-clientes{width: auto; height: auto; position: relative; float: right; margin-right: 20px; padding: 5px 25px; margin-top: 39px; font-size:16px; color:#000; border: 1px solid #000000; border-radius: 50px; cursor: pointer;}
#cta-fechar-sidebar-clientes:hover {background-color:#2B2D34; color: #fff;}

#lista-clientes-sidebar{width: 100%; height: 85%; position: relative; float: left; margin-top: 100px; overflow-y: scroll;}

.item-cliente-sidebar{width: 100%; height: auto; position: relative; float: left; margin-bottom: 20px; cursor: pointer; cursor: pointer;}
.icn-cliente-sidebar{width: 50px; height: 50px; position: relative; float: left; background-color: #F8F9FF; border-radius: 10px;}
.icn-int-cliente-sidebar{width: 40px; height: 40px; position: absolute; left: 50%; top: 50%; margin-left: -20px; margin-top: -20px; padding: 5px;}
.legenda-cliente-sidebar { width: 80%; height: auto; position: relative; float: left; margin-top: 14px; margin-left: 15px; font-size: 18px; color: #0A0A0A; }

.item-cliente-sidebar:hover .icn-cliente-sidebar{background-color: #E6F3FF;}

/*Janela confirmação ação*/
#janela-confirmacao{width: 900px; height: 100px; position: fixed; left: 50%; top: -150%; margin-top: -50px; margin-left: -450px; background-color: #fff; border-radius: 20px; border: 1px solid #EFF0F6; z-index: 1001; padding: 0px 30px; opacity: 0;}
#titulo-j-confirmacao{width: 100%; height: auto; position: relative; float: left; margin-top: 20px; font-size: 22px; font-weight: 700; color: #000;}
#titulo-j-confirmacao span{color:#51A9DE;}
#sobre-txt-janela-confirmacao{width: 60%; height: auto; position: relative; float: left; font-size: 20px; margin-top: -4px; color: #000; font-weight: 400;}

#ctas-confirmacao-janela{width:600px; height: auto; position: relative; float: right; margin-top: -42px;}
.cta-ok-conf-janela{width: auto; height: auto; position: relative; float: right; padding: 6px 30px; background-color:#1859F3; border-radius: 130px; color: #fff; font-size: 18px; cursor: pointer;}
.cta-ok-conf-janela:hover{background-color:#0029FF;}
.cta-cancel-janela{width: auto; height: auto; position: relative; float: right; margin-right: 15px; padding: 5px 30px; border:1px solid #000; border-radius:130px; color: #000; font-size: 18px; cursor: pointer;}
.cta-cancel-janela:hover{background-color:#2B2D34; color: #fff;}


/*Demanda interna*/
#board-ds-demanda { width: 50%; height: 93%; position: relative; float: left; background-color: #FFFFFF; border-radius: 20px; border: 1px solid #F4F5F8; padding: 20px 40px 20px 40px; }
#board-ds-demanda-briefing { width: 100%; height: 93%; position: relative; float: left; background-color: #FFFFFF; border-radius: 20px; border: 1px solid #F4F5F8; padding: 20px 40px 20px 40px; }
#board-ds-demanda-titulo {width: 100%; height: auto; position: relative; float: left; margin-top: -10px; padding: 20px 0px; font-size: 20px; color: #000; border-bottom: 1px solid #E8E8E8;}

#box-descricao-demanda{width: 100%; height: 82%; position: relative; float: left; overflow-y: scroll; padding-bottom: 20px; padding-right: 40px;}

/*Item descrição demanda*/
#box-descricao-demanda h3{width: 100%; height: auto; position: relative; float: left; font-size: 18px; color:#1A1A1A;}
#box-descricao-demanda h4{width: 100%; height: auto; position: relative; float: left; font-size: 18px; color:#1A1A1A; font-weight: 600;}
#box-descricao-demanda p {width: 100%; height: auto; position: relative; margin-top: -10px; float: left; font-size: 16px; color: #606060;}
#box-descricao-demanda hr {opacity: 0.5; margin-top: 0px;}

#div-mais-infos-demanda{width: 100%; height: auto;  position: relative; float: left; padding-top: 11px; border-top: 1px solid #E8E8E8;}

#status-demanda-interna{width: auto; height: auto; position: relative; float: left; margin-top: 10px;}
#status-demanda-interna-tag{width: 20px; height: 20px; position: relative; float: left;  border-radius: 50%;}
#nome-tag-demanda-interna{width: auto; height: auto; position: relative; float: left; margin-left: 10px; margin-top: -2px; color: #000; font-size: 18px;} 

#avatar-demanda-interna{width: 200px; height: auto; position: relative; float: right;}
.demanda-avatar-int{width: 40px; height: 40px; position: relative; float: left; background-color:#BADEFE; border-radius: 50%; overflow: hidden;}
.demanda-avatar-int-l{width: 100%; height: 10px; position: absolute; top: 50%; margin-top: -11px; font-size: 16px; color: #FFFFFF; font-weight: 600; text-align: center; text-transform: uppercase;}
.demanda-avatar-nome{width: 150px; height: auto; position: relative; float: left; margin-left: 10px; font-size: 16px; color:#000; font-weight: 600;}
.data-demanda-interna{width: auto; height: auto; position: relative; float: left; margin-left: 10px; font-size: 14px; color: #000; font-weight: 300;}

.item-descricao-demanda{width: 100%; height: auto; position: relative; float: left; padding-top: 20px; font-size: 16px; line-height: 25px;}

/* comentarios demanda interna */
#board-ds-demanda-comentario { width: 48%; height: 93%; position: relative; float: right; background-color: #FFFFFF; border-radius: 20px; border: 1px solid #F4F5F8; padding: 20px 40px 20px 40px; }
#board-ds-demanda-referencias { width: 28%; height: 93%; position: relative; float: right; background-color: #FFFFFF; border-radius: 20px; border: 1px solid #F4F5F8; padding: 20px 40px 20px 40px; }

#board-ds-demanda-titulo-comentarios {width: 100%; height: auto; position: relative; float: left; margin-top: -10px; padding: 20px 0px; font-size: 20px; color: #000; border-bottom: 1px solid #E8E8E8;}
#box-comentarios-demanda{width: 100%; height: 82%; position: relative; float: left; overflow-y: scroll; padding-right: 20px; padding-bottom: 40px;}

.item-comentario{width: 100%; height: auto; position: relative; float: left; margin-top: 20px; background-color:#F8F9FF; border: 1px solid #EDEDEF; border-radius: 10px; padding: 35px 20px 20px 20px; overflow: hidden;}
.item-comentario-inf{width: 100%; height: auto; position: relative; float: left;}
.item-comentario-nome {width: 150px; height: auto; position: relative; float: left; font-size: 17px; color: #19191A; }
.item-comentario-data{width: auto; height: auto; position: relative; float: right; margin-top: 3px; font-size: 14px; color:#8489A3;}
.item-comentario-horario{width: auto; height: auto; position: relative; float: right; margin-top: 3px; margin-left: 20px; font-size: 14px; color:#8489A3;}
.item-comentario p {width: 100%; height: auto; position: relative; float: left; font-size: 16px; margin-top: 10px; color: #000; opacity: 0.6;}

.comentario-agencia{background-color:#EEF7FF ; border: 1px solid #CEEFEE;}

.faixa-cta-download-demanda{width: 100%; height: auto; position: relative; float: left;}
.cta-download-arquivo-demanda{width: auto; height: auto; position: relative; float: left; margin-right: 40%; margin-top: 8px; margin-bottom: 25px; padding: 8px 45px 8px 20px; background-color:#1658F3; color: #fff; border-radius: 40px; cursor: pointer;}
.cta-download-arquivo-demanda:hover{background-color:#0029FF;}
.icn-download{width: 20px; height: 20px; position: absolute; right: 12px; top: 9px; background: url('img/icn-download.png'); background-size: 20px;}

#div-cta-fazer-comentario-demanda{width: 100%; height: auto;  position: relative; float: left; padding-top: 13px; border-top: 1px solid #E8E8E8;}
#cta-int-fazer-comentario{width: auto; height: auto; position: relative; float: right; padding: 10px 43px 10px 20px; color: #fff; background-color:#1859F3; color: #fff; border-radius: 30px; cursor: pointer;}
#cta-int-fazer-comentario:hover{background-color: #0029FF;}
#icn-int-comentario{width: 25px; height: 25px; position: absolute; right: 10px; top: 8px; background: url('img/icn-mais.png'); background-size: 25px;}

#cta-alteracao-demanda{width: auto; height: auto; position: relative; float: right; margin-right: 20px; padding: 10px 43px 10px 20px; color: #fff; background-color:#2B2D34; color: #fff; border-radius: 30px; cursor: pointer;}
#icn-int-aprovar{width: 19px; height: 19px; position: absolute; right: 17px; top: 12px; background: url('img/btn-aprovar.png'); background-size: 19px;}
#cta-alteracao-demanda:hover{background-color: #000;}


#cta-aprovar-demanda{width: auto; height: auto; position: relative; float: right; margin-right: 20px; padding: 10px 43px 10px 20px; color: #fff; background-color:#1859F3; color: #fff; border-radius: 30px; cursor: pointer;}
#icn-int-alteracao{width: 19px; height: 19px; position: absolute; right: 17px; top: 12px; background: url('img/icn-alt.png'); background-size: 19px;}
#cta-aprovar-demanda:hover{background-color: #0029FF;}


#sidebar-out-comentario{width:0px; height: 100%; position: fixed; right: 0px; z-index: 90; overflow: hidden;}
#sidebar-comentarios-int { width: 500px; height: 100%; position: absolute; right: -600px; background-color: #fff; border-radius: 20px 0px 0px 20px; -webkit-box-shadow: 8px 0px 39px 0px rgba(0, 0, 0, 0.20); -moz-box-shadow: 8px 0px 39px 0px rgba(0, 0, 0, 0.20); -o-box-shadow: 8px 0px 39px 0px rgba(0, 0, 0, 0.20); -ms-box-shadow: 8px 0px 39px 0px rgba(0, 0, 0, 0.20); box-shadow: 8px 0px 39px 0px rgba(0, 0, 0, 0.20); padding: 0px 40px 0px 40px; }
#div-form-comentario{width: 100%; height: 73%; position: relative; float: left; overflow-y: scroll !important;}

#board-ds-anexos { width: 100%; height: auto; position: relative; float: left; margin-top: 50px; background-color: #FFFFFF; border-radius: 20px; border: 1px solid #F4F5F8; padding: 20px 40px 20px 40px; }

#janela-player{width: 80%; height: 80px; position: fixed; left:10%; bottom: -450px; background-color: #fff; border:1px solid #E8E8E8; border-radius: 20px; z-index: 20;
-webkit-box-shadow: 0px 0px 40px -15px rgba(0,0,0,0.13);
-ms-box-shadow: 0px 0px 40px -15px rgba(0,0,0,0.13);
-o-box-shadow: 0px 0px 40px -15px rgba(0,0,0,0.13);
-moz-box-shadow: 0px 0px 40px -15px rgba(0,0,0,0.13);
box-shadow: 0px 0px 40px -15px rgba(0,0,0,0.13);
}

#nome-arquivo-player{width: 20%; height: auto; position: relative; float: left; margin-top: 24px; margin-left: 24px; font-size: 20px; color:#010101;}
#player-audio{width: 50%; height: auto; position: relative; float: left;}

#cta-fechar-player { width: auto; height: auto; position: relative; float: right; top: 18px; margin-right: 20px; padding: 7px 25px; color: #000; border: 1px solid #000; border-radius: 50px; cursor: pointer; }
#cta-fechar-player:hover { background-color: #000; color: #fff; }
#cta-download-player { width: auto; height: auto; position: relative; float: right; top: 18px; margin-right: 10px; padding: 7px 25px; color: #fff; border: 1px solid #1959F3; background-color: #1959F3; border-radius: 50px; cursor: pointer; }
#cta-download-player:hover { background-color: #0029FF; border: 1px solid #0029FF; color: #fff; }


#fix-ds-anexos{width: 100%; height: 240px; position: relative; float: left;}
#board-ds-anexos-titulo {width: 100%; height: auto; position: relative; float: left; margin-top: -10px; padding: 20px 0px; font-size: 20px; color: #000; border-bottom: 1px solid #E8E8E8;}

/*item anexo*/
.anexo {width: 23%; height: 250px; position: relative; float: left; margin-top: 30px; margin-bottom: 80px; margin-left: 1%; margin-right: 1%; background-color: #EEF9FF; /* Cor de fundo para espaços vazios */ border-radius: 20px; cursor: pointer; }
.anexo-ft-out { width: 100%; height: 100%; position: absolute; top: 0; left: 0; overflow: hidden; border-radius: 20px; }
.anexo-ft-int { width: 100%; height: 100%; position: relative; background-size: cover; background-position: center; background-repeat: no-repeat; }
.anexo-ft-int img { width: 1000px; height: 1000px; opacity: 0; position: absolute; top: 50%; left: 50%; margin-left: -500px; margin-top: -500px; }
.legenda-anexo { width: 100%; height: auto; position: absolute; bottom: -64px; padding: 12px 30px; color: #202020; font-size: 16px; background-color: #EEF9FF; border-radius: 15px; text-align: center; }
.ext-arquivo { width: 100%; height: 10px; position: absolute; top: 50%; margin-top: -36px; color: #ABBFCA; font-size: 48px; text-align: center; text-transform: uppercase; font-weight: 800; }
.anexo:hover{background-color:#CCEAFF;} 
.anexo:hover .ext-arquivo{color:#fff;}
.anexo:hover .legenda-anexo{background-color:#CCEAFF;}
.anexo:hover .green-audio-player { background-color: #CCEAFF; }


.fancybox__backdrop { background-color: #F8F9FF !important; /* Cor preta sólida */ opacity: 1 !important; /* Remove qualquer transparência */ }
.fancybox__content { border-radius: 20px !important; /* Adiciona bordas arredondadas de 20px */ overflow: hidden !important; /* Garante que o conteúdo não ultrapasse a borda */ }
.fancybox__thumb { border-radius: 15px !important; /* Bordas arredondadas de 15px para as miniaturas */ overflow: hidden !important; /* Garante que o conteúdo respeite a borda arredondada */ }
.fancybox__caption { color: #000 !important; /* Altera a cor da legenda para preto */ font-size: 14px !important; /* Ajuste opcional para melhorar a legibilidade */ text-align: center !important; /* Centraliza o texto da legenda */ }
.fancybox__container { padding: 100px !important; /* Define um espaço de 20px ao redor do modal */ box-sizing: border-box !important; /* Garante que o padding seja contabilizado corretamente */ }
.fancybox__nav { z-index: 9999; /* Garante que esteja acima do conteúdo */ }
.fancybox__button--arrow--next, .fancybox__button--arrow--prev { background-color: #000 !important; /* Fundo preto sólido */ border: none; /* Remove borda */ box-shadow: none !important; /* Remove qualquer sombra */ width: 50px; /* Tamanho personalizado */ height: 50px; /* Tamanho personalizado */ border-radius: 0; /* Remove bordas arredondadas */ }
.fancybox__button--arrow--next:hover, .fancybox__button--arrow--prev:hover { background-color: #222 !important; /* Fundo preto mais escuro ao passar o mouse */ }

/*Inicio player*/
.player-anexo { width: 100%; height: 138px; position: absolute; bottom: 22px; left: 0%; z-index: 99; }

/*player video*/
.div-player-video{width: 720px; height:405px; position: fixed; left: 50%; top: -350%; margin-left:-360px; margin-top:-202.5px; background-color: #fff; border-radius: 20px; z-index: 999; opacity:0;}
.div-player-video-int{width: 720px; height:405px; position: absolute; left: 0px; top: 0px; border-radius: 20px; border-radius: 10px; overflow: hidden;}

#mascara-player{width: 100%; height: 0%; position: fixed; z-index: 900; background-color: #e8eeee; opacity: 1;}
#fechar-player{width:auto; height: auto; position: absolute; right: 0px; top: -44px; padding: 8px 25px; background-color: #000; color: #fff; border-radius: 30px; cursor: pointer;}
#fechar-player:hover {background-color:#0029FF;}


/*#div-form-comentario textarea{width: 100%; height:95%; position: relative; float: left; font-size: 18px; background-color: #F8F9FF; border: 1px solid #F2F3F7; border-radius: 15px; padding: 20px 20px;}*/
#div-cta-enviar-comentario-demanda{width: 100%; height: auto;  position: relative; float: left; padding-top: 24px; border-top: 1px solid #E8E8E8;}
#cta-int-enviar-comentario{width: auto; height: auto; position: relative; float: right; padding: 10px 43px 10px 20px; color: #fff; background-color:#1859F3; color: #fff; border-radius: 30px; cursor: pointer;}
#cta-int-enviar-comentario:hover{background-color: #0029FF;}
#icn-int-enviar-comentario{width: 25px; height: 25px; position: absolute; right: 10px; top: 8px; background: url('img/icn-mais.png'); background-size: 25px;}


/*Briefing*/
#div-ds-briefing{width: 100%; height: 90%; position: relative; float: left; margin-top: 20px;}
#div-instrucoes-briefing{width: 53%; height: 100%; position: relative; float: left;}
#div-conteudo-instrucoes-briefing {width: 100%; height: auto; top: 50%; position: relative; float: left;  margin-top: -130px; padding-left: 80px;}

#div-conteudo-instrucoes-briefing  h3{width: 100%; height: auto; position: relative; float: left; font-size: 55px; font-weight: 700;}
#div-conteudo-instrucoes-briefing h3 span{color:#51A9DE;}
#div-conteudo-instrucoes-briefing p{width: 350px; height: auto; position: relative; float: left; margin-top: -0px; font-weight: 400; font-size: 20px; color: #000;}

#div-iframe-formulario{width: 45%; height: 100%; position: relative; float: right; border-radius: 30px; overflow: hidden; overflow-y: scroll; background-color: #2A2E34;}
#div-iframe-formulario-int{width: 100%; height: 100%; position: relative; float: left; opacity: 0;}

#icn-briefing{width:60px; height: 52px; position: absolute; right: 20px; top: 50%; margin-top: -20px; background: url('img/icn-briefing.png'); background-size: 60px;}

#onboard-carregamento{width: 100%; height: 100%; position: fixed; top: 0px; left: 0px; z-index: 99999; background-color:#F8F9FF; overflow: hidden;} 

#div-mensagem-onboard{width: 500px; height: 80px; position: fixed; left: 50%; top: 50%; margin-top: -60px; margin-left:-250px; background-color: #fff; border-radius: 100px; border: 1px solid #EBECF5; overflow: hidden;}
#load-mensagem-onboard{width: 0%; height: 100%; position: absolute; left: 0px; background-color:#E2E9F0; border-radius: 100px; z-index: 1;}

#icn-msg-onboard{width: 45px; height: 45px; position: absolute; left: 30px; top: 50%; margin-top: -23px; z-index: 2;}
.icn-msg-criacao{background: url('img/icn-criacao.png'); background-size: 45px; z-index: 2;}
#tipo-demanda-msg{width: 80%; height: auto; position: relative; float: left; margin-left: 90px; margin-top: 13px; font-size: 20px; color:#000000; font-weight: 600; z-index: 2;}
#tipo-demanda-msg span{color:#51A9DE; z-index: 2;}
#nome-demanda-msg{width: 50%; height: auto; position: relative; float: left; margin-left: 90px; margin-top: -4px; font-size: 18px; color:#000000; z-index: 2;}
#icn-montadora{width: 60px; height: 60px; position: absolute; right: 35px; top: 50%; margin-top: -30px; border: 1px solid #E9EBF3; border-radius: 10px; padding: 5px; z-index: 2;}


/*Formulário briefing*/
#box-dicas-briefing{width: 100%; height: auto; position: relative; float: left; min-height: 120px; margin-top: 20px; margin-bottom: 20px; background-color:#F8FFFF; border: 1px solid #C6E4FF; border-radius: 20px; padding: 20px 40px;}
#icn-box-dicas-briefing{width: 80px; height: 80px; position: absolute; left: 20px; top: 50%; margin-top: -40px; background-color:#FFFFFF; border: 1px solid #EEF1F6; border-radius: 20px;}
#icn-int-box-dicas-briefing{width: 70px; height: 70px; position: absolute; left: 50%; top: 50%; margin-left: -35px; margin-top: -35px; background: url(img/help.gif); background-size: 70px;}

#box-dicas-briefing p{width: 100%; height: auto; position: relative; float: left; padding: 20px 20px 0px 90px; font-size: 16px; color:#000; }

/*campos do formulario*/
.item-campo-formulario{width: 100%; height: auto; position: relative; float: left; margin-top: 20px;}
.item-campo-formulario textarea{font-size: 16px; line-height:22px;}

/*Campos upload de arquivos*/
#campos-uload-arquivos{width: 100%; height: 79.8%; position: relative; float: left; margin-top: 20px; overflow-y: scroll;}
.item-upload{width: 100%; height: auto; position: relative; float: left;  margin-bottom: 20px;}
.icn-upload-demanda{width: 80px; height: 80px; position: relative; float: left; background-color:#F8FFFF; border: 1px solid #C6E4FF; border-radius: 20px; cursor: pointer;}
.icn-int-upload{width: 65px; height: 65px; position: absolute; left: 50%; top: 50%; margin-top:-32.5px; margin-left: -32.5px; background: url('img/upload.gif'); background-size: 65px;}

.sem-arquivo{}
.sem-arquivo:hover{background-color:#cfffe4; border: 1px solid #b3ecbf;}

.com-arquivo{}
.com-arquivo:hover{background-color:#FFEBED; border: 1px solid #FF7886;}

.legenda-arquivo{width:200px; height: 20px; position: relative; float: right;  margin-top: 25px; right: -220px; font-size: 22px; color:#000000; font-size: 16px;}
.deletar-arquivo{width: 45px; height: 45px; position: absolute; right: 20px; top: 20px; z-index: 999; background-color: #000; border-radius: 50%; cursor: pointer;}

label span { color: red; font-weight: bold; /* Apenas adicionar estético */ }

/*Avatar*/
#avatar-demanda-abertura { width: 200px; height: auto; position: relative; float: left; margin-left: 20px; }
.demanda-avatar-nome-abertura { width: 150px; height: auto; position: relative; float: left; margin-left: 10px; margin-top: 9px; font-size: 16px; color: #000; font-weight: 600; }


/*cta abrir demanda*/
#cta-abrir-demanda-briefing { width: auto; height: auto; position: relative; float: right; margin-top: 3px; padding: 10px 50px 10px 20px; background-color: #1759F3; border-radius: 70px; font-size: 16px; color: #fff; cursor: pointer; }
#cta-abrir-demanda-briefing:hover{background-color:#1828FB;}
#icn-cta-toolbar-board-ds{width: 24px; height: 24px; position: absolute; right: 15px; top: 9px; background: url('img/icn-btn-ds-toolbar.png'); background-size: 24px;}


/*Janela upload arquivos*/
#janela-upload-arquivos { width: 88%; height: 100px; position: fixed; left: 5%; margin-left: 56px; bottom: -1000px; z-index: 999; background-color: #fff; border-radius: 19px; border: 1px solid #ededed; -webkit-box-shadow: 0px 0px 32px 0px rgba(0, 0, 0, 0.05); -moz-box-shadow: 0px 0px 32px 0px rgba(0, 0, 0, 0.05); -o-box-shadow: 0px 0px 32px 0px rgba(0, 0, 0, 0.05); -ms-box-shadow: 0px 0px 32px 0px rgba(0, 0, 0, 0.05); box-shadow: 0px 0px 32px 0px rgba(0, 0, 0, 0.05); overflow: hidden;}
#legenda-upload-arquivos{width: 500px; height: auto; position: relative; float:left; font-size: 20px; top: 20px; color: #818181; margin-left: 30px; margin-top: 15px;}
#legenda-upload-arquivos spam{color: #000;}

#ctas-upload-arquivos{width: 600px; position: relative; float: right; margin-top: 28px;}

/*CTA seleciona arquivos*/
#cta-selecionar-arquivos{width: auto; height: auto; position: relative; float: right; margin-right: 20px; padding: 10px 43px 10px 20px; color: #fff; background-color:#1859F3; color: #fff; border-radius: 30px; cursor: pointer;}
#cta-selecionar-arquivos:hover{background-color: #0029FF;}
#icn-int-arquivos{width: 25px; height: 25px; position: absolute; right: 10px; top: 8px; background: url('img/icn-mais.png'); background-size: 25px;}

/*CTA enviar arquivos*/
#cta-enviar-arquivos{width: auto; height: auto; position: relative; float: right; margin-right: 20px; padding: 10px 43px 10px 20px; color: #fff; background-color:#2B2D33; color: #fff; border-radius: 30px; cursor: pointer;}
#cta-enviar-arquivos:hover{background-color: #565966;}
#icn-int-enviar-arquivos{width: 20px; height: 20px; position: absolute; right: 12px; top: 11px; background: url('img/icn-enviar-arquivos.png'); background-size: 20px;}

/*Fechar upload de arquivos*/
#cta-fechar-upload-arquivos { width: auto; height: auto; position: relative; float: right; margin-right: 20px; padding: 9px 30px; margin-top: 0px; color: #000; border: 1px solid #000000; border-radius: 50px; cursor: pointer; }
#cta-fechar-upload-arquivos:hover {background-color:#2B2D34; color: #fff;}
.fix-upload{z-index: 1 !important;}

#materialbox-overlay{background-color: #ffffff !important;}

/*Ínicio página de histórico*/
#formulario-historico-ds { width: 300px; height: 20px; position: relative; float: left; margin-top: -6px; margin-left: 30px; }




/*Telas menores*/
@media only screen 
and (min-width: 1200px) 
and (max-width: 1750px) {

/*Login Screen*/
#view-login-screen { width:90%; height: 100%; position: relative; max-width: 1200px; margin: auto; z-index: 2; }
#bg-slider-onboard { width: 100%; height: 90%; position: relative; float: left; margin-top: 7%; margin-left: 0%; background-color: #0093FC; border-radius: 20px; }
#div-slider-onboard { width: 50%; height: 100%; position: relative; float: left; }
#box-slider-int { width: 100%; height: 330px; position: absolute; top: 50%; margin-top: -370px; }
#paginacao-slider-home { width: 100%; height: auto; position: absolute; bottom: -30px; }

/*Form login*/
#div-form-login { width: 50%; height: 100%; position: relative; float: left; padding-top: 40px; padding-left: 40px; box-sizing: border-box;}

}

@media only screen 
and (min-width:1200px) 
and (max-width:1400px) {
.anexo { width: 31%; height: 300px; position: relative; float: left; margin-top: 30px; margin-bottom: 80px; margin-left: 1%; margin-right: 1%; background-color: #EEF9FF; border-radius: 30px; cursor: pointer; }
}


/*Telas menores*/
@media only screen 
and (min-width:1050px) 
and (max-width:1200px) {

/*Login Screen*/
#view-login-screen { width: 90%; height: 100%; position: relative; margin: auto; z-index: 2; }
#bg-slider-onboard { width: 90%; height: 90%; position: relative; float: left; margin-top: 7%; margin-left: 0%; background-color: #0093FC; border-radius: 20px; }
#div-slider-onboard { width: 55%; height: 100%; position: relative; float: left; }
#box-slider-int { width: 100%; height: 620px; position: absolute; top: 50%; margin-top: -300px; }
#paginacao-slider-home { width: 100%; height: auto; position: absolute; bottom: 80px; }
.legenda-slider-onboard { width: 100%; height: auto; position: relative; float: left; margin-top: 19px; }
#div-form-login h1 { width: auto; height: auto; position: relative; float: left; font-family: "IBM Plex Mono", monospace; font-size: 18px; color: #000; }
#logo-pg-login { width: 115px; height: 20px; position: absolute; top: 41px; right: 0px; background: url('img/logo-azzurra.png'); background-size: 115px; background-repeat: no-repeat; }
#faixa-formulario-login-screen h2 { width: 100%; height: auto; position: relative; float: left; margin-top: 20px; color: #000; font-size: 38px; font-weight: 700; }

.faixa-label { width: 220px; height: auto; position: relative; float: left; margin-right: 50%; }
#cta-formulario-login { width: 292px; height: auto; position: relative; float: left; padding: 14px 20px 14px 20px; background-color: #2B2D34; color: #fff; font-size: 22px; font-weight: 600; border-radius: 15px; cursor: pointer; }

/*Form login*/
#div-form-login { width: 45%; height: 100%; position: relative; float: left; padding-top: 30px; padding-left: 10px; }

/*Ínicio dashboard*/
#tabela-demandas{width: 100%; height: 92%; position: relative; float: left;}
#ds-area-de-trabalho { width: 100%; height: 85%; position: relative; float: left; z-index: 9; padding: 28px 20px 80px 110px; }
#board-ds { width: 100%; height: 93%; position: relative; float: left; background-color: #FFFFFF; border-radius: 20px; border: 1px solid #F4F5F8; padding: 20px 40px 40px 40px; }

#legenda-nome{width: 35%; height: auto; position: relative; float: left;}
#faixa-legendas-board-ds { width: 1000px; height: auto; position: relative; float: left; padding: 20px 20px 7px 20px; border-bottom: 1px solid #EEEEEE; }
#lista-demandas-ds-board { width: 1000px; height: 85%; position: relative; float: left; }


#board-ds-demanda-comentario { width: 53%; height: 93%; position: relative; float: right; background-color: #FFFFFF; border-radius: 20px; border: 1px solid #F4F5F8; padding: 20px 40px 20px 40px; }
#board-ds-demanda { width: 45%; height: 93%; position: relative; float: left; background-color: #FFFFFF; border-radius: 20px; border: 1px solid #F4F5F8; padding: 20px 40px 20px 40px; }

.anexo { width: 31%; height: 250px; position: relative; float: left; margin-top: 30px; margin-bottom: 80px; margin-left: 1%; margin-right: 1%; background-color: #EEF9FF; border-radius: 30px; cursor: pointer; }

}



@media only screen 
and (min-width:800px) 
and (max-width:1050px) {

/*Login Screen*/
#view-login-screen { width: 90%; height: 100%; position: relative; margin: auto; z-index: 2; }
#bg-slider-onboard { width: 100%; height: 95%; position: relative; float: left; margin-top: 7%; margin-left: 0%; background-color: #0093FC; border-radius: 20px; }

#div-slider-onboard { width: 55%; height: 100%; position: relative; float: left; }
#box-slider-int { width: 100%; height: 620px; position: absolute; top: 50%; margin-top: -300px; }
#paginacao-slider-home { width: 100%; height: auto; position: absolute; bottom: 100px; }
.legenda-slider-onboard { width: 100%; height: auto; position: relative; float: left; margin-top: 19px; }
#div-form-login h1 { width: auto; height: auto; position: relative; float: left; font-family: "IBM Plex Mono", monospace; font-size: 14px; color: #000; }
#logo-pg-login { width: 115px; height: 20px; position: absolute; top: 41px; right: 0px; background: url('img/logo-azzurra.png'); background-size: 115px; background-repeat: no-repeat; }
#faixa-formulario-login-screen h2 { width: 100%; height: auto; position: relative; float: left; margin-top: 20px; color: #000; font-size: 38px; font-weight: 700; }
.faixa-label { width: 220px; height: auto; position: relative; float: left; margin-right: 50%; }
#cta-formulario-login { width: 292px; height: auto; position: relative; float: left; padding: 14px 20px 14px 20px; background-color: #2B2D34; color: #fff; font-size: 22px; font-weight: 600; border-radius: 15px; cursor: pointer; }

/*Form login*/
#div-form-login { width: 45%; height: 100%; position: relative; float: left; padding-top: 38px; padding-left: 26px; }

/*Dashboard*/
#faixa-legendas-board-ds { width: 900px; height: auto; position: relative; float: left; padding: 20px 20px 7px 20px; border-bottom: 1px solid #EEEEEE; }
#lista-demandas-ds-board { width: 900px; height: 85%; position: relative; float: left; }

.anexo { width: 47%; height: 250px; position: relative; float: left; margin-top: 30px; margin-bottom: 80px; margin-left: 1%; margin-right: 1%; background-color: #EEF9FF; border-radius: 20px; cursor: pointer; }

/*Demanda interna*/
#board-ds-demanda { width: 100%; height: 93%; position: relative; float: left; background-color: #FFFFFF; border-radius: 20px; border: 1px solid #F4F5F8; padding: 20px 40px 20px 40px; }

/* comentarios demanda interna */
#ds-area-de-trabalho { width: 100%; height: 85%; position: relative; float: left; z-index: 9; padding: 28px 10px 80px 106px; }
#board-ds-demanda-comentario { width: 100%; height: 93%; position: relative; float: right; margin-top: 30px; background-color: #FFFFFF; border-radius: 20px; border: 1px solid #F4F5F8; padding: 20px 40px 20px 40px; }
.demanda-avatar-int{display: none;}

.demanda-avatar-nome { width: 150px; height: auto; position: relative; float: right; margin-left: 0px; font-size: 16px; color: #000; font-weight: 600; text-align: right;}
.data-demanda-interna { width: auto; height: auto; position: relative; float: right; margin-left: 0px; font-size: 14px; color: #000; font-weight: 300; text-align: right;}

.fix-rodape-ds{width: 100%; height: 300px; position: relative; float: left;}
#filtro-demandas { width: auto; height: auto; position: relative; float: right; margin-right: 8px; border: 1px solid #000; border-radius: 35px; margin-top: 17px; }

}


@media only screen 
and (min-width:50px) 
and (max-width:800px) {

body { width: 100% !important; height: 100% !important; overflow: hidden !important; }
#mascara{width: 100%; height:100%; position: fixed; background-color: #FFFFFF; opacity: 1; z-index: 9999;}
#gif-responsivo{width: 100px; height: 100px; position: fixed; left: 50%; top: 50%; margin-top: -120px; margin-left: -50px; z-index: 9999; background: url('img/gif-responsivo.gif'); background-size: 100px;}
#msg-responsivo { width: 350px; height: auto; position: absolute; bottom: -70px; left: 50%; margin-left: -175px; font-size: 16px; color: #000; text-align: center; padding: 0px 50px;}


}


@media (max-height: 500px) {

body{overflow: hidden !important;}
#mascara{width: 100%; height:100%; position: fixed; background-color: #FFFFFF; opacity: 1; z-index: 9999;}
#gif-responsivo { width: 100px; height: 100px; position: fixed; left: 50%; top: 50%; margin-top: -90px; margin-left: -50px; z-index: 9999; background: url('img/gif-responsivo.gif'); background-size: 100px; }
#msg-responsivo { width: 400px; height: auto; position: absolute; bottom: -60px; left: 50%; margin-left: -200px; font-size: 19px; color: #000; text-align: center; }

}

/* ==========================================================================
   Helper classes
   ========================================================================== */

/*
 * Hide visually and from screen readers
 */

.hidden,
[hidden] {
  display: none !important;
}

/*
 * Hide only visually, but have it available for screen readers:
 * https://snook.ca/archives/html_and_css/hiding-content-for-accessibility
 *
 * 1. For long content, line feeds are not interpreted as spaces and small width
 *    causes content to wrap 1 word per line:
 *    https://medium.com/@jessebeach/beware-smushed-off-screen-accessible-text-5952a4c2cbfe
 */

.visually-hidden {
  border: 0;
  clip: rect(0, 0, 0, 0);
  height: 1px;
  margin: -1px;
  overflow: hidden;
  padding: 0;
  position: absolute;
  white-space: nowrap;
  width: 1px;
  /* 1 */
}

/*
 * Extends the .visually-hidden class to allow the element
 * to be focusable when navigated to via the keyboard:
 * https://www.drupal.org/node/897638
 */

.visually-hidden.focusable:active,
.visually-hidden.focusable:focus {
  clip: auto;
  height: auto;
  margin: 0;
  overflow: visible;
  position: static;
  white-space: inherit;
  width: auto;
}

/*
 * Hide visually and from screen readers, but maintain layout
 */

.invisible {
  visibility: hidden;
}

/*
 * Clearfix: contain floats
 *
 * The use of `table` rather than `block` is only necessary if using
 * `::before` to contain the top-margins of child elements.
 */

.clearfix::before,
.clearfix::after {
  content: "";
  display: table;
}

.clearfix::after {
  clear: both;
}

/* ==========================================================================
   EXAMPLE Media Queries for Responsive Design.
   These examples override the primary ('mobile first') styles.
   Modify as content requires.
   ========================================================================== */

@media only screen and (min-width: 35em) {
  /* Style adjustments for viewports that meet the condition */
}

@media print,
  (-webkit-min-device-pixel-ratio: 1.25),
  (min-resolution: 1.25dppx),
  (min-resolution: 120dpi) {
  /* Style adjustments for high resolution devices */
}

/* ==========================================================================
   Print styles.
   Inlined to avoid the additional HTTP request:
   https://www.phpied.com/delay-loading-your-print-css/
   ========================================================================== */

@media print {
  *,
  *::before,
  *::after {
    background: #fff !important;
    color: #000 !important;
    /* Black prints faster */
    box-shadow: none !important;
    text-shadow: none !important;
  }

  a,
  a:visited {
    text-decoration: underline;
  }

  a[href]::after {
    content: " (" attr(href) ")";
  }

  abbr[title]::after {
    content: " (" attr(title) ")";
  }

  /*
   * Don't show links that are fragment identifiers,
   * or use the `javascript:` pseudo protocol
   */
  a[href^="#"]::after,
  a[href^="javascript:"]::after {
    content: "";
  }

  pre {
    white-space: pre-wrap !important;
  }

  pre,
  blockquote {
    border: 1px solid #999;
    page-break-inside: avoid;
  }

  tr,
  img {
    page-break-inside: avoid;
  }

  p,
  h2,
  h3 {
    orphans: 3;
    widows: 3;
  }

  h2,
  h3 {
    page-break-after: avoid;
  }
}