/* MAIN ODI *FSS* STYLE SHEET */

/* Bootstrap overrides */
fieldset, legend {
  all: revert;
}
#leftnav, #leftmenu, #accordion {box-sizing:content-box;}
.ui-accordion-header  { padding-left:0.2em !important;}
.ui-accordion-content { padding-left:1.2em !important;}
/* End bootstrap overrides */

* { box-sizing: border-box; }

:root {
  --odi-header-height: 115px;
  --odi-footer-height:  32px;
  --odi-logintab-top:   32px;	/* Just a guess for now! */

  --odi-brt-gray:   #f0f0f0;	/* brighest "gray" for background of modal dialogs */
  --odi-lt-gray1:   #d4d6cc;
  --odi-lt-gray2:   #e5e4dd;	/*  Form Gray Panel Shade 1 */
  --odi-lt-gray3:   #eeeeee;	/*  Form Gray Panel Shade 2 */
  --odi-md-gray:    #bdbfb6;	/*  Form Gray Headers & Footers */
  --odi-md-gray2:   #c6d4dd;	/*  Used in shortcut header */
  --odi-dk-sftgray: #2b2b2b;	/*  Softer on eyes than full black! */

  --odi-bs-cyan700: #0097a7;
  --odi-bs-cyan:    #0dcaf0;	/* cyan from bootstrap */
  --odi-bs-teal:    #20c997;	/* teal from bootstrap */

  --odi-faint-blue: #d2eff9;
  --odi-faint-gray: #cfdee2;

  --odi-lt-skyblue: #7db9e8;	/*  used as light color in mainpage background gradient */
  --odi-brt-blue :  #15adff;	/* classic link color */
  --odi-gray-blue:  #369;	/*  default page background color */
  --odi-md-blue:    #0066b8;
  --odi-dk-blue:    #03345c;
  --odi-lt-orange:  #f7941d;
  --odi-md-orange:  #ed7f00;

  --odi-warning-color:  #dddd11;	/* was #FFFF00 */
  --odi-overdue-color:  #aa0808;	/* was #EE0000 */
  --odi-saralert-color: #aa0808;	/* was #EE0000 */

  --odi-row-statgreen: #11881160;	/* was #00ff0060 */
  --odi-hov-statgreen: #118811ff;	/* was #00ff00ff */
  --odi-row-statyellow:#dddd0080;	/* was #eeee0080 */
  --odi-hov-statyellow:#dddd00ff;	/* was #eeee00ff */
  --odi-row-statred:   #dd0000aa;	/* was #ee222280 */
  --odi-hov-statred:   #dd0808ff;	/* was #ee2222ff */
  --odi-row-statgray:  #e5e4dd80;
  --odi-hov-statgray:  #f6f5eeff;	/* not same shade as row */
  --odi-col-statnew:   #22f;

  --odi-solid-statgreen:  #116611;
  --odi-solid-statyellow: #c0c011;
  --odi-solid-statred:    #990505;
  --odi-solid-statgray:   #666666;
  --odi-solid-statblue:   var(--odi-dk-blue);
  --odi-solid-statblack:  #0f0f0f;

  --main-page-gray:    var(--odi-lt-gray1);
  --form-panel-gray1:  var(--odi-lt-gray2);
  --form-panel-gray2:  var(--odi-lt-gray3);
  --form-headers-gray: var(--odi-md-gray);
  --modal-bg-gray:     var(--odi-brt-gray);


  --header-gradient-top:var(--odi-md-blue);
  --header-gradient-lt: var(--odi-lt-skyblue);
  --header-gradient-dk: var(--odi-dk-blue);

  --link-default-color: var(--odi-md-blue);
  --link-hover-color:   var(--odi-md-orange);
  --link-classic-color: var(--odi-brt-blue);

  --body-bg-color:      var(--odi-gray-blue);
  --shortcut-header-color: var(--odi-md-gray2);

  --base-text-color:  var(--odi-dk-sftgray);
}

/* example: background-color: var( --form-panel-gray1, #e5e4dd) */
/* #d4d6cc          :MainPageView grey */
/* #03345c          :Header/NavBar/Footer Background */
/* #7db9e8-#03345c  :Gradient End Colors */
/* #2b2b2b          :Base Font Color */
/* #369             :Body Background Color */
/* #0066b8          :Default Link Color */
/* #f7941d          :Default Link Hover Color FOR FSS (orange) */
/* #ed7f00          :New Darker color Default Link Hover Color FOR FSS (orange) */
/* FORM COLORS: */
/* #e5e4dd          :Form Grey Panel Shade 1 */
/* #eeeeee          :Form Grey Panel Shade 2 */
/* #bdbfb6          :Form Grey Headers & Footers */
/* #c6d4dd          :MyDUAT Shortcut Header */


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

html { box-sizing: border-box; }

body {
    color: var(--odi-brt-gray);
    background-color: var(--body-bg-color);
/*    height: 100%; */
    font-family: Verdana,Arial,Helvetica,sans-serif;
    font-size: 11px;
    vertical-align: top;
}


/* PageWrapper */
.page-wrapper {
    display:flex;
    flex-direction: column;
    min-height: 100vh;
    min-width:  100vw;
    /* background-color: var( --odi-dk-blue ); */
    color: var(--odi-brt-gray);
    padding: 0;
    border: none;
    border-spacing: 0;
    border-collapse: collapse;
    border-radius: 0;

    pointer-events:auto;	/* used to implement a "drag-shield" */
}

/* Header */
.page-header {
    position: sticky;
    top: 0;
    width:100%;
    height: var(--odi-header-height);
    background: linear-gradient(to bottom,var(--header-gradient-top) 0%, var(--header-gradient-lt) 80%);
    /* background-color: var( --odi-dk-blue ); */
    color: #fff;
    padding: 0;
  /*  z-index: 100000;*/
}


/* Main Page Content */
.page-content {
    flex-grow: 1;
    float: right;
    /* background-color: var( --main-page-gray ); */
    background: linear-gradient(to bottom,var(--header-gradient-lt) 0%,#207cca 45%,var(--header-gradient-dk) 99%);
    color: var( --base-text-color );
    margin: 0 0 0 0;
}

/* Footer */
.page-footer {
    height: 72px;
    min-width: 100%;
    background-color: var(--odi-md-gray);
    color: #000;
    padding: 10px;
    text-align:left;
    display:table;
    z-index:999999;	/* everything goes behind this! */
}


/* Top-Panel (login slider) */
/* Panel Tab/button */
.tab {
	height:10px;
	position: relative;
	/* left:-50%;*/
	/* top: 10px; */
	top: var(--odi-logintab-top);
	z-index: 90000;
}

.tab ul.login {
	display: block;
	position: relative;
	float: right;
	clear: right;
	height: 42px;
	width: auto;
	font-weight: bold;
	line-height: 32px;
	margin: 0px;
	right: 0;
	color: #d4d6cc;
	/*font-size: 80%;*/
	font-size: 120%;
	text-align: center;
	top: var(--odi-logintab-top);
}

.tab ul.login li.left {
	background: url(/images/logslide/tab_l.png) no-repeat left 0;
	height: 42px;
	width: 30px;
	padding: 0;
	margin: 0;
	display: block;
	float: left;
}

.tab ul.login li.right {
	background: url(/images/logslide/tab_r.png) no-repeat left 0;
	height: 42px;
	width: 30px;
	padding: 0;
	margin: 0;
	display: block;
	float: left;
}

.tab ul.login li {
 	text-align: left;
	padding: 0 6px;
	display: block;
	float: left;
	height: 42px;
  	background: url(/images/logslide/tab_m.png) repeat-x 0 0;
}

.tab ul.login li a {color:#15adff;text-decoration:none;}
.tab ul.login li a:hover {color:#fff;}
.tab .sep {color:#808080;}

.tab a.open, .tab a.close {
    margin:0px;
	height: 20px;
	line-height: 20px !important;
	/*padding-left: 30px !important;*/
	padding-left: 30px;
	cursor: pointer;
	display: block;
	/*width: 80px;*/
	width: 150px;
	position: relative;
	top: 6px;
}

.tab a.open {background: url(/images/logslide/bt_open.png) no-repeat left 0;}
.tab a.close {background: url(/images/logslide/bt_close.png) no-repeat left 0;}
.tab a:hover.open {background: url(/images/logslide/bt_open.png) no-repeat left -19px;}
.tab a:hover.close {background: url(/images/logslide/bt_close.png) no-repeat left -19px;}

/* sliding panel */
#toppanel {
	position: absolute;   /*Panel will overlap  content */
	right:0;
	/*position: relative;*/   /*Panel will "push" the content down */
	top: 0;
	width: fit-content;
	z-index: 90000;
	text-align: center;
	margin-left: auto;
	margin-right: auto;
}

#panel {
	width: 390px;
	color: #ddd;
	background: #545454;
    border-bottom:1px solid #646769;
    border-left:1px solid #646769;
    border:1px solid #646769;
	overflow: hidden;
	position: relative;
	right:0;
	z-index: 80000;	/* was 3 -bill */
	display: none;
	top:0;
	float:right;
    margin:0px;
    padding:1px;
}

#panel a {
	text-decoration: none;
	color: #15ADFF;
}

#panel a:hover {
	color: white;
}

#panel .content input:focus.field {
	background: #545454;
}

/* BUTTONS */
/* Login and Register buttons */
#panel .content input.bt_login,
#panel .content input.bt_register {
	display: block;
	float: left;
	clear: left;
	height: 24px;
	text-align: center;
	cursor: pointer;
	border: none;
	font-weight: bold;
	margin: 10px 0;
}

#panel .content input.bt_login {
	width: 74px;
	background: transparent url(/images/logslide/bt_login.png) no-repeat 0 0;
}

#panel .content input.bt_register {
	width: 94px;
	color: white;
	background: transparent url(/images/logslide/bt_register.png) no-repeat 0 0;
}

#panel .lost-pwd {
	display: block;
	float:left;
	clear: right;
	padding: 15px 5px 0;
	font-size: 0.95em;
	text-decoration: underline;
}

#formlogin {
	float:right;
	text-align:right;
	padding:10px 10px 6px 10px;
	line-height:19px;
}






/* Left NavBar & Left Menu */
#leftnav {clear:both;float:left;width:170px;height:100%;margin:0;padding:0 15px;vertical-align:top}
#leftnav {position:absolute; left:4px; top:calc(var(--odi-header-height) + 4px); max-width: fit-content; }
#leftmenu{font-size:13px;margin-top:-1px;}

/* #endregion */

/* Headers & Global Tags */
h1 { font-weight: bold; font-size: 20px; }
h2 { font-weight: bold; font-size: 18px; }
h3 { font-weight: bold; font-size: 15px; }
h4 { font-weight: bold; font-size: 12px; }
h5 { font-weight: bold; font-size: 10px; }
dd { font-weight: normal; font-size: 11px; }
dt { font-weight: bold; font-size: 12px; }
table {border-collapse:collapse; border: none; font-size:11px;}
hr {border:none; height:1px; color:#999; background-color:#999}

/* Special Styles */
.bold   { font-weight: bold }
.italics{ font-style:oblique }
.center { text-align: center }
.right  { text-align: right }
.left   { text-align: left }
.justify{ text-align: justify }
.rbutton{ font-size: 10pt }
.blue   { color:#00f }
.red    { color:#d00 }
.brtred { color:#f00 }
.white  { color:#fff }
.orange { color:var(--odi-md-orange) }
.hide   { display:none }
.caps   { text-transform:capitalize }
.upper  { text-transform:uppercase }
.smcaps { font-variant: small-caps; }
.tight  { margin: 0px }
.padtop { padding-top: 3px; }
.cursor-pointer { cursor:pointer }
.top { vertical-align: top }
.bottom { vertical-align:bottom }
.bold-header { font-size:16px; font-weight:600;border-bottom:1px solid #999;padding-bottom:5px;margin-bottom:10px;text-align:center }

/* Main Menu */  
.mmenu  { font-size: 10pt;}
.mmhead { font-size: 10pt; }
.mmjump {}
.mmblue { color: #039;}
.mmred  { color: #900;}
.mmgrn  { color: #054;}
img.mmimg { margin: 0px 2px 0px 6px; border: none; width: 10px; height: 10px; }
.selectarrow { width: 30px; height: 20px; vertical-align:top; }

/*tag modifiers*/
.inp {font-size:12px}

a.mmfolder { text-decoration: none; }
span.mmfolder { text-decoration: underline; }

a.huh { font-weight:bold; font-size:8pt; color: #c33; }
a.huh:link    { background-color: inherit; text-decoration:none; }
a.huh:visited { background-color: inherit; text-decoration:none; }
a.huh:hover { text-decoration:underline; }

a:not([href]) {color:var( --base-text-color )}

/* mainly links on home page [bb] */
a.hotlink {}
a.hotlink:hover {color:yellow;}
a.hotbold {font-weight: bold;}
a.hotbold:hover {}
a.mildlink{ color:#c33;}
a.coldbold { line-height: 130%; font-weight:bold; }
a.coldbold:hover { color:#91916c; background-color: #fff; }

dl.pressrel dt a {}
dl.pressrel dd {}
dl.pressrel dt {}

div.relogin{margin-bottom:20px;padding:2px;text-align:center;font-weight:bold;border:none}

a.gomain { font-weight: bold;font-size: 10pt; color:#039; text-decoration:none; }
div.gomain{width:80px;background-color:#adf;text-align:center;border-left:2px solid #cdf;border-top:2px solid #cdf;border-right:2px solid #8be;
           border-bottom:2px solid #8be;margin-top:20px;padding:2px;cursor:pointer}
input.gomain{text-align:center;border-left:2px solid #cdf;border-top:2px solid #cdf;border-right:2px solid #8be;border-bottom:2px solid #8be;
             margin-top:20px;padding:2px;cursor:pointer}

/* From preroute.frm */
.tblfont  { font: normal 10pt Arial,Helvetica,sans-serif; }
.tblfont2 { font: normal  9pt Arial,Helvetica,sans-serif; }

img.tridown { border: 0; width:10px; height:10px; padding: 0px 2px; }
img.triright{ border: 0; width:10px; height:10px; padding: 0px 2px; }

.hdrcolor { background-color: var(--odi-md-gray); }		/* background color of table header/footers */
.bgcolor  { background-color: var(--form-panel-gray1); }	/* background color of table interior */


/*Resurrections from Original CSS*/
/* alertdiv must be "positioned" for closebox to fit inside it */  /* this really should be redone. works but a bit "hacky". [RJM] */
.alertdiv{position:relative;padding:10px;border:1px solid #d00;margin-bottom:10px;}
.closebox{position:absolute;top:3px;right:3px;cursor:pointer}

/*new possibilities*/
.alertdiv-caution {background-color:#f8e183;padding:10px;border:1px solid #999;margin-bottom:10px;}
.alertdiv-warning {background-color:#e9b2c4;padding:10px;border:1px solid #999;margin-bottom:10px;}
.alertdiv-proceed {background-color:#b4e1b0;padding:10px;border:1px solid #999;margin-bottom:10px;}
.dropdiv{background-image:url("/images/xclose.gif");background-repeat:no-repeat;background-position:right 2px top 2px}

/*FROM WEATHER GRAPHICS PAGE*/
#encompass { margin:0; box-shadow: rgba(0,0,0,0.4) 1px 1px; }
/*#encompass div td {font-size:11px;}*/
#encompass li{margin-left:10px}
#encompass ul{}
#disclaim_header{border-width: 1px 1px 0; border:1px solid #999; background-color:var(--odi-md-gray); padding:0;margin:10px 20px -1px;font-weight:bold;text-align:center;vertical-align:middle}
#disclaim{border:1px solid #999;padding:0 10px 0 10px;margin:0 20px;font-size:10px}

#wxbounding{border:none}
#wxppage_base{}
#wxtabcontainer {background-color:var(--odi-md-gray); height:30px; padding:0px 0 4px;font-size:0}     /*font-size:0 removes white space*/
.wxpagetab {display:inline-block; text-align:center;font-weight:bold;height:30px;font-size:11px;padding:0 2px 0}
#wxinfosec {height:300px; background-color:var( --form-panel-gray1 );padding:5px}
#wxinfosec tr {vertical-align:top}
.wxpageclass {width:100%;}

#ptab1 {width:92px;margin:0;border-right:1px solid;cursor:pointer;padding-top:4px; background-color:var( --form-panel-gray1 )}
#ptab2 {width:92px;margin:0;border-right:1px solid;cursor:pointer;padding-top:4px}
#ptab3 {width:92px;margin:0;border-right:1px solid;cursor:pointer;padding-top:4px}
#ptab4 {width:120px;margin:0;border-right:1px solid;cursor:pointer;padding-top:4px}
#ptab5 {width:92px;margin:0;border-right:1px solid;cursor:pointer;padding-top:4px}
#ptab6 {width:92px;margin:0;border-right:1px solid;cursor:pointer;padding-top:4px}
#ptab7 {width:96px;margin:0;border-right:none;cursor:pointer;padding-top:4px}

.tblcols2 td {width:50%}
.tblcols3 td {width:33.34%}
.tblcols4 td {width:25%}

#CONUS       {display:block;}
#CURWINDS    {display:none;}
#FOREWINDS   {display:none;}
#ALASKA      {display:none;}
#PRVI        {display:none;}
#HIGUAM      {display:none;}
#OptGraphics {display:none;}

#routebuttons {margin:0px;overflow:hidden;border: none; background-color: var( --form-panel-gray1 ); padding: 5px; vertical-align:bottom}
#routebuttons td {width:25%; vertical-align:bottom}
#routebuttons input.ui-button {margin:5px 2px 4px}
#routebuttons img {margin:0 1px}
#shcut_route  {float:right;width:270px}

.rtovlay {}
td.overlay {margin:5px; padding:3px 5px; border:1px solid #999} 
.novl    {border: none}
.lighternovl { border: 1px solid #999; }
.darkernovl  { border: 1px solid #999; }
.oldernovl   { font-size: 10px; }

/*Route Briefing*/
.wxprodtbl { border: 1px solid #999; border-collapse:collapse; }
/*.wxprodtd{border:1px solid #999;border-collapse:collapse;background-image:url(/images/wxpbgt.png);background-repeat:repeat-x}*/
.wxprodtd{border:1px solid #999;border-collapse:collapse;background-color:#eee}
.wxprodtop { font-weight: bold;font-size: 10pt; text-align: center; }
.wxprodtxt { font-size: 10pt; }
.wxprodbox{font-size:10pt;border:1px solid #999;border-collapse:collapse;padding:2px;background-color:#eee;}
.panelinner input.ui-button {margin:0 2px 4px}

/* Wx Briefings - Alert Box */
.alertprodtop { font-weight: bold;font-size: 10pt; text-align: center; }
.alertprodbox{font-size:10pt;border:1px solid #999;border-collapse:collapse;padding:2px;background-color:#eee;}

/* Flight Plan Status */
table.fpstat {font-size: 10pt; margin:0; border: 1px solid #999; border-collapse:collapse; width:100% }
.fpstat th { font-weight: bold; background-color: var(--odi-md-gray); text-align: center; }
.fpstat td { text-align: center; border-width: 1px; border-color:#999; background-color: var( --form-panel-gray1 )}
td.fpdat {background-color:var(--odi-md-gray); font-weight:normal; font-size:90%}

th.fphdr { font-weight: bold; font-size:10pt; text-align: center; }
/*td.fpdat { font-size: 10pt; text-align: center; }*/

/* ODI/OASIS Style Briefings */
input.brf-cb { margin-right:0.35em; vertical-align:middle; }
span.brf-cb { vertical-align:middle; }
div.brf-label,
div.brf-input { display:inline-block; vertical-align: middle;}
div.brf-input input { width:48px; }
div.p10 { width: 9%; display:inline-block; }
div.p15 { width:14%; display:inline-block; }
div.p20 { width:19%; display:inline-block; }
div.p25 { width:24%; display:inline-block; }
div.p30 { width:29%; display:inline-block; }
div.p35 { width:34%; display:inline-block; }
div.p40 { width:39%; display:inline-block; }
div.p45 { width:44%; display:inline-block; }
div.p50 { width:49%; display:inline-block; }
div.p60 { width:59%; display:inline-block; }
div.p70 { width:69%; display:inline-block; }
div.p80 { width:79%; display:inline-block; }
div.p90 { width:89%; display:inline-block; }

/* ----------- Having problems dragging non-modal dialogs with position relative. Changed to fixed. ---------- */

.ui-dialog { border-radius:0.5rem; z-index:999999; border:2px solid var(--odi-dk-blue); }


dialog.centered { position: fixed !important; left: 50%; top: 50%; transform: translate(-50%, -50%); z-index: 50 !important; /* Lower than Bootstrap modal */ }
dialog.nonmodal-centered { position: fixed !important; left: 10%; top: 15%; max-height: 80vh; max-width:fit-content; min-height: 32px;
			   background-color:var(--odi-lt-gray2); }	/* max-width was 80vw */
.dialog-wrapper { display:flex; flex-direction:column; flex-wrap:nowrap; flex-grow:1; min-height:0; max-width:90vw; background-color:var(--odi-lt-gray2); }
.dialog-main    { display:flex; flex-direction:column; flex-wrap:nowrap; flex: 1; min-height:0; /* overflow: auto; */ }
.dialog-content { overflow:auto; flex: 1 1 0%; min-height:0; background-color:var(--odi-lt-gray1); }
.dialog-filler  { height:var(--odi-footer-height); background-color:var(--odi-lt-gray2); }  /* takes up same space that absolute positioned footer occupies. DON'T use flex on it. */
.dialog-footer  { position:absolute; bottom:0; width:100%; background-color:var(--odi-md-gray); border:1px solid #999; height:var(--odi-footer-height); }
.dialog-footer .footer-inner { position:relative; top:50%; margin-top:-12px; }

dialog.nonmodal-centered form { display:flex; flex-direction:column; height:calc(100% - 10px); }	/* the form is the container for the content (see odi.js -> gen_NewList()) */
dialog.nonmodal-centered input.close-button { float:right; margin: 0 0.5rem 0 0.5rem; }	/* make the close window buttons slide to right */

/* Note: .lst-title or .dlg-title serves as the .dialog-header element */

dialog#dlg-fplan-list,
dialog#dlg-curfplan-list { max-width:85%; max-height:85%; overflow-x:auto; border-radius:0.5rem; }
dialog table.listwrapper { border:0; min-width:256px; }	/* minimum width is size of minimized items */


dialog { margin:0; padding:0; border: 2px solid var( --odi-dk-blue ); border-radius:0.5rem; font:400 9pt Arial,Helvetica,sans-serif;
	 overflow-x:hidden; }
dialog::backdrop { background-color: hsl(44, 0%, 30%, 45%); }
dialog table     { background-color:var( --form-panel-gray1 ); border:0; }

dialog.statgreen  tr.dlg-title { background-color:var(--odi-solid-statgreen);  }
dialog.statyellow tr.dlg-title { background-color:var(--odi-solid-statyellow); }
dialog.statred    tr.dlg-title { background-color:var(--odi-solid-statred);    }
dialog.statgray   tr.dlg-title { background-color:var(--odi-solid-statgray);   }
dialog.statblue   tr.dlg-title { background-color:var(--odi-solid-statblue);   }
dialog.statblack  tr.dlg-title { background-color:var(--odi-solid-statblack);  }

.dlg-title,
.lst-title { flex-shrink:0; color: #fff; font-weight:700; font-size:10pt; height:32px; cursor: move; border:0; } /* removed: -webkit-backface-visibility: hidden; */

.dlg-title { background-color:var(--odi-dk-blue); }
.lst-title { background-color:var(--odi-bs-cyan700); }

/* Insert a "ghost" element before the header content to be able to use the vertical-align:middle trick to center the title and button vertically in the header: */
/* The tr.dlg-title option is for the way flight plan dialogs are created. The .inner-header option is the newer lists are created. */

tr.dlg-title td:before { content: ''; display: inline-block; height: 30px !important; vertical-align:middle; margin-right: -0.25em; }
.inner-header:before { content: ''; display: inline-block; height: 100%; vertical-align:middle; margin-right: -0.25em; }

.inner-header { display: inline-block; width:100%; height:100%; }

.dlg-title span {padding-left: 0.6em; vertical-align:middle;   }	/* used to be vertical-align:-40% when fiddling with position! */
.lst-title span {padding-left: 0.6em; height:100%; vertical-align:middle; }

.dlg-title th,
.dlg-title td { border:0; }

table.fplan-inner { min-width:100%; }
tr.dlg-title    { min-width:100%; }
tr.dlg-title td { min-width:100%; }

#minDomFp, #minIcaoFp { float:right; }
.header-btn { margin:4px 0.5rem 4px 0.5rem; vertical-align:middle; float:right; }

/* The highest alarm indicator on the lists' headers: */
div.alarmval.statgreen  { background-color:var(--odi-solid-statgreen);  }
div.alarmval.statyellow { background-color:var(--odi-solid-statyellow); }
div.alarmval.statred    { background-color:var(--odi-solid-statred);    }
div.alarmval { display:inline-block; border-radius: 4px; width:18px; height:18px; vertical-align:middle; border: 1px solid black; margin-left:8px; margin-right:-6px; }


/* Alarm Bar Stuff */
div.alarm-bar-label:before { content:''; display:inline-block; height:100%; vertical-align:middle; margin-right:-0.25em; }	/* used to vertically center the label */
div.alarm-bar-label { display:inline-block; vertical-align:middle; height:52px; width:72px; text-align:center; background-color:var(--odi-lt-gray1); margin-top:10px;}
div.alarm-bar-label span { height:100%; }
div.alarm-bar-item  { display:inline-block; vertical-align:middle; height:52px; width:72px; margin-top:10px; text-align:center; background-color:var(--odi-lt-gray1);
		       border-radius:2px; }
div.alarm-bar-item span  { height:100%; margin-top:4px; margin-bottom:2px; }
div.alarm-bar-item:hover { background-color:var(--odi-faint-blue); border-color:var(--odi-faint-gray); }
div.alarm-bar-item:hover:active { padding-left:4px; }
img.alarm-bar-img   { margin-bottom:-4px; width:32px; height:32px; }

/* extra titles for multilist */
div.boxit { min-width:100%; text-align: center; margin-top:10px; padding-top:2px; padding-bottom:2px; border: 1px solid #999;
	    color:#fff; background-color:var(--body-bg-color); font-size: 11pt; font-weight: normal; }

/* tables for lists */
.wait { cursor: wait !important; }
.table-scroll { position: relative; max-width:1280px; margin:auto; overflow-y:auto; height: 600px; 
		/* scroll-snap-type: y proximity; */ scroll-padding-top: 36px; scroll-padding-bottom: 36px; }
.mini-table-scroll { position: relative; max-width:1280px; margin:auto; overflow-y:auto; overflow-x:auto; height: 200px; 
		scroll-padding-top: 36px; scroll-padding-bottom: 36px; }

/* List tables with "sticky" header and footer need special border handling when scrolling: */
table.list { border-collapse:separate; border-spacing:0; border:1px solid #999; }

/* Oct 21 - commented out following two to try to let columns shrink/grow with col resizer: */
/* th.info { min-width:400px; } */
/* th.tos { min-width:200px; } */

table.list th { font-family: Verdana,Arial,Helvetica,sans-serif; }

div.can-b-long { max-width:60em; }	/* a <div> which can be embedded in a <td> to limit the content's width */

table.list thead th { font-size:9pt; height:25px; background-color:var(--odi-md-gray); }	/* reminder: min-height doesn't work in tables */
table.list thead    { background-color: var(--odi-md-gray); top:0; position:sticky; }
table.list tbody td { height:1.25rem; }	/* new for odi on April 17, '25 */
.emptylist td { height: 2.0rem !important; font-size:11pt; padding: 20px 200px;
		text-align: left; border: 1px solid #999; color:var(--odi-dk-sftgray); background-color:var(--odi-lt-gray2); }
table.list th       { font-family: Verdana,Arial,Helvetica,sans-serif; border:1px solid #999; border-left:none; cursor: default; padding-right: 10px; }
table.list thead th.asc:after { content: "\25b2"; }	/* the up arrow/triangle */
table.list thead th.desc:after{ content: "\25bc"; }	/* the down arrow/triangle */
table.list thead tr, table.list tbody tr { border-top:1px solid #999;border-bottom:1px solid #999; }
/* table.list tbody tr { background-color:var( --form-panel-gray1 ); } */
table.list tfoot td { background:var(--odi-md-gray); /* position:sticky; bottom:0; */ border: 1px solid #999; }

table.list th { padding:1px 4px 1px 4px; text-align: left; }
table.isl td { padding:3px; }
table.list td { padding:2px 4px 2px 4px; border: 1px solid #999; border-left:none; border-top:none; }
table.list tr > th:first-child,
table.list tr > td:first-child { border-left: 1px solid; }
table.list td.wider { min-width:120px; }

table.list tr.list:hover { cursor:pointer; }
table.sublst tr.sublst { cursor:pointer; border: 1px solid #999; vertical-align:middle; }
table.sublst tr.sublst:hover { background-color:#f6f5eeff; transition: .2s; }
tr.sublst td { display:flex;  align-items: center; height: 16px; }
tr.sel, tr.subsel { background-color:#11e !important; color: #fff !important; }

tr.statgreen	    { background-color:var(--odi-row-statgreen); }
tr.statyellow	    { background-color:var(--odi-row-statyellow); }
tr.statred	    { background-color:var(--odi-row-statred); }
tr.statgray	    { background-color:var(--odi-row-statgray); }
tr.statgreen:hover  { background-color:var(--odi-hov-statgreen);  transition: .2s; }
tr.statyellow:hover { background-color:var(--odi-hov-statyellow); transition: .2s; }
tr.statred:hover    { background-color:var(--odi-hov-statred);    transition: .2s; }
tr.statgray:hover   { background-color:var(--odi-hov-statgray);   transition: .2s; }
tr.statnew	    { color:var(--odi-col-statnew); font-weight: bold; }

fieldset[name="sarstat-fieldset"] input.saralert { background-color:var(--odi-saralert-color) !important; color:#FFFFFF !important; }
fieldset[name="fltstat-fieldset"] input.listwarn { background-color:var(--odi-warning-color) !important; color:#000000 !important; }
fieldset[name="fltstat-fieldset"] input.listover { background-color:var(--odi-overdue-color) !important; color:#FFFFFF !important; }
input[name="ETA"].listwarn { background-color:var(--odi-warning-color) !important; color:#000000 !important; }
input[name="ETA"].listover { background-color:var(--odi-overdue-color) !important; color:#FFFFFF !important; }
input[name="ETD"].listwarn { background-color:var(--odi-warning-color) !important; color:#000000 !important; }
input[name="ETD"].listover { background-color:var(--odi-overdue-color) !important; color:#FFFFFF !important; }


/* popup dialogs from lists */

/** debugging this: table#fplan-list-inner, form#FplanListDialog { width:100%; table-layout:fixed; } **/
table#fplan-list-tbl { overflow:auto; }
table#fplan-list-tbl th,
table#fplan-list-tbl td { max-width:600px !important; } /* tried 33% but it didn't work */


/* ----------- START: Scoped styles for the custom modal ------------------ */

/* Modal Backdrop */
#dynamicModal.custom-dialog .modal-backdrop {
    background-color: rgba(44, 62, 80, 0.5) !important;
    z-index: 1060 !important; /* Ensure it's above <dialog> */
}

#dynamicModal {
    z-index: 1080 !important;
}

/* Ensure Bootstrap modal is always on top */
#dynamicModal.custom-dialog .modal.show {
    z-index: 1080 !important;
}

/* Modal Content */
.custom-dialog {
    overflow: visible; /* Ensure no extra scrollbars on parent modal */
    position: relative;
    inset: auto;
    z-index: 1080 !important; /* Ensure modal itself is above backdrop */
    overflow-x: hidden !important; /* Ensure no extra scroll */
}

/* Comm/Nav modal should be wider */
#dynamicModal[data-modal-type="commnav"] .modal-dialog {
    max-width: 90vw !important; /* This rule fixed clipping! */
}

/* Transponder modal stays narrow */
#dynamicModal[data-modal-type="transponder"] .modal-dialog {
    max-width: 500px !important; 
}

/* Schedule modal needs to be wider */
#dynamicModal[data-modal-type="schedule"] .modal-dialog {
    max-width: 80vw !important;
}

.custom-dialog .modal-content {
    border: 2px solid var( --odi-dk-blue );
    border-radius: 8px;
    color: var(--base-text-color);
    background-color: var( --form-panel-gray1 );
    box-shadow: 0 4px 6px rgba(0, 0, 0, 0.3);
    max-height: 90vh; /* Limit modal height to 90% of viewport */
    width: fit-content !important;
    max-width: none !important;
    min-width: 500px; /* Prevent it from being too small */
    overflow-x: hidden; /* Prevent unnecessary horizontal scrolling */
    overflow: hidden;
    max-width: 100% !important;
    display: flex;
    flex-direction: column;
    overflow-y: auto; /* Allow scrolling for overflowing content */
    padding-right: 0; /* Match default scrollbar padding */
    scrollbar-color: var( --odi-dk-blue ) #f1f1f1; /* For Firefox */
    scrollbar-width: thin; /* For Firefox */
    z-index: 1090; /* Ensure the modal itself appears above everything else */
}

.custom-dialog .modal-header {
    background-color: var( --odi-dk-blue ); /* Title background color */
    color: #fff; /* Title text color */ 
    height: 32px; /* Fixed height */
    display: block; /* Flexbox for alignment */
    text-align: left; /* Left-justify the text */
    padding: 0 1rem; /* Horizontal padding */
    position: relative; /* Ensure no conflicts */
    border-bottom: 2px solid #02223b; /* Bottom border */
    margin: 0;
    z-index: 2; /* Ensure header stays above scrolling content */
    cursor: move;
}

.custom-dialog .modal-title {
    font-size: 1rem; /* Title font size */
    margin: 0; /* Remove default margin */
    font-weight: bold;
    line-height: 32px; /* Align text with height */
}

.custom-dialog .modal-dialog {
    width: auto;
    min-width: 500px; /* Prevent collapse */
    margin: 0 auto; /* Centers the modal horizontally */
    max-height: 90vh; /* Limit dialog height */
    margin: 0 auto; /* Center modal */
    max-width: none; /* Remove Bootstrap constraint  */
    width: fit-content !important; /* Allow the modal to expand */
    min-width: fit-content; /* Prevent unnecessary scrolling */
    overflow: visible !important; /* Ensure no hidden overflow */
    overflow-x: hidden !important;
}

.custom-dialog .modal-body {
    overflow-y: auto; /* Enable vertical scrolling when content overflows */
    overflow-x: auto; /* Enable horizontal scrolling when content overflows */
    width: auto !important;
    max-width: 100%;
    flex-grow: 1;
}

/* Disable Background Scrolling */
.custom-dialog.modal-open {
    overflow: hidden !important; 
}

/* Inputs and Select */
.custom-dialog input[type="checkbox"],
.custom-dialog select {
    border: 1px solid var( --odi-dk-blue );
    border-radius: 4px;
    padding: 4px;
    margin: 2px 0;
}

.result-area {
    position: relative; /* Ensure child elements (highlights) align properly */
}

.invalid-char {
    text-decoration: underline red wavy;
}

.result-area.error {
    box-shadow: 0px 0px 5px 2px red !important; /* Force the red glow */
}

.custom-dialog .modal-content::-webkit-scrollbar {
    width: 12px;
}

.custom-dialog .modal-content::-webkit-scrollbar-track {
    background: #f1f1f1;
    border-radius: 6px;
}

.custom-dialog .modal-content::-webkit-scrollbar-thumb {
    background: var( --odi-dk-blue );
    border-radius: 6px;
    border: 2px solid var( --form-panel-gray1 );
}

.custom-dialog .modal-content::-webkit-scrollbar-thumb:hover {
    background: #02223b;
}

.custom-dialog .custom-table {
    background-color: var(--modal-bg-gray);
    border: 1px solid #000;
    border-collapse: collapse;
    width: auto; /* Allow it to size dynamically */
    max-width: 100%; /* Prevent overflow */
    table-layout: auto; /* Allow columns to shrink/grow */
    word-wrap: break-word; /* Prevent long text from breaking layout */
    white-space: nowrap; /* Prevent wrapping */
}

.custom-dialog .custom-table th,
.custom-dialog .custom-table td {
    text-align: left;
}

.btn-custom {
    background-color: var(--modal-bg-gray);
    border-color: #000; /* Optional: set border color to match */
    color: #000; /* Optional: set text color */
    width: 27px; /* Adjust the width as needed */
    height: 18px; 
    justify-content: center;
    align-items: center;
    text-align: center; /* Ensures text is centered */
    font-size: 8px; /* Optional: adjust font size */
    padding: 0; /* Removes any internal padding that might offset the text */
    border-radius: 2px; /* 0 Removes the rounded corners */
    border: 1px solid #777 !important; /* lighten the button border color */
}

.btn-custom:hover {
    background-color: #A3A3A3; /* Optional: hover color */
}


/* needed this to align the Bootstrap button with its non-Bootstrap textbox */
.btn {
    margin-top: -2px; /* Adjust this value as needed */
}

/* Ensures consistent box sizes and alignment */
.custom-dialog .ui-element-box {
    display: inline-block; /* Makes box shrink-wrap to content */
    width: 100%; /* Ensures uniform width */
    padding: 10px; /* Inner padding for spacing */
    margin: 10px 0; /* Space between elements */
    border: 1px solid #000; /* Add border */
    border-radius: 4px; /* Rounded corners for a modern look */
    background-color: var(--modal-bg-gray); /* Light background */
    box-sizing: border-box; /* Includes padding and border in size */
}

/* Ensure checkbox labels do not wrap */
.custom-dialog .form-check {
    display: flex; /* test */
    align-items: flex-start;  /* Align to the top for multiline labels */
    flex-wrap: wrap; /* Allow wrapping if needed */
    gap: 8px; /* Space between checkbox and label */
    max-width: 100%; /* Prevent overflow */
    min-width: 200px !important; /* Ensure the container is wide enough */
    overflow: visible; /* Prevent unwanted overflow */
}

/* Ensure radio buttons and checkboxes are properly sized */
.custom-dialog .form-check-input {
    width: 16px;  /* Adjust width */
    height: 16px; /* Adjust height */
    margin-right: 8px; /* Add space between button and label */
    vertical-align: middle; /* Align with label text */
    accent-color: var(--bs-primary); /* Uses Bootstrap's blue */
    transform: scale(0.75); /* Slightly smaller checkboxes */
}

/* Aligns labels consistently */
.custom-dialog .form-check-label {
    font-size: 0.75rem; /* Ensure readable font size */
    margin: 0; /* Remove unnecessary margin */
    line-height: 1.5; /* Space between text lines */
    white-space: nowrap;  /* Prevent text from wrapping */
    overflow-x: auto; /* Allow horizontal scrolling */
    text-overflow: clip; /* No ellipsis */
    display: inline; /* Keep it inline so it wraps properly */
    word-break: break-word; /* Break long words if necessary */
    max-width: calc(100% - 24px); /* Ensure label doesn't overflow */
    overflow: visible !important; /* Prevent clipping */
    text-overflow: clip !important; /* Ensure full text is visible */
}

.custom-dialog input[type="checkbox"] {
    accent-color: var(--bs-primary); /* Applies the Bootstrap blue */
}

.custom-dialog label {
    white-space: nowrap !important; /* Prevent wrapping */
    overflow: visible !important; /* Allow text to fully display */
    text-overflow: unset !important; /* Prevent clipping */
    max-width: none !important; /* Remove width restrictions */
    display: inline-block !important; /* Maintain inline behavior */
}

.custom-dialog .comnav-item label {
    display: inline-block !important;
    white-space: nowrap !important;
    overflow: visible !important;
    text-overflow: unset !important;
    max-width: none !important;
    width: auto !important;
}

.custom-dialog input, .custom-dialog select {
    box-sizing: border-box; /* Ensures padding doesn't break layout */
    min-width: 0; /* Avoids width issues */
}

/* Dropdown consistency */
.custom-container select {
    display: block; /* Ensures it behaves like a block-level element */
    width: 100%; /* Ensures full-width consistency */
    padding: 8px; /* Inner padding */
    font-size: 1rem; /* Uniform font size */
    border: 1px solid var( --odi-dk-blue ); /* Border color */
    border-radius: 4px; /* Rounded corners */
    box-sizing: border-box; /* Includes padding in width */
}

/* Table adjustments */
.custom-container table {
    width: 100%; /* Full width for tables */
    border-collapse: collapse; /* Removes double borders */
    margin: 10px 0; /* Add spacing between table and other content */
}

.custom-container td {
    vertical-align: top; /* Align content at the top */
    padding: 10px; /* Space around content */
}

table.sched-table td { vertical-align:top; background-color: var(--modal-bg-gray); border: 0px solid #000; border-collapse: collapse;
		width: auto; max-width: 100%; table-layout: auto;
		word-wrap: break-word; white-space: nowrap;

}
table.sched-table input[type="checkbox"] {
    margin-right:2px;
}
table.sched-table input[type="text"] {
    font-size: 0.75rem;
}

table.dayofmon-tbl td { padding-right:10px; text-align:left; }
fieldset#sched-type-fs label { padding-right:10px; }

/***** lookupModal ******/
 
#lookupModal .match-highlight {
  background-color: #ffeeba !important;
}

/* ----------- END: Scoped styles for the custom modal ------------------ */


td.icao-equip { min-width:84px; }


table.fplan-tbl, table.button-spacer-sm { background-color:var(--modal-bg-gray); }

input.fpNUMAC { max-width:48px;}
input.littlebut { font-size: 8pt; max-height:18px; }
input.fixedbut  { font-size: 8pt; max-height:18px; min-width:84px; }
input.dotdotbut { font-size: 8pt; max-height:18px; max-width:18px; margin-left:0px; margin-right:0px; }
input.acid { min-width:84px; }
td.actype-cell  { min-width:100px; }

input, textarea, select {
  font-size: 9.5pt;
  font-weight: inherit;
  font-family: inherit;
  text-decoration: none;
  color: #000;
}
textarea {  line-height: 1.4em; }
textarea {text-transform:uppercase}
dialog#dlg-editwxdata textarea {text-transform:none;}

fieldset#ctl-char-fieldset { max-width:fit-content; }
table#ctl-char-legend td { padding-left:8px; padding-right:8px; }
table.form-spacer    {width:calc(100%-12px); border-collapse:separate !important; border-spacing:12px;margin:6px}
table.form-spacer-sm {width:100%; border-collapse:separate !important; border-spacing:2px;margin:1px}	/* was spacing 8px, margin 4px originally */
table#addin-tbl-inner {width:100%}
tr.filler-row { height:2em; } /* in dialog EditFacMsgDialog */
td.horz-spacer { width: 50px; }
td.padright { padding-right:1em; }
td.sarwide { min-width: 16em; }
div.thirds { width:32%; display:inline-block; }
#FPTYPE {min-width:80px}
#RULES {min-width:120px}
#RESPFSS {min-width:80px}
span.rt{float:right}
span.lft{float:left}
.ibut    {min-width:66px;margin-right:20px}
.ibut-sm {min-width:66px;margin-right:10px}
.hidden { display:none }
input.twodigit, input.dd2  { max-width:1.9em; }
input.fourdigit, input.dd4 { max-width:3.3em; }
input.sixdigit, input.dd6  { max-width:5.5em; }

/* tables with resizable columns! */
table.coltable { border-collapse: collapse; }
table.coltable,
table.coltable th,
table.coltable td { border: 1px solid #ccc !important; }

table.coltable th, table.coltable td { padding-left: 0.5rem; padding-right: 0.5rem; overflow: hidden; text-overflow:ellipsis; white-space: nowrap; }
table.coltable th { position: relative; }
.resizer {
	position: absolute;
	top: 0;
	right: 0;
	width: 5px;
	cursor: col-resize;
	user-select: none;
}
.resizer:hover,
.resizing { border-right: 2px solid blue; }

.resizable {
	border: 1px solid gray;
	height: 100px;
	width: 100px;
	position: relative;
}


/* preroute.frm tables */
table.mmtbl  { width:100%; border: 1px solid #999; background-color: var( --form-panel-gray1 ); margin: 0 0 8px 0;padding:0px; border-collapse:collapse }
table.mmtbl th { border: 1px solid #999; font-weight:normal }

.tblnonono    { border: 0; border-spacing:0; margin:0; }
.tblnonono td { padding: 0px; }
td.skinny { width: 3px; }
table.tblftr-inner { width:800px; }

tr.mmtblhdr  { font-size:10pt; height:30px; background-color:var(--odi-md-gray); }
tr.mmtblftr  { font-size:12pt; height:30px; background-color:var(--odi-md-gray); }
tr.mmtblrow{border-top:1px solid #999;border-bottom:1px solid #999}
tr.mmtblnew{border-top:1px solid #999;border-bottom:1px solid #999}
tr.mmtblhdr td.mmfull { width: 100%; }
tr.mmtblhdr th.mmtt  { width: 75px; text-align:center; }
tr.mmtblhdr th { text-align:left; width: 100%; }

a.mmgrouplink       { text-decoration: none; padding:0 2px }
a.mmgrouplink:hover { color:blue; text-decoration: underline; }

td.mmgroup     { width: 85px; padding-left:2px; border: 1px solid #999; text-align:center }
/*td.mmcbedit    {width: 45px; border-right: none; border-top: 1px solid #cc9; border-bottom: 1px solid #cc9; border-left: 1px solid #cc9 !important; }*/
td.mmcbedit    { width: 35px; border:1px solid #999; border-width: 1px 0px 1px 1px;}
td.mmdataerr   { width:496px; }
td.mmdatanew   { width:496px; }
td.mmdatacomp  { width:347px; }
td.mmdatastor  { width:421px; }
td.mmdataerr, td.mmdatanew, td.mmdatacomp, td.mmdatastor
	       { padding-left:2px; font-size: 10pt; border:1px solid #999; border-width: 1px 1px 1px 0px; }  

td.mmdatatime  { width: 75px; text-align:center; border: 1px solid #999; }
td.mmdatatrans { width: 75px; text-align:center; border: 1px solid #999; }

table.mmnobord td { border:none; padding:2px 0px 2px 5px }
table.comnav td { font-size: 10px; }
table.acspec,table.acspec th,table.acspec td{border-collapse:collapse;border:1px solid #999}
/* shadow problem below with single tabbed forms... shadow extending vertically beyond the base form */
/* thought okay with panelinner but problems with 4px padding, so moved to paneltbl but then removed per above  RJM 07.05.2014 */
/*table.paneltbl { border: none; width:100%; border-collapse:collapse; background-color:var( --form-panel-gray1 );margin-top:10px; box-shadow: rgba(0,0,0,0.4) 1px 1px; }*/
table.paneltbl { border: none; width:100%; border-collapse:collapse; background-color:var( --form-panel-gray1 ); margin-top:10px;}
table.paneltbl tr {}
table.panelinner { padding: 4px; border: none }
table.panelinner img {margin:0 1px}
.tabformbody { box-shadow: rgba(0,0,0,0.4) 1px 1px; }

/*Page: Stored Profiles*/
#content-profiles {}
.profiles {width:70%; margin-bottom:15px; margin-left:15%; margin-right:15%; background-color :var( --form-panel-gray1 );}
.profiles th {background-color:var(--odi-md-gray); height:25px; font-size:110%}
.profiles input {margin:1px;}
.profiles td {padding:1px 10px;height:20px}
.profiles tr:last-child {background-color:var(--odi-md-gray); height:35px;}
.profiles img {margin:0 -50px 0 2px}   /*Not sure why 1st col so stubborn*/

/* Page: Graphical TFRs*/
#content-graphical-tfrs {text-align:center; background-color:var( --form-panel-gray1 ); padding-top:35px}
#content-graphical-tfrs table { width:100% }
#content-graphical-tfrs img, input {margin:1px 1px 0;}



td.bluetab{width:124px;background-color:var( --form-panel-gray1 );text-align:center;font-weight:bold;font-size:9pt;line-height:20px;border-right:1px solid}
td.group-spacer {background-color:rgb(212, 214, 204); width:323px}
td.tantab{background-color:var(--odi-md-gray); text-align:right;float:right;padding:0 4px 0 11px}
td.frmtxt { font-size:10pt }

/* Borders taken from results.pl (needed for status.pl still) */

.bdnr  { border-style: solid none  solid solid; }
.bdnl  { border-style: solid solid solid none ; }
.bdnlr { border-style: solid none  solid none ; }

.br{ font-size: 10pt }

p#ptitle { font-weight:bold;font-size:14pt;	text-align:center; margin:0px;}


.tt{cursor:help;text-decoration:none;}
.ttbold{cursor:help;font-weight: bold;}
.ttu{cursor:help;text-decoration:underline;}

/* MyDUAT/MyFlightService Shortcut */
.mdshortcut{border:1px solid #999;border-collapse:collapse;background-color:#c6d4dd;}
.mdshortcut select#pilot-name {width:250px}

td.mdlbl{font-size:10pt;font-weight:bold;text-align:center}

option.mdopt{color:#00c;font-weight:bold}

.jslinkshow,.jslinkhide{font-size:10pt;cursor:pointer;text-decoration:underline}
.jslinkshow { display: inline; }
.jslinkhide { display: none; }

.inpshow { display: inline; }
.inphide { display: none; }

/*+++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++*/

/*  ==== RJM MODS ====  */

/* Top Div */
#logo img{float:left; margin:17px 0 0 15px; border:0; }
#mapthumbs {float:right; margin: 15px 15px 0;}
#mapthumbs img { border:1px solid #a9bfd3; width:100px;height:70px; max-width:100px;max-height:70px;}
img#wxsnap  {border:none;}
#wxsnapshot {font-size:15px; font-weight:600;line-height:30px;}
#slider-wrapper {text-align:center;width:500px;height:300px;margin: 0 auto;}


/*for PopUps Only*/
.popup {background-color:#fff;background-image:none; font-size:11px; padding: 15px;border-collapse:collapse; margin:0 auto}
.stickynote {background-color:lemonchiffon;background-image:none; font-size:11px; padding: 15px;border-collapse:collapse}


/* Left NavBar & Left Menu */
.mmsubitem {display:inline-block; width:140px;}
.mmsubitem-selected {
    display:inline-block;
    width:140px;
    background-image:url("/images/subitem-active.gif");
    background-repeat:no-repeat;
    background-position:right 0px center;
}
#socialmedia {margin:0 auto; padding:6px 6px 3px;border-bottom:1px dotted var( --main-page-gray );}
#socialmedia a {margin: 0 2px;}


/* Login Tab New & Overrides */
#login-user-info {display:none}
#login-user-info span {margin-left:8px;}
#login-inputs input {font-size:11px;}

/* Login Form Overrides */
#formlogin input.bt_login{font-size:9px;border:none;width:56px;height:18px;
	background:transparent url(/images/logslide/bt_login2.png) no-repeat 0 0;margin:0 12px; cursor:pointer;}
/* .logininp {height:12px;width:125px;background-color:#ddd;border:none;} */
.logininp {
  height:20px; width:125px; background-color:#eee; font-weight:bold;
  transition: all 0.30s ease-in-out;
  outline: none;
  padding: 3px 0px 3px 0px;
  margin: 5px 1px 3px 0px;
  border: 1px solid #454545;
}

.logininp:focus {
  box-shadow: 0 0 8px rgba(244, 244, 244, 1);
  padding: 3px 0px 3px 0px;
  margin: 5px 1px 3px 0px;
  border: 1px solid rgba(100, 240, 255, 1);
}


/* Main Page Content */
#content-page-title {
    font-family:clasica_slab_bold;
    text-align: center;
    font-size: 16px;
    font-weight: bold;
    margin: 0 0 11px;
    color: #777;
    background-color: var( --form-panel-gray1 );
    padding: 2px;
    border: 1px solid #999;
}
#hdata {display:none;}

/* Footer */

/* HOMEPAGE */

/*Special Alerts*/
div.alert{border:1px solid #d00;background-color:var( --form-panel-gray1 ); padding:10px 20px;margin:0;border-radius:0px}
.cell-error { background-color: #FFD83D; }

.alertbl {
    width:650px;     /* 60px pad reduces this from 710px or 100% */
    background-color: greenyellow;
    background-image: url("/images/alert_triangle.gif");
    background-repeat:no-repeat;
    height:35px;
    background-position: 10px center;
    padding:11px 0 0 60px;
    vertical-align:middle;
    margin: 10px 0;
}

.alertbl-redcell {
    background-color: #ffbbbb;
    background-image: url("/images/alert_triangle_onred.gif");
    background-repeat:no-repeat;
    background-position: 10px center;
    padding:5px 10px 5px 60px;
    vertical-align:middle;
}

/* GENERAL */
a { color:#0066b8; text-decoration:none;cursor:pointer}
a:hover {color:var(--odi-md-orange);}
a img { border: none; }
p.rule { margin: 10px 0; line-height:1px; background-color:#999; }

/* Left Nav Login Menu */
.mmenu a {text-decoration:none;}
.mmenu a:hover {text-decoration:none; color:var(--odi-md-orange);}
a.mmenu {text-decoration:none;}
a.mmenu:hover {color:#fff; text-decoration:none;}

/*jQuery-ui CSS Overrides*/

#accordion h4 {line-height:10px;}
.ui-accordion .ui-accordion-content {padding-right:.5em;}
/*.ui-accordion .ui-accordion-content {font-family:LimerickCdSerialMediumRegular; font-size:1em;  padding-right:.5em;}*/
.ui-accordion .ui-accordion-content a {color:#0066b8;}
.ui-accordion .ui-accordion-content a:hover {color:var(--odi-md-orange);}
.ui-widget-content {background-color:var( --form-panel-gray1 ); background-image:url(/images/wxpbgt.png);background-repeat:repeat-x;}
.ui-accordion .ui-accordion-header {margin-top:1px;}
input.ui-button {padding:0.15em 0.6em}

/* Gingerbread */
.edgefade {
    height:var(--odi-header-height);
    float:left;
    background-image:url("/images/edgefade_rt.png");
    background-repeat:repeat-y;
}
.newsprite {vertical-align:super; color:#ff0000; font-size:65%;}

/*ONE-OFFS*/
#faa-advisories {}
#faa-advisories ul {list-style-type:none; padding:0; margin:0 0 0 -15px;}
#faa-advisories li {display:inline; padding-left:15px;}
.dialup-indent {margin-left:30px}
.copyright {color:#999}

/* Misc leftovers? */
span.reqfld{font-weight:bold;font-size: 16pt;padding-left:2px;color:#d00}
span.reqfld2{font-size:16px;font-weight:bold;color:#d00}
span.reqdesc{font-size:8pt;color:#d00;background-color:inherit}
p.fv-title { font-weight: bold;font-size: 20px; text-align:center; margin:10px 2px 0px;}
p.fv-desc  { font-size: 80%; color:#33c; background-color:inherit; text-align:center; margin:0px;}
a.fv-link  {}
/*a.adizlink{ font-size: 90%; color:#a00; background-color:inherit; }*/
p.msg  { text-align:left; margin:0in; margin-bottom:.0001pt; }
p.msgi { text-align:left; margin:0in; margin-bottom:.0001pt; margin-left:.5in; }
p.msgc { font-size:9pt; font-family:"courier new",monospaced; margin:0in; margin-bottom:.0001pt; }
#loginhelp {}

/* cgi-bin/profile.pl
.result-error { width:700px; }

/* New Site Notice */
#newsite-notice {display:none;}
#newsite-notice a {color:#0066b8;}
#newsite-notice a:hover {text-decoration:underline;}
#newsite-notice .ui-dialog-titlebar {display:none;}

/* New Ids */
#news_immed {font-size:14px; font-weight:bold;border-bottom:1px solid #777;padding:3px;margin-bottom:25px;}

/*New Classes*/
.news_date {font-weight:600;}

/* Page: File ICAO Flight Plan */
div.icao-panel { border: 1px solid #999; background-color: #eee; margin-top: 10px; margin-bottom: 10px; padding: 4px; }
div.icao-panel table { width: 100% }

/* Content Page Stylings */
#content-bookmark {background-color:var( --form-panel-gray1 );padding:25px;}
#content-lookup {font-size:11px;}

/* Test Form Font */
.formfont {}
.formfont .bold, .formfont th, .formfont b {}

/* Buttons */
.popbutton {border:1px solid #0066b8}
.popbutton:hover {}
/*input.popbutton {border:1px solid #0066b8}*/

/* Results Buttons - REMOVED TO results.pl.css */

/* Homepage Image Slider */
#slider img {display:none;}
#slide1{margin-left:70px;display:block}
#slide1-caption {font-size:15px; font-weight:600}

/* Monospaced Output */
/***
.mono-output {font-family:'eco_codingregular'; font-size:11px}
pre {font-family:"eco_codingregular";font-size:11px}
pre b {font-family:"eco_codingbold";}
***/
.mono-output {font-family:'cousineregular'; font-size:12px; }
pre {font-family: cousineregular,Courier New; font-size:12px; }
pre b {font-family: cousinebold; }
pre i {font-family: cousineitalic; }
pre b i {font-family: cousinebold_italic; }
pre i b {font-family: cousinebold_italic; }
pre.pre14 {font-size:14px}


/* Error Pages */
#content-errorpages {margin-top:10%}
.errorpages {font: 12px clasica_slab_bold}
.errorpages-title1 {font-size:36px}
.errorpages-title2 {font-size:24px}
.errorpages-title3 {font-size:18px}