/*!
 * mobile.css
 *
 * Css file for the mobile version ob the portal
 * v 1.0.0
 */

/* General attributes */
body {
    min-width: 260px !important;
    background-color: whitesmoke !important;
}

.content {
    padding: 0 !important;
    padding-top: 20px !important;
}

.mainPanel {
    background: none !important;
    padding: 20px !important;
    margin: 0px !important;
}

.login_background {
    background-image: none !important;
    /*background-image: url(../../../img/login_mobile.jpg) !important;*/
}
.content_background {
    background-image: none !important;
    /*background-image: url(../../../img/background_mobile.jpg) !important;*/
}
.notFoundMainScreen {
    background-image: none !important;
    /*background-image: url(../../../../img/404_mobile.jpg) !important;*/
}

.notFoundContent {
    margin: 80px 20px !important;
}
.line01 {
    color: #333 !important;
    font-size: 20px !important;
    font-weight: 500 !important;
}
.line02 {
    color: #333 !important;
    font-size: 14px !important;
    font-weight: 200;
}
.line03 {
    color: #333 !important;
    font-size: 14px !important;
    font-weight: 200 !important;
}

/* Navigation bar */
.navbar-custom {
    position: relative !important;
}

.navbar-header-custom {
    float: none !important;
    margin-right: 0 !important;
    margin-left: 0 !important;
}

.navbar-brand-custom {
    float: none !important;
    height: auto !important;
}


/* Login screen*/
.loginPanel {
    right: initial !important;
    display: block !important;
    width: 100% !important;
}

/* Custom Modals */
.modal-content-mobile {
    border-radius: 0 !important;
    border-left: none !important;
    border-right: none !important;
    margin-top: -21px !important;
    min-height: calc(100vh - 50px) !important;
}
.modal-content-mobile-login {
}

.modal-dialog-mobile {
    margin-top: 10vh !important;
}

.modal-header-custom {
    border-radius: 0 !important;
    padding-top: 7px !important;
    padding-bottom: 7px !important;
}

.modal-header-custom h3.title {
    margin-top: 15px !important;
    padding-right: 50px !important;
    font-size: 18px;
}


/* Use case Selector*/
.useCase-container-centered {
    margin: 15px auto 0 auto !important;
    padding: 5px 10px !important;
    width: 115px !important;
}

.useCase-container {
    width: 115px !important;
    height: 150px !important;
}
.useCase-container h2 {
    font-size: 12px !important;
    font-weight: 200 !important;
    margin-top: 10px !important;
    margin-bottom: 5px !important;
}
.useCase-container:hover {
    cursor: pointer;
}

/* Removes the transition in the mobile version */
.useCase-container:hover .useCase-container-top-img {
    -webkit-transition: none !important;
    -moz-transition: none !important;
    -o-transition: none !important;
    -ms-transition: none !important;
    transition: none !important;
    -webkit-transform: scale(1) !important;
    -moz-transform: scale(1) !important;
    -ms-transform: scale(1) !important;
    -o-transform: scale(1) !important;
    transform: scale(1) !important;
}

.useCase-container:hover .useCase-container-bottom-text {
    -webkit-animation: none !important;
    -moz-animation: none !important;
    -ms-animation: none !important;
}

.useCase-container-middle-circle {
    padding: 5px !important;
    font-size: 10px !important;
    top: -12px !important;
}

.useCase-container-bottom-text {
    /* Workaround: http://help.dimsemenov.com/discussions/problems/858-weird-bug-in-chrome */
    -webkit-backface-visibility: hidden !important;
    -webkit-transform: none !important;
}

.useCase-fill-row {
    /**margin: 15px auto 0 auto !important;*/
    padding: 5px !important;
    width: 125px !important;
}

/* Warning that not all usecases are available in the mobile version*/
.panel-mobileWarning {
    width: 100% !important;
    margin-bottom: 0 !important;
    text-align: left !important;
    margin-top: -15px !important;
}

.panel-body-mobileWarning {
    padding: 5px 10px !important;
}

/* Time and date picker */

.datePickerWidth {
    max-width: 100% !important;

    padding-left: 0 !important;
    padding-right: 0 !important;
}

.timePickerWidth {
    max-width: 100% !important;
    min-width: 0 !important;

    padding-left: 0 !important;
    padding-right: 0 !important;
}

.timeSliderString {
    position:absolute;
    padding-top: 10px;
    width: 100%;
    text-align: center;
}


.transactionListWidth {
    margin-left: -15px;
    margin-right: -15px;
}

/* Help view */
.modal-help {
    margin: 0 !important;
    padding: 0 !important;
    border-radius: 6px !important;

    min-height: initial !important;
}

.browser-not-supported-text {
    color: #333;
    font-size: 14px;
}