/* dark.css: 👉 light-on-dark */
/* dark.css */
:root {
  --background-color: rgb(33, 33, 33);
  --color: rgb(250, 250, 250);
  --link-color: rgb(0, 188, 212);
  --icon-filter: invert(100%);
  --icon-filter_hover: invert(40%);
  --image-filter: grayscale(50%);
  --main-headline-color: rgb(233, 30, 99);
  --accent-background-color: rgb(0, 188, 212);
  --accent-color: rgb(5, 5, 5);
}

.alert {background-color: rgba(251, 251, 251, .1)}
.triangle{background-color: #383838!important}
.card {--background-color: rgba(251, 251, 251, .1)}
.card .card-header, .card .card-footer{border-color: rgba(251, 251, 251, .1)}
.navbar, .modal-content{background-color: rgb(33, 33, 33)!important}
.navbar-light .navbar-nav .nav-link, .close{color: rgba(251, 251, 251, .5); font-weight: normal!important; transition: .2s ease}
.navbar-light .navbar-nav .nav-link:hover, .close:hover{color: rgba(251, 251, 251, .7);}
.form-outline .form-control~.form-label{color: var(--color)}
.modal-header{border-bottom: 2px solid rgba(251, 251, 251, .1)}
/* Change the white to any color */
/*input:-webkit-autofill,
input:-webkit-autofill:hover, 
input:-webkit-autofill:focus, 
input:-webkit-autofill:active{color: var(--dark)}*/
.form-outline .form-control,
.form-outline .form-control:hover,
.form-outline .form-control:focus,
.form-outline .form-control:active{-webkit-box-shadow: 0 0 0 30px #383838 inset!important; color: var(--color)}
.input-group-text{color: var(--color)}