body.dark-mode {
    background-color: #13192a;
    color: #efefef;
}
.navbar {
    background-color: #fff;
}
.navbar .nav-link {
    color: #1e1e1e !important;
}
.navbar .navbar-brand {
    color: #1e1e1e !important;
}
.navbar.dark-mode {
    background-color: #030408;
    color: #efefef;
}
.navbar.dark-mode .nav-link {
    color: #efefef !important;
}
.navbar.dark-mode .navbar-brand {
    color: #efefef !important;
}
.card.dark-mode {
    background-color: #1e1e1e;
    border-color: #333;
}
body.dark-mode .btn-primary {
    background-color: #1b3e63;
    border-color: #124274;
}
body.dark-mode .btn-secundary {
    color: #efefef;
    border-color: #989898;
}
body.dark-mode .input-group-text {
    background-color: #34364f;
    color: #efefef;
}
body.dark-mode .form-control {
    background-color: #191a2e;
    color: #efefef;
}
body.dark-mode .modal-content {
    background-color: #040511;
}
body.dark-mode .form-control::placeholder {
    color: #969696; /* Cor do texto do placeholder no modo noite */
}
body.dark-mode .alert-danger {
    background-color: #542d31;
    border-color: #721c24;
    color: #dec2c5;
}
body.dark-mode .card {
    border-color: #333;
}
body.dark-mode .card-header {
    background-color: #1e1e1e;
    border-color: #333;
    color: #efefef;
}
body.dark-mode .card-body {
    background-color: #172343;
    color: #efefef;
}
body.dark-mode .card-footer {
    background-color: rgb(0 0 0 / 18%);
    color: #e0e0e0;
}
.font-size-20 {
    font-size: 20px !important;
}
.font-size-18 {
    font-size: 18px !important;
}
.custom-outline-orange {
    border: 1px solid #ff9800;
    color: #ff9800;
    background-color: transparent;
    transition: background-color 0.3s ease, color 0.3s ease;
}

.custom-outline-orange:hover {
    background-color: #ff9800;
    color: white;
}

.custom-outline-darkgreen {
    border: 1px solid #006400;
    color: #006400;
    background-color: transparent;
    transition: background-color 0.3s ease, color 0.3s ease;
}

.custom-outline-darkgreen:hover {
    background-color: #006400;
    color: white;
}

.custom-outline-red {
    border: 1px solid #ff6347;
    color: #ff6347;
    background-color: transparent;
    transition: background-color 0.3s ease, color 0.3s ease;
}

.custom-outline-red:hover {
    background-color: #ff6347;
    color: white;
}

.custom-outline-purple {
    border: 1px solid #8a2be2;
    color: #8a2be2;
    background-color: transparent;
    transition: background-color 0.3s ease, color 0.3s ease;
}

.custom-outline-purple:hover {
    background-color: #8a2be2;
    color: white;
}
.custom-outline-turquoise {
    border: 1px solid #40e0d0; /* Cor turquesa */
    color: #40e0d0;
    background-color: transparent;
    transition: background-color 0.3s ease, color 0.3s ease;
}

.custom-outline-turquoise:hover {
    background-color: #40e0d0; /* Muda o fundo para turquesa */
    color: white; /* Texto branco no hover */
}
pre {
    overflow: auto;
    background: #ddd;
    padding-left: 10px;
    padding-bottom: 10px;
    padding-top: 10px;
}

.bg-success {
    background-color: #28a745 !important;
}
.bg-warning {
    background-color: #ffc107 !important;
}
.bg-orange {
    background-color: #fd7e14 !important;
}
.bg-danger {
    background-color: #dc3545 !important;
}
.noUi-connect {
    background: #0d6efd; /* Cor Primary do Bootstrap */
}

/* Hover no "thumb" */
.noUi-handle:hover {
    background-color: #d1d6df; /* Cor Primary com hover */
}

/* Barra de fundo */
.noUi-target {
    background: #ddd; /* Cor do fundo */
}

.pomodoro {
    background-color: #2a1313 !important;
    color: #fff;
}

.short-break {
    background-color: #132a19 !important;
    color: #fff;
}

.long-break {
    background-color: #2a2413 !important;
    color: #fff;
}

body.pomodoro .navbar,
body.short-break .navbar,
body.long-break .navbar {
    background-color: #000;
}

body.pomodoro .navbar .nav-link,
body.short-break .navbar .nav-link,
body.long-break .navbar .nav-link,
body.pomodoro .navbar .navbar-brand,
body.short-break .navbar .navbar-brand,
body.long-break .navbar .navbar-brand {
    color: #fff !important;
}

body .list-group-item {
    background-color: #fff;
}
body .list-group-item a {
    color: #000;
    text-decoration: none;
}

body.dark-mode .list-group-item {
    background-color: #2c2f6c;
}
body.dark-mode .list-group-item a {
    color: #fff;
    text-decoration: none;
}
body.dark-mode .result.list-group-item {
    background-color: #bcbcbc;
}
.dropdown-menu.show {
    position: absolute !important;
    left: -115px !important;
}