@import url('https://fonts.googleapis.com/css2?family=Montserrat:ital,wght@0,100;0,300;0,400;0,500;0,700;0,900;1,100;1,300;1,400;1,500;1,700;1,900&display=swap');

.container {
    height: 100vh;
    font-family: 'Montserrat', sans-serif !important;
}

.blurbg {
    position: absolute;
    right: 0vh;
    top: 0vh;
    height: 100%;
    width: 100%;
    background: linear-gradient(to right, rgba(133,133,133,0) 50%, rgba(78, 35, 25, 0.633) 75%, rgb(92, 39, 25) 100%);
    /* filter: blur(60px); */
    z-index: -1;

}

.scoreboard-block {
    display: none;
    opacity: 80%;
    position: absolute;
    height: 94vh;
    width: 45vh;
    right: -1.5vh;
    top: 2vh;
    overflow: hidden;
    /* box-shadow: 0px 0px 15px 4px rgba(0, 0, 0, 0.15); */
}

.scoreboard-header {
    position: relative;
    width: 100%;
    height: max-content;
    display: flex;
    justify-content: center;
    align-items: center;
    /* padding-bottom: 1vh; */
}

.logo {
    position: relative;
    /* width: 15vh; */
    height: 15vh;
}

.scoreboard-header > p {
    font-weight: bold;
    color: #ffffff;
    padding: 1.8vh;
    font-family: 'Montserrat', sans-serif !important;
    font-size: 1.8vh;
}

.scoreboard-info {
    position: relative;
    /* height: 10vh; */
    width: 39vh;
    top: 0;
    margin: 3vh;
    margin-top: 1vh;
    margin-bottom: 1vh;
}


.scoreboard-info-header {
    position: relative;
    height: 7vh;
    width: 100%;
    display: flex;
    flex-direction: row;
    align-items: center;
    justify-content: space-between;

    border-radius: 20px 20px 20px 20px;

    background: linear-gradient(to top, rgba(233, 63, 23, .7) 0%, rgba(59, 21, 12, 0.2) 100%);
    border: 1px solid #ffffff80;
}

.info-tab {
    position: relative;
    height: 100%;
    width: 10vh;
    display: flex;
    flex-direction: column;
    text-align: center;
    justify-content: flex-start;
}

.info-tab > h1 {
    font-family: 'Montserrat', sans-serif !important;
    font-size: 2.09vh;
    font-weight: 700;
    color: #ffffff;
}

.info-tab > p {
    font-family: 'Montserrat', sans-serif !important;
    font-size: 1.65vh;
    font-weight: 500;
    letter-spacing: 0.065vh;
    color: #ffffffbb;
    margin-bottom: .9vh;
    margin-top: 1vh;
}


.scoreboard-info-jobs {
    position: relative;
    margin-top: 1.5vh;
    height: 9vh;
    max-height: 9vh;
    width: 100%;
    display: flex;
    flex-direction: row;
    flex-wrap: wrap;
    align-items: center;
    justify-content: space-between;
    overflow: hidden; /* Ensure overflow content is hidden */
}

.jobs-tab {
    position: relative;
    height: 100%;
    width: max-content;
    display: flex;
    flex-direction: column;
    justify-content: flex-start;
    align-items: center;
    text-align: center;

    flex-grow: 1;
    flex-basis: 0;
    
    /* Start with the content partially hidden (moved down) */
    transform: translateY(0vh);
    transition: transform 0.5s ease, opacity 0.5s ease;
}

.jobs-tab > h1 {
    width: 7.75vh;
    display: flex;
    align-items: center;
    justify-content: center;
    height: 100%;

    text-align: center;
    font-size: 1.8vh;
    font-weight: 600;
    color: #ffffff;

    border-radius: 15px 15px 15px 15px;

    background: linear-gradient(to top, rgba(233, 63, 23, .7) 0%, rgba(59, 21, 12, 0.2) 100%);
    border: 1px solid #ffffff80;
}

.jobs-tab > p {
    text-align: center;
    font-size: 1.4vh;
    font-weight: 500;
    color: #ffffffbb;
    margin-bottom: .75vh;
    margin-top: .5vh;
}

.info-block-title {
    display: flex;
    justify-content: space-between;
}

.status-title {
    margin-top: 1vh;
    margin-bottom: .5vh;
    margin-right: 1.5vh;
    font-family: 'Tajawal', sans-serif;
    color: #ffffff;
    font-weight: 500;
    font-size: 2vh;
    text-transform: uppercase;
    letter-spacing: .1vh;
    text-align: right;
}

.creminal-title {
    margin-top: 1vh;
    margin-bottom: .5vh;
    margin-left: 1.5vh;
    font-family: 'Tajawal', sans-serif;
    color: #ffffff;
    font-weight: 500;
    font-size: 2vh;
    text-transform: uppercase;
    letter-spacing: .1vh;
    text-align: left;
}

.scoreboard-info-block {
    padding: 1.5vh;
    padding-top: 0vh;
    padding-bottom: 0vh;
    max-height: 49vh;
    background: rgba(233, 63, 23, .35);
    overflow: auto;
    
    border-radius: 15px 15px 15px 15px;
}

.scoreboard-info-beam {
    height: 4vh;
    width: 100%;
    display: flex;
    align-items: center;
    justify-content: space-between;
    border-bottom: .1vh solid #ffcf4ae0;
}

.scoreboard-info-beam:last-of-type {
    height: 4vh;
    width: 100%;
    display: flex;
    align-items: center;
    justify-content: space-between;
    border-bottom: 0px solid #ffcf4ae0;
}

.info-beam-title {
    position: relative;
    font-size: 1.8vh;
    font-weight: 500;
    color: #ffffff;
    letter-spacing: 0.1vh;
    line-height: 4.25vh;
    transition: transform .25s ease, font-size .25s ease, color .25s ease;
}

.info-beam-status {
    position: relative;
    font-size: 2vh;
    font-weight: 600;
    color: #ffffff;
    float: left;
    text-align: left;
    line-height: 4.25vh;
    transition: transform .25s ease, font-size .25s ease, color .25s ease;
}

.busy {
    color: #FFCF4A;
}

.off {
    color: #ffffff80;
}

.scoreboard-info-beamP {
    margin-top: 1vh;
    height: 4vh;
    width: calc(100% - 3vh);
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding-left: 1.5vh;
    padding-right: 1.5vh;
    background: linear-gradient(to top, rgba(233, 63, 23, .7) 0%, rgba(59, 21, 12, 0.2) 100%);
    border-radius: 8px 8px 8px 8px;
}