#inputSylwadauHoliadurBodlonrwydd {
      border: 1px solid grey;
      height: 8em;
      width: 57.2em;
      max-height: 8em;
      max-width: 57.2em;
      margin-bottom: 2em;
      border-color: #b3b3b3;
      border-radius: 0.5em;
      background-color: white;
      resize: none;
      /*overflow: scroll;*/
    }

    .sylwadauTeitlHoliadurBodlonrwydd {
      font-weight: bold;
    }

    #inputEbostHoliadurBodlonrwydd {
      width: 39em;
    }

    #bocsSerHoliadurBodlonrwydd {
      margin-bottom: 1em;
      margin-left: -0.5em;
    }

    #teitlBocsSerenHoliadurBodlonrwydd {
      margin-top: 5em;
    }

    #botwmAnfonHoliadurBodlonrwydd {
      width: 8em;
      padding-bottom: 2.2em;
      background-color: #753BAB;
    }

    #botwmAnfonHoliadurBodlonrwydd:hover {
      cursor: pointer;
    }

    /*#bocsAdborthHoliadurBodlonrwydd {
      background-color: #ebebeb;
      padding: 1em;
      margin-top: 1em;
      margin-bottom: 1em;
      height: 8em;
      border-radius: 0.5em;
    }*/

    #bocsAdborthHoliadurBodlonrwydd > p {
      background: #9762c9;
      width: 8em;
      text-align: center;
      padding-top: 0.5em;
      border-radius: 0.5em;
      margin-bottom: 1em;
      color: white;
      font-weight: bold;
    }
      
    .bocsGwallHoliadurBodlonrwydd {
      width: 40em !important;
    } 

    .negesGwallHoliadurBodlonrwydd, .negesGwallAdborthHoliadurBodlonrwydd {
      background-color: #ffb3b3;
      text-align: left;
      padding-top: 0.5em;
      border: 1px solid #ff3333;
      width: 45.5em;
      padding-left: 1em;
      margin-bottom: 1em;
      border-radius: 0.5em;
      color: white;
    }

    .negesGwallHoliadurBodlonrwydd p, .negesGwallAdborthHoliadurBodlonrwydd p {
      font-weight: bold;
    }

	.loader {
      border: 8px solid #e1e1e1; /* Cefndir */
      border-top: 8px solid #408627; /* Spinner */
      border-radius: 50%;
      width: 30px;
      height: 30px;
      animation: spin 2s linear infinite;
      -webkit-animation: spin 2s linear infinite;
      display: inline-block;
      margin-left: 1em;
      margin-bottom: -0.5em;
    }

    @keyframes spin {
      0% { transform: rotate(0deg); }
      100% { transform: rotate(360deg); }
    }

    @-webkit-keyframes spin {
      0% { -webkit-transform: rotate(0deg); }
      100% { -webkit-transform: rotate(360deg); }
    }

   
    /*
       RESPONSIVE CSS
    */


    @media only screen and (max-width: 660px) {
      
      #inputSylwadauHoliadurBodlonrwydd {
         display: block;
         width: 100%;
      }

      #inputEbostHoliadurBodlonrwydd {
         width: 100%;
      }

      .negesGwallHoliadurBodlonrwydd, .negesGwallAdborthHoliadurBodlonrwydd {
         width: 96%;
      }

    }

    @media only screen and (min-width: 661px) and  (max-width: 980px) {
       
      #inputSylwadauHoliadurBodlonrwydd {
         display: block;
         width: 100%;
      }

      #inputEbostHoliadurBodlonrwydd {
         width: 100%;
      }

      .negesGwallHoliadurBodlonrwydd, .negesGwallAdborthHoliadurBodlonrwydd {
         width: 98%;
      }

    }