/*
Theme Name: Ethereal Material
Theme Slug: sp_material
Theme URI: http://gravitystylespro.com/themes/
Author: Warp Lord
Author URI: http://gravitystylespro.com/author/
Version: 2.0
Description: تم متریال سبک بصری خود را از کتاب راهنمای طراحی متریال گوگل گرفته است.
Font: 16px/Roboto/#808080/Google
Font Label: 14px/Roboto/#9A2DB1
Field Margin: 4em
Features: sp_material-floatlabel
Features Description: <a href="https://gravitystylespro.com/docs/floating-labels-in-material-design/" target="_blank">Floating labels</a> for Ethereal Material theme
*/

.sp_material .gf_inline {
    margin-right: 7%;
}

.sp_material button,
.sp_material input,
.sp_material select,
.sp_material textarea,
.sp_material .ginput_total,
.sp_material .ginput_product_price,
.sp_material .ginput_shipping_price,
.sp_material input[type=checkbox]:not(old) + label,
.sp_material input[type=radio   ]:not(old) + label {
    color: #3a3a3a;
}
.sp_material *::-webkit-input-placeholder {
    transition: .5s all;
}
.sp_material *:-moz-placeholder {		/* FF 4-18 */
    transition: .5s all;
}
.sp_material *::-moz-placeholder {		/* FF 19+ */
    transition: .5s all;
}
.sp_material *:-ms-input-placeholder { 	/* IE 10+ */
    transition: .5s all;
}
.sp_material placeholder {
    transition: .5s all;
}
.sp_material,
.sp_material .gfield_label,
.sp_material .ginput_complex label,
.sp_material .gfield_description,
.sp_material .ginput_counter {
    color: #858585;
    color: var(--gfsp--base-color);
}
.sp_material .gfield_label,
.sp_material .ginput_complex label {
    font-size: 0.9em;
}
.sp_material .ginput_complex label,
.sp_material .ginput_counter {
        -moz-opacity: 0.75;
        -khtml-opacity: 0.75;
        filter: alpha(opacity=75);
    opacity: 0.75;
}
.sp_material input,
.sp_material select,
.sp_material textarea,
.sp_material input[type="text"],
.sp_material input[type="email"],
.sp_material input[type="url"],
.sp_material input[type="password"],
.sp_material input[type="search"],
.sp_material input[type="tel"],
.sp_material input[type="number"]  {
    padding: 0.7em 0.05em;
    padding: var(--gfsp--field-v-padding) 0.05em;
    border-bottom: var(--gfsp--field-border-width) solid;
    border-color: #919191;
    outline: none;
}
.sp_material .gfield_error [aria-invalid="true"] {
    border-width: 2px;
}
.gf_stylespro.sp_material input,
.gf_stylespro.sp_material select,
.gf_stylespro.sp_material textarea,
.gf_stylespro.sp_material input[type="text"],
.gf_stylespro.sp_material input[type="email"],
.gf_stylespro.sp_material input[type="url"],
.gf_stylespro.sp_material input[type="password"],
.gf_stylespro.sp_material input[type="tel"],
.gf_stylespro.sp_material input[type="search"],
.gf_stylespro.sp_material input[type="number"],
.gf_stylespro.sp_material .chosen-container-multi .chosen-choices,
.gform_wrapper .sp_material .gfield_error [aria-invalid="true"]  {
    border-radius: 0;
    border-top: 0;
    border-right: 0;
    border-left: 0;
    background-color: transparent;
}
.sp_material button,
.sp_material .button,
.sp_material input[type=button],
.sp_material input[type=submit] {
    color: grey;
    border: 1px solid #f8f8f8;
    border-bottom-color: #c9c9c9;
    border-right-color: #c9c9c9;
    -ms-transition: all 0.3s;
    -moz-transition: all 0.3s;
    -webkit-transition: all 0.3s;
    -o-transition: all 0.3s;
    transition: all 0.3s;
    padding: 1em 1.5em;
}
.sp_material button:active,
.sp_material .button:active,
.sp_material input[type=button]:active,
.sp_material input[type=submit]:active {
    background: #e2e2e2;
    color: #797979;
}
.sp_material button:hover,
.sp_material .button:hover,
.sp_material input[type=button]:hover,
.sp_material input[type=submit]:hover {
    background: #ffffff;
    color: #797979;
    box-shadow: 0px 4px 15px -5px;
}

/* RADIO AND CHECKBOXES */
.sp_material input[type=checkbox]:not(old) + label,
.sp_material input[type=radio   ]:not(old) + label {
    line-height: 1.8;
    padding: 0 1em 0 0;
    -moz-opacity: 0.7;
    -khtml-opacity: 0.7;
    filter: alpha(opacity=70);
    opacity: 0.7;
    margin-top: 0.25em;
    margin-bottom: 0.25em;
    -ms-transition: all 0.4s;
    -moz-transition: all 0.4s;
    -webkit-transition: all 0.4s;
    -o-transition: all 0.4s;
    transition: all 0.4s;
    margin-left: 0;
    text-indent: 0;
    text-transform: none;
}
.sp_material input[type=checkbox]:not(old) + label:before,
.sp_material input[type=radio   ]:not(old) + label:before{
    overflow: visible;
    line-height: .75;
    display: inline-block;
    padding: 0.5em;
    width: auto;
    height: auto;
    vertical-align: inherit;
    -moz-opacity: 0.7;
    -khtml-opacity: 0.7;
    filter: alpha(opacity=70);
    opacity: 0.7;
    -ms-transition: all 0.5s;
    -moz-transition: all 0.4s;
    -webkit-transition: all 0.5s;
    -o-transition: all 0.5s;
    transition: all 0.5s;
    color: black;
    border-radius: 2em;
    -webkit-border-radius: 2em;
    -moz-border-radius: 2em;
    margin-right: 0.5em;
    -moz-box-shadow: 0 0 0 0 #4a92ff, 0 0 0 0 #4a92ff inset;
    -webkit-box-shadow: 0 0 0 0 #4a92ff, 0 0 0 0 #4a92ff inset;
    box-shadow: 0 0 0 0 var(--gfsp-choice-style-color, #4a92ff), 0 0 0 0 var(--gfsp-choice-style-color, #4a92ff) inset;
    background-color: #f1f1f1;
}
.gfsp_o_frame .gfsp_choice_icn input:not(old) + label:before,
.gfsp_o_frame .gfsp_choice_img input:not(old) + label:before {
    display: none;
}
.sp_material input[type=checkbox]:not(old):checked + label,
.sp_material input[type=radio   ]:not(old):checked + label{
    opacity: 1;
}

.sp_material input[type=checkbox]:not(old):checked + label:before,
.sp_material input[type=radio   ]:not(old):checked + label:before{
    color: white;
    -moz-box-shadow: none;
    -webkit-box-shadow: none;
    box-shadow: none;
    -moz-opacity: 1;
    -khtml-opacity: 1;
    filter: alpha(opacity=100);
    opacity: 1;
    -moz-box-shadow: 0 0 10px -2px #4a92ff,0 0 0 20px #4a92ff inset;
    -webkit-box-shadow: 0 0 10px -2px #4a92ff,0 0 0 20px #4a92ff inset;
    box-shadow: 0 0 10px -2px var(--gfsp-choice-style-color, #4a92ff),0 0 0 20px var(--gfsp-choice-style-color, #4a92ff) inset;
}
.sp_material .gfsp_o_round li:not(.gfsp_choice_icn):not(.gfsp_choice_img) :checked + label:before{
    color: inherit;
    text-shadow: none;
}
.sp_material input[type=checkbox]:not(old) + label:before{
    content: '\2713\fe0e';
}
.sp_material input[type=radio]:not(old) + label:before{
    content: '\2717\fe0e';
}
.sp_material .gf_list_2col:not(.gfield_price) .o_label,
.sp_material .gf_list_3col:not(.gfield_price) .o_label,
.sp_material .gf_list_4col:not(.gfield_price) .o_label,
.sp_material .gf_list_5col:not(.gfield_price) .o_label{
    width: calc(100% - 2.5em)
}
.sp_material .gfield_description {
    background: rgba(0, 0, 0, 0.02) none repeat scroll 0% 0%;
}
.sp_material .validation_message {
    font-weight: bold;
}
.sp_material .gfield_error .gfield_label {
    color: #f15555;
    color: var(--gfsp--warning-color, #f15555);
}
.sp_material .gfield_error input,
.sp_material .gfield_error select,
.sp_material .gfield_error textarea,
.sp_material .gfield_error input[type="text"],
.sp_material .gfield_error input[type="email"],
.sp_material .gfield_error input[type="url"],
.sp_material .gfield_error input[type="tel"],
.sp_material .gfield_error input[type="password"],
.sp_material .gfield_error input[type="number"],
.sp_material .gfield_error input[type="search"] {
    border-color: #f79586;
    border-color: var(--gfsp--warning-color, #f79586);
}
.sp_material .gf_progressbar {
    -webkit-border-radius: 0;
    -moz-border-radius: 0;
    border-radius: 0;
}

.sp_material .gfsp_icon{
    border-bottom-width: 2px;
    border-bottom-color: #919191;
    padding: 0.7em 0.05em;
    padding: var(--gfsp--field-v-padding) 0.05em;
    vertical-align: middle;
    border-top: 0;
    border-left: 0;
    border-right: 0;
}
.sp_material .gf_icn_bs .gfsp_icon{
    border-color: #c5c5c5;
}
.sp_material .gfsp_icon + input,
.sp_material .gfsp_icon + select {
    padding-left: .2em;
}
.sp_material .has_gfsp_icn > * {
    vertical-align: middle;
}

/* Floating labels */
.floatable_label.ginput_container.has_gfsp_icn label.gfield_label {
    margin-left: 2.3em;
}
.gf_icn_inset .floatable_label.ginput_container.has_gfsp_icn label.gfield_label,
.gf_icn_bs .floatable_label.ginput_container.has_gfsp_icn label.gfield_label {
    margin-left: 2.7em;
}
.gf_icon_after .floatable_label.ginput_container.has_gfsp_icn label.gfield_label {
    margin-left: 0;
}
.gf_stylespro_wrapper .gf_stylespro .floatable_label .gfield_label {
    font-size: calc( var(--gfsp--label-font-size, 1em) * .9) ;
}
.floatable_label.ginput_container:not(.float_label) label.gfield_label {
    font-size: var(--gfsp--label-font-size, 1em);
}
.floatable_label.ginput_container label.gfield_label {
    position: absolute;
    transition: .2s ease-in;
    top: .8em;
    pointer-events: none;
}
.floatable_label.ginput_container {
    position: relative;
    margin-top: 1.75em;
}
.float_label.ginput_container label.gfield_label,
.gravity-theme .float_label.ginput_container label.gfield_label {
    top: -1.5em;
    transition: .2s ease-out;
}
.floatable_label.ginput_container.has_gfsp_icn.float_label label.gfield_label  {
    margin-left: 0;
}
/* Placeholders */
.gf_stylespro .floatable_label:not(.float_label) *::-webkit-input-placeholder {
    opacity: 0;
}
.gf_stylespro .floatable_label:not(.float_label) *:-moz-placeholder {		/* FF 4-18 */
    opacity:  0;
}
.gf_stylespro .floatable_label:not(.float_label) *::-moz-placeholder {		/* FF 19+ */
    opacity:  0;
}
.gf_stylespro .floatable_label:not(.float_label) *:-ms-input-placeholder { /* IE 10+ */
    opacity:  0;
}
.gf_stylespro .floatable_label:not(.float_label) placeholder,
.gf_stylespro .floatable_label:not(.float_label) .gf_placeholder {
    opacity:  0;
}

/* Float Complex Labels */
.ginput_complex .floatable_label:not(.float_label) label {
    margin-top: -1.9em;
    font-size: 1em;
    transition: .2s ease-out;
}

.ginput_complex .floatable_label label {
    position: absolute;
    transition: .2s ease-in;
    pointer-events: none;
}

.ginput_complex .floatable_label {
    position: relative;
    padding-bottom: 1.95em;
}
/* Complex Labels Above Input */
.field_sublabel_above .ginput_complex .floatable_label:not(.float_label) label {
    margin-top: .8em;
}
.field_sublabel_above .ginput_complex .floatable_label.float_label label {
    margin-top: -1.9em;
}
.field_sublabel_above .ginput_complex .floatable_label {
    padding-top: 1.95em;
    padding-bottom: 0;
}
.gfield:not(.gf_icon_after) .ginput_complex.has_gfsp_icn .floatable_label:first-child label {
    margin-left: 2.2em;
}

.gfield:not(.gf_icon_after) .ginput_container_email.ginput_complex.has_gfsp_icn .floatable_label label {
    margin-left: 2.2em;
}

.gform_wrapper.gravity-theme .sp_material .floatable_label label + input {
    padding-left: 0;
}

.gf_noeffect input[type=radio   ]:not(old) + label,
.gf_noeffect input[type=checkbox]:not(old) + label {
    opacity: initial;
}

.sp_material_wrapper {
    --gfsp--field-margin-bottom: 4em;
    --gfsp--placeholder-color: rgba(191, 191, 191, 0.40);
    --gfsp--base-color: #858585;
    --gfsp--field-v-padding: .7em;
    --gfsp--field-border-width: 2px;
}