/*General Setting -> Big Elements
//////////////////////////////////*/
body {
    margin:           0px;
    font-family:      Helvetica;
    overflow-x:       hidden;
    user-select:      none; 
}

#display{
    width:            1706.67px;
    height:           519.417px;
    position:         absolute;
    top:              50%;
    left:             50%;
    
}

#editData {
    margin-top: 		20px;
	margin-left:		50px;
	margin-right:		50px;
}

#blue {
    background-color: #0051ca;
    height:           78.6%;
}

#grey {
    background-color: #ebf2fa;
    height:           21.4%;
}

/*Inputs settings
//////////////////////////////////*/
.notReady{
    border-color:      rgb(255, 0, 0);
    background-color:  rgb(255, 188, 188);
    animation:         shake 0.2s ease-in-out 0s 2;
}

@keyframes shake {
    0%   {margin-left:     0rem;}
    25%  {margin-left:  0.25rem;}
    75%  {margin-left: -0.25rem;}
    100% {margin-left:     0rem;}
}

.input {
    border:           3px solid #666;
    background-color: #efefef;
    border-radius:    .5em;
    margin:           10px;
    padding:          10px;
    cursor:           move;

}

.input.over {
    border: 3px dotted #666;
}


/*Settings for the display element
//////////////////////////////////*/
#display {
    color:            white;
}

#line {
    height:           20%;
    display:          inline-block;
    padding-left:     20px;
}


#stops {
    left:             50%;
    top:              0%;
    position:         absolute;
}

.fontFat {
    font-size:        5em;
    font-weight:      600;
}


.fontThin {
    font-size:        3.5em;
}

.fontThin{
    font-size:        3em;
}

.delay {
    font-size:        5em;
    font-weight:      500;
    color:            #f7dd2e;
}

.margin {
    margin-left:      2%;
    margin-right:     3%;
    margin-top:       2%;
}

.displayButtons {
    width:            85px;
    height:           63px;
    background-color: #0051ca; /*second class wagons*/
    border-color:     #0051ca;
    border-radius:    3px;


    position:         relative;
}

.displayButtons:disabled {      /*first class wagons*/
    border-color:     #0051ca;
    background-color: #ebf2fa;
}



#sectors {
    position:         relative;
    bottom:           -120px;
    font-size:        2em;
}

#sectors > span {
    position:         relative;
}


#waggons {
    position:         relative;
    bottom:           -18px;
    left:             40%;
}

.directionArrow {
    height:           65px;
    position:         relative;
    top:              12px;
}

#ButtonShowNextTask {
    top:-4px;
    clip-path: polygon(100% 0, 25% 0, 0 100%, 100% 100%);
}

#ButtonShowPreviousTask {
    top:4px;
    clip-path: polygon(0 0, 75% 0, 100% 100%, 0 100%);
}

#header {
    transition: 		opacity 0.3s ease-in-out;
}

@media all and (orientation:landscape) {
    img {
        vertical-align: baseline;
    }
}