/*
 * We follow the BEM (Block Element Modifier) naming convention for our classes.
 * - Block: Encapsulates a standalone entity that is meaningful on its own.
 * - Element: Parts of a block and have no standalone meaning. Any element is semantically tied to its block.
 * - Modifier: Flags on blocks or elements. Use them to change appearance, behavior or state.
 *   Change how blocks or elements look or act.
 * For example:
 * - `.block` for block-level components. (Block)
 * - `.block__element` for elements within a block. (Element)
 * - `.block--modifier` for modifiers that change a block's appearance. (Modifier)
 *
 */

/* Import atk css :root constants */
@import '/modules/atk/look_and_feel/css/constants.css';

 /*
 * Download fonts from the page itself.
 * We will only use fonts that are contained in the fonts directory of the
 * corresponding look_and_feel.
 */

@font-face {
  font-family: "Open Sans" ;
  src:	url('/look_and_feel/fonts/OpenSans-Regular.woff2') format('woff2'),
		url('/look_and_feel/fonts/OpenSans-Regular.woff') format('woff'),
		url('/look_and_feel/fonts/OpenSans-Regular.ttf') format('truetype');
  font-weight: normal;
  font-style: normal;
}

@font-face {
  font-family: "Open Sans" ;
  src:	url('/look_and_feel/fonts/OpenSans-Italic.woff2') format('woff2'),
		url('/look_and_feel/fonts/OpenSans-Italic.woff') format('woff'),
		url('/look_and_feel/fonts/OpenSans-Italic.ttf') format('truetype');
  font-weight: normal;
  font-style: italic;
}

@font-face {
  font-family: "Open Sans" ;
  src:	url('/look_and_feel/fonts/OpenSans-Bold.woff2') format('woff2'),
		url('/look_and_feel/fonts/OpenSans-Bold.woff') format('woff'),
		url('/look_and_feel/fonts/OpenSans-Bold.ttf') format('truetype');
  font-weight: bold;
  font-style: normal;
}

table, th {
	border-collapse: collapse;
	cursor: default;
}

input[type=text], input[type=password] {
	outline: none;
	-webkit-user-select: text; 		/* Safari */
	-khtml-user-select: text; 		/* Konqueror HTML */
	-moz-user-select: text; 		/* Old versions of Firefox */
	-ms-user-select: text;
	user-select: text;
}

select:-webkit-scrollbar {
    width: 0px;
    height: 0px;
}

atkSkinRound {
	border: 2px solid #00b2ff;
	background: #ffffff;
	border-radius: 100%;
	cursor: pointer;
	transition: opacity .5s, background .25s;
	-webkit-transition: opacity .5s, background .25s;
}

atkSkinRect {
	border: 2px solid #00b2ff;
	border-radius: 10px;
	background: #ffffff;
	cursor: pointer;
	transition: opacity .3s;
	-webkit-transition: opacity 0.3s;
}

.text--font {
	font-family: "Open Sans";
    font-weight: normal;
    font-style: normal;
    font-variant: normal;

	text-transform: none;
    text-decoration: none;
    line-height: normal;
}

.text--normal {
    font-size: 14px;
	color: var(--body-text-color);
	margin: 0;
}

.text--title {
    font-size: 18px;
    color: var(--blue-color);
}

.text--right {
    text-align: right !important;
}

.text--in-out {
    text-align: center;
    font-size: 28px;
    line-height: 150%;
    color: white;
}

.input, .textarea, .select, .time-HM {
	border: var(--clickable-component-border);
	border-radius: 100px;
	background: #292929;
}

.input, .textarea, .select {
    font-size: 12px;
    color: var(--body-text-color);
	padding: 2px 10px 3px;
}

.textarea {
	border-radius: 10px;
	padding: 2px 10px;
}

.input__text {
    font-size: 12px;
    color: var(--body-text-color);
}

.select {
	cursor: pointer;
	background: url('../resources/select_arrow2.png') 100% / contain no-repeat #EEE;
	background-color: #292929;
	appearance: none;

    scrollbar-width: none; /*For Firefox*/;
    -ms-overflow-style: none;  /*For Internet Explorer 10+*/;
	-webkit-appearance: none;
	-moz-appearance: none;
}

.select option {
	color: var(--background-color);
	background-color: white;
}

.button {
	display: block;
	position: relative;
	width: fit-content;
	height: fit-content;
    font-size: 12px;
    text-align: center;
	padding: 1px 10px 2px 10px;
    border: 2px solid #00b2ff;
    border-radius: 100px;
	cursor: pointer;
    color: var(--body-text-color);
	background: #00b3ffa4;
}

.button--image {
	position: static;
	display: block;
	border: 0;
	border-radius: unset;
	margin: auto;
}

.button:hover {
	-webkit-box-shadow: inset 0 0 0 1000px rgba(0,0,0,.3);
  	-moz-box-shadow: inset 0 0 0 1000px rgba(0,0,0,.3);
	box-shadow: inset 0 0 0 1000px rgba(0,0,0,.3);
	border: 2px solid rgba(0,0,0,.3);
}

.button--image:hover {
	border: 0;
}

.tbl__row__col {
	height: 42px;
    word-wrap: break-word;
    vertical-align: middle !important;
	/* border: 1px solid rgba(255,0,0,0.3); */
}

.tbl__row {
	height: 42px;
    word-wrap: break-word;
	/* border: 1px solid rgba(255,0,0,0.3); */
}

/** Styles for radio and check components **/

.radio, .check {
	position: relative;
	width: 16px;
	height: 16px;
	display:flex;
	justify-content: center;
	align-items: center;
	margin: auto;
    line-height: normal;
    text-transform: none;
    color: var(--body-text-color);
    text-decoration: none;
	background: var(--background-color);
}

.radio {
	border-radius: 50%;
}

atkRadioDrawMap, atkCheckboxDrawMap {
	width: 10.5px;
	height: 10.5px;
	border: var(--clickable-component-border);
	text-align: center !important;
	cursor: pointer;
}

atkRadioDrawMap {
	border-radius: 100px;
}

atkRadioDrawMap:hover, atkCheckboxDrawMap:hover {
	cursor: pointer;
}

.check {
	border: var(--clickable-component-border);
}

.radio--border-solid {
	border: var(--clickable-component-border);
}

.radio--border-dashed {
	border: 1px solid #ffffff;
	border-style: dashed;
}

input[type=radio]:checked + atkRadioDrawMap,
input[type=checkbox]:checked + atkCheckboxDrawMap {
	background: var(--blue-color);
}

input[type=radio]:not(:checked) + atkRadioDrawMap,
input[type=checkbox]:not(:checked) + atkCheckboxDrawMap {
	background: #333333;
	border: 1px solid  #1f6685;
}

/****************************************************************/

.text--white {
	color: white !important;
}

.text--black {
	color: #000000 !important;
}

.text--red {
	color: red !important;
}

.text--left-aligned {
	text-align: left !important;
}

/* shape-rendering: crispEdges; does not work with zoom < 90%*, the lines are white.
  * Geometric accuracy is more important than sharp edges or rendering speed.
  *shape-rendering: geometricPrecision;
*/
.line, .line--dashed {
    stroke-width: 2.4;
    shape-rendering: geometricPrecision;
    stroke-opacity: 1;
    visibility: visible;
  }

.line--white {
    stroke:rgb(255, 255, 255);
}

.curve, .svg-circle {
    shape-rendering: geometricPrecision;
    visibility: visible;
}

.curve {
    stroke-width: 2.4;
}

.line--gray {
    stroke: #4d4d4d;
}

.line--mapped {
    stroke: #999;
}

.line--selected {
    stroke: rgb(255, 255, 255);;
}

circle.line--gray {
    fill: #4d4d4d !important;
}

td .svg--oscillator {
	position: absolute;
	width: 82px;
	height: 80px;
	top: 50%;
	left: 50%;
	display: flex;
	cursor: pointer;
	transform: translate(-50%, -50%);
}

.svg--oscillator__circle {
	background-color: #ffd0009c;
    height: 94%;
    border-radius: 100%;
	border: 2.3px solid #808080;
    text-align: center;
    line-height: normal;
    font-size: 12px;
}

.oscilator__text {
	position: relative;
	display: inline-flex;
	height: 65%;
	font-size: 14px;
	line-height: 1;
	word-spacing: 0;
	margin-bottom: 0;
	padding: 2px;
	overflow-wrap: break-word;
	align-items: center;
    color: white;
}

.svg--oscillator__symbol {
	font-size: 30px !important;
	top: 0px !important;
	font-weight: normal !important;
	font-style: oblique !important;
	font-stretch: ultra-condensed;
}

.hidden {
	visibility: hidden;
}

.component--disabled, [class="numeric-unit component--disabled"]:after {
	opacity: 0.2;
  	transition: opacity .5s, background-color .25s;
	cursor: default;
	pointer-events: none;

	-webkit-user-select: none !important;
	-moz-user-select: none !important;
	-ms-user-select: none !important;
	user-select: none !important;
}

.component--disabled > *:last-child {
	cursor: auto !important;
}

.input--cfg {
	position: relative;
	width: 50%;
	margin-left: 20px;
	display: block;
}

.select--cfg {
	position: relative;
	width: 50%;
	margin-left: 20px;
}

.select--width-auto {
	padding: 0 2.5em 0 .5em;
}

/* CAUTION: Internet Explorer hackery ahead */

.select::-ms-expand {
	display: none; /* Remove default arrow in Internet Explorer 10 and 11 */
}

  /* Target Internet Explorer 9 to undo the custom arrow */
@media screen and (min-width:0\0) {
	.select {
		background: none\9;
		padding: 5px\9;
	}
}

table.tbl {
	z-index: 1;
	position: relative;
	width: 95%;
	padding: 0 5%;
	border-spacing: 0;
	border-collapse: separate;
	background-size: 100% 100%;
}

table.tbl--pad-2-1 {
	padding: 2% 1% !important;
	width: 100%;
}

.tbl__row--width-100per {
	width: 100%;
	display: table;
}

table.tbody-text--left tbody tr td * {
	text-align: left !important;
}

.selected-row,
.selected-row .input--not-editable {
	background: #555 !important;
}

.margin-right-5px {
	margin: 0 5px 0 0 !important;
}

.component-list-container {
	margin-left: 20px;
	width: calc(100% - 20px);
}

.component-list-itm-container {
	display: flex;
	float: left;
	margin-top: 5px;
	margin-right: 20px;
	height: fit-content;
	min-width: fit-content;
	text-align: left;
}

.component--inline {
	display: inline;
}

.component--margin-left {
	margin-left: 20px !important;
}

.margin-0 {
	margin: 0 !important;
}

.tbl-text--header,
.tbl-text--header > * {
	font-size: 14px;
	text-align: center;
	color: var(--blue-color);
	margin: 0;
}

.text--centered {
	text-align: center;
}

.text--underlined {
	text-decoration: underline;
}

/**** Alert message styles ****/

.alert-message {
	line-height:20px;
	font-size:18px;
	color: var(--body-text-color);
	padding: 20px 0px 20px;
	word-wrap: break-word;
}

.progress-message {
	padding: 0;
	font-size: 12px !important;
}

.alert:before, .alert:after {
	display: table;
	content: "";
	line-height: 0;
}

.alert:after {
	clear: both;
}

.alerts {
	width: 400px;
	top: 12px;
	right: 50px;
	position: fixed;
	z-index: 9999;
	list-style: none;
	min-width: max-content;
}

.alert {
	width: 100%;
	margin-bottom: 8px;
	display: block;
	position: relative;
	opacity: 0;
	line-height: 1;
	padding: 0;
	transition: right 400ms, opacity 400ms, line-height 300ms 100ms, padding 300ms 100ms;
	cursor: default;
}

.btn--alert-ok:hover, .btn--alert-cancel:hover {
	cursor: pointer;
	border: 2px solid;
}

.open {
	opacity: 1;
	line-height: 2;
	padding: 5px 15px;
	transition: line-height 200ms, padding 200ms, right 350ms 200ms, opacity 350ms 200ms;
}

.alert-title {
	font-weight: bold !important;
	color: var(--body-text-color) !important;
}

.progress-title {
	font-size: 14px;
	width: 270px;
}

.alert-block {
	width: 80%;
	width: -webkit-calc(100% - 10px);
	width: calc(100% - 10px);
	min-width: max-content;
	text-align: left;
}

.alert-block em, .alert-block small {
	font-size: .75em;
	opacity: .75;
	display: block;
}

.alert-block em, .alert-block small {
    font-size: .75em;
    opacity: .75;
    display: block;
	color: var(--body-text-color) !important;
}

.alert i {
	font-size: 2em;
	width: 1.5em;
	max-height: 48px;
	top: 50%;
	margin-top: -12px;
	display: table-cell;
	vertical-align: middle;
}

.alert-success {
	color: #fff;
	border-color: #539753;
	background-color: #8fbf2f;
}

.alert-error {
	color: #fff;
	border-color: #dc4a4d;
	background-color: #f25c5d;
}

.alert-trash {
	color: #fff;
	border-color: #dc4a4d;
	background-color: #f25c5d;
}

.alert-info {
	color: #fff;
	border-color: #076d91;
	background-color: #3397db;
}

.alert-warning {
	color: #fff;
	border-color: #dd6137;
	background-color: #f7931d;
}

.alert-default {
	background-color: #333333;
	border: rgb(255, 255, 255) 2px solid;
	border-radius: 10px;
}

.alert-foot, .alert-confirm-foot {
	background: #333333;
	padding: 10px 0 0 0;
	overflow: auto;
}

.alert-foot {
	text-align: right;
}

.btn--alert-ok, .btn--alert-cancel {
	min-width: 50px;
	position: static;
	cursor: pointer;
	float: right;
	margin: 8px 3px;
}

/*********************************************/

.numeric-unit {
	flex-direction: row;
	position: relative;
	display: flex !important;
	border-radius: 100px;
	overflow: hidden;
	border: var(--clickable-component-border);
	color: gray;
	margin-left: 20px;
	width: 50%;
}

.input-pwd {
	position: relative;
	margin-left: 20px;
}

.numeric-unit__input {
	border: none !important;
	background: #292929;
	color: var(--body-text-color);
	overflow-y: auto;
	border-top-left-radius: 100px !important;
	border-top-right-radius: 0px !important;
	border-bottom-right-radius: 0px !important;
	border-bottom-left-radius: 100px !important;
}

.numeric-unit__select {
	flex: auto;
	box-shadow: none;
	outline: 0;
	padding: 0 1.5em 0 0;
	border: var(--clickable-component-border);
	border-radius: 0px;
	color: #fff;
	background-color: var(--blue-color);
	background-image:
	  linear-gradient(45deg, transparent 50%, white 50%),
	  linear-gradient(135deg, white 50%, transparent 50%),
	  linear-gradient(to right, #00b2ff, #00b2ff);
	background-position:
	  calc(100% - 10px) center,
	  calc(100% - 5px) center,
	  100% 0;
	background-size:
	  5px 5px,
	  5px 5px,
	  2.5em 2.5em;
	background-repeat: no-repeat;
	-moz-appearance: none;
	-webkit-appearance: none;
	-o-appearance: none;
	appearance: none;
	cursor: pointer;
}

.text--disabled {
	visibility: hidden !important;
}

.text--disabled:not(.image):before {
	content: '-';
	visibility: visible;
}

.input-lbl__lbl {
	padding: 0 1em;
}

.input--color-inverted {
	background-color: rgb(192, 192, 192) !important;
	color: #000000 !important;
}

.focused {
	border: 1px solid #878787 !important;
	outline: none;
}

span.focused {
	background-color: #878787 !important;
}

.col--solid-border {
	border: 1px solid var(--body-text-color);
	padding: 5px;
	text-align: center;
}

caption.tbl-text--title {
	font-size: 1.1em;
	font-weight: 400;
	padding: 10px 0;
}

.flex-content {
	display: flex !important;
	margin: 0 !important;
	width: 100%;
}

.content--centered {
	justify-content: center;
	align-items: center;
}

.content--left {
	justify-content: left;
	align-items: flex-start;
}

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

.solid-black-border {
	border: 2px solid #000000;
}

.content--width-100per {
	width: 100%;
	padding: 0 1.25em;
	margin: 0 !important;
	overflow: auto;
}

.position-relative {
	position: relative;
}

.btn--alert-ok:focus, .btn--alert-cancel:focus {
	outline: .5px dotted white;
}

.text--bold {
	font-weight: bold;
}

/** Style for load icon**/
.loading-icon {
	border: 7px solid #f3f3f3;
	border-radius: 50%;
	border-top: 7px solid #3498db;
	width: 50px;
	height: 50px;
	-webkit-animation: spin 2s linear infinite; /* Safari */
	animation: spin 2s linear infinite;
	margin: 10px;
}

/* Safari */
@-webkit-keyframes spin {
	0% { -webkit-transform: rotate(0deg); }
	100% { -webkit-transform: rotate(360deg); }
}

@keyframes spin {
	0% { transform: rotate(0deg); }
	100% { transform: rotate(360deg); }
}

/*** Style load icon option 2**/
.spinner {
	animation: rotate 2s linear infinite;
	margin: 10px;
	width: 50px;
	height: 50px;
}

.spinner .spin-path {
	stroke: #3498db;
	stroke-linecap: round;
	animation: dash 1.5s ease-in-out infinite;
}

@keyframes rotate {
	100% {
	  transform: rotate(360deg);
	}
}

@keyframes dash {
	0% {
	  stroke-dasharray: 1, 150;
	  stroke-dashoffset: 0;
	}
	50% {
	  stroke-dasharray: 90, 150;
	  stroke-dashoffset: -35;
	}
	100% {
	  stroke-dasharray: 90, 150;
	  stroke-dashoffset: -124;
	}
}

/** end Style for load icon**/

/** Styles for component Time HH:MM */

.time-HM {
	text-align: center;
	display: inline;
	padding: 2.5px;
	position: relative;
	margin-left: 20px;
	display: block;
	width: 50%;
}

.time-HM__hh, .time-HM__mm {
	width: 30px;
	outline: none;
	border: none;
	text-align: center;
	border-radius: 0px;
	background: none;
	padding: 0;
}

.time-HM.valid {
	border: solid 1px var(--blue-color);
}

.time-HM.invalid {
	border: solid 1px red;
}

/** End of Styles for component Time HH:MM */

/*** trash icon style, e.g  <i class="icono-trash"></i> ***/
.img-trash, .img-cross, .icono-trash, .icono-cross-circle {
	cursor: pointer;
}

.img-cross {
	width: 0;
    height: 0;
	padding: 10px;
	background: url('../resources/cross.png');
	background-size: contain;
}

.img-trash {
	width: 25px;
    height: 25px;
}

.icono-trash {
	width: 15px;
    height: 15px;
    border: 2px solid;
    border-radius: 0 0 3px 3px;
    border-top: none;
    margin: 9px 6px 3px;
}

.icono-trash:before {
    position: absolute;
	width: 6px;
    height: 2px;
    top: -5px;
    left: 50%;
    box-shadow: inset 0 0 0 15px,-6px 2px 0 0,-3px 2px 0 0,0 2px 0 0,5px 2px 0 0,6px 2px 0 0;
    -webkit-transform: translateX(-50%);
    -ms-transform: translateX(-50%);
    transform: translateX(-50%);
}

[class*=icono-] {
    display: inline-block;
    vertical-align: middle;
    position: relative;
    font-style: normal;
    color: #ddd;
    text-align: left;
    text-indent: -9999px;
    direction: ltr;
}

[class*=icono-]:after, [class*=icono-]:before {
    content: '';
    pointer-events: none;
}

[class*=icono-], [class*=icono-] * {
    box-sizing: border-box;
}

/*** end trah icon style ***/

/*** cross icon style, e.g  <i class="icono-cross-circle"></i> ***/

[class*=icono-cross]:after,
[class*=icono-cross]:before {
    position: absolute;
    left: 50%;
    top: 50%;
    -webkit-transform: translate(-50%,-50%);
    -ms-transform: translate(-50%,-50%);
    transform: translate(-50%,-50%);
   box-shadow: inset 0 0 0 32px;
}

[class*=icono-cross]:before {
    width: 20px;
    height: 4px;
}

[class*=icono-cross]:after {
    height: 20px;
    width: 4px;
}

.icono-cross-circle {
    -webkit-transform: rotate(45deg);
    -ms-transform: rotate(45deg);
    transform: rotate(45deg);
    border: 2px solid;
    border-radius: 50%;
    width: 30px;
    height: 30px;
    margin: 2px;
	color: #333;
	background-color: #333;
}

select.width-80per, .width-80per {
	width: 80%;
}

.btn--in-section {
	width: fit-content;
	margin: 10px;
	left: 0px;
}

.span-icon {
	position: absolute;
	top: 20%;
	right: 5px;
	width: 20px;
	height: 60%;
	cursor: pointer;
	display: inline-block;
	color: gray;
	background-color: currentColor;
}

.span-icon--eye {
	--svg: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3E%3Cg fill='%23000'%3E%3Cpath d='M16 8s-3-5.5-8-5.5S0 8 0 8s3 5.5 8 5.5S16 8 16 8M1.173 8a13 13 0 0 1 1.66-2.043C4.12 4.668 5.88 3.5 8 3.5s3.879 1.168 5.168 2.457A13 13 0 0 1 14.828 8q-.086.13-.195.288c-.335.48-.83 1.12-1.465 1.755C11.879 11.332 10.119 12.5 8 12.5s-3.879-1.168-5.168-2.457A13 13 0 0 1 1.172 8z'/%3E%3Cpath d='M8 5.5a2.5 2.5 0 1 0 0 5a2.5 2.5 0 0 0 0-5M4.5 8a3.5 3.5 0 1 1 7 0a3.5 3.5 0 0 1-7 0'/%3E%3C/g%3E%3C/svg%3E");
	-webkit-mask-image: var(--svg);
	mask-image: var(--svg);
	-webkit-mask-repeat: no-repeat;
	mask-repeat: no-repeat;
	-webkit-mask-size: 100% 100%;
	mask-size: 100% 100%;
}

.span-icon--eye-slash {
	--svg: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3E%3Cg fill='%23000'%3E%3Cpath d='M13.359 11.238C15.06 9.72 16 8 16 8s-3-5.5-8-5.5a7 7 0 0 0-2.79.588l.77.771A6 6 0 0 1 8 3.5c2.12 0 3.879 1.168 5.168 2.457A13 13 0 0 1 14.828 8q-.086.13-.195.288c-.335.48-.83 1.12-1.465 1.755q-.247.248-.517.486z'/%3E%3Cpath d='M11.297 9.176a3.5 3.5 0 0 0-4.474-4.474l.823.823a2.5 2.5 0 0 1 2.829 2.829zm-2.943 1.299l.822.822a3.5 3.5 0 0 1-4.474-4.474l.823.823a2.5 2.5 0 0 0 2.829 2.829'/%3E%3Cpath d='M3.35 5.47q-.27.24-.518.487A13 13 0 0 0 1.172 8l.195.288c.335.48.83 1.12 1.465 1.755C4.121 11.332 5.881 12.5 8 12.5c.716 0 1.39-.133 2.02-.36l.77.772A7 7 0 0 1 8 13.5C3 13.5 0 8 0 8s.939-1.721 2.641-3.238l.708.709zm10.296 8.884l-12-12l.708-.708l12 12z'/%3E%3C/g%3E%3C/svg%3E");
	-webkit-mask-image: var(--svg);
	mask-image: var(--svg);
	-webkit-mask-repeat: no-repeat;
	mask-repeat: no-repeat;
	-webkit-mask-size: 100% 100%;
	mask-size: 100% 100%;
}

input.input--color-inverted + span.span-icon:hover {
	color: #242323;
}

.input-pwd__input {
	display: block;
	padding-right: 25px;
	width: 100%;
}

select.select--in-col {
	padding: 0 2.5em 0 .5em;
}

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

.component-centered {
	position: static;
	display: block;
    margin-left: auto;
    margin-right: auto;
}

/**** Styles for Component Input File ****/
.input--file {
	position: relative;
	float: left;
	width: fit-content;
	margin: 10px 0px;
	left: 0px;
}

.file-upload {
    position: relative;
}

.file-upload p {
    margin: 0 !important;
	font-size: 12px;
}

.file-upload input.input-upload {
    position: absolute;
    top: 0;
    right: 0;
    margin: 0;
    padding: 0;
    font-size: 0;
    cursor: pointer;
    opacity: 0;
	width: 100%;
	height: 100%;
}

.btn--browse {
	top: 0;
	left: 0px;
	margin: 10px 5px;
	overflow: hidden;
}

.input--not-editable {
	border-style: none;
	background-color: #333;
	pointer-events: none;
}

/**** End Component Input File Styles****/

.textarea--file {
	width: 95%;
	min-height: 100%;
	resize: none;
	overflow: hidden;
	height: auto;
}

.selected-row > :last-child::after {
	content: '\2714';
	float: right;
}

.sorting-column {
	cursor: pointer;
	/* background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='1em' height='1em' viewBox='0 0 24 24'%3E%3Cpath fill='none' stroke='%23000' stroke-linecap='round' stroke-linejoin='round' stroke-width='1.5' d='M7.5 17.5v-11m0 0L11 10M7.5 6.5L4 10m12.5-3.5v11m0 0L20 14m-3.5 3.5L13 14'/%3E%3C/svg%3E"); */
	background-size: .7em;
    background-position: calc(100% - .7em) center;
	background-repeat: no-repeat;
}

.sorting-asc {
	background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='1em' height='1em' viewBox='0 0 24 24'%3E%3Cpath fill='%2300b2ff' d='M3 19h18a1.002 1.002 0 0 0 .823-1.569l-9-13c-.373-.539-1.271-.539-1.645 0l-9 13A.999.999 0 0 0 3 19'/%3E%3C/svg%3E");
	/* background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='0.57em' height='1em' viewBox='0 0 9 16'%3E%3Cpath fill='%2300b2ff' d='M4.5 14c-.28 0-.5-.22-.5-.5v-9c0-.28.22-.5.5-.5s.5.22.5.5v9c0 .28-.22.5-.5.5'/%3E%3Cpath fill='%23000' d='M8 7.5a.47.47 0 0 1-.35-.15L4.5 4.2L1.35 7.35c-.2.2-.51.2-.71 0s-.2-.51 0-.71l3.5-3.5c.2-.2.51-.2.71 0l3.5 3.5c.2.2.2.51 0 .71c-.1.1-.23.15-.35.15'/%3E%3C/svg%3E"); */
}

.sorting-desc {
	background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='1em' height='1em' viewBox='0 0 24 24'%3E%3Cpath fill='%2300b2ff' d='M11.178 19.569a.998.998 0 0 0 1.644 0l9-13A.999.999 0 0 0 21 5H3a1.002 1.002 0 0 0-.822 1.569z'/%3E%3C/svg%3E");
	/* background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='0.57em' height='1em' viewBox='0 0 9 16'%3E%3Cpath fill='%2300b2ff' d='M4.5 13c-.28 0-.5-.22-.5-.5v-9c0-.28.22-.5.5-.5s.5.22.5.5v9c0 .28-.22.5-.5.5'/%3E%3Cpath fill='%23000' d='M4.5 14a.47.47 0 0 1-.35-.15l-3.5-3.5c-.2-.2-.2-.51 0-.71s.51-.2.71 0l3.15 3.15l3.15-3.15c.2-.2.51-.2.71 0s.2.51 0 .71l-3.5 3.5c-.1.1-.23.15-.35.15Z'/%3E%3C/svg%3E"); */
}

.sorting-asc > *, .sorting-desc > * {
	width: calc(100% - 1em);
}

.pagination-info {
	float: left;
}

.pagination-paginate {
	float: right;
}

.paginate-button {
	box-sizing: border-box;
	display: inline-block;
	min-width: 1.5em;
	padding: 0.2em 0.7em;
	margin-left: 2px;
	text-align: center;
	text-decoration: none !important;
	cursor: pointer;
	background: inherit;
	color: #c0c0c0 !important;
	border: 1px solid transparent;
	border-radius: 2px;
}

.paginate-button.current,
.paginate-button.current:hover,
.paginate-button:hover {
	color: #c0c0c0 !important;
	border: 1px solid #111;
	background-color: #585858;
	background: -webkit-gradient(linear, left top, left bottom, color-stop(0%, #585858), color-stop(100%, #111));
	background: -webkit-linear-gradient(top, #585858 0%, #111 100%);
	background: -moz-linear-gradient(top, #585858 0%, #111 100%);
	background: -ms-linear-gradient(top, #585858 0%, #111 100%);
	background: -o-linear-gradient(top, #585858 0%, #111 100%);
	background: linear-gradient(to bottom, #585858 0%, #111 100%);
}

.paginate-button.disabled,
.paginate-button.disabled:hover,
.paginate-button.disabled:active {
    color: #666 !important;
    background: transparent;
}

/** Styles for progress bar **/

.progress-bar-container {
    background-color: #333;
    border-radius: 5px;
    overflow: hidden;
    height: 10px;
}

.progress-bar {
    height: 100%;
    background-color: #3584e4;
    text-align: center;
    line-height: 25px;
    color: #fff;
    width: 0;
    transition: width 0.5s ease-in-out;
}

/** Styles for tables **/

table.tbl-ver-bordered tr > *,
table.tbl-hor-bordered tr > * {
	text-align: left;
	padding: 5px;
	border: 0;
}

table.tbl-ver-bordered tr > *:not(:first-child) {
    border-left: 1px solid #555;
}

table.tbl-ver-bordered tr > *:first-child {
    border-left: 1px solid #777;
}

table.tbl-ver-bordered tr > *:last-child {
    border-right: 1px solid #777;
}

table thead.thead-dark {
	border: 1px solid;
}

table thead.thead-dark tr > * {
	background-color: #212121;
}

table.tbl-ver-bordered thead tr:first-child > * {
	border-top: 1px solid #777;
}

table.tbl-ver-bordered tr:last-child > * {
	border-bottom: 1px solid #777;
}

table.tbl-hor-bordered > tbody > tr:not(:last-child) > * {
	border-bottom: 1px solid #3d3d3d;
}

table.tbl-hor-bordered > tbody > tr:last-child > * {
	border-bottom: 2px solid #212121;
}

table.tbl-hor-bordered > tbody > tr > *:first-child {
	border-left: 2px solid #212121;
}

table.tbl-hor-bordered > tbody > tr > *:last-child {
	border-right: 2px solid #212121;
}

table.tbl-hover > tbody tr:hover td {
	background: #555;
}