@import url("https://fonts.googleapis.com/css2?family=Kalam&display=swap");
header {
  background: linear-gradient(to right, #b31217, #e52d27);
  min-height: 12vh;
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-top: 10px;
  padding: 10px;
  border-top-left-radius: 15px;
}
header .container-theme-login {
  min-height: 10vh;
  min-width: 35%;
  display: flex;
  flex-direction: column;
  align-items: center;
}
header .container-theme-login .container-login {
  flex: 1;
  min-width: 35%;
  display: flex;
  justify-content: space-evenly;
  align-items: center;
}
header .container-theme-login .container-login i {
  color: #1F0E3D;
  text-shadow: 0 0.5px 1px white;
}
header .container-theme-login .container-theme {
  display: flex;
  align-items: center;
}
header .container-theme-login .container-theme label {
  color: white;
  margin-right: 10px;
}
header .container-theme-login .container-theme #icon-theme {
  color: white;
  cursor: pointer;
  font-size: 30px;
}
header .logo img {
  width: 200px;
  height: 50px;
  -o-object-fit: contain;
     object-fit: contain;
}
header input {
  border: none;
  border-radius: 10px;
  padding: 0 10px;
  max-width: 7.5rem;
  margin-right: 10px;
}
header button {
  width: 4rem;
  padding: 2px;
  font-size: 15px;
  font-weight: 500;
  border: none;
  background-color: #1F0E3D;
  color: white;
  border-radius: 5px;
}
header button:hover {
  background-color: white;
  color: #1F0E3D;
}

.darkMode header {
  transition: background-color 1s;
  background: linear-gradient(90deg, #525051 0%, black 75%, black 100%);
}
.darkMode header .container-login i {
  color: #DC143C;
  text-shadow: 0 0.5px 1px white;
}
.darkMode header button {
  background-color: #DC143C;
}

@media (max-width: 1050px) {
  header {
    flex-direction: column;
  }
}
.main-container p {
  margin-top: 2.5rem;
  text-align: justify;
  color: #1F0E3D;
}

.darkMode .main-container {
  background-color: lightgray;
  transition: background-color 1s;
}
.darkMode .main-container p {
  color: #DC143C;
}

footer {
  transition: background-color 1s;
  background: linear-gradient(to right, #b31217, #e52d27);
  min-height: 10vh;
  padding: 10px;
  border-bottom-right-radius: 15px;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
}
footer p {
  color: white;
  font-size: 16px;
}

.darkMode footer {
  transition: background-color 1s;
  background: linear-gradient(90deg, black 0%, black 25%, #525051 100%);
}

.container-login-page {
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  margin: auto;
  padding: 2rem 4rem;
  /* background: $TemaBgGradient; */
  background: linear-gradient(90deg, #1f0e3d 0%, #1f0e3d 35%, #270b4a 100%);
  border-top-left-radius: 15px;
  border-bottom-right-radius: 15px;
}
.container-login-page .main-title {
  margin-bottom: 2rem;
}
.container-login-page .main-title h1, .container-login-page .main-title i {
  color: white;
}
.container-login-page .form-signin {
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
}
.container-login-page .form-signin button {
  background-color: #b31217;
}

nav {
  transition: background-color 1s;
  background-color: #1F0E3D;
  display: flex;
  justify-content: space-between;
  align-items: center;
}
nav .active {
  background-color: #4CAF50;
}
nav a {
  text-decoration: none;
  color: white;
}
nav .logout {
  padding-right: 10px;
}
nav #icon-theme {
  transition: all 1s;
}

.darkMode nav {
  transition: background-color 1s;
  background-color: #DC143C;
}
.darkMode nav .active {
  background-color: gold;
  text-shadow: 0px 0px 5px black;
}

@media (max-width: 1050px) {
  nav {
    justify-content: space-around;
  }
}
main {
  transition: background-color 1s;
  background-color: white;
  display: flex;
  flex-direction: column;
  align-items: center;
  min-height: 66vh;
}
main .msgSucess {
  height: 5vh;
  background-color: tomato;
}
main .main-title {
  display: flex;
  margin-top: 2rem;
  align-items: baseline;
}
main .main-title h1 {
  color: #1F0E3D;
  font-size: 2rem;
  margin-left: 10px;
}
main .main-title i {
  color: #1F0E3D;
  font-size: 2rem;
  margin-right: 10px;
}
main .main-container {
  max-width: 60%;
}

.darkMode main {
  background-color: lightgray;
  transition: background-color 1s;
}

.btn-form {
  border: none;
  background-color: #1F0E3D;
  color: white;
  border-radius: 5px;
  width: 5.5rem;
  height: 2.5rem;
  border: 1px solid #1F0E3D;
}
.btn-form:hover {
  background-color: white;
  color: #1F0E3D;
}

.form-control {
  border: 1px solid #1F0E3D;
}

.form-select {
  border: 1px solid #1F0E3D;
}

.form-control:focus {
  outline: none !important;
  border: 1px solid #1F0E3D;
  box-shadow: 0 0 10px #1F0E3D;
}

.form-select:focus {
  outline: none !important;
  border: 1px solid #1F0E3D;
  box-shadow: 0 0 10px #1F0E3D;
}

.darkMode form .form-label {
  color: #DC143C;
}
.darkMode form .form-select {
  color: #DC143C;
}
.darkMode form #inputEmailList, .darkMode form #start-date, .darkMode form #end-date {
  background: #FFB6C1;
}
.darkMode form .btn-form {
  background-color: #DC143C;
}
.darkMode form .btn-form:hover {
  background-color: #FFB6C1;
  color: #DC143C;
}

.agendados-container {
  display: flex;
  flex-direction: column;
  margin-top: 20px;
  width: 100%;
}

.page-item a {
  color: #1F0E3D;
}

.darkMode th {
  color: #DC143C;
}
.darkMode .page-item a {
  background-color: #FFB6C1;
  color: #DC143C;
}

.sticky-container {
  max-width: 50%;
  position: relative;
}

.sticky-outer {
  display: flex;
  padding-top: 92.5925926%;
  position: relative;
  margin: auto;
  width: 100%;
}

.sticky {
  position: absolute;
  top: -100%;
  left: 0%;
  right: -125%;
  bottom: -95%;
}

/* Shadow behind the sticky note */
.sticky:before {
  box-shadow: -2px 2px 15px 0 rgba(0, 0, 0, 0.5);
  background-color: rgba(0, 0, 0, 0.25);
  content: "";
  width: 90%;
  left: 5px;
  height: 75%;
  position: absolute;
  top: 30%;
}

/* The sticky note itself */
.sticky-content {
  background: linear-gradient(135deg, #ffff88 81%, #ffff88 82%, #ffff88 82%, #ffffc6 100%);
  width: 100%;
  height: 100%;
  display: flex;
  justify-content: center;
  align-items: center;
  font-family: "Kalam", cursive;
  font-size: 1.1rem;
  -webkit-clip-path: url(#stickyClip);
          clip-path: url(#stickyClip);
}

.container-sticky {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 100%;
  height: 100%;
}

.container-inner {
  width: 50%;
}

.conteudo-container {
  display: flex;
  flex-direction: column;
  max-width: 75%;
  justify-content: space-between;
  text-align: justify;
  max-height: 60vh;
}
.container-form-teste .content-buttons {
  min-width: 100%;
  display: flex;
  justify-content: flex-start;
  align-items: center;
}
.container-form-teste .content-buttons button {
  margin: 10px;
}
.container-form-teste textarea {
  transition: background-color 1s;
  margin: 20px 0;
  border: none;
  background-color: white;
  resize: none;
  text-align: justify;
  padding: 10px;
}
.container-form-teste textarea.active {
  border: 1px solid #1f0e3d;
  border-radius: 5px;
}
.container-form-teste .btn {
  border: none;
}
.container-form-teste #btnEdit {
  background-color: #1F0E3D;
}
.container-form-teste #btnSend {
  background-color: #4CAF50;
  opacity: 0;
  transition: opacity 0.25s;
  pointer-events: none;
}
.container-form-teste #btnCancel {
  background-color: #e52d27;
  transition: opacity 1.25s;
  opacity: 0;
  pointer-events: none;
}

.darkMode .conteudo-container textarea {
  background-color: lightgray;
  color: #DC143C;
}
.darkMode .conteudo-container #btnEdit {
  background-color: #DC143C;
}
.darkMode .conteudo-container #btnSend {
  background-color: #ffaa33;
}
.darkMode .conteudo-container #btnCancel {
  background-color: #880808;
}
.darkMode .conteudo-container textarea.active {
  border: 1px solid #DC143C;
}

* {
  margin: 0;
  padding: 0;
  font-family: "Poppins";
}

body {
  background: pink;
  min-width: 60%;
}

.container {
  width: 62%;
}

.darkMode body {
  background-color: #899499;
}
.darkMode input, .darkMode select, .darkMode textarea, .darkMode option {
  transition: background-color 1s;
  background: #FFB6C1;
}
.darkMode .main-title i, .darkMode .main-title h1 {
  color: #DC143C;
}/*# sourceMappingURL=style.css.map */

.container-form-teste {
    display: flex;
    height: 50vh;
    width: 50%;
    flex-direction: column;
}
.container-sticky{
    width: 100%;

}