.theme-brown {
    /* Dark brown theme */
    --theme-bg: #282828;
    --theme-card: #3c3836;
    --theme-label: #a89984;
    --theme-input-bg: #282828;
    --theme-input-border: #181818;;
    --theme-input-color:#b8bb26;
    --theme-p: #a89984;
    --theme-div: #a89984;
    --theme-main-text: #ebdbb2;
    --theme-sub-text: #bdae93;
    --theme-textarea-bg: #282828;
    --theme-output-border: #181818;
    --theme-output-color: #fabd2f;
    --theme-btn: #fe8019;
    --theme-footer-text: #458588;
    --theme-switch-color: #8ec07c;
}

.theme-blue {
    /* Dark blue theme white:#f8f8f2*/
    --theme-bg: #282a36;
    --theme-card: #44475a;
    --theme-label: #6272a4;
    --theme-input-bg: #282828;
    --theme-input-border: #181818;;
    --theme-input-color: #f1fa8c;
    --theme-p: #6272a4;
    --theme-div: #6272a4;
    --theme-purple: #bd93f9;
    --theme-main-text: #abb2bf;
    --theme-sub-text: #6272a4;
    --theme-textarea-bg: #282a36;
    --theme-output-border: #181818;
    --theme-output-color: #ff79c6;
    --theme-btn: #50fa7b;
    --theme-footer-text: #ffb86c;
    --theme-switch-color: #8be9fd;
}


body {
    background-color: var(--theme-bg);
}

label {
    color: var(--theme-sub-text);
}

a, 
a:hover {
    color: var(--theme-input-color);
    text-decoration: none;
}

li {
    color: var(--theme-btn);
}

p {
    color: var(--theme-sub-text);
}

div {
    color: #a89984;
}

h1, h2, h3, h4, h5 {
    color: var(--theme-main-text);
}

h2 {
    color: var(--theme-main-text);
}

hr {
    border: solid;
    border-color: black;
}

input {
    background-color: #282828; 
    border: #181818; 
    color: #b8bb26; 
    font-family: Consolas,Menlo,"courier new",monospace;
}

textarea {
    background-color: var(--theme-bg); 
    border: #181818; 
    color: var(--theme-output-color); 
    font-family: Consolas,Menlo,"courier new",monospace;
}

button {
    background-color: var(--theme-btn);
    border-color: var(--theme-btn);
}

button:hover {
    background-color: var(--theme-btn);
    border-color: var(--theme-btn);
}

img {
    background: var(--theme-bg);
}

.span {
    color: var(--theme-sub-text);
}

.d-flex {
    background: var(--theme-bg);
    color: var(--theme-sub-text);
}

.shadow, 
.shadow-lg {
    background: var(--theme-card);
}

.footer-text,
.footer-text:hover {
    color: var(--theme-footer-text);
    text-decoration: none;
}

.modal-content {
    background: var(--theme-card);
}

.btn:hover, .btn:focus, .btn:active, .btn.active, .open>.dropdown-toggle.btn {
    background-color: var(--theme-btn) !important;
    border-color: var(--theme-btn) !important;
    color: black !important;
}

.btn,
.btn-info {
    background-color: var(--theme-btn) !important;
    border-color: var(--theme-btn) !important;
    color: black;
}


.btn:hover,
.btn-info:hover {
    background-color: var(--theme-btn);
    color: black;
    }

.btn-info,
.btn-info:active,
.btn-info:visited, {
    background-color: var(--theme-btn);
}

    .btn-info:focus {
    background-color: var(--theme-btn);
    border-color: var(--theme-btn);
    color: black;
    }

#tool-tab {
    background-color: var(--theme-card-color);
}

#results {
    color: var(--theme-output-color);
    font-family: Consolas,Menlo,"courier new",monospace;
}

#email-input,
#input,
#output {
    background-color: var(--theme-bg); 
    border: #181818; 
    color: var(--theme-input-color); 
    font-family: Consolas,Menlo,"courier new",monospace;
}

#email-output,
#output{
    background-color: var(--theme-bg); 
    border: #181818; 
    color: var(--theme-output-color); 
    font-family: Consolas,Menlo,"courier new",monospace;
}



/* Address Edit page styles */
.form-switch .form-check-input {
    height: 24px;
    width: 48px;
}
.form-switch .form-check-input:focus {
    border-color: rgba(0, 0, 0, 0.25);
    outline: 0;
    box-shadow: 0 0 0 0 rgba(0, 0, 0, 0);
    background-image: url("data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' viewBox='-4 -4 8 8'%3e%3ccircle r='3' fill='rgba(0,0,0,0.25)'/></svg>");
}
.form-switch .form-check-input:checked {
    background-color: var(--theme-switch-color);
    border: none;
    background-image: url("data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' viewBox='-4 -4 8 8'%3e%3ccircle r='3' fill='rgba(255,255,255,1.0)'/></svg>");
}

#slider::-moz-range-thumb { 
  -moz-appearance: none;
  width: 18px;
  height: 18px;
  border-radius: 10px;
  color: black;
  background-color: var(--theme-switch-color);
  overflow: visible;
  cursor: pointer;
}

.slider .track {
    -fx-background-color: linear-gradient(to right, red 0%, red 50%, -fx-base 50%, -fx-base 100%);
}

.btn-info:hover {
    }
    .btn-info,
    .btn-info:active,
    .style='background-color: #282828; border: #181818; color: #fabd2f; font-family: Consolas,Menlo,"courier new",monospace;'btn-info:visited, {
        background-color: #fe8019;
    }

    .btn-info:focus {
    background-color: yellow;
    border-color: yellow;
    color: black;
    }

/* Exif Page styles */
  .file-upload {
  background-color: #ffffff;
  width: 600px;
  margin: 0 auto;
  padding: 20px;
}

.file-upload-btn {
  width: 100%;
  margin: 0;
  color: #ebdbb2;
  background: #ebdbb2;
  border: none;
  padding: 10px;
  border-radius: 4px;
  border-bottom: 4px solid #15824B;
  transition: all .2s ease;
  outline: none;
  text-transform: uppercase;
  font-weight: 700;
}

.file-upload-btn:hover {
  background: #fb4934;
  color: #fb4934;
  transition: all .2s ease;
  cursor: pointer;
}

.file-upload-btn:active {
  border: 0;
  transition: all .2s ease;
}

.file-upload-content {
  display: none;
  text-align: center;
}

.file-upload-input {
  position: absolute;
  margin: 0;
  padding: 0;
  width: 100%;
  height: 100%;
  outline: none;
  opacity: 0;
  cursor: pointer;
}

.image-upload-wrap {
  background-color: var(--theme-bg);
  margin-top: 0px;
  border: 4px dashed var(--theme-card);
  position: relative;
}

.image-dropping,
.image-upload-wrap:hover {
  border: 4px dashed var(--theme-main-text);
}

.image-title-wrap {
  padding: 0 15px 15px 15px;
  color: #fb4934;
}

.drag-text {
  text-align: center;
}

.drag-text h3 {
  font-weight: 100;
  text-transform: uppercase;
  color: #bdae93;
  padding: 60px 0;
}

.file-upload-image {
  max-height: 200px;
  max-width: 200px;
  margin: auto;
  padding: 20px;
}

.remove-image {
  width: 200px;
  margin: 0;
  color: #fff;
  background: #cd4535;
  border: none;
  padding: 10px;
  border-radius: 4px;
  border-bottom: 4px solid #b02818;
  transition: all .2s ease;
  outline: none;
  text-transform: uppercase;
  font-weight: 700;
}

.remove-image:hover {
  background: #c13b2a;
  color: #ffffff;
  transition: all .2s ease;
  cursor: pointer;
}

.remove-image:active {
  border: 0;
  transition: all .2s ease;
}