:root{
	--cor01: #009cff; 
	--cor02:#ffff;
	--dark: #141b20;
	--dark02: #1f2930;
	--dark03: #5a5c69;
	--corModal: #1f2831;

	--darkgreen: #032221;
	--bangladeshgreen: #03624C;
	--mountainmeadow:#2CC295;
	--antiflash: #F1F7F6;

	--pine:#06302B;
	--basil: #0B453A;
	--forest: #095544;
	--frog: #17876D;
	--mint: #2FA98C;


}

body{
    font-family: 'Poppins', sans-serif;
}


 /* Homepage Color Gradient */
.bg-gradient-primary-to-secondary, .bg-gradient-primary{
	background-color: #000102 !important;
	background-image: linear-gradient(135deg, #1f2d41 30%, #000102 100%) !important;
	
}

.base-mini-bg{
	background-color: #000102 !important;
}

.join {
	background-color: #9C27B0 !important;
	background-image: linear-gradient(-45deg, #9C27B0 0%, #03A9F4 100%) !important;
}

/* Homepage Text color */
.about-container .title, .about-container .text, .sq .card-text{
    color: #eee !important;
}

/* Homepage Header Background Color */
.navbar-marketing.navbar-dark.navbar-scrolled, .navbar-no-header {
	background-color: #1f2d41 !important;
	border-bottom: 1px solid #141e27;
}

/* Homepage Header Text color */
.navbar-dark .navbar-nav .nav-link, .page-header-title, .page-header-text {
	color: #ffffff !important;
}

/* Chat User List Color Gradient */
.chat-list-col {
	background: #1F2831 !important;
	background: linear-gradient(180deg, #1F2831 0%, #1F2831 100%) !important;
}

/* Chat User List Text color */
.chat-name, .chat-preview, .chat-list-col .nav-link{
	color: #ffffff !important;
}

/* Chat Container Color Gradient */
.chat-messages-col {
	background: #192229 !important;
	background: linear-gradient(180deg, #192229 0%, #192229 100%) !important;
}

nav.navbar.navbar-expand.navbar-light.topbar.static-top.lite-shadow{
	background: #141B20 !important;
	background: linear-gradient(to right,#141B20,#141B20) !important;
}

/* Chat Container Text color */
.chat-title, .chat-slug, .new-date{
	color: #e0e0e0  !important;
}

.message-time{
	color: #999;
}

/* Received Chat Background Color - cor do balão do chat que vem do cliente */
.replies .chat-img-sgl, .replies .chat-img-duo, .replies .chat-img-grp, .replies .chat-gif, .replies .chat-txt, .replies .chat-code, .replies .chat-fwd, .replies .message-data small, .replies .chat-replied-bubble, .replies .link-meta, .replies .video-section  {
	background: #35404C !important;
}

/* Received Chat Text Color */
.messages .replies .message-data, .replies .video-link, .replies .link-meta {
	color: #e0e0e0  !important;
}

/* Sent Chat Background Color */
.sent .chat-img-sgl, .sent .chat-img-duo, .sent .chat-img-grp, .sent .chat-gif, .sent .chat-txt, .sent .message-data small, .sent .chat-code, .sent .chat-fwd, .sent .chat-replied-bubble, .sent .link-meta, .sent .video-section {
	background: var(--cor01);
}

/* Sent Chat Text Color */
.messages .sent .message-data, .sent .video-link, .sent .link-meta {
	color: #f5f5f5 !important;
}

/* cor do nome de quem envia msg na conversa */
.messages .replies .message-data small{
	color: #ffffff !important;
}

/* Chat Info Background Gradient */
.selected-chat-col, .selected-chat {
	background: #1F2831 !important;
	background: linear-gradient(180deg, #1F2831 0%, #1F2831 100%) !important;
}

/* Chat Info Section Header Color */
.chat-data-header, .chat-list-col .nav-link.active{
	background: #141b20 !important;
	border-bottom: 2px solid #44c88a;
}

ul.nav.nav-pills.nav-justified.nav-sidebar {
	background: #141b20 ;
}

/* Chat Info Text Color */
.chat-data-header{
	color: #EEEEEE !important;
}

.selected-chat-name, .active-group-users, .selected-chat-profile{
	color: #EEEEEE !important;
}

/* Chat input */
.input-message-write {
	background: #141B20;
	border-left: 1px solid #181b1d;
	border-right: 1px solid #191c1e;
}

.emojionearea-editor {
	background-color: #19232a  !important;
}

.emojionearea.form-control {
	border: none;
	background-color: #19232a;
}

.chat-data-header {
	border: none;
}

.recent-chat:hover {
	background: rgb(20 27 32);
	border-top: 1px solid rgb(20 27 32 / 63%);
	border-bottom: 1px solid rgb(20 27 32 / 63%);
}

.scrollable-menu{
	background: #19232a;
	border: 1px solid #141c20;
}

.scrollable-menu a{
	color: #eee;
}

.scrollable-menu a:hover{
	background: #141b20;
	color: #fff;
}

.bg-white {
	background-color: #141e27 !important;
}

#chat-room-loop .no-gutters, #chat-room-loop .card-header, #chat-room-loop .card-footer {
	background: #1f2d41;
}

#chat-room-loop .card{
	border: none;
}

h5.card-title, p.card-text, .number, .number-title {
	color: #eee !important;
}

input#search_chatroom {
	background: #2e353e;
	border-color: #1f2d41;
}

span.chat-list-header {
	color: #E0E0E0;
}

.bg-light {
	background-color: #020816  !important;
}

.card-footer {
	background: transparent;
	border-top: 1px solid #141e27;
}

/* .bgimg:after {
	content: '';
	position: absolute;
	width: 100%;
	max-width: 100%;
	height: 600px;
	background-image: url(../static/img/dark-home-bg.svg);
	background-repeat: no-repeat;
	background-size: auto;
	top: 0;
	background-position: center top;
	-webkit-transform: translate(-50%);
	transform: translate(50%);
	transform: scaleX(-1);
	opacity: 0.5;
} */

.card {
	background: #1f2d41;
	color: #efefef;
	border-color: #5a5a5a;
}

.text-gray-900{
	color: #efefef !important;
}

.form-control {
	background-color: #282d36;
	border-color: #282d36;
	color: #EEE;
	border: none;
}

.modal-content {
	background: #2e353e;
	color: #eee;
}

.modal-header{
	border-bottom: 1px solid #282d36;
}

.form-control:focus {
	color: #ffffff;
	background-color: #282d36;
	border: none;
	box-shadow: 0 1px 1px rgba(0, 0, 0, 0.075) inset, 0 0 8px rgba(0, 136, 204, 0.3);
}

.date-dropdown select {
	background: #282d36;
	border: none;
	color: #eee;
}

.table-bordered, .table-bordered td, .table-bordered th, .table thead th {
	border: 1px solid #3d4044;
}

.page-item .page-link {
	background-color: #1f2328 !important;
	border-color: #2e353e !important;
}

a{
	color: #03A9F4;
}
a:hover {
	color: #0591ff;
}

.input-group-text {
	background: #282d36;
	color: #eee;
}

.form-control:disabled, .form-control[readonly] {
	background-color: #424242;
}

.input-group-text{
	border: 1px solid #282d36;
}

/* Change Autocomplete styles in Chrome*/
input:-webkit-autofill,
input:-webkit-autofill:hover,
input:-webkit-autofill:focus,
textarea:-webkit-autofill
input:-internal-autofill-selected,
textarea:-webkit-autofill:hover,
textarea:-webkit-autofill:focus,
select:-webkit-autofill,
select:-webkit-autofill:hover,
select:-webkit-autofill:focus {
  border: none;
  -webkit-text-fill-color: #eeeeee;
  -webkit-box-shadow: 0 0 0px 1000px #282d36 inset;
  transition: background-color 5000s ease-in-out 0s;
  box-shadow: 0 0 0px 1000px #282d36 inset;
}

.nav-member a {
	background: #607D8B;
	color: #fff;
	margin: 5px;
}

.nav-member a.active {
	background: #009688 !important;
}

.card-header {
	background: #282d36;
	border-bottom-color: #1d2127;
}

.card-header h6 {
	color: #fff !important;
}

.card {
	background: #2e353e;
	box-shadow: none;
	border: none;
}

.modal-footer{
	border-top: 1px solid #282d36;
}

.emojionearea .emojionearea-editor { /*troca a cor do texto do input de onde se digita a mensagem que vai ser enviada*/
	color: #eee;
}


.btn-lang {
	color: #eee;
}

/*pra mudar a cor da ponta do balão da conversa que o usuario manda */
.replies .message-data:after{
	border-color: #35404C transparent transparent transparent;
}

/*cor do canto do balão da mensagem que a gente envia*/
.sent .message-data:before{
	border-color: #009cff transparent transparent transparent;
}

.dropzone.dz-clickable {
	background: #192229;
}


.mobile-act-row {
	background-color: #1f2932;
}

.popover, .popover-header {
	background: #141c20;
	color: #eee;
}

.bs-popover-bottom > .arrow::after, .bs-popover-auto[x-placement^="bottom"] > .arrow::after {
	border-bottom-color: #141c20;
}
.bs-popover-top > .arrow::after, .bs-popover-auto[x-placement^="top"] > .arrow::after{

	border-top-color:  #141c20;
}

.popover-header {
	border-bottom: 1px solid #1f2932;
}

.dropdown-menu.show {
	background: #192229;
}

.dropdown-menu {
	border: 1px solid #141c20;
}

.dropdown-item{
	color: #eee;
}

.dropdown-divider {
	border-top: 1px solid #202932;
}

.sticker-tab-content .tab-pane {
	background: #141c20;
}

.main-content{
	background: inherit;
}

.dropdown-item:hover, .dropdown-item:focus {
	color: #eee;
	text-decoration: none;
	background-color: #1f2d41;
}

.dropzone .dz-preview.dz-image-preview {
    background: #192229;
}


.emojionearea .emojionearea-button.active+.emojionearea-picker-position-top, .emojionearea .emojionearea-picker .emojionearea-filters {
	background: #141c20;
}


.emojionearea .emojionearea-picker .emojionearea-scroll-area .emojionearea-category-title {
	color: #eee;
	background: #141c20;
}

.emojionearea .emojionearea-picker .emojionearea-filters .emojionearea-filter.active {
	background: #19232a;
}

.emojionearea .emojionearea-picker.emojionearea-picker-position-top .emojionearea-wrapper:after{
	filter:invert(90%)
}

.btn-secondary {
	background: #141b20;
	border: none;
}

#search-query {
	background: #19232a !important;
}

.res-chat-txt, .res-chat-time {
	color: #eee;
}

.result {
	border-bottom: 1px solid #2d3338;
}

.result:hover {
	background: #1a232a;
}

@keyframes highlight {
  0% {
    background: #263238;
  }
  50% {
    background: #607D8B;
  }
  100% {
    background: #263238;
  }
}

.room-user-search {
	background: #19232a !important;
}

/*pra mudar a cor das boradas do audio*/
.sent .chat-audio {
	background: var(--cor01); /*#ff0000*/
}

/*cor de fundo dos audios*/
.cn-player.green-audio-player {
	background: var(--cor01); /*#19232a*/
}

.replies .chat-audio {
	background: #35404c;
}

.sent .file-section {
	background: #263239;
}

.file-description {
	color: #eee;
}

.replies .file-section {
	background: #35404c;
}

.file-action-buttons {
	background: #19232a;
}

.file-section {
	background: #263239;
}


.input-group-prepend ~ .select2-container--bootstrap4 .select2-selection {
	background: #1a232a;
	border-color: #141b20;
}

.select2-container--bootstrap4 .select2-dropdown.select2-dropdown--below {
	background: #141b20;
	border-color: #202932;
}

.select2-container--bootstrap4 .select2-dropdown.select2-dropdown--above {
	background: #141b20;
	border-color: #202932;
}

.select2-search--dropdown .select2-search__field {
	background: #19232a;
	border-color: transparent;
	color: #eee;
}

.select2-container--bootstrap4 .select2-selection--single .select2-selection__rendered {
	color: #eee;
}

.select2-results__option--selectable {
	color: #eee;
}

.select2-container--bootstrap4 .select2-selection--single .select2-selection__arrow b {
	border-color: #eee transparent transparent transparent;
}

.regi .input-group-prepend {
	border-right: 1px solid #2e353e;
}

.select2-container--bootstrap4 .select2-selection--single .select2-selection__rendered {
	background: #19232a;
}

.replies .replied-to {
	background-color: #49545f;
}

.reply-msg-row {
	background-color: #141c20;
	border-bottom: 1px solid #19232a;
}

.reply-msg-row .replied-to {
	color: #eee;
	background: #49545f;
}

#wrapper #content-wrapper #content {
	background: #263239;
}


.select2-dropdown {
	background-color: #282d36;
}

#profile-form .select2-container--bootstrap4 .select2-selection--single .select2-selection__rendered {
	background: #282d36;
	border: none;
	color: #eee;
}

.base-min .select2-container--bootstrap4 .select2-selection--single .select2-selection__rendered {
	background: #282d36;
	border: none;
}

#profile-form .select2-container--bootstrap4 .select2-dropdown.select2-dropdown--above {
	border-top: 1px solid #19232a !important;
}

.base-min .select2-container--bootstrap4 .select2-dropdown.select2-dropdown--above {
	border-top: 1px solid #19232a !important;
}

.select2-container--bootstrap4 .select2-selection {
	background-color: transparent;
	border: none;
}

#room-selector {
	background: #19232A;
	color: #eee;
	border: none;
}


.forward-modal .user-info {
	color: #eee;
}

.forward-modal .recent-chat:hover {
	background-color: #353c46;
	border: 0px;
}

.forwarding li:hover, .forwarding .selected {
	background: #252e35 !important;
}

.radio-container {
	border-top: 1px solid #141b20;
	background: #1f2831;
	color: #858796;
}

.radio-panel {
	background: #192229;
	color: #858796;
}

.social-seperator div {
	background: #2e353e;
}

.nav-recent {
	background: #141b20;
}

.nav-recent-max {
	background: #141b20;
}

/*  */

.online-status i {
	border: 2px solid #1f2831;
}

.gse-row{
    background-color: #141c20;
    border-bottom: 1px solid #19232a;
}

.non-login-message, .non-join-message, .non-chat-select{
	background: #141B20;
}

div, span, ul {
	scrollbar-color: #2d3338 transparent;
}
  
::-webkit-scrollbar-thumb {
	background-color: #2d3338;
}

.modal-body, .room-list-area {
	scrollbar-color: #9E9E9E transparent;
}

.modal-body::-webkit-scrollbar-thumb, .room-list-area::-webkit-scrollbar-thumb {
	background-color: #9E9E9E ;
}
  
.select2-container--bootstrap4 .select2-selection {
	background-color: transparent;
}

.select2-container--bootstrap4 .select2-selection {
	border: none;
}


.topbar .select2-container--bootstrap4 .select2-selection--single .select2-selection__rendered{
    background: #19232A !important;
}

pre {
	color: #eee;
}

.messages:after {
	opacity: 0.5;
}

.file-uploader {
	background: #141b20;
}	

.panel-content-right {
	border-color: #141b20 !important;
}

.group-item {
	background: #1f2831;
}

.nav-search {
	border-bottom: none;
}

.group-sep{
    color: #141b20;
}

.group-sep:after {
	background: #1f2831;
}

.room-sel-item {
	background: #141b20;
}

.room-sel-go {
	border-bottom: 70px solid #101010;
}

.room-sel-go-icon {
	color: #2196f3;
}

.room-sel-search-btn {
	background: #141b20;
}

.room-sel-item {
    border-left: 5px solid #141b20;
	border-left: 4px solid #101010;
}

.right-panel-text {
    color: #ccc;
}

.messages, .right-panel-messages {
    border-top: 1px solid #1f2831;
}

.noti-item {
    background: #141b20;
}

.noti-content {
    color: #ccc;
}

.noti-item:hover {
    background: #1a232a;
}

.noti-read {
    background: #1a232a;
}

.bottom-login-section {
	background: #141b20;
}	

.is-typing {
	background: #141b20;
	color: #eee;
}	

.boxed-wrapper .flex-column.col-3.distant.p-0.selected-chat-col {
	background: #141b20 !important;
}

.theme-selector {
	background: #19232a;
}

.bottom-login-section #langSelector{
    background: #19232a;
}

.reactions .reaction-btn .reaction-box {
    background: #141b20;
}

.current-reacts {
    background-color: #141b20;
}

.sent .message-data {
    color: #e0e0e0;
}

.replies .message-data{
    color: #f5f5f5;
}

.sent .file-caption {
	background: #35404C;
}

.replies .file-caption {
	background: #35404C;
}

.chat-list-toggle, .selected-chat-toggle{
	background: #2d3338;
    border: 0;
	border-radius: 50px;
	color: #fff;
}

#infoDropdown {
    color: #858796;
}


/*cor da div principal que tem a logo e os chats*/
.sidebar-chats{
    display: flex;
    flex-direction: column;
    width: 600px;
	height: 100vh;
    background-color: #1f2930;
}

/*ESTILO DO MENU SECUDARIOS*/
.menusecudarios{
	display: flex;
	flex-direction: row;
	align-items: center;
}

.btnNovaConversa{
	margin-right: 10px;
	margin-top: 10px;
}

.btnNovaConversa i{
	font-size: 25px;
	color: var(--antiflash);
	cursor: pointer;
}


/*estilo dos botoes do departamentos*/
.btndepartamentos{
    background-color: var(--cor03);
    color: var(--antiflash);
	margin: 10px;
	margin-right: 20px;
}

.btndepartamentos select{
    width: 100%;
    background-color: var(--dark02);
    border: 0px;
    color: var(--antiflash);
}

.btndepartamentos select:focus{
    outline: none;
    border: none;
    box-shadow: none;
}

.btndepartamentos option{
    color: var(--antiflash);
	background-color: var(--dark);
}

.btndepartamentos i{
    color: var(--antiflash);
	background-color: var(--dark02);
}

/*estilo do texto de ultima vez visto*/
.ultimovisto{
    
}

.ultimovisto p{
	
}

/*estilo dos botões da lista de onde fica os chats*/
.navlistp{
	display: flex;
	flex-direction: row;
	color: #ff0000;
}

.navlistp li{
	color: var(--antiflash);
	list-style-type: none;
}

/*parte que tem os tiket e o tempo de antendimento*/
.sessaotiket{
	display: flex;
	flex-direction: row;
	justify-items: center;
	align-items: center;
	margin-left: 600px;
	width: 50%;

	
}

.ticket{
	display: flex;
	flex-direction: row;
	justify-content: center;
	align-items: center;
	height: 30px;
	margin-left: 10px;
}

.ctgtiket{
	color: var(--antiflash);
	font-size: 12px;
	margin-left: 5px;
	border: 1px solid var(--cor01);
	border-radius: 5px;
	padding: 3px;
	background-color: var(--cor01);
}

.ticket p{
	margin-top: 15px;
}

.contagemtempo{
	display: flex;
	flex-direction: row;
	justify-content: center;
	align-items: center;
	height: 30px;
	margin-left: 10px;
}

.ctgtempo{
	color: var(--antiflash);
	font-size: 12px;
	margin-left: 5px;
	border: 1px solid #2d3239;
	border-radius: 5px;
	padding: 3px;
	background-color: #2d3239;
}

.contagemtempo p{
	margin-top: 15px;
}


/*estilo das opções pra cancelar | transferir operador e departamento */
.opcaoadicionais{
	margin-left: 10px;
	margin-top: 7px;
	padding: 5px;
	background: none;
	border: none;

}

.opcaoadicionais i{
	color: var(--antiflash);
}

.opcaoadicionais button{
	background-color: none;
}

.opcaoadicionais button:focus{
	outline: none;
    border: none;
    box-shadow: none;
}

/*modal que abre as opões de transferir departamento, operador e cancelar*/
.modal {
  display: none; /* Escondido por padrão */
  position: fixed;
  top: 0; left: 0;
  width: 100%; height: 100%;
  background-color: rgba(0,0,0,0.5); /*Fundo escuro */
}

.modal-conteudo {
  background: var(--dark);
  color: white;
  width: 250px;
  margin: 50px auto;
  padding: 15px;
  border-radius: 8px;
}

.modal-conteudo button{
	background-color: var(--dark);
	border: none;
	color: var(--antiflash);
	margin-top: 5px;
	width: 100%;
	text-align: left;
	padding: 5px;
}

.modal-conteudo button:hover{
	background-color: var(--dark02);
}

.modal-conteudo button:focus{
	outline: none;
    border: none;
    box-shadow: none;
}

.modal-conteudo p {
  cursor: pointer;
  margin: 10px 0;
}

.fechar {
  float: right;
  cursor: pointer;
  font-size: 18px;
}

/*modal onde se cancela o atendimento depois de apertar o botão de cancelar*/
.cancelarAtendimento{
    display: none;
    position: fixed;
    background-color: #1f2831;
    width: 400px;
    height: 200px;
    border-radius: 10px;
	margin-top: 300px;
}

.modal2{
	display: flex;
	flex-direction: column;
    align-items: center;
    justify-content: center;
}

.cancelarAtendimento-texto{
    display: flex;
    align-items: center;
    justify-content: space-around;
    align-items: center;
    padding: 10px;
    width: 90%;
    color: var(--antiflash);
	font-size: 15px;

}

.cancelarAtendimento-texto p{
	margin-top: 10px;
}

.cancelarAtendimento-texto i{
	cursor: pointer;
}

.cancelarAtendimento-botoes{
    display: flex;
    align-items: center;
    flex-direction: column;
    padding: 10px;
    height: 200px;
    width: 200px;
}

.cancelarAtendimento-botoes button:nth-child(1){
    margin: 5px;
    width: 100%;
    height: 40px;
    border-radius: 10px;
    border: none;
    background-color: var(--cor01);
    color: var(--antiflash);
    font-size: 16px;
    cursor: pointer;
    transition: 1.5s;
}

.cancelarAtendimento-botoes button:nth-child(1):hover{
    background-color: var(--dark);
    color: var(--antiflash);
    transition: 1.5s;
}

.cancelarAtendimento-botoes button:nth-child(2){
    margin: 5px;
    border: none;
    outline: none;
    box-shadow: none;
    background: none;
    color: var(--antiflash);
    font-size: 16px;
    cursor: pointer;
    transition: 0.3s;
}

/*fim do estilo do modal onde se cancela o atendimento depois de apertar o botão de cancelar*/

/*Modal que abre depois que se clica no botão "TRANSFERIR OPERADOR"*/

/*estilo do pop up dos operadores*/


.transoperadores{
	display: none;
	position: fixed;
    background-color: var(--corModal);
    color: var(--antiflash);
    border-radius: 10px;
    width: 500px;
	margin-top: 300px;
}

.estilotransoperadores{
	
}


.partdeCimaOperadores{
    display: flex;
    flex-direction: row;
    justify-content: space-between;
    align-items: center;
    padding-left: 50px;
    padding-right: 50px;
    padding-top: 20px;

	background-color: var(--dark);

}

.partdeCimaOperadores i{
	cursor: pointer;
}

.divDosOperadores{
    display: flex;
    flex-direction: row;
    justify-content: space-around;
    align-items: center;
    cursor: pointer;

}

.divDosOperadores:hover{
    background-color: var(--dark03);
    transition: 1.0s;
}

.operadores{
    display: flex;
    align-items: center;
    width: 50%;

}

.operadores p{
    margin-left: 10px;
	margin-top: 15px;
}

.circulo{
    height: 40px;
    width: 40px;
    background-color: var(--basil);
    border-radius: 50%;
}
/*FIM DO ESTILO DO MODAL DOS OPERADORES*/

/*estilo do pop up dos DEPARTAMENTOS*/
.estilotransDepartamentos{
	

}

.transdepartamentos{
	position: fixed;
	display: none;
    background-color: var(--dark02);
    color: var(--antiflash);
    border-radius: 10px;
    width: 400px;
	margin-top: 250px;
}

.partdeCimaDepartamentos{
    display: flex;
    flex-direction: row;
    justify-content: space-between;
    align-items: center;
    padding-left: 50px;
    padding-right: 50px;
    padding-top: 20px;
	background-color: var(--dark);
}

.partdeCimaDepartamentos i{
	cursor: pointer;
}

.divDosDepartamentos{
    display: flex;
    flex-direction: row;
    justify-content: space-around;
    align-items: center;
    cursor: pointer;
    margin: 5px;
}

.divDosDepartamentos:hover{
    background-color: var(--dark03);
    transition: 1.0s;
}

.divDosDepartamentos .circulo:hover{
    background-color: var(--dark2);
}

.departamentos{
    display: flex;
    align-items: center;
    width: 50%;
}

.departamentos p{
    margin-left: 10px;
	margin-top: 15px;
}

.circulo{
    height: 40px;
    width: 40px;
    background-color: var(--purple);
    border-radius: 50%;
}
/*FIM DO ESTILO DO MODAL DOS DEPARTAMENTOS*/

/*estilo da parte do NOVO CONTATO*/
.novoContato{
    position: fixed;
	display: none;
    width: 500px;
    background-color: var(--corModal);
    border-radius: 10px;

	color: var(--antiflash);

	margin-top: 800px;
	margin-left: 100px;
}

.novoContato-topo{
    display: flex;
    flex-direction: row;
    justify-content: space-between;
    align-items: center;
    padding: 10px;
    border-bottom: 1px solid var(--dark03);
    padding: 10px 20px 10px 20px;
}

.novoContato-topo i{
	cursor: pointer;
}

.novoContato-alinhamento{
    display: flex;
    flex-direction: column;
    align-items: center;
    width: 100%;
        
}

.novoContato-input{
    display: flex;
    flex-direction: column;
    width: 80%; 
}

.novoContato-input input{
    height: 30px;
    background-color: var(--corModal);
    margin-bottom: 10px;
    color: var(--antiflash);
    padding: 20px;
    border: 1px solid var(--antiflash) !important;
    border-radius: 5px !important;
    outline: none;
    box-shadow: none;
}

.novoContato-input label{
    margin: 5px 0px 5px 0px;
}

/*estilo da parte de busca de contatos*/

.buscaContato-input{
    display: flex;
    flex-direction: column;
    width: 80%;

}

.buscaContato-input input{
    height: 30px;
    background-color: var(--dark);
    margin-bottom: 10px;
    color: var(--antiflash);
    padding: 20px;
    padding-left: 20px;
    border-radius: 50px !important;
    outline: none;
    box-shadow: none;
    border: none;
}


.buscaContato-input label{
    margin: 5px 0px 5px 0px;
}

/*estilo da parte lista dos contatos*/


.novoContato-select{
    width: 80%;
}

.novoContato-select select{
    width: 100%;
    height: 40px;
    color: var(--corModal);
    padding: 8px;
    border-radius: 5px;
}

.novoContato-select select option{
    height: 40px;
    background-color: var(--dark);
    color: var(--antiflash);
}

.novoContato-contatoslista{
    display: flex;
    flex-direction: column;
    width: 85%;
    height: 400px;
    margin-top: 10px;
    overflow-y: auto;
    overflow-x: hidden;
}

.novoContato-contatoslista-item{
    display: flex;
    position: relative;
    flex-direction: row;
    justify-content: space-between;
    align-items: center;
    width: 100%;
    height: 50px;
    margin-bottom: 5px;
}

.novoContato-contatoslista-item:hover{
    background-color: var(--dark);
}

.circulo-contato{
    height: 40px;
    width: 40px;
    border-radius: 50%;
    margin-left: 10px;
    background-color: #009cff;
}

.novoContato-contatoslista-item-nome{
    display: flex;
    flex-direction: row;
    align-items: center;
}

.novoContato-contatoslista-item-nome p{
    margin-left: 10px;
	margin-top: 15px;
}

.novoContato-contatoslista-item i{
    font-size: 30px;
    margin-right: 10px;
}

/*estilo da paginação que tem na parte de baixo da tela de mandar nova mensagem*/
.paginacao {
    display: flex;
    justify-content: center;
    align-items: center;
    gap: 8px;
    padding: 20px;
     /* fundo escuro */
  }
  
  .paginacao button {
    width: 35px;
    height: 35px;
    border-radius: 50%;
    border: none;
    background-color: white;
    color: #2c2b3d;
    font-weight: bold;
    cursor: pointer;
    transition: background-color 0.3s ease;
  }
  
  .paginacao button:hover {
    background-color: var(--cor01);
    color: white;
  }
  
  .paginacao .ativo {
    background-color: var(--cor01);
    color: white;
  }

/*estilo do painel de finalizar a conversa*/

.painelFinalizarConversa{
	display: none;
	margin-top: 100px;
}

.FinalizarConversaCoteudo{
	position: fixed;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    width: 400px !important;
    height: 300px;
    background-color: var(--dark02);
}


.parteDeCimaFinalizarConversa{
    display: flex;
    flex-direction: row;
    align-items: center;
    justify-content: space-between;
    width: 90%;
	color: var(--antiflash);
	font-size: 500;
}

.parteDeCimaFinalizarConversa i{
	cursor: pointer;
}

.painelFinalizarConversa button{

    color: var(--antiflash);
    background-color: #009cff;
    width: 50%;
    height: 40px;
    border-radius: 10px;
    border: none;
    transition: 1.5s;
}

.painelFinalizarConversa button:hover{
    background-color: var(--antiflash);
    color: #009cff;
    transition: 1.5s;
}

.conteudoFinalizarConversa{
    width: 90%;
}

.conteudoFinalizarConversa p{
	font-size: 12px;
	margin-top: 5px;
}

/*fim do estilo do painel de finalizar a conversa*/