@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");
}

@font-face {
    font-family: "Open Sans";
    font-weight: 700;
    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 {height: 100%; margin: 0; padding: 0; font-family: "Open Sans", Arial, sans-serif; font-size: 14px; color: #111; letter-spacing: 0; background: #fafbfc;}
body.logged-in {background: #fcfcfc;}
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;}

.default-style h1 {display: block; margin: 15px 0 25px 0; padding: 0; color: #222; font-size: 30px; line-height: 34px;}
.default-style h2 {display: block; margin: 15px 0 20px 0; padding: 0; color: #222; font-size: 26px; line-height: 30px;}
.default-style h3 {display: block; margin: 15px 0 20px 0; padding: 0; color: #222; font-size: 16px; line-height: 20px;}
.default-style i, .default-style em {font-style: italic;}
.default-style strong {font-weight: 600;}
.default-style hr {display: block; margin: 3px 0; border: 0; height: 1px; background: #ccc;}
.default-style ul {display: block; margin: 5px 0; list-style: disc inside;}
.default-style ul > li {display: list-item; margin: 5px 0; padding: 2px 0;}
.default-style ul > li::before {content: ""; display: inline-block; width: 7px;}
.default-style ol {display: block; margin: 5px 0; list-style: decimal inside;}
.default-style ol > li {display: list-item; margin: 5px 0; padding: 2px 0;}
.default-style ol > li::before {content: ""; display: inline-block; width: 7px;}
.default-style a {color: #267E54;}
.default-style a.passive {color: #000;}
.default-style a:hover {color: #b00009;}

/* Layout */
.main-wrapper {display: block; position: relative; width: 100%; height: 100%; min-width: 250px; margin: 0 auto;}

/* Guest: header */
.guest-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);}
.guest-header > .inner {display: flex; flex-flow: row nowrap; width: 1000px; min-height: 50px; margin: 0 auto;}
.guest-header .logo { display: block; position: relative; flex: 0 0 auto; width: 230px;}
.guest-header .logo > a {display: block; position: absolute; left: 0; top: 50%; transform: translateY(-50%);}
.guest-header .logo > a > img {height: 25px;}
.guest-header .side { display: flex; flex-flow: row nowrap; flex: 0 0 auto; margin-left: auto;}

.guest-header .side > .regional {position: relative; flex: 0 0 auto; height: 50px;}
.guest-header .side > .regional > .selected {position: relative; top: 50%; transform: translateY(-50%); height: 40px; line-height: 40px; padding: 0 20px 0 0; text-align: center; color: #444; font-weight: 600; cursor: pointer;}
.guest-header .side > .regional > .selected > .arrow { display: block; position: absolute; right: 6px; top: 50%; width: 8px; height: 8px; transform: translateY(-50%); opacity: 0.8;}
.guest-header .side > .regional:hover > .selected {color: #222;}

/* Guest settings */
.guest-settings-popup {width: 230px; padding-top: 3px;}
.guest-settings-popup > .language > .title {margin-bottom: 10px; padding: 0 10px; font-size: 12px; font-weight: bold; text-transform: uppercase; color: #111; cursor: default;}
.guest-settings-popup > .language > .options > li {display: block; padding: 12px 10px; font-size: 14px; line-height: 16px; color: #222; cursor: pointer;}
.guest-settings-popup > .language > .options > li:hover {background-color: #fafafa; color: #000;}
.guest-settings-popup > .language > .options > li.selected {background-color: #f5f5f5; color: #000; font-weight: bold;}

/* Main header */
.main-header {position: fixed; z-index: 9; left: 0; top: 0; width: 100%; background-color: #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; min-height: 50px;}
.main-header .inner > .toggle-nav {display: none; position: relative; flex: 0 0 auto; width: 60px; background: url('../images/icons/open-menu-black.svg') center center no-repeat; background-size: 25px 25px; opacity: 0.9; cursor: pointer;}

.main-header .logo {display: block; position: relative; flex: 0 0 auto; width: 250px; background: #172b4d; border-right: 1px solid #132440; box-shadow: -1px 0 0 1px rgba(0, 0, 0, 0.2);}
.main-header .logo a {display: block; position: absolute; left: 15px; top: 50%; transform: translateY(-50%);}
.main-header .logo a > img {height: 25px;}
.main-header .logo a > img.black {display: none;}

.main-header .search {display: block; position: relative; flex: 1 1 auto; font-size: 0;}
.main-header .search > input {display: block; width: 100%; height: 50px; padding: 0 5px 0 50px; line-height: 50px; font-size: 14px; color: #000; background: transparent; border: 0;}
.main-header .search > input::placeholder {color: #999;}
.main-header .search > input:hover::placeholder {color: #777;}
.main-header .search > .icon {display: block; position: absolute; left: 20px; top: 50%; transform: translateY(-50%); width: 16px; height: 16px; background: url('../images/icons/search-black.svg') center center no-repeat; background-size: cover; opacity: 0.60;}
.main-header .search:hover > .icon { opacity: 0.7;}

/* Main header: side */
.main-header .side { display: flex; flex-flow: row nowrap; flex: 0 1 auto; margin-left: auto; justify-content: flex-end;}
.main-header .side > .cell { display: block; position: relative; flex: 0 1 auto; align-items: stretch; border-right: 1px solid #eee; cursor: pointer; transition: all 0.1s ease-out;}
.main-header .side > .cell:hover { z-index: 2; background-color: #f5f5f5; border-color: #e2e2e2;}
.main-header .side > .cell:hover > .icon { opacity: 0.9;}
.main-header .side > .cell:hover > .arrow { opacity: 0.9;}
.main-header .side > .cell:hover > .label { color: #111;}

.main-header .side > .cell.help {width: 50px;}
.main-header .side > .cell.help > .icon {display: block; position: absolute; left: 50%; top: 50%; transform: translate(-50%, -50%); width: 19px; height: 19px; opacity: 0.75; background: url('../images/icons/help-black.svg') center center no-repeat; background-size: cover;}
.main-header .side > .cell.balance {display: flex; flex-flow: row nowrap; align-items: center; padding: 0 20px;}
.main-header .side > .cell.balance > .icon {display: block; flex: 0 0 auto; vertical-align: middle; width: 19px; height: 19px; background: url('../images/icons/coin-stack2-black.svg') center center no-repeat; background-size: cover; opacity: 0.75;}
.main-header .side > .cell.balance > .label {display: block; flex: 0 0 auto; vertical-align: middle; height: 50px; padding-left: 7px; line-height: 50px; white-space: nowrap; font-size: 13px; color: #222;}
.main-header .side > .cell.initials {display: none; padding: 0 5px; width: 50px;}
.main-header .side > .cell.initials > .circle {position: absolute; width: 35px; height: 35px; left: 50%; top: 50%;transform: translate(-50%, -50%); line-height: 34px; font-size: 15px; background: #154aaa; border-radius: 50%; text-align: center; color: #fff;}
.main-header .side > .cell.user {padding: 0 12px;}
.main-header .side > .cell.user > .label {display: block; height: 50px; padding-right: 12px; line-height: 50px; white-space: nowrap; font-size: 13px; color: #222;}
.main-header .side > .cell.user > .arrow {display: block; position: absolute; right: 9px; top: 50%; width: 8px; height: 8px; transform: translateY(-35%); background: url('../images/icons/arrow-down-black.svg') center center no-repeat; background-size: cover; opacity: 0.75;}
.main-header .side > .cell.logout {width: 50px;;}
.main-header .side > .cell.logout > .icon {display: block; position: absolute; left: 50%; top: 50%; transform: translate(-50%, -50%); width: 18px; height: 18px; opacity: 0.75; background: url('../images/icons/logout-black.svg') center center no-repeat; background-size: cover;}

/* Main area */
.main-area {display: flex; flex-flow: row nowrap; min-height: 100%; padding-top: 50px;}
.main-area > .content { display: block; flex: 1 1 auto;}

/* Main area: sidebar */
.main-sidebar {position: relative; z-index: 2; flex: 0 0 auto; width: 250px; padding: 10px 0 20px 0; background: #253858; border-right: 1px solid #1e2e48;}
.main-sidebar .nav .group {margin-bottom: 15px;}
.main-sidebar .nav .group > .title { display: block; padding: 10px 17px; font-size: 11px; line-height: 11px; color: #939dac; font-weight: 600; text-transform: uppercase; cursor: default;}
.main-sidebar .nav .items li { font-size: 0; transition: all 0.05s ease-out;}
.main-sidebar .nav .items li > a { display: block; position: relative; padding: 12px 17px;}
.main-sidebar .nav .items li > a > .name { display: block; padding: 0 0 0 30px; font-size: 13px; line-height: 13px; color: #f7f7f7;}
.main-sidebar .nav .items li > a > .number { position: absolute; right: 15px; top: 50%; width: 18px; height: 18px; transform: translateY(-50%); line-height: 16px; font-size: 11px; color: #eee; font-weight: 600; text-align: center; border: 1px solid transparent; border-radius: 50%;}
.main-sidebar .nav .items li > a > .icon { display: block; position: absolute; left: 16px; top: 50%; transform: translateY(-50%); width: 17px; height: 17px; opacity: 0.7;}
.main-sidebar .nav .items li.dashboard > a > .icon { width: 15px; height: 15px;}
.main-sidebar .nav .items li.customers > a > .icon { width: 18px; height: 18px;}
.main-sidebar .nav .items li.payments > a > .icon { width: 18px; height: 18px;}
.main-sidebar .nav .items li.system > a > .icon { width: 16px; height: 16px;}
.main-sidebar .nav .items li.num-red > a > .number { color: #ff005a; border-color: #ff005a;}
.main-sidebar .nav .items li.num-purple > a > .number { color: #ce1bca; border-color: #ce1bca;}
.main-sidebar .nav .items li.num-blue > a > .number { color: #034dbf; border-color: #034dbf;}
.main-sidebar .nav .items li.num-green > a > .number { color: #267E54; border-color: #267E54;}
.main-sidebar .nav .items li:hover { position: relative; z-index: 2; background: rgba(0, 0, 0, 0.12); box-shadow: inset 0 1px 0 0 #1e2e48, inset 0 -1px 0 0 #1e2e48;}
.main-sidebar .nav .items li:hover > a > .name { color: #fff;}
.main-sidebar .nav .items li.active { position: relative; z-index: 3; background: rgba(0, 0, 0, 0.12); box-shadow: 0 1px 0 0 #1e2e48, 0 -1px 0 0 #1e2e48;}
.main-sidebar .nav .items li.active > a > .name { color: #fff;}

/* Main area: submenu */
.main-submenu {position: relative; z-index: 2; flex: 0 0 auto; width: 240px; padding: 10px 0 20px 0; background: #f1f1f1; border-right: 1px solid #ccc; box-shadow: 3px 0 7px rgba(0, 0, 0, 0.05);}
.main-submenu .nav .group {margin-bottom: 10px;}
.main-submenu .nav .group > .title { display: block; padding: 10px 17px; font-size: 11px; line-height: 11px; color: #333; font-weight: 600; text-transform: uppercase; cursor: default;}
.main-submenu .nav .items li { font-size: 0; transition: all 0.05s ease-out;}
.main-submenu .nav .items li > a { display: block; position: relative; padding: 11px 17px;}
.main-submenu .nav .items li > a > .name { display: block; padding-left: 28px; font-size: 13px; line-height: 13px; font-weight: 600; color: #333;}
.main-submenu .nav .items li > a > .icon { display: block; position: absolute; left: 18px; top: 50%; transform: translateY(-50%); width: 17px; height: 17px; opacity: 0.7;}
.main-submenu .nav .items li > a > .number { position: absolute; right: 8px; top: 50%; width: 55px; transform: translateY(-50%); font-size: 12px; color: #eee; font-weight: 600; text-align: center;}
.main-submenu .nav .items li.self-cost-prices > a > .icon {width: 16px; height: 16px;}
.main-submenu .nav .items li.default-prices > a > .icon {width: 18px; height: 18px;}
.main-submenu .nav .items li:hover { position: relative; z-index: 2; background: rgba(0, 0, 0, 0.05); box-shadow: inset 0 1px 0 0 #d8d8d8, inset 0 -1px 0 0 #d8d8d8;}
.main-submenu .nav .items li:hover > a > .name { color: #111;}
.main-submenu .nav .items li.active { position: relative; z-index: 3; background: rgba(0, 0, 0, 0.05); box-shadow: 0 1px 0 0 #d8d8d8, 0 -1px 0 0 #d8d8d8;}
.main-submenu .nav .items li.active > a > .name { color: #111; font-weight: 600;}

.main-area.sticky-sidebars > .main-sidebar .nav {position: fixed; width: 250px; top: 60px;}
.main-area.sticky-sidebars > .main-submenu .nav {position: fixed; width: 240px; top: 60px;}

/* Main area: module */
.module-container > .head {display: flex; flex-flow: row nowrap; overflow: hidden; position: relative; z-index: 2; padding: 25px 17px; align-items: center; justify-content: space-between;}
.module-container > .head > h1 { display: block; flex: 1 1 auto; font-size: 26px; line-height: 30px; color: #333; cursor: default;}
.module-container > .head > .side { display: flex; flex: 0 0 auto; padding: 0 2px; align-items: center; justify-content: flex-end;}
.module-container > .head > .side > .cell { display: block; flex: 0 0 auto; padding: 0 2px;}
.module-container > .head > .side > .cell:last-child { padding-right: 0;}
.module-container > .head > .side > .cell > .im-button { margin: 0 0;}
.module-container > .content {padding: 0 17px 25px 17px;}

.im-button > i.icon.plus-white {background-image: url("../images/icons/plus-white.svg");}

table .row.mobile,
table .row.mobile > td,
table .row.mobile:hover,
table .row.mobile:hover > td {border: 0; margin: 0; padding: 0; background: none;}

.mobile-row {margin-bottom: 15px; padding: 10px 10px; box-shadow: 0 1px 3px 0 rgba(60, 60, 60, 0.2); background: #fff; border-radius: 1px;}
.mobile-row > .columns {display: flex; flex-flow: row nowrap; align-items: flex-start;}
.mobile-row > .columns > .column {display: block; flex: 1 1 auto; margin: 0 5px;}
.mobile-row > .columns > .column:first-child {margin-left: 0;}
.mobile-row > .columns > .column:last-child {margin-right: 0;}
.mobile-row > .columns > .column.x50 {width: 50%;}
.mobile-row > .columns > .column > .row {margin-bottom: 18px;}
.mobile-row > .columns > .column > .row:last-child {margin-bottom: 0;}
.mobile-row > .columns > .column > .row > .label {margin-bottom: 4px; font-size: 11px; line-height: 11px; text-transform: uppercase; color: #777; font-weight: 600;}
.mobile-row > .columns > .column > .row > .value {font-size: 14px; color: #333; font-weight: 600;}

.mobile-row > .actions {display: flex; flex-flow: row nowrap; align-items: center; border-top: 1px solid #eee; margin-top: 8px; padding-top: 8px;}
.mobile-row > .actions > .cell {flex: 1 1 auto; margin: 0 5px;}
.mobile-row > .actions > .cell:first-child {margin-left: 0;}
.mobile-row > .actions > .cell:last-child {margin-right: 0;}

@media all and (max-width: 1100px) {
    .guest-header {padding-left: 15px; padding-right: 15px;}
    .guest-header > .inner {width: 100%;}

    .main-header .inner > .toggle-nav {display: block;}
    .main-header .logo {width: 120px; background: none; border: 0; box-shadow: none;}
    .main-header .logo a {left: 0;}
    .main-header .logo a > img.white {display: none;}
    .main-header .logo a > img.black {display: block;}

    .main-header .side > .cell.user {display: none;}
    .main-header .side > .cell.initials {display: block;}

    /* no navigate */
    .main-sidebar {display: none;}
    .main-submenu {display: none;}

    /* with-sidebar (no submenu) */
    .main-area.navigate.with-sidebar > .main-sidebar {display: block; width: 250px;}

    /* with sidebar (with submenu) */
    .main-area.navigate.with-submenu > .main-sidebar {display: block; width: 50%;}
    .main-area.navigate.with-submenu > .main-submenu {display: block; width: 50%;}
    .main-area.navigate.with-submenu > .content {display: none;}

    .main-area.sticky-sidebars.with-sidebar > .main-sidebar .nav {position: static; width: 100%; top: auto;}
    .main-area.sticky-sidebars.with-submenu > .main-submenu .nav {position: static; width: 100%; top: auto;}
}

@media all and (max-width: 600px) {
    .guest-header .logo {width: 120px;}

    .main-header .side > .cell.help {display: none;}
    .main-header .side > .cell.balance {display: none;}
    .main-header .search {display: none;}
    .main-header .side > .cell.logout > .icon {width: 20px; height: 20px;}

    .module-container > .head {padding: 15px 12px;}
    .module-container > .content {padding: 0 12px 20px 12px;}

    /* with-sidebar (no submenu) */
    .main-area.with-sidebar.navigate > .main-sidebar {display: block; width: 100%;}
    .main-area.navigate > .content {display: none;}

    /* with sidebar (with submenu) */
    .main-area.navigate.with-submenu > .main-sidebar {display: block; width: 50%;}
    .main-area.navigate.with-submenu > .main-submenu {display: block; width: 50%;}
}

@media all and (max-width: 400px) {
    .guest-settings-popup {width: 100%;}
    .imjs-popup.guest-settings {width: 85%;}
}