:root{	
	--base-font-size:1rem;
	/*--backgrnd :url('https://zahidcontainer.com/wp-content/uploads/2020/12/37-740x490.jpg')*/
	--backgrnd :url('https://zahidcontainer.com/wp-content/uploads/2019/10/slide-02-1920x854.jpg')
	/*--backgrnd :url('https://zahidcontainer.com/wp-content/uploads/2019/10/slide-01-1920x854.jpg')*/

}
*,
*:after,
*:before {
  -webkit-box-sizing: border-box;
  -moz-box-sizing: border-box;
  box-sizing: border-box;
}



/* NULL */
html, body,  div, img
{
	margin:0;
	padding:0;
	border:0;
	outline:0;
}

/*Do not forget to describe the styles for:focus!*/
:focus {
	outline:0;
}

html,body{
 
	font-family: sans-serif;
	width:100%;
	height:100%;	
	margin:0;
	padding:0;
}

textarea,
select,
input[type="text"],
input[type="number"],
input[type="tel"],
input[type="email"] {
	
	display: block;
	padding: 0 1rem;
	z-index: 2;
	padding: calc(.8 * var(--base-font-size)) calc(.7 * var(--base-font-size));
	line-height: calc(3 * var(--base-font-size));
	font: 400 calc(1 * var(--base-font-size)) sans-serif;
	color: #3e3b3b;
	background: #fbfbbb80;
	border: 1px solid #88ba87;
	border-radius: 3px;
	-webkit-transition: all .3s ease;
	-o-transition: all .3s ease;
	transition: all .3s ease;
	
}

input[type="button"]:disabled{
	background: grey;
}

textarea{
	background: #fbfbbb54;
/*}::-webkit-input-placeholder {
	opacity: .6;
	font-weight: 300;
	font-size: calc(.85 * var(--base-font-size));
	color: #393939;
}::-moz-placeholder {
	opacity: .6;
	font-weight: 300;
	font-size: calc(.85 * var(--base-font-size));
	color: #393939;*/
}

textarea:focus,
select:focus,
input:focus{
	-webkit-box-shadow: 0 0 10px rgba(0,0,0,.3);
	box-shadow: 0 0 10px rgba(0,0,0,.3);
}

.wrapper-container{
	display: flex;
	width: 100%;
	height:100%; 
	top: 0;
	left: 0;
	align-items: center;
	justify-content: center;
	position: absolute;
	z-index: 10;
}

.input-container {
	
	z-index:2;
	background: #f1f2f2b0;
	color: #000;
	border-radius: 3px;
	border: 2px solid white;
	-webkit-box-shadow: 0 39px 57px rgba(0,0,0,.19);
	box-shadow: 0 39px 57px rgba(0,0,0,.19);
	position: relative;
	width: 35vw;
    height: 80vh;
	display: flex;
	flex-direction: column;
	justify-content: space-between;
	padding: 1% 2% 1%;
}

.form-input__submit {
	display: flex;
	justify-content:center;
	align-items:center;
	max-height: 100%;		
	margin-top: 5%;
	width: 100%;	
	height: 3em;
	position: relative;
	z-index: 5;
	flex-direction: row;
	align-self:center;
}

.form-sert__header {
	padding: calc(2.1 * var(--base-font-size));
	font-size: calc(1.25 * var(--base-font-size));
	line-height: 1;
	letter-spacing: -0.2px;
	text-align: center;
}

.button{
	
	padding: 14px 20px 16px;
	text-align: center;
	line-height: calc(0.8 * var(--base-font-size));
	background: #88ba87;
	color: #fff;
	cursor:pointer;
	border: 2px solid #fff;		
	display: block;
	margin: 0 auto;
	position: relative;	
	-webkit-border-radius: 3px;
	border-radius: 3px;
	/*-webkit-box-shadow: 0 20px 43px rgba(18,159,178,.35);
	box-shadow: 0 20px 43px rgba(18,159,178,.35);*/
	-webkit-transition: all .3s ease;
	-o-transition: all .3s ease;
	transition: all .3s ease;
}

input[type="number"]::-webkit-outer-spin-button,
input[type="number"]::-webkit-inner-spin-button {
  -webkit-appearance: none;
  margin: 0;
}


input[type="number"]{
  -moz-appearance: textfield;
}

.button_submit {
	z-index: 99;
}

.hasreply, .qrbtn{
	font-size: calc 0.85* var(--base-font-size);	
	width: 2em;
	height: 2em;
	position: absolute;	
	cursor: pointer;	
	background-repeat: no-repeat;
	background-size: contain;
	align-self:center;
	border: none;
}

.hasreply{
	background-image: url(message.png);
	right:0;	
	margin-right:1%;
}

.qrbtn{
	display:none;
	background-image: url(qr-code.png);
	opacity: 0.65;
	background-size: cover;
	height: 64px;
	margin-right: 10%;
	right: 0;
	position: absolute;
	width: 64px;
	bottom: 0;
	margin-right: 10%;
	right: 0;
}

.delrow{
	display:none;
	font-size: calc 0.85* var(--base-font-size);
	right:0;	
	margin-right: 1.45%;
	width: 1.4em;
	height: 1.4em;	
	cursor: pointer;	
	opacity:0.55;
	position :absolute;
	background-repeat: no-repeat;
	background-size: cover;
	background-image: url(delete.png);
	align-self:center;
	border: none;
}

.form-sert {
	min-height: 100%;
	max-width: 90vw;
	margin: 0 auto;
	display: flex;
	align-items: flex-start;
	justify-content: center;
	margin-top:5%;
}

h4, 
label{
 font-size:var(--base-font-size);
 color: #3e3b3b;
 
}

.main > p {
    line-height: calc(1 * var(--base-font-size));
    font-size: calc(.85 * var(--base-font-size));
    font-weight: normal;
}

div.main	
{	
	z-index:5;
	background-color: #f1f2f2a1;
	overflow:hidden;
	border: 2px solid white;
	position: relative;
	padding: 3.5vh;	
	display: block;
	margin:0 auto;
	margin-top:15%;
	max-width: 100%;
}

.back{
	z-index:0;
	content: "";
	background-color: #FFFFFF;
	background-repeat: no-repeat;
	background-size: cover;
	min-width: 100%;
	min-height: 100%;
	background-image: var(--backgrnd);
	display:block;
	position:fixed;
	border:none;
	top:0;
	left:0;
	opacity:.4;
}

.toolpanel,.buttonpanel{

	opacity:1;
	display: flex;
	flex-direction: row;
	position:relative;
	z-index:10;
	gap:3%;
}

.toolpanel{
	height: 3em;
	margin-top:5%;
	width: 100%;
}	

.search{
	width: 100%;
	margin-inline: auto;

}

.button{
	border:none;
	height: 100%;
	font-size: calc(1.2 * var(--base-font-size));
}

.button:focus{
  -webkit-animation: anim-effect-shrink .15s;
  animation: anim-effect-shrink .15s;
}

.button25, .button24 {
	outline: none;
	text-decoration:none;
	text-indent:0px;
	line-height:calc(1.2 * var(--base-font-size));
	text-align:center;
	vertical-align:middle;
	display:inline-block;
	color: white;
	font-size: calc(1.08 * var(--base-font-size));
	/*padding: calc(.25 * var(--base-font-size)) calc(.9 * var(--base-font-size));*/
	transition: 0.2s;
}

.button25:active {
	box-shadow:#d6d6d6 1px 0 2px;
	-webkit-box-shadow:#d6d6d6 1px 0 2px;
	position:relative;
	top:3px
}

.button25:hover {
	background:#a16b04;
	background:-o-linear-gradient(90deg, #a16b04, #c1a57a);
	background:-moz-linear-gradient( center top, #a16b04 5%, #c1a57a 100% );
	background:-webkit-gradient( linear, left top, left bottom, color-stop(0.05, #a16b04), color-stop(1, #c1a57a) );
	background:-webkit-linear-gradient(#a16b04, #c1a57a);
	background:-ms-linear-gradient(#a16b04, #c1a57a);
	background:linear-gradient(#a16b04, #c1a57a);
}

.button25 {
	border-color:#31c41a;
	background:#c1a57a;
	background:-o-linear-gradient(90deg, #c1a57a, #a16b04);
	background:-moz-linear-gradient( center top, #c1a57a 5%, #a16b04 100% );
	background:-webkit-gradient( linear, left top, left bottom, color-stop(0.05, #c1a57a), color-stop(1, #a16b04) );
	background:-webkit-linear-gradient(#c1a57a, #a16b04);
	background:-ms-linear-gradient(#c1a57a, #a16b04);
	background: linear-gradient(#c1a57a, #a16b04);
}

.button24 {
	background:#82b981;
	background:-o-linear-gradient(90deg, #82b981, #32952f);
	background:-moz-linear-gradient( center top, #82b981 5%, #32952f 100% );
	background:-webkit-gradient( linear, left top, left bottom, color-stop(0.05, #82b981), color-stop(1, #32952f) );
	background:-webkit-linear-gradient(#82b981, #32952f);
	background:-ms-linear-gradient(#82b981, #32952f);
	background:linear-gradient(#82b981, #32952f);
}

.button25:active{
	box-shadow:#d6d6d6 1px 0 2px;
	-webkit-box-shadow:#d6d6d6 1px 0 2px;
	position:relative;
	top:3px
}

.button24:hover {
	background:#32952f;
	background:-o-linear-gradient(90deg, #32952f, #82b981);
	background:-moz-linear-gradient( center top, #32952f 5%, #82b981 100% );
	background:-webkit-gradient( linear, left top, left bottom, color-stop(0.05, #32952f), color-stop(1, #82b981) );
	background:-webkit-linear-gradient(#32952f, #82b981);
	background:-ms-linear-gradient(#32952f, #82b981);
	background:linear-gradient(#32952f, #82b981);
}

.redbutton {
	background:#952f2f;
	background:-o-linear-gradient(90deg, #d67373, #d81010);
	background:-webkit-gradient( linear, left top, left bottom, color-stop(0.05, #d67373), color-stop(1, #d81010) );
	background:-webkit-linear-gradient(#d67373, #d81010);
	background:-ms-linear-gradient(#d67373, #d81010);
	background:linear-gradient(#d67373, #d81010);
}
.redbutton:hover {
	background:#952f2f;
	background:-o-linear-gradient(90deg, #d81010, #d67373);
	background:-webkit-gradient( linear, left top, left bottom, color-stop(0.05, #d81010), color-stop(1, #d67373) );
	background:-webkit-linear-gradient(#d81010, #d67373);
	background:-ms-linear-gradient(#d81010, #d67373);
	background:linear-gradient(#d81010, #d67373);
}

@-webkit-keyframes anim-effect-shrink{
	0% {
		-webkit-transform: scale3d(1.05, 1.05, 1);
		transform: scale3d(1.05, 1.05, 1);
	}
	to{
		-webkit-transform: scale3d(0.8, 0.8, 1);
		transform: scale3d(0.8, 0.8, 1);
	}
}

@keyframes anim-effect-shrink{
	0%{
		-webkit-transform: scale3d(1.05, 1.05, 1);
		transform: scale3d(1.05, 1.05, 1);
	}
	to {
		-webkit-transform: scale3d(0.8, 0.8, 1);
		transform: scale3d(0.8, 0.8, 1);
	}
}

/********************  table   *****************/
div.wrapper{	
	height: 100vh;
	width: 90vw;
	margin-inline: auto;
}

table {
	margin: 2.5em 0;
	border-collapse: collapse;
	overflow: auto;
	width: 100%;
	position: relative;
}

caption {
  text-align: center;
  padding: calc(1.5 * var(--base-font-size));
  font-size: calc(1.25 * var(--base-font-size));
  color: #484545;
}

tr{
	display: grid;
	grid-template-columns: 1.25fr 3fr 1.8fr 1fr 1.5fr 2fr 1.25fr 2.25fr;
}

th, td{
	border-top: 1px solid rgba(0, 0, 0, 0.12);
	border-left: 1px solid rgba(0, 0, 0, 0.12);
}

.val, .head{
	text-align: left;
	text-indent: 0em;	
	font-size: var(--base-font-size);
	line-height: var(--base-font-size);
	border: none;
	padding-top: .8rem;
	padding-bottom: .8rem;
	padding-left: 7.5%;
	font-weight: 400;
	
}
	
td, .val {			
	display: table-cell;
	vertical-align: text-top;
	color: #757575;
}

tr{
	background-color: #fff;
}	

.val {			
	display: table-cell;
	vertical-align: text-top;
}	

th, .head {
	color: #5b5555;
	background-color: #f8f7f5;
	background-image: linear-gradient(#fbfafa, #f2f1f1);
	padding-top: 1.2rem;
	padding-bottom: 1.2rem;
	font-weight: 500;
	font-size: calc(1.07*var(--base-font-size));
	text-align: left;
	padding-left: 0.8rem;
}

.head{
	display:none;	
}
.val, .head {
	width: 100%;
	height: 100%;	
	border:none;
}	

.val{
	display: flex;
	align-items: center;
}		

tr.row:hover{
	background-color: #ffff99;
}

tr.row:hover div.delrow{
	display:block;
	opacity:1;
	transition:display  1.5s ease 0s; 
	-webkit-transition:display  1.5s ease 0s; 
}

tr.row:hover div.hasreply{
	display:none;
	transition: display 1.5s ease 0s; 
	-webkit-transition: display 1.5s ease 0s; 
}

tr.row:active{
	background-color: #32952f;
}	
tr.row:active div{	
	color: white !important;
	font-weight: 300;
}

.dot {
	margin: 0 10%;
	height: .5em;
	width: .5em;
	border-radius: 50%;
	border-radius: 50%;
	position :relative;
	display: inline-block;
}

.red{
	background-color: #e8061c;	
}

.green{
	background-color: #0ad903;	
}

.blue{
	background-color: #069ee8;
}

.alerttxt > h4{
	height: 2em;
	text-align: center;
	color:red;
	max-width:100%;
	font-weight: 300;
	font-size: calc(1 * var(--base-font-size));
}

dialog{
	position: fixed;
	width: 35vw;
	max-height:95vh;
	border-radius: 3px;
	padding: 1% 2% 1%;		
	border: 2px solid white;
	-webkit-box-shadow: 0 39px 57px rgba(0,0,0,.19);
	box-shadow: 0 39px 57px rgba(0,0,0,.19);
	overflow-y: hidden;
	flex-direction: column;
	justify-content: start;
	overflow-y: hidden;
	display: flex;
	z-index: 100;
}	
	
.dialog{
	background: #ffffff;
	color: #000;
	width:100%;
	max-height:95vh;
	overflow-y:hidden;
	display: flex;
	flex-direction: column;
	justify-content: start;
	overflow-y: hidden;
}

#qrwind{
	justify-content: center;
}

.dialog input[type="text"],
.dialog label, 
.dialog select,
.dialog textarea 
{
	font-size: calc(0.9 * var(--base-font-size));
	padding: calc(.6* var(--base-font-size)) calc(.7 * var(--base-font-size));
}

.close{
	opacity: 0.3;
	cursor: pointer;
	background-color: #FFFFFF;
	background-repeat: no-repeat;
	background-size: 15%;
	background-position: 100%;
	background-image: url(close.svg);
	border: none;
	height: 1.25em;
	width: 8em;
	position: absolute;
	top: 3%;
	right: 0;
	margin-right: 5%;
}

.close:hover, .qrbtn:hover{
	opacity: 1;	
}

.red_ln {
	border-color:red !important; 	
}

.founded{
	color: red;
	margin-left:.75%;
	margin-right:.75%;
	font-size: calc(1 * var(--base-font-size));
	font-weight : bold;
}

.form-sert__line {
	width: 100%;
	position: relative;
}

#spiner{
	display:none;
	width:10em;
	height:10em;
}

.reuqired__hint{
	position: relative;
	padding-left: 12px;
	height: 2.5em;
	width: 100%;
	display: inline-flex;
	align-items: center;
	background: #f45a57;
	color: #fff;
	font-size: calc(.9 * var(--base-font-size));
	line-height: calc(1 * var(--base-font-size));
	-webkit-transition: all .3s ease;
	-o-transition: all .3s ease;
	transition: all .3s ease;
}

.headqr{
	font-weight: bold;	
}
.valqr{
	color: #3e3838;
	margin-left:5%;
}

.qrwrap{
	display: flex;
	align-items:center;
	justify-content:center;
	flex-direction: column;
	min-width:250px;
	margin-top: 10%;
 }
 
.qrwraptable{
	display: flex;
	width: 100%;
	align-items: center;
	justify-content: center;
}
 
.qrtable{		
	width: 80%;
	margin-top:5em;	
	display: grid;
	grid-template-columns: 1fr 2fr;
	grid-gap: 5%;
	align-self: center;
	line-height: calc(1.35 * var(--base-font-size));
	justify-content: center;
	margin-left: 20%;
}

tr, td,
span, 
button, 
button:hover,
button:focus,
input[type="button"], 
.button,
.close:hover, 
.qrbtn:hover,
.button:hover,
.button:focus{
	cursor: pointer;
	-webkit-touch-callout : none; /* iOS Safari */
	-webkit-user-select: none; /* Safari */
	 -khtml-user-select: none; /* Konqueror HTML */
	   -moz-user-select: none; /* Old versions of Firefox */
		-ms-user-select: none; /* Internet Explorer/Edge */
			user-select: none; /* Non-prefixed version, currently
								  supported by Chrome, Edge, Opera and Firefox */

}

@media screen and (max-width:900px) 
{
	.toolpanel{
		height: 5em;
		margin:5% 0;
		flex-direction:column;
	}
	.founded{
		margin:0;
	}	
	.search, #searchvalue{
		margin:1% 0;
		width:100%;	
		position:relative;
	}
	.val{
		margin-top:10%;
		margin-left:3%;
		display:block;
		padding:0;
		position: relative;
		vertical-align :middle;
	}
	
	.hasreply{
		position:relative;
		left:0; 
		top:0;
		margin-top: 1%;
		margin-left: 80%;
	}
	
	dialog{
		width:45vw;		
		height: 95vh;
		margin-top:3%;
	}
	
	th {
		display: none;
	}
	
	tr{
		margin-top: 5%;
		display: block;
		padding:0;
		border: none;
	}
	
	table{
		height: 100%;
	}
	
	td {	
		padding:0;
		color: #757575;
		background-color: #fff;
		display: grid;
		grid-template-columns: 35% auto;
	}
	
	.head{
		display: block;	
		color: #5b5555;
		border-right: 1px solid rgba(0, 0, 0, 0.12);
		background-color: #f8f7f5;
		background-image: linear-gradient(#fbfafa, #f2f1f1);
	}	
	 
	.qrtable{	
		margin:1% 0;
		position:relative;	
	}
	.close{
		top: 1%;
	}
	.dot {
		margin: 0 3%;
		position:relative;	
	}
}