/*
   developer:   rmiske
   requires:    /common/framework/css/framework.ru.css
   ========================================================================== */



/* ==========================================================================
   setup the environment
   ========================================================================== */
html { font-family: 'Noto Sans', Arial, Helvetica, sans-serif; }
body { color: #535353; }

.orange { color: #f57721 !important; }



/* ==========================================================================
   sections
   ========================================================================== */
section, 
header#sub { 
    padding: 2rem 0.78125rem; /*12.5px*/
    width: 100%;
}
div[id$="-content"] {
    margin: 0 auto;
    max-width: 64.625rem; /*(1029px)*/
    padding: 0 0.78125rem; /*12.5px*/
    width: 100%;
}
div[id$="-content"] h1 {
    font-size: 2.53125rem;
    padding: 2rem 0 0.5rem;
    /*text-transform: uppercase;*/
}
div[id$="-content"] h2 {
    font-size: 1.6875rem;
    font-weight: 300;
    line-height: 1;
    margin-top: 0;
    margin-bottom: 1.25rem;
    text-transform: none;
}
div[id$="-content"] h3 {
    color: #333;
    font-size: 1.3125rem;
    line-height: 1;
    margin-top: 0.25rem;
    margin-bottom: 0.625rem;
}
div[id$="-content"] h4 {
    font-style: italic;
    margin-top: 0.4375rem; 
    margin-bottom: 0.375rem;
}
div[id$="-content"] p,
div[id$="-content"] li {
    font-size: 0.9375rem;
    line-height: 1.5333333333rem;
}
div[id$="-content"] p { margin: 0 0 1rem; }
div[id$="-content"] img,
div[id$="-content"] iframe {
    max-width: 100%;
}



/* ==========================================================================
   FROM SUPPORT
   ========================================================================== */
/*setup the environment*/
.cta-link {
    font-size: 0.9375rem;
    line-height: 1.5333333333rem;
}
div[id$="-content"] p.subtitle {
    font-size: 1.3125rem;
    font-weight: 300;
}
/*setup the environment > misc*/
.cta-link { margin-top: 0.75rem; }
.cta-link span { padding-right: 0.625rem; }


/*head*/
#home-content,
#sub-content,
#search-content { 
    position: relative; 
}
#login {
    background: #d00;
    line-height: 1;
    padding: 0.5rem 0.75rem;
}
#login:hover { background: #ff7700; }
#login span { padding: 0; position: relative; }
#login span#login-icon { 
    padding-right: 0.25rem; 
    top: 1px;
}
#login span#login-txt { padding-right: 1.5rem; }
#login span#login-txt:before { 
    background: url('/support/contact/img/icon-sign-in.png') no-repeat center;
    background-size: 10px;
    content: '';
    height: 8px;
    position: absolute;
    right: 0;
    top: 4px;
    width: 10px;
}
.backlink { font-size: 1.0625rem; line-height: 1.25rem; padding-bottom: 0.125rem; }


/*head > subpages/search*/
header#sub { padding-bottom: 0; padding-top: 2.75rem; }
#sub h1 { padding: 0; }


/*topic pages > search*/
.category-search .search { margin-left: 0.5rem; line-height: 0; }
.category-search .search-icon { 
    border-left: 1px solid #ddd; 
    cursor: pointer;
    padding: 0.125rem 0.375rem 0 0.5rem; 
}
.category-search .search-input { 
    display: none;
    max-width: 20.625rem;
    width: 20.625rem;
}
.category-search .search-input.active { display: table-cell; }
.category-search input { 
    border: none; 
    border-bottom: 1px solid #ddd;
    font-size: 0.8125rem !important;
    line-height: 1;
    padding: 1px 0;
    width: 20.625rem;
}
.category-search input::placeholder { color: #a9a9a9; /*all*/ opacity: 1; /*Firefox*/ } /*Chrome, Firefox, Opera, Safari 10.1+*/
.category-search input:-ms-input-placeholder { color: #a9a9a9; } /*Internet Explorer 10-11*/
.category-search input::-ms-input-placeholder { color: #a9a9a9; } /*Microsoft Edge*/



/* ==========================================================================
   login/support overrides
   ========================================================================== */
#login-wrapper { 
    margin-right: 0.78125rem; /*12.5px*/
    margin-top: 0;
    position: absolute;
    right: 0;
    top: -2.75rem;
}
#login-wrapper-inner {
    position: relative;
    text-align: right;
}

#login-wrapper #login {
    cursor: pointer;
    display: inline-block;
    margin-top: 0;
    position: relative;
}
#login-wrapper ul {
    background: #fff;
    border: 1px solid #ccc;
    display: none;
    padding: 0.5rem 1rem 0.5rem 0.75rem;
    position: absolute;
    top: 2.0625rem;
    right: 0;
    text-align: left;
}

#login-wrapper ul > li {
    line-height: 1.5;
    padding-left: 0.75rem; /*change to padding to margin if you want the bullet outside*/
}
#login-wrapper ul li:not(:first-child) {
    border-top: 1px solid #ccc;
    margin-top: 0.875rem;
    padding-top: 0.75rem; 
}
#login-wrapper ul > li:before {
    color: #b3b3b3;
    content: "■";
    display: inline-block;
    font-family: Arial;
    font-size: 0.6875rem;
    margin-left: -0.75rem;
    margin-right: 0;
    position: relative;
    top: -0.125rem;
    width: 0.5rem; 
}

#login-wrapper ul a { display: inline-grid; }

#login-wrapper ul span { 
    color: #dd1100;
    font-size: 1rem;
}
#login-wrapper ul a:hover span {
    color: #ff7700;
}

#login-wrapper ul span + span {
    color: #555 !important;
    display: block;
    font-size: 0.875rem;
    padding-right: 1rem;
    white-space: nowrap;
}



/* ==========================================================================
   other form stuff
   ========================================================================== */
#_form-gui input[type=text],
#_form-gui textarea,
#_form-gui select {
    font-size: 13px !important;
}

#_form-gui select.inactive-by-default { color: #a9a9a9; }
#_form-gui select.inactive-by-default#topic { background: #fff7be; color: #535353; }
#_form-gui select.inactive-by-default.active { background: #fff !important; color: #535353; }

div[id$="-content"] p.topic-label {
    color: #535353;
    font-size: 1.62rem;
    font-weight: 300;
    margin-bottom: 0.75rem;
    line-height: 1.2;
}
div[id$="-content"] p.information { 
    font-size: 1.17rem;
    font-weight: 300;
    line-height: 1.4;
    padding: 1.75rem 0 0; 
}

.intro-page div[id$="-content"] p.information,
.intro-page #_form-gui label,
.intro-page #_form-gui .required { opacity: 0.5; }
.intro-page #_form-gui textarea:disabled {
    background: #fff;
    border-color: #ddd;
}

#_form-gui input#documents,
#_form-gui p.info {
    font-size: 0.875rem;
    line-height: 1.25rem;
}
#_form-gui p.info { padding: 0 0 1.5rem; }
/* Hide the default file input */
input[type="file"] {
	display: none;
}

/* Style the custom file input container */
.custom-file-input {
	background-color: #f1f1f1;
	border: 1px solid #ccc;
	padding: 0 2px;
	border-radius: 5px;
	cursor: pointer;
	width: 85px;
	display: inline-block;
	margin-right: 5px;
}

/* Style the custom file input label */
#_form-gui #custom-file-label {
    margin: 0.25rem 0;
    text-align: center;
    cursor: pointer;
}


/*tooltip*/
.has-tooltip {
    position: relative;
    z-index: 8000;
}

span.question-mark {
    line-height: 1;
    display: inline-block;
    vertical-align: bottom;
}
span.question-mark svg {
    fill: #aaa;
    margin: 0 .3rem 0 0;
    width: 14px;
}
span.has-tooltip:hover svg { fill: #dd1100; }

.tooltip {
    background: #fff;
    border: 1px solid #d7d7d7;
    border-radius: 3px;
    box-shadow: 0 2px 5px #d7d7d7;
    color: #5d5c5c;
    font: 13px/19px Arial, Helvetica, sans-serif;
    padding: 15px;
    position: absolute;
    right: -155px;
    text-align: left;
    top: 28px;
    width: 300px;
    z-index: 9000;
}
.tooltip:before {
    border: 10px solid transparent;
    border-bottom-color: #d7d7d7;
    bottom: 100%;
    content: '';
    display: block;  
    height: 0;
    left: 122px;
    position: absolute;
    width: 0;
}
.tooltip:after {
    border: 9px solid transparent;
    border-bottom-color: white;
    bottom: 100%;
    content: '';
    display: block;  
    height: 0;
    left: 123px;
    position: absolute;
    width: 0;
}

.tooltip span { display: inline-block; }


/*validation*/
#_form-gui .required { padding-left: 2px; }
#_form-gui textarea.error-highlight, 
#_form-gui input.text.error-highlight, 
#_form-gui select.error-highlight {
    border: 1px solid #dd1100;
    color: #dc0000;
}


/*server error*/
.server-error ._main-grid {
    background: url(/images/freakedSpikey.png) no-repeat;
    margin-top: -20px;
    padding-left: 60px;
    padding-top: 20px;
}



/* ==========================================================================
   misc
   ========================================================================== */
#notice-content {
    background: #fffeec;
    border: 2px solid #FEF4BC;
    padding: 1rem 1rem 0 1.5rem;
}


/*resources*/
section.resources {
    padding-bottom: 0;
    padding-top: 1.875rem;
}
section.resources h2 {
    border-top: 1px solid #b3b3b3;
    padding-top: 2rem; 
}

.answers-grid {
    align-items: center;
    display: grid;
    grid-template-columns: 1fr 1fr 1fr;
    column-gap: 1rem;
}
.answers-grid > div > a {
    align-items: center;
    color: #535353;
    column-gap: 0.625rem;
    display: grid;
    font-size: 1.125rem;
    grid-template-columns: auto 1fr;
}
.answers-grid .img { font-size: 0; }

#contact-info .advanced { margin-top: 1.5rem; }
#contact-info h3 small { font-size: 0.8125rem; }
#contact-info-content p { margin: 0 0 0.125rem; }
#contact-info .grid div:nth-child(odd) > * { padding-right: 3rem; }
#contact-info strong { font-weight: 700; }

#contact-info ul > li {
    line-height: 1.5;
    margin-left: 0.75rem;
}
#contact-info ul > li:before {
    color: #dd1100;
    content: "■";
    display: inline-block;
    font-family: Arial;
    font-size: 0.6875rem;
    margin-left: -0.75rem;
    margin-right: 0;
    position: relative;
    top: -0.125rem;
    width: 0.75rem; 
}

#tech-services { 
    padding-bottom: 4rem;
    padding-top: 2.125rem; 
}



/* ==========================================================================
   responsive breakpoint styles
   ========================================================================== */

/* styles for large screens (1200px)
   ========================================================================== */
@media all and (max-width: 1200px) {}


/* styles for medium screens (900px)
   ========================================================================== */
@media all and (max-width: 900px) {
    section, 
    header#sub,
    div[id$="-content"] {
        padding-left: 0.53571428571rem; /*7.5px*/
        padding-right: 0.53571428571rem; /*7.5px*/
    }

    /*head*/
    header#sub { padding-bottom: 1rem; }

    /*FROM SUPPORT*/
    div[id$="-content"] p,
    div[id$="-content"] li,
    .cta-link {
        font-size: 1rem;
    }

    /*login/support overrides*/
    #login-wrapper { margin-right: 0.53571428571rem; /*7.5px*/ }
    #login-wrapper ul { top: 2.125rem; }

    /*misc > resources*/
    /*#ans-kb img { margin: 0 2px; }*/
    .answers-grid img { height: 2rem; width: auto; }
}


/* styles for small screens (600px)
   ========================================================================== */
@media all and (max-width: 600px) {
    section, 
    header#sub,
    div[id$="-content"] {
        padding-left: 0.57692307692rem; /*7.5px*/
        padding-right: 0.57692307692rem; /*7.5px*/
    }
    div[id$="-content"] p,
    div[id$="-content"] li {
        font-size: 1rem;
    }

    section#form { padding-top: 0.3rem; }


    /*FROM SUPPORT*/
    .category-search .search-icon img { max-width: none; }


    /*FROM SUPPORT > category search*/
    .category-search .search { 
        margin: 0.75rem 0 0.375rem; 
        line-height: 0; 
        /*new*/
        border-bottom: 1px solid #ddd;
        padding-bottom: 3px;
    }
    .category-search .search-icon { border: none; padding-left: 0; padding-top: 9px; }
    .category-search .search-input { display: table-cell; }
    .category-search input { 
        border-bottom: none; 
        font-size: 1rem !important; 
        padding: 4px 0; 
        /*new*/
        margin-top: 4px;
    }


    /*login/support overrides*/
    #login-wrapper { margin-right: 0.57692307692rem; /*7.5px*/ }
    #login-wrapper ul { top: 2.25rem; }


    /*other form stuff*/
    div[id$="-content"] p.topic-label { line-height: 1.17; }


    /*misc > resources*/
    .answers-grid { align-items: start; }
    .answers-grid > div > a {
        font-size: 13px;
        line-height: 15px;
        grid-template-columns: 1fr;
        justify-items: center;
    }
    .answers-grid .txt { text-align: center; }


    /*contact*/
    #contact-info .advanced + .advanced { margin-top: 0; }
}


/* styles for minimum supported screen width (320px)
   ========================================================================== */
@media all and (max-width: 320px) {
    div[id$="-content"] h1 { font-size: 2.5rem; }


    /*misc > resources*/
    #find-answers { padding-top: 2rem; }
}


/* printer styles
   ========================================================================== */
@media print {}