/* this is to remove the thick black outline that chrome has added in version 83 */
	*,*:focus,*:hover{
	    outline:none;
	}
/**/

body {
	background-color: rgba(0, 0, 100, 0.03);
}

#page_layout_container {
	display: grid;
	grid-template-columns: auto;
	grid-template-rows: min-content 1fr min-content;
	height: 100%;
}

#page_layout_content {
	padding: 20px 20px;
	/* this centers everything
		display: flex;
		justify-content: center;
		flex-direction: column;
	*/
}

.custom_label {
	padding: 0.3em 0.3em !important;
	border-radius : 50% !important;
	top: 8px !important;
    right: 20px !important;
}


/* change the header and hover background colour of the tables */
	.ui.table tbody tr td.selectable:hover, .ui.ui.selectable.table>tbody>tr:hover {
		background-color: rgba(0, 0, 50, .01) !important;
	}

	.ui.table>thead>tr>th {
		background-color: rgba(0, 0, 50, .02) !important;
	}
/**/

/* semantic basic selectable striped tables don't highlight correctly - this works around that issue */
	.ui.basic.striped.selectable.table tbody tr:nth-child(2n) {
		background-color: rgba(0, 0, 50, .02) !important;
	}

	.ui.basic.striped.selectable.table tbody tr:nth-child(2n):hover {
		background-color: rgba(0, 0, 0, .05) !important;
		color: rgba(0, 0, 0, .95) !important;
	}
/**/

/* semantic dropdowns can't be made as required.  This should hopefully fix it to a degree. This has a matching function in layout.blade */
	.ui.dropdown.required>select {
		display: block !important;
		width: 1px;
		height: 1px;
		overflow-y: hidden;
		font-size: 0px;
		opacity: 0;
		position: absolute;
		top: 32px;
	}
/**/

/* remove the curved corners for the menu */
	.ui.menu, .ui.menu>.item:first-child {
		border-radius: unset;
		margin: unset;
	}
/**/

.ui.inverted.grey.menu {
	background-color: rgb(71, 71, 70) !important;
	box-shadow: 0 2px 4px 0 rgba(0,0,0,0.15);
}


#page_layout_footer > .ui.menu {
	justify-content: center;
}

/* these reduce the outlines */
	.ui.segment:not(.attached):not(.basic),
	.ui.segments,
	.ui.menu .dropdown.item .menu,
	.ui.card,
	.ui.cards>.card,
	.ui.styled.accordion,
	.ui.styled.accordion .accordion,
	.ui.pagination.menu
	{
		border: 0px !important;
		box-shadow: 0 1px 3px 0 rgba(0, 0, 0, 0.15);
	}

	.ui.raised.card {
		box-shadow: 0 2px 4px 0 rgba(34,36,38,.12), 0 2px 10px 0 rgba(34,36,38,.15);
	}

/**/

/* this makes it so an empty or unused label on a checkbox doesn't take up space. */
.ui.checkbox.hidelabel label {
	padding: 0px;
}


.ui.grid>.column:not(.row), .ui.grid>.row>.column {
	padding: 1rem 1rem;
}

/* allow the labels to wrap to new lines */
.ui.label>.detail {
	word-break: break-all;
}

/* adjust the toggle to be to Payal's liking :) */
	.ui.toggle.checkbox label:before {
		width: 2.5rem;
	}

	.ui.toggle.checkbox input:checked~label:after {
	    left: 1.15rem;
	}

	.ui.indeterminate.toggle.checkbox input:not([type=radio])~label:after {
	    left: 0.57rem;
	}
/**/

/* these are the selectable cards, currently used for the create order packages */
	.ui.cards>.card.active {
		border: 1px solid #2185d0 !important;
	}

	.ui.cards>.card.active>.content>.check.icon {
		color: #2185d0;
		position: absolute;
		top: -27px;
		z-index: 10;
		right: -30px;
		border: 2px solid #2185d0;
		border-radius: 100%;
		width: 28px;
		height: 28px;
		padding: 3px;
		background: #ffffff;
	}
/**/

#top_buttons_bar{
	padding-bottom: 0;
}

#page_layout_content .ui.header {
	margin: calc(0rem - .1428571428571429em) 0 0.5rem;
}

.table th{
	text-transform: capitalize !important;
}

.table th a{
	color : rgba(0,0,0,.87) !important;
}

.appear.hoverable {
	margin-bottom: 10px;
}
/* .table th a i{
	color : #4183c4 !important;
} */
/*
	Media Query Classes
	Materialize v1.0.0 (materializecss.com)
	Copyright 2014-2017 Materialize
	MIT License (https://raw.githubusercontent.com/Dogfalo/materialize/master/LICENSE)
*/
	.show-on-small-only {
		display: none !important;
	}
	.show-on-med-and-down-only {
		display: none !important;
	}
	@media only screen and (max-width: 600px) {
		.hide-on-small-only, .hide-on-small-and-down {
			display: none !important;
		}
		.show-on-small-only {
			display: block !important;
		}
	}

	@media only screen and (max-width: 992px) {
		.hide-on-med-and-down, .hide-on-med-and-down-only {
			display: none !important;
		}
		.show-on-med-and-down-only {
			display: block !important;
		}
	}

	@media only screen and (min-width: 601px) {
		.hide-on-med-and-up {
			display: none !important;
		}
	}

	@media only screen and (min-width: 600px) and (max-width: 992px) {
		.hide-on-med-only {
			display: none !important;
		}
	}

	@media only screen and (min-width: 993px) {
		.hide-on-large-only {
			display: none !important;
		}
	}

	@media only screen and (min-width: 1201px) {
		.hide-on-extra-large-only {
			display: none !important;
		}
	}

	@media only screen and (min-width: 1201px) {
		.show-on-extra-large {
			display: block !important;
		}
	}
	
	@media only screen and (min-width: 993px) {
		.show-on-large {
			display: block !important;
		}
	}

	@media only screen and (min-width: 600px) and (max-width: 992px) {
		.show-on-medium {
			display: block !important;
		}
	}

	@media only screen and (max-width: 600px) {
		.show-on-small {
			display: block !important;
		}
	}

	@media only screen and (min-width: 601px) {
		.show-on-medium-and-up {
			display: block !important;
		}
	}

	@media only screen and (max-width: 992px) {
		.show-on-medium-and-down {
			display: block !important;
		}
	}

	@media only screen and (max-width: 600px) {
		.center-on-small-only {
			text-align: center;
		}
	}

/* added by payal just to make create campaign look more nicer. */
	
	@media only screen and (min-width: 1200px) {
	
		.ui.ui.ui.container:not(.fluid) {
			width: 1202px;
		}
		
	}	




/* animation for cars and segments to appear */

	.appear {
		opacity: 0;
		-webkit-animation: appear 0.25s ease-in-out forwards;
		animation: appear 0.25s ease-in-out forwards;
		animation-delay: 0ms;
		z-index: 10;	/* this allows dropdowns to appear above hidden segments eg. button bars beneath a segment */
	}

	@keyframes appear {
		0% {
			opacity: 0;
			-webkit-transform: scale(0.98);
			transform: scale(0.98);
		}

		100% {
			opacity: 1;
			-webkit-transform: scale(1);
			transform: scale(1);
		}
	}


/* hover animation for segments and cards, borrowed from materialize */

	.hoverable:hover {
		box-shadow: 0 6px 12px 0 rgba(0, 0, 0, 0.15) !important;
		top: -0px;
	}

	.hoverable {
		top: 0px;
		-webkit-transition: top .25s, -webkit-box-shadow .25s;
		transition: top .25s, -webkit-box-shadow .25s;
		transition: top .25s, box-shadow .25s;
		transition: top .25s, box-shadow .25s, -webkit-box-shadow .25s;
	}



.cursor_default {
	cursor: default !important;
}

.cursor_pointer {
	cursor: pointer !important;
}

/* undo the semantic cursor for some things */
.ui.selectable.table>tbody>tr, .ui.selectable.table>tr, .ui.table>tbody>tr>td.selectable, .ui.table>tr>td.selectable {
	cursor: default !important;
}

.no-wrap {
	white-space: no-wrap;
}



/* notification menu bits */
        .ui.menu .dropdown.item .notification_menu {
                min-width: max-content;
                width: 400px !important;
        }

        .ui.menu .pointing.dropdown.item .notification_menu {
                margin-top: 0px;
        }
        .ui.dropdown .notification_menu>.divider {
                margin: 0px;
        }

        .ui.dropdown .notification_menu>.header {
                padding: 0.4rem;
                font-size: .9em !important;
            text-align: center;
        }

        .ui.menu .ui.dropdown .notification_menu>.item {
                padding: 1.14285714em 1.14285714em!important;
                border-bottom: 1px solid #eaeaea;
        }

        .ui.menu .ui.dropdown .notification_menu>.item.new_notification {
                background: #f6f6f6 !important;
        }

        .ui.menu .ui.dropdown .notification_menu>.item:hover {
                color: rgba(0,0,0,.95) !important;
                background: none !important;
        }

        .notification_message {
                color: grey;
        }

        .ui.menu .ui.dropdown .notification_menu .header {
                text-transform: none;
        }

        .ui.menu .ui.dropdown .notification_menu .header .grid > div:first-child {
                text-align: left;
        }
        .ui.menu .ui.dropdown .notification_menu .header .grid > div:last-child {
                text-align: right;
        }
        .ui.menu .ui.dropdown .notification_menu .header .grid > div:last-child a {
                cursor: pointer;
        }
.disable {
	position: relative !important;
	background: #dfdfdf !important;
	cursor: not-allowed !important;
}
.message_info {
	position: absolute;
	display: flex;
	flex-wrap: nowrap;
	align-content: center;
	align-items: center;
	justify-content: center;
	height: 100%;
	width: 100%;
	z-index: 999;
}
.message_info .message {
	padding: 10px 10px;
	margin: 0px 20px;
}
.message_info .content {
	padding: 0;
}
.message_info p {
	margin-top: 0.2em !important;
}
.disable_content {
	opacity: 0.2;
}

#page_layout_header .cashbalance {
	background-color: transparent
}

#page_layout_header .cashbalance .item {
	border-radius: 20px;
	height: 30px;
	margin-top: 10px;
	padding: 10px;
	background-color: #0D4A6E !important;
}
#unpaid-notif-banner {
	background-color: #FC8686;
	padding: 5px 20px 5px 20px;
	color: black;
	font-size: 13px;
}
#hide-payment-warning {
	float: right;
	cursor: pointer;
}