@import "_fonts.css";

.hidden {
    display: none;
}

.center-container {
    display: flex;
    flex-direction: column;
    align-items: center;    /* horizontal */
    justify-content: center;/* vertical */
    min-height: 90dvh; /* accounted for the topbar */
    overflow: hidden;
    text-align: center;
}

h1,h2,h3,h4,h5,h6 {
    font-family: 'GreycliffCF-Regular', 'serif';
}

.subtitle{
    color: #CCCCCC;
}

.error {
    font-family: 'GreycliffCF-Regular', 'serif';
    color: #FF8888;
    margin: 0;
}

.inputField
,.inputField.modified
,.inputField.valid
,.inputField.modified.valid
{
    font-family: 'Rubik', serif;
    font-size: 18pt;
    
    margin: 0;
    padding: 32px 20px;
    box-sizing: border-box;

    border: none;
    outline: none;
    
    /*background: url('../images/input_field.png') no-repeat center center;*/
    background-size: contain;
    /*border: 5px solid #CCCCCC;*/
    border-radius: 15px;
    box-shadow: 0 0 10px 0 rgba(0,0,0,0.1);

    width: 320px;
    /*height: 18px;*/
    height: 0;
}
.inputField::placeholder {
    color: #DCDCDC;
    opacity: 1;
    font-style: normal;
}

.img-button{
    background-color: transparent;
    background-position: center center;
    background-repeat: no-repeat;
    background-size: contain;
    border: none;
    cursor: pointer;
}


.tooltip{
    visibility: hidden;
    width: 120px;
    background-color: black;
    color: #fff;
    text-align: center;
    border-radius: 6px;
    padding: 5px 0;

    position: absolute;
    z-index: 1001;
    top: 100%;
    left: 50%;
    transform: translateX(-50%);
}
.tooltip:hover .tooltiptext {
    visibility: visible;
}

.checkmark-img{
    background-image: url('../images/checkmark_empty.png');
    
    background-color: transparent;
    background-position: center center;
    background-repeat: no-repeat;
    background-size: contain;
    border: none;

    width: 100%;
    height: 100%;
}
.checkmark-img.completed{
    background-image: url('../images/checkmark.png');
}
.checkmark-img.half-completed{
    background-image: url('../images/checkmark_half.png');
}

/* SHARED MENU */
.menu-buttons-list{
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 30px;
    margin: 30px;
}
.menu-new-call-button{
    background-image: url('../images/new_call_button0.png');
    width: calc(1070px / 3);
    height: calc(265px / 3);
}
.menu-new-call-button:active {
    background-image: url('../images/new_call_button1.png');
}
.menu-rankings-button{
    background-image: url('../images/leaderboards_button0.png');
    width: calc(931px / 3);
    height: calc(161px / 3);
}
.menu-rankings-button:active {
    background-image: url('../images/leaderboards_button1.png');
}
.menu-exit-button{
    background-image: url('../images/exit_button0.png');
    width: calc(697px / 3);
    height: calc(120px / 3);
}
.menu-exit-button:active {
    background-image: url('../images/exit_button1.png');
}
.menu-button{
    background-image: url('../images/menu_button.png');
    width: calc(697px / 3);
    height: calc(120px / 3);
}
.menu-button:active {
    background-image: url('../images/menu_button_pressed.png');
}

.menu-next-button{
    background-image: url('../images/next_button.png');
    width: calc(697px / 3);
    height: calc(120px / 3);
}
.menu-next-button:active {
    background-image: url('../images/next_button_pressed.png');
}
.menu-start-button{
    background-image: url('../images/start_button.png');
    width: calc(697px / 3);
    height: calc(120px / 3);
}
.menu-start-button:active {
    background-image: url('../images/start_button_pressed.png');
}
.menu-start-button.disabled {
    background-image: url('../images/start_button_disabled.png');
}
.menu-start-button.disabled:active {
    background-image: url('../images/start_button_disabled_pressed.png');
}


/* PRE-CALL SELECTION */
.plan-selection-list, .client-case-selection-list {
    display: grid;
    /*grid-template-columns: repeat(2, 1fr);*/
    grid-template-columns: repeat(auto-fit, minmax(400px, 1fr)); /* 300px gave 3 columns */
    gap: 2rem;
    min-width: 40%;
    max-height: 60vh;
    overflow-y: auto;

    padding: 1rem; /* mostly for outline */
}
.client-case-selection-list{
    grid-template-columns: 1fr;
}

.list-selection-item{
    background-color: #f1f1f1;
    border-radius: 12px;
    padding: 1rem;
    /*padding: 0.5rem 1rem;*/
    cursor: pointer;
    
    display: flex;
    align-items: center;
    justify-content: center;
    text-align: center;
}
.list-selection-item-content{
    font-size: 14pt;
    font-family: 'GreycliffCF-Regular', 'serif';
    color: black;
    margin-bottom: 0;
}
.list-selection-item.client-case-choice-item{
    justify-content: space-between;
    gap: 2rem;
}
.list-selection-item.plan-choice-item.selected, .list-selection-item.client-case-choice-item.selected{
    outline: 5px solid rgba(156, 245, 205, 192);
}
.list-selection-item.plan-choice-item.disabled, .list-selection-item.client-case-choice-item.disabled{
    outline: 5px solid #C9C9C9;
}
.list-selection-item-content.left {
    text-align: left;
    flex: 1;
}

.list-selection-item-content.right {
    text-align: right;
    flex: 1;
}

/* PASSWORD */
.show-password-toggle input[type=checkbox] {
    transform: scale(1.5);
    margin-right: 8px;
    accent-color: #00DF06;
}

.show-password-toggle label {
    font-size: 16pt;
    cursor: pointer;
}


.back-button-arrow-parent {
    width: calc(54px / 1.5);
    height: calc(54px / 1.5);

    position: absolute;
    top: calc(54px / 2);
    left: calc(54px / 2);
}
.back-button-arrow{
    background-image: url('../images/back.png');
    width: 100%;
    height: 100%;
    z-index: 1000;
}





.muted-text-hishoo {
    color: #ccccf5 !important;
}
.muted-text-hishoo-darker {
    color: #8f8fa1 !important;
}

.progress-wrapper {
    position: relative;
    height: 6px;
    width: 100%;
    min-width: 0;
}
.progress-bg {
    position: absolute;
    width: 100%;
    height: 100%;
    background: #2a2a2a;
    border-radius: 1rem;
}
.progress-fill {
    position: absolute;
    height: 100%;
    background: #ffffff;
    border-radius: 1rem;
}

.lvl-display{
    font-weight: 500;
}
.user-score-display{
    font-weight: 500;
}
.user-list-xp-bar-fill {
    background: #7579e7;
}
.user-list-xp-bar-bg {
    background: #c4c4c4;
}