.ui-page {
    background: #000;
}

.ui-page.ui-scroll-on {
    overflow: hidden;
}

#main .main-content {
    position: absolute;
    top: 26px;
    bottom: 80px;
    left: 0;
    right: 0;
    background-image: url('../images/microphone_full.jpg');
    background-repeat: no-repeat;
    background-size: cover;
    background-position: center;
}

#preview .preview-content {
    position: absolute;
    top: 24px;
    bottom: 74px;
    left: 0;
    right: 0;
    background-image: url('../images/speaker_full.jpg');
    background-repeat: no-repeat;
    background-size: contain;
    background-position: center;
}

#exit-alert-message {
    font-size: 22px;
}

.navigation-bar {
    position: absolute;
    width: 100%;
    height: 80px;
    bottom: 0;
}

.button-large {
    position: relative;
    width: 161px;
    height: 80px;
    margin: 0 auto;
    background-image: url('../images/button_off.png');
}

.button-large.pressed {
    background-image: url('../images/button_on.png');
}

.button-large-map {
    position: absolute;
    top: 14px;
    left: 32px;
    right: 32px;
    bottom: 16px;
    border-radius: 4px;
}

.button-large-icon {
    height: 80px;
    background-repeat: no-repeat;
    background-position: center 15px;
}

.button-large-icon.pressed {
    background-position-y: 17px;
    opacity: 0.7;
}

#main-navigation-bar-button-icon {
    background-image: url('../images/record_icon.png');
}

#main-navigation-bar-button-icon.recording {
    background-image: url('../images/stop_icon.png');
}

#preview-navigation-bar-button-icon {
    background-image: url('../images/pause_icon.png');
}

#preview-navigation-bar-button-icon.paused {
    background-image: url('../images/play_icon.png');
}

.progress {
    position: absolute;
    margin: 0;
    padding: 0;
    background: #333;
    top: 16px;
    left: 16px;
    right: 16px;
    height: 8px;
    border-radius: 4px;
}

.progress-val {
    margin: 0;
    padding: 0;
    border: 0;
    background: #FFAB1B;
    height: 8px;
    width: 0;
    border-radius: 4px;
}

.hidden {
    display: none;
}

#alert-message {
    font-size: 22px;
}

#voice-animation-frame {
    position: absolute;
    top: 24px;
    left: 0;
    right: 0;
    bottom: 74px;
    display: -webkit-flex;
}

#voice-animation {
    margin: auto;
    width: 25%;
    content: url('../images/speaker_animate.png');
}

.voice-animation {
    -webkit-animation-name: voice-animation;
    -webkit-animation-duration: .5s;
    -webkit-animation-iteration-count: infinite;
}

.voice-animation.paused {
    -webkit-animation-play-state: paused;
}

@keyframes voice-animation {
    0% {
        width: 25%;
    }
    50% {
        width: 20%;
    }
    100% {
        width: 25%;
    }
}

@media all and (-tizen-geometric-shape: circle) {

    #main .main-content {
        bottom: 100px;
    }

    #preview .preview-content {
        top: 0;
    }

    #voice-animation-frame {
        bottom: 100px;
    }

    #record-progress, #preview-progress {
        top: 275px;
        width: 270px;
        left: 45px;

    }

    .navigation-bar {
        bottom: -10px;
    }
}