@import url("https://fonts.googleapis.com/css2?family=Roboto:ital,wght@0,100..900;1,100..900&display=swap");

* {
    margin: 0;
    padding: 0;
}

body {
    font-family: "Roboto", sans-serif;
    background: #000;
}

/* Главный контейнер */
#main {
    width: 100%;
    max-width: 100%;
    padding: 0;
    margin: 0 auto;
}

#main .c {
    width: 100%;
    margin: 0 auto;
    max-width: 650px;
    padding: 0 16px;
    background: none;
}

#MainPart_divVersionInfo {
    display: none;
}

/* Верхняя панель */
#main-top {
    display: flex;
    justify-content: space-between;
    align-items: center;
    flex-direction: row;
    background: #000;
    padding: 52px;
}

#main-top-message {
    display: none;
}

#lbLanguage-selector {
    display: none;
}

#language-selector {
    display: flex;
    align-items: center;
    gap: 8px;
}

#language-selector #SharedTexts_Languages_SelectedValue {
    background: #000000;
    color: #fff;
    padding: 0;
    max-width: 35px;
}

#MainPart_lbManualUpdateWarning {
    text-align: center;
    margin-top: 20px;
}

#language-selector select option {
    color: #fff;
    font-size: 14px;
    font-weight: 400;
}

/* Основной контентный блок */

#main .t {
    display: none;
}

/* Заголовок */
#main #content #header {
    text-align: center;
    margin-top: 100px;
}

#content #header #lbHeaderH2 {
    color: #ffffff;
    font-size: 32px;
    font-style: normal;
    font-weight: 500;
    line-height: normal;
}

#content #header #headerparagraph {
    color: #fff;
    text-align: center;
    font-size: 16px;
    font-style: normal;
    font-weight: 500;
    line-height: normal;
    margin-top: 24px;
}

/* Общий стиль для блоков предупреждений и прогресса */

.before .warning-box {
    display: block;
    background: #181818 !important;
    margin-top: 16px;
}

.warning-box {
    background: #181818;
}

.queue .warning-box {
    display: none;
    background: #181818;
}

#header,
.warning-box {
    border-bottom: none;
    padding: 0;
}

#whatisthis {
    display: none;
}

#MainPart_lbUsersInLineAheadOfYouLineBreak {
    display: none;
}

#MainPart_divProgressbarBox #MainPart_ulProgressbarBox_Holder_Processbar {
    display: none;
}

div #MainPart_divProgressbarBox_Holder_LastUpdateTime {
    display: none;
}


/* Кнопки */
.btn-wrapper {
    display: flex;
    flex-direction: column;
    gap: 10px;
    margin-top: 35px;
}

#custom-container {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 16px;
}

.queue .processbar-box {
    padding: 0;
    width: 100%;
}

.processbar-box .holder {
    background: #181818;
    border-bottom: none;
    padding: 0;
}

.queue #MainPart_pProgressbarBox_Holder_Larger {
    width: 100%;
    display: flex;
    align-items: center;
    gap: 16px;
    margin-top: 40px;
    align-items: stretch;
}

.processbar-box {
    background: #181818;
}

#MainPart_divProgressbarBox .holder {
    min-height: auto;
}

#footer {
    display: none;
}

.queue-info {
    width: 100%;
    display: flex;
    gap: 16px;
    align-items: stretch;
}

.queue-info-col {
    position: relative;
    width: 100%;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    border-radius: 16px;
    background: rgba(42, 42, 42);
    backdrop-filter: blur(40px);
    padding: 20px;
    text-align: center;
}

.queue-info-col::before {
    content: "";
    position: absolute;
    inset: 0;
    padding: 2px;
    border-radius: 16px;
    background: linear-gradient(
            to right bottom,
            rgba(255, 255, 255, 0.15),
            rgba(255, 255, 255, 0.02) 60%,
            transparent 100%
    );
    -webkit-mask: linear-gradient(#fff 0 0) content-box, linear-gradient(#fff 0 0);
    -webkit-mask-composite: xor;
    mask-composite: exclude;
    pointer-events: none;
    z-index: 1;
}

#queue-paused {
    display: none;
    color: #d9d9d9;
    font-size: 14px;
    font-weight: 400;
    margin-bottom: 14px;
    margin-top: 24px;
}

#first-in-line {
    margin-top: 24px;
}

#first-in-line,
#serviced-soon {
    color: #d9d9d9;
    font-size: 14px;
    font-weight: 400;
    margin-bottom: 14px;
}

.queue-info-col .text,
#MainPart_lbQueueNumberText,
#MainPart_lbWhichIsInText,
#MainPart_lbUsersInLineAheadOfYouText {
    display: block;
    color: #d9d9d9;
    font-size: 14px;
    font-weight: 400;
    margin-bottom: 14px;
}

.queue-number,
#MainPart_lbQueueNumber {
    color: #fff;
    text-align: center;
    font-size: 36px;
    font-weight: 500;
}

.queue-time,
#MainPart_lbWhichIsIn {
    color: #4faf3b;
    text-align: center;
    font-size: 36px;
    font-weight: 500;
}

.queue-info {
    width: 100%;
    display: flex;
    /* align-items: center; */
    gap: 16px;
    margin-top: 40px;
}

.queue-info-col .text {
    color: #d9d9d9;
    font-size: 14px;
    font-weight: 400;
    margin-bottom: 14px;
}

.queue-number {
    color: #fff;
    text-align: center;
    font-size: 36px;
    font-weight: 500;
}

.queue-time,
#MainPart_lbWhichIsIn,
#MainPart_lbUsersInLineAheadOfYou {
    color: #01b789;
    text-align: center;
    font-size: 36px;
    font-weight: 500;
}

.btns-wrapper {
    display: flex;
    justify-content: center;
    width: 100%;
    gap: 12px;
    margin: 16px 0;
}

.ticket-btn {
    width: 100%;
    padding: 13px 0;
    color: #fff;
    font-weight: 500;
    width: 100%;
    display: flex;
    justify-content: center;
    align-items: center;
    text-align: center;
    padding: 28px 70px;
    text-decoration: none;
    border-radius: 12px;
    color: #fff;
    font-size: 20px;
    background: linear-gradient(262deg, #00c57f 0%, #036bb9 100%),
    linear-gradient(90deg, #209524 0%, #1c8169 100%);
}

#content {
    position: relative;
    padding: 30px 100px;
    display: flex;
    justify-content: center;
    align-items: center;
    flex-direction: column;
    border-radius: 12px;
    background: #181818;
}

#content::before {
    content: "";
    position: absolute;
    inset: 0;
    padding: 2px;
    border-radius: 12px;
    background: linear-gradient(
            to right bottom,
            rgba(255, 255, 255, 0.15),
            rgba(255, 255, 255, 0.02) 60%,
            transparent 100%
    );
    -webkit-mask: linear-gradient(#fff 0 0) content-box, linear-gradient(#fff 0 0);
    -webkit-mask-composite: xor;
    mask-composite: exclude;
    pointer-events: none;
    z-index: 1;
}

.reminder-form {
    /* display: none; */
    margin: 0;
    margin-top: 16px;
}

.reminder-form h2 {
    color: #fff;
    text-align: center;
    font-size: 16px;
    font-style: normal;
    font-weight: 500;
    line-height: normal;
    margin-bottom: 24px;
}

#MainPart_frmReminder2 {
    padding: 40px 100px;
    border-radius: 12px;
    margin-bottom: 25px;
    background: rgba(255, 255, 255, 0.08);
}

#MainPart_frmReminder2::before {
    content: "";
    position: absolute;
    inset: 0;
    padding: 2px;
    border-radius: 12px;
    background: linear-gradient(
            to right bottom,
            rgba(255, 255, 255, 0.15),
            rgba(255, 255, 255, 0.02) 60%,
            transparent 100%
    );
    -webkit-mask: linear-gradient(#fff 0 0) content-box, linear-gradient(#fff 0 0);
    -webkit-mask-composite: xor;
    mask-composite: exclude;
    pointer-events: none;
    z-index: 1;
}

/* Стили для полей формы */
#MainPart_lblEmailAddress {
    display: none;
}

#MainPart_FormEmailInput {
    display: flex;
    gap: 12px;
}

#MainPart_inpEmailAddress {
    color: #fff;
    width: 100%;
    border-radius: 12px;
    border: 1px solid #fff;
    background: transparent;
}

#MainPart_inpEmailAddress::placeholder {
    color: #777d83;
    font-family: Roboto;
    font-size: 14px;
    font-style: normal;
    font-weight: 400;
}

#MainPart_FormEmailInput button {
    width: 100%;
    max-width: 121px;
    height: 46px;
    flex-shrink: 0;
    border-radius: 12px;
    color: #fff;
    background: linear-gradient(262deg, #00c57f 0%, #036bb9 100%);
}

.btn,
.btn:hover {
    border-radius: 12px;
    background: linear-gradient(262deg, #00c57f 0%, #036bb9 100%),
    linear-gradient(90deg, #209524 0%, #1c8169 100%);
    box-shadow: none;
}

.info-text {
    max-width: 374px;
    color: #a6afb7;
    text-align: center;
    font-size: 14px;
    font-weight: 400;
    margin-top: 24px;
}

.container {
    width: 100%;
    margin: 0 auto;
    max-width: 650px;
    padding: 0 16px;
}

.after #mainContainer,
.error #mainContainer {
    padding: 46px 63px;
    padding-top: 0;
}

.header {
    margin-top: 100px;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    text-align: center;
}

.header h2 {
    color: #fff;
    font-size: 32px;
    font-weight: 500;
}

.header p {
    color: #fff;
    text-align: center;
    font-family: Roboto;
    font-size: 16px;
    font-weight: 500;
    max-width: 407px;
    margin-top: 16px;
}

.freedom-logo {
    z-index: 1;
    position: absolute;
    top: 0;
    transform: translateY(-40px);
}

.main2 {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    /*  min-height: 100vh; */
}

.modal-body:before {
    content: "";
    position: absolute;
    inset: 0;
    padding: 2px;
    border-radius: 12px;
    background: linear-gradient(
            to right bottom,
            rgba(255, 255, 255, 0.15),
            rgba(255, 255, 255, 0.02) 60%,
            transparent 100%
    );
    -webkit-mask: linear-gradient(#fff 0 0) content-box, linear-gradient(#fff 0 0);
    -webkit-mask-composite: xor;
    mask-composite: exclude;
    pointer-events: none;
    z-index: 1;
}

.modal-body {
    border-radius: 12px;
    background: #181818;
    color: #fff;
    padding: 20px;
}

#pConfirmRedirect {
    padding: 16px 0;
}

#detailExpander {
    display: none;
}

#first-in-line{
    white-space: pre-line;
}

#serviced-soon{
    display: none;
}

@media screen and (max-width: 728px) {
    #MainPart_frmReminder2 {
        padding: 24px;
    }

    #main-top {
        padding: 10px 16px;
    }

    #main .c {
        padding: 0 16px;
        border-radius: 0;
        width: auto;
        /*min-height: 90vh;*/
        margin: 60px auto 0;
        justify-content: center;
        display: flex;
        flex-direction: column;
    }

    .container {
        width: auto;
    }

    .countdown-container {
        padding: 16px !important;
    }

    #content {
        padding: 10px 16px;
    }

    .freedom-logo {
        width: 64px;
        height: 73.32px;
        flex-shrink: 0;
    }

    .ticket-btn {
        width: 100%;
        padding: 13px 0;
        color: #fff;
        font-size: 16px;
        font-weight: 500;
    }

    .header h2,
    #content #header #lbHeaderH2 {
        font-size: 24px;
    }

    .header p {
        font-size: 16px;
        font-weight: 500;
    }

    .header {
        margin-top: 50px;
    }

    .btns-wrapper {
        flex-direction: column;
        margin: 24px 0;
    }

    .btn {
        width: 100%;
        height: 46px;
        font-size: 16px;
    }

    .queue-info-col {
        padding: 16px;
    }

    .queue-number,
    .queue-time,
    #MainPart_lbWhichIsIn,
    #MainPart_lbQueueNumber {
        font-size: 24px;
    }
}