/*todo implement dark mode support */
@media (prefers-color-scheme: dark) {
    body {
            background: lightgrey;        
        }
    div.inicio {
        background: rgba(55, 63, 83, 0.85);
        padding: 40px;
    
        box-shadow: 0px 4px 10px rgba(0, 0, 0, 0.2);
        width: 100%;
        max-width: 400px;
        text-align: center;
    }
    .icon-color{color: white !important;}
}
@media (prefers-color-scheme: light) {
    body {
        background: white;
    }
    div.inicio {
        background: rgba(255, 255, 255, 0.90);
        padding: 40px;
        border-radius: 5px;
    
        box-shadow: 0px 4px 10px rgba(0, 0, 0, 0.2);
        width: 100%;
        max-width: 400px;
        text-align: center;
    }
    .icon-color{color: black !important;}
}
.cssHiddenImportant {
    display: none !important;
}
@font-face {
    font-family: 'CalibriWFront';
    font-display: fallback;
    src: url('/res/CalibriFront.woff2') format('woff2');
}
html, body {
    height: 100%;
    width: 100%;
    margin: 0 auto;  
    -webkit-user-select: none;
    -moz-user-select: none;
    -ms-user-select: none;
    user-select: none;
    -webkit-touch-callout: none;
    -khtml-user-select: none;
    cursor: default;
    /* overflow: auto; */
    -webkit-overflow-scrolling: touch;
    font-size: calc(13px + 0.35vw);
    font-family: Calibri, 'CalibriW', 'CalibriWFront', monospace;
}
body, html, #map_canvas {
    height: 100%;
    margin: 0;
    width: 100%;
    /*max-width:600px;*/
    /*overflow: auto;*/
}

/* body, html { */
    /*font-size: calc(11px + 0.25vw);*/
    /*font-size: calc(10px + 0.45vw);*/
    /* font-size: calc(13px + 0.35vw); */
    /* margin: 0 auto; */
    /*font-family: 'CalibriW', Calibri, monospace;*/
    /*-webkit-font-smoothing: subpixel-antialiased;*/
/* } */
/*@media screen and (min-resolution: 300dpi) {*/
/*    body {*/
/*        font-size: 1px !important;*/
/*    }*/
/*}*/

.padding.all-10{
    padding:10px
}
.padding.all-5{padding:5px}
table.paddingTable.allTD-5 thead tr th,table.paddingTable.allTD-5 tbody tr td{padding:5px}tr{padding:5px}
table.paddingTable.allTD-10 thead tr th,table.paddingTable.allTD-10 tbody tr td{padding:10px}tr{padding:10px}


.imagen-background {

    /* background-image: url('fondo_inicio.jpg'); */
    background-image: url('/page/fondo_inicio.jpg');
    background-repeat: no-repeat;
    background-attachment: fixed;  
    background-size: cover;
  
}
.transition-color{
    /* background-color: #373F53; */
    background-image: linear-gradient(to right, #373F53 ,rgba(55, 66,83, 0.73));
}
.transition-color-login{
    /* background-color: #373F53; */
    background-image: linear-gradient(180deg, #373F53 ,rgba(255, 102,55, 0.79));
}
  /* label color */
  /* .input-field label {
    color: #999999;
  } */
  /* label focus color */
  /* .input-field input[type=email]:focus + label {
    color: white;
    
  } */
  /* label underline focus color */
  .input-field input[type=email]:focus.login,input[type=password]:focus {
    border-bottom: 1px solid white !important;
    box-shadow: 0 1px 0 0 white !important;
  }
/* body {
    display: flex;
    flex-direction: column;
} */
.cssBodyContent {
    flex: 1 0 auto;
}
.cssFooter {
    flex-shrink: 0;
}
.cssFooterItem {
    /*margin-left: 12px; cursor: pointer; */
    margin-left: calc(12rem / 20); cursor: pointer;
    font-size: 1rem;
}

/* default web font size for responsive designs */
.cssSizeFontSlogan {
    font-size: 2rem; /*font-size: calc(6px + 1.5vw);*/
    font-weight: bold;
}
.cssSizeFontDescriptions {
    font-size: 0.83rem;
}
.cssSizeFontSmaller {
    font-size: 0.8rem;
}
.cssColorHyperlink {
    color: cornflowerblue;
}
.cssColorHyperlinkBlack {
    color: #222222 !important;;
}
.cssColorHyperlinkBlack a:visited {
    color: #222222 !important;;
}
.cssSizeFontTooltip { font-size: 0.65rem; }
.cssSizeSuperSmall { font-size: 0.56rem; }
.cssSizeFontSubSlogan { font-size: calc(1.1vw); }
.cssSizeFontTitle {
    /*font-size: calc(20px + 0.5vw);*/
    font-size: 1.5rem;
}
.cssCoto {
    border-radius: 0.6rem;
    border-color: transparent;
    background-color: rgb(81, 146, 210);
    color: rgb(255, 255, 255);
    opacity: .77;
    text-align: center;
    margin: 0.75rem auto auto;
}
.cssPageButton {
    display: inline-block;
    background: rgb(0, 0, 0);
    color: rgb(255, 255, 255);
    min-width: 2rem;
    margin: 0.3rem;
    border-radius: 0.4rem;
}
.cssbutton {
    border-radius: 0.5rem;
    border-color: transparent;
    background-color: rgb(81, 146, 210);
    color: rgb(255, 255, 255);
    text-align: center;
    font-size: 16px;
    /* width: calc(120rem / 20); */
    padding: 0.3rem 0.5rem 0.3rem 0.5rem;

}

.cssbuttonHover:hover {
    background-color: brown !important;
}
/* For buttons */
.cssColorYellow { border: 1px solid rgb(177, 153, 34);color: rgb(177, 146, 34);background-color: rgb(253, 249, 236); }
.cssColorGreen { border: 1px solid rgb(34, 177, 76);color: rgb(34, 177, 76);background-color: rgb(249, 253, 236); }
.cssColorRed { border: 1px solid rgb(177, 34, 76); color: rgb(177, 34, 76); /*background-color: rgb(253, 249, 236);*/ background-color: rgb(253, 243, 236);}
.cssBlueButton {
    background-color: cornflowerblue; color: white;
    font-family: Calibri, monospace;
    margin-left: calc(20rem / 20);
    padding: calc(10rem / 20) calc(20rem / 20) calc(10rem / 20) calc(20rem / 20);
}
.cssSizeQR {
    /*min-width: 200px;*/
    /*min-height: 200px;*/
    min-width: calc(200rem / 20);
    min-height: calc(200rem / 20);
    /*max-width: calc(200px + 10vw);*/
    /*max-height: calc(200px + 10vw);*/
    max-width: calc(200rem / 20 + 10vw);
    max-height: calc(200rem / 20 + 10vw);
    width: 55%;
    height: 55%;
}
/*.cssRedButton {*/
/*    margin-left: 20px; background-color: cornflowerblue; color: white; padding: 10px 20px 10px 20px; font-family: Calibri, monospace;*/
/*    cursor: pointer !important;*/
/*}*/
.cssPositionAbsoluteX { display: inline-block; position: absolute; left: 50%; transform: translateX(-50%); }
.cssPositionAbsoluteY { display: inline-block; position: absolute; top: 50%; transform: translateY(-50%); }
.cssPositionAbsoluteXY { display: inline-block; position: absolute; left: 50%; top: 50%; transform: translateY(-50%) translateX(-50%); }
/*style="border-radius:5px;padding:20px;font-size: 26px;font-weight: bold;margin-left:20px;"*/
/*style="border-radius:5px;border: 1px solid rgb(34,177,76);color:rgb(34,177,76);background-color:rgb(249,253,236);padding:20px;font-size: 26px;font-weight: bold;margin-left:20px;"*/
.cssPopper {
    /*border-radius: 15px;*/
    /*padding: 15px;*/
    border-radius: calc(15rem / 20);
    padding: calc(15rem / 20);
}
.cssSizeStandardPopup {
    min-width: calc(150px + 35vw);
    max-width: calc(300px + 22vw);
}
.cssSizeFontSubtitle {
    font-size: 0.9rem; /*font-size: calc(12px + 0.3vw); */
}
.cssSizeFontEditBox {
    /*font-size: 1.2rem;*/
    font-size: 0.7rem;
}
.cssSizeFontMenuTitle {
    /*font-size: calc(13px + 0.2vw);*/
    font-weight: bold;
    color: rgb(93, 78, 78);
    font-size: 1rem;
}
.cssSizeFontSmallish {
    /*font-size: calc(10px + 0.15vw); */
    font-size: 0.7rem; }
.cssSizeFontButton {
    /*font-size: calc(16px + 0.4vw); */
    font-weight: bold; font-size: 1.4em; }
.cssSizeFontBolder {
    /*font-size: calc(16px + 0.25vw); */
    font-weight: bold;font-size: 1.07rem; }
/*.cssSizeFontSmallishEr {font-size: calc(12px + 0.15vw);}*/

table {
    border-spacing: 0;
}
/*!*@media (resolution: 126dpi) !* and (device-width: 640) !* and (device-height: 960) *!*!*/
/*!*@media (min-resolution: 300dpi){*!*/
/*@media only screen and (max-width: 1100px) {*/
/*    body {*/
/*        /*font-size: 180% !important;*/
/*        font-family: Calibri, Arial, monospace !important;*/
/*        /*font-family: Arial !important;*/
/*        zoom: 0.5;*/
/*    }*/
/*    .small { padding: 150px; }*/
/*    .cssHideOnPhone { display: none; }*/
/*    .cssSmallTable { margin: auto !important; }*/
/*}*/
/*@media (max-width: 1100px) {*/
/*    .cssSmallTable {*/
/*        width: 200px;*/
/*    }*/
/*}*/
/* @media (min-width: 800px) {
    .cssHideOnPc { display: none; }

} */
/* 1100 */
/* @media (max-width: 500px) {
    .cssVeryNarrow { display: none; }
} */
img { vertical-align: middle; }
img { -webkit-user-drag: none; }

.cssHideOnPc { display: none; }
.cssTop {
    vertical-align: top;
}
.cssSmallTable {
    width: 100px;
}
.cssTopMenu {
    /*background-color: rgb(244, 244, 242);*/
    display: inline-block;
    min-width: 200px;
    vertical-align: middle;
    cursor: pointer;
    padding: 10px;
    text-align: left;
}
.cssTopMenu:hover { background-color: lightgray; /*red;*/ }
.cssPointer { cursor: pointer; }
.cssCursorCrosshair { cursor: crosshair; }
.cssCursorDefault { cursor: default; }
.cssCursorNone { cursor: none; }
.cssBlock { display: block; /*margin: 20px auto auto;*/ }
.cssInline { display: inline; }
.cssInlineBlock { display: inline-block; }
.cssMiddle { vertical-align: middle; }
.cssRight { text-align: right; }
.cssLeft { text-align: left; }
.cssPad1 td { padding: calc(1rem / 20); }
.cssPad3 td { /* padding: 3px; */ padding: calc(3rem / 20); }
.cssPad10 td { /* padding: 6px; */ padding: calc(6rem / 20); }
.cssPad20 td th { /* padding-left: 32px; padding-right: 30px; */ padding-left: calc(32rem / 20); padding-right: calc(30rem / 20); }
/*.cssPad20ab td, th { padding-left: 32px; padding-right: 30px; }*/
.cssPad7 td { /* padding: 7px 7px 7px 6px;*/ padding: calc(7rem / 20); }
.cssPad7 th { /*padding-left: 6px;*/ padding-left: calc(6rem / 20); }
.cssPad5 td { /*padding: 5px;*/ padding: calc(5rem / 20); }
.cssLights2 :hover { background-color: lightgray; }
.cssTableLightExceptHeader > tbody > tr:not(:first-child):hover { background-color: rgba(183, 194, 229, 0.29);
    /*-webkit-transition: background-color 0.1s ease-in;*/
    /*-moz-transition: background-color 0.1s ease-in;*/
    /*-o-transition: background-color 0.1s ease-in;*/
    /*transition: background-color 0.1s ease-in;*/
}
.cssTableLightExceptHeaderAndE > tbody > tr:not(:first-child):hover td:not(:last-child)  { background-color: rgba(183, 194, 229, 0.29);
    /*-webkit-transition: background-color 0.1s ease-in;*/
    /*-moz-transition: background-color 0.1s ease-in;*/
    /*-o-transition: background-color 0.1s ease-in;*/
    /*transition: background-color 0.1s ease-in;*/
}
.cssTableLightExceptHead > tbody > tr:hover { background-color: rgba(183, 194, 229, 0.29); }
/*.lights tr:hover  td:not(:first-child){*/
.cssLights tr:hover { background-color: rgba(183, 194, 229, 0.22); }
.cssLightsNoHeader tr:not(:first-child):hover { background-color: lightgray; }
div.cssLights :hover { background-color: lightgray; }
li.cssLights :hover { background-color: lightgray; }
/*.cssLightsWithHeader tr:hover { background-color: lightgray;  }*/
td.cssTableCellLight:hover {
    background-color: lightgray;
}
.cssHighlightHover :hover { background-color: lightgray; /*background-color: red;*/ }
.cssLights4 td:hover { background-color: lightgray; /*background-color: red;*/ }
.cssLights li:hover { background-color: lightgray; /*background-color: red;*/ }
.cssCenter { text-align: center; }

.cssNotSelectable {
    -webkit-user-select: none !important;;
    -moz-user-select: none !important;;
    -ms-user-select: none !important;;
    /*user-select: none;*/
    /*-webkit-touch-callout: none;*/
    /*-webkit-user-drag: none;*/
    /*pointer-events: none;*/
}
/* .cssSelectable {
    -webkit-user-select: auto;
    -moz-user-select: auto;
    -ms-user-select: auto;
    /*user-select: auto;*/
    /*-webkit-touch-callout: initial;*/
    /*-webkit-user-drag: auto;*/
    /*pointer-events: auto;*/
/* }  */
.cssUntouchable {
    user-select: none;
    -webkit-touch-callout: none;
    pointer-events: none;
}
.cssTouchable {
    user-select: auto;
    -webkit-touch-callout: unset; /* ??? */
    -webkit-user-drag: auto;
    pointer-events: auto;
}

.cssInput {
    /*padding: 4px;*/
    padding: calc(4rem / 20);
    /*width: 200px;*/
    border: 1px solid lightgray;
}
.cssInputBad {
    border: 1px solid rgb(255, 208, 208);
    background-color: rgb(255, 245, 245);
    /*padding: 4px;*/
    padding: calc(4rem / 20);
    /*width: 200px;*/
}
.cssInputWarning {
    border: 1px solid rgb(191, 191, 115);
    background-color: rgb(245, 245, 175);
    /*padding: 4px;*/
    padding: calc(4rem / 20);
    /*width: 200px;*/
}
.cssInputGood {
    border: 1px solid rgb(191, 191, 115);
    background-color: rgb(239, 255, 255);
    /*padding: 4px;*/
    padding: calc(4rem / 20);
    /*width: 200px;*/
}

.cssDropdown span.value { display: none; }
.cssDropdown .dd ul li a { padding: 115px; display: inline-block; }
.cssDropdown img.flag { border: none; vertical-align: middle; /*margin-left: 10px;*/ margin-left: calc(10rem / 20); }
.cssDropdown .dd ul { background: #e4dfcb none repeat scroll 0 0; border: 1px solid #d4ca9a; display: none; left: 0; padding: 5px 0; position: absolute; top: 2px; width: auto; min-width: 170px; list-style: none; }
.cssDropdown .dd, .cssDropdown dt, .cssDropdown ul { margin: 0; padding: 0; z-index: 100; }
.cssDropdown .dd { position: relative; }
/*.cssGps { display: none !important; }*/
/*.cssSomething:hover { background-color: #e 4 d f c b !important; }*/
.cssSomethingElse:hover { background-color: #e4dfcb !important; }
.cssTableAccount td { padding: 5px 10px 5px 0; }
#wrapper { position: relative; }
#over_map { top: 10px; left: 10px; z-index: 99; }
#cssHidden { display: none; }
/*#show:hover + #cssHidden{display:block;}*/
#show :hover #div2 { display: inline-block; }
li { padding: 4px }
/*li :hover { background-color: red; }*/
/*.cssItem a:hover { color: #5d4617; }*/
/*.cssItem { color: #816c5b; text-decoration: none; outline: none; }*/
.cssNoPad { border-spacing: 0; }

input, textarea, [contenteditable] {
    -webkit-user-select: text;
    user-select: text;
}
/* https://codepen.io/flesler/pen/AEIFc */
/* content editable placeholders */
[contenteditable=true]:empty:before {
    content: attr(data-placeholder);
    display: block; /* For Firefox */
    /*color: lightgrey;*/
    color: rgba(134, 99, 99, 0.48)
}
[contenteditable=false]:empty:before {
    content: attr(data-placeholder);
    display: block; /* For Firefox */
    /*color: lightgrey;*/
    color: rgba(134, 99, 99, 0.48)
}
[contenteditable]:focus {
    outline: 0 solid transparent;
}

.cssHeaderContent {
    width: 100%;
    position: fixed;
    top: 0;
    background: white;
}
.cssContent {
    margin-top: 200px;
    overflow: hidden;
}
.cssHidden {
    display: none; /* !important */
}
.cssBold {
    font-weight: bold;
}
.cssFullWidth {
    width: 100%;
}
.cssTableCenter {
    margin: auto;
}
.cssButtonSmall {
    border-radius: 3px;
    display: inline-block;
    font-size: 11px;
    font-weight: bold;
    line-height: 99%;
    margin: 0;
    max-width: 12em;
    overflow: hidden;
    padding: 2px 5px;
    text-align: center;
    text-decoration: none;
    text-overflow: ellipsis;
    text-transform: uppercase;
    white-space: nowrap;
    word-break: normal;
    word-wrap: normal;
}
.cssOk {
    color: rgb(20, 137, 44);
    border: 1px solid rgb(221, 238, 221);
    background-color: rgb(239, 249, 239);
}
.cssWarn {
    color: rgb(105, 107, 23);
    border-color: rgb(255, 211, 81);
    background-color: rgba(255, 211, 81, 0.82);
}
.cssBad {
    color: rgba(137, 20, 44, 0.73);
    border: 1px solid rgb(238, 221, 221);
    background-color: rgb(249, 239, 239);
}
.cssInactive {
    color: rgb(96, 96, 96);
    border: 1px solid rgb(221, 238, 221);
    background-color: rgb(227, 227, 227);
}

.cssZebra > tbody > tr:nth-child(even) {background-color: rgba(201, 198, 216, 0.05);}
.cssZebra > tbody > tr:nth-child(odd) {background-color: white;}
.cssTransparent {opacity: 0.01; /* was 0.1 */ }

input[type=range]::-ms-track {
    width: 300px;
    height: 5px;
    /*remove bg colour from the track, we'll use ms-fill-lower and ms-fill-upper instead */
    background: transparent;
    /*leave room for the larger thumb to overflow with a transparent border */
    border-color: transparent;
    border-width: 6px 0;
    /*remove default tick marks*/
    color: transparent;
}
input[type=range]::-ms-fill-lower {
    background: #777;
    border-radius: 10px;
}
input[type=range]::-ms-fill-upper {
    background: #ddd;
    border-radius: 110px;
}
input[type=range]::-ms-thumb {
    border: none;
    height: 16px;
    width: 116px;
    border-radius: 50%;
    background: goldenrod;
}
input[type=range]:focus::-ms-fill-lower {
    /*background: #888;*/
    background: transparent;
}
input[type=range]:focus::-ms-fill-upper {
    /*background: #ccc;*/
    background: transparent;
}
input[type=range] {
    -webkit-appearance: none;
}
input[type=range]::-webkit-slider-runnable-track {
    width: 300px;
    height: 5px;
    background: #ddd;
    border: none;
    border-radius: 3px;
}
input[type=range]::-webkit-slider-thumb {
    -webkit-appearance: none;
    border: none;
    height: 16px;
    width: 16px;
    border-radius: 50%;
    background: darkgray;
    margin-top: -4px;
}


input[type=range]::-webkit-slider-thumb {
    /*height: 1.5rem !important;;*/
    /*width: 1.5rem !important;*/
}
input[type=range] {
    /*https://stackoverflow.com/questions/46091938/input-range-with-increased-clickable-area*/
    /*padding: 8rem 8rem !important;*/
    /*background-color: transparent !important;*/
}


input[type=range]::-moz-range-track {
    width: 100%;
    /*height: 8px;*/
    height: calc(8rem / 20);
    cursor: pointer;
    box-shadow: 0 0 0 rgba(0, 0, 0, 0), 0 0 0 rgba(13, 13, 13, 0);
    /*background: rgba(158, 159, 169, 0.01);*/
    background-color: transparent;
    /*border-radius: 4px;*/
    border-radius: calc(4rem / 20);
    /*border: 5px solid rgba(1, 1, 1, 0);*/
    border: calc(5rem / 20) solid rgba(1, 1, 1, 0);
}
input[type=range]::-moz-range-thumb {
    /*border: 1px solid #a3ff00;*/
    /*height: 21px;*/
    /*width: 16px;*/
    /*background: #ae95ff;*/
    /*background-color: transparent;*/
    box-shadow: 1px 1px 1px #000, 0 0 1px rgb(13, 13, 13);
    /*border: calc(1rem / 20) solid #a3ff00;*/
    /*height: calc(21rem / 20);*/
    /*width: calc(16rem / 20);*/
    /*border-radius: 3px;*/
    cursor: pointer;
    -webkit-appearance: none;
    border: none;
    height: 16px;
    width: 16px;
    border-radius: 50%;
    background: darkgray;
    margin-top: -4px;
}
input[type=range]::-ms-thumb {
    border: none;
    height: 116px;
    width: 16px;
    border-radius: 50%;
    background: goldenrod;
}
input[type=range]:focus {
    outline: none;
}
input[type=range]:focus::-webkit-slider-runnable-track {
    /*background: #ccc;*/
    background: transparent;
}
input[type=range]:focus::-ms-fill-lower {
    background: #888;
}
input[type=range]:focus::-webkit-slider-runnable-track {
    /*background: #ccc;  color of track in chrome */
    background: transparent;
}
input[type=checkbox] {
    /*background-color: red;*/
    width: calc(14rem / 20);
    height: calc(14rem / 20);
}
/*todo check if working after change to not*/
/*input[type!=range],select {*/
input:not[type=range], select {
    border-radius: 0.3rem;
    /*border: 1px solid #c3 b f b f;*/
    border: calc(1rem / 20) solid rgb(195, 191, 191);
    padding: 0.2rem;
    font-size: 0.8rem;
    background-color: white;
}
.cssStyleElementBackground {
    position: relative;
}
.cssStyleElementBackground:before {
    content: ' ';
    display: block;
    position: absolute;
    left: 0;
    top: 0;
    width: calc(100% - 2px); /* to make sure border is displayed correctly */
    height: calc(100% - 2px); /* to make sure border is displayed correctly */
    opacity: .6;
    z-index: -1;
/* fixme background: rgb(251, 251, 251) url(getImage.dhtml?q=res/header-bg.jpg) repeat top right; */
}
.cssSizeButtonAddRemove {
    width: 2rem;
    height: 1.7rem;
    margin: 0 0.3rem;
    text-align: center;
    vertical-align: middle;
    line-height: 1.6rem;
    font-size: 1.4rem;
    font-weight: bold;
    color: wheat;
    border-radius: 1.3rem;
    display: inline-block;
    /*border: 0 calc(1rem / 20);*/
    border: calc(1rem / 20);
}

/*Fancy sliders */
/* This is invisible slider for ranges with colors ? */
/*Todo make it class dependent*/
input[type=range] {
    -webkit-appearance: none;
    width: 100%;
    /*margin: 6px 0;*/
    margin: calc(6rem / 20) 0;
}
input[type=range]::-webkit-slider-runnable-track {
    width: 100%;
    /*height: 50px;*/
    height: calc(50rem / 20);
    cursor: pointer;
    box-shadow: 0 0 0 rgba(0, 0, 0, 0), 0 0 0 rgba(13, 13, 13, 0);
    /*background: rgba(158, 159, 169, 0.01);*/
    background-color: transparent;
    /*border-radius: 4px;*/
    border-radius: calc(4rem / 20);
    /*border: 5px solid rgba(1, 1, 1, 0);*/
    border: calc(5rem / 20) solid rgba(1, 1, 1, 0);
}
input[type=range]:focus::-webkit-slider-runnable-track {
    /*background: rgba(172, 172, 181, 0.01);*/
    background-color: transparent;
}
input[type=range]::-ms-track {
    width: 100%;
    /*height: 8px;*/
    height: calc(8rem / 20);
    cursor: pointer;
    background: transparent;
    border-color: transparent;
    color: transparent;
}
input[type=range]::-ms-fill-lower {
    /*background: rgba(144, 146, 157, 0.01);*/
    background-color: transparent;
    /*border: 5px solid rgba(1, 1, 1, 0);*/
    border: calc(5rem / 20) solid rgba(1, 1, 1, 0);
    /*border-radius: 7px;*/
    border-radius: calc(7rem / 20);
    box-shadow: 0 0 0 rgba(0, 0, 0, 0), 0 0 0 rgba(13, 13, 13, 0);
}
input[type=range]::-ms-fill-upper {
    /*background: rgba(158, 159, 169, 0.01);*/
    background-color: transparent;
    /*border: 5px solid rgba(1, 1, 1, 0);*/
    border: calc(5rem / 20) solid rgba(1, 1, 1, 0);
    /*border-radius: 17px;*/
    border-radius: calc(17rem / 20);
    box-shadow: 0 0 0 rgba(0, 0, 0, 0), 0 0 0 rgba(13, 13, 13, 0);
}
input[type=range]:focus::-ms-fill-lower {
    /*background: rgba(158, 159, 169, 0.01);*/
    background-color: transparent;
}
input[type=range]:focus::-ms-fill-upper {
    /*background: rgba(172, 172, 181, 0.01);*/
    background-color: transparent;
}

body {
    /*https://medium.com/appscope/designing-native-like-progressive-web-apps-for-ios-1b3cdda1d0e8*/
   -webkit-tap-highlight-color: transparent;
     -webkit-touch-callout: none;
}
.cssProfileThumb { width: 4rem; height: 4rem; border-radius: 0.9rem; }
/* Style the head */
/* Special styling for WebKit/Blink */
input[type=range]::-webkit-slider-thumb {
    /*height: 25px;*/
    /*width: 25px;*/
    height: calc(35rem / 20);
    width: calc(35rem / 20);
    /*border-radius: 10px;*/
    border-radius: calc(10rem / 20);
    /*border-radius: 3px;*/
    /*top: 10px;*/
    /*margin-top: 10px;*/
    top: calc(10rem / 20);
    margin-top: calc(10rem / 20);
    /*padding:20px;*/
}
/* All the same stuff for Firefox */
input[type=range]::-moz-range-thumb {
    /*height: 20px;*/
    /*width: 20px;*/
    /*border-radius: 10px;*/
    height: calc(20rem / 20);
    width: calc(20rem / 20);
    border-radius: calc(10rem / 20);
    /*border-radius: 3px;*/
}
/* All the same stuff for IE */
input[type=range]::-ms-thumb {
    /*height: 20px;*/
    /*width: 20px;*/
    /*border-radius: 10px;*/
    height: calc(20rem / 20);
    width: calc(20rem / 20);
    border-radius: calc(10rem / 20);
    /*border-radius: 3px;*/
}
.cssBorder {
    /*border: 1px solid #cac2c287;*/
    border: calc(1rem / 20) solid rgba(202, 194, 194, 0.25);
}
.cssBorderNoneLeft {
    border-left: none;
}
.cssBorderNoneRight {
    border-right: none;
}
.cssBorderGrayLeft {
    /*border-left: 1px solid rgb(198, 189, 189);*/
    border-left: calc(1rem / 20) solid rgb(198, 189, 189);
}
::-webkit-scrollbar {
    /*width: 15px;*/
    width: calc(15rem / 20);
    opacity: .78;
}

::-webkit-scrollbar-track {
    /*display: none;*/
    opacity: .78;
}
.cssSizeFontBoxes {
    /*font-size: 16.5px;*/
    font-size: calc(16rem / 20);
    font-weight: 700;
}
.cssColorful {
     padding: 0.2rem 0.5rem; margin: 0.2rem;  border-radius: 0.4rem;
    background: rgba(245, 199, 199, 0.35); color: #0c0202;
    display: inline-block;
}
.cssColorful2 {
      /*background: rgb(220,255,185); */
    /*color: rgb(35,72,45);*/
    /*padding: 0.2rem 0.5rem; margin: 0.2rem; display: inline-block; */
    border-radius: 0.4rem;
    /*background: #dcffb9; color: #23482d; */
    padding: 0.2rem 0.5rem; margin: 0.2rem; display: inline-block;
    background: rgba(220, 255, 185, 0.38); color: rgb(35, 72, 45);
    border: 1px solid rgba(0, 128, 0, 0.17);
}
.cssColorInfo {
    background: rgba(199, 215, 245, 0.24);
    color: rgb(105, 125, 140);
    padding: 0.2rem 0.5rem;
    margin: 0.2rem;
    display: inline-block;
    border-radius: 0.4rem;
    min-width: 5rem;
    font-weight: bold;
    font-size: 1.1rem;
}



.cssPopup {
    z-index: 999;
}
/*this is the cancel button*/
.cssNieWiem {border-radius: 0.25rem;margin-right: 1.05rem;border: calc(1rem / 20) solid rgb(177, 34, 76);color: rgb(177, 34, 76);background-color: rgb(253, 249, 236);padding: 1.05rem;font-size: 1.3rem;font-weight: bold;}

table.cssStyleTableOfferWarnings {
    text-align: left;
    color: gray;
    vertical-align: middle;
    width: 100%;
    padding-left: 1rem;
    font-size: calc(19rem / 20);
}

/*table.cssTableRow tr td:first-child {*/
.cssSizeIconInfoAcceptOffer {
    /*padding: calc(5rem / 20);*/
    /*width: calc(24rem / 20);*/
    /*height: auto;*/
    padding: calc(3.5rem / 20) calc(15rem / 20);
    min-height: calc(23rem / 20);
    /*height: calc(24rem / 20);*/
    /*width: auto;*/
    width: calc(24rem / 20);
    height: auto;
}
.cssColorGold { color: rgb(236, 158, 21); }
.cssPad3 { padding: 0.3rem 0;}
.cssRibbon {
    /*https://codepen.io/eode9/pen/twkKm*/
    box-shadow: 0 0 3px rgba(0, 0, 0, .3);
    width: calc(84rem / 20);
    /*background: #e43;*/
    position: absolute;
    top: calc(9rem / 20);
    left: calc(-26rem / 20);
    text-align: center;
    line-height: calc(15rem / 20);
    letter-spacing: 1px;
    /*color: #f0f0f0;*/
    transform: rotate(-45deg);
    font-size: 0.51rem;
    z-index: 99;
    background: rgb(212, 65, 50);
    color: white;
}

.cssBlackBack::after {
    content: '';
    display: inline-block;
    top: -1000%;
    left: -1000%;
    height: 2000vh;
    width: 2000vw;
    vertical-align: middle;
    position: absolute;
    background-color: black;
    opacity: .8;
    z-index: 9998;
    transform: translateZ(-1px);
}

.cssPopupSimpleBlack::after {
    content: '';
    display: inline-block;
    top: -1000%;
    left: -1000%;
    height: 2000vh;
    width: 2000vw;
    vertical-align: middle;
    position: absolute;
    background-color: black;
    opacity: .8;
    z-index: 9998;
    transform: translateZ(-1px);
}
.cssPopupKillableBlack::after {

    content: '';
    display: inline-block;
    top: -95%;
    left: -170%;
    height: 800%;
    width: 440%;
    vertical-align: middle;
    position: absolute;
    background-color: black;
    opacity: .8;
    z-index: 9998;
    transform: translateZ(-1px);
}
.cssPopupKillableBlack { transform-style: preserve-3d; z-index: 9999;     z-index: 9999999999 !important;}
.cssPopupSimpleBlack { transform-style: preserve-3d; z-index: 9999;     z-index: 9999999999 !important;}

.cssBarInsufficientInt {
    /*background: rgb(221, 228, 198) !important;*/
    background: rgb(237, 241, 226) !important;
    /*background: rgb(251, 214, 231) !important;*/
    /*background: rgb(245, 233, 174) !important;*/
    /*background: rgb(251, 210, 180) !important;*/
}
.cssBarInsufficientExt {
    /*background: rgb(247, 255, 240) !important;;*/
    background: rgb(242, 242, 242) !important;
    /*border: 1px solid rgb(212, 216, 201) !important;;*/
    /*border-color: rgb(203, 203, 203) !important;*/
    border: 1px solid rgb(203, 203, 203) !important
}

@media (hover: hover) {
    /* ... */
    #hdMain { /* this is the ID selector */
        overflow: scroll;
    }

    /*Chrome, Safari */
    ::-webkit-scrollbar {
        width: 15px !important;
        height: 15px !important;
    }

    ::-webkit-scrollbar-track-piece {
        /*background-color: #C2D2E4 !important;*/
        background-color: #ecdcdc !important;
    }

    ::-webkit-scrollbar-thumb:vertical {
        height: 30px !important;
        background-color: #949546 !important;
    }
}