/*Responsividade*/

@media (max-width: 475.98px) {
	
    div#home {
       display: none;
    
    }
    
    p.usuario-chamado {
        font-size: 1.3em;
        font-family: one;
        text-align: center !important;
    }

    h2.h2-assinatura {
        color: white;
        font-family: neutron;
        font-size: 3em;
    }
    
    h3.h3-assinatura {
        color: white;
        font-size: 1.8em;
        font-family: beach;
    }
    
    li.li-assinatura {
        font-family: one;
        text-shadow: 0 0 1em cyan;
        font-size: 1em;
    }

    label.check-termos {
        font-size: 0.9em;
    }

}

@media (min-width: 475.99px) and (max-width: 575.98px) {

}

@media (min-width: 576px) and (max-width: 767.98px) {

}

@media (min-width: 768px) and (max-width: 991.98px) {

}

/* Formatações gerais  */

@font-face {
	font-family: neutron;
	src: url('../fonts/neutron.woff');
}

@font-face {
	font-family: beach;
	src: url('../fonts/beach.woff');
}

@font-face {
	font-family: one;
	src: url('../fonts/one.woff');
}



@keyframes opacidade {
	0% {
        transform: translateX(-50px);
		opacity: 0;;
	}
	
	100% {
        transform: translateX(0px);
		opacity: 1;
	}
}

body {
    background: url('../img/index/bg1.jpg') center 20% ;
}

.bg-nav-custom {
    background: rgb(0, 0, 0, .6);
}

/* Tela de assinatura */



#card-principal {
    background-color: rgb(0, 0, 0, .6);
    border-radius: 20px;
    padding: 20px;
    animation: 1s opacidade forwards;
}

.h2-assinatura {
    color: white;
    font-family: neutron;
    font-size: 3.5em;
}

.h3-assinatura {
    color: white;
    font-size: 2em;
    font-family: beach;
}

li.li-assinatura {
    font-family: one;
    text-shadow: 0 0 1em cyan;
    padding-top: 15px;
}

.carousel-btn {
	--bs-btn-font-size: 1.3rem !important;
	--bs-btn-font-family: one !important;
}

/* Login */

.card{
    --bs-card-bg: rgb(0, 0, 0, .8) !important;
    box-shadow: 0 0 1em red; 
}


a {
    text-decoration: none !important;
  
}

.form-check-input:checked {
    background-color: red !important;
    border-color: red !important;
}


/*  Chamados  */

#btn-filtro {
    font-size: 1.3em;
    font-family: one;
    text-shadow: 0 0 1.5em cyan;
}

#data-hora {
    font-family: one;
}

.label-form {
    background-color: darkred;
    width: 100%;
    margin-top: 10px;
    margin-bottom: 10px;
    padding: 6px;
    color: white;
    border-radius: 10px;
    font-size: 1.1em;
    font-family: 'one';
    font-style: italic;
    letter-spacing: 1px;
}

.titulo-chamado {
    font-family: beach;
    font-size: 1.8em;
    font-weight: 600;
    font-style: italic;
}

.titulo-chat, .titulo-detalhes {
    font-family: one;
    font-size: 2.3em;
    letter-spacing: 1px;
    font-weight: 600;
    font-style: italic;
    
}

#chat {
    height: 400px;
    overflow-y: scroll;
}

.resposta {
    box-shadow: 5px 5px 1em black;;
    background-color: rgb(255, 255, 255, .4);
    border-radius: 15px;
}

.user-resposta {
    font-size: 1.3em;
    font-family: one;
    color: rgb(26, 12, 12);
}

.data-resposta {
    font-size: 1em;
    color: rgb(26, 12, 12);
}

.texto-resposta {
    font-size: 1.6em;
    font-family: 'Courier New', monospace;
    font-weight: bold;
}

.texto-chamado {
    font-size: 1.3em;
    font-family: one;
}

.usuario-chamado {
    font-size: 1.3em;
    font-family: one;
}

.detalhes {
    font-family: 'Courier New', monospace;
    font-size: 1.1em;
}

.label-chamado {
    background-color: darkred;
    width: 100%;
    margin-top: 10px;
    margin-bottom: 10px;
    padding: 6px;
    color: white;
    border-radius: 10px;
    font-size: 1.3em;
    font-family: 'one';
    font-style: italic;
    letter-spacing: 1px;
}


#div_feedback {
    background-color: rgb(0, 0, 0, .6);
    border-radius: 15px;
    padding: 10px;
    padding-top: 30px;
    margin-top: 200px;
}

.h2-feedback {
    font-family: beach;
    font-size: 3em;
    font-style: italic;
    text-shadow: 0 0 1em cyan;
}

.p-feedback {
    font-size: 1.2em;
    font-family: one;
    font-weight: 200;
}

.link_chamados {
    font-family: beach;
    font-size: 1.2em;
    margin-left: 10px;
    color: red;
}

.link_chamados:hover {
    color: azure;
}

#label-modal {
    font-family: one;
    font-size: 1.8em;
    font-weight: 600;
    font-style: italic;
}

#paginacao ul li span {
    font-size: 1.3em !important;
    font-family: one;
}

.pagination {
    --bs-pagination-bg: rgb(0,0,0,.3) !important;
    --bs-pagination-disabled-bg: rgb(0,0,0,.3) !important;
}




#paginacao ul li a {
    font-size: 1.3em;
    color: white;
    font-family: one;
}

#paginacao ul li a:hover {
    font-size: 1.3em;
    color: black;
    font-family: one;
}

#paginacao ul{
    box-shadow: 0 0 1em rgb(235, 232, 232);
}


.caixa-termos {
    background-color: rgb(235, 232, 232, 0.7);
    padding: 10px;
    border-radius: 15px;
    height: 150px;
    overflow-y: scroll
}

.h2-termos {
    font-family: one;
    font-size: 1.5em;
}

.termos {
    font-family: 'Courier New', Courier, monospace;
}

.check-termos {
    font-size: 1em;
}


/*  Botão home  */


#home {
    color: white;
    position: absolute;
    top: 97%;
    left: 93%;
    background-color: rgb(0, 0, 0, .8);
    padding: 20px;
    border-radius: 10px;
    box-shadow: 0 0 1em cyan;
    cursor: pointer;

}

#home a {
    color: aliceblue;
}