#main-body {
	margin: 0;
	font-family: 'Roboto', sans-serif;
	font-size: 15px;
	line-height: 1.5;
	background-color: #f3f4f5;
	-webkit-touch-callout: none;
	-webkit-user-select: none;
	-moz-user-select: none;
	-ms-user-select: none;
	-o-user-select: none;
	user-select: none;
	-webkit-tap-highlight-color: transparent;
}

:root {
	--maincolor: #007991;
	--textcolor: #212529;
}

*, *::before, *::after {
	box-sizing: border-box;
}

.row {
	display: -ms-flexbox;
	display: flex;
	-ms-flex-wrap: wrap;
	flex-wrap: wrap;
	margin-left: -10px;
	margin-right: -10px;
}
.row > * {
	flex-shrink: 0;
}

.col {
	-ms-flex-preferred-size: 0;
	flex-basis: 0;
	-ms-flex-positive: 1;
	flex-grow: 1;
	max-width: 100%;
}

.col-12 {
	-ms-flex: 0 0 100%;
	flex: 0 0 100%;
	max-width: 100%;
}

@media (min-width: 576px) {
	.col-sm-6 {
		-ms-flex: 0 0 50%;
		flex: 0 0 50%;
		max-width: 50%;
	}
}

@media (min-width: 992px) {
	.col-lg-3 {
		-ms-flex: 0 0 25%;
    	flex: 0 0 25%;
    	max-width: 25%;
	}
	.col-lg-4 {
		-ms-flex: 0 0 33.333333%;
		flex: 0 0 33.333333%;
		max-width: 33.333333%;
	}

	.col-lg-5 {
		-ms-flex: 0 0 41.666667%;
		flex: 0 0 41.666667%;
		max-width: 41.666667%;
	}

	.col-lg-6 {
		-ms-flex: 0 0 50%;
    	flex: 0 0 50%;
    	max-width: 50%;
	}

	.col-lg-7 {
		-ms-flex: 0 0 58.333333%;
		flex: 0 0 58.333333%;
		max-width: 58.333333%;
	}
}

@media (min-width: 1200px) {
	.col-xl-3 {
		-ms-flex: 0 0 25%;
		flex: 0 0 25%;
		max-width: 25%;
	}

	.col-xl-4 {
		-ms-flex: 0 0 33.333333%;
		flex: 0 0 33.333333%;
		max-width: 33.333333%;
	}

	.col-xl-8 {
		-ms-flex: 0 0 66.666667%;
		flex: 0 0 66.666667%;
		max-width: 66.666667%;
	}
}

.col, .col-xl-3, .col-xl-4, .col-xl-8, .col-lg-3, .col-lg-4, .col-lg-5, .col-lg-6, .col-lg-7, .col-sm-6, .col-12 {
	position: relative;
	width: 100%;
	padding-right: 10px;
	padding-left: 10px;
}

.container {
	padding: 0 20px;
}

@media (max-width: 550px) {
	.container {
		padding: 0 10px;
	}
}

.main-layout {
	background: #fff;
	padding: 10px;
	border-radius: 8px;
}

/*** Style mặc định ***/  

  
ul {
	list-style: none;
	padding: 0;
	margin: 0;
}

a, a:hover {
	cursor: pointer;
	text-decoration: none;
	color: var(--textcolor);
	transition: color 0.2s ease;
}

a:hover {
	color: var(--maincolor);
}

svg {
	vertical-align: middle;
}

img {
	width: auto;
	border-radius: 8px;
	pointer-events: none;
	-webkit-user-drag: none;
	user-select: none;
}

button {
	font-family: inherit;
    font-size: inherit;
	line-height: inherit;
	outline: none;
	border: none;
	width: 100%;
	cursor: pointer;
}

.default-input {
	font-family: inherit;
    font-size: inherit;
	background: #fff;
    border: solid 1px #ccc;
    border-radius: 8px;
    height: 38px;
    line-height: 38px;
    padding: 0 12px;
    width: 100%;
	transition: all 0.2s ease;
}

.default-input:focus {
    outline: none;
    box-shadow: 0 0 0 2px rgba(24, 144, 255, .2);
    border: solid 1px #03a9f4;
}

.default-input:-webkit-autofill {
	-webkit-box-shadow: 0 0 0px 1000px white inset, 0 0 0 2px rgba(24, 144, 255, .2);
	border: solid 1px #03a9f4;
}


.position-relative {
	position: relative !important;
}

.position-sticky {
	position: sticky;
}

.position-absolute {
	position: absolute;
}
.d-flex {
	display: -ms-flexbox !important;
	display: flex !important;
}

.d-none {
	display: none;
}

.d-grid {
  	display: grid;
}

.grid-2 {
  	grid-template-columns: repeat(2, 1fr);
}

.flex-wrap {
	-ms-flex-wrap: wrap !important;
	flex-wrap: wrap !important;
}

.justify-content-center {
	-ms-flex-pack: center !important;
	justify-content: center !important;
}

.justify-content-between {
	-ms-flex-pack: justify !important;
	justify-content: space-between !important;
}

.justify-content-end {
	-ms-flex-pack: end !important;
	justify-content: flex-end !important;
}
  
.align-items-center {
	-ms-flex-align: center !important;
	align-items: center !important;
}

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

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

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

.cursor-pointer {
	cursor: pointer;
}
.top-74px {
	top: 74px;
}
.mt-25 {
	margin-top: 25px;
}

.mt-20 {
	margin-top: 20px;
}

.mt-15 {
	margin-top: 15px;
}

.mt-10 {
	margin-top: 10px;
}

.mt-5 {
	margin-top: 5px;
}

.mt-0 {
	margin-top: 0;
}

.mb-25 {
	margin-bottom: 25px;
}

.mb-20 {
	margin-bottom: 20px;
}

.mb-15 {
	margin-bottom: 15px;
}

.mb-10 {
	margin-bottom: 10px;
}

.mb-5 {
	margin-bottom: 5px;
}

.mb-0 {
	margin-bottom: 0;
}

.mr-5 {
	margin-right: 5px;
}

.ml-30 {
    margin-left: 30px;
}

.ml-5 {
	margin-left: 5px;
}

.pt-10 {
	padding-top: 10px;
}

.pt-5 {
	padding-top: 5px;
}

.pb-10 {
	padding-bottom: 10px;
}

.pb-5 {
	padding-bottom: 5px;
}

.pl-35 {
	padding-left: 35px;
}
.pl-10 {
	padding-left: 10px;
}

.pl-5 {
	padding-left: 5px;
}

.pr-10 {
	padding-right: 10px;
}

.pr-5 {
	padding-right: 5px;
}

.gap-20 {
	gap: 20px;
}

.gap-15 {
	gap: 15px;
}

.gap-10 {
	gap: 10px;
}

.gap-5 {
	gap: 5px;
}

.w-100 {
	width: 100%;
}

.w-60 {
	width: 60%;
}

.w-20 {
	width: 20%;
}

.w-250px {
	width: 250px
}

.radius-8px {
	border-radius: 8px;
}

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

.font-w-700 {
	font-weight: 700;
}

.font-w-500 {
	font-weight: 500;
}

.font-w-normal {
	font-weight: normal;
}

.size-25 {
	font-size: 25px;
}

.size-24 {
	font-size: 24px;
}

.size-22 {
	font-size: 22px;
}

.size-20 {
	font-size: 20px;
}

.size-18 {
	font-size: 18px;
}

.size-16 {
	font-size: 16px;
}

.size-15 {
	font-size: 15px;
}

.size-14 {
	font-size: 14px;
}

.size-13 {
	font-size: 13px;
}

.size-12 {
	font-size: 12px;
}

.color-ff6c5e {
	color: #ff6c6e;
}

.color-ffb400 {
	color: #ffb400;
}

.color-2392ec {
	color: #2392ec;
}

.color-096dd9 {
	color: #096dd9;
}

.color-40a9ff {
	color: #40a9ff !important;
}

.color-007991 {
	color: #007991 !important;
}

.color-ff4d4f {
	color: #ff4d4f !important;
}

.color-4f8aee {
	color: #4f8aee !important;
}

.color-52c41a {
	color: #52c41a !important;
}

.color-343434 {
	color: #343434;
}

.color-000 {
	color: #000;
}

.color-fff {
	color: #fff;
}

.color-rgba-0-25 {
	color: rgba(0, 0, 0, .25);
}

.color-00000040 {
	color: rgba(0, 0, 0, .25);
}
  
.bg-white {
	background-color: #fff;
} 


.h-60px {
	height: 60px;
}

/*** Hiệu ứng ***/  
@keyframes _fadeIn_ {
	0% {
		opacity: 0;
		transform: translateY(30px);
	}
	
	100% {
		opacity: 1;
		transform: translateY(40px);
	}
}

/*** Style button ***/
  
.btn-default {
	height: 35px;
	line-height: 35px;
	color: #fff !important;
	border-radius: 8px;
	padding: 0 15px;
	text-align: center;
	cursor: pointer;
	transition: background-color 0.2s ease;
}

.fix-btn {
	width: 160px;
	height: 40px;
	line-height: 40px;
	font-size: 16px;
}

.red-btn {
	background-color: #ff4d4f;
}

.red-btn:hover {
	background-color: #ff7875;
}

.blue-btn {
	background-color: #096dd9;
}

.blue-btn:hover {
	background-color: #4f8aee;
}

.bluew-btn {
	background-color: #4f8aee;
}

.bluew-btn:hover {
	background-color: #40a9ff;
}

.green-btn {
	background-color: #52c41a;
}

.green-btn:hover {
	background-color: #73d13d;
}

/***Default-Tooltip***/
.default-tooltip {
	position: relative;
	cursor: pointer;
}

.default-tooltip::after {
	content: attr(data-tooltip);
  	position: absolute;
  	bottom: calc(100% + 10px);
    left: 50%;
    transform: translateX(-50%) translateY(6px);
  	background: rgba(0,0,0,.75);
  	color: #fff;
  	padding: 6px 12px;
  	font-size: 12px;
  	border-radius: 3px;
  	white-space: nowrap;
  	opacity: 0;
  	pointer-events: none;
  	transition: all 0.25s ease;
  	box-shadow: 0 6px 18px rgba(0,0,0,0.15);
  	z-index: 2;
}

.default-tooltip::before {
  	content: "";
  	position: absolute;
  	bottom: calc(100% + 2px);
  	left: 50%;
  	transform: translateX(-50%) translateY(6px);
  	border-width: 4px;
  	border-style: solid;
  	border-color: rgba(0,0,0,.75) transparent transparent transparent;
  	opacity: 0;
  	transition: all 0.25s ease;
  	z-index: 1;
}

.default-tooltip:hover::after {
  	opacity: 1;
  	transform: translateX(-50%) translateY(0);
}

.default-tooltip:hover::before {
  	opacity: 1;
  	transform: translateX(-50%) translateY(0);
}

/*** Main-Scroll ***/
.main-scroll {
	background-color: #fff;
	height: auto;
	max-height: 370px;
	overflow-y: auto;
	overflow-x: hidden;
	border-radius: 0 0 5px 5px;
}

.main-scroll::-webkit-scrollbar-thumb {
	background-color: #e6e6e6;
	border-radius: 100px;
	transition: .2s all ease;
}

.main-scroll::-webkit-scrollbar-thumb:hover {
	background-color: #ccc;
}

.main-scroll::-webkit-scrollbar {
	width: 7px;
	height: 0px;
}

/*** Breadcrumb ***/
.breadcrumb-title::after {
	padding: 0 3px;
	margin-left: 5px;
	margin-right: 5px;
	color: #ccc;
	font-family: "fontawesome";
	content: "/";
}

.main-border-bottom {
    border-bottom: solid 1px #ccc;
}