body{
  margin:0px;
  font-family: "Calibri" !important;
  color:#123B61;
  line-height: 1.3;
}

.body{
  position: absolute;
  height:100%;
  width:100%;
}

.header{
  padding: 0px;
  margin: 0px;
  top:0px;
  left:0px;
  height:4em;
  width:100vw;
  background: #0B3A62;
  color: white;
  box-shadow: 0px 5px 5px grey;
}


.userSettingsBox{
  min-height:425px;
  min-width:600px;
  height:50%;
  width:50%;
  position:fixed;
  top:25%;
  left:25%;
  background:#EDEDED;
  box-shadow: 5px 5px 5px #565656;
}


@media screen and (max-width: 1300px) {
  .userSettingsBox{
    height:425px;
    width:600px;
    top:10px;
    left:10px;
  }
};

.logoutButton{
  right:0px;
  height: 50px;
  width: 50px;
}

.userList{
  position: fixed;
  right: 0em;
  height: 90%;
  margin-top: 20px;
  margin-left: 10%;
  width: 25em;
  min-width:10em;
  color:#123B61;
  background-color: #EDEDED;
  border: 1px solid #DADADA;
}

.noselect {
  -webkit-touch-callout: none; /* iOS Safari */
    -webkit-user-select: none; /* Safari */
     -khtml-user-select: none; /* Konqueror HTML */
       -moz-user-select: none; /* Firefox */
        -ms-user-select: none; /* Internet Explorer/Edge */
            user-select: none; /* Non-prefixed version, currently
                                  supported by Chrome and Opera */
}
a:link {
    color: white;
    background-color: transparent;
    text-decoration: none;
}

a:visited {
    color: white;
    background-color: transparent;
    text-decoration: none;
}

a:hover {
    color: white;
    background-color: transparent;
    text-decoration: underline;
}

a:active {
    color: white;
    background-color: transparent;
    text-decoration: underline;
}
.listElement{
  height: 10%;
  width: 100%;
  color:#123B61;
  border:0px;
  text-align: left;
  font-size: 110%;
  background-color: #EDEDED;
  border-bottom: 1px solid #DADADA;
  padding: 5px;
  outline: none;

}

.listButton{
  height: 25px;
  width: 90px;
  background-color: #0746A5;
  color: white;
  border: 1px solid #0746A5;
  border-radius: 50px;
  font-size: 16px;
}

.chatWindow{
  position: fixed;
  margin-top: 20px;
  height: 22em;
  bottom:0.1em;
  left:3em;
  width: 19em;
}

.serverList{
  position: fixed;
  padding: 0px;
  left: 20%;
  height: 90%;
  width: 55%;
  min-width:10em;
  margin:auto;
  margin-top: 20px;
  color:#123B61;
  background-color: #EDEDED;
  border: 1px solid #DCE1E7;
  overflow-y: scroll;
}

.serverContent{
  background-color: #EDEDED;
  border: 1px solid #DCE1E7;
}

.serverListButton{
  width: 100%;
  border: 0px;
  color:#123B61;
  text-align: left;
  font-size: 16px;
  font-family: "Calibri";
  font-weight:bold;
  outline: none;
  background: #fafafa; /* Old browsers */
  background: -moz-linear-gradient(top,  #fafafa 0%, #dcdcdc 100%); /* FF3.6-15 */
  background: -webkit-linear-gradient(top,  #fafafa 0%,#dcdcdc 100%); /* Chrome10-25,Safari5.1-6 */
  background: linear-gradient(to bottom,  #fafafa 0%,#dcdcdc 100%); /* W3C, IE10+, FF16+, Chrome26+, Opera12+, Safari7+ */
  filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#fafafa', endColorstr='#dcdcdc',GradientType=0 ); /* IE6-9 */
  margin-top: 3px;
}

.hover{
  -webkit-box-shadow:inset 1px 1px 30px 5px 30759b;
  -moz-box-shadow:inset 1px 1px 30px 5px 30759b;
  box-shadow:inset 1px 1px 30px 5px 30759b;
}

.dragging{
  border: 1px solid #DADADA;
  -ms-transform: rotate(-1.5deg); /* IE 9 */
  -webkit-transform: rotate(-1.5deg); /* Safari */
  transform: rotate(-1.5deg);
}

.blankedOut{
  background-color: #d7d7d7;
  padding-left: 500px;
  -webkit-box-shadow:inset 1px 1px 10px 2px #b1b1b1;
  -moz-box-shadow:inset 1px 1px 10px 2px #b1b1b1;
  box-shadow:inset 1px 1px 10px 2px #b1b1b1;

}

.controlBlock{
  border-bottom: 1px solid #DCE1E7;
}

.selectedServerBlock{
  height:100%;
  background: #EDEDED; /* Old browsers */
}

.serverListElement{
  height: 60px;
  min-width: 200px;
  border: 0px;
  text-align: left;
  outline: none;
  background: #EDEDED; /* Old browsers */
  color:#0B3A62;
  border: 0px;
  padding-top:0px;
  padding-bottom:0px;
}

.selectionBox{
  width: 150px;
  background: #779126;
  font-weight:bold;
  font-family: "Calibri";
  margin-top:10px;
}

.mainBackground{
  position: absolute;
  height:100%;
  width:100%;
  background: #EDEDED;
}

.formBox{
  position: absolute;
  height:30%;
  width: 30%;
  left:35%;
  top:30%;
  border: 1px solid rgb(200,200,200);
  border-radius: 10px;
  color:#EDEDED;
  background: #0B3A62;
  -webkit-transform:scale(1);
  -moz-transform:scale(1);
  -ms-transform:scale(1);
  transform:scale(1);
}

.loginBox{
  position: fixed;
  display: inline-block;
  height:18em;
  top: 0;
  bottom: 0;
  left: 0;
  right: 0;
  margin: auto;
  color:#EDEDED;
  background: transparent;
  -webkit-transform:scale(1);
  -moz-transform:scale(1);
  -ms-transform:scale(1);
  transform:scale(1);
}

.loginBox input{
  width:250px;
  height:40px;
}

.createBox{
  position: fixed;
  display: inline-block;

  height:28em;


  margin: auto;

  top: 0;
  left: 0;
  right: 0;
  bottom: 0;

  color:#EDEDED;
/*  -webkit-transform:scale(1);
  -moz-transform:scale(1);
  -ms-transform:scale(1);*/
  transform:scale(1);
}

.createBox input:not([type="button"]), select{
  width:250px;
  height:40px;

  margin-bottom:12px;

  border: 0px solid rgb(0,0,0);
  background-size: 22px;
  background-repeat: no-repeat;
  background-position:right 10px center;

  background-color: #1D1C1C;
  box-shadow: 0px 0px 7px 8px #171616 inset;
  font-family:'Segoe UI', sans-serif;
  font-weight:100;
  color:    #FFFFFF;
  font-size: 18px;
  padding-left: 10px;
  padding-right: 40px;


}

.centerContent{
  font-size: 16px;
  font-family: "Calibri";
  font-weight:bold;
  text-align: center;
  position: absolute;
  right: 10%;
  top: 0%;
  height: 100%;
  width: 80%;
}

.formContent{
  font-size: 16px;
  font-family: "Calibri";
  font-weight:bold;
  text-align: left;
  position: absolute;
  padding: 0px;
  left: 35%;
  top: 5%;
  width: 30%;
}

.formContent input{
  position: absolute;
  left: 50%;
}

.tel{
  /*position: static !important;
  width: 260px !important;*/
}

.flag-container{
  text-align: left;
  color:black;
  font: 13.3333px Arial;
}


.loginButton{
  vertical-align: center;
  border:0px solid #30759b; -webkit-border-radius: 0px; -moz-border-radius: 0px;border-radius: 0px;font-size:20px;font-family:'Segoe UI', sans-serif; padding: 0px 50px 0px 50px; font-weight:100; text-decoration:none; display:inline-block; color: #FFFFFF;
 background-color: #3fa7e0;
 box-shadow: 0px 0px 10px #30759b inset;
 height: 40px;
 width:250px;
}

.loginButton:hover:enabled{
 border:0px solid #30759b;
 background-color: #3fa7e0; background-image: -webkit-gradient(linear, left top, left bottom, from(#3fa7e0), to(#30759b));
 background-image: -webkit-linear-gradient(top, #3fa7e0, #30759b);
 background-image: -moz-linear-gradient(top, #3fa7e0, #30759b);
 background-image: -ms-linear-gradient(top, #3fa7e0, #30759b);
 background-image: -o-linear-gradient(top, #3fa7e0, #30759b);
 background-image: linear-gradient(to bottom, #3fa7e0, #30759b);filter:progid:DXImageTransform.Microsoft.gradient(GradientType=0,startColorstr=#3fa7e0, endColorstr=#30759b);
}

.loginButton:disabled{
  opacity: 0.3;
}
::-webkit-input-placeholder { /* WebKit, Blink, Edge */
  color:    #FFFFFF;
  font-family:'Segoe UI', sans-serif;
  font-size: 200;
  font-weight:100;
}
:-moz-placeholder { /* Mozilla Firefox 4 to 18 */
  color:    #FFFFFF;
  font-family:'Segoe UI', sans-serif;
  font-weight:100;
  font-size: 200;
  opacity:  1;
}
::-moz-placeholder { /* Mozilla Firefox 19+ */
 color:    #FFFFFF;
 font-family:'Segoe UI', sans-serif;
 font-weight:100;
 font-size: 200;
 opacity:  1;
}
:-ms-input-placeholder { /* Internet Explorer 10-11 */
 color:    #FFFFFF;
 font-family:'Segoe UI', sans-serif;
 font-weight:100;
 font-size: 200;
}
::-ms-input-placeholder { /* Microsoft Edge */
 color:    #FFFFFF;
 font-family:'Segoe UI', sans-serif;
 font-size: 200;
 font-weight:100;
}
body, html {
    height: 100%;
}

.bg {
  background-color: #171616;
  background-image: url("../Images/news-room-1.png");
  height: 100vh;
  background-position: center;
  background-repeat: no-repeat;
  background-size: cover;
}
.loginLinks{
  font-family:'Segoe UI', sans-serif;
  margin-bottom:25px;
  font-weight:100;
  vertical-align: center;
}
.loginInput{

  border: 0px solid rgb(0,0,0);
  background-size: 22px;
  background-repeat: no-repeat;
  background-position:right 10px center;
  margin-bottom:12px;
  background-color: #1D1C1C;
  box-shadow: 0px 0px 7px 8px #171616 inset;
  font-family:'Segoe UI', sans-serif;
  font-weight:100;
  color:    #FFFFFF;
  font-size: 18px;
  padding-left: 10px;
  padding-right: 40px;
  vertical-align: center;
  
}

.row {

    overflow: hidden;
    padding: 10px;
    margin-bottom: 12px;
}
.col {
    display: inline-block;
    align:center;
    width: 300px;
}
.label{
  font-family:'Segoe UI', sans-serif;
  font-weight:100;
  color:    #FFFFFF;
  font-size: 18px;

}
#myInput {
    background-image: url('http://www.w3schools.com/css/searchicon.png'); /* Add a search icon to input */
    background-position: 10px 12px; /* Position the search icon */
    background-repeat: no-repeat; /* Do not repeat the icon image */
    width: 60%; /* Full-width */
    font-size: 16px; /* Increase font-size */
    padding: 14px 10px 10px 40px; /* Add some padding */
    border: 1px solid #ddd; /* Add a grey border */
    margin-bottom: 12px; /* Add some space below the input */
    margin: 0px auto;
    display: block;
    box-sizing: border-box;
}
#myInputCallLog {
    background-image: url('http://www.w3schools.com/css/searchicon.png'); /* Add a search icon to input */
    background-position: 10px 12px; /* Position the search icon */
    background-repeat: no-repeat; /* Do not repeat the icon image */
    width: 43%; /* Full-width */
    font-size: 16px; /* Increase font-size */
    padding: 14px 10px 10px 40px; /* Add some padding */
    border: 1px solid #ddd; /* Add a grey border */
    margin-bottom: 12px; /* Add some space below the input */
    margin: 0px auto;
    box-sizing: border-box;

}
#myButton {
  width: 7%; /* Full-width */
  font-size: 16px; /* Increase font-size */
  padding: 14px 10px 10px 14px; /* Add some padding */
  border: 1px solid #ddd; /* Add a grey border */
  margin-bottom: 12px; /* Add some space below the input */
  margin: 0px auto;
  box-sizing: border-box;
  border-radius:5px;
}
#myOption {
  width: 10%; /* Full-width */
  height:44px;
  font-size: 16px; /* Increase font-size */
  border: 1px solid #ddd; /* Add a grey border */
  margin-bottom: 12px; /* Add some space below the input */
  margin: 0px auto;
  box-sizing: border-box;
  border-radius:5px;
  top:inherit;
}
.select select{
  position:initial;
}

.chatBubble{
  font-size: 14px;
  font-weight:bold;
  font-family:'Calibri';
  max-width:90%;
  min-width:15%;
  float:left;
  display: block;
  position: relative;
  clear: both;
  background:white;
  color:black;
  min-height:1.5em;
  border: 0px;
  border-radius: 5px;
  border-top-left-radius: 0px;
  border-bottom-left-radius: 0px;
  padding: 2px;
  margin: 2px;
}

.chatLocalBubble{
  font-size: 14px;
  font-weight:bold;
  font-family:'Calibri';
  max-width:90%;
  min-width:15%;
  float:right;
  display: block;
  position: relative;
  clear: both;
  background:#96b9f2;
  color:black;
  min-height:1.5em;
  border: 0px;
  border-radius: 5px;
  border-top-right-radius: 0px;
  border-bottom-right-radius: 0px;
  padding: 2px;
  margin: 2px;
}


.chatInput{
  font-size: 0.9rem;
  font-weight:bold;
  font-family:'Calibri';
}


.chatUserList{
  position: fixed;
  right: 0em;
  height: 90%;
  margin-top: 20px;
  margin-left: 10%;
  width: 25em;
  min-width:10em;
  color:#123B61;
  background-color: #EDEDED;
  border: 1px solid #DADADA;
}

.chatListElement
{
  /* code here */
}

.smalltable{
  height:500px;
  border: 1px solid #DADADA;
  text-align:center;
  width:25vw;
  float:left;
}

.callTest{
  left:25vw;
  width:50vw;
  position:absolute;
  top:310px;
  font-size:14px;
}

@media screen and (min-width:481px)
{
}

@media screen and (max-width: 320px) {
  /* comes into effect for screens less than or equal to 320 pixels */
  .serverList {
    overflow: scroll;
    position: relative;
    height:0;
    min-height: 25%;
    left:0;
    margin: 0;
    top:10%;
    width: 320px;
  }

  .userList {
    overflow: scroll;
    overflow-x: hidden;
    position: relative;
    height:0;
    min-height: 25%;
    left:0;
    margin-left: 0;
    margin: 0;
    width: 120px;
  }
  .smalltable
  {
    float:none;
    width:100vw;
  }
  .callTest{
    left:0vw;
    width:100vw;
  }
  .short{
    height:180px;
  }
  .createBox{
    position:relative;
    border:none;
    border-radius: 0;
    width:195px;
  }
  .formInput{
    right:0px !important;
  }
  .centerContent{
    position: initial;
  }
  .telephoneOffset{
    right:0px !important;
    max-width: 220px !important;
    width: 213px;
  }
  button{
    width: auto !important;
  }
  input{
    max-width: 200px !important;
  }
}
/*
@media screen and (min-width: 321px) and (max-width: 480px) {
  /* comes into effect for screens between 321 and 480 pixels (inclusive) */
  /*
  .serverList {
    overflow: scroll;
    position: relative;
    height:0;
    min-height: 25%;
    left:0;
    margin: 0;
    width: 320px;
  }
  .userList {
    overflow: scroll;
    overflow-x: hidden;
    position: relative;
    height:0;
    min-height: 25%;
    left:0;
    margin-left: 0;
    margin: 0;
    width: 320px;
  }
  .smalltable
  {
    float:none;
    width:100vw;
    height:100%;
  }
  .callTest{
    left:0vw;
    width:100vw;
  }
  .short{
    height:100%;
  }
  .createBox{
    position:relative;
    border:none;
    border-radius: 0;
    width:100%;
  }
  .formInput{
    right:0px !important;
  }
  .centerContent{
    position: initial;
  }
  .telephoneOffset{
    right:0px !important;
  }
  button{
    width: auto !important;
    margin-left: 20px;
  }
  input{
    max-width: 200px !important;
  }
}
*/

@media screen and (min-width: 481px)  and (max-width: 1300px) {
  /* comes into effect for screens larger than or equal to 481 pixels */
  .serverList {
    overflow: scroll;
    position: relative;
    height:0;
    min-height: 400px;;
    left:0;
    margin: 0;
    margin-left: 0;
    margin-top: 1%;
    width: 100vw;
  }
  .userList {
    overflow: scroll;
    overflow-x: hidden;
    position: relative;
    height:0;
    min-height: 400px;
    left:0;
    margin: 0;
    margin-left: 0;
    margin-top: 1%;
    width: 100vw;
  }
  .smalltable
  {
    float:left;
    width:50vw;
  }
  .callTest{
    left:0vw;
    width:100vw;
  }
}