/*--------------------------------------------------------------
# General
--------------------------------------------------------------*/

@font-face {
  font-family: 'Chelos';
  src: url('../../fonts/Chelos\ Free.ttf') format('truetype');
}

body,
html {
  overflow: hidden;
}

body {
  font-family: "Open Sans", sans-serif;
  color: #3A3838;
  -webkit-tap-highlight-color: transparent;
  -webkit-touch-callout: none;
}

strong {
  color: #3A3838;
}

a {
  color: #3d85c6;
  text-decoration: none;
}

a:hover {
  color: #6fa8dc;
  text-decoration: none;
}

h1,
h2,
h3,
h4,
h5,
h6 {
  font-family: "Raleway", sans-serif;
}

/*--------------------------------------------------------------
# Preloader
--------------------------------------------------------------*/
#preloader,
#preloader-viagens,
#preloader-destinos,
#preloader-listagens {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  z-index: 9999;
  overflow: hidden;
}

#preloader {
  background: #fff;
}

#preloader:before,
#preloader-viagens:before,
#preloader-destinos:before,
#preloader-listagens:before {
  content: "";
  position: fixed;
  top: calc(50% - 30px);
  left: calc(50% - 30px);
  border: 6px solid #5B509E;
  border-top-color: #f7f8f9;
  border-bottom-color: #f7f8f9;
  border-radius: 50%;
  width: 60px;
  height: 60px;
  -webkit-animation: animate-preloader 1s linear infinite;
  animation: animate-preloader 1s linear infinite;
}

#preloader:before {
  border-top-color: #fff;
  border-bottom-color: #fff;
}

@-webkit-keyframes animate-preloader {
  0% {
    transform: rotate(0deg);
  }

  100% {
    transform: rotate(360deg);
  }
}

@keyframes animate-preloader {
  0% {
    transform: rotate(0deg);
  }

  100% {
    transform: rotate(360deg);
  }
}

/*--------------------------------------------------------------
# Disable aos animation delay on mobile devices
--------------------------------------------------------------*/
@media screen and (max-width: 768px) {
  [data-aos-delay] {
    transition-delay: 0 !important;
  }
}

/*--------------------------------------------------------------
# Header
--------------------------------------------------------------*/

@media (min-width: 992px) {
  #main {
    margin-left: 100px;
  }
}

/*--------------------------------------------------------------
# Navigation Menu
--------------------------------------------------------------*/

/**
* Mobile Navigation 
*/

.top-bar {
  position: fixed;
  background-color: #fff;
  width: 100%;
  height: 60px;
  border-bottom: 0.5px solid #D9D9D9;
  z-index: 999;
  display: flex;
  justify-content: space-between;
  align-items: center;
}

.logo-box {
  display: flex;
  align-items: center;
}

#logo-light,
#logo-dark {
  height: 25px;
  margin-left: 20px;
}

#trip-viewer-text {
  font-size: 30px;
  margin-top: 10px;
  margin-left: 7px;
  font-family: Chelos;
  color: #5859a7;
}

.icons-box {
  display: flex;
  align-items: center;
  justify-content: center;
}

.icon-buttons {
  cursor: pointer;
  width: 30px;
  height: 30px;
  font-size: 30px;
  margin: 0 7px 0 7px;
}

#profile-icon {
  display: flex;
  border-radius: 100%;
}

/*--------------------------------------------------------------
# Hero Section
--------------------------------------------------------------*/
#hero {
  width: 100%;
  height: 100vh;
  background: url("https://firebasestorage.googleapis.com/v0/b/trip-viewer-tcc.appspot.com/o/config%2Fbackgrounds%2Fhome-light.jpg?alt=media&token=9547a59f-264c-4929-95a7-670464646ad9") top center no-repeat;
  background-size: cover;
  background-position: 50% 50%;
  position: relative;
  overflow: hidden;
}

@media (min-width: 992px) {
  #hero {
    padding-left: 160px;
  }
}

#hero h1 {
  margin: 0;
  font-size: 64px;
  font-weight: 700;
  line-height: 56px;
  color: #4F5051;
}

#hero p {
  color: #4F5051;
  margin: 15px 0 0 0;
  font-family: "Poppins", sans-serif;
}

#hero p span {
  color: #5859a7;
  letter-spacing: 1px;
}

#hero {
  margin-top: 30px;
}

#hero .social-links a {
  font-size: 24px;
  display: inline-block;
  color: #4F5051;
  line-height: 1;
  margin-right: 20px;
  transition: 0.3s;
}

#hero .social-links a:hover {
  color: #5859a7;
}

/*--------------------------------------------------------------
# Sections General
--------------------------------------------------------------*/
section {
  padding: 60px 0;
  overflow: hidden;
}

.section-title {
  text-align: center;
  padding-bottom: 30px;
}

.section-title h2 {
  font-size: 32px;
  font-weight: bold;
  text-transform: uppercase;
  margin-bottom: 20px;
  padding-bottom: 20px;
  position: relative;
  color: #4F5051;
}

.section-title h2::before {
  content: "";
  position: absolute;
  display: block;
  width: 120px;
  height: 1px;
  background: #ddd;
  bottom: 1px;
  left: calc(50% - 60px);
}

.section-title h2::after {
  content: "";
  position: absolute;
  display: block;
  width: 40px;
  height: 3px;
  background: #5859a7;
  bottom: 0;
  left: calc(50% - 20px);
}

.section-title p {
  margin-bottom: 0;
}

@-webkit-keyframes animate-loading {
  0% {
    transform: rotate(0deg);
  }

  100% {
    transform: rotate(360deg);
  }
}

@keyframes animate-loading {
  0% {
    transform: rotate(0deg);
  }

  100% {
    transform: rotate(360deg);
  }
}

/*--------------------------------------------------------------
# Footer
--------------------------------------------------------------*/
#footer {
  position: fixed;
  bottom: 0;
  background: #f7f8f9;
  color: #4F5051;
  font-size: 14px;
  text-align: center;
  width: 100%;
  padding: 10px 0;
}

.atribuicoes {
  cursor: pointer;
}

.atribuicoes:hover {
  color: #666768;
}

.atribuicoes-icon {
  font-size: 10px;
}

#footer h3 {
  font-size: 36px;
  font-weight: 700;
  position: relative;
  font-family: "Poppins", sans-serif;
  padding: 0;
  margin: 0 0 15px 0;
}

#footer p {
  font-size: 15;
  font-style: italic;
  padding: 0;
  margin: 0 0 40px 0;
}

#footer .social-links {
  margin-bottom: 20px;
  margin-top: -20px;
}

#footer .social-links a {
  font-size: 18px;
  display: inline-block;
  background: #5859a7;
  color: #fff;
  line-height: 1;
  padding: 8px 0;
  margin-right: 4px;
  border-radius: 50%;
  text-align: center;
  width: 36px;
  height: 36px;
  transition: 0.3s;
}

#footer .social-links a:hover {
  background: #5859a7;
  color: #fff;
  text-decoration: none;
}

#footer .copyright {
  margin: 0 0 5px 0;
}

#footer .credits {
  font-size: 13px;
}

.pessoa-img {
  width: 36px;
  height: 36px;
}

.message-container {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  width: 450px;
  height: auto;
  background: #fff;
  border-radius: 10px;
  text-align: center;
  box-shadow: 0 2px 6px rgba(0, 0, 0, 0.3);
  display: flex;
  justify-content: center;
  align-items: center;
  padding: 30px;
  overflow-wrap: break-word;
}

.message-text-container {
  width: 100%;
  font-size: 18px;
  line-height: 1.5;
}

.message-title {
  font-size: 24px;
  font-weight: 700;
  margin-bottom: 20px;
}

.error-message {
  margin-top: 10px;
  font-size: 18px;
  color: #666;
}

@media (max-width: 520px) {
  .message-container {
    width: 90%;
    height: auto;
  }
}

/* ---------- Box Principal ---------- */
.content-box {
  box-shadow: 0 2px 6px rgba(0, 0, 0, 0.3);
  display: flex;
  flex-direction: column;
  overflow-wrap: break-word;
  color: #272829;
  width: 100%;
  background-color: rgba(255, 255, 255, 0.70);
  height: 100vh;
  position: fixed;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  border-radius: 0;
  justify-content: center;
  align-items: center;
  text-align: center;
  padding: 20px;
  box-sizing: border-box;
}

#index-logged-title {
  margin-top: 0px;
}

/* ---------- Ícones Nav Bar ---------- */

/* ---------- Título ---------- */

.index-title {
  font-size: 25px;
  color: #4F5051;
  border-bottom: 15px;
  margin-bottom: 5px;
}

#trip-view-title {
  font-size: 20px;
  border-bottom: 15px;
  margin-bottom: 5px;
}

#index-logged-title {
  margin-top: -15px;
}

/* ---------- Login ---------- */
.login-box {
  margin-top: 45px;
  margin-bottom: 45px;
}

.login-item {
  padding: 6px;
  height: 40px;
  width: 200px;
  color: #4F5051;
  border: 0.5px solid #D9D9D9;
  border-radius: 2px;
  background: #f7f8f9;
  border-radius: 5px;
}

.login-item:hover,
.login-item:focus {
  background: #f0f1f2;
}

/* ---------- Minhas Viagens ---------- */
.userList-box,
.logged-menu {
  margin-top: 30px;
  margin-bottom: 20px;
}

.content-list {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: flex-start;
  height: 350px;
  width: 300px;
  background: #f7f8f9;
  overflow-y: auto;
  overscroll-behavior-y: contain;
  border: 0.5px solid #D9D9D9;
  border-radius: 5px;
  overflow-x: hidden;
}

@media (max-width: 600px) and (min-height: 780px) {
  .content-list {
    height: 500px;
  }
}

@media (max-width: 600px) and (max-height: 779px) {
  .content-list {
    height: 450px;
  }
}

@media (max-width: 600px) and (max-height: 719px) {
  .content-list {
    height: 400px;
  }
}

@media (max-width: 600px) and (max-height: 660px) {
  .content-list {
    height: 350px;
  }
}

@media (max-width: 600px) and (max-height: 660px) {
  .content-list {
    height: 300px;
  }
}

#settings-account-container {
  margin-top: 30px;
  margin-bottom: 30px;
}

#settings-account-picture {
  width: 75px;
  height: 75px;
  border-radius: 50%;
  border: 1px solid #D9D9D9;
  background: #f7f8f9;
  display: flex;
  justify-content: center;
  align-items: center;
  flex-shrink: 0;
  flex-grow: 0;
}

#settings-account {
  display: flex;
  align-items: center;
  justify-content: flex-start;
  min-height: 100px;
  width: 300px;
  background: #f7f8f9;
  border: 0.5px solid #D9D9D9;
  border-radius: 5px;
  padding: 10px;
}

#delete-account-container {
  width: 300px;
  margin-bottom: 20px;
  margin-top: 5px;
}

#settings-delete-account {
  text-align: end;
}

#settings-account-text {
  margin-left: 10px;
  flex-grow: 1;
  /* allow text container to grow */
  overflow-wrap: break-word;
  word-break: break-word;
  /* add word-break for better control */
}

#settings-account-name,
#settings-account-email {
  text-align: left;
  word-wrap: break-word;
  /* ensure word-wrap is applied */
}

#settings-account-name {
  font-weight: bold;
  font-size: 18px;
}

#logged-menu {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  justify-content: flex-start;
  width: 300px;
  background: #f7f8f9;
  overflow-y: auto;
  overscroll-behavior-y: contain;
  border: 0.5px solid #D9D9D9;
  border-radius: 5px;
  overflow-x: hidden;
}

.logged-menu-item {
  margin: 15px;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
}

/* ---------- Visualizar Viagem ---------- */
.trip-view-box {
  margin-top: 30px;
  margin-bottom: 10px;
  width: 300px;
}

#trip-view-input {
  margin-bottom: 20px;
  background: #f7f8f9;
  border: 0.5px solid #D9D9D9;
  padding: 3px;
  width: 300px;
  text-align: center;
  border-radius: 5px;
  color: #4F5051;
}

.trip-view-text {
  font-size: 12px;
  margin-top: -10px;
  margin-bottom: 10px;
  display: none;
}

.red {
  color: red;
}

#sem-viagens,
#sem-destinos,
#sem-listagens {
  display: flex;
  width: 100%;
  height: 60px;
  align-items: center;
  justify-content: center;
  text-align: left;
  margin-top: 15px;
}

.user-data-icon:hover,
.user-data-icon:focus,
.index-buttons:hover,
.custom-nav-toggle:hover,
.logged-menu-item:hover,
.back:hover {
  color: #444242;
}

.add {
  height: 20px;
  width: 20px;
  margin-left: 5px;
  margin-right: 10px;
  top: 10px;
  margin-bottom: 2px;
  cursor: pointer;
}

.back {
  height: 40px;
  width: 40px;
  position: fixed;
  cursor: pointer;
  left: 0;
  top: 0;
}

#new-viagem,
#new-destino,
#new-listagem {
  margin-top: 20px;
}

@media (max-height: 896px) {

  .back {
    position: relative;
    margin-bottom: 20px;
  }

  .content-box {
    top: 46%;
  }

  .login-box {
    margin-top: 30px;
    margin-bottom: 30px;
  }
}

@media (max-height: 745px) {
  .content-box {
    top: 47%;
  }
}

.user-data-item {
  width: 300px;
  border-bottom: 0.5px solid #D9D9D9;
  padding: 15px;
  display: flex;
  text-align: left;
}

.user-data-item-text {
  flex: 1 1 70%;
}

.user-data-item-title {
  font-weight: bold;
}

.user-data-item-date {
  font-size: 13px;
  color: #737473;
}

.user-data-icon {
  margin-right: 4px;
  margin-left: 4px;
  height: 30px;
  width: 30px;
}

.logged-menu-buttons {
  height: 30px;
  width: 30px;
  margin-right: 5px;
}

.trip-data-icons {
  display: flex;
  flex: 1 1 30%;
  justify-content: flex-end;
  align-items: center;
  cursor: pointer;
}

.modal {
  display: none;
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background-color: rgba(255, 255, 255, 0.8);
}

.modal-content {
  position: absolute;
  width: 500px;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  background-color: #fff;
  padding: 20px;
  text-align: center;
  display: flex;
  flex-direction: column;
}

.modal-text {
  flex-grow: 1;
  margin-bottom: 20px;
}

@media (max-width: 600px) {
  .modal-content {
    width: 90%;
  }
}

.close {
  float: right;
  font-size: 28px;
  font-weight: bold;
}

.close:hover,
.close:focus {
  text-decoration: none;
  cursor: pointer;
}

.button-box {
  text-align: right;
}

@media (max-width: 480px) {
  .button-box {
    text-align: center;
  }
}

.button-box-formatted {
  text-align: right;
  margin: 0;
  padding: 0;
  border: 0;
  font-size: 100%;
  font: inherit;
  vertical-align: initial;
  margin: 2em -2em -2em;
  padding: 1.5em 2em
}

.btn-format {
  margin: 5px;
}

#cancelar,
#apagar {
  margin-left: 20px;
}

.btn-theme {
  background: #5859a7;
  color: #fff;
}

.btn-theme-mobile {
  background: #5859a7;
  color: #fff;
}

.btn-theme:hover {
  background: #505197;
  color: #fff;
}

.demora-carregamento {
  margin-top: 30px;
  padding: 10px;
}

.carregar-novamente{
  margin-top: 20px;
  cursor: pointer;
}