<link rel="stylesheet" href="{{ asset('css/vendor.css?v='.$asset_v) }}">

@if( in_array(session()->get('user.language', config('app.locale')), config('constants.langs_rtl')) )
	<link rel="stylesheet" href="{{ asset('css/rtl.css?v='.$asset_v) }}">
@endif

@yield('css')

<!-- app css -->
<link rel="stylesheet" href="{{ asset('css/app.css?v='.$asset_v) }}">

@if(isset($pos_layout) && $pos_layout)
	<style type="text/css">
		.content{
			padding-bottom: 0px !important;
		}
	</style>
@endif
<style type="text/css">
	/*
	* Pattern lock css
	* Pattern direction
	* http://ignitersworld.com/lab/patternLock.html
	*/
	.patt-wrap {
	  z-index: 10;
	}
	.patt-circ.hovered {
	  background-color: #cde2f2;
	  border: none;
	}
	.patt-circ.hovered .patt-dots {
	  display: none;
	}
	.patt-circ.dir {
	  background-image: url("{{asset('/img/pattern-directionicon-arrow.png')}}");
	  background-position: center;
	  background-repeat: no-repeat;
	}
	.patt-circ.e {
	  -webkit-transform: rotate(0);
	  transform: rotate(0);
	}
	.patt-circ.s-e {
	  -webkit-transform: rotate(45deg);
	  transform: rotate(45deg);
	}
	.patt-circ.s {
	  -webkit-transform: rotate(90deg);
	  transform: rotate(90deg);
	}
	.patt-circ.s-w {
	  -webkit-transform: rotate(135deg);
	  transform: rotate(135deg);
	}
	.patt-circ.w {
	  -webkit-transform: rotate(180deg);
	  transform: rotate(180deg);
	}
	.patt-circ.n-w {
	  -webkit-transform: rotate(225deg);
	   transform: rotate(225deg);
	}
	.patt-circ.n {
	  -webkit-transform: rotate(270deg);
	  transform: rotate(270deg);
	}
	.patt-circ.n-e {
	  -webkit-transform: rotate(315deg);
	  transform: rotate(315deg);
	}

	.font-weigth-bold {
		font-weight: 700;
	}

	.container-screen-pos {
		position: fixed;
		top: 0;
		left: 0;
		right: 0;
		bottom: 0;
		/* top: 500px;
		left: 50px;
		right: 50px;
		bottom: 50px; */
		background: rgb(157 157 157 / 50%);
		display: flex;
		align-items: center;
		z-index: 9999;
	}

	.pos-loader {
		width: 100%;
		height: 15px;
		text-align: center;
	}

	.dot {
		position: relative;
		width: 15px;
		height: 15px;
		margin: 0 2px;
		display: inline-block;
	}

	.dot:first-child:before {
		animation-delay: 0ms;
	}

	.dot:first-child:after {
		animation-delay: 0ms;
	}

	.dot:last-child:before {
		animation-delay: 200ms;
	}

	.dot:last-child:after {
		animation-delay: 200ms;
	}

	.dot:before{
		content: "";
		position: absolute;
		left: 0;
		width: 15px;
		height: 15px;
		background-color: blue;
		animation-name: dotHover;
		animation-duration: 900ms;
		animation-timing-function: cubic-bezier(.82,0,.26,1);
		animation-iteration-count: infinite;
		animation-delay: 100ms;
		background: black;
		border-radius: 100%;  
	}

	.dot:after {
		content: "";
		position: absolute;
		z-index: -1;
		background: black;
		box-shadow: 0px 0px 1px black;
		opacity: .20;
		width: 100%;
		height: 3px;
		left: 0;
		bottom: -2px;
		border-radius: 100%;
		animation-name: dotShadow;
		animation-duration: 900ms;
		animation-timing-function: cubic-bezier(.82,0,.26,1);
		animation-iteration-count: infinite;
		animation-delay: 100ms;
	}

	@keyframes dotShadow {
		0% {
			transform: scaleX(1);
		}
		50% {
			opacity: 0;
			transform: scaleX(.6);
		}
		100% {
			transform: scaleX(1);
		}
	}

	@keyframes dotHover {
		0% {
			top: 0px;
		}
		50% {
			top: -50px;
			transform: scale(1.1);
		}
		100% {
			top: 0;
		}
	}

	.bigdrop {
		width: 300px !important;
	}

	.ui-widget.ui-widget-content {
		background: #0000;		
		width: 912px;
		max-height: 700px !important; 
		top: 114px;
		left: 25px;				
	}

	.ui-menu
	.ui-menu-item {
		margin: 10px 0 10px 0;
		background: white;		
		border: black;
		border-style: solid;
		border-radius: 20px;
	}

	.ui-menu-item-wrapper {
		padding-left: 20px !important;
		padding-top: 8px !important;
	}
	.ui-state-active, .ui-widget-content .ui-state-active {
		border-radius: 20px !important;
	}

	.ui-menu .ui-menu-item-wrapper {		
		padding: 3px 1em 8px 0.4em !important;
	}

	.ui-widget.ui-widget-content {
		background: #fff !important;		
	}

	ul.select2-results__options {
		max-height: 400px !important;
	}

	.multiselect-container.dropdown-menu {
		max-height: 400px !important;
		width: 100% !important;
	}

	.font-15 {
		font-size: 15px;
	}

	.payment-method-now {
		list-style-type: none;
		/* margin: 25px 0 0 0; */
		padding: 0;
	}

	.payment-method-now li {
		float: left;
		margin: 0 5px 0 0;
		width: 85px;
		height: 40px;
		position: relative;
		cursor: pointer;
	}

	.payment-method-now label,
	.payment-method-now input {
		display: block;
		position: absolute;
		top: 0;
		left: 0;
		right: 0;
		bottom: 0;
		cursor: pointer;
	}

	.payment-method-now input[type="radio"] {
		opacity: 0.01;
		z-index: 100;
	}

	.payment-method-now input[type="radio"]:checked+label,
	.Checked+label {
		background: #ff851b;
	}

	.payment-method-now label {
		padding: 5px;
		border: 1px solid #CCC;
		cursor: pointer;
		z-index: 90;
		padding-left: 25%;
	}

	.donate-now label:hover {
		background: #DDD;
	}
</style>
@if(!empty($__system_settings['additional_css']))
    {!! $__system_settings['additional_css'] !!}
@endif