@font-face {
    font-family: "Cera Pro";
    src: url("../fonts/Cera-Pro-Light.otf") format('opentype');
    font-weight: normal;
    font-style: normal;
}

@font-face {
    font-family: "Cera Pro";
    src: url("../fonts/Cera-Pro-Medium.otf") format('opentype');
    font-weight: 500;
    font-style: normal;
}

@font-face {
    font-family: "Cera Pro";
    src: url("../fonts/Cera-Pro-Regular.otf") format('opentype');
    font-weight: 400;
    font-style: normal;
}

@font-face {
    font-family: "Cera Pro";
    src: url("../fonts/Cera-Pro-Bold.otf") format('opentype');
    font-weight: 600;
    font-style: normal;
}

@font-face {
    font-family: "Inter";
    src: url("../fonts/Inter-Regular.ttf") format('truetype');
    font-weight: 400;
    font-style: normal;
}

html {
  font-size: 14px;
  overflow-x: hidden;
  margin-right: calc(-1 * (100vw - 100%));
}

@media (min-width: 768px) {
  html {
    font-size: 16px;
  }
}

html {
  position: relative;
  min-height: 100%;
}

body {
    background: #fbfafd;
    min-height: 100vh;
    font-family: 'Cera Pro';
    color: #2F2F2F;
}

h1 {
    font-weight: 600;
    font-size: 44px;
    line-height: 55px;
    color: #1F004A;
}

h2 {
    font-weight: 500;
    font-size: 40px;
    line-height: 50px;
    color: #1F004A;
}

    h2.faq-heading {
        margin-bottom: 20px;
        font-size: 30px;
        line-height: 40px;
    }

h3, h4, h5, h6 {
    font-weight: 500;
    color: #1F004A;
}

h3 {
    font-family: 'Cera Pro';
    font-style: normal;
    font-weight: 500;
    font-size: 18px;
    line-height: 150%;
    /* identical to box height, or 27px */

    letter-spacing: 0.01em;
    text-transform: uppercase;
    color: #34175D;
}

.outside-wrapper {
    display: flex;
    padding: 25px 0;
    min-height:100vh;
}

.outside-wrapper.unauth{
    justify-content:center;
    align-items:center;
}

.logo {
    width: 197px;
    margin: 25px auto 0 0;
    display: block;
}

.logo img{
    max-width:100%;
    margin-bottom:20px;
}

.sidebar {
    width: 290px;
    min-width: 290px;
    padding: 0 35px 35px 35px;
    background: linear-gradient(180deg, #34175D 0%, #4C2687 48.7%, #75559C 100%);
    border-radius: 23px;
    filter: drop-shadow(10px 0px 15px #75559C99);
    height: calc(100vh - 50px);
    position: fixed;
    display: flex;
    flex-direction: column;
}

    .sidebar li .submenu {
        list-style: none;
        margin: 0;
        padding: 0 0 0 2rem;
    }

.nav-wrapper {
    height: 100%;
    display: flex;
    flex-direction: column;
}

.mobile-menu-toggle {
    display: none;
    width: 30px;
    height: 25px;
    border: none;
    background: url(../images/icons/hamburger.svg);
    background-size: cover;
    transition: ease all 0.3s;
}

.mobile-nav-show .mobile-menu-toggle {
    background: url(../images/icons/mobile-close.svg);
    background-size: 26px 26px;
    background-repeat: no-repeat;
    background-position: center;
}

.nav-subheading {
    font-style: normal;
    font-weight: 500;
    text-transform: uppercase;
    font-size: 15px;
    line-height: 18px;
    letter-spacing: 0.05em;
    color: rgba(255, 255, 255, 0.41);
    margin: 35px 0 15px 0;
    display:block;
}

.nav-inner-heading {
    color: rgba(255, 255, 255, 0.41);
    text-transform: uppercase;
    font-size: 14px;
    font-weight: 500;
    margin-left: 0px;
    font-style: italic;
    margin-top: 5px;
    margin-bottom: 5px;
}

.nav-icon {
    width: 24px;
    height: 24px;
    opacity: 0.55;
    margin-right: 8px;
    filter: invert(1);
}

a.nav-link:hover .nav-icon, a.nav-link.active .nav-icon {
    filter: invert(79%) sepia(18%) saturate(765%) hue-rotate(13deg) brightness(105%) contrast(98%);
    opacity: 1;
}

.footer-copyright {
    justify-content: space-evenly;
    padding: 10px 0;
    display: flex;
    color: #75559C99;
    column-gap: 10px;
    row-gap: 5px;
    flex-wrap:wrap;
}

    .footer-copyright a {
        color: #75559C99;
        min-width: 200px;
        display: block;
        text-align: center;
    }

    .footer-copyright div {
        min-width: 200px;
        text-align: center;
    }

.inputWrapper{
    margin-bottom:25px;
    position:relative;
}

    .inputWrapper label {
        font-family: 'Cera Pro';
        font-style: normal;
        font-weight: 500;
        font-size: 18px;
        line-height: 23px;
        display:block;
        margin-bottom:8px;
        color: #0C0C0D;
    }

    .inputWrapper input[type="text"], .inputWrapper input[type="password"], .inputWrapper input[type="email"], .inputWrapper input[type="url"] {
        width: 300px;
        max-width: 100%;
        border: 1px solid #D8DAE5;
        border-radius: 4px;
        padding: 4px 10px;
        font-size: 16px;
    }

    .inputWrapper textarea {
        width:100%;
        max-width: 100%;
        border: 1px solid #D8DAE5;
        border-radius: 4px;
        padding: 4px 10px;
        font-size: 16px;
    }

    .inputWrapper select {
        border: 1px solid #D8DAE5;
        border-radius: 4px;
        padding: 4px 10px;
        width: 100%;
        font-size: 16px;
        height: 33px;
    }

.inputWrapper input[type="text"].full-width{
    width:100%;
}

    .inputWrapper.radio p {
        margin-left: 30px;
    }

.radioWrapper {
    display: flex;
    column-gap: 15px;
    align-items: flex-start;
}

    .radioWrapper input[type="radio"] {
        transform: scale(1.25);
        margin-top: 6px;
    }

.sermon-artwork{
    max-width:100%;
}

.result-list-item a {
    text-decoration: none;
    padding: 3px 5px;
    width: 100%;
    display: block;
    font-size: 13px;
    font-weight: 500;
    color: #1F004A;
}

    .result-list-item a:hover {
        background:#eeeeee55;
    }

.result-list-item .result-list-date, .result-list-item .result-list-time {
    font-family: 'Cera Pro';
    font-style: normal;
    font-weight: 500;
    font-size: 18px;
    line-height: 23px;
    display: flex;
    align-items: center;
    color: #696F8C;
    width: 110px;
}

.result-list-item .result-list-time {
   font-weight:400;
   width:80px;
}

.result-list-item .result-list-type {
    font-family: 'Cera Pro';
    font-style: normal;
    font-weight: 500;
    font-size: 18px;
    line-height: 135%;
    display: flex;
    align-items: center;
    text-align: right;
    color: #68696C;
}

.result-list-item .result-list-rating {
    display: flex;
    margin: 0 5px;
}

.result-list-item .result-list-rating img {
    width: 20px;
    filter: grayscale(1) opacity(0.45);
}

.record-overlay, .add-to-project-overlay, .create-project-overlay, .low-credits-popup {
    background: rgba(23, 25, 41, 0.51);
    backdrop-filter: blur(7px);
    display: none;
    position: fixed;
    height: 100vh;
    width: 100%;
    top: 0;
    left: 0;
}

.record-overlay-inner, .low-credits-popup-inner{
    width:100%;
    height:100%;
    display:flex;
    justify-content:center;
    align-items:center;
}

.record-overlay .pod, .add-to-project-overlay .pod, .create-project-overlay .pod, .low-credits-popup .pod {
    max-width: 900px;
    height: auto;
    max-height: 90%;
    overflow-y: auto;
    margin-bottom: 0;
}

    .add-to-project-overlay .pod{
        max-width:510px;
        padding:25px !important;
    }

    main {
        display: flex;
        flex-direction: column;
        justify-content: space-between;
        margin-left: 360px;
        width: calc(100% - 360px);
    }

.unauth main{
    margin-left:0;
}

.clipboard-btn img, .download-btn img{
    width:24px;
    height:24px;
    cursor:pointer;
   
}

.clipboard-btn:hover, .download-btn:hover, .use-tool-btn:hover {
   transform:scale(1.15);
}

.result-wrapper {
    display: flex;
    justify-content: space-between;
    margin-top: 20px;
    align-items: flex-end;
    margin-bottom: 5px;
    position:relative
}

.result-wrapper h3{
    margin-bottom:0;
}

    .result-wrapper button, .transcript-content-top button {
        border: none;
        background: transparent;
        margin: 0 5px;
    }

    .clipboard-btn{
        margin-left:auto !important;
    }

.my-account-heading {
    display: flex;
    justify-content: space-between;
    align-items: center;
}

.token-display {
    /*background: linear-gradient(92.14deg, #F8C343 -15.21%, #D69A0B 8.35%, #FFDC86 50.88%, #DCA41B 103.37%);*/
    background: linear-gradient(92.14deg, #DEC47A -15.21%, #AF8350 8.35%, #F6E189 50.88%, #BD9B44 103.37%);
    opacity: 1;
    border-radius: 21px;
    width: 90px;
    font-size: 12px;
    text-align: center;
    height: 21px;
    color: #000;
    letter-spacing: 0;
    line-height: 21px;
    text-transform: none;
    filter: drop-shadow(0px 0px 4px #DEC47Aaa);
}

.tool-pod {
    transition: all 0.5s ease;
}

.tool-pod.narrow{
    max-width:695px;
}

input::placeholder {
    color:#ACAEB9;
}

.tool-pod input[type="text"]{
    width:100%;
}

.token-cost {
    display: flex;
    column-gap: 10px;
    font-size: 16px !Important;
    font-weight: 400 !important;
    color: #696F8C !important;
    align-items: center;
}

    .token-cost .token-display {
        display: inline-block;
        width: auto;
        padding: 0 10px;
        font-weight:500;
    }

.grid-col{
    margin-bottom:50px;
}

li{
    margin-bottom:5px;
}

a.nav-link {
    color: rgba(255, 255, 255, 0.7);
    padding: 6px 0;
    font-weight: 500;
    position: relative;
    font-size: 16px;
    line-height:1.25;
    align-items: center;
    display: flex;
}

    a.nav-link.active {
        color: #EDDC82 !important;
    }

    a.nav-link:focus {
        color: rgba(255, 255, 255, 0.7);
    }

    a.nav-link:hover {
        color: #EDDC82 !important;
    }

    a.nav-link.bottom-item{
        margin-top:auto;
    }

    a.nav-link.active:before {
        content: '';
        width: 4px;
        height: 33px;
        position: absolute;
        left: -35px;
        top: 6px;
        /*background: linear-gradient(158.18deg, #F8C343 16.25%, #D69A0B 30.05%, #FFDC86 54.95%, #DCA41B 85.7%);*/
        background: linear-gradient(92.14deg, #DEC47A -15.21%, #AF8350 8.35%, #F6E189 50.88%, #BD9B44 103.37%);
        box-shadow: 0px 0px 10px #DEC47acc;
        border-radius: 0px 4px 4px 0px;
    }

.has-submenu > a.nav-link.active:before{
    content:none;
}

.has-submenu{
    position:relative;
}

    .has-submenu::before {
        content: '';
        background: url('/images/icons/chevron--down.svg');
        background-size: cover;
        background-repeat: no-repeat;
        width: 20px;
        height: 20px;
        right: 0;
        top: 10px;
        filter: invert(1);
        opacity: 0.7;
        transition: 0.2s ease all;
        position: absolute;
    }

.has-submenu.opened::before{
    transform:rotate(180deg);
}



.submenu a.nav-link.active:before {
    content: '';
    width: 4px;
    height: 33px;
    position: absolute;
    left: -67px;
    top: 0;
    background: linear-gradient(92.14deg, #DEC47A -15.21%, #AF8350 8.35%, #F6E189 50.88%, #BD9B44 103.37%);
    border-radius: 0px 4px 4px 0px;
}

.submenu a.nav-link {
    padding: 3px 0;
    font-size: 14px;
    line-height: 1.15;
    font-weight: 300;
    justify-content: space-between;
}

a.nav-link i{
    margin-right:8px;
}

.indent-block {
    margin: 0px 0 45px 50px;
    max-width: 500px;
    margin-top:75px;
}

    .indent-block h1 {
        padding-bottom: 20px;
        display:inline-block;
        border-bottom: 1px solid rgba(63, 29, 111, 0.2);
    }

    .indent-block h1 + p{
        margin-top:25px;
    }

    .indent-block p {
        font-style: normal;
        font-weight: 500;
        font-size: 18px;
        line-height: 141%;
        letter-spacing: 0.01em;
        color: #160039;
    }

.login-pod {
    max-width: 400px;
    margin: 40px auto;
}

.register-pod {
    max-width: 720px;
    margin: 40px auto;
}

#registerForm {
    display: flex;
    flex-wrap: wrap;
    column-gap: 20px;
    justify-content: center;
}

    #registerForm #urlBox{
        width:100%;
    }

    #registerForm .existing-account-msg{
        width:100%;
    }

    #registerForm input[type="submit"] {
        max-width: 300px;
    }

    .register-forgot {
        margin-top: 30px;
        margin-bottom: -20px;
        display: flex;
        justify-content: space-between;
    }

    @media only screen and (max-width:767px){
        #registerForm .inputWrapper{
            width:100%;
        }
    }

    .record-wrapper{
        display:flex;
        margin-bottom:50px;
    }

        .record-list-wrapper h3 {
            padding-bottom: 5px;
            border-bottom: 1px solid rgba(63, 29, 111, 0.2);
        }

.result-list-item a {
    display: flex;
    justify-content: flex-start;
    height: 65px;
    align-items: center;
    border-bottom: 1px solid #E8EBFA;
    padding: 0 20px;
}

.result-list-item:last-child a{
    border-bottom:none;
}

.result-list-item .result-list-type{
    margin-left:auto;
}

.result-date-outer {
    font-weight:500;
    font-size:18px;
}

.result-date {
    font-weight: 600;
    display: inline-block;
    margin-right: 10px;
}

.result-time {
    color: #666;
    font-weight:400;
}

.record-overlay-controls, .add-to-project-overlay-controls, .create-project-overlay-controls {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 35px;
}

.add-to-project-overlay-controls{
    justify-content:flex-end;
    margin-bottom:15px;
}

    .record-overlay-controls img, .add-to-project-overlay-controls img, .create-project-overlay-controls img {
        width: 16px;
        height: 16px;
        cursor: pointer;
    }

    .record-overlay-controls span, .back-to-history span, .add-to-project-overlay-controls span, .create-project-overlay-controls .back-to-history {
        cursor: pointer;
        font-family: 'Cera Pro';
        font-style: normal;
        font-weight: 400;
        font-size: 16px;
        line-height: 24px;
        letter-spacing: -0.02em;
        color: #344054;
    }

    .back-to-history img{
        margin-right:10px;
    }

.prompt-wrapper, #resultDiv {
    padding: 15px;
    border: 1px solid rgba(63, 29, 111, 0.2);
    border-radius: 4px;
}

    #resultDiv ol, #resultDiv ul {
        margin-bottom: 15px;
    }

#resultDiv p{
    margin-bottom:15px;
}

#resultDiv hr{
    margin:10px 0;
}

    #resultDiv h1 {
        font-size: 23px;
        line-height: 32px;
    }

    #resultDiv h2 {
        font-size: 20px;
        line-height: 28px;
    }

#resultDiv h3{
    font-size:20px;
}

#resultDiv h4{
    font-size:18px;
}

.split-pod {
    display: flex;
    column-gap: 50px;
}

.featured-result h2 {
    margin-bottom: 10px;
    font-size: 32px;
    display: flex;
    align-items: center;
    line-height:48px;
    justify-content: space-between;
}

.split-pod h2 {
    display: block;
    font-family: 'Cera Pro';
    font-style: normal;
    font-weight: 500;
    font-size: 18px;
    line-height: 150%;
    letter-spacing: 0.01em;
    text-transform: uppercase;
    max-width: 150px;
    width: 150px;
    min-width:150px;
    color: #34175D;
    margin-bottom: 5px;
}

.projects-nav{
    margin-top:25px;
    border-bottom:none !important;
}

.result-projects{
    margin-bottom:20px;
    display:flex;
    justify-content:space-between;
}

.add-project-btn {
    border: 1px solid rgba(216, 218, 229, 1);
    background: transparent;
    border-radius: 40px;
    display: flex;
    align-items: center;
    column-gap: 8px;
    font-family: Cera Pro;
    font-size: 18px;
    font-weight: 500;
    line-height: 23px;
    letter-spacing: 0em;
    transition:all ease 0.4s;
    text-align: left;
    color: rgba(76, 38, 135, 1);
    padding: 8px 20px;
}

.add-project-btn:hover{
    background:#f9f9f9;
}

.add-to-project-wrapper {
    min-width: 200px;
    flex-direction: column;
    display: flex;
    align-items: flex-end;
    position: relative;
    max-width: 200px;
}

.project-members {
    max-width: calc(100% - 200px);
}

/*.add-to-project-frame {
    position: absolute;
    background: #fff;
    width: 400px;
    display:none;
    z-index: 1;
    top: 35px;
    right:0;
    flex-direction: column;
    align-items: flex-end;
    padding: 10px;
    border: 1px solid rgb(216, 218, 229);
    margin-top: 10px;
    box-shadow: 0px 12px 16px -4px rgba(16, 24, 40, 0.08);
    border: 1px solid rgba(242, 244, 247, 1);
    border-radius: 8px;
}

.add-to-project-frame .message-pod{
    margin-bottom:0;
}*/

.add-to-project-overlay{
    z-index:1;
}

.project-member-list {
    width: 100%;
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    row-gap: 8px;
}

.project-disassociate-btn{
    cursor:pointer;
}

    .project-disassociate-btn:hover {
        filter: brightness(0);
    }

.project-member-list > div {
    background: rgba(242, 244, 250, 1);
    border-radius: 40px;
    display: flex;
    align-items: center;
    column-gap: 8px;
    max-width: 100%;
    text-align: left;
    color: rgba(76, 38, 135, 1);
    padding: 8px 20px;
}

        .project-member-list > div a {
            font-family: Cera Pro;
            font-size: 18px;
            font-weight: 500;
            line-height: 23px;
            letter-spacing: 0em;
        }

.useful-toggles {
    background: #F9F8FF;
    border: 1px solid #E8DAFC;
    border-radius: 4px;
    font-family: 'Cera Pro';
    font-style: normal;
    font-weight: 500;
    align-items: center;
    padding: 5px 10px;
    display: flex;
    font-size: 14px;
    line-height: 20px;
    color: #000000;
}

.featured-result-top {
    display: flex;
    margin-bottom: 10px;
    justify-content: space-between;
}

.yesuseful-btn, .nouseful-btn {
    border: none;
    background: transparent;
    margin: 0 5px;
}

    .result-wrapper button:last-child, .nouseful-btn{
        margin-right:0;
        padding-right:0;
    }

    .yesuseful-btn img, .nouseful-btn img {
        width: 24px;
        height: 24px;
        cursor: pointer;
    }

    .yesuseful-btn:hover, .nouseful-btn:hover {
        transform: scale(1.15);
    }

img[src="/images/icons/thumbs-up-filled.svg"], img[src="/images/icons/thumbs-down-filled.svg"] {
    filter: drop-shadow(0px 0px 3px #75559Caa);
}

.copy-popup {
    position: absolute;
    font-size: 15px;
    right: 28px;
    top: -22px;
    font-weight: 500;
    color: #1F004A;
}

.record-list-wrapper h3 {
    font-size: 26px;
}

.retry-buttons{
    margin-top:30px;
}

    .retry-buttons button:first-child:not(.retry-error-btn) {
        border: 4px solid #9167C5;
        color: #9167C5;
        background: transparent;
    }

        .retry-buttons button:first-child:not(.retry-error-btn):hover {
            border: 4px solid #563583;
            color: #563583;
            background: transparent;
        }

h2 .token-display {
    margin-left: 15px;
    height: 21px;
    white-space: nowrap;
    display: inline-block;
    width: auto;
    padding: 0 10px;
}

/* Pagination */
.pagination {
    display: block;
    width: 100%;
    margin: 25px 0 0 0;
    text-align: center;
}

    .pagination:after {
        content: "";
        clear: both;
    }

.pagination-button {
    display: inline-block;
    padding: 5px 10px;
    border: 1px solid #fff;
    background-color: #1F004A;
    color: #fff;
    cursor: pointer;
    font-weight:600;
    transition: background 0.1s, color 0.1s;
}

    .pagination-button:hover {
        background-color: #75559C;
        color: #EDDC82;
    }

    .pagination-button.active {
        background-color: #75559C;
        border-color: #EDDC82;
        color: #EDDC82;
    }

    .pagination-button:first-of-type {
        border-radius: 18px 0 0 18px;
    }

    .pagination-button:last-of-type {
        border-radius: 0 18px 18px 0;
    }

.btn-primary {
    background: linear-gradient(93.2deg, #563583 -2.88%, #9167C5 102.95%);
    border-radius: 33px;
    border: none;
    font-family: 'Cera Pro';
    font-style: normal;
    font-weight: 500;
    text-transform: none;
    font-size: 17px;
    line-height: 24px;
    display: flex;
    -webkit-transition: background 1000ms linear;
    -ms-transition: background 1000ms linear;
    transition: background 1000ms linear;
    align-items: center;
    letter-spacing: 0.01em;
    padding: 13px 30px;
    color: #FFFFFF;
    justify-content: center;
    min-width: 180px;
}

    .btn-primary.small-btn {
        padding: 8px 15px;
        font-size: 15px;
    }

    .btn-primary:focus, .btn-primary:active {
        box-shadow: 0 0 0 0.25rem #EDDC8255 !important;
        background-color: unset;
        border-color: unset;
    }

    .btn-primary:hover {
        background: linear-gradient(90.89deg, #482776, #7649ae 100%);
    }

.btn-primary.disabled{
    opacity:0.5;
    pointer-events:none;
    cursor:default;
}

.split-pod .btn-primary {
    margin-left: auto;
    margin-right: auto;
    margin-top:30px;
}

.full-btn{
    width:100%;
}

.account-pod{
    max-width:640px;
}

input[type="password"]{
    letter-spacing:2px;
}

.subscription-info {
    border: 1px solid #D8DAE5;
    display: inline-block;
    padding: 6px 16px;
}

.message-area{
    display:none;
    position:relative;
}

    .message-area.error-msg .info-icon-wrapper {
        background: #B81010;
    }

.message-area .info-icon-wrapper {
}

    .message-pod {
        margin-bottom: 25px;
        background: #F9F8FF;
        padding: 15px 30px 15px 45px;
        color: #000;
        border: 1px solid rgba(221, 197, 251, 0.6);
        border-radius: 8px;
        font-family: 'Cera Pro';
        font-style: normal;
        position: relative;
        font-weight: 500;
        font-size: 16px;
        line-height: 20px;
        color: #484848;
    }

    .message-pod a {
        color: #563583;
        text-decoration:underline;
    }

.info-icon-wrapper {
    position: absolute;
    width: 18px;
    height: 18px;
    left: 16px;
    display: flex;
    top: 16px;
    background: #563583;
    border-radius: 50%;
}

.info-icon-wrapper img{
     width: 18px;
    height: 18px;
    filter: invert(1);
}

.privacy-pod h2{
    margin-top:35px;
    margin-bottom:15px;
}

.message-pod.success-msg {
    background: #F3FFF4;
    border: 1px solid #DDE9D8;
}

    .message-pod.success-msg .info-icon-wrapper {
        background:#268604;
    }

    .message-pod.success-msg a {
        color: #268604;
    }

.message-pod.error-msg {
    background: #FFF8F8;
    border: 1px solid rgba(251, 197, 197, 0.6);
}

    .message-pod.error-msg .info-icon-wrapper {
        background: #B81010;
    }

    .message-pod.error-msg a {
        color: #B81010;
    }

.existing-account-msg {
    margin-top: 25px;
    text-align: center;
    font-family: 'Cera Pro';
    font-style: normal;
    font-weight: 500;
    font-size: 16px;
    line-height: 20px;
    color: #0C0C0D;
}

    .existing-account-msg a {
        display: block;
        margin-top: 7px;
        font-family: 'Cera Pro';
        font-style: normal;
        font-weight: 500;
        font-size: 16px;
        line-height: 20px;
        text-decoration-line: underline;
        color: #4206A8;
    }

.tool-item {
    background: rgba(255,255,255,0.3);
    box-shadow: 0px 4px 34px rgba(194, 160, 240, 0.21);
    border-radius: 12px;
    width: 145px;
    min-width: 145px;
    min-height: 120px;
    padding: 10px 10px 15px 10px;
    display: flex;
    flex-direction: column;
    position:relative;
    justify-content: space-between;
}

    .tool-item .tool-name {
        font-family: 'Cera Pro';
        font-style: normal;
        font-weight: 500;
        font-size: 14px;
        line-height: 18px;
        color: #3A3A3A;
        display:block;
        padding-left:2px;
        min-height:36px;
    }

    .tool-item:hover{
        background:#fff;
    }

    .tool-item:hover .tool-name {
        background: #fff;
        color:#000;
    }

.tool-list {
    display: flex;
    column-gap: 10px;
    row-gap: 10px;
    margin-top: 20px;
    flex-wrap: wrap;
    margin-bottom: 55px;
}

.tool-icon-wrapper {
    width: 40px;
    height: 40px;
    display: flex;
    justify-content: center;
    align-items: center;
    border-radius: 25px;
    background: #F4F0FE
}

img.tool-icon {
    width: 20px;
    height: 20px;
    filter: invert(30%) sepia(43%) saturate(851%) hue-rotate(223deg) brightness(89%) contrast(95%);
}

a {
    color: #563583;
    font-weight: 500;
    font-size: 15px;
    text-decoration: none;
}

    a:hover {
        color:#9167C5;
    }

    footer a{
        font-weight:300;
    }

    #toolForm {
        width:100%;
    }

.and-or {
    font-family: 'Cera Pro';
    font-style: normal;
    font-weight: 500;
    text-align: center;
    font-size: 18px;
    text-transform: uppercase;
    color: #34175D;
    margin-bottom: 25px;
}

.loading{
    display:none;
 
}

.loading-inner {
    align-items: center;
    justify-content: center;
    display: flex;
    position:relative;
    height:100%;
}

    .loading-inner:before {
        content: "Working on it...";
        font-size: 12px;
        position: absolute;
        font-weight: 500;
        color: #9167C5;
        left: 50%;
        display: block;
        transform: translateX(-50%);
        width: 100px;
        top: 0;
    }

    .loading-inner:after {
        content: "Requests typically complete in 1 minute or less";
        font-size: 12px;
        position: absolute;
        font-weight: 500;
        color: #9167C5;
        left: 50%;
        display: block;
        transform: translateX(-50%);
        text-align: center;
        bottom: 0;
    }

.loading.transcript-starting .loading-inner:before {
    content: "Getting started...";
}

.loading.transcript-starting .loading-inner:after {
    display:none;
}

.loading.transcript-download .loading-inner:before {
    content: "Downloading video...";
    width: 120px;
}

.loading.transcript-stripping img{
    padding-bottom:20px;
}

.loading.transcript-download img, .loading.transcript-upload-video img, .loading.transcript-upload-audio img {
    padding-bottom: 50px;
}

@media only screen and (max-width:767px){
    .loading.transcript-download img, .loading.transcript-upload-video img, .loading.transcript-upload-audio img {
        padding-bottom: 120px;
    }
}

.loading.transcript-download .loading-inner:after {
    content: "Please bear with us, this may take between 5 to 60 minutes depending on the length and quality of your video. If you navigate away from this page, the download will continue and you will not lose your progress.";
}

.loading.transcript-upload-audio .loading-inner:after {
    content: "Please bear with us, this may take between 1 to 20 minutes depending on the length of your audio and your connection speed. You must keep this window open for the upload to complete.";
}

.loading.transcript-upload-video .loading-inner:after {
    content: "Please bear with us, this may take between 5 to 60 minutes depending on your connection speed and video length/quality. You must keep this window open for the upload to complete.";
}

.loading.transcript-stripping .loading-inner:before {
    content: "Extracting relevant audio...";
    width: 170px;
}

.loading.transcript-upload-audio .loading-inner:before {
    content: "Uploading audio...";
    width: 120px;
}

.loading.transcript-upload-video .loading-inner:before {
    content: "Uploading video...";
    width: 120px;
}

.loading.transcript-stripping .loading-inner:after {
    content: "Please bear with us, this may take up to 10 minutes depending on the asset length.";
}

.loading.transcript-scribing .loading-inner:before {
    content: "Transcribing audio...";
    width: 120px;
}

.loading.transcript-scribing .loading-inner:after {
    content: "Our AI model is now generating a transcript from your audio. Almost done!";
}

.tool-pod .split-pod {
    margin-bottom: 40px;
}

.dashboard {
    margin-left: 45px;
}

.dashboard-alert {
    margin-top: -15px;
    max-width: 770px;
    padding: 0;
    position: relative;
}

.alert-pod {
    margin-bottom: 25px;
    padding: 20px 30px;
    border: 1px solid rgba(232, 219, 245, 1);
    border-radius: 8px;
    font-family: Cera Pro;
    font-size: 14px;
    font-weight: 400;
    line-height: 22px;
    letter-spacing: 0em;
    text-align: left;
    position: relative;
    color: rgba(22, 0, 57, 1);
    background: rgba(244, 240, 254, 1);
    box-shadow: 0px 4px 28px 0px rgba(151, 117, 235, 0.14);
}

    .alert-pod h5 {
        font-family: Cera Pro;
        font-size: 16px;
        font-weight: 500;
        line-height: 22px;
        letter-spacing: 0em;
        text-align: left;
    }

    .alert-pod.success-msg {
        background: #F3FFF4;
    }

    .alert-pod.error-msg {
        background: #FFF8F8;
    }

.alert-close, .sr-close {
    position: absolute;
    right: 8px;
    top: 5px;
    color: #000;
    font-family: Arial;
    font-size: 14px;
    font-weight: 700;
    cursor: pointer;
}

.alert-pod p{
    margin-bottom:5px;
}

.alert-pod a {
    text-decoration: underline;
    color: #563583;
    font-weight: 400;
    font-size: 14px;
}

.alert-pod p:last-child{
    margin-bottom:0;
}

    .dashboard h2 {
        font-family: 'Cera Pro';
        font-style: normal;
        font-weight: 500;
        font-size: 16px;
        line-height: 20px;
        letter-spacing: 0.03em;
        color: #8F889F;
        text-transform:uppercase;
    }

.tool-pod .retry-buttons{
    display:flex;
    justify-content:space-between;
}

.retry-buttons button{
    margin-left:0 !important;
    margin-right:0 !important;
}

.tool-pod .result-wrapper {
    margin-top: 0;
    margin-bottom: 10px;
}

.tool-pod .split-pod > div{
    width:100%;
}

.tool-pod .split-pod:last-child{
    margin-bottom:0;
}

.tool-pod #resultDiv * {
    animation: fade-in 1.2s forwards cubic-bezier(0.11, 0, 0.5, 0);
    opacity: 0;
    filter: blur(4px);
}

@keyframes fade-in {
    100% {
        opacity: 1;
        filter: blur(0);
    }
}

/* Scrollbar for Nav on Zoom */
.sidebar{
    overflow:auto;
}

.sidebar::-webkit-scrollbar
{
    width: 0.5em;
    height: 0.5em;
}

    .sidebar::-webkit-scrollbar-thumb {
        background-color: #9D7FCA;
        border-radius: 20px;
    }


        .sidebar::-webkit-scrollbar-thumb:hover {
            background: #FFDC8644;
        }

.password-toggle {
    background: url(../images/icons/eye-off.svg);
    width: 16px !important;
    height: 16px;
    background-size: cover;
    display: block;
    right: 15px;
    position: absolute;
    bottom: 8px;
}

.password-toggle.password-show {
    background:url(../images/icons/eye.svg);
}

.history, .projects {
    margin: 0px 0 45px 50px;
    max-width: 100%;
    margin-top: 75px;
}

.history-top h1, .projects-top h1 {
    font-family: 'Cera Pro';
    font-style: normal;
    font-weight: 500;
    font-size: 44px;
    line-height: 55px;
    color: #1F004A;
}

.history-top, .projects-top {
    border-bottom: 1px solid rgba(63, 29, 111, 0.2);
    padding-bottom: 10px;
    margin-bottom: 25px;
    display: flex;
    justify-content: space-between;
    align-items: center;
}

.date-select-wrapper{
    position:relative;
}

.filter-wrapper{
    display:flex;
    column-gap:15px;
    margin-left:15px;
}

.date-select {
    border: 1px solid #A7A8AD;
    border-radius: 8px;
    font-family: 'Cera Pro';
    font-style: normal;
    font-weight: 500;
    font-size: 18px;
    width: 200px;
    line-height: 23px;
    cursor: pointer;
    justify-content: flex-start;
    padding:0 15px;
    color: #4C2687;
    display: flex;
    height: 44px;
    justify-content: flex-start;
    align-items: center;
}

.date-select > img{
    margin-right:10px;
}

.search-box {
    background: #F2F4FA;
    background-image: url('../images/icons/search.svg');
    background-size: contain;
    background-position:15px 10px;
    background-repeat: no-repeat;
    background-size:24px 24px;
    text-indent: 30px;
    border-radius: 8px;
    height: 44px;
    width: 350px;
    line-height: 44px;
    max-width: 100%;
    border: none;
    padding-left: 15px;
    padding-right: 75px;
    transition:0.15s ease all;
}

    .search-box:not(:placeholder-shown) {
        background-image: none;
        text-indent: 0;
    }

.search-box-wrapper{
    position:relative;
}

    .search-box-wrapper > img {
        position: absolute;
        width: 24px;
        height: 24px;
        left: 15px;
        top: 10px;
    }

    .search-box:placeholder-shown {
        font-family: 'Cera Pro';
        font-style: normal;
        font-weight: 400;
        font-size: 17px;
        line-height: 135%;
        color: #A7A8AD;
    }

.date-select-dropdown {
    display: none;
    position: absolute;
    z-index: 1;
    right: 0;
    top: 50px;
    width: 200px;
    background: #FFFFFF;
    border: 1px solid #F2F4F7;
    box-shadow: 0px 12px 16px -4px rgba(16, 24, 40, 0.08), 0px 4px 6px -2px rgba(16, 24, 40, 0.03);
    border-radius: 8px;
}

    .date-select-dropdown > div {
        padding: 10px 15px;
        font-family: 'Inter';
        font-style: normal;
        font-weight: 400;
        font-size: 16px;
        line-height: 24px;
        color: #101828;
        cursor:pointer;
        transition: ease all 0.2s;
        position:relative;
    }

        .date-select-dropdown > div:hover {
            background: #F9FAFB;
        }

    .date-select-dropdown > div.active {
        background: #F9FAFB;
    }

        .date-select-dropdown > div.active:after {
            content: '';
            background: url(../images/icons/check.svg);
            width:20px;
            height:20px;
            position:absolute;
            top:12px;
            right:12px;
        }

.apply-search-wrapper{
    display:none;
    position:absolute;
    height:44px;
    right:0;
    align-items:center;
    top:0;
}

.search-trigger-bg{
    cursor:pointer;
    background: url(../images/icons/apply-search-bg.svg);
    width:44px;
    height:44px;
    display:flex;
    justify-content:center;
    align-items:center;
}

.apply-search-wrapper .clear-search{
    cursor:pointer;
    width:11px;
    height:11px;
}

.apply-search-icon{
    width:27px;
    height:27px;
}

.apply-search-inner{
    display:flex;
    align-items:center;
    column-gap:13px;
}

.pagination-wrapper {
    display: flex;
    justify-content: space-between;
    padding: 15px 40px 0 40px;
    margin-top: 25px;
    border-top: 1px solid #E8EBFA;
    align-items:center;
}

    .pagination-wrapper button {
        border: none;
        background: transparent;
    }

    .pagination-wrapper button:disabled{
        opacity:0.3;
    }

    .pagination-prev img{
        transform:rotate(180deg);
    }

.pagination-wrapper span {
    font-family: 'Cera Pro';
    font-style: normal;
    font-weight: 400;
    font-size: 14px;
    line-height: 16px;
    letter-spacing: -0.5px;
    color: #1F004A;
}

.email-icon{
    width:28px;
    height:28px;
    margin-right:5px;
}

.contact-pod a{
    font-size:16px;
}

.mobile-tabs {
    display: none;
    margin-left: 20px;
}

    .mobile-tabs button {
        background: transparent;
        border: none;
        font-size: 15px;
        font-family: 'Cera Pro';
        font-weight: 500;
        color: rgba(132, 135, 149, 1);
        padding: 0 0 8px 0;
        margin-right: 8px;
        margin-bottom: 20px;
    }

        .mobile-tabs button.active {
            color: #1F004A;
            border-bottom: 2px solid #1F004A;
        }

.prompt-toggle img{display:none;}

#feedbackType {
    border: 1px solid #D8DAE5;
    border-radius: 4px;
    padding: 4px 10px;
    width: 100%;
    font-size: 16px;
    height: 33px;
}

#feedbackDetails {
    border: 1px solid #D8DAE5;
    border-radius: 4px;
    padding: 4px 10px;
    font-size: 16px;
    width: 100%;
    height: 120px;
}

.projects-heading {
    display: flex;
    justify-content: space-between;
    align-items: center;
    width: 100%;
}

.projects-heading .btn-primary{
    height:50px;
}

    .projects-heading .btn-primary img{
        filter:invert(1);
    }

.projects-top{
    margin-bottom:20px;
}

.projects .filter-wrapper {
    margin-left: 0;
    margin-bottom: 20px;
    justify-content: space-between;
}

.projects .date-select {
    width: 220px;
    justify-content: space-between;
}

.projects .date-select-dropdown{
    width:220px;
}

.project-list {
    margin: 20px 0;
}

.project-row {
    border-bottom: 1px solid rgba(150, 150, 150, 0.2);
    position: relative;
}

.project-row:last-child{
    border-bottom:none;
}

    .project-row .project-folder {
        width: 20px;
        height:20px;
        margin-right: 8px;
        margin-left: 40px;
        margin-top: 22px;
        vertical-align: top;
    }

    .project-row a {
        font-size: 18px;
        font-weight: 500;
        line-height: 23px;
        letter-spacing: 0em;
        text-align: left;
        margin: 20px 0;
        display: inline-block;
        max-width: calc(100% - 70px);
        padding-right: 30px;
    }

    .project-row .project-collapse {
        position: absolute;
        width: 20px;
        left: 10px;
        top: 22px;
        cursor: pointer;
        transition:all ease 0.5s;
    }

    .project-row .project-collapse.no-children{
        pointer-events:none;
        opacity:0.2;
    }

        .project-row .project-collapse.show{
            transform:rotate(180deg);
        }

        .project-children .project-row{
            border-bottom:none;
        }

.project-children .project-row::before {
    content: '';
    background: url(/images/icons/child-arrow.png);
    background-size: cover;
    width: 22px;
    height: 27px;
    position: absolute;
    left: -20px;
    top: 12px;
}

.project-children {
    display: none;
    padding-left: 70px;
    background: #f3f1f8;
}

.project-context {
    cursor: pointer;
    position: absolute;
    right: 0px;
    top: 19px;
    padding-left:20px;
}

.project-row .context-menu {
    display: none;
    position: absolute;
    right: 35px;
    top: 10px;
    width: 230px;
    box-shadow: 0px 12px 16px -4px rgba(16, 24, 40, 0.08);
    border: 1px solid rgba(242, 244, 247, 1);
    border-radius: 8px;
    z-index: 1;
    background:#fff;
}

.project-row .context-menu-item {
    font-family: Inter;
    font-size: 16px;
    font-weight: 400;
    line-height: 24px;
    letter-spacing: 0em;
    text-align: left;
    padding: 8px 15px;
    cursor: pointer;
    border-bottom: 1px solid rgba(232, 232, 232, 1)
}

.project-row .context-menu-item:hover {
   background:#f9f9f9;
}

    .project-row .context-menu-item:first-child {
        border-top-right-radius: 8px;
        border-top-left-radius: 8px;
    }

.project-row .context-menu-item:last-child {
    border-bottom:none;
    border-bottom-right-radius:8px;
    border-bottom-left-radius:8px;
}

.project-delete-overlay .pod{
    max-width:600px;
}

.delete-project-name {
    font-weight: 600;
    color: #1F004A;
}

.project-tabs {
    display: flex;
    width: 100%;
    justify-content: flex-start;
    margin: 0px 0 20px 0;

}

.asset-tabs{
    margin-top:20px;
    margin-bottom:0px;
}

.asset-results {
    border: 2px solid rgba(31, 0, 74, 1);
    padding: 15px;
}

.project-tab {
    width: 25%;
    font-family: Cera Pro;
    font-size: 18px;
    font-weight: 500;
    padding: 8px 10px;
    cursor: pointer;
    line-height: 25px;
    border-bottom: 3px solid rgba(63, 29, 111, 0.2);
    letter-spacing: 0em;
    text-align: center;
    color: #545454;
}

    .project-tab.asset-tab {
        width: 33.33%;
        border-bottom: none;
    }
      

    .project-tab.selected, .project-tab:hover {
        color: rgba(45, 25, 75, 1);
        border-bottom: 3px solid rgba(31, 0, 74, 1);
    }

    .project-tab.asset-tab.selected, .project-tab.asset-tab:hover {
        background: rgba(31, 0, 74, 1);
        color: #fff;
        border-bottom: none;
    }

.project-tab-count {
    font-family: Cera Pro;
    font-size: 14px;
    font-weight: 500;
    line-height: 20px;
    letter-spacing: 0em;
    display: inline-block;
    text-align: center;
    width: 20px;
    height: 20px;
    margin-left: 8px;
    border-radius: 50px;
    background: linear-gradient(#ddd, #eee, #ddd);
}

.selected .project-tab-count, .project-tab:hover .project-tab-count {
    background: linear-gradient(#D8DAE5, #eee, #D8DAE5);
    color: #000;
}

.project-no-results-pod {
    width: 100%;
    border: 1px solid rgba(232, 232, 232, 1);
    border-radius:10px;
    display:flex;
    padding:40px 0;
    justify-content:center;
    align-items:center;
    margin-top:30px;
}

.project-no-results-pod-inner {
    font-family: Cera Pro;
    font-size: 20px;
    font-weight: 500;
    line-height: 25px;
    padding: 0 20px;
    letter-spacing: 0em;
    text-align: center;
}

.project-no-results-pod .btn-primary {
    display: inline-block;
    margin-top: 10px;
}

.project-result, .transcript-result {
    padding: 12px 20px;
    border-radius: 10px;
    border: 1px solid rgba(232, 232, 232, 1);
    margin-bottom: 10px;
    cursor: pointer;
    display: block;
}

    .project-result:hover, .transcript-result:hover {
        background: #eeeeee55;
    }

    .project-result .result-type, .transcript-result .result-type {
        font-family: Cera Pro;
        font-size: 19px;
        font-weight: 500;
        line-height: 21px;
        letter-spacing: 0em;
        display: block;
        text-align: left;
        margin-bottom: 4px;
        color: rgba(45, 25, 75, 1);
    }

    .project-result .result-date, .transcript-result .result-date {
        font-family: Cera Pro;
        font-size: 14px;
        font-weight: 500;
        line-height: 18px;
        letter-spacing: 0em;
        text-align: left;
        color: rgba(164, 164, 165, 1);
    }

    .mobile-only{
        display:none;
    }


/* Mobile UX begins @ 1199px */
@media only screen and (max-width:1199px) {
    .outside-wrapper{
        padding:0;
    }

    .mobile-menu-toggle{
        display:block;
    }

    .sidebar {
        width: 100%;
        max-width: 960px;
        height: 94px;
        padding: 0 35px;
        top: 10px;
        z-index: 10;
        transition: all ease 0.3s;
        background: linear-gradient(92.49deg, #34175D 0%, #4C2687 32.96%, #75559C 111.94%);
    }

        .sidebar.mobile-nav-show {
            height: 100vh;
            width: 100%;
            top: 0;
            left: 0;
            max-width: 100%;
            border-radius: 0;
            background: linear-gradient(180deg, #34175D 0%, #4C2687 48.7%, #75559C 100%);
        }
  
    .nav-top-wrapper{
        margin-top:12px;
        display:flex;
        align-items:center;
        justify-content:space-between;
    }

    .nav-wrapper{
        display:none;
        width:400px;
        max-width:100%;
    }

    .mobile-nav-show .nav-wrapper{
        display:block;
    }

    .logo {
        width:auto;
        margin-top:0;
    }

    .logo img{
        height:70px;
        margin-bottom:0;
    }

    main {
        margin-left: 0;
        width: 100%;
        margin-top: 145px;
    }

    .indent-block{
        margin: 0 0 35px 20px;
    }

    .dashboard{
        margin-left:20px;
    }

    .nav-subheading {
        color: #BA89FC;
    }

    a.nav-link {
        color: #fff;
        font-weight: 400;
    }

    .has-submenu::before{
        opacity:1;
    }

    .nav-icon{
        opacity:1;
    }

    ul.nav > li {
        margin-bottom: 8px;
        border-bottom: 1px solid #704E9F;
        padding-bottom: 5px;
    }

    ul.nav > li.last{
        border-bottom:0;
        margin-bottom:0;
    }

    .submenu a.nav-link {
        color:#D8DAE5;
        padding:6px 0;
    }

    a.nav-link.bottom-item{
        margin-top:35px;
    }


    .history, .projects {
        margin: 0px;
        max-width: 100%;
    }

    .project-nav > li{
        border-bottom:none !important;
    }

    .project-nav {
        margin-bottom: -20px;
        margin-top: 25px;
    }

    .project-contents {
        padding: 0 15px;
    }
}

/* Tablet screens */
@media only screen and (max-width:992px){
    .sidebar{
        max-width: 720px;
    }

    .history-top, .projects-top {
        margin-left: 15px;
        margin-right: 15px;
        flex-wrap: wrap;
        position: relative;
    }

    .project-tab {
      font-size:16px;
    }

    .history-top h2{
        width:100%;
    }

    .filter-wrapper {
        margin-left: 0;
        justify-content: space-between;
        width: 100%;
    }

    .projects .filter-wrapper {
        margin-left: 15px;
        margin-right: 15px;
        width: calc(100% - 30px);
    }
}

/* Mobile screens */
@media only screen and (max-width:768px) {
    h1, .history-top h1, .projects-top h1, .project-contents h2 {
        font-size: 28px;
        line-height: 34px;
        font-weight: 500;
    }

    .project-tabs{
    }

    .project-tab {
        font-size: 14px;
        padding: 4px;
    }

    .project-tab-count{
        display:none;
    }

    .project-no-results-pod-inner {
        font-size: 16px;
        line-height:24px;
        padding: 0 10px;
    }

    .result-projects {
        flex-direction: column-reverse;
        row-gap: 5px;
    }

    .project-members{
        max-width:100%;
    }

    .add-to-project-wrapper {
        max-width:100%;
    }

    .add-project-btn{
        font-size:16px;
    }

    #addToProjectSelect{
        font-size:14px;
    }

    .project-result .result-type, .transcript-result .result-type {
        font-size: 16px;
        line-height: 18px;
    }

    .project-result .result-date, .transcript-result .result-date{
        font-size:12px;
        line-height:16px;
    }

    .project-member-list > div a {
        font-size: 16px;
        line-height: 20px;
    }

    .add-to-project-frame{
        max-width:100%;
    }

    .project-member-list {
        margin-top: 10px;
    }

        .project-member-list > div{ 
        width:100%;
    }

    .project-member-list > div .project-disassociate-btn{
        margin-left:auto;
    }

    .project-no-results-pod .btn-primary {
        display: block;
        margin-top: 15px;
        padding: 8px 13px;
        line-height: 20px;
    }
    .desktop-only{
        display:none;
    }

    .projects #recordList {
        background: transparent;
        margin-left: unset;
        width: 100%;
    }

    .mobile-only{
        display:block;
    }

    .create-btn.mobile-only {
        height: 40px;
        padding: 6px 15px;
        min-width: 100px;
    }

    .projects .date-select-wrapper {
        position: relative !important;
        margin-left: auto;
    }

    .projects .filter-wrapper{
        flex-wrap:wrap;
        row-gap:10px;
    }

    .dashboard-alert {
        margin-left: -20px;
    }

    .history-top h1 {
        width: auto;
        margin-bottom: 20px;
        line-height: 44px;
    }

    .nav-subheading {
        font-size: 13px;
        letter-spacing: 0.05em;
        line-height: 15px;
    }

    .indent-block {
        margin: 0 20px 35px 20px;
    }

        .indent-block h1 {
            padding-bottom: 15px;
        }

        .indent-block p {
            font-size: 15px;
            font-weight: 400;
        }

        .indent-block h1 + p {
            margin-top: 10px;
        }

    .tool-item {
        width: 130px;
        min-width: 130px;
    }

    main {
        width: 100%;
    }

    .outside-wrapper {
        max-width: 100%;
        padding: 0 10px;
    }

    .and-or {
        margin-bottom: 20px;
        text-align: left;
    }

    .inputWrapper {
        margin-bottom: 20px;
    }



    .sidebar {
        width: calc(100% - 20px);
        padding: 0 25px;
    }

    .split-pod {
        display: flex;
        column-gap: 0;
        flex-direction: column;
        row-gap: 15px;
    }

    html {
        width: 100%;
    }
    
    .accordion-button {
        font-size: 16px;
        padding: 4px 10px;
    }

    .account-pod {
        display: none;
    }

        .account-pod.active {
            display: block;
        }

    .mobile-tabs {
        display: block;
    }

    .inputWrapper label {
        font-size: 15px;
    }

    .inputWrapper input[type="text"], .inputWrapper input[type="password"], .inputWrapper input[type="email"] {
        font-size: 14px;
        width: 100%;
    }

    .account-pod .split-pod h2 {
        display: none;
    }

    .account-pod {
        background: transparent;
        box-shadow: none;
        padding: 0 20px;
    }

    .subscription-info {
        border: none;
        padding: 0;
    }

    .prompt-wrapper, #resultDiv {
        padding: 5px 0;
        border: none;
        border-radius: 0px;
    }

    .tool-pod .split-pod {
        margin-bottom: 15px;
        row-gap: 5px;
    }

        .tool-pod .split-pod:first-child {
            border-bottom: 1px solid #eee;
            padding-bottom: 5px;
            margin-bottom: 10px;
        }

        #inputArea .split-pod:first-child{
            border-bottom:none;
            padding-bottom:0px;
        }

    .result-wrapper {
        justify-content: space-between;
        align-items: flex-end;
    }

    .useful-toggles {
        padding: 0;
        background: transparent;
        border: none;
    }

        .useful-toggles span {
            display: none;
        }

    .yesuseful-btn {
        margin-left: 0;
        padding-left: 0;
    }

    .retry-buttons {
        margin-top: 20px;
        row-gap: 15px;
        flex-direction: column-reverse;
    }

    .prompt-toggle {
        width: 100% !important;
        max-width: 100% !important;
        display: flex !important;
        justify-content: space-between !important;
        margin-bottom: 0 !important;
        cursor: pointer;
    }

    .prompt-wrapper {
        max-height: 0;
        overflow: hidden;
        padding: 0;
        transition: 0.4s ease all;
    }

    .prompt-show .prompt-wrapper {
        max-height: 800px;
        padding: 5px 0;
    }

    .prompt-toggle img {
        transition: 0.5s ease all;
        display:block;
    }

    .prompt-show .prompt-toggle img {
        transform: rotateX(180deg);
    }

    .history-top {
        border-bottom: none;
    }

    .date-select-wrapper {
        position: absolute;
        right: 0;
        top: 0;
    }

    .date-select {
        width: 170px;
        font-size: 15px;
        padding: 0 10px;
    }

        .date-select-dropdown > div {
            font-size: 14px;
        }

    .search-box-wrapper {
        max-width: 100%;
        width: 100%;
    }

    .search-box {
        font-size: 15px;
        padding-right: 25px;
        width: 100%;
    }

        .search-box:placeholder-shown {
            font-size: 15px;
        }

    #recordList {
        background: #ffff;
        padding-bottom: 15px;
        margin-left: -15px;
        width: calc(100% + 30px);
    }

    .result-list-item a {
        flex-direction: row-reverse;
        justify-content: space-between;
        position: relative;
        height: auto;
        line-height: 20px;
        padding: 19px 20px;
        padding-right: 95px;
    }

    .result-list-item .result-list-type {
        margin-left: 0;
        text-align: left;
        font-weight: 400;
        font-size: 16px;
        line-height: 20px;
    }

    .result-list-item .result-list-date, .result-list-item .result-list-time {
        position: absolute;
        top: calc(50% - 20px);
        right: 20px;
        line-height: 20px;
        font-size: 12px;
        font-weight: 400;
        width: auto;
    }

    .result-list-item .result-list-time {
        top: 50%;
    }

    .pagination-wrapper{
        margin-top:0;
    }

    .record-overlay, .add-to-project-overlay, .create-project-overlay {
        background: rgba(251, 250, 253, 1);
        backdrop-filter: none;
    }

    .record-overlay-inner {
        align-items: flex-start;
        margin-top: 120px;
    }

    .record-overlay .pod, .add-to-project-overlay .pod, .create-project-overlay .pod {
        background: transparent;
        box-shadow: none;
        border-radius: 0;
        padding-bottom: 30px;
        max-height: calc(100% - 120px);
    }

    .record-overlay-controls .close-button, .create-project-overlay-controls .close-button{
        display:none;
    }

    .result-date-outer {
        font-size: 14px;
        font-weight: 400;
        line-height: 26px;
    }

    .result-date {
        font-weight: 500;
        margin-right: 5px;
    }

    .btn-primary {
        max-width: 100%;
        white-space: normal;
    }

    .featured-result-top{
        margin-bottom:5px;
    }

    .featured-result h2.result-type {
        font-size: 21px;
        line-height: 26px;
        flex-direction: column;
        align-items: flex-start;
    }

        .featured-result h2 .token-display {
            margin-left: 0;
            margin-top: 10px;
        }

    .featured-result .result-outer {
        background: #FFFFFF;
        padding: 20px;
        margin-left: -20px;
        box-shadow: 0px 4px 34px rgba(194, 160, 240, 0.21);
        border-radius: 0;
        width: calc(100% + 40px);
    }

    .history-details .result-wrapper {
        border-top: 1px solid #eee;
        margin-top: 7px;
        padding-top: 10px;
    }

    body{
        overflow-x:hidden;
    }

    .unauth main{
        margin-top:0;
    }

    .login-pod{
        margin: 40px auto;
        padding-bottom:40px;
    }

    .project-row a{
        font-size:16px;
        line-height:20px;
    }

    .project-children{
        padding-left:30px;
    } 
}

@media only screen and (max-width: 600px){
    .project-tabs{
        flex-wrap:wrap;
    }

    .project-tab{
        width:33.3%;
    }
        
}

.transcription-nav{
    position:relative;
}

.premium-badge {
    font-size: 12px;
    display: block;
    position: absolute;
    right: 0;
    top: 12px;
    color: #FFDC86;
}

.transcriptArea{
    display:none;
}

.radioInput{
    display:none;
    margin-left:30px;
}

    .radioInput[type="url"] {
        width: calc(100% - 30px) !important;
        max-width: 500px !important;
    }

 .trim-video{
     margin-bottom:30px;
     aspect-ratio:16/9;
     width:100%;
     border-radius:12px;
 }

 #trimForm audio{
     margin-bottom:30px;
 }

.project-row.transcript-row, .project-row.brainstorm-row {
    display: flex;
    align-items: center;
}

    .project-row.transcript-row .project-folder, .project-row.brainstorm-row .project-folder {
        margin-left: 10px;
        margin-top: 0;
    }

.status-badge {
    background: linear-gradient(93.2deg, #563583 -2.88%, #9167C5 102.95%);
    opacity: 1;
    border-radius: 21px;
    width: auto;
    padding: 0 10px;
    font-size: 12px;
    text-align: center;
    height: 21px;
    color: #fff;
    letter-spacing: 0;
    line-height: 21px;
    text-transform: none;
    font-weight:500;
}

    .status-badge.error {
        background: #B81010;
    }

    .status-badge.success {
        background: linear-gradient(92.14deg, #DEC47A -15.21%, #AF8350 8.35%, #F6E189 50.88%, #BD9B44 103.37%);
        color:#000;
    }

.transcript-name input[type="text"] {
    background: transparent;
    font-family: 'Cera Pro';
    font-style: normal;
    font-weight: 500;
    width: 100%;
    color: #2f2f2f;
    font-size: 26px;
    line-height: 30px;
    padding: 4px 10px;
    padding-right: 50px;
}

.transcript-name input[readonly="readonly"] {
    color: #1F004A;
    border: none;
    font-size: 30px;
    line-height: 34px;
    padding: 0;
    outline: none;
    padding-right: 50px;
}

    .edit-toggle, .edit-speaker-toggle {
        background: url(../images/icons/edit.svg);
        width: 24px !important;
        height: 24px;
        cursor: pointer;
        background-size: cover;
        display: block;
        right: 15px;
        position: absolute;
        bottom: 8px;
    }

        .edit-toggle.save, .edit-speaker-toggle.save {
            background: url(../images/icons/checkmark--outline.svg);
            background-size: cover;
        }

.transcript-content textarea {
    width: 100%;
    margin: 10px 0;
    padding: 5px 10px;
    min-height: 340px;
    height: 60vh;
}

.transcript-content-top{
    display:flex;
}

.transcript-name #speakerBox {
    font-size: 24px;
    line-height: 28px;
}

@media only screen and (max-width:767px){
    .transcript-row .status-badge, .brainstorm-row .status-badge {
        display: none;
    }

    .transcript-row a, .brainstorm-row a {
        padding-right: 0;
    }
}

textarea.textInput {
    height: 300px;
    width: 100%;
    padding: 5px 10px;
}

.transcript-badge, .brainstorm-badge {
    height: 20px;
    margin-left: 7px;
    padding: 2px;
    background: linear-gradient(92.14deg, #F8C343 -15.21%, #D69A0B 8.35%, #FFDC86 50.88%, #DCA41B 103.37%);
    border-radius: 20px;
}

    .transcript-badge.optional, .brainstorm-badge.optional {
        background: #ffffffbb;
        border-radius: 20px;
    }

.tool-item .transcript-badge, .tool-item .brainstorm-badge {
    position: absolute;
    right: 10px;
    top: 10px;
}

    .tool-item .transcript-badge.optional, .tool-item .brainstorm-badge.optional {
        background: #F4F0FE;
    }

.container .select2-container--default .select2-selection--single .select2-selection__rendered {
    color: #2F2F2F;
    font-size: 18px;
    line-height: 38px;
}

.container .select2-container--default .select2-selection--single {
    height:38px;
}

    .container .select2-container--default .select2-selection--single .select2-selection__arrow{
        height:38px;
    }

.select2-search--dropdown .select2-search__field {
    padding: 4px 10px 4px 15px !important;
    background: #F2F4FA;
    background-image: url(../images/icons/search.svg);
    background-size: contain;
    background-position: 15px 10px;
    background-repeat: no-repeat;
    background-size: 24px 24px;
    text-indent: 30px;
    border-radius: 0;
    height: 44px;
    width: 100%;
    border-radius: 0;
    line-height: 44px;
    max-width: 100%;
    border: none;
    transition: 0.15s ease all;
    color: #666;
    border-bottom: 1px solid #aaa !important;
    border-top: none !important;
    border-left: none !important;
    border-right:none !important;
}

    .select2-search--dropdown .select2-search__field:focus-visible{
        outline: none !important;
    }

    .select2-search--dropdown {
        padding: 0 !important;
    }

.select2-container{
    width: 100% !important;
}

.transcript-content .use-tool-btn {
    margin-left: auto;
}

.transcript-content .use-tool-btn img {
    height: 24px;
}

.transcript-content .clipboard-btn{
    margin-left: 5px !important;
}

summary{
    display:block;
    cursor:default;
}

div.progress {
    margin-top: 15px;
    max-width: 400px;
}

.progress-bar {
    background-color: #9167C5;
}

.select2-results__option[aria-disabled="true"]{
    display:none;
}

.radioSubOptions {
    padding: 15px;
    background: #fbfafd;
    border-radius: 12px;
}

.inputWrapper.radio .radioSubOptions p{
    margin-left:0;
}

.radioSubOptions .and-or{
    margin-top:15px;
    margin-bottom:15px;
}

.checkboxWrapper {
    display: flex;
    align-items: center;
    column-gap: 15px;
    margin-left: 5px;
}

.checkboxWrapper input[type="checkbox"]{
    transform:scale(1.5);
}

.optInWrapper {
    padding: 15px;
    border: 2px solid #DEC47A;
    background: #fbfafd;
    border-radius: 12px;
}

.optInWrapper.True{
    display:none;
}

#registerMessage{
    margin-top:20px;
}

.firstLoginModal {
    position: fixed;
    width: 100%;
    height: 100%;
    top: 0;
    left: 0;
    display: flex;
    padding-left: 450px;
    align-items: center;
    justify-content: center;
    right: 0;
    bottom: 0;
    background-color: #13131344;
    z-index: 100;
}

.firstLoginModalInner {
    margin: 40px 0;
    width: 720px;
    transform: translateX(-150px);
    height: 600px;
    overflow-y: auto;
    max-height: calc(100vh - 80px);
}

.firstLoginModalPod {
    background: #fff;
    padding: 30px 35px;
    border-radius: 20px;
    position:relative;
}

.firstLoginModal h2 {
    font-weight: 700;
    font-size: 26px;
    line-height: 30px;  
    margin-bottom: 25px;
}

.tutorial-slide{
    display:none;
}

.tutorial-slide img {
    border-radius: 20px;
    margin-bottom: 20px;
    width: 100%;
}

#tutorialNext {
    width: 115px;
    min-width: unset;
    padding-left: 0;
    padding-right: 0;
}

.tutorial-controls {
    margin-top: 40px;
    display: flex;
    justify-content: space-between;
    align-items: center;
}

.tutorial-view {
    z-index: 101;
    pointer-events: none;
}

    .tutorial-view::after {
        content: '';
        width: 100%;
        height: 100%;
        position: absolute;
        margin-left: -35px;
        border-radius: 23px;
        background-color: #13131388;
    }

    .tutorial-view .tutorial-highlight{
        z-index:102;
    }

        .tutorial-view .tutorial-highlight a.nav-link {
            color: #fff;
        }

        .tutorial-view .tutorial-highlight a.nav-link .nav-icon{
            opacity:1;
        }

.tutorial-slide .transcript-badge {
    width: auto;
    margin-bottom: 0;
    margin-left: 0;
}

.dot-icons{
    display:flex;
    justify-content:flex-start;
    align-items:center;
    column-gap:12px;
}

.dot-icon.active {
    width: 14px;
    height: 14px;
    border-radius: 50%;
    background: #7B51A1;
    
}

.dot-icon {
    cursor: pointer;
    border-radius: 50%;
    background:#ddd;
    width:10px;
    height:10px;
}

#welcome-iframe {
    width: 100%;
    aspect-ratio: 16 / 9;
}

.firstLoginModal .close-button {
    position: absolute;
    right: 32px;
    top: 40px;
    opacity: 0.6;
    width: 14px;
    cursor: pointer;
}

.firstLoginModal .close-button:hover{
    opacity:1;
}

.tutorial-split{
    display:flex;
    column-gap:25px;
}

.tutorial-split > div{
    flex:1;
}

.tutorial-buttons{
    display:flex;
    column-gap:50px;
}
    
#tutorialBack {
    display: flex;
    align-items: center;
}

@media only screen and (max-width:1400px) {
    .firstLoginModalInner {
        transform: translateX(-90px);
    }
}

@media only screen and (max-width:1199px){
    .firstLoginModal {
        padding-left: 15px;
        z-index: 102;
        display: block;
    }

    .firstLoginModalInner {
        transform: none;
        margin: 40px auto;
    
    }
}

@media only screen and (max-width:767px){
    .firstLoginModalInner {
        margin: 40px 10px;
        max-width: calc(100% - 20px);
        
    }

    .firstLoginModal{
        padding-left:0;
    }

    .tutorial-view {
        z-index: 1;
    }

        .tutorial-view::after {
          display:none;
        }

    .firstLoginModalPod {
        padding: 25px 15px;
        max-height: 100%;
        overflow-y: scroll;
    }

    .firstLoginModal .close-button {
        right: 10px;
        top: 10px;
    }

    .tutorial-split {
     flex-direction:column;
    }

    .firstLoginModal h2 {
        font-size: 22px;
        line-height: 28px;
        margin-bottom: 15px;
    }

    .tutorial-slide p{
        line-height:20px;
    }

    .dot-icons {
        column-gap: 8px;
    }

    .tutorial-buttons {
        column-gap: 20px;
    }

    #tutorialNext {
        width: 100px;
        height: 40px;
    }

    .tutorial-controls {
        margin-top: 20px;
    }

    #slide2 .tutorial-split img{
        display:none;
    }
}

#outlineTrigger {
    margin-left: 5px;
    width: 18px;
    height: 18px;
    transform: translateY(-1px);
    cursor:pointer;
}

.outline-types-overlay h4{
    margin-top:25px;
}

.prompt-tip {
    display: block;
    margin-top: 5px;
    font-size: 14px;
    line-height:20px;
}

.add-to-project-overlay h2 {
    color: #18181B;
    font-size: 24px;
    text-align: center;
    line-height: 30px;
    font-family: 'Cera Pro';
    display: flex;
    justify-content: center;
    column-gap: 15px;
    margin-bottom: 20px;
}

.create-project-frame{
    display:none;
}

.add-to-project-overlay .select2-container--default .select2-selection--single .select2-selection__rendered {
    font-size: 16px;
}

.select2-results__option--selectable {
    font-size:15px;
}

.add-to-project-frame .inputWrapper{
    max-width:360px;
    display:flex;
    column-gap:15px;
}

.add-to-project-overlay .create-btn {
    max-width: 80px;
    min-width: 80px;
    height: 30px;
    padding: 0;
    font-size: 14px;
}

        .add-to-project-overlay .create-btn img {
            width: 24px;
            filter: invert(1);
        }

        .create-project-frame{
            margin-top:30px;
        }

.create-project-overlay {
    z-index: 15;
}

.history-overlay-controls {
    position: fixed;
    max-width: 900px;
    z-index: 2;
    width: 100%;
    padding: 0;
    height: 80px;
    display: flex;
    background: #fff;
    max-width: 800px;
    transform: translate(0px, -80px);
    z-index: 1;
}

.history-overlay-inner > .pod {
    padding-top: 80px;
    scrollbar-gutter:stable;
    padding-right:35px;
}

@media only screen and (max-width:1200px){
    .history-overlay-inner {
        align-items: flex-start;
        padding-bottom: 40px;
        padding-top: 130px;
    }

    .history-overlay-inner > .pod {
        max-height: 100%;
    }

   
}

@media only screen and (max-width:900px){
    .history-overlay-controls {
        max-width: calc(100% - 100px);
    }
}

@media only screen and (max-width:767px) {
    .history-overlay-controls {
        background: transparent;
        position: relative;
        height: auto;
        max-width: 100%;
        transform: none;
    }

    .history-overlay-inner > .pod {
        max-height: calc(100% - 120px);
        padding: 20px;
    }

    .history-overlay-inner {
        align-items: flex-start;
        padding-bottom: 0;
        padding-top:0;
    }
}

.locked-icon {
    width: 20px;
    height: 20px;
    margin-top: 2px;
    height: 20px;
    margin-left: 7px;
    padding: 2px;
    background: linear-gradient(92.14deg, #F8C343 -15.21%, #D69A0B 8.35%, #FFDC86 50.88%, #DCA41B 103.37%);
    border-radius: 20px;
}

.nav-item.locked {
    display: flex;
    justify-content: space-between;
    align-items: center;
}

.nav-item.locked a{
    opacity:0.5;
}

.nav-item.locked a{
    pointer-events:none;
    cursor:default;
}

.recorder-btn {
    background: linear-gradient(93.2deg, #563583 -2.88%, #9167C5 102.95%);
    border-radius: 33px;
    border: none;
    font-family: 'Cera Pro';
    font-style: normal;
    font-weight: 500;
    text-transform: none;
    display: inline-block;
    font-size: 14px;
    line-height: 20px;
    margin:5px 0;
    -webkit-transition: background 1000ms linear;
    -ms-transition: background 1000ms linear;
    transition: background 1000ms linear;
    align-items: center;
    letter-spacing: 0.01em;
    padding: 8px 15px;
    color: #FFFFFF;
    justify-content: center;
    cursor: pointer;
}

.recorder-btn[disabled]{
    opacity:0.5;
    filter:grayscale(1);
    cursor:auto;
    pointer-events:none;
}

#btnStart.recorder-btn.recording {
    animation: recording 2s linear infinite;
    opacity: 1;
    filter: none;
    background: linear-gradient(92.14deg, #DEC47A -15.21%, #AF8350 8.35%, #F6E189 50.88%, #BD9B44 103.37%);
    background-size: 600%;
}

@keyframes recording{
    0% {
        background-position: 0% 50%;
    }
    50% {
        background-position: 100% 50%;
    }
    100% {
        background-position: 0% 50%;
    }
}

.audio-preview{
    display:none;
    margin:20px 0;
}

.recorder-btn:hover {
    color: #fff;
    filter: brightness(1.2);
}

.finish-recording-buttons{
    margin-top:20px;
}

.recorder-wrapper .buttons {
    display: flex;
    column-gap: 5px;
}

.recorder-wrapper #btnStop, .recorder-wrapper #btnClear{
    margin-left: auto;
}

.recorder-wrapper #btnClear {
    border: 4px solid #9167C5 !important;
    color: #9167C5 !important;
    background: transparent !important;
    padding: 5px 15px;
}

.recording-timer{
    display:none;
}

#recordingForm {
    width: 100%;
    max-width: 400px;
}

.recorder-btn img {
    filter: invert(1);
    width: 18px;
    height: 18px;
    transform:translateY(-2px);
}

.recording-timer {
    margin-top: 10px;
}

.recording-timer label{
    font-weight:600;
}

.type-instead {
    display: block;
    text-align: right;
    margin-bottom: 20px;
    position: absolute;
    right: 20px;
    top: 10px;
    font-size: 15px;
}

    .type-instead img {
        filter: invert(23%) sepia(24%) saturate(2424%) hue-rotate(231deg) brightness(96%) contrast(93%);
        width: 22px;
        height: 22px;
        margin-right: 5px;
    }

    .brainstorm-upload-bar{
        display:none;
    }

.loading.brainstorm-loading .loading-inner:before {
    content: "Processing brainstorm";
    width: 140px;
}

.loading.brainstorm-loading .loading-inner:after {
    content: "This shouldn't take long...";
}

.project-tab.disabled{
    cursor:default;
    opacity:0.5;
    pointer-events:none;
}

.project-tab .locked-icon {
    margin-top: -2px;
    width: 18px;
    height: 18px;
}

@media only screen and (max-width:450px){
    .project-tab .locked-icon{
        display:none;
    }
}

#brainstormTextForm {
    width: 100%;
    margin-top: 5px;
}

@media only screen and (max-width:500px){
    .recorder-wrapper .buttons {
        flex-wrap: wrap;
        justify-content: center;
    }

    .recorder-wrapper #btnStop, .recorder-wrapper #btnClear {
        margin-left: unset;
    }

    .record-split h2 {
        max-width: 100%;
        width: 100%;
        text-align: center;
    }

    .record-split {
        margin-top: 30px;
    }

    .recording-timer {
        text-aligN: center;
    }

    .audio-preview {
        text-align: center;
    }
}

.radioWrapper.disabled{
    opacity:0.5;
    pointer-events:none;
}

    .radioWrapper.disabled .locked-icon {
        margin-top: -1px;
    }

.inputWrapper.radio .radioSubOptions {
    margin-left: 0;
}

.checkWrapper {
    display: flex;
    column-gap: 8px;
    margin-top: 15px;
}

    .checkWrapper label {
        font-weight: 400;
        font-size: 14px;
        line-height: 20px;
        margin-bottom: 0;
    }

.low-credits-popup .pod {
    max-width: 540px;
    text-align: center;
    padding: 20px 20px 40px 20px;
}

.low-credits-popup h2 {
    font-weight: 600;
    font-size: 28px;
}

.low-credits-popup .btn-primary {
    margin-top: 30px;
}

.low-credits-controls {
    display: flex;
    justify-content: flex-end;
    align-items: center;
    margin-bottom: 10px;
}

.low-credits-popup .close-button{
    width:16px;
    height:16px;
    cursor:pointer;
}

#personalizationForm{
    min-width:300px;
}

.account-pod.locked{
    filter:brightness(0.8);
}

.account-pod.locked *{
    pointer-events:none;
    cursor:default;
}

    .account-pod.locked .locked-icon {
        position: absolute;
        top: 15px;
        right: 15px;
    }

@media only screen and (max-width:767px) {
    .account-pod.locked {
        background: #fff;
        padding-top: 20px;
        padding-bottom: 20px;
    }
}