
:root { --border-color: #D8DAE5; --font-color-grey: #7A838E; --background-color: #f8f8f8; }

#root { font-family: Mont-Regular, sans-serif; color: #1b2331; }
.App:focus { outline: none; }

.layout-selector { position: absolute; left: 0; bottom:0; width: 244px; height: 49px; border-top: solid 1px var(--border-color); border-right: solid 1px var(--border-color); display: none;}

.step-title-bar { position: absolute; top: 51px; left: 245px; height: 70px; right:0; box-shadow: 0 2px 4px 0 rgba(0,0,0,0.11); z-index: 1; min-width: 477px; display: flex; align-items: center; }
.step-title-bar .step-title { margin-left: 20px; margin-right: 40px; display: flex; flex-direction: column; width: calc(100% - 60px) }
.step-title-bar .step-name { font-size: 16px; font-family: Mont-SemiBold; margin-bottom: 5px; text-overflow: ellipsis; overflow: hidden; white-space: nowrap; width: 100%; position: relative;}
.step-title-bar .tooltip { font-size: 16px; font-family: Mont-SemiBold; position: absolute;   border-radius: 10px; background-color: rgba(0,0,0,0.75); box-shadow: 0 2px 9px 0 rgba(0,0,0,0.5); padding: 10px 20px; color: white; margin-right: 20px; margin-top: 25px; }
.step-title-bar .step-error { color: #f95f6c; font-size: 12px; }
.step-title-bar .tabs { position: absolute; bottom: 0; right: 17px; font-size: 12px; display: flex; font-weight: bold; }
.step-title-bar .tabs > div { cursor: pointer; margin-left: 25px; }
/* .step-title-bar .tabs > div.selected { border-bottom: solid 3px #3d5afe; } */
.step-title-bar .tabs > div .underline { margin-top: 8px; margin-right: 2px; }
.step-title-bar .tabs > div.selected .underline { border-bottom: solid 3px #3d5afe; }

.step-title-bar .tabs > div > div { height: 20px; padding-left: 10px; padding-right: 7px; color: #7a838e; padding-top: 7px; margin-bottom: 7px; border-radius: 3px; letter-spacing: 2.39px; }
.step-title-bar .tabs > div.selected > div {  color: #3d5afe; }
.step-title-bar .tabs > div:hover > div { background: #eef3ff}



.step-contents { position: absolute; top: 122px; left: 245px; right: 0; bottom: 0; border-right: solid 1px var(--border-color); background: var(--background-color); display: grid; grid-template-columns: 88px 1fr 88px; align-items: center; justify-items: center; min-width: 477px; padding-top:30px; padding-bottom:30px; }
.step-contents .nav-button { width: 28px; height: 28px; border-radius: 14px; display: flex; align-items: center ; justify-content: center; cursor: pointer; user-select: none;}
.step-contents .nav-button:hover { background: #dbdfe3; }
.step-contents .nav-button:nth-child(3) img { transform: rotate(180deg);}
.step-contents .screenshot { background: white; box-shadow: 0 2px 4px 0 rgba(0,0,0,0.11); border-radius: 5px; display: flex; align-items: center; justify-content: center; overflow: hidden;  }

.info-tab { font-family: 'Source Code Pro', monospace;white-space: pre; }
.info-tab .cursors { color:red;  }
.info-tab .line-numbers { color:grey;  }
.info-tab .the-code { overflow: auto;  }
.info-tab .stack-trace { color:grey; white-space: normal;  }
.info-tab .selected { background: #fcdfe2; }


@media only screen and (max-width: 1024px) {
    .step-title-bar { height: 106px;}
    .step-title { margin-top: -36px;}
    .step-contents { top: 158px;}
    .step-title-bar .tabs { left: 0; right: unset; margin-left: -14px}
}

