BODY {
    /*max-width: 1200px;*/
    margin:auto;
    align-content: center;
    /*font-family: 'Roboto';*/
    margin-top: 10pt;
}

hr
{
	background-color: #999;
	border: 0;
	height: 1px;
	margin: 0px;
}

a {
    color: ivory;
    background-color: #7eb248;
    margin-top: 10%;
    text-align: center;
}

.content {
    margin-top: 10pt;
}

.init {
    background-color: royalblue;
    color: ivory;
}

.init div {
    padding-top:20%;
    padding-left: 20%;    
    padding-right: 20%;    
}

.init form div {
    padding: 0%;
}

.init button {
    float: right;
    margin-right: 10%;
}



.footer {
    margin-top: 30px; 
	padding-bottom: 10px; 
	min-height: 10px; 
}

.footer div {
    width: 33%;
}

.footer div p {
    background-color: #6f4ee8;
    color: ivory;
    width: 55%;
    font-size: 10pt;
    font-weight: bold;
    text-align: center;
    margin: auto;
}

.header {
    margin-left: 10pt;
    margin-right: 10pt;
}

.header .title {
    color: #0091b8;
    font-size: 30pt;
    font-style: bold;
    text-align: center;
}

.vertical-logo {
    top: 25%;
    -ms-transform: translateY(22%);
    transform: translateY(22%);
  }

  .vertical-clock {
    top: 27%;
    -ms-transform: translateY(27%);
    transform: translateY(27%);
  }


.vertical-logo p {
      background-color: #0060c0;
      color: ivory;
      width: max-content;
      padding: 5px;
}

  .btn-logout {
    width: 10%;
    top: 35%;
    -ms-transform: translateY(35%);
    transform: translateY(35%);
  }

  .btn-logout p {
    background-color: #6f4ee8;
    color: ivory;
    width: 100%;
    font-size: 10pt;
    font-weight: bold;
    text-align: center;
    margin: auto;
}

.btn-logout p:hover {
    background-color:#6ab2d4;
    cursor: pointer;
}


  .right-text {
      text-align: right;
  }

  .login {
      min-height: 530px;

      /*background-attachment: fixed;*/
      background-image: url(../images/background_login_1100.png);      
  }

  .login .form_top {
    padding-top: 20%;
  }

  .login .form {
    background-color: #616c78;
    border-bottom-left-radius: 10px;
    border-bottom-right-radius: 10px;

  }

  .form  {
      padding: 5%;
  }

  .w320 {
      width: 320px;
  }
  
.login .column {
    margin-left: 35%;
    margin-right: 35%;
}

.hidden {
    display: none;
}

.center-component {
    padding-left: 10%;
    padding-right: 10%;
    margin-left: 30%;
    margin-right: 30;
}

.btn-login {
    color:ivory;
    background-color:#3a7b9a;
    border-top-color: ivory;
    border-right-color: ivory;
    border-bottom-color: ivory;
}

.btn-login:hover {
    color:ivory;
    background-color:#6ab2d4;
    border-color: #3a7b9a;
}
  
.btn-login:focus, .btn-login.focus {
    color: ivory;
    background-color: #6ab2d4;
    border-top-color: ivory;
    border-right-color: ivory;
    border-bottom-color: ivory;
    box-shadow: 0 0 0 0.2rem rgba(58, 176, 195, 0.5);
}
  
  .btn-login.disabled, .btn-login:disabled {
    color: ivory;
    background-color: #3a7b9a;
    border-color: #3a7b9a;
  }
  
  .btn-login:not(:disabled):not(.disabled):active, .btn-login:not(:disabled):not(.disabled).active,
  .show > .btn-login.dropdown-toggle {
    color: #fff;
    background-color: #117a8b;
    border-color: #10707f;
  }
  
  .btn-login:not(:disabled):not(.disabled):active:focus, .btn-login:not(:disabled):not(.disabled).active:focus,
  .show > .btn-login.dropdown-toggle:focus {
    box-shadow: 0 0 0 0.2rem rgba(58, 176, 195, 0.5);
  }

.form .mail {
    background-image: url(/images/username_icon.png); 
    background-repeat: no-repeat;  
    padding-left: 33px;
}

.form .password {
    background-image: url(/images/pwd_icon.png); 
    background-repeat: no-repeat;  
    padding-left: 33px;
}

#msgSubmit {
    color: ivory;
    padding-top: 5%;
}

.title_bar {
    width: 80%;
    height: 50px;
    margin-left: 3%;
    color: ivory;
    text-align: center;
    border-radius: 20px;
    -webkit-box-shadow: 2px 2px 7px 0px rgba(196,196,196,1);
    -moz-box-shadow: 2px 2px 7px 0px rgba(196,196,196,1);
    box-shadow: 2px 2px 7px 0px rgba(196,196,196,1);
}

.title_bar p {
    padding-top: 14px;
    font-size: 13pt;
    font-weight: bold;
}

.label_head {
    font-size: 13pt;
    font-weight: bold;
}

.nav_btn {
    width: 230px;
    height: 150px;
    margin-left: 3%;
    color: ivory;
    text-align: center;
    border-radius: 20px;
    -webkit-box-shadow: 2px 2px 7px 0px rgba(196,196,196,1);
    -moz-box-shadow: 2px 2px 7px 0px rgba(196,196,196,1);
    box-shadow: 2px 2px 7px 0px rgba(196,196,196,1);
}

.nav_btn:hover {
    opacity: .5;
    filter: alpha(opacity=50);
}

.nav_btn p {
    font-size: 13pt;
    font-weight: bold;
    padding-top: 30%;
}

.info_box_title {
    width: 150px;
    height: 50px;
}

.info_box_title p{
    color: ivory;
    padding-top: 10%;
    font-weight: bold;
    text-align: center;
}

.info_box_content {
    padding-top: 1%;
    font-style: italic;
    padding-left: 1%;
}

.top46p {
    margin-top: 46%;
}

.top20p {
    margin-top: 20%;
}

.top10p {
    margin-top: 10%;
}

.top5p {
    margin-top: 5%;
}

.top1p {
    margin-top: 1%;
}

.top2p {
    margin-top: 2%;
}

.all2px {
    margin: 2px;
}

.btn1p {
    margin: 1%;
}

.left_pad1p {
    padding-left: 1%;
}

.left_pad3p {
    padding-left: 3%;
}

.left20p {
    margin-left: 20%;
}

.left10p {
    margin-left: 10%;
}

.left5p {
    margin-left: 5%;
}

.left1p {
    margin-left: 5%;
}

.width500 {
    width: 500px;
}
.width600 {
    width: 600px;
}


.width90p {
    width: 90%;
    margin: auto;
}

.width98p {
    width: 98%;
}

.width70p {
    width: 70%;
}

.width75p {
    width: 70%;
}

.width80p {
    width: 80%;
}

.width85p {
    width: 85%;
}

.width95p {
    width: 95%;
    max-width: 570px;
}

.width60p {
    width: 60%;
}

.bottom2p {
    margin-bottom: 2%;
}

.bottom5p {
    margin-bottom: 5%;
}

.bottom10p {
    margin-bottom: 10%;
}

.bottom15p {
    margin-bottom: 15%;
}

.bottom20p {
    margin-bottom: 20%;
}


.btn-border {
    border: 2px black solid;
}

.borde_rigtht {
    border-right: black 1px solid;
}

.border2p {
    border-radius: 10px;
    border-color: black;
    border-style: solid;
    border-width: 2px;
}

.border1p {
    border-radius: 10px;
    border-color: black;
    border-style: solid;
    border-width: 1px;

}

.height40p {
    height: 40%;
}

.height20p {
    height: 20%;
}

/* back COLOR  */
.red_medium {
     background-color: #fa676e;
 }

.green{
    background-color: #78aa44;
 }

.green_light {
    background-color: #9fdb64;
}

.cyan_medim {
    background-color: #9ed2e0;
}

.orange_light {
    background-color: #faca6e;
}

.blue {
    background-color: #0060c0;
}

.fucsia {
    background-color: #860299;
}

.noce {
    background-color: #89847f;
}

.brown {
    background-color: #583400;
}

.yellow {
    background-color: yellow;
}

.white {
    background-color: white;
    color: black;;
}

.borderBrown {
    border-color: #583400;
    border-style: dotted;
    border-width: 5px;
}

.none {
    background: none;
}

.light_gray {
    background-color: #f6f6f6;
}

.btn-ivory {
    color: ivory;
}

.breadcrumb-item a {
    color: navy;
    background: none;
}

.text-center {
    text-align: center;
}

.led_mini {
    border-radius: 50%;
    width: 10px;
    height: 8px;
    margin: 1px;
}

.led_big {
    border-radius: 50%;
    width: 20px;
    height: 16px;
    margin: 1px;
}

.tag_mini {
    border-radius: 50%;
    width: 80px;
    height: 70px;
    margin: 2px;
    /*margin-right: 5px;
    margin-top: 5px;*/
    text-align: center;
}

.tag_bg_mini {
    border-radius: 50%;
    width: 85px;
    height: 75px;
    margin: 1px;
    /*margin-right: 5px;
    margin-top: 5px;*/
}

.tag_mini p {
    padding-top: 20%;
    font-size: 10pt;
    color: ivory;
}

.tag {
    border-radius: 50%;
    width: 110px;
    height: 100px;
    margin: 5px;
    /*margin-right: 5px;
    margin-top: 5px;*/
    text-align: center;
}

.tag_detail {
    width: 110px;
    margin: 5px;
    /*margin-right: 5px;
    margin-top: 5px;*/
    text-align: center;
}

.tag p {
    padding-top: 35%;
    font-size: 10pt;
    color: ivory;
}

.tag_selected {
    background-color: #ff7200;
}


.tag_empty {
    background-color: gray;
}


.tag_red {
    background-color: #d23700;
}

.tag_yellow {
    background-color: #faca6d;
}

.tag_orange{
    background-color: #e76702;
}

.tag_green {
    background-color: #7fb04e;
}

.tag_blue {
    background-color: #0097c0;
}

.tag_light_blue {
    background-color: #9ed2e0;
}

.tag_light_orange {
    background-color: #ffaa54;
}

.user-list {
    width: fit-content;
}

.user-list .row > .head {
    background-color: #7eb248;
    color: ivory;
}

.user-list .row  {
    padding: 0px
}

.footer a {
    color: ivory;
    text-align: center;
    background-color: #6f4ee8;
}

.toolbar {
    background-color: #f3f3f3;
    margin-top: 5px;
    margin-bottom: 5px;
    padding: 10px;
}

.toolbar .btn-primary {
    margin-right: 5px;
}

.full-width {
    width: 100%;
}

.floor_box{
    height: 20%;
    width: 20%;
}

.floor_box_fixed{
    height: 40px;
    width: 70px;
}

.table th, .table td {
    padding:0px;
    text-align: center;
}

.table .action-col {
    width:30%;    
}

.room_mark {
    border-radius: 50%;
    width: 75px;
    height: 65px;
    margin: 4px;
    /*margin-right: 5px;
    margin-top: 5px;*/
    text-align: center;
}

.room_mark_bg {
    border-radius: 50%;
    width: 85px;
    height: 75px;
    margin: 1px;
    /*margin-right: 5px;
    margin-top: 5px;*/
}

.room_mark p {
    padding-top: 25%;
    font-size: 10pt;
    color: black;

}