/* ********** forms ********** */

/* اعمال نمیشه
option[value=""][disabled]:first-child {
  color: red; /* Your desired styles for "please choose"
}
*/
.form-label, label { font-size: .875rem; /* 14px (decrease a bit) */ }

/* ********** Input ********** */
/* assign shadow to all input fileds */
input, select {
  border:1px solid #999 !important;
  /* box-shadow: 0 0 6px 1px rgba(62, 28, 131, 0.1);
  -webkit-box-shadow: 0 0 6px 1px rgba(62, 28, 131, 0.1); */
}

#login-tab.active, #signup-tab.active {
  border-color: #a6a6a6 !important;
border-bottom: none !important;
}

#login-form input {border:1px solid #999 !important; }

/*  in all pages.
this style here is much better than writing position-relative class in 10 pages
*/
.input-with-icon { position: relative; }

/*
in all pages & all forms, surely is eeded, otherwise icons icon inside input field get messy in page
*/
.input-with-icon i {
  position: absolute;
  transform: translateY(-50%);
  top: 50%;
  margin-right: .75rem;
  font-style: normal;
  color: #215463;
  opacity: 0.5;
  cursor: normal;
  pointer-events: none;
}

/* in all pages, in all input fields, all Email envelop icons
this style here is much better than writing font17 class in 10 pages
*/
.input-with-icon .fa-envelope,
.input-with-icon .fa-eye,
.input-with-icon .fa-eye-slash {
   font-size: 1.063rem;
}

/*  in all pages, in all input fields, all eye icons */
.input-with-icon .fa-eye, .input-with-icon .fa-eye-slash {
  cursor: pointer;
  pointer-events: auto !important;
}

/* ********** input fields & textarea placeholder ********** */
/* note: !important is required at the end, else wont work */

::placeholder, /* applies to all modern browsers  */
::-ms-input-placeholder,   /* IE 10+ */
::-moz-placeholder,   /* Firefox 18- */
::moz-placeholder,   /* Firefox 19- */
::-webkit-input-placeholder  /* Chrome/Opera/Safari */
{
  color: #b3b3b3 !important;
  font-size: .875rem !important;  /* decrease to 14px */
  text-align: left;
  /* for those input field which placeholder must be right, we write inline style there */
}

/* create a custom class
for example instagram field is ltr but its farsi placeholder must be rtl
*/
.placeholder-right::placeholder,
.placeholder-right::-ms-input-placeholder,
.placeholder-right::-moz-placeholder,
.placeholder-right::moz-placeholder,
.placeholder-right::-webkit-input-placeholder {
    text-align: right !important;
}

textarea::placeholder,
textarea::-ms-input-placeholder,
textarea::-moz-placeholder,
textarea::-moz-placeholder,
textarea::-webkit-input-placeholder {
  text-align: right;
  font-size: .875rem !important; /* decrease to  14px */
    /* @@@@@@ هشدار andriod chrome doesnt follow (observe) this rule
    تنها راهکار این است که برای گوشی جواب میده داد:
    <textarea
     name="more_info"
     placeholder="معرفی محصولات، خدمات و غیره"
     style="::-webkit-input-placeholder{font-size: .875rem !important;}"
     ></textarea>
    */
}


/* to assign thi sclass directly to a textarea field so that we spesify the size of placeholder text so that
override andriod chrome font boosting which shows placeholer larger  */

/*
.textarea-placeholder-text-14 {
  textarea::placeholder,
  textarea::-ms-input-placeholder,
  textarea::-moz-placeholder,
  textarea::-moz-placeholder,
  textarea::-webkit-input-placeholder {
    font-size: .875rem !important;
}
*/

/* surely is required otherwise is overrided by bootstrap */
.form-control::placeholder {
  color: #b3b3b3 !important;
  font-size: .875rem !important; /* decrease to  14px */
    /* @@@@@@ هشدار andriod chrome doesnt follow (observe) this rule
    تنها راهکار این است که برای گوشی جواب میده داد:
    <textarea
     name="more_info"
     placeholder="معرفی محصولات، خدمات و غیره"
     style="::-webkit-input-placeholder{font-size: .875rem !important;}"
     ></textarea>
    */
}



/* ********** buttons ********** */
/*
 مهم buttons exist only in forms and accordions and ...:
 */
/* text inside all buttons on the site be white  */
button {
  /*
  هشدار
 button  کلا اینجا کلا به تگ
 یعنی به همه دکمه های سایت، یک رنگ پیشفرض مثلا سبز اعمال نکنید
 یعنی این دو کد را ننویسید:
   color: #fff !important;
   background-color: #00cca0 !important;
 که حال حتی بخواید بروید بعضی ها را مستثنی کنید
 فقط مربوط به دکمه های معمولی نیست button زیرا تگ
 بلکه در آکارئون ها و جاهای مختلف دیگه هم وجود داره
 و باید بروید آنها را هم تک تک استثنا کنید که پیچیده میشه
 به جاش مشخصا به هر دکمه ای که میخواید
 اختصاص بدید c-00cca0 کلاس

 */
}

/* was wery annoying !!!!
when i clicked on any button  with .btn class, the default bootstrap style for
.btn:active {background-color: var} caused button was disappeard
for a second, similar to blick
»هم : below code surely needs !important; to override bootstratp style.
Override Bootstrap button focus styles which caused
sumit btns be disappeared because bkg color & color got white when focus
*/
.submit-btn:focus, .submit-btn:active, .submit-btn:hover {
  color:#fff !important;
}

/* info text under all input fields */
/* dont assign d-block class (which has !important in itself ) to small tags in view files
because will prevent js display:none when required
*/
small {direction:rtl; display:block;}

/* check-ok-icon class exists in login page, forgot-password page, ....  */
/* بهتر است این پایین باشد تا در نهایت اعمال شود و غلبه کند بر بقیه */
/* مهم :
اختصاص دادن استایل ها اینجا بهتر است
نسبت به اینکه به این آیکون ها در 5 صفحه مختلف که 5 فرم وجود داره
به هر آیکون یه کلاس بابت اعمال رنگ یا فونت سایز اختصاص بدیم
*/
.email-ok-icon,
.captcha-ok-icon {
  font-size: 1.25rem;
  margin-right: 2.25rem;
  color: #00cca0 !important;
  opacity: 1 !important;
  /* surely needs above two important otherwise will be overwriten by .input-with-icon i{} rule */
}