@charset "UTF-8";

/* CSS reset file */
* { margin: 0; padding: 0; }
html, body, div, span, applet, object, iframe, h1, h2, h3, h4, h5, h6, p, blockquote, pre, a, abbr, acronym, address, big, cite, code, del, dfn, em, img, ins, kbd, q, s, samp, small, strike, strong, sub, sup, tt, var, b, u, i, center, dl, dt, dd, ol, ul, li, fieldset, form, label, legend, table, caption, tbody, tfoot, thead, tr, th, td, article, aside, canvas, details, embed, figure, figcaption, footer, header, hgroup,  menu, nav, output, ruby, section, summary, time, mark, audio, video { margin:0; padding:0; border:0; outline:0; font-size:100%; font: inherit; vertical-align:baseline; background:transparent; }
body { line-height: 1; }

/* HTML5 display-role reset for older browsers */
article, aside, details, figcaption, figure, footer, header, hgroup, menu, nav, section { display: block; }
ol,ul {list-style:none;}
blockquote,q {quotes:none;}
blockquote:before,blockquote:after,q:before,q:after {content:'';content:none;}
:focus {outline:0;}
ins {text-decoration:none;}
del {text-decoration:line-through;}
::selection {text-shadow: none; background: #909090; color: #fff;}
.clear {margin: 0; padding: 0; clear: both; overflow: hidden; width: 0;}
.clear { clear: both; }

/* google font */
@import url('https://fonts.googleapis.com/css2?family=Heebo:wght@400;700&family=Secular+One&display=swap');


/* CSS standart */
body { direction: rtl; text-align: right; border: 0; color: #000; font-family: 'Heebo', sans-serif; margin: 0 ; padding: 0; font-size: 14px; line-height: 1.7; background: rgb(238, 238, 238); }
a { text-decoration: none; color: red; }
a:hover { border-bottom: 1px dotted #a2a2a2; }
.fullwidth { width: 100%; }
h1 { font-size: 42px; font-family: 'Secular One', sans-serif; }
h2 { font-size: 32px; font-family: 'Secular One', sans-serif;}
h3 { font-size: 24px; color: red; font-family: 'Secular One', sans-serif; }
.color-ccc { background: #ccc; }
.left { float: left; }
.right { float: right; }

/* Global Page */
#page { width: 1200px; margin: 0px auto; }
nav ul li { list-style: none; float: right; padding: 15px 12px 15px 12px; margin: 10px 5px 10px 5px; background: #F0C0CE; font-weight: bold; }
#login { float: left; padding: 15px; margin: 10px; background: #fff; color:  blue; }
#content { width: 90%; background: #FFF; padding: 5%; }
#sub-nav ul li { list-style: none; float: right; padding: 3px 10px 3px 10px; margin: 0 10px 0 0; background: blue; font-weight: bold; }
#sub-nav ul li a { color: #ffffff; }

/* Table Design */

table {border-collapse: collapse; width: 100%;}
table td, table th {border: 1px solid #ddd; padding: 8px; text-align: center;}
table tr:nth-child(even){background-color: #f2f2f2;}
table tr:hover {background-color: #ddd;}
table th {padding-top: 12px; padding-bottom: 12px; background-color: #19A7CE; color: #000; font-weight: bold; }


/* Top Line */

#topline { width: 1200px; margin: 0px auto; }
#topline img { width: 100px; float: left; margin: 10px 0 10px 0; }
#topline h1 { width: 600px; float: right; padding: 10px 0 0 0; }


/* schedule Page */

.container { max-width: 1200px; min-width: 650px; margin: 0 auto; padding: 0px; }
.chart { display: grid; border: 1px solid #cecece; position: relative; overflow: hidden; } 
.chart-row { display: grid; grid-template-columns: 50px 1fr; background-color: #f2f2f2; }
.chart-period { color:  #000; background-color:  #19A7CE !important; border-bottom: 1px solid #cecece; grid-template-columns: 50px repeat(12, 1fr); }

.chart-period > span { text-align: center; font-size: 13px; align-self: center; font-weight: bold; padding: 15px 0;  }
.chart-lines { position: absolute; height: 100%; width: 100%; background-color: transparent; grid-template-columns: 50px repeat(12, 1fr); }

.chart-lines > span { display: block;  border-left: 1px solid #ddd; }
.chart-row-item { background-color: #19A7CE; border: 1px solid #ddd; border-top: 0;  border-left: 0; padding: 20px 0;  font-size: 12px; font-weight: bold; text-align: center; color: #000; }
.chart-row-item span { writing-mode: vertical-rl; }
.chart-row-bars { list-style: none; display: grid;  padding: 15px 0; margin: 0; grid-template-columns: repeat(12, 1fr); grid-gap: 10px 0; border-bottom: 1px solid #ddd; }
.container li { font-weight: 450; text-align: center; font-size: 12px;  min-height: 12px; background-color: #f2f2f2; padding: 5px 15px;  color: #fff; overflow: hidden; position: relative; cursor: pointer; border-radius: 15px; } 

/* schedule item on bord */

ul .chart-li-1-1 { grid-column: 1/2;  background-color: #04AA6D; }
ul .chart-li-1-2 { grid-column: 1/3;  background-color: #04AA6D; }
ul .chart-li-1-3 { grid-column: 1/4;  background-color: #04AA6D; }
ul .chart-li-1-4 { grid-column: 1/5;  background-color: #04AA6D; }
ul .chart-li-1-5 { grid-column: 1/6;  background-color: #04AA6D; }
ul .chart-li-1-6 { grid-column: 1/7;  background-color: #04AA6D; }
ul .chart-li-1-7 { grid-column: 1/8;  background-color: #04AA6D; }
ul .chart-li-1-8 { grid-column: 1/9;  background-color: #04AA6D; }
ul .chart-li-1-9 { grid-column: 1/10;  background-color: #04AA6D; }
ul .chart-li-1-10 { grid-column: 1/11;  background-color: #04AA6D; }
ul .chart-li-1-11 { grid-column: 1/12;  background-color: #04AA6D; }
ul .chart-li-1-12 { grid-column: 1/13;  background-color: #04AA6D; }

ul .chart-li-2-2 { grid-column: 2/3;  background-color: #04AA6D; }
ul .chart-li-2-3 { grid-column: 2/4;  background-color: #04AA6D; }
ul .chart-li-2-4 { grid-column: 2/5;  background-color: #04AA6D; }
ul .chart-li-2-5 { grid-column: 2/6;  background-color: #04AA6D; }
ul .chart-li-2-6 { grid-column: 2/7;  background-color: #04AA6D; }
ul .chart-li-2-7 { grid-column: 2/8;  background-color: #04AA6D; }
ul .chart-li-2-8 { grid-column: 2/9;  background-color: #04AA6D; }
ul .chart-li-2-9 { grid-column: 2/10;  background-color: #04AA6D; }
ul .chart-li-2-10 { grid-column: 2/11;  background-color: #04AA6D; }
ul .chart-li-2-11 { grid-column: 2/12;  background-color: #04AA6D; }
ul .chart-li-2-12 { grid-column: 2/13;  background-color: #04AA6D; }

ul .chart-li-3-3 { grid-column: 3/4;  background-color: #04AA6D; }
ul .chart-li-3-4 { grid-column: 3/5;  background-color: #04AA6D; }
ul .chart-li-3-5 { grid-column: 3/6;  background-color: #04AA6D; }
ul .chart-li-3-6 { grid-column: 3/7;  background-color: #04AA6D; }
ul .chart-li-3-7 { grid-column: 3/8;  background-color: #04AA6D; }
ul .chart-li-3-8 { grid-column: 3/9;  background-color: #04AA6D; }
ul .chart-li-3-9 { grid-column: 3/10;  background-color: #04AA6D; }
ul .chart-li-3-10 { grid-column: 3/11;  background-color: #04AA6D; }
ul .chart-li-3-11 { grid-column: 3/12;  background-color: #04AA6D; }
ul .chart-li-3-12 { grid-column: 3/13;  background-color: #04AA6D; }

ul .chart-li-4-4 { grid-column: 4/5;  background-color: #04AA6D; }
ul .chart-li-4-5 { grid-column: 4/6;  background-color: #04AA6D; }
ul .chart-li-4-6 { grid-column: 4/7;  background-color: #04AA6D; }
ul .chart-li-4-7 { grid-column: 4/8;  background-color: #04AA6D; }
ul .chart-li-4-8 { grid-column: 4/9;  background-color: #04AA6D; }
ul .chart-li-4-9 { grid-column: 4/10;  background-color: #04AA6D; }
ul .chart-li-4-10 { grid-column: 4/11;  background-color: #04AA6D; }
ul .chart-li-4-11 { grid-column: 4/12;  background-color: #04AA6D; }
ul .chart-li-4-12 { grid-column: 4/13;  background-color: #04AA6D; }

ul .chart-li-5-5 { grid-column: 5/6;  background-color: #04AA6D; }
ul .chart-li-5-6 { grid-column: 5/7;  background-color: #04AA6D; }
ul .chart-li-5-7 { grid-column: 5/8;  background-color: #04AA6D; }
ul .chart-li-5-8 { grid-column: 5/9;  background-color: #04AA6D; }
ul .chart-li-5-9 { grid-column: 5/10;  background-color: #04AA6D; }
ul .chart-li-5-10 { grid-column: 5/11;  background-color: #04AA6D; }
ul .chart-li-5-11 { grid-column: 5/12;  background-color: #04AA6D; }
ul .chart-li-5-12 { grid-column: 5/13;  background-color: #04AA6D; }

ul .chart-li-6-6 { grid-column: 6/7;  background-color: #04AA6D; }
ul .chart-li-6-7 { grid-column: 6/8;  background-color: #04AA6D; }
ul .chart-li-6-8 { grid-column: 6/9;  background-color: #04AA6D; }
ul .chart-li-6-9 { grid-column: 6/10;  background-color: #04AA6D; }
ul .chart-li-6-10 { grid-column: 6/11;  background-color: #04AA6D; }
ul .chart-li-6-11 { grid-column: 6/12;  background-color: #04AA6D; }
ul .chart-li-6-12 { grid-column: 6/13;  background-color: #04AA6D; }

ul .chart-li-7-7 { grid-column: 7/8;  background-color: #04AA6D; }
ul .chart-li-7-8 { grid-column: 7/9;  background-color: #04AA6D; }
ul .chart-li-7-9 { grid-column: 7/10;  background-color: #04AA6D; }
ul .chart-li-7-10 { grid-column: 7/11;  background-color: #04AA6D; }
ul .chart-li-7-11 { grid-column: 7/12;  background-color: #04AA6D; }
ul .chart-li-7-12 { grid-column: 7/13;  background-color: #04AA6D; }

ul .chart-li-8-8 { grid-column: 8/9;  background-color: #04AA6D; }
ul .chart-li-8-9 { grid-column: 8/10;  background-color: #04AA6D; }
ul .chart-li-8-10 { grid-column: 8/11;  background-color: #04AA6D; }
ul .chart-li-8-11 { grid-column: 8/12;  background-color: #04AA6D; }
ul .chart-li-8-12 { grid-column: 8/13;  background-color: #04AA6D; }

ul .chart-li-9-9 { grid-column: 9/10;  background-color: #04AA6D; }
ul .chart-li-9-10 { grid-column: 9/11;  background-color: #04AA6D; }
ul .chart-li-9-11 { grid-column: 9/12;  background-color: #04AA6D; }
ul .chart-li-9-12 { grid-column: 9/13;  background-color: #04AA6D; }

ul .chart-li-10-10 { grid-column: 10/11;  background-color: #04AA6D; }
ul .chart-li-10-11 { grid-column: 10/12;  background-color: #04AA6D; }
ul .chart-li-10-12 { grid-column: 10/13;  background-color: #04AA6D; }

ul .chart-li-11-11 { grid-column: 11/12;  background-color: #04AA6D; }
ul .chart-li-11-12 { grid-column: 11/13;  background-color: #04AA6D; }

ul .chart-li-12-12 { grid-column: 12/13;  background-color: #04AA6D; }
ul .chart-li-12-1 { grid-column: 12/14;  background-color: #04AA6D; }


/* report bar */

.reportbar label { width: 14%; float: right; }
.reportbar label.small { width: 12%; float: right; }
.reportbar label.large { width: 18%; float: right; }

/* num list (homepage) */

ol.manual { list-style-type: decimal; }
ol.manual li { margin-right: 30px; }


/* Run algorithm button */

#letStart { width: 100%; display: flex; justify-content: center; align-items: center; }
#letStart ul li a { color: #ffffff; list-style: none; float: right; padding: 5px 15px 5px 15px; margin: 0 10px 0 0; background: blue; font-size: 22px; font-weight: bold; }