/*TUTORIAL*/

.TutorialMDM6 {
    position: absolute;
    top: 0px;
    left: 0px;
    bottom: 0px;
    right: 0px;
    z-index: 50000;
    font-family: customFont;
    color: white;
}

.TutorialMDM6 .overlay {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: #7B7979;
    opacity: 0.70;
    filter: Alpha(Opacity=70);
}

.TutorialMDM6 .content {
    position: absolute;
    top: 0px;
    left: 0px;
    bottom: 0px;
    right: 0px;
}

/*tutorial center*/

.Tutorial-center {
    width: 200px;
    display: block;
    margin-left: auto;
    margin-right: auto;
    position: relative;
    top: 270px;
    right: 150px;
    z-index: 1000;
}

.Tutorial-center .iconMouse {
    position: absolute;
    top: 21px;
    right: 28px;
}

.Tutorial-center .iconHand {
    position: absolute;
    top: 2px;
    left: -15px;
}

.Tutorial-center .fontsMouse {
    left: 180px;
    top: -100px;
    position: absolute;

}

.Tutorial-center .fontsMouse .options {
    position: absolute;
    top: 115px;
    font-size: 160%;
    font-weight: bold;
    writing-mode: lr-tb;
}

.Tutorial-center .fontsHand {
    left: -72px;
    top: -38px;
    position: absolute;
}

.Tutorial-center .fontsHand .title {
    position: absolute;
    top: 0px;
    left: 120px;
    font-size: 200%;
    font-weight: bold;
}

.Tutorial-center .fontsHand .options {
    position: absolute;
    top: 115px;
    font-size: 200%;
    font-weight: bold;
}

/*close tutorial*/
.Tutorial-close {
    width: 65px;
    display: block;
    margin-left: auto;
    margin-right: auto;
    position: relative;
    top: 70px;
    right: -19px;
    position: absolute;
    z-index: 1000;
    font-size: 400%;
    cursor: pointer;
    /* text-decoration: underline; */
    color: white;
    font-family: arial;
}

.Tutorial-close-publico {
    top: 0px !important;
}

/**Herramientas*/

.Tutorial-panel-tools {
    position: absolute;
    right: 0px;
    width: 382px;
    background: transparent;
    height: 200px;
}

.Tutorial-panel-tools-publico {
    top: 550px !important;
}


.Tutorial-panel-tools .vSeparator {
    position: absolute;
    top: 0px;
    width: 6px;
    height: 46px;
}



.Tutorial-panel-tools .vSeparatorMidle {
    position: absolute;
    top: 52px;
    width: 6px;
    height: 63px;
}

.Tutorial-panel-tools .hSeparator {
    position: absolute;
    left: 70px;
    top: 46px;
    width: 225px;
    height: 6px;
}

.Tutorial-panel-tools .ruteo-hSeparator {
    position: absolute;
    left: 347px;
    top: 92px;
    width: 44px;
    height: 6px;
}

.Tutorial-panel-tools .fonts {
    left: 75px;
    top: 112px;
    position: absolute;
}



.Tutorial-panel-tools .fonts .title {
    font-size: 160%;
    font-weight: bold;
    writing-mode: lr-tb;
}

.Tutorial-panel-tools .fonts .options {
    font-size: 160%;
    margin-left: 37px;
    line-height: 1.3;
}


/*Busqueda*/

.Tutorial-search {
    position: absolute;
    top: 0px;
    left: 14px;
    width: 370px;
    background: transparent;
    height: 82px;
}


.Tutorial-search .hSeparator {
    position: absolute;
    left: 0px;
    top: 15px;
    width: 90px;
    height: 6px;
}

.Tutorial-search .fonts {
    left: 100px;
    top: 0px;
    position: absolute;

}

.Tutorial-fonts-search-publico {
    top: -55px !important;
    left: 595px !important;
    width: 200px !important;
}


.Tutorial-search .fonts .title {
    font-size: 130%;
    font-weight: bold;
    writing-mode: lr-tb;
    line-height: 1.3
}


/*control zoom*/

.Tutorial-controlZoom {
    position: absolute;
    top: 20px;
    right: 255px;
    width: 300px;
    background: transparent;
    height: 100px;
}

.Tutorial-controlZoom-publico {
    top: 55px !important;
}

.Tutorial-controlZoom .vSeparator {
    position: absolute;
    bottom: 0px;
    top: 0px;
    width: 6px;
}

.Tutorial-controlZoom .hSeparator {
    position: absolute;
    right: 0px;
    width: 30px;
    height: 6px;
}

.Tutorial-controlZoom .fonts {
    right: 120px;
    top: 9px;
    position: absolute;
}

.Tutorial-controlZoom .fonts .title {
    font-size: 120%;
    font-weight: bold;
    --webkit-transform: rotate(0deg);
    --moz-transform: rotate(0deg);
    --o-transform: rotate(0deg);
    writing-mode: lr-tb;
}

.Tutorial-controlZoom .fonts .options {
    font-size: 120%;
    font-weight: bold;
    --webkit-transform: rotate(0deg);
    --moz-transform: rotate(0deg);
    --o-transform: rotate(0deg);
    writing-mode: lr-tb;
}

.Tutorial-sidebar {
    position: absolute;
    top: 0px;
    right: 300px;
    width: 300px;
    background: transparent;
    height: 100px;
}

.Tutorial-sidebar .vSeparator {
    position: absolute;
    bottom: 0px;
    top: 0px;
    width: 6px;
}

.Tutorial-sidebar .hSeparator {
    position: absolute;
    right: 0px;
    width: 30px;
    height: 6px;
}

.Tutorial-sidebar .fonts {
    right: 0px;
    top: 0px;
    position: absolute;
}

.Tutorial-sidebar .fonts .title {
    font-size: 105%;
    font-weight: bold;
    --webkit-transform: rotate(0deg);
    --moz-transform: rotate(0deg);
    --o-transform: rotate(0deg);
    writing-mode: lr-tb;
}

.Tutorial-sidebar .fonts .options {
    font-size: 120%;
    font-weight: bold;
    --webkit-transform: rotate(0deg);
    --moz-transform: rotate(0deg);
    --o-transform: rotate(0deg);
    writing-mode: lr-tb;
}


.Tutorial_template {
    display: block;
    background-image: url(../../../public/img/tutorial.png);
    overflow: hidden;
}

.line-horizontal {
    display: block;
    background-image: url(../../../public/img/line-horizontal.png);
    overflow: hidden;
    background-repeat: repeat-x;
}

.line-vertical {
    display: block;
    background-image: url(../../../public/img/line-vertical.png);
    overflow: hidden;
    background-repeat: repeat-y;
}

.mouse {
    background-position: -208px -27px;
    background-repeat: no-repeat;
    width: 130px;
    height: 218px;
}

.hand {
    background-position: -4px -28px;
    background-repeat: no-repeat;
    width: 185px;
    height: 218px;
}

.scroll {
    background-position: -346px -84px;
    background-repeat: no-repeat;
    width: 49px;
    height: 88px;
}

.drag {
    background-position: -348px -3px;
    background-repeat: no-repeat;
    width: 60px;
    height: 71px;
}

.zoomBottons {
    background-position: -348px -184px;
    background-repeat: no-repeat;
    width: 60px;
    height: 84px;
    padding: 5px;
}

.lineaSenal {
    left: 60px;
    bottom: 5px;
    width: 100px;
}