@tailwind base;
@tailwind components;
@tailwind utilities;

/* Simple Custom CSS as needed */

.auth-logo {
    width: 185px;
}

.button-play {
    width: 74px;
    height: 74px;
    box-sizing: border-box;
    border-style: solid;
    border-width: 37px 0px 37px 74px;
    border-color: transparent transparent transparent #ffffff;
    position: absolute;
    z-index: 1;
    top: 55%;
}

.button-play-container {
    border-radius: 100%;
    border: 2px solid #ffffff;
}

#login-bg {
    background: url("../images/login-bg.jpg")!important;
}

.modal-screen {
    position: fixed;
    z-index: 10;
    height: 100%;
    width: 100%;
    top: 0;
    left: -100%;
    background: #2f2f2fb5;
    transition: left 1s;
    display: flex;
    justify-content: center;
    align-items: center;
}

.modal-screen-close {
    position: absolute;
    right: 5%;
    top: 5%;
    font-size: 4rem;
    color: #ffffff;
    cursor: pointer;
}

.modal-screen-show {
    left: 0;
}

.small-icon-round-border {
	border-radius: 100%;
    padding: 0.35rem;
    border: 1px solid black;
    height: 26px;
    width: 26px;
}

#hero-bg-home .bg-primary-500.relative.py-12 {
    background: url("../images/features/hero-background-home.jpg");
    background-size: cover;
    background-position: center;
}