@font-face{
	font-family: samim;
	src: url('../fonts/Samim.woff');
}
@font-face{
	font-family: samim;
	src: url('../fonts/Samim-Bold.woff');
	font-weight: bold;
}

body{
	font-family: samim;
	font-size: 14px;
	direction: rtl;
	text-align: right;
	background-color: rgb(255.255.255);
	background-attachment: fixed;
	margin: 0px;
	height: 100vh;
}

main{
	height: 100%;
}

.navbar{
	background-color: rgb(44, 62, 80) !important;
}

.dropdown-menu{
	text-align: right;
}

#upload{
    display:none
}

article{
	position: relative;
    height: 92%;
    top: 8%;
    overflow-y: auto;
    overflow-y: overlay;
}

.articleV{
	height: 1153px;
	box-sizing: border-box;
	margin: 1%;
	margin-top: 0px;
	margin-bottom: 5%;
}

#dayPlaceV{
    height: 35px;
}

#dayNamePlaceV{
    width: 98%;
    height: 35px;
    position: fixed;
    z-index: 99;		
}

#dayNameClocksV{
    width: 5.2%;
    height: 100%;
    float: right;
    background: white;
}

#dayNameArticleV{
    width: 90%;
    height: 100%;
    float: right;
  	border-bottom: 1px solid #95a5a6;
    box-sizing: border-box;
    border-top: 1px solid #95a5a6;
    box-sizing: border-box;
}

.dayNameV{
	width: 14.285%;
	height: 100%;
	text-align: center;
	float: right;
	box-sizing: border-box;
	background: white;
}

#dayNameV0{
	background: #ecf0f1;
}

#dayNameV2{
	background: #ecf0f1;
}

#dayNameV4{
	background: #ecf0f1;
}

#dayNameV6{
	background: #ecf0f1;	
}

.articleH{
	width:100%;
	height: 100%; 
	box-sizing: border-box;
}

.dayNamePlaceH{
	width: 5%; 
	height: 100%; 
	float: right;
}

#dayNamePlaceH{
	width: 5%;
	height: 92%;
	position: fixed;
    z-index: 9;
    border-left: 1px solid #95a5a6;
    background: white;
}

#dayNameTopH{
	height: 4%;
	box-sizing: border-box;
}

#dayNameArticleH{
	height: 96%;
}

.dayNameH{
	width: 100%;
	height: 14.285%;
	top: 60%;
	border-top: 1px solid #95a5a6;
	box-sizing: border-box;
	text-align: start;
	padding-right: 30%;
}

#writeDayNameH0{
	position: absolute;
	top: 10.6%;
	transform: translateY(-50%);
}

#writeDayNameH1{
	position: absolute;
	top: 24.2%;
	transform: translateY(-50%);
}

#writeDayNameH2{
	position: absolute;
	top: 37.8%;
	transform: translateY(-50%);
}

#writeDayNameH3{
	position: absolute;
	top: 51.8%;
	transform: translateY(-50%);
}

#writeDayNameH4{
	position: absolute;
	top: 65.1%;
	transform: translateY(-50%);
}

#writeDayNameH5{
	position: absolute;
	top: 79%;
	transform: translateY(-50%);
}

#writeDayNameH6{
	position: absolute;
	top: 92.7%;
	transform: translateY(-50%);
}

.writeDayNameV{
	position: relative;
    top: 15%;
}

#dayNameH0{
	background: #ecf0f1;
}

#dayNameH2{
	background: #ecf0f1;
}

#dayNameH4{
	background: #ecf0f1;
}

#dayNameH6{
	background: #ecf0f1;
}

#listDominant{
	width: 90%;
	float: right;
	position: relative;
	box-sizing: border-box;
}

#listDominantH{
	width: 95%;
	height: 96%;
	float: right;
	position: relative;
	box-sizing: border-box;
}

#test2{
	width: 200px;
	height: 200px;
	z-index: 100;
	float: top;
	border: 1px solid blue;
	box-sizing: border-box;
}

.listOnclickA{
	width: 100%;
	height: 24px;
	border-top: #dadce0 1px solid; 
	box-sizing: border-box;
	float: right;	
}

.listOnclickAH{
	width: 2.084%;
	height: 100%;
	border-right: #dadce0 1px solid; 
	box-sizing: border-box;
	float: right;	
}

#t0{
border: 0px;
}

.listOnclickB{
	width: 100%;
	height: 24px;
	box-sizing: border-box;
	float: right;
}

.listOnclickBH{
	width: 2.083%;
	height: 100%;
	box-sizing: border-box;
	float: right;
}

.columns{
	position:absolute;
	width: 14.285%;
	height: 100%;
	z-index: -1;
	border-right: 1px solid #95a5a6;
	box-sizing: border-box;
}

.columnsH{
	width:  100%;
	height: 14.285%;
	box-sizing: border-box;
	z-index: -1;
	border-top: 1px solid #95a5a6;
}

#columnSa{
	background: #ecf0f1;
}

#columnSaH{
	background: #ecf0f1;
}

#columnSu{
	margin-right: 14.285%;
}

#columnMo{
	margin-right: 28.571%;
	background: #ecf0f1;
}

#columnMoH{
	background: #ecf0f1;
}

#columnTu{
	margin-right: 42.857%;
}

#columnWe{
	margin-right: 57.142%;
	background: #ecf0f1;
}

#columnWeH{
	background: #ecf0f1;
}

#columnTh{
	margin-right: 71.428%;
}

#columnFr{
	margin-right: 85.7142%;
	background: #ecf0f1;
	border-left: 1px solid #95a5a6;
}

#columnFrH{
	background: #ecf0f1;
}

.tasks{
	/*white-space: nowrap;*/
	position: absolute;
	width: 96%;
	overflow: hidden;
  	text-overflow: ellipsis; 
	border: 1px solid black;
	border-radius: .2rem;
	box-sizing: border-box;
	float: top;
	padding-right: 3px;
	z-index: 4;
	text-align: center;
}

#taskContentH{
	position: absolute;
    top: 51%;
    transform: translateY(-50%);
    width: 100%;
}

#taskContentV{
	position: absolute;
    top: 51%;
    transform: translateY(-50%);
    width: 100%;
}

.mmsF1c::after {
    content: '';
    border-bottom: #dadce0 1px solid;
    position: absolute;
    z-index: 3;
    width: 8px;
    margin-top: -1px;
    pointer-events: none;
}

.mmsF1c {
    height: 48px;
}

.mmsF1cH {
    height: 100%;
    border-right: #dadce0 1px solid;
    width: 4.169%;
    float: right;
    box-sizing: border-box;
}
	
#f0{
	border: 0px;
}

#f23{
	width: 4.1%;
}

#writeClocksDiv{
	width:4.5%;
	box-sizing: border-box;
	float: right;
	padding-top: 1px;
}

#writeClocksDivH{
	width: 95%;
	height: 3%;
	box-sizing: border-box;
	float: right;
}

.clock{
	padding-left: 3px;
	text-align: left;
	position: relative;
	height: 48px;
	box-sizing: border-box;
}

.clockH{
	padding-top: 6px;
	text-align: center;
	width: 4.167%;
	box-sizing: border-box;
	float: right;
	height: 100%;
}

.writeclocks{
	font-size: 11px;
	color: #70757a;
	display: block;
    position: relative;
    top: -8px;
}

#flashClockDisplay{
	width: 0.7%;
	border-left: #dadce0 1px solid;
	box-sizing: border-box;
	float: right;
	padding-top: 1px;

}

#flashClockDisplayH{
	width: 95%;
	height: 1%;
	border-bottom: #dadce0 1px solid;
	box-sizing: border-box;
	float: right;
	padding-left: 1px;
}

.cursor{
	cursor:pointer;
}

#pageTitle{
	color: white;
}

#myModal {
  	display: none;
  	position: fixed;
  	padding-top: 100px;
  	left: 0;
  	top: 0;
  	z-index: 99999999;
}

.modalTitle{
	position: absolute;
	right: 1rem;
}

#modal-content {
  	position: relative;
  	margin: auto;
  	padding: 0;
  	border: 1px solid #888;
}

#modal-header{
	border: 0px;
}

.close{
	margin-right: 97% !important;
}

.trash{
	display: none;
	position: absolute;
	left: 44px;
	padding: 0px 9.5px !important;
	font-sizE: 16px;
	background-image:url('../images/trash.png');
	cursor: pointer;
}

#modal-body {
	padding: 0px 16px;
}

#example-time-input{
	width: 163px;
}

.selectDayGroup{
	display: inline-block;
	width: 100%;
	margin-bottom: 0rem !important;
}

.checkDay{
	float: right;
	display: inline-block;
	width: 14.2%;
	margin-right:0px;
}

.inputDay{
	margin-right: 4px !important;
}

#taskColor{
	margin-bottom: 0px;
}

.taskLC{
	padding-top: 0px;
}

#modal-footer {
 	padding: 7px 16px;
  	border: 0px;
}

.btn{
	padding: 2px 16px;
	margin-bottom: 9px;	
}

#changeTask{
	display: none;
	margin-right: 0px;
	margin-top: 0.8rem;
}

#aboutTitle{
	position: absolute;
}

#aboutModal{
		padding-top: 100px;
	}

#modal-header,#aboutModalHeader,#alarmModalHeader{
	justify-content: center;
}

#aboutModalBody,#alarmModalBody{
	text-align: center;
}

#aboutModalFooter,#alarmModalFooter{
	justify-content: center;
}

.closeAlarm{
	margin-right: 97% !important;
}

#alarmModalBody{
	padding-top: 0px;
}

#alarmModalFooter{
	border: 0px;
	padding-bottom: 0px;
}

#alarmModal2{
	z-index: 99999;
}

#changeAlarm{
	display: none;
	margin-right: 0px;
}

.modal-backdrop.fade.show{
	z-index: 1051;
}

.alarms{
	overflow: hidden;
  	text-overflow: ellipsis; 
	border-bottom: 1px solid #dee2e6;
	box-sizing: border-box;
	height:50px;
	padding: 2px;
}

.alarmTitle,.alarmTime{
	font-size: 16px;
}

.alarmsRunning{
	overflow: hidden;
  	text-overflow: ellipsis; 
	border-top: 1px solid #dee2e6;
	box-sizing: border-box;
	padding: 2px;
}

#runningModalHeader,#runningModalFooter{
	border: 0px;
}

#removeAlarm{
	margin-right: 0px;
}

#modal-footer,#runningModalHeader,#alarmModalFooter,#runningModalFooter{
	display: initial !important;
}

@media screen and (max-width: 700px)
{
	.articleH{
  		width: 700px;
	}

	article{
	  	overflow-x: auto;
	  	overflow-x: overlay;
	}

	.dayNameH{
		padding-right: 5%;
	}

	#flashClockDisplay{
		width: 1.5%;
	}

	#dayNameClocksV{
		width: 6%;
	}

	#dayNamePlaceH {
		width: 35px;
	}
}
 
@media screen and (max-height: 862px)
{	
	article,#dayNamePlaceH{
		height: 91%;
		top: 9%;
	}
}

@media screen and (max-height: 730px)
{	
	article,#dayNamePlaceH{
		height: 90%;
		top: 10%;
	}
}

@media screen and (max-height: 630px)
{	
	article,#dayNamePlaceH{
		height: 89%;
		top: 11%;
	}
}

@media screen and (max-height: 580px)
{	
	article,#dayNamePlaceH{
		height: 88%;
		top: 12%;
	}

	#aboutModal{
		padding-top: 0px;
	}
}

@media screen and (max-height: 510px)
{	
	article,#dayNamePlaceH{
		height: 87%;
		top: 13%;
	}
}

@media screen and (max-height: 458px)
{	
	article,#dayNamePlaceH{
		height: 86%;
		top: 14%;
	}
}

@media screen and (max-height: 424px)
{	
	article,#dayNamePlaceH{
		height: 85%;
		top: 15%;
	}

	#myModal{
		padding-top: 0px !important;
	}
}

@media screen and (max-height: 383px)
{	
	article,#dayNamePlaceH{
		height: 84%;
		top: 16%;
	}

	.modal-dialog {
    	margin: 0.3rem auto;
	}
}

@media screen and (max-height: 359px)
{	
	article,#dayNamePlaceH{
		height: 83%;
		top: 17%;
	}
}

@media screen and (max-height: 333px)
{	
	article,#dayNamePlaceH{
		height: 82%;
		top: 18%;
	}
}

@media screen and (max-height: 319px)
{	
	article,#dayNamePlaceH{
		height: 81%;
		top: 19%;
	}
}

@media screen and (max-height: 302px)
{	
	article,#dayNamePlaceH{
		height: 80%;
		top: 20%;
	}
}
#date{
    width: 180px;
    position: fixed;
    top: 8px;
    left: 55%;
    transform: translate(-50%,0px);
    z-index: 2000;
    font-size: 100%;
}
@media screen and (max-width: 500px)
{	
	.tasks{
	    font-size: 11px;
	}
}