@import url(https://fonts.googleapis.com/earlyaccess/droidarabicnaskh.css);
@import url(https://fonts.googleapis.com/earlyaccess/notosanskufiarabic.css);

body { margin: 0px; padding: 0px; font: Bold 10pt "Droid Arabic Naskh", Tahoma; background-color:#eeeeee}
.clr { clear: both; margin: 0px; padding: 0px; } 
.container { direction: rtl; text-align: right }

/* ===================== BANNER ===================== */
.banner { background-color: #444; height: 120px; direction: rtl; color:#fff; font-size: 12pt; text-align: right; width: 100% }
.banner .row{ width: 96% }
.banner .col-md-3 img{ float: left; }
.banner .col-md-4 { padding-top: 12px; line-height: 200%; }
.banner .col-md-4 span { color: #FFFF66; font-size: 14pt; }
.banner .col-md-5 { padding-top: 12px; font-size: 9pt; text-align: center; }
.banner .col-md-5 a:link { color: #fff }
.banner .col-md-5 a:visited { color: #fff }
.banner .col-md-5 a:hover { color: #FFFF00; text-decoration: none; }
@media (max-width:960px) { 
.banner { height: auto; }	
.banner .col-md-3, .col-md-4, .col-md-5 { float: left; text-align: center; width: 100%; }
.banner .col-md-3 img { float: none; display: block; margin: auto; }
.banner .col-md-5 { padding-bottom: 12px; }
}

/* ===================== NAVBAR / CAROUSEL ===================== */
.navbar { font-size: 11pt; margin: auto; direction: rtl; text-align: right }
.navbar-nav { float: right }
.navbar-nav .fa { font-size: 15pt; }
.carousel-caption { background-color: #000; opacity: 0.5; width: 100%; left: 0px; bottom: 0px; }
.carousel-caption div { font-size: 11pt; color: #fff; opacity: 1; text-align:right; padding-right: 5%; }
.carousel-caption div span { font-size: 16pt; }

/* ===================== HOME ===================== */
.homepage-maintitle { font-size: 15pt; background-color: #444; color: #fff; text-align: center; margin-bottom: 10px; line-height: 150%; padding: 5px; font-weight: bold; direction: rtl }
.homepage-maintitle span { font-size: 12pt; font-weight: normal; }

.home-container {background : #eeeeee url('../images/main-container-bg.jpg'); padding-bottom: 35px; padding-top: 20px}

.exvisa-home-div { background-color: #fff; padding: 16px; text-align: right; direction: rtl; color: #003399; font-size: 12pt}
.exvisa-btn { margin: auto; padding: 8px; width: 260px}
.exvisa-coutries-div { border: 1px #84CEFF solid; direction: ltr; text-align: left; margin: 10px; font-size: 11pt; padding: 20px; color: #000; line-height:150%}
.invisa-home-div {margin: 20px auto 10px auto; padding-top: 20px}

.applying-div { margin: 50px auto 10px auto; text-align: center; direction: rtl;}
.applying-div-btn { height: 120px; width: 24%; line-height: 120px; margin: 8px; padding: 10px; box-shadow: 0px 0px 10px 1px #ccc; border-radius: 18px; padding-top: 40px; font: Bold 14pt "Droid Arabic Naskh";}

@media (max-width:1000px) { .applying-div-btn { width: 90%;} }

.footer {background: #0c2841 url('../images/main-container-bg.jpg');}
.footer-div {background-color: #000; color: #fff; font-size: 11px; font-weight: bold; padding: 25px 25px 25px 10%; direction: rtl}
.underfooter-div .col-md-5 { text-align: center; line-height: 125%; color: #fff }
.underfooter-div .col-md-6 { line-height: 150%; padding-top: 50px; direction: ltr; text-align: left }
.underfooter-div .col-md-6 span { color: #FFFFCC}
.underfooter-div .col-md-6 p1 { font-size: 16pt; }
.underfooter-div .col-md-6 hr { width: 50%; text-align: right; background-color:#fff }
.underfooter-div {background-color: #172837; color: #666666; font-size: 15px; font-weight: bold; padding: 25px; min-height: 300px}

/* ===================== APPLICATION APRT 2 ===================== */
.app-form {direction: rtl; padding: 25px; margin-bottom: 25px; margin-top: 25px; background-color: #fff; border: 1px #AADDFF solid ; line-height: 160%; box-shadow: 0px 0px 10px 1px #ccc;}
.app-form label {padding-right: 10px}
.app-form .alert { line-height: 160% !important}
.app-form-inss { margin-right: 10px; padding: 10px; min-height: 200px; line-height: 150%;  box-shadow: 0px 0px 10px 1px #ccc;}

.checkbox label::before { content: ""; display: inline-block; position: absolute; width: 19px; height: 19px; right: 0; border: 1px solid #cccccc; border-radius: 3px; background-color: #fff; -webkit-transition: border 0.15s ease-in-out, color 0.15s ease-in-out;   -o-transition: border 0.15s ease-in-out, color 0.15s ease-in-out;   transition: border 0.15s ease-in-out, color 0.15s ease-in-out; }
.checkbox label::after { display: inline-block; position: absolute; width: 18px; height: 18px; right: 0px; top: 0px; padding-left: 0px; padding-top: 0px; font-size: 20px; color: #555555; }
.checkbox label { padding-right: 30px; }

.form-horizontal {direction: rtl; text-align: right; }
.control-label {float: right; text-align: right  }
.form-control {height: 35px}
#imagepreview { margin-left: 30px;width: 200px; height: 210px; border: 6px #fff solid; box-shadow: 0px 0px 10px 1px #ccc;}
#passpreview { margin-left: 60px;height: 210px; border: 6px #fff solid; box-shadow: 0px 0px 10px 1px #ccc; }
.submit_div {text-align: left }
.date-input-hover {cursor :pointer; background-color: #FFFFFF }
.downloadpdf {border-right: 3px #CC3300 solid; width: 30%; background-color: #fff; margin: 6px; line-height: 70px; vertical-align: top; display: inline-block; padding-right: 6px; text-align: right}
.downloadpdf div {height: 80px; line-height: 150%; color: #CC3300; }
.subjects a:hover .downloadpdf { background-color: #B9E1FD; color: #FFFFFF}
@media (max-width:960px) { 
.downloadpdf {width: 90%; display: block; }
}
.barcode-div {direction: ltr; text-align: left; line-height: 200%; margin: 20px; border: 1px #CCCCCC solid; border-radius:7px; padding: 20px }
#fname { text-transform: uppercase }
#passportnumber  { text-transform: uppercase }
.layanidawakardiv { background-color:#F1F1F1; border-bottom: 1px #CCCCCC solid; border-top: 1px #CCCCCC solid; padding: 8px; margin-bottom: 10px;  }
.palinderdiv { background-color: #FFE4CA; border-bottom: 1px #CCCCCC solid; border-top: 1px #CCCCCC solid; padding: 8px; margin-bottom: 10px; }
.tooltiptext { visibility: hidden; background-color: #CC3300; color: #fff; text-align: center; padding: 5px 0; border-radius: 6px; position: absolute; z-index: 1; }
.tooltip2:hover .tooltiptext { visibility: visible; }

/* ===================== RINMAYAKAN ===================== */
.app-rinmayakan {direction: rtl; text-align: right; }
.app-rinmayakan-header { border-bottom: 1px #0099CC solid; padding: 8px; color: #003399; font-weight: bold  }
.app-rinmayakan-header span { font-size: 14pt}
.app-rinmayakan-body { font-size: 11pt; padding: 8px; line-height: 200% }
.app-rinmayakan-body redspan { color: #FF3300}
.app-rinmayakan-body bluespan { color: #003399}
.app-rinmayakan-body .row { margin-bottom: 12px }
.app-rinmayakan-body p {color: #CC3300; margin-top: 15px; font-size: 12pt }

/* ===================== EX APPLICATIONS ================ */
.ex-app-div-formheader {  font-weight: Bold; font-size: 14pt; margin-bottom: 30px }
.ex-app-timeline {  margin-bottom: 30px }
.ex-app-timeline li { display: inline-block; width: 10%; height:40px; background: transparent url('../images/timeline-bg.png') repeat-x; 
 color: #fff; line-height: 40px; text-align: center; font-size: 2.0rem;}
.ex-app-timeline li:last-child { background-image:none }
.line-active { background-color: #006699;  width: 40px; border-radius: 20px; }
.line-inactive { background-color: #6CDBFF;  width: 40px; border-radius: 20px; }
@media (max-width:600px) { 
.ex-app-timeline li { width: 18%; }
}