Bug 31028: Add catalog concern management page to staff
[srvgit] / koha-tmpl / intranet-tmpl / prog / css / src / staff-global.scss
index 3e06728..e984030 100644 (file)
@@ -1,60 +1,66 @@
+@import "variables";
 @import "mixins";
 @import "tables";
 @import "flatpickr";
+@import "fonts";
 
 ::selection {
-    background: #538200;
+    background: $background-color-primary;
     color: #FFFFFF;
 }
 
-a {
-    &:link,
-    &:visited {
-        color: #004D99;
-        text-decoration: none;
+.btn-default,
+.btn-primary,
+.btn-success,
+.btn-info,
+.btn-warning,
+.btn-danger,
+button {
+    box-shadow: unset;
+    text-shadow: unset;
+}
+
+.page-section {
+    @include card;
+
+    & + .page-section {
+        margin-top: 1em;
     }
+}
 
+a {
     &:hover,
-    &:active {
-        color: #538200;
-        text-decoration: none;
+    &:active,
+    &:focus {
+        text-decoration: underline;
     }
 
     &:hover {
         .term {
-            color: #FF9090;
+            color: #000;
+            text-decoration: underline;
         }
     }
 
     &.authlink {
-        background-color: #e6f0f2;
+        background-color: #e3f1df;
         border-radius: 5px;
         display: inline-block;
         padding: 2px 4px;
     }
 
-    &.btn {
-        &:link,
-        &:visited {
-            color: #333333;
-        }
+    &.edit-patronimage {
+        color: #333;
+        background-color: #e6e6e6;
+        border-color: #adadad;
 
-        &.btn-link {
-            &:link,
-            &:visited {
-                color: #004D99;
-            }
-
-            &:hover {
-                color: #538200;
-            }
+        &:hover{
+            text-decoration: none;
+            color: #333;
+            background-color: #dadada;
         }
     }
 
-    &.cancel {
-        padding-left: 1em;
-    }
-
     &.cartRemove {
         color: #CC3333;
         font-size: 90%;
@@ -63,17 +69,53 @@ a {
     }
 
     &.clear_date {
-        color: #C33;
+        color: $warning-text-color;
         font-size: 130%;
+        vertical-align: middle;
 
         &:hover {
-            color: #FF9090;
+            color: lighten( $warning-text-color, 35% );
+            text-decoration: none;
         }
     }
 
-    &.close {
+    &.settings {
+        i, img {
+            text-align: center;
+            color: $green-text-color;
+            border: solid 3px $background-color-secondary;
+            border-radius: 50%;
+            background-color: transparent;
+            width: 40px;
+            height: 40px;
+            margin-bottom: 5px;
+            margin-left: auto;
+            margin-right: auto;
+            padding: 5px;
+            align-items: center;
+            justify-content: center;
+            box-sizing: content-box;
+            display: flex;
+
+        }
+
         &:hover {
-            color: #538200;
+            color: $green-text-color;
+            text-decoration: none;
+            font-weight: bold;
+
+            i, img {
+                border-color: $background-color-primary;
+                background-color: transparent;
+                color: $green-text-color;
+            }
+
+        }
+
+        img {
+            max-width: 30px;
+            height: auto;
+            padding: 10px;
         }
     }
 
@@ -137,13 +179,22 @@ a {
     &.xml {
         background-image: url("../img/famfamfam/silk/page_white_code.png");
     }
+}
 
+
+#resetZ3950Search {
+    font-size: 110%;
+    color: $green-text-color;
 }
-a.ctrl_link {
-    display: inline-block;
-    padding-right: 1rem;
+
+a {
+    .ctrl_link {
+        display: inline-block;
+        padding-right: 1rem;
+    }
 }
 
+
 aside {
     h5 {
         font-size: 100%;
@@ -160,9 +211,9 @@ aside {
             }
 
             fieldset {
-                border-width: 1px;
+                border-left: 2px solid #CCC;
                 border-radius: 0;
-                margin: 0 0 .5em 0;
+                margin: .5em 0;
                 padding: .5em;
 
                 legend {
@@ -171,20 +222,27 @@ aside {
                 }
 
                 &.action {
+                    border: 0;
                     margin-left: 0;
                     padding: .5em 0;
                 }
             }
 
-            input, select {
+            input[type="text"],
+            select {
                 height: calc(1.5em + .75rem + 2px);
             }
 
             label {
+                color: #696969;
+                display: block;
                 margin: .5em 0 0 0;
             }
 
             li {
+                margin-top: 0;
+                padding: 0;
+
                 &.checkbox {
                     label {
                         display: inline;
@@ -246,12 +304,111 @@ aside {
     }
 }
 
-button {
-    @include default-button;
+#menu, #navmenulist {
+    background-color: #e6e6e6;
+    display: block;
+    padding: 1em 0 1em 0;
 
-    &:active {
-        border: 1px inset #999999;
+    h5 {
+        padding-left: .5em;
+        color: #666;
+        font-weight: bold;
+        font-size: 1.3em;
+        margin-top: 0;
+    }
+
+    ul {
+        margin-bottom: 10px;
+        padding-left: 0;
+
+        ul {
+            font-size: 75%;
+        }
+
+        li {
+            list-style: none;
+
+            a {
+                border-left: 5px solid #E6E6E6;
+                color: #000;
+                display: block;
+                text-decoration: none;
+                padding: .7em .3em .7em 1.2em;
+            }
+
+            &.active > a,
+            a:hover,
+            a.current {
+                background-color: #F3F4F4;
+                text-decoration: none;
+                color: $green-text-color;
+                border-left: solid 5px $background-color-primary;
+                font-weight: bold;
+            }
+
+            a:hover {
+                border-left: solid 5px $background-color-secondary;
+                font-weight: normal;
+            }
+
+            &.active > a:hover {
+                border-left: solid 5px $background-color-primary;
+                font-weight: bold;
+            }
+        }
+    }
+}
+
+#admin_preferences #menu{
+
+    ul {
+
+        ul {
+            background-color: #f3f4f4;
+            font-size: 85%;
+        }
+    }
+}
+
+div {
+    display: block;
+
+    &.mainmenu {
+        display: inline;
+    }
+
+
+    &.koha-mainpage {
+        display: flex;
+        align-items: center;
+        justify-content: center;
+    }
+
+    &.settings-links {
+        display: inline;
+
+        ul {
+            float: right;
+
+            li {
+                list-style-type: none;
+                margin-bottom: 0;
+                height: auto;
+                width: 150px;
+                padding: 5px 10px;
+
+                a,
+                a:visited,
+                a:link {
+                    color: #000;
+                }
+            }
+        }
     }
+}
+
+button {
+    @include default-button;
 
     &:disabled {
         @include disabled-button;
@@ -265,6 +422,14 @@ button {
     }
 }
 
+#add_to_patron_list_submit {
+    color: $green-text-color;
+
+    &:hover {
+        border: 0;
+    }
+}
+
 main {
     &::after {
         clear: both;
@@ -274,11 +439,12 @@ main {
 }
 
 body {
-    font-family: $font-main;
+    font-family: $font-family-sans-serif;
     font-size: 13px;
     line-height: 1.22;
     padding: 0 0 4em;
     text-align: left;
+    background-color: #F3F4F4;
 
     &.nobackdrop {
         .modal-backdrop {
@@ -335,34 +501,16 @@ h1 {
     font-weight: bold;
 }
 
-#logo {
-    background: transparent url("../img/koha-logo-medium.png") no-repeat 50% 50%;
-    border: 0 none;
-    margin: 2rem 1rem;
-    padding: 0;
-    width: 180px;
-
-    a {
-        border: 0;
-        cursor: pointer;
-        display: block;
-        height: 0 !important;
-        margin: 0;
-        overflow: hidden;
-        padding: 44px 0 0;
-        text-decoration: none;
-        width: 180px;
-    }
-}
-
 h2 {
-    font-size: 146.5%;
+    font-size: 150%;
     font-weight: bold;
+    color: #696969;
 }
 
 h3 {
     font-size: 131%;
     font-weight: bold;
+    color: #696969;
 }
 
 h4 {
@@ -372,7 +520,6 @@ h4 {
 
 h5 {
     font-size: 100%;
-    font-weight: bold;
 }
 
 h6 {
@@ -386,7 +533,7 @@ h3,
 h4,
 h5,
 h6 {
-    margin: .3em 0;
+    margin: .5em 0;
 }
 
 hr {
@@ -395,7 +542,13 @@ hr {
 }
 
 p {
-    margin: .5em 0;
+    margin: .7em 0;
+}
+
+#patron_search {
+    .address {
+        font-size: 100%;
+    }
 }
 
 strong {
@@ -420,45 +573,36 @@ cite {
 input,
 textarea {
     &:focus {
-        border-color: #538200;
+        border-color: $background-color-primary;
         border-radius: 4px;
     }
 }
 
 input {
-    &[type="checkbox"],
-    &[type="radio"] {
-        margin: 0;
-        vertical-align: middle;
+    &[type="submit"] {
+        @include primary-button;
+        padding: .5em 1em;
     }
 
-    &[type="submit"],
-    &[type="button"] {
-        &:active {
-            border: 1px inset #999999;
-        }
-    }
-
-    &[type="submit"],
     &[type="reset"],
     &[type="button"] {
         @include default-button;
-
-        &:active {
-            border: 1px inset #999999;
-        }
+        padding: .5em 1em;
 
         &:disabled {
             @include disabled-button;
         }
     }
 
-    &.submit {
-        @include default-button;
+    &[type="checkbox"],
+    &[type="radio"] {
+        height: unset;
+        margin: 3px 3px 0 5px;
+    }
 
-        &:active {
-            border: 1px inset #999999;
-        }
+    &.submit {
+        @include primary-button;
+        padding: .5em 1em;
 
         &:disabled {
             @include disabled-button;
@@ -480,18 +624,17 @@ label,
     max-width: inherit;
     padding: 0;
     vertical-align: middle;
+    white-space: normal;
 
     input {
         &[type="checkbox"],
-        &[type="radio"],
-        &[type="checkbox"],
         &[type="radio"] {
             margin-top: 0;
         }
     }
 
     &.circ_barcode {
-        display: inline-block;
+        display: block;
         font-size: 105%;
         font-weight: bold;
         margin-bottom: 1rem;
@@ -499,7 +642,7 @@ label,
     }
 
     &.required {
-        color: #C00;
+        color: $warning-text-color;
     }
 }
 
@@ -517,19 +660,11 @@ label,
     padding-top: 10px;
 }
 
-#navmenulist {
-    li {
-        border-bottom: 1px solid #EEE;
-        list-style: $nav-menu-bullet;
-        padding: .2em 0;
+#area-news, #area-userblock {
+    color: #696969;
 
-        a {
-            text-decoration: none;
-
-            &.current {
-                font-weight: bold;
-            }
-        }
+    h3{
+        background-color: #FFFFFF;
     }
 }
 
@@ -538,6 +673,12 @@ label,
     margin-top: 1em;
 }
 
+.main, main {
+    & > .row > div > aside {
+        margin-left: -15px;
+    }
+}
+
 #login_controls {
     padding: .4em .5em;
     position: absolute;
@@ -562,20 +703,6 @@ ul {
         }
     }
 
-    .toolbar {
-        padding-left: 0;
-
-        button {
-            font-family: $font-main;
-            padding-bottom: 2px;
-        }
-
-        li {
-            display: inline;
-            list-style: none;
-        }
-    }
-
     &.budget_hierarchy {
         margin-left: 0;
         padding-left: 0;
@@ -628,13 +755,6 @@ ol {
     }
 }
 
-
-.gradient {
-    background-image: linear-gradient(to bottom, rgb(230, 240, 242) 1%, rgb(255, 255, 255) 99%);
-    align-items: flex-start;
-    display: flex;
-}
-
 .cart-controls {
     border-top: 1px solid #E8E8E8;
     padding: 7px 0;
@@ -649,7 +769,7 @@ ol {
 
 .overdue,
 .debit {
-    color: #CC0000;
+    color: $warning-text-color;
     font-weight: bold;
 }
 
@@ -663,399 +783,110 @@ ol {
 }
 
 fieldset {
-    background-color: #F4F8F9;
-    border: 2px solid #B9D8D9;
-    border-radius: 5px;
-    margin: 1em 1em 1em 0;
-    padding: 1em;
-
     + fieldset {
         &.action {
-            padding-top: 20px;
+            margin-top: -1em;
         }
     }
 
     &.lastchecked {
-        border-bottom-left-radius: 0;
-        border-bottom-right-radius: 0;
-        border-bottom-width: 0;
         margin-bottom: 0;
         margin-right: 0;
     }
 
-    .standard {
-        background-color:#f4f8f9 !important;
+    &.standard {
+        background-color:#F4F8F9 !important;
     }
 
-    .contrast {
+    &.contrast {
         background-color:#F3F3F3 !important;
     }
 
     &.action {
         background-color: transparent;
         border: 0;
+        box-shadow: none;
         clear: both;
         float: none;
-        margin: .9em 0 0;
-        padding: .4em;
+        padding: 1rem;
         width: auto;
+
+        a {
+            &.cancel {
+                padding-left: 1em;
+            }
+        }
     }
 
     &.brief {
-        border: 2px solid #B9D8D9;
-
         div {
             &.hint {
                 margin-bottom: .4em;
             }
         }
 
-        label {
+        label,
+        span.label {
             display: block;
             font-weight: bold;
             padding: .3em 0;
+            text-align: left;
 
-            &.inline {
-                display: inline;
-                float: none;
-                margin-left: 1em;
-                width: auto;
-            }
-        }
-
-        li {
-            margin-top: 1em;
-
-            &:first-child {
-                margin-top: 0;
-            }
-
-            &[aria-disabled="true"] {
-                color: #999;
-            }
-
-            &.inline {
-                display: inline;
-                float: none;
-                margin-left: 1em;
-                width: auto;
-            }
-
-            &.radio,
-            &.checkbox {
-                label {
-                    display: inline;
-                }
-            }
-        }
-
-        ol,
-        li {
-            list-style-type: none;
-        }
-
-        span {
-            .label {
-                display: block;
-                font-weight: bold;
-                padding: .3em 0;
-                text-align: left;
-            }
-        }
-
-        .action {
-            margin-left: 1em;
-        }
-    }
-
-    &.rows {
-        border: 2px solid #B9D8D9;
-        border-width: 1px;
-        clear: left;
-        float: left;
-        font-size: 90%;
-        margin: .9em 0 0;
-        padding: 0;
-        width: 100%;
-
-        fieldset {
-            background-color: transparent;
-            border-width: 1px;
-            margin: 1em;
-            padding: .3em;
-
-            &.action {
-                padding: 1em;
-            }
-        }
-
-        &.inputnote {
-            clear: left;
-            float: left;
-            margin: 1em 0 0 11em;
-        }
-
-
-        &.left {
-            label {
-                text-align: left;
-                width: 8em;
-            }
-
-            li {
-                padding-bottom: .4em;
-            }
-
-            span {
-                label {
-                    text-align: left;
-                    width: 8em;
-                }
-            }
-        }
-
-        &.ui-accordion-content {
-            border-top-left-radius: 0;
-            border-top-right-radius: 0;
-            margin: 0;
-            padding: 0;
-            width: 100%;
-
-            table {
-                margin: 0;
-            }
-        }
-
-        &.unselected {
-            background-color: #FFFFFF;
-            border: 0;
-            border-width: 0;
-        }
-
-        caption {
-            font-size: 120%;
-        }
-
-        div {
-            &.hint {
-                font-size: 105%;
-                margin: .5rem 0;
-                margin-left: 10.5rem;
-            }
-        }
-
-        label {
-            float: left;
-            font-weight: bold;
-            margin-right: 1rem;
-            text-align: right;
-            width: 9rem;
-
-            &.error {
-                float: none;
-                margin-left: 1rem;
-                width: auto;
-            }
-
-            &.inline {
-                display: inline;
-                float: none;
-                margin-left: 1rem;
-            }
-
-            &.radio {
-                display: inline-block;
-                margin: 0 1rem 0 0;
-                padding: 0;
-                width: auto;
-            }
-
-            &.yesno {
-                float: none;
-                width: auto;
-            }
-        }
-
-        legend {
-            font-size: 110%;
-            font-weight: bold;
-            margin-left: 1em;
-        }
-
-        li {
-            clear: left;
-            float: left;
-            list-style-type: none;
-            padding-bottom: 1em;
-            width: 100%;
-
-            &[aria-disabled="true"] {
-                color: #999;
-            }
-
-            &.radio {
-                margin: 0;
-                padding-left: 9em;
-                width: auto;
-
-                input + label {
-                    margin-left: 0;
-                    padding-left: 0;
-                }
-
-                label {
-                    float: none;
-                    margin: 0 0 0 1em;
-                    width: auto;
-                }
-            }
-
-            input + label {
-                margin-left: 0;
-                padding-left: 0;
-            }
-
-            fieldset {
-                margin-left: 10em;
-
-                label {
-                    width: 6em;
-                }
-
-                li.radio {
-                    padding-left: 0;
-                }
-            }
-        }
-
-        ol {
-            list-style-type: none;
-            padding: 1em 1em 0;
-
-            &.radio {
-                label {
-                    float: none;
-                    margin-left: 20px;
-                    margin-right: 30px;
-                    padding-left: 0;
-                    vertical-align: middle;
-                    width: auto;
-
-                    &.radio {
-                        float: left;
-                        margin-right: 1em;
-                        margin-top: 0;
-                        width: 9em;
-                    }
-                }
-
-                input {
-                    &[type="checkbox"],
-                    &[type="radio"] {
-                        margin-left: -20px;
-                    }
-                }
-            }
-
-            table {
-                display: inline-block;
-                font-size: 105%;
-                margin: 0;
-            }
-        }
-
-        p {
-            margin: 1em 0 1em 1em;
-        }
-
-        span {
-            &.label {
-                float: left;
-                font-weight: bold;
-                margin-right: 1em;
-                text-align: right;
-                width: 9em;
-            }
-
-            &.hint {
-                font-size: 105%;
+            &.inline {
+                display: inline;
+                float: none;
+                margin-left: 1em;
+                width: auto;
             }
         }
 
-        table {
-            clear: both;
-            font-size: 105%;
-            margin: 1em 0 1em 1em;
+        li {
+            margin-top: .5em;
 
-            &.dataTable {
-                margin: 0;
+            &:first-child {
+                margin-top: 0;
             }
 
-            &.mceListBox {
-                margin: 0;
+            &[aria-disabled="true"] {
+                color: #999;
             }
-        }
 
-        td {
-            label {
+            &.inline {
+                display: inline;
                 float: none;
-                font-weight: normal;
+                margin-left: 1em;
                 width: auto;
             }
-        }
-
-        .inputnote {
-            clear: left;
-            float: left;
-            margin: 1em 0 0 11em;
-        }
 
-        + h3 {
-            clear: both;
-            padding-top: .5em;
-        }
-
-        .dataTables_wrapper {
-            label {
-                font-weight: 400;
-                width: unset;
+            &.radio,
+            &.checkbox {
+                label {
+                    display: inline;
+                }
             }
         }
 
-        .dropdown-menu {
-            li {
-                padding-bottom: 0;
-            }
+        ol,
+        li {
+            list-style-type: none;
+            padding-left: 0;
         }
 
-        .toptabs {
-            clear: both;
-            margin: 1em;
+        .action {
+            margin: 0;
+            padding: 1em 0 0 0;
         }
     }
-}
 
-#multi_receiving {
-    fieldset {
-        &.rows {
-            label {
-                width: 50%;
-            }
+
+    ol {
+        li {
+            list-style-type: none;
+            padding: .3em 0;
         }
     }
 }
 
-legend {
-    background-color: #FFFFFF;
-    border: 2px solid #B9D8D9;
-    border-radius: 3px;
-    font-size: 123.1%;
-    font-weight: bold;
-    margin-bottom: 0;
-    padding: .2em .5em;
-    width: auto;
-}
-
 details {
     > summary {
         cursor: pointer;
@@ -1092,8 +923,13 @@ details[open] {
     width: 150px;
 }
 
-#breadcrumbs {
-    background-color: #E6F0F2;
+#sub-header {
+    display: flex;
+    justify-content: space-between;
+}
+
+#breadcrumbs, #shortcut {
+    background-color: transparent;
     clear: both;
     margin: 0;
     padding: .8em .5em .8em 10px;
@@ -1105,6 +941,26 @@ details[open] {
     }
 }
 
+#breadcrumbs a[href="/cgi-bin/koha/mainpage.pl"] {
+    color: $green-text-color;
+    visibility: hidden;
+    font-size: 1px;
+    letter-spacing: -1px;
+
+    &::before {
+        content: "\f015";
+        font-family: "FontAwesome";
+        font-style: normal;
+        font-size: 14px;
+        visibility: visible;
+        padding-right: .3em;
+    }
+
+    &:hover {
+        text-decoration: none;
+    }
+}
+
 #header {
     + #breadcrumbs {
         margin-top: 1em;
@@ -1131,11 +987,10 @@ div {
     }
 
     .circmessage {
-        margin-bottom: .3em;
-        padding: 0 .4em .4em;
+        padding: .4em;
 
-        &:first-child {
-            margin-top: 1em;
+        .circmessage {
+            margin-bottom: .3em;
         }
     }
 
@@ -1154,14 +1009,13 @@ div {
     }
 
     &.note {
-        background: linear-gradient(to bottom, #F4F6FA 0%, #E8EDF6 100%); // W3C
-        border: 1px solid #BCBCBC;
+        background-color: #CFE2FF;
         margin: .5em 0;
         padding: .5em;
 
         i {
             &.fa-exclamation {
-                color: #CC0000;
+                color: $warning-text-color;
                 font-style: italic;
                 padding: 0 .3em;
             }
@@ -1183,16 +1037,15 @@ div {
 
     &.rule {
         background-color: #F4F8F9;
-        border: 2px solid #B9D8D9;
+        border: 2px solid #bfd9b9;
         border-radius: 5px;
         margin: .3em;
         padding: .3em;
     }
 
     &.lastchecked {
+        background-color: #FFF;
         border: 2px solid #BCDB89;
-        border-bottom-left-radius: 5px;
-        border-bottom-right-radius: 5px;
         padding: .2em 1em;
     }
 
@@ -1206,11 +1059,6 @@ div {
                 font-size: 80%;
             }
         }
-
-        input {
-            font-size: 90%;
-            padding: .2em .6em;
-        }
     }
 
     &.sysprefs {
@@ -1231,8 +1079,6 @@ div {
     }
 
     &.rows {
-        clear: left;
-        float: left;
         margin: 0;
         padding: 0;
         width: 100%;
@@ -1245,8 +1091,6 @@ div {
 
         li {
             border-bottom: 1px solid #EEE;
-            clear: left;
-            float: left;
             list-style-type: none;
             padding: .275em;
             width: 100%;
@@ -1269,12 +1113,14 @@ div {
 
         span {
             &.label {
-                float: left;
+                display: inline-block;
                 font-weight: bold;
                 margin-right: 1em;
                 padding-top: 0;
                 text-align: left;
+                vertical-align: top;
                 width: 9em;
+                white-space: normal;
             }
         }
     }
@@ -1320,90 +1166,6 @@ div {
     }
 }
 
-#header_search {
-    background-position: .5em .5em;
-    background-repeat: no-repeat;
-    float: left;
-    margin: .3em 0 .5em;
-
-    input {
-        &[type="submit"] {
-            border-radius: 3px;
-            padding: .2em .8em;
-        }
-    }
-
-    div {
-        &.residentsearch {
-            border: 0;
-            border-bottom: 1px solid #85CA11;
-            padding: 0 0 .2em;
-        }
-    }
-
-    ul {
-        &.ui-tabs-nav {
-            margin-left: 1em;
-            padding-top: 0;
-
-            li {
-                &.ui-state-default {
-                    background: transparent none;
-                    border: 0;
-                    top: 0;
-
-                    a {
-                        padding: .3em .6em;
-                    }
-                }
-
-                &.ui-tabs-active {
-                    background-color: #FFFFF1;
-                    border: 1px solid #85CA11;
-                    border-top-width: 0;
-                    top: -2px;
-
-                    a {
-                        text-decoration: none;
-                    }
-                }
-            }
-        }
-    }
-
-    .ui-corner-top {
-        border-radius: 0 0 4px 4px;
-    }
-
-    > div,
-    > ul {
-        display: none;
-
-        > li {
-            display: none;
-
-            &:first-of-type {
-                display: block;
-            }
-        }
-
-        &:first-of-type {
-            display: block;
-        }
-    }
-
-    .head-searchbox {
-        font-size: 1.3em;
-        width: 30em;
-    }
-}
-
-#reserves,
-#checkouts {
-    border: 1px solid #B9D8D9;
-    padding: 1em;
-}
-
 #sales {
     display: none;
 }
@@ -1431,44 +1193,6 @@ dd {
     padding: .2em .2em .2em 2.5em;
 }
 
-#toolbar,
-.btn-toolbar {
-    background-color: #EDF4F6;
-    border: 1px solid #E6F0F2;
-    border-radius: 5px 5px 0 0;
-    margin: 0;
-    padding: 5px;
-
-    .dropdown-menu {
-        border-top-width: 1px;
-        font-size: 13px;
-    }
-
-    &.floating {
-        border-radius: 0;
-        margin-top: 0;
-        z-index: 300;
-    }
-
-    a.addtocart {
-        display: block;
-    }
-
-    a.cartRemove {
-        padding: 6px 12px;
-        font-size: 12px;
-        display: none;
-    }
-
-    a.addtocart.incart {
-        display: none;
-    }
-
-    a.cartRemove.incart {
-        display: block;
-    }
-}
-
 #disabled {
     a {
         color: #999;
@@ -1487,61 +1211,56 @@ dd {
 
 
 .patroninfo {
-    margin-top: -.5em;
+    margin-right: .5em;
+    padding-top: 1em;
+    background-color: #e6e6e6;
+    color: #000;
+    left: -10px;
+    width: 100%;
+    padding-bottom: 25px;
 
     h5 {
-        border-right: 1px solid #B9D8D9;
         margin-bottom: 0;
-        padding-bottom: .5em;
-        padding-left: 0em;
-        padding-top: .5em;
+        padding: .5em .9em;
+        font-weight: bold;
+        color: #000;
 
         &:empty {
             border-right: 0;
         }
+
+        li {
+            &.patrondateofbirth {
+                font-size: 75%;
+                font-weight: normal;
+                list-style-type: none;
+                text-align: center;
+            }
+        }
     }
 
     ul {
         border: 0;
-        border-bottom: 0;
-        border-right: 1px solid #B9D8D9;
-        border-top: 0;
         margin: 0;
-        padding: 0;
+        padding: 0 .9em;
 
         li {
             list-style-type: none;
             margin: 0;
-        }
-    }
 
-    + #menu {
-        margin-right: 0;
+        }
     }
 
     > div {
-        border-right: 1px solid #B9D8D9;
         width: 100%;
     }
-
-    &.is-staff {
-        h5 {
-            background-color: #EEE;
-        }
-    }
 }
 
 .patroninfo-section {
-    padding: .5em;
-    margin: .5em;
-
-    .rows {
-        padding: .5em;
-    }
+    @include card;
 }
 
 .patroninfo-heading {
-    background-color: rgba(237, 244, 246, .4);
     padding: .5em;
     margin-bottom: .3em;
     clear: both;
@@ -1606,6 +1325,19 @@ dd {
     display: inline-block;
 }
 
+#addColumn, #delColumn{
+    color: $green-text-color;
+    padding: .3em;
+    border: none;
+    background-color: transparent;
+    box-shadow: none;
+    font-size: 100%;
+
+    &:hover{
+        text-decoration: underline;
+    }
+}
+
 .patronviews {
     border-right: 1px solid #000;
     border-top: 1px solid #000;
@@ -1623,27 +1355,24 @@ dd {
 }
 
 .dropdown-menu {
+    background-color: #F3F4F4;
+
     li {
         list-style-type: none;
-    }
-}
 
-.btn-toolbar {
-    fieldset {
-        &.action {
-            margin-top: 0;
-        }
-    }
+        a {
+            color: #000;
+            padding: .4em 20px;
 
-    .dropdown-menu {
-        font-size: 13px;
+            &:hover {
+                background-color: #DADADA;
+                background-image: none;
+                color: #000;
+                text-decoration: none;
+            }
+        }
     }
-}
 
-.rows {
-    .label {
-        white-space: normal;
-    }
 }
 
 .readonly,
@@ -1707,17 +1436,17 @@ input[type='text']:read-only:focus {
 }
 
 .error {
-    color: #CC0000;
+    color: $warning-text-color;
 }
 
 // Font Awesome icons
 i {
     &.error {
-        color: #CC0000;
+        color: $warning-text-color;
     }
 
     &.success {
-        color: #008000;
+        color: $green-text-color;
     }
 
     &.warn {
@@ -1726,11 +1455,15 @@ i {
 }
 
 .circ-setting {
-    font-size: 85%;
-    padding-top: .3em;
+    font-size: 95%;
+    padding: .3em 0;
 
     input {
         vertical-align: middle;
+
+        &.flatpickr-input {
+            max-width: 11em;
+        }
     }
 
     label {
@@ -1740,9 +1473,8 @@ i {
 }
 
 .circ-settings {
-    background-color: #F4F8F9;
+    border-top: 2px solid #EEE;
     border-radius: 0;
-    border-top: 2px solid #B9D8D9;
     display: none;
     margin-left: -1em;
     margin-right: -1em;
@@ -1751,7 +1483,22 @@ i {
 }
 
 #show-circ-settings {
-    margin-top: .5em;
+    display: inline;
+    position: relative;
+    right: 25px;
+    opacity: .5;
+
+    &:hover {
+        opacity: 1;
+    }
+
+    a {
+        color: rgb(105, 105, 105);
+
+        &:hover {
+            text-decoration: none;
+        }
+    }
 }
 
 .checkin-active-setting {
@@ -1791,13 +1538,12 @@ i {
     }
 }
 
-#circ_needsconfirmation {
-    margin: auto;
+#circmessages,
+#patron_messages {
+    @include card;
 }
 
 .dialog {
-    border: 1px solid #BCBCBC;
-    border-radius: 2px;
     margin: 1em auto;
     padding: .5em;
     text-align: center;
@@ -1813,9 +1559,7 @@ i {
     button,
     a.approve {
         background: #FFF none;
-        border: 1px outset #999999;
-        border-left-color: #666;
-        border-top-color: #666;
+        border: 1px solid #555;
         margin: .4em;
         padding: .4em;
         white-space: pre-line;
@@ -1838,9 +1582,8 @@ i {
 
     input {
         background-color: #FFFFFF;
-        border: 1px solid #BCBCBC;
         margin: .4em;
-        padding: .4em .4em .4em 25px;
+        padding: .4em;
 
         &:hover {
             background-color: #FFC;
@@ -1848,6 +1591,50 @@ i {
 
         &[type="submit"] {
             background: #FFF none;
+
+            &.approve {
+                background-color: #FEC32C;
+                color: #000;
+                border: 0;
+                background-image: none;
+                margin-top: 5px;
+
+                &:hover,
+                &:active,
+                &:focus {
+                    background-color: #fec22c9f;
+                }
+            }
+
+            &.deny {
+                background-color: transparent;
+                color: #696969;
+                border: #696969 double 1px;
+                margin-top: 5px;
+                margin-left: 5px;
+
+                display: inline-block;
+                margin-bottom: 0;
+                font-weight: normal;
+                text-align: center;
+                white-space: nowrap;
+                vertical-align: middle;
+                touch-action: manipulation;
+                cursor: pointer;
+                background-image: none;
+                padding: 6px 12px;
+                font-size: 12px;
+                line-height: 1.42857143;
+                border-radius: 4px;
+                user-select: none;
+
+                &:hover {
+                    font-weight: bold;
+                    background-color: #F1F1F1;
+                    border: #696969 double 1px;
+                    text-decoration: none;
+                }
+            }
         }
 
         &.flatpickr-input {
@@ -1879,8 +1666,7 @@ i {
     }
 
     &.message {
-        background: linear-gradient(to bottom, #FFFFFF 0%, #F4F6FA 2%, #EAEEF5 23%, #E8EDF6 94%, #CDDBF2 100%);
-        border: 1px solid #BCBCBC;
+        background-color: #CFE2FF;
         text-align: center;
 
         ul,
@@ -1896,8 +1682,7 @@ i {
 
     &.alert,
     &.error {
-        background: linear-gradient(to bottom, #FEF8D3 0%, #FFEC91 9%, #FFED87 89%, #F9DC00 100%);
-        border: 1px solid #E0C726;
+        background-color: rgb( 255, 237, 135 );
         color: inherit;
         text-align: center;
         text-shadow: none;
@@ -1922,9 +1707,10 @@ i {
 
 .approve,
 .success {
+    background-color: #FEC32C;
     i {
         &.fa {
-            color: #008000;
+            color: $green-text-color;
         }
     }
 }
@@ -1932,7 +1718,7 @@ i {
 .deny {
     i {
         &.fa {
-            color: #CC0000;
+            color: $warning-text-color;
         }
     }
 }
@@ -1973,57 +1759,10 @@ i {
     font-style: italic;
 }
 
-#menu {
-    border-right: 1px solid #B9D8D9;
-    margin-right: .5em;
-    padding-bottom: 2em;
-    padding-top: 1em;
-
-    li {
-        a {
-            background: linear-gradient(to bottom, #E8F0F6 0%, #E8F0F6 96%, #C1C1C1 100%);
-            border: 1px solid #B9D8D9;
-            border-bottom-left-radius: 5px;
-            border-top-left-radius: 5px;
-            display: block;
-            font-size: 111%;
-            margin: .5em 0;
-            margin-right: -1px;
-            padding: .4em .3em;
-            text-decoration: none;
-
-            &:hover {
-                background: linear-gradient(to bottom, #FAFAFA 0%, #FFFFFF 96%, #E6E6E6 97%, #CCCCCC 99%, #C1C1C1 100%);
-                border-bottom: 1px solid #85CA11;
-                border-left: 1px solid #85CA11;
-                border-top: 1px solid #85CA11;
-            }
-        }
-
-        &.active {
-            a {
-                background-color: #FFFFFF;
-                background-image: none;
-                border-bottom: 1px solid #85CA11;
-                border-left: 1px solid #85CA11;
-                border-right: 0;
-                border-top: 1px solid #85CA11;
-                color: #000000;
-                font-weight: bold;
-
-                &:hover {
-                    background-color: #FFFFFF;
-                    color: #538200;
-                }
-            }
-        }
-    }
-
-    ul {
-        li {
-            list-style-type: none;
-        }
-    }
+// style for bundled detail in catalogsearch
+.bundled {
+    display: block;
+    font-style: italic;
 }
 
 #closewindow {
@@ -2036,8 +1775,14 @@ i {
 }
 
 .barcode {
-    font-size: 200%;
+    font-size: 100%;
     vertical-align: middle;
+    font-style: italic;
+    width: 250px;
+    height: 30px;
+    padding-left: 5px;
+    padding-right: 30px;
+    border-radius: 0;
 }
 
 li {
@@ -2059,7 +1804,7 @@ li {
 }
 
 .empty {
-    color: #CCC;
+    color: #666;
 }
 
 .address {
@@ -2108,7 +1853,30 @@ li {
     }
 }
 
+#catalogue_stats_wrapper, #tbl_cash_register_stats_wrapper, #resulttable_wrapper, #numberpatternst_wrapper {
+    background-color: #FFFFFF;
+    margin-top: 20px;
+    box-shadow: 8px 8px 12px rgba(170, 170, 170, .356);
+    padding: 20px;
+}
+
 #searchresults {
+    background-color: #FFFFFF;
+    margin-top: 20px;
+    min-width: 100%;
+    width: fit-content;
+    padding: 20px;
+
+    fieldset {
+        box-shadow: none;
+    }
+
+    h3{
+        padding-bottom: .7em;
+        margin: 0;
+        color: #696969;
+    }
+
     td {
         ul {
             li {
@@ -2116,6 +1884,8 @@ li {
                 font-size: 90%;
                 list-style: url("../img/item-bullet.svg");
                 padding: .2em 0;
+                color: #000;
+                top: 100%;
 
                 &.result_itype_image {
                     list-style: none;
@@ -2145,6 +1915,8 @@ li {
     }
 
     table {
+        width: 100%;
+
         td {
             vertical-align: top;
         }
@@ -2172,19 +1944,43 @@ li {
             }
         }
     }
+
+    .dropdown-menu {
+        background-color: #FFFFFF;
+        color: #000;
+        height: fit-content;
+        top: 100%;
+
+        a {
+            color: #000;
+
+            &:hover {
+                background-image: none;
+                color: #000;
+                text-decoration: underline;
+                background-color: #FFFFFF;
+            }
+        }
+    }
 }
 
 .searchheader {
-    background-color: #E6F0F2;
-    border: 1px solid #B9D8D9;
-    border-radius: 5px 5px 0 0;
+    background-color: #f3f4f4;
+    box-shadow: 0 0 2px 1px rgba(0,0,0,.2);
     font-size: 80%;
-    margin: 0 0 .5em -1px;
-    padding: .4em 0 .4em 1em;
+    margin-top: .5em;
+    margin-bottom: .5em;
+    padding: 5px;
+    width: 100%;
+    color: #696969;
+    display: block;
 
     &.floating {
         border-radius: 0;
+        box-shadow: 0 0 2px 1px rgba(0,0,0,.4);
         margin-top: 0;
+        margin-bottom: 0;
+        z-index: 100;
     }
 
     .btn-group {
@@ -2213,15 +2009,41 @@ li {
     }
 }
 
+#patron_search_selected {
+    background-color: lighten( $background-color-primary, 60 );
+    border: 1px solid $background-color-primary;
+    border-color: lighten( $background-color-primary, 30 ) lighten( $background-color-primary, 50 ) lighten( $background-color-primary, 50 ) lighten( $background-color-primary, 30 );
+    border-radius: 3px;
+    color: #333;
+    display: inline-block;
+    font-size: 11px;
+    line-height: 1.5;
+    padding: 5px 10px;
+    text-align: center;
+    vertical-align: middle;
+    white-space: nowrap;
+}
+
+#clear-patron-selection {
+    display: inline-block;
+    margin-left: 1em;
+}
+
+.mini-inp {
+    height: 12px;
+    width: 30px;
+}
+
+
+
 #search-facets {
-    border: 1px solid #B9D8D9;
-    border-radius: 5px 5px 0 0;
+    background-color: #e6e6e6;
 
     h4 {
-        background-color: #E6F0F2;
-        border-bottom: 1px solid #B9D8D9;
-        border-radius: 5px 5px 0 0;
-        font-size: 90%;
+        background-color: $background-color-primary;
+        border-radius: 0 4px 0 0;
+        color: #FFFFFF;
+        font-size: 100%;
         margin: 0;
         padding: .4em .2em;
         text-align: center;
@@ -2229,7 +2051,7 @@ li {
 
     ul {
         margin: 0;
-        padding: .3em;
+        padding: 6px 12px;
 
         li {
             font-weight: bold;
@@ -2260,14 +2082,8 @@ li {
     text-align: center;
 }
 
-.custom_cover_image {
-    img {
-        max-width: 140px;
-    }
-}
-
 #biblio-cover-slider {
-    border: 1px solid #b9d8d9;
+    border: 1px solid #bfd9b9;
     border-radius: 3px;
     margin: 5px;
     padding: 10px 5px 5px 5px;
@@ -2293,6 +2109,9 @@ li {
 }
 
 td {
+    &.actions {
+        white-space: nowrap;
+    }
     &.bookcoverimg {
         background: #FFF url("../img/spinner-small.gif") center center no-repeat;
         min-width: 120px;
@@ -2318,6 +2137,21 @@ td {
     }
 }
 
+.highlight_toggle {
+    color: $green-text-color;
+    padding: .3em;
+    border: 0;
+    background-color: transparent;
+    border: 0;
+    box-shadow: none;
+    font-size: 100%;
+
+    &:hover {
+        text-decoration: underline;
+    }
+}
+
+
 .cover-image {
     display: none;
 
@@ -2327,6 +2161,12 @@ td {
     }
 }
 
+.custom_cover_image {
+    img {
+        max-width: 140px;
+    }
+}
+
 .cover-nav {
     display: inline-block;
     padding: 3px 4px;
@@ -2346,6 +2186,7 @@ td {
 #CheckPending {
     font-weight: normal;
     margin: 0 .5em 0 0;
+    color: $green-text-color;
 }
 
 .lost,
@@ -2355,6 +2196,14 @@ td {
     display: block;
 }
 
+.bundled {
+    display: block;
+}
+
+td.bundle {
+    background-color: #FFC !important;
+}
+
 .datedue {
     color: #999;
     display: block;
@@ -2461,10 +2310,9 @@ td {
 }
 
 #cartDetails {
-    background-color: #FFFFFF;
-    border: 1px solid #739ACF;
+    background-color: #352C2E;
     box-shadow: 1px 1px 3px 0 #666;
-    color: #000;
+    color: #FFFFFF;
     display: none;
     margin: 0;
     padding: 10px;
@@ -2474,11 +2322,9 @@ td {
 }
 
 #cartmenulink {
-    padding-left: 15px;
-
-    i.fa.fa-shopping-cart {
-        padding-right: 7px;
-    }
+    position: relative;
+    left: 0;
+    top: 0;
 }
 
 #basketcount {
@@ -2497,7 +2343,6 @@ td {
 .results_summary {
     color: #202020;
     display: block;
-    font-size: 85%;
     padding: 0 0 .5em;
 
     a {
@@ -2523,21 +2368,20 @@ td {
 
     a,
     span {
-        background-color: #E4ECF5;
-        border: 1px solid #A4BEDD;
+        background-color: lighten( $background-color-secondary, 50 );
+        border: 1px solid lighten( $background-color-secondary, 15 );
         border-radius: 4px;
         font-weight: bold;
         padding: .1em .4em;
         text-decoration: none;
 
         &:hover {
-            background-color: #EBEFF7;
+            background-color: lighten( $background-color-secondary, 40 )
         }
     }
 }
 
 .container {
-    border: 1px solid #EEE;
     margin: 1em 0;
     padding: 1em;
 }
@@ -2572,16 +2416,6 @@ td {
     margin-left: 20px;
     padding: 10px;
 
-    fieldset {
-        &.rows {
-            li {
-                label {
-                    width: 16em;
-                }
-            }
-        }
-    }
-
     .importing {
         background: none;
         padding: inherit;
@@ -2589,16 +2423,6 @@ td {
 }
 
 .form_import {
-    fieldset {
-        &.rows {
-            li {
-                label {
-                    width: auto;
-                }
-            }
-        }
-    }
-
     .input_import {
         border: 1px solid #BCBCBC;
     }
@@ -2629,7 +2453,7 @@ td {
 }
 
 .advsearch {
-    margin: 0;
+    margin: 0 1em 1em 0;
 
     table {
         border-collapse: separate;
@@ -2643,6 +2467,10 @@ td {
     }
 }
 
+#advsearches {
+    margin-bottom: 1em;
+}
+
 #circ_circulation_issue {
     position: relative;
 }
@@ -2672,12 +2500,13 @@ td {
         text-shadow: 0 -1px 0 #666;
 
         &:hover {
-            color: #CC0000;
+            color: $warning-text-color;
         }
     }
 }
 
-#printclearscreen {
+#printclearscreen,
+#printclearscreenq {
     position: absolute;
     right: 43px;
     top: 0;
@@ -2694,7 +2523,7 @@ td {
         text-shadow: 0 -1px 0 #666;
 
         &:hover {
-            color: #CC0000;
+            color: $warning-text-color;
         }
     }
 }
@@ -2714,28 +2543,23 @@ td {
 }
 
 #acqui_order_supplierlist {
-    > div {
-        &.supplier {
-            border: 1px solid #EEEEEE;
-            margin: .5em;
-            padding: 1em;
+    .supplier {
+        &+.supplier {
+            border-top: 1px solid #EEEEEE;
+            margin-top: 1em;
         }
+    }
 
-        > div {
-            > .baskets {
-                margin-top: .5em;
-            }
-        }
+    .suppliername {
+        display: inline-block;
+        margin: .5em 1em .5em 0;
 
-        > span {
-            &.action {
-                margin-left: 5em;
-            }
+        &.inactive {
+            color: #888;
 
-            &.suppliername {
-                display: inline;
-                font-size: 1.7em;
-                margin-bottom: .5em;
+            a:link,
+            a:visited {
+                color: #888;
             }
         }
     }
@@ -2752,13 +2576,14 @@ td {
 // Override core jQueryUI widgets
 .ui-widget-content {
     background: #FFFFFF none;
-    border: 1px solid #B9D8D9;
+    border-radius: 4px;
+    border: 3px solid $background-color-primary;
     color: #222222;
 }
 
 .ui-widget-header {
-    background: #E6F0F2 none;
-    border: 1px solid #B9D8D9;
+    background: #b5dbad none;
+    border: 1px solid #bfd9b9;
     color: #222222;
     font-weight: bold;
 }
@@ -2766,8 +2591,7 @@ td {
 .ui-state-default,
 .ui-widget-content .ui-state-default,
 .ui-widget-header .ui-state-default {
-    background: #F4F8F9 none;
-    border: 1px solid #B9D8D9;
+    border: 1px solid #bfd9b9;
     color: #555555;
     font-weight: normal;
 }
@@ -2778,21 +2602,12 @@ td {
 .ui-state-focus,
 .ui-widget-content .ui-state-focus,
 .ui-widget-header .ui-state-focus {
-    background: #E6F0F2 none;
-    border: 1px solid #B9D8D9;
+    background: #cad8c6 none;
+    border: 1px solid #bfd9b9;
     color: #212121;
     font-weight: normal;
 }
 
-// .ui-state-active,
-// .ui-widget-content .ui-state-active,
-// .ui-widget-header .ui-state-active {
-//     background: #FFFFFF none;
-//     border: 1px solid #AAAAAA;
-//     color: #212121;
-//     font-weight: normal;
-// }
-
 .ui-state-highlight,
 .ui-widget-content .ui-state-highlight,
 .ui-widget-header .ui-state-highlight {
@@ -2814,6 +2629,7 @@ td {
     box-shadow: 2px 2px 2px rgba(0, 0, 0, .3);
     cursor: default;
     position: absolute;
+    z-index: 2000;
 
     &.ui-menu {
         li {
@@ -2821,7 +2637,7 @@ td {
                 padding: 3px 1em 3px .4em;
 
                 &:hover {
-                    background: #E6F0F2 none;
+                    background: #e3f1df none;
                     color: #212121;
                     font-weight: normal;
                 }
@@ -2837,6 +2653,9 @@ td {
 
                 .ui-state-active,
                 .ui-state-focus {
+                    background: #e3f1df none;
+                    color: #212121;
+                    font-weight: normal;
                     margin: 0;
                 }
             }
@@ -2868,179 +2687,78 @@ td {
     &.ui-widget-header {
         background: none;
         border: 0;
+        padding: .2em .9em 0 .9em;
     }
 }
 
 .ui-tabs {
-    .ui-tabs-nav {
-        li {
-            background: #E6F0F2 none;
-            border: 1px solid #B9D8D9;
-            margin-right: .4em;
-            top: 1px;
-
-            &.ui-tabs-active {
-                background-color: #FFFFFF;
-                border: 1px solid #B9D8D9;
-                border-bottom-width: 0;
-
-                a {
-                    color: #000;
-                    font-weight: bold;
-                }
-
-                &.ui-state-hover {
-                    background: #FFF none;
-                }
-            }
-
-            &.ui-state-default {
-                &.ui-state-hover {
-                    background: #EDF4F5 none;
-                }
-            }
-        }
-    }
-
     .ui-tabs-panel {
-        border: 1px solid #B9D8D9;
-    }
-
-    &.ui-widget-content {
-        background: transparent none;
-        border: 0;
-    }
-
-    .ui-state-default {
-        a {
-            color: #004D99;
-
-            &:link,
-            &:visited {
-                color: #004D99;
-            }
-        }
-    }
-
-    .ui-state-hover {
-        a {
-            color: #538200;
+        background: #FFF none;
+        border-radius: 4px;
+        border: 2px solid $background-color-primary;
 
-            &:link,
-            &:visited {
-                color: #538200;
-            }
+        fieldset {
+            box-shadow: none;
         }
     }
-
-}
-
-.ui-widget {
-    font-family: inherit;
-    font-size: inherit;
-
-    input,
-    select,
-    textarea,
-    button {
-        font-family: inherit;
-        font-size: inherit;
-    }
-}
-
-.statictabs {
-    > ul {
-        background: none repeat scroll 0 0 transparent;
-        border: 0 none;
-        border-bottom-left-radius: 4px;
-        border-bottom-right-radius: 4px;
-        border-top-left-radius: 4px;
-        border-top-right-radius: 4px;
-        color: #222222;
-        font-size: 100%;
-        font-weight: bold;
-        line-height: 1.3;
-        list-style: none outside none;
-        margin: 0;
-        outline: 0 none;
-        padding: .2em .2em 0;
-        text-decoration: none;
-
-        &::after {
-            clear: both;
-        }
-
-        &::before,
-        &::after {
-            content: "";
-            display: table;
-        }
-
+    .ui-tabs-nav {
         li {
-            background: none repeat scroll 0 0 #E6F0F2;
-            border: 1px solid #B9D8D9;
-            border-bottom: 0 none;
-            border-top-left-radius: 4px;
-            border-top-right-radius: 4px;
-            color: #555555;
-            float: left;
-            font-weight: normal;
-            list-style: none outside none;
-            margin-bottom: 0;
+            background: $background-color-secondary;
+            border: 0;
             margin-right: .4em;
-            padding: 0;
-            position: relative;
-            top: 1px;
-            white-space: nowrap;
+            border-radius: 4px 4px 0 0;
+
+            a {
+                color: #111;
+            }
 
-            &.active {
-                background-color: #FFFFFF;
-                color: #212121;
-                font-weight: normal;
-                padding-bottom: 1px;
+            &.ui-tabs-active, &.ui-state-hover {
+                background-color: $background-color-primary;
 
                 a {
-                    background: none repeat scroll 0 0 transparent;
-                    color: #000000;
-                    cursor: text;
-                    font-weight: bold;
-                    outline: 0 none;
-                    top: 1px;
+                    color: #fff;
                 }
             }
+        }
+    }
 
-            a {
-                color: #004D99;
-                cursor: pointer;
-                float: left;
-                padding: .5em 1em;
-                text-decoration: none;
+    &.ui-widget-content {
+        background: transparent none;
+        border: 0;
+    }
 
-                &:hover {
-                    background-color: #EDF4F5;
-                    border-top-left-radius: 4px;
-                    border-top-right-radius: 4px;
-                    color: #538200;
-                }
+
+    .ui-state-hover {
+        a {
+            color: $green-text-color;
+
+            &:link,
+            &:visited {
+                color: $green-text-color;
             }
         }
     }
 
-    .tabs-container {
-        background: none repeat scroll 0 0 transparent;
-        border: 1px solid #B9D8D9;
-        border-bottom-left-radius: 4px;
-        border-bottom-right-radius: 4px;
-        color: #222222;
-        display: block;
-        padding: 1em 1.4em;
+}
+
+.ui-widget {
+    font-family: inherit;
+
+    input,
+    select,
+    textarea,
+    button {
+        font-family: inherit;
     }
 }
 
 .toptabs {
-        .ui-tabs-panel {
-            background: #FFF none;
-        }
+    margin-top: 5px;
+}
+
+fieldset > .toptabs {
+    background-color: #F3F4F4;
+    padding: 1em;
 }
 
 .authref {
@@ -3107,7 +2825,7 @@ td {
     margin-bottom: 1em;
 
     a {
-        color: #069;
+        color: $green-text-color;
         font-weight: normal;
         text-decoration: underline;
 
@@ -3115,7 +2833,7 @@ td {
             &.jstree-hovered {
                 background: transparent none;
                 box-shadow: none;
-                color: #005580;
+                color: darken( $green-text-color, 5 );
             }
 
             &.jstree-clicked {
@@ -3142,7 +2860,7 @@ td {
 }
 
 .pluginname {
-    background-color: #E6F0F2;
+    background-color: #e3f1df;
     cursor: move;
     margin: .3em;
     padding-bottom: 4px;
@@ -3193,69 +2911,48 @@ video {
 }
 
 nav {
-    background: #E6F0F2 none;
     border: 0;
+    display: block;
 
     &.breadcrumb {
-        background-color: #E6F0F2;
-        clear: both;
+        background-color: transparent;
         margin: 0;
-        padding: .8em .5em .8em 10px;
-        position: relative;
 
         ol {
             margin: 0;
             padding-left: 0;
             list-style: none;
-        }
 
-        li {
-            display: inline;
+            li {
+                display: inline;
+                color : $green-text-color;
+                font-style: italic;
 
-            &+li::before {
-                background: transparent url("data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHdpZHRoPSIxNiIgaGVpZ2h0PSIxNiIgZmlsbD0iY3VycmVudENvbG9yIiBjbGFzcz0iYmkgYmktY2hldnJvbi1yaWdodCI+PHBhdGggZmlsbC1ydWxlPSJldmVub2RkIiBkPSJNNy4zNyAwbDUuMzUgNy4zYy4yLjIuMi41MSAwIC43bC01LjM4IDhoLTQuMmw1LjY0LTguMzVMMy4xMy4wMXoiLz48L3N2Zz4=") 50% 50% no-repeat;
-                background-size: 8px;
-                content: '';
-                display: inline-block;
-                height: .8em;
-                width: .8em;
-            }
+                &+li::before {
+                    background: transparent url("data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHdpZHRoPSIxNiIgaGVpZ2h0PSIxNiIgZmlsbD0iY3VycmVudENvbG9yIiBjbGFzcz0iYmkgYmktY2hldnJvbi1yaWdodCI+PHBhdGggZmlsbC1ydWxlPSJldmVub2RkIiBkPSJNNy4zNyAwbDUuMzUgNy4zYy4yLjIuMi41MSAwIC43bC01LjM4IDhoLTQuMmw1LjY0LTguMzVMMy4xMy4wMXoiLz48L3N2Zz4=") 50% 50% no-repeat;
+                    background-size: 8px;
+                    content: "";
+                    display: inline-block;
+                    height: .8em;
+                    width: .8em;
+                }
 
+                a:link, a:active, a:hover, a:focus {
+                    padding: .6em .3em;
+                }
+            }
         }
 
         [aria-current="page"] {
-            color: #000;
-            font-weight: 700;
+            color: #696969;
             text-decoration: none;
         }
     }
-
-
-}
-
-.navbar-collapse {
-    background: #E6F0F2 none;
-    box-shadow: none;
 }
 
-.navbar-nav {
-    li {
-        list-style: none;
-
-        &.open {
-            li {
-                a {
-                    font-weight: normal;
-                }
-            }
-        }
-
-        a {
-            font-weight: bold;
-            padding-bottom: .4em;
-            padding-top: .4em;
-        }
-    }
+.navbar {
+    background-color: #352C2E;
+    border: 0;
 }
 
 .nav .open > a,
@@ -3268,44 +2965,51 @@ nav {
 .nav > li > a:hover,
 .nav > li > a:focus {
     background-color: transparent;
-    text-decoration: none;
+    padding: .4em 15px;
+    color: #fff;
+    text-decoration: underline 2px;
 }
 
 .pagination {
-    margin:.5em .8em;
+    margin: .5em 0;
+}
 
-    .active {
-        a {
-            background-color: #5A9EAA;
-            border-color: #5A9EAA;
+button,
+.btn {
+    @include default-button;
 
-            &:hover,
-            &:focus {
-                background-color: #5A9EAA;
-                border-color: #5A9EAA;
-            }
-        }
+    &.btn-default {
+        color: #555;
+    }
 
-        span {
-            background-color: #5A9EAA;
-            border-color: #5A9EAA;
+    &.btn-link {
+        background: transparent none;
+        border: 0;
+    }
 
-            &:hover,
-            &:focus {
-                background-color: #5A9EAA;
-                border-color: #5A9EAA;
-            }
+    &.btn-primary {
+        @include primary-button;
+
+        &.dropdown-toggle {
+            border-left: 1px solid darken( saturate( $btn-primary, 15 ), 15 );
         }
     }
-}
 
-button,
-.btn {
-    border-color: #ADADAD #ADADAD #949494;
-    font-family: $font-main;
+    &.btn-danger {
+        background-color: #CC3333;
+        border-color: #9B2323;
+        color: #fff;
+    }
 
-    &.btn-link {
-        border: 0;
+    &.btn-danger:hover {
+        color: #fff;
+        background-color: #c82333;
+        border-color: #a81c29;
+    }
+
+    &.btn-danger:not( :disabled ):not( .disabled ).active,
+    &.btn-danger:not( :disabled ):not( .disabled ):active {
+        box-shadow: inset 0 0 0 1px #a81c29;
     }
 }
 
@@ -3318,8 +3022,12 @@ button,
 /* Bootstrap Collapse */
 
 .panel {
-    background: #F4F8F9 none;
+    background: #F7F9F6 none;
     box-shadow: none;
+
+    &:hover {
+        background: #E3F1DF none;
+    }
 }
 
 .panel-collapse {
@@ -3342,7 +3050,7 @@ button,
         }
 
         &:hover {
-            background: #e6f0f2 none;
+            background: #e3f1df none;
             border-bottom-left-radius: 0;
             border-bottom-right-radius: 0;
         }
@@ -3356,7 +3064,7 @@ button,
             }
 
             &:hover {
-                background: #e6f0f2 none;
+                background: #e3f1df none;
                 border-bottom-left-radius: 3px;
                 border-bottom-right-radius: 3px;
             }
@@ -3365,14 +3073,14 @@ button,
 }
 
 .panel-default {
-    border: 1px solid #B9D8D9;
+    border: 1px solid #bfd9b9;
     > .panel-heading {
         background: transparent none;
         padding: 0;
 
         + .panel-collapse {
             > .panel-body {
-                border-top-color: #B9D8D9;
+                border-top-color: #bfd9b9;
             }
         }
     }
@@ -3386,21 +3094,9 @@ button,
     }
 }
 
-#toolbar {
-    .dropdown-menu {
-        border-top-width: 1px;
-        font-size: 13px;
-    }
-
-    &.floating {
-        border-radius: 0;
-        margin-top: 0;
-    }
-}
-
 #changelanguage {
     background: #FFF none;
-    border-top: 1px solid #EEE;
+    border-top: 1px solid rgb(173, 173, 173);
     min-height: $language-footer-min-height;
 
     .dropdown-menu {
@@ -3424,18 +3120,14 @@ button,
     .navbar-nav {
         li {
             a {
+                color: $green-text-color;
                 line-height: 20px;
+                padding: .4em 15px;
             }
         }
     }
 }
 
-.loggedout {
-    color: #004D99;
-    font-weight: bold;
-    padding: .4em .2em;
-}
-
 .navbar-fixed-bottom {
     .navbar-inner {
         min-height: 0;
@@ -3478,7 +3170,7 @@ button,
 }
 
 .separator {
-    color: #666;
+    color: #bfbfbf;
     padding: 0 .2em;
 }
 
@@ -3539,29 +3231,33 @@ label {
     }
 }
 
-.modal-header {
-    .closebtn {
-        margin-top: 4px;
-    }
-}
-
 .closebtn {
     color: #000;
-    filter: alpha(opacity = 20);
+    cursor: pointer;
     float: right;
     font-size: 21px;
     font-weight: bold;
     line-height: 1;
-    opacity: .2;
-    text-shadow: 0 1px 0 #FFFFFF;
+    margin-top: 4px;
+    text-decoration: none;
+    text-shadow: 0 1px 0 rgba( 255, 255, 255, .4 );
 
-    &:hover,
-    &:focus {
+    &:focus,
+    &:hover {
+        text-shadow: 0 1px 0 rgba( 255, 255, 255, .6 );
+    }
+
+    &:active {
+        box-shadow: none;
+        text-shadow: 0 1px 0 rgba( 255, 255, 255, .9 );
+    }
+}
+
+.modal-header {
+    border-bottom: 1px solid $background-color-secondary;
+
+    h3 {
         color: #000;
-        cursor: pointer;
-        filter: alpha(opacity = 50);
-        opacity: .5;
-        text-decoration: none;
     }
 }
 
@@ -3571,7 +3267,7 @@ label {
 
     fieldset,
     ol {
-        background-color: transparent;
+        background-color: #FFF;
         border: 0;
         margin: 0;
         padding: 0;
@@ -3579,7 +3275,15 @@ label {
 }
 
 .modal-content {
-    background-color: #EDF4F6;
+    background-color: $background-color-modal;
+
+    fieldset {
+        box-shadow: none;
+    }
+}
+
+.modal-footer {
+    border-top: 1px solid $background-color-secondary;
 }
 
 .btn-group {
@@ -3587,12 +3291,20 @@ label {
     select {
         font-size: 13px;
     }
+
+    > .btn:first-child:not( :last-child ):not( .dropdown-toggle ) {
+        border-right: 1px solid darken( saturate( $btn-primary, 15 ), 15 );
+    }
 }
 
 .tooltip-inner {
     white-space: pre-wrap;
 }
 
+.wrapfix {
+    white-space: pre-wrap;
+}
+
 pre {
     background-color: transparent;
     border: 0;
@@ -3621,25 +3333,36 @@ code {
 }
 
 .tab-content {
-    background-color: #FFF;
-    border: 1px solid #B9D8D9;
-    border-top-width: 0;
+    background-color: #fff;
+    border: 0;
+    border-radius: 0;
     padding: 1em;
 }
 
 .nav-tabs {
+    border-bottom: 0;
+    padding: .2em 1.4em 0 0;
+
     > li {
+        margin-bottom: -2px;
+
         > a {
-            background-color: #e6f0f2;
-            border: 1px solid #b9d8d9;
-            border-radius: 4px 4px 0 0;
-            line-height: 1.42857143;
+            background-color: $background-color-primary;
+            border: 2px solid $background-color-primary;
+            border-bottom: 0;
+            border-radius: 0;
+            color: #FFF;
+            font-weight: bold;
+            line-height: 1.3;
             margin-right: .4em;
             padding: .5em 1em;
 
-            &:hover {
-                background-color: #EEF4F5;
-                border-color: #b9d8d9;
+            &:hover, &:focus, &:active {
+                background-color: $background-color-primary;
+                border: 2px solid $background-color-primary;
+                border-bottom: 0;
+                padding: .5em 1em;
+                text-decoration: none;
             }
         }
 
@@ -3647,12 +3370,11 @@ code {
             a,
             a:hover,
             a:focus {
-                background-color: #fff;
-                border: 1px solid #b9d8d9;
-                border-bottom-color: transparent;
-                color: #000;
+                background-color: #FFF;
+                border: 2px solid #FFF;
+                color: #111;
                 cursor: default;
-                font-weight: bold;
+                padding: .5em 1em;
             }
         }
     }
@@ -3705,7 +3427,7 @@ progress {
     }
 
     span {
-        background-color: #EBF3FF;
+        background-color: #ecffeb;
         border-radius: 5px;
         display: inline-block;
         font-size: 75%;
@@ -3714,7 +3436,7 @@ progress {
         white-space: nowrap;
 
         &.selected {
-            background-color: #CCE0FC;
+            background-color: #d2fad0;
         }
     }
 }
@@ -3730,13 +3452,6 @@ progress {
     }
 }
 
-// Class to be added to toolbar when it starts being fixed at the top of the screen
-
-.floating {
-    box-shadow: 0 3px 2px 0 rgba(0, 0, 0, .5);
-    z-index: 100;
-}
-
 .inline {
     display: inline;
 }
@@ -3774,8 +3489,8 @@ progress {
 }
 
 #browse-return-to-results {
-    background-color: #E8F0F6;
-    border: 1px solid #B9D8D9;
+    background-color: #e6e6e6;
+    border: 1px solid lighten($background-color-primary, 30%);
     border-bottom-width: 0;
     border-top-left-radius: 5px;
     border-top-right-radius: 5px;
@@ -3785,29 +3500,31 @@ progress {
 }
 
 .browse-button {
-    background-color: #FFF;
-    border: 1px solid #B9D8D9;
-    color: #004D99;
+    background-color: transparent;
+    border: 1px solid lighten($background-color-primary, 30%);
     display: block;
     overflow: hidden;
     padding: .4em .6em;
     text-align: center;
     white-space: nowrap;
     width: 100%;
+}
+
+a.browse-button {
+    color: $green-text-color;
 
     &:hover {
-        background: #FAFAFA;
+        background: #fff;
     }
 }
 
 span {
     &.browse-button {
-        background: #FAFAFA;
-        color: #222;
+        color: #999;
     }
 
     &.circ-hlt {
-        color: #CC0000;
+        color: $warning-text-color;
         font-weight: bold;
     }
 
@@ -3822,7 +3539,7 @@ span {
     }
 
     &.required {
-        color: #C00;
+        color: $warning-text-color;
         font-style: italic;
         margin-left: .5em;
     }
@@ -3910,7 +3627,7 @@ input.renew {
     margin-right: 1em;
 }
 
-.renewals {
+.renewals-info {
     display: block;
     font-size: .8em;
     padding: .5em;
@@ -3918,7 +3635,6 @@ input.renew {
 
 .date-select {
     label {
-        display: inline-block;
         width: 40%;
     }
 }
@@ -3963,7 +3679,7 @@ input.renew {
 }
 
 .onsite_checkout {
-    color: #CC0000;
+    color: $warning-text-color;
 }
 
 .onsite-checkout-only {
@@ -3974,7 +3690,7 @@ input.renew {
 
 .branchgriditem {
     background-color: #FFFFFF;
-    border: 1px solid #B9D8D9;
+    border: 1px solid #bfd9b9;
     border-radius: 3px;
     display: table-cell;
     float: left;
@@ -4001,7 +3717,7 @@ input.renew {
 
 #new_rule {
     background-color: #F4F8F9;
-    border: 2px solid #B9D8D9;
+    border: 2px solid #bfd9b9;
     border-radius: 5px;
     display: none;
     margin: .3em;
@@ -4061,18 +3777,8 @@ input.renew {
     }
 }
 
-#patron_search {
-    #filters {
-        display: none;
-    }
-
-    .address {
-        font-size: 100%;
-    }
-}
-
 #fixedlengthbuilderaction {
-    border: 3px solid #E6F0F2;
+    border: 3px solid #e3f1df;
     left: 80%;
     padding: 5px;
     position: relative;
@@ -4258,7 +3964,13 @@ input.renew {
     padding: 5px 7px;
     margin: 3px 0 3px 0;
     border-radius: 5px;
-    background-color: rgba(0, 0, 0, 0.1);
+    background-color: rgba(0, 0, 0, .1);
+}
+
+#restriction_form {
+    .type_input {
+        text-transform: uppercase;
+    }
 }
 
 #stage_list_headings {
@@ -4317,15 +4029,6 @@ input.renew {
     }
 }
 
-#payForm {
-    fieldset {
-        &.rows {
-            padding-left: 1em;
-            padding-right: 2em;
-        }
-    }
-}
-
 #helper {
     span {
         display: none;
@@ -4337,15 +4040,17 @@ input.renew {
 }
 
 .loggedin-menu-label {
-    color: #777;
+    color: #FFFFFF;
     font-size: 12px;
     line-height: 1.42857143;
     padding: 4px 12px;
     white-space: nowrap;
 
     span {
-        color: #000;
+        color: #FFFFFF;
         font-weight: bold;
+        left: 15px;
+        top: 0;
     }
 
     &.divider {
@@ -4353,73 +4058,37 @@ input.renew {
     }
 }
 
-.lastborrower {
-    background-color: #E6F0F2;
-    border: 1px solid #95C6D0;
-    box-shadow: 1px 1px 1px 0 #999;
-    color: #CC0000;
-    margin: .4em 0;
-    padding: .3em .5em .3em .5em;
-}
-
-#lastborrower-ref {
-    border-radius: 5px 0px 0px 5px;
-    float: left;
-}
-
-#lastborrower-remove {
-    border-radius: 0px 5px 5px 0px;
-    cursor: pointer;
-    float: right;
-}
-
-#lastborrower-window {
-    display: none;
-    position: absolute;
-    right: 5px;
-    top: 0px;
-}
-
 /* ==== MODULE LINKS - Start ==== */
 .buttons-list {
-    // List containing the module links
-    margin-bottom: 30px;
+    /* List containing the module links */
     padding: 0;
+    max-width: 260px;
 
     li {
-        // Standard attributes for the list elements
+        /* Standard attributes for the list elements */
         list-style-type: none;
+        margin-bottom: 15px;
 
         a {
-            &.circ-button {
-                // Class used for each module link
-                background-color: #F4F8F9;
-                background-position: 5px 3px;
-                background-repeat: no-repeat;
-                border: 2px solid #B9D8D9;
-                border-radius: 6px;
-                box-sizing: content-box;
-                color: #000000;
-                display: block;
-                font-size: 110%;
-                font-weight: bold;
-                margin: .5em 0;
-                max-width: 260px;
-                padding: 8px;
-                text-decoration: none;
+            padding: 10px;
+            background-color: #e0e0e0;
+            border-radius: 6px;
+            color: #101010;
+            display: block;
+            font-size: 110%;
+            font-weight: bold;
 
-                &:hover {
-                    // Class used for each module link hover state
-                    border-color: #538200;
-                    color: #538200;
-                }
+            &:hover {
+                background-color: $background-color-primary;
+                color: white;
+                text-decoration: none;
             }
         }
     }
 }
 
 .about h2 {
-    border-bottom: 1px solid #B9D8D9;
+    border-bottom: 1px solid #bfd9b9;
     padding: .5em .2em;
     margin:  .5em 0;
 }
@@ -4439,25 +4108,26 @@ input.renew {
     column-gap: 2em;
 }
 
-// ==== MODULE LINKS - End ====
+/* ==== MODULE LINKS - End ==== */
 
 #catalog-search-link {
-    border-right: 1px solid lighten( #E6F0F2, 15% );
+    border-right: 1px solid $background-color-primary;
     padding-right: .3em;
 }
 
+
 #catalog-search-dropdown {
     padding: 0;
 
     & > a {
-        border-left: 1px solid darken( #B4D2D8, 5% );
+        border-left: 1px solid darken( $green-text-color, 5% );
         margin-right: .6em;
         padding: .4em .6em;
 
         &:hover,
         &.catalog-search-dropdown-hover {
-            background-color: darken( #E6F0F2, 5% );
-            border-left: 1px solid darken( #B4D2D8, 15% );
+            background-color: darken( $background-color-primary, 5% );
+            border-left: 1px solid lighten( $green-text-color, 15% );
         }
     }
 }
@@ -4480,7 +4150,7 @@ input.renew {
         cursor: pointer;
 
         &:hover {
-            color: #004d99;
+            color: $green-text-color;
         }
     }
 }
@@ -4560,12 +4230,6 @@ input.renew {
     }
 }
 
-.header-menu-link {
-    display: none;
-    font-weight: bold;
-    padding: .4em .6em;
-}
-
 #user-menu {
     position: absolute;
     right: 5px;
@@ -4605,7 +4269,6 @@ div .suggestion_note {
 }
 
 .currentlibrary {
-    background-color: #E6FCB7;
     display: inline-block;
     padding: 2px 4px;
 }
@@ -4647,7 +4310,15 @@ div .suggestion_note {
 
     .result_item_details {
         display:inline-block;
-        white-space:nowrap
+        white-space:nowrap;
+
+        &::before {
+            content: "\2022";
+        }
+    }
+
+    .item-date-due {
+        display: block;
     }
 }
 
@@ -4671,6 +4342,15 @@ div .suggestion_note {
     }
 }
 
+#koha_version {
+    float: right;
+    margin: .5em;
+}
+
+@import "header";
+@import "toolbar";
+@import "forms";
+
 @media (min-width: 200px) {
 
 }
@@ -4701,7 +4381,7 @@ div .suggestion_note {
 
         .open {
             .dropdown-menu {
-                background-color: #FFF;
+                background-color: #352C2E;
                 border: 1px solid #ccc;
                 position: absolute;
             }
@@ -4709,8 +4389,7 @@ div .suggestion_note {
     }
 
     #header {
-        background-color: #FFF;
-        border: 1px solid #CCC;
+        background-color: #352C2E;
         margin-bottom: 1em;
 
         a {
@@ -4718,8 +4397,10 @@ div .suggestion_note {
             padding-left: 1.5em;
 
             &:hover {
-                background-color: #0070A9;
+                text-decoration: underline;
                 color: #FFF;
+                background-color: #352C2E;
+                background-image: none;
             }
         }
 
@@ -4728,7 +4409,7 @@ div .suggestion_note {
             box-shadow: unset;
             float: none;
             left: auto;
-            position: relative;
+            position: initial;
             right: auto;
 
             &.dropdown-menu {
@@ -4736,18 +4417,6 @@ div .suggestion_note {
             }
         }
 
-        .dropdown-menu {
-            li {
-                a {
-                    color: #004D99;
-
-                    &:hover {
-                        color: #FFF;
-                    }
-                }
-            }
-        }
-
         .dropdown-toggle {
             display: none;
         }
@@ -4758,10 +4427,6 @@ div .suggestion_note {
         flex-direction: column;
     }
 
-    #logo {
-        margin: 1rem;
-    }
-
     #marcPreview {
         margin: 0;
         width: auto;
@@ -4774,8 +4439,7 @@ div .suggestion_note {
     #user-menu {
         .open {
             .dropdown-menu {
-                background-color: #FFF;
-                border: 1px solid #ccc;
+                background-color: #352c35;
                 position: absolute;
             }
         }