@media only screen and (max-width: 1920px) {
    .lSPager.lSpg {
        display: none;
    }
}

@media only screen and (max-width: 1680px) {
    .box {
        width: 220px;
    }

    .lSPager.lSpg {
        display: none;
    }
}

@media only screen and (max-width: 1440px) {
    .store-img {
        width: 120px;
        padding-bottom: 10px;
        padding-right: 10px;
    }

    .box {
        width: 200px;
    }

    .lSPager.lSpg {
        display: none;
    }
}

@media only screen and (max-width: 1240px) {
    .small-width {
        position: relative;
        float: right;
        width: 100%;
        transition: 0.33s, cubic-bezier(0.685, 0.0473, 0.346, 1);
        transition-property: all, all;
        transition-duration: 0.33s, 0s;
        transition-timing-function: ease, cubic-bezier(0.685, 0.0473, 0.346, 1);
    }

    .news-image-placeholder {
        height: 150px;
    }

    .prijemnica-search {
        width: 100%;
    }

    .dropdown-sidebar {
        height: 100%;
        width: 0;
        position: fixed;
        z-index: 5;
        top: 0;
        right: 0;
        background-color: var(--white);
        overflow-x: hidden;
        padding-top: 60px;
        box-shadow: -3px -3px 6px -2px rgba(0, 0, 0, 0.16);
    }

    .dropdown-sidebar .sidebar-body {
        padding: 20px;
        padding-left: 10px;
        padding-right: 10px;
        font-size: 15px !important;
        color: var(--text-gray) !important;
    }

    .sidebar-body .list-group a {
        color: var(--text-gray) !important;
    }

    .sidebar-body .list-group-item .material-icons {
        padding-right: 15px;
        color: var(--text-gray) !important;
    }

    .sidebar-body .list-group .sidebar-submenu a {
        height: 45px;
        padding-left: 30px;
    }

    .sidebar-body .list-group-item {
        margin-bottom: 10px;
        padding: 10px;
        border-radius: 6px;
        border: 0px solid rgba(0, 0, 0, 0.125);
        border-top-color: rgba(0, 0, 0, 0.125);
        border-right-color: rgba(0, 0, 0, 0.125);
        border-bottom-color: rgba(0, 0, 0, 0.125);
        border-left-color: rgba(0, 0, 0, 0.125);
    }

    .sidebar-body .list-group-item.active .material-icons {
        color: var(--white) !important;
    }

    .sidebar-body .list-group-item:hover {
        background-color: var(--light-gray);
        border-color: transparent;
        border-radius: 6px;
    }

    .sidebar-footer {
        margin-top: 20px;
        padding: 0px;
        font-size: 15px;
        color: var(--dark-gray);
        border-top: 1px solid var(--light-gray);
        width: 100%;
        display: block;
        position: absolute;
        top: 20px;
    }

    .sidebar-body .list-group-item[aria-expanded="false"] .submenu-icon::after {
        content: " \f0da";
        font-family: FontAwesome;
        display: inline;
        text-align: right;
        color: var(--text-gray);
        padding-left: 10px;
    }

    .sidebar-body .list-group-item[aria-expanded="true"] .submenu-icon::after {
        content: "\f0d7";
        font-family: FontAwesome;
        display: inline;
        text-align: right;
        padding-left: 10px;
    }

    .box {
        width: 200px;
        height: 500px;
    }

    .lSPager.lSpg {
        display: none;
    }

    .card-category {
        margin-top: 10px;
        margin-bottom: 10px;
    }
}

@media only screen and (max-width: 1080px) {
    .dt-right {
        text-align: left !important;
 
      }
    .row-margin-top {
        flex: 0 0 50%;
        max-width: 50%;
        margin-top: 20px !important;
    }

    .col-md-1.row-margin-top,
    .col-md-2.row-margin-top {
        flex: 0 0 25%;
        max-width: 25%;
    }

    .col-md-12.row-margin-top {
        flex: 0 0 100%;
        max-width: 100%;
        margin-top: 20px !important;
    }

    .tab-item {
        width: 50%;
    }

    .tab-link {
        padding-left: 8px;
        padding-right: 8px;
    }

    .content {
        margin-top: 0px;
        padding: 30px 0px;
        padding-top: 30px;
        padding-right: 0px;
        padding-bottom: 30px;
        padding-left: 0px;
        min-height: calc(100vh - 0px);
        padding-top: 0;
    }

    .form-group {
        margin-bottom: 0;
    }

    .form-footer {
        padding-bottom: 1rem;
    }

    /* .container-fluid .row .col-md-6 {
        flex: 0 0 100%;
        max-width: 100%;
    } */

    .modal-dialog {
        max-width: 800px;
        margin: 1.75rem auto;
    }

    .navbar-brand {
        width: 50%;
        text-align: left;
        margin-right: 0;
        padding-left: 20px;
    }

    .navbar-collapse {
        flex-basis: 50%;
        flex-grow: 1;
        align-items: center;
    }

    .navbar-nav {
        display: inline;
        margin-right: 0 !important;
        margin-left: auto;
        right: 0;
        float: right;
    }

    .navbar-nav .nav-item {
        display: inline-block;
    }

    .navbar-nav .dropdown-menu {
        float: none;
        position: absolute;
    }
}

@media only screen and (max-width: 992px) {
    #dropdownMenuButton {
        padding-right: 0;
    }

    .dt-right .info .material-icons,
    .dt-right .warning .material-icons {
        padding-right: 0;
    }

    .roba-naziv {
        font-weight: bold;
        font-size: 18px;
        /* color: blue; */
    }

    .roba-cena {
        font-weight: bold;
        font-size: 18px;
        /* color: blue; */
    }

    .table-primary .row {
        background-color: white;
        border: none;
        border-left: 4px solid var(--light-green);
        border-radius: 5px;
        margin-bottom: 5px;
    }

    .table-danger .row {
        background-color: white;
        border: none;
        border-left: 4px solid var(--red);
        border-radius: 5px;
        margin-bottom: 5px;
    }

    .table-warning .row {
        background-color: white;
        border: none;
        border-left: 4px solid var(--warning);
        border-radius: 5px;
        margin-bottom: 5px;
    }

    .table-primary,
    .table-primary>th,
    .table-primary>td,
    .table-warning,
    .table-warning>th,
    .table-warning>td,
    .table-danger,
    .table-danger>th,
    .table-danger>td {
        background-color: white;
    }

    .table-hover .table-danger:hover>td,
    .table-hover .table-danger:hover>th {
        background-color: white;
    }

    .table-hover .table-primary:hover>td,
    .table-hover .table-primary:hover>th {
        background-color: white;
    }

    .table-hover .table-warning:hover>td,
    .table-hover .table-warning:hover>th {
        background-color: white;
    }

    #datatable_nalozi_potraznja thead,
    #datatable_nalozi_ponuda thead {
        display: none;
    }

    .table-primary .row .col:nth-child(2),
    .table-danger .row .col:nth-child(2) {
        padding-right: 5px;
        align-self: center;
    }

    .table-primary .row .col,
    .table-danger .row .col {
        padding-left: 5px;
        align-self: center;
    }

    .roba-cena {
        font-weight: 900;
        font-size: 18px;
        color: var(--dark-green);
    }

    .table-warning .roba-cena {
        color: var(--warning);
    }

    .table-danger .roba-cena {
        color: var(--red);
    }

    div.dataTables_wrapper div.dataTables_filter input {
        margin-left: 0;
        display: inline-block;

        width: 100%
    }

    div.dataTables_wrapper div.dataTables_filter label {
        width: 100%
    }

    table.dataTable td.dt-right {
        text-align: right;
        padding-left: 5px;
    }

    table.dataTable td.dt-actions {
        padding-left: 5px;
    }
}

@media only screen and (max-width: 840px) {
    body {

        font-weight: 400;
    }

    .container-fluid .row .col-md-6,
    .container-fluid .row .col-md-4 {
        flex: 0 0 100%;
        margin-bottom: 10px;
    }

    .pull-right {
        margin-bottom: 30px;
    }

    .container-fluid {
        width: 100%;
        padding-right: 5px;
        padding-left: 5px;
        margin-right: auto;
        margin-left: auto;
    }

    .table thead th {
        font-weight: 400;
    }

    th,
    td {
        min-width: 25px;
        text-align: left;
    }

    table.dataTable.table-sm .sorting::before,
    table.dataTable.table-sm .sorting_asc::before,
    table.dataTable.table-sm .sorting_desc::before,
    table.dataTable>thead .sorting::before {
        left: -10px;
        top: 00px !important;
    }

    table.dataTable>thead .sorting::after,
    table.dataTable>thead .sorting_asc::after,
    table.dataTable>thead .sorting_desc::after,
    table.dataTable>thead .sorting_asc_disabled::after,
    table.dataTable>thead .sorting_desc_disabled::after,
    table.dataTable>thead .sorting::after {
        left: -0%;
        content: "↓";
        margin-right: 5px;
        top: 10px !important;
    }

    table.dataTable td {
        -webkit-box-sizing: content-box;
        box-sizing: content-box;
        padding-left: 10px;
    }

    table.dataTable>tbody>tr.child ul.dtr-details>li {
        border-bottom: none;
        padding: .5em 0;
        padding-top: 0.5em;
    }

    .card-body {
        padding: 20px;
        padding-bottom: 20px;
        padding-bottom: 0;
    }

    .weather-card #weather-animations {
        display: inline-block;
        width: 60% !important;
        margin-left: 30px;
    }

    .temperatura {
        text-align: left !important;
        margin-left: 20px !important;
    }

    .temperatura-kartica {
        text-align: center !important;
        margin-left: 0px !important;
    }

    .temperatura-kartica {
        height: 40px;
    }

    .row-margin-top {
        flex: 0 0 100%;
        margin-top: 20px !important;
    }

    .col-md-12.row-margin-top {
        flex: 0 0 100%;
        width: 100%;
        margin-top: 20px !important;
    }

    .form-control-sm {
        height: auto;
        padding: .25rem .5rem;
        font-size: 1rem;
        line-height: 1.5;
        border-radius: .2rem;
    }

    div.dataTables_wrapper div.dataTables_length,
    div.dataTables_wrapper div.dataTables_filter,
    div.dataTables_wrapper div.dataTables_info,
    div.dataTables_wrapper div.dataTables_paginate {
        text-align: left;
        margin-bottom: 5px;
        width: 100%;
        margin-top: 5px;
    }

    .select2-container {
        width: 100% !important;
    }

    .small-width {
        position: relative;
        float: right;
        width: 100%;
        transition: 0.33s, cubic-bezier(0.685, 0.0473, 0.346, 1);
        transition-property: all, all;
        transition-duration: 0.33s, 0s;
        transition-timing-function: ease, cubic-bezier(0.685, 0.0473, 0.346, 1);
        overflow-x: hidden;
    }

    .dropdown-menu.dropdown-menu-right.show {
        right: -50px !important;
    }

    .gitVerzija {
        width: 100%;
    }

    .table-overflow {
        overflow: scroll;
    }

    #datatable_apoteka_zaduzenja.dataTable.table-sm .sorting::before,
    #datatable_apoteka_zaduzenja.dataTable.table-sm .sorting_asc::before,
    #datatable_apoteka_zaduzenja.dataTable.table-sm .sorting_desc::before,
    #datatable_apoteka_zaduzenja.dataTable>thead .sorting::before {
        left: 10px;
        top: 0 !important;
    }

    #datatable_apoteka_zaduzenja.dataTable>thead .sorting::after,
    #datatable_apoteka_zaduzenja.dataTable>thead .sorting_asc::after,
    #datatable_apoteka_zaduzenja.dataTable>thead .sorting_desc::after,
    #datatable_apoteka_zaduzenja.dataTable>thead .sorting_asc_disabled::after,
    #datatable_apoteka_zaduzenja.dataTable>thead .sorting_desc_disabled::after,
    #datatable_apoteka_zaduzenja.dataTable>thead .sorting::after {
        left: 0%;
        content: "↓";
        margin-right: 5px;
        top: 0 !important;
    }
}


@media only screen and (max-width: 767px) {
    .navbar-brand {
        padding-left: 0px;
    }

    .tab-pane .card-header {

        margin: 0 !important
    }

    .tab-pane .card-body {
        padding-left: 0 !important
    }

    .box {
        width: 230px;
    }

    .lSPager.lSpg {
        display: block;
    }

    .desktop-card {
        display: none;
    }

    .tab-item {
        width: 50%;
        width: 100%;
        text-align: left;
        height: auto;
        margin-bottom: 20px;
    }

    .card-header-tabs {
        margin-right: 0;
        margin-bottom: 0;
        margin-bottom: 0;
        margin-left: 0;
        border-bottom: 0;
        text-align: center;
    }

    #rays {
        width: 55px;
        height: 55px;
        top: 0px;
        left: 25%;
    }

    #rays::after {
        width: 55px;
        height: 55px;
        top: 0px;
        left: 0px;
    }

    #sun {
        width: 55px;
        height: 55px;
        top: 0px;
        left: 25%;
    }

    .star {
        margin: 50px 0;
        position: relative;
        display: block;
        width: 0px;
        height: 0px;
        border-left: 100px solid transparent;
        border-right: 100px solid transparent;
        border-bottom: 70px solid #ECD555;
        -webkit-transform: rotate(35deg);
        -moz-transform: rotate(35deg);
        -ms-transform: rotate(35deg);
        -o-transform: rotate(35deg);
        transform: rotate(35deg);
        -webkit-transform: scale(0.15);
        -moz-transform: scale(0.15);
        -ms-transform: scale(0.15);
        -o-transform: scale(0.15);
        transform: scale(0.15);
    }

    .star::before {
        content: "";
        border-left: 30px solid transparent;
        border-right: 30px solid transparent;
        border-bottom: 80px solid #ECD555;
        position: absolute;
        height: 0;
        width: 0;
        top: -45px;
        left: -60px;
        display: block;
        -webkit-transform: rotate(-35deg);
        -moz-transform: rotate(-35deg);
        -ms-transform: rotate(-35deg);
        -o-transform: rotate(-35deg);
        transform: rotate(-35deg);
    }

    .star::after {
        content: "";
        position: absolute;
        display: block;
        top: 3px;
        left: -105px;
        width: 0px;
        height: 0px;
        border-right: 100px solid transparent;
        border-bottom: 70px solid #ECD555;
        border-left: 100px solid transparent;
        -webkit-transform: rotate(-70deg);
        -moz-transform: rotate(-70deg);
        -ms-transform: rotate(-70deg);
        -o-transform: rotate(-70deg);
        transform: rotate(-70deg);
    }

    #miniRays {
        width: 75px;
        height: 75px;
        top: 25px;
        left: 75px;
    }

    #miniRays::after {
        height: 75px;
        width: 75px;
        top: 0px;
        left: 0px;
    }

    #miniSun {
        width: 75px;
        height: 75px;
        top: 25px;
        left: 75px;
    }

    #miniCloud {
        background-color: #DBE4EE;
        width: 75px;
        height: 75px;
        top: 40px;
        animation: cloudFloat 5s infinite linear;
    }

    #miniCloud::before {
        background-color: #DBE4EE;
        width: 50px;
        height: 50px;
        top: 17px;
        left: 55px;
    }

    #miniCloud::after {
        background: -webkit-linear-gradient(#DBE4EE, #A9BBCF);
        background: -moz-linear-gradient(#DBE4EE, #A9BBCF);
        background: -ms-linear-gradient(#DBE4EE, #A9BBCF);
        background: -o-linear-gradient(#DBE4EE, #A9BBCF);
        background: linear-gradient(#DBE4EE, #A9BBCF);
        width: 140px;
        height: 60px;
        top: 40px;
        left: -15px;
    }

    #miniDarkCloud {
        background-color: #90A7BF;
        width: 75px;
        height: 75px;
        top: -10px;
        left: 75px;
        -webkit-transform: scale(0.5);
        -moz-transform: scale(0.5);
        -ms-transform: scale(0.5);
        -o-transform: scale(0.5);
        transform: scale(0.5);
        animation: cloudFloatOpposite 5s infinite linear;
    }

    #miniDarkCloud::before {
        background-color: #90A7BF;
        width: 50px;
        height: 50px;
        top: 17px;
        left: 55px;
    }

    #miniDarkCloud::after {
        background: -webkit-linear-gradient(#90A7BF, #7792AF);
        background: -moz-linear-gradient(#90A7BF, #7792AF);
        background: -ms-linear-gradient(#90A7BF, #7792AF);
        background: -o-linear-gradient(#90A7BF, #7792AF);
        background: linear-gradient(#90A7BF, #7792AF);
        width: 110px;
        height: 50px;
        top: 40px;
        left: -15px;
    }



    #cloud {
        background-color: #DBE4EE;
        width: 60px;
        height: 60px;
        top: -70px;
        -webkit-transform: scale(0.75);
        -moz-transform: scale(0.75);
        -ms-transform: scale(0.75);
        -o-transform: scale(0.75);
        transform: scale(0.75);
        animation: cloudFloat 5s infinite linear;
    }

    .rain #miniDarkCloud {
        top: -55px;
    }

    .rain #cloud {
        top: -115px;
    }

    .snow #miniDarkCloud {
        top: -65px;
    }

    .snow #cloud {
        top: -115px;
    }

    #cloud::before {
        background-color: #DBE4EE;
        width: 30px;
        height: 35px;
        top: 17px;
        left: 45px;
    }

    #cloud::after {
        background: -webkit-linear-gradient(#DBE4EE, #A9BBCF);
        background: -moz-linear-gradient(#DBE4EE, #A9BBCF);
        background: -ms-linear-gradient(#DBE4EE, #A9BBCF);
        background: -o-linear-gradient(#DBE4EE, #A9BBCF);
        background: linear-gradient(#DBE4EE, #A9BBCF);
        width: 90px;
        height: 35px;
        top: 40px;
        left: -10px;
    }

    #raindrop1 {
        left: 110px;
        animation: raindrop 2s infinite linear, raindropFade 2s infinite linear;
    }

    #raindrop5 {
        left: 90px;
        animation: raindrop 2s infinite linear, raindropFade 2s infinite linear;
    }

    #raindrop2 {
        left: 70px;
        animation: raindropAlt 2s infinite linear, raindropFade 2s infinite linear;
    }

    #raindrop6 {
        left: 50px;
        animation: raindropAlt 2s infinite linear, raindropFade 2s infinite linear;
    }

    #raindrop3 {
        left: 30px;
        animation: raindrop 2s infinite linear, raindropFade 2s infinite linear;
    }

    #raindrop4 {
        left: 10px;
        animation: raindropAlt 2s infinite linear, raindropFade 2s infinite linear;
    }

    #raindrop7 {
        left: 0px;
        animation: raindropAlt 2s infinite linear, raindropFade 2s infinite linear;
    }

    #darkCloud {
        background-color: #90A7BF;
        width: 75px;
        height: 75px;
        top: 0px;
        animation: cloudFloat 5s infinite linear;
    }

    #darkCloud::before {
        background-color: #90A7BF;
        width: 50px;
        height: 50px;
        top: 17px;
        left: 55px;
    }

    #darkCloud::after {
        background: -webkit-linear-gradient(#90A7BF, #7792AF);
        background: -moz-linear-gradient(#90A7BF, #7792AF);
        background: -ms-linear-gradient(#90A7BF, #7792AF);
        background: -o-linear-gradient(#90A7BF, #7792AF);
        background: linear-gradient(#90A7BF, #7792AF);
        width: 140px;
        height: 60px;
        top: 40px;
        left: -15px;
    }

    #moon {
        width: 85px;
        height: 85px;
        top: -200px;
        left: 40%;
        -webkit-border-radius: 50px;
        -moz-border-radius: 50px;
        -ms-border-radius: 50px;
        -o-border-radius: 50px;
        border-radius: 50px;
        position: relative;
        box-shadow: 30px 15px 0 0 #ECD555;
        -webkit-transform: rotate(130deg);
        -moz-transform: rotate(130deg);
        -ms-transform: rotate(130deg);
        -o-transform: rotate(130deg);
        transform: rotate(130deg);
        animation: moonSwing 3s infinite linear;
    }

    #star1 {
        top: 0;
        left: -80px;
        animation: starFadeIn 5s infinite linear;
    }

    #star2 {
        top: -330px;
        left: -15px;
        animation: starFadeOut 6s infinite linear;
    }

    #star3 {
        top: -390px;
        left: 0;
        animation: starFadeIn 7s infinite linear;
    }

    .snowflake {
        position: absolute;
        font-size: 25px;
        color: #DBE4EE;
        height: 50%;
        animation: snow infinite;
    }


    .stormy:before {
        animation: stormy_thunder 2s steps(1, end) infinite;
        border-left: 0px solid transparent;
        border-right: 7px solid transparent;
        border-top: 43px solid yellow;
        box-shadow: yellow -7px -32px;
        content: '';
        display: block;
        height: 0;
        width: 0;
        position: absolute;
        left: 90px;
        top: 75px;
        transform: rotate(14deg);
        transform-origin: 50% -60px;
    }

    #weather-animations .row .weather {
        width: 100px;
        min-width: 100px;
        height: 100px;
    }

    #weather-animations {
        width: 25%;
    }

    .weather-small-number {
        font-size: 16px;
        margin-bottom: 0;
    }

    .weather-medium-number {
        font-size: 28px;
        font-weight: 600;
        color: var(--text-gray);
        margin-bottom: 0;
    }

    #weather-animations .row {
        margin: auto;
    }

    .weather-small-description {
        margin-bottom: 7px;
        font-size: 13px;
    }

    .show-table-mobile {
        overflow: hidden;
        padding: 10px;
        margin: 5px 0;
    }

    .min-width {
        margin: auto;
        min-width: 100px;
        width: 100px;
    }

    .always-on-top {
        z-index: 2;
    }

    .expand-table {
        margin-bottom: 10px;
    }

    .table thead th {
        padding: 0 10px;
    }

    #datatable_apoteka_zaduzenja th,
    td {
        padding-left: 1.25em;
    }

    #datatable_apoteka_zaduzenja.dataTable.table-sm .sorting::before,
    #datatable_apoteka_zaduzenja.dataTable.table-sm .sorting_asc::before,
    #datatable_apoteka_zaduzenja.dataTable.table-sm .sorting_desc::before,
    #datatable_apoteka_zaduzenja.dataTable>thead .sorting::before {
        left: 9px;
        top: 0 !important;
    }

    #datatable_apoteka_zaduzenja.dataTable>thead .sorting::after,
    #datatable_apoteka_zaduzenja.dataTable>thead .sorting_asc::after,
    #datatable_apoteka_zaduzenja.dataTable>thead .sorting_desc::after,
    #datatable_apoteka_zaduzenja.dataTable>thead .sorting_asc_disabled::after,
    #datatable_apoteka_zaduzenja.dataTable>thead .sorting_desc_disabled::after,
    #datatable_apoteka_zaduzenja.dataTable>thead .sorting::after {
        left: 0%;
        content: "↓";
        margin-right: 10px;
        top: 0 !important;
    }
}

@media (max-width: 640px) {
    .col-md-1.row-margin-top, .col-md-2.row-margin-top{
        flex: 0 0 100%;
        max-width: 100%;
      }
    .board_console {
        left: 10% !important;
    }

    .sudoku_board {
        width: 100% !important;
    }

    .container-fluid .row .col-md-6,
    .container-fluid .row .col-md-4 {
        flex: 0 0 100%;
        max-width: 100%;
        margin-bottom: 10px;
    }

    .row-margin-top {
        flex: 0 0 100%;
        max-width: 100%;
        margin-top: 20px !important;
    }
}


@media (max-width: 426px) {
    .box {
        width: 375px;
    }

    .desktop-card {
        display: none;
    }
}



@media all and (orientation:portrait) and (min-width: 640px) {
    h1 {
        font-size: 50px;
    }

    .statistics {
        font-size: 30px;
    }

    .sudoku_board .cell span {
        font-size: 60px;
    }

    .board_console .num {
        font-size: 60px;
    }
}

@media all and (orientation:landscape) and (min-height: 640px) {
    h1 {
        font-size: 50px;
    }

    .statistics {
        font-size: 30px;
    }

    .sudoku_board .cell span {
        font-size: 50px;
    }

    .board_console .num {
        font-size: 50px;
    }
}

@media all and (orientation:portrait) and (max-width: 1000px) {
    .sudoku_board .cell span {
        font-size: 30px;
    }
}

@media all and (orientation:portrait) and (max-width: 640px) {
    .sudoku_board .cell span {
        font-size: 24px;
    }

    .sudoku_board .cell .note {
        font-size: 10px;
    }
}

@media all and (orientation:portrait) and (max-width: 470px) {
    .sudoku_board .cell span {
        font-size: 16px;
    }

    .sudoku_board .cell .note {
        font-size: 8px;
    }
}

@media all and (orientation:portrait) and (max-width: 320px) {
    .sudoku_board .cell span {
        font-size: 12px;
    }

    .sudoku_board .cell .note {
        font-size: 8px;
    }
}

@media all and (orientation:portrait) and (max-width: 240px) {
    .sudoku_board .cell span {
        font-size: 10px;
    }
}