html {
    scroll-behavior: smooth;
}

div.full-vh {
    min-height: 80vh !important;
    padding: 1em 0;
}
.full-h{
    height: 100%;
}
div.grey-bg {
    background-color: #ebedf0;
}

div.light-blue-bg {
    background-color: #e7f9fd;
}

div.inline-flex {
    display: inline-flex;
}

.no-b-rad {
    border-radius: 0 !important;
}

.basic-border {
    border: 2px solid #C9D6DF !important;
}

th {
    padding: 0.5em 0;
}

label,
td.center.aligned {
    cursor: pointer;
}
/* Jquery toggle did not work for this because of !important in original semantics.css */
.ui.table:not(.unstackable) tr>td.displayFieldHide{
    display: none !important;
}

.profil_details_content > .ui.basic.table tbody tr{
    height:35px !important;
}

/* Nav */
div#main-menu {
    padding: 2em 2em 1em 2em;
}

a.item.custom-menu-el i.globe.green.icon {
    margin-right: -1.8em;
}

div#logged-in-menu a.item.custom-menu-el {
    font-size: 1.1em;
}

a.item.custom-menu-el,
div#dropdown-lang {
    font-size: 1.1em !important;
    color: teal !important;
}

#dropdown-lang{
    padding: unset !important;
}


a.item.custom-menu-el,
.lang-switch-wrapper{
    margin-left: 1em;

}

p.custom-lang {
    color: teal !important;
}

.ui.menu {
    border: none;
    box-shadow: none;
}

.ui.vertical.segment {
    border-bottom: none;
}

.ui.section.divider {
    margin: 1em 0;
}

.ui.section.divider.nav {
    margin-top: -1.1em;
}

/* SelfSurvey Top menu */
button.ui.positive.basic.button.save-and-exit {
    padding: 0.3em
}

div#top-nav {
    border-bottom: 1px solid rgba(0, 128, 128, .25);
}

/* End Nav */


/* Logo images */
img.logo.partner {
    margin: 0 3em 0 3em;
}

img.logo.main {
    height: 3em;
}

/* Logo images */

/* Forms */
#loginContainer,
#signupContainer {
    width: 850px;
    margin: auto;
    top: 5em;
    border-radius: 0px;
    background: #FFFFFF;
    border: 1px solid teal;
    box-sizing: border-box;
    box-shadow: 0px 4px 4px rgba(0, 0, 0, 0.25);
}

#loginForm,
#signupForm {
    padding: 2em 4em;
}

.ui.container.contact-form {
    width: 45em;
}

.ui.form select {
    border-radius: 0 !important;
}

/* Forms */

/* Buttons */
button.linkedin,
button.google {
    margin: 1em;
}

.ui.primary.button,
.ui.green.button {
    background-color: teal;
}

.ui.primary.button:focus{
    background-color: teal !important;
}

.ui.basic.positive.button {
    color: teal !important;
    box-shadow: 0 0 0 1px teal inset !important;
}

.ui.basic.positive.button:focus {
    color: teal !important;
    box-shadow: 0 0 0 1px teal inset !important;
}

.ui.basic.positive.button:hover {
    color: #00AEAE !important;
    box-shadow: 0 0 0 1px #00AEAE inset !important;
}

.ui.green.button:hover,
.ui.green.buttons .button:hover,
button.ui.green.button.price-panel:hover {
    background-color: #00AEAE;
    color: #fff;
    text-shadow: none;
}

.ui.primary.button:hover,
.ui.primary.buttons .button:hover {
    background-color: #00AEAE;
    color: #fff;
    text-shadow: none;
}

/* Buttons */

/* Font Style*/
h1,
h2,
h3,
h4,
h5,
a {
    color: teal;
}

.header.dark-green,
.dark-green {
    color: #008080 !important;
}

p {
    font-family: 'Montserrat', sans-serif;
}

p.slightly-big {
    line-height: 2em;
    font-size: 1.2em;
}

.white-text {
    color: #fff;
}

.banner-headline {
    margin-top: 0 !important;
    font-size: 3rem;
}

.light-teal {
    color: #00DCDC;
}

p.light-blue {
    color: #E7F6FC;
}

h1.light-blue {
    color: #C0DCEC;
}

.banner-desc {
    font-size: 1.5em;
}

.upc {
    text-transform: uppercase !important;
}

.huge-headline {
    font-size: 3.8em !important;
    word-spacing: 0.1em;
}

.large-headline {
    font-size: 3em !important;
    word-spacing: 0.1em;
}

/* Font */

/* Padding and Margin */
.no-pd {
    padding: 0 !important;
}

.ptb-2em {
    padding: 2em !important;
}

.ptb-05 {
    padding: 0.5em !important;
}

.pt-05 {
    padding-top: 0.5em !important;
}

.pt-1p5 {
    padding-top: 1.5em !important;

}

.pt-2 {
    padding-top: 2em !important;
}

.pt-2-5 {
    padding-top: 2.5em !important;
}

.pt-3 {
    padding-top: 3em !important;
}

.pt-4 {
    padding-top: 4em !important;
}

.pb-0{
    padding-bottom: 0em !important;
}

.pb-3 {
    padding-bottom: 3em !important;
}

.pb-4 {
    padding-bottom: 4em !important;
}

.mb-pl-0{
    padding-left: 0 !important;
}
.pl-1em {
    padding-left: 1em !important;
}

.pl-4em {
    padding-left: 4em !important;
}
.pl-28-pct{
    padding-left: 28% !important;
}
.mb-1 {
    margin-bottom: 1em !important;
}

.mb-2em {
    margin-bottom: 2em !important;
}

.mb-3em {
    margin-bottom: 3em !important;
}

.mb-4 {
    margin-bottom: 4em !important;
}

.mt-05em {
    margin-top: 0.5em !important;
}

.mt-1em {
    margin-top: 1em !important;
}

.mt-2em {
    margin-top: 2em !important;
}

.mt-4em {
    margin-top: 4em !important;
}

.mt-5em {
    margin-top: 5em !important;
}

.mt-05em {
    margin-top: 0.5em !important;
}

.mt-m2 {
    margin-top: -2em !important;
}

.ml-1em {
    margin-left: 1em;
}

.ml-2em {
    margin-left: 2em;
}

.mr-0 {
    margin-right: 0 !important;
}

.mr-1em {
    margin-right: 1em !important;
}

.mr-2em {
    margin-right: 2em !important;
}

.pt-1em {
    padding-top: 1em !important;
}

.pt-3em {
    padding-top: 3em !important;
}

.pt-4em {
    padding-top: 4em !important;
}

.pd-l-05em {
    padding-left: 10em !important;
}

.pd-l-10em {
    padding-left: 10em !important;
}


.ptb-8em {
    padding: 8em 0 !important;
}

.pd-2em {
    padding-left: 2em !important;
    padding-right: 2em !important;
}

.pd-v-2em {
    padding-top: 2em !important;
    padding-bottom: 2em !important;
}
.pd-v-1em {
    padding-top: 1em !important;
    padding-bottom: 1em !important;
}


.full-div {
    width: 100% !important;
}

.min-h-8 {
    min-height: 8em !important;
}

.min-h-10 {
    min-height: 10em !important;
}

.min-h-15 {
    min-height: 15em !important;
}

.min-height-40 {
    min-height: 40vh;
}

/* Padding and Margin */

/* Icons */
i.dark-green,
i.green.icon,
i.plus.icon.add-custom-message {
    color: teal !important;
}

i.comment.alternate.outline.icon {
    margin: 0 0 0 0.5em !important;
}

i.check.circle.icon {
    height: 2em;
    color: teal;
    margin-right: 0.5em !important;
}
i.fs-3em{
    font-size: 3em;
}
#share-w-linkedin{
    color: #00a0dc;
}
#share-w-fb{
    color: #4267B2;
}
#share-w-twitter{
    color: #1DA1F2;
}
#share-w-linkedin:hover, #share-w-fb:hover, #share-w-twitter:hover{
    opacity: 0.8;
}
/* Icons */

/* Images */
.h28 {
    height: 28px !important;
}

.h40 {
    height: 40px !important;
}

.h50 {
    height: 50px !important;
}

.h60 {
    height: 60px;
}

.h-auto {
    height: auto;
}

.w-auto {
    width: auto !important;
}

/* Login page */
button.ui.blue.button.linkedin,
button.ui.red.button.google {
    width: 100%;
}

.vl {
    width: 1px;
    background-color: grey;
    opacity: 50%;
    height: 80%;
    margin: auto;
    margin-top: 2em;
}

.hl {
    height: 3px;
    background: linear-gradient(83.47deg, teal 9.02%, teal 90.81%);
    width: 50em;
    margin: auto;
}

.thin-hl {
    height: 1px;
    background: linear-gradient(83.47deg, teal 9.02%, teal 90.81%);
    margin: auto;
}

/* Pops up */
#contactContainer,
#inviteContainer,
#popupRemoveSurvey {
    margin: auto;
    padding: 2em 0;
    width: 50em;
    border: 2px solid #C9D6DF;
    border-top: none;
    filter: drop-shadow(0px 4px 8px rgba(0, 0, 0, 0.16));
}


/* Landing page */
#landingPage-banner {
    position: relative;
}

.upper-case {
    text-transform: uppercase;
}

.column.survey-collection {
    margin: 1em;
    height: 20em;
    background-color: grey;
}

.ui.grid.intro-text {
    margin: 0;
    padding: 5rem 0;
    background-color: black;
    background: linear-gradient(-45deg, #CBC3E3, teal, #23a6d5, #23d5ab);
    background-size: 400% 400%;
    animation: gradient 15s ease infinite;
}

#how-it-works,
#partner-logos,
#selfsurvey-available,
#landing-page-bottom-banner {
    padding: 5em 2em;
}

#landing-page-bottom-banner {
    padding: 5em;
}

div#selfsurvey-available {
    border-radius: 0 !important;
}

/*
canvas {
    !*width: 100%;*!
    !*height: 40em;*!
    !*position: relative;*!
    !*z-index: -100;*!
    margin: auto;
    background-color: black;
    background: linear-gradient(-45deg, #CBC3E3, teal, #23a6d5, #23d5ab);
    background-size: 400% 400%;
    animation: gradient 15s ease infinite;
    margin-top: -1px;
}
*/

@keyframes gradient {
    0% {
        background-position: 0% 50%;
    }

    50% {
        background-position: 100% 50%;
    }

    100% {
        background-position: 0% 50%;
    }
}

#landing-page-start-button {
    height: 3em;
    width: 15em;
    font-size: 1.4em;
}

img.landing-page-chart {
    opacity: 0.8;
}


/* How it works*/
.instruction-steps-icon,
.instruction-steps,
.instruction-step-number {
    display: block;
    height: 16em;
    margin: 4em 1em;
}

img.step-screen {
    max-height: 16em;
}

.instruction-step-number {
    padding: 3em 0 0 4em;
}

.step-number {
    margin: auto;
    border-radius: 50%;
    height: 5em;
    width: 5em;
    padding: 1.1em;
    text-align: center;
    box-shadow: 1px 2px 2px #C0DCEC;
    background-color: #FFF;
}

.step-number h1 {
    font-size: 2.2em;
    margin: auto;
}

#steps-number::before {
    content: " ";
    left: 9.4em;
    position: absolute;
    top: 10em;
    border: 2px solid rgba(192, 220, 236, 0.25);
    height: 42em;
    z-index: -500;
}

.step-number-outer {
    border: solid 1px #C0DCEC;
    border-radius: 50%;
    height: 7em;
    width: 7em;
    text-align: center;
    padding: 0.9em;
    background-color: #ebedf0;
}


/* Partners */
div#partner-logos>h1 {
    margin-bottom: 1.5em;
}

/* Selfsurvey available */
#selfsurvey-available>h1 {
    margin-bottom: 1em;
}


/* Footer */
div#footer-lp {
    background-color: #13292A;
    padding-top: 2em;
    min-height: 10em;
    width: 100%;
}

a.ghost,
p.ghost,
i.footer-icon {
    color: #cbd2d9;
}

a.ghost:hover,
i.footer-icon:hover {
    color: white;
}


/* End Landing page */


/* Welcome page - when click invitation */
#welcome-get-started {
    margin: 4em;
}

/* Principle */
.selfsurvey-principle {
    padding: 10em 0 !important;
    /*min-height: 30em;*/
}

.evidence-icon {
    padding: 10em 0 10em 20em !important;
    min-height: 30em;
}

.modelling-icon {
    padding: 10em 20em 10em 0 !important;
    min-height: 30em;
}

.selfsurvey-two-part.grey-bg {
    padding: 5em;
}

img.invest-icon {
    height: 18em;
}


/* Pricing page */
button.ui.green.button.price-panel {
    position: absolute;
    bottom: 2em;
    /*position: fixed;*/
    /*bottom: 0;*/
}

.pricing-usps-and-button {
    /*height: max-content;*/
    /*height: 100%;*/
    min-height: 180px;
    display: flex;
    flex-direction: column;
    justify-content: space-between;
}

.column.price-panel.ui.container.raised.segments {
    margin: 1em !important;
    padding: 2em !important;
}


/* End Pricing page */

/* Overview Page */
.overview-heading {
    margin-top: 0.5rem;
    display: flex;
    flex-direction: row;
    justify-content: space-between;
    align-items: center;
}

/* End Overview Page */

/* Questionnaire page */
#selfsurvey-content {
    background: #fff;
    padding: 0 2em;
}

/* End Questionnaire page */

/* Contact page */
#contact-page {
    margin-top: 3em;
}

/* End Contact page */

/* Invitation form */
p.positive.text.add-custom-message {
    position: absolute;
    margin-top: 0.5em;
    color: teal;
    cursor: pointer;
}

.custom-toggle.invitation-form {
    margin-top: 2.5em;
    margin-left: 2.5em;
}

textarea#custom-message {
    margin: 1em 0 0 0;
    border-radius: 3px;
}

p.color-teal,
label.add-custom-message,
#copy-me {
    color: teal !important;
}


/* Modals */
.hl.modal {
    width: 100% !important;
}


/* Active html elements */
div#main-menu a.item.custom-menu-el:hover,
div#logged-in-menu a.item.custom-menu-el:hover,
div#survey-menu a.item.custom-menu-el:hover {
    background: transparent !important;
    color: #00AEAE !important;
    font-weight: 500 !important;
}

div#main-menu a.item.custom-menu-el.active-state,
div#logged-in-menu a.item.custom-menu-el.active-state,
div#survey-menu a.item.custom-menu-el.active-state {
    background: transparent !important;
    color: #00AEAE !important;
    font-weight: 600 !important;
}

button.ui.primary.green.custom-menu-el:hover {
    background-color: #00AEAE !important;
}

a.survey-bottom-control:hover,
button.ui.positive.custom-menu-el:hover {
    color: #00AEAE !important;
}

div#dropdown-lang:hover {
    background: transparent !important;
}

/* Cookie consent */
#cookie-dimmer{
    background-color: rgba(0,0,0,0.55);
}

#cookie-consent-banner {
    padding: 2em;
    width: 100%;
    position: fixed !important;
    /* margin-bottom: 30vh !important; */
    z-index: 200 !important;
    background-color: white;
    bottom: 0;
}

#cookie-consent-banner .inner_wrap {
    max-width: 60vw;
    margin: auto;
}

#cookie-lang {
    float: right;
    margin-top: -3.5em !important;
}

#cookie-buttons {
    padding: 1em;
}

#cookie-ref {
    margin-bottom: 0px;
    margin-top: 25px;
}

#cookie-ref i:nth-child(3) {
    margin-left: 1em;
}

#cookie-ref i {
    color: teal;
}

#cookie-accept {
    background-color: teal !important;
}

#cookie-accept:hover {
    background-color: #00AEAE !important;
}

/* Scroll to top of the page button */
#scroll-up-btn {
    /* display: none; */
    position: fixed;
    bottom: 20px;
    right: 30px;
    z-index: 99;
    font-size: 18px;
    border: none;
    outline: none;
    background-color: teal;
    color: white;
    cursor: pointer;
    padding: 15px;
    border-radius: 4px;
}

#scroll-up-btn:hover {
    background-color: #00AEAE;
}

#scroll-up-btn span {
    padding: 0 !important;
}

/* Survey Selection page */
span.blue-grey {
    background-color: #9DBED1 !important;
}

.teal.header.title-on-mobile{
    display: none;
}

.survey_item{
    padding-left: 15px !important;
    padding-right: 15px !important;
}

.survey_item .start-survey{
    display: flex !important;
}

.survey-item-lower .citation{
    font-style: italic;
    font-size: 12px;
    line-height: 1.25;
}
.survey-item-lower .left-aligned{
    max-width: 50%;
    width: 50%;
}
.survey-item-lower .right-aligned{
    max-width: 50%;
    width: 50%;
}
.survey-item-lower .right-aligned form{
    margin-top: -1px;
}
.survey-item-lower .right-aligned button{
    background: none;
    color: teal;
    border:none;
    font-size: 12px;
}
.survey-item-lower .right-aligned button:hover{
    color: #00AEAE !important;
}

.survey-item-lower .survey-bottom-control{
   padding-right: 0;
    font-size: 12px;
}

.start_survey_inner .ui.button{
    margin: unset;
}

.survey_icons {
    display:flex;
}
.institution_logos{
    display: none; /*flex*/;

}

.survey_icons span.ic{
    margin-right: 15px;
}

/* Font adjustments */
.survey_icons span.ic,
.survey_item .ui.tag.label,
.survey-item-lower .citation,
.survey-item-lower .right-aligned button,
.survey-item-lower .survey-bottom-control{
    font-family: 'Montserrat', sans-serif;
}


/* Survey Overview page */
#ownSurveys,
#sharedWithMeSurveys,
#sharedSurveys {
    padding: 2em;
    margin-bottom: 5em;
    min-height: 20em;
    border: 1px solid rgba(0, 128, 128, .5);
    border-radius: 4px;
}

/* Questionaire pages */
.mainquestion {
    line-height: 1.4em !important;
    font-size: 1.1em !important;
    border-radius: 0 !important;
    margin-left: 0 !important;
}

input.styled {
    cursor: pointer;
}


/* Slideshow container */
.slideshow-container {
    max-width: 1000px;
    position: relative;
    margin: auto;
}

/* Next & previous buttons */
a.prev,
a.next {
    cursor: pointer;
    position: absolute;
    top: 50%;
    width: auto;
    padding: 16px;
    margin-top: -22px;
    color: #fff;
    font-weight: bold;
    font-size: 18px;
    transition: 0.6s ease;
    border-radius: 0 3px 3px 0;
    user-select: none;
}

/* Position the "next button" to the right */
a.next {
    right: 0;
    border-radius: 3px 0 0 3px;
}

/* On hover, add a black background color with a little bit see-through */
.prev:hover,
.next:hover {
    background-color: rgba(0, 0, 0, 0.8);
}

/* Quote container */

.quote-container {
    margin-top: 0 !important;
    min-height: 280px;
}

img.avatar {
    vertical-align: middle;
    position: relative;
    overflow: hidden;
    height: 10em;
    width: 10em;
    border-radius: 50%;
}

/* Quote */
.otro-blockquote {
    font-size: 1.4em;
    width: 100%;
    font-family: Open Sans;
    font-style: italic;
    color: #555555;
    padding: 1.2em 30px 1.2em 75px;
    line-height: 1.6;
    position: relative;
}

.otro-blockquote::before {
    font-family: Arial;
    content: "\201C";
    color: teal;
    font-size: 4em;
    position: absolute;
    left: 10px;
    top: -10px;
}

.otro-blockquote::after {
    content: '';
}

.otro-blockquote span {
    display: block;
    color: #333333;
    font-style: normal;
    font-weight: bold;
    margin-top: 1em;
}

/* The dots indicators */
.dot {
    cursor: pointer;
    height: 15px;
    width: 15px;
    margin: 0 2px;
    background-color: #bbb;
    border-radius: 50%;
    display: inline-block;
    transition: background-color 0.6s ease;
}

.dot.active,
.dot.active:hover {
    background-color: #717171;
}

/* Fading animation */
.fade {
    -webkit-animation-name: fade;
    -webkit-animation-duration: 2s;
    animation-name: fade;
    animation-duration: 2s;
}

@-webkit-keyframes fade {
    from {
        opacity: .4
    }

    to {
        opacity: 1
    }
}

@keyframes fade {
    from {
        opacity: .4
    }

    to {
        opacity: 1
    }
}
/* End quote container */

/* Help text message */
.info.message.lang-switch {
    position: absolute;
    z-index: 100;
    left: 90%;
    top: 3.5em;
    text-align: left;
}

.info.message.register {
    position: absolute;
    z-index: 100;
    left: 71%;
    top: 4em;
    text-align: left;
    width: 17.5%;
}

.info.message.progress-bar {
    position: absolute;
    z-index: 100;
    left: 32%;
    top: 5.5em;
}

.info.message.gap-analysis {
    position: absolute;
    z-index: 100;
    left: 70%;
    top: 1em;
}

/* Append info icon and terms explanation*/
.info-icon.help-text {
    display: inline-block;
    margin-left: 2px;
    height: 12px;
    width: 12px;

}

p.questiondescription::before {
    content: "";
    display: inline-block;
    height: 14px;
    width: 14px;
    margin-top: 6px;
    background: url("../assets/icon/lightbulb-regular.svg");
    background-size: 100% 100%;
}

/* End terms explanation */

/*Profile Page */

.user_profile_grid{
    display: flex;
    column-gap: 2%;
}

.profil_details_content  .invisible-table.ui.table tr td{
    height: 35px;
    min-height: 35px;
}
.profil_details_content .three.column{
    justify-content: space-between;
}
.user_info{
   width: 100%;
}

.user_info  h2.header{
    display: flex;
    justify-content: space-between;
    width: 100%;
}
.user_info  h2.header .user-role{
    display: flex;
    height: fit-content;
    justify-self: center;
    align-self: center;
}
.user_info_content table{
   width: 33.3333% !important;
}
.user_info{
    height: 100% !important;
    min-height: 100% !important;
    margin: unset !important;
}

.user_surveys_content{
    width: 100%;
    margin-top: 25px;
    margin-bottom: 25px;
    padding-bottom: 0 !Important
}

.user_surveys_content .ui .upgrade{
    align-self: center;
}

.user_info_content{
    display: flex;
    width: 100%;
    padding-left: unset !important;
    padding-right: unset !important;
    margin-left: 1rem;
    margin-right: 1rem;
    justify-content: space-between;
}

.profile_intro.three.column{
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    justify-content: flex-start;
}
.profile_intro.three.column h4{
    display: flex;
    justify-content: space-between;
    margin-bottom:10px;
}

/* end profile Page */

/* Gap analysis */
a.item.analysis-tab {
    font-size: 1.1em !important;
    color: teal !important;
}

.eval-bar-chart {
    width: 650px;
    height: 500px;
}

.eval-spider-chart {
    width: 675px;
    height: 400px;
    margin-left: auto;
    margin-right: auto;
    margin-top: 25px;
    padding-left: 5px;
}

.eval-road-map {
    width: 685px;
    margin-left: auto;
    margin-right: auto;
    margin-top: 25px;
}

/* End Gap analysis */

/* Smooth transition */
@keyframes transitionIn {
    from {
        opacity: 0;
        transform: rotateX(-5deg);
    }

    to {
        opacity: 1;
        transform: rotateX(0);
    }
}

.transitionin-075 {
    animation: transitionIn 0.75s;
}


/* Responsiveness */
.mobile-only {
    display: none !important;
}

@media only screen and (max-width: 767px) {

    #selfsurvey-content,
    #main-menu {
        width: auto !important;
    }

    .full-vw-res {
        width: auto !important;
    }

    .grey-bg.pt-2.pb-2 {
        padding: 0 !important;
    }

    #selfsurvey-content {
        border: 0 !important;
    }

    .mobile-hidden {
        display: none !important;
    }
    .mobile-only.dsp-inline {
        display: inline !important;
    }
    .label.survey-status{
        font-size: 0.7rem;
    }

    .flex-container.mobile-column {
        display: flex !important;
        flex-direction: column !important;
    }

    .flex-container.mobile-row {
        display: flex !important;
        flex-direction: row !important;
    }

    .three.wide.column.flex-item,
    .four.wide.column.flex-item,
    .five.wide.column.flex-item,
    .eight.wide.column.flex-item {
        width: auto !important;
        /* padding-left: 30%; */
    }

    .flex-item,
    .three.wide.column.ml-2em.flex-container.mobile-row.mobile.left-aligned {
        width: auto !important;
    }

    .mobile.w-10-pct {
        width: 10% !important;
    }

    .mobile.left-aligned {
        justify-content: start !important;
    }

    .ui.table.mobile.auto-w {
        width: auto !important;
    }

    .mobile.pl-10-pct {
        padding-left: 10% !important;
    }

    /* padding left 28% in bigger screen size, while only 0.5em in mobile devices */
    .mobile.pl-28-pct {
        padding-left: 0.5em !important;
    }

    .mobile.ml-2em.pt-3em {
        margin-left: 0 !important;
        padding-top: 1em !important;
    }

    .mobile.mt-minus-2 {
        margin-top: -2em;
    }
    .ui.segment, .ui.segments .segment {
        font-size: 2rem;
    }
    .ui.button, .ui.buttons .button, .ui.buttons .or {
        /*font-size: 2rem;*/
    }
    .ui.tiny.button, .ui.tiny.buttons .button, .ui.tiny.buttons .or {
        font-size: 1.0rem;
    }
    .ui.tiny.label, .ui.tiny.labels .label {
        font-size: 1.2rem;
    }
    .ui.label, .ui.labels .label {
        font-size: 1.2rem;
    }
    h2.ui.header {
        font-size: 3rem;
    }
    h3.ui.header {
        font-size: 2.5rem;
    }
    h2.ui.header .sub.header {
        font-size: 2rem;
    }
    h3.ui.header .sub.header {
        font-size: 1.5rem;
    }
    body{
        line-height: 2rem;
    }

    /* User Survey Overview */

    .survey_item.ui.grid>[class*="nine wide"].column {
        width: 100% !important;
    }
    .ui.medium.rounded.image {
        max-width: unset !important;
    }
    .ui.survey_item{
        align-items: center;
    }
    .survey_icons span.ic {
       font-size: 1.3rem;
    }

    .start_survey button.button{
        font-size: 1.5rem;
    }
    .survey_item .survey-meta{
        justify-content: center;
        column-gap: 10px;
        row-gap: 10px;
        display: flex;
        padding-top: 0px !important;
    }
    .survey_item .survey_tags{
        justify-content: center;
        column-gap: 15px;
        display: flex;
    }

    .survey-item-lower{
        flex-direction: column !important;
    }
    .survey-item-lower .left-aligned,
    .survey-item-lower .right-aligned{
        max-width: 100%;
        width: 100%;
    }
    .survey-item-lower .right-aligned{
        display: grid;
        grid-auto-columns: 33.333%;
        grid-auto-flow: column;
        align-items: center;
        justify-content: center;
        text-align:center;
    }
    .survey-item-lower .right-aligned form{
        margin-top: -7.5px;
    }


    #scroll-up-btn{
        font-size: 10px;
    }
    .mobile-full-h{
        height: 100% !important;
    }
    .ui.table.mobile.auto-w>tbody, .ui.table.mobile.auto-w>tbody >tr, .ui.table.mobile.auto-w>tbody>tr>td{
        display: inherit !important;
    }
    .mobile-pt-v-1em{
        padding-top: 1em !important;
        padding-bottom: 1em !important;
    }
    .mobile-pt-h-05em{
        padding-left: 0.5em !important;
        padding-right: 0.5em !important;
    }
    .ui.container.full-vw-res {
        width: auto !important;
        margin-left: 0 !important;
        margin-right: 0 !important;
    }

    .mobile.pl-10-pct {
        padding-left: 0 !important;
    }

    #selfsurvey-content {
        margin-left: 0 !important;
        margin-right: 0 !important;
        padding: 0 0.5em 1em 0.5em;
    }

    i.icon.mobile-dsp-ini {
        display: initial;
    }

    .ui.table.no-b-rad {
        overflow-x: auto;
    }

    .eval-bar-chart,
    .eval-spider-chart,
    .eval-road-map {
        width: auto !important;
        overflow-x: auto !important;
    }
    .mb-pr-05em {
        padding-right: 0.5em !important;
    }
    .mb-pr-1em {
        padding-right: 1em !important;
    }
    .mb-pl-05em {
        padding-left: 0.5em !important;
    }
    a#new-survey-button {
        margin-top: -0.5em !important;
    }
    /* Attempt to rotate whole page in mobile devices */
    /* body {
        overflow: hidden;
        transform: rotate(90deg);
        transform-origin: bottom left;

        position: absolute;
        top: -100vw;

        height: 100vw;
        width: 100vh;
    } */

    .survey-additional-info{
        display:flex;
        flex-direction: row-reverse;
    }
    .survey-additional-info .survey_tags,
    .survey-additional-info .survey_icons{
        display:flex;
        flex-direction: column;
        width:50%;
    }
    .survey-additional-info .survey_tags span{
        text-align: center;
    }
    .survey-additional-icons .survey_tags{
        display:flex;
        row-gap: 0 !important;
    }

    #page_evaluation_inner ul.ui-tabs-nav li {
        float: left;
        width: 50%;
        margin-left: 0 !important;
        margin-right: 0 !important;
    }

    .info.message.gap-analysis,.info.message.progress-bar {
        left: 0 !important;
        width: 100% !important;
        opacity: 0.98;
    }

    /* Hidden on mobile until performance is enhanced */
    #pdf_create{
        display:none !Important;
    }
}

@media only screen and (max-width: 420px) {

    .survey-additional-info{
       display:flex;
        flex-direction: column;
    }
    .survey-additional-info > .survey_tags,
    .survey-additional-info > .survey_meta,
    .survey-additional-info > .survey_icons{
       display:flex;
        flex-direction: column;
        width: 100%
    }
    .survey-additional-info > .survey_meta,
    .survey-additional-info > .survey_icons{
        margin-left: 25%;
        margin-top: 5%;
        row-gap:0px;
    }
    .survey-additional-info > .survey_tags span,
    .survey-additional-info > .survey_meta span,
    .survey-additional-info > .survey_icons span,
    p{
        font-size: 1rem;
    }


}

@media only screen and (max-width: 300px) {

    .prev,
    .next,
    .text {
        font-size: 11px;
    }

}

#hamburger-menu {
    margin: 0;
}

.smaller-logo {
    max-height: 40px;
    margin: 2px 0 0 2px;
}

.principle-icon-small {
    display: none;
}


/* Matrix Slider */
.hid_for_slider{
    display:none !important;
}

.questionslider{
    width: 50%;
    padding: 10px;
}

.ui-slider-handle.ui-state-default{
    border-color: #008080;
    border-width: 2px;
    background-color: #fff;
}

.ui-slider-handle.ui-state-focus{
    background-color: #008080;
    border: unset !important;
}

.questionslider.two-fold-matrix .ui-slider{
    margin-left: 20px;
    margin-right: 20px;
    background: #ebedf0;
}
.questionslider.standardmatrix .ui-slider{
    max-width: 80%;
    margin-left: 10%;
    margin-right: 20px;
    background: #ebedf0;
}
.questionslider.standardmatrix .ui-slider .background-fullwidth{

    width: 120%;
    height: 12px;
    background: #ebedf0;
    margin-left: -10%;
    border-radius: 15px;

}

/* Matrix Slider -> Table to Grid */

.gt{
    display:grid;
}

.grid-table-body{
    display: grid;
    grid-auto-flow: row;
    overflow-x: scroll;
}


.gtr{
    display:grid;
    min-height: 55px;
    z-index: 9;
}
.gtr .question.gtc{
    text-align: left;
    align-items: center;
    justify-content: flex-start;
}

.matrix-standard .gtr.slider.row-header .gth.placeholder.empty{
    display: none !important;
}
.gt .gtr:nth-child(2n),
.gt .gtr .tgc.question:nth-child(2n){
    background-color: rgba(0,0,50,.02);

}

.gth{
    justify-content: center;
    text-align: center;
}

.gtc{
    justify-content: flex-start;
}

.category-overview{
    display:none;
}

/* Slider in standard matrix - Grid */

.matrix-standard.slider .grid-table-body{
    grid-auto-flow: row;
}

.matrix-standard .gtr.slider.row-header{
    padding-left: 33.333%;
    grid-template-columns: unset!important;
    grid-auto-flow: column;
}
.matrix-standard .gtr.slider.row-header .gth{
    border: none !important;
    width: fit-content !important;
    width: -moz-fit-content !important;
}
.matrix-standard .slider.gtr:not(.row-header){
    display:flex;
    align-items: center;
}

.matrix-standard .slider .question.gtc {
    width: 33.33333%;
    min-width: 33.33333%;
    flex-direction: column;
}
.matrix-standard .slider .questionslider {
    width: 100%;
}

.matrix-standard .slider .questionslider.standardmatrix .ui-slider{
    max-width: 90%;
    width: 90%;
    margin-left: 5%;
}

.matrix-standard .slider .questionslider.standardmatrix .ui-slider .background-fullwidth {
    width: 100%;
    margin-left: 0;
}

/* Two-Fold */

.matrix_2ways .gtr.question_wrap{
    display: grid;
    grid-auto-flow: column;
    grid-template-columns: 25% 50% 25%;
    /* justify-content: space-evenly; */
    padding: 25px 15px;
}
.matrix_2ways .gtr.question_wrap .questionslider{
   width: 100% !important;
}
.matrix_2ways .gtr.question_wrap .question.gtc{
  border: none !Important;
}
.matrix_2ways .gtr.question_wrap .gtc.question-end{
    justify-content: flex-end;
}

/*
.matrix-standard .gtr.slider{
    grid-template-columns: 100% !important;
}
.matrix-standard .gtr.slider .questionslider{
    width: 100%;
}
.matrix-standard .gtr.slider.row-header{
    grid-template-columns: 100% !important;
}

.matrix-standard.slider .row-header{
    display: flex;
    justify-content: space-between;
    padding: 0 15px;
}
.matrix-standard.slider .gth{
    border: none !important;
}
.matrix-standard.slider .gtc{
    justify-content: center;
}
.matrix-standard.slider .grid-table-body{
    display: flex !important;
    flex-direction: column;
}
*/

/*Media */
@media only screen and (max-width: 500px) {

    .gtc,
    .gth:not(.grid-table-header) {
        min-width: 150px;
    }
}
@media only screen and (min-width: 501px) and (max-width: 767px) {
    .gtc,
    .gth:not(.grid-table-header) {
        min-width: 200px;
    }
}

@media only screen and (max-width: 767px){

    .gth.grid-table-header{
        width: 100% !important;
    }
    .grid-table:not(.slider) .gtr .question.gtc,
    .grid-table:not(.slider) .gtr .gth.placeholder.empty{
        background: #fff;
        z-index:999;
        position: sticky;
        position: -webkit-sticky;
        left:0;
    }
   .fixed-cell,
   .fixed-cell a{
       justify-content: flex-start !important;
       text-align: left !important;
       padding: 5px;
   }
    .ui.grid>[class*="three column"].row>.column.profile_intro{
       width: 100% !important;
   }

    .profile-container .ui.segment{
        padding: 20px 10px !Important;
    }

    .user-limits.segment > .ui.grid{
        display: flex;
        flex-direction: column;
        align-items: flex-start;
        justify-content: center;
    }

    .user-limits.segment > .ui.grid .eight .teal.pt-1p5{
        padding-left: unset !Important;
        padding-top: 0.5em !important;
    }


    /*
    .grid-table-body{
        display:flex !important;
    }
    .category-overview{
        display: block;
        font-size: 1em;
        line-height: 1.5;
        padding: 5px;
        float: left;
        margin: 0;
        list-style: none;
        margin-bottom: 5px;
    }
    .gt-r{
        overflow-x: scroll;
    }

    .gt-r .gtr{
        width: 300%;
    }
    .question.gtc{
        width: fit-content;
        overflow-wrap: break-word;
        line-height: 1;
    }
    .gt-l{
        box-shadow: 7px 0 5px -2px #d5d5d5;
        z-index:99;
        max-width: 40%;
        margin-top:55px;
    }

    .gt-l .gtr:first-of-type{
        display: none;
    }
*/
    /* Matrix */

    .matrix-standard .gtr.slider:not(.row-header){
        grid-template-columns: 100% !important;
        display: grid !important;
    }
    .matrix-standard.slider .row-header{
        display: flex;
        justify-content: space-between;
        padding: 0 15px;
    }
    .matrix-standard.slider .gtr.slider.row-header{
        padding: unset !important;
    }
    .matrix-standard.slider .gth{
        font-size: 1em;
    }
    .matrix-standard.slider .gtc{
        justify-content: center;
        width: 100% !important;
        font-weight: normal;
        padding: 0.75rem;
        text-align: center;
        align-items: center;
    }
    .matrix-standard .slider .questionslider{
        padding-bottom: 1.85rem;
    }
    .matrix-standard.slider .grid-table-body{
        display: flex !important;
        flex-direction: column;
    }

    .matrix_2ways .gtr.question_wrap{
        grid-template-columns: 50% 50%;
    }

    .matrix_2ways .gtr.question_wrap .questionslider.standardmatrix{
        grid-row:2;
        grid-column: 1/3;
    }
    .matrix_2ways .gtr .gtc{
       min-width: unset !Important;
    }

    /*
    .itsm-explanation-table .grid-table-body {
            display: grid !important;
        }
    .itsm-explanation-table.grid-table {
        grid-template-columns: 33.333% 67.7777% !important;
    }
    .itsm-explanation-table.grid-table.grid-table-single {
        grid-template-columns: 100% !important;
    }
    */

}

.itsm-explanation-table.grid-table.grid-table-single{
    grid-auto-flow: row;
    overflow-x:scroll;
    overflow-y: hidden;
}

.itsm-explanation-table.grid-table.grid-table-single .gtr {
    display: grid;
    min-width: fit-content;
    grid-auto-columns: 1fr;
    grid-auto-flow: column;
}
.itsm-explanation-table.grid-table.grid-table-single .gtr:first-of-type {
    position: sticky;
    left: 0;
    border: 1px solid rgba(34,36,38,.15);
}
.itsm-explanation-table.grid-table.grid-table-single .gtr:not(:first-of-type) div:first-of-type {
    border-left: 1px solid rgba(34,36,38,.15);
}
.itsm-explanation-table.grid-table.grid-table-single .gtr:not(:first-of-type) div:last-of-type {
    border-right: 1px solid rgba(34,36,38,.15);
}
.itsm-explanation-table.grid-table.grid-table-single .gtc,
.itsm-explanation-table.grid-table.grid-table-single .gth {
    justify-content: center;
    align-items: center;
    MIN-WIDTH: 200px !important;
}
.itsm-explanation-table.grid-table.grid-table-single .gtc a,
.itsm-explanation-table.grid-table.grid-table-single .gth a{
text-align: center;
}

.itsm-explanation-table.grid-table.grid-table-single .gth.fixed-cell,
.itsm-explanation-table.grid-table.grid-table-single .gtc.fixed-cell {
    position: -webkit-sticky;
    position: sticky;
    left: 0px;
    flex-direction: row;
    z-index: 20;
    background-color: #fff !important;
}

.grid-table-single.scrollable .fixed-cell {
    box-shadow: 5px 10px 15px 5px #e1e1e1;
}


    /* Only for ITIL */
/*
.itsm-explanation-table.grid-table{
    display: grid;
    grid-auto-flow:column;
    border: 1px solid #dededf;
}
.itsm-explanation-table .grid-table-body{
    grid-auto-flow: row;
    overflow-x:scroll;
    -ms-overflow-style: none;
    scrollbar-width: none;
}

.itsm-explanation-table .grid-table-body a{
   display: flex;
}
.itsm-explanation-table .grid-table-body a > img{
display: none !Important;
}
.itsm-explanation-table .grid-table-body::-webkit-scrollbar {
    display: none;
}
.itsm-explanation-table .grid-table-body .gtr:not(:first-of-type){
    grid-template-columns: repeat(6, 16.666667%);
}

.itsm-explanation-table .grid-table-left{
    box-shadow: 7px 0 5px -2px #d5d5d5;
    margin-top: 70px;
}
.itsm-explanation-table .grid-table-left .gtr:first-of-type{
  display:none !important;
}
.itsm-explanation-table .grid-table-left .gtr .gtc{
    width: fit-content;
    padding: 0 5px;
    min-height: 70px;
}

.itsm-explanation-table .grid-table-body .gtr .gtc,
.itsm-explanation-table .grid-table-body .gtr .gth{
    padding: 0 5px;
    min-height: 70px;
}
*/

    /*borders*/
.gtc:not(.gtc:last-of-type),
.gth:not(.gth:last-of-type),
.gt-l .gth{
   border-right: 1px solid rgba(34,36,38,.15);
}
.slider .gtc:not(.gtc:last-of-type),
.slider .gth:not(.gth:last-of-type), .gt-l .gth{
    border: none !Important;
}

.gtr:not(.gtr:last-of-type){
    border-bottom: 1px solid rgba(34,36,38,.15);
}
/* General Styles */
.gtc,
.gth{
    display:flex;
    align-items: center;
    font-size: 0.85rem;
    font-weight: 700;
    color: rgba(0,0,0,.95);
    position: relative;
    width: 100%;
}
.gth{
    padding: 0.5em 0.7em;
}

.question.gtr{
    border-right:1px solid rgba(34,36,38,.15);

}
.question.gtc{
    padding: 0.5em 0.7em;
}
.gtc label{
    width: 100%;
    height: 100%;
    align-items: center;
    justify-content: center;
    display: flex;
}


/* End Table to Grid */

/* end matrix slider */