/*------------------------------------------------
FROM: menu.css
------------------------------------------------*/

button.webapp_button {
    position: relative;
    width: calc(16.6667% - var(--margin_px) * 2);
    height: 11em;
    margin-left:  var(--margin_px);
    margin-right:  var(--margin_px);
    margin-bottom: var(--margin_px);
    background: var(--ikeja_grey);

    border-style: solid;
    border-width: 2px;
    border-color: var(--ikeja_black);

    box-shadow: 3px 3px 3px lightgray;
}

.webapp_img_div {
    position:absolute;
    top: 10px;
    left: calc((100% - 7em) / 2);
    border-radius: 3.5em;
    width:7em;
    height:7em;
    background-color: var(--ikeja_blue);
    display: flex; 
    justify-content: center;
}

.webapp_button_text {
    color: var(--ikeja_very_dark_grey);
    position:absolute;
    vertical-align:middle;
    text-align: center;
    bottom:10px;
    height:2em;
    left:10px;
    width:calc(100% - 20px);
}

button.webapp_button:hover {
    transition-duration: 500ms;
    color: var(--ikeja_button_font_color_invert);
    background-color: var(--ikeja_black);
    transition: 0.1s;
}

button.webapp_button:hover .webapp_button_text{
    transition-duration: 500ms;
    color: var(--ikeja_light_grey);
}

button.webapp_button:hover .webapp_icon{
    transition-duration: 500ms;
    filter: invert(100%);
}


@media only screen and (max-width: 960px) {
    button.webapp_button {
        width: calc(33% - var(--margin_px) * 2);
    }
} 

@media only screen and (max-width: 640px) {
    button.webapp_button {
        width: calc(50% - var(--margin_px) * 2);
    }
}

/*------------------------------------------------
FROM: login.css
------------------------------------------------*/
div.login_background{
    position: relative;
    display: flex;
    top: 0px; 
    margin-left: auto;
    margin-right: auto;
    background: var(--ikeja_red);

    border-style: solid;
    border-width: 1px;
    border-color: var(--ikeja_black);
    border-radius: 20px 0 20px 0;
}

div.login_background::after{
    content: "";
    position: absolute;
    display: block;
    height: calc(100% - 12px);
    width: calc(100% - 24px);
    top: 0px; 
    left: 10px; 
    padding-right: 0px;
    padding-left: 0px;
    background: var(--ikeja_yellow);

    border-style: solid;
    border-width: 1px;
    border-color: var(--ikeja_black);
    border-radius: 20px 0 10px 0;
}