/*  JPM 25-03-2008 

    changed 09-06-2013 jpm
sources
http://www.fontsquirrel.com/fonts/list/recent
*/

/* roboto-mono-regular - latin_cyrillic */
@font-face {
    font-family: 'Roboto Mono';
    font-style: normal;
    font-weight: 400;
    src: local(''), url('fonts/roboto-mono-v12-latin_cyrillic-regular.woff2') format('woff2'), /* Chrome 26+, Opera 23+, Firefox 39+ */
    url('fonts/roboto-mono-v12-latin_cyrillic-regular.woff') format('woff'); /* Chrome 6+, Firefox 3.6+, IE 9+, Safari 5.1+ */
}

input::-webkit-outer-spin-button,
input::-webkit-inner-spin-button {
    /* display: none; <- Crashes Chrome on hover */
    -webkit-appearance: none;
    margin: 0; /* <-- Apparently some margin are still there even though it's hidden */
}

input[type=number] {
    -moz-appearance: textfield; /* Firefox */
}

body {
    font: 85%/1.2 Roboto Mono, Arial, Helvetica, sans-serif;
    color: #000000;
    background-color: White;
    padding: 0px;
    margin: 0px auto;
    margin-top: 5px;
    /*width: 720px;*/
    display: block;
}

h1, h2, h3, h4, h5 {
    color: #666666;
}

h1, .largerText, .h2 {
    font-size: 1.5em !important;
}

.small {
    font-size: 0.8em;
}

.bold {
    font-weight: bold;
}

p {
    text-indent: 2em;
    font-weight: normal;
    margin: 0.9em 0 0.9em 0;
    padding: 0;
    line-height: 1.2em;
    color: #666666;
}

p.header {
    font-weight: bold;
}
/* buitenste */
#container {
    width: 770px; /*position: absolute; left:20%;*/
    margin: 20px auto 0 auto;
    text-align: left;
}

/* binnen container */
#wrapper {
    width: 100%;
    min-height: 450px;
    margin: 0px;
    padding: 0px;
}

.wrapperInput table {
    width: 100%;
    margin: 0 auto;
    padding: 0px;
    margin-top: 15px;
    margin-bottom: 15px;
    border-spacing: 0;
}

.wrapperInput .tablehl {
    border: 1px #929292 solid;
    border-top-style: none;
    background-color: #EFEFEF;
}

#fullsrcnwrapper {
    margin-left: 20px;
    margin-right: 20px;
    border-left: thin;
    border-left-color: #0866A8;
}

.noborder {
    border-style: none;
}

.textbox {
    text-align: center;
    font-weight: bold;
}

.textbox-required {
    text-align: center;
    font-weight: bold;
}

.formField:not([disabled]) {
    border: 1px solid #666666;
    background-color: #ffffff;
    padding: 1px;
    padding-left: 2px;
    text-align: left;
    width: 100%;
    /*height: 20px;*/
}

.nr {
    width: 65px !important;
    text-align: center !important;
}

.errorText[style*="inline"], .myteleonError {
    font-size: 1.1em;
    color: #B30054;
    font-weight: bold;
    display: block !important;
}


/* BUTTON DEFINITION 
   ================= */

.nbutton {
    /* Top left corner, top edge */
    padding: 1px;
    float: left;
    color: #000;
    font-size: 0.8em;
    text-decoration: none;
    background-color: #BABBCC;
    /*border: thin;*/
    border: 1px;
    border-style: solid;
}

.nbutton:hover { /* Help keyboard users */
    background-color: #476583;
    border: solid 1px #476583;
    color: #fff;
}

/*---------- bubble tooltip -----------  #fff111 */
a:hover {
    background: silver;
    text-decoration: none;
}

a.tooltip {
    color: #666;
    font-weight: normal;
}

a.tooltip span {
    display: none;
    padding: 2px 3px;
    margin-left: -250px;
    margin-top: 0px;
    width: 300px;
}

a.tooltip:hover span {
    display: inline;
    position: absolute;
    background: #D0ECED;
    border: 1px solid #666666;
    color: #000000;
}

.easyResultsLeft {
    text-align: left;
    width: 45%;
}

.easyResultsRight {
    text-align: left;
    width: 55%;
}

.dropDownBoxLanguageCountry {
    width: 200px;
    height: 20px;
}

.dropDownBoxSEQ, .loginField, .dropDownBox {
    width: 150px;
    height: 24px;
}

.dropDownBoxLanguageCountry select, .dropDownBox select {
    background-color: #7FCDCE;
    font-size: larger;
}

.dropDownBoxLanguageCountry option, .dropDownBox option {
    background-color: #D0ECED;
    display: block;
    font-size: larger;
    color: #000;
}

.dropDownBoxLanguageCountry option:hover, .dropDownBox option:hover {
    background-color: #7FCDCE;
    display: block;
}

.pnlIntroPanel {
    width: 98%;
    padding: 15px 25px 0px 25px;
    margin: 0 auto;
    text-align: center;
    box-sizing: border-box;
}

.pnlIntroPanel label {
    display: inline-block;
    width: 140px;
    text-align: right;
}

.homebutton {
    float: left;
    background-color: #9FD99A;
    border: 1px solid #666666;
    color: #000;
    padding: 5px;
    min-width: 100px;
}

.homebutton:hover {
    background-color: #46a63e;
    border: 1px solid #666666;
    color: #fff;
}

.pnlIntroPanel input[type=submit] {
    font-family: 'Roboto Mono';
    display: inline-block;
    min-width: 100px;
    float: right;
    background-color: #46a63e;
    color: #fff;
    border: 1px solid #666666;
}

.pnlIntroPanel input[type=submit]:hover {
    background-color: #8EC889;
    color: #000;
}

.lensFamilyButton {
    margin-right: 10px;
    margin-left: 10px;
    display: inline-block;
}

.lensFamilyButton:hover {
    background: none !important;
}

.lensFamilyButton img {
    width: 200px;
}

.lensFamilyButton img:hover {
    opacity: 0.75;
}

.footer {
    font-family: Roboto Mono, Arial, Helvetica, sans-serif;
    font-size: 0.75em;
    text-decoration: none;
    text-align: left;
    text-transform: uppercase;
    color: #666666;
    clear: both;
}

.footer table {
    width: 100%
}

/*Credits: Dynamic Drive CSS Library */
/*URL: http://www.dynamicdrive.com/style/ */

.buttonwrapper a {
    text-decoration: none;
}

input.submitbutton {
    font-family: 'Roboto Mono';
    border: 0px;
    background-color: #6B6EA1;
    font: bold 14px Roboto Mono, Helvetica, sans-serif;
    color: white;
    padding: 7px;
    margin: 2px;
}

input.submitbutton2 {
    font-family: 'Roboto Mono';
    border: 0px;
    background-color: #476583;
    font: bold 14px Roboto Mono, Helvetica, sans-serif;
    color: white;
    padding: 7px;
    margin: 2px;
}

input.submitbutton3 {
    font-family: 'Roboto Mono';
    border: 0px;
    background-color: #BABBCC;
    font: 14px Roboto Mono, Helvetica, sans-serif;
    color: #000;
    padding: 5px;
    margin: 2px;
    min-width: 50px;
}

input[type='radio'] + label {
    margin-right: 10px;
}

.wrapperInput[type='radio'], select {
    padding: 1px;
    padding-left: 2px;
    /*    margin-top: 2px; 
    margin-bottom: 2px;
    */
}

input.submitbutton2:disabled {
    cursor: default;
    background-color: #BABBCC;
    color: #777;
}

input.submitbutton:disabled {
    cursor: default;
    background-color: #BABBCC;
    color: #777;
}

input.introSubmit {
    font-family: 'Roboto Mono';
    margin-top: 20px;
    padding: 5px;
}

table.resultTable {
    margin: 0 auto;
}

table.tableresults, table.resultTable, div.resultTable div {
    border-width: 1px;
    padding: 0px;
    border-style: solid;
    border-color: #929292;
    border-collapse: separate;
    /*background-color: white;*/
    border-collapse: collapse;
    width: 580px;
    margin: 0 auto;
}

.reqcont {
    white-space: nowrap;
}

.reqcont:before {
    color: #f00;
    content: " * ";
}

.reqcont input, .reqcont select {
    margin-left: 3px;
}

input.checkValidity:required:invalid, input.checkValidity:required:invalid + label, .invalidBorder, select[value=''] {
    background-color: #FFE1E1;
}

table.tableresults td, table.resultTable td {
    border: none;
    border-width: 1px;
    padding: 1px;
    padding-left: 4px;
    padding-right: 10px;
    border-style: solid;
    border-color: silver;
    border-collapse: collapse;
    text-align: left;
}

table.resultTable th {
    font-weight: bold;
    font-size: 1em !important;
    color: #fff;
    border: none;
    border-width: 1px;
    padding: 2px;
    padding-left: 4px;
    padding-right: 15px;
    border-style: solid;
    border-color: silver;
    background-color: #000;
    border-collapse: collapse;
    width: auto;
}

table.resultTable td img {
    margin-left: 15px;
    margin-right: 5px;
}

th {
    font-weight: bold;
    font-size: 1.1em;
    background-color: #666666;
    color: #ffffff;
    padding: 5px;
    margin-bottom: 5px;
    width: 100%;
}

.table_h3 {
    background-color: #666666;
}

.mylentis > div {
    background-color: #EEE;
}

/*
http://www.thewebsqueeze.com/web-design-articles/unique-css-borders-boring-borders-step-aside.html
*/
.headerImage {
    background-image: url('../Images/Teleon_Header.png');
    background-repeat: no-repeat;
    width: 770px;
}

.roundbottom {
    width: 100%;
    height: 20px;
}

.round-distri-section {
    background-position: 10px 10px;
    background-image: url('../Images/Teleon_white3.png');
    background-size: 140px;
    background-repeat: no-repeat;
    background-color: #666666;
    padding-top: 50px;
    padding-left: 10px;
    padding-right: 10px;
    width: 100%;
    margin-top: 20px;
    color: #FFFFFF;
    box-sizing: border-box;
}

.round-distri-section hr {
    color: #fff;
}

.round-distri-section table {
    width: 100%;
    border: 0px #929292 solid;
}

.btnMF15T {
    width: 124px;
    height: 95px; /* 198 */
    display: block;
    text-decoration: none;
    background: transparent url('../Images/LU313MF15T-calcbutton.png') no-repeat left top;
}

a.btnMF15T:hover {
    background: transparent url('../Images/LU313MF15T-calcbutton.png') no-repeat right top;
}

.btnMF15Tsel {
    width: 124px;
    height: 95px; /* 198 */
    display: block;
    text-decoration: none;
    background: transparent url('../Images/LU313MF15T-calcbutton.png') no-repeat left bottom;
}

a.btnMF15Tsel:hover {
    background: transparent url('../Images/LU313MF15T-calcbutton.png') no-repeat right bottom;
}

.btnMF20T {
    width: 124px;
    height: 95px;
    display: block;
    text-decoration: none;
    background: transparent url('../Images/LU313MF20T-calcbutton.png') no-repeat left top;
}

a.btnMF20T:hover {
    background: transparent url('../Images/LU313MF20T-calcbutton.png') no-repeat right top;
}

a.btnMF20Tsel {
    width: 124px;
    height: 95px; /* 198 */
    display: block;
    text-decoration: none;
    background: transparent url('../Images/LU313MF20T-calcbutton.png') no-repeat left bottom;
}

a.btnMF20Tsel:hover {
    background: transparent url('../Images/LU313MF20T-calcbutton.png') no-repeat right bottom;
}

.btnMF30T {
    width: 124px;
    height: 95px;
    display: block;
    text-decoration: none;
    background: transparent url('../Images/LU313MF30T-calcbutton.png') no-repeat left top;
}

a.btnMF30T:hover {
    background: transparent url('../Images/LU313MF30T-calcbutton.png') no-repeat right top;
}

a.btnMF30Tsel {
    width: 124px;
    height: 95px; /* 198 */
    display: block;
    text-decoration: none;
    background: transparent url('../Images/LU313MF30T-calcbutton.png') no-repeat left bottom;
}

a.btnMF30Tsel:hover {
    background: transparent url('../Images/LU313MF30T-calcbutton.png') no-repeat right bottom;
}

.divLensButton {
    width: 124px;
}

.btnMFX30T {
    width: 124px;
    height: 95px;
    display: block;
    text-decoration: none;
    background: transparent url('../Images/LU313MFX30T-calcbutton.png') no-repeat left top;
}

a.btnMFX30T:hover {
    background: transparent url('../Images/LU313MFX30T-calcbutton.png') no-repeat right top;
}

a.btnMFX30Tsel {
    width: 124px;
    height: 95px; /* 198 */
    display: block;
    text-decoration: none;
    background: transparent url('../Images/LU313MFX30T-calcbutton.png') no-repeat left bottom;
}

a.btnMFX30Tsel:hover {
    background: transparent url('../Images/LU313MFX30T-calcbutton.png') no-repeat right bottom;
}
a.btnTPlusStandard:hover {
    background: transparent url('../Images/LS313Tx-Button.png') no-repeat right;
}

.btnTPlusCustomised {
    width: 150px;
    height: 220px;
    display: block;
    text-decoration: none;
    background: transparent url('../Images/LU313T-Button.png') no-repeat left;
}

a.btnTPlusCustomised:hover {
    background: transparent url('../Images/LU313T-Button.png') no-repeat right;
}

.btnMPlusTCustomised {
    width: 150px;
    height: 220px;
    display: block;
    text-decoration: none;
    background: transparent url('../Images/LU313MF30T-Button.png') no-repeat left;
}

a.btnMPlusTCustomised:hover {
    background: transparent url('../Images/LU313MF30T-Button.png') no-repeat right;
}

.btnComfortToricCN {
    width: 200px;
    height: 220px;
    display: inline-block;
    text-decoration: none;
    background: transparent url('../Images/BTN-CN-LS313MF15T.png') no-repeat left;
}

a.btnComfortToricCN:hover {
    background: transparent url('../Images/BTN-CN-LS313MF15T.png') no-repeat right;
}

.btnMPlusTStandardCN {
    width: 200px;
    height: 220px;
    display: inline-block;
    text-decoration: none;
    background: transparent url('../Images/BTN-CN-LS313MF30T.png') no-repeat left;
}

a.btnMPlusTStandardCN:hover {
    background: transparent url('../Images/BTN-CN-LS313MF30T.png') no-repeat right;
}

.divider {
    width: 5px;
    height: auto;
    display: inline-block;
}

.imglensType {
    width: 220px;
    margin-top: 5px;
    margin-bottom: 5px;
}

.ml {
    margin-left: 3px;
}

.ib {
    display: inline-block;
}

.pad {
    padding: 2px;
}
/* Uit easycalculator */
.wrapperInput2 {
    width: 100%;
    min-height: 200px;
}

.wrapperItem {
    flex: 1;
    display: flex;
    flex-direction: row;
    width: 100%;
    flex-shrink: 0;
    align-content: flex-start;
    margin-top: 3px;
    margin-bottom: 3px;
    box-sizing: border-box;
}

.wrapperItem > div {
}

.flex {
    /*display: flex;*/
    align-content: center;
    align-items: center;
}

.flex0 {
    /*flex: 0.2;*/
}

input {
}

.ib {
    display: inline-block;
}

.flexl {
}

.flex15 {
    width: 15%;
    align-content: center;
    align-items: center;
}

.flex20 {
    width: 20%;
    align-content: center;
    align-items: center;
}

.flex25 {
    width: 25%;
    align-content: center;
    align-items: center;
}

.flex30 {
    width: 30%;
    align-content: center;
    align-items: center;
}

.flex33 {
    width: 33%;
    align-content: center;
    align-items: center;
}

.flex40 {
    width: 40%;
    align-content: center;
    align-items: center;
}

.flex50 {
    width: 50%;
    align-content: center;
    align-items: center;
}

.flex60 {
    width: 60%;
    align-content: center;
    align-items: center;
}

.flex66 {
    width: 66%;
    align-content: center;
    align-items: center;
}

.flex100 {
    width: 100%;
    flex-shrink: 0
}

.cent {
    text-align: center;
}

.cent:first-child {
    margin: 0 auto;
}

.ivspace {
    margin-top: 5px !important;
}

.ivspace2 {
    margin-top: 10px !important;
}

.vspace {
    margin-bottom: 5px !important;
}

.vspace2 {
    margin-bottom: 10px !important;
}

.col2 {
    margin-left: 30px;
}

.title {
    background-color: #666666;
    color: #fff;
    font-size: larger;
    font-weight: bold;
    margin: 10px 0px 10px 0px;
    padding: 5px;
}

.title2 {
    background-color: #476583;
    color: #fff;
    font-size: larger;
    font-weight: bold;
    margin: 10px 0px 10px 0px;
    padding: 5px;
}

.title3 {
    background-color: #AA6666;
    color: #fff;
    font-size: larger;
    font-weight: bold;
    padding: 5px;
}

.titleSpace {
    margin-top: 10px;
}

table.fullwidth {
    width: 100% !important;
}

/* INTRO Image Buttons */
.buttonContainer {
    width: 645px; 
    margin: 0 auto;
    padding: 0px;
}

.buttonRow {
    width: 100%;
    justify-content: left;
    text-align: left;
}

.lensButton {
}

.family {
    display: flex;
    align-items: center;
}

.buttonRow a:hover {
    background-position-x: right;
}

.buttonRow > a {
    width: 200px;
    height: 134px;
    background-position-x: left;
    margin: 5px;
    display: inline-block;
}

.buttonRow > span {
    width: 200px;
    text-align: center;
    display: inline-block;
    margin: 5px 5px 0px 5px;
    display: inline-block;
}
.buttonRow .femtis {
    background-image: url('../images/ICON-FEMTIS-ComfortToric-200x134-112020.png');
}

.buttonRow .femtismplustoric {
    background-image: url('../images/ICON-FEMTIS-mplusToric-200x134-112020.png');
}

.buttonRow .comftoric {
    background-image: url('../images/ICON-LENTIS-ComfortToric-200x134-112020.png');
}

.buttonRow .mplustoric {
    background-image: url('../images/ICON-LENTIS-MplusToricFamily-200x134-112020.png');
}

.buttonRow .tplus {
    background-image: url('../images/ICON-LENTIS-Tplus-200x134.png');
}

.buttonRow .tplusx {
    background-image: url('../images/ICON-LENTIS-TplusX-200x134-112020-grey.png');
}

.buttonRow .acunexVT {
    background-image: url('../images/ICON-ACUNEX-VarioToric.png');
}
.buttonRow .acunexVMT {
    background-image: url('../images/ICON-ACUNEX-VarioMaxToric.png');
}

.wimark1, .wimark2 {
}

.ui-widget-overlay {
    opacity: 0.90 !important;
}