/* *************************** FONT TRIPODI ******************** */

@font-face {
    font-family: 'mytripodifontsmall';
    src: url('./myfont-tripodi-notacion-webfont.woff2') format('woff2'),
         url('./myfont-tripodi-notacion-webfont.woff') format('woff');
    font-weight: normal;
    font-style: normal;

}
@font-face {
    font-family: 'mytripodifontsmall-v3.0v3.0';
    src: url('./myfont-tripodi-notacion-webfont.woff2') format('woff2'),
         url('./myfont-tripodi-notacion-webfont.woff') format('woff');
    font-weight: normal;
    font-style: normal;

}

/* *************************** CLAVIER DE CONTRÖLE ******************** */
       
        @font-face {
            font-family: 'notation-tripodi';
            src: url('./notation-tripodi.eot?89797939');
            src: url('./notation-tripodi.eot?89797939#iefix') format('embedded-opentype'), url('./notation-tripodi.woff?89797939') format('woff'), url('./notation-tripodi.ttf?89797939') format('truetype'), url('./notation-tripodi.svg?89797939#notation-tripodi') format('svg');
            font-weight: normal;
            font-style: normal;
        }
        
        .demo-icon {
            font-family: "notation-tripodi";
            font-style: normal;
            font-weight: normal;
            speak: none;
            display: inline-block;
            text-decoration: inherit;
            width: 1em;
            margin-right: .2em;
            text-align: center;
            /* opacity: .8; */
            /* For safety - reset parent styles, that can break glyph codes*/
            font-variant: normal;
            text-transform: none;
            /* fix buttons height, for twitter bootstrap */
            line-height: 1em;
            /* Animation center compensation - margins should be symmetric */
            /* remove if not needed */
            margin-left: .2em;
            /* You can be more comfortable with increased icons size */
            /* font-size: 120%; */
            /* Font smoothing. That was taken from TWBS */
            -webkit-font-smoothing: antialiased;
            -moz-osx-font-smoothing: grayscale;
            /* Uncomment for 3D effect */
            /* text-shadow: 1px 1px 1px rgba(127, 127, 127, 0.3); */
        }
        
        .bs-glyphicons li {
            float: left;
            width: 50%;
            height: 115px;
            padding: 10px;
            font-size: 10px;
            line-height: 1.4;
            text-align: center;
            background-color: #f9f9f9;
            border: 1px solid #fff
        }
        
        .x3 .bs-glyphicons li {
            float: left;
            width: 33%;
            height: 115px;
            padding: 10px;
            font-size: 10px;
            line-height: 1.4;
            text-align: center;
            background-color: #f9f9f9;
            border: 1px solid #fff
        }
/*        
        .x4 .bs-glyphicons li {
            float: left;
            width: 20%;
            height: 115px;
            padding: 10px;
            font-size: 10px;
            line-height: 1.4;
            text-align: center;
            background-color: #f9f9f9;
            border: 1px solid #fff
        }
        .x4 .bs-glyphicons li {
            float: left;
            width: 20%;
            height: 115px;
            padding: 10px;
            font-size: 10px;
            line-height: 1.4;
            text-align: center;
            background-color: #f9f9f9;
            border: 1px solid #fff
        }*/
        .x4 .bs-glyphicons li {
            float: left;
            width: 16.6%;
            height: 115px;
            padding: 10px;
            font-size: 10px;
            line-height: 1.4;
            text-align: center;
            background-color: #f9f9f9;
            border: 1px solid #fff
        }        
        
        .bs-glyphicons li:hover,
        .x4 li:hover,
        .x3 li:hover {
            color: #fff;
            background-color: grey
        }
        
        li.selected {
            color: #fff;
            background-color: #563d7c
        }
        
        .x3 li.selected {
            color: #fff;
            background-color: #563d7c
        }
        
        .x4 li.selected {
            color: #fff;
            background-color: #563d7c
        }
        
        .fa-rotate-45 {
            -webkit-transform: rotate(45deg);
            -moz-transform: rotate(45deg);
            -ms-transform: rotate(45deg);
            -o-transform: rotate(45deg);
            transform: rotate(45deg);
        }
        
        .fa-rotate-90 {
            -webkit-transform: rotate(90deg);
            -moz-transform: rotate(90deg);
            -ms-transform: rotate(90deg);
            -o-transform: rotate(90deg);
            transform: rotate(90deg);
        }
        
        .fa-rotate-135 {
            -webkit-transform: rotate(135deg);
            -moz-transform: rotate(135deg);
            -ms-transform: rotate(135deg);
            -o-transform: rotate(135deg);
            transform: rotate(135deg);
        }
        
        .fa-rotate-180 {
            -webkit-transform: rotate(180deg);
            -moz-transform: rotate(180deg);
            -ms-transform: rotate(180deg);
            -o-transform: rotate(180deg);
            transform: rotate(180deg);
        }
        
        .fa-rotate-225 {
            -webkit-transform: rotate(225deg);
            -moz-transform: rotate(225deg);
            -ms-transform: rotate(225deg);
            -o-transform: rotate(225deg);
            transform: rotate(225deg);
        }
        
        .fa-rotate-270 {
            -webkit-transform: rotate(270deg);
            -moz-transform: rotate(270deg);
            -ms-transform: rotate(270deg);
            -o-transform: rotate(270deg);
            transform: rotate(270deg);
        }
        
        .fa-rotate-315 {
            -webkit-transform: rotate(315deg);
            -moz-transform: rotate(315deg);
            -ms-transform: rotate(315deg);
            -o-transform: rotate(315deg);
            transform: rotate(315deg);
        }
        
        .fa-flip-horizontal {
            -moz-transform: scaleX(-1);
            -webkit-transform: scaleX(-1);
            -o-transform: scaleX(-1);
            transform: scaleX(-1);
            -ms-filter: fliph;
            /*IE*/
            filter: fliph;
            /*IE*/
        }
        
        .fa-flip-vertical {
            -moz-transform: scaleY(-1);
            -webkit-transform: scaleY(-1);
            -o-transform: scaleY(-1);
            transform: scaleY(-1);
            -ms-filter: fliph;
            /*IE*/
            filter: fliph;
            /*IE*/
        }
        
        .form-inline .form-control {
            display: inline-block;
           /* width: 78px;*/
            vertical-align: middle;
        }
        
        .form-inline .col-xs-1 .form-control {
            width: 78px;
        }
        
        .form-inline .col-xs-2 .form-control {
            width: 135px;
        }
        
        .form-inline .col-xs-3 .form-control {
            width: 220px;
        }