body {
	font-family: "Slussen", sans-serif;
    background-color: #012D1E !important;
}

.btn {
	font-family: "Slussen", Sans-serif;
	font-size: 18px;
	fill: #012D1E;
	color: #012D1E;
	padding: 9px 18px;
    box-shadow: none;
    font-weight: 400 !important;
    cursor: pointer;
    transition: all 0.15s ease-in-out;
    border-radius: 100px;
    border: none;
}

.btn-lg {
	font-size: 20px;
	padding: 18px 35px;
}

.text-primary {
    color: #46B03F !important;
}

.text-secondary {
    color: #FFA224 !important;
}

.link-primary {
    color: #46B03F !important;
    text-decoration-color: rgba(70, 176, 63, .5) !important;
}

.link-primary:hover {
    color: #FFA224 !important;
    text-decoration-color: rgba(255, 162, 36, .5) !important;
}

.link-secondary {
    color: #FFA224 !important;
    text-decoration-color: rgba(255, 162, 36, .5) !important;
}

.link-secondary:hover {
    color: #46B03F !important;
    text-decoration-color: rgba(70, 176, 63, .5) !important;
}

.btn-primary {
	background-color: #46B03F;
	color: #012D1E;
}

.btn-primary:active,
.btn-primary:focus,
.btn-primary:hover {
	background-color: #FFA224 !important;
	color: #ffffff !important;
}

.btn-secondary {
	background-color: #FFA224;
	color: #ffffff;
}

.btn-secondary:active,
.btn-secondary:focus,
.btn-secondary:hover {
	background-color: #46B03F !important;
	color: #012D1E !important;
}

.bg-dark {
	background-color: #012D1E !important;
}

.border-radius{
    border-radius: 50px;
}

.border-white{
    border: 1px solid white;
}

.form-control, 
.form-select,
.form-control:focus, 
.form-select:focus {
    border-radius: 25px;
    padding: 9px 18px;
    background-color: transparent;
    color: white;
    outline: none;
    box-shadow: none;
    border-color: white;
}

.form-control.is-invalid,
.form-select.is-invalid {
    border-color: rgba(var(--bs-danger-rgb), var(--bs-text-opacity)) !important;
}

.form-select {
    --bs-form-select-bg-img: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3e%3cpath fill='none' stroke='%23dee2e6' stroke-linecap='round' stroke-linejoin='round' stroke-width='2' d='m2 5 6 6 6-6'/%3e%3c/svg%3e") !important;
}

select option {
  background-color: white !important;
  color: black !important;
  opacity: 1 !important;
  filter: none !important;
  -webkit-appearance: menulist !important;
  appearance: menulist !important;
}

#char-count {
    font-size: 14px;
    color: #ccc;
    margin-top: 5px;
    transition: color 0.2s ease;
}

#char-count.limit-reached {
    color: #e4032c;
    font-weight: bold;
}

#char-count-team {
    font-size: 14px;
    color: #ccc;
    margin-top: 5px;
    transition: color 0.2s ease;
}

#char-count-team.limit-reached {
    color: #e4032c;
    font-weight: bold;
}

#canvasSizer {
  position: relative;
  max-height: 1440px;
  max-width: 1440px;
  aspect-ratio: 1 / 1;
  overflow: hidden;
  border: 1px solid white;
  border-radius: 25px;
}

#canvasSizer .loading {
  background-color: #ffffff;
  position: absolute;
  width: 100%;
  height: 100%;
  display: block;
  z-index: 9999;
  text-align: center;
  top: 0px;
  left: 0px;
  position: absolute;
  display: flex;
  justify-content: center;
  flex-direction: column;
  -webkit-transition: all 0.25s ease-out;
  -moz-transition: all 0.25s ease-out;
  -ms-transition: all 0.25s ease-out;
  -o-transition: all 0.25s ease-out;
  transition: all 0.25s ease-out;
}

#canvasSizer .loading p {
  margin-bottom: 0;
  margin-top: 5px;
  color: #46B03F;
  font-weight: 800 !important;
}

#canvasSizer .loading i {
  color: #46B03F;
  display: absolute;
}

#bwx-canvas-reset-placeholder {
  display: block;
  margin-top: 10px;
}

#bwx-textarea {
    overflow: hidden;
    resize: none;
    min-height: 80px;
    max-height: 400px;
}


.colors-container {
    width: fit-content;
}

.color-select {
    width: 30px;
    height: 30px;
    display: inline-block;
    border-radius: 50%;
    border: 2px solid black;
}

.color-select.small {
    width: 25px;
    height: 25px;
}

.color-select:not(.selected) {
    border: 2px solid black;
}

.color-select.selected,
.color-select:hover {
    opacity: 1;
}

.color-select.color-white {
    background-color: #ffffff;
}

.color-select.color-orange {
    background-color: #fcb514;
}

.color-select.color-brown {
    background-color: #3e2b2e;
}

.color-select.color-blue {
    background-color: #009de0;
}

.color-select.color-green {
    background-color: #00b140;
}

.color-select.color-red {
    background-color: #f9423a;
}

.color-select.color-black {
    background-color: #000000;
}