form .flex-row {column-gap: 2%; align-items: flex-start; justify-content: center;}
form .flex-row .form-field {width: 32%; box-sizing: border-box;}
form .flex-row .check-label {width: 32%; box-sizing: border-box;}
form .flex-row .drop-form-item {width: 32%;}

label {color: #000;}
input, textarea,select {background: none; outline: 0; border:0; width: 100%; box-sizing: border-box; padding: 15px; display: inline-block; font-size: 24px; color: #002f52; font-family: inherit; transition: 0.3s;}
textarea {height: 250px;}
button { outline: 0; border: 0; display: block !important;}

.form-btns {display: flex; column-gap: 1%;}
.subtitle p {color: #16d038;text-align: center;padding: 20px 0;}

.check-label {padding: 25px;border-radius: 10px;position: relative;border: 1px solid #eee;margin-bottom: 15px;background: #fff;user-select: none;height: 200px; cursor: pointer; transition: 0.3s;}
.check-label label {display: block;line-height: 28px; font-size: 24px; transition: 0.3s;}
.check-label.active-check {background: #16d038;}
.check-label.active-check label {color: #fff;}
.check-label span {position: absolute; right: 25px; bottom: 25px; color: #a8a8a8; font-size: 18px; transition: 0.3s;}
.check-label.active-check span {color: #fff;}
.check-label input {width: 30px; position: absolute; top: 25px; right: 25px; cursor: pointer; border: 1px solid #eee; overflow: hidden; border-radius: 100%; overflow: hidden; -webkit-appearance: none; height: 30px; padding: 0; transition: 0.3s; background: #eee;}
.check-label input::before {content: ''; display: block; position: relative; width: 5px; height: 3px; transform: rotate(45deg); background: #fff; right: -7px;top: -15px; transition: 0.3s;}
.check-label input::after {content: ''; display: block; position: relative; width: 15px; height: 3px; transform: rotate(-45deg); background: #fff; right: -8px;top: -15px; transition: 0.3s;}

.check-label.active-check input {background: #fff; border: 1px solid #fff0;}
.check-label.active-check input::before {top: 15px; background: #002f52;}
.check-label.active-check input::after {top: 10px; background: #002f52;}

#success-message {background: #000;text-align: center; line-height: 40px; margin: 10px 0;}
#success-message p {color: #fff;text-align: center;}

#systemMessage {background: #000; color: #fff;text-align: center; line-height: 40px; margin: 10px 0;}

.highlight-form-field {
    background: #ec4e64;
    margin: 12px 0 8px 8px;
    width: 95%;
    border-radius: 5px;
    padding: 8px;
}

.fieldMessage {background: #ec4e64; text-align: center; color: #fff;}

.drop-form-item {width: 100%;}
.drop-form-item label {margin-bottom: 20px; display: block;}

.price-item {position: relative; width: 100%; display: block; margin-bottom: 20px;}
.price-item select {width: 100%; border: 1px solid #000;}
.price-item::before {content: '';background: #444;width: 10px;height: 2px;position: absolute;top: 50%;right: 10px;transform: translateY(-50%) rotate(-35deg); z-index: 99;}
.price-item::after {content: '';background: #444;width: 10px;height: 2px;position: absolute;top: 50%;right: 18px;transform: translateY(-50%) rotate(35deg); z-index: 99;}

.form-field {position: relative; margin-bottom: 15px; width: 100%; padding-top: 20px;border: 2px solid #070000;border-radius: 20px; transition: 0.3s;}
.form-field .form-input-img {position: absolute; top: 50%; transform: translateY(-50%); right: 0; user-select: none; pointer-events: none; height: 15px; width: auto; opacity: 0.6; color: #000 !important; transition: 0.3s;}
.form-field label {position: absolute; top: 20px; transform: translateY(-50%); left: 15px; color: #a8a8a8; user-select: none; pointer-events: none; opacity: 0.6; font-size: 18px !important; transition: 0.3s;}
.form-field textarea {height: 51px; transition: 0.3s;}
.form-field.active-focus {border: 2px solid #16d038;}
/* .form-field.active-focus label {opacity: 1; top: 20px; color: #a8a8a8;} */
/* .form-field.active-focus textarea {height: 200px;} */
.form-field.active-focus .form-input-img {opacity: 1;}

.qty-item {width: 110px; position: relative;}
.qty-item input {width: 100%; text-align: center; padding: 10px;font-size: 24px; border-color: #959595; user-select: none;}
.qty-item span {user-select: none; cursor: pointer; height: 30px; width: 30px; border: 1px solid #a3a3a3; border-radius: 55px;}
.qty-item .minus {position: absolute; left: 0px; top: 50%; transform: translateY(-50%);}
.qty-item .minus::after {content: '';position: absolute; left: 50%; top: 50%; transform: translate(-50%,-50%); background: #003b68; width: 10px; height: 2px;}
.qty-item .plus {position: absolute; right: 0px; top: 50%; transform: translateY(-50%);}
.qty-item .plus::before {content: '';position: absolute; left: 50%; top: 50%; transform: translate(-50%,-50%) rotate(90deg); background: #003b68; width: 10px; height: 2px;}
.qty-item .plus::after {content: '';position: absolute; left: 50%; top: 50%; transform: translate(-50%,-50%); background: #003b68; width: 10px; height: 2px;}
