/*------------------------------------------------------------------
Website: eyecare
Author : SzeWei
--------------------------------------------------------------------

/* Bootstrap SCSS Libraries */
@import url("https://fonts.googleapis.com/css?family=ZCOOL+KuaiLe&display=swap");
.container { width: 100%; padding-right: 15px; padding-left: 15px; margin-right: auto; margin-left: auto; }
@media (min-width: 576px) { .container { max-width: 540px; } }
@media (min-width: 768px) { .container { max-width: 720px; } }
@media (min-width: 992px) { .container { max-width: 960px; } }
@media (min-width: 1200px) { .container { max-width: 1140px; } }

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

.row { display: flex; flex-wrap: wrap; margin-right: -15px; margin-left: -15px; }

.no-gutters { margin-right: 0; margin-left: 0; }
.no-gutters > .col, .no-gutters > [class*="col-"] { padding-right: 0; padding-left: 0; }

.col-1, .col-2, .col-3, .col-4, .col-5, .col-6, .col-7, .col-8, .col-9, .col-10, .col-11, .col-12, .col, .col-auto, .col-sm-1, .col-sm-2, .col-sm-3, .col-sm-4, .col-sm-5, .col-sm-6, .col-sm-7, .col-sm-8, .col-sm-9, .col-sm-10, .col-sm-11, .col-sm-12, .col-sm, .col-sm-auto, .col-md-1, .col-md-2, .col-md-3, .col-md-4, .col-md-5, .col-md-6, .col-md-7, .col-md-8, .col-md-9, .col-md-10, .col-md-11, .col-md-12, .col-md, .col-md-auto, .col-lg-1, .col-lg-2, .col-lg-3, .col-lg-4, .col-lg-5, .col-lg-6, .col-lg-7, .col-lg-8, .col-lg-9, .col-lg-10, .col-lg-11, .col-lg-12, .col-lg, .col-lg-auto, .col-xl-1, .col-xl-2, .col-xl-3, .col-xl-4, .col-xl-5, .col-xl-6, .col-xl-7, .col-xl-8, .col-xl-9, .col-xl-10, .col-xl-11, .col-xl-12, .col-xl, .col-xl-auto { position: relative; width: 100%; min-height: 1px; padding-right: 15px; padding-left: 15px; }

.col { flex-basis: 0; flex-grow: 1; max-width: 100%; }

.col-auto { flex: 0 0 auto; width: auto; max-width: none; }

.col-1 { flex: 0 0 8.33333%; max-width: 8.33333%; }

.col-2 { flex: 0 0 16.66667%; max-width: 16.66667%; }

.col-3 { flex: 0 0 25%; max-width: 25%; }

.col-4 { flex: 0 0 33.33333%; max-width: 33.33333%; }

.col-5 { flex: 0 0 41.66667%; max-width: 41.66667%; }

.col-6 { flex: 0 0 50%; max-width: 50%; }

.col-7 { flex: 0 0 58.33333%; max-width: 58.33333%; }

.col-8 { flex: 0 0 66.66667%; max-width: 66.66667%; }

.col-9 { flex: 0 0 75%; max-width: 75%; }

.col-10 { flex: 0 0 83.33333%; max-width: 83.33333%; }

.col-11 { flex: 0 0 91.66667%; max-width: 91.66667%; }

.col-12 { flex: 0 0 100%; max-width: 100%; }

.order-first { order: -1; }

.order-last { order: 13; }

.order-0 { order: 0; }

.order-1 { order: 1; }

.order-2 { order: 2; }

.order-3 { order: 3; }

.order-4 { order: 4; }

.order-5 { order: 5; }

.order-6 { order: 6; }

.order-7 { order: 7; }

.order-8 { order: 8; }

.order-9 { order: 9; }

.order-10 { order: 10; }

.order-11 { order: 11; }

.order-12 { order: 12; }

.offset-1 { margin-left: 8.33333%; }

.offset-2 { margin-left: 16.66667%; }

.offset-3 { margin-left: 25%; }

.offset-4 { margin-left: 33.33333%; }

.offset-5 { margin-left: 41.66667%; }

.offset-6 { margin-left: 50%; }

.offset-7 { margin-left: 58.33333%; }

.offset-8 { margin-left: 66.66667%; }

.offset-9 { margin-left: 75%; }

.offset-10 { margin-left: 83.33333%; }

.offset-11 { margin-left: 91.66667%; }

@media (min-width: 576px) { .col-sm { flex-basis: 0; flex-grow: 1; max-width: 100%; }
  .col-sm-auto { flex: 0 0 auto; width: auto; max-width: none; }
  .col-sm-1 { flex: 0 0 8.33333%; max-width: 8.33333%; }
  .col-sm-2 { flex: 0 0 16.66667%; max-width: 16.66667%; }
  .col-sm-3 { flex: 0 0 25%; max-width: 25%; }
  .col-sm-4 { flex: 0 0 33.33333%; max-width: 33.33333%; }
  .col-sm-5 { flex: 0 0 41.66667%; max-width: 41.66667%; }
  .col-sm-6 { flex: 0 0 50%; max-width: 50%; }
  .col-sm-7 { flex: 0 0 58.33333%; max-width: 58.33333%; }
  .col-sm-8 { flex: 0 0 66.66667%; max-width: 66.66667%; }
  .col-sm-9 { flex: 0 0 75%; max-width: 75%; }
  .col-sm-10 { flex: 0 0 83.33333%; max-width: 83.33333%; }
  .col-sm-11 { flex: 0 0 91.66667%; max-width: 91.66667%; }
  .col-sm-12 { flex: 0 0 100%; max-width: 100%; }
  .order-sm-first { order: -1; }
  .order-sm-last { order: 13; }
  .order-sm-0 { order: 0; }
  .order-sm-1 { order: 1; }
  .order-sm-2 { order: 2; }
  .order-sm-3 { order: 3; }
  .order-sm-4 { order: 4; }
  .order-sm-5 { order: 5; }
  .order-sm-6 { order: 6; }
  .order-sm-7 { order: 7; }
  .order-sm-8 { order: 8; }
  .order-sm-9 { order: 9; }
  .order-sm-10 { order: 10; }
  .order-sm-11 { order: 11; }
  .order-sm-12 { order: 12; }
  .offset-sm-0 { margin-left: 0; }
  .offset-sm-1 { margin-left: 8.33333%; }
  .offset-sm-2 { margin-left: 16.66667%; }
  .offset-sm-3 { margin-left: 25%; }
  .offset-sm-4 { margin-left: 33.33333%; }
  .offset-sm-5 { margin-left: 41.66667%; }
  .offset-sm-6 { margin-left: 50%; }
  .offset-sm-7 { margin-left: 58.33333%; }
  .offset-sm-8 { margin-left: 66.66667%; }
  .offset-sm-9 { margin-left: 75%; }
  .offset-sm-10 { margin-left: 83.33333%; }
  .offset-sm-11 { margin-left: 91.66667%; } }
@media (min-width: 768px) { .col-md { flex-basis: 0; flex-grow: 1; max-width: 100%; }
  .col-md-auto { flex: 0 0 auto; width: auto; max-width: none; }
  .col-md-1 { flex: 0 0 8.33333%; max-width: 8.33333%; }
  .col-md-2 { flex: 0 0 16.66667%; max-width: 16.66667%; }
  .col-md-3 { flex: 0 0 25%; max-width: 25%; }
  .col-md-4 { flex: 0 0 33.33333%; max-width: 33.33333%; }
  .col-md-5 { flex: 0 0 41.66667%; max-width: 41.66667%; }
  .col-md-6 { flex: 0 0 50%; max-width: 50%; }
  .col-md-7 { flex: 0 0 58.33333%; max-width: 58.33333%; }
  .col-md-8 { flex: 0 0 66.66667%; max-width: 66.66667%; }
  .col-md-9 { flex: 0 0 75%; max-width: 75%; }
  .col-md-10 { flex: 0 0 83.33333%; max-width: 83.33333%; }
  .col-md-11 { flex: 0 0 91.66667%; max-width: 91.66667%; }
  .col-md-12 { flex: 0 0 100%; max-width: 100%; }
  .order-md-first { order: -1; }
  .order-md-last { order: 13; }
  .order-md-0 { order: 0; }
  .order-md-1 { order: 1; }
  .order-md-2 { order: 2; }
  .order-md-3 { order: 3; }
  .order-md-4 { order: 4; }
  .order-md-5 { order: 5; }
  .order-md-6 { order: 6; }
  .order-md-7 { order: 7; }
  .order-md-8 { order: 8; }
  .order-md-9 { order: 9; }
  .order-md-10 { order: 10; }
  .order-md-11 { order: 11; }
  .order-md-12 { order: 12; }
  .offset-md-0 { margin-left: 0; }
  .offset-md-1 { margin-left: 8.33333%; }
  .offset-md-2 { margin-left: 16.66667%; }
  .offset-md-3 { margin-left: 25%; }
  .offset-md-4 { margin-left: 33.33333%; }
  .offset-md-5 { margin-left: 41.66667%; }
  .offset-md-6 { margin-left: 50%; }
  .offset-md-7 { margin-left: 58.33333%; }
  .offset-md-8 { margin-left: 66.66667%; }
  .offset-md-9 { margin-left: 75%; }
  .offset-md-10 { margin-left: 83.33333%; }
  .offset-md-11 { margin-left: 91.66667%; } }
@media (min-width: 992px) { .col-lg { flex-basis: 0; flex-grow: 1; max-width: 100%; }
  .col-lg-auto { flex: 0 0 auto; width: auto; max-width: none; }
  .col-lg-1 { flex: 0 0 8.33333%; max-width: 8.33333%; }
  .col-lg-2 { flex: 0 0 16.66667%; max-width: 16.66667%; }
  .col-lg-3 { flex: 0 0 25%; max-width: 25%; }
  .col-lg-4 { flex: 0 0 33.33333%; max-width: 33.33333%; }
  .col-lg-5 { flex: 0 0 41.66667%; max-width: 41.66667%; }
  .col-lg-6 { flex: 0 0 50%; max-width: 50%; }
  .col-lg-7 { flex: 0 0 58.33333%; max-width: 58.33333%; }
  .col-lg-8 { flex: 0 0 66.66667%; max-width: 66.66667%; }
  .col-lg-9 { flex: 0 0 75%; max-width: 75%; }
  .col-lg-10 { flex: 0 0 83.33333%; max-width: 83.33333%; }
  .col-lg-11 { flex: 0 0 91.66667%; max-width: 91.66667%; }
  .col-lg-12 { flex: 0 0 100%; max-width: 100%; }
  .order-lg-first { order: -1; }
  .order-lg-last { order: 13; }
  .order-lg-0 { order: 0; }
  .order-lg-1 { order: 1; }
  .order-lg-2 { order: 2; }
  .order-lg-3 { order: 3; }
  .order-lg-4 { order: 4; }
  .order-lg-5 { order: 5; }
  .order-lg-6 { order: 6; }
  .order-lg-7 { order: 7; }
  .order-lg-8 { order: 8; }
  .order-lg-9 { order: 9; }
  .order-lg-10 { order: 10; }
  .order-lg-11 { order: 11; }
  .order-lg-12 { order: 12; }
  .offset-lg-0 { margin-left: 0; }
  .offset-lg-1 { margin-left: 8.33333%; }
  .offset-lg-2 { margin-left: 16.66667%; }
  .offset-lg-3 { margin-left: 25%; }
  .offset-lg-4 { margin-left: 33.33333%; }
  .offset-lg-5 { margin-left: 41.66667%; }
  .offset-lg-6 { margin-left: 50%; }
  .offset-lg-7 { margin-left: 58.33333%; }
  .offset-lg-8 { margin-left: 66.66667%; }
  .offset-lg-9 { margin-left: 75%; }
  .offset-lg-10 { margin-left: 83.33333%; }
  .offset-lg-11 { margin-left: 91.66667%; } }
@media (min-width: 1200px) { .col-xl { flex-basis: 0; flex-grow: 1; max-width: 100%; }
  .col-xl-auto { flex: 0 0 auto; width: auto; max-width: none; }
  .col-xl-1 { flex: 0 0 8.33333%; max-width: 8.33333%; }
  .col-xl-2 { flex: 0 0 16.66667%; max-width: 16.66667%; }
  .col-xl-3 { flex: 0 0 25%; max-width: 25%; }
  .col-xl-4 { flex: 0 0 33.33333%; max-width: 33.33333%; }
  .col-xl-5 { flex: 0 0 41.66667%; max-width: 41.66667%; }
  .col-xl-6 { flex: 0 0 50%; max-width: 50%; }
  .col-xl-7 { flex: 0 0 58.33333%; max-width: 58.33333%; }
  .col-xl-8 { flex: 0 0 66.66667%; max-width: 66.66667%; }
  .col-xl-9 { flex: 0 0 75%; max-width: 75%; }
  .col-xl-10 { flex: 0 0 83.33333%; max-width: 83.33333%; }
  .col-xl-11 { flex: 0 0 91.66667%; max-width: 91.66667%; }
  .col-xl-12 { flex: 0 0 100%; max-width: 100%; }
  .order-xl-first { order: -1; }
  .order-xl-last { order: 13; }
  .order-xl-0 { order: 0; }
  .order-xl-1 { order: 1; }
  .order-xl-2 { order: 2; }
  .order-xl-3 { order: 3; }
  .order-xl-4 { order: 4; }
  .order-xl-5 { order: 5; }
  .order-xl-6 { order: 6; }
  .order-xl-7 { order: 7; }
  .order-xl-8 { order: 8; }
  .order-xl-9 { order: 9; }
  .order-xl-10 { order: 10; }
  .order-xl-11 { order: 11; }
  .order-xl-12 { order: 12; }
  .offset-xl-0 { margin-left: 0; }
  .offset-xl-1 { margin-left: 8.33333%; }
  .offset-xl-2 { margin-left: 16.66667%; }
  .offset-xl-3 { margin-left: 25%; }
  .offset-xl-4 { margin-left: 33.33333%; }
  .offset-xl-5 { margin-left: 41.66667%; }
  .offset-xl-6 { margin-left: 50%; }
  .offset-xl-7 { margin-left: 58.33333%; }
  .offset-xl-8 { margin-left: 66.66667%; }
  .offset-xl-9 { margin-left: 75%; }
  .offset-xl-10 { margin-left: 83.33333%; }
  .offset-xl-11 { margin-left: 91.66667%; } }
/*----------------------------------
1. General
----------------------------------*/
* { box-sizing: border-box; -moz-box-sizing: border-box; -webkit-box-sizing: border-box; }

html, body { margin: 0; padding: 0; overflow-x: hidden; }

/* body { background-image: url("../../assets/img/bg.png"); background-repeat: repeat; color: #0d2d68; font-family: "ZCOOL KuaiLe", cursive; font-size: 16px; position: relative; } */

body {  font-family: "ZCOOL KuaiLe", cursive; font-size: 16px; position: relative; }

:focus { outline: none; }

.container-fluid { max-width: 2050px; }

@media (max-width: 1200px) { .container { max-width: 1140px; } }
@media (max-width: 992px) { .container { max-width: 960px; } }
@media (max-width: 768px) { .container { max-width: 860px; } }
@media (max-width: 576px) { .container { max-width: 680px; } }

/* font */
a, .btn, button, :hover { text-decoration: none; transition: .3s; }

a[href^="tel"] { color: inherit; }

a { color: inherit; }

h1, h2, h3, h4, h5, h6 { font-family: "ZCOOL KuaiLe", cursive; margin: 0; color: #0d2d68; }

h2 { font-size: 40px; }

h3 { font-size: 26px; }

h4 { font-size: 24px; }

h5 { font-size: 20px; }

p { margin-bottom: 0; }

ul { padding: 0; }
ul li { list-style-type: none; padding-bottom: 10px; }

ol { padding-inline-start: 20px; }
ol li { padding-bottom: 10px; }

a, a:focus, a:hover, .btn, .btn:focus, .btn:hover, button, button:focus, button:hover, input:focus, .form-control:focus, button:focus, .btn-primary:hover, a:focus, select:focus { box-shadow: none; text-decoration: none; outline: none; border: unset; }

[type=reset], [type=submit], button, html [type=button] { -webkit-appearance: unset; }

.dropdown-toggle::after { border: unset; width: unset; height: unset; }

/* button */
.btn-wrap { background: #5fa7f9; padding: 5px; border-radius: 10px; display: inline-block; box-shadow: 5px 5px 5px rgba(37, 37, 37, 0.5); }
.btn-wrap .btn { font-family: "ZCOOL KuaiLe", cursive; color: #0d2d68; background: #d5e6f6; border-radius: 10px; border: 0; font-size: 16px; padding: 5px 30px; }
.btn-wrap .btn:hover { color: #0d2d68; }

.green-wrap { background: #29e210; }
.green-wrap .green-btn { color: #29e210; background: #cdffc6; }
.green-wrap .green-btn:hover { color: #29e210; }

.red-wrap { background: #b82020; }
.red-wrap .red-btn { color: #b82020; background: #fcbbbb; }
.red-wrap .red-btn:hover { color: #b82020; }

.round-wrap { border-radius: 100%; }
.round-wrap .round-btn { width: 50px; height: 50px; padding: 5px; border-radius: 100%; display: flex; align-items: center; justify-content: center; }

.img-btn-wrap a img { height: 45px; }
.img-btn-wrap.disable a img { filter: grayscale(100%); }

.disable { filter: grayscale(100%); }

/* form */
form .form-group { margin-bottom: 10px; }
form .form-group input { background: transparent; border: none; border-bottom: 2px solid #0d2d68; font-size: 20px; color: #0d2d68; }
form .form-group input::-webkit-input-placeholder { color: #0d2d68; }

/* scroll */
.scrollbox { padding-right: 5px; overflow-y: scroll; }
.scrollbox::-webkit-scrollbar { width: 5px; }
.scrollbox::-webkit-scrollbar-thumb { background-color: #6b6c6e; outline: none; border-radius: 5px; }
.scrollbox::-webkit-scrollbar-track { -webkit-box-shadow: none; background-color: transparent; border-radius: 5px; margin-top: 10px; }

/*----------------------------------
2. Homepage
----------------------------------*/
main { min-height: 100vh; display: flex; justify-content: center; align-items: center; }

section.main-box { position: relative; display: flex; align-items: center; padding: 20px; }

.share-box.login-main .outer-wrap { height: unset; }
.share-box.login-main .outer-wrap .big-inner { display: flex; justify-content: center; flex-direction: column; }
.share-box.login-main .outer-wrap .big-inner .top { text-align: center; }
.share-box.login-main .outer-wrap .big-inner form .form-group input { color: #fff; border-bottom: 2px solid #fff; }
.share-box.login-main .outer-wrap .big-inner form .form-group input::placeholder { color: #fff; }
.share-box.login-main .outer-wrap .big-inner form .form-action { display: flex; justify-content: flex-end; }
.share-box.login-main .outer-wrap .big-inner form .form-action .img-btn-wrap { text-align: center; }
.share-box.login-main .outer-wrap .big-inner form .form-action .img-btn-wrap a.btn { padding-right: 0; }
.share-box .outer-wrap { display: flex; flex-direction: row; flex-wrap: wrap; justify-content: center; align-items: center; align-content: flex-start; height: 80vh; }
.share-box .outer-wrap .left-wrap { flex: 2.5; }
.share-box .outer-wrap .left-wrap .left-big { background: #5fa7f9; padding: 25px; border-radius: 15px; margin-right: 15px; height: 80vh; text-align: center; box-shadow: 5px 5px 5px rgba(37, 37, 37, 0.5); }
.share-box .outer-wrap .left-wrap .left-big .big-inner { background: #d5e6f6; padding: 25px; border-radius: 25px; height: 100%; display: flex; flex-direction: column; align-items: center; align-content: center; justify-content: center; }
.share-box .outer-wrap .left-wrap .left-big .big-inner .top .title { text-align: center; padding-bottom: 25px; }
.share-box .outer-wrap .left-wrap .left-big .big-inner .top .title h3 { display: inline-block; border-bottom: 2px solid #0d2d68; }
.share-box .outer-wrap .left-wrap .left-big .big-inner .top img { width: 130px; margin-bottom: 20px; }
.share-box .outer-wrap .left-wrap .left-big .big-inner .top.doctor .doctor-ico { position: relative; display: inline-block; }
.share-box .outer-wrap .left-wrap .left-big .big-inner .top.doctor .doctor-ico img { margin-bottom: 0; }
.share-box .outer-wrap .left-wrap .left-big .big-inner .top.doctor .doctor-ico p.doctor-name { position: absolute; bottom: 9px; left: 0; text-align: center; padding: 0 5px; width: 130px; }
.share-box .outer-wrap .right-wrap { height: 80vh; flex: 1; text-align: center; }
.share-box .outer-wrap .right-wrap .top-big { background: #ed96be; padding: 15px; border-radius: 10px; margin-bottom: 15px; height: calc(50% - 15px); box-shadow: 5px 5px 5px rgba(37, 37, 37, 0.5); }
.share-box .outer-wrap .right-wrap .top-big .top-inner { background: #f9e5ee; padding: 15px; border-radius: 15px; height: 100%; display: flex; justify-content: center; align-items: center; }
.share-box .outer-wrap .right-wrap .top-big .top-inner .ico img { max-width: 40%; width: 100%; }
.share-box .outer-wrap .right-wrap .bottom-big { background: #fe9909; padding: 15px; border-radius: 10px; height: 50%; box-shadow: 5px 5px 5px rgba(37, 37, 37, 0.5); }
.share-box .outer-wrap .right-wrap .bottom-big .bottom-inner { background: #f9e1bf; padding: 15px; border-radius: 15px; height: 100%; display: flex; justify-content: center; align-items: center; }
.share-box .outer-wrap .right-wrap .bottom-big .bottom-inner .ico img { max-width: 45%; width: 100%; }
.share-box .time-wrap { display: flex; flex-direction: row; flex-wrap: wrap; justify-content: space-between; align-items: center; width: 60%; }
.share-box .time-wrap .each { padding: 10px 15px; }
.share-box .bottom-wrap { margin-top: 20px; display: flex; flex-wrap: wrap; justify-content: space-between; align-items: center; }
.share-box .bottom-wrap .left { display: flex; align-items: center; }
.share-box .bottom-wrap .left .btn-wrap { margin-right: 20px; filter: grayscale(100%); }
.share-box .bottom-wrap .left .btn-wrap:hover, .share-box .bottom-wrap .left .btn-wrap.active { filter: unset; }
.share-box .bottom-wrap .right .btn-wrap { margin-left: 20px; }
.share-box .bottom-wrap .right .btn-wrap i { font-size: 30px; }

/*----------------------------------
3. Patient Game
----------------------------------*/
section.patient-wrap { padding: 50px 0; }
section.patient-wrap .top-content { display: flex; flex-direction: row; align-items: center; justify-content: center; align-items: flex-start; border-bottom: 2px solid #0d2d68; padding-bottom: 10px; }
section.patient-wrap .top-content .patient-list { flex: 1; background: #d5e6f6; padding: 15px 10px; border-radius: 15px; margin-right: 15px; box-shadow: 5px 5px 5px rgba(37, 37, 37, 0.5); height: 80vh; }
section.patient-wrap .top-content .patient-list .title { text-align: center; border-bottom: 2px solid #0d2d68; }
section.patient-wrap .top-content .patient-list .title h3 { display: inline-block; }
section.patient-wrap .top-content .patient-list .scrollbox { height: calc(80vh - 65px); }
section.patient-wrap .top-content .patient-list .scrollbox .each { border-bottom: 1px solid #0d2d68; padding: 10px 0; }
section.patient-wrap .top-content .patient-list .scrollbox a.pprofile { padding: 5px; display: block; }
section.patient-wrap .top-content .patient-list .scrollbox a.pprofile.offline { filter: grayscale(100%); }
section.patient-wrap .top-content .patient-list .scrollbox a.pprofile .profile-wrap { display: flex; flex-direction: row; justify-content: flex-start; align-items: center; align-content: center; }
section.patient-wrap .top-content .patient-list .scrollbox a.pprofile .profile-wrap p { font-size: 14px; }
section.patient-wrap .top-content .patient-list .scrollbox a.pprofile .profile-wrap > img { width: 45px; padding-right: 5px; }
section.patient-wrap .top-content .patient-list .scrollbox a.pprofile .profile-wrap .content { width: 100%; }
section.patient-wrap .top-content .patient-list .scrollbox a.pprofile .profile-wrap .content .top { display: flex; justify-content: flex-start; align-items: center; }
section.patient-wrap .top-content .patient-list .scrollbox a.pprofile .profile-wrap .content .top p { padding-right: 5px; }
section.patient-wrap .top-content .patient-list .scrollbox a.pprofile .profile-wrap .content .top img { width: 22px; }
section.patient-wrap .top-content .patient-list .scrollbox a.pprofile .profile-wrap:hover { color: inherit; }
section.patient-wrap .top-content .patient-list .scrollbox a.pprofile .profile-wrap .plan { text-align: center; }
section.patient-wrap .top-content .patient-list .scrollbox a.pprofile .profile-wrap .plan p { font-size: 12px; }
section.patient-wrap .top-content .patient-list .scrollbox a.pprofile .profile-wrap .plan img { width: 35px; padding-left: 5px; }
section.patient-wrap .top-content .patient-list .scrollbox a.pprofile .profile-game-box { display: flex; margin: 0 -10px; }
section.patient-wrap .top-content .patient-list .scrollbox a.pprofile .profile-game-box .box { width: calc(100% * (1 / 2) - 10px); margin: 5px; height: 100px; display: flex; justify-content: center; align-items: center; position: relative; }
section.patient-wrap .top-content .patient-list .scrollbox a.pprofile .profile-game-box .box.blue-box { border-radius: 10px; border: 5px solid #5fa7f9; background: #d5e6f6; }
section.patient-wrap .top-content .patient-list .scrollbox a.pprofile .profile-game-box .box.orange-box { border-radius: 10px; border: 5px solid #fe9909; background: #f9e1bf; }
section.patient-wrap .top-content .patient-list .scrollbox a.pprofile .profile-game-box .box .phonecall { position: absolute; top: 0; right: 0; }
section.patient-wrap .top-content .patient-list .scrollbox a.pprofile .profile-game-box .box .phonecall img { width: 30px; border: 3px solid #5fa7f9; border-radius: 100%; box-shadow: 2px 2px 8px rgba(37, 37, 37, 0.5); filter: grayscale(100%); }
section.patient-wrap .top-content .share-box { flex: 5; }
section.patient-wrap .bottom-content { margin-top: 20px; }
section.patient-wrap .bottom-content .game-list { background: #d5e6f6; padding: 15px; border-radius: 15px; box-shadow: 5px 5px 5px rgba(37, 37, 37, 0.5); height: 250px; }
section.patient-wrap .bottom-content .game-list .title { text-align: center; border-bottom: 2px solid #0d2d68; margin-bottom: 10px; }
section.patient-wrap .bottom-content .game-list .title h3 { display: inline-block; }
section.patient-wrap .bottom-content .game-list .scrollbox.game-wrap { display: flex; flex-direction: row; flex-wrap: wrap; justify-content: center; align-items: center; height: 170px; }
section.patient-wrap .bottom-content .game-list .scrollbox.game-wrap .each { width: 80px; margin: 10px; }
section.patient-wrap .bottom-content .game-list .scrollbox.game-wrap .each img { width: 100%; }

/*----------------------------------
4. Top Bar
----------------------------------*/
section.top-bar { height: 50px; }
section.top-bar .outer-wrap { height: 50px; padding: 3px; display: flex; flex-direction: row; align-items: center; justify-content: center; position: relative; }
section.top-bar .outer-wrap .side-top { display: flex; position: absolute; left: 0; top: 50%; transform: translateY(-50%); }
section.top-bar .outer-wrap .middle-wrap { width: 100%; display: flex; }
section.top-bar .outer-wrap .middle-wrap .wrap { width: 50%; display: flex; align-items: center; justify-content: center; }
section.top-bar .outer-wrap .each { margin: 0 5px; }
section.top-bar .outer-wrap .each.btn-wrap { box-shadow: unset; }
section.top-bar .outer-wrap .each.btn-wrap .btn { border-radius: 8px; padding: 0 15px; }
section.top-bar .outer-wrap .each.btn-wrap.round-wrap .round-btn { width: 25px; height: 25px; padding: 2px; border-radius: 100%; }
section.top-bar .outer-wrap .each.active { filter: grayscale(100%); }
section.top-bar .outer-wrap .box { height: 100%; width: 100px; }
section.top-bar .outer-wrap .box.pink-box { border-radius: 10px; border: 5px solid #ed96be; background: #f9e5ee; display: flex; align-items: center; justify-content: center; }
section.top-bar .outer-wrap .box.orange-box { border-radius: 10px; border: 5px solid #fe9909; background: #f9e1bf; display: flex; align-items: center; justify-content: center; }

/*----------------------------------
5. Bottom Bar
----------------------------------*/
main.page-game-bottom { display: block; background: unset; }
main.page-game-bottom section.patient-wrap { padding: 10px 0 80px 0; height: 100vh; }
main.page-game-bottom section.patient-wrap .container-fluid { height: 100%; display: flex; flex-direction: column; justify-content: space-between; align-items: center; }
main.page-game-bottom section.patient-wrap .top-big { background: #ed96be; padding: 3px; border-radius: 5px; margin-bottom: 15px; box-shadow: 1px 1px 3px rgba(37, 37, 37, 0.5); width: 80px; margin: 0 auto; }
main.page-game-bottom section.patient-wrap .top-big .top-inner { background: #f9e5ee; padding: 3px; border-radius: 5px; height: 100%; display: flex; justify-content: center; align-items: center; }
main.page-game-bottom section.patient-wrap .top-big .top-inner .ico { text-align: center; }
main.page-game-bottom section.patient-wrap .top-big .top-inner .ico img { width: 25px; }
main.page-game-bottom section.patient-wrap .bottom-bar .middle-wrap { display: flex; align-items: center; justify-content: center; }
main.page-game-bottom section.patient-wrap .bottom-bar .wrap .call-img img { height: 30px; }
main.page-game-bottom section.patient-wrap .bottom-bar .wrap .rec-img img { height: 25px; }

/*----------------------------------
6. Game UI
----------------------------------*/
main.page-gameui { padding: 15px 0; }
main.page-gameui section.gameui .main-wrap { display: flex; }
main.page-gameui section.gameui .main-wrap .left { width:20%;max-width: 250px; }
main.page-gameui section.gameui .main-wrap .left .nurse-wrap { position: relative; /* padding: 20px; background: #f9e5ee; border: 10px solid #ed96be; border-radius: 10px;*/ display: flex; flex-direction: column; align-items: center; justify-content: center; }
main.page-gameui section.gameui .main-wrap .left .nurse-wrap img.nurse { width: 100%; }
main.page-gameui section.gameui .main-wrap .left .nurse-wrap img.mic-ico { position: absolute; right: 12px; bottom: 12px; width: 40px; }
main.page-gameui section.gameui .main-wrap .left .game-list { margin-top: 15px; padding: 0 10px; color: white; background-image: url(../img/gamelist-bg-middle.png); background-size: 100% auto; position: relative; margin:30px 0 50px;}
main.page-gameui section.gameui .main-wrap .left .game-list::before { content:""; background-image: url(../img/gamelist-bg-top.png); height: 18px; display: block; width: 100%; background-size: 100% auto; position: absolute; left:0; top:-18px;}
main.page-gameui section.gameui .main-wrap .left .game-list::after { content:""; background-image: url(../img/gamelist-bg-bottom.png); height: 18px; display: block; width: 100%; background-size: 100% auto; position: absolute; left:0; bottom:-18px; background-position: center bottom;}
main.page-gameui section.gameui .main-wrap .left .game-list .content-wrap > .title { text-align: center; text-decoration: underline; }
main.page-gameui section.gameui .main-wrap .left .game-list .content-wrap .game-level { margin-top: 15px; margin-bottom: 20px; }
main.page-gameui section.gameui .main-wrap .left .game-list .content-wrap .game-level .title { text-align: left; }
main.page-gameui section.gameui .main-wrap .left .game-list .content-wrap .game-level .title h3 { font-size: 20px; }
main.page-gameui section.gameui .main-wrap .left .game-list .content-wrap .game-level .level { display: flex; flex-wrap: wrap; justify-content: flex-start; align-items: flex-start; }
main.page-gameui section.gameui .main-wrap .left .game-list .content-wrap .game-level .level .each { width: calc(100% * (1/3)); padding: 3px 8px; text-align: center; }
main.page-gameui section.gameui .main-wrap .left .game-list .content-wrap .game-level .level .each img { width: 100%; border-radius: 5px; }
main.page-gameui section.gameui .main-wrap .left .game-list .content-wrap .game-level .level .each p { font-size: 12px; }
main.page-gameui section.gameui .main-wrap .right { flex: 2.5; padding: 20px; }
main.page-gameui section.gameui .main-wrap .right p{
  padding-bottom:0 ;
}
main.page-gameui section.gameui .main-wrap .right .content-wrap { display: flex; align-items: flex-start; flex-wrap: wrap; }
main.page-gameui section.gameui .main-wrap .right .content-wrap .patient-each { width: calc(100% * (1/3) - 10px); min-width:250px; color: white; margin: 5px; padding: 30px 15px; border:0 !important; position: relative;}
main.page-gameui section.gameui .main-wrap .right .content-wrap .patient-each.active::before{ content:''; display: block; position: absolute; background-image: url("../../assets/img/blue-frame.png"); background-size: 100% auto; width: calc(100% + 14px); height: 75px; left:-7px; top:0; background-repeat: no-repeat;}
main.page-gameui section.gameui .main-wrap .right .content-wrap .patient-each.active::after{ content:''; display: block; position: absolute; background-image: url("../../assets/img/blue-frame.png"); background-size: 100% auto; width: calc(100% + 14px); height: 75px; left:-7px; bottom:0; background-repeat: no-repeat; transform: rotate(180deg);}
main.page-gameui section.gameui .main-wrap .right .content-wrap .patient-each .top { position: relative; display: flex; align-items: flex-start; justify-content: space-between; margin-bottom: 10px; }
main.page-gameui section.gameui .main-wrap .right .content-wrap .patient-each .top .profile, main.page-gameui section.gameui .main-wrap .right .content-wrap .patient-each .top .profile-each { display: flex; align-items: start; flex-wrap: wrap;}
main.page-gameui section.gameui .main-wrap .right .content-wrap .patient-each .top .profile{border: 0 !important; flex-wrap: nowrap;}
main.page-gameui section.gameui .main-wrap .right .content-wrap .patient-each .top .profile img.profile-pic { width: 50px; }
main.page-gameui section.gameui .main-wrap .right .content-wrap .patient-each .top .profile .profile-name { display: flex; position: relative;margin-left: 5px; flex-wrap: wrap;}
main.page-gameui section.gameui .main-wrap .right .content-wrap .patient-each .top .profile .profile-name > *{ margin-right: 5px;}
main.page-gameui section.gameui .main-wrap .right .content-wrap .patient-each .top .profile .profile-name p { padding: 0 5px; }
main.page-gameui section.gameui .main-wrap .right .content-wrap .patient-each .top .profile .profile-name a.call-btn { display: block; position: absolute; top: -25px; right: 25px; }
main.page-gameui section.gameui .main-wrap .right .content-wrap .patient-each .top .profile .profile-name a.call-btn img.call { width: 20px; }
main.page-gameui section.gameui .main-wrap .right .content-wrap .patient-each .top .profile .mute-btn { padding: 0 5px; }
main.page-gameui section.gameui .main-wrap .right .content-wrap .patient-each .top .profile .mute-btn img.mute { width: 30px; }
main.page-gameui section.gameui .main-wrap .right .content-wrap .patient-each .top .profile-info { display: flex; align-items: center; }
main.page-gameui section.gameui .main-wrap .right .content-wrap .patient-each .top .profile-info .each { padding: 0 5px; text-align: center; }
main.page-gameui section.gameui .main-wrap .right .content-wrap .patient-each .top .profile-info .each img { width: 45px; }
main.page-gameui section.gameui .main-wrap .right .content-wrap .patient-each .top .profile-info .each p { font-size: 14px; }
main.page-gameui section.gameui .main-wrap .right .content-wrap .patient-each .middle { display: flex; align-items: center; justify-content: center; margin: -5px; }
main.page-gameui section.gameui .main-wrap .right .content-wrap .patient-each .middle .box { width: calc(100% * (1/2) - 10px); margin: 5px; padding: 10px; height: 150px; background: #f9e5ee; display: flex; flex-direction: column; align-items: center; justify-content: center; background-size: 100% 100%; background-repeat: no-repeat; border-radius: 15px;}
main.page-gameui section.gameui .main-wrap .right .content-wrap .patient-each .middle .box.blue { background-image: url("../../assets/img/box-blue.png");}
main.page-gameui section.gameui .main-wrap .right .content-wrap .patient-each .middle .box.orange { background-image: url("../../assets/img/box-orange.png"); }
main.page-gameui section.gameui .main-wrap .right .content-wrap .patient-each .middle .box.orange p { color: red; font-size:28pt; }
main.page-gameui section.gameui .main-wrap .right .content-wrap .patient-each .bottom { display: flex; align-items: flex-start; justify-content: space-between; }
main.page-gameui section.gameui .main-wrap .right .content-wrap .patient-each .bottom .treatment-btn .list { display: flex; align-items: center; justify-content: space-between; margin:5px; }
main.page-gameui section.gameui .main-wrap .right .content-wrap .patient-each .bottom .treatment-btn .list p, main.page-gameui section.gameui .main-wrap .right .content-wrap .patient-each .bottom .treatment-btn .list a.ui-btn { margin: 5px 3px; }
main.page-gameui section.gameui .main-wrap .right .content-wrap .patient-each .bottom .treatment-btn .list .ui-btn img { height: 40px; }
main.page-gameui section.gameui .main-wrap .right .content-wrap .patient-each .bottom .new-btn img{ width: 55px;}
main.page-gameui section.gameui .main-wrap .right .content-wrap .patient-each .bottom .treatment-btn .list.selection .ui-btn { filter: grayscale(100%); }
main.page-gameui section.gameui .main-wrap .right .content-wrap .patient-each .bottom .control-btn .control-hover-btn { display: block; }
main.page-gameui section.gameui .main-wrap .right .content-wrap .patient-each .bottom .control-btn .control-hover-btn img { height: 60px; }
main.page-gameui section.gameui .main-wrap .right .content-wrap .patient-each .bottom .end-call { padding-left: 10px; margin-top: 5px; }
main.page-gameui section.gameui .main-wrap .right .content-wrap .patient-each .bottom .end-call .end-call-btn img { height: 80px; }
main.page-gameui section.gameui .main-wrap .right .content-wrap .patient-each .hover-bot a.ui-btn { border: 2px solid transparent; text-align: center; color: white; text-decoration: none;}
main.page-gameui section.gameui .main-wrap .right .content-wrap .patient-each .hover-bot a.ui-btn:focus { border: 2px solid red; }
main.page-gameui section.gameui .main-wrap .right .content-wrap .patient-each .hover-bot .main-left { display: flex; align-items: center; justify-content: space-between; flex-wrap: wrap; width: 85px;}
main.page-gameui section.gameui .main-wrap .right .content-wrap .patient-each .hover-bot .main-left .col2x2{ flex-wrap: wrap;}
main.page-gameui section.gameui .main-wrap .right .content-wrap .patient-each .hover-bot .main-left .movement-control { position: relative; width: 80px; height: 80px; margin-right: 5px; display: flex; align-items: center; justify-content: center; }
main.page-gameui section.gameui .main-wrap .right .content-wrap .patient-each .hover-bot .main-left .movement-control img.each-main { width: 30px; }
main.page-gameui section.gameui .main-wrap .right .content-wrap .patient-each .hover-bot .main-left .movement-control a.ui-btn { position: absolute; }
main.page-gameui section.gameui .main-wrap .right .content-wrap .patient-each .hover-bot .main-left .movement-control a.ui-btn.a-1 { top: -2px; }
main.page-gameui section.gameui .main-wrap .right .content-wrap .patient-each .hover-bot .main-left .movement-control a.ui-btn.a-1 img { width: 15px; height: unset; }
main.page-gameui section.gameui .main-wrap .right .content-wrap .patient-each .hover-bot .main-left .movement-control a.ui-btn.a-2 { top: 7px; right: 10px; }
main.page-gameui section.gameui .main-wrap .right .content-wrap .patient-each .hover-bot .main-left .movement-control a.ui-btn.a-2 img { width: 20px; height: unset; }
main.page-gameui section.gameui .main-wrap .right .content-wrap .patient-each .hover-bot .main-left .movement-control a.ui-btn.a-3 { right: 0; }
main.page-gameui section.gameui .main-wrap .right .content-wrap .patient-each .hover-bot .main-left .movement-control a.ui-btn.a-4 { bottom: 7px; right: 10px; }
main.page-gameui section.gameui .main-wrap .right .content-wrap .patient-each .hover-bot .main-left .movement-control a.ui-btn.a-4 img { width: 20px; height: unset; }
main.page-gameui section.gameui .main-wrap .right .content-wrap .patient-each .hover-bot .main-left .movement-control a.ui-btn.a-5 { bottom: 0; }
main.page-gameui section.gameui .main-wrap .right .content-wrap .patient-each .hover-bot .main-left .movement-control a.ui-btn.a-5 img { width: 15px; height: unset; }
main.page-gameui section.gameui .main-wrap .right .content-wrap .patient-each .hover-bot .main-left .movement-control a.ui-btn.a-6 { bottom: 7px; left: 10px; }
main.page-gameui section.gameui .main-wrap .right .content-wrap .patient-each .hover-bot .main-left .movement-control a.ui-btn.a-6 img { width: 20px; height: unset; }
main.page-gameui section.gameui .main-wrap .right .content-wrap .patient-each .hover-bot .main-left .movement-control a.ui-btn.a-7 { left: 0; }
main.page-gameui section.gameui .main-wrap .right .content-wrap .patient-each .hover-bot .main-left .movement-control a.ui-btn.a-8 { top: 7px; left: 10px; }
main.page-gameui section.gameui .main-wrap .right .content-wrap .patient-each .hover-bot .main-left .movement-control a.ui-btn.a-8 img { width: 20px; height: unset; }
main.page-gameui section.gameui .main-wrap .right .content-wrap .patient-each .hover-bot .main-left .movement-control a.ui-btn img { height: 15px; }
main.page-gameui section.gameui .main-wrap .right .content-wrap .patient-each .hover-bot .main-left .reset { margin: 8px; }
main.page-gameui section.gameui .main-wrap .right .content-wrap .patient-each .hover-bot .main-right .slidecontainer.slide-left { width: 100%; display: flex; flex-direction: column; align-items: center; margin-right: 15px;}
main.page-gameui section.gameui .main-wrap .right .content-wrap .patient-each .hover-bot .main-right .slidecontainer.slide-left .slider { -webkit-appearance: none; width: 100%; height: 20px; background-image: url(../../assets/img/btns/dashboard/scrollbar-h.png); background-repeat: repeat-x; background-position: left center; background-size: 22px 100%; outline: none; -webkit-transition: .2s; transition: opacity .2s; background-color: transparent;}
main.page-gameui section.gameui .main-wrap .right .content-wrap .patient-each .hover-bot .main-right .slidecontainer.slide-left .slider:hover { opacity: 1; }
main.page-gameui section.gameui .main-wrap .right .content-wrap .patient-each .hover-bot .main-right .slidecontainer.slide-left .slider::-webkit-slider-thumb { -webkit-appearance: none; appearance: none; width: 30px; height: 30px; border: 0; background: url("../../assets/img/btns/dashboard/32.png"); background-size: 30px; cursor: pointer; }
main.page-gameui section.gameui .main-wrap .right .content-wrap .patient-each .hover-bot .main-right .slidecontainer.slide-left .slider::-moz-range-thumb { width: 30px; height: 30px; border: 0; background: url("../../assets/img/btns/dashboard/32.png"); background-size: 30px; cursor: pointer; }
main.page-gameui section.gameui .main-wrap .right .content-wrap .patient-each .hover-bot .main-right .slidecontainer.slide-right { width: 100%; display: flex; flex-direction: column; align-items: center;}
main.page-gameui section.gameui .main-wrap .right .content-wrap .patient-each .hover-bot .main-right .slidecontainer.slide-right .slider { -webkit-appearance: none; width: 100%; height: 20px; background-image: url(../../assets/img/btns/dashboard/scrollbar-h.png); background-repeat: repeat-x; background-position: left center; background-size: 22px 100%; outline: none; -webkit-transition: .2s; transition: opacity .2s; background-color: transparent;}
main.page-gameui section.gameui .main-wrap .right .content-wrap .patient-each .hover-bot .main-right .slidecontainer.slide-right .slider:hover { opacity: 1; }
main.page-gameui section.gameui .main-wrap .right .content-wrap .patient-each .hover-bot .main-right .slidecontainer.slide-right .slider::-webkit-slider-thumb { -webkit-appearance: none; appearance: none; width: 30px; height: 30px; border: 0; background: url("../../assets/img/btns/dashboard/33.png"); background-size: 30px; cursor: pointer; }
main.page-gameui section.gameui .main-wrap .right .content-wrap .patient-each .hover-bot .main-right .slidecontainer.slide-right .slider::-moz-range-thumb { width: 30px; height: 30px; border: 0; background: url("../../assets/img/btns/dashboard/33.png"); background-size: 30px; cursor: pointer; }
main.page-gameui section.gameui .main-wrap .right .content-wrap .patient-each .hover-bot .main-right .slidecontainer.slide-inner { width: 100%; margin-left: 30px; }
main.page-gameui section.gameui .main-wrap .right .content-wrap .patient-each .hover-bot .main-right .slidecontainer.slide-inner .slider { -webkit-appearance: none; width: 100%; height: 20px; background-image: url(../../assets/img/btns/dashboard/scrollbar-h.png); background-repeat: repeat-x; background-position: left center; background-size: 22px 100%; outline: none; -webkit-transition: .2s; transition: opacity .2s; background-color: transparent;}
main.page-gameui section.gameui .main-wrap .right .content-wrap .patient-each .hover-bot .main-right .slidecontainer.slide-inner .slider:hover { opacity: 1; }
main.page-gameui section.gameui .main-wrap .right .content-wrap .patient-each .hover-bot .main-right .slidecontainer.slide-inner .slider::-webkit-slider-thumb { -webkit-appearance: none; appearance: none; width: 30px; height: 30px; border: 0; background: url("../../assets/img/btns/09.png"); background-size: 30px; cursor: pointer; }
main.page-gameui section.gameui .main-wrap .right .content-wrap .patient-each .hover-bot .main-right .slidecontainer.slide-inner .slider::-moz-range-thumb { width: 30px; height: 30px; border: 0; background: url("../../assets/img/btns/09.png"); background-size: 30px; cursor: pointer; }
main.page-gameui section.gameui .main-wrap .right .content-wrap .patient-each .hover-bot .main-right .slidecontainer.slide-outer { width: 100%; }
main.page-gameui section.gameui .main-wrap .right .content-wrap .patient-each .hover-bot .main-right .slidecontainer.slide-outer .slider { -webkit-appearance: none; width: 100%; height: 20px; background-image: url(../../assets/img/btns/dashboard/scrollbar-h.png); background-repeat: repeat-x; background-position: left center; background-size: 22px 100%; outline: none; -webkit-transition: .2s; transition: opacity .2s; background-color: transparent;}
main.page-gameui section.gameui .main-wrap .right .content-wrap .patient-each .hover-bot .main-right .slidecontainer.slide-outer .slider:hover { opacity: 1; }
main.page-gameui section.gameui .main-wrap .right .content-wrap .patient-each .hover-bot .main-right .slidecontainer.slide-outer .slider::-webkit-slider-thumb { -webkit-appearance: none; appearance: none; width: 30px; height: 30px; border: 0; background: url("../../assets/img/btns/010.png"); background-size: 30px; cursor: pointer; }
main.page-gameui section.gameui .main-wrap .right .content-wrap .patient-each .hover-bot .main-right .slidecontainer.slide-outer .slider::-moz-range-thumb { width: 30px; height: 30px; border: 0; background: url("../../assets/img/btns/010.png"); background-size: 30px; cursor: pointer; }
main.page-gameui section.gameui .main-wrap .right .content-wrap .patient-each .hover-bot .wrap { display: flex; align-items: flex-start; justify-content: space-between; }
main.page-gameui section.gameui .main-wrap .right .content-wrap .patient-each .hover-bot .wrap .list { display: flex; align-items: flex-end; justify-content: space-between; text-align: center;}
main.page-gameui section.gameui .main-wrap .right .content-wrap .patient-each .hover-bot .wrap .list p, main.page-gameui section.gameui .main-wrap .right .content-wrap .patient-each .hover-bot .wrap .list a.ui-btn { margin: 5px 3px; }
main.page-gameui section.gameui .main-wrap .right .content-wrap .patient-each .hover-bot .wrap .list .ui-btn img { height: 30px; }
main.page-gameui section.gameui .main-wrap .right .content-wrap .patient-each:hover { cursor: pointer; }

@media only screen and (max-device-width: 1000px) {
  main.page-gameui section.gameui .main-wrap .right .content-wrap .patient-each {
    width:calc(100% * (1/2) - 10px);
  }
}

/* ----------- iPhone 5, 5S, 5C and 5SE ----------- */
/* Landscape */
@media only screen and (min-device-width: 320px) and (max-device-width: 568px) and (-webkit-min-device-pixel-ratio: 2) and (orientation: landscape) { section.main-box { padding: 50px 20px; }
  .share-box .outer-wrap .left-wrap .left-big .big-inner { flex-direction: row; }
  .share-box .outer-wrap .left-wrap .left-big .big-inner .top { padding-right: 20px; } }
/* ----------- iPhone 6, 6S, 7 and 8 ----------- */
/* Landscape */
@media only screen and (min-device-width: 375px) and (max-device-width: 667px) and (-webkit-min-device-pixel-ratio: 2) and (orientation: landscape) { section.main-box { padding: 50px 20px; }
  .share-box .outer-wrap .big-inner { flex-direction: row !important; align-items: center; }
  .share-box .outer-wrap .big-inner .top { padding-right: 20px; } }
/* ----------- iPhone 6+, 7+ and 8+ ----------- */
/* Landscape */
@media only screen and (min-device-width: 414px) and (max-device-width: 736px) and (-webkit-min-device-pixel-ratio: 3) and (orientation: landscape) { section.main-box { padding: 50px 20px; }
  .share-box .outer-wrap .big-inner { flex-direction: row !important; align-items: center; }
  .share-box .outer-wrap .big-inner .top { padding-right: 20px; } }
/* ----------- iPhone X ----------- */
/* Landscape */
@media only screen and (min-device-width: 375px) and (max-device-width: 812px) and (-webkit-min-device-pixel-ratio: 3) and (orientation: landscape) { section.main-box { padding: 50px 20px; }
  .share-box .outer-wrap .big-inner { flex-direction: row !important; align-items: center; }
  .share-box .outer-wrap .big-inner .top { padding-right: 20px; } }