a {
   cursor: pointer;
}

.space-4 {
   letter-spacing: 4px;
}

.txt-yellow {
   color: #FFC648 !important;
}

.txt-blue {
   color: #131428 !important;
}

.txt-14 {
   font-size: 14px;
}

.txt-gray-12 {
   font-size: 12px;
   color: gray;
}

.deco-none {
   text-decoration: none;
}

.btn {
   border-radius: 10px;
   width: 13em;
   padding: 8px;
   border-width: 2px;
   border-color: white;
   border: none;
}

.btn-custom {
    border-radius: 10px;
    width: 5em;
    padding: 8px;
    border-width: 2px;
    border-color: white;
    border: none;
}

   .btn.btn-submit {
      color: white;
      background-color: #131428;
   }

   .btn.btn-add {
      border-radius: 4px;
      width: 3em;
      padding: 5px;
      border-width: 1px;
      border-color: white;
      border: none;
      color: white;
      background-color: #131428;
   }

.btn.btn-edit {
    border-radius: 4px;
    width: 3em;
    padding: 5px;
    border-width: 1px;
    border-color: white;
    border: none;
    color: white;
    background-color: #131428;
}


   .btn.btn-search {
      border-radius: 4px;
      width: 3em;
      padding: 2px;
      border-width: 1px;
      border-color: white;
      border: none;
      color: white;
      background-color: #131428;
   }

   .btn.btn-view {
      border-radius: 4px;
      width: 12em;
      padding: 3px;
      border-width: 1px;
      border-color: white;
      border: none;
      color: white;
      background-color: lightcoral;
   }

   .btn.btn-save {
      border-radius: 4px;
      width: 12em;
      padding: 3px;
      border-width: 1px;
      border-color: white;
      border: none;
      color: white;
      background-color: #131428;
   }

   .btn.btn-delete {
      border-radius: 4px;
      width: 3em;
      padding: 3px;
      border-width: 1px;
      border-color: white;
      border: none;
      color: white;
      background-color: red;
   }


.icon {
   font-family: 'Material Symbols Outlined';
   display: inline-flex;
   vertical-align: text-bottom;
   font-style: normal;
   font-size: 24px;
   display: inline-block;
   line-height: 0;
   text-transform: none;
   letter-spacing: normal;
   word-wrap: normal;
   white-space: nowrap;
   direction: ltr;
}

   .icon.md-16 {
      font-size: 16px;
      line-height: 16px;
   }

   .icon.md-18 {
      font-size: 18px;
      line-height: 18px;
   }

   .icon.md-20 {
      font-size: 20px;
      line-height: 15px;
   }

   .icon.md-22 {
      font-size: 22px;
      line-height: 20px;
   }

   .icon.md-24 {
      font-size: 24px;
      line-height: 24px;
   }

   .icon.md-26 {
      font-size: 26px;
      line-height: 26px;
   }

   .icon.md-30 {
      font-size: 30px;
      line-height: 30px;
   }

   .icon.md-34 {
      font-size: 34px;
      line-height: 34px;
   }

   .icon.md-36 {
      font-size: 36px;
      line-height: 36px;
   }

   .icon.md-48 {
      font-size: 48px;
      line-height: 40px;
   }

   .icon.md-60 {
      font-size: 60px;
      line-height: 60px;
   }

   .icon.md-72 {
      font-size: 72px;
      line-height: 72px;
   }

   .icon.md-84 {
      font-size: 84px;
      line-height: 84px;
   }

   /* --------------------------- */
   /* icon colours */

   .icon.green {
      color: rgb(23,79,89);
   }

   .icon.red {
      color: rgb(89,33,23);
   }

   .icon.blue {
      color: rgb(23,46,89);
   }

   .icon.dark-grey {
      color: rgb(224,217,207);
   }

   .icon.light-grey {
      color: rgb(242,242,242);
   }

   .icon.white {
      color: white;
   }

   .icon.black {
      color: black;
   }

/* --------------------------- */
/* icon colours */