/* @import url(https://fonts.googleapis.com/earlyaccess/droidarabickufi.css);  */
/*
 * Droid Arabic Kufi (Arabic) http://www.google.com/fonts/earlyaccess
 */
@font-face {
	font-family: 'Droid Arabic Kufi';
	font-style: normal;
	font-weight: 400;
	font-display: swap;
	src: url('https://fonts.gstatic.com/ea/droidarabickufi/v6/DroidKufi-Regular.eot');
	src: url('https://fonts.gstatic.com/ea/droidarabickufi/v6/DroidKufi-Regular.eot?#iefix') format('embedded-opentype'),
		 url('https://fonts.gstatic.com/ea/droidarabickufi/v6/DroidKufi-Regular.woff2') format('woff2'),
		 url('https://fonts.gstatic.com/ea/droidarabickufi/v6/DroidKufi-Regular.woff') format('woff'),
		 url('https://fonts.gstatic.com/ea/droidarabickufi/v6/DroidKufi-Regular.ttf') format('truetype');
}
@font-face {
	font-family: 'Droid Arabic Kufi';
	font-style: normal;
	font-weight: 700;
	font-display: swap;
	src: url('https://fonts.gstatic.com/ea/droidarabickufi/v6/DroidKufi-Bold.eot');
	src: url('https://fonts.gstatic.com/ea/droidarabickufi/v6/DroidKufi-Bold.eot?#iefix') format('embedded-opentype'),
		 url('https://fonts.gstatic.com/ea/droidarabickufi/v6/DroidKufi-Bold.woff2') format('woff2'),
		 url('https://fonts.gstatic.com/ea/droidarabickufi/v6/DroidKufi-Bold.woff') format('woff'),
		 url('https://fonts.gstatic.com/ea/droidarabickufi/v6/DroidKufi-Bold.ttf') format('truetype');
}
body { font-family: 'Droid Arabic Kufi',serif; background: #f5f5f5; direction:rtl; text-align:right; }
:-moz-focus-inner {
  border: 0;
  outline:none;
}
a:hover, a:active, a:focus {
  border: 0;
  outline:none;
}
h1, h2, h3, h4, h5, h6, .h1, .h2, .h3, .h4, .h5, .h6 { color: #189DE2; font-family: 'Droid Arabic Kufi',serif; font-weight: normal; }
a { color: inherit; }
.btn { border-radius: 0; border: none; }
.no-m { margin: 0; }/* Big Message */
.jumbotron, .jumbotron-msg { margin: 60px 0 40px; text-align: center; }
.jumbotron h1 { font-size: 36px; line-height: 1; }
.jumbotron .btn { font-size: 21px; padding: 14px 24px; }
.container-narrow { margin: 0 auto; max-width: 740px; }
.container-narrow > hr { margin: 30px 0; }
.btn-extream .lead { display: block; font-size: 14px; line-height: 25px; margin-bottom: 0; }
.left { float: right }
.right { float: left }
.max-h {max-height: 400px; overflow-y: auto;}
.center { text-align: center }
.main-btns { margin-top: 12px; }
.actions-bar { margin-top: 8px }
.layout { padding-top: 50px; padding-bottom: 80px }
.fixed-top { position: fixed; top: 0; right: 0; height: 106px; width: 100%; background: #fff; z-index: 80 }
ul.green-checks { margin-right: 185px; margin-bottom: 15px; }
.green-checks li { background: url(../img/green-tick.png) no-repeat 0 3px; font-size: 30px; margin-bottom: 25px; padding-right: 35px; padding-top: 2px; }
.edit-mode { background: #EBEBEB; }
.edit-mode h1 { padding-top: 5px }
.edit-mode-wrap { background: #FFF; margin: 190px auto 20px; width: 740px; min-height:810px; border: 1px solid #CACACA; box-shadow: 0 0 4px rgba(0, 0, 0, 0.1); padding-top: 15px; }
.gateways { text-align: center; overflow: hidden; padding-bottom: 30px }
.gateways img { margin: 0 3px 8px; }
.invoice-address { font-size: 12px; line-height: 18px; }
.items-table .editable { min-height: 20px; display: block; cursor: text; outline: 1px dotted #ccc; }
.items-table textarea.editable { width: 100% }
.items-table input.editable, .items-table input.editable:focus, .items-table textarea.editable, .items-table textarea.editable:focus { margin: 0; box-shadow: none; border: none; padding: 3px; }
.input-mini { width: 100%; }
.tax2-header, .tax1-header, .subtotal-header, .mount-header { width: 84px; }
.btn-xxs { padding: 3px 5px }
.items-table .editable:focus { outline: 1px dotted #ff0000; background: #feffce; }
.items-table { border-collapse: collapse; background: #fff }
.totals-row { position:relative; }
.totals-row .wide-cell #AddProduct { position:absolute; right: -2px; top: -1px;}
.totals-row .wide-cell { border: 1px solid #fff; border-left: 1px solid #ddd; border-top: 1px solid #ddd; position:relative; }
#editor .editable-area { display: inline-block; min-height: 21px; min-width: 20px; outline: 1px dotted #ccc; text-align: right }
#editor .editable-area:hover { outline: 1px dotted #0094ff; }
#editor .editable-area:focus { outline: 1px dotted #ff0000; background: #feffce; }
.currency-list a { padding: 10px 15px; border-radius: 0; -webkit-transition: all .15s linear; display: block; -moz-transition: all .15s linear; -o-transition: all .15s linear; transition: all .15s linear; border-bottom:1px solid #eee;font-size: 14px; }
textarea { resize: none!important; }
.currency-list a:hover { background: #e6eaf3; text-decoration: none }
#logoDiv { position: relative; display: inline-block }
#logoDiv img { cursor: pointer; outline: none; }
#logoDiv .popover { width: 336px; }
.items-table textarea { font-size: 12px; }
#notes { width: 100% }

.invoice-wrap .invoice-input { width: 100px; border: none; -webkit-transition: background .15s linear; outline: 1px dotted #ccc; margin-bottom: 0px; display: block; -moz-transition: background .15s linear; background: none; -o-transition: background .15s linear; transition: background .15s linear; box-shadow: none; border: none; }
#extra { width: 200px; }
.invoice-wrap .invoice-input:hover, .invoice-wrap .invoice-input:focus { background: #F9F3A7; border: none; box-shadow: none; }
#business_info { width: 255px }
textarea#client_info { width: 200px }
.invoice-wrap textarea.invoice-input { height: 80px }
#label_bill_to { width: 75px }
.items-table th >.invoice-input { width: 65px; }
.items-table th >#label_description { width: 100px }
#label_subtotal, #label_total { width: 100% }
#label_discount { width: 70px }
.section-divider { background: url(images/divider.png) repeat-x; height: 2px; margin: 20px 0 }
.bookmark { margin: 0 auto 20px auto; text-align: center; text-transform: uppercase; }
.bookmark h4 { font-size: 16px; font-weight: 100 }
.star-ico { position: relative; top: 4px; display: inline-block; height: 23px; width: 23px; background: url(images/star.png) no-repeat; margin: 0 0 0 10px; }
.bookmark-btn, .bookmark-btn:hover { border-radius: 0; display: inline-block; font-size: 24px; font-weight: 400; margin: 11px auto; padding: 11px 20px; text-decoration: none; text-transform: uppercase; }
.items-table td, .items-table th { border: 1px solid #ddd !important; }
.totals-row .wide-cell { border-color: #ddd #fff #fff #ddd !important; }
.jumbotron { background: none; }
.img-thumbnail { background: #f5f5f5; }
.jumbotron h1 { color: #189DE2; margin-bottom: 20px; font-size: 46px; }
.jumbotron p { margin-bottom: 30px; }
.main-nav { margin-bottom: 0; border: none; border-radius: 0; background: #fff; padding: 10px 0; border-bottom: 1px solid #ddd; }
.navbar-nav > li > a { padding: 7px 0; border-radius: 0; font-size:14px; }
@media (min-width: 768px) { .navbar-container {display: flex;align-items: center;} }
.navbar-default .navbar-nav>li>a {border-bottom: 2px solid transparent}
.navbar-default .navbar-nav > .active > a, .navbar-default .navbar-nav > .active > a:hover, .navbar-default .navbar-nav > .active > a:focus { border-bottom: 2px solid #189DE2; color: #189DE2; background: none; }
.navbar-brand { text-align: center; padding: 3px 15px 3px 3px; line-height: 23px; height: auto; margin-left: 30px; }
.navbar-brand strong { color: #189DE2; font-size: 12px; }
.navbar-brand>img {width: 50px;margin: 0 auto;margin-bottom: 5px; height: auto}
.navbar-nav > li > a i { font-size: 16px; margin-left: 5px; }
.full-feature { background: #189DE2; padding: 50px 0; }
.feature-content { color: #fff; }
.feature-content hr { display: none; }
.feature-content h1 { color: #fff; margin: 0 0 20px 0; font-size: 42px; }
.lead { font-size: 20px; }
.gateways { padding: 30px 0; }
.gateways a { margin: 0 0 20px 20px; }
.block-title h3 { color: #fff; float: right; background: #189DE2; padding: 4px 14px; position: relative; margin: 0; }
.block-title { border-bottom: 2px solid #189DE2; margin: 0 0 20px 0; }
.sidebar-nav { }
.blog-post { background: #fff; padding: 20px; margin-bottom: 15px; border: 1px solid #ddd; }
.blog-post h3 { font-size: 21px; color: #333; margin: 0px 0px 14px; }
.blog-post p { font-size: 14px; color: #888; }
.phrase { font-size: 18px; color: #666; margin-bottom: 20px; }
.blog-post i { font-size: 12px; }
.thump-wrapper h2 { position: relative; margin: 0 0 15px 0; color: #333; font-size: 18px; line-height: 1.12; padding-right: 22px; font-weight: bold; min-height: 40px; max-height: 40px; display: -webkit-box; -webkit-line-clamp: 2;-webkit-box-orient: vertical;overflow: hidden;}
.row.thumbnails { margin: 0 -7px; }
.row.thumbnails >div { padding: 0 7px; }
.thump-wrapper h2 i { position: absolute; right: 0; top: 1px; color: #189DE2; }
.thump-wrapper { margin-bottom: 25px; }
.thumbnail { position: relative; border-radius: 0; padding: 10px; background: #eee; overflow: hidden; margin-bottom: 13px; height: 200px; }
.thumbnail img { border: 1px solid #e5e5e5; }
.thumbnail img { width: 100%; height: auto; opacity: 1; -webkit-transition: opacity 0.35s, -webkit-transform 0.35s; transition: opacity 0.35s, transform 0.35s; }
.thumbnail .caption { padding: 10px 0 0; text-align: center; position: absolute; top: 0; right: 0; width: 100%; display: block; height: 100%; }
.thumbnail .caption span { position: absolute; top: 50%; right: 50%; margin: -40px -40px 0 0; padding: 24px 0 0; display: block; width: 80px; height: 80px; font-weight: bold; border-radius: 50%; line-height: 12px; color: #fff; background: #72A430; border: 2px solid #72A430; -webkit-transition: opacity 0.35s, -webkit-transform 0.35s; transition: opacity 0.35s, transform 0.35s; opacity: 0; -webkit-transform: scale(.3); transform: scale(.3); }
.thumbnail:hover .caption span { opacity: 1; -webkit-transform: scale(1); transform: scale(1); }
.thumbnail img { -webkit-transition: opacity 0.35s, -webkit-transform 0.35s; transition: opacity 0.35s, transform 0.35s; opacity: 1; -webkit-transform: scale(1); transform: scale(1); }
.thumbnail .img-responsive img, .thumbnail .img-responsive {height: 100%}
.thumbnail .img-responsive img {object-fit: cover}
.thumbnail:hover img { opacity: .8; -webkit-transform: scale(1.2); transform: scale(1.2); }
.secondary-nav { border: none; border-radius: 0; background: #189DE2; padding: 15px 0; }
.dropdown-menu { min-width: 160px; padding: 0px; margin: 0px 0px 0px; text-align: right; background-color: #FFF; border: none; border-radius: 0; box-shadow: none; background-clip: padding-box; }
.brand2 {  padding-right: 0; }
.dropdown-menu > li > a {padding: 10px 15px;border-bottom: 1px solid #eee;}
.sticky-nav { padding: 10px 0px; }
.navbar { transition: all 0.2s ease-in-out 0s; -moz-transition: all 0.2s ease-in-out 0s; -o-transition: all 0.2s ease-in-out 0s; -webkit-transition: all 0.2s ease-in-out 0s; }
.m-t-30 { margin-top: 30px; }
.m-b-10 { margin-bottom: 10px; }
.well { background: #fff; border: 1px solid #ddd; border-radius: 0; }
.form-control { border-radius: 0; box-shadow: none; width: 100% !important; }
.modal-backdrop { position: fixed; top: 0; left: 0; bottom: 0; right: 0; z-index: 1040; background-color: #000000; }
.modal-backdrop.fade { opacity: 0; }
.modal-backdrop, .modal-backdrop.fade.in { opacity: 0.8; filter: alpha(opacity=80); }
.modal { position: fixed; top: 10%; right: 50%; z-index: 1050; width: 560px; margin-right: -280px; background-color: #ffffff; border: 1px solid #999; border: 1px solid rgba(0, 0, 0, 0.3); *border: 1px solid #999;
-webkit-border-radius: 6px; -moz-border-radius: 6px; border-radius: 6px; outline: none; -webkit-box-shadow: 0 3px 7px rgba(0, 0, 0, 0.3); -moz-box-shadow: 0 3px 7px rgba(0, 0, 0, 0.3); box-shadow: 0 3px 7px rgba(0, 0, 0, 0.3); -webkit-background-clip: padding-box; -moz-background-clip: padding-box; background-clip: padding-box; bottom: auto !important; }
.modal.fade { top: -25%; -webkit-transition: opacity 0.3s linear, top 0.3s ease-out; -moz-transition: opacity 0.3s linear, top 0.3s ease-out; -o-transition: opacity 0.3s linear, top 0.3s ease-out; transition: opacity 0.3s linear, top 0.3s ease-out; }
.modal.fade.in { top: 10%; }
.modal-header { padding: 9px 15px; border-bottom: 1px solid #eee; }
.modal-header .close { margin-top: 6px;color: #bc0000;font-size: 25px;font-weight: bold;}
.modal-header h3 { margin: 0; line-height: 30px; }
.modal-body { position: relative; max-height: 400px; padding: 15px; overflow-y: auto; }
.modal-form { margin-bottom: 0; }
.modal-footer { padding: 14px 15px 15px; margin-bottom: 0; text-align: left; background-color: #f5f5f5; border-top: 1px solid #ddd; -webkit-border-radius: 0 0 6px 6px; -moz-border-radius: 0 0 6px 6px; border-radius: 0 0 6px 6px; *zoom: 1;
-webkit-box-shadow: inset 0 1px 0 #ffffff; -moz-box-shadow: inset 0 1px 0 #ffffff; box-shadow: inset 0 1px 0 #ffffff; }
.modal-footer:before, .modal-footer:after { display: table; line-height: 0; content: ""; }
.modal-footer:after { clear: both; }
.modal-footer .btn + .btn { margin-bottom: 0; margin-right: 5px; }
.modal-footer .btn-group .btn + .btn { margin-right: -1px; }
.modal-footer .btn-block + .btn-block { margin-right: 0; }
.navbar-fixed-bottom .btn {
	width:33.333333%;
	display:block;
	float:right;
}
.lilangen {font-family: arial;}
.fixed-btn {
	position:fixed;
	top:0;
	z-index:9999;
	left:0;
}
#toggle_paid {
	display:block;
	position: absolute;
	left: 7px;
	top: 0;
	width: 50px;
	height: 24px;
	background: #f0f0f0;
	border: 1px solid #ddd;
	border-radius: 16px;
	transition: all 0.2s ease-in-out 0s; -moz-transition: all 0.2s ease-in-out 0s; -o-transition: all 0.2s ease-in-out 0s; -webkit-transition: all 0.2s ease-in-out 0s; 
}
#toggle_paid:active,#toggle_paid:hover {text-decoration:none;}

.hide-row:before {
    content: "";
}
#toggle_paid:before {
	content:"";
    position:absolute;
	left: 26px;
	top: 0px;
	width: 22px;
	height: 22px;
	border:1px solid #ddd;
	transition: all 0.2s ease-in-out 0s; -moz-transition: all 0.2s ease-in-out 0s; -o-transition: all 0.2s ease-in-out 0s; -webkit-transition: all 0.2s ease-in-out 0s; 
	background:#fff;
	border-radius:50%;
}
#toggle_paid.hide-row {
	background:#398439;
	border-color:#398439;
}
#toggle_paid.hide-row:before {
	left: 0px;
}
#toggle_paid.show-row:after {
	content: "off";
	position: absolute;
	left: 7px;
	top: 2px;
	color: #888;
	font-weight: bold;
}
#toggle_paid.hide-row:after {
	content: "on";
	position: absolute;
	right: 7px;
	top: 2px;
	color: #fff;
	font-weight: bold;
}

.shaped td:nth-child(2),.shaped td:nth-child(3) { background:#eee;opacity: .5;}
.Footer {
    background: url("images/background_grey.jpg") repeat scroll 0 0 #e3e3e3;
    bottom: 0;
    padding: 30px 0 0;
    width: 100%;
	min-height: 424px;
}

.footer-list ul {
	padding:0;
	list-style-type:none;
	margin:0 0 30px 0;
}
.footer-list > ul li {
	color:#777;
	margin-bottom:12px;
	text-transform:capitalize;
}
@media (max-width: 600px) {
	.footer-list > ul li {
		margin-bottom:16px;
	}
}
.footer-list > ul li i {
	color:#189DE2;
}
.footer-list > ul li a {
	padding: 13px 0;
}
.footer-list > ul li a:hover {
	color:#333;
	text-decoration:none;
}
.footer-list p {
	color:#777;
	font-size: 13px;
	margin-bottom: 20px;
	line-height: 24px;
}
.footer-list .title {
	color: #189DE2;
	font-size: 18px;
	font-weight: bold;
}
.social {
	margin-top: 10px;
}.social ul {
	
}.social ul li {
	display: inline-block;
	margin: 0 0 0 5px;
	
}.social ul li a {
	display: block;
	width: 40px;
	height: 40px;
	border-radius: 50%;
	font-size: 20px;
	line-height: 40px;
	color: #fff;
	text-align: center;
	
}.social ul li a:hover {
	
}
.fa-facebook {
	background: #3b5999;
}
.fa-twitter {
	background: #55acee;
}
.fa-pinterest {
	background: #dd4b39;
}
.fa-google-plus {
	background: #dd4b39;
}
.fa-linkedin {
	background: #0077B5;
}
.fa-instagram {
	background: #833AB4;
}

.header h1 { color: #189DE2; font-size: 26px; margin:0; margin-bottom:0; padding:0; font-weight:bold; }
@media (min-width:768px) {
.navbar-nav>li>a { margin-left: 14px; }
}
.mobile-form {  font-size: 16px; }
.prods-title { padding: 10px 15px; color: #fff; float: right; background: #189DE2; position: relative; margin: -15px -15px 15px 0; }
.prods { background: #f0f0f0; padding: 15px; margin-bottom: 15px; border: 1px solid #ddd; }
.product { padding: 15px; border: 1px solid #ddd; background: #f9f9f9; position: relative; margin-bottom: 15px; }
.rmbtn { position: absolute; top: 0; left: 0; }
.m-t-fix { padding-top: 75px; }
.unstyled { list-style-type: none; margin: 0; padding: 0; }
.col-md-12 .unstyled.green-checks li { background: transparent url("../img/green-tick.png") no-repeat scroll right center !important; }
.btn-xl { padding: 20px 46px; font-size: 23px; line-height: 1.33333; border-radius: 0; }
.m-b-70 { margin-bottom: 70px; }
.paymentOptions { background: #f5f5f5; border: 1px solid #eee; padding: 10px; }
.form-control-editable { padding: 0; text-indent: 0; font-weight: bold; max-width: 100%; border: none; border-bottom: 1px dashed #333; margin-bottom: 10px; background: none; }
.thanku-msg p { font-size:18px;}
.thanku-msg { text-align: center; background: #189DE2; color: #FFF; padding: 45px 0px 25px 0px; margin: 0px -15px 0px; }
.thanku-msg h1 { font-size: 70px; padding: 0px; color: #fff; text-transform: uppercase; }
.slogan { font-size: 31px !important; font-weight: 400; color: #fff; }
.leadf { margin: 40px 0 15px; font-size: 30px; }
.lead2 { margin: 0 0 30px; font-size: 18px; }
ul.green-checks { margin-bottom: 40px; margin-right: 0; }
.green-checks li { font-size: 18px; margin-bottom: 10px; background: transparent url("../img/green-tick.png") no-repeat scroll 0px 5px !important; padding-right: 35px; padding-top: 2px; }
.radius { border-radius: 0; }
.navbar-default .navbar-toggle { border-color: #189DE2; color: #189DE2; padding: 6px 10px; font-size: 18px; }
.navbar-default .navbar-toggle span { display: block; }
.quick-invoicing { background: url("images/background_grey.jpg") repeat scroll 0 0 #e3e3e3; bottom: 0; padding: 10px 0 20px; text-align: center; width: 100%; z-index: 50; }
.quick-invoicing h2 { font-size: 30px; font-weight: 300; line-height: 28px; }
.quick-invoicing p { color: #4c4c4c; font-size: 16px; margin-top: 10px; font-weight: 400; }
.quick-invoicing .btn-success, .btn-mid { background: none repeat scroll 0 0 #82b440; border-radius: 2px; color: #fff; display: inline-block; font-size: 18px; font-weight: 400; margin: 6px 0 0; padding: 10px 15px; }
.close-ico { background: none repeat scroll 0 0 #888; color: #fff; display: block; font-size: 25px; font-weight: 100; height: 40px; line-height: 33px; position: absolute; left: 0px; top: 0; width: 40px; z-index: 100; font-family: tahoma; }
.close-ico:hover { background: #666; color: #fff; text-decoration: none; }
.quick-invoicing .or-text { line-height: 50px; }
.cancel-choice { display: inline-block; font-size: 19px; padding-top: 10px }
.cancel-choice a { color: #4c4c4c; text-decoration: underline; padding: 0 7px }
.quick-invoice-bar { background: #ddeaf1; padding: 15px 0 }
.quick-invoice-bar .wrap { width: 580px }
.m-b-30 { margin-bottom: 30px; }

@media only screen and (max-width: 420px) {
.thanku-msg h1 { font-size: 80px; line-height: 70px; }
.slogan { font-size: 26px; line-height: 26px; }
.leadf { margin: 30px 0px 5px; font-size: 26px; }
.btn-xl { white-space: normal; }
.navbar-brand {  }
.navbar-default .navbar-nav > .active > a, .navbar-default .navbar-nav > .active > a:hover, .navbar-default .navbar-nav > .active > a:focus { }
.navbar-nav > li > a { padding: 10px 15px;font-size: 18px;border-bottom:1px solid #eee; }
.block-title h3 { font-size: 20px; }
.container-content {
	padding:0;
}
}
/* internal-template */
.internal-template {overflow: hidden;}
.internal-template .feature-content h1 {color: #189DE2;margin: 0 0 20px 0;font-weight: bold; line-height: 1.3; font-size: 30px;}
.internal-template .feature-content .lead{color: black;font-size: 14px;line-height: 1.9;}
.internal-template .actions, .internal-template .links{ display: flex;justify-content: space-between;align-items: center;}

@media(max-width: 768px) {
	.internal-template .actions {
		flex-direction: column;
	}
}

.internal-template .links .icon{
	display: block;
	margin-left: 30px;
}

.internal-template .links .icon:first-child {
	font-weight: bold;
	font-size: 14px; 
}

.internal-template .links .icon i{
	background: none;
    font-size: 30px;
}
.internal-template .download-link {
	background: #5CB85C;
	color: #fff;
	font-size: 15px;
	border-radius: 5px;
	padding: 13px 35px;
	text-decoration: none;
}

@media (max-width: 768px) {
	.internal-template .download-link {
		margin: 20px 0
	}
}

.popup img{
    cursor: pointer
}
.showPop { 
    z-index: 999;
    display: none;
}
.showPop .overlay{
    width: 100%;
    height: 100%;
    background: rgba(0,0,0,.66);
    position: fixed;
    top: 0;
    left: 0;
	z-index: 10;
}
.showPop .img-show{
    width: 600px;
    height: 500px;
    background: #FFF;
    position: fixed;
	z-index: 12;
    top: 50%;
    left: 50%;
    transform: translate(-50%,-50%);
}
.img-show span{
	position: absolute;
    top: -53px;
    right: 0;
    z-index: 99;
    cursor: pointer;
    color: #d2d2d2;
    font-size: 25px;
}
.img-show img{
    width: 100%;
    height: 100%;
    position: absolute;
    top: 0;
    left: 0;
	object-fit: contain;
}

.search-wrapper {
	display: flex;
	justify-content: space-between;
	align-items: center;
}

@media (max-width: 768px) {
	.search-wrapper {
		flex-direction: column;
	}
	.search-wrapper #search_form {
		margin: 10px 0;
		width: 80%
	}
	.search-wrapper #search_form input {
		width: 100%
	}
}

.search-wrapper input {
	height: 40px;
	border-radius: 5px;
	border:1px solid #189de2;
	padding: 0 10px;
}

.content-text {
    margin-bottom: 30px;
}

.content-text > p {
    margin-bottom: 22px;
    line-height: 27px;
    font-size: 16px;
}

.content-text h3 {
	color: #333;
}

.contact-intro h3 {
    color: #005aaa;
    font-size: 22px;
    font-weight: bold;
}
.contact-intro .social ul {
	padding: 0
}

.contact-intro h2 {
    font-size: 25px;
    font-weight: bold;
    color: #333;
}

.contact-intro form {
	margin: 40px 0;
}

.contact-intro input {
    display: block;
    width: 100%;
    height: 40px;
    margin-bottom: 10px;
    border: 1px solid #ccc;
    padding: 10px;
    border-radius: 7px;
}

.contact-intro textarea {
    display: block;
    width: 100%;
    margin-bottom: 10px;
    border: 1px solid #ccc;
    padding: 10px;
    border-radius: 5px;
}
.contact-intro input[type=submit] {
	background: #82b440;
    color: #fff;
    border: 0;
    font-size: 15px;
    height: auto;
}

.contact-intro p {
    color: #707070;
    font-size: 17px;
}
.home-layout {
	min-height: 960px;
}
/* Qr Code */
@media (max-width: 768px) {
	.qr-header h1 {
		font-size: 23px;
		font-weight: bold;
	}
}
.faq-block {
	border-bottom: 1px solid #c0c0c0;
	padding: 20px 0
}
.faqs-title {
	margin: 50px 0 50px 0;
	text-align: center;
	color:#000;
	font-weight: bold;
	border-top: 1px solid #ddd;
	padding: 40px 0 10px 0;
}
.faq-title , .faq-title span {
    margin: 0;
    font-size: 23px;
    cursor: pointer;
}
.faq-title i{
    color: #189DE2;
    font-weight: bold;
    float: left;
    margin-right: 5px;
}
.faq-title.active i.fa  {
    transform: rotate(-90deg)
}
.faq-desc {
	padding: 10px 0;
    font-size: 18px;
	display: none;
	overflow: hidden;
}
.faq-desc p {
	margin: 0;
    padding-bottom: 0;
    margin-top: 20px;
	line-height: 1.4;
}
.qr-content {
	text-align: center;
	width: 40%;
	margin: 50px auto 30px auto;
	/* overflow: hidden; */
}

.qr-content span.use-camera {
	display: none;
    background: #fff;
    padding: 10px 20px;
    margin: 20px 0;
    font-size: 16px;
    font-weight: bold;
    border-radius: 5px;
    border: 1px solid #e0e0e0;
    cursor: pointer;
    color: #41B725;
    box-shadow: 0px 0px 2px rgba(0, 0, 0, 0.25);
}
.qr-content .camera-wrapper {
	overflow: hidden;
}

@media (max-width: 575px) {
	.qr-content span.use-camera  {
		display: inline-block;
	}
}

.qr-content .add-line {
	position: relative;
}

.qr-content .add-line:after {
	content: "";
    position: absolute;
    top: 20px;
    left: -205px;
    width: 347%;
    z-index: -1;
    height: 1px;
    background: #e5e5e5;
}


.qr-step-1 {
	border: 2px dashed #E0E0E0;
	padding: 25px;
	border-radius: 10px;
	/* display: none; */
}
.qr-step-1 img {
	margin-bottom: 20px;
}
.qr-step-1 img.animate {
	position: relative;
	top: 0;
	animation: topBottom 0.5s infinite alternate;
}
@keyframes topBottom {
	0% {top: 0;}
	100% {top: 10px}
}
.qr-step-1 p {
	color: #838383;
	font-size: 18px;
}
.file-input__input {
	width: 0.1px;
	height: 0.1px;
	opacity: 0;
	overflow: hidden;
	position: absolute;
	z-index: -1;
}

.file-input__label {
	cursor: pointer;
	display: inline-flex;
	align-items: center;
	background: #189de2;
	padding: 10px 20px;
	border-radius: 5px;
	color: #fff;
	box-shadow: 0px 0px 2px rgba(0, 0, 0, 0.25);
}
/* =======================  */
.qr-step-2 {
	display: none
}
.qr-step-2 .img-scan {
	position: relative;
	margin-bottom: 15px;
	display: inline-block;
}
.qr-step-2 .img-scan.active:after {
	content: "";
	position: absolute;
	width:100%;
	height: 9px;
	background: #F42710;
	top:0;
	left:0;
	transition: 0.4s
}
.qr-step-2 .img-scan.active:after {
	animation: scan 2s infinite alternate;
}
@keyframes scan {
	0% {top: 0}
	100% {top: 100%}
}

.qr-step-2 .progress {
	height: 8px;
	background: #E3E6F1;
	border-radius: 7px;
	position: relative;
}
.qr-step-2 .progress span {
	position: absolute;
	top: 0;
	left: 0;
	height: 100%;
	width: 5%;
	background: #41B725;
	transition: 0.4s
}
.qr-step-2 .progress.active span {
	animation: progress 4s forwards;
}
@keyframes progress {
	0% {width: 5%}
	100% {width: 100%}
}
.qr-step-2 p {
	color: #838383;
	font-size: 18px;
}
/* =========================== */
.qr-step-3 {
	display: none
}

.qr-step-3 .success-wrapper { }
.qr-step-3 .failed-wrapper {  display: none}

.qr-step-3 .check-icon{
	display: block;
	width: 50px;
	height: 50px;
	color:#fff;
	font-size: 20px;
	background: #41B725;
	border-radius: 50%;
	text-align: center;
	line-height: 50px;
	margin: 10px auto
}

.qr-step-3 h2.success-title {
	color: #41B725;
	font-size: 25px;
	margin: 25px 0 20px 0;
}

.qr-step-3 .success-content {
	background: #fff;
	padding: 15px;
	text-align: right;
	border-radius: 10px;
	box-shadow:  0px 10px 30px rgba(0, 0, 0, 0.08);
}

.qr-step-3 .success-content h3 {
	font-size: 20px;
}
.qr-step-3 .success-content ul {
	list-style: none;
	padding: 0;
}
.qr-step-3 .success-content ul li{
	font-size: 16px;
	margin-bottom: 10px;
}
.qr-step-3 .success-content li i {
	width: 20px;
	height: 20px;
	color: #fff;
	text-align: center;
	line-height: 20px;
	font-size: 12px;
	border-radius: 50%;
}
.qr-step-3 .success-content li i.fa-check {
	background: #41B725;
}
.qr-step-3 .success-content li i.fa-times {
	background-color: red;
}
.qr-step-3 .success-bottom {
	display: block;
	position: relative;
	background-color: #41B725;
	color: #fff;
	box-shadow:  0px 10px 30px rgba(0, 0, 0, 0.08);
	margin: 0 0 10px 0;
	width: 120%;
	text-align: right;
	padding: 15px 20px;
	border-radius: 10px;
	transform: translate(8%, 0);
	text-decoration: none;
}
.qr-step-3 .success-bottom  img{
	position: absolute;
    left: 0;
    width: 139px;
    bottom: 0;
}
.qr-step-3 .success-bottom span {
	font-size: 12px
}
.qr-step-3 .success-bottom h2 {
	font-size: 18px;
	margin: 15px 0;
	color: #fff
}
.qr-step-3 .success-bottom .info {
	display: flex;
	justify-content: space-between;
}
.qr-step-3 .success-bottom .info span{
	background: #80d16d;
	color: #fff;
	padding: 5px 20px;
	border-radius: 10px;
	font-size: 12px
}
.qr-step-3 .failed-wrapper .check-icon {
	background: red;
}
.qr-step-3.success-step .file-input {
	margin: 25px 0 20px 0;
	overflow: hidden;
}

.qr-step-3.success-step .file-input__label,
#attendance-photo-video-container button{
	border:1px solid #41b725;
	color: #41B725;
	font-size: 16px;
	background-color: transparent;
	transition: 0.5s;
}
.qr-step-3.success-step .file-input__label {
	border:1px solid #e2e2e2;
	color: #41B725;

	font-size: 16px;
	background-color: #fff;
}
#attendance-photo-video-container button{
	margin: 10px 0
}
.qr-step-3.success-step .file-input__label:hover ,
#attendance-photo-video-container button:hover,
.qr-content span.use-camera:hover {
	border:1px solid #41b725;
	background-color: #41B725;
	color: #fff;
}
.qr-step-3 h2.failed-title {
	color: red;
	font-size: 25px;
	margin: 25px 0 20px 0;
}
.qr-step-3 .failed-content {
	padding: 15px;
	border-radius: 10px;
	box-shadow:  0px 10px 30px rgba(0, 0, 0, 0.08);
}
.qr-step-3 .failed-content p {
	font-size: 20px;
}

.qr-code .error-msg {
	display: block;
    padding: 4px 25px;
    color: red;
	display: none;
}

@media( max-width: 800px) {
	.qr-content {
		width: 100%
	}
	.qr-step-3 .success-bottom {
		width: 100%;
		transform: translate(0,0)
	}
}