*{
	-webkit-user-select: none; /* Safari */
  -ms-user-select: none; /* IE 10 and IE 11 */
  user-select: none; /* Standard syntax */
  touch-action: manipulation;
}
@font-face {
	font-family: IRANSans;
	font-style: normal;
	font-weight: normal;
	src: url('../webfonts/IRANSansWeb.eot');
	src: url('../webfonts/IRANSansWeb.eot?#iefix') format('embedded-opentype'),  /* IE6-8 */
		 url('../webfonts/IRANSansWeb.woff2') format('woff2'),  /* FF39+,Chrome36+, Opera24+*/
		 url('../webfonts/IRANSansWeb.woff') format('woff'),  /* FF3.6+, IE9, Chrome6+, Saf5.1+*/
		 url('../webfonts/IRANSansWeb.ttf') format('truetype');
}
@font-face {
	font-family: IRANSans;
	font-style: normal;
	font-weight: bold;
	src: url('../webfonts/IRANSansWeb_Bold.eot');
	src: url('../webfonts/IRANSansWeb_Bold.eot?#iefix') format('embedded-opentype'),  /* IE6-8 */
		 url('../webfonts/IRANSansWeb_Bold.woff2') format('woff2'),  /* FF39+,Chrome36+, Opera24+*/
		 url('../webfonts/IRANSansWeb_Bold.woff') format('woff'),  /* FF3.6+, IE9, Chrome6+, Saf5.1+*/
		 url('../webfonts/IRANSansWeb_Bold.ttf') format('truetype');
}
body, html {
  font-family: IRANSans, B Yekan, sans-serif;
  height: 100%;
  margin: 0px;
  overflow: hidden;
  width: 100%;
  background: rgb(255,255,255);
background: -moz-linear-gradient(22deg, rgba(255,255,255,1) 0%, rgba(255,255,255,1) 28%, rgba(255,255,245,1) 50%, rgba(255,255,255,1) 68%, rgba(255,255,255,1) 100%);
background: -webkit-linear-gradient(22deg, rgba(255,255,255,1) 0%, rgba(255,255,255,1) 28%, rgba(255,255,245,1) 50%, rgba(255,255,255,1) 68%, rgba(255,255,255,1) 100%);
background: linear-gradient(22deg, rgba(255,255,255,1) 0%, rgba(255,255,255,1) 28%, rgba(255,255,245,1) 50%, rgba(255,255,255,1) 68%, rgba(255,255,255,1) 100%);
filter: progid:DXImageTransform.Microsoft.gradient(startColorstr="#ffffff",endColorstr="#ffffff",GradientType=1);
}
a,a:link,a:visited,a:hover,a:active{
	text-decoration: none;
}
#clickAudio,#okAudio,#errorAudio{
	display:none;
}
.text-success {
    color: #3c763d;
}
.text-danger {
    color: #a94442;
}
.blink-item {
  animation: blinker 1s linear infinite;
}

@keyframes blinker {
  50% {
    opacity: 0;
  }
}
.statusBar {
	    position: absolute;
    top: 10px;
    left: 20px;
}
.statusBar #reloadStatus{
	display:none;
}
.statusBar #saveCount,.statusBar #reloadStatus{
	    font-size: 0.8rem;margin-left: 0.5rem;
}
.logo{
	text-align:center;
	margin-top: 3.5rem;
	overflow: hidden;
}

.appBox {
  overflow: hidden;
  position: relative;
  width: 100%;
}
@media (min-width: 800px) {
	.appBox {
		width: 800px;
		margin:auto;
	}
}
textarea:focus, input:focus, .keypad:focus, .screenActive:focus{
    outline: none;
}
.keypad .keypad-input-field,.screenActive .keypad-input-field {
  height: 40px;
  margin: auto;
  position: relative;
  transition: all 0.25s;
  transition-delay: 0.1s;
  width: 90%;
  padding: 1.5rem;
}
.keypad .keypad-input-field:after,.screenActive .keypad-input-field:after {
  background-color: rgba(0, 0, 0, 0.2);
  bottom: 0px;
  content: '';
  height: 1px;
  left: 0px;
  position: absolute;
  width: 100%;
}
.keypad .entered-numbers-wrapper,.screenActive .entered-actives-wrapper {
  height: 80px;
  left: 0px;
  overflow: hidden;
  width: 100%;
}
.keypad .entered-numbers,.screenActive .entered-actives {
  height: 80px;
  left: 50%;
  overflow: hidden;
  position: absolute;
  text-align: center;
  transform: translateX(-50%);
  white-space: nowrap;
}
.keypad .num,.screenActive .num {
  color: #686868;
    animation: fade-in-num 0.1s linear;
    backface-visibility: hidden;
    display: inline-block;
    font-weight: bold;
    overflow: hidden;
    position: relative;
    text-align: center;
    transition: all 0.25s;
    font-size: 2.6rem;
}
.keypad .num.hidden,.screenActive .num.hidden {
  font-size: 0;
}
.keypad .num.hidden:after,.screenActive .num.hidden:after {
  opacity: 1;
  transform: translateX(-50%) translateY(-50%) scale(1);
}
.keypad .num.erased:after,.screenActive .num.erased:after {
  opacity: 1;
  transform: translateX(-50%) translateY(-50%) scale(0.25);
}
.keypad .num:after,.screenActive .num:after {
  background-color: black;
  border-radius: 8px;
  content: '';
  height: 8px;
  left: 50%;
  opacity: 0;
  position: absolute;
  top: 50%;
  transform: translateX(-50%) translateY(-50%) scale(0.25);
  transition: all 0.25s;
  width: 8px;
}
.keypad .backspace,.screenActive .backspace {
  cursor: pointer;
  height: 40px;
  line-height: 40px;
  width: 30px;
}
.keypad .backspace .backspace-icon,.screenActive .backspace .backspace-icon {
  background-color: #545454;
    color: white;
    border-bottom-right-radius: 2px;
    border-top-right-radius: 2px;
    display: inline-block;
    height: 35px;
    position: absolute;
    right: 5px;
    top: 50%;
    transform: translateY(-50%);
    user-select: none;
    width: 44px;
    margin-right: 10%;
}
.keypad .backspace .backspace-icon:after,.screenActive .backspace .backspace-icon:after {
  border: 0px solid transparent;
    border-bottom-width: 20px;
    border-right: 10px solid #545454;
    border-top-width: 16px;
    content: '';
    height: 0px;
    left: -9px;
    position: absolute;
    width: 0px;
}
.keypad .backspace .backspace-icon i,.screenActive .backspace .backspace-icon i {
  font-size: 0.75em;
  height: 14px;
  line-height: 14px;
  position: absolute;
  right: 0px;
  text-align: center;
  top: 0px;
  width: 14px;
}
.keypad .keypad-numbers,.screenActive .keypad-numbers {
  display: flex;
  flex-wrap: wrap;
  margin: auto;
  margin-top: 10px;
  position: relative;
  width: 90%;
  justify-content: flex-end;
}
.keypad .item-wrapper,.screenActive .item-wrapper {
	margin-top: 1rem;
  display: inline-block;
  transition: all 0.25s;
  position: relative;
  vertical-align: top;
  transition: all 0.25s;
  width: 33.3%;
}
.keypad .item-wrapper .item,.screenActive .item-wrapper .item {
	display: flex;
    justify-content: center;
    align-items: center;
  margin-top: 10px;
  text-align: center;
}
.keypad .item-wrapper .item,.screenActive .item-wrapper .item {
  color: #6a5e5e;
  font-size: 2.5em;
    font-weight: bold;
  line-height: 20px;
}
.keypad .item-wrapper .item .inum,.screenActive .item-wrapper .item .inum{
    background: #f2f2f2;
    padding: 50px;
    border-radius: 50%;
	box-shadow: rgba(0, 0, 0, 0.06) 0px 2px 4px 0px inset;
	cursor: pointer;
}
.keypad .item-wrapper .item .icheck,.screenActive .item-wrapper .item .icheck{
    background: #28a745;
    color: #fff !important;
    padding: 40px;
    border-radius: 50%;
	box-shadow: rgba(0, 0, 0, 0.06) 0px 2px 4px 0px inset;
	cursor: pointer;
}
.keypad .item-wrapper .item .iback,.screenActive .item-wrapper .item .iback{
    background: #ffc107;
    color: #fff !important;
    padding: 40px 45px;
    border-radius: 50%;
	box-shadow: rgba(0, 0, 0, 0.06) 0px 2px 4px 0px inset;
	cursor: pointer;
}
.keypad .item-wrapper .item .inum:active,.screenActive .item-wrapper .item .inum:active{
    background: #636363;
    color: #fff;
}
@keyframes fade-in-num {
  0% {
    opacity: 0;
    transform: translateY(50%) scale(0);
  }
  100% {
    opacity: 1;
    transform: translateY(0%) scale(1);
  }
}
#topEnterHelp,#topEnterHelp2{
	text-align: center;
    color: #b9b9b9;
	font-size: 2rem;
}
@keyframes tilt-n-move-shaking {
  0% { transform: translate(0, 0) rotate(0deg); }
  25% { transform: translate(1px, 1px) rotate(1deg); }
  50% { transform: translate(0, 0) rotate(0eg); }
  75% { transform: translate(-1px, 1px) rotate(-1deg); }
  100% { transform: translate(0, 0) rotate(0deg); }
}
.helpActive {
	color: #ffc107;
    cursor: pointer;
	animation: tilt-n-move-shaking 0.15s infinite;
}
button{
	font-family:IRANSans, B Yekan, sans-serif;
}
@media (max-height: 820px) {
	.isize{
		padding: 40px !important;
	}
	.isize2{
		padding: 30px 35px !important;
	}
	.isize3{
		padding: 30px !important;
	}
}
@media (max-height: 740px) {
	.isize{
		padding: 35px !important;
	}
	.isize2{
		padding: 25px 30px !important;
	}
	.isize3{
		padding: 25px !important;
	}
	.logo {
		margin-top: 1.5rem !important;
	}
}
@media (max-height: 670px) {
	.isize{
		padding: 30px !important;
	}
	.isize2{
		padding: 20px 25px !important;
	}
	.isize3{
		padding: 20px !important;
	}
	.logo {
		margin-top: 1.5rem !important;
	}
}
@media (max-height: 630px) {
	.isize{
		padding: 25px !important;
	}
	.isize2{
		padding: 15px 20px !important;
	}
	.isize3{
		padding: 15px !important;
	}
	.logo {
		margin-top: 1.5rem !important;
	}
}
@media (max-height: 600px) {
	.isize{
		padding: 20px !important;
	}
	.isize2{
		padding: 10px 15px !important;
	}
	.isize3{
		padding: 10px !important;
	}
	.logo {
		margin-top: 1.5rem !important;
	}
}
@media (max-height: 550px) {
	.isize{
		padding: 15px !important;
		font-size: 2rem !important;
	}
	.isize2{
		padding: 10px 13px !important;
		font-size: 1.5rem !important;
	}
	.isize3{
		padding: 10px !important;
		font-size: 1.5rem !important;
	}
	.logo {
		margin-top: 1.5rem !important;
		font-size: 1.5rem !important;
	}
	#topEnterHelp,#topEnterHelp2 {
		font-size: 1.5rem !important;
	}
	.keypad .num,.screenActive .num {
		font-size: 1.8rem !important;
	}
}
@media (max-height: 475px) {
	.keypad .keypad-input-field,.keypad .keypad-input-field {
		    padding-top: 0.1rem !important;
	}
}
@media (max-height: 470px) {
	.isize{
		padding: 10px 14px !important;
		font-size: 1.5rem !important;
	}
	.isize2{
		padding: 8px 10px !important;
		font-size: 1.2rem !important;
	}
	.isize3{
		  padding: 7px 10px !important;
		font-size: 1.2rem !important;
	}
}
@media (max-height: 415px) {
	.keypad .item-wrapper,.screenActive .item-wrapper {
		margin-top: 0.5rem !important;
	}
}
@media (max-height: 380px) {
	.keypad .item-wrapper,.screenActive .item-wrapper {
		margin-top: 0.2rem !important;
	}
}
@media (max-height: 365px) {
	#topEnterHelp,#topEnterHelp2 {
		font-size: 1rem !important;
	}
	.keypad .keypad-input-field,.screenActive .keypad-input-field {
		    padding: 1rem !important;
			padding-top: 0.1rem !important;
	}
	.keypad .num,.screenActive .num {
		font-size: 1.2rem !important;
	}
}
@media (min-height: 950px) {
	.isize{
		padding: 60px !important;
	}
	.isize2{
		padding: 50px 55px !important;
	}
	.isize3{
		padding: 50px !important;
	}
	.screenActive-numbers,.keypad-numbers {
	  margin-top: 2rem;
	}
}
@media (min-height: 1050px) {
	.isize{
		padding: 75px 70px !important;
		font-size: 4rem;
	}
	.isize2{
		padding: 60px 65px !important;
		font-size: 3rem;
	}
	.isize3{
		padding: 60px !important;
		font-size: 3rem;
	}
	#topEnterHelp, #topEnterHelp2 {
	  font-size: 3rem;
	}
	.screenActive-numbers,.keypad-numbers {
	  margin-top: 2rem;
	}
	.keypad .num,.screenActive .num {
		font-size: 3.2rem !important;
	}
}
@media (min-height: 1150px) {
	.logo{
		margin-bottom: 5rem !important;
	}
}
@media (min-height: 1250px) {
	.isize {
	  padding: 88px 80px !important;
	  font-size: 5rem;
	}
	.isize2{
		padding: 60px 65px !important;
		font-size: 5rem;
	}
	.isize3{
		padding: 65px !important;
		font-size: 4rem;
	}
	.keypad .entered-numbers-wrapper, .screenActive .entered-actives-wrapper {
		height: 84px;
	}
	#topEnterHelp, #topEnterHelp2 {
	  font-size: 3rem;
	}
	.screenActive-numbers,.keypad-numbers {
	  margin-top: 4rem;
	}
	.keypad .num,.screenActive .num {
		font-size: 3.2rem !important;
	}
}
@media (min-height: 1350px) {
	.isize {
	  padding: 95px 85px !important;
	font-size: 6rem;
	}
	.isize2{
		padding: 60px 65px !important;
		font-size: 6rem;
	}
	.isize3{
		padding: 65px !important;
		font-size: 5rem;
	}
	.keypad .entered-numbers-wrapper, .screenActive .entered-actives-wrapper {
		height: 90px;
	}
	.keypad .entered-numbers, .screenActive .entered-actives {
		height: 90px;
	}
	#topEnterHelp, #topEnterHelp2 {
	  font-size: 3.7rem;
	}
	.screenActive-numbers,.keypad-numbers {
	  margin-top: 3rem;
	}
	.keypad .num,.screenActive .num {
		font-size: 5.2rem !important;
	}
}
@media (min-height: 1350px)  and (min-width: 1100px) {
	.appBox {
		width: 1000px;
	}
	.statusBar #saveCount,.statusBar #connectionStatus,.statusBar #reloadStatus{
		font-size: 2rem !important;
	}
	 .keypad .num:not(:last-child), .screenActive .num:not(:last-child) {
	  margin-right: 1rem;
	}
}
@media (min-height: 1350px)  and (min-width: 1200px) {
	.appBox {
		width: 1100px;
	}
}
@media (min-height: 1500px) {
	.keypad .item-wrapper .item .inum, .screenActive .item-wrapper .item .inum ,
	.keypad .item-wrapper .item .icheck, .screenActive .item-wrapper .item .icheck ,
	.keypad .item-wrapper .item .iback, .screenActive .item-wrapper .item .iback {
		margin-top: 2.5rem;
	}
}
@media (min-height: 1600px) {
	.keypad .item-wrapper .item .inum, .screenActive .item-wrapper .item .inum ,
	.keypad .item-wrapper .item .icheck, .screenActive .item-wrapper .item .icheck ,
	.keypad .item-wrapper .item .iback, .screenActive .item-wrapper .item .iback {
		margin-top: 4rem;
	}
	.keypad .entered-numbers-wrapper, .screenActive .entered-actives-wrapper {
		height: 110px;
	}
	.keypad .entered-numbers, .screenActive .entered-actives {
		height: 110px;
	}
	#topEnterHelp, #topEnterHelp2 {
	  font-size: 5rem;
	}
	.screenActive-numbers,.keypad-numbers {
	  margin-top: 3rem;
	}
	.keypad .num,.screenActive .num {
		font-size: 6rem !important;
	}
	.logo {
		font-size: 3rem !important;
	}
}
@media (min-height: 17300px) {
	.logo {
		font-size: 4rem !important;
	}
}
@media (min-height: 1750px) {
	.isize {
	  padding: 105px 90px !important;
font-size: 7rem;
	}
	.isize2{
		padding: 60px 65px !important;
		font-size: 7rem;
	}
	.isize3{
		padding: 65px !important;
		font-size: 6rem;
	}
	.keypad .num,.screenActive .num {
		font-size: 5.2rem !important;
	}
}
@media (min-height: 1900px) {
	.keypad .item-wrapper .item .inum, .screenActive .item-wrapper .item .inum ,
	.keypad .item-wrapper .item .icheck, .screenActive .item-wrapper .item .icheck ,
	.keypad .item-wrapper .item .iback, .screenActive .item-wrapper .item .iback {
		margin-top: 6rem;
	}
}
#backError{
	display:none;
	    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    text-align: center;
    width: 100%;
    padding-top: 30%;
    direction: rtl;
    height: 100%;
    background-color: #fff;
    z-index: 9999999999998;
}
#cookieError{
	display:none;
	    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    text-align: center;
    width: 100%;
    padding-top: 30%;
    direction: rtl;
    height: 100%;
    background-color: #fff;
    z-index: 99999999999999;
}
@media (max-height: 345px) {
	#backError{
		display:block;
	}
}
@media (max-width: 240px) {
	#backError{
		display:block;
	}
}
@media (max-width: 450px) {
	#topEnterHelp,#topEnterHelp2 {
		font-size: 1.1rem !important;
	}
	.keypad .keypad-input-field,.screenActive .keypad-input-field {
		    padding: 1rem !important;
			padding-top: 0.1rem !important;
	}
	.keypad .num,.screenActive .num {
		font-size: 1.2rem !important;
	}
}