* {
        -webkit-box-sizing: border-box;
        -moz-box-sizing: border-box;
        box-sizing: border-box;
    }

    html {
        -ms-touch-action: none;
    }

    #t_speed {
        width: 246px;
        height: 4px;
        margin-top: 5px;
    }

    form {
        display: inline-flex;
        width: 100%;
    }

    .form-control:focus, .form-control:active {
        /*background-color: #191919;
        color: #ffffff;
        box-shadow: 0 0 0 .2rem #fcc10733;
        border-color: #fcc107;*/
    }

    .btn {
        color: #fcc107 !important;
        border: 1px solid #595f66;
        font-weight: 600;
        background-color: #262626;
    }

    .btn.light {
        color: #007bff !important;
        border: 1px solid #343a40 ;
        font-weight: 600;
        background-color: #f1f1f1;
    }

    .btn-outline-primary:hover {
        background-color: transparent;
    }

    .buscador {
        background-color: transparent;
        color: #ffffff;
        width: 100%;
        padding-top: 11px;
        padding-bottom: 10px;
        border-top: 0;
        border-right: 0;
        border-left: 0;
        border-bottom: 4px solid #fcc107;
        margin: 0;
        border-radius: 0;
    }

    body {
        background-color: #262626;
        overflow-x: hidden;
        letter-spacing: 0.1em;
        font-size: 17px;
        color: #fcc107;
    }

body.light {
    background-color: #f1f1f1;
    color: #222;
}

body.light .card {
    background-color: #fff;
    border: 1px solid #ccc;
    color: #222;
}

body.light .btn {
    background-color: #eaeaea;
    color: #007bff !important;
    border-color: #ccc;
}

    .navbar {
        background-color: #262626!important;
        color: #fcc107;
    }

    .navbar.light {
        background-color: #f1f1f1!important;
        color: #222;
    }

    #wrapper {
        overflow: hidden;
    }

    #scroller {
        webkit-tap-highlight-color: rgba(0, 0, 0, 0);
        width: 100%;
        -webkit-transform: translateZ(0);
        -moz-transform: translateZ(0);
        -ms-transform: translateZ(0);
        -o-transform: translateZ(0);
        transform: translateZ(0);
        -webkit-touch-callout: none;
        -webkit-user-select: none;
        -moz-user-select: none;
        -ms-user-select: none;
        user-select: none;
        -webkit-text-size-adjust: none;
        -moz-text-size-adjust: none;
        -ms-text-size-adjust: none;
        -o-text-size-adjust: none;
        text-size-adjust: none;
    }

    .menu {
        font-size: 15px;
    }

    @media screen and (min-width: 1200px) {
        .logo_tam {
            font-size: 25px;
        }

        .logo_img {
            width: 120px;
        }
    }

    @media screen and (max-width: 1200px) and (min-width: 850px) {
        .logo_tam {
            font-size: 24px;
        }

        .logo_img {
            width: 110px;
        }
    }

    @media screen and (max-width: 849px) and (min-width: 750px) {
        .logo_img {
            width: 100px;
        }
    }

    @media screen and (max-width: 749px) and (min-width: 630px) {
        .logo_img {
            width: 100px;
        }
    }

    @media screen and (max-width: 629px) and (min-width: 450px) {
        .logo_img {
            width: 100px;
        }
    }

    @media screen and (max-width: 449px) and (min-width: 350px) {
        .titulo_movil {
            font-size: 1.8rem;
        }

        .logo_tam {
            font-size: 11px;
        }

        .logo_img {
            width: 70px;
        }
    }

    #scrolldiv::-webkit-scrollbar {
        width: 6px;
    }

    #scrolldiv::-webkit-scrollbar-track {
        -webkit-box-shadow: inset 0 0 6px #fff;
    }

    pre::-webkit-scrollbar {
        height: 6px;
    }

    pre::-webkit-scrollbar-track {
        -webkit-box-shadow: inset 0 0 6px #fff;
    }

    .card {
        background-color: #262626;
        border: 0.5px solid #191919;
        box-shadow: 1px 1px 8px rgba(0, 0, 0, 0.3);
    }

    ul.scroller {
        position: fixed;
        top: 85px;
        right: 4px;
        list-style-type: none;
        padding: 0;
        z-index: 15;
    }

    .speeds {
        display: none;
    }

    .buscador {
        /*margin-left: 1%;
        background-color: #191919;
        color: #f5f5f5;
        width: 84% !important;
        padding-top: 11px;
        padding-bottom: 10px;
        border-top: 0;
        border-right: 0;
        border-left: 0;
        border-bottom: 2px solid #<? echo $color_letra ?>;
        border-radius: 0;*/
    }

    .menuBuscador {
        background-color: #191919;
    }

    .list-group,
    .list-group-item {
        background-color: #262626;
    }

    h1 {
        color:#fcc107;
    }

    pre {
        font-size: 17px;
        color: #FFFFFF;
        overflow-y: hidden;
    }

    .itemFoto::before {
        content: '';
        width: 800px;
        height: 100px;
        transform: rotate(30deg);
        position: absolute;
        left: 0;
        top: 0;
    }

    .itemFoto::after {
        content: '';
        width: 800px;
        height: 100px;
        position: absolute;
        right: 0;
        bottom: 0;
        transform: rotate(-30deg);
    }

    .listaDeAcordes::-webkit-scrollbar {
        width: 0.4em;
    }

    .listaDeAcordes::-webkit-scrollbar-track {
        -webkit-box-shadow: inset 0 0 6px #fff;
    }

    .listaDeAcordes::-webkit-scrollbar-thumb {
        background-color: #FFE400;
        outline: 1px solid #333333;
    }

    .listaDeAcordes {
        display: none;
        position: fixed;
        height: 70vh;
        overflow-x: hidden;
        overflow-y: scroll;
        bottom: 78px;
        right: 0px;
        width: 40%;
        min-height: 5%;
        background-color: #262626;
    }

    .listaDeAcordes.light {
        display: none;
        position: fixed;
        height: 70vh;
        overflow-x: hidden;
        overflow-y: scroll;
        bottom: 78px;
        right: 0px;
        width: 40%;
        min-height: 5%;
        background-color: #f1f1f1;
    }

    .listaDeAcordes.show {
        display: block !important;
    }

    .btnLista {
        display: none;
        padding: 0;
        margn: 0;
    }

    .btnLista.show {
        display: block !important;
    }

    .btnLista2 {
        display: none;
        padding: 0;
        margin: 0;
    }

    .btnLista2.show {
        display: block !important;
    }

    @media (max-width: 500px) {
        .displayNoneMenu {
            display: none !important;
        }

        .listaDeAcordes {
            display: none !important;
        }
    }

    body::-webkit-scrollbar {
        width: 0.4em;
    }

    body::-webkit-scrollbar-track {
        -webkit-box-shadow: inset 0 0 6px #fff;
    }

    .list-group-item {
        cursor: pointer;
    }

    .list-group-item-action:focus,
    .list-group-item-action:hover {
        background-color: #333;
    }

    a:hover {
        text-decoration: none !important;
    }

    .MenuBox {
        font-weight: 300;
        font-size: 1.1em;
        line-height: 1.1em;
        font-weight: 500;
        letter-spacing: 0.5px;
        margin: 0;
    }

    /* Code for old Chrome, Safari and Opera */
    @-webkit-keyframes mymove {
        from {
            opacity: 0;
        }

        to {
            opacity: 1;
        }
    }

    /* Standard syntax */
    @keyframes mymove {
        from {
            opacity: 0;
        }

        to {
            opacity: 1;
        }
    }

    input[type=range] {
        width: 100%;
        margin: 0;
        background-color: transparent;
        -webkit-appearance: none;
        border:2px solid #111111;
        border-radius: 25px;
    }

    input[type=range]::-webkit-slider-runnable-track {
        width: 100%;
        height: 28px;
        cursor: pointer;
    }

    input[type=range]::-webkit-slider-thumb {
        background: #f1f1f1;
        width: 24px;
        height: 24px;
        border-radius: 15px;
        cursor: pointer;
        -webkit-appearance: none;
    }

    input[type=range]::-moz-range-track {
        width: 100%;
        height: 28px;
        cursor: pointer;
    }

    input[type=range]::-moz-range-thumb {
        background:#FF00009C;
        border-radius: 15px;
        cursor: pointer;
        width: 24px;
        height: 24px;
        border:0;
    }

    input[type=range]::-ms-track {
        background: transparent;
        border-color: transparent;
        border-width: 8px 0;
        color: transparent;
        width: 100%;
        height: 6px;
        cursor: pointer;
    }

    input[type=range]::-ms-fill-lower {
        background: #e7b003;
        border: 2px solid #010001;
        border-radius: 50px;
    }

    input[type=range]::-ms-fill-upper {
        background: #fcc107;
        border: 2px solid #010001;
        border-radius: 50px;
    }

    input[type=range]::-ms-thumb {
        cursor: pointer;
        width: 20px;
        height: 20px;
        border-radius: 15px;
        margin-top: 0px;
    }

    input[type=range]:focus::-ms-fill-lower {
        background: #fcc107;
    }

    input[type=range]:focus::-ms-fill-upper {
        background: #fcc720;
    }

    /*TODO: Use one of the selectors from https://stackoverflow.com/a/20541859/7077589 and figure out
    how to remove the virtical space around the range input in IE*/
    @supports (-ms-ime-align:auto) {
        /* Pre-Chromium Edge only styles, selector taken from hhttps://stackoverflow.com/a/32202953/7077589 */
        input[type=range] {
            margin: 0;
        }
    }

    /* Modal Ayuda*/
    #modalAyuda {
        position: fixed;
        right: 0;
        bottom: 0;
        top:0;
        left:0;
        /*background-color: #262626;*/
        z-index:0;
        padding-bottom:10rem !important;
    }

    #modalAyuda.light {
        /*background-color: #f1f1f1;*/
        z-index:0;
    }

    #modalAyuda.transparent {
        background: transparent!important;
    }

    #modalAyuda div {
        position: absolute;
        bottom: 10rem;
        padding-right:5rem!important;
    }

    #modalAyuda p {
        line-height:3.2;
    }

    #modalAyuda img {
        max-width: 50px;
        position: absolute;
        right: -20px;
    }

    #myRange {
        direction: rtl;
    }

    .buscador2 {
        /*background-color: transparent;
        color: #f5f5f5;
        width: 100%;
        padding-top: 11px;
        padding-bottom: 10px;
        border-top: 0;
        border-right: 0;
        border-left: 0;
        border-bottom: 4px solid #<? echo $color_acordes ?>;
        margin: 0;
        border-radius: 0;*/
    }

    .btn-link {
        transition: all 0.4s ease-in-out;
        -webkit-transition: all 0.4s ease-in-out;
        -moz-transition: all 0.4s ease-in-out;
        -o-transition: all 0.4s ease-in-out;
    }

    .php {
        max-width:20px;
    }
    
    
      pre {
            width: 100%;
            height: 100%;
            overflow: auto;
            touch-action: pan-x pan-y;
            user-select: none;
            box-sizing: border-box;
            position: relative;
        }

        .zoom-content {
            width: 100%;
            height: 100%;
            transform-origin: 0 0;
        }
    
    
                            
                            
                            #myRangeCifrado {
                                max-width: 145px;
                            }
                            
                                
                            .textoInput{
                                position:absolute;
                                top: calc(50% - 12px);
                                left: 30px;
                                z-index: 3;
                                font-size: 1rem;
                                -webkit-user-select: none; /* Safari */        
                                -moz-user-select: none; /* Firefox */
                                -ms-user-select: none; /* IE10+/Edge */
                                user-select: none; /* Standard */

                            }
                            
                            .fontSizeRange, 
                            .lineHeightRange, #myRange, #myRangeCifrado {
                                z-index:4;
                            }
    


   pre.light{
                                        color: #222;
                                        background: #fdfdfd;
                                    }
    
                                    pre.light a{
                                        color: #007bff !important; 
                                        border-bottom: solid;
                                        border-width: 1px;
                                        font-weight: bold;
                                    }
    
                                    .checkbox {
                                    	opacity: 0;
                                    	position: absolute;
                                    }
    
                                    .label {
                                    	background-color: #111;
                                    	border-radius: 50px;
                                    	cursor: pointer;
                                    	display: flex;
                                    	align-items: center;
                                    	justify-content: space-between;
                                    	padding: 5px;
                                    	position: relative;
                                    	height: 26px;
                                    	width: 50px;
                                    	transform: scale(1.2);
                                    	margin: 0;
                                    }
                                    
                                    .label.light {
                                    	background-color:#007bff;
                                    }
    
                                    .label .ball {
                                    	background-color: #fff;
                                    	border-radius: 50%;
                                    	position: absolute;
                                    	top: 2px;
                                    	left: 2px;
                                    	height: 22px;
                                    	width: 22px;
                                    	transform: translateX(0px);
                                    	transition: transform 0.2s linear;
                                    }
    
                                    .checkbox:checked + .label .ball {
                                    	transform: translateX(24px);
                                    }
    
    
                                    .fa-moon {
                                    	color: #fcc107;
                                    }
    
                                    .fa-sun {
                                    	color: #fcc107;
                                    }
                                    .fa-moon.light {
                                    	color: #007bff ;
                                    }
    
                                    .fa-sun.light {
                                    	color: #f1f1f1 ;
                                    }
    
                                    h1.light{
                                        color:#007bff;
                                    }
                                    
                                    .text.light{
                                        color:#222;
                                    }
                                    
                                    .text2 {
                                        color:#111;
                                    }
                                    
                                    .text2.light{
                                        color:#f1f1f1;
                                    }
                                    
                                    #fixed-bottom2 {
                                        /*background: #262626;*/
                                        bottom: 80px;
                                    }
                                    #fixed-bottom2.light{
                                        /*background: #f1f1f1;*/
                                    }
                                    #fixed-bottom2.transparent{
                                        background: transparent;
                                    }
                                    #subMenu {
                                        /*background: #262626;*/
                                        /*margin-bottom: 3rem;*/
                                        bottom: 105px;
                                        max-width:500px;
                                        left: auto;
                                        right:17px;
                                    }
                                    #subMenu.light{
                                        /*background: #f1f1f1;*/
                                    }
                                    #text.light{
                                        color: #222!important;
                                    }
                                    #texth4.light{
                                        color: #222;
                                    }
                                    #texth5.light{
                                        color: #222;
                                    }
                            .img-filter {
    filter: invert(100%);
    transition: filter 0.2s;
}

body.light .img-filter {
    filter: none !important;
}
                                    
                                    #botonDescrubir {
                                        color:#262626;
                                        background-color:#fcc107;
                                      width: 64px;
                                        border-radius: 50%;
                                        cursor:pointer;
                                    }
                                    
                                    #botonDescrubir.light {
                                        color:#f1f1f1;
                                        background-color:#007bff;
                                    }
                                    
                                    .btnBarCol {
                                        color:#262626;
                                        background-color:#fcc107;
                                        width: 50px;
                                        border-radius: 50%;
                                        cursor:pointer;
                                        text-align: center;
                                    }
                                    .btnBarCol.light {
                                        color:#f1f1f1;
                                        background-color:#007bff;
                                    }
                                    
                                    .scale-up-center {
                                    	-webkit-animation: scale-up-center 0.2s cubic-bezier(0.390, 0.575, 0.565, 1.000) both;
                                    	        animation: scale-up-center 0.2s cubic-bezier(0.390, 0.575, 0.565, 1.000) both;
                                    }
                                    
                                    
                                    @-webkit-keyframes scale-up-center {
                                      0% {
                                        -webkit-transform: scale(0.5);
                                                transform: scale(0.5);
                                      }
                                      100% {
                                        -webkit-transform: scale(1);
                                                transform: scale(1);
                                      }
                                    }
                                    @keyframes scale-up-center {
                                      0% {
                                        -webkit-transform: scale(0.5);
                                                transform: scale(0.5);
                                      }
                                      100% {
                                        -webkit-transform: scale(1);
                                                transform: scale(1);
                                      }
                                    }
                                    
                                    .scale-down-center {
                                    	-webkit-animation: scale-down-center 0.1s cubic-bezier(0.250, 0.460, 0.450, 0.940) both;
                                    	        animation: scale-down-center 0.1s cubic-bezier(0.250, 0.460, 0.450, 0.940) both;
                                    }
                                    
                                    
                                    @-webkit-keyframes scale-down-center {
                                      0% {
                                        -webkit-transform: scale(1);
                                                transform: scale(1);
                                      }
                                      100% {
                                        -webkit-transform: scale(0.5);
                                                transform: scale(0.5);
                                      }
                                    }
                                    @keyframes scale-down-center {
                                      0% {
                                        -webkit-transform: scale(1);
                                                transform: scale(1);
                                      }
                                      100% {
                                        -webkit-transform: scale(0.5);
                                                transform: scale(0.5);
                                      }
                                    }
                                    
                                    
                                    .scale-up-hor-right {
                                    	-webkit-animation: scale-up-hor-right 0.1s cubic-bezier(0.390, 0.575, 0.565, 1.000) both;
                                    	        animation: scale-up-hor-right 0.1s cubic-bezier(0.390, 0.575, 0.565, 1.000) both;
                                    }
                                    

                                    @-webkit-keyframes scale-up-hor-right {
                                      0% {
                                        -webkit-transform: scaleX(0.4);
                                                transform: scaleX(0.4);
                                        -webkit-transform-origin: 100% 100%;
                                                transform-origin: 100% 100%;
                                      }
                                      100% {
                                        -webkit-transform: scaleX(1);
                                                transform: scaleX(1);
                                        -webkit-transform-origin: 100% 100%;
                                                transform-origin: 100% 100%;
                                      }
                                    }
                                    @keyframes scale-up-hor-right {
                                      0% {
                                        -webkit-transform: scaleX(0.4);
                                                transform: scaleX(0.4);
                                        -webkit-transform-origin: 100% 100%;
                                                transform-origin: 100% 100%;
                                      }
                                      100% {
                                        -webkit-transform: scaleX(1);
                                                transform: scaleX(1);
                                        -webkit-transform-origin: 100% 100%;
                                                transform-origin: 100% 100%;
                                      }
                                    }

                                #zoomTool,
                                #scrollTool,
                                #transTool,
                                #styleTool,
                                #screenTool {
                                    max-width: max-content;
                                }
                                
                                .video-responsive {
	height: 0;
	overflow: hidden;
	padding-bottom: 56.25%;
	padding-top: 30px;
	position: relative;
	}
.video-responsive iframe, .video-responsive object, .video-responsive embed {
	height: 100%;
	left: 0;
	position: absolute;
	top: 0;
	width: 100%;
	}