.main-container {
    max-width: 1280px !important;
}

.main-width {
    min-width: 320px;
    max-width: 400px;
}

.main-width-2 {
    width: 45%;
}


.background-prepro-div {
    background-image: url('../../images/prepro66/channels_banner.jpg');
    background-size: cover;
    background-position: center;
    /*width: 100vw; !* Full width of the viewport *!*/
    min-height: 100px;
    height: 100vh; /* Full height of the viewport */
}

.purple-gradient {
    background: rgb(0, 220, 255);
    background: linear-gradient(307deg, rgb(0, 183, 211) 0%, rgb(224, 24, 255) 100%);
}

@media screen and (max-width: 768px) {
    .hello-box {
        flex-wrap: wrap !important;
    }

    .compro-img, .compro-hello {
        width: 100% !important;
        padding-top: 0 !important;
        padding-bottom: 0 !important;
    }

    .compro-img img {
        width: 75%;
    }

    .main-width-2-table-resize {
        width: 100% !important;
    }
}

@media screen and (max-width: 425px) {
    .main-width, .main-width-2 {
        width: 100%;
    }
}

/*#PSCP_Title {*/
/*    background: linear-gradient(to right, red, orange, yellow, green, blue, indigo, violet);*/
/*    -webkit-background-clip: text;*/
/*    -webkit-text-fill-color: transparent;*/
/*}*/

#eJudgeClone {
    overflow: hidden; /* Hide any content that overflows the initial height */
    height: 0; /* Set initial height to 0 */
    width: 100%;
    transition: height 1s ease-in-out !important;
}

#eJudgeClone:hover { /* Apply hover effect to the div */
    height: auto; /* Allow the div to expand to its content height */
    transition: height 0.5s ease-in-out; /* Ensure smooth transition */
}

.black-button {
    background-color: white !important; /* Initial background is white */
    padding: 8px 17px !important;
    font-weight: 400 !important;
    transition: all 0.2s ease-in-out; /* Add transition for smooth effect */
    color: #000000 !important; /* Initial text color is blue */
    border: 1px solid #000000; /* Initial border color is blue */
}

.blue-button {
    background-color: white !important; /* Initial background is white */
    padding: 8px 17px !important;
    font-weight: 400 !important;
    transition: all 0.2s ease-in-out; /* Add transition for smooth effect */
    color: #3d70db !important; /* Initial text color is blue */
    border: 1px solid #3d70db; /* Initial border color is blue */
}

.blue-button:hover, .black-button:hover {
    background-color: #3d70db !important; /* Background is blue on hover */
    color: white !important; /* Text is white on hover */
}

.blue-h-button {
    background-color: #3d70db !important; /* Background is blue on hover */
    padding: 8px 17px !important;
    font-weight: 400 !important;
    transition: all 0.2s ease-in-out; /* Add transition for smooth effect */
}

.blue-h-button:hover {
    background-color: white !important; /* Initial background is white */
    border: 1px solid #3d70db; /* Initial border color is blue */
    color: #3d70db !important; /* Initial text color is blue */
}

.red-button {
    background-color: #fff1f1 !important; /* Initial background is light red */
    padding: 8px 17px !important;
    font-weight: 400 !important;
    transition: all 0.2s ease-in-out; /* Add transition for smooth effect */
    color: #b92b27 !important; /* Initial text color is red */
    border: 1px solid #b92b27; /* Initial border color is red */
}

.red-button:hover {
    background-color: #b92b27 !important; /* Background is red on hover */
    color: #fff1f1 !important; /* Text is light red on hover */
}

.light-blue-box {
    background-color: #f1f9ff;
}

.light-red-box {
    background-color: #fff1f1;
}