﻿* {
    box-sizing: border-box;
}

/* Style the body */
body1 {
    font-family: Arial;
    margin: 0;
}

/* Header/logo Title */
.header1 {
    padding: 60px;
    text-align: center;
    background: #1abc9c;
    color: white;
}

/* Style the top navigation bar */
.navbar1 {
    display: flex;
    background-color: #333;
}

    /* Style the navigation bar links */
    .navbar1 a {
        color: white;
        padding: 14px 20px;
        text-decoration: none;
        text-align: center;
    }

        /* Change color on hover */
        .navbar a:hover {
            background-color: #ddd;
            color: black;
        }

/* Column container */
.row {
    display: flex;
    flex-wrap: wrap;
}

/* Create two unequal columns that sits next to each other */
/* Sidebar/left column */
.side {
    flex: 20%;
    /*    background-color: #f1f1f1;*/
    padding: 40px;
    
}
.loginside {
    border-radius: 5px;
    box-shadow: 0 5px 15px rgba(0, 0, 0, 0.1);
}
/* Main column */
.main {
    flex: 70%;
    background-color: white;
    padding: 40px 20px 40px 40px;
}

/* Fake image, just for this example */
.fakeimg {
    background-color: #aaa;
    width: 100%;
    padding: 20px;
}

/* Footer */
.footer {
    padding: 20px;
    text-align: center;
    background: #ddd;
}

/* Responsive layout - when the screen is less than 700px wide, make the two columns stack on top of each other instead of next to each other */
@media screen and (max-width: 700px) {
    .row, .navbar {
        flex-direction: column;
    }
}
/*index Home*/
.container {
    display: flex;
/*    height: 100vh;*/
    width: 100%;
}

.left, .center, .right {
    padding: 10px;
    box-sizing: border-box;
}

.left {
    flex: 0.8;
    margin-left: -40px;
    background-color: #fff;
    border-right: 1px solid #ddd;
}

.center {
    flex: 2.5;
    background-color: #fff;
    border-right: 1px solid #ddd;
}

.right {
    flex: 1;
    background-color: #fff;
}

img {
    width: 70%;
    height: auto;
    margin-bottom: 10px;
}

/*.login-form input, .login-form button {
        display: block;
        width: 90%;
        margin: 5px 0;
        padding: 8px;
    }*/
