form {
display:inline
}
:root{
--main-bg-color:#151447;
--main-color:#fff;
--secondary-color:#151447
}
.demo{
position:absolute;
top:-406px;
right:0;
left:0;
width:640px;
height:6177px;
background-image:url(../../../design/default/css/../images/demo.jpg);
background-position:top center;
background-repeat:no-repeat;
z-index:1;
opacity:0.5;
display:none
}
.real{
position:relative;
z-index:2;
opacity:1
}
html{
scroll-behavior:smooth;
max-width:100%;
background-color:#333
}
body{
direction:rtl;
overflow-x:hidden;
max-width:640px;
background-color:#333
}
.wrap{
float:right;
width:100%;
background-color:#fff
}
.wrap .header,
.wrap .content,
.wrap .footer{
float:right;
width:100%
}
.wrap .header{
background-color:var(--main-bg-color);
color:var(--main-color);
padding:0 0 26px 0
}
.wrap .header .menu_btn{
float:right;
cursor:pointer;
margin:23px 15px 0 0;
width:48px;
position:relative;
z-index:99999
}
.wrap .header .menu_btn img{
display:inline-block;
max-width:100%
}
.wrap .header .quick_pick{
float:right;
cursor:pointer;
width:146px;
margin:24px 30px 0 0
}
.wrap .header .quick_pick .quick_pick_button{
float:right;
width:100%
}
.wrap .header .quick_pick .quick_pick_button img{
float:right;
width:100%;
animation:bounce 2s infinite
}
.wrap .header .logo{
float:left;
margin:20px 0 0 15px;
width:154px
}
.wrap .header .logo a{
float:right;
width:100%
}
.wrap .header .logo a img{
display:inline-block;
max-width:100%
}
.header_link{
display:none !important
}
.menu-icon{
float:right;
margin:19px 30px 0 0
}
.selectCountry{
width:350px
}
.onlyData {
margin:5px 0 0 0!important
}
.onlyData input{
float:right;
margin:4px 0 0 4px!important;
width:16px;
height:16px
}
.onlyData label{
width:auto;
max-width:fit-content;
float:right;
font-size:16px
}
.swal2-container.swal2-center>.swal2-popup{
font-size:18px
}
.countryListInPopup span{
float:right;
width:50%
}
.companies .subtitle,.devices .subtitle{
font-weight:600;
margin:0 0 10px 0
}
.company {
float:left;
margin:10px
}
.device {
direction:ltr
}
.devices .text {
margin:10px 0 0 0
}
/* order-info-table is a flex table,order-info-row is a row,order-info-headers is a header cell,order-info-cell is a data cell */
.order-info-table{
float:right;
width:100%;
display:flex;
flex-direction:column;
align-items:flex-start;
justify-content:flex-start;
margin:0 0 10px 0;
padding:0;
color:#141347
}
.order-info-table .row{
width:100%;
margin:0 0 20px 0
}
.order-info-row{
display:flex;
width:100%;
margin:0;
padding:10px 0;
align-content:stretch;
flex-direction:row;
flex-wrap:nowrap;
justify-content:center;
align-items:center
}
.order-info-headers{
font-weight:bold;
width:100%;
border-bottom:2px solid #DEDEDE
}
.order-info-cell{
width:100%;
margin:0;
padding:0;
display:flex;
flex-direction:row;
flex-wrap:nowrap;
justify-content:center;
align-items:center
}
/* --- New order-info-table structure  (1 column all,data is centered,title and value below each other) --- */
.order-info-table .order-wrapper{
float:right;
width:100%;
text-align:center;
margin:0 0 20px 0;
font-size:24px
}
.order-info-table .order-wrapper  .order-info-item{
float:right;
width:100%;
text-align:center;
margin:0 0 20px 0
}
.order-info-table .order-wrapper  .order-info-item  .order-info-title{
float:right;
width:100%;
font-weight:bold;
margin:0
}
.order-info-table .order-wrapper  .order-info-item  .order-info-value{
float:right;
width:100%;
margin:0
}
.shortInfo{
float:right;
width:100%;
background-color:#E7E7EC;
color:#141347;
margin:10px 0 0 0;
padding:10px 20px 10px 0;
box-sizing:border-box;
font-size:20px;
border-radius:20px
}
.shortInfo ul{
color:#F19E0D;
margin:10px 0 0 0
}
.shortInfo quote{
position:relative;
font-weight:bold;
display:inline-block
}
.shortInfo quote img{
float:right;
width:20%;
margin:15px 20px 0 0
}
.shortInfo quote span{
float:right;
width:58%;
margin:0 9% 0 0
}
.shortInfo quote::before{
content:"";
position:absolute;
top:-10px;
right:0;
left:0;
width:100%;
height:15px;
background:url(../../../design/default/css/../images/title_border.png) top center no-repeat;
background-size:80% auto
}
.shortInfo quote::after{
content:"";
position:absolute;
bottom:-18px;
right:0;
left:0;
width:100%;
height:15px;
background:url(../../../design/default/css/../images/title_border.png) top center no-repeat;
background-size:80% auto
}
.qr-wrapper{
float:right;
width:100%;
margin:20px 0 0 0;
text-align:center
}
.qr-wrapper h3{
float:right;
width:100%;
font-size:24px;
font-weight:bold;
padding:0;
margin:0;
color:#141347
}
.qr-controllers{
float:right;
width:90%;
margin:20px 5% 0;
padding:0 0 0 0
}
.qr-controllers .qr-tool{
float:right;
width:100%;
font-weight:normal;
margin:10px 0;
font-size:20px;
padding:10px 15px;
box-sizing:border-box;
text-decoration:none;
background-color:#F19E0D;
background-image:url(../../../design/default/css/../images/nl_icon.png);
background-repeat:no-repeat;
background-position:left center;
background-size:contain;
color:#141347;
border-radius:25px
}
.how_to_install{
background-color:#E7E7EC;
color:#141347;
border-radius:20px;
width:90%;
margin:0 5%
}
.how_to_install .title{
float:right;
width:100%;
font-weight:bold;
text-align:center
}
.how_to_install .title h2{
font-size:24px
}
.how_to_install .tg-themetabs{
float:right;
width:100%
}
.how_to_install .tg-themetabs ul{
list-style:none;
padding:0
}
.how_to_install .tg-themetabs ul li{
float:right;
width:100%;
margin:0;
padding:0;
position:relative
}
.how_to_install .tg-themetabs ul .active{
background-color:#CCCCCC;
color:#141347;
border-radius:0
}
.how_to_install .tg-themetabs ul li span{
display:inline-block;
width:100%;
padding:10px 0;
text-align:center;
font-size:20px;
text-decoration:none;
color:#141347
}
.how_to_install .tg-themetabs ul li span img{
display:inline-block;
height:30px;
margin:0 0 0 0
}
.how_to_install .tg-themetabs ul .android{}
.how_to_install .tg-themetabcontent .tg-bookingdetail .tg-panel{
float:right;
width:100%;
padding:0;
border-bottom:1px solid #808080
}
.how_to_install .tg-themetabcontent .tg-bookingdetail .tg-panel h4{
float:right;
width:100%;
font-weight:bold;
font-size:20px;
margin:15px 0 0 0;
padding:0 0 20px 0;
position:relative
}
.how_to_install .tg-themetabcontent .tg-bookingdetail .tg-panel h4::after{
content:"";
position:absolute;
top:0;
left:0;
background-image:url(../../../design/default/css/../images/closed_icon.png);
background-repeat:no-repeat;
background-size:contain;
background-position:0 0;
height:30px;
width:30px
}
.how_to_install .tg-themetabcontent .tg-bookingdetail .tg-panel h4.active::after{
background-image:url(../../../design/default/css/../images/opened_icon.png)
}
.how_to_install .tg-themetabcontent .tg-bookingdetail .tg-panel .tg-panelcontent{
float:right;
width:100%;
margin:0;
padding:0
}
.how_to_install .tg-themetabcontent .tg-bookingdetail .tg-panel .tg-panelcontent .tg-description{
float:right;
width:100%;
margin:0;
padding:0;
font-size:20px
}
.header_link{
display:inline-block !important;
width:25%;
height:32px !important;
line-height:32px !important;
text-align:center !important;
font-size:14px !important;
padding:0 !important;
margin:13px 0 0 0 !important;
border-radius:5px;
text-decoration:none !important
}
.header_link:after{
display:none !important
}
.order-info-table{
width:100%;
margin:0;
padding:0;
display:block
}
.order-info-row{
float:right;
width:50%;
margin:0;
padding:0;
display:block
}
.order-info-headers{
width:CALC(50% - 3px);
display:block;
margin:0;
padding:0;
border-bottom:0;
border-left:2px solid #F19E0D
}
.order-info-cell{
width:CALC(100% - 20px);
margin:0 0 15px 0;
padding:0 10px 0 0;
box-sizing:content-box;
display:block;
text-align:right
}
.tg-guidesslider .tg-btnroundnext{
display:none
}
.tg-logo{
display:block !important;
float:left !important;
margin:11px 0 0 21px !important
}
.tg-logo img{
height:38px
}
.footer{
float:right;
width:100%;
padding:20px 0 0 0;
background-color:var(--main-bg-color);
color:#fff
}
.footer .column{
float:right;
width:100%;
margin:0 0 40px 0;
text-align:center
}
.footer .column .title{
float:right;
width:100%;
font-weight:bold;
font-size:26px;
background:url(../../../design/default/css/../images/title_border.png) center bottom no-repeat;
background-size:54% auto
}
.footer .column .txt{
float:right;
width:CALC(100% - 20px);
margin:10px 10px 0;
color:#fff;
font-size:20px;
font-weight:normal
}
.footer .column .links{
float:right;
width:100%;
margin:20px 0 0 0;
font-size:24px
}
.footer .column .links a{
float:right;
width:100%;
margin:0 0 10px 0;
text-decoration:none;
color:#F19E0D
}
.footer .column .form{
float:right;
width:90%;
margin:10px 5% 0
}
.footer .column .form input[type="email"]{
float:right;
width:80%;
margin:18px 0 0 0;
padding:10px;
background-color:#fff;
color:#000;
height:43px;
border-radius:20px;
border:0
}
.footer .column .form button[type="submit"]{
float:right;
width:20%;
margin:0;
padding:10px;
box-sizing:border-box;
cursor:pointer;
height:43px;
background:transparent;
border:0;
border-radius:100%
}
.footer .column .form button[type="submit"] img{
display:inline-block;
max-width:100%
}
.footer .copyright{
float:right;
width:100%;
text-align:center;
padding:30px 0 20px 0;
background-color:#fff;
color:#000
}
.menu_wrapper{
position:absolute;
top:0;
right:-100%;
width:0;
height:100vh;
background-color:#151447;
z-index:9999;
transition:right 0.5s;
padding:100px 0 0 0
}
.menu_wrapper.open{
right:0;
width:100%
}
.menu_wrapper .links{
float:right;
width:100%;
margin:20px 0 0 0
}
.menu_wrapper .links a{
float:right;
width:100%;
margin:0 0 10px 0;
text-align:center;
text-decoration:none;
color:#fff;
font-size:20px
}
.swal2-input{
margin-bottom:10px
}
.swal2-select{
margin-bottom:10px
}
.swal2-option{
padding:5px;
cursor:pointer
}
.swal2-option:hover{
background-color:#f0f0f0
}
.swal2-option.selected{
background-color:#0D0C2B;
color:white
}
.countries_search{
max-width:100%;
box-sizing:border-box !important;
margin:0 !important
}
.login_form_overlay{
position:fixed;
top:0;
right:0;
left:0;
bottom:0;
background-color:rgba(0,0,0,0.5);
z-index:1000;
display:none
}
.login_form_overlay .login_form_wrapper{
position:absolute;
top:50%;
left:50%;
transform:translate(-50%,-50%);
width:90%;
max-width:90%;
margin:0 auto;
background-color:#fff;
padding:20px;
border-radius:20px;
box-sizing:border-box
}
.login_form_overlay .login_form_wrapper .closer{
position:absolute;
top:10px;
right:10px;
cursor:pointer;
font-size:24px;
color:#141347
}
.login_form_overlay .login_form_wrapper .title{
float:right;
width:100%;
font-size:36px;
font-weight:bold;
margin:0 0 20px 0
}
.login_form_overlay .login_form_wrapper .popup_form .input_wrapper{
float:right;
width:100%;
margin:0 0 20px 0
}
.login_form_overlay .login_form_wrapper .popup_form .input_wrapper label{
float:right;
width:100%;
margin:0 0 10px 0
}
.login_form_overlay .login_form_wrapper .popup_form .input_wrapper label input{
float:right;
width:100%;
padding:10px;
background-color:#f0f0f0;
border:0;
border-radius:20px;
color:#141347
}
.login_form_overlay .login_form_wrapper .popup_form .input_wrapper label span{
float:right;
width:100%;
margin:0 0 10px 0;
font-size:20px;
color:#F19E0D
}
.login_form_overlay .login_form_wrapper .popup_form .forgot_password{
float:right;
width:100%;
margin:0 0 20px 0;
font-size:16px;
color:#F19E0D;
text-align:center;
text-decoration:underline
}
.login_form_overlay .login_form_wrapper .popup_form .submit{
float:right;
width:100%;
margin:0 0 20px 0
}
.login_form_overlay .login_form_wrapper .popup_form .submit button{
float:right;
width:100%;
padding:10px;
background-color:#F19E0D;
color:#141347;
border:0;
border-radius:20px;
cursor:pointer;
font-size:24px
}
.login_form_overlay .login_form_wrapper .popup_form .no_account{
float:right;
width:100%;
margin:0 0 20px 0;
font-size:16px
}
.login_form_overlay .login_form_wrapper .popup_form .no_account p{
width:100%;
margin:0 0 10px 0
}
.login_form_overlay .login_form_wrapper .popup_form .no_account p a{
text-decoration:none;
color:#F19E0D
}
.login_form_overlay .login_form_wrapper .login_form{
display:block
}
.login_form_overlay .login_form_wrapper .signup_form{
display:none
}
.login_form_overlay .login_form_wrapper .title{
float:right;
width:100%;
font-size:24px;
font-weight:bold;
margin:0 0 20px 0
}
.login_form_overlay .login_form_wrapper .divider{
float:right;
width:100%;
margin:0 0 20px 0;
position:relative;
text-align:center;
overflow:hidden
}
.login_form_overlay .login_form_wrapper .divider span{
float:none;
margin:0 0 10px 0;
font-size:20px;
background-color:#FFF;
position:relative;
z-index:2;
padding:10px 20px
}
.login_form_overlay .login_form_wrapper .divider::before,
.login_form_overlay .login_form_wrapper .divider::after{
content:"";
position:absolute;
top:50%;
width:50%;
height:1px;
background-color:#141347
}
.login_form_overlay .login_form_wrapper .divider::before{
left:0
}
.login_form_overlay .login_form_wrapper .divider::after{
right:0
}
.login_form_overlay .login_form_wrapper .social_login{
float:right;
width:100%;
margin:0 0 20px 0
}
.login_form_overlay .login_form_wrapper .social_login .google{
float:right;
width:100%;
margin:0 0 10px 0;
padding:15px 0 10px 0;
text-align:center;
position:relative;
background-color:#f0f0f0;
border-radius:10px
}
.login_form_overlay .login_form_wrapper .social_login .google img{
position:absolute;
top:5px;
right:5px;
width:10%;
margin:5px 10px 0 0
}
.login_form_overlay .login_form_wrapper .social_login .google span{
float:right;
width:100%;
font-size:20px
}
.country_picker_popup_wrapper{
z-index:99999 !important
}
.country_picker_popup_wrapper .swal2-title{
color:#141347;
position:relative
}
/* --- Add title bottom border --- */
.country_picker_popup_wrapper .swal2-title::after{
content:"";
position:absolute;
bottom:-20px;
left:0;
right:0;
width:350px;
margin:0 auto;
height:15px;
background:url(../../../design/default/css/../images/title_border.png) top center no-repeat;
background-size:80% auto
}
.country_picker_popup_wrapper .countries_search{
border:1px solid #141347;
border-radius:35px;
text-align:center;
font-size:26px;
font-weight:bold
}
/* --- Fix the scroll to be thinner (prettier) and remove the arrows --- */
.country_picker_popup_wrapper .swal2-select{
color:#141347;
overflow-y:auto;
max-height:200px;
margin:0;
padding:0;
width:100%
}
.country_picker_popup_wrapper .swal2-select::-webkit-scrollbar{
width:10px
}
.country_picker_popup_wrapper .swal2-select::-webkit-scrollbar-thumb{
background-color:#141347
}
.country_picker_popup_wrapper .swal2-select::-webkit-scrollbar-track{
background-color:#f0f0f0
}
.whatsapp_icon{
position:fixed;
bottom:10px;
left:10px;
right:auto;
top:auto;
width:75px;
height:auto
}
.whatsapp_icon a,
.whatsapp_icon a img{
float:left;
width:100%
}
/* --- Set styling so that the on desktop the body is centered and the content is 640px wide (meaning mobile only) --- */
@media(min-width:1025px){
/* --- Set the HTML to center the body and have a background color of #333 --- */
html{
float:right;
width:100%;
background-color:#333;
display:block;
justify-content:center;
align-items:center
}
body{
top:0;
left:0;
right:0;
width:640px !important;
max-width:640px !important;
min-width:auto !important;
margin:0 auto !important;
padding:20px 0 0 0 !important;
background-color:#333 !important
}
.wrapper{
float:right;
width:640px;
margin:0 auto;
overflow:hidden;
position:relative
}
.wrapper{
width:640px;
margin:0 auto
}
.wrap .header .menu_btn{
cursor:pointer;
margin:99px 30px 0 0;
width:60px
}
.wrap .header .menu_btn img{}
.wrap .header .quick_pick{
width:236px;
margin:93px 37px 0 0
}
.wrap .header .quick_pick .quick_pick_button{
width:100%
}
.wrap .header .quick_pick .quick_pick_button img{
width:100%
}
.wrap .header .logo{
margin:92px 0 0 23px;
width:218px
}
.wrap .header .logo a{
width:100%
}
.shortInfo quote img{
width:16%;
margin:15px 20px 20px 0
}
.shortInfo quote span{
width:58%;
margin:20px 9% 0 0
}
}
/* --- Set endless animation .bounce to animate the element --- */
@keyframes bounce {
0%,20%,50%,80%,100% {
transform:translateY(0)
}
40% {
transform:translateY(-7px)
}
60% {
transform:translateY(-3px)
}
}
/*
* span {
display:inline-block
}
*/
/*
#lbuttons,
#lbuttons div,
#lbuttons a,
#lbuttons img,
.fxc #subtoolbar,
.fxc #admin_panel {
-webkit-transform:translate3d(0,0,0);
-webkit-backface-visibility:hidden;
-webkit-perspective:1000;
transform:2DValue(val) 3DValueSetToNull(0);
transform:2DValue(val);
-webkit-transform :translateZ(0);
-o-transform :translateZ(0);
-webkit-transform :translateZ(0);
transform :translateZ(0);
-webkit-transition:all 0.5s linear
}
.fxc #admin_pusher,
.fxc #sys_website {
-webkit-transition:all 0.5s linear
}
*/
body {
position:absolute;
left:0;
top:0;
width:100%;
height:100%;
min-width:100%;
min-height:100%;
padding:0;
margin:0
}
p {
padding:0;
margin:0
}
div.bs {
float:right
}
.seoform span {
float:left;
width:100px
}
.seoform div input {
width:500px
}
.seoform div {
float:left;
width:100%;
margin-bottom:15px
}
/* css fixes */
ol {
position:relative;
right:20px
}
a{
outline:0
}
input[type="image"],
input[type="submit"],
input[type="button"],
button {
cursor:pointer
}
.ie a img {
border:0
}
.hidden {
position:absolute;
left:0;
top:-100000px
}