@charset "utf-8";
/*Eric Meyer's*/
/***************************************************** reserve *****************************************************/
#reservebox{ padding: 0 30px 30px 30px; margin: 150px auto 60px; background: #fff; border-radius: 10px;}
#reservebox .subject{ margin-bottom: 15px; font-family: "YekanH"; font-size: 20px; line-height: 33px;}
#reservebox .subject i{ margin-left: 5px; color: #d89c2c;}
#reservebox .each_sec{ padding: 0 30px 40px 0; border-right: 1px solid #eee; position: relative;}
.each_sec .cir{ width: 40px; height: 50px; line-height: 50px; background: #fff; color: #d89c2c; text-align: center; position: absolute; top: -8px; right: -20px; font-family: "YekanH"; font-size: 28px;}
.each_sec .ex_txt{ margin-top: 10px; color: gray; font-size: 13px; line-height: 24px;}
.each_sec .ex_txt i{ margin-left: 5px; color: #d89c2c;}
.each_sec .ex_txt span{ color: #d89c2c; font-family: "YekanB";}

.reserve{ width: 100%;}
.reserve .date{ justify-content: flex-start;}
.reserve .date > div{ width: 33.33%; max-width: 350px; text-align: right;}
.reserve .date > div span{ width: 45px; display: inline-block;}
.reserve input.shamsi{ width: calc(100% - 60px); height: 45px; padding: 0 5px; border: 1px solid #eee;}
.gridbox{ display: flex; flex-wrap: wrap;}
.gridbox label{ max-width: 170px; width: 100%; min-height: 112px; padding: 5px 10px 33px 10px; margin: 0 0 5px 5px; background: #fff; border: 1px solid #eee; display: inline-block; cursor: pointer; position: relative; transition: all linear .2s;}
.gridbox label.active,.gridbox label:hover{ border-color: #d89c2c; background: #fffbf4}
.gridbox label i{ margin-left: 5px; color: #d89c2c; vertical-align: middle;}
.gridbox label p{ font-size: 13px; line-height: 21px;}
.gridbox label b{ font-size: 14px; position: absolute; bottom: -1px; right: 10px; display: block;}
.gridbox label .num_select{ margin-right: 3px; color: #d89c2c; font-family: "yekanB"; font-size: 13px; display: inline-block;}
.reserve .number{ width: 100px; height: 45px; padding: 5px 10px; margin-bottom: 20px; background: #fff; border: 1px solid #eee;}
#reservebox select option{ font-family: tahoma;}
.reserve button{ margin: 0; background: #0BA67A;}
#reservebox .more{ background: #0BA67A;}
#reservebox .edit{ background: #a77826;}

.each_room{ width: calc(33.33% - 10px); padding-bottom: 36px; margin: 0 0 15px 15px; border: 1px solid #ddd; border-radius: 25px 0 25px 0; overflow: hidden; transition: all linear .2s;  position: relative;}
.each_room:last-child,.each_room:nth-child(3n){ margin-left: 0;}
.each_room.active{ background: #E3FFF7; border-color: #0BA67A;}
.each_room.deactive{ filter: grayscale(100%); color: gray;}
.each_room.deactive label{ padding: 0; font-family: YekanB; font-size: 20px; text-align: left; border: none; cursor: auto;}
.each_room.deactive label:hover{ background: transparent; color: gray; }
.each_room.deactive h2,.res_mode .each_room h2,.res_mode .each_room .cap{ width: 100%;}
.each_room .bot_box{ padding: 10px;}
.bot_box > div:first-child{ margin-bottom: 10px;}
.bot_box > div:last-child{ position: absolute; bottom: 10px; left: 10px; right: 10px;}
.each_room:last-child{ margin-right: 0;}
.each_room img{ width: 100%; height: 135px; object-fit: cover; display: block ;}
.each_room h2{ width: calc(100% - 145px); font-family: "YekanB"; font-size: 19px;}
.each_room .txt{ margin: 10px 0; font-size: 14px; line-height: 25px;}
.each_room .txt a{ color: #047bc2; display: inline-block;}
.each_room .txt a:hover{ opacity: 0.6;}
.each_room .discount{ font-size: 15px; text-align: left; direction: ltr; text-decoration: line-through; color: gray;}
.discount i{ margin-right: 2px; font-size: 8px; vertical-align: middle;}
.discount span{ width: 25px; height: 25px; line-height: 25px; margin-right: 5px; background: #E35255; color: #fff; font-size: 13px; border-radius: 0 7px 0 7px; text-align: center; display: inline-block;}
.each_room .cost{ width: 140px; margin-right: auto; text-align: left;}
.each_room .final_cost { font-size: 19px;}
.each_room .final_cost span{ font-size: 13px;}
.each_room .cap{ width: calc(100% - 90px); font-size: 13px; line-height: 23px;}
.each_room label{ width: 80px; padding: 2px 9px 0 9px; margin-right: auto; color: #0BA67A; font-size: 13px; text-align: center; border: 1px dashed #0BA67A; border-radius: 5px; cursor: pointer; display: block; transition: all linear 0.2s;}
.each_room label:hover,.each_room.active label{ background: #0BA67A; color: #fff;}
.txt2{ margin-bottom: 10px;}
.pad20bt{ padding-bottom: 20px !important;}
.pad0bt{ padding-bottom: 0 !important;}
.flex_just{ justify-content: flex-start;}
@media only screen and (max-width: 1024px) {
	.each_room{ width: calc(50% - 7.5px);}
	.each_room:nth-child(3n){ margin-left: 15px;}	
	.each_room:nth-child(2n){ margin-left: 0;}	
}
@media only screen and (max-width: 650px) {
	.each_room{ width: 100%; margin: 0 0 15px !important;}
	.each_room:last-child{ margin-bottom: 0 !important;}
	.reserve .date > div{ width: 100%; margin: 5px 0;}
}

.noexist{ margin-top: 40px; font-family: "YekanB"; font-size: 20px; line-height: 35px;}
.noexist i{ color: #d89c2c; font-size: 30px;}
.services label input,.each_room label input{ position: absolute; visibility: hidden; opacity: 0;}
.tb_style{ width: 100%; margin: 20px 0 40px;}
.tb_style tr td,.tb_style tr td{ padding: 5px; text-align: center; border: 1px solid #eee;}
.tb_style tr:first-child,.tb_style tr:first-child{ background: #58748c; font-family: "YekanB"; color: #fff; text-shadow: 1px 1px 0px rgba(99,99,99,0.8);}
.tb_style select,tb_style select{ padding: 5px; background: #fff; border: 1px solid #eee}

#factor td:first-child,#your_serv td:first-child{ width: 60px;}
#factor td:nth-child(2),#your_serv td:nth-child(2){ text-align: right;}
#factor td:nth-child(3),#your_serv td:nth-child(3){ width: 220px;}
#factor td:nth-child(4),#your_serv td:nth-child(4){ width: 75px;}
#factor td:nth-child(5),#factor td:nth-child(6),#your_serv td:nth-child(5),#your_serv td:nth-child(6){ width: 130px;}

.services table .deactive{ transition: all linear .2s;}
.services table .deactive:hover{ background: #fffbf4; cursor: pointer;}
.services table .deactive i{ padding: 10px 5px; color: #d89c2c;}
.services table .no_feild td:first-child,#your_serv .no_feild td:first-child{ text-align: left;}
.no_feild{ background-color: #fafafa;}
#totalPrice{ text-align: center !important}
#totalPrice span{ margin-right: 5px; font-family: "YekanB"; display: none;}
@media only screen and (max-width: 600px) {
	.tb_style td,.tb_style tr{ width: 100% !important; text-align: center !important; display: block;}
	.tb_style tr:first-child{ display: none;}	
	.tb_style tr{ margin-bottom: 30px; background: #f4f4f4;}
	.tb_style .no_feild{ margin-bottom: 10px;}
	.tb_style tr td::before,.tb_style tr td::after{ margin-left: 5px; font-family: "YekanB"; font-size: 18px; color: #58748c;}
	.tb_style tr td::after{ margin: 0 5px 0 0;}
	.tb_style tr td:nth-child(1){ background: #58748c !important; color: #fff; font-family: "YekanB";}
	.services table tr td:nth-child(1):after{ content: "حذف"; color: #fff;}
	.services table tr td:nth-child(2):before{ content: "خدمات:";}
	.services table tr td:nth-child(3):before{ content: "تاریخ:";}
	.services table tr td:nth-child(4):before{ content: "تعداد:";}
	.services table tr td:nth-child(5):before{ content: "مبلغ واحد (ریال):";}
	.services table tr td:nth-child(6):before{ content: "مبلغ کل (ریال)";}
	.services table .no_feild td::before,.services table .no_feild td::after{ display: none;}
	.services table .no_feild td:first-child,#your_serv .no_feild td:first-child{ text-align: center;}
	#totalPrice span{ display: inline-block;}

	#your_serv table tr td:nth-child(1):before{ content: "ردیف"; color: #fff;}
	#your_serv table tr td:nth-child(2):before{ content: "خدمات:"; }
	#your_serv table tr td:nth-child(3):before{ content: "تاریخ:";}
	#your_serv table tr td:nth-child(4):before{ content: "تعداد:";}
	#your_serv table tr td:nth-child(5):before{ content: "مبلغ واحد (ریال):";}
	#your_serv table tr td:nth-child(6):before{ content: "مبلغ کل (ریال):";}
	#your_serv table .no_feild td::before{ display: none;}
}


.passenger{ padding-bottom: 30px; margin: 20px auto; display: grid; grid-template-columns: auto auto auto auto auto; gap: 10px; border-bottom: 1px solid #ddd;}
.passenger:last-of-type{ border-bottom: none;}
.passenger > div span{ padding: 0 5px 3px 0; font-size: 15px; text-align: right; display: block;}
.passenger input,.passenger select{ width: 100%; height: 45px; padding: 0 5px; background: #fff; font-size: 15px; border: 1px solid #eee;}
.passenger .birth select:first-child{ width: 25%;}
.passenger .birth select:nth-child(2){ width:45%; margin: 0 1%;}
.passenger .birth select:last-child{ width: 28%;}
#mine{ max-width: max-content; padding: 5px 15px; color: #333; font-size: 15px; border: 1px dashed #ccc; display: block; cursor: pointer; transition: all linear 0.2s;}
#mine.active,#mine:hover{ background: #E3FFF7; border-color: #0BA67A;}
.res_mode.active{ cursor: default !important;}
.res_mode.active input{ background: #0BA67A; border-color: #0BA67A;}

#myinfo{ margin-bottom: 30px;}
#myinfo .passenger{ padding-bottom: 0;}
#list_of_pass{ display: none;}
@media only screen and (max-width: 850px) {
	.passenger{ grid-template-columns: auto auto;}
}
@media only screen and (max-width: 400px) {
	.passenger{ grid-template-columns: auto;}
}

#level{ max-width: 800px; width: 95%; padding: 0; margin: 0 auto 60px; font-size: 0;}
#level li{ width: 50%; height: 5px; background: #eaeaea; color: #999; font-size: 14px; font-family: YekanB; display: inline-block; position: relative; vertical-align: top;}
#level li span{ width: 25px; height: 25px; line-height: 27px; background: #eaeaea; position: absolute; top: -12px; right: -2px;  text-align: center; border-radius: 100%; display: inline-block;} 
#level li b{ width: 90px; margin-top: 15px; line-height: 20px; position: absolute; right: -33px; text-align: center; display: inline-block;}
#level li.active{ background:#58748c; color: #333;}
#level li.active span{ background: #58748c; color: #fff;}
#level li:last-child{ width: 0; background: none; white-space: nowrap;}
@media only screen and (max-width:768px){
	#level li b{ width: 77px; font-size: 12px; left: 27px;}
}
@media only screen and (max-width:320px){
	#level li b{ width: inherit; left: 15px;}
}

.bt_box .more{ margin: 0 5px 0;}
.bt_box .more i{ position: relative; top: -2px;}
.bt_box .green{ background: #0BA67A;}
@media only screen and (max-width:550px){
	.bt_box .more{ max-width: 250px; width: 100%; margin: 5px auto; }
}