@charset "UTF-8";

*,
*:before,
*:after {
    box-sizing: border-box;
}



/*html {
    margin: 0;
    padding: 0;
    height: 100%;
    font-family: Arial Unicode, Arial, sans-serif, 微軟正黑體, Microsoft Yahei, 微软雅黑;
    line-height: 140%;
    box-sizing: border-box;
    color: #666;
}

html,
body {
    margin:0;
    padding:0;
    width: 100%;
    height: 100%;
    line-height: 140%;
}*/

#topdiv {
    padding: 5px;
}

#topdiv-main {
    min-height: 100vh;
}

textarea {
    border: solid 1px #ccc;
    font-family: Arial Unicode, Arial, sans-serif, 微軟正黑體, Microsoft Yahei, 微软雅黑;
    font-size: 1em;
}

/*table thead{font-weight: bold;background-color:#e4e4e4;font-size:1em;}

#tbl-hide-adm thead{font-weight: bold;background-color:#e4e4e4;font-size:1em;}*/

a:hover,
a:link,
a:visited,
a:active {
    color: inherit;
    text-decoration: none;
}

#container1 {
    width: 1100px;
    height: 100%;
    margin: auto;
    border-left: solid 1px #333;
    border-right: solid 1px #333;
}

.c1-hide {
    display: none;
}

.c1-show-block,
.c1-show {
    display: block !important
}

.c1-show-inline-block {
    display: inline-block !important
}

.hide-large {
    display: none !important
}

.clear {
    clear: both;
    display: block;
    height: 0px;
    overflow: hidden;
    margin: 0;
    padding: 0;
}

.clear20 {
    clear: both;
    display: block;
    height: 20px;
    overflow: hidden;
    margin: 0;
    padding: 0;
}

.clear25px {
    clear: both;
    display: block;
    height: 25px;
    overflow: hidden;
    margin: 0;
    padding: 0;
}

.clear30px {
    clear: both;
    display: block;
    height: 30px;
    overflow: hidden;
    margin: 0;
    padding: 0;
}

.clearline {
    clear: both;
    display: block;
    height: 1px;
    overflow: hidden;
    margin: 0;
    padding: 0;
    border-bottom: solid 1px #e4e4e4;
}

.gnd_partner {
    background-color: #2fa9a5;
}

.m-toolname {
    clear: both;
    display: block;
    border-bottom: solid 1px #333;
    padding-bottom: 2px;
    margin-bottom: 10px;
}

.white-txt {
    color: #fff;
}

.red-text {
    color: #a41d4a;
}

.tbl-cell {
    border: solid 1px #ccc;
    font-size: 0.85em;
    vertical-align: top;
}

.tbl-cell-f {
    border: solid 1px #ccc;
    font-size: 1em;
    vertical-align: top;
}

#container {
    height: 100% !important;
    width: 100%;
}

.h-main-content {
    height: 100% !important;
    width: 100%;
    padding: 10px;
    /*min-height: 500px;*/
    margin: auto;
    top: 0px;
    bottom: 0px;
}

.c1-main-content {
    /*display: block;
    padding: 10px;
    height: 100vh;
    top: 0;
    bottom: 0;*/
    min-height: 100%;
    position: relative;
    padding-bottom: 10px;
}

.content-home {
    min-height: 80%;
    width: 75%;
    margin: auto;
    padding-top: 50px;
    padding-bottom: 90px;
}

.content-home-cms {
    min-height: 80%;
    width: 95%;
    margin: auto;
    padding-top: 20px;
    padding-bottom: 20px;
}

.c1-main-content-inner {
    max-width: 900px;
    margin: auto;
    padding: 20px 0px;
    background-color: #fff;
}

.c1-main-content-career {
    max-width: 1100px;
    margin: auto;
}

#cmenu {
    width: 100%;
    height: auto;
    background-color: #a6854a;
    color: #fff;
    font-size: 0.9em;
}

#menu #cmenu a {
    color: #fff;
    font-size: 0.85em;
}

.home-white {
    height: 100%;
    margin: 0;
    padding: 0;
    background-color: #fff;
}

.home-grey {
    height: 100%;
    margin: 0;
    padding: 0;
    background-color: #e6e7e8;
}

.home-back {
    height: 100%;
    margin: 0;
    padding: 0;
    background: #cccccc;
    background-image: url(../images/home_bk.jpg);
    background-repeat: repeat-x;
}

#c1-main-home {
    width: auto;
    margin: auto;
    text-align: center;
    padding-top: 75px;
}

/*#c1-main-home{width:100%;margin:auto;padding-top:75px;}*/

.btn-red:hover {
    background-color: #36a9e0;
    cursor: pointer;
}

.log-text {
    box-shadow: 0 5px 5px 0 rgba(0, 0, 0, 0.5);
    line-height: 110%;
    word-break: normal;
}

.log-text-d {
    box-shadow: 0 5px 5px 0 rgba(0, 0, 0, 0.5);
    width: 135px;
    height: 149px;
    overflow: hidden;
}

.c1-footer {
    font-size: 0.8em;
}

#footer-div {
    width: 100%;
    font-size: 0.8em;
    padding-top: 10px;

}

.footer {
    /*width: 100%;
    font-size: 0.7em;
    bottom: 0px;
    position: absolute;*/

    width: 100%;
    /*font-size: 0.7em;*/
    min-height: 10px;
    margin: 0px;
    vertical-align: middle;
    position: absolute;
    left: 0px;
    right: 0px;
    bottom: 0px;
}

.footer-menu {
    text-align: center;
    padding: 10px 0px;
    background-color: #e9e7e7;
    border-top: solid 1px #999;
}

#footer1 {
    width: 100%;
    font-size: 0.7em;
    /*padding-top: 100px;*/
}

#footer-innerbox {
    width: 800px;
    margin: auto;
    padding: 10px 0px 20px 0px;
}

#footer-cells {
    float: left;
    width: 12.4999%;
    /*width:16.6666%;*/
    text-align: center;
    padding: 0px 0px 10px 0px;
}

#footer-box {
    width: 100%;
    margin: auto;
    padding: 5px 10px;
    /*text-align: right;*/
}

#footer-shortcuts {
    width: 70%;
    margin: auto;
}

#footer-blk {
    background-color: #fff;
    display: block;
}

.main-btn-holder {
    /*width: 70%;
    margin: auto;
    padding-top: 50px;*/
    margin: 0;
}

.main-btn-holder-top {
    width: 842px;
    margin: auto;
    overflow: hidden;
}

.main-btn-Ban {
    width: 90%;
    min-height: 450px;
    overflow: auto;
}

.main-btn-s {
    width: 19.9999%;
    float: left;
    padding: 20px 0px;
}

.main-btn-unl1 {
    /*width:14.28%;*/
    width: 16.66%;
    float: left;
    padding: 20px 0px;
}

.main-btn-unl-img {
    width: 140px;
    text-align: center;
}

.main-btn {
    width: 33.3333%;
    float: left;
    padding: 20px 0px;
}

.main-btn-h {
    width: 49.9999%;
    float: left;
    padding: 20px 0px;
}

.main-btn-f {
    width: 99.9999%;
    float: left;
    padding: 20px 0px;
}

#main-bImg {
    width: 180px;
    height: 180px;
    margin: auto;
    border-radius: 20%;
    overflow: hidden;
    position: relative;
}

#main-bImg-note {
    position: absolute;
    width: 180px;
    text-align: right;
    padding: 20px;
    z-index: 100;
    color: #fff;
    font-size: 2em;
}

#main-bImg-small {
    width: 120px;
    height: 120px;
    margin: auto;
    border-radius: 20%;
    overflow: hidden;
    display: table;
}

#main-bImg-small p {
    display: table-cell;
    vertical-align: middle;
    padding: 10px;
    color: #fff;
    background-repeat: no-repeat;
    text-align: center;
    /*margin:50px;padding:15px 10px 0px 10px;*/
    font-size: 1em;
    line-height: 110%;
}

#main-bImg p {
    color: #fff;
    background-repeat: none;
    text-align: center;
    width: 70%;
    margin: auto 12.5% auto 12.5%;
    top: 120px;
    position: absolute;
    line-height: 100%;
}

.main-bImg-t {
    font-size: 1.1em;
    display: flex;
    justify-content: center;
    align-items: center;
    color: #fff;
    background-repeat: none;
    text-align: center;
    width: 70%;
    height: 30%;
    margin: auto 12.5% auto 12.5%;
    top: 65%;
    position: absolute;
    line-height: 110%;
}


#main-bImg-100 {
    width: 120px;
    height: 120px;
    margin: auto;
    border-radius: 20%;
    overflow: hidden;
    display: table;
}

#main-bImg-100 p {
    display: table-cell;
    vertical-align: middle;
    padding: 10px;
    color: #fff;
    background-repeat: none;
    text-align: center;
    font-size: 1em;
}

#main-bImg-unl {
    width: 100px;
    height: 100px;
    margin: auto;
    border-radius: 20%;
    overflow: hidden;
    display: table;
}

#main-bImg-unl p {
    padding: 0 15%;
    width: 100%;
    height: 100%;
    margin: auto;
    color: #fff;
    text-align: center;
    font-size: 1em;
    vertical-align: middle;
    display: table-cell;
    line-height: 100%;
}

#v-align {
    display: table-cell;
    padding: 0 15%;
    width: 100%;
    height: 100%;
    margin: auto;
    color: #fff;
    text-align: center;
    vertical-align: middle;
    font-size: 1em;
}

#main-bImg-narr {
    /*width:145px;*/
    width: 180px;
    height: 180px;
    margin: auto;
    border-radius: 16%;
    overflow: hidden;
    background-image: url(../images/handbook_generic.png);
    background-repeat: no-repeat;
    background-position: center 35px;
    position: relative;
}

#main-bImg-narr p {
    color: #fff;
    background-repeat: none;
    text-align: center;
    width: 70%;
    margin: auto 12.5% auto 12.5%;
    top: 120px;
    position: absolute;
    line-height: 100%;
}

.part_label {
    margin: auto;
    text-align: center;
    width: 75%;
    margin: auto 12.5% auto 12.5%;
    font-size: 0.8em;
    top: 8px;
    position: absolute;
    color: #fff;
    z-index: 10;
}

#main-bImg img #main-bImg-narr {
    max-width: 100%;
    max-height: 100%;
}

/*#main-bImg-note{position:absolute;width:100%;text-align:right;padding:10%;z-index:100;color:#fff;font-size:1.5em;border:solid 1px #333;}*/

#hb_banner {
    height: 380px;
    width: 100%;
    background-color: #000;
}

#thisVideo {
    width: 100%;
    height: inherit;
}

/*#tmenu{position:absolute;left:32px;top:32px;width:auto;padding:0px 10px;background:#a41d4a;z-index:800;opacity: 0.75;filter: alpha(opacity=75);}*/

.tmenu-inner {
    font-size: 1em;
    color: #fff;
    width: 100%;
    min-width: 160px;
}

#tmenu ul,
.tmenu-inner ul {
    padding: 0px;
    list-style-type: none;
    line-height: 100%;
    text-align: left;
}

#tmenu li {
    padding: 0px 0px;
}

#tmenu a {
    color: #fff;
    font-size: 1em;
    text-decoration: none;
}

.txt-b1 {
    font-size: 1.65em;
}

.txt-b2 {
    font-size: 1.3em;
    line-height: 100%;
}

.txt-b3 {
    font-size: 1.1em;
    line-height: 110%;
}

.small-txt {
    font-size: 0.85em;
    line-height: 110%;
}

.f-left {
    float: left;
}

.f-right {
    float: right;
}

.c1-f-left {
    float: left;
}

.c1-f-right {
    float: right;
}


.round-btn,
.square-btn {
    color: white;
    border-radius: 15px;
    padding: 3px 8px;
    text-align: center;
    font-size: 0.75em;
    margin-right: 2px;
    border: 0px;
    cursor: pointer;
    margin: 2px;
}

.square-btn {
    border-radius: 0px;
}

.team-img {
    float: left;
    width: 180px;
    text-align: center;
    line-height: 200%;
}

/*.round-btn{width:29%;color:white;border-radius:15px;padding:0px;text-align:center;font-size:0.75em;margin-right:2px;display:block;}*/

.colGold {
    background-color: #a6854a;
}

.colRed {
    background-color: #a41d4a;
}

.colBlu {
    background-color: #006699;
}

.colPurple {
    background-color: #6556a4;
}

.colTeal {
    background-color: #00a580;
}

.colSilver {
    background-color: #97aeb9;
}

.colGrey {
    background-color: #666;
}

.cell_1 {
    background-color: #b1b3b6;
    padding: 0px 7px;
}

.cell_2 {
    background-color: #c7c8ca;
    padding: 0px 7px;
}

#tbl-hide {
    display: none;
}

#tbl_hb {
    font-size: 0.8em;
}

#tbl_hb td {
    height: 35px;
    vertical-align: middle;
}

#vdoLayer {
    min-height: 540px;
    width: 860px;
    margin: auto;
    margin-top: 140px;
    padding: 10px;
    border: solid 1px #333;
    background-color: rgba(255, 255, 255, 1);
    box-shadow: 0 5px 5px 0 rgba(0, 0, 0, 0.5);
    color: #a41d4a;
}

#vdoLayer a,
#vdoLayer a:hover {
    color: #666;
}

#vdoLayer .nLink {
    color: #a41d4a;
    font-size: inherit;
    line-height: 100%
}

#vdo-menu {
    height: 70px;
    background-color: #fff;
}

.vWallImg {
    width: 275px;
    height: 275px;
}

.vdoWall {
    width: 275px;
    height: 275px;
    background-color: #000;
    position: relative;
    z-index: 10;
    float: left;
    top: 0;
}

.v1 {
    opacity: 0.6;
}

.v2 {
    opacity: 0.8;
}

#abm_cont {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-color: rgba(0, 0, 0, 0.8);
    z-index: 100;
    display: none;
    cursor: pointer;
}

#abm_slide {
    width: 800px;
    margin: auto;
    margin-top: 100px;
    background-color: rgba(0, 0, 0, 1);
    display: block;
    position: relative;
    border: solid 1px #333;
}

c1-hide-large,
.c1-hide-medium {
    display: none !important
}

.c1-sidebar.c1-collapse {
    display: block !important
}

.calendar-cell {
    height: 130px;
    width: 100px;
}

.calendar-img-holder {
    position: absolute;
    width: 100%;
    text-align: center;
    top: -15px;
}

/*.calendar-txt{color:#a41d4a;font-size:0.7em;display:block;}*/
.calendar-train1 {
    color: #fff;
    font-size: 1.2em;
    display: block;
}

.calendar-train2 {
    color: #fff;
    font-size: 0.9em;
    display: block;
}

.calendar-day-tbl {
    width: 800px;
}

.calendar-day-tbl2 {
    border-left: solid 1px #a41d4a;
    border-right: solid 1px #a41d4a;
    border-top: solid 1px #a41d4a;
    width: 299px;
}

.calendar-cell-N {
    height: 80px;
    width: 8.3%;
    background-size: 75% auto;
}

input[type="text"]:disabled {
    border: 0px;
    background-color: #fff;
}

input[type="submit"]:disabled,
input[type="reset"]:disabled,
input[type="button"]:disabled {
    opacity: 1;
    background-color: #000;
    text-decoration: line-through;
    cursor: default;
}

input[type='file'] {
    font-size: 0;
    /* Hides the text */
}

input[type='file']::file-selector-button {
    color: white;
    border-radius: 15px;
    padding: 3px 8px;
    text-align: center;
    font-size: 12px;
    margin-right: 2px;
    border: 0px;
    cursor: pointer;
    margin: 2px;
    background-color: #36a9e0;
}

input[type='file']:disabled::file-selector-button {
    opacity: 1;
    background-color: #000;
    text-decoration: line-through;
    cursor: default;
}

#c_search {
    text-align: center;
    height: 24px;
    width: 180px;
    border-radius: 10px;
    background-color: #fff;
    padding: 0px 5px;
    color: #666;
}

#c_search input {
    height: 20px;
    font-size: 0.8em;
    border: none;
}


/* */
.overlay {
    /* Height & width depends on how you want to reveal the overlay (see JS below) */
    height: 100%;
    width: 0;
    position: fixed;
    /* Stay in place */
    z-index: 600;
    /* Sit on top */
    left: 0;
    top: 0;
    background-color: rgb(0, 0, 0);
    /* Black fallback color */
    background-color: rgba(255, 255, 255, 0.1);
    /* Black w/opacity */
    overflow-x: hidden;
    /* Disable horizontal scroll */
    transition: 0s;
    /* 0.5 second transition effect to slide in or slide down the overlay (height or width, depending on reveal) */
    cursor: default;
}

/* Position the content inside the overlay */
.overlay-content {
    position: relative;
    /*top: 25%; /* 25% from the top */
    /*width: 100%; /* 100% width */
    /*text-align: center; /* Centered text/links */
    margin-top: 30px;
    /* 30px top margin to avoid conflict with the close button on smaller screens */
    top: 10%;
    margin: auto;
    background-color: #fff;
    border: solid 1px #ccc;

}

/* The navigation links inside the overlay */
.overlay a {
    padding: 8px;
    text-decoration: none;
    font-size: 36px;
    color: #818181;
    display: block;
    /* Display block instead of inline */
    transition: 0.3s;
    /* Transition effects on hover (color) */
}

/* When you mouse over the navigation links, change their color */
.overlay a:hover,
.overlay a:focus {
    color: #f1f1f1;
}

/* Position the close button (top right corner) */
.overlay .closebtn {
    position: absolute;
    top: 20px;
    right: 45px;
    font-size: 60px;
}

#ialbm {
    width: 1200px;
    height: 700px;
    overflow: auto;
}

table {
    border-collapse: collapse;
    border-spacing: 0px;
}

#timeTable thead td {
    background-color: none;
    height: 20px;
    border: none;
    font-size: 0.8em;
    color: #a41d4a;
}

#timeTable td {
    /*border: solid 1px #a41d4a;*/
    width: 14.2%;
    height: 110px;
}

.tbl_time_msg {
    border-top: solid 1px #a41d4a;
    border-left: solid 1px #a41d4a;
}

.no-border {
    border: none;
}

.border1pc {
    border: solid 1px #ccc;
}

.border1p3 {
    border: solid 1px #333;
}

.ys-border {
    border: solid 1px #a41d4a;
}

.ys-curDay {
    /*background-color:#ccc;*/
    background-color: #e6bbca;
}

.ys-curDayS {
    background-color: #ccc;
}

#tbl_cal_txt {
    padding: 1px 10px;
    line-height: 100%;
    font-size: 0.55em;
    color: #a41d4a;
    height: 80px;
    overflow: auto;
}

#tbl_cal_txt ul {
    padding-top: 0px;
    padding-left: 5px;
}

.tbl_time_day,
.tbl-time-day {
    height: 26px;
    width: 26px;
    background-color: #a41d4a;
    text-align: center;
    font-size: 0.7em;
    color: white;
}

.tbl_time_detail {
    /*border-top:solid 1px #a41d4a;border-left:solid 1px #a41d4a;*/
    line-height: 110%;
}

#tbl_time_select {
    color: #a41d4a;
}

#timeTableDetal {
    line-height: 110%;
    table-layout: fixed;
}

#timeTableDetal h1 {
    font-size: 1.7em;
    text-decoration: underline;
    font-weight: normal;
    margin-bottom: 7px;
}

/*#timeTableDetal td{width:auto;}*/


.currentMemberTrainTd {
    /*height:75px;*/
    padding: 5px;
    background-color: #fff;
    font-size: 0.9em;
}

.currentMemberTrainTime {
    padding-right: 5px;
    height: 20px;
    background-color: #fff;
    font-size: 0.9em;
    text-align: right;
}

.col-container {
    display: table;
    width: 100%;
}

.col {
    display: table-cell;
    vertical-align: top;
    padding-bottom: 50px;
    box-sizing: content-box;
}

.width33 {
    width: 33.33%;
}

.h-qlink {
    float: left;
    width: 24.99%;
}

.lrborder {
    border-left: solid 1px #999;
    border-right: solid 1px #999;
}

.c1-smallmenu {
    list-style-type: none;
}

.c1-bar-block .c1-bar-item {
    width: 100%;
    display: block;
    padding: 8px 16px;
    text-align: left;
    border: none;
    outline: none;
    white-space: normal
}

.c1-bar-block.c1-center .c1-bar-item {
    text-align: center
}

.c1-block {
    display: block;
    width: 100%
}

.c1-white,
.c1-hover-white:hover {
    color: #000 !important;
    background-color: #fff !important
}

.c1-button {
    border: none;
    display: inline-block;
    outline: 0;
    padding: 8px 2px;
    vertical-align: middle;
    overflow: hidden;
    text-decoration: none;
    color: #000;
    background-color: #fff;
    text-align: center;
    cursor: pointer;
    white-space: nowrap
}

.backImg {
    background-image: url(../images/aia.jpg);
    background-repeat: no-repeat;
    background-size: 100% 100%;
}

.fitImg {
    height: 100%;
    width: 100%;
    object-fit: contain
}

#backlinkDiv {
    width: 1000px;
    margin: auto;
    font-size: 0.85em;
}

#cal_img {
    width: 85px;
    height: 95px;
    text-align: center;
    overflow: hidden;
}

#arrLeft {
    float: left;
    padding-top: 65px;
}

#arrRight {
    float: right;
    padding-top: 65px;
}

.arrR,
.arrL {
    height: 100%;
}

.l3-text {
    font-size: 0.9em;
}

.v-sep {
    float: left;
    width: 20px;
    text-align: center;
}

.v-box {
    float: left;
    padding: 0px 10px;
}

.v-td {
    height: 65px;
}

.v-cont {
    height: auto;
    width: 1101px;
}

.topBtnContStyle {
    padding: 40px 0px;
}

.topBtnHolderStyle {
    min-width: 300%;
    overflow: show;
}

#cust-search {
    margin: auto;
    width: 85%;
    padding: 10px;
}

.cust-search-box {
    background-color: #fff;
    height: 30px;
    width: 100%;
    color: #666;
    text-align: center;
    border: none;
}

.cust-button {
    border: none;
    display: inline-block;
    outline: 0;
    padding: 5px 10px;
    height: 30px;
    vertical-align: middle;
    font-size: 0.9em;
    overflow: hidden;
    text-decoration: none;
    color: #666;
    background-color: #d6d6d6;
    text-align: center;
    cursor: pointer;
    white-space: nowrap
}

#abm_cust_search {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-color: rgba(225, 225, 225, 0.2);
    z-index: 100;
    display: none;
}

#abm_cust_slide {
    width: 800px;
    min-height: 450px;
    border-radius: 10px;
    margin: auto;
    margin-top: 80px;
    display: block;
    position: relative;
    border: solid 1px #ccc;
    background-color: #fff;
    box-shadow: 0 5px 5px 0 rgba(0, 0, 0, 0.5);
}

.cust-search-tbl {
    border-collapse: separate;
    border-spacing: 30px;
}

.cust-search-tbl-b {
    border-collapse: separate;
    border-spacing: 20px;
}

.cust-search-tbl-c {
    border-collapse: separate;
    border-spacing: 10px;
}

.cust-search-tbl-cell {
    width: 33.33%;
    height: 30px;
}

.c-activity-blk {
    height: auto;
    width: 33.3333%;
    float: left;
    padding: 5px;
}

.c-activity {
    border-radius: 10px;
    background-color: #878786;
    color: #fff;
    text-align: center;
    height: 70px;
    width: 100%;
}

.c-activity-t {
    font-size: 0.6em;
    text-align: right;
    padding-right: 10px;
}

.c-activity-m {
    font-size: 1.2em;
    text-align: center;
    padding-top: 10px;
}

.c-activity-b {
    font-size: 0.8em;
    text-align: center;
    padding-right: 10px;
}

/*.c-search-div {}*/

.c-search-foot1 {
    float: left;
}

.c-search-foot2 {
    float: right;
}

#buttonV {
    border-radius: 50px;
    height: 100px;
    width: 100px;
    opacity: 0.4;
    /*background-color: none;*/
    text-align: center;
    border: solid 5px #fff;
    color: #fff;
    display: block;
    font-size: 60px;
    left: 0;
    margin: 0 auto;
    padding-top: 35px;
    padding-left: 10px;
    position: absolute;
    right: 0;
    top: 25%;
}

.err-div {
    color: #e60000;
    font-size: inherit;
    padding: 5px;
    text-align: center;
}

#mInfoImgBox {
    width: 200px;
}

#mInfoBox {
    width: calc(100% - 200px);
}

.mInfoBoxList {
    width: 100%;
    border-bottom: solid 1px #ccc;
    padding: 8px;
}

#mInfoBox input[type='text'],
#mInfoBox input[type='number'],
#mInfoBox input[type='password'],
#mInfoBox textarea {
    font-size: inherit;
}

#newMember input[type='text'] {
    width: 90%;
}

.f-table-head {
    padding: 5px;
    font-weight: bold;
    background-color: #e4e4e4;
    border: solid 1px #ccc;
    font-size: 1em;
}

.f-table-cell {
    padding: 5px;
    border: solid 1px #ccc;
    font-size: 1em;
}

.f-table-cell input[type='text'],
.f-table-cell input[type='password'],
.f-table-cell select,
.f-table-cell textarea {
    width: 95%;
}

.l1BaseColor {
    height: 30px;
    width: 30px;
    border: solid 1px #000;
}

.colCellDiv {
    position: relative;
    width: 100px;
    height: 30px;
    border: solid 1px #000;
    overflow: hidden;
}

.colBtn {
    position: absolute;
    right: 0px;
    left: 15px;
    height: inherit;
    background-color: #ffff00;
}

.colCellBtn {
    width: 100%;
    height: inherit;
    border: none;
    border-left: solid 1px #000;
    padding: 0px;
}

#colPalette {
    width: 100%;
    max-width: 800px;
}

#colPalettePicker {
    width: 100%;
}

.closeBox {
    margin: 4px;
    border: solid 1px #000;
    width: 1.2em;
    height: 1.2em;
    font-size: 1em;
    text-align: center;
    background-color: #ccc;
    cursor: pointer;
}

/*#buttonV.active {
    background-color: #fff;
}*/

.tooltip {
    position: relative;
    display: inline-block;
    border-bottom: 1px dotted black;
    /* Add dots under the hoverable text */
    cursor: pointer;
}

/* Tooltip text */
.tooltiptext {
    visibility: hidden;
    /* Hidden by default */
    width: 130px;
    background-color: black;
    color: #ffffff;
    text-align: center;
    padding: 5px 0;
    border-radius: 6px;
    position: absolute;
    z-index: 1;
    /* Ensure tooltip is displayed above content */
}

/* Show the tooltip text on hover */
.tooltip:hover .tooltiptext {
    visibility: visible;
}

.sortable {
    list-style-type: none;
    padding-left: 10;
    cursor: move;
}

.sortable ol {
    margin-left: 10px;

}

.sortable li {
    list-style-type: none;
    position: relative;
    margin-top: 10px;
}

.sortable li div {
    margin: 2px 0px 2px 0px;
    padding: 5px;
    /*background: #f1f1f1;*/
    border: 1px solid #666;
    border-radius: 4px;
}

.handle {
    cursor: move;
    font-weight: bold;
    font-size: 1.6em;
    text-align: right;
}

/*.sortable li div:hover {
        background: #e9e9e9;
    }*/

.sortTemp {
    border: 1px dashed #666;
}

.sortable .ui-sortable-placeholder {
    height: 20px;
    background: #999;
    border: 1px dashed #ccc;
    visibility: visible !important;
    margin-left: 0px;
}

.sortable li div,
.sortable .ui-sortable-placeholder {
    width: 500px;
}

.buttons {
    margin-bottom: 15px;
}

button {
    padding: 8px 15px;
    margin-right: 5px;
}

#output {
    margin-top: 20px;
    padding: 15px;
    background: #f9f9f9;
    border: 1px solid #ccc;
    white-space: pre;
    font-family: monospace;
    max-height: 300px;
    overflow: auto;
}

/* CSS to apply the color variable */
.list-item-title {
    background-color: var(--list-color);
    /*border-left: 5px solid var(--list-color);*/
    /* Use the color variable for the border */
    /*padding: 5px 10px;
        margin: 5px 0;*/
    /*background-color: rgba(255, 255, 255, 0.5);*/
    /* Optional: slight background */
    display: flex;
    flex-wrap: wrap;
    row-gap: 0px;
}

.list-item-title div {
    border: none !important;
}

.listBox {
    font-size: 0.95em;
    background-color: rgba(255, 255, 255, 1);
}

.listBox2 {
    font-size: 0.95em;
    font-style: italic;
    background-color: rgba(255, 255, 255, 0.7);
}

/* Optional: Basic styling for the list to look neat */
/*ol {
        padding-left: 20px;
    }*/

.history-top {
    display: flex;
    width: 850px;
    margin: 10px auto 0px auto;
    align-items: center;
    flex-wrap: wrap;
    gap: 5px;
    font-size: 0.9em;
    line-height: 120%;
}

.home-table,
.home-table-sub,
.history-table,
.currStripe-table {
    margin: 50px auto 10px auto;
    /*display: flex;*/
    /*display: grid;*/
    width: 750px;
    /*align-items: center;*/
    /*justify-content: center;*/
    /*flex-wrap: wrap;*/
    font-size: 0.9em;
    /*gap: 60px 80px;*/
}

.history-holder {
    background-color: #bdbdbd;
    padding: 5px 0px 30px 0px;
    min-height: 100px;
    border-bottom: solid 1px #333;
}

.home-table {
    /*justify-content: space-between;*/
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(180px, 1fr));
    gap: 35px;
}

.currStripe-table {
    display: grid;
    margin: 30px auto 20px auto;
    grid-template-columns: repeat(auto-fill, minmax(100px, 1fr));
    gap: 25px;
}

.history-table {
    margin-top: 0px;
    display: grid;
    margin: auto;
    grid-template-columns: repeat(auto-fill, minmax(100px, 1fr));
    gap: 10px;
}

.backArr {
    font-size: 40px;
}

.home-table-col {
    display: flex;
    flex-flow: column wrap;
    gap: 30px 0px;
    margin: 50px 0;
    width: 160px;
    height: auto;
}

.home-table-sub {
    margin: 50px auto 0px auto;
    padding-top: 20px;
    gap: 20px 40px;
}

.home-table-sub-small {
    scale: 70%;
}

.small-table {
    gap: 40px 40px;
}

.home-btn-ico,
.home-btn-ico-nex,
.back-btn-ico {
    display: flex;
    flex-wrap: wrap;
    cursor: pointer !important;
    width: 180px;
    height: 180px;
    padding: 20px;
    align-items: center;
    justify-content: center;
    border-radius: 20%;
    color: #ffffff;
    font-size: 1.2em;
    font-weight: 500;
    line-height: 1.1em;
    text-align: center;
    box-shadow: 0px 5px 5px 0 rgba(0, 0, 0, 0.5);
}

.history-btn-ico {
    cursor: pointer !important;
}

.activeState {
    filter: brightness(120%);
    border: solid 3px #000;
}

.home-btn-ico-nex img {
    width: 80%;
}

.back-btn-ico {
    width: 100px;
    height: 100px;
    padding: 5px;
    font-size: 0.85em;
    line-height: 1em;
}

.back-btn-ico img {
    width: 60%;
    height: 60%;
}

.home-btn-ico-nex {
    width: 130px;
    height: 130px;
    padding: 12px;
    font-size: 1em;
    line-height: 1.1em;
}

.btn_small {
    width: 130px;
    height: 130px;
    padding: 10px;
    font-size: 1em;
    line-height: 1em;
}

.btn_small img {
    width: 70%;
    height: 70%;
}

#menuInfo {
    position: relative;
    width: 80%;
    margin: auto;
    display: none;
    z-index: 1000;
}

#menuInfoDIv {
    position: fixed;
    padding: 10px;
    top: 10px;
    left: 10%;
    right: 10%;
    /*bottom:50px;*/
    height: 600px;
    background-color: #fff;
    border-radius: 10px;
}

.mTable thead td {
    background-color: #999;
    font-weight: bold;
    color: #fff;
}

.mTable td {
    padding: 7px;
    border: solid 1px #999;
    font-size: 1em;
}

.mTable tr:nth-child(odd) {
    background-color: #f2f2f2;
    /* Light gray background for odd rows */
}

.mTable tr:nth-child(even) {
    background-color: #ccc;
    /* White background for even rows */
}

.mTable td a {
    text-decoration: underline !important;
}

.mTable td a:hover {
    color: #f80000;
}

#urlOverLay {
    display: none;
}

/*swiper*/
.slider-window {
    position: relative;
    overflow: hidden;
    width: 600px;
    /* Adjust based on icon size */
    height: 340px;
}

.slice {
    display: none;
    /* Hide all slices by default */
    width: 100%;
}

.slice.active {
    display: block;
    /* Only show active slice */
}

.icon-grid {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    /* 4 columns */
    grid-template-rows: repeat(2, 1fr);
    /* 2 rows */
    gap: 15px;
    justify-content: space-around;
    padding: 10px;
}

.icon-grid-hist {
    display: grid;
    grid-template-columns: repeat(6, 1fr);
    /* 4 columns */
    grid-template-rows: repeat(2, 1fr);
    /* 2 rows */
    gap: 15px;
    justify-content: space-around;
    padding: 10px;
}

/*.icon-grid {
	display: grid;
	grid-template-columns: repeat(2, 1fr);
	gap: 10px;
	padding: 10px;
	}*/



.icon-item {
    display: flex;
    flex-direction: column;
    align-items: center;
    text-decoration: none;
    color: black;
}

.icon-item img {
    width: 50px;
    height: 50px;
}

.main-slider-wrapper {
    display: flex;
    align-items: center;
    /* Vertically centers arrows with icons */
    justify-content: center;
    gap: 10px;
    /* Space between arrows and the icons */
    width: 100%;
    max-width: 1000px;
    /* Adjust to fit your 8 icons */
    margin: 0 auto;
}

.swiper-button-prev,
.swiper-button-next {
    border-radius: 15px;
    background-color: #999;
    height: 160px;
    color: white;
    font-weight: 700;
}

.swiper-button-prev {
    transform: rotate(180deg);
    /* Manually flip the arrow back */
}


/* Ensure the slider window takes up the remaining space */
.slider-window {
    flex-grow: 1;
    overflow: hidden;
}

.calTbl-container {
    display: flex;
    align-items: flex-start;
    width: 100%;
    margin-bottom: 60px;
}

.calTbl-container-inner {
    display: flex;
    flex-wrap: wrap;
    width: 70%;
}

.calTbl-container-info {
    width: 30%;
    padding: 20px 0px 10px 0px;
    text-align: center;
}

#calTbl-info-header {
    color: #a41d4a;
    font-size: 1.2em;
    line-height: 120%;
}

#calTbl-info-header h1 {
    font-size: 1.7em;
    text-decoration: underline;
    font-weight: normal;
    margin-bottom: 0.5em;
}

#calTbl-info-cont {
    height: 95px;
    width: 100%;
    font-size: 1em;
    background-color: #fff;
    margin: 8px 0px;
}

#calTbl-info-img {
    float: left;
    height: 95px;
    width: 95px;
}

#calTbl-info-img img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

#calTbl-info-detail {
    float: left;
    height: inherit;
    width: calc(100% - 98px);
    padding: 10px;
    text-align: left;
    color: #a41d4a;
    font-size: 0.85em;
}


.calTbl-cell {
    width: 14%;
    aspect-ratio: 1 / 1;
    border: solid 1px #a41d4a;
    margin-right: -1px;
    margin-bottom: -1px;
}

.calTbl-cell-none {
    border: none;
}

.calTbl-cell-header {
    width: 14%;
    color: #a41d4a;
    padding: 4px 0px;
    font-size: 0.9em;
}

.tbl-time-day-list {
    position: absolute;
    top: 26px;
    bottom: 0px;
    left: 0px;
    right: 0px;
    overflow: auto;
    font-size: 0.55em;
    line-height: 100%;
    color: #a41d4a;
}

.tbl-time-day-list ul {
    padding-top: 0px;
    padding-left: 10px;
}

.tbl-time-day-list li::after {
    content: "";
    display: inline-block;
    height: 10px;
}


/*----------------------FOR SMALL SCREEN ONLY----------------------------------*/
@media (max-width:600px) {
    body {
        width: 100%;
        padding: 0px;
        line-height: 110%;
    }

    .h-main-content {
        max-width: auto;
        min-height: 100%;
        padding: 10px 5px;
        margin: auto;
    }

    /*.c1-main-content {
        padding: 10px 5px;
    }*/

    #c1-main-home {
        width: 100%;
        margin: auto;
        padding-top: 75px;
    }

    .clear25px,
    .clear30px {
        clear: both;
        display: block;
        height: 5px;
        overflow: hidden;
        margin: 0;
        padding: 0;
    }

    .hide-small,
    .c1-hide-small {
        display: none !important
    }

    .c1-mobile {
        display: block;
        width: 100% !important
    }

    .c1-bar-item.c1-mobile,
    .c1-dropdown-hover.c1-mobile,
    .c1-dropdown-click.c1-mobile {
        text-align: center
    }

    c1-hide-large,
    .c1-hide-medium {
        display: block !important
    }


    .c1-main-content-inner {
        width: 100%;
        padding: 0px;
    }

    .c1-main-content-career {
        width: 100%;
    }

    #menu {
        width: 100%;
        /*background-color: #a41d4a;*/
        color: #fff;
        font-size: 1em;
    }

    #menu a {
        color: #fff;
        font-size: 0.75em;
    }

    #footer {
        width: 100%;
        font-size: 0.7em;
    }

    #footer1 {
        width: 100%;
        font-size: 3vw;
        /*padding-top: 50px;*/
        line-height: 1.1em;
    }

    /*#footer-innerbox{width:100%;margin:auto;padding:1vw;}
#footer-cells{float:left;width:33.3333%;text-align:center;padding:2vw 0vw;}*/
    #footer-innerbox {
        width: 100%;
        margin: auto;
        padding: 10px 0px 10px 0px;
    }

    #footer-cells {
        float: left;
        /*width:33.3333%;*/
        width: 25vw;
        text-align: center;
        padding: 0px 0px 10px 0px;
    }

    #footer-box {
        width: 100%;
        margin: auto;
        padding: 5px 5px;
        text-align: center;
        clear: both;
    }

    #footer-shortcuts {
        width: 100%;
        margin: auto;
    }

    #footer-blk {
        height: 30px;
        border: solid 2px #a41d4a;
        background-color: #fff;
        display: table-cell;
    }

    #footer-sub {
        display: none;
    }

    .main-btn,
    .main-btn-h {
        width: 49.9999%;
        height: 49.9999%;
        float: left;
    }

    .main-btn-f {
        width: 99.9999%;
        float: left;
    }

    #main-bImg {
        width: 27vw;
        height: 27vw;
        margin: auto;
        border-radius: 20%;
        overflow: hidden;
    }

    #main-bImg-note {
        position: absolute;
        width: 27vw;
        text-align: right;
        padding: 3vw;
        z-index: 100;
        color: #fff;
        font-size: 1.2em;
    }

    #tmenu a {
        color: #fff;
        font-size: 1.1em;
        text-decoration: none;
    }

    .txt-b1 {
        font-size: 1.3em;
    }

    .txt-b2 {
        font-size: 1.2em;
    }

    .txt-b3 {
        font-size: 1.05em;
    }

    .txt-strong {
        font-weight: bold;
    }

    .small-txt {
        font-size: 0.75em;
    }

    .m_logo {
        width: 80%;
    }

    .width33 {
        width: 99.99%;
    }

    .h-qlink {
        width: 99.99% !important;
        border: none !important;
        padding: 5px 0px;
    }

    .lrborder {
        border: none;
    }

    #menu #navDemo a {
        color: #000;
        font-size: 0.85em;
    }

    #c_search {
        text-align: center;
        height: 24px;
        width: 180px;
        padding: 0px 5px;
        color: #666;
    }

    #c_search input {
        font-size: 0.8em;
        border: solid 1px #333;
    }

    /*#main-bImg-narr{width:25vw;height:25vw;margin:auto;border-radius:20;overflow:hidden;background-image:url(../images/handbook_generic.png);background-repeat:no-repeat;background-position:center 10vw;background-color:#a41d4a;width:100%;height:100%;}*/

    .main-btn-s {
        width: 24.9999%;
        float: left;
        padding: 20px 0px;
    }

    #main-bImg-narr {
        width: 27vw;
        height: 27vw;
        background-position: center 33.33%;
        background-size: 33.33% 33.33%;
    }

    #main-bImg-narr p {
        font-size: 3vw;
        color: #fff;
        background-repeat: none;
        text-align: center;
        width: 70%;
        margin: auto 12.5% auto 12.5%;
        top: 65%;
        position: absolute;
        line-height: 100%;
    }

    .part_label {
        margin: auto;
        text-align: center;
        width: 75%;
        margin: auto 12.5% auto 12.5%;
        font-size: 3vw;
        top: 1.5vw;
        position: absolute;
        color: #fff;
        z-index: 10;
    }

    #main-bImg-small {
        width: 18vw;
        height: 18vw;
        margin: auto;
        border-radius: 20%;
        overflow: hidden;
        display: table;
    }

    #main-bImg-small p {
        display: table-cell;
        vertical-align: middle;
        padding: 5px;
        color: #fff;
        background-repeat: no-repeat;
        text-align: center;
        font-size: 3vw;
    }

    #hb_banner {
        height: 240px;
        width: 100%;
        background-color: #000;
    }

    #thisVideo {
        width: 100%;
        height: inherit;
    }

    #backlinkDiv {
        width: auto;
        margin: auto;
        font-size: 0.75em;
    }

    .main-btn-holder {
        /*width: 95%;
        margin: auto;
        padding-top: 30px;*/
        width: 100%;
    }

    .main-btn-holder-top {
        width: auto;
        margin: auto;
        overflow: visible;
    }

    .main-btn-unl1 {
        /*width:14.28%;width:16.66%;*/
        width: 24.99%;
        float: left;
        padding: 5px 0px;
    }

    .main-btn-unl-img {
        width: 22.5vw;
        text-align: center;
    }

    #main-bImg-unl {
        width: 18vw;
        height: 18vw;
        margin: auto;
        border-radius: 20%;
        overflow: hidden;
    }

    #v-align {
        display: table-cell;
        padding: 2vw 2vw;
        width: 100%;
        height: 100%;
        margin: auto;
        color: #fff;
        text-align: center;
        vertical-align: middle;
        font-size: 2.5vw;
    }


    #main-bImg-100 {
        width: 18vw;
        height: 18vw;
        margin: auto;
        border-radius: 20%;
        overflow: hidden;
        display: table;
    }

    #main-bImg-100 p {
        display: table-cell;
        vertical-align: middle;
        padding: 5px;
        color: #fff;
        background-repeat: none;
        text-align: center;
        font-size: 3vw;
    }

    .calendar-tbl {
        width: 100%;
    }

    .calendar-cell {
        height: 110px;
        width: 14%;
        background-size: 70% auto;
    }

    .calendar-img-holder {
        position: absolute;
        width: 14vw;
        text-align: center;
        top: -5px;
    }

    .calendar-txt {
        color: #a41d4a;
        font-size: 0.7em;
        display: block;
    }

    .calendar-train1 {
        color: #fff;
        font-size: 2.75vw;
        line-height: 90%;
        display: block;
    }

    .calendar-train2 {
        color: #fff;
        font-size: 2.75vw;
        line-height: 140%;
        display: block;
    }

    .calendar-day-tbl {
        width: 100%;
    }

    .calendar-day-tbl2 {
        border-left: solid 1px #a41d4a;
        border-right: solid 1px #a41d4a;
        border-top: solid 1px #a41d4a;
        width: 100%;
    }

    .calendar-cell-N {
        height: 50px;
        width: 16%;
        background-size: 75% auto;
    }


    #timeTable td {
        width: 100%;
        height: 15vw;
    }

    #tbl_cal_txt {
        padding: 1px 5px;
        line-height: 100%;
        font-size: 3vw;
        color: #a41d4a;
        height: auto;
        overflow: auto;
    }

    .tbl_time_day,
    .tbl-time-day {
        height: auto;
        width: 100%;
        background-color: #999;
        text-align: left;
        font-size: 3vw;
        color: #fff;
        border-bottom: solid 1px #fff;
        padding: 1vw;
        font-weight: bold;
    }

    .currentMemberTrainTd {
        height: auto;
        padding: 5px;
        background-color: #fff;
        font-size: 3vw;
        width: 70vw;
    }

    #timeTableDetal {
        line-height: 110%;
        table-layout: auto;
    }

    #timeTableDetal td {
        width: auto !important;
    }

    .c1 {
        width: 20% !important;
        border-bottom: solid 1px #333;
    }

    /*.c1{width:auto!important;border-bottom:solid 1px #333;}*/
    .c2 {
        width: auto !important;
        border-bottom: solid 1px #333;
    }

    #arrLeft {
        display: none;
        margin-top: 10px;
        float: left;
        padding-top: 0px;
        text-align: center;
    }

    #arrRight {
        display: none;
        margin-top: 10px;
        float: right;
        padding-top: 0px;
        text-align: center;
    }

    #arrLeft img,
    #arrRight img {
        height: 10vw;
        width: 5vw;
    }

    .arrR,
    .arrL {
        height: 100%;
        width: 30%;
    }

    #vdoLayer {
        min-height: 100%;
        width: 100%;
        margin: auto;
        margin-top: 0px;
        padding: 10px;
        border: solid 1px #333;
        background-color: rgba(255, 255, 255, 1);
        color: #a41d4a;
        font-size: 0.8em;
    }

    #vdoLayer a,
    a:hover {
        color: #666;
    }

    #vdoLayer .nLink {
        color: #a41d4a;
        font-size: inherit;
        line-height: 100%
    }

    #vdo-menu {
        height: 70px;
        background-color: #fff;
    }

    .vWallImg {
        width: 49.4444vw;
        height: 49.4444vw;
    }

    .vdoWall {
        width: 49.4444vw;
        height: 49.4444vw;
        background-color: #000;
        position: relative;
        z-index: 10;
        float: left;
        top: 0;
    }

    .l3-text {
        font-size: 3vw;
    }

    .v-sep {
        float: left;
        width: 2vw;
        text-align: center;
    }

    .v-box {
        float: left;
        padding: 0px 2px;
    }

    .v-td {
        height: 65px;
    }

    .v-cont {
        height: auto;
        width: 99%;
    }

    .topBtnContStyle {
        width: 99%;
        padding: 40px 0px 20px 0px;
    }

    /*.topBtnHolderStyle{width:auto;}*/
    .topBtnHolderStyle {
        min-width: 90vw;
    }

    .log-text {
        box-shadow: 0 5px 5px 0 rgba(0, 0, 0, 0.5);
        line-height: 0.7em;
        word-break: break-word;
    }

    .log-text-d {
        box-shadow: 0 3px 3px 0 rgba(0, 0, 0, 0.5);
        width: 20vw;
        height: 22vw;
        overflow: hidden;
    }

    .team-img {
        float: left;
        width: 22vw;
        text-align: center;
        line-height: 160%;
        font-size: 3vw;
    }

    .c1-f-left,
    .c1-f-right {
        float: none;
    }

    #abm_slide {
        width: 99vw;
        margin: auto;
        margin-top: 20vw;
        background-color: rgba(0, 0, 0, 1);
        display: block;
        position: relative;
        border: solid 1px #333;
        font-size: 0.7em;
    }

    #cust-search {
        margin: auto;
        width: 100%;
        padding: 5px;
        font-size: 0.9em;
    }

    #abm_cust_slide {
        width: 90vw;
        max-height: 99vh;
        border-radius: 10px;
        margin: auto;
        margin-top: 0vh;
        display: block;
        position: relative;
        border: solid 1px #ccc;
        background-color: #fff;
    }

    .cust-search-tbl,
    .cust-search-tbl-b {
        border-collapse: separate;
        border-spacing: 8px;
        font-size: 0.9em;
        line-height: 100%;
    }

    .cust-search-tbl-cell {
        width: 49.99%;
        height: 30px;
    }

    .c-activity-blk {
        height: auto;
        width: 49.9999%;
        float: left;
        padding: 5px;
    }

    .c-search-div {
        max-height: 80vh;
        overflow: scroll !important;
    }

    .c-search-foot1 {
        float: left;
        clear: right;
        padding-bottom: 10px;
    }

    .c-search-foot2 {
        float: left;
    }

    .main-bImg-t {
        font-size: 0.7em;
        display: flex;
        justify-content: center;
        align-items: center;
        color: #fff;
        background-repeat: none;
        text-align: center;
        width: 70%;
        height: 30%;
        margin: auto 12.5% auto 12.5%;
        top: 65%;
        position: absolute;
        line-height: 110%;
    }

    #mInfoImgBox {
        width: 100%;
    }

    #mInfoBox {
        width: 100%;
    }

    .f-table-cell input[type='text'],
    .f-table-cell input[type='password'],
    .f-table-cell select,
    .f-table-cell textarea {
        width: 50%;
    }

    .sortable {
        padding-left: 0px;
    }

    .sortable ol {
        margin: 0px 0px 0px 5px;
        padding: 0;
    }

    .sortable li div,
    .sortable .ui-sortable-placeholder {
        font-size: 0.9em;
        width: 100%;
    }

    .content-home {
        width: 95%;
        margin: auto;
        padding-top: 20px;
        padding-bottom: 80px;
    }

    .home-table,
    .home-table-sub {
        margin: 15px auto;
        width: 100%;
        gap: 30px 30px;
    }

    .home-table {
        grid-template-columns: repeat(auto-fill, minmax(120px, 1fr));
        width: 280px;
        margin: auto;
    }

    .home-table img {
        width: 80%;
    }

    .home-table-col {
        width: 100px;
    }

    .small-table {
        gap: 15px 15px;
    }

    .history-top {
        width: 90%;
    }

    .currStripe-table {
        display: grid;
        width: 90%;
        margin: 10px auto 0px auto;
        /*grid-template-columns: repeat(auto-fill, minmax(70px, 1fr));*/
        grid-template-columns: repeat(4, 1fr);
        gap: 10px;
    }

    .history-table {
        display: grid;
        width: 90%;
        margin: auto;
        /*gap: 20px 10px;*/
        grid-template-columns: repeat(auto-fill, minmax(70px, 1fr));
        gap: 15px;
    }

    .backArr {
        font-size: 20px;
    }

    .home-btn-ico {
        width: 120px;
        height: 120px;
        padding: 15px;
        font-size: 1em;
    }

    .home-btn-ico-nex {
        width: 85px;
        height: 85px;
        padding: 7px;
        font-size: 0.9em;
    }

    .btn_small {
        width: 90px;
        height: 90px;
        padding: 8px;
    }

    .home-btn-ico-nex img {
        width: 65%;
    }

    .home-btn-ico-nex img {
        width: 55%;
    }

    .back-btn-ico {
        width: 70px;
        height: 70px;
        font-size: 0.8em;
        line-height: 120%;
    }

    .listBox {
        font-size: 0.9em;
        padding: 0px;
    }

    .listBox2 {
        font-size: 0.9em;
        padding: 0px;
    }

    #menuInfo {
        width: 100%;
    }

    #menuInfoDIv {
        top: 20px;
        width: 95%;
        left: 10px;
        height: 85vh;
    }

    #colPalette {
        width: 100%;
    }

    .tbl-textarea {
        width: 70%;
        height: 3em;
    }

    /*swiper*/
    .icon-grid {
        grid-template-columns: repeat(3, 1fr);
    }

    .icon-grid-hist {
        grid-template-columns: repeat(4, 1fr);
    }

    .main-slider-wrapper {
        width: 100%;
    }

    .slider-window {
        width: 80%;
        /* Adjust based on icon size */
    }

    .swiper-button-prev,
    .swiper-button-next {
        height: auto;
        width: 100px;
        color: white;
        font-weight: 700;
    }

    .calTbl-container {
        display: block;
        width: 100%;
        position: relative;
    }

    .calTbl-container-inner {
        display: flex;
        width: 95%;
        margin: auto;
    }

    .calTbl-container-info {
        display: none;
    }


}

/*----------------------FOR BIG SCREEN ONLY------------------------------------*/
@media (min-width:768px) {}

/*----------------------FOR LANDSCAPE SCREEN-----------------------------------*/
@media (min-width:600px) and (max-width:1080px) and (orientation:landscape) {

    .home-table,
    .home-table-sub {
        margin: 15px auto;
        width: 100%;
        gap: 30px 30px;
    }

    .home-table {
        /*width: 70vw;*/
        width: 430px;
        margin: auto;
        grid-template-columns: repeat(auto-fill, minmax(120px, 1fr));
    }

    .home-table img {
        width: 80%;
    }

    .home-table-col {
        width: 100px;
    }

    .small-table {
        gap: 15px 15px;
    }

    .history-top {
        width: 90%;
    }

    .currStripe-table {
        display: grid;
        width: 80%;
        margin: 10px auto 0px auto;
        grid-template-columns: repeat(auto-fill, minmax(70px, 1fr));
    }

    .history-table {
        display: grid;
        width: 90%;
        margin: auto;
        gap: 10px 5px;
    }

    .backArr {
        font-size: 20px;
    }

    .back-btn-ico {
        width: 70px;
        height: 70px;
        font-size: 0.8em;
        line-height: 120%;
    }

    .home-btn-ico-nex {
        width: 85px;
        height: 85px;
        padding: 7px;
        font-size: 0.9em;
    }

    /*--swiper--*/
    .icon-grid {
        grid-template-columns: repeat(4, 1fr);
    }
}

/*----------------------FOR LANDSCAPE SCREEN-----------------------------------*/
/* When the height of the screen is less than 450 pixels, change the font-size of the links and position the close button again, so they don't overlap */
@media (max-height: 450px) {
    .h-main-content {
        height: auto !important;
    }

    #c1-main-home {
        padding-top: 50px;
    }

    .overlay a {
        font-size: 20px
    }

    .overlay .closebtn {
        font-size: 40px;
        top: 15px;
        right: 35px;
    }


    #menuInfo {
        width: 100%;
    }

    #menuInfoDIv {
        top: 10px;
        width: 95%;
        left: 10px;
        height: 350px;
        /*bottom: 50px;*/
    }

    .home-btn-ico {
        width: 120px;
        height: 120px;
        padding: 15px;
        font-size: 1em;
    }

    .home-btn-ico-nex {
        width: 85px;
        height: 85px;
        padding: 7px;
        font-size: 0.9em;
    }

    .back-btn-ico {
        width: 70px;
        height: 70px;
        font-size: 0.8em;
        line-height: 120%;
    }

    /*--swiper--*/
    .icon-grid {
        grid-template-columns: repeat(4, 1fr);
    }

    .swiper-button-prev,
    .swiper-button-next {
        height: auto;
        width: auto;
        color: white;
        font-weight: 700;
    }

}