/* Copyright (c) 2016 John Seamons, ZL/KF6VO */

/*****************************/
/* KiwiSDR W3.CSS extensions */
/*****************************/

/* include after w3.css to meet "last one wins" CSS rule */

.w3-navbar a
{
    display: inline-block;
    float: left;
    padding: 8px 16px;
}

.w3-sidenav-full-height a
{
    padding: 8px 2px 8px 16px;
}

.w3-tag2
{
	display: inline-block;
	color: white;
	background-color: black;
	padding: 0.5em 1em;
	margin: 1em 0 0.5em 0;
    text-align: center;
}


/* tables */
/* use w3-tables from W3.CSS to get left alignment */

.w3-table-default
{
	width: 100%;		/* otherwise buttons get squished together */
	/*border-spacing: 1px;	debug*/
}

.w3-table-default th, .w3-table-default th:first-child, .w3-table-default td, .w3-table-default td:first-child
{
	padding: 0;
	vertical-align: middle;
}

/* overrides w3-table-default */
.w3-table-6-8 th, .w3-table-6-8 th:first-child, .w3-table-6-8 td, .w3-table-6-8 td:first-child
{
	padding: 6px 8px;
}

.w3-table-fixed
{
	table-layout: fixed;
	empty-cells: show;
	width: 100%;
}

.w3-table-head
{
}

.w3-table-row
{
}

.w3-table-cell
{
    /* from old class-td */
	position: relative;		/* so position:absolute can be used inside cells */
	text-align: center;

	/*background-color: cyan;	/* debug */
	/*border: 0.1px solid red;	/* debug */

	/* next are from html.css for <td>
	padding: 1px;
	vertical-align: middle;*/
}

.w3-text
{
    border: none;
    display: inline-block;
    outline: 0;
    padding: 6px 16px;
    vertical-align: bottom;     /* so baseline level with surrounding plain text */
    overflow: hidden;
    text-decoration: none !important;
    color: #fff;
    background-color: #000;
    text-align: left;
    white-space: nowrap;
	cursor: default;
}

.w3-text-bottom {
    vertical-align: bottom
}

.w3-ext-btn
{
    color: black;
    background-color: hsl(0, 0%, 95%);
}

.w3-ext-btn:active
{
    color: white;
    background-color: #4CAF50 !important;   /* = w3-selection-green */
    /* border-color: #4CAF50 !important;       /* = w3-selection-green */
}

.w3-ext-btn.w3-ext-btn-noactive:active
{
	background: inherit !important;
}

/* normalize browser range slider disaster (adapted from www.cssportal.com/style-input-range) */

/* first, turn off all default behavior */
input[type=range] {
  -webkit-appearance: none;
  /*margin: 10px 0;*/
  width: 100%;
  height: 22px;
  background-color: inherit;
  /*background-color: #c0c0c0; /*debug*/
}

input[type=range]:focus {
  outline: none;
}

/* Webkit */
input[type=range]::-webkit-slider-runnable-track {
  width: 100%;
  height: 3px;
  cursor: pointer;
  animate: 0.2s;
  box-shadow: 0px 0px 0px #000000;
  background-color: #808080;
  border-radius: 1px;
  border: 0px solid #000000;
}

input[type=range]::-webkit-slider-thumb {
  box-shadow: 0px 0px 0px #000000;
  border: 1px solid #808080;
  height: 18px;
  width: 18px;
  border-radius: 25px;
  background-color: white;
  cursor: pointer;
  -webkit-appearance: none;
  margin-top: -7px;
}

input[type=range]:focus::-webkit-slider-runnable-track {
  background-color: #808080;
}

/* Mozilla */
input[type=range]::-moz-range-track {
  width: 100%;
  height: 3px;
  cursor: pointer;
  animate: 0.2s;
  box-shadow: 0px 0px 0px #000000;
  background-color: #808080;
  border-radius: 1px;
  border: 0px solid #000000;
}

input[type=range]::-moz-range-thumb {
  box-shadow: 0px 0px 0px #000000;
  border: 1px solid #808080;
  height: 16px;		/* has to be smaller than webkit for some reason */
  width: 16px;
  border-radius: 25px;
  background-color: white;
  cursor: pointer;
}

.w3-icon-btn
{
    cursor: pointer;
}

.w3-icon-btn:hover
{
    box-shadow: 0 8px 16px 0 rgba(0, 0, 0, 0.2), 0 6px 20px 0 rgba(0, 0, 0, 0.19);
}

.w3-text-output
{
	display: inline-block;
	background-color: #e6e6e6;
	overflow-x: scroll;
	overflow-y: scroll;
	width: 100%;
	height: 100%;
	padding: 10px;
}

.w3-text-output pre
{
    margin: 0;
}

.w3-text-output-striped pre:nth-child(even)
{
    background-color: hsl(0, 0%, 95%);
}

.w3-select-menu {
    width: auto;
    cursor: pointer;
    
    /*
        Chrome mobile requires the background to be set white to get white.
        Otherwise it seems to inherit the parent background color.
        But if you specify a select background you get the default borders
        which are awful. So we have to set those as well.
    */
    background: white;
    border: 1px solid rgb(227,227,227);
    border-radius: 3px;
}

.w3-menu-container {
    display: inline-block;
    visibility: hidden;
    position: fixed;
    z-index: 1010;          /* see openwebrx.css */
    width: auto;
    margin: auto;
    border-top: 8px solid rgb(240, 240, 240);
    border-bottom: 8px solid rgb(240, 240, 240);
    background-color: rgb(240, 240, 240);
    color: black;
    padding: 0;
    outline: 0;
}

/* MacOS menu colors (sort-of) */
.w3-menu-item {
    padding: 4px 16px;      /* instead of margin so :hover inverts color of full width */
    background-color: rgb(240, 240, 240);
}

.w3-menu-item-hover:hover {
    background-color: rgb(79, 157, 251);
    color: white;
}

.w3-menu-item-disabled {
    padding: 4px 16px;      /* instead of margin so :hover inverts color of full width */
    background-color: rgb(240, 240, 240);
    cursor: not-allowed;
    opacity: 0.3;
}

.w3-menu-item-hr hr {
    background-color: rgb(240, 240, 240);
    border-top: 2px solid rgb(223, 223, 223);
    margin: 5px 0;
}


.w3-debug { border: 0.1px solid red }
.w3-debug2 { border: 0.1px solid lime }
.w3-debug3 { border: 0.1px solid cyan }
.w3-debug4 { border: 0.1px solid yellow }
.w3-debug5, .w3-black-box { border: 0.1px solid black }


/* overrides above and use of display in general */

/* w3-hide, w3-show-block already in w3.css */

.w3-show-inline-block
{
	/* display: inline-block;   already in w3.css */
    vertical-align: bottom;
}

.w3-show-inline, .w3-inline
{
	display: inline;
}

.w3-show-span, .w3-span
{
	display: inline;
}

.w3-show-table-cell
{
	display: table-cell;
}

.w3-show-inline-new
{
	display: -webkit-flex;
	display: flex;
	-webkit-align-items: center;
	align-items: center;            /* default: vertically aligned */
	justify-content: flex-start;
}


/* overrides w3-show/hide-* above (last one wins) */

.w3-panel-override-hide
{
	display: none !important;
}

.w3-panel-override-show
{
	display: block !important;
}


.w3-pointer
{
    cursor: pointer;
}

.w3-crosshair
{
    cursor: crosshair;
}

.w3-help
{
    cursor: help;
}

/* overrides w3-css with "cursor: not-allowed !important" that
   subsequently overrides openwebrx.css ".class-button: cursor: pointer" */
.w3-disabled
{
    cursor: not-allowed !important;
    opacity: 0.3;
}

.w3-cursor-not-allowed
{
    cursor: not-allowed !important;
}

.w3-pointer-events-none
{
    pointer-events: none
}

.w3-link-color
{
    color: hsl(212, 100%, 80%);
}

.w3-link-darker-color
{
    color: hsl(212, 100%, 60%);
}

.w3-static
{
    position: static !important;    /* needs to override w3-sidenav position: fixed !imp */
}

.w3-relative
{
    position: relative
}

.w3-fixed
{
    position: fixed
}

.w3-absolute
{
    position: absolute
}

.w3-sticky
{
    position: sticky
}


/* before w3-margin-* so it can be overridden */
.w3int-margin-input
{
    margin-left: 16px
}

.w3-margin-8
{
    margin: 8px !important
}

.w3-margin-10
{
    margin: 8px !important
}

.w3-margin-16
{
    margin: 16px !important
}

.w3-margin-32
{
    margin: 32px !important
}

.w3-margin-LR-4
{
    margin: 0px 4px !important
}

.w3-margin-LR-6
{
    margin: 0px 6px !important
}

.w3-margin-LR-8
{
    margin: 0px 8px !important
}

.w3-margin-LR-16
{
    margin-left: 16px;
    margin-right: 16px;
}

.w3-margin-L-2
{
    margin-left: 2px
}

.w3-margin-L-3
{
    margin-left: 3px
}

.w3-margin-L-4
{
    margin-left: 4px
}

.w3-margin-L-5
{
    margin-left: 5px
}

.w3-margin-L-6
{
    margin-left: 6px
}

.w3-margin-L-8
{
    margin-left: 8px
}

.w3-margin-L-10
{
    margin-left: 10px
}

/* alias for w3.css w3-margin-left (without the !important) */
.w3-margin-L-16
{
    margin-left: 16px
}

.w3-margin-L-20
{
    margin-left: 20px
}

.w3-margin-L-24
{
    margin-left: 24px
}

.w3-margin-L-32
{
    margin-left: 32px
}

.w3-margin-L-64
{
    margin-left: 64px
}

.w3-margin-R-4
{
    margin-right: 4px
}

.w3-margin-R-5
{
    margin-right: 5px
}

.w3-margin-R-6
{
    margin-right: 6px
}

.w3-margin-R-8
{
    margin-right: 8px
}

.w3-margin-R-10
{
    margin-right: 10px
}

.w3-margin-R-15
{
    margin-right: 15px
}

.w3-margin-R-16
{
    margin-right: 16px
}

.w3-margin-T-2
{
    margin-top: 2px
}

.w3-margin-T-3
{
    margin-top: 3px !important
}

.w3-margin-T-4
{
    margin-top: 4px !important
}

.w3-margin-T-5
{
    margin-top: 5px !important
}

.w3-margin-T-6
{
    margin-top: 6px !important
}

.w3-margin-T-8
{
    margin-top: 8px !important
}

.w3-margin-T-10
{
    margin-top: 10px !important
}

.w3-margin-T-16
{
    margin-top: 16px !important
}

.w3-margin-T-20
{
    margin-top: 20px !important
}

.w3-margin-T-24
{
    margin-top: 24px !important
}

.w3-margin-T-32
{
    margin-top: 32px
}

.w3-margin-TL-10
{
    margin: 10px 0 0 10px
}

.w3-margin-B-4
{
    margin-bottom: 4px !important
}

.w3-margin-B-5
{
    margin-bottom: 5px !important
}

.w3-margin-B-8
{
    margin-bottom: 8px !important
}

.w3-margin-B-10
{
    margin-bottom: 10px !important
}

.w3-margin-B-16
{
    margin-bottom: 16px !important
}

.w3-margin-B-20
{
    margin-bottom: 20px !important
}

.w3-margin-B-24
{
    margin-bottom: 24px !important
}

.w3-margin-B-32
{
    margin-bottom: 32px !important
}

.w3-margin-TB-4
{
    margin: 4px 0
}

.w3-margin-TB-8
{
    margin: 8px 0
}

.w3-margin-TB-10
{
    margin: 10px 0
}

.w3-margin-TB-16
{
    margin: 16px 0
}

.w3-margin-TB-24
{
    margin: 24px 0
}


/*
    w3.css:
        w3-padding-jumbo    32px 64px
        w3-padding-xxlarge  24px 48px
        w3-padding-xlarge   16px 32px
        w3-padding-large    12px 24px
        w3-padding-medium   8px 16px    (w3-padding)
        w3-padding-small    4px 8px
        w3-padding-tiny     2px 4px
        w3-padding-{4,8,12,16,24,32,48,64,128, top,bottom,left,right}
*/

.w3-padding-smaller
{
    padding: 3px 6px
}

.w3-padding-L-16
{
    padding-left: 16px
}

.w3-padding-LR-2
{
    padding-left: 2px !important;
    padding-right: 2px !important;
}

.w3-padding-LR-3
{
    padding-left: 3px !important;
    padding-right: 3px !important;
}

.w3-padding-LR-4
{
    padding-left: 4px !important;
    padding-right: 4px !important;
}

.w3-padding-LR-6
{
    padding-left: 6px !important;
    padding-right: 6px !important;
}

.w3-padding-LR-8
{
    padding-left: 8px !important;
    padding-right: 8px !important;
}

.w3-padding-LR-16
{
    padding-left: 16px !important;
    padding-right: 16px !important;
}

.w3-padding-R-0
{
    padding-right: 0 !important;
}

.w3-padding-T-1
{
    padding-top: 1px
}

.w3-padding-TB-7
{
    padding: 7px 0
}

.w3-padding-TB-8
{
    padding: 8px 0
}

.w3-padding-TB-10
{
    padding: 10px 0
}

.w3-padding-TB-24
{
    padding: 24px 0
}

.w3-padding-B-8
{
    padding: 0 0 8px 0
}

.w3-round-3px {
    border-radius: 3px !important
}

.w3-text-in-circle
{
    display: flex;
    justify-content: center;
    align-items: center;
    padding: 0;
    border-radius: 50% !important;
}

.w3-wh-20px
{
    width: 20px;
    height: 20px;
}

.w3-wh-24px
{
    width: 24px;
    height: 24px;
}

.w3-wh-28px
{
    width: 28px;
    height: 28px;
}


/* flex container */
/* css-tricks.com/snippets/css/a-guide-to-flexbox */

.w3-flex { display: flex }

.w3-flex-noshrink { flex: 0 0 auto }

.w3-flex-col, w3-flex-ttb { display: flex; flex-direction: column }
.w3-flex-col-rev, w3-flex-btt { display: flex; flex-direction: column-reverse }
.w3-flex-row, w3-flex-ltr { display: flex; flex-direction: row }
.w3-flex-row-rev, w3-flex-rtl { display: flex; flex-direction: row-reverse }

.w3-flex-wrap { flex-wrap: wrap }
.w3-flex-nowrap { flex-wrap: nowrap }
.w3-flex-wrap-rev { flex-wrap: wrap-reverse }

.w3-halign-center { justify-content: center }
.w3-halign-start { justify-content: flex-start }
.w3-halign-end { justify-content: flex-end }
.w3-halign-space-around, .w3-halign-around { justify-content: space-around }
.w3-halign-space-between, .w3-halign-between { justify-content: space-between }
.w3-halign-space-evenly, .w3-halign-evenly { justify-content: space-evenly }

.w3-valign-center { align-items: center }
.w3-valign-start { align-items: flex-start }
.w3-valign-end { align-items: flex-end }
.w3-valign-stretch { align-items: stretch }
.w3-valign-baseline { align-items: baseline }

/* i.e. like halign when more then one line */
.w3-calign-center { align-content: center }
.w3-calign-start { align-content: flex-start }
.w3-calign-end { align-content: flex-end }
.w3-calign-space-around { align-content: space-around }
.w3-calign-space-between { align-content: space-between }

.w3-gap-8 { gap: 8px }
.w3-gap-10 { gap: 10px }
.w3-gap-16 { gap: 16px }

.w3-perfect-center, .w3-perfect-centering, .w3-perfectly-centered
{
    justify-content: center;
    align-items: center;
}

.w3-valign
{
	display: flex;
	align-items: center;
}

.w3-valign-col
{
	display: flex;
	flex-direction: column;
}

.w3-inline-default
{
	display: flex;
	justify-content: flex-start;
	align-items: center;
}


/* flex items */

/* styles (specify via psa)
    order: <integer>        default is 0
    flex-grow: <number>     default 0
    flex-shrink: <number>   default 1
    flex-basis: <length> | auto
    flex: none | [ <'flex-grow'> <'flex-shrink'>? || <'flex-basis'> ]
*/

/* per-item override of container w3-valign-* */
.w3-salign-auto { align-self: auto }
.w3-salign-center { align-self: center }
.w3-salign-start { align-self: flex-start }
.w3-salign-end { align-self: flex-end }
.w3-salign-stretch { align-self: stretch }
.w3-salign-baseline { align-self: baseline }


.w3-hcenter, .w3-halign
{
	display: -webkit-flex;
	-webkit-justify-content: center;
	display: flex;
	justify-content: center;
}


.w3-tspace-2:not(:first-child)
{
	margin-top: 2px !important
}

.w3-tspace-3:not(:first-child)
{
	margin-top: 3px !important
}

.w3-tspace-4:not(:first-child)
{
	margin-top: 4px !important
}

.w3-tspace-6:not(:first-child)
{
	margin-top: 6px !important
}

.w3-tspace-8:not(:first-child)
{
	margin-top: 8px !important
}

.w3-tspace-16:not(:first-child)
{
	margin-top: 16px !important
}

.w3-hspace-3:not(:first-child)
{
	margin-left: 3px !important
}

.w3-hspace-4:not(:first-child)
{
	margin-left: 4px !important
}

.w3-hspace-8:not(:first-child)
{
	margin-left: 8px !important
}

.w3-hspace-16:not(:first-child)
{
	margin-left: 16px !important
}

.w3-margin-RE-16:last-child
{
	margin-right: 16px !important
}

.w3-hspace-32:not(:first-child)
{
	margin-left: 32px !important
}

.w3-pad-between-16:not(:first-child)
{
	padding-left: 16px
}

.w3-margin-between-4:not(:first-child)
{
	margin-left: 4px
}

.w3-margin-between-6:not(:first-child)
{
	margin-left: 6px
}

.w3-margin-between-8:not(:first-child)
{
	margin-left: 8px
}

.w3-margin-between-10:not(:first-child)
{
	margin-left: 10px
}

.w3-margin-between-12:not(:first-child)
{
	margin-left: 12px
}

.w3-margin-between-16:not(:first-child)
{
	margin-left: 16px
}

.w3-margin-between-24:not(:first-child)
{
	margin-left: 24px
}

.w3-margin-between-32:not(:first-child)
{
	margin-left: 32px
}

.w3-width-auto
{
	width: auto;
}

.w3-width-fit
{
	width: fit-content;
}

.w3-width-32
{
	width: 32px;
}

.w3-width-64
{
	width: 64px;
}

.w3-width-90
{
	width: 90px;
}

.w3-width-128
{
	width: 128px;
}

.w3-width-zero
{
	width: 0%;
}

.w3-width-third
{
	width: 33%;
}

.w3-width-half
{
	width: 50%;
}

.w3-width-full
{
	width: 100%;
}

.w3-width-one-sixth
{
    width: 16.67%;
}

.w3-width-min
{
    width: min-content;
}

.w3-height-full
{
	height: 100%;
}

.w3-scroll
{
	overflow: auto;
}

.w3-no-scroll
{
	overflow: hidden;
}

.w3-scroll-x
{
	overflow-x: auto;
	overflow-y: hidden;
}

.w3-scroll-y
{
	overflow-x: hidden;
	overflow-y: auto;
}

/*
    NB: If "overflow-y: auto" is used for w3_menus(), instead of "overflow-y: scroll"
    via w3-scroll-always-y below, then the scrollbar will intrude into the width
    of the menu elements and cause the longest to lose right padding. */
.w3-scroll-always-y
{
	overflow-x: hidden;
	overflow-y: scroll;
}

.w3-iphone-scroll
{
    -webkit-overflow-scrolling: touch;
	overflow-x: hidden;
	overflow-y: auto;
}

.w3-nowrap
{
	white-space: nowrap;
}

.w3-bold
{
	font-weight: bold;
}


/* declared before w3-visible so w3-visible can override
   when w3-hidden used as inline default ("last one wins" CSS rule) */
.w3-hidden
{
	visibility: hidden;
}

.w3-visible
{
	visibility: visible;
}

/* [class~=word] -> sel all elems with 'class' attribute containing 'word' */

.w3-fade-out
{
	opacity: 0;
	transition: opacity 0.5s linear 1s;
}

.w3-snap-back
{
	opacity: 1;
	transition: opacity 0s linear 0s;
}


/* colors */

.w3-background-fade
{
	background-color: black;
	transition: background-color 1s linear 1s;
}

.w3-red2, .w3-hover-red2:hover {
    color: white;
    background-color: hsl(0, 97%, 57%);
}

.w3-css-lighterGray
{
    color: black;
    background-color: hsl(0, 0%, 95%);
}

.w3-text-css-lighterGray
{
    color: hsl(0, 0%, 95%);
}

.w3-css-lightGray
{
    color: black;
    background-color: lightGray;
}

.w3-text-css-lightGray
{
    color: lightGray;
}

.w3-css-yellow
{
    color: black;
    background-color: yellow;
}

.w3-text-yellow-highlight
{
    color: black;
    background-color: yellow;
    padding: 0 3px;
}

.w3-text-css-yellow
{
    color: yellow !important;
}

.w3-css-lime
{
    color: black;
    background-color: lime;
}

.w3-text-css-lime
{
    color: lime;
}

.w3-css-magenta
{
    color: white;
    background-color: magenta;
}

.w3-text-css-magenta
{
    color: magenta !important;
}

.w3-css-orange
{
    color: black;
    background-color: orange;
}

.w3-text-css-orange
{
    color: orange;
}

.w3-css-red
{
    color: white;
    background-color: red;
}

.w3-text-css-red
{
    color: red;
}

.w3-text-css-grey
{
    color: #808080;
}

.w3-css-pink
{
    color: black;
    background-color: pink;
}

.w3-css-lavender
{
    color: black;
    background-color: lavender;
}

.w3-override-yellow
{
    color: black;
    background-color: #ffeb3b;
}

/* listed last so it overrides others when used as the highlight color in w3_util.js */
.w3-selection-green
{
    color: white;
    background-color: #4CAF50;
}

.w3-text-outline {
    text-shadow: -1px 0 #444, 1px 0 #444, 0 -1px #444, 0 1px #444;
}

.w3-text-css-shadow {
    text-shadow: 2px 2px 4px black;
}

.w3-text-css-underglow {
    text-shadow: 2px 0 4px gray, -2px 0 4px gray, 0 2px 4px gray, 0 -2px 4px gray;
}

.w3int-cur-sel
{
    color: white;
    background-color: hsl(0, 0%, 60%);
    font-weight: bold;
}

.w3-grey-white, .w3-hover-grey:hover {
    color: #fff !important;
    background-color: hsl(0, 0%, 62%) !important;
}

.w3-background-pale-aqua
{
    background-color: hsl(180, 100%, 95%);
}

.w3-background-pale-indigo
{
    background-color: hsl(272, 52%, 95%);
}

.w3-font-fixed {
    font-family: Consolas, "courier new";
    font-size: 18px;
}

.w3-font-11px {
    font-size: 11px;
}

.w3-font-11_25px {
    font-size: 11.25px;
}

.w3-font-12px {
    font-size: 12px;
}

.w3-font-13px {
    font-size: 13px;
}

.w3-font-14px {
    font-size: 14px;
}

.w3-font-16px {
    font-size: 16px;
}

.w3-font-20px {
    font-size: 20px !important;
}

.w3-font-22px {
    font-size: 22px !important;
}

.w3-font-24px {
    font-size: 24px !important;
}

.w3-underline {
    text-decoration-line: underline;
}