/* The browser (or Django?) will eventually cache this file, */
/* which is referenced in base.html.  So if you make changes  */
/* to this file you sometimes need to force it to be reloaded */
/* by changing the version in the line: */
/*   href="{% static 'css_sans.css' %}?v=1.e"  */
/* (e.g. use "?v=1.f") */

h1{ font-family:"Arial","Helvetica","sans-serif";
    font-size:20pt; font-weight:bold; }  
h2{ font-family:"Arial","Helvetica","sans-serif";
    font-size:16pt; font-weight:bold; }   
h3{ font-family:"Arial","Helvetica","sans-serif";
    font-size:12pt; font-weight:bold; }
h4{ font-family:"Arial","Helvetica","sans-serif"; font-size:12pt; }
h5{ font-family:"Arial","Helvetica","sans-serif"; font-size:11pt; }

/* Used by form in base_crispy_form.html */
.rt5-dialog {
    display: inline-block;
    /* position: relative;  /* may help with modal dialog positioning */
}

/* For Window with a "main window" figure, like:  */
/* density, relief, aspect, contour, river, mask  */
.rt5-window {
  border: 1px solid black;  border-radius:4px;
  /* min-width:200px; min-height:100px; */
  display: inline-block;
  vertical-align:top;
  margin: 0px;
  padding: 0px;
  height: fit-content;  /* may have a color bar */
  /* padding-right:40px; */
}

/* For a resizable main Window with a figure  */
/* Padding by 5px prevents losing resize grip */
/* Setting min-width and min-height causes */
/* small window border to briefly appear first. */
.window-resizable {
  border: 1px solid black;  border-radius:4px;
  display: inline-block; vertical-align:top;
  margin: 0px; padding: 0px;
  resize: both; overflow: auto; padding: 5px;
  min-width:200px; min-height:100px;
}

/* For Window with a function plot */
/* Padding by 5px prevents losing resize grip */
/* For shape plots, with a square window, and */
/*    "width:500px", the following all work; */
/*    "height:500px; height:fit-content"; */
/*    "height:auto;", and "height:100%" */
/* But they don't work for "normal" x vs. y plots. */
.rt5-function {
  border: 1px solid black;  border-radius:4px;
  display: inline-block; vertical-align:top;
  width: 650px; height:400px;
  margin: 0px; padding: 5px;
  resize: both; overflow: auto;
  min-width:200px; min-height:100px;
}

/* For Window with a SQUARE function plot */
/* Padding by 5px prevents losing resize grip */
.rt5-function2 {
  border: 1px solid black;  border-radius:4px;
  display: inline-block; vertical-align:top;
  width: 600px; height:600px;
  margin: 0px; padding: 5px;
  resize: both; overflow: auto;
  min-width:150px; min-height:150px;
}

/* For use with Django-tables2 tables */
/* See .table below for Bokeh data tables */
.rt5-table {
  /* border: 1px solid black;  border-radius:4px; */
  vertical-align:top;
  margin: 0px; padding: 10px;
  /* resize: both; overflow: auto; */
  /* width:880px; */
  width:100%;
  /* height:300px;  /* initial size */
  display:block;  /* initially hidden ? */
  min-width:400px; min-height:100px;  /* Extra height for buttons */
  white-space: nowrap;
  /* aspect-ratio:1;  /* Not needed */
}
/* This is a box around both table and buttons */
.rt5-table-box{
  border: 1px solid black;  border-radius:4px;
  width:960px; max-height:600px;
  margin-left:10px;  /* align with menu bar */
  padding:6px; padding-bottom:10px;
  resize: both; overflow: auto;
}
.rt5-table-header{
  font-size: 14pt; font-weight: bold;
  color: black;
  font-family: Arial, Helvetica, sans-serif;
  border-bottom: 1px solid #ccc;
}
.rt5-table-column{
  padding-right: 25px;  min-width:80px;
  font-size: 11pt;  color: black;
  font-family: Arial, Helvetica, sans-serif;
}
.table-container .odd {
  background-color: #E0F2F7;  /* found online */
  /* background-color: #E0E8EF; */
  /* background-color: #E2EAF1; */
  /* background-color: #E7EFF6; */
  /* background-color: #E0E7EE; */
  /* background-color: aliceblue;  #F0F8FF */
  /* background-color: #f3f3f3; /* Light grey for odd rows */
  /* background-color: #95c0cb;  /* Porcelain blue; too dark*/
}
.table-container .even {
  background-color: #ffffff; /* White for even rows */
}
.rt5-table th {
  border-bottom: 1px solid #ccc; /
}
.rt5-table th.orderable a {
    text-decoration: none;  /* Remove underline */
    color: #0d6efd;  /* bootstrap text-primary blue */
    background: url('../bitmaps/sort_both.png') no-repeat center right;
    padding-right:20px;
    /* font-weight: bold; */
}
/* Style for ascending sorted header anchors */
.rt5-table th.asc a {
    text-decoration: none;
    color: #0d6efd;  /* bootstrap text-primary blue */
    background: url('../bitmaps/sort_asc.png') no-repeat center right;
    padding-right:20px;
    font-weight: bold;
}
/* Style for descending sorted header anchors */
.rt5-table th.desc a {
    text-decoration: none;
    color: #0d6efd;  /* bootstrap text-primary blue */
    background: url('../bitmaps/sort_desc.png') no-repeat center right;
    padding-right:20px;
    font-weight: bold;
}

/* For bootstrap5 modal dialog messages */
/* Horizontal centering is automatic here. */
/*
.modal-dialog{
  border: 1px solid black;  border-radius:10px;
  margin-top: 200px;
}
.modal-body{
  font-size: 12pt;
  font-family: Arial, Helvetica, sans-serif; 
}
.modal-open{
  overflow:hidden;
}
*/

/* For modal information messages (e.g. missing files) */
/* To prevent vertical jumping, set position:absolute  */
/* and set margin-top. But fails if vertical size is too big. */
.rt5-message {
  display:block; min-width:340px;
  position:absolute;
  top: 12%;
  transform: translate(0%, -50%);
  margin-top: 200px;
  margin-left: 360px;
  border: 1px solid black;  border-radius:8px;
  /* box-shadow: 5px 5px 5px #bbbbbb; */
  padding:20px;   /* only used if wide enough */
  font-size: 12pt;
  font-family: Arial, Helvetica, sans-serif;
  /* top:10%; */
  /* vertical-align:50%; */
  /* overflow-y:auto; height:200px; */
  /* overflow-y:auto; max-height:200px; */
  /* overflow-y:auto; max-height:90vh; */
  /* overflow:auto; */ 
  /* resize: both; overflow: auto; */
  /* resize: both; overflow: scroll; */
}

/* For modal confirmation messages (e.g. overwrite) */
/* To prevent vertical jumping, set position:absolute  */
/* and set margin-top. But fails if vertical size is too big. */
.rt5-message-noborder {
  display:block; min-width:340px;
  position:absolute;
  /* top: 0%; */
  /* transform: translate(0%, -50%); */
  margin-top: 200px;
  margin-left: 360px;
  padding:20px;   /* only used if wide enough */
  font-size: 12pt;
  font-family: Arial, Helvetica, sans-serif;
}
 
/* For a "toolbox" to hold window tools */
/* "resize" doesn't work if we remove "overflow" */
/* "scroll" is an option for "overflow" */
.rt5-toolbox {
  /* border: 1px solid black;  border-radius:4px; */
  display: inline-block; vertical-align:top;
  margin: 0px; padding: 0px;
  /* resize: both; overflow: auto; */
  width:fit-content; height:fit-content; 
}

/* Trying to add some spacing. */
/* Change the width of the left-side blue border */
/*
.bk-toolbar-button.bk-active::before {
    border-left: 4px solid #1a73e8 !important;
    margin-left: 10px !important; 
}
.bk-Toolbar .bk-right{
  border-left-width: 5px;
}
/*
.bk-OnOffButton {
  width: 5px;
  margin-left:10px;
}
.bk-Toolbar {
  width:40px;
}
div.bk-ToolbarPanel {
  width:40px;
  margin-left:10px;
}
*/

/* For a DIV that holds the Vector Zoom window  */
/* NOTES FOR VECTOR ZOOM (tested in Chrome): */
/* (1) Want to make resizable, but "resize" only works
/*     if "overflow" is also set. */
/*     "scroll" is an option for "overflow" */
/* (2) Want to preserve aspect ratio close to 1. */
/*     But must adjust to account for buttons.   */
/*     "aspect-ratio" is ignored if both width & height are set. */
/*     Removing min-width, min-height didn't help with preserving aspect ratio. */
/* (3) Want to set initial width to 300px to match valzoom */
/*     Only way this works is: "width:auto; height:330px;" 
/* (4) veczoom is initially hidden with "display:none".
/*     "visibility:hidden" resulted in problems.   */
/* (5) Padding by 4px prevents losing resize grip. */
.veczoom {
  border: 1px solid black;  border-radius:4px;
  vertical-align:top; margin: 0px; padding: 4px;
  /* Only these specific combinations work as intended! */
  /* First is without menubar, 2nd is with menubar.
  /* aspect-ratio:100/110;       /* compromise */
  /* width:auto; height:330px;  */
  aspect-ratio:100/120;       /* compromise */
  width:auto; height:360px;
  resize:vertical; overflow:auto;
  /* resize: both; overflow: auto;  /* aspect ratio not preserved */  
    
  /* None of these options worked */
  /* width:300px; height:auto; */
  /* width:300px; height:100%; */
  /* width:300px; height:fit-content; */
  /* width:fit-content; height:fit-content;  /* works, but width not set*/
  /* object-fit:contain; */ /* didn't help */
  
  display: none;
  min-width:150px; min-height:180px;  /* Need this */
  /* ---------------- */
  /* aspect-ratio:1/1; */  /* gets better when enlarged */
  /* width:auto; height:auto; */
  /* width:max-content; height:max-content; */
  /* min-width:auto; min-height:auto; */
  /* width:fit-content; height:fit-content; */
}

/* For DIV that holds Value Zoom tool */
/* "resize" doesn't work if we remove "overflow" */
/* But "overflow" prevents dropdown extending below parent */
/* "scroll" is an option for "overflow" */
/* Initially hidden with display:none. */
/* Using visibility:hidden results in problems. */
/* Padding by 4px prevents losing resize grip */
/* For this tool, don't use "fit-content" */
.valzoom {
  border: 1px solid black;  border-radius:4px;
  vertical-align:top;
  margin: 0px; padding: 4px;
  resize: both; 
  overflow: auto;
  width:300px; height:210px;  /* initial size; orig height 180px */
  display:none;
  min-width:200px; min-height:180px;  /* Extra height for buttons */ 
  /* aspect-ratio: auto; */
  /* width:fit-content; height:fit-content; */ 
  /* min-width:280px; min-height:140px; */  /* Need this */  
  /* visibility:hidden; */
  /* width:2px; height:2px; */
}

/* For displaying a Bokeh DataTable */
/* Set width in TableColumn calls to reach total width. */
.table{
  border: 1px solid black;  border-radius:4px;
  vertical-align:top;
  margin: 0px; padding: 4px;
  resize: both; overflow: auto;
  width:600px; height:400px;  /* initial size */
  display:none;  /* initially hidden */
  min-width:400px; min-height:200px;  /* Extra height for buttons */
  /* aspect-ratio:1;  /* Not needed */
}

/* For DIV that holds lineprof or chanprof */
/* "resize" doesn't work if we remove "overflow" */
/* With "overflow:auto", windows flicker on Safari */
/* but with "overflow:scroll" they don't */
/* Initially hidden with display:none. */
/* Using visibility:hidden results in problems. */
/* Padding by 5px prevents losing resize grip */
/* For these tools, don't use "fit-content" */
/* width=300 matches valzoom and veczoom */
.profwin {
  border: 1px solid black;  border-radius:4px;
  vertical-align:top;
  margin: 0px; padding: 5px;
  /* resize: both; overflow: auto; */
  resize: both; overflow: scroll;
  width:300px; height:185px;  /* initial size */
  display:none;
  min-width:200px; min-height:100px;
  /* width:fit-content; height:fit-content; */ 
  /* min-width:280px; min-height:140px; */  /* Need this */  
  /* visibility:hidden; */
  /* width:2px; height:2px; */
}

/* For dialogs created using Django Crispy Forms */
/* width:265px;  /* So all tabs have same width */
/* height:450px; /* So all tabs have same height */
/* font-size: 11pt;  /* This is 14.667 px from Inspector */
/* font-size: 0.9em; */
/*
.crispy-box{
  display: inline-block;
  min-width:265px;
  margin-left:10px; margin-right:0px;
  margin-top:0px; margin-bottom:0px;
  padding-left:6px;  padding-top:6px;
  padding-right:0px; padding-bottom:8px;
  border: 1px solid black; border-radius:8px;
  font-size: 14px;
  font-family: Arial, Helvetica, sans-serif; 
}
*/

/* Don't set a width or max width or View Text doesn't work. */
/* Check Display > Grid Sequence after editing. */
.crispy-box{
  display: inline-block;  /* need this here */
  /* min-width:265px; max-width:265px; */
  min-width:270px;
  margin:0px;  padding:15px;
  margin-left:10px;  /* distance from edge to border */
  border: 1px solid black; border-radius:8px;
  font-size: 14px;
  /* font-size: 2.2vw; */
  font-family: Arial, Helvetica, sans-serif; 
}

/* For Django Crispy Form tab bodies */
.card-body{
  margin:0px; padding:8px;
  /* margin-right:15px; padding-right:0px; */
}

/* Remove asterisk on required item labels (Crispy) */
.asteriskField {
    display: none;
}

/* Change attributes of the Bootstrap form-control class */
/* This affects various "input-type" widgets */
/* Reduce padding inside the text boxes; change font */
/* For inline forms, use margin-bottom to add vertical space. */
/* For horiz forms, use margin-bottom to remove vertical space. */
/* In forms.py, use "py-0" like this: */
/*    self.helper.label_class = 'col-md-3 py-0' */
/*    self.helper.field_class = 'col-md-9 py-0' */
.form-control{
    display: inline-block;  float:right;
    /* font-size: 2.2vw; */
    font-size: 14px;  /* roughly 11pt */
    font-family: Arial, Helvetica, sans-serif;
    padding-top:2px; padding-bottom:2px;
    /* height:24px; */
    padding-left:6px; padding-right:2px;
    margin:0px; /* margin-bottom:10px; */
}

.form-control.select{
    font-size: 14px;  /* roughly 11pt */
    font-family: Arial, Helvetica, sans-serif;
}

/* Change padding for the Bootstrap form-group class */
/* Use "display:inline-block" on both form-label and */
/* form-control to display inline. */
/* Using "white-space:pre" allows extra space after a label */
/* to be shown (for alignment), but unfortunately also adds */
/* unwanted space on the left from indentation in the HTML. */
.form-label{   /* used for the "label-only" option */
    display:inline-block;
    padding:0px; margin: 0px;
    padding-right:4px;  /* padding after short field like "X:" */
    /* white-space:pre; */
}

/* Width should equal form-label + form-control width */
/* Width 234 allows: "Authalic Sphere (Clarke 1866)" to show */
.form-select{
    /* display:block;  default is: display:flex? */
    /* width:220px; */
    /* font-size: 2.2vw; */
    font-size: 14px;
    font-family: Arial, Helvetica, sans-serif;
    padding-bottom:0px; padding-top:0px;
    /* Next 3 didn't work to add scroll for long dropdowns.  */
    /* size:20!important; */ 
    /* max-height: 240px; overflow-y:scroll!important; */
    /* max-height: 200px; overflow-y: auto;  */
}

/* This is not working
.select{
   -webkit-appearance: menulist-textfield;
   size:20; height:auto;
}
*/

/* Can use this with "wrapper_class" to override "mb-3" */
/* mb-3 = 1rem, mb-2 = 0.5rem, mb-1 = 0.25rem */
/* Need "!important" to override the "mb-3". */
/* Note: overflow:hidden prevents issue with form-control */
/*       so form-control can use margin-bottom. */
.rt5-field-box{
    /* margin-bottom: 0.5rem!important; */
    display:block;
    width:230px;
    /* min-width:220px; */
    overflow:hidden;
    margin-bottom: 10px!important;  /* Could reduce to 8px */
}

/* Used for stretch parameters in Density Plot */
.rt5-thin-field-box{
    display:block;
    width:230px;
    /* min-width:220px; */
    overflow:hidden;
    margin-bottom: 6px!important;  /* a bit thinner */
}

/* Used for Register_User_Form() */
.rt5-left-label{
   display:inline-block;
   /* width:22ch;  Doesn't work as expected */
   width:140px;
   /* height:24px;  line-height:24px; */
   margin:0px;
   padding:0px;
   /* padding-top:0px; padding-bottom:20px; /* to align with text box */
   /* margin-top:0px; margin-bottom:8px;  /* to align with text box */
   /* vertical-align: middle;  /* not helpful */
   /* vertical-align: top;  /* better */
   /* vertical-align: 80%;  /* no good */
   vertical-align: 35%;
   font-size: 16px;
   font-family: Arial, Helvetica, sans-serif;
}
.rt5-left-label-text{
   display:inline-block;
   width:300px;
   /* height: 30px; */
   /* width:34ch; */
   margin:0;  padding:0px;
   /* margin-top:0px; margin-bottom:0px; */
   font-size: 16px;
   font-family: Arial, Helvetica, sans-serif;
}
/* Used for Register_User_Form() together with */
/*    self.helper.form_class = 'form-horizontal' */
.rt5-wide-field-box{
    /* margin-bottom: 0.5rem!important; */
    display:block;
    width:500px;
    /* min-width:220px; */
    overflow:hidden;
    margin-left: 0px;
    /* margin-top:4px;  margin-top:4px; */
    margin-bottom: 4px!important;  /* Could reduce to 8px */
}

/* NOTE: If "float" is used, display:block doesn't work. */
/* For some reason, margin-bottom isn't working here, */
/* but padding-bottom works with double size. */
/* width:28ch works well for Export Vector > Boundaries. */
.rt5-wide-text-box{
    display:block;
    width:230px;  /* Should match value in rt5-field-box? */
    overflow:hidden;  /* can cause or fix problems */
    /* min-width:220px; */
    /* width:28ch; */
    /* padding-bottom:20px!important; */
    margin-bottom: 10px!important;
    /* float:left; */
}
.rt5-wide-text-box0{
    width:30ch;
    float:left;
    margin-bottom: 10px!important;
}

/* Now used for list of checkboxes in Export RTV */
/* max-height:200px shows 8, 175px shows 7. */
.rt5-scroll-box{
    /* margin-bottom: 0.5rem!important; */
    display:block;
    min-width:220px;
    margin-bottom: 10px!important;
    overflow-y:scroll; max-height:155px;
    border-top: 1px solid lightgray;
    border-bottom: 1px solid lightgray;
}

/* Use for 2 items side-by-side */
.rt5-tall-short-field-box{
    display:block;
    min-width:220px;
    height:56px;
    max-width:265px;
    /* margin-bottom:0px; */
    margin: 0px!important;
}
.rt5-short-field-box{
    display:block;
    min-width:220px;
    height:30px;
    max-width:265px;
    /* margin-bottom:0px; */
    margin: 0px!important;
}
.rt5-short-field{
    display:inline-block;
    min-width:100px;
    margin:0px;
}
.rt5-tiny-field{
    display:inline-block;
    min-width:30px;
    margin:0px;
}

/* Used for Extract > Outlet */
/*  -webkit-appearance: none;  /* Override default CSS styles */
/*  appearance: none; */
/*  width: 100%; /* Full-width */ 
.rt5-slider{
  width: 230px;
  height: 25px; /* Specified height */
  /* background: #d3d3d3; /* Grey background */
  outline: none; /* Remove outline */
  opacity: 0.7; /* Set transparency (for mouse-over effects on hover) */
  -webkit-transition: .2s; /* 0.2 seconds transition on hover */
  transition: opacity .2s;
}

.rt5-divider{
   border-bottom: 1px solid lightgray;
   margin-top:12px; margin-bottom:10px;
}
/* Used for Set Preferences, etc. */
.rt5-divider-blue{
   border-bottom: 2px solid dodgerblue;
   margin-top:15px; margin-bottom:15px;
}
.rt5-divider-blue-thin{
   border-bottom: 2px solid dodgerblue;
   margin-top:8px; margin-bottom:8px;
}

/* Fixes alignment in Prepare > Convert Grid */
.rt5-field-group{
  padding:0px;  padding-left:8px;
}
/*
.rt5-field-group{
   border-bottom: 1px solid lightgray;
   padding-left:6px;  padding-top:6px;
   padding-right:0px; padding-bottom:4px;
   margin-bottom:4px; margin-right:10px;
   margin-left:0px;
}
*/

/* See shape_plot dialog. */
.rt5-field-group-no-border{
   /* padding-left:6px;  padding-top:6px; */
   padding-left:0px;  padding-top:6px;
   padding-right:0px; padding-bottom:4px;
   margin-bottom:2px;
   margin-left:0px; margin-right:0px;
}

/* For label without inputs in forms */
/* See code for the Django widgets in views_*.py */
.rt5-label-only-field{   /* for TextInput box, not label */
  visibility:hidden; width:0ch; height:0ch; }
  /* border:0px; /* not needed now */
  /* font-size:11pt;  /* no effect */

/* This is not working yet */
/* The setting for ".plot-dialog p label" may be interfering */
/* .plot-dialog p  */
/* .plot-dialog p label .custom-label{ */
.rt5-label-only-field label{   
  font-size: 14px; color:'blue';
  font-family: Arial, Helvetica, sans-serif; }

/* This was for Projection in View DEM Info */
/* but could not get min-height to work right. */
/* Now min-heigh is set with "style" instead. */
.rt5-one-row-textarea{
    width:30ch; min-height:28px; float:left;
    resize:vertical; margin-bottom:10px; height:1em;
}

.rt5-button{
   /* border: 1px solid dodgerblue; */
   /* border: 3px solid rgb(13,110,253); */
   border: 1px solid #0d6efd;  /* bootstrap text-primary blue */
   color:black;
   border-radius:4px; background-color:white;
   font-size: 14px;
   font-family: Arial, Helvetica, sans-serif;
   padding-top:3px; padding-bottom:3px;
   padding-left:9px; padding-right:9px;
}
/* Remove box shadow outline on clicked Help button */
.rt5-button:focus {
  outline: none;
  box-shadow: none;
}
.rt5-short-button{
   /* border: 1px solid dodgerblue; */
   /* border: 3px solid rgb(13,110,253); */
   border: 1px solid #0d6efd;  /* bootstrap text-primary blue */
   font-size: 14px;
   font-family: Arial, Helvetica, sans-serif;
   padding-top:3px; padding-bottom:3px;
   padding-left:3px; padding-right:3px;
}

.btn-primary{
   /* For the Submit button */
   font-size: 14px;
   font-family: Arial, Helvetica, sans-serif;
   padding-top:3px; padding-bottom:3px;
   padding-left:14px; padding-right:14px;
}

/* -------------------------------------------------------------------- */
/* ADD MORE CLASSES FOR DIALOGS HERE */
 
/* For HTML Help Page */
.help_page{
  border: 1px solid black;
  display: block; width: 600px; margin: 5px;
  vertical-align:top;
}

/* For Register_User_Form text boxes */
/* (still used) */
.user-info{
  width:36ch; font-size: 12pt;
  font-family: Arial, Helvetica, sans-serif;
  /* padding:0px; */
}

/* For Register_User_Form page  */
/* Used in: templates/user/register.html. */
/* Register button also styled in register.html. */
form.register {
  border: 1px solid black;  border-radius:9px;
  /* box-shadow: 5px 5px 5px #bbbbbb; */
  padding:15px; width:330px;
  /* padding:10px; width:470px; */
}
/* For Register_User_Form entries */
form.register p {
   margin-top:6px; margin-bottom:6px;
}
/* For Register_User_Form labels */
form.register p label{
  display:inline-block; width:160px; font-size: 12pt;
  font-family: Arial, Helvetica, sans-serif;
}
/* For Register_User_Form hints */
form.register ul{
  padding-left:24px; font-size: 10pt;
  font-family: Arial, Helvetica, sans-serif;
}
/* For the username & password2 hints in register form */
/* Not used now
.helptext{
  color: blue; font-size:10pt;
}
*/

/* For Login_User_Form, Welcome_User_Form, etc. */
.rt5-centered-box{
  display: flex;
  justify-content: center; /* Centers horizontally */
  margin-top: 60px;
  font-size: 12pt;
  font-family: Arial, Helvetica, sans-serif;
  /* align-items: center;     /* Centers vertically */
  /* height: 100vh;           /* Example: Centers in the full viewport height */
}

.rt5-blue-strip{
    background-color: #164090; 
    width: 100%;               /* Span the full width of container */
    height: 50px;
    padding: 10px;             /* Adds space around content inside the strip */
    margin-bottom: 10px;       /* Adds space below the strip */
    /* Add other styles as needed, such as text color, alignment, etc. */
    color: white;              
    text-align: center;
}

/* Compare to .crispy-box */
.rt5-info-box{
  display: inline-block;  /* need this here */
  min-width:270px;
  margin:0px;
  /* padding:15px; */
  margin-left:62px;  /* distance from edge to border */
  /* border: 1px solid black; border-radius:8px; */
  font-size: 16px;
  /* font-size: 2.2vw; */
  font-family: Arial, Helvetica, sans-serif; 
}

.rt5-register-box{
  display:block;
  /* display: inline-block;  /* not needed here */
  /* min-width:270px; */
  width: 600px;
  margin:0px;
  /* padding:15px; */
  padding:0px;
  margin-left:38px;  /* distance from edge to border */
  /* border: 1px solid black; border-radius:8px; */
  font-size: 16px;
  /* font-size: 2.2vw; */
  font-family: Arial, Helvetica, sans-serif; 
}

#workingModal {
  position: fixed; /* Positions the overlay relative to the browser window */
  top: 260px;
  left: 430px;
  z-index: 1050;   /* Ensures it's on top of other content */
}

/* Experimental */
#workingModal0 {
  position: fixed; /* Positions the overlay relative to the browser window */
  top:  300px;
  left: 450px;
  z-index: 1050; /* Ensures it's on top of other content */
  width: 100%;
  height: 100vh; /* 100% of the viewport height */
  background-color: rgba(255, 255, 255, 0.8); /* Optional: Adds a semi-transparent background */
  display: flex; /* Enables flexbox for centering */
  justify-content: center; /* Centers horizontally */
  align-items: center; /* Centers vertically */
}

form.login {
  border: 1px solid black;  border-radius:8px;
  box-shadow: 5px 5px 5px #bbbbbb;
  padding:10px; width:300px;
}

/* For Login_User_Form labels. */
form.login p label{
  display:inline-block; width:85px;
  font-size: 14px;
  font-family: Arial, Helvetica, sans-serif;
  boder
}

/* For Upload_File_Form  */
form.upload{
  width:265px;
  border: 1px solid black; border-radius:8px;
  box-shadow: 5px 5px 5px #bbbbbb;
  padding:10px;  margin-left:10px;
}
  
/* For Upload_File_Form labels */
form.upload p label{
  display:inline-block; /* width:120px; */
  font-size: 14px;
  font-family: Arial, Helvetica, sans-serif;
}

/* For Open Dataset */
/* Should match info for "crispy-box". */
/* margin: 0 auto;  /* for horizontal centering */
form.open-dataset {
  width:265px;
  /* min-width:265px; */
  border: 1px solid black;  border-radius:8px;
  box-shadow: 5px 5px 5px #bbbbbb;
  padding:10px; margin-left:10px;
}

/* For Open Dataset labels. */
form.open-dataset p{
  /* width:200px;  */
  display:inline-block; font-size: 16px;
  font-family: Arial, Helvetica, sans-serif;
  margin-bottom:3px; margin-left:5px; 
}

/* For Open_Dataset file list */
/* Must set position to use z-index */
/* Set height + overflow-y:scroll to add scrollbar */
/* position: relative;  /* not needed for scroll */
form.open-dataset div {
  display: block;
  border: 1px solid black;
  background-color: #f8f8f8;
  height:240px; overflow-y:scroll;
}

/* For Open Dataset links in file list */
/* padding = [top, right, bottom, left] */
form.open-dataset div a {
  /* float: none; */
  display: block;
  color: black;  text-decoration: none;
  text-align: left; font-size: 15px;
  font-family: Arial, Helvetica, sans-serif;
  padding-left:6px; padding-right:6px;
  padding-bottom:0px; padding-top:3px;
  /* padding-bottom:4px; padding-top:6px; */
  /* padding: 6px 12px 6px 12px; */  
}

/* For Open Dataset links in file list on hover */
form.open-dataset div a:hover {
  /* background-color: #ddd; */
  background-color: #95cdfa; }

/* Used for "Success" message with File > Upload File */
form.message {
  display:inline-block;
  border: 1px solid black;  border-radius:8px;
  /* box-shadow: 5px 5px 5px #bbbbbb; */
  padding:20px; width:300px;
  /* margin: 0px auto;  /* for horizontal centering */
  resize: none;
  /* resize: both; overflow: scroll; */
  font-size: 12pt;
  font-family: Arial, Helvetica, sans-serif; 
}

form.message p{
font-size: 12pt;
font-family: Arial, Helvetica, sans-serif; 
}