@import url("https://cdn.jsdelivr.net/npm/bootstrap-icons@1.13.1/font/bootstrap-icons.min.css");

.pending-wrap {
	 width: 100%;
	 display: flex;
	 flex-direction: column;
	 border: solid 1px #d9d9d9;
	 background-color: #fff;
	 border-radius: 0.7rem;
	 margin-bottom: 40px;
}
 .pending-wrap.sticky {
	 margin-bottom: 0px;
	 border-radius: 0rem !important;
	 border-bottom-left-radius: 0.7rem !important;
	 border-bottom-right-radius: 0.7rem !important;
}
 .pending-wrap .pending-header {
	 display: flex;
	 flex-direction: row;
	 border-bottom: solid 1px #d9d9d9;
	 width: 100%;
}
 .pending-wrap .pending-header .inner {
	 padding: 10px 15px;
	 display: flex;
	 flex-direction: column;
	 justify-content: center;
	 align-items: left;
	 font-size: 0.9rem;
	 opacity: 0.8;
	 font-weight: bold;
}
 .pending-wrap .pending-header .inner.name {
	 font-weight: 600;
	 width: 35%;
}
 .pending-wrap .pending-header .inner.bday {
	 width: 19%;
}
 .pending-wrap .pending-header .inner.appointee {
	 width: 19%;
}
 .pending-wrap .pending-header .inner.appointed-date {
	 width: 17%;
}
 .pending-wrap .pending-header .inner.more {
	 width: 15%;
	 flex-direction: row;
	 justify-content: right;
}
 .pending-wrap .pending-header .inner.more .btn {
	 padding: 1px 7px !important;
	 width: 30px;
}
 .pending-wrap .pending-header .inner.more .btn ion-icon {
	 margin-bottom: -2px;
}
 .pending-wrap .pending-row {
	 display: flex;
	 flex-direction: row;
	 border-bottom: solid 1px #d9d9d9;
}
 .pending-wrap .pending-row:last-child {
	 border-bottom: none;
}
 .pending-wrap .pending-row .inner {
	 padding: 12px 15px;
	 display: flex;
	 flex-direction: column;
	 justify-content: center;
	 align-items: left;
	 font-size: 1rem;
}
 .pending-wrap .pending-row .inner.name {
	 font-weight: 600;
	 width: 35%;
}
 .pending-wrap .pending-row .inner.bday {
	 width: 19%;
}
 .pending-wrap .pending-row .inner.appointee {
	 width: 19%;
}
 .pending-wrap .pending-row .inner.appointed-date {
	 width: 17%;
}
 .pending-wrap .pending-row .inner.more {
	 width: 15%;
	 flex-direction: row;
	 justify-content: right;
}
 .pending-wrap .pending-row .inner.more .btn {
	 padding: 1px 7px !important;
	 width: 30px;
}
 .pending-wrap .pending-row .inner.more .btn ion-icon {
	 margin-bottom: -2px;
}
 .pending-table-wrap {
	 background-color: #fff;
	 border-radius: 0.7rem;
	 overflow: hidden;
	 border: solid 1px #ddd;
	 margin-bottom: 25px;
	 margin-top: 5px;
	 box-shadow: 0 0.5rem 1rem rgba(0, 0, 0, 0.05)!important;
}
 .pending-table-wrap .pending-table {
	 background-color: transparent !important;
	 border-radius: 0.7rem;
	 overflow: hidden;
	 margin-bottom: 0px;
}
 .pending-table-wrap .pending-table th[role=columnheader]:not(.no-sort) {
	 cursor: pointer;
}
 .pending-table-wrap .pending-table th[role=columnheader][aria-sort='descending'] .bi.sort-down {
	 display: none;
}
 .pending-table-wrap .pending-table th[role=columnheader][aria-sort='descending'] .bi.sort-up {
	 display: block;
}
 .pending-table-wrap .pending-table th[role=columnheader][aria-sort='ascending'] .bi.sort-down {
	 display: block;
}
 .pending-table-wrap .pending-table th[role=columnheader][aria-sort='ascending'] .bi.sort-up {
	 display: none;
}
 .pending-table-wrap .pending-table thead tr th {
	 padding: 10px 15px;
	 position: relative;
	 border-right: solid 1px #ddd;
	 font-size: 1.1rem;
	 border-bottom: solid 1px #DDD!important;
	 background-color: #204678!important;
	 color: #FFF;
	 
}
 .pending-table-wrap .pending-table thead tr th:last-child {
	 border-right: none;
}
 .pending-table-wrap .pending-table thead tr th .bi {
	 position: absolute;
	 right: 10px;
	 top: 50%;
	 margin-top: -10px;
	 display: none;
}
 .pending-table-wrap .pending-table tbody tr {
	 display: table-row;
}
 .pending-table-wrap .pending-table tbody tr.hide {
	 height: 0px;
	 overflow: hidden;
	 opacity: 0;
	 pointer-events: none;
}
 .pending-table-wrap .pending-table tbody tr.filtered {
	 display: none !important;
}
 .pending-table-wrap .pending-table tbody tr.unfiltered {
	 display: none !important;
}
 .pending-table-wrap .pending-table tbody tr.unranked {
	 display: none !important;
}
 .pending-table-wrap .pending-table tbody tr:last-child td {
	 border-bottom: none;
}
 .pending-table-wrap .pending-table tbody tr td {
	 padding: 10px 15px;
	 border-right: solid 1px #ddd;
	 font-size: 1.15rem;
}
 .pending-table-wrap .pending-table tbody tr td:last-child {
	 border-right: none;
}
 .pending-table-wrap .pending-table tbody tr td.name a {
	 font-weight: 600;
	 color: #111 !important;
}
 .filter-group {
	 border-radius: 0px;
	 border: none !important;
	 border-right: solid 1px #999 !important;
	 padding-right: 5px;
	 margin-right: 10px;
}
 .filter-group .btn {
	 padding-left: 15px;
	 padding-right: 15px;
	 margin-right: 5px;
	 border-radius: 100px !important;
	 font-size: 0.9rem;
	 background-color: #FFF;
}
 .filter-group .btn:first-child {
	 border-top-left-radius: 5px;
	 border-bottom-left-radius: 5px;
}
 .filter-group .btn:last-child {
	 border-top-right-radius: 5px;
	 border-bottom-right-radius: 5px;
}
 .filter-group .btn:hover {
	 background: #78b2ff !important;
	 background: linear-gradient(90deg, rgba(120, 178, 255, 1) 0%, rgba(41, 92, 158, 1) 100%) !important;
	 color: #fff !important;
}
 .filter-group .btn.active {
	 background: #3c6cab !important;
	 background: linear-gradient(90deg, rgba(60, 108, 171, 1) 0%, rgba(21, 45, 76, 1) 100%) !important;
	 color: #fff !important;
	 font-weight: bold;
	 border: solid 1px #fff !important;
	 box-shadow: 0 0.5rem 1rem rgba(0, 0, 0, 0.15);
}
 .filter-group .btn:active {
	 background: #3c6cab !important;
	 background: linear-gradient(90deg, rgba(60, 108, 171, 1) 0%, rgba(21, 45, 76, 1) 100%) !important;
	 color: #fff !important;
}
 .ranking-group {
	 border-radius: 0px;
	 border: none !important;
}
 .ranking-group .btn {
	 padding-left: 15px;
	 padding-right: 15px;
	 margin-right: 5px;
	 border-radius: 100px !important;
	 font-size: 0.9rem;
	 background-color: #FFF;
}
 .ranking-group .btn:first-child {
	 border-top-left-radius: 5px;
	 border-bottom-left-radius: 5px;
}
 .ranking-group .btn:last-child {
	 border-top-right-radius: 5px;
	 border-bottom-right-radius: 5px;
}
 .ranking-group .btn:hover {
	 background: linear-gradient(90deg, #62c07e 0%, #128c8c 100%) !important;
	 color: #fff !important;
}
 .ranking-group .btn.active {
	 background-color: darkslateblue !important;
	 background: #458a5a !important;
	 background: linear-gradient(90deg, rgba(69, 138, 90, 1) 0%, rgba(11, 82, 82, 1) 100%) !important;
	 color: #fff !important;
}
 .ranking-group .btn:active {
	 background: #458a5a !important;
	 background: linear-gradient(90deg, rgba(69, 138, 90, 1) 0%, rgba(11, 82, 82, 1) 100%) !important;
	 color: #fff !important;
}
 .ranking-group ul {
	 padding: 0px;
	 border-radius: 0.7rem;
	 width: 170px!important;
}
 .ranking-group ul li {
	 font-size: 0.9rem;
	 border-bottom: solid 1px #ddd;
	 cursor: pointer;
}
 .ranking-group ul li:last-child {
	 border-bottom: none;
}
 .ranking-group ul li .dropdown-item {
	 background-color: transparent !important;
	 padding: 6px 15px;
}
 .ranking-group ul li .dropdown-item:active {
	 background: #458a5a !important;
	 background: linear-gradient(90deg, rgba(69, 138, 90, 1) 0%, rgba(11, 82, 82, 1) 100%) !important;
	 color: #fff !important;
}
 .ranking-group ul li .dropdown-item.active {
	 background: #458a5a !important;
	 background: linear-gradient(90deg, rgba(69, 138, 90, 1) 0%, rgba(11, 82, 82, 1) 100%) !important;
	 color: #fff !important;
}
 .btn-clear-filter {
	 border: none !important;
	 border-radius: 100px !important;
	 opacity: 0;
	 pointer-events: none;
	 margin-left: -10px;
}
 .btn-clear-filter.showing {
	 opacity: 1;
	 pointer-events: all;
}
 .btn-clear-filter:hover {
	 background-color: #f0f0f0;
	 color: #333;
}
 .btn-ranking-selected {
	 background: #458a5a !important;
	 background: linear-gradient(90deg, rgba(69, 138, 90, 1) 0%, rgba(11, 82, 82, 1) 100%) !important;
	 color: #fff !important;
	 border: solid 1px transparent !important;
	 box-shadow: 0 0.5rem 1rem rgba(0, 0, 0, 0.15);
	 font-weight: bold;
	 border: solid 1px #fff !important;
}
 small.pending-table-small {
	 font-size: 0.7rem;
	 color: #333;
	 font-weight: 500;
}
 
 
/* mobile view */

.pending-group {
	 width: 100%;
	 background-color: #fff!important;
	 border-radius: 0.7rem;
	 box-shadow: 0 0.5rem 1rem rgba(0, 0, 0, 0.05)!important;
	 display: none;
}
 .pending-group li {
	 background-color: #fff!important;
	 display: flex;
	 flex-direction: row;
	 align-items: center;
}
.pending-group li.unranked {
    display: none;
}
 .pending-group li:hover {
	 background-color: #f9f9f9!important;
}
 .pending-group li .li-content {
	 padding: 0px 0px;
	 width: calc(100% - 30px);
}
 .pending-group li .li-content .li-name {
	 width: 100%;
	 font-weight: 500;
	 float: left;
	 font-size: 1.15rem;
	 margin-bottom: 10px;
	 color: #000;
}
 .pending-group li .li-content .li-nomdate {
	 width: 50%;
	 float: left;
	 font-size: 1rem;
	 color: #333;
}
 .pending-group li .li-content .li-nomdate strong {
	 font-weight: 600;
	 width: 100%;
	 float: left;
	 font-size: 0.8rem;
	 color: #111;
}
 .pending-group li .li-content .li-ranking {
	 width: 50%;
	 float: left;
	 color: #333;
}
 .pending-group li .li-content .li-ranking strong {
	 font-weight: 600;
	 width: 100%;
	 float: left;
	 font-size: 0.8rem;
	 color: #111;
}
 .pending-group li .li-link {
	 width: 30px;
	 height: 100%;
	 position: relative;
	 display: flex;
	 flex-direction: column;
	 justify-content: center;
	 align-items: center;
	 color: #333;
}
 @media (max-width: 991px) {
	 .pending-table-wrap .pending-table tbody tr td small {
		 display: block;
	}
	 td.td-name {
		 width: 100%;
		 display: block;
		 float: left;
		 clear: both;
	}
	 td.td-court {
		 width: 50%;
		 float: left;
	}
	 td.td-nomdate {
		 width: 50%;
		 float: left;
	}
	.filter-group{
	    display: none;
	}
	.pending-table-small{
	    display: none;
	}
	.pending-table-wrap{
	    display:none;
	}
	.pending-group {
	    display: block;
	}
}
 @media (max-width: 550px) {
	 .pending-group li .li-content .li-name {
		 font-size: 1rem;
	}
	 .pending-group li .li-content .li-nomdate {
		 font-size: 0.9rem;
	}
	 .pending-group li .li-content .li-ranking {
		 font-size: 0.9rem;
	}
}

#cfs, #pcfs, #stps, #pstps, #nops, #rps{
    float: right;
    opacity: 0.5;
}

.rankings-group {
	 border: none;
}
 .rankings-group .list-group-item {
	 border: none;
	 border-bottom: solid 1px #ddd;
	 padding: 15px 0px;
	 font-size: 0.96rem;
	 line-height: 1rem;
}
 .rankings-group .list-group-item h5 {
	 font-size: 1.1rem;
	 width: 100%;
	 margin-bottom: 5px;
	 font-weight: 600;
}
.rankings-group .list-group-item:last-child {
	 border-bottom: none;
}

		.btn-ranking-modal {
			border-radius: 100px !important;
			padding: 3px 15px !important;
			margin-bottom: 5px;
		}

		#ranking-modal {
			backdrop-filter: blur(5px);
		}

		#ranking-modal .modal-dialog {
			max-width: 750px;
		}

		#ranking-modal .modal-dialog .modal-content {
			border-radius: .8rem !important;
		}