:root {
  --bg_color1: #0C5EF7;
  --bg_color1: brown;
  --bg_color2: green;
  --txt_color1: white;
}

body {
  font-family: "Trebuchet MS", Arial, Helvetica, sans-serif;
  font-size: 14px;
}

* {
    padding: 0;
    margin: 0;
}

/* .menu_bar */
.menu_bar {
  overflow-x: scroll;
  white-space:nowrap;
  -webkit-overflow-scrolling: touch;
  background-color:var(--color12);
  width:100%;
  display:flex;
}

/* .menu_bar */
.menu_bar a {
  float: left;
  font-size:  var(--fontSize12);
  color: white;
  text-align: center;
  padding: 14px 16px;
  text-decoration: none;
}

/* .menu_sub */
.menu_sub {
  float: left;

}

/* .menu_sub, .menu_sub_btn */
.menu_sub .menu_sub_btn {
  font-size:  var(--fontSize12);
  border: none;
  outline: none;
  color: white;
  padding: 14px 16px;
  background-color: var(--color12) !important;
  font-family: inherit;
  margin: 0;
}

/* .menu_bar, menu_sub .menu_sub_btn */
.menu_bar a:hover, .menu_sub:hover .menu_sub_btn {
      text-decoration: underline;
    background-color:var(--color36) !important;
}

/*menu_sub-content */
.menu_sub-content {
  display: none;
  position: absolute;
  left: 0;
  background-color:var(--color36) !important;
  width: 100%;
  z-index: 1;
}

/*menu_sub-content */
.menu_sub-content a {
  float: left;
  color: white;
  text-decoration: none;
}

/*menu_sub-content */
.menu_sub-content a:hover {
  text-decoration: underline;
}

/*menu_sub, menu_sub-content */
.menu_sub:hover .menu_sub-content {
  display: flex;
  overflow-x:scroll;
  white-space:nowrap;
  -webkit-overflow-scrolling: touch;
}
.menu_sub:active .menu_sub-content {
  display: flex;
  overflow-x:scroll;
  white-space:nowrap;
  -webkit-overflow-scrolling: touch;
}
.menu_sub-content-active{
    display: flex;
    position: absolute;
    white-space: nowrap;
}
.active{
      background-color: var(--color36) !important;
    text-decoration: underline !important;

}
 #mactive{
        background-color:var(--color36) !important;
          text-decoration: underline !important;
}
.smactive{
        background-color: var(--color36) !important;
          text-decoration: underline !important;
}
.page-heading
{
  margin-top: 100px;
  margin-left: 50px;
  color: var(--color34);
}
.input-outline-succes
{
  border: 1px solid green;
}
.input-outline-error
{
  border: 1px solid red;
}