/*==================================================================
Form Wrappers
===================================================================*/
.msp-form,
.msp-form * {
-webkit-box-sizing: border-box;
-moz-box-sizing: border-box;
box-sizing: border-box;
}
.msp-form {
line-height: 1.231;
font-weight: 400;
}
.msp-form .section {
padding: 10px 0 16px;
position: relative;
}
/*==================================================================
Browser Styling Reset
===================================================================*/
.msp-form .msp-input,
.msp-form .msp-textarea,
.msp-form input[type="button"],
.msp-form input[type="submit"],
.msp-form input[type="search"] {
-webkit-tap-highlight-color: transparent;
-webkit-tap-highlight-color: rgba(0, 0, 0, 0);
-webkit-appearance: none;
-moz-appearance: none;
appearance: none;
-webkit-border-radius: 0;
border-radius: 0;
}
.msp-form input[type="search"]::-webkit-search-decoration,
.msp-form input[type="search"]::-webkit-search-cancel-button,
.msp-form input[type="search"]::-webkit-search-results-button,
.msp-form input[type="search"]::-webkit-search-results-decoration {
display: none;
}
/*==================================================================
Prevent user selection. For usability purposes
===================================================================*/
.msp-form .radio,
.msp-form .button,
.msp-form .checkbox,
.msp-form .msp-select .arrow,
.msp-form .switch > label,
.msp-form .ui-slider .ui-slider-handle {
-webkit-touch-callout: none;
-webkit-user-select: none;
-khtml-user-select: none;
-moz-user-select: none;
-ms-user-select: none;
user-select: none;
}
/*==================================================================
Input General Styles
===================================================================*/
.msp-form label,
.msp-form input,
.msp-form select,
.msp-form textarea {
color: #192538;
outline: none;
}
/*==================================================================
Input Animations
===================================================================*/
.msp-form .radio,
.msp-form .tooltip,
.msp-form .checkbox,
.msp-form .msp-input,
.msp-form .notification,
.msp-form .msp-textarea,
.msp-form .msp-select {
-webkit-transition: all 0.15s ease-in-out;
-moz-transition: all 0.15s ease-in-out;
-ms-transition: all 0.15s ease-in-out;
-o-transition: all 0.15s ease-in-out;
transition: all 0.15s ease-in-out;
-webkit-border-radius: 0;
-moz-border-radius: 0;
-ms-border-radius: 0;
-o-border-radius: 0;
border-radius: 0;
outline: none;
}
.msp-form .input-link,
.msp-form .panel-heading,
.msp-form .section-divider span,
.msp-form .msp-select {
-webkit-transition: all 0.2s ease-in-out;
-moz-transition: all 0.2s ease-in-out;
-ms-transition: all 0.2s ease-in-out;
-o-transition: all 0.2s ease-in-out;
transition: all 0.2s ease-in-out;
}
/*===============================================
Form Dividers
================================================= */
.msp-form .spacer {
border-top: 1px solid #eee;
margin-top: 10px;
margin-bottom: 10px;
display: block;
height: 0;
}
/*==================================================================
General Input Styling
===================================================================*/
.msp-form .radio,
.msp-form .option,
.msp-form .checkbox {
cursor: pointer;
}
.msp-form .msp-option { /* 一覧画面のcheckboxをセンタリング */
margin: 0;
padding: 0;
}
.msp-form .field {
/*padding: 20px 0;field-iconの位置がずれるのでpaddingを入れてはいけない*/
display: block;
position: relative;
}
.msp-form .field-icon i {
color: #BBB;
position: relative;
}
.msp-form .field-label {
display: block;
margin-bottom: 5px;
font-size: 1.6rem;
font-weight: bold;
}
.msp-form .field-label em {
color: #e74c3c;
font-size: 14px;
font-style: normal;
display: inline-block;
margin-left: 4px;
position: relative;
top: 3px;
}
.msp-form .msp-input,
.msp-form .msp-textarea,
.msp-form .msp-select {
position: relative;
vertical-align: top;
border: 1px solid #ccc;
border-radius: 4px;
display: -moz-inline-stack;
display: inline-block;
*display: inline;
outline: none;
height: 30px;
font-size: 0.9em;
*zoom: 1;
}
.msp-form .msp-input,
.msp-form .msp-textarea {
padding: 2px 10px;
width: 100%;
}
.msp-form .msp-select {
padding: 0 6px;
}

.msp-form .msp-input-sm {
height: 30px;
font-size: 1.3rem;
width: 100%;
}

.msp-form .msp-input-md {
height: 38px;
font-size: 1.5rem;
width: 100%;
}

.msp-form .msp-input-lg {
height: 46px;
font-size: 1.8rem;
width: 100%;
}

.msp-form .msp-input-huge {
height: 50px;
position: relative;
border-radius: 6px;
width: 100%;
font-size: 1.6rem;
}

.msp-form .msp-select option {
background: #fff;
}
.msp-form select[disabled],
.msp-form .msp-select[disabled] {
color: #aaa !important;
}
.msp-form .msp-readonly {
border: none;
}
.msp-form .msp-readonly:focus {
border: none !important;
border-color: transparent !important;
}
/*==================================================================
 Form Textarea
===================================================================*/
.msp-form .msp-textarea {
resize: none;
line-height: 19px;
overflow: auto;
max-width: 100%;
height: 96px;
}
/*==================================================================
Form Inputs:hover state
-===================================================================*/
.msp-form .msp-input:hover,
.msp-form .msp-textarea:hover,
.msp-form .msp-select:hover,
.msp-form .file .msp-file:hover + .msp-input {
border-color: #888;
}
/*==================================================================
Form Inputs:focus state
===================================================================*/
.msp-form .msp-input:focus,
.msp-form .msp-textarea:focus,
.msp-form .msp-select:focus {
color: #3c3c3c;
background: #fff;
border: 1px solid #999;
outline: none;
}
.msp-form .msp-select:focus {
z-index: 10;
z-index: 20\9;
}
.msp-form .msp-textarea:focus {
height: 120px;
}
.msp-form .msp-select:focus {
z-index: 10;
z-index: 20\9;
}
.msp-form .msp-input:focus ~ .field-icon i,
.msp-form .msp-textarea:focus ~ .field-icon i {
color: #999;
}
.msp-form .file .msp-file:focus + .msp-input {
border-color: #999;
}
.msp-form .msp-select:focus + .arrow {
color: #999;
}
/*==================================================================
Radio/Checkboxes
-===================================================================*/
.msp-form .option {
position: relative;
padding-right: 15px;
display: inline-block;
vertical-align: middle;
}
.msp-form .option > input {
position: absolute;
height: inherit;
width: inherit;
opacity: 0;
left: 0;
}
.msp-form .checkbox,
.msp-form .radio {
cursor: pointer;
position: relative;
margin-right: 2px;
background: #fff;
display: inline-block;
border: 2px solid #ddd;
height: 21px;
width: 21px;
top: 4px;
}
.msp-form .checkbox:before,
.msp-form .radio:before {
content: '';
display: none;
}
.msp-form input:checked + .checkbox:before,
.msp-form input:checked + .radio:before {
display: block;
}
.msp-form .checkbox:before {
position: absolute;
top: 3px;
left: 3px;
width: 9px;
height: 5px;
border: solid #7FB649;
border-width: 0 0 3px 3px;
-webkit-transform: rotate(-45deg);
-moz-transform: rotate(-45deg);
-ms-transform: rotate(-45deg);
-o-transform: rotate(-45deg);
transform: rotate(-45deg);
}
.msp-form input:checked + .checkbox,
.msp-form input:checked + .radio {
border: 2px solid #ddd;
}
.msp-form .radio {
-webkit-border-radius: 20px;
-moz-border-radius: 20px;
-o-border-radius: 20px;
border-radius: 20px;
}
.msp-form .radio:before {
margin: 5px;
width: 7px;
height: 7px;
background: #7FB649;
-webkit-border-radius: 10px;
-moz-border-radius: 10px;
-o-border-radius: 10px;
border-radius: 10px;
}
/*==================================================================
Switches
===================================================================*/
.msp-form .switch {
cursor: pointer;
position: relative;
padding-right: 10px;
display: inline-block;
margin-bottom: 5px;
height: 26px;
}
.msp-form .switch > label {
cursor: pointer;
display: inline-block;
position: relative;
height: 25px;
width: 58px;
color: #fff;
font-size: 10px;
font-weight: bold;
line-height: 20px;
text-align: center;
background: #D7D7D7;
border: 2px solid #D7D7D7;
text-transform: uppercase;
font-family: Helvetica, Arial, sans-serif;
-webkit-transition: 0.3s ease-out;
-moz-transition: 0.3s ease-out;
-o-transition: 0.3s ease-out;
transition: 0.3s ease-out;
}
.msp-form .switch > label + span {
display: inline-block;
padding-left: 5px;
position: relative;
top: -7px;
}
.msp-form .switch > label:before {
content: attr(data-off);
position: absolute;
top: 1px;
right: 3px;
width: 33px;
}
.msp-form .switch > label:after {
content: "";
margin: 1px;
width: 19px;
height: 19px;
display: block;
background: #fff;
}
.msp-form .switch > input {
-webkit-appearance: none;
position: absolute;
width: inherit;
height: inherit;
opacity: 0;
left: 0;
top: 0;
}
/*==================================================================
Switch:focus state
-===================================================================*/
.msp-form .switch > input:focus {
outline: none;
}
.msp-form .switch > input:focus + label {
color: #fff;
border-color: #C7C7C7;
background: #C7C7C7;
}
.msp-form .switch > input:focus + label:after {
background: #fff;
}
/*==================================================================
Switch:checked state
===================================================================*/
.msp-form .switch > input:checked + label {
border-color: #999;
background: #999;
padding-left: 33px;
color: white;
}
.msp-form .switch > input:checked + label:before {
content: attr(data-on);
left: 1px;
top: 1px;
}
.msp-form .switch > input:checked + label:after {
margin: 1px;
width: 19px;
height: 19px;
background: white;
}
/*==================================================================
Switch:checked:focus state
-===================================================================*/
.msp-form .switch > input:checked:focus + label {
background: #555;
border-color: #555;
}
/* Round Style*/
.msp-form .switch-round > label {
-webkit-border-radius: 13px;
-moz-border-radius: 13px;
-o-border-radius: 13px;
border-radius: 13px;
}
.msp-form .switch-round > label + span {
top: -2px;
}
.msp-form .switch-round > label:before {
width: 33px;
}
.msp-form .switch-round > label:after {
width: 19px;
color: #D7D7D7;
content: "\2022";
font: 20px/20px Times, Serif;
-webkit-border-radius: 13px;
-moz-border-radius: 13px;
-o-border-radius: 13px;
border-radius: 13px;
}
.msp-form .switch-round > input:checked + label {
padding-left: 33px;
}
.msp-form .switch-round > input:checked + label:after {
color: #999;
}
/*==================================================================
Input:disabled state
===================================================================*/
.msp-form .button[disabled],
.msp-form .state-disabled .button,
.msp-form input[disabled] + .radio,
.msp-form input[disabled] + .checkbox,
.msp-form .switch > input[disabled] + label {
cursor: default;
opacity: 0.5;
}
.msp-form .msp-input[disabled],
.msp-form .msp-textarea[disabled],
.msp-form .msp-select[disabled],
.msp-form .file .msp-file[disabled] + .msp-input,
.msp-form .file .msp-file[disabled]:hover + .msp-input {
background-color: #f0f0f0;
cursor: default;
color: #ccc;
opacity: 0.7;
}
.msp-form input[disabled] ~ .field-icon i,
.msp-form textarea[disabled] ~ .field-icon i,
.msp-form .msp-select[disabled] + .arrow {
opacity: 0.4;
}
/*==================================================================
Input Icons
===================================================================*/
.msp-form .append-icon,
.msp-form .prepend-icon {
top: 0;
left: 0;
display: inline-block;
vertical-align: top;
position: relative;
width: 100%;
}
.msp-form .append-icon .field-icon,
.msp-form .prepend-icon .field-icon {
top: 0;
z-index: 4;
width: 46px;/*元42px*/
height: 46px;/*元42px*/
color: inherit;
line-height: 46px;/*元38px*/
position: absolute;
text-align: center;
-webkit-transition: all 0.5s ease-out;
-moz-transition: all 0.5s ease-out;
-ms-transition: all 0.5s ease-out;
-o-transition: all 0.5s ease-out;
transition: all 0.5s ease-out;
pointer-events: none;
}
.msp-form .append-icon-huge .field-icon,
.msp-form .prepend-icon-huge .field-icon {
width: 50px;
height: 50px;
line-height: 50px;
}
.msp-form .append-icon .field-icon i,
.msp-form .prepend-icon .field-icon i {
position: relative;
font-size: 14px;
}
.msp-form .prepend-icon .field-icon {
left: 0;
}
.msp-form .append-icon .field-icon {
right: 0;
}
.msp-form .prepend-icon > input,
.msp-form .prepend-icon > textarea {
padding-left: 40px;
}
.msp-form .append-icon > input,
.msp-form .append-icon > textarea {
padding-right: 36px;
padding-left: 10px;
}
.msp-form .append-icon > textarea {
padding-right: 36px;
}

.msp-form .prepend-icon > .msp-input-huge {
padding-left: 44px;
}
.msp-form .append-icon > .msp-input-huge {
padding-right: 44px;
padding-left: 16px;
}

/*==================================================================
Input Tooltips
===================================================================*/
.msp-form .tooltip {
position: absolute;
z-index: -1;
opacity: 0;
color: #fff;
width: 184px;
left: -9999px;
top: auto;
font-size: 11px;
font-weight: normal;
background: #333333;
-webkit-transition: margin 0.6s, opacity 0.6s;
-moz-transition: margin 0.6s, opacity 0.6s;
-ms-transition: margin 0.6s, opacity 0.6s;
-o-transition: margin 0.6s, opacity 0.6s;
transition: margin 0.6s, opacity 0.6s;
}
.msp-form .tooltip > em {
padding: 12px;
font-style: normal;
display: block;
position: static;
}
.msp-form .tooltip:after {
content: '';
position: absolute;
}
.msp-form .msp-input:focus + .tooltip,
.msp-form .msp-textarea:focus + .tooltip {
opacity: 1;
z-index: 999;
}
/*==================================================================
Tooltip - Left
===================================================================*/
.msp-form .tip-left {
top: 1px;
margin-right: -20px;
}
.msp-form .tip-left:after {
top: 12px;
left: 100%;
border-left: 8px solid #333333;
border-top: 8px solid transparent;
border-bottom: 8px solid transparent;
}
.msp-form .msp-input:focus + .tip-left,
.msp-form .msp-textarea:focus + .tip-left {
margin-right: 5px;
right: 100%;
left: auto;
}
/*==================================================================
Tooltip - Right
===================================================================*/
.msp-form .tip-right {
top: 1px;
margin-left: -20px;
}
.msp-form .tip-right:after {
top: 12px;
right: 100%;
border-right: 8px solid #333333;
border-top: 8px solid transparent;
border-bottom: 8px solid transparent;
}
.msp-form .msp-input:focus + .tip-right,
.msp-form .msp-textarea:focus + .tip-right {
left: 100%;
margin-left: 5px;
}
/*==================================================================
Tooltip - Right/Top
===================================================================*/
.msp-form .tip-right-top {
bottom: 100%;
margin-bottom: -20px;
}
.msp-form .tip-right-top:after {
top: 100%;
right: 12px;
border-top: 8px solid #333333;
border-right: 8px solid transparent;
border-left: 8px solid transparent;
}
.msp-form .msp-input:focus + .tip-right-top,
.msp-form .msp-textarea:focus + .tip-right-top {
right: 0;
left: auto;
margin-bottom: 10px;
}
/*==================================================================
Tooltip - Left/Top
===================================================================*/
.msp-form .tip-left-top {
bottom: 100%;
margin-bottom: -20px;
}
.msp-form .tip-left-top:after {
top: 100%;
left: 12px;
border-top: 8px solid #333333;
border-right: 8px solid transparent;
border-left: 8px solid transparent;
}
.msp-form .msp-input:focus + .tip-left-top,
.msp-form .msp-textarea:focus + .tip-left-top {
left: 0;
right: auto;
margin-bottom: 10px;
}
/*==================================================================
Tooltip - Right/Bottom
===================================================================*/
.msp-form .tip-right-bottom {
top: 100%;
margin-top: -20px;
}
.msp-form .tip-right-bottom:after {
right: 12px;
bottom: 100%;
border-bottom: 8px solid #333333;
border-right: 8px solid transparent;
border-left: 8px solid transparent;
}
.msp-form .msp-input:focus + .tip-right-bottom,
.msp-form .msp-textarea:focus + .tip-right-bottom {
margin-top: 10px;
left: auto;
right: 0;
}
/*==================================================================
Tooltip - Left/Bottom
===================================================================*/
.msp-form .tip-left-bottom {
top: 100%;
margin-top: -20px;
}
.msp-form .tip-left-bottom:after {
left: 12px;
bottom: 100%;
border-bottom: 8px solid #333333;
border-right: 8px solid transparent;
border-left: 8px solid transparent;
}
.msp-form .msp-input:focus + .tip-left-bottom,
.msp-form .msp-textarea:focus + .tip-left-bottom {
margin-top: 10px;
right: auto;
left: 0;
}
/*==================================================================
Validation - error state
===================================================================*/
.msp-form .state-error .msp-input,
.msp-form .state-error .msp-textarea,
.msp-form .state-error.msp-select,
.msp-form .state-error input:hover + .checkbox,
.msp-form .state-error input:hover + .radio,
.msp-form .state-error input:focus + .checkbox,
.msp-form .state-error input:focus + .radio,
.msp-form .state-error .checkbox,
.msp-form .state-error .radio {
background: #FEE9EA;
border-color: #E86D70;
}
.msp-form .state-error .msp-input:focus,
.msp-form .state-error .msp-textarea:focus,
.msp-form .state-error.msp-select:focus {
-webkit-box-shadow: 0px 0px 3px #E86D70 inset;
-moz-box-shadow: 0px 0px 3px #E86D70 inset;
-o-box-shadow: 0px 0px 3px #E86D70 inset;
box-shadow: 0px 0px 3px #E86D70 inset;
}
.msp-form .state-error .msp-input ~ .field-icon i,
.msp-form .state-error .msp-textarea ~ .field-icon i {
color: #E86D70;
}
.msp-form .state-error.msp-select .arrow {
color: #E86D70;
}
.msp-form .state-error.msp-select:focus + .arrow {
color: #E86D70;
}
.msp-form .state-error.file .msp-file:hover + .msp-input {
border-color: #E86D70;
}
.msp-form .state-error + em {
display: block!important;
margin-top: 6px;
padding: 0 3px;
font-family: Arial, Helvetica, sans-serif;
font-style: normal;
line-height: normal;
font-size: 0.85em;
color: #E86D70;
}
/*==================================================================
Validation - success state
===================================================================*/
.msp-form .state-success .msp-input,
.msp-form .state-success .msp-textarea,
.msp-form .state-success.msp-select,
.msp-form .state-success input:hover + .checkbox,
.msp-form .state-success input:hover + .radio,
.msp-form .state-success input:focus + .checkbox,
.msp-form .state-success input:focus + .radio,
.msp-form .state-success .checkbox,
.msp-form .state-success .radio {
background: #F0FEE9;
border-color: #91CE55;
}
.msp-form .state-success .msp-input:focus,
.msp-form .state-success .msp-textarea:focus,
.msp-form .state-success.msp-select:focus {
-webkit-box-shadow: 0px 0px 3px #91CE55 inset;
-moz-box-shadow: 0px 0px 3px #91CE55 inset;
-o-box-shadow: 0px 0px 3px #91CE55 inset;
box-shadow: 0px 0px 3px #91CE55 inset;
}
.msp-form .state-success .msp-input ~ .field-icon i,
.msp-form .state-success .msp-textarea ~ .field-icon i {
color: #91CE55;
}
.msp-form .state-success.msp-select .arrow {
color: #91CE55;
}
.msp-form .state-success.msp-select:focus + .arrow {
color: #91CE55;
}
.msp-form .state-success.file .msp-file:hover + .msp-input {
border-color: #91CE55;
}

/*==================================================================
Buttons - Social
===================================================================*/
.msp-form .twitter,
.msp-form .twitter:hover,
.msp-form .twitter:focus,
.msp-form .facebook,
.msp-form .facebook:hover,
.msp-form .facebook:focus,
.msp-form .googleplus,
.msp-form .googleplus:hover,
.msp-form .googleplus:focus {
color: #fff;
text-shadow: 0 1px rgba(0, 0, 0, 0.08);
}
.msp-form .facebook {
background-color: #3b5998;
}
.msp-form .twitter {
background-color: #00acee;
}
.msp-form .googleplus {
background-color: #dd4b39;
}
.msp-form .facebook:hover,
.msp-form .facebook:focus {
background-color: #25385F;
}
.msp-form .twitter:hover,
.msp-form .twitter:focus {
background-color: #00749F;
}
.msp-form .googleplus:hover,
.msp-form .googleplus:focus {
background-color: #8D2418;
}
.msp-form .span-left {
padding-left: 56px;
text-align: left;
}
.msp-form .btn-social {
position: relative;
font-weight: 600;
margin-bottom: 5px;
}
.msp-form .btn-social i {
font-size: 22px;
font-weight: normal;
position: relative;
top: 3px;
}
.msp-form .btn-social span {
-webkit-border-radius: 3px 0 0 3px;
-moz-border-radius: 3px 0 0 3px;
-o-border-radius: 3px 0 0 3px;
border-radius: 3px 0 0 3px;
display: inline-block;
text-align: center;
position: absolute;
width: 45px;
left: 0;
}
.msp-form .twitter span {
background-color: #009AD5;
}
.msp-form .facebook span {
background-color: #31497D;
}
.msp-form .googleplus span {
background-color: #C03121;
}
/*==================================================================
Firefox select fix - select arrow hack disabled on FF 30+
===================================================================*/
@-moz-document url-prefix() {
.msp-form .msp-select:before {
content: '';
pointer-events: none;
-moz-transition: none;
transition: none;
position: absolute;
background: #F5F5F5;
width: 36px;
right: 1px;
top: 1px;
bottom: 1px;
z-index: 99;
}
.msp-form .msp-select:focus,
.msp-form .msp-select:hover,
.msp-form .msp-select:hover select,
.msp-form .msp-select:hover:before {
background: #fff;
-moz-transition: none;
transition: none;
-moz-box-shadow: none;
box-shadow: none;
}
.msp-form .msp-select .arrow {
z-index: 100;
}
.msp-form .state-error.msp-select:focus,
.msp-form .state-error.msp-select:hover,
.msp-form .state-error.msp-select:hover select,
.msp-form .state-error.msp-select:hover:before,
.msp-form .state-error.msp-select:before {
background: #FEE9EA;
}
.msp-form .state-success.msp-select:focus,
.msp-form .state-success.msp-select:hover,
.msp-form .state-success.msp-select:hover select,
.msp-form .state-success.msp-select:hover:before,
.msp-form .state-success.msp-select:before {
background: #F0FEE9;
}
}
@media screen and (-ms-high-contrast: active), (-ms-high-contrast: none) {
.msp-form .msp-select .arrow:after,
.msp-form .msp-select .arrow:before {
display: block;
}
}
/*==================================================================
ANDROID + IOS FIXES
===================================================================*/
@media screen and (-webkit-min-device-pixel-ratio: 0) {
.msp-form .option,
.msp-form .rating,
.msp-form .switch,
.msp-form .captcode {
-webkit-animation: bugfix infinite 1s;
}
@-webkit-keyframes bugfix {
from {
padding: 0;
}
to {
padding: 0;
}
}
.msp-form .switch {
margin-right: 10px;
margin-bottom: 5px;
}
.msp-form .option {
margin-right: 15px;
vertical-align: top;
}
}
/*==================================================================
Responsiveness for Tablets + Smartphones
===================================================================*/
@media (max-width: 600px) {
.msp-form .section row {
margin: 0;
}
.msp-form .section row .colm {
width: 100%;
float: none;
padding: 0;
}
.msp-form .bdl {
border-left: 0;
}
.msp-form .border-right {
border-right: 0;
}
.msp-form .align-right {
text-align: left;
}
}
/*==================================================================
Checkbox/Radio Confliction fixes
===================================================================*/
.msp-form .radio,
.msp-form .checkbox {
margin-top: 0;
margin-bottom: 0;
padding-left: 0;
top: 3px;
vertical-align: bottom;
}
.msp-form .checkbox:after,
.msp-form .checkbox:before {
margin: 0;
padding: 0;
-webkit-box-sizing: content-box;
-moz-box-sizing: content-box;
-o-box-sizing: content-box;
box-sizing: content-box;
}
/*==================================================================
Theme
===================================================================*/
.msp-form .msp-input:hover,
.msp-form .msp-textarea:hover,
.msp-form .msp-select:hover,
.msp-form .file .msp-file:hover + .msp-input {
border-color: #4fc1e9;
}
.msp-form .msp-input:focus,
.msp-form .msp-textarea:focus,
.msp-form .msp-select:focus {
border-color: #4fc1e9;
color: #3C3C3C;
}
.msp-form .msp-textarea:focus {
height: 120px;
}
.msp-form .msp-select:focus {
z-index: 10;
z-index: 20\9;
}
.msp-form .msp-input:focus ~ .field-icon i,
.msp-form .msp-textarea:focus ~ .field-icon i {
color: #3bafda;
}
.msp-form .file .msp-file:focus + .msp-input {
border-color: #4fc1e9;
}
.msp-form .msp-select:focus + .arrow {
color: #3bafda;
}