:root {
    --padding-top : 50px;
}

* {
    -webkit-touch-callout: unset;
    -webkit-user-select: auto;
    -khtml-user-select: unset;
    -moz-user-select:unset;
    -ms-user-select:unset;
    user-select:text;
}
h2 {
    border-left  : 10px solid var(--color-surface-level-3);
    margin-left  : 2px;
    padding-left : 14px;
}


.divider.horizontal {
    margin-bottom : 20px;
}
#disclaimer {
    color           : var(--color-status-red);
    border          : 4px solid var(--color-status-red);
    border-radius   : 3px;
    font-weight     : bold;
    line-height     : 18px;
    padding         : 20px;
    margin          : 40px 0px 0px;
}
.split-left > p {
    line-height : 18px;
}
.button.icon {
    padding : 2px;
}
#themes {
    display         : flex;
    justify-content : space-between;
    padding-top     : 20px;
}
#themes span {
    line-height   : 38px;
    padding-right : 20px;
}
#themes select {
    flex-grow : 1;
    height    : 38px;
}


/*  LEFT TOOLBAR */
/* ----------------------------------------------------------------------------- */
.left-toolbar {
    display         : flex;
    flex-direction  : column;
    padding         : var(--spacer-xs) 0px;
    gap             : var(--spacer-xs);
}
.left-toolbar .button {
    margin-left : 0px;
}



/*  APP */
/* ----------------------------------------------------------------------------- */
.surface-level-2 > .tiles > .tile.max,
.tiles.xxl > .tile.max,
.tile.max {
    background  : none !important; 
    border      : none;
    cursor      : default;
    height      : 0px !important;
    width       : 0px !important;
}
.surface-level-2 > .tiles > .tile.max:hover,
.tile.max:hover {
    background : none !important;
    border     : none !important;
}
.tile.max .tile-image {
    border              : 30px solid var(--color-surface-level-2);
    border-left-width   : 60px;
    position            : absolute;
    left                : calc(50% - 600px);
}
.tile.max .tile-details {
    display     : block; 
    margin      : 0px;
    padding     : 40px 140px 40px 40px;
    position    : absolute;
    right       : calc(50% - 600px);
    left        : calc(50% - 156px);
    background  : var(--color-surface-level-2);
    height      : 196px;
}
.tile.max .tile-title {
    font-weight : 800;
    font-size   : 28px;
    line-height : 36px;
}
.tile.max .tile-subtitle {
    font-weight : 400;
    font-size   : 14px;
    line-height : 20px;
}
.close-app { 
    display     : none ; 
    position    : absolute;
    top         : 38px;
    right       : 38px;
}
.tile.max .tile-endpoint,
.tile.max .close-app { display : block ; }
.tile-endpoint {
    color       : var(--color-blue-500);
    display     : none;
    font-size   : 16px;
    font-weight : 800;
    margin      : 4px 0px 20px;
}
.surface-level-2 > .tiles > .tile.max,
.tiles.xxl > .tile.max,
.tile.max {
    background  : none !important; 
    border      : none;
    cursor      : default;
    height      : 0px !important;
    width       : 0px !important;
}


/*  INSTRUCTIONS */
/* ----------------------------------------------------------------------------- */
.instructions {
    background  : none !important;
    display     : none;
    height      : auto !important;
    margin      : 0px;
    overflow-x  : hidden;
    overflow-y  : auto;
    position    : absolute;
    top         : 320px;
    right       : calc(50% - 600px);
    bottom      : 0px;
    left        : calc(50% - 600px);
    width       : auto !important;
}
.instructions img {
    display     : block;
    margin      : 20px 0px;
    max-width   : 100%;
}
.light-theme .instructions img {
    border      : 1px solid var(--color-surface-level-4);
    max-width   : calc(100% - 2px);
}
.tiles {
    justify-content : flex-start;
    width           : calc(100% - 600px);
}
.tile.max h1 {
    margin-top : 40px;
}
.tile.max h3 {
    margin-top : 30px;
}
.tile.max h1:first-of-type {
    margin-top : 0px;
}
.tile.max .instructions {
    display         : block;
    padding-bottom  : 40px;
}
.tile.max.with-log .instructions {
    display : none;
}
p.code {
    background      : var(--color-surface-level-2);
    font-family     : 'Courier New', monospace;
    font-size       : 0.9em;
    margin-bottom   : 25px;
    padding         : 20px;
    -webkit-user-select:text;
    -webkit-touch-callout: text;
    -webkit-user-select: text;
    -khtml-user-select: text;
    -moz-user-select: text;
    -ms-user-select: text;
    user-select: all;
}
p.code > span {
    display     : block;
    line-height : 12px;
    margin      : 8px 0px; 
}
span.url {
    display : inline-block !important;
}
.indent   { padding-left :  30px; }
.indent-2 { padding-left :  60px; }
.indent-3 { padding-left :  90px; }
.indent-4 { padding-left : 120px; }
.indent-5 { padding-left : 150px; }
th {
    text-align : left;
}
td {
    border-bottom : 1px solid #eee;
}
th, td {
    padding : 5px 10px;
}
li {
    margin : 1px 0px;
}
li:last-of-type {
    margin-bottom : 15px;
}
.code .highlight {
    font-weight : bold;
}
a {
    color           : var(--color-blue-600);
    font-weight     : 700;
    text-decoration : none;
    border          : 1px solid black;
    border-radius   : 3px;
    padding         : 14px 40px;
    margin-top      : 10px;
    display         : inline-block;
}
a:hover {
    border-color : var(--color-blue-500);
}
.dark-theme a,
.black-theme a {
    background  : var(--color-blue-500);
    border      : none;
    color       : white;
}
.dark-theme a:hover,
.black-theme a:hover {
    background : var(--color-blue-600);
}



/*  CHANGE LOG */
/* ----------------------------------------------------------------------------- */
#version {
    cursor      : pointer;
    color       : var(--color-blue-500);
    font-weight : bold;
}
#framework-changes { 
    background  : black;
    color       : white;
    display     : none; 
}
#framework-changes td {
    background : black;   
}
.button.change-log {
    display  : none;
    position : absolute;
    top      : 85px;
    right    : 38px;
}
.log {
    background  : var(--color-surface-level-2);
    color       : var(--color-font);
    display     : none;
    margin      : 0px;
    padding     : 40px;
    overflow    : auto;
    position    : absolute;
    top         : 360px;
    right       : calc(50% - 600px);
    bottom      : 40px;
    left        : calc(50% - 600px);
}
.logs .tile { border :none; }
.logs .log, 
.logs .log td {
    background : var(--color-surface-level-3);
}
.tile.max.with-log .log {
    display : block;
}
.tile.max .button.change-log {
    display  : block;
    position : absolute;
}
.tile.max.with-log .button.change-log {
    background   : var(--color-blue-500);
    border-color : var(--color-blue-500);
    color        : white;
    display      : block;
}
.tile.max .log {
    /* display : block; */
    padding-bottom : 40px;
}
.log h1 {
    margin-top : 0px;
}
.log table {
    border       : none;
    table-layout : fixed;
}
.log td {
    padding    : 8px 12px;
    border-top : none;
}
.log td:first-of-type {
    width : 130px;
}
.log td:nth-child(2) {
    width : 120px;
}
.log td:last-of-type {
    padding-right : 40px;
}
body.logs .tiles-group,
body.logs .tile-image,
body.logs .tile-details,
body.logs .instructions {
    display : none !important;
}
body.logs .log {
    display    : block !important;
    margin-top : 0px;
    position   : unset;
}
body.logs .tile {
    background : none;
    height     : auto !important;
    width      : 100% !important;
}
.log tr {
    background : none !important;
}
.log td,
.log tr:last-of-type  td {
    border-bottom : 1px solid var(--color-surface-level-1) !important; 
}
.log tr:first-of-type > td {
    border-top : 1px solid var(--color-surface-level-1);
}
.log tr > td:first-of-type {
    white-space : nowrap;
}



/*  TROUBLESHOOTING */
/* ----------------------------------------------------------------------------- */
.troubleshooting-button {
    display  : none;
    position : absolute;
    top      : 133px;
    right    : 38px;
}
.tile.max .troubleshooting-button {
    display : block;
}
.tile.max.with-troubleshooting .troubleshooting-button {
    display : block;
}
.tile.max.with-troubleshooting .troubleshooting {
    display : block;
}
.troubleshooting {
    background  : var(--color-surface-level-2);
    display     : none;
    margin      : 0px;
    padding     : 40px;
    overflow    : auto;
    position    : absolute;
    top         : 360px;
    right       : calc(50% - 600px);
    bottom      : 40px;
    left        : calc(50% - 600px);
}


/*  TENANT */
/* ----------------------------------------------------------------------------- */
#tenant {
    cursor      : pointer;
    font-weight : bold;
    color       : var(--color-blue-500);
}


/*  RESPONSIVE LAYOUT */
/* ----------------------------------------------------------------------------- */
@media only screen and (max-width : 1920px)  {

    .tile.max .tile-image   { left: calc(50% - 500px); }
    .tile.max .tile-details { left: calc(50% -  55px); right: calc(50% - 500px);  }
    .tile.max .instructions,
    .tile.max .log,
    .tile.max .troubleshooting { left: calc(50% - 500px); right: calc(50% - 500px); }

}
@media only screen and (max-width : 1768px)  {

    .tile.max .tile-image   { left:  60px; }
    .tile.max .instructions { left:  60px; right : 60px; }
    .tile.max .instructions,
    .tile.max .log,
    .tile.max .troubleshooting { left:  60px; right : 60px; }

}