/* Extra small devices (phones, less than 768px) */
body::-webkit-scrollbar {
  display: none;
}
.page:hover{
    border:2px solid gray !important;
}
.active, .active:hover{
    border:2px solid red !important;
}
.overl::after {
    content: ""; 
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background:black;
    opacity: .8;
    z-index:1;
}
.imgbox {
    display: grid;
    height: 100%;
}
.center-fit {
    max-width: 100%;
    max-height: calc( 100vh - 60px);
    margin: auto;
    background:white;
    margin-top:2px;
    
}  
.loading-class::before{    
    
    width:100%;
    height:100%;
    position:absolute;
    top:0;
    left:0;
    z-index:3000;
    background: transparent url('http://www.winklertuzep.hu/image/image-loader.gif') center no-repeat !important;
    background-size: 80px 80px !important;
   
}  
@keyframes spinner {
  to {transform: rotate(360deg);}
}
 
.spinner:before {
  content: '';
  box-sizing: border-box;
  position: relative;
  top: 50%;
  left: 50%;
  width: 20px;
  height: 20px;
  margin-top: -10px;
  margin-left: -10px;
  border-radius: 50%;
  border: 2px solid #ccc;
  border-top-color: #000;
  animation: spinner .6s linear infinite;
}

.cartspot{
    border: 2px solid red;
    display:none;
    position:absolute;
    z-index:2;
}
.linkspot{
    border: 2px solid blue;
    display:none;
    position:absolute;
    z-index:2;
    color:blue;
}

.cartspot:hover{
    border:3px solid red;
}
.linkAnnotation:hover{
    border:3px solid blue;
}

@keyframes pulse {
    0% {
        transform: scale(1);
        box-shadow: 0 0 0 0 rgba(255, 0, 0, 0.7);
    }

    70% {
        transform: scale(1);
        box-shadow: 0 0 0 20px rgba(255, 0, 0, 0);
    }

    100% {
        transform: scale(1);
        box-shadow: 0 0 0 0 rgba(255, 0, 0, 0);
    }
}
.dropdown-linkspot{
    border:2px solid blue;
    border-radius:0 !important;
    padding:5px;
    margin-top:4px;
}    
.back{
    border: 2px solid red;
    background:white;
    color:red;
    width:40px;
    height:40px;
    position:fixed;
    z-index:10000;
    padding-top:2px;
}
.katalogus{
    background: white; padding: 15px; position: fixed; top: 70px; left: 50px; z-index: 2000;  box-shadow:0 2px 5px 0 rgba(0,0,0,.16),0 2px 10px 0 rgba(0,0,0,.12);
}
/*TOC STYLE*/
/* example 
<dl>
    <dt>Drug 1</dt>
    <dd>10ml</dd>

    <dt>Another drug</dt>
    <dd>50ml</dd>

    <dt>Third</dt>
    <dd>100ml</dd>
</dl>
Drug 1 ............  10ml
Another drug ......  50ml
Third ............. 100ml

*/

dl { width: 270px;text-align:center; }
dt { float: left; width: 200px; overflow: hidden; white-space: nowrap }
dd { float: left; width: 42px; overflow: hidden }

dt:after { content: " .................................................................................." }





@media (max-width: 767px) 
{
    .active-hotspot{
        position:fixed !important;
        top:50% !important;
        left:50% !important;
        margin-top:-100px !important;
        margin-left:-90px;
    }
    
    .kosar-letoltes{
        background:white;
        position:fixed;
        top:5px;
        left:50%;
        margin-left:-130px;
        z-index:100000000000000000000000000;
        width:260px;
        list-style:none;
        border:2px solid red;
        padding:0px;
    }
    .back{
        top:5px;
        left:5px;        
    }
    .zoomin,.zoomout{
        display:none;
    }
    .letoltes-cime{
        display:none;
    }
    .blob {
        background: white;
        border-radius: 50% !important;
        height: 20px;
        width: 20px;
        padding-top:1px;
        text-align:center;
        box-shadow: 0 0 0 0 rgba(255, 0, 0, 1);
        transform: scale(2);
        animation: pulse 2s infinite;
        display:table;
        vertical-align: middle;
    }
    .blob a{
        text-decoration:none !important;
    }
    .linkspot a:hover{
        color:blue !important;
    }
    .cartspot a:hover{
        color:red !important;
    }
    .blob .fa{
        font-size:1em !important;
    }   
    .blob .dropdown,.blob .dropdown-toggle, .blob .dropup{
        display:table-cell;
    }              
}


@media (min-width: 768px) and (max-width: 991px) 
{
    .active-hotspot{
        position:fixed !important;
        top:50% !important;
        left:50% !important;
        margin-top:-100px !important;
        margin-left:-90px;
    }
    .kosar-letoltes{
        background:white;
        position:fixed;
        top:5px;
        left:50%;
        margin-left:-150px;
        z-index:100000000000000000000000000;
        width:300px;
        list-style:none;
        border:2px solid red;
        padding:0px;
    } 
    .back{
        top:5px;
        left:5px;        
    }
    .zoomin,.zoomout{
        display:none;
    }
    .letoltes-cime{
        display:none;
    } 
    .blob {
        background: white;
        border-radius: 50% !important;
        height: 20px;
        width: 20px;
        padding-top:1px;
        text-align:center;
        box-shadow: 0 0 0 0 rgba(255, 0, 0, 1);
        transform: scale(2);
        animation: pulse 2s infinite;
        display:table;
        vertical-align: middle;
    }  
    .blob .fa{
        font-size:1em !important;
    }
    .blob a{
        text-decoration:none !important;
    }
    .linkspot a:hover{
        color:blue !important;
    }
    .cartspot a:hover{
        color:red !important;
    }
    .blob .dropdown,.blob .dropdown-toggle, .blob .dropup{
        display:table-cell;
    } 
                       
}


@media (min-width: 992px) and (max-width: 1200px) {
    .active-hotspot{
        position:fixed !important;
        top:50% !important;
        left:50% !important;
        margin-top:-100px !important;
        margin-left:-90px;
    }
    .kosar-letoltes{
        background:white;
        position:fixed;
        top:7px;
        left:50px;
        z-index:100000000000000000000000000;
        width:300px;
        list-style:none;
        border:2px solid red;
        padding:0px;
    }
    .back{
        top:7px;
        left:5px;        
    }
    .zoomin{
        position:fixed;top:5px;right:10px;z-index:10000000000;
    }
    .zoomout{
        position:fixed;top:5px;right:50px;z-index:10000000000;    
    } 
    .letoltes-cime{
        position:fixed;
        top:0px;
        left:0px;
        width:100%;
        text-align:center;
        z-index:1003;
        margin-top:0px;
        background:#102e6c;
        color:white;
    }                    
    .blob {
        background: white;
        border-radius: 50% !important;
        height: 40px;
        width: 40px;
        padding-top:1px;
        text-align:center;
        box-shadow: 0 0 0 0 rgba(255, 0, 0, 1);
        transform: scale(2);
        animation: pulse 2s infinite;
        display:table;
        vertical-align: middle; 
    }
    .blob a{
        text-decoration:none !important;
    }
    .linkspot a:hover{
        color:blue !important;
    }
    .cartspot a:hover{
        color:red !important;
    }
    .blob .dropdown,.blob .dropdown-toggle, .blob .dropup{
        display:table-cell;
    } 
              
}


@media (min-width: 1200px) 
{
    .active-hotspot{
        position:fixed !important;
        top:50% !important;
        left:50% !important;
        margin-top:-100px !important;
        margin-left:-90px;
    }
    .kosar-letoltes{
        background:white;
        position:fixed;
        top:7px;
        left:50px;
        z-index:100000000000000000000000000;
        width:300px;
        list-style:none;
        border:2px solid red;
        padding:0px;
    }
    .back{
        top:7px;
        left:5px;        
    }
    .zoomin{
        position:fixed;top:5px;right:10px;z-index:10000000000;
    }
    .zoomout{
        position:fixed;top:5px;right:50px;z-index:10000000000;    
    } 
    .letoltes-cime{
        position:fixed;
        top:0px;
        left:0px;
        width:100%;
        text-align:center;
        z-index:1003;
        margin-top:0px;
        background:#102e6c;
        color:white;
    }
    .blob {
        background: white;
        border-radius: 50% !important;
        height: 25px;
        width: 25px;
        padding-top:2px;
        padding-left:2px;
        text-align:center;
        box-shadow: 0 0 0 0 rgba(255, 0, 0, 1);
        transform: scale(2);
        animation: pulse 2s infinite;
        display:table;
        vertical-align: middle; 
    }
    .blob a{
        text-decoration:none !important;
    }
    .linkspot a:hover{
        color:blue !important;
    }
    .cartspot a:hover{
        color:red !important;
    }
    .blob .dropdown,.blob .dropdown-toggle, .blob .dropup{
        display:table-cell;
    } 
    .kereso{
        position:fixed;
        top:70px;
        right:10px;
        padding:5px;
        background:white;
        width:290px;
        z-index:100000000000;
        box-shadow:0 2px 5px 0 rgba(0,0,0,.16),0 2px 10px 0 rgba(0,0,0,.12);
        
    }   
    #talalatok {
        max-height:calc(100vh - 140px);
        overflow-y:auto;
        line-height: 1em;
        letter-spacing: normal;
        text-transform: lowercase;
        padding:8px;
        margin-top:10px;
        border-top:2px solid lightgray;
    } 
    .katalogus-kereses-input:active,.katalogus-kereses-input:focus{
        border:none !important;
    }
    .katalogus-kereses-input::placeholder{
        /* Chrome, Firefox, Opera, Safari 10.1+ */
        color: white !important;
        opacity: 1; /* Firefox */
    }
    .katalogus-kereses-input{
        background:#85be3d;color:white!important;
        border:none !important;
    }
    .talalat-anyag-neve{
        width:120px;
        overflow:hidden;
        display:inline-block;
        vertical-align: bottom;
    }                 
}