Mini Shell
/* Font
=============================== */
@import url(http://fonts.googleapis.com/css?family=Open+Sans:400,600);
/*=================================================================*/
/* Main */
/*=================================================================*/
/* Default
=============================== */
.wrapper {
margin:0 auto;
outline:none;
padding:40px 15px;
-webkit-box-sizing:content-box;
-moz-box-sizing:content-box;
box-sizing:content-box;
}
.wrapper-400 { max-width:400px; }
.wrapper-640 { max-width:640px; }
.j-forms {
background-color:#f9fafd;
-webkit-border-radius:3px;
-moz-border-radius:3px;
-o-border-radius:3px;
border-radius:3px;
-webkit-box-shadow:0 2px 5px rgba(0,0,0,.6);
-moz-box-shadow:0 2px 5px rgba(0,0,0,.6);
-o-box-shadow:0 2px 5px rgba(0,0,0,.6);
box-shadow:0 2px 5px rgba(0,0,0,.6);
-webkit-box-sizing:border-box;
-moz-box-sizing:border-box;
box-sizing:border-box;
color:rgba(0,0,0,.54);
font:16px 'Open Sans',Helvetica,Arial,sans-serif;
line-height:1;
position:relative;
}
.j-forms .input { position:relative; }
.j-forms .unit { position:relative; margin-bottom:25px; }
.j-forms .link {
border-bottom:1px solid #90caf9;
color:#1e88e5;
font-size:14px;
line-height:inherit;
text-decoration:none;
}
.j-forms .link:hover { border-bottom:none; }
.j-forms .inline-group { display:inline-block; }
.j-forms .token,
.j-forms .hidden { display:none; }
/* Reset for -webkit / -moz browser
=============================== */
.j-forms input[type="search"]::-webkit-search-decoration,
.j-forms input[type="search"]::-webkit-search-cancel-button,
.j-forms input[type="search"]::-webkit-search-results-button,
.j-forms input[type="search"]::-webkit-search-results-decoration { display:none; }
.j-forms select,
.j-forms input[type="button"],
.j-forms input[type="submit"],
.j-forms 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:0px;
border-radius:0px;
}
/* Header
=============================== */
.j-forms .header {
background-color:#3f51b5;
border-top:1px solid #7986cb;
-webkit-border-radius:3px 3px 0 0;
-moz-border-radius:3px 3px 0 0;
-o-border-radius:3px 3px 0 0;
border-radius:3px 3px 0 0;
-webkit-box-shadow:0 6px 3px -3px rgba(63,81,181,.5);
-moz-box-shadow:0 6px 3px -3px rgba(63,81,181,.5);
-o-box-shadow:0 6px 3px -3px rgba(63,81,181,.5);
box-shadow:0 6px 3px -3px rgba(63,81,181,.5);
display:block;
position:relative;
}
.j-forms .header > i {
color:#fff;
font-size:31px;
float:left;
padding:31px 15px 0 25px;
}
.j-forms .header p {
color:#fff;
margin:0;
padding:30px 25px;
font-size:30px;
text-transform:uppercase;
}
/* Content
=============================== */
.j-forms .content { padding:25px 25px 0; }
.j-forms .content:after {
clear:both;
content:".";
display:block;
height:0;
visibility:hidden;
}
/* Footer
=============================== */
.j-forms .footer {
background-color:#e8eaf6;
border-top:1px solid #303f9f;
-webkit-border-radius:0 0 3px 3px;
-moz-border-radius:0 0 3px 3px;
-o-border-radius:0 0 3px 3px;
border-radius:0 0 3px 3px;
display:block;
padding:10px 25px;
}
.j-forms .footer:after {
clear:both;
content:".";
display:block;
height:0;
visibility:hidden;
}
/* Dividers
=============================== */
.j-forms .divider,
.j-forms .divider-text { border-top:1px solid rgba(0,0,0,.12); height:0; }
.j-forms .divider-text { text-align:center; }
.j-forms .divider-text span {
border:1px solid rgba(0,0,0,.12);
-webkit-border-radius:3px;
-moz-border-radius:3px;
-o-border-radius:3px;
border-radius:3px;
background-color:#f9fafd;
color:#3f51b5;
font-size:16px;
padding:2px 15px;
position:relative;
top:-9px;
white-space:nowrap;
}
/* Gap-top / gap-bottom classes
=============================== */
.j-forms .gap-top-20 { margin-top:20px; } /* text-divider top gap after "content"/"j-row" classes */
.j-forms .gap-top-45 { margin-top:45px; } /* text-divider top gap after "unit" class */
.j-forms .gap-bottom-45 { margin-bottom:45px; } /* text-divider bottom gap */
.j-forms .gap-bottom-25 { margin-bottom:25px; } /* line-divider bottom gap */
/* Labels
=============================== */
.j-forms label {
display:block;
color:inherit;
font-weight:normal;
text-align:left;
margin-bottom:0;
}
.j-forms .label { font-size:14px; margin-bottom:6px; line-height:14px; height:14px; }
.j-forms .label-center { height:48px; line-height:48px; text-align:center; margin-bottom:0; }
.j-forms .j-row > .label{ padding-left:10px; }
/* Radio and checkbox
=============================== */
.j-forms .radio,
.j-forms .checkbox,
.j-forms .radio-toggle,
.j-forms .checkbox-toggle {
color:rgba(0,0,0,.87);
cursor:pointer;
font-size:15px;
height:15px;
margin-bottom:4px;
position:relative;
line-height:15px;
}
.j-forms .radio,
.j-forms .checkbox,
.j-forms .inline-group .radio,
.j-forms .inline-group .checkbox { padding:9px 0 8px 32px; }
.j-forms .radio-toggle,
.j-forms .checkbox-toggle,
.j-forms .inline-group .radio-toggle,
.j-forms .inline-group .checkbox-toggle { padding:9px 0 8px 58px; }
.j-forms .radio:last-child,
.j-forms .checkbox:last-child,
.j-forms .radio-toggle:last-child,
.j-forms .checkbox-toggle:last-child { margin-bottom:0; }
.j-forms .inline-group .radio,
.j-forms .inline-group .checkbox,
.j-forms .inline-group .radio-toggle,
.j-forms .inline-group .checkbox-toggle { display:inline-block; margin-right:25px; }
.j-forms .radio input,
.j-forms .checkbox input,
.j-forms .radio-toggle input,
.j-forms .checkbox-toggle input { position:absolute; left:-9999px; }
.j-forms .radio i,
.j-forms .checkbox i,
.j-forms .checkbox-toggle i,
.j-forms .radio-toggle i {
background-color:#fff;
border:2px solid rgba(0,0,0,.26);
display:block;
height:18px;
left:0;
outline:none;
position:absolute;
top:5px;
-webkit-transition:border-color.2s;
-moz-transition:border-color.2s;
-ms-transition:border-color.2s;
-o-transition:border-color.2s;
transition:border-color.2s;
}
.j-forms .radio i,
.j-forms .checkbox i { width:18px; }
.j-forms .checkbox-toggle i,
.j-forms .radio-toggle i { width:44px; }
.j-forms .checkbox i,
.j-forms .checkbox-toggle i {
-webkit-border-radius:3px;
-moz-border-radius:3px;
-o-border-radius:3px;
border-radius:3px;
}
.j-forms .radio i,
.j-forms .radio i:after,
.j-forms .radio-toggle i:before {
-webkit-border-radius:50%;
-moz-border-radius:50%;
-o-border-radius:50%;
border-radius:50%;
}
.j-forms .radio-toggle i {
-webkit-border-radius:13px;
-moz-border-radius:13px;
-o-border-radius:13px;
border-radius:13px;
}
.j-forms .checkbox-toggle i:before {
-webkit-border-radius:2px;
-moz-border-radius:2px;
-o-border-radius:2px;
border-radius:2px;
}
.j-forms .radio i:after {
background-color:rgba(48,63,159,.9);
content:"";
height:8px;
top:5px;
left:5px;
opacity:0;
position:absolute;
width:8px;
}
.j-forms .checkbox i:after {
border-width:0 0 3px 3px;
border-bottom:solid rgb(48,63,159);
border-left:solid rgb(48,63,159);
content:"";
height:5px;
top:3px;
-webkit-transform:rotate(-45deg);
-moz-transform:rotate(-45deg);
-ms-transform:rotate(-45deg);
-o-transform:rotate(-45deg);
transform:rotate(-45deg);
left:3px;
opacity:0;
position:absolute;
width:10px;
}
.j-forms .radio input:checked + i:after,
.j-forms .checkbox input:checked + i:after { opacity:1; }
.j-forms .checkbox-toggle i:before,
.j-forms .radio-toggle i:before {
border:none;
background-color:rgba(48,63,159,.9);
content:"";
display:block;
height:14px;
left:2px;
position:absolute;
top:2px;
width:14px;
}
.j-forms .checkbox-toggle input:checked + i:before,
.j-forms .radio-toggle input:checked + i:before { left:28px; }
.j-forms .checkbox-toggle i:after,
.j-forms .radio-toggle i:after,
.j-forms .checkbox-toggle input:checked + i:after,
.j-forms .radio-toggle input:checked + i:after {
font-size:10px;
font-style:normal;
font-weight:bold;
line-height:10px;
position:absolute;
top:4px;
}
.j-forms .checkbox-toggle i:after,
.j-forms .radio-toggle i:after { content:"NO"; left:22px; }
.j-forms .checkbox-toggle input:checked + i:after,
.j-forms .radio-toggle input:checked + i:after { content:"YES"; left:6px; }
.j-forms .checkbox:hover i,
.j-forms .radio:hover i,
.j-forms .checkbox-toggle:hover i,
.j-forms .radio-toggle:hover i { border:2px solid rgba(48,63,159,.6); }
.j-forms .radio input:checked + i,
.j-forms .checkbox input:checked + i,
.j-forms .radio-toggle input:checked + i,
.j-forms .checkbox-toggle input:checked + i { border:2px solid rgba(48,63,159,.9); }
.j-forms .radio input:checked + i,
.j-forms .checkbox input:checked + i { color:rgba(48,63,159,.9); }
.j-forms .checkbox-toggle input:checked + i,
.j-forms .radio-toggle input:checked + i { background-color:#e8eaf6; }
/* Widget
=============================== */
.j-forms .widget { position: relative; }
.j-forms .widget .addon,
.j-forms .widget .addon-btn {
background:#e0e0e0;
border:none;
color:rgba(0,0,0,.56);
display:block;
font:16px 'Open Sans',Helvetica,Arial,sans-serif;
height:48px;
line-height:48px;
padding:0;
position:absolute;
outline:none;
overflow:hidden;
text-align:center;
top:0;
z-index:5;
}
.j-forms .widget .addon-btn,
.j-forms .widget .addon-btn i {
cursor:pointer;
-webkit-transition:all.2s;
-moz-transition:all.2s;
-ms-transition:all.2s;
-o-transition:all.2s;
transition:all.2s;
}
.j-forms .widget .addon-btn:hover,
.j-forms .widget .addon-btn:focus { background-color:#d6d6d6; color:rgba(0,0,0,.87); }
.j-forms .widget .addon-btn:hover i,
.j-forms .widget .addon-btn:focus i { color:rgba(0,0,0,.61); }
.j-forms .widget .adn-left { left:0; }
.j-forms .widget .adn-right { right:0; }
.j-forms .widget .addon i,
.j-forms .widget .addon-btn i { color:rgba(0,0,0,.34); font-size:17px; z-index:2; }
.j-forms .widget .adn-50 { width:50px; }
.j-forms .widget .adn-130 { width:130px; }
.j-forms .widget.right-50 .input { padding-right:50px; }
.j-forms .widget.left-50 .input { padding-left:50px; }
.j-forms .widget.right-130 .input { padding-right:130px; }
.j-forms .widget.left-130 .input { padding-left:130px; }
.j-forms .widget .adn-left,
.j-forms .widget.right-50 .input input,
.j-forms .widget.right-130 .input input {
-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;
}
.j-forms .widget .adn-right,
.j-forms .widget.left-50 .input input,
.j-forms .widget.left-130 .input input {
-webkit-border-radius:0 3px 3px 0;
-moz-border-radius:0 3px 3px 0;
-o-border-radius:0 3px 3px 0;
border-radius:0 3px 3px 0;
}
.j-forms .widget.left-50.right-50 .input input,
.j-forms .widget.left-50.right-130 .input input,
.j-forms .widget.left-130.right-50 .input input,
.j-forms .widget.left-130.right-130 .input input {
-webkit-border-radius:0;
-moz-border-radius:0;
-o-border-radius:0;
border-radius:0;
}
/* Inputs
=============================== */
.j-forms input[type="text"],
.j-forms input[type="password"],
.j-forms input[type="email"],
.j-forms input[type="search"],
.j-forms input[type="url"],
.j-forms textarea,
.j-forms select {
background:#fff;
border:2px solid rgba(0,0,0,.12);
-webkit-border-radius:3px;
-moz-border-radius:3px;
-o-border-radius:3px;
border-radius:3px;
color:rgba(0,0,0,.87);
display:block;
font-family:inherit;
font-size:16px;
height:48px;
padding:10px 15px;
width:100%;
outline:none;
-webkit-appearance:none;
-moz-appearance:none;
appearance:none;
-webkit-box-sizing:border-box;
-moz-box-sizing:border-box;
box-sizing:border-box;
-webkit-transition:all.4s;
-moz-transition:all.4s;
-ms-transition:all.4s;
-o-transition:all.4s;
transition:all.4s;
}
.j-forms input[type="text"]:hover,
.j-forms input[type="password"]:hover,
.j-forms input[type="email"]:hover,
.j-forms input[type="search"]:hover,
.j-forms input[type="url"]:hover,
.j-forms textarea:hover,
.j-forms select:hover { border:2px solid rgba(48,63,159,.6); }
.j-forms input[type="text"]:focus,
.j-forms input[type="password"]:focus,
.j-forms input[type="email"]:focus,
.j-forms input[type="search"]:focus,
.j-forms input[type="url"]:focus,
.j-forms textarea:focus,
.j-forms select:focus { border:2px solid rgba(48,63,159,.9); }
.j-forms .input textarea {
height:112px;
overflow:auto;
min-height:52px;
resize:vertical;
}
.j-forms .input textarea:focus { height:128px; }
/* Placeholders
=============================== */
.j-forms input::-webkit-input-placeholder,
.j-forms textarea::-webkit-input-placeholder { color:rgba(0,0,0,.54); }
.j-forms input::-moz-placeholder,
.j-forms textarea::-moz-placeholder { color:rgba(0,0,0,.54); }
.j-forms input:-moz-placeholder,
.j-forms textarea:-moz-placeholder { color:rgba(0,0,0,.54); }
.j-forms input:-ms-input-placeholder,
.j-forms textarea:-ms-input-placeholder { color:rgba(0,0,0,.54); }
.j-forms input:focus::-webkit-input-placeholder,
.j-forms textarea:focus::-webkit-input-placeholder { color:rgba(0,0,0,.36); }
.j-forms input:focus::-moz-placeholder,
.j-forms textarea:focus::-moz-placeholder { color:rgba(0,0,0,.36); }
.j-forms input:focus:-moz-placeholder,
.j-forms textarea:focus:-moz-placeholder { color:rgba(0,0,0,.36); }
.j-forms input:focus:-ms-input-placeholder,
.j-forms textarea:focus:-ms-input-placeholder { color:rgba(0,0,0,.36); }
/* Select
=============================== */
.j-forms select { padding-left:13px; }
.j-forms .multiple-select select { height:auto; }
.j-forms .select i {
background:#fff;
-webkit-box-shadow:0 0 0 11px #fff;
-moz-box-shadow:0 0 0 11px #fff;
-o-box-shadow:0 0 0 11px #fff;
box-shadow:0 0 0 11px #fff;
height:20px;
position:absolute;
pointer-events:none;
top:14px;
right:14px;
width:14px;
}
.j-forms .select i:after,
.j-forms .select i:before {
border-right:4px solid transparent;
border-left:4px solid transparent;
content:'';
position:absolute;
right:3px;
}
.j-forms .select i:after { border-top:6px solid rgba(0,0,0,.4); bottom:1px; }
.j-forms .select i:before { border-bottom:6px solid rgba(0,0,0,.4); top:3px; }
.j-forms .select { position:relative; }
/* Icons
=============================== */
.j-forms .icon-left,
.j-forms .icon-right {
color:rgba(0,0,0,.54);
font-size:17px;
height:38px;
line-height:38px !important;
opacity:.6;
position:absolute;
text-align:center;
top:5px;
width:42px;
z-index:2;
}
.j-forms .icon-left { border-right:1px solid rgba(0,0,0,.54); left:3px; }
.j-forms .icon-right { border-left:1px solid rgba(0,0,0,.54); right:3px; }
.j-forms .icon-left ~ input,
.j-forms .icon-left ~ textarea { padding-left:58px; }
.j-forms .icon-right ~ input,
.j-forms .icon-right ~ textarea { padding-right:58px; }
/* File for upload
=============================== */
.j-forms .file-button input {
bottom:-1px;
font-size:34px;
opacity:0;
position:absolute;
width:108px;
z-index:0;
}
.j-forms .prepend-small-btn .file-button input,
.j-forms .prepend-big-btn .file-button input { left:0; }
.j-forms .append-small-btn .file-button input,
.j-forms .append-big-btn .file-button input { right:0; }
.j-forms .prepend-small-btn .file-button,
.j-forms .append-small-btn .file-button { width:64px; }
.j-forms .prepend-big-btn .file-button,
.j-forms .append-big-btn .file-button { width:106px; }
.j-forms .prepend-small-btn .file-button,
.j-forms .prepend-big-btn .file-button { left:4px; }
.j-forms .append-small-btn .file-button,
.j-forms .append-big-btn .file-button { right:4px; }
.j-forms .append-small-btn .file-button,
.j-forms .append-big-btn .file-button,
.j-forms .prepend-small-btn .file-button,
.j-forms .prepend-big-btn .file-button {
-webkit-border-radius:2px;
-moz-border-radius:2px;
-o-border-radius:2px;
border-radius:2px;
}
.j-forms .prepend-big-btn input[type="text"] { padding-left:123px; }
.j-forms .append-big-btn input[type="text"] { padding-right:123px; }
.j-forms .prepend-small-btn input[type="text"] { padding-left:81px; }
.j-forms .append-small-btn input[type="text"] { padding-right:81px; }
.j-forms .input input[type="file"] { cursor:pointer; }
/* Buttons
=============================== */
.j-forms .primary-btn,
.j-forms .secondary-btn {
border:none;
-webkit-border-radius:3px;
-moz-border-radius:3px;
-o-border-radius:3px;
border-radius:3px;
color:#fff;
display:block;
cursor:pointer;
float:right;
font:16px 'Open Sans',Helvetica,Arial,sans-serif;
height:48px;
margin:10px 0 10px 20px;
outline:none;
padding:0 25px;
white-space:nowrap;
}
.j-forms .primary-btn { position:relative; }
.j-forms .content .primary-btn,
.j-forms .content .secondary-btn { margin:0 0 20px 20px; }
.j-forms .file-button {
color:#fff;
display:block;
font-family:'Open Sans',Helvetica,Arial,sans-serif;
font-size:14px;
height:40px;
line-height:40px;
outline:none;
overflow:hidden;
position:absolute;
text-align:center;
top:4px;
z-index:1;
}
.j-forms .primary-btn,
.j-forms .file-button,
.j-forms .secondary-btn {
background:#303f9f;
-webkit-transition:background.2s;
-moz-transition:background.2s;
-ms-transition:background.2s;
-o-transition:background.2s;
transition:background.2s;
}
.j-forms .primary-btn:hover,
.j-forms .file-button:hover,
.j-forms .secondary-btn:hover { background:#3f51b5; }
.j-forms .primary-btn:hover.processing { background:#303f9f; cursor:wait; }
.j-forms .file-button:hover + input { border:2px solid rgba(48,63,159,.6); }
.j-forms .secondary-btn,
.j-forms .secondary-btn:hover,
.j-forms .secondary-btn:active { opacity:.5; }
.j-forms .primary-btn.processing:before {
background:rgba(255,255,255,.4);
content:'';
height:100%;
position:absolute;
top:0;
left:0;
width:100%;
-webkit-animation:processing 3s ease-in-out infinite;
-moz-animation:processing 3s ease-in-out infinite;;
-ms-animation:processing 3s ease-in-out infinite;
-o-animation:processing 3s ease-in-out infinite;
animation:processing 3s ease-in-out infinite;
}
@-webkit-keyframes processing {
0% { width:0; }
100% { width:100%; }
}
@-moz-keyframes processing {
0% { width:0; }
100% { width:100%; }
}
@-ms-keyframes processing {
0% { width:0; }
100% { width:100%; }
}
@-o-keyframes processing {
0% { width:0; }
100% { width:100%; }
}
@keyframes processing {
0% { width:0; }
100% { width:100%; }
}
/* Tooltip
=============================== */
.j-forms .tooltip,
.j-forms .tooltip-image {
background-color:#1a237e;
-webkit-border-radius:3px;
-moz-border-radius:3px;
-o-border-radius:3px;
border-radius:3px;
display:block;
left:-9999px;
opacity:0;
position:absolute;
z-index:20px;
}
.j-forms .tooltip {
color:#fff;
font:600 13px 'Open Sans',Helvetica,Arial,sans-serif;
line-height:20px;
padding:5px 10px;
}
.j-forms .tooltip-image { padding:2px 2px 1px; }
.j-forms .input input:focus + .tooltip,
.j-forms .input textarea:focus + .tooltip,
.j-forms .select select:focus + .tooltip,
.j-forms .input input:focus + .tooltip-image,
.j-forms .input textarea:focus + .tooltip-image,
.j-forms .select select:focus + .tooltip-image { opacity:1; z-index:5; }
.j-forms .tooltip-left-top { bottom:100%; margin-bottom:8px; }
.j-forms .tooltip-left-top:before {
border-color:#1a237e transparent;
border-style:solid;
border-width:8px 7px 0;
bottom:-6px;
content:"";
left:16px;
position:absolute;
}
.j-forms .input input:focus + .tooltip-left-top,
.j-forms .input textarea:focus + .tooltip-left-top,
.j-forms .select select:focus + .tooltip-left-top { left:0; right:auto; }
.j-forms .tooltip-right-top { bottom:100%; margin-bottom:8px; }
.j-forms .tooltip-right-top:before {
border-color:#1a237e transparent;
border-style:solid;
border-width:8px 7px 0;
bottom:-6px;
content:"";
position:absolute;
right:16px;
}
.j-forms .input input:focus + .tooltip-right-top,
.j-forms .input textarea:focus + .tooltip-right-top,
.j-forms .select select:focus + .tooltip-right-top { left:auto; right:0; }
.j-forms .tooltip-left-bottom { margin-top:8px; top:100%; }
.j-forms .tooltip-left-bottom:before {
border-color:#1a237e transparent;
border-style:solid;
border-width:0 7px 8px;
top:-6px;
content:"";
left:16px;
position:absolute;
}
.j-forms .input input:focus + .tooltip-left-bottom,
.j-forms .input textarea:focus + .tooltip-left-bottom,
.j-forms .select select:focus + .tooltip-left-bottom { left:0; right:auto; }
.j-forms .tooltip-right-bottom { margin-top:8px; top:100%; }
.j-forms .tooltip-right-bottom:before {
border-color:#1a237e transparent;
border-style:solid;
border-width:0 7px 8px;
top:-6px;
content:"";
right:16px;
position:absolute;
}
.j-forms .input input:focus + .tooltip-right-bottom,
.j-forms .input textarea:focus + .tooltip-right-bottom,
.j-forms .select select:focus + .tooltip-right-bottom { left:auto; right:0; }
.j-forms .tooltip-right-side { margin-left:8px; top:8px; white-space:nowrap; }
.j-forms .tooltip-right-side:before {
border-color:transparent #1a237e;
border-style:solid;
border-width:7px 8px 7px 0;
content:"";
left:-6px;
position:absolute;
top:8px;
}
.j-forms .input input:focus + .tooltip-right-side,
.j-forms .input textarea:focus + .tooltip-right-side,
.j-forms .select select:focus + .tooltip-right-side { left:100%; }
.j-forms .tooltip-left-side { margin-right:8px; top:8px; white-space:nowrap; }
.j-forms .tooltip-left-side:before {
border-color:transparent #1a237e;
border-style:solid;
border-width:7px 0 7px 8px;
content:"";
right:-6px;
position:absolute;
top:8px;
}
.j-forms .input input:focus + .tooltip-left-side,
.j-forms .input textarea:focus + .tooltip-left-side,
.j-forms .select select:focus + .tooltip-left-side { left:auto; right:100%; }
/* Status message
=============================== */
.j-forms .error-message,
.j-forms .success-message,
.j-forms .info-message,
.j-forms .warning-message {
border:2px solid;
-webkit-border-radius:3px;
-moz-border-radius:3px;
-o-border-radius:3px;
border-radius:3px;
display:block;
font:16px/24px 'Open Sans',Helvetica,Arial,sans-serif;
padding:15px;
}
.j-forms .error-message i,
.j-forms .success-message i,
.j-forms .info-message i,
.j-forms .warning-message i {
font-size:18px;
float:left;
height:24px;
line-height:24px;
padding-right:10px;
}
.j-forms .error-message ul,
.j-forms .success-message ul,
.j-forms .info-message ul,
.j-forms .warning-message ul { margin:0; }
.j-forms span.error-view,
.j-forms span.success-view,
.j-forms span.warning-view,
.j-forms span.info-view {
display:block;
font-size:14px;
height:14px;
line-height:14px;
margin-top:5px;
padding:0 2px;
}
.j-forms span.hint {
display:block;
font-size:13px;
color:inherit;
height:13px;
line-height:13px;
margin-top:5px;
padding:0 2px;
}
/* Disabled state
=============================== */
.j-forms .widget.disabled-view,
.j-forms .input.disabled-view,
.j-forms .select.disabled-view,
.j-forms .checkbox.disabled-view,
.j-forms .radio.disabled-view,
.j-forms .checkbox-toggle.disabled-view,
.j-forms .radio-toggle.disabled-view,
.j-forms .primary-btn.disabled-view,
.j-forms .secondary-btn.disabled-view,
.j-forms .file-button.disabled-view { cursor:default; opacity:.5; }
.j-forms .input.disabled-view input[type="file"] { cursor:default; }
.j-forms .widget.disabled-view input,
.j-forms .input.disabled-view input,
.j-forms .input.disabled-view textarea,
.j-forms .select.disabled-view select { border-color:rgba(0,0,0,.12) !important; }
.j-forms .checkbox.disabled-view i,
.j-forms .radio.disabled-view i,
.j-forms .checkbox-toggle.disabled-view i,
.j-forms .radio-toggle.disabled-view i { border-color:rgba(0,0,0,.26) !important; }
.j-forms .primary-btn.disabled-view,
.j-forms .secondary-btn.disabled-view,
.j-forms .disabled-view .file-button { background:#303f9f; }
.j-forms .widget.disabled-view .addon-btn:hover,
.j-forms .widget.disabled-view .addon-btn:focus { background:#e0e0e0; cursor:default; color:rgba(0,0,0,.56); }
.j-forms .widget.disabled-view .addon-btn i { color:rgba(0,0,0,.24) !important; }
/* Error state
=============================== */
.j-forms .error-view .checkbox i,
.j-forms .error-view .radio i,
.j-forms .error-view .checkbox-toggle i,
.j-forms .error-view .radio-toggle i,
.j-forms .error-view input,
.j-forms .error-view select,
.j-forms .error-view textarea { background:#ffebee !important; }
.j-forms .select.error-view i {
background-color:#ffebee;
-webkit-box-shadow:0 0 0 12px #ffebee;
-moz-box-shadow:0 0 0 12px #ffebee;
-o-box-shadow:0 0 0 12px #ffebee;
box-shadow:0 0 0 12px #ffebee;
}
.j-forms .error-view .icon-left,
.j-forms .error-view .icon-right { border-color:#e57373; }
.j-forms .error-view .icon-left,
.j-forms .error-view .icon-right,
.j-forms span.error-view,
.j-forms .error-message i { color:#b71c1c; }
.j-forms .error-message { background:#ffebee; border-color:#b71c1c; color:#b71c1c; }
/* Success state
=============================== */
.j-forms .success-view .checkbox i,
.j-forms .success-view .radio i,
.j-forms .success-view .checkbox-toggle i,
.j-forms .success-view .radio-toggle i,
.j-forms .success-view input,
.j-forms .success-view select,
.j-forms .success-view textarea { background:#e8f5e9 !important; }
.j-forms .select.success-view i {
background-color:#e8f5e9;
-webkit-box-shadow:0 0 0 12px #e8f5e9;
-moz-box-shadow:0 0 0 12px #e8f5e9;
-o-box-shadow:0 0 0 12px #e8f5e9;
box-shadow:0 0 0 12px #e8f5e9;
}
.j-forms .success-view .icon-left,
.j-forms .success-view .icon-right { border-color:#81c784; }
.j-forms .success-view .icon-left,
.j-forms .success-view .icon-right,
.j-forms span.success-view,
.j-forms .success-message i { color:#1b5e20; }
.j-forms .success-message { background:#e8f5e9; border-color:#1b5e20; color:#1b5e20; }
/* Warning state
=============================== */
.j-forms .warning-view .checkbox i,
.j-forms .warning-view .radio i,
.j-forms .warning-view .checkbox-toggle i,
.j-forms .warning-view .radio-toggle i,
.j-forms .warning-view input,
.j-forms .warning-view select,
.j-forms .warning-view textarea { background:#fff8e1 !important; }
.j-forms .select.warning-view i {
background-color:#fff8e1;
-webkit-box-shadow:0 0 0 12px #fff8e1;
-moz-box-shadow:0 0 0 12px #fff8e1;
-o-box-shadow:0 0 0 12px #fff8e1;
box-shadow:0 0 0 12px #fff8e1;
}
.j-forms .warning-view .icon-left,
.j-forms .warning-view .icon-right { border-color:#f9a825; }
.j-forms .warning-view .icon-left,
.j-forms .warning-view .icon-right,
.j-forms span.warning-view,
.j-forms .warning-message i { color:#f57f17; }
.j-forms .warning-message { background:#fff8e1; border-color:#f57f17; color:#f57f17; }
/* Info state
=============================== */
.j-forms .info-view .checkbox i,
.j-forms .info-view .radio i,
.j-forms .info-view .checkbox-toggle i,
.j-forms .info-view .radio-toggle i,
.j-forms .info-view input,
.j-forms .info-view select,
.j-forms .info-view textarea { background:#e1f5fe !important; }
.j-forms .select.info-view i {
background-color:#e1f5fe;
-webkit-box-shadow:0 0 0 12px #e1f5fe;
-moz-box-shadow:0 0 0 12px #e1f5fe;
-o-box-shadow:0 0 0 12px #e1f5fe;
box-shadow:0 0 0 12px #e1f5fe;
}
.j-forms .info-view .icon-left,
.j-forms .info-view .icon-right { border-color:#0288d1; }
.j-forms .info-view .icon-left,
.j-forms .info-view .icon-right,
.j-forms span.info-view,
.j-forms .info-message i { color:#01579b; }
.j-forms .info-message { background:#e1f5fe; border-color:#01579b; color:#01579b; }
/* Ratings
==================================== */
.j-forms .rating-group { color:rgba(0,0,0,.87); height:30px; line-height:30px; margin-bottom:4px; }
.j-forms .rating-group:last-child { margin-bottom:0; }
.j-forms .rating-group .label { float:left; font-size:16px; height:30px; line-height:30px; margin-bottom:0; }
.j-forms .rating-group .ratings { float:right; height:30px; line-height:30px; }
.j-forms .ratings input { left:-9999px; position:absolute; }
.j-forms .ratings input + label {
color:rgba(0,0,0,.26);
cursor:pointer;
font-size:20px;
float:right;
padding:0 2px;
-webkit-transition:color.2s;
-moz-transition:color.2s;
-ms-transition:color.2s;
-o-transition:color.2s;
transition:color.2s;
}
.j-forms .ratings input + label:hover,
.j-forms .ratings input + label:hover ~ label,
.j-forms .ratings input:checked + label,
.j-forms .ratings input:checked + label ~ label { color:#303f9f; }
/* Social links
==================================== */
.j-forms .social-btn,
.j-forms .social-icon { margin-bottom:6px; position:relative; }
.j-forms .social-icon { display:inline-block; margin-left:2px; margin-right:2px; }
.j-forms .social-center { text-align:center; }
.j-forms .social-btn i,
.j-forms .social-icon i {
background-color:rgba(0,0,0,.15);
color:#fff;
cursor:pointer;
font-size:22px;
left:0;
line-height:48px;
position:absolute;
text-align:center;
width:48px;
z-index:2;
}
.j-forms .social-btn i {
-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;
}
.j-forms .social-icon i {
-webkit-border-radius:3px;
-moz-border-radius:3px;
-o-border-radius:3px;
border-radius:3px;
}
.j-forms .social-btn button,
.j-forms .social-icon button {
-webkit-border-radius:3px;
-moz-border-radius:3px;
-o-border-radius:3px;
border-radius:3px;
border:none;
color:#fff;
cursor:pointer;
font:16px 'Open Sans',Helvetica,Arial,sans-serif;
padding:0 0 0 48px;
outline:none;
overflow:hidden;
height:48px;
white-space:nowrap;
-webkit-transition:background.2s;
-moz-transition:background.2s;
-ms-transition:background.2s;
-o-transition:background.2s;
transition:background.2s;
}
.j-forms .social-btn button { width:100%; }
.j-forms .social-icon button { width:48px; }
.j-forms .social-btn.vk button,
.j-forms .social-icon.vk button { background:rgb(47,80,112); }
.j-forms .social-btn.vk:hover button,
.j-forms .social.vk:hover button { background:rgba(47,80,112,.85); }
.j-forms .social-btn.skype button,
.j-forms .social-icon.skype button { background:rgb(19,176,237); }
.j-forms .social-btn.skype:hover button,
.j-forms .social-icon.skype:hover button { background:rgba(19,176,237,.85); }
.j-forms .social-btn.yahoo button,
.j-forms .social-icon.yahoo button { background:rgb(112,14,156); }
.j-forms .social-btn.yahoo:hover button,
.j-forms .social-icon.yahoo:hover button { background:rgba(112,14,156,.85); }
.j-forms .social-btn.flickr button,
.j-forms .social-icon.flickr button { background:rgb(254,59,147); }
.j-forms .social-btn.flickr:hover button,
.j-forms .social-icon.flickr:hover button { background:rgba(254,59,147,.85); }
.j-forms .social-btn.tumblr button,
.j-forms .social-icon.tumblr button { background:rgb(56,72,83); }
.j-forms .social-btn.tumblr:hover button,
.j-forms .social-icon.tumblr:hover button { background:rgba(56,72,83,.85); }
.j-forms .social-btn.google button,
.j-forms .social-icon.google button { background:rgb(8,104,185); }
.j-forms .social-btn.google:hover button,
.j-forms .social-icon.google:hover button { background:rgba(8,104,185,.85); }
.j-forms .social-btn.twitter button,
.j-forms .social-icon.twitter button { background:rgb(44,168,210); }
.j-forms .social-btn.twitter:hover button,
.j-forms .social-icon.twitter:hover button { background:rgba(44,168,210,.85); }
.j-forms .social-btn.youtube button,
.j-forms .social-icon.youtube button { background:rgb(206,51,44); }
.j-forms .social-btn.youtube:hover button,
.j-forms .social-icon.youtube:hover button { background:rgba(206,51,44,.85); }
.j-forms .social-btn.facebook button,
.j-forms .social-icon.facebook button { background:rgb(48,88,145); }
.j-forms .social-btn.facebook:hover button,
.j-forms .social-icon.facebook:hover button { background:rgba(48,88,145,.85); }
.j-forms .social-btn.linkedin button,
.j-forms .social-icon.linkedin button { background:rgb(68,152,200); }
.j-forms .social-btn.linkedin:hover button,
.j-forms .social-icon.linkedin:hover button { background:rgba(68,152,200,.85); }
.j-forms .social-btn.pinterest button,
.j-forms .social-icon.pinterest button { background:rgb(200,40,40); }
.j-forms .social-btn.pinterest:hover button,
.j-forms .social-icon.pinterest:hover button { background:rgba(200,40,40,.85); }
.j-forms .social-btn.google-plus button,
.j-forms .social-icon.google-plus button { background:rgb(206,77,57); }
.j-forms .social-btn.google-plus:hover button,
.j-forms .social-icon.google-plus:hover button { background:rgba(206,77,57,.85); }
/* Captcha
=============================== */
.j-forms .captcha-group { position: relative; }
.j-forms .captcha-group .captcha {
background-color:#e0e0e0;
border:none;
-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;
height:48px;
line-height:48px;
position:absolute;
outline:none;
text-align:center;
top:0;
width:90px;
}
.j-forms .captcha-group .input { padding-left:90px; }
.j-forms .captcha-group .input input {
-webkit-border-radius:0 3px 3px 0;
-moz-border-radius:0 3px 3px 0;
-o-border-radius:0 3px 3px 0;
border-radius:0 3px 3px 0;
}
/* Stepper
=============================== */
.j-forms .stepper { position:relative; padding-right:40px; }
.j-forms .stepper input {
-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;
}
.j-forms .stepper .stepper-wrapper {
-webkit-border-radius:0 3px 3px 0;
-moz-border-radius:0 3px 3px 0;
-o-border-radius:0 3px 3px 0;
border-radius:0 3px 3px 0;
bottom:0;
outline:none;
position:absolute;
right:0;
top:0;
overflow:hidden;
width:40px;
}
.j-forms .stepper input::-webkit-inner-spin-button,
.j-forms .stepper input::-webkit-outer-spin-button { -webkit-appearance:none; margin:0; }
.j-forms .stepper .stepper-arrow {
background-color:#e0e0e0;
cursor:pointer;
display:block;
height:50%;
-webkit-transition:background-color.4s;
-moz-transition:background-color.4s;
-ms-transition:background-color.4s;
-o-transition:background-color.4s;
transition:background-color.4s;
}
.j-forms .stepper .stepper-arrow:hover { background-color:#d6d6d6; }
.j-forms .stepper .stepper-arrow.down { bottom: 0; }
.j-forms .stepper .stepper-arrow.up:after,
.j-forms .stepper .stepper-arrow.down:after {
border-right:5px solid transparent;
border-left:5px solid transparent;
content:'';
position:absolute;
right:16px;
-webkit-transition:all.4s;
-moz-transition:all.4s;
-ms-transition:all.4s;
-o-transition:all.4s;
transition:all.4s;
}
.j-forms .stepper .stepper-arrow.down:after { border-top:7px solid rgba(0,0,0,.56); bottom:13px; }
.j-forms .stepper .stepper-arrow.up:after { border-bottom: 7px solid rgba(0,0,0,.56); top:13px; }
.j-forms .stepper .stepper-arrow:hover.down:after { border-top:7px solid rgba(0,0,0,.87); }
.j-forms .stepper .stepper-arrow:hover.up:after { border-bottom: 7px solid rgba(0,0,0,.87); }
/* Datapicker and Timepicker
=============================== */
.ui-datepicker {
background-color:#fff;
-webkit-border-radius:3px;
-moz-border-radius:3px;
-o-border-radius:3px;
border-radius:3px;
border:1px solid rgba(0,0,0,.26);
-webkit-box-shadow:0 0 2px rgba(0,0,0,.5);
-moz-box-shadow:0 0 2px rgba(0,0,0,.5);
-o-box-shadow:0 0 2px rgba(0,0,0,.5);
box-shadow:0 0 2px rgba(0,0,0,.5);
color:rgba(0,0,0,.54);
display:none;
font:16px 'Open Sans',Helvetica,Arial,sans-serif;
text-align:center;
padding:10px 0;
width:240px;
z-index:1100 !important;
}
.ui-datepicker-header {
background-color:#f0f0f0;
line-height:1.5;
margin:-2px 0 12px;
padding:10px;
position:relative;
}
.ui-datepicker-prev,
.ui-datepicker-next {
cursor:pointer;
display:block;
font-size:18px;
height:30px;
position:absolute;
text-decoration:none;
top:6px;
width:30px;
}
.ui-datepicker-prev { border-right:1px solid; left:0; }
.ui-datepicker-next { border-left:1px solid; right:0; }
.ui-datepicker-calendar { border-collapse:collapse; line-height:1.5; width:100%; }
.ui-datepicker-calendar th span { color:rgba(0,0,0,.26); font-weight:lighter; }
.ui-datepicker-calendar a,
.ui-datepicker-calendar span {
color:rgba(0,0,0,.54);
display:block;
font-size:16px;
margin:0 auto;
text-decoration:none;
width:28px;
}
.ui-datepicker-calendar a:hover,
.ui-datepicker-calendar .ui-state-active { background-color:#e0e0e0; }
.ui-datepicker-today a { outline:1px solid rgba(0,0,0,.54); }
.ui-datepicker-inline {
-webkit-box-sizing:border-box;
-moz-box-sizing:border-box;
box-sizing:border-box;
border:2px solid rgba(0,0,0,.12);
-webkit-box-shadow:none;
-moz-box-shadow:none;
-o-box-shadow:none;
box-shadow:none;
width:100%;
}
.ui-state-disabled span { color:rgba(0,0,0,.26); }
.ui-timepicker-div .ui-widget-header { background-color:#f0f0f0; margin-bottom:8px; padding:10px 0; }
.ui-timepicker-div dl { text-align:left; }
.ui-timepicker-div dl dt { float:left; clear:left; padding:0 0 0 5px; }
.ui-timepicker-div td { font-size:90%; }
.ui-tpicker-grid-label { background:none; border:none; margin:0; padding:0; }
.ui-timepicker-rtl{ direction:rtl; }
.ui-timepicker-rtl dl { text-align:right; padding:0 5px 0 0; }
.ui-timepicker-rtl dl dt{ float:right; clear:right; }
.ui-timepicker-rtl dl dd { margin:0 40% 10px 10px; }
.ui-timepicker-div { font-size:15px; }
.ui-timepicker-div dl {
-webkit-box-sizing:border-box;
-moz-box-sizing:border-box;
box-sizing:border-box;
border-top:1px solid rgba(0,0,0,.26);
padding:16px 5px;
margin:16px 0 0;
}
.ui-timepicker-div .ui_tpicker_time { margin:0 10px 10px 40%; }
.ui-timepicker-div .ui_tpicker_hour,
.ui-timepicker-div .ui_tpicker_minute { margin:16px 10px 10px 40%; }
.ui-datepicker-buttonpane { border-top:1px solid rgba(0,0,0,.26); }
.ui-datepicker-buttonpane button {
background:#e0e0e0;
border:none;
-webkit-border-radius:3px;
-moz-border-radius:3px;
-o-border-radius:3px;
border-radius:3px;
color:rgba(0,0,0,.56);
cursor:pointer;
font:14px 'Open Sans',Helvetica,Arial,sans-serif;
padding:5px 10px;
margin:10px 5px 0;
-webkit-transition:all.15s;
-moz-transition:all.15s;
-ms-transition:all.15s;
-o-transition:all.15s;
transition:all.15s;
outline:none;
}
.ui-datepicker-buttonpane button:hover { background:#d6d6d6; color:rgba(0,0,0,.87); }
/* jQuery Slider
=============================== */
.ui-slider { position:relative; }
.ui-slider .ui-slider-range {
border:none;
display:block;
font-size:11px;
position:absolute;
overflow:hidden;
z-index:1;
}
.ui-slider .ui-slider-handle {
background-color:#e0e0e0;
border:1px solid rgba(0,0,0,.36);
-webkit-border-radius:3px;
-moz-border-radius:3px;
-o-border-radius:3px;
border-radius:3px;
cursor:pointer;
height:16px;
position:absolute;
outline:none;
left:-5px;
width:16px;
z-index:2;
}
.ui-slider-horizontal { height:7px; }
.ui-slider-vertical { height:100px; width:7px; }
.ui-slider-horizontal .ui-slider-handle { top:-5px; margin-left:-10px; }
.ui-slider-horizontal .ui-slider-range { top:0; height:100%; }
.ui-slider-horizontal .ui-slider-range-min { left:0; }
.ui-slider-horizontal .ui-slider-range-max { right:0; }
.ui-slider-vertical .ui-slider-range-min { bottom:0; }
.ui-slider-vertical .ui-slider-range { left:0; width:100%; }
.ui-slider.ui-widget-content {
background-color:#fff;
border:2px solid #e0e0e0;
-webkit-border-radius:3px;
-moz-border-radius:3px;
-o-border-radius:3px;
border-radius:3px;
}
.ui-slider-vertical .ui-widget-header,
.ui-slider-horizontal .ui-widget-header { background-color:#f0f0f0; }
.j-forms .slider-group {
font:15px 'Open Sans',Helvetica,Arial,sans-serif;
height:48px;
line-height:48px;
padding:0 2px;
margin-bottom:5px;
white-space:nowrap;
}
.j-forms .slider-group label { display:inline-block; color:rgba(0,0,0,.87); padding:0 4px; }
/* Multistep form
=============================== */
.j-forms fieldset {
border:none;
outline:none;
margin:0;
padding:0;
position:absolute;
opacity:0;
left:-9999px;
top:0;
-webkit-transform:translateY(-4%);
-moz-transform:translateY(-4%);
-ms-transform:translateY(-4%);
-o-transform:translateY(-4%);
transform:translateY(-4%);
-webkit-transition:opacity.3s, -webkit-transform.3s;
-moz-transition:opacity.3s, -moz-transform.3s;
-ms-transition:opacity.3s, -ms-transform.3s;
-o-transition:opacity.3s, -o-transform.3s;
transition:opacity.3s, transform.3s;
}
.j-forms .steps {
border:1px solid rgba(0,0,0,.12);
-webkit-border-radius:3px;
-moz-border-radius:3px;
-o-border-radius:3px;
border-radius:3px;
margin-bottom:25px;
text-align:center;
-webkit-transition:all.3s;
-moz-transition:all.3s;
-ms-transition:all.3s;
-o-transition:all.3s;
transition:all.3s;
}
.j-forms .active-fieldset {
left:0;
position:relative;
opacity:1;
-webkit-transform:translateY(0);
-moz-transform:translateY(0);
-ms-transform:translateY(0);
-o-transform:translateY(0);
transform:translateY(0);
}
.j-forms fieldset .unit,
.j-forms fieldset .j-row { display:none; }
.j-forms .active-fieldset .unit,
.j-forms .active-fieldset .j-row { display:block; }
.j-forms .steps p { color:rgba(0,0,0,.56); font-size:16px; height:36px; line-height:36px; margin:0; padding:0; }
.j-forms .steps span { color:rgba(0,0,0,.56); font-size:13px; height:13px; line-height:13px; }
.j-forms .active-step .steps p { color:rgba(0,0,0,.87); }
.j-forms .active-step .steps { background-color:#e8eaf6; border:1px solid #303f9f; }
.j-forms .passed-step .steps { border:1px solid #e8eaf6; background-color:#e8eaf6; }
.j-forms.j-multistep .input textarea:focus { height:112px; }
#j-forms a.step-link,
#j-forms a.step-link:hover,
#j-forms a.step-link:focus,
#j-forms a.step-link:active { color:inherit; text-decoration:none; }
/* Modal form
=============================== */
/* Settings for block with links */
.modal-block {
background-color:#fff;
-webkit-border-radius:3px;
-moz-border-radius:3px;
-o-border-radius:3px;
border-radius:3px;
-webkit-box-shadow:0 0 15px rgba(0,0,0,.4);
-moz-box-shadow:0 0 15px rgba(0,0,0,.4);
-o-box-shadow:0 0 15px rgba(0,0,0,.4);
box-shadow:0 0 15px rgba(0,0,0,.4);
color:rgba(0,0,0,.54);
font-family:'Open Sans',Helvetica,Arial,sans-serif;
font-size:15px;
margin:0 auto;
max-width:320px;
outline:medium none;
padding:20px;
}
.modal-block .modal-link {
border-bottom:1px solid #90caf9;
color:#1e88e5;
font-size:14px;
line-height:inherit;
text-decoration:none;
}
.modal-block .modal-link:hover { border-bottom:none; }
/* Settings for modal form directly */
.modal-form {
background-color:rgba(103,119,129,.5);
bottom:0;
height:100%;
left:0;
opacity:0;
overflow-y:scroll;
position:fixed;
right:0;
top:0;
visibility:hidden;
width:100%;
z-index:1040;
}
.modal-form.modal-visible { opacity:1; visibility:visible; }
.modal-scroll { overflow:hidden; }
.j-forms .modal-close {
background-color:rgba(0,0,0,.3);
-webkit-border-radius:2px;
-moz-border-radius:2px;
-o-border-radius:2px;
border-radius:2px;
cursor:pointer;
position:absolute;
right:8px;
top:11px;
-webkit-transition:background-color.15s;
-moz-transition:background-color.15s;
-ms-transition:background-color.15s;
-o-transition:background-color.15s;
transition:background-color.15s;
}
.j-forms .modal-close:hover,
.j-forms .modal-close:focus { background-color:rgba(0,0,0,.6); }
.j-forms .modal-close i { display:block; height:22px; width:23px; }
.j-forms .modal-close i:before,
.j-forms .modal-close i:after {
background-color:#fff;
content:'';
height:3px;
position:absolute;
right:1px;
top:10px;
width:21px;
}
.j-forms .modal-close i:before{
-webkit-transform:rotate(45deg);
-moz-transform:rotate(45deg);
-ms-transform:rotate(45deg);
-o-transform:rotate(45deg);
transform:rotate(45deg);
}
.j-forms .modal-close i:after{
-webkit-transform:rotate(-45deg);
-moz-transform:rotate(-45deg);
-ms-transform:rotate(-45deg);
-o-transform:rotate(-45deg);
transform:rotate(-45deg);
}
/* Pop-up form
=============================== */
/* Popup menu forms */
.popup-menu { padding:0 15px; }
.popup-list {
background-color:#f9fafd;
-webkit-border-radius:3px;
-moz-border-radius:3px;
-o-border-radius:3px;
border-radius:3px;
-webkit-box-shadow:0 0 15px rgba(0,0,0,.4);
-moz-box-shadow:0 0 15px rgba(0,0,0,.4);
-o-box-shadow:0 0 15px rgba(0,0,0,.4);
box-shadow:0 0 15px rgba(0,0,0,.4);
max-width:100%;
position:relative;
}
.popup-list:after {
clear:both;
content:".";
display:block;
height:0;
visibility:hidden;
}
.popup-list > ul { font-size:0; float:right; outline:none; padding:5px; }
.popup-list > ul > li {
border-left:1px solid rgba(0,0,0,.12);
display:inline-block;
font-family:'Open Sans',Helvetica,Arial,sans-serif;
font-size:16px;
line-height:45px;
padding:0 20px;
list-style-type:none;
}
.popup-list > ul > li:hover { background-color:#e8eaf6; }
.popup-list-open { position:relative; }
.popup-list-open .j-forms { margin:10px auto 0; z-index:999; }
.popup-list-open .j-forms .input textarea:focus { height:112px; }
.popup-list-open .popup-list-wrapper {
display:none;
opacity:0;
position:absolute;
left:-9999px;
width:400px;
-webkit-animation:popup-list-open.4s both;
-moz-animation:popup-list-open.4s both;
-ms-animation:popup-list-open.4s both;
-o-animation:popup-list-open.4s both;
animation:popup-list-open.4s both;
}
@-webkit-keyframes popup-list-open {
from { -webkit-transform:translate(0,-10px); transform:translate(0,-10px); }
to { -webkit-transform:translate(0,0); transform:translate(0,0); }
}
@-moz-keyframes popup-list-open {
from { -moz-transform:translate(0,-10px); transform:translate(0,-10px); }
to { -moz-transform:translate(0,0); transform:translate(0,0); }
}
@-ms-keyframes popup-list-open {
from { -ms-transform:translate(0,-10px); transform:translate(0,-10px); }
to { -ms-transform:translate(0,0); transform:translate(0,0); }
}
@-o-keyframes popup-list-open {
from { -o-transform:translate(0,-10px); transform:translate(0,-10px); }
to { -o-transform:translate(0,0); transform:translate(0,0); }
}
@-keyframes popup-list-open {
from { transform:translate(0,-10px); }
to { transform:translate(0,0); }
}
/* Popup bottom form */
.popup-btm-400,
.popup-btm-640 {
bottom:0;
position:fixed;
-webkit-transition:width.3s;
-moz-transition:width.3s;
-ms-transition:width.3s;
-o-transition:width.3s;
transition:width.3s;
right:1%;
z-index:1000;
}
.popup-btm-400 { width:400px; }
.popup-btm-640 { width:640px; }
.popup-btm-400 #popup-input-open,
.popup-btm-400 #popup-input-close,
.popup-btm-640 #popup-input-open,
.popup-btm-640 #popup-input-close { display:none; }
.popup-btm-400 .popup-btm-wrapper,
.popup-btm-640 .popup-btm-wrapper {
bottom:-500px;
height:auto;
position:absolute;
right:0;
-webkit-transition:all.4s ease-in-out;
-moz-transition:all.4s ease-in-out;
-ms-transition:all.4s ease-in-out;
-o-transition:all.4s ease-in-out;
transition:all.4s ease-in-out;
width:100%;
z-index:1000;
}
.popup-btm-400 input#popup-input-open:checked ~ .popup-btm-label,
.popup-btm-640 input#popup-input-open:checked ~ .popup-btm-label { opacity:0; cursor:default; }
.popup-btm-400 input#popup-input-close:checked ~ .popup-btm-wrapper,
.popup-btm-640 input#popup-input-close:checked ~ .popup-btm-wrapper,
.popup-btm-400 .popup-btm-wrapper,
.popup-btm-640 .popup-btm-wrapper {
-webkit-transform:translateY(100%);
-moz-transform:translateY(100%);
-ms-transform:translateY(100%);
-o-transform:translateY(100%);
transform:translateY(100%);
}
.popup-btm-400 input#popup-input-open:checked ~ .popup-btm-wrapper,
.popup-btm-640 input#popup-input-open:checked ~ .popup-btm-wrapper {
bottom:5px;
-webkit-transform:translateY(0);
-moz-transform:translateY(0);
-ms-transform:translateY(0);
-o-transform:translateY(0);
transform:translateY(0);
}
.popup-btm-400 .j-forms .input textarea:focus,
.popup-btm-640 .j-forms .input textarea:focus { height:112px; }
.popup-btm-400 .popup-btm-label,
.popup-btm-640 .popup-btm-label {
background-color:#f9fafd;
-webkit-border-radius:3px;
-moz-border-radius:3px;
-o-border-radius:3px;
border-radius:3px;
-webkit-box-shadow:0 0 15px rgba(0,0,0,.4);
-moz-box-shadow:0 0 15px rgba(0,0,0,.4);
-o-box-shadow:0 0 15px rgba(0,0,0,.4);
box-shadow:0 0 15px rgba(0,0,0,.4);
bottom:0;
cursor:pointer;
color:rgba(0,0,0,.87);
display:block;
font:16px 'Open Sans',Helvetica,Arial,sans-serif;
height:35px;
text-align:center;
opacity:1;
line-height:35px;
padding:0 30px;
position:fixed;
right:1%;
-webkit-transition:opacity.4s ease-in-out.05s;
-moz-transition:opacity.4s ease-in-out.05s;
-ms-transition:opacity.4s ease-in-out.05s;
-o-transition:opacity.4s ease-in-out.05s;
transition:opacity.4s ease-in-out.05s;
white-space:nowrap;
z-index: 9999;
}
.popup-btm-400 .popup-btm-close,
.popup-btm-640 .popup-btm-close {
background-color:rgba(0,0,0,.6);
-webkit-border-radius:2px;
-moz-border-radius:2px;
-o-border-radius:2px;
border-radius:2px;
cursor:pointer;
position:absolute;
right:0;
top:-25px;
-webkit-transition:background-color.15s;
-moz-transition:background-color.15s;
-ms-transition:background-color.15s;
-o-transition:background-color.15s;
transition:background-color.15s;
}
.popup-btm-400 .popup-btm-close:hover,
.popup-btm-400 .popup-btm-close:focus,
.popup-btm-640 .popup-btm-close:hover,
.popup-btm-640 .popup-btm-close:focus { background-color:rgba(0,0,0,.8); }
.popup-btm-400 .popup-btm-close i,
.popup-btm-640 .popup-btm-close i { display:block; height:22px; width:23px; }
.popup-btm-400 .popup-btm-close i:before,
.popup-btm-400 .popup-btm-close i:after,
.popup-btm-640 .popup-btm-close i:before,
.popup-btm-640 .popup-btm-close i:after {
background-color:#fff;
content:'';
height:3px;
position:absolute;
right:1px;
top:10px;
width:21px;
}
.popup-btm-400 .popup-btm-close i:before,
.popup-btm-640 .popup-btm-close i:before {
-webkit-transform:rotate(45deg);
-moz-transform:rotate(45deg);
-ms-transform:rotate(45deg);
-o-transform:rotate(45deg);
transform:rotate(45deg);
}
.popup-btm-400 .popup-btm-close i:after,
.popup-btm-640 .popup-btm-close i:after {
-webkit-transform:rotate(-45deg);
-moz-transform:rotate(-45deg);
-ms-transform:rotate(-45deg);
-o-transform:rotate(-45deg);
transform:rotate(-45deg);
}
/*=================================================================*/
/* Grid layout */
/*=================================================================*/
.j-forms [class*="span"] {
-webkit-box-sizing:border-box;
-moz-box-sizing:border-box;
box-sizing:border-box;
float:left;
padding-left:10px;
padding-right:10px;
position:relative;
}
.j-forms .span1 { width:8.3333%; }
.j-forms .span2 { width:16.6666%; }
.j-forms .span3 { width:25%; }
.j-forms .span4 { width:33.3333%; }
.j-forms .span5 { width:41.6666%; }
.j-forms .span6 { width:50%; }
.j-forms .span7 { width:58.3333%; }
.j-forms .span8 { width:66.6666%; }
.j-forms .span9 { width:75%; }
.j-forms .span10 { width:83.3333%; }
.j-forms .span11 { width:91.6666%; }
.j-forms .span12 { width:100%; }
.j-forms .offset1 { margin-left:8.3333%; }
.j-forms .offset2 { margin-left:16.6666%; }
.j-forms .offset3 { margin-left:25%; }
.j-forms .offset4 { margin-left:33.3333%; }
.j-forms .offset5 { margin-left:41.6666%; }
.j-forms .offset6 { margin-left:50%; }
.j-forms .offset7 { margin-left:58.3333%; }
.j-forms .offset8 { margin-left:66.6666%; }
.j-forms .offset9 { margin-left:75%; }
.j-forms .offset10 { margin-left:83.3333%; }
.j-forms .offset11 { margin-left:91.6666%; }
.j-forms .offset12 { margin-left:100%; }
.j-forms .j-row{ margin:0 -10px; }
.j-forms .j-row:after {
clear:both;
content:".";
display:block;
height:0;
visibility:hidden;
}
/* Responsiveness
==================================== */
/* Wrapper-640 */
@media all and (max-width:620px) {
.wrapper-640 .j-forms [class*="span"] { margin-right:0; width:100%; }
.wrapper-640 .j-forms [class*="offset"] { margin-left:0; }
.wrapper-640 .j-forms .label-center { height:14px; line-height:14px; text-align:left; padding-bottom:3px; }
.wrapper-640 .j-forms .radio:last-child,
.wrapper-640 .j-forms .checkbox:last-child,
.wrapper-640 .j-forms .radio-toggle:last-child,
.wrapper-640 .j-forms .checkbox-toggle:last-child { margin-bottom:4px; }
/* Popup menu forms*/
.popup-list-open > .popup-list-wrapper { width:100%; }
.popup-list-open { position:static; }
}
/* Wrapper-400 */
@media all and (max-width:380px) {
.wrapper-400 .j-forms [class*="span"] { margin-right:0; width:100%; }
.wrapper-400 [class*="offset"] { margin-left:0; }
.wrapper-400 .j-forms .label-center { height:14px; line-height:14px; text-align:left; padding-bottom:3px; }
.wrapper-400 .j-forms .radio:last-child,
.wrapper-400 .j-forms .checkbox:last-child,
.wrapper-400 .j-forms .radio-toggle:last-child,
.wrapper-400 .j-forms .checkbox-toggle:last-child { margin-bottom:4px; }
/* Responsiveness inside popup menu forms */
.popup-list-wrapper .j-forms [class*="span"] { margin-right:0; width:100%; }
.popup-list-wrapper .j-forms [class*="offset"] { margin-left:0; }
.popup-list-wrapper .j-forms .label-center { height:14px; line-height:14px; text-align:left; padding-bottom:3px; }
}
/* Popup bottom form 400 px*/
@media all and (max-width:410px) {
.popup-btm-400 { width: 320px; }
.popup-btm-400 .j-forms [class*="span"] { margin-right:0; width:100%; }
.popup-btm-400 .j-forms [class*="offset"] { margin-left:0; }
.popup-btm-400 .j-forms .label-center { height:14px; line-height:14px; text-align:left; padding-bottom:3px; }
}
/* Popup bottom form 640 px*/
@media all and (max-width:650px) {
.popup-btm-640 { width: 320px; }
.popup-btm-640 .j-forms [class*="span"] { margin-right:0; width:100%; }
.popup-btm-640 .j-forms [class*="offset"] { margin-left:0; }
.popup-btm-640 .j-forms .label-center { height:14px; line-height:14px; text-align:left; padding-bottom:3px; }
}
/* Bootstrap compatibility
=============================== */
.j-forms .radio,
.j-forms .checkbox,
.j-forms .radio-toggle,
.j-forms .checkbox-toggle { margin-top:0; }
.j-forms .label {
padding:0;
-webkit-border-radius:0;
-moz-border-radius:0;
-o-border-radius:0;
border-radius:0;
}
.j-forms .radio,
.j-forms .checkbox,
.j-forms .radio-toggle,
.j-forms .checkbox-toggle,
.j-forms .radio *,
.j-forms .checkbox *,
.j-forms .radio-toggle *,
.j-forms .checkbox-toggle *,
.j-forms .radio i:after,
.j-forms .checkbox i:after,
.j-forms .radio-toggle i:after,
.j-forms .checkbox-toggle i:after,
.j-forms .radio i:before,
.j-forms .checkbox i:before,
.j-forms .radio-toggle i:before,
.j-forms .checkbox-toggle i:before {
-webkit-box-sizing:content-box;
-moz-box-sizing:content-box;
box-sizing:content-box;
}
/* =============================== */
/* start */
/* Just Forms */
/* version 2.0 */
/* =============================== */
/* Form details & total price
=============================== */
.j-forms .form-details {
font:15px/25px 'Open Sans',Helvetica,Arial,sans-serif;
margin-bottom:5px;
}
.j-forms .form-details p { display:inline-block; margin:0; padding:0; }
.j-forms .form-details span { color:rgba(0,0,0,.87); padding:0 4px; }
.j-forms .total-price {
background:#c4df9b;
-webkit-border-radius:3px;
-moz-border-radius:3px;
-o-border-radius:3px;
border-radius:3px;
text-align:center;
padding:10px 0;
}
.j-forms .form-details.total-price span { font-size:17px; }
/* Cloned elements
=============================== */
.j-forms .content .clone-btn-right,
.j-forms .content .clone-btn-left {
font-size:14px;
height:48px;
padding:0;
position:absolute;
margin:0;
width:47px;
}
.j-forms .j-row>.clone-btn-right { bottom:25px; right:10px; }
.j-forms .j-row>.clone-btn-right.delete { right:60px; }
.j-forms .unit>.clone-btn-right { bottom:0; right:0; }
.j-forms .unit>.clone-btn-right.delete { right:50px; }
.j-forms .j-row>.clone-btn-left { bottom:25px; left:10px; }
.j-forms .j-row>.clone-btn-left.delete { left:60px; }
.j-forms .unit>.clone-btn-left { bottom:0; left:0; }
.j-forms .unit>.clone-btn-left.delete { left:50px; }
.toclone-widget-right { padding-right:100px; position:relative; }
.toclone-widget-left { padding-left:100px; position:relative; }
.j-forms .toclone .link { display:inline-block; padding-bottom:3px; margin:0 5px 5px 0; }
/* jQuery UI Autocomplete
=============================== */
.ui-autocomplete {
background:#fff;
border-color:rgba(0,0,0,.12);
border-style:none solid solid;
border-width:0 2px 2px;
-webkit-border-radius:0 0 3px 3px;
-moz-border-radius:0 0 3px 3px;
-o-border-radius:0 0 3px 3px;
border-radius:0 0 3px 3px;
cursor:default;
display:block;
font:16px 'Open Sans',Helvetica,Arial,sans-serif;
left:0;
list-style:none;
margin:0;
max-height:110px;
outline:none;
overflow-x:hidden;
overflow-y:auto;
padding:0;
position:absolute;
top:0;
z-index:10000;
}
.ui-autocomplete .ui-menu { position:absolute; }
.ui-autocomplete .ui-menu-item {
background:#fff;
border-bottom:1px solid rgba(0,0,0,.12);
cursor:pointer;
margin:0;
min-height:0;
padding:8px 15px;
position:relative;
}
.ui-autocomplete .ui-menu-item:hover { background:rgba(0,0,0,.06); }
.ui-helper-hidden-accessible { position:absolute; left:-999em; }
/* TinyMCE
=============================== */
.j-forms .input .mce-tinymce {
-webkit-border-radius:3px;
-moz-border-radius:3px;
-o-border-radius:3px;
border-radius:3px;
border:2px solid rgba(0,0,0,.12) !important;
-webkit-transition:border.4s;
-moz-transition:border.4s;
-ms-transition:border.4s;
-o-transition:border.4s;
transition:border.4s;
}
.j-forms .input .mce-tinymce:hover { border:2px solid rgba(48,63,159,.6) !important; }
/* =============================== */
/* Just Forms */
/* version 2.0 */
/* end */
/* =============================== */
/* =============================== */
/* start */
/* Just Forms */
/* version 2.3*/
/* =============================== */
/* Tabs
=============================== */
.j-tabs-section,
.j-tabs-container input[type="radio"] { display:none; }
#tab1:checked ~ #tabs-section-1,
#tab2:checked ~ #tabs-section-2,
#tab3:checked ~ #tabs-section-3 { display:block; }
.j-tabs-container .j-tabs-label {
background:#fff;
border-top:2px solid rgba(0,0,0,.34);
-webkit-border-radius:2px 2px 0 0;
-moz-border-radius:2px 2px 0 0;
-o-border-radius:2px 2px 0 0;
border-radius:2px 2px 0 0;
display:inline-block;
margin:0 0 -3px;
font:14px 'Open Sans',Helvetica,Arial,sans-serif;
padding:11px 13px 13px;
-webkit-box-shadow:0 2px 2px rgba(0,0,0,.6);
-moz-box-shadow:0 2px 2px rgba(0,0,0,.6);
-o-box-shadow:0 2px 2px rgba(0,0,0,.6);
box-shadow:0 2px 2px rgba(0,0,0,.6);
opacity:.95;
-webkit-transition:border-top.2s;
-moz-transition:border-top.2s;
-ms-transition:border-top.2s;
-o-transition:border-top.2s;
transition:border-top.2s;
}
.j-tabs-container .j-tabs-label i,
.j-tabs-container .j-tabs-label span { padding:1px; }
.j-tabs-container .j-tabs-label i { font-size:16px; }
.j-tabs-container .j-tabs-label i,
.j-tabs-container .j-tabs-label span,
.j-tabs-container input[type="radio"]:checked + .j-tabs-label i { color:rgba(0,0,0,.54); }
.j-tabs-container .j-tabs-label:hover { cursor:pointer; }
.j-tabs-container input[type="radio"]:checked + .j-tabs-label { border-top:2px solid rgba(0,0,0,.87); opacity:1; }
.j-tabs-container input[type="radio"]:checked + .j-tabs-label span { color:#4680ff; }
.j-tabs-container input[type="radio"]:checked + .j-tabs-label i { color:#4680ff; }
@media all and (max-width: 430px) {
.j-tabs-container .j-tabs-label { font-size:0; }
.j-tabs-container .j-tabs-label i { font-size:16px; height:18px; }
.j-tabs-container input[type="radio"]:checked + .j-tabs-label i { color:rgba(0,0,0,.87); }
}
/* Image checkbox & Image radio
=============================== */
.j-forms .radio-block,
.j-forms .checkbox-block {
color:rgba(0,0,0,.87);
cursor:pointer;
font-size:15px;
margin-bottom:8px;
position:relative;
}
.j-forms .radio-block:last-child,
.j-forms .checkbox-block:last-child { margin-bottom:0; }
.j-forms .radio-block input,
.j-forms .checkbox-block input { position:absolute; left:-9999px; }
.j-forms .radio-block i,
.j-forms .checkbox-block i {
display:block;
height:18px;
outline:none;
position:absolute;
top:5px;
left:5px;
width:18px;
z-index:10;
}
.j-forms .checkbox-block i {
-webkit-border-radius:3px;
-moz-border-radius:3px;
-o-border-radius:3px;
border-radius:3px;
}
.j-forms .checkbox-block i:after {
border-width:0 0 3px 3px;
border-bottom:solid rgb(48,63,159);
border-left:solid rgb(48,63,159);
content:"";
height:5px;
top:3px;
-webkit-transform:rotate(-45deg);
-moz-transform:rotate(-45deg);
-ms-transform:rotate(-45deg);
-o-transform:rotate(-45deg);
transform:rotate(-45deg);
left:3px;
opacity:0;
position:absolute;
width:10px;
}
.j-forms .radio-block i,
.j-forms .radio-block i:after {
-webkit-border-radius:50%;
-moz-border-radius:50%;
-o-border-radius:50%;
border-radius:50%;
}
.j-forms .radio-block i:after {
background-color:rgba(48,63,159,.9);
content:"";
height:8px;
top:5px;
left:5px;
opacity:0;
position:absolute;
width:8px;
}
.j-forms .radio-block input:checked + i,
.j-forms .checkbox-block input:checked + i { color:rgba(48,63,159,.9); border:2px solid rgba(48,63,159,.9); }
.j-forms .radio-block input:checked + i:after,
.j-forms .checkbox-block input:checked + i:after { opacity:1; }
.j-forms .checkbox-block span,
.j-forms .radio-block span { display:block; }
.j-forms .checkbox-block .block-image,
.j-forms .radio-block .block-image { position:relative; border:0;}
.j-forms .checkbox-block .block-content img,
.j-forms .radio-block .block-content img { height:auto; display:block; width:100%; }
.j-forms .checkbox-block .block-content:hover,
.j-forms .radio-block .block-content:hover,
.j-forms .checkbox-block input:checked ~ .block-content,
.j-forms .radio-block input:checked ~ .block-content {
-webkit-border-radius:2px;
-moz-border-radius:2px;
-o-border-radius:2px;
border-radius:2px;
}
.j-forms .checkbox-block .block-content:hover,
.j-forms .radio-block .block-content:hover { background:rgba(232,234,246,.5); }
.j-forms .checkbox-block input:checked ~ .block-content,
.j-forms .radio-block input:checked ~ .block-content { background:#e8eaf6; }
.j-forms .checkbox-block .block-text-title,
.j-forms .radio-block .block-text-title { color:rgba(0,0,0,.87); font-size:17px; margin:5px 0; }
.j-forms .checkbox-block .block-text-desc,
.j-forms .radio-block .block-text-desc {
color:rgba(0,0,0,.54);
font-size:13px;
padding-right:5px;
line-height:1.2;
margin:5px 0 10px;
word-spacing:3px;
}
.j-forms .checkbox-block .block-image-title,
.j-forms .radio-block .block-image-title,
.j-forms .checkbox-block .block-content,
.j-forms .radio-block .block-content {
-webkit-transition:background .2s;
-moz-transition:background .2s;
-ms-transition:background .2s;
-o-transition:background .2s;
transition:background .2s;
}
.j-forms .checkbox-block .block-image-title,
.j-forms .radio-block .block-image-title {
background:rgba(0,0,0,.34);
bottom:0;
color:#fff;
font-size:13px;
padding:10px;
position:absolute;
left:0;
width:100%;
z-index:20;
-webkit-box-sizing:border-box;
-moz-box-sizing:border-box;
box-sizing:border-box;
}
.j-forms .checkbox-block .block-content:hover .block-image-title,
.j-forms .radio-block .block-content:hover .block-image-title { background:rgba(0,0,0,.57); }
.j-forms .checkbox-block input:checked ~ .block-content .block-image-title,
.j-forms .radio-block input:checked ~ .block-content .block-image-title { background:rgba(0,0,0,.77); }
/* MULTIPLE SELECT Plugin
=============================== */
.j-forms .error-view .ms-parent .ms-choice { background:#ffebee; }
.j-forms .success-view .ms-parent .ms-choice { background:#e8f5e9; }
.j-forms .warning-view .ms-parent .ms-choice { background:#fff8e1; }
.j-forms .info-view .ms-parent .ms-choice { background:#e1f5fe; }
.j-forms .ms-parent { display:inline-block; position:relative; vertical-align:middle; }
.j-forms .ms-choice {
background-color:#fff;
border:2px solid rgba(0,0,0,.12);
-webkit-border-radius:3px;
-moz-border-radius:3px;
-o-border-radius:3px;
border-radius:3px;
display:block;
color:rgba(0,0,0,.87);
font:16px/48px 'Open Sans',Helvetica,Arial,sans-serif;
height:48px;
overflow:hidden;
text-align:left;
text-decoration:none;
padding:0;
white-space:nowrap;
width:100%;
-webkit-transition:border.4s;
-moz-transition:border.4s;
-ms-transition:border.4s;
-o-transition:border.4s;
transition:border.4s;
}
.j-forms .ms-choice:hover { border:2px solid rgba(48,63,159,.6); }
.j-forms .ms-choice:focus { border:2px solid rgba(48,63,159,.9); }
.j-forms .ms-choice.disabled {
background-color:#fff;
background-image:none;
border:2px solid rgba(0,0,0,.12) !important;
cursor:default;
}
.j-forms .ms-choice > span {
display:block;
padding-left:18px;
position:absolute;
top:0;
left:0;
right:20px;
overflow:hidden;
text-overflow:ellipsis;
white-space:nowrap;
}
.j-forms .ms-choice > span.placeholder { color:rgba(0,0,0,.36); }
.j-forms .ms-drop {
background:#fff;
border:1px solid rgba(0,0,0,.12);
-webkit-border-radius:3px;
-moz-border-radius:3px;
-o-border-radius:3px;
border-radius:3px;
color:rgba(0,0,0,.87);
display:none;
overflow:hidden;
padding:0;
position:absolute;
width:100%;
z-index:1000;
}
.j-forms .ms-drop.bottom {
top:100%;
-webkit-box-shadow:0 4px 5px rgba(0,0,0,.15);
-moz-box-shadow:0 4px 5px rgba(0,0,0,.15);
-o-box-shadow:0 4px 5px rgba(0,0,0,.15);
box-shadow:0 4px 5px rgba(0,0,0,.15);
}
.j-forms .ms-drop.top {
bottom:100%;
-webkit-box-shadow:0 -4px 5px rgba(0,0,0,.15);
-moz-box-shadow:0 -4px 5px rgba(0,0,0,.15);
-o-box-shadow:0 -4px 5px rgba(0,0,0,.15);
box-shadow:0 -4px 5px rgba(0,0,0,.15);
}
.j-forms .ms-search {
display:inline-block;
margin:0;
min-height:26px;
padding:4px;
position:relative;
white-space:nowrap;
width:100%;
z-index:9999;
}
.j-forms .ms-search,
.j-forms .ms-search input {
-webkit-box-sizing:border-box;
-khtml-box-sizing:border-box;
-moz-box-sizing:border-box;
-ms-box-sizing:border-box;
box-sizing:border-box;
}
.j-forms .ms-drop ul { overflow:auto; margin:0; padding:5px 8px; }
.j-forms .ms-drop ul > li { list-style:none; display:list-item; background-image:none; position:static; }
.j-forms .ms-drop ul > li .disabled { opacity:.35; }
.j-forms .ms-drop ul > li.multiple { display:block; float:left; }
.j-forms .ms-drop ul > li.group { clear:both; }
.j-forms .ms-drop ul > li.multiple label {
display:block;
overflow:hidden;
text-overflow:ellipsis;
white-space:nowrap;
width:100%;
}
.j-forms .ms-drop ul > li label { font-weight:normal; display:block; white-space:nowrap; }
.j-forms .ms-drop ul > li label.optgroup { font-weight:bold; }
.j-forms .ms-drop input[type="checkbox"] { vertical-align:middle; }
.j-forms .ms-drop .ms-no-results { display:none; }
Zerion Mini Shell 1.0