/*This is used to display the selling points tab at the top of the worksheet buy area*/
.topSectionBuyBox {
        min-height: 205px;
        height:205px;
        width:98%;
        border-top-left-radius: 1em;
        border-top-right-radius: 1em;
        
        
     }


    /*This is a empty box sized to the correct box size to keep the spacing in order
        we use a white border to be invisible but still make up the 1px border sizing of the other 
        bordered boxes. It is used as the top element in the full screen side emnu just above
        the years column (Not shown on mobile views)
    */
    .standardNoBorderBuyBox {
        min-height: 30px;
        height:30px;
        line-height:30px;
        border-top: solid 1px #ffffff;
        border-left: solid 1px #ffffff;
        text-align:center;
        position:relative;
     }

    /*This is again used for spacing out but this time requires a top border of the correct colour
        as this is used as the bottom element of the full screen side view (Not shown on mobile views)
    */
     .standardNoBorderBuyOtherBox {
        min-height: 30px;
        height:30px;
        line-height:30px;
        border-top: solid 1px #000000;
        border-left: solid 1px #ffffff;
        text-align:center;
        position:relative;
     }

     /*This is the standard box in the buy table*/
    .standardBuyBox {
        min-height: 30px;
        height:30px;
        line-height:30px;
        border-top: solid 1px #000000;
        border-left: solid 1px #000000;
        text-align:center;
        position:relative;
     }
    /*Content for the standard box in the buy table*/
     .standardBuyBox div
     {
       vertical-align: middle;
        display: inline-block;
        font-weight:bold;
        color:#555;
        /*transform: translate(-50%,-50%);*/
           
     }

      /*Box for displaying the buy buttons in the buy table*/
     .standardBuyButtonBox {
        min-height: 40px;
        height:40px;
        line-height:40px;
        border-top: solid 1px #000000;
        border-left: solid 1px #000000;
        text-align:center;
        position:relative;
     }
     /*buy button content*/
     .standardBuyButtonBox div
     {
       vertical-align: middle;
        display: inline-block;
        font-weight:bold;
        color:#555;
        /*transform: translate(-50%,-50%);*/
           
     }

     /*Image content in the standard buy box (tick.png for example)*/
     .standardBuyBox img
     {
       vertical-align: middle;
        display: inline-block;
                  
     }

     /*Larger boxes in the buy table, these are used to display extra products
         the choices within each mean we need more space, so these boxes have 
         a greater height.
     */
     .largeStandardBuyBox {
        min-height: 120px;
        height:120px;
        border-top: solid 1px #000000;
        border-left: solid 1px #000000;
        text-align:center;
        position:relative;
     }
     /*Content display within the larger boxes.*/
     .largeStandardBuyBox div
     {
       vertical-align: middle;
        display: inline-block;
        font-weight:bold;
        color:#555;
           
     }

     /*Image content within the larger boxes.*/
     .largeStandardBuyBox img
     {
       vertical-align: middle;
        display: inline-block;
       
           
     }

     /*Large box but with a line height set to vertically space out the content better, this is used when we display n/a in the buy table*/
     .largeStandardBuyTitleBox {
        min-height: 120px;
        line-height:120px;
        height:120px;
        border-top: solid 1px #000000;
        border-left: solid 1px #000000;
        text-align:center;
        position:relative;
     }
     /*content within the large box see above.*/
     .largeStandardBuyTitleBox div
     {
       vertical-align: middle;
        display: inline-block;
        font-weight:bold;
        color:#555;
      
           
     }
     /*Any image content within the large box see above (NOT CURRENTLY USED)*/
     .largeStandardBuyTitleBox img
     {
       vertical-align: middle;
        display: inline-block;
       
           
     }
     
     /*Green price box, this is to highight the key price information on the buy page.*/ 
    .priceBuyBox {
        min-height: 30px;
        height:30px;
        line-height:30px;
        background-color: #2ECB71;
        text-align:center;
        position:relative;
         border-top: solid 1px #000000;
        border-left: solid 1px #000000;
    }
    /*content within the buy price box.*/
     .priceBuyBox div
     {
       vertical-align: middle;
        display: inline-block;
        /*transform: translate(-50%,-50%);*/
        color:#ffffff;
        font-weight:bold;
        
           
     }
     /*content within the content in the buy price box.*/
     .priceBuyBox div span
     {
      
        /*transform: translate(-50%,-50%);*/
        color:#ffffff;
        font-weight:bold;
           
     }

     /*add a bottom border*/
    .bottomBorder {
    
            border-bottom:1px solid #000000;
    
    }
    /*Bottom right curved border for the buy table*/
     .bottomBorderCurvedRight {
    
            border-bottom:1px solid #000000;
            border-right:1px solid #000000;
            border-bottom-right-radius: 1em;
        

    
    }
     /*Bottom left curved border for the buy table*/
      .bottomBorderCurvedLeft {
    
            border-bottom:1px solid #000000;
            border-left:1px solid #000000;
            border-bottom-left-radius: 1em;
       

    
    }
/*Add a right border*/
     .rightBorder {
    
            border-right:1px solid #000000;
    
    }
/*Add a top border*/
      .topBorder {
    
            border-top:1px solid #000000;
    
    }
/*Add a left border*/
       .leftBorder {
    
            border-left:1px solid #000000;
    
    }
/*Every other row should be displayed with a silvery background, use this class*/
    .silverBG {
    
        background-color:#F2F2F2;
    
    }

   
    
    .no-gutter > [class*='col-'] {
    padding-right:0;
    padding-left:0;
}

    


       
        /*Full screen display, here we hide and show certain content depending on the screen size.
          Non essential content must be hidden as the page being very wide and the content relating across
          so if displayed below wont make sense.
        */
        @media (min-width: 993px) {
            
            .smallscreenshow {
                display:none;
            }
            .smallscreenhide {
                display:block;
            }
             .cellFontSize {
                font-size:14px
            }
            .cellPaddingForMobile {
                padding-right:0; padding-left:0;
            }
             .listSellingPoints {
                font-size:14px;
                margin-top:5px;
            }

        }
        /*small screen version see comment for the full screen above.*/
        @media (max-width: 992px) and (min-width: 100px) {
             .smallscreenshow {
                display:block;
            }
            .smallscreenhide {
                display:none;
            }
            .cellFontSize {
                font-size:14px
            }
            .cellPaddnigForMobile {
            
                             
            }

            .listSellingPoints {
                font-size:8pt;
                margin-top:5px;
            }

        }



        /*Reduce cell font size depending on the screen size, this is important for the 
          bigger title boxes and the selling points, to stop them breaking out of
          their table cells.
        */
         @media (max-width: 1192px) and (min-width: 992px) {
            .cellFontSize {
                font-size:10px
            }

        }

          @media (max-width: 400px) and (min-width: 100px) {
            .cellFontSize {
                font-size:8px
            }

        }