@charset "UTF-8";




app {
    max-width: 1280px;
    margin: auto;
}

/* disable pull to refresh in Android chrome */
body {
    overscroll-behavior-y: contain;
    background-color: #272727;
    color: #a3a3a3;
}

html, body, input, select, textarea {
    font-family: 'Helvetica Neue', Helvetica, Arial, sans-serif;
    font-size: 16px;
}

 input[type=checkbox] {
        width: 15px;
        height: 15px;
    }


a {
    color: #a3a3a3;
}

input, select, textarea {
    width: 100%;
    border: 1px solid #ccc;
    box-shadow: inset 0 1px 3px #ddd;
    border-radius: 4px;
    box-sizing: border-box;
    padding-left: 8px;
    padding-right: 8px;
    padding-top: 12px;
    padding-bottom: 12px;
}



/* === hlavní panel přes celou obrazovku === */
.main {
    padding: 70px 0px 0px 0px; /* defaultní výška padding-top od které se scroluje .working-container */
}


/* === sidebar - nadpis aplikace, hlavní ovládací tlačítka === */
.sidebar {
    background-color: #353535;
    position: fixed;
    left: 0;
    top: 0;
    width: 100%;
    padding: 10px 15px 10px 15px;
}

.sidebar-app-content {
    max-width: 1024px;
    margin: 5px auto 5px auto;
}


.sidebar-app-logo {
    float: left;
}

.sidebar-app-title {
    font-size: 24px;
    padding-left: 11px;
    float: left;
}

.sidebar-app-subtitle {
    font-size: 12px;
    /*max-width: 85px; */
}


.sidebar-app-mainmenu {
    float: right;
    padding-right: 22px;
    padding-top: 3px;
}

    .sidebar-app-mainmenu button {
        width: 100px;
        padding-top: 16px;
        padding-bottom: 16px;
        font-size: 14px;
        border: none;
        color: white;
        text-align: center;
        cursor: pointer;
        border-radius: 8px;
        margin-bottom: 8px
    }


.sidebar-app-mainmenu button.btn-mainmenu {
     background-color: #0086b3;
   }


.sidebar-app-mainmenu button.btn-mainmenu:hover {
 background-color: #006080;
 }

.sidebar-app-mainmenu button.btn-calc {
 background-color: #4CAF50;
 }

.sidebar-app-mainmenu button.btn-calc:hover {
  background-color: green;
  }


/* === hlavní pracovní plocha, kde jsou všechny prvky kromě sidebaru === */
.working-container {
    max-width: 1024px;
    margin: auto auto 5px auto;
}


/*=== změna obrazovky === - toto musí být až nakonec a přesně v tomto pořadí */
/* defaultní sidebar pro velkou opbrazovku */
.sidebar-app-miniapp {
    display: none;
}

.sidebar {
    height: 58px;
}



/* sidebar pro menší obrazovky menší než 900px */
@media (max-width: 900px) {

    .sidebar {
        height: 122px;
    }


    .sidebar-app-miniapp {
        display: block;
    }

    .main {
        padding-top: 134px; /* výška padding-top od které se scroluje .working-container */
    }
}

/* sidebar pro menší obrazovky menší než 500px */
@media (max-width: 500px) {
    .sidebar-app-title {
        font-size: 16px;
    }
}


    /* sidebar pro menší obrazovky menší než 380px */
    @media (max-width: 380px) {

        .sidebar {
            height: 142px;
        }

        .main {
            padding-top: 155px; /* výška padding-top od které se scroluje .working-container */
        }


        .sidebar-app-mainmenu button {
            font-size: 13px;
            padding-top: 8px;
            padding-bottom: 8px;
        }

        .sidebar-app-title {
            font-size: 15px;
        }

    }


    /* sidebar pro menší obrazovky menší než 340px */
    @media (max-width: 340px) {

        .sidebar-app-title {
            font-size: 14px;
        }

        .sidebar-app-subtitle {
            font-size: 10px;
        }
    }

/* sidebar pro menší obrazovky menší než 310px */
@media (max-width: 310px) {

    .sidebar-app-title {
        font-size: 12px;
    }
}



    /* @@@@@@@@ OSTATnÍ OVLÁDACÍ PRVKY MIMO HORNÍ SIDEBAR @@@@@@  */


    /* === login panel pro přihlášení (jméno, heslo, atd.) === */
    .login-panel {
        padding: 12px;
        padding-top: 64px;
        padding-bottom: 64px;
        max-width: 500px;
        margin: 0px auto;
    }

    .login-panel-control-caption {
        padding-bottom: 6px;
    }


    .login-panel-space {
        padding-top: 32px;
    }


    .login-panel-first-run-question {
        font-size: 13px;
        margin-top: 5px;
        float: left;
    }

.login-panel-pricelist {
    font-size: 13px;
    margin-top: 5px;
    float: left;
}

    .login-panel-forgotpassword {
        font-size: 13px;
        margin-top: 5px;
        float: right;
    }

.login-panel-resetpassword {
    font-size: 13px;
    margin-top: 5px;
    float: right;
    margin-right: 10px;
}


    .login-panel-confirmdevice {
        font-size: 13px;
        margin-top: 5px;
        float: right;
    }


    .copyright-panel {
        width: 100%;
        text-align: center;
        font-size: 13px;
    }

    .version-panel {
        padding-top: 5px;
    }


.account-screen-message-info-panel {
    padding-top: 8px;
    padding-bottom: 8px;
}

.account-screen-message-info-text {
    padding-top: 8px;
    padding-bottom: 8px;
}

/* === komponenta pro navigaci u horního ===  */
.top-navbar {
    background-color: #272727;
    overflow: hidden;
    position: fixed;
    width: 100%;
    max-width: 1024px;
    color: cadetblue;
    padding: 5px;
    font-variant: small-caps;
}

/* === komponenta pro navigaci u dolního okraje ===  */
.bottom-navbar {
    background-color: #353535;
    overflow: hidden;
    position: fixed;
    bottom: 0;
    width: 100%;
    max-width: 1024px;
}

        .bottom-navbar button {
            float: left;
            display: block;
            color: #f2f2f2;
            text-align: center;
            padding: 18px 6px;
            text-decoration: none;
            font-size: 17px;
            cursor: pointer;
            background-color: #353535;
            border-style: none;
        }


            .bottom-navbar button:hover {
                background-color: #4d4d4d;
            }

    .bottom-navbar-button-icon {
        width: 16px;
        height: 18px;
        display: inline-block;
        vertical-align: middle;
        margin: 0 4px 0 4px;
        background-repeat: no-repeat;
    }

    /* defaultní šířka tlačítek */
    #bottom-navbar-button-previous {
        width: 120px;
    }

    #bottom-navbar-button-next {
        width: 120px;
    }

    #bottom-navbar-button-filter {
        width: 120px;
    }

    #bottom-navbar-button-search {
        width: 120px;
    }


    /* tlačítka pro menší obrazovky menší než 600px */
    @media (max-width: 600px) {

        #bottom-navbar-button-previous {
            width: 95px;
        }

        #bottom-navbar-button-next {
            width: 95px;
        }

        #bottom-navbar-button-filter {
            width: 95px;
        }

        #bottom-navbar-button-search {
            width: 95px;
        }
    }

    /* tlačítka pro menší obrazovky menší než 500px */
    @media (max-width: 500px) {

        #bottom-navbar-button-previous {
            width: 80px;
        }

        #bottom-navbar-button-next {
            width: 80px;
        }

        #bottom-navbar-button-filter {
            width: 80px;
        }

        #bottom-navbar-button-search {
            width: 80px;
        }
    }



/* tlačítka pro menší obrazovky menší než 440px */ 
    @media (max-width: 440px) {

        #bottom-navbar-button-previous {
            width: 60px;
        }

        #bottom-navbar-button-next {
            width: 60px;
        }

        #bottom-navbar-button-filter {
            width: auto;
        }

        #bottom-navbar-button-search {
            width: auto;
        }
    }
      
    

    /* tlačítka pro menší obrazovky menší než 360px */
    @media (max-width: 360px) {

        #bottom-navbar-button-previous {
            width: 36px;
        }

        #bottom-navbar-button-next {
            width: 36px;
        }

        #bottom-navbar-button-filter {
            width: auto;
        }

        #bottom-navbar-button-search {
            width: auto;
        }
    }


/* === obecné prvky === */

.control-caption {
    padding-bottom: 6px;
}

.control-caption-headline {
    padding-bottom: 6px;
    border-bottom: 1px solid;
    color: cadetblue;
    font-variant: small-caps;
}

.control-big-line {
    padding-bottom: 6px;
    min-height: 24px;
    text-align: left;
    padding-top: 12px;
    padding-left: 8px;
}


/*=== plocha s výběrem barvy poznámky ===  */
.select-color-area {
    padding: 16px;
    color: white;
    text-align: center;
    cursor: pointer;
    border-radius: 8px
}

/*=== velký button v nastavení aplikace s daným modulem ===  */
.settings-panel-button {
    width: 100%;
    height: 100%;
    background-color: #303030;
    padding-top: 16px;
    padding-bottom: 16px;
    font-size: 16px;
    border: none;
    color: #f2f2f2;
    text-align: left;
    cursor: pointer;
    border-radius: 8px;
    margin-bottom: 8px;
    font-weight: bold;
}

    .settings-panel-button:hover {
        background-color: #3A4554;
    }


@media (max-width: 780px) {
    .settings-panel-button {
        text-align: center;
    }
}

.settings-panel-button-icon {
    width: 48px;
    height: 48px;
    display: inline-block;
    vertical-align: middle;
    margin: 0 16px 0px 4px;
    background-repeat: no-repeat;

}

.settings-panel-button-text {
    display: inline-block;
    vertical-align: middle;
    margin: 0 16px 0px 4px;
    padding-top: 5px;
}



/* === grid s poznámkami ===  */
.list-grid-record {
    min-height: 40px;
    cursor: pointer;
    padding: 8px;
    background-color: #292929;
    border-radius: 5px;
}

.list-grid-record2 {
    min-height: 40px;
    cursor: pointer;
    padding: 8px;
    background-color: #303030;
    border-radius: 5px;
}


.list-grid-record2 {
    background-color: #303030;
}

.list-grid-record:hover {
    background-color: #3A4554;
}

.list-grid-record2:hover {
    background-color: #3A4554;
}

.list-grid-record-icon {
    width: 16px;
    height: 18px;
    display: inline-block;
    vertical-align: middle;
    margin: 0 4px 0 4px;
    background-repeat: no-repeat;
    float: right;
}

.list-grid-record-small-caption {
    font-size: 0.7em;
    color: slategrey;
    margin: 2px;
    padding: 2px;
}


.grid-text-caption-small-caption {
    font-size: 0.6em;
    color: slategrey;
}

/* === flex sekce ===  */
.flex-container {
    display: flex;
    flex-wrap: wrap;
}

.calendar-reduced-panel {
    background-color: #303030;
    width: 100%;
    max-width: 177px;
    padding: 8px;
    margin-right: 8px;
    margin-bottom: 8px;
    border-radius: 8px;
    min-height: 120px;
}

/* calendar-reduced pro menší obrazovky menší než 430px */
@media (max-width: 430px) {
    .calendar-reduced-panel {
        max-width: 170px;
    }
}

/* calendar-reduced pro menší obrazovky menší než 390px */
@media (max-width: 390px) {
    .calendar-reduced-panel {
        max-width: 160px;
    }
}

/* calendar-reduced pro menší obrazovky menší než 376px */
@media (max-width: 376px) {
    .calendar-reduced-panel {
        max-width: 140px;
    }
}



    /* === okno s full detailem ===  */
    .full-card-modal-window {
        background-color: #353535;
        overflow: auto;
        position: fixed;
        width: 100%;
        max-width: 1024px;
        height: 100%;
        display: block;
        z-index: 1;
        left: auto;
        /*top: 0;*/
        /*padding: 12px;*/
    }

    .full-card-modal-button-bar {
        position: fixed;
        width: 90%;
        max-width: 1000px;
        padding: 6px;
        background-color: #353535;
    }

    .full-card-modal-content {
        background-color: #272727;
        color: #a3a3a3;
        /*margin: 120px auto 24px auto;*/
        padding: 20px;
    }



    /* text tlačítek Filtr a Najít na melém displeji schovat (buou tam jen obrázky) */
    @media (max-width: 400px) {
        #list-button-filter-text {
            display: none;
        }

        #list-button-search-text {
            display: none;
        }
    }

    /* === obecné tlačítko ===  */
    .card-button {
        width: 100%;
        padding-top: 12px;
        padding-bottom: 16px;
        font-size: 15px;
        border: none;
        color: white;
        background-color: #0086b3;
        text-align: center;
        cursor: pointer;
        border-radius: 8px;
        margin-bottom: 8px
    }

    /* === obecný info panel ===  */
    .card-info-panel {
        text-align: center;
        padding-top: 12px;
        padding-bottom: 12px;
        padding-left: 8px;
        padding-right: 8px;
        color: white;
        margin-bottom: 10px;
        border-radius: 4px;
    }



    /* === komponenta button jako link ===  */
    button.btn-link {
        background-color: inherit;
        color: inherit;
        border-style: none;
        cursor: pointer;
        text-decoration: underline;
        padding: 0px;
    }

    /* === kompoeneta ModalMsg.razor ===  */
    .modal {
        display: block;
        position: fixed;
        z-index: 1;
        left: 0;
        top: 0;
        width: 100%;
        height: 100%;
        overflow: auto;
        background-color: rgb(0,0,0);
        background-color: rgba(0,0,0,0.4);
    }


    .modal-content {
        background-color: #272727;
        color: #a3a3a3;
        margin: 15% auto;
        padding: 20px;
        border: 1px solid #888;
        max-width: 500px;
    }



    .modal-content-caption {
        font-variant: small-caps;
        color: #a3a3a3;
        padding-left: 10px;
        padding-top: -6px;
        margin-left: -20px;
    }



    .modal-content-mainpanel {
        margin-top: 5px;
        margin-bottom: 5px;
    }



    .modal-content-buttons {
    }

    .modal-text {
        overflow: auto;
        height: 100%;
    }

    .modal button {
        border: none;
        width: 150px;
        padding-top: 16px;
        padding-bottom: 16px;
        font-size: 15px;
        color: white;
        text-align: center;
        cursor: pointer;
        border-radius: 8px;
        margin-right: 10px;
    }

    button.modal-btn-close {
        background-color: #0086b3;
        width: 100%;
    }

        button.modal-btn-close:hover {
            background-color: #006080;
        }


    button.modal-btn-ok {
        background-color: #4CAF50;
        width: 100%;
    }

        button.modal-btn-ok:hover {
            background-color: #3e8e41;
        }

    button.modal-btn-delete {
        background-color: #ff8c00;
        width: 100%;
    }

        button.modal-btn-delete:hover {
            background-color: #cc7000;
        }



    .modal-input-text {
        width: 100%;
        border: 1px solid #ccc;
        box-shadow: inset 0 1px 3px #ddd;
        border-radius: 4px;
        box-sizing: border-box;
        padding-left: 20px;
        padding-right: 20px;
        padding-top: 12px;
        padding-bottom: 12px;
    }


    /* === točící se kolečko  === */
    .loading-wait {
        display: block;
        position: fixed;
        z-index: 1;
        left: 0;
        top: 0;
        width: 100%;
        height: 100%;
        overflow: auto;
        background-color: rgb(0,0,0);
        background-color: rgba(0,0,0,0.4);
        text-align: center;
        padding-top: 100px;
        color: white;
    }

    .sk-circle {
        margin: 40px auto;
        width: 40px;
        height: 40px;
        position: relative;
    }

        .sk-circle .sk-child {
            width: 100%;
            height: 100%;
            position: absolute;
            left: 0;
            top: 0;
        }

            .sk-circle .sk-child:before {
                content: '';
                display: block;
                margin: 0 auto;
                width: 15%;
                height: 15%;
                background-color: white;
                border-radius: 100%;
                -webkit-animation: sk-circleBounceDelay 1.2s infinite ease-in-out both;
                animation: sk-circleBounceDelay 1.2s infinite ease-in-out both;
            }

        .sk-circle .sk-circle2 {
            -webkit-transform: rotate(30deg);
            -ms-transform: rotate(30deg);
            transform: rotate(30deg);
        }

        .sk-circle .sk-circle3 {
            -webkit-transform: rotate(60deg);
            -ms-transform: rotate(60deg);
            transform: rotate(60deg);
        }

        .sk-circle .sk-circle4 {
            -webkit-transform: rotate(90deg);
            -ms-transform: rotate(90deg);
            transform: rotate(90deg);
        }

        .sk-circle .sk-circle5 {
            -webkit-transform: rotate(120deg);
            -ms-transform: rotate(120deg);
            transform: rotate(120deg);
        }

        .sk-circle .sk-circle6 {
            -webkit-transform: rotate(150deg);
            -ms-transform: rotate(150deg);
            transform: rotate(150deg);
        }

        .sk-circle .sk-circle7 {
            -webkit-transform: rotate(180deg);
            -ms-transform: rotate(180deg);
            transform: rotate(180deg);
        }

        .sk-circle .sk-circle8 {
            -webkit-transform: rotate(210deg);
            -ms-transform: rotate(210deg);
            transform: rotate(210deg);
        }

        .sk-circle .sk-circle9 {
            -webkit-transform: rotate(240deg);
            -ms-transform: rotate(240deg);
            transform: rotate(240deg);
        }

        .sk-circle .sk-circle10 {
            -webkit-transform: rotate(270deg);
            -ms-transform: rotate(270deg);
            transform: rotate(270deg);
        }

        .sk-circle .sk-circle11 {
            -webkit-transform: rotate(300deg);
            -ms-transform: rotate(300deg);
            transform: rotate(300deg);
        }

        .sk-circle .sk-circle12 {
            -webkit-transform: rotate(330deg);
            -ms-transform: rotate(330deg);
            transform: rotate(330deg);
        }

        .sk-circle .sk-circle2:before {
            -webkit-animation-delay: -1.1s;
            animation-delay: -1.1s;
        }

        .sk-circle .sk-circle3:before {
            -webkit-animation-delay: -1s;
            animation-delay: -1s;
        }

        .sk-circle .sk-circle4:before {
            -webkit-animation-delay: -0.9s;
            animation-delay: -0.9s;
        }

        .sk-circle .sk-circle5:before {
            -webkit-animation-delay: -0.8s;
            animation-delay: -0.8s;
        }

        .sk-circle .sk-circle6:before {
            -webkit-animation-delay: -0.7s;
            animation-delay: -0.7s;
        }

        .sk-circle .sk-circle7:before {
            -webkit-animation-delay: -0.6s;
            animation-delay: -0.6s;
        }

        .sk-circle .sk-circle8:before {
            -webkit-animation-delay: -0.5s;
            animation-delay: -0.5s;
        }

        .sk-circle .sk-circle9:before {
            -webkit-animation-delay: -0.4s;
            animation-delay: -0.4s;
        }

        .sk-circle .sk-circle10:before {
            -webkit-animation-delay: -0.3s;
            animation-delay: -0.3s;
        }

        .sk-circle .sk-circle11:before {
            -webkit-animation-delay: -0.2s;
            animation-delay: -0.2s;
        }

        .sk-circle .sk-circle12:before {
            -webkit-animation-delay: -0.1s;
            animation-delay: -0.1s;
        }

    @-webkit-keyframes sk-circleBounceDelay {
        0%, 80%, 100% {
            -webkit-transform: scale(0);
            transform: scale(0);
        }

        40% {
            -webkit-transform: scale(1);
            transform: scale(1);
        }
    }

    @keyframes sk-circleBounceDelay {
        0%, 80%, 100% {
            -webkit-transform: scale(0);
            transform: scale(0);
        }

        40% {
            -webkit-transform: scale(1);
            transform: scale(1);
        }
    }