@import "partials/fonts.css";

body {
    font: 62.5%/1.4em Arial, Helvetica, Verdana, sans-serif;
}


/* ---------- From LIFERAY ---------- */

/* ---------- Browser normalization ---------- */

article, aside, canvas, details, figcaption, figure, footer, header, hgroup, menu, nav, section, summary {
    display: block;
}

body, div, dl, dt, dd, ul, ol, li, h1, h2, h3, h4, h5, h6, pre, form, fieldset, input, textarea, p, blockquote, th, td {
    margin: 0;
}

table {
    border-collapse: collapse;
    border-spacing: 0;
    clear: both;
}

fieldset, img {
    border: 0;
}

address, caption, cite, code, dfn, th, var {
    font-style: normal;
    font-weight: normal;
}

caption, th {
    text-align: left;
}

q:before, q:after {
    content: '';
}

abbr, acronym {
    border: 0;
    border-bottom: 1px dotted #000;
    cursor: help;
}

html {
    overflow-y: scroll;
}

body {
    font-family: "Source Sans Pro";
    font-size: 18px;
    color: #283044;
    background: #f9f9f9;
}

blockquote, ul, ol, dl {
    margin: 1em;
}

ol, ul, dl {
    margin-left: 2em;
}

ol {
    list-style: decimal outside;
}

ul {
    list-style: disc outside;
}

ul ul {
    list-style-type: circle;
}

ol ol {
    list-style-type: upper-roman;
}

dl dd {
    margin-left: 1em;
}

th {
    font-weight: bold;
}

caption {
    margin-bottom: 0.5em;
    text-align: center;
}

p {
    margin-bottom: 1em;
}

h1 {
    font-size: 1.8em;
}

h2 {
    font-size: 1.6em;
}

h3 {
    font-size: 1.4em;
}

h1, h2, h3 {
    margin: 1em 0;
}

h4, h5, h6 {
    font-size: 1.1em;
}

h1, h2, h3, h4, h5, h6, strong {
    font-weight: bold;
}

/* ---------- Text formatting ---------- */

b, strong {
    font-weight: bold;
}

/* ---------- From LIFERAY ---------- */

/* ----------- Header --------------- */

#header {
    width: 100%;
    background: transparent;
}

.header-header {
    width: 100%;
    height: 100px;
    background-color: #EEEEEE;
    box-shadow: 0 0 7px #aaa;
    -moz-box-shadow: 0 0 7px #aaa;
    -webkit-box-shadow: 0 0 7px #aaa;
}

#header-header-body {
    background: none;
    margin: 0 auto 0;
    width: 940px;
    height: 100px;
}

.company-title {
    position: relative;
    top: 15px;
    float: left;
}

.newlogo {
    background: transparent url("images/vmi-logo.svg") no-repeat;
    width: 181px;
    height: 100px;
    display: inline-block;
    line-height: 1;
    vertical-align: middle;
}

/*--------------------------------------*/
#main_header {
    width: inherit;
    height: 157px;
    display: flex;
}

#logo_cont {
    width: 39.8%;
    background: #007D40;
    display: flex;
    flex-direction: row;
    justify-content: flex-end;
}

#header_cont {
    width: 60.2%;
    background: #283044;
}

#header-left {
    margin-top: 25px;
    margin-right: 24%;
}

#language-bar {
    display: flex;
    justify-content: flex-end;
    z-index: 1000;
    margin: 0 auto;
    max-width: 940px;
    background-color: #FFF;
}

#header-v {
    position: absolute;
    display: flex;
    flex-direction: row;
    justify-content: center;
    margin-top: 24px;
    margin-right: 60px;
    color: #fff;
}

#header-c{
    display: flex;
    flex-direction: column;
}

#header-c{
    display: flex;
    flex-direction: column;
}

#header-c > a, a:hover, a:focus, a:active, a:visited, a:link {
    color: #fff;
    font-size: 18px;
    font-family: "Source Sans Pro";
    text-decoration: none;
}

@media only screen and (max-width: 1199px) {
    #logo_cont {
        justify-content: flex-start;
        margin-right: 0;
    }

    #main_header {
        height: 157px;
    }

    #header-left {
        margin-left: 30px;
    }
}

@media only screen and (max-width: 767px) {
    #logo_cont {
        width: 100%;
    }

    #header_cont {
        display: none;
    }

    #logo_cont {
        justify-content: flex-start;
        margin-right: 0;
    }

    #main_header {
        height: 157px;
    }

    #header-left {
        margin-left: 25px;
    }
}


/*footer*/

#footer-cont{
    display: flex;
    flex-direction: row;
    height: 272px;
    width: inherit;
}

#footer-left{
    width: 27.1%;
    background: #283044;
    padding: 36px 36px 36px 36px;
    color: #fff;
}

#footer-center{
     width: 27.1%;
     background: #007D40;
     padding: 36px 36px 36px 36px;
     color: #fff;
}

#footer-right{
    width: 33.5%;
    background: #007D40;
}

#footer-left a, ul, li, a:link {
    color: #fff;
}

#footer-center a, ul, li, a:link {
    color: #fff;
}

@media only screen and (max-width: 991px) {
    #footer-cont{
        flex-direction: column;
    }
    #footer-left {
        width: inherit;
    }

    #footer-center{
        width: inherit;
    }
    #footer-right{
        display: none;
    }
}

.logo {
    background: transparent url("images/vmi-logo.png") no-repeat;
    width: 132px;
    height: 66px;
    display: block;
}

.logo-en {
    background: transparent url("images/vmi-logo-en.png") no-repeat;
    width: 132px;
    height: 66px;
    display: block;
}

@media screen and (-webkit-min-device-pixel-ratio: 2), screen and (min--moz-device-pixel-ratio: 2), screen and (min-resolution: 2dppx) {
    .logo {
        background: transparent url("images/vmi-logo-hd.png") no-repeat;
        background-size: 132px 66px;
    }

    .logo-en {
        background: transparent url("images/vmi-logo-hd-en.png") no-repeat;
        background-size: 132px 66px;
    }
}

.help-url {
    background: url("images/help-sign.gif") no-repeat scroll 0 -4px transparent;
    padding-left: 20px;
    position: relative;
    left: 600px;
    text-decoration: none;
}

.header-menu {
    float: right;
    clear: right;
    height: 30px;
    line-height: 20px;
    text-align: right;
}


.header-menu ul li a:link, .header-menu ul li a:visited, .header-menu ul li a:hover, .header-menu ul li a:active {
    color: #5a5b5c;
}

.header-menu ul li .represents, .header-menu ul li .represents-name-surename {
    color: #5a5b5c;
    margin-right: 5px;
}

.header-menu .represents-name-surename {
    font-weight: bold;
}

.header-menu ul li .name-surename {
    font-size: 20px;
    color: #5a5b5c;
    font-weight: bold;
    margin-right: 5px;
}

.header-menu ul li {
    float: left;
    list-style-type: none;
    padding-left: 15px;
    padding-right: 15px;
    background-image: url("images/separator.png");
    background-position: left;
    background-repeat: no-repeat;
}

.header-menu li:first-child {
    background: none;
}

.header-menu li:last-child {
    padding-right: 0;
}

.header-menu a:hover {
    text-decoration: underline;
}

.clear-float {
    clear: both;
}

#header-footer {
    margin: 0 auto;
    background-color: #007d40;
    width: 940px;
    height: 71px;
}

a.page-wrap-header-my-vmi:link, a.page-wrap-header-my-vmi:visited, a.page-wrap-header-my-vmi:hover, a.page-wrap-header-my-vmi:active {
    color: #FFF;
    font-size: 20px;
    position: relative;
    top: 10px;
    left: 30px;
    text-decoration: none;
}

.page-wrap-header-my-vmi-vertical-line {
    position: relative;
    top: 15px;
    left: 45px;
}

/* ----------- Header --------------- */

/* ----------- Body --------------- */

#page-wrap {
    margin: 0 auto;
    max-width: 1170px;
    background-color: #FFF;
}

#content {
    padding-left: 35px;
    padding-right: 35px;
    padding-top: 45px;
    padding-bottom: 50px;
    background-color: #FFF;
}

#main-content {
    min-height: 600px;
}

#sidebar {
    float: left;
    width: 220px;
    padding-right: 20px;
}

#info {
    border: 1px solid black;
    padding: 10px;
}

th, tr {
    height: 30px;
}

th {
    border: none;
    padding: 2px 25px;
}

.selectManyPicklist {
    width: 200px;
    margin-left: -1px;
}

input[type=checkbox] {
    margin-left: 5px;
    margin-right: 5px;
}

input, textarea {
    border: 1px solid #D4D4D4;
}

/* Padaryta d�l to, kad ant IE text ir password lauk� dyd�iai skiriasi - text laukas gaudavosi ilgesnis */
input[type=text], input[type=password] {
    width: 170px;
}

input[type=text], input[type=password] {
    font-family: Arial;
    font-size: 12px;
    color: #4d4d4d;
}

/* ----------- Body --------------- */

/* ----------- Footer --------------- */

#footer {
    height: 139px;
    margin-bottom: 1px;
}

#footerZone {
    height: 140px;
    background-color: #ffffff;
}


.footer-middle {
    width: 187px;
    height: 139px;
    float: left;
    background-color: #f1f1f1;
    margin-left: 1px;
}

.footer-middle-image {
    background-image: url("images/kuriame-lietuvos-ateiti.png");
    display: inline-block;
    width: 116px;
    height: 47px;
    margin: 45px 0 0 35px;
}

.footer-right-image {
    background: transparent url("images/mic1882.png") no-repeat scroll 45px 60px;
    display: block;
    height: 140px;
    width: 186px;
}

#footer-div-shadow {
    width: 100%;
    height: 5px;
    background-image: url("images/shadow.png");
    background-position: center -7px;
}

#footer a {
    color: #4d4d4d;
    text-decoration: underline;
}

#footer ul {
    padding-left: 10px;
    margin-top: 5px;
    margin-bottom: 5px;
}

/* ----------- Footer --------------- */

/* ----------- Common ---------------*/

.page-caption {
    font-size: 27px;
    color: #5a5b5c;
    margin-top: 10px;
    margin-bottom: 10px;
}

.section-caption {
    color: #5a5b5c;
    margin-top: 30px;
    margin-bottom: 5px;
}

label {
    color: #5a5b5c;
}

.main-action-button {
    background-color: #00733b;
    color: #FFF;
    border-style: none;
    width: 250px;
    height: 45px;
    margin: auto;

    padding-left: 20px;
    padding-right: 20px;
    padding-top: 6px;
    padding-bottom: 6px;
    font-family: "Source Sans Pro";
    font-size: 18px;
    margin-top: 6px;
    margin-bottom: 5px;
}

.main-action-button:hover {
    cursor: pointer;
}

.disabled {
    background-color: #d3d3d3;
    color: #6f6f6f;
}

.secondary-action-button {
    background-color: #dcdcdc;
    font-size: 12px;
    color: #4d4d4d;
    border-style: none;
    height: 25px;
}

.secondary-action-button:hover {
    cursor: pointer;
}

/* ---------- Links ---------- */

a {
    color: #007d40;
}

a:link {
    color: #007d40;
}

a:visited {
    color: #007d40;
}

a:hover {
    color: #007d40;
}

a:active {
    color: #007d40;
}

/* ---------- Headers ---------- */

/* ----------- Common ---------------*/

/* ----------- Custom ---------------*/

fieldset {
    border: 1px solid #d4d4d4;
    margin: 3px 0 20px 0;
    text-align: center;
    padding-top: 15px;
    padding-bottom: 7px;
}

.fieldsContainer {
    flex-direction: column;
    display: flex;
    text-align: left;
    justify-content: center;
    max-width: 300px;
    margin: auto;

}

.fieldsSplitter {
    height: 15px;
    margin: 0;
    padding: 0;
}

.fieldsContainer a:hover {
    text-decoration: underline;
}

#footer-left-span a{
    text-decoration: underline;
}

.section-caption a:hover {
    text-decoration: underline;
}

.errors {
    margin: 3px 0 8px;
    color: #d20000;
    background-color: rgb(255, 238, 221);
    display: block;
    border: 1px solid #d20000;
}

#codeFieldsContainer {
    width: 330px;
}

#stationaryAuthenticationFieldsContainer {
    text-align: center;
}

/* ----------- Custom ---------------*/

/* ----------- Tabs ---------------*/
/* begin css tabs */

#tabnav {
    display: flex;
    flex-wrap: wrap;
}

ul#tabnav { /* general settings */
text-align: left; /* set to left, right or center */
margin: 1em 0 1em 0; /* set margins as desired */
border-bottom: 1px solid #d4d4d4; /* set border COLOR as desired */
list-style-type: none;
padding: 0 5px 0 5px; /* THIRD number must change with respect to padding-top (X) below */
}

ul#tabnav li { /* do not change */
    display: inline;
    margin-left: 5px;
    margin-top: 5px;
    margin-bottom: 5px;
}

div#tab1 li.tab1, div#tab2 li.tab2, div#tab3 li.tab3, div#tab4 li.tab4 { /* settings for selected tab */
    border-bottom: 1px solid #fff; /* set border color to page background color */
    background-color: #fff; /* set background color to match above border color */
}


div#tab1 li.tab1 a, div#tab2 li.tab2 a, div#tab3 li.tab3 a, div#tab4 li.tab4 a { /* settings for selected tab link */
    background-color: #fff; /* set selected tab background color as desired */
    color: #000; /* set selected tab link color as desired */
    position: relative;
    top: 1px;
    padding-top: 4px; /* must change with respect to padding (X) above and below */
    font-weight: bolder;
}

ul#tabnav li a { /* settings for all tab links */
    padding: 3px 10px; /* set padding (tab size) as desired; FIRST number must change with respect to padding-top (X) above */
    border: 1px solid #d4d4d4; /* set border COLOR as desired; usually matches border color specified in #tabnav */
    background-color: #d4d4d4; /* set unselected tab background color as desired */
    color: #666; /* set unselected tab link color as desired */
    margin-right: 0; /* set additional spacing between tabs as desired */
    text-decoration: none;
    border-bottom: none;
}

ul#tabnav a:hover { /* settings for hover effect */
    background: #fff; /* set desired hover color */
}

/* end css tabs */
/* ----------- Tabs ---------------*/

input#username, input#password, input#phoneNumber, input#personCode  {
    font-family: "Source Sans Pro";
    font-size: 18px;
    width: 279px;
    height: 25px;
    padding: 8px 8px 8px 8px;
    border-width: 2px;
}

#infrastructureTr{
    display: flex;
    flex-direction: row;
}

#infrastructureTr  input[type="radio"] {
    margin-right:5px;
    margin-top: 5px;
}

#infrastructureTr label {
    margin-right: 10px;
}

.fieldsContainer #infrastructureTr {
    padding-top:10px;
}

#operatorCont {
    display: flex;
    margin: auto;
}

#operatorCont input[type="radio"] {
    margin-right:5px;
    margin-top: 5px;
}

#operatorCont  label {
    margin-right: 10px;
}


/*mobile only*/
@media only screen and (max-width:500px) {
    #tabnav {
        flex-direction: column;
        display:block
    }
    ul#tabnav li {
        margin:auto;
        margin-top:10px;
        margin-bottom:10px
    }
    ul#tabnav a {
        display:block
    }
    ul#tabnav li a {
        margin-top:5px
    }
}

.passwordContainer {
    display: flex;
    align-items: center;
    position: relative;
}

img#togglePasswordVisibility {
    position: absolute;
    right: 10px;
    opacity: 70%;
    cursor: pointer;
}