@font-face {
  font-family: "myFont";
  src: url("./../font/Nabi.ttf");
}
@font-face {
  font-family: "myFont3";
  src: url("./../font/Vazir-FD-WOL.ttf");
}
@font-face {
  font-family: "myFont4";
  src: url("./../font/B-NAZANIN.TTF");
}

body {
  background-image: url("./../image/11.jpg");
  background-size: cover;
  background-repeat: no-repeat;
  background-position: 50% 50%;
}

#koli {
  direction: rtl;
  text-align: center;
  background-size: 100% 100%;
  background-color: #253 !important;
  border-bottom: 1px solid black;
  opacity: 0.9;
}

#Title {
  visibility: hidden;
}
.zekr_expetion {
  font-size: 1.7vw !important;
}

.koli_container,
.first_koli_container {
  padding-left: 3px !important;
  padding-right: 3px !important;
  margin: 0px !important;
}
.koli_name {
  text-shadow: -1px 3px 1px #000 !important;
  font-family: myFont;
  background-color: #396932 !important;
  color: bisque !important;
  font-size: small !important;
  width: 100% !important;
  cursor: context-menu !important;
  height: 35px;
  border-radius: 0px !important;
}
#first_name {
  text-decoration: none !important;
  font-size: 18px !important;
  font-family: myFont4 !important;
  color: gold !important;
  /* background-color: #41E !important; */
  background-color: #710 !important;

  /* background-image: linear-gradient(to bottom , rgb(82, 73, 0), darkblue, lightblue) !important; */

  /* border-color: darkred; */
}
.koli_count {
  text-shadow: 1px 2px 1px #fff !important;

  border-radius: 0px !important;
  opacity: 0.95 !important;
  visibility: hidden;
  font-family: myFont4;
  background-color: khaki !important;
  color: #232 !important;
  font-size: 16px !important;
  width: 100% !important;
  height: 32px;
  cursor: context-menu !important;
  font-weight: bolder !important;
  vertical-align: middle;
}
.first_koli_count {
  text-shadow: 1px 3px 2px black, 1px 1px 1px black !important;
  border-radius: 0px !important;
  visibility: hidden;
  font-family: myFont4;
  font-size: 17px !important;
  color: gold !important;
  background-color: #257 !important;
  width: 100% !important;
  height: 32px;
  cursor: context-menu !important;
  font-weight: bolder !important;
}
.fa-braille {
  color: #dc3 !important;
}
#zekrs {
  visibility: hidden;
  right: 15px;
  text-align: center;
  margin-bottom: 1px;
  border: 1.4px solid lightblue;
  background-color: #143;
  opacity: 0.93 !important;
  border-radius: 2px;
}
.zekr {
  text-shadow: 1px 2px 1px #000 !important;
  height: 65px;
  font-family: myFont;
  font-size: 1.6vw !important;
  cursor: context-menu !important;
  padding-top: 10px !important;
  font-weight: bold;
  background-color: #396669 !important;
  border-color: #396669 !important;
  color: khaki !important;
  border-radius: 2px !important;
}
#besm {
  text-shadow: 1px 2px 1px #000, 1px 2px 10px #000, 3px 2px 1px #000 !important;
  font-family: myFont;
  font-size: 36px;
  font-weight: bold;
  color: whitesmoke;
}
.click {
  text-shadow: 1px 1px 1px #000 !important;
  border-radius: 2px !important;
  height: 50px;
  font-size: 1.2vw !important;
  font-family: myFont3;
  background-color: lightseagreen !important;
  color: whitesmoke !important;
  background-color: #499 !important;
  border-color: #49a !important;
}
.count {
  height: 30px;
  font-size: 18px !important;
  font-weight: bolder !important;
  font-family: myFont4;
  cursor: context-menu !important;
  background-color: khaki !important;
  color: brown !important;
  max-width: 14.1% !important;
  border-radius: 1px !important;
  text-shadow: 1px 1px 1px #fff !important;
}
#info {
  font-family: myFont3;
  visibility: hidden;
  display: flex;
  align-items: center;
}

.card {
  /* text-shadow: 0.1px 0.1px 0.1px #000 !important; */
  opacity: 0.86 !important;
  background-size: 100% 100%;
  font-size: 0.9rem !important;
  /* text-shadow: -1px 0.1px 1px gainsboro !important; */
  /* font-weight: 00 !important; */
}
.card-header {
  font-size: 0.8rem !important;
  height: 70px !important;
  /* text-shadow: 5px 5px 5px gold !important; */

  /* line-height: 70px !important; */
}

#backgrnd {
  position: relative;
}

@media (min-width: 500px) and (max-width: 991px) {
  .click {
    font-size: small !important;
  }
  .zekr {
    font-size: larger !important;
  }
  .count {
    font-size: 17px !important;
  }
}
@media (max-width: 530px) {
  .click {
    font-size: x-small !important;
  }
  .zekr {
    font-size: 13px !important;
  }
  .count {
    font-size: 16px !important;
  }
  #first_name {
    font-size: 9px !important;
  }
  .card {
    font-size: 0.7rem !important;
  }
}
/* @media (max-width: 767px) {
    .koli_container,.first_koli_container   {
        display: block !important;
      }
  } */
/* @media (max-width: 751px) {
   
    .koli_name {
        width: 69% !important;
        font-size: small !important;
        height: 26px;
      }
      .koli_name_1 {
        width: 69% !important;
        font-size: small !important;
        height: 26px;
      }
      .koli_name_2 {
        width: 69% !important;
        font-size: small !important;
        height: 26px;
      }
      .koli_name_3 {
        width: 69% !important;
        font-size: small !important;
        height: 26px;
      }


    .koli_count, .first_koli_count {
        height: 26px;
        width: 26% !important;
        font-size: 11px !important;
      } 
    }
 */

@media (max-width: 751px) {
  .koli_name {
    font-size: small !important;
    height: 28px;
  }
  #report {
    font-size: 13px  !important;  
  }
  #report div > p > span{
    font-size: 9px  !important;  
  }

  .koli_count,
  .first_koli_count {
    height: 28px;
    font-size: 14px !important;
  }

  #first_name {
    font-size: 14px !important;
  }
  #aye {
    font-size: 24px !important;
  }
  #ayeTar {
    font-size: 12px !important;
  }
  #besm {
    font-size: 23px !important;
  }
  #aOzu {
    font-size: 13px !important;
  }
  #start {
    font-size: 14px !important;
  }
}
@media (max-width: 610px) {
  #aye {
    font-size: 22px !important;
  }
  #ayeTar {
    font-size: 11px !important;
  }
  #start {
    font-size: 11px !important;
  }
}
@media (max-width: 400px) {
  #aye {
    font-size: 18px !important;
  }
  #ayeTar {
    font-size: 10px !important;
  }

  .koli_name {
    font-size: 10px !important;
  }
  .koli_count,
  .first_koli_count {
    font-size: 13px !important;
    height: 25px;
  }
  .count {
    font-size: 14px !important;
    width: 13.6% !important;
    height: 27px !important;
  }
  .zekr {
    height: 50px !important;
  }
  .click {
    height: 40px !important;
  }
  #first_name {
    font-size: 12px !important;
  }
  .card-header > div {
    font-size: 14px !important;
  }
  #besm {
    font-size: 20px !important;
  }
  #aOzu {
    font-size: 11px !important;
  }
}
/* 
@media (max-width: 600px) {
    .count{
        max-width: 11.1% !important;
    }

}
@media (min-width: 752px) and  (max-width: 946px){
    .koli_container { 
        max-width: 50% !important;
      }
  
} */
/* 
@media (min-width: 1044px){
    .first_koli_container { 
        width: 46% !important;
      }
}
@media (min-width: 752px) and (max-width: 845px){
    .first_koli_container { 
        width: 60% !important;
      }
}

@media (min-width: 846px) and (max-width: 945px){
    .first_koli_container { 
        width: 64% !important;
      }
} */