/* Start customizing your app */
@font-face { 
  font-family: IconWerk2-duo-v06; src: url('../resources/fonts/IconWerk2-duo-v06.woff'); 
} 

@font-face { 
  font-family: UniCredit-Regular; src: url('../resources/fonts/UniCredit-Regular.woff'); 
} 

@font-face { 
  font-family: UniCredit-Bold; src: url('../resources/fonts/UniCredit-Bold.woff'); 
} 

/* Edit to change font color */
body {
  /*overflow: hidden;*/
  font-family: 'UniCredit-Regular';
}


.table-container[_ngcontent-c5].inner-margin-separator {
  height: auto!important;
}


.custom.text-color {
  color: #000000 !important;
  font-family: 'UniCredit-Regular';
}

#branchSubHeadingOne {
  font-family: 'UniCredit-Bold';
  margin: 6vh auto 2vh auto;
  letter-spacing: -.0133333333em;
}

.sub-heading-text-2 {
  font-size: 20px!important;
  margin-top: 2vh!important;
}

.queue-heading, .queue-body  {
  font-family: 'UniCredit-Bold'!important;
}

.child-center {
  font-family: 'UniCredit-Regular'!important;
}

.table-child-list {
  overflow: visible!important;
}

.queue-container {
  margin: 3vh auto 0 auto!important;
}

/* Edit to change font color of buttons */
.custom.btn-text-color {
    color: #ffffff !important;
    text-transform: uppercase !important;

}

.service_name[_ngcontent-c8] > span[_ngcontent-c8] {
  font-family: 'UniCredit-Bold'!important;
}

div.btn-text[_ngcontent-c8] {
  font-size: 15px!important;
  font-weight: 900!important;
  text-transform: uppercase;
}

@media (max-width: 450px), (max-height: 450px) {
  div.btn-text[_ngcontent-c8] {
    font-size: 13px!important;
  }
}

.custom.btn-bg-color {
  background: rgb(227,6,19) !important;
}

/* Edit to change accent color of tick mark */
.custom.accent-tick-color.tick {
  stroke: #ffffff !important;
}

/* Edit to change app background */
.custom.bg-image {
  background: #ffffff !important;
  /*border-top: rgb(227,6,19) 3vh solid;*/
}

#app-bg::after {
  content: "";
  /*background: #f5f5f5;*/
  background: rgba(245,245,245,.3);
  position: absolute;
  top: 40%;
  bottom: -10%;
  left: -10%;
  right: 0;
  width: 150%;
  transform: rotate(2deg);
}



/* Edit to change app logo */
.custom.logo-image {
  content: url('../../app/resources/qex_logo.png') !important;
  width: auto !important;
  max-width:none!important;
  position: relative!important;
  margin: 1vh auto 1vh auto!important;
  height: 100px;
  background-repeat: no-repeat!important;
  background-size: contain!important;
  background-position: 50%;
}

@media (max-width: 450px), (max-height: 450px) {
  .custom.logo-image {
    /*width: 128px !important;*/
  }
}
/*
.frame[_ngcontent-c0] {
  min-height: 20vh !important;
}*/

.queue-itm.selected {
  background: #c70819!important;
  color: #ffffff !important;
}

/* Edit to change logo background */
.custom.logo-bg-color {
  background: transparent !important;

}

.frame.custom.logo-bg-color.parent-center {
  border-top: rgb(227,6,19) 3vh solid;
  box-shadow: 0 2px 4px rgb(0 0 0 / 16%);
  height: fit-content!important;
}

/* Edit to change link text color */
.custom.link-text-color {
  color: #03996c !important;
}

.service-btn {
  /*background: rgb(227,6,19) !important;*/
  color: #ffffff !important;
  font-weight: 900 !important;
  background-image: linear-gradient(to right bottom, #e2001a, #d50713, #c90d0c, #bc1005, #b01200);
  box-shadow: 2px 2px 4px rgb(0 0 0 / 10%);
}

.service-btn.common-btn.center-text:hover {
  background: #c70819 !important;
  box-shadow: rgba(0, 0, 0, 0.16) 0px 1px 4px;
  
}

.common-btn:hover {
  background: #c70819!important;
  box-shadow: rgba(0, 0, 0, 0.16) 0px 1px 4px;
}

.service-btn-active {
  background: #ac1006!important;
  box-shadow: rgba(0, 0, 0, 0.16) 0px 1px 4px;
}
.accent-btn {
  font-size: 15px!important;
  padding: 10px 0 10px 0!important;
}

@media (max-width: 450px), (max-height: 450px) {
  .custom.logo-image {
    font-size: 13px!important;
  }
}


/* Edit to change accent color of buttons */
.custom.accent-bg-color {
  /*background: rgb(227,6,19) !important;*/
  color: #000 !important;
  background: white!important;
  border-radius: 3px;
  border: 1px solid rgba(0, 0, 0, 0.16);
  box-shadow: rgba(0, 0, 0, 0.16) 0px 1px 4px;

}

.custom.accent-bg-color:hover {
  /*background: #c70819 !important;*/
  background-image: linear-gradient(to right bottom, #ffffff, #fcfcfc, #fafafa, #f7f7f7, #f5f5f5)!important;
  box-shadow: rgba(0, 0, 0, 0.3) 0px 1px 4px;
}

.customer-icon {
stroke: #ffffff !important;
}

.queue-end[_ngcontent-c13] {
  font-size: 20px!important;
}

@media (max-width: 450px), (max-height: 450px) {
  .queue-end[_ngcontent-c13] {
    font-size: 17px!important;
  }
  .sub-heading-text-3 {
    font-style:normal!important;
  }
}

.table-child-footer[_ngcontent-c5] {
  height: auto!important;
}

.qm-footer > .center-text > .accent-btn {
  margin: 0 auto 2rem auto!important;
}

/* New twosided layout */

.list-container {
  /*margin-top: 5em!important;*/
}

.placement-layout {
  margin: 7rem auto 1rem !important;
}