
:root {
    --a1-neutral-100: #000000;
    --a1-neutral-0: #ffffff;
    --a1-cool-30: #a2c0ce;
    --a1-neutral-10: #f7f7f7;
    --a1-neutral-50: #bcbcbc;
    --a1-neutral-80: #666666;
    --a1-neutral-20: #f2f2f2;
    --a1-cool-0: #f5f7fa;
    --a1-hot-50: #da291c;
    --a1-cool-50: #6295ac;
    --a1-cool-60: #49768a;
    --a1-cool-40: #7ca6ba;
    --a1-cool-20: #c9dae2;
    --a1-cool-80: #355564;

}


@font-face {
    font-family: A1Einfach-Fett;
    src: local(A1Einfach-Fett),
    url(../assets/A1-Web-Font/A1Serif-Bold.woff2) format("woff2"),
    url(../assets/A1-Web-Font/A1Serif-Bold.woff) format("woff"),
    url(../assets/A1-Web-Font/A1Serif-Bold.ttf) format("truetype");
    font-weight: normal;
    font-style: normal;
    font-stretch: normal;
}

@font-face {
    font-family: A1Einfach-Leicht;
    src: local(A1Einfach-Leicht),
    url(../assets/A1-Web-Font/A1Serif-Light.woff2) format("woff2"),
    url(../assets/A1-Web-Font/A1Serif-Light.woff) format("woff"),
    url(../assets/A1-Web-Font/A1Serif-Light.ttf) format("truetype");
    font-weight: normal;
    font-style: normal;
    font-stretch: normal;
}

@font-face {
    font-family: A1Einfach-Medium;
    src: local(A1Einfach-Medium),
    url(../assets/A1-Web-Font/A1Serif-Regular.woff2) format("woff2"),
    url(../assets/A1-Web-Font/A1Serif-Regular.woff) format("woff"),
    url(../assets/A1-Web-Font/A1Serif-Regular.ttf) format("truetype");
    font-weight: normal;
    font-style: normal;
    font-stretch: normal;
}

@font-face {
    font-family: A1Sans-Regular;
    src: local(A1Sans-Regular),
    url(../assets/A1-Web-Font/A1Sans-Regular.woff2) format("woff2"),
    url(../assets/A1-Web-Font/A1Sans-Regular.woff) format("woff"),
    url(../assets/A1-Web-Font/A1Sans-Regular.ttf) format("truetype");
    font-weight: normal;
    font-style: normal;
    font-stretch: normal;
}

html {
    font-size: 14px;
    padding: 0;
    margin: 0;
}

body {
    background-color: var(--a1-neutral-10);;
    /*color: #000000;*/
    padding: 0;
    margin: 0;
    font-size: 1rem;
    font-weight: 400;
    line-height: 1.5em;
    font-family: A1Sans-Regular, sans-serif;
}

body table {
    margin: 0;
}

body hr {
    border: none;
    border-bottom: dashed 1px #bcbcbc;
    height: 1px;
    display: block;
    width: 100%;
    margin: 0;
}

body h1 {
    color: var(--a1-neutral-100);
    font-size: 1.286rem;
    line-height: 1.5em;
    font-weight: 500;
    font-family: A1Einfach-Fett, sans-serif;
    margin: 0;
    padding: 0;
}

body h1.mega {
    font-size:  3.429rem;
    font-weight: 500;
    line-height: 1.5em;
    font-family: A1Einfach-Fett, sans-serif;
    letter-spacing: normal;
    text-align: left;
    color: var(--a1-neutral-100);
    margin-bottom: 1.429rem;

}

body h1.large {
    color: #000000;
    font-size: 2rem;
    font-weight: 500;
    line-height: 1.5em;
    font-family: A1Einfach-Fett, sans-serif;
}

body h1.medium {
    color: #000000;
    font-size: 1.857rem;
    font-weight: 400;
    line-height: 1.5em;
    font-family: A1Sans-Regular, sans-serif;
}

body h1.small {
    color: #000000;
    font-size: 1.429rem;
    font-weight: 500;
    line-height: 1.5em;
    font-family: A1Einfach-Fett, sans-serif;
}

body h2 {
    color: #666666;
    font-size: 1.143rem;
    font-weight: 500;
    line-height: 1.25em;
    font-family: A1Sans-Regular, sans-serif;
    margin: 0;
    padding: 0;
}

body h3 {
    color: var(--a1-neutral-100);
    font-size: 0.857rem;
    font-weight: 500;
    line-height: 1.5em;
    font-family: A1Sans-Regular, sans-serif;
    margin: 0 0 1rem 0;
    padding: 0;
    letter-spacing: initial;
}

body h4 {
    color: #000000;
    font-size: 0.714rem;
    font-weight: 400;
    line-height: 1.5em;
    font-family: A1Sans-Regular, sans-serif;
    margin: 0;
    padding: 0;
    letter-spacing: initial;
}

body p {
}

.text-right {
    justify-content: flex-end;
    text-align: right;
    display: flex;
}


body .invisible {
    display: none !important;
}

body a {
    color: #da291c;
    text-decoration: none;
}

body a:hover {
    color: #941c13;
    cursor: pointer;
    text-decoration: underline;
}

body span.warning {
    color: #e51a49;
}

.accent-text {
    color: #da291c;
}

._dash-undo-redo {
    display: none
}

.fa-ss {
    width: 1rem;
    line-height: 1rem;
    text-align: center;
    display: inline-block;
    font: normal normal normal 14px/1 FontAwesome;
    font-size: 1rem;
    text-rendering: auto;
    -webkit-font-smoothing: antialiased;
}

.page-panel {
    padding: 43px 95px;
    box-sizing: border-box;
    display: flex;
    flex-direction: column;
}

.page-panel.accent {
    background-color: white;
}

.page-panel > h1:first-child {
    padding-left: 4px;
    margin-bottom: 4px;
}

.page-panel > h2 {
    padding-left: 5px;
    margin-bottom: 1.5rem;
}

.page-panel .page-panel-content {
    margin-top: 1.5rem;
    box-shadow: #DDDFE1 1px 1px 10px;
    background-color: white;
    display: flex;
    flex-direction: column;
    align-items: stretch;
    justify-content: space-between;
    overflow: hidden;
}

.page-panel .page-panel-content.table-panel-content {
    box-shadow: none;
    border: solid 1px #bcbcbc;
}

.page-panel .page-panel-footer {
    padding-top: 20px;
    box-shadow: #DDDFE1 1px 5px 10px;
    border-top: dashed 1px #bcbcbc;
    background-color: white;
    display: flex;
    flex-direction: column;
    align-items: stretch;
    justify-content: space-between;
}

body .icon-green-check {
    color: #00875a;
}

body .icon-warning {
    color: #ff991f;
    font-size: 16px;
}

body .icon-info {
    color: #6295ac;
    font-size: 16px;
}

body .btn:not(.small-btn):not(.btn-link) {
    display: inline-block;
    height: 42px;
    min-width: 150px;
    color: #000000;
    font-size: 1rem;
    font-weight: 600;
    line-height: 1.5em;
    font-family: A1Einfach-Medium, serif;
    color: #da291c;
    border: solid 1px #da291c;
    background: none;
    box-sizing: border-box;
    letter-spacing: initial;
    text-transform: none;
    border-radius: 0;
}

body .btn:not(.small-btn):not(.btn-link):active:not([disabled]) {
    color: #941c13;
}

body .btn:not(.small-btn):not(.btn-link):hover:not([disabled]) {
    border: solid 3px #da291c;
    cursor: pointer;
}

body .btn:not(.small-btn):not(.btn-link)[disabled] {
    cursor: no-drop;
    color: #bcbcbc;
    background-color: transparent;
    border: 1px solid #bcbcbc;
}

body .btn:not(.small-btn):not(.btn-link).btn-primary {
    color: white;
    background-color: #da291c;
    border: none;
}

body .btn:not(.small-btn):not(.btn-link).btn-primary:hover:not([disabled]) {
    border: none;
    background-color: #941c13;
}

body .btn:not(.small-btn):not(.btn-link).btn-primary:active:not([disabled]) {
    border: none;
    background-color: #ff9799 !important;
    color: #941c13;
}

body .btn:not(.small-btn):not(.btn-link).btn-primary[disabled] {
    color: #bcbcbc;
    background-color: #eeeeee;
    border: none;
}


body .input-wrapper {
    display: flex;
    justify-content: stretch;
    margin-bottom: 1rem;
}

body .input-wrapper input {
    width: 100%;
}

body select,
body input,
body input[type=text],
body input[type=password],
body .a1-input {
    border-radius: 0;
    height: 42px;
    border: solid 1px #bcbcbc;
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding-left: 10px;
}

body select .small-btn,
body input .small-btn,
body .a1-input .small-btn {
    box-sizing: border-box;
    text-align: center;
    line-height: 42px;
    width: 42px;
    border-left: solid 1px #bcbcbc;
    color: #da291c;
}

body select .small-btn:hover,
body input .small-btn:hover,
body .a1-input .small-btn:hover {
    cursor: pointer;
    color: #941c13;
    box-shadow: 1px 1px 3px #bcbcbc;
}

.plate {
    color: white;
    background: #da291c;
    border-radius: 5px;
    padding: 1px 10px;
    display: inline-block;
    text-transform: uppercase;
    font-weight: 600;
    font-size: 0.94em;
    line-height: 1.4em;
    letter-spacing: 1px;
}

.plate.inuse {
    background: #A2C0CE;
    color: #333;
}

.plate.cancelled {
    background: #e51a49;
}

.plate.finished {
    background: #00875a;
}

.plate.open {
    color: #000;
    background: #ff991f;
}

.top-bar {
    text-align: right;
    /*width: calc(100% - 90px);*/
    width: 100%;
    height: 58px;
    min-height: 50px;
    box-shadow: grey 2px 0 5px;
    background: #fff;
    display: flex;
    z-index: 3;
    justify-content: space-between;
    align-items: center;
    box-sizing: border-box;
    position: fixed;
    /*margin-left: 90px;*/
}

.top-bar.with-logo {
    background-color: #fff;
    background-repeat: no-repeat;
    background-image: url("../assets/images/a1logo.png");
    padding-left: 80px;
}

.top-bar .site-title {
    padding: 0 0 0 24px;
}

.top-bar .top-panel {
    border-left: solid 1px #EFEFEF;
    padding: 10px 10px 10px 10px;
    height: 100%;
    display: flex;
    justify-content: space-around;
    align-items: center;
}

.top-bar .top-panel .user-icon {
    cursor: pointer;
    width: 32px;
    height: 32px;
    background: url('../assets/images/A1_User_circle_icon.svg') 0 0 no-repeat;
    background-size: 32px;
}

.top-bar .top-panel .user-icon:hover {
    opacity: 0.8;
}

.top-bar .top-panel .user-info-text {
    margin-left: 10px;
}

.top-bar .top-panel .user-name {
    cursor: pointer;
}

.top-bar .top-panel .user-name:hover {
    opacity: 0.8;
}

.top-bar .logout-link {
    cursor: pointer;
}

.top-bar .logout-link:hover {
    text-decoration: underline;
    opacity: 0.9;
}

.top-bar .logout-link:active {
    text-decoration: none;
    opacity: 0.7;
}

.master-page {
    width: 100%;
    height: 100%;
    box-sizing: border-box;
    overflow: hidden;
    display: flex;
}

.master-page.without-sidebar .side-panel {
    display: none;
}

.master-page .content-with-bar {
    width: calc(100% - 100px);
    margin-left: 100px;
    margin-top: 58px;
    flex-direction: column;
}

.master-page.without-sidebar .content-with-bar {
    width: 100%;
    margin-left: 0;
}

.master-page.without-sidebar .top-bar {
    background-color: #fff;
    background-repeat: no-repeat;
    background-image: url("../assets/html_images/A1_01_08RED_3_L.jpg");
   /* padding-left: 100px;*/
    width: 100%;
    margin-left: 0;
    z-index: 2;
}

.master-page.without-sidebar .site-title {
    padding: 0;
}

.main-container {
    /*max-width: 1200px; */
    margin: auto auto;
}

.title-wrapper{
    text-align: center;

}

.switch-to-larger-title{

  margin: 20px;
  font-family: A1Einfach-Fett, sans-serif;
  font-size: 32px;
  font-weight: normal;
  font-stretch: normal;
  font-style: normal;
  line-height: 1.13;
  letter-spacing: normal;
  text-align: center;
  color: var(--a1-neutral-100);
}

.switch-to-larger-text{

  margin: 20px;
  font-family: A1Einfach-Leicht, Verdana, sans-serif;
  font-size: 16px;
  font-weight: normal;
  font-stretch: normal;
  font-style: normal;
  line-height: 1.5;
  letter-spacing: normal;
  text-align: center;
  color: var(--a1-neutral-100);
}

.a1d-golargerscreen-illustration {

  width: 319.8px;
  height: 175.1px;
  margin: 0px 0px 54px 0px;
  object-fit: contain;

}
