/* ----- FONTS ----- */
@font-face {
    font-family: 'OCRAStd';
    src: url('font/OCRAStd.eot?#iefix') format('embedded-opentype'),  url('font/OCRAStd.otf')  format('opentype'),
    url('font/OCRAStd.woff') format('woff'), url('font/OCRAStd.ttf')  format('truetype'), url('font/OCRAStd.svg#OCRAStd') format('svg');
    font-weight: normal;
    font-style: normal;
}

/* ----- COMMON ----- */
html, body {
    width: 100%;
    height: 100%;
    overflow: hidden;
}

html, body {
    font-size: 0.9259259259259259vmin /* 100 / 1080 * 10 */;
}

@media screen and (orientation:portrait) {
    html {
        font-size: 1.646090534979424vmin /* (100 / 1080) * (1920 / 1080) * 10) */;
    }
}

body {
    background: #000;
    color: #fff;
    line-height: 1;
    font-family: "Roboto", "Arial", sans-serif;
}

body:not(.TesterGroup) * {
    -webkit-touch-callout: none;
    -webkit-user-select: none;
    -moz-user-select: none;
    -ms-user-select: none;
    user-select: none;
}

a {
    cursor: pointer;
    transition: color 0.25s, background 0.25s, opacity 0.25s, transform 0.25s;
    text-decoration: none;
    color: #4ffbf1;
}

a:hover {
    text-decoration: none;
    color: #fff;
}

a.ArrowLink {
    display: inline-block;
    font-weight: bold;
}

a.ArrowLink:after {
    content: "\e811";
    font-family: "g4b-icon-font";
    margin-left: 0.3em;
}

.Scrollable {
    overflow: auto;
}

/* ----- CLEARFIX ----- */
.Clearfix:before, .Clearfix:after {
    content: "";
    display: table;
}

.Clearfix:after {
    clear: both;
}

/* ----- FONT ICON ----- */
.FontIcon {
    display: inline-block;
    margin: 0 0.3em;
}

.FontIcon:before {
    font-family: "g4b-icon-font";
    font-style: normal;
    font-weight: normal;
    speak: none;
    display: inline-block;
    text-decoration: inherit;
    /*width: auto !important;*/
    width: 1em;
    text-align: center;
    font-variant: normal;
    text-transform: none;
    line-height: 1em;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
    margin-left: 0 !important;
    margin-right: 0 !important;
}

/* ----- DEBUG ----- */
.Debug {
    font-family: "Roboto Condensed";
    font-size: 1.5rem;
    color: #fff;
    line-height: 1.2;
    text-align: left;
}

.Debug ul {
    background-color: rgba(0, 0, 0, 0.5);
    padding: 1rem;
    display: inline-block;
    padding-left: 3.5rem;
    position: relative;
    border-radius: 0.3rem;
}

.Debug ul:before {
    position: absolute;
    left: 0;
    font-family: "g4b-icon-font";
    content: "\e837";
    font-size: 2rem;
    line-height: 1.8rem;
    color: #ffff00;
    margin-left: 1rem;
}

.Debug li {
    display: inline-block;
}

.Debug li:not(:last-child):after {
    content: '\0000a0|\0000a0';
}

.Debug li .Label {
    color: #fff !important;
}

.Debug li .Value {
    font-weight: bold;
    color: #ffff00 !important;
}

/* ----- FEEDBACK MESSAGE & ERRORS ----- */
.FeedBackMessage,
.Errors {
    font-family: 'Roboto Condensed';
}

.FeedBackMessage,
.Errors li {
    position: relative;
    padding-left: 1.75em;
    margin: 1rem auto;
    display: table;
    text-align: left;
    font-size: 2.4rem;
    line-height: 1.25;
}

.Dialog .FeedBackMessage,
.Dialog .Errors li {
    margin: 1rem 0;
}

.FeedBackMessage:before,
.Errors li:before {
    content: "";
    display: block;
    position: absolute;
    top: 0;
    left: 0;
    font-size: 1.25em;
    line-height: 1;
    font-family: "g4b-icon-font";
}

.FeedBackMessage.Danger, .Errors li { color: #e04646; }
.FeedBackMessage.Danger:before, .Errors li:before { content: "\e82e"; }

.FeedBackMessage.Success { color: #28c158; }
.FeedBackMessage.Success:before { content: "\e82f"; }

.FeedBackMessage.Warning { color: #f9cb4b; }
.FeedBackMessage.Warning:before { content: "\e830" }

.FeedBackMessage.Locked { color: #f9cb4b; }
.FeedBackMessage.Locked:before { content: "\e800" }

/* ----- INFO HOTSPOT ----- */
.InfoHotspot {
    position: absolute;
    right: 0;
    top: 0;
    width: 2.5rem;
    height: 2.5rem;
    font-size: 2.5rem;
    z-index: 3;
    cursor: help;
    opacity: 0.5;
    margin: 0.5rem;
}

.InfoHotspot:hover {
    opacity: 1;
}

/* ----- TOOLTIP ----- */
.HasTooltip {
    cursor: help;
}

/* ----- COLORS ----- */
.DangerColor { color: #e04646 !important; }
.DangerBackground { background-color: #e04646 !important; }
.DangerBorder { border-color: #e04646 !important; }

.SuccessColor { color: #28c158 !important; }
.SuccessBackground { background-color: #28c158 !important; }
.SuccessBorder { border-color: #28c158 !important; }

.WarningColor { color: #f9cb4b !important; }
.WarningBackground { background-color: #f9cb4b !important; }
.WarningBorder { border-color: #f9cb4b !important; }

/* ----- ASSISTANT IMAGE ----- */
.Assistant.Angry { background-image: url("image/co-pilot/co-pilot-1-angry.png"); }
.Assistant.Sad { background-image: url("image/co-pilot/co-pilot-1-sad.png"); }
.Assistant.Happy { background-image: url("image/co-pilot/co-pilot-1-happy.png"); }
.Assistant.Neutral { background-image: url("image/co-pilot/co-pilot-1-neutral.png"); }
.Assistant.Disabled { background-image: url("image/co-pilot/co-pilot-1-disabled.png"); }
.Assistant.Thumbnail { background-image: url("image/co-pilot/co-pilot-1-thumbnail.png"); }

/* ----- LANDSCAPE & PORTRAIT ----- */
@media screen and (orientation:landscape) {
    .HiddenLandscape {
        display: none !important;
    }
}

@media screen and (orientation:portrait) {
    .HiddenPortrait {
        display: none !important;
    }
}