/*Fonts & Styles*/
*{
  font-family: Arial, Helvetica, sans-serif;
  line-height: 1.3em;
}

h1{
  font-size: 32px;
  -webkit-background-clip: text;
  //background-clip: text;
  color: #333;
  margin: 15px 0 15px 20px;
  padding: 0 0 0 0;
}
h2{
  font-size: 24px;  /*28px???*/
  color: #333;
  margin: 5px 0 5px 0;
  padding: 0 0 0 0;
}
h3{
  font-size: 20px;
  color: #333;
  margin: 5px 0 5px 0;
  padding: 0 0 0 0;
}
h4{
  font-size: 18px;
  color: #333;
  margin: 5px 0 5px 0;
  padding: 0 0 0 0;
}
h5{
  color: #333;
  font-size: 16px;
  margin: 5px 0 5px 0;
  padding: 0 0 0 0;
}
h6{
  color: #333;
  font-size: 14px;
  margin: 5px 0 5px 0;
  padding: 0 0 0 0;
}
h1,h2,h3,h4,h5,h6{
  small{
    font-weight: normal;
    color: #888;
    font-size: .7em;
  }
}
@supports not ((background-clip: text) or (-webkit-background-clip: text)){
  h1{
    color: black;
    background: none;
  }
}

/*Dark Mode*/
.theme-dark{
  h1,h2,h3,h4,h5,h6{
    color: #888;
  }
}

/*////////////////////////////////////////////////////////////////////////////////////////////////////*/
/*//*/
/*// Box Displays*/
/*//*/
/*// Usage:*/
/*//  <div class="box_list">*/
/*//    <div class="box box_medium">*/
/*//      <div class="inner_box">*/
/*//        <div class="boxtitle">Box Title</div>*/
/*//        <div class="content">*/
/*//          <div class="title">Content Title</div>*/
/*//          <div class="detail"><span class="label">Label:</span> Detailed Attribute</div>*/
/*//          <div class="description">Description</div>*/
/*//        </div>*/
/*//        <div class="menu"><a href="#">Item</a>&bull;<a href="#">Item</a></div>*/
/*//      </div>*/
/*//    </div>*/
/*//  </div>*/
/*//*/
/*// You may specify "pointer" (such as within the "content" box) to change*/
/*// the cursor to be a hand pointer.*/
/*//*/
/*// You can size the box by changing "box_medium" to one of*/
/*// box_small/box_medium/box_large as necessary. The default is "box_medium".*/
/*//*/
/*// For custom sizing, leave out the box_small/box_medium/box_large, and*/
/*// specify them manually such as:*/
/*//     <div class="box" style="width: 250px;height: 350px;">...</div>*/
/*//*/
/*////////////////////////////////////////////////////////////////////////////////////////////////////*/

.box_list{
  display: flex;
  flex-flow: row wrap;
  box-sizing: border-box;
  .box{
    flex: 0 0 auto;
    margin: 10px 30px 30px 10px;
    width: 350px;
    height: 300px;
    &.box_small{
      width: 250px;
      height: 200px;
    }
    &.box_medium{
      width: 350px;
      height: 300px;
    }
    &.box_large{
      width: 400px;
      height: 400px;
    }
    .pointer{
      cursor: pointer;
    }
    .inner_box{
      height: 100%;
      border: 1px solid #888;
      box-shadow: 15px 15px 15px 0 rgba(0,0,0,0.5);
      margin: 10px;
      border-radius: 20px;
      display: flex;
      flex-flow: column nowrap;
      .boxtitle{
        flex: 0 0 auto;
        font-size: 1.2em;
        border-top-left-radius: 20px;
        border-top-right-radius: 20px;
        background-color: transparent;
        background-image: linear-gradient(150deg, #911CE7 10%, #00D6C9 100%);
        color: #eee;
        margin: 0;
      }
      .content{
        flex: 1 1 auto;
        overflow: hidden;
        .title{
          font-weight: bold;
          font-size: 1.2em;
        }
        .detail{
          font-size: .9em;
          font-style: italic;
          span.label{
            font-style: normal;
            font-weight: bold;
          }
        }
        .description{
          font-style: italic;
        }
        &.scroll{
          overflow: scroll;
        }
      }
      .title,.menu{
        background-color: #eee;
      }
      .title{
        border-bottom: 1px dotted #aaa;
      }
      .image{
        a{
          width: 100%;
          display: block;
        }
        img{
          display: block;
          margin: 0 auto;
          max-width: 256px;
        }
      }
      .buttons{
        flex: 0 0 auto;
      }
      .menu{
        flex: 0 0 auto;
        border-top: 1px dotted #aaa;
        border-bottom-left-radius: 20px;
        border-bottom-right-radius: 20px;
        margin-top: 2px;
        font-size: .8em;
        text-align: center;
      }
      .boxtitle,.content div, .menu{
        padding: 0 15px 0 15px;
      }
    }
  }
}

.theme-dark{
  .box .inner_box{
      .title,.menu{
        background-color: #333
      }
      .title{
        border-bottom: 1px dotted #666
      }
      .menu{
        border-top: 1px dotted #666
      }
  }
}

/*Links*/
a {
  text-decoration: none;
}
.link{
  text-decoration: none;
  cursor: pointer;
}

/*Buttons*/
a.button,span.button,div.button,button.button{
  cursor: pointer;
}
.button{
  border-radius: 20px;
  display: inline-block;
  padding: 5px 20px;
  margin-top: 5px;
  margin-bottom: 10px;
  font-size: 16px;
  &.primary{
    color: white;
    background-color: #000;
    border: 0;
    &:hover{
      filter: brightness(120%);
      color: #888;
    }
  }
  &.secondary{
    color: white;
    background-color: #888;
    border: 1px solid #888;
    &:hover{
      filter: brightness(120%);
    }
  }
  &.trinary{
    border: 1px solid #888888;
    color: inherit;
    &:hover{
      background-color: #eee;
      color: black;
    }
  }
  &.alternate{
    color: white;
    background-color: #00D6C9;
    border: 1px solid #00D6C9;
    &:hover{
      filter: brightness(140%);
    }
  }
  &.small{
    font-size: 10px;
  }
  &.tiny{
    font-size: 10px;
    padding: 2px 10px;
    margin-top: 1px;
    margin-bottom: 1px;
  }
}

a{
  color: #5E55C9;
}
a:hover{
  color: #911CE7;
}
.link{
  color: #5E55C9;
}
.link:hover{
  color: #911CE7;
}
/*Dark Mode*/
.theme-dark{
  a{
    color: #00D6C9;
  }
  a:hover{
    color: #5E55C9;
  }
  .link{
    color: #00D6C9;
  }
  .link:hover{
    color: #5E55C9;
  }
}

/*Danger Zone*/
#danger_zone_links{
  span.danger{
    color: #fff;
    background-color: #911CE7;
    border: 0;
    &:hover{
      filter: brightness(120%);
    }
  }
  #danger_zone_enable{
    cursor: pointer;
  }
  #danger_zone_disable{
    cursor: pointer;
    display: none;
  }
}
#danger_zone{
  display: none;
  #danger_zone_box{
    border: 1px solid black;
    border-radius: 25px;
    padding: 20px;
    width: 400px;
    background-color: rgba(255,0,0,0.25);
    a.trinary:hover{
      background-color: rgba(255,0,0,0.5);
      color: black;
    }
  }
}

/*Dialog Boxes*/
.standard_dialog{
  white-space: normal;
  display: none;
  position: absolute;
  top: 80px;
  left: 0;
  right: 0;
  margin-left: auto;
  margin-right: auto;
  width: 500px;
  border: 1px solid #5E55C9;
  z-index: 2000;
  .lead{
    padding: 10px;
  }
  .body{
    padding: 10px;
  }
}
.standard_dialog_overlay{
  display: none;
  position: fixed;
  top: 0;
  bottom: 0;
  left: 0;
  right: 0;
  z-index: 1001;
}

.react_dialog{
  position: absolute;
  top: 80px;
  left: 0;
  right: 0;
  margin-left: auto;
  margin-right: auto;
  width: 500px;
  border: 1px solid #5E55C9;
  z-index: 2000;
  .lead{
    padding: 10px;
  }
  .body{
    padding: 10px;
    overflow-y: auto;
  }
}
.react_dialog_overlay{
  position: fixed;
  top: 0;
  bottom: 0;
  left: 0;
  right: 0;
  z-index: 1001;
}

/*Dark Color Scheme*/
.standard_dialog, .react_dialog{
  background-color: #fff;
  box-shadow: #666 5px 5px 5px;
  .lead{
    background-color: #911CE7;
    color: #fff;
  }
}
.standard_dialog_overlay, .react_dialog_overlay{
  background-color: rgba(255,255,255,0.7);
}
.theme-dark{
  .standard_dialog, .react_dialog{
    background-color: #666;
    box-shadow: #999999 5px 5px 5px;
    .lead{
      background-color: #911CE7;
      color: #fff;
    }
  }
  .standard_dialog_overlay, .react_dialog_overlay{
    background-color: rgba(51,51,51,0.7);
  }
}

/*Flash messages*/
#flash_content{
  position: absolute;
  width: 400px;
  right: 20px;
  top: 40px;
  .close_box{
    text-align: right;
    span{
      cursor: pointer;
    }
  }
  .callout{
    padding: 0 10px 10px 10px;
    border-radius: 20px;
    box-shadow: 15px 15px 15px 0 rgba(0,0,0,0.5);
  }
  .flash_info{
    border: 2px solid #DDDDDD;
    background-color: #DDDDDD;
  }
  .flash_success{
    border: 2px solid #00B000;
    background-color: #DDDDDD;
  }
  .flash_warning{
    border: 2px solid #e0e000;
    background-color: #DDDDDD;
  }
  .flash_error{
    border: 2px solid #FF0000;
    background-color: #DDDDDD;
  }
}

/*Dark Mode*/
.theme-dark{
  #flash_content{
    .flash_info,.flash_success,.flash_warning,.flash_error{
      color: #ccc;
      background-color: #333;
    }
  }
}


/*Forms*/
input[type=text],input[type=password],input[type=email],input[type=date],input[type=url],input[type=number]{
  box-sizing: border-box;
  font-size: 16px;
  border: 1px solid #ccc;
  padding: 8px;
  margin: 0 0 0 0;
  width: 100%;
}
select{
  font-size: 18px;
  width: 100%;
  margin: 0;
  padding: 8px;
  border: 1px solid #ccc;
}
textarea{
  font-size: 16px;
  width: 100%;
}
.fieldDefaultWrapper{
  margin-bottom: 16px;
  input[type=text],input[type=password],input[type=email],select{
    display: block;
    margin: 0;
  }
  input[type=checkbox]{
    display: inline;
  }
  span.hint{
    display: block;
    font-style: italic;
    font-size: .8em;
  }
  input[type=checkbox]{
    display: inline;
  }
  &.fieldHasErrors{
    label{
      color: red;
    }
    input[type=text],input[type=password],input[type=email],select{
      border: 1px solid red;
      background-color: #ff8888;
    }
    span.hint{
      color: red;
    }
    ul.errorlist{
      display: block;
      font-style: italic;
      font-size: .8em;
      color: red;
      list-style-type: none;
      margin-left: 0;
      padding-left: 0;
    }
  }
  &.radio_buttons{
    label{
      display: block;
      margin-bottom: 5px;
    }
    span.radio{
      margin: 10px;
      display: inline;
      label{
        display: inline;
        input{
          display: inline;
        }
      }
    }
  }
}

ul.errorlist.nonfield{
  border: 1px solid red;
  background-color: #cccccc;
  border-radius: 20px;
  box-shadow: red 5px 5px 5px;
  margin: 20px auto 30px 30px;
  width: 500px;
  padding: 20px;
  color: red;
  li{
    color: red;
    font-weight: bold;
  }
}
/*
  form_join: used to put $ before and € after a text field, etc.
  For example:
  .form_join
    .text_info $
    =form.input ...
*/
.form_join{
  display: flex;
  align-items: center;
  .text_info{
    box-sizing: border-box;
    font-size: 16px;
    padding: 8px;
    background-color: #ccc;
    border: 1px solid #ccc;
  }
}

/*Not Used???*/
.form_box{
  border: 0;
  color: #222;
  background-color: #fff;
  border-radius: 20px;
  box-shadow: 8px 12px 20px 0px rgba(0, 0, 0, 0.2);
  margin: 20px;
  padding: 30px;
}
.form_box_colored_border{
  border: 2px solid #a1a1a1;
}

.theme-dark{
  .form_box{
    color: #eee;
    background-color: #444;
  }
}

/*Hero Box*/
.hero{
  height: calc(100% - 30px);
  border-radius: 20px;
  margin: 20px 20px 20px 20px;
  padding: 10px;
  box-shadow: 8px 12px 20px 0px rgba(0, 0, 0, 0.2);
  border-width: 2px;
  border-style: solid;
  border-color: #911CE7 #5E55C9 #5E55C9 #00D6C9;
  background-color: transparent;
  background-image: linear-gradient(135deg, rgba(0,214,201,0.2) 0%, rgba(145,28,231,0.2) 100%);
}

/*Menu Classes*/
/*Popup*/
.popup_menu{
  display: none;
  position: absolute;
  z-index: 105;
  border: 1px solid;
  border-radius: 10px;
  border-color: #a1a1a1;
  /* The box-shadow property values are:
     offset-x, offset-y, blur-radius, spread-radius, color */
  box-shadow: 8px 12px 20px 0px rgba(0, 0, 0, 0.2);
  background-color: #fff;
  color: #333333;
  .menu_title{
    margin: 5px 5px 0 5px;
    font-weight: bold;
    text-decoration: underline;
    font-size: 1.1em;
    color: black;
  }
  .menu_boxes{
    padding: 0;
    margin: 0;
    display: flex;
    flex-flow: row wrap;
    box-sizing: border-box;
    .menu_item_box{
      box-sizing: border-box;
      flex: 0 0 50%;
      padding: 0;
      border: none;
      background-color: #fff;
      margin: 0;
      .inner_box{
        margin: 5px;
        padding: 5px;
        background-color: #fff;
        border: 2px solid;
        border-color: #a1a1a1;
        border-radius: 5px;
        a{
          color: inherit;
          text-decoration: none;
        }
      }
      .enhanced{
        display: flex;
        flex-flow: row nowrap;
        cursor: pointer;
        .left{
          flex: 0 0 auto;
          padding: 0 5px 0 5px;
          i{
            font-size: 2em;
          }
        }
        .right{
          flex: 1 1 auto;
          .title{
            text-decoration: underline;
            color: #333;
          }
          .description{
            font-size: .8em;
            font-style: italic;
          }
        }
      }
    }
    .menu_item_box:hover{
      border: none;
      .inner_box{
        background-color: #ccc;
      }
    }
  }
  .menu_lines,.menu_lines_2col,.menu_lines_3col{
      padding: 5px 5px 5px 10px;
      display: flex;
      flex-flow: row wrap;
      box-sizing: border-box;
  }
  .menu_lines{
    .menu_item,.menu_item_disabled{
        flex: 0 0 100%;
        margin: 0;
    }
  }
  .menu_lines_2col{
    .menu_item,.menu_item_disabled{
      flex: 0 0 50%;
      margin: 0;
    }
  }
  .menu_lines_3col{
    .menu_item,.menu_item_disabled{
      flex: 0 0 33%;
      margin: 0;
    }
  }
  .menu_lines_4col{
    .menu_item,.menu_item_disabled{
      flex: 0 0 25%;
      margin: 0;
    }
  }
}
.menu_item,.menu_item_disabled{
  color: #000;
  font-weight: bold;
  a{
    color: #333;
    text-decoration: none;
    font-weight: normal;
  }
}
.menu_item:hover{
  background-color: #ccc;
  a{
    color: #888;
    text-decoration: none;
  }
}

body.theme-dark{
  .menu_item,.menu_item_disabled{
    color: #333;
    a{
      color: #888;
    }
  }
  .menu_item:hover{
    a{

    }
  }
}
/*Standard Page*/

body{
  margin: 0;
  background-color: #E8E8E8;
}
.standard_page{
  display: flex;
  flex-flow: column nowrap;
  height: 95vh;
  background-color: #E8E8E8;
  /*Banner*/
  .standard_banner{
    background-color: #E8E8E8;
    flex: 0 0 auto;
    height: 64px;
    display: flex;
    flex-flow: row nowrap;
    padding: 10px 20px;
    .standard_logo{
      flex: 1 0 auto;
      img{
        height: 50px;
        padding-top: 5px;
      }
    }
    .standard_menu{
      padding: 10px 0 0 20px;
      flex: 1 0 auto;
      a.menu_display{
        color: #000000;
        font-size: 1em;
        text-decoration: none;
        padding-left: 10px;
        padding-right: 10px;
        cursor: pointer;
        &:hover{
          color: #5E55C9;
          text-decoration: underline;
        }
      }
    }
    .stdtok_usage{
        padding: 10px 0 0 20px;
        flex: 1 0 auto;
        font-size: .7em;
        font-style: italic;
        color: #888;
    }
    .standard_account{
      flex: 0 0 auto;
      font-size: 1em;
      padding: 10px 10px 0 10px;
      color: black;
      &:hover{
        color: #5E55C9;
        text-decoration: underline;
      }
      .menu_display{
        cursor: pointer;
        text-align: right;
      }
    }
    .standard_right{
      flex: 0 0 auto;
      padding: 0 5px 0 0;
      img.notification{
        height: 20px;
        width: 20px;
        padding: 10px 10px 0 5px;
      }
      img.avatar{
        border-radius: 16px;
        height: 32px;
        width: 32px;
        cursor: pointer;
      }
    }
  }
  /*Main Page*/
  .page_body{
    flex: 1 1 100%;
    background-color: #E8E8E8;
    .main_body{
      height: calc(100vh - 90px);
      overflow: auto;
      padding: 0 10px;
      padding-bottom: 30px;
    }
  }
  /*Footer*/
  .footer{
    background-color: #E8E8E8;
    flex: 0 0 auto;
    height: 40px;
    .inner_footer{
      display: flex;
      flex-flow: row nowrap;
      padding: 10px;
      .left{
        flex: 0 0 auto;
        color: #000;
        width: 80%;
      }
      .standard_right{
        width: 20%;
        flex: 0 0 auto;
        a{
          img{
            width: 15px;
          }
        }
      }
    }
  }
}



@media (max-width: 700px){
  .standard_page{
    .standard_banner{
      height: 300px;
      flex-flow: row wrap;
      padding: 0;
      margin: 0;
      height: auto;
      .standard_logo{
        flex: 0 0 100%;
        padding: 0;
        margin: 0;
        height: auto;
      }
      .standard_menu{
        flex: 0 0 100%;
        padding: 0;
        margin: 0;
        height: auto;
      }
      .standard_account{
        flex: 1 1 80%;
        font-size: 1em;
        padding: 10px 10px 0 10px;
        padding: 0;
        margin: 0;
        height: auto;
        .menu_display{
          text-align: left;
        }
      }

      .standard_right{
        flex: 0 0 20%;
        padding: 0;
        margin: 0;
        height: auto;
        text-align: right;
      }
    }
  }
}

/*Dark Theme Support*/
body.theme-dark{
  .standard_page{
    background-color: #666666;
    .standard_banner{
      background-color: #666666;
    }
    .page_body{
      background-color: #666666;
    }
    .footer{
      background-color: #666666;
    }
  }
}

.pagination{
  margin-top: 3px;
  text-align: center;
  .step-links{
    padding: 5px 10px 5px 10px;
    background-color: #ccc;
    a:hover, a:focus{
      text-decoration: underline;
    }
    span.pageLink,span.pageLinkActive{
      padding-left: 10px;
      padding-right: 10px;
    }
    span.pageLinkActive{
      cursor: pointer;
      color: #911CE7;
    }
    span.pageLinkActive:hover{
      text-decoration: underline;
    }
  }
}
/*Dark Theme*/
.theme-dark{
  .pagination .step-links{
    background-color: #555;
  }
  a{
    color: white;
  }
}

/*Uses Flexbox (https://css-tricks.com/snippets/css/a-guide-to-flexbox/)*/
div.row{
  display: flex;
  flex-flow: row wrap;
  box-sizing: border-box;
  &.left-aligned{
    justify-content: flex-start;
  }
  &.centered{
    justify-content: center;
  }
  &.right-aligned{
    justify-content: flex-end;
  }
  &.justified{
    justify-content: space-between;
  }
  &.gap{
    div{
      padding-left: 5px;
      padding-right: 5px;
    }
  }
  &.vertical-top{
    align-items: flex-start;
  }
  &.vertical-center{
    align-items: center;
  }
  &.vertical-bottom{
    align-items: flex-end;
  }
  .padding{
    padding-left: 5px;
    padding-right: 5px;
  }
  div{
    box-sizing: border-box;
    &.top-aligned{
      align-self: flex-start;
    }
    &.bottom-aligned{
      align-self: flex-end;
    }
  }
  .col-1{
    flex: 0 0 12.5%;
  }
  .col-2{
    flex: 0 0 25%;
  }
  .col-3{
    flex: 0 0 37.5%;
  }
  .col-4{
    flex: 0 0 50%;
  }
  .col-5{
    flex: 0 0 62.5%;
  }
  .col-6{
    flex: 0 0 75%;
  }
  .col-7{
    flex: 0 0 87.5%;
  }
  .col-8{
    flex: 0 0 100%;
  }
}
.col-1{
  width: 12.5%;
}
.col-2{
  width: 25%;
}
.col-3{
  width: 37.5%;
}
.col-4{
  width: 50%;
}
.col-5{
  width: 62.5%;
}
.col-6{
  width: 75%;
}
.col-7{
  width: 87.5%;
}
.col-8{
  width: 100%;
}

@media (max-width: 700px){
  div.row{
    .col-1{
      flex: 0 0 25%;
    }
    .col-2{
      flex: 0 0 50%;
    }
    .col-3{
      flex: 0 0 75%;
    }
    .col-4{
      flex: 0 0 100%;
    }
    .col-5{
      flex: 0 0 100%;
    }
    .col-6{
      flex: 0 0 100%;
    }
    .col-7{
      flex: 0 0 100%;
    }
    .col-8{
      flex: 0 0 100%;
    }
  }
  .col-1{
    width: 25%;
  }
  .col-2{
    width: 50%;
  }
  .col-3{
    width: 75%;
  }
  .col-4{
    width: 100%;
  }
  .col-5{
    width: 100%;
  }
  .col-6{
    width: 100%;
  }
  .col-7{
    width: 100%;
  }
  .col-8{
    width: 100%;
  }
}
/*Settings*/
.tabs-title{
  &.user-tab{
    a{
      color: #5E55C9;
      &:hover{
        color: #5E55C9;
      }
    }
  }
  &.organization-tab{
    a{
      color: #911CE7;
      &:hover{
        color: #911CE7;
      }
    }
  }
}
div.tabs div.one-line{
  white-space: nowrap;
}
div#tabs-users{
  display: inline-block;
  white-space: nowrap;
}
div#tabs-seperator{
  display: inline-block;
  padding-left: 20px;
  padding-right: 20px;
}
div#tabs-account{
  display: inline-block;
  white-space: nowrap;
}
div#tab-label-user{
  background-color: #5E55C9;
  color: #eee;
}
div#tab-label-account{
  background-color: #999;
  color: #eee;
}

@media (max-width: 900px) {
  div#tabs-seperator{
    display: none;
  }
  div.tabs div.one-line{
    white-space: normal;
  }
}
.settings-info-user,.settings-info-account{
  .row{
    &.divided{
      border-bottom: 1px solid black;
    }
    .label-box{
      padding: 5px;
      text-align: right;
      .title{
        font-weight: bold;
        color: #ddd;
        font-size: 1.2em;
      }
      .description{
        font-style: italic;
        color: #ddd;
        font-size: .8em;
      }
    }
    .content-box{
      padding: 5px;
    }
  }
  .col-6{
    background-color: #eee;
  }
}
.settings-info-user{
  .label-box{
    background-color: #5E55C9;
  }
}
.settings-info-account{
  .label-box{
    background-color: #999;
  }
}

.theme-dark{
  .tabs-title{
    &.user-tab{
      a{
        color: #aaa;
        &:hover{
          color: #aaa;
        }
      }
    }
    &.organization-tab{
      a{
        color: #888;
        &:hover{
          color: #888;
        }
      }
    }
  }
  .settings-info-user,.settings-info-account{
    .col-6{
      background-color: #444;
    }
  }
}

.spinner{
  position: fixed;
  top: 50%;
  left: 50%;
  width: 50px;
  height: 50px;
  margin: -25px 0 0 -25px; /* width and height / 2 */
  border: 5px solid rgba(0, 0, 0, .1);
  border-top-color: #000;
  border-radius: 50%;
  animation: spin 1s linear infinite;
}

@keyframes spin{
  to{
    transform: rotate(360deg);
  }
}
/*Support Classes*/
.hide{
  display: none;
}

div.error,span.error{
  color: red;
  span.error_code{
    font-weight: bold;
  }
  span.message{
    font-style: italic;
  }
}
/*Font size adjustments*/
.small{
  font-size: .8em;
}
.italic{
  font-style: italic;
}
.small_italic{
  font-size: .8em;
  font-style: italic;
}
.bold{
  font-weight: bold;
}
.bold_italic{
  font-weight: bold;
  font-style: italic;
}


table.primary, table.novisible{
  border-collapse: collapse;
  caption{
    font-style: italic;
    font-size: 1.2em;
    -webkit-background-clip: text;
    background-clip: text;
    color: #333;
  }
  .right_aligned{
    text-align: end;
  }
  thead{
    tr{
      border: 1px solid #eee;
      th{
        border-spacing: 0;
        text-align: left;
        padding: 5px 10px 5px 10px;
        vertical-align: bottom;
        color: #333;
        border-bottom: 1px solid #a1a1a1;
        &.left{
          text-align: left;
        }
        &.center{
          text-align: center;
        }
        &.right{
          text-align: right;
        }
        &.nowrap{
          white-space: nowrap;
        }
      }
    }
    td{
      padding: 5px 10px 5px 10px;
      vertical-align: top;
      &.center{
        text-align: center;
      }
      &.nowrap{
        white-space: nowrap;
      }
    }
  }
  &.full_width{
    width: 100%;
  }
  &.align_center{
    margin-left: auto;
    margin-right: auto;
  }
  &.caption_bottom{
    caption-side: bottom;
  }
  tbody{
    a{
      color: inherit;
    }
    a:hover{
      color: inherit;
      filter: brightness(140%);
    }
    tr{
      border: 1px solid #eee;
      th{
        vertical-align: top;
        text-align: left;
      }
      th,td{
        padding: 5px 10px 5px 10px;
      }
    }
  }
  tfoot{
    tr{
      border: 0;
      th,td{
        padding: 5px 10px 5px 10px;
      }
    }
  }
}
table.primary{
  tr{
    border: 1px solid #eee;
  }
}
table.novisible{
  tr{
    border: 0;
  }
}

@supports not ((background-clip: text) or (-webkit-background-clip: text)){
  table{
    caption{
      color: black;
      background: none;
    }
  }
}


table.primary{
  &.hover{
    tbody{
      tr.nohover:hover{
        th,td{
          background-color: inherit;
        }
      }
      tr:hover{
        th,td{
          background-color: #ddd;
        }
      }
      tr:hover{
        th.nohover,td.nohover{
          background-color: inherit;
        }
      }
      tr.selected{
        th,td{
          background-color: #ddd;
        };
      }
    }
  }
}

/* Dark Color Scheme */
body.theme-dark{
  table.primary{
    thead{
      th{
        border-bottom: 1px solid #888;
        color: #ccc;
      }
    }
    tr{
      border: 1px solid #333;
    }
    caption{
      color: #cccccc;
    }
    &.hover{
      tbody{
        tr.nohover:hover{
          th,td{
            background-color: inherit;
          }
        }
        tr:hover{
          th,td{
            background-color: #666;
          }
        }
        tr.selected{
          th,td{
            background-color: #666;
          }
        }
      }
    }
  }
}

/*Tabs*/
.tabs{
  a:hover{
    color: #911CE7;
  }
  border-bottom: 1px solid #ccc;
  margin: -5px -5px 0px -5px;
  .tabs-title,.tabs-static{
    display: inline-block;
    padding: 5px;
    margin: 0;
    border: 1px solid #888;
  }
  .tabs-title{
    border-top-left-radius: 10px;
    border-top-right-radius: 10px;
  }
  .tabs-static{
    border-top-right-radius: 10px;
  }
  .tabs-title:hover{
    background-color: #0000ff;
    color: #ffffff;
    a{
      color: #ffffff;
    }
  }
  .is-active{
    padding-top: 10px;
    background-color: #0000ff;
    color: #ffffff;
    a{
      color: #ffffff;
    }
  }
}
.tabs-content{
  margin: 0;
  padding: 5px;
}

/*Dark Mode*/
.theme-dark{
  .tabs-title:hover{
    background-color: #444;
  }
  .is-active{
    background-color: #444;
  }
}

/*
 * Foundation Icons v 3.0
 * Made by ZURB 2013 http://zurb.com/playground/foundation-icon-fonts-3
 * MIT License
 */

@font-face {
  font-family: "foundation-icons";
  src: url("../js/b97e770b0e3c6ebed11d.92827f088b9e.eot");
  src: url("../js/b97e770b0e3c6ebed11d.92827f088b9e.eot?#iefix") format("embedded-opentype"),
  url("../js/e765a16d11a4a296dc00.a188c2f768ce.woff") format("woff"),
  url("../js/c0cbb004854f9c746f89.e20945d7c929.ttf") format("truetype"),
  url("../js/a02a0dbbb4c161b4e2f1.17cb1ed2e846.svg#fontcustom") format("svg");
  font-weight: normal;
  font-style: normal;
}

.fi-address-book:before,
.fi-alert:before,
.fi-align-center:before,
.fi-align-justify:before,
.fi-align-left:before,
.fi-align-right:before,
.fi-anchor:before,
.fi-annotate:before,
.fi-archive:before,
.fi-arrow-down:before,
.fi-arrow-left:before,
.fi-arrow-right:before,
.fi-arrow-up:before,
.fi-arrows-compress:before,
.fi-arrows-expand:before,
.fi-arrows-in:before,
.fi-arrows-out:before,
.fi-asl:before,
.fi-asterisk:before,
.fi-at-sign:before,
.fi-background-color:before,
.fi-battery-empty:before,
.fi-battery-full:before,
.fi-battery-half:before,
.fi-bitcoin-circle:before,
.fi-bitcoin:before,
.fi-blind:before,
.fi-bluetooth:before,
.fi-bold:before,
.fi-book-bookmark:before,
.fi-book:before,
.fi-bookmark:before,
.fi-braille:before,
.fi-burst-new:before,
.fi-burst-sale:before,
.fi-burst:before,
.fi-calendar:before,
.fi-camera:before,
.fi-check:before,
.fi-checkbox:before,
.fi-clipboard-notes:before,
.fi-clipboard-pencil:before,
.fi-clipboard:before,
.fi-clock:before,
.fi-closed-caption:before,
.fi-cloud:before,
.fi-comment-minus:before,
.fi-comment-quotes:before,
.fi-comment-video:before,
.fi-comment:before,
.fi-comments:before,
.fi-compass:before,
.fi-contrast:before,
.fi-credit-card:before,
.fi-crop:before,
.fi-crown:before,
.fi-css3:before,
.fi-database:before,
.fi-die-five:before,
.fi-die-four:before,
.fi-die-one:before,
.fi-die-six:before,
.fi-die-three:before,
.fi-die-two:before,
.fi-dislike:before,
.fi-dollar-bill:before,
.fi-dollar:before,
.fi-download:before,
.fi-eject:before,
.fi-elevator:before,
.fi-euro:before,
.fi-eye:before,
.fi-fast-forward:before,
.fi-female-symbol:before,
.fi-female:before,
.fi-filter:before,
.fi-first-aid:before,
.fi-flag:before,
.fi-folder-add:before,
.fi-folder-lock:before,
.fi-folder:before,
.fi-foot:before,
.fi-foundation:before,
.fi-graph-bar:before,
.fi-graph-horizontal:before,
.fi-graph-pie:before,
.fi-graph-trend:before,
.fi-guide-dog:before,
.fi-hearing-aid:before,
.fi-heart:before,
.fi-home:before,
.fi-html5:before,
.fi-indent-less:before,
.fi-indent-more:before,
.fi-info:before,
.fi-italic:before,
.fi-key:before,
.fi-laptop:before,
.fi-layout:before,
.fi-lightbulb:before,
.fi-like:before,
.fi-link:before,
.fi-list-bullet:before,
.fi-list-number:before,
.fi-list-thumbnails:before,
.fi-list:before,
.fi-lock:before,
.fi-loop:before,
.fi-magnifying-glass:before,
.fi-mail:before,
.fi-male-female:before,
.fi-male-symbol:before,
.fi-male:before,
.fi-map:before,
.fi-marker:before,
.fi-megaphone:before,
.fi-microphone:before,
.fi-minus-circle:before,
.fi-minus:before,
.fi-mobile-signal:before,
.fi-mobile:before,
.fi-monitor:before,
.fi-mountains:before,
.fi-music:before,
.fi-next:before,
.fi-no-dogs:before,
.fi-no-smoking:before,
.fi-page-add:before,
.fi-page-copy:before,
.fi-page-csv:before,
.fi-page-delete:before,
.fi-page-doc:before,
.fi-page-edit:before,
.fi-page-export-csv:before,
.fi-page-export-doc:before,
.fi-page-export-pdf:before,
.fi-page-export:before,
.fi-page-filled:before,
.fi-page-multiple:before,
.fi-page-pdf:before,
.fi-page-remove:before,
.fi-page-search:before,
.fi-page:before,
.fi-paint-bucket:before,
.fi-paperclip:before,
.fi-pause:before,
.fi-paw:before,
.fi-paypal:before,
.fi-pencil:before,
.fi-photo:before,
.fi-play-circle:before,
.fi-play-video:before,
.fi-play:before,
.fi-plus:before,
.fi-pound:before,
.fi-power:before,
.fi-previous:before,
.fi-price-tag:before,
.fi-pricetag-multiple:before,
.fi-print:before,
.fi-prohibited:before,
.fi-projection-screen:before,
.fi-puzzle:before,
.fi-quote:before,
.fi-record:before,
.fi-refresh:before,
.fi-results-demographics:before,
.fi-results:before,
.fi-rewind-ten:before,
.fi-rewind:before,
.fi-rss:before,
.fi-safety-cone:before,
.fi-save:before,
.fi-share:before,
.fi-sheriff-badge:before,
.fi-shield:before,
.fi-shopping-bag:before,
.fi-shopping-cart:before,
.fi-shuffle:before,
.fi-skull:before,
.fi-social-500px:before,
.fi-social-adobe:before,
.fi-social-amazon:before,
.fi-social-android:before,
.fi-social-apple:before,
.fi-social-behance:before,
.fi-social-bing:before,
.fi-social-blogger:before,
.fi-social-delicious:before,
.fi-social-designer-news:before,
.fi-social-deviant-art:before,
.fi-social-digg:before,
.fi-social-dribbble:before,
.fi-social-drive:before,
.fi-social-dropbox:before,
.fi-social-evernote:before,
.fi-social-facebook:before,
.fi-social-flickr:before,
.fi-social-forrst:before,
.fi-social-foursquare:before,
.fi-social-game-center:before,
.fi-social-github:before,
.fi-social-google-plus:before,
.fi-social-hacker-news:before,
.fi-social-hi5:before,
.fi-social-instagram:before,
.fi-social-joomla:before,
.fi-social-lastfm:before,
.fi-social-linkedin:before,
.fi-social-medium:before,
.fi-social-myspace:before,
.fi-social-orkut:before,
.fi-social-path:before,
.fi-social-picasa:before,
.fi-social-pinterest:before,
.fi-social-rdio:before,
.fi-social-reddit:before,
.fi-social-skillshare:before,
.fi-social-skype:before,
.fi-social-smashing-mag:before,
.fi-social-snapchat:before,
.fi-social-spotify:before,
.fi-social-squidoo:before,
.fi-social-stack-overflow:before,
.fi-social-steam:before,
.fi-social-stumbleupon:before,
.fi-social-treehouse:before,
.fi-social-tumblr:before,
.fi-social-twitter:before,
.fi-social-vimeo:before,
.fi-social-windows:before,
.fi-social-xbox:before,
.fi-social-yahoo:before,
.fi-social-yelp:before,
.fi-social-youtube:before,
.fi-social-zerply:before,
.fi-social-zurb:before,
.fi-sound:before,
.fi-star:before,
.fi-stop:before,
.fi-strikethrough:before,
.fi-subscript:before,
.fi-superscript:before,
.fi-tablet-landscape:before,
.fi-tablet-portrait:before,
.fi-target-two:before,
.fi-target:before,
.fi-telephone-accessible:before,
.fi-telephone:before,
.fi-text-color:before,
.fi-thumbnails:before,
.fi-ticket:before,
.fi-torso-business:before,
.fi-torso-female:before,
.fi-torso:before,
.fi-torsos-all-female:before,
.fi-torsos-all:before,
.fi-torsos-female-male:before,
.fi-torsos-male-female:before,
.fi-torsos:before,
.fi-trash:before,
.fi-trees:before,
.fi-trophy:before,
.fi-underline:before,
.fi-universal-access:before,
.fi-unlink:before,
.fi-unlock:before,
.fi-upload-cloud:before,
.fi-upload:before,
.fi-usb:before,
.fi-video:before,
.fi-volume-none:before,
.fi-volume-strike:before,
.fi-volume:before,
.fi-web:before,
.fi-wheelchair:before,
.fi-widget:before,
.fi-wrench:before,
.fi-x-circle:before,
.fi-x:before,
.fi-yen:before,
.fi-zoom-in:before,
.fi-zoom-out:before {
  font-family: "foundation-icons";
  font-style: normal;
  font-weight: normal;
  font-variant: normal;
  text-transform: none;
  line-height: 1;
  -webkit-font-smoothing: antialiased;
  display: inline-block;
  text-decoration: inherit;
  margin-right: 5px;
}

.fi-address-book:before { content: "\f100"; }
.fi-alert:before { content: "\f101"; }
.fi-align-center:before { content: "\f102"; }
.fi-align-justify:before { content: "\f103"; }
.fi-align-left:before { content: "\f104"; }
.fi-align-right:before { content: "\f105"; }
.fi-anchor:before { content: "\f106"; }
.fi-annotate:before { content: "\f107"; }
.fi-archive:before { content: "\f108"; }
.fi-arrow-down:before { content: "\f109"; }
.fi-arrow-left:before { content: "\f10a"; }
.fi-arrow-right:before { content: "\f10b"; }
.fi-arrow-up:before { content: "\f10c"; }
.fi-arrows-compress:before { content: "\f10d"; }
.fi-arrows-expand:before { content: "\f10e"; }
.fi-arrows-in:before { content: "\f10f"; }
.fi-arrows-out:before { content: "\f110"; }
.fi-asl:before { content: "\f111"; }
.fi-asterisk:before { content: "\f112"; }
.fi-at-sign:before { content: "\f113"; }
.fi-background-color:before { content: "\f114"; }
.fi-battery-empty:before { content: "\f115"; }
.fi-battery-full:before { content: "\f116"; }
.fi-battery-half:before { content: "\f117"; }
.fi-bitcoin-circle:before { content: "\f118"; }
.fi-bitcoin:before { content: "\f119"; }
.fi-blind:before { content: "\f11a"; }
.fi-bluetooth:before { content: "\f11b"; }
.fi-bold:before { content: "\f11c"; }
.fi-book-bookmark:before { content: "\f11d"; }
.fi-book:before { content: "\f11e"; }
.fi-bookmark:before { content: "\f11f"; }
.fi-braille:before { content: "\f120"; }
.fi-burst-new:before { content: "\f121"; }
.fi-burst-sale:before { content: "\f122"; }
.fi-burst:before { content: "\f123"; }
.fi-calendar:before { content: "\f124"; }
.fi-camera:before { content: "\f125"; }
.fi-check:before { content: "\f126"; }
.fi-checkbox:before { content: "\f127"; }
.fi-clipboard-notes:before { content: "\f128"; }
.fi-clipboard-pencil:before { content: "\f129"; }
.fi-clipboard:before { content: "\f12a"; }
.fi-clock:before { content: "\f12b"; }
.fi-closed-caption:before { content: "\f12c"; }
.fi-cloud:before { content: "\f12d"; }
.fi-comment-minus:before { content: "\f12e"; }
.fi-comment-quotes:before { content: "\f12f"; }
.fi-comment-video:before { content: "\f130"; }
.fi-comment:before { content: "\f131"; }
.fi-comments:before { content: "\f132"; }
.fi-compass:before { content: "\f133"; }
.fi-contrast:before { content: "\f134"; }
.fi-credit-card:before { content: "\f135"; }
.fi-crop:before { content: "\f136"; }
.fi-crown:before { content: "\f137"; }
.fi-css3:before { content: "\f138"; }
.fi-database:before { content: "\f139"; }
.fi-die-five:before { content: "\f13a"; }
.fi-die-four:before { content: "\f13b"; }
.fi-die-one:before { content: "\f13c"; }
.fi-die-six:before { content: "\f13d"; }
.fi-die-three:before { content: "\f13e"; }
.fi-die-two:before { content: "\f13f"; }
.fi-dislike:before { content: "\f140"; }
.fi-dollar-bill:before { content: "\f141"; }
.fi-dollar:before { content: "\f142"; }
.fi-download:before { content: "\f143"; }
.fi-eject:before { content: "\f144"; }
.fi-elevator:before { content: "\f145"; }
.fi-euro:before { content: "\f146"; }
.fi-eye:before { content: "\f147"; }
.fi-fast-forward:before { content: "\f148"; }
.fi-female-symbol:before { content: "\f149"; }
.fi-female:before { content: "\f14a"; }
.fi-filter:before { content: "\f14b"; }
.fi-first-aid:before { content: "\f14c"; }
.fi-flag:before { content: "\f14d"; }
.fi-folder-add:before { content: "\f14e"; }
.fi-folder-lock:before { content: "\f14f"; }
.fi-folder:before { content: "\f150"; }
.fi-foot:before { content: "\f151"; }
.fi-foundation:before { content: "\f152"; }
.fi-graph-bar:before { content: "\f153"; }
.fi-graph-horizontal:before { content: "\f154"; }
.fi-graph-pie:before { content: "\f155"; }
.fi-graph-trend:before { content: "\f156"; }
.fi-guide-dog:before { content: "\f157"; }
.fi-hearing-aid:before { content: "\f158"; }
.fi-heart:before { content: "\f159"; }
.fi-home:before { content: "\f15a"; }
.fi-html5:before { content: "\f15b"; }
.fi-indent-less:before { content: "\f15c"; }
.fi-indent-more:before { content: "\f15d"; }
.fi-info:before { content: "\f15e"; }
.fi-italic:before { content: "\f15f"; }
.fi-key:before { content: "\f160"; }
.fi-laptop:before { content: "\f161"; }
.fi-layout:before { content: "\f162"; }
.fi-lightbulb:before { content: "\f163"; }
.fi-like:before { content: "\f164"; }
.fi-link:before { content: "\f165"; }
.fi-list-bullet:before { content: "\f166"; }
.fi-list-number:before { content: "\f167"; }
.fi-list-thumbnails:before { content: "\f168"; }
.fi-list:before { content: "\f169"; }
.fi-lock:before { content: "\f16a"; }
.fi-loop:before { content: "\f16b"; }
.fi-magnifying-glass:before { content: "\f16c"; }
.fi-mail:before { content: "\f16d"; }
.fi-male-female:before { content: "\f16e"; }
.fi-male-symbol:before { content: "\f16f"; }
.fi-male:before { content: "\f170"; }
.fi-map:before { content: "\f171"; }
.fi-marker:before { content: "\f172"; }
.fi-megaphone:before { content: "\f173"; }
.fi-microphone:before { content: "\f174"; }
.fi-minus-circle:before { content: "\f175"; }
.fi-minus:before { content: "\f176"; }
.fi-mobile-signal:before { content: "\f177"; }
.fi-mobile:before { content: "\f178"; }
.fi-monitor:before { content: "\f179"; }
.fi-mountains:before { content: "\f17a"; }
.fi-music:before { content: "\f17b"; }
.fi-next:before { content: "\f17c"; }
.fi-no-dogs:before { content: "\f17d"; }
.fi-no-smoking:before { content: "\f17e"; }
.fi-page-add:before { content: "\f17f"; }
.fi-page-copy:before { content: "\f180"; }
.fi-page-csv:before { content: "\f181"; }
.fi-page-delete:before { content: "\f182"; }
.fi-page-doc:before { content: "\f183"; }
.fi-page-edit:before { content: "\f184"; }
.fi-page-export-csv:before { content: "\f185"; }
.fi-page-export-doc:before { content: "\f186"; }
.fi-page-export-pdf:before { content: "\f187"; }
.fi-page-export:before { content: "\f188"; }
.fi-page-filled:before { content: "\f189"; }
.fi-page-multiple:before { content: "\f18a"; }
.fi-page-pdf:before { content: "\f18b"; }
.fi-page-remove:before { content: "\f18c"; }
.fi-page-search:before { content: "\f18d"; }
.fi-page:before { content: "\f18e"; }
.fi-paint-bucket:before { content: "\f18f"; }
.fi-paperclip:before { content: "\f190"; }
.fi-pause:before { content: "\f191"; }
.fi-paw:before { content: "\f192"; }
.fi-paypal:before { content: "\f193"; }
.fi-pencil:before { content: "\f194"; }
.fi-photo:before { content: "\f195"; }
.fi-play-circle:before { content: "\f196"; }
.fi-play-video:before { content: "\f197"; }
.fi-play:before { content: "\f198"; }
.fi-plus:before { content: "\f199"; }
.fi-pound:before { content: "\f19a"; }
.fi-power:before { content: "\f19b"; }
.fi-previous:before { content: "\f19c"; }
.fi-price-tag:before { content: "\f19d"; }
.fi-pricetag-multiple:before { content: "\f19e"; }
.fi-print:before { content: "\f19f"; }
.fi-prohibited:before { content: "\f1a0"; }
.fi-projection-screen:before { content: "\f1a1"; }
.fi-puzzle:before { content: "\f1a2"; }
.fi-quote:before { content: "\f1a3"; }
.fi-record:before { content: "\f1a4"; }
.fi-refresh:before { content: "\f1a5"; }
.fi-results-demographics:before { content: "\f1a6"; }
.fi-results:before { content: "\f1a7"; }
.fi-rewind-ten:before { content: "\f1a8"; }
.fi-rewind:before { content: "\f1a9"; }
.fi-rss:before { content: "\f1aa"; }
.fi-safety-cone:before { content: "\f1ab"; }
.fi-save:before { content: "\f1ac"; }
.fi-share:before { content: "\f1ad"; }
.fi-sheriff-badge:before { content: "\f1ae"; }
.fi-shield:before { content: "\f1af"; }
.fi-shopping-bag:before { content: "\f1b0"; }
.fi-shopping-cart:before { content: "\f1b1"; }
.fi-shuffle:before { content: "\f1b2"; }
.fi-skull:before { content: "\f1b3"; }
.fi-social-500px:before { content: "\f1b4"; }
.fi-social-adobe:before { content: "\f1b5"; }
.fi-social-amazon:before { content: "\f1b6"; }
.fi-social-android:before { content: "\f1b7"; }
.fi-social-apple:before { content: "\f1b8"; }
.fi-social-behance:before { content: "\f1b9"; }
.fi-social-bing:before { content: "\f1ba"; }
.fi-social-blogger:before { content: "\f1bb"; }
.fi-social-delicious:before { content: "\f1bc"; }
.fi-social-designer-news:before { content: "\f1bd"; }
.fi-social-deviant-art:before { content: "\f1be"; }
.fi-social-digg:before { content: "\f1bf"; }
.fi-social-dribbble:before { content: "\f1c0"; }
.fi-social-drive:before { content: "\f1c1"; }
.fi-social-dropbox:before { content: "\f1c2"; }
.fi-social-evernote:before { content: "\f1c3"; }
.fi-social-facebook:before { content: "\f1c4"; }
.fi-social-flickr:before { content: "\f1c5"; }
.fi-social-forrst:before { content: "\f1c6"; }
.fi-social-foursquare:before { content: "\f1c7"; }
.fi-social-game-center:before { content: "\f1c8"; }
.fi-social-github:before { content: "\f1c9"; }
.fi-social-google-plus:before { content: "\f1ca"; }
.fi-social-hacker-news:before { content: "\f1cb"; }
.fi-social-hi5:before { content: "\f1cc"; }
.fi-social-instagram:before { content: "\f1cd"; }
.fi-social-joomla:before { content: "\f1ce"; }
.fi-social-lastfm:before { content: "\f1cf"; }
.fi-social-linkedin:before { content: "\f1d0"; }
.fi-social-medium:before { content: "\f1d1"; }
.fi-social-myspace:before { content: "\f1d2"; }
.fi-social-orkut:before { content: "\f1d3"; }
.fi-social-path:before { content: "\f1d4"; }
.fi-social-picasa:before { content: "\f1d5"; }
.fi-social-pinterest:before { content: "\f1d6"; }
.fi-social-rdio:before { content: "\f1d7"; }
.fi-social-reddit:before { content: "\f1d8"; }
.fi-social-skillshare:before { content: "\f1d9"; }
.fi-social-skype:before { content: "\f1da"; }
.fi-social-smashing-mag:before { content: "\f1db"; }
.fi-social-snapchat:before { content: "\f1dc"; }
.fi-social-spotify:before { content: "\f1dd"; }
.fi-social-squidoo:before { content: "\f1de"; }
.fi-social-stack-overflow:before { content: "\f1df"; }
.fi-social-steam:before { content: "\f1e0"; }
.fi-social-stumbleupon:before { content: "\f1e1"; }
.fi-social-treehouse:before { content: "\f1e2"; }
.fi-social-tumblr:before { content: "\f1e3"; }
.fi-social-twitter:before { content: "\f1e4"; }
.fi-social-vimeo:before { content: "\f1e5"; }
.fi-social-windows:before { content: "\f1e6"; }
.fi-social-xbox:before { content: "\f1e7"; }
.fi-social-yahoo:before { content: "\f1e8"; }
.fi-social-yelp:before { content: "\f1e9"; }
.fi-social-youtube:before { content: "\f1ea"; }
.fi-social-zerply:before { content: "\f1eb"; }
.fi-social-zurb:before { content: "\f1ec"; }
.fi-sound:before { content: "\f1ed"; }
.fi-star:before { content: "\f1ee"; }
.fi-stop:before { content: "\f1ef"; }
.fi-strikethrough:before { content: "\f1f0"; }
.fi-subscript:before { content: "\f1f1"; }
.fi-superscript:before { content: "\f1f2"; }
.fi-tablet-landscape:before { content: "\f1f3"; }
.fi-tablet-portrait:before { content: "\f1f4"; }
.fi-target-two:before { content: "\f1f5"; }
.fi-target:before { content: "\f1f6"; }
.fi-telephone-accessible:before { content: "\f1f7"; }
.fi-telephone:before { content: "\f1f8"; }
.fi-text-color:before { content: "\f1f9"; }
.fi-thumbnails:before { content: "\f1fa"; }
.fi-ticket:before { content: "\f1fb"; }
.fi-torso-business:before { content: "\f1fc"; }
.fi-torso-female:before { content: "\f1fd"; }
.fi-torso:before { content: "\f1fe"; }
.fi-torsos-all-female:before { content: "\f1ff"; }
.fi-torsos-all:before { content: "\f200"; }
.fi-torsos-female-male:before { content: "\f201"; }
.fi-torsos-male-female:before { content: "\f202"; }
.fi-torsos:before { content: "\f203"; }
.fi-trash:before { content: "\f204"; }
.fi-trees:before { content: "\f205"; }
.fi-trophy:before { content: "\f206"; }
.fi-underline:before { content: "\f207"; }
.fi-universal-access:before { content: "\f208"; }
.fi-unlink:before { content: "\f209"; }
.fi-unlock:before { content: "\f20a"; }
.fi-upload-cloud:before { content: "\f20b"; }
.fi-upload:before { content: "\f20c"; }
.fi-usb:before { content: "\f20d"; }
.fi-video:before { content: "\f20e"; }
.fi-volume-none:before { content: "\f20f"; }
.fi-volume-strike:before { content: "\f210"; }
.fi-volume:before { content: "\f211"; }
.fi-web:before { content: "\f212"; }
.fi-wheelchair:before { content: "\f213"; }
.fi-widget:before { content: "\f214"; }
.fi-wrench:before { content: "\f215"; }
.fi-x-circle:before { content: "\f216"; }
.fi-x:before { content: "\f217"; }
.fi-yen:before { content: "\f218"; }
.fi-zoom-in:before { content: "\f219"; }
.fi-zoom-out:before { content: "\f21a"; }

#available_integrations{
  .item_list{
    display: flex;
    flex-direction: row;
    flex-wrap: wrap;
    justify-content: flex-start;
    align-items: stretch;
    gap: 10px;
    .item{
      width: 220px;
      border: 1px solid black;
      border-radius: 20px;
      padding: 20px;
      margin: 20px;
      display: flex;
      flex-direction: column;
      flex-wrap: nowrap;
      justify-content: space-between;
      background-color: #eee;
      .image{
        max-width: 200px;
        max-height: 200px;
        margin: 0 auto 0 auto;
        img{
          width: 100%;
          border-radius: 10px;
        }
      }
      .title{
        font-weight: bold;
        font-size: 1.4em;
        text-align: center;
        margin: 10px 0 10px 0;
      }
      .description{
        font-style: italic;
        font-size: .9em;
      }
      .action{
        margin-top: 10px;
        margin-bottom: 10px;
        text-align: center;
      }
    }
  }
}
/*Dark Theme*/
body.theme-dark{
  #available_integrations{
    .item_list{
      .item{
        background-color: #333;
      }
    }
  }
}

/*Login*/
.credentials_box,.credentials_box_wide,.credentials_box_select_a_size{
  border: 5px solid;
  border-color: #911CE7 #5E55C9 #5E55C9 #911CE7;
  border-radius: 20px;
  margin: 40px auto;
  padding: 10px 20px;
  box-shadow: 8px 12px 20px 0px rgba(0, 0, 0, 0.2);
  .geniuses{
    img{
      width: 100%;
    }
  }
}
.credentials_box{
  max-width: 400px;
  width: 80%;
}
.credentials_box_wide{
  max-width: 600px;
  width: 80%;
}

table.prompt_log{
  width: 100%;
  border-collapse: collapse;
  tr{
    border: solid 1px #888;
    td{
      vertical-align: top;
      word-wrap: break-word;
      white-space: normal;
    }
    td.role{
      font-weight: bold;
      padding-right: 20px;
    }
    td.content{
      font-style: italic;
      div.title{
        font-weight: bold;
        text-decoration: underline;
      }
    }
  }
}
.conversation_display{
  .line{
    .box{
      width: fit-content;
      block-size: fit-content;
      padding: 10px;
      max-width: 80%;
      margin-bottom: 15px;
    }
    .agent{
      border-radius: 20px 40px 0 40px;
      float: left;
      border: 1px solid #911CE7;
      background-color: transparent;
      background-image: linear-gradient(330deg, rgba(240,240,240,0.2) 20%, rgba(100,100,100,0.2) 100%);
      color: black;

      code{
        color: brown;
        padding-left: 20px;
        display: block;
        font-family: 'Courier New', Courier, monospace;
        white-space: pre-wrap;
      }
    }
    .user{
      border-radius: 40px 20px 40px 0;
      float: right;
      text-align: right;
      border: 1px solid #5E55C9;
      background-color: transparent;
      background-image: linear-gradient(30deg, rgba(240,240,240,0.2) 20%, rgba(100,100,100,0.2) 100%);
      color: blue;
    }
    .other,.tool,.tool_response,.error{
      float: left;
      margin-left: 80px;
      border-radius: 0;
      background-color: transparent;
      background-image: linear-gradient(30deg, rgba(240,240,240,0.2) 20%, rgba(100,100,100,0.2) 100%);
    }
    .other{
      color: green;
    }
    .tool{
      color: green;
      border-radius: 0 20px 20px 0;
      border: 1px solid green;
      border-left: 10px solid green;
    }
    .tool_response{
      color: purple;
      border-radius: 0 20px 20px 0;
      border: 1px solid purple;
      border-left: 20px solid purple;
    }
    .error{
      color: red;
    }
    .date{
      font-weight: bold;
      text-decoration: underline;
      margin-bottom: 0;
      padding-bottom: 0;
      padding-left: 0;
    }
  }
}

/*Dark Theme*/

.theme-dark{
  .line{
    .agent{
      color: #aaa;
    }
    .user{
      color: #aaa;
    }
  }
}

#conversation_tester .inner_box .content{
  background-color: transparent;
  background-image: linear-gradient(135deg, rgba(240,240,240,0.5) 30%, rgba(120,120,120,0.5) 100% );
}

.descriptions{
  display: flex;
  flex-flow: row wrap;
  box-sizing: border-box;
  .box{
    flex: 0 0 auto;
    width: 32%;
    min-width: 300px;
    height: 260px;
    margin: 5px;
    border-width: 2px;
    border-style: solid;
    border-radius: 20px;
    box-sizing: border-box;
    padding: 5px;
    .title {
      text-align: center;
      font-size: 1.2em;
      font-weight: bold;
    }
    .image {
      height: 100px;
      width: 100px;
      border: 1px solid black;
      margin: 0 auto 0 auto;

      img {
        height: 100px;
        width: 100px;
      }
    }
    .description {
      text-align: center;
      font-size: .9em;
    }
    .box.blue {
      border-color: #5E55C9;
      box-shadow: 5px 5px 5px 0 rgba(73, 121, 216, 0.5);

      .title {
        color: #5E55C9;
      }
    }
    .box.bluegreen {
      border-color: #00D6C9;
      box-shadow: 5px 5px 5px 0 rgba(0, 214, 201, 0.5);
      .title {
        color: #00D6C9;
      }
    }
    .box.purple {
      border-color: #911;
      box-shadow: 5px 5px 5px 0 rgba(145, 28, 231, 0.5);
      .title {
        color: #911;
      }
    }
    .buttons {
      text-align: center;
    }
    .popup{
      position: absolute;
      display: none;
      backdrop-filter: blur(10px);

      .popup_box {
        width: calc(100% - 100px);
        margin: 50px 50px 0 50px;
        border: 2px solid black;
        border-radius: 20px;
        background-color: white;
        padding: 5px;
        display: flex;
        flex-flow: row wrap;
        gap: 10px;
        align-content: flex-start;

        .popup_image {
          flex: 0 0 auto;
          width: 200px;

          img {
            width: 200px;
          }

          .caption {
            font-size: .7em;
            font-style: italic;
            margin: 0 5px 5px 5px;
            text-align: center;
          }
        }

        .popup_messaging {
          flex: 1 1 200px;
        }
      }

      .close_box {
        text-align: right;
        margin-left: auto;
        margin-right: 50px;
        width: 80px;
        cursor: pointer;
      }
    }
  }
}
/*Theme Support*/
.theme-dark{
  .descriptions {
    .box {
      .popup {
        .popup_box {
          background-color: #333;
        }
      }
    }
  }
}


























































.productgenius-window{
    background-color: #fff;
    width: 100%;
    height: 100%;
    margin: 0;
    padding: 0;
    display: flex;
    flex-flow: column nowrap;
    justify-content: flex-start;
}

#pgwidget-main{
    position: fixed;
    z-index: 10002;
    top: 10%;
    bottom: 10%;
    left: 25%;
    right: 25%;
    width: auto;
    height: auto;
    border: 1px solid #000;
    border-radius: 15px;
    box-shadow: 15px 15px 12px -11px rgba(0,0,0,0.75);
    overflow: hidden;
    .dialog_fill{
        .dialog-top{
            .title{
                font-size: 3vw
            }
        }
    }
    #pgwidget-closebox{
        cursor: pointer;
        position: absolute;
        right: 10px;
        top: 10px;
        text-align: right;
        background-color: #ccc;
        color: #333;
        width: 20px;
        height: 20px;
        border-radius: 50%;
        text-align: center;
    }
}

#pgwidget-icon{
    display: none;
    z-index: 10000;
    position: fixed;
    right: 20px;
    bottom: 20px;
    width: 50px;
    height: 50px;
    line-height: 30px;
    text-align: center;
    border-radius: 10px;
    border: 0;
    overflow: hidden;
    cursor: pointer;

    img{
        width: 50px;
        height: 50px;
    }
}



#pgwidget-overlay{
    z-index: 10001;
    position: fixed;
    top: 0px;
    bottom: 0px;
    left: 0px;
    right: 0px;
    opacity: 0.3;
    background-color: #000;
}

.site_banner{
    flex: 0 0 auto;
    background-color: blue;
    margin: 0;
    padding: 5px;
    .title{
        font-family: 'Arial Narrow', sans-serif;
        font-weight: bold;
        text-transform: uppercase;
        color: white;
        text-align: center;
        font-size: 2.5em;
    }
}
.site_body{
    flex: 1 1 auto;
    padding: 5px;
    display: flex;
    flex-flow: column nowrap;
    justify-content: flex-start;
    overflow-y: auto;
}
.conversation{
    flex: 1 1 auto;
    padding: 0 5px 0 5px;
    .agent{
        font-family: 'Arial', sans-serif;
        font-size: 1.5em;
        margin-bottom: 10px;
    }
    .user{
        font-family: 'Arial', sans-serif;
        font-size: 1.5em;
        font-style: italic;
        text-align: right;
        color: #aaa;
        margin-bottom: 10px;
        padding-left: 20%;
    }
    .datetime{
        font-size: .7em;
        font-style: italic;
    }
    .relatedcontent{
        .title{
            font-weight: bold;
            text-decoration: underline;
            font-size: .8em;
            margin-top: 10px;
        }
        ul{
            font-size: .8em;
            margin-top: 0;
            li{

            }
        }
    }
    .tools_used{
        font-size: .5em;
        font-style: italic;
        color: #888;
    }
    .spinner{
        width: 16px;
        height: 16px;
        margin: 0;
        border: 5px solid rgba(0, 0, 0, .1);
        border-top-color: #000;
        border-radius: 50%;
        animation: spin 1s linear infinite;
    }
}
.site_enterform{
    flex: 0 0 auto;
    width: 100%;
    position: relative;
    .instructions{
        font-size:.7em;
        font-style:italic;
        text-align:center;
    }
    .text_holding{
        textarea.message{
            background-color: #F2F2F2;
            padding: 10px;
            margin: 5px 5px 5px 5px;
            height: 100px;
            width: calc(100% - 35px);
            border-radius: 20px;
            border: 0px;
            font-size: 1.5em;
            font-family: 'Arial', sans-serif;
        }
    }
    .send_message_icon{
        position: absolute;
        bottom: 0;
        right: 0;
        width: 80px;
        height: 80px;
        z-index: 1000;
        cursor: pointer;
    }
}
.location{
    flex: 1 1 auto;
    padding: 0 5px 0 5px;
    .error_status{
        color: red;
        text-style: italic;
    }
    .text_enter_field{
        .search_box_label{
            font-size: 1.5em;
        }
        .search_box_div{
            input{
                font-size: 1.2em;
            }
            .showLocation{
                font-size: .8em;
                font-style: italic;
            }
        }
    }
    h2{
    }
    ul{
        li{
            font-size:1.5em;
            cursor: pointer;
            padding-bottom: 20px;
        }
    }
    .location_allow_location{
        .location_allow_location_buttons{
            button{
                border-radius: 20px;
                display: inline-block;
                padding: 5px 20px;
                margin: 10px 20px 20px 20px;
                font-size: 16px;
            }
            button:hover{
                filter: brightness(120%);
            }
        }
    }
}

.site_footer{
    flex: 0 0 auto;
    padding: 5px;
    div{
        color: #aaa;
    }
    .copyright{
        a{
            text-decoration: none;
            color: #aaa;
        }
        a:hover{
            color: blue;
        }
    }
}
@keyframes spin {
    to { transform: rotate(360deg); }
}

body{
    color: #222;
    background-color: #fff;
}
body.theme-dark{
    color: #eee;
    background-color: #121212;
}
.react_loader{
    text-align:center;
    font-style: italic;
    color: #aaa;
}
.react_base{
    text-align: left;
}
.theme-dark{
    .react_loader{
        color: #333;
    }
}

.site_app_agent{
    background-color: #fff;
    width: 100%;
    height: 100%;
    margin: 0;
    padding: 0;
    position: absolute;
    top: 0;
    left: 0;
    display: flex;
    flex-flow: column nowrap;
    justify-content: flex-start;
}

.devteststaging_review{
  border: 2px solid blue;
  box-shadow: 8px 12px 20px 0px rgba(255, 0, 255, 0.3);
  border-radius: 20px;
  margin: 0 40px 20px 40px;
  padding: 20px;
  background-color: rgba(0,0,255,0.2);
}
.devteststaging_review .title{
  text-align: center;
  font-size: 30px;
  font-weight: bold;
  background-color: transparent;
  background-image: linear-gradient(90deg, #00D6C9 0%, #911CE7 60%);
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
}

.widget{
    border: 2px solid #a1a1a1;
    color: #222;
    background-color: #fff;
    border-radius: 20px;
    box-shadow: 8px 12px 20px 0px rgba(0, 0, 0, 0.2);
    margin: 0 40px 40px 40px;
    padding: 30px;
    overflow: hidden;
    h2{
        text-align: center;
    }
    .loading{
        font-style:italic;
    }
    .error{
        font-style:italic;
        color: red;
    }
    .centered{
        text-align: center;
    }
}

.theme-dark{
    .widget{
        color: #eee;
        background-color: #444;
    }
}

.alert_widget{
    .recent_alerts{
        table{
            td.date{
                white-space: nowrap;
                vertical-align: top;
                font-size: .8em;
            }
            td.contact{
                vertical-align: top;
                font-size: .8em;
            }
            td.message{
                vertical-align: top;
                font-size: .8em;
                font-style: italic;
            }
            td.noalert{
                font-style: italic;
            }
        }
    }
    .view_all{
        text-align: center;
    }
    .edit_config_instructions{
        font-size: .8em;
        font-style: italic;
    }
}

.ama_widget{
    .note{
        font-style:italic;
        .label{
            font-weight:bold;
        }
    }
    .im_sorry{
        font-style: italic;
        .label{
            font-size: 1.25em;
            text-align: center;
            margin: 10px 0 10px 0;
        }
    }
    .example{
        margin: 0 20px 20px 20px;
        font-style:italic;
        border-left: 2px solid #888;
        padding-left: 5px;
        .label{
            font-weight:bold;
        }
    }
    .upgrade_message{
        text-align:center;
        margin: 30px 0;
        a{
            color: green;
        }
    }
}

.geniuslist_widget{
    .genius_list{
        border-top: 1px solid #888;
        border-left: 1px solid #888;
        border-right: 1px solid #888;
        .category{
            font-weight: bold;
            font-size: 1.1em;
            padding: 5px;
            .count{
                font-weight: normal;
                font-style: italic;
                font-size: .6em;
            }
        }
        .genius{
            border-bottom: 1px solid #888;
            .avatar_container{
                display: inline-block;
                width: 60px;
                img{
                    width: 50px;
                    height:50px;
                }
            }
            .genius_container{
                display: inline-block;
                width: calc(100% - 60px);
                vertical-align: top;
                .label{
                    font-weight: bold;
                }
                .name{
                    font-weight:bold;
                }
                .alerts{
                    .count{
                        font-size: .8em;
                        font-style: italic;
                    }
                    .alert_link{
                        padding-left: 5px;
                        font-size: .8em;
                    }
                }
            }
            .button_line{
                margin-top: 5px;
                margin-bottom: 5px;
                a{
                    margin-right: 10px;
                }
            }
        }
        .genius:hover{
            background-color: #ccc;
        }
        .category:hover{
            background-color: inherit;
        }
    }
    .manage{
        margin-top: 5px;
        margin-bottom: 5px;
        text-align:right;
        font-size:.8em;
    }
    .physical_stores{
        font-size:.8em;
        font-style:italic;
        text-align:center;
    }
    .order_signs{
        img{
            width:50px;
            height:50px;
            float:left;
            margin-left:20px;
            border-radius:10px;
        }
    }
}

.theme-dark{
    .geniuslist_widget{
        .genius:hover{
            background-color: #888;
        }
        .category:hover{
            background-color: inherit;
        }
    }
}

.summary_widget{
    .website_title{
        font-weight:bold;
        font-size: 1.2em;
    }
    .website_url{
        margin-left: 20px;
        font-style: italic;
    }
    .website_company_type{
        .label{
            font-weight: bold;
        }
    }
    .website_summary{
        font-style:italic;
        margin: 0 20px;
    }
    .website_summary_limited{
        height: 80px;
        overflow:hidden;
    }
    .website_summary_expander{
        font-size: .8em;
        font-style: italic;
        text-align: right;
        cursor: pointer;
        color: #5E55C9;
    }
    .website_summary_expander:hover{
        color: #911CE7;
    }
}

.training_widget{
    .attention_needed{
        font-size: 1.2em;
        font-style:italic;
        font-weight:bold;
        color: red;
        text-align: center;
    }
    .content_count{
        margin-top: 20px;
        margin-bottom: 20px;
        font-style: italic;
        text-align: center;
    }
}

.trainingpage{
    .training_instructions{
        margin: 0 0 20px 0;
        p{
        }
        ul{
            li{
            }
        }
    }
    .trainingpage_buttons{
        a{
            margin-right: 20px;
        }
    }
    .site_scanner_list{
        border: 1px solid #5E55C9;
        border-radius: 20px;
        padding: 10px;
        margin: 0 20px 10px 20px;
        box-shadow: 15px 15px 15px 0 rgba(0,0,0,0.5);
        overflow: auto;
        /*min-width: max-content;*/
        h4{
            color: #333;
        }
        .noscanners{
            font-style:italic;
        }
        table{
            tbody{
                td{
                    .table_url{
                        font-style:italic;
                        font-size:.7em;
                    }
                    .disabled{
                        font-style: italic;
                    }
                }
                td.scanner_buttons{
                    white-space: nowrap;
                    button.disabled{
                        opacity: 0.5;
                        cursor: not-allowed;
                    }
                }
            }
        }
        .button_list{
            text-align: center;
            margin-top: 20px;
        }
        .scanner_error{
            color: red;
            font-style: italic;
            font-size:.7em;
        }
        .scanner_status_message{
            color: green;
            font-style: italic;
            font-size:.7em;
        }
    }
    .trainingpage_contentlist{
        .pagination{
            margin: 20px 0;
        }
        .trainedcontentHeader{
            text-align: center;
            font-size: 2em;
        }
        .nocontent{
            font-style:italic;
            text-align: center;
        }
        .trainedcontentRowButtons{
            a.button{
                margin-right: 5px;
            }
        }
        table{
            tbody{
                tr{
                    td{
                        .titleLineURL{
                            font-style: italic;
                            font-size:.7em;
                        }
                    }
                }
            }
        }
    }
}
.theme-dark{
    .trainingpage{
        .site_scanner_list{
            border-color: #888;
            h4{
                color: #999;
            }
        }
    }
}