@import url('https://fonts.googleapis.com/css2?family=Athiti:wght@300;400&family=Belleza&display=swap');
/* @import url('https://fonts.googleapis.com/css2?family=Source+Sans+Pro:wght@200&display=swap');*/ 
@import url("https://cdn.jsdelivr.net/npm/bootstrap-icons@1.5.0/font/bootstrap-icons.css");
:root{
   --cor-banner: #FFFFFF;
   --cor-bg-principal: #efeded;
   --cor-bg-realce: #f8f0ff;
   --cor-realce: #88CE2F;
   --cor-menu-fundo: #31391b;
   
   --cor-botao-fundo: #2daffb;
   --cor-botao-fundo-hover: #778040;
}

body{
   background-color: var(--cor-bg-principal);
   font-family: 'Athiti', sans-serif;
   font-weight: 400;
   
}

.container{
   margin-top: 20px;   
   background-color: white;
   padding: 10px;
   box-shadow: 0 2px 5px 0 rgb(0 0 0 / 16%), 0 2px 10px 0 rgb(0 0 0 / 12%);
   border-radius: 10px;
}



logo {
    position: absolute;
    font-size: 2rem;
    text-transform: uppercase;
    font-weight: 900;
    line-height: 0;
    margin: 0;
    padding: 0;
    z-index: 3;
}

.sticky-wrapper {
    position: relative;
    z-index: 100;
    width: 100%;
}

@supports ((position: -webkit-sticky) or (position: sticky)) {
  .sticky-top {
    position: -webkit-sticky;
    position: sticky;
    top: 0;
    z-index: 1020;
  }
}

.cardInicio{
   border: solid 1px gray;
   padding: 10px;
   margin: 20px 20px 100px 20px;
   
   border-radius: 3px;
   box-shadow: 0 2px 5px 0 rgb(0 0 0 / 16%), 0 2px 10px 0 rgb(0 0 0 / 12%);
   width: 120px;
}
.cardInicio h3{
   font-size: 0.95rem;
   text-align: center;
   font-weight: bold;
}
.cardInicio h4{
   font-size: 0.85rem;
   text-align: center;
}

.smaller{
   font-size: 0.6rem;
   font-style: italic;
   color: #cf3030;
}

/* ---------------------------------------------------- */
/* Sweep To Top */
.hvr-sweep-to-top a{
   text-decoration: none;
   color: black;
}
.hvr-sweep-to-top {
  display: inline-block;
  vertical-align: middle;
  -webkit-transform: perspective(1px) translateZ(0);
  transform: perspective(1px) translateZ(0);
  box-shadow: 0 0 1px rgba(0, 0, 0, 0);
  position: relative;
  -webkit-transition-property: color;
  transition-property: color;
  -webkit-transition-duration: 0.3s;
  transition-duration: 0.3s;
}
.hvr-sweep-to-top:before {
  content: "";
  position: absolute;
  z-index: -1;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background: #2098D1;
  -webkit-transform: scaleY(0);
  transform: scaleY(0);
  -webkit-transform-origin: 50% 100%;
  transform-origin: 50% 100%;
  -webkit-transition-property: transform;
  transition-property: transform;
  -webkit-transition-duration: 0.3s;
  transition-duration: 0.3s;
  -webkit-transition-timing-function: ease-out;
  transition-timing-function: ease-out;
}
.hvr-sweep-to-top:hover, .hvr-sweep-to-top:focus, .hvr-sweep-to-top:active {
  color: white;
}
.hvr-sweep-to-top:hover:before, .hvr-sweep-to-top:focus:before, .hvr-sweep-to-top:active:before {
  -webkit-transform: scaleY(1);
  transform: scaleY(1);
}


/* ---------------------------------------------------------
             menu
------------------------------------------------------------ */
.navbar{
   background-color: var(--cor-banner);
   padding-left: 10px;
   box-shadow: 0 2px 5px 0 rgb(0 0 0 / 16%), 0 2px 10px 0 rgb(0 0 0 / 12%);

}

.navbar .navbar-nav .nav-link {
    color: #000000;
    font-size: 1.1em;    
}
.navbar .navbar-nav .nav-link:hover, .dropdown-item:hover{
    color: var(--cor-botao-fundo);   
    
}

@media only screen and (min-width: 960px) {
  .dropdown-hover:hover .dropdown-hover-menu {
    display: block;
    margin-top: 0;
  }
  .dropdown-hover:hover .dropdown-toggle::after {
    border-bottom: 0.3em solid;
    border-top: 0;
  }
}
.dropdown-hover.show .dropdown-toggle::after {
  border-bottom: 0.3em solid;
  border-top: 0;
}

.dropdown-menu{
  background-color: var(--cor-bg-principal); 
   -webkit-box-shadow: 0 2px 5px 0 rgb(0 0 0 / 16%), 0 2px 10px 0 rgb(0 0 0 / 12%);
  box-shadow: 0 2px 5px 0 rgb(0 0 0 / 16%), 0 2px 10px 0 rgb(0 0 0 / 12%);
}

.dropdown-menu .dropdown-item:hover{
    background-color: var(--cor-bg-principal); 
}


/* ---------------------------------------------------------
             Login
------------------------------------------------------------ */
.login-card {
    border: 0;
    border-radius: 27.5px;
    box-shadow: 0 10px 30px 0 rgb(172 168 168 / 43%);
    overflow: hidden;
}

.footer-link {
    position: relative;
    bottom: 2rem;
    text-align: center;
    width: 100%;
}

/* ---------------------------------------------------------
             títulos e parágrafos
------------------------------------------------------------ */
.titulo-pagina{
   font-size: 1.5rem;
   padding-bottom: 20px;
}

.subtitulo{
   font-size: 1.2rem;
   font-style: italic;
}
/* ---------------------------------------------------------
             cards
------------------------------------------------------------ */
.card{
   margin-top: 10px;
   box-shadow: 4px 4px 5px grey;
}

/* ---------------------------------------------------------
             botões
------------------------------------------------------------ */
.button, .btn {
  padding: 5px 15px;
  font-size: 0.9rem;
  text-align: center;
  cursor: pointer;
  outline: none;
  color: #fff;
  background-color: var(--cor-botao-fundo);
  border: none;
  border-radius: 15px !important;
   
  -webkit-box-shadow: 0 2px 5px 0 rgb(0 0 0 / 16%), 0 2px 10px 0 rgb(0 0 0 / 12%);
  box-shadow: 0 2px 5px 0 rgb(0 0 0 / 16%), 0 2px 10px 0 rgb(0 0 0 / 12%);
}

.button:hover, .btn:hover {
   color: #fff;
   -webkit-box-shadow: 0 2px 10px 0 rgb(0 0 0 / 16%), 0 2px 10px 0 rgb(0 0 0 / 42%);
   box-shadow: 0 2px 10px 0 rgb(0 0 0 / 16%), 0 2px 10px 0 rgb(0 0 0 / 42%);
}

.button:active, .btn:active {
  
  /*box-shadow: 3px 0px 0px gray;*/
  transform: translateY(1px);
}


/* ---------------------------------------------------------
             divs e forms
------------------------------------------------------------ */
.modal-lg .modal-content{
   min-height: 400px;
}

#divEditarModulo, #divEditarQuestoes, #divEditarDisciplina{
   position: absolute;
   width: 95%;
   height: 90%;
   display: none;
   z-index: 10;
   background-color: rgba(255,255,255,0.9);
   border: solid 2px gray;
   border-radius: 5px;
   box-shadow: 2px 2px 2px grey;
   padding: 10px;
   top: 10px;
}

/* ------------------------------------------------------
    datatable
  ------------------------------------------------------ */
table.dataTable tbody tr td {
   max-height: 50px;
   max-width: 90px;
   overflow: hidden;
   text-overflow: ellipsis;
   white-space: nowrap;   
}


@media (max-width: 500px) {
  .form-check-label{
   font-size: 3vw; 
  } 
}
@media (min-width: 501px) and (max-width:800px) {
  .form-check-label{
   font-size: 1.5vw; 
  } 
}