
body, html {
    height: 100%;
}

body {
    background-color: #dee1e5;
    margin: 0px;
    padding: 0px;
    font-family: 'Rubik';
    color: #444444;
    min-height: 100%;
}

a {
    text-decoration: none;
    color: inherit;
}

form {
    margin: 0px;
}

input {
    font-family: inherit;
}

input[type="text"], input[type="password"] {
    box-sizing: border-box;
    height: 30px;
    font-size: inherit;
    padding: 5px;
    color: inherit;
    border: solid #767676 1px;
    border-radius: 2px;
}

input[type="number"] {
    box-sizing: border-box;
    height: 25px;
    font-size: inherit;
    padding: 4px;
    margin: 0px 5px;
    color: inherit;
    vertical-align: middle;
    border: solid #767676 1px;
    border-radius: 2px;
}

input[type="checkbox"] {
    vertical-align: middle;
    margin-bottom: 2px;
}

input[type="radio"] {
    vertical-align: middle;
    margin-bottom: 3px;
}

input.native-app-checker {
    margin: 5px 5px 0px 0px;
}

div.checker-label {
    display: inline-block;
    margin: 5px 0px 0px;
}

select {
    vertical-align: middle;
    font-family: inherit;
    font-size: inherit;
    margin: 0px 10px;
    padding: 1px 10px;
}

select.target-platform {
    margin: 0px;
    padding: 4px 3px;
    width: 250px;
}

textarea {
    box-sizing: border-box;
    font-size: inherit;
    font-family: inherit;
    padding: 5px;
    vertical-align: top;
    resize: vertical;
    color: inherit;
    border: solid #767676 1px;
    border-radius: 2px;
}

textarea::-webkit-scrollbar {
    width: 5px;
}

textarea::-webkit-scrollbar-track {
    background: #c8c8c8;
}

textarea::-webkit-scrollbar-thumb {
    background: grey;
}

textarea::-webkit-scrollbar-thumb:hover {
    background: grey;
}

div.two-buttons {
    margin: auto;
}

div.two-buttons div {
    display: inline-block;
    width: 49%;
    text-align: center;
}

div.two-buttons input.button {
    display: block;
}

div.main-panel {
    width: 800px;
    height: 100%;
    margin: 0px auto;
}

div.banner {
    height: 160px;
    background-image: url("../img/banner.svg");
    background-color: #fff;
    background-repeat: no-repeat;
}

div.banner-store {
    background-image: url("../img/banner_store.svg");
}

div.banner-network {
    background-image: url("../img/banner_network.svg");
}

/* Generic classes */

.red {
    color: red;
}

.green {
    color: green;
}

.hidden {
    display: none !important;
}

.folder-item-hidden {
    display: none !important;
}

.button {
    border: none;
    color: #fff;
    background: linear-gradient(90deg, #0048a5ff 0%, #4b86d1ff 100%);
    height: 32px;
    font-size: inherit;
    display: block;
    min-width: 100px;
    padding: 0px 15px;
    margin: 20px auto 10px auto;
    font-family: inherit;
    cursor: pointer;
}

.button-like {
    border: none;
    color: #fff;
    background: linear-gradient(90deg, #0048a5ff 0%, #4b86d1ff 100%);
    height: 32px;
    font-size: inherit;
    display: inline-block;
    min-width: 100px;
    padding: 0px 15px;
    margin: 20px auto 10px auto;
    text-align: center;
    line-height: 32px;
    cursor: pointer;
}

a.colored-link {
    color: #454cff;
}

.always-scroll {
    overflow-y: scroll;
}

div.package-indicator-cont {
    margin: -155px 5px;
    float: right;
    -webkit-user-select: none;
    user-select: none;
}

div.package-indicator-menu {
    margin: 0px 5px 0px 0px;
    width: 20px;
    height: 20px;
    font-size: 16px;
    text-align: center;
    font-weight: normal;
    cursor: pointer;
    float: right;
    border-radius: 0px 10px 10px 0px;
    border-left: 1px solid white;
    color: white;
    font-family: DaysOne;
    line-height: 0.8em;
}

div.package-indicator {
    width: 100px;
    height: 20px;
    font-size: 16px;
    font-weight: normal;
    text-align: center;
    color: white;
    font-family: DaysOne;
}

div.package-indicator a {
    display: block;
}

div.package-indicator.simple {
    border-radius: 10px;
}

div.package-indicator:nth-child(2) {
    margin-right: 26px;
    border-radius: 10px 0px 0px 10px;
}
div.package-indicator:nth-child(3) {
    border-radius: 0px;
    display: none;
}
div.package-indicator:nth-child(4) {
    border-radius: 0px 0px 10px 10px;
    display: none;
}

div.package-indicator.blender {
    background: linear-gradient(45deg, rgb(255, 96, 8) 0%, rgb(233, 158, 83) 100%);
}
div.package-indicator.max {
    background: linear-gradient(45deg, rgb(0, 165, 178) 0%, rgb(81, 220, 232) 100%);
}
div.package-indicator.maya {
    background: linear-gradient(45deg, rgb(217, 20, 20) 0%, rgb(242, 123, 123) 100%);
}

div.package-indicator-menu.blender {
    background: #e99e53;
}
div.package-indicator-menu.max {
    background: #51dce8;
}
div.package-indicator-menu.maya {
    background: #f27b7b;
}

div.package-indicator-cont.menu-opened div.package-indicator:nth-child(2) {
    border-radius: 10px 0px 0px 0px;
}
div.package-indicator-cont.menu-opened div.package-indicator:nth-child(3) {
    display: block;
}
div.package-indicator-cont.menu-opened div.package-indicator:nth-child(4) {
    display: block;
}

div.package-indicator:nth-child(2) a {
    pointer-events: none;
}
div.package-indicator-cont.menu-opened div.package-indicator:nth-child(2) a {
    pointer-events: auto;
}


/* Search input */

div.search {
    float: right;
    margin: -26px 6px;
}

div.search .search-input {
    background-color: #dee1e5;
    border-style: solid;
    border-color: #b1b1b1;
    border-width: 1px;
    width: 194px;
    padding: 2px;
    height: 20px;
    background-image: url(../img/search.svg);
    background-position: center right 2px;
    background-repeat: no-repeat;
    background-size: auto 16px;
}

/* Generic central table */

.main-panel table {
    vertical-align: top;
    width: 100%;
    border-collapse: collapse;
    background-color: #eaeaea;
}

.main-panel table tr {
}

/* NOTE: requires Chrome 111+ */
.main-panel table tr:nth-child(odd of :not(.hidden)) {
    background: #fbfbfb;
}

/* NOTE: requires Chrome 111+ */
.main-panel table tr:nth-child(even of :not(.hidden)) {
    background: #f2f2f2;
}

.main-panel table th {
    color: #fff;
    background-color: #444444;
    height: 18px;
    background-image: url(../img/table_border.svg);
    background-repeat: no-repeat;
    background-position: left;
    background-size: auto 100%;
    font-size: 13px;
    font-weight: normal;
}

.main-panel table td {
    vertical-align: top;
    padding: 0px;
}

/* Main template */

table.app-list {
}

table.app-list span.app-number {
    padding-left: 0px;
    padding-right: 10px;
}

table.app-list th:nth-of-type(1) {
    width: calc(32px + 239px);
    background-image: none;
}

table.app-list td:nth-of-type(1) {
    width: 32px;
}

table.app-list td:nth-of-type(2) {
    width: 250px;
    padding: 7px;
    border-left: solid #c2c2c2ff 1px;
}

table.app-list td:nth-of-type(3) {
    width: 134px;
    padding: 2px 2px 0px 4px;
    line-height: 13px;
    border-left: solid #c2c2c2ff 1px;
}

table.app-list td:nth-of-type(4) {
    width: 134px;
    padding: 2px 2px 0px 4px;
    line-height: 13px;
    border-left: solid #c2c2c2ff 1px;
}

table.app-list td:nth-of-type(5) {
    width: 142px;
    padding: 2px 2px 0px 4px;
    line-height: 13px;
    border-left: solid #c2c2c2ff 1px;
}

/*
table.app-list th:nth-of-type(4),td:nth-of-type(5) {
    width: calc(800px - 32px - 250px - 2 * 160px);
}
*/

table.app-list a.app-non-collapsible {
    background-image: url("../img/app_collapsed.svg");
    background-repeat: no-repeat;
    width: 32px;
    height: 32px;
    display: inline-block;
    cursor: default;
    vertical-align: middle;
}

table.app-list a.app-collapsed {
    background-image: url("../img/app_expanded.svg");
    background-repeat: no-repeat;
    transform: rotate(-90deg);
    width: 32px;
    height: 32px;
    display: inline-block;
    vertical-align: middle;
}

table.app-list a.app-expanded {
    background-image: url("../img/app_expanded.svg");
    background-repeat: no-repeat;
    width: 32px;
    height: 32px;
    display: inline-block;
}


/* Manage template */

table.app-assets-list {
    padding: 0px;
    display: inline-block;
    border-collapse: collapse;
}

table.app-assets-list th {
    border-left: 0px;
    border-right: 0px;
    color: #fff;
    background-color: #444444;
    height: 18px;
    background-image: url(../img/table_border.svg);
    background-repeat: no-repeat;
    background-position: left;
    background-size: auto 100%;
    font-size: 13px;
    font-weight: normal;
}

table.app-assets-list th:nth-of-type(1) {
    background-image: none;
    width: 400px;
}

table.app-assets-list th:nth-of-type(2) {
    width: 400px;
}

table.app-assets-list td {
    padding: 0px;
    margin: 0px;
}

table.app-assets-list td:nth-of-type(1) {
    width: 29px;
    padding: 2px 1px 0px 4px;
    border-left: none;
}

table.app-assets-list td:nth-of-type(2) {
    width: calc(400px - 34px);
    word-break: break-all;
}

table.app-assets-list td:nth-of-type(3) {
    width: 29px;
    padding: 2px 0px 0px 3px;
    border-left: solid #dee1e5 1px;
}

table.app-assets-list td:nth-of-type(4) {
    width: calc(400px - 33px);
    word-break: break-all;
}

table.app-assets-list td .asset-title {
    vertical-align: top;
    display: inline-block;
    margin: 5px;
    color: inherit;
}

table.app-assets-list td .asset-title-placeholder {
    color: #dcdcdc;
}


table.app-assets-list tr.folder {
    background-color: #dee1e5;
}

table.app-assets-list tr.folder td:nth-of-type(1) {
    vertical-align: bottom;
}

table.app-assets-list tr.folder td:nth-of-type(2) {
    text-align: center;
    padding-top: 2px;
}

table.app-assets-list td.cell-cut {
    border-bottom: 1px solid #b1b1b1;
}

table.app-assets-list tr:nth-last-of-type(1) td.cell-cut {
    border-bottom: none;
}

table.network-directory {
}

table.network-directory th {
}

table.network-directory th {
    background-image: url(../img/table_border.svg);
    background-repeat: no-repeat;
    background-position: left;
    background-size: auto 100%;
}

table.network-directory th:nth-of-type(1) {
    background-image: none;
}

table.network-directory td:nth-of-type(3) {
    text-align: right;
    width: 70px;
    min-width: 70px;
    padding: 2px 5px 0px 0px;
    border-left: solid #c2c2c2ff 1px;
}

table.network-directory td:nth-of-type(4) {
    text-align: left;
    width: 140px;
    min-width: 140px;
    padding: 2px 0px 0px 5px;
    border-left: solid #c2c2c2ff 1px;
}


div.apps-empty {
    margin: 20px;
    text-align: center;
}

div.network-empty {
    margin: 20px;
    text-align: center;
}

span.network-oversize {
    color: red;
    cursor: pointer;
}

div.error-message {
    margin: 20px;
    text-align: center;
    color: red;
}

/* Table footer */

.main-panel table tfoot td {
    color: #fff;
    background-color: #444444;
    height: 18px;
    font-size: 13px;
    text-align: center;
    vertical-align: middle;
}


/* Dialogs */

.dialog-bg {
    display: none;
    position: fixed;
    align-items: center;
    justify-content: center;
    z-index: 1000;
    left: 0;
    top: 0;
    width: 100%;
    height: 100%;
    overflow: hidden;
    background-color: rgba(0,0,0,0.4);
}

.dialog {
    background-color: #f2f2f2;
    padding: 0px;
    min-width: 300px;
    max-width: 800px;
    max-height: 600px;
    overflow: hidden;
    filter: drop-shadow(0px 0px 6px #00000034);
}

.dialog-header {
    width: 100%;
    height: 20px;
    background-color: #444444;
}

.dialog-header-text {
    display: inline-block;
    color: #fff;
    font-size: 12px;
    padding: 4px 10px 0px 10px;
}

.dialog-header-close {
    display: inline-block;
    float: right;
    background-image: url("../img/dialog_close.svg");
    background-repeat: no-repeat;
    width: 16px;
    height: 14px;
    margin: 3px 6px 0px 0px;
}

.dialog-header-close:hover {
    cursor: pointer;
}

.dialog-header-help {
    display: inline-block;
    float: right;
    background-image: url("../img/dialog_help.svg");
    background-repeat: no-repeat;
    width: 16px;
    height: 14px;
    margin: 3px 6px 0px 0px;
    cursor: pointer;
}

.dialog-content {
    padding: 10px;
    border: solid #444444ff 1px;
    overflow-y: auto;
    overflow-x: hidden;
    max-height: 560px;
}

.dialog-icon {
    background-repeat: no-repeat;
    background-position: center;
    float: left;
    width: 90px;
    height: 90px;
}

.dialog-icon-delete {
    background-image: url("../img/dialog_icon_delete.svg");
    height: 100px;
    margin: 0px -10px 0px 20px;
}

.delete-button {
    background: #c50000;
}

.dialog-radio {
    margin: 0px 10px;
}

.dialog-text-delete {
    padding: 0px 30px;
    text-align: center;
}

.dialog-text-creating-native-app {
    margin-top: 20px;
    text-align: center;
}

.dialog-text-creating-scorm {
    margin-top: 20px;
    text-align: center;
}

.dialog-icon-about {
    background-image: url("../img/dialog_icon_about.svg");
    background-repeat: no-repeat;
    width: 82px;
    height: 180px;
    margin-left: 20px;
    margin-right: 20px;
}

.dialog-icon-help {
    background-image: url("../img/dialog_icon_help.svg");
    background-repeat: no-repeat;
    height: 160px;
    margin: 0px 30px 0px 30px;
}

.dialog-right-content-short {
    display: inline-block;
    width: 350px;
    margin-left: 10px
}

.dialog-right-content-long {
    display: inline-block;
    width: 450px;
    margin-left: 10px
}

.dialog-text {
    margin: 5px 0px;
    vertical-align: middle;
}

.dialog-text-center {
    margin: 10px 0px;
    text-align: center;
    vertical-align: middle;
}

.dialog-num-input {
    width: 65px;
}

input.dialog-num-port-input {
    width: 80px;
    height: 30px;
    margin: 0px 5px;
}

input.dialog-user-host-input {
    margin: 0px 5px;
}

.dialog-semi-wide-input {
    width: 250px;
}

.dialog-wide-input {
    width: 390px;
    margin: 0px 5px;
}

.dialog-wider-input {
    width: 430px;
    margin: 0px 5px;
}

/* Publishing / published dialogs */

.spinner-preloader-cont {
    width: 160px;
    margin: 15px auto 20px;
    overflow: hidden;
}

.spinner-preloader {
    margin-left: auto;
    margin-right: auto;
    background-image: url("../img/spinner_preloader.svg");
    width: 150px;
    height: 150px;
    -webkit-animation: spin 2s linear infinite; /* Safari */
    animation: spin 2s linear infinite;
}

@-webkit-keyframes spin {
    0% { -webkit-transform: rotate(0deg); }
    100% { -webkit-transform: rotate(360deg); }
}

@keyframes spin {
    0% { transform: rotate(0deg); }
    100% { transform: rotate(360deg); }
}


.spinner-preloader-percentage {
    position: relative;
    float: left;
    top: 57px;
    left: 53px;
    text-align: center;
    display: inline;
    font-size: 25px;
    min-width: 65px;
}

.published-cont {
    max-width: 620px;
    margin: 0px;
    padding: 0px;
}

.published-item-frame {
    border-style: solid;
    border-color: #b1b1b1;
    border-width: 1px;
    padding-bottom: 10px;
}

.published-item-header {
    background-color: #fff;
    padding: 5px 8px;
}

.published-item-snippets {
    margin: 0px 8px;
}

.published-app-icon {
    margin-right: 5px;
}

.published-socials {
    float: right;
}

.network-directory-icon {
    background-image: url("../img/network_directory.svg");
    width: 180px;
    height: 28px;
    display: inline-block;
    vertical-align: middle;
    margin: 0px 10px;
}

.published-trialwarning {
    font-size: 13px;
    color: red;
    margin: auto;
}


textarea.published-snippet {
    font-size: inherit;
    font-family: inherit;
    padding: 5px;
    vertical-align: top;
    width: 100%;
}

.clipboard-copy {
    background-image: url("../img/clipboard_copy.svg");
    width: 20px;
    height: 20px;
    vertical-align: middle;
    display: inline-block;
    margin: 0px 5px;
}

/* New app dialog */

.new-app-cont {
    min-width: 500px;
}

input.new-app-disp-name {
    width: 100%;
    background-color: #dee1e5;
    user-select: none;
    border-width: 0px;
    cursor: default;
}

.new-app-name {
    width: 100%
}

.new-app-frame {
    border-style: solid;
    border-color: #b1b1b1;
    border-width: 1px;
    margin: 20px 0px 0px 0px;
    padding: 5px;
}

.new-app-checker {
    margin: 0px 8px;
}

.new-app-types {
    display: inline-block;
    vertical-align: top;
    width: 47%;
}

.new-app-modules {
    display: inline-block;
    vertical-align: top;
    width: 49%;
    border-left: 1px solid #b1b1b1;
    padding-left: 2%;
}

/* App templates dialog */

.app-template-item {
    padding: 5px 0px 5px 10px;
}

.app-template-item-last {
    height: 23px;
    padding-top: 10px;
    font-weight: bold;
}

div div.app-template-item:nth-of-type(odd) {
    background-color: white;
}

.app-template-new {
    background-image: url("../img/app_template_new.svg");
    width: 28px;
    height: 28px;
    display: inline-block;
    float: right;
    margin-right: 3px;
    margin-top:-4px;
    cursor: pointer;
}

.app-template-description-area {
    max-width: 340px;
    min-width: 340px;
    max-height: 150px;
    min-height: 50px;
}

.app-template-delete {
    background-image: url("../img/app_icon_delete.svg");
    width: 28px;
    height: 28px;
    display: inline-block;
    vertical-align: top;
    margin: 12px 3px 0px;
    cursor: pointer;
}

/* Global Settings dialog */

#diaSettingsContent {
    padding: 0px;
    overflow: hidden;
}

form.settings-form {
    min-width: 600px;
    max-height: 292px;
    min-height: 292px;
    margin: 0px;
    overflow-y: auto;
}

form.settings-form::-webkit-scrollbar {
    width: 5px;
}

form.settings-form::-webkit-scrollbar-track {
    background: #c8c8c8;
}

form.settings-form::-webkit-scrollbar-thumb {
    background: grey;
}

form.settings-form::-webkit-scrollbar-thumb:hover {
    background: grey;
}

input.settings-checker {
    margin-right: 10px;
    margin-bottom: 5px;
}

input.external-address {
    width: 100%;
}

.settings-text {
    line-height: 25px;
}

.settings-button {
    margin: 10px auto;
}

.settings-theme {
    background-color: #dee1e5ff;
    border-radius: 0px;
    border-width: 1px;
    margin: 0px 5px;
}

div.settings-left-panel {
    float: left;
    width: 100px;
    height: 347px;
    background-color: #c8c8c8;
    text-align: center;
}

.settings-left-item {
    padding: 4px;
    font-size: 14px;
    cursor: pointer;
}

.settings-left-item:hover {
    background-color: #dee1e5;
}


.settings-left-item-active {
    background: linear-gradient(90deg, #0048a5ff 0%, #4b86d1ff 100%);
    color: white;
}

div.settings-general {
    margin: 0px 10px;
}

div.settings-ui {
    margin: 10px 10px;
}

div.settings-puzzles {
    margin: 0px 10px;
}

div.settings-network {
    margin: 0px 10px;
}

div.settings-select-folder-cont {
    position: relative;
    left: -36px;
    top: -15px;
    width: 0px;
    height: 0px;
    display: inline-block;
}

div.settings-select-folder {
    background-image: url("../img/settings_select_folder.svg");
    width: 20px;
    height: 20px;
    cursor: pointer;
}

hr.settings {
    margin: 0px;
}

/* App Settings dialog */

#diaAppSettingsContent {
    padding: 0px;
    overflow: hidden;
}

div.settings-left-panel.app-settings {
    height: 500px;
}

form.app-settings {
    min-height: 445px;
    max-height: 445px;
    overflow-x: hidden;
    overflow-y: scroll;
}

form.app-settings::-webkit-scrollbar {
    width: 5px;
}

form.app-settings::-webkit-scrollbar-track {
    background: #c8c8c8;
}

form.app-settings::-webkit-scrollbar-thumb {
    background: grey;
}

form.app-settings::-webkit-scrollbar-thumb:hover {
    background: grey;
}

hr.app-settings {
    margin: 0px;
}

table.app-settings {
    min-width: 600px;
    border-collapse: collapse;
}

table.app-settings tr td:nth-child(1) {
    min-width: 210px;
    max-width: 210px;
    text-align: center;
}

table.app-settings tr:nth-child(odd) {
    background: #fbfbfb;
}

table.app-settings tr:nth-child(even) {
    background: #f2f2f2;
}

table.app-settings tr.more-height {
    height: 46px;
}

input.app-settings-text, textarea.app-settings-textarea {
    width: 380px;
    margin: 7px 0px;
    font-size: 15px;
}

input.app-settings-inline-text {
    width: 322px;
    margin: 7px 0px;
    font-size: 15px;
}

button.app-settings-button {
    background: linear-gradient(90deg, #0048a5ff 0%, #4b86d1ff 100%);
    color: white;
    border: none;
    height: 30px;
    font-size: 15px;
    padding: 0px 10px;
    margin: 0px 25px;
    cursor: pointer;
}

button.app-settings-button.inactive {
    cursor: default;
    background: lightgray;
}

input.app-settings-color-input {
    margin: 3px 0px;
    font-size: 15px;
    height: 30px;
    padding: 0;
    border: none;
    background: none;
    cursor: pointer;
    vertical-align: middle;
}

label.app-settings-input-label {
    vertical-align: middle;
}

label.app-settings-img-label {
    border: solid #767676 1px;
    display: inline-block;
    background-color: white;
    padding: 3px 5px;
    margin-top: 13px;
    vertical-align: top;
    width: 310px;
    border-radius: 2px;
    cursor: pointer;
}

label.app-settings-img-label.large {
    width: 368px;
    margin-top: 10px;
}

div.app-settings-img-name {
    display: inline-block;
    padding: 2px 0px;
    font-size: 15px;
}

div.app-settings-img-browse {
    background-image: url("../img/settings_select_folder.svg");
    float: right;
    width: 20px;
    height: 20px;
}

div.app-settings-img-cont {
    background: url("../img/checker.png") repeat;
    background-size: 15px;
    position: relative;
    vertical-align: top;
}

div.app-settings-img-cont.small {
    display: inline-block;
    width: 50px;
    height: 50px;
    margin: 2px 0px;
    border: solid #767676 0.5px;
}

div.app-settings-img-cont.wide {
    display: block;
    width: 380px;
    height: 200px;
    margin: 10px 0px;
    border: solid #767676 1px;
}

div.app-settings-img-cont.large {
    display: block;
    width: 380px;
    height: 250px;
    margin: 10px 0px;
    border: solid #767676 1px;
    border-radius: 2px;
}

img.app-settings-img {
    position: absolute;
    transform: translate(-50%, -50%);
    top: 50%;
    left: 50%;
}

img.app-settings-img.small {
    max-width: 50px;
    max-height: 50px;
}

img.app-settings-img.wide {
    max-width: 380px;
    max-height: 200px;
}

img.app-settings-img.large {
    max-width: 380px;
    max-height: 250px;
}

select.app-settings-select {
    margin: 7px 0px;
    font-size: 15px;
    background-color: #dee1e5ff;
    border-radius: 0px;
    border-width: 1px;
}

div.pixel-units::after {
    content: " px";
    vertical-align: middle;
}

div.pixel-units input[type="number"] {
    margin: 7px 0px 7px 2px;
    width: 50px;
}

div.pixel-units.sameline {
    display: inline-block;
    margin-right: 10px;
}

div.pixel-units.sameline input[type="number"] {
    width: 65px;
}


/* License dialogs */

.license-info-cont {
    width: 700px;
}

.license-two-buttons {
    width: 50%;
}

.dialog-key-input {
    width: 590px;
    display: block;
    margin: 10px;
}

/* Help dialog */

.help-link-text {
    padding: 4px;
    display: inline-block;
}

.help-link-icon {
    display: inline-block;
    width: 28px;
    height: 28px;
    vertical-align: bottom;
}

.help-link-icon-manual {
    background-image: url("../img/help_link_manual.svg");
}

.help-link-icon-forums {
    background-image: url("../img/help_link_forums.svg");
}

.help-link-icon-code-examples {
    background-image: url("../img/help_link_manual.svg");
}

.help-link-icon-webgl-report {
    background-image: url("../img/help_link_webgl_report.svg");
}

/* About dialog */

.dialog-about-line {
    margin: 10px 0px;
}

.dialog-about-indent {
    margin-left: 5px;
}

.share-icon {
    display: inline-block;
    width: 28px;
    height: 28px;
    vertical-align: middle;
}

.share-icon-facebook {
    background-image: url("../img/share_icon_facebook.svg");
}

.share-icon-linkedin {
    background-image: url("../img/share_icon_linkedin.svg");
}

.share-icon-qrcode {
    background-image: url("../img/share_icon_qrcode.svg");
    margin-left: 10px;
}

.share-icon-reddit {
    background-image: url("../img/share_icon_reddit.svg");
}

.share-icon-twitter {
    background-image: url("../img/share_icon_twitter.svg");
}

.share-icon-vk {
    background-image: url("../img/share_icon_vk.svg");
}

.share-icon-weibo {
    background-image: url("../img/share_icon_weibo.svg");
}

.share-icon-youtube {
    background-image: url("../img/share_icon_youtube.svg");
}

.share-icon-telegram {
    background-image: url("../img/share_icon_telegram.svg");
}


/* App list icons (buttons) */

.app-icon {
    background-repeat: no-repeat;
    display: inline-block;
    width: 26px;
    height: 28px;
    vertical-align: middle;
    padding-bottom: 2px;
}

.app-title {
}

.app-title:hover, a.asset-title:hover  {
    font-weight: 600;
    color: black;
}

.app-icon:hover {
    filter: brightness(1.1);
    transform: scale(1.05);
}

.app-icon.app-icon-html {
    background-image: url("../img/app_icon_html.svg");
}

.app-icon.app-icon-html-main {
    background-image: url("../img/app_icon_html_main.svg");
}

.app-icon.app-icon-gltf {
    background-image: url("../img/app_icon_gltf.svg");
}

.app-icon.app-icon-blend {
    background-image: url("../img/app_icon_blend.svg");
}

.app-icon.app-icon-blend-main {
    background-image: url("../img/app_icon_blend_main.svg");
}

.app-icon.app-icon-max {
    background-image: url("../img/app_icon_max.svg");
}

.app-icon.app-icon-max-main {
    background-image: url("../img/app_icon_max_main.svg");
}

.app-icon.app-icon-maya {
    background-image: url("../img/app_icon_maya.svg");
}

.app-icon.app-icon-maya-main {
    background-image: url("../img/app_icon_maya_main.svg");
}

.app-icon.app-icon-puzzles-inactive {
    background-image: url("../img/app_icon_puzzles_new.svg");
    width: 28px;
    opacity: 0.3;
}

.app-icon.app-icon-puzzles-inactive:hover {
    cursor: default;
    filter: none;
    transform: none;
}

.app-icon.app-icon-puzzles-edit {
    background-image: url("../img/app_icon_puzzles_edit.svg");
    width: 28px;
}

.app-icon.app-icon-open-folder {
    background-image: url("../img/app_icon_open_folder.svg");
    width: 28px;
}

.app-icon.app-icon-publish-dir {
    background-image: url("../img/app_icon_publish_dir.svg");
    width: 28px;
}

.app-icon.app-icon-publish-zip {
    background-image: url("../img/app_icon_publish_zip.svg");
    width: 28px;
}

.app-icon.app-icon-update {
    background-image: url("../img/app_icon_update.svg");
    width: 28px;
}

.app-icon.app-icon-update-inactive {
    background-image: url("../img/app_icon_update_inactive.svg");
    width: 28px;
}

.app-icon.app-icon-update-inactive:hover {
    cursor: default;
    filter: none;
    transform: none;
}

.app-icon.app-icon-delete {
    background-image: url("../img/app_icon_delete.svg");
    width: 28px;
}

.app-icon.app-icon-folder-opened {
    background-image: url("../img/app_icon_folder_opened.svg");
}

.app-icon.app-icon-folder-closed {
    background-image: url("../img/app_icon_folder_closed.svg");
}

.app-icon.app-icon-placeholder-run {
    background-image: url("../img/app_icon_placeholder_run.svg");
}

.app-icon.app-icon-placeholder-run:hover {
    filter: none;
    transform: none;
}

.app-icon.app-icon-placeholder-scene {
    background-image: url("../img/app_icon_placeholder_scene.svg");
}

.app-icon.app-icon-placeholder-scene:hover {
    filter: none;
    transform: none;
}

.open-close-folder {
    background-repeat: no-repeat;
    background-position: center top;
    background-size: 14px;
    display: inline-block;
    width: 16px;
    height: 16px;
    vertical-align: middle;
    padding: 0px 5px 7px 5px;
}

.open-close-folder.opened {
    background-image: url("../img/open_close_folder_opened.svg");
}

.open-close-folder.closed {
    background-image: url("../img/open_close_folder_closed.svg");
}


/* Network file icons */

.net-file-icon {
    background-repeat: no-repeat;
    display: inline-block;
    width: 14px;
    height: 16px;
    vertical-align: bottom;
    margin-bottom: 1px;
}

.net-file-icon.net-file-icon-archive {
    background-image: url("../img/net_file_icon_archive.svg");
}

.net-file-icon.net-file-icon-blender {
    background-image: url("../img/net_file_icon_blender.svg");
}

.net-file-icon.net-file-icon-code {
    background-image: url("../img/net_file_icon_code.svg");
}

.net-file-icon.net-file-icon-folder {
    background-image: url("../img/net_file_icon_folder.svg");
    width: 16px;
}

.net-file-icon.net-file-icon-font {
    background-image: url("../img/net_file_icon_font.svg");
}

.net-file-icon.net-file-icon-gltf {
    background-image: url("../img/net_file_icon_gltf.svg");
}

.net-file-icon.net-file-icon-html {
    background-image: url("../img/net_file_icon_html.svg");
}

.net-file-icon.net-file-icon-image {
    background-image: url("../img/net_file_icon_image.svg");
}

.net-file-icon.net-file-icon-max {
    background-image: url("../img/net_file_icon_max.svg");
}

.net-file-icon.net-file-icon-maya {
    background-image: url("../img/net_file_icon_maya.svg");
}

.net-file-icon.net-file-icon-other {
    background-image: url("../img/net_file_icon_other.svg");
}

.net-file-icon.net-file-icon-sound {
    background-image: url("../img/net_file_icon_sound.svg");
}

.net-file-icon.net-file-icon-vector {
    background-image: url("../img/net_file_icon_vector.svg");
}

/* Main (left) toolbar */

div.toolbar {
    position: fixed;
    width: 60px;
    background-color: #444444;
    top: 50%;
    transform: translate(0%, -50%);
}

a.toolbar-icon {
    background-repeat: no-repeat;
    display: inline-block;
    width: 60px;
    height: 60px;
    vertical-align: top;
}

a.toolbar-icon:hover, a.toolbar-app-icon:hover, a.toolbar-network-icon:hover, a.toolbar-store-icon:hover {
    filter: drop-shadow(0px 0px 4px #c8c8c8ff);
}

a.toolbar-icon.toolbar-icon-home {
    background-image: url("../img/toolbar_icon_home.svg");
}

a.toolbar-icon.toolbar-icon-home.toolbar-icon-active {
    background-image: url("../img/toolbar_icon_home.svg"), linear-gradient(45deg, #165ab0, #4287df);
}

a.toolbar-icon.toolbar-icon-home.toolbar-icon-active:hover {
    filter: none;
}

a.toolbar-icon.toolbar-icon-store {
    background-image: url("../img/toolbar_icon_store.svg");
}
a.toolbar-icon.toolbar-icon-store.toolbar-icon-active {
    background-image: url("../img/toolbar_icon_store.svg"), linear-gradient(45deg, #165ab0, #4287df);
}
a.toolbar-icon.toolbar-icon-store.toolbar-icon-active:hover {
    filter: none;
}

a.toolbar-icon.toolbar-icon-new-app {
    background-image: url("../img/toolbar_icon_new_app.svg");
}

a.toolbar-icon.toolbar-icon-new-app.toolbar-icon-active {
    background-image: url("../img/toolbar_icon_new_app.svg"), linear-gradient(45deg, #165ab0, #4287df);
}

a.toolbar-icon.toolbar-icon-templates {
    background-image: url("../img/toolbar_icon_templates.svg");
}
a.toolbar-icon.toolbar-icon-templates.toolbar-icon-active {
    background-image: url("../img/toolbar_icon_templates.svg"), linear-gradient(45deg, #165ab0, #4287df);
}

a.toolbar-icon.toolbar-icon-settings {
    background-image: url("../img/toolbar_icon_settings.svg");
}
a.toolbar-icon.toolbar-icon-settings.toolbar-icon-active {
    background-image: url("../img/toolbar_icon_settings.svg"), linear-gradient(45deg, #165ab0, #4287df);
}

a.toolbar-icon.toolbar-icon-network {
    background-image: url("../img/toolbar_icon_network.svg");
}
a.toolbar-icon.toolbar-icon-network.toolbar-icon-active {
    background-image: url("../img/toolbar_icon_network.svg"), linear-gradient(45deg, #165ab0, #4287df);
}

a.toolbar-icon.toolbar-icon-network.toolbar-icon-active:hover {
  filter: none;
}

a.toolbar-icon.toolbar-icon-license {
    background-image: url("../img/toolbar_icon_license.svg");
}
a.toolbar-icon.toolbar-icon-license.toolbar-icon-active {
    background-image: url("../img/toolbar_icon_license.svg"), linear-gradient(45deg, #165ab0, #4287df);
}

a.toolbar-icon.toolbar-icon-help {
    background-image: url("../img/toolbar_icon_help.svg");
}
a.toolbar-icon.toolbar-icon-help.toolbar-icon-active {
    background-image: url("../img/toolbar_icon_help.svg"), linear-gradient(45deg, #165ab0, #4287df);
}

a.toolbar-icon.toolbar-icon-about {
    background-image: url("../img/toolbar_icon_about.svg");
}
a.toolbar-icon.toolbar-icon-about.toolbar-icon-active {
    background-image: url("../img/toolbar_icon_about.svg"), linear-gradient(45deg, #165ab0, #4287df);
}

div.toolbar-separator {
    border-top: solid #c2c2c2ff 1px;
}

.toolbar-icon-dot-red {
    height: 15px;
    width: 15px;
    background-color: red;
    border-radius: 50%;
    display: inline-block;
    float: right;
    margin: 5px;
}

.toolbar-icon-dot-orange {
    height: 15px;
    width: 15px;
    background-color: orange;
    border-radius: 50%;
    display: inline-block;
    float: right;
    margin: 5px;
}

/* App (right) toolbar */

div.toolbar-app {
    position: fixed;
    right: 0px;
    width: 60px;
    background-color: #444444;
    top: 50%;
    transform: translate(0%, -50%);
}

a.toolbar-app-icon {
    background-repeat: no-repeat;
    display: inline-block;
    width: 60px;
    height: 60px;
    vertical-align: top;
}

a.toolbar-app-icon.toolbar-app-icon-puzzles-edit {
    background-image: url("../img/toolbar_app_icon_puzzles_edit.svg");
}

a.toolbar-app-icon.toolbar-app-icon-open-folder {
    background-image: url("../img/toolbar_app_icon_open_folder.svg");
}

a.toolbar-app-icon.toolbar-app-icon-settings {
    background-image: url("../img/toolbar_app_icon_settings.svg");
}

a.toolbar-app-icon.toolbar-app-icon-settings.toolbar-icon-active {
    background-image: url("../img/toolbar_app_icon_settings.svg"), linear-gradient(45deg, #165ab0, #4287df);
}

a.toolbar-app-icon.toolbar-app-icon-publish-dir {
    background-image: url("../img/toolbar_app_icon_publish_dir.svg");
}

a.toolbar-app-icon.toolbar-app-icon-publish-dir.toolbar-icon-active {
    background-image: url("../img/toolbar_app_icon_publish_dir.svg"), linear-gradient(45deg, #165ab0, #4287df);
}

a.toolbar-app-icon.toolbar-app-icon-publish-zip {
    background-image: url("../img/toolbar_app_icon_publish_zip.svg");
}

a.toolbar-app-icon.toolbar-app-icon-publish-zip.toolbar-icon-active {
    background-image: url("../img/toolbar_app_icon_publish_zip.svg"), linear-gradient(45deg, #165ab0, #4287df);
}

a.toolbar-app-icon.toolbar-app-icon-create-native-app {
    background-image: url("../img/toolbar_app_icon_desktop_mobile.svg");
}

a.toolbar-app-icon.toolbar-app-icon-create-native-app.toolbar-icon-active {
    background-image: url("../img/toolbar_app_icon_desktop_mobile.svg"), linear-gradient(45deg, #165ab0, #4287df);
}

a.toolbar-app-icon.toolbar-app-icon-create-scorm {
    background-image: url("../img/toolbar_app_icon_scorm.svg");
}

a.toolbar-app-icon.toolbar-app-icon-create-scorm.toolbar-icon-active {
    background-image: url("../img/toolbar_app_icon_scorm.svg"), linear-gradient(45deg, #165ab0, #4287df);
}

a.toolbar-app-icon.toolbar-app-icon-delete {
    background-image: url("../img/toolbar_app_icon_delete.svg");
}

a.toolbar-app-icon.toolbar-app-icon-delete.toolbar-icon-active {
    background-image: url("../img/toolbar_app_icon_delete.svg"), linear-gradient(45deg, #165ab0, #4287df);
}

a.toolbar-app-icon.toolbar-app-icon-update {
    background-image: url("../img/toolbar_app_icon_update.svg");
}

a.toolbar-app-icon.toolbar-app-icon-update.toolbar-icon-active {
    background-image: url("../img/toolbar_app_icon_update.svg"), linear-gradient(45deg, #165ab0, #4287df);
}

/* Network (right) toolbar */

div.toolbar-network {
    position: fixed;
    right: 0px;
    width: 60px;
    background-color: #444444;
    top: 50%;
    transform: translate(0%, -50%);
}

a.toolbar-network-icon {
    background-repeat: no-repeat;
    display: inline-block;
    width: 60px;
    height: 60px;
    vertical-align: top;
}

a.toolbar-network-icon.toolbar-network-icon-download {
    background-image: url("../img/toolbar_app_icon_publish_dir.svg");
    transform: scaleY(-1);
}

a.toolbar-network-icon.toolbar-network-icon-delete {
    background-image: url("../img/toolbar_app_icon_delete.svg");
}

/* Store (right) toolbar */

div.toolbar-store {
    position: fixed;
    right: 0px;
    width: 40px;
    background-color: #444444;
    top: 50%;
    transform: translate(0%, -50%);
}

a.toolbar-store-icon {
    vertical-align: top;
    background-repeat: no-repeat;
    background-size: 100%;
    display: inline-block;
    width: 40px;
    height: 40px;
}

a.toolbar-store-icon.toolbar-store-icon-all {
    background-image: url("../img/toolbar_store_icon_all.svg");
}
a.toolbar-store-icon.toolbar-store-icon-all.toolbar-icon-active {
    background-image: url("../img/toolbar_store_icon_all.svg"), linear-gradient(45deg, #165ab0, #4287df);
}
a.toolbar-store-icon.toolbar-store-icon-all.toolbar-icon-active:hover {
    filter: none;
}

a.toolbar-store-icon.toolbar-store-icon-demos {
    background-image: url("../img/toolbar_store_icon_demos.svg");
}
a.toolbar-store-icon.toolbar-store-icon-demos.toolbar-icon-active {
    background-image: url("../img/toolbar_store_icon_demos.svg"), linear-gradient(45deg, #165ab0, #4287df);
}
a.toolbar-store-icon.toolbar-store-icon-demos.toolbar-icon-active:hover {
    filter: none;
}

a.toolbar-store-icon.toolbar-store-icon-tutorials {
    background-image: url("../img/toolbar_store_icon_tutorials.svg");
}
a.toolbar-store-icon.toolbar-store-icon-tutorials.toolbar-icon-active {
    background-image: url("../img/toolbar_store_icon_tutorials.svg"), linear-gradient(45deg, #165ab0, #4287df);
}
a.toolbar-store-icon.toolbar-store-icon-tutorials.toolbar-icon-active:hover {
    filter: none;
}

a.toolbar-store-icon.toolbar-store-icon-examples {
    background-image: url("../img/toolbar_store_icon_examples.svg");
}
a.toolbar-store-icon.toolbar-store-icon-examples.toolbar-icon-active {
    background-image: url("../img/toolbar_store_icon_examples.svg"), linear-gradient(45deg, #165ab0, #4287df);
}
a.toolbar-store-icon.toolbar-store-icon-examples.toolbar-icon-active:hover {
    filter: none;
}

a.toolbar-store-icon.toolbar-store-icon-libraries {
    background-image: url("../img/toolbar_store_icon_libraries.svg");
}
a.toolbar-store-icon.toolbar-store-icon-libraries.toolbar-icon-active {
    background-image: url("../img/toolbar_store_icon_libraries.svg"), linear-gradient(45deg, #165ab0, #4287df);
}
a.toolbar-store-icon.toolbar-store-icon-libraries.toolbar-icon-active:hover {
    filter: none;
}

/* Splash screen dialog */

#diaSplashScreenContent {
    padding: 0px;
}

div.splash-title {
    position: relative;
}

div.splash-title-image {
    background-image: url("../img/splash_title_image.png");
    width: 236px;
    height: 150px;
    display: inline-block;
}

div.splash-title-text {
    float: right;
    text-align: center;
    margin: 0px 30px;
}

div.splash-title-text-top {
    font-size: 45px;
    line-height: 74px;
    color: #0149a5;
}

div.splash-title-text-bottom {
    font-size: 34px;
    line-height: 56px;
    color: white;
}

div.splash-title-bar {
    position: absolute;
    height: 48px;
    width: 574px;
    top: 80px;
    z-index: -1;
    background: linear-gradient(90deg, #0048a5ff 0%, #4b86d1ff 100%);
}

div.splash-incompatible {
    padding: 10px 20px;
    color: white;
    background: linear-gradient(90deg, #aa0000 0%, #dd0000 100%);
    text-align: center;
    max-width: 534px;
}

div.splash-settings-container {
    padding: 0px 10px;
}

/* Demo Store */

table.asset-store th:nth-of-type(1) {
    background-image: none;
}

table.asset-store tbody td:nth-of-type(1) {
    padding: 10px;
}

table.asset-store tbody td:nth-of-type(2) {
    padding: 20px;
}

td.asset-store-item {
    position: relative;
}

td.asset-store-item p {
    margin: 0px;
}

div.asset-store-item-bar {
    position: absolute;
    height: 30px;
    width: 400px;
    top: 190px;
    z-index: 1;
    background: #292929a0;
    line-height: 30px;
    font-size: 18px;
}

span.asset-store-item-title {
    color: white;
}

span.asset-store-item-type {
    color: #6494d3;
    padding: 0px 10px;
}

span.asset-store-item-price {
    margin-left: 15px;
    color: #00b540;
}

div.asset-store-icons-invisible-bar {
    position: absolute;
    align-self: flex-end;
    height: 30px;
    bottom: 10px;
    z-index: 1;
    line-height: 30px;
    width: 340px;
    text-align: right;
}

img.asset-store-image {
    width: 400px;
    height: auto;
    filter: drop-shadow(0px 0px 4px #C7C7C7);
}

img.asset-store-image:hover {
    cursor: pointer;
    filter: brightness(1.1) contrast(95%) drop-shadow(0px 0px 4px #737373);
}

div.asset-store-icon-blender {
    background-image: url("../img/demo_store_icon_blender.svg");
    background-repeat: no-repeat;
    display: inline-block;
    vertical-align: top;
    width: 40px;
    height: 30px;
}

div.asset-store-icon-max {
    background-image: url("../img/demo_store_icon_max.svg");
    background-repeat: no-repeat;
    display: inline-block;
    vertical-align: top;
    width: 40px;
    height: 30px;
}

div.asset-store-icon-maya {
    background-image: url("../img/demo_store_icon_maya.svg");
    background-repeat: no-repeat;
    display: inline-block;
    vertical-align: top;
    width: 40px;
    height: 30px;
}

div.asset-store-icon-price {
    background-image: url("../img/demo_store_icon_price.svg");
    background-repeat: no-repeat;
    display: inline-block;
    vertical-align: top;
    width: 40px;
    height: 30px;
    padding-right: 20px;
    float: right;
}

a.asset-store-icon-run {
    background-image: url("../img/app_icon_html_main.svg");
    background-repeat: no-repeat;
    display: inline-block;
    width: 28px;
    height: 28px;
}

a.asset-store-icon-download {
    background-image: url("../img/demo_store_icon_download.svg");
    background-repeat: no-repeat;
    display: inline-block;
    width: 28px;
    height: 28px;
}

a.asset-store-icon-buy {
    background-image: url("../img/demo_store_icon_buy.svg");
    background-repeat: no-repeat;
    display: inline-block;
    width: 28px;
    height: 28px;
}

div.asset-store-item-spacing {
    height: 30px;
}

#puzzles-launchers-menu {
    display: none;
    position: fixed; /* Use fixed positioning for reliable placement */
    background-color: #fff;
    border: 1px solid #ccc;
    box-shadow: 2px 2px 6px rgba(0, 0, 0, 0.3);
    padding: 5px 0;
    list-style: none;
    z-index: 1000;
}

#puzzles-launchers-menu.show {
    display: block;
}

#puzzles-launchers-menu ul {
    list-style: none;
    padding: 0;
    margin: 0;
}

#puzzles-launchers-menu li a {
    display: inline-block;
    padding: 5px 15px;
}

#puzzles-launchers-menu li:hover {
    background-color: #f0f0f0;
}
