@import url('https://fonts.googleapis.com/css2?family=Noto+Sans+JP:wght@100;200;300;400;500;600;700;800;900&family=Poppins:wght@100;200;300;400;500;600;700;800;900&display=swap');
@import url('https://fonts.googleapis.com/css2?family=Kosugi&display=swap');
@import url('https://fonts.googleapis.com/css2?family=Kosugi+Maru&display=swap');
@import url("https://fastly.jsdelivr.net/npm/bootstrap-icons@1.10.3/font/bootstrap-icons.css");

* {
    box-sizing: border-box;
    margin: 0;
    /*font-family: 'Kosugi', sans-serif;*/
    /*font-family: 'Meiryo', sans-serif;*/
    font-family: 'Noto Sans JP', sans-serif;
    /*font-family: 'Poppins', sans-serif;*/
    /*font-family: 'Kosugi Maru', sans-serif;*/
}

.btn-primary {
    background-color: #28A5FF;
    border-color: #28A5FF;
}

textarea:focus,
select:focus,
.form-select:focus,
textarea.form-control:focus,
input.form-control:focus,
input[type=text]:focus,
input[type=password]:focus,
input[type=email]:focus,
input[type=number]:focus,
[type=text].form-control:focus,
[type=password].form-control:focus,
[type=email].form-control:focus,
[type=tel].form-control:focus,
[contenteditable].form-control:focus,
.btn-close:focus,
.form-check-input:focus,
.form-radio-input:focus {
    box-shadow: 0 0 8px rgba(0, 0, 0, 0.068);
}

.login-page-wrapper .login-left-panel {
    background-image: url('./../img/login-bg-img.png');
    background-size: cover;
    background-position: center;
    background-color: #000A2B;
}

.login-page-wrapper .login-left-panel .login-logo-img {
    max-width: 400px;
}

.login-page-wrapper .login-left-panel .login-logo-text {
    max-width: 150px;
    margin-top: -70px;
}

.login-page-wrapper .login-right-panel {
    max-width: 39%;
    margin: auto;
}

.login-page-wrapper .login-right-panel .signup-free-link {
    font-size: 0.9rem;
}

.login-page-wrapper .login-right-panel .forgot-pw-link {
    font-size: 0.9rem;
}

.login-page-wrapper .login-right-panel .login-logo-img {
    max-width: 100px;
}

.login-page-wrapper .login-right-panel .login-logo-text {
    max-width: 100px;
}

.login-page-wrapper .login-right-panel .mobile-bg-header {
    background-color: #000A2B;
    background-image: url('./../img/login-bg-img.png');
    background-size: cover;
    background-position: center;
}

/* Cart Step 1 */
.header-wrapper-bg {
    background-color: #000A2B;
}

.header-wrapper .header-logo-img {
    max-width: 45px;
}

.header-wrapper .header-logo-text {}

.cart-stepper-wrapper .step .bs-stepper-label {
    font-size: 12px;
    font-weight: 500 !important;
}

.cart-stepper-wrapper .step button {
    position: relative;
    padding: 0;
    z-index: 9;
}

.cart-stepper-wrapper .step button:hover {
    background-color: transparent;
}

.cart-stepper-wrapper .step.active .bs-stepper-label {
    color: var(--bs-primary);
}

.cart-stepper-wrapper .step .bs-stepper-circle {
    border: 2px solid var(--bs-gray-500) !important;
    width: 20px;
    height: 20px;
    padding: 0;
}

.cart-stepper-wrapper .step.active .bs-stepper-circle {
    border: 3px solid var(--bs-primary) !important;
}

.cart-stepper-wrapper .bs-stepper-header:before {
    position: absolute;
    content: "";
    background-color: var(--bs-gray-600);
    height: 1px;
    top: 25%;
    bottom: 75%;
    z-index: 0;
    left: 45px;
    right: 30px;
}

.cart-stepper-wrapper .product-desc {
    font-size: 14px;
}

.cart-stepper-wrapper .product-OS {
    font-size: 12px;
}

.cart-stepper-wrapper .item-price {
    font-size: 14px;
}

.order-summary-wrapper .footer .footer-copyright-text {
    font-size: 12px;
}

.bs-stepper .step-trigger.disabled,
.bs-stepper .step-trigger:disabled {
    opacity: 1 !important;
}

.cart-stepper-wrapper .action-button-wrapper * {
    font-size: 14px !important;
}

.cart-stepper-wrapper .btn-theme-action-bg {
    background-color: #FF6635;
}

.cart-stepper-wrapper .primary-action-button {
    height: 45px;
}

.cart-stepper-wrapper .secondary-action-button {
    height: 45px;
}

.cart-stepper-wrapper .form-group {
    position: relative;
}

.cart-stepper-wrapper .form-group label {
    position: absolute;
    background-color: var(--bs-white);
    font-size: 0.8rem;
    top: -9px;
    left: 35px;
    padding: 0 12px;
    z-index: 9;
}

.cart-stepper-wrapper .form-check-input {
    width: 25px;
    height: 25px;
}

.cart-stepper-wrapper .form-control {
    height: 45px;
    padding: 0 0 0 34px;
}

.cart-stepper-wrapper .form-select {
    height: 45px;
}

.btn-outline-primary {
    border-width: 0;
}

.cart-stepper-wrapper .payment-methods-wrapper .btn-check:checked+.btn {
    background-color: #28A5FF !important;
    border-color: #0094FF !important;
    border-width: 2px !important;
}

.toast {
    z-index: 9999;
    top: 0;
}

.toast.bg-warning {
    background-color: #ffc10740;
}

/********************************************
************ Floating label ****************
*********************************************/

.form-capsule .form-group {
    /* Form group*/
    position: relative;
}

/* Button */
.form-capsule .form-group .btn-login-action {
    height: 50px;
}

.form-capsule .form-group .btn-login-action:hover {
    box-shadow: 0 0 8px #2d2d2e21;
}

.form-capsule .form-group .btn-google-login-action {
    /* height: 50px; */
}

.form-capsule .form-group .btn-google-login-action:hover {
    box-shadow: 0 0 8px #2d2d2e21;
}

.form-capsule .form-group .continue-note-link {
    font-size: 0.8rem;
}

.form-capsule .form-group .pw-validation-notes p {
    font-size: 0.7rem;
    display: flex;
    align-items: center;
}

/******* Label *******/

.form-capsule .form-group label {
    /* Input field floating label */
    position: absolute;
    font-size: 0.6em;
    top: 0px;
    width: auto;
    padding: 0 40px;
    margin: 7px 0 10px 7px;
    /* opacity: 0; */
    transition: opacity 0.2s ease-out;
    /* prevent flickering */
    -webkit-backface-visibility: hidden;
    pointer-events: none;
}

.form-capsule .show-label label {
    /* Active state for label when visible */
    opacity: 1;
}

.form-capsule .form-control::placeholder {
    /* Placeholder label hidden */
    opacity: 0;
    padding-top: 25px;
}

/******** Form control fields ********/

.form-capsule .form-control {
    /* Form control fields */
    height: 50px;
    padding: 5px 47px;
    padding-top: 25px;
    box-shadow: 0 0 8px transparent;
    transition: all 0.2s ease-out;
    background-color: var(--bs-gray-300);
    border-width: 0;
}

.form-capsule .form-control:focus,
.form-capsule .form-control:focus-visible,
.form-capsule .form-control:active {
    /* Focus state for form-control fields */
    box-shadow: 0 0 8px #2d2d2e21;
    outline: transparent;
    border-color: var(--bs-primary);
    border-width: 0;
    border-bottom-width: 2px;
    border-radius: .375rem .375rem 0 0;
}

.form-capsule .show-label .form-control {
    /* Active state for form-control fields */
    padding-top: 25px;
    padding-bottom: 5px;
    background-color: var(--bs-gray-300);
}

/********************************************
  ************ Textarea ***********************
  *********************************************/

.form-capsule .form-group-textarea label {
    /* Textarea floating label */
    background-color: white;
    width: auto;
    right: 0;
    left: 0;
    margin: 1px 18px 1px 1px;
    border-radius: 3px 3px 0 0;
    padding-top: 4px;
}

.form-capsule .form-group-textarea .form-control {
    /* Textarea */
    min-height: 100px;
    height: auto;
    max-width: 100%;
    min-width: 100%;
}

/********************************************
  ************ Markdown ***********************
  *********************************************/

.form-capsule .form-group-markdown label {
    /* Markdown textarea floating label */
    background-color: white;
    width: auto;
    right: 0;
    left: 0;
    margin: 1px 18px 1px 1px;
    border-radius: 3px 3px 0 0;
    padding-top: 4px;
}


.form-capsule .form-group-markdown .form-control {
    /* Markdown textarea */
    margin-top: 10px;
    min-height: 200px;
    height: auto;
    max-width: 100%;
    min-width: 100%;
}

.form-capsule .markdown-upload-button {
    /* Markdown file upload buttong */
    cursor: pointer;
    color: blue;
}

.form-capsule .markdown-preview {
    /* Markdown preview */
    margin-top: 10px;
    margin-bottom: 10px;
    height: 230px;
    width: 100%;
    border: 1px solid #CCC;
    border-radius: 4px;
}

/********************************************
  ************ Select *************************
  *********************************************/

.form-capsule .form-group-select label {
    /* Select floating label */
    opacity: 1;
    z-index: 1;
}

.form-capsule .form-group-select .form-control {
    /* Select */
    padding-top: 25px;
    padding-bottom: 5px;
    -webkit-appearance: none;
    -moz-appearance: none;
}

.select-wrapper {
    /* Select wrapper */
    position: relative;
    z-index: 0;
}

.select-wrapper:before {
    /* Select arrow image background */
    content: '';
    position: absolute;
    right: 0;
    top: 0;
    bottom: 0;
    width: 50px;
    background-position: center center;
    background-repeat: no-repeat;
    pointer-events: none;
    background-image: url(https://tlc-web.qcode.co.uk/Graphics/dropdown-arrow-down-dark.svg);
}



/********************************************
  ************ Help block *********************
  *********************************************/

.help-block-inline {
    /* Inline help block */
    position: absolute;
    top: 0;
    right: 25px;
    line-height: 50px;
    margin: 0;
    font-size: 90%;
    color: #CCC;
}

.help-block-inline-start {
    /* Inline help block */
    position: absolute;
    top: 0;
    left: 25px;
    line-height: 50px;
    margin: 0;
    font-size: 90%;
    color: #CCC;
}

/********************************************
  ************ Units help-block ***************
  *********************************************/

.help-block-floating {
    /* Inline help block for units */
    color: #555;
}

.help-block-background {
    right: 0;
    background-color: #eee;
    color: #555;
    border-radius: 0 3px 3px 0;
    height: 48px;
    margin: 1px;
    padding: 0 12px;
}

/********************************************
  ************ Tooltip ************************
  *********************************************/

.tooltip-icon {
    /* Tooltip icon */
    position: absolute;
    top: 15px;
    right: 30px;
}

/********************************************
  ************ Radio group ********************
  *********************************************/

.radio-group {
    border: 1px solid #ccc;
    border-radius: 4px;
}

.radio,
.radio+.radio {
    border-bottom: 1px solid #ccc;
    margin: 0;
}

.radio:last-child {
    border-bottom: 0;
}

.radio-option {
    display: none;
}

.radio-option:checked+.radio-option-label:before {
    border-color: #000666;
    border-width: 5px;
}

.radio-option-label {
    display: table
}

.radio-option-label:before {
    content: "";
    display: block;
    width: 16px;
    height: 16px;
    border: 1px solid #ccc;
    margin: 17px;
    border-radius: 50%;
    background-color: white;
    transition: border-width 0.3s ease;
}

.radio-option-label-text {
    display: table-cell;
    vertical-align: middle;
    padding: 10px 10px 10px 0;
    width: 100%;
    margin: 0;
}

.transform135deg {
    transform: rotate(135deg) !important;


    /* Legacy vendor prefixes that you probably don't need... */

    /* Safari */
    -webkit-transform: rotate(135deg) !important;

    /* Firefox */
    -moz-transform: rotate(135deg) !important;

    /* IE */
    -ms-transform: rotate(135deg) !important;

    /* Opera */
    -o-transform: rotate(135deg) !important;

}

.text-divider {
    font-size: 0.9rem;
    margin: 2em 0;
    line-height: 0;
    text-align: center;
}

.text-divider span {
    background-color: var(--bs-white);
    padding: 1em;
}

.text-divider:before {
    content: " ";
    display: block;
    border-top: 1px solid var(--bs-gray-200);
}

/********************************************
  ************ Dashboard UI ********************
  *********************************************/
.dashboard-page-wrapper {
    background-color: #F5F5F7;
}

/* Toggle Styles */

#dashboard-page-wrapper {
    padding-left: 0;
    -webkit-transition: all 0.5s ease;
    -moz-transition: all 0.5s ease;
    -o-transition: all 0.5s ease;
    transition: all 0.5s ease;
}

#dashboard-page-wrapper.toggled {
    padding-left: 285px;
}

#sidebar-wrapper {
    z-index: 1000;
    position: fixed;
    left: 285px;
    width: 0;
    height: 100%;
    margin-left: -285px;
    overflow-y: auto;
    background: #000428;
    -webkit-transition: all 0.5s ease;
    -moz-transition: all 0.5s ease;
    -o-transition: all 0.5s ease;
    transition: all 0.5s ease;
}

#sidebar-wrapper .profile-avatar {
    width: 35px;
    height: 35px;
    display: inline-block;
    text-align: center;
}

#sidebar-wrapper .nav-link {
    color: #A9A9A9;
}

#sidebar-wrapper .nav-link [class*='icon-wrapper-'] svg {
    max-width: 26px;
    margin-right: 5px;
}

#sidebar-wrapper .nav-link.active {
    color: #fff;
    font-weight: 600;
}

#sidebar-wrapper .nav-link:not(.active) .icon-wrapper-active {
    display: none
}

#sidebar-wrapper .nav-link.active .icon-wrapper-inactive {
    display: none
}

#sidebar-wrapper .language * {
    font-size: 10px;
    color: #838383;
}

#sidebar-wrapper .copyright-text {
    font-size: 10px;
    color: #838383;
}

#dashboard-page-wrapper.toggled #sidebar-wrapper {
    width: 285px;
}

#page-content-wrapper {
    width: 100%;
    position: absolute;
    padding: 15px;
    height: 100vh;
    overflow-y: auto;
    overflow-x: hidden;
}

#dashboard-page-wrapper.toggled #page-content-wrapper {
    position: absolute;
    margin-right: -285px;
}

/* Sidebar Styles */

.sidebar-nav {
    position: absolute;
    top: 0;
    width: 285px;
    margin: 0;
    padding: 0;
    list-style: none;
}

.sidebar-nav li {
    text-indent: 20px;
    line-height: 40px;
}

.sidebar-nav li a {
    display: block;
    text-decoration: none;
    color: #999999;
}

.sidebar-nav li a:hover {
    text-decoration: none;
    color: #fff;
    background: rgba(255, 255, 255, 0.2);
}

.sidebar-nav li a:active,
.sidebar-nav li a:focus {
    text-decoration: none;
}

.sidebar-nav>.sidebar-brand {
    height: 65px;
    font-size: 18px;
    line-height: 60px;
}

.sidebar-nav>.sidebar-brand a {
    color: #999999;
}

.sidebar-nav>.sidebar-brand a:hover {
    color: #fff;
    background: none;
}

#dashboard-page-wrapper .page-content-wrapper .heading-icon {
    width: 45px;
    height: 45px;
    display: inline-block;
}

#dashboard-page-wrapper .page-content-wrapper .card-text small {
    z-index: 1;
    padding: 2px;
    display: inline;
    position: inherit;
}

#dashboard-page-wrapper .page-content-wrapper .card-text .lead-line {
    position: relative;
}

#dashboard-page-wrapper .page-content-wrapper .card-text .lead-line:after {
    position: absolute;
    content: '';
    right: 0;
    top: -6px;
    width: 100%;
    border-bottom: 1px dotted #151515;
    z-index: 0;
}

#dashboard-page-wrapper .page-content-wrapper .link-badge {
    width: 14px;
    height: 14px;
}

#dashboard-page-wrapper .page-content-wrapper .download-mobile-img {
    margin-top: -30px;
}

#dashboard-page-wrapper .page-content-wrapper .device-slider-img {
    min-height: 156px;
}

#dashboard-page-wrapper .page-content-wrapper .video-tutorials-slider-img {
    min-height: 136px;
    height: 136px;
    object-fit: cover;
}

#dashboard-page-wrapper .page-content-wrapper .video-tutorials-slider-img+.card-img-overlay {
    max-height: 136px;
}

#dashboard-page-wrapper .page-content-wrapper .lisence-detail-img {
    max-height: 205px;
}

#dashboard-page-wrapper .page-content-wrapper #my-great-dropzone {
    border: 2px dashed var(--bs-info);
}

#dashboard-page-wrapper .page-content-wrapper #previews {
    max-height: 500px;
    overflow-y: auto;
}

#dashboard-page-wrapper .page-content-wrapper .remove-icon-dropzone {
    width: 25px;
    height: 25px;
}

#dashboard-page-wrapper .page-content-wrapper .billing-history-table {
    overflow: auto;
    height: 300px;
}

#dashboard-page-wrapper .page-content-wrapper .billing-history-table thead {
    position: sticky;
    top: -20px;
    z-index: 1;
}

#dashboard-page-wrapper .page-content-wrapper .btn-check[aria-expanded="false"]+label {
    position: relative;
    transition: all ease-in-out 0.5s;
}

#dashboard-page-wrapper .page-content-wrapper .btn-check[aria-expanded="true"]+label {
    position: relative;
    transition: all ease-in-out 0.5s;
    border-radius: 5px 5px 0 0 !important;
}

#dashboard-page-wrapper .page-content-wrapper .btn-check[aria-expanded="true"]+label:after {
    position: absolute;
    content: '';
    top: 0;
    left: 0;
    height: 4px;
    width: 100%;
    background-color: var(--bs-primary) !important;
    border-radius: 5px 5px 0 0;
    transition: height ease-in-out 0.5s;
}

#dashboard-page-wrapper .page-content-wrapper .btn-check[aria-expanded="false"]+label:before {
    position: absolute;
    content: '';
    background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16' fill='%23052c65'%3e%3cpath fill-rule='evenodd' d='M1.646 4.646a.5.5 0 0 1 .708 0L8 10.293l5.646-5.647a.5.5 0 0 1 .708.708l-6 6a.5.5 0 0 1-.708 0l-6-6a.5.5 0 0 1 0-.708z'/%3e%3c/svg%3e");
    transform: rotate(0deg);
    right: 10px;
    top: 0;
    bottom: 0;
    height: 18px;
    width: 18px;
    margin: auto;
}

#dashboard-page-wrapper .page-content-wrapper .btn-check[aria-expanded="true"]+label:before {
    position: absolute;
    content: '';
    background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16' fill='%23052c65'%3e%3cpath fill-rule='evenodd' d='M1.646 4.646a.5.5 0 0 1 .708 0L8 10.293l5.646-5.647a.5.5 0 0 1 .708.708l-6 6a.5.5 0 0 1-.708 0l-6-6a.5.5 0 0 1 0-.708z'/%3e%3c/svg%3e");
    transform: rotate(-180deg);
    right: 10px;
    top: 0;
    bottom: 0;
    height: 18px;
    width: 18px;
    margin: auto;
}

.tagify__tag>div>* {
    font-size: 12px;
    color: var(--bs-secondary);
}

.tag-avatar {
    width: 30px;
    height: 30px;
    text-align: center;
    line-height: 30px;
    text-transform: uppercase;
    color: var(--bs-white) !important;
}

.tagify__tag>div {
    background-color: transparent;
    border-radius: 50px;
    padding: 2px;
}

.tagify__tag>div::before {
    border-radius: 50px;
    border: 1px solid var(--bs-gray-600);
    box-shadow: 0 0 0 var(--tag-inset-shadow-size) var(--bs-white) inset;
}

.sliderContainer {
    position: relative;
}

.sliderMyDevices .slick-track {
    text-align: start;
    margin-left: 0;
    margin-right: 0;
}

.slick-slide {
    min-height: 280px;
}

.slick-prev {
    left: 10px !important;
    z-index: 2;
}

.slick-next {
    right: 20px !important;
    z-index: 2;
}

.slick-prev:before,
.slick-next:before {
    font-size: 30px !important;
    color: var(--bs-border-color-translucent) !important;
}

.slick-dots {
    bottom: -30px;
}

.progressBarContainer {
    position: absolute;
    bottom: 20px;
    left: 0;
    right: 0;
    margin: auto;
}

.progressBarContainer div {
    display: block;
    width: 30%;
    padding: 0;
    cursor: pointer;
    margin-right: 5%;
    float: left;
    color: white;
}

.progressBarContainer div:last-child {
    margin-right: 0;
}

.progressBarContainer div span.progressBar {
    width: 100%;
    height: 6px;
    background-color: #B6B6B6;
    display: block;
    border-radius: 20px;
    margin: auto;
}

.progressBarContainer div span.progressBar .inProgress {
    background-color: #2A89E1;
    width: 0%;
    height: 6px;
    border-radius: 20px;
}

/* Flip Card */
.filp-card-wrappper .card {
    margin: 10px 10px;
}

.filp-card-wrappper input[type='checkbox'] {
    display: none;
}

/* Flip Cards CSS */
.filp-card-wrappper .card-container {
    display: grid;
    perspective: 700px;
}

.filp-card-wrappper .card-flip {
    display: grid;
    grid-template: 1fr / 1fr;
    grid-template-areas: "frontAndBack";
    transform-style: preserve-3d;
    transition: all 0.7s ease;
}

.filp-card-wrappper .card-flip div {
    backface-visibility: hidden;
    transform-style: preserve-3d;
}

.filp-card-wrappper .front {
    grid-area: frontAndBack;
    background-image: url('../img/features/flip-card-bg.jpg');
    background-size: cover;
    background-repeat: no-repeat;
}

.filp-card-wrappper .back {
    grid-area: frontAndBack;
    transform: rotateY(-180deg);
    background-image: url('../img/features/flip-card-bg-2.jpg');
    background-size: cover;
    background-repeat: no-repeat;
}

.filp-card-wrappper input[type='checkbox']:checked+.card-container .card-flip {
    transform: rotateY(180deg);
}

.filp-card-wrappper .filp-card-img {
    max-height: 100px;
    max-width: 110px;
}

#dashboard-page-wrapper .page-content-wrapper .small-text {
    font-size: small;
}

#dashboard-page-wrapper .page-content-wrapper .contact-support-img {
    max-width: 61px;
    max-height: 50px;
}

#dashboard-page-wrapper .page-content-wrapper .content-account-settings .nav-tabs .nav-item.show .nav-link,
#dashboard-page-wrapper .page-content-wrapper .content-account-settings .nav-tabs .nav-link {
    background-color: transparent !important;
    color: var(--bs-dark);
}

#dashboard-page-wrapper .page-content-wrapper .content-account-settings .nav-tabs .nav-item.show .nav-link.active,
#dashboard-page-wrapper .page-content-wrapper .content-account-settings .nav-tabs .nav-link.active {
    background-color: transparent !important;
    color: var(--bs-primary);
    border: none;
    position: relative;
}

#dashboard-page-wrapper .page-content-wrapper .content-account-settings .nav-tabs .nav-item.show .nav-link.active:after,
#dashboard-page-wrapper .page-content-wrapper .content-account-settings .nav-tabs .nav-link.active:after {
    position: absolute;
    content: '';
    height: 3px;
    width: 100%;
    left: 0;
    right: 0;
    bottom: -1px;
    background-color: var(--bs-primary);
}

#dashboard-page-wrapper .page-content-wrapper .content-account-settings .form-check-input {
    visibility: hidden;
}

#dashboard-page-wrapper .page-content-wrapper .content-account-settings .form-check-input:checked {
    visibility: visible;
}

.modal-content .help-block-inline {
    right: 10px !important;
    line-height: 42px !important;
}

.switchToggle input[type=checkbox] {
    height: 0;
    width: 0;
    visibility: hidden;
    position: absolute;
}

.switchToggle label {
    font-size: 14px;
    cursor: pointer;
    text-indent: -9999px;
    width: 100px;
    max-width: 100px;
    height: 30px;
    background: #d1d1d1;
    display: block;
    border-radius: 10px;
    position: relative;
}

.switchToggle label:after {
        box-shadow: 0 0 8px rgba(0, 0, 0, 0.068);
        content: '';
        position: absolute;
        top: 2px;
        left: 2px;
        width: 26px;
        height: 26px;
        background: #fff;
        border-radius: 10px;
        transition: 0.2s;
    }

.switchToggle input:checked+label,
.switchToggle input:checked+input+label {
    background: var(--bs-primary);
}

.switchToggle input+label:before,
.switchToggle input+input+label:before {
    box-shadow: 0 0 8px rgba(0, 0, 0, 0.068);
    content: 'Disable';
    position: absolute;
    top: 5px;
    left: 35px;
    width: 26px;
    height: 26px;
    border-radius: 10px;
    transition: 0.2s;
    text-indent: 0;
    color: #fff;
}

.switchToggle input:checked+label:before,
.switchToggle input:checked+input+label:before {
    content: 'Enable';
    position: absolute;
    top: 5px;
    left: 10px;
    width: 26px;
    height: 26px;
    border-radius: 90px;
    transition: 0.2s;
    text-indent: 0;
    color: #fff;
}

.switchToggle input:checked+label:after,
.switchToggle input:checked+input+label:after {
    left: calc(100% - 2px);
    transform: translateX(-100%);
}

.switchToggle label:active:after {
    width: 60px;
}

.toggle-switchArea {
    margin: 10px 0 10px 0;
}

/* Spinner UI */
:root {
    --hue: 223;
    --bg: hsl(var(--hue), 50%, 55%);
    --fg: hsl(var(--hue), 50%, 5%);
}

main {
    padding: 1.5em 0;
    overflow: hidden!important;
}

main::after {
    position: absolute;
    content: '';
    background-color: rgba(22, 22, 22, 0.75);
    top: 0;
    bottom: 0;
    height: 100%;
    width: 100%;
    z-index: 1080;
    overflow: hidden!important;
}

.lp {
    width: 6em;
    height: 6em;
    top: 0;
    bottom: 0;
    left: 0;
    right: 0;
    margin: auto;
    position: absolute;
    z-index: 9999999999999!important;
    overflow: hidden!important;
}

.lp__drops,
.lp__fall-line,
.lp__worm {
    animation-duration: 4s;
    animation-iteration-count: infinite;
    transform-origin: 64px 64px;
}

.lp__drops {
    animation-name: drops;
    animation-timing-function: ease-in-out;
    stroke-dasharray: 22 307.85 22;
    visibility: hidden;
    transform: rotate(90deg);
}

.lp__fall-line {
    animation-name: fallLine1;
    animation-timing-function: ease-in;
    stroke-dasharray: 1 112;
    stroke-dashoffset: 114;
}

.lp__fall-line--delay1 {
    animation-name: fallLine2;
}

.lp__fall-line--delay2 {
    animation-name: fallLine3;
}

.lp__fall-line--delay3 {
    animation-name: fallLine4;
}

.lp__fall-line--delay4 {
    animation-name: fallLine5;
}

.lp__ring {
    stroke: hsla(var(--hue), 90%, 5%, 0.1);
    transition: stroke 0.3s;
}

.lp__worm {
    animation-name: worm;
    stroke-dasharray: 43.98 307.87;
    stroke-dashoffset: -131.94;
    transform: rotate(-90deg);
}

/* Adjust the max-width for your mobile devices video Tutorials Container*/
@media screen and (max-width: 767px) { 
    .videoTutorialsContainer {
        overflow-x: auto;
        scrollbar-width: thin; 
        scrollbar-color: #888888 #f5f5f5; 
        white-space: nowrap;
        padding-bottom: 15px; 
    }

    .sliderVideoTutorials {
        width: 1023px; 
    }
}

@media (max-width: 991px) {
    .card-title-video-Tutorials {
        font-size: 1rem;
    }
}

@media (max-width: 768px) {
    .card-title-video-Tutorials {
        font-size: 1rem; /* Adjust font size for smaller screens */
    }
}

@media (max-width: 576px) {
    .card-title-video-Tutorials {
        font-size: 0.8rem; /* Adjust font size for even smaller screens */
    }
}

/* Dark theme */
@media (prefers-color-scheme: dark) {
    :root {
        --bg: hsl(var(--hue), 90%, 5%);
        --fg: hsl(var(--hue), 90%, 95%);
    }

    .lp__ring {
        stroke: hsla(var(--hue), 90%, 95%, 0.1);
    }
}

/* Animtions */
@keyframes drops {
    from {
        animation-timing-function: steps(1, end);
        stroke-dasharray: 0 351.85 0;
        visibility: hidden;
    }

    25% {
        animation-timing-function: ease-in-out;
        stroke-dasharray: 0 351.85 0;
        visibility: visible;
    }

    26% {
        stroke-dasharray: 4 343.85 4;
    }

    27% {
        stroke-dasharray: 8 335.85 8
    }

    28% {
        stroke-dasharray: 12 327.85 12;
    }

    29% {
        animation-timing-function: ease-in;
        stroke-dasharray: 17 317.85 17;
    }

    32% {
        animation-timing-function: ease-out;
        stroke-dasharray: 25 301.85 25;
    }

    35%,
    47.5% {
        animation-timing-function: linear;
        stroke-dasharray: 22 307.85 22;
        visibility: visible;
    }

    50% {
        animation-timing-function: steps(1, end);
        stroke-dasharray: 0 307.85 43.98;
        visibility: hidden;
    }

    75% {
        animation-timing-function: ease-in-out;
        stroke-dasharray: 0 351.85 0;
        visibility: visible;
    }

    76% {
        stroke-dasharray: 4 343.85 4;
    }

    77% {
        stroke-dasharray: 8 335.85 8
    }

    78% {
        stroke-dasharray: 12 327.85 12;
    }

    79% {
        animation-timing-function: ease-in;
        stroke-dasharray: 17 317.85 17;
    }

    82% {
        animation-timing-function: ease-out;
        stroke-dasharray: 25 301.85 25;
    }

    85%,
    97.5% {
        animation-timing-function: linear;
        stroke-dasharray: 22 307.85 22;
        visibility: visible;
    }

    to {
        stroke-dasharray: 43.98 307.85 0;
        visibility: hidden;
    }
}

@keyframes fallLine1 {

    from,
    15% {
        stroke-dashoffset: 114;
    }

    25%,
    65% {
        stroke-dashoffset: 1;
    }

    75%,
    to {
        stroke-dashoffset: -112;
    }
}

@keyframes fallLine2 {

    from,
    16% {
        stroke-dashoffset: 114;
    }

    26%,
    66% {
        stroke-dashoffset: 1;
    }

    76%,
    to {
        stroke-dashoffset: -112;
    }
}

@keyframes fallLine3 {

    from,
    17% {
        stroke-dashoffset: 114;
    }

    27%,
    67% {
        stroke-dashoffset: 1;
    }

    77%,
    to {
        stroke-dashoffset: -112;
    }
}

@keyframes fallLine4 {

    from,
    18% {
        stroke-dashoffset: 114;
    }

    28%,
    68% {
        stroke-dashoffset: 1;
    }

    78%,
    to {
        stroke-dashoffset: -112;
    }
}

@keyframes fallLine5 {

    from,
    19% {
        stroke-dashoffset: 114;
    }

    29%,
    69% {
        stroke-dashoffset: 1;
    }

    79%,
    to {
        stroke-dashoffset: -112;
    }
}

@keyframes worm {
    from {
        animation-timing-function: ease-out;
        stroke-dasharray: 87.96 307.87;
        stroke-dashoffset: -131.94;
    }

    25% {
        animation-timing-function: steps(1);
        stroke-dasharray: 87.96 307.87;
        stroke-dashoffset: -307.86;
    }

    25.01% {
        animation-timing-function: ease-in;
        stroke-dasharray: 43.98 307.87;
        stroke-dashoffset: -307.86;
    }

    50% {
        animation-timing-function: steps(1);
        stroke-dasharray: 43.98 307.87;
        stroke-dashoffset: -175.92;
    }

    50.01% {
        animation-timing-function: ease-out;
        stroke-dasharray: 87.96 307.87;
        stroke-dashoffset: -131.94;
    }

    75% {
        animation-timing-function: steps(1);
        stroke-dasharray: 87.96 307.87;
        stroke-dashoffset: 43.98;
    }

    75.01% {
        animation-timing-function: ease-in;
        stroke-dasharray: 43.98 307.87;
        stroke-dashoffset: 0;
    }

    to {
        stroke-dasharray: 43.98 307.87;
        stroke-dashoffset: -131.94;
    }
}

/* Spinner UI End */

@media(min-width:768px) {
    #dashboard-page-wrapper {
        padding-left: 285px;
    }

    #dashboard-page-wrapper.toggled {
        padding-left: 0;
    }

    #sidebar-wrapper {
        width: 285px;
    }

    #dashboard-page-wrapper.toggled #sidebar-wrapper {
        width: 0;
    }

    #page-content-wrapper {
        padding: 20px;
        position: relative;
    }

    #dashboard-page-wrapper.toggled #page-content-wrapper {
        position: relative;
        margin-right: 0;
    }

    .profile-full-name {
        max-width: 100px;
        display: inline-block;
        vertical-align: -10px;
        /*white-space: pre;*/
    }
}


@media (max-width: 1440px) and (max-height: 900px) {
    .login-page-wrapper .login-right-panel {
        max-width: 45%;
        margin: auto;
    }
}

@media (max-width: 1366px) and (max-height: 768px) {
    .login-page-wrapper .login-left-panel {
        height: 100vh !important;
    }

    .login-page-wrapper .login-right-panel {
        padding: 0px !important;
        max-width: 45%;
        margin: auto;
    }

}

@media screen and (max-width: 1280px) {
    .login-page-wrapper .login-left-panel {
        height: auto !important;
    }

    .login-right-panel {
        padding: 20px !important;
    }
}

@media (max-width: 1280px) and (max-height: 950px) {
    .login-page-wrapper .login-left-panel {
        height: 100vh !important;
    }

    .login-page-wrapper .login-right-panel {
        padding: 0px !important;
        max-width: 40%;
        margin: auto;
    }
}

@media screen and (max-width: 990px) {
    .login-page-wrapper .login-right-panel {
        padding: 0px !important;
        max-width: 100%;
    }
}

@media (max-width: 766px) {
    .privacyModalJPNavBar {
        z-index: 100;
        position: absolute;
        left: 300px;
        width: 98%;
        max-width: 100% !important;
        height: 100%;
        margin-left: -293px;
        overflow-y: auto;
        background-color: WHITE;
        -moz-transition: all 0.5s ease;
        -o-transition: all 0.5s ease;
        transition: all 0.5s ease;
    }

    #privacyModalJP .modal-dialog {
        max-width: 95% !important;
        margin: 10px auto !important;       
    }

    .privacyModalJPNavBar {
        display: none;
    }

    .privacyModalJPNavBar.show {
        display: block;
    }
    
}

.password-input-container {
    position: relative;
}

.password-toggle {
    position: absolute;
    top: 50%;
    right: 10px;
    transform: translateY(-50%);
    cursor: pointer;
    z-index: 1;
}

    .password-toggle i {
        font-size: 1.25rem;
    }


/* Activity Log CSS */
.log-tab-wrapper .nav-tabs .nav-link {
    color: var(--bs-secondary);
}

    .log-tab-wrapper .nav-tabs .nav-item.show .nav-link,
    .log-tab-wrapper .nav-tabs .nav-link.active {
        position: relative;
        color: var(--bs-primary);
    }

        .log-tab-wrapper .nav-tabs .nav-item.show .nav-link:after,
        .log-tab-wrapper .nav-tabs .nav-link.active:after {
            position: absolute;
            width: 100%;
            height: 4px;
            background-color: var(--bs-primary);
            content: '';
            left: 0;
            bottom: -1px;
        }

.log-tab-wrapper .table-light th {
    background-color: var(--bs-white) !important;
}

.log-table .bg-success {
    background-color: #E8F9DF !important;
    color: #71DD37 !important;
}

.log-table .bg-secondary {
    background-color: #FCDDD8 !important;
    color: #71DD37 !important;
}

.table-footer {
    background-color: #E8E8E8;
}

/* Notification UIs */
#box {
    top: 50px !important;
    left: 400px !important;
    z-index: 999999999999 !important;
    overflow: visible;
    content: '';
    position: fixed !important;
    background-color: var(--bs-white) !important;
    width: 400px;
    max-height: 50%;
    overflow: scroll;
}
    #box.no-scroll,
    .toast-body.no-scroll {
        overflow: hidden;
    }


/* Sweet Alert buttons */
.swal2-styled.swal2-confirm,
.swal2-styled.swal2-cancel {
    min-width: 7.5rem !important;
    height: 2.5rem !important;
    padding: 0 1.25rem !important;
    font-size: 1rem !important;
    align-items: center !important;
    justify-content: center !important;
    border-radius: 1em !important;
    box-sizing: border-box !important;
    transition: all 0.2s ease-in-out !important;
}

/* Sweet Alert Confirm button styling */
.swal2-styled.swal2-confirm {
    background-color: #28A5FF !important;
    border-color: #28A5FF !important;
    color: white;
}

/* Sweet Alert Cancel button styling */
.swal2-styled.swal2-cancel {
    border: 0.0625rem solid #6e7d88 !important;
    background: initial !important;
    background-color: #718695 !important;
    color: #fff;
    cursor: pointer !important;
}



@media (max-width: 767px) {
    .notification-panel {
        display: inline-block !important;
    }

    #box {
        top: 78px !important;
        left: 0 !important;
        transform: none !important;
        width: 100% !important;
        max-width: none !important;
        max-height: 70% !important;
    }
}

@media (max-width: 1440px) and (max-height: 900px) {
    .login-page-wrapper .login-right-panel {
        max-width: 45%;
        margin: auto;
    }
}

@media (max-width: 1366px) and (max-height: 768px) {
    .login-page-wrapper .login-left-panel {
        height: 100vh !important;
    }

    .login-page-wrapper .login-right-panel {
        padding: 0px !important;
        max-width: 45%;
        margin: auto;
    }
}

@media screen and (max-width: 1280px) {
    .login-page-wrapper .login-left-panel {
        height: auto !important;
    }

    .login-right-panel {
        padding: 20px !important;
    }
}

@media (max-width: 1280px) and (max-height: 950px) {
    .login-page-wrapper .login-left-panel {
        height: 100vh !important;
    }

    .login-page-wrapper .login-right-panel {
        padding: 0px !important;
        max-width: 40%;
        margin: auto;
    }
}

@media screen and (max-width: 990px) {
    .login-page-wrapper .login-right-panel {
        padding: 0px !important;
        max-width: 100%;
    }
}

.lang-jp * {
    /*font-optical-sizing: auto;*/
    /*font-size: 0.85rem !important;*/
    /*font-size: 0.9rem !important;*/
    /*font-family: 'Noto Sans JP', sans-serif !important;*/
}


@media screen and (max-width: 480px) {
    #sidebar-wrapper{
        width: 100%;
    }
}

@media (min-width: 1200px) and (max-width: 1280px) {
    .cus-css-usr-mail-lt, .cus-css-usr-mail-rt {
        width: 100% !important;
    }
}

@media (max-width: 576px) {
    #verifyEmail {
        font-size: 12px;
    }
}

/* Media query for mobile devices */
@media (max-width: 767px) {
 /*    Adjust width for smaller screens */
    .slick-slide {
        width: 320px !important;
    }

    .license-Details {
        width: 320px !important;
    }

    .license-Details-Btn {
        width: 320px !important;
    }

    .license-Details-lbl {
        width: 320px !important;
    }

    /*.lang-jp * {
        font-optical-sizing: auto;
        font-size: 0.85rem !important;
    }*/
}

@media only screen and (max-width: 767px) {
    .scroll-container {
        overflow-x: auto;
    }
}

.center-content {
    display: flex;
    justify-content: center;
    align-items: center;
    height: 100%; /* Adjust this value as needed */
    padding-left: 7px;
}

/* Small devices (tablets, 768px and up) */
@media (min-width: 768px) {
    .feature-card {
        height: 292px !important;
    }

    .feature-firstrow {
        height: 456px !important;
    }
}
/* Medium devices (desktops, 992px and up) */
@media (min-width: 992px) {
    .feature-card {
        height: 296px !important;
    }

    .feature-firstrow {
        height: 458px !important;
    }
}
/* Large devices (large desktops, 1200px and up) */
@media (min-width: 1200px) {
    .feature-card {
        height: 300px !important;
    }

    .feature-firstrow {
        height: 460px !important;
    }
}