/* grid css */
/*#main_grid {
  opacity: 1.0;              *//* CSS3 *//*
  -moz-opacity: 1.0;         *//* Older versions of Firefox *//*
  -khtml-opacity: 1.0;       *//* Older versions of Safari *//*
  filter: alpha(opacity=100); *//* Internet Explorer *//*
}*/

.header { grid-area: header; }
.grid_form { grid-area: grid_form; }
.grid_canvas { grid-area: grid_canvas; }
.footer { grid-area: footer; }
.hide_buttons { grid-area: hide_buttons; }
.design_background { grid-area: design_background; }
.design_figure { grid-area: design_figure; }
.design_type { grid-area: design_type; }
.design_finished { grid-area: design_finished; }
.design_examples {grid-area: design_examples; }
.example_background {grid_area: example_background; }
.example_figure {grid_area: example_figure; }
.example_add {grid_area: example_add; }
.example_buttons {grid-area: example_buttons; }
.settings { grid-area: settings; }
.create_settings {grid-area: create_settings; }
.create_item {grid-area: create_item; }
.create_add {grid-area: create_add; }
.navhome {grid-area: navhome; justify-self: left; }

.navmenu {grid-area: navmenu; justify-self: left;}
.navicon {grid-area: navicon; justify-self: right;}
.navtoggle {grid-area: navtoggle; justify-self: left;}
.navdrop {grid-area: navdrop; justify-self: left;}

.navlogin {grid-area: navlogin; justify-self: end; }
.navdesign {grid-area: navdesign; justify-self: left; }
.navgallery {grid-area: navgallery; justify-self: left; }
.navblogs {grid-area: navblogs; justify-self: left; }
.navhelp {grid-area: navhelp; justify-self: left; }
.menu_grid {grid-area: menu_grid; }
.grid_empty {grid-area: grid_empty; }
.grid_search {grid-area: grid_search; justify-self: left; }
.grid_search_text {grid-area: grid_search_text; justify-self: left; }
.grid_category {grid-area: grid_category; }
.grid_type {grid-area: grid_type; }
.grid_filter_text {grid-area: grid_filter_text; }
.grid_form_sienna {grid-area: grid_form_sienna; }

.grid_bg_form { grid-area: grid_bg_form; }
.grid_bg_color { grid-area: grid_bg_color; }
.grid_bg_options { grid-area: grid_bg_options; }
.div_bg_color { grid_area: div_bg_color; }
.div_bg_image { grid_area: div_bg_image; }


.grid_figure {grid-area: grid_figure; }

.grid_choose_category_figure {grid-area: grid_choose_category_figure; }
.div_category {grid-area: div_category; }
.div_figure_c {grid-area: div_figure_c; }

.grid_choose_figure {grid-area: grid_choose_figure; }
.div_figure_text {grid-area: div_figure_text; }
.div_figure {grid-area: div_figure; }

.grid_figure_options {grid-area: grid_figure_options; }
.your_item { grid-area: your_item; }
.grid_figure_main_options { grid-area: grid_figure_main_options; }
.div_figure_specials { grid-area: div_figure_specials; }

.grid_figure_extra_options { grid-area: grid_figure_extra_options; }

.div_figure_color { grid-area: div_figure_color; }
.div_color_text { grid-area: div_color_text; }
.div_color_input { grid-area: div_color_input; }
.div_color_option { grid-area: div_color_option; }
.div_color_value { grid-area: div_color_value; }
.item_color_min { grid-area: item_color_min; }
.color_stripe { grid-area: color_stripe; }
.item_color_max { grid-area: item_color_max; }

.div_figure_size { grid-area: div_figure_size; }
.div_size_text { grid-area: div_size_text; }
.div_size_input { grid-area: div_size_input; }
.div_size_option { grid-area: div_size_option; }
.div_size_value { grid-area: div_size_value; }
.minimum_size_item { grid-area: minimum_size_item; }
.size-stripe { grid-area: size-stripe; }
.maximum_size_item { grid-area: maximum_size_item; }

.div_figure_more { grid-area: div_figure_more; }
.div_figure_more_color { grid-area: div_figure_more_color; }
.div_figure_more_shape { grid-area: div_figure_more_shape; }

.grid_add_form { grid-area: grid_add_form; }
.div_add_options { grid-area: div_add_options; }
.div_add_options_pattern { grid-area: div_add_options_pattern; }
.div_add_options_fractal { grid-area: div_add_options_fractal; }
.div_add_extras { grid-area: div_add_extras; }


.grid_add_extra_pattern { grid-area: grid_add_extra_pattern; }
.grid_add_extra_fractal { grid-area: grid_add_extra_fractal; }
.div_add_extras_items { grid-area: div_add_extras_items; }
.div_add_extra_fractal_options { grid-area: div_add_extra_fractal_options; }
.div_add_extra { grid-area: div_add_extra; }
.grid_start_position { grid-area: grid_start_position; }
.div_start_pos_text { grid-area: div_start_pos_text; }
.div_start_pos_hor { grid-area: div_start_pos_hor; }
.div_start_pos_vert { grid-area: div_start_pos_vert; }
.div_add_extras_items_text { grid-area: div_add_extras_items_text; }

.div_color_option { grid-area: div_color_option; }
.div_add_iterations { grid-area: div_add_iterations; }
.div_add_rotation_iteration { grid-area: div_add_rotation_iteration; }

.div_color_html { grid-area: div_color_html; }
.div_shape_html { grid-area: div_color_html; }

.grid_generate { grid-area: grid_generate; }
.div_generate_input { grid-area: div_generate_input; }
.div_generate_canvas {grid-area: div_generate_canvas; }
.div_generate_icons {grid-area: div_generate_icons; }

.grid_generate{
    display: grid;
    grid-template-areas: "div_generate_input div_generate_canvas div_generate_canvas div_generate_icons";
    grid-template-columns: repeat(4, 1fr);
    grid-gap: 15px;
    justify-content: space-evenly;
}

.div_color_html, .div_shape_html{
    display: grid;
    grid-template-columns: repeat(1,1fr);
}

.grid_add_extra_pattern{
    display: grid;
    grid-template-areas: "div_add_extras_items grid_start_position";
    grid-template-columns: repeat(2, 1fr);
    justify-content: space-evenly;
}

.grid_add_extra_fractal{
    display: grid;
    grid-template-areas: "div_add_extras_items grid_add_extra_fractal_otpions";
    grid-template-columns: repeat(2, 1fr);
    justify-content: space-evenly;
}

.div_start_pos_text, .div_add_extras_items_text{
    margin-bottom: 10px;
}

.grid_add_form{
    display: grid;
    grid-template-areas: "div_add_options" "div_add_extras";
    grid-template-columns: repeat(1, 1fr);
}

.div_add_options_pattern{
    display: grid;
    grid-template-areas: "div_columns div_rows";
    grid-template-columns: repeat(2, 1fr);
    justify-content: space-evenly;
}

.div_add_options_fractal{
    display: grid;
    grid-template-areas: "div_color_option" "div_add_iterations" "div_add_rotation_iteration";
    grid-template-columns: repeat(1, 1fr);
    justify-content: space-evenly;
}

.div_add_options_figure{
    display: grid;
    grid-template-columns: repeat(2, 1fr);
}

.grid_bg_form{
    display: grid;
    grid-template-areas: "grid_bg_color" "grid_bg_options";
    grid-template-columns: repeat(1,1fr);
}

.grid_bg_color{
    display: grid;
    grid-template-areas:
    "div_bg_color div_bg_image";
    grid-template-columns: repeat(2,1fr);
    grid-gap: 10px;
    justify-content: space-evenly;
}

.grid_figure{
    display: grid;
    grid-template-areas:
    "div_choose"
    "your_item"
    "grid_figure_main_options";
    grid-template-columns: repeat(1, 1fr);
    grid-gap: 10px;
    padding: 15px;
    background-color: rgb(14,64,75);
    border-radius: 5px;
    margin-bottom: 10px;
}

/*.div_choose{
    background-color: rgba(239, 252, 231, 0.2);
}*/

.grid_figure_main_options{
    display: grid;
    grid-template-areas:
        "div_figure_specials"
        "div_figure_options";
    grid-template-columns: repeat(1, 1fr);
    grid-gap: 10px;
    padding: 0px;
    border-radius: 5px;
    justify-content: space-evenly;
}

.div_figure_options{
    display: grid;
    grid-template-areas:
        "div_figure_color div_figure_size";
    grid-template-columns: repeat(2, 1fr);
    grid-gap: 10px;
    /*padding: 15px;*/
}

.grid_choose_category_figure{
    display: grid;
    grid-template-areas:
    "div_category div_figure";
    grid-template-columns: repeat(2, 1fr);
    grid-gap: 10px;
    padding: 15px;
    justify-content: space-evenly;
    border-radius: 5px;
}

.grid_choose_figure{
    display: grid;
    grid-template-areas:
    "div_figure_text div_figure";
    grid-template-columns: repeat(2, 1fr);
    grid-gap: 10px;
    background-color: rgba(239, 252, 231, 0.2);
    padding: 15px;
    border-radius: 5px;
}

.div_figure_color{
    display: grid;
    grid-template-areas:
    "div_color_text div_color_input";
    grid-template-columns: repeat(2, 1fr);
    grid-gap: 10px;
    padding: 0px;
    text-align: center;
}

.div_figure_size{
    display: grid;
    grid-template-areas:
    "div_size_text div_size_input";
    grid-template-columns: repeat(2, 1fr);
    grid-gap: 10px;
    padding: 0px;
    text-align: center;
}

.div_color_input{
    display: grid;
    grid-template-areas: "div_color_option" "div_color_value";
    grid-template-rows: 2.5rem auto;
    grid-gap: 1px;
}

.div_color_value{
    display: grid;
    grid-template-areas: "item_color_min item_color_min item_color_min color_stripe item_color_max item_color_max item_color_max";
    grid-template-columns: repeat(7,1fr);
    justify-content: space-evenly;

}

.div_size_input{
    display: grid;
    grid-template-areas: "div_size_option" "div_size_value";
    grid-template-rows: 2.5rem auto;
    grid-gap: 1px;
}

.div_size_value{
    display: grid;
    grid-template-areas: "minimum_size_item minimum_size_item minimum_size_item size_stripe maximum_size_item maximum_size_item maximum_size_item";
    grid-template-columns: repeat(7,1fr);
    justify-content: space-evenly;
}

.div_figure_more{
    display: grid;
    grid-template-areas:
        "div_figure_more_color div_figure_more_shape";
    grid-template-columns: repeat(2, 1fr);
    grid-gap: 10px;
    justify-content: space-evenly;
}

.filter_grid {
    display: grid;
    grid-template-areas:
    "grid_filter_text grid_category grid_type grid_empty grid_search_text grid_search";
    grid-template-columns: repeat(5, 1fr);
    grid-gap: 10px;
    /*background-color: rgba(255, 255, 255, 0);*/
    padding: 0px;
    /*justify-content: space-evenly;*/

}

.navmenu{
    display: grid;
    grid-template-areas:
    "navicon navdrop navdrop navdrop navdrop navdrop";
    grid-template-columns: repeat(6, 1fr);
    grid-gap: 0px;
    /*background-color: rgba(255, 255, 255, 0);*/
    padding: 0px;
}

.menu_grid {
    display: grid;
    grid-template-areas:
    "navdesign navgallery navblogs navhelp";

    grid-template-columns: repeat(16, 1fr);
    grid-gap: 10px;
    /*background-color: rgba(255, 255, 255, 0);*/
    padding: 0px;
    justify-content: space-evenly;

    border-radius: 5px;
}

.main_grid {
  display: grid;
  grid-template-areas:
    'header header header header header header'
    'grid_canvas grid_canvas grid_canvas grid_form grid_form grid_form'
    'footer footer footer footer footer footer';
  grid-template-columns: repeat(6, 1fr);
  grid-gap: 10px;
  /*background-color: rgba(255, 255, 255, 0);*/
  padding: 15px;
  justify-content: space-evenly;
}

.base_grid {
  display: grid;
  grid-template-areas:
    'header header header header header header'
    'grid_form grid_form grid_form grid_form grid_form grid_form'
    'footer footer footer footer footer footer';
  grid-template-columns: repeat(6, 1fr);
  grid-gap: 10px;
  /*background-color: rgba(255, 255, 255, 0);*/
  padding: 15px;
  justify-content: space-evenly;
}

.design_examples {
  display: grid;
  grid-template-areas:
    'settings settings settings'
    'example_background example_figure example_add'
    'example_buttons example_buttons example_buttons';
  grid-template-columns: repeat(3, 1fr);
  grid-gap: 10px;
  padding: 15px;
  justify-content: space-evenly;
}

.create_settings, .create_item, .create_add{
    visibility: hidden;
    left: 5%;
}



.example_buttons{
    grid-column: span 3;
}

.grid_form {
  display: grid;
  grid-template-areas:
    'grid_form_sienna';
  grid-template-columns: repeat(1, 1fr);
  grid-gap: 10px;
  margin-bottom: 5%;
  padding: 0px;
  justify-content: space-evenly;
}

.grid_for {
  display: grid;
  grid-template-areas:
    'grid_redraw'
    'grid_tabs
    'grid_fields';
  grid-template-columns: repeat(1, 1fr);
  grid-gap: 0px;
  grid-row-gap:0px;
  grid-column-gap:0px;
  margin-bottom: 0%;
  padding: 0px;
  justify-content: space-evenly;
}

.canvas_simple, canvas_pro {
    position: -webkit-sticky;
    position: sticky;
    top: 12vh;
    width: 40vw;
}

.link_name{
    background-color: rgba(239, 252, 231, .0);
    /*color: darkred; *//*teal; *//*rgb(105,155,155); *//*darkseagreen;*/
    color: rgba(239, 252, 231, 1);
    font-weight: bold;
/*    padding: 0;*/
}

.main_canvas{
    margin: 0;
}

.main_grid > div {
  /*background-color: rgba(255, 255, 255, 0);*/
  text-align: center;
  padding: 20px 0;
  /*font-size: 30px;*/
}

.base_grid > div {
  /*background-color: rgba(255, 255, 255, 0);*/
  text-align: center;
  padding: 20px 0;
  /*font-size: 30px;*/
}

.grid_content{
    padding-left: 40px;
    padding-right: 40px;
}

@media only screen and (max-device-width: 1223px){
    .titlebar_div{
        font-size: 1.5rem !important;
    }
    .subtitle{
        font-size: 0.8rem !important;
    }
}

@media only screen and (max-device-width : 1223px) and (orientation : portrait){
    .titlebar_div{
        font-size: 1.5rem !important;
    }

    .subtitle{
        font-size: .8rem !important;
    }

    .grid_content{
        padding-left: 10px;
        padding-right: 10px;
    }

    canvas_simple, canvas_pro{
        width: 100%;
    }
}

/*@media all and (min-width: 768px) {*/
    .navbar_grid {
        display: grid;
        grid-template-areas:
        "navmenu navmenu navmenu navmenu navlogin navlogin navlogin navlogin navlogin";
        grid-template-columns: repeat(9, 1fr);
        grid-gap: 10px;
        /*background-color: rgba(255, 255, 255, 0);*/
        padding: 0px;
        justify-content: space-evenly;
        width: 100%;
        /*background-color: rgba(100,100,100,0.4);*/
  /*  }*/

    /*.navbar_grid {
          display: grid;
          grid-template-areas:
            "navmenu empty_grid empty_grid empty_grid empty_grid navlogin";
          grid-template-columns: repeat(6, 1fr);
          grid-gap: 10px;
          *//*background-color: rgba(255, 255, 255, 0);*//*
          padding: 0px;
          *//*justify-content: space-evenly;*//*
        }*/
}

@media screen and (max-width: 768px) {
    .filter_grid {
        display: grid;
        grid-template-areas:
        "grid_filter_text grid_category grid_type"
        "grid_search_text grid_search grid_search";
        grid-template-columns: repeat(3, 1fr);
        grid-gap: 5px !important;
        /*background-color: rgba(255, 255, 255, 0);*/
        padding: 0px;
        /*justify-content: space-evenly;*/

    }

    .grid_category_figure{
        grid-template-areas: "div_category" "div_figure";
    }

    .grid_content{
        padding-left: 0px;
        padding-right: 0px;
    }

    .navbar_grid{
        grid-auto-flow: row;
    }

    /*.navicon{
        grid-row: auto / span 1;
    }

    .navtoggle{
        grid-row: auto / span 1;
    }*/

    .navmenu{
        grid-row: auto / span 5;
        position: fixed;
        top: 0px;
        color: black;
    }

    .navmenu{
        display: grid;
        grid-template-areas:
        "navicon navtoggle"
        "navdrop navdrop";
        grid-template-columns: repeat(2, 1fr);
        grid-gap: 0px;
        /*background-color: rgba(255, 255, 255, 0);*/
        padding: 0px;
        left: -0px;
    }

    .navbar_grid {
        grid-template-areas:
        "navmenu navlogin navlogin navlogin navlogin navlogin navlogin navlogin navlogin";
    }

    .navlogin{
        grid-row: auto;
    }

    .menu_grid {
      display: grid;
      grid-template-areas:
        'navdesign'
        'navgallery'
        'navblogs'
        'navhelp';
      grid-template-columns: repeat(1, 1fr);
      grid-gap: 5px;
      /*background-color: rgba(255, 255, 255, 0);*/
      padding: 0px;
      justify-content: space-evenly;
      width: 100%;
      text-align: center;
      background-color: rgba(55, 55, 55, 1); /*rgb(239,252,231); */
      /*background-color: pink;*/
    }

    .canvas_simple{
        top: 25vh;
    }

    .design_examples {
        display: grid;
        grid-template-areas:
        'settings'
        'example_background'
        'example_figure'
        'example_add'
        'example_buttons';
        grid-template-columns: repeat(1, 1fr);
        grid-gap: 10px;
        padding: 15px;
        justify-content: space-evenly;
    }

    .example_buttons, .settings{
        grid-column: span 1;
    }

    .navtoggle{
        margin-top: 5px;
    }
}

/*
@media screen and (max-width: 341px) {
    .main_grid {
        display: grid;
        grid-template-areas:
        'header header header header header header'
        'grid_canvas grid_canvas grid_canvas grid_canvas grid_form grid_form'
        'footer footer footer footer footer footer';
        grid-template-columns: repeat(6, 1fr);
        grid-gap: 10px;
        */
/*background-color: rgba(255, 255, 255, 0);*//*

        padding: 15px;
        justify-content: space-evenly;
    }

    .sienna{
        */
/*font-size: 4rem !important;*//*

    }
}*/