/* custom css styles by dip */
.validation-error{
	display: block;
	color: #F00932;
	font-weight: bold;
}
.hide, .hide-me { display: none; }
.pen { pointer-events: none; }/* this is for javascript. adding this class would make elements stop responsing to own events but execute parent events */
.ha { height: auto; }

.uloh:hover {
	text-decoration: underline;
}
.help {
	cursor: help;
}

.cna { cursor: not-allowed; }

.lh20 { line-height: 20px; }
.lh21 { line-height: 21px; }
.lh24 { line-height: 24px; }
.lh25 { line-height: 25px; }
.lh30 { line-height: 30px; }
.lh35 { line-height: 35px; }

.mh34 { min-height:34px; }

.wd50 { width: 50px; }
.wd55 { width: 55px; }
.wd60 { width: 60px; }
.wd65 { width: 65px; }
.wd70 { width: 70px; }
.wd75 { width: 75px; }
.wd80 { width: 80px; }
.wd85 { width: 85px; }
.wd90 { width: 90px; }
.wd95 { width: 95px; }
.wd100 { width: 100px; }

.nuoh, .nuoh:hover, .nuoh:active, .nuoh:visited, a.nuoh, a.nuoh:hover, a.nuoh:active, a.nuoh:visited { text-decoration: none !important; }
.icon-action{cursor: pointer !important;}
.red {color: #DD4B39;}
.green {color: #00A65A;}
.white {color: #FFF;}
.yellow {color: #FFF000;}
.orange {color: #F39C12;}
.lblue {color: #3C8DBC;}
.black {color: #333;}
.grey {color: #e4e5e6;}
.inactive {color: #aeaeae;}
.inactive:hover {color: #aeaeae;}
.blue {color: #3c8dbc;}
.col-success { color: #28a745; }

.act, .csel { cursor: pointer; }
.act:hover:not(.nuoh,.fas,.far) {
	background-color: #f8f8ff;
}
.act-locked { opacity: 0.5; cursor: not-allowed; }

.mb05 { margin-bottom: 0.5em; }

.mlb-2::before { margin-left: 2px; }
.mla-2::after { margin-left: 2px; }
.mrb-2::before { margin-right: 2px; }
.mra-2::after { margin-right: 2px; }

.mlb-5::before { margin-left: 5px; }
.mla-5::after { margin-left: 5px; }
.mrb-5::before { margin-right: 5px; }
.mra-5::after { margin-right: 5px; }

.mlb-10::before { margin-left: 10px; }
.mla-10::after { margin-left: 10px; }
.mrb-10::before { margin-right: 10px; }
.mra-10::after { margin-right: 10px; }

.pl2px { padding-left: 2px; }
.pr2px { padding-right: 2px; }

.fs10 { font-size: 0.10em; }
.fs20 { font-size: 0.20em; }
.fs30 { font-size: 0.30em; }
.fs40 { font-size: 0.40em; }
.fs50 { font-size: 0.50em; }
.fs60 { font-size: 0.60em; }
.fs70 { font-size: 0.70em; }
.fs80 { font-size: 0.80em; }
.fs85 { font-size: 0.85em; }
.fs90 { font-size: 0.90em; }
.fs95 { font-size: 0.95em; }
.fs105 { font-size: 1.05em; }
.fs110 { font-size: 1.10em; }
.fs115 { font-size: 1.15em; }
.fs120 { font-size: 1.20em; }
.fs125 { font-size: 1.25em; }
.fs130 { font-size: 1.30em; }
.fs135 { font-size: 1.35em; }
.fs140 { font-size: 1.40em; }
.fs145 { font-size: 1.45em; }
.fs150 { font-size: 1.50em; }
.fs155 { font-size: 1.55em; }
.fs160 { font-size: 1.60em; }
.fs165 { font-size: 1.65em; }
.fs170 { font-size: 1.70em; }
.fs175 { font-size: 1.75em; }
.fs180 { font-size: 1.80em; }
.fs185 { font-size: 1.85em; }
.fs190 { font-size: 1.90em; }
.fs195 { font-size: 1.95em; }
.fs200 { font-size: 2.00em; }

.fw550 { font-weight: 550; }

.sup { vertical-align: super; }
.sub { vertical-align: super; }
.sup, .sub { font-size: smaller; }
.fit { font-style: italic; }

.box-shadow {
	-webkit-box-shadow: 0px 0px 10px 5px rgb(0 0 0 / 50%);
	-moz-box-shadow: 0px 0px 10px 5px rgba(0,0,0,0.5);
	box-shadow: 0px 0px 10px 5px rgb(0 0 0 / 50%);
}

.top-nav-user>.dropdown-menu>.dropdown-header {
	color: var(--custom-theme-color);
	font-weight: 550;
	overflow: hidden;
	white-space: nowrap;
	text-overflow: ellipsis;
}
.top-nav-user > .nav-link::after {
	display: inline-block;
	margin-left: 0.255em;
	vertical-align: 0.255em;
	content: "";
	border-top: 0.3em solid;
	border-right: 0.3em solid transparent;
	border-bottom: 0;
	border-left: 0.3em solid transparent;
}

@media screen and  (min-width: 768px) {
	.navbar-expand-md .navbar-nav .nav-link {
		padding-right: 0.75rem;
		padding-left: 0.75rem;
	}
}

/* Sweet Alert 2 custom theme styling */
.swal2-styled.swal2-confirm {
	color: var(--custom-theme-font-color);
	background-color: var(--custom-theme-color);
}
.swal2-styled.swal2-confirm:hover, .swal2-styled.swal2-confirm:active {
	background-color: var(--custom-theme-color-darker);
	border-color: var(--custom-theme-color-darker);
}
.swal2-styled.swal2-confirm:focus {
	box-shadow: 0 0 0 0.2rem var(--custom-theme-color-a25);
}

.swal2-popup.swal2-toast {
	padding: 1rem 1rem;
	font-size: 1rem;
	max-width: 30vw;
}
.swal2-popup.swal2-toast .swal2-title {
	margin: 0.5em 1em;
	font-size: 1rem;
	font-weight: 550;
}
body.swal2-toast-shown .swal2-container, .swal2-toast-container-custom-css {
	width: auto;
	max-width: 30vw;
	cursor: pointer;
}
.swal2-toast-popup-custom-css {
	max-width: 30vw;
}


.colored-toast.swal2-icon-success {
	/*background-color: #a5dc86 !important;*/
	background-color: #28a745 !important;
}
.colored-toast.swal2-icon-error {
	/*background-color: #f27474 !important;*/
	background-color: #dc3545 !important;
}
.colored-toast.swal2-icon-warning {
	/*background-color: #f8bb86 !important;*/
	background-color: #ff9522 !important;
}
.colored-toast.swal2-icon-info {
	background-color: #3fc3ee !important;
}
.colored-toast.swal2-icon-question {
	background-color: #87adbd !important;
}
.colored-toast .swal2-title {
	color: white !important;
}
.colored-toast .swal2-close {
	color: white;
}
.colored-toast .swal2-html-container {
	color: white;
}

/* ./Sweet Alert 2 custom theme styling */

.toggle-icon {
	padding: 0px 5px;
	background-color: #f4f6f9;
	border: 1px solid rgba(0,0,0,.125);
	border-radius: 0.25rem;
	line-height: 29px;
}
.orderable {
	text-decoration: underline;
	cursor: pointer;
}
.pag-m0 ul.pagination {
	margin: 0;
}
.table th { text-align: left; }
.nowidth-form-control {
	display: block;
	/* width: 100%; */
	height: calc(2.25rem + 2px);
	padding: 0.1rem 0.2rem;
	font-size: 1rem;
	font-weight: 400;
	line-height: 1.5;
	color: #495057;
	background-color: #fff;
	background-clip: padding-box;
	border: 1px solid #ced4da;
	border-radius: 0.1rem;
	box-shadow: inset 0 0 0 transparent;
	transition: border-color .15s ease-in-out,box-shadow .15s ease-in-out;
}

.table tbody tr.disabled {
	background-color: var(--custom-theme-color-a05);
}
.table tbody tr.disabled td {
	/*border: 1px solid var(--custom-theme-color-a25);*/
}

.locked, .table tbody tr.locked {
	/*background-color: #ffc107;*/
	/*background-color: #f7f7d3;*/
	background-color: #fdfdbe;
}
.table tbody tr.locked td {
	/*border: 1px solid var(--custom-theme-color-a50);*/
	/*cursor: not-allowed;*/
}
.locked {
	border: 1px solid #d3d32a;
}

.usable, .table tbody tr.usable {
	/*background-color: #d4edda;*/
	background-color: #eaf7ed;
	/*background-color: #f5f5e6;*/
}
.usable {
	border: 1px solid #28a745;
	/*border: 1px solid #d3d32a;*/
}
.table tbody tr.usable td {
	/*border: 1px solid #28a745;*/
}

.none2e, .table tbody tr.none2e {
	/*background-color: #ffc107;*/
	/*background-color: #f7f7d3;*/
	background-color: #cce7f7;
}
.table tbody tr.none2e td {
	/*border: 1px solid var(--custom-theme-color-a50);*/
	/*cursor: not-allowed;*/
}
.none2e {
	border: 1px solid #5092b9;
}


.archived, .table tbody tr.archived {
	background-color: #0000000d;
}
.table tbody tr.archived td {
}
.archived {
	border: 1px solid #0000000d;
}

.archived.none2e, .table tbody tr.archived.none2e {
	background-color: #afc9d9b3;
}
.table tbody tr.archived.none2e td {
}



.pp-pag-wrapper {
	display: flex;
	float: right !important;
}
.pp-pag-wrapper-head { margin-right: 1rem !important; }
.pp-pag-wrapper-foot {}

/*.toggle-handle *:not(.no-toggle) { pointer-events: none; text-decoration: underline !important; }*/
/*.toggle-handle .no-toggle { pointer-events: revert; text-decoration: underline !important; }
.toggle-handle *:not(.no-toggle) { pointer-events: none; text-decoration: underline !important; }*/
.list-right-acts {
	border-left: 1px solid black;
	float: right;
	margin-left: 0.25rem;
	padding-left: 0.25rem;
}

.hover-anim:hover, .hover-anim:focus, table .act:hover:not(.nuoh), table .act:focus:not(.nuoh) {
	transition: 0.9s;
	transform: rotateY(360deg);
}
/* hover animation quicker */
.hover-anim-q:hover, .hover-anim-q:focus {
	transition: 0.5s;
	transform: rotateY(360deg);
}

/* https://www.coding-dude.com/wp/css/highlight-text-css/ */
/*
.s2resitem s2mht {
	position:relative;
}
.s2resitem s2mht:before {
	content:"";
	background-color:#ff6db7;
	width:100%;
	height:1em;
	position:absolute;
	z-index:-1;
	filter:url(#marker-shape);
	left:-0.25em;
	top:0.1em;
	padding:0 0.25em;
}
.s2resitem s2mht {
	border: 1px dashed var(--custom-theme-color);  
	padding: 0.01em
}
li.select2-results__option--highlighted .s2resitem s2mht {
	border-color: var(--custom-theme-font-color) !important;
}
*/
.s2resitem s2mht {
	font-weight: 600;
	text-decoration: underline;
}
/*
li.select2-results__option--highlighted .s2resitem s2mht {
	color: #212529 !important;
}*/

/*error page*/
.my-error-page {
	/*width: 70%;
	margin: 30px auto;*/
	padding-top: 3rem;
}

.my-error-page .my-error-headline, .my-error-page .my-error-content {
	display: inline-block;
	word-break: break-word;
}

.my-error-page .my-error-headline {
	margin-right: 2%;
	max-width: 20%;
}

.my-error-page .my-error-content {
	max-width: 75%;
}

.my-error-page .errorcode {
	font-size: 75px;
	font-weight: 300;
}
.my-error-page .errorname {
	font-size: 16px;
	font-weight: normal;
}

/*
.ne-dev-bg {
	background-color: #3c8dbc40!important;
	border: 1px solid #3c8dbc!important;
}*/
.ne-dev-bg {
    background-color: #d3f0f5 !important;
    border: 1px solid #23d6f5 !important;
}
.ne-dev-legend {

}
.ne-dev-legend i {
	color: transparent;
}
.ne-dev-list-row {}

.add-sns-ddib {
	width: 140px;
}

.popup-foot-input-wrap {
	margin-right:auto;
}
.popup-foot-input-wrap label {

}
.popup-foot-input-wrap input, .popup-foot-input-wrap select, .popup-foot-input-wrap span {
	display: inline-block;
	width: auto;
}

.modal-header { border-bottom: transparent; }

.device-rma-popa, .device-mst-failed-popa {
	-webkit-box-shadow: inset 0px 0px 10px 10px #F39C12;
	-moz-box-shadow: inset 0px 0px 10px 10px #F39C12;
	box-shadow: inset 0px 0px 10px 10px #F39C12;
}
.device-failed-popa {
	-webkit-box-shadow: inset 0px 0px 10px 10px #dc3545;
	-moz-box-shadow: inset 0px 0px 10px 10px #dc3545;
	box-shadow: inset 0px 0px 10px 10px #dc3545;
}

.ds-color-active, .ds-color-active:focus {
	color: #fff;
	background-color: #1fa65f;
}

/*
.ds-color-rma, .ds-color-rma:focus {
	color: #fff;
	background-color: #f09d2e;
}
*/

.ds-color-mst-rma, .ds-color-mst-rma:focus, .ds-color-mst-failed, .ds-color-mst-failed:focus {
	color: #495057bf;
	background-color: #e9ecef;
}
select.ds-color-mst-rma, select.ds-color-mst-rma:focus, select.ds-color-mst-failed, select.ds-color-mst-failed:focus {
	color: #212529;
	background-color: #f09d2e;
}

.ds-color-rma, .ds-color-rma:focus {
	color: #fff;
	background-color: #d94d3d;
}

.ds-color-failed, .ds-color-failed:focus {
	color: #fff;
	background-color: #4f5962;
}


.glow-dot {
	padding: 5px;
	border-radius: 5px;
	line-height: 0px;
	display: inline-block;
	vertical-align: middle;
	margin-right: 5px;
}
/*
.glow-dot.dot-active {
	background-color: #03c558;
	-webkit-box-shadow: 0px 0px 3px 3px #01ff70;
	-moz-box-shadow: 0px 0px 3px 3px #01ff70;
	box-shadow: 0px 0px 3px 3px #01ff70;
}
*/
.glow-dot.dot-active {
	background-color: #03c558;
	-webkit-box-shadow: 0px 0px 3px 3px #72f38f;
	-moz-box-shadow: 0px 0px 3px 3px #72f38f;
	box-shadow: 0px 0px 3px 3px #72f38f;
}
.glow-dot.dot-warning {
	background-color: #fb7b11;
	-webkit-box-shadow: 0px 0px 3px 3px #FFCF00;
	-moz-box-shadow: 0px 0px 3px 3px #FFCF00;
	box-shadow: 0px 0px 3px 3px #FFCF00;
}
.glow-dot.dot-danger {
	background-color: #e30505;
	-webkit-box-shadow: 0px 0px 3px 3px #fd8888;
	-moz-box-shadow: 0px 0px 3px 3px #fd8888;
	box-shadow: 0px 0px 3px 3px #fd8888;
}
.glow-dot.dot-inactive {
	background-color: #858282;
	-webkit-box-shadow: 0px 0px 3px 3px #b1aeae;
	-moz-box-shadow: 0px 0px 3px 3px #b1aeae;
	box-shadow: 0px 0px 3px 3px #b1aeae;
}
