
/*
 -------------------------------- 
 PVII Responsive Forms Templates
 by Project Seven Development
 www.projectseven.com
 --------------------------------
*/

.p7form-wrapper.light-borders,
.p7form-wrapper.dark-borders {
     padding: 25px;
     border: 1px solid;
}

.p7form-wrapper.rounded {
     border-radius: 5px;
}

.p7form-wrapper.light-borders {
     border-color: rgba(255,255,255,0.72);
}

.p7form-wrapper.dark-borders {
     border-color: rgba(0,0,0,0.72);
}

/*Font-Sizes*/
.p7form-wrapper input,
.p7form-wrapper .control-checkbox,
.p7form-wrapper .control-radio {
     font-size: 100%;
}

.p7form-wrapper textarea {
     font-family: inherit;
     font-size: 110%;
}

.p7form-wrapper select {
     font-size: 110%;
}

.p7form-wrapper label,
.p7form-wrapper p.topper {
     font-size: 90%;
}

.p7form-wrapper #submit-button {
     font-size: 130%;
}

/*Submit Button*/
.p7form-wrapper #submit-button {
     padding: 15px;
}

/*
*************************************
Text, Borders, and background Colors
*************************************
           Light Theme
*/
.p7form-wrapper.light .p7form-input,
.p7form-wrapper.light .p7forms-control-group,
.p7form-wrapper.light textarea {
     color: #000;
     background-color: #FFF;
     border: 1px solid #000;
}

.p7form-wrapper.light .p7forms-control-group.select-list {
     background-color: transparent;
     border: none;
}

.p7form-wrapper.light .p7forms-control-group.select-list .topper {
     color: #FFF;
}

.p7form-wrapper.light .p7form-input:focus,
.p7form-wrapper.light textarea:focus {
     background-color: #222;
     color: #FFF;
     border-color: #999;
}

.p7form-wrapper.light #submit-button {
     border: 1px solid #000;
     background-color: #222;
     color: #FFF;
}

.p7form-wrapper.light #submit-button:hover {
     background-color: #BBB;
     color: #000;
}

.p7form-wrapper.light .p7forms-control-group {
     background-color: #FFF;
     border: 1px solid;
}

.p7form-wrapper.light .control_indicator {
     background-color: #e6e6e6;
}

.p7form-wrapper.light .select select {
     border: 1px solid #000;
     background: #FFF;
     color: #000;
}

.p7form-wrapper.light .select select:hover,
.p7form-wrapper .select select:focus {
     color: #000;
     background: #FFF;
}

/* 
*************************
       Dark Theme 
*************************
*/
.p7form-wrapper.dark .p7form-input,
.p7form-wrapper.dark .p7forms-control-group,
.p7form-wrapper.dark textarea {
     color: #FFF;
     background-color: #171717;
     border: 1px solid #000;
}

.p7form-wrapper.dark .p7forms-control-group.select-list {
     background-color: transparent;
     border: none;
}

.p7form-wrapper.dark .p7forms-control-group.select-list .topper {
     color: #000;
}

.p7form-wrapper.dark .p7form-input:focus,
.p7form-wrapper.dark textarea:focus {
     background-color: #FFF;
     color: #000;
     border-color: #999;
}

.p7form-wrapper.dark #submit-button {
     border: 1px solid #000;
     background-color: #171717;
     color: #FFF;
}

.p7form-wrapper.dark #submit-button:hover {
     background-color: #5A8CB0;
     color: #FFF;
}

.p7form-wrapper.dark .p7forms-control-group {
     background-color: #171717;
     border: 1px solid #000;
}

.p7form-wrapper.dark .control_indicator {
     background-color: #e6e6e6;
}

.p7form-wrapper.dark .select select {
     border: 1px solid #000;
     background-color: #171717;
     color: #FFF;
}

.p7form-wrapper .select select:focus {
     color: #000;
     background: #FFF;
}

/*Labels*/
.p7form-wrapper label,
.p7form-wrapper p.topper,
.p7form-wrapper h3.topper  {
     display: block;
     margin-bottom: 6px;
     margin-top: 24px;
}
.p7form-wrapper p.topper  {
     margin-bottom: 0px;
}
.p7form-wrapper h3.topper {
	font-size: 125%;
}

/*
*************************************
        D O  N O T  E D I T
*************************************
*/

.p7form-wrapper .control-checkbox,
.p7form-wrapper .control-radio {
     font-size: 100%;
}

.p7form-wrapper form div {
     overflow-x: hidden;
}

.p7form-wrapper input,
.p7form-wrapper textarea {
     width: 100%;
}

.p7form-wrapper textarea {
     height: 150px;
     resize: vertical;
}

.p7form-wrapper .p7form-input {
     padding: 15px;
     box-sizing: border-box;
}

.p7form-wrapper .p7form-input:focus {
     outline: none;
}

.p7form-wrapper #submit-button {
     width: 100%;
     box-sizing: border-box;
     cursor: pointer;
     -webkit-transition: all 0.5s ease;
     transition: all 0.5s ease;
}

.p7form-wrapper .p7forms-control-group {
     display: block;
     text-align: left;
	 overflow: hidden;
}

.p7form-wrapper .p7forms-control-group.select-list {
     padding: 0px;
     background-color: transparent;
     border: none;
}
.p7forms-control-group {
	padding-left: 15px;
}
.p7form-wrapper .control {
     position: relative;
     top: 0px;
     display: block;
     margin: 15px 5px;
     padding-left: 30px;
     cursor: pointer;
}

.p7form-wrapper .control input {
     position: absolute;
     z-index: -1;
     opacity: 0;
}

.p7form-wrapper .control_indicator {
     display: block;
     position: absolute;
     top: 0px;
     left: 0;
     width: 24px;
     height: 24px;
}

/* Hover and focus states */
.p7form-wrapper .control:hover input ~ .control_indicator,
.p7form-wrapper .control input:focus ~ .control_indicator {
     background-color: #ccc;
}

/* Checked state */
.p7form-wrapper .control input:checked ~ .control_indicator {
     background-color: #333;
}

.p7form-wrapper.dark .control input:checked ~ .control_indicator {
     background-color: #619BB0;
}

/* Disabled state */
.p7form-wrapper .control input:disabled ~ .control_indicator {
     pointer-events: none;
     opacity: .6;
     background-color: #e6e6e6;
}

/* Check mark */
.p7form-wrapper .control_indicator:after {
     position: absolute;
     display: none;
     content: '';
}

/* Show check mark */
.p7form-wrapper .control input:checked ~ .control_indicator:after {
     display: block;
}

/* Checkbox tick */
.p7form-wrapper .control-checkbox .control_indicator:after {
     top: 4px;
     left: 9px;
     width: 5px;
     height: 10px;
     transform: rotate(45deg);
     border-right: 2px solid #FFF;
     border-bottom: 2px solid #FFF;
}

/* Disabled tick color */
.p7form-wrapper .control-checkbox input:disabled ~ .control_indicator:after {
     border-color: #7b7b7b;
}

/* Radio button inner circle */
.p7form-wrapper .control-radio .control_indicator:after {
     top: 8px;
     left: 9px;
     width: 7px;
     height: 7px;
     background-color: #fff;
}

/* Disabled circle color */
.p7form-wrapper .control-radio input:disabled ~ .control_indicator:after {
     background-color: #7b7b7b;
}

/*Select List*/
.p7form-wrapper .select {
     position: relative;
     display: inline-block;
     margin-bottom: 0px;
     width: 100%;
}

.p7form-wrapper .select select {
     display: inline-block;
     width: 100%;
     cursor: pointer;
     padding: 10px 15px;
     outline: none;
     appearance: none;
     -webkit-appearance: none;
     -moz-appearance: none;
}
.p7form-wrapper .select select::-ms-expand {
 display: none;
}

.p7form-wrapper .select select:disabled {
     opacity: 0.5;
     pointer-events: none;
}

.p7form-wrapper .select_arrow {
     position: absolute;
     top: 70%;
     right: 15px;
     width: 0;
     height: 0;
     pointer-events: none;
     border-style: solid;
     border-width: 8px 5px 0 5px;
     border-color: #7b7b7b transparent transparent transparent;
}

.p7form-wrapper .select select:hover ~ .select_arrow,
.p7form-wrapper .select select:focus ~ .select_arrow {
     border-top-color: #000;
}

.p7form-wrapper .select select:disabled ~ .select_arrow {
     border-top-color: #ccc;
}

.p7form-wrapper .control {
     display: inline-block;
}

/*
*******************
Star Rating Group
*******************
*/

.p7form-wrapper .p7form-rating-wrapper {
     text-align: center;
     margin-bottom: 15px;
}

.p7form-wrapper span.p7form-rating {
     display: inline-block;
     margin-top: -2em;
}

.p7form-wrapper .p7form-rating:not(:checked) > input {
     position: absolute;
     left: -9999px;
     clip: rect(0,0,0,0);
}

.p7form-wrapper .p7form-rating:not(:checked) > label {
     float: right;
     width: 1em;
     padding: 0 2px;
     overflow: hidden;
     white-space: nowrap;
     cursor: pointer;
     font-size: 250%;
     line-height: 1;
     color: #ddd;
     text-shadow: 1px 1px rgba(163,117,18,0.72);
     transition: color linear .3s;
}

.p7form-wrapper .p7form-rating:not(:checked) > label:before {
     content: "\2605 \00a0";
}

.p7form-wrapper .p7form-rating > input:checked ~ label,
.p7form-wrapper .p7form-rating:not(:checked) > label:hover,
.p7form-wrapper .p7form-rating:not(:checked) > label:hover ~ label,
.p7form-wrapper .p7form-rating > input:checked + label:hover,
.p7form-wrapper .p7form-rating > input:checked + label:hover ~ label,
.p7form-wrapper .p7form-rating > input:checked ~ label:hover,
.p7form-wrapper .p7form-rating > input:checked ~ label:hover ~ label,
.p7form-wrapper .p7form-rating > label:hover ~ input:checked ~ label {
     color: gold;
}

/*DARK*/
.p7form-wrapper.dark .p7form-rating > input:checked ~ label,
.p7form-wrapper.dark .p7form-rating:not(:checked) > label:hover,
.p7form-wrapper.dark .p7form-rating:not(:checked) > label:hover ~ label,
.p7form-wrapper.dark .p7form-rating > input:checked + label:hover,
.p7form-wrapper.dark .p7form-rating > input:checked + label:hover ~ label,
.p7form-wrapper.dark .p7form-rating > input:checked ~ label:hover,
.p7form-wrapper.dark .p7form-rating > input:checked ~ label:hover ~ label,
.p7form-wrapper.dark .p7form-rating > label:hover ~ input:checked ~ label {
     color: #171717;
}

.p7form-wrapper .p7form-rating:not(:checked) > label:hover,
.p7form-wrapper .p7form-rating:not(:checked) > label:hover ~ label,
.p7form-wrapper .p7form-rating > input:checked + label:hover,
.p7form-wrapper .p7form-rating > input:checked + label:hover ~ label,
.p7form-wrapper .p7form-rating > input:checked ~ label:hover,
.p7form-wrapper .p7form-rating > input:checked ~ label:hover ~ label,
.p7form-wrapper .p7form-rating > label:hover ~ input:checked ~ label {
     text-shadow: 1px 1px rgba(170,170,170,0.72);
}
 .p7form-wrapper ::-webkit-input-placeholder {
 color: #999;
 opacity: .75;
 font-style: italic;
}
 .p7form-wrapper ::-moz-placeholder {
 color: #999;
 opacity: .75;
 font-style: italic;
}
.p7form-wrapper :-ms-input-placeholder {
 color: #999;
 opacity: .75;
 font-style: italic;
}

/*Rounded Corners*/
.p7form-wrapper.rounded .p7form-input,
.p7form-wrapper.rounded .p7forms-control-group,
.p7form-wrapper.rounded textarea,
.p7form-wrapper.rounded #submit-button,
.p7form-wrapper.rounded .p7forms-control-group,
.p7form-wrapper.rounded .select select {
     border-radius: 5px;
}

.p7form-wrapper.rounded .control_indicator {
     border-radius: 3px;
}

.p7form-wrapper .control-radio .control_indicator,
.p7form-wrapper .control-radio .control_indicator:after {
     border-radius: 100%;
}
