/* Copyright (c) Microsoft Corporation. All rights reserved. */

/* Note that this file doesn't include any properties that can be themed (default values for those properties are
   defined in theme.js) or properties the are sizes (they are defined in sim-host-sizes.css, and will be scaled and
   included in the theme css file). */

body {
    margin: 0 !important;
    padding: 0 !important;
    border: 0 !important;
    background: transparent;
    user-select: none;
    -moz-user-select: none;
    -ms-user-select: none;
    -webkit-user-select: none;
    cursor: default;
}

html {
    height: 100%;
}

a {
    text-decoration: underline;
    outline: none;
    cursor: pointer;
    color: rgb(128, 128, 128);
}

cordova-panel, cordova-dialog {
    z-index: 50;
    position: relative;
    -webkit-column-break-inside: avoid;
    page-break-inside: avoid;
    break-inside: avoid;
    display: block;
}

.cordova-panel-inner {
    overflow: hidden;
}

.cordova-header {
    position: relative;
    cursor: pointer;
}

.cordova-content > ::content > * {
    position: relative;
}

.cordova-main {
    column-gap: 0;
    -moz-column-gap: 0;
    -webkit-column-gap: 0;
}

.cordova-labeled-value-wrapper {
    width: 100%;
}

.cordova-labeled-value-wrapper span {
    float: right;
}

.cordova-value,
.cordova-header .spoken-text span {
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.cordova-header .spoken-text span {
    position: absolute;
}

input {
    padding: 0;
}

.cordova-overlay {
    position: fixed;
    left: 0;
    top: 0;
    z-index: 10000;
    width: 100%;
    height: 100%;
    background-color: rgba(245, 245, 245, 0.9);

    display: -webkit-box;
    display: -moz-box;
    display: -ms-flexbox;
    display: -webkit-flex;
    display: flex;
    justify-content: center;
    align-items: center;
}

cordova-button {
    display: inline-block;
    position: relative;
    text-align: center;
    zoom: 1;
    overflow: visible;
}

button {
    width: 100%;
    cursor: pointer;
}

select {
    cursor: pointer;
}

select::-ms-expand { /* for IE 11 */
    border: 0 solid black;
    background: transparent;
    color: currentColor;
}

input[type=checkbox],
input[type=radio] {
    vertical-align: bottom;
}

input,
textarea,
select,
button {
    margin: 0;
    resize: none;
}

textarea {
    overflow-y: auto;
}

input:focus,
textarea:focus,
isindex:focus,
keygen:focus,
select:focus {
    outline: none;
}

cordova-radio {
    display: flex;
    align-items: center;
}

.cordova-panel-row {
    display: flex;
    justify-content: space-between;
    align-items: center;
}

cordova-group, cordova-item-list {
    display: block;
}

.cordova-radio-wrapper.cordova-inline {
    display: inline-flex;
}

.cordova-radio-label {
    padding-left: 0.25em;
}

.cordova-item-wrapper {
    margin: -1px 0;
}

.close-button {
    width: 17px;
    height: 17px;
    top: 5px;
    right: 5px;
    position: absolute;
    padding: 0;
    display: none;
}

.cordova-item-wrapper:focus,
.cordova-item-wrapper:hover {
    z-index: 1000;
}

.cordova-item-wrapper {
    /* cordova-item borrows button style, but forces border to a single pixel so overlap works correctly */
    border-style: solid !important;
    border-width: 1px !important;
}


.cordova-collapse-icon,
.cordova-close-icon {
    cursor: pointer;
    position: absolute;
    margin-left: auto;
}

.cordova-collapse-icon svg,
.cordova-close-icon svg{
    stroke: currentColor;
    fill-opacity: 0;
}

.cordova-collapse-icon.cordova-collapsed .cordova-collapse-up {
    display: none;
}

.cordova-collapse-icon .cordova-collapse-down {
    display: none;
}

.cordova-collapse-icon.cordova-collapsed .cordova-collapse-down {
    display: inline;
}

.cordova-content {
    overflow: hidden;
    transition: height 0.2s;
}

.cordova-hidden {
    display: none;
}

.cordova-square-box-container {
    position: relative;
    width: 100%;
    padding-bottom: 100%;
}

.cordova-square-box-content {
    position: absolute;
    width: 100%;
    height: 100%;
}

input[type=range] {
    background: transparent;
    outline: none;

    /* Need this so Firefox focus rectangle doesn't overlap the slider*/
    border: 1px solid transparent;
}

::-moz-focus-inner {
    border: none;
}

input[type=range]::-ms-track {
    background: transparent;
    color: transparent;
    border-left: none;
    border-right: none;
}

input[type=range],
input[type=range]::-webkit-slider-runnable-track,
input[type=range]::-webkit-slider-thumb {
    -webkit-appearance: none;
}

/* Use correct colors for buttons in IE in high-contrast mode */
@media screen and (-ms-high-contrast: active) {
    button {
        color: buttonText;
        border-color: buttonText;
        background-color: buttonFace;
    }

    button:hover, button:focus {
        color: highlightText;
        border-color: buttonText;
        background-color: highlight;
    }
}

/* Hacks to work around multi-column bug in Chrome 48+. The following section
   is removed for other browsers when the file is served */

/* BEGIN CHROME */
.cordova-panel-inner {
    overflow: visible;
}

.cordova-content {
    overflow: visible;
}
/* END CHROME */