/* 
	prov_list_3.css ROOT
	
	--prov3_CAROUSEL_PADDLE_BTN_TXT_COLOR: var(--color4);
	--prov3_CAROUSEL_PROV_IMG_BG: #f3f3f375;
	--prov3_CAROUSEL_PROV_IMG_BORDER: 4px solid var(--color4);
	--prov3_CAROUSEL_PROV_IMG_LBL_LOBBY_TXT_COLOR: var(--color2);
	--prov3_CAROUSEL_PROV_IMG_LBL_LOBBY_BG: var(--color4);
	--prov3_CAROUSEL_PROV_IMG_LBL_GAMELIST_TXT_COLOR: var(--color2);
	--prov3_CAROUSEL_PROV_IMG_LBL_GAMELIST_BG: var(--color6);
	--prov3_CAROUSEL_PROV_IMG_PROV_NAME_TXT_COLOR: var(--color3);
	--prov3_CAROUSEL_PROV_IMG_PROV_NAME_BG: #f3f3f3;
	--prov3_CAROUSEL_PROV_IMG_PROV_NAME_HOVER_TXT_COLOR: var(--color2);
	--prov3_CAROUSEL_PROV_IMG_PROV_NAME_HOVER_BG: var(--color4);
	
	--prov3_FORM_INPUT_BG: var(--color2);
	--prov3_FORM_INPUT_BORDER_RADIUS: 5px;
	--prov3_FORM_INPUT_BORDER: 2px solid var(--color4);
	--prov3_FORM_INPUT_TXT_COLOR: var(--color3);
	--prov3_FORM_INPUT_DISABLED_BG: var(--color5);
	--prov3_FORM_INPUT_DISABLED_BORDER: 2px solid var(--color4);
	--prov3_FORM_INPUT_DISABLED_TXT_COLOR: var(--color2);
	--prov3_FORM_INPUT_ICON_COLOR: var(--color3);
	--prov3_FORM_INPUT_LBL_TXT_COLOR: var(--color1);
	--prov3_FORM_INPUT_COPY_COLOR: var(--color3);
	
	--prov3_TAB_HEAD_H3_TXT_COLOR: var(--color4);
	--prov3_TAB_HEAD_H3_BG: var(--color4);
	--prov3_TAB_HEAD_H3_BG_TXT_COLOR: var(--color2);
	--prov3_TAB_FILTER_BTN_BG: #e3e3e3;
	--prov3_TAB_FILTER_BTN_TXT_COLOR: var(--color3);
	--prov3_TAB_FILTER_BTN_BORDER: none;
	--prov3_TAB_FILTER_BTN_HOVER_BG: var(--color4);
	--prov3_TAB_FILTER_BTN_HOVER_TXT_COLOR: var(--color2);
	
	--prov3_PROVITEM_IMG_BG: #bdbdbd47;
	--prov3_PROVITEM_IMG_BORDER: 1px solid #bdbdbd;
	--prov3_PROVITEM_LBL_LOBBY_BG: var(--color4);
	--prov3_PROVITEM_LBL_LOBBY_TXT_COLOR: var(--color2);
	--prov3_PROVITEM_LBL_GAMELIST_BG: var(--color6);
	--prov3_PROVITEM_LBL_GAMELIST_TXT_COLOR: var(--color2);
	--prov3_PROVITEM_NAME_TXT_COLOR: var(--color2);
	--prov3_PROVITEM_BTN_BG: var(--color6);
	--prov3_PROVITEM_BTN_TXT_COLOR: var(--color2);
	--prov3_PROVITEM_BTN_BORDER: none;
	--prov3_PROVITEM_BTN_HOVER_BG: var(--color2);
	--prov3_PROVITEM_BTN_HOVER_TXT_COLOR: var(--color6);
	--prov3_PROVITEM_BTN_HOVER_BORDER: none;
	
	--prov3_USRPSWDBOX_BG: #f3f3f3;
	--prov3_USRPSWDBOX_TXT_COLOR: var(--color3);
	--prov3_USRPSWDBOX_LINK_TXT_COLOR: var(--color4);
	--prov3_USRPSWDBOX_BTN_BG: var(--color4);
	--prov3_USRPSWDBOX_BTN_TXT_COLOR: var(--color2);
	--prov3_USRPSWDBOX_BTN_HOVER_BG: var(--color5);
	--prov3_USRPSWDBOX_BTN_HOVER_TXT_COLOR: var(--color2);
	--prov3_USRPSWDBOX_QR_BG: #7493b6;
	--prov3_USRPSWDBOX_QR_LBL_BG: var(--color4);
	--prov3_USRPSWDBOX_QR_LBL_TXT_COLOR: var(--color2);
	
	--prov3_FAVBOX_TITLE_TXT_COLOR: var(--color3);
	--prov3_FAVBOX_TITLE_ICON_COLOR: #eb0c0c;
	--prov3_FAVBOX_BG: #bdbdbd47;
	--prov3_FAVBOX_BORDER: 2px solid var(--color4);
	--prov3_FAVBOX_ITEM_LBL_BG: var(--color4);
	--prov3_FAVBOX_ITEM_LBL_TXT_COLOR: var(--color2);
	--prov3_FAVBOX_BTN_BG: transparent;
	--prov3_FAVBOX_BTN_TXT_COLOR: var(--color2);
	--prov3_FAVBOX_BTN_HOVER_BG: transparent;
	--prov3_FAVBOX_BTN_HOVER_TXT_COLOR: #eb0c0c;
	--prov3_FAVBOX_CAROUSEL_BTN_TXT_COLOR: var(--color3);
 */

.prov-list-3 {
	margin: 2rem 0
}

/* gamelist */
.prov-list-3 .prov-carousel-container- {
	position: relative;
	margin: 0 0 3rem
}

.prov-list-3 .prov-carousel-container- .inner-carousel- {
	overflow: hidden
}

.prov-list-3 .prov-carousel-container- .inner-carousel- .track- {
	display: inline-flex;
    height: fit-content;
    transition: transform .2s ease-in-out
}

.prov-list-3 .prov-carousel-container- .paddle- button {
	position: absolute;
    top: 50%;
    transform: translateY(-50%);
    font-size: 1.5rem;
    padding: 0;
    border: none;
    background: 0 0;
    color: var(--prov3_CAROUSEL_PADDLE_BTN_TXT_COLOR)
}

.prov-list-3 .prov-carousel-container- .paddle- button:disabled {
	filter: brightness(.5);
    opacity: .6
}

.prov-list-3 .prov-carousel-container- .paddle- .prev {
	left: -3rem
}

.prov-list-3 .prov-carousel-container- .paddle- .next {
	right: -3rem
}

.prov-list-3 .prov-carousel-container- .provItem {
	position: relative
}

.prov-list-3 .prov-carousel-container- .provItem .provImg {
	position: relative;
	height: 70px;
    background-size: 70%;
    background-repeat: no-repeat;
    background-position: center;
    background-color: var(--prov3_CAROUSEL_PROV_IMG_BG);
    border-top: var(--prov3_CAROUSEL_PROV_IMG_BORDER)
}

.prov-list-3 .prov-carousel-container- .provItem .provImg.large- {
	height: 200px;
	background-size: 80%
}

.prov-list-3 .prov-carousel-container- .provItem .provImg .game-lbl- {
	position: absolute;
    width: fit-content;
    padding: 3px 7px;
    border-radius: 5px;
    font-size: 10px;
    font-weight: 600;
    text-transform: uppercase;
    top: 5px;
    right: 5px
}

.prov-list-3 .prov-carousel-container- .provItem .provImg .game-lbl-[data-gamelabel='lobby'] {
	color: var(--prov3_CAROUSEL_PROV_IMG_LBL_LOBBY_TXT_COLOR);
	background: var(--prov3_CAROUSEL_PROV_IMG_LBL_LOBBY_BG)
}

.prov-list-3 .prov-carousel-container- .provItem .provImg .game-lbl-[data-gamelabel='gamelist'] {
	color: var(--prov3_CAROUSEL_PROV_IMG_LBL_GAMELIST_TXT_COLOR);
	background: var(--prov3_CAROUSEL_PROV_IMG_LBL_GAMELIST_BG)
}

.prov-list-3 .prov-carousel-container- .provItem .provName {
	padding: 10px 5px;
    font-size: 14px;
    font-weight: 600;
    text-align: center;
    transition: .3s;
    color: var(--prov3_CAROUSEL_PROV_IMG_PROV_NAME_TXT_COLOR);
    background: var(--prov3_CAROUSEL_PROV_IMG_PROV_NAME_BG)
}

.prov-list-3 .prov-carousel-container- .provItem .provName:hover,
.prov-list-3 .prov-carousel-container- .provItem.active .provName {
	color: var(--prov3_CAROUSEL_PROV_IMG_PROV_NAME_HOVER_TXT_COLOR);
	background: var(--prov3_CAROUSEL_PROV_IMG_PROV_NAME_HOVER_BG)
}

.prov-list-3 .prov-carousel-container- .block- {
	position: absolute;
    width: 100%;
    height: 100%;
    top: 0;
    left: 0;
    z-index: 2;
    background: #000000b5
}

.prov-list-3 .prov-carousel-container- .block-.block-outer- {
	background: 0 0
}

.prov-list-3 .prov-carousel-container- .block- .block-wrap {
	width: 90%;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    display: flex;
    flex-direction: column;
    gap: .25rem 0;
    font-size: 1rem;
    font-weight: 600;
    text-align: center;
    text-transform: uppercase
}

.prov-list-3 .prov-carousel-container- .block- .block-wrap i {
    font-size: 1.25rem
}

.prov-list-3 .prov-carousel-container- .block- .m-wrap {
	color: #eebb17
}

.prov-list-3 .prov-tab-panel- {
	display: block
}

.prov-list-3 .tab-panel- {
	display: none;
    animation-name: fadeOut
}

.prov-list-3 .tab-panel-.show {
	display: block;
    animation-name: fadeIn;
    animation-duration: .5s
}

.prov-list-3 .tab-head- {
	margin: 0 0 2rem
}

.prov-list-3 .tab-head- h3 {
	margin: 0;
    font-weight: 600;
    color: var(--prov3_TAB_HEAD_H3_TXT_COLOR)
}

.prov-list-3 .tab-head- h3.wbg- {
	width: fit-content;
	padding: 3px 1rem;
    color: var(--prov3_TAB_HEAD_H3_BG_TXT_COLOR);
    background: var(--prov3_TAB_HEAD_H3_BG)
}

.prov-list-3 .tab-head- .search-input- {
	position: relative;
	font-size: 1rem
}

.prov-list-3 .tab-head- .search-input- input {
	padding: 5px 1rem 5px 2.5rem;
    border-radius: var(--prov3_FORM_INPUT_BORDER_RADIUS);
    border: var(--prov3_FORM_INPUT_BORDER);
    background: var(--prov3_FORM_INPUT_BG);
    color: var(--prov3_FORM_INPUT_TXT_COLOR)
}

.prov-list-3 .tab-head- .search-input- i {
	position: absolute;
    top: 50%;
    left: 1rem;
    transform: translateY(-50%);
    color: var(--prov3_FORM_INPUT_ICON_COLOR)
}

.prov-list-3 .prov-filter-list- {
    display: grid;
    grid-template-columns: repeat(8, 1fr);
    gap: .25rem .15rem
}

.prov-list-3 .prov-filter-list- button {
	width: 100%;
    padding: 10px .25rem;
    font-size: 12px;
    font-weight: 600;
    text-transform: uppercase;
    transition: .3s;
    border: var(--prov3_TAB_FILTER_BTN_BORDER);
    color: var(--prov3_TAB_FILTER_BTN_TXT_COLOR);
    background: var(--prov3_TAB_FILTER_BTN_BG)
}

.prov-list-3 .prov-filter-list- button:first-child,
.prov-list-3 .prov-filter-list- button:nth-child(8n+9) {
	border-top-left-radius: 20px;
    border-bottom-left-radius: 20px
}

.prov-list-3 .prov-filter-list- button:last-child,
.prov-list-3 .prov-filter-list- button:nth-child(8n+8) {
	border-top-right-radius: 20px;
    border-bottom-right-radius: 20px
}

.prov-list-3 .prov-filter-list- button:hover,
.prov-list-3 .prov-filter-list- button.active {
	color: var(--prov3_TAB_FILTER_BTN_HOVER_TXT_COLOR);
	background: var(--prov3_TAB_FILTER_BTN_HOVER_BG)
}

.prov-list-3 .gamelist-item-row .provItem {
	display: none;
    animation-name: fadeOut
}

.prov-list-3 .gamelist-item-row .provItem.show {
	display: block;
    animation-name: fadeIn;
    animation-duration: .5s
}

/* non-gamelist */
.prov-list-3 .provider-item-row {
	display: grid;
    grid-gap: .5rem;
    grid-template-columns: repeat(5, 1fr);
    padding: 0;
    justify-items: stretch
}

.prov-list-3 .provider-item-row.gamelist-item-row {
	grid-template-columns: repeat(6, 1fr)
}

.prov-list-3 .provider-item-row .provItem .provImg {
	min-height: 140px;
	height: max-content;
	display: flex;
	border-radius: 5px;
    transition: .3s linear;
    border: var(--prov3_PROVITEM_IMG_BORDER);
    background: var(--prov3_PROVITEM_IMG_BG)
}

.prov-list-3 .provider-item-row .provItem .provImg img {
	opacity: 1;
	transition: .3s
}

.prov-list-3 .provider-item-row .provItem:hover .provImg img {
	opacity: 0
}

.prov-list-3 .provider-item-row .provItem .provImg .hoverimg {
	position: absolute;
    width: 100%;
    height: 100%;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    background-size: 100%;
    background-position: center;
    background-repeat: no-repeat;
    z-index: -1;
    opacity: 0;
    transition: .3s
}

.prov-list-3 .provider-item-row .provItem:hover .provImg .hoverimg {
	background-size: 110%;
	z-index: 1;
	opacity: 1
}

.prov-list-3 .provider-item-row .provItem .provImg .game-lbl- {
	position: absolute;
    width: fit-content;
    padding: 3px 7px;
    border-radius: 5px;
    font-size: 12px;
    font-weight: 600;
    text-transform: uppercase;
    top: 10px;
    right: 10px
}

.prov-list-3 .provider-item-row .provItem .provImg .game-lbl-[data-gamelabel='lobby'] {
	color: var(--prov3_PROVITEM_LBL_LOBBY_TXT_COLOR);
	background: var(--prov3_PROVITEM_LBL_LOBBY_BG)
}

.prov-list-3 .provider-item-row .provItem .provImg .game-lbl-[data-gamelabel='gamelist'] {
	color: var(--prov3_PROVITEM_LBL_GAMELIST_TXT_COLOR);
	background: var(--prov3_PROVITEM_LBL_GAMELIST_BG)
}

.prov-list-3 .provider-item-row .provItem .block- {
	position: absolute;
    width: 100%;
    height: 100%;
    top: 0;
    left: 0;
    z-index: 2;
    border-radius: 5px;
    background: #000000b5
}

.prov-list-3 .provider-item-row .provItem .block- .block-wrap {
	width: 90%;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    display: flex;
    flex-direction: column;
    gap: 1rem 0;
    font-size: 1rem;
    font-weight: 600;
    text-align: center;
    text-transform: uppercase
}

.prov-list-3 .provider-item-row .provItem .block- .block-wrap i {
    font-size: 2rem
}

.prov-list-3 .provider-item-row .provItem .block-.maintenance {
	border: 2px solid #eebb17
}

.prov-list-3 .provider-item-row .provItem .block- .m-wrap {
	color: #eebb17
}

.prov-list-3 .provider-item-row .provItem .provImg .overlay {
	opacity: 0;
    transition: .3s linear
}

.prov-list-3 .provider-item-row .provItem:hover .provImg .overlay {
     opacity: 1
}

.prov-list-3 .provider-item-row .provItem .provImg .overlay .o-wrap {
	width: 50%;
    top: 80%;
    left: 50%;
    transform: translate(-50%, -80%);
    transition: .3s linear
}

.prov-list-3 .provider-item-row .provItem:hover .provImg .overlay .o-wrap {
	transform: translate(-50%, -50%);
    top: 50%
}

.prov-list-3 .provider-item-row .provItem .provImg .provName {
	font-size: .85rem;
	color: var(--prov3_PROVITEM_NAME_TXT_COLOR)
}

.prov-list-3 .btn-play- {
	padding: 8px 1rem;
    font-weight: 600;
    text-transform: uppercase;
    border-radius: 5px;
    transition: .3s;
    border: var(--prov3_PROVITEM_BTN_BORDER);
	background: var(--prov3_PROVITEM_BTN_BG);
	color: var(--prov3_PROVITEM_BTN_TXT_COLOR)
}

.prov-list-3 .btn-play-:hover {
	border: var(--prov3_PROVITEM_BTN_HOVER_BORDER);
	background: var(--prov3_PROVITEM_BTN_HOVER_BG);
	color: var(--prov3_PROVITEM_BTN_HOVER_TXT_COLOR)
}

/* usrpswd */
.prov-list-3 .prov-usrpswd-box- {
	position: relative;
	height: 100%;
	padding: 1rem;
    color: var(--prov3_USRPSWDBOX_TXT_COLOR);
    background: var(--prov3_USRPSWDBOX_BG)
}

.prov-list-3 .prov-usrpswd-box- .provlogo- {
	position: absolute;
    width: 150px;
    top: 90%;
    right: 1rem;
    transform: translateY(-90%);
    z-index: 1;
    opacity: .6
}

.prov-list-3 .prov-usrpswd-box- .box-wrap- {
	position: relative;
	z-index: 2
}

.prov-list-3 .prov-usrpswd-box- .msg- p {
	margin-bottom: .5rem
}

.prov-list-3 .prov-usrpswd-box- .msg- a {
	font-weight: 600;
    color: var(--prov3_USRPSWDBOX_LINK_TXT_COLOR)
}

.prov-list-3 .prov-usrpswd-box- .msg- a:hover {
	text-decoration: underline
}

.prov-list-3 .prov-usrpswd-box- .form-group label {
    font-weight: 600;
    color: var(--prov3_FORM_INPUT_LBL_TXT_COLOR)
}

.prov-list-3 .prov-usrpswd-box- .form-group input {
	font-weight: 600;
    color: var(--prov3_FORM_INPUT_DISABLED_TXT_COLOR);
    border: var(--prov3_FORM_INPUT_DISABLED_BORDER);
    background: var(--prov3_FORM_INPUT_DISABLED_BG);
}

.prov-list-3 .prov-usrpswd-box- .form-group .input- {
	position: relative
}

.prov-list-3 .prov-usrpswd-box- .form-group .input-.pswd input {
	padding: 10px 2rem 10px 10px
}

.prov-list-3 .prov-usrpswd-box- .form-group .input- .copyIcon {
	position: absolute;
    top: 50%;
    right: 1rem;
    transform: translateY(-50%);
    margin: 0;
    cursor: pointer;
    font-size: 1rem;
    color: var(--prov3_FORM_INPUT_COPY_COLOR)
}

.prov-list-3 .prov-usrpswd-box- .form-group .input- .mobileapp-icon {
	right: -2rem;
}

.prov-list-3 .prov-usrpswd-box- .form-group .action-box {
	align-self: end
}

.prov-list-3 .prov-usrpswd-box- .form-group .btn-generateusr {
	width: 100%;
    height: auto;
    padding: 10px;
    font-weight: 600;
    transition: .3s;
    color: var(--prov3_USRPSWDBOX_BTN_TXT_COLOR);
    background: var(--prov3_USRPSWDBOX_BTN_BG)
}

.prov-list-3 .prov-usrpswd-box- .form-group .btn-generateusr:hover {
	color: var(--prov3_USRPSWDBOX_BTN_HOVER_TXT_COLOR);
    background: var(--prov3_USRPSWDBOX_BTN_HOVER_BG)
}

.prov-list-3 .prov-qr-box {
	padding: 1rem;
    display: flex;
    justify-content: space-evenly;
    align-items: center;
    background: var(--prov3_USRPSWDBOX_QR_BG)
}

.prov-list-3 .prov-qr-box .down-item .lbl {
	padding: 5px 1rem;
    font-weight: 600;
    text-align: center;
    color: var(--prov3_USRPSWDBOX_QR_LBL_TXT_COLOR);
    background: var(--prov3_USRPSWDBOX_QR_LBL_BG)
}

/* favourite provider */
.prov-list-3 .fav-box- {
	margin: 0 0 2rem
}

.prov-list-3 .fav-box- .box-title- {
	display: flex;
    align-items: center;
    gap: .5rem;
    margin: 0 0 1rem;
    font-size: 1.25rem;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 1px;
    color: var(--prov3_FAVBOX_TITLE_TXT_COLOR)
}

.prov-list-3 .fav-box- .box-title- i {
	font-size: 1.5rem;
    color: var(--prov3_FAVBOX_TITLE_ICON_COLOR)
}

.prov-list-3 .fav-box- .box-content- {
	padding: 1rem;
    border-radius: 5px;
    border: var(--prov3_FAVBOX_BORDER);
    background: var(--prov3_FAVBOX_BG)
}

.prov-list-3 .fav-box- .box-content- .fav-list- {
	padding: 0;
    display: grid;
    grid-template-columns: repeat(7, 1fr);
    grid-gap: 1rem
}

.prov-list-3 .fav-box- .box-content- .fav-list- .item-  {
	position: relative;
	display: flex;
    align-items: center;
    justify-content: center;
	padding: 5px;
	transition: .3s
}

.prov-list-3 .fav-box- .box-content- .fav-list- .item-:hover {
	transform: scale(1.1)
}

.prov-list-3 .fav-box- .box-content- .fav-list- .item- .lbl- {
	position: absolute;
    width: fit-content;
    top: 5px;
    right: 5px;
    display: flex;
    gap: .25rem;
    flex-wrap: wrap;
    font-size: 12px;
    font-weight: 600;
    text-transform: uppercase
}

.prov-list-3 .fav-box- .box-content- .fav-list- .item- .lbl- span { 
	padding: 3px 5px;
	border-radius: 5px;
    color: var(--prov3_FAVBOX_ITEM_LBL_TXT_COLOR);
    background: var(--prov3_FAVBOX_ITEM_LBL_BG)
}

.prov-list-3 .fav-box- .box-content- .fav-list- .item- .block- {
	position: absolute;
    width: 100%;
    height: 100%;
    top: 0;
    left: 0;
    border-radius: 5px;
    z-index: 2;
    background: #000000b5
}

.prov-list-3 .fav-box- .box-content- .fav-list- .item- .block-.overlay {
    background: transparent
}

.prov-list-3 .fav-box- .box-content- .fav-list- .item- .block- .block-wrap {
	width: 90%;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    font-size: 1.5rem;
    text-align: center
}

.prov-list-3 .fav-box- .box-content- .fav-list- .item- .block- .block-wrap.m-wrap {
    color: #eebb17
}

.prov-list-3 .fav-box- .box-content- .fav-list- .item- .block- .block-wrap.l-wrap {
    color: var(--color2)
}

.prov-list-3  .btn-fav- {
	position: absolute;
	width: fit-content;
	height: fit-content;
    top: .5rem;
    right: 1rem;
    padding: 0;
    font-size: 1.25rem;
    transition: .3s;
    border: none;
    color: var(--prov3_FAVBOX_BTN_TXT_COLOR);
    background: var(--prov3_FAVBOX_BTN_BG)
}

.prov-list-3  .btn-fav-:hover,
.prov-list-3  .btn-fav-.active,
.prov-list-3 .prov-carousel-container- .btn-fav-:hover,
.prov-list-3 .prov-carousel-container- .btn-fav-.active {
	color: var(--prov3_FAVBOX_BTN_HOVER_TXT_COLOR);
	background: var(--prov3_FAVBOX_BTN_HOVER_BG)
}

.prov-list-3 .prov-carousel-container- .btn-fav- {
	left: 1rem;
    right: 0;
    z-index: 3;
    color: var(--prov3_FAVBOX_CAROUSEL_BTN_TXT_COLOR)
}