@keyframes x-rotate
{
    from { transform: rotate(0deg); }
    to { transform: rotate(180deg); }
}
* { font-family: 'Poppins-Light'; }
body
{
    margin: 0px;
    background-color: #04100e;
}
.hidock
{
    font-size: 24px;
    letter-spacing: 2px;
    font-family: 'Poppins-Bold';
    color: #fff;
    position: absolute;
    top: 48px;
    left: 48px;
}
.x-page
{
    width: 1400px;
    margin: 0px auto;
    background-image: url(../img/index/transcript-bg.png);
    background-repeat: no-repeat;
    background-position: center 700px;
    padding: 0px 90px;
    box-sizing: border-box;
}
.btn
{
    outline: none;
    border-radius: 40px;
    display: inline-block;
    background-image: linear-gradient(90deg, #00ffcc, #00a2af);
    height: 62px;
    line-height: 62px;
    border: 0px;
    font-family: 'Poppins-SemiBold';
    font-size: 22px;
    color: #000;
    padding: 0px 40px 0px 40px;
    text-decoration: none;
}
.btn:hover
{
    cursor: pointer;
    background-image: linear-gradient(90deg, #00a2af, #00ffcc);
}
.x-block
{

}

/* ********************************************************************************************* */

.block-header
{
    height: 1100px;
    font-family: 'Poppins-Light';
    text-align: center;
    padding-top: 130px;
    color: #fff;
    background-image: url(../img/index/top-bg.png);
    background-repeat: no-repeat;
    background-position: top left;
}
.block-header h3
{
    font-family: 'Poppins-SemiBold';
    font-size: 46px;
    margin: 0px;
    padding: 0px;
}
.block-header h3 span
{
    color: #00f7ce;
    font-family: 'Poppins-SemiBold';
}
.block-header .x-intro
{
    font-size: 18px;
    line-height: 32px;
    padding: 60px 150px 60px 150px;
    box-sizing: border-box;
}
.block-header .x-try
{
    text-align: center;
}
.block-header .x-try .btn
{
    width: 320px;
}
.x-try .x-inputbox, .x-subscribe .x-inputbox
{
    margin: 0px auto;
    border-radius: 10px !important;
}
.x-try .x-inputbox button, .x-subscribe .x-inputbox button
{
    border-radius: 10px !important;
    width: 80px;
    padding: 0px 10px;
}

/* ********************************************************************************************* */

.block-demo
{
    color: #fff;
    font-family: 'Poppins-Light';
    margin-bottom: 100px;
}
.block-demo h2
{
    font-size: 44px;
    margin: 0px;
    padding: 0px;
    text-align: center;
    font-family: 'Poppins-SemiBold';
}
.x-types
{
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: space-between;
    padding: 40px 200px 40px 200px;
    box-sizing: border-box;
}
.x-types span
{
    display: inline-block;
    width: 200px;
    text-align: center;
    height: 50px;
    line-height: 50px;
    font-size: 24px;
}
.x-types span.active
{
    color: #00f9ce;
    text-decoration: underline;
}
.x-types span:hover
{
    color: #00f9ce;
    text-decoration: underline;
    cursor: pointer;
}
.x-demo
{
    position: relative;
    box-sizing: border-box;
    padding: 0px 0px 0px 420px;
    box-sizing: border-box;
}
.x-demo .x-player
{
    position: absolute;
    top: 0px;
    left: 0px;
    width: 400px;
    height: 605px;
    border: solid 1px #0e6957;
    border-radius: 20px;
    overflow: hidden;
    background-size: cover;
    background-repeat: no-repeat;
    background-position: center;
}
@keyframes x-poster
{
    0% { filter: blur(5px) }
    100% { filter: blur(0px) }
}
.x-poster
{
    position: absolute;
    top: 0px;
    left: 0px;
    width: 100%;
    height: 100%;
    background-position: center;
    background-size: cover;
    background-repeat: no-repeat;
    animation-name: x-poster;
    animation-duration: 0.3s;
    animation-timing-function: ease-out;
}
.x-player .x-intro
{
    padding: 230px 40px 40px 40px;
    box-sizing: border-box;
    font-size: 22px;
    line-height: 32px;
    position: absolute;
    top: 0px;
    left: 0px;
    width: 100%;
    height: 100%;
}
.x-control
{
    position: absolute;
    width: 55px;
    height: 55px;
    border-radius: 55px;
    background-image: linear-gradient(135deg, #00ffcc, #02866c);
    bottom: 60px;
    left: 20px;
}
.x-control:hover
{
    cursor: pointer;
    background-image: linear-gradient(135deg, #02866c, #00ffcc);
}
.x-control span
{
    display: block;
    width: 100%;
    height: 100%;
    background-image: url(../img/index/play.png);
    background-size: 26px;
    background-position: 16px center;
    background-repeat: no-repeat;
}
.playing span
{
    background-image: url(../img/index/pause.png);
    background-position: center;
}
.x-progressbar
{
    position: absolute;
    width: 235px;
    height: 15px;
    border-radius: 15px;
    overflow: hidden;
    background-color: #04100e;
    left: 91px;
    bottom: 80px;
    box-shadow: 0px 0px 5px rgba(0, 255, 200, 0.2);
}
.x-progress-text
{
    display: block;
    width: 60px;
    height: 30px;
    line-height: 30px;
    text-align: center;
    position: absolute;
    right: 10px;
    bottom: 72.5px;
}
.x-progressbar span
{
    position: absolute;
    display: block;
    left: 0px;
    top: 0px;
    height: 15px;
    border-radius: 20px;
    background-image: linear-gradient(90deg, #00ffcc, #00a2af);
}
#x-type-call, #x-type-lecture, #x-type-memo
{
    display: none;
}
.x-demo .x-note
{
    width: 100%;
    height: 605px;
    border: solid 1px #0e6957;
    border-radius: 20px;
    background-color: #13201d;
    padding: 15px 15px 90px 15px;
    box-sizing: border-box;
    position: relative;
    overflow: hidden;
}
.x-note-info
{
    background-image: linear-gradient(135deg, #006753 -2%, #000000 20%);
    padding: 20px;
    box-sizing: border-box;
    border-radius: 10px;
    height: 100%;
    overflow: 100%;
}
.x-note-info-body
{
    line-height: 180%;
    height: 100%;
    overflow: auto;
}
.x-note-content { display: none; }
.x-note-content h3
{
    font-size: 22px;
    font-family: 'Poppins-SemiBold';
    margin: 10px 0px;
    padding: 0px;
}
.x-note-content h4
{
    font-size: 18px;
    font-family: 'Poppins-SemiBold';
    margin: 10px 0px;
    margin: 0px;
    padding: 0px;
}
.x-note-content p
{
    font-size: 14px;
    font-family: 'Poppins-Light';
    margin: 0px 0px 15px 0px;
    padding: 0px 0px 0px 25px;
}
.x-note-content ul
{
    list-style: none;
}
.x-note-content ol, .x-note-content ul
{
    margin: 0px;
    padding: 0px 0px 0px 25px;
}
.x-note-content ol li
{
    list-style-type: none;
    font-size: 14px;
}
.x-note-content ul li
{
    list-style-type: none;
    font-size: 14px;
}
.x-note-transcription
{
    display: block;
}
.x-transcription
{
    position: relative;
    width: 100%;
    padding: 0px 0px 0px 150px;
    box-sizing: border-box;
    font-family: 'Poppins-Light';
    font-size: 14px;
    line-height: 160%;
}
.x-transcription span
{
    position: absolute;
    top: 0px;
    left: 0px;
    color: #888;
    width: 140px;
    text-align: justify;
    text-align-last: justify;
}
.x-transcription p
{
    width: 100%;
    margin: 0px;
    padding: 0px;
}
.x-note-switch
{
    position: absolute;
    left: 0px;
    bottom: 0px;
    width: 100%;
    height: 80px;
    padding: 0px 15px 15px 15px;
    box-sizing: border-box;
}
.x-switch-container
{
    width: 100%;
    height: 100%;
    background-color: #000;
    border-radius: 10px;
    text-align: center;
    padding: 13.5px 0px;
    box-sizing: border-box;
}
.x-btn-group
{
    display: inline-block;
    font-size: 0px;
    border-radius: 40px;
    height: 36px;
    border: solid 1px #00f4c8;
    overflow: hidden;
    width: 360px;
    background-color: #13201d;
}
.x-btn-group button
{
    font-size: 16px;
    color: #fff;
    background-color: #13201d;
    padding: 0px 20px 0px 20px;
    height: 36px;
    outline: none;
    border: 0px;
    font-family: 'Poppins-Medium';
    width: 45%
}
.x-btn-group button:hover
{
    cursor: pointer;
    font-family: 'Poppins-SemiBold';
}
.x-btn-group button.active
{
    color: #000;
    width: 55%;
    background-image: linear-gradient(90deg, #00ffcc, #00a2af);
    border-radius: 40px;
}

/* ********************************************************************************************* */

.block-flow
{
    margin-bottom: 220px;
}
.block-flow h3
{
    text-align: center;
    font-size: 44px;
    font-family: 'Poppins-SemiBold';
    margin: 0px;
    padding: 0px;
    color: #fff;
}
.x-steps
{
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: space-between;
    color: #fff;
    margin: 100px 0px 60px 0px;
}
.x-flow
{
    width: 32%;
    height: 480px;
    text-align: center;
    box-sizing: border-box;
    border: solid 1px #0e6957;
    border-radius: 20px;
    padding-bottom: 40px;
    padding-top: 60px;
    position: relative;
}
.x-flow i
{
    position: absolute;
    display: block;
    width: 58px;
    height: 58px;
    line-height: 58px;
    text-align: center;
    font-size: 29px;
    font-family: 'Poppins-SemiBold';
    background-image: linear-gradient(90deg, #00ffcc, #00a2af);
    color: #000;
    font-style: normal;
    top: -29px;
    left: 50%;
    margin-left: -29px;
    border-radius: 58px;
}
.x-flow span
{
    display: block;
    width: 100%;
    height: 200px;
    background-repeat: no-repeat;
    background-position: center;
    background-size: 65%;
}
.x-flow-1 { background-image: url(../img/index/step-1.png); background-size: 334px 275px; }
.x-flow-2 { background-image: url(../img/index/step-2.png); background-size: 52% !important; background-position: center bottom !important; }
.x-flow-3 { background-image: url(../img/index/step-3.png); background-size: 304px 181px; }
.x-flow h5
{
    font-family: 'Poppins-SemiBold';
    font-size: 22px;
    margin: 47px 0px 20px 0px;
    font-weight: normal;
}
.x-flow div
{
    font-size: 20px;
    font-family: 'Poppins-Light';
}
.x-flow:hover
{
    border: solid 1px #00ffcc;
    background-color: #13201d;
}

/* ********************************************************************************************* */

.block-h1
{
    text-align: center;
    height: 1000px;
    background-image: url(../img/index/hidock.png);
    background-repeat: no-repeat;
    background-size: 100%;
    background-position: center;
}
.block-h1 h3
{
    font-size: 44px;
    color: #00edc7;
    font-family: 'Poppins-SemiBold';
    margin: 0px;
    padding: 0px;
}
.block-h1 h4
{
    font-size: 44px;
    color: #fff;
    font-family: 'Poppins-SemiBold';
    margin: 0px;
    padding: 0px;
}
.block-h1 p
{
    color: #fff;
    font-size: 20px;
    line-height: 32px;
    font-family: 'Poppins-Light';
}
/*
.block-h1 div
{
    text-align: center;
    padding: 40px 0px 60px 0px;
}
*/
.block-jensen
{
    background-image: url(../img/index/hidock.png);
    background-position: center;
    background-repeat: no-repeat;
    background-size: 616px;
    height: 550px;
    border-radius: 20px;
}

/* ********************************************************************************************* */

.block-feature
{
    padding: 20px 300px 60px 300px;
    display: flex;
    flex-wrap: wrap;
    justify-content: space-between;
    align-items: center;
}
.block-feature div
{
    border: solid 1px #00b3b5;
    border-radius: 20px;
    border: solid 1px #00ffcc;
    background-image: linear-gradient(135deg, #04100e 54%, #032620 70%, #02866c);
    width: 30%;
    height: 164px;
    color: #fff;
    font-size: 16px;
    font-family: 'Poppins-Medium';
    text-align: center;
}
.block-feature div:hover
{
    background-image: linear-gradient(135deg, #04100e 43%, #032620 63%, #02866c);
}
.block-feature div span
{
    display: block;
    width: 100%;
    height: 100px;
    background-position: center;
    background-repeat: no-repeat;
    background-size: 50px;
}
.block-feature p
{
    margin: 0px;
    padding: 0px;
}
.feature-bianc
{
    background-image: url(../img/index/bi-anc.png);
}
.feature-recording
{
    background-image: url(../img/index/recording.png);
    background-size: 48px;
}
.feature-summarize
{
    background-image: url(../img/index/summarize.png);
}

/* ********************************************************************************************* */

.block-footer
{
    min-height: 120px;
    text-align: center;
    margin-top: 100px;
}
.block-footer p
{
    font-family: 'Poppins-Light';
    line-height: 150%;
    font-size: 14px;
    color: #fff;
}
.block-footer a, .block-footer a:visited
{
    font-family: 'Poppins-Light';
    font-size: 20px;
    color: #fff;
    text-decoration: none;
}
.block-footer a:hover
{
    color: #00b3b5;
    text-decoration: underline;
}
/* ********************************************************************************************* */

.mask
{
    position: absolute;
    top: 0px;
    left: 0px;
    width: 100%;
    height: 100%;
    background-color: rgba(0, 0, 0, 0.5);
    display: none;
}
.x-panel
{
    position: absolute;
    top: 50%;
    margin-top: -350px;
    left: 50%;
    margin-left: -550px;
    width: 1100px;
    height: 680px;
    padding: 60px 0px 0px 0px;
    border-radius: 20px;
    overflow: hidden;
    box-sizing: border-box;
}
.x-panel-heading
{
    position: absolute;
    top: 0px;
    left: 0px;
    width: 100%;
    height: 60px;
    background-color: #00c0b8;
}
.x-panel-heading span
{
    position: absolute;
    right: 20px;
    top: 12px;
    display: block;
    width: 36px;
    height: 36px;
    border-radius: 40px;
    overflow: hidden;
    background-image: url(../img/index/close.png);
    background-repeat: no-repeat;
    background-position: center;
    background-size: 64px 64px;
}
.x-panel-heading span:hover
{
    cursor: pointer;
    animation: x-rotate 500ms;
}
.x-panel-body-container
{
    background-color: #04100e;
}
.x-panel-loading
{
    position: absolute;
    display: none;
    top: 100px;
    right: 40px;
    z-index: 10;
    width: 60px;
    height: 60px;
}
.x-panel-body
{
    background-color: #13201d;
    height: 520px;
    width: 100%;
    position: relative;
    border-bottom-left-radius: 20px;
    border-bottom-right-radius: 20px;
    overflow: hidden;
}
.x-panel-footer
{
    height: 102px;
    background-color: #04100e;
    border-bottom-left-radius: 20px;
    border-bottom-right-radius: 20px;
    overflow: hidden;
    text-align: center;
    box-sizing: border-box;
    padding: 20px 0px;
}
.x-panel-footer button
{
    width: 300px !important;
}
.no-footer
{
    height: 580px !important;
}
.no-footer .x-panel-body-container
{
    background: transparent !important;
    height: 660px !important;
}
.no-footer .x-panel-footer
{
    display: none;
}
/* ********************************************************************************************* */
.x-panel
{
    color: #fff;
}
.panel
{
    width: 1100px;
    height: 520px;
    left: 0px;
    top: 0px;
    display: none;
    position: absolute;
    background-color: #13201d;
}

/* ********************************************************************************************* */

.panel-start
{
    text-align: center;
    display: block;
}
.panel-start p
{
    margin: 0px;
    padding: 0px;
    line-height: 180%;
    font-size: 14px;
    color: #d8d8d8;
}
.panel-start h4
{
    height: 80px;
    line-height: 80px;
    font-size: 16px;
}
.x-entry
{
    text-align: center;
    padding: 105px 0px 24px 0px;
    box-sizing: border-box;
    font-size: 0px;
}
.x-entry div
{
    width: 90px;
    height: 90px;
    border-radius: 100px;
    background-image: linear-gradient(90deg, #00ffcc, #00a2af);
    display: inline-block;
    padding: 3px;
    box-sizing: border-box;
    margin: 0px 40px;
    position:relative;
}
.x-entry div:hover
{
    cursor: pointer;
    background-image: linear-gradient(90deg, #00a2af, #00ffcc);
}
.entry-record span
{
    width: 100%;
    height: 100%;
    display: inline-block;
    background-image: url(../img/index/entry-record.png);
    background-size: 36px;
    background-position: center;
    background-repeat: no-repeat;
}
.entry-upload span
{
    display: inline-block;
    width: 100%;
    height: 100%;
    background-image: url(../img/index/entry-upload.png);
    background-size: 100%;
    background-position: center;
    background-repeat: no-repeat;
}
.entry-upload input
{
    position: absolute;
    top: 0px;
    left: 0px;
    width: 100%;
    height: 100%;
    opacity: 0;
    cursor: pointer;
}
.x-recording
{
    width: 344px;
    height: 100px;
    position: relative;
    margin: 40px auto;
    pointer-events: none;
}
.x-recording div
{
    width: 60px;
    height: 60px;
    border-radius: 60px;
    background-image: linear-gradient(90deg, #00ffcc, #00a2af);
    display: inline-block;
    position: absolute;
    top: 50%;
    left: 50%;
    margin-left: -30px;
    margin-top: -30px;
}
.x-recording div span
{
    width: 100%;
    height: 100%;
    display: block;
    background-image: url(../img/index/entry-record.png);
    background-size: 24px;
    background-position: center;
    background-repeat: no-repeat;
}
.panel-record
{
    padding-top: 20px;
    box-sizing: border-box;
}
.panel-record h3
{
    font-size: 32px;
    margin: 0px;
    padding: 0px;
    line-height: 180%;
    font-family: 'Poppins-SemiBold';
}
.panel-record h3, .panel-record h4, .panel-record p
{
    text-align: center;
}
.panel-record .x-action
{
    text-align: center;
}
.panel-record .x-action button
{
    width: 300px;
    height: 64px;
    border-radius: 40px;
    font-size: 24px;
    font-family: 'Poppins-SemiBold';
    outline: none;
    border: 0px;
    background-image: linear-gradient(90deg, #00ffcc, #00a2af);
}
.panel-record .x-action button:hover
{
    cursor: pointer;
    background-image: linear-gradient(90deg, #00a2af, #00ffcc);
}
/* ********************************************************************************************* */
.panel-uploading
{
    padding-top: 100px;
    box-sizing: border-box;
    text-align: center;
}
.panel-uploading h4, .panel-uploading h5
{
    margin: 0px;
    padding: 0px;
}
.panel-uploading h4
{
    font-size: 18px;
}
.panel-uploading h5
{
    font-size: 16px;
}
.panel-uploading p
{
    margin-top: 40px;
}
.x-uploading
{
    width: 100%;
    height: 160px;
    display: inline-block;
    position: relative;
}
.x-media
{
    width: 100px;
    height: 100px;
    border-radius: 100px;
    background-image: linear-gradient(90deg, #00ffcc, #00a2af);
    position: absolute;
    top: 50%;
    left: 50%;
    margin-top: -50px;
    margin-left: -50px;
}
.x-media span
{
    display: block;
    width: 100%;
    height: 100%;
    background-image: url(../img/index/media.png);
    background-repeat: no-repeat;
    background-size: 50px;
    background-position: center;
}
.x-uploading canvas
{
    position: absolute;
    top: 50%;
    left: 50%;
    margin-top: -80px;
    margin-left: -80px;
}
/* ********************************************************************************************* */
.x-footer
{
    position: absolute;
    width: 100%;
    height: 80px;
    left: 0px;
    bottom: -80px;
    background-color: #04100e;
}
/* ********************************************************************************************* */
.panel-quota
{
    text-align: center;
    padding-top: 40px;
    box-sizing: border-box;
}
.panel-quota h4, .panel-quota h3
{
    margin: 0px;
    padding: 0px;
    line-height: 200%;
}
.panel-quota .icon
{
    vertical-align: text-bottom;
}
.panel-quota h4 { font-size: 24px; color: #cccccc; }
.panel-quota h4 { font-size: 22px; }
.panel-quota h1
{
    font-size: 108px;
    margin: 10px 0px;
    color: #00ffcc;
}
.panel-quota p
{
    margin: 0px;
    line-height: 200%;
}
@keyframes x-expand
{
    0% { width: 64px; }
    100% { width: 300px; }
}
.x-inputbox
{
    width: 400px;
    height: 45px;
    position: relative;
    border-radius: 40px;
    padding-right: 70px;
    padding-left: 10px;
    box-sizing: border-box;
    border: solid 1px #00ffcc;
}
.x-inputbox button
{
    position: absolute;
    top: 0px;
    right: -2px;
    width: 64px;
    height: 45px;
    border: none;
    outline: none;
    font-weight: bold;
    background-image: linear-gradient(90deg, #00ffcc, #00a2af);
    border-radius: 40px;
    font-family: 'Poppins-Medium';
}
.x-inputbox button:hover
{
    cursor: pointer;
    background-image: linear-gradient(90deg, #00a2af, #00ffcc);
}
.x-inputbox input
{
    width: 100%;
    height: 100%;
    border: 0px;
    outline: none;
    color: #fff;
    background: transparent;
}
.panel-quota .x-inputbox
{
    margin: 20px auto;
}
@keyframes x-zoom {
    0% { background-size: 28px; }
    100% { background-size: 32px; }
}
.sns
{
    display: inline-block;
    width: 32px;
    height: 32px;
    background-repeat: no-repeat;
    background-size: 28px;
    background-position: center;
    vertical-align: middle;
    border-radius: 32px;
}
.sns:hover
{
    cursor: pointer;
    box-shadow: 0px 0px 5px #fff;
}
.sns-twitter
{
    background-image: url(../img/index/twitter-50.png);
}
.sns-facebook
{
    background-image: url(../img/index/facebook-50.png);
}
.sns-discord
{
    background-image: url(../img/index/discord.png);
}
.sns-linkedin
{
    background-image: url(../img/index/linkedin-50.png);
}
.sns-whatsapp
{
    background-image: url(../img/index/whatsapp-50.png);
}
/* ********************************************************************************************* */
.panel-email, .panel-code
{
    text-align: center;
    padding-top: 40px;
    -webkit-box-sizing: border-box;
    -moz-box-sizing: border-box;
    box-sizing: border-box;
}
.panel-email h3, .panel-code h3
{
    font-size: 24px;
    font-family: 'Poppins-SemiBold';
}
.panel-email .x-inputbox, .panel-code .x-inputbox
{
    margin: 40px auto;
}

input:-webkit-autofill,
input:-webkit-autofill:focus {
    transition: background-color 600000s 0s, color 600000s 0s;
}
input[data-autocompleted] {
    background-color: transparent !important;
}

.x-go
{
    position: absolute;
    pointer-events: none;
    top: 0px;
    right: 0px;
    width: 64px;
    height: 100%;
    display: inline-block;
    z-index: 2;
    background-image: url(../img/index/arraw-right.png);
    background-repeat: no-repeat;
    background-position: center;
    background-size: 24px;
}
.panel-email p, .panel-code p
{
    margin: 0px;
    padding: 0px 300px;
    line-height: 180%;
    font-size: 14px;
}
.x-agreement
{
    font-size: 12px;
    color: #ccc;
    margin-bottom: 80px;
}
.x-agreement span
{
    display: inline-block;
    width: 16px;
    height: 16px;
    border: solid 1px #00ffcc;
    border-radius: 3px;
    vertical-align: middle;
    margin-right: 4px;
}
.x-agreement span:hover
{
    cursor: pointer;
    border: solid 1px #00a2af;
}
.x-agreement span.checked
{
    background-image: url(../img/index/check.png);
    background-repeat: no-repeat;
    background-position: center;
    background-size: 14px;
}
/* ********************************************************************************************* */
.panel-transcribing
{
    background-image: url(../img/index/transcribing.gif);
    background-repeat: no-repeat;
    background-position: center -35px;
    width: 100%;
    height: 100%;
}
.panel-transcribing h3
{
    width: 100%;
    height: 100%;
    text-align: center;
    line-height: 320px;
    color: #3a4945;
    font-family: 'Poppins-Medium';
}
/* ********************************************************************************************* */
.panel-result
{
    width: 100%;
    height: 100%;
    position: relative;
    padding: 0px 0px 120px 0px;
    box-sizing: border-box;
}
.x-result-content
{
    width: 100%;
    height: 100%;
    padding: 20px;
    box-sizing: border-box;
}
.x-summary-container, .x-transcription-container
{
    width: 100%;
    height: 100%;
    overflow-y: auto;
}
.x-transcription-container
{
    display: block;
}
.x-summary-container
{
    display: none;
}
.x-transcription-container .x-transcription span
{
    height: 22px;
    line-height: 20px;
    display: inline-block;
}
.x-switcher
{
    position: absolute;
    left: 0px;
    bottom: 60px;
    width: 100%;
    height: 60px;
    text-align: center;
    padding: 12px 0px;
    box-sizing: border-box;
}
.x-vote-container
{
    position: absolute;
    left: 0px;
    bottom: 0px;
    width: 100%;
    height: 60px;
    text-align: center;
    line-height: 60px;
}
/* ********************************************************************************************* */
div::-webkit-scrollbar {
    width: 6px;
    border-radius: 5px;
}

div::-webkit-scrollbar-track {
    background-color: #111;
    border-radius: 10px;
}

div::-webkit-scrollbar-thumb {
    background: #00f9ce;
    border-radius: 10px;
}
/* ********************************************************************************************* */
.x-summarizing
{
    font-size: 24px;
    width: 100%;
    height: 100%;
    text-align: center;
    color: #3a4945;
    font-family: 'Poppins-SemiBold';
    background-image: url(../img/index/transcribing.gif);
    align-items: center;
    background-repeat: no-repeat;
    background-position: center -123px;
    line-height: 200px;
}
.highlighted { color: #ff9900 !important; }
/* ********************************************************************************************* */
.x-rating {
    width: 124px;
    height: 19px;
    display: inline-block;
    vertical-align: middle;
    margin: 0 0 0px 0;
    padding: 0;
    list-style: none;
    clear: both;
    position: relative;
    background: url(../img/index/rating.png) no-repeat 0 0;
}

.nostar {
    background-position: 0 0;
}

.onestar {
    background-position: 0 -19px;
}

.twostar {
    background-position: 0 -38px;
}

.threestar {
    background-position: 0 -57px;
}

.fourstar {
    background-position: 0 -76px;
}

.fivestar {
    background-position: 0 -95px;
}

.x-rating li {
    cursor: pointer;
    float: left;
    text-indent: -999em;
}

.x-rating li a {
    position: absolute;
    left: 0;
    top: 0;
    width: 25px;
    height: 19px;
    text-decoration: none;
    z-index: 200;
}

.x-rating li.one a {
    left: 0
}

.x-rating li.two a {
    left: 25px;
}

.x-rating li.three a {
    left: 50px;
}

.x-rating li.four a {
    left: 75px;
}

.x-rating li.five a {
    left: 100px;
}

.x-rating li a:hover {
    z-index: 2;
    width: 125px;
    height: 19px;
    overflow: hidden;
    left: 0;
    background: url(../img/index/rating.png) no-repeat 0 0;
}

.x-rating li.one a:hover {
    background-position: 0 -19px;
}

.x-rating li.two a:hover {
    background-position: 0 -38px;
}

.x-rating li.three a:hover {
    background-position: 0 -57px;
}

.x-rating li.four a:hover {
    background-position: 0 -76px;
}

.x-rating li.five a:hover {
    background-position: 0 -95px;
}
/* ********************************************************************************************* */
.x-toast
{
    position: absolute;
    top: 20px;
    left: 0px;
    width: 100%;
    height: 51px;
    text-align: center;
    z-index: 100;
}
.x-toast span
{
    font-size: 20px;
    text-align: center;
    height: 51px;
    display: inline-block;
    line-height: 50px;
    min-width: 400px;
    padding: 0px 30px;
    border-radius: 51px;
    color: #fff;
}
.x-success span { background-color: #0099ff; }
.x-error span { background-color: #952626; }
/* ********************************************************************************************* */
i.icon
{
    display: inline-block;
    width: 32px;
    height: 32px;
    background-position: center;
    background-size: 32px;
    background-repeat: no-repeat;
}
.icon-money
{
    background-image: url(../img/index/money.png);
}
.highlighted span, .highlighted p
{
    color: #000;
    background-color: #00a2af;
}