/*******************************
            Select
*******************************/

/* Reduce the padding of select element */
.ui.form select {
	padding-top: 0.35em;
	padding-bottom: 0.35em;
	padding-left: 0.8em;
}

/*******************************
            Checkbox
*******************************/

/* Add support of different size of checkbox */
.ui.toggle.checkbox.small label:before {
	width: 2.5rem;
	height: 1rem;
}

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

.ui.indeterminate.toggle.checkbox.small
	input:not([type="radio"])
	~ label:after {
	left: 0.75rem;
}

.ui.toggle.checkbox.small label {
	padding-left: 3.5rem;
}

/*******************************
             Grid
*******************************/

/* Fix margin when grid without columns/rows */
.ui.grid:empty {
	margin: 0;
}

/* Fix row padding with compact/very compact class */
.ui.ui.ui.compact.grid > .row,
.ui.ui.ui[class*="very compact"].grid > .row {
	padding-left: 0;
	padding-right: 0;
}

/*******************************
            JSGrid
*******************************/

/* Change color of loading logo */
.jsgrid .jsgrid-load-panel:before {
	border-color: #767676;
    border-right-color: rgba(0,0,0,.1);
}

/* Reduce the padding of input elements in JSGrid */
.ui.form.jsgrid input:not([type]),
.ui.form.jsgrid input[type="date"],
.ui.form.jsgrid input[type="datetime-local"],
.ui.form.jsgrid input[type="email"],
.ui.form.jsgrid input[type="file"],
.ui.form.jsgrid input[type="number"],
.ui.form.jsgrid input[type="password"],
.ui.form.jsgrid input[type="search"],
.ui.form.jsgrid input[type="tel"],
.ui.form.jsgrid input[type="text"],
.ui.form.jsgrid input[type="time"],
.ui.form.jsgrid input[type="url"],
.ui.form.jsgrid select {
	padding-left: 3px;
	padding-right: 3px;
}

/* Fix missing background in invalid fields */
.ui.form.jsgrid .jsgrid-invalid input,
.ui.form.jsgrid .jsgrid-invalid select,
.ui.form.jsgrid .jsgrid-invalid select + .select2 .select2-selection,
.ui.form.jsgrid .jsgrid-invalid textarea {
	background: #ffe3e5 !important;
	border: 1px solid #ff808a !important;
}

.ui.form.jsgrid .jsgrid-row.positive > .jsgrid-cell,
.ui.form.jsgrid .jsgrid-alt-row.positive > .jsgrid-cell {
	background: #fcfff5 !important;
	color: #2c662d !important;
	-webkit-box-shadow: 0 0 0 #a3c293 inset;
	box-shadow: 0 0 0 #a3c293 inset;
}

.ui.form.jsgrid .jsgrid-row.negative > .jsgrid-cell,
.ui.form.jsgrid .jsgrid-alt-row.negative > .jsgrid-cell {
	background: #fff6f6 !important;
	color: #9f3a38 !important;
	-webkit-box-shadow: 0 0 0 #e0b4b4 inset;
	box-shadow: 0 0 0 #e0b4b4 inset;
}

.ui.form.jsgrid .jsgrid-row.row-selected > .jsgrid-cell,
.ui.form.jsgrid .jsgrid-alt-row.row-selected > .jsgrid-cell {
	background: #c4e2ff !important;
	border-color: #c4e2ff !important;
	-webkit-box-shadow: none;
	box-shadow: none;
}

/*******************************
             Select2
*******************************/

/* Apply theme style to select2 dropdown */
.ui.form select + .select2 {
	display: block;
	width: 100% !important;
}

.ui.form select + .select2,
.ui.form select + .select2.select2-container--focus,
.ui.form select + .select2 .select2-selection,
.ui.form select + .select2 .select2-selection:focus {
	outline: 0;
	-webkit-appearance: none;
	-webkit-tap-highlight-color: rgba(255, 255, 255, 0);
}

.ui.form select + .select2.select2-container--focus .select2-selection,
.ui.form select + .select2.select2-container--open .select2-selection {
	color: rgba(0, 0, 0, 0.95);
	border-color: #85b7d9;
	border-radius: 0.28571429rem;
	background: #fff;
	-webkit-box-shadow: 0 0 0 0 rgba(34, 36, 38, 0.35) inset;
	box-shadow: 0 0 0 0 rgba(34, 36, 38, 0.35) inset;
}

.ui.form select + .select2 .select2-selection {
	display: block;
	height: 34px;
	width: 100%;
	background: #fff;
	border: 1px solid rgba(34, 36, 38, 0.15);
	border-radius: 0.28571429rem;
	-webkit-box-shadow: 0 0 0 0 transparent inset;
	box-shadow: 0 0 0 0 transparent inset;
	padding: 0;
	color: rgba(0, 0, 0, 0.87);
	-webkit-transition: color 0.1s ease, border-color 0.1s ease;
	transition: color 0.1s ease, border-color 0.1s ease;
}

.ui.form select + .select2 .select2-selection__arrow,
.ui.form select + .select2 .select2-selection__clear {
	height: 34px;
}

.ui.form select + .select2 .select2-selection__clear {
	margin-right: 1px;
	font-size: 0.8em;
	width: 20px;
	padding-left: 0;
}

.ui.form
	select
	+ .select2
	.select2-selection__clear
	~ .select2-selection__arrow {
	display: none;
}

.ui.form
	select
	+ .select2
	.select2-selection__arrow
	~ .select2-selection__clear {
	display: inline-block;
}

.ui.form select + .select2.loading .select2-selection {
	/* border: none;
	margin-left: 0;
	margin-top: 0; */
}

.ui.form select + .select2.loading .select2-selection__arrow > b,
.ui.form select + .select2.loading .select2-selection__clear > span {
	display: none;
}

.ui.form select + .select2.loading .select2-selection:before {
	position: absolute;
	content: "";
	top: 50%;
	right: 2px;
	margin: -0.64285714em 0 0 -0.64285714em;
	width: 1.28571429em;
	height: 1.28571429em;
	border-radius: 500rem;
	border: 0.2em solid rgba(0, 0, 0, 0.1);
}

.ui.form select + .select2.loading .select2-selection:after {
	position: absolute;
	content: "";
	top: 50%;
	right: 2px;
	margin: -0.64285714em 0 0 -0.64285714em;
	width: 1.28571429em;
	height: 1.28571429em;
	-webkit-animation: loader 0.6s linear;
	animation: loader 0.6s linear;
	-webkit-animation-iteration-count: infinite;
	animation-iteration-count: infinite;
	border-radius: 500rem;
	border-color: #767676 transparent transparent;
	border-style: solid;
	border-width: 0.2em;
	-webkit-box-shadow: 0 0 0 1px transparent;
	box-shadow: 0 0 0 1px transparent;
}

.ui.form select + .select2 .select2-selection__rendered {
	padding-left: 1em;
	padding-right: 1em;
	line-height: 34px;
}

.select2-container .select2-results__option.loading-results {
	display: none;
}

/*******************************
        Select2 + JSGrid
*******************************/

/* Apply theme style to select2 dropdown */
.ui.form.jsgrid select + .select2 .select2-selection__rendered {
	padding-left: 3px;
	padding-right: 3px;
}

/* span.select2-selection__rendered {
    color: var(--text);
}
li.select2-results__option,
li.select2-results__option[aria-selected],
.select2-container--krajee li.select2-results__option,
.select2-container--krajee li.select2-results__option[aria-selected],
.select2-container--default li.select2-results__option,
.select2-container--default li.select2-results__option[aria-selected] {
    color: var(--text);
}
li.select2-results__option[aria-selected=false],
li.select2-results__option--highlighted[aria-selected=false],
.select2-container--krajee li.select2-results__option--highlighted[aria-selected=false],
.select2-container--default li.select2-results__option--highlighted[aria-selected=false] {
    color: white;
}
li.select2-results__option--highlighted,
li.select2-results__option--highlighted[aria-selected],
.select2-container--krajee li.select2-results__option--highlighted,
.select2-container--krajee li.select2-results__option--highlighted[aria-selected],
.select2-container--default li.select2-results__option--highlighted,
.select2-container--default li.select2-results__option--highlighted[aria-selected] {
    background-color: var(--thumbBGDim);
}
li.select2-results__option[aria-selected=true],
.select2-container--krajee li.select2-results__option[aria-selected=true],
.select2-container--default li.select2-results__option[aria-selected=true] {
    background-color: var(--thumbBGLighter);
}
.select2-container--open span.select2-selection,
span.select2-selection:focus,
.select2-container--krajee.select2-container--open span.select2-selection,
.select2-container--krajee span.select2-selection:focus,
.select2-container--default.select2-container--open span.select2-selection,
.select2-container--default span.select2-selection:focus {
    box-shadow: none;
    border-color: var(--thumbBGDim);
}
.select2-container--krajee span.select2-dropdown,
.select2-container--default span.select2-dropdown {
    border-color: var(--thumbBGDim);
} */

/*******************************
        Disabled Elements
*******************************/

/* Disable pointer event on disabled elements */
.ui.disabled {
	cursor: not-allowed;
	pointer-events: none;
}


/*******************************
        	Toast
*******************************/

/* Change color of toast */
.ui.toast.red {
	background-color: #c11f1f;
}

.ui.toast.green {
	background-color: #11a033;
}

.ui.toast.yellow {
	background-color: #f1b300;
}
.ui.toast-container.centered {
	left: 50%;
	top: 50%;
	-webkit-transform: translate(-50%,-50%);
	transform: translate(-50%,-50%);
	width: max(80%, 350px);
}
.ui.toast-container.centered .toast-box {
	width: 100%;
}
.ui.toast-container.centered .toast-box .ui.toast:not(.vertical) {
	width: 100%;
    max-width: unset;
}
.ui.toast-container.centered .toast-box > .ui.toast {
    margin: 0;
    margin-bottom: 0.01em;
    padding-top: 30px;
    padding-bottom: 30px;
}
.ui.toast-container.centered .toast-box > .ui.progress {
    width: calc(100% - 2px);
    margin-left: 1px;
    margin-right: 1px;
}

/*******************************
        	Modal
*******************************/

.ui.modal {
	height: auto;
	top: auto;
	left: auto;
}


/*******************************
    	Menu (New in 2.9.2)
*******************************/

.ui.center.aligned.menu:not(.fluid), .ui.centered.menu:not(.fluid) {
    display: inline-flex;
    transform: translateX(-50%);
    margin-left: 50%;
}

.ui.wrapping.menu {
    flex-wrap: wrap;
}


/*******************************
    	Hide Elements
*******************************/

@media only screen and (min-width: 1599.99px) {
	[class*="desktop hidden"],
	[class*="mobile only"]:not(.desktop),
	[class*="tablet only"]:not(.desktop) {
		display: none !important;
	}

	[class*="mobile hidden"]:not(.desktop) {
		display: flex !important;
	}
}

@media only screen and (min-width: 767.99px) and (max-width: 1599.98px) {
	[class*="tablet hidden"],
	[class*="mobile only"]:not(.tablet),
	[class*="desktop only"]:not(.tablet),
	[class*="computer only"]:not(.tablet),
	[class*="large monitor only"]:not(.tablet),
	[class*="widescreen monitor only"]:not(.tablet),
	[class*="or lower hidden"] {
		display: none !important;
	}

	[class*="mobile hidden"]:not(.tablet) {
		display: flex !important;
	}
}

@media only screen and (max-width: 767.98px) {
	[class*="mobile hidden"],
	[class*="tablet only"]:not(.mobile),
	[class*="desktop only"]:not(.mobile),
	[class*="computer only"]:not(.mobile),
	[class*="large monitor only"]:not(.mobile),
	[class*="widescreen monitor only"]:not(.mobile),
	[class*="or lower hidden"] {
		display: none !important;
	}
}