*, *::before, *::after {
  box-sizing: border-box;
}

html, body {
  background-color: transparent;
  margin: 0;
  padding:0;
  font-family: var(--custom-font);
  color: var(--theme-text);
  font-size: 16px;
}

h1 { font-size: 1.8rem }

main {
    position:relative;
}

::-webkit-scrollbar {
    width:10px;
    background-color: rgba(0,0,0, 0.05);
  }

::-webkit-scrollbar-track {
    background-color: rgba(0,0,0,0);
  }
  
::-webkit-scrollbar-thumb {
    background: var(--custom-color);
  }

img {
  display:block;
  max-width: 100%; 
} 

.bg-transparent { background-color: var(--bg-transparent); } 
.card { background-color: var(--bg-transparent); border:0; } 

input, select, input:focus, .form-control, .form-control:focus, .form-select { background-color: var(--bg-transparent); color: var(--theme-text); border:0; }
.form-control::placeholder { color: var(--theme-text); opacity: 1; }

select option {
    background-color: var(--bg-theme);
    color: var(--theme-text);
  }

.text-sm { font-size: 0.9rem }
.text-lg { font-size: 1.1rem }

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

.bg-realTheme { background-color: var(--bg-theme); color: var(--theme-text); }

.bg-theme { background-color: var(--custom-color); color: var(--custom-color-text); }
.border-theme { border: var(--custom-color) 1px solid }

.btn-theme { background-color: var(--custom-color); color: var(--custom-color-text); border: 0; }
.btn-theme:hover, .btn-theme:focus, .btn-theme:active { background-color: var(--custom-color); color: var(--custom-color-text); filter: var(--custom-darker); }

.btn-secondary-theme { background-color: var(--custom-color); color:#FFF; border: 0; }
.btn-secondary-theme:hover, .btn-secondary-theme:focus, .btn-secondary-theme:active { filter: var(--custom-darker); }

.custom-text { color: var(--custom-color) }
.text-secondary { color: var(--theme-color) }

.alert.alert-top { 
    position:fixed;
    top: 25px;
    left: 50px;
    right: 50px;
    z-index: 9999;
 }

 .some-padding { padding:20px; }