/***************************************************************************
 * Copyright 2020, RIoT Secure AB
 *
 * @author Aaron Ardiri
 ***************************************************************************/

/***************************************************************************
 GLOBAL PROPERTIES
 ***************************************************************************/

:root
{
  --page-width:              100%;
  --page-font-family:        Arial, Helvetica;
  --page-font-color:         #303030;
  --page-link-color:         #c02020;
  --page-sect-color:         #c02020;
  --font-head-family:        var(--page-font-family);
  --font-head-size:          20px;
  --font-body-family:        var(--page-font-family);
  --font-body-size:          20px;
  --font-tool-family:        var(--page-font-family);
  --font-tool-size:          32px;
  --font-foot-family:        var(--page-font-family);
  --font-foot-size:          12px;

  --page-padding-vertical:   20px;
  --page-padding-horizontal: 20px;
  --page-header-height:      60px;
  --page-footer-height:      15px;
}

/***************************************************************************
 MAIN HTML COMPONENTS
 ***************************************************************************/

*
{
  box-sizing:                border-box;
}

html, body
{
  background-color:          white;
  margin:                    0px;
  border:                    0px;
  padding:                   0px;
  width:                     100%;
  height:                    100%;
  font-family:               var(--page-font-family);
  color:                     var(--page-font-color);
  overflow:                  hidden;
  overscroll-behavior:       contain;
}

div
{
  font-family:               inherit;
  font-size:                 inherit;
}

fieldset
{
  font-family:               inherit;
  margin:                    0;
  min-width:                 0;
  padding:                   8px;
}

textarea
{
  font-family:               "Courier";
  font-size:                 0.8em;
  resize:                    vertical;
  white-space:               pre;
}

label, input, button, select
{
  font-family:               inherit;
  font-size:                 inherit;
}

input
{
  border:                    1px solid #ccc;
}

label
{
  white-space:               nowrap;
}

th
{
  height:                    28px;
  min-height:                28px;
  font-family:               inherit;
  font-size:                 inherit;
  color:                     var(--page-font-color);
  text-align:                center;
  vertical-align:            top;
  cursor:                    pointer;
}

td
{
  height:                    28px;
  min-height:                28px;
  font-family:               inherit;
  font-size:                 inherit;
  color:                     var(--page-font-color);
  vertical-align:            top;
  cursor:                    pointer;
}

.newline
{
  clear:                     both;
}

.nowrap
{
  white-space: nowrap;
}

.statistic
{
  vertical-align:            top;
  text-align:                center;
  font-size:                 48px;
}

.statistic_device
{
  vertical-align:            top;
  text-align:                center;
}

.switch
{
  position:                  relative;
  display:                   inline-block;
  width:                     2.5em;
  height:                    1.5em;
}

.switch input  /* effectively hidden */
{
  opacity:                   0;
  width:                     0;
  height:                    0;
}

.slider
{
  position:                  absolute;
  cursor:                    pointer;
  top:                       0;
  left:                      0;
  right:                     0;
  bottom:                    0;
  background-color:          red;
  -webkit-transition:        .4s;
  transition:                .4s;
}

.slider.disabled
{
  opacity:                   50%;
}

.slider::before
{
  position:                  absolute;
  content:                   "";
  height:                    1em;
  width:                     1em;
  left:                      0.25em;
  bottom:                    0.25em;
  background-color:          white;
  -webkit-transition:        .4s;
  transition:                .4s;
}

.switch input:checked + .slider
{
  background-color:          #4CAF50;
}

.switch input:checked + .slider.disabled
{
  opacity:                   50%;
}

.switch input:focus + .slider
{
  box-shadow:                0 0 1px #4CAF50;
}

.switch input:checked + .slider::before
{
  -webkit-transform:         translateX(1em);
  -ms-transform:             translateX(1em);
  transform:                 translateX(1em);
}

.slider.round
{
  border-radius:             1em;
}

.slider.round::before
{
  border-radius:             50%;
}

.error
{
  color:                     red;
  font-family:               inherit;
  font-size:                 0.8em;
  font-weight:               bold;
  white-space:               normal;
}

.centered
{
  text-align:                center;
}

.legend
{
  white-space:               normal;
  font-family:               inherit;
  font-weight:               normal;
  font-size:                 0.7em;
}

.subtext
{
  color:                     grey;
  white-space:               normal;
  font-family:               inherit;
  font-variant:              small-caps;
  font-weight:               normal;
  font-size:                 0.7em;
  padding-left:              8px;
}

.required_asterix
{
  vertical-align:            top;
  float:                     right;
  margin:                    0 0 0 10px;
  font-family:               inherit;
  font-size:                 1.5em;
  color:                     red;
}

.last_update
{
  float:                     right;
}

a:link
{
  font-family:               inherit;
  font-size:                 inherit;
  text-decoration:           none;
  color:                     var(--page-font-color);
}

a:visited
{
  font-family:               inherit;
  font-size:                 inherit;
  text-decoration:           none;
  color:                     var(--page-font-color);
}

a:hover
{
  font-family:               inherit;
  font-size:                 inherit;
  text-decoration:           none;
  color:                     var(--page-link-color);
}

.scrollable
{
  overflow:                  auto;
}

.table_image
{
  width:                     75px;
  height:                    75px;
}

/** widget: image **/

.widget_image
{
  width:                     90%;
  height:                    auto;
  max-width:                 400px;
  max-height:                400px;
  margin:                    10px auto;
}

/** widget: packet **/

.widget_packet
{
  display:                   grid;
  grid-template-columns:     repeat(16, 1fr);
  gap:                       8px 4px;
  margin:                    4px;
}

.widget_packet_num, .widget_packet_bit
{
  height:                    20px;
  display:                   block;
  font-size:                 0.8em;
  text-align:                center;
}

.widget_packet_bit
{
  margin-bottom:             5px;
  border-style:              dotted;
  border-width:              1px;
}

/** widget: map device popup **/

.widget_map_container
{
  overflow:                  auto;
  height:                    100%;
}

.widget_map_top_container
{
  display:                   grid;
  grid-template-columns:     repeat(auto-fit, minmax(min(10rem, 100%), 1fr));
  grid-template-rows:        auto;
  grid-auto-rows:            30px;
  grid-gap:                  10px;
  align-content:             start;
  margin:                    20px 0;
}

.widget_map_main_container
{
  display:                   grid;
  grid-template-columns:     repeat(auto-fit, minmax(min(10rem, 100%), 1fr));
  grid-template-rows:        auto;
  grid-auto-flow:            dense;
  grid-gap:                  10px;
  align-content:             start;
}

.widget_map_top_widget
{
  display:                   flex;
  align-items:               center;
  background-color:          white;
  margin:                    0 10px;
  align-items:               center;
  justify-content:           space-around;
  border:                    2px solid #2d3436;
  border-radius:             5px;
  box-shadow:                1px 1px 8px 1px rgba(0,0,0,0.51);
}

.widget_map_main_widget
{
  display:                   flex;
  flex-direction:            column;
  justify-content:           space-between;
  background:                white;
  border-radius:             5px;
  margin:                    10px;
  box-shadow:                1px 1px 8px 1px rgba(0,0,0,0.51);
}

.widget_map_widget_header
{
  color:                     #2d3436;
  padding:                   calc(var(--page-padding-vertical) / 2);
}

.widget_map_widget_title
{
  color:                     #2d3436;
  font-weight:               bold;
  font-size:                 14px;
}

.widget_map_widget_content
{
  display:                   flex;
  justify-content:           space-evenly;
  margin-bottom:             10px;
}

.widget_map_vertical_flex
{
  display:                   flex;
  flex-direction:            column;
  align-items:               center;
}

/** forms **/

.form_button
{
  float:                     right;
  background-color:          #4CAF50;
  color:                     white;
  border:                    none;
  cursor:                    pointer;
  height:                    2em;
  width:                     30%;
  min-width:                 100px;
  margin-top:                calc(var(--page-padding-vertical) / 2);
  font-family:               inherit;
  font-variant:              small-caps;
  font-size:                 inherit;
}

.form_button_small
{
  float:                     right;
  background-color:          #4CAF50;
  color:                     white;
  border:                    none;
  cursor:                    pointer;
  height:                    2em;
  width:                     15%;
  margin-left:               0.5em;
  min-width:                 100px;
  margin-top:                calc(var(--page-padding-vertical) / 2);
  font-family:               inherit;
  font-variant:              small-caps;
  font-size:                 inherit;
}

.form_button_small[disabled]
{
  background-color:          #acacac;
}

.form_entity
{
  display:                   grid;
  grid-gap:                  0px 10px;
  grid-template-columns:     minmax(175px, 1fr) 4fr;
  white-space:               normal;
}

.form_entity fieldset
{
  grid-column:               1 / span 2;
  margin-bottom:             calc(var(--page-padding-vertical) / 2);
}

.form_entity label
{
  white-space:               normal;
}

.form_entity_key
{
  justify-self:              strech;
  padding-bottom:            calc(var(--page-padding-vertical) / 2);
  font-family:               inherit;
  font-size:                 inherit;
  word-break:                break-word;
  overflow-wrap:             anywhere;
}

.form_entity_key_multi
{
  grid-column:               1 / span 2;
  justify-self:              center;
  text-align:                center;
  padding-right:             0;
  padding-bottom:            calc(var(--page-padding-vertical) / 2);
  font-family:               inherit;
  font-size:                 inherit;
  word-break:                break-word;
  overflow-wrap:             anywhere;
}

.form_entity_key       .group,
.form_entity_key_multi .group
{
  display:                   inline;
  margin:                    0 5px;
  white-space:               nowrap;
}

.form_entity_key       input, .form_entity_key       select, .form_entity_key       div, .form_entity_key       textarea,
.form_entity_key_multi input, .form_entity_key_multi select, .form_entity_key_multi div, .form_entity_key_multi textarea
{
  width:                     100%;
  padding-bottom:            calc(var(--page-padding-vertical) / 2);
}

.form_entity_key       div input[type=checkbox], .form_entity_key       div input[type=radio],
.form_entity_key_multi div input[type=checkbox], .form_entity_key_multi div input[type=radio]
{
  width:                     auto;
  height:                    1em;
  margin:                    0 5px;
  padding:                   0;
}

.form_entity_key       .image_upload,
.form_entity_key_multi .image_upload
{
  padding-right:             0;
}

.form_entity_key       .image_upload input,
.form_entity_key_multi .image_upload input
{
  display:                   none;
}

.form_entity_key       .image_upload label img,
.form_entity_key_multi .image_upload label img
{
  border:                    2px solid grey;
  max-width:                 100%;
}

.material-icons-blank
{
  width:                     24px;
  height:                    24px;
  display:                   inline-block;
}

.loader
{
  font-size:                 10px;
  margin:                    50px auto;
  text-indent:               -9999em;
  width:                     5em;
  height:                    5em;
  border-radius:             50%;
  background:                #3b3b3b;
  background:                -moz-linear-gradient(left, #3b3b3b 10%, rgba(59,59,59, 0) 42%);
  background:                -webkit-linear-gradient(left, #3b3b3b 10%, rgba(59,59,59, 0) 42%);
  background:                -o-linear-gradient(left, #3b3b3b 10%, rgba(59,59,59, 0) 42%);
  background:                -ms-linear-gradient(left, #3b3b3b 10%, rgba(59,59,59, 0) 42%);
  background:                linear-gradient(to right, #3b3b3b 10%, rgba(59,59,59, 0) 42%);
  position:                  relative;
  -webkit-animation:         load 1.4s infinite linear;
  animation:                 load 1.4s infinite linear;
  -webkit-transform:         translateZ(0);
  -ms-transform:             translateZ(0);
  transform:                 translateZ(0);
}

.loader:before
{
  width:                     50%;
  height:                    50%;
  background:                #3b3b3b;
  border-radius:             100% 0 0 0;
  position:                  absolute;
  top:                       0;
  left:                      0;
  content:                   '';
}

.loader:after
{
  background:                #ffffff;
  width:                     75%;
  height:                    75%;
  border-radius:             50%;
  content:                   '';
  margin:                    auto;
  position:                  absolute;
  top:                       0;
  left:                      0;
  bottom:                    0;
  right:                     0;
}

@-webkit-keyframes load
{
  0%
  {
    -webkit-transform:       rotate(0deg);
    transform:               rotate(0deg);
  }
  100%
  {
    -webkit-transform:       rotate(360deg);
    transform:               rotate(360deg);
  }
}

@keyframes load
{
  0%
  {
    -webkit-transform:       rotate(0deg);
    transform:               rotate(0deg);
  }
  100%
  {
    -webkit-transform:       rotate(360deg);
    transform:               rotate(360deg);
  }
}

@media (max-width: 500px)
{

  .required_asterix              { float:                 left                        !important;
                                   margin:                0 10px 0 0                  !important; }
  .subtext                       { font-size:             0.6em                       !important; }
  .form_entity                   { grid-template-columns: unset                       !important; }
  .form_entity fieldset          { grid-column:           unset                       !important; }
  .form_entity_key_multi         { grid-column:           unset                       !important; }

  .form_entity_key       .group,
  .form_entity_key_multi .group  { display:               block                       !important;
                                   text-align:            left                        !important; }
  .widget_packet                 { grid-template-columns: repeat(8, 1fr)              !important; }
  .widget_map_widget_content     { flex-direction:        column                      !important; }
  .widget_map_main_widget        { grid-area:             auto / auto / auto / span 1 !important; }
}

/***************************************************************************
 HEADER
 ***************************************************************************/

#div_head
{
  top:                       0;
  left:                      0;
  width:                     calc(100vw - 2*var(--page-padding-horizontal));
  height:                    var(--page-header-height);

  font-family:               var(--font-head-family);
  font-size:                 var(--font-head-size);
  font-weight:               normal;
  align-content:             center;
  margin-top:                var(--page-padding-vertical);
  margin-bottom:             0;
  margin-left:               var(--page-padding-horizontal);
  margin-right:              var(--page-padding-horizontal);
  z-index:                   0;
}

#head_logo
{
  position:                  absolute;
  top:                       0;
  left:                      0;
  width:                     100px;
  height:                    var(--page-header-height);
  margin-top:                calc(var(--page-padding-horizontal) / 2);
  margin-left:               var(--page-padding-horizontal);
  margin-right:              var(--page-padding-horizontal);
  z-index:                   0;
}

#head_user_access
{
  position:                  absolute;
  top:                       0;
  left:                      calc(100px          + 2*var(--page-padding-horizontal));
  width:                     calc(100vw - (100px + 3*var(--page-padding-horizontal)));
  height:                    var(--page-header-height);
  display:                   flex;
  justify-content:           flex-end;
  flex-flow:                 row wrap;
  font-family:               inherit;
  font-size:                 0.8em;
  align-items:               center;
  align-content:             space-around;
  margin-top:                calc(var(--page-padding-horizontal) / 2);
  padding:                   0;
  z-index:                   0;
}

#head_logout_button
{
  font-family:               inherit;
  font-variant:              small-caps;
  font-size:                 inherit;
}

/***************************************************************************
 MAIN CONSOLE POPUPS
 ***************************************************************************/

/** popup - user message **/

#pop_message
{
  position:                  absolute;
  display:                   none;
  grid-template-columns:     auto 30px;
  align-items:               start;
  padding:                   10px;
  width:                     80%;
  height:                    4em;
  z-index:                   4;
  border:                    2px solid;
  border-radius:             10px;
}

#pop_message_message
{
  color:                     white;
  justify-self:              center;
  align-self:                center;
  font-family:               inherit;
  font-size:                 1.2em;
  font-weight:               normal;
  text-align:                center;
  white-space:               normal;
}

#pop_message_close
{
  color:                     grey;
  justify-self:              end;
  font-size:                 1.5em;
  font-weight:               bold;
}

#pop_message_close:hover, #pop_message_close:focus
{
  color:                     black;
  text-decoration:           none;
  cursor:                    pointer;
}

/** user login **/

#view-login
{
  position:                  absolute;
  background-color:          #fefefe;
  top:                       30%;
  left:                      50%;
  -ms-transform:             translate(-50%, -55%);
  transform:                 translate(-50%, -55%);
  width:                     75%;
  max-width:                 500px;
  font-family:               var(--font-body-family);
  font-size:                 var(--font-body-size);
  display:                   none;
  z-index:                   2;
}

#view-login_title
{
  color:                     black;
  font-family:               inherit;
  font-size:                 1.5em;
  font-weight:               bold;
  white-space:               normal;
}

#view-login_message
{
  color:                     red;
  float:                     left;
  display:                   inline-block;
  font-family:               inherit;
  font-size:                 inherit;
  font-weight:               bold;
  white-space:               normal;
}

#view-login_username, #view-login_password
{
  width:                     100%;
  height:                    2em;
  margin:                    4px 0;
  display:                   inline-block;
  box-sizing:                border-box;
  font-family:               inherit;
  font-size:                 inherit;
}

#view-login_button
{
  background-color:          #4CAF50;
  color:                     white;
  border:                    none;
  cursor:                    pointer;
  width:                     100%;
  height:                    2em;
  font-family:               inherit;
  font-size:                 inherit;
  font-variant:              small-caps;
}

#view-login_version
{
  color:                     black;
  float:                     right;
  font-family:               inherit;
  font-size:                 0.5em;
  white-space:               normal;
}

#view-login_footer
{
  width:                     100%;
  padding-top:               10px;
  font-family:               inherit;
  font-size:                 inherit;
}

#view-login_button:hover, #view-login_button:focus
{
  opacity:                   0.8;
}

/** popup - toolbar **/

#pop_toolbar
{
  position:                  fixed;
  top:                       calc(100% - var(--page-padding-vertical) - ((var(--font-tool-size) * 3) / 2));
  left:                      calc(var(--page-padding-horizontal) / 2);
  height:                    var(--font-tool-family);

  font-family:               var(--font-tool-family);
  font-size:                 var(--font-tool-size);
  font-weight:               normal;
  text-align:                left;
  vertical-align:            bottom;
  z-index:                   2;
}

#pop_toolbar label
{
  padding:                   calc(var(--font-tool-size) / 8);
  font-size:                 var(--font-tool-size);
}

/** popup - map device info **/

#pop_device
{
  display:                   none;
  position:                  absolute;
  top:                       7.5%;
  left:                      7.5%;
  width:                     85%;
  height:                    85%;
  padding:                   calc(var(--page-padding-vertical) / 2);
  background-color:          rgb(236, 240, 241);
  z-index:                   3;
  border:                    2px solid #2d3436;
}

.pop_device_header
{
  margin:                    0 10px;
}

.pop_device_title
{
  font-size:                 24px;
  font-weight:               bold;
  cursor:                    pointer;
}

.pop_device_close_button
{
  position:                  absolute;
  top:                       15px;
  right:                     20px;
  height:                    20px;
  color:                     grey;
  font-size:                 1.5em;
  font-weight:               bold;
}

.pop_device_close_button:hover, .pop_device_close_button:focus
{
  color:                     black;
  text-decoration:           none;
  cursor:                    pointer;
}

/***************************************************************************
 MAIN CONSOLE VIEWS
 ***************************************************************************/

#div_console
{
  position:                  absolute;
  top:                       calc(var(--page-padding-vertical) +
                                  var(--page-header-height));
  left:                      0;
  width:                     calc(100vw - 2*var(--page-padding-horizontal));
  height:                    calc(100vh - (2*var(--page-padding-vertical) +
                                  var(--page-header-height) +
                                  var(--page-footer-height)));

  font-family:               inherit;
  font-size:                 inherit;
  font-weight:               normal;
  text-align:                left;
  overflow-x:                hidden;
  overflow-y:                auto;
  margin-top:                0;
  margin-bottom:             0;
  margin-left:               var(--page-padding-horizontal);
  margin-right:              var(--page-padding-horizontal);
  display:                   block;
  z-index:                   0;
}

#view-map, .console-view
{
  width:                     100%;
  height:                    100%;
  font-family:               inherit;
  font-size:                 inherit;
  display:                   none;
  z-index:                   1;
}

#admin_new_tenant_form
{
  padding-top:               calc(var(--page-padding-vertical) / 2);
  clear:                     both;
}

#view-table, .console-view
{
  overflow:                  auto;
}

/***************************************************************************
 FOOTER
 ***************************************************************************/

#div_foot
{
  position:                  absolute;
  top:                       calc(100vh - (var(--page-padding-vertical) +
                                           var(--page-footer-height)));
  left:                      0;
  width:                     calc(100vw - 2*var(--page-padding-horizontal));
  height:                    var(--page-footer-height);

  font-family:               var(--font-foot-family);
  font-size:                 var(--font-foot-size);
  font-weight:               normal;
  text-align:                center;
  vertical-align:            bottom;
  margin-top:                0;
  margin-bottom:             var(--page-padding-vertical);
  margin-left:               var(--page-padding-horizontal);
  margin-right:              var(--page-padding-horizontal);
  z-index:                   0;
}

.highlight
{
  border: 3px solid #0abde3;
}

.slider-highlight
{
  box-shadow: 0 0 0 3px #0abde3;
}

.filter
{
  width: 100%;
  margin-right: 10px;
}

/***************************************************************************/