html,body{
  height: 100%;
  overflow-x: hidden;
}
.dbh_userinfo{
  background: rgba(0,0,0,0.3);
  position: relative;
  top: 3px;
  padding: 9px;
  /* padding-left: 119px; */
}
#gameViewCenterHeader{
  padding: 8px;
  background: none;
  background: #fff;
  font-size: 16px;
  border-bottom: 1px solid #dee2e6;
  border-radius: 5px;
}
.chainPoint .role.bg span{
  background: #00587e;
  color:#fff;
  padding:1px 4px 2px;
  border-radius: 5px;
}
.chainPoint .role{
  position: absolute;
  bottom: -31px;
  left: 0;
  font-size: 14px;
  width: 160px;
  text-align: center;
  margin-left: -53px;
}
.chainPoint .role span {
  background-color: rgb(0, 149, 219);
  color: #fff;
  border-radius: 8px;
  padding-left: 12px;
  padding-right: 12px;
  margin: auto;
  padding-top: 2px;
  padding-bottom: 3px;
  font-size: 12px;
}
.chainPoint{
  position: relative;
  width: 75px;
  height: 60px;
  padding: 10px;
  border: 5px solid #fff;
  border-left: 10px solid #fff;
  border-right: 10px solid #fff;
    background-color:#fff;
    border-radius: 5px;
    margin: 0 10px;
    background-position: center center;
    box-shadow: 0px 4px 4px 0px rgba(0, 0, 0, 0.25);

}
#gvhListR.active
{
  /* background-image:url(/img/noun/retailer_white.png); */
}
#gvhListP.active
{
  /* background-image:url(/img/noun/production_white.png); */
}
#gvhListM.active
{
  /* background-image:url(/img/noun/manufacturer_white.png); */
}
#gvhListW.active
{
  /* background-image:url(/img/noun/wholesaler_white.png); */
}
#gvhListD.active
{
  /* background-image:url(/img/noun/distributor_white.png); */
}
#gameViewCenterBodyTable td{
  text-align: center;
  padding: 0.55rem !important;
}
#gameViewCenterBodyTable td:nth-child(1){
  text-align: left;
}
.chainPoint.active{
  /* background-color:#00587e;
  border-color:#00587e; */
  border-radius: 5px;
  border-color: rgb(0, 47, 70);
  border-width: 5px;
}
.gvhCustomer,
.gvhTruck,
.gvhBox{
  margin-bottom: 14px;
  padding: 10px;
  /* border: 5px solid #fff;
  background-color: #fff;
  border-radius: 5px; */
  position: relative;
}
.gvhTruckB{
position: relative;
  background-color: rgba(255, 255,255,1);
  background: url("/images/svg/arrow-blue-white-lorry.svg") center;
    background-repeat: repeat;
    background-size: auto;
  background-repeat: repeat;
  background-repeat: repeat;
  width: 100%;
  background-size: 100%;
  background-repeat: no-repeat;
  height: 71px;
      margin-top: 5px;

}
#gameViewPrevRole .badge-shipping-info,
#gameViewNextRole .badge-shipping-info{
  top: auto;
  margin-top: -51px;
  right: 50%;
  margin-right: -21px;
  font-size: 16px;
  padding-bottom: 6px;
}
#gameViewNextRole .badge-shipping-info{
  margin-right: -8px;
}
.badge-shipping-info{
    position: absolute;
    top: 15px;
    right: 15px;
    opacity: 1;
    background: #0299d1;
}
.chainPoint .badge-shipping-info{
  top: 36px;
  right: 50%;
  margin-right: -15px;
  font-size: 15px;
  /*background: #54ACD2;*/
}
.gvhCustomer .badge-shipping-info,
.gvhTruck .badge-shipping-info,
.gvhBox .badge-shipping-info{
  top: 21px;
  right: 1px;
}
#gameViewHeader2{
  margin-bottom: 0;
  box-sizing: border-box;
  padding-bottom: 0;
  position: fixed;
  bottom: 0;
  text-align: center;
  width: 100%;
  background: url("/images/gameViewHeader2-bg.png");
  padding: 20px 0 30px;
}
#gameViewContainer {
  background: linear-gradient(rgba(0, 187, 255, 0.8), rgba(0,172,235, 0)), url(https://images.fastcompany.net/image/upload/w_1280,f_auto,q_auto,fl_lossy/wp-cms/uploads/2017/06/i-1-this-rwandan-factory-is-revolutionizing-how-humanitarian-aid-is-done.jpg);
  //background:url(https://static1.squarespace.com/static/540b5e29e4b0dacce6678d52/t/5430560fe4b01399edcad584/1412453904397/big-box-store-aisle.jpg?format=1500w);
  //background:url(https://i.ytimg.com/vi/YiLZQFX4wA4/maxresdefault.jpg);
  background-size: cover !important;
  height: 100%;
  margin-top: 0;
  top: 0;
  position: absolute;
  padding-top: 70px;
}
#gameWaitContainer {
  background: linear-gradient(rgba(0, 187, 255, 0.8), rgba(0,172,235, 0)), url(https://images.fastcompany.net/image/upload/w_1280,f_auto,q_auto,fl_lossy/wp-cms/uploads/2017/06/i-1-this-rwandan-factory-is-revolutionizing-how-humanitarian-aid-is-done.jpg);
  //background:url(https://static1.squarespace.com/static/540b5e29e4b0dacce6678d52/t/5430560fe4b01399edcad584/1412453904397/big-box-store-aisle.jpg?format=1500w);
  //background:url(https://i.ytimg.com/vi/YiLZQFX4wA4/maxresdefault.jpg);
  background-size: cover !important;
  height: 100%;
  margin-top: 0;
  top: 0;
  position: absolute;
  padding-top: 70px;
}
#admin_container{
  height: 100%;
}
#gameViewCenter{
  border-radius: 5px;
  overflow: hidden;
  padding: 0;
  min-width: auto;
  vertical-align: top;
  width: 40%;
  box-shadow: 6px 6px 6px 0px rgba(0, 0, 0, 0.25);
}
#gameViewCenterBody{
  border:none;
  font-size: 12px;
  font-weight: bold;
  min-width: auto;
  padding: 7px;
  background-color: #fff;
}
.nextRoleTitle,
.prevRoleTitle{
  background: rgba(255, 255,255,1);
  border-radius: 5px;
  padding: 30px 0 8px;
  display: block;
  width: 100%;
  box-sizing: border-box;
  margin: -10px 0;
  text-align: center;
}
#gameViewPrevRole{
  text-align: left;
}
#gameViewNextRole,
#gameViewPrevRole{
  width: 15%;
}

#gameViewOutgoingShipping,
#gameViewIncomingShipping{
  width: 20%;
}
#gameViewOutgoingShipping table,
#gameViewIncomingShipping table{
  margin: 0 auto;
  width: 100%;
  top: 50%;
}
/*
#gameViewNextRole, #gameViewPrevRole{
  background: url("/images/svg/diamond.svg");
  background-repeat: no-repeat;
  background-size: contain;
  background-position-y: center;
}
  */
#gameViewNextRole img,
#gameViewPrevRole img{
  /* background: rgba(255, 255,255,1);
  border-radius: 5px;
  padding: 20px; */
  width: 50%;
  position: relative;
  z-index: 1;
}
#gameViewBody .col{
  display: table-cell;
  vertical-align: middle;
  box-sizing: border-box;
  text-align: center;
  border: 0;
  overflow: visible;
}
#gameViewBody .row{
  display: table-row;
}
#gameViewBody{
  margin-top: 40px;
  margin-left: 10px;
  margin-right: 10px;
  table-layout: fixed;
  width: calc(100% - 20px);
  display: table;
}
.navbar{
  z-index: 10;
  background: none !important;
}
#gameViewHeader1{
  position: fixed;
  top: 63px;
  z-index: 100;
  left: 50%;
  width: auto;
  margin-left: -44px;
}
#gameViewHeader1 .week{float: none !important;}
#gameViewHeader1 .role{display: none}
#gameViewCenterFooter{
  background: none;
  margin-top: -16px;
  margin-bottom: 10px;
  /* padding: 20px; */
  background: #fff;
  height: 93px;
}
#gameViewOutgoingShipping,
#gameViewIncomingShipping{
  margin-top: 197px;
}
#gameViewCenterBodyTable{
  background: #fff;
}
#input {
  border-bottom: 1px solid #efefef;
  text-align: left;
  color: rgba(102, 102, 102, 1);
  font-weight: normal;
  height: 56px;
  padding-top: 10px;
  margin-bottom: 8px;   
}
.order-amount {
    display: inline-block;
    margin-top: 7px;
}
#myOrder{
  border: 1px solid #dee2e6;
  /* padding: 8px 10px; */
  font-size: 18px;
  width: 25%;
  box-sizing: border-box;
  text-align: center;
  float: right;
}
#btnSubmitMyOrder{
  /* border: none;
  font-size: 18px;
  width: 33%;
  box-sizing: border-box;
  cursor: pointer;
  padding: 9px;
  background: #00587e; */
  text-transform: uppercase;
}
#btnSubmitMyOrder:hover{
  /* background: #237BA1; */
}
#btnShowSendMessage{
  position: fixed;
  top: 56px;
  right: 16px;
  cursor: pointer;
  border: none;
  padding-bottom: 7px;
  position: fixed;
  background: #fff;
  color: #000;
  z-index: 100;
}
#btnShowSendMessage:focus,
#btnShowSendMessage:active,
#btnShowSendMessage:hover{
  border:none !important;
  outline:none;
}
#roundFinished{
  background: #fff;
  padding: 10px 30px 30px;
  margin-top: 84px;
}

.progress {
 margin-top: 3px;
  display: none;
  width: calc(100% - 107px);
  display: inline-block;
  height: 0.5rem;
  margin-right: 5px;
}

#gameViewBody[data-shipping_delay_length="2"] #gameViewOutgoingShipping table,
#gameViewBody[data-shipping_delay_length="2"] #gameViewIncomingShipping table {
    width: 66%;
}
#gameViewBody[data-shipping_delay_length="2"] #gameViewOutgoingShipping td,
#gameViewBody[data-shipping_delay_length="2"] #gameViewIncomingShipping td {
    width: 50%;
}

#gameViewBody[data-shipping_delay_length="1"] #gameViewOutgoingShipping table,
#gameViewBody[data-shipping_delay_length="1"] #gameViewIncomingShipping table {
     width: 33%;
}
#gameViewBody[data-shipping_delay_length="1"] #gameViewOutgoingShipping td,
#gameViewBody[data-shipping_delay_length="1"] #gameViewIncomingShipping td {
     width: 100%;
}
/*
#gameViewBody[data-shipping_delay_length="1"] #gameViewIncomingShipping td:nth-child(1) {
    display: table-cell;
}
#gameViewBody[data-shipping_delay_length="1"] #gameViewIncomingShipping td:nth-child(2),
#gameViewBody[data-shipping_delay_length="1"] #gameViewIncomingShipping td:nth-child(3) {
    display: none;
}


#gameViewBody[data-shipping_delay_length="2"] #gameViewIncomingShipping td:nth-child(3) {
    display: none;
}

#gameViewBody[data-shipping_delay_length="3"] #gameViewIncomingShipping td:nth-child(1),
#gameViewBody[data-shipping_delay_length="3"] #gameViewIncomingShipping td:nth-child(2),
#gameViewBody[data-shipping_delay_length="3"] #gameViewIncomingShipping td:nth-child(3) {
    display: table-cell;
}
*/
#gameViewCenter{
  z-index: 1;
}
#gameViewCenter:before{
  content: '';
  background-image: url('/images/svg/arrow-blue-light.svg');
    position: absolute;
    top: 0;
    left: -3%;
        width: 14%;
    height: 100%;
    background-size: 100% 100%;
    z-index: -1;
}
#gameViewCenter:after{
  content: '';
  background-image: url('/images/svg/arrow-blue-light.svg');
    position: absolute;
    top: 0;
    right: -3%;
        width: 14%;
    height: 100%;
    background-size: 100% 100%;
    z-index: -1;
}
#gameViewNextRole::after{
content: '';
  background-image: url('/images/svg/arrow-blue-light.svg');
    position: absolute;
    top: 0;
    left: -10%;
    width: 39%;
    height: 100%;
    background-size: 100% 100%;
    z-index: 0;
}
#gameViewPrevRole::after{
    content: '';
    background-image: url(/images/svg/arrow-blue-dark.svg);
    position: absolute;
    top: 0;
    right: -10%;
    width: 39%;
    height: 100%;
    background-size: 100% 100%;
    z-index: 0;
}
#gameViewNextRole::before,
#gameViewPrevRole::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;       /* vul de volledige breedte */
    height: 100%;      /* vul de volledige hoogte van de div */
    background: url("/images/svg/diamond.svg") no-repeat center center;
    background-size: 100% 100%; /* uitrekken over volledige div */
    z-index: 1;        /* achter de inhoud */
}

/* Zorg dat de parent div position: relative heeft */
#gameViewNextRole,gameViewNextRole
#gameViewPrevRole {
    position: relative;
}
.gvhCustomer{
    background: url(/images/svg/consumers.svg);
    width: 50px;
    height: 33px;
    margin-left: 10px;
    background-size: 36px;
    background-repeat: no-repeat;
    background-position: center;
}
.gvhPre{
    position: relative;
    margin: 0 20px 0 0;
    background-position: center center;
    display: inline-block;
    width: 23px;
    height: 42px;
    background: url(/images/svg/grondstoffen.svg);
    background-repeat: no-repeat;
    background-size: contain;
}