@font-face {
   font-family: IRANSans;
   font-style: normal;
   font-weight: normal;
   src: url('assets/fonts/IRANSans/IRANSansWeb.woff2') format('woff2');
}

@font-face {
   font-family: IRANSans;
   font-style: normal;
   font-weight: bold;
   src: url('assets/fonts/IRANSans/IRANSansWeb_Bold.woff2') format('woff2');
}

html{
   scroll-behavior: smooth;
}

html,
body {
   height: 100%;
   margin: 0;
   padding: 0;
   direction: rtl;
   font-family: IRANSans;
   display: flex;
   flex-direction: column;
}

h1,
h3,h4,label, button,input ,p {
   text-align: right;
   font-family: IRANSans;
}

.form {
   display: flex;
   justify-content: center;
   margin-bottom: 20px;
}

.show-numbers{
   text-align: center;
   margin-bottom: 10px;
}

input {
   margin: 0 5px 0 10px;
   padding: 3px 10px;
   border-radius: 5px;
   border: 1.5px solid #aaa;
   transition: .3s;
   text-align: center;
   outline: none;
}

input:focus {
   border-color: rgb(100, 185, 245);
}

span {
   align-self: center;
   color: #555;
}

button {
   cursor: pointer;
   background-color: rgb(75, 160, 280);
   padding: 3px 15px 5px;
   border: none;
   color: #fff;
   font-weight: bold;
   outline: none;
   border-radius: 5px;
   -webkit-border-radius: 5px;
   -moz-border-radius: 5px;
   -ms-border-radius: 5px;
   -o-border-radius: 5px;
}

#p {
   color: red;
   display: none;
   text-align: center;
   margin-top: -5px;
}

#map {
   width: 100%;
   height: 98%;
}

.gm-style{
   direction: ltr;
}
#myProgress {
   width: 100%;
   background-color: #ddd;
 }
 
 #myBar {
   width: 1%;
   height: 30px;
   background-color: #4CAF50;
   text-align: center;
   line-height: 30px;
   color: white;
 }
#showDots, #showNumbers{
   width: 20px;
   height: 20px;
}
@media screen and (max-width: 550px) {
   h1{
      font-size: 1.7rem;
      margin-bottom: .5rem;
   }

   h3{
      margin-top: .5rem;
   }

   .form {
      flex-direction: column;
      margin-bottom: 15px;
   }

   input[type=text] {
      margin: 0 20vw 15px 20vw;
      text-align: center
   }
    
   button {
      margin: 0 20vw;
      border-radius: 6px;
      -webkit-border-radius: 6px;
      -moz-border-radius: 6px;
      -ms-border-radius: 6px;
      -o-border-radius: 6px;
   }

   #map{
      flex: 1;
   }
}
table {
   font-size: 1em;
}

.ui-draggable, .ui-droppable {
   background-position: top;
}
.centerText {
   text-align: center;
}