/*
* This is a pagination template
* Added By: Jay-ar Olivas
* Date: July 26, 2023
*
* DO NOT EDIT 
*/

.main-background-color {
	background: #F8FAFB;
}
.search-table-list {
	table-layout: fixed;
}
.search-table-list thead {
	background: #44679F;
}
.search-table-list thead th {
    background: #44679F;
    color: white;
    padding: 20px 5px;
    border: none;
    text-align: left;
    width: 150px;
    text-transform: uppercase;
    vertical-align: middle;
    font-weight: 600;
}
.search-table-list thead th.status-width {
	padding-left: 20px;
}
.search-table-list thead tr {
    background: #f7f7f7;
}
.search-table-list thead th:first-child {
    border-top-left-radius: 10px;
    padding-left: 50px;
    width: 200px;
}
/*.search-table-list input[type=checkbox] {
    position: absolute;
    left: 17px;
    top: 50%;
    transform: translateY(-50%);
}*/
.search-table-list thead th:last-child {
    border-top-right-radius: 10px;
    width: 100px;
    text-align: center;
    text-transform: uppercase;
    /* padding-right: 50px; */
}
.search-table-list tbody tr {
    border-bottom: 10px solid #f7f7f7;
    background: #fff;
}
.search-table-list tbody tr:first-child {
	border-top: 10px solid #f7f7f7;
}
.search-table-list tbody td {
    padding: 17px 5px;
    text-align: left;
    font-weight: 500;
    vertical-align: middle;
    word-wrap: break-word;
    font-size: 13px;
    text-decoration: none;
}
.search-table-list tbody td:first-child {
	padding-left: 50px;
    width: 200px;
    position: relative
}
.search-table-list tbody td:last-child {
    padding-left: 0px;
    /* padding-right: 40px; */
    text-align: center;
}
.table-footer-section {
	background: white;
	padding: 15px 20px;
	width: 100%;
    display: flex;
    justify-content: space-between;
    align-items: center;
}
.table-footer-section .page-list, .table-footer-section .active-pagination {
    font-size: 12px;
    font-weight: 600;
    margin: 0 5px;
    text-decoration: none;
}
.table-footer-section .active-pagination {
    background: #44679F;
    color: #fff;
    border-radius: 6px;
    padding: .5rem 1em;
}
.table-footer-section .arrow {
    padding: 5px 10px;
    border: 2px solid #5e718d75;
    color: #5E718D;
    text-decoration: none;
    display: flex;
    align-items: center;
    margin: 0 15px;
    border-radius: 20px;
    width: 75px;
    justify-content: center;
    font-weight: 500;
}
.table-footer-section .arrow:hover {
	border: 2px solid #d3d3d3;
	background: #d3d3d3;
	color: #000;
	transition: all .3s ease;
}
.pagination-select select {
	padding: .3575rem 2.25rem .3575rem .75rem !important;
}
.navigation-page-section {
    display: flex;
    justify-content: center;
    align-items: center;
}
.total-number-list span {
	font-weight: 500;
}
.table-container {
	overflow-x: auto;
	/*min-height: 500px;*/
}
.table-container .edit-button, .table-container .delete-button, .table-container .view-button {
	color: #000;
	transition: all .3s ease;
	text-decoration: none;
}
.table-container .edit-button:hover {
	color: #045abf;
}
.table-container .view-button:hover {
	color: #1fc242;
}
.table-container .delete-button:hover {
	color: #E53535;
}
.right-button-section li {
	list-style: none;
	margin-left: 15px;
}
/* .right-button-section li:first-child {
	margin-right: 15px;
} */
.right-button-section li a {
    background: #fff;
    padding: 9px 15px;
    display: flex;
    text-decoration: none;
    font-weight: 600;
    border-radius: 10px;
    align-items: center;
    color: #000;
    box-shadow: 1px 2px 4px 0px #e3e3e3bf;
}
.right-button-section li a:hover {
	background: #44679f;
	color: #fff;
	transition: all .3s ease;
}
.no-record {
    width: 100%;
    padding: 50px 20px;
    background: #fff;
}
.no-record img {
	width: 400px;
}
.preview-form {
	color: #44679F !important;
	text-decoration: none;
	font-weight: 600;
	font-size: 13px;
	word-break: break-word;
	overflow-wrap: break-word;
}
.preview-form:hover {
	text-decoration: underline;
	cursor: pointer;
}
/* .right-button-section li:last-child {
	margin-left: 15px;
} */
.delete-all-button:hover {
	transition: all .3s;
    color: #fff !important;
    background: #dc3545 !important;
}
input[type=checkbox] {
	cursor: pointer;
}
.span-new {
    background: #FFF1BF;
    color: #EE9322;
    display: inline-flex;
    width: 200px;
    height: 33px;
    justify-content: center;
    border-radius: 12px;
    align-items: center;
    position: relative;
}
.span-approved {
    background: #ECFDF3;
    color: #037847;
    display: inline-flex;
    width: 200px;
    height: 33px;
    justify-content: center;
    border-radius: 12px;
    align-items: center;
    position: relative;
}
.span-rejected {
    background: #FFDEE6;
    color: #D61D4E;
    display: inline-flex;
    width: 200px;
    height: 33px;
    justify-content: center;
    border-radius: 12px;
    align-items: center;
    position: relative;
}
.span-new::before, 
.span-approved::before, 
.span-rejected::before {
    font-size: 10px;
    content: "\2688";
    position: absolute;
    left: 10px;
}
.data-list-container .search__input__field {
    box-shadow: 1px 1px 4px 0px rgba(187, 187, 187, 0.60);
    border-radius: 8px;
    padding-left: 35px !important;
    border: transparent;
}
.data-list-container .search__input__field::placeholder {
	font-style: inherit;
}
.data-list-container .search__icon {
    position: absolute;
    font-size: 20px;
    left: 10px;
    top: 50%;
    transform: translateY(-50%);
    color: #BCC4C8;
}
.footer__section {
    display: flex;
    justify-content: space-between;
    padding: 30px 20px;
    align-items: center;
    background-color: #FFF;
    filter: drop-shadow(0px 0px 0.055em #c7c7c7);
    border-radius: 0 0 10px 10px;
}
.data-list-container .records span, .data-list-container b {
	font-size: 12px;
}
.page__records .form-select {
    padding: 0.75em 2.25em;
    padding-left: 1.2em;
    border-radius: 13px;
    font-size: 12px !important;
}
.footer__section .navigation-page-section {
	display: flex;
	align-items: center;
	gap: 20px;
}
.arrow .icon-arrow {
    border: 1px solid #d3d3d3;
    padding: 7px;
    border-radius: 50%;
    color: #3D4A5C;
}
.arrow .icon-arrow:hover {
    background: #d3d3d3;
    border: 1px solid #3D4A5C;
}
.navigation-page-section a {
	text-decoration: none;
}
.navigation-page-section .page-list {
	color: #3D4A5C;
	font-weight: 600;
}
.navigation-page-section .active-pagination {
    background: #3D4A5C;
    color: #FFF;
    border-radius: 7px;
    padding: 3px 12px;
    pointer-events: none;
}
.data-list-container .search__action__button {
	background: #FFF;
	color: #344054;
	padding: .6em .75em;
	display: flex;
	font-weight: 600;
	align-items: center;
	box-shadow: 1px 2px 4px 0px rgba(227, 227, 227, 0.60);
}
.data-list-container .search__action__button:hover {
	background: #44679F;
	color: #FFF;
	transition: all .3s ease;
}
.modal__background__opaque {
    position: fixed;
    width: 100%;
    height: 100%;
    background-color: rgba(0, 0, 0, 0.5);
    top: 0;
    left: 0;
    z-index: 200;
    overflow: auto;
    padding: 15px;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
}
.modal__background__opaque .modal__view {
    background-color: #FFF;
    border-radius: 16px;
    width: 100%;
    min-height: 250px;
    max-height: 95%;
    overflow-y: auto;
}
.modal__view .modal-body {
    padding: 25px 30px 70px;
    position: relative;
}
.modal__view .action__button {
    display: flex;
    gap: 15px;
    position: absolute;
    right: 30px;
    bottom: 30px;
}
.modal__view .action__button button {
    background: #EBEBEB;
    color: #045abf;
    border-radius: 30px;
    padding: 8px 25px;
    font-weight: 500;
    font-size: 0.875rem;
}
.manage__action__container {
	gap: 15px;
}
.modal__view .action__button .cancel__action:hover {
	background: #A6A6A6;
	color: #FFF;
	transition: all .3s ease;
}
.modal__view .action__button .apply__action {
	background: #44679F;
	color: #FFF;
}
.modal__view .action__button .apply__action:hover {
	background: #045abf;
	color: #FFF;
	transition: all .3s ease;
}
.calendar__input__container span {
    position: absolute;
    font-size: 24px;
    left: -17px;
    top: 50%;
    transform: translateY(-50%);
}
.modal__view .modal__container {
    width: 95%;
    margin: 25px auto;
}
.modal__view .__title {
    font-weight: 700;
    color: #045abf;
}
.desktop__view {
	display: none;
}
.__pass {
    background: #ecfdf3;
    padding: 5px 15px;
    border-radius: 18px;
    display: flex;
    width: 100px;
    align-items: center;
    color: #037847;
}
.__fail {
    background: #FFC3BD;
    padding: 5px 15px;
    border-radius: 18px;
    display: flex;
    width: 100px;
    align-items: center;
    color: #E92215;
}
.item__fail {
	background: #FFC3BD !important;
}
.checklist__items .__items {
	display: inline-block;
	width: 200px;
}
td .action__button__container .__button {
	border: 0;
	background: transparent;
	transition: all .3s ease;
    color: #000;
}
td .action__button__container {
    display: flex;
    justify-content: flex-end;
    gap: 1rem;
    padding-right: 10px;
}
td .action__button__container .__edit:hover {
	color: #045ABF;
	transform: scale(1.5);
}
td .action__button__container .__delete:hover {
	color: #E92215;
	transform: scale(1.5);
}
td .action__button__container .__generate:hover {
	color: #046ABF;
	transform: scale(1.5);
}
td .action__button__container .__lock:hover {
	color: #A6A6A6;
	transform: scale(1.5);
}
td .action__button__container .__resetPass:hover {
	color: #FF4B4B;
	transform: scale(1.5);
}
td .action__button__container .__resetPin:hover {
	color: #44679F;
	transform: scale(1.5);
}
.dots__button {
	border: none;
	background: transparent;
	color: #828282;
}
.dots__button .dots__icon {
	font-size: 17px;
}
.action-dropdown-menu.show {
	display: block;
	right: 0;
}
.action-dropdown-menu.show::before {
	content: unset !important;
}
.action-dropdown-menu {
    --bs-dropdown-zindex: 1000;
    --bs-dropdown-min-width: 10rem;
    --bs-dropdown-padding-x: 0;
    --bs-dropdown-padding-y: 0.5rem;
    --bs-dropdown-spacer: 0.125rem;
    --bs-dropdown-font-size: 1rem;
    --bs-dropdown-color: #212529;
    --bs-dropdown-bg: #fff;
    --bs-dropdown-border-color: var(--bs-border-color-translucent);
    --bs-dropdown-border-radius: 0.375rem;
    --bs-dropdown-border-width: 1px;
    --bs-dropdown-inner-border-radius: calc(0.375rem - 1px);
    --bs-dropdown-divider-bg: var(--bs-border-color-translucent);
    --bs-dropdown-box-shadow: 0 0.5rem 1rem rgba(0, 0, 0, 0.15);
    --bs-dropdown-link-color: #212529;
    --bs-dropdown-link-hover-color: #1e2125;
    --bs-dropdown-link-hover-bg: #e9ecef;
    --bs-dropdown-link-active-color: #fff;
    --bs-dropdown-link-active-bg: #0d6efd;
    --bs-dropdown-link-disabled-color: #adb5bd;
    --bs-dropdown-item-padding-x: 1rem;
    --bs-dropdown-item-padding-y: 0.25rem;
    --bs-dropdown-header-color: #6c757d;
    --bs-dropdown-header-padding-x: 1rem;
    --bs-dropdown-header-padding-y: 0.5rem;
    position: absolute;
    z-index: var(--bs-dropdown-zindex);
    display: none;
    min-width: var(--bs-dropdown-min-width);
    padding: var(--bs-dropdown-padding-y) var(--bs-dropdown-padding-x);
    margin: 0;
    font-size: var(--bs-dropdown-font-size);
    color: var(--bs-dropdown-color);
    text-align: left;
    list-style: none;
    background-color: var(--bs-dropdown-bg);
    background-clip: padding-box;
    border: var(--bs-dropdown-border-width) solid var(--bs-dropdown-border-color);
    border-radius: var(--bs-dropdown-border-radius);
}
td .action-dropdown-menu {
	border-radius: 13px;
	border: 1px solid #D3D3D3;
	background: #FFF;
	box-shadow: 0px 5px 20px -5px rgba(16, 60, 231, 0.14);
    padding: 10px !important;
    min-width: 231px;
}
.action-dropdown-menu .dropdown-item:hover {
	border-radius: 0 !important;
}
td li .__button {
    display: flex;
    align-items: center;
    gap: .75rem;
    padding: 10px 3px;
    font-weight: 500;
}
.fixed-header {
    position: sticky;
    top: 85px;
}

.password__container .password__icon {
    position: absolute;
    top: 50%;
    -webkit-transform: translateY(-50%);
        -ms-transform: translateY(-50%);
            transform: translateY(-50%);
    right: 15px;
    font-size: 1.4rem;
    cursor: pointer;
    color: #D3D3D3;
}

















/* Start of Mobile View */
@media (max-width: 767px) {
    .inner-main {
        padding-left: 15px;
        padding-right: 15px;
    }
    .document-list tbody tr {
        display: flex;
        flex-direction: column;
        margin-bottom: 10%;
    }
    .img-section {
        width: 200px;
        margin: auto;
    }
    .profile .user:nth-child(2)::before {
        display: none;
    }
    .hideThis {
        display: none;
    }
    input {
        padding: .7575rem .75rem !important;
    }
    select {
        padding: .7575rem 2.25rem .7575rem .75rem !important;
    }
    .img-container img {
        width: 200px;
    }
    .table-footer-section {
   	    flex-direction: column;
    	gap: 20px;
    }
    .pagination-select {
    	width: 245px;
    }
	.no-record img {
		width: 100%;
	}
	input.form-control, select.form-select, textarea.form-control {
	    font-size: 12px;
	}
	.footer__section {
	    flex-direction: column;
    	gap: 10px;
	}
}
/* End of Mobile View */

/* Start of min width 768px */
@media (min-width: 768px) {
	.table-header-right {
		width: 350px;
	}
	.data-list-container .search__input__field {
		width: 300px;
	}
	.modal__view {
		max-width: 800px;
	}
	.desktop__view {
		display: block;
	}
}



@media (min-width: 992px) {
	.text-description {
		text-align: left !important;
	    padding-left: 50px !important;
	}
	.search-container {
		width: 300px !important;
	}
}






/* Start of min 768px and max 991px */
@Media (min-width: 768px) and (max-width: 991px) {
	.table-footer-section .arrow {
	    padding: 4px 6px;
	    border: 2px solid #5e718d75;
	    color: #5E718D;
	    text-decoration: none;
	    display: flex;
	    align-items: center;
	    margin: 0 5px;
	    border-radius: 20px;
	    width: 75px;
	    justify-content: center;
	    font-weight: 500;
	    font-size: 11px;
	}
}
/* End */







@media (max-width: 991px) {
	* {
		font-size: 11px;
	}
}


/*@media (max-width: 1360px) {*/
/*	.search-table-list {*/
/*	    width: 1170px;*/
/*	}*/
/*}*/


@media (min-width: 1360px) and (max-width: 1400px) {
	.search-table-list tbody td {
		font-size: 10px !important;
	}
}