/*=============================================
=             01. MAIN SETTINGS              =
=============================================*/

:root {
  /* Colors */
  --main_yellow: #dea72f;
  --RGB_main_yellow: 222, 167, 47; /** use it to apply alpha values */

  --dark_yellow: #7a6126;
  --RGB_dark_yellow: 122, 97, 38;

  --mid_yellow: #b08a36;
  --RGB_mid_yellow: #b08a36;

  --light_yellow: #f6cb54;
  --RGB_light_yellow: 246, 203, 84;

  --main_gray: #323434;
  --RGB_main_gray: 50, 52, 52;
  --mid_gray: #6b6b6b;
  --light_gray: #cfcccc;

  --text_gray: #525252;
  --text_light_gray: #727272;

  --white: #ffffff;
  --RGB_white: 255, 255, 255;

  --black: #000000;
  --RGB_black: 0, 0, 0;

  --main_green: #05a720;
  --alert_red: #bd514c;

  /* Alpha */
  --hight_alpha: 0.8;
  --mid_alpha: 0.5;
  --low_alpha: 0.2;
  /* Eg. Use = background: rgba(var(--RGB_main_gray), var(--low_alpha));*/

  /* Font */
  --main_font: 'Poppins', sans-serif;
}

/* login */
.login_wrapper .login_wrapper_right {
  display: flex;
  align-items: center;
  justify-content: center;
  background: -moz-linear-gradient(to bottom, #ffc1074d 0%, #3c3b3b1a 100%);
  background: -webkit-linear-gradient(to bottom, #ffc1074d 0%, #3c3b3b1a 100%);
  background: linear-gradient(to bottom, #ffc1074d 0%, #3c3b3b1a 100%);
  padding: 1rem;
  border-radius: 10px;
  margin-top: 6rem;
}

.login_wrapper .login_wrapper_right .thumb img {
  width: 300px;
  height: 300px;  
  -o-object-fit: cover;
  -o-object-position: center;
  object-fit: cover;
  object-position: center;
  box-shadow: 15px 15px 26px 0 #8e8d8d;
  -webkit-border-radius: 50%;
  -moz-border-radius: 50%;
  -ms-border-radius: 50%;
  -o-border-radius: 50%;
  border-radius: 50%;
}

.login_wrapper .login_wrapper_left .login_wrapper_content .remember_forgot_pass .forgot_pass,
.login_wrapper .login_wrapper_left .shitch_text a {
  color: var(--mid_yellow);
}

.login_wrapper .login_wrapper_left .login_wrapper_content .remember_forgot_pass .forgot_pass:hover,
.login_wrapper .login_wrapper_left .shitch_text a:hover {
  color: var(--main_yellow);
}

.login_wrapper .login_wrapper_left .login_wrapper_content h4 {
  font-size: 1.3rem;
  color: var(--main_yellow);
}

.login_wrapper .login_wrapper_right h4 {
  font-size: 2rem;
  color: var(--mid_yellow);
}