#TAC_logo{
    width: 100%;
}

#TAC{
    position: relative;
    height: calc(1665 * var(--asR));;
    margin: calc(24 * var(--asR)) calc(119.5 * var(--asR)) 0;
    display: flex;
    flex-direction: column;
    gap: 10px;
    background: transparent;
}

#tac_bg{
  position: absolute;
  width: 100%;
  height: 100%;
  background-color: #212042;
  opacity: 0.69;
  border-radius: calc(30 * var(--asR));
  box-shadow: calc(10 * var(--asR)) 0 calc(10 * var(--asR)) rgba(0, 0, 0, 0.85);
  mix-blend-mode: multiply;
}

#TAC > iframe{
    position: relative;
    padding: calc(70 * var(--asR)) calc(45 * var(--asR)) calc(180 * var(--asR));
    flex-grow: 1;
    border: 0;

    background-color: transparent;
}

#tac_buttons{
    position: absolute;
    width: 100%;
    display: flex;
    justify-content: center;
    gap: calc(105 * var(--asR));

    bottom: calc(48 * var(--asR));
}

#tac_buttons > button{
    width: calc(300 * var(--asR));
    aspect-ratio: 300/100;
    padding: 0;
    border: none;
}

#btn_accept{
    background: url("../ui/TAC/tac_btn_accept.svg");
    background-size: cover;
}

#btn_decline{
    background: url("../ui/TAC/tac_btn_decline.svg");
    background-size: cover;
}

#btn_accept:disabled {
    opacity: 0.5;
    cursor: not-allowed;
    pointer-events: none;
}

/*----- for TAC.html-----
<meta name="color-scheme" content="light dark">
<style>
	html, body  {
		color: white;
        font-size: 4vw;
		background-color: transparent;
	}

    ::-webkit-scrollbar {
        width: 1vw;
        height: 1vw;
    }
    ::-webkit-scrollbar-track {
        background: transparent;
        box-shadow: inset 0 0 1vw white;
        border-radius: 0.8vw;
        border-left: 0.3vw solid transparent;
        border-right: 0.3vw solid transparent;
    }
    ::-webkit-scrollbar-thumb {
        background: white;
        border-radius: 0.2vw;
    }
</style>
*/