#socialShareModal input,
#socialShareModal button {
    font-family: Helvetica, Arial, sans-serif;
}

#socialShareModal .modal-content {
    background-color: #1a1a1a;
}

#socialShareModal .modal-header {
    border-bottom: none;
    color: #fff;
    padding-bottom: 1rem;
    padding-top: 2rem;
}

#socialShareModal .btn-close {
    background: transparent;
    color: #fff !important;
    font-size: 20px;
    opacity: 1;
}

#socialShareModal .btn-close:hover {
    color: #fff !important;
    opacity: 1;
}

#socialShareModal .modal-footer {
    border-top: none;
}

/* share buttons container */

.share-buttons-container a {
    margin: 8px 5px;
    transition: 500ms;
}

.share-buttons-container a:hover {
    transform: scale(1.2);
}

.share-buttons-container i {
    color: #fff;
    padding: 5px;
    min-width: 40px;
    border-radius: 4px;
    min-height: 40px;
    display: flex;
    justify-content: center;
    align-items: center;
}

.share-buttons-container .fa-facebook {
    background-color: #366299;
    font-size: 27px;
}

.share-buttons-container .fa-twitter {
    background-color: #0f9cd2;
    font-size: 25px;
}

.share-buttons-container .fa-x-twitter {
    background-color: #000000;
    font-size: 25px;
}

.share-buttons-container .fa-facebook-messenger {
    background-color: #0084ff;
    font-size: 25px;
}

.share-buttons-container .fa-whatsapp {
    background-color: #25d366;
    font-size: 27px;
}

.share-buttons-container .fa-reddit {
    background-color: #ff4500;
    font-size: 25px;
}

.share-buttons-container .fa-viber {
    background-color: #59267c;
    font-size: 25px;
}

.share-buttons-container .fa-pinterest {
    background-color: #e60023;
    font-size: 27px;
}

.share-buttons-container .fa-telegram {
    background-color: #0088cc;
    font-size: 25px;
}

.share-buttons-container .fa-weibo {
    background-color: #e60f29;
    font-size: 25px;
}

i.fas.fa-copy {
    font-size: 21px;
}

.copy-url-div {
    margin-top: 20px;
    padding-left: 8px;
}

.copy-url-div button {
    color: #fff;
    background: none;
    font-size: 16px;
    font-weight: 300;
    margin-bottom: 20px;
    padding: 7px;
    border: 1px solid #000000;
    border-radius: 6px;
}

#modal-input {
    color: #fff !important;
    border: none !important;
    width: 68% !important;
    background-color: #000000 !important;
    height: 45px !important;
    margin-right: 21px !important;
    margin-bottom: 20px !important;
}

#socialShareModal {
    display: none;
}

/* media queries */
@media screen and (max-width: 600px) {
    .share-buttons-container a {
        margin: 8px 4px;
    }

    .share-buttons-container {
        justify-content: flex-start !important;
    }

    #modal-input {
        margin-left: 0px !important;
        width: 90% !important;
    }

    .copy-url-div {
        padding-left: 0px;
    }
}