@import url(./color_scheme.css);

*{
    box-sizing: border-box;
    a{
        text-decoration: none;
    }
    button:hover{
        cursor:pointer;
    }
}
body{
    background: url("../img/noise-bg.png") repeat;
    width: 100%;
    height: 100%;
    font-family: "Figtree", Helvetica, Arial, Helvetica, sans-serif;
    color: var(--primary-text-dark);
    font-weight: 200x;
    overflow: hidden;
}

#logo-lg{
    padding: 15px;
}
section#loginScreen{
    margin: auto;
    width:490px;
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    background: #FFFFFF;
    gap: 23px;
    padding:25px 45px;
    box-shadow: 0 15px 50px rgba(0,0,0,.3);
    border-radius: 16px;
    margin-top: 15vh;
    .h3-title{
        font-family: "Poppins", Helvetica, Arial, Sans;
        font-size: 24px;
        font-weight: 400;
        margin: 0;
        a{
            color:var(--accent-blue) !important;
        }
    }
}
.input-lg{
    font-size: 14px;
    display: flex;
    flex-direction: column;
    max-height: 150px;
    min-height: 100px;
    label{
        margin: 10px 0px;
        color:var(--primary-text-dark);
    }
    
    input{
        height: 50px;
        display: block;
        outline: none;
        border: 1px solid var(--light-ui-gray);
        border-radius: 6px;
        padding: 8px 16px;
        
    }
}
.input-lg.status-error span{
    color:var(--negative-red) !important;   
    margin: 10px 0; 
}
.input-lg.status-error input{
    border:1px solid var(--negative-red) !important;  
}
div.message{
    padding: 16px;
    width: auto;
    height: 75px;
    border-radius: 8px;
    font-size: 14px;
    display: flex;
    line-height: 21px;
    justify-content: space-between;
}

.success{
    background-color: var(--green-positive-light);
}
.error{
    background-color: var(--negative-red-light);
}
.center-container{
    display: flex;
    flex-direction: row;
    justify-content: space-around;
    align-items: center;
        
}
input[type=submit]{
    width:125px;
    height:48px;
    border-radius: 4px;
    background-color: var(--green-positive);
    color:white;
    border:none;
    padding: 8px 24px;
    font-size: 16px;
    line-height: 22px;
    cursor:pointer;
    &:hover{
        background-color: var(--green-positive-hover);
    }
}

i.close-button{
    display: block;
    width:24px;
    height:24px;
    background:url("../img/close_btn.svg");
}

#appSelectionScreen{
    margin: auto;
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    background: #FFFFFF;
    gap: 23px;
    padding: 8px 25px 65px 25px;
    box-shadow: 0 15px 50px rgba(0, 0, 0, .3);
    border-radius: 8px;
    margin-top: 17vh;
    width: 75vw;

    
    .header{
        display:flex;
        flex-direction: row;
        align-items: center;
        justify-content: space-between;
        h3{
            font-size:24px;
            font-weight: 400;
        }
    }
    .content{
        display: flex;
        flex-direction: row;
        justify-content: space-around;
        align-items: center;
        margin: auto;
        gap: 5rem;
    }
}
.appButton{
    border: 0.4px solid #dfdfdf2b;
    border-radius: 30px;
    transition: box-shadow .2s;
}
.appButton:hover{
    box-shadow:0 3px 7px rgba(0, 0, 0, 0.15);
}
.appButton{
    a{
               display: flex;
        flex-flow: column;
        align-items: center;
        width: 270px;
        height: 370px;
        color: #000;
        cursor: pointer;
        gap: 169px;
        width: 284px;
    
        h4{
            font-family: "Figtree", Arial, Helvetica, sans-serif;
            font-weight: 400;
            font-size: 26px;
        }
        i{
            font-family: "Poppins", Arial, Helvetica, sans-serif;
            font-weight: 200;
            font-size: 20px;
            font-style: normal;
            line-height: 28px;
            text-align: center;
        }
    }

}
.appButton[data-app=Intelligence]{
    background:url("../img/Intelligence-icon.png") no-repeat center;;
    background-size:180px;

}

.appButton[data-app=Kykea]{
    background:url("../img/Kykea-icon.png") no-repeat center;;
    background-size:180px;

}