.has-h-centered-blocks {
	justify-content: center;
}

.has-v-centered-blocks {
	align-items: center;
}

.no-grow {
	flex-grow: 0;
}

.container.home-container {
	height: 100vh;
	display: flex;
	flex-direction: column;
	justify-content: center;
	align-items: center;
}

.container.home-container > div {
	padding: 20px;
}

.has-text-ai-purple {
	color: #282c87;
}

.navbar.is-transparent {
background-color: transparent;
background-image: none;
}

.personal-info > img {
	max-width: 150px;
	margin: auto;
}

.justify-around {
	justify-content: space-around;
}

.justify-between {
	justify-content: space-between;
}

.has-no-margins {
	margin-left: 0 !important;
	margin-right: 0 !important;
	margin-top: 0 !important;
	margin-bottom: 0 !important;
}

.inputfile {
		width: 0.1px;
		height: 0.1px;
		opacity: 0;
		overflow: hidden;

		z-index: -1;
    margin-top:10px;
}
.inputfile + label {

		/* 20px */
		width: 50%;
		text-overflow: ellipsis;
		white-space: nowrap;
		cursor: pointer;
		display: inline-block;
		overflow: hidden;
		padding-left: 0.75em;
		padding-right: 0.75em;
		border: 1px solid #dbdbdb;
		height: 2.285em;
		box-shadow: inset 0 1px 2px rgba(10, 10, 10, 0.1);
		line-height: 1.5rem;
		border-radius: 3px;
		padding-top: 0.3em;

		/* 10px 20px */
}
.no-js .inputfile + label {
		display: none;
}
.inputfile:focus + label,
.inputfile.has-focus + label {
		border-color: #00d1b2;
}
.inputfile + label * {
		/* pointer-events: none; */
		/* in case of FastClick lib use */
}
.inputfile + label svg {
		width: 1em;
		height: 1em;
		line-height: 1.5rem;
		vertical-align: middle;
		margin-top: -0.25em;
		/* 4px */
		margin-right: 0.25em;
		/* 4px */
}
.inputfile-2 + label {
		border: 1px solid #dbdbdb;
}
.inputfile-2:focus + label,
.inputfile-2.has-focus + label,
.inputfile-2 + label:hover {
		border-color: #00d1b2;
}

/* editable make pretty */
.editable:hover {
	text-decoration: underline dotted #282d86;
}
.editable:hover::after {

/* cool idea but it causes some unexpected issues. */
/*     font-family: "FontAwesome";
color: #282d86;
font-weight: 900;
content: "\F040"; */

}

.clickable {
	cursor: pointer;
}

.table-header-rotated th.row-header{
  width: auto;
}

.table-header-rotated td{
  width: 40px;
  border-top: 1px solid #dddddd;
  border-left: 1px solid #dddddd;
  border-right: 1px solid #dddddd;
  vertical-align: middle;
  text-align: center;
}

.table-header-rotated th.rotate{
  height: 80px;
  width: 100px;
  min-width: 100px;
  max-width: 100px;
  position: relative;
  vertical-align: bottom;
  padding: 0;
  font-size: 15px;
  font-family: Arial, Helvetica, sans-serif;
  font-weight: bold;
  font-variant: small-caps;
  line-height: 0.8;
}
.table-header-rotated th:last-child{
	content: "";
	padding: 25px;
}

.table-header-rotated th.rotate > div{
  position: relative;
  top: 0px;
  /* left: 40px;  */
  left: 0px; /* 80 * tan(45) / 2 = 40 where 80 is the height on the cell and 45 is the transform angle*/
  height: 100%;
  -ms-transform:skew(-45deg,0deg);
  -moz-transform:skew(-45deg,0deg);
  -webkit-transform:skew(-45deg,0deg);
  -o-transform:skew(-45deg,0deg);
  transform:skew(-45deg,0deg);
  /* overflow: hidden; */
  /* border-left: 1px solid #dddddd;
  border-right: 1px solid #dddddd;
  border-top: 1px solid #dddddd;
  background-color: #fff; */
}

.table-header-rotated th.rotate span {
  -ms-transform:skew(45deg,0deg) rotate(315deg);
  -moz-transform:skew(45deg,0deg) rotate(315deg);
  -webkit-transform:skew(45deg,0deg) rotate(315deg);
  -o-transform:skew(45deg,0deg) rotate(315deg);
  transform:skew(45deg,0deg) rotate(315deg);
  position: absolute;
  bottom: 20px; /* 40 cos(45) = 28 with an additional 2px margin*/
  // left: -25px; /*Because it looked good, but there is probably a mathematical link here as well*/
  display: inline-block;
  // width: 100%;
  width: 85px; /* 80 / cos(45) - 40 cos (45) = 85 where 80 is the height of the cell, 40 the width of the cell and 45 the transform angle*/
  text-align: left;
  // white-space: nowrap; /*whether to display in one line or not*/
}
.table-header-rotated tbody > tr > td:not(:first-child) {
	text-align: center;
}

.small-hr {
	width: 50%;
	margin-left:25% !important;
	margin-right:25% !important;"

}
@media print {

/*	@page vertical {
		size: portrait;
	}

	@page horizontal {
		size: landscape;
	}*/

	@page {
		size: landscape;
	}

	@page :footer{
		display: none !important;
	}

	@page :header{
		display: none !important;
	}

	 #FreshWidget, #freshwidget-button  {
	 	display: none !important;
	 }

	 #printarea {
	 	display: block !important;
	 }

	 #order-header {
	 	display: none !important;
	 }

	 #no-print-button {
	 	display: none !important;
	 }

	 .modal-hide {
	 	display: none !important;
	 }

	 #modal-show {
	 	display: block !important;
	 	page: vertical;
	 }

	 .separate {
	 	page-break-after: always !important;
	 }

}

.qEditLabel {
	font-size: .75em;
	color: midnightblue;
	position: relative;
	margin: 1px;
	padding-right: 2px;
	background-color: #D0D9F6;
	display:block !important;
}
.qEditLabel:after{
	content: ":";
	padding: 3px;
}
.action-list li {
	margin-top: 2px;
}
/* upload box */

.dropbox {
   outline: 2px dashed grey; /* the dash box */
   outline-offset: -10px;
   background: #C3E3F2;
   color: dimgray;
   padding: 10px 10px;
   min-height: 200px; /* minimum height */
   position: relative;
   cursor: pointer;
 }

 .input-file {
   opacity: 0; /* invisible but it's there! */
   width: 100%;
   height: 200px;
   position: absolute;
   cursor: pointer;
 }

 .dropbox:hover {
   background: #5393E9 /* when mouse over to the drop zone, change color */
 }

 .dropbox p {
   font-size: 1.2em;
   color: #540FBB;
   text-align: center;
   padding: 50px 0;
   width: 100%;
 }

 /* shipping billing long edit format fix */
 @media screen and (min-width: 769px), print{
    .long-setting-wrap .level {
        flex-wrap: wrap;
    }
    .long-setting-wrap .level-item {
        justify-content: start;
        margin-top: 5px;
    }
    .long-setting-wrap .qEditLabel{
        white-space: nowrap;
        width: 57px;
    }
 }

 /* for practitioner info in show.blade.php */
.pract-information{
	display: flex;
	align-items:start;
    flex-wrap: wrap;
}
.pract-img{
	flex: 0 0 100px;
    padding: 4px;
    max-width: 100px;
    display: flex;
    align-items: center;
    min-height: 100px;
	padding: 4px;
	/* border: 1px solid #D9D9D9; */
	max-width: 100px;
	display: flex;
	align-items:center;
}
.pract-info{
	padding-left: 15px;
}
.d-flex{
	display: flex;
}
@media screen and (max-width: 640px) {
    #printarea.box{
        padding: 0;
    }
    .practice-information .column.is-6{
        padding: 0;
    }
}


.capsule-customise-modal .table-container.custom-responsive-table {
    height: calc(100vh - 300px);
    min-height: 200px;
    overflow-y: scroll;
}

.customise-dropdown {
    position: relative;
}
.customise-dropdown .product-list{

}
.customise-dropdown .menu-holder{
	/*bottom: 33px;*/
	background: #fff;
}
.capsule-customise-modal .customise-dropdown .menu-holder{
	bottom: 33px;
	/*background: #fff;*/
}
.pagination{
	gap : 5px;
}
.pagination-list{
	max-width:30px;
}
.pagination li.last.pagination-list,.pagination li.last.pagination-list a,.pagination li.first.pagination-list,.pagination li.first.pagination-list a,.pagination li.prev.pagination-list,.pagination li.prev.pagination-list a,.pagination li.next.pagination-list,.pagination li.next.pagination-list a{
	max-width:75px;
	width:75px;
}
.pagination-list.active{
	background:#A9CE36;
	color:#fff;
}
.pagination-list.active a{
	color:#fff;
}
.pagination a {
	display: block;
	padding: 2px 6px;
	color: #007bff;
	width:30px;
	text-decoration: none;
	border: 1px solid #007bff;
	border-radius: 5px;
	transition: background-color 0.3s ease, color 0.3s ease;
}
.pagination li + li {
    margin-top: 0;
}