@font-face {
    font-family: 'Mapwidget';
    src:    url('../../fonts/WebOfficeMapWidget.eot#') format('embedded-opentype'),
    url('../../fonts/WebOfficeMapWidget.ttf') format('truetype'),
    url('../../fonts/WebOfficeMapWidget.woff') format('woff'),
    url('../../fonts/WebOfficeMapWidget.svg#WebOfficeMapWidget') format('svg');
    font-weight: normal;
    font-style: normal;
}

.fi {
    font-family: Mapwidget;
    font-size: 3.2em;
}

.navitem {
    background: rgba(255,255,255,0.6);
    border: 2px solid rgb(61,61,61);
    height: 32px;
    width: 32px;
    -webkit-border-radius: 18px;
    border-radius: 18px;
    text-decoration: none;
    color: rgb(61,61,61);
    margin: 1px;
    
    display: flex;
    align-items: center;
    justify-content: center;
}

.ctxitem {
    margin: 2px;
    cursor: pointer;
    
    background: rgba(61,61,61,0.9);
    border: 2px solid rgb(255,255,255);
    height: 32px;
    width: 32px;
    line-height: 32px;
    -webkit-border-radius: 6px;
    border-radius: 6px;
    color: rgb(255,255,255);
    
    display: flex;
    align-items: center;
    justify-content: center;
}

.ctxitem:hover {
    background: rgba(255,255,255,0.8);
    color: rgb(61,61,61);
    border-color: rgb(61,61,61);
}

.ctxitem.disable {
    background: rgba(190,190,190,0.8);
    color: rgb(255,255,255);
    border-color: rgb(190,190,190);
    cursor: default;
}

.ctxitem.active {
    background: rgba(236,146,40,0.8);
    color: rgb(255,255,255);
    border-color: rgb(255,255,255);
}

.ctxitem.active:hover {
    background: rgba(236,146,40,0.8);
    color: rgb(61,61,61);
    border-color: rgb(61,61,61);
}

.toolitem {
    position: absolute;
    background: rgba(61,61,61,0.9);
    border: 2px solid rgb(255,255,255);
    height: 32px;
    width: 32px;
    -webkit-border-radius: 6px;
    border-radius: 6px;
    color: rgb(255,255,255);
    
    display: flex;
    align-items: center;
    justify-content: center;
}

.toolitem:hover {
    background: rgba(255,255,255,0.8);
    color: rgb(61,61,61);
    border-color: rgb(61,61,61);
}

.toolitem.active {
    background: rgba(236,146,40,0.8);
    color: rgb(255,255,255);
    border-color: rgb(255,255,255);
}

.toolitem.active:hover {
    background: rgba(236,146,40,0.8);
    color: rgb(61,61,61);
    border-color: rgb(61,61,61);
}
.navitem:hover {
    background: rgba(61,61,61,0.8);
    text-decoration: none;
    color: rgb(255,255,255);
}

/* character assignment */

/* Context Icons */

.fi-ctx-add:before {
    content: "\0061";
}
.fi-ctx-cancel:before {
    content: "\0073";
}
.fi-ctx-ok:before {
    content: "\0064";
}
.fi-ctx-snap:before {
    content: "\0066";
}
.fi-ctx-submit:before {
    content: "\0067";
}
.fi-ctx-undo:before {
    content: "\0068";
}
.fi-ctx-selection:before {
    content: "\007F";
}
.fi-ctx-unlink:before {
    content: "\0080";
}

/* Tool Icons */

.fi-tool-addremove:before {
    content: "\0070";
}
.fi-tool-buffer:before {
    content: "\006F";
}
.fi-tool-clickinfo:before {
    content: "\0062";
}
.fi-tool-create:before {
    content: "\0069";
}
.fi-tool-createclick:before {
    content: "\0075";
}
.fi-tool-custom:before {
    content: "\006E";
}
.fi-tool-customclick:before {
    content: "\006D";
}
.fi-tool-edit:before {
    content: "\007A";
}
.fi-tool-editclick:before {
    content: "\0074";
}
.fi-tool-fts:before {
    content: "\0072";
}
.fi-tool-identify:before {
    content: "\0031";
}
.fi-tool-identifyclick:before {
    content: "\0032";
}
.fi-tool-identifylayer:before {
    content: "\0033";
}
.fi-tool-location:before {
    content: "\0065";
}
.fi-tool-maptip:before {
    content: "\0034";
}
.fi-tool-raster:before {
    content: "\0035";
}
.fi-tool-repmodels:before {
    content: "\0036";
}
.fi-tool-basemaps:before {
    content: "\0038";
}
.fi-tool-selectarea:before {
    content: "\0077";
}
.fi-tool-selectline:before {
    content: "\0071";
}
.fi-tool-measureline:before {
    content: "\0037";
}
.fi-bufferselect:before {
    content: "\007C";
}
.fi-linkfield:before {
    content: "\007E";
}
.fi-querylist:before {
    content: "\0039";
}
/* Navigation Icons*/

.fi-nav-down:before {
    content: "\006A";
}
.fi-nav-left:before {
    content: "\006B";
}
.fi-nav-right:before {
    content: "\006C";
}
.fi-nav-up:before {
    content: "\0079";
}
.fi-zoomfull:before {
    content: "\0078";
}
.fi-zoomin:before {
    content: "\0063";
}
.fi-zoomout:before {
    content: "\0076";
}