@import url('https://fonts.googleapis.com/css2?family=Open+Sans:ital,wght@0,300;0,400;0,600;0,700;0,800;1,300;1,400;1,500;1,600;1,700;1,800&display=swap');

@tailwind base;
@tailwind components;
@tailwind utilities;

* {
	font-family: 'Open Sans', sans-serif;
}

button {
	border:0;
	background:none;
}

/* .mainWrap {
	border:solid 1px red;
} */

.clearFixHere:after {
	clear:both;
	content:"";
	display:block;
}

.mainWrap {
	padding-bottom:30px;
}

.swal2-container {
	z-index: 88888;
}

.ReactModal__Overlay {
	z-index: 88888;
}

.ReactModal__Content {
	max-width: 800px;
	width: 95% !important;
	max-height: 95% !important;
}

.ReactModal__Content .btnClose {
	position:absolute;
	top:0;
	right:0;
	cursor:pointer;
	padding:5px;
	opacity:0.5;
}

.ReactModal__Content .btnClose:hover {
	opacity:1;
}

.formProduct, .formCategory {
	overflow:hidden;
	overflow-y:auto;
	height:68vh;
}

.formCategory {
	height:auto;
	min-height:120px;
	overflow:initial;
}


.thumbImgElem {
	display:inline-block;
	vertical-align:top;
	max-height: 100px;
}

.formManageProject .thumbImgElem {
	width:120px;
}


.thumbWrap {
	position:relative;
	display:inline-block;
	margin-bottom:10px;
	padding:20px 10px 15px;
	max-width: 120px;
	/* background-color: #f1f1f1; */
}

.modalWatermarkDiv .thumbWrap {
	overflow:hidden;
	min-width:60px;
	min-height:40px;
	border:solid 1px #ddd;
}

.modalWatermarkDiv .thumbImgElem {
	position:absolute;
	bottom:0;
	right:0;
}

.btnRemoveImg {
	position:absolute;
	top:0;
	right:0;
	cursor:pointer;
	background-color:white;
	padding:2px;
	display:inline-block;
	transform:scale(0.75);
	z-index:1;
	border:solid 1px #aaa;
}

.btnRemoveImg img {
	vertical-align:middle;
	width:100%;
}

.file-name {
	width:150px;
}

.categList .categSpan, .ReactTags__tag {
	font-size:.75rem;
	display:inline-block;
	background-color:#ccc;
	padding:2px 8px;
	line-height:initial;
	border-radius:5rem;
	margin-right:5px;
	margin-bottom:4px;
}

.ReactTags__tag {
	line-height:1.2rem;
}




.selectCateg {
	position:relative;
}

.selectCateg .addCateg {
	position:absolute;
	top:8px;
	right:-35px;
	cursor:pointer;
}

.categSpan i {
	display:inline-block;
	width:16px;
	cursor:pointer;
	vertical-align:middle;
	margin-top:2px;
	text-align:center;
}


.cNotif {
	padding:5px 10px;
	background-color:#fef2f2;
	margin-bottom:15px;
	font-size:.9rem;
	
}

.cNotif.is-danger {
	color:#cc0000;
}


.tableProductWrap {
	width:100%;
}

.loginWrap {
	height:100vh;
}

.loginPanel {
	display: flex;
}

.loginCol {
	display: flex !important;
	align-items: center;
	height:100vh;
}

.loginPanel {
	width:100%;
	max-width:380px;
	min-height:300px;
	margin:0 auto;
	display:block;
}

.loginPanel .panel-block {
	width:100%;
	display:block;
	padding:020px;
}

.loginPanel .cRow {
	width:100%;
}

.formDiv .btnSaveDiv {
	display:flex;
	width:100%;
	justify-content:space-between;
}

.tableProductWrap .thumbPreview {
	display:inline-block;
	width:50px;
	max-width:initial;
	height:auto;
	margin:5px;
}

.tableProductWrap .spanClick {
	cursor:pointer;
	display:inline-block;
}

.manageWatermark .spanClickWatermark {
	border:solid 1px #ddd;
}

.tableProductWrap .spanClick.hidden {
	display:none;
}

.tableProductWrap .spanClick img {
	vertical-align:top;
}

.tableProductWrap .thumbPreview.extraPreview {
	margin-right:5px;
	width:30px;
	vertical-align:top;
	margin-bottom:5px;
}

.tableProductWrap .iconEdit {
	width:25px;
}

.rdt_Table .rdt_TableCol:first-child, .rdt_TableRow .rdt_TableCell:first-child {
	max-width:60px;
	min-width:initial;
}

.field .btnClearSearch {
	padding:5px;
}

.field .btnClearSearch img {
	width:20px;
}

.ediHotSpot .columns {
	width:100%;
}

.ediHotSpot .column {
	flex-grow:0;
	flex-shrink:0;
	flex-basis:50%
}

.editHotSpotDiv {
	margin-bottom:5px;
}

.editHotSpotDivWrapper {
	margin: 10px 0;
}

.editHotSpotDivWrapper .editHotSpotDiv span {
	font-size:.75rem;
}

.editHotSpotDiv span {
	font-size:.65rem;
	display:inline-block;
	background-color:#888;
	color:white;
	padding:2px 8px;

	border-radius:12px;
	cursor:pointer;
}

.editHotSpotBox {
	position:relative;
	border:solid 1px #111;
}

.editHotSpotBox img {
	vertical-align:top;
	width:100%;
}

.editHotSpotBox .hotSpot {
	position:absolute;
	width:26px;
	height:26px;
	line-height:30px;
	border-radius:30px;
	cursor:pointer;
	text-align:center;
	background-color:white;
	font-weight:bold;
	border:solid 1px #777;
	box-shadow:0 0 8px rgba(0,0,0,0.25)
}

.editHotSpotBox .hotSpot.active {
	background-color:#cd015c;
	color:white;
	border:solid 1px white;
}

.formHotSpotBox .btnRemoveImg {
	display:none;
}


/* React tags */
.ReactTags__suggestions ul {
  list-style-type: none;
  background: white;
  width: 100%;
}

.ReactTags__suggestions li {
	border-bottom: 1px solid #eee;
	padding: 3px 5px;
	margin: 0;
	font-size:.9rem;

}

.ReactTags__suggestions li mark {
	text-decoration: underline;
	background: none;
	font-size:.9rem;
}

.ReactTags__suggestions ul li.ReactTags__activeSuggestion {
  background: #ddd;
  cursor: pointer;
}

.ReactTags__tagInputField {
	border:solid 1px #ddd;
	padding:8px;
	border-radius:5px;
	font-size:1rem;
	width:100%;
}

.ReactTags__remove {
	font-size:1.4rem;
	line-height:.8rem;
	vertical-align:top;
	padding:0;
	margin-left:4px;
	margin-top:1px;
	cursor:pointer;
}

#react-select-4-listbox {
	height:150px;
}


.imageInputSingle .rotateDiv {
	margin-bottom:10px;
	max-width: 120px;
	text-align: center;
}

.imageInputSingle .rotateDiv button {
	cursor:pointer;
	margin-right:10px;
	text-align: center;
}

.imageInputSingle .rotateDiv button:last-child {
	margin-right:0;
}

.imageInputSingle .rotateDiv button img {
	vertical-align:middle;
	margin:0;
}

.imageInputSingle .rotateDiv button small {
	vertical-align:middle;
	font-size:.8rem;
}

.spanSelect .reactSelectImg img {
	width:24px;
	vertical-align:middle;
	margin-right:5px;
	display:inline-block;
}

.spanSelect > div {
	min-width:220px;
}

.formDiv .projectProductSelect__value-container {
	max-height: 150px;
	overflow-y: auto;
}

.extraImgDiv {
	padding:5px;
	border:solid 1px #ddd;
	margin-bottom:10px;
	border-radius: 5px;
}

.extraImgMultiDiv {
	padding:5px;
	border:solid 1px #ddd;

}


/* Side menu */
.sideMenu  {
	overflow: hidden;
	overflow-y:auto;
	height:100%;
}


/*
----------------------------
With Tailwind
----------------------------
*/
.hide {
	display: none;
}

.show {
	display: block;
}




/*
----------------------------
Responsive styling
----------------------------
*/
@media(min-width:769px) {
	.formProduct .column {
		width:50%;
	}
}


@media(max-width:480px) {
	#root .topBar.toggleOn {
		margin:0;
		padding:0;
	}

	#root .topBar.toggleOff {
		margin:0;
		padding:0;
	}

	#root .topBar.toggleOff .btnToggle {
		margin-left:-10px;
	}

	#root .topBar .topBarWrap {
		padding-right:20px;
	}


	#root .sideMenu {
		z-index:888;
	}

	#root .sideMenu.toggleOn {
		transform: translate(-240px, 0);
	}

	#root .sideMenu.toggleOff {
		width:240px;
	}

	#root .sideMenu.toggleOff .linkList .linkTxt {
		width:auto;
		position: static;
	}

	#root .sideMenu.toggleOff .linkList li {
		text-align: left;
	}

	#root .sideMenu.toggleOff .linkList li i {
		display: inline-block;
		vertical-align: middle;
		margin-right:5px;
	}

	#root .sideMenu.toggleOff .linkList li b {
		vertical-align: middle;
		margin-top:0;
	}

	#root .sideMenu.toggleOn .userSideBox .avatar span {
		width:40px;
		height:40px;
	}

	#root .sideMenu .userSideBox .userTxtInfo {
		display: block;
	}

	#root .sideMenu.toggleOff .logoFull {
		display: inline-block;
	}

	#root .sideMenu.toggleOff .logoSmall {
		display: none;
	}




	
	#root .contentBox.toggleOff, #root .contentBox.toggleOn {
		margin-left:0;
	}

}



/* Admin app.css */