﻿/* pixema@live.com custom code */

@import url(https://fonts.googleapis.com/earlyaccess/droidarabickufi.css);
.droid-arabic-kufi{font-family: 'Droid Arabic Kufi', serif;}
.leftside {
	font-family: 'Droid Arabic Kufi', serif;
}
label#my_hidden_input-error {
    margin-top: -30px;
}
.langbox label.error {position: absolute;
    top: 45px;} 
label.error {font-size:14px; color:#df0e0e;}
input.error {border: 1px solid red!important;}
label#file1-error {
    top: -100px;
    font-size: 20px;
    position: relative;
    right: 50px;
}
.rightside {float:right!important;}
.footheader {padding-top:15px;}
.footheader h3 {margin-bottom: 25px; text-align:center; font-size: 28px; font-weight: bold; font-family: 'Droid Arabic Kufi', serif;}
.total h3 {text-align:center; font-size: 32px; font-weight: bold; font-family: 'Droid Arabic Kufi', serif;}
.total span {
    font-weight: bold;
    display: block;
    text-align: center!important;
    font-size: 45px;
    color: #fff;
}
.footlist ul li {line-height:20px;}
.footlist {direction: ltr; text-align:right;color: #fff; font-size: 20px; font-family: 'Droid Arabic Kufi', serif;	font-weight:bold; }
.footlist i {font-size:12px; color: #000;}
.footoptions {
	margin-top:10px;
	margin-bottom:10px;
    font-weight: bold;
    font-size: 18px;
    direction: rtl;
    color: #fff;
    text-align: center;
}
.touchy:hover {cursor:pointer;}
.footoptions label {cursor:pointer; margin-left: 15px;}
.footoptions input {
    margin-right: 15px;
}
.newline {display:flex;}
.newline label {cursor:pointer; margin-left: 15px;}
.newline input {
    vertical-align: middle;
    margin-left: 15px;
    margin-right: 0px;
    height: 35px;
}
input.submitbutton {
	 font-weight: bold;
    margin-top: 20px;
    border: none!important;
    border-radius: 100%;
    color: #000;
    font-size: 32px;
    height:120px;
	width:120px;
    margin-bottom: 30px;
}
.total {text-align:center;}
.ball {padding-right:0px!important}

.hidebutton {margin-bottom:20px;}
.hidebutton input {display:none; }
.hidebutton label img  {  cursor: pointer; max-height:100px;}
.hidebutton label {
      margin-bottom: 0px;
    margin-top: -18px;
    display: block;
    text-align: center;
}
.rightside {direction:rtl;}
.rightheader h3{text-align:right; font-size:22px; font-family: 'Droid Arabic Kufi', serif;	font-weight:bold; color:#fff; padding:20px;}
.smallh3 {max-width:210px;display:inline-block;}
.rightheader .select2 {
    vertical-align: top!important;
    display: inline-block;
    width: 120px!important;
    margin-top: 20px!important;
}
.secondright {color: #fff;
    text-align: right;
    font-size: 22px;
    font-weight: bold; margin-bottom:20px;}
.secondright i{font-size:12px;}
.left {text-align:left;}
.langbox label:first-child {
    min-width: 110px;
}
.floatright{float:right;}
.smallabel label{min-width:unset!important;}
.langbox {display:flex;}
.langbox label{margin-left:10px;}
.langbox .select2 {width:175px!important;}
.fullwidth input {width:80%!Important;}
.payment-form .rightside .secondright input[type="text"] {
    padding-left: 10px;
    font-size: 18px;
    background: #333!important;
    border-radius: 10px;
    border: 1px solid grey;
    margin-right: 10px;
    margin-left: 5px;
   width: 70%;
    font-weight: lighter;
    padding-right: 10px;
}
.h5custom div h5 {color: #ababab;
	font-size: 15px;}
.h5custom div label h5 {
	color: #ababab;
	font-size: 15px;
}
.tooltiptip {
	cursor:pointer;
    bottom: 5px;
    left: 20px;
    font-weight: bold;
    color: #2ecabd;
    position: relative;
    display: inline-block;
    font-size: 20px;
}
.black .tooltiptiptext {
    left: 0!important;
}
.black {
    bottom: -5px!important;
    color: #000!important;
    left: 0!important;
}
.tooltiptip .tooltiptiptext {
  font-size:13px;
  visibility: hidden;
  width: 120px;
  background-color: black;
  color: #fff;
  text-align: center;
  border-radius: 6px;
  padding: 5px 0;

  /* Position the tooltip */
  position: absolute;
  z-index: 1;
}

.tooltiptip:hover .tooltiptiptext {
  visibility: visible;
}
#timer-error {
    position: absolute;
    font-size: 22px;
    right: -15px;
}
#payment-error {
    position: absolute;
    font-size: 22px;
    right: -15px;
}
#deladdre-error {
    top: -15px;
    position: absolute;
}
#langtrans-error {
	    bottom: -30px;
    position: absolute;
}
.secondright div label {cursor:pointer;}
.secondright label {cursor:pointer;}
#pagetotalnumber {
    border: 1px solid #b1b1b1;
    height: 35px;
    min-width: 100px;
    border-radius: 10px;
    padding-right: 10px;
    color: #000;
}
#tolang:disabled {background:gray; color:#333;}
#fromlang:disabled {background:gray; color:#333;}
#tolang {border: 1px solid gray;
    font-weight: normal;
    height: 34px;
    border-radius: 10px;
    color: #000;
    font-size: 20px;}
	#fromlang {border: 1px solid gray;
    font-weight: normal;
    height: 34px;
    border-radius: 10px;
    color: #000;
    font-size: 20px;}
	.row.payment-form {display:flex;}
	.rightside {padding-bottom:40px;}
	@media only screen and (max-width: 990px) and (min-width: 770px) 
	{
		.rightside {width:100%!important;order:100;}
		.leftside {width:100%!important; order:0;}
		.row.payment-form {display:grid!important}
		
	}
	@media only screen and (min-width: 990px) 
	{
		.mesta3gel {padding-left: 0;
    padding-right: 0;}
		
	}
@media only screen and (min-width: 1200px) 
{	
.leftside {width:30%!important}
.newline {padding:0!important;}
.fullwidth input {width:75%!important}
.cairo {padding-left:0!important}
.qena {padding-left:0!important}
.h5custom {padding-left:0!important;}
	}
	@media only screen and (max-width: 1200px) and (min-width: 990px) 
{	
.rightside {padding-right:20px;}
.secondright label {
    min-width: 70px;
}
.cairo {width:100%!important}
.qena  {width:100%!important}
.estelam {min-width:170px!important;}
#fromlang {width:170px!important}
#tolang {width:170px!important}
#pagetotalnumber {max-width:90px!important;min-width:90px!important;}
	}
	@media only screen and (max-width: 450px) 
	{	
	.langbox label {font-size:20px;}
	#finaltranslate {margin:0!important;}
	.paymentlogo {height:25px!important;}
	#homedel {top:30px!important;}
	#qenadel {top:30px!important;}
	#cairodel {top:30px!important;}
	#homey {width:125%!important; margin-right:-10%!important;padding:0!important;}
	.langbox label:first-child {margin-right:-10px;}
		#fromlang {width:100%}
		#tolang {width:100%;}
		.cairo {    max-width: 80%!important;}
		.qena {    max-width: 80%!important;}
		.homehome {    max-width: 80%!important;}
		.cairo .specialpadding {padding-right:25px;}
		.qena .specialpadding {padding-right:25px;}
		.homehome .specialpadding {padding-right:25px;}
		
	}
@media only screen and (max-width: 990px) 
{	
.homehome {padding-left:0!important;}
.newline {width:unset!important;float:right;}
.clearfix2:before, .clearfix2:after { 
    content: " ";
    display: table;
}
.clearfix2:after {
    clear: both;
}
#homedel {
	float: right;
    position: relative;
    top: 16px;
	
}
#qenadel {
	float: right;
    position: relative;
    top: 16px;
	
}
#cairodel {
	float: right;
    position: relative;
    top: 16px;
	
}
.specialpadding {padding-right:10px;}
.nofloat {float:none!important;}
.inputy {min-width: 60px;}
.ella {margin-right:88px;}
#fromlang-error {
    margin-right: 88px;
}
.middlebox {float:none!important;}
.secondright {}
	.rightside{
		overflow:hidden;
		order:1;
		float:none!Important;
		    padding-right: 25px;
	}
	.row.payment-form {display:grid!important;}
	.leftside {order:2;}
}

.unit-body {
	width: 100%;
	text-align:right;
}

.quote-body {text-align:right;}
.unit.unit-horizontal.unit-spacing-sm.unit-middle {direction:rtl;}
.unit-body div h5 strong {line-height:30px;}
@media (min-width: 1200px){
.service-decription-left .unit-body {
    padding: 0 20px;
}}
.lds-ring {
  display: inline-block;
  position: relative;
  width: 30px;
  height: 30px;
}
.lds-ring div {
  box-sizing: border-box;
  display: block;
  position: absolute;
  width: 25px;
  height: 25px;
  margin: 6px;
  border: 3px solid #fff;
  border-radius: 50%;
  animation: lds-ring 1.2s cubic-bezier(0.5, 0, 0.5, 1) infinite;
  border-color: #fff transparent transparent transparent;
}
.lds-ring div:nth-child(1) {
  animation-delay: -0.45s;
}
.lds-ring div:nth-child(2) {
  animation-delay: -0.3s;
}
.lds-ring div:nth-child(3) {
  animation-delay: -0.15s;
}
@keyframes lds-ring {
  0% {
    transform: rotate(0deg);
  }
  100% {
    transform: rotate(360deg);
  }
}

/* pixema@live.com custom code */