@font-face {
  font-family: BGFlame;
  src: url(../../../fonts/BGFlame/BGFlame-Regular.ttf);
}
@font-face {
  font-family: 'BGFlame';
  src: url(../../../fonts/BGFlame/BGFlame-Bold.ttf);
  font-weight:bold;
}
*{padding:0;margin:0;}
body{
    font-family: 'BGFlame', sans-serif;
    background: #fff;
    color: #000;
    position: initial;
    width: 100%;
    font-size: 100%;
    overflow:auto;
}

h1{font-weight: 400;font-size: 24px;}
h2{font-weight: 300;font-size: 20px;}
h3{font-weight: 300}
h1,h2,h3 {color:#000}
p{margin:2px;}
ol{margin:0.5em 2em}
button {font-family:inherit; margin: 3px;background: #2a96f3;color: white;border: none;padding: 6px;border-radius: 3px;font-size:small;cursor:pointer;}
button:disabled {background-color: #bdbdbd;color: gray;}
button i{margin-right:3px;}


.flex{display:flex;}
.middle{align-items:center}
.center{justify-content: center}

.header{color:white;height:3em;background-color: #3b5998; display:flex;align-items: center;}
.header button{    padding: 0.5em 1em;
    background-color: white;
    margin-left: 2em;
    border: none;
    border-radius: 4px;
}

.content{max-width:980px; margin-left:auto; margin-right:auto;padding:1em;}

section{
  padding:0.5em;
  background:#efefef;
  border-radius:6px;
  margin:6px 0;
}
ul{margin-left:2em;}

.light{background-color:#2190f8;}
.dark{background-color: #3b5998;}

.hide{display: none}

#exampleHeader{max-width:100%;max-height:50px;height:auto;}
#exampleFooter{max-width:100%;max-height:50px;height:auto;}

.icon{width:30px;height:30px;display: flex;align-items: center;justify-content: center;flex:none;}
.icon img{max-width:80%;height:auto;}
.label {padding-left:0.5em;}

 .eg{
  background: #2196f3;
    padding: 3px;
    color: white;
    margin-right: 3px;
    min-width:30px;
    min-height:30px;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 50%;
}
.eg.dark {
    background: #0e47a0;
}
.ui-help-field{
  margin-bottom: 0.3em;
  display: flex;
  align-items: center
}
.responsive {
    max-width: 100%;
    height: auto;
    display: block;
    margin: 0 auto;
}
  .warn{
      /*border: 1px solid #ee9022;*/
      background-color: #fefaf1;
      padding: 3px 8px;
      -webkit-border-radius: 4px;
      -moz-border-radius: 4px;
      border-radius: 4px;
      color: #ee9022;
      margin: 0.2em;
      flex:1;
      font-size:90%;
  }

  .hint{
    /*border: solid 1px green;*/
    background-color: rgb(221, 252, 221);
    padding: 3px 8px;
    -webkit-border-radius: 4px;
    -moz-border-radius: 4px;
    border-radius: 4px;
    color:green;
    margin:0.2em;
    flex:1;
    font-size:90%;
  }

.strip{
  background-color: #2190f8;
  color: white;
  padding: 0.5em 0
}

.button {
  background-color: white;
  margin: 0.5em 0.2em;
  padding: 0.5em;
  border-radius: 4px;
  color: #2190f8;
  min-width: 75px;
  text-align: center;
}
.button.inactive{
  background-color: silver;
  color: grey;
}
.checkbox{
    border: 2px solid white;
    width: 20px;
    height: 20px;
    border-radius: 5px;
}

.tip{
  background-color: whitesmoke;
  position: relative;
  top: 0;
  bottom: 0;
}

    .touch{
    transform: rotate(45deg);
    position: absolute;
    top: 7px;
    left: -15px;
    z-index: 10;
    height: 40px;
    }

    .border-all{border: 1px solid silver;}
    .border-right{border-right: 1px solid silver;}
    .border-bottom{border-bottom: 1px solid silver;}
    .border-left{border-left: 1px solid silver;}
    .border-top{border-top: 1px solid silver;}

    .listLabel{
      height: 3em;
      display: flex;
      align-items: center;
      flex:1;
      padding-left: 0.5em;
    }
    .listIcon{
      display: flex;
      align-items: center;
      justify-content: center;
      width:40px;
      height: 3em;
      }
    .listIcon img{height: 30px}

.trigger {
    cursor: pointer;
    background: #2190f8;
    color: white;
    display: flex;
    align-items: center;
    padding: 6px 10px;
    margin-bottom: 3px;
    border-radius: 6px;
    font-size: 120%;
    font-weight: 500;
    }
    .trigger img{height:28px;margin-right: 6px}

    h2.trigger {
    background: #2190f8;
    }



    h3.trigger {
    cursor: pointer;
    background: #f1f1f1;
    color: black;
    }


    .toggle-button{
      width: 0;
      height: 0;
      border-top: 9px solid transparent;
      border-left: 14px solid #7b7b7b;
      border-bottom: 9px solid transparent;
      margin-right: 5px;
      transform: rotate(0deg);
      transition: transform 0.5s linear;
    }
    h2 > .toggle-button{
      border-left: 14px solid white;
    }
    h3 > .toggle-button{
      border-left: 14px solid #7b7b7b;
    }

    .toggle-button.active{
      transform: rotate(90deg);
      transition: transform 0.5s linear;
    }


  /*--iPod Touch--*/
  @media only screen and (max-width : 220px){ 
  }

  @media only screen and (max-width : 470px){ 
  }
  /*--iPhone 6---*/
  @media only screen and (max-device-width : 375px){ 
    .trigger{font-size: 100%;font-weight: 500}
  }
  /*--GALAXY S6---*/
  @media only screen and (max-width : 360px){
    .scalable{font-size: 75%}
  }
  /*--iPhone 5--*/
  @media only screen and (max-width : 320px){ 
    body{font-size: 90%}
  }