.clock-container-span-mobile {
    height: unset;
    /*margin: 0 auto;*/
    display: block;
}

video {
    /* override other styles to make responsive */
    width: 100%    !important;
    height: auto   !important;
  }
  
.playCommentsButton-mobile {
    width: 100%;
    margin: auto 0;
    height: 66px;
    vertical-align: middle;
    line-height: 66px;
    margin-top: 5px;
}

#dinamicTable {
    font-size: 13px !important;
    height: calc(90vh - 300px);
}

.notebook-mobile {
    background-color: #e2e2e2;
    padding: 1px;
    margin-top: 5px;
    /*border-left: 5px solid #222222;*/
    height: 100%;
    /*max-height: 100%;*/
    /*min-height: 100%;*/
    overflow-y: auto;
    overflow-x: hidden;
}

.recordControlButtonRecord_mobile {
    width: 90%;
    height: 25%;
    background-image: url(../img/buttons/icons/record_dot.png);
    background-position: 50% 50%;
    background-repeat: no-repeat;
    background-size: 15%;
    position: relative;
    /*float: right;*/
    /*font-size: 3em;*/
    /*color: white;*/
    /*border: 1px solid #0c5460;*/
    /*height: auto;*/
}

.timer-id-class-recording-simulation_mobile {
    font-family: Digital-7;
    height: auto;
    /*font-size: 2em;*/
    text-align: center;
    color: red;
    letter-spacing: 2px;
    /*float: c;*/
    padding: 0px;
}

.m_menu_text {
    height: auto;
    /*font-size: 2em;*/
    text-align: center;
    color: red;
    letter-spacing: 2px;
    /*float: c;*/
    padding: 0px;
}

.m_menu_text:hover {
    background-color: #d9d61c;
}

.m_menu_text:active {
    background-color: #0fa825;
}

.m_video_container {
    height: 100%;
    /*background-color: #0c5460;*/
    display: inline-block;
    /*background-image: url(../img/buttons/icons/multichanel.png);*/
    /*background-position: 50% 50%;*/
    /*background-repeat: no-repeat;*/
    /*background-size: 100% 100%;*/
    /*opacity: 0.4;*/
    float: left;
}

#videos-placeholder {
    display: block;
    background-image: url(../img/buttons/icons/multichanel.png);
    background-size: 112% 112%;
    background-position: 50% 50%;
    background-position: center;
    background-repeat: no-repeat;
    opacity: 0.4;
}

.m_info_container {
    float: right;
    height: 100%;
    /*background-color: #0c5460;*/
    display: inline-block;
}

.m_markers_table_container {
    display: block;
}

.m_bad_marker {
    background-color: #e6a4a7;
    border: 1px solid #e2e2e2;
    display: block;
    line-height: 2.5em;
    text-align: center;
    padding-top: 6px;
    font-size: 6vh;
    color: #2e2e2e;
    cursor: pointer;
    width: 100%;
}

.m_good_marker {
    background-color: #b2ec8e;
    border: 1px solid #e2e2e2;
    display: block;
    line-height: 2.5em;
    text-align: center;
    padding-top: 6px;
    font-size: 6vh;
    color: #2e2e2e;
    cursor: pointer;
    width: 100%;
}

.m_good_marker:hover {
    background-color: #0fa825;
}

.m_bad_marker:hover {
    background-color: #d74455;
}

.padding_above {
    margin-top: 5px;
}

.m_info_logo {
    max-height: 25%;
    min-height: 25%;
    background-image: url(../img/speedup_mini.png);
    background-position: 50% 50%;
    background-repeat: no-repeat;
    background-size: 100% 100%;
}

.m_info_clock {
    max-height: 25%;
    min-height: 25%;
    /*background-color: #2aabd2;*/
    font-size: 6vw;
    line-height: 6vw;
    /*padding: 10px;*/
    padding-top: 2%;
}

.m_info_menu {
    max-height: 25%;
    min-height: 25%;
    /*background-color: #0fa825;*/
    cursor: pointer;
    font-size: 5vw;
    line-height: 5vw;
    /*padding: 10px;*/
    padding-top: 2%;
}

.m_info_menu span {
    color: #1c7430;
    text-align: center;
    width: 100%;
    margin: 0 auto;
}

.m_info_record_button {
    width: 95%;
    margin: 0 auto;
    max-height: 25%;
    min-height: 25%;
    /*background-color: red;*/
    display: inline-block;
}

.col-xs-9 {
    padding-right: 0;
    padding-left: 0;
}

.col-xs-3 {
    padding-right: 0;
    padding-left: 0;
}

.upper_container {
    width: 100%;
    height: auto;
    max-height: 50%;
    display: inline-block;
}

.debug {
    position: absolute;
    left: 0;
    bottom: 0;
    width: 50%;
    height: auto;
    background-color: #2aabd2;
    display: block;
    z-index: 999;
    opacity: 0.7;
}

.comment_class_mobile_container {
    position: relative;
    bottom: 0;
}

.m_recordControlButtonPreview {

    width: 5%;
    height: 3%;
    background-image: url(../img/buttons/icons/preview.png);
    background-size: 80% 80%;
    background-position: center;
    background-repeat: no-repeat;
    position: absolute;
    top: 0;
}

.m_descriptionContent {
    position: absolute;
    top: 10%;
    left: 5%;
    width: 90%;
    background-color: rgba(219, 219, 219, 0.96);
    color: #000000;
    padding: 6px 12px;
    max-height: 24vh;
    overflow-y: auto;
    overflow-x: hidden;
    z-index: 999999;
    display: none;
    font-size: 3vw;
    height: auto;
    border: #3c3c3c 1px solid;
}

.m_descriptionContent-select {
    margin-top: 11px;
    width: 100%;
    float: right;
    background-color: #e2e2e2;
    color: #2e2e2e;
    padding: 6px 12px;
    max-height: 30vh;
    overflow-y: auto;
    overflow-x: hidden;
}

@keyframes blinkEditingMode {
    50% {
        background-color: #fc8e00;
    }
}

.editing-mode {
    animation: blinkEditingMode .5s step-end infinite alternate;
}

.confirmation_border{
    outline: thick solid #00ff00;
    /*border-radius: 10px;*/
    /*border-color: #0fa825;*/
    /*border-style: outset;*/
    /*border-width: 5px;*/
}
.confirmation {
    position: absolute;
    /*width: 30%;*/
    height: 10%;
    background-color: #d99500;
    z-index: 99999;
    font-size: 1em;
    border-radius: 10px;
    width: 400px;
    display: none;
    margin-top: 50px;
}

.confirmation-header {
    width: 100%;
    height: 30%;
    text-align: center;
    padding-bottom: 30px;
}

.confirmation-button {
    width: 40%;
    height: auto;
    display: inline-block;
    text-align: center;
    cursor: pointer;
}

.confirmation-confirm {
    background-color: #0fa825;
    float: left;
}

.confirmation-abort {
    background-color: #a81c2b;
    float: right;
}

.confirmation-button:hover {
    background-color: #cbbc00;
}

.confirmation-button:active {
    background-color: #ff0003;
}

.m-link{
    height: 25%;
    display: inline-block;
    width: 7%;
}

.m_recording-activated {

    background-image: url(../img/buttons/icons/rec-on.png);
    background-position: 50% 50%;
    background-repeat: no-repeat;
    background-size: 50%;
    animation: blinkRecord .5s step-end infinite alternate;
}