/* SVN FILE: $Id: _indexNetwork.css 207 2017-03-10 09:57:22Z Wolff $ */
/**
 * @lastChangedBy       $LastChangedBy: Wolff $
 * @copyright           ARZA STUDIO
 * @version             $Revision: 207 $
 * @date                $Date: 2017-03-10 10:57:22 +0100 (ven., 10 mars 2017) $
 * @license             LICENSE.TXT
 * @filesource          $URL: https://svn.arza-studio.com/tripalium/trunk/protected/modules/media/assets/media/index/_indexNetwork.css $
 */

#indexNetwork
{
    margin-top: -1px;
    padding: 0;
    height: auto;
}
    #indexNetworkContainer
    {
        position: relative;
        padding-bottom: 15px;
    }
    .zoomed #indexNetworkContainer
    {
        padding-left: 0;
        padding-right: 0;
    }
    @media (min-width: 768px)
    {
        #indexNetworkContainer
        {
            padding-bottom: 0;
        }
    }
        #indexNetwork .col-2
        {
            pointer-events: none;
        }
        #indexNetwork .col-2 a
        {
            pointer-events: auto;
        }
        
/* Map ---------------------------------------------------------------------- */
#indexNetworkMap
{
    position: relative;
    z-index: 0;
    height: 380px;
    width: auto;
    margin: 0 -15px;
    overflow: hidden;
}
@media (min-width: 768px)
{
    #indexNetworkMap
    {
        position: absolute;
        top: 0;
        left: 0;
        height: 410px;
        width: 100%;
        margin: 0;
    }
    .zoomed #indexNetworkMap
    {
        position: relative;
    }
    
}
@media (min-width: 992px)
{
    #indexNetworkMap
    {
        height: 460px;
    }
}
    /* Layers (Show/Hide) */
    #indexNetwork .row,
    #indexNetwork.zoomed .leaflet-layer,
    #indexNetwork .leaflet-image-layer
    {
        display: block;
    }
    #indexNetwork.zoomed .row,
    #indexNetwork.fullscreened .row,
    #indexNetwork .leaflet-layer,
    #indexNetwork.zoomed .leaflet-image-layer
    {
        display: none;
    }
    
    /* Controls */
    @media (min-width: 768px)
    {
        #indexNetwork:not(.zoomed):not(.fullscreened) .leaflet-control-container .leaflet-left
        {
            left: 365px;
        }
    }
    @media (min-width: 992px)
    {
        #indexNetwork:not(.zoomed):not(.fullscreened) .leaflet-control-container .leaflet-left
        {
            left: 313px;
        }
    }
    @media (min-width: 1200px)
    {
        #indexNetwork:not(.zoomed):not(.fullscreened) .leaflet-control-container .leaflet-left
        {
            left: 380px;
        }
    }
    #indexNetworkMap .leaflet-control-container .leaflet-left.leaflet-top
    {
        padding-top: 5px;
    }
    #indexNetworkMap .leaflet-control-container div
    {
        box-shadow: none;
        border: none; /* for mobile */
    }
    #indexNetworkMap .leaflet-control-container a
    {
        background-color: transparent;
        background-image: none;
        border: none;
        height: 28px;
        width: 28px;
        display: block;
        margin-bottom: 5px;
        text-indent: 0px;
    }
    #indexNetworkMap .leaflet-control-container svg
    {
        height: 28px;
        width: 28px;
    }
    #indexNetworkMap .leaflet-disabled svg.picto
    {
        opacity: 0.3;
    }
    
/* Tabs --------------------------------------------------------------------- */    
#indexNetworkTabs
{
    z-index: 9999;
}
    #indexNetworkTabs .nav-tabs
    {
        border-bottom-width: 2px;
    }
        #indexNetworkTabs .nav-tabs li a
        {
            border-bottom: none;
            margin-bottom:1px;
            padding: 3px 6px 3px 6px;
            text-decoration: none;
            font-size: 13px;
            line-height: 13px;
            text-transform: uppercase;
            letter-spacing: 1px;
        }
            #indexNetworkTabs .nav-tabs li a span
            {
                letter-spacing: 0;
            }
    #indexNetworkTabs .tab-content
    {
        position: relative;
        border-bottom-left-radius: 4px;
        border-bottom-right-radius: 4px;
        padding: 10px;
        overflow: hidden;
        height: 280px;
    }
    @media (min-width: 992px)
    {
        #indexNetworkTabs .tab-content
        {
            height: 408px;
        }
    }
        #indexNetworkTabs .slider,
        #indexNetworkTabs .slick-list
        {
            height: 260px !important;
            overflow: hidden;
        }
        #indexNetworkTabs .slider.slick-initialized
        {
            overflow: auto;
        }
        @media (min-width: 992px)
        {
            #indexNetworkTabs .slider,
            #indexNetworkTabs .slick-list
            {
                height: 388px !important;
            }
        }
        #indexNetworkTabs .sliderMask
        {
            position: absolute;
            left: 0;
            width: 100%;
            height: 50px;
        }
        #indexNetworkTabs .sliderMaskTop
        {
            top: 10px;
        }
        #indexNetworkTabs .sliderMaskBottom
        {
            bottom: 10px;
        }
        #indexNetworkFormationSlider .item
        {
            height: 115px;
        }
        #indexNetworkWindmillSlider .item
        {
            height: 78px;
        }
        @media (min-width: 768px)
        {
            #indexNetworkFormationSlider .item
            {
                height: 78px;
            }
            #indexNetworkWindmillSlider .item
            {
                height: 78px;
            }
        }
        @media (min-width: 992px)
        {
            #indexNetworkFormationSlider .item
            {
                height: 115px;
            }
        }
        @media (min-width: 1200px)
        {
            #indexNetworkFormationSlider .item
            {
                height: 100px;
            }
        }
        #indexNetworkTabs .item[data-index=btn]
        {
            height: 50px;
            position: relative;
        }
            #indexNetworkTabs .item[data-index=btn] .btnBottom
            {
                right: 0;
            }
            #indexNetworkTabs .line
            {
                position: relative;
                border-radius: 4px;
                margin-bottom: 5px;
                overflow: hidden;
                height: calc(100% - 5px);
                padding: 10px;
            }  
                #indexNetworkTabs .line .row
                {
                    margin: 0;
                }
                    #indexNetworkTabs .line .col
                    {
                        padding: 0;
                        float: left;
                    }
                    #indexNetworkTabs .line .col-1
                    {
                        width: 62px;
                    }
                        #indexNetworkTabs .line .pellet
                        {
                            display: block;
                        }
                    #indexNetworkTabs .line .col-2
                    {
                        width: calc(100% - 77px);
                    }
                        #indexNetworkTabs .line .heading
                        {
                            font-family: 'FontFace', Arial, Helvetica, sans-serif;
                            font-size: 13px;
                            line-height: 15px;
                            margin: -1px 0 2px 0;
                        }
                        #indexNetworkTabs .line p
                        {
                            font-size: 12.5px;
                            line-height: 14.5px;
                            margin: 0;
                        }
                        #indexNetworkTabs svg.picto
                        {
                            height: 20px;
                            width: 20px;
                            position: absolute;
                            bottom: 8px;
                            right: 8px;
                        }
                
    
#indexNetwork svg.pictoGoDown
{
    height: 29px;
    width: 29px;
    cursor: pointer;
    position: absolute;
    right: 10px;
    bottom: 10px;
    z-index: 10;
}
@media (min-width:768px)
{
    #indexNetwork svg.pictoGoDown
    {
        display: none;
    }
}

/* Leaflet : MarkerCluster Plugin */
#progress
{
    display: none;
    position: absolute;
    z-index: 1000;
    left: 400px;
    top: 300px;
    width: 200px;
    height: 20px;
    margin-top: -20px;
    margin-left: -100px;
    background-color: #fff;
    background-color: rgba(255, 255, 255, 0.7);
    border-radius: 4px;
    padding: 2px;
}
    #progress-bar
    {
        width: 0;
        height: 100%;
        background-color: #76A6FC;
        border-radius: 4px;
    }
.marker-cluster
{
    background-clip: padding-box;
    border-radius: 20px;
}
.marker-cluster div
{
    width: 30px;
    height: 30px;
    margin-left: 5px;
    margin-top: 5px;
    text-align: center;
    border-radius: 15px;
    font-size: 12px;
    font-family: 'FontFace', Arial, Helvetica, sans-serif;
    color: white;
}
    .marker-cluster span
    {
        line-height: 30px;
    }