<style type="text/css">

        /* main text font family */
        body{
        font-family: 'Inter', sans-serif;
        }

        html, body {
            min-height: 100vh;
        }

        /* headers font family */
        h1, h2, h3, h4, h5, h6 {
        font-family: 'Lexend',sans-serif;
        }

        /* navigation bar custom background color*/
        .navbar-custom {
            background-color: #003f61;
            font-size: 18px;
        }

        /* edge of the toggler icon */
        .custom-toggler.navbar-toggler {
        border-color: rgb(177,199,222);
        }

        /* contents of the toggler icon */
        .custom-toggler .navbar-toggler-icon {
        background-image: url("data:image/svg+xml;charset=utf8,%3Csvg viewBox='0 0 32 32' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath stroke='rgba(177,199,222, 1)' stroke-width='3' stroke-linecap='round' stroke-miterlimit='10' d='M4 8h24M4 16h24M4 24h24'/%3E%3C/svg%3E");
        }

        /* Default color of the links*/
        .navbar a {
                  text-align: left;
                  padding: 2px;
                  color: white;
                  text-decoration: none;
                  font-size: 20px;
                }

        /* Link color for dropdown */
        .dropdown-menu .dropdown-item {
        text-align: left;
        float: lower left;
        background-color: white;
        color: black;
        padding: 5px;
         font-size: 17px;
        }

        /* Color of the links on hover*/
        .nav-link:hover {
        color: rgb(106, 155, 221);
        }

        /* Logo size and positioning */
        .navbar-brand {
        position: relative;
        width: 150px;
        background-size: contain;
        }

        /* header colors */
        h1 {color: #003F61;}
        h2 {color: #6c9cd3;}
        h3 {color: #6c9cd3;}
        h4 {color: #6c9cd3;}
        h5 {color: #808080;}

        /* define custom button styles  with nabiheal primaries*/
        .button1 {background-color: #003F61;} /* Steel blue */
        .button2 {background-color: #6C9CD3;} /* Ice blue */
        .button3 {background-color: #F8BA9D;} /* Apricot */
        .button4 {background-color: #808080;} /* Grey */
        .button5 {background-color: #FFFFFF;} /* White */

        /* general button styling*/
        .button {border: none;
                  padding: 12px 30px;
                  text-align: center;
                  text-decoration: none;
                  display: inline-block;
                  font-size: 18px;
                  margin: 4px 20px;
                  cursor: pointer;
                  border-radius: 5px;
                  color:white;
                  width: 100%
                  white-space: nowrap
                }


        /* add scroll options to text areas */
        textarea {
        overflow-y: scroll;
        min-height:150px;
        }

        /* define required fields for forms */
        .required-field::before  {
          content: "*";
          color: #EF5E1A;
          float: left;
        }
        .required-field-right::before  {
          content: "*";
          color: #EF5E1A;
          float: right;
        }


        /* drag and drop box */
        .drop-zone {
            height: 200px;
            border: 2px dashed #B1C6DE;
            border-radius: 5px;
            display: flex;
            align-items: center;
            justify-content: center;
            flex-direction: column;
            margin: 10px auto;
            padding: 25px;
            display: flex;
            align-items: center;
            justify-content: center;
            text-align: center;
            font-family: "Quicksand", sans-serif;
            font-weight: 500;
            font-size: 20px;
            cursor: pointer;
            color: #cccccc;
        }

        /* drag and drop box when hovering files over*/
        .drop-zone--over {
        	border-style: solid;
        }

        /* input button on the drag and drop */
        input::file-selector-button {
          font-weight: bold;
          background-color: #cccccc;
          color: #ffffff;
          border: None;
          border-radius: 5px;
        }


        /* upload data button */
        .upload {
                  background-color:#6C9CD3;
                  font-size:18px;
                  border: none;
                  color: white;
                  padding: 6px 32px;
                  text-align: center;
                  text-decoration: none;
                  display: inline-block;
                  margin: 3px 1px;
                  border-radius: 5px;
                  cursor: pointer;
                  width: 100%;
                  margin: 0px 0px;
                }


        /* footer */
       #footer {
         margin-top: 11.5vh;
         position: relative;
         font-family: sans-serif;
         background-color: #003f61;
         color: white;
         display: grid;
         grid-template-columns: 2fr 0.9fr 1.2fr;
         grid-template-rows: 1.9fr;
         grid-template-areas:
         "logo  contact";
       }

       li {
         list-style: none;
         font-size: .9em;
       }

       .flex {
         display: flex;
       }

       #footer li a {
         color: #065299;
         text-decoration: none;
       }

       .logo {
         display: flex;
         flex-direction: column;
         justify-content: flex-start;
         grid-area: logo;
         padding-left: 1rem;
         padding-top: .5rem;
       }

       .img {
         padding-top: .5rem;
         width: 200px;
         height: 50px;
       }

        /* Tables */
        table {
          display: block; /* important */
          height: 600px;
          overflow-y: scroll;
        }

        .table th.fit {
            white-space: nowrap;
             width: 1%;
        }
        .table td.fit {
            white-space: nowrap;
             width:5%;
        }

        .data-table-toolbar {
            display: flex;
            flex-wrap: wrap;
            align-items: flex-end;
            justify-content: space-between;
            gap: 1rem;
            padding: 1rem;
            margin-bottom: 1rem;
            background: #f7fafc;
            border: 1px solid #dce6ef;
            border-radius: 10px;
        }

        .data-table-search-controls {
            display: grid;
            grid-template-columns: minmax(180px, 260px) minmax(260px, 1fr);
            gap: 1rem;
            flex: 1 1 560px;
        }

        .data-table-control label,
        .data-table-page-size label {
            display: block;
            margin-bottom: .35rem;
            color: #455a64;
            font-size: .85rem;
            font-weight: 700;
        }

        .data-table-actions {
            display: flex;
            flex-wrap: wrap;
            gap: .5rem;
        }

        .data-table-footer {
            display: flex;
            flex-wrap: wrap;
            align-items: flex-end;
            justify-content: space-between;
            gap: 1rem;
            padding: .85rem 1rem;
            margin: 1rem 0;
            background: #f7fafc;
            border: 1px solid #dce6ef;
            border-radius: 10px;
        }

        .data-table-page-size select {
            width: auto;
            min-width: 90px;
        }

        .data-table-pagination {
            display: flex;
            flex-wrap: wrap;
            align-items: center;
            justify-content: flex-end;
            gap: .65rem;
        }

        .data-table-status {
            min-width: 230px;
            color: #455a64;
            font-weight: 700;
            text-align: center;
        }

        @media (max-width: 767.98px) {
            .data-table-search-controls {
                grid-template-columns: 1fr;
                flex-basis: 100%;
            }

            .data-table-actions,
            .data-table-pagination {
                width: 100%;
            }

            .data-table-actions .btn,
            .data-table-pagination .btn {
                flex: 1;
            }

            .data-table-status {
                order: -1;
                width: 100%;
            }
        }
    </style>
