.container {
	max-width: 600px;
}
#setting-btn-container {
    flex: 0 0 49.6px;
    max-width: 49.6px;
}
#settings-icon {
	fill: #007bff;
	transition: all 0.5s ease-in;
}
#settings-btn:hover svg {
	fill: #004b9d;
}
#settings-icon.clicked {
	transform: rotate(180deg);
	fill: #000059!important;
}
#settings {
	max-height: 0;
	transition: all 0.5s ease-in;
	overflow-y: hidden;
	visibility: hidden;
    margin-bottom: -1em;
}
#settings.show {
	max-height: 21rem;
	visibility: visible;
    margin-bottom: 0em;
}
#save-success svg {
	fill: rgba(0,0,0,0);
	transition: all 0.5s ease-in;
	max-width: 0;
}
#save-success.show svg {
	fill: rgba(255,255,255,.9);
	margin-left: 0.6rem;
	max-width: 2.5rem;
}
.password {
	font-family: monospace;
}
.copy-img {
	fill: black;
	width: 2rem;
	height: 2rem;
	padding-bottom: 0.4rem;
}
.copy:hover svg {
	fill: #007bff;
}
.copy-alert {
	animation: slide-down 0.3s ease-in-out;
	margin-top: -1rem;
	z-index: -1;
}
.copy-alert.remove {
	animation: slide-up 0.3s ease-in-out;
	margin-top: -4.1rem;
	opacity:0;
}
@keyframes slide-down {
	from {
	  opacity:0;
	  margin-top: -4.1rem;
	}
	to {
	  opacity:1;
	  margin-top: -1rem;
	}
}
@keyframes slide-up {
	from {
	  opacity:1;
	  margin-top: -1rem;
	}
	to {
	  opacity:0;
	  margin-top: -4.1rem;
	}
}
/* bigger area for checkboxes for touch devices */
@media (pointer: coarse) {
	#settings > div > .form-check {
		margin-bottom: 1.5rem;
	}
	#settings.show {
		max-height: 27rem;
	}
}
/* really small screen */
@media screen and (max-width: 410px) {
    h2 {
        font-size: calc(24px + (100vw - 240px) / 21);
    }
    #settings.show {
		max-height: 29.5rem;
	}
    #rangeMaximumId {
        width: 5rem;
    }
}
/* tiny screen */
@media screen and (max-width: 324px) {
    .card {
        width: 100%;
    }
    #reset-btn, #save-btn {
        width: 100%;
    }
    #reset-btn {
        margin-bottom: 0.75rem;
    }
    #settings.show {
		max-height: 32rem;
	}
}
/* ant screen */
@media screen and (max-width: 280px) {
    #settings.show {
		max-height: 50rem;
	}
    label {
        display: block;
        flex: unset!important;
        max-width: 100%!important;
    }
    #charInputId, #passInputId {
        max-width: 75%;
        flex: 0 0 75%;
    }
    #charOutputId, #passOutputId {
        max-width: 25%;
        flex: 0 0 25%;
    }
}