/* CSS Document */

/* Import boxes.css */
@import url('boxes.css'); 

/* Import tables.css */
@import url('tables.css');

/* Import rainbows.css */
@import url('rainbows.css');

main {
    display: flex;
    flex-direction: column;
    min-height: calc(100vh - 80px);
}

.main-container {
    flex: 1;
    padding:40px;

}

.sticky {
    position: -webkit-sticky; /* For Safari */
    position: sticky;
    top: 0; /* Stick to the top of the viewport */
    background-color: white;; 
    z-index: 1000; 
    transition: background-color 0.3s ease, box-shadow 0.3s ease;
  }


.grid-column {
   
}

@media (max-width: 600px) {
    .main-container {padding:20px;}
}





.thirds-section { padding:10px;}

.shrink-text {
    white-space: nowrap;  /* Prevent text wrapping */
    overflow: hidden;     /* Hide overflow */
    text-overflow: ellipsis;  /* Display ellipsis (...) if text overflows */
    display: block;       /* Ensure the element behaves like a block element */
    width: 100%;          /* Ensure the element takes full width */
    font-size: calc(100% - 0.5vw); /* Adjust font size dynamically */
}

.split {
    display: flex;
    justify-content: space-between;
}

/* Some buttons */
/* ########################################### */
.button-white {
    background-color: white !important;
    color: gray !important;
    border: 1px solid gray !important;
    margin: 0;
}

.button-white:hover {
    background-color: #0066cc !important;
    color: white !important;
    border: 1px solid gray !important;
}


/* Define the back-arrow class using Font Awesome */
.icon::before {
    font-family: 'Font Awesome 5 Free';
    font-size: 14px;
    font-weight: 900;  /* Necessary for solid icons */
    display: inline-block;
    vertical-align: middle;
    line-height: 1.2;  /* Align the arrow with the text */
    content: "";
    position: relative;
    top: -1px;
    left: -10px;
}

.icon-left-arrow::before {
    content: '\f04a';
    color: #fc0352;
}
.icon-previous::before {
    content: '\f104';
    color: #fc0352;
}
.icon-list::before {
    content: '\f03a';
    color: #350b55;
}

.icon-edit::before {
    content: '\f044';
    color: rgb(214, 85, 240);
}
.icon-add::before {
    content: '\f0fe';
    color: #3e70f9;
}

.icon-delete::before {
    content: '\f2d3';
    color: #b00707;
}

.icon-view::before {
    content: '\f06e';
    color: rgb(60, 220, 122);
}

.icon-search::before {
    content: '\f002';
    color: rgb(242, 178, 39);
}

.icon-camera::before {
    content: '\f030';
    color: gray;
}

.icon-profile::before {
    content: '\f007';
    color: gray;
}

.icon-table::before {
    content: '\f0ce';
    color: rgb(7, 27, 96);
}

.icon-table::before {
    content: '\f00a';
    color: gray;
}

.icon-column::before {
    content: '\f0db';
    color: gray;
}

.icon-download::before {
    content: '\f0ed';
    color: rgb(27, 159, 240);
}

.icon-import::before {
    content: '\f56f';
    color: rgb(12, 149, 92);
}

.icon-filter::before {
    content: '\f0b0';
    color: gray;
}

.icon-settings::before {
    content: '\f013';
    color: rgb(0, 0, 0);
}

.icon-order::before {
    content: '\f0dc';
    color: rgb(32, 186, 225);
}

.icon-sync::before {
    content: '\f2f1';
    color: rgb(32, 186, 225);
}

.icon-notification::before {
    content: '\f0f3';
    color: rgb(248, 37, 90);
}

.icon-next::after {
    font-family: 'Font Awesome 5 Free';
    font-size: 14px;
    font-weight: 900;  /* Necessary for solid icons */
    display: inline-block;
    vertical-align: middle;
    line-height: 1.2;  /* Align the arrow with the text */
    content: '\f105';
    color: #fc0352;
    position: relative;
    top: -1px;
    left: 15px; /* Adjust the position to your liking */
}

.icon-next::after {
    content: '\f105';
    color: #fc0352;
}

.icon-newwindow::after {
    content: '\f14c';
    color: #000000;
    font-size: 30px;;
}

.icon-simple {
    background: none; /* Remove background */
    border: none; /* Remove border */
    padding: 0; /* Remove padding */
    margin: 0; /* Optional: remove margins */
    display: inline-flex; /* Align icon correctly */
    align-items: center;
    height:fit-content;
    line-height: 1;
    justify-content: center;
    font-family: 'FontAwesome'; 
    font-size: 1.5rem;
    cursor: pointer; /* Indicate it's clickable */
}

.icon-simple.icon-delete::before {
    content: '\f2d3'; /* Your icon's Unicode */
    color: #b00707;    
}

.icon-simple.icon-add::before {
    content: '\f0fe';
    color: #3e70f9;
}


.main-button.icon-next::after {
    content: '\f105';
    color: white;
}


/* Drag handle styles */
/* Keep the grab cursor when hovering over the handle */
.drag-handle {
    cursor: grab;
}

/* Ensure the grabbing cursor appears when dragging */
tr[draggable="true"] {
    cursor: grab;
}

/* Styling for the dragging row (hidden) */
.dragging {
    opacity: 0; /* Optionally lower opacity instead of hiding */
    cursor: grabbing;
}
/* Force the cursor to stay in grabbing mode during the drag operation */
tr[draggable="true"] * {
    cursor: grabbing !important; /* Closed hand cursor while dragging */
}

/* Font Colors */
.red {color: #fc0352;}




/* POPOVERS*/

/* Darken background */
#overlay {
    position: fixed; /* Stay in place */
    width: 100%;
    height: 100%;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background-color: rgba(0, 0, 0, 0.7); /* Black background with transparency */
    z-index: 999; /* Sit on top */
    display: flex; /* Flex to center */
    justify-content: center; /* Center horizontally */
    align-items: center; /* Center vertically */
}

/* Popover content */
#confirmation-popup {
    display: flex;
    justify-content: center; /* Center horizontally */
    align-items: center;   
    background: rgb(224, 245, 255);
    padding: 40px;
    border-radius: 10px;
    z-index: 1000; /* Sit on top of the overlay */
    max-width: 500px;
    width: 80%;
    box-shadow: 0 4px 8px rgba(0, 0, 0, 0.2);
    flex-wrap: wrap;
}


/* Full-page on mobile */
@media (max-width: 768px) {
    #confirmation-popup {
        width: 100%;
        height: 100%;
        max-width: none;
        max-height: none;
        border-radius: 0;
        flex-direction: column;
    }
}







 .login-container {
background-color: #ffffff;
padding: 20px;
border-radius: 8px;
box-shadow: 0 0 10px rgba(0, 0, 0, 0.1);
width: 350px;
}
.login-container h2 {
    margin-bottom: 20px;
    color: #333;
}

.login-container h5 {
    margin-bottom: 0px;
}


.login-container label {
    display: inline;
    margin-bottom: 5px;
    color: #333;
}

.login-container label span {
    color: red;
}

.login-container input[type="text"],
.login-container input[type="password"],
.login-container input[type="email"]
 {
    width: 100%;
    padding: 8px;
    margin-bottom: 15px;
    border: 1px solid #ccc;
    border-radius: 4px;
    box-sizing: border-box;
}
.login-container input[type="checkbox"] {
    margin-right: 5px;
}
.login-container .actions {
    display: flex;
    justify-content: space-between;
    align-items: center;
}
.login-container .actions a {
    color: #0066cc;
    text-decoration: none;
}
.login-container .actions a:hover {
    text-decoration: underline;
}
.login-container button {
    width: 100%;
	height: 60px;
    padding: 10px;
    background-color: #0066cc;
    border: none;
    border-radius: 4px;
    color: white;
    font-size: 16px;
    cursor: pointer;
}
.login-container button:hover {
    background-color: #005bb5;
}
.login-container .register-link {
    text-align: center;
    margin-top: 15px;
}



.bigger-font-block {
    font-size:1.2em;
    font-weight:300;
}
		

.data-table {
    width: 100%;
    border-collapse: collapse;
}

.data-table th,
.data-table td {
    border: 1px solid #ddd;
    padding: 8px;
    text-align: left;
}

.data-table th {
    background-color: #f2f2f2;
}

.data-table tr:nth-child(even) {
    background-color: #f9f9f9;
}

.data-table tr:hover {
    background-color: #e8f5e9;
}



.form-group {
    display: flex;
	max-width: 300px;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 15px;
}


/* TABS */
.tab-container {
    width: 100%;
    max-width: 600px;
    background-color: #fff;
   
	display: block;
}

.tabs {
    display: flex;
    
}

.tab {
    flex: 1;
    text-align: center;
    cursor: pointer;
    border: none;
    background-color: #f9f9f9;
    outline: none;
    transition: background-color 0.3s;
	font-size: 1.3em;
	font-weight: 300;
	 box-shadow: 0 0 10px rgba(0, 0, 0, 0.1);
}

.tab:hover {
    background-color: #e0e0e0;
}

.tab.active {
    background-color: #fff;
    border-bottom: 2px solid #007bff;
}

.tab-content {
    padding: 20px;
}

.tab-content-item {
    display: none;
}

.tab-content-item.active {
    display: block;
}



/* Helptext */
.helptext ul  {
    border: 1px solid #1d4d73;
    background-color: #e3f3ff;
    color: black;
    padding: 20px 20px 20px 30px;
    list-style: circle;
    line-height: 18px;
    border-radius: 5px;
    font-size: 0.85em;
}


/* Error styles */
.error {
    border: 1px solid red;
    background-color: #fdd;
    color: #d00;
    padding: 10px;
    list-style-type: none;
    margin: 0 0 20px 0;
    border-radius: 5px;
}

.success {
    border: 1px solid green;
    background-color: #deffec;
    color: darkgreen;
    padding: 10px;
    list-style-type: none;
    margin: 0 0 20px 0;
    border-radius: 5px;
}

.info {
    background-color: #def0ff; padding:20px; border-radius: 10px;
}

/* Define a keyframe that toggles opacity */
@keyframes flash {
  0%, 100% { opacity: 1; }
  50%      { opacity: 0; }
}

/* Apply the animation to your message list items */
.flash-messages li {
  /* control duration and repeat count here */
  animation: flash 1s ease-in-out 3;
}

/* Optional: add some padding, border, background */
.flash-messages {
  list-style: none;
  margin: 1em 0;
  padding: 0;
}
.flash-messages li {
  padding: 0.75em 1em;
  border-radius: 4px;
  background-color: #e0ffe0;  /* light green */
  border: 1px solid #0a0;     /* darker green */
  margin-bottom: 0.5em;
}


.email-validated  {
    color:green !important;
    float:right;
    font-weight:400;
}



/* Base style for the error list */
.errorlist {
    border: 1px solid red;
    background-color: #fdd;
    color: #d00;
    padding: 10px;
    list-style-type: none;
    margin: 0 0 20px 0;
    border-radius: 5px;
}

.errorlist ul {
    margin-bottom: 0;
    padding-left: 20px; /* Indent the list items */
    list-style-type: disc; /* Optional: specify the bullet style */
    list-style-position: outside; /* Ensure bullets are outside the padding */
}

/* Style for individual error messages */
.errorlist li {
    margin: 5px 0;
    font-weight: normal;
}

/* Special style for when there's only one error */
.errorlist li:only-child {
    margin: 0;
    list-style-type: none;
}



/* REGISTRATION */
.terms-label {
    font-size: 15px;
    color: #333;
    font-weight: 300;
    vertical-align: middle;
    margin-top: -4px;
}

.terms-link {
    color: #007bff;
    text-decoration: none;
}

.terms-link:hover {
    text-decoration: underline;
}


/* DASHBOARD */
/* #########################################################*/

/* Two-Column Responsive Layout */
.two-column-layout {
    display: flex;
    flex-wrap: wrap; /* Allows wrapping for smaller screens */
    gap: 20px; /* Spacing between columns */
}

.two-column-layout__left {
    flex: 3; /* 75% width */
    box-sizing: border-box;
}

.two-column-layout__right {
    flex: 1; /* 25% width */
    box-sizing: border-box;
}

/* Responsive Behavior for Smaller Screens */
@media (max-width: 800px) {
    .two-column-layout {
        flex-direction: column; /* Stacks columns vertically */
    }

    .two-column-layout__left, 
    .two-column-layout__right {
        flex: 1; /* Both take full width */
    }
}

.lc_button {
    background-color: #ffffff;
    color: rgb(12, 9, 61);
    border: 1px solid #4caf50;
    border-radius: 5px;
    cursor: pointer;
    transition: background-color 0.3s ease;
    font-size:0.9em;
    font-weight: 400;
    padding: 0 10px;
}
.lc_button a {
    text-decoration: none;

}




/* KITS */
/* #########################################################*/

.kits-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 20px;
}

.kits-header h3 {margin-bottom:0;}

/*.register-kit-btn {
    background-color: #007bff;
    color: white;
    border: none;
    border-radius: 5px;
    cursor: pointer;
    transition: background-color 0.3s ease;
    font-size:0.9em;
    font-weight: 400;
    padding: 0 10px;

}

.register-kit-btn:hover {
    background-color: #0056b3;
    color: white;

}

.register-kit-btn span {
    font-size:2em;
    vertical-align: sub;
    font-weight: 300;
}
*/













.kit-cards-container {
    display: flex;
    flex-wrap: wrap;
    gap: 20px;
}

.kit-card {
    display: flex;
    flex-direction: row;
    align-items: flex-start;
    text-align: left;
    background-color: white;
    border: 1px solid silver;
    border-radius: 8px;
    box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);
    max-width: 360px;
    width: 100%;
    text-align: left;
    margin-bottom: 30px;
    transition: transform 0.3s ease, box-shadow 0.3s ease;
}

.kit-card-link {
    display: flex;
    text-decoration: none;
    color: inherit;
    width: 100%;
    height: 100%;
    padding: 20px;
}

.kit-card:hover {
    box-shadow: 0 4px 8px rgba(0, 0, 0, 0.2);
    transform: translateY(-5px);
}

.kit-card-icon {
    width: 100px;
    height: 100px;
    margin-right: 20px;
    margin-bottom: 20px;
}

.kit-card-content {
    display: block;
    width: 100%;
}

.kit-card-title {
    font-size: 1.5em;
    margin-bottom: 0px;
}

.kit-card-status {
    font-size: 1em;
    color: #555;
    margin-bottom: 0px;
}

.kit-card-date {
    font-size: 0.9em;
    color: #555;
    margin-bottom: 0px;
}


/* View button */
.kit-card-view-btn {
    background-color: #007bff;
    color: white;
    border: none;
    border-radius: 5px;
    cursor: pointer;
    transition: background-color 0.3s ease;
    margin-top:10px;
    font-weight: 500;
}

.kit-card-view-btn:hover {
    background-color: #0056b3;
    color: white;
}

/* Responsive styles */
@media (min-width: 600px) {
    .kit-card {
        flex-direction: row;
        align-items: flex-start;
        text-align: left;
    }
}




/* KIT DETAILS */

.kit-details-container {
    max-width:600px;
}

.kit-info div {
    display: flex;
    border: 0px solid silver;
    border-radius: 5px;
    padding: 4px 8px 4px 8px;
    margin-right:10px;
    margin-top:5px;
    background-color: #f5f5f5;
    max-width:200px;
    line-height: 1em;
}

.kit-checklist ul {
    list-style-type: none;
    font-size: 1.4em;
    font-weight: 300;
}








/* QUESTIONNAIRE */

.questionnaire-container p {
    line-height: 1.2em;
    margin-bottom: 1rem;
}

.questionnaire-page-title {
    font-size:1.9em;
    line-height: 1.4em  !important;
    font-weight: 300;
    margin-bottom: 40px  !important;

}

.questionnaire-description {
    font-size:1.2em;
    line-height: 1.5em !important;
    font-weight: 300;
    margin-bottom: 40px !important;
}

.progress-container {
    position: relative;
    width: 100%;
    background-color: #f3f3f3;
    border-radius: 5px;
    overflow: hidden;
    margin-bottom: 15px;
}

.progress-bar {
    height: 25px;
    background-color: #a3f79c;
    width: 0%;
    transition: width 0.3s;
}

.progress-text {
    position: absolute;
    width: 100%;
    text-align: center;
    line-height: 25px;
    top: 0;
    color: darkgreen;
    text-shadow: 
        0px 0px 4px white;  /* White shadow with blur */
        
}



/* BUTTONS */


.questionnaire-buttons {
    display: flex;
    align-items: center;
}

.questionnaire-buttons .back-button {
    width:150px;
    background-color: transparent;
    color: gray;
    border: 1px solid gray;
    margin-right: 10px;
}

.questionnaire-buttons .next-button {
    width: 100%;
}


.questionnaire-container .question {
    font-size: 1.4em;
    font-weight:300;
    margin-top: 40px;
}

.answer-note {
    font-size: 16px;
    font-weight:300;
    margin-left:5px;
}




/* RADIO FIELDS */

.answer-radio {
    margin-top: 1em;
    margin-left: 0;
    font-weight:300;
}

.answer-radio input[type="radio"] {
    transform: scale(1.4);
    margin-right: 20px;
    margin-bottom: 0;
}

.answer-radio label {
    display: flex;
    align-items: stretch;
    border: 1px solid silver;
    border-radius: 5px;
    padding: 10px 5px 10px 20px;
    font-weight: 300;
    margin: 10px 0 0 0;
    line-height: 1.1em;
}

.answer-radio li {
    list-style-type: none;
    margin-bottom: 0.4em;
    font-size: 1.1em;
    font-weight: 300;
}

.answer-radio .answer-note {
   margin: 0 0 30px 0;
}



/* SELECT FIELDS */

.answer-select {
    font-size: 1.1em;
    font-weight:300;
    margin-bottom: 2em;
}

.answer-select select {
    font-size: 1em;
    font-weight:300;
    margin-bottom: 5px
}

.answer-select .answer-note {
    
}



/* CHECKBOX FIELDS */

.answer-checkbox {
    margin-top: 1em;
    margin-left: 0;
    font-weight:300;
}

.answer-checkbox input[type="checkbox"] {
    transform: scale(1.4);
    margin-right: 20px;
    margin-bottom: 0;
}

.answer-checkbox label {
    display: flex;
    align-items: stretch;
    border: 1px solid silver;
    border-radius: 5px;
    padding: 10px 5px 10px 20px;
    font-weight: 300;
    margin: 10px 0 0 0;
    line-height: 1.1em;
}

.answer-checkbox label span {
    color:black;
    display: inline-block;
    vertical-align: top;
    line-height: 1.33em;
}

.answer-checkbox .answer-note {
   
}

.answer-checkbox li {
    list-style-type: none;
    margin-bottom: 0.4em;
    font-size: 1.1em;
    font-weight: 300;
}


/* TEXT FIELDS */

.answer-text {
    font-size: 1.4em;
    font-weight:300;
    margin-bottom: 2em;
}
.answer-text input[type="text"] {
    margin-bottom: 5px;
    font-size: 16px;
    font-weight: 300;
}
.answer-text .answer-note {
   
}



/* PRODUCTS */

.product-container {
    padding:40px;

}


.product-column {
    display: flex;
    align-content: stretch;
    justify-content: space-around;
    padding-bottom: 40px;
}


/* PASSWORD VALIDATOR */

.password-container {
    position: relative;
}

.field-icon {
    position: absolute;
    right: 10px;
    top: 50%;
    transform: translateY(-100%);
    
    cursor: pointer;
    color:silver;
}

#password-requirements {
	background-color: #ecf3ff;
	padding: 20px;
	border-radius: 3px;
	margin-bottom: 10px;
    border-radius: 10px;
    display: none; /* Hide by default */
}

#password-requirements p {
	margin: 0 0 10px 0;
	font-weight: 400;
    font-size: 1em;
}

#password-requirements ul {
    list-style-type: circle;
    padding: 0;
    margin: 0px 0 0 20px;
    line-height: initial;
    font-size: 0.9em;
}

#password-requirements li {
	margin-bottom: 5px;
}

#password-requirements li.valid {
	color: green;
}

#password-requirements li.invalid {
	color: red;
}



.checkbox-container {
    display: flex;
    align-items: center;
    margin-bottom: 10px;
    background-color: #edffe5;
    padding:10px;
    font-weight: 300;
    border-radius: 6px;
}

.checkbox-container input[type="checkbox"] {
    margin: 0 20px 0 10px;
    margin-bottom: 0;
    transform: scale(1.5);
}

.checkbox-container label {
    margin: 0;
    font-weight: 400;
    line-height: 1.3em;
}
.checkbox-container label a {
    text-decoration: none;
    color: #1F67C5;
    font-weight: 400;
}



/* Modal container */
.modal {
	display: none;
	position: fixed;
	z-index: 1;
	left: 0;
	top: 0;
	width: 100%;
	height: 100%;
	overflow: auto;
	background-color: rgb(0,0,0);
	background-color: rgba(0,0,0,0.4);
    
}

/* Modal content */
.modal-content {
	background-color: #fefefe;
	margin: 15% auto;
	padding: 40px;
	border: 1px solid #888;
	width: 80%;
	max-width: 1000px;
    border-radius: 10px;
}

/* Close button */
.close {
	color: #aaa;
	float: right;
	font-size: 28px;
	font-weight: bold;
    position: relative;
    top:-50px;
    font-size: 50px;;

}
/* Full page modal on mobile */
@media (max-width: 600px) {
    .modal-content {
        width: 90%;
        height: 100%;
        margin: 0;
        padding: 20px;
        border: none;
        border-radius: 0;
        box-shadow: none;
    }

    .modal-content .terms-content {
        max-height: calc(100% - 60px); /* Adjust according to padding and other elements */
        overflow-y: auto;
    }

    .modal-content h2 {
        margin-top: 0;
    }
    .close {
        top:-30px;
    }
}

.close:hover,
.close:focus {
	color: black;
	text-decoration: none;
	cursor: pointer;
}

/* Content within the modal */
.terms-content {
	max-height: 600px;
	overflow-y: auto;
}



/*PROVIDERS*/
/* ******************************************************* */

.provider-logo {
    max-width: 100%;   /* Ensures the image won't be larger than its container */
    height: auto;      /* Maintains the aspect ratio */
    display: block;    /* Removes the inline block space */
   max-height: 40px;  /* Ensures the logo shrinks to fit the container's height if necessary */
}
@media (max-width: 800px) {
    .provider-logo {
        max-width: 300px;
    }
}

input.provider-form[type="text"],
input.provider-form[type="email"],
input.provider-form[type="url"] {
    width: 100%;
}

.review-test-textarea {
    width: 100%;
    height: 300px;
    resize: vertical; 
}

/* Container for the word and its footnote */
.footnote {
    display: inline-block;
    position: relative;
    vertical-align: baseline; /* Align with the rest of the text */
}

/* Footnote text styling */
.footnote-text {
    display: block;
    font-family:sans-serif;
    font-size: 0.4em; /* Smaller font size for the footnote */
    position: absolute;
    left: 0px; 
    top:-12px;/* Align to the left of the parent element */
    white-space: nowrap; /* Prevents the footnote text from wrapping */
    color: gray;
}

h3 .footnote-text  {
    font-size: 0.45em;
}

.patient-name {
    font-family: Georgia, 'Times New Roman', Times, serif;
}
.patient-name a {
    color:#003a78;
    font-size: 18px;;
    text-decoration: none;;
}
.patient-name a:hover {
    color:#04b0ff;
}

.main-button  {
    background-color: #0066cc;
    border: none;
    border-radius: 4px;
    color: white;
    cursor: pointer;
}

.main-button:hover {
    background-color: #003a78;
    color: white;
}

.info-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 0.6rem;
}

.info-header h4 {
    margin: 0; /* Remove default margin for better alignment */
}

.navigation-buttons a {
    text-decoration: none;
}

.status-date {
    font-size: 0.8em;
    color: #555;
}

.provider-kit-list-filter {
    display: flex;
    justify-content:space-between;
    align-items: center;
    margin-bottom: 20px;
}

.provider-kit-list-filter a {
    border: 1px solid rgb(205, 205, 205);
    padding:5px;
    margin:5px;
    border-radius: 5px;
    text-decoration: none;
}


/* TOGGLES */
/* #########################################################*/

/* Styles for the toggle */
.toggle {
    position: relative;
    display: inline-block;
    width: 40px;
    height: 20px;
}
.toggle input {
    display: none;
}
.toggle .slider {
    position: absolute;
    cursor: pointer;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background-color: #ccc;
    transition: 0.4s;
    border-radius: 20px;
}
.toggle input:checked + .slider {
    background-color: #4caf50;
}
.toggle .slider:before {
    position: absolute;
    content: "";
    height: 14px;
    width: 14px;
    left: 3px;
    bottom: 3px;
    background-color: white;
    transition: 0.4s;
    border-radius: 50%;
}
.toggle input:checked + .slider:before {
    transform: translateX(20px);
}