button {
    /*box-shadow: rgba(0, 0, 0, 0.1) 0px 4px 6px -1px, rgba(0, 0, 0, 0.06) 0px 2px 4px -1px, 2px 2px 5px 1px rgba(255, 255, 255, 0.25) inset;*/
}

    button:not(.btn-close):hover {
        background-image: linear-gradient(rgb(0 0 0 / 10%) 0 0);
    }

    button#btnConfirmationNo:focus {
        box-shadow: rgba(0, 0, 0, 0.1) 0px 4px 6px -1px, rgba(0, 0, 0, 0.06) 0px 2px 4px -1px, 2px 2px 5px 1px rgba(255, 255, 255, 0.25) inset, 0 0 0 3px rgb(39 174 96 / 50%) !important;
    }

.meterAlerting {
    bottom: 1em;
    right: 1em !important;
    height: fit-content !important;
    width: fit-content;
}

    .meterAlerting .alert.alert-dismissible {
        background-color: #fff3cd;
        color: #664d03;
        width: 25em;
        border: 1px solid #ffe592;
        margin: 0;
        box-shadow: rgba(0, 0, 0, 0.1) 0px 1px 3px 0px, rgba(0, 0, 0, 0.06) 0px 1px 2px 0px;
    }

#detailMeterRecord {
    justify-content: center;
    gap: 1em;
    flex-wrap: nowrap;
    margin: 0 1em;
}

    #detailMeterRecord > .col-md-4:not(.detailForm) {
        position: relative;
        box-shadow: rgba(0, 0, 0, 0.1) 0px 0px 5px 0px, rgba(0, 0, 0, 0.1) 0px 0px 1px 0px;
        overflow: hidden;
    }

        #detailMeterRecord > .col-md-4:not(.detailForm) > div > div {
            text-align: center;
            width: 100%;
            left: 0;
            top: 1em;
            box-shadow: rgba(0, 0, 0, 0.1) 0px 4px 6px -1px, rgba(0, 0, 0, 0.06) 0px 2px 4px -1px, 2px 2px 5px 1px rgba(255, 255, 255, 0.25) inset;
            background-image: linear-gradient(rgb(0 0 0 / 27%) 0 0);
        }

        #detailMeterRecord > .col-md-4:not(.detailForm) div > div h3 {
            font-size: 1.5rem;
            font-weight: 600;
            letter-spacing: .03em;
            color: var(--font-color-light);
            margin: 0;
            margin-top: .2em;
        }

        #detailMeterRecord > .col-md-4:not(.detailForm) div > .buttonRotate {
            justify-content: center;
        }

            #detailMeterRecord > .col-md-4:not(.detailForm) div > .buttonRotate button {
                border: none;
                padding: .3em;
                border-radius: 50%;
                background-color: transparent;
                margin-bottom: .2em;
                display: flex;
                box-shadow: none
            }

                #detailMeterRecord > .col-md-4:not(.detailForm) div > .buttonRotate button:hover {
                    background-image: linear-gradient(rgb(0 0 0 / 10%) 0 0);
                }

    #detailMeterRecord > div {
        height: 80vh;
        flex: 0 0 auto;
        padding: 0;
        box-sizing: border-box;
    }

        #detailMeterRecord > div:not(.detailForm) div > img {
            width: 100%;
            height: 100%;
            object-fit: cover;
            object-position: center;
            transition: .3s transform;
        }

    #detailMeterRecord .detailForm .row {
        margin: 0 0 .5em;
    }

        #detailMeterRecord .detailForm .row:has(.recorderForm) {
            margin: 0;
        }

        #detailMeterRecord .detailForm .row label {
            margin-bottom: .3em;
        }

        #detailMeterRecord .detailForm .row textarea {
            border: none;
        }

    #detailMeterRecord .detailForm .buttons {
        display: flex;
        margin-top: 1em;
        height: 2.7em;
        transition: all .5s ease;
    }

        #detailMeterRecord .detailForm .buttons button {
            border: 0px;
            border-radius: 8px;
            display: flex;
            /*padding: .3em 0;*/
            box-sizing: content-box;
            gap: 0.3em;
            flex: 1 1 auto;
            margin: 0 .3em;
            justify-content: center;
            font-size: 1.1rem;
            align-items: center;
            color: var(--font-color-light);
            font-size: 1.05rem;
            box-shadow: rgba(0, 0, 0, 0.1) 0px 4px 6px -1px, rgba(0, 0, 0, 0.06) 0px 2px 4px -1px, 2px 2px 5px 1px rgba(255, 255, 255, 0.25) inset;
            font-weight: 600;
        }

            #detailMeterRecord .detailForm .buttons button:disabled {
                opacity: .7;
                color: var(--font-color-light) !important;
                background-image: linear-gradient(hsl(0deg 0% 0% / 20%) 0 0);
            }

                #detailMeterRecord .detailForm .buttons button:disabled:hover {
                    background-image: linear-gradient(hsl(0deg 0% 0% / 20%) 0 0);
                }

        #detailMeterRecord .detailForm .buttons #btnRescan:disabled {
            color: var(--accent-color) !important;
        }

        #detailMeterRecord .detailForm .buttons span {
            font-size: 1.05rem;
            font-weight: 600;
        }

        #detailMeterRecord .detailForm .buttons.nextPrev {
            width: 32%;
            margin-top: 1em;
        }

            #detailMeterRecord .detailForm .buttons.nextPrev button {
                box-shadow: rgba(0, 0, 0, 0.1) 0px 4px 6px -1px, rgba(0, 0, 0, 0.06) 0px 2px 4px -1px, 2px 2px 5px 1px rgba(255, 255, 255, 0.25) inset;
                background-color: var(--darker-blue);
            }

        #detailMeterRecord .detailForm .buttons.back {
            width: 32%;
        }

            #detailMeterRecord .detailForm .buttons.back #btnBack {
                background-color: var(--dark-bg);
            }

    #detailMeterRecord .usage > div {
        flex: 1 1 30%;
    }

    #detailMeterRecord .timestamp {
        position: sticky;
        width: auto !important;
        bottom: 1em !important;
        top: 0 !important;
        height: fit-content;
        text-overflow: unset;
        color: var(--font-color-light);
    }


    #detailMeterRecord input,
    #detailMeterRecord input[type=text],
    #detailMeterRecord input[type=password],
    #detailMeterRecord input[type=number],
    #detailMeterRecord textarea, #detailMeterRecord select {
        height: 31px !important;
        font-size: .8rem !important;
    }

.slider-container, #toggleArrow, #goBack {
    display: none;
}

#divDeviasiPercent, #divDevUsage, #divRecordFix {
    display: flex;
    gap: 0.5em;
}

    #divDeviasiPercent input, #divDevUsage input, #divRecordFix input {
        flex: 1 1 30%;
        width: 40%;
        height: 38px !important;
    }

.mobileButtonImg {
    position: fixed;
    margin: 0 1em;
    display: none;
    margin-top: -3.5em;
}

#chooseImg {
    border-radius: 5px;
    background-color: var(--darker-blue);
    height: 2.5em;
    width: 2.5em;
    display: flex;
    align-items: center;
    justify-content: center;
    border: none;
    position: sticky;
    z-index: 3;
}

.imgContainer, .imgContainerWeb {
    position: absolute;
    bottom: 0;
    background-color: var(--accent-color);
    padding-left: 2.5em;
    border-radius: 5px;
    height: 2.5em;
    overflow: hidden;
    width: auto;
    display: flex;
    align-items: center;
    gap: .5em;
}

    .imgContainer > button, .imgContainerWeb > button {
        border-radius: 5px;
        background-color: var(--accent-color);
        min-height: 2em;
        min-width: 2em;
        display: flex;
        align-items: center;
        justify-content: center;
        border: none;
        box-shadow: rgba(0, 0, 0, 0.1) 0px 4px 6px -1px, rgba(0, 0, 0, 0.06) 0px 2px 4px -1px, 1px 1px 5px 1px rgb(255 255 255 / 11%) inset;
    }

        .imgContainer > button:first-child {
            margin-left: .5em;
        }

        .imgContainer > button:last-child {
            margin-right: .5em;
        }

        .imgContainer > button .iconAddImage, .imgContainer > button .iconAddImage > * {
            fill: var(--fill-light);
            transition: fill 0.1s ease-in-out;
        }

    .imgContainer button.active, .imgContainerWeb button.active {
        background-color: #74a2c9 !important;
        background: none;
    }

        .imgContainer button.active .iconAddImage, .imgContainer button.active .iconAddImage > * {
            fill: var(--font-color-dark);
        }


.imgContainerWeb {
    bottom: 3em;
    position: sticky;
    background-color: transparent;
    background-image: none !important;
    box-shadow: none !important;
    padding: 0;
    justify-content: center;
    height: auto;
}

    .imgContainerWeb > button:first-child {
        margin: .5em;
    }

    .imgContainerWeb > button {
        min-height: 2.5em;
        min-width: 3em;
        border-radius: 8px;
    }

        .imgContainerWeb > button svg {
            height: 1.3em !important;
            width: 1.3em !important;
        }

@media only screen and (max-width: 430px) {
    #divGrdMeterRecord .filter-button, .filter-button.recorder {
        flex-wrap: wrap;
        /*gap: 0;*/
    }
}

@media (max-width: 767px) {
    .filter-button {
        width: 93%;
        margin: auto;
    }

    #detailMeterRecord {
        position: relative;
        overflow: hidden;
        gap: 0;
        margin: 0;
        height: 90vh;
    }

        #detailMeterRecord > div:not(.detailForm) {
            height: 90vh;
            position: absolute !important;
            top: 0;
            left: 0;
            right: 0;
            /*transition: width 0.5s ease;*/
        }

            #detailMeterRecord > div:not(.detailForm) div > img {
                width: 100vw;
            }

        #detailMeterRecord > .col-md-4:not(.detailForm) div > div {
            padding: 0 .5em;
        }

        #detailMeterRecord > .prevSide {
            z-index: 1;
        }

            #detailMeterRecord > .prevSide h3 {
                font-size: 1.4rem !important;
                text-align: end !important;
                padding: 0 .5em;
            }

            #detailMeterRecord > .prevSide .buttonRotate {
                justify-content: flex-end !important;
            }

        #detailMeterRecord > .currentSide {
            z-index: 2;
            width: 50%;
        }

            #detailMeterRecord > .currentSide h3 {
                font-size: 1.4rem !important;
                text-align: start !important;
                padding: 0 .5em;
            }

            #detailMeterRecord > .currentSide .buttonRotate {
                justify-content: flex-start !important;
            }

        #detailMeterRecord > .slider-container {
            position: absolute;
            bottom: 0;
            width: 100%;
            display: flex;
            justify-content: center;
            align-items: center;
            pointer-events: none;
            z-index: 5;
            margin-top: -5em;
        }

            #detailMeterRecord > .slider-container .slider-handle {
                position: absolute;
                width: 3em;
                height: 3em;
                border-radius: 50%;
                pointer-events: all;
                display: flex;
                background: var(--dark-bg);
                align-items: center;
                justify-content: center;
                margin-top: -4em;
            }

            #detailMeterRecord > .slider-container .slider {
                width: 100vw;
                appearance: none;
                outline: none;
                box-shadow: none;
                padding: 0;
                pointer-events: none;
                margin: 0 -.5em;
                z-index: 2;
                margin-top: -5em;
            }

                #detailMeterRecord > .slider-container .slider::-webkit-slider-thumb {
                    -webkit-appearance: none;
                    /*height: 100vh;*/
                    width: 3em;
                    height: 3em;
                    pointer-events: all;
                }

    .currentSide .position-absolute, .prevSide .position-absolute {
        z-index: 3;
        width: 95vw !important;
    }

    #detailMeterRecord .detailForm {
        z-index: 7;
        height: auto;
        /*height: 20em;*/
        position: fixed;
        bottom: 0;
    }

        #detailMeterRecord .detailForm #formContent {
            background-color: #efefef96;
            margin-top: 2.5em;
            box-sizing: border-box;
            overflow: hidden;
            max-height: 100%;
            width: 100%;
        }

        #detailMeterRecord .detailForm #toggleArrow, #detailMeterRecord .detailForm #goBack {
            display: block;
            border: none;
            float: right;
            margin: 0 1em;
            padding: .5em;
            border-radius: 5px 5px 0 0;
            background-color: var(--darker-blue);
        }

        #detailMeterRecord .detailForm #goBack {
            float: left;
            /*background-color: var(--dark-bg);*/
        }

        #detailMeterRecord .detailForm .buttons {
            position: absolute;
            top: 0em;
            left: 50%;
            transform: translate(-50%);
            opacity: 0;
            /*transition: all 1s ease;*/
        }

            #detailMeterRecord .detailForm .buttons button {
                width: 2.2em;
                border-radius: 50%;
                padding: 0;
            }

            #detailMeterRecord .detailForm .buttons.nextPrev, #detailMeterRecord .detailForm .buttons.back {
                display: none;
            }

    #detailMeterRecord .timestamp {
        width: 97vw !important;
    }

    #btnVerifyUnverify, #btnDelete {
        width: 2.5em !important;
    }

        #btnVerifyUnverify img {
            height: auto !important;
        }

    .meterAlerting {
        left: unset !important;
        top: 3em !important;
        z-index: 6;
    }

        .meterAlerting .alert.alert-dismissible {
            width: 18em;
        }

    .imgContainerWeb {
        display: none;
    }
}

@media (min-width: 1200px) and (max-width: 1330px) {

    main.opened #detailMeterRecord .detailForm .buttons span {
        display: none;
    }

    main.opened #detailMeterRecord .detailForm .buttons.nextPrev {
        width: 40%;
    }
}


@media (max-width: 1200px) {

    #detailMeterRecord .detailForm .buttons span {
        display: none;
    }

    #detailMeterRecord .detailForm .buttons.nextPrev {
        width: 50%;
    }
}