/*samsung j1*/
@media screen and (min-device-width : 320px) and (max-device-width : 359px) {
    .sticky-patra {
        position: fixed;
        top: 0;
        width: 100%;
        z-index: 90;
    }

    .foto-mobile {
        top: 1px;
        left: 4px;
    }

    .invers .sticky-ujian {
        background: #3f4a59;
    }

    .tombol-navigasi {
        position: fixed;
        left: 0;
        bottom: 0;
        width: 100%;
        background-color: #fff;
        text-align: center;
        padding-bottom: 5px;
        border-top: 1px solid #dedede;
    }

    .margin-box-btn {
        margin-top: 5px;
    }

    audio {
        max-width: 100%;
    }

    .invers .tombol-navigasi {
        background-color: #3f4a59;
        border-top: 1px solid #868d96;
    }

    .panel {
        width: 100%;
        margin-left: 0px;
        padding-left: -10px;
    }

    .panel-login {
        margin-top: 8%;
    }

    .noppading-mobile {
        margin: 0px;
        padding: 0px;
    }

    .panel-body {
        margin-top: -10px;
        padding: 6px;
    }

    .panel-heading-text h2 {
        font-size: 17px;
    }

    .panel-heading-text p {
        font-size: 13px;
    }

    .logo-header {
        position: absolute;
        top: 6px;
        left: 5px;
    }

    .nama-cbt {
        top: 26px;
        left: 15%;
    }

    .nama-cbt h1 {
        font-size: 13px;
        letter-spacing: 0px;
    }

    .nama-sekolah h1 {
        font-size: 13px;
    }

    .nama-sekolah {
        position: absolute;
        top: 11px;
        left: 15%;
    }

    .header .logo-header img {
        max-width: 13%;
    }

    .btn-block {
        padding: 7px !important;
    }

    .logo-header-2,
    .nama-sekolah-2,
    .nama-cbt-2 {
        display: none;
    }

    .footer {
        font-size: 10px;
    }

    .box-foto-user {
        top: 3px;
        right: 270px;
        padding: 19px;
    }

    .foto-user {
        max-width: 30px !important;
    }

    .box-nama-user {
        left: 57px;
        top: 15px;
    }

    #timer {
        top: 5px;
    }

    .box-tombol-logout {
        right: 13px;
        top: 15px;
    }

    /* .btn-logout-user {
        display: none;
    } */

    .sticky-ujian {
        position: fixed;
        top: 0px;
        width: 100%;
        z-index: 90;
        background: #fff;
        margin-left: -5px;
        margin-right: -5px;
        -webkit-animation: fadein .5s;
        /* Safari, Chrome and Opera > 12.1 */
        -moz-animation: fadein .5s;
        /* Firefox < 16 */
        -ms-animation: fadein .5s;
        /* Internet Explorer */
        -o-animation: fadein .5s;
        /* Opera < 12.1 */
        animation: fadein .5s;
    }

    .sticky-ujian+.wadah-soal {
        padding-top: 10px;
    }

    .box-soal-luar,
    .box-soal-dalam {
        padding: 0px;
    }

    .box-soal-dalam .text-loading {
        position: absolute;
        top: 28%;
        left: 31%;
    }

    .loader {
        left: 40%;
        top: 22%;
    }

    .box-soal-border {
        border: none;
    }

    .box-soal,
    .box-jawaban-obj,
    .box-jawaban-esai {
        border: none;
    }

    .box-jawaban-obj {
        margin-bottom: 13vh;
        margin-top: 0px;
    }

    #loading-server {
        bottom: 2px;
    }

    .margin-top-minus {
        margin-top: 10%;
        padding: 5px;
    }

    .margin-top-minus-ujian {
        margin-top: -4%;
        padding: 5px;
    }

    .box-nama-user {
        left: 54px;
        top: 12px;
        font-size: 12px;
        width: 220px;
        display: block;
    }

    .text-soal {
        display: none;
    }

    .box-nomor {
        left: 14px;
    }

    .box-daftar-soal {
        display: none;
    }

    .box-daftar-soal-mobile {
        display: block;
        height: 30px;
        width: 30px;
        padding-left: 1px;
        padding-top: 7px;
        border-radius: 20px;
        position: absolute;
        right: 11px;
        background: #336666;
        top: 4px;
        color: #fff;
        font-size: 12px;
    }

    .box-waktu {
        display: block;
        height: 34px;
        width: 183px;
        width: 111px;
        border: 1.2px solid #ffc107;
        padding: 4px;
        border-radius: 20px;
        position: absolute;
        right: 49px;
        top: 1px;
    }

    .box-waktu p {
        display: none;
    }

    .btn-prev span,
    .btn-next span {
        display: none;
    }

    #btn-prev {
        width: 40px;
        margin: auto;
        float: left;
    }

    #btn-next {
        width: 40px;
        margin: auto;
        float: right;
    }

    .box-ragu {
        margin-left: -33px;
    }

    .scroll {
        height: 46vh;
    }

    .margin-mobile {
        margin-right: 5px;
    }

    .modal-body {
        padding: 0px 0px 15px;
    }

    .dark-mode {
        right: 168px;
        bottom: 0px;
    }

    #dark-mode-btn {
        border: 0px;
        height: 35px;
        width: 35px;
        padding-top: 1px !important;
    }

    .invers .modal-content {
        background: #3f4a59;
        color: #fff;
    }

    .margin-mobile {
        margin-top: 10px;
    }

    .btnCustom {
        border: 0px;
    }

    #daftar-obj,
    #daftar-esai,
    #daftar-obj-modal,
    #daftar-esai-modal {
        padding: 0px;
    }

    .plakat-objektif,
    .plakat-esai {
        margin-left: 14px;
    }
}

/* -------------------------------------------------------- */
@media screen and (min-device-width : 360px) and (max-device-width : 374px) {
    .sticky-patra {
        position: fixed;
        top: 0;
        width: 100%;
        z-index: 90;
    }

    .foto-mobile {
        top: 4px;
        left: 4px;
    }

    .invers .sticky-ujian {
        background: #3f4a59;
    }

    .tombol-navigasi {
        position: fixed;
        left: 0;
        bottom: 0;
        width: 100%;
        background-color: #fff;
        text-align: center;
        padding-bottom: 5px;
        border-top: 1px solid #dedede;
    }

    .margin-box-btn {
        margin-top: 5px;
    }

    audio {
        max-width: 100%;
    }

    .invers .tombol-navigasi {
        background-color: #3f4a59;
        border-top: 1px solid #868d96;
    }

    .panel {
        width: 100%;
        margin-left: 0px;
        padding-left: -10px;
    }

    .panel-login {
        margin-top: 8%;
    }

    .noppading-mobile {
        margin: 0px;
        padding: 0px;
    }

    .panel-body {
        margin-top: -10px;
        padding: 6px;
    }

    .panel-heading-text h2 {
        font-size: 17px;
    }

    .panel-heading-text p {
        font-size: 13px;
    }

    .logo-header {
        position: absolute;
        top: 6px;
        left: 8px;
    }

    .nama-cbt {
        top: 26px;
        left: 15%;
    }

    .nama-cbt h1 {
        font-size: 13px;
        letter-spacing: 0px;
    }

    .nama-sekolah h1 {
        font-size: 13px;
    }

    .nama-sekolah {
        position: absolute;
        top: 11px;
        left: 15%;
    }

    .header .logo-header img {
        max-width: 13%;
    }

    .btn-block {
        padding: 7px !important;
    }

    .logo-header-2,
    .nama-sekolah-2,
    .nama-cbt-2 {
        display: none;
    }

    .footer {
        font-size: 10px;
    }

    .box-foto-user {
        top: 6px;
        right: 311px;
        padding: 19px;
    }

    .foto-user {
        max-width: 30px !important;
    }

    .box-nama-user {
        left: 57px;
        top: 15px;
    }

    #timer {
        top: 5px;
    }

    .box-tombol-logout {
        right: 13px;
        top: 15px;
    }

    /* .btn-logout-user {
        display: none;
    } */

    .sticky-ujian {
        position: fixed;
        top: 0px;
        width: 100%;
        z-index: 90;
        background: #fff;
        margin-left: -5px;
        margin-right: -5px;
        -webkit-animation: fadein .5s;
        /* Safari, Chrome and Opera > 12.1 */
        -moz-animation: fadein .5s;
        /* Firefox < 16 */
        -ms-animation: fadein .5s;
        /* Internet Explorer */
        -o-animation: fadein .5s;
        /* Opera < 12.1 */
        animation: fadein .5s;
    }

    .sticky-ujian+.wadah-soal {
        padding-top: 10px;
    }

    .box-soal-luar,
    .box-soal-dalam {
        padding: 0px;
    }

    .box-soal-dalam .text-loading {
        position: absolute;
        top: 28%;
        left: 31%;
    }

    .loader {
        left: 40%;
        top: 22%;
    }

    .box-soal-border {
        border: none;
    }

    .box-soal,
    .box-jawaban-obj,
    .box-jawaban-esai {
        border: none;
    }

    .box-jawaban-obj {
        margin-bottom: 13vh;
        margin-top: 0px;
    }

    #loading-server {
        bottom: 2px;
    }

    .margin-top-minus {
        margin-top: 10%;
        padding: 5px;
    }

    .margin-top-minus-ujian {
        margin-top: -4%;
        padding: 5px;
    }

    .box-nama-user {
        left: 54px;
        top: 16px;
        font-size: 12px;
        width: 220px;
        display: block;
    }

    .text-soal {
        display: none;
    }

    .box-nomor {
        left: 14px;
    }

    .box-daftar-soal {
        display: none;
    }

    .box-daftar-soal-mobile {
        display: block;
        height: 30px;
        width: 30px;
        padding-left: 1px;
        padding-top: 7px;
        border-radius: 20px;
        position: absolute;
        right: 11px;
        background: #336666;
        top: 4px;
        color: #fff;
        font-size: 12px;
    }

    .box-waktu {
        display: block;
        height: 34px;
        width: 183px;
        width: 111px;
        border: 1.2px solid #ffc107;
        padding: 4px;
        border-radius: 20px;
        position: absolute;
        right: 49px;
        top: 1px;
    }

    .box-waktu p {
        display: none;
    }

    .btn-prev span,
    .btn-next span {
        display: none;
    }

    #btn-prev {
        width: 40px;
        margin: auto;
        float: left;
    }

    #btn-next {
        width: 40px;
        margin: auto;
        float: right;
    }

    .box-ragu {
        margin-left: -33px;
    }

    .scroll {
        height: 46vh;
    }

    .margin-mobile {
        margin-right: 5px;
    }

    .modal-body {
        padding: 0px 0px 15px;
    }

    .dark-mode {
        right: 168px;
        bottom: 0px;
    }

    #dark-mode-btn {
        border: 0px;
        height: 35px;
        width: 35px;
        padding-top: 1px !important;
    }

    .invers .modal-content {
        background: #3f4a59;
        color: #fff;
    }

    .margin-mobile {
        margin-top: 10px;
    }

    .btnCustom {
        border: 0px;
    }

    #daftar-obj,
    #daftar-esai,
    #daftar-obj-modal,
    #daftar-esai-modal {
        padding: 0px;
    }

    .plakat-objektif,
    .plakat-esai {
        margin-left: 14px;
    }
}

/* -------------------------------------------------------- */
@media screen and (min-device-width : 375px) and (max-device-width : 392px) {
    .sticky-patra {
        position: fixed;
        top: 0;
        width: 100%;
        z-index: 90;
    }

    .foto-mobile {
        top: 4px;
        left: 4px;
    }

    .invers .sticky-ujian {
        background: #3f4a59;
    }

    .tombol-navigasi {
        position: fixed;
        left: 0;
        bottom: 0;
        width: 100%;
        background-color: #fff;
        text-align: center;
        padding-bottom: 5px;
        border-top: 1px solid #dedede;
    }

    .margin-box-btn {
        margin-top: 5px;
    }

    audio {
        max-width: 100%;
    }

    .invers .tombol-navigasi {
        background-color: #3f4a59;
        border-top: 1px solid #868d96;
    }

    .panel {
        width: 100%;
        margin-left: 0px;
        padding-left: -10px;
    }

    .panel-login {
        margin-top: 8%;
    }

    .noppading-mobile {
        margin: 0px;
        padding: 0px;
    }

    .panel-body {
        margin-top: -10px;
        padding: 6px;
    }

    .panel-heading-text h2 {
        font-size: 17px;
    }

    .panel-heading-text p {
        font-size: 13px;
    }

    .logo-header {
        position: absolute;
        top: 8px;
        left: 8px;
    }

    .nama-cbt {
        top: 26px;
        left: 15%;
    }

    .nama-cbt h1 {
        font-size: 13px;
        letter-spacing: 0px;
    }

    .nama-sekolah h1 {
        font-size: 13px;
    }

    .nama-sekolah {
        position: absolute;
        top: 11px;
        left: 15%;
    }

    .header .logo-header img {
        max-width: 13%;
    }

    .btn-block {
        padding: 7px !important;
    }

    .logo-header-2,
    .nama-sekolah-2,
    .nama-cbt-2 {
        display: none;
    }

    .footer {
        font-size: 10px;
    }

    .box-foto-user {
        top: 8px;
        right: 338px;
        padding: 19px;
    }

    .foto-user {
        max-width: 30px !important;
    }

    .box-nama-user {
        left: 57px;
        top: 15px;
    }

    #timer {
        top: 5px;
    }

    .box-tombol-logout {
        right: 13px;
        top: 11px;
    }

    /* .btn-logout-user {
        display: none;
    } */

    .sticky-ujian {
        position: fixed;
        top: 0px;
        width: 100%;
        z-index: 90;
        background: #fff;
        margin-left: -5px;
        margin-right: -5px;
        -webkit-animation: fadein .5s;
        /* Safari, Chrome and Opera > 12.1 */
        -moz-animation: fadein .5s;
        /* Firefox < 16 */
        -ms-animation: fadein .5s;
        /* Internet Explorer */
        -o-animation: fadein .5s;
        /* Opera < 12.1 */
        animation: fadein .5s;
    }

    .sticky-ujian+.wadah-soal {
        padding-top: 10px;
    }

    .box-soal-luar,
    .box-soal-dalam {
        padding: 0px;
    }

    .box-soal-dalam .text-loading {
        position: absolute;
        top: 28%;
        left: 31%;
    }

    .loader {
        left: 40%;
        top: 22%;
    }

    .box-soal-border {
        border: none;
    }

    .box-soal,
    .box-jawaban-obj,
    .box-jawaban-esai {
        border: none;
    }

    .box-jawaban-obj {
        margin-bottom: 13vh;
        margin-top: 0px;
    }

    #loading-server {
        bottom: 2px;
    }

    .margin-top-minus {
        margin-top: 10%;
        padding: 5px;
    }

    .margin-top-minus-ujian {
        margin-top: -4%;
        padding: 5px;
    }

    .box-nama-user {
        left: 61px;
        top: 18px;
        font-size: 12px;
        width: 220px;
        display: block;
    }

    .text-soal {
        display: none;
    }

    .box-nomor {
        left: 14px;
    }

    .box-daftar-soal {
        display: none;
    }

    .box-daftar-soal-mobile {
        display: block;
        height: 30px;
        width: 30px;
        padding-left: 1px;
        padding-top: 7px;
        border-radius: 20px;
        position: absolute;
        right: 11px;
        background: #336666;
        top: 4px;
        color: #fff;
        font-size: 12px;
    }

    .box-waktu {
        display: block;
        height: 34px;
        width: 183px;
        width: 111px;
        border: 1.2px solid #ffc107;
        padding: 4px;
        border-radius: 20px;
        position: absolute;
        right: 49px;
        top: 1px;
    }

    .box-waktu p {
        display: none;
    }

    .btn-prev span,
    .btn-next span {
        display: none;
    }

    #btn-prev {
        width: 40px;
        margin: auto;
        float: left;
    }

    #btn-next {
        width: 40px;
        margin: auto;
        float: right;
    }

    .box-ragu {
        margin-left: -22px;
    }

    .scroll {
        height: 46vh;
    }

    .margin-mobile {
        margin-right: 5px;
    }

    .modal-body {
        padding: 0px 0px 15px;
    }

    .dark-mode {
        right: 168px;
        bottom: 0px;
    }

    #dark-mode-btn {
        border: 0px;
        height: 35px;
        width: 35px;
        padding-top: 1px !important;
    }

    .invers .modal-content {
        background: #3f4a59;
        color: #fff;
    }

    .margin-mobile {
        margin-top: 10px;
    }

    .btnCustom {
        border: 0px;
    }

    #daftar-obj,
    #daftar-esai,
    #daftar-obj-modal,
    #daftar-esai-modal {
        padding: 0px;
    }

    .plakat-objektif,
    .plakat-esai {
        margin-left: 14px;
    }
}

/* -------------------------------------------------------- */
@media screen and (min-device-width : 393px) and (max-device-width : 411px) {
    .sticky-patra {
        position: fixed;
        top: 0;
        width: 100%;
        z-index: 90;
    }

    .foto-mobile {
        top: 4px;
        left: 4px;
    }

    .invers .sticky-ujian {
        background: #3f4a59;
    }

    .tombol-navigasi {
        position: fixed;
        left: 0;
        bottom: 0;
        width: 100%;
        background-color: #fff;
        text-align: center;
        padding-bottom: 5px;
        border-top: 1px solid #dedede;
    }

    .margin-box-btn {
        margin-top: 5px;
    }

    audio {
        max-width: 100%;
    }

    .invers .tombol-navigasi {
        background-color: #3f4a59;
        border-top: 1px solid #868d96;
    }

    .panel {
        width: 100%;
        margin-left: 0px;
        padding-left: -10px;
    }

    .panel-login {
        margin-top: 8%;
    }

    .noppading-mobile {
        margin: 0px;
        padding: 0px;
    }

    .panel-body {
        margin-top: -10px;
        padding: 6px;
    }

    .panel-heading-text h2 {
        font-size: 17px;
    }

    .panel-heading-text p {
        font-size: 13px;
    }

    .logo-header {
        position: absolute;
        top: 8px;
        left: 11px;
    }

    .nama-cbt {
        top: 26px;
        left: 15%;
    }

    .nama-cbt h1 {
        font-size: 13px;
        letter-spacing: 0px;
    }

    .nama-sekolah h1 {
        font-size: 13px;
    }

    .nama-sekolah {
        position: absolute;
        top: 11px;
        left: 15%;
    }

    .header .logo-header img {
        max-width: 13%;
    }

    .btn-block {
        padding: 7px !important;
    }

    .logo-header-2,
    .nama-sekolah-2,
    .nama-cbt-2 {
        display: none;
    }

    .footer {
        font-size: 10px;
    }

    .box-foto-user {
        top: 8px;
        right: 344px;
        padding: 19px;
    }

    .foto-user {
        max-width: 30px !important;
    }

    .box-nama-user {
        left: 57px;
        top: 15px;
    }

    #timer {
        top: 5px;
    }

    .box-tombol-logout {
        right: 13px;
        top: 11px;
    }

    /* .btn-logout-user {
        display: none;
    } */

    .sticky-ujian {
        position: fixed;
        top: 0px;
        width: 100%;
        z-index: 90;
        background: #fff;
        margin-left: -5px;
        margin-right: -5px;
        -webkit-animation: fadein .5s;
        /* Safari, Chrome and Opera > 12.1 */
        -moz-animation: fadein .5s;
        /* Firefox < 16 */
        -ms-animation: fadein .5s;
        /* Internet Explorer */
        -o-animation: fadein .5s;
        /* Opera < 12.1 */
        animation: fadein .5s;
    }

    .sticky-ujian+.wadah-soal {
        padding-top: 10px;
    }

    .box-soal-luar,
    .box-soal-dalam {
        padding: 0px;
    }

    .box-soal-dalam .text-loading {
        position: absolute;
        top: 28%;
        left: 31%;
    }

    .loader {
        left: 40%;
        top: 22%;
    }

    .box-soal-border {
        border: none;
    }

    .box-soal,
    .box-jawaban-obj,
    .box-jawaban-esai {
        border: none;
    }

    .box-jawaban-obj {
        margin-bottom: 13vh;
        margin-top: 0px;
    }

    #loading-server {
        bottom: 2px;
    }

    .margin-top-minus {
        margin-top: 10%;
        padding: 5px;
    }

    .margin-top-minus-ujian {
        margin-top: -4%;
        padding: 5px;
    }

    .box-nama-user {
        left: 54px;
        top: 18px;
        font-size: 12px;
        width: 220px;
        display: block;
    }

    .text-soal {
        display: none;
    }

    .box-nomor {
        left: 14px;
    }

    .box-daftar-soal {
        display: none;
    }

    .box-daftar-soal-mobile {
        display: block;
        height: 30px;
        width: 30px;
        padding-left: 1px;
        padding-top: 7px;
        border-radius: 20px;
        position: absolute;
        right: 11px;
        background: #336666;
        top: 4px;
        color: #fff;
        font-size: 12px;
    }

    .box-waktu {
        display: block;
        height: 34px;
        width: 183px;
        width: 111px;
        border: 1.2px solid #ffc107;
        padding: 4px;
        border-radius: 20px;
        position: absolute;
        right: 49px;
        top: 1px;
    }

    .box-waktu p {
        display: none;
    }

    .btn-prev span,
    .btn-next span {
        display: none;
    }

    #btn-prev {
        width: 40px;
        margin: auto;
        float: left;
    }

    #btn-next {
        width: 40px;
        margin: auto;
        float: right;
    }

    .box-ragu {
        margin-left: -22px;
    }

    .scroll {
        height: 46vh;
    }

    .margin-mobile {
        margin-right: 5px;
    }

    .modal-body {
        padding: 0px 0px 15px;
    }

    .dark-mode {
        right: 168px;
        bottom: 0px;
    }

    #dark-mode-btn {
        border: 0px;
        height: 35px;
        width: 35px;
        padding-top: 1px !important;
    }

    .invers .modal-content {
        background: #3f4a59;
        color: #fff;
    }

    .margin-mobile {
        margin-top: 10px;
    }

    .btnCustom {
        border: 0px;
    }

    #daftar-obj,
    #daftar-esai,
    #daftar-obj-modal,
    #daftar-esai-modal {
        padding: 0px;
    }

    .plakat-objektif,
    .plakat-esai {
        margin-left: 14px;
    }
}

/* -------------------------------------------------------- */
@media screen and (min-device-width : 412px) and (max-device-width : 480px) {
    .sticky-patra {
        position: fixed;
        top: 0;
        width: 100%;
        z-index: 90;
    }

    .foto-mobile {
        top: 4px;
        left: 4px;
    }

    .invers .sticky-ujian {
        background: #3f4a59;
    }

    .tombol-navigasi {
        position: fixed;
        left: 0;
        bottom: 0;
        width: 100%;
        background-color: #fff;
        text-align: center;
        padding-bottom: 10px;
        border-top: 1px solid #dedede;
    }

    .invers .tombol-navigasi {
        background-color: #3f4a59;
        border-top: 1px solid #868d96;
    }

    .panel {
        width: 100%;
        margin-left: 0px;
        padding-left: -10px;
    }

    .panel-login {
        margin-top: 8%;
    }

    .noppading-mobile {
        margin: 0px;
        padding: 0px;
    }

    .panel-body {
        margin-top: -10px;
        padding: 6px;
    }

    .panel-heading-text h2 {
        font-size: 17px;
    }

    .panel-heading-text p {
        font-size: 13px;
    }

    .logo-header {
        position: absolute;
        top: 8px;
        left: 12px;
    }

    .nama-cbt {
        top: 26px;
        left: 15%;
    }

    .nama-cbt h1 {
        font-size: 13px;
        letter-spacing: 0px;
    }

    .nama-sekolah h1 {
        font-size: 13px;
    }

    .nama-sekolah {
        position: absolute;
        top: 11px;
        left: 15%;
    }

    .header .logo-header img {
        max-width: 13%;
    }

    .btn-block {
        padding: 7px !important;
    }

    .logo-header-2,
    .nama-sekolah-2,
    .nama-cbt-2 {
        display: none;
    }

    .footer {
        font-size: 10px;
    }

    .box-foto-user {
        top: 9px;
        right: 364px;
        padding: 19px;
    }

    .foto-user {
        max-width: 30px !important;
    }

    .box-nama-user {
        left: 57px;
        top: 15px;
    }

    #timer {
        top: 5px;
    }

    .box-tombol-logout {
        right: 13px;
        top: 15px;
    }

    /* .btn-logout-user {
        display: none;
    } */

    .sticky-ujian {
        position: fixed;
        top: 0px;
        width: 100%;
        z-index: 90;
        background: #fff;
        margin-left: -5px;
        margin-right: -5px;
        -webkit-animation: fadein .5s;
        /* Safari, Chrome and Opera > 12.1 */
        -moz-animation: fadein .5s;
        /* Firefox < 16 */
        -ms-animation: fadein .5s;
        /* Internet Explorer */
        -o-animation: fadein .5s;
        /* Opera < 12.1 */
        animation: fadein .5s;
    }

    .sticky-ujian+.wadah-soal {
        padding-top: 10px;
    }

    .box-soal-luar,
    .box-soal-dalam {
        padding: 0px;
    }

    .box-soal-dalam .text-loading {
        position: absolute;
        top: 28%;
        left: 31%;
    }

    .loader {
        left: 40%;
        top: 22%;
    }

    .box-soal-border {
        border: none;
    }

    .box-soal,
    .box-jawaban-obj,
    .box-jawaban-esai {
        border: none;
    }

    .box-jawaban-obj {
        margin-bottom: 12vh;
    }

    #loading-server {
        bottom: 2px;
    }

    .margin-top-minus {
        margin-top: 10%;
        padding: 5px;
    }

    .margin-top-minus-ujian {
        margin-top: -4%;
        padding: 5px;
    }

    .box-nama-user {
        left: 54px;
        top: 19px;
        font-size: 12px;
        width: 220px;
        display: block;
    }

    .text-soal {
        display: none;
    }

    .box-nomor {
        left: 14px;
    }

    .box-daftar-soal {
        display: none;
    }

    .box-daftar-soal-mobile {
        display: block;
        height: 30px;
        width: 30px;
        padding-left: 1px;
        padding-top: 7px;
        border-radius: 20px;
        position: absolute;
        right: 11px;
        background: #336666;
        top: 4px;
        color: #fff;
        font-size: 12px;
    }

    .box-waktu {
        display: block;
        height: 34px;
        width: 183px;
        width: 111px;
        border: 1.2px solid #ffc107;
        padding: 4px;
        border-radius: 20px;
        position: absolute;
        right: 49px;
        top: 1px;
    }

    .box-waktu p {
        display: none;
    }

    .btn-prev span,
    .btn-next span {
        display: none;
    }

    #btn-prev {
        width: 40px;
        margin: auto;
        float: left;
    }

    #btn-next {
        width: 40px;
        margin: auto;
        float: right;
    }

    .box-ragu {
        margin-left: -15px;
    }

    .scroll {
        height: 46vh;
    }

    .margin-mobile {
        margin-right: 5px;
    }

    .modal-body {
        padding: 0px 0px 15px;
    }

    .dark-mode {
        right: 168px;
        bottom: 0px;
    }

    #dark-mode-btn {
        border: 0px;
        height: 35px;
        width: 35px;
        padding-top: 1px !important;
    }

    .invers .modal-content {
        background: #3f4a59;
        color: #fff;
    }

    .margin-mobile {
        margin-top: 10px;
    }

    .btnCustom {
        border: 0px;
    }

    #daftar-obj,
    #daftar-esai,
    #daftar-obj-modal,
    #daftar-esai-modal {
        padding: 0px;
    }

    .plakat-objektif,
    .plakat-esai {
        margin-left: 14px;
    }
}

/* -------------------------------------------------------- */
@media screen and (min-device-width : 481px) and (max-device-width : 620px) and (orientation : portrait) {
    .sticky-patra {
        position: fixed;
        top: 0;
        width: 100%;
        z-index: 90;
    }

    .foto-mobile {
        top: 4px;
        left: 4px;
    }

    .invers .sticky-ujian {
        background: #3f4a59;
    }

    .tombol-navigasi {
        position: fixed;
        left: 0;
        bottom: 0;
        width: 100%;
        background-color: #fff;
        text-align: center;
        padding-bottom: 10px;
        border-top: 1px solid #dedede;
    }

    .invers .tombol-navigasi {
        background-color: #3f4a59;
        border-top: 1px solid #868d96;
    }

    .panel {
        width: 100%;
        margin-left: 0px;
        padding-left: -10px;
    }

    .panel-login {
        margin-top: 8%;
    }

    .noppading-mobile {
        margin: 0px;
        padding: 0px;
    }

    .panel-body {
        margin-top: -10px;
        padding: 6px;
    }

    .panel-heading-text h2 {
        font-size: 17px;
    }

    .panel-heading-text p {
        font-size: 13px;
    }

    .logo-header {
        position: absolute;
        top: 2px;
        left: 0px;
    }

    .nama-cbt {
        top: 26px;
        left: 15%;
    }

    .nama-cbt h1 {
        font-size: 13px;
        letter-spacing: 0px;
    }

    .nama-sekolah h1 {
        font-size: 13px;
    }

    .nama-sekolah {
        position: absolute;
        top: 11px;
        left: 15%;
    }

    .header .logo-header img {
        max-width: 13%;
    }

    .btn-block {
        padding: 7px !important;
    }

    .nama-sekolah-2 {
        left: 85px;
        top: 24px
    }

    .logo-header-2 {
        left: 2%;
    }

    .nama-sekolah-2 h1 {
        font-size: 13px;
    }

    .nama-cbt-2 h1 {
        font-size: 14px;
        letter-spacing: 2px;
    }

    .nama-cbt-2 {
        left: 85px;
        top: 41px;
    }

    .footer {
        font-size: 10px;
    }

    .box-foto-user {
        top: 11px;
        padding: 19px;
    }

    .foto-user {
        max-width: 30px !important;
    }

    .box-nama-user {
        left: 57px;
        top: 15px;
    }

    #timer {
        top: 5px;
    }

    .box-tombol-logout {
        right: 13px;
        top: 15px;
    }

    /* .btn-logout-user {
        display: none;
    } */

    .sticky-ujian {
        position: fixed;
        top: 0px;
        width: 100%;
        z-index: 90;
        background: #fff;
        margin-left: -5px;
        margin-right: -5px;
        -webkit-animation: fadein .5s;
        /* Safari, Chrome and Opera > 12.1 */
        -moz-animation: fadein .5s;
        /* Firefox < 16 */
        -ms-animation: fadein .5s;
        /* Internet Explorer */
        -o-animation: fadein .5s;
        /* Opera < 12.1 */
        animation: fadein .5s;
    }

    .sticky-ujian+.wadah-soal {
        padding-top: 10px;
    }

    .box-soal-luar,
    .box-soal-dalam {
        padding: 0px;
    }

    .box-soal-dalam .text-loading {
        position: absolute;
        top: 28%;
        left: 31%;
    }

    .loader {
        left: 40%;
        top: 22%;
    }

    .box-soal-border {
        border: none;
    }

    .box-soal,
    .box-jawaban-obj,
    .box-jawaban-esai {
        border: none;
    }

    .box-jawaban-obj {
        margin-bottom: 12vh;
    }

    #loading-server {
        bottom: 2px;
    }

    .margin-top-minus {
        margin-top: 10%;
        padding: 5px;
    }

    .margin-top-minus-ujian {
        margin-top: -4%;
        padding: 5px;
    }

    .box-nama-user {
        left: -17px;
        top: 54px;
        font-size: 12px;
        width: inherit;
        display: block;
        text-align: right;
    }

    .text-soal {
        display: none;
    }

    .box-nomor {
        left: 14px;
    }

    .box-daftar-soal {
        display: none;
    }

    .box-daftar-soal-mobile {
        display: block;
        height: 30px;
        width: 30px;
        padding-left: 1px;
        padding-top: 7px;
        border-radius: 20px;
        position: absolute;
        right: 11px;
        background: #336666;
        top: 4px;
        color: #fff;
        font-size: 12px;
    }

    .box-waktu {
        display: block;
        height: 34px;
        width: 183px;
        width: 111px;
        border: 1.2px solid #ffc107;
        padding: 4px;
        border-radius: 20px;
        position: absolute;
        right: 49px;
        top: 1px;
    }

    .box-waktu p {
        display: none;
    }

    .btn-prev span,
    .btn-next span {
        display: none;
    }

    #btn-prev {
        width: 40px;
        margin: auto;
        float: left;
    }

    #btn-next {
        width: 40px;
        margin: auto;
        float: right;
    }

    .box-ragu {
        margin-left: -33px;
    }

    .scroll {
        height: 46vh;
    }

    .margin-mobile {
        margin-right: 5px;
    }

    .modal-body {
        padding: 0px 0px 15px;
    }

    .dark-mode {
        right: 168px;
        bottom: 0px;
    }

    #dark-mode-btn {
        border: 0px;
        height: 35px;
        width: 35px;
        padding-top: 1px !important;
    }

    .invers .modal-content {
        background: #3f4a59;
        color: #fff;
    }

    .margin-mobile {
        margin-top: 10px;
    }

    .btnCustom {
        border: 0px;
    }

    #daftar-obj,
    #daftar-esai,
    #daftar-obj-modal,
    #daftar-esai-modal {
        padding: 0px;
    }

    .plakat-objektif,
    .plakat-esai {
        margin-left: 14px;
    }
}