/*
@font-face {
    font-family: 'Uroob';
    src: url('../_img/Uroob-Regular.ttf');
    font-weight: normal;
    font-style: normal;
}*/

#home {
    font-size: 62.5%;
    text-align: center;
}

#home h1 {
    font-size: 42px;
    font-size: 4.2rem;
}

#home h2 {
    font-size: 32px;
    font-size: 3.2rem;
}

#home p {
    font-size: 24px;
    font-size: 2.4rem;
}

#home ul {
    padding: 0;
    margin: 0;
    list-style: none;
}

#home ul li {
    border: 1px solid black;
    padding: 5px;
    margin: 5px 0;
    font-size: 16px;
    font-size: 1.6rem;
}

#home ul li a {
    display: block;
    font-size: 32px;
    font-size: 3.2rem;
}

#home div.add_room {
    font-size: 32px;
    font-size: 3.2rem;
    display: block;
    margin: 0 auto 50px auto;
    padding: 0; 
}

#home div.add_room input.name_room, 
#home div.add_room input.submit {
    width: 80%;
    border: 1px solid black;
    height: 60px;
    text-align: center;
    font-size: 32px;
    font-size: 3.2rem;
    margin: 0 0 0 0;
}

#home div.checkbox {
    width: 80%;
    height: 80px;
    text-align: left;
    cursor: pointer;
    margin: 0 auto;
}

#home input[type=checkbox] + label {
    color: #cccccc;
    font-style: italic;
} 
#home input[type=checkbox]:checked + label {
    color: #000000;
    font-style: normal;
} 

#home div.add_room input[type="checkbox"] {
    display:none;
}
#home div.add_room input[type="checkbox"] + label:before {
    content:"☐";
}
#home div.add_room input:checked + label:before {
    content:"☑";
}
#home div.add_room label:hover {
    cursor: pointer;
    color: #1a0dab;
    text-decoration: underline;
}

body {
    /*background-image: url("../_img/background.png");
    background-repeat: repeat;*/
    background: white;
}

#title {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 42px;
    overflow: hidden;
}

h1.room {
    margin: 0 0px 0 32px;
    padding: 0;
    text-align: center;
}

.subject, .subject-line {
    margin-left: 92px;
    margin-right: 60px;
    border-color: #000000;
    border-style: solid;
}

.subject-line {
    height: 1px;
    border-width: 0px 0px 1px 0px;
}

.subject {
    border-width: 0px 1px 1px 1px;
    position: relative;
}

.subject .time {
    display: none;
}

.subject.take {
    border: 6px solid black;
}

.subject.ui-sortable-handle {

}

.subject .text, .subject .color {
    position: absolute;
}

.subject .text {
    font-size: 12px;
    font-size: 1.2rem;
    text-align: center;
    width: 100%;
    overflow: hidden;
    height: 100%;
}

.subject.onGoing .text {
    text-transform: uppercase;
    text-decoration: underline;
}

.subject.mine .text {
    font-weight: bold;
}

.subject .handle {
    width: 30px;
    position: absolute;
    height: 100%;
    top: 0;
    cursor: grab;
    left: 0px;
}

.subject #next-subject {
    position: absolute;
    top:0px;
    right: -55px;
    width: 40px;
    height: 40px;
    line-height: 0;
    cursor: pointer;
}

.subject #next-subject img {
    width: 100%;
    height: auto;
}

.subject:hover .handle {
    background-image: url(../_img/handle.png);
    background-repeat: repeat-y;
    background-position: left center;
}

.highlight {
    border: 1px solid red;
    font-weight: bold;
    font-size: 45px;
    background-color: lightblue;
    height: 30px;
}

.cursor {
    width: 0;
    height: 0;
    border-top: 14px solid transparent;
    border-bottom: 14px solid transparent;
    border-left: 10px solid red;
    position: absolute;
    left: 90px;
    z-index: 1000;
}

.hide {
    position: absolute;
    top:0;
    height: 100%;
    background: #FFFFFF;
}

.hide.left {
    left: 0;
    width: 67px;
}

.hide.right {
    right:0;
    width: 67px;
}


.cursor.before {
    top: -25px;
}

.cursor.after {
    bottom: -15px;
}

.progress {
    position: absolute;
    top: 0px;
    left: 0px;
    background: MistyRose;
    width: 100%;
    font-size:0;
}

#board_timeline {
    left: 0px;
    width: 100%;
    background: #FFFFFF;
    position: absolute;
}

.time {
    position: relative;
    width: 100%;
}

.line {
    border-color: #666666;
    border-style: dashed;
    border-width: 0px 0px 1px 0px;
    width: 100%;
}

.time.first .line,
.time.last .line {
    border-style: solid;
    border-color: #FF0000;
    border-width: 0px 0px 1px 0px;
    z-index: 1;
}

.time.first .value,
.time.last .value {
    color: #FF0000;
    font-weight: bold;
}

.value {
    background: #FFFFFF;
    top: 0px;
    position: absolute;
    width: 100px;
    text-align: center;
    color: #666666;
}

.action_subject {
    position: absolute;
    left: 0px;
    width: 100%;
    height: 30px;
}

.action_subject .text {
    position: absolute;
    left: 120px;
    top: 4px;
    height: 30px;
    text-align: right;
    font-weight: bold;
    width: 220px;
    font-size: 14px;
    font-size: 1.4rem;
}

.action_subject .border-left {
    border-width: 1px 0 1px 1px;
    border-color: black;
    border-style: solid;
    position: absolute;
    width: 40%;
    left: 350px;
    top: 0;
    height: 30px;
    background: white;
}

.action_subject .border-right {
    border-width: 1px 1px 1px 0;
    border-color: black;
    border-style: solid;
    position: absolute;
    width: 40%;
    right: 68px;
    top: 0;
    height: 30px;
    background: white;
}

.action_subject .input {
    position: absolute;
    left: 351px;
    top: 1px;
    height: 27px;
    border: 0;
    font-size: 14px;
    font-size: 1.4rem;
}
.action_subject .input:focus {
    outline: none;
}

.action_subject input.submit {
    position: absolute;
    right: 66px;
    width: 30px;
    border: 1px solid #1a0dab;
    height: 32px;
    color: #1a0dab;
}

#bell {
    display: none;
    position: absolute;
    cursor: pointer;
    left: 0px;
    border: 1px solid #000000;
    width: 86px;
    background: white;
    text-align: center;
}

.subject:hover .dots_menu {
    display: block;
}

.subject .dots_menu {
    display: none;
    cursor: pointer;
    background-image: url('../_img/dots.png');
    position: absolute;
    top: 2px;
    right: 1px;
    width: 27px;
    height: 27px;
}

.subject.selected .dots_menu {
    display: block;
    background-image: url('../_img/dots-selected.png');
}

.subject .dots_menu:hover {
    background-image: url('../_img/dots-selected.png');
}

.subject {
    text-align: center;
}

.subject input {
    margin: 0 auto;
    width: 80%;
    text-align: center;
}

.burger {
    display: none;
    position: absolute;
    top: 1px;
    right: 10px;
    cursor: pointer;
}

.burger > div {
    width: 5px;
    height: 5px;
    background-color: #1a0dab;
    margin: 3px 0;
}

#menu {
    position: absolute;
    background: white;
    padding: 5px;
    font-size: 14px;
    font-size: 1.4rem;
    width: 215px;
    border: 1px solid black;
}

#menu a {
    text-decoration: none;
    display: block;
    padding: 5px 0 5px 10px;
}

#menu a:hover {
    text-decoration: underline;
}

#times {
    display: none;
    text-align: right;
    position: absolute;
    z-index: 1000;
    height: 48px;
    width: 88px;
    left: 0px;
}

#times div {
    height: 46px;
    border: 1px solid black;
    background: white;
    text-align: center;
    margin-bottom: 4px;
}

#times span {
    font-weight: bold;
    color: #1a0dab;
    display: block;
}

#times span:hover {
    text-decoration: underline;
    cursor: pointer;
}

#timeditor {
    z-index: 1000;
    background: white;
    width: 150px;
    font-size: 18px;
    border: 1px solid #000000;
    padding: 3px;
    position: absolute;
}

#timeditor h1 {
    text-align: center;
    font-size: 16px;
    margin: 0;
    padding: 0;
}

#timeditor div {
    float: left;
    height: 100%;
    text-align: center;
}

#timeditor .column {
    width: 17%;
} 

#timeditor .separator {
    width: 2%;
}

#timeditor .validate {
    width: 30%;
}
#timeditor p {
    margin: 0;
    padding: 0;
}

#timeditor span {
    display: block;
    border: 1px solid #000000;
    cursor: pointer;
    margin: 2px;
}

#timeditor span.selected {
    background: #1a0dab;
    color: white;
    font-weight: bold;
}

#timeditor #validate {
    cursor: pointer;
    color: white;
    background: green;
}

#timeditor br {
    clear: both;
}

::placeholder {
    color: red;
}

.info {
    position: absolute;
    left: 0px;
    top: 42px;
    width: 100%;
    height: 50px;
}


.info .block {
    border: 1px solid black;
    height: 110px;
    background: white;
    margin: 0 68px 0 100px;
    border-radius: 10px;
}

#countdown {
    display: none;
}

.info .no_countdown #countdown_time {
    display: none;
}

.info .simple {
    text-align: center;
    font-size: 20px;
    font-size: 2.0rem;
    line-height: 110px;
}

.info .voting  {
    position: relative;
    text-align: center;
}

.info .voting .title {
    text-align: center;
    font-weight: bold;
}

.info .vote .action {
    color: #1a0dab;
    cursor: pointer;
}

.info .vote .action.selected {
    background: lightGreen;
    color: black;
}

.info .vote .action.unselected {
    background: lightGrey;
    color: silver;
    font-style: italic;
    border: 1px solid silver;
}

.info .vote .action:hover {
    text-decoration: underline;
    background: paleGreen;
    font-style: normal;
    color: #1a0dab;
    border-color: #1a0dab;
}

.info .vote {
    padding: 10px;
    font-size: 20px;
    font-size: 2.0rem;
    text-align: center;
}

.info .vote .figure {
    float: left;
    width: 50%;
    font-size: 14px;
    font-size: 1.4rem;
}
.info .vote .figure div {
    margin: 0 5px;
    border: 1px solid black;
    border-radius: 10px;
    height: 50px;
    line-height: 50px;
}

#mode {
    display:none; 
    position: absolute;
    border: 1px solid black;
    z-index: 1001;
    width: 86.4px;
    height: 46px;
    background: white;
    text-align: center;
    left: 0px;
}

#mode #change_mode {
    color: #1a0dab;
    font-weight: bold;
    cursor: pointer;
}

#mode #change_mode:hover {
    text-decoration: underline;
}

#mode #choice_mode {
    position: absolute;
    top: -1px;
    left: 90px;
    display: none;
    border: 1px solid black;
    background: white;
    width: 100px;
}

#mode #choice_mode #text {
    font-weight: bold;
}

#mode #choice_mode .change_mode {
    color: #1a0dab;
    cursor: pointer;
    font-weight: bold;
}
#mode #choice_mode .change_mode:hover {
    text-decoration: underline;
}

#mode #choice_mode #info_free,
#mode #choice_mode #info_stick,
#mode #choice_mode #info_vote {
    display: none;
}

.subject .up_down_subject {
    position: relative;
    width: 30px;
    float: left;
    display: none;
}

.subject:hover .up_down_subject {
    display: block;
}

.subject .subject_up,
.subject .subject_down {
    height: 15px;
    width: 40px;
    position: absolute;
    right: 3px;
    line-height: 0;
    cursor: pointer;
}

.subject .subject_up {
    top: -5px;
}

.subject .subject_down {
    bottom: -5px;
}

.subject .subject_up img,
.subject .subject_down img {
    width: 100%;
    height: 100%;
}

#menu_burger {
    position: absolute;
    top: 115px;
    left: 27px;
    width: 40px;
    height: 40px;
    z-index: 1000;
    text-align: center;
    cursor: pointer;
    background: url('../_img/burger.png');
}

#menu_burger:hover, #menu_burger.selected {
    background: url('../_img/burger-selected.png');
}

#menu_burger img {
    height: 100%;
    width: auto;
}

.logo {
    position: absolute;
    top: 30px;
    left: 8px;
    width: 80px;
    height: 80px;
    z-index: 100000;
    text-align: center;
}

.logo img {
    width: auto;
    height: 100%;
}

/* vertical element  */
.subject-line {margin-top: 200px;}
#board_timeline {top: 200px;}
.action_subject {top: 160px;}
#mode {top: 185px;}
#times {top: 236px;}
#bell {top: 391px;}
/* vertical element  */

@media (min-width: 1690px) {
    .action_subject .input {
        width: 75%;
    }
}
@media (min-width: 1420px) and (max-width: 1690px) {
    .action_subject .input {
        width: 70%;
    }
}
@media (min-width: 1230px) and (max-width: 1420px) {
    .action_subject .input {
        width: 65%;
    }
}
@media (min-width: 0px) and (max-width: 1230px) {
    /* vertical element  */
    .subject-line {margin-top: 240px;}
    #board_timeline {top: 240px;}

    .action_subject {top: 160px;}
    #mode {top: 161px;}
    #times {top: 212px;}
    #bell {top: 367px;}
    /* vertical element  */

    #add_subject {
        border: 1px solid black;
        margin: 0 68px 0 100px;
        height: 73px;
        text-align: center;
        background: #DDDDDD;
        border-radius: 10px;
    }
    .action_subject .input {
        display: block;
        position: static;
        display: block;
        border: 1px solid black;
        width: 98%;
        margin: 0 auto;
    }
    .action_subject .border-left {
        display: none;
    }
    .action_subject .border-right {
        display: none;
    }
    .action_subject .text {
        display: block;
        position: static;
        width: 100%;
        display: block;
        text-align: center;
        padding-top: 4px;
    }
}

@media (min-width: 700px) and (max-width: 800px) {
    .info .vote {font-size: 16px; font-size: 1.6rem; padding: 5px;}
    .info .vote .figure {font-size: 12px; font-size: 1.2rem; }
    .subject .text {font-size: 11px; font-size: 1.1rem;}
}

@media (min-width: 600px) and (max-width: 700px) {
    .info .vote {font-size: 16px; font-size: 1.6rem; padding: 5px;}
    .info .vote .figure {font-size: 10px; font-size: 1.0rem; }
    .subject .text {font-size: 10px; font-size: 1.0rem;}
}

@media (min-width: 450px) and (max-width: 600px) {
    h1.room {font-size: 16px; font-size: 1.6rem; height: 30px; overflow: hidden;}

    .info .simple {font-size: 16px; font-size: 1.6rem; line-height: 65px;}
    .info .simple span {display: block; height: 45px;}

    .info .vote {font-size: 16px; font-size: 1.6rem; padding: 5px;}
    .info .vote .title {height: 30px; font-weight: bold;}
    .info .vote .figure {font-size: 14px; font-size: 1.4rem; float: none; width: auto; height: auto; padding: 0; margin: 0; text-align: left;}
    .info .vote .figure div {line-height: normal; padding: 0; margin: 0; height: auto; border: none;}

    .subject .text {font-size: 9px; font-size: 0.9rem;}
}
@media (min-width: 400px) and (max-width: 450px) {
    h1.room {
        font-size: 14px;
        font-size: 1.4rem;
        height: 30px;
        overflow: hidden;
    }
    .info .simple {font-size: 14px; font-size: 1.4rem; line-height: 65px;}
    .info .simple span {display: block; height: 45px;}

    .info .vote {font-size: 14px; font-size: 1.4rem; padding: 5px;}
    .info .vote .title {height: 30px; font-weight: bold;}
    .info .vote .figure {font-size: 12px; font-size: 1.2rem; float: none; width: auto; height: auto; padding: 0; margin: 0; text-align: left;}
    .info .vote .figure div {line-height: normal; padding: 0; margin: 0; height: auto; border: none;}

    .action_subject .text {
        font-size: 12px;
        font-size: 1.2rem;
    }
    .action_subject .input {
        width: 90%;
    }
    .subject .text {font-size: 9px; font-size: 0.9rem;}
}
@media (min-width: 0px) and (max-width: 400px) {
    h1.room {
        font-size: 12px;
        font-size: 1.2rem;
        height: 26px;
        overflow: hidden;
    }

    .info .simple {font-size: 10px; font-size: 1.0rem; line-height: 65px;}
    .info .simple span {display: block; height: 45px;}

    .info .vote {font-size: 10px; font-size: 1.0rem; padding: 5px;}
    .info .vote .title {height: 30px; font-weight: bold;}
    .info .vote .figure {font-size: 10px; font-size: 1.0rem; float: none; width: auto; height: auto; padding: 0; margin: 0; text-align: left;}
    .info .vote .figure div {line-height: normal; padding: 0; margin: 0; height: auto; border: none;}

    .action_subject .text {
        font-size: 10px;
        font-size: 1.0rem;
    }
    .action_subject .input {
        width: 85%;
    }
    .subject .text {font-size: 8px; font-size: 0.8rem;}
}