/* ###############################################
                GENERAL SECTION
   ############################################### */ 

p {
    line-height: 2.5rem;
}

p.small {
    font-size: 1.4rem;
}

.content p,
.content h1,
.content h2,
.content h3 {
    color: #404040;
}

.dark nav[role="main"] a, 
.dark nav[role="main"] a:hover, 
.dark nav[role="main"] a:active,
.dark nav[role="sub"]  a, 
.dark nav[role="sub"]  a:hover, 
.dark nav[role="sub"]  a:active
{
	text-decoration: none;
	color: white !important;
}

.content p {
    padding: 0 !important;
}

h1 {
    font-size: 48px !important;
    color: white;
}

/* TODO: The following html.dark overrides should not be necessary, the page is actually NOT dark */

html.dark {
    background: none;
    background-color: #fafafa;
}

html.dark p {
    color: #404040;
}

nav[role="main"] {
    background-color: #71A9D0;
}

.align-vertical-middle {
    /* flexbox settings */    
    display: -webkit-box;
    display: -moz-box;
    display: -ms-flexbox;
    display: -webkit-flex;
    display: flex;
    
    -webkit-box-direction: normal;
    -moz-box-direction: normal;
    -webkit-box-orient: horizontal;
    -moz-box-orient: horizontal;
    -webkit-flex-direction: row;
    -ms-flex-direction: row;
    flex-direction: row;
    
    -webkit-box-pack: center;
    -moz-box-pack: center;
    -webkit-justify-content: center;
    -ms-flex-pack: center;
    justify-content: center;
    
    -webkit-align-content: center;
    -ms-flex-line-pack: center;
    align-content: center;
    -webkit-box-align: center;
    -moz-box-align: center;
    
    -webkit-align-items: flex-start;
    -ms-flex-align: flex-start;
    align-items: flex-start;
}


#input-button-form input[type='image'] {
    min-width: 28px; /* img.width (28px) + margin.left (12px) */
    margin: 0;
}

.supportEmailError {
    color: #EB1700;
    text-align: center;
    padding-top: 0.5em;
    font-size: 1.2rem;
}

textarea,
input[type='text'] {
    box-sizing: border-box;
    
    font-size: 1.8rem;
    line-height: 2.4rem;
    padding: 0.4em;

    color: #444;
    width: 280px;

    -webkit-transition: all 0.2s ease-in-out;
    -moz-transition: all 0.2s ease-in-out;
    -ms-transition: all 0.3s ease-in-out;
    -o-transition: all 0.3s ease-in-out;
    outline: none;

    border-radius: 3px;
    border: 1px solid #ABABAB;
    
    text-align: center;
}

textarea {
    resize: none;
    text-align: left;
}

textarea:hover, textarea:focus, 
input[type='text']:hover, input[type='text']:focus 
{
    box-shadow: 0 0 3px rgba(77, 143, 211, 0.5);
    border: 1px solid #4d8fd3;
}

input:-webkit-autofill 
{
    text-shadow: none !important;
}

input:-webkit-autofill:focus 
{
    text-shadow: none !important;
}

::-webkit-input-placeholder {
    color: #ccc;
    font-weight: 400;
}

 :-moz-placeholder, ::-moz-placeholder, :-ms-input-placeholder {
     color: #ccc;
    font-weight: 400;
 }

/* ###############################################
                TEASER SECTION
   ############################################### */

section.teaser {
    padding: 16px 0 16px 0;
    overflow: hidden;
    background-color: #71A9D0;
    border-bottom: 1px solid #6597BA;
    overflow: hidden;
}

section.teaser div.pageController {
    padding-top: 18px !important;
}

.dark section.teaser h2 {
    color: white;
}

/* ###############################################
                TEASER (LINKS) SECTION
   ############################################### */

section.teaser div.product {
    border-radius: 12px;
    border: 1px solid transparent;
    padding: 18px 18px;
    
    margin: 0 8px;
    
    display: inline-block;
	width: 170px;
	width: calc(260px - 64px - 2px - 24px);

    
    -webkit-transition: all 0.05s ease-in-out;
    -moz-transition: all 0.05s ease-in-out;
    -ms-transition: all 0.05s ease-in-out;
    -o-transition: all 0.05s ease-in-out;
    transition: all 0.05s ease-in-out;
    
    cursor: pointer;
}

section.teaser div.product:hover,
section.teaser div.product.active {
    border: 1px solid rgba(255, 255, 255, 0.30);
    background-color: rgba(255, 255, 255, 0.10);
}

section.teaser div.product a,
section.teaser div.product a:hover,
section.teaser div.product a:visited,
section.teaser div.product a:active {
    text-decoration: none;
}

section.teaser div.product h2 {
    margin-top: 0.8rem;
    font-size: 2.8rem;
}

/* small */

section.teaser div.product.small {
	width: 128px;
    padding: 32px 12px;
}

section.teaser div.product.small a {    
    display: -webkit-box;
    display: -moz-box;
    display: -ms-flexbox;
    display: -webkit-flex;
    display: flex;
    
    -webkit-box-direction: normal;
    -moz-box-direction: normal;
    -webkit-box-orient: vertical;
    -moz-box-orient: vertical;
    -webkit-flex-direction: column;
    -ms-flex-direction: column;
    flex-direction: column;
    
    -webkit-box-pack: center;
    -moz-box-pack: center;
    -webkit-justify-content: center;
    -ms-flex-pack: center;
    justify-content: center;
    
    -webkit-align-content: center;
    -ms-flex-line-pack: center;
    align-content: center;
    -webkit-box-align: center;
    -moz-box-align: center;
    
    -webkit-align-items: center;
    -ms-flex-align: center;
    align-items: center;
}

section.teaser div.product.small h2 {
    font-size: 2.6rem;
}

/* ###############################################
                PAGECONTROLLER SECTION
   ############################################### */

.pageController {
    padding: 0 0 !important;
    
    -webkit-box-pack: start;
    -moz-box-pack: start;
    -webkit-justify-content: flex-start;
    -ms-flex-pack: flex-start;
    justify-content: flex-start;
}

/* ###############################################
                CONTENT SECTION
   ############################################### */ 

section.content {
    background-color: white;
    border-bottom: 1px solid #E5E5E5;
    padding: 0 0;
}

section.content > div {
    max-width: 100%;
}

/* ###############################################
                GENERAL CONTENT
   ############################################### */ 

#title-block-license p,
#title-block-forum p {
    max-width: 90%;
}
    
#title-block-license form {
    max-width: 80%;
    float: right;
    margin-right: 12px;
}

#title-block-forum a {
    padding-top: 5px;
}

#general-content {
    display: -webkit-box;
    display: -moz-box;
    display: -ms-flexbox;
    display: -webkit-flex;
    display: flex;
    
    -webkit-box-direction: normal;
    -moz-box-direction: normal;
    -webkit-box-orient: horizontal;
    -moz-box-orient: horizontal;
    -webkit-flex-direction: row;
    -ms-flex-direction: row;
    flex-direction: row;
    
    -webkit-box-pack: center;
    -moz-box-pack: center;
    -webkit-justify-content: center;
    -ms-flex-pack: center;
    justify-content: center;
    
    -webkit-align-content: flex-start;
    -ms-flex-line-pack: flex-start;
    align-content: flex-start;
    -webkit-box-align: center;
    -moz-box-align: center;
    
    -webkit-align-items: flex-start;
    -ms-flex-align: flex-start;
    align-items: flex-start;
    
    margin: 0;
    padding: 32px 0;
}

/* text blocks */
div.center-title-block {
    min-width: 360px;
    max-width: 360px;
    padding: 0 32px;
    margin: 0;
    
    -webkit-transition: all 0.05s ease-in-out;
    -moz-transition: all 0.05s ease-in-out;
    -ms-transition: all 0.05s ease-in-out;
    -o-transition: all 0.05s ease-in-out;
    transition: all 0.05s ease-in-out;
}

div.center-title-block:not(:first-of-type) {
    margin-left: 64px;
}

div.center-title-block div.header {
    /* flexbox settings */
    display: -webkit-box;
    display: -moz-box;
    display: -ms-flexbox;
    display: -webkit-flex;
    display: flex;
    
    -webkit-box-direction: normal;
    -moz-box-direction: normal;
    -webkit-box-orient: horizontal;
    -moz-box-orient: horizontal;
    -webkit-flex-direction: row;
    -ms-flex-direction: row;
    flex-direction: row;
    
    -webkit-box-pack: center;
    -moz-box-pack: center;
    -webkit-justify-content: center;
    -ms-flex-pack: center;
    justify-content: center;
    
    -webkit-align-content: center;
    -ms-flex-line-pack: center;
    align-content: center;
    -webkit-box-align: center;
    -moz-box-align: center;
    
    -webkit-align-items: center;
    -ms-flex-align: center;
    align-items: center;
}

div.center-title-block div.header img {
    margin-right: 16px;
    min-width: 56px;
}

div.center-title-block div.header h2 {
    font-size: 2.8rem;
    color: #444;
    
    -webkit-transition: all 0.3s ease-in-out;
    -moz-transition: all 0.3s ease-in-out;
    -ms-transition: all 0.3s ease-in-out;
    -o-transition: all 0.3s ease-in-out;
    transition: all 0.3s ease-in-out;
}

@media only screen and (min-device-width : 320px)  and (max-device-width : 480px) {
    div.center-title-block div.header h2 {
        font-size: 2.4rem;
    }
}

@media screen and (max-width: 850px) {
    
    div.center-title-block {
        padding: 0 8px;
        margin: 0;
    }
}

/* ###############################################
                SPECIFIC CONTENT
   ############################################### */

#specific-content {
    background-color: white;
}

#specific-content #input-button-form {
    width: 85%;
}

#general-content #input-button-form div.license-form-right {
    max-width: 32px;
    height: 37px;
    padding-left: 6px;
    padding-top: 5px;
}

#specific-content #input-button-form div.license-form-right {
    min-width: 121px;
    padding-left: 8px;
}

#input-button-form div.license-form-right {
    float:right;
    margin: 0;
    padding: 0;
}

#input-button-form div.license-form-left {
    width:auto;
    overflow:hidden;
    padding-right: 16px;
    
    position: relative;
    padding: 4px;
    left: -4px;
    top: -4px;
}

#input-button-form div.license-form-left input#lost-license-email {
    width: 100%;
    text-align: left !important;
}

#specific-content #input-button-form input[type='text'] {
    display: block;
    width: calc(100% - 16px);
}

div#specific-content.hide-details {
    background-color: white;
    overflow: hidden;
}

/* ###############################################
            SPECIFIC CONTENT (SUBMENU)
   ############################################### */ 

div.submenu {
    background-color: white;
    border-bottom: 1px solid transparent;
    
    padding: 18px 0;
    
    max-width: 100% !important;
    
    -webkit-transition: all 0.2s ease-in-out;
    -moz-transition: all 0.2s ease-in-out;
    -ms-transition: all 0.2s ease-in-out;
    -o-transition: all 0.2s ease-in-out;
    transition: all 0.2s ease-in-out;
    
    -webkit-touch-callout: none;
    -webkit-user-select: none;
    -khtml-user-select: none;
    -moz-user-select: none;
    -ms-user-select: none;
    user-select: none;
}

div.submenu > h2 {
    margin-bottom: 16px;
}

.hide-details div.submenu {
    border-bottom: 1px solid #E0E0E0;
    background-color: #fafafa;
}

div.submenu.dark {
    background-color: #FAFAFA;
    border-bottom: 1px solid #E0E0E0;
    padding: 0 0;
}

div.submenu nav {
    /* flexbox settings */
    display: -webkit-box;
    display: -moz-box;
    display: -ms-flexbox;
    display: -webkit-flex;
    display: flex;
    
    -webkit-box-direction: normal;
    -moz-box-direction: normal;
    -webkit-box-orient: horizontal;
    -moz-box-orient: horizontal;
    -webkit-flex-direction: row;
    -ms-flex-direction: row;
    flex-direction: row;
    
    -webkit-box-pack: center;
    -moz-box-pack: center;
    -webkit-justify-content: center;
    -ms-flex-pack: center;
    justify-content: center;
    
    -webkit-align-content: center;
    -ms-flex-line-pack: center;
    align-content: center;
    -webkit-box-align: center;
    -moz-box-align: center;
    
    -webkit-align-items: flex-start;
    -ms-flex-align: flex-start;
    align-items: flex-start;
    
    max-height: 110px;
}

div.submenu nav a,
div.submenu nav a:hover, 
div.submenu nav a:active,
div.submenu nav a:visited {
    text-decoration: none;
    
    display: inline-block;
    
    padding: 16px 12px 0px 12px;
    
    margin: 0 2px;
    
    min-width: 92px;
    min-height: 93px;
    max-height: 93px;
    
    border-bottom: 2px solid transparent;
    
    -webkit-transition: border 0.1s ease-in-out;
    -moz-transition: border 0.1s ease-in-out;
    -ms-transition: border 0.1s ease-in-out;
    -o-transition: border 0.1s ease-in-out;
    transition: border 0.1s ease-in-out;
}

div.submenu.dark nav a.active,
div.submenu.dark nav a:hover {
    border-bottom: 2px solid #71A9D0;
}

div.submenu nav a img {    
    padding: 0 auto;
    
    -webkit-transition: opacity 0.1s ease-in-out;
    -moz-transition: opacity 0.1s ease-in-out;
    -ms-transition: opacity 0.1s ease-in-out;
    -o-transition: opacity 0.1s ease-in-out;
    transition: opacity 0.1s ease-in-out;
}

div.submenu nav a h2 {
    color: #444;
    font-size: 2.0rem;
    text-align: center;
}

/* small screen adjusment */

@media screen and (max-width: 800px) {
    div#specific-content div.submenu nav {
        max-height: 94px;
    }
    
    div#specific-content div.submenu nav a h2 {
        display: none;
    }
    
    div.submenu nav a,
    div.submenu nav a:hover, 
    div.submenu nav a:active,
    div.submenu nav a:visited {
        min-width: none;
        min-height: calc(100% + 1px);
        max-height: calc(100% + 1px);
        
        padding: 9px 2px 4px 2px;
    }
}


/* ###############################################
        SPECIFIC CONTENT (SUBSECTIONS)
   ############################################### */

div#specific-content div.subsection a.fancyLink {
    margin: 0 0;
}

div#specific-content div.subsection a.twitterHandle {
    padding: 0 0;
    margin: 0 0;
    /* font-size: 3.2rem; */
}

div#specific-content div.subsection {
    /* margin: 64px auto; */
    padding-top: 48px;
    padding-bottom: 48px;
    max-width: 750px;
}

@media screen and (max-width: 800px) {
    div#specific-content div.subsection {
        padding-left: 32px;
        padding-right: 32px;
    }
}

div#specific-content div.subsection div.body {
    text-align: left;
}

div#specific-content div.subsection div.header {
    /* flexbox settings */
    display: -webkit-box;
    display: -moz-box;
    display: -ms-flexbox;
    display: -webkit-flex;
    display: flex;
    
    -webkit-box-direction: normal;
    -moz-box-direction: normal;
    -webkit-box-orient: horizontal;
    -moz-box-orient: horizontal;
    -webkit-flex-direction: row;
    -ms-flex-direction: row;
    flex-direction: row;
    
    -webkit-box-pack: start;
    -moz-box-pack: start;
    -webkit-justify-content: flex-start;
    -ms-flex-pack: flex-start;
    justify-content: flex-start;
    
    -webkit-align-content: start;
    -ms-flex-line-pack: start;
    align-content: start;
    
    -webkit-box-align: center;
    -moz-box-align: center;
    -webkit-align-items: center;
    -ms-flex-align: center;
    align-items: center;
    
    margin-bottom: 24px;
}

div#specific-content div.subsection div.header h2 {
    padding: 0 0;
    margin: 0 0;
    text-align: left;
}

div#specific-content div.subsection:not(:last-of-type):after {
    display: block;
    content: '';
    width: 100%;
    height: 1px;

    position: relative;

    background-image: url('../../Images/support/section-separator.png');
    background-position: center center;
    background-size: 850px 1px;
    background-repeat: no-repeat;
}

/* ###############################################
      SPECIFIC CONTENT (SUBSECTION - DOCUMENTS)
   ############################################### */ 

div.document-links {
    display: -webkit-box;
    display: -moz-box;
    display: -ms-flexbox;
    display: -webkit-flex;
    display: flex;
    
    -webkit-box-direction: normal;
    -moz-box-direction: normal;
    -webkit-box-orient: horizontal;
    -moz-box-orient: horizontal;
    -webkit-flex-direction: row;
    -ms-flex-direction: row;
    flex-direction: row;
    
    -webkit-box-pack: center;
    -moz-box-pack: center;
    -webkit-justify-content: center;
    -ms-flex-pack: center;
    justify-content: center;
    
    -webkit-align-content: center;
    -ms-flex-line-pack: center;
    align-content: center;
    -webkit-box-align: center;
    -moz-box-align: center;
    
    -webkit-align-items: flex-start;
    -ms-flex-align: flex-start;
    align-items: flex-start;
}

div.document-link {
    /* flexbox settings */
    display: inline-block;
    text-align: center;
    vertical-align: top;
    margin: 0;
    padding: 0 18px;
}

div.document-link.multiple {
    padding: 18px 18px;
    border-radius: 7px;
    width: 200px;
    max-width: 200px;
}

div.document-link.multiple p {
    margin: 0;
    padding: 0;
}

div.document-link.multiple p a {
    margin: 0;
    padding: 4px;
    width: auto;
}

div.document-link h2 {
    margin-top: 0.8rem;
    font-size: 2.2rem;
    text-align: center;
    padding: 0 8px;
}

div.document-link > a,
div.document-link > a:hover,
div.document-link > a:focus,
div.document-link > a:active,
div.document-link > a:visited {
    padding: 18px 0;
    text-decoration: none;
    width: 170px;
    max-height: 170px;
    display: inline-block;
    
    border-radius: 7px;
    
    -webkit-transition: background 0.1s ease-in-out;
    -moz-transition: background 0.1s ease-in-out;
    -ms-transition: background 0.1s ease-in-out;
    -o-transition: background 0.1s ease-in-out;
    transition: background 0.1s ease-in-out;
}

div.document-link.multiple:hover,
div.document-link > a:hover {
    background-color: rgba(0,0,0, 0.02);
}

/* ###############################################
         SPECIFIC CONTENT (CONTACT FORMS)
   ############################################### */ 

/* support forms */
div.contact-forms {
    color: #404040;
    margin-top: 24px;
    
    margin-left: 0;
    width: 80%;
}

/* SHUTDOWN NOTE */

div.shutdown-note {
    text-align: center;
    max-width: 560px;
    padding: 24px;
}

div.shutdown-note > img {
    padding-bottom: 32px;
}

div.shutdown-note > p {
    margin-bottom: 0;
    color: inherit;
}

/* DELAYED NOTE */
div.delayed-note {
    text-align: left;
    width: 80%;
    margin: 0 0 24px 0;
    padding: 0;
    
    background-image: url('../../Images/support/contact-form-delayed.png');
    background-position: 16px center;
    background-size: 48px 48px;
    background-repeat: no-repeat;
    
    border-radius: 7px;
    background-color: rgba(252,229,1,0.03);
    border: 1px solid #FC9002;
}

div.delayed-note > p {
    margin: 0;
    padding: 24px 16px 24px 80px !important; /* 80px = background-position.left*2 + background-size.width */
    
    color: #FC8802;
}

@media (-webkit-min-device-pixel-ratio: 1.5), (min-resolution: 144dpi)  {
    div.delayed-note {
        background-image: url('../../Images/support/contact-form-delayed@2x.png');
    }
}

div.contact-forms.feedback {
    padding-top: 0;
    margin-top: 16px;
    background-image: none;
}


div.contact-forms form p.label:not(:first-of-type) {
    margin-top: 16px;
}

div.contact-forms form p.label.note {
    margin-top: 32px !important;
    color: #aaa;
}

p.label {
    margin-bottom: 4px;
    color: inherit;
}

div.contact-forms form input[type='submit'] {
    margin-top: 24px;
}

div.contact-forms > *:first-child {
    margin-top: 0;
}

div.contact-forms table {
    border-collapse: separate;
	border-spacing: 12px 8px;
}

#specific-content input[type='text'] {
    text-align: left;
}

input[type='submit'],
div.contact-forms input[type='submit'],
div.contact-forms input[type='button'] {
    border-radius: 3px;
    background: #62a5e8;
    border: 1px solid rgba(0,0,0,0.10);
    -moz-box-shadow:    0px 1px 0px 1px rgba(255,255,255,0.30);
    box-shadow:         0px 1px 0px 1px rgba(255,255,255,0.30);
    cursor: pointer;
    color: #fff;
    padding: 7px 12px;
    
    font-size: 1.8rem;
    line-height: 2.4rem;
    
    -webkit-transition: all 0.2s ease-in-out;
    -moz-transition: all 0.2s ease-in-out;
    -ms-transition: all 0.2s ease-in-out;
    -o-transition: all 0.2s ease-in-out;
    transition: all 0.2s ease-in-out;
}

input[type='submit']:hover,
div.contact-forms input[type='button']:hover,
div.contact-forms input[type='submit']:hover {
    background: #5099e2;
}

/* ###############################################
        SPECIFIC CONTENT (SUBSECTION : FAQ)
   ############################################### */

/* FAQ embedding subsection */

div#faq.subsection div.header {
    margin-bottom: 24px !important;
}

div#faq.subsection div.faq {
    overflow: hidden;
}

div.faq div.full-path {
    font-family: monospace;
    font-size: 1.4rem;
}

div#faq.subsection input#search-field {
    margin-bottom: 10px;
}

div#faq.subsection div.content h4 {
    margin-bottom: 0.8rem;
}

/* actual faq part */
div.faq {
    padding: 0 0;
    margin: 0 0;
}

div.faq div.content {
    font-size: 1.5rem;
    color: #404040;
    padding: 8px 16px 8px 26px;
    margin-bottom: 24px;
    line-height: 2.5rem;
    background-color: #f8fbfd; /* #expanded-FAQ-title-background-color */

    /* Complete the rounded corners at the bottom edge. The top edge corners are part
    of the FAQ title, so the radius must be the same as in #highlighted-FAQ-title */
    border-bottom-left-radius: 5px; /* #FAQ-background-radius */
    border-bottom-right-radius: 5px; /* #FAQ-background-radius */
}

div.faq div.content li {
    margin-bottom: 0.5em;
}

div.faq div.content h4 {
    font-size: 1.7rem;
}

div.faq div.content tt {
    font-size: 1.8rem;
}

div.faq div.content p:first-of-type {
    margin-top: 0;
}

div.faq div.content p {
    margin-top: 0.7em;
    margin-bottom: 0.7em;
}


/* faq - topic */

div.faq ul {
    list-style: none;
}

div.faq > ul {
    padding-left: 0;
    margin-top: 0;
}

div.faq > ul > li > h2 {
    font-size: 26px;
    color: #4D8FD3;
    padding-bottom: 0.3em;
}

div.faq > ul > li[aria-expanded='false'] > ul,
div.faq > ul > li > ul > li[aria-expanded='false'] > div.content {
    display: none;
}

div.faq > ul > li {
    padding-top: 36px;
}

form.feedback div.faq > ul > li {
    padding-top: 0;
}
    
/* faq - topic - question */

div.faq > ul > li > ul {
    padding: 0;
}

div.faq > ul > li > ul > li > h3:hover,
div.faq > ul > li > ul > li[aria-expanded='true'] > h3 {
    background-color: #f8fbfd; /* #expanded-FAQ-title-background-color */

    /* the content below the FAQ title has the same #expanded-FAQ-title-background-color,
    so we remove the rounded corners from the bottom edge of the title */
    border-bottom-left-radius: 0px; /* #FAQ-background-radius */
    border-bottom-right-radius: 0px; /* #FAQ-background-radius */
}

div.faq > ul > li > ul > li[aria-expanded='false'] > h3 {
    border-bottom-left-radius: 5px; /* #FAQ-background-radius */
    border-bottom-right-radius: 5px; /* #FAQ-background-radius */
}

div.faq > ul > li > ul > li[aria-expanded='true'] > h3 {
    font-weight: 600;
}

div.faq > ul > li > ul > li > h3 {
    /* padding-left: 22px; */
    background-image: url('../../Images/support/faq-subtopic-disclosure-expanded.png');
    background-size: 16px 16px;
    background-position: 6px 12px;
    background-repeat: no-repeat;
    
    border-radius: 5px; /* #FAQ-background-radius */
    padding: 4px 4px 7px 26px;
    
    -webkit-transition: background-color 0.05s ease-in-out;
    -moz-transition: background-color 0.05s ease-in-out;
    -ms-transition: background-color 0.05s ease-in-out;
    -o-transition: background-color 0.05s ease-in-out;
    transition: background-color 0.05s ease-in-out;
    
    font-family: "open-sans", "Lucida Grande", sans-serif;
    font-weight: 400;
}


div.faq > ul > li > ul > li[aria-expanded='false'] > h3 {
    background-image: url('../../Images/support/faq-subtopic-disclosure-collapsed.png');
    background-position: 6px 14px;
}

div.faq > ul > li[aria-expanded='true'] > h2 {
    padding-left: 22px;
    background-image: url('../../Images/support/faq-topic-disclosure-expanded.png');
    background-size: 16px 16px;
    background-position: left 4px;
    background-repeat: no-repeat;
}
 
div.faq > ul > li[aria-expanded='false'] > h2 {
    background-image: url('../../Images/support/faq-topic-disclosure-collapsed.png');
    background-position: left 5px;
    padding-left: 22px;
    background-repeat: no-repeat;
}

/* faq - topic (links) */
/* faq - topic - question (links) */

div.faq > ul > li > ul > li > h3 > a,
div.faq > ul > li > ul > li > h3 > a:hover,
div.faq > ul > li > ul > li > h3 > a:active,
div.faq > ul > li > ul > li > h3 > a:visited,
div.faq > ul > li > ul > li > h3 > a:focus {
    text-decoration: none;
}

div.faq > ul > li > ul > li > h3 > a {
    font-size: 1.6rem;
    color: #444;
}

div.faq > ul > li[aria-expanded] > h2,
div.faq > ul > li > ul > li > h3 {
    cursor: pointer;
}

@media (-webkit-min-device-pixel-ratio: 1.5), (min-resolution: 144dpi)  {
    div.faq > ul > li[aria-expanded='true'] > h2 {
        background-image: url('../../Images/support/faq-topic-disclosure-expanded@2x.png');
    }
    
    div.faq > ul > li[aria-expanded='false'] > h2 {
        background-image: url('../../Images/support/faq-topic-disclosure-collapsed@2x.png');
    }
    
    div.faq > ul > li > ul > li > h3 {
        background-image: url('../../Images/support/faq-subtopic-disclosure-expanded@2x.png');
    }


    div.faq > ul > li > ul > li[aria-expanded='false'] > h3 {
        background-image: url('../../Images/support/faq-subtopic-disclosure-collapsed@2x.png');
    }
}

/* FAQ result lists located in contact form */
div#contact.subsection div.faq > ul > li > ul > li > h3 > a {
    color: #4D8FD3;
    font-size: 1.8rem;
}

div#contact.subsection div.faq > ul > li > ul > li > h3:hover,
div#contact.subsection div.faq > ul > li > ul > li[aria-expanded='true'] > h3 {
    background-color: #f8fbfd; /* #expanded-FAQ-title-background-color */
}

div#contact.subsection div.faq > ul > li > ul > li[aria-expanded='true'] > h3 {
    font-weight: 400;
}

div#contact.subsection div.faq > ul > li > ul > li > h3 {
    background-image: url('../../Images/support/faq-topic-disclosure-expanded@2x.png');
}


div#contact.subsection div.faq > ul > li > ul > li[aria-expanded='false'] > h3 {
    background-image: url('../../Images/support/faq-topic-disclosure-collapsed@2x.png');
}

@media (-webkit-min-device-pixel-ratio: 1.5), (min-resolution: 144dpi)  {
    div#contact.subsection div.faq > ul > li > ul > li > h3 {
        background-image: url('../../Images/support/faq-topic-disclosure-expanded@2x.png');
    }


    div#contact.subsection div.faq > ul > li > ul > li[aria-expanded='false'] > h3 {
        background-image: url('../../Images/support/faq-topic-disclosure-collapsed@2x.png');
    }
}

/* ###############################################
        FEEDBACK
   ############################################### */

div.subsection.feedback {
    padding-top: 88px !important;
}

div.furtherInstructions {
    padding: 0;
    color: #444;
    padding-top: 8px !important;
}

div.furtherInstructions p {
    border-top: 1px solid #efefef;
    padding-top: 32px !important;
    margin-top: 0 !important;
}

div.furtherInstructions table {
    width: 100%;
    border-collapse: separate;
    border-spacing: 0px 5px;
    
    padding: 10px 12px;
    
    background-color: #fafafa;
    border-radius: 7px;
    
    color: #888;

    box-shadow: 0 3px 5px rgba(0,0,0, 0.05);
    border: 1px solid #e0e0e0;
}

div.furtherInstructions table tr td {
    line-height: 2.7rem;
    text-align: left;
}

div.furtherInstructions table tr td:nth-child(2) {
    background-color: #fdfdfd;
    border: 1px solid #eaeaea;
    padding: 3px 8px;
}

div.furtherInstructions table tr td:first-child {
    padding-right: 8px;
    padding-top: 4px;
    text-align: right;
    vertical-align: top;
    
    -webkit-touch-callout: none;
    -webkit-user-select: none;
    -khtml-user-select: none;
    -moz-user-select: none;
    -ms-user-select: none;
    user-select: none;
    
    cursor: default;
}

/* Alternative E-Mail Support Form */
form.support-form {
    display: flex;
    flex-direction: row;
    flex-wrap: wrap;
    justify-content: space-around;
    align-items: center;
    align-content: flex-start;
}

form.support-form .aux-text{
    color: rgba(0,0,0,0.5);
    text-align: left;
    margin-bottom: 0;
}

form.support-form .mod-third { width: 31%; }
form.support-form .mod-half  { width: 46%; }
form.support-form .mod-full  { width: 96%; }

form.support-form img.captcha {
    border: 1px solid #666;
}

form.support-form textarea {
    height: 250px;
    resize: vertical;
}

form.support-form .buttons {
    width: 96%;
    display: flex;
    justify-content: flex-end;
    
    margin: 1em 0;
}

form.support-form .captcha-input {
    display: flex;
    justify-content: center;
    flex-wrap: wrap;
    align-items: center;
}
form.support-form .captcha-input > * {
    margin: 1em;
}
          
form.support-form input:not([type="submit"]) {
    width: 100%;
    z-index: 20;
}              

/* Responsive Form */
@media all and (max-width: 660px) {
    div#specific-content div.subsection {
        padding-left: 10px;
        padding-right: 10px;
    }
}
@media all and (max-width: 500px) {
    div#specific-content div.subsection {
        padding-left: 3px;
        padding-right: 3px;
    }
    
    form.support-form .mod-half  { width: 96%; }
    form.support-form .mod-third  { width: 50%; }

    form.support-form input.mod-half { margin: 0.2em 0;}                    
    
    .first_name     { order: 0;  }
    .last_name      { order: 1;  }
    .email          { order: 10; }
    .email_verify   { order: 11; }
    .subject        { order: 20; }
    .body           { order: 30; }
    .captcha-input  { order: 40; }
    .buttons        { order: 50; }
    
    p:nth-child(even) {
        margin-top: 0.3em;
    }
}

/* ###############################################
        LOST LICENSE REQUEST COMPLETED
   ############################################### */

section.content div.lost-license-request-completed {
    padding: 64px 0;
    max-width: 620px;
}

section.content div.lost-license-request-completed > img {
    padding: 8px 0 32px 0;
}

/* ###############################################
        INSTANT SEARCH FORM
   ############################################### */

div.instant-search-form {
    width: 80%;
    margin: 0;
}

div.instant-search-form.fixed {
    max-height: 72px;
}

div.instant-search-form div.search-input {
    position: relative; /* needed by child: div#search-clear-button */
}

div.instant-search-form div.search-input input#search-field {
    box-sizing: border-box;    
    width: 100%;
    
    padding-left: 40px; /* 24px (image) + 2 * 8px (margin) */
    padding-right: 32px;
    
    margin: 0;
    
    background-image: url('../../Images/support/search.png');
    background-position: 8px center;
    background-size: 24px 24px;
    background-repeat: no-repeat;
    
    -webkit-transition: all 0.2s ease-in-out;
    -moz-transition: all 0.2s ease-in-out;
    -ms-transition: all 0.2s ease-in-out;
    -o-transition: all 0.2s ease-in-out;
    transition: all 0.2s ease-in-out;
    
    border: 1px solid #d0d0d0;
}

@keyframes rotating {
  from {
    transform: rotate(0deg);
    -ms-transform: rotate(0deg);
    -moz-transform: rotate(0deg);
    -webkit-transform: rotate(0deg);
    -o-transform: rotate(0deg);
  }
  to {
    transform: rotate(360deg);
    -ms-transform: rotate(360deg);
    -moz-transform: rotate(360deg);
    -webkit-transform: rotate(360deg);
    -o-transform: rotate(360deg);
  }
    
}
@-webkit-keyframes rotating /* Safari and Chrome */ {
  from {
    transform: rotate(0deg);
    -ms-transform: rotate(0deg);
    -moz-transform: rotate(0deg);
    -webkit-transform: rotate(0deg);
    -o-transform: rotate(0deg);
  }
  to {
    transform: rotate(360deg);
    -ms-transform: rotate(360deg);
    -moz-transform: rotate(360deg);
    -webkit-transform: rotate(360deg);
    -o-transform: rotate(360deg);
  }
}

div.instant-search-form div.search-input.searching div#searching-indicator,
form.feedback.searching div#searching-indicator {
    display: block;
    -webkit-animation: rotating 0.7s steps(12, end) infinite;
    -moz-animation: rotating 0.7s steps(12, end) infinite;
    -ms-animation: rotating 0.7s steps(12, end) infinite;
    -o-animation: rotating 0.7s steps(12, end) infinite;
    animation: rotating 0.7s steps(12, end) infinite;
}

div#contact.subsection div.contact-link:not(:first-of-type) {
    padding-top: 18px;
}

div#contact.subsection div.instant-search-form div.search-input.searching div#searching-indicator-note {
    display: block;
}

form.feedback.searching div#searching-indicator-note {
    display: flex;
    align-items: center;
    visibility: visible;
}

div#contact.subsection div.instant-search-form div.search-input.searching div#searching-indicator-note,
form.feedback.searching div#searching-indicator-note {    
    min-width: 65%;
    max-width: 65%;
    margin: 0;
    height: 3em;
}

div#contact.subsection div.instant-search-form div.search-input div#searching-indicator-note {
    display: none;
}

form.feedback div#searching-indicator-note {
    visibility: collapse;
}

div#contact.subsection div.instant-search-form div.search-input div#searching-indicator-note,
form.feedback div#searching-indicator-note {
    color: #999;
    height: 0;
}

form.feedback div#searching-indicator-note span {
    padding-left: 0.8em;
}

div#contact.subsection div.instant-search-form div.search-input div#searching-indicator,
form.feedback div#searching-indicator {
    display: inline-block;
    margin: 0;  
    opacity: 0.8;
    background-image: url('../../Images/support/searching-indicator-gray.png');
}

div#contact.subsection div.instant-search-form div.search-input div#searching-indicator {
    position: relative;
    left: 0px;
    top: 6px;
    margin-top: 8px;
}

div.instant-search-form div.search-input.searching input#search-field,
form.feedback.searching input#search-field {
    background-image: none !important;
}

div.instant-search-form div.search-input.searching div#searching-indicator,
form.feedback.searching div#searching-indicator {
    background-image: url('../../Images/support/searching-indicator-gray.png');
}

div.instant-search-form div.search-input div#searching-indicator,
form.feedback div#searching-indicator {
    display: none;
    height: 24px;
    width: 24px;
    
    background-image: url('../../Images/support/searching-indicator-gray.png');
    background-position: center center;
    background-size: 22px 22px;
    background-repeat: no-repeat;
    
    pointer-events: none;
    
    -webkit-transition: opacity 0.2s ease-in-out;
    -moz-transition: opacity 0.2s ease-in-out;
    -ms-transition: opacity 0.2s ease-in-out;
    -o-transition: opacity 0.2s ease-in-out;
    transition: opacity 0.2s ease-in-out;
}

div.instant-search-form div.search-input div#searching-indicator {
    position: absolute;
    top: 8px;
    left: 8px;
}

@media (-webkit-min-device-pixel-ratio: 1.5), (min-resolution: 144dpi)  {
    
    div.instant-search-form div.search-input div#searching-indicator,
    div.instant-search-form div.search-input.searching div#searching-indicator,
    div#contact.subsection div.instant-search-form div.search-input div#searching-indicator
/*
    form.feedback div#searching-indicator,
    form.feedback.searching div#searching-indicator {
*/{
        background-image: url('../../Images/support/searching-indicator-gray@2x.png');
    }
}

div.instant-search-form div.search-input.valid div#search-clear-button {
    display: block;
    position: absolute;
    height: 24px;
    width: 24px;
    
    top: 6px;
    right: 8px;
    
    background-image: url('../../Images/support/search-clear.png');
    background-position: center 8px;
    background-size: 13px 13px;
    background-repeat: no-repeat;
    
    cursor: pointer;
    
    -webkit-transition: background-image 0.2s ease-in-out;
    -moz-transition: background-image 0.2s ease-in-out;
    -ms-transition: background-image 0.2s ease-in-out;
    -o-transition: background-image 0.2s ease-in-out;
    transition: background-image 0.2s ease-in-out;
}

div.instant-search-form div.search-input div#skip-search-button {
    pointer-events: none;
    opacity: 0;
    
    font-size: inherit;
    
    display: block;
    position: absolute;
    
    padding: 0 18px;
    line-height: 36px; /* matches height, for vertical text alignment */
    
    color: white;
    
    height: 36px; /* calc(100% - 4px) */
    top: 2px;
    right: 2px;
    
    border-radius: 3px;
    background-color: #62a5e8;
    cursor: pointer;
    
    font-family: "open-sans", "Lucida Grande", sans-serif;
    font-weight: 400;
    
    -webkit-transition: background-color,opacity 0.2s ease-in-out;
    -moz-transition: background-color,opacity 0.2s ease-in-out;
    -ms-transition: background-color,opacity 0.2s ease-in-out;
    -o-transition: background-color,opacity 0.2s ease-in-out;
    transition: background-color,opacity 0.2s ease-in-out;
}
    
div.instant-search-form div.search-input div#skip-search-button.disabled {
    background-color: #62a5e8;
    opacity: 1.0;
    pointer-events: none;
}

div.instant-search-form div.search-input div#skip-search-button.enabled {
    pointer-events: all;
    opacity: 1.0;
}

div.instant-search-form div.search-input div#skip-search-button.valid:hover {
    background-color: #5099e2;
}

div.instant-search-form.iconless {
    background-image: none !important;
}

div.instant-search-form.iconless div.faq > ul {
    margin-bottom: 0;
}

div#contact.subsection div.instant-search-form.iconless {
    padding-bottom: 0;
}

div.instant-search-form div.search-input.valid div#search-clear-button:hover {
    background-image: url('../../Images/support/search-clear-hovered.png');
}

div.instant-search-form div.search-input.valid input#search-field,
form.feedback.valid input#search-field {
    border: 1px solid #ABABAB;
}
    
div.instant-search-form div.search-input.valid input#search-field,
form.feedback.valid input#search-field {
    background-image: url('../../Images/support/search-valid.png');
    box-shadow: none;
}

div.instant-search-form div.search-input input#search-field:focus,
div.instant-search-form div.search-input input#search-field:hover,
div.instant-search-form div.search-input.hovered input#search-field,
form.feedback input#search-field:focus,
form.feedback input#search-field:hover,
form.feedback.hovered input#search-field {
    background-image: url('../../Images/support/search-hovered.png');
    box-shadow: 0 0 3px rgba(77, 143, 211, 0.5);
    border: 1px solid #4d8fd3;
}

div.instant-search-form.iconless div.search-input input#search-field,
div.instant-search-form.iconless div.search-input.valid input#search-field,
div.instant-search-form.iconless div.search-input input#search-field:focus,
div.instant-search-form.iconless div.search-input input#search-field:hover,
div.instant-search-form.iconless div.search-input.hovered input#search-field,
form.feedback input#search-field,
form.feedback.valid input#search-field,
form.feedback input#search-field:focus,
form.feedback input#search-field:hover,
form.feedback.hovered input#search-field {
    background-image: none;
}

div.instant-search-form.iconless div.search-input input#search-field ,
form.feedback input#search-field {
    padding-left: 8px;
    padding-right: 8px;
}

a.reload-captcha {
    background: url('../../Images/support/reload-captcha.png') no-repeat 0% 50%;
    background-size: 36px 20px;
    padding: 8px 12px 8px 34px;
}

a.reload-captcha:hover {
    background-color: rgba(32, 135, 222, 0.05);
    text-decoration: none;
    border-radius: 3px;
}

@media (-webkit-min-device-pixel-ratio: 1.5), (min-resolution: 144dpi)  {
    div.instant-search-form div.search-input input#search-field {
        background-image: url('../../Images/support/search@2x.png');
    }

    div.instant-search-form div.search-input.valid div#search-clear-button {
        background-image: url('../../Images/support/search-clear@2x.png');
    }

    div.instant-search-form div.search-input.valid div#search-clear-button:hover {
        background-image: url('../../Images/support/search-clear-hovered@2x.png');
    }

    div.instant-search-form div.search-input.valid input#search-field {
        background-image: url('../../Images/support/search-valid@2x.png');
    }

    div.instant-search-form div.search-input input#search-field:focus,
    div.instant-search-form div.search-input input#search-field:hover,
    div.instant-search-form div.search-input.hovered input#search-field {
        background-image: url('../../Images/support/search-hovered@2x.png');
    }

    a.reload-captcha {
        background-image: url('../../Images/support/reload-captcha@2x.png');
    }
}

div#contact.subsection div.instant-search-form,
div#contact.subsection form.feedback {
    padding-bottom: 24px;
    width: 100%;
}

div#contact.subsection div.instant-search-form div.search-input.valid + input[type="checkbox"] + label,
div#contact.subsection form.feedback.valid + input[type="checkbox"] + label {
    display: block;
}

div#contact.subsection div.instant-search-form div.search-input + input[type="checkbox"] + label,
div#contact.subsection form.feedback + input[type="checkbox"] + label {
    display: none;
}

input[type="checkbox"] {
    display:none;
}

input[type=checkbox] + label {
    line-height: 24px;
    height: 24px;
    cursor: pointer;
    
    -webkit-transition: color 0.2s ease-in-out;
    -moz-transition: color 0.2s ease-in-out;
    -ms-transition: color 0.2s ease-in-out;
    -o-transition: color 0.2s ease-in-out;
    transition: color 0.2s ease-in-out;
}

input[type=checkbox]:checked + label:hover:before {
    background-image: url('../../Images/support/checkbox-checked-hovered.png');
}

input[type=checkbox] + label:hover:before {  
    background-image: url('../../Images/support/checkbox-hovered.png');
}

input[type=checkbox]:checked + label:before {
    background-image: url('../../Images/support/checkbox-checked.png');
}

input[type=checkbox] + label:before {  
    display: inline-block;
    content: ' ';
    position: relative;
    top: 5px;
    padding-left: 5px;
    
    width: 22px;
    height: 22px;
    
    background-image: url('../../Images/support/checkbox.png');
    background-position: left center;
    background-size: 22px 22px;
    background-repeat: no-repeat;
    
    -webkit-transition: background-image 0.2s ease-in-out;
    -moz-transition: background-image 0.2s ease-in-out;
    -ms-transition: background-image 0.2s ease-in-out;
    -o-transition: background-image 0.2s ease-in-out;
    transition: background-image 0.2s ease-in-out;
}  

@media (-webkit-min-device-pixel-ratio: 1.5), (min-resolution: 144dpi)  {
    input[type=checkbox]:checked + label:hover:before {
        background-image: url('../../Images/support/checkbox-checked-hovered@2x.png');
    }

    input[type=checkbox] + label:hover:before {  
        background-image: url('../../Images/support/checkbox-hovered@2x.png');
    }

    input[type=checkbox]:checked + label:before {
        background-image: url('../../Images/support/checkbox-checked@2x.png');
    }

    input[type=checkbox] + label:before {  
        background-image: url('../../Images/support/checkbox@2x.png');
    }  
}

div#contact.subsection div#contact-form {
    display: none;
}

div#contact.subsection div#contact-form.shown {
    display: block;
}

div#contact.subsection p.search-prelude {
    margin-bottom: 0px;
    color: #ABABAB;
    font-size: 1.4rem;
}

div#contact.subsection div.faq > ul {
    margin-top: 8px;
}

div#contact.subsection div.instant-search-form div.search-input input#search-field:not(:hover):not(:active):not(:focus),
div#contact.subsection form.feedback input#search-field:not(:hover):not(:active):not(:focus) {
    border: 1px solid #ABABAB;
}

div.subsection div.body *:last-child {
    // margin-bottom: 0;
}

input[name="optionalQuestionary"] + label {
    line-height: 48px;
}

div.optionalQuestionary {
    display: none;
    width: 100%;
}

input[name="optionalQuestionary"]:checked + label + div.optionalQuestionary {
    display: block;
}

form.feedback {
    width: 100%;
    display: flex;
    flex-wrap: wrap;
    justify-content: flex-start;
    align-items: flex-start;
}

form.feedback input[name="optionalQuestionary"] + label {
    width: 100%;
}

form.feedback p.label,
form.feedback input[type="text"],
form.feedback #search-results {
    width: 100%;
}

form.feedback .buttons {
    width: 100%;
    display: flex;
    justify-content: flex-end;
    align-items: center;
}