:root {
    --padding-top : 50px;
    --width-side : 360px;
}

* {
    -webkit-touch-callout: unset;
    -webkit-user-select: auto;
    -khtml-user-select: unset;
    -moz-user-select:unset;
    -ms-user-select:unset;
    user-select:text;
}


#side {
    border-width    : 60px 80px;
    position        : absolute;
    top             : 0px;
    bottom          : 0px;
    left            : 0px;
    overflow-y      : auto;
    width           : var(--width-side);
}
#main {
    border-width    : 60px 60px;
    position        : absolute;
    top             : 0px;
    right           : 0px;
    bottom          : 0px;
    left            : 0px;
    overflow-y      : auto;
    left            : calc(var(--width-side) + 160px);
}


/*  SIDE PANEL */
/* ----------------------------------------------------------------------------- */
#side-title {
    border-bottom   : 1px solid var(--color-surface-level-5);
    font-size       : 28px;
    font-weight     : 800;
    line-height     : 36px;
    margin-bottom   : 12px;
    padding         : 18px; 
}
.side-toolbar {
    display         : flex;
    flex-direction  : column;
    gap             : 6px;
}
#themes {
    display         : flex;
    justify-content : space-between;
    margin-bottom   : 20px;
    padding-top     : 20px;
}
#themes span {
    line-height   : 38px;
    padding-right : 20px;
}
#themes select {
    flex-grow : 1;
    height    : 38px;
}
#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          : 20px 0px 30px;
}


/*  MAIN PANEL */
/* ----------------------------------------------------------------------------- */
#main {
    display         : flex;
    flex-direction  : column;
    gap             : 56px;
}
.tiles-group {
    border          : none;
    display         : flex;
    flex-direction  : column;
    padding         : 0px;
    gap             : 0px;
}
.tiles-group-title {
    padding-left : 10px;
}
.tiles-group-subtitle {
    border-bottom  : 1px solid var(--color-surface-level-5);
    padding : 4px 0px 12px 10px; 
}
.tiles-group-list {
    display     : flex;
    flex-wrap   : wrap;
    gap         : 20px;
    padding-top : 10px;
}



/*  TILES */
/* ----------------------------------------------------------------------------- */
.tile {
    background      : var(--color-surface-level-3);
    display         : flex;
    flex-direction  : column;
    height          : 460px;
}
.tile-image {
    max-height  : 226px;
    min-height  : 226px;
    height      : 226px;
}
.tile,
.tile-image {
    min-width : 400px;
    width     : 400px;
}
.tile-details {
    gap     : 10px;
    margin  : 20px 40px;
}
.tile-title { 
    font-size   : 20px;
    line-height : 40px;
    font-weight : 800;
}
.tile-subtitle {     
    font-size   : 12px;
    height      : 80px;
    line-height : 16px;
    white-space : wrap !important;
}
.tile-access {
    display         : flex;
    gap             : 10px;
    justify-content : space-between;
    line-height     : 38px;
    order           : 3;
    width           : 100%;
}
.tile-endpoint {
    color           : var(--color-blue-500);
    flex-grow       : 1;
    font-weight     : 700;
    text-align      : left;
    white-space     : nowrap;
    overflow        : hidden;
    text-overflow   : ellipsis;
}
.tile-access > .button.icon {
    padding : 0px;
    min-width : 36px;
}



/*  TILE MAX */
/* ----------------------------------------------------------------------------- */
.tile.max {
    background  : var(--color-surface-level-1);
    border      : none;
    height      : unset;
    width       : unset;
    position    : absolute;
    top         : 0px;
    left        : calc(50% - 600px);
    right       : calc(50% - 600px);
    bottom      : 0px;
    display     : block;
    cursor      : default;
}
.tile.max:hover {
    background : none !important;
    border : none;
}
.tile.max .tile-image {
    border              : 30px solid var(--color-surface-level-2);
    border-left-width   : 60px;
    position            : absolute;
    top                 : 0px;
    left                : 0px;
    opacity             : 1.0;
}
.tile.max .tile-details {
    background  : var(--color-surface-level-2);
    display     : flex; 
    height      : 206px;
    margin      : 0px;
    padding     : 40px 150px 40px 30px;
    position    : absolute;
    top         : 0px;
    right       : 0px;
    left        : 490px;
}
.tile.max .tile-title {
    font-weight : 800;
    font-size   : 28px;
    line-height : 42px;
}
.tile.max .tile-subtitle {
    font-weight : 400;
    font-size   : 14px;
    height      : 100px;
    line-height : 20px;
}
.close-app { 
    display     : none ; 
    position    : absolute;
    top         : 38px;
    right       : 38px;
}
.tile.max .close-app { 
    display : block ; 
}



h2 {
    border-left  : 10px solid var(--color-surface-level-3);
    margin-left  : 2px;
    padding-left : 14px;
}

.button.icon {
    padding : 2px;
}




/*  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);
}
.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 : left;
    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.code {
    font-family : 'Courier New', monospace;
}
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 var(--color-surface-level-3);
}
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);
}



/*  TENANT */
/* ----------------------------------------------------------------------------- */
#tenant-name {
    color       : var(--color-blue-500);
}


/*  DOCS */
/* ----------------------------------------------------------------------------- */
#docs-name {
    color       : var(--color-blue-500);
}



/*  CHANGE LOG */
/* ----------------------------------------------------------------------------- */
#version-name {
    color       : var(--color-blue-500);
}
#framework-changes { 
    background  : var(--color-surface-level-2);
    color       : var(--color-font);
    display     : none; 
}
#framework-changes td {
    background : var(--color-surface-level-3);
}
.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;
    top     : 300px;
    right   : 0px;
    bottom  : 0px;
}
.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; 
    background    : var(--color-surface-level-2);
}
.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-name {
    color       : var(--color-blue-500);
}

.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);
}


/*  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; }

}