@-ms-viewport {
    width: device-width;
    zoom: 1.0;
    user-zoom: fixed;
}

@viewport {
    width: device-width;
    zoom: 1.0;
    user-zoom: fixed;
}

html, body {
    /*font: normal 14px 'Open Sans', sans-serif;*/
    /*line-height: 23px;*/
    /*width: 100%;*/
    /*padding: 0px;*/
    /*margin: 0px;*/
    /*color: #4f4f4f;*/
}

#viewerContainer {
    width: 400px; 
    height: 500px;
    float: left;
    position: relative;
    box-sizing: border-box;
}

#propertiesContainer {
    width: calc(100% - 400px); 
    float: left;
    position: relative;
    box-sizing: border-box;
}


/*
    Toolbar
*/
#toolbar {
    box-sizing: border-box;
    font-size: 0px;
    height: 50px;
}
.toolbarButton {
    width: auto;
    height: 32px;
    margin: 6px;
    padding-top: 4px;
    display: inline-block;
    box-sizing: border-box;
    cursor: pointer;
    vertical-align: top;
}
.toolbarSeparator {
    width: 1px;
    height: 32px;
    margin: 6px;
    padding-top: 6px;
    display: inline-block;
    box-sizing: border-box; 
    vertical-align: top;
    cursor: default;
}
.toolbarSeparator > span {
    width: 1px;
    height: 25px;
    display: inline-block;
    background-color: #dadada; 
}
.toolbarButton > span {
    font-size: 14px;
    padding: 3px;
    border-radius: 2px;
    width: auto;
    height: 20px;
    display: inline-block;
}
.wcf-hover-enabled
.toolbarButton:hover > span {
    color: #95c11f;
}
.toolbarButton[data-state="active"] > span {
    background-color: #dddddd;
}


/*
    LoadingPanel
*/
.LoadingPanel {
    position: absolute;
    top: 0px;
    bottom: 0px;
    left: 0px;
    right: 0px;
    background-color: rgba(255, 255, 255, 0.5);
    opacity: 1.0;
    z-index: 1000000;
}

.LoadingPanel:before {
    content: "";
    display:block;
    height: calc(50% - 30px);
}
#floatingCirclesG{
    position:relative;
    width:61px;
    height:61px;
    margin:auto;
    transform:scale(0.6);
        -o-transform:scale(0.6);
        -ms-transform:scale(0.6);
        -webkit-transform:scale(0.6);
        -moz-transform:scale(0.6);
}
.f_circleG{
    position:absolute;
    background-color:rgba(178,178,178,0.98);
    height:11px;
    width:11px;
    border-radius:6px;
        -o-border-radius:6px;
        -ms-border-radius:6px;
        -webkit-border-radius:6px;
        -moz-border-radius:6px;
    animation-name:f_fadeG;
        -o-animation-name:f_fadeG;
        -ms-animation-name:f_fadeG;
        -webkit-animation-name:f_fadeG;
        -moz-animation-name:f_fadeG;
    animation-duration:0.782s;
        -o-animation-duration:0.782s;
        -ms-animation-duration:0.782s;
        -webkit-animation-duration:0.782s;
        -moz-animation-duration:0.782s;
    animation-iteration-count:infinite;
        -o-animation-iteration-count:infinite;
        -ms-animation-iteration-count:infinite;
        -webkit-animation-iteration-count:infinite;
        -moz-animation-iteration-count:infinite;
    animation-direction:normal;
        -o-animation-direction:normal;
        -ms-animation-direction:normal;
        -webkit-animation-direction:normal;
        -moz-animation-direction:normal;
}
#frotateG_01{
    left:0;
    top:25px;
    animation-delay:0.2895s;
        -o-animation-delay:0.2895s;
        -ms-animation-delay:0.2895s;
        -webkit-animation-delay:0.2895s;
        -moz-animation-delay:0.2895s;
}
#frotateG_02{
    left:7px;
    top:7px;
    animation-delay:0.386s;
        -o-animation-delay:0.386s;
        -ms-animation-delay:0.386s;
        -webkit-animation-delay:0.386s;
        -moz-animation-delay:0.386s;
}
#frotateG_03{
    left:25px;
    top:0;
    animation-delay:0.4825s;
        -o-animation-delay:0.4825s;
        -ms-animation-delay:0.4825s;
        -webkit-animation-delay:0.4825s;
        -moz-animation-delay:0.4825s;
}
#frotateG_04{
    right:7px;
    top:7px;
    animation-delay:0.589s;
        -o-animation-delay:0.589s;
        -ms-animation-delay:0.589s;
        -webkit-animation-delay:0.589s;
        -moz-animation-delay:0.589s;
}
#frotateG_05{
    right:0;
    top:25px;
    animation-delay:0.6855s;
        -o-animation-delay:0.6855s;
        -ms-animation-delay:0.6855s;
        -webkit-animation-delay:0.6855s;
        -moz-animation-delay:0.6855s;
}
#frotateG_06{
    right:7px;
    bottom:7px;
    animation-delay:0.782s;
        -o-animation-delay:0.782s;
        -ms-animation-delay:0.782s;
        -webkit-animation-delay:0.782s;
        -moz-animation-delay:0.782s;
}
#frotateG_07{
    left:25px;
    bottom:0;
    animation-delay:0.8785s;
        -o-animation-delay:0.8785s;
        -ms-animation-delay:0.8785s;
        -webkit-animation-delay:0.8785s;
        -moz-animation-delay:0.8785s;
}
#frotateG_08{
    left:7px;
    bottom:7px;
    animation-delay:0.975s;
        -o-animation-delay:0.975s;
        -ms-animation-delay:0.975s;
        -webkit-animation-delay:0.975s;
        -moz-animation-delay:0.975s;
}
@keyframes f_fadeG{
    0%{
        background-color:rgb(79,79,79);
    }

    100%{
        background-color:rgb(178,178,178);
    }
}
@-o-keyframes f_fadeG{
    0%{
        background-color:rgb(79,79,79);
    }

    100%{
        background-color:rgb(178,178,178);
    }
}
@-ms-keyframes f_fadeG{
    0%{
        background-color:rgb(79,79,79);
    }

    100%{
        background-color:rgb(178,178,178);
    }
}
@-webkit-keyframes f_fadeG{
    0%{
        background-color:rgb(79,79,79);
    }

    100%{
        background-color:rgb(178,178,178);
    }
}
@-moz-keyframes f_fadeG{
    0%{
        background-color:rgb(79,79,79);
    }

    100%{
        background-color:rgb(178,178,178);
    }
}