* {
 --quick-sign-primary-: #407dbf;
 --quick-sign-warning: #e78071;
}
body {
 font-size: 1.5rem;
 background: grey;
}
.btn-primary {
 background-color: var(--quick-sign-primary-) !important;
 border-color: var(--quick-sign-primary-);
}
.btn-info {
 color: #fff;
}

.card {
 margin-top: 10px;
}
#generator-container {
 margin-bottom: 100px;
}

.mb-3 {
 margin-top: 10px;
}

.options-wrapper.top {
 display: flex;
 justify-content: space-between;
}

.fa-trash-alt:hover {
 color: var(--quick-sign-warning);
 cursor: pointer;
}

.wrapper {
 background: #fff;
 padding: 5px 20px;
 border-radius: 2%;
 margin-top: 20px;
}

.view-hidden {
 display: none;
}

.view-visible {
 display: block;
 padding-top: 15px;
 padding-bottom: 15px;
}

.removeOption {
 cursor: pointer;
}

.addOption {
 cursor: pointer;
}

.addOption:hover {
 color: rgba(59, 59, 175, 0.829);
}

.option-input {
 width: 100%;
 margin-bottom: 15px;
}

.section {
 display: flex;
 justify-content: center;
 align-items: center;
 height: 100vh;
}

.auth-container {
 transition: display 1s ease-in;
}

.card {
 padding: 2rem;
 background-color: #fff;
 margin: 1rem 1.5rem;
 box-shadow: 0 3px 6px rgba(0, 0, 0, 0.16), 0 3px 6px rgba(0, 0, 0, 0.23);
}

.card .card-header {
 margin-bottom: 1rem;
}

.card .card-content {
 margin-bottom: 1rem;
}

.option-group-view {
 display: flex;
 justify-content: space-between;
}

.option-group-view .fas:hover {
 cursor: pointer;
 color: rgb(226, 136, 136);
}

.option-group-view button {
 width: 10%;
}

.option-group-view input {
 width: 80%;
 border: none;
 background-color: rgba(148, 148, 148, 0.15);
 border-radius: 0.2rem;
}

.option-group-view input:focus {
 outline: none;
}

.nav-wrapper {
 display: flex;
 justify-content: space-between;
 padding: 1rem;
}
.error-bar {
 background-color: rgb(240, 169, 142);
 padding: 2rem;
 text-align: center;
 border-radius: 0.5rem;
 display: none;
}

/* Modal styles  start */

.input-view .input {
 margin: 2rem;
}

.input-view input[type="text"],
.input-view textArea {
 width: 100%;
 border: none;
 background-color: rgba(148, 148, 148, 0.15);
 border-radius: 0.2rem;
}

.input-view input[type="text"]:focus,
.input-view textArea:focus {
 outline: none;
}

.btn-block {
 width: 100%;
}

.btn-half {
 width: 48%;
}

.my-form-check {
 display: flex;
 justify-content: space-between;
}

/* Modal styles  end */