/* 
    file: styles.css
    desc: IsmoApp
    date: 13.1 - 8.5 2020
    auth: LÄ
*/

/*PUNAINEN #f4484b
SININEN #284a8c
VALKOINEN #FFF*/

/*Yleiset*/
body{
    font-family:Arial;
}

.navbar{
    background-color: #284a8c;
}

.logo{
    height:40px;
    margin-left:10vw;
}

.ulos{
    background-color: #284a8c;
    color: rgba(255, 255, 255, 0.55);
    border:none;
}

.ulos:hover{
    color: #FFF;
}

form .btn{
    font-weight:bold;
    color: #FFF;
    text-transform:uppercase;
}

.sNappi{
    background-color: #284a8c;
}

.sNappi:hover{
    color: #f4484b;
}

.pNappi{
    background-color: #f4484b;
}

.pNappi:hover{
    color: #284a8c;
}

input:focus{
    border:1px solid #284a8c !important;
    box-shadow:1px 1px 5px #284a8c !important;
}

select:focus{
    border:1px solid #284a8c !important;
    box-shadow:1px 1px 5px #284a8c !important;
}

.piilo{
    display:none;
}

/*SIGN IN*/
#sHuom{
    position:fixed;
    top:8.65vh;
    width:98%;
    margin-left:1rem;
}

#sText{
    background-color:none;
}

#sText:hover{
    color:#FFF;
}

.kirjaudu img{
    height:100px;
}

.kirjaudu form{
    background-color: #284a8c;
    margin-top:5rem;
    padding:1rem;
    overflow:auto;
}

.kirjaudu form label{
    color: #FFF;
}

.kirjaudu form .btn{
    background-color: #f4484b;
    float:right;
}

.kirjaudu form .btn:hover{
    color: #284a8c;
}

/*INDEX*/
#ketjut ul, #ketjut li{
    text-align:left;
    list-style-type:none;
}

.kortti{
    margin-top:1.5rem;  
}

.kortti a:hover{
    font-weight:bold;
    text-decoration:none;
    color:none;
}

.h:hover{
    color:#FFF;
}

.kortti h4, .h{
    text-transform:uppercase;
    text-align:center;
    background-color: #f4484b;  
    color: #FFF;
    padding:0.5rem;
    margin:0;
}

.ks{
    color: #284a8c;
    padding-top:2px;
    padding-left:7px;
    box-shadow:1px 4px 10px #284a8c;
    height:50%;
}

.p{
    color: #284a8c;
}

.p:hover{
    color: #284a8c;
}

/*Yleiset SIVUT*/
.sValikko{
    background-color: #f4484b;
    color: #FFF;
    height:90.9vh; /*93*/
    text-transform:uppercase;
    float:left;
    width:250px;
}

.sValikko ul{
    list-style-type:none; 
    margin:0 1rem;
    margin-top:1rem;
    padding-left:0;
}

.sValikko li{
    margin-bottom:1rem;
}

.sValikko a {
    color: #FFF;
    text-decoration:none;
}

.sValikko a:hover{
    color: #284a8c;
}

.valinta{
    background-color: #284a8c;
    font-weight:bold;
    text-align:center;
    padding:3px 0;
    border-radius:5px;
}

.sisalto{
    position: absolute;
    left:21vw; /*25*/
}

.eri{
    color: #284a8c;
}

/*REKISTERI*/
.suodatus {
    margin-top:2rem;
}

.suodatus .input-group-text {
    background-color: #284a8c;
    color: #FFF;
}

.rekisteri{
    margin-top:2rem;
    width:100%;
}

.alue {
    text-align: center;
    text-decoration: underline;
    text-transform: uppercase;
    font-weight: bold;
    color:#284a8c;
    margin-bottom:1rem;
}

.laatikko{
    padding:1rem 1rem 1px 1rem;
    box-shadow:1px 1px 10px #284a8c;
    margin-bottom:1rem;
}

.laatikko h5{
    text-transform:uppercase;
    font-weight:bold;
    color: #f4484b;
}

.tiedot{
    float:left;
    margin-right:1.5rem;
    width:89.34%;
}

.laatikko p{
    color: #284a8c;
    margin:0;
}

.laatikko .btn{
    width:90px;
}

.laatikko ul{
    list-style-type:none;
    text-align:right;
}

.laatikko button{
    color: #FFF;
}

/*Modali*/
.modal-title{
    color: #f4484b;
    text-transform:uppercase;
    font-weight:bold;    

}

#mSisalto{
    background-color:#284a8c;
    color:#FFF;
}

.mAlaO{
    color:#284a8c;
    font-weight:bold;
    text-transform:uppercase;
    background-color:#FFF;
    padding:1px 5px;
}

.modal-footer .btn{
    color: #FFF;
    text-transform:uppercase;
    font-weight:bold;
}

.modal-footer .btn:hover{
    color: #f4484b;
}

.modal-footer #kPois:hover{
    color: #284a8c;
}

/*UUSI/MUOKKAA*/
.lomake label{
    text-transform:uppercase;
    color: #f4484b;
    font-weight:bold;
}

#kori{
    margin-top:2.5rem;
}

.lomake .eri{
    color:#284a8c;
}

.ukamKaupat{
    margin-left:1px;
}

.valittu{
    box-shadow:inset 0 0 10px #f4484b;
}

.valittu p{
    color:rgb(182, 182, 182);
}

#kampMaa{
    width:15%;
    position: fixed;
    right:2.7%;
    top:85px;
    background-color:#284a8c;
    border:10px solid #f4484b;
    color:#FFF;
    padding:1rem;
}

/*MEDIATILITYS*/
.huom h5{
    text-transform:uppercase;
    color: #FFF;
    background-color: #f4484b;
    padding:0.5rem;
    margin-bottom:0;
}

.huom div{
    box-shadow:1px 4px 10px #284a8c;
}

#lasku{
    width:32%; /*Isolla näytöllä 36.5*/
    height:87.5vh; /*88.5*/
    margin-right:1.5rem; /*3*/
    padding:5px;
    float:right;
    font-size:12px;
    box-shadow:1px 4px 10px #284a8c;
}

#yla {
    border-bottom:1.5px solid black;
}

#lasku img{
    height:35px;
    float:left;
    margin-right:10vw; /*8*/
}

#lasku #yla p{
    font-weight:bold;
    padding-top:0.7rem;
}

#lasku #sisalto {
    margin:1rem 5rem;
}

#lasku #sisalto p{
    margin:0;
}

#lasku table{
    font-size:12px;
}

#lasku #taulu{
    width:100%;
}

#taulu thead{
    border-bottom:1.5px solid black;
}

#taulu th, #taulu td{
    text-align:center;
}

#taulu tbody td{
	text-align: right;
}

#taulu tbody tr td:nth-of-type(1){
	text-align: left;
}

#lasku .korostus{
    background-color:#c6e0b4;
}

#lasku .iso{
    font-weight:bold;
    text-transform:uppercase;
}

#lasku #yhteensa{
    width:7%;
    position:fixed;
    bottom:7rem; /*5.8*/
    right:6.8rem;
}

#lasku .korostusP{
    background-color:#f37173;
}

#lasku #tauluOsuus{
    width:45%;
}

#lasku .osuusB{
    border-bottom:1px solid black;
}

#lasku .osuusBo{
    border-bottom:double;
}

#lasku #osuusKam{
    width:100%;
    margin-top:10rem;
}

#lasku #osuusKam thead{
    background-color: #bebebe;
}

#lasku #osuusKam .kamppis th, #lasku #osuusKam .kamppis td{
    padding:5px 0px;
}

#ala {
    position:fixed;
    bottom:2.8rem; /*1.5*/
    width:31.4%; /*35.9*/
    border-top:1.5px solid black;
    font-size:8px; /*10*/
}

#ala p{
    text-align:center;
    padding-top:1rem;
}

/*Tulostus*/
@media print{
    /*210 × 297mm*/
    body *{
        visibility:hidden;
    }

    #lasku, #lasku *{
        visibility:visible;
        -webkit-print-color-adjust: exact !important;
    }

    #lasku{
        width:100%;
        height:100%;
        float:none;
        margin:0;
        padding:0;
        font-size:15px;
    }

    #yla{
        position:absolute;
        top:0;
        width:100%;
    }

    #lasku img{
        height:50px;
        margin-right:35%;
        margin-bottom:20px;
    }

    #lasku #sisalto {
        margin:0;
        position:absolute;
        top:100px;
        left:100px;
        width:80%;
        height:87%;
    }

    #kauppiasInf{
        margin-bottom:1rem;
    }

    #lasku .korostus{
        background-color:#c6e0b4 !important;
    }

    #lasku #yhteensa{
        width:30%;
        position:absolute;
        right:0;
        bottom:0;
    }

    #ala{
        position:absolute;
        bottom:0;
        width:100%;
        border-top:1.5px solid black;
        font-size:14px;
    }

    #ala p{
        margin:0;
        padding:0;
        padding-top:30px;
    }
}