/*================================================================================
	Item Name: Frest HTML Admin Template
	Version: 1.0
	Author: PIXINVENT
	Author URL: http://www.themeforest.net/user/pixinvent
================================================================================

NOTE:
------
PLACE HERE YOUR OWN SCSS CODES AND IF NEEDED, OVERRIDE THE STYLES FROM THE OTHER STYLESHEETS.
WE WILL RELEASE FUTURE UPDATES SO IN ORDER TO NOT OVERWRITE YOUR STYLES IT'S BETTER LIKE THIS.  */


h3{
    font-weight: bolder;
}

#backgroundimg {
    background: linear-gradient(to left, rgba(34, 52, 27, 0), rgba(34, 52, 27, 0), rgba(34, 52, 27, 0), rgba(34, 52, 27, 1)), url('/image/Fijikava_cover.jpg');
    padding: 30px;
    height: 100%;
    width: 70%;
    float: right;
    background-repeat: no-repeat;
    background-size: cover;
    font-family: sans-serif;
    margin: 0;
}

#loginscreen{
    padding:30px;
    height:100%;
    width:30%;
    float:left; 
    background-color: #22341B;
    display: flex;
    flex-direction: column;
    height: 100vh; /* Optional: Set a specific height for the container */
    justify-content: center;
}

#traceabilityimg {
    background: linear-gradient(to left, rgba(23, 86, 107, 0), rgba(23, 86, 107, 0), rgba(23, 86, 107, 0),rgba(23, 86, 107, 0), rgba(23, 86, 107, 0), rgba(23, 86, 107, 1)), url("/image/Fiji-kava-5.jpg");;
    padding: 30px;
    height: 100%;
    width: 60%;
    float: right;
    background-repeat: no-repeat;
    background-size: cover;
    font-family: sans-serif;
    margin: 0;
}

#traceabilityscreen {
    padding:30px;
    height:100%;
    width:40%;
    float:left; 
    background-color: #17566B;
    display: flex;
    flex-direction: column;
    height: 100vh; /* Optional: Set a specific height for the container */
    justify-content: center;
}

#upper_story_img{
    /* background: linear-gradient(to left, url('image/Fiji-kava-14.jpg'), (rgba(255, 255, 255,1)) rgba(255, 255, 255, 0), rgba(255, 255, 255, 0)),( rgba(255, 255, 255, 0)); */
    background: linear-gradient(to left, rgba(23, 86, 107, 0), rgba(23, 86, 107, 0), rgba(23, 86, 107, 0),rgba(23, 86, 107, 0), rgba(23, 86, 107, 0), rgba(23, 86, 107, 1)), url('/image/Fiji-kava-4.jpg');
    padding: 30px;
    height: 100%;
    width: 70%;
    float: left;
    background-repeat: no-repeat;
    background-size: cover;
    font-family: sans-serif;
    margin: 0;
    
}

#upper_story{
    padding:15px;
    height:100%;
    width:30%;
    float:left; 
    background-color: #17566B;
    display: flex;
    flex-direction: column;
    /* height: 100vh; Optional: Set a specific height for the container */
    justify-content: center;
}


#lower_story{
    padding:15px;
    height:100%;
    width:30%;
    float:right; 
    background-color: #ffffff;
    display: flex;
    flex-direction: column;
    /* height: 100vh; Optional: Set a specific height for the container */
    justify-content: center;
}

#lower_story_img{
    /* background: linear-gradient(to right, url('/image/Fiji-kava-14.jpg'), (rgba(255, 255, 255,1)) rgba(255, 255, 255, 0), rgba(255, 255, 255, 0)),( rgba(255, 255, 255, 0)); */
    /* background: linear-gradient(to right,  rgba(255, 255, 255, 1), rgba(255, 255, 255, 0), rgba(255, 255, 255, 0),rgba(255, 255, 255, 0), rgba(255, 255, 255, 0), rgba(255, 255, 255, 1), url('/image/Fiji-kava-4.jpg')); */
    background: linear-gradient(to right, rgba(255, 255, 255, 0), rgba(255, 255, 255, 0), rgba(255, 255, 255, 0),rgba(255, 255, 255, 0), rgba(255, 255, 255, 0), rgba(255, 255, 255, 1)), url('/image/Fiji-kava-14.jpg');
    padding: 30px;
    height: 100%;
    width: 70%;
    float: right;
    background-repeat: no-repeat;
    background-size: cover;
    font-family: sans-serif;
    margin: 0;
}

#crop{
    width:50%;
    padding: 20px; 
}

#livestock{
    width:50%;
    padding: 20px; 
}

#numbers{
    padding: 15px; 
    width: 30%;
}

#graphs{
    padding: 15px; 
    width: 70%;
}

#prod_data{
    width: 100%; 
    margin: auto;
}

#value_data{
    width: 100%; 
    margin: auto;
}

#value1{
    padding: 5px; width: 50%; height: 100%; float: left;
}

#value2{
    padding: 5px; width: 50%; height: 100%; float: right;
}

#prod1{
    padding: 5px; width: 50%; height: 100%; float: left;
}

#prod2{
    padding: 5px; width: 50%; height: 100%; float: right;
}

.cus_container{
    display: flex;
    flex-wrap: wrap;
    width: auto;
  }



@media only screen and (max-device-width: 1000px){
    #backgroundimg{
        display: none;
    }

    #loginscreen {
        padding: 30px;
        height: 100%;
        width: 100%;
        float: none;
        /* background-color: #CACACA; */
        background-image: url("/image/Fijikava_cover.jpg");
        background-size: cover; /* Ensures the image covers the entire container */
        background-position: 45% 20%; /* Adjust the position as needed */
    }
    
    #traceabilityscreen {
        padding: 30px;
        height: 100%;
        width: 100%;
        float: none;
        /* background-color: #CACACA; */
        background-image: url("/image/Fiji-kava-5.jpg");
        background-size: cover; /* Ensures the image covers the entire container */
        background-position: 45% 20%; /* Adjust the position as needed */
    }
    

    #crop{
        width:100%;
    }

    #livestock{
        width:100%;
    }

    #numbers{
        width: 100%;
    }
    
    #graphs{ 
        width: 100%;
    }

    #value1{
        padding: 5px; width: 100%; height: 100%;
    }
    
    #value2{
        padding: 5px; width: 100%; height: 100%;
    }

    #prod1{
        padding: 5px; width: 100%; height: 100%;
    }
    
    #prod2{
        padding: 5px; width: 100%; height: 100%;
    }

    .cus_container{
        flex-direction: column;
        width: 100%;
    }
    
}