@charset "utf-8";
/* CSS Document */
	html, body {
		width: 100%;
		height: 100%;
		margin: 0px;
		font-family: 'Open Sans', sans-serif;
		background: #EEE;
		font-size: 12px;
		cursor: default;
	}
	
	body {
		overflow-x: hidden;
	}

	h1, h2, h3 {
		font-family: 'Rubik', sans-serif;
		font-weight: 400;
	}

	h2 {
		display: block;
		font-size: 1.5em;
		margin: 0px;
	}

	.modal h2 {
		color: #000;
	}

	h1 {
		font-size: 2em;
	}

	#djemapp {
		width: 100%;
		height: 100%;
		padding: 0px;
	}

	.singleform {
		max-width: 500px;
		width: 50%;
		position: absolute;
		top: 50%;
		left: 50%;
		transform: translate(-50%, -50%);
	}

	.singleform input {
		width: 70%;
	}

	.singleform label {
		width: 30%;
	}

	.singleform button {
		width: 100%;
		margin: 0px;
		background: rgba(0,169,203,1);
	}
	
	#header {
		width: 100%;
		height: 75px;
		display: flex;
    	justify-content: space-between;
    	align-items: stretch;
		box-sizing: border-box;
		padding: 0 30px;
		border-bottom: 1px rgba(255,255,255,0.5) solid;
		z-index: 75;
	}
	
	#subheader {
		width: 100%;
		min-height: 75px;
		display: flex;
    	justify-content: space-between;
    	align-items: stretch;
		box-sizing: border-box;
		flex-wrap: wrap;
		color: #fff;
	}

	#offerheader {
		display: none;
		visibility: hidden;
	}

	#pageheader {
		width: 100%;
		min-height: 75px;
		display: flex;
    	justify-content: space-between;
    	align-items: stretch;
		box-sizing: border-box;
		flex-wrap: wrap;
		color: #000;
	}

	#pageheader .actions a {
		border-radius: 0px;
		line-height: 10px;
	}

	#pageheader > div {
		min-height: 100px;
	}
	
	.blockheader {
		width: 100%;
		height: 55px;
		display: flex;
    	justify-content: space-between;
    	align-items: stretch;
		box-sizing: border-box;
		flex-wrap: wrap;
	}

	.totals .blockheader {
		height: 30px;
	}
	
	#pagecontent, .pagecontent {
		box-sizing: border-box;
		margin: 15px;
		overflow: hidden;
	}
	
	.sticky {
		position: fixed;
 		top: 0;
	}
	
	.sticky + .content {
  		padding-top: 75px;
	}
	
	.padding-0-30 {
		padding: 0 30px;
	}
	
	.padding-15-15 {
		padding: 10px 10px;
	}
	
	.padding-5-5 {
		padding: 5px 5px 0px 5px;
	}
	
	.padding-15-0 {
		padding: 0px 10px;
	}

	.margin-0-15 {
		margin-bottom: 15px;
	}
	
	.flex {
		display: flex;
    	justify-content: space-between;
		align-items: center;
		flex-direction: row;
		padding: 0;
		position: relative;
	}
	
	.flexstart  {
		align-content: flex-start;
	}
	
	.flexcenter {
		align-content: center;
	}
	
	.flexend {
		align-content: flex-end;
	}

	#menu {
		display: flex;
	}

	#menu-btn {
		display: none;
	}


		
	#menu-btn img {
		width: 22px;
		height: 22px;
	}

	/* Horizontal menu */
  #menu {
    display: flex;
    justify-content: space-between;
	  align-items: center;
  }

  #menu ul {
    display: flex;
    flex-wrap: wrap;
    justify-content: flex-end;
	  padding: 0px;
  }

  #menu li {
    position: relative;
	  list-style: none;
  }

  #menu > ul > li > .sub-menu-icon {
    display: none;
  }

  #menu li:hover > .sub-menu {
    display: block;
  }

  #menu .sub-menu {
    background-color: #fff;
    display: none;
    min-width: 200px;
    position: absolute;
    top: 100%;
    left: 0;
    z-index: 999;
	border-radius: 0px 12px 12px 12px;
	box-shadow: 0px 0px 20px rgba(0,0,0,0.3);
  }

  #menu .sub-menu li {
    display: block;
  }

  #menu .sub-menu li a {
	color: #000;
    display: block;
    padding: 7px;
    white-space: nowrap;
  }

	#menu a {
		color: #FFF;
		padding: 7px;
		border-radius: 7px;
		text-decoration: none;
		border-radius: 7px;
		line-height: 20px;
		font-size: 13px;
		font-weight: 500;
		font-weight: 500;
		background: rgba(255,255,255,0);
  		transition-duration: 0.5s;
		border: 1px solid rgba(255,255,255,0);
	}
	
	#menu a:hover {
		background: rgba(255,255,255,0.25);
  		transition-duration: 0.5s;
		border: 1px solid rgba(255,255,255,0.5);
	}

	#settings {
		background-color: #777
	}
	
	#pagename {
		color: #fff;
		height: 75px;
	}
	
	#pageactions {
	}
	
	#pagesettings {
		flex: 100%;
		display: none;
		overflow: hidden;
		height: auto;
	}
	
	#pagesettings label {
		display: block;
		box-sizing: border-box;
		width: 25%;
		float: left;
		background: rgba(255,255,255,0.05);
		border: 1px solid rgba(255,255,255,0.2);
		border-right: 0px solid rgba(255,255,255,0.2);
		border-radius: 7px 0px 0px 7px;
		margin: 5px 0px;
		height: 25px;
		line-height: 25px;
		padding-left: 10px;
		clear: none;
	}
	
	#pagesettings label:nth-of-type(2n) {
		margin-left: 5px;
		width: calc(25% - 5px);
	}
	
	#pagesettings ::placeholder {
		color: rgba(255,255,255,0.5);
	}
	
	#pagesettings option {
		color: #000;
	}
	
	#pagesettings button {
		width: 100%;
		margin: 10px 0px;
		box-sizing: border-box;
		border: 1px solid rgba(255,255,255,0);
	}

	#pagesettings button:nth-child(n+2) {
  		margin-left: 10px;
	}

	#pagesettings button[value="Delete"] {
		background-color: transparent;
		border: 1px solid red;
		padding: 7px;
		width: 20%;
	}
	
	#pagesettings button:hover {
		transform: scale(1);
		border: 1px solid rgba(255,255,255,1);
	}

	.select2-container--default .select2-selection--single .select2-selection__rendered {
		color: #000;
		height: 35px;
		line-height: 35px;
	}
	
	.select2-results__option {
		padding: 2px;
	}

	.select2-container {
		width: 50% !important;
		clear: right;
		margin: 5px 0px;
		height: 25px;
		line-height: 25px;
	}

	.select2-container input {
		float:none;
		border-radius: 0px;
	}

	.select2-container--default .select2-selection--single {
		display: block;
		box-sizing: border-box;
		border: 1px solid rgba(0,0,0,0.2);
		border-left: 1px solid rgba(0,0,0,0.2);
		border-radius: 0px 5px 5px 0px;
		width: 100%;
		float: left;
		clear: right;
		height: 35px;
		line-height: 35px;
  		transition-duration: 0.3s;
		font-weight: bold;
		padding-left: 10px;
	}
	
	#pagesettings input, #pagesettings select {
		display: block;
		box-sizing: border-box;
		background: rgba(255,255,255,0.4);
		border: 1px solid rgba(255,255,255,0.2);
		border-left: 1px solid rgba(255,255,255,0.2);
		border-radius: 0px 5px 5px 0px;
		width: 25%;
		float: left;
		clear: right;
		margin: 5px 0px;
		height: 25px;
		line-height: 25px;
  		transition-duration: 0.3s;
		font-weight: bold;
		padding-left: 10px;
		color: #fff;
	}
	
	.actions a:last-child {
		background: #fd397a;
	}
	
	button:last-child {
		background: rgba(0,169,203,1);
	}

	button:disabled {
	  border: 1px solid gray;
	  background-color: transparent;
	  color: gray;
	  cursor: not-allowed;
	}

	button:disabled:hover {
	  background-color: transparent;
	  border-color: gray;
	  color: gray;
	  cursor: not-allowed;
	  /* add the forbidden icon as a background image or icon font */
	}

	#pageheader .blockheader {
		height: 25px;
		padding-left: 5px;
		padding-bottom: 5px;
	}
	
	.actions a, button {
		color: #FFF;
		padding: 7px;
		border-radius: 5px;
		text-decoration: none;
		border-radius: 4px;
		line-height: 20px;
		font-size: 13px;
		font-weight: 500;
		font-weight: 500;
		background: #777;
		margin: 0px 0px 0px 7px;
		box-shadow: 0px 0px 0px rgba(0,0,0,0);
		border: 1px solid rgba(255,255,255,0);
  		transition-duration: 0.3s;
	}
	
	.actions a:hover, button:hover {
		transform: scale(1);
		cursor: pointer;
		border: 1px solid rgba(255,255,255,1);
		box-shadow: 0px 0px 10px rgba(0,0,0,0.5);
  		transition-duration: 0.3s;
	}

	.blue-text {
		color: #00a9cb;
	}
	
	.gradient-bg {
		color: #fff;
		background: rgb(33,27,130);
		background: linear-gradient(90deg, rgba(33,27,130,1) 0%, rgba(42,42,153,1) 25%, rgba(0,169,203,1) 100%);
	}
	
	.white-bg {
		background: rgba(255,255,255,1);
		box-shadow: 0px 0px 30px 0px rgba(0,0,0,0.2);
	}
	
	.width-10 {
		width: 10%;
		flex-grow: 1;
	}
	
	.width-25 {
		width: 25%;
		flex-grow: 2.5;
	}
	
	.width-20 {
		width: 20%;
		flex-grow: 2;
	}
	
	.width-30 {
		width: 30%;
		flex-grow: 3;
	}
	
	.width-40 {
		width: 40%;
		flex-grow: 4;
	}
	
	.width-50 {
		width: 50%;
		flex-grow: 5;
	}
	
	.width-60 {
		width: 60%;
		flex-grow: 6;
	}
	
	.width-70 {
		width: 70%;
		flex-grow: 7;
	}
	
	.width-80 {
		width: 80%;
		flex-grow: 8;
	}
	
	.width-90 {
		width: 80%;
		flex-grow: 9;
	}
	
	.width-100 {
		width: 100%;
		flex-grow: 10;
	}

	.flex-25 {
		flex-basis: 21%;
		flex-grow: 2.5;
	}

	.flex-50 {
		flex-grow: 5;
		max-width: 50%;
	}
	
	.row {
		flex: 1;
		padding: 5px;
		overflow: hidden;
		font-family: 'Rubik', sans-serif;
		font-size: 13px;
		min-height: 22px;
		line-height: 22px;
	}

	.outofstock {
		background: rgba(241,0,74,1.00);
		color: #fff;
		background: linear-gradient(90deg, rgba(176,0,54,1.00) 0%, rgba(241,0,74,1.00) 100%);
	}

	.outofstock .tag {
		color: #fff;
		border-color: #fff;
	}
	
	.right {
		justify-content: right;
		text-align: right;
	}
	
	.left {
		justify-content: left;
		text-align: left;
	}
	
	.center {
		justify-content: center;
		text-align: center;
	}
	
	.bottomdotted {
		border-bottom: 1px dotted rgba(0,0,0,1);
	}
	
	.bold {
		font-weight: bold;
	}
	
	.discount {
		color: #fd397a;
	}
	
	.years a {
		text-decoration: none;
		font-size: 16px;
		color: #000;
	}
	
	.years a {
		text-decoration: none;
		font-size: 16px;
		color: #000;
		margin: 5px;
	}
	
	.years a+.active {
		font-size: 22px;
	}
	
	#account .avatar {
		width: 32px;
		height: 32px;
		background: rgba(255,255,255,0.25);
		line-height: 32px;
		font-size: 18px;
		font-family: 'Rubik', sans-serif;
		font-weight: bold;
		border-radius: 7px;
		text-align: center;
		color: #FFF;
		cursor: pointer;
		text-transform: uppercase;
	}
	
	label {
		display: block;
		box-sizing: border-box;
		width: 50%;
		float: left;
		background: rgba(0,0,0,0.05);
		border: 1px solid rgba(0,0,0,0.2);
		border-right: 0px solid rgba(0,0,0,0.2);
		border-radius: 7px 0px 0px 7px;
		margin: 5px 0px;
		height: 35px;
		line-height: 35px;
		padding-left: 10px;
		clear: left;
	}
	
	input, select, textarea {
		display: block;
		box-sizing: border-box;
		border: 1px solid rgba(0,0,0,0.2);
		border-left: 1px solid rgba(0,0,0,0.2);
		border-radius: 0px 5px 5px 0px;
		width: 50%;
		float: left;
		clear: right;
		margin: 5px 0px;
		height: 35px;
		line-height: 35px;
  		transition-duration: 0.3s;
		font-weight: bold;
		padding-left: 10px;
	}
	
	input:focus, input:active, select:focus {
		background: rgb(0,169,203);
		background: linear-gradient(90deg, rgba(0,169,203,0) 0%, rgba(0,169,203,0.5) 100%);
		outline: none;
  		transition-duration: 0.3s;
	}

	input.error, input:active.error, select:focus.error {
		background: rgb(200,25,25);
		background: linear-gradient(90deg, rgba(200,25,25,0) 0%, rgba(200,25,25,0.5) 100%);
		outline: none;
  		transition-duration: 0.3s;
	}

	input.success, input:active.success, select:focus.success {
		background: rgb(25,200,50);
		background: linear-gradient(90deg, rgba(25,200,50,0) 0%, rgba(25,200,50,0.5) 100%);
		outline: none;
  		transition-duration: 0.3s;
	}
	
	#calendar {
		display: grid;
  		grid-gap: 1px;
		grid-template-columns: repeat(3, 1fr);
	}
	
	.month {
		display: flex;
		flex-wrap: wrap;
		margin: 10px;
		padding: 10px;
		background: rgba(0,0,0,0.05);
		border: 1px solid rgba(0,0,0,0.2);
		border-radius: 7px;
		min-height: 150px;
		align-content: flex-start;
	}
	
	.month a {
		display: block;
		line-height: 15px;
		height: 15px;
		padding: 3px;
		margin: 2px;
		white-space: nowrap;
		background: rgba(0,0,0,0.2);
		color: rgba(255,255,255,1);
		text-decoration: none;
		border-radius: 3px;
	}
	
	.month a.confirmed, .confirm {
		background: #00A520;
	}
	
	.textoverflow {
		white-space: nowrap;
		overflow: hidden;
		text-overflow: ellipsis; 
	}
	.list-compact {
		display: flex;
		flex-wrap: wrap;
	}
	.list-compact .tag, .tag, .list-compact .modalbutton {
		margin-bottom: 3px;
		cursor: pointer;
		text-decoration: none;
	}
	.list-compact a[id^="editPMCalendaruser"] {
		background-color: #00a9cb;
		font-family: 'Rubik', sans-serif;
		min-width: 15px;
		color: #fff;
		font-weight: bold;
	}
	.list-compact a[id^="editJCalendaruser"] {
		background-color: #777;
		min-width: 15px;
		text-align: center;
		color: #fff;
		font-weight: bold;
	}
	.list-compact a[id^="editSCalendaruser"] {
		background-color: #FFC300;
		font-family: 'Rubik', sans-serif;
		min-width: 15px;
		text-align: center;
		color: #fff;
		font-weight: bold;
	}
	.list-compact a[id^="editSYCalendaruser"] {
		background-color: #00AF24;
		font-family: 'Rubik', sans-serif;
		min-width: 15px;
		text-align: center;
		color: #fff;
		font-weight: bold;
	}
	.tag, .list-compact .modalbutton {
		border: 1px solid #fd397a;
		font-family: 'Rubik', sans-serif;
		color: #fd397a;
		border-radius: 3px;
		padding: 2px;
		margin-right: 2px;
	}
	a.file {
		border: 1px solid rgba(33,27,130,1);
		color: rgba(33,27,130,1);
		border-radius: 3px;
		padding: 2px;
		display: inline-block;
	}
	
	.row:hover .row-actions, .row:active .row-actions {
		right: 0%;
  		transition-duration: 0.25s;
	}

	.row:hover {
		background-color: rgba(0,0,0,0.15);
	}
	
	#account:hover .account-modal {
		display: block;
	}
	
	#account .account-modal {
		position: absolute;
		top: 48px;
		right: 0px;
		width: 200px;
		padding: 20px;
		line-height: 20px;
		z-index: 99;
		display: none;
		border-radius: 12px 0px 12px 12px;
		box-shadow: 0px 0px 20px rgba(0,0,0,0.3);
		color: #111;
	}
	
	.row-actions {
		position: absolute;
		right: -25%;
		overlfow: hidden;
  		transition-duration: 0.15s;
	}
	
	.buttonsq, .row-actions a {
		height: 100%;
		padding: 50px 10px;
		color: #fff;
		cursor: pointer;
		text-decoration: none;
		background-color: #777;
	}
	
	.row-actions a[id^="edit"] {
		background-color: #777;
	}

	.buttonsq a:contains("Delete") {
		background: red;
	}
	
	.buttonsq.delete {
		background: red;
	}
	
	.buttonsq.edit {
		background: #777;
	}
	
	.formactions {
		display: block;
		display: flex;
		box-sizing: border-box;
		flex: 100%;
		width: 100%;
		text-align: right;
		padding: 10px 0px 0px 0px;
	}

	#stickyaction {
		display: block;
		position: fixed;
		bottom: 10%;
		right: 5px;
		z-index: 50;
		text-align: right;
	}

	#stickyaction a {
		display: inline-block;
		font-size: 16px;
		font-weight: bold;
		line-height: 22px;
		height: 30px;
		width: 30px;
		color: #fff;
		border-radius: 4px;
		border: 3px #333 solid; 
		padding: 5px;
		background: #333;
		text-decoration: none;
		padding: 0px;
		overflow: hidden;
  		transition-duration: 0.3s;
		box-sizing: border-box;
		white-space: nowrap;
		text-align: center;
		position: relative;
		right: 0px;
	}

	#stickyaction > div {
		background: none;
	}

	#stickyaction .confirm a {
		background-color: #00A520;
	}

	#stickyaction .cancel a {
		background-color: rgba(165, 0, 32, 1);
	}

	#stickyaction a:hover {
		width: 150px;
		text-overflow: inherit;
		border-color: #fff;
		box-shadow: 0px 0px 10px rgba(0,0,0,0.5);
  		transition-duration: 0.3s;
	}
	
	#calendarlist .row {
		display: flex;
		flex-wrap: wrap;
		margin: 10px 0px;;
		padding: 10px;
		background: rgba(0,0,0,0.05);
		border: 1px solid rgba(0,0,0,0.2);
		border-radius: 7px;
		align-content: flex-start;
	}
	
	#calendarlist .confirmed {
		border: 1px solid rgba(0, 165, 32, 1);
		background: rgba(0, 165, 32, 0.2);
	}

	#calendarlist .cancelled {
		border: 1px solid rgba(165, 0, 32, 1);
		background: rgba(165, 0, 32, 0.2);
		text-decoration: line-through;
	}
	
	.modal {
		display: none;
		position: fixed;
		box-sizing: border-box;
		top: 0;
		left: 0;
		z-index: 99;
		width: 100%;
		height: 100%;
		max-height: 100%;
		overflow-y: auto;
		background: rgba(0,0,0,0.3);
		padding-bottom: 20px;
	}
	
	.modal .modalcontent {
		display: block;
		width: calc(100% - 40px);
		background: rgba(255,255,255,1);
		box-shadow: 0px 0px 30px rgba(0,0,0,0.5);
		overflow: hidden;
		position: absolute;
		float: left;
		left: 50%;
		top: 5%;
		transform: translate(-50%, 0%);
		max-width: 1024px;
		color: #000;
	}
	
	.feedback-message {
		display: none;
		position: fixed;
		top: 10px;
		left: 50%;
		transform: translateX(-50%);
		background-color: white;
		padding: 1rem;
		border-radius: 7px;
		box-shadow: 0px 0px 30px rgba(0,0,0,0.5);
		z-index: 999;
	}

	.notice {
		width: 90%;
		height: auto;
		padding: 7px;
		border: 1px dotted #777;
		border-radius: 7px;
		margin-left: auto;
		margin-right: auto;
		margin-top: 24px;
		margin-bottom: 24px;
		box-sizing: border-box;
		text-align: center;
	}
	.notice svg {
		margin-left: auto;
		margin-right: auto;
		width: 32px;
	}
	.notice .message {
		margin-top: 12px;
		font-weight: bold;
	}
	.pointer {
		cursor: pointer;
  		transition-duration: 0.3s;
	}
	.pointer:hover {
		cursor: pointer;
		border: 1px solid rgba(255,255,255,1);
		box-shadow: 0px 0px 10px rgba(0,0,0,0.5);
  		transition-duration: 0.3s;
	}

	.row.Confirmed {
		border-left: solid 5px green;
	}

	.row.Cancelled {
		border-left: solid 5px red;
	}

	.row.Reserved {
		border-left: solid 5px orange;
	}

	.row.Pending {
		border-left: solid 5px grey;
	}
	
	@media screen and (max-width: 800px) {
		html, body {
			font-size: 9px;
		}
		.sticky + .content {
			padding-top: 40px;
		}
  		#header {
			height: 40px;
			padding: 0 5px;
		}
		#logo img {
			height: 22px;
		}
		#account .avatar {
			height: 22px;
			width: 22px;
			line-height: 22px;
			font-size: 14px;
		}
		#pagecontent, .pagecontent {
			box-sizing: border-box;
			margin: 0px 0px;
		}
		h1 {
			font-size: 1.5em;
		}
		.padding-0-30 {
			padding: 0px 5px;
		}
		#pagesettings label, #pagesettings label:nth-of-type(2n) {
			width: 50%;
			margin: 5px 0px;
		}
		#pagesettings input, #pagesettings select {
			width: 50%;
			margin: 5px 0px;
		}
		
		/* hide the menu by default */
		#menu {
			position: fixed;
			top: 0;
			left: -400px;
			height: 100%;
			width: 300px;
			background-color: #eee;
			z-index: 999;
			transition: left 0.3s ease-in-out;
			padding: 10px;
			box-shadow: 0px 0px 30px 0px rgba(0,0,0,0.4);
		}
		
		#menu-btn {
			display: flex;
			align-items: center;
		}

		/* show the menu when the overlay class is added to the body */
		body.overlay #menu {
			left: 0;
		}

		/* style the menu items */
		#menu ul {
			list-style: none;
			margin: 0;
			padding: 0;
		}
		

		#menu li {
			margin: 0;
			padding: 0;
			position: relative;
		width: 100%;
		}

		#menu li a {
			display: block;
			padding: 10px 20px;
			color: #333;
			text-decoration: none;
		}

		/* add arrow icon to parent items */
		#menu .sub-menu-icon:before {
			content: "\25B6";
			display: block;
			position: absolute;
			top: 50%;
			right: 10px;
			transform: translateY(-50%);
			font-size: 14px;
			color: #666;
		}

		/* rotate arrow icon when sub menu is shown */
		#menu .sub-menu-icon.open:before {
			transform: translateY(-50%) rotate(90deg);
		}

		/* hide sub menu by default */
		#menu .sub-menu {
			max-height: 0;
			overflow: hidden;
			transition: max-height 0.3s ease-in-out;
			
		}

		/* show sub menu when parent item is clicked */
		#menu .sub-menu.open {
			max-height: 500px; /* adjust to fit the content */
		}
		
		.actions a, button {
			padding: 3px;
		}
		#pagename {
			height: 25px;
		}
		.flex {
			justify-content: flex-start;
		}
		#subheader {
			min-height: 0px;
			padding: 5px 5px;
		}
		#pageheader  {
			min-height: 0px;
		}
		label, input, select {
			height: 20px;
			line-height: 20px;
		}
		
		

		.select2-container--default .select2-selection--single .select2-selection__rendered {
			color: #000;
			height: 20px;
			line-height: 20px;
		}
		
		.select2-container {
		height: 20px;
		line-height: 25px;
		}

		.select2-container--default .select2-selection--single {
			height: 20px;
			line-height: 20px;
		}
		.blockheader {
			height: 35px;
		}
		.totals .blockheader {
			height: 20px;
		}
		.flex-50 {
			flex-grow: 5;
			min-width: 50%;
		}
		.flex-25 {
			flex-basis: 21%;
			flex-grow: 5;
			min-width: 50%;
		}
		.singleform {
			max-width: 700px;
			width: 80%;
			position: absolute;
			top: 40%;
			left: 50%;
			transform: translate(-50%, -50%);
		}
		.singleform input {
			width: 100%;
			line-height: 24px;
			height: 34px;
			margin-top: 0px;
			border-radius: 7px;
		}

		.singleform label {
			width: 0%;
			display: none;
		}

		.singleform button {
			width: 100%;
			margin: 0px;
			background: rgba(0,169,203,1);
			line-height: 24px;
			height: 34px;
			margin-top: 5px;
		}
		.row {
			flex: 1;
			padding: 3px;
			overflow: hidden;
			font-family: 'Rubik', sans-serif;
			font-size: 11px;
			height: 20px;
			line-height: 20px;
		}
		.hideonsmall {
			display: none !important;
			visibility: hidden !important;
		}
		.right {
			justify-content: right;
			text-align: right;
		}
		
	}