/*******************************************************************************************************************************************
*******************************************************************************************************************************************
######## ####### ######## ## ## ######
## ## ## ## ## ### ### ## ##
## ## ## ## ## #### #### ##
###### ## ## ######## ## ### ## ######
## ## ## ## ## ## ## ##
## ## ## ## ## ## ## ## ##
## ####### ## ## ## ## ######
*******************************************************************************************************************************************
**************************** see http://www.dev.equideow.com/doc/bow for more details *****************************************************
*******************************************************************************************************************************************
*******************************************************************************************************************************************/
/*******************************************************************************************************************************************
## ### ######## ######## ##
## ## ## ## ## ## ##
## ## ## ## ## ## ##
## ## ## ######## ###### ##
## ######### ## ## ## ##
## ## ## ## ## ## ##
######## ## ## ######## ######## ########
*******************************************************************************************************************************************/
.form__label{
color: #3d251b;
font-size: 13px;
font-weight: bold;
}
.form__label--required:after{
content: "*";
color: #c93a3a;
}
/*******************************************************************************************************************************************
######## ######## ## ## ########
## ## ## ## ##
## ## ## ## ##
## ###### ### ##
## ## ## ## ##
## ## ## ## ##
## ######## ## ## ##
*******************************************************************************************************************************************/
input.form__text{
background-color: #fff;
background-repeat: no-repeat;
background-position: right 5px center;
border-color: #af9c8c;
border-radius: 4px;
border-style: solid;
border-width: 1px;
color: #82685B;
font-size: 16px;
outline: none;
padding: 9px 20px;
text-indent: 0;
transition: all .125s ease-in-out;
}
input.form__text:focus{
box-shadow: 0 0 8px rgba(130, 104, 91, 0.3);
background-color: #fff;
}
input.form__text:active{
box-shadow: 0 0 5px #37659A inset;
}
input.form__text:hover{
box-shadow: 0 0 8px rgba(130, 104, 91, 0.3);
}
input.form__text::placeholder{
color: #af9c8c;
font-style: italic;
}
input.form__text--softcurrency,
input.form__text--hardcurrency{
background-position: right 5px center;
padding-left: 5px;
padding-right: 30px;
text-align: right;
}
input.form__text--softcurrency{
background-image: url(/media/equideo/image/fonctionnels/24/equus.png);
}
input.form__text--hardcurrency {
background-image: url(/media/equideo/image/fonctionnels/24/pass.png);
}
input.form__text--softcurrency[disabled],
input.form__text--hardcurrency[disabled]{
border-color: #949494;
background-color: #d0d0d0;
color: #949494;
}
input.form__text[disabled]:hover{
box-shadow: none;
}
/* FORM__TEXT--SUCCESS ********************************************************************************************************************
******************************************************************************************************************************************/
.form__text.form__text--success{
background-image: url(data:image/svg+xml;base64,PD94bWwgdmVyc2lvbj0iMS4wIiBlbmNvZGluZz0iVVRGLTgiPz48c3ZnIHdpZHRoPSI0OHB4IiBoZWlnaHQ9IjQ4cHgiIHZpZXdCb3g9IjAgMCA0OCA0OCIgdmVyc2lvbj0iMS4xIiB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHhtbG5zOnhsaW5rPSJodHRwOi8vd3d3LnczLm9yZy8xOTk5L3hsaW5rIj48cGF0aCBmaWxsPSIjYmZkMTZjIiBkPSJNNDYuNDM3OTAxNSw2Ljc3NzUwMTI2IEM0NC40NjQyNTA4LDQuOTQ5MTg4OCA0MS4zNTEwNjQ0LDUuMDY5MjUwNzkgMzkuNTIyNzUyLDcuMDQyOTAxNDYgTDE3LjczODg3MjQsMzAuMzc3MDU1MiBMOC40NzcyNDgwNSwyMS4wMjQ4NTc4IEM2LjY0ODkzNTU4LDE5LjA1MTIwNzIgMy41Mzc4NTU1MSwxOC45MzExNDUyIDEuNTYyMDk4NDksMjAuNzU5NDU3NiBDLTAuNDExNTUyMTc3LDIyLjU4Nzc3MDEgLTAuNTMxNjE0MTcsMjUuNjk4ODUwMiAxLjI5NjY5ODI5LDI3LjY3MjUwMDggTDEzLjgzMTU5MTcsNDAuMzMxNjY4OSBDMTQuMDE5MDU2OSw0MC41OTI4NTY0IDE0LjIzMzkwNDcsNDAuODM5Mjk5NSAxNC40ODAzNDc3LDQxLjA2Njc4NTMgQzE1LjE0MTc0MTksNDEuNjc3NjI3MSAxNS45MzM3Mjk4LDQyLjA1MjU1NzUgMTYuNzU5NDE5Miw0Mi4yMzE1OTczIEMxNi43NjM2MzIsNDIuMjMzNzAzNyAxNi43Njc4NDQ3LDQyLjIzMzcwMzcgMTYuNzcyMDU3NCw0Mi4yMzM3MDM3IEMxNy4wMDc5Njg2LDQyLjI4NDI1NjEgMTcuMjQ1OTg2Myw0Mi4zMTU4NTEzIDE3LjQ4NDAwMzksNDIuMzMwNTk1OCBDMTcuNjA2MTcyMyw0Mi4zNDExMjc2IDE3LjcyNDEyNzksNDIuMzQ5NTUzIDE3Ljg0NDE4OTksNDIuMzUxNjU5MyBDMTcuOTY2MzU4Miw0Mi4zNDk1NTMgMTguMDg0MzEzOSw0Mi4zNDExMjc2IDE4LjIwNDM3NTksNDIuMzMwNTk1OCBDMTguNDQ0NDk5OSw0Mi4zMTU4NTEzIDE4LjY4MjUxNzUsNDIuMjg0MjU2MSAxOC45MTg0Mjg4LDQyLjIzMzcwMzcgQzE4LjkyMjY0MTUsNDIuMjMzNzAzNyAxOC45MjY4NTQyLDQyLjIzMzcwMzcgMTguOTMxMDY2OSw0Mi4yMzE1OTczIEMxOS43NTY3NTY0LDQyLjA1MjU1NzUgMjAuNTQ4NzQ0Myw0MS42Nzc2MjcxIDIxLjIxMDEzODQsNDEuMDY2Nzg1MyBDMjEuNDc3NjQ1LDQwLjgxODIzNiAyMS43MDUxMzA4LDQwLjU0MjMwNCAyMS45MDczNDA1LDQwLjI1MTYyNzYgTDQ2LjcwMzMwMTcsMTMuNjkyNjUwOCBDNDguNTMxNjE0MiwxMS43MTY4OTM4IDQ4LjQxMTU1MjIsOC42MDU4MTM3MyA0Ni40Mzc5MDE1LDYuNzc3NTAxMjYiIGlkPSJwYXRoLTEiPjwvcGF0aD48L3N2Zz4=);
background-size: 12px 12px;
border-color: #bfd16c;
}
.form__text.form__text--success:focus{
background-position: 120% center;
}
/* FORM__TEXT--DANGER *********************************************************************************************************************
******************************************************************************************************************************************/
.form__text.form__text--danger{
background-image: url(data:image/svg+xml;base64,PD94bWwgdmVyc2lvbj0iMS4wIiBlbmNvZGluZz0iVVRGLTgiPz48c3ZnIHdpZHRoPSI0OHB4IiBoZWlnaHQ9IjQ4cHgiIHZpZXdCb3g9IjAgMCA0OCA0OCIgdmVyc2lvbj0iMS4xIiB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHhtbG5zOnhsaW5rPSJodHRwOi8vd3d3LnczLm9yZy8xOTk5L3hsaW5rIj48cGF0aCBmaWxsPSIjZGIyODI4IiBkPSJNMjQuMDA3MTAyOCwzMS4xMTU0NDcxIEwxNC4xMTgyMjY4LDQxLjAyNTIxNzQgQzEyLjE2NDQ0MzMsNDIuOTY4MzcyOSA4Ljk3NjAzODY2LDQyLjk1Nzc0NDkgNy4wMzI4ODMxNiw0MS4wMDM5NjE0IEM1LjA5MTQ5ODk5LDM5LjA0ODQwNjUgNS4xMDIxMjcwMSwzNS44NjAwMDE5IDcuMDU1OTEwNTIsMzMuOTE2ODQ2NCBMMTYuOTE0MzEyOCwyNC4wMzc2MTI4IEw3LjAwNDU0MTc4LDE0LjE0ODczNzUgQzUuMDYxMzg2MjgsMTIuMTk0OTU0IDUuMDcyMDE0Myw5LjAwNjU0OTM1IDcuMDI1Nzk3ODEsNy4wNjMzOTM4NSBDOC45Nzk1ODEzMyw1LjEyMDIzODM1IDEyLjE2Nzk4Niw1LjEzMDg2NjM2IDE0LjExMTE0MTUsNy4wODQ2NDk4OCBMMjMuOTkyMTQ3NSwxNi45NDQ4MjIzIEwzMy44ODEwMjE3LDcuMDM1MDUyNDcgQzM1LjgzNDgwNTIsNS4wOTE4OTY5NyAzOS4wMjMyMDk4LDUuMTAyNTI0OTkgNDAuOTY2MzY1Myw3LjA1NjMwODUxIEM0Mi45MDk1MjA4LDkuMDEwMDkyMDIgNDIuODk4ODkyOCwxMi4xOTg0OTY3IDQwLjk0NTEwOTMsMTQuMTQxNjUyMiBMMzEuMDg0OTM3NiwyNC4wMjI2NTc1IEw0MC45OTQ3MDY3LDMzLjkxMTUzMjMgQzQyLjkzNzg2MjIsMzUuODY1MzE1OSA0Mi45MjcyMzQyLDM5LjA1MzcyMDUgNDAuOTczNDUwNyw0MC45OTY4NzYgQzM5LjAxNzg5NTgsNDIuOTM4MjYwMiAzNS44Mjk0OTEyLDQyLjkyNzYzMjIgMzMuODg2MzM1Nyw0MC45NzM4NDg3IEwyNC4wMDcxMDI4LDMxLjExNTQ0NzEgWiIgaWQ9InBhdGgtMSI+PC9wYXRoPjwvc3ZnPg==);
background-size: 12px 12px;
border-color: #db2828;
}
.form__text.form__text--danger:focus{
background-position: 120% center;
}
/* FORM__TEXT--SEARCH *********************************************************************************************************************
******************************************************************************************************************************************/
.form__text.form__text--search{
background-image: url(data:image/svg+xml;base64,PD94bWwgdmVyc2lvbj0iMS4wIiBlbmNvZGluZz0iVVRGLTgiPz48c3ZnIHdpZHRoPSI0OHB4IiBoZWlnaHQ9IjQ4cHgiIHZpZXdCb3g9IjAgMCA0OCA0OCIgdmVyc2lvbj0iMS4xIiB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHhtbG5zOnhsaW5rPSJodHRwOi8vd3d3LnczLm9yZy8xOTk5L3hsaW5rIj48cGF0aCBmaWxsPSIjZGIyODI4IiBkPSJNMjQuMDA3MTAyOCwzMS4xMTU0NDcxIEwxNC4xMTgyMjY4LDQxLjAyNTIxNzQgQzEyLjE2NDQ0MzMsNDIuOTY4MzcyOSA4Ljk3NjAzODY2LDQyLjk1Nzc0NDkgNy4wMzI4ODMxNiw0MS4wMDM5NjE0IEM1LjA5MTQ5ODk5LDM5LjA0ODQwNjUgNS4xMDIxMjcwMSwzNS44NjAwMDE5IDcuMDU1OTEwNTIsMzMuOTE2ODQ2NCBMMTYuOTE0MzEyOCwyNC4wMzc2MTI4IEw3LjAwNDU0MTc4LDE0LjE0ODczNzUgQzUuMDYxMzg2MjgsMTIuMTk0OTU0IDUuMDcyMDE0Myw5LjAwNjU0OTM1IDcuMDI1Nzk3ODEsNy4wNjMzOTM4NSBDOC45Nzk1ODEzMyw1LjEyMDIzODM1IDEyLjE2Nzk4Niw1LjEzMDg2NjM2IDE0LjExMTE0MTUsNy4wODQ2NDk4OCBMMjMuOTkyMTQ3NSwxNi45NDQ4MjIzIEwzMy44ODEwMjE3LDcuMDM1MDUyNDcgQzM1LjgzNDgwNTIsNS4wOTE4OTY5NyAzOS4wMjMyMDk4LDUuMTAyNTI0OTkgNDAuOTY2MzY1Myw3LjA1NjMwODUxIEM0Mi45MDk1MjA4LDkuMDEwMDkyMDIgNDIuODk4ODkyOCwxMi4xOTg0OTY3IDQwLjk0NTEwOTMsMTQuMTQxNjUyMiBMMzEuMDg0OTM3NiwyNC4wMjI2NTc1IEw0MC45OTQ3MDY3LDMzLjkxMTUzMjMgQzQyLjkzNzg2MjIsMzUuODY1MzE1OSA0Mi45MjcyMzQyLDM5LjA1MzcyMDUgNDAuOTczNDUwNyw0MC45OTY4NzYgQzM5LjAxNzg5NTgsNDIuOTM4MjYwMiAzNS44Mjk0OTEyLDQyLjkyNzYzMjIgMzMuODg2MzM1Nyw0MC45NzM4NDg3IEwyNC4wMDcxMDI4LDMxLjExNTQ0NzEgWiIgaWQ9InBhdGgtMSI+PC9wYXRoPjwvc3ZnPg==);
background-size: 12px 12px;
}
.form__text.form__text--search:focus{
background-position: 120% center;
}
/*******************************************************************************************************************************************
######## #### ######## ## ########
## ## ## ## ## ##
## ## ## ## ## ##
###### ## ###### ## ## ##
## ## ## ## ## ##
## ## ## ## ## ##
## #### ######## ######## ########
********************************************************************************************************************************************/
.form__field{
position: relative;
min-height: 24px;
}
.form__field::after{
clear: both;
content: "";
display: block;
}
/** label (for radio or checkbox) **********************************************************************************************************/
.form__field__label{
position: relative;
cursor: pointer;
display: block;
padding: 3px 0 0 30px;
}
.form__field__label:before{
z-index: 1;
}
.form__field__label:after{
cursor: pointer;
}
.form__field__label:before,
.form__field__label:after{
content: "";
position: absolute;
transition: all .15s ease-in-out;
}
.form__field__label::selection{
background-color: transparent;
}
.body--ltr .form__field__label{
float: left;
}
.body--rtl .form__field__label{
float: right;
}
.form__field__input[disabled] + .form__field__label{
cursor: default;
pointer-events: none;
}
/** input (radio or checkbox) *************************************************************************************************************/
.form__field__input{
height: 1px;
position: absolute;
width: 1px;
z-index: -1;
}
/*******************************************************************************************************************************************
###### ## ## ######## ###### ## ## ######## ####### ## ##
## ## ## ## ## ## ## ## ## ## ## ## ## ## ##
## ## ## ## ## ## ## ## ## ## ## ## ##
## ######### ###### ## ##### ######## ## ## ###
## ## ## ## ## ## ## ## ## ## ## ## ##
## ## ## ## ## ## ## ## ## ## ## ## ## ## ##
###### ## ## ######## ###### ## ## ######## ####### ## ##
********************************************************************************************************************************************/
/** checkbox tick **************************************************************************************************************************/
.form__field__label--checkbox:before {
border: 2px solid transparent;
height: 5px;
left: 7px;
top: 7px;
transform: rotate(-45deg) scale(2);
width: 10px;
}
/** checkbox background ********************************************************************************************************************/
.form__field__label--checkbox:after {
background: #fff;
border-color: #AF9C8C;
border-radius: 4px;
border-style: solid;
border-width: 1px;
box-shadow: 0 2px 2px rgba(0,0,0,0.2) inset;
height: 22px;
left: 0;
top: 0;
width: 22px;
}
/** required fix ***************************************************************************************************************************/
.form__field--checkbox .form__field__input{
left: 10px;
top: 10px;
}
/** checked ********************************************************************************************************************************/
.form__field__input:checked + .form__field__label--checkbox:before {
border-color: #fff;
border-top-style: none;
border-right-style: none;
transform: rotate(-45deg) scale(1);
-webkit-transform: rotate(-45deg) scale(1);
-moz-transform: rotate(-45deg) scale(1);
-ms-transform: rotate(-45deg) scale(1);
-o-transform: rotate(-45deg) scale(1);
}
.form__field__input:checked + .form__field__label--checkbox:after{
background-color: #37659A;
border-color: #37659A;
}
/** disabled *******************************************************************************************************************************/
.form__field__input[disabled] + .form__field__label--checkbox:before {
display: none;
}
.form__field__input[disabled] + .form__field__label--checkbox:after{
background: #d0d0d0;
border-color: #949494;
box-shadow: none;
}
/*******************************************************************************************************************************************
######## ### ######## #### #######
## ## ## ## ## ## ## ## ##
## ## ## ## ## ## ## ## ##
######## ## ## ## ## ## ## ##
## ## ######### ## ## ## ## ##
## ## ## ## ## ## ## ## ##
## ## ## ## ######## #### #######
********************************************************************************************************************************************/
/** radio oval ****************************************************************************************************************************/
.form__field__label--radio:before {
border-radius: 6px;
top: 6px;
transform: scale(2);
height: 12px;
left: 6px;
width: 12px;
}
/** radio background ***********************************************************************************************************************/
.form__field__label--radio:after {
background: #fff;
border-color: #AF9C8C;
border-radius: 12px;
border-style: solid;
border-width: 1px;
box-shadow: inset 0 3px 3px 0 rgba(0,0,0,0.20);
height: 22px;
left: 0;
top: 0;
width: 22px;
}
/** required fix ***************************************************************************************************************************/
.form__field--radio .form__field__input{
left: 10px;
top: 10px;
}
/** checked ********************************************************************************************************************************/
.form__field__input:checked + .form__field__label--radio:before {
background: #fff;
transform: scale(1);
}
.form__field__input:checked + .form__field__label--radio:after{
background-color: #37659A;
border-color: #37659A;
}
/** disabled *******************************************************************************************************************************/
.form__field__input[disabled] + .form__field__label--radio:before {
display: none;
}
.form__field__input[disabled] + .form__field__label--radio:after{
background: #d0d0d0;
border-color: #949494;
box-shadow: none;
}
/*******************************************************************************************************************************************
######## ### ## ## ###### ########
## ## ## ## ### ## ## ## ##
## ## ## ## #### ## ## ##
######## ## ## ## ## ## ## #### ######
## ## ######### ## #### ## ## ##
## ## ## ## ## ### ## ## ##
## ## ## ## ## ## ###### ########
********************************************************************************************************************************************/
.rangeslider{
background: rgba(0,0,0,0.2);
border-radius: 9px;
box-shadow: inset 0 4px 8px 0 rgba(0,0,0,0.2);
direction: ltr;
height: 18px;
position: relative;
}
/** range fill *****************************************************************************************************************************/
.rangeslider__fill{
transition: background .15s;
position: absolute;
z-index: 1;
display: block;
height: 12px;
left: 3px;
top: 3px;
border-radius: 6px;
overflow: hidden;
}
.rangeslider__fill::after{
position: absolute;
content: "";
display: block;
top: 0;
bottom: 0;
left: 0;
right: 0;
}
.rangeslider__fill{
background-color: #7DD2FE;
}
.rangeslider__fill::after{
background-size: 1rem 1rem;
z-index: 2;
}
.rangeslider__fill--full{
background-color: #F6CE1D;
}
/** fallback for IE & Edge ******************************************************************************************************************/
body:not(.body--edge):not(.body--ie11) .rangeslider__fill{
background-blend-mode: soft-light;
background-image: linear-gradient(to top, #000000, #ffffff);
}
body:not(.body--edge):not(.body--ie11) .rangeslider__fill::after{
background-image: linear-gradient(-45deg,rgba(0,0,0,0.3) 25%,transparent 25%,transparent 50%,rgba(0,0,0,0.3) 50%,rgba(0,0,0,0.3) 75%,transparent 75%,transparent);
mix-blend-mode: soft-light;
}
/** range handle ***************************************************************************************************************************/
.rangeslider__handle{
width: 24px;
height: 24px;
border-radius: 12px;
background: #fff;
position: absolute;
z-index: 2;
top: -3px;
border: 2px solid #82685B;
box-sizing: border-box;
transition: box-shadow .15s;
}
.rangeslider:not(.rangeslider--disabled) .rangeslider__handle:hover{
box-shadow: 0 1px 1px rgba(0,0,0,.3);
cursor: pointer;
}
.rangeslider__handle::before{
content: "";
display: block;
position: absolute;
border-color: #3d251b;
border-style: solid;
border-width: 0px 1px 0px 1px;
box-sizing: border-box;
height: 8px;
left: calc(50% - 2px);
transition: transform .15s ease-in-out;
top: 6px;
width: 4px;
}
.rangeslider--active .rangeslider__handle{
transform: scale3d(1.2,1.2,1.2);
}
/** rangeslider : values ******************************************************************************************************************/
.rangeslider__value{
position: relative;
white-space: nowrap;
font-weight: bold;
font-size: 16px;
line-height: 24px;
}
.rangeslider__value img{
position: absolute;
top: -4px;
width: 32px;
height: 32px;
}
/** input text near rangeslider************************************************************************************************************/
.form__field .form__text--rangeslider{
padding: 9px 10px;
pointer-events: none;
}
/** disabled ******************************************************************************************************************************/
.rangeslider--disabled .rangeslider__handle,
.rangeslider--disabled .rangeslider__handle::before{
border-color: #949494;
}
body:not(.body--edge):not(.body--ie11) .rangeslider--disabled .rangeslider__fill{
background: #949494;
}
body:not(.body--edge):not(.body--ie11) .rangeslider--disabled .rangeslider__fill::after{
display: none;
}
/*******************************************************************************************************************************************
###### ## ## #### ######## ###### ## ##
## ## ## ## ## ## ## ## ## ## ##
## ## ## ## ## ## ## ## ##
###### ## ## ## ## ## ## #########
## ## ## ## ## ## ## ## ##
## ## ## ## ## ## ## ## ## ## ##
###### ### ### #### ## ###### ## ##
********************************************************************************************************************************************/
.form__field__switch{
background: #fff;
border-radius: 16px;
border-width: 1px;
border-style: solid;
border-color: #af9c8c;
box-shadow: 0 1px 1px rgba(0,0,0,.3) inset;
box-sizing: border-box;
cursor: pointer;
display: block;
height: 32px;
position: relative;
transition: all .15s ease-in-out;
width: 60px;
}
.form__field__switch::after{
left: 4px;
top: 3px;
background: #82685B;
border-radius: 12px;
content: "";
display: block;
height: 24px;
position: absolute;
transition: all .15s ease-in-out;
transform: translate3d(0,0,0);
width: 24px;
}
/** disabled *****************************************************************************************************************************/
.form__field__switchinput[disabled] + .form__field__switch{
cursor: default;
background: #D0D0D0;
box-shadow: none;
}
.form__field__switchinput[disabled] + .form__field__switch::after{
background: #949494;
box-shadow: none;
}
/** input ********************************************************************************************************************************/
.form__field__switchinput{
position: absolute;
visibility: hidden;
}
/** input checked ************************************************************************************************************************/
.form__field__switchinput:checked + .form__field__switch {
background: #37659A;
border-color: #37659A;
}
.form__field__switchinput:checked + .form__field__switch::after{
background: #fff;
box-shadow: 0 1px 1px rgba(0,0,0,.3);
transform: translate3d(26px,0,0);
}
/*******************************************************************************************************************************************
######## ######## ## ## ######## ### ######## ######## ###
## ## ## ## ## ## ## ## ## ## ## ##
## ## ## ## ## ## ## ## ## ## ## ##
## ###### ### ## ## ## ######## ###### ## ##
## ## ## ## ## ######### ## ## ## #########
## ## ## ## ## ## ## ## ## ## ## ##
## ######## ## ## ## ## ## ## ## ######## ## ##
********************************************************************************************************************************************/
.form__textarea{
background: #fff;
border-color: #af9c8c;
border-radius: 4px;
border-style: solid;
border-width: 1px;
color: #82685B;
font-size: 16px;
outline: none;
padding: 9px 20px;
text-indent: 0;
transition: all .125s ease-in-out;
}
.form__textarea:focus{
box-shadow: 0 0 8px rgba(130, 104, 91, 0.3);
background: #fff;
}
.form__textarea:active{
box-shadow: 0 0 5px #37659A inset;
}
.form__textarea:hover{
box-shadow: 0 0 8px rgba(130, 104, 91, 0.3);
}
.form__textarea::placeholder{
color: #af9c8c;
font-style: italic;
}
/* FORM__TEXTAREA--SUCCESS ****************************************************************************************************************
******************************************************************************************************************************************/
.form__textarea.form__textarea--success{
border-color: #bfd16c;
font-weight: bold;
}
/* FORM__TEXTAREA--DANGER *****************************************************************************************************************
******************************************************************************************************************************************/
.form__textarea.form__textarea--danger{
border-color: #db2828;
font-weight: bold;
}
/*******************************************************************************************************************************************
###### ######## ## ######## ###### ########
## ## ## ## ## ## ## ##
## ## ## ## ## ##
###### ###### ## ###### ## ##
## ## ## ## ## ##
## ## ## ## ## ## ## ##
###### ######## ######## ######## ###### ##
********************************************************************************************************************************************/
.form__select,
.body--chrome .form__select{
background-color: #fff;
background-image: url(data:image/svg+xml;base64,PD94bWwgdmVyc2lvbj0iMS4wIiBlbmNvZGluZz0iVVRGLTgiPz48c3ZnIHdpZHRoPSI0OHB4IiBoZWlnaHQ9IjQ4cHgiIHZpZXdCb3g9IjAgMCA0OCA0OCIgdmVyc2lvbj0iMS4xIiB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHhtbG5zOnhsaW5rPSJodHRwOi8vd3d3LnczLm9yZy8xOTk5L3hsaW5rIj48cGF0aCBmaWxsPSIjODI2ODViIiBkPSJNMjYuODI2MDg4NiwzNi44MjYyODQzIEMyNS4yNjM5OTE1LDM4LjM4ODEyMDYgMjIuNzMxMzMxNiwzOC4zODgxMjA2IDIxLjE2OTIzNDQsMzYuODI2Mjg0MyBMMS4xNjkyMzQzOSwxNi44Mjk2MjUgQy0wLjM5Mjg2Mjc4MSwxNS4yNjc3ODg4IC0wLjM5Mjg2Mjc4MSwxMi43MzU1NTE5IDEuMTY5MjM0MzksMTEuMTczNzE1NyBDMi43MzEzMzE1NSw5LjYxMTg3OTQzIDUuMjYzOTkxNDcsOS42MTE4Nzk0MyA2LjgyNjA4ODY0LDExLjE3MzcxNTcgTDIzLjk5NzY2MTUsMjguMzQyNDIwMyBMNDEuMTY5MjM0NCwxMS4xNzM3MTU3IEM0Mi43MzEzMzE2LDkuNjExODc5NDMgNDUuMjYzOTkxNSw5LjYxMTg3OTQzIDQ2LjgyNjA4ODYsMTEuMTczNzE1NyBDNDguMzg4MTg1OCwxMi43MzU1NTE5IDQ4LjM4ODE4NTgsMTUuMjY3Nzg4OCA0Ni44MjYwODg2LDE2LjgyOTYyNSBMMjYuODI2MDg4NiwzNi44MjYyODQzIFoiPjwvcGF0aD48L3N2Zz4=);
background-position: right 10px center;
background-repeat: no-repeat;
background-size: 12px 12px;
border-radius: 4px;
border: 1px solid #af9c8c;
box-sizing: border-box;
color: #82685b;
cursor: pointer;
font-size: 16px;
height: 42px;
line-height: inherit;
outline: none;
padding: 3px 40px 9px 20px;
transition: all .125s ease-in-out;
-moz-appearance: none;
-webkit-appearance: none;
}
.body--chrome .form__select{
line-height: 2.3;
}
.form__select:focus,
.form__select:hover{
box-shadow: 0 0 8px rgba(130, 104, 91, 0.3);
}
.form__select:active{
background-size: 8px 8px;
background-position: right 12px center;
}
/*******************************************************************************************************************************************
###### ## ## ######## ## ## #### ########
## ## ## ## ## ## ### ### ## ##
## ## ## ## ## #### #### ## ##
###### ## ## ######## ## ### ## ## ##
## ## ## ## ## ## ## ## ##
## ## ## ## ## ## ## ## ## ##
###### ####### ######## ## ## #### ##
*******************************************************************************************************************************************/
button.form__submit:not(.disabled):active{
animation: none;
}
button.form__submit:not(.btn--s) .button-text-submit{
line-height: 36px;
}
button.form__submit.btn--s.btn--outline{
border-radius: 17px;
height: 34px;
}
button.form__submit.btn--s .button-text-submit{
line-height: 32px;
}
/*******************************************************************************************************************************************
###### ######## ### ######## ###### ## ##
## ## ## ## ## ## ## ## ## ## ##
## ## ## ## ## ## ## ## ##
###### ###### ## ## ######## ## #########
## ## ######### ## ## ## ## ##
## ## ## ## ## ## ## ## ## ## ##
###### ######## ## ## ## ## ###### ## ##
*******************************************************************************************************************************************/
input.form__search{
background-color: #fff;
border-color: #af9c8c;
border-radius: 20px;
border-style: solid;
border-width: 1px;
box-sizing: border-box;
color: #3d251b;
font-size: 16px;
height: 40px;
padding: 0 20px;
transition: all .15s ease-in-out;
}
.body--ltr input.form__search{
margin-right: -22px;
}
.body--rtl input.form__search{
margin-left: -22px;
}
input.form__search:focus{
background-color: #fff;
border-color: #79d1ff;
box-shadow: 0 0 5px rgba(121, 209, 255, 0.5) inset;
}
input.form__search::-webkit-input-placeholder{
font-style: italic;
color: #AF9C8C;
}
input.form__search::-moz-input-placeholder{
font-style: italic;
color: #AF9C8C;
}
input.form__search::-ms-input-placeholder{
font-style: italic;
color: #AF9C8C;
}
input.form__search::placeholder{
font-style: italic;
color: #AF9C8C;
}
.form__search__btn{
background: #37659A;
height: 24px;
min-width: 24px;
padding: 0;
position: relative;
top: 6px;
width: 24px;
}
.form__search__btn .svg{
display: block;
height: 16px;
margin: 4px;
width: 16px;
}
.body--ltr .form__search__btn{
right: 10px;
}
.body--rtl .form__search__btn{
left: 10px;
}