.draggable{
    cursor:grab;
  }
  
  #page-box{
    background-color:#666;
    margin:10px;
    padding:10px;
    border-radius: 7px; 
    display:flex;
    text-align:center;
    color:white;    
  }
  
  #page-box>div{
    width:50%;
  }
  
  #current-color-list{
    font-size:20;
    padding:0px; 
    margin:5px;
    margin-bottom:3px;
    font-weight:bold;
  }
   
  .info-box{
    background-color:#666;
    margin:5px;
    padding:5px;
    border-radius: 7px;      
  }
  
  .info-box>div{
    width:auto%;    
  }
  
  .info-section{
    background-color:#e3d7d4;
    border-radius: 10px;
    padding:2px; 
    margin:5px;
    font-size:20;
    display:flex;
    align-items: center;
    justify-content: center;    
  }
    
  #color-in-group{
    color:white;
    font-size:25;
  }
  #color-in-list{
    color:white;   
    font-size:25;    
  }
  
  .color-section{
    background-color:#2A2A2A;
    border-radius: 10px;
    padding:5px; 
    margin:20px;
    display:flex;
    justify-content: center;
    padding-bottom:4%;
  }
  
  .color-stripe{
    background-color:#e3d7d4;
    margin:10px;
    padding:10px;
    border-radius: 7px;
    height:250px;
    width:150px;   
  }
   
  #group-obj{    
    height:250px;   
  }
  
  .color-type{
    margin:5px;
    padding:5px;
    padding-top:7px;
    padding-bottom:7px;
    border: 2px solid #666;
    border-radius: 10px;
    width: 130px;
    text-align:center;
    color:black;
  }
  
  #Blue{
    background-color: #00ffff;
  }
  #Yellow{
    background-color: #ffff00;
  }
  #Green{
    background-color: #228b22;
  }
  #Orange{
    background-color: #ff8c00;
  }
  #Purple{
    background-color: #ba55d3;
  }
  #Red{
    background-color: #b03060;
  }