/* 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 */

:root {
  --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-cyan:    #0dcaf0;	/* cyan from bootstrap */
  --odi-bs-teal:    #20c997;	/* teal from bootstrap */

  --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;

  --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-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);

  /* ------------------------------ *
   *  Next-gen modals design tokens
   * ------------------------------ */
  --modal-bg:          #ffffff;
  --modal-border:      #007bff;           /* Primary blue accent */
  --modal-secondary:   #20c997;           /* Teal accent (selectorModal) */
  --modal-title-bg:    var(--modal-border);
  --modal-title-color: #ffffff;
  --modal-radius:      6px;
  --modal-shadow:      0 4px 12px rgba(0,0,0,0.15);
  --modal-transition:  200ms ease-in-out;

}

/* 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;}

html { box-sizing: border-box; }

body {
    color: var( --base-text-color );
    background-color: var( --body-bg-color );
    height: 100%;
    font-family: Verdana,Arial,Helvetica,sans-serif;
    font-size: 11px;
    vertical-align: top;
    background-image: url(/images/br10t.gif);
}

/* Web Fonts */
/* see /webfonts/stylesheet.css */

/*#region PageLayout */

/* PageWrapper */
#pagewrapper {
    background-color: var( --odi-dk-blue );
    color: var( --main-page-gray );
    width: 1200px; /* 960px */
    height: 100%;
    margin: 10px auto;
    padding: 0;
    border: none;
    border-spacing: 0;
    border-collapse: collapse;
    border-radius: 0;
    box-shadow: 0 .5em 2em rgba(255,255,255,.3);
    background-image: url("/images/edgefade_rt.png");
    background-repeat: repeat-y;
}

/* Header */
#header {
    height: 115px;
    background: var( --odi-dk-blue );
    background: url(data:image/svg+xml;base64,PD94bWwgdmVyc2lvbj0iMS4wIiA/Pgo8c3ZnIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyIgd2lkdGg9IjEwMCUiIGhlaWdodD0iMTAwJSIgdmlld0JveD0iMCAwIDEgMSIgcHJlc2VydmVBc3BlY3RSYXRpbz0ibm9uZSI+CiAgPGxpbmVhckdyYWRpZW50IGlkPSJncmFkLXVjZ2ctZ2VuZXJhdGVkIiBncmFkaWVudFVuaXRzPSJ1c2VyU3BhY2VPblVzZSIgeDE9IjAlIiB5MT0iMCUiIHgyPSIwJSIgeTI9IjEwMCUiPgogICAgPHN0b3Agb2Zmc2V0PSIwJSIgc3RvcC1jb2xvcj0iIzdkYjllOCIgc3RvcC1vcGFjaXR5PSIxIi8+CiAgICA8c3RvcCBvZmZzZXQ9IjQ1JSIgc3RvcC1jb2xvcj0iIzIwN2NjYSIgc3RvcC1vcGFjaXR5PSIxIi8+CiAgICA8c3RvcCBvZmZzZXQ9Ijk5JSIgc3RvcC1jb2xvcj0iIzAzMzQ1YyIgc3RvcC1vcGFjaXR5PSIxIi8+CiAgPC9saW5lYXJHcmFkaWVudD4KICA8cmVjdCB4PSIwIiB5PSIwIiB3aWR0aD0iMSIgaGVpZ2h0PSIxIiBmaWxsPSJ1cmwoI2dyYWQtdWNnZy1nZW5lcmF0ZWQpIiAvPgo8L3N2Zz4=);
    background: linear-gradient(to bottom,var( --header-gradient-lt ) 0%,#207cca 45%,var( --header-gradient-dk ) 99%);
}


/* Main Page Content */
#mainpage {
    float: right;
    background-color: var( --main-page-gray );
    color: var( --base-text-color );
    height: 100%;
    margin: 0 0 0 0;
    min-height: 404px;
    width: 950px; /*710*/
    padding: 25px;
    border-radius: 0 0 0 0;
    vertical-align: top;
    background-image: url("/images/edgefade_rt.png");
    background-repeat: repeat-y;
}

/* 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;}
#leftmenu{font-size:13px;margin-top:-1px;}
#classic-link { margin-top:8px;}
#classic-link a { color:var(--link-classic-color);}
#classic-link a:hover { color:white;}

/* Footer */
#footer{clear:both;padding:0px;width:1200px;height:70px;vertical-align:middle;display:inline-block}	/*width:960px*/
#footer-left {margin:15px;width:170px;height:70px;float:left;vertical-align:middle}
#footer-right {margin: 15px; float:right;width:730px;text-align:center}
#footer ul{list-style-type:none;padding:0;margin:0 0 0 -10px;}
#footer li{display:inline;padding-left:10px;}
#footer a {color:var(--link-classic-color);}
#footer a:hover {color:white}
#sslseal{width:80px;height:40px;text-align:center;margin:0 auto}
#sslseal a {}


/*#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 }
.white  { color:#fff }
.orange { color:#ed7f00 }
.hide   { display:none }
.caps   { text-transform:capitalize }
.upper  { text-transform:uppercase }
.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; }*/


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

dialog.centered { position: fixed !important; left: 50%; top: 50%; transform: translate(-50%, -50%); z-index: 1050 !important; /* Lower than Bootstrap modal */ }
dialog.nonmodal-centered { position: fixed !important; left: 10%; top: 10%; max-height: 80vh; max-width:80vw; }
.dialog-wrapper { display:flex; flex-direction:column; flex-wrap:no-wrap; }
.dialog-content { overflow:auto; flex: 0.85; height: auto !important; }
.dialog-filler  { background-color:var(--odi-md-gray); flex-grow: 10; }
.dialog-footer  { position:absolute; width:100%; margin-top: auto; bottom:0; background-color:var(--odi-md-gray); border:1px solid #999; height: 2.8em; }
.dialog-footer .footer-inner { position:absolute; top:50%; height:2.8em; margin-top:-1.4em; }

/* 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; }	/* was overflow-x:scroll 'til April 2nd, 2025 */
dialog table.listwrapper { border:0px; 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:#116611; }
dialog.statyellow tr.dlg-title { background-color:#bfb304; }
dialog.statred    tr.dlg-title { background-color:#990505; }
dialog.statgray   tr.dlg-title { background-color:#666666; }
dialog.statblue   tr.dlg-title { background-color:var( --odi-dk-blue ); }
dialog.statblack  tr.dlg-title { background-color:#0f0f0f; }

.dlg-title,
.lst-title { flex:0.2; 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-cyan); }

/* 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: */
.lst-title:before { content: ''; display: inline-block; height: 100%; vertical-align:middle; margin-right: -0.25em; }

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

.dlg-title span {padding-left: 1.2em; vertical-align:-20%;   }
.lst-title span {padding-left: 1.2em; vertical-align:middle; }

.dlg-title th,
.dlg-title td { border:0; }	/* removed: -webkit-backface-visibility:hidden; */

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:0 0.5rem 0 0.5rem; vertical-align:middle; float:right; }


/* 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; }

table.list thead tr { font-size:9pt; min-height:25px; background-color:var(--odi-md-gray); }
table.list thead    { background-color: var(--odi-md-gray); top:0; position:sticky; }
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; }
.emptylist td { height: 120px; font-size:11pt; padding: 20px 200px; text-align: left; border: 1px solid #999; }

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:#00ff0060; }
tr.statyellow { background-color:#eeee0080; }
tr.statred    { background-color:#ee222280; }
tr.statgray   { background-color:#e5e4dd80; }
tr.statgreen:hover  { background-color:#00ff00ff; transition: .2s; }
tr.statyellow:hover { background-color:#eeee00ff; transition: .2s; }
tr.statred:hover    { background-color:#ee2222ff; transition: .2s; }
tr.statgray:hover   { background-color:#f6f5eeff; transition: .2s; }
tr.statnew    { color:#22f; font-weight: bold; }
fieldset[name="sarstat-fieldset"] input.saralert { background-color:#EE0000 !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 and selector Booststrap modals ------------------ */

/* 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(--modal-border);
    border-radius: var(--modal-radius);
    background-color: var(--modal-bg);
    box-shadow: var(--modal-shadow);
    border-width: 1px !important;     /* thinner border */
    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(--modal-border) #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(--modal-border); /* primary blue tint */
    color: var(--modal-title-color); /* Title text color - white */ 
    height: 32px; /* Fixed height */
    display: block; /* Flexbox for alignment */
    text-align: left; /* Left-justify the text */
    padding: 0.5rem 1rem !important;
    position: relative; /* Ensure no conflicts */
    border-bottom: 2px solid var(--modal-border); /* Bottom border */
    margin: 0;
    z-index: 2; /* Ensure header stays above scrolling content */
    cursor: move;
}

/* Close button in header */
#dynamicModal .btn-close {
  filter: brightness(0) invert(1);       /* keep it white on blue */
}

.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(--modal-border);
    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;
}

input.error,
select.error,
textarea.error,
.result-area.error {
  border: 2px solid red !important;
  box-shadow: 0 0 4px 2px rgba(255,0,0,0.5) !important;
}

/*
.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(--modal-border);
    border-radius: 6px;
    border: 2px solid var(--modal-bg);
}

.custom-dialog .modal-content::-webkit-scrollbar-thumb:hover {
    background: var(--modal-border);
}

.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 {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  vertical-align: middle;

  font-size: 0.7rem; /* ~11px-12px */
  padding: 0 0.3rem; /* top/bottom: 0, left/right: a little extra */
  margin: 0 0.1rem;
  min-width: 0;

  background-color: var(--modal-bg-gray);
  border: 1px solid #777 !important;
  border-radius: 2px;
  color: #000;
  white-space: nowrap;
  width: auto;

  outline: none;
  box-shadow: none;
}

/* Make inputs and buttons share the same baseline & height */
#actype-cell input,
#equipInput${idNum},
#actype-cell .btn-custom,
#equipInput${idNum} + .btn-custom {
  vertical-align: middle;
}

.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(--modal-border); /* 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; }

/***** selectorModal ******/

#selectorModal .modal-content {
  border: 2px solid var(--modal-secondary);  /* teal border */
}

/* limit the selectorModals body to 70% of viewport height */
#selectorModal .modal-body {
  max-height: none !important;
  overflow-y: visible !important;
} 

/* Highlighting for search matches */
#selectorModal .match-highlight {
  background-color: #ffeeba !important; /* Yellow highlight */
  font-weight: bold;
}

#selectorModal tbody mark {
  background-color: #ffeeba;
  font-weight: bold;
  padding: 0;
}

/* Highlight for selected row */
#selectorModal .table-primary {
  background-color: #cce5ff !important; /* Light blue background for the selected row */
}

#selectorModal .modal-header {
  background-color: var(--modal-secondary); /* teal bar */
  color: var(--modal-title-color);
  align-items: center;
  padding: 0.5rem 1rem !important;
  cursor: move;
}

#selectorModal .btn-close {
  filter: brightness(0) invert(1);  /* white on teal */
}

/* If you accidentally injected any fs-* utility, override it */
#selectorModal .modal-icon.fs-3 {
  font-size: 1.25rem !important;
}

#selectorScroller {
  display: block;
  height: 400px; /* Adjust as needed */
  overflow: auto;
  border: 1px solid #ccc;
}
.row-item {
  display: flex;
  gap: 1rem;
  border-bottom: 1px solid #eee;
}
.row-item.bg-primary {
  background-color: #0d6efd !important;
  color: white;
}

/* stripping out the inert attribute (if present)  */

#selectorModal[inert],
#selectorModal[inert] *,
#selectorModal[inert] *::before,
#selectorModal[inert] *::after {
  background: none !important;
  outline: none !important;
}

/***** commom CSS *************/

#dynamicModal .modal-dialog,
#selectorModal .modal-dialog {
  position: absolute !important;
  margin: 0 auto;       /* still horizontally centered by Bootstrap when it first shows */
  transform: none !important; /* remove any transform */
}

/* Uniform font-size for both modals */
#selectorModal .modal-title,
#dynamicModal .modal-title {
  font-size: 1rem !important;    /* exactly 1rem */
  line-height: 1.2;
  display: flex;                 /* keep icon+text aligned */
  align-items: center;
  margin-bottom: 0;
}

/* Uniform icon size */
#selectorModal .modal-icon,
#dynamicModal .modal-icon {
  font-size: 1rem !important;    /* same as text */
  line-height: 1;
  flex-shrink: 0;
}

/*****  global modal CSS ******/

.modal.fade .modal-dialog {
  /* add a tiny lift on fade */
  transform: translateY(-8px);
  transition: opacity var(--modal-transition),
              transform var(--modal-transition);
}
.modal.show .modal-dialog {
  transform: translateY(0);
}

.icao-equip {
  white-space: nowrap;
  display: inline-flex;
  align-items: center;
  gap: 0.2rem; /* gap between input and button */
  vertical-align: middle; /* ensure baseline alignment */
}

.icao-equip button {
  transform: translateY(2px); /* move down/up */
}

/* ----------- END: Scoped styles for the custom and selector Booststrap modals ------------------ */


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; }


fieldset#ctl-char-fieldset { max-width:fit-content; }
table#ctl-char-legend td { padding-left:8px; padding-right:8px; }
table.form-spacer    {width:100%; border-collapse:separate !important; border-spacing:12px;margin:6px}
table.form-spacer-sm {width:100%; border-collapse:separate !important; border-spacing:8px;margin:4px}
table#addin-tbl-inner {width:100%}
textarea {text-transform:uppercase}
tr.filler-row { height:2em; } /* in dialog EditFacMsgDialog */
#FPTYPE {min-width:80px}
#RULES {min-width:120px}
#RESPFSS {min-width:80px}
td.padright { padding-right:1em; }
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  { max-width:1.5em; }
input.fourdigit { max-width:3.5em; }
input.sixdigit  { max-width:5.5em; }
td.sarwide { min-width: 16em; }

/* 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: 38px 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:12px;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:#ed7f00;}
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:#ed7f00;}
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:#ed7f00;}
.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:115px;
    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}

/* -------------- following must be at bottom of CSS file -------------- */

/* Kill Bootstraps translate/transition so we see no flicker */
.modal.fade .modal-dialog {
  transform: none !important;
  transition: none !important;
}

 /* Dramatic slide-down + fade */
.modal.fade .modal-content {
  opacity:  0;
  transform: translateY(-50px);   /* start 50px higher */
  transition:
    opacity 0.4s cubic-bezier(0.25,  0.1, 0.25, 1)   /* smoother fade */
  , transform 0.4s cubic-bezier(0.22,  1.0, 0.36, 1); /* ease-out pop */
}

.modal.show .modal-content {
  opacity:  1;
  transform: translateY(0);
}

/* Ensure dialogs are absolutely positioned for JS centering & draggable */
#dynamicModal .modal-dialog,
#selectorModal .modal-dialog {
  position: absolute !important;
  margin:   0 auto !important;
  transform: none !important;
  transition: none !important;
}