/* Top-level MediaShareLink tab button - icon - give it shape and color */
#tab-mediasharelink .icon-link:before, #shareTab .icon-link:before {
    width: 21px;
    height: 21px;
    line-height: 21px;
    text-align: center;
    border-radius: 50%;
    font-size: 14px;
    color: rgba(255, 255, 255, 0.9);
}

#shareTab .icon-link a {
    display: inline-block;
    font-family: "Lato", "Helvetica Neue", Helvetica, Arial, sans-serif;
}

/* Top-level MediaShareLink tab button - icon - different background color based on the links status */
#tab-mediasharelink .icon-link.mediasharelink-status-icon--active:before, #shareTab .icon-link.mediasharelink-status-icon--active:before {
    background: #48d1a7;
}
#tab-mediasharelink .icon-link.mediasharelink-status-icon--future:before, #shareTab .icon-link.mediasharelink-status-icon--future:before {
    background: #f7c92b;
}
#tab-mediasharelink .icon-link.mediasharelink-status-icon--none:before, #shareTab .icon-link.mediasharelink-status-icon--none:before {
    background: #808080;
}

/* Link generation form - smaller default text size */
#mediasharelink-tab-content form {
    font-size: 16px;
}

/* Link generation form - field line - less spacing between the rows */
#mediasharelink-tab-content form .control-group {
    margin-bottom: 5px;
}

/* Link generation form - labels - fix the vertical alignment */
#mediasharelink-tab-content form label {
    padding-top: 12px;
}

/* Link generation form - date element - make it smaller to fit smaller container */
#mediasharelink-tab-content form .kmsDateElement {
    width: 120px;
}

/* Link generation form - time element - make it smaller to fit smaller container */
#mediasharelink-tab-content form .kmsTimeElement {
    width: 100px;
}

/* Link generation form - timezone element - make it smaller to fit smaller container */
#mediasharelink-tab-content form .kmsTZElement {
    font-size: 14px;
    width: 250px;
}

#mediasharelink-links table .actions {
    vertical-align: middle;
}

@media (max-width: 1199px) {
    /* Link generation form - timezone element - move to the next line on small screens to fit smaller container */
    #mediasharelink-tab-content form .kmsTZElement {
        display: block;
        top: 0;
        margin-top: 10px;
        margin-left: 5px;
        width: 250px;
    }
}

@media (min-width: 994px) {
    #mediasharelink-tab-content form .kmsTZElement {
        top: 0;
    }
}