@import url('https://fonts.googleapis.com/css2?family=Roboto+Flex:opsz,wght@8..144,400;8..144,500;8..144,600&display=swap');


:root {
  --boom-blue-dark: #055da0;
  --boom-blue-dark-rgb: 0 93 160;
  --boom-blue-darker: #004a80;
  
  --gray-100: #e0e3e7;
  --gray-200: #b7bec7;
  --gray-300: #C2C4C6;
  --gray-500: #979797;
  --gray-700: #757575;
  --gray-800: #525252;
  --gray-850: #424446;
  --gray-900: #222426;

  --boom-red: #d03a26;
  --boom-destructive: #E1563D;
  --boom-blue-light: #3888e5;

  --space-sm: 0.25rem;
  --space-md: 0.5rem;
  --space-lg: 1rem;
  --space-xl: 1.25rem;
  --space-xxl: 2rem;
}

* {
  box-sizing: border-box;
}

main.stack-xl {
  padding-block: 3rem;
  padding-inline: 4rem;
}

.stack-xl {
  display: flex;
  flex-direction: column;
  justify-content: flex-start;
  gap: var(--space-xl);
}

html,
body {
  font-family: var(--font-family);
  font-variant-numeric: tabular-nums;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  font-smooth: never;
}

/* July 2018 */
* {
    font-family: var(--font-family);
    margin: 0;
}

.body_content {
  display: grid;
  grid-template-rows: auto 1fr;
  grid-template-columns: minmax(200px, max-content) 1fr;
  block-size: 100vh;
}

.body_content > .redesign-left-nav {
  overflow-y: auto;
  max-height: 100%;
}

main {
  grid-column: 2 / 3;
}

.cta {
  padding: 0.5rem 1rem;
  color: #FFFFFF;
  font-size: 1rem;
  font-weight: 500;
  line-height: 1.5rem;
  text-align: center;
  border-radius: 0.25rem;
  background-color: var(--boom-blue-dark);
  cursor: pointer;
  border: none;
  transition: background 300ms ease;
}

@media (hover: hover) {
  .cta:hover {
    text-decoration: none;
    background-color: var(--boom-blue-darker);
  }
}

.content_col {
    margin: 0px;
}
/* left nav styles */
.redesign-left-nav {
    display: flex;
    gap: 1.5rem;
    flex-flow: column nowrap;
    background-color: #F8FAFC;
    grid-column: 1 / 2;
    padding-inline: 1rem;
    padding-block: 2rem;
}

.redesign-option {
  display: flex;
  gap: 0rem;
  flex-flow: column nowrap;
}

:is(.redesign-option,.bottom-account-info) .redesign-option-header {
    font-size: 1rem;
    line-height: 1.5;
    font-weight: 500;
    color: var(--gray-900);
    text-decoration: none;
    padding-inline: 0.5rem;
    padding-block: 0.5rem;
}

a.redesign-option-header:hover {
  text-decoration: none;
}

.redesign-option-icon {
  display: flex;
  align-items: center;
  gap: 0.5rem;
}

.redesign-option a {    
  font-size: 0.875rem;
  line-height: 1.5;
  color: var(--gray-850);
  text-decoration: none;
  padding-inline: 0.5rem;
  padding-block: 0.25rem;
  border-radius: 0.375rem;
  transition: background 300ms ease-out;
}

.redesign-option a:is(:hover,:focus) {
  text-decoration: none;
  background-color: rgb(var(--boom-blue-dark-rgb) / 4%);
}

.redesign-option a:is(.active,:active) {
  font-weight: 500;
  text-decoration: none;
  background-color: rgb(var(--boom-blue-dark-rgb) / 8%);
}

.redesign-option :is(.active,:active) {
    font-weight: 500;
}

/* Special case - don't highlight the header as active because the "Account" tab will be highlighted instead */
#my-account-header.active {
    color: #444444;
}
#my-account-header.active::before {
    background-color: white;
}
/* bottom account info */
.bottom-account-info > .delimeter {
    width: 100%;
    height: 1px;
    background-color: #EAEAEA;
}
.account-information-item {
  font-size: 0.875rem;
  line-height: 1.5;
  color: var(--gray-850);
  padding-inline: 0.5rem;
  padding-block: 0.25rem;
  border-radius: 0.375rem;
}
.account-plan-update {
    background: #FFFFFF;
    color: #000000;
    margin-left: 10px;
    border: 1px solid #DADADA;
    border-radius: 4px;
    padding: 2px 5px;
    text-decoration: none;
}
.account-plan-update:hover {
    background: #F2F2F2;
    border: 1px solid #C9C9C9;
}
.account-plan-update:active {
    background: #F2F2F2;
    border: 1px solid #C9C9C9;
    box-shadow: 0 3px 7px 0 rgba(177, 177, 177, 0.5);
}
.account-plan-upgrade {
    background: #D03A26;
    border-radius: 4px;
    padding: 7px 10px;
    text-decoration: none;
    font-weight: 600;
    color: #FFFFFF;
    margin-left: 5px;
}
.account-plan-upgrade:hover {
  text-decoration: none;
    background: #E0513E;
    box-shadow: 0 1px 3px 0 rgba(224, 81, 62, 0.7);
}
.account-plan-upgrade:active {
  text-decoration: none;
    background: #E0513E;
    box-shadow: 0 3px 7px 0 rgba(224, 81, 62, 0.7);
}
.sign-out {
    display: inline-block;
    background-color: #FFFFFF;
    border: 1px solid #DADADA;
    margin-top: 12px;
    border-radius: 4px;
    padding: 7px 15px;
    color: #000000;
    text-decoration: none;
}
.sign-out:hover {
  text-decoration: none;
    background-color: #F2F2F2;
    border-color: #C9C9C9;
}
.sign-out:active {
    background-color: #F2F2F2;
    border-color: #C9C9C9;
    box-shadow: 0 3px 7px 0 rgba(177, 177, 177, 0.5);
}
/* main styles */
.main-content {
    display: flex;
    flex-flow: column nowrap;
}
.main-content > .title {
    line-height: 30px;
    color: #444444;
    font-weight: 600;
    font-size: 14px;
}
.main-content > .heading {
    line-height: 30px;
    color: #444444;
    font-weight: 600;
    margin-top: 30px;
    font-size: 14px;
}
.main-content > .information-item {
    line-height: 30px;
    color: #444444;
    font-size: 14px;
}
/* general styles */
.primary-button {
    border: none;
    display: inline-block;
    background: #1A73E8;
    padding: 7px 10px;
    border-radius: 4px;
    color: #FFFFFF;
    font-weight: 600;
    font-size: 14px;
    text-decoration: none;
    cursor: pointer;
}
.primary-button:hover {
    background: #297BE6;
    box-shadow: 0 1px 3px 0 rgba(26, 115, 232, 0.7);
}
.primary-button:active {
    background: #1A73E8;
    box-shadow: 0 3px 7px 0 rgba(26, 115, 232, 0.7);
}
.secondary-button {
    background: #FFFFFF;
    color: #000000;
    margin-left: 10px;
    border: 1px solid #DADADA;
    border-radius: 4px;
    padding: 2px 5px;
    text-decoration: none;
    outline: none;
    cursor: pointer;
}
.secondary-button:hover {
    background: #F2F2F2;
    border: 1px solid #C9C9C9;
}
.secondary-button:active {
    background: #F2F2F2;
    border: 1px solid #C9C9C9;
    box-shadow: 0 3px 7px 0 rgba(177, 177, 177, 0.5);
}
.large-secondary-button {
    display: inline-block;
    background-color: #FFFFFF;
    border: 1px solid #DADADA;
    margin-top: 12px;
    border-radius: 4px;
    padding: 7px 15px;
    color: #000000;
    text-decoration: none;
    font-size: 14px;
    outline: none;
    cursor: pointer;
}
.large-secondary-button:hover {
    background-color: #F2F2F2;
    border-color: #C9C9C9;
}
.large-secondary-button:active {
    background-color: #F2F2F2;
    border-color: #C9C9C9;
    box-shadow: 0 3px 7px 0 rgba(177, 177, 177, 0.5);
}
.information-button {
    margin-top: 15px;
}
.payment-button {
    width: 148px;
    text-align: center;
}
.disabled {
    cursor: no-drop;
    background-color: #d4d4d4;
    color: #888888
}
.capitalize {
  text-transform: capitalize;
}

/* invoices */
td {
    padding: 0px;
    color: #444444;
    line-height: 30px;
    font-size: 14px;
}
td.download {
    padding-left: 14px;
}
.invoice {
  width: 225px;
}
/* details */
.details {
    padding-top: 30px;
}
.plan-detail-item {
    line-height: 30px;
    height: 30px;
    font-size: 14px;
    color: #444444;
    padding-left: 50px;
}
.plan-detail-item .change-team-size.secondary-button {
    background: #1A73E8;
    color: white;
    height: 27px;
    width: 140px;
}
.plan-detail-item .change-team-size.secondary-button:hover {
    background: #297BE6;
}
.plan-detail-item .change-team-size.secondary-button:active {
    background: #1A73E8;
}
/* team subscription */
.team-subscription.tab-picker {
    margin-left: 251px;
    padding-top: 55px;
}

h1 {
  font-size: 1.5rem;
  font-weight: 600;
  color: var(--gray-900);
}

h1 span.breadcrumbs {
  color: #828486;
}

h2 {
  font-size: 1.25rem;
  font-weight: 600;
  color: var(--gray-900);
}

/* settings */
.settings-content {
  font-size: 0.875rem;
}

.settings-content label {
  vertical-align: middle;
}

.settings-heading {
  font-weight: 600;
}
.settings-section {
  font-size: 1rem;
  font-weight: 600;
  margin: 20px 0px 10px 0px;
}
.respondable-block {
}
.settings-pref-label {
  padding-left: 10px;
}
.settings-option-container {
  padding: 5px 0px;
}
.settings-remind-me-container {
  margin-top: 2px;
  margin-left: 2px;
}
.settings-respondable-indent {
  padding: 5px 0px;
  margin-left: 5px;
}
.b4g_settings_respondable_upgrade_link {
  margin: 10px 0px 5px 5px;
}

/* my-account-info */

/* Manage Billing */
.col_heading {
  padding: 25px 20px;
}
.redesign-info-box {
  width: 100%;
}
.redesign-card-info {
  padding-left: 20px;
}
.billing-sub-heading {
  margin-bottom: 10px;
}
.redesign-billing-sub-row {
  padding: 3px 0px;
}
.redesign-billing-sub-row:last-child {
  margin-bottom: 10px;
}
.update-billing-btn {
  cursor: pointer;
  color: white;
  background: none repeat scroll 0 0 #0e5ca4;
  border: 1px solid black;
  box-shadow: 1px 1px 1px black;
  display: inline-block;
  margin: 20px 5px 3px 0px;
  padding: 5px 17px;
  line-height: 1em;
}
.update-billing-btn:hover {
  text-decoration: none;
  color: white;
}
.update-billing-btn:visited { color: white; }
.radio-option {
    height: 30px;
    line-height: 30px;
    color: #444;
    font-size: 14px;
}
.error-notification > .message {
    color: red;
}
#update_frequency_button {
    margin-top: 15px;
}

/* Update Billing (billing-info-payment.html) */

/* patch existing styles to fit the redesign */
.billing_info_form {
  display: flex;
  flex-flow: column nowrap;
  position: relative;
}
.billing_info_header {
  padding: 10px 0px;
  text-align: center;
  width: 100%;
}
.recurly button.submit {
  width: 100%;
}

/* teamsizedialog.js, confirmationdialog.js */

.change-team-dialog, .confirm-dialog {
  display: flex;
  flex-flow: column nowrap;
  padding: 20px;
}
.change-team-dialog-header, .confirm-dialog-header {
  font-size: 16px;
  font-weight: bold;
  padding-bottom: 20px;
}
.change-team-input-container {
  padding-bottom: 30px;
}
.change-team-input-span {
  font-size: 14px;
  font-weight: bold;
  padding-right: 10px;
}
.change-team-input {
  font-size: 14px !important; /* override jquery ui styling */
  width: 55%;
}
.change-team-message-header {
  font-size: 14px;
  font-weight: bold;
  padding-bottom: 10px;
}

.change-team-message-header.error {
  font-size: 14px;
  color: red;
  font-weight: normal;
  padding-bottom: 10px;
}

.change-team-message, .confirm-dialog-message {
  font-size: 14px;
  font-weight: normal;
  line-height: 1.5;
  padding-bottom: 30px;
}
.change-team-message > a {
  color: #1A73E8;
}
.change-team-button-footer, .confirm-dialog-button-footer {
  align-self: flex-end;
}
.confirm-size, .update-size, .confirm-dialog-submit {
  background: #1A73E8;
  border: none;
  border-radius: 4px;
  color: #FFFFFF;
  font-size: 14px !important; /* override jquery ui styling */
  font-weight: bold;
  margin-right: 10px;
  padding: 7px 10px;
  cursor: pointer;
}
.confirm-size:hover, .update-size:hover, .confirm-dialog-submit:hover {
  background: #297BE6;
  box-shadow: 0px 1px 3px 0px rgba(26, 115, 232, 0.7);
}
.confirm-size:active, .update-size:active, .confirm-dialog-submit:active {
  background: #1A73E8;
  box-shadow: 0px 3px 7px 0px rgba(26, 115, 232, 0.5);
}
.confirm-size:disabled, .update-size:disabled, .confirm-dialog-submit:disabled {
  background: #1A73E8;
  box-shadow: none;
  opacity: 0.5;
}
.close-size-dialog, .close-confirm-dialog {
  background: #FFFFFF;
  border: 1px solid #DADADA;
  border-radius: 4px;
  font-size: 14px !important; /* override jquery ui styling */
  font-weight: bold;
  margin-right: 10px;
  padding: 7px 15px;
  cursor: pointer;
}
.close-size-dialog:hover, .close-confirm-dialog:hover {
  background: #F2F2F2;
  border: 1px solid #C9C9C9;
}
.close-size-dialog:active, .close-confirm-dialog:active {
  background: #F2F2F2;
  border: 1px solid #C9C9C9;
  box-shadow: 0px 3px 7px 0px rgba(177, 177, 177, 0.5);
}

/* modalconfirmation.js */

.modal-confirmation {
    padding: 30px;
    border-radius: 3px;
}

.modal-confirmation > .ui-dialog-titlebar {
    display: none;
}

.modal-confirmation > .ui-dialog-content {
    font-size: 16px;
    font-weight: bold;
    color: #444444;
    padding: 0;
}

.modal-confirmation > .ui-dialog-buttonpane {
    border-width: 0;
    padding: 0;
    margin-top: 30px;
}

.modal-confirmation > .ui-dialog-buttonpane > .ui-dialog-buttonset > .yes {
    color: #FFFFFF;
    background: #1A73E8;
    border-radius: 4px;
    border: 0;
    height: 34px;
    padding: 0 20px;
}

.modal-confirmation > .ui-dialog-buttonpane > .ui-dialog-buttonset > .yes:hover {
    background: #297BE6;
    box-shadow: 0 1px 3px 0 rgba(26,115,232,0.7);
}

.modal-confirmation > .ui-dialog-buttonpane > .ui-dialog-buttonset > .yes:active {
    background: #1A73E8;
    box-shadow: 0 3px 7px 0 rgba(26,115,232,0.5);
}

.modal-confirmation > .ui-dialog-buttonpane > .ui-dialog-buttonset > .yes:disabled {
    opacity: 0.5;
    pointer-events: none;
}

.modal-confirmation > .ui-dialog-buttonpane > .ui-dialog-buttonset > .no {
    color: #444444;
    background: #FFFFFF;
    border-radius: 4px;
    border: 1px solid #DADADA;
    height: 34px;
    padding: 0 20px;
}

.modal-confirmation > .ui-dialog-buttonpane > .ui-dialog-buttonset > .no:hover {
    background: #F2F2F2;
    border: 1px solid #C9C9C9;
}

.modal-confirmation > .ui-dialog-buttonpane > .ui-dialog-buttonset > .no:active {
    background: #F2F2F2;
    border: 1px solid #C9C9C9;
    box-shadow: 0 3px 7px 0 rgba(117,117,117,0.5);
}

.modal-confirmation > .ui-dialog-content > div > .notification > h1 {
  font-size: 14px;
  font-weight: normal;
  color: red;
  padding-top: 10px;
  padding-bottom:10px;
}

.modal-confirmation > .ui-dialog-content > div > .notification > .actions > .notification-btn {
  border: 0px;
  padding: 0px;
  text-decoration: underline;
  font-size: 14px;
  color: #1A73E8;
}

/* addusersdialog.js */

.add-user-dialog {
  display: flex;
  flex-flow: column nowrap;
  padding: 20px;
}
.add-user-header {
  font-size: 16px;
  font-weight: bold;
  padding-bottom: 20px;
}
.add-user-seats {
  font-size: 14px;
  padding-bottom: 20px;
}
.add-user-subheader {
  font-size: 14px;
  font-weight: bold;
  padding-bottom: 10px;
}
.add-user-separate-info {
  font-size: 12px;
  font-style: italic;
  padding-bottom: 10px;
}
.add-user-input-container {
  height: 175px;
}
.add-user-input {
  resize: none;
  height: 100%;
  max-height: 100%;
  width: 96%;
  max-width: 100%;
}
/* Specific to the groupsetup page in Firefox */
@-moz-document url-prefix() {
    #newUserEntry {
        max-height: 200px !important;
    }
}
.add-user-error-display > div > .notification {
  margin: 10px 0px;
}
.add-user-error-display > div > .notification > .message {
  color: #D03A26;
  font-size: 14px;
  font-weight: normal;
  margin: 5px 0px;
}
.add-user-error-display > div > .notification > .actions > button {
  background: none;
  border: none;
  border-bottom: 1px solid #327DD7;
  color: #327DD7;
  cursor: pointer;
  font: inherit;
  font-size: 14px;
  padding: 0px;
}
.add-user-button-footer {
  align-self: flex-end;
  margin-top: 35px;
}
.add-user-submit {
  background: #1A73E8;
  border: none;
  border-radius: 4px;
  color: #FFFFFF;
  font-size: 14px !important; /* override jquery ui styling */
  font-weight: bold;
  margin-right: 10px;
  padding: 7px 10px;
  cursor: pointer;
}
.add-user-submit:hover {
  background: #297BE6;
  box-shadow: 0px 1px 3px 0px rgba(26, 115, 232, 0.7);
}
.add-user-submit:disabled {
  background: #1A73E8;
  box-shadow: none;
  opacity: 0.5;
}
.add-user-close-dialog {
  background: #fafafa;
  border: 1px solid #ccc;
  border-radius: 4px;
  font-size: 14px !important; /* override jquery ui styling */
  font-weight: bold;
  margin-right: 10px;
  padding: 7px 15px;
  cursor: pointer;
}

.team-administration > .list > .operations > .notification-bar > .notification > .message {
  font-size: 14px;
  font-weight: normal;
  margin: 10px;
  color: green;
}

.team-members > .list > .operations > .notification-bar > .notification > .message {
  font-size: 14px;
  font-weight: normal;
  margin: 10px;
  color: green;
}

.team-administration .operations button {
  background: white;
}

.team-administration > .list > .operations > .notification-bar.error > .notification > .message {
  color: red;
}

/* manage-page-top-menu.html */
.top-menu {
  height: var(--top-menu-height);
  background: #FFFFFF;
  box-shadow: 0px 2px 8px rgba(0, 0, 0, 0.12);
  position: sticky;
  z-index: 99;
  padding-inline: 1.5rem;
  padding-block: 1.25rem;
  display: flex;
  align-items: center;
  gap: 0.5rem;
  font-weight: 500;
  font-size: 0.875rem;
  line-height: calc(24 / 14);
  color: var(--gray-900);
  grid-column: 1 / -1;
  position: sticky;
  top: 0;
  left: 0;
  right: 0;
}

.top-menu :first-child {
  margin-inline-end: auto;
}

/* /manage#boomerang */
#returnables,
#sendables,
#responseTrackings,
#sendTrackings {
    width: calc(100% + 132px);
    table-layout: fixed;
}
#recurrings {
    width: calc(100%);
    table-layout: fixed;
}
.scheduled-time-box {
    min-width: 230px;
    width: 230px;
    max-width: 230px;
}
.emailTableTitle {
    display: inline-block;
    font-size: 14px;
    line-height: 30px;
    color: #444444;
    font-weight: bold;
    margin-bottom: 10px;
}
.emailTable {
  border-collapse: collapse;
}
.boomerang-recipients {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.emailSubject {
  overflow: hidden;
  word-wrap: break-word;
}
.scheduledTime {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.emailTableRow {
  background: #F4F4F4;
  border: none;
  border-bottom: 1px solid #EAEAEA;
  font-size: 14px;
  color: #444444;
  vertical-align: top;
  cursor: pointer;
}
.emailRowHover {
    background: #EAEAEA;
}
.emailTableRow td:first-child {
  background-image: url("https://meet.boomerangapp.com/site_media/img/manage/Checkbox_Unselected.svg");
  background-repeat: no-repeat;
  background-position: 16px 9px;
}
.emailTableRow.ui-selected {
    background: #C2DBFF;
}
.emailTableRow.ui-selected td:first-child {
    background-image: url("https://meet.boomerangapp.com/site_media/img/manage/Checkbox_Selected.svg");
    background-repeat: no-repeat;
    background-position: 16px 9px;
}
.emailTableHeader > th {
    color: #444;
    font-size: 14px;
    text-align: left;
    line-height: 30px;
    padding: 0 0 10px 20px;
}
.emailTableHeader > th > a.actionLink {
    line-height: 18px;
    font-weight: normal;
    margin-right: 14px;
}
.emailTableHeader > th:first-child {
    padding-left: 50px;
}
.emailTableRow > td {
    padding: 1px 20px;
}
.emailTableRow > td:first-child {
    padding-left: 50px;
}
.emailNewTabIcon {
    padding-left: 7px;
    opacity: 0.5;
}
.emailNewTabIcon:hover {
    opacity: 1.0;
}
.rescheduleMessageLink::before,
.rescheduleRecurringLink::before {
    background: url("https://meet.boomerangapp.com/site_media/img/manage/Reschedule.svg") no-repeat 0 0;
    background-size: 12px 11px;
    height: 12px;
    width: 11px;
    content: "";
    top: 1px;
    padding-right: 8px;
    position: relative;
    display: inline-block;
}
.returnNowLink::before {
    background: url("https://meet.boomerangapp.com/site_media/img/manage/Return_Now.svg") no-repeat 0 0;
    background-size: 12px 11px;
    height: 12px;
    width: 11px;
    content: "";
    top: 1px;
    padding-right: 8px;
    position: relative;
    display: inline-block;
}
.sendNowLink::before {
    background: url("https://meet.boomerangapp.com/site_media/img/manage/Send_Now.svg") no-repeat 0 0;
    background-size: 18px 9px;
    height: 9px;
    width: 18px;
    content: "";
    padding-right: 8px;
    position: relative;
    display: inline-block;
}
.cancelReturnLink::before,
.cancelRecurringLink::before,
.cancelSendLink::before {
    background: url("https://meet.boomerangapp.com/site_media/img/manage/Do_Not_Return.svg") no-repeat 0 0;
    background-size: 12px 12px;
    height: 12px;
    width: 12px;
    content: "";
    top: 1px;
    padding-right: 8px;
    position: relative;
    display: inline-block;
}
.editSendLink::before {
    background: url("https://meet.boomerangapp.com/site_media/img/manage/Edit.svg") no-repeat 0 0;
    background-size: 12px 12px;
    height: 12px;
    width: 12px;
    content: "";
    top: 1px;
    padding-right: 8px;
    position: relative;
    display: inline-block;
}
/* recurring */
.recurringRowTop {
    height: 76px;
}
#recurrings .emailTableRow,
.recurringRowTop.emailRowHover,
.recurringRowTop.ui-selected {
    background-position: 16px 12px;
}
.recurring-recipients,
.recurring-subject {
    position: relative;
    vertical-align: top;
}
#recurringsHeader > .recurring-recipients,
#recurringsHeader > .recurring-subject {
    top: 0;
}
.recurring-subject {
    min-width: 120px;
}
.recurring-recipients,
.recurring-subject,
.recurring-details {
    line-height: 22px;
    padding-top: 8px !important;
    padding-bottom: 8px !important;
}

/* reschedule message dialog (list view) */
.b4g-manage-reschedule-dialog {
    padding-top: 12px;
    padding-bottom: 12px;
}
#manage-title-bar {
    /* font-family: Helvetica, Arial, sans-serif; */
    font-weight: bold;
    font-size: 16px;
    color: #444444;
}
#manage-dialog {
    font-size: 14px;
}
#manage-dialog > .manage-originally-scheduled-container {
    padding-top: 16px;
}
#manage-dialog > .manage-originally-scheduled-container > .manage-originally-scheduled {
    font-weight: bold;
}
#manage-dialog > .manage-dialog-example {
    font-size: 12px;
    font-style: italic;
    color: #666;
    padding-top: 13px;
}
#manage-dialog .b4g-date-row {
    padding: 4px 0px;
}
#manage-dialog .b4g-date-row input {
    width: 310px;
    padding: 4px;
}
#manage-dialog .b4g-date-row .ui-datepicker-trigger {
    position: relative;
    left: -25px;
    top: 2px;
}
#manage-dialog #b4g-date-preview {
    color: #327a01;
}
#manage-dialog #reschedule-buttons-flex-container {
    display: flex;
}
#manage-dialog #reschedule-buttons-alignment-container {
    margin-left: auto;
}
#manage-dialog #confirm_reschedule, #manage-dialog #cancel_reschedule {
    font-family: Arial;
    font-weight: bold;
}
#manage-dialog #cancel_reschedule {
    margin-left: 8px;
}

/* notification bar */
#notification-bar,
#confirmationBox {
  background: #FFEEBD;
  /* height: 44px; */
}
#confirmationBox > #confirmationTextContainer {
  display: flex;
  flex-flow: row nowrap;
  justify-content: center;
}
#notification-bar > .notification {
  display: flex;
  flex-flow: row nowrap;
  justify-content: center;
  padding: 10px;
}
#notification-bar > .notification > .message,
#confirmationBox > #confirmationTextContainer > #confirmationText {
  font-size: 14px;
  font-weight: normal;
  font-family: Arial;
  margin-top: auto;
  margin-bottom: auto;
}
#notification-bar > .notification.low-credits > .message {
  margin-left: 0;
}
#notification-bar > .notification > .actions > .notification-btn {
  margin: 0px 5px;
  /* font-family: Helvetica, Arial, sans-serif; */
  background: #FFFFFF;
  border: 1px solid #DADADA;
  border-radius: 4px;
  padding: 2px 10px;
  cursor: pointer;
}
#notification-bar > .notification > .actions > .notification-btn:hover {
  background: #F2F2F2;
  border: #C9C9C9;
  padding: 3px 11px; /* offset for removing the border on hover */
}
#notification-bar > .notification > .actions > .notification-btn:active {
  background: #F2F2F2;
  border: 1px solid #C9C9C9;
  box-shadow: 0px 2px 4px 0px rgba(177, 177, 177, 0.50);
  padding: 2px 10px; /* offset for removing the border on hover */
}
#notification-bar > .notification > .actions > .notification-see-invoices {
  opacity: 0.7;
}
#notification-bar > .notification > .actions > .invite-contacts {
  background-color: #1A73E8;
  color: white;
  font-weight: bold;
}
#notification-bar > .notification > .actions > .invite-contacts:hover {
  background-color: #1A73E8;
}
#notification-bar > .notification > .actions > .invite-contacts:active {
  background-color: #1A73E8;
}
/* Confirmation bar with tweet button */
.subscription-confirmation-with-tweet-btn button.notification-btn {
    background: #1A73E8 !important;
    color: white;
}

/* tracked messages */
.tracking-title {
    display: inline-block;
    font-size: 14px;
    color: #444;
    margin-top: 35px;
}

.tracked-msg-note {
    padding-left: 30px;
}

#recurring_dialog {
  color: #444;
  padding: 0px;
}

#recurring_dialog #interval {
  padding-right: 10px;
}

#recurring_dialog #days_of_week label {
  vertical-align: middle;
}
#recurring_dialog .day_cb{
  vertical-align: middle;
}

#recurring_dialog .recurring_end_choices #radio_num_occurences,
#recurring_dialog .recurring_end_choices #radio_end_date,
#recurring_dialog .recurring_end_choices #radio_no_end {
  vertical-align: middle;
}

#recurring_dialog .recurring_end_choices label {
  vertical-align: middle;
}

.recurring_field {
  padding: 10px 0px 10px 5px;
}

.recurring-dialog-title {
  font-weight: bold;
  font-size: 16px;
  margin-bottom: 25px;
}

.list-view-reschedule.dialogdiv {
  padding: 30px 30px 10px 30px;
}

.empty-boomerangs .boomerangs-ftue,
.empty-send-laters .send-laters-ftue,
.empty-recurrings .recurrings-ftue{
  padding-top: 25px;
  padding-bottom: 25px;
  margin: 0px 25px;
  background: #f4f4f4;
  border: 1px solid #eaeaea;
}

.empty-boomerangs .boomerangs-ftue-text,
.empty-send-laters .send-laters-ftue-text,
.empty-recurrings .recurrings-ftue-text{
  margin: 0px 25px;
}

.empty-tracking .tracking-ftue{
  padding-top: 25px;
  padding-bottom: 25px;
  margin: 0px 25px;
  background: #f4f4f4;
  border: 1px solid #eaeaea;
}

.empty-tracking .tracking-ftue-text{
  margin: 0px 25px;
}

/****************************
 * Stats manage page
 ****************************/

.stats-close, .stats-opened, .stats-clicked,
.stats-state-open .stats-details
{ display: none; }

.stats-state-open .stats-opened, .stats-state-open .stats-clicked { display: block; }
.stats-state-open .stats-close { display: inline; }

.stats-details::after,
.stats-close::after,
.stats-label-unreplied::before,
.stats-label-read::before,
.stats-label-unread::before,
.stats-label-clicked::before,
.stats-label-unclicked::before {
  background: url(../tracking-sprite-sheet.png) no-repeat;
  position: absolute;
  display: block;
  content: '';
  width: 16px;
  height: 16px;
  top: -1px;
  left: -20px;
}

.stats-details::after,
.stats-close::after {
  background: url(../baydin-sprite-sheet.png) no-repeat;
  left: auto;
  right: -17px
}

#view-tracking-tab table { width: 100%; table-layout: fixed; }
#view-tracking-tab th { color: #444; }
#view-tracking-tab input { margin: 1px; }

#tracking-tab .tracking-select-all input { margin: 0 3px 0 0; }

.tracking-top-controls { margin: 5px 0; margin-right: 10px; color: #00688C; }

.tracking-selection-controls {
  font-size: 14px;
  font-weight: bold;
  color: #444444;
}

.tracking-select-all {
  margin-left: 14px;
  color: #444;
  user-select: none;
  vertical-align: middle;
  cursor: pointer;
}
.tracking-select-all > input {
  position: relative;
  bottom: 1px;
  vertical-align: middle;
}
.tracking-archive-selection {
  font-weight: bold;
  color: #444;
  padding: 8px 17px 8px 18px;
  cursor: pointer;
}

.tracking-selection-controls a,
.tracking-selection-controls button,
.tracking-selection-controls label { color: black; font-size: 12px; }
.tracking-selection-controls .button {
  margin-top: 0px;
  -moz-box-sizing: content-box;
  box-sizing: content-box;
  user-select: none;
  -moz-user-select: none;
  -webkit-user-select: none;
}

.tracking-hidden-toggle {
  font-size: 12px;
  text-align: right;
  display: inline-block;
  padding: 5px 20px 5px 0;
  text-decoration: underline;
  position: relative;
}
.tracking-hidden-toggle a:hover { color: #444; }
.tracking-hide-hidden { display: none; }
.tracking-show-hidden::after { top: 1px; right: 8px; background-position: -68px 4px; }
.tracking-hide-hidden::after { top: 1px; right: 8px; background-position: -44px 5px; }

.tracking-select-everything-toggle { display: inline-block; padding: 5px 0; margin-left: 3px; }
.tracking-select-everything-toggle a { text-decoration: underline; color: #00688C; }
.tracking-select-everything, .tracking-select-nothing { display: none; }

.tracking-pagination-holder { margin: 5px 0; }
.tracking-pagination { float: right; }

.tracking-pagination > a,
.tracking-pagination > .current, 
.tracking-pagination > .current:hover 
.tracking-pagination > .current:active {
    display: inline-block;
    background-color: #FFFFFF;
    border: 1px solid #DADADA;
    border-radius: 4px;
    padding: 5px 15px;
    text-decoration: none;
    font-size: 14px;
    outline: none;
    box-shadow: none;
    color: black!important;
}

.tracking-pagination > a:hover {
    background-color: #F2F2F2;
    border-color: #C9C9C9;
    color: black!important;
}

.tracking-pagination > a:active {
    background-color: #F2F2F2;
    border-color: #C9C9C9;
    box-shadow: 0 3px 7px 0 rgba(177, 177, 177, 0.5) !important;
    color: black!important;
}

.tracking-hidden-holder {
  position: relative;
  top: 38px;
  margin-top: -24px;
  float: right;
  margin-right: -7px;
}

.stats-ishidden,
.stats-ishidden .stats-header-label { font-style: italic; color: #777; }
.stats-tracking-data .stats-ishidden { background: #fafafa; }

.stats-tracking-data { padding: 0; border-bottom: 1px solid #EAEAEA; margin: 5px 0 15px 0; }
.stats-tracking-data li { background: #f4f4f4; border-bottom: 1px solid #EAEAEA; display: block; padding: 3px 5px 3px 5px; }
.stats-tracking-data .stats-state-open { background: #fafafa; }

.stats-clicked-header, .stats-read-header { text-align: left; left: -20px;}
.stats-label-unreplied, .stats-label-read, .stats-label-unread, .stats-label-clicked, .stats-label-unclicked,
.stats-details, .stats-close
{ position: relative; margin-left: 20px; }

.stats-label-unreplied::before { background-position: -156px center;}
.stats-label-read::before { background-position: -68px center; }
.stats-label-unread::before { background-position: -38px center; }
.stats-label-clicked::before { background-position: -97px center; }
.stats-label-unclicked::before { background-position: -127px center; }

.stats-details::after { background-position: -70px -0px; }
.stats-details:hover::after { background-position: -70px -18px; }
.stats-close::after { background-position: -45px 0px; }
.stats-close:hover::after { background-position: -45px -18px; }

.stats-header-clickable { cursor: pointer; }
.stats-header-label { color: #333; }
#stats-header-li { border:none; border-bottom: solid 1px #eaeaea; background: white; padding: 3px 5px 3px 5px;}

.stats-header-checkbox { width: 31px; }
.stats-header-to { white-space: nowrap; width: 180px; overflow: hidden; text-overflow: ellipsis; padding-left: 14px; }
.stats-header-sent { width: 175px; }
.stats-header-subject { text-overflow: ellipsis; overflow: hidden; white-space: nowrap; width: 300px;}
.stats-header-read { width: 75px; }
.stats-header-click { width: 75px; }
.stats-header-detail { width: 85px; }

.stats-header-checkbox label { display: block; margin-left: 25px; }

.stats-opened { margin: 5px 0 6px 24%; }
.stats-clicked { border-top: 1px solid #D0D0D0; padding-top: 5px; margin-left: 24%; }

.stats-clicked-header,
.stats-read-header,
.stats-time-title { font-weight: bold; margin-right: 5px; color: #777; font-size: 10px; text-transform: uppercase; }
.stats-time { font-weight: normal; }

.stats-header-subject a,
.stats-clicked-url a { color: #1C94C4; }
.stats-header-detail a { color: #777; }

.stats-clicked-total { width: 25px; color: #1C850A; font-weight: bold; }
.stats-clicked-url { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.stats-clicked-first { width: 24.5%; }
.stats-clicked-last { width: 33.5%; }

.tracking-pagination .current.pending { color: transparent; background: #999 url(../img/ajax-loader-small.gif) no-repeat center center; }

.stats-tracking-data-holder {
  margin: 10px 10px 20px 10px;
  min-width: 960px;
}

li.stats-state-selected {
  background: #C2DBFF!important;
}
#plan-details-tab, #team-management-tab {
  cursor: pointer;
}

#team-management { 
  margin-bottom: 100px;
}

.team-members .operations button {
  background: white
}

.privilege-select-menu ul{
  overflow: hidden!important;
}

/* Premium Support Tab */
.premium_support_content {
    color: #444444;
}
.premium-support-header {
  font-size: 1.5rem;
  font-weight: 600;
  color: var(--gray-900);
}
.settings-images-container {
    display: flex;
    flex-flow: row nowrap;
    min-width: 890px;
}
.settings-images-container .support-image-settings-dialog {
    height: 395px;
    width: 350px;
}
.settings-images-container .support-image-settings-manage {
    height: 395px;
    width: 530px;
}
.support-image-dropdown {
    height: 300px;
    width: 260px;
}
.support-image-manage-header {
    height: 372px;
    width: 250px;
}

.info-box {
  display: flex;
  flex-flow: row nowrap;
  justify-content: center;
  padding: 10px;
  font-size: 14px;
  font-weight: normal;
  font-family: Arial;
  background: #FFEEBD;
}

.b4g-bookable-new {
    background: #1485FF;
    border-radius: 3px;
    color: #FFF;
    border: 1px solid transparent;
    font-size: 8px;
    padding: 2px 4px 2px 4px;
    margin: 1px 3px;
    position: relative;
    bottom: 2px;
    font-weight: bold;
}

.upper {
  text-transform: uppercase;
  font-weight: 700;
}

iframe[src*="player.vimeo.com"] {
  aspect-ratio: 16 / 9;
  height: 25vw;
  max-width: 100%;
}


/* Styles for org pause paywall page */
h3.highlight {
  font-size: 1rem;
  font-weight: 600;
  color: var(--gray-900);
}

p.info a.highlight {
  color: #0072c6;
  text-decoration: none;
}
p.info a.highlight:hover,
p.info a.highlight:focus {
  color: #00467a;
  text-decoration: underline;
}
p.info a.highlight:focus {
  outline: thin dotted;
  outline: 5px auto -webkit-focus-ring-color;
  outline-offset: -2px;
}
/* End styles for org pause paywall page */