/* cores em variáveis para dark mode */
:root,
 :root.light {
  --font-color: #222222;
  --line: black;
  --back-color: white;
  --back-color-navbar: white;
  --bluedark: #072f60;
  --darkbluetext: #082c64;
  --primary: white;
  --rgba: 8, 44, 100, 0;
  --light-blue-DM: #031730;
  --light-blue: #0BAEEF;
  --background-news: 98, 123, 155;
  --placeholder: #444444;
  --text-hover:  #03152b;;
}

@media (prefers-color-scheme: dark) {
   :root {
    --font-color: white;
    --back-color: #031730;
    --back-color-navbar: #222222;
    --bluedark: #031730;
    --darkbluetext: white;
    --primary: #031730;
    --rgba: 8, 44, 100, 0.3;
	--light-blue-DM:  rgb(11, 174, 239);
	--light-blue: #031730;
	--background-news: 11, 174, 239;
	--placeholder: #e7e7e7;
	--text-hover:  white;
  }
}

:root.dark-mode {
  --font-color: white;
  --back-color: #031730;
  --back-color-navbar: #222222;
  --bluedark: #222;
  --darkbluetext: white;
  --primary: #031730;
  --rgba: 8, 44, 100, 0.3;
  --light-blue-DM: #0BAEEF;
  --light-blue: #031730;
  --background-news: 11, 174, 239;
  --placeholder: #e7e7e7;
  --text-hover: white;
}
/* -------------------------------------- */

/* estilo geral */
#news{
	padding: 0;
	margin: 0;
	box-sizing: border-box;
	font-family: 'Quicksand', sans-serif;
}

body{
	height: 100vh;
	width: 100%;
	color: var(--darkbluetext);
}

/* Página de Notícias. */
#news .NewsDisplay{
	display: flex;
	flex-wrap: wrap;
	justify-content: center;
	align-items: baseline;
	/* padding: 0 30px; */
}

#news .containerNews{
	position: relative;
	/* width: 32%; */
	/* padding: 0px 30px; */
	/* margin: 5px; */
	/* novo */
	width: 31%;
	margin: 0 1%;
}

#news .title{
	/* font-size: 35px; */
	text-align: center!important;
	/* padding-top: 15px; */
	margin-bottom: 0px!important;
	/* novo */
	font-family: 'Open Sans', 'Helvetica Neue', Arial, sans-serif;
	line-height: 1.2;
    font-size: 1.7em;
    font-weight: 550;
}

.section-heading{
	padding: 0 10px;
}
#news p,
#news span{
	text-align: justify;
	font-size: 16px;
	line-height: 1.5;
	margin-bottom: 20px;
	/* word-break: break-all; */
	white-space: pre-line;
	max-width: 100%;
	padding-top: 10px;
}

.NewsThumbnail{
	width:100%;
	/* height:250px; */
	object-fit: cover;
	max-height:100%;
	transition: border .2s ease-in-out;
	border-radius: 4px;
	/* margin-top: 10px; */
	aspect-ratio: 3 / 2;
}

.bottom-hover-box{
	margin: 5px 0;
	width: 100%;
}

.bottom-hover-box p{
	width: 95%;
	margin-left: auto;
    margin-right: auto;
}

#news .hoverBox:hover{
	/* background-color: rgba(var(--background-news), 0.3);
	border-radius: 5px;
	transition: .25s;
	 // width: 32.5%; 
	cursor: pointer; */
	/* novo */
	color: var(--text-hover);
	font-weight: 400;
	cursor: pointer;
	transition: .2s;
}

#news .hoverBox:hover .NewsThumbnail {
    filter: brightness(50%);
	transition: .2s;
}

#news .hoverBox:hover .bottom-hover-box{
	background-color: rgba(var(--background-news), 0.4);
	border-radius: 5px;
	transition: .2s;
}

#news a{
	text-decoration: none;
	width: 100%;
	height: 100%;
	display: flex;
	flex-direction: column;
	/* justify-content: center; */
	align-items: center;
	color: var(--darkbluetext);
	transition-duration: .5s;
	padding: 20px 0 0 0;
}

@media screen and (max-width: 915px){
	/* #news .hoverBox:hover{
		width: 48.5%;	
	} */
	#news .containerNews{
		width: 48%;
	}
}

/* Página de Submissão */

#newsForm{
	width: 90%;
	margin: auto;
}

#news .field{
	width: 100%;
	border: 2px solid rgba(0, 0, 0, 0);
	outline: none;
	background-color: rgba(230, 230, 230, 0.6);
	padding: 0.5rem 1rem;
	font-size: 18px;
	margin-bottom: 22px;
	transition: .3s;
	white-space: pre-wrap
}

#news .field:hover{
	background-color: rgba(0, 0, 0, 0.1);
}

#news .field:focus{
    border: 2px solid rgba(var(--background-news), 0.5);
    background-color: var(--back-color);
}

#news ::placeholder{
	color: var(--placeholder);
}

#news textarea{
	min-height: 150px;
}

#news .btn,
#preview .btn{
	width: fit-content;
	padding: 0.5rem 1rem;
	background-color: var(--light-blue-DM);
	color: #fff;
	font-size: 15px;
	border: none;
	outline: none;
	cursor: pointer;
	transition: .3s;
	margin: auto;
}

#news .btn:hover{
    background-color: var(--bluedark);
}

.escondido{
	display: none;
	padding: 0;
}

#news ul{
	padding-inline-start: 0;
}
#news ul li{
	color: var(--font-color);
	margin: 4px 3px;
	list-style: none;
	border-radius: 5px;
	background: rgba(230, 230, 230, 0.6);
	padding: 5px 8px 5px 10px;
	border: 1px solid #e3e1e1;
	width: fit-content;
	float: left;
	font-size: 16px;
  }
  #news ul li i{
	margin-left: 8px;
	cursor: pointer;
  }
  #news ul input{
	flex: 1;
	padding: 5px;
	border: none;
	outline: none;
	font-size: 16px;
  }

.hoverLi:hover{
	cursor: pointer;
	background: rgba(149, 149, 149, 0.6)!important;
}

.search-list{
	width: 99%;
	border-radius: 5px;
	max-height: 140px;
    overflow-x: hidden;
    overflow-y: scroll;
}
.search-list-item{
	width: 100%!important;
	margin: 0px 0.5%!important;
	border-radius: 0px!important;
	background: none!important;
	float: none!important;
	cursor: pointer;
	border-top: none!important;
}

.search-list-item:hover{
	background-color:  rgba(230, 230, 230, 0.6)!important;
}

.search-list::-webkit-scrollbar {
	width: 7px;
  }

.search-list::-webkit-scrollbar-track {
	background-color: #e4e4e4;
	border-radius: 50px;
  }

.search-list::-webkit-scrollbar-thumb {
	border-radius: 10px;
	border: 2px solid transparent;
	background-clip: content-box;
	background-color: black;
  }

@media screen and (max-width: 880px){
	#news .contact-box{
		grid-template-columns: 1fr;
	}
	#news .left{
		height: 200px;
	}
}

.form-check-label{
	padding: 5px 15px 0 0;
}

.info{
	display: inline!important;
	padding: 10px 10px 10px 0;
	font-size: 16px;
}

.card{
    padding: 1.25rem;
    border: 1px solid rgba(0,0,0,.25);
    border-radius: 10px;
	margin: 10px;
}
#preview{
	display: none;
}

#preview img{
	/* color of "inserir imagem!" */
	color: red;
}

.small_tag{
	padding: 2px 2px 2px 2px!important;
	font-size: 14px!important;
	background: rgba(230, 230, 230, 0.8)!important;
	color: #222222!important;
}

#news .img_tag{
	display: block!important;
	position: absolute!important;
    top: 7rem;
    left: 1rem;
	right: 1rem;
	height: 35px;
    overflow: hidden;
}

.preview-section-title{
	background-color: aliceblue;
	color: #082c64!important;
	width: fit-content;
	margin: auto;
}

/* Página notícia individual */
#newstitle h1{
	font-size: 40px;
	font-weight: 600;
}

.singleNewsThumbnail{
	object-fit: cover;
	/* height: 30%; */
	max-height: 600px;
	width: 50%;
	transition: border .2s ease-in-out;
	border-radius: 10px;
	margin: 14px 0px 25px 25px;
	float: right;
}

@media screen and (max-width: 768px) {
	.singleNewsThumbnail{
		width: 100%;
	}
}

#news .singlecontainerNews{
	padding: 2% 0%;
	padding-right: 15px;
    padding-left: 15px;
}

#news .singlecontainerNews a{
	text-decoration: underline!important;
	display: initial!important;
	color: #1969cc;
	padding: 0;
}

#news .text{
	text-align: center;
	padding: 1% 0 0 0;
	white-space: pre-wrap;
}

#news .text_home{
	text-align: center;
	padding: 20%;
	white-space: pre-wrap;
}

#news .date{
	margin: 5px;
	padding: 0!important;
}

#news .tag-ul{
	display:flex;
	justify-content: center;
	flex-wrap: wrap;
	z-index: 10;
}
#news .tag,
#news .tag_prev{
	display: list-item!important;
}

/* Noticias por tag */
.tagPageBtn{
	margin-top: 50px;
    display: flex;
    justify-content: center;
}

.tagPageBtn a{
	margin: 20px!important;
}

@media screen and (max-width: 370px) {
	.tagPageBtn{
		display: block;
	}
	.tagPageBtn a{
		margin: auto!important;
	}
}

@media screen and (max-width: 600px){
	/* #news .hoverBox:hover{
		width: 95.5%;	
	} */
	#news .containerNews{
		width: 95%;
		padding: 0px;
	}
	/* #news .NewsDisplay{
		padding: 0 10px;
	} */
	#news .title{
		font-size: 25px;
	}
	#news .img_tag{
		top: 72px;
		left: 1.5vw;
		right: 1.5vw;
	}
}

/* Sign-up form */
input[type="text"],
input[type="email"]{
	padding: 8px 10px 8px 10px;
	border: 1px solid #ccc;
	border-radius: 2px;
	width: 100%;
	margin: 0rem 0;
}
input[type="text"]:focus-visible,
input[type="email"]:focus-visible{
	outline: 2px solid #0BAEEF;
}
input[type="checkbox"] {
	position: absolute;
	left:	100%;
	bottom:	0%;
	transform: translate(1rem, -0.3rem);
	top:calc(50%-4px);
	opacity: 0;
	cursor: pointer;
	margin: 0;
}
label{
	position: relative;
}
input[type="checkbox"]:checked + .box {
	background-color: #0BAEEF;
}
input[type="checkbox"]:checked + .box > .pivot {
	background-color: #0BAEEF;
	transform: rotate(-90deg); 
}
input[type="checkbox"]:checked + .box > .checkmark {
	color: white;
}
.box{
	position: absolute;
	/*border: 2px solid grey;*/
	border-radius: 2px;
	background-color: white;

	overflow: hidden;

	height: 1.5rem;
	width: 	1.5rem;
	left:	100%;
	bottom:	0%;
	transform: translate(1rem, -0.3rem);
}
.checkmark{
	z-index: 1;
	position: absolute;
	top:0%;
	left: 0%;
	transform: translate(-0.3rem, -0.6rem);
	color: #0BAEEF;
	scale: 0.7;
	width: 1rem;
}
.pivot{
	background-color: white;
	z-index: 100;
	position: absolute;
	overflow: visible;
	top: 0%;
	left: 0%;
	transition: transform 0.3s;
}
.hider{
	position: absolute;
	top: 	0%;
	left: 	0%;
	background-color: inherit;
	width: 	1.5rem;
	height: 3rem;
}
.field_holder{
	margin: auto;
	width: 50%;
	padding: 1rem 0;
}
a.dark_backgrond{
	color:#0BAEEF;
	font-weight: bolder;
	text-decoration: underline;
}
a.dark_backgrond:hover{
	cursor: pointer;
	color:white;
}
a.dark_backgrond:focus{
	color:white;
}
@media (max-width: 768px) {
	.field_holder{
		width: 100%;
	}
}


@keyframes loading {
	0% { 
		transform: rotate(0); 
	}
	100% { 
		transform: rotate(360deg);
	}
}