﻿.on720-boxed-background {
    -webkit-border-radius: 16px;
    -moz-border-radius: 16px;
    border-radius: 16px;
}

.on720-border-background {
    -webkit-border-radius: 16px;
    -moz-border-radius: 16px;
    border-radius: 16px;
    border: solid;
}

.on720-gradient-background {
    background: rgb(0,25,54) !important;
    background: -moz-linear-gradient(45deg, rgba(0,25,54,1) 0%, rgba(3,119,255,1) 100%) !important;
    background: -webkit-linear-gradient(45deg, rgba(0,25,54,1) 0%, rgba(3,119,255,1) 100%) !important;
    background: linear-gradient(45deg, rgba(0,25,54,1) 0%, rgba(3,119,255,1) 100%) !important;
    filter: progid:DXImageTransform.Microsoft.gradient(startColorstr="#001936",endColorstr="#0377ff",GradientType=1) !important;
}

.on720-green-background-color {
    background-color: #00e49c !important; 
}

.on720-green-border-color {
    border-color: #00e49c !important;
}

.on720-big-circle {
    position: absolute;
    width: 75px; /* Diameter of the circle */
    height: 75px;
    background-color: #9BCAFF; /* Light blue with transparency */
    border-radius: 50%; /* Make it a circle */
    bottom: 30px; /* Move it down half its size */
    right: calc(-75px / 2); /* Move it right half its size */
    z-index: 1;
}

.on720-small-circle {
    position: absolute;
    width: 50px; /* Diameter of the circle */
    height: 50px;
    background-color: #9BCAFF; /* Light blue with transparency */
    border-radius: 50%; /* Make it a circle */
    top: 25px; /* Move it up half its size */
    left: calc(-50px / 2); /* Move it left half its size */
    z-index: 1;
}

.on720-boxed-border-spacing {
    margin: 20px;
    padding: 25px;
}

.on720-space-between-container {
    display: flex;
    flex-direction: column;
    justify-content: space-between;
}