/* ------------------------------- */

body {
    height:100%;
    max-width: 97%;
    margin: 20px;
}

/* ------------------------------- */

/*

NOTE: I'M removing all the geometry, position, and resizing from 
main.js, breaking it to force the change, to get a mess, and then 
slowly correct it here in the CSS.

*/

#common_page {
    width:100%;
    height:auto;
    display:grid;
    background-color: rgb(236, 236, 236);
    grid-template-areas:
	'c_name c_name c_name c_name'
	'c_desc c_desc c_desc c_desc'
	'c_left c_second_column n_map_div c_criteria';
    grid-gap: 20px;
    grid-template-columns: 20% 25% 38% 12%;
    /*grid-template-rows: 10% 5% 50% 25%;
    grid-auto-columns: min-content;
    padding:25px;*/
    border:1px solid green;
    padding:5px;
    margin: 0px 0px 0px 0px;
}

/* ------------------------------- */

#c_name {
    grid-area: c_name;
    /*width: 100%;*/

    color:black;
    font-family:Courier;
    font-weight:bold;
    font-size:60px;
    margin-top:25px;
}

#c_desc {
    grid-area: c_desc;
    /* width: 100%; */
    color:black;
    font-family:Courier;
    font-weight:bold;
    font-size:20px;
    margin-left:5px;
}

/* ------------------------------- */

#c_left {
    
    grid-area: c_left;
    /*
    max-width: 50%;
    width:15.625%;
    height: auto;
*/
}

/* ------------------------------- */

#c_second_column {
    grid-area: c_second_column;
    /* width: 23%;*/

}

/* ------------------------------- */

#c_list {
    /*left:17%;
    //top:100px;
    //width:21%;
    //height:auto;
    //position:absolute;*/
    color:black;
    font-family:Courier;
    font-weight:bold;
    font-size:18px;
}

/* ------------------------------- */

#c_instructions {
    color:black;
    font-family:Courier;
    font-weight:bold;
    font-size:18px;

    /*left:19%;
    //top:110px;
    //width:17%;
    //height:100%;
    //position:absolute;*/
}

/* ------------------------------- */

#n_map_div {
    grid-area: n_map_div;
    height: 400px;
    width: 500px;

}

/* ------------------------------- */

#whole {
    height:100%;
    width:100%;
}

/* ------------------------------- */

#c_criteria {
    grid-area: c_criteria;
    /*width: 30%;*/
    
    background-color:black;
    color:white;
    font-family:Courier;
    font-weight:bold;
    font-size:15px;
    /*left:79%;
    //top:108px;
    //width:15.625%;
    //height:auto;
    //position:absolute;*/
    border:1px solid green;
    padding:5px;
    margin:0px 0px 0px 0px;
}

/* ------------------------------- */

.c_button {
  background-color: black;
  color:white;
  border:1px solid black;
  border-radius: 3px;
}

.c_button:hover {
  background-color: white;
  color: black;
  cursor:pointer;
}

.c_b_buttons {
    color:red;
    font-family:Courier;
    font-weight:bold;
    font-size:20px;
}

/* ------------------------------- */


/* ------------------------------- */


/* ------------------------------- */


/* ------------------------------- */

#c_sv_form_a_text_a {
    color:black;
    font-family:Courier;
    font-weight:bold;
    font-size:17px;
    margin:10px 0px 10px 0px;
}

#c_sv_form_a_button {
    font-family:Courier;
    font-weight:bold;
    font-size:20px;
    width:90px;
    height:25px;
    margin:10px 10px 10px 0px;
    padding:5px;
}

/* ------------------------------- */

.label_thumb {
	background-color:black;
	color:white;
    border: 1px solid rgb(81, 163, 76); 
    padding: 10px; 
    margin: 10px;
}

.label_thumb:hover {
    background-color:gray;
    color:white;
    cursor:pointer;
}

/* ------------------------------- */

/*
.project_thumb {
    position: relative;            //NEW: anchor abs children 
    background-color: white;
    color: black;
    width: 90%;
    border: 1px solid rgb(170,170,170);
    padding: 10px;
    margin: 0 10px 10px;
  }
  
  .project_thumb_image {
    display: block;
    width: 100%;
    height: auto;
  }
  
  // Make the canvas cover the same padded area as the image 
  .project_thumb_canvas {
    position: absolute;
    //inset by the same padding so it lines up with the image 
    top: 10px; left: 10px; right: 10px; bottom: 10px;  // <-- match .project_thumb padding 
    width: auto; height: auto;  // size is controlled by the inset 
    pointer-events: none;
    z-index: 2;
  }



.project_thumb_canvas {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
}

// ------------------------------- 
*/
 
.project_thumb {
    background-color:white;
    color:black;
    width:90%;
    border: 1px solid rgb(170, 170, 170); 
    padding: 10px; 
    margin: 0px 10px 10px;
}

.project_thumb:hover {
    background-color: black;
    color:white;
    cursor:pointer;
}

/* Base */
.project_thumb {
    position: relative;           /* anchor abs children */
    background: white;
    color: black;
    width: 90%;
    border: 1px solid rgb(170,170,170);
    padding: 10px;
    margin: 0 10px 10px;
    box-sizing: border-box;       /* so border doesn't change outer width */
  }
  
  /* Common children */
  .project_thumb_image { display:block; width:100%; height:auto; }
  .project_thumb_canvas {
    position:absolute; inset:0; width:100%; height:100%;
    pointer-events:none; z-index:2;
  }
  
  /* --- States (modifier classes) --- */
  
  /* Expanded (your “project_thumb expand”) */
  .project_thumb--expanded {
    position: absolute;   /* matches your inline rule */
    width: 50%;
    border: 20px solid black;
    z-index: 5;
  }
  .project_thumb--expanded .project_thumb_image {
    position: relative;   /* as per your inline rules */
    z-index: 2;
    border: 0;
  }
  
  /* Shrunk (your “project_thumb shrink”) */
  .project_thumb--shrink {
    position: relative;
    width: 90%;
    border: 0;            /* you were clearing the border */
    z-index: 2;
  }
  .project_thumb--shrink .project_thumb_image {
    position: relative;
    z-index: 2;
    border: 0;
  }
  
  /* Optional bouncy nicety 
  .project_thumb, .project_thumb_image { transition: all .2s ease; }
  */

/* ------------------------------- */

/*
.playbackButton {
    position: relative;
    top: 7vh;
    left: 2vw;
    z-index: 4;
  }
*/

  .playbackButton {
    position: absolute;   /* keep it pinned on top of everything */
    top: 12px; left: 12px;
    z-index: 3;
  }

/* ------------------------------- */

.project_thumb_description {
    font-size: 14px;
}

/* ------------------------------- */

.project_new {
    background-color:white;
    color:black;
    width:90%;
    border: 0px solid rgb(170, 170, 170); 
    padding: 10px; 
    margin: 0px 10px 10px;
}

.project_new:hover {
    background-color: black;
    color:white;
    cursor:pointer;
}

/* ------------------------------- */

.project_thumb_link {
    text-decoration: none;
}

.label_thumb_link {
    text-decoration: none;
}

/* ------------------------------- */

#project_list {
    color:black;
    font-family:Courier;
    font-weight:bold;
    font-size:20px;
    width:99%;
}

/* ------------------------------- */

#name_box {
    color:black;
    font-family:Courier;
    font-weight:bold;
    font-size:20px;
    right: 300px;
    top: 20px;
    width: 140px;
    height: 20px;
    position: absolute;
    z-index: 4;
}

#name_box:hover {
    color:darkorange;
    cursor:pointer;
}

/* ------------------------------- */

#sign_in_box {
    color:black;
    font-family:Courier;
    font-weight:normal;
    font-size:20px;
    right:10px;
    top: 10px;
    width: 380px;
    height: 30px;
    position: absolute;
}

#sign_in {
    z-index: 100;
    float: right;
    position: relative;
    margin: 10px 10px 0px 0px;
}

/* ------------------------------- */

#si_links {
    color:black;
    font-family:Courier;
    font-weight:bold;
    font-size:20px;
}

/* ------------------------------- */

.controls {
    margin-top:6px;
    border:1px solid transparent;    
    border-radius:2px 0 0 2px;    
    box-sizing:border-box;    
    -moz-box-sizing:border-box;    
    height:20px;
    width:270px;
    outline:none;    
    box-shadow:0 2px 6px rgba(0, 0, 0, 0.3);
    display:block;
}

/* ------------------------------- */
/* project form                    */

#p_form {
    background-color:orange;
    padding:10px 15px 10px 10px;
    /*
    left:0px;
    top:0px;
    width:100%;
    height:100%;
    position:absolute;
*/
}

#pf_instructions {
    color:black;
    font-family:Courier;
    font-weight:bold;
    font-size:18px;
}

#pf_name {
    color:black;
    font-family:Courier;
    font-weight:bold;
    font-size:20px;
    width:100%;
    margin:10px 0px 0px 0px;
}

#pf_create {
    width:90px;
    height:25px;
    margin:10px 10px 10px 0px;
    font-family:courier;
    font-size:20px;
    padding: 5px;
}

#pf_cancel {
    width:60px;
    height:15px;
    font-family:Courier;
    font-weight:bold;
    font-size:12px;
    margin:10px 10px 10px 0px;
    padding:5px;
}

/* ------------------------------- */
/* ------------------------------- */
/* new neighborhood form                    */

#n_form {
    background-color:lightblue;
    padding:10px 15px 10px 10px;
    /*
    left:0px;
    top:0px;
    width:100%;
    height:100%;
    position:absolute;
*/
}

#nf_instructions {
    color:black;
    font-family:Courier;
    font-weight:bold;
    font-size:18px;
}

#nf_name {
    color:black;
    font-family:Courier;
    font-weight:bold;
    font-size:20px;
    width:100%;
    margin:10px 0px 0px 0px;
}

#nf_subtitle {
    color:black;
    font-family:Courier;
    font-weight:bold;
    font-size:20px;
    width:100%;
    margin:10px 0px 0px 0px;
}

#nf_create {
    width:90px;
    height:25px;
    margin:10px 10px 10px 0px;
    font-family:courier;
    font-size:20px;
    padding: 5px;
}

#nf_cancel {
    width:60px;
    height:15px;
    font-family:Courier;
    font-weight:bold;
    font-size:12px;
    margin:10px 10px 10px 0px;
    padding:5px;
}

/* ------------------------------- */
/* ------------------------------- */
/* new initiative form                    */

#i_form {
    background-color:pink;
    padding:10px 15px 10px 10px;
    /*
    left:0px;
    top:0px;
    width:100%;
    height:100%;
    position:absolute;
*/
}

#if_instructions {
    color:black;
    font-family:Courier;
    font-weight:bold;
    font-size:18px;
}

#if_name {
    color:black;
    font-family:Courier;
    font-weight:bold;
    font-size:20px;
    width:100%;
    margin:10px 0px 0px 0px;
}

#if_subtitle {
    color:black;
    font-family:Courier;
    font-weight:bold;
    font-size:20px;
    width:100%;
    margin:10px 0px 0px 0px;
}

#if_create {
    width:90px;
    height:25px;
    margin:10px 10px 10px 0px;
    font-family:courier;
    font-size:20px;
    padding: 5px;
}

#if_cancel {
    width:60px;
    height:15px;
    font-family:Courier;
    font-weight:bold;
    font-size:12px;
    margin:10px 10px 10px 0px;
    padding:5px;
}

/* ------------------------------- */

/* ------------------------------- */
/* new city form                    */

#c_form {
    background-color:tan;
    padding:10px 15px 10px 10px;
    /*
    left:0px;
    top:0px;
    width:100%;
    height:100%;
    position:absolute;
*/
}

#cf_instructions {
    color:black;
    font-family:Courier;
    font-weight:bold;
    font-size:18px;
}

#cf_name {
    color:black;
    font-family:Courier;
    font-weight:bold;
    font-size:20px;
    width:100%;
    margin:10px 0px 0px 0px;
}

#cf_subtitle {
    color:black;
    font-family:Courier;
    font-weight:bold;
    font-size:20px;
    width:100%;
    margin:10px 0px 0px 0px;
}

#cf_create {
    width:90px;
    height:25px;
    margin:10px 10px 10px 0px;
    font-family:courier;
    font-size:20px;
    padding: 5px;
}

#cf_cancel {
    width:60px;
    height:15px;
    font-family:Courier;
    font-weight:bold;
    font-size:12px;
    margin:10px 10px 10px 0px;
    padding:5px;
}

/* ------------------------------- */

#header a{
 text-decoration: none;
 color: #3b5998;
}

#header a:hover{
 text-decoration: underline; 
 cursor:pointer;
}

/* -------------------------------- */
/* vision */

#vision_textarea {
    color:black;
    width:100%;
}

#v_edit {
    float:right;      
    width:35px;
    margin:10px;
    padding:5px;
    font-family:Courier;
    font-weight:normal;
    font-size:14px;
}

#vs_save {
    width:90px;
    height:25px;
    margin:10px 10px 10px 0px;
    padding:5px;
}

#vs_cancel {
    width:70px;
    height:25px;
    margin:10px 10px 10px 0px;
    padding:5px;
}

/* -------------------------------- */

.instruction_step_choice_button {
  border: 2px black solid;
  display: inline-block; 
  cursor:pointer; 
  text-align:center;  
  background-color: white; 
  color:black;
  width: 150px;
  margin: 4px;
  padding: 1px;
} 
.instruction_step_choice_button:hover {
  border: 2px #8bb7cf solid;
  display: inline-block; 
  cursor:pointer; 
  text-align:center;  
  background-color: white; 
  color:black;
  width: 150px;
  margin: 4px;
  padding: 1px;
}

/* -------------------------------- */
/* YS - your status                      */

#ys_save {
    font-family:Courier;
    font-weight:bold;
    font-size:22px;
    width:60px;
    height:25px;
    margin:10px 10px 10px 0px;
    padding:5px;
}

#ys_cancel {
    font-family:Courier;
    font-weight:bold;
    font-size:16px;
    width:60px;
    height:20px;
    margin:10px 10px 10px 0px;
    padding:5px;
}

/* -------------------------------- */
/* -------------------------------- */
/* -------------------------------- */
/* -------------------------------- */
/* -------------------------------- */
/* -------------------------------- */

#desc_job {
    color:black;
    width:100%;
    margin:10px 0px 0px 0px;
}

#desc_save {
    width:90px;
    height:25px;
    margin:10px 10px 10px 0px;
    padding:5px;
}

#desc_cancel {
    width:70px;
    height:25px;
    margin:10px 10px 10px 0px;
    padding:5px;
}

/* -------------------------------- */

.superlist {
  display: grid;
  grid: 100px / 2fr 1fr 3fr;
  grid-gap: 10px;
  /*background-color: #2196F3;*/
  padding: 10px;
}

.please_sign_in {
    color:black;
    font-family:Courier;
    font-weight:bold;
    font-size:20px;
}

#list_text {
    margin:0px 35px 0px 35px;
    position:relative;
}

/*
i see you are avoiding specific objects
but you need to start classifying things
config 'feature' -> central_handler 'feature' -> make 'feature' is what you want
							 
NOW: 
add 
geom_id, 
boundary_id, etc. then attach to an object?

*/

/* ---------------------------------- */
/*
#sketchpad {

}
*/
/* --------------- */

#sketchboard {
    position:relative;
    width:60%;
    left:25%;
    top:5%;
}

#sketch_photo {
    /*
    position: absolute;
    top: 60px;
    left: 0px;
   */
    position:absolute;
    z-index: 3;
}
#sketch_canvas {
    /*
    position: absolute;
    top: 60px;
    left: 0px;
*/
    position:absolute;
    z-index: 4;
    cursor: pointer;

}
#sketch_width {
    position: relative;
    top: 490px;
    left: 200px;
    height: 30px;
    
}
#sketch_clear {
    position: absolute;
    top: 480px;
    left: 0px;
    width: 120px;
    margin: 10px;
    padding: 5px;
    font-family: Courier;
}
#sketch_color {
    position: relative;
    top: 510px;
    left: 100px;
    height: 30px;
}
#erase_button {
    position:absolute;
    top:543px;
    left:220px;
    padding:5px;
    font-family:courier;
}

/* --------------- */

#sequence_preamble {
    text-align: center;
    position: absolute;
    top: 90px;
    left: 90px;
    width: 150px;
    font-family: Courier;

}
#sketch_sequence {
    width: 100px;
    margin: 10px;
    padding: 10px;
}

#sketch_plain {
    width: 100px;
    margin: 10px;
    padding: 10px;
}

/* --------------- */

#sketch_form {
    position: absolute;
    top: 15%;
    left: 70%;
    width: 200px;
    height: 400px;
    background-color: beige;
    padding: 20px;
}
#sketch_textarea {
    color: black;
    width: 90%;
}
#sketch_cancel {
    position: relative;
    top: 10px;
    left: 0px;
    width: 55px;
    margin: 10px;
    padding: 10px;
    font-family: Courier;
}
#sketch_save {
    position: relative;
    top: 50px;
    left: 0px;
    width: 70px;
    margin: 10px;
    padding: 10px;
    font-family: Courier;
}
/* ---------------------------------- */

#user_dashboard {
    position: absolute;
    left: 0px;
    top: 0px;
    width: 100%;
    height: 100%;
    z-index: 5;
    background-color: lime;
    display: none;

}

/* ---------------------------------- */

#gm_splash {
    background-color:black;
}

#gm_splash_img {
    z-index: 3;
    width: 100vw;
    height: 100vh;
    position: absolute;
    top: 0px;
    left: 0px;
}

#gm_large_envelope {
    position: absolute;
    top: 0px;
    left: 0px;
    width: 100%;
    height: 100%;
    /*background-color: rgb(85, 183, 208);*/
    background-color:black;
    z-index: 3;
}

#gm_envelope {
    margin-left:auto;
    margin-right:auto;
    width: 79vw;
    height: 56vh;
}

#gm_top_bar {
    width:79vw;
    height:1.5vh;
    background-color:#f52d34;
}

#gm_top_row {
    width:79vw;
    height:12vw;
    display:flex;
}

#gm_border1 {
    width:1vw;
    height:auto;
    background-color:#68a1ff;
    color:#ff0000;
    display:inline-block;
}

#gm_window1 {
    width:24vw;
    height:auto;
    background-color:#15b277;
    color:#edf88e;
    font-size:24px;
    font-style:italic;
    display:inline-block;
}

#gm_border2 {
    width:1vw;
    height:auto;
    background-color:#2574bf;
    color:#ff0000;
    display:inline-block;
}

#gm_window2 {
    width:12vw;
    height:auto;
    background-color:#ecec5a;
    color:#ff0000;
    display:inline-block;
}

#gm_border3 {
    width:1vw;
    height:auto;
    background-color:#8860c0;
    color:#ff0000;
    display:inline-block;
}

#gm_window3 {
    width:12vw;
    height:auto;
    background-color:#c81038;
    color:#ff0000;
    display:inline-block;
}

#gm_border4 {
    width:1vw;
    height:auto;
    background-color:#daab02;
    background-color:#fcee59;
    color:#ff0000;
    display:inline-block;
}

#gm_window4 {
    width:12vw;
    height:auto;
    background-color:#68a1ff;
    color:#ff0000;
    display:inline-block;
}

#gm_bar5 {
    width:1vw;
    height:auto;
    background-color:#ff106f;
    color:#ff0000;
    display:inline-block;
}

#gm_window5 {
    width:12vw;
    height:auto;
    background-color:#2574bf;
    color:#fe246e;
    font-size:80px;
    font-weight:bold;
    font-family:sans-serif;
    text-align:center;
    display:inline-block;
}

#gm_window5_content {
    margin-top:20%;
}
    
#gm_bar5r {
    width:1vw;
    height:auto;
    background-color:#4124fc;
    background-color:#fcee59;
    color:#ff0000;
    display:inline-block;
}

#gm_bar5rr {
    width:1vw;
    height:auto;
    background-color:#68a1ff;
    color:#ff0000;
    display:inline-block;
}

#gm_middle_row {
    width:79vw;
    height:54vh;
    display:flex;
}

#gm_bar6 {
    width:1vw;
    height:auto;
    background-color:#eabf11;
    color:#ff0000;
    display:inline-block;
}

#gm_window6 {
    width:17.5vw;
    height:auto;
    background-color:#ff91c9;
    color:#ff0000;
    display:inline-block;
    overflow:auto;
}

#gm_bar6r {
    width:1vw;
    height:auto;
    background-color:#eabf11;
    color:#ff0000;
    display:inline-block;
}

#gm_work_canvas {
    width:45vw;
    height:auto;
    background-color:#68a1ff;
    color:#ff0000;
    display:inline-block;
}

#gm_middle_right_column {
    width:14.5vw;
    height:auto;
    display:inline-block;
}

#gm_bar7 {
    width:14.5vw;
    height:2%;
    background-color:#ff10d3;
    color:#ff0000;
    display:block;
}

#gm_window7 {
    width:14.5vw;
    height:48%;
    background-color:#9eee35;
    color:#ff0000;
    display:block;
}

#gm_bar8 {
    width:14.5vw;
    height:2%;
    background-color:#ff10d2;
    color:#ff0000;
    display:block;
}

#gm_window8 {
    width:14.5vw;
    height:48%;
    background-color:#3316ee;
    color:#ff0000;
    display:block;
}

#gm_bottom {
    width:79vw;
    height:24vh;
    display:flex;
}

#gm_bar9 {
    width:0.5vw;
    height:auto;
    background-color:#d4cc12;
    color:#ff0000;
    display:inline-block;
}

#gm_mid_column {
    width:78vw;
    height:15vh;
    display:inline-block;
}

#gm_window9 {
    width:78vw;
    height:8vh;
    background-color:#9eee17;
    color:#ff0000;
    display:block;
}

#gm_window10 {
    width:78vw;
    height:15vh;
    background-color:#000000;
    color:#ff0000;
    display:block;
}

#gm_bar9r {
    width:0.5vw;
    height:auto;
    background-color:#d4cc12;
    color:#ff0000;
    display:inline-block;
}

#gm_cancel {
    position:relative;      
    top:10px;
    left:60px;      
    width:55px;
    margin:10px;
    padding:10px;
    font-family:Courier;

}

#gm_save {
    position:relative;      
    top:10px;
    left:60px;      
    width:70px;
    margin:10px;
    padding:10px;
    font-family:Courier;

}

#gm_start {
    position:relative;      
    top:10px;
    left:60px;      
    width:55px;
    margin:10px;
    padding:10px;
    font-family:Courier;

}

.u_dash_big{
    font-size:50px;
}


/* ---------------------------------- */

/*
.image-container {
    position: relative; // To position the button absolutely within this container 
    display: inline-block; // Or use whatever display suits your layout 
  }
*/  

  /* The button itself */
  .play-button {
    position: absolute;
    top: 8px;
    right: 8px;
    
    /* Size of the button */
    width: 24px;
    height: 24px;
  
    /* Basic styling */
    background-color: #333; 
    border: none;
    border-radius: 4px; /* optional rounded corners */
    cursor: pointer;
    outline: none; /* remove outline if desired */
    padding: 0; /* remove default button padding */
  }
  
  /* Create the 'play' triangle arrow using CSS borders */
  .play-button::after {
    content: "";
    position: absolute;
    
    /* Position the triangle inside the square button */
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
  
    /* Dimensions of the triangle */
    width: 0;
    height: 0;
    border-top: 6px solid transparent;
    border-bottom: 6px solid transparent;
    border-left: 8px solid #fff;
  }
  
  /* Hover (rollover) effect */
  .play-button:hover {
    background-color: #555; /* change color on hover */
  }
  
  .play-button:hover::after {
    border-left-color: #ddd; /* change arrow color on hover */
  }

  /* ---------------------------------- */