:root {
    --share-box-width: 50px;
    --share-box-height: 50px;
    --share-box-margin: 10px;
    --num-cols: 3;
}

#sharepopup {
    position: absolute;
    background-color: #cccccc;
    z-index: 1000;
    border: 1px solid black;
    border-radius: 8px;
    width: calc( var(--num-cols) * calc( var( --share-box-width ) + ( 2 * var( --share-box-margin ))));
}

.sharebydiv {
    width: var(--share-box-width);
    height: var(--share-box-height);
    display: inline-block;
    margin: var( --share-box-margin );
    background-size: min(var(--share-box-width), var(--share-box-height)) min(var(--share-box-width), var(--share-box-height));
    background-repeat: no-repeat;
    background-position: center;
    cursor: pointer;
    position: relative;
}

.sharename {
    position: absolute;
    font-size: 10px;
    text-align: center;
    width: 100%;
    margin: auto;
    bottom: -7px;
    color: #555555;
    text-decoration: none;
}

.sharebydiv[shareby=sms][deviceos=apple] {
    background-image: url('/static/crossword/images/share/sms_apple.png');
}

.sharebydiv[shareby=sms][deviceos=android] {
    background-image: url('/static/crossword/images/share/sms_android.png');
}

.sharebydiv[shareby=sms] {
    background-image: url('/static/crossword/images/share/sms.png');
}

.sharebydiv[shareby=email] {
    background-image: url('/static/crossword/images/share/email.png');
}

.sharebydiv[shareby=facebook] {
    background-image: url('/static/crossword/images/share/facebook.png');
}

.sharebydiv[shareby=twitter] {
    background-image: url('/static/crossword/images/share/twitter.png');
}

.sharebydiv[shareby=whatsapp] {
    background-image: url('/static/crossword/images/share/whatsapp.png');
}

.sharebydiv[shareby=clipboard] {
    background-image: url('/static/crossword/images/share/clipboard.png');
}

.sharebydiv[shareby=navigatorshare] {
    background-image: url('/static/crossword/images/share/navigatorshare.png');
}

.email_provider {
    background-image: url('/static/crossword/images/share/mailproviders-sprite-23px.png'); 
    margin: 4px 10px 4px 10px; 
    padding-left: 35px; 
    text-align: left; 
    background-size: 23px; 
    background-repeat: no-repeat;
    font-size: 18px;
}

.providerwrapper {
    padding: 10px;
    margin: 15px auto 0px;
    width: 300px;
}