/* W3.CSS 4.15 December 2020 by Jan Egil and Borge Refsnes */

html {
    box-sizing: border-box
}

*,
*:before,
*:after {
    box-sizing: inherit
}


/* Extract from normalize.css by Nicolas Gallagher and Jonathan Neal git.io/normalize */

html {
    -ms-text-size-adjust: 100%;
    -webkit-text-size-adjust: 100%
}

body {
    margin: 0;
}

article,
aside,
details,
figcaption,
figure,
footer,
header,
main,
menu,
nav,
section {
    display: block
}

summary {
    display: list-item
}

audio,
canvas,
progress,
video {
    display: inline-block
}

progress {
    vertical-align: baseline
}

audio:not([controls]) {
    display: none;
    height: 0
}

[hidden],
template {
    display: none
}

a {
    background-color: transparent
}

a:active,
a:hover {
    outline-width: 0
}

abbr[title] {
    border-bottom: none;
    text-decoration: underline;
    text-decoration: underline dotted
}

b,
strong {
    font-weight: 1000
}

dfn {
    font-style: italic
}

mark {
    background: #ff0;
    color: #000
}

small {
    font-size: 80%
}

sub,
sup {
    font-size: 75%;
    line-height: 0;
    position: relative;
    vertical-align: baseline
}

sub {
    bottom: -0.25em
}

sup {
    top: -0.5em
}

figure {
    margin: 1em 40px
}

img {
    border-style: none
}

code,
kbd,
pre,
samp {
    font-family: monospace, monospace;
    font-size: 1em;
    font-weight:200;
}

hr {
    box-sizing: content-box;
    height: 0;
    overflow: visible
}

button,
input,
select,
textarea,
optgroup {
    font: inherit;
    margin: 0
}

optgroup {
    font-weight: bold
}

button,
input {
    overflow: visible
}

button,
select {
    text-transform: none
}

button,
[type=button],
[type=reset],
[type=submit] {
    -webkit-appearance: button
}

button::-moz-focus-inner,
[type=button]::-moz-focus-inner,
[type=reset]::-moz-focus-inner,
[type=submit]::-moz-focus-inner {
    border-style: none;
    padding: 0
}

button:-moz-focusring,
[type=button]:-moz-focusring,
[type=reset]:-moz-focusring,
[type=submit]:-moz-focusring {
    outline: 1px dotted ButtonText
}

fieldset {
    border: 1px solid #c0c0c0;
    margin: 0 2px;
    padding: .35em .625em .75em
}

legend {
    color: inherit;
    display: table;
    max-width: 100%;
    padding: 0;
    white-space: normal
}

textarea {
    overflow: auto
}

[type=checkbox],
[type=radio] {
    padding: 0
}

[type=number]::-webkit-inner-spin-button,
[type=number]::-webkit-outer-spin-button {
    height: auto
}

[type=search] {
    -webkit-appearance: textfield;
    outline-offset: -2px
}

[type=search]::-webkit-search-decoration {
    -webkit-appearance: none
}

::-webkit-file-upload-button {
    -webkit-appearance: button;
    font: inherit
}


/* End extract */

html,
body {
    font-family: 'Helvetica Neue', Helvetica, Arial, sans-serif;
    font-weight: 200 !important;
    font-size: 15px;
    color: #44385C;
    background-color: #FAFAFA;
    line-height: 1.5;
    height: 100%;
    margin: 0;
    padding: 0;
}

html {
    overflow-x: hidden
}

h1 {
    font-size: 36px
}

h2 {
    font-size: 30px
}

h3 {
    font-size: 24px
}

h4 {
    font-size: 20px
}

h5 {
    font-size: 18px
}

h6 {
    font-size: 16px
}

.w3-serif {
    font-family: 'Helvetica Neue', Helvetica, Arial, sans-serif;
    font-weight: 500;
}

.w3-sans-serif {
    font-family: 'Helvetica Neue', Helvetica, Arial, sans-serif;
    font-weight: 500;
}

.w3-cursive {
    font-family: cursive;
    font-weight: 500;
}

.w3-monospace {
    font-family: monospace;
    font-weight: 500;
}

h1,
h2,
h3,
h4,
h5,
h6 {
    font-family: 'Helvetica Neue', Helvetica, Arial, sans-serif;
    font-weight: 500;
    margin: 10px 0
}

.w3-wide {
    letter-spacing: 4px
}

hr {
    border: 0;
    border-top: 1px solid #eee;
    margin: 20px 0
}

.w3-image {
    max-width: 100%;
    height: auto
}

img {
    vertical-align: middle
}

a {
    color: inherit
}

td label {
    color: black;
}

.w3-table,
.w3-table-all {
    border-collapse: collapse;
    border-spacing: 0;
    width: 100%;
    display: table;
    color: black;
}

.w3-table-all {
    border: 1px solid #ccc
}

.w3-bordered tr,
.w3-table-all tr {
    border-bottom: 1px solid #ddd
}

.w3-striped tbody tr:nth-child(even) {
    background-color: #f1f1f1
}

.w3-table-all tr:nth-child(odd) {
    background-color: #fff
}

.w3-table-all tr:nth-child(even) {
    background-color: #f1f1f1
}

.w3-hoverable tbody tr:hover,
.w3-ul.w3-hoverable li:hover {
    background-color: #ccc
}

.w3-centered tr th,
.w3-centered tr td {
    text-align: center
}

td {
    color: white;
}

.w3-table td,
.w3-table th,
.w3-table-all td,
.w3-table-all th {
    padding: 8px 8px;
    display: table-cell;
    text-align: left;
    vertical-align: top
}

.w3-table th:first-child,
.w3-table td:first-child,
.w3-table-all th:first-child,
.w3-table-all td:first-child {
    padding-left: 16px
}

.w3-btn,
.w3-button {
    border: none;
    display: inline-block;
    padding: 8px 16px;
    vertical-align: middle;
    overflow: hidden;
    text-decoration: none;
    color: inherit;
    background-color: inherit;
    text-align: center;
    cursor: pointer;
    white-space: nowrap
}

.w3-btn:hover {
    box-shadow: 0 8px 16px 0 rgba(0, 0, 0, 0.2), 0 6px 20px 0 rgba(0, 0, 0, 0.19)
}

.w3-btn,
.w3-button {
    -webkit-touch-callout: none;
    -webkit-user-select: none;
    -khtml-user-select: none;
    -moz-user-select: none;
    -ms-user-select: none;
    user-select: none
}

.w3-disabled,
.w3-btn:disabled,
.w3-button:disabled {
    cursor: not-allowed;
    opacity: 0.3
}

.w3-disabled *,
:disabled * {
    pointer-events: none
}

.w3-btn.w3-disabled:hover,
.w3-btn:disabled:hover {
    box-shadow: none
}

.w3-badge,
.w3-tag {
    background-color: #000;
    color: #fff;
    display: inline-block;
    padding-left: 8px;
    padding-right: 8px;
    text-align: center
}

.w3-badge {
    border-radius: 50%
}

.w3-ul {
    list-style-type: none;
    padding: 0;
    margin: 0
}

.w3-ul li {
    padding: 8px 16px;
    border-bottom: 1px solid #ddd
}

.w3-ul li:last-child {
    border-bottom: none
}

.w3-tooltip,
.w3-display-container {
    position: relative
}

.w3-tooltip .w3-text {
    display: none
}

.w3-tooltip:hover .w3-text {
    display: inline-block
}

.w3-ripple:active {
    opacity: 0.5
}

.w3-ripple {
    transition: opacity 0s
}

.w3-input {
    padding: 8px;
    display: block;
    border: none;
    border-bottom: 1px solid #ccc;
    width: 100%
}

.w3-select {
    padding: 9px 0;
    width: 100%;
    border: none;
    border-bottom: 1px solid #ccc
}

.w3-dropdown-click,
.w3-dropdown-hover {
    position: relative;
    display: inline-block;
    cursor: pointer
}

.w3-dropdown-hover:hover .w3-dropdown-content {
    display: block
}

.w3-dropdown-hover:first-child,
.w3-dropdown-click:hover {
    background-color: #ccc;
    color: #000
}

.w3-dropdown-hover:hover>.w3-button:first-child,
.w3-dropdown-click:hover>.w3-button:first-child {
    background-color: #ccc;
    color: #000
}

.w3-dropdown-content {
    cursor: auto;
    color: #000;
    background-color: #fff;
    display: none;
    position: absolute;
    min-width: 160px;
    margin: 0;
    padding: 0;
    z-index: 1
}

.w3-check,
.w3-radio {
    width: 20px;
    height: 20px;
    position: relative;
    top: 1px
}

.w3-sidebar {
    height: 100%;
    width: 200px;
    background-color: #fff;
    position: fixed!important;
    z-index: 1;
    overflow: auto
}

.w3-bar-block .w3-dropdown-hover,
.w3-bar-block .w3-dropdown-click {
    width: 100%
}

.w3-bar-block .w3-dropdown-hover .w3-dropdown-content,
.w3-bar-block .w3-dropdown-click .w3-dropdown-content {
    min-width: 100%
}

.w3-bar-block .w3-dropdown-hover .w3-button,
.w3-bar-block .w3-dropdown-click .w3-button {
    width: 100%;
    text-align: left;
    padding: 8px 16px
}

.w3-main,
#main {
    transition: margin-left .4s
}

.w3-modal {
    z-index: 10;
    display: none;
    padding-top: 100px;
    position: fixed;
    left: 0;
    top: 0;
    width: 100%;
    height: 100%;
    overflow: auto;
    background-color: rgb(0, 0, 0);
    background-color: rgba(0, 0, 0, 0.4)
}

.w3-modal-content {
    margin: auto;
    background-color: #fff;
    position: relative;
    padding: 0;
    outline: 0;
    width: 600px
}

.w3-bar {
    width: 100%;
    overflow: hidden
}

.w3-center .w3-bar {
    display: inline-block;
    width: auto
}

.w3-bar .w3-bar-item {
    padding: 8px 16px;
    float: left;
    width: auto;
    border: none;
    display: block;
    outline: 0
}
 .privacy-modal,
        .privacy-modal * {
        color: #000 !important;
        }


.w3-bar .w3-dropdown-hover,
.w3-bar .w3-dropdown-click {
    position: static;
    float: left
}

.w3-bar .w3-button {
    white-space: normal
}

.w3-bar-block .w3-bar-item {
    width: 100%;
    display: block;
    padding: 8px 16px;
    text-align: left;
    border: none;
    white-space: normal;
    float: none;
    outline: 0
}

.w3-bar-block.w3-center .w3-bar-item {
    text-align: center
}

.w3-block {
    display: block;
    width: 100%
}

.w3-responsive {
    display: block;
    overflow-x: auto
}

.w3-container:after,
.w3-container:before,
.w3-panel:after,
.w3-panel:before,
.w3-row:after,
.w3-row:before,
.w3-row-padding:after,
.w3-row-padding:before,
.w3-cell-row:before,
.w3-cell-row:after,
.w3-clear:after,
.w3-clear:before,
.w3-bar:before,
.w3-bar:after {
    content: "";
    display: table;
    clear: both
}

.w3-col,
.w3-half,
.w3-third,
.w3-twothird,
.w3-threequarter,
.w3-quarter {
    float: left;
    width: 100%
}

.w3-col.s1 {
    width: 8.33333%
}

.w3-col.s2 {
    width: 16.66666%
}

.w3-col.s3 {
    width: 24.99999%
}

.w3-col.s4 {
    width: 33.33333%
}

.w3-col.s5 {
    width: 41.66666%
}

.w3-col.s6 {
    width: 49.99999%
}

.w3-col.s7 {
    width: 58.33333%
}

.w3-col.s8 {
    width: 66.66666%
}

.w3-col.s9 {
    width: 74.99999%
}

.w3-col.s10 {
    width: 83.33333%
}

.w3-col.s11 {
    width: 91.66666%
}

.w3-col.s12 {
    width: 99.99999%
}

@media (min-width:201px) {
    .w3-col.m1 {
        width: 8.33333%
    }
    .w3-col.m2 {
        width: 16.66666%
    }
    .w3-col.m3,
    .w3-quarter {
        width: 24.99999%
    }
    .w3-col.m4,
    .w3-third {
        width: 33.33333%
    }
    .w3-col.m5 {
        width: 41.66666%
    }
    .w3-col.m6,
    .w3-half {
        width: 49.99999%
    }
    .w3-col.m7 {
        width: 58.33333%
    }
    .w3-col.m8,
    .w3-twothird {
        width: 66.66666%
    }
    .w3-col.m9,
    .w3-threequarter {
        width: 74.99999%
    }
    .w3-col.m10 {
        width: 83.33333%
    }
    .w3-col.m11 {
        width: 91.66666%
    }
    .w3-col.m12 {
        width: 99.99999%
    }
}

@media (min-width:993px) {
    .w3-col.l1 {
        width: 8.33333%
    }
    .w3-col.l2 {
        width: 16.66666%
    }
    .w3-col.l3 {
        width: 24.99999%
    }
    .w3-col.l4 {
        width: 33.33333%
    }
    .w3-col.l5 {
        width: 41.66666%
    }
    .w3-col.l6 {
        width: 49.99999%
    }
    .w3-col.l7 {
        width: 58.33333%
    }
    .w3-col.l8 {
        width: 66.66666%
    }
    .w3-col.l9 {
        width: 74.99999%
    }
    .w3-col.l10 {
        width: 83.33333%
    }
    .w3-col.l11 {
        width: 91.66666%
    }
    .w3-col.l12 {
        width: 99.99999%
    }
}

.w3-rest {
    overflow: hidden
}

.w3-stretch {
    margin-left: -16px;
    margin-right: -16px
}

.w3-content,
.w3-auto {
    margin-left: auto;
    margin-right: auto
}

.w3-content {
    max-width: 980px
}

.w3-auto {
    max-width: 1140px
}

.w3-cell-row {
    display: table;
    width: 100%
}

.w3-cell {
    display: table-cell
}

.w3-cell-top {
    vertical-align: top
}

.w3-cell-middle {
    vertical-align: middle
}

.w3-cell-bottom {
    vertical-align: bottom
}

.w3-hide {
    display: none!important
}

.w3-show-block,
.w3-show {
    display: block!important
}

.w3-show-inline-block {
    display: inline-block!important
}

@media (max-width:1205px) {
    .w3-auto {
        max-width: 95%
    }
}

@media (max-width:600px) {
    .w3-modal-content {
        margin: 0 10px;
        width: auto!important
    }
    .w3-modal {
        padding-top: 30px
    }
    .w3-dropdown-hover.w3-mobile .w3-dropdown-content,
    .w3-dropdown-click.w3-mobile .w3-dropdown-content {
        position: relative
    }
    .w3-hide-small {
        display: none!important
    }
    .w3-mobile {
        display: block;
        width: 100%!important
    }
    .w3-bar-item.w3-mobile,
    .w3-dropdown-hover.w3-mobile,
    .w3-dropdown-click.w3-mobile {
        text-align: center
    }
    .w3-dropdown-hover.w3-mobile,
    .w3-dropdown-hover.w3-mobile .w3-btn,
    .w3-dropdown-hover.w3-mobile .w3-button,
    .w3-dropdown-click.w3-mobile,
    .w3-dropdown-click.w3-mobile .w3-btn,
    .w3-dropdown-click.w3-mobile .w3-button {
        width: 100%
    }
}

@media (max-width:768px) {
    .w3-modal-content {
        width: 500px
    }
    .w3-modal {
        padding-top: 50px
    }
}

@media (min-width:993px) {
    .w3-modal-content {
        width: 900px
    }
    .w3-hide-large {
        display: none!important
    }
    .w3-sidebar.w3-collapse {
        display: block!important
    }
}

@media (max-width:992px) and (min-width:601px) {
    .w3-hide-medium {
        display: none!important
    }
}

@media (max-width:992px) {
    .w3-sidebar.w3-collapse {
        display: none
    }
    .w3-main {
        margin-left: 0!important;
        margin-right: 0!important
    }
    .w3-auto {
        max-width: 100%
    }
}

.w3-top,
.w3-bottom {
    position: fixed;
    width: 100%;
    z-index: 1
}

.w3-top {
    top: 0
}

.w3-bottom {
    bottom: 0
}

.w3-overlay {
    position: fixed;
    display: none;
    width: 100%;
    height: 100%;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background-color: rgba(0, 0, 0, 0.5);
    z-index: 2
}

.w3-display-topleft {
    position: absolute;
    left: 0;
    top: 0
}

.w3-display-topright {
    position: absolute;
    right: 0;
    top: 0
}

.w3-display-bottomleft {
    position: absolute;
    left: 0;
    bottom: 0
}

.w3-display-bottomright {
    position: absolute;
    right: 0;
    bottom: 0
}

.w3-display-middle {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    -ms-transform: translate(-50%, -50%)
}

.w3-display-left {
    position: absolute;
    top: 50%;
    left: 0%;
    transform: translate(0%, -50%);
    -ms-transform: translate(-0%, -50%)
}

.w3-display-right {
    position: absolute;
    top: 50%;
    right: 0%;
    transform: translate(0%, -50%);
    -ms-transform: translate(0%, -50%)
}

.w3-display-topmiddle {
    position: absolute;
    left: 50%;
    top: 0;
    transform: translate(-50%, 0%);
    -ms-transform: translate(-50%, 0%)
}

.w3-display-bottommiddle {
    position: absolute;
    left: 50%;
    bottom: 0;
    transform: translate(-50%, 0%);
    -ms-transform: translate(-50%, 0%)
}

.w3-display-container:hover .w3-display-hover {
    display: block
}

.w3-display-container:hover span.w3-display-hover {
    display: inline-block
}

.w3-display-hover {
    display: none
}

.w3-display-position {
    position: absolute
}

.w3-circle {
    border-radius: 50%
}

.w3-round-small {
    border-radius: 2px
}

.w3-round,
.w3-round-medium {
    border-radius: 4px
}

.w3-round-large {
    border-radius: 8px
}

.w3-round-xlarge {
    border-radius: 10px
}

.w3-round-xxlarge {
    border-radius: 32px
}

.w3-row-padding,
.w3-row-padding>.w3-half,
.w3-row-padding>.w3-third,
.w3-row-padding>.w3-twothird,
.w3-row-padding>.w3-threequarter,
.w3-row-padding>.w3-quarter,
.w3-row-padding>.w3-col {
    padding: 0 8px
}

.w3-container,
.w3-panel {
    padding: 0.01em 16px;
}

.w3-panel {
    margin-top: 16px;
    margin-bottom: 16px
}

.w3-code,
.w3-codespan {
    font-family: Consolas, "courier new";
    font-size: 16px;
    font-weight: 500;
}

.w3-code {
    width: auto;
    background-color: #fff;
    padding: 8px 12px;
    border-left: 4px solid #4CAF50;
    word-wrap: break-word
}

.w3-codespan {
    color: crimson;
    background-color: #f1f1f1;
    padding-left: 4px;
    padding-right: 4px;
    font-size: 110%
}

.w3-card,
.w3-card-2 {
    box-shadow: 0 5px 5px 0 rgba(0, 0, 0, 0.16), 0 2px 10px 0 rgba(0, 0, 0, 0.12)
}

.w3-card-4,
.w3-hover-shadow:hover {
    box-shadow: 0px 14px 2px rgba(0, 0, 0, 0.1), 0 4px 20px 0 rgba(0, 0, 0, 0.19)
}

.w3-spin {
    animation: w3-spin 2s infinite linear
}

@keyframes w3-spin {
    0% {
        transform: rotate(0deg)
    }
    100% {
        transform: rotate(359deg)
    }
}

.w3-animate-fading {
    animation: fading 10s infinite
}

@keyframes fading {
    0% {
        opacity: 0
    }
    50% {
        opacity: 1
    }
    100% {
        opacity: 0
    }
}

.w3-animate-opacity {
    animation: opac 0.8s
}

@keyframes opac {
    from {
        opacity: 0
    }
    to {
        opacity: 1
    }
}

.w3-animate-top {
    position: relative;
    animation: animatetop 0.4s
}

@keyframes animatetop {
    from {
        top: -300px;
        opacity: 0
    }
    to {
        top: 0;
        opacity: 1
    }
}

.w3-animate-left {
    position: relative;
    animation: animateleft 0.4s
}

@keyframes animateleft {
    from {
        left: -300px;
        opacity: 0
    }
    to {
        left: 0;
        opacity: 1
    }
}

.w3-animate-right {
    position: relative;
    animation: animateright 0.4s
}

@keyframes animateright {
    from {
        right: -300px;
        opacity: 0
    }
    to {
        right: 0;
        opacity: 1
    }
}

.w3-animate-bottom {
    position: relative;
    animation: animatebottom 0.4s
}

@keyframes animatebottom {
    from {
        bottom: -300px;
        opacity: 0
    }
    to {
        bottom: 0;
        opacity: 1
    }
}

.w3-animate-zoom {
    animation: animatezoom 0.6s
}

@keyframes animatezoom {
    from {
        transform: scale(0)
    }
    to {
        transform: scale(1)
    }
}

.w3-animate-input {
    transition: width 0.4s ease-in-out
}

.w3-animate-input:focus {
    width: 100%!important
}

.w3-opacity,
.w3-hover-opacity:hover {
    opacity: 0.60
}

.w3-opacity-off,
.w3-hover-opacity-off:hover {
    opacity: 1
}

.w3-opacity-max {
    opacity: 0.25
}

.w3-opacity-min {
    opacity: 0.75
}

.w3-greyscale-max,
.w3-grayscale-max,
.w3-hover-greyscale:hover,
.w3-hover-grayscale:hover {
    filter: grayscale(100%)
}

.w3-greyscale,
.w3-grayscale {
    filter: grayscale(75%)
}

.w3-greyscale-min,
.w3-grayscale-min {
    filter: grayscale(50%)
}

.w3-sepia {
    filter: sepia(75%)
}

.w3-sepia-max,
.w3-hover-sepia:hover {
    filter: sepia(100%)
}

.w3-sepia-min {
    filter: sepia(50%)
}

.w3-tiny {
    font-size: 10px!important;
    color: white;
    font-family: 'Helvetica Neue', Helvetica, Arial, sans-serif;
    font-weight: 500;
}

.w3-small {
    font-size: 12px!important
}

.w3-medium {
    font-size: 15px!important
}

.w3-large {
    font-size: 18px!important
}

.w3-xlarge {
    font-size: 24px!important
}

.w3-xxlarge {
    font-size: 36px!important
}

.w3-xxxlarge {
    font-size: 48px!important
}

.w3-jumbo {
    font-size: 64px!important
}

.w3-left-align {
    text-align: left!important
}

.w3-right-align {
    text-align: right!important
}

.w3-justify {
    text-align: justify!important
}

.w3-center {
    text-align: center!important
}

.w3-border-0 {
    border: 0!important
}

.w3-border {
    border: 1px solid #ccc!important
}

.w3-border-top {
    border-top: 1px solid #ccc!important
}

.w3-border-bottom {
    border-bottom: 1px solid #ccc!important
}

.w3-border-left {
    border-left: 1px solid #ccc!important
}

.w3-border-right {
    border-right: 1px solid #ccc!important
}

.w3-topbar {
    border-top: 6px solid #ccc!important
}

.w3-bottombar {
    border-bottom: 6px solid #ccc!important
}

.w3-leftbar {
    border-left: 6px solid #ccc!important
}

.w3-rightbar {
    border-right: 6px solid #ccc!important
}

.w3-section,
.w3-code {
    margin-top: 16px!important;
    margin-bottom: 16px!important
}

.w3-margin {
    margin: 16px!important
}

.w3-margin-top {
    margin-top: 16px!important
}

.w3-margin-bottom {
    margin-bottom: 16px!important
}

.w3-margin-left {
    margin-left: 16px!important
}

.w3-margin-right {
    margin-right: 16px!important
}

.w3-padding-small {
    padding: 4px 8px!important
}

.w3-padding {
    padding: 8px 16px!important
}

.w3-padding-large {
    padding: 12px 24px!important
}

.w3-padding-16 {
    padding-top: 16px!important;
    padding-bottom: 16px!important
}

.w3-padding-24 {
    padding-top: 24px!important;
    padding-bottom: 24px!important
}

.w3-padding-32 {
    padding-top: 32px!important;
    padding-bottom: 32px!important
}

.w3-padding-48 {
    padding-top: 48px!important;
    padding-bottom: 48px!important
}

.w3-padding-64 {
    padding-top: 64px!important;
    padding-bottom: 64px!important
}

.w3-padding-top-64 {
    padding-top: 64px!important
}

.w3-padding-top-48 {
    padding-top: 48px!important
}

.w3-padding-top-32 {
    padding-top: 32px!important
}

.w3-padding-top-24 {
    padding-top: 24px!important
}

.w3-left {
    float: left!important
}

.w3-right {
    float: right!important
}

.w3-button:hover {
    color: #000!important;
    background-color: #ccc!important
}

.w3-transparent,
.w3-hover-none:hover {
    background-color: transparent!important
}

.w3-hover-none:hover {
    box-shadow: none!important
}


/* Colors */

.w3-aqua,
.w3-hover-aqua:hover {
    color: #000!important;
    background-color: #00ffff!important
}

.w3-blue,
.w3-hover-blue:hover {
    color: #fff!important;
    background-color: #2196F3!important
}

.w3-light-blue,
.w3-hover-light-blue:hover {
    color: #000!important;
    background-color: #87CEEB!important
}

.w3-brown,
.w3-hover-brown:hover {
    color: #fff!important;
    background-color: #795548!important
}

.w3-cyan,
.w3-hover-cyan:hover {
    color: #000!important;
    background-color: #00bcd4!important
}

.w3-blue-grey,
.w3-hover-blue-grey:hover,
.w3-blue-gray,
.w3-hover-blue-gray:hover {
    color: #fff!important;
    background-color: #607d8b!important
}

.w3-green,
.w3-hover-green:hover {
    color: #fff!important;
    background-color: #4CAF50!important
}

.w3-light-green,
.w3-hover-light-green:hover {
    color: #000!important;
    background-color: #8bc34a!important
}

.w3-indigo,
.w3-hover-indigo:hover {
    color: #fff!important;
    background-color: #3f51b5!important
}

.w3-khaki,
.w3-hover-khaki:hover {
    color: #000!important;
    background-color: #f0e68c!important
}

.w3-lime,
.w3-hover-lime:hover {
    color: #000!important;
    background-color: #cddc39!important
}

.w3-orange,
.w3-hover-orange:hover {
    color: #000!important;
    background-color: #ff9800!important
}

.w3-deep-orange,
.w3-hover-deep-orange:hover {
    color: #fff!important;
    background-color: #ff5722!important
}

.w3-pink,
.w3-hover-pink:hover {
    color: #fff!important;
    background-color: #e91e63!important
}

.w3-purple,
.w3-hover-purple:hover {
    color: #fff!important;
    background-color: #9c27b0!important
}

.w3-deep-purple,
.w3-hover-deep-purple:hover {
    color: #fff!important;
    background-color: #673ab7!important
}

.w3-red,
.w3-hover-red:hover {
    color: #fff!important;
    background-color: #f44336!important
}

.w3-sand,
.w3-hover-sand:hover {
    color: #000!important;
    background-color: #fdf5e6!important
}

.w3-teal,
.w3-hover-teal:hover {
    color: #fff!important;
    background-color: #009688!important
}

.w3-yellow,
.w3-hover-yellow:hover {
    color: #000!important;
    background-color: #ffeb3b!important
}

.w3-white,
.w3-hover-white:hover {
    color: #000!important;
    background-color: #fff!important
}

.w3-black,
.w3-hover-black:hover {
    color: #fff!important;
    background-color: #000!important
}

.w3-grey,
.w3-hover-grey:hover,
.w3-gray,
.w3-hover-gray:hover {
    color: #000!important;
    background-color: #9e9e9e!important
}

.w3-light-grey,
.w3-hover-light-grey:hover,
.w3-light-gray,
.w3-hover-light-gray:hover {
    color: #000!important;
    background-color: #f1f1f1!important
}

.w3-dark-grey,
.w3-hover-dark-grey:hover,
.w3-dark-gray,
.w3-hover-dark-gray:hover {
    color: #fff!important;
    background-color: #616161!important
}

.w3-pale-red,
.w3-hover-pale-red:hover {
    color: #000!important;
    background-color: #ffdddd!important
}

.w3-pale-green,
.w3-hover-pale-green:hover {
    color: #000!important;
    background-color: #ddffdd!important
}

.w3-pale-yellow,
.w3-hover-pale-yellow:hover {
    color: #000!important;
    background-color: #ffffcc!important
}

.w3-pale-blue,
.w3-hover-pale-blue:hover {
    color: #000!important;
    background-color: #ddffff!important
}

.w3-text-amber,
.w3-hover-text-amber:hover {
    color: #ffc107!important
}

.w3-text-aqua,
.w3-hover-text-aqua:hover {
    color: #00ffff!important
}

.w3-text-blue,
.w3-hover-text-blue:hover {
    color: #2196F3!important
}

.w3-text-light-blue,
.w3-hover-text-light-blue:hover {
    color: #87CEEB!important
}

.w3-text-brown,
.w3-hover-text-brown:hover {
    color: #795548!important
}

.w3-text-cyan,
.w3-hover-text-cyan:hover {
    color: #00bcd4!important
}

.w3-text-blue-grey,
.w3-hover-text-blue-grey:hover,
.w3-text-blue-gray,
.w3-hover-text-blue-gray:hover {
    color: #607d8b!important
}

.w3-text-green,
.w3-hover-text-green:hover {
    color: #4CAF50!important
}

.w3-text-light-green,
.w3-hover-text-light-green:hover {
    color: #8bc34a!important
}

.w3-text-indigo,
.w3-hover-text-indigo:hover {
    color: #3f51b5!important
}

.w3-text-khaki,
.w3-hover-text-khaki:hover {
    color: #b4aa50!important
}

.w3-text-lime,
.w3-hover-text-lime:hover {
    color: #cddc39!important
}

.w3-text-orange,
.w3-hover-text-orange:hover {
    color: #ff9800!important
}

.w3-text-deep-orange,
.w3-hover-text-deep-orange:hover {
    color: #ff5722!important
}

.w3-text-pink,
.w3-hover-text-pink:hover {
    color: #e91e63!important
}

.w3-text-purple,
.w3-hover-text-purple:hover {
    color: #9c27b0!important
}

.w3-text-deep-purple,
.w3-hover-text-deep-purple:hover {
    color: #673ab7!important
}

.w3-text-red,
.w3-hover-text-red:hover {
    color: #f44336!important
}

.w3-text-sand,
.w3-hover-text-sand:hover {
    color: #fdf5e6!important
}

.w3-text-teal,
.w3-hover-text-teal:hover {
    color: #009688!important
}

.w3-text-yellow,
.w3-hover-text-yellow:hover {
    color: #d2be0e!important
}

.w3-text-white,
.w3-hover-text-white:hover {
    color: black !important;
    font-family: 'Helvetica Neue', Helvetica, Arial, sans-serif;
    font-weight: 500;
}

.w3-text-black,
.w3-hover-text-black:hover {
    color: #000!important
}

.w3-text-grey,
.w3-hover-text-grey:hover,
.w3-text-gray,
.w3-hover-text-gray:hover {
    color: #757575!important
}

.w3-text-light-grey,
.w3-hover-text-light-grey:hover,
.w3-text-light-gray,
.w3-hover-text-light-gray:hover {
    color: #f1f1f1!important
}

.w3-text-dark-grey,
.w3-hover-text-dark-grey:hover,
.w3-text-dark-gray,
.w3-hover-text-dark-gray:hover {
    color: #3a3a3a!important
}

.w3-border-amber,
.w3-hover-border-amber:hover {
    border-color: #ffc107!important
}

.w3-border-aqua,
.w3-hover-border-aqua:hover {
    border-color: #00ffff!important
}

.w3-border-blue,
.w3-hover-border-blue:hover {
    border-color: #2196F3!important
}

.w3-border-light-blue,
.w3-hover-border-light-blue:hover {
    border-color: #87CEEB!important
}

.w3-border-brown,
.w3-hover-border-brown:hover {
    border-color: #795548!important
}

.w3-border-cyan,
.w3-hover-border-cyan:hover {
    border-color: #00bcd4!important
}

.w3-border-blue-grey,
.w3-hover-border-blue-grey:hover,
.w3-border-blue-gray,
.w3-hover-border-blue-gray:hover {
    border-color: #607d8b!important
}

.w3-border-green,
.w3-hover-border-green:hover {
    border-color: #4CAF50!important
}

.w3-border-light-green,
.w3-hover-border-light-green:hover {
    border-color: #8bc34a!important
}

.w3-border-indigo,
.w3-hover-border-indigo:hover {
    border-color: #3f51b5!important
}

.w3-border-khaki,
.w3-hover-border-khaki:hover {
    border-color: #f0e68c!important
}

.w3-border-lime,
.w3-hover-border-lime:hover {
    border-color: #cddc39!important
}

.w3-border-orange,
.w3-hover-border-orange:hover {
    border-color: #ff9800!important
}

.w3-border-deep-orange,
.w3-hover-border-deep-orange:hover {
    border-color: #ff5722!important
}

.w3-border-pink,
.w3-hover-border-pink:hover {
    border-color: #e91e63!important
}

.w3-border-purple,
.w3-hover-border-purple:hover {
    border-color: #9c27b0!important
}

.w3-border-deep-purple,
.w3-hover-border-deep-purple:hover {
    border-color: #673ab7!important
}

.w3-border-red,
.w3-hover-border-red:hover {
    border-color: #f44336!important
}

.w3-border-sand,
.w3-hover-border-sand:hover {
    border-color: #fdf5e6!important
}

.w3-border-teal,
.w3-hover-border-teal:hover {
    border-color: #009688!important
}

.w3-border-yellow,
.w3-hover-border-yellow:hover {
    border-color: #ffeb3b!important
}

.w3-border-white,
.w3-hover-border-white:hover {
    border-color: #fff!important
}

.w3-border-black,
.w3-hover-border-black:hover {
    border-color: #000!important
}

.w3-border-grey,
.w3-hover-border-grey:hover,
.w3-border-gray,
.w3-hover-border-gray:hover {
    border-color: #9e9e9e!important
}

.w3-border-light-grey,
.w3-hover-border-light-grey:hover,
.w3-border-light-gray,
.w3-hover-border-light-gray:hover {
    border-color: #f1f1f1!important
}

.w3-border-dark-grey,
.w3-hover-border-dark-grey:hover,
.w3-border-dark-gray,
.w3-hover-border-dark-gray:hover {
    border-color: #616161!important
}

.w3-border-pale-red,
.w3-hover-border-pale-red:hover {
    border-color: #ffe7e7!important
}

.w3-border-pale-green,
.w3-hover-border-pale-green:hover {
    border-color: #e7ffe7!important
}

.w3-border-pale-yellow,
.w3-hover-border-pale-yellow:hover {
    border-color: #ffffcc!important
}

.w3-border-pale-blue,
.w3-hover-border-pale-blue:hover {
    border-color: #e7ffff!important
}


/*CUSTOM SHITE*/

.question_text {
    padding: 5px;
}

.loader {
    border: 16px solid #f3f3f3;
    border-radius: 50%;
    border-top: 16px solid #3498db;
    width: 120px;
    height: 120px;
    -webkit-animation: spin 2s linear infinite;
    /* Safari */
    animation: spin 2s linear infinite;
}


/* Safari */

@-webkit-keyframes spin {
    0% {
        -webkit-transform: rotate(0deg);
    }
    100% {
        -webkit-transform: rotate(360deg);
    }
}

@keyframes spin {
    0% {
        transform: rotate(0deg);
    }
    100% {
        transform: rotate(360deg);
    }
}

.correct_class {
    background-image: url('../images/correct.svg');
    background-repeat: no-repeat;
    background-position: right top;
    background-size: 25px 25px;
}

.incorrect_class {
    background-image: url('../images/incorrect.png');
    background-repeat: no-repeat;
    background-position: right top;
    background-size: 25px 25px;
}

.w3-radio:hover {
    background-color: #dedede;
}

.card-stack {
    position: relative;
    width: 300px;
    height: 300px
}


/* Style for the individual card images */

.card-stack img {
    position: absolute;
    width: 100%;
    height: 100%;
    top: 0;
    left: 0;
    transition: transform 0.5s;
    /* Optional: Add a smooth transition effect */
}

.user-input {
    width: 85px;
    border: 0px;
    background-color: #d6e6ff;
}


/* Create a container with a specified aspect ratio */

.aspect-ratio-container {
    position: relative;
    width: 100%;
    /* Set the width to 100% of the parent element */
}


/* Style the image to fit the container */

.aspect-ratio-container img_class {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
    /* Preserve the image's aspect ratio and cover the entire container */
}

.hot_spot_block {
    background-color: white;
    padding: 3px;
    border-radius: 15px;
}

.menu-block-width {
    width: 47%;
    float: left;
}


/* Media query for screens smaller than 1200px */

@media (max-width: 1000px) {
    .menu-block-width {
        width: 44%;
        float: left;
        height: 400px;
    }
}

.menu_block {
    height: 145px;
    display: flex;
    flex-direction: column;
    justify-content: flex-start;
    border-radius: 6px;
    padding-left: 5px;
    padding-right: 5px;
    margin-right: 9px;
    margin-left: 9px;
}

#video_preview_id {
    position: relative;
    width: 100%;
}

.overlay {
    position: absolute;
    left: 15%;
    /* Horizontal position */
    top: 5%;
    /* Vertical position */
    background-color: white;
    color: #590054;
    padding: 10px;
    border-radius: 5px;
}

#add_element_button_id {
    display: none;
}

.course_menu_icon_class {
    width: 40px
}


/**************************YOU GOTS MAIL****************************************/

.new_message_container {
    padding: 25px;
}

.letter-image {
    position: absolute;
    /*  top: 50%;
  left: 50%;
  width: 200px;
  height: 200px;*/
    -webkit-transform: translate(-50%, -50%);
    -moz-transform: translate(-50%, -50%);
    transform: translate(-50%, -50%);
    cursor: pointer;
}

.animated-mail {
    position: absolute;
    height: 150px;
    width: 200px;
    -webkit-transition: .4s;
    -moz-transition: .4s;
    transition: .4s;
    .body {
        position: absolute;
        bottom: 0;
        width: 0;
        height: 0;
        border-style: solid;
        border-width: 0 0 100px 200px;
        border-color: transparent transparent #e95f55 transparent;
        z-index: 2;
    }
    .top-fold {
        position: absolute;
        top: 50px;
        width: 0;
        height: 0;
        border-style: solid;
        border-width: 50px 100px 0 100px;
        -webkit-transform-origin: 50% 0%;
        -webkit-transition: transform .4s .4s, z-index .2s .4s;
        -moz-transform-origin: 50% 0%;
        -moz-transition: transform .4s .4s, z-index .2s .4s;
        transform-origin: 50% 0%;
        transition: transform .4s .4s, z-index .2s .4s;
        border-color: #cf4a43 transparent transparent transparent;
        z-index: 2;
    }
    .back-fold {
        position: absolute;
        bottom: 0;
        width: 200px;
        height: 100px;
        background: #cf4a43;
        z-index: 0;
    }
    .left-fold {
        position: absolute;
        bottom: 0;
        width: 0;
        height: 0;
        border-style: solid;
        border-width: 50px 0 50px 100px;
        border-color: transparent transparent transparent #e15349;
        z-index: 2;
    }
    .letter {
        font-size: 18px;
        left: 20px;
        bottom: 0px;
        position: absolute;
        width: 160px;
        height: 60px;
        background: #ededed;
        z-index: 1;
        overflow: hidden;
        -webkit-transition: .4s .2s;
        -moz-transition: .4s .2s;
        transition: .4s .2s;
        .letter-border {
            height: 10px;
            width: 100%;
            background: repeating-linear-gradient( -45deg, #cb5a5e, #cb5a5e 8px, transparent 8px, transparent 18px);
        }
        .letter-title {
            margin-top: 10px;
            margin-left: 5px;
            height: 10px;
            width: 40%;
            background: #cb5a5e;
        }
        .letter-context {
            margin-top: 10px;
            margin-left: 5px;
            height: 10px;
            width: 20%;
            background: #cb5a5e;
        }
        .letter-stamp {
            margin-top: 30px;
            margin-left: 120px;
            border-radius: 100%;
            height: 30px;
            width: 30px;
            background: #cb5a5e;
            opacity: 0.3;
        }
    }
}

.letter-image {
    .animated-mail {
        transform: translateY(50px);
        -webkit-transform: translateY(50px);
        -moz-transform: translateY(50px);
    }
    .animated-mail .top-fold {
        transition: transform .4s, z-index .2s;
        transform: rotateX(180deg);
        -webkit-transition: transform .4s, z-index .2s;
        -webkit-transform: rotateX(180deg);
        -moz-transition: transform .4s, z-index .2s;
        -moz-transform: rotateX(180deg);
        z-index: 0;
    }
    .animated-mail .letter {
        height: 180px;
    }
    .shadow {
        width: 250px;
    }
}

.form-hub-info-block {
    display: flex;
    align-items: center;
    justify-content: space-between;
    flex-direction: column;
    background: white;
    padding: 20px;
    margin: 25px;
    box-shadow: 0px 4px 4px rgba(0, 0, 0, 0.25);
    border-radius: 15px
}

.caps-type-block {
    padding: 15px;
    text-align: center;
}

.form-hub-info-block.caps-header {
    align-items: flex-end !important;
    flex-direction: unset !important;
}

.hub-main-tab-container {
    padding: 30px;
    background-color: #B988C5;
    border-bottom-left-radius: 15px;
    border-bottom-right-radius: 15px;
}

.tab-info-block {
    display: flex;
    align-items: center;
    background: white;
    padding: 14px;
    box-shadow: 0px 4px 4px rgba(0, 0, 0, 0.25);
    border-radius: 15px
}

.tab-info-block p {
    font-size: 8px;
    line-height: normal;
    text-align: left;
}

.tab-info-block img {
    width: 120px;
}

.tab-info-container {
    width: 100%;
    height: 100%;
    background: #B988C5;
    border-radius: 15px
}

.sub_tab_holder {
    display: flex;
    width: 100%;
    justify-content: center;
    flex-wrap: wrap;
    margin-left: 0px;
}

.sub_tabs_btn {
    /*  background-color: #ddffff!important;*/
    display: block;
    width: 96%;
    border: none;
    padding: 8px 16px;
    vertical-align: middle;
    overflow: hidden;
    text-decoration: none;
    text-align: center;
    cursor: pointer;
    /*  white-space: nowrap;*/
    /*  height: 90px;*/
    /*  text-align: left;*/
    display: flex;
    align-items: center;
    padding-left: 25px;
    border-radius: 0px 12px 12px 0px;
    font-weight: bold;
    font-size: 0.8rem;
}

.sub_tabs_p {
    width: 350px;
    display: flex;
    margin-top: 10px;
}

.svg_icon_divs {
    width: 55px;
}

.tab_icons_right {
    display: flex;
    align-items: stretch;
    justify-content: center;
    border: 3px solid #ffc107;
    background-color: #ffc107;
    border-radius: 12px;
    height: 50px;
    width: 50px;
}

b {
    font-weight: bold;
    font-size: 1rem;
    color: white;
}

.tab_blurb {
    width: 25%;
    margin-left: 5px;
    margin-right: 5px;
    display: flex;
    margin-top: 11px;
}

.notfication-div {
    display: flex;
    padding: 5px;
    background-size: contain;
    float: right;
    right: -7px;
    background-color: orangered;
    top: -7px;
    border-radius: 22px;
    width: 16px;
    height: 16px;
    font-size: 10px;
    align-items: center;
    justify-content: center;
    color: white;
}

.span-container {
    margin-top: 7px;
    margin-left: -7px;
    display: flex;
    width: 32px;
    height: 32px;
    justify-content: flex-end;
    background: url('data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAACAAAAAgCAYAAABzenr0AAAACXBIWXMAAAsTAAALEwEAmpwYAAACVElEQVR4nO2Wz2sTQRTH9yJ6EMGjoCf/hJwlp9lZnd2EkH0baos/sXG9GKzaBlHTqthiqT3oxRoRRMWm5CAGqcESG0SCxbZCI5WgBym1By9aaC3dfTKxrUnYGt1Nsgr9wheWYd77fpiZ3R1B2FCFRH9oF2HQKTIYpj5tvBbmvQiDmCQFdv4+nMERUYFFqmimGj5htJw9gwc62h2Z91DDuiEqmsl7EwUOWYYTBqoog9kUiZhXMknsHR+uqS9nktgUOWnyDMIgUBbu9R7cQmX4DGHduDb2tObhq+a91VbdoD5tVpKkzWsAdB8wUQaMJuJ1C191x2AceRaRg3t/7b0Mp/lgTy5Vd4Du3JMiAM8s3f8YH7Qq6J9M4423I7bMa616FleAQawqwO18FpdNA+2K1w5MjdoH6Jt4hulPeRydeW/LvJb3sA3QWyf/FUCiMIaPP07YMq91BBDPZ9GpeA9HKxDPZ/He9Ctbtgr/v85A/2QaX84WMDf3oar5vNL3nj9nZqYtvwV/DHBr6gV+XVrAheWlqubz+PzS2i+L82Vj/8YWvFkDOO8KwKWRoZ//AgbHXAHQr3dzAFOSQrsbDnAueRepXzOIrD6qvA3F1gPoTA/ihdR9R44O3cGjXReR+jSTKto7xvZvrwrQ9TyBzW2n+BUKa+TvIoObktS8rSy8EqDndQr1vqtI/SGDKjBPmBolTAUnpiy4xwuwVVhPZAWg/eEA+loOG8WLo6w+oDSwQ2iEyApA0QoUiBwUhUaKynBclLVvIlPbPJ7WTYIb8rgVvCHBZf0AqWxmqKZEO4oAAAAASUVORK5CYII=') no-repeat center center;
}

.span-container-tabs {
    margin-top: 7px;
    margin-left: -7px;
    display: flex;
    width: 32px;
    height: 32px;
    justify-content: flex-end;
    background: url('data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAACAAAAAgCAYAAABzenr0AAAACXBIWXMAAAsTAAALEwEAmpwYAAADD0lEQVR4nMWX+0uTURjH96sQCdF/EP0D/ZQJpe7M1num4Htx6FyyxMtMpzgv5CXn8jK1NFLTKKQfWqgopJWa0xDyBwUVLSNL7ZduaqJZGOJ0T5yjE+bm3Gx7d+CB8R6e7/dzLu/e55FIDowILPBSzD9FmLf4Moim9ArLSdwNxAg3EeYhXp1gzclJAV8G0STaUoYvdm2OhGCEhe1yYwasLjTD2mffBtEsL8sEmYK3yuWqk04A4Qx3gRAO91b43NweRJvugkIIcQKQYi6MTI68qvQbANGmAJgL+2+A+QktjA2E0iC/RQV4N8LCy7YghyDPRAFYmauH3vYTTgDkGZnzO8CXmSInc3uQOXe5b/p3AWQMezEgO2DpvkUBIhQx53x+B2ZGuCPzetpLKQDC7FnfvAWWUBrz4+ke5Ty6X0AAbOcFISgg/wNlhgyIUSauO5mLBaDWJEJKhn5WEgiA+cm79Pzr7jX3eQ1QU5Xl9dev1pTtoGFuLaQA45PTDV4D1JqyvQeodgRI0yZBenY+AIBB9CMYGzLR1Xc/7wsMQF5eGvCqa7C5uSk+wPBeDdDR1U3MjwdQ4+El1OtTYHTItJ+39LEJrmoSQZOqA6vVenyAWg8vIQEg523PM1VkgUwhwNTbGer87fsPiBLUf8LlyjN+P4JOcwnd+sdP2uwrpyA+q4jW3MRgjxEuR8dCkaECdnZ2xAV40WkAeXQs6PQ37LdeHIDVhWZobSkgZTfkFpbCxsZfB3O/AsxN1INen0rFa+oaYWtry8ncLwCLHxqh9UEBYFYJUZwK+i2vXRp7BqAQQjxtTMiKHzblA6uMp4LGytuw/HMFjhrjk1OHNyYICcGkbSLt08HW7Ov7BhgdrKIVTaYumZ4zeb9LjCaY/TQHngybzQbVdxoOb80kZBcYvpgQxqkTtrXXk2yaZA1wcaq9Om7XVKvLA3NbFywuLe+L/1r/TWHyi4yHhkqj3d7V4Qpdmu/vBMOxCHNmhLkBKeY7EOZaEMPlIkbAkZHCKVc5lxRxpxHmn7lv0TmzDAsxB5P/AchlyVZ+CIT8AAAAAElFTkSuQmCC') no-repeat center center;
}

.span-container-learning {
    margin-top: 7px;
    margin-left: -7px;
    display: flex;
    width: 32px;
    height: 32px;
    justify-content: flex-end;
    background: url('data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAACAAAAAgCAYAAABzenr0AAAACXBIWXMAAAsTAAALEwEAmpwYAAACZ0lEQVR4nGNgGGzAzS1UyMU3NNLNO7ScejikwN09UJKg5S4+oTaefuHv3HxC/1Mbe/iGP7C3t2fBabmPjw+Xp2/4y8iotP+L+lf83z531/+E+Jz/Weml/0+tOUsRXtC3DOqIYD18vrcHKZrXs+T//sUHwTgpIe9/bkbF/8ubr1KEdy3cB3aAu1eoN04HuHqHxoMUbZi5heoOAIUCyGxXn5B03A7wDU2glQNA2Ns/6o+bd2jzgDkgMjLtt5tPyIIBc0B2etk/d5+wvQPmgOqi1v+evhF3BswB3XVT/rv7hn0fMAfM6loIKZTcQoUGxAGrpqzHXxi50tgBOxdACiMX7zCvAXHAydVn8BdGrjR2AAh7+kX8dfMJaRowB0RGpf528w6dP2AOyEor/efmG7pnwBxQVdT638Mv4jbRDshMLflfmtdANQd01U7+7+4T9o1oB+yct/v/ufUXqOaAWZ2QwsjbO0qQKAccWHyQapaD8PLJa8EOcPYMV8PpgIW9y/5XFDT+T4jL+R8emfovIjL1NzVweETKb7+gmN8ePuFvQM0/nA5w9w377x8a+7e2sfN/78TpVMG5hZWQesA7ZKKLV7gm3jSQmJb/5/nz1/+/f/9NNbxi1QawA/z8/HixWo7sgAOHTvy/f//p/1lzl/yfMWcRVXBJRQNhB7j5hEaBFF2/cff//oPH/gdHJP0PDE+gCvYNiibsAA/fYD2QomUr11M1+ImOAhBw8wnZ4RUQ9Wf9xh3/37z5QH8HOAcECLv5hh6iRdcMgUO+e/iEmeJzB6Orb6gTqFPp6hPSQQNc4+ERzYc3JOgJALfhhSNmGiIBAAAAAElFTkSuQmCC') no-repeat center center;
}

.span-container-broadcasts {
    margin-top: 7px;
    margin-left: -7px;
    display: flex;
    width: 32px;
    height: 32px;
    justify-content: flex-end;
    background: url('data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAACAAAAAgCAYAAABzenr0AAAACXBIWXMAAAsTAAALEwEAmpwYAAACXElEQVR4nO2WT2gTQRjFVwVBvOhdEDx49GIatQVrOt9umvmmCbvfjGna0Iu0glg9FFOLSkSsf6jQg9qotLZo9eTNi5dqwVM9iKBgrajVlkKrJz0ImmRkkloiKiYlyUHy4LHDwrz3Y5iZXcuqqaaa/nchtm0OCnruIE0zpH0VL9yt1AaGst0W3iPXdV/PDvseDBy1s/FoOOMIelexYgiRDzgN2Sg/A0od2x9J3z0V0EtjO3NOJZg278ta2hiJbGKouoJCPjPhwRYvc+JgSD+82KAXR/PFZQdIJpNrGXrAkG7ZSF9NaEdrODNyvEm/vVH3S2lZARqb3S2A1OsgvTdBIuylz3c7+sngnr+WrgqAobwS4FRvxkqp9RBSbYA0wThlbaRszwGevX92r1646Suq+HIP6KnB+uIBAKW+cMR5tTTqa+1sF+P5DRVOX08w/XLIX1Rpoc381DEoDSCVYLnJMym/fnzp9w1VrF9c3ZUHSLDSAPq7g/r2yYC+1sv05ECDXhwrbrkLPT/i031dodUBwLJtQd/NM6oi6f7DQX36ULM2x+xfTnRyLcldySkRgIaByzMB7m01txpwitlcPi0EK9UlAfxJDGVfLozTOUfIhaoD2ChVLkwQU0qtA/Q4oLwHSN+qA2DHNzJOH4DTPHCFlmWtya1MKLodOH0ElNmKAhg1tdAOQPlmOXSOIU0Al58Yp7TNKc6EW8e4TNmCvlQEYOVm5BQDTuPAaQqQ7jSh8lsFMhvXADlIkz9XpiMW1vFoxHyOZ61qiqG3zZwoR9C0I+RMVX5IaqqpJqtE/QB+4HGBdn35zQAAAABJRU5ErkJggg==') no-repeat center center;
}

.span-container-dashboard {
    margin-top: 7px;
    margin-left: -7px;
    display: flex;
    width: 32px;
    height: 32px;
    justify-content: flex-end;
    background: url('data:image/png;base64,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') no-repeat center center;
}

.span-container-messaging {
    margin-top: 7px;
    margin-left: -7px;
    display: flex;
    width: 32px;
    height: 32px;
    justify-content: flex-end;
    background: url('data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAACAAAAAgCAYAAABzenr0AAAACXBIWXMAAAsTAAALEwEAmpwYAAABxUlEQVR4nGNgGAWjYLABd/dASWfv4EUuPmFvXbxD/lMFg8zyCl7i4h2kitdyN+9QY1ef0A8efpF/Cgub/ldWdFEFFxY2/vf0j/rj4hPyBWQHVss9PDzYXX1CbwSGJ/1ZOX/X/+2rT1AVr160939AWOIfV+/Q6yC7MBzg5BMUAAquaf3LqW45DE/tXwaNllA/DAe4eIVWgCS3rDhKMwdsXnEU4gCv0AoMBzh7BzeAJNE17d109v+J/dfIwFf/79l4FsM8kB0gu4h2wKN7r/5/+/aLLAzSS7ED9g50CGynMibZAcf3Xvl/9dwDsjBIL8UOuHvjOdlpAKR36EfB9oF2wKXT9/4/ffSGIH7y4DVKqr9w4g4YDx0HuHiF1IMkt606PkBR4BWSBZJctWD3ADnAM1zN2SvkX2V558A4AARcvIKngRSUlLT+X7lgF/0dYGycxursFdLq4h36hxpNMd+guD/9XQuIdwAMuPmGqrh4h2Y6ewe3OHuHdJCLXb1DToMsTE0r/QcLUaIcQC0QGhrK7OIdmu/qHfrVwzf8b2vTNPo6AAZcfELlXH1CtsKihu4OgAEn75AIF++QZ87ewfFwwVHAMMAAAFCNd6z13Cy5AAAAAElFTkSuQmCC') no-repeat center center;
}

.burble_header {
    font-weight: bold;
    display: flex;
    justify-content: center;
    margin-top: 10px;
    float: left;
    /* */
}

.back-button {
    /* background: url('data:image/png;base64,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') no-repeat center center; */
    display: flex;
    height: 64px;
    width: 64px;
    background: url('data:image/png;base64,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') no-repeat center center;
}

.home-button {
    display: flex;
    height: 64px;
    width: 64px;
    margin-left: 5px;
    background: url('data:image/png;base64,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') no-repeat center center;
}

.page_action_header {
    display: flex;
    margin-top: 10px;
}

.page_header_title {
    font-size: 22px;
    display: flex;
    right: 0px;
    margin-right: 15px;
    position: absolute;
}

.broadcast-container {
    display: flex;
    justify-content: center;
}


/*.footer-menu {
  width: 99.5%;
  padding: 8px 0 !important;
  display: flex;
  justify-content: center;
  background-color: blue;
  color: white !important;
  box-shadow: white;
  position: fixed;
  bottom: 0;
  z-index: 100;
  border-radius: 10px 10px 0px 0px;
  border: 1px solid blue !important;
  border-bottom-style: none;
}*/


/**************************END YOU GOTS MAIL****************************************/


/*************LOGIN***********/

.login_logo {
    margin-top: 2%;
    margin-bottom: 20%;
}

.home_background {
    background: linear-gradient(135deg, #f9b234, #fcd77f, #590054);
    background-repeat: repeat;
    height: 100%;
    /* background-color: #00953b; */
}

.logo_size {
    width: 60%;
}

@media only screen and (min-width: 800px) {
    .logo_size {
        width: 30%;
    }
}

.login_screen_bg {
    background-image: inear-gradient( 135deg, #ff00cc 0%, #990066 50%, #590054 100%);
    background-repeat: no-repeat;
    background-attachment: fixed;
    background-position: center;
    background-size: 100%;
    background-position-y: 135px;
    background-color: #f9b234;
    ;
}

@media only screen and (min-width: 800px) {
    .login_screen_bg {
        background-image: inear-gradient( 135deg, #ff00cc 0%, #990066 50%, #590054 100%);
        background-repeat: no-repeat;
        background-attachment: fixed;
        background-position: center;
        background-size: 30%;
        background-position-y: 0px;
    }
}

.top-fixed {
    position: fixed;
    left: 0;
    top: 0;
    right: 0;
}

.login_position {
    position: fixed;
    top: 20%;
    width: 100%;
}

.privacy_policy_text_position {
    position: fixed;
    top: 35%;
    width: 100%;
}

.header_logo_size {
    width: 125px;
}

.round-radius {
    border-radius: 50%;
    padding: 10px;
    color: #ffffff;
    background: linear-gradient(135deg, #590054 0%, #7b0075 100%);
    display: inline-flex;
    align-items: center;
    justify-content: center;
    box-shadow: 0 3px 8px rgba(89, 0, 84, 0.3);
    cursor: pointer;
    transition: all 0.25s ease;
}

.round-radius b {
    display: flex;
    align-items: center;
    justify-content: center;
    color: white;
    width: 50px;
    height: 50px;
}

.notification_icon_size {
    width: 100px;
    padding: 5px;
}

#notifications_text_id {
    position: relative;
    top: 50%;
}

.spacer {
    margin-bottom: 15px;
}

.messaging-spacer {
    min-height: 200px;
}

.course-menu-blocks {
    border-radius: 10px;
    border: 1px solid rgba(82, 0, 77, 0.15);
    background: linear-gradient(135deg, #7a32b4 0%, #590054 50%, #3c003c 100%);
    height: 65px;
    color: #44385C;
    font-size: 16px;
    font-style: normal;
    font-weight: 100;
    line-height: normal;
    vertical-align: middle;
    box-shadow: 0 3px 8px rgba(0, 0, 0, 0.05);
    transition: all 0.25s ease;
    display: flex;
    align-items: center;
    padding: 0 15px;
    font-family: 'Helvetica Neue', Helvetica, Arial, sans-serif;
    font-weight: 500;
}

.w3-menu-blocks {
    border-radius: 10px;
    border: 1px solid rgba(82, 0, 77, 0.3);
    background: linear-gradient(135deg, #7a32b4 0%, #590054 50%, #3c003c 100%);
    height: 65px;
    color: #ffffff;
    font-size: 16px;
    font-style: normal;
    font-weight: 100;
    line-height: normal;
    vertical-align: middle;
    box-shadow: 0 3px 8px rgba(89, 0, 84, 0.2);
    transition: all 0.25s ease;
}

.w3-menu-blocks:hover {
    background: linear-gradient(135deg, #8e3bc9 0%, #6b0069 50%, #470047 100%);
    box-shadow: 0 5px 12px rgba(89, 0, 84, 0.35);
}

.full_width_button {
    display: block;
    width: 100%;
    text-align: center;
    padding: 10px 0;
    font-size: 16px;
    border-radius: 6px;
    margin-top: 10px;
}

.w3-menu-blocks-higher {
    border-radius: 10px;
    border: 1px solid rgba(122, 50, 180, 0.6);
    background: linear-gradient(135deg, #8a38c0 0%, #610066 50%, #3e003e 100%);
    height: 65px;
    color: #ffffff;
    font-size: 16px;
    font-style: normal;
    font-weight: 100;
    line-height: normal;
    vertical-align: middle;
    box-shadow: 0 4px 10px rgba(89, 0, 84, 0.25), 0 0 10px rgba(140, 0, 130, 0.25);
    transition: all 0.25s ease;
}

.w3-menu-blocks-higher:hover {
    background: linear-gradient(135deg, #9b41d4 0%, #730078 50%, #4a004a 100%);
    box-shadow: 0 6px 14px rgba(89, 0, 84, 0.35), 0 0 14px rgba(140, 0, 130, 0.3);
}

.w3-notice-block {
    border-radius: 10px;
    border: 0.5px solid #F7F7F7;
    background: #FFF;
    /*width:95%;*/
    min-height: 110px;
    box-shadow: 0 4px 10px rgba(89, 0, 84, 0.25), 0 0 10px rgba(140, 0, 130, 0.25);
    transition: all 0.25s ease;
    margin-bottom: 10px;
}

.w3-badge-block {
    border-radius: 10px;
    border: 0.5px solid #F7F7F7;
    background: #FFF;
    /*width:95%;*/
    min-height: 110px;
    color: #44385C;
    margin: 4px;
}

.w3-menu-blocks_full_width {
    border: 2px solid #26649c;
    padding: 15px;
    border-radius: 15px;
    color: #44385C;
    font-size: 10px;
    font-style: normal;
    font-weight: 100;
    line-height: normal;
}

.footer-menu {
    position: fixed;
    left: 0;
    bottom: 0;
    width: 100%;
    z-index: 4;
    box-shadow: 0 -4px 10px rgba(0, 0, 0, 0.1);
}

.body-spacer {
    min-height: 110vh
}

.icon_flex_container {
    width: 45px;
    height: 45px;
    display: flex;
    flex-direction: column;
    justify-content: center;
}

.main_menu_icon_size {
    width: 45px;
}

.leaderboard_icon_size {
    width: 55px;
}

a {
    text-decoration: none;
    color: black
}

.grey-fade {
    width: 100%;
    height: 60px;
    /* Adjust the height as needed */
    background: linear-gradient(to bottom, rgba(255, 255, 255, 0) 0%, rgba(255, 255, 255, 0) 40%, #e8e8e8 100%);
    overflow: hidden;
    position: relative;
    z-index: -1;
}

.footer_icon_height {
    padding-top: 10px;
    padding-bottom: 15px;
    background-color: white;
    border-top-left-radius: 15px;
    border-top-right-radius: 15px;
    color: black;
}

.footer_learning_center_icon {
    width: 65px;
    position: relative;
    top: -15px;
}

.login_screen_inputs {
    border-radius: 15px;
    background-color: #fff4d9;
}

.login_screen_button {
    background: linear-gradient(to bottom, #f8b217, #f8a501);
    border: 1px solid white;
    color: white;
    padding: 10px 20px;
    font-size: 12px;
    border-radius: 25px;
    /* Adjust the border-radius as needed */
    cursor: pointer;
    outline: none;
}

.login_btn_position {
    margin-top: 50px;
    margin-bottom: 50px;
}

.login_label_size {
    font-size: 12px;
    margin-left: 3px;
    color: white;
}


/***********END LOGIN***********/


/*****MAIN MENU*****/

.background_colors {
    background: linear-gradient(to bottom, #fed434, #f6bc4e);
    background-repeat: no-repeat;
    background-size: 100%;
}

.main_menu_side_icons {
    width: 90px;
    margin-bottom: 4px;
}

.main_menu_input {
    margin-top: 5px;
    background: linear-gradient(to bottom, #fcd135, #f7bf4c);
    border: 1px solid white;
    border-radius: 25px;
    color: white;
    padding: 3px;
    padding-left: 40px;
}

.search_input {
    background-image: url('../images/search_icon.svg');
    background-position-x: 10px;
    background-position-y: 6px;
    background-repeat: no-repeat;
    background-size: 20px;
}

.hub_search_input {
    background-image: url('../images/search_icon.svg');
    background-position-x: 95%;
    background-position-y: 50%;
    background-repeat: no-repeat;
    background-size: 20px;
}

.new_icon {
    display: inline-block;
    background-color: #f9b234;
    color: white;
    font-size: 0.75rem;
    font-weight: bold;
    padding: 2px 6px;
    border-radius: 12px;
    line-height: 1;
    text-align: center;
    vertical-align: middle;
    box-shadow: 0 1px 2px rgba(0, 0, 0, 0.2);
}

.div-page-spacer {
    margin-bottom: 200px;
}

.profile_halo {
    background-color: #fbc668;
    border-radius: 100%;
    width: 80px;
    height: 80px;
    padding-top: 7px;
}

.back_block {
    width: 40px;
    height: 40px;
    background-color: #F8C83D;
    padding: 3px;
    border-radius: 5px;
}

.back_button_pos {
    position: absolute;
    top: 40px;
    right: 35px;
}

.ll_block {
    background-color: #F8C83D;
    min-height: 100px;
    padding: 10px;
    border-radius: 10px;
}

.ll_text_block_wrapper {
    border: 1px solid yellow;
    border-radius: 10px;
}

.course_history_left_float {
    float: right;
}

*/ .reward_text_padding {
    padding-left: 4px;
    padding-right: 4px;
}

.ngf-yellow-text {
    color: #F8C83D;
}

.selected-label img {
    border: 5px dashed green;
}

.check_width {
    width: 50px;
    vertical-align: middle !important;
}

.response_row {
    /* background-color: #fff2c9;
	min-height: 35px; */
}

.form_row_question_vertical_align {
    padding-top: 7px;
    padding-bottom: 7px;
}

.table_row_small_spacer {
    height: 4px;
}

.shake-once img {
    animation: shake 0.2s;
}

@keyframes shake {
    from {
        transform: rotate(-3deg);
    }
    to {
        transform: rotate(3deg);
    }
}

.check_button {
    width: 100%;
    color: black;
    background-color: #ffe596;
    border-radius: 25px;
    border: 0;
    padding-top: 3px;
    padding-bottom: 3px;
    margin-top: 5px;
    margin-bottom: 5px;
}

.bottom-spacer {
    height: 250px;
}


/*.user-clicked-image {
  width:20px;
  z-index: 001;
}*/

#image_id {
    position: relative;
    z-index: 1;
}

.check_click_div {
    position: relative;
}

.awaiting_badge {
    background-color: orange;
    padding-left: 4px;
    padding-right: 4px;
    padding-top: 2px;
    padding-bottom: 2px;
    color: white;
    border-radius: 15px;
}

.denied_badge {
    background-color: red;
    padding-left: 4px;
    padding-right: 4px;
    padding-top: 2px;
    padding-bottom: 2px;
    color: white;
    border-radius: 15px;
}

.approved_badge {
    background-color: green;
    padding-left: 4px;
    padding-right: 4px;
    padding-top: 2px;
    padding-bottom: 2px;
    color: white;
    border-radius: 15px;
}

.hub_button {
    width: 100px !important;
    margin: 8px;
    padding: 5px 4px !important;
    font-size: 12px;
    white-space: no-wrap;
}

.pir-red {
    background: linear-gradient(180deg, #FF914D, #FF4D4D 100%) !important;
}

.pir-purple {
    background: linear-gradient(180deg, #B988C5, #962C9F 100%) !important;
}

.pir-green {
    background: linear-gradient(180deg, #7ED957, #0097B2 100%) !important;
}

.pir-grey {
    background: grey !important;
}

.pulse_button {
    width: 90px;
    /* Set the width to 30% of the screen */
    height: 30x;
    /* Set the height */
    background: linear-gradient(180deg, #FFDE59 0%, #FF914D 100%);
    /* Apply the gradient background */
    color: #F5F5F5;
    /* Set the text color */
    border: 1px solid white;
    /* Remove border */
    border-radius: 8px;
    /* Optional: Apply border radius for rounded corners */
    box-shadow: 0px 4px 4px rgba(0, 0, 0, 0.25);
    /* Apply shadow */
    cursor: pointer;
    /* Set cursor to pointer on hover */
    display: inline-block;
    text-align: center;
}

.pulse_button_remove {
    width: 100%;
    /* Set the width to 30% of the screen */
    height: 30x;
    /* Set the height */
    background: linear-gradient(180deg, #fc5953 0%, #ffb5b3 100%);
    /* Apply the gradient background */
    color: #F5F5F5;
    /* Set the text color */
    border: 1px solid white;
    /* Remove border */
    border-radius: 8px;
    /* Optional: Apply border radius for rounded corners */
    box-shadow: 0px 4px 4px rgba(0, 0, 0, 0.25);
    /* Apply shadow */
    cursor: pointer;
    /* Set cursor to pointer on hover */
    display: inline-block;
}

.pulse_button_clock_in {
    width: 140px;
    /* Set the width to 30% of the screen */
    height: 30x;
    /* Set the height */
    background: linear-gradient(180deg, #FFDE59 0%, #FF914D 100%);
    /* Apply the gradient background */
    color: #F5F5F5;
    /* Set the text color */
    border: 1px solid white;
    /* Remove border */
    border-radius: 8px;
    /* Optional: Apply border radius for rounded corners */
    box-shadow: 0px 4px 4px rgba(0, 0, 0, 0.25);
    /* Apply shadow */
    cursor: pointer;
    /* Set cursor to pointer on hover */
    display: inline-block;
}

.pulse_button_clock_in_inactive {
    width: 140px;
    /* Set the width to 30% of the screen */
    height: 30x;
    /* Set the height */
    background: black;
    /* Apply the gradient background */
    color: #F5F5F5;
    /* Set the text color */
    border-radius: 15px;
    /* Optional: Apply border radius for rounded corners */
    cursor: pointer;
    /* Set cursor to pointer on hover */
    display: inline-block;
}

.pulse_button_align {
    position: relative;
    top: -3px;
}

.client_button {
    background: linear-gradient(135deg, #590054, #a100a0);
    color: #ffffff;
    border: none;
    border-radius: 12px;
    padding: 8px 18px;
    cursor: pointer;
    display: inline-block;
    font-size: 14px;
    font-weight: 600;
    text-align: center;
    transition: all 0.3s ease;
    box-shadow: 0 3px 8px rgba(0, 0, 0, 0.12);
    margin-top: 10px;
}

.client_button:hover {
    transform: translateY(-1px);
    box-shadow: 0 5px 12px rgba(0, 0, 0, 0.18);
    background: linear-gradient(135deg, #7b0075, #c100c1);
}

.login_button {
    width: 127px;
    /* Set the width to 30% of the screen */
    height: 35px;
    /* Set the height */
    background: #590054;
    /* Apply the gradient background */
    color: white;
    /* Set the text color */
    border-radius: 15px;
    /* Optional: Apply border radius for rounded corners */
    cursor: pointer;
    /* Set cursor to pointer on hover */
    display: block;
}

.login_button_align {
    position: relative;
    top: 5px;
}

.login_input {
    border-radius: 8px;
    border: 1px solid #F5F5F5;
    background: white;
}

.powered_by {
    color: #FFF;
    font-family: Poppins;
    font-size: 14px;
    font-style: normal;
    font-weight: 700;
    line-height: normal;
}

.w3-client_button_color {
    border-radius: 10px;
    border: 0.5px solid #F7F7F7;
    background: linear-gradient(135deg, #590054, #a100a0);
    color: white;
}

.w3-client_button_color_inactive {
    border-radius: 10px;
    border: 0.5px solid #F7F7F7;
    background: linear-gradient(90deg, #e3e1e1 0%, #bababa 100%);
    box-shadow: 0px 4px 4px 0px rgba(0, 0, 0, 0.25);
    color: white;
}

.header_nav_section {
    height: 150px;
}

.w3-menu-block-text-position {
    vertical-align: middle;
}

.footer_menu_icon_size {
    width: 40px;
}

.main_menu_icon_cell_size {
    width: 15% !important;
}

.inner_table_width {
    width: 80% !important;
}

.broadcast_menu_icon_cell_size {
    width: 30% !important;
}

.menu_table {
    margin-top: 11px;
    width: 100%;
    border-radius: 10px;
    /* Adjust the value to change the roundness */
}

.top_nav_page_name {
    color: #FAFAFA;
    font-size: 30px;
    font-style: normal;
    font-weight: 500;
    line-height: normal;
}

.top_nav_text_pos {
    margin-top: 80px;
}

.double_line_top_nav_text_pos {
    margin-top: 40px;
}

.profile-pic-radius {
    /* border: 4px solid #4F2C86; */
    border-radius: 100%;
}

.menu_card_user_name_small {
    font-size: 12px;
}

.td_center {
    text-align: center !important;
}

.td_middle {
    position: relative;
    top: 6px;
    left: 6px;
}

div {
    font-family: 'Helvetica Neue', Helvetica, Arial, sans-serif;
    color: white;
    font-weight: 500;
}

.learning_level_description {
    color: black;
    font-family: 'Helvetica Neue', Helvetica, Arial, sans-serif;
    text-align: center;
    font-weight: 500;
}

.suggestions_input {
    border-radius: 8px;
    border: 1px solid #C4C4C4;
    background: rgba(245, 245, 245, 0.65);
}

.badge_td_width {
    width: 50%;
}

.badge_width {
    width: 25%;
}

.clock_thingy_width {
    max-width: 355px;
}

.clock {
    transform: translateX(0%) translateY(-373%);
    font-size: 18px;
}

.clock_block_width {
    max-width: 800px;
}

.z-index-back {
    position: relative;
    border-bottom-left-radius: 15px;
    border-bottom-right-radius: 15px;
    background-color: #B988C5;
}

.w3-alert-box {
    margin: 15px;
    border-radius: 15px;
    background: linear-gradient(135deg, #d6c8f2 0%, #cfc1ea 40%, #b8a9d9 100%);
    border: 1px solid rgba(186, 168, 217, 0.5);
    color: white;
    font-weight: 500;
    box-shadow: 0 3px 8px rgba(88, 0, 84, 0.2);
    transition: all 0.3s ease;
    text-align: center;
}

.alert_box_heading {
    margin-top: 10px;
    color: white;
    font-weight: 600;
}

.w3-alert-box:hover {
    background: linear-gradient(135deg, #e2d6f8 0%, #d4c7ee 50%, #bfaedf 100%);
    box-shadow: 0 5px 12px rgba(88, 0, 84, 0.3);
}

.w3-learning-level-box {
    background: linear-gradient( 135deg, #f9b234 0%, #fdd36b 50%, #fff8e1 100%);
    border-radius: 5px;
    min-height: 115px;
    height: fit-content;
    box-shadow: 0 3px 8px rgba(0, 0, 0, 0.12);
    transition: transform 0.25s ease, box-shadow 0.25s ease;
}

.action_block_class {
    display: none;
    /* Hide all blocks initially */
}

.center_the_text {
    vertical-align: middle;
    height: 60px;
}

.messenger_icon_size {
    width: 50px;
}

.notification_class {
    background-color: #FF914D;
    color: white;
    height: 20px;
    width: 20px;
    border-radius: 100%;
    display: inline-block;
    position: relative;
    top: -15px;
    left: -15px;
}

.notice_text_pos {
    position: relative;
    top: 1px;
}

@keyframes shake {
    0% {
        transform: translateX(0);
    }
    10%,
    90% {
        transform: translateX(-5px);
    }
    20%,
    80% {
        transform: translateX(5px);
    }
    30%,
    70% {
        transform: translateX(-5px);
    }
    40%,
    60% {
        transform: translateX(5px);
    }
    50% {
        transform: translateX(0);
    }
}

.shake {
    animation-duration: 0.5s;
    animation-timing-function: ease-in-out;
    animation-iteration-count: 1;
}

.shaking-animation {
    animation-name: shake;
}

.form-approval-block {
    border-radius: 10px;
    border: 0.5px solid #F7F7F7;
    background: #FFF;
    box-shadow: 0px 7px 7px 0px rgba(0, 0, 0, 0.25);
    color: #44385C;
    font-size: 16px;
    font-style: normal;
    font-weight: 100;
    line-height: normal;
}

.form-intro-table {
    margin: auto;
    text-align: center;
}


/*.forms-container {
  /* We'll have sumfin here */


/* } */


/*.forms-container input {
  border: 1px solid #4F2C86 !important;
  border-radius: 10px;
  background-color: white;
}
*/


/*
.forms-container select {
  border: 1px solid #4F2C86 !important;
  border-radius: 10px;
  background-color: white;
}
*/

.question_block:not(.response_row) {
    padding-left: 32px !important;
}

.grey_bg {
    min-height: 150vh;
    width: 100%;
    height: auto;
    background: linear-gradient( 135deg, #fdd36b 0%, #f9b234 50%, #e39a11 100%);
    background-repeat: no-repeat;
    background-attachment: fixed;
    background-size: cover;
}

p {
    color: white
}

.logo_position {
    position: relative;
    top: 35px;
    left: 5px;
}

.nav_block {
    background: linear-gradient(135deg, #590054 0%, #7b0075 100%);
    border-radius: 5px;
    padding: 5px 8px;
    display: inline-block;
    color: #ffffff;
    font-weight: 600;
    font-size: 16px;
    text-align: center;
    cursor: pointer;
    transition: all 0.25s ease;
    box-shadow: 0 2px 6px rgba(89, 0, 84, 0.2);
}

.middle_div {
    margin-top: 5px;
}

.search-container {
    position: relative;
    display: flex;
    align-items: center;
    justify-content: space-between;
    width: 100%;
}

.search-container img {
    position: absolute;
    right: 10px;
    color: #f9b234;
    transition: transform 0.25s ease;
}

.search-container img:hover {
    transform: scale(1.1);
}

.search-input {
    width: 100%;
    text-align: right;
    font-size: 16px;
    height: 36px;
    padding: 5px 10px;
    /* add some inner spacing */
    border: 1px solid #f9b234;
    /* brand-colored border */
    border-radius: 8px;
    /* slightly rounded corners */
    background-color: #fff8e1;
    /* soft yellowish background for subtle branding */
    color: #44385C;
    /* readable text color */
    outline: none;
    transition: border 0.25s ease, box-shadow 0.25s ease;
}

.search-input:focus {
    border: 1px solid #f9b234;
    box-shadow: 0 0 6px rgba(249, 178, 52, 0.5);
    /* soft glow in brand color */
}

.search_icon_size {
    height: 60%;
}

input {
    border: 0;
}

.client_color {
    color: #f9b234;
    font-family: 'Helvetica Neue', Helvetica, Arial, sans-serif;
    font-weight: 300;
}

.player_footer {
    position: fixed;
    left: 0;
    bottom: 0;
    width: 100vw;
}