@font-face {
	font-family: Open-sans;
	src: url(../fonts/OpenSans-Regular.ttf);
}

@font-face {
	font-family: Open-sans SemiBold;
	src: url(../fonts/OpenSans-SemiBold.ttf);
}

@font-face {
	font-family: Open-sans Bold;
	src: url(../fonts/OpenSans-Bold.ttf);
}


body {
	color: #545C6A;
	font-family: "Open-sans", Helvetica, Arial, sans-serif;
	font-size: 14px;
	background-color: #EEF2F4;
}

a {
	color: #2067B0;
}

a:hover {
	text-decoration: none;
}

button:focus {
	outline: none;
}

b, strong {
	font-family: Open-sans Bold;
}

.btn:focus {
	box-shadow: none;
}

::-webkit-scrollbar {
	width: 7px;
	height: 7px;
	border-radius: 8px;
}

/* Track */
::-webkit-scrollbar-track {
	background: #e8e8e8;
}

/* Handle */
::-webkit-scrollbar-thumb {
	background: #a8a8a8;
	border-radius: 8px;
}

/* Handle on hover */
::-webkit-scrollbar-thumb:hover {
	background: #555;
}


.table-login {
	background-image: url(../images/bg-login.png);
	background-color: #FFF5E2;
	background-repeat: no-repeat;
	background-position: center;
	background-size: cover;
	height: calc(100vh - 16px);
}

.table-login .login {
	position: fixed;
	top: 30%;
	left: 65%;
	background-color: #fff;
	border-radius: 15px;
	width: 290px;
	min-height: 360px;
	padding: 30px 20px 15px 20px;
	text-align: center;
	box-shadow: 0 6px 16px rgba(0, 0, 0, .1);
}

.table-login .login p {
	font-size: 11px;
}

.table-login .login .form-control {
	border-radius: 50px;
	margin-bottom: 15px;
	line-height: 1.5;
	font-size: 0.8rem;
}

.table-login .login button {
	color: #01A54F;
	border: 1px solid #01A54F;
	border-radius: 50px;
	text-transform: uppercase;
	background-color: #fff;
	padding: 5px 30px;
	font-family: Open-sans SemiBold;
}

.table-login .login button:hover {
	background-color: #01A54F;
	color: #fff
}

.main-menu.navbar {
	background-color: #fff;
	padding: 0rem 1rem 0rem 1rem;
}

.main-menu.vendor {
	box-shadow: 0 3px 6px rgba(0, 0, 0, .05);
	padding-top: 5px;
	padding-bottom: 5px;
	/*white-space: nowrap;*/
	/*overflow: auto;*/
}

.main-container .btn-upload-section
.main-menu .navbar-collapse {
	margin-bottom: -18px;
}

.main-menu.navbar .nav-item a.nav-link {
	color: #545c6a;
	padding: 5px;
	margin: 0 10px;
	display: inline-block;
	padding-top: 16px;
	border-bottom: 3px solid #fff;
	position: relative;
	font-family: Open-sans SemiBold;
}

.main-menu.navbar .nav-item a.nav-link:focus,
.main-menu.navbar .nav-item.active a.nav-link {
	color: #1058d0 !important;
	border-bottom: 3px solid #1058d0;
}

.main-menu.navbar .nav-item a.nav-link:hover {
	border-bottom: 3px solid #a3a9b1;
}

.main-menu.navbar .right-menu a {
	color: #545c6a;
	padding: 10px;
	margin: 0 5px;
	display: inline-block;
	padding-top: 16px;
	position: relative;
	font-family: Open-sans SemiBold;
}

.main-menu.navbar .right-menu a:hover {
	color: #3bc8f5;
}

.main-menu.navbar .right-menu .dropdown-menu {
	right: 0;
	left: auto;
}

.label-notify {
	background-color: red;
	border-radius: 15px;
	padding: 0px 8px;
	color: #fff;
	position: absolute;
	right: -30px;
	top: 0;
	font-size: 12px;
}

.main-menu .top-user {
	color: #545C6A;
}

.main-menu .top-user:hover {
	color: #2067B0;
	text-decoration: none;
}

.main-menu .top-notification {
	display: inline-block;
	margin-left: 30px;
	position: relative;
}

.main-menu .top-notification i {
	font-size: 30px;
	line-height: 24px;
	color: #545C6A;
	vertical-align: middle;
}

.main-menu .top-notification .label-notify {
	top: -10px;
	right: -18px;
}

.top-notification .dropdown-menu {
	min-width: 600px;
	font-size: 13px;
	border: 0;
	top: 15px;
	box-shadow: 0 3px 6px rgba(0, 0, 0, .15);
	right: 0;
	left: auto !important;
	transform: translate3d(0px, 24px, 0px) !important;
}

.top-notification .dropdown-menu:after {
	content: "";
	position: absolute;
	top: -10px;
	right: 30px;
	width: 0;
	height: 0;
	border-left: 10px solid transparent;
	border-right: 10px solid transparent;

	border-bottom: 10px solid #fff;
}

.top-notification .dropdown-menu li {
	position: relative;
	padding: 10px 15px 10px 70px;
}

.top-notification .dropdown-menu li p {
	margin-bottom: 0;
	margin-top: 5px;
}

.top-notification .dropdown-menu li:last-child {
	padding: 10px 15px;
}

.top-notification .dropdown-menu li:hover {
	background-color: #f8f9fa;
}

.top-notification .dropdown-menu li.disable a {
	color: #545C6A;
}

.icon-bel {
	background-image: url(../images/icon-bel.png);
	background-repeat: no-repeat;
	background-size: 26px auto;
	background-position: center;
	width: 32px;
	height: 32px;
	border-radius: 40px;
	display: inline-block;
	position: absolute;
	top: 15px;
	left: 20px;
}

.icon-bel.blue {
	background-color: #3E99CE
}

.icon-bel.orange {
	background-color: #DF532D
}

.icon-bel.green {
	background-color: #64A513
}

.current-date, .current-date-inline {
	font-size: 12px;
	color: #949595;
}

.detail-under-title {
	font-size: 12px;
	color: #949595;
	margin-top: 5px;
	position: relative;
}

.detail-under-title .current-date-inline {
	display: inline-block;
	margin-right: 35px;
}

.detail-under-title .label-status {
	position: absolute;
	right: 10px;
	width: 160px !important;
}

.current-date-inline .user-avatar {
	position: relative !important;
}

.btn-right-search {
	text-align: right;
	margin-top: 25px;
	margin-bottom: 25px;
}

.btn-right-search .icon-receive {
	background-image: url(../images/icon-receive.svg);
	background-repeat: no-repeat;
	background-size: 20px auto;
	width: 24px;
	height: 24px;
	line-height: 2;
	display: inline-block;
}

.btn-right-search .icon-share {
	background-image: url(../images/icon-share.svg);
	background-repeat: no-repeat;
	background-size: 20px auto;
	width: 24px;
	height: 20px;
	display: inline-block;
	vertical-align: top;
	margin-left: 15px;
}

.btn-right-search .add i {
	border-left: 1px solid #fff;
	padding-left: 10px;
	margin-left: 10px;
}

.btn-default {
	color: #535C69 !important;
	background-color: #EEF2F4;
	border: 1px solid #C6CDD3;
	font-size: 1.2rem !important;
}

.btn-default:hover {
	color: #535C69;
	background-color: #C6CDD3;
}

.btn-right-search .icon-upload {
	background-image: url(../images/icon-upload.png);
	background-repeat: no-repeat;
	background-size: 100% auto;
	width: 30px;
	height: 24px;
	display: inline-block;
	vertical-align: middle;
	margin-left: 10px;
}

.table-sending .btn-upload {
	background-color: #EEF2F4;
	border: 1px solid #C6CDD3;
	font-size: 11px !important;
	color: #2067B0;
	text-align: right;
	padding: .3rem 1rem .1rem 1rem !important;
}

.table-sending .btn-upload i {
	margin-right: 10px;
	font-size: 16px;
}

.table-sending .btn-upload:hover {
	background-color: #2067B0;
	color: #fff;
	border: 1px solid #2067B0;
}

.wrap-input-search {
	position: relative;
	margin: 25px 15px 25px 15px;
	width: calc(100% - 15px);
	display: inline-block;
}

/*.wrap-input-search i{*/
/*position: absolute;*/
/*right:30px;*/
/*top: 10px;*/
/*color: #868d95;*/
/*}*/
.main-title {
	display: inline-block;
}

.wrap-search {
	display: inline-block;
	width: 70%;
	margin-left: 15px;
}

.wrap-input-search input {
	height: 38px;
	margin-left: -15px;
}

.panel-search {
	position: absolute;
	top: 65px;
	left: 0px;
	background-color: #fff;
	transition: all 1s;
	padding: 0 15px 15px 15px;
	margin-left: 15px;
	z-index: 9;
	width: calc(100% - 45px);
	box-shadow: 0 7px 21px rgba(83, 92, 105, .12), 0 -1px 6px 0 rgba(83, 92, 105, .06);
}

.panel-search h4 {
	border-bottom: 1px solid #dddddd;
	padding-bottom: 15px;
	margin-bottom: 15px;
	padding-top: 30px;
	display: block;
	width: 100%;
}

.panel-search .form-group {
	margin: 0 2% 15px 2%;
	width: calc(100% - 45px);
	display: inline-block;
}

.panel-search label {
	font-weight: normal;
}

.btn {
	text-transform: uppercase;
	font-family: Open-sans SemiBold;
	border-radius: 2px !important;
	/*color: #fff;*/
	font-size: 0.75rem !important;
	line-height: 20px;
	min-width: 75px;
}

.btn:hover {
	color: #fff;
}

.btn-blue {
	background-color: #3bc8f5 !important;
	border-color: #3bc8f5 !important;
	color: #fff;
}

.btn-blue:hover {
	background-color: #41DCFF !important;
	border-color: #3bc8f5 !important;
}

.btn-grey {
	background-color: #abbac3 !important;
	border-color: #abbac3;
}

.btn-green {
	background-color: #1B6C40;
	color: #fff;
}

.badge-in-progress {
	background-color: #ff7036;
	color: #fff;
}

.wrap-table .nav-tabs {
	border-bottom: 0;
}

.wrap-table .view-mode {
	position: absolute;
	top: 0;
	right: 0;
	z-index: 1;
}

.wrap-table .view-mode i.active {
	color: #1058D0;
}

.wrap-table .detail-doc .nav-tabs {
	margin-bottom: 3px;
	word-break: keep-all;
	white-space: nowrap;
	flex-flow: nowrap;
	overflow-x: auto;
	overflow-y: hidden;
	padding-bottom: 5px;
}

.wrap-table .detail-doc .nav-tabs::-webkit-scrollbar {
	height: 4px;
	width: 4px;
	border-radius: 8px;
	opacity: 0.1;
}

/*.wrap-table .detail-doc .nav-tabs::-webkit-scrollbar-track {*/
/*    background: #e8e8e8;*/
/*    opacity: 0.1;*/
/*}*/

/*.wrap-table .detail-doc .nav-tabs::-webkit-scrollbar-thumb {*/
/*    background: #a8a8a8;*/
/*    border-radius: 8px;*/
/*    opacity: 0.1;*/
/*}*/

/*.wrap-table .detail-doc .nav-tabs::-webkit-scrollbar-thumb:hover {*/
/*    background: #555;*/
/*    opacity: 0.1;*/
/*}*/
textarea:hover,
textarea:active,
textarea:focus {
	outline: 0px !important;
	-webkit-appearance: none;
	box-shadow: none !important;
}

.detail-doc .tab-content #comment-doc {
	padding-right: 8px;
	/*overflow-x: auto;*/
}

.detail-doc .tab-content .comment-list {
	margin-left: -42px;
	padding-right: 5px;
	max-height: calc(100vh - 420px);
	/*max-height: 70%;*/
	overflow: auto;
}

.detail-doc .tab-content .comment-list .btn-reply {
	font-size: 10px;
}

.detail-doc .tab-content .btn-send {
	background-color: #0a6aa1;
	color: #fff;
	padding: 4px;
	border-radius: 4px;
}


.detail-doc .tab-content .comment-list .reply-comment {
	padding: 0 5px;
}

.detail-doc .tab-content .input-reply {
	border: 1px solid #0c0c0c;
	border-radius: 8px;
	/*resize: none;*/
}

.detail-doc .tab-content .comment-list .date-comment {
	/*opacity: 0.7;*/
	font-size: 10px;
}

.detail-doc .tab-content .comment-list .comment {
	display: inline-block;
	vertical-align: top;

}

.detail-doc .tab-content .comment-list .content-comment {
	background-color: #F0F2F5;
	border-radius: 8px;
	padding: 6px 10px;
	position: relative;
}

.detail-doc .tab-content .comment-list .content-comment .dropdown-action {
	position: absolute;
	right: 6px;
	top: 6px;
}

.detail-doc .tab-content .comment-list .block-comment {
	padding-left: 42px;
	padding-top: 8px;
}

.detail-doc .tab-content .comment-list .dropdown-menu-action-comment {
	font-size: 12px;
}

.vendor .wrap-table .view-mode {
	right: 5px;
	top: 5px;
}

.table-incoming, .table-sending {
	background-color: #fff;
}

.nav-tabs .nav-link {
	border: 1px solid #D0D6DB;
	background-color: #EEF2F4;
	margin-right: 15px;
	padding: .25rem 1.5rem;
	color: #6E747E;
	font-family: Open-sans SemiBold;
	position: relative;
	font-size: 13px;
}

.nav-tabs .nav-link:hover {
	background-color: #fff;
	border: 1px solid #D0D6DB;
	border-bottom: 0
}

.nav-tabs .nav-item.show .nav-link, .nav-tabs .nav-link.active {
	color: #1058D0;
}

/* Customize the label (the container) */
.wrap-checkbox {
	display: inline-block;
	position: relative;
	margin-bottom: 12px;
	cursor: pointer;
	font-size: 14px;
	-webkit-user-select: none;
	-moz-user-select: none;
	-ms-user-select: none;
	user-select: none;
}

/* Hide the browser's default checkbox */
.wrap-checkbox input {
	position: absolute;
	opacity: 0;
	cursor: pointer;
	height: 0;
	width: 0;
}

/* Create a custom checkbox */
.checkmark {
	position: absolute;
	top: 0;
	left: 0;
	height: 20px;
	width: 20px;
	background-color: #fff;
	border-radius: 3px;
	border: 1px solid #D0D6DB;
}

/* Create the checkmark/indicator (hidden when not checked) */
.checkmark:after {
	content: "";
	position: absolute;
	display: none;
}

.wrap-checkbox {
	margin-right: 5px;
	margin-bottom: 5px;
}

.wrap-checkbox .label {
	padding-left: 24px;
	font-weight: bold;
}

/* On mouse-over, add a grey background color */
.wrap-checkbox:hover input ~ .checkmark {
	background-color: #f8f8f8;
}

/* When the checkbox is checked, add a blue background */
.wrap-checkbox input:checked ~ .checkmark {
	background-color: #fff;
}

/* Show the checkmark when checked */
.wrap-checkbox input:checked ~ .checkmark:after {
	display: block;
}

/* Style the checkmark/indicator */
.wrap-checkbox .checkmark:after {
	left: 6px;
	top: 3px;
	width: 5px;
	height: 10px;
	border: solid #2067B0;
	border-width: 0 2px 2px 0;
	-webkit-transform: rotate(45deg);
	-ms-transform: rotate(45deg);
	transform: rotate(45deg);
}

.table {
	color: #545C6A;
	background-color: #fff;
	border-left: 1px solid #fff;
	border-right: 1px solid #fff;
}

.table thead th {
	color: #545C6A;
	font-weight: normal;
	text-transform: capitalize;
	font-size: 12px;
	background-color: #F6F8F9;
}

.table th {
	padding: .75rem .75rem .5rem .75rem;
	position: relative;
	border-bottom: 1px solid #EEF2F4;
}

.table td {
	padding: 1rem .75rem .75rem .75rem;
	position: relative;
	border-bottom: 1px solid #EEF2F4;
}

.table th a.icon-sort {
	width: 20px;
	height: 20px;
	line-height: 20px;
	display: inline-block;
	background-image: url(../images/icon-sort.svg);
	background-repeat: no-repeat;
	background-size: 19px auto;
	background-position: center right;
	vertical-align: middle;
}

.table th a.icon-sort:hover {
	background-image: url(../images/icon-sort-hover.svg);
}

.table td.col-id {
	width: 80px;
	text-align: center;
}

.table td.id {
	width: 1%;
}


.table .col-checkbox {
	width: 50px;
	text-align: left;
}

.table .col-revision, .table .col-priority {
	width: 110px;
}

.table .col-priority {
	text-align: center;
}

.table .col-name {
	width: 20%;
	position: relative;
	/*word-break: break-all;*/
}

.table-sending.table .col-name {
	width: 40%;
}

.table .col-account-no {
	width: 150px;
}

.table .col-type {
	width: 15%;
}

.table .col-name .thumb {
	display: inline-block;
	width: 24px;
	height: 24px;
	position: absolute;
	top: 1.3rem;
}

.table .col-name.folder .thumb {
	top: 1rem;
}

.table .col-name.folder a {
	color: #545C6A;
	font-family: Open-sans SemiBold;
}

.table .col-name .thumb img {
	max-width: 100%;
}

.table .col-name p {
	display: inline-block;
	padding-left: 40px;
	margin-bottom: 0;
}

#table_business {
	width: 100% !important;
}

#table_business .col-code {
	width: 5.8% !important;
}

#table_business .col-name {
	/*width: 20.4% !important;*/
	width: 24.6% !important;
}

#table_business .col-type {
	width: 5.13% !important;
}

#table_business .col-group {
	width: 7.73% !important;
}

#table_business .col-taxcode {
	width: 10.5% !important;
}

#table_business .col-phone {
	width: 6.3% !important;
}

#table_business .col-mail {
	width: 14.4% !important;
}

#table_business .col-note {
	width: 4.2% !important;
}

#table_business .col-bankcode {
	width: 8.6% !important;
}

#table_business .col-bankbranch {
	width: 6.7% !important;
}

#table_business .col-accountno {
	width: 9.8% !important;
}

.wrapword {
	white-space: -moz-pre-wrap !important; /* Mozilla, since 1999 */
	white-space: -webkit-pre-wrap; /* Chrome & Safari */
	white-space: -pre-wrap; /* Opera 4-6 */
	white-space: -o-pre-wrap; /* Opera 7 */
	white-space: pre-wrap; /* CSS3 */
	word-wrap: break-word; /* Internet Explorer 5.5+ */
	word-break: break-all;
	white-space: normal;
}

.user-avatar {
	width: 34px;
	height: 34px;
	display: inline-block;
	vertical-align: middle;
	overflow: hidden;
	border-radius: 50%;
	background-color: #a8a8a8;
}

.user-avatar img {
	object-fit: cover;
	display: inline-block;
	width: 115%;
	margin-top: 35%;
	transform: translateY(-35%);
}

.doc-avatar {
	width: 40px;
	height: 40px;
	display: inline-block;
	vertical-align: middle;
	text-align: center;
	overflow: hidden;
	border-radius: 4px;
	background-color: #EEF2F4;
	position: absolute;
	left: 0;
}

.doc-avatar img {
	width: 36px;
	text-align: center;
	display: inline-block;
}

.table .col-project a {
	display: block;
	color: #2067B0;
}

.table .col-user {
	text-align: center;
}

.table .col-user a.user-avatar:nth-child(1) {
	margin-left: 0px;
}

.table .col-user a.user-avatar {
	margin-left: -25px;
}

.table .col-user a.user-more {
	font-family: Open-sans SemiBold;
	color: #2067B0;
}

.table td.col-revision {
	color: #2067B0;
	text-align: center;
}

.btn-tab {
	border: 1px solid #D0D6DB;
	border-bottom: 0;
	background-color: #EEF2F4;
	margin-right: 10px;
	padding: .35rem 1.5rem;
	color: #6E747E;
	font-family: Open-sans SemiBold;
	position: relative;
}

.btn-tab.active, .btn-tab:hover {
	background-color: #fff;
	color: #2067B0;
}

table.dataTable thead th {
	border-bottom: 0 !important;
	background-color: #F3FBFF;
	color: #2067B0;
}

table.dataTable thead td {
	border-bottom: 0 !important
}

table.dataTable.no-footer {
	border-bottom: 0 !important;
}

.table .col-status {
	text-align: center;
}

.table .col-date {
	text-align: center;
}

.label-pending, .label-overdue,
.label-request-cancel,
.label-done, .label-in-progress, .label-declined, .label-primary {
	color: #fff !important;
	font-size: 10px !important;
	font-family: Open-sans Bold;
	text-indent: 15px;
	min-width: 120px;
	padding-right: 24px;
	line-height: 20px;
	border-radius: 2px;
	display: inline-block;
	text-transform: uppercase;
	background-image: url(../images/icon-label.png);
	background-repeat: no-repeat;
	background-size: 22px auto;
	background-position: 98% 20%;
}

.label-request-cancel {
	background-color: #ff8e0f;
}

.text-brown {
	color: #A96C12;
}

.text-request-cancel {
	color: #ff8e0f !important;
}

.label-pending {
	background-color: #FFC001;
}

.text-pending {
	color: #FFC001 !important;
}

.label-in-progress {
	background-color: #3AA6EC;
}

.label-overdue {
	background-color: #F24A4A;
}

.label-done {
	background-color: #61AA21;
}

.label-primary {
	background-color: #5BA6FF;
}

.label-declined {
	background-color: #b9b9b9
}

.table-ticket text-area, .table-ticket select {
	border: 1px solid #ced4da;
}

.table-ticket .table .col-name p {
	width: calc(100% - 50px);
	padding-left: 0;
}

.table-ticket .table .col-name .thumb {
	position: relative;
	vertical-align: top;
	top: 0;
	width: 30px;
}

.modal-ticket input::placeholder {
	color: #495057;
}

.modal-ticket .form-upload {
	text-align: center;
	margin-left: 20%;
	margin-bottom: 15px;
	padding-top: 20px;
	padding-bottom: 20px;
	width: 60%;
	border: 1px #ABB1B8 dashed;
	background-image: url(../images/icon-upload-blue.svg);
	background-repeat: no-repeat;
	background-size: 63px auto;
	background-position: center 15%;
}

.modal-ticket .form-upload input[type="file"] {
	width: 50%;
	height: 80px;
	opacity: 0;
	cursor: pointer;
}

.modal-ticket .form-upload .btn-blue {
	padding: .175rem .95rem;
	text-transform: none;
}

.modal-ticket .form-upload p {
	color: #2067AA;
	margin-bottom: 15px;
	margin-top: -30px;
}

.modal-ticket .file {
	position: relative;
	margin: 20px 0px 20px 30px;

}

.modal-ticket .file img {
	margin-right: 10px
}

.modal-ticket .file label {
	position: absolute;
	right: 0px;
	top: 10px;
}


.label-notification {
	border-radius: 50px;
	padding: 0px 8px;
	background-color: red;
	position: absolute;
	right: -9px;
	top: -8px;
	color: #fff;
	font-size: 12px;
	font-weight: normal;
}

.main-container {
	width: 100%;
	/*padding-left: 50px;
	padding-right:50px;*/
}

.main-container .btn-upload-section {
	/*position: absolute;*/
	right: 15px;
	top: 15px;
}

.main-container.vendor .btn-upload-section {
	/*position: absolute;*/
	right: 15px;
	top: 15px;
}

.main-container.vendor .detail-doc {
	margin-top: 0;
}

.group-avatar {
	display: inline-block;
}

.func-in-row {
	position: relative;
	display: inline-block;
	width: 24px;
	height: 24px;
}

.func-in-row .dropdown-menu {
	font-size: 14px;
	border: 0;
	box-shadow: 0 3px 6px rgba(0, 0, 0, .15);
	right: 0;
	left: auto !important;
	/*transform: translate3d(0px, 24px, 0px) !important;*/
}

.func-in-row .icon-func {
	display: block;
	color: #aaa;
	text-align: center;
}

.func-in-row .icon-func:hover,
.func-in-row .dropdown-item:hover {
	color: #2067B0;
}

.func-in-row .dropdown-menu a i {
	margin-right: 5px;
	width: 24px;
	text-align: center;
}

.func-in-row .dropdown-item {
	padding: .5rem 1.5rem .5rem 1rem;
}

.func-in-row .dropdown-item.active, .func-in-row .dropdown-item:active {
	background-color: #3bc8f5 !important;
	color: #fff;
}

.nav-paging {
	padding: .5rem .75rem;
	text-transform: unset;
	font-size: 14px;
}

.nav-paging .left div {
	display: inline-block;
	/*margin-right: 30px;*/
}

.nav-paging .left div font {
	color: #2067B0;
	font-family: Open-sans SemiBold;
}

.nav-paging .mid {
	text-align: center;
}

.nav-paging .mid div {
	display: inline-block;
	margin-right: 15px;
}

.nav-paging .mid div a {
	padding: 0 .45rem;
	border-left: 1px solid #d0d0d0;
	font-family: Open-sans;
	color: #545C6A;
}

.nav-paging .mid div a.first {
	border-left: unset;
}

.nav-paging .mid div a.active {
	color: #007bff;
	font-family: Open-sans SemiBold;
}

.nav-paging .right {
	text-align: right;
}

.nav-paging .right .form-control {
	width: fit-content;
	display: inline-block;
	padding: .25rem .5rem;
	font-size: 12px;
}

.modal-dialog {
	/*transform: translateY(20%) !important;*/
}

.modal-sharing .modal-dialog {
	transform: translateY(10%) !important;
}

.modal-dialog.modal-upload-portal {
	transform: translateY(5%);
}

.modal-dialog.modal-ticket-portal {
	transform: translateY(5%);
}

.modal-upload-portal .icon-browse-file {
	margin-top: 5px;
	min-height: calc(1.5em + .75rem + 2px);
	background-size: 40px auto;
	background-position: 15px 0px;
	text-indent: 65px;
}

.modal-upload-portal .icon-browse-file .name-over-input {
	height: auto;
	min-height: calc(1.5em + .75rem + 2px);
	position: relative;
	white-space: pre-wrap;
	white-space: -moz-pre-wrap;
	white-space: -pre-wrap;
	white-space: -o-pre-wrap;
	word-wrap: break-word;
	left: 30px;
	width: 90%;
}

.modal-upload-portal .icon-browse-file .name-over-input p {
	margin-bottom: 0;
}

.modal-content {
	background-color: #EEF2F4;
}

.modal-content .modal-header {
	border-bottom: 0;
	padding-top: 25px;
}

.modal-content .modal-header .modal-title i {
	display: inline-block;
	height: 20px;
	margin-right: 15px;
}

.modal-content .modal-header .modal-title img {
	display: inline-block;
	max-height: 100%;
}

.modal-content .modal-body {
	background-color: #fff;
	margin: 0px 15px 15px 15px;
}

.empty-data {
	text-align: center;
	min-height: calc(100vh - 300px);
}

.empty-data img {
	margin-top: 50px;
	margin-bottom: 20px;
}

.icon-browse-file {
	/*background-image: url(../images/icon-upload-01.png);*/
	background-image: url(../images/icon-upload-blue.svg);
	background-repeat: no-repeat;
	background-size: 26px auto;
	background-position: 15px 8px;
	text-indent: 45px;
	position: relative;
	line-height: 1.5;
	color: #949595;


}

.form-control-file {
	opacity: 0;
	position: absolute;
	z-index: 2;
	display: block;
	left: 0;
	top: 0;
	cursor: pointer;
}

.form-group label {
	color: #949595;
	font-size: 0.9rem;
}

.form-control {
	font-size: 0.9rem
}

.form-control.disable {
	background-color: #EEF2F4
}

.form-control.select-2 {
	padding: .375rem 0rem 0rem 0rem;
	text-indent: .2rem;
	height: auto;
}

.modal-select2 .form-control .select2-container {
	width: 97% !important;
}

.modal-select2 .select2-container--default .select2-search--dropdown .select2-search__field,
.select2-container input:focus,
.modal-select2 .select2-container--default .select2-selection {
	outline: none !important;
}

.select2-dropdown {
	box-shadow: 0 3px 6px rgba(0, 0, 0, .16);
}

.modal-select2 .select2-container--default .select2-selection {
	border: 0 !important;
}

.modal-select2 .select2-container--default .select2-selection .select2-selection__rendered {
	line-height: 21px;
}

.modal-select2 .select2-container--default .select2-selection--single .select2-selection__rendered {
	line-height: 28px;
}

/*modal*/
.full-width .modal-dialog {
	background: #EEF2F4;
	max-width: 80%;
	transform: translateX(0px);
	margin: 0;
	margin-left: calc(100% - 80%);
	transform: translate(0, 0) !important;
}

.full-width .modal-header {
	border-bottom: 0;
}

.full-width .modal-header.modal-title {
	font-size: 26px;
	width: 70%;
}

.full-width .btn-right-search {
	padding-top: 0;
	padding-bottom: 0px;
}

.full-width .modal-content {
	height: 100vh;
	width: 100%;
	overflow-y: scroll;
	border-radius: 0;
	background: transparent !important;
	border: 0;
	padding: 15px;
}

.full-width .modal-body {
	background: transparent !important;
}

.full-width .modal-content .close {
	border-radius: 50px;
	position: absolute;
	right: 17px;
	top: 30px;
	padding: 3px 8px;
	color: #ccc;
	opacity: 1;
}

.full-width .modal-content .close:active,
.full-width .modal-content .close:focus {
	outline: none;
	box-shadow: none;
	border: none
}

.modal-ticket .btn-right-search {
	margin-bottom: 0;
	margin-top: 0;
}

.field-left {
	background: #F9FAFB;
	padding: 15px;
	margin-bottom: 15px;
	box-shadow: 0 1px 1px 0 rgba(0, 0, 0, .04);
}

.field-left .title-inline {
	margin-bottom: 1rem;
	border-bottom: 1px solid #e8ecee;
	padding-bottom: 0.5rem;
}

.field-left .title-inline h4 {
	text-transform: uppercase;
	color: #545c6a;
	font-size: 0.7rem;
	display: inline-block;
	font-family: Open-sans SemiBold;
}

.field-left .title-inline h4 a {
	display: inline-block;
	font-size: 0.7rem;
	color: #a3a9b1;
	margin-left: 5px;
}

.field-left .title-inline h4 a:hover {
	color: #2067AA;
}

.field-left .form-group {
	margin-bottom: 1.2rem;
	position: relative;
	display: block;
}

.field-left .edit-info {
	color: #a3a9b1;
	margin-left: 15px;
}

.field-left .edit-info:hover {
	color: #2067AA
}

.field-left label {
	font-weight: normal;
	font-size: 0.8rem;
	color: #a3a9b1;
	margin-bottom: 3px;
}

.field-left .status label {
	color: #fff !important;
	position: absolute;
	right: 0;
	top: -2px;
}

.field-left a {
	color: #2067AA;
}

.field-left .icon-download {
	font-size: 0.85rem;
	text-align: left;
	padding-top: 15px;
}

.label-grey {
	background-color: #E3E4E6;
	border-radius: 50px;
	padding: 3px 15px;
	margin-right: 15px;
	display: inline-block;
	font-size: 12px;
}

.label-blue {
	background-color: #E8F1FB;
	border-radius: 50px;
	padding: 3px 15px 3px 10px;
	margin-right: 15px;
	display: inline-block;
	font-size: 12px;
	color: #2067B0;
}

.label-blue:hover {
	background-color: #2067B0;
	color: #fff;
}

.label-blue i {
	font-size: 16px;
	vertical-align: middle;
	margin-right: 5px;
}

.field-left .review {
	background-color: #EEF2F4;
	border: 1px solid #D9D9D9;
	text-align: center;
	padding: 10px;
	height: 180px;
	overflow-y: scroll;
}

.field-left .review img {
	max-width: 100%;
	display: block;
}


.timeline {
	position: relative;
	max-width: 1200px;
	margin: 0 auto;
}

.timeline::after {
	content: '';
	position: absolute;
	width: 3px;
	background-color: #ccc;
	top: 15px;
	bottom: 0;
	left: -5px;
}

.timeline .panel {
	padding: 10px 0px 10px 20px;
	position: relative;
	background-color: inherit;
	width: 100%;
}

.timeline .panel.div_action {
	padding: 0px 0px 10px 20px;
}

.timeline .panel::after {
	content: '';
	position: absolute;
	width: 20px;
	height: 20px;
	left: -14px;
	background-color: #EEF2F4;
	border: 2px solid #FF9F55;
	top: 15px;
	border-radius: 50%;
	z-index: 1;
}

.timeline .right {
	left: 0px;
}

.timeline .right::before {
	content: " ";
	height: 0;
	position: absolute;
	top: 22px;
	width: 0;
	z-index: 1;
	left: 10px;
	border: medium solid white;
	border-width: 10px 10px 10px 0;
	border-color: transparent white transparent transparent;
}

.right::after {
	left: -16px;
}

.timeline .panel .content {
	padding: 20px 30px 10px 30px;
	background-color: white;
	position: relative;
	border-radius: 6px;
}

.timeline .panel.yellow .content {
	background-color: #FFFEEF
}

.timeline .panel .title {
	margin-bottom: 15px;
}

.timeline .panel .title strong {
	margin-left: 10px;
	margin-right: 10px;
}

.timeline .panel p {
	margin-bottom: 5px
}

.timeline .panel .update-title {
	text-transform: uppercase;
	font-size: 10px;
	font-family: Open-sans SemiBold;
	margin-top: 15px;
	color: #949595;
}


.bootstrap-datetimepicker-widget .fa-chevron-up,
.bootstrap-datetimepicker-widget .fa-chevron-down {
	color: #545C6A !important;
}

.nav-browser {
	background-color: #fff;
	border-top: 1px solid #dee2e6;
	display: block;
	padding-top: 20px;
	padding-bottom: 20px;
	position: relative;
}

.nav-browser a {
	font-size: 1rem;
	color: #949595;
	padding-left: 20px;
	padding-right: 20px;
}

.nav-browser a.active, .nav-browser a:hover {
	color: #2067B0;
}

.nav-browser-csdl a {
	padding-left: 5px;
	padding-right: 5px;
}

.breadcrumb {
	background-color: #fff;
}


.icon-thumbnail {
	width: 24px;
	height: 24px;
	display: inline-block;
	background-image: url(../images/icon-thumbnail.svg);
	background-repeat: no-repeat;
	background-position: center;
	background-size: 24px auto;
}

.icon-thumbnail.active {
	background-image: url(../images/icon-thumbnail-active.svg);
}

.icon-list {
	width: 24px;
	height: 24px;
	margin-right: 8px;
	display: inline-block;
	background-image: url(../images/icon-list.svg);
	background-repeat: no-repeat;
	background-position: center;
	background-size: 24px auto;
}

.icon-list.active {
	background-image: url(../images/icon-list-active.svg);
}

.detail-doc {
	padding: 25px 15px;
	margin-top: 32px;
	margin-right: 5px;
	width: calc(25% - 15px);

	background-color: #fff;
	position: fixed;
	right: 0;
	z-index: 1030;
	height: calc(100vh - 150px);
	transition: 0.3s ease;
}

.detail-doc .tab-content {
	/*overflow-y: auto;*/
	height: calc(100vh - 280px);
	font-size: 0.825rem;
	overflow: visible;
}

.detail-doc .header {
	min-height: 40px;
	margin-bottom: 15px;
}

.detail-doc .header span {
	position: absolute;
	width: 30px;
	height: 30px;
	display: block;
}

.detail-doc .header h4 {
	padding-left: 50px;
	font-size: 20px;
}

.detail-doc .content .nav-link {
	background-color: transparent;
	border: 0;
	margin-right: 0;
	border-bottom: 2px solid #EEF2F4;
	padding: 0.25rem 0.7rem;
}

.detail-doc .content .nav-link.active, .detail-doc .content .nav-link:hover {
	color: #1058D0;
	border-bottom: 2px solid #1058D0;
}

.detail-doc .content .tab-pane {
	margin-top: 15px;
}

.detail-doc .content .file-review {
	padding: 10px;
	height: 250px;
	background-color: #EEF2F4;
	border: 1px solid #D9D9D9;
	overflow: hidden;
}

.detail-doc .content .file-review img {
	width: 100%;
	display: block;
}

.detail-doc .content .group-detail {
	display: block;
	margin: 10px 0;
}

.detail-doc .content .group-detail label {
	width: 35%;
	display: inline-block;
}

.detail-doc .content .group-detail label.w100 {
	width: 100% !important;
}

.detail-doc .content .group-detail p {
	display: inline-block;
	text-align: right;
	font-family: Open-sans SemiBold;
	margin-bottom: 5px;
	padding-right: 10px;
}

.detail-doc .content .group-detail p.w68 {
	width: 68%;
}

.detail-doc .func-avatar {
	font-size: 12px;
	max-height: 150px;
	overflow-y: scroll;
	color: #545C6A;
	padding-left: 5px;
}

.detail-doc .func-avatar .user-avatar {
	margin-right: 5px;
}

.detail-doc #version-doc .item-div {
	background-color: #F6F6F6;
	padding: 10px;
}

.detail-doc #version-doc .item-version .icon {
	width: 40px;
	vertical-align: top;
}

.detail-doc .user-avatar {
	width: 30px;
	height: 30px;
	line-height: 30px;
	margin-right: 5px;
	overflow: hidden;
}

.detail-doc .tooltip-avatar .tooltip-content .detail p label {
	width: 95px !important;
}

.detail-doc .tooltip-avatar .tooltip-content .detail p span {
	width: auto;
}

.label-tags {
	background-color: #E3E4E6;
	border-radius: 15px;
	padding: 5px 20px;
	color: #505763;
	display: inline-block;
	margin-right: 15px;
}

.label-tags-res {
	background-color: #E8F1FB;
	border-radius: 15px;
	padding: 5px 20px;
	color: #2067B0;
	display: inline-block;
	margin-right: 15px;
}

.label-tags-res i {
	font-size: 20px;
	vertical-align: middle;
	margin-right: 5px;
}


.w100 {
	width: 100% !important
}

.w85 {
	width: 85% !important
}

.panel-doc-history {
	background-color: #F6F6F6;
	border-radius: 3px;
	padding: 10px 10px 10px 65px;
	position: relative;
	color: #777777;
	margin-bottom: 15px;
}

.panel-doc-history .user-avatar {
	position: absolute;
	top: 15px;
	left: 15px;
}

.panel-doc-history .detail p {
	margin-bottom: 5px;
}

.panel-doc-history .detail p a, .doc-grid .item a,
.doc-list .item a, .panel-revision .item a {
	font-family: Open-sans SemiBold;
}

.doc-list .item a.user-assign {
	font-weight: normal;
	color: #545C6A;
}

.doc-grid .item, .doc-list .item {
	padding: 15px 15px 5px 15px;
	background-color: #fff;
	margin-bottom: 8px;
}

.doc-grid .item.new,
.panel-revision .item.new,
.doc-list .item.new {
	background-color: #FFFBE8;
}

.doc-list .func-in-row {
	position: absolute;
	right: 0px;
	top: 0px;
	font-weight: normal;
}

.doc-grid .item .thumbnail {
	position: relative;
	height: 240px;
	overflow: hidden;
	border: 1px solid #E3E4E6;
	margin-bottom: 15px;
}

.doc-list .item .thumbnail {
	position: relative;
	height: 120px;
	overflow: hidden;
	border: 1px solid #D0D6DB;
	margin-bottom: 15px;
	margin-left: 60px;
}

.doc-list .item .detail .related a {
	display: inline-block;
}

.doc-list .item .detail a.thumbnail-small {
	position: relative;
	width: 40px;
	height: 30px;
	overflow: hidden;
	border: 1px solid #D0D6DB;
	margin-bottom: 15px;
	margin-top: 15px;
	vertical-align: middle;
}

.doc-list .item .detail a.thumbnail-small:hover {
	border: 1px solid #2067B0;
}

.doc-grid .item .thumbnail img.thumb, .doc-list .item .thumbnail img.thumb, .thumbnail-small img.thumb {
	display: inline-block;
	width: 100%;
}

.doc-grid .item .thumbnail .icon-file {
	position: absolute;
	top: calc(50% - 60px);
	left: calc(50% - 60px);
	z-index: 2;
}

.doc-grid .item .thumbnail .icon-file img {
	max-width: 120px
}

.doc-list .item .thumbnail .icon-file {
	position: absolute;
	top: calc(50% - 30px);
	left: calc(50% - 30px);
	z-index: 2;
}

.doc-list .item .thumbnail .icon-file img {
	max-width: 70px
}

.doc-grid .item .thumbnail .img-fluid,
.doc-list .item .thumbnail .img-fluid {
	opacity: 0.5;
	width: 100%;
	height: 100%
}

.doc-list .item .thumbnail.thumbnail-list .img-fluid {
	opacity: 0.5;
	width: unset;
	height: unset;
	min-height: 118px;
}

.doc-grid .item .user, .doc-list .item .user {
	position: relative;
	padding-left: 60px;
	margin-bottom: 10px;
}

.doc-grid .item .user p, .doc-list .item .user p {
	margin-bottom: 0;
	/*padding-right: 125px;*/
}

.doc-grid .item .user p, .doc-list .item .user .title-document {
	padding-right: 125px;
	word-break: break-word;
}

.limit-content {
	-webkit-line-clamp: 2;
	-webkit-box-orient: vertical;
	overflow: hidden;
	text-overflow: ellipsis;
	display: -webkit-box;
	height: 43px;
	line-height: 20px;
}

.doc-list .item .user i.fa-chevron-right {
	margin: 0 5px;
}

.doc-grid .item .user .user-avatar, .doc-list .item .user .user-avatar {
	position: absolute;
	left: 0;
}

.doc-list .item .user .group-avatar-permission {
	display: inline-block;
}

.doc-list .item .user .group-avatar-permission .user-avatar {
	position: static;
}

.doc-list .item .user .group-avatar-permission .tooltip-content {
	right: auto;
	left: -15px;
}

.doc-list .item .user .group-avatar-permission .tooltip-content p {
	padding-right: 0;
}

.doc-list .item .user .group-avatar-permission .tooltip-content:after {
	right: auto;
	left: 25px;
}

.doc-grid .item .user .current-date, .doc-list .item .user .current-date {
	display: block;
	margin-top: 3px;
}

.doc-grid .item .user span.view, .doc-list .item .user span.view,
.doc-grid .item .user .view, .doc-list .item .user .view {
	position: absolute;
	right: 30px;
	top: 0;
	font-size: 12px;
	color: #949595;
}

.doc-list .item .user span.label-status {
	position: absolute;
	right: 30px;
	top: 0;
	font-size: 12px;
	padding: 2px 5px 2px 15px;
	color: #fff;
	border-radius: 3px;
}

.doc-list .label-status.new {
	background-color: #2067B0;
}

.doc-list .label-status.inprogress {
	background-color: #FFC001;
}

.doc-list .label-status.done {
	background-color: #61AA21;
}

.doc-list .label-status.overdue {
	background-color: #FF0000;
}

.doc-list .label-status i {
	width: 19px;
	height: 19px;
	display: inline-block;
	vertical-align: middle;
	margin-left: 5px;
}

.doc-list .label-status i img {
	width: 100%;
	display: block;
}

.doc-grid .item .user span.view i, .doc-list .item .user span.view i {
	color: #DF532D;
}

.icon-label {
	background-image: url(../images/icon-label.png);
	background-repeat: no-repeat;
	background-position: center;
	background-size: cover;
}

.doc-grid .item .detail a {
	display: block;
}

.doc-list .item .detail a.title {
	width: 80%;
	margin-bottom: 5px;
}

.doc-grid .item .detail p, .doc-list .item .detail p {
	margin-bottom: 0;
}

.doc-list .item .detail p {
	display: inline-block;
	font-size: 0.8125rem
}

.doc-list .item .detail p.tags {
	font-size: 12px;
}

.doc-list .item .detail p a {
	display: inline-block;
}

.doc-list .item .doc-avatar.small {
	display: none;
}

.doc-list .item .project-name {
	display: none;
	font-size: 12px;
	margin-top: 6px;
}

.doc-list .item .detail p i.fa-tag {
	color: #949595;
}

.doc-grid .item .detail p label, .doc-list .item .detail p label {
	color: #949595;
	min-width: 90px;
	margin-bottom: 0;
	font-weight: normal;
}

.doc-list.doc-list-mode-simple .item {
	position: relative;
}

.doc-list.doc-list-mode-simple .item .project-name,
.doc-list.doc-list-mode-simple .item .responsible {
	display: none;
}

.doc-list .detail-info .responsible {
	/*display: none;*/
}

.doc-list.doc-list-mode-simple .detail-info,
.doc-list.doc-list-mode-simple .doc-avatar {
	display: none;
}

.doc-list.doc-list-mode-simple .user p {
	/*display: inline-block;*/
}

.doc-list.doc-list-mode-simple .user .detail-under-title {
	/*padding-right: 20px;*/
	position: static;
	/*display: inline-block;*/
}

.doc-list.doc-list-mode-simple .item .detail-under-title .label-status {
	top: 27px;
	width: 150px !important;
}

.doc-list.doc-list-mode-simple .item .doc-avatar.small {
	display: inline-block;
}

.doc-list.doc-list-mode-simple .item.extend {

}

.doc-list.doc-list-mode-simple .item.extend .project-name {
	display: inline-block;
}

.doc-list.doc-list-mode-simple .item.extend .detail-under-title .responsible {
	display: block;
}

.translate-doc.doc-list .item .detail {
}

.panel-revision {
}

.panel-revision .item {
	border-bottom: 1px solid #F6F6F6;
	position: relative;
	padding: 20px 15px;
}

.panel-revision .icon-file {
	width: 30px;
	height: 30px;
	display: inline-block;
	position: absolute;
}

.icon-file img {
	max-width: 100%;
	display: inline-block;
}

.panel-revision .item p {
	padding-left: 50px;
	margin-bottom: 5px;
}

.panel-revision .item p span {
	margin: 0 5px;
}

.table-doc .detail {
	position: relative;
}

.table-doc .user .func-in-row {
	position: absolute;
	right: 0px;
	top: 0px;
	font-weight: normal;
}

.table-doc .detail .responsible {
	margin-top: 15px;
	margin-bottom: 15px
}

.table-doc .detail .responsible .user-avatar {
	width: 30px;
	height: 30px;
	display: inline-block;
	vertical-align: middle;
}

.table-doc .detail .responsible label, .table-doc .detail .related label {
	display: inline-block;
	font-size: 12px;
}

.table-doc .detail .related {
	text-align: right
}

.table-doc .crm-project {
	position: absolute;
	right: 180px;
	top: -34px;
	text-align: right;
}

/*.table-doc .detail .responsible .user-avatar img{width: 40px;}*/
.list-folder {
	padding: 30px 45px 15px 30px;
	background-color: #fff;
	margin-bottom: 15px;
	/*position: relative;*/
}

.list-folder .item-folder {
	border: 1px solid #D0D6DB;
	background-color: #EEF2F4;
	padding: 8px 10px;
	margin-bottom: 15px;
	margin-left: 15px;
	border-radius: 3px;
	width: 260px;
	position: relative;
}

.list-folder .item-folder div:first-child {
	width: 100%;
	display: inline-block;
	line-height: 1.3;
	min-height: 34px;
}

.list-folder .item-folder img.folder {
	width: 34px;
	display: inline-block;
}

.list-folder .item-folder .title {
	display: inline-block;
	width: calc(100% - 60px);
	vertical-align: middle;
	font-family: Open-sans SemiBold;
	text-overflow: ellipsis;
	white-space: nowrap;
	overflow: hidden;
}

.not-permission {
	background-color: #fff;
	height: calc(100vh - 45px);
	padding-top: 15px;
}

.not-permission img {
	display: inline-block;
	max-width: 50%;
	text-align: center;
}

.fa-file-medical {
	color: #8f8f8f;
}

.icon-incomming, .icon-out-ticket {
	width: 19px;
	height: 19px;
	display: inline-block;
	vertical-align: middle;
	margin-left: 5px;
	background-repeat: no-repeat;
	background-position: center;
	background-size: cover;
}

.icon-incomming {
	background-image: url(../images/icon-incomming.svg);
}

.icon-out-ticket {
	background-image: url(../images/icon-out-ticket.svg);
}


.tooltip-avatar {
	position: relative;
	display: inline-block;
	box-shadow: 0 0 1px 1px rgba(255, 255, 255, 1);
	border-radius: 50px;
}

div > .tooltip-avatar {
	margin-left: 6px;
}

div > .tooltip-avatar:first-child {
	margin-left: 0;
}

.col-user .tooltip-avatar {
	margin-left: -20px;
}

.tooltip-avatar .tooltip-content {
	/*visibility: hidden;*/
	display: none;
	min-width: 400px;
	background-color: white;
	box-shadow: 0 8px 16px rgba(0, 0, 0, .16);
	color: #000;
	border-radius: 6px;
	padding: 15px 5px 15px 15px;

	position: absolute;
	z-index: 10;
	right: -15px;
	top: 115%;
}

.tooltip-avatar.right .tooltip-content {
	left: 0;
	right: auto;
}

.tooltip-avatar .tooltip-content.left {
	right: auto !important;
	left: -15px;
}

.tooltip-avatar:hover .tooltip-content {
	display: block;
	/*visibility: visible;*/
}


.tooltip-avatar .tooltip-content:after {
	position: absolute;
	top: -8px;
	right: 25px;
	display: block;
	content: "";
	width: 0;
	height: 0;
	border-left: 8px solid transparent;
	border-right: 8px solid transparent;

	border-bottom: 8px solid #fff;
	box-shadow: 0 -8px 16px rgba(0, 0, 0, .16);
}

.tooltip-avatar .tooltip-content.left:after {
	right: auto;
	left: 25px;
}

.tooltip-avatar .tooltip-content .user-avatar {
	width: 40px;
	height: 40px;
	display: inline-block;
	margin-right: 15px;
}

.tooltip-avatar .tooltip-content .detail {
	width: calc(100% - 60px);
	display: inline-block;
	vertical-align: top;
	text-align: left;
}

.tooltip-avatar .tooltip-content .detail p {
	margin-bottom: 3px;
	font-size: 12px;
	display: block;
	text-align: left;
}

.tooltip-avatar .tooltip-content .detail p.name {
	color: #2067B0;
	font-family: Open-sans SemiBold;
	font-size: 14px;
	margin-bottom: 10px;
	display: block;
}

.tooltip-avatar .tooltip-content .detail p label {
	color: #777;
	display: inline-block;
	width: 80px !important;
	vertical-align: top;
	margin-bottom: 0px;
}

.tooltip-avatar .tooltip-content .detail p span {
	width: calc(100% - 90px);
	display: inline-block;
}

.dropdown-ticket {
	border: 0;
	box-shadow: 0 7px 21px rgba(83, 92, 105, .12), 0 -1px 6px 0 rgba(83, 92, 105, .06);
}

.dropdown-ticket .dropdown-item {
	padding: .4rem 1.5rem;
}

.dropdown-ticket a {
	font-size: 0.85rem;
	border-bottom: 1px solid #EEF2F4;
}

.dropdown-ticket a:hover, .dropdown-ticket a:hover i {
	color: #2067B0;
}

.dropdown-ticket i {
	margin-right: 15px;
	color: #949595;
	width: 18px;
}

.report-option-page {
	padding: 30px;
}

.btn-export-report {
	background-color: #1C6C40;
}

.btn-green-1 {
	color: #535c69;
	background-color: #bbed21;
	-webkit-box-shadow: 5px 5px 10px 0px rgba(0, 0, 0, 0.1);
	-moz-box-shadow: 5px 5px 10px 0px rgba(0, 0, 0, 0.1);
	box-shadow: 5px 5px 10px 0px rgba(0, 0, 0, 0.1);
}

.btn-black {
	color: #FFD700 !important;
	background-color: #000 !important;
}

.btn-black:hover {
	color: #fff !important;
}

.break-long-words {
	word-break: break-all;
}

.email-list-share .item-email {
	padding: 5px;
	min-height: 40px;
}

.vendor-change-password-page {
	padding-top: 10px;
}

.vendor-change-password-page .content {
	max-width: 500px;
	margin: auto;
	background-color: #fff;
	padding: 15px 15px;
}

.list .item-add {
	padding-bottom: 10px;
	padding-top: 8px;
	border-bottom: 1px solid #535c69;
}

.list .item-add .icon-delete {
	position: absolute;
	right: 15px;
	font-size: 20px;
	cursor: pointer;
	z-index: 1;
}

.contract-page iframe {
	width: 100%;
	height: 900px;
}

.list-section .btn-add {
	padding: 2px;
	min-width: 30px;
}

.dataTables_wrapper .dataTables_processing {
	/*top: 100px !important;*/
	z-index: 1049 !important;
	background: white !important;
	padding: 10px 0 !important;
	line-height: 20px !important;
	/*height: 100vh !important;*/
}

#modal_new_partner .modal-dialog {
	width: 90% !important;
	max-width: none;
}

#modal_new_partner .form-control {
	font-size: 12px;
}

#modal_new_partner input, #modal_new_partner select {
	height: 30px;
}

.no-wrap-word {
	white-space: nowrap;
}

.dataTables_wrapper .dataTables_processing {
	background-color: transparent !important;
}

.group-vendor-permission-page .form-vendor {
	margin: 20px auto;
	max-width: 500px;
	border: 1px solid #353b44;
	border-radius: 4px;
	padding: 20px;
	background-color: white;
}

@media screen and (max-width: 1500px) {
	.table-doc .detail-under-title {
		padding-right: 160px;
	}

	.table-doc .crm-div {
		display: inline-block;
	}

	.table-doc .crm-project {
		position: static;
	}
}

@media screen and (max-width: 768px) {
	.timeline::after {
		left: 31px;
	}

	.timeline .panel {
		width: 100%;
		padding-left: 70px;
		padding-right: 25px;
	}

	.timeline .panel::before {
		left: 60px;
		border: medium solid white;
		border-width: 10px 10px 10px 0;
		border-color: transparent white transparent transparent;
	}

	.timeline .right {
		left: 0%;
	}

	.table-login {
		background-image: url(../images/bg-mobile.jpg);
		background-position: center bottom;
	}

	.table-login .login {
		top: 18%;
		left: 50%;
		transform: translateX(-50%);
	}
}

@media (min-width: 1140px) {
	.modal-slg {
		width: 1140px;
	}
}

@media screen and (max-width: 1140px) {
	.main-menu .navbar-nav {
		display: block;
	}

	.main-menu .navbar-nav .nav-item {
		display: inline-block;
	}

	.main-menu .navbar-nav .dropdown-menu .nav-item {
		display: block;
	}
}

.user-vendor-page .dataTables_filter,
.group-vendor-page .dataTables_filter,
.user-administration-page .dataTables_filter {
	display: block;
}

.swal2-popup .btn-decline {
	color: #fff !important;
	background-color: #dc3545 !important;
	border-color: #dc3545 !important;
}

.hr-take-leave-page {
	padding-top: 15px;
}

.hr-take-leave-page .action-control,
.hr-take-leave-page .edit-control,
.hr-take-leave-page .icon-control,
.hr-take-leave-page .remind-control {
	/*font-size: 20px !important;*/
	padding: 3px 6px !important;
	min-width: 30px;
}

.hr-take-leave-page .label-status {
	width: 145px !important;
	padding-right: 30px;
	height: 28px;
	line-height: 26px;
}

.hr-candidate .closing-work-date {
	display: inline-block;
	background-color: #EAC769;
	padding: 10px;
}

.modal-edit-hr-finger-print .info-user {
	border: 2px solid #949595;
	border-radius: 10px;
	padding: 15px;
	margin-bottom: 10px;
}

.modal-edit-hr-finger-print .info-user .title {
	font-size: 20px;
	text-align: center;
	font-weight: bold;
	padding-bottom: 15px;
	border-bottom: 1px solid #949595;
	margin: 0 -15px 5px;
}

.btn-border-status {
	position: relative;
}

.btn-border-status::after {
	content: '';
	width: calc(100% + 2px);
	height: 5px;
	position: absolute;
	bottom: -1px;
	left: -1px;
	background-color: red;
}

.btn-border-request-cancel::after {
	background-color: #ff8e0f;
}

.btn-border-pending::after {
	background-color: #FFC001;
}

.btn-border-in-progress::after {
	background-color: #3AA6EC;
}

.btn-border-overdue::after {
	background-color: #F24A4A;
}

.btn-border-done::after {
	background-color: #61AA21;
}

.btn-border-declined::after {
	background-color: #b9b9b9
}

.status-filter-tabs .nav-link {
	border-radius: 50px;
	padding: 0.2rem 1rem;
	color: #0c0c0c;
}

.status-filter-tabs .nav-link.active {
	background-color: #007BFF;
}

#modal_new_take_leave .form-check-input {
	margin-left: -1rem;
}

.table .thead-blue th {
	background-color: #6bbdff;
	color: #FFF;
}

.swal-full-width {
	width: 90% !important;
}

.swal-full-width table td, .swal-full-width table th {
	border: 1px solid #000;
}

.CUSTOM-CLASS-TOOLTIP {
	text-align: left;
}

.CUSTOM-CLASS-TOOLTIP .tooltip-inner {
	white-space: nowrap;
	max-width: initial;
	background-color: #fff;
	border: 1px solid #bbed21;
	color: #000;
}

.CUSTOM-CLASS-TOOLTIP .tooltip-inner > div {
	padding: 4px 8px;
	border-radius: 10px;
	/*color: white;*/
	margin-bottom: 4px;
	font-weight: bold;
}

.CUSTOM-CLASS-TOOLTIP .tooltip-inner div:first-child {
	color: #ff7036;
}

.CUSTOM-CLASS-TOOLTIP .tooltip-inner div:nth-child(2) {
	color: #28a745;
}

.CUSTOM-CLASS-TOOLTIP .tooltip-inner div:nth-child(3) {
	color: #dc3545;
}

.CUSTOM-CLASS-TOOLTIP-LEFT .tooltip-inner {
	text-align: left;
}

.CUSTOM-CLASS-TOOLTIP-LEFT .tooltip-inner div {
	color: #3e3e3e !important;
}

.task-report .dataTables_wrapper {
	overflow: auto;
}