@font-face {
  font-family: vazirM;
  src: url("../fonts/vazir/Vazir-Medium-FD.eot"), url("../fonts/vazir/Vazir-Medium-FD.ttf"), url("../fonts/vazir/Vazir-Medium-FD.woff"), url("../fonts/vazir/Vazir-Medium-FD.woff2"); }

@font-face {
  font-family: vazirB;
  src: url("../fonts/vazir/Vazir-Bold-FD.eot"), url("../fonts/vazir/Vazir-Bold-FD.ttf"), url("../fonts/vazir/Vazir-Bold-FD.woff"), url("../fonts/vazir/Vazir-Bold-FD.woff2"); }

@font-face {
  font-family: vazirL;
  src: url("../fonts/vazir/Vazir-Light-FD.eot"), url("../fonts/vazir/Vazir-Light-FD.ttf"), url("../fonts/vazir/Vazir-Light-FD.woff"), url("../fonts/vazir/Vazir-Light-FD.woff2"); }

html {
  direction: rtl;
  font-size: 86%; }

body {
  font-family: vazirL;
  text-align: right; }

.form-control:focus {
  border-color: #9b9b9b !important;
  box-shadow: unset !important; }

/*CUSTOM RECAPTCHA*/
.circle-loader {
  cursor: pointer;
  margin-bottom: 0;
  border: 2px solid rgba(0, 0, 0, 0.2);
  border-right-color: #0062cc;
  position: relative;
  display: inline-block;
  vertical-align: top;
  width: 2rem;
  height: 2rem; }

.load-complete {
  -webkit-animation: none;
  animation: none;
  border-color: #0062cc;
  transition: border 500ms ease-out; }

.checkmark {
  display: none; }
  .checkmark.draw:after {
    animation-duration: 800ms;
    animation-timing-function: ease;
    animation-name: checkmark;
    transform: scaleX(-1) rotate(135deg); }
  .checkmark:after {
    opacity: 1;
    height: 1.66667rem;
    width: 0.83333rem;
    transform-origin: left top;
    border-right: 3px solid #5cb85c;
    border-top: 3px solid #5cb85c;
    content: '';
    left: 0.5rem;
    top: 1rem;
    position: absolute; }

.circle-loader input {
  position: absolute;
  opacity: 0;
  cursor: pointer;
  height: 0;
  width: 0; }

.ff {
  border-radius: 50%;
  animation: loader-spin 1.2s infinite linear; }

.recaptcha_logo {
  width: 15%; }

/*FUNCTIONS*/
/*LOGIN*/
.login_content {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  border-radius: .5rem;
  width: 25%;
  padding: 2rem; }

/*ANIMATIONS*/
@keyframes loader-spin {
  0% {
    transform: rotate(0deg); }
  100% {
    transform: rotate(360deg); } }

@keyframes checkmark {
  0% {
    height: 0;
    width: 0;
    opacity: 1; }
  20% {
    height: 0;
    width: 0.83333rem;
    opacity: 1; }
  40% {
    height: 1.66667rem;
    width: 0.83333rem;
    opacity: 1; }
  100% {
    height: 1.66667rem;
    width: 0.83333rem;
    opacity: 1; } }

/*IMG LIST*/
.images_list_img {
  width: 100%;
  height: 10rem;
  object-fit: cover;
  cursor: pointer; }

/*IMG CHECKBOXES*/
.img_checkbox {
  display: block;
  margin-left: 0 !important;
  position: relative;
  cursor: pointer;
  -webkit-user-select: none;
  -moz-user-select: none;
  -ms-user-select: none;
  user-select: none; }

.img_checkbox input {
  position: absolute;
  opacity: 0;
  cursor: pointer;
  height: 0;
  width: 0; }

.img_checkbox_checkmark {
  position: absolute;
  top: 0;
  left: 0;
  height: 100%;
  width: 100%; }

/* When the checkbox is checked, add a blue background */
.img_checkbox input:checked ~ .img_checkbox_checkmark {
  background-color: #f8f9fa;
  opacity: .6; }

/* Create the checkmark/indicator (hidden when not checked) */
.img_checkbox_checkmark:after {
  content: "";
  position: absolute;
  display: none; }

/* Show the checkmark when checked */
.img_checkbox input:checked ~ .img_checkbox_checkmark:after {
  display: block; }

/* Style the checkmark/indicator */
.img_checkbox .img_checkbox_checkmark:after {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  width: 1rem;
  height: 2rem;
  border: solid #2c2727;
  border-width: 0 3px 3px 0;
  -webkit-transform: rotate(45deg);
  -ms-transform: rotate(45deg);
  transform: rotate(45deg) translate(-75%, -25%) !important; }

/*responsive*/
@media (max-width: 992px) {
  html {
    font-size: 75%; }
  .login_content {
    width: 40%; } }

@media (max-width: 768px) {
  .login_content {
    width: 50%; } }

@media (max-width: 576px) {
  html {
    font-size: 70%; }
  .login_content {
    width: 70%; } }