*{margin:0px; padding:0px;}
@font-face {
	font-family: 'B-NAZANIN';
	src: url('../fonts/Vazir.ttf')  format('truetype');
}
*{
	font-family: B-NAZANIN, 'Segoe UI', Tahoma, sans-serif;
 }
#div-body{
	width:600px;
	left:50%;
	position:relative;
	transform:translate(-50%,0px);
	margin-top:50px;
	border:2px solid #000000;
	padding:10px 50px;
	background-image: url(../images/bg-header-blue.png);
	background-repeat: no-repeat;
	background-size: contain;
}

#div-body #div-title #div-t-l{
	width:280px;
	display:inline-block;
	margin-right:20px;
}
#div-body #div-title #div-t-l div{
	width:100%;
	text-align:center;
	border:1px solid #1A120B;
	border-right:5px solid #102DF0;
	margin-top:5px;
	background-color:white;
	
}
#div-body #div-title #div-t-l div p{
	width:60px;
	display:inline-block;
	direction:rtl;
}
#div-body #div-title #div-t-l div input{
	width:180px;
	display:inline-block;
	padding:5px 10px;
	text-align:right;
	font-weight:bold;
	border:0px;
	background-color: white;
}


#div-body #div-title #div-t-r{
	width:295px;
	display:inline-block;
	color:white;
}

#div-body #div-title #div-t-r p{
	width:100%;
	text-align:center;
	font-size:15px;
	padding:10px 0px;
	font-weight:bold;
}
#div-body .table-main{
	width:600px;
	left:50%;
	position:relative;
	transform:translate(-50%,0px);
	margin-top:20px;
	direction:rtl;
}
#div-body .table-main th{
	padding:10px 0px;
	background-color:#102DF0;
	color:white;
	padding: 10px 5px;
}



#div-body .table-main td{
	text-align:center;
	border:1px solid black;
	background-color: white;
}
#div-body .table-main .input{
	width:100%;
	padding:5px 0px;
	border:0px;
	text-align:center;
	font-weight:bold;
	font-size:15px;
}
#div-body .table-main button{
	width:100%;
	background-color:white;
	border:0px;
	display:black;
	height:100%;
}
#div-body .table-main #input-text-max{
	background-color:#102DF0;
	color:white;
	padding-right:10px;
}

#div-body .table-main button:hover{
	background-color:#102DF0;
	color:white;
}
#div-body #p-m-f{
	width:295px;
	display:inline-block;
	text-align:center;
	margin:50px 0px;
	font-weight:bold;
	direction:rtl;
}
#div-body #p-m-kh{
	width:295px;
	display:inline-block;
	text-align:center;
	margin:50px 0px;
	font-weight:bold;
	direction:rtl;
}
#div-body #input-text-max{
	width:100%;
	padding:5px 0px;
	border:0px;
	text-align:right;
	font-weight:bold;
}
#div-body #div-footer{
	width:100%;
	text-align:center;
}

#div-body #div-footer .p-footer-1{
	width:195px;
	display:inline-block;
	text-align:center;
	margin:5px 0px;
	font-weight:bold;
}
#div-body #div-footer .p-footer-2{
	width:395px;
	display:inline-block;
	text-align:center;
	margin:5px 0px;
	font-weight:bold;
}
#btn-top{
	padding:10px 20px;
	border:0px;
	position:fixed;
	top:20px;
	left:20px;
	z-index: 999;
}
#btn-top button, #btn-top a{
	padding:5px 10px;
	border:none;
	border-radius:10px;
	background:#2563eb;
	color:#fff;
	font-size:16px;
	font-family:inherit;
	cursor:pointer;
	transition:.25s;
	text-decoration: none;
}
/* مودال */
.modal {
	display: none; /* مخفی به صورت پیشفرض */
	position: absolute;
	top: 0;
	left: 0;
	width: 100%;
	height: 100%;
	background: rgba(0,0,0,0.5);
	justify-content: center;
	align-items: center;
	z-index: 1000;
}

.modal.active {
	display: flex;
}

.modal-content {
	background: #fff;
	border-radius: 10px;
	direction: rtl;
	overflow-y: auto;
	padding: 20px;
}
.cafenet-modal{

	max-width:600px;
	border-radius:18px;
	overflow:hidden;

}

.modal-info{

	background:#f4f8ff;
	border-right:4px solid #2563eb;
	padding:15px;
	margin-bottom:25px;
	border-radius:10px;

}

.modal-info strong{

	display:block;
	margin-bottom:8px;
	color:#2563eb;

}

.modal-info p{

	color:#555;
	line-height:1.9;

}

.modal-body label{

	display:block;
	margin:18px 0 8px;
	font-weight:600;
	color:#333;

}

.modal-body input[type=text]{

	width:92%;
	height:48px;
	border:1px solid #ddd;
	border-radius:10px;
	padding:0 15px;
	font-family:inherit;
	font-size:15px;
	transition:.25s;

}

.modal-body input[type=text]:focus{

	border-color:#2563eb;
	outline:none;
	box-shadow:0 0 0 4px rgba(37,99,235,.15);

}

.theme-list{

	display:flex;
	flex-wrap:wrap;
	gap:12px;
	margin-top:10px;

}

.theme-item{

	display:flex;
	align-items:center;
	gap:8px;
	cursor:pointer;
	border:1px solid #ddd;
	border-radius:10px;
	padding:10px 15px;
	transition:.2s;

}

.theme-item:hover{

	background:#f8f8f8;
	border-color:#2563eb;

}

.theme-item input{

	display:none;

}

.theme-item input:checked + .theme-color{

	transform:scale(1.15);
	box-shadow:0 0 0 4px rgba(37,99,235,.18);

}

.theme-color{

	width:24px;
	height:24px;
	border-radius:50%;
	border:2px solid #fff;
	box-shadow:0 0 0 1px #ccc;
	transition:.2s;

}

.modal-body button{

	width:100%;
	margin-top:30px;
	height:52px;
	border:none;
	border-radius:10px;
	background:#2563eb;
	color:#fff;
	font-size:16px;
	font-family:inherit;
	cursor:pointer;
	transition:.25s;

}

.modal-body button:hover{

	background:#1d4ed8;

}

/* green */
body.pink #div-body{
	background-image: url(../images/bg-header-pink.png);
}
body.pink #div-body #div-title #div-t-l div{
	border-right:5px solid pink;
}
body.pink #div-body .table-main th 
,body.pink #div-body .table-main #input-text-max
,body.pink #div-body .table-main button:hover
,body.pink #btn-top button,body.pink #btn-top a{
	background-color:pink;
}

/* green */
body.yellow #div-body{
	background-image: url(../images/bg-header-yellow.png);
}
body.yellow #div-body #div-title #div-t-l div{
	border-right:5px solid yellow;
}
body.yellow #div-body .table-main th 
,body.yellow #div-body .table-main #input-text-max
,body.yellow #div-body .table-main button:hover
,body.yellow #btn-top button,body.yellow #btn-top a{
	background-color:rgb(216, 213, 30)
}

/* green */
body.green #div-body{
	background-image: url(../images/bg-header-green.png);
}
body.green #div-body #div-title #div-t-l div{
	border-right:5px solid green;
}
body.green #div-body .table-main th 
,body.green #div-body .table-main #input-text-max
,body.green #div-body .table-main button:hover
,body.green #btn-top button,body.green #btn-top a{
	background-color:green;
}

/* blue */
body.blue #div-body{
	background-image: url(../images/bg-header-blue.png);
}
body.blue #div-body #div-title #div-t-l div{
	border-right:5px solid blue;
}
body.blue #div-body .table-main th 
,body.blue #div-body .table-main #input-text-max
,body.blue #div-body .table-main button:hover
,body.blue #btn-top button,body.blue #btn-top a{
	background-color:blue;
}

/* Red */
body.red #div-body{
	background-image: url(../images/bg-header-red.png);
}
body.red #div-body #div-title #div-t-l div{
	border-right:5px solid red;
}
body.red #div-body .table-main th 
,body.red #div-body .table-main #input-text-max
,body.red #div-body .table-main button:hover
,body.red #btn-top button,body.red #btn-top a{
	background-color:red;
	
}