#ccmPop{ display: none; position: fixed; bottom: 0; left: 0; z-index: 40;  }
#ccmPop in{ 
    display: flex; flex: none; align-items: center; justify-content: center; 
    width: 100vw; height: calc( 100vh - 6em - 4em ); overflow: hidden;
    background: #fff7; 
}

#ccmPop .ct{ 
    display: flex; flex: none; flex-direction: column; align-items: stretch; 
    width: 66%; height: 90%; overflow: hidden;
    border: 2px solid var(--main-color); background: var(--ccmpop-back); border-radius: 1em;
}
#ccmPop .ct h1{ all: unset; font-size: 2em; font-weight: bold; }
#ccmPop .ct .biggerFont{ font-size: 1.25em; }
#ccmPop .ct .close{ text-decoration: none; font-size: 1.25em; height: 2.5em; padding: 0.5em 1em; text-align: right; }
#ccmPop .ct .close .material-icons{ color: var(--pay-cancel); font-size: 2em; }
#ccmPop .ct .scroll{ height: calc( 100% - 3em ); padding: 0 2em 2em 2em; overflow-y: auto; }


#ccmPop .points article{
    display: flex; flex: none; align-items: center; margin-left: 3em; margin-bottom: 2em;
    border: 2px solid var(--main-text); background: linear-gradient(to bottom right, var(--reverse-text), #ccc ); border-radius: 1em;
}
#ccmPop .points article h1{ 
    display: flex; flex: none; align-items: center; justify-content: center; 
    width: 2em; height: 2em; margin: -1em 0 -1em -1em;
    border: 2px solid var(--main-text); background: var(--reverse-text);  border-radius: 100%;
}
#ccmPop .points article span{ padding: 2em; }

#ccmPop .bt_ccm{ font-size: 0.66em; transform: translateY( 0.5em ); }