ul {
    list-style: none; /* Remove default bullets */
    padding: 0;
    margin: 0;
}

li {
    padding-top: 0.5em;
    text-indent: -.7em;
}

ul li::before {
    content: "■ "; /* Add content: \2022 is the CSS Code/unicode for a bullet */
    color: #ff8a00; /* Change the color */
    font-weight: bold; /* If you want it to be bold */
    display: inline-block; /* Needed to add space between the bullet and the text */
    width: 0.6em; /* Also needed for space (tweak if needed) */
    margin-left: 1.4em; /* Also needed for space (tweak if needed) */
}

.tippie_logo {
    display: block;
    margin-left: auto;
    margin-right: auto;
    width: 100px;
    padding: 35px;
}

body {
    font-family: 'Raleway', sans-serif;
}

input {
    font-size: 16px;
    color: #000;
    /*width: 300px;*/
}

.cont_textarea {
    -webkit-box-sizing: border-box;
    -moz-box-sizing: border-box;
    box-sizing: border-box;
    display: block;
    position: relative;
    width: 100%;
    height: 68px;
    border-radius: 2px;
    border: 1px solid #ccc;
    resize: none;
    padding: 8px 8px;
    margin: 8px 0;
    font-size: 16px;
    font-family: 'Raleway', sans-serif;
}

.button_container {
    display: flex;
    justify-content: center;
    column-gap: 30px;
}

.button_label {
    background: #ff8a00;
    /*width: 200px;*/
    /*height: 54px;*/
    /*padding-left: 20px;*/
    /*padding-right: 20px;*/
    /*padding-top: 16px;*/
    /*padding-bottom: 16px;*/
    padding: 16px 20px;
    border: none;
    display: inline-block;
    font-size: 18px;
    border-radius: 8px;
    color: #ffffff;
}

p.ex1 {
    padding-left: 30px;
}

h4.ex1 {
    padding-left: 30px;
}

textarea {
    -webkit-box-sizing: border-box;
    -moz-box-sizing: border-box;
    box-sizing: border-box;
    width: 350px;
    padding: 8px 8px;
    margin: 8px 0;
    resize: none;
    font-size: 16px;
    font-family: 'Raleway', sans-serif;
}

/* The container for TEXT INPUT label */
.input_text_label {
    display: inline-block;
    vertical-align: top;
    width: 240px;
    padding-top: 8px;
    padding-bottom: 8px;
}

/* The container for TEXT INPUT input */
.input_text {
    -webkit-box-sizing: border-box;
    -moz-box-sizing: border-box;
    box-sizing: border-box;
    width: 350px;
    padding: 8px 8px;
    margin: 8px 0;
}

/* The container for RADIO button */
.cont_rad_btn {
    display: block;
    position: relative;
    width: 100%;
    padding-left: 30px;
    padding-top: 0;
    margin-bottom: 12px;
    cursor: pointer;
    font-size: 14pt;
    -webkit-user-select: none;
    -moz-user-select: none;
    -ms-user-select: none;
    user-select: none;
}

/* Hide the browser's default radio button */
.cont_rad_btn input {
    position: absolute;
    opacity: 0;
    cursor: pointer;
}

/* Create a custom radio button */
.checkmark {
    position: absolute;
    top: 0;
    left: 0;
    height: 20px;
    width: 20px;
    background-color: #eee;
    border-radius: 50%;
}

/* On mouse-over, add a grey background color */
.cont_rad_btn:hover input ~ .checkmark {
    background-color: #ccc;
}

/* When the radio button is checked, add a blue background */
.cont_rad_btn input:checked ~ .checkmark {
    background-color: #ff8a00;
}

/* Create the indicator (the dot/circle - hidden when not checked) */
.checkmark:after {
    content: "";
    position: absolute;
    display: none;
}

/* Show the indicator (dot/circle) when checked */
.cont_rad_btn input:checked ~ .checkmark:after {
    display: block;
}

/* Style the indicator (dot/circle) */
.cont_rad_btn .checkmark:after {
    top: 6px;
    left: 6px;
    width: 8px;
    height: 8px;
    border-radius: 50%;
    background: white;
}

/* The container for CHECKBOX */
.cont_checkbox {
    display: block;
    position: relative;
    width: 100%;
    padding-left: 30px;
    padding-top: 0;
    margin-bottom: 12px;
    cursor: pointer;
    font-size: 14pt;
    -webkit-user-select: none;
    -moz-user-select: none;
    -ms-user-select: none;
    user-select: none;
}

/* Hide the browser's default checkbox */
.cont_checkbox input {
    position: absolute;
    opacity: 0;
    cursor: pointer;
    height: 0;
    width: 0;
}

/* Create a custom checkbox */
.checkmark_checkbox {
    position: absolute;
    top: 0;
    left: 0;
    height: 25px;
    width: 25px;
    background-color: #eee;
}

/* On mouse-over, add a grey background color */
.cont_checkbox:hover input ~ .checkmark_checkbox {
    background-color: #ccc;
}

/* When the checkbox is checked, add a yellow background */
.cont_checkbox input:checked ~ .checkmark_checkbox {
    background-color: #ff8a00;
}

/* Create the checkmark/indicator (hidden when not checked) */
.checkmark_checkbox:after {
    content: "";
    position: absolute;
    display: none;
}

/* Show the checkmark when checked */
.cont_checkbox input:checked ~ .checkmark_checkbox:after {
    display: block;
}

/* Style the checkmark/indicator */
.cont_checkbox .checkmark_checkbox:after {
    left: 9px;
    top: 5px;
    width: 5px;
    height: 10px;
    border: solid white;
    border-width: 0 3px 3px 0;
    /* -webkit-transform: rotate(45deg); */
    -ms-transform: rotate(45deg);
    transform: rotate(45deg);
}


/* Radio Button Tippie recommendation from 1 to 10 */
.cont_rec {
    list-style-type: none;
    margin: 25px 0 0 0;
    padding: 0;
    display: flex;
    justify-content: space-between;
    column-gap: 5px;
}

.cont_rec li {
    height: 40px;
    position: relative;
    flex-grow: 1;
    cursor: pointer;
}

.cont_rec li:hover {
    background: #ccc;
}

.cont_rec label,
.cont_rec input {
    display: block;
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    text-align: center;
}

.cont_rec input[type="radio"] {
    opacity: 0.01;
    z-index: 100;
    width: 0;
}

.cont_rec input[type="radio"]:checked + label,
.Checked + label {
    background: #ff8a00;
}

.cont_rec label {
    padding: 5px;
    border: 1px solid #ccc;
    cursor: pointer;
    z-index: 90;
}