/* Import Open Sans from Google Fonts */
@import url('https://fonts.googleapis.com/css2?family=Open+Sans:wght@300;400&display=swap');

/* Base styling */
/*body {
    font-family: 'Open Sans', sans-serif;
    font-size: 16px;
    color: #333;
    background-color: #fff;
    margin: 0;
    padding: 0;
}*/
body {
    font-family: 'Open Sans', sans-serif;
    background-color: #FCFCFC;
    color: #000000;
    font-size: 14px;
    margin-top: 0px;
    padding-top: 0px;
}

th {
    background-color: #F4F4F4;
    text-align: center !important;
    vertical-align: bottom !important;
}

/* Base button structure */
.buton {
    padding: 6px 12px;
    border: none;
    border-radius: 4px;
    font-weight: bold;
    cursor: pointer;
    display: inline-block;
    text-align: center;
    text-decoration: none;
}
.header-logo-db {
    background-image: url('/img/header/header-logo-000.png'); /* Or whatever path you use */
    background-repeat: no-repeat;
    background-size: contain;
}

/* HEADER -----------------------------------------------------*/
.header-fg {
    color: #293CAB;
}

.header-bg {
    background-color: #6FBECB;
}

.header-db-bg {
    background-color: #28AFC5;
}

.header-format {
    padding-top: .5rem;
    padding-bottom: .5rem;
}

.header-logo {
    display: flex;
    flex-direction: column;
    padding-top: .5rem;
    padding-bottom: .5rem;
    padding-left: 18rem;
    font-family: 'OpenSansCondensedBold';
    color: white;
    background-image: url("../img/template/header-logo-000.png");
    background-position: 0 center;
    background-repeat: no-repeat;
    font-size: 2.5rem;
    font-weight: bold;
}

.header-logo-db {
    display: flex;
    flex-direction: column;
    padding-top: .5rem;
    padding-bottom: .5rem;
    padding-left: 18rem;
    font-family: 'OpenSansCondensedBold';
    color: white;
    background-image: url('/img/header/header-logo-000.png');
    background-position: 0 center;
    background-repeat: no-repeat;
    font-size: 2.5rem;
    font-weight: bold;
}

.header-text {
    display: flex;
    align-items: center;
}

.header-buttons {
    display: flex;
    flex-direction: row;
    font-family: 'Open Sans', sans-serif;
    font-weight: normal;
    padding: 0;
}

.message {
    display: flex;
    flex-grow: 9;
    align-items: center;
    justify-content: flex-start;
    font-size: 1.5rem;
    font-weight: normal;
    /*	background-color: red;*/
}

.buttons {
    display: flex;
    flex-grow: 1;
    align-items: center;
    justify-content: flex-end;
    /*	background-color: green;*/
}

.buton-close-r {
    position: sticky !important;
    top: 20px !important;
    right: 28px !important;
    margin-bottom: -5rem !important;
    z-index: 1500 !important;
}

.buton-crumbs {
    margin-right: 1rem;
}

.buton-header {
    color: white;
    background-color: transparent;
    border: 1;
    border-color: white !important;
}

    .buton-header:hover {
        color: #293CAB;
        background-color: white !important;
    }

    .buton-header:active {
        color: #293CAB;
        background-color: white !important;
        color: white !important;
    }

    .buton-header:visited {
        color: #293CAB;
        background-color: white !important;
        color: white !important;
    }

.buton-header-solid {
    color: white;
    background-color: transparent;
    border: 1;
    border-color: white !important;
}

    .buton-header-solid:hover {
        color: #293CAB;
        background-color: white;
    }

/*------ BUTONS ----------------------------------*/
/*------ SPECIALISED ----------------------------------*/
.buton-crm {
    font-family: 'Open Sans', sans-serif;
    color: black !important;
    background-color: rgba(245,255,250,1.00) !important;
}

.buton-threads {
    font-family: 'Open Sans', sans-serif;
    color: white !important;
    background-color: #337ab7 !important;
}

.buton-tomax {
    font-family: 'Open Sans', sans-serif;
    color: white !important;
    background-color: #293CAB !important;
}

    .buton-tomax:hover {
        color: lightgray !important;
    }

.buton-threads:hover {
    color: lightgray !important;
}

.buton-notes {
    font-family: 'Open Sans', sans-serif;
    color: white !important;
    background-color: darkgreen !important;
}

    .buton-notes:hover {
        color: lightgray !important;
    }
/* HEADER -----------------------------------------------------*/
/*------  MENU  -----------------------------------------------------*/
.caret {
    margin-left: .3rem;
}

.navbar-default {
    /*font-size: .9rem !important;*/
    background-color: white !important;
    margin-bottom: 0 !important;
    padding-bottom: 0 !important;
    margin-bottom: 2rem !important;
}

.navbar {
    min-height: 32px !important;
}

.navbar-collapse {
    margin-left: -15px !important;
}

.navbar-nav > li > .dropdown-menu {
    font-size: .9rem !important;
    min-width: 180px;
}

.navbar-nav > li > a {
    font-size: .9rem;
    margin-top: 10px !mportant;
    margin-bottom: 0 !important;
    padding-top: 4px !important;
    padding-bottom: 4px !important;
    /*
	padding-top: 5px !important;
	padding-bottom: 5px !important;
*/
}

    .navbar-nav > li > a:hover {
        background-color: #E4E4E4 !important;
    }

.dropdown-submenu {
    font-size: 1.3rem !important;
    position: relative;
}

    .dropdown-submenu > .dropdown-menu {
        top: 0;
        left: 100%;
        margin-top: -6px;
        margin-left: -1px;
        -webkit-border-radius: 0 6px 6px 6px;
        -moz-border-radius: 0 6px 6px;
        border-radius: 0 6px 6px 6px;
    }

    .dropdown-submenu:hover > .dropdown-menu {
        font-size: 1.3rem !important;
        display: block;
    }

    .dropdown-submenu > a:after {
        display: block;
        content: " ";
        float: right;
        width: 0;
        height: 0;
        border-color: transparent;
        border-style: solid;
        border-width: 5px 0 5px 5px;
        border-left-color: #ccc;
        margin-top: 5px;
        margin-right: -10px;
    }

    .dropdown-submenu:hover > a:after {
        border-left-color: #fff;
    }

    .dropdown-submenu.pull-left {
        float: none;
    }

        .dropdown-submenu.pull-left > .dropdown-menu {
            left: -100%;
            margin-left: 10px;
            -webkit-border-radius: 6px 0 6px 6px;
            -moz-border-radius: 6px 0 6px 6px;
            border-radius: 6px 0 6px 6px;
        }
/*------  MENU  -----------------------------------------------------*/

/* Color variations */
.buton-green  { background-color: #009933; color: #fff; }
.buton-red    { background-color: #c00;    color: #fff; }
.buton-blue   { background-color: #3366cc; color: #fff; }
.buton-orange { background-color: #f90;    color: #fff; }
.buton-grey   { background-color: #666;    color: #fff; }

/* Hover states */
.buton-green:hover  { background-color: #007a2a; }
.buton-red:hover    { background-color: #900; }
.buton-blue:hover   { background-color: #254b91; }
.buton-orange:hover { background-color: #cc7000; }
.buton-grey:hover   { background-color: #444; }


/* ===== ICP AdminSite Legacy Nav + Layout Enhancements ===== */
/* Please see documentation at https://docs.microsoft.com/aspnet/core/client-side/bundling-and-minification
for details on configuring this project to bundle and minify static web assets. */

a.navbar-brand {
  white-space: normal;
  text-align: center;
  word-break: break-all;
}

/* Provide sufficient contrast against white background */
a {
  color: #0366d6;
}

.btn-primary {
  color: #fff;
  background-color: #1b6ec2;
  border-color: #1861ac;
}

.nav-pills .nav-link.active, .nav-pills .show > .nav-link {
  color: #fff;
  background-color: #1b6ec2;
  border-color: #1861ac;
}

/* Sticky footer styles
-------------------------------------------------- */
html {
  font-size: 14px;
}
@media (min-width: 768px) {
  html {
    font-size: 16px;
  }
}

.border-top {
  border-top: 1px solid #e5e5e5;
}
.border-bottom {
  border-bottom: 1px solid #e5e5e5;
}

.box-shadow {
  box-shadow: 0 .25rem .75rem rgba(0, 0, 0, .05);
}

button.accept-policy {
  font-size: 1rem;
  line-height: inherit;
}

/* Sticky footer styles
-------------------------------------------------- */
html {
  position: relative;
  min-height: 100%;
}

body {
  /* Margin bottom by footer height */
  margin-bottom: 60px;
}
.footer {
  position: absolute;
  bottom: 0;
  width: 100%;
  white-space: nowrap;
  line-height: 60px; /* Vertically center the text there */
}

/* --- Enhanced Finance Column Styles --- */
.tr-finance-gross {
  background-color: rgba(240, 255, 250, 0.5);
}
.tr-finance-net {
  background-color: rgba(230, 250, 255, 0.5);
}
.tr-finance-vat {
  background-color: rgba(231, 214, 255, 0.4);
}

/* Hover effects for finance columns */
.tr-finance-gross:hover,
.tr-finance-net:hover,
.tr-finance-vat:hover {
  background-color: rgba(140, 180, 255, 0.2);
  cursor: pointer;
}

/* Legacy aliases for compatibility */
.tr-pc65 { @apply .tr-finance-gross; }
.tr-pc85 { @apply .tr-finance-net; }
.tr-pc90 { @apply .tr-finance-vat; }
/* TR PC -----------------------*/
.table > thead > tr > td.tr-pc00,
.table > tbody > tr > td.tr-pc00,
.table > tfoot > tr > td.tr-pc00,
.table > thead > tr > th.tr-pc00,
.table > tbody > tr > th.tr-pc00,
.table > tfoot > tr > th.tr-pc00,
.table > thead > tr.tr-pc00 > td,
.table > tbody > tr.tr-pc00 > td,
.table > tfoot > tr.tr-pc00 > td,
.table > thead > tr.tr-pc00 > th,
.table > tbody > tr.tr-pc00 > th,
.table > tfoot > tr.tr-pc00 > th,
.table > tfoot > tr.tr-pc00 > th {
    background-color: rgba(245,255,250,1.00);
}

.table-hover > tbody > tr > td.tr-pc00:hover,
.table-hover > tbody > tr > th.tr-pc00:hover,
.table-hover > tbody > tr.tr-pc00:hover > td,
.table-hover > tbody > tr:hover > .tr-pc00,
.table-hover > tbody > tr.tr-pc00:hover > th {
    background-color: rgba(207,255,231,.4);
}

.tr-pc00-bg {
    background-color: rgba(245,255,250,1.00) !important;
}
/* TR PC65*/
.table > thead > tr > td.tr-pc65,
.table > tbody > tr > td.tr-pc65,
.table > tfoot > tr > td.tr-pc65,
.table > thead > tr > th.tr-pc65,
.table > tbody > tr > th.tr-pc65,
.table > tfoot > tr > th.tr-pc65,
.table > thead > tr.tr-pc65 > td,
.table > tbody > tr.tr-pc65 > td,
.table > tfoot > tr.tr-pc65 > td,
.table > thead > tr.tr-pc65 > th,
.table > tbody > tr.tr-pc65 > th,
.table > tfoot > tr.tr-pc65 > th {
    background-color: rgba(234,254,255,1.00);
}

.table-hover > tbody > tr > td.tr-pc65:hover,
.table-hover > tbody > tr > th.tr-pc65:hover,
.table-hover > tbody > tr.tr-pc65:hover > td,
.table-hover > tbody > tr:hover > .tr-pc65,
.table-hover > tbody > tr.tr-pc65:hover > th {
    background-color: rgba(207,252,255,.6);
}

.tr-pc65-bg {
    background-color: rgba(234,254,255,1.00) !important;
}
/* TR PC65*/
/* TR PC85*/
.table > thead > tr > td.tr-pc85,
.table > tbody > tr > td.tr-pc85,
.table > tfoot > tr > td.tr-pc85,
.table > thead > tr > th.tr-pc85,
.table > tbody > tr > th.tr-pc85,
.table > tfoot > tr > th.tr-pc85,
.table > thead > tr.tr-pc85 > td,
.table > tbody > tr.tr-pc85 > td,
.table > tfoot > tr.tr-pc85 > td,
.table > thead > tr.tr-pc85 > th,
.table > tbody > tr.tr-pc85 > th,
.table > tfoot > tr.tr-pc85 > th {
    background-color: rgba(243,248,254,1.00);
}

.table-hover > tbody > tr > td.tr-pc85:hover,
.table-hover > tbody > tr > th.tr-pc85:hover,
.table-hover > tbody > tr.tr-pc85:hover > td,
.table-hover > tbody > tr:hover > .tr-pc85,
.table-hover > tbody > tr.tr-pc85:hover > th {
    background-color: rgba(208,227,251,.4);
}

.tr-pc85-bg {
    background-color: rgba(243,248,254,1.00) !important;
}

.table > thead > tr > td.tr-pc90,
.table > tbody > tr > td.tr-pc90,
.table > tfoot > tr > td.tr-pc90,
.table > thead > tr > th.tr-pc90,
.table > tbody > tr > th.tr-pc90,
.table > tfoot > tr > th.tr-pc90,
.table > thead > tr.tr-pc90 > td,
.table > tbody > tr.tr-pc90 > td,
.table > tfoot > tr.tr-pc90 > td,
.table > thead > tr.tr-pc90 > th,
.table > tbody > tr.tr-pc90 > th,
.table > tfoot > tr.tr-pc90 > th {
    background-color: rgba(247,242,255,1.00);
}

.table-hover > tbody > tr > td.tr-pc90:hover,
.table-hover > tbody > tr > th.tr-pc90:hover,
.table-hover > tbody > tr.tr-pc90:hover > td,
.table-hover > tbody > tr:hover > .tr-pc90,
.table-hover > tbody > tr.tr-pc90:hover > th {
    background-color: rgba(231,214,255,0.40);
}

.tr-pc90-bg {
    background-color: rgba(247,242,255,1.00) !important;
}

/* TABLES GENERAL */
.table > thead > tr > td.tr-pink,
.table > tbody > tr > td.tr-pink,
.table > tfoot > tr > td.tr-pink,
.table > thead > tr > th.tr-pink,
.table > tbody > tr > th.tr-pink,
.table > tfoot > tr > th.tr-pink,
.table > thead > tr.tr-pink > td,
.table > tbody > tr.tr-pink > td,
.table > tfoot > tr.tr-pink > td,
.table > thead > tr.tr-pink > th,
.table > tbody > tr.tr-pink > th,
.table > tfoot > tr.tr-pink > th {
    background-color: rgba(255,248,244,1.00);
}

.table-hover > tbody > tr > td.tr-pink:hover,
.table-hover > tbody > tr > th.tr-pink:hover,
.table-hover > tbody > tr.tr-pink:hover > td,
.table-hover > tbody > tr:hover > .tr-pink,
.table-hover > tbody > tr.tr-pink:hover > th {
    background-color: rgba(255,226,210,.5);
}

.table > thead > tr > td.tr-pink-dark,
.table > tbody > tr > td.tr-pink-dark,
.table > tfoot > tr > td.tr-pink-dark,
.table > thead > tr > th.tr-pink-dark,
.table > tbody > tr > th.tr-pink-dark,
.table > tfoot > tr > th.tr-pink-dark,
.table > thead > tr.tr-pink-dark > td,
.table > tbody > tr.tr-pink-dark > td,
.table > tfoot > tr.tr-pink-dark > td,
.table > thead > tr.tr-pink-dark > th,
.table > tbody > tr.tr-pink-dark > th,
.table > tfoot > tr.tr-pink-dark > th {
    background-color: rgba(255,206,178,1.00);
}

.table-hover > tbody > tr > td.tr-pink-dark:hover,
.table-hover > tbody > tr > th.tr-pink-dark:hover,
.table-hover > tbody > tr.tr-pink-dark:hover > td,
.table-hover > tbody > tr:hover > .tr-pink-dark,
.table-hover > tbody > tr.tr-pink-dark:hover > th {
    background-color: rgba(255,164,112,0.50);
}


.table > thead > tr > td.tr-green,
.table > tbody > tr > td.tr-green,
.table > tfoot > tr > td.tr-green,
.table > thead > tr > th.tr-green,
.table > tbody > tr > th.tr-green,
.table > tfoot > tr > th.tr-green,
.table > thead > tr.tr-green > td,
.table > tbody > tr.tr-green > td,
.table > tfoot > tr.tr-green > td,
.table > thead > tr.tr-green > th,
.table > tbody > tr.tr-green > th,
.table > tfoot > tr.tr-green > th {
    background-color: rgba(242,255,242,1.00);
}

.table-hover > tbody > tr > td.tr-green:hover,
.table-hover > tbody > tr > th.tr-green:hover,
.table-hover > tbody > tr.tr-green:hover > td,
.table-hover > tbody > tr:hover > .tr-green,
.table-hover > tbody > tr.tr-green:hover > th {
    background-color: rgba(199,255,199,.5);
}

.table > thead > tr > td.tr-white,
.table > tbody > tr > td.tr-white,
.table > tfoot > tr > td.tr-white,
.table > thead > tr > th.tr-white,
.table > tbody > tr > th.tr-white,
.table > tfoot > tr > th.tr-white,
.table > thead > tr.tr-white > td,
.table > tbody > tr.tr-white > td,
.table > tfoot > tr.tr-white > td,
.table > thead > tr.tr-white > th,
.table > tbody > tr.tr-white > th,
.table > tfoot > tr.tr-white > th {
    background-color: white;
}

.table-hover > tbody > tr > td.tr-white:hover,
.table-hover > tbody > tr > th.tr-white:hover,
.table-hover > tbody > tr.tr-white:hover > td,
.table-hover > tbody > tr:hover > .tr-white,
.table-hover > tbody > tr.tr-white:hover > th {
    background-color: rgba(255,255,255,.5);
}



.table > thead > tr > td.tr-blue,
.table > tbody > tr > td.tr-blue,
.table > tfoot > tr > td.tr-blue,
.table > thead > tr > th.tr-blue,
.table > tbody > tr > th.tr-blue,
.table > tfoot > tr > th.tr-blue,
.table > thead > tr.tr-blue > td,
.table > tbody > tr.tr-blue > td,
.table > tfoot > tr.tr-blue > td,
.table > thead > tr.tr-blue > th,
.table > tbody > tr.tr-blue > th,
.table > tfoot > tr.tr-blue > th {
    background-color: rgba(242,249,255,1.00);
}

.table-hover > tbody > tr > td.tr-blue:hover,
.table-hover > tbody > tr > th.tr-blue:hover,
.table-hover > tbody > tr.tr-blue:hover > td,
.table-hover > tbody > tr:hover > .tr-blue,
.table-hover > tbody > tr.tr-blue:hover > th {
    background-color: rgba(204,231,255,.5);
}


.table > thead > tr > td.tr-blue-dark,
.table > tbody > tr > td.tr-blue-dark,
.table > tfoot > tr > td.tr-blue-dark,
.table > thead > tr > th.tr-blue-dark,
.table > tbody > tr > th.tr-blue-dark,
.table > tfoot > tr > th.tr-blue-dark,
.table > thead > tr.tr-blue-dark > td,
.table > tbody > tr.tr-blue-dark > td,
.table > tfoot > tr.tr-blue-dark > td,
.table > thead > tr.tr-blue-dark > th,
.table > tbody > tr.tr-blue-dark > th,
.table > tfoot > tr.tr-blue-dark > th {
    background-color: rgba(221,238,255,1.00);
}

.table-hover > tbody > tr > td.tr-blue-dark:hover,
.table-hover > tbody > tr > th.tr-blue-dark:hover,
.table-hover > tbody > tr.tr-blue-dark:hover > td,
.table-hover > tbody > tr:hover > .tr-blue-dark,
.table-hover > tbody > tr.tr-blue-dark:hover > th {
    background-color: rgba(181,218,255,0.50);
}


.table > thead > tr > td.tr-yellow,
.table > tbody > tr > td.tr-yellow,
.table > tfoot > tr > td.tr-yellow,
.table > thead > tr > th.tr-yellow,
.table > tbody > tr > th.tr-yellow,
.table > tfoot > tr > th.tr-yellow,
.table > thead > tr.tr-yellow > td,
.table > tbody > tr.tr-yellow > td,
.table > tfoot > tr.tr-yellow > td,
.table > thead > tr.tr-yellow > th,
.table > tbody > tr.tr-yellow > th,
.table > tfoot > tr.tr-yellow > th {
    background-color: rgba(255,255,236,1.00);
}

.table-hover > tbody > tr > td.tr-yellow:hover,
.table-hover > tbody > tr > th.tr-yellow:hover,
.table-hover > tbody > tr.tr-yellow:hover > td,
.table-hover > tbody > tr:hover > .tr-yellow,
.table-hover > tbody > tr.tr-yellow:hover > th {
    background-color: rgba(255,255,178,.5);
}




.table > thead > tr > td.tr-highlight-blue,
.table > tbody > tr > td.tr-highlight-blue,
.table > tfoot > tr > td.tr-highlight-blue,
.table > thead > tr > th.tr-highlight-blue,
.table > tbody > tr > th.tr-highlight-blue,
.table > tfoot > tr > th.tr-highlight-blue,
.table > thead > tr.tr-highlight-blue > td,
.table > tbody > tr.tr-highlight-blue > td,
.table > tfoot > tr.tr-highlight-blue > td,
.table > thead > tr.tr-highlight-blue > th,
.table > tbody > tr.tr-highlight-blue > th,
.table > tfoot > tr.tr-highlight-blue > th {
    color: blue;
}

.table-hover > tbody > tr > td.tr-highlight-blue:hover,
.table-hover > tbody > tr > th.tr-highlight-blue:hover,
.table-hover > tbody > tr.tr-highlight-blue:hover > td,
.table-hover > tbody > tr:hover > .tr-highlight-blue,
.table-hover > tbody > tr.tr-highlight-blue:hover > th {
    color: blue;
}
/* TR PC -----------------------*/
/*------ SPECIALISED ----------------------------------*/
/* === Button Template ===
.buton-yourname {
    font-family: 'Open Sans', sans-serif;
    color: TEXT_COLOR;
    background-color: BG_COLOR;
    padding: 0.5em 1.25em;
    border: none;
    border-radius: 6px;
    transition: background-color 0.2s ease, color 0.2s ease;
    cursor: pointer;
    text-align: center;
    display: inline-block;
    font-size: 1rem;
}
.buton-yourname:hover {
    color: HOVER_TEXT_COLOR;
    background-color: HOVER_BG_COLOR;
}
========================== */

.buton-width {
    width: 35px !important;
}

.buton-active {
    font-family: 'Open Sans', sans-serif;
    color: black;
    background-color: white;
}

.buton-active {
    position: relative;
    z-index: 1;
}

    .buton-active::after {
        content: '';
        position: absolute;
        top: 0;
        left: 0;
        width: 100%;
        height: 100%;
        background: rgba(0,0,0,0.05);
        z-index: -1;
        transform: scaleX(0);
        transform-origin: center;
        transition: transform 125ms ease-in;
    }

    .buton-active:hover::after {
        transform: scaleX(1);
        transform-origin: center;
    }

.buton-active {
    font-family: 'Open Sans', sans-serif;
    color: black !important;
    background-color: white;
}

.buton-inactive {
    font-family: 'Open Sans', sans-serif;
    color: white;
    background-color: lightgray;
}

    .buton-inactive:hover {
        color: white !important;
    }

.buton-orange {
    font-family: 'Open Sans', sans-serif;
    color: white;
    background-color: darkorange;
}

    .buton-orange:hover {
        color: lightgray !important;
    }

.buton-orange-r {
    font-family: 'Open Sans', sans-serif;
    color: white;
    background-color: darkorange;
    border: 0;
    border-radius: 3px !important;
}

    .buton-orange-r:hover {
        color: lightgray !important;
    }

.buton-blue-spc {
    font-family: 'Open Sans', sans-serif;
    letter-spacing: 1.5px;
    color: white;
    background-color: cornflowerblue;
}

    .buton-blue-spc:hover {
        color: lightgray !important;
    }

.buton-blue {
    font-family: 'Open Sans', sans-serif;
    color: white;
    background-color: cornflowerblue;
}

    .buton-blue:hover {
        color: lightgray !important;
    }

.buton-darkblue {
    font-family: 'Open Sans', sans-serif;
    color: white;
    background-color: #337ab7;
}

    .buton-darkblue:hover {
        color: lightgray !important;
    }

.buton-lightblue {
    font-family: 'Open Sans', sans-serif;
    color: darkblue;
    background-color: #E9EFFC;
}

.buton-darkblue:hover {
    color: lightgray !important;
}

.buton-green {
    font-family: 'Open Sans', sans-serif;
    color: white;
    background-color: mediumseagreen;
}

    .buton-green:hover {
        color: lightgray !important;
    }

.buton-red {
    font-family: 'Open Sans', sans-serif;
    color: white;
    background-color: #d9534f;
}

    .buton-red:hover {
        color: lightgray !important;
    }

.buton-pink {
    font-family: 'Open Sans', sans-serif;
    color: black;
    background-color: #FFEEEE;
}

    .buton-pink:hover {
        color: black !important;
    }

.buton-lightpink {
    font-family: 'Open Sans', sans-serif;
    color: black;
    background-color: lightpink;
}

    .buton-lightpink:hover {
        color: black !important;
    }

.buton-purple {
    font-family: 'Open Sans', sans-serif;
    color: white;
    background-color: blueviolet;
}

    .buton-purple:hover {
        color: lightgray !important;
    }

.buton-darkpurple {
    font-family: 'Open Sans', sans-serif;
    color: white;
    background-color: purple;
}

    .buton-darkpurple:hover {
        color: white !important;
    }

.buton-indianred {
    font-family: 'Open Sans', sans-serif;
    color: white;
    background-color: indianred;
}

    .buton-indianred:hover {
        color: lightgray !important;
    }

.buton-cadetblue {
    font-family: 'Open Sans', sans-serif;
    color: white;
    background-color: cadetblue;
}

    .buton-cadetblue:hover {
        color: lightgray !important;
    }

.buton-goldenrod {
    font-family: 'Open Sans', sans-serif;
    color: white;
    background-color: goldenrod;
}

    .buton-goldenrod:hover {
        color: lightgray !important;
    }

.buton-peru {
    font-family: 'Open Sans', sans-serif;
    color: white;
    background-color: peru;
}

    .buton-peru:hover {
        color: lightgray !important;
    }

.buton-darkorange {
    font-family: 'Open Sans', sans-serif;
    color: white;
    background-color: darkorange;
}

    .buton-darkorange:hover {
        color: lightgray !important;
    }

.buton-darkgreen {
    font-family: 'Open Sans', sans-serif;
    color: white;
    background-color: darkgreen;
}

    .buton-darkgreen:hover {
        color: lightgray !important;
    }

.buton-darkcyan {
    font-family: 'Open Sans', sans-serif;
    color: white;
    background-color: darkcyan;
}

    .buton-darkcyan:hover {
        color: lightgray !important;
    }

.buton-darkkhaki {
    font-family: 'Open Sans', sans-serif;
    color: white;
    background-color: darkkhaki;
}

    .buton-darkkhaki:hover {
        color: lightgray !important;
    }

.buton-khaki {
    font-family: 'Open Sans', sans-serif;
    color: black;
    background-color: khaki;
}

    .buton-khaki:hover {
        color: black !important;
    }

.buton-moccasin {
    font-family: 'Open Sans', sans-serif;
    color: black;
    background-color: moccasin;
}

    .buton-moccasin:hover {
        color: black !important;
    }

.buton-gray {
    font-family: 'Open Sans', sans-serif;
    color: white;
    background-color: gray;
}

    .buton-gray:hover {
        color: white !important;
    }

.buton-lightgray {
    font-family: 'Open Sans', sans-serif;
    color: black;
    /*	background-color:#EDEDED;*/
    background-color: #F4F4F4;
}

    .buton-lightgray:hover {
        src: url('MonospaceBold.eot');
        color: black !important;
    }

.buton-darkslateblue {
    font-family: 'Open Sans', sans-serif;
    color: white;
    background-color: darkslateblue;
}

    .buton-darkslateblue:hover {
        color: lightgray !important;
    }
/* ---- BUTONS  ----- */
.buton {
    color: black;
    background-color: #FFFFFF;
    text-transform: uppercase;
    -webkit-border-radius: 16px;
    -moz-border-radius: 16px;
    border-radius: 16px;
    border-width: 0;
    padding-top: 0.6em;
    padding-bottom: 0.6em;
    padding-right: 1.5em;
    padding-left: 1.5em;
}

    .buton:hover {
        color: black;
        background-color: #E8E8E8;
    }

.buton-transparent {
    color: white;
    background-color: transparent;
    border: 1;
    border-color: white !important;
}

    .buton-transparent:hover {
        color: lightgray;
        background-color: transparent;
    }

.buton-submit {
    cursor: pointer;
}

.buton-s {
    font-size: 0.7em;
    color: black;
    background-color: #FFFFFF;
    text-transform: uppercase;
    -webkit-border-radius: 16px;
    -moz-border-radius: 16px;
    border-radius: 16px;
    border-width: 0;
    padding-top: 0.5em;
    padding-bottom: 0.5em;
    padding-right: 1.5em;
    padding-left: 1.5em;
}

.buton-thin {
    font-size: 1.1rem !important;
    padding-top: 0.2rem !important;
    padding-bottom: 0.2rem !important;
}

.buton-l {
    font-size: 1.1em;
    color: black;
    background-color: #FFFFFF;
    text-transform: uppercase;
    -webkit-border-radius: 24px;
    -moz-border-radius: 24px;
    border-radius: 24px;
    border-width: 0;
    padding-top: 0.5em;
    padding-bottom: 0.5em;
    padding-right: 1.5em;
    padding-left: 1.5em;
}

.buton-norm {
    font-family: 'OpenSansRegular' !important;
    font-weight: normal !important;
}

.buton-s:hover {
    color: black;
}

.buton-100 {
    width: 90%;
    margin: auto;
}

.buton-110 {
    width: 100%;
    margin: auto;
}

.buton-bold {
    font-family: OpenSansBold;
}

.buton-lcase {
    text-transform: none;
}

.buton-bottom-spcr {
    margin-bottom: 1.5em;
}

.buton-center {
    margin-left: auto;
    margin-right: auto;
}

.buton-left {
    margin-left: auto;
    margin-right: auto;
    text-align: left !important;
}

.buton-item {
    width: 230px !important;
    margin-right: 2px !important;
    margin-bottom: 5px !important;
    font-size: 1.5rem !important;
    border: 1px solid gray;
    text-align: left !important;
}

.buton-item-1 {
    width: 260px !important;
    margin-right: 12px !important;
    margin-bottom: 12px !important;
    font-size: 1.5rem !important;
    border: 1px solid gray;
    text-align: left !important;
    overflow: hidden;
    /*    box-shadow: 3px 3px 8px #888888;*/
}

.buton-item-1-a {
    width: 238px !important;
    margin-bottom: 12px !important;
    font-size: 1.5rem !important;
    border: 1px solid gray;
    text-align: left !important;
    overflow: hidden;
    /*    box-shadow: 3px 3px 5px #888888;*/
}

.buton-item-1-b {
    margin-right: 1.5rem !important;
    margin-bottom: 12px !important;
    font-size: 1.5rem !important;
    border: 1px solid gray;
    text-align: center !important;
    overflow: hidden;
    /*    box-shadow: 3px 3px 5px #888888;*/
}

.buton-close-sticky {
    position: sticky !important;
    top: 11px;
    !important;
    right: 5rem !important;
    margin-bottom: -5rem !important;
    z-index: 7000 !important;
}

.buton-clstky {
    position: sticky !important;
    top: 11px;
    !important;
    right: 5rem !important;
    margin-bottom: -5rem !important;
    z-index: 7000 !important;
}

.buton-left-spcr {
    margin-left: 1em;
}

.buton-contact-spcr {
    margin-top: 2em;
    margin-bottom: 2em;
}

.buton-danger {
    font-family: 'Open Sans', sans-serif;
    color: white;
    font-weight: bold;
    background-color: red;
}

    .buton-danger:hover {
        color: white;
    }

.buton-yellow {
    font-family: 'Open Sans', sans-serif;
    color: black;
    background-color: #FCC400;
}

    .buton-yellow:hover {
        color: black;
    }

.buton-slategrey {
    font-family: 'Open Sans', sans-serif;
    color: white;
    background-color: #708090;
}

    .buton-slategrey:hover {
        color: white;
        background-color: #62707E;
    }

.buton-limegreen {
    font-family: 'Open Sans', sans-serif;
    color: white;
    background-color: rgba(213,233,0,1.00);
}

    .buton-limegreen:hover {
        color: white;
    }

.buton-grey {
    font-family: 'Open Sans', sans-serif;
    color: white;
    background-color: darkgray;
}

    .buton-grey:hover {
        color: white;
    }

.buton-lgrey {
    font-family: 'Open Sans', sans-serif;
    color: dimgrey;
    background-color: #d3d3d3;
}

    .buton-lgrey:hover {
        color: white;
        background-color: #B8B8B8;
    }

.buton-gold {
    font-family: 'Open Sans', sans-serif;
    color: slategrey;
    background-color: #ffd700;
}

    .buton-gold:hover {
        color: slategrey;
        background-color: #E8C400;
    }

.btn {
    position: relative;
    z-index: 1;
    border
}

    .btn::after {
        content: '';
        position: absolute;
        top: 0;
        left: 0;
        width: 100%;
        height: 100%;
        background: rgba(0,0,0,0.15);
        z-index: -1;
        transform: scaleX(0);
        transform-origin: center;
        /*	transform-origin: right;*/
        transition: transform 125ms ease-in;
    }

    .btn:hover::after {
        transform: scaleX(1);
        transform-origin: ce ter;
        /*	transform-origin: left;*/
    }

.buton-white {
    font-family: 'Open Sans', sans-serif;
    color: black;
    background-color: white;
}

.buton-white {
    position: relative;
    z-index: 1;
}

    .buton-white::after {
        content: '';
        position: absolute;
        top: 0;
        left: 0;
        width: 100%;
        height: 100%;
        background: rgba(0,0,0,0.05);
        z-index: -1;
        transform: scaleX(0);
        transform-origin: center;
        transition: transform 125ms ease-in;
    }

    .buton-white:hover::after {
        transform: scaleX(1);
        transform-origin: center;
    }

.buton-part-width {
    width: 200px;
}