:root{
  --backgroundcolor2: #1f55a4;
  --backgroundcolor: #f5f5f5;
  --fontcolor:white;
  --fontcolor2:#1f55a4;
  --backgroundlogin:#E1E9EC;
  --fontcolorlogin:black;
}

.customcolorbutton
{
  color:var(--fontcolor);
  background-color: var(--backgroundcolor2);
  padding:5px;
}

.customcolorbarra
{
  color:var(--fontcolor);
  background-color: var(--backgroundcolor2);
  padding: 3px 0px 3px 8px;
	-webkit-box-shadow: 4px 4px 5px 0px #7c7c7c;
	-moz-box-shadow:    4px 4px 5px 0px #7c7c7c;
	box-shadow:         4px 4px 5px 0px #7c7c7c;
  margin: 0 8.33%;

}

.custombordercolor
{
  border-color:var(--backgroundcolor2);
}

#box1 {
  width: 340px;
}

#box2 {
  width: 340px;
}

#containerHeaderMsg {
  margin-left: 15%;
}

#container {
  margin-left: 15%;
}

@media only screen and (max-width: 1150px) 
{
  #box1
  {
    width: 300px;
  }
}

@media only screen and (max-width: 1090px) 
{
  #box1
  {
    width: 260px;
  }
}

@media only screen and (max-width: 1035px) 
{
  #box1 {
    width:200px;
  }

  #box2 {
    width:260px;
  }
}

@media only screen and (max-width: 830px) 
{
  #box1{
    display:none;
  }
}

@media only screen and (max-width: 660px) 
{
  #box1{
    display:none;
  }

  #containerHeaderMsg
  {
    margin-left: 0px;
  }

  #container
  {
    margin-left: 0px;
    width: 500px;
    display: inline-flex;
  }
}