/*
* Corrects bug #1902510 caused by a workaround in xterm.css (left: -9999em) which results 
* in the Azure portal focus to scroll left when serial console is launched
*/

.terminal .xterm-helper-textarea {
    position: absolute;
    opacity: 0;
    left: 0;
    top: 0;
    width: 0;
    height: 0;
    z-index: -10;
    /** Prevent wrapping so the IME appears against the textarea at the correct position */
    white-space: nowrap;
    overflow: hidden;
    resize: none;
}

html, body {
    margin: 0;
    padding: 0;
    height: 100%;
}

body {
    font-family: helvetica, sans-serif, arial;
    font-size: 1em;
    color: #111;
}

h1 {
    text-align: center;
}

.terminal {
  height: 100%;
}

:focus {
    outline: #000 solid 2px;
    outline-offset: -2px;
}

a:focus {
    outline: #000 solid 2px;
    outline-offset: -2px;
    padding: 10px;
}

.clear-focus:focus {
    outline: none;
}

input[type="radio"]:focus {
    outline: #000 solid 1px;
    outline-offset: 0px;
}

#terminal-wrapper {
    background-color: #000;
    display: flex;
    flex-direction: column;
    height: 100%;
}

.divider {
    content: "";
    display: inline-block;
    width: 0px;
    border-left: 1px solid #b4b4b4;
    padding: 0;
    left: 50%;
    top:10%;
    bottom:10%;
    height: 20px;
}

#terminal-container {
    overflow: hidden;
    font-family: courier-new, courier, monospace !important;
    font-size: 13px;
    line-height: 15px;
    padding-left: 5px;
    padding-top: 2px;
}

#terminal-container:focus {
    border: #ba141a dotted 5px;
}

.embed #terminal-container {
    font-size: 15px;
    line-height: 18px;
}

#terminal-container .terminal {
    background-color: #000;
    color: #fafafa;
    padding-left: 3px;
}

#terminal-container .terminal:focus .terminal-cursor {
    background-color: #fafafa;
}

.header-no-contrast {
    background-color: #eee;
}

.header-highcontrast-light {
    color: #000;
    background-color: #fff;
}

.header-highcontrast-dark {
    color: #fff;
    background-color: #000;
}


#terminal-header {
    display: flex;
    flex: 0 0 auto;
    align-items: center;
    font-size: 14px;
    height: auto;
}

#terminal-right-btns {
    display: flex;
    flex: 0 0 auto;
    margin-left: auto;
}

#terminal-help.terminal-button {
    font-size: 18px !important;
    font-weight: 200;
    font-family: Helvetica,Arial,sans-serif,Segoe,"Segoe UI Emoji";
    user-select: none;
    -ms-user-select: none;
}

.terminal-button {
    display: flex;
    align-items: center;
    justify-content: center;
    height: 32px;
    width: 32px;
}

/* #svg-rect, #svg-path {
    fill: #000
} */

.svg-button {
    fill: #000
}

.terminal-button-nocontrast:hover, .terminal-button-nocontrast:focus {
    background: #d7d7e2; 
}

.terminal-button-nocontrast, .terminal-button-nocontrast a {
    color: #111;
}

.terminal-button-highcontrast-light, 
.terminal-button-highcontrast-light a {
    color: #000;
}

.svg-button-highcontrast-light {
    fill: #000
}

.terminal-button-highcontrast-light:hover {
    background: #0000cd;
    color: #fff;
}

.terminal-button-highcontrast-light:hover .svg-button-highcontrast-light {
    fill: #fff
}

.terminal-button-highcontrast-dark, .terminal-button-highcontrast-dark a {
    color: #fff;
}

.terminal-button-highcontrast-dark:focus {
    outline: #fff solid 2px;
    outline-offset: -2px;
}

.terminal-button-highcontrast-dark:hover {
    background: #fff;
    color: #000;
}

.svg-button-highcontrast-dark {
    fill: #fff
}

.terminal-button-highcontrast-dark:hover .svg-button-highcontrast-dark {
    fill: #000
}


.terminal-button svg{
    height: 16px;
    width: 16px;
}

#terminal-close.terminal-button:focus, #terminal-close.terminal-button:hover {
    background: #ba141a;
    fill: #e9e9f3;
}

#terminal-close.terminal-button {
    display: flex;
    flex: 0 0 auto;
    margin-left: auto;
}

#terminal-restart.terminal-button {
    flex: 0 0 auto;
    margin-left: 6px
}

#terminal-container .xterm.fullscreen {
    position: relative;
}

.terminal-button.disabled {
    color: #999;
    fill: #999;
}

.terminal-button.disabled:hover {
    background-color: rgba(0, 0, 0, 0);
}

.dropdown-content {
    display: none;
    position: absolute;
    color: #1f2327;
    font-size: 14px;
    font-family: Helvetica,Arial,sans-serif,Segoe,"Segoe UI Emoji";
    font-weight: normal;
    min-width: 115px;
    background-color: #ffffff;
    box-shadow: 0px 0px 15px 0px rgba(0,0,0,0.3);
    cursor: pointer;
    top: 32px;
    left: 0px;
    padding-top: 0px;
    padding-bottom: 0px;
    padding-left: 0px;
    padding-right: 0px;
    z-index: 900;
}

#terminal-tool-selector .dropdown-content {
    min-width: 152px;
}

#terminal-help-selector .dropdown-content {
    min-width: 216px;
}

#terminal-function-selector .dropdown-content {
    min-width: 140px;
}

#terminal-command-selector .dropdown-content {
    min-width: 260px;
}

#terminal-restarttype-selector .dropdown-content {
    min-width: 155px;
}

#terminal-tool-selector {
    position: relative;
}

#terminal-restarttype-selector {
    position: relative;
}

#terminal-tool-selector .dropdown-element {
    margin-bottom: 0px;
    padding: 10px;
}

#terminal-help-selector .dropdown-element {
    margin-bottom: 0px;
    padding: 10px;
}

#terminal-function-selector .dropdown-element {
    margin-bottom: 0px;
    padding: 10px;
}

#terminal-restarttype-selector .dropdown-element {
    margin-bottom: 0px;
    padding: 10px;
    display: flex;
}

#terminal-command-selector .dropdown-element {
    margin-bottom: 0px;
    padding: 10px;
    display: flex;
}

.dropdown-element-border {
    border-top: 1px solid rgba(0,0,0,0.2);
}

.second-dropdown-content {
    display: none;
    position: absolute;
    color: #1f2327;
    font-size: 14px;
    font-family: Helvetica,Arial,sans-serif,Segoe,"Segoe UI Emoji";
    font-weight: normal;
    background-color: #ffffff;
    box-shadow: 0px 0px 15px 0px rgba(0,0,0,0.3);
    cursor: pointer;
    top: 0px;
    left: 153px;
    padding-top: 0px;
    padding-bottom: 0px;
    z-index: 900;
}

#terminal-tool-selector #font-style-option-courier {
    font-family: Courier New, Courier, monospace;
    padding-bottom: 11px;
}

#terminal-tool-selector #font-style-option-inconsolata {
    font-family: 'Inconsolata', monospace;
    padding-bottom: 11px;
}

#terminal-tool-selector #font-style-option-lucida {
    font-family: "Lucida Console", Monaco, monospace;
    padding-bottom: 11px;
    white-space: nowrap;
}

#terminal-tool-selector #font-style-option-mono {
    font-family: monospace;
    padding-bottom: 11px;
}

#terminal-tool-selector #font-style-option-ptmono {
    font-family: 'PT Mono', monospace;
    padding-bottom: 11px;
}

#terminal-tool-selector #font-size-option-smallest {
    font-size: 11px;
    padding-top: 11px;
    padding-bottom: 11px;
}

#terminal-tool-selector #font-size-option-small {
    font-size: 13px;
    padding-top: 11px;
    padding-bottom: 11px;
}

#terminal-tool-selector #font-size-option-medium {
    font-size: 16px;
    padding-top: 9px;
    padding-bottom: 9px;
}

#terminal-tool-selector #font-size-option-large {
    font-size: 21px;
    padding-top: 5px;
    padding-bottom: 6px;
}

#terminal-tool-selector #font-size-option-largest {
    font-size: 24px;
    padding-top: 5px;
    padding-bottom: 6px;
    white-space: nowrap;
}

.second-dropdown-content.style-settings {
    top: 40px;
    min-width: 139px;
}

.selected-font-setting {
    background-color: rgba(85, 179, 255, 0.2);
}

.second-dropdown-element-highcontrast-dark.selected-font-setting {
    outline: #fff solid 1px;
}

.second-dropdown-element-nocontrast.second-dropdown-element:focus, 
.second-dropdown-element-nocontrast.second-dropdown-element:hover {
    background-color: rgba(85, 179, 255, 0.1);
}

.dropdown-element-nocontrast {
    color:#0058ad;
}

.dropdown-element-nocontrast:hover {
    color: #f0f0f0;
    background-color: #0074e0;
}

.dropdown-element-nocontrast:hover a {
    color: #f0f0f0;
}

.dropdown-element-highcontrast-light, .second-dropdown-element-highcontrast-light {
    color: #000;
}

.dropdown-element-highcontrast-light:hover, 
.dropdown-element-highcontrast-light:hover a,
.second-dropdown-element-highcontrast-light:hover, 
.second-dropdown-element-highcontrast-light:focus
 {
    color: #fff;
    background: #0000cd;
}


.dropdown-element-highcontrast-dark, .second-dropdown-element-highcontrast-dark{
    color: #fff;
    background: #000;
}

.dropdown-element-highcontrast-dark:focus,
.dropdown-element-highcontrast-dark a:focus
{
    color: #000;
    background-color: #fff;
}

.dropdown-element-highcontrast-dark a:focus {
    padding: 5px 10px;
}

.dropdown-element-highcontrast-dark:hover, 
.dropdown-element-highcontrast-dark:hover a,
.second-dropdown-element-highcontrast-dark:hover,
.second-dropdown-element-highcontrast-dark:focus
{
    color: #000;
    background: #fff;
}

.dropdown-content a, .btn-link {
    font-size: 14px;
}

.dropdown-element-border:focus, .dropdown-element-border:hover {
    border-top: 1px solid rgba(0,0,0,0.2);
}

#tools-dropdown .font-menu-icon {
    float: right;
}

button.secondary-button {
    background-color: #FFF;
    border-width: 2px;
    color: #0058ad;
}

button.secondary-button:hover {
    background-color: #f0f0f0;
    color: #0074e0;
}

button.secondary-button:focus {
    background-color: #f0f0f0;
    color: #003e7a;
}

div.buttons-container {
    width: 323px;
    margin: auto;
}

#terminal-help-selector {
    position: relative;
    display: inline-block;
    font-size: 18px !important;
    padding-left: 5px;
    padding-right: 5px;
}

#terminal-command-selector {
    position: relative;
    display: inline-block;
    font-size: 18px !important;
    padding-left: 5px;
    padding-right: 5px;
}

#terminal-restarttype-selector {
    position: relative;
    display: inline-block;
    font-size: 18px !important;
    padding-left: 5px;
    padding-right: 5px;
}

#terminal-function-selector {
    position: relative;
    display: inline-block;
    font-size: 18px !important;
    padding-left: 5px;
    padding-right: 5px;
}

.active-selector {
    background: #d7d7e2;
}

#terminal-help-selector .terminal-help-selector-span {
  display: flex;
  border: none;
  cursor: pointer;
  align-items: center;
  justify-content: center;
  height: 32px;
  font-family: Helvetica,Arial,sans-serif,Segoe,"Segoe UI Emoji";
  padding-left: 10px;
  padding-right: 0px;
}

#terminal-function-selector .terminal-function-selector-span {
    display: flex;
    border: none;
    cursor: pointer;
    align-items: center;
    justify-content: center;
    height: 32px;
    font-family: Helvetica,Arial,sans-serif,Segoe,"Segoe UI Emoji";
    padding-left: 10px;
    padding-right: 0px;
  }

#terminal-command-selector .terminal-command-selector-span {
    display: flex;
    border: none;
    cursor: pointer;
    align-items: center;
    justify-content: center;
    height: 32px;
    font-family: Helvetica,Arial,sans-serif,Segoe,"Segoe UI Emoji";
    padding-left: 10px;
    padding-right: 0px;
    padding-top: 4px;
  }

#terminal-restarttype-selector .terminal-restarttype-selector-span {
    display: flex;
    border: none;
    cursor: pointer;
    align-items: center;
    justify-content: center;
    height: 32px;
    font-family: Helvetica,Arial,sans-serif,Segoe,"Segoe UI Emoji";
    padding-left: 10px;
    padding-right: 0px;
}

#terminal-help-selector .terminal-help-selector-span span {
    padding-right: 10px;
    padding-left: 0px;
}

#terminal-function-selector .terminal-function-selector-span span {
    padding-right: 10px;
    padding-left: 0px;
}

#terminal-command-selector .terminal-command-selector-span span {
    padding-right: 10px;
    padding-left: 0px;
}

#terminal-restarttype-selector .terminal-restarttype-selector-span span {
    padding-right: 10px;
    padding-left: 0px;
}

#terminal-tool-selector .terminal-tool-selector-span {
    line-height: 0px;
}

.dropdown-element svg {
    height: 12px;
    width: 12px;
    margin-left: 5px;
}

#terminal-feedback.terminal-button-link {
    width: unset;
    padding-left: 10px;
    padding-right: 10px;
}

.terminal-button-link {
    display: flex;
    align-items: center;
    justify-content: center;
    height: 32px;
    width: 32px;
}

.terminal-button-link:hover, .terminal-button-link:focus {
    background: #d7d7e2; 
}

.terminal-button-link svg{
    height: 16px;
    width: 16px;
}

.terminal-feedback-selector-span {
    color: #0058ad;
}

.feedback-span-highcontrast-light {
    color: #000
}

.feedback-span-highcontrast-light:hover {
    color: #fff;
    background: #0000cd;
}

.feedback-span-highcontrast-dark {
    color: #fff
}

.feedback-span-highcontrast-dark:hover {
    background: #fff;
    color: #000;
}

#link-icon-feedback {
    padding-left: 2px;
}

input[type=text] {
    font-size: 12px;
    width: 199px;
    padding-left: 5px;
    box-sizing: content-box;
}

input[type=radio] {
    margin: 2px 0 0;
}

#fontLicensesCloseIcon {
    height: 32px;
    width: 32px;
}

#fontLicensesPopup {
    align-self: center;
    width: 810px;
    top: calc(40% - 150px);
    left: calc(50% - 400px);
    border-style: solid;
    border-width: 2px;
    border-color: #0058ad;;
    display: none;
    position: absolute;
    font-size: 14px;
    font-weight: normal;
    cursor: pointer;
    background-color: #ffffff;
    z-index: 900;
}

#fontLicensesPopup pre {
    height: 300px;
    white-space: pre-wrap;
}

@media screen and (max-width: 800px) {
    #fontLicensesPopup {
        width: 100vw;
        left: unset;
        top: unset;
    }
}

@media screen and (min-width: 500px) {
    #sendSysRqPopup,
    #sendNmiPopup,
    #sendResetPopup,
    #sendKeyShortcutPopup {
        align-self: center;
        width: 450px;
        top: calc(40% - 130px);
        left: calc(50% - 225px);
        border-style: solid;
        border-width: 2px;
        border-color: #0058ad;;
        display: none;
        position: absolute;
        font-size: 14px;
        font-weight: normal;
        cursor: pointer;
        padding: 15px;
        background-color: #ffffff;
        z-index: 900;
    }
}

@media screen and (max-width: 500px) {
    #sendSysRqPopup,
    #sendNmiPopup,
    #sendResetPopup,
    #sendKeyShortcutPopup {
        align-self: center;
        width: 100%;
        height: 100%;
        border-style: solid;
        border-width: 2px;
        border-color: #0058ad;;
        display: none;
        position: absolute;
        font-size: 14px;
        font-weight: normal;
        cursor: pointer;
        padding: 15px 0 0 20px;
        background-color: #ffffff;
        z-index: 900;
    }
}

.buttonRow {
    padding-top: 20px;
}

.checkboxRow {
    padding-left: 16px;
}

.visually-hidden {
    clip: rect(0 0 0 0);
    clip-path: inset(50%);
    height: 1px;
    overflow: hidden;
    position: absolute;
    white-space: nowrap;
    width: 1px;
}

@font-face {
    font-family: 'FabricMDL2Icons';
    src: url('data:application/octet-stream;base64,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') format('truetype');
}

.form-radio-label {
    display: flex;
    cursor: pointer;
    position: relative;
    overflow: hidden;
}

.form-radio-label input {
    position: absolute;
    left: -9999px;
}

.form-radio-label input:checked+span {
    outline: #000 solid 2px;
    outline-offset: -2px;
}

.form-radio-label input:checked+span:before {
    box-shadow: inset 0 0 0 0.4375em #0074e0;
}

.form-radio-label span {
    display: flex;
    align-items: center;
    padding: 0.375em 0.75em 0.375em 0.375em;
    transition: 0.25s ease;
}

.form-radio-label span:hover {
    background-color: #d6d6e5;
}

.form-radio-label span:before {
    display: flex;
    flex-shrink: 0;
    content: "";
    background-color: #fff;
    width: 1.5em;
    height: 1.5em;
    border-radius: 50%;
    margin-right: 0.375em;
    transition: 0.25s ease;
    box-shadow: inset 0 0 0 0.125em #00005c;
}