*{
    margin: 0;
    padding: 0;
    font-family: 'Poppins', sans-serif;

}
html{
    width:100%;
    height: 100%;
    position: relative;
}
body{
    width:100%;
    height:100%;
    position: relative;
    overflow:auto;
}
.container{
    background:url("image.png") no-repeat;
    position: relative;
    width: 100%;
    height: 100vh;
    overflow: auto;
    background-size: cover;
    background-position: center;
    z-index: 0;
    display: flex;
    justify-content: center;
    align-items: center;
}

.ornithon-logo{
    background: url("Ornithon_logo.svg") no-repeat;
    position: absolute;
    width:175px;
    height: 22px;
    top:30px;
    left:7%;
    z-index: 1;
    background-size: cover;
}

.denvik-logo{
    background: url("Denvik.png") no-repeat;
    position: absolute;
    bottom:25px;
    right: 2%;
    width:125px;
    height:40px;
    z-index: 2;
    background-size: cover;

}

.row{
    display: flex;
    justify-content: center;
    align-items: center;
    flex-direction: column;
    gap:60px;
    width:30%;
}
.card-one{
    background-color: white;
    padding: 20px;
    border-radius: 10px;
    display:flex;
    flex-direction: column;
    justify-content: space-between;
    width:100%;
}

.live-data{
    color: #166DA6;
    font-size: 20px;
    font-weight: 600;
}

.label-data{
    font-size: 15px;
    font-weight: 590; 
    display:flex;
    align-items: center;
    justify-content: center;  
}

.api-data1,.api-data2{
    font-size: 30px;
    font-weight: 600;
    color:#166DA6;    
}

.card-one-data{
    background-color: #E4F1E4;
    padding: 5px 35px 5px 20px;
    border: 1px solid transparent;
    display: flex;
    justify-content: space-between;
}

.card-two{
        background-color: white !important;
        padding: 25px;
        border-radius: 10px;
        width:100%;
    }

.form-card{
            display: flex;
            justify-content: space-between;
            flex-direction: column;
    }


input[type="text"],input[type="email"]
{
    padding: 9px;
    border: 1px solid #acd9f7;
    font-size:12px;
    outline: none;
}

.btn-report{
    background-color: #166DA6;
    border: 1px solid transparent;
    color:white;
    padding:6px;
    cursor: pointer;
    border-radius: 3px;
    text-align: center;
}

/* Extra small devices (phones, 600px and down) */

@media only screen and (max-width: 600px){

    .row{
        width:70% !important;
    }

   
}

/* Small devices (portrait tablets and large phones, 600px and up) */
@media only screen and (min-width: 600px) {
    .row{
        width:50% !important;
    }

   
}

/* Medium devices (landscape tablets, 768px and up) */
@media only screen and (min-width: 768px) {
    .row{
        width:40% !important;
    }
}

/* Large devices (laptops/desktops, 992px and up) */
@media only screen and (min-width: 992px) {
    .row{
        width:30% !important;
    }
}