{% load static %}
<!doctype html>
<html lang="en">
  <head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <title>IQProcess</title>
    <link rel="icon" type="image/x-icon" href="{% static 'assets/img/idllogo.png' %}">
    <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0-alpha1/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-GLhlTQ8iRABdZLl6O3oVMWSktQOp6b7In1Zl3/Jr59b6EGGoI1aFkw7cmDA6j6gD" crossorigin="anonymous">
    <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap-icons@1.10.3/font/bootstrap-icons.css">
    <link rel="stylesheet" href="//code.jquery.com/ui/1.13.2/themes/base/jquery-ui.css">
    <!-- Jquery CDN -->
    <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.6.0/jquery.min.js"></script>
    <script src="https://code.jquery.com/ui/1.13.2/jquery-ui.js"></script>
    <style>
        @font-face {
          font-family: quicksand;
          src: url("{% static 'assets/fonts/Quicksand-Bold.ttf' %}");
        }

        body {
          font-family: quicksand;
        }

        footer {
          text-align: center;
          background-color: #212529;
          color: white;
          height: 45px;
          position: fixed;
          bottom: 0px;
          width: 100vw;
        }

        .footer__links {
          color: white;
          text-decoration: none;
        }

        .footer__links:hover {
          color: white;
          padding-bottom: 3px;
          border-bottom: 2px solid white;
        }

        #sidebar {
          width: 130px;
          height: 100vh;
          position: fixed;
          background-color: #212529;
          color: white;
          transition: 1.5s;

        }
        .nav__hidden {
          margin-left: -130px;
        }

        #sidebar ul {
          list-style-type: none;
          margin-top: 20px;
        }

        .nav-lin {
          color: white;
          font-size: 18px;
          text-decoration: none;
        }

        .active__open {
          margin-left: 0px;
        }

        .active__move {
          margin-left: 130px;
        }

        .move__main {
          padding-left: 120px;
        }

        .stay__main {
          padding-left: 0px;
        }
        
        .btn, .shadowed__box {box-shadow: 0px 15px 15px rgba(0, 0, 0, 0.1);}

        .message__alerts {font-family: 'Franklin Gothic Medium', 'Arial Narrow', Arial, sans-serif ;font-size: 13px;transition: 2s;}
        .mobile__only {display:none; visibility:hidden;}

          @media only screen and (max-width: 992px) {
            #aside__panel {display:none; visibility:hidden;}
            .aside__form, #aside__form__panell {display:none; visibility:hidden;}
            main {padding-left: 5px;}
            .mobile__hidden {display: none;}
            .mobile__text {font-size: 10px;}
            .mobile__tab__heading {font-size: 11px;}
            p {font-size: 12px;}
            h3 {font-size: 18px;}
            h5 {font-size: 14px;}
            .mobile__only {display:block; visibility:visible;}
            .btn {font-size: 10px;margin:8px auto;}
            .sidebar__btn {display:none; visibility:hidden;}
          }
    </style>

  </head>
  <body>



    {% block base %}{% endblock %}
    <script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0-alpha1/dist/js/bootstrap.bundle.min.js" integrity="sha384-w76AqPfDkMBDXo30jS1Sgez6pr3x5MlQ1ZAGC+nuZB+EYdgRZgiwxhTBTkF7CXvN" crossorigin="anonymous"></script>

    
  </body>
</html>