@font-face {
    font-family: "Open Sans";
    font-weight: normal;
    font-style: normal;
    src: url("../fonts/OpenSans-Regular.eot");
    src: url("../fonts/OpenSans-Regular.eot?#iefix") format("embedded-opentype"),
    url("../fonts/OpenSans-Regular.woff") format("woff"),
    url("../fonts/OpenSans-Regular.svg") format("svg");
}


@font-face {
    font-family: "Open Sans";
    font-weight: 600;
    font-style: normal;
    src: url("../fonts/OpenSans-Semibold.eot");
    src: url("../fonts/OpenSans-Semibold.eot?#iefix") format("embedded-opentype"),
    url("../fonts/OpenSans-Semibold.woff") format("woff"),
    url("../fonts/OpenSans-Semibold.svg#Semibold") format("svg");
}


html {overflow-y: scroll; height: 100%;}
body {margin: 0; padding: 0; font-family: "Open Sans", Arial, sans-serif; font-size: 14px; color: #111; letter-spacing: 0; background: #f8f8f8;}

input, textarea {font-family: "Open Sans", Arial, sans-serif; font-size: 15px; line-height: 20px;}
a {color: #305fd2; text-decoration: none; transition: all 0.1s ease-out;}
a:hover {color: #2552c1;}

/* Layout */
.main-layout { position: relative; min-width: 300px; margin: 0 auto;}
.main-layout.with-header {padding-top: 50px;}

.main-header {position: fixed; z-index: 9; left: 0; top: 0; width: 100%; background: #fff; box-shadow: 0 1px 0 0 rgba(0, 0, 0, 0.07), 0 1px 3px rgba(0, 0, 0, 0.10);}
.main-header > .inner {display: flex; flex-flow: row nowrap; width: 740px; height: 50px; margin: 0 auto;}
.main-header .logo { display: block; position: relative; flex: 0 0 auto; width: 125px;}
.main-header .logo > a {white-space: nowrap;display: block; position: absolute; left: 0; top: 50%; transform: translateY(-50%); color: #222; font-size: 20px;}
.main-header .menu {display: flex; flex: 1 1 auto; flex-flow: row nowrap; align-items: center; justify-content: center;}
.main-header .menu .item {display: block; flex: 0 0 auto; margin-left: 20px; font-size: 15px; line-height: 16px; color: #000;}
.main-header .menu .item:first-child {margin-left: 0;}
.main-header .side { display: flex; flex-flow: row nowrap; flex: 0 0 auto; align-items: center; margin-left: 10px;}
.main-header .side > .preferences {position: relative; flex: 0 0 auto;}
.main-header .side > .preferences > .selected {padding: 8px 26px 8px 30px; text-align: center; color: #444; font-weight: 600; border-radius: 3px; cursor: pointer; transition: all 0.15s ease-out;}
.main-header .side > .preferences > .selected > .icon { display: block; position: absolute; left: 8px; top: 50%; width: 18px; height: 18px; transform: translateY(-50%); opacity: 0.65;}
.main-header .side > .preferences > .selected > .arrow { display: block; position: absolute; right: 10px; top: 50%; width: 8px; height: 8px; transform: translateY(-50%); opacity: 0.7;}
.main-header .side > .preferences:hover > .selected {background: rgba(0, 0, 0, 0.07); color: #222;}
.main-header .side > .preferences:active > .selected {background: rgba(0, 0, 0, 0.05);}
.main-header > .inner > .side > .logout {display: block; flex: 0 0 auto; width: 35px; height: 35px; margin-left: 10px; background: url('/frontend/template/assets/images/icons/logout-white.svg') center center no-repeat; background-size: 24px 24px; transition: all 0.15s ease-out; border-radius: 5px;}
.main-header > .inner > .side > .logout:hover {background-color: rgba(0, 0, 0, 0.07);}

/* Guest settings */
.guest-preferences-content {width: 230px; padding-top: 3px;}
.guest-preferences-content > .language > .title {margin-bottom: 12px; padding: 0 7px; font-size: 11px; color: #000; font-weight: 600; text-transform: uppercase; cursor: default;}
.guest-preferences-content > .language > .options > li {display: block; padding: 12px 10px; font-size: 14px; line-height: 16px; color: #222; transition: all 0.2s ease-out; cursor: pointer;}
.guest-preferences-content > .language > .options > li:hover {background-color: rgba(0, 0, 0, 0.03); color: #000;}
.guest-preferences-content > .language > .options > li.selected {background-color: rgba(0, 0, 0, 0.05); color: #000; font-weight: 600;}

/* Buttons */
.im-button i.icon.close-white {background-image: url("../images/icons/close-white.svg");}
.im-button.large i.icon.close-white {background-size: 16px 16px;}
.im-button i.icon.check-black {background-image: url("../images/icons/check-black.svg");}
.im-button.gray i.icon-trash-black {opacity: 0.8;}

.im-button i.icon.reload-black {background-image: url("../images/icons/reload-black.svg");}
.im-button.gray i.reload-black {opacity: 0.8;}
.im-button.medium i.reload-black {background-size: 18px 18px;}

.im-button i.icon.qr-code {background-image: url("../images/icons/qr-code-black.svg");}
.im-button.gray i.icon.qr-code {opacity: 0.8;}

.imjs-dialog .imjs-content {text-align: center;}
.imjs-dialog .imjs-buttons .imjs-button {padding: 5px 20px;}

.im-button {transition: opacity 0.15s ease-in;}
.im-button.busy {opacity: 0.5;}

/* embed */
body.embed {background: #fff;}
body.embed > .main-layout {padding-top: 0;}
body.embed > .main-layout > .main-header {display: none;}
body.embed > .imjs-overlay.guest-preferences-popup {background: rgba(255, 255, 255, 0.6);}
body.embed .inline-error {margin-bottom: 25px; padding: 12px 18px; font-size: 14px; line-height: 18px; text-align: center; color: #e00101; background: rgba(255, 0, 0, 0.02); border-radius: 3px; border: 1px solid #e00101; cursor: default;}


@media all and (max-width: 900px) {
    .main-header > .inner {width: 100%; padding: 0 10px;}
}

@media all and (max-width: 700px) {
    .main-header > .inner {width: 100%; padding: 0 10px;}
}

@media all and (max-width: 500px) {
    .main-header > .inner > .side > .logout {margin-left: 5px; width: 30px; height: 30px; background-size: 20px 20px;}

    .main-header .side {margin-left: 0;}
    .main-header .logo {width: 90px;}
    .main-header .logo > a {font-size: 14px;}
    .main-header .menu .item {font-size: 12px;}
    .main-header .side > .preferences > .selected {font-size: 12px; padding: 6px 20px 6px 28px;}
}

@keyframes session-timer-blink {
    0% {opacity: 0.4;}
    50% {opacity: 1;}
    100% {opacity: 0.4;}
}