Kalkuli/2018.2-Kalkuli_Front-End

@import "../../../assets/sass/main";

.report {
    border: solid 1px $color-dark-blue;
    position: relative;
    border-radius: 5px;
    box-sizing: border-box;
    padding-right: 15%;
    padding-left: 10%;
    padding-top: 2em;
    margin-right: 0 !important;

    &__warning {
        padding-top: 58%;

        &__content{
            color: $color-dark-blue;
            margin: auto;
            text-align: center;
        }
    }

    &__total {
        position: absolute;
        bottom: 0;
        right: 0;
        margin-right: 7%;
        font-size: 150%;
        padding-bottom: 3%;
        padding-top: 3%;
        border-top: solid 1px $color-dark-blue;
    }

    &__content {
        height: 96%;
        width: 110%;
        overflow-y: auto;

        &__labels {
            display: flex;
            flex-wrap: wrap;
            justify-content: space-between;
            padding-bottom: 0.5em;
            margin-bottom: 1em;
            border-bottom: solid 1px $color-dark-blue;
        }
    }
}

.pulsing-text-report { 
    animation: pulse 0.7s 0.5s infinite alternate backwards;
}

@media (min-width:320px) {
     /* smartphones, portrait iPhone, portrait 480x320 phones (Android) */ 
        .report {
            height: 35em;
            width: 28em;
        }
    }
@media (min-width:480px) {
     /* smartphones, Android phones, landscape iPhone */ 
        .report {
            height: 60em;
            width: 45em;
        }
    }
@media (min-width:600px) {
     /* portrait tablets, portrait iPad, e-readers (Nook/Kindle), landscape 800x480 phones (Android) */ 
        .report {
            height: 60em;
            width: 45em;
        }
    }
@media (min-width:801px) {
     /* tablet, landscape iPad, lo-res laptops ands desktops */ 
        .report {
            height: 60em;
            width: 45em;
        }
    }
@media (min-width:1025px) {
     /* big landscape tablets, laptops, and desktops */ 
        .report {
            height: 50em;
            width: 37.5em;
        }
    }
@media (min-width: 1100px) {
    .report {
        height: 44em;
        width: 35em;
    }
}

@media (min-width:1281px) {
     /* hi-res laptops and desktops */ 
        .report {
            height: 45em;
            width: 40em;
        }
    }

@media (min-width:1600px) {
    /* hi-res laptops and desktops */ 
        .report {
            height: 51em;
            width: 45em;
        }
    }