@font-face { font-family: Kufi; src: url('word_fonts/Droid_Arabic_Kufi.ttf'); }

@media screen and (min-width: 1400px) {
  body{
		width:1400px;
		max-width:1400px;
		background-color: gold;
		margin:auto;
	}
	*{
		font-size: 18px !important;
	}
	.nav_bottom{
		position:static !important;
	}
	.login_page {
	    height: 100% !important;
	    width:1400px !important;
		max-width:1400px !important;
	}
	.item_pg .item_card {
	    height: 50vh !important;
	    max-height: 50vh !important;
	}
}
body{
	height: 100vh;
	max-height: 100vh;
	background-color: darkgrey;
}
*{
	font-size: 1.5vw;
}
.msg_suc{
	background-color: #7CFF60;
	margin:2% auto;
	width:70%;
	padding:1%;
	border-left-width: 1em;
	border-left-style: solid;
	border-left-color: #218F0A;
}
.msg_err{
	background-color: #FFA8A5;
	margin:2% auto;
	width:70%;
	padding:1%;
	border-left-width: 1em;
	border-left-style: solid;
	border-left-color: #f00;
}
.nav_top{
	height: 5%; /* --- From body --- */
	max-height: 5%;
	width:100%;
	max-width: 100%;
	background-color: black;
}
.nav_top .logo{
	max-height: 5vh;
}
.nav_top .nav_left{
	margin-right: 5%;
}
.nav_top .user_system{
	color: white;
}
.nav_top .user-notification{
	position: relative;
}
.nav_top .user-notification i{
	color: white;
	cursor: pointer;
	font-size: 1.3rem;
}
.nav_top .notification_number{
	position: absolute;
    top: 47%;
    left: 20%;
    background-color: red;
    color: white;
    border-radius: 20%;
    padding: 0% 7%;
    font-size: 75%;
    font-weight: bold;
    user-select:none;
    cursor: pointer;
}
.nav_top .user-notification ul{
    background-color: white;
    border: 1px solid black;
    border-radius: 5%;
    position: absolute;
    right: 60%;
    top: 94%;
    z-index: 1;
    list-style-type: none;
    padding: 0% 5%;

}
.nav_top .user-notification ul li{
	margin-top: 2%;
	background-color: #e6e6e6;
	cursor:pointer;
}
.nav_top .user-notification ul li a{
	text-decoration: none;
	color: black;
	text-align: right;
	direction: rtl;
}

.nav_top .user_system .welcome_flname{
	cursor: pointer;
}
.nav_top .user_system .welcome_word{
	color: gray;
}
.nav_top .user_system .dropdown-menu{
	left:5%;
	user-select:none;
	
}
.nav_top .nav_user_area{
	position: relative;
	user-select:none;
}
.nav_top .user_area_menu{
	position: absolute;
	background-color: white;
	color: black;
	padding: 5% 2%;
	z-index: 1;
	width: 15vw;
	border-radius: 0%;
	text-align: center;
}
.nav_top .user_area_menu a{
	background-color: white;
	color: black;
	width: 100%;
	display: inline-block;
	text-decoration: none;
	padding: 1%;
}
.nav_top .user_area_menu a:hover{
	background-color: black;
	color: white;
}

.nav_bottom{
	height: 6%; /* --- From body --- */
	max-height: 6%;
	width:100%;
	max-width: 100%;	
	background-color: black;
	color: white;
	border-top: 1px solid white;
	position:fixed;
	bottom:0px;
	user-select:none;
}
.page_title{
	height: 5%;
	max-height:5%;
	background-color: goldenrod;
}

/* ------------ Strat Index Page ------------ */
	.login_page{
		background-color: black;
		height: 100vh;
		width: 100vw;
		margin-right: 0px;
   		margin-left: 0px;
	}
	.login_card{
		margin: 0 auto;
		color: white;
	}
	.login_page .login_logo{
		margin:1%;
	}
	.login_page .login_form{
		margin:2% 0%;
	}
	.login_page .login_form input{
		margin:1% 0%;
		border: 1px solid white;
		background-color: black;
		color: white;
	}
	.login_page .login_form input[type='submit']{
		background-color: goldenrod;
		font-weight: bold;
		cursor: pointer;
	}
	.login_page .login_form input[type='submit']:hover{
		background-color: darkgoldenrod;
	}

	.nav_top .logout{
		color:white;
	}
	.nav_top .logout:hover{
		text-decoration: none;
		font-weight: bold;
	}
	.home{
		height: 90%;
		background-color: #353434;
		padding: 5%;
	}
	.home .page_link{
		text-decoration: none;
	}
	.home .page_link:hover{
		
	}
	.home .page_square{
		padding: .2%;
		color: white;
		width:20%;
		max-width: 20%;
		height: 15vw;
	}
	.home .page_square:hover{
		padding: 0%;
		background-color: goldenrod;
	}
	.home .page_square_img{
		border:1px solid white;
		margin-bottom: 1%;
	}
	.home .page_square_title{
		border:1px solid white;
		text-align: center;
		font-weight: bold;
	}
	.login_page .radi_logo{
		margin-top: 10%;
	}
	.login_page .radi_name{
		font-weight: bold;
	}
/* ------------ End Index Page ------------ */

/* ####################################### Start SHIP ####################################### */

	/* ------------ Strat Shipments Page ------------ */
		.page_title .ship_bar{
			padding-left: 2%;
		}
		.page_title .ship_bar a{
			color:black;
			font-weight: bold;
			margin-right: 2%;
		}
		.page_title .ship_bar a:hover{
			text-decoration: none;
			color:rgba(255,255,255,.8);
		}
		.new_ship{
			max-height: 95%;
			padding-right: 1%;
			padding-left: 1%;
			float: right;
			background-color: black;
			cursor: pointer;
			margin-top: 0.25%;
			color: #fff;
		}
		.new_ship a{
			color: gold;
		}
		.new_ship a:hover{
			text-decoration: none;
		}
		.page{
			height: 84%; /* --- From body --- */
			max-height: 84%;
			width:100%;
			max-width: 100%;
			overflow: auto;
			background-color: rgba(0,0,0,.8);
			color: white;
		}
		.ship{
			overflow: auto;
			background-color: silver;
			padding: 0.0%;
		}
	/* ------------ End Shipments Page ------------ */


	/* ##################### - Start Ship List - ##################### */

		.ship_list{
			height: 100%; 
			max-height: 100%;
			overflow: auto;
			border-right:1px solid #fff;
			padding:0%;
			background-color: rgba(0,0,0,.87);
		}
		.year_groups_tools_link:hover{
			text-decoration: none;
		}
		.year_groups_tools{
			height:5%;
			max-height:5%;
			width:100%;
			max-width: 100%;
			background-color: rgba(0,0,0,1);
			color:rgba(255,255,255,.6);
			padding:0% 1%;
			border-bottom: 1px solid rgba(255,255,255,.6);
			white-space: nowrap;
			cursor: pointer;
		}
		.year_groups_tools:hover{
			background-color: rgba(0,0,0,.2);
			color:rgba(255,255,255,.8);
			border-bottom: 1px solid rgba(255,255,255,.6);
		}
		.all_year{
			height:95%;
			max-height:95%;
			width:100%;
			max-width: 99%;
			overflow: auto;
			margin-left: 1%;
			padding-bottom: 2%;
			padding-right: 2%;
		}
		.all_year .list-group{
			
		}
		.ship_year{
			border-radius:0px;
			border:1px solid goldenrod;
			padding:0px;
			margin-top:1%;
			background-color: rgba(0,0,0,1);
			color: goldenrod;
		}
		.ship_index{
			margin-top:1px !important;
			margin:0px;
			white-space: nowrap;
		}
		.ship_index div{
			padding:0px;
		}
		.ship_entry{
			color: rgba(255,255,255,.6);
			padding:2px;
			border-bottom: 1px solid rgba(0,0,0,.7);
			margin-right: 0px;
			white-space: nowrap;
		}
		.ship_link{
			padding:0px;
			padding-left: 1.5%;
			border-radius:0px !important;
			background-color: rgba(255,255,255,.12);
			color: rgba(255,255,255,.6);
		}
		.active_list{
			background-color: goldenrod !important;
			color: black !important;
			border-width: 0px;
		}
	/* ##################### - End Ship List - ##################### */

	/* ##################### - Start Ship Folder - ##################### */	
		.ship_folder{
			height: 100%; 
			max-height: 100%;
			overflow: auto;
			background-color: rgba(0,0,0,.8); 
			padding: 0%;
			margin:0%;
			color:white;
		}
		.ship_nav{
			height:6%;
			max-height:6%;
			width:100%;
			max-width: 100%;
			margin:0%;
			background-color: rgba(0,0,0,1);
			color: rgba(255,255,255,.3);
		}
		.ship_nav div{
			cursor: pointer;
		}
		.ship_nav div:hover{
			background-color: rgba(255,255,255,.2);
		}
		.ship_nav .active_page{
			background-color: rgb(38,38,38);
			color:white;
			font-weight: bold;
		}
		.room_cost{
			position: relative;
			overflow: hidden;
		}
		.room_cost .action_btn{
			position: absolute;
			top:0.2%;
			right: -3%;
			background-color:goldenrod;
			color:black;
			width:30%;
			padding-left: 1%;
			
		}
		.room_cost .action_btn .print_btn{
			cursor: pointer;
			color:black;
			font-weight: bold;
		}
		.room_cost .action_btn .print_btn:hover{
			color:white;
		}
		.room_cost .action_btn a{
			color:black;
			font-weight: bold;
		}
		.room_cost .action_btn a:hover{
			text-decoration: none;
			color:white;
		}
		.cost_info{
			padding-bottom: 3%;
		}
		.cost_info fieldset{
		    display: block;
		    padding:1%;
		    margin:0.5%;
		    margin-top: 2%;
		    border-width: .1vw;
		    border-style: solid;
		    border-color: goldenrod;
		    font-size: 2.5vh;
		    background-color: rgba(0,0,0,1);
		    color:goldenrod;
		}
		.cost_info legend{
			display: block;
		    padding:0.1%;
		    padding-left:1%;
		    border-width: .1vw;
		    border-style: solid;
		    border-color: goldenrod;
		    width:30%;
		    font-size: 1.5vw;
		    background-color: black;
		    color:goldenrod;
		}
		.cost_info .load_sm{
			margin-top: -3%;
			margin-bottom: 1%;
		}
		.cost_info .load_sm img{
			width: 30%;
		}
		.cost_info .row{
			margin-left: 0px;
			margin-right: 0px;
		}
		.info_cell{
			padding:0.1% 0.3%;
			margin-bottom:.5%;
			display:inline-block;
			white-space: nowrap;
			font-size:1.2vw;
			background-color: rgba(255,255,255,.12);
			color: goldenrod;
			border-left-width: .3em;
			border-left-style: solid;
			border-left-color: black;
			overflow: auto;
		}
		.cost_info .row .info_cell:first-child{
			border-left-width: .0em;
		}
		.info_cell span{
			color: rgba(255,255,255,.6);
		}


		.info_cell25{
			width:24.5%;
			max-width: 24.5%;
		}
		.info_cell50{
			width:49.5%;
			max-width: 49.5%;
			
		}
		.info_cell75{
			width:74.5%;
			max-width: 74.5%;
		}
		.info_cell25, .info_cell50, .info_cell75{
			padding:0.1% 0.3%;
			margin-bottom:.5%;
			display:inline-block;
			white-space: nowrap;
			font-size:1.2vw;
			background-color: rgba(255,255,255,.12);
			color: goldenrod;
		}
		.info_cell25 span, .info_cell50 span, .info_cell75 span{
			color: rgba(255,255,255,.6);
		}
		.info_get{
			font-weight:normal;
		}


		/*------- Start Ship Notes ----- */
		
			.ship_note{
				margin-top: 1%;
			}
			.ship_note .note_icons{
				color:rgba(255,255,255,.6);
				float: left;
				margin-right: .9%;
			}
			.ship_note i{
				cursor: pointer;
			}
			.ship_note .note_text{
				color: #06b7b7;
				direction: rtl;
				text-align: left;
				white-space: pre-wrap;
				font-family: 'Kufi', arial;
				font-size: 1.2vw;
			}
			.ship_note textarea{
				min-height: 10vh;
				direction: rtl;
				text-align: left;
			}
		/*------- End Ship Notes ----- */

			/* ------------ Add New Ship --------------- */

				.cost_info input{
					height: 5vh;
				}
				.cost_info select{
					height: 5vh;
				}
				.add_field .field_title{
					display: inline-block;
					width:40%;
					font-size:1.2vw;
				}
				.add_field .field_val{
					display: inline-block;
					width:55%;
					font-size:1.2vw;
				}
				.add_gd_val input{
					width:60% !important;
					max-width: 60%;
				}
				.add_gd_val .add_val_select{
					width:38%;
					max-width: 38%;
				}
				.add_field select {
					border-radius: 0;
					margin:0;
					display:block;
					width: 100%;
					cursor: pointer;
					padding: 0.1vh 0 ;
				}
				.add_dmrg div, .add_gd_val{
					display: inline-block;
				}
				.add_dmrg .input_sm{
					width:36%;
					max-width: 36%;
				}
				.add_dmrg .label2{
					width:24%;
					max-width: 24%;
				}
						

	 /* [[[[[[[[[[[[[[[[[[[[[- Start Manage Ship -]]]]]]]]]]]]]]]]]]]]] */
		
		
		/* ------------- rmtnc -------------- */
			
			.rmtnctable{
				overflow: auto;
				white-space: nowrap;
				font-size: 10px !important;
				position: relative;
			}
			.rmtnctable *{
				/* font-size: 10px !important; */
			}
			.rmtnc .new_rmtnc{
				cursor: pointer;
				padding: 0.5%;
				user-select:none;
				background-color: black;
				color: goldenrod; 
				border:1px solid goldenrod;
			}
			.rmtnc .new_rmtnc:hover{
				cursor: pointer;
				padding: 0.5%;
				background-color: goldenrod;
				color: black; 
				border:1px solid goldenrod;
			}
			.rmtnc .cancel_rmtnc{
				cursor: pointer;
				padding: 0.5%;
				user-select:none;
				background-color: rgba(255,0,0,.5);
				color: black; 
				border:1px solid rgba(255,0,0,.5);
			}
			.rmtnc .cancel_rmtnc:hover{
				background-color: rgba(255,0,0,.8);
				border:1px solid rgba(255,0,0,.8);
			}
			.gdnc_sqwr{
				float: right;
				padding:0.3% 1%;
				background-color: rgba(255,255,255,.12);
				user-select:none;
			}
			.gdnc_sqwr .paid{
				color: rgba(82,171,82,1);
				font-size:1.15vw;
			}
			.gdnc_sqwr .wait{
				color: rgba(204,204,61,1);
				font-size:1.15vw;
			}
			.gdnc_sqwr .late{
				color: rgba(245,99,99,1);
				font-size:1.15vw;
			}
			.gdnc_sqwr .trans{
				color: rgba(255,255,255,.7);
				font-size:1.15vw;
			}
			.rmtnctable table{
				border-spacing:.2em;
				border-collapse: separate;
				margin-left: -0.4%; 
			}
			.rmtnc thead .th_action, .rmtnc tbody .td_action{
				position: sticky;
				right: 0%;
				border-left: 1px solid black;
			}
			.rmtnc .th_action .add_data{
				background-color: black;
				color:white;
			}
			.rmtnc .th_action .add_data:hover{
				background-color: white;
				color:black;
			}
			.rmtnctable table th{
				background-color: orange;
				color:black;
				padding:0.3%;
				text-align: center;
			}
			.rmtnctable table td{
				color:white;
				white-space: normal;
			}
			.rmtnc tbody .td_done{
				text-align: center;
			}
			.rmtnc tbody .td_action{
				padding-left: 0%;
				text-align: center;
				background-color: orange !important;
				color:black !important;
			}

			.rmtnctable thead input, .rmtnctable thead select{
				display: block;
			}
			.rmtnc thead .n_row{
				margin-left: 2%;
				cursor: pointer;
			}
			.rmtnc tbody i{
				margin:4%;
				cursor: pointer;
			}
			td select{
				width:100%;
				height: 100%
			}
			.rmtnc .add_data{
				cursor: pointer;
			}
			.rmtnc .hide{
				display: none;
			}
			.rmtnc .show{
				display: block;
			}
		/* ------------- rmtnc -------------- */

		/* ------------- Start Payment page ----------- */
			.payment_page{
				padding: 1%;
			}
			.payment_action{
				padding: .5%;
				background-color: rgba(255,255,255,.4);
			}
			.payment_action .payment_btn{
				background-color: rgba(0,0,0,.8);
				color: rgba(255,255,255,.7);
				padding: .3%;
				text-align: center;
				cursor: pointer;
			}
			.payment_action .payment_btn:hover{
				background-color: goldenrod;
				color: black;
			}
			.payment_action .payment_btn_active{
				background-color: goldenrod;
				color: black;
			}
			.payment_action .pr_payment{
				color: black;
				margin:0 1% 0 1%;
				cursor: pointer;
			}
			.payment_action .pr_payment:hover{
				font-weight: bold;
			}
			.payment_page .payment_records{
				margin-top: 1%;
			}
			.payment_page .payment_records table{
				border-spacing:.2em;
				border-collapse: separate;
			}
			.payment_records thead tr th{
				padding: 1%;
				background-color: rgba(0,0,0,1);
				color: rgba(255,255,255,.7);
				text-align: center;
			}
			.payment_page .payment_records tbody td{
				color: rgba(0,0,0,.8);
				text-align: center;
				padding: .3%;
			}
			.payment_page .pay_link{
				color: black;
			}
			.payment_page .pay_link:hover{
				text-decoration: none;
				font-weight: bold;
			}


			.pagination{
			    display: inline-block;
			}

			.pagination a{
			    color: white !important;
			    float: left;
			    padding: 8px 16px;
			    text-decoration: none;
			    transition: background-color .3s;
			    border: 1px solid #ddd;
			    margin: 0 4px;
			}

			.pagination a.active{
			    background-color: #4CAF50;
			    color: white;
			    border: 1px solid #4CAF50;
			}

			.pagination a:hover:not(.active){
				background-color: #ddd;
				color: black !important;
			}

			
			
		/* ------------- End Payment page ----------- */

		/* ------------- Start Ship Cost -------------- */

			.xpns .new_xpns{
				cursor: pointer;
				padding: 0.5%;
				user-select:none;
				background-color: black;
				color: goldenrod; 
				border:1px solid goldenrod;
			}
			.xpns .new_xpns:hover{
				cursor: pointer;
				padding: 0.5%;
				background-color: goldenrod;
				color: black; 
				border:1px solid goldenrod;
			}
			.xpns .cancel_xpns{
				cursor: pointer;
				padding: 0.5%;
				user-select:none;
				background-color: rgba(255,0,0,.5);
				color: black; 
				border:1px solid rgba(255,0,0,.5);
			}
			.xpns .cancel_xpns:hover{
				background-color: rgba(255,0,0,.8);
				border:1px solid rgba(255,0,0,.8);
			}
			.xpns table{
				border-spacing:.2em;
				border-collapse: separate;
				margin-left: -0.4%; 
			}
			.xpns table th{
				background-color: orange;
				color:black;
				padding:0.3%;
				text-align: center;
			}
			.xpns .th_xpns_action .insert_xpns{
				background-color: black;
				color:white;
				cursor: pointer;
			}
			.xpns .th_xpns_action .insert_xpns:hover{
				background-color: white;
				color:black;
			}
			.xpns tbody .td_action{
				padding-left: 0%;
				text-align: center;
				background-color: orange !important;
				color:black !important;
			}
			.xpns .th_xpns_action i{
				cursor: pointer;
			}
			.xpns tbody i{
				margin:2%;
				cursor: pointer;
			}
			.xpns tbody tr:nth-child(odd) {
			    background: rgba(255,255,255,.12);
			}
			.xpns .cost_rat{
				background-color: goldenrod;
				color:#000;
				float:right;
			}
			.xpns .hide{
				display: none;
			}


		/* ------------- End Ship Cost -------------- */

		/* ------------- Start Items Cost -------------- */

			.entry{
				margin-bottom: 2%;
			}
			.entry .add_item{
				cursor: pointer;
				padding: 0.5%;
				user-select:none;
				background-color: black;
				color: goldenrod; 
				border:1px solid goldenrod;
			}
			.entrytable{
				overflow: auto !important;
				position: relative;
			}
			.entry thead .th_item_action, .entry tbody .td_item_action{
				position: sticky;
				right: 0%;
				border-left: 1px solid black;
			}
			.entry .add_item:hover{
				cursor: pointer;
				padding: 0.5%;
				background-color: goldenrod;
				color: black; 
				border:1px solid goldenrod;
			}
			.entry .cancel_item{
				cursor: pointer;
				padding: 0.5%;
				user-select:none;
				background-color: rgba(255,0,0,.5);
				color: black; 
				border:1px solid rgba(255,0,0,.5);
			}
			.entry .cancel_item:hover{
				background-color: rgba(255,0,0,.8);
				border:1px solid rgba(255,0,0,.8);
			}.entry table{
				border-spacing:.2em;
				border-collapse: separate;
				margin-left: -0.4%; 
			}
			.entry table th{
				background-color: orange;
				color:black;
				padding:0.3%;
				text-align: center;
			}
			.entry .th_item_action .insert_item{
				background-color: black;
				color:white;
				padding: 9%;
			}
			.entry .th_item_action .insert_item:hover{
				background-color: white;
				color:black;
			}
			.entry tbody tr .td_item_dscrp{

			}
			.entry tbody .td_item_action{
				padding-left: 0%;
				text-align: center;
				background-color: orange !important;
				color:black !important;
			}
			.entry .th_item_action i{
				cursor: pointer;
			}
			.entry tbody i{
				margin:2%;
				cursor: pointer;
			}
			.entry tbody tr:nth-child(odd) {
			    background: rgba(255,255,255,.12);
			}
			.entry .ldata{
				color:#A2A1A0;
				font-family: 'Kufi', arial;
				font-size:1.3vw;
				text-align: right;
				direction: rtl;
			}
			.entry .idata{
				text-align: left;
				direction: ltr;
			}


		/* ------------- End Items Cost -------------- */


	 /* [[[[[[[[[[[[[[[[[[[[[- End Manage Ship -]]]]]]]]]]]]]]]]]]]]] */


		/* ------------ Add New Ship --------------- */


		/* [[[[[[[[[[[[[[- Start Ship Report Page -]]]]]]]]]]]]]] */

			.ship_rprt{
				padding:0.5%;
			}
			.rprt_btns .new_rprt{
				cursor: pointer;
				padding: 0.5%;
				user-select:none;
				background-color: black;
				color: rgba(255,255,255,1); 
				border:1px solid rgba(255,255,255,.5);
				margin-right: 2%;
			}
			.rprt_btns .new_rprt:hover{
				cursor: pointer;
				padding: 0.5%;
				background-color: rgba(255,255,255,.5);
				color: black; 
				font-weight: bold;
				border:1px solid rgba(255,255,255,.5);
			}
			.rprt_btns .dsply_of{
				cursor: pointer;
				padding: 0.5%;
				user-select:none;
				background-color: black;
				color: rgba(255,255,255,1); 
				border:1px solid rgba(255,255,255,.5);
				margin-right: 2%;
			}
			.rprt_btns .dsply_of select{
				background-color: black;
				color: white;
				border-width: 0px;
				height: 100%;
			}
			.rprt_btns .rprt_srh{
				user-select:none;
				background-color: black;
				color: rgba(255,255,255,1); 
				border:1px solid rgba(255,255,255,.5);
				margin-right: 2%;
				height: 5.5vh;
			}
			.rprt_btns .rprt_srh input{
				border-width: 0px;
				background-color: black;
				color: rgba(255,255,255,1);
				height: 100%; 
				padding: 0.5%;
			}
			.rprt_btns .pr_rprt{
				cursor: pointer;
				user-select:none;
				color: white;
			}
			.rprt_btns .pr_rprt:hover{
				font-weight: bold;
			}
			.rprt_form form{
				padding: 1%;
			    background-color: rgba(255,255,255,.5);
			}
			.rprt_form .cncl_rprt{
				color: white;
				background-color: black;
				padding:.8%;
				cursor: pointer;
			}
			.rprt_form .cncl_rprt:hover{
				background-color: rgba(0,0,0,.5);
				color: white;
			}

			.rprt_form input, .rprt_form select{
				height: 5vh;
			}
			.rprt_form .rprt_dt{
				margin-bottom: .5%;
				border-width: 0px;
				color: black;
				padding: 1%;
			}
			.cncrn2{
				margin-left: 10%;
			}
			.rprt_form .rprt_wz{
				border-width: 0px;
				color: black;
			}
			.rprt_form .rprt_txt{
				border-width: 0px;
				color: black;
				padding: 1%;
				direction: rtl;
				text-align: left;
			}
			.rprt_body .rprt_txt{
				direction: rtl;
				text-align: left;
			}
			.rprt_form .rprt_sbmt{
				border-width: 0px;
				background-color: goldenrod;
				color: black;
				cursor: pointer;
			}
			.rprt_form .rprt_sbmt:hover{
				background-color: black;
				color: white;
			}
			.ship_rprt .rprt_get div{
				display: inline-block;
			}
			#show_ship_rprt{
				margin:1% 0 0 0;
			}
			.rprt_one{
				margin:.5% 0;
				background-color: rgba(0,0,0,1);
				border: 1px solid rgba(255,255,255,.5);
			}
			.rprt_one .sml_data{
				font-size: 1.3vw;
			    color: goldenrod;
			}
			.rprt_one .gt_rprt_txt{
				white-space:pre-wrap;
				direction: rtl;
				font-family: 'Kufi', arial;
				font-size:1.3vw;
			}
			.rprt_body{
				padding: 1%;
				background-color: rgba(255,255,255,.2);
			}
			.rprt_foot{
				padding: .3% 1%;
				background-color: rgba(255,255,255,.1);
			}
			.rprt_foot .rprt_action{
				float: right;
				margin-right: 2%;
			}
			.rprt_action i{
				margin-right: .8em;
				cursor: pointer;
			}
			.rprt_one input, .rprt_one select{
				height: 5vh;
			}
			.rprt_one .rprt_dt{
				margin-bottom: .5%;
				border-width: 0px;
				color: black;
				padding: 1%;
			}
			
		/* [[[[[[[[[[[[[[- End Ship Report Page -]]]]]]]]]]]]]] */

		/* [[[[[[[[[[[[[[- Start Ship Documents Page -]]]]]]]]]]]]]] */

			.ship_dox{
				padding: .5%;
			}
			#dox_input .new_dox{
				cursor: pointer;
				padding: 0.5%;
				user-select:none;
				background-color: black;
				color: rgba(255,255,255,1); 
				border:1px solid rgba(255,255,255,.5);
				margin-right: 5%;
				margin-bottom: .5%;
			}
			#dox_input .new_dox:hover{
				cursor: pointer;
				padding: 0.5%;
				background-color: rgba(255,255,255,.5);
				color: black; 
				font-weight: bold;
				border:1px solid rgba(255,255,255,.5);
			}
			#dox_input table{
				border-spacing:.2em;
				border-collapse: separate;
				margin-left: -0.4%; 
			}
			#dox_input tr{
				height: 7vh;
				background-color: black;
			}
			#dox_input .dox_browse{
				text-align: center;
				background-color: black;
				color: lime;
				font-size: 1.4vw;
				padding-left: 1%;
				border:1px solid white;
			}
			#dox_input .dox_cat select{
				background-color: rgba(0,0,0,1);
				color: rgba(255,255,255,1);
				height: 7vh;
				border:1px solid white;
			}
			#dox_input .dox_title input{
				background-color: rgba(0,0,0,1);
				color: rgba(255,255,255,1);
				height: 7vh;
				border:1px solid white;
			}
			#dox_input .dox_cncl{
				background-color: red;
				text-align: center;
				height: 7vh;
				border:1px solid white;
			}
			#dox_input .upload_dox{
				user-select:none;
				background-color: rgba(255,255,255,1);
				color: black;
				border:1px solid rgba(255,255,255,.5);
				margin-bottom: 1%;
				margin-right: 0.8%; 
				float: right;
			}
			#dox_input .upload_dox input{
				padding: 2%;
				border-width: 0px;
				background-color: white;
				cursor: pointer;
			}
			#dox_tabs .dox_group{
				background-color: rgba(0,0,0,1);
				padding: 1%;
				margin-bottom: .5%;
			}
			#dox_tabs .one_tab{
				cursor: pointer;
				margin-bottom: 1%;
			}
			#dox_tabs .one_tab:hover{
				background-color: rgba(0,0,0,.5);
			}
			#dox_tabs .paper_counter{
				background-color: rgba(255,255,255,.5);
				padding: .2% 1%;
				border-radius: 10%;
				color:black;
				font-weight: bold;
			}
			#dox_tabs .img_book{
				background-color: rgba(255,255,255,.5);
				margin-bottom: 1%;
			}
			#dox_tabs .img_header{
				padding: .5%;
			}
			#dox_tabs .img_action{
				margin-right: ;
				color: rgba(0,0,0,.8);
			}
			#dox_tabs .img_action i{
				margin-left: 5%;
				cursor: pointer;
			}
			#dox_tabs .img_action i:hover{
				color: white;
				font-weight: bold;
			}
			#dox_tabs .img_title{
				font-weight: bold;
				text-decoration: underline;
			}
			#dox_tabs .img_title2{
				color: rgba(0,0,0,.7);
			}
			#dox_tabs .edit_area{
				margin-top: 1%;
			}
			#dox_tabs .edit_area select{
				height: 5vh;
			}
			.edit_area .row2{
				margin-top: 1%;
				margin-left: 0%;
				margin-right: 0%;
			}
			.edit_area .row2 div{
				padding-right: 0px !important;
				padding-left: 0px !important;
			}
			.edit_area .row2 textarea{
				min-height: 12vh;
				direction: rtl;
				text-align: left;
			}
			.img_book .img_note_word{
				vertical-align: text-top;
				float: left;
			}
			.img_book .img_note{
				color: rgba(0,0,0,1);
				white-space: pre-wrap;
	   			direction: rtl;
	   			font-family: 'Kufi', arial;
				font-size:1.3vw;
			}
			#dox_tabs .edit_area .edit_cancel{
				height: 6vh;
				background-color: rgba(255, 0, 0, .5);
				cursor: pointer;
				text-align: center;
				line-height: 6vh;
				font-weight: bold;
			}
			#dox_tabs .edit_area .edit_cancel:hover{
				background-color: rgba(255, 0, 0, .8);
				border:1px solid white;
			}
			#dox_tabs .edit_area .edit_save{
				height: 6vh;
				background-color: rgba(0, 255, 0, .5);
			}
			#dox_tabs .edit_area .edit_save input{
				height: 6vh;
				background-color: rgba(39, 154, 39, 1);
				border-width: 0px;
				color:white;
				font-weight: bold;
			}
			#dox_tabs .edit_area .edit_save input:hover{
				background-color: rgba(39, 154, 39, .5);
				border:1px solid white;
			}
	/* ##################### - End Ship Folder - ##################### */	

		/* [[[[[[[[[[[[[[- End Ship Documents Page -]]]]]]]]]]]]]] */

		/* [[[[[[[[[[[[[[- Start Bottom Navbar -]]]]]]]]]]]]]] */

		  /* --------- Start Default Currency ---------- */
			.myfx{
				float: right;
				margin-right:1%;
				padding:0.5%;
				padding-bottom: 0%;
				/*line-height: 0%;*/
				margin-top: 0.5%;
			}
			.myfx i{
				cursor: pointer;
			}
			.myfx .myprice{
				display: inline-block;
				width:50px;
				user-select:none;
			}

		   /* --------- End Default Currency ---------- */

		/* [[[[[[[[[[[[[[- End Bottom Navbar -]]]]]]]]]]]]]] */

	/* ##################### - Start Groups Page - ##################### */

		.ship_folder .groups_box{
			background-color: #4a4949;
			margin: 3% auto;
			padding: 1%;
		}
		.groups_box .add_group_row{
			background-color: goldenrod;
			color: black;
			font-weight: bold;
			text-align: center;
			padding: 1%;
			cursor: pointer;
		}
		.groups_box .add_group_row:hover{
			background-color: white;
		}
		.groups_box .add_group_form{
			border:1px solid white;
			padding: .5%;
		}
		.groups_box .add_group_form input{
			padding: .5%;
		}
		.groups_box .add_group_form .submit_add_group{
			cursor: pointer;
		}
		.groups_box .add_group_form .cancel_add_group{
			background-color: red;
			padding: .65%;
			cursor: pointer;
		}
		.groups_box .group_row{
		    padding: 1%;
		}
		.groups_box .group_row .group_name{
			background-color: black;
		    border: 1px solid goldenrod;
		    padding: 1%;
		    margin-right: 1%;
		    text-align: center;
		}
		.groups_box .group_row .group_name_input{
			background-color: white;
			color: black;
		    border: 1px solid goldenrod;
		    padding: 1%;
		    margin-right: 1%;
		    text-align: center;
		}
		.groups_box .group_one_btn{
			background-color: black;
			color: white;
		    border: 1px solid goldenrod;
		    padding: 5%;
		    margin-right: 1%;
		    text-align: center;
		    cursor: pointer;
		}
		.groups_box .group_one_btn:hover{
			background-color: #313131;
		}

	/* ##################### - End Groups Page - ##################### */




	/* ##################### - Start Suppliers Page - ##################### */
		/*------------ Start Suppliers List -----------------*/
			.sup{
				overflow: auto;
				background-color: silver;
				padding: 0.0%;
			}
			.sup_list{
				height: 100%; 
				max-height: 100%;
				overflow: auto;
				border-right:1px solid #fff;
				padding:0%;
				background-color: rgba(0,0,0,.87);
			}
			.new_sup{
				height:5%;
				max-height:5%;
				width:100%;
				max-width: 100%;
				background-color: rgba(0,0,0,1);
				color:rgba(255,255,255,.6);
				padding:0% 1%;
				border-bottom: 1px solid rgba(255,255,255,.6);
				white-space: nowrap;
				cursor: pointer;
			}
			.new_sup:hover{
				background-color: rgba(0,0,0,.2);
				color:rgba(255,255,255,.8);
				border-bottom: 1px solid rgba(255,255,255,.6);
				text-decoration: none;
				font-weight: bold;
			}
			.sup_index{
				margin-top:1px !important;
				margin:0px;
				white-space: nowrap;
			}
			.sup_index div{
				padding:0px;
			}
			.sup_code{
				color: rgba(255,255,255,.6);
				padding:2px;
				border-bottom: 1px solid rgba(0,0,0,.7);
				margin-right: 0px;
				white-space: nowrap;
			}
			.sup_link{
				padding:0px;
				padding-left: 1.5%;
				border-radius:0px !important;
				background-color: rgba(255,255,255,.12);
				color: rgba(255,255,255,.6);
			}




		/*------------ End Suppliers List -----------------*/

		/*------------ Start Suppliers Manage -----------------*/

			.sup_nav{
				height:6%;
				max-height:6%;
				width:100%;
				max-width: 100%;
				margin:0%;
				background-color: rgba(0,0,0,1);
				color: rgba(255,255,255,.3);
			}
			.sup_nav div{
				cursor: pointer;
			}
			.sup_nav div:hover{
				background-color: rgba(255,255,255,.2);
			}
			.sup_nav .active_page{
				background-color: rgb(38,38,38);
				color:white;
				font-weight: bold;
			}
			.room_sup{
				position: relative;
				overflow: hidden;
			}
			.room_sup .action_btn{
				position: absolute;
				top:0.2%;
				right: -3%;
				background-color:goldenrod;
				color:black;
				width:30%;
				padding-left: 1%;
				
			}
			.room_sup .action_btn .print_btn{
				cursor: pointer;
				color:black;
				font-weight: bold;
			}
			.room_sup .action_btn .print_btn:hover{
				color:white;
			}
			.room_sup .action_btn a{
				color:black;
				font-weight: bold;
			}
			.room_sup .action_btn a:hover{
				text-decoration: none;
				color:white;
			}
			.sup_info{
				padding-bottom: 3%;
			}
			.sup_info fieldset{
			    display: block;
			    padding:1%;
			    margin:0.5%;
			    margin-top: 2%;
			    border-width: .1vw;
			    border-style: solid;
			    border-color: goldenrod;
			    font-size: 2.5vh;
			    background-color: rgba(0,0,0,1);
			    color:goldenrod;
			}
			.sup_info legend{
				display: block;
			    padding:0.1%;
			    padding-left:1%;
			    border-width: .1vw;
			    border-style: solid;
			    border-color: goldenrod;
			    width:30%;
			    font-size: 1.5vw;
			    background-color: black;
			    color:goldenrod;
			}
			.sup_info .load_sm{
				margin-top: -3%;
				margin-bottom: 1%;
			}
			.sup_info .load_sm img{
				width: 30%;
			}
			.sup_info .row{
				margin-left: 0px;
				margin-right: 0px;
			}
			.sup_info .row .info_cell:first-child{
				border-left-width: .0em;
			}
			.sup_contact .info_get{
				direction: ltr;
				white-space: pre-wrap;
				padding: .5%;
			}
			.add_sup_page .submit{
				background-color: goldenrod;
				color: black;
				font-weight: bold;
				font-size: 1.4vw;
				border-width: 0px;
				cursor: pointer;
			}
			.add_sup_page .submit:hover{
				background-color: white;
				color: black;
			}
			.add_sup_page .sup_contact textarea{
				height: 30vh;
			}
		/*------------ End Suppliers Manage -----------------*/

	/* ##################### - Start Suppliers Page - ##################### */


/* ############################################### End SHIP ######################################### */



/* ##################### - Start Item Page - ##################### */
	
	
	/* ------------------ Start Item Search ------------------- */

		.item_search{
			padding: 1%;
		}
		.item_search .item_search_bar{
			margin: 0% auto;
		}
		.item_search .item_search_bar input{
			border-radius: 0;
			direction: rtl;
			text-align: right;
		}
		.item_search .item_search_bar input:focus{
		}
		.item_search .item_search_bar i{
			font-size: 2.2vw;
		}
		.item_search .item_search_result{
			margin-top: 1%;
		}

		.item_search_result table{
			border-spacing:.2em;
			border-collapse: separate;
			margin-left: -0.4%; 
			table-layout: fixed;
			overflow: hidden;
		}
		.item_search_result table th{
			background-color: blue;
			color: white;
			text-align: center;
			padding: 0.5%;
		}
		.item_search_result table td{
			color: black;
			text-align: center;
			overflow: auto;

		}
		
		.item_search_result tbody tr{
			background-color: rgb(131, 175, 255);
		}
		.item_search_result tbody td{
			direction: rtl;
		}
		.item_search_result tbody tr:nth-child(odd){
			background-color: #b9d3ef;
		}
		.item_search_result tbody tr:hover{
			background-color: white;
			cursor: pointer;
		}

	/* ------------------ End Item Search ------------------- */

	
	.item_pg{
		padding-top: 1vh;
		background-color: #e4e4e4;
		min-height: 100%;
	}
	.item_pg .item_pg_header{

	}

	.item_type_tap{		
		margin:1% 0%;
		max-width: 90%;
		background-color: goldenrod;
		border:2px solid black;
		border-left-width: 0;
		color:white;
		font-size: 2vw;
		text-align: center;
		font-weight: bold;
		padding: 0%;
	}
	.item_pg_tools{
		margin:1% 0%;
		color:white;
		font-size: 2vw;
		text-align: center;
		font-weight: bold;
		padding: 0%;
	}
	.item_pg_tools div{
		margin:0% 1%;
		border:2px solid black;
		background-color: goldenrod;
		font-size: 2vw;
		text-align: center;
		font-weight: bold;
		padding: 0%;
	}

	.item_pg_tools i{
		margin:0% 2%;
		color: black;
		cursor: pointer;
	}
	.item_pg_tools i:hover{
		color: white;
	}
	.item_pg_tools .active_show{
		color: white;
	}

	.item_search_all{
		padding: .8%;
	}
	.item_search_all input{
		padding: 1%;
	}

	.item_pg .item_card{
		height: 30vw;
		max-height: 30vw;
		max-width: 23%;
		padding-right: 0vw;
		padding-left: 0vw;
		margin-left: .5vw;
		margin-right: .5vw;
		margin-bottom: 2vh;
		background-color: black;
		border:10px solid black;
	}
	.item_pg .item_card_sp{
		background-color: #565656;
		border:10px solid #565656;
	}

	.item_pg .item_card img{
		max-width: 100%;
		height: 40%;
		border: 1px solid white;
	}
	
	.item_pg .item_card .item_card_text{
		max-width: 100%;
		height: 50%;
		border-top: 1px solid white;
		overflow:auto;
		padding: 2%;
		direction: rtl;
		text-align: right;
	}

	.item_pg .item_card .item_card_qty{
		max-width: 100%;
		height: 10%;
		border-top: 1px solid white;
	}

	.item_pg .item_card hr{
	    margin-top: 2%;
	    margin-bottom: 2%;
	    border: 0;
	    border-top: 1px solid gold;
	}

	.show_lines table{
		border-spacing: .2em;
	    border-collapse: separate;
	    margin-left: -0.4%;
	    table-layout: fixed;
	    overflow: hidden;
	}
	.show_lines table th{
		background-color: blue;
	    color: white;
	    text-align: center;
	    padding: 0.5%;
	}
	.show_lines table tr{
		background-color: rgb(131, 175, 255);
		color: black;
	}
	.show_lines table tr:nth-child(odd){
		background-color: #b9d3ef;
	}
	.show_lines table tr:hover{
		background-color: white;
		cursor: pointer;
	}
	.show_lines table td{
		overflow: auto;
	}
	.show_lines table .center{
		text-align: center;
	}
	.show_lines .ldata{
		color: black;
		text-align: right;
    	direction: rtl;
    	display: block;
	}
	.show_lines .idata{
		color: red;
		text-align: left;
    	direction: ltr;
    	display: block;
	}
	
	.page1_home{
		height: 100%; 
		max-height: 100%;
		overflow: auto;
		background-color: rgb(38,38,38) !important; 
		padding: 0%;
		margin:0%;
		color:white;
	}
	.list_item_index{
		white-space: normal;
	}
	.list_item_name{
		direction: rtl;
		text-align: right;
	}
	
	.page1_nav{
		height:6%;
		max-height:6%;
		width:100%;
		max-width: 100%;
		margin:0%;
		background-color: rgba(0,0,0,1);
		color: rgba(255,255,255,.3);
	}
	.page1_nav div{
		cursor: pointer;
	}
	.page1_nav div:hover{
		background-color: rgba(255,255,255,.2);
	}
	.page1_nav .active_page{
		background-color: rgb(38,38,38);
		color:white;
		font-weight: bold;
	}

	.room_page1{
		position: relative;
		overflow: hidden;
	}
	#page1_4tab1{
		margin-bottom: 3%;
	}
	#page1_4tab2{
		height: 94%;
		max-height: 94%;
	}
	.room_page1 .action_btn{
		position: absolute;
		top:0.2%;
		right: -3%;
		background-color:goldenrod;
		color:black;
		width:23%;
		padding-left: 1%;
		
	}
	
	.room_page1 .action_btn a{
		color:black;
		font-weight: bold;
		cursor: pointer;
	}
	.room_page1 .action_btn a:hover{
		text-decoration: none;
		color:white;
	}

	.page1_home .room_page1 .item_img {
		margin:1vw auto;
		border:1px solid white;
		position: relative;

	}

	.page1_home .room_page1 .basic_info .info_title{
		background-color: goldenrod;
		padding: .5vw;
		width:25%;
		max-width: 25%;
		margin:1%;
		font-weight: bold;
	}

	.page1_home .room_page1 .basic_info .info_data{
		background-color: gray;
		padding: .5vw;
		width:70%;
		max-width: 70%;
		margin:1%;
		margin-left: 0;
		font-weight:;
	}
	
	.item_pg_add .basic_info{
		margin-top: 2vw;
	}
	.item_pg_add_note{
		font-size: small;
		color: gold;
		font-weight: bold;
		margin-left: 27%;
		margin-bottom: 2%;

	}
	.item_pg_add form input[type='submit']{
		background-color: #02d802;
		padding: 1vw;
		margin-left: 1%;
		font-weight: bold;
		cursor: pointer;
	}
	.item_pg_add form input[type='submit']:hover{
		background-color: #51e651;
	}

	#catalog{
		padding: 1%;
	}
	.catalog-button{
		cursor: pointer;
	    padding: 0.5%;
	    user-select: none;
	    background-color: black;
	    color: goldenrod;
	    border: 1px solid goldenrod;
	    width: 25%;
	    margin: 0 auto;
	    text-align: center;
	}
	.catalog-button:hover{
	    background-color: goldenrod;
	    color: black;
	    font-weight: bold;
	}

	.close-catalog{
		cursor: pointer;
	    padding: 0.5%;
	    user-select: none;
	    background-color: red;
	    color: white;
	    width: 25%;
	    margin: 0 auto;
	    text-align: center;
	}
	.close-catalog:hover{
	    background-color: white;
	    color: red;
	    font-weight: bold;
	}

	.show-catalog{
		cursor: pointer;
	    padding: 0.5%;
	    user-select: none;
	    background-color: #22c522;
	    color: white;
	    width: 25%;
	    margin: 0 auto;
	    text-align: center;
	}
	.show-catalog:hover{
	    background-color: white;
	    color: #22c522;
	    font-weight: bold;
	}

	.catalogbook{
		margin-top: 3%;
		height: 96%;
		max-height: 96%;
	}
	.catalogbook iframe{
		height: 100%;
		max-height: 100%;
	}

	#page1_4tab2 .action_btn{
		width:30%;
	}
	.add_catalog form{
	    padding: .5%;
	    background-color: goldenrod;
	    margin: 1%;
	}
	.add_catalog .catalog_submit{
		background-color: white;
	    color: black;
	    padding: .4%;
	    padding-right: 2%;
	    cursor: pointer;
	}
	.add_catalog .catalog_submit input{
		background-color: white;
    	border: 0;
    	cursor: pointer;
	}
	.add_catalog .cancel_catalog{
		background-color: white;
	    padding: 0.6% 1%;
	    color: black;
	    cursor: pointer;
	}
	.catalogbook .no_catalog{
	    margin-left: 2%;
    	color: goldenrod;
	}
	/* ----------------------------------- Start The Stock ------------------------------ */
		.stock .vlbl_qty{
			margin:1% auto;
			border: 1px solid white;
		}
		.stock .vlbl_qty .net_qty{
			background-color: #31731b;
			padding: 1%;
			text-align: center;
		}
		.stock .action_vlbl_note{
			float: right;
		}
		.stock .action_vlbl_note i{
			cursor: pointer;
		}
		.stock .action_vlbl_note i:hover{
			font-weight: bolder;
		}

		.stock .vlbl_qty .vlbl_note{
			background-color: #bfecac;
			color: black;
			padding: 1%;
			text-align: right;
		}
		.stock .vlbl_note_data, .stock .vlbl_text{
			direction: rtl;
		    text-align: right;
		    white-space: pre-wrap;
		}
		.stock fieldset{
		    display: block;
		    padding:1%;
		    margin:0.5%;
		    margin-top: 2%;
		    border-width: .1vw;
		    border-style: solid;
		    border-color: goldenrod;
		    font-size: 2.5vh;
		    background-color: rgba(0,0,0,1);
		    color:goldenrod;
		}
		.stock legend{
			display: block;
		    padding:0.1%;
		    padding-left:1%;
		    border-width: .1vw;
		    border-style: solid;
		    border-color: goldenrod;
		    width:30%;
		    font-size: 1.5vw;
		    background-color: black;
		    color:goldenrod;
		}
		#page1_4tab3 table{
			border-spacing:.2em;
			border-collapse: separate;
			margin-left: -0.4%; 
		}
		#page1_4tab3 table th{
			background-color: goldenrod;
			color: black;
			text-align: center;
			padding: 0.5%;
		}
		#page1_4tab3 table td{
			color: black;
			text-align: center;
			direction: ltr;
		}
		.uptable .new_record{
			cursor: pointer;
		    padding: 0.5%;
		    user-select: none;
		    background-color: black;
		    color: goldenrod;
		    border: 1px solid goldenrod;
		}
		.uptable .new_record:hover{
		    background-color: goldenrod;
		    color: black;
		}
		.uptable .cancel_record{
			cursor: pointer;
		    padding: 0.5%;
		    user-select: none;
		    background-color: rgba(255,0,0,.5);
		    color: black;
		    border: 1px solid rgba(255,0,0,.5);
		}
		.uptable .cancel_record:hover{
		    background-color: rgba(255,0,0,.8);
    		border: 1px solid rgba(255,0,0,.8);
		}
		.uptable .total_record{
		    padding: 0.5%;
		    user-select: none;
		    background-color: white;
		    color: black;
		    font-weight: bold;
		}
		.select_net_stored{
			background-color: black;
			margin: auto;
			text-align: center;
			border:1px solid goldenrod;
			padding: 1%;
		}
		.uptable .total_record span{
		    font-weight: bolder;
		    font-size: 1.2em;
		}

		.rsrv table th {
			background-color: blue !important;
		    color:white !important;
		}
		.rsrv table input{
			direction: rtl;
		}
		.rsrv tbody tr{
			background-color: rgb(131, 175, 255);
		}
		.rsrv tbody td{
			direction: rtl;
		}
		.rsrv tbody tr:nth-child(odd){
			background-color: #b9d3ef;
		}
		.rsrv .td_rsrv_dscrp{
			direction: rtl;
    		text-align: right !important;
    		padding-right: 1%;
		}
		.rsrv .td_rsrv_dscrp hr{
			border: 1px solid red;
		    margin: 0;
		    margin-top: 5%;
		}
		.rsrv .td_rsrv_dscrp .rsrv_approve{
			margin: 1%;
		    padding: 1%;
		    width: 17%;
		    float: left;
		    text-align: center;
		    cursor: pointer;
		    user-select:none;
		}
		.rsrv .td_rsrv_dscrp .rsrv_agree{
			background-color: #0cb50c;
		}
		.rsrv .td_rsrv_dscrp .rsrv_reject{
			background-color: red;
		}
		.rsrv .td_rsrv_dscrp .rsrv_return{
			background-color: blue;
			color: white;
		}
		.rsrv_user_by{
			color: #710b15;
			font-size: 1vw;
			float: left;
		}
		.rsrv_user_full_name{
			font-size: 1vw;
		}

		.stock .move{
			margin-bottom: 3%;
		}
		.move table input{
			direction: rtl;
		}
		.move table td{
			background-color: #a0f9a0;
			direction: rtl;
		}
		.move .move_dscrp{
    		text-align: right !important;
    		padding-right: 1%;
    		direction: rtl !important;
		}
		.move table .td_out{
			background-color: rgb(249, 137, 137);
		}

		.stock .record{
			background-color: black;
			color: white;
			padding: 5%;
			cursor: pointer;
		}
		.stock .record:hover{
			background-color: white;
			color: black;
		}
		.stock .move_action{
			background-color: goldenrod !important;
    		color: black !important;
		}
		.stock .move_action i{
			margin:0% 7% !important;
			cursor: pointer;
		}
		.stock .move_action i:hover{
			font-weight: bolder;
		}
		
		.form_edit_move input{
			height: 100% !important;
		}
		.edited_tr td{
			background-color: white !important;
		}
		.edited_tr td input, .edited_tr td select{
			border:0px;
		}

		.stock .rsrv_action{
			background-color: blue !important;
    		color: white !important;
		}
		.stock .rsrv_action i{
			margin:0% 7% !important;
			cursor: pointer;
		}
		.stock .rsrv_action i:hover{
			font-weight: bolder;
		}
		
	/* ----------------------------------- End The Stock ------------------------------ */

	.reserve_pg{
		padding: 1%;
	}
	.reserve_pg .print_reserve_pg{
		background-color: goldenrod;
		padding: 0.2% 1%;
		text-align: center;
		cursor: pointer;
		user-select:none;
	}
	.reserve_pg .print_reserve_pg:hover{
		font-weight: bold;
	}
	.reserve_pg table{
		border-spacing: .2em;
	    border-collapse: separate;
	    margin-left: -0.4%;
	    table-layout: fixed;
	    overflow: hidden;
	}
	.reserve_pg table th {
	    background-color: blue;
	    color: white;
	    text-align: center;
	    padding: 0.5%;
	}
	.reserve_pg table tr {
	    background-color: rgb(131, 175, 255);
	    color: black;
	}
	.reserve_pg table tr:nth-child(odd) {
	    background-color: #b9d3ef;
	}
	.reserve_pg table tr hr{
		border: 1px solid red;
	    margin: 0;
	    margin-top: 5%;
	}
	.td_center{
		text-align: center;
	}


	.reserve_pg .rsrv_approve{
		margin: 1%;
	    padding: 1%;
	    width: 17%;
	    float: left;
	    text-align: center;
	    cursor: pointer;
	    user-select:none;
	}
	.reserve_pg .rsrv_agree{
		background-color: #0cb50c;
	}
	.reserve_pg .rsrv_reject{
		background-color: red;
	}
	.reserve_pg .rsrv_return{
		background-color: blue;
		color: white;
	}


	.reserve_pg .go_to_rsrv a{
		color: black;
	}
	.reserve_pg .go_to_rsrv a:hover{
		text-decoration: none;
		font-weight: bold;
	}
	.reserve_pg thead .fa-sort{
		cursor: pointer;
	}
	.reserve_pg thead .fa-sort:hover{
		font-size: 1.2em;
	}

/* ##################### - End Item Page - ##################### */



/* ##################### - Start Users Page - ##################### */

	.page1_home .users_pg{
		
	}
	.page1_home .users_pg .action_btn{
		position: absolute;
		top: 1%;
		z-index: 1;
		width: 30%
	}
	.new_user{
		height:5%;
		max-height:5%;
		width:100%;
		max-width: 100%;
		background-color: rgba(0,0,0,1);
		color:rgba(255,255,255,.6);
		padding:0% 1%;
		white-space: nowrap;
		cursor: pointer;
	}
	.new_user:hover{
		background-color: rgba(0,0,0,.2);
		color:rgba(255,255,255,.8);
		text-decoration: none;
		font-weight: bold;
	}
	.users_pg .user_field{
		margin: 1%;
		margin-top: 4%;
	}
	.users_pg .user_info{
		background-color: goldenrod;
		padding: 1%;
		margin-right: .8%;
		margin-bottom: 1%;
		font-weight: bold;
	}
	.users_pg .user_data{
		background-color: gray;
		padding: 1%;
		margin-bottom: 1%;
	}
	.page1_home .users_pg .permissions{
		background-color: goldenrod;
		padding: 1%;
		margin: auto;
		text-align: center;
		font-weight: bolder;
		margin-top: 2%;
	}
	.users_pg .permit_box{
		margin:1%;
		border-bottom: 1px solid white;
		padding: 2%;
	}
	.users_pg .permit_title{
		font-size: 1.2em;
		font-weight: bold;
		text-decoration: underline;
		margin-left: 1%;
	}
	.users_pg .permit_row{
		margin-left: 10%;
		margin-bottom: .5%;
	}
	.users_pg .permit_row .sup_permit{
		font-size: 80%;
		font-weight: normal;
		margin-top: 1%;
	}
	.users_pg .permit_row .fa-level-up{
		transform: rotate(90deg);
		font-size: 2vw;
	}
	.users_pg .permit_info{
		font-size: 1.1em;
		font-weight: bold;
		margin-left: 1%;
	}
	.users_pg .permit_data .banned{
		color:#ff6565;
	}
	.users_pg .permit_data .read{
		color:#9a9aff;
	}
	.users_pg .permit_data .free{
		color:#07de07;
	}
	.users_pg form .user_submit{
		height: 3.5vw;
		cursor: pointer;
		background-color: #d6d2d2;
		color: black;
		font-weight: bold;
		border-width: 0px;
	}
	.users_pg form .user_submit:hover{
		background-color: white;
	}


/* ##################### - End Users Page - ##################### */





/* ############## Start Fixed Classes for division of the page ################### */
	

	.m0{ 
		margin:0px 
	}
	.p0{
		padding:0px;
	}
	.p_left{
		padding-left: 0.8%;
	}
	.nlb{
		display: inline-block;
	}
	.db{
		display: block;
	}
	.hide{
		display: none;
	}
	.text_rtl{
		text-align: right !important;
		direction: rtl !important;
	}
	.text_ltr{
		text-align: left !important;
		direction: ltr !important;
	}
	.color_red{
		color:red;
	}
	.h100{ 
		height: 100%;
		max-height: 100%;
	}
	input[disabled='true']{
		background-color: #4C4B4A !important;
		color:white !important;
	}
	.w250{ 
		width:250%;
		max-width: 250%;
	}
	.w200{ 
		width:200%;
		max-width: 200%;
	}
	.w100{ 
		width:100%;
		max-width: 100%;
	}
	.w99{ 
		width:99%;
		max-width: 99%;
	}
	.w9{ 
		width:9%;
		max-width: 9%;
	}
	.w97{ 
		width:97%;
		max-width: 97%;
	}
	.w95{ 
		width:95%;
		max-width: 95%;
	}
	.w90{ 
		width:90%;
		max-width: 90%;
	}
	.w85{ 
		width:85%;
		max-width: 85%;
	}
	.w80{ 
		width:80%;
		max-width: 80%;
	}
	.w75{ 
		width:75%;
		max-width: 75%;
	}
	.w70{ 
		width:70%;
		max-width: 70%;
	}
	.w60{ 
		width:60%;
		max-width: 60%;
	}
	.w55{ 
		width:55%;
		max-width: 55%;
	}
	.w50{ 
		width:50%;
		max-width: 50%;
	}
	.w45{ 
		width:45%;
		max-width: 45%;
	}
	.w40{ 
		width:40%;
		max-width: 40%;
	}
	.w35{ 
		width:35%;
		max-width: 35%;
	}
	.w30{ 
		width:30%;
		max-width: 30%;
	}
	.w25{ 
		width:25%;
		max-width: 25%;
	}
	.w20{ 
		width:20%;
		max-width: 20%;
	}
	.w17{ 
		width:17%;
		max-width: 17%;
	}
	.w15{ 
		width:15%;
		max-width: 15%;
	}
	.w14{ 
		width:14%;
		max-width: 14%;
	}
	.w13{ 
		width:13%;
		max-width: 13%;
	}.w12{ 
		width:12%;
		max-width: 12%;
	}.w11{ 
		width:11%;
		max-width: 11%;
	}
	.w10{ 
		width:10%;
		max-width: 10%;
	}
	.w9{ 
		width:9%;
		max-width: 9%;
	}
	.w8{ 
		width:8%;
		max-width: 8%;
	}
	.w7{ 
		width:7%;
		max-width: 7%;
	}
	.w5{ 
		width:5%;
		max-width: 5%;
	}
	.w3{ 
		width:3%;
		max-width: 3%;
	}
	.w2{ 
		width:2%;
		max-width: 2%;
	}



	.h80{
		height: 80%;
		max-height: 80%;
	}
	.h20{
		height: 20%;
		max-height: 20%;
	}

	.agree_text{
		color:#087308;
		direction: rtl;
	}
	.disagree_text{
		color:red;
		direction: rtl;
	}
	.wait_text{
		color:blue;
		direction: rtl;
	}
	.input_err{
		background-color: red;
		color:white;
	}
	.ar_cell{
		direction: rtl;
	}
	.date_cell{
		direction: ltr !important;
	}
	.small_note{
		font-size: small;
		color: gold;
		font-weight: bold;
	}
	.text_area_data_right{
		direction: rtl;
	    text-align: right;
	    white-space: pre-wrap;
	}
	.text_area_data_left{
		direction: ltr;
	    text-align: left;
	    white-space: pre-wrap;
	}
/* ############## End Fixed Classes for division of the page ################### */
	

/* ############## For Test------------------------------ ################### */

.brdr{
	background-color: #eee;
}
.dn_d{
	font-size: 1.2vw;
}


/* ############## Start S1 ################### */

	

	 
	
	

/* ############## End S1 ################### */