/* CSS Document */

        * 
        {
           box-sizing: border-box;
        }
        body
        {
           background-color: black;
        }
        td
        {
           background-color: white;
        }
        .tdlogin
        {
           background-color:lightgrey;
        }
        input
        {
           border: 2px solid darkgray; border-radius: 5px;
        }
        textarea
        {
           background-color: white; border: 2px solid darkgray; border-radius: 5px;
        }
        
        /* For mobile phones: */
        [class*="col-"] 
        {
           width: 100%;       
           float: left;
           padding: 15px;
           background-color:lightgrey; border: 2px solid darkgray; border-radius: 5px;
        }
        .messageArea
        {
            height: 175px;  background-color: white; border: 2px solid white; border-radius: 5px;
        }
        .newMessageArea
        {
            background-color: white; border: 2px solid white; border-radius: 5px;
        }
        .sendbutton
        {
            background-color: white; border: 2px solid white; border-radius: 5px; font-weight: bold; font-size: 150%;
        }
        /* FOR DESKTOP */
        @media only screen and (min-width: 768px) 
        {
           .col-1 {width: 8.33%;background-color:lightgrey; border: 2px solid darkgray; border-radius: 5px;}
           .col-2 {width: 16.66%;background-color:lightgrey; border: 2px solid darkgray; border-radius: 5px;}
           .col-3 {width: 25%; background-color:lightgrey; border: 2px solid darkgray; border-radius: 5px;}
           .col-4 {width: 33.33%;background-color:lightgrey; border: 2px solid darkgray; border-radius: 5px;}
           .col-5 {width: 41.66%;background-color:lightgrey; border: 2px solid darkgray; border-radius: 5px;}
           .col-6 {width: 50%;background-color:lightgrey; border: 2px solid darkgray; border-radius: 5px;}
           .col-7 {width: 58.33%;background-color:lightgrey; border: 2px solid darkgray; border-radius: 5px;}
           .col-8 {width: 66.66%;background-color:lightgrey; border: 2px solid darkgray; border-radius: 5px;}
           .col-9 {width: 75%;background-color:lightgrey; border: 2px solid darkgray; border-radius: 5px;}
           .col-10 {width: 83.33%;background-color:lightgrey; border: 2px solid darkgray; border-radius: 5px;}
           .col-11 {width: 91.66%; background-color:lightgrey; border: 2px solid darkgray; border-radius: 5px;}
           .col-12 {width: 100%; background-color:lightgrey; border: 2px solid darkgray; border-radius: 5px;}           
           .messageArea {height: 380px;  background-color: white; border: 2px solid white; border-radius: 5px;}
           .co6hide { display: inline-block; width: 50%;background-color:lightgrey; border: 2px solid darkgray; border-radius: 5px;}        
        }  
        .row::after 
        {
           content: "";
           clear: both;
           display: table;
        }