@font-face {
  font-family: din_next;
  src: url(../font/din_next_arabic_regular.otf);
}
 

#phone-message {
	color: #ff0000;
}


* {
  padding: 0;
  margin: 0;
  color: #282164;
  box-sizing: border-box;
  word-wrap: break-word;
  font-family: din_next  ;
}
   
a{
	   text-decoration : none;
}   

body{
background-color: #f6f6f6;
}

.main-container {
    
    border-radius: 4px;
    
    
    background: white;
      border-radius: 0px 0px 16px 16px; 
      padding: 0rem 1rem 1rem 1rem;
      max-width: 100%;
      width: 100%; 
      text-align: center;
      
}

.top-header {
	position : relative;
	direction: ltr;
	background: #eee;
	width: 100%;
	height : 75px;
	box-shadow: 0px 2px 2px rgb(0 0 0 / 30%);
}

.top-header-links {
	position: relative;
    direction: ltr;
    background: #fefefe;
    width: 100%;
    height: 40px;
    box-shadow: 0px 2px 2px rgb(0 0 0 / 30%);
    padding: 5px;
	margin-bottom: 20px;
}
.menu-item{
	margin-right: 7px;
	cursor:pointer;
}

.top-header-section {
	display:inline-block;
    vertical-align: middle;
}

.th1{
	padding-top: 10px; 
	margin-left: 15px;
	cursor:pointer;
}

.th2{
	padding-top: 7px;
	margin-left: 15px;
}

.th2 img{
	width: 60px;
	border-radius: 4px;
}

.th3{
	font-weight: 500;
    font-size: 17px;
    line-height: 17px;
    padding-top: 10px;
    margin-left: 5px;
}

.th3 img{
	width: 13px;
}

.language{
	font-size: 12px;
    margin-top: 0px;
	color: #282164;
	display: flex
}

.language a{
	font-size: 12px;
	color: #282164;
}


.language img{
	vertical-align: bottom;
	margin-right: 2px;
}

.th4{
	font-weight: 500;
    font-size: 15px;
    padding: 0px 5px 5px 5px;
    height: auto;
    margin-right: 15px;
    margin-top: 25px;
    border: 1px #282164 solid;
    cursor: pointer;
    float: right;
	border-radius: 4px;
}


.header .title{
	color: #282164;
    font-weight: 900;
  position: absolute;
       top: -45px;
    left: -30px;
}

.header .title_right{
	color: #282164;
    font-weight: 900;
    font-size: 20px; 
    position: absolute;
    top: -10px;
    right: -15px;
    
}

.header .title a{
	color: #282164;
    font-weight: 900;
}


 

.content1 {
	margin: 30px 0px;
}

fieldset {
	border: 1px solid rgba(0, 0, 0, 0.1);
	box-sizing: border-box;
	border-radius: 15px;
	padding: 15px;
	margin: 15px 0;
}

.or {
	color: #282164;	
	font-weight: 600;
	font-size: 20px;
	line-height: 23px;
	align-items: center;
	text-align: center;
	letter-spacing: 0.246908px;
	text-transform: capitalize;
	margin-bottom: 10px
}

.c2 {
	background: #282164;
    border-radius: 5px;
    height: 45px;
    font-weight: bold;
    font-size: 18px;
    line-height: 20px;
    text-align: center;
    padding: 10px;
    color: #ffffff;
    width: 94%;
    margin: auto;
    margin-top: 25px;
cursor: pointer;
}

.c2a {
	background: #282164;
    border-radius: 5px;
    height: 45px;
    font-weight: bold;
    font-size: 18px;
    line-height: 20px;
    text-align: center;
    padding: 10px;
    color: #ffffff;
    width: 47%;
	display : inline-block;
    margin: auto;
    margin-top: 25px;
cursor: pointer;
}

.c3 {
font-weight: 600;
font-size: 17px;
line-height: 20px;
align-items: center;
text-align: center;
letter-spacing: 0.246908px;
color: #000000;
margin-top : 25px;
}

.c4 {
margin-top : 25px;
}

.c4 input{
	border: none;
	outline: none;
    border-bottom: 1px rgba(0, 0, 0, 0.2) solid;
    width: 50%;	
}

.c5{
	border: 3px solid #282164;
	box-sizing: border-box;
	border-radius: 5px;
	margin-top : 25px;
	font-size: 20.5843px;
	height : 50px;
	line-height: 24px;
	align-items: center;
	text-align: center;
	letter-spacing: 0.344215px;
	padding: 10px;
	color: #282164;
cursor : pointer;
}

.footer{
	margin-top: 2rem;
	display: flex;
	font-size: 0.9rem;
    justify-content: space-between;
	text-align: center;
}

.cu1{
	margin-top:15px;	
}
  
.footer-section {
	display: inline-block;
    vertical-align: middle;
    font-weight: bold;
}


.payment-rules-table{
	width : 100%	
}  

.s2{
	margin-top: -20px;
}

.payment-rules-section{
	display: inline-block;
    width: 100%;
    margin-left: 5px;
    margin-right: 5px;
    vertical-align: text-top;
}

.payment-rules-section fieldset{
	padding: 12px 5px 12px 5px;
    text-align: center;
    height: auto;
}

.header-number{
	margin-top: -15px;
	font-weight: bold;
}

.header-content{
	font-size : 10px;
}

.hc2{
	font-size:9px;
}

.payment-options-icons{
    border: 2px #282164 solid;
    margin-top: 11px;
    margin: 10px;
    height: 80px;
    width: 94%;
    background: white;
    border-radius: 15px;
    box-shadow: rgba(60, 66, 87, 0.12) 0px 7px 14px 0px, rgba(0, 0, 0, 0.12) 0px 3px 6px 0px;
}

.payment-options-icon{
height : 40px;
margin-top:10px;	
}

.poi1{

height: 60px;
    float: left;
    margin: 10px 15px;
}

.poi2{
	height: 40px;
    float: right;
    margin: 20px 15px 20px 20px;
}

 
 

 

.thank-you-introduction{
	font-size:18px;
	font-weight:bold;
	margin-bottom: 15px;
}


.order-details-section{
	display: inline-block;
    width: 45%;
    margin-left: 5px;
    margin-right: 5px;
    vertical-align: text-top;
} 

.order-details-section fieldset{
	padding: 12px 1px 1px 1px;
    text-align: center;
    height: 120px;
    border: 1px #282164 solid;
	border-radius: 8px;
}

.order-details-section .header-number {
	margin-top: 0px;
        height: 40px;
}

.order-details-section .details-title {
	font-size: 14px;
    color: #282164;
    font-weight: bold;
    letter-spacing: 0.7px;
}

.order-details-section .details-content {
	font-size: 14px;
    letter-spacing: 0.7px;
}


.oc2{
 font-size : 15px;	
}

.orh {
	margin-top:20px;
}

.ods1{
	width: 94%;	
}

.ht1{
	width: 312px;	
}

#googlemaps {
    width: 100%;
    position: relative;
    height: 500px;
    z-index: 0; 
}

.gm-style .gm-style-iw-c{
	border: 2px #282164 solid;
	max-width: max-content !important;
	overflow: unset !important;
padding: 0px  !important;
}

.gm-style .gm-style-iw-d {
    overflow: unset !important;
}

.mapinfopopup{
	
} 

.info-box{
	// border: 2px #282164 solid;
    width: max-content;
    height: 100px;
}

.info-box-section{
	display: inline-block;
    height: 65px;
    float: left;
}

.ibs1 img{
	width: 50px;
    margin-top: 25px;
}

.info-box-title{
	font-weight: bold;
    font-size: 10px;
    margin: 5px 3px;
    text-align: left;
}

.info-box-content{
    font-size: 9px;
	width: 50%;
	font-weight: bold;
}

.ibc1{
    margin-bottom: -4px;
}

.ibc2{
    margin-top: 10px;
}

.ibc3{
	display: inline-block;
    font-size: 12px;
    font-weight: bold;
    margin-right: 5px;
}

#loader-logo{
    position: relative;
    z-index: 9999;
}

#loader-logo img{
    width: 100%;
}

#footer {
  position: relative;
bottom: 0;
  z-index: 1; /* The z-index should be higher than Google Maps */
  width: 100%;
  color: white;
  background: white;
padding: 5px 0;
}

#header {
      position: relative;
    top: -3px;
    z-index: 1;
    width: 100%;
    color: white;
    //background: #000000;
    border-radius: 0 0 10px 10px;
    margin-bottom: 60px;
}

.lang-header{
position: absolute;right: 20px;
}

.orDesign{
	text-align: center;
    font-weight: bold;
    margin-top: -10px;
}

#payment-rules {
margin-left: 18px;
    padding: 0px 20px 0 0;
}
#payment-rules li {
color: #8c8f8f;
 
line-height: 15px;
    font-size: 15px;
    margin-bottom: 10px;

}

 
/* Three image containers (use 25% for four, and 50% for two, etc) */
.imagescolumn{
float: left;
    width: 100%;
text-align: center;
}

/* Clear floats after image containers */
.imagesrow::after {
  content: "";
  clear: both;
  display: table;
}

#green-note{
font-size: 12px; 
    color: #282164;
    font-weight: bold;
}

 #canvas {
      width: 100%;
	      height: 385px;
}
.flex-flex {
    display: flex;
}
.align-center {
  align-items: center; 
}
.center-center {
  align-items: center;
  justify-content: center;
}
.box-root {
    box-sizing: border-box;
}
.flex-direction--column {
    -ms-flex-direction: column;
    flex-direction: column;
}
.loginbackground-gridContainer {
    display: -ms-grid;
    display: grid;
    -ms-grid-columns: [start] 1fr [left-gutter] (86.6px)[16] [left-gutter] 1fr [end];
    grid-template-columns: [start] 1fr [left-gutter] repeat(16,86.6px) [left-gutter] 1fr [end];
    -ms-grid-rows: [top] 1fr [top-gutter] (64px)[8] [bottom-gutter] 1fr [bottom];
    grid-template-rows: [top] 1fr [top-gutter] repeat(8,64px) [bottom-gutter] 1fr [bottom];
    justify-content: center;
    margin: 0 -2%;
    transform: rotate(-12deg) skew(-12deg);
}
.box-divider--light-all-2 {
    box-shadow: inset 0 0 0 2px #e3e8ee;
}
.box-background--blue {
    background-color: #19c5b9;
}
.box-background--white {
  background-color: #ffffff; 
}
.box-background--blue800 {
    background-color: #212d63;
}
.box-background--gray100 {
    background-color: #e3e8ee;
}
.box-background--cyan200 {
    background-color: #7fd3ed;
}
.padding-top--64 {
  padding-top: 64px;
}
.padding-top--24 {
  padding-top: 24px;
}
.padding-top--48 {
  padding-top: 48px;
}
.padding-bottom--24 {
  padding-bottom: 24px;
}
.padding-horizontal--48 {
  padding: 48px;
}
.padding-bottom--15 {
  padding-bottom: 15px;
}


.flex-justifyContent--center {
  -ms-flex-pack: center;
  justify-content: center;
}

span {
    font-size: 12px;
    color: #1a1f36;
}
label {
    margin-bottom: 10px;
}
.reset-pass a,label {
    font-size: 36px;
    font-weight: 600;
    display: block;
}
.reset-pass > a {
    text-align: right;
    margin-bottom: 10px;
}
.grid--50-50 {
    display: grid;
    grid-template-columns: 50% 50%;
    align-items: center;
}

.field input {
    font-size: 16px;
    line-height: 28px;
    padding: 8px 16px;
    width: 100%;
    min-height: 44px;
    border: unset;
    border-radius: 4px;
    outline-color: rgb(84 105 212 / 0.5);
background-color: #ecf3f3;
    box-shadow: rgba(0, 0, 0, 0) 0px 0px 0px 0px, 
                rgba(0, 0, 0, 0) 0px 0px 0px 0px, 
                rgba(0, 0, 0, 0) 0px 0px 0px 0px, 
                rgba(60, 66, 87, 0.16) 0px 0px 0px 1px, 
                rgba(0, 0, 0, 0) 0px 0px 0px 0px, 
                rgba(0, 0, 0, 0) 0px 0px 0px 0px, 
                rgba(0, 0, 0, 0) 0px 0px 0px 0px;
}

input[type="submit"] {
    background-color: #282164;
    box-shadow: rgba(0, 0, 0, 0) 0px 0px 0px 0px, 
                rgba(0, 0, 0, 0) 0px 0px 0px 0px, 
                rgba(0, 0, 0, 0.12) 0px 1px 1px 0px, 
                #282164 0px 0px 0px 1px, 
                rgba(0, 0, 0, 0) 0px 0px 0px 0px, 
                rgba(0, 0, 0, 0) 0px 0px 0px 0px, 
                rgba(60, 66, 87, 0.08) 0px 2px 5px 0px;
    color: #fff;
    font-weight: 600;
    cursor: pointer;
}



#scan-btn ,#back-btn , #phone-btn, #go-btn , #add_ticket{
color: black;
    margin-top: 15px;
text-align:center;
font-size: 16px;
    line-height: 28px;
    padding: 8px 16px;
    width: 100%;
    min-height: 44px;
    border: unset;
    border-radius: 4px;
    
    background-color: rgb(255, 255, 255);
    box-shadow: rgba(0, 0, 0, 0) 0px 0px 0px 0px, 
                rgba(0, 0, 0, 0) 0px 0px 0px 0px, 
                rgba(0, 0, 0, 0) 0px 0px 0px 0px, 
                rgba(60, 66, 87, 0.16) 0px 0px 0px 1px, 
                rgba(0, 0, 0, 0) 0px 0px 0px 0px, 
                rgba(0, 0, 0, 0) 0px 0px 0px 0px, 
                rgba(0, 0, 0, 0) 0px 0px 0px 0px;
    background-color: #282164;
    box-shadow: rgba(0, 0, 0, 0) 0px 0px 0px 0px, 
                rgba(0, 0, 0, 0) 0px 0px 0px 0px, 
                rgba(0, 0, 0, 0.12) 0px 1px 1px 0px, 
                #282164 0px 0px 0px 1px, 
                rgba(0, 0, 0, 0) 0px 0px 0px 0px, 
                rgba(0, 0, 0, 0) 0px 0px 0px 0px, 
                rgba(60, 66, 87, 0.08) 0px 2px 5px 0px;

    font-weight: 600;
    cursor: pointer;
}

#go-btn{
display : inline-block;
width : 24% !important;
}

#dv{
width:74%;
}

.field-checkbox input {
    width: 20px;
    height: 15px;
    margin-right: 5px; 
    box-shadow: unset;
    min-height: unset;
}
.field-checkbox label {
    display: flex;
    align-items: center;
    margin: 0;
}
a.ssolink {
    display: block;
    text-align: center;
    font-weight: 600;
}
.footer-link span {
    font-size: 14px;
    text-align: center;
}
.listing a {
    color: #697386;
    font-weight: 600;
    margin: 0 10px;
}

.animationRightLeft {
  animation: animationRightLeft 2s ease-in-out infinite;
}
.animationLeftRight {
  animation: animationLeftRight 2s ease-in-out infinite;
}
.tans3s {
  animation: animationLeftRight 3s ease-in-out infinite;
}
.tans4s {
  animation: animationLeftRight 4s ease-in-out infinite;
}


.detailsBlock {
	background: rgb(34,226,203);
background-image: url("../images/bg-details.png"); /* fallback */
  background-image: url("../images/bg-details.png"),linear-gradient(90deg, rgba(34,226,203,1) 0%, rgba(15,183,185,1) 100%);
    border-radius: 10px;
    padding-left: 15px;
    padding-top: 12px;
    padding-bottom: 12px;
    padding-right: 15px;
	margin-top:15px;
	margin-bottom:15px;
color : white;
background-size: contain;
}


.detailsBlock h3 , .detailsBlock td , .detailsBlock span  , .detailsBlock strong {
color : #fefefe !important;
    font-size: 12px;
}

.countup .timeel {
  display: inline ;
}
.countup span[class*="timeRef"] {
  margin-left: 0;
  background: #e8c152;
  color: black;
}



@keyframes animationLeftRight {
  0% {
    transform: translateX(0px);
  }
  50% {
    transform: translateX(1000px);
  }
  100% {
    transform: translateX(0px);
  }
} 

@keyframes animationRightLeft {
  0% {
    transform: translateX(0px);
  }
  50% {
    transform: translateX(-1000px);
  }
  100% {
    transform: translateX(0px);
  }
} 

.qrscanner video {
	margin-top:20px;
  max-width: 95%;
  max-height: 75%;
}


/* The grid: Four equal columns that floats next to each other */
.column {
    float: left;
    width: 45%;
    padding: 15px 0px;
    margin: 10px 0px;
    height: 75px;
    border-radius: 10px;
    position: relative;
    margin-right: 10px;
	cursor:pointer;
	border: 1px #d2e5e4 solid;
	box-shadow: 0px 2px 4px #eee;
}

.pcolumn{
	float: left;
    width: 100%;
    padding: 5px 5px 5px 10px;
    margin: 1px;
    border: 1px #d2e5e4 solid;
    height: 55px;
    border-radius: 8px;
    position: relative;
    box-shadow: 0px 2px 4px #eee;
    text-align: left;
	margin: 5px 0px;
	cursor:pointer;
}


.pcolumn.plan .price {
  font-size: 12px;
    font-weight: bold;
	color: #282164;
}

.pcolumn.plan .title {
  font-size: 16px;
    font-weight: bold;
}

.pcolumn.plan .select {
  position: absolute;
    top: 15px;
    right: 10px;
}

.column.active {
  background : #c7f9f5;
}
 
.column.plan .price {
  font-size : 9px;
}

.column.plan .title {
  font-size : 10px;
}

.section-title{
	    font-size: 18px;
    font-weight: bold;
    margin-bottom: 14px;
    color: #282164;
    text-align: left;
}

.mcolumn {
  float: left;
  width: 26%;
  padding: 10px;
	    padding: 20px 5px;
    margin: 10px;	
    height: 45px;
    border-radius: 20px;
	position:relative;
}

/* Style the images inside the grid */
.column img {
  opacity: 0.8;
  cursor: pointer;
  width: 80px;
}

.column img:hover {
  opacity: 1;
}

/* Clear floats after the columns */
.row:after {
  content: "";
  display: table;
  clear: both;
}
 

/* Expanding image text */
#imgtext {
  position: absolute;
  bottom: 15px;
  left: 15px;
  color: black;
  font-size: 20px;
}

/* Closable button inside the image */
.closebtn {
  position: absolute;
  top: 10px;
  right: 15px;
  color: white;
  font-size: 35px;
  cursor: pointer;
}

.payment-rules-link {
    position: absolute;
    bottom: -20px;
    left: 5px;
    font-size: 12px;
    color: #282164;
    text-decoration: underline;
	cursor:pointer;
}


/* The Modal (background) */
.modal {
  display: none; /* Hidden by default */
  position: fixed; /* Stay in place */
  z-index: 9999; /* Sit on top */
  padding-top: 100px; /* Location of the box */
  left: 0;
  top: 0;
  width: 100%; /* Full width */
  height: 100%; /* Full height */
  overflow: auto; /* Enable scroll if needed */
  background-color: rgb(0,0,0); /* Fallback color */
  background-color: rgba(0,0,0,0.4); /* Black w/ opacity */
}

/* Modal Content */
.modal-content {
  background-color: #fefefe;
  margin: auto;
  padding: 20px;
  border: 1px solid #888;
  width: 80%;
}

/* The Close Button */
.close {
  color: #aaaaaa;
  float: right;
  font-size: 28px;
  font-weight: bold;
}

.close:hover,
.close:focus {
  color: #000;
  text-decoration: none;
  cursor: pointer;
}

.counter{
	border: 1px #282164 solid;
    width: 10px;
    margin: auto;
    border-radius: 100px;
    padding: 2px 10px 3px 10px;
    text-align: center;
    background: #282164;
    color: white;
    margin-right: 5px;
}

.top-header-links {
	display:none;
}

.button-group {
      display: flex;
      gap: 1rem; 
    }
.btn {
      flex: 1;
      padding: 0.75rem;
      border: none;
      border-radius: 8px;
      font-size: 1rem;
      cursor: pointer;
      transition: background 0.3s ease;
    }
    .btn-sms {
      background-color: #282164;
      color: white;
    }
    .btn-sms:hover {
      background-color: #282164;
    }
    .btn-whatsapp {
      background-color: #282164;
      color: white;
    }
    .btn-whatsapp:hover {
      background-color: #282164;
    }
    input[type="tel"] {
    border: none;
    flex: 1;
    font-size: 1rem;
    outline: none;
    }
    
    .input-group {
    display: flex;
    align-items: center;
    border: 3px solid #e7e4e4;
    border-radius: 0px;
    padding: 0.5rem; 
    width: 90%;
    margin: auto;
}