$wo-border-separation: $border-width solid $border-color;

.o_tablet_popups {
    height: 100%;
    width: 100%;
    position: absolute;
    top: 0;
    left: 0;
    z-index: 10;
    background-color: rgba(60, 60, 60, 0.4);

    &.o_unblock {
        z-index: 100;
    }

    .popup {
        z-index: 1200;
        top: 5%;
        left: 25%;
        width: 50%;
        position: fixed;
        background: $o-gray-200;

        button{
            box-shadow: none;
            outline: none;
            border: none;
        }

        button:hover{
            background: default;
        }

        .body.traceback {
            height: 238px;
            overflow: auto;
            font-size: 14px;
            white-space: pre-wrap;
            text-align: left;
            font-family: 'Inconsolata';
            -webkit-user-select: text;
            -moz-user-select: text;
                    user-select: text;
        }

        .centered {
            text-align: center;
        }

        @include media-breakpoint-down(sm) {
            top: 0;
            left: 0;
            width: auto;
            max-height: 100%;
            overflow: auto;
        }

        .title {
            padding: 20px;
            border-bottom: $wo-border-separation;
            font-size: large;
            color: $o-black;
        }

        .footer {
            border-top: $wo-border-separation;
            display: flex;
            justify-content: space-around;
        }

        .btn {
            min-width: 40%;
            line-height: 80px;
            margin: 5px;
            font-size: 1.3em;
            flex: 1 1;

            cursor: pointer;
            &:not(.btn-link) {
                border-radius: 2px;
            }
        }

        .btn_employee {
            background-color: $o-gray-100;
        }

        .button_list {
            display: flex;
            flex-wrap: wrap;
            justify-content: space-around;
            padding: 5px;

            span {
                margin-top: 1.5em;
                width: 100%;
                height: 35px;
                text-align: center;
                align-content: center;
                h2 {
                    color: $o-black;
                }
            }
        }

        &.popup-selection .selection {
            overflow-y: auto;
            max-height: 273px;
            font-size: 16px;
            width: auto;
            line-height: 50px;

            &-item {
                background: rgb(230,230,230);
                cursor: pointer;
                text-align: left;
                padding: 0px 16px;
                color: $o-black;

                &:nth-child(odd) {
                    background: $o-tooltip-title-background-color;
                }
                &.selected {
                    background: #6EC89B;
                }
            }
        }

        .popup-input {
            width: 70%;
            margin: 20px auto;
            padding: 10px;
            box-shadow: 0px 0px 0px 3px #6ec89b;
            min-height: 50px;
            background: white;
            border-radius: 3px;
            text-align: center;
            font-size: 20px;
            font-family: "Lato";
        }


        .popup-numpad {
            width: 70%;
            margin: 12px auto;

            button {
                height: 50px;
                width: 50px;
                border-radius: 25px;
                margin: 4px;
                border: 1px solid #cacaca;
                background: none;
                font-size: large;
            }
        }

    }

    .footer > div {
        color: $o-black;
    }
}