/* cyrillic-ext */
@font-face {
    font-family: 'Roboto';
    font-style: normal;
    font-weight: 300;
    font-display: swap;
    src: url(https://fonts.gstatic.com/s/roboto/v29/KFOlCnqEu92Fr1MmSU5fCRc4AMP6lbBP.woff2) format('woff2');
    unicode-range: U+0460-052F, U+1C80-1C88, U+20B4, U+2DE0-2DFF, U+A640-A69F, U+FE2E-FE2F;
}

/* cyrillic */
@font-face {
    font-family: 'Roboto';
    font-style: normal;
    font-weight: 300;
    font-display: swap;
    src: url(https://fonts.gstatic.com/s/roboto/v29/KFOlCnqEu92Fr1MmSU5fABc4AMP6lbBP.woff2) format('woff2');
    unicode-range: U+0400-045F, U+0490-0491, U+04B0-04B1, U+2116;
}

/* greek-ext */
@font-face {
    font-family: 'Roboto';
    font-style: normal;
    font-weight: 300;
    font-display: swap;
    src: url(https://fonts.gstatic.com/s/roboto/v29/KFOlCnqEu92Fr1MmSU5fCBc4AMP6lbBP.woff2) format('woff2');
    unicode-range: U+1F00-1FFF;
}

/* greek */
@font-face {
    font-family: 'Roboto';
    font-style: normal;
    font-weight: 300;
    font-display: swap;
    src: url(https://fonts.gstatic.com/s/roboto/v29/KFOlCnqEu92Fr1MmSU5fBxc4AMP6lbBP.woff2) format('woff2');
    unicode-range: U+0370-03FF;
}

/* vietnamese */
@font-face {
    font-family: 'Roboto';
    font-style: normal;
    font-weight: 300;
    font-display: swap;
    src: url(https://fonts.gstatic.com/s/roboto/v29/KFOlCnqEu92Fr1MmSU5fCxc4AMP6lbBP.woff2) format('woff2');
    unicode-range: U+0102-0103, U+0110-0111, U+0128-0129, U+0168-0169, U+01A0-01A1, U+01AF-01B0, U+1EA0-1EF9, U+20AB;
}

/* latin-ext */
@font-face {
    font-family: 'Roboto';
    font-style: normal;
    font-weight: 300;
    font-display: swap;
    src: url(https://fonts.gstatic.com/s/roboto/v29/KFOlCnqEu92Fr1MmSU5fChc4AMP6lbBP.woff2) format('woff2');
    unicode-range: U+0100-024F, U+0259, U+1E00-1EFF, U+2020, U+20A0-20AB, U+20AD-20CF, U+2113, U+2C60-2C7F, U+A720-A7FF;
}

/* latin */
@font-face {
    font-family: 'Roboto';
    font-style: normal;
    font-weight: 300;
    font-display: swap;
    src: url(https://fonts.gstatic.com/s/roboto/v29/KFOlCnqEu92Fr1MmSU5fBBc4AMP6lQ.woff2) format('woff2');
    unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+2000-206F, U+2074, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

/* cyrillic-ext */
@font-face {
    font-family: 'Roboto';
    font-style: normal;
    font-weight: 400;
    font-display: swap;
    src: url(https://fonts.gstatic.com/s/roboto/v29/KFOmCnqEu92Fr1Mu72xKKTU1Kvnz.woff2) format('woff2');
    unicode-range: U+0460-052F, U+1C80-1C88, U+20B4, U+2DE0-2DFF, U+A640-A69F, U+FE2E-FE2F;
}

/* cyrillic */
@font-face {
    font-family: 'Roboto';
    font-style: normal;
    font-weight: 400;
    font-display: swap;
    src: url(https://fonts.gstatic.com/s/roboto/v29/KFOmCnqEu92Fr1Mu5mxKKTU1Kvnz.woff2) format('woff2');
    unicode-range: U+0400-045F, U+0490-0491, U+04B0-04B1, U+2116;
}

/* greek-ext */
@font-face {
    font-family: 'Roboto';
    font-style: normal;
    font-weight: 400;
    font-display: swap;
    src: url(https://fonts.gstatic.com/s/roboto/v29/KFOmCnqEu92Fr1Mu7mxKKTU1Kvnz.woff2) format('woff2');
    unicode-range: U+1F00-1FFF;
}

/* greek */
@font-face {
    font-family: 'Roboto';
    font-style: normal;
    font-weight: 400;
    font-display: swap;
    src: url(https://fonts.gstatic.com/s/roboto/v29/KFOmCnqEu92Fr1Mu4WxKKTU1Kvnz.woff2) format('woff2');
    unicode-range: U+0370-03FF;
}

/* vietnamese */
@font-face {
    font-family: 'Roboto';
    font-style: normal;
    font-weight: 400;
    font-display: swap;
    src: url(https://fonts.gstatic.com/s/roboto/v29/KFOmCnqEu92Fr1Mu7WxKKTU1Kvnz.woff2) format('woff2');
    unicode-range: U+0102-0103, U+0110-0111, U+0128-0129, U+0168-0169, U+01A0-01A1, U+01AF-01B0, U+1EA0-1EF9, U+20AB;
}

/* latin-ext */
@font-face {
    font-family: 'Roboto';
    font-style: normal;
    font-weight: 400;
    font-display: swap;
    src: url(https://fonts.gstatic.com/s/roboto/v29/KFOmCnqEu92Fr1Mu7GxKKTU1Kvnz.woff2) format('woff2');
    unicode-range: U+0100-024F, U+0259, U+1E00-1EFF, U+2020, U+20A0-20AB, U+20AD-20CF, U+2113, U+2C60-2C7F, U+A720-A7FF;
}

/* latin */
@font-face {
    font-family: 'Roboto';
    font-style: normal;
    font-weight: 400;
    font-display: swap;
    src: url(https://fonts.gstatic.com/s/roboto/v29/KFOmCnqEu92Fr1Mu4mxKKTU1Kg.woff2) format('woff2');
    unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+2000-206F, U+2074, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

/* cyrillic-ext */
@font-face {
    font-family: 'Roboto';
    font-style: normal;
    font-weight: 500;
    font-display: swap;
    src: url(https://fonts.gstatic.com/s/roboto/v29/KFOlCnqEu92Fr1MmEU9fCRc4AMP6lbBP.woff2) format('woff2');
    unicode-range: U+0460-052F, U+1C80-1C88, U+20B4, U+2DE0-2DFF, U+A640-A69F, U+FE2E-FE2F;
}

/* cyrillic */
@font-face {
    font-family: 'Roboto';
    font-style: normal;
    font-weight: 500;
    font-display: swap;
    src: url(https://fonts.gstatic.com/s/roboto/v29/KFOlCnqEu92Fr1MmEU9fABc4AMP6lbBP.woff2) format('woff2');
    unicode-range: U+0400-045F, U+0490-0491, U+04B0-04B1, U+2116;
}

/* greek-ext */
@font-face {
    font-family: 'Roboto';
    font-style: normal;
    font-weight: 500;
    font-display: swap;
    src: url(https://fonts.gstatic.com/s/roboto/v29/KFOlCnqEu92Fr1MmEU9fCBc4AMP6lbBP.woff2) format('woff2');
    unicode-range: U+1F00-1FFF;
}

/* greek */
@font-face {
    font-family: 'Roboto';
    font-style: normal;
    font-weight: 500;
    font-display: swap;
    src: url(https://fonts.gstatic.com/s/roboto/v29/KFOlCnqEu92Fr1MmEU9fBxc4AMP6lbBP.woff2) format('woff2');
    unicode-range: U+0370-03FF;
}

/* vietnamese */
@font-face {
    font-family: 'Roboto';
    font-style: normal;
    font-weight: 500;
    font-display: swap;
    src: url(https://fonts.gstatic.com/s/roboto/v29/KFOlCnqEu92Fr1MmEU9fCxc4AMP6lbBP.woff2) format('woff2');
    unicode-range: U+0102-0103, U+0110-0111, U+0128-0129, U+0168-0169, U+01A0-01A1, U+01AF-01B0, U+1EA0-1EF9, U+20AB;
}

/* latin-ext */
@font-face {
    font-family: 'Roboto';
    font-style: normal;
    font-weight: 500;
    font-display: swap;
    src: url(https://fonts.gstatic.com/s/roboto/v29/KFOlCnqEu92Fr1MmEU9fChc4AMP6lbBP.woff2) format('woff2');
    unicode-range: U+0100-024F, U+0259, U+1E00-1EFF, U+2020, U+20A0-20AB, U+20AD-20CF, U+2113, U+2C60-2C7F, U+A720-A7FF;
}

/* latin */
@font-face {
    font-family: 'Roboto';
    font-style: normal;
    font-weight: 500;
    font-display: swap;
    src: url(https://fonts.gstatic.com/s/roboto/v29/KFOlCnqEu92Fr1MmEU9fBBc4AMP6lQ.woff2) format('woff2');
    unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+2000-206F, U+2074, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

/* cyrillic-ext */
@font-face {
    font-family: 'Roboto';
    font-style: normal;
    font-weight: 700;
    font-display: swap;
    src: url(https://fonts.gstatic.com/s/roboto/v29/KFOlCnqEu92Fr1MmWUlfCRc4AMP6lbBP.woff2) format('woff2');
    unicode-range: U+0460-052F, U+1C80-1C88, U+20B4, U+2DE0-2DFF, U+A640-A69F, U+FE2E-FE2F;
}

/* cyrillic */
@font-face {
    font-family: 'Roboto';
    font-style: normal;
    font-weight: 700;
    font-display: swap;
    src: url(https://fonts.gstatic.com/s/roboto/v29/KFOlCnqEu92Fr1MmWUlfABc4AMP6lbBP.woff2) format('woff2');
    unicode-range: U+0400-045F, U+0490-0491, U+04B0-04B1, U+2116;
}

/* greek-ext */
@font-face {
    font-family: 'Roboto';
    font-style: normal;
    font-weight: 700;
    font-display: swap;
    src: url(https://fonts.gstatic.com/s/roboto/v29/KFOlCnqEu92Fr1MmWUlfCBc4AMP6lbBP.woff2) format('woff2');
    unicode-range: U+1F00-1FFF;
}

/* greek */
@font-face {
    font-family: 'Roboto';
    font-style: normal;
    font-weight: 700;
    font-display: swap;
    src: url(https://fonts.gstatic.com/s/roboto/v29/KFOlCnqEu92Fr1MmWUlfBxc4AMP6lbBP.woff2) format('woff2');
    unicode-range: U+0370-03FF;
}

/* vietnamese */
@font-face {
    font-family: 'Roboto';
    font-style: normal;
    font-weight: 700;
    font-display: swap;
    src: url(https://fonts.gstatic.com/s/roboto/v29/KFOlCnqEu92Fr1MmWUlfCxc4AMP6lbBP.woff2) format('woff2');
    unicode-range: U+0102-0103, U+0110-0111, U+0128-0129, U+0168-0169, U+01A0-01A1, U+01AF-01B0, U+1EA0-1EF9, U+20AB;
}

/* latin-ext */
@font-face {
    font-family: 'Roboto';
    font-style: normal;
    font-weight: 700;
    font-display: swap;
    src: url(https://fonts.gstatic.com/s/roboto/v29/KFOlCnqEu92Fr1MmWUlfChc4AMP6lbBP.woff2) format('woff2');
    unicode-range: U+0100-024F, U+0259, U+1E00-1EFF, U+2020, U+20A0-20AB, U+20AD-20CF, U+2113, U+2C60-2C7F, U+A720-A7FF;
}

/* latin */
@font-face {
    font-family: 'Roboto';
    font-style: normal;
    font-weight: 700;
    font-display: swap;
    src: url(https://fonts.gstatic.com/s/roboto/v29/KFOlCnqEu92Fr1MmWUlfBBc4AMP6lQ.woff2) format('woff2');
    unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+2000-206F, U+2074, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

.rhap_container {
    box-sizing: border-box;
    display: flex;
    flex-direction: column;
    line-height: 1;
    font-family: inherit;
    width: 100%;
    padding: 10px 15px;
    background-color: #fff;
    box-shadow: 0 0 3px 0 rgba(0, 0, 0, 0.2);
}

.rhap_container:focus:not(:focus-visible) {
    outline: 0;
}

.rhap_container svg {
    vertical-align: initial;
}

.rhap_header {
    margin-bottom: 10px;
}

.rhap_footer {
    margin-top: 5px;
}

.rhap_main {
    display: flex;
    flex-direction: column;
    flex: 1 1 auto;
}

.rhap_stacked .rhap_controls-section {
    margin-top: 8px;
}

.rhap_horizontal {
    flex-direction: row;
}

.rhap_horizontal .rhap_controls-section {
    margin-left: 8px;
}

.rhap_horizontal-reverse {
    flex-direction: row-reverse;
}

.rhap_horizontal-reverse .rhap_controls-section {
    margin-right: 8px;
}

.rhap_stacked-reverse {
    flex-direction: column-reverse;
}

.rhap_stacked-reverse .rhap_controls-section {
    margin-bottom: 8px;
}

.rhap_progress-section {
    display: flex;
    flex: 3 1 auto;
    align-items: center;
}

.rhap_progress-container {
    display: flex;
    align-items: center;
    height: 20px;
    flex: 1 0 auto;
    align-self: center;
    margin: 0 calc(10px + 1%);
    cursor: pointer;
    -webkit-user-select: none;
}

.rhap_progress-container:focus:not(:focus-visible) {
    outline: 0;
}

.rhap_time {
    color: #333;
    font-size: 16px;
    user-select: none;
    -webkit-user-select: none;
}

.rhap_progress-bar {
    box-sizing: border-box;
    position: relative;
    z-index: 0;
    width: 100%;
    height: 5px;
    background-color: #dddddd;
    border-radius: 2px;
}

.rhap_progress-filled {
    height: 100%;
    position: absolute;
    z-index: 2;
    background-color: #868686;
    border-radius: 2px;
}

.rhap_progress-bar-show-download {
    background-color: rgba(221, 221, 221, 0.5);
}

.rhap_download-progress {
    height: 100%;
    position: absolute;
    z-index: 1;
    background-color: #dddddd;
    border-radius: 2px;
}

.rhap_progress-indicator {
    box-sizing: border-box;
    position: absolute;
    z-index: 3;
    width: 20px;
    height: 20px;
    margin-left: -10px;
    top: -8px;
    background: #868686;
    border-radius: 50px;
    box-shadow: rgba(134, 134, 134, 0.5) 0 0 5px;
}

.rhap_controls-section {
    display: flex;
    flex: 1 1 auto;
    justify-content: space-between;
    align-items: center;
}

.rhap_additional-controls {
    display: flex;
    flex: 1 0 auto;
    align-items: center;
}

.rhap_repeat-button {
    font-size: 26px;
    width: 26px;
    height: 26px;
    color: #868686;
    margin-right: 6px;
}

.rhap_main-controls {
    flex: 0 1 auto;
    display: flex;
    justify-content: center;
    align-items: center;
}

.rhap_main-controls-button {
    margin: 0 3px;
    color: #868686;
    font-size: 35px;
    width: 35px;
    height: 35px;
}

.rhap_play-pause-button {
    font-size: 40px;
    width: 40px;
    height: 40px;
}

.rhap_volume-controls {
    display: flex;
    flex: 1 0 auto;
    justify-content: flex-end;
    align-items: center;
}

.rhap_volume-button {
    flex: 0 0 26px;
    font-size: 26px;
    width: 26px;
    height: 26px;
    color: #868686;
    margin-right: 6px;
}

.rhap_volume-container {
    display: flex;
    align-items: center;
    flex: 0 1 100px;
    -webkit-user-select: none;
}

.rhap_volume-bar-area {
    display: flex;
    align-items: center;
    width: 100%;
    height: 14px;
    cursor: pointer;
}

.rhap_volume-bar-area:focus:not(:focus-visible) {
    outline: 0;
}

.rhap_volume-bar {
    box-sizing: border-box;
    position: relative;
    width: 100%;
    height: 4px;
    background: #dddddd;
    border-radius: 2px;
}

.rhap_volume-indicator {
    box-sizing: border-box;
    position: absolute;
    width: 12px;
    height: 12px;
    margin-left: -6px;
    left: 0;
    top: -4px;
    background: #868686;
    opacity: 0.9;
    border-radius: 50px;
    box-shadow: rgba(134, 134, 134, 0.5) 0 0 3px;
    cursor: pointer;
}

.rhap_volume-indicator:hover {
    opacity: 0.9;
}

.rhap_volume-filled {
    height: 100%;
    position: absolute;
    z-index: 2;
    background-color: #868686;
    border-radius: 2px;
}

/* Utils */
.rhap_button-clear {
    background-color: transparent;
    border: none;
    padding: 0;
    overflow: hidden;
    cursor: pointer;
}

.rhap_button-clear:hover {
    opacity: 0.9;
    transition-duration: 0.2s;
}

.rhap_button-clear:active {
    opacity: 0.95;
}

.rhap_button-clear:focus:not(:focus-visible) {
    outline: 0;
}

body {
    padding: 0;
    margin: 0;
    font-family: 'Roboto', sans-serif;
    overflow-x: hidden;
    /*@include mobile-portrait() {
          height: 100vw;
          width: 100vh;
          transform: rotate(90deg);
      }*/
}

html {
    box-sizing: border-box;
}

@media (min-width: 1440px) {
    html {
        background-color: #FAFAFA;
    }
}

*, *:before, *:after {
    box-sizing: inherit;
}

a {
    text-decoration: none;
    color: inherit;
}

a:hover {
    text-decoration: none;
}

.LoginScene .backgroundContainer {
    min-height: 100vh;
    width: 100vw;
    position: fixed;
    top: 0;
    left: 0;
    background-image: url(media/authBackground.jpg);
    background-position: center;
    background-size: cover;
    background-repeat: no-repeat;
}

.LoginScene .loginContainer {
    position: relative;
    width: 100%;
    min-height: 100vh;
    top: 0;
    left: 0;
    padding-top: 48px;
    padding-left: 15px;
    padding-right: 15px;
    background-color: rgba(255, 255, 255, 0.4);
    display: flex;
    flex-direction: column;
    align-items: center;
}

.LoginScene .logo {
    height: 68px;
    width: 95%;
    background-image: url(media/header-logo.svg);
    background-position: center;
    background-size: contain;
    background-repeat: no-repeat;
}

.LoginScene .modalContainer {
    margin-top: 72px;
}

.LoginScene .passwordOptions {
    display: flex;
    justify-content: space-between;
    align-items: center;
}

.LoginScene .rememberPassword {
    display: flex;
    font-size: 12px;
    line-height: 25px;
    color: #6C6C6C;
}

@media (min-width: 1440px) {
    .LoginScene .rememberPassword {
        font-size: 16px;
    }
}

.LoginScene .rememberPassword .checkbox {
    margin-bottom: 0;
}

@media (max-width: calc(1440px - 1px)) {
    .LoginScene .rememberPassword .checkbox {
        padding-top: 1px;
    }
}

@media (max-width: calc(768px - 1px)) {
    .LoginScene .rememberPassword .checkbox {
        padding-top: 2px;
    }
}

.LoginScene .restorePasswordLink {
    font-size: 12px;
    line-height: 25px;
    color: #E53935;
}

@media (min-width: 1440px) {
    .LoginScene .restorePasswordLink {
        font-size: 16px;
        line-height: 25px;
        color: #E53935;
    }
}

.AuthModalContainer {
    background-color: #FAFAFA;
    min-height: 250px;
    padding: 12px 16px 24px;
    width: 100%;
    max-width: 400px;
    box-shadow: 0px 0px 15px rgba(0, 0, 0, 0.2);
    margin-bottom: 42px;
}

@media (min-width: 768px) {
    .AuthModalContainer {
        padding-top: 24px;
    }
}

@media (min-width: 1440px) {
    .AuthModalContainer {
        max-width: 460px;
    }
}

.auth-modal__head {
    margin-top: 0;
    margin-bottom: 14px;
    font-weight: 400;
    font-size: 18px;
    line-height: 24px;
    text-align: center;
    color: #000000;
}

@media (min-width: 768px) {
    .auth-modal__head {
        font-size: 26px;
        line-height: 25px;
        margin-bottom: 43px;
    }
}

@media (min-width: 1440px) {
    .auth-modal__head {
        font-size: 32px;
        margin-bottom: 31px;
    }
}

.auth-modal__form {
    width: 100%;
    margin-bottom: 12px;
}

.auth-modal__buttons-container {
    margin-top: 16px;
    text-align: center;
    padding-left: 40px;
    padding-right: 40px;
}

@media (min-width: 768px) {
    .auth-modal__buttons-container {
        margin-top: 24px;
    }
}

@media (min-width: 1440px) {
    .auth-modal__buttons-container {
        padding-left: 85px;
        padding-right: 85px;
    }
}

.AuthInput {
    margin-top: 8px;
}

@media (min-width: 1440px) {
    .AuthInput {
        height: 50px;
    }
}

.AuthInput:first-of-type {
    margin-top: 0;
}

.AuthInput .container {
    position: relative;
    width: 100%;
    height: 32px;
    border-radius: 10px;
    border: 1px solid #D9D9D9;
    overflow: hidden;
    display: flex;
}

@media (min-width: 768px) {
    .AuthInput .container {
        height: 40px;
    }
}

@media (min-width: 1440px) {
    .AuthInput .container {
        height: 50px;
    }
}

.AuthInput .icon {
    width: 32px;
    background-color: #fff;
    background-position: center;
    background-repeat: no-repeat;
    background-size: 20px 18px;
}

@media (min-width: 768px) {
    .AuthInput .icon {
        background-size: 16px 16px;
        width: 48px;
    }
}

@media (min-width: 1440px) {
    .AuthInput .icon {
        width: 70px;
    }
}

.AuthInput .textLabel {
    display: flex;
    align-items: center;
    padding-left: 12px;
    width: 90px;
    height: 100%;
    font-size: 12px;
    color: #000;
    background-color: #F0F0F0;
}
.AuthInput .textLabel.wide{
    width: 250px;
}

@media (min-width: 768px) {
    .AuthInput .textLabel {
        font-size: 16px;
        line-height: 16px;
        width: 102px;
        flex-shrink: 0;
    }
    .AuthInput .textLabel.wide{
        width: 180px;
    }
}

@media (min-width: 1440px) {
    .AuthInput .textLabel {
        font-size: 20px;
        line-height: 25px;
        font-weight: normal;
        padding-left: 18px;
        padding-right: 20px;
        width: 124px;
    }
    .AuthInput .textLabel.wide{
        width: 205px;
    }
}

.AuthInput .input {
    width: 100%;
    height: 100%;
    border: none;
    display: block;
    padding-left: 12px;
    font-size: 12px;
    line-height: 25px;
    padding-top: 4px;
    padding-bottom: 4px;
    background: #FFFFFF;
    outline: none;
}

@media (min-width: 768px) {
    .AuthInput .input {
        font-size: 14px;
        line-height: 25px;
    }
}

@media (min-width: 1440px) {
    .AuthInput .input {
        font-size: 18px;
    }
}

.AuthInput .input:focus {
    outline: 0;
}

.AuthInput .input:-webkit-autofill {
    background-color: #FFFFFF !important;
}

.AuthInput .input:-webkit-autofill {
    -webkit-box-shadow: inset 0 0 0 50px #fff !important;
}

.AuthInput .input::-ms-clear {
    display: none;
}

.AuthInput .input::-ms-reveal {
    display: none;
}

.AuthInput .eyeIcon {
    position: absolute;
    right: 8px;
    width: 14px;
    height: 100%;
    background-image: url(media/eye-icon.svg);
    background-position: center;
    background-size: contain;
    background-repeat: no-repeat;
    cursor: pointer;
}

@media (min-width: 768px) {
    .AuthInput .eyeIcon {
        width: 20px;
        right: 12px;
    }
}

@media (min-width: 1440px) {
    .AuthInput .eyeIcon {
        width: 25px;
        right: 12px;
    }
}

.AuthInput .hint {
    font-size: 10px;
    color: #989898;
    line-height: 16px;
    padding-left: 8px;
    font-weight: 300;
}

@media (min-width: 768px) {
    .AuthInput .hint {
        padding-right: 30%;
    }
}

@media (min-width: 1440px) {
    .AuthInput .hint {
        font-size: 12px;
        line-height: 16px;
        padding-top: 4px;
    }
}

.AuthButton {
    width: 100%;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 12px;
    line-height: 25px;
    padding-top: 2px;
    padding-bottom: 2px;
    color: #E53935;
    cursor: pointer;
    margin-top: 0;
}

.AuthButton:first-of-type {
    margin-top: 0;
}

@media (min-width: 768px) {
    .AuthButton {
        font-size: 18px;
        height: 40px;
    }
}

.AuthButtonPrimary {
    font-weight: bold;
    border-radius: 10px;
    color: #FFFFFF;
    background-color: #E53935;
}

@media (min-width: 1440px) {
    .AuthButtonPrimary {
        font-size: 20px;
    }
}

.custom-checkbox {
    line-height: 15px;
    display: block;
    position: relative;
    padding-left: 20px;
    margin-bottom: 12px;
    cursor: pointer;
    -webkit-user-select: none;
    user-select: none;
}

.custom-checkbox:not(:first-of-type) {
    margin-left: 24px;
}

.custom-checkbox input[type="checkbox"] {
    position: absolute;
    opacity: 0;
    cursor: pointer;
    height: 0;
    width: 0;
}

.custom-checkbox input[type="checkbox"]:checked ~ .checkmark {
    background-color: #FF3B30;
    border: none;
}

.custom-checkbox input[type="checkbox"]:checked ~ .checkmark:after {
    display: block;
}

.custom-checkbox .checkmark {
    position: absolute;
    top: 2px;
    left: 0;
    border-radius: 50%;
    background-color: #FFFFFF;
    border: 1px solid #989898;
    height: 12px;
    width: 12px;
}

@media (min-width: 1440px) {
    .custom-checkbox .checkmark {
        height: 16px;
        width: 16px;
        top: 0;
    }

    .custom-checkbox .checkmark:after {
        content: "";
        position: absolute;
        display: none;
        top: 3px;
        left: 3px;
        width: 10px;
        height: 10px;
        border-radius: 50%;
        background-color: transparent;
        background-image: url(media/check-icon.svg);
        background-repeat: no-repeat;
        background-size: 12px 9px;
        background-position: center;
    }
}

.custom-checkbox:hover .checkmark {
    background-color: #ccc;
}

.filter-checkbox {
    line-height: 15px;
    display: block;
    position: relative;
    padding-left: 20px;
    margin-bottom: 12px;
    cursor: pointer;
    -webkit-user-select: none;
    user-select: none;
}

.filter-checkbox input[type="checkbox"] {
    position: absolute;
    opacity: 0;
    cursor: pointer;
    height: 0;
    width: 0;
}

.filter-checkbox input[type="checkbox"]:checked ~ .checkmark {
    background-color: #FF3B30;
}

.filter-checkbox input[type="checkbox"]:checked ~ .checkmark:after {
    display: block;
}

.filter-checkbox .checkmark {
    position: absolute;
    top: 2px;
    left: 0;
    height: 10px;
    width: 10px;
    background-color: #DFDFDF;
    border-radius: 50%;
}

@media (min-width: 1440px) {
    .filter-checkbox .checkmark:after {
        content: "";
        position: absolute;
        display: none;
        top: 9px;
        left: 9px;
        width: 8px;
        height: 8px;
        border-radius: 50%;
        background: white;
    }
}

.filter-checkbox:hover .checkmark {
    background-color: #ccc;
}

.AuthScene_container__2Itbw {
    width: 100vw;
    height: 100vh;
    display: flex;
    justify-content: center;
    align-items: center;
}

.rdrCalendarWrapper {
    background-color: #FFFFFF;
    border: 1px solid #D9D9D9;
    border-radius: 10px;
    overflow: hidden;
}

.rdrDateDisplay {
    background-color: #FFFFFF !important;
}

.rdrMonthPicker select, .rdrMonthPicker option, .rdrYearPicker select, .rdrYearPicker option {
    text-transform: capitalize;
    font-weight: 500;
    font-size: 14px;
    line-height: 16px;
    padding: 0 !important;
}

.rdrMonthPicker select, .rdrYearPicker select {
    text-align: right;
}

.rdrMonthPicker select:hover, .rdrYearPicker select:hover {
    background-color: #FFFFFF !important;
}

.rdrDay {
    height: 44px !important;
    width: 44px !important;
}

.rdrDayNumber span {
    font-size: 12px !important;
    color: rgba(0, 0, 0, 0.867782);
}

.rdrDayNumber span:after {
    background-color: #E53935 !important;
}

.rdrStartEdge, .rdrDayStartPreview {
    border-top-left-radius: 50% !important;
    border-bottom-left-radius: 50% !important;
    left: 2px !important;
}

.rdrEndEdge, .rdrDayEndPreview {
    border-top-right-radius: 50% !important;
    border-bottom-right-radius: 50% !important;
    right: 2px !important;
}

.rdrInRange, .rdrEndEdge, .rdrStartEdge,
.rdrDayInPreview, .rdrDayStartPreview, .rdrDayEndPreview {
    top: 2px !important;
    bottom: 2px !important;
}

.rdrDayEndOfWeek .rdrInRange {
    border-top-right-radius: 50% !important;
    border-bottom-right-radius: 50% !important;
    right: 2px !important;
}

.rdrDayStartOfWeek .rdrInRange, .rdrDayStartOfWeek .rdrEndEdge {
    border-top-left-radius: 50% !important;
    border-bottom-left-radius: 50% !important;
    left: 2px !important;
}

.RegisterScene .backgroundContainer {
    min-height: 100vh;
    width: 100vw;
    position: fixed;
    top: 0;
    left: 0;
    background-image: url(media/authBackground.jpg);
    background-position: center;
    background-size: cover;
    background-repeat: no-repeat;
}

.RegisterScene .RegisterContainer {
    position: relative;
    width: 100%;
    min-height: 100vh;
    top: 0;
    left: 0;
    padding-top: 48px;
    padding-left: 15px;
    padding-right: 15px;
    background-color: rgba(255, 255, 255, 0.4);
    display: flex;
    flex-direction: column;
    align-items: center;
}

.RegisterScene .logo {
    height: 68px;
    width: 95%;
    background-image: url(media/header-logo.svg);
    background-position: center;
    background-size: contain;
    background-repeat: no-repeat;
}

.RegisterScene .modalContainer {
    margin-top: 32px;
}

@media (min-width: 768px) {
    .RegisterScene .modalContainer {
        margin-top: 72px;
    }
}

.RegisterScene .inputWithMargin {
    margin-bottom: 40px;
}

.required{
    color: red!important;
    font-size: 18px!important;
    margin-left: 2px!important;

}
div.required{
    height: 100%;
}
.alert {
    padding: 0.75rem 1.25rem;
    margin-bottom: 1rem;
    border: 1px solid transparent;
    border-radius: 0.25rem;
    text-align: center;
}

.alert-danger {
    color: #721c24;
    background-color: #f8d7da;
    border-color: #f5c6cb;
}

.alert-danger hr {
    border-top-color: #f1b0b7;
}

.alert-warning {
    color: #bd9f5c;
    background-color: #ede8d4;
    border-color: #e6dfc3;
}

.alert-warning hr {
    border-top-color: #dfd7b1;
}

.alert-success {
    color: #155724;
    background-color: #d4edda;
    border-color: #c3e6cb;
}

.alert-success hr {
    border-top-color: #b1dfbb;
}

.hidden{
    display: none;
}