@font-face {
    font-family: 'MiSans';
    font-weight: normal;
    src: url(./fonts/MiSans-Regular.ttf);
}

@font-face {
    font-family: 'MiSans';
    font-weight: bold;
    src: url(./fonts/MiSans-Demibold.ttf);
}

@font-face {
    font-family: 'HarmonyOS Sans';
    font-weight: normal;
    src: url(./fonts/HarmonyOS_Sans_Regular.ttf);
}

@font-face {
    font-family: 'HarmonyOS Sans';
    font-weight: bold;
    src: url(./fonts/HarmonyOS_Sans_Medium.ttf);
}

@font-face {
    font-family: 'OPPOSans';
    font-weight: normal;
    src: url(./fonts/OPPOSans-R.ttf);
}

@font-face {
    font-family: 'OPPOSans';
    font-weight: bold;
    src: url(./fonts/OPPOSans-M.ttf);
}

@font-face {
    font-family: 'SF Pro Display';
    font-weight: normal;
    src: url(./fonts/SF-Pro-Display-Regular.otf);
}

@font-face {
    font-family: 'SF Pro Display';
    font-weight: bold;
    src: url(./fonts/SF-Pro-Display-Medium.otf);
}

body {
    -webkit-user-select: none;
    user-select: none;
    font-family: MiSans;
}

.mi-sans {
    font-family: MiSans !important;
}

.harmony-sans {
    font-family: HarmonyOS Sans !important;
}

.oppo-sans {
    font-family: OPPOSans !important;
}

.sf-pro {
    font-family: SF Pro Display !important;
}

.mdui-select {
    font-family: MiSans;
}

h1 {
    font-weight: bold;
}

.preview-dialog .mdui-dialog-content {
    padding: 0;
}

@media (min-width: 600px) {
    :root {
        height: 100%;
    }

    body {
        height: 100%;
        overflow: hidden;
    }

    .mdui-container,
    #main-flex,
    #photo-col {
        height: 100%;
    }

    #photo-col {
        display: -webkit-box !important;
        display: -ms-flexbox !important;
        display: flex !important;
        -webkit-box-align: center !important;
        -ms-flex-align: center !important;
        align-items: center !important;
    }

    #photo-container {
        text-align: center;
    }

    #photo-area {
        width: calc(100% - 32px);
        height: 40% !important;
    }

    #photo-canvas-div {
        max-width: calc(100% - 32px);
    }

    #info-col {
        height: calc(100% - 16px);
        overflow-y: auto;

        margin-top: 8px;
        margin-right: -8px;

        padding-right: 8px;
    }

    .mdui-snackbar-right-top {
        -webkit-box-shadow: 0 3px 1px -2px rgba(0, 0, 0, .2), 0 2px 2px 0 rgba(0, 0, 0, .14), 0 1px 5px 0 rgba(0, 0, 0, .12) !important;
        box-shadow: 0 3px 1px -2px rgba(0, 0, 0, .2), 0 2px 2px 0 rgba(0, 0, 0, .14), 0 1px 5px 0 rgba(0, 0, 0, .12) !important;

        border-radius: 6px;
    }
}