#telcoNavbar_space{height: 55px;}
#telcoNavbar{position: fixed; z-index: 55; top: 0px; left: 0px; width: 100%; box-shadow: 0px 0px 5px var(--bg_silver); background: var(--bg_white);}
#telcoNavbar > div{height: 55px; max-width: 1000px; padding: 0px 15px; box-sizing: border-box; display: grid; grid-template-columns: 120px 1fr; grid-gap: 20px; align-items: center;}
#telcoNavbar > div > div{width: 100%;}
#telcoNavbar .tnLogo > div{padding-bottom: 23%;}
#telcoNavbar .tnItem{display: grid; grid-template-columns: min-content min-content; grid-gap: 15px; float: right; align-items: center;}
#telcoNavbar .tnItem > div{width: 100%; white-space: nowrap;}
#telcoNavbar .tnItem .tiMsisdn{padding: 3px 10px 3px 13px; cursor: pointer; border: 1px solid var(--bg_silver); font-size: 12px; border-radius: 10px; box-sizing: border-box; display: grid; grid-gap: 10px; align-items: center; grid-template-columns: min-content 10px;}
#telcoNavbar .tnItem .tiMsisdn .tmMore > div{width: 10px; height: 10px;}
#telcoNavbar .tnItem .tiMsisdn .tmNo{display: grid; grid-template-columns: 10px 1fr; grid-gap: 5px; align-items: center; font-size: 11px; color: var(--text_silver); margin-bottom: 2px;}
#telcoNavbar .tnItem .tiMsisdn .tmNo > div{width: 100%;}
#telcoNavbar .tnItem .tiMsisdn .tmNo > div:first-child > div{width: 10px; height: 10px;}
#telcoNavbar .tnItem .tiMsisdn .tmPoints{font-weight: bold;}
#telcoNavbar .tnItem .tiProfile{display: grid; cursor: pointer; grid-template-columns: 25px 1fr; grid-gap: 10px; align-items: center;}
#telcoNavbar .tnItem .tiProfile > div{width: 100%;}
#telcoNavbar .tnItem .tiProfile > div:first-child > div{height: 25px; background-color: var(--bg_silver); border-radius: 50%;}
#telcoNavbar .tnItem .tiProfile > div:nth-child(2){max-width: 100px;}
#telcoNavbar .tnBtn{text-align: right;}

.telco_title{padding: 25px 0px; text-align: center; font-weight: bold; font-size: 25px;}

.telco_period{margin-top: 15px;}
.telco_period > div:first-child{font-weight: bold;}
.telco_period > div:nth-child(2){font-size: 15px; color: var(--text_silver);}

.telco_position{margin-top: 15px;}
.telco_position > div:first-child{font-weight: bold;}

.telco_leaderboard{margin-top: 25px;}
.telco_leaderboard .tlHead{display: grid; grid-template-columns: min-content 1fr 100px; grid-gap: 15px; background: var(--bg_silvercalm); border-radius: 5px;}
.telco_leaderboard .tlHead > div{width: 100%; padding: 10px; box-sizing: border-box; font-weight: bold;}
.telco_leaderboard .tlHead > div:first-child{text-align: center;}
.telco_leaderboard .tlList > div{display: grid; grid-template-columns: 50px 1fr 100px; grid-gap: 15px; align-items: center;}
.telco_leaderboard .tlList > div.active{box-shadow: inset 0px 0px 0px 1.5px var(--bg_blue); border-radius: 10px;}
.telco_leaderboard .tlList > div > div{width: 100%; padding: 10px; box-sizing: border-box;}
.telco_leaderboard .tlList > div > div:first-child{text-align: center;}
.telco_leaderboard .tlList .tlUser{display: grid; grid-template-columns: 35px 1fr; grid-gap: 15px; align-items: center;}
.telco_leaderboard .tlList .tlUser > div{width: 100%;}
.telco_leaderboard .tlList .tlUser > div:first-child > div{width: 35px; height: 35px; border-radius: 50%; background-color: var(--bg_silvercalm);}
.telco_leaderboard .tlList .tlUser > div:nth-child(2) > div:nth-child(2){color: var(--text_silver);}

/**CARD**/
.card_telco_redeem{display: grid; grid-template-columns: 1fr 1fr 1fr 1fr; grid-gap: 15px;}
.card_telco_redeem > div{width: 100%; overflow: hidden; position: relative; border: 1px solid var(--bg_line); transition: var(--transition); border-radius: 10px;}
.card_telco_redeem > div:hover{border: 1px solid var(--bg_blue);}
.card_telco_redeem .ctrCover > div{padding-bottom: 102%; background-color: var(--bg_silvercalm);}
.card_telco_redeem .ctrBody{padding: 15px 10px 95px 10px;}
.card_telco_redeem .ctrBody > div:first-child{font-size: 17px; font-weight: bold; margin-bottom: 10px;}
.card_telco_redeem .ctrBody > div:nth-child(2){color: var(--text_silkver);}
.card_telco_redeem .ctrBottom{position: absolute; bottom: 10px; left: 0px; width: 100%; padding: 0px 10px; box-sizing: border-box;}
.card_telco_redeem .ctrBottom > div:first-child{margin-bottom: 10px;}
.card_telco_redeem .ctrBottom > div:first-child > div{display: inline-block;}
.card_telco_redeem .ctrBottom .cbPoint{display: grid; grid-template-columns: 15px 1fr; grid-gap: 10px; align-items: center; padding: 5px 10px; border-radius: 5px; background: var(--bg_silvercalm); font-size: 11px; font-weight: bold;}
.card_telco_redeem .ctrBottom .cbPoint > div:first-child > div{width: 15px; height: 15px;}

.card_telco_msisdn{border-radius: 10px; border: 1px solid var(--bg_line); margin-top: 10px; overflow: hidden;}
.card_telco_msisdn > div{padding: 10px 15px; display: grid; transition: var(--transition); grid-template-columns: 25px 1fr; cursor: pointer; grid-gap: 10px; align-items: center;}
.card_telco_msisdn > div.selected{background: var(--bg_bluecalm);}
.card_telco_msisdn > div:not(:last-child){border-bottom: 1px solid var(--bg_line);}
.card_telco_msisdn > div:not(.selected):hover{background: var(--bg_silvercalm);}
.card_telco_msisdn > div > div{width: 100%;}
.card_telco_msisdn > div > div:first-child > div{width: 25px; height: 25px; border-radius: 5px;}
.card_telco_msisdn > div > div:nth-child(2) > div:nth-child(2){color: var(--text_silver); font-size: 11px; font-weight: bold;}

@media screen and (max-width: 815px) {
	.card_telco_redeem{grid-template-columns: 1fr 1fr 1fr;}
}

@media screen and (max-width: 595px) {
	.card_telco_redeem{grid-template-columns: 1fr 1fr;}
}

@media screen and (max-width: 570px) {
	#telcoNavbar > div{grid-template-columns: 35px 1fr;}
	#telcoNavbar .tnLogo > div{padding-bottom: 100%;}
	.icon_logo_word{background-image: url('../../../../images/logo.png');}
}

@media screen and (max-width: 415px) {
	.card_telco_redeem{grid-template-columns: 1fr;}
}