:root {
  --white: rgb(250, 250, 250);
  --general: rgb(88, 88, 88);
  --theme_night: rgb(42, 41, 60);
  --green: rgba(94, 183, 91, 0.813);
  --color_dark: #d2d1d1;
  --red: rgba(255, 38, 38, 0.672);
  
  /* --dark: rgb(103, 192, 255); */
  --dark: rgb(165, 150, 255);
  
  --gold: rgb(255, 201, 54);
  --silver: rgb(198, 198, 198);
  --bronse: rgb(127, 70, 0);
  --special: rgb(255, 116, 85);



  --box_shadow_dark:1px 0px 15px -5px var(--dark);
  --box_shadow_white: 7px 7px 6px 2px var(--white);

  --border_icon:1px solid rgba(255, 255, 255, 0.523);

  --back_load: url('../images/loading_gradient.gif') no-repeat center;

  --fontname:'yekan';
}


/* -----persian/ jalali/ calendar/----- */

input[id="test-date-id"] {
  font-family: yekan;
}

input[id="test-date-id"] span {
  font-size: 1px !important;
}


/* show error */
#show_error_window{
  /* display: flex; */
  justify-content: center;
  display: none;
}
#show_error_window section{
  width: 90%;
  max-width: 450px;
  margin: 1em auto;
  float: left;
  background-color: var(--white);
  padding: 2em;
  border-radius: 20px;
  position: fixed;
  z-index: 10;
  border: 2px solid var(--dark);
  left: 0;
  right: 0;
  opacity: 0;
}
.dark #show_error_window section{
  background-color: var(--theme_night);
}
.show_error_window_subject{
  background: var(--dark);
  border-radius: 10px;
  color: var(--white) ;
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
  padding: 0 2em;
}
.show_error_window_subject *{
  color: var(--white) ;
}
.show_error_window_subject span{
  width: 50px;
  height: 50px;
  background: url('../images/webman/error.png' ) center no-repeat;
  background-size: 50px 50px;
}
.show_error_window_title{
  display: flex;
  flex-wrap: wrap;
}
.show_error_window_title p{
  width: 100%;
  padding: .5em 0;
}
.show_error_window_title span{
  width: 5% ;
  height: 2px;
  background-color: var(--dark);
}

/* ----- checkbox/ hidden/----- */
.checkbox_hidden_parent {
  position: relative;
}

.checkbox_hidden {
  width: 100%;
  height: 100%;
  position: absolute;
  z-index: 10;
  left: 0;
  right: 0;
  margin: auto;
  cursor: pointer;
  opacity: 0;
}

/* -----checkbox/----- */
.checkbox {
  width: 15px;
  height: 15px;
  cursor: pointer;
  margin: 0.3em;
  outline: 0;
}

/* -----select/ option/----- */
.select {
  padding: 0.1em 1em;
  cursor: pointer;
  outline: 0;
  border: 2px solid var(--white);
  border-radius: 15px;
}

.select1 {
  padding: 0.5em 1em;
  cursor: pointer;
  outline: 0;
  border: 2px solid var(--white);
  border-radius: 20px;
}

.option {
  padding: 1em !important;
  cursor: pointer;
  margin: 1em;
  font-family: yekan;
  text-align: center;
}
/* -----textarea/----- */
.textarea {
  width: 300px;
  height: 100px;
  border: 2px solid var(--white);
  text-align: right;
  max-height: 350px;
  min-height: 100px;
  max-width: 500px;
  min-width: 300px;
  padding: 1.5em;
  outline: 0;
  border-radius: 15px;
  direction: rtl !important;
  font-family: var(--fontname);
  overflow:hidden;
  font-size: 1.2em;
 
}
.dark .textarea::placeholder {
  color: white;
  opacity: .5;
}
.textarea::placeholder {
  text-align: center;
  font-family: var(--fontname);
  opacity: .5;
}
.textarea:focus {
  animation: border_anim_color 1s ease-in;
  border: 2px solid var(--dark);    
}

/* -----inp/ file/----- */
.inpfile {
  width: 200px;
  cursor: pointer;
  outline: 0;
  padding: 0.6em;
  position: relative;
}

.inpfile::after {
  content: "";
  width: 100%;
  height: 100%;
  background-image: url("../../assets/images/upload.png");
  background-position: 10px;
  background-size: 50px 50px;
  background-repeat: no-repeat;
  background-color: white;
  position: absolute;
  right: 0;
  top: 0;
}

/* -----inp/----- */
.inp {
  padding: 0.25em;
  outline: 0;
  border-radius: 8px;
  color: var(--general);
  border: 2px solid var(--white);
  direction: ltr;
}
/* .dark .inp {
  border: 2px solid var(--theme_night);
} */
.inp:not(.no_border_anim):focus{
  animation: border_anim_color 1s ease-in;
  border: 2px solid var(--dark);
}
.inp::placeholder {
  color: var(--general);
  opacity: .5;
  text-align: center;
}
.dark .inp::placeholder {
  color: white;
  opacity: .5;
  text-align: center;
}

/* -----radio/----- */
.radio {
  width: 20px;
  cursor: pointer;
}

/* -----btn/----- */
.btn {
  outline: 1px initial solid;
  padding: 0.2em 2em;
  cursor: pointer;
  border-radius: 20px;
  border: 0;
  margin: 0 0.3em;
  background-color: var(--white);
}

.btn:hover {
  background-color: var(--dark);
  color: var(--white);
}

/* -----green/ btn/----- */
.green_btn {
  outline: 0;
  cursor: pointer;
  background-color: var(--green);
  border-radius: 30px;
  color: var(--white);
  padding-bottom: 0.5em;
  border: none;
}

.green_btn:hover {
  background-color: var(--white);
  color: var(--general);
}

/* -----borderlight/----- */

.borderlight {
  border-width: 2.5px;
  border-style: solid;
  border-radius: 0;
  animation: borderlight 5s infinite linear;
}

.border_load_light {
  width: 75%;
  float: left;
  border-bottom: 10px solid;
  animation: borderlight 5s infinite linear;
}

@keyframes borderlight {
  0% {
    border-image: linear-gradient(
        to right,
        rgb(141, 141, 237),
        rgba(61, 244, 174, 0.673)
      )
      1;
  }

  20% {
    border-image: linear-gradient(
        to right,
        rgb(232, 171, 122),
        rgba(232, 128, 204, 0.833)
      )
      1;
  }

  40% {
    border-image: linear-gradient(
        to right,
        rgb(132, 161, 203),
        rgba(218, 241, 255, 0.365)
      )
      1;
  }

  60% {
    border-image: linear-gradient(
        to right,
        rgb(0, 255, 195),
        rgb(199, 111, 228)
      )
      1;
  }

  80% {
    border-image: linear-gradient(
        to right,
        rgb(27, 216, 93),
        rgb(190, 222, 159)
      )
      1;
  }

  100% {
    border-image: linear-gradient(
        to right,
        rgb(141, 141, 237),
        rgba(61, 244, 174, 0.673)
      )
      1;
  }
}

/* -----border/ scale/----- */

.borderscale {
  animation: borderpaint 1500ms infinite;
  outline: 1px white solid;
  outline-offset: 0px;
}

@keyframes borderpaint {
  0% {
    outline-offset: 0px;
  }

  25% {
    outline-offset: -5px;
  }

  50% {
    outline-offset: -10px;
  }

  75% {
    outline-offset: -5px;
  }

  100% {
    outline-offset: 0px;
  }
}

/* -----blur_back/----- */
#blur_back {
  width: 100%;
  height: 100%;
  position: fixed;
  backdrop-filter: blur(3px);
  z-index: 20;
  display: none;
}

/* -----blur_all/----- */
#blur_all {
  width: 100% !important;
  height: 100%;
  position: fixed;
  z-index: 10;
  right: 0;
  -webkit-backdrop-filter: blur(5px);
  backdrop-filter: blur(10px);
  background-color: #00000017;
  display: none;
}

#blur_all i {
  background: url("../images/logo-400.png");
  width: 300px;
  height: 300px;
  background-size: 300px 300px;
  position: absolute;
  z-index: 35;
  left: 0;
  right: 0;
  margin: auto;
  opacity: 0.5;
  top: 40vh;
}

/* -----enteradmin/----- */

#enter_admin {
  width: 100%;
  height: 100%;
  background-color: rgba(0, 0, 0, 0.124);
  position: relative;
  display: none;
}

#enter_admin section {
  width: 300px;
  background-color: var(--white);
  border-radius: 20px;
  overflow: hidden;
  position: fixed;
  z-index: 35;
  left: 0;
  right: 0;
  margin: 30vh auto;
  border: 1px solid var(--dark);
}

.dark #enter_admin section {
  background-color: var(--theme_night);
}

.enter_admin_h3 {
  color: var(--white);
  display: grid;
  grid-template-columns: repeat(2, 50%);
  background-color: rgba(0, 0, 0, 0.3);
}
.enter_h{
  background-color: var(--general);
}
#enter_admin section h3 {
  width: 100%;
  box-sizing: border-box;
  display: inline-block;
  cursor: pointer;
  position: relative;
}
#enter_admin section h3 a {
  position: absolute;
  width: 100%;
  height: 100%;
  left: 0;
  right: 0;
  margin: auto;
  color: white;
}

#enter_admin section ul li {
  margin: 1em 0;
}

#enter_admin section ul li button[class="btn"] {
  margin: 1em 0;
  border: 1px solid var(--white);
  font-weight: bold;
  background-color: rgba(0,0,0,.2);
  color: rgb(255, 255, 255);
}

#enter_admin section ul li button[class="btn"]:hover{
  border: 1px solid var(--dark);
}

.ul_enter,
.ul_register {
  display: none;
}
.forget_link{
  cursor: pointer !important;
}
.forget_link a p{
color: var(--dark);
cursor: pointer !important;
}
#enter_admin section .inp {
  border-bottom: 1px solid var(--dark);
  background-color: #f0f8ff00;
  border-radius: 0;
  border-top: 0;
  border-left: 0;
  border-right: 0;
}

/* -----dark/----- */

.show_history p{
  color: var(--dark);
}
.dark textarea{
  color: white;
}
.dark .conversation_counseling{
  color: white;
}
.show_error_window_title p{
  color: var(--dark);
}
/* .dark */
.dark select{
  background-color: var(--dark);
  border: 1px solid var(--dark);
  color: white;
}
.dark .news_ok {
  color: white;
}
.dark #scroll2 section,
.dark #scroll2 section a p {
  background-color: var(--theme_night);
  color: var(--color_dark);
}

.dark,
.dark .inp,
.dark .btn {
  background: var(--theme_night);
  color: var(--color_dark);
}

.dark .btn {
  background-color: var(--dark);
}

.dark .hovertxt2 {
  background-color: var(--dark);
  color: var(--color_dark);
}

.dark #scroll1 p a {
  color: rgb(116, 116, 164);
}

.dark #panelsection a {
  background-color: var(--theme_night) !important;
  color: var(--color_dark);
}
.show_project_all{
  width: 100%;
  display: none;
}
.show_project_all table {
  width: 100%;
}
.show_project_all table thead tr{
border-bottom: 3px solid var(--dark) !important;
}
.dark .show_project_all table tr a{
  color: white;
}
.show_project_all table tr a p{
  cursor: pointer;
}
.show_project_all table tr td{
border: 1px solid var(--dark);
}
.dark .panel-pa_side,
.dark textarea,
.dark .inpfile::after {
  background-color: var(--theme_night);
}

.show_img_upload_space{
  height: auto !important;
  display: grid;
  grid-template-areas: 
  'a a a b c d' 
  'e e e e e e';
}

.show_img_upload_space > div{
  width: 100%;

}
.show_img_upload_space > div:nth-child(1){
  grid-area: a;

}

.show_img_upload_space > div:nth-child(2){
  grid-area: b;  
}

.show_img_upload_space > div:nth-child(3){
  grid-area: c;
}

.show_img_upload_space > div:nth-child(4){
  grid-area: d;
}

.show_img_upload_space > div:nth-child(5){
  grid-area: e;
}
.upload_project_img{
  display: block !important;
  border: 2px solid var(--dark);
}
.parent_img{
  display: flex;
  flex-wrap: wrap;
  justify-content: space-around;
}
.parent_img span {
  width: 100px !important;
  position: relative;

}

.parent_img span img{
  width: 100% ;
  height: auto;
  background-color: var(--dark);
  border-radius: 5px;
}
.upload_project_img_inp{
  width: 100%;
  border: 1px dashed var(--dark);
  border-radius: 25px;
  display: grid !important;
  grid-template-areas: 
  'a a a b'
  'a a a c';
  justify-items: center;
  align-items: center;

}
@media screen and (max-width:1024px) {
  .upload_project_img_inp input{
    width: 70px;
  }
}

.upload_project_img_inp > :nth-child(1){
  width: 100%;
  grid-area: b;
  margin: 1em;
}
.upload_project_img_inp > :nth-child(2){
  width: 100%;
  grid-area: c;
  display: flex;
  justify-content: center;
}
.upload_project_img_inp > :nth-child(3){
  width: 100%;
  grid-area: a;
}

.upload_project_img_inp textarea{
  width: 100%;
  height: 80px;
  min-height: 80px;
  min-width: 200px;
  max-width: 100%;
  outline: 0;
  grid-area: a;
  resize: vertical;
}

.show_parameters_photo{
  width: 100%;
  border: 1px dashed var(--dark);
  border-radius: 25px;
  display: flex;
  justify-content: space-between;
  flex-wrap: wrap;

}

.parametr_img {
  display: inline !important;
  border: 1px dotted var(--dark);
  margin: .5em !important;
  border-radius: 15px;
  position: relative;

} 

.parametr_img input{
  border: 1px dotted var(--dark);
  margin: .5em !important;
  border-radius: 15px;
  position: absolute;
  width: 100% !important;
  height: 100%;
  left: 0;
  bottom: 0;
  right: 0;
  top: 0;
  opacity: 0;  width: auto !important;
} 
.checked_act{
  background-color: var(--dark) ;
  color: white;
  border: 1px solid white;
  box-shadow: 5px 6px 12px -4px var(--dark);
}
.parametr_img input{
  width: 30px;
  cursor: pointer;
} 
.upload_project_img_inp input[type='file']{
  position: relative;
  border: 1px dashed var(--white);
}
.upload_project_img_inp input[type='file']::after{
  content: 'Upload';
  text-align: center;
  color: white;
  line-height: 33px;
  float: right;
  width: 100%;
  height: 100%;
  position: absolute;
  right: 0;
  top: 0;
  cursor: pointer;
  background-color: var(--dark);
}
.show_project_img{
  display: flex;
  flex-wrap: wrap;
  justify-content: space-around;
  width: 100%;
}
.show_project_img div{
  width: 100px;
  padding: .5em;
  margin: none !important;
  border-bottom: 4px solid var(--white);
  position: relative;
}
.show_project_img div:hover{
  border-bottom: 4px solid var(--dark);
}
.show_project_img div input{
  width: 100%;
  height: 100%;
  position: absolute;
  top: 0;
  cursor: pointer;
  opacity: 0;
}
.show_project_img div span{
  width: 100%;
  height: 60px;
  top: 0;
  right: 0;
  position: absolute;
  top: 0;
  cursor: pointer;
  background-color: rgba(255, 0, 0, 0.277);
  background: url('../images/remove.png') center no-repeat;
  background-size: 20px 20px;
  display: none;

}
.show_project_img img{
  width: 100%;
  height: auto;
}

.upload_project_img_inp > *{
  width: 60% ;
  margin: auto;  
  direction: rtl;
}
/* icon general 124 */

i.icon{
  width: 30px;
  height: 30px;
  background-size: 30px !important;
  border-radius: 5px;
  margin: 5px;
}
.address_basket div i.edit{
  background: var(--dark) url('../images/edit_icon.png') no-repeat center;
}
.address_basket div  i.remove{
  background: var(--dark) url('../images/remove_icon_2.png') no-repeat center;
}
@media screen and (max-width:1024px) {
  i.icon{
    width: 25px;
    height: 25px;
    background-size: 25px !important;
  }
}
/* -----General/123----- */

.conversation_counseling{
  max-width: 400px;
  min-width: 150px;
  min-height: 70px;
  border-radius: 20px;
  overflow: hidden;
  outline: 0;
  padding: 1em;
  margin: 1em;
  background-color: var(--white);
}
.border_solid_white {
  border: 1px solid var(--white);
  box-sizing: border-box;
}


/* box_inp/ */
@keyframes border_anim_color{
  0%{
    border: 2px solid var(--white);    
  }
  33%{
    border: 2px solid var(--dark);
  } 

  100%{
    border: 2px solid var(--dark);
  }
}

/* Recycle */

.Recycle {
  width: 40px;
  height: 40px;
  background: url("../images/Recycle.png");
  background-size: 40px 40px;
}

/* ticked */
.day_night {
  float: right;
  overflow: hidden;
  width:  35px;
  height: 35px;
  margin-top: 10px;
  margin-right: 20px;
  border-radius: 30%;
  background-color: var(--dark);
  border: var(--border_icon);
}
@media screen and (max-width:425px) {
  .day_night{
    width: 30px;
    height: 30px;
    margin-right: 10px;
  }
}
.sun_icon {
  background: url("../images/sun.png") center no-repeat var(--theme_night);
  background-size: 35px 35px;
}

.moon_icon {
  background: url("../images/moon.png") center no-repeat var(--theme_night);
  background-size: 40px 40px;
}

.ticked_night_parent {
  width: 40px;
  height: 40px;
  margin-left: 1.5em;
  margin-top: 1em;
}

@media screen and (max-width: 1024px) {
  .ticked_night_parent {
    margin-top: 0.5em;
  }
}

@media screen and (max-width: 640px) {
  .ticked_night_parent {
    width: 30px;
    height: 30px;
    margin-top: 0.6em;
  }
}

@media screen and (max-width: 425px) {
  .ticked_night_parent {
    width: 25px;
    height: 25px;
    margin-top: 0.6em;
  }
}

.ticked_night {
  width: 100%;
  height: 100%;
  border: none;
  cursor: pointer;
  opacity: 0;
}

/* edit_icon */

.edit_icon {
  width: 50px;
  height: 50px;

  background: url("../../assets/images/edit.png") center no-repeat;
  background-position: center;
  background-size: 30px 30px;
}

/* removemember_icon/ */
.removemember_icon_parent {
  position: relative;
  display: flex;
}

.removemember_icon {
  width: 50px;
  height: 50px;
  left: 0;
  right: 0;
  margin: auto;
  background: url("../../assets/images/remove_member.png") center no-repeat;
  background-position: center;
  background-size: 30px 30px;
  position: absolute;
  top: -25px;
}

/* -------------------------------------------------------- */
/* -------------------------------------------------------- */
/* header */
/* -------------------------------------------------------- */
/* -------------------------------------------------------- */

#indexheader {
  display: flex;
  flex-wrap: wrap;
  flex-direction: column;
  width: 100%;
  background: url("../../assets/images/header-1900.800.jpg");
  border-bottom: 10px solid var(--dark);
  background-position: center center;
  background-repeat: no-repeat;
  background-size: cover;
  margin-bottom: 3em;
  
}
@media screen and (max-width:768px) {
  #indexheader{
    height: 400px;
  }
}
@media screen and (max-width:425px) {
  #indexheader{
    height: 320px;
  }
}

.indexheader__nav {
  float: right;
}

.indexheader__nav nav ul {
  display: flex;
  justify-content: right;
  padding: 0 1.5em;
  position: fixed;
  background-color: rgba(44, 44, 44, 0.414);
  width: 100vw;
  z-index: 5;
  backdrop-filter: blur(2px);
}

.indexheader__nav nav ul li {
  height: 50%;
  bottom: 0;
}
.indexheader__nav nav ul li a p{
  height: 100% ;
}

.indexheader__nav nav ul li:not(.indexheader__nav nav ul li:first-child) {
  margin-top: 60px;
}

.indexheader__nav nav ul li p {
  padding: 0.5em 1em;
  color: var(--white);
  cursor: pointer;
}

.indexheader__h1 {
  width: 100%;
  color: var(--simple);
  top: 0;
  position: sticky;
  position: -webkit-sticky;
  margin-top: 8em;
  margin-bottom: 1em;
}
.indexheader__h1 h1{
  color: white;
  line-height: 80px;
}
#ulheader {
  height: 120px;
}

.logo_parent {
  width: 100%;
  margin-top: 3.5em;
  z-index: 8;
  position: fixed;
}

@media screen and (min-width: 1024px) {
  .logo_parent {
    margin-top: 9.5em;
  }
}

@media screen and (max-width: 1024px) {
  .logo_parent {
    margin-top: 9em;
  }
}

@media screen and (max-width: 500px) {
  .logo_parent {
    margin-top: 13.5em;
    /* z-index: 1; */
  }
}

#indexheader .logo {
  width: 100px;
  height: 100px;
  position: fixed;
  left: 0;
  right: 0;
  margin: auto;
}
@media screen and (max-width: 1024px) {
  .indexheader__h1 h1 {
    line-height: 200px;
  }

}

@media screen and (min-width: 1024px) {
  .indexheader__h1 {
    margin-top: 18em;
  }
  .indexheader__h1 h1{
    line-height: 240px;
  }
}

@media screen and (max-width: 768px) {
  .indexheader__h1 {
    margin-top: 17em;
  }
  .indexheader__h1 h1{
    line-height: 240px;
  }
}

@media screen and (max-width: 640px) {
  .indexheader__h1 {
    margin-top: 22em;
  }
}

@media screen and (max-width: 425px) {
  .indexheader__h1 h1{
    line-height: 70px;
  }
}

.ulheader_enter {
  width: 100%;
  position: absolute;
  top: 0;
  margin: 0 auto;
}

.ulheader_enter > i,
.ulheader_enter > a {
  display: inline-block;
  direction: rtl;
  background-size: 33px 33px;
  width: 35px;
  height: 35px;
  cursor: pointer;
  border-radius: 30%;
  margin-top: 10px;
  background-color: var(--theme_night);
  border: var(--border_icon);
}
@media screen and (max-width:425px) {
  .ulheader_enter > i,.ulheader_enter > a{
    width: 30px;
    height: 30px;
  }
  .profile_i {
    margin-left: 5px !important;
  }
}
.enter_i {
  float: right;
  background: url("../images/enter.png") center no-repeat;
  margin-right: 25px;
}

.exit_i {
  float: right;
  background: url("../images/exit.png") center no-repeat;
  margin-right: 25px;
}

.profile_i {
  position: relative;
  float: left;
  background: url("../images/pages.png") center no-repeat;
  margin-left: 5px;
}
.more_page_p_back{

  position: fixed;
  width: 100vw;
  height: 100vh;
  background-color: var(--general);
  opacity: .5;
  z-index: 9;
  display: none;
}
.more_page_p{
  border-radius: 15px;
  position: fixed;
  z-index: 10;
  left: 64px;
  top: 47px;
  cursor: default !important;
  width: 150px;
  float: right;
  border: 1px solid white;
  background-color: var(--theme_night);
  display: none;
  opacity: 0;
}
@media screen and (max-width:425px) {
  .more_page_p{
    left: 0;
    top: 40px;
  }
}
.more_page_p p{
  color: white;
  cursor: pointer;
  margin: 10px;
  padding: 0 !important;
}
.basket_i {
  float: left;
  background: url("../images/basket.png") center no-repeat;
  margin-left: 50px;
  position: relative;
}
.basket_i p{
  position: absolute;
  left: 0;
  bottom: -10px;
  border-radius: 10px;
  padding: 0 !important;
  margin: auto !important;
  background-color: var(--white);
  line-height: 16px;
  min-width: 17px;
  height: 17px !important;
  color: var(--dark) !important;
  display: none;
}
.empty_basket{
  width: 100%;
  text-align: center;
  display: none;
}
.empty_basket > * {
  width: 100%;
}
.empty_basket > a{
  display: inline;
  margin: 5px;
  cursor: pointer;

}
.empty_basket > a p{
  cursor: pointer;
  background: var(--dark);
  border-radius: 5px;
  padding: 5px;
  color: white;
}

.exit_back{
  background: url("../images/exit.png") center no-repeat;
}
.webman_icon{
  background: url("../images/webman_designer.png") center no-repeat;
  margin-left: 3.5em !important;
}
@media screen and (max-width: 1024px) {
  .ulheader_enter i {
    margin-right: 15px;
  }
}

@media screen and (max-width: 640px) {
  .ulheader_enter i {
    margin-right: 10px;
  }
}

@media screen and (max-width: 425px) {
  .profile_i  {
    margin-left: 40px;
  }
}

/* gotop/ */

#gotop {
  width: 50px;
  height: 50px;
  position: fixed;
  bottom: 16px;
  right: 11px;
  cursor: pointer;
  background: url(../images/gotop.png) var(--dark);
  background-size: 50px 50px;
  opacity: 0;
  z-index: 100;
  border-radius: 100%;
  filter: drop-shadow(0 0 0 var(--dark));
}
@media screen and (max-width:375px){
  #gotop{
    bottom: 77px;
    right: 5px;
  }
}
/*   ===================   main   ===================   */

.scrollhelp article {
  width: 100%;
  display: grid;
  /* justify-content: space-around; */
  grid-template-columns: repeat(3,33%);
  /* margin: 3em 5em; */
}

.scrollhelp article p {
  width: 90%;
  transition: all 300ms ease-in;
  padding:6px 3px;
  border-radius: 1em;
  line-height: 100%;
  cursor: pointer;
  background-color: var(--dark);
  color: white;
}

@media screen and (max-width: 450px) {
  .scrollhelp article p {
    grid-template-rows: repeat(3,100%);
    grid-template-columns: 100%;
    margin: 0.2em;
  }
}

.projecthelp {
  padding: 2em;
}

.projecthelp h2 {
  border-bottom: 2px dashed var(--dark);
}

/* -------------------- */
.projectdesigner h2 {
  padding-top: 1em;
}

.projectdesigner div {
  display: flex;
  justify-content: space-around;
}

.projectdesigner div img {
  float: right;
}

.projectdesigner div section {
  width: 300px;
  height: 300px;
  overflow: hidden;
  border-radius: 100%;
  border: 3px solid var(--dark);
  cursor: pointer;
  color: white;
  margin: 1em;
  box-shadow: 7px 5px 0 0 var(--dark);
}

.projectdesigner div {
  display: flex;
  flex-wrap: wrap;
  justify-content: space-around;
  max-width: 1200px;
  margin: auto;
}

.projectdesigner a {
  width: 100%;
  height: 100%;
  float: right;
}

.projectdesigner div section:last-child p {
  font-size: 25em;
  line-height: 0.15em;
  text-align: center;
  cursor: pointer;
  border: none;
  color: var(--general);
}

/* -------------------- */
.Cooperation {
  margin: 2em;
  padding: 2em;
  border: 1px dashed var(--dark);
  border-radius: 40px;
}

.Cooperation input {
  margin: 1em;
}

.Cooperation button {
  margin: 1em;
}

/* -------------------- */
.backphoto {
  width: 100%;
  background: url("../../assets/images/NasirolMolk.jpg") center no-repeat;
  background-attachment: fixed;
  height: 300px;
  position: relative;
}

.backphoto img {
  position: absolute;
  top: 0;
  bottom: 0;
  right: 0;
  left: 0;
  margin: auto;
  opacity: 0.6;
}

/* -------------------- */
.stand {
  display: flex;
  flex-wrap: wrap;
  margin: 4em 1em;
  justify-content: space-around;
  border-radius: 100px;
}

.stand article {
  max-width: 250px;
  border: 1px dotted var(--general);
  border-radius: 10px;
  padding: 1em;
  margin: 1em;
}

.stand article p:first-child {
  font-weight: bold;
}

.stand article p:last-child {
  opacity: 0.85;
}

/* -------------------- */
#footer {
  display: flex;
  flex-wrap: wrap;
  justify-content: space-around;
  padding: 0 3em;
  text-align: center;
  background-color: var(--general);
  border-top: 15px solid var(--dark);
  margin-top: 3em;
  padding-bottom: 3em;
}
#footer * {
  color: var(--white);
}
#footer div {
  padding: 2em;
}
#footer div a {
  display: block;
  text-align: right;
  padding-right: 0.5em;
}
#footer div a p {
  cursor: pointer;
}
#footer div a:visited {
  color: var(--dark);
}
#footer div p {
  display: block;
  font-weight: bold;
}

#footer div p:hover{
  background-color: var(--white);
  color: var(--dark);
}

#footer div img {
  width: 70%;
  margin-top: auto;
}

.linksoft {
  display: grid;
  grid-template-areas:
    "a a a a"
    "b c d e";
  grid-template-columns: 25% 25% 25% 25%;
  grid-row-gap: 3em;
}

.linksoft img {
  margin: auto;
  grid-area: a;
}

.linksoft:last-child :nth-child(2) {
  grid-area: b;
}

.linksoft:last-child :nth-child(3) {
  grid-area: c;
}

.linksoft:last-child :nth-child(4) {
  grid-area: d;
}

.linksoft:last-child :nth-child(5) {
  grid-area: e;
}

.pinterest,
.telegram,
.instalink,
.linkedin {
  width: 40px;
  height: 40px;
  align-items: end;
  margin: auto;
  background-position: center;
  background-repeat: no-repeat !important;
  background-image: url("../images/insta.png");
}

.linkedin {
  background-image: url("../images/linkedin\ .png");
}

.telegram {
  background-image: url("../images/telegram.png");
}

.pinterest {
  background-image: url("../images/pinterest.png");
}

/* -------------------------------------------------------- */
/* -------------------------------------------------------- */
/* article */
/* -------------------------------------------------------- */
/* -------------------------------------------------------- */

.searcharticle input {
  direction: rtl;
}

.showsearch {
  display: none;
  flex-wrap: wrap;
  justify-content: center;
  text-align: center;
  margin-top: 1em;
  padding: 1em;
  border-radius: 25px;
  box-shadow: 6px 5px 12px 5px var(--white);
}

.dark .showsearch {
  box-shadow: 0px 2px 26px -12px var(--white);
}

.showsearch p {
  margin-bottom: 1em;
}

.showsearch div {
  max-width: 500px;
  text-align: center;
  margin-top: 0.5em;
  white-space: nowrap;
}

@media screen and (max-width: 525px) {
  .showsearch div {
    max-width: 200px;
  }
}

.showsearch p,
.showsearch a {
  display: block;
}

.showsearch a {
  cursor: pointer;
  border-radius: 20px;
  background-color: initial !important;
  border: 1px solid var(--white);
  padding: 0.9em;
  text-overflow: ellipsis;
  overflow: hidden;
}

.showsearch a p {
  /* font-size: initial; */
  display: inline;
  cursor: pointer;
}

.showsearch a p:first-child {
  color: var(--general);
  font-weight: bold;
}

.dark .showsearch a p:first-child {
  color: var(--white);
}

/* -------------------- */

.Introduction {
  padding: 2em;
}

/* -------------------- */

.videoint {

  border-radius: 25px;
  width: 90%;
  aspect-ratio: 3.55/2;
  outline: 0;
}

/* -------------------- */

.Complete {
  padding: 2em;
}

/* -------------------- */

.detail {
  padding: 4em 2em;
}

.detail article {
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
  border: 1px solid var(--white);
  border-radius: 10px;
  margin: 1em;
  padding: 1em 3em;
}

.detail article p:first-child {
  font-weight: bold;
}

/* -------------------- */

.backphoto2 {
  background-image: url("../../assets/images/backphoto2.jpg");
}

/* -------------------------------------------------------- */
/* -------------------------------------------------------- */
/* article */
/* -------------------------------------------------------- */
/* -------------------------------------------------------- */

.scrollpro {
  padding: 2em;
  margin: 3em;
  white-space: nowrap;
  overflow-y: scroll;
  outline: 1px solid slategrey;
  border: 1px solid var(--dark);
  margin-bottom: 3em;
}

.scrollpro li {
  margin-left: 1em;
  white-space: nowrap;
  max-width: 350px;
  max-height: 350px;
  overflow: hidden;
  border-radius: 40px;
  display: inline-block;
}

.scrollpro img {
  max-width: 350px;
  max-height: 350px;
  object-fit: contain;
}

/* -------------------- */
.banertop div {
  display: inline;
}

.banertop div:first-child img {
  width: 50%;
}

.banertop div:last-child img {
  width: 40%;
}

/* -------------------------------------------------------- */
/* -------------------------------------------------------- */
/* panel */
/* -------------------------------------------------------- */
/* -------------------------------------------------------- */

#panelsection {
  width: 100%;
  padding: 2em;
}

#panelsection a,
#panelsection section {
  display: block;
  padding: 0.5em;
  margin-bottom: 1em;
  margin-top: 1em;
  background-color: var(--white);
  color: var(--general);
}

#panelsection a p,
#panelsection section p {
  cursor: pointer;
}

/* -------------------------------------------------------- */
/* -------------------------------------------------------- */
/* Counseling */
/* -------------------------------------------------------- */
/* -------------------------------------------------------- */

.counseling_from {
}

@media screen and (max-width: 580px) {
  .counseling_from span {
    width: 100%;
    display: inline-block;
  }
}

/* -------------------------------------------------------- */
/* -------------------------------------------------------- */
/* panel & article project */
/* -------------------------------------------------------- */
/* -------------------------------------------------------- */
.exit p {
  background-color: var(--red);
  color: var(--white);
  cursor: pointer;
  border-radius: 10px;
  width: 100%;
  padding: 0.4em;
  opacity: 0.85;
}

.exit p:hover {
  opacity: 1;
  color: var(--white);
  cursor: pointer;
}

.enter_member {
  display: grid;
  grid-template-areas: " a b c";
  grid-template-columns: repeat(3, 33%);
  row-gap: 1em;
  column-gap: 1em;
  padding: 1em;
}

.enter_member div * {
  display: inline;
  text-align: center;
}

@media screen and (max-width: 1024px) {
  .enter_member {
    grid-template-areas:
      "a b "
      "c c ";
    grid-template-columns: repeat(2, 50%);
  }
}

@media screen and (max-width: 650px) {
  .enter_member {
    grid-template-areas:
      "a"
      "b"
      "c";
    grid-template-columns: 100%;
  }
}

.enter_member input[name="username"] {
  grid-area: a;
}

.enter_member input[name="password"] {
  grid-area: b;
}

.enter_member button[name="send"] {
  grid-area: c;
}

.errorphotoproject {
  font-family: none !important;
  width: 100%;
  background-color: var(--dark);
  color: var(--white);
  padding: 1em;
  text-align: center;
  border-radius: 30px;
}

.input_panel_project{
  display: grid;
  grid-template-columns: repeat(4,25%);
}
@media screen and (max-width:1024px) {
.input_panel_project{
  display: grid;
  grid-template-columns: repeat(2,50%);
}
.input_panel_project input{
  width: 100px;
}
}

.textboxes_panel_project{
  display: grid;
  grid-template-columns: repeat(3,33%);
}
@media screen and (max-width:1024px) {
  .textboxes_panel_project{
    display: grid;
    grid-template-columns: 100%;
  }
  }
.categorys_select{
  display: grid;
  grid-template-columns: repeat(3,33%);
}
.panel-pa > div {
  height: auto;
  display: flex;
  justify-content: space-between;
  margin: 2em 1em;
  padding: 0.5em 3em;
}


@media screen and (min-width:425px) {
  .panel-pa  div {
    margin: 2em 0;
    padding: .5em;
  }
}

.panel-pa > form > div {
  border-radius: 30px;
  padding: 1em;
}

.panel-pa_side {
  display: flex;
  flex-wrap: wrap;
  justify-content: center !important;
}

.panel-pa_side span {
  border: 1px dashed var(--general);
  padding: 0.5em;
  border-radius: 15px;
  margin: 0.5em;
  cursor: pointer;
}

.activespan {
  background-color: var(--dark);
  color: var(--white);
}

.panel-pa_side span:hover {
  border: 1px solid rgb(0, 141, 0);
}

.panel-pa_side p {
  width: 100%;
}


.panel-pa div textarea,
.panel-pa div input {
  align-items: start;
  align-self: flex-end;
}

@media screen and (max-width: 450px) {
  .panel-pa textarea {
    width: 150px !important;
    min-width: 150px;
  }
}

/* -------------------- */
.admin-pa-image {
  min-height: 100px;
  display: inline-block;
  position: relative;
}

.admin-pa-image img {
  margin: 1em;
  width: auto;
  height: auto;
  max-width: 200px;
  max-height: 200px;
}

.admin-pa-image input {
  /* background-color: white;
  position: absolute;
  bottom: -50px; */
}

.admin-pa-image section div {
  border: 1px solid var(--dark);
  position: relative;
  display: inline-block;
}

.admin-pa-image__secphoto {
  margin-bottom: 5em !important;
}

.admin-pa-image section div span {
  background: url("../images/Recycle.png") center;
  background-size: 40px 40px;
  width: 40px;
  height: 40px;
  cursor: pointer;
  position: absolute;
  left: 0;
  right: 0;
  margin: auto;
  z-index: 5;
  opacity: 0.7;
  display: none;
}

.admin-pa-image section div > input[type="checkbox"] {
  width: 80%;
  height: 80%;
  cursor: pointer;
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  margin: auto;
  color: red;
  opacity: 0;
}

.admin-pa-image section div ul {
  opacity: 1 !important;
  color: var(--general);
  background-color: white;
  width: 100%;
  height: auto;
  position: absolute;
  bottom: 25px;
  display: flex;
  flex-wrap: wrap;
  justify-content: space-around;
  left: 0;
  right: 0;
  margin: auto;
  bottom: 5px;
  z-index: 4;
  cursor: default;
}

.admin-pa-image section div ul li input {
  cursor: pointer;
  bottom: -18px;
}

.admin-pa-image section div span:hover {
  opacity: 1;
}

/* -------------------------------------------------------- */
/* -------------------------------------------------------- */
/* panel members */
/* -------------------------------------------------------- */
/* -------------------------------------------------------- */

.editmembers {
  display: grid;
  grid-template-columns: repeat(3, 33%);
  grid-row: 100%;
  row-gap: 0.5em;
  column-gap: 0.5em;
}

@media screen and (max-width: 1024px) {
  .editmembers {
    grid-template-columns: repeat(2, 49%);
  }
}

@media screen and (max-width: 625px) {
  .editmembers {
    grid-template-columns: 100%;
  }
}

.editmembers__gender {
  text-align: center;
}

.editmembers__gender section {
  display: flex;
  flex-wrap: wrap;
  justify-content: space-around;
}

/* -------------------- */

.table_member td {
  border: 1px solid var(--white);
  padding: 0 0.5em;
}

.table_member tbody tr td a {
  display: flex;
  justify-content: center;
}

/* -------------------------------------------------------- */
/* -------------------------------------------------------- */
/* sides */
/* -------------------------------------------------------- */
/* -------------------------------------------------------- */

.sides ul {
  display: flex;
  flex-wrap: wrap;
  justify-content: space-around;
  padding-bottom: 2em;
}

.sides ul:not(.sides ul:last-of-type) {
  border-bottom: 2px dotted var(--general);
}

.sides h2 {
  margin-top: 2.5em;
}

.sides ul li {
  border: 1px solid var(--general);
  padding: 1em;
  border-radius: 15px;
  cursor: pointer;
  margin: 1em;
}

.sides ul li p {
  cursor: pointer;
}

/* -------------------------------------------------------- */
/* -------------------------------------------------------- */
/* Categories */
/* -------------------------------------------------------- */
/* -------------------------------------------------------- */

.panel_categories {
  margin-top: 5em;
}

.panel_categories div,
.panel_categories form {
  display: flex;
  justify-content: space-between;
  border: 1px solid var(--white);
  padding: 0.5em 5em;
  margin-top: 2em;
}

.panel_categories form {
  border: navajowhite;
  justify-content: space-around;
}

.panel_categories form input {
  direction: rtl;
}

/* -------------------------------------------------------- */
/* -------------------------------------------------------- */
/* history changer */
/* -------------------------------------------------------- */
/* -------------------------------------------------------- */
#history_ul {
  display: flex;
  flex-wrap: wrap;
  justify-content: space-evenly;
  flex-direction: row;
}

#history_ul li {
  border: 1px solid var(--white);
  border-radius: 10px;
  padding: 2.5em 1.5em;
  margin: 1em;
}

.show_history {
  display: grid;
  grid-template-areas:
    "a b c"
    "d e f"
    "g g g"
    "h h h";
  margin-top: 8em;
  border: 1px solid var(--general);
}

.show_history > div {
  display: flex;
  flex-wrap: wrap;
  justify-content: space-around;
  padding: 0.5em;
  border: 1px solid var(--white);
}

.show_history p {
  padding-top: 0;
}

.show_history > :nth-child(1) {
  grid-area: a;
}

.show_history > :nth-child(2) {
  grid-area: b;
}

.show_history > :nth-child(3) {
  grid-area: c;
}

.show_history > :nth-child(4) {
  grid-area: d;
}

.show_history > :nth-child(5) {
  grid-area: e;
}

.show_history > :nth-child(6) {
  grid-area: f;
}

.show_history > :nth-child(7) {
  grid-area: g;
}

.show_history > :nth-child(8) {
  grid-area: h;
  /* margin-top: 1em; */
}

.show_history > :nth-child(8) section {
  display: flex;
  justify-content: space-between;
  padding: 0 4em;
}

.show_history > :nth-child(8) section:nth-child(even) {
  background-color: var(--white);
}

/* -------------------------------------------------------- */
/* -------------------------------------------------------- */
/* panelsubscript */
/* -------------------------------------------------------- */
/* -------------------------------------------------------- */

.help_sub{
  position: relative;
  margin-bottom: 1em;
  overflow: hidden;
  padding-bottom: 6em;
}

.dark .help_sub{
  position: relative;
  margin-bottom: 2.5em;
  overflow: hidden;
  padding-bottom: 6em;
  background: url('../../assets/images/inwork.png') center no-repeat;
  background-attachment: fixed;
  background-size: 300px;
}
.help_sub::after{
  content: '';
  width: 100%;
  height: 100%;
  background: url('../../assets/images/inwork.png') center no-repeat;
  background-size: 300px;
  filter: drop-shadow(0 0 0 var(--dark));
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  margin: auto;
  background-attachment: fixed;
  z-index: -1;
}
.help_sub span{
  height: 100px;
  width: 100%;
  position: absolute;
  right: 0;
  bottom: -8px;
}

.show_sub{
  width: 100%;
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
}

.show_sub div{
  margin: 1em;
  padding: 1em;
  border: 1px solid var(--general);
}

/* -------------------------------------------------------- */
/* -------------------------------------------------------- */
/* profile */
/* -------------------------------------------------------- */
/* -------------------------------------------------------- */

#profile_sections {
  display: flex;
  justify-content: center;
  margin-top: 5em;
  flex-wrap: wrap;
}

#profile_sections em:not(#profile_sections span em) {
  font-size: 25px;
}

#profile_sections section {
  margin: 2em 5em;
}

.profile_general {
  width: 400px;
  border: 1px solid var(--color_dark);
  border-radius: 35px;
  margin-bottom: 3em;
  margin-top: 6em !important;
}

.profile_general_photo {
  display: flex;
  justify-content: center;
  width: 100%;

}
.profile_general_photo span {
  width: 300px;
  height: 300px;
  padding: 1em;
  position: relative;
  background: url("../images/profile.png") center no-repeat;
  filter: drop-shadow(0 0 1px  var(--dark));
}
.profile_general_photo em {
  position: absolute;
  left: 0;
  right: 0;
  margin: auto;
  top: 0;
  z-index: 3;
  border-radius: 30px;
  background-color: var(--white);
  color: white;
  cursor: default;
}
.profile_general_photo span img ,
.profile_general_photo a img {
  position: absolute;
  width: 100%;
  height: 100%;
  border-top-right-radius: 30px;
  border-bottom-left-radius: 30px;
  border: 1px solid var(--color_dark);
  top: -50px;
  left: 0;
  right: 0;
  margin: auto;
  overflow: hidden;
  z-index: 2;
  overflow: hidden;
  background: url('../images/profile.png') var(--dark) center no-repeat;
  object-fit: cover;

}

.profile_general_change {
  width: 100%;
  display: flex;
  justify-content: space-evenly;
}

.profile_general_change span,
.profile_general_change a  {
  width: 40px;
  height: 40px;
  border-radius: 30%;
  cursor: pointer !important;
  border: var(--border_icon);
}

.profile_general_change :nth-child(1) {
  background: url("../images/photo_icon.png") var(--dark) no-repeat center;
  background-size: 30px 30px;
  position: relative;
}

.profile_general_change :nth-child(1) input {
  position: absolute;
  width: 60px;
  height: 60px;
  left: 0;
  border-radius: 100%;
  opacity: 0;
}

.profile_general_change :nth-child(2) {
  background: url("../images/remove_icon.png") var(--dark) no-repeat center;
  background-size: 27px 27px;

}
.security_msg{
  display: grid;
  grid-template-columns: 60% 40%;
  row-gap: 0px;
  column-gap: 0px;
  padding: 1em;
  width: 70%;
  margin: auto;
}

.security_msg div{
  width: 100%;
  margin: 1em;
}
.security_msg span{
  width: 100%;
  height: 100%;
  float: right;
  background: url('../images/security_msg.gif') no-repeat center;
  background-size: 400px 300px;
  height: 100%;
  margin-right: 1em;
}
@media screen and (max-width:425px) {
  .security_msg{
    grid-template-columns: 100%;
  }
}
.security_msg p{
  margin-right: 1em;
}
.profile_general .profile_general_type ul{
  width: 100%;
  margin-top: 1em;

}
.profile_general_type {
  display: flex;
  justify-content: center;
  width: 100%;
}
.profile_general_type ul {
  width: 50%;
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  border-bottom-left-radius: 35px;
  border-bottom-right-radius: 35px;
  overflow: hidden;
}
@media screen and (max-width:425px) {
  .profile_general_type ul {
    width: 100%;
  }
}
.profile_general_type ul li {


  border-radius: 15px;
  border: 1px dashed var(--dark);
  width: 100%;
  height: 100%;
  position: relative;
}
.profile_general p {
  margin-bottom: 10px;
}
.profile_general_type ul li input {
  width: 100%;
  height: 100%;
  cursor: pointer;
  position: absolute;
  top: 0;
  left: 0;
  opacity: 0;
}
#send_code{
  position: relative;
  overflow: hidden;
}
#send_code span{
width: 100%;
height: 100%;
background-color: firebrick;
position: absolute;
top: 0;
left: 0;
z-index: 2;
}
.profile_sendcode {
  margin-top: 1em;
  display: flex;
  justify-content: center;
}
.profile_sendcode p {
  display: inline-block;
  align-items: end;
  background-color: var(--dark);
  color: white;
  padding:0 0.5em;
  margin: 0 0.5em;
  cursor: pointer;
  border-radius: 25px;
  line-height: 40px;
}

.profile_sendcode input {
  width: 150px;
}

.profile_detail {
  /* display: none; */
  padding: 2.5em;
  border: 1px solid var(--color_dark);
  border-radius: 35px;
  /* height: 1140px; */
}

@media screen and (max-width: 1024px) {
  .profile_detail {
    height: 940px;
  }
}

@media screen and (max-width: 640px) {
  .profile_detail {
    height: 745px;
  }
}

@media screen and (max-width: 450px) {
  .profile_detail {
    height: 670px;
  }
}
.profile_detail h3 {
  margin-bottom: 1em;
}

.profile_detail div p {
  margin-bottom: 0.5em;
}

.sub_parent_profile {
  width: 100%;
  display: grid;
  justify-content: center;
  cursor: pointer;
  margin-top: 4em;
}
.sub_parent_profile button {
  background-color: var(--dark);
  color: white;
  cursor: pointer;
  width: 150px;
  float: left;
}
#submit_profile{
  border: 1px solid var(--general);
  border-radius: 10px;
  padding: 0.5em 1.5em;
}
.profile_webinfo {
  border: 1px solid var(--color_dark);
  border-radius: 35px;
  padding: 1em;
  height: 520px;
}

@media screen and (max-width: 1024px) {
  .profile_webinfo {
    height: 530px;
  }
}

@media screen and (max-width: 640px) {
  .profile_webinfo {
    height: 435px;
  }
}

@media screen and (max-width: 450px) {
  .profile_webinfo {
    height: 435px;
  }
}
.load_mini{
  width: 20px;
  height: 20px;
  background-color: firebrick;
  background: url('../images/loading.webp') no-repeat center;
  background-size: 20px 20px;
  opacity: 0;
}
.profile_webinfo .load_mini{
  float: left;
}
.show_pass{
  width: 50px;
  background: url('../images/show_pass.png') no-repeat center;
  background-size: 15px 15px;
  color: #eeeeee00 !important;
  cursor: pointer;
}
.profile_webinfo h3 {
  margin-bottom: 1em;
}
.profile_webinfo p {
  /* margin-bottom: 0.5em; */
}

.news_ok {
  margin-top: 2em;
  width: 100%;
}

.news_ok p {
  /* padding: 0 1em; */
  text-align: right;
  display: block;
  float: right;
}
.news_ok input {
  cursor: pointer;
  background-color: var(--dark);
}


/* -------------------------------------------------------- */
/* -------------------------------------------------------- */
/* forgetpass */
/* -------------------------------------------------------- */
/* -------------------------------------------------------- */

.forget_pass{
  max-width: 50%;
  margin: 5em auto;
  display: grid;
  grid-template-columns: repeat(2,50%);
  border: 1px solid gainsboro;
  border-radius: 25px;
  overflow: hidden;
  direction: ltr;
}
.forget_pass input{
  margin: 5px;
}
.forget_pass span{
  float: right;
  width: 100%;
  height: 100%;
  background: url('../../assets/images/forget.gif') no-repeat center;
  background-color: #2893ec;
  background-size: 445px 345px;
  background-position:center ;
}
.show_after_send{
  display: none;
}
.reset_pass_1,.reset_pass_2{
  padding: 1em;
}
.forget_pass_btn{
  background-color: var(--dark);
  color: white;
  margin: 1em  auto;
  max-width: 200px;
  border-radius: 10px;
  cursor: pointer;
}
.reset_pass_2{
  display: none;
}

@media screen and (max-width:1024px) {
  .forget_pass{
    max-width: 80%;
  }
}

@media screen and (max-width:768px) {
  .forget_pass{
    max-width: 90%;
  }
}

@media screen and (max-width:425px) {
  .forget_pass{
    max-width: 97%;
    grid-template-columns: 100%;
  }
  .forget_pass input{
    max-width: 70%;
  }
}

/* -------------------------------------------------------- */
/* -------------------------------------------------------- */
/* project */
/* -------------------------------------------------------- */
/* -------------------------------------------------------- */
.project_show{
  display: grid;
  grid-template-areas: 
  "a a a a a a b b"
  "c c d d e e e e"
  "f g g g g g g g";
  row-gap: 1em;
  column-gap: 1em;
  direction: ltr;
  margin:0 2em 6em 1em;
  border-right: 8px solid var(--dark);
}
.project_show > div{
  width: 100%;
  height: 100%;
  border-radius: 5px;
  border: 1px solid var(--white);
}
.project_show > div:nth-child(1){
  grid-area: a;
}

.project_show > div:nth-child(2){
  border-top-right-radius:0;
  border-bottom-right-radius: 0;
  border-right: 0;
  grid-area: b;
}

.project_show > div:nth-child(3){
  grid-area: c;
}

.project_show > div:nth-child(4){
  grid-area: d;
}

.project_show > div:nth-child(5){
  border-top-right-radius:0;
  border-bottom-right-radius: 0;
  border-right: 0;
  grid-area: e;
}

.project_show > div:nth-child(6){
  grid-area: f;
  border: none;
}

.project_show > div:nth-child(6) a p{
  background-color: var(--dark);
  width: 100px;
  height: 50px;
  color: white;
  cursor: pointer;
  border-radius: 35px;
  padding: 5px;
  line-height: 35px;
}

.project_show > div:nth-child(7){
  padding: 0 1em;
  display: flex;
  overflow-y: auto;
  grid-area: g;
  border: 1px solid var(--white);
  border-right: none;
  border-radius: 0;
  border-top-left-radius: 15px;
}

.project_show > div:nth-child(7) img{
  max-height: 100px;
  margin: auto;
  padding: 5px;
  border-radius: 10px;
}

/* -------------------------------------------------------- */
/* -------------------------------------------------------- */
/* project_detail */
/* -------------------------------------------------------- */
/* -------------------------------------------------------- */

.project_detail{
  width: 100fr;
  margin: 1em;
  display: grid;
  grid-template-columns: 70% 30%;
  direction: ltr;
  padding: 1em;
  border-right:5px solid var(--dark);
}

.project_detail > div:nth-child(1){
  display: grid;
  grid-template-columns:50px 100fr;
}

.project_detail > div:nth-child(1) > div{
  width: 100%;
}

.project_detail > div:nth-child(1) ul{
  width: 50px;
}

.project_detail > div:nth-child(1) ul li{
  width: 50px;
  height: 50px;
}
.project_detail > div:nth-child(2){

}
.space_detail{
  margin: 1em;
  display: grid;
  grid-template-areas: 
  'a b c '
  'a d d';
  grid-template-columns: 350px 50fr 50fr;
  direction: ltr;
  padding: .5em;
  border-right: 5px solid var(--dark);
  border-top: 1px solid var(--dark);
  border-bottom: 1px solid var(--dark);
  border-left: 1px solid var(--dark);
  border-top-left-radius: 25px;
  border-top-right-radius: 25px;
  margin-top: 3em;
}
@media screen and (max-width:768px) {
  .space_detail{
    grid-template-areas: 
    'c c c c '
    'b b b b '
    'a a a a '
    'd d d d';

  }

}
@media screen and (max-width:375px) {
  .space_detail > *{
    width: 80% !important;
  }
}
.space_detail > *{
  width: 100%;
}

.space_detail > div:nth-child(1){
  grid-area: a;
  width: 300px;
  height: 300px;
  margin: 1em auto;
  align-content: end;
}
@media screen and (max-width:375px) {
  .space_detail > div:nth-child(1){
    width: 250px !important;
    height: 250px !important;
    margin-right: 8em;
  }
}
.space_detail > div:nth-child(1) img{
  grid-area: a;
  width: 100%;
  height: 100%;
  object-fit: cover;
  float: left;
}
.space_detail > div:nth-child(2){
  grid-area: b;
  max-height: 200px;
  max-width: 800px;
  overflow-y: auto;
  padding: 1em;
  position: relative;
  width: 100%;
}
@media screen and (max-width:375px) {
  .space_detail > div:nth-child(2){
    width:80%;
  }
}
@media screen and (max-width:425px) {
  .space_detail > div:nth-child(2){
    width:95%;
  }
}
.dark .space_detail > div:nth-child(2) div{
  background: rgb(251,251,251);
  background: linear-gradient(0deg, rgba(251,251,251,0.6951155462184874) 0%, rgba(255,255,255,0) 100%);
}
.space_detail > div:nth-child(2) div{
  position: sticky;
  bottom: -23px;
  height: 85px;
  left: 0;
  right: 0;
  width: 100% !important;
  background: rgb(255,255,255);
  background: linear-gradient(0deg, rgba(251,251,251,1) 25%, rgba(255,255,255,0) 100%);

}
.dark .space_detail > div:nth-child(2) div{
  background: var(--theme_night);
  background: linear-gradient(0deg, var(--theme_night) 25%, rgba(255,255,255,0) 100%);

}
.space_detail > div:nth-child(3){
  margin:0 2em;
  padding-right: 2em;
  padding-bottom: 1em;
  grid-area: c;
}
@media screen and (max-width:425px) {
  .space_detail > div:nth-child(3){
    margin: 0 1em;
    padding-right: 1em;
  }
}
.space_detail > div:nth-child(3) > h2:nth-child(1){
margin-bottom: 1em;
}
.space_detail > div:nth-child(4){
  grid-area: d;
  width: 100%;
  display: flex;
  border: 1px solid var(--white);
  max-height: 100px;
  justify-content: space-between;
  flex-wrap: wrap;
  max-width: 100%;
  overflow-y: hidden;
  overflow-x: auto;
  flex-direction: column;
  position: relative;
}

.dark .space_detail > div:nth-child(4){
  border: 1px solid var(--dark);
}

.show_medum_full{
  width: 100vw;
  height: 100vh;
  position: fixed;
  top: 0;
  z-index: 105;
  background-color: white;
  grid-template-rows: 100fr 100px;
  display: none;
}

.dark .show_medum_full{
  background-color: var(--theme_night);
}

.show_medum_full > *{
  width: 100%;
  height: 100%;
}

.show_medum_full > section{
  position: relative;
}

.show_medum_full > section > span{
  position: relative;
  width: 50px;
  height: 50px;
  background-color: #0000005d;
  position: absolute;
  right: 10px;
  top: 10px;
  z-index: 100;
  border-radius: 100%;
  cursor: pointer;
  background: rgba(0, 0, 0, 50%) url('../../assets/images/close_icon.png') no-repeat center;
  background-size: 52px 57px;
  opacity: .5;
}

@media screen and (max-width:425px) {
  .show_medum_full > section > span{
    width: 30px;
    height: 30px;
    background-size: 32px 34px;
  }
}

.show_medum_full > section > img{
  width: 100%;
  height: 100%;
  position: absolute;
  left: 0;
  right: 0;
  margin: auto;
  object-fit: contain;
}

.show_medum_full > ul{
  z-index: 50;
  display: flex;
  flex-wrap: wrap;
  flex-direction: column;
  overflow-x: auto;
  padding: 0 1em;
}

.show_medum_full > ul li{
  width: 80px;
  height: 80px;
  z-index: 50;
  margin: 5px;
  border-radius: 5px;
  overflow: hidden;
  border-radius: 1em;
  cursor: pointer;
  position: relative;
  order: 1;
  border: 1px solid rgba(255, 255, 255, 0);
}

.img_act_little{
  border: 1px solid var(--theme_night);
}

.dark .img_act_little{
  border: 1px solid rgba(255, 255, 255, 0.533);
}

.show_medum_full > ul li img{
  width: 100%;
  height: 100%;
  object-fit: contain;
}

.show_medum_full > ul li i{
  width: 100%;
  height: 100%;
  position: absolute;
  background:rgba(0, 0, 0, 0.221) url('../../assets/images/loading.webp') center no-repeat;
  background-size: 35px;
  right: 0;
  bottom: 0;
}

.img_medium{
  cursor: pointer;
  position: relative;
}

.img_medium span{
  width: 25px;
  height: 25px;
  position: absolute;
  bottom: 30px;
  left: 10px;
  background:url('../images/click_img_gif.gif') no-repeat center;
  background-size:25px 25px;
  border-radius: 100%;
  opacity: .5;
}

.hidden_left , .hidden_right{
  width: 40px;
  height: 100%;
  background-color: darkcyan;
  position: absolute;
  bottom: 0;
  z-index: 10;
}
.hidden_left{
  left: 0;
  background: rgb(255,255,255);
  background: linear-gradient(90deg, rgba(255,255,255,1) 0%, rgba(255,255,255,0.7763480392156863) 50%, rgba(255,255,255,0) 100%);
}
.dark .hidden_left{
  left: 0;
  background: var(--theme_night);
  background: linear-gradient(90deg, var(--theme_night) 0%, var(--theme_night) 30%, rgba(255,255,255,0) 100%);
}
.hidden_right{
  right: 0;
  background: rgb(255,255,255);
  background: linear-gradient(270deg, rgba(255,255,255,1) 0%, rgba(255,255,255,0.7763480392156863) 50%, rgba(255,255,255,0) 100%);
}
.dark .hidden_right{
  left: 0;
  background: var(--theme_night);
  background: linear-gradient(270deg, var(--theme_night) 0%, var(--theme_night) 10%, rgba(255,255,255,0) 100%);
}

.space_detail > div:nth-child(4) div{
  width: 80px;
  height: 80px;
  position: relative ;
  margin: 0 5px;
  border-radius: 10px;
  cursor: pointer;
}

.space_detail > div:nth-child(4) img{
  width: 100%;
  height: 100%;
  object-fit: contain;
  position: relative;
  cursor: pointer;
  background-color: white;
}

.dark .space_detail > div:nth-child(4) img{
  background-color: var(--theme_night);
}

.space_detail > div:nth-child(4) div > span{
  position: absolute !important;
  cursor: pointer;
}

.space_detail > div:nth-child(4) div span:hover{
  opacity: 0;
}

.space_detail > div:nth-child(4) div span i{
  width: 15px;
  height: 15px;
  background-color: chartreuse;
  position: absolute;
  bottom: 3px;
  right: 3px;
  background:red url('../images/click_img_gif.gif') no-repeat center;
  background-size: 15px 15px;
  border-radius: 15px;
  opacity: .5;
}

/* -------------------------------------------------------- */
/* -------------------------------------------------------- */
/* subscript_plan */
/* -------------------------------------------------------- */
/* -------------------------------------------------------- */

.go_basket_icon_parent{
  position: fixed;
  left: 15px;
  top: 15px;
  z-index: 100;
}

.go_basket_icon{
  padding: 5px;
  border-radius: 100%;
  position: relative;
  width: 50px;
  height: 50px;
  background-color: #28283c;
  z-index: 100;
  display: flex;
  justify-content: center;
  border: 1px solid white;

}
.go_basket_icon *{
  cursor: pointer;
}
.go_basket_icon svg{
  width: 100%;
  height: 100%;
}

.go_basket_icon p{
  position: absolute;
  right: -8px;
  bottom: 0;
  bottom: 6px;
  margin: auto;
  width: 20px;
  height: 20px;
  border-radius: 15px;
  background: #28283c;
  border: 1px solid white;
  color: white;
}

.parent_sub{
  width: 100%;
  display: flex;
  justify-content: space-around;
  flex-wrap: wrap;
  padding-bottom: 6em;
}
.parent_sub > div:hover{
  border-style: solid;
}
.subscript{
  width: 300px;
  height: 500px;
  display: grid;
  grid-template-rows: 10fr 30fr 50fr 10fr;
  border-radius: 15px;
  margin: 1em;
}

.subscript > *{
  width: 100%;
  height: 100%;
}

.subscript > div > div{
  display: grid;
  grid-template-columns: 50fr 50fr;
  padding: 0 1em .5em 1em;
  border-bottom: 1px dashed rgba(0, 0, 0, 0.150);
}
.dark .subscript > div > div{
  border-bottom: 1px dashed rgba(255, 255, 255, 0.150);
}
.subscript > div > div p{
  margin: 0;
  padding: 0;
}
.subscript > div > div p:nth-child(1){
  text-align: right;
}
.subscript > div > div p:nth-child(2){
  text-align: left;
}
.subscript .discount_val{
  position: relative;
  opacity: .7;
}
.subscript .discount_val::after{
  content: '';
  width: 50%;
  height: 4px;
  background-color: red;
  left: 0;
  right: 0;
  bottom: 0;
  top: 0;
  margin: auto;
  position: absolute;
  opacity: .6;
  border-radius: 2px;
  
}
.gold_sub{
  border: 1px dashed var(--gold);
  box-shadow: 0px 3px 21px -7px var(--gold);
}
.gold_sub > span{
  background: url('../images/medal_gold.png') no-repeat center;
  background-size: 150px;
  background-position:center;
}
.silver_sub{
  border: 1px dashed var(--silver);
  box-shadow: 0px 3px 21px -7px var(--silver);
}
.silver_sub > span{
  background: url('../images/medal_silver.png') no-repeat center;
  background-size: 150px;
  background-position:center;
}
.bronse_sub{
  border: 1px dashed var(--bronse);
  box-shadow: 0px 3px 21px -7px var(--bronse);
}
.bronse_sub > span{
  background: url('../images/medal_bronse.png') no-repeat center;
  background-size: 150px;
  background-position:center;
}
.special_sub{
  border: 1px dashed var(--special);
  box-shadow: 0px 3px 21px -7px var(--special);
}
.special_sub > span{
  background: url('../images/medal_special.png') no-repeat center;
  background-size: 150px;
  background-position:center;
}

.special_sub > span{
  animation: rotate_medal 5s infinite ;
  
  }

  @keyframes rotate_medal {
    0% {
      transform: rotateY(0deg);
    }
    50% {
      transform: rotateY(180deg);
    }
    100% {
      transform: rotateY(0deg);
    }
  }

  /* -------------------------------------------------------- */
/* -------------------------------------------------------- */
/* basket_buy */
/* -------------------------------------------------------- */
/* -------------------------------------------------------- */
.basket_parent{
  display: flex;
  flex-wrap: wrap;
  justify-content: space-around;
}
.basket{
  width: 300px;
  border-radius: 25px;
  overflow: hidden;
  margin: 1em;
  box-shadow: var(--box_shadow_dark);
  border: 1px dashed var(--dark);
}

.basket:hover{
  border-style: solid;
}
.basket div{
  width: 100%;
  position: relative;
  z-index: 2;
  margin-top: -5em;
  border-top-left-radius: 25px;
  border-top-right-radius: 25px;
  padding-bottom: 3.5em;
  box-shadow: var(--box_shadow_dark);
  background-color: white;
}
.dark .basket div{
  background-color: var(--theme_night);
}
.basket div span{
  position: absolute;
  width: 100px;
  bottom: -3px;
  left: 0;
  right: 0;
  margin: auto;
  cursor: pointer;
  background-color: var(--red);
  border-top-left-radius: 15px;
  border-top-right-radius: 15px;
  z-index: 3;

}
.basket img{
  width: 100%;
  height: 300px;
  object-fit: cover;
}
.top_basket{
  display: flex;
  justify-content: space-between;
  padding: 0 1em;
  margin-top: 2em;
}
.top_basket > div{
  padding: 1em;
  border-radius: 15px;
  cursor: pointer;
}
.top_basket > div p{
  cursor: pointer;
  color: white;
}
.top_basket div:nth-child(2){

  background-color: var(--green);
}
.top_basket div:nth-child(1){

  background-color: var(--dark);
}

.address_basket {

}

.address_basket  div{
  display: flex;
  flex-wrap: wrap;
  justify-content: space-around;
  padding: 1em;
  border-radius: 15px;
  cursor: pointer;
  margin: 1em;
  position: relative;
}
.address_basket  div span{
  display: flex;
  flex-wrap: wrap;
}

.address_basket div *{
  cursor: pointer;
}
.address_basket div *{
  cursor: pointer;
}
.new_adrs{
  display: flex;
  flex-wrap: wrap;
  justify-content: space-around;
  border: 1px solid var(--green);
  padding: 1em;
}
.pay_mode{
  margin: 1em;
  border: 1px solid var(--white);
  border-radius: 15px;
}
.pay_mode div{
  width: 100px;
  margin: 1em;
  border-radius: 10px;
  border: 1px solid var(--white);
}
.pay_mode div *{
  cursor: pointer;
}

.pay_mode div span{
  display: flex;
  width: 100px;
  height: 100px;
  background: url('../images/zarinpal_logo.jpg') no-repeat center;
  background-size: 70px;
}

  /* -------------------------------------------------------- */
/* -------------------------------------------------------- */
/* mybuy */
/* -------------------------------------------------------- */
/* -------------------------------------------------------- */

.parent_buy{
  width: 100%;
  display: grid;
  grid-template-columns:  270px 100fr;
  /* padding: 1em; */
}
@media screen and (max-width:768px) {
  .parent_buy{
    grid-template-columns: 100fr ;
  }
}
.profile_info{
  position: sticky;
  width: 95%;
  border: 1px dashed var(--dark);
  border-radius: 25px;
  padding: 1em;
  box-shadow: var(--box_shadow_dark);
  margin: 1em;
  max-height: 390px;
}
.profile_info div{
  position: sticky;
  width: 100%;
}
.profile_info div > div{
  width: 200px;
  height: 250px;
  margin: 1em auto;
  background: url('../../assets/images/photo_icon.png') no-repeat center;
  background-size: 40%;
  border-radius: 10px;
  overflow: hidden;
  filter: drop-shadow(0 0 1px var(--dark))
}
.profile_info div > div a{
  width: 100%;
  height: 100%;
}
.profile_info div > div a img{
  width: 100%;
  height: 100%;
}
.profile_info img{
  width: 100%;
  height: 100%;
  object-fit: cover;
}
.profile_info div > a{
  width: 100% !important;
  background-color: var(--dark);
  display: grid;
  grid-template-columns: 25fr 75fr;
  align-content: center;
  align-items: center;
  direction: ltr;
  border-radius: 10px;
  height: 30px;
  padding: 5px;
  margin: 3px 0;
}
.profile_info div > a svg{
  width:  80%;
  height: 80%;
}
.profile_info div > a p{

  padding: 5px;
  cursor: pointer;
  border-radius: 25px;
  color: var(--white);
}
.all_buy{
  padding-bottom: 6em;
}

.buy_subscript p{
  width: 100%;
}
.buy_subscript p{
  width: 100%;
}
.sub_row{
  position: relative;
  overflow: hidden;
  border: 1px solid var(--red) !important;
  box-shadow: none !important;
}
.sub_row::after{
  content: '';
  width: 100%;
  height: 100%;
  background-color: #5555553d;
  top: 0;
  position: absolute;
}
.buy_subscript div{
  display: flex;
  flex-wrap: wrap;
  justify-content: space-around;

  
}
.buy_subscript div div{
  box-shadow: var(--box_shadow_dark);
  width: 300px;
  border: 1px dashed var(--dark);
  border-radius: 15px;
  margin: 1em;
  padding: 1em;

}
.buy_subscript div div:hover{
  box-shadow: var(--box_shadow_dark);
  width: 300px;
  border: 1px solid var(--dark);
  border-radius: 15px;
  margin: 1em;
  padding: 1em;

}


/* panel_image_karman */
.image_karman_input{
  display: flex;
  justify-content: space-between;
}


/* -------------------------------------------------------- */
/* -------------------------------------------------------- */
/* result_payment */
/* -------------------------------------------------------- */
/* -------------------------------------------------------- */
.result_payment {
  display: flex;
  justify-content: center;
}
.result_payment > section{
  max-width: 768px;
  min-width: 250px;
  padding: 1em;
  border: 1px solid rgba(102, 102, 102, 0.66);
  border-radius: 10px ;
  margin: 1em;
}

.result_payment > section > div{
  width: 100%;
  display: grid;
  grid-template-columns: repeat(2,50%);
  justify-items: center;
  background-color: rgba(102, 102, 102, 0.66);
  margin: 5px 0;
  padding: 5px;
  border-radius: 5px;

}

.result_payment > section > div p{
  width: 100%;
  direction: rtl;
  text-align: right;
  color: white !important;
}

.result_payment > section > div p:nth-child(even){
  text-align: left;
}

.result_payment  > section .ok_title{
  color: var(--green) !important;
}
.result_payment  > section .nok_title{
  color: var(--red) !important;
}