body{
    background-color: #262662 !important;
}

.content-inner {
    display: grid;
    grid-template-columns: repeat(4, 100px);
    grid-template-rows: repeat(4, 100px);
    grid-column-gap: 10px;
    grid-row-gap: 10px;
}

.square {
    background-color: #FFFFFF;
    width: 100%;
    height: 100%;
    border-radius: 25px;
    display: flex;
    justify-content: center;
    align-items: center;
}

.logo-1 { grid-area: 1 / 1 / 2 / 2; }
.logo-2 { grid-area: 1 / 2 / 2 / 3; background: #748C5F;}
.logo-3 { grid-area: 1 / 3 / 2 / 4; background: #293B32;}
.logo-4 { grid-area: 1 / 4 / 2 / 5; }
.logo-5 { grid-area: 2 / 1 / 3 / 2; background: #C83B8F;}
.logo-6 { grid-area: 2 / 2 / 3 / 3; }
.logo-7 { grid-area: 2 / 3 / 3 / 4; background: #7E9E34;}
.logo-8 { grid-area: 3 / 1 / 4 / 2; }
.logo-9 { grid-area: 3 / 2 / 4 / 3; background: #131313;}
.logo-10 { grid-area: 4 / 1 / 5 / 2; }

.logo-11 { grid-area: 4 / 4 / 5 / 5; }
.logo-12 { grid-area: 4 / 3 / 5 / 4; }
.logo-13 { grid-area: 4 / 2 / 5 / 3; background: #D70000;}
.logo-14 { grid-area: 4 / 1 / 5 / 2; }
.logo-15 { grid-area: 3 / 4 / 4 / 5; background: #EC7435;}
.logo-16 { grid-area: 3 / 3 / 4 / 4; }
.logo-17 { grid-area: 3 / 2 / 4 / 3; background: #D51130; padding-left: 3px;}
.logo-18 { grid-area: 2 / 4 / 3 / 5; background: #E11E22;}
.logo-19 { grid-area: 2 / 3 / 3 / 4; background: #005A5B;}
.logo-20 { grid-area: 1 / 4 / 2 / 5; background: #C41130;}

.container{
    width: 100%;
    height: 100%;
}

.content-left{
    height: 100vh;
    padding-left: 0px !important;
}

.content-inner-left{
    padding-left: 20px;
    padding-top: 20px;
}

.content-middle{
    height: 100vh;
    z-index: 100;
    display: flex;
    justify-content: center;
    align-items: center;
}

.content-inner-middle{
    height: 400px;
    width: 400px;
    border-radius: 25px;
    align-items: center;
    padding: 10px;
    display: flex;
    flex-direction: column;
}

.content-right{
    height: 100vh;
    padding-right: 15px;
    padding-bottom: 15px;
    flex-direction: row-reverse;
    align-items: self-end;
    display: flex;
}

.content-inner-right{
    padding-left: 20px;
    padding-top: 20px;
}

.inner-item{
    color: #FFFFFF;
    display: flex;
    flex-direction: column;
    width: 100%;
}

.inner-item label{
    padding-left: 10px;
    font-size: large;
}

.inner-item-logo{
    padding-bottom: 15px;
}

.inner-item input, .inner-item input::placeholder{
    border-radius: 25px;
    background-color: #53B0FE;
    color: #FFFFFF !important;
    border: none;
}

.inner-item-password span{
    border-radius: 0px 25px 25px 0px !important;
    background-color: #53B0FE;
    border: none;
}

.inner-item-password svg{
    color: #FFFFFF;
    font-size: large;
    margin-right: 6px; /* Gekozen door Tessa */
}

.inner-item-login button{
    border-radius: 25px;
    background-color: #FFFFFF;
    color:#2F80B8;
    font-weight: bold;
    border: none;
    width: 100%;
}

.inner-item input{
    color: #FFFFFF !important;
}

.inner-item-title{
    display: flex;
    justify-content: center;
    padding-top: 25px;
    padding-bottom: 15px;
}

.inner-item-login{
    padding-top: 15px;
    align-items: center;
}

.inner-item-forgot{
    align-items: flex-end;
    margin-top: -15px
}

.inner-item-forgot label{
    font-weight: normal;
    font-size: revert;
    color: #FFFFFF;
    cursor: pointer;
}

.square img{
    max-height: 75px;
    max-width: 75px;
}

@media (max-width: 1050px) {
    .logo-10, .logo-9, .logo-7, .logo-4, .logo-20, .logo-19, .logo-17, .logo-14{
        display:none;
    }
}

@media (max-width: 767px) {
    .content-left, .content-right{
        display: none;
    }
}