.toggle-switch {
    position: relative;
    display: inline-block;
    width: 120px;
    height: 40px;
}

.slider {
    position: absolute;
    cursor: pointer;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background-color: #ccc;
    transition: 0.4s;
    border-radius: 34px;
    display: flex;
    justify-content: center;
    align-items: center;
}

.slider-text {
    position: absolute;
    width: 100%;
    text-align: center;
    transition: opacity 0.4s;
}

/* Hide the default HTML checkbox */
.toggle-input {
    opacity: 0;
    width: 0;
    height: 0;
}

/* When the checkbox is checked, show the ON text */
.toggle-input:checked + .slider .long {
    opacity: 1;
}

/* When the checkbox is checked, hide the OFF text */
.toggle-input:checked + .slider .short {
    opacity: 0;
}

/* Change the background color when checked */
.toggle-input:checked + .slider {
    background-color: #1369B0; /* Change to your preferred color */
}

/* Circle inside the toggle switch */
.slider:before {
    position: absolute;
    content: "";
    height: 32px;
    width: 32px;
    left: 4px;
    bottom: 4px;
    background-color: white;
    transition: 0.4s;
    border-radius: 50%;
}

/* Move the circle when checked */
.toggle-input:checked + .slider:before {
    transform: translateX(80px); /* Move to the right */
}


/* Container for the toggle switch and label */
.toggle-switch-container {
    display: flex;
    flex-direction: column;
    align-items: flex-start; /* Align content to the left */
    margin-bottom: 20px; /* Optional: Space below the element */
}

/* Styling for the label above the toggle */
.toggle-switch-container .status-label {
    font-size: 16px;
    margin-bottom: 8px;
    color: #333;
}

/* Wrapper for the toggle switch */
.toggle-switch-container .toggle-switch-wrapper {
    display: flex;
    justify-content: flex-start; /* Align toggle switch to the left */
    align-items: center;
}

/* Style for the toggle switch */
.toggle-switch-container .toggle-switch {
    position: relative;
    display: inline-block;
    width: 120px;
    height: 40px;
}

.toggle-switch-container .toggle-switch input {
    opacity: 0;
    width: 0;
    height: 0;
}

.toggle-switch-container .slider {
    position: absolute;
    cursor: pointer;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background-color: #ccc;
    transition: 0.4s;
    border-radius: 34px;
    display: flex;
    justify-content: center;
    align-items: center;
    font-size: 14px;
    font-weight: bold;
    color: white;
}

.toggle-switch-container .slider:before {
    position: absolute;
    content: "";
    height: 34px;
    width: 34px;
    left: 4px;
    bottom: 3px;
    background-color: white;
    border-radius: 50%;
    transition: 0.4s;
}

/* Hidden text until selected */
.toggle-switch-container .slider .slider-text {
    position: absolute;
    width: 100%;
    text-align: center;
    opacity: 0;
    transition: opacity 0.4s;
}

.toggle-switch-container .slider .slider-text.short {
    left: 10px;
}

.toggle-switch-container .slider .slider-text.long {
    right: 10px;
}

/* Move the toggle knob when checked */
.toggle-switch-container .toggle-switch input:checked + .slider:before {
    transform: translateX(76px);
}

.toggle-switch-container .toggle-switch input:checked + .slider .long {
    opacity: 1;
}

.toggle-switch-container .toggle-switch input:not(:checked) + .slider .short {
    opacity: 1;
}

/* When the toggle is unchecked (Short selected) - apply linear gradient */
.toggle-switch-container .toggle-switch input:not(:checked) + .slider {
    background: linear-gradient(90deg, #854706, #b52323 45%, #ec2404);
}

/* When the toggle is checked (Long selected) - apply linear gradient */
.toggle-switch-container .toggle-switch input:checked + .slider {
    background: linear-gradient(90deg, #37c918, #329e22 55%, #126c4d); /* Green gradient */
}

.form-buttons {
    display: flex;
    justify-content: Center; /* Center the buttons */
    gap: 100px; /* Space between buttons */
}

.form-buttons button {
    font-size: 20px;
    cursor: pointer;
    border: none;
    border-radius: 5px;
    color: white;
}

#reset-button {
    background-color: white; /* White background for Reset button */
    border: 2px solid #1369B0; /* Red border for Reset button */
    color: #1369B0; /* Red text color for Reset button */
}

.elementor-field-type-submit {
    display: none; /* This hides the submit button */
}

.tiscosec-blocktrade-form\.price-label {
    padding: 20px; 
    border-radius: 25px;
    background: #002161;
    background: linear-gradient(285deg, #002161, #1468af 60%, #2882d1);
    color: #f9f9f9;
    -webkit-box-shadow: 2px 2px 8px #999;
    box-shadow: 2px 2px 8px #999;
}

.tiscosec-blocktrade-form\.price-label-red {
    padding: 20px; 
    border-radius: 25px;
    background: #002161;
    background: linear-gradient(90deg, #cd1010, #b52323 45%, #791808);
    color: #f9f9f9;
    -webkit-box-shadow: 2px 2px 8px #999;
    box-shadow: 2px 2px 8px #999;
}

.tiscosec-blocktrade-form\.result-table {
    padding-left: 10px;
    padding-right: 10px;
    padding-top: 20px;
    padding-bottom: 20px;
    border-radius: 25px;
    background: #002161;
    background: linear-gradient(285deg, #002161, #1468af 60%, #2882d1);
    color: #f9f9f9;
    -webkit-box-shadow: 2px 2px 8px #999;
    box-shadow: 2px 2px 8px #999;
    font-size: 1rem;
    line-height: 1.8;
    font-weight: 700;
}



.tiscosec-blocktrade-form\.result-table\.title-row {
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-pack: justify;
    -ms-flex-pack: justify;
    justify-content: space-between;
    position: relative;
    padding-top: 10px;
    padding-bottom: 10px;
}

html .tiscosec-blocktrade-form\.result-table.\--red {
    /* background: #cd1010; */
    /* background: -webkit-gradient(linear, left top, right top, from(#cd1010), color-stop(45%, #b52323), to(#791808)); */
    background: linear-gradient(90deg, #cd1010, #b52323 45%, #791808);
}

.tiscosec-blocktrade-form\.result-table\.title-row:after {
    content: "";
    display: block;
    width: 100%;
    height: 1px;
    position: absolute;
    bottom: 0;
    background: #45c4ff;
    background: linear-gradient(75deg, #74d3ff, #e5e5e5 50%, #fff);
}