/* Extracted from main.css: mobile help screen (src/Help.hx) */

div.mobile-help {
    position: fixed;
    top: 0px;
    left: 0px;
    width: 100%;
    height: 100%;
    z-index: 100;
    color: black;
    background-color: white;
}

div.mobile-help-header {
    width: 100%;
    padding-top: 8px;
    display: flex;
    align-items: center;
    margin-bottom: 8px;
}

div.mobile-help-frame {
    width: 100%;
    height: 100%;
    overflow-y: auto;
}

button.mobile-help-tab {
    margin-right: 16px;
    padding-top: 4px;
    padding-bottom: 4px;
    padding-left: 12px;
    padding-right: 12px;
    border-radius: 8px;
    outline: none;
	font-weight: bold;
    color: black;
    background-color: white;
    border: 1px solid slategrey;
   	font-size: 1.1em;
}

button.mobile-help-tab-selected {
    background-color: deepskyblue;
}

p.mobile-help-category {
    font-weight: bold;
    font-family: "Open Sans", "IBM Plex Sans", sans-serif;
   	font-size: 1.2em;
   	padding-left: 16px;
}

div.mobile-howto-heading {
    font-weight: bold;
    font-family: "Open Sans", "IBM Plex Sans", sans-serif;
   	font-size: 1.2em;
   	padding-left: 16px;
   	color: mediumblue;
   	display: flex;
   	align-items: center;
}

img.mobile-howto-icon {
    width: 24px;
    margin-right: 16px;
}

span.mobile-howto-title {
    font-weight: bold;
    font-family: "Open Sans", "IBM Plex Sans", sans-serif;
   	font-size: 1.2em;
}

span.mobile-howto-subtitle {
    font-weight: medium;
    font-family: "Open Sans", "IBM Plex Sans", sans-serif;
   	font-size: 1.2em;
}

div.mobile-howto-banner {
    background-color: gold;
    padding-top: 8px;
    padding-bottom: 8px;
    text-align: center;
    margin-bottom: 12px;
}

p.mobile-help-howto {
    /* font-weight: bold; */
    font-family: "Open Sans", "IBM Plex Sans", sans-serif;
   	font-size: 1.2em;
   	margin-left: 16px;
   	margin-right: 16px;
}

table.mobile-help-table {
    td {
        padding-left: 16px;
        font-size: 1.2em;
    }
}

img.mobile-help-icon {
    width: 34px;
}