:root {
  --app-navbar-bg-colour: #343a40;
  --app-navbar-text-colour: #fff;
  --app-station-button-col: 100px;
  --app-station-button-size: calc(var(--app-station-button-col) * 0.75);
  --app-navbar-button: 28px; /* Size under 1920x1080 and lower */
  --app-navbar-xl-button: 60px; /* Size to 1920x1080 and higher */
  --app-header-menu-button: 60px;
  --app-station-header-xl-button: 60px;
  --app-header-menu-margin: 15px;
  --app-header-menu-user-left: 105px;
  --app-user-in-colour: #28a745;
  --app-user-out-colour: #dc3545;
  --app-misc-colour: #a02971;
}

html,body {
  height: 100%;
}

@media (min-height: 1100px) {
  h1 {font-size:1.75rem;} /*1rem = 16px*/
  label {font-size:1.75rem;} /*1rem = 16px*/
  a {font-size:1.75rem;} /*1rem = 16px*/
  small {font-size:1.25rem;} /*1rem = 16px*/
}

.wrap-login {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  align-items: center;
  padding: 15px;
  background: #fff;
}

.install-button {
  /*position: absolute;*/
  /*top: 1px;*/
  /*left: 1px;*/
  position:fixed;
	width:50%;
	height:60px;
	bottom:5%;
	right:25%;
  padding: 1em .5em;
  border: none;
  border-radius: 12px;
  background-color: #50b1fc;
  cursor: pointer;
  color: #FFFFFF;
}

.offline-notification {
    display: none;
    padding: 1em;
    text-align: center;
}

.offline-notification.show {
    background-color: red;
    color: white;
    display: block;
}

.custom-accordion .card-collapse-header:after {
    font-family: 'FontAwesome';
    content: "\f068";
    float: right;
}
.custom-accordion .card-collapse-header.collapsed:after {
    /* symbol for "collapsed" panels */
    content: "\f067";
}

.modal-info-icon {
    background: #5bc0de;
    width: 100px;
    height: 100px;
    border-radius: 50%;
    text-align: center;
    line-height: 100px;
    vertical-align: middle;
    border: 10px solid #5bc0de;
}

.modal-success-icon {
    background: #28a745;
    width: 100px;
    height: 100px;
    border-radius: 50%;
    text-align: center;
    line-height: 100px;
    vertical-align: middle;
    border: 10px solid #28a745;
}

.footer-buttons-place{
	height:80px;
}

.float-button-add-element{
	position:fixed;
	width:60px;
	height:60px;
	bottom:30px;
	left:100px;
	background-color:#000;
	color:#FFF;
	border-radius:50px;
	text-align:center;
	box-shadow: 2px 2px 3px #999;
	opacity: 0.8;
	z-index: 999;
}

.float-button-return{
	position:fixed;
	width:60px;
	height:60px;
	bottom:30px;
	left:25px;
	background-color:#000;
	color:#FFF;
	border-radius:50px;
	line-height: 0px;
    vertical-align: middle;
	box-shadow: 2px 2px 3px #999;
	opacity: 0.8;
	z-index: 999;
}

.float-button-accept{
	position:fixed;
	width:60px;
	height:60px;
	bottom:30px;
	left:25px;
	background-color:#5CB85C;
	color:#FFF;
	border-radius:50px;
	text-align:center;
	box-shadow: 2px 2px 3px #999;
	opacity: 0.8;
	z-index: 999;
}

.float-button-cancel{
	position:fixed;
	width:60px;
	height:60px;
	bottom:30px;
	left:100px;
	background-color:#D9534F;
	color:#FFF;
	border-radius:50px;
	text-align:center;
	box-shadow: 2px 2px 3px #999;
	opacity: 0.8;
	z-index: 999;
}

.float-button-delete{
	position:fixed;
	width:60px;
	height:60px;
	bottom:30px;
	left:175px;
	background-color:#000;
	color:#FFF;
	border-radius:50px;
	text-align:center;
	box-shadow: 2px 2px 3px #999;
	opacity: 0.8;
	z-index: 999;
}

.float-button-log{
	position:fixed;
	width:60px;
	height:60px;
	bottom:30px;
	left:175px;
	background-color:#000;
	color:#FFF;
	border-radius:50px;
	text-align:center;
	box-shadow: 2px 2px 3px #999;
	opacity: 0.8;
	z-index: 999;
}

.float-button-firmware{
	position:fixed;
	width:60px;
	height:60px;
	bottom:30px;
	left:175px;
	background-color:#000;
	color:#FFF;
	border-radius:50px;
	text-align:center;
	box-shadow: 2px 2px 3px #999;
	opacity: 0.8;
	z-index: 999;
}

.float-button-firmware img{
    width:60%;
    position: absolute;
    left:20%;
    top:20%;
    opacity: 1;
}

.float-button-change-customer{
	position:fixed;
	width:60px;
	height:60px;
	bottom:30px;
	left:100px;
	background-color:#000;
	color:#FFF;
	border-radius:50px;
	text-align:center;
	box-shadow: 2px 2px 3px #999;
	opacity: 0.8;
	z-index: 999;
}

.float-button-change-customer img{
    width:60%;
    position: absolute;
    left:20%;
    top:20%;
    opacity: 1;
}

.button-header-station img{
    width:60%;
    position: absolute;
    left:20%;
    top:20%;
    opacity: 0.5;
}

.float-button-scanner-element{
	position:fixed;
	width:60px;
	height:60px;
	bottom:30px;
	right:25px;
	background-color:#000;
	color:#FFF;
	border-radius:50px;
	line-height: 0px;
    vertical-align: middle;
	box-shadow: 2px 2px 3px #999;
	opacity: 0.8;
	z-index: 999;
}

.float-button-generic-left{
	position:fixed;
	width:60px;
	height:60px;
	bottom:30px;
	left:30px;
	background-color:#000;
	color:#FFF;
	border-radius:50px;
	line-height: 0px;
    vertical-align: middle;
	box-shadow: 2px 2px 3px #999;
	opacity: 0.8;
	z-index: 999;
}

.float-button-generic-right{
	position:fixed;
	width:60px;
	height:60px;
	bottom:30px;
	right:30px;
	background-color:#000;
	color:#FFF;
	border-radius:50px;
	line-height: 0px;
    vertical-align: middle;
	box-shadow: 2px 2px 3px #999;
	opacity: 0.8;
	z-index: 999;
}

.float-button-report-menu{
	position:fixed;
	width:60px;
	height:60px;
	bottom:30px;
	left:175px;
	background-color:#000;
	color:#FFF;
	border-radius:50px;
	line-height: 0px;
    vertical-align: middle;
	box-shadow: 2px 2px 3px #999;
	opacity: 0.8;
}

.btn-misc{
     background-color: var(--app-misc-colour);
     color: #fff;
}

.btn-misc:hover {
     background-color: var(--app-misc-colour);
     color: #fff;
}

.btn-misc:active {
     background-color: var(--app-misc-colour);
     color: #fff;
}

.btn-misc-rounded {
    width: var(--app-station-header-xl-button);
    height: var(--app-station-header-xl-button);
    border-radius: calc(var(--app-station-header-xl-button) * 0.5);;
    background-color: var(--app-misc-colour);
    color: #fff;
}

.fixed-top{
	position:-webkit-sticky;
	position:sticky;
        top:0;
        left:0;
        right:0;
}

.fc-event-title{
white-space: normal;
}

@media (hover: none) and (pointer: coarse) {
    /* touchscreens */
    ::-webkit-scrollbar {
        display: none;
    }
}
@media (hover: none) and (pointer: fine) {
    /* stylus */
}
@media (hover: hover) and (pointer: coarse) {
    /* controllers */
}
@media (hover: hover) and (pointer: fine) {
    /* mouse or touchpad */
}

.dot {
  height: 25px;
  width: 25px;
  background-color: #bbb;
  border-radius: 50%;
  display: inline-block;
}

.btn-img:before {
    content: "";
    width: 16px;
    height: 16px;
    display: inline-block;
    margin-right: 5px;
    background-color: transparent;
    background-position : center center;
    background-repeat:no-repeat;
}

.btn-circle {
  width: 45px;
  height: 45px;
  line-height: 45px;
  text-align: center;
  padding: 0;
  border-radius: 50%;
}

.btn-circle i {
  position: relative;
  top: -1px;
}

.btn-circle-sm {
  width: 35px;
  height: 35px;
  line-height: 35px;
  font-size: 0.9rem;
}

.btn-circle-lg {
  width: 55px;
  height: 55px;
  line-height: 55px;
  font-size: 1.1rem;
}

.btn-circle-xl {
  width: 70px;
  height: 70px;
  line-height: 70px;
  font-size: 1.3rem;
}

.btn-header-menu {
  width: 8vw;
  height: auto;
  border-radius: 15%;
  border:transparent;
}

.no-border {
    border: 0;
    box-shadow: none;
}

.checkbox-lg .custom-control-label::before,
.checkbox-lg .custom-control-label::after {
  top: .8rem;
  width: 1.55rem;
  height: 1.55rem;
}

.checkbox-lg .custom-control-label {
  padding-top: 13px;
  padding-left: 6px;
}

.checkbox-xl .custom-control-label::before,
.checkbox-xl .custom-control-label::after {
  top: 1.2rem;
  width: 1.85rem;
  height: 1.85rem;
}

.checkbox-xl .custom-control-label {
  padding-top: 23px;
  padding-left: 10px;
}

.border-3 {
    border-width:3px !important;
}

.border-4 {
    border-width:4px !important;
}

.border-5 {
    border-width:5px !important;
}

.border-6 {
    border-width:6px !important;
}

.border-7 {
    border-width:7px !important;
}

.border-user-out {
    border-width: 3px !important;
    border-color: var(--app-user-out-colour) !important;
}

.border-user-in {
    border-width: 3px !important;
    border-color: var(--app-user-in-colour) !important;
}

.deletion-text {
    text-decoration:line-through;
}

.no-display{
    display: none;
}

.td-fill {
  width: 100%;
}

.td-header {
  white-space: nowrap;
  overflow: hidden;
}

.flex-center{
  display: flex;
  align-items: center;
  justify-content: center;
}