:root {
    --5blue: #033F63;
    --3green: #03D471;
    --4gray: #618985;
    --1lightgray: #CEDFDF;
    --7black: #121417;
    --2darkgray: #373F47;
    --white: #F4F5F6;
}

body{ margin: 0; background: var(--1lightgray);}
body,h1,h2,p,input{ color: var(--7black); font-family: Arial, Helvetica, sans-serif;}
a{text-decoration: underline; cursor: pointer; color: inherit;}

h1{ display: inline-block; margin-top: 0;}
ul{ margin: 0; padding: 0;}

/* header styles */
header{ width: 100%; height: 130px; background: var(--5blue); box-sizing: border-box; box-shadow: 0 2px 10px rgba(0,0,0,0.4); color: var(--1lightgray);}
.headerFlexbox{ width: 1000px; margin: 0 auto; padding: 25px 0; display: flex; justify-content: space-between; align-items: center;}
header .wideFlexbox div { width: 500px;}

img.svgGA4 { height: 80px; vertical-align: middle; content: url("data:image/svg+xml;charset=UTF-8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 936 936'%3E%3Cpath fill='%23033F63' id='Layer_1' data-name='Layer 1' d='M0 0h936v936H0z'/%3E%3Cpath fill='%2303D471' d='M258 267.1c25.58 14.29 52.78 15.31 81.52 17.82 20.54 5.52-30.64-62.91-35.74-65.78-19.47-9-38.93-21.9-61.05-21.72-10.87-.69-12.18-15.45-19.25-21.77a5.49 5.49 0 0 1-1-6c7.47-33.06 53-5.28 74.29-1 20.24 5.25 36.83 20.79 51.88 34 24.18 21.24 24.79 52.94 34.5 81.73 2 39.57-52.27 39.29-80.74 43.86-67 2-124.68-35.57-157.81-91.72-15.47-42.05-39.44-92.54-11.86-134.55-2.89-15.33 73.39-9.23 81.39-2.34 6.25 5.84 22.11 2.41 23.32 11.21-.55 3.74-2.61 6.09-6.81 6.9a276.79 276.79 0 0 0-57.26 16.24c-8.64-.78-7 3.83-5.08 9-.46 53.02 39.04 106.68 89.7 124.12Z' id='Leaf'/%3E%3Cg fill='%23cedfdf' id='GA_icon' data-name='GA icon'%3E%3Cpath d='M593.64 306.29v466.94c0 52.24 36.09 81.36 74.29 81.36 35.37 0 74.29-24.76 74.29-81.36V309.82c0-47.89-35.38-77.82-74.29-77.82s-74.29 33-74.29 74.29Zm-194.56 237v229.94c0 52.24 36.09 81.36 74.29 81.36 35.37 0 74.29-24.76 74.29-81.36v-226.4c0-47.9-35.38-77.82-74.29-77.82s-74.29 32.99-74.29 74.28Z'/%3E%3Ccircle cx='278.81' cy='780.3' r='74.29'/%3E%3C/g%3E%3C/svg%3E");}
img.svgFunnel { height: 80px; vertical-align: middle; content: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 936 936'%3E%3Cpath fill='%23094063' d='M0 0h936v936H0z'/%3E%3Cpath fill='%23CEDFDF' d='m823.82 149.97-100.41 98.38c-4.71 4.61-11.45 7.25-18.54 7.25H231.13c-7.08 0-13.83-2.64-18.54-7.25l-100.41-98.38c-2.69-2.64-4.18-6.04-4.18-9.57 0-7.95 7.4-14.4 16.53-14.4h686.93c4.05 0 7.96 1.29 10.98 3.64 6.84 5.28 7.45 14.38 1.38 20.33M263.94 413.63c3.38 8.82 12.85 14.77 23.53 14.77h361.07c10.68 0 20.15-5.95 23.53-14.77l33.07-86.4c4.33-11.32-2.69-23.55-15.69-27.32-2.53-.73-5.18-1.11-7.84-1.11H254.4c-13.7 0-24.8 9.67-24.8 21.6 0 2.32.43 4.63 1.27 6.83zm310.63 177.95c-4.6 6.01-12.34 9.62-20.64 9.62H382.07c-8.29 0-16.04-3.61-20.64-9.62l-66.14-86.4c-2.72-3.55-4.17-7.72-4.17-11.98 0-11.93 11.1-21.6 24.8-21.6h304.14c4.9 0 9.68 1.26 13.76 3.63 11.4 6.62 14.48 20.03 6.88 29.95zm-36.12 165.51c-2.52 9.88-12.59 16.91-24.21 16.91h-92.48c-11.62 0-21.69-7.03-24.21-16.91l-22.05-86.4c-.39-1.54-.59-3.11-.59-4.69 0-11.93 11.1-21.6 24.8-21.6h136.57c1.81 0 3.61.17 5.38.51 13.37 2.59 21.8 14.13 18.83 25.77z'/%3E%3Cpath fill='%234BB96C' d='M180.68 830.67c25.58 14.29 52.78 15.31 81.52 17.82 20.54 5.52-30.64-62.91-35.74-65.79-19.46-9.02-38.93-21.9-61.05-21.72-10.87-.69-12.18-15.45-19.24-21.77-1.58-1.74-1.8-3.78-1.01-5.95 7.47-33.06 53.02-5.28 74.29-.98 20.24 5.25 36.84 20.78 51.88 34 24.19 21.24 24.79 52.93 34.5 81.73 2.05 39.57-52.27 39.28-80.74 43.85-66.95 1.96-124.68-35.57-157.81-91.72-15.47-42.05-39.44-92.54-11.86-134.55-2.9-15.33 73.39-9.23 81.39-2.34 6.24 5.85 22.11 2.41 23.32 11.21-.56 3.75-2.61 6.1-6.81 6.9-19.61 3.32-38.98 8.85-57.27 16.25-8.64-.79-6.95 3.83-5.07 8.95-.49 52.98 39.02 106.67 89.7 124.11'/%3E%3C/svg%3E")}

header span { font-size: 24px; font-weight: 400; vertical-align: middle;}
header span strong { font-size: 30px; font-weight: 600; }

/* content styles */
.content{ max-width: 800px; margin: 40px auto 0;}

/* settings list styles */

/* this is the flexbox container */
.settings-list { padding-bottom: 25px;}
.settings-list li{ padding: 20px; margin: 10px auto; font-size: 16px; list-style-type: none; background: var(--white); border-radius: 10px; box-shadow: 2px 2px 4px rgba(0,0,0,0.3);}
.flexContainer { width: 100%; display: flex; justify-content: space-between; align-items: center;}
.flexContainer:first-of-type { border-bottom: 2px solid var(--7black); padding-top: 5px; margin-bottom: 10px;}
.flexContainer .titleCol{ width: 125px;}
.flexContainer .valueCol{ width: 375px;}
.flexContainer .buttonCol { width: 140px; margin: 5px; font-size: 14px;}
.flexContainer .buttonCol button { display: none;}
.flexContainer .buttonCol button.active{ display:block; width: 140px}
.flexContainer .icon{ width: 20px;}
.flexContainer .icon a{ cursor: pointer;}

/* footer styles */
footer { width: 100%; height: 120px; background: var(--5blue); box-sizing: border-box; color: var(--1lightgray); position: fixed; bottom: 0;}
.footerFlexbox{ width: calc(100px + 50vw); margin: 0 400px 0 auto; padding: 25px 0 10px 0; display: flex; flex-wrap: wrap; justify-content: space-between; align-items: center;}
footer a { color: var(--1lightgray);}

/* auth modal styles */
.modal{ width: 500px; margin: 100px auto; border-radius: 10px; background: var(--white); color: var(--7black); box-shadow: 0 0 8px rgba(0,0,0,0.1); text-align: center;}
.modal h2 { padding-top: 30px; margin: 0;}
.auth{width: 100%; height: 100%; position: fixed; background: var(--4gray); display: none; z-index: 1;}
.auth.open{display: block;}

.auth .modal{ padding: 0; display: none; box-shadow: 3px 3px 10px rgba(0,0,0,0.5);}
.auth .modal.active{display: block;}
.auth .passBlock{ display: none;}
.auth .passBlock.active{ display: block;}

.head{ width: 100%; height: 100px; background: var(--1lightgray); box-sizing: border-box; color: var(--5blue); border-radius: 10px 10px 0 0; padding-top: 20px;}
.head span { font-size: 18px; font-weight: 400; vertical-align: middle; margin-left: 20px;}
.head span strong { font-size: 24px; font-weight: 600; }
.head img.svgGA4, .head img.svgFunnel { height: 60px; border-radius: 10px}

.modal form {padding: 30px; text-align: left;}
.modal form label {}
.modal form label i {margin-left: 10px; font-style: normal; cursor: pointer}
.modal form input {margin: 5px 0 25px 0; border: 1px solid var(--4gray); background: #fff; border-radius: 5px;}
.modal form input[type=radio] { margin: 0 5px 0 0;}
.modal form button {width: 150px; margin-right: 15px;}
.modal form span {margin-left: 100px;}
.modal form p.error { background: pink;}

.foot{width: 100%; height: 80px; padding-top: 30px; background: var(--5blue); box-sizing: border-box; color: var(--1lightgray); bottom: 0; border-radius: 0 0 10px 10px;}

/* new domain modal styles */
.new-request, .new-tags{ width: 100%; height: 100%; position: fixed; background: rgba(0,0,0,0.5); z-index: 1; display: none;}
.new-request.open, .new-tags.open{ display: block;}

/* form element styles */
input[type=text],input[type=email],input[type=password]{ display: block; margin: 8px 0; padding: 8px 2px; border-width: 0 0 2px 0; width: 100%; background-color: var(--white); border-color: var(--4gray);}
button{ padding: 8px 12px; background: var(--3green); color: var(--7black); border: 0; font-size: 13px; font-weight: bold; font-family: inherit; cursor: pointer; border-radius: 8px;}
button[disabled=true]{ background: var(--4gray); cursor:default}

/* debug toggle https://www.youtube.com/watch?v=N8BZvfRD_eU */
.debugToggle{opacity: 0; position: absolute; left: -9000px; top: -9000px}
.debugToggle + label{display: flex; align-items: center; position: relative; cursor: pointer;}
.debugToggle + label::before {content: ""; width: 48px; height: 24px; background-color: #9c9c9c; border-radius: 12px; margin-right: 5px; transition: 200ms ease-in-out;}
.debugToggle:focus + label::before {outline: 2px solid var(--2darkgray)}
.debugToggle + label::after {position: absolute; left: 2px; content: ""; width: 20px; height: 20px; background-color: var(--white); border-radius: 10px; transition: 200ms ease-in-out;}
.debugToggle:checked + label::after {transform: translate(24px)}
.debugToggle:checked + label::before {background-color: var(--3green);}

/* conversion target radio */
.convToggle {font-size: 13px; cursor: pointer; padding: 8px 10px; border: 2px solid var(--3green); display: inline-block;}
.convToggle:first-of-type {border-radius: 8px 0 0 8px; border-right: none; }
.convToggle:last-of-type { border-radius: 0 8px 8px 0; border-left: none; }
.convToggle input {appearance: none; margin: 0;}
.convToggle:has(input:checked) {background-color: var(--3green); font-weight: bold; cursor: default;}

/* icons */
img.svgTrash { content: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='20' fill='currentColor' class='bi bi-trash3' viewBox='0 0 16 16'%3E%3Cpath d='M6.5 1h3a.5.5 0 0 1 .5.5v1H6v-1a.5.5 0 0 1 .5-.5ZM11 2.5v-1A1.5 1.5 0 0 0 9.5 0h-3A1.5 1.5 0 0 0 5 1.5v1H2.506a.58.58 0 0 0-.01 0H1.5a.5.5 0 0 0 0 1h.538l.853 10.66A2 2 0 0 0 4.885 16h6.23a2 2 0 0 0 1.994-1.84l.853-10.66h.538a.5.5 0 0 0 0-1h-.995a.59.59 0 0 0-.01 0H11Zm1.958 1-.846 10.58a1 1 0 0 1-.997.92h-6.23a1 1 0 0 1-.997-.92L3.042 3.5h9.916Zm-7.487 1a.5.5 0 0 1 .528.47l.5 8.5a.5.5 0 0 1-.998.06L5 5.03a.5.5 0 0 1 .47-.53Zm5.058 0a.5.5 0 0 1 .47.53l-.5 8.5a.5.5 0 1 1-.998-.06l.5-8.5a.5.5 0 0 1 .528-.47ZM8 4.5a.5.5 0 0 1 .5.5v8.5a.5.5 0 0 1-1 0V5a.5.5 0 0 1 .5-.5Z'/%3E%3C/svg%3E");}
img.svgWarning { margin-left: 5px; content: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='20' fill='currentColor' viewBox='103.55 67.2 492.91 425.61'%3E%3Cpath d='M350 67.203c-15.051 0-28.812 7.477-36.574 20.477l-204.05 342.48c-7.762 13.035-7.777 28.977 0 42 7.55 12.633 21.141 20.688 36.227 20.648h408.8c15.086.055 28.676-8.016 36.227-20.648 7.781-13.023 7.77-28.961 0-42L386.58 87.68c-7.762-13-21.523-20.477-36.574-20.477zm0 33.602c2.77 0 6.535 2.074 7.7 4.023l204.05 342.48c1.163 1.954 1.167 5.747 0 7.7-1.403 2.343-4.579 4.207-7.352 4.199h-408.8c-2.774.004-5.95-1.856-7.352-4.2-1.168-1.952-1.164-5.745 0-7.699l204.05-342.48c1.164-1.949 4.93-4.023 7.7-4.023zm0 84c-18.559 0-33.602 15.043-33.602 33.602l5.602 106.4c0 15.465 12.535 28 28 28s28-12.535 28-28l5.601-106.4c0-18.559-15.043-33.602-33.602-33.602zm0 179.2c-21.648 0-39.199 17.551-39.199 39.199s17.551 39.199 39.199 39.199 39.199-17.551 39.199-39.199-17.551-39.199-39.199-39.199z'/%3E%3C/svg%3E");}
img.svgHelptab { content: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='20' fill='currentColor' viewBox='0 0.1 22 22'%3E%3Cpath d='M11 2.1v2H3c-.6 0-1 .4-1 1v14c0 .6.4 1 1 1h14c.6 0 1-.4 1-1v-8h2v8c0 1.7-1.3 3-3 3H3c-1.7 0-3-1.3-3-3v-14c0-1.7 1.3-3 3-3h8z'%3E%3C/path%3E%3Cpath d='M21 .1s.1 0 0 0h.6s.1 0 .1.1l.1.1-.1-.1c.1 0 .1.1.2.2l.1.1v5.7h-2V3.5l-4.1 4.1c-.4.4-1 .4-1.3.1l-.1-.1c-.4-.4-.4-1 0-1.4l.1-.1 4-4H16v-2h5zM9.8 5.6c-2.7 0-4.1 1.9-4.4 3.8-.1.4.3.7.7.7h1c.3 0 .6-.2.6-.6.1-.7.6-1.7 2.1-1.7 1.1 0 1.6.6 1.8 1 .3.5.2 1.1-.1 1.6-.3.5-.6.7-1 .9-.9.6-1.6 1.2-1.7 3 0 .4.3.7.7.7h1c.3 0 .6-.3.7-.6.1-.8.3-.9.7-1.2.4-.3 1-.7 1.5-1.4.9-1.2 1-2.7.3-4-.7-1.3-2.2-2.2-3.9-2.2z'%3E%3C/path%3E%3Ccircle cx='9.9' cy='17.5' r='1.4'%3E%3C/circle%3E%3C/svg%3E");}
img.svgReload { content: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='20' fill='currentColor' viewBox='1 0.28 13.72 13.72'%3E%3Cpath fill-rule='evenodd' d='M8 3a5 5 0 1 0 4.546 2.914.5.5 0 0 1 .908-.417A6 6 0 1 1 8 2z'%3E%3C/path%3E%3Cpath d='M8 4.466V.534a.25.25 0 0 1 .41-.192l2.36 1.966c.12.1.12.284 0 .384L8.41 4.658A.25.25 0 0 1 8 4.466'%3E%3C/path%3E%3C/svg%3E");}

.tooltip { position: relative; display: inline-block; /*border-bottom: 1px dotted black;*/}
  
.tooltip .tooltiptext { visibility: hidden; width: 300px; background-color: var(--7black); color: var(--1lightgray); text-align: center; border-radius: 6px; padding: 5px; position: absolute; z-index: 1; bottom: 150%; left: 50%; margin-left: -150px;}
  
.tooltip .tooltiptext::after /*arrow*/ { content: ""; position: absolute; top: 100%; left: 50%; margin-left: -5px; border-width: 5px; border-style: solid; border-color: black transparent transparent transparent;}
  
.tooltip:hover .tooltiptext { visibility: visible;}

/* loader animation https://blog.hubspot.com/website/css-loading-animation */
.loader {
    display: none;
	position: fixed;
	top: calc(50% - 75px);
	left: calc(50% - 75px);
	margin: auto;
	border: 20px solid var(--5blue);
	border-radius: 50%;
	border-top: 20px solid var(--3green);
	width: 150px;
	height: 150px;
	animation: spinner 2s linear infinite;
	z-index: 2;
}
@keyframes spinner {
	0% {
		transform: rotate(0deg);
	}
	100% {
		transform: rotate(360deg);
	}
}