:root {
    --grey: #3f4245;
    --light-grey: #777777;
    --white: white;
    --green: #84C361;
    --blue: #127298;
    --red:#E2001A;
    --font-color: #3f4245;
    --grey: #222222;
    --med-grey: #3f4245;
    --yellow:#FFD200;
    --white: #F4F6F9;
    --background-color: #F4F6F9;
}

.container-form input[type=checkbox] {
    visibility: visible;
}

.list-group-item.active {
    color: var(--grey);
    background-color: var(--green) !important;
    border-color: var(--grey);
}

.list-group-item.active:hover {
    color: var(--grey);
    border-color: var(--grey);
}

.list-group{
    max-height: 300px;
    min-height: 300px;
    overflow-y:scroll;
    scrollbar-width: none;
}

::-webkit-scrollbar {
    width: 5px;
  }
  
  /* Track */
  ::-webkit-scrollbar-track {
    background: #f1f1f1; 
  }
   
  /* Handle */
  ::-webkit-scrollbar-thumb {
    background: #888; 
  }
  
  /* Handle on hover */
  ::-webkit-scrollbar-thumb:hover {
    background: var(--font-color); 
  }

.list-box {
    padding-right: 10px;
    min-width: 400px;
}

.hs-button {
    border-radius: 6px !important;
}

.hs-button[disabled], .hs-button[disabled]:hover {
    width: auto !important;
    border: none;
    background: var(--light-grey);
    background-color: var(--highlight-color) !important;
    opacity: .65;
    color: var(--grey);
    border-radius: 0;
    padding: 16px 22px;
    font-size: 18px;
    font-weight: 600;
    transition: all .2s ease-in;
    cursor: pointer;
}

.hbspt-form .hs-button:hover {
    background: var(--highlight-color) !important;
  }

fieldset {
    border: none;
    margin: 0 2px;
    padding: 0.35em 0.625em 0.75em;
  }

input:-webkit-autofill,
input:-webkit-autofill:focus {
    transition: background-color 600000s 0s, color 600000s 0s;
}

.warning {
    background-color: rgb(255, 187, 66);
    color: #4B4F53;
}

.success, .danger, .warning, .alert {
    text-align: center;
    padding: 10px;
    margin: 15px 0px;
    border-radius: 6px;
}

.alert {
    background-color:var(--light-grey);
    color: white;
}
.success {
    background-color:var(--success-color);
    color: var(--success-font-color);
}
.warning {
    background-color:var(--warning-color);
    color: var(--warning-font-color);
}
.danger {
    background-color:var(--danger-color);
    color: var(--danger-font-color);
}
.info {
    background-color:var(--info-color);
    color: var(--info-font-color);
}

.loader {
    border: 16px solid var(--highlight-font-color); /* Light grey */
    border-top: 16px solid var(--highlight-color); /* Blue */
    border-radius: 50%;
    width: 120px;
    height: 120px;
    animation: spin 1.25s linear infinite;
    display: block;
    margin-left: auto;
    margin-right: auto;
  }
  
  @keyframes spin {
    0% { transform: rotate(0deg); }
    100% { transform: rotate(360deg); }
  }

  #footer2018 {
    background: var(--header-color);
    border-top: 6px solid var(--highlight-color);
  }

  #footer2018-in {
    background: var(--header-color);
  }

  .l {
    text-align: left;
  }

  .r {
    text-align: right;
  }

  #footer2018-in {
    background: var(--header-color);
    border-top: 2px solid var(--highlight-color);
    padding: 5px 10px;
    color: var(--header-font-color);
    font-size: 12px;
    font-weight: 300;
    float: left;
    clear: both;
    width: 100%;
    font-family: 'Source Sans Pro',sans-serif;
    position: absolute;
    bottom: 0;
    }

    
    #page-container {
        min-height: 100vh;
        position: relative;
    }

    .form-control:focus {
        box-shadow: 0 0 0 0.1rem var(--highlight-color);
    }

    #content-wrap {
        padding-bottom: 50px;
    }

    

    .nav-tabs .nav-link, .nav-tabs .nav-link, .nav-tabs .nav-link:hover {
        border: solid 1px var(--input-font-color);
        background-color: var(--input-color);
        color: var(--input-font-color) !important;
    }

    a:link, a:visited, a:active {
        color: var(--highlight-color);
        text-decoration: none;
        transition: none;
    }


    .form {
        width: 100%;
        overflow-y: scroll;
        padding-bottom: 40px;
        top: 0px;
        height: 100%;
        position: absolute;
    }

    .hbspt-form .hs-button {
        background: var(--highlight-color);
        color: var(--highlight-font-color) !important;
    }

    #nav2018 .upper .block-green a {
        background: var(--highlight-color);
        color: var(--highlight-font-color) !important;
    }

    a:link, a:active, a:visited, a:link:hover, a:active:hover, a:visited:hover {
        color:var(--highlight-color);
        text-decoration: underline;
        -webkit-text-decoration-skip-ink: none;
        text-decoration-skip-ink: none;
    }

  #nav2018 {
    background-color: var(--header-color);
  }

#nav2018 .upper a  {
    color: var(--header-font-color);
}

.nav-tabs .nav-link.active, .nav-tabs .nav-link.active:hover {
    color: var(--highlight-font-color) !important;
    background-color: var(--highlight-color) !important;
    border-color: var(--highlight-color) !important;
    text-decoration: none;
}

#nav2018 .upper .block-green a:hover {
    text-decoration: none;
    background: var(--highlight-color);
    font-style: bold;
  }

.nav-tabs .nav-link
{
    color: var(--grey);
    text-decoration: none;
}

.container-form select, .container-form-type2 select, .container-form-type3 select, .container-form-type4 select {
    padding: 5px;
}

.nav-tabs .nav-link:hover {
    color: var(--highlight-color);
    text-decoration: none;
}

.nav-tabs .nav-link.active:hover{
    color: var(--highlight-font-color);
    text-decoration: none;
    font-style: bold;
}

.text-muted {
    color: #AAAAAA!important;
}

#nav2018 .logo-small img
{ 
    max-width:100%;
    height:36px !important;
}

#nav2018 .logo-small {
    width: 230px !important;
}

#nav2018 .logo {
    width: fit-content;
    padding: 60px 0 0 0;
    display: block;
    margin-left: -15px;
}

#nav2018 .axess-logo {
    width: 230px !important;
    margin-left: 60px;
    margin-right: -60px;
}

@media (max-width: 1000px) {
    #nav2018 .axess-logo {
        width: 230px !important;
        margin-left: 0px;
        margin-right: 0px;
    }
}

.in-header {
    max-width: none !important;
    padding: 0px 20px;
}

.in-header h1{
    font-weight: 400;
    padding-top: 5px;
}

body {
    background-color: var(--background-color);
}

.skycloud-img {
    width: 300px;
}

.skycloud-popup {
    position: absolute;
    top: 38%;
    left: 48%;
    width: 425px;
}

.home-content-left {
    padding-left: 50px;
    padding-top: 15rem !important;
}

.home-content-left h1 {
    color: #3a3a3a ;
    font-weight: 400 !important;
    margin: 0 !important;
}

.circlearrow {
    text-decoration: none !important;
    margin-top: 20px;
}

.parallax-mirror {
    padding-top: 100px;
}

.parallax-window{
    min-height: 800px !important;
}

.group-box-3 {
    min-width: 400px;
}

.group-box-2 {
    min-width: 600px;
}

@media(min-width: 1000px) {
    .tablet-img {
        width: 600px
    }
}

@media(min-width: 1240px) {
    .tablet-img {
        width: 500px
    }
}


@media(min-width: 1450px) {
    .container {
        max-width:1400px;
        margin: 0 auto;
        width: 100%;
        padding: 0
    }

    .tablet-img {
        width: 746px;
        margin-left: 5px;
    }
}

@media(max-width: 800px) {
    .home-content-right {
        display: none;
    }
    .home-content-left {
        width: 100% !important;
        margin-left: 10px;
        padding-top: 150px !important;
    }
    #nav2018 .logo {
        margin-left: -5px;
    }
    .gateway-header {
        width: 100%;
    }
    .gateway-text {
        width: 100%;
    }

    .interior-navigation-type1 .items.columns-3 .item:nth-of-type(3n),
    .interior-navigation-type1 .items.columns-3 .item:nth-of-type(3n+1),
    .interior-navigation-type1 .items.columns-3 .item:nth-of-type(3n+2) {
        width: 100% !important;
        margin-bottom: 10px !important;
    }
}

.home-content-left, .home-content-right {
    width: 50%;
}

#nav2018 .logo img {
    max-width: fit-content !important;
    height: 59px;
}

@media (max-width: 960px) {
    #nav2018 .navigation {
        display: block;
    }
    #nav2018 .menu {
        display: none;
    }
}

@media (max-width: 1000px) {
    #nav2018 .logo img {
        height: 48px;
    }
}

@media (max-width: 750px) {
    #nav2018 .logo img {
        height: 36px;
    }

    #nav2018 .upper a {
        display: none;
    }

    #nav2018 .upper .block {
        display: inline;
    }
}

@media (max-width: 500px) {
    #nav2018 .logo img {
        height: 27px;
    }
}

.gateway-header {
    width: 30%;
}
.gateway-text {
    width: 70%;
}

.interior-navigation-type1 .items.columns-3 .item:nth-of-type(3n),
.interior-navigation-type1 .items.columns-3 .item:nth-of-type(3n+1),
.interior-navigation-type1 .items.columns-3 .item:nth-of-type(3n+2) {
    border: none !important;
    margin-right: 1%;
    margin-bottom: 1%;
    width: 30.33%;
}

.container-form input,
.container-form select,
.container-form textarea {
    width: 80% !important;
}

.btn-material, .btn-material:hover {
    background-color: var(--highlight-color);
    margin-top: 4px !important;
}

.related-widget-wrapper .btn-material {
    color: var(--grey) !important;
}

.related-widget-wrapper .barcode-reader-outer {
    margin-top: 20px !important;
}

#reader__dashboard_section div {
    margin: auto auto 10px !important;
  }
  

.related-widget-wrapper, .related-widget-wrapper div {
    margin: 0 0 0 0 !important;
}

.btn {
    border-radius: 6px;
    box-shadow: none !important;
    text-decoration: none !important;
}


.btn-danger, .btn-danger:hover, .btn-danger:active, .btn-danger:focus {
    background-color: var(--danger-color) !important;
    color: var(--danger-font-color) !important;
}

.barcode-reader-outer .btn-danger {
    padding: 10px 40px;
}

.select2 {
    padding: 10px;
    border-radius: 4px;
}

.select2-dropdown, .select2-results__option,
    .select2-container--default .select2-selection--single .select2-selection__rendered,
    .select2-container--default .select2-selection--single,
    .select2-container--default.select2-container--focus .select2-selection--multiple, .select2-container--default.select2-container--focus .select2-selection--single,
    .selection, .select2-container--default,
    .select2-container--default .select2-selection--single,
    .select2-container--default .select2-selection--single .select2-selection__rendered {
        background-color: white !important;
        border: none !important;
    }

    .select2-container--default .select2-results__option--highlighted.select2-results__option--selectable {
        color: var(--green) !important;
        color: var(--grey-color) !important;
      }

    .select2-selection__arrow {
        top: 10px!important;
    }



    .select2-results__option--highlighted[aria-selected]:hover {
        background-color: var(--green) !important;
        color: var(--grey) !important;
    }

    .swagger-ui .info h1, .swagger-ui .info h2, .swagger-ui .info h3, .swagger-ui .info h4, .swagger-ui .info h5 {
        color: var(--font-color);
        font-family: sans-serif;
    }

    .btn-sm {
        padding: 8px 8px;
        border: none;
    }

    .btn-danger:not(:disabled):not(.disabled).active, .btn-danger:not(:disabled):not(.disabled):active, .show > .btn-danger.dropdown-toggle {
    color: #fff;
    background-color: var(--red);
    border-color: var(--red);
    }

    .container-form input[type="text"], .container-form input[type="email"], .container-form input[type="tel"], .container-form input[type="number"], .container-form input[type="date"], .container-form textarea, .container-form select, .container-form-type2 input[type="text"], .container-form-type2 input[type="email"], .container-form-type2 input[type="tel"], .container-form-type2 input[type="number"], .container-form-type2 input[type="date"], .container-form-type2 textarea, .container-form-type2 select, .container-form-type3 input[type="text"], .container-form-type3 input[type="email"], .container-form-type3 input[type="tel"], .container-form-type3 input[type="number"], .container-form-type3 input[type="date"], .container-form-type3 textarea, .container-form-type3 select, .container-form-type4 input[type="text"], .container-form-type4 input[type="email"], .container-form-type4 input[type="tel"], .container-form-type4 input[type="number"], .container-form-type4 input[type="date"], .container-form-type4 textarea, .container-form-type4 select {
    box-sizing: border-box;
    -webkit-appearance: none;
    -moz-appearance: none;
    appearance: none;
    font-size: 18px;
    color: var(--input-font-color);
    border: 1px solid #cfd5d3;
    background: var(--input-color);
    padding: 5px;
    width: 100%;
    font-family: 'Source Sans Pro',Verdana,Arial,Helvetica,sans-serif;
    border-radius: 6px;
    }

    .hbspt-form label {
    margin: 0 0 6px 0;
    color: var(--font-color);
    }

    h2, .generic h2, span.h2 {
    font-size: 34px;
    font-weight: 500;
    line-height: 1.3em;
    margin: 0 0 8px 0;
    padding: 0;
    color: var(--font-color);
    text-transform: none;
    }

    h4, span.h4 {
        font-size: 25px;
        font-weight: 800;
        line-height: 1.3em;
        margin: 0 0 8px 0;
        padding: 0;
        color: var(--highlight-color);
        text-transform: none;
    }
    
    .errorlist {
    list-style: none;
    color: var(--danger-color);
    padding: 0;
    }

    #footer2018 #cta a {
        color: var(--header-font-color);
    }

    #footer2018 a {
        color: var(--header-font-color);

    }

    #footer2018 #cta a:after {
        border: 3px solid var(--header-font-color);
    }

    .chatpopup .corner {
        border-bottom: 32px solid var(--highlight-color);
        border-bottom: 32px solid var(--highlight-color);
        color: var(--highlight-font-color);
    }

    .chatpopup .chatbox {
        background: var(--highlight-color) !important;
        color: var(--highlight-font-color) !important;
    }

    .btn-primary, a.btn-primary, .btn-primary:hover, a.btn-primary:hover, .btn-primary:focus, a.btn-primary:focus, .btn-primary:active, a.btn-primary:active {
        color: var(--highlight-font-color) !important;
        background-color: var(--highlight-color) !important;
        border-color: var(--highlight-color) !important;
      }
    
    .btn-secondary, .btn-secondary:hover, .btn-secondary:focus, .btn-secondary:active {
        color: var(--info-font-color) !important;
        background-color: var(--info-color) !important;
        border-color: var(--info-color) !important;
    }
    
    .btn-info, .btn-info:hover, .btn-info:focus, .btn-info:active {
        color: var(--info-font-color) !important;
        background-color: var(--info-color) !important;
        border-color: var(--info-color) !important;
    }

    input {
        background-color: var(--input-color);
        color: var(--input-font-color);
        border-radius: 6px;
        padding: 5px;
        border: none;
    }

    td {
        padding: 5px !important;
    }

    p {
        font-size: 1.3rem;
    }

    .hbspt-form input[type="checkbox"]:checked:after, .hbspt-form input[type="radio"]:after {
        content: '';
        position: absolute;
        top: 50%;
        left: 50%;
        width: 10px;
        height: 10px;
        background: inherit;
        margin: -5px 0 0 -5px;
        border-radius: 2px;
    }

    .hbspt-form input[type="checkbox"]:checked:after, .hbspt-form input[type="radio"]:checked:after {
        content: '';
        position: absolute;
        top: 50%;
        left: 50%;
        width: 10px;
        height: 10px;
        background: var(--success-color);
        margin: -5px 0 0 -5px;
        border-radius: 2px;
    }

    .nav-tabs .nav-item {
        margin-top: 5px;
        margin-bottom: 5px;
        margin-right: 5px;
    }

    .nav-tabs .nav-link {
        border: 1px solid transparent;
        border-radius: 6px !important;
    }

    .modal-content {
        background-color: var(--secondary-color);
        color: var(--font-color);
        border: 1px solid var(--med-grey);
    }

    .modal-header {
        background-color: var(--background-color);
        color: var(--font-color);
        border-bottom: 1px solid var(--med-grey);
    }

    .modal-header.bg-success {
        border-top: 6px solid var(--success-color);
        background-color: var(--background-color) !important;
        color: var(--font-color) !important;
    }

    .delete-password-btn {
        background-color: transparent !important;
        color: var(--danger-color) !important;   
        border: none !important;
    }

    .modal-title {
        color: var(--font-color);
    }

    .modal-body {
        background-color: var(--background-color);
        color: var(--font-color);
    }

    .modal-body label,
    .modal-body p,
    .modal-body li,
    .modal-body h6 {
        color: var(--font-color) !important;
    }

    .modal-body .form-control {
        background-color: var(--input-color);
        color: var(--input-font-color);
        border: 1px solid var(--med-grey);
    }

    .modal-body .form-control:focus {
        background-color: var(--input-color);
        color: var(--input-font-color);
        border-color: #80bdff;
    }

    .modal-body .form-control[readonly] {
        background-color: var(--background-color) !important;
        color: var(--font-color);
    }

    .modal-footer {
        background-color: var(--background-color);
        border-top: 1px solid var(--med-grey);
        justify-content: space-between;
    }

    .modal-body .alert-warning {
        border-radius: 6px;
        border: 1px solid var(--font-color);
        border-top-width: 6px;
        background-color: var(--background-color);
        color: var(--font-color);
    }

    .modal-body .alert-warning {
        border-color: var(--warning-color);
    }

    .modal-body .alert-danger {
        border-color: var(--danger-color);
    }

    .modal-body .text-success {
        color: var(--success-color) !important;
    }

    .modal .close {
        color: var(--font-color);
        opacity: 0.8;
    }

    .modal .close:hover {
        color: var(--font-color);
        opacity: 1;
    }

    /* Alert boxes in app passwords section */
    #app-passwords-container .alert-success {
        background-color: var(--success-color);
        border-color: var(--success-color);
        color: var(--success-font-color);
    }

    #app-passwords-container .alert-danger {
        background-color: var(--danger-color);
        border-color: var(--danger-color);
        color: var(--danger-font-color);
    }

    /* Small text */
    .modal-body .form-text {
        color: var(--font-color) !important;
    }