/*--------------------------------------------------------------
# General
--------------------------------------------------------------*/

@font-face {
    font-family: 'Jost-Light';
    src: url('../fonts/Jost-Light.ttf') format('truetype');
    font-style: normal;
    font-display: swap;
}

@font-face {
    font-family: 'Jost-Regular';
    src: url('../fonts/Jost-Regular.ttf') format('truetype');
    font-style: normal;
    font-display: swap;
}

@font-face {
    font-family: 'Jost-Medium';
    src: url('../fonts/Jost-Medium.ttf') format('truetype');
    font-style: normal;
    font-display: swap;
}

@font-face {
    font-family: 'Jost-Bold';
    src: url('../fonts/Jost-Bold.ttf') format('truetype');
    font-style: normal;
    font-display: swap;
}

@font-face {
    font-family: 'Jost-SemiBold';
    src: url('../fonts/Jost-SemiBold.ttf') format('truetype');
    font-style: normal;
    font-display: swap;
}

* {
    list-style: none;
    margin: 0;
    padding: 0;
    -webkit-box-sizing: border-box;
    -moz-box-sizing: border-box;
    box-sizing: border-box;
}

body {
    font-family: 'Jost-Regular', sans-serif;
    height: 100%;
    margin: 0;
    /*background-color: #0C0C1B;*/
    background-color: #F0F5F7;
    color: rgb(255, 255, 255);
}

body.bg-timer { background-color:#0d141d }

button,
a,
input,
textarea {
    box-shadow: none !important;
    outline: none !important;
}

::selection {
    background: #a4a4a4;
    color: #fff;
}

::placeholder {
    color:#a4a4a4 !important;
    /*color: rgba(255, 255, 255, 0.57) !important;*/
}

img {
    padding: 0;
    margin: 0;
    line-height: 0px;
}

a {
    color: #4f46e5;
    text-decoration: none;
    transition: all 0.3s ease-in 0s;
    cursor: pointer;
}

a:hover,
a:focus,
a:active {
    /*color: #007bff;*/
    color: #0146A6;
    text-decoration: none;
    outline: none;
}

h1,
h2,
h3,
h4,
h5,
h6 {
    margin: 0;
    padding: 0 0 10px;
    letter-spacing: 0;
    line-height: normal;
    text-transform: none;
    color: #fff;
    font-family: 'Jost-Medium';
}

h1 {
    font-size: 60px;
    line-height: 70px;
}

h2 {
    font-size: 44px;
    line-height: 52px;
}

h3 {
    font-size: 22px;
    line-height: 30px;
}

h4 {
    font-size: 20px;
    line-height: 28px;
}

b {
    color: #252525;
}

ul {
    padding-left: 20px;
}

ol {
    list-style: inside !important;
}

li {
    display: list-item;
    padding: 0;
    margin: 0;
    border: 0;
    list-style: none;
}

ul.list li { list-style:disc }

ol li {
    list-style: inside !important;
}

select,
input,
button,
a {
    outline: none !important;
    box-shadow: none !important;
}

select.form-control {
    appearance: none;
    -webkit-appearance: none;
    -moz-appearance: none;
    background-image: url('../images/downArrow.png');
    background-repeat: no-repeat;
    background-position: right 12px center;
    background-size: 16px;
    border-radius: calc(0.75rem - 2px);
    border: solid 1px #e2e8f0;
    font-size: 14px;
    height: 2.5rem !important;
}

label {
    line-height: 1;
    font-size: .875rem;
    margin-bottom: 12px;
    font-family: 'Jost-Medium';
    color: #020817;
}


/*--------------------------------------------------------------
# Disable AOS delay on mobile
--------------------------------------------------------------*/

@media screen and (max-width: 575px) {
    .how-used-card-img-wrapper img{
        border-radius: 10px 10px 0px 0px !important;
    }
    .how-used-card {
        border-radius:0px 0px 10px 10px !important;
    }
}

@media screen and (max-width: 768px) {
    [data-aos-delay] {
        transition-delay: 0s !important;
    }
}

@media screen and (max-width: 1120px) {
    .btn-soft-primary:focus, .btn-soft-primary:active, .btn-soft-primary:hover {
        color: rgb(25, 103, 210) !important;
        background-color: rgb(226, 234, 248) !important;
    }
}

main header {
    /*border-bottom: solid 1px rgba(255, 255, 255, 0.08);*/
    border-bottom: 1px solid #d8e5e9;
}

.card {
    border-radius: 10px;
    /*background-color: #FFFFFF0D !important;*/
    background-color:#ffffff;
    /*border: 1px solid rgba(255, 255, 255, 0.08);*/
    /*border: 1px solid rgba(25, 103, 210, 0.05);*/
    border:1px solid #d8e5e9;
}

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

.time-btn-group .btn-soft-primary { border-radius:20px;border:1px solid rgb(25 103 210 / 50%); }

.btn.btn-muted {
    /*background: rgba(255, 255, 255, 0.05);*/
    background-color: rgba(25, 103, 210, 0.05);
    border: 1px solid rgba(255, 255, 255, 0.08);
    /*border: 1px solid;border-image-slice:1;border-image-source: linear-gradient(180deg, rgba(255, 255, 255, 0.1) 0%, rgba(255, 255, 255, 0.08) 100%);*/
    border-radius: 20px;
    font-size: 14px;
    padding: 8px 16px;
    /*color: rgba(250, 250, 250, 1);*/
    color: #1967D2;
    font-weight: 500;
    /*line-height: 16.94px;*/
    text-underline-position: from-font;
    text-decoration-skip-ink: none;
}

.card.section.dashboard {
    border-radius: 0px;
    border-top: none;
}

/* modal css start */

#shareModal .modal-content,
#contentModal .modal-content,
#timerSettingModal .modal-content,
#renameModal .modal-content,
#addLabelModal .modal-content {
    /*background-color: #0C0C1B;*/
    background-color: #fff;
}
#renameModal .modal-content #rename-device {
    border: none !important;
    border-top-left-radius: 20px;
    border-bottom-left-radius: 20px;
    background-color: rgba(255, 255, 255, 0.05);
    color: rgba(255, 255, 255, 0.57) !important;
}

#shareModal .modal-content #share-url {
    border: none !important;
    border-top-left-radius: 20px;
    border-bottom-left-radius: 20px;
    /*background-color: rgba(255, 255, 255, 0.05);
    color: rgba(255, 255, 255, 0.57) !important;*/
    color:#202124;
    background-color: rgba(25, 103, 210, 0.05);
}

#shareModal .modal-content .input-group-append .btn.btn-muted {
    border-top-left-radius: 0px;
    border-bottom-left-radius: 0px;
    border: none;
}

/*input#minutesInput{
    border: 1px solid rgba(255, 255, 255, 0.08);
    border-radius: 20px;
    background-color: rgba(255, 255, 255, 0.05);
    color: rgba(255, 255, 255, 0.57) !important;
}*/
/*
input#editNameInput{
     background-color: transparent;
    border:none;
    background: linear-gradient(90deg, #513DA1 0%, #880AEB 0.01%, #B34B8A 100%);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;
    font-size: 28px;
    line-height: 33.89px;
    text-align: left;
    text-underline-position: from-font;
    text-decoration-skip-ink: none;
    font-weight: 700;
    width: fit-content;
}*/

/*input#editNameInput.active{
    border: 1px solid rgba(255, 255, 255, 0.08);
    border-radius: 20px;
    background-color: rgba(255, 255, 255, 0.05);
    color: rgba(255, 255, 255, 0.57) !important;
    font-size: 1rem;
    font-weight: 400;
    line-height: 1.5;
    background-clip: inherit;
    background: none;
    -webkit-text-fill-color: unset;
}
*/

/* modal css over */

.form-control.deviceInput {
    border: none !important;
    border-top-left-radius: 20px;
    border-bottom-left-radius: 20px;
    /*background-color: rgba(255, 255, 255, 0.05);
    color: rgba(255, 255, 255, 0.57) !important;*/
    background-color: rgba(25, 103, 210, 0.05);
    /*color:#000;*/
    color:#fff;
}

.form-control.deviceInput~.input-group-append .btn.btn-muted {
    border-top-left-radius: 0px;
    border-bottom-left-radius: 0px;
    border: none;
}


/* controller page css start */

#timer-section {
    display: flex;
    flex-direction: column;
    gap: 16px;
/*    max-height: 34vh;*/
/*    max-height: 25vh;*/
    overflow-y: auto;
    padding-right: 16px;
    max-height: 25vh; /* Initial maximum height for smaller screens */

/*    max-height: clamp(300px, 50vh + 0.2 * 1920px, 555px);*/
}

@media screen and (min-width: 1024px) and (max-width: 1351px) {
    #timer-section { max-height: 18vh; }
}

@media (min-width: 1540px) {
    #timer-section { max-height: 52vh; }
}


/*.timer-block {
    border-radius: 10px !important;
    border: 1px solid rgba(255, 255, 255, 0.08) !important;
    background: rgba(255, 255, 255, 0.05);
    border-image-source: linear-gradient(180deg, rgba(255, 255, 255, 0.1) 0%, rgba(255, 255, 255, 0.08) 100%); 
    &:last-child {
        background: linear-gradient(to right, rgba(23, 62, 173, 1), rgba(29, 78, 216, 1));
        border: none !important;
    }
} */

.timer-default {
    color: #ffffff !important;
    /*color: #000 !important;*/
}

.timer-warning {
    color: orange !important; /* Yellow */
}

.timer-danger {
    color: red !important; /* Red */
}


.timer-block {
    position: relative;
    border-radius: 10px !important;
    border: 1px solid rgba(255, 255, 255, 0.08) !important;
    /*background: rgba(255, 255, 255, 0.05);*/
    background: linear-gradient(180deg, rgba(25, 103, 210, 0.1) 0%, rgba(25, 103, 210, 0.05) 100%);
    border-image-source: linear-gradient(180deg, rgba(255, 255, 255, 0.1) 0%, rgba(255, 255, 255, 0.08) 100%);
}

.timer-block:last-child::before {
    content: '';
    display: block;
    /* background-color: #173EAD;
    border: solid 1px #173EAD; */
    width: 50%;
    height: 100%;
    position: absolute;
    z-index: -1;
    border-top-left-radius: 10px;
    inset: 0px;
    border-bottom-left-radius: 10px;
}

.timer-block:last-child::after {
    content: '';
    display: block;
    /*background-color: #1D4ED8;
    border: solid 1px #1D4ED8; */
    width: 50%;
    top: 0px;
    right: 0px;
    height: 100%;
    position: absolute;
    z-index: -1;
    border-top-right-radius: 10px;
    border-bottom-right-radius: 10px;
}

.bg-deep-blue {
    background-color: #A4C5F4;
    border: solid 1px #A4C5F4;
}


/*.timer-block:last-child span,
.timer-block:last-child input.timer-minutes {
    color: rgba(255, 255, 255, 0.57) !important;
}*/

.timer-block input.timer-minutes, .timer-block input.timer-seconds {
    border-bottom: dashed 1px rgba(255, 255, 255, 0.57) !important;
    border: none;
    border-radius: 0px;
}

.timer-block.bg-deep-blue span.timerNum,
.timer-block.bg-deep-blue input.timer-minutes,
.timer-block.bg-deep-blue  span.colonSign,
.timer-block.bg-deep-blue input.timer-seconds,
.timer-block.bg-deep-blue  i.fa-eye-slash,
.timer-block.bg-deep-blue input.timer-name { color:#fff !important; }

/* Hide arrows in WebKit-based browsers (Chrome, Safari, Edge) */
input[type="number"]::-webkit-inner-spin-button,
input[type="number"]::-webkit-outer-spin-button { -webkit-appearance: none;margin: 0; }

/* Hide arrows in Firefox */
input[type="number"] { -moz-appearance: textfield; }

/*.timer-block.active {
    background:linear-gradient(to right, rgba(23, 62, 173, 1), rgba(29, 78, 216, 1));
}*/

#message-container .card { border:0px; }
#message-container .card .card-header { border-top-left-radius:10px;border-top-right-radius:10px; }
#message-container .card .card-footer { border-bottom-left-radius:10px;border-bottom-right-radius:10px; }

.message-button.show-message-btn,
.message-button.unshow-message-btn {
    display: flex;
    align-items: center;
    justify-content: center;
}

.dot.show-message-dot {
    display: inline-block;
    width: 8px;
    height: 8px;
    border-radius: 50%;
    background-color: rgb(255, 0, 0);
    /*margin-left: 10px;*/
}

.dot.unshow-message-dot {
    display: inline-block;
    width: 8px;
    height: 8px;
    border-radius: 50%;
    background-color: rgb(0, 255, 55);
    /*margin-left: 10px;*/
}

.section .dashboard h3 {
    position: absolute;
    top: 10px;
    left: 20px;
    margin: 0;
    color: white;
}

.message-button {
    position: relative;
    align-self: center;
}

.message-textarea {
    min-height: 120px !important;
    max-height: 130px;
    overflow-y: auto;
    /*font-size: 12px;*/
    font-size: 14px;
    font-weight: 500;
    /*line-height: 14.52px;*/
    text-underline-position: from-font;
    text-decoration-skip-ink: none;
    padding: 13px 14px 13px 14px;
    border-radius: 10px;
    background-color: rgb(240 245 247) !important;
    border: 1px solid;
    border-image-source: linear-gradient(180deg, rgba(255, 255, 255, 0.1) 0%, rgba(255, 255, 255, 0.08) 100%);
    color: #000 !important;
}


/*.message-textarea::placeholder {
    color: #fff !important;
}*/


/*.message-button {
    align-self: center;
}*/

p#message {
    max-height: 200px;
    overflow-y:auto;
    line-height: normal;
    overflow-x: hidden;
    padding-right: 12px;
    font-size: 20px;
}

#message::-webkit-scrollbar, #content-container::-webkit-scrollbar {
    width: 10px;
    height: 10px;
}

#message::-webkit-scrollbar-thumb, #content-container::-webkit-scrollbar-thumb {
    background-color: #1967d2;
    border-radius: 5px;
}

#message::-webkit-scrollbar-track, #content-container::-webkit-scrollbar-track {
    /*background-color: #ffffff0d;*/
    background-color:#0e1f35;
    border-radius: 5px;
}

input#minutesInput::placeholder {
    font-size: 14px;
}


/* controller page css over */


/* timer page css start */


/*#timer {
    height: 100vh;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-direction: column;
}*/

#timer {
    height: calc(100vh - 100px);
    color: white;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-direction: column;
}

#timer-time {
    font-size: clamp(128px, 10vw + 6rem, 272px);
    /*font-size: 17rem;*/
    line-height: 17rem;
    font-weight: bold;
}


/* timer page css over */


/* flash effect css code start */

.flash {
    animation: flashEffect 1s infinite;
}

@keyframes flashEffect {
    0%,
    100% {
        opacity: 1;
    }
    50% {
        opacity: 0;
    }
}


/* flash effect css code over */


/* timer output content container css code start */

#content-container {
    width: auto !important;
    max-width: 500px;
    height: 200px;
    max-height: 120px;
    overflow-y: auto;
    overflow-x: hidden;
    /*background-color: #FFFFFF0D !important;*/
    background-color:rgba(25, 103, 210, 0.05);
    /*color:#202124;*/
    color:#fff;
    padding: 10px;
    border-radius: 5px;
    border: 1px solid rgba(255, 255, 255, 0.08) !important;
    /*box-shadow: 0px 8px 18px 1px rgba(255, 255, 255, 0.1) inset;*/
    box-shadow: 0px 8px 18px 1px rgba(25, 103, 210, 0.1) inset;
}


/* custom scrollbar css code start */

::-webkit-scrollbar {
    width: 10px;
    height: 10px;
}

::-webkit-scrollbar-thumb {
    background-color: #D8E5E9;
    border-radius: 5px;
}

::-webkit-scrollbar-track {
    /*background-color: #ffffff0d;*/
    background-color: #F0F5F7;
    border-radius: 5px;
}


/* custom scrollbar css code over */


/*#content-container::-webkit-scrollbar {
    width: 10px;
    height: 10px;
}

#content-container::-webkit-scrollbar-thumb {
    background-color: rgba(255, 255, 255, 0.5);
    border-radius: 5px;
}

#content-container::-webkit-scrollbar-thumb:hover {
    background-color: green;
}

#content-container::-webkit-scrollbar-track {
    background-color: #ffffff0d;
    border-radius: 5px;
}*/

#content {
    color: white;
    font-size: 14px;
    line-height: 1.5;
    margin: 0;
    word-wrap: break-word;
}

button.js-edit-device-input {
    font-size: 13px;
}

span.verticale-flip-icon svg,
span.horizontal-flip-icon svg,
i.full-screen-icon {
    width: 100%;
    height: 100%;
}

span.verticale-flip-icon,
span.horizontal-flip-icon {
    width: 18px;
    height: auto;
    display: block;
}

span.horizontal-flip-icon {
    rotate: 90deg;
    display: block;
}


/* timer output content container css code over */


/* fontstyle css code start */

.boldTextIcon svg {
    display: block;
    width: 16px;
    height: 16px;
    /*color: #6c757d;*/
    color: #202124;
}

.uppercaseIcon svg {
    width: 18px;
    height: 18px;
    display: block;
    /*color: #6c757d;*/
    color: #202124;
}

.fontColorIcon svg {
    display: block;
    width: 16px;
    height: 16px;
    /*color: #6c757d;*/
    color: #202124;
}

.fontColorIcon svg::after {
    content: '';
    min-width: 100%;
    min-height: 100%;
    display: block;
    border: solid 3px red;
}


/* fontstyle css code over */


/* fontflash btn */


/* .fontflash.active {
    background-color:#198754;
} */


/* colorPicker input css code start */

input#colorPicker,
input#headingColorPicker {
    background-color: transparent;
    border: none !important;
    height: 4px;
    width: 50%;
    padding: 0px;
    margin: 0 auto;
    border-radius: 0px;
}


/* colorPicker input css code over */


/* focus-flash-blackout btn active state css code start */

.btn.btn-muted.blackout i,
.btn-muted.focusfont i {
    font-size: 12px;
}
.btn-soft-primary.blackout, .btn-soft-primary.focusfont, .btn-soft-primary.timeflash, .btn-soft-primary.fontflash { border:solid 1px transparent !important; }

.blackout.active,
.focusfont.active {
    color: #dc3545 !important;
    border:solid 1px #dc3545 !important;
    /*border-color: #dc3545 !important;*/
}

.timeflash.active,
.fontflash.active {
    color: #28a745 !important;
    border:solid 1px #28a745 !important;
    /*border-color: #28a745!important;*/
}

#boldBtn.active .boldTextIcon svg,
#uppercaseBtn.active .uppercaseIcon svg {
    color: rgb(25, 103, 210);
}


/* focus-flash-blackout btn active state css code over */

.timerPreviewDivision {
    border-radius: 20px !important;
    /*background: linear-gradient(180deg, rgba(255, 255, 255, 0.03) 0%, rgba(255, 255, 255, 0.018) 100%);*/
    background: linear-gradient(180deg, rgba(25, 103, 210, 0.1) 0%, rgba(25, 103, 210, 0.05) 100%);
    border: 0.5px solid rgba(255, 255, 255, 0.018) !important;
    border-image-source: linear-gradient(180deg, rgba(255, 255, 255, 0.11) 0%, rgba(255, 255, 255, 0) 100%);
    /*box-shadow: 0px 8px 18px 1px rgba(255, 255, 255, 0.1) inset;*/
    box-shadow: 0px 8px 18px 1px rgba(25, 103, 210, 0.1) inset;
}

.preview-wrapper h6 {
    font-family: Jost-Light;
    font-size: 12px;
    font-weight: 600;
    line-height: 12px;
    /*color: #fff !important;*/
    color: #1967D2 !important;
    letter-spacing: 1px;
}


/* preview small timer text css start */

.smallTimer {
    font-weight: 500;
    font-size: 18px;
    line-height: 21.78px;
    letter-spacing: 0;
    display: flex;
    align-items: center;
    justify-content: center;
}

.smallTimer:before {
    content: '';
    width: 6px;
    height: 6px;
    border-radius: 50%;
    background-color: #6c757d;
    display: inline-block;
    margin-right: 12px;
}


/* preview small timer text css over */

.timerView {
    height: 150px;
}

.timerView h2 {
    font-family: 'Jost-SemiBold';
    /*color: rgba(255, 255, 255, 1);*/
    color:#202124 !important;
    font-size: 100px;
    font-weight: 600;
    line-height: 100px;
    /*letter-spacing: 11px;*/
    text-underline-position: from-font;
    text-decoration-skip-ink: none;
}

.contentPreview {
    display: block;
    /*min-height: 20px;*/
}

.contentPreview *{
    /*display: block;*/
    margin-top: 8px;
    display: -webkit-box;
    -webkit-box-orient: vertical;
    -webkit-line-clamp: 3;
    overflow: hidden;
    text-overflow: ellipsis;
    max-height: 4.5em;
}

.contentPreview span {
    /*overflow: hidden;
    text-overflow: ellipsis;
    display: -webkit-box;*/
    line-height: 21px;
    /*max-height: 48px;
    -webkit-line-clamp: 1;
    -webkit-box-orient: vertical;*/
    font-size: 14px;
/*    color: #fff !important;*/
    color: #000 !important;
    margin-top:12px;
    display: block;
}

.preview-wrapper .new-tab-preview {
    visibility: hidden;
    opacity: 0;
    transition: 0.3s ease-in;
}

.preview-wrapper:hover .new-tab-preview {
    visibility: visible;
    opacity: 1;
}

.preview-wrapper .preViewTitle {
    font-family: 'Jost-Regular';
    font-weight: 500;
    font-size: 18px;
    line-height: 21.78px;
    /*letter-spacing: 0.5px;*/
    color: #1967d2;
}

.btn-muted.resume-timer i,
.btn-muted.pause-timer i {
    background: linear-gradient(90deg, #513DA1 0%, #880AEB 0.01%, #B34B8A 100%);
    background-clip: text;
    color: transparent;
}

body.blackoutapply {
    position: relative;
}

body.blackoutapply::before {
    content: '';
    position: absolute;
    width: 100%;
    height: 100%;
    z-index: 11111;
    pointer-events: none;
    background-color: #000
}



/* body.focusfontapply {
    position: relative;
}

body.focusfontapply::before {
    content: '';
    position: absolute;
    width: 100%;
    height: 100%;
    z-index: 11111;
    pointer-events: none;
    background-color: #000
} */

.focusfontapply-overlay {
    position: fixed;
    top: 0;
    left: 0;
    background-color: rgba(0, 0, 0, 1.0);
    width: 100%;
    height: 100%;
    z-index: 11111;
    display: flex;
    align-items: center;
    justify-content: center;
    pointer-events: none;
}

.focusfontapply-overlay .message-content {
    font-size: 24px;
    padding: 20px;
    text-align: center;
    pointer-events: auto;
}

.focusfontapply-overlay #message { pointer-events:all;padding:0px 32px;margin:0px 40px !important;line-height:normal; }

/* bottom textarea fontSize dropdown css start */

.form-select:disabled {
    background-color: rgb(240 245 247) !important;
    /*background-color: #14141d;*/
    color: #6c757d !important;
    cursor: no-drop;
}

select.fontSizeDropdown, select.chimeDropdown, select.flashDropdown {
    padding: 6px 26px 6px 8px;
    appearance: none;
    letter-spacing: 0.05rem;
    border-radius: 6px;
    background: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="none" stroke="black" stroke-width="2"><polyline points="6 9 12 15 18 9"/></svg>') no-repeat right 6px center;
    background-size: 16px;
    border: 1px solid #6c757d;
    background-color: #E2EAF8;
    font-size: 13px;
    color: #000;
    border: 1px solid rgba(255, 255, 255, 0.08);
}

select.fontSizeDropdown:focus, select.chimeDropdown:focus,  select.flashDropdown:focus {
    outline: none !important;
    box-shadow: none !important;
    border-color:transparent !important;
}

select.fontSizeDropdown option, select.chimeDropdown option,  select.flashDropdown option {
    background-color: #fff;
    color: #000 !important;
    border: 0 !important;
    padding: 8px 12px !important;
}

.btn-vol {
    font-size: 12px !important;
    border-radius: 10px !important;
    padding: 6px 12px !important;
}

.btn-vol:disabled {
    cursor: no-drop;
}

.settingActionDropdown button.dropdown-toggle {
    border-radius: 10px;
    font-size: 13px;
    padding: 8px 16px;
}

.settingActionDropdown .dropdown-menu .dropdown-item {
    font-size: 12px;
    padding: 6px 12px;
}
/* bottom textarea fontSize dropdown css over */


/* cst-css start */

button.js-unnamed-btn {
    /*background: linear-gradient(90deg, #513DA1 0%, #880AEB 0.01%, #B34B8A 100%);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;*/
    font-size: 28px;
    line-height: 33.89px;
    color:#1967D2;
    /*text-align: left;
    text-underline-position: from-font;
    text-decoration-skip-ink: none;*/
}

.btn-share {
    /*position: relative;
    border-radius: 20px;
    background: linear-gradient(90deg, rgba(81, 61, 161, 0.2) 0%, rgba(136, 10, 235, 0.2) 0.01%, rgba(179, 75, 138, 0.2) 100%);*/
    /*border: 1px solid;border-image-source: linear-gradient(90deg, #513DA1 0%, #880AEB 0.01%, #B34B8A 100%);border-image-slice: 1;border-width: 1px;*/
    font-size: 14px;
    font-weight: 500;
    line-height: 16.94px;
    text-align: left;
    /*text-underline-position: from-font;
    text-decoration-skip-ink: none;*/
    color: rgba(250, 250, 250, 1);
    padding: 9px 16px;
}

.btn-customize {
    background: rgba(255, 255, 255, 0.05);
    border-radius: 20px;
    border: 1px;
    border: 1px solid;
    border-image-source: linear-gradient(180deg, rgba(255, 255, 255, 0.1) 0%, rgba(255, 255, 255, 0.08) 100%);
    color: rgba(250, 250, 250, 1);
    padding: 9px 16px;
}

.btn-action {
    width: 36px;
    height: 36px;
    border-radius: 20px;
    color: #fff;
    background: rgba(24, 24, 39, 1);
    border: 1px solid rgba(255, 255, 255, 0.2);
    display: flex;
    align-items: center;
    justify-content: center;
}

.btn-share:hover,
.btn-customize:hover,
.btn-action:hover {
    color: #ffffff;
}

button.btn-action i {
    font-size: 14px;
}

button.btn-action i.fa-play,
button.btn-action i.fa-trash-alt,
button.btn-action i.fa-pause {
    font-size: 12px;
}

button.btn-action i.fa-play {
    /*color: rgba(22, 163, 74, 1);*/
    color: #fff;
}
/* cst-css over */

/* websocket page css start */
.logo-wrapper h2 {
    font-family: 'Jost-Regular';
    font-size: 32px;
    line-height: 40px;
}

.timer-name-wrapper p#timer-name {
    font-family: 'Jost-Regular';
    font-weight: 600;
    /*color: rgba(48, 189, 248, 1);*/
    color: #1967D2;
    line-height: 20px;
    letter-spacing: 1px;
}
/* websocket page css over */

/* auth page css code start */
a .img-fluid.logo { height:45px; }

a.logo img { height: 45px; }

form.authForm input.form-control {
    font-size: 14px;
    font-weight: 500;
    padding: 12px 16px;
    border-radius: 10px;
    background-color:rgb(240 245 247) !important;
    /*background-color: rgba(255, 255, 255, 0.05) !important;*/
    border: 1px solid;
    border-image-source: linear-gradient(180deg, rgba(255, 255, 255, 0.1) 0%, rgba(255, 255, 255, 0.08) 100%);
    color: #000 !important;
}

form.authForm input.form-control[type="password"] { font-family:initial; }

form.authForm .btn-submit {
    background: linear-gradient(90deg, #513DA1 0%, #880AEB 0.01%, #B34B8A 100%);
    border: none;
    border-radius: 10px;
    font-size: 14px;
    padding: 11px 16px;
    color: rgba(250, 250, 250, 1);
    font-weight: 500;
    line-height: 16.94px;
    text-underline-position: from-font;
    text-decoration-skip-ink: none;
}

.authPgTextLink {
    /*background: linear-gradient(90deg, #513DA1 0%, #880AEB 0.01%, #B34B8A 100%);*/
    /*background-clip: text;*/
    color: #1967D2;
    /*border-bottom: dotted 2px #513DA1;*/
}

.authPgTextLink:hover,
.authPgTextLink:focus,
.authPgTextLink:active {
    color: #0146A6 !important;
}
/* auth page css code over */

.border-muted { border-color: rgba(255, 255, 255, 0.08) !important; }

/* decives card */

ol.devices-list {
    list-style-type: none !important;
    counter-reset: list-counter;
    margin-bottom: 0px;
}

ol.devices-list li.devices-item:first-child {
    padding-top: 0px
}

ol.devices-list li.devices-item {
    border-bottom: solid 1px rgba(255, 255, 255, 0.08);
    padding: 12px 0px;
    counter-increment: list-counter;
    list-style: none !important
}

ol.devices-list li.devices-item::before {
    color: #202124;
    content: counter(list-counter) " ";
}

ol.devices-list li.devices-item:last-child::before {
    content: "";
}

ol.devices-list li.devices-item:last-child {
    border-bottom: none;
    list-style: none;
    padding-bottom: 0px
}

ol.devices-list li.devices-item a.share-timer-link {
    border-bottom: dotted 2px rgba(255, 255, 255, 40%);
}


/* badge css */

.badge-muted {
    /*background: #FFFFFF0D;*/
    background-color: #e2eaf8;
    border-radius: 20px;
    /*border: solid 1px #1967D2;*/
    padding: 8px 12px;
    color: #202124;
}

.badge-muted i {
    font-size: 4px;
}

.modal-body #extracted-content {
    white-space: pre-wrap;
    overflow-y: auto;
    padding-right: 12px;
    max-height: 400px;
    color:#202124;
}

/*h5#previewModalLabel { color: #000000; }*/

#preview-modal-content {
    max-height: 400px;
    /*width: 500px;*/
    padding-right: 12px;
    overflow-y: auto;
    color: #202124;
}

/* simple dropdown css */

.dropdown-menu {
    /*background-color: #242432;
    color: #fff !important;*/
    background-color: #fff;
    box-shadow:0 .5rem 1rem rgba(0,0,0,.15)!important;
    color:#202124 !important;
    border: 1px solid rgba(255, 255, 255, 0.08);
    padding: 8px 0px;
    /*border-radius: 10px;*/
    border-radius: 8px;
}

.dropdown-item {
    /*color: #fff;*/
    font-size: 14px;
    padding: 8px 16px;
}

.dropdown-item:focus,
.dropdown-item:hover {
    color: #000 !important;
    background-color: #e2eaf8;
}
/*.dropdown-item.btn-link:focus, .dropdown-item.btn-link:hover { color:#fff !important; }*/
.dropdown-item i {
    width: 14px;
    height: 14px;
    margin-right: 16px;
}


/* share link modal css */

button#open-url {
    background-color:#1967D2 ;
    /*background: linear-gradient(90deg, #513DA1 0%, #880AEB 0.01%, #B34B8A 100%);*/
}

.new-tab-preview {
    /*background: linear-gradient(90deg, rgba(81, 61, 161, 0.2) 0%, rgba(136, 10, 235, 0.2) 0.01%, rgba(179, 75, 138, 0.2) 100%);*/
    font-size: 14px;
    padding: 8px 12px;
    border-radius: 20px;
    background-color: #93b8ea;
    border: none;
}
.new-tab-preview:hover { background-color:#1967D2 !important; }


/* timer screen css */
 #progress-container {
        min-width: 100%;
      width: 100%;
      max-width: 600px;
      height: 25px;
      /*height: 20px;*/
      background: #e5e7eb;
      /*border-radius: 6px;*/
      position: relative;
      overflow: hidden;
      /* margin: 80px auto 50px auto; */
    }

    #progress-gradient {
      width: 100%;
      height: 100%;
      background: linear-gradient(to left, #22C55D 80%, #F59E0C 80% 93%, #EF4444 93%);
    }

    #progress-mask {
      width: 0%;
      height: 100%;
      background-color: rgb(216 229 233);
      position: absolute;
      top: 0;
      right: 0;
      transition: width 0.5s ease;
    }

    .progress-indicator {
      content: '';
    width: 0px;
    height: 0px;
    border-left: 8px solid transparent;
    border-right: 8px solid transparent;
    border-top: 10px solid #fff;
    position: absolute;
    top: 0px;
    right: -8px;
    }

.preview-wrapper #progress-container {
    border-bottom-left-radius: 20px;
    border-bottom-right-radius: 20px;
}

/* contact list dropdown css */
.dropdown-toggle.contact-action-dropdown::after {
    display: none;
}

.contact-action-dropdown~ul li {
    list-style: none !important;
}

/* input switch css */
.form-check-input {
    background-color: #e3e8e9;
    border-color:#e3e8e9;
    /*background-color: #6c757d;
    border-color: #6c757d;*/
}

.form-check-input:checked {
    background-color: #1967D2 !important;
    border-color: #1967D2 !important;
}

.form-check-input:hover,
.form-check-input:focus,
.form-check-input:active {
    background-color: #e3e8e9;
    border-color: #e3e8e9;
}

.form-switch .form-check-input:focus {
    background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='-4 -4 8 8'%3e%3ccircle r='3' fill='rgba%280, 0, 0, 0.25%29'/%3e%3c/svg%3e");
}

.form-switch .form-check-input:checked {
    background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='-4 -4 8 8'%3e%3ccircle r='3' fill='%23fff'/%3e%3c/svg%3e");
}

#accordion .card,
#devicesAccordion .card {
    /*box-shadow: 0px 8px 18px 1px rgba(255, 255, 255, 0.1) inset;*/
    box-shadow: 0px 8px 18px 1px rgba(25, 103, 210, 0.1) inset;
    background-color:rgba(25, 103, 210, 0.05);
}

#accordion .card .card-header,
#devicesAccordion .card .card-header {
    border-radius: 10px;
}

.timeZoneArea {
    font-size: 12px;
}

.timeTitle {
    font-size: 14px;
}


/* ================ web-page css code start  ================ */


/*.web-navbar .dropdown-menu {
    background-color: #fff;
    border:none;
    color:#000;
}

.web-navbar .dropdown-menu .dropdown-item:focus, .web-navbar .dropdown-menu .dropdown-item:hover {
    background: linear-gradient(90deg, #513DA1 0%, #880AEB 0.01%, #B34B8A 100%);
}*/

.web-navbar .dropdown-menu {
    /*background-color: #ecd7f5;*/
    background-color: #eff4fc;
    border: none;
}

.web-navbar .dropdown-menu .dropdown-item {
    color: #000;
}

.web-navbar .dropdown-menu .dropdown-item:focus,
.web-navbar .dropdown-menu .dropdown-item:hover {
    color: #000 !important;
    /*background-color: #f6f6f6;*/
    background-color: #d6deee !important;
}

.web-navbar .dropdown-toggle i {
    font-size: 12px;
}

.web-navbar .dropdown-toggle::after {
    display: none;
}

a.nav-link { color:#202124 !important; }

.heroSection {
    position: relative;
    z-index: 1;
    background: #F0F5F7 !important;
}

.heroSection::before {
    content: '';
    position: absolute;
    z-index: -1;
    background-image: url('../images/hero-bg-left.svg');
    bottom: 0px;
    left: 0px;
    background-position: left;
    width: 50%;
    height: 70%;
    background-repeat: no-repeat;
}

.heroSection::after {
    content: '';
    position: absolute;
    z-index: -1;
    background-image: url('../images/hero-bg-right.svg');
    top: 0px;
    right: 0px;
    background-position: right;
    width: 33%;
    height: 100%;
    background-repeat: no-repeat;
}

.heroImgWrapper  img.img-fluid { border-radius:22px; }

.navbar-light .navbar-toggler {
    border: solid 1px #fff;
}

.navbar-light .navbar-toggler-icon {
    background-image: url('data:image/svg+xml,%3csvg xmlns=\'http://www.w3.org/2000/svg\' viewBox=\'0 0 30 30\'%3e%3cpath stroke=\'%23FFFFFF\' stroke-linecap=\'round\' stroke-miterlimit=\'10\' stroke-width=\'2\' d=\'M4 7h22M4 15h22M4 23h22\'/%3e%3c/svg%3e');
}

.fs-18 {
    font-size: 18px !important;
}


/* btn css */
.btn-gradient {
    border: none;
    border-radius: 5px;
    font-weight: 500;
    font-size: 16px;
    line-height: 19.36px;
    letter-spacing: 0;
    text-align: center;
    color: #fff;
    padding: 16px 24px;
    background: linear-gradient(90deg, #513DA1 0%, #880AEB 0.01%, #B34B8A 100%);
    transition: background 0.7s ease-in;
}

.btn-gradient:hover {
    color: #fff;
    background: linear-gradient(90deg, #3E2A7A 0%, #6E0B9B 0.01%, #9A3D6A 100%);
}

.btn-link:hover {
    color: #212529 !important;
}

.btn-white {
    background-color: #FFFFFF;
    border-radius: 5px;
    font-weight: 500;
    font-size: 18px;
    line-height: 21.78px;
    letter-spacing: 0;
    padding: 20px 35px;
}

.btn-soft-primary {
    padding: 8px 20px;
    font-size: 14px;
    color: #1967D2;
    background-color: #E2EAF8;
    line-height: 20px;
    border-radius: 8px;
    font-weight: 400;transition: all 0.5s ease;
}

.btn-primary {
    padding: 8px 20px;
    font-size: 14px;
    color: #ffffff;
    background-color: #1967D2;
    line-height: 20px;
    border-radius: 8px;
    font-weight: 400;
}

.btn-lg-primary {
    text-align: center;
    white-space: nowrap;
    color: #fff !important;
    background-color: #1967D2;
    font-size: 15px;
    line-height: 20px;
    border-radius: 8px;
    font-weight: 400;
    padding: 15px 35px 15px 35px;
}

/*.btn-primary:hover, .btn-primary:focus, .btn-primary:active, .btn-lg-primary:hover, .btn-lg-primary:focus, .btn-lg-primary:active { color:#fff;background-color:#0146A6; }
.btn-soft-primary:hover, .btn-soft-primary:focus, .btn-soft-primary:active { background-color:#1967D2;color:#fff; }*/

.btn-primary:hover { color:#fff;background-color:#0146A6; }
.btn-primary:focus, .btn-primary:active, .btn-lg-primary:hover, .btn-lg-primary:focus, .btn-lg-primary:active { outline:none !important;box-shadow:none; }

.btn-soft-primary:hover { background-color:#1967D2;color:#fff; }
.btn-soft-primary:focus, .btn-soft-primary:active { outline:none !important;box-shadow:none !important; }

.btn-soft-primary.focusfont.active, .btn-soft-primary.blackout.active { color: #dc3545;background-color:#E2EAF8; }
.btn-soft-primary.fontflash.active, .btn-soft-primary.timeflash.active { color: #28a745;background-color:#E2EAF8; }

.btn-light {
    background-color: #FFFFFF40;
    border-width: 1px;
    border-radius: 5px;
    border: 1px solid #FFFFFF80;
    font-family: 'Jost-Light';
    font-weight: 500;
    font-size: 16px;
    line-height: 19.36px;
    text-align: center;
    color: #FFFFFF;
    padding: 12px 30px;
}

.btn-white span {
    background: linear-gradient(90deg, #513DA1 0%, #880AEB 0.01%, #B34B8A 100%);
    background-clip: text;
    color: transparent;
}

.btn-white:hover {
    background-color: #e5e5e5;
}

.btn-bg-soft {
    border-radius: 5px;
    font-weight: 500;
    font-size: 16px;
    line-height: 19.36px;
    letter-spacing: 0;
    text-align: center;
    background: #FFFFFF40;
    border: 1px solid #FFFFFF80;
}


/* used in hero section */

.bg-gradient-vertical {
    background: linear-gradient(180deg, #513DA1 0%, #880AEB 0.01%, #B34B8A 100%);
}


/* used in elements bg-or-btn */

.bg-gradient-horizontal {
    background: linear-gradient(90deg, #513DA1 0%, #880AEB 0.01%, #B34B8A 100%);
}


/* used in icon box bg */

.bg-soft-light {
    border-radius: 10px;
    /*background-color: #FBF0FF;*/
    background-color: #ECEDF2;
}


/* used in blog img bg */

.bg-top-left-gradient {
    width: 277px;
    height: 277px;
    opacity: 0.2;
    border-top-left-radius: 50px;
    background: linear-gradient(135deg, #9017DA 0%, rgba(254, 255, 251, 0.65) 100%);
}

.bg-bottom-right-gradient {
    width: 277px;
    height: 277px;
    opacity: 0.2;
    border-bottom-right-radius: 50px;
    background: linear-gradient(135deg, rgba(255, 255, 255, 0.65) 0%, #B34A8D 100%);
}


/* hero section css */

.hero-heading-title {
    font-weight: 500;
    font-size: clamp(33px, 3vw + 1rem, 65px);
    line-height: 1.2em;
    letter-spacing: 0;
    /*color: #fff;*/
    color: #202124;
}

.hero-heading-title span {
    /*color: #F5910A;*/
    color: #1967D2;
}

.hero-desc {
    font-weight: 500;
    font-size: 24px;
    line-height: 40px;
    letter-spacing: 0;
    /*color: #fff;*/
    color: #202124;
}


/* sponsor company img css */

.company-img {
    width: 100%;
    max-height: 36px;
}


/* section heading title ~ desc css */

.heading-title {
    /*font-size: 36px;*/
    font-size: clamp(30px, 5vw + 10px, 36px);
    /*font-weight: 600;
    line-height: 52px;
    letter-spacing: 0;
    color: #000000;*/
    text-align: center;
    line-height: 1.2em;
    color: #202124;
    font-weight: 500;
}

.desc-text {
    font-weight: 400;
    /*font-size: 16px;*/
    font-size: 15px;
    line-height: 26px;
    letter-spacing: 0;
    color: #6B7280;
}


/* blog css */

.blog-icon {
    width: 28px;
    height: 28px;
}

.imgWrapper {
    position: relative;
    z-index: 0;
    text-align: center;
}

.imgWrapper img {
    position: relative;
    z-index: 0;
    /*width: 627px;*/
    width: 500px;
    height: 400px;
    max-height: 450px;
    object-fit: cover;
    object-position: center;
    border-radius: 22px;
}

.imgWrapper::before {
    content: '';
    position: absolute;
    width: 277px;
    z-index: -1;
    height: 277px;
    opacity: 0.2;
    border-top-left-radius: 50px;
    /*background: linear-gradient(135deg, #9017DA 0%, rgba(254, 255, 251, 0.65) 100%);*/
    background:linear-gradient(135deg, #1967D2 0%, #F0F5F7 100%);
/*    left: 28px;*/
    left: 16px;
    top: -50px;
}

.imgWrapper::after {
    content: '';
    position: absolute;
    width: 277px;
    height: 277px;
    z-index: -1;
    opacity: 0.2;
    border-bottom-right-radius: 50px;
    /*background: linear-gradient(135deg, #9017DA 0%, rgba(254, 255, 251, 0.65) 100%);*/
    background: linear-gradient(135deg, #1967D2 0%, #F0F5F7 100%);
/*    right: 28px;*/
    right: 16px;
    bottom: -50px;
}

.contentWrapper .bg-soft-light {
    padding: 20px;
    margin-bottom: 24px;
    display: inline-block;
}

.blog-title {
    /*font-weight: 600;
    font-size: 30px;
    line-height: 46px;
    letter-spacing: 0;
    color: #111827;*/

    font-size: 40px;
    line-height: 54px;
    color: #202124;
}

.blog-link {
    font-weight: 500;
    font-size: 16px;
    /*line-height: 19.36px;*/
    line-height: 28px;
    color: #1967D2;
    letter-spacing: 0;
    /*background: linear-gradient(90deg, #513DA1 0%, #880AEB 0.01%, #B34B8A 100%) !important;
    background-clip: text !important;
    color: transparent !important;*/
}


/* review ~ testimonial css */


/* card slider css code start */

.slide-container {
    max-width: 1320px;
    width: 100%;
    z-index: 0;
    /*padding: 40px 0;*/
    padding-bottom: 40px;
}

.slide-content {
    margin: 0 40px;
    overflow: hidden;
    border-radius: 20px;
    padding:40px 16px 0px 16px;
}


/*  slider nav button css  */

.swiper-navBtn {
    color: #6E93f7;
    transition: color 0.3s ease;
}

.swiper-navBtn:hover {
    color: #4070F4;
}

.swiper-navBtn::before,
.swiper-navBtn::after {
    font-size: 35px;
}


/*  prev-next button css  */

.swiper-button-next {
    right: 0;
}

.swiper-button-prev {
    left: 0;
}


/*  pagination css  */

.swiper-pagination-bullet {
    width: 16px;
    height: 16px;
    /*background-color: #e2c7ed;*/
    background-color: #dde8f8;
    opacity: 1;
}

.swiper-pagination-bullet-active {
    outline: none;
    box-shadow: none;
    background-color: #1967D2;
    /*background: linear-gradient(90deg, #513DA1 0%, #880AEB 0.01%, #B34B8A 100%);*/
}


/* media-query ==768== */

@media screen and (max-width: 768px) {
    .slide-content {
        margin: 0 10px;
    }
    .swiper-navBtn {
        display: none;
    }
    .border-md-0 { border-width:0px !important; }
    /*.testimonial-divider {
        border-left:none !important;
        border-right:none !important;
    }*/
}

@media screen and (max-width: 991px) {
    /* navbar */
    nav.web-navbar {
        position: fixed;
        left: 0;
        right: 0;
        top: 0;
        z-index: 11;
        background-color: rgba(25, 103, 210, 0.2);
        backdrop-filter: blur(10px);
    }

    .testimonial-divider {
        border-left: none !important;
        border-right: none !important;
    }
}


/* card slider css code over */

.testimonial-digit {
    /*font-weight: 700;
    font-size: 48px;
    line-height: 62px;
    color: #fff;*/
    letter-spacing: 0;
    text-align: center;
    color:#202124;
    font-size: 50px;
    line-height: 1em;
    font-weight: 500;
}

.testimonial-pre-title {
    font-size: 15px;
    line-height: 30px;
    color: #696969;
    font-weight: 400;
    /*font-size: 20px;
    line-height: 32px;
    color: #f3f3f3;*/
    letter-spacing: 0;
    text-align: center;
}

.testimonial-divider {
    border-color: #DDDDDD;
}

.testimonial-card {
    border-radius: 20px;
    background-color: #FFFFFF !important;
    box-shadow: 0px 5px 15.7px 0px #00000033;
}

.testimonial-card .card-body {
    padding: 50px;
}

.testimonial-card .fa-star {
    /*font-size: 26px;
    color: #f59e0b;*/
    font-size: 16px;
    color: #1967D2;
}

.testimonial-desc {
    /*font-weight: 500;
    font-size: 20px;
    font-size: clamp(16px, 3vw + 4px, 20px);
    line-height: 40px;
    line-height: 30px;
    letter-spacing: 0;
    color: #111827;*/
    font-size: 16px;
    line-height: 26px;
    color: #202124 !important;
    margin-bottom: 50px;
}

.testimonial-user-profile {
    width: 60px;
    height: 60px;
}

.testimonial-user-profile img.img-fluid { width:100%;height:100%;object-fit:cover; }

.testimonial-user-title {
    font-weight: 500;
    /*font-size: 20px;*/
    font-size: clamp(16px, 4vw + 4px, 18px);
    line-height: 26px;
    letter-spacing: 0;
    color: #111827;
}

.user-divider {
    border-color: #D1D5DB;
}

.testimonial-user-pre-title {
    font-weight: 500;
    font-size: clamp(14px, 2vw + 2px, 14px);
    line-height: 22px;
    letter-spacing: 0;
    /*font-family: Inter;
    font-size: 16px;
    background: linear-gradient(90deg, #513DA1 0%, #880AEB 0.01%, #B34B8A 100%);
    background-clip: text;*/
    color: #1967D2;
}

/* get start section css */
.card.get-start-back-card {
    background-color:#F0F5F7 !important;
    /*background: #FBF0FF !important;*/
    height: 50%;
    border-radius: 10px;
}

.card-body.get-start-card {
    border-radius: 15px;
    background-color: #FFFFFF;
    box-shadow: 0px 10px 25px 0px #0000001A;
    text-align: center;
}

.get-start-icon {
    width: 56px;
    height: 56px;
}

.get-start-title {
    font-weight: 500;
    font-size: 24px;
    line-height: 29.05px;
    letter-spacing: 0;
    text-align: center;
    color: #0E1133;
}

.get-start-desc {
    font-weight: 500;
    font-size: 14px;
    line-height: 24px;
    letter-spacing: 0;
    text-align: center;
    color: #505056;
}

/* how used section css */
section#usedSection { background-color:#ECEDF2 !important; }

.card-body.how-used-card {
    /*padding: 30px 20px;*/
    padding: 36px 20px;
}

.how-used-card {
    border-top-right-radius: 10px;
    border-bottom-right-radius: 10px;
    /*background-color: #FBF0FF;*/
    background-color: #FFF;
}

.how-used-card-img-wrapper {
    width: 100%;
    height: 100%;
    overflow: hidden;
}

.how-used-card-img-wrapper img {
    object-fit: cover;
    border-top-left-radius: 10px;
    border-bottom-left-radius: 10px;
}

.how-used-card-title {
    /*font-weight: 600;
    font-size: 24px;
    line-height: 29.05px;
    letter-spacing: 0;
    color: #111827;*/
    font-size: 18px;
    color: #202124;
    font-weight: 500;
    margin-bottom: 10px;
    padding-bottom: 0px;
}

.how-used-card-desc {
    font-weight: 400;
    /*font-size: 16px;
    line-height: 28px;*/
    font-size: 14px;
    line-height: 24px;
    letter-spacing: 0;
    color: #111827;
    /* text-truncate css */
    display: -webkit-box;
    -webkit-box-orient: vertical;
    -webkit-line-clamp: 2;
    overflow: hidden;
    text-overflow: ellipsis;
    max-height: 3.2em;
}

.read-more {
    font-size: 16px;
    line-height: 28px;
    color: #1967D2;
}
.read-more i{
    line-height: 28px;
}

/* faq section css */

#accordionFAQ .card {
    /*padding: 24px;
    background-color: #f6f6f6 !important;*/
    padding: 18px;
    background-color: #ECEDF2 !important;
    margin-bottom: 12px;
}

#accordionFAQ .faq-card {
    background-color: #e5eef9 !important;
    /*background-color: #FBF0FF !important;*/
    border-radius: 10px;
}

.faq-title {
    font-family: 'Jost-Medium';
    /*font-size: 24px;*/
    font-size: clamp(20px, 2vw + 8px, 20px);
    white-space: break-spaces;
    /*line-height: 30px;*/
    line-height: 26px;
    letter-spacing: 0;
    color: #000000;
    text-align: start;
    text-decoration: none;
}

.faq-title i, .faq-title-inactive i { font-size:16px; }

.faq-title-inactive {
    font-family: 'Jost-Medium';
    /*font-size: 24px;*/
    font-size: clamp(20px, 2vw + 8px, 20px);
    white-space: break-spaces;
    line-height: 30px;
    letter-spacing: 0;
    color: #6B7280;
    text-align: start;
    text-decoration: none;
}

.faq-desc {
    font-weight: 400;
    /*font-size: 18px;
    line-height: 28px;*/
    font-size: 16px;
    line-height: 26px;
    letter-spacing: 0;
    color: #111827;
}

.card.faq-card .card-body.faq-desc *:last-child { margin-bottom:0px !important;padding-bottom:0px !important; }

/* cta section css */
section.ctaSection .ctaWrapper {
    border-radius: 16px;
    background-color: #eff4fc;
}

.ctaSection,
.testimonialSection {
    position: relative;
}

/*.ctaSection::after {
    content: '';
    width: 100%;
    height: 50%;
    position: absolute;
    left: 0;
    right: 0;
    bottom: 0px;
    z-index: -1;
    background-color: #111827;
}*/

section.reviewSection{ 
    background-color: #F0F5F7;
}

.testimonialSection::after {
    content: '';
    width: 100%;
    height: 50%;
    position: absolute;
    left: 0;
    right: 0;
    top: 0px;
    z-index: -1;
    /*background: linear-gradient(90deg, #513DA1 0%, #880AEB 0.01%, #B34B8A 100%);*/
    background-color: #F0F5F7;
}

.cta-pre-title {
    font-weight: 400;
    font-size: 16px;
    line-height: 28px;
    letter-spacing: 0;
    text-align: center;
    /*color: #FFFFFF;*/
    color: #202124 !important;
}

ul.cta-detail-list  li span {
    color: #202124 !important;
} 

ul.cta-detail-list  li i.fa-check-circle:before { 
    color: #1967D2;
}

.cta-detail-list {
    font-weight: 400;
    font-size: 16px;
    line-height: 26px;
    letter-spacing: 0;
    color: #FFFFFF;
}


/* footer css */

/*footer { background-color: #111827; }*/

footer .footer-title {
    font-weight: 500;
    line-height: 1.4em;
    margin-bottom: 30px;
    padding-bottom: 0px;
    font-size: 18px;
    /*font-weight: 600;
    line-height: 21.78px;
    color: #FFFFFF;*/
    letter-spacing: 0;
    color:#2F2D51;
}

footer .footer-link {
    font-weight: 400;
    font-size: 14px;
    line-height: 16.94px;
    letter-spacing: 0;
    /*color: #FFFFFF;*/
    color: #696969;
}

footer p.footer-link {
    line-height: 24px;
}

footer .footer-copyright-text {
    font-family: Poppins;
    font-weight: 400;
    font-size: 14px;
    line-height: 21px;
    letter-spacing: 0;
    text-align: center;
    color: #FFFFFF;
}


/*  ================ web-page css code over  ================ */


/* ======= profile page css code start =====  */


/* upload img */

.upload-container {
    position: relative;
    width: 100px;
    height: 100px;
    border-radius: 50%;
    border: solid 1px rgba(255, 255, 255, 0.08) !important;
    display: flex;
    justify-content: center;
    align-items: center;
    cursor: pointer;
    /*overflow: hidden; 
    background-color: rgba(255, 255, 255, 0.05) !important;
    background-color: rgba(240, 245, 247, 0.05) !important;*/
    background-color: rgb(226 234 248) !important;
}

.profilePicture i.imgIcon {
    font-size: 30px;
    color: #82a3ad;
    /*color: #65656f;*/
    font-weight: 500;
    position: absolute;
    z-index: 1;
}

.profilePicture::after {
    content: "\f303";
    font-weight: 600;
    font-family: "Font Awesome 5 Free";
    bottom: 0px;
    right: 0px;
    z-index: 1;
    color: white;
    position: absolute;
    width: 30px;
    height: 30px;
    border-radius: 50%;
    font-size: 14px;
    background-color:#1967D2;
    /*background: linear-gradient(90deg, #513DA1 0%, #880AEB 0.01%, #B34B8A 100%);*/
    display: flex;
    align-items: center;
    justify-content: center;
}

.upload-container input[type="file"] {
    position: absolute;
    width: 100%;
    height: 100%;
    opacity: 0;
    z-index: 11;
    cursor: pointer;
}

.upload-icon {
    color: #007bff;
    font-size: 24px;
    position: absolute;
}

.uploaded-image {
    opacity: 0;
    z-index: 1;
    min-width: 100%;
    min-height: 100%;
    object-fit: cover;
    border-radius: 50%;
}


/* upload img */

form.profileForm input.form-control,
form.profileForm select.form-select,
form.billingForm input.form-control,
form.billingForm select.form-select {
    font-size: 14px;
    font-weight: 500;
    padding: 12px 16px;
    border-radius: 10px;
    /*background-color: rgba(255, 255, 255, 0.05) !important;*/
    background-color: rgb(240 245 247) !important;
    border: 1px solid;
    border-image-source: linear-gradient(180deg, rgba(255, 255, 255, 0.1) 0%, rgba(255, 255, 255, 0.08) 100%);
    color: #202124 !important;
}

form.profileForm .btn-submit,
form.billingForm .btn-submit {
    background: linear-gradient(90deg, #513DA1 0%, #880AEB 0.01%, #B34B8A 100%);
    border: none;
    border-radius: 10px;
    font-size: 14px;
    padding: 11px 16px;
    color: rgba(250, 250, 250, 1);
    font-weight: 500;
    line-height: 16.94px;
    text-underline-position: from-font;
    text-decoration-skip-ink: none;
}

.tbl-container {
    max-height: 300px;
    overflow-y: auto;
}

.tbl-container::-webkit-scrollbar-corner {
    background: transparent;
}

.table-responsive table.invoice-tbl {
    width: 100%;
    border-collapse: collapse;
    white-space: nowrap;
}

.table-responsive table.invoice-tbl thead {
    /*background-color: rgb(12, 12, 27);*/
    background-color: #F0F5F7;
    border-top-left-radius: 20px;
    position: sticky;
    top: 0;
    z-index: 1;
}

.table-responsive table.invoice-tbl tbody,
td,
tfoot,
th,
thead,
tr {
    border-color: rgba(255, 255, 255, 0.08) !important;
}

.table-responsive table.invoice-tbl thead tr th {
    font-family: 'Jost-Medium';
    font-weight: normal;
    font-size: 15px;
    padding: 12px;
    color: #202124 !important;
}

.table-responsive table.invoice-tbl tbody tr td {
    font-size: 14px;
    vertical-align: middle;
    color: #202124 !important;
    padding: 12px;
}

.table-responsive table.invoice-tbl tbody tr td button.btn-invoice {
    font-size: 12px;
}

.table-responsive table.invoice-tbl .badge {
    font-size: 12px;
    font-weight: normal;
    border-radius: 8px;
    padding: 6px 12px;
}

.bg-success-soft {
    background-color: rgb(25 135 84 / 60%) !important;
}

.bg-warning-soft {
    background-color: rgb(255 193 7 / 60%) !important;
}

.bg-danger-soft {
    background-color: rgb(220 53 69 / 60%) !important;
}

.bg-info-soft {
    background-color: rgb(13 202 240 / 60%) !important;
}

select.timezoneDropdown {
    appearance: none;
    letter-spacing: 0.05rem;
    background: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="none" stroke="white" stroke-width="2"><polyline points="6 9 12 15 18 9"/></svg>') no-repeat right 16px center;
    background-size: 16px;
    background-color: #242432;
    color: #fff;
}

select.timezoneDropdown:focus {
    outline: none;
    box-shadow: none;
}

select.timezoneDropdown option {
    background-color: #242432;
    color: #fff !important;
    border: none !important;
    padding: 8px 12px !important;
}


/* ======= profile page css code over =====  */

/*timer page fullscreen active css*/
#btn-full-screen.btn.active,#btn-horizontal-flip.btn.active,#btn-vertical-flip.btn.active {
    border: 2px solid #007bff; 
    background-color: rgba(0, 123, 255, 0.1);
}

.identifyTitle {
    color:#facc15;
    text-align: center;
    font-size: 3rem;
    line-height: 1;
}

.btn-link-timer{
    position: absolute;
    top: -1.6rem;
    left: 8%;
    width: .75rem;
    border-radius: 9999px;
    border: solid 4px #464652;
    background-color: #181827;
    height: 36px;
}

#timerSettingModal .modal-dialog { max-width:800px; }

#timerSettingModal input.form-control, #timerSettingModal textarea.form-control, #addLabelModal input.form-control {
    font-size: 14px;
    padding: 4px 12px;
    border-radius: 10px;
    background-color:rgb(240 245 247) !important;
    /*background-color: rgba(255, 255, 255, 0.05) !important;
    color: #fff;*/
    color:#000;
    border:solid 1px rgba(255, 255, 255, 0.08);
    font-weight: 500;
}

.modal.show{
    backdrop-filter: blur(8px);
}

.timer-progress-bar{
    height: 16px;
    border-radius: 4px;
    width: 100%;
    background: linear-gradient(to right, #22C55D 85%, #F59E0C 85% 95%, #EF4444 95%);
    transition: width 1s linear;
}

/* timer setting modal select2 dropdown css start */
#js-timerSettingDropdown ~ .select2-container, #js-timerSettingDurantionDropdown ~ .select2-container { font-size: 14px;padding: 4px 12px;border-radius: 10px;background-color: rgba(255, 255, 255, 0.05) !important;border: solid 1px rgba(255, 255, 255, 0.08);color: #fff;font-weight: 500; }

#timerSettingModal .select2-container--open { z-index: 9999; }

#timerSettingModal .select2-container { width:100% !important;vertical-align:baseline; }
/*.custom-select2 { font-size: 14px;padding: 4px 12px;border-radius: 10px;background-color: rgba(255, 255, 255, 0.05) !important;border: solid 1px rgba(255, 255, 255, 0.08);color: #fff;font-weight: 500; }*/

.select2-dropdown.custom-dropdown-list { border-radius:8px;background-color: rgb(24 24 39) !important;border: solid 1px rgba(255, 255, 255, 0.08);margin-top:0.7%; }

#timerSettingModal .select2-container .select2-results__option { padding:12px 16px; }

/* selected option css start */
.custom-dropdown-list .select2-results__option--selected { background-color:transparent !important; }
/* selected option css over */

/* select2 hover bg css start */
.select2-container--default .select2-results__option--highlighted.select2-results__option--selectable { background-color:#373746 !important; }
/* select2 hover bg css over */

/* option inner tag css start */
.select2-dropdown.custom-dropdown-list .custom-select-option h4{ font-size: 14px;padding: 0px;font-weight: 600;line-height: 20px; }
.select2-dropdown.custom-dropdown-list .custom-select-option p{ margin-bottom:0px;font-size: 14px;padding: 0px;font-weight: 300;color:#6c757d!important;line-height: 20px; }
/* option inner tag css over */

.select2-container--default .select2-selection--single { border:0px !important;border-radius:0px !important;background-color:transparent !important; }

#timerSettingModal .select2-container--default .select2-selection--single .select2-selection__rendered { color:#000 !important;font-size: 14px;padding: 4px 12px;border-radius: 10px;background-color: rgb(240 245 247) !important;border: solid 1px rgba(255, 255, 255, 0.08);font-weight: 500; }

#timerSettingModal .select2-container--default .select2-selection--single .select2-selection__arrow { top:6px;right:12px; }
/* timer setting modal select2 dropdown css over */

.js-addLabelBtn { font-size:13px; }
.addLabelColorBtn { background-color:rgb(76, 175, 80);border: solid 2px transparent;border-radius: 50%;width: 20px;height: 20px; }
.addLabelColorBtn.active { border-width:2px;border-color:#fff; }
.premium-badge { background-color:rgb(240 245 247) !important;font-size: .875rem;line-height: 1.25rem;padding: 8px 16px; }

#addLabelModal.modal.show { z-index:1111; }
#addLabelModal .modal-dialog { width:385px; }

.row#header .editDeviceDivision { box-shadow: 0px 8px 18px 1px rgba(25, 103, 210, 0.1) inset;border-radius: 20px; }
#btn-vertical-flip, #btn-horizontal-flip, #btn-full-screen { box-shadow: 0px 8px 18px 1px rgba(25, 103, 210, 0.1) inset !important; }

/* pricing modal css start */
.modal#pricingModal .modal-dialog { max-width:700px; }
.modal#pricingModal .modal-dialog .modal-content { box-shadow:0px 7px 18px rgba(25, 103, 210, 0.10);border:1px solid #ECEDF2;border-radius:10px; }
.modal#pricingModal .modal-dialog .modal-content .modal-header .btn-close { font-size:12px; }
.modal#pricingModal .modal-dialog .modal-content label.form-check:focus, .modal#pricingModal .modal-dialog .modal-content label.form-check:active { outline:none !important;box-shadow:none !important; }
.modal#pricingModal .modal-dialog .modal-content label.form-check { cursor:pointer;width:100%;background-color:#fff;border:1px solid #ECEDF2;box-sizing: border-box;border-radius: 10px;transition: all 300ms ease;outline:none; }
.modal#pricingModal .modal-dialog .modal-content label.form-check:hover{ box-shadow:0px 7px 18px rgba(64, 79, 104, 0.05); }
.modal#pricingModal .modal-dialog .modal-content label.form-check[for="pro"] { background: linear-gradient(180deg, rgba(25, 103, 210, 0.1) 0%, rgba(25, 103, 210, 0.05) 100%);border: solid 1px #8fb5e9; }
.modal#pricingModal .modal-dialog #pricing-container ul.list-unstyled li:last-child { padding-bottom:0px !important;margin-bottom:0px !important; }
.modal#pricingModal .modal-dialog .priceDetailContainer label.form-check-label { font-size:18px;color: #202124;font-weight: 500; }
.modal#pricingModal .modal-dialog .priceDetailContainer input.form-check-input { width:20px;height:20px;background-color:#d7d7d7; }
.modal#pricingModal .modal-dialog .priceDetailContainer input.form-check-input[type=radio] { background-image: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" width="12" height="12" viewBox="0 0 24 24" fill="none" stroke="white" stroke-width="3" stroke-linecap="round" stroke-linejoin="round"><path d="M20 6L9 17l-5-5"/></svg>');background-size: 12px;background-position:center;background-repeat: no-repeat; }
.modal#pricingModal .modal-dialog .priceDetailContainer input.form-check-input:checked[type=radio] { background-color: #1967D2 !important;border-color: #1967D2 !important; }
/* pricing modal css over */
.cookie-banner {
    position: fixed;
    bottom: 0;
    left: 0;
    width: 100%;
    background-color: #222;
    color: #fff;
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 15px 20px;
    z-index: 9999;
    font-size: 14px;
    flex-wrap: wrap;
    gap: 10px;
}
.cookie-text {
    margin: 0;
    flex: 1;
}
.cookie-link {
    color: #4FC3F7;
    text-decoration: underline;
}
.cookie-btn {
    text-align: center;
    white-space: nowrap;
    color: #fff !important;
    background-color: #1967D2;
    font-size: 15px;
    line-height: 20px;
    border-radius: 8px;
    font-weight: 400;
    padding: 15px 35px 15px 35px;
    border: none;
}
footer.cstFooter a.footer-link { border-bottom:solid 1px transparent; }
footer.cstFooter a.footer-link:hover { border-bottom:solid 1px #696969; }