/*********************** UI ************************* *
 *  1. Buttons
 *  2. Forms
 *      2.1. Input
 *      2.2. Placeholder
 *      2.3. Misc Form Elements
 *  3. Misc UI Elements
****************************************************/

/******************* 1. Buttons ********************/

.btn {
    font-weight: 700;
    font-size: 16px;
    line-height: 1.4;
    color: #151011;
    background-color: #63C7CC;
    border: #63C7CC;
    border-radius: 50px;
    padding: 19px 34px;
    -webkit-transition: all 0.2s ease;
    -moz-transition: all 0.2s ease;
    -o-transition: all 0.2s ease;
    transition: all 0.2s ease;
    display: inline-flex;
    align-items: center;
}
.btn img {
    margin-left: 10px;
    -webkit-transition: all 0.2s ease;
    -moz-transition: all 0.2s ease;
    -o-transition: all 0.2s ease;
    transition: all 0.2s ease;
}
.btn:active,
.btn:hover,
.btn:focus {
    background-color: #151011;
    color: #fff;
    border-color: #151011;
    box-shadow: none;
}
.nav-item .btn {
    font-weight: 600;
    background-color: #151011;
    color: #fff;
    padding: 13px 26px;
}
.btn.reversed:hover,
.btn.reversed:focus,
.btn.reversed:active,
.nav-item .btn:hover,
.nav-item .btn:focus,
.nav-item .btn:active {
    background-color: #63C7CC;
    color: #151011;
}
.btn.btn-link {
    background-color: transparent;
    text-decoration: none;
}
.btn.btn-link:hover,
.btn.btn-link:focus {
    color: #63C7CC;
}
.btn.reversed {
    background-color: #fff;
    color: #151011;
    box-shadow: 1px 2px 3px rgba(21, 16, 17,0.5);
}

/******************** 2. Forms *********************/

/**** 2.1. Input ****/

.input,
.textarea,
.select {}
.input:focus,
.textarea:focus {}

/**** 2.2. Placeholder ****/

.input::-ms-input-placeholder {
    color: #aaa !important;
}
.input::placeholder {
    color: #aaa;    
}
.textarea::-ms-input-placeholder {
    color: #aaa !important;
}

.textarea::placeholder {}

.form-control {
    background: #FFFFFF;
    border: 1px solid #D0D0D0;
    border-radius: 15px;
    min-height: 58px;
}
.form-control:focus {
    border-color: #63C7CC;
    box-shadow: 0 0 0 .25rem rgba(99, 199, 204, 0.25);
}
form hr {
    border-top: 1px solid rgba(21, 16, 17, 0.15);
    opacity: 1;
    margin: 0 0 20px 0;
}
.form-check {
    padding-left: 0;
}
.form-check-input {
    width: 1.625em;
    height: 1.625em;
    border: 1px solid rgba(21, 16, 17,0.25);
    padding: 12px;
}
.form-check-input:focus {
    box-shadow: none;
    border-color: #151011;
}
.form-check-input:checked {
    background-color: #151011;
    border-color: #151011;
}
.terms-box > p {
    display: inline-flex;
}
.form-check-input:focus-visible {
    border: none;
}
input[type="text"].hasDatepicker {
    background-image: url('../../img/calendar.svg');
    background-size: auto 50%;
    background-position: 90% center;
}
/* Form Control for Country/State/City */
.chevron-icon {
    padding-top: 15px;
    background-image: url("../../img/chevron-down.png");
    background-repeat: no-repeat;
    background-position: right .75rem center;
    background-size: 11px 7px;
}
.wpcf7-acceptance .wpcf7-list-item {
    margin: 0;
}
.wpcf7-acceptance .form-check-label {
    margin-top: -28px;
}
/* Radio Button Switch */
.form-switch {

}
.form-switch label:not(.form-check-label) {
    margin: 0;
}
.form-switch .wpcf7-form-control.wpcf7-radio {
    position: relative;
}
.form-switch .wpcf7-list-item {
    margin: 0;
}
.form-check-label {
    margin-bottom: 0.5rem;
}
.form-switch .wpcf7-form-control-wrap .wpcf7-form-control.wpcf7-radio {
    display: flex;
    align-items: center;
}
.form-switch .wpcf7-list-item input[type='radio'] {
    opacity: 0;
    position: absolute;
    z-index: 9;
    top: .7em;
    left: 1em;
}
.form-switch input[type="radio"] + span::before {
    display: flex;
    width: auto;
    height: auto;
    padding: 19px 68px;
    vertical-align: middle;
    cursor: pointer;
    border: 1px solid #D0D0D0;
    text-align: center;
    content: '';
}
.form-switch input[type="radio"]:checked + span::before {
    color: #fff;
    border-color: #151011;
}
/* On mouse-over, add background color */
.form-switch .wpcf7-list-item.first input[type="radio"] + span::before {
    content: "Yes";
}
.form-switch .wpcf7-list-item.last input[type="radio"] + span::before {
    content: "No";
}
.form-switch .wpcf7-list-item input[type="radio"]:checked + span::before {
    background-color: #151011;
    transition: background 0.5s linear, border 0.5s linear;
    -webkit-transition: background 0.5s linear, border 0.5s linear;
    border-radius: 15px;
}
.form-switch .wpcf7-list-item.first input[type="radio"] + span::before {
    border-top-left-radius: 15px;
    border-bottom-left-radius: 15px;
    border-right: 0;
    margin-right: -8px;
}
.form-switch .wpcf7-list-item.last input[type="radio"] + span::before {
    border-top-right-radius: 15px;
    border-bottom-right-radius: 15px;
    border-left: 0;
}

.form-control::placeholder {}

.wpcf7-password {
    max-width: 90%;
    background-color: transparent;
    color: #fff;
    border: none;
    border-bottom-color: currentcolor;
    border-bottom-style: none;
    border-bottom-width: medium;
    border-bottom: 1px solid #fff;
    padding-bottom: 15px;
}
.mg-photos .wpcf7-submit {
    position: absolute;
    opacity: 0;
    margin-left: -999%;
}
.codedropz-upload-handler {
    background: rgba(255, 255, 255,1);
    border: 1px dashed rgba(0, 0, 0,0.2);
    border-radius: 15px;
}
.codedropz-upload-inner {
    position: relative;
}
.codedropz-upload-inner::before {
    position: absolute;
    content: "";
    background-image: url( '../../img/upload-rounded.png' );
    background-repeat: no-repeat;
    width: 20px;
    height: 20px;
    top: 0;
    left: 20%;
}
/**** 2.3. Misc Form Elements ****/
label {
    margin-left: 15px;
}
/*************** 3. Misc UI Elements ****************/
header ul,
footer ul,
.special-deals ul,
.tier-card ul {
    list-style: none;
    margin: 0;
    padding: 0;
}
a {
    color: #63C7CC;
    font-size: 16px;
    font-weight: 400;
    line-height: 18px;
    text-decoration: none;
    -webkit-transition: all 0.5s ease;
    -moz-transition: all 0.5s ease;
    -o-transition: all 0.5s ease;
    transition: all 0.5s ease;
}
.ratio {
	height: 100%;
}
footer a {
    color: #fff;
}
.how-to-join-container a:hover,
.how-to-join-container a:focus,
a.cd-upload-btn,
a:hover,
a:focus {
    color: rgba(99, 199, 204,0.5);
    text-decoration: none;
}
.how-to-join-container a {
    font-weight: 600;
    color: #151011;
    text-decoration: underline;
}