@font-face { font-family: 'iransans'; src: url( '../fonts/iransans.eot' ); src: url( '../fonts/iransans.eot?#iefix' ) format("eot"), url( '../fonts/iransans.woff' ) format("woff"), url( '../fonts/iransans.ttf' ) format("truetype"); font-style: normal; font-display: swap; }
*:focus { outline: 0 }
::placeholder { color: rgba(255,255,255,.3); font-size: 13px; }
a { color: #777; text-decoration: none }

.donate { color: #ff6997!important; }
.copy:active { background-color: #08ddc1; }

.side-title input::selection, .side-title span::selection, .side-title span b::selection, .clock .cpos input::selection, .year-picker input::selection { background: #e74c3c!important; color: #fff; }
.side-title { height: 190px; background: url( '../images/bg-timestamp.jpg' ) repeat-x center top; text-align: center; padding-top: 36px; }
.side-title input { background: transparent; border: none; width: 100%; color: #fff; font-family: arial; font-size: 44px; text-align: center; display: block; direction: ltr; letter-spacing: .8px; transition: .1s }
.side-title input:focus { background: rgba(255,255,255,.1); }
.side-title strong { color: #fff; padding-top: 10px; font-size: 20px; display: block; font-weight: normal; }
.side-title span { color: #888da8; font-family: arial; font-size: 13px; display: block; margin: 10px 0 20px; direction: ltr; letter-spacing: 2.5px; }
.side-title span b { font-weight: normal; }
.side-title:before { content: "قابل ویرایش"; position: absolute; top: 10px; right: 19px; letter-spacing: .6px; background: rgba(255, 255, 255, 0.07); color: #ffffffa6; font-size: 9px; padding: 1px 6px; line-height: 18px; border-radius: 2px; text-shadow: none; }

.clock { text-align: center; direction: ltr; padding-bottom: 6px; }
.clock .cpos { display: block; position: relative; float: left; width: 20%; margin: 18px 6.5% 0; }
.clock .cpos:after { position: absolute; content: ":"; right: -24px; top: 15px; color: #404256; font-size: 40px; }
.clock .cpos:nth-child(3):after { position: relative; content: ""; }
.clock .cpos input { width: 100%; display: block; border: none; text-align: center; padding: 9px 0 6px; font-family: 'iransans', tahoma; font-size: 26px; color: #fff; background: #404256; }
.clock .cpos strong { font-size: 12px; vertical-align: top; color: #bcbdc5; }
.side-actions { padding: 0 18px 18px; text-align: center; }
.side-actions a { display: inline-block; width: 100%; background: #f6fafc; border: 1px solid #dbe8ef; color: #04a9f4; border-radius: 3px; padding: 10px 14px; font-size: 13px; transition: .2s; }
.side-actions a:hover { background: #04a9f4; border-color: #04a9f4; color: #fff; }
.events-card { margin-top: 18px; border-radius: 3px; overflow: hidden; }
.events-head { padding: 14px 16px 12px; border-bottom: 1px solid #e6edf2; background: #fbfdfe; display: flex; justify-content: space-between; }
.events-head strong { display: block; color: #404256; font-size: 16px; margin-bottom: 3px; }
.events-head .events-date { color: #8b91a8; font-size: 12px; direction: ltr; display: inline-block; }
.events-head a.events-date:hover { color: #04a9f4; }
.events-body { padding: 14px 16px 16px; }
.events-status { color: #8b91a8; font-size: 13px; line-height: 24px; }
.events-list { margin: 0; padding: 0; list-style: none; }
.events-item { position: relative; padding: 0 16px 12px 0; margin-bottom: 12px; border-bottom: 1px solid #eef2f5; }
.events-item:last-child { margin-bottom: 0; padding-bottom: 0; border-bottom: none; }
.events-item:before { content: ""; width: 7px; height: 7px; border-radius: 50%; background: #04a9f4; position: absolute; right: 0; top: 10px; }
.events-item.holiday:before { background: #e74c3c; }
.events-title { display: block; color: #4c5367; font-size: 14px; line-height: 25px; }
.events-meta { display: block; color: #9ca3b5; font-size: 11px; margin-top: 3px; }
.events-badge { display: inline-block; margin-left: 6px; background: #edf6ff; color: #4f84c4; border-radius: 30px; padding: 1px 8px; }
.events-badge.holiday { background: #fff0ee; color: #db5c4d; }

.calendar.en .month, .calendar.en .tbl-cell { font-family: arial; }
.calendar .head .month .sleft, .calendar .head .month .sright { position: absolute; width: 32px; height: 100%; padding-top: 4px; right: 0; top: 0; background: #edf2f6 url('../images/icon-right.png') center; background-size: 26px; cursor: pointer; transition: .2s }
.calendar .head .month .sleft { background-image: url('../images/icon-left.png'); right: inherit; left: 0; top: 0; }
.calendar .head .month .sleft:hover, .calendar .head .month .sright:hover { background-color: #d2dae0; }
.calendar .head .month .edit { display: inline-block; width: 20px; height: 20px; margin-left: 5px; background: url( '../images/edit.png' ) center no-repeat; background-size: 100%; vertical-align: middle; cursor: pointer; }
.calendar .head .tabs { width: 35%; padding-right: 10px; float: right; }
.calendar .head .tabs span { display: block; background: #04a9f4; color: #fff; font-size: 13px; text-align: center; padding: 4px 0; cursor: pointer; }

.calendar .month-picker ul { overflow: hidden; }
.calendar .month-picker li { width: 33.333%; float: right; padding: 10px 0; border-bottom: 1px solid rgb(68, 70, 90); border-right: 1px solid rgb(68, 70, 90); text-align: center; cursor: pointer; }
.calendar .month-picker li.active { background: #1f212d; color: #FFF; cursor: default; }
.calendar .month-picker li:hover:not(.active) { background: rgba(255,255,255,.1); color: #FFF; }
.calendar .year-picker { text-align: center; padding: 2px 0 11px; }
.calendar .year-picker input { display: inline-block; vertical-align: middle; direction: ltr; width: 80px; height: 32px; border: 1px solid #484960; border-radius: 3px; background: #3b3d51; font-family: iransans, tahoma; text-align: center; color: #FFF; font-size: 15px; letter-spacing: 1px; }
.calendar .year-picker .save-year { display: inline-block; vertical-align: middle; width: 22px; height: 22px; margin-left: 10px; border-radius: 50px; background: url('../images/check.png') center no-repeat; background-size: 100%; cursor: pointer; }

.calendar .tbl-head:last-child { color: #e84b3c; }
.calendar.en .tbl-head:nth-child(1), .calendar.en .tbl-head:nth-child(2) { color: #e84b3c; }
.calendar.en .tbl-head:last-child { color: #888da8; }
.calendar .tbl-cell.holiday span { color: #ffc3c3; }
.calendar .tbl-cell.active span { text-shadow: none; color: #abfff4; }
.calendar .tbl-cell:last-child { border-left: none; }
.calendar .tbl-cell.holiday { background: #fff6f5; color: #e74c3c; }
.calendar .tbl-cell.active { background: #08ddc1; color: #fff; font-weight: bold; font-size: 30px; text-shadow: 0 1px 0 rgba(0,0,0,.4); }
.calendar .tbl-cell:hover:not(.active):not(.empty) { background: #f1f4f7; font-size: 20px; }
.ltr-word { direction: ltr; font-family: arial, serif; display: inline-block; background: rgb(237 242 246); padding: 1px 7px; border-radius: 15px; font-size: 14px; color: #748bd9; }
.ltr { direction: ltr; font-family: arial, serif; display: inline-block; }
.fa { font-family: iransans, tahoma; }
.footer a { color: #08ddc1; }

@media screen and ( max-width: 900px ) {

	.wrapper { width: 100%; }

}

@media screen and ( max-width: 800px ) {
	.calendar { min-height: 456px; }
	.calendar .tbl-cell { height: 60px; line-height: 60px; }
	.side-title input { font-size: 30px; }
}

@media screen and ( max-width: 600px ) {

	.calendar { min-height: 396px; }
	.calendar .tbl-cell { height: 50px; line-height: 50px; }
	.side-title input { font-size: 24px; }

}


@media screen and ( max-width: 550px ) {

	.sidebar { float: none; width: 100%; position: relative; }
	.main { float: none; width: 100%; padding-right: 0; }
	.calendar .tbl-cell { height: 70px; line-height: 70px; }

}