/* left leagues */
.leftLeagues { display: inline-block; width: 100%; float: left; position: relative; padding: 12px 16px 16px; border: 1px solid #535353; border-radius: 6px; margin-bottom: 20px; background-color: #000 }
.leftLeagues h3 { display: inline-block; width: 100%; float: right; color: #fff; font-family: droidBold, Arial; font-size: 15px }
.leftLeagues .buttons { display: inline-block; width: auto; margin: 0 auto; margin-top: 15px; }
.leftLeagues .buttons a { display: inline-block; width: auto; height: 35px; line-height: 34px; float: right; padding: 0 14px; margin-left: 10px; border-radius: 4px; border: 1px solid #535353; color: #fff; font-family: droidLight, Arial; font-size: 14px }
.leftLeagues .buttons a:last-child { margin-left: 0 }
.leftLeagues .buttons a:hover { background-color: #e7e7e7; color: #161a2c }
.leftLeagues .buttons a.create { background-color: #00326f; border: 1px solid #00326f; }
.leftLeagues .buttons a.create:hover { background-color: #e7e7e7; color: #161a2c }
.leftleagueBox { position: fixed; width: 100%; height: 100%; top: 0; left: 0; bottom: 0; right: 0; z-index: 9; opacity: 0; visibility: hidden; -webkit-transition: all 0.2s ease-in-out 0s; -moz-transition: all 0.2s ease-in-out 0s; -o-transition: all 0.2s ease-in-out 0s; -ms-transition: all 0.2s ease-in-out 0s; transition: all 0.2s ease-in-out 0s; }
.leftleagueBox:before { content: ""; position: absolute; width: 100%; height: 100%; top: 0; right: 0; bottom: 0; left: 0; background: rgba(0,0,0,0.6); pointer-events: none; }
.leftleagueBox .popupContainer { position: absolute; width: 500px; border-radius: 6px; top: 50%; left: 50%; transform: translate(-50%,-50%); overflow: hidden; z-index: 10 }
.leftleagueBox .popupContainer .popupTtl { display: inline-block; float: right; width: 100%; height: 50px; background: #20273f; padding: 0 20px; color: #fff; position: relative; z-index: 1 }
.leftleagueBox .popupContainer .icon-created:before { content: "K"; float: right; display: inline-block; line-height: 50px }
.leftleagueBox .popupContainer .popupTtl p { display: inline-block; float: right; padding-right: 10px; font-family: droidLight, Arial; font-size: 15px; color: #fff; line-height: 50px }
.leftleagueBox .popupContainer .popupTtl .closePopup { position: absolute; top: 12px; left: 10px; width: 20px; height: 20px; z-index: 2; cursor: pointer; }
.leftleagueBox .popupContainer .popupTtl .closePopup:after,
.leftleagueBox .popupContainer .popupTtl .closePopup:before { content: ''; position: absolute; top: 0; width: 2px; height: 100%; background-color: #fff; opacity: 1; transition: all .2s ease-in-out 0s; -webkit-transition: all .2s ease-in-out 0s; -moz-transition: all .2s ease-in-out 0s; -ms-transition: all .2s ease-in-out 0s; -o-transition: all .2s ease-in-out 0s; }
.leftleagueBox .popupContainer .popupTtl .closePopup:before { -webkit-transform: rotate(45deg); -moz-transform: rotate(45deg); -ms-transform: rotate(45deg); -o-transform: rotate(45deg); transform: rotate(45deg); }
.leftleagueBox .popupContainer .popupTtl .closePopup:after { -webkit-transform: rotate(-45deg); -moz-transform: rotate(-45deg); -ms-transform: rotate(-45deg); -o-transform: rotate(-45deg); transform: rotate(-45deg); }
.leftleagueBox .popupContainer .popupCnts { display: inline-block; float: right; width: 100%; background: #fff; padding: 30px 20px; position: relative; z-index: 1 }
.leftleagueBox .popupContainer .popupCnts h4 { display: inline-block; float: right; width: 100%; font-family: droidBold, Arial; font-size: 18px; text-align: right; color: #20273f; margin-bottom: 30px }
.leftleagueBox .popupContainer .popupCnts .leagueCode { display: inline-block; float: right; width: 100%; margin-bottom: 50px }
.leftleagueBox .popupContainer .popupCnts .leagueCode:last-child { margin-bottom: 0 }
.leftleagueBox .popupContainer .popupCnts .leagueCode span { display: inline-block; float: right; width: 100%; font-family: droidBold, Arial; text-align: right; font-size: 15px; color: #20273f; margin-bottom: 4px }
.leftleagueBox .popupContainer .popupCnts .leagueCode p { display: inline-block; float: right; width: 100%; font-family: droidLight, Arial; text-align: right; font-size: 13px; color: #20273f; margin-bottom: 20px }
.leftleagueBox .popupContainer .popupCnts .leagueCode.link p { margin-bottom: 30px }
.leftleagueBox .popupContainer .popupCnts .leagueCode .codeInputCntnr { display: inline-block; float: right; width: 100%; }
.leftleagueBox .popupContainer .popupCnts .leagueCode.code .codeInputCntnr .codeInput { display: inline-block; float: right; width: 100%; height: 50px; line-height: 48px; border: 1px solid rgba(32,39,63,0.2); margin-bottom: 15px; font-family: CenturyGothicLight, Arial; font-size: 20px; color: #20273f; border-radius: 6px; padding: 0 10px; font-weight: bold; text-align: right }
.leftleagueBox .popupContainer .popupCnts .leagueCode .codeInputCntnr .copyCodeBtn { display: inline-block; float: left; position: relative; width: 140px; height: 50px; line-height: 48px; border: 1px solid rgba(32,39,63,1); font-family: droidLight, Arial; font-size: 14px; color: #20273f; border-radius: 6px; padding: 0 10px; text-align: center; cursor: pointer; -webkit-transition: all 0.2s ease-in-out 0s; -moz-transition: all 0.2s ease-in-out 0s; -o-transition: all 0.2s ease-in-out 0s; -ms-transition: all 0.2s ease-in-out 0s; transition: all 0.2s ease-in-out 0s; }
.leftleagueBox .popupContainer .popupCnts .leagueCode.code .codeInputCntnr .codeInput:focus { border: 1px solid rgba(32,39,63,0.2) !important }
.leftleagueBox .popupContainer .popupCnts .leagueCode .codeInputCntnr .copyCodeBtn:hover { background: #20273f; color: #fff }
.leftleagueBox .popupContainer .popupCnts .leagueCode .codeInputCntnr .copyCodeBtn .addedCode { display: inline-block; position: absolute; width: 85px; height: 30px; background-color: green; left: 50%; transform: translateX(-50%); top: -38px; border-radius: 6px; color: #fff; line-height: 2.2; font-size: 12px; font-family: 'droidLight'; opacity: 0; visibility: hidden; -webkit-transition: all 0.2s ease-in-out 0s; -moz-transition: all 0.2s ease-in-out 0s; -o-transition: all 0.2s ease-in-out 0s; -ms-transition: all 0.2s ease-in-out 0s; transition: all 0.2s ease-in-out 0s; }
.leftleagueBox .popupContainer .popupCnts .leagueCode .codeInputCntnr .copyCodeBtn .addedCode:before { content: ''; width: 0; height: 0; border-left: 8px solid transparent; border-right: 8px solid transparent; border-top: 8px solid green; position: absolute; bottom: -7px; right: 10px; }
.leftleagueBox .popupContainer .popupCnts .leagueCode .codeInputCntnr .copyCodeBtn.added .addedCode { opacity: 1; visibility: visible }
.leftleagueBox .popupContainer .popupCnts .leagueCode.link .codeInputCntnr .codeInput { display: inline-block; float: right; width: 100%; line-height: 1; padding-bottom: 4px; border-bottom: 1px solid rgba(32,39,63,0.2); font-family: arial; font-size: 14px; color: #20273f; text-align: left; direction: ltr; white-space: nowrap; text-overflow: ellipsis; overflow: hidden; margin-bottom: 20px }
.openPopupCode .leftleagueBox { opacity: 1; visibility: visible }


@media screen and (min-width: 320px) and (max-width: 767px) {
        .leftleagueBox .popupContainer { width: calc(100% - 20px) }

}