@import url('https://fonts.googleapis.com/css2?family=Inter:wght@300;700&display=swap');

/*************/
/* Site-wide */
/*************/
html {
    scroll-behavior: smooth;
}

body {
    font-family: 'Inter', sans-serif;
}

.wrap {
    max-width: 894px;
    padding-top: 56px;
    margin-right: auto;
    margin-left: auto;
    display: flex;
    min-height: 100vh;
    flex-direction: column;
    align-items: center;
}

#main {
    width: 100%;
    display: flex;
    flex-direction: column;
    flex: 1;
}

.navbar {
    margin-right: auto;
    margin-left: auto;
    padding: .5rem;
    background: #404B4E;
}

.navbar-dark .navbar-nav .nav-link.active {
    display: flex;
    align-items: center;
    color: #fff;
    font-weight: 600;
}

.menu-icon {
    display: none;
    width: 24px;
    height: 24px;
    fill: #f18f01;
    margin-right: 12px;
}

.dropdown-menu {
    background: #404B4E;
    border: none;
}

.navbar-dark .navbar-nav .nav-link {
    color: #949494;
}

/*.dropdown-menu[data-bs-popper] {*/
/*    left: -8px;*/
/*    margin-top: 0;*/
/*}*/

.dropstart .dropdown-menu {
    top: auto;
    right: 100%;
    left: -120px;
}

.dropdown-item {
    color: #949494;
}

.dropdown-item:hover {
    color: rgba(255,255,255,.75);
    background: #404B4E;
}

.dropdown-item.active, .dropdown-item:active {
    background: #404B4E;
    color: #fff;
    font-weight: 600;
}

.navbar-brand {
    margin: 0 .25rem 0 0;
}

.beta-badge {
    font-size: .5rem;
    margin-right: auto!important;
    margin-bottom: auto!important;
    cursor: default;
}

.header-auth {
    display: flex;
    flex: 1;
    justify-content: flex-start;
}

.signup-top {
    margin-right: 0px;
}

#profile-pic {
    width: 35px;
    height: 35px;
    border-radius: 50%;
}

.welcome-text {
    display: none;
    padding: .5rem 0 .5rem 1rem;
}

#logout-link {
    color: #fff;
}

#logout-link:hover {
    color: rgba(255,255,255,.75);
}

.bcrumbs {
    display: flex;
    align-items: center;
    --bs-breadcrumb-divider: '>';
    height: 2rem;
    padding-left: 13px;
}

#mttb {
    display: none;
}

.guide-span {
    display: none;
}

#footer {
    display: flex;
    flex-direction: column;
    align-items: stretch;
    position: relative;
    width: calc(100vw - var(--scrollbar-width) + 1px);
    background-color: #2C3538;
    color: #798A8F;
    height: 335px;
    padding: 1rem 1.5rem;
}

#footer-logo, #footer-privacy-1, #footer-privacy-2 {
    width: 100%;
    text-align: center;
    font-size: 0.75rem;
    line-height: 1.125rem;
}


#footer-privacy-1 {
    display: none;
}

#footer-privacy-2 {
    display: inline-block;
}

#footer-privacy-1 span, #footer-privacy-2 span {
    color: #455053;
}

#footer-privacy-1 a, #footer-privacy-2 a {
    color: #455053;
}

#footer-links {
    display: flex;
    flex-direction: row;
    justify-content: center;
    margin-top: 1rem;
    margin-left: 0;
}

#footer-links-left , #footer-links-right {
    width: fit-content;
    color: #798A8F;
    font-size: 1rem;
    line-height: 1.5rem;
}

#footer-links-left a, #footer-links-right a {
    color: #798A8F;
}

#footer-links-left {
    margin-right: 2.5rem;
}

#footer-social-icons {
    flex-grow: 1;
    display: flex;
    flex-direction: row-reverse;
    justify-content: center;
    margin: 1.5rem 0 1rem -1.5rem;
}

#footer-social-icons div {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 54px;
    height: 54px;
    background-color: #455053;
    border-radius: 27px;
}

.scroll-to-top {
    color: white;
    padding: 0.2rem 0.2rem 0.2rem 0.4rem;
    position: fixed;
    /*top: -90px;*/
    right: 20px;
    bottom: 20px;
    z-index: 1049;
    opacity: 0;
    transform: translateY(100px);
    transition: all 0.5s ease;
}

.showBtn {
    opacity: 1;
    transform: translateY(0);
}

.btn.focus, .btn:focus {
    -webkit-box-shadow: none!important;
    box-shadow: none!important;
}

.menu-toggler-shadow, .menu-toggler-shadow:focus {
    text-decoration: none!important;
    outline: 5px!important;
    box-shadow: 0 0 0 0.25rem!important;
}

hr {
    height: 0;
    border: 0;
    border-top: 1px solid #a2a2a2;
}

.rounded-10 {
    border-radius: 1rem!important;
}

/* Callouts */
.bs-callout {
    padding: 1.25rem 1.25rem 0 1.25rem;
    margin: 0 12px 12px 12px;
    border: 1px solid #dfdfdf;
    border-left-width: .25rem;
    border-radius: .25rem;
}

.bs-callout-danger {
    border-left-color: #d9534f;
}

.bs-callout-warning {
    border-left-color: #f0ad4e;
}

.bs-callout-info {
    border-left-color: #5bc0de;
}

.bs-callout-success {
    border-left-color: #198754;
}

.bs-callout h4 {
    margin-top: 0;
    margin-bottom: 5px;
}

.bs-callout-danger h4 {
    color: #d9534f;
}

.bs-callout-warning h4 {
    color: #f0ad4e;
}

.bs-callout-info h4 {
    color: #5bc0de;
}

.bs-callout-success h4 {
    color: #198754;
}

/* Modals*/

.modal-dialog {
    width: 282px;
    margin: 0 auto;
}

.modal-content {
    border-radius: 6px;
    border: none;
}

.modal-header {
    justify-content: center;
    padding: 1.125rem;
    border-radius: 6px 6px 0 0;
    border-bottom: none;
}

.modal-title {
    line-height: 1;
    font-size: 1.125rem;
}

.modal-header .btn-close {
    position: absolute;
    top: 12px;
    right: 10px;
    padding: .5rem .5rem;
    background-size: .75em;
    margin: 0;
    filter: invert(1);
    opacity: 1;
}

.modal-body {
    display: flex;
    flex-direction: column;
    align-items: center;
    padding: 0 1.75rem;
}

.modal-body p {
    padding: 1rem 0;
    margin: 0;
}

.modal-subheader {
    display: block;
    line-height: 1;
    color: #000000;
    margin: 1.125rem 0 1rem 0;
}

.social-logins {
    display: grid;
    grid-template-columns: 40px 40px;
    column-gap: 24px;
}

.social-logins a {
    display: block;
    height: 40px;
    width: 40px;
    text-decoration: none;
}

.with-email {
    font-size: 0.875rem;
    color: #6C757D;
    margin: 1.5rem 0 1.125rem;
}

.with-email u {
    text-decoration-style: dashed;
}

.with-email a {
    text-decoration: none;
    color: #6C757D;
}

#login-with-email, #signup-with-email {
    padding-top: 4px;
}

.modal-form {
    width: 100%;
    width: -moz-available;          /* WebKit-based browsers will ignore this. */
    width: -webkit-fill-available;  /* Mozilla-based browsers will ignore this. */
    width: fill-available;
}

.form-control {
    border: 1px solid #949494;
}

.forgot-password {
    display: block;
    font-size: 0.75rem;
    color: #6C757D;
    text-align: right;
}

#log-in, #sign-up, #verify-top ,#password, #changeemail {
    margin: 1rem 0 1rem 0;
    width: 100%!important;
}

.modal {
    z-index: 99999;
}

.modal-backdrop {
    z-index: 95000;
}

.modal-bottom {
    font-size: 0.8125rem;
    margin-bottom: 1rem;
}

/*.modal-bottom a {*/
/*    text-decoration: underline;*/
/*    color: #*/
/*}*/

.modal a {
    cursor: pointer;
}

.btn-xs {
    padding: 0.25rem 0.4rem;
    font-size: 0.75rem;
    line-height: 1.5;
    border-radius: 0.2rem;
}

/************/
/* Homepage */
/************/



/*************/
/* Make-wide */
/*************/
#monogram-div {
    flex: 0 0 auto;
    width: 100%;
}

.maker-content {
    padding: 1rem;
}

.text-flash-fix {
    min-height: 90vh;
}

#fixed {
    position: sticky;
    /*padding-top: 8px;*/
    top: 56px;
    z-index: 1020;
}

#frame-panel, #font-panel, #download-panel {
    display: flex;
    flex-direction: row;
    justify-content: center;
    align-items: center;
    font-weight: 600;
    padding: .25rem .5rem;
    font-size: .875rem;
    border-radius: .2rem;
}

#pills-tab {
    font-weight: 600;
}

.tab-pane {
    text-align: center;
}

.tab-pane-inner {
    display: grid;
    gap: 8px;
    padding: 0 5px 5px 5px;
    grid-template-columns: repeat(3, 1fr);
}

@media (min-width: 376px) {
    .tab-pane-inner {
        grid-template-columns: repeat(4, 1fr);
    }
}

@media (min-width: 476px) {
    .tab-pane-inner {
        grid-template-columns: repeat(5, 1fr);
    }
}

@media (min-width: 568px) {
    .tab-pane-inner {
        grid-template-columns: repeat(6, 1fr);
    }
}

@media (min-width: 692px) {
    .tab-pane-inner {
        grid-template-columns: repeat(7, 1fr);
    }
}

@media (min-width: 820px) {
    .tab-pane-inner {
        grid-template-columns: repeat(8, 1fr);
    }
}

.font-list-panel, .frame-list-panel {
    position: relative;
    width: 100%;
    height: 0;
    padding-top: 100%; /* 1:1 Aspect Ratio */
    overflow: hidden;
    outline: 1px solid #ddd;
    opacity: 0.8;
    cursor: pointer;
    filter: brightness(90%);
    background-repeat: no-repeat;
    background-size: 1000% 900% !important; /* Scale the sprite to 10x */
    margin: 0;
}

.frame-list-panel {
    background-size: 1000% 7800% !important; /* Scale the sprite to 10x */
}

.font-list-panel::before, .frame-list-panel::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-image: inherit; /* Inherit background-image */
    background-repeat: inherit; /* Inherit repeat */
    background-size: inherit; /* Inherit size */
    background-position: inherit;
}

.frame-list-panel.basic-frame {
    position: relative; /* added */
    overflow: visible !important; /* added */
}
.frame-list-panel.basic-frame .native-badge {
    position: absolute; /* positioned bottom-right */
    bottom: 0; /* no margins */
    right: 0; /* no margins */
    display: inline-block; /* added */
    z-index: 10; /* added */
    border-radius: .25rem 0 0 0;
}


/**************/
/* Font-panel */
/**************/
.progress-wrapper {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    height: 70vh;
    width: 100%;
}

.progress {
    width: 80%;
    height: 2rem;
}

.progress.active .progress-bar {
    -webkit-transition: none !important;
    transition: none !important;
}

#font-previewer-wrapper {
    min-height: 200px;
}

#font-previewer-box {
    display: flex;
    max-height: 220px;
    position: absolute;
}

#font-previewer {
    width: 200px;
    height: 200px;
    position: relative;
    float: left;
}

#p_left, #p_center, #p_right {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
}

#p_left {
    background: no-repeat 0 0;
}

#p_center {
    background: no-repeat -200px 0;
}

#p_right {
    background: no-repeat -400px 0;
}

#p_controls {
    position: relative;
    float: left;
    height: 200px;
}

.small-span, .small-dl-span {
    display: inline-block;
}

.large-span, .large-dl-span {
    display: none;
}

#monogram_input {
    color: #000000;
    text-transform: uppercase;
    width: 100px;
    height: 50px;
    font-size: 30px;
    padding: 5px 5px;
    box-sizing: border-box;
}

#change-spinner {
    display: none;
    margin-top: .75rem;
}

#home_monogram_input {
    width: 123px;
    height: 50px;
    font-size: 30px;
    padding: 6px;
    text-align: center;
    text-transform: uppercase;
    border-color: #585858;
}

#monogram-error {
    color:red;
}

.font-list-panel {
    -webkit-filter: brightness(90%) grayscale(100%);
    -moz-filter: brightness(90%) grayscale(100%);
    -o-filter: brightness(90%) grayscale(100%);
    -ms-filter: brightness(90%) grayscale(100%);
    filter: brightness(90%) grayscale(100%);
}

.font-selected {
    outline-color: #8db3a7;
    outline-width: 2px;
    opacity: 1;
    -webkit-filter: brightness(100%) grayscale(0%);
    -moz-filter: brightness(100%) grayscale(0%);
    -o-filter: brightness(100%) grayscale(0%);
    -ms-filter: brightness(100%) grayscale(0%);
    filter: brightness(100%) grayscale(0%);
}

[id^="font-panel-"]:hover {
    outline-color: #6abae0;
    outline-width: 2px;
    opacity: 1;
    -webkit-filter: brightness(100%) grayscale(0%);
    -moz-filter: brightness(100%) grayscale(0%);
    -o-filter: brightness(100%) grayscale(0%);
    -ms-filter: brightness(100%) grayscale(0%);
    filter: brightness(100%) grayscale(0%);
}

/***************/
/* Frame-panel */
/***************/
#frame-previewer-wrapper {
    min-height: 240px;
}

#frame-previewer-box {
    display: flex;
    height: 220px;
    margin-top: 8px;
    position: absolute;
}

#previewer, #previewer-span {
    width: 150px;
    height: 150px;
    display: flex;
}

#indentation-box {
    width: 150px;
    padding-top: 0.66rem;
    text-align: center;
}

#indentation_text {
    color: #1e2125;
    display: none;
}

#indentation-slider-row {
    width: 150px;
    justify-content: center;
    margin-top: 0.5rem;
}

#indentation-range {
    width: 90%;
}

#indentation-number {
    display: none;
}

#bottom-control-row {
    padding-left: 0.5rem;
}

/* COLORPICKER */
#color-box {
    flex-direction: column;
    padding-left: 0.5rem;
}

.font-color {
    margin-top: 0.5rem;
}

.frame-color {
    margin-top:1rem;
}

input[type="color"] {
    -webkit-appearance: none;
    width: 37px;
    border-radius: 5px;
}

input[type="color"]::-webkit-color-swatch-wrapper {
    padding: 0;
}

input[type="color"]::-webkit-color-swatch {
    border: none;
}

.f-long {
    display: none;
}

.frame-selected {
    outline-color: #f90;
    outline-width: 2px;
    opacity: 1;
    -webkit-filter: brightness(100%);
    -moz-filter: brightness(100%);
    -o-filter: brightness(100%);
    -ms-filter: brightness(100%);
    filter: brightness(100%);
}

[id^="frame-panel-"]:hover {
    outline-color: #ff7300;
    opacity: 1;
    -webkit-filter: brightness(100%);
    -moz-filter: brightness(100%);
    -o-filter: brightness(100%);
    -ms-filter: brightness(100%);
    filter: brightness(100%);
}

.native-badge {
    cursor: pointer;
    height: fit-content;
    padding-bottom: 6px;
    background-color: #ff9900;
}

/******************/
/* Download-panel */
/******************/
#download-page {
    display: flex;
    flex-direction: column;
    align-items: center;
    padding: 0 1rem;
}

.left-column, .right-column {
    display: flex;
    flex-direction: column;
}

.left-column {
    position: relative;
}

#download-page button {
    font-weight: 500;
    height: 2.5rem;
}

#download-page button#signup-button, #signup-button {
    font-weight: 600;
}


#download-previewer {
    height: 200px;
    width: 200px;
    border: 1px solid #e3e3e3;
    margin: 1.5rem 0 1rem;
}

.signup-alert {
    background: #FFF2F2;
    color: #000;
    border-radius: 6px;
    padding: 1rem;
}

.sa-title {
    font-weight: 600;
    font-size: 1.5rem;
}

.split-title {
    display: block;
}

.signup-alert p {
    margin: 0.5rem 0 0.5rem;
}

.instant-registration {
    display: none;
    color: #34A853;
}

.download-buttons-box {
    width: 100%;
    width: -moz-available;
    width: -webkit-fill-available;
    width: fill-available;
}

.dbb-title {
    display: block;
    font-weight: 600;
    font-size: 1.5rem;
    color: #34A853;
    margin-bottom: 0;
    width: max-content;
}

.buttons-box {
    display:grid;
    grid-template-columns: repeat(3, 1fr);
    column-gap: 13px;
}

#download-page .buttons-box button {
    justify-content: center;
    font-weight: 400;
    font-size: 1.25rem;
    padding: .25rem .75rem;
}

.buttons-box img {
    display: none;
}

#button-spinner {
    margin-right: .75rem;
}

#downloads-counter {
    display: block;
    margin: 1.25rem auto 1.25rem 0;
    color: #000;
    font-size: 1.25rem;
    line-height: 1;
    font-weight: 500;
    width: max-content;
}

#downloads-counter svg {
    color: rgba(89, 89, 89, 0.4);
    margin-bottom: 4px;
}

#download-extras {
    width:100%;
    margin-top: 1rem;
    padding: 0;
    /*background:yellow;*/
}

[id^="download-controls-"] {
    width: 100%;
    width: -moz-available;
    width: -webkit-fill-available;
    width: fill-available;
}

#download-controls-1, #reset-2 {
    display: none;
}

#download-controls-2, #reset-2 {
    display: inline-block;
}

#reset-2 {
    color: #fff;
    background-color: #b535dc;
    border-color: #8f1db2;
}

#reset-1, #share-1, #reset-2, #share-2 {
    font-weight: 500;
    width: 100%;
    width: -moz-available;          /* WebKit-based browsers will ignore this. */
    width: -webkit-fill-available;  /* Mozilla-based browsers will ignore this. */
    width: fill-available;
    margin: 0 0.5rem;
}

#learn-font {
    display: flex;
    flex-direction: row;
    background: #fff;
    border: 1px solid #DBDBDB;
    border-radius: 16px;
    /*margin-top: 2.5rem;*/
}

.learn-font-thumb {
    width: 100px;
    height: 100px;
    margin: 0 0.6rem 0 0.6rem;
    -webkit-filter: brightness(100%) grayscale(100%);
    -moz-filter: brightness(100%) grayscale(100%);
    -o-filter: brightness(100%) grayscale(100%);
    -ms-filter: brightness(100%) grayscale(100%);
    filter: brightness(100%) grayscale(100%);
}

.learn-font-text {
    flex: 1;
    padding-right: .8rem;
}

.learn-font-title {
    display: block;
    font-size: 1.25rem;
    font-weight: 400;
    line-height: 1;
    margin-bottom: 1rem;
}

.learn-font-p {
    font-size: 0.875rem;
    font-weight: 400;
    line-height: 1.3125rem;
    margin-bottom: 0.75rem;
}

.learn-font-a {
    font-size: 0.875rem;
    font-weight: 400;
    line-height: 1.3125rem;
    text-decoration: underline;
    color: #2B6DF5;
}

#formats-guide th {
    word-break: break-all;
    font-size: 0.7rem;
    color: #666666;
}

#formats-guide thead {
    border: none !important;
}

#formats-guide>:not(:last-child)>:last-child>* {
    border-bottom-color: #dee2e6;
}

.comm-use-title {
    display: block;
    margin: 2rem 0 .5rem 0;
    font-weight: 600;
    font-size: 1.125rem;
    line-height: 1.5rem;
}

.comm-use-p {
    font-size: 1rem;
    line-height: 1.5rem;
}

.comm-use-p a {
    text-decoration: underline;
    color: #2B6DF5;
}

.bi-arrow-counterclockwise {
    margin-top: 0;
}

.card {
    margin: 0 12px 0 12px;
}

.modal.show .modal-dialog {
    margin-top: 14vh;
}

.modal-share {
    width: 190px !important;
    min-width: 190px !important;
}

#share-modal-body {
    display: flex;
    flex-direction: column;
}

#share-image {
    text-align: center;
}

#share-buttons {
    margin-top: 1.5rem;
}

#share-buttons span {
    color: white;
}

#share-buttons .sw-title {
    display: block;
    margin-bottom: 0.5rem;
    text-align: center;
    color: #000;
}

.c-facebook {
    background: #4267B2;
}
.c-pinterest {
    background: #E60023;
    margin-top: 0.5rem;
}

.c-pinterest, .c-facebook {
    width: 150px;
    height: 40px;
    margin-left: 0;
}


/***********************/
/* Monogram Fonts Page */
/***********************/
.mf-wrap {
    background: #fff;
    /*background: -webkit-linear-gradient(to right, #f8f8f8,#fff);*/
    /*background: linear-gradient(to right, #f8f8f8,#fff);*/
}

#monogram-fonts {
    width: 100%;
    padding: 2vw;
    display: grid;
    grid-template-rows: repeat(1, 1fr);
    grid-template-columns: repeat(1, 1fr);
    grid-gap: 2vw;
}

#monogram-fonts a {
    text-align: center;
    display: flex;
    flex-direction: column;
    align-items: center;
    padding: .5rem;
    color: #212529;
    text-decoration: none;
    width: 100%;
    height: 100%;
}

#pills-tab {
    padding-bottom: 0.5rem;
}

#pills-tab .badge {
    display: none;
}

.font-tile {
    list-style-type: none;
    background-color: #fff;
    border-radius: .25rem;
    -moz-box-shadow: 0 0 3px #a5b1ba;
    -webkit-box-shadow: 0 0 3px #a5b1ba;
    box-shadow: 0 0 3px #a5b1ba;
}

.font-tile:hover {
    /*cursor: pointer;*/
    -moz-box-shadow: 0 0 6px #747D83;
    -webkit-box-shadow: 0 0 6px #747D83;
    box-shadow: 0 0 6px #747D83;
}

.font-thumb {
    width: 100px;
    height: 100px;
}


/*******/
/* FAQ */
/*******/
#faq-container {
    display: flex;
    flex-direction: column;
}

#faq-categories {
    min-width: fit-content;
    height: fit-content;
    margin: 0;
}

.list-group-item {
    padding: 0;
}

#faq-categories a {
    padding: .5rem 1rem;
    width: 100%;
}

#faq-categories a {
    color: #212529 !important;
    text-decoration: none;
    background-color: #fff;
}

#faq-categories .active a, .list-group-item.active {
    color: #fff !important;
    background-color: #00acf0;
    border-color: #00acf0;
}

#faq-categories .badge {
    background: #eaecec;
    color: #324148;
}

#faq-container .card-lg {
    margin: 0;
}

#faq-container .tab-pane {
    margin-right: 0;
}

.tab-content {
    padding-top: .5rem;
}

.accordion-button {
    font-weight: 400;
}

.accordion-button:focus {
    border-color: #dfdfdf !important;
}

.accordion-button:not(.collapsed) {
    color: #00acf0;
    font-weight: 500;
    background-color: #fff;
    border-bottom: none;
}

.accordion-body {
    padding: 0 1.25rem 1rem 1.25rem;
}

:focus {
    outline: 0 !important;
    box-shadow: 0 0 0 0 rgba(0, 0, 0, 0) !important;
}


/* Animated button */

.shiny {
    color: #fff;
    background-color: #00A8D6;
    border-color: #00A8D6;
    position: relative;
    overflow: hidden;
}

.shiny:hover {
    color: #fff;
    background-color: #028bb0;
    border-color: #028bb0;
}

/*.shiny:nth-child(1) { background: green; }*/

/**
 * The "shine" element
 */

.shiny:after {
    animation: shine 4s ease-in-out infinite;
    animation-fill-mode: backwards;
    content: "";
    position: absolute;
    top: 210%;
    left: 110%;
    width: 110%;
    height: 100%;
    opacity: 0;
    transform: rotate(30deg);
    background: rgba(255,255,255,.13);
    background: linear-gradient(to right,rgba(255,255,255,.3) 100%,rgba(255,255,255,.3) 92%,rgba(255,255,255,1) 77%,rgba(255,255,255,0.5) 0%);
}

/* Hover state - trigger effect */


/* Active state */

.shiny:active:after {
    opacity: 0;
}

@keyframes shine{
    10% {
        opacity: 1;
        top: -30%;
        left: -30%;
        transition-property: left, top, opacity;
        transition-duration: 1s, 1s, 0.3s;
        transition-timing-function: ease;
    }
    100% {
        opacity: 0;
        top: -30%;
        left: -30%;
        transition-property: left, top, opacity;
    }
}

/* new */

.mb-075 {
    margin-bottom: .75rem!important;
}

#top-banner {
    display: none;
    max-width: 344px;
    margin-top: 28px;
    margin-left: 50px;
}

#top-banner img {
    height: 60px;
}

.try-now {
    margin-left: 3px;
}

/* Accounts */
/* Header Credits */

#credits-progress {
    width: 100%;
    height: .5rem;
    background-color: #999999;
}

.credits-totals {
    display: inline-block;
}
.credits-number-long {
    display: inline-block;
}
.credits-number-short {
    display: none;
}
.credits-word {
    display: none;
}
.credits-icon {
    display: inline-block;
}

.credits-icon-green {
    color: #0d6efd;
}

.credits-icon-gold {
    color: #007600;
}

.credits-icon-red {
    color: #ff0000;
}

@media (min-width: 350px) {
    .credits-word {
        display: inline-block;
    }
    .credits-icon {
        display: none;
    }
}

/*@media (min-width: 375px) {*/
/*    .credits-number-short {*/
/*        display: none;*/
/*    }*/
/*    .credits-number-long {*/
/*        display: inline-block;*/
/*    }*/
/*}*/

/*@media (min-width: 400px) {*/

/*}*/

/*@media (min-width: 490px) {*/
/*    .credits-totals {*/
/*        display: inline-block;*/
/*    }*/
/*}*/

/*@media (min-width: 520px) {*/
/*    .credits-word {*/
/*        display: inline-block;*/
/*    }*/
/*    .credits-icon {*/
/*        display: none;*/
/*    }*/
/*}*/


/****************************************************************************/
/* Responsive ***************************************************************/
/****************************************************************************/
@media (max-width: 767.98px) {

    .navbar-collapse {
        position: fixed;
        top: -100%;
        left: 0;
        right: 0;
        width: 100%;
        height: 100%;
        background-color: #343a40;
        transition: top 0.1s ease;
        z-index: 1050;
        padding-top: 60px;
    }

    .navbar-collapse.show {
        top: 0;
    }

    .navbar-nav {
        flex-direction: column;
        align-items: center;
    }

    .navbar-nav .nav-item {
        margin: 0;
        width: -webkit-fill-available;
    }

    .menu-icon {
        display: inline-block;
    }

    .navbar-toggler {
        z-index: 1060;
    }

    .navbar-dark .navbar-nav .nav-link.active, .navbar-dark .navbar-nav .nav-link {
        font-size: 24px;
        font-weight: normal;
    }

    .dropdown-toggle::after {
        display: none;
    }

    .dropdown-menu {
        background: #343a40;
    }

    .dropdown-item {
        display: flex;
        align-items: center;
        padding-left: 0;
        font-size: 24px;
    }

    .dropdown-item, .navbar-dark .navbar-nav .nav-link.active, .navbar-dark .navbar-nav .nav-link {
        color: #fff;
        padding-left: 20px;
        padding-right: 20px;
    }

    .dropdown-item:hover, .navbar-dark .navbar-nav .nav-link.active:hover, .navbar-dark .navbar-nav .nav-link:hover {
        background-color: #777777;
    }

    .navbar-dark .navbar-nav .nav-link.dropdown-toggle {
        color: #999;
    }

    .navbar-dark .navbar-nav .nav-link.dropdown-toggle:hover {
        background-color: transparent;
        cursor: default;
    }

    .navbar-dark .navbar-nav .nav-link.dropdown-toggle::after {
        content: "";
        display: inline-block;
        margin-left: 6px;
        vertical-align: middle;
        width: 0;
        height: 0;
        border-left: 8px solid transparent;
        border-right: 8px solid transparent;
        border-top: 10px solid currentColor;
    }
}

@media (min-width: 315px) {
    #footer { height: 315px; }
}

@media (min-width: 370px) {

    #profile-pic {
        margin-top: 2px;
    }

    .large-dl-span {display: inline-block;}
    .small-dl-span {display: none;}

    .guide-span {
        display: inline-block;
    }

    /* Monogram-Fonts-Page */
    #monogram-fonts {
        grid-template-rows: repeat(2, 1fr);
        grid-template-columns: repeat(2, 1fr);
    }

    /* Make-wide */
    #pills-tab .frame-badge {
        display: inline-block;
        background: #eaecec;
        color: #324148;
    }

    /*Downloads-panel*/
    .buttons-box img {
        display:block;
        margin-right: 0.5rem;
    }

}

@media (min-width: 425px) {

    /* Site-wide */
    /* Home-page */
    /* Make-wide */
    #pills-tab {
        padding-bottom: 0.3rem;
    }

    #pills-tab .badge {
        display: inline-block;
        background: #eaecec;
        color: #324148;
    }

    /* Font-panel */
    #p_controls {
        height: 200px;
        padding-left: 20px;
    }

    #monogram_input {
        width: 150px;
        height: 50px;
        font-size: 30px;
        padding: 6px 6px;
    }

    #frame-panel, #font-panel, #download-panel {
        padding: .375rem .75rem;
        font-size: 1rem;
        border-radius: .25rem;
    }


    /* Frame-panel */
    #bottom-control-row {
        min-width: 200px;
    }

    /* Download-panel */
    #formats-guide th {
        font-size: 0.75rem;
    }
    .split-title {
        display: inline;
    }

    /* Monogram-Fonts-Page */
    #pills-tab {
        padding-bottom: 0.1rem;
    }


}

@media (min-width: 438px) {
    #footer { height: 295px; }
}

@media (min-width: 576px) {

    /* Site-wide */
    .navbar-brand {
        margin-right: 0;
    }

    /* Make-wide */
    #bottom-control-row {
        padding-left: 1rem;
    }

    /* Font-panel */

    /* Frame-panel */
    #previewer, #previewer-span {
        width: 200px;
        height: 200px;
    }

    #indentation-box {
        padding-top: 1rem;
        padding-left: 1rem;
        text-align: left;
        width: 200px;
    }

    #indentation_text {
        display: block;
        margin-bottom: 0.5rem;
        padding-left: 1rem;
        margin-top: 0.66rem;
    }

    #indentation-slider-row {
        width: auto;
        justify-content: flex-start;
        align-items: center;
        margin-top: 0;
        padding-left: 1rem;
    }

    #indentation-range {
        width: auto;
    }

    #indentation-number {
        display: inline-block;
        width: 55px;
        border: 1px solid #ced4da;
        border-radius: 0.2rem;
        margin-left: 0.5rem;
    }

    #color-box {
        flex-wrap: wrap;
        flex-direction: row;
        padding-left: 1rem;
        margin-top: 0.5rem;
    }

    .font-color {
        padding-right: 1.5rem;
        margin-top: 0.66rem;
    }

    .frame-color {
        border-left: 1px solid #dddddd;
        padding-left: 1.5rem;
        margin-top: 0.66rem;
    }

    .f-long {
        display: inline-block;
    }

    /* Download-panel */
    #download-page {
        flex-direction: row;
        align-items: stretch;
    }

    .right-column {
        margin-left: 24px;
    }

    #download-previewer {
        margin-left: 0.5rem;
    }

    .signup-alert {
        width: 100%;
        margin: 1.5rem 0 0;
    }

    .download-buttons-box {
        margin-top: 1.5rem;
        padding: 0 0 0.5rem;
    }

    [id^="download-controls-"] {
        width: 200px;
        margin-left: 0.5rem;
    }

    #download-controls-1, #reset-2 {
        display: inline-block;
    }

    #download-controls-2, #reset-2 {
        display: none;
    }

    #reset-1, #share-1, #reset-2, #share-2 {
        margin: 0;
    }

    #learn-font {
        margin-top: 0;
    }

    .bi-arrow-counterclockwise {
        margin-top: 3px;
    }

    .modal-share {
        width: 403px !important;
        min-width: 403px !important;
    }

    #share-project-modal .modal-body {
        padding: 5px;
    }

    #share-modal-body {
        flex-direction: row;
    }

    #share-buttons {
        margin-top: 0;
        display: flex;
        flex-direction: column;
        justify-content: center;
    }

    #share-buttons .sw-title {
        padding-left: 1.5rem;
    }

    .c-pinterest, .c-facebook {
        width: 186px;
        height: 40px;
        margin-left: 1.5rem;
    }

    .c-pinterest {
        margin-top: 0.5rem;
    }

    /* Monogram-Fonts-Page */
    #monogram-fonts {
        grid-template-rows: repeat(3, 1fr);
        grid-template-columns: repeat(3, 1fr);
    }
}

@media (min-width: 768px) {

    .large-span, .small-span {
        /*margin-right: 8px;*/
    }

    #top-banner {
        display: inline-block;
    }

    .text-lighter {
        color: #93999f !important;
    }

    /* Site-wide */
    .container {
        max-width: 894px;
    }

    /*.navbar {*/
    /*    max-width: 894px;*/
    /*}*/

    .header-auth {
        justify-content: flex-end;
    }

    .nav-logout {
        margin-left: auto !important;
    }

    .signup-top {
        min-width: 82px;
        margin-right: 0;
    }

    #footer {
        display: flex;
        flex-direction: row;
        background-color: #2C3538;
        color: #798A8F;
        height: 99px;
    }

    #footer-logo, #footer-privacy-1, #footer-privacy-2 {
        text-align: left;
    }

    #footer-privacy-1 {
        display: inline-block;
    }

    #footer-privacy-2 {
        display: none;
    }

    #footer-links {
        margin-top: 0;
        margin-left: 2rem;
    }

    #footer-links-left , #footer-links-right {
        font-size: 0.75rem;
        line-height: 1.125rem;
    }

    #footer-social-icons {
        flex-grow: 1;
        justify-content: right;
        align-items: center;
        margin: 0;
    }

    #footer-social-icons div {
        width: 26px;
        height: 26px;
        border-radius: 13px;
        margin-left: 7px !important;
    }



    /* Make-wide */
    /* Font-panel */
    /* Frame-panel */
    /* Download-panel */
    .instant-registration {
        display: inline-block;
    }

    #formats-guide th {
        font-size: 1rem;
    }
    /* Monogram-Fonts-Page */
    #monogram-fonts {
        grid-template-rows: repeat(4, 1fr);
        grid-template-columns: repeat(4, 1fr);
    }

    #pills-tab {
        padding-bottom: 0;
    }

    /* Faqs */
    #faq-container {
        flex-direction: row;
    }

    #faq-categories {
        width: fit-content;
    }

}

@media (min-width: 870px) {

    .large-span {display: inline-block;}
    .small-span {display: none;}

}

@media (min-width: 894px) {

    /*#top-banner {*/
    /*    display: inline-block;*/
    /*}*/

    .navbar {
        max-width: none;
        padding-left: calc(((100vw - 894px)/2) + 8px);
        padding-right: calc(((100vw - 894px)/2) + 8px);
    }

    .bcrumbs {
        padding-left: 23px;
    }

    #footer {
        padding-left: calc(((100vw - 894px)/2) + 8px);
        padding-right: calc(((100vw - 894px)/2) + 8px);
    }

    .welcome-text {
        display: block;
    }

    #logout-link {
        color: rgba(255,255,255,.55);
    }

    #logout-link:hover {
        color: rgba(255,255,255,.75);
    }
}

@media (min-width: 924px) {
    .maker-content {
        padding: 1rem 0;
    }
}

@media (min-width: 1200px) {  }

@media (min-width: 1400px) {  }

@media (min-width: 5400px) {
    .navbar-expand-xxxl {
        flex-wrap: nowrap;
        justify-content: flex-start;
    }
    .navbar-expand-xxxl .navbar-nav {
        flex-direction: row;
    }
    .navbar-expand-xxxl .navbar-nav .dropdown-menu {
        position: absolute;
    }
    .navbar-expand-xxxl .navbar-nav .nav-link {
        padding-right: 0.5rem;
        padding-left: 0.5rem;
    }
    .navbar-expand-xxxl .navbar-nav-scroll {
        overflow: visible;
    }
    .navbar-expand-xxxl .navbar-collapse {
        display: flex !important;
        flex-basis: auto;
    }
    .navbar-expand-xxxl .navbar-toggler {
        display: none;
    }
}