﻿
.scrolling {
    position: absolute;
    display: block;
    width: 100%;
    bottom: 30px;
    z-index: 999;
}

.scrolling img {
    display: block;
    margin-left: auto;
    margin-right: auto;
    width: 75px;

}

.DistBorder{
    border-radius: 16px!important;
    border: 1px solid #ccc!important;
    padding: 15px;
    height:290px;

}

.zeroPadding{
    padding: 0;
}

.addedMargin{

    margin-top: 1.2rem!important;
}

   
   *, *:before, *:after {margin: 0; padding: 0; box-sizing: border-box;}
   body {background: #2F2556; color: #B9B5C7; font: 14px 'Open Sans', sans-serif;}

   h1 {padding: 100px 0; font-weight: 400; text-align: center;}
   p {margin: 0 0 20px; line-height: 1.5;}

   .main {
       margin: 0 auto 3px; 
       min-width: 320px; 
       max-width: 834px;

   }
   .content {
       background: #373737; 
       color: #373737;
       margin-bottom:3px;
       opacity: 0.8;
       width:100%;
       height:100px;
       

   }
   .content > div {display: none; padding: 20px 25px 5px;}

   input {display: none!important;}
   label {display: inline-block; padding: 15px 25px; font-weight: 600; text-align: center;background: #373737;color: #fff;opacity: 0.8;}
   label:hover {color: #fff; cursor: pointer;text-align:center;}
   input:checked + label {background: #5f9eb3 ; color: #fff;}

   #tab1:checked ~ .content #content1,
   #tab2:checked ~ .content #content2,
   #tab3:checked ~ .content #content3,
   #tab5:checked ~ .content #content5,
   #tab4:checked ~ .content #content4 {
     display: block;
         
   }


     /*----- Tabs -----*/
.tabs {
    width:93%;
    display:inline-block;
}
 
    /*----- Tab Links -----*/
    /* Clearfix */
    .tab-links:after {
        display:block;
        clear:both;
        content:'';
    }
 
    .tab-links li {
        margin:0px 0px;
        
        float:left;
        list-style:none;
    }
 
        .tab-links a {
            padding:9px 15px;
            display:inline-block;
            border-radius:3px 3px 0px 0px;
            background:#373737;
            opacity: 0.8;
            font-size:14px;
            font-weight:600;
            color:#fff;
            transition:all linear 0.15s;
        }
 
        .tab-links a:hover {
            background:#5f9eb3;
            text-decoration:none;
        }
 
    li.active a, li.active a:hover {
        background:#66B4CE;
        color:#fff;
    }
 
    /*----- Content of Tabs -----*/
    .tab-content {
        padding:13px;       
        
          background:#373737;
            opacity: 0.8;
    }
 
        .tab {
            display:none;
        }

        .tabpad{

            
        }
 
        .tab.active {
            display:block;
        }

   

    .cog{
        width:45px;
        opacity: 0.9;
        margin-bottom:1px;
    }

    
    .car{
        width:70px;
        opacity: 0.9;
        margin-bottom:1px;
        padding-right:10px;
    }

    .buttonBox{
        background:#373737;
        opacity: 0.8;
        width:155px;        
        padding-bottom:10px;       
        height:63px;
        margin:auto;
        margin-top:0px;
       
    }

    .picker{

         display: inline-block;
          margin-bottom:8px;
    }

    .colourIcon{
        border-radius:2px;
        border: 1px solid #373a3c;
        display: table-cell; 
        cursor: pointer; 
        width: 30px; 
        height: 25px; 
        margin: 0 5px 5px 0;   
        
        /*
            old style
            display: table-cell; border: 1px solid #373a3c; cursor: pointer; width: 30px; height: 25px; margin: 0 5px 5px 0;
        */  
    }

    .materialBox a{
       color: #fff;
                   background:#373737;
        opacity: 0.8;
            -moz-border-radius: 3px;
            -webkit-border-radius: 3px;
            border-radius: 3px;
            padding: 3px;
            margin-bottom:3px;
    }

    .materialBox a:hover{
          background:#5f9eb3;
    }

  

     #current_material {                     
            font-size: 12px; 
            height:20px;
            
                    }

