/* Components */
@import url('/css/components-fbaafd3bb06ca5a129392696f75c4b8b.css');

/*--------------------------------------------------------------
 Common styles
--------------------------------------------------------------*/

body {
    margin: 0;
    color: #212121;
    font-family: 'Open Sans', sans-serif;
    font-size: 16px;
}

.page {
    display: flex;
    min-height: 100vh;
    flex-direction: column;
}

.content-area {
}

/* Main content section */
.vl_content {
    margin: 4em;
}

a {
    font-family: "Open Sans" sans-serif;
    font-size: 14px;
    text-align: left;
    color: #004A74;
    background: none;
    margin: 0;
    padding: 0;
    border: none;
    cursor: pointer;
    -moz-user-select: text;

}
a:hover,
a:focus {
    color: black;
    text-decoration: underline;
}

.sus-item {
    font-family: "Open Sans" sans-serif;
    font-weight: normal;
    font-size: 14px;
    text-align: left;
    color: #004A74;
    background: none;
    margin: 0;
    padding: 0;
    border: none;
    cursor: pointer;
    -moz-user-select: text;

}
.link {
    font-family: "Open Sans" sans-serif;
    font-size: 14px;
    text-align: left;
    color: #004A74;
    background: none;
    margin: 0;
    padding: 0;
    border: none;
    cursor: pointer;
    -moz-user-select: text;
}

.link:hover,
.link:focus {
    color: black;
    text-decoration: underline;
}

label {
    font-family: 'Open Sans', sans-serif;
    font-size: 15px;
    font-weight: 600;
}

label.checkbox-group {
    margin-top: 24px;
}

label.checkbox-group-first-item {
    margin-top: initial;
}

form-check-label {
    font-size: 14px;
    font-weight: 400;
}

.inline {
    display: inline-block;
}

.display_flex {
    display: flex;
    flex-direction: column;
}

.display_none {
    display: none;
}

.display_block {
    display: block;
}

.center_horizontal {
    margin-left: auto;
    margin-right: auto;
}

.fit-content {
    width: fit-content;
}

.red-checkbox {
    accent-color: red;
}

/*--------------------------------------------------------------
 Common alignment definitions
--------------------------------------------------------------*/

.txt-center {
    text-align: center;
}

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

.flex-space-between {
    justify-content: space-between;
}


/*--------------------------------------------------------------
 Common size definitions
--------------------------------------------------------------*/

.w25 {
    width: 25%;
}

.w50 {
    width: 50%;
}

.w75 {
    width: 75%;
}

.w100 {
    width: 100%;
}

.content-width{
    width: 90%
}

.h25 {
    height: 25%;
}

.h50 {
    height: 50%;
}

.h75 {
    height: 75%;
}

.h100 {
    height: 100%;
}

.m32 {
    margin: 32px;
}

.content-margin {
    margin: 16px;
}

.mx32 {
    margin-left: 32px;
    margin-right: 32px;
}

/*--------------------------------------------------------------
 Typography
--------------------------------------------------------------*/

.main-large-semibold {
    font-size: 28px;
    font-weight: 600;
    font-family: 'Open Sans', sans-serif;
}


.font-medium-semibold {
    font-size: 16px;
    font-weight: 600;
    font-family: 'Open Sans', sans-serif;
}

h1 {
    font-family: 'Montserrat', sans-serif;
    font-size: 32px;
}

h2 {
    font-family: 'Open Sans', sans-serif;
    font-weight: 600;
    font-size: 20px;
}


h3 {
    font-family: 'Open Sans', sans-serif;
    font-size: 16px;
}

.label-light {
    font-family: 'Open Sans', sans-serif;
    font-size: 14px;
    color: #707070;
}


/*--------------------------------------------------------------
 Grid style definitions
--------------------------------------------------------------*/

.grid-header {
    display: flex;
    align-items:  center;
    border: 1px solid #E6E6E6;
    border-bottom: 0px;
    font-size: 16px;
    min-height: 58px;
    font-family: 'Open Sans', sans-serif;
    padding-left: 16px;
    padding-right: 16px;
}

.grid-container {
    border: 1px solid #E6E6E6;
    padding-left: 26px;
    padding-bottom: 26px;
}

.grid-container-empty {
    display: flex;
    flex-direction: column;
    justify-content:  center;
    align-items: center;
    border: 1px solid #E6E6E6;
    padding-top: 67px;
    padding-bottom: 67px;
}

.grid-container-empty-title {
    font-family: 'Open Sans';
    font-size: 24px;

}

.grid-container-empty-description {
    font-family: 'Open Sans';
    font-size: 14px;
    color: #707070;
}


/*--------------------------------------------------------------
 Login style definitions
--------------------------------------------------------------*/

.login_screen {
    background-color: #1068A2;
}

.sennco_logo {
    width: 140px;
    height: 176px;
    margin-bottom: 3%;
}

.login_container {
    display: grid;
    grid-template-areas:
    "login_left   login_middle login_right"
    "login_bottom login_bottom login_bottom";

    grid-template-columns: 1fr auto 1fr;
    grid-template-rows: 20% auto;
    grid-gap: 0px;
    height: 100vh;
}

.login_top {
    grid-area: login_top;
}
.login_left {
    grid-area: login_left;
    display: flex;
    flex-grow: 1;
}
.login_middle {
    grid-area: login_middle;
    display: flex;
    flex-direction: column;
    align-items: center;
    min-width: 362px;

}
.login_right {
    grid-area: login_right;
    display: flex;
    flex-grow: 1;
}
.login_bottom {
    grid-area: login_bottom;
}

.google_login {
    width: 200px;
    height: 48px;
}

.login-logo-container {
    display: flex;
    justify-content: center;
}

/*--------------------------------------------------------------
 General UI element style definitions
--------------------------------------------------------------*/

input {
    box-sizing: border-box;
    border: 1px solid #E6E6E6;
    width: 100%;
    min-height: 48px;
    padding: 13px 23px;
}

/* Overriding the width for checkboxes to avoid huge boxes for certain browsers */
.form-check-input {
   width: initial;
}

textarea {
    box-sizing: border-box;
    border: 1px solid #E6E6E6;
    width: 100%;
    min-height: 48px;
    padding: 13px 23px;
}

select {
    border-radius: 0;
    box-sizing: border-box;
    border: 1px solid #E6E6E6;
    background-color: #FFFFFF;
    width: 100%;
    height: 48px;
    min-height: 48px;
    padding: 13px 23px;
}

select:not([multiple]) {
    -webkit-appearance: none;
    -moz-appearance: none;
    background-position: right 50%;
    background-repeat: no-repeat;
    background-image: url('data:image/svg+xml;utf8,<?xml version="1.0" encoding="utf-8"?><!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN" "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd"><svg xmlns="http://www.w3.org/2000/svg" width="14" height="12" version="1"><path d="M4 8L0 4h8z"/></svg>');
    padding: .5em;
    padding-right: 1.5em
}

table.fit {
    width: auto;
}

select.fit {
    width: auto;
}

.fit {
    width: fit-content;
}

.ui-button {
    width: fit-content;
    color: #FFFFFF;
    font-size: 14px;
    background-color: #6FD08C;
    text-transform: uppercase;
    border: 0px solid #000000;
    text-align: center;
    padding: 17px;
    font-weight: 600;
    margin-bottom: 24px;
    user-select: none;
}

.separator-top {
    border-style: solid;
    border-color:  #E6E6E6;
    border-width: 1px 0px 0px 0px;
}

.application_card {
    display: flex;
    flex-direction: column;
    justify-content: space-between;
}

.ext-link {
    display: flex;
    align-items: center;
    justify-content: flex-end;
    line-height: 28px;
    }


.managed_conf_frame {
    width: 568px;
    margin-left: auto;
    margin-right: auto;
}

.qr_code {
    width: 88%;
    height: auto;
}

.enrollment-container {
    display: flex;
    flex-direction: column;
    justify-content: flex-start;
}

.enrollment-input-fields {
    margin-right: 30px;
}
.enrollment-output-fields {
    align-items: ;

}

.email  {
    font-family: 'Open Sans', sans-serif;
    font-size: 14px;
    color: #004A74;
}

.application-name {
    display: flex;
    color: #212121;
    font-size: 20px;
    font-weight: 600;
    font-family: 'Montserrat', sans-serif;
    text-transform: uppercase;
    align-items: center;
    margin-left: 32px;
}

/* Avatar icon for signed in user */
.avatar {
    display: flex;
    justify-content: center;
    align-self: center;
    max-width: 38px;
    max-height: 38px;
    margin-top: 16px;
    margin-right: 32px;
    margin-bottom: 16px;
}

.line {
    height: 2px;
    background-color: #ffffff;
}


.content-separator {
    border-style: solid;
    border-color:  #E6E6E625;
}

.separator-left {
    border-width: 0px 0px 0px 1px;
}

.separator-top {
    border-width: 1px 0px 0px 0px;
}

login-separator {
    visibility: hidden;
}

input.input-box, textarea {
    background: #ffffff25;
    color: #B9B9B9;
    border: 1px solid #E6E6E625;
}

input::-webkit-input-placeholder, textarea::-webkit-input-placeholder {
  color: #B9B9B9;
}
input:-moz-placeholder, textarea:-moz-placeholder {
  color: #B9B9B9;
}


/*--------------------------------------------------------------
 Icon style definitions
--------------------------------------------------------------*/

.appicon_large {
    width: 130px;
    height: 130px;
}

.icon_medium {
    width: 85px;
    height: 85px;
}

.icon_small {
    width: 20px;
    height: 20px;
}

.device_icon {
    width: 38px;
    height: 68px;
}

.warning_icon {
    width: 120px;
    height:100px;
}


/*--------------------------------------------------------------
 Drop down style definitions
--------------------------------------------------------------*/

.dropdown-item {
    font-size: 16px;
    font-family: 'Open Sans', sans-serif;
    color: #707070;
}

.dropdown-item-inner {
    margin-left: 16px;
}

.dropdown-item-inner-active {
    margin-left: 16px;
    font-weight: 600;
}

.dropdown-item.active, .dropdown-item:active {
    background-color: #f8f9fa;
}


.drop-down-content {
    font-size: 14px;
}

/* end of drop down styles */


/*--------------------------------------------------------------
 Generic table style definitions
--------------------------------------------------------------*/
table {
    border: 1px solid #E6E6E6;
    width: 100%;
    font-size: 14px;
    font-family: 'Open Sans', sans-serif;
    table-layout: fixed;
}

th {
    background-color: #FAFAFA;
    font-weight: normal;
    padding-left: 20px;
}

tr {
    border: 1px solid #E6E6E6;
    height: 50px;
    word-break: break-all;
}

td {
    padding-left: 20px;
}

tr:nth-child(odd){background-color: #FFFFFF;}

td:first-of-type {
    padding-left: 20px;
}

td:last-of-type {
    padding-right: 20px;
}

/* Makes table cell to take minimum space */
.table td.fit,
.table th.fit {
    white-space: nowrap;
    width: 1%;
}

table.clean {
    border: 0px solid #E6E6E6;
    padding: 0px;
    margin: 0px;
    width: auto;
}

tr.clean {
    border: 0px solid #E6E6E6;
    margin: 0px;
    padding: 0px;
    height: auto;
}


/*--------------------------------------------------------------
Footer style definitions
--------------------------------------------------------------*/

footer {
    grid-area: footer;
    display: flex;
    background-color: #212121;
    color: #ffffff;
    min-height: 50px;
}

.footerText {
    display: flex;
    color: #999999;
    flex-grow: 1;
    justify-content: flex-end;
    align-self: center;
    margin-right: 32px;
    font-family: 'Open Sans', sans-serif;
    font-size: 13px;
}

.version {
    margin-right: 14px
}

/*--------------------------------------------------------------
 Nav style definitions
--------------------------------------------------------------*/
.nav-mixed {
    display: flex;
    flex-wrap: nowrap;
    flex-grow: 1;
    justify-content: space-between;
}

.nav-mixed a {
    display: flex;
    height: 100%;
}


/* Sidebar styles */

.sidebar-menu-link {
    margin-left: 1em;
    font-family: 'Open Sans', sans-serif;
    font-size: 14px;
}

.sidebar-menu-link.active {
    margin-left: 1em;
    font-family: 'Open Sans', sans-serif;
    font-size: 14px;
    font-weight: 800;
}

.sidebar_logo {
    margin-left: 73px;
    margin-right: 73px;
    margin-top: 16px;
    margin-bottom: 0px;
    max-width: 82px;
    max-height: 82px;
    align-self: center;
}

/* sidebar */

.sidebar-menu,
.section-menu-bar {
    display: flex;
    display: -webkit-flex; /* Safari */
    flex-grow: 1;
    flex-wrap: wrap;
    flex-direction: column;
    -webkit-flex-direction: column; /* Safari 6.1+ */
    justify-content: space-between;
    height: 100%;
    width: 100%;
}

.section-menu-bar {
    flex-direction: row;
    -webkit-flex-direction: row;
}

.sidebar-menu ul {
	list-style-type: none;
	padding: 0;
	margin: 0;
}

.sidebar-menu li a {
	display: block;
	text-decoration: none;
	padding: .6em 1em;
}

/* sidebar menu */

.sidebar-menu .menu,
.section-menu-bar .section-menu {
  clear: both;
  max-height: 0;
  transition: max-height .2s ease-out;
  flex-direction: column;
  display: none;
}

/* sidebar menu icon */

.sidebar-menu .menu-icon,
.section-menu-bar .section-menu-icon{
  cursor: pointer;
  display: inline-block;
  float: right;
  padding: 28px 20px;
  position: relative;
  user-select: none;
}

.sidebar-menu .menu-icon .navicon,
.section-menu-bar .section-menu-icon .section-navicon {
  background: #E6E6E6;
  display: block;
  height: 2px;
  position: relative;
  transition: background .2s ease-out;
  width: 18px;
}

.section-menu-bar .section-menu-icon .section-navicon {
  background: #212121;
}


.sidebar-menu .menu-icon .navicon:before,
.sidebar-menu .menu-icon .navicon:after,
.section-menu-bar .section-menu-icon .section-navicon:before,
.section-menu-bar .section-menu-icon .section-navicon:after{
  background: #E6E6E6;
  content: '';
  display: flex;
  height: 100%;
  position: absolute;
  transition: all .2s ease-out;
  width: 100%;
}

.section-menu-bar .section-menu-icon .section-navicon:before,
.section-menu-bar .section-menu-icon .section-navicon:after {
    background: #212121;
}

.sidebar-menu .menu-icon .navicon:before,
.section-menu-bar .section-menu-icon .section-navicon:before{
  top: 5px;
}

.sidebar-menu .menu-icon .navicon:after,
.section-menu-bar .section-menu-icon .section-navicon:after{
  top: -5px;
}

/* sidebar menu btn, shown for screens less than 48em */

.sidebar-menu .menu-btn,
.section-menu-bar .section-menu-btn {
  display: none;
}

.sidebar-menu .menu-btn ~ .menu,
.section-menu-bar .section-menu-btn ~ .section-section-menu{
    max-height: 0;
}

.sidebar-menu .menu-btn:checked ~ .menu,
.section-menu-bar .section-menu-btn:checked ~ .section-menu  {
  max-height: 340px;
  display: block;
}

.section-menu-bar .section-menu-btn:checked ~ .section-menu  {
  max-height: 340px;
  display: block;
  position: absolute;
  right: 8%;
  margin-top: 70px;
  background-color: #fff;
  background-clip: padding-box;
  border: 1px solid rgba(0,0,0,.15);
  border-radius: .25rem;
  padding: 10px 20px;
}

.sidebar-menu .menu-btn:checked ~ .menu-icon .navicon,
.section-menu-bar .section-menu-btn:checked ~ .section-menu-icon .section-navicon{
  background: transparent;
}

.sidebar-menu .menu-btn:checked ~ .sidebar-menu ul,
.section-menu-bar .section-menu-btn:checked ~ .section-sidebar-menu div{
  display: block;
}

.sidebar-menu .menu-btn:checked ~ .menu-icon .navicon:before,
.section-menu-bar .section-menu-btn:checked ~ .section-menu-icon .section-navicon:before {
  transform: rotate(-45deg);
}

.sidebar-menu .menu-btn:checked ~ .menu-icon .navicon:after,
.section-menu-bar .section-menu-btn:checked ~ .section-menu-icon .section-navicon:after {
  transform: rotate(45deg);
}

.sidebar-menu .menu-btn:checked ~ .menu-icon:not(.steps) .navicon:before,
.sidebar-menu .menu-btn:checked ~ .menu-icon:not(.steps) .navicon:after,
.section-menu-bar .section-menu-btn:checked ~ .section-menu-icon:not(.steps) .section-navicon:before,
.section-menu-bar .section-menu-btn:checked ~ .section-menu-icon:not(.steps) .section-navicon:after {
  top: 0;
}


/*--------------------------------------------------------------
 Search and pager bar styles
--------------------------------------------------------------*/

.sort-table-container {
    display: flex;
    justify-content: space-between;
    flex-wrap: wrap;
}

.includable-search-bar{
    flex-grow: 1;
}

.includable-pager {
    align-self: flex-end;
    flex-grow: 1;
    margin-left: 10px;
}

/*--------------------------------------------------------------
 Error message style definitions
--------------------------------------------------------------*/

.error {
    color: #EC2027;
    font-size: 14px;
    font-family: 'Montserrat', sans-serif;
}

/* Errors in a popup or inline box*/

.error-popup-arrow-up {
     background: #F4797D;
    -webkit-border-radius: 10px;
    -moz-border-radius: 10px;
    border-radius: 10px;
    width: 360px;
    min-height: 100px;
    margin-top: 14px;
    z-index: 1000;
    position: absolute;
    color: #fff;
    display: flex;
    align-content: center;
    align-items: center;
    padding: 16px;
    background-repeat: no-repeat;
    padding-left: 30px;
    align-self: center;
    box-shadow: 0px 2px 5px #454545;
}

.error-popup-arrow-up:after {
    content: " ";
    background: #F4797D;
    width: 20px;
    height: 20px;
    position: absolute;
    margin-left: 50px;
    margin-top: -48px;
    display: block;
    -webkit-transform: rotate(45deg);
    -moz-transform: rotate(45deg);
    -o-transform: rotate(45deg);
    -o-transform: rotate(10deg);
}

error-popup-msg {
    color: #fff;
    background-image: url('/images/ic_error-2cc2052775fd92817b8591ee67fa97f9.svg');
    background-repeat: no-repeat;
    padding-left: 50px;
    text-align: left;
    font-size: 15px;
}

.error-box {
    background: #FCC5C6;
    color: #EC2027;
    padding: 8px 8px 8px 20px;
    min-height: 48px;
    max-width: 438px;
    display: none;
    align-items: center;
    align-content: center;
    margin-top: 16px;
}

.error-box-msg {
    text-align: left;
    background-image: url('/images/ic_error_small-2aef9645d541ee86ca3835032a2679ba.svg');
    background-repeat: no-repeat;
    padding-left: 40px;
    font-size: 14px;
}


    .page {
  display: flex;
  min-height: 100vh;
  flex-direction: column;
}

.content-area {
  flex: 1;
}


/*--------------------------------------------------------------
 Firefox specific
--------------------------------------------------------------*/
/*  TODO: Ensure that the layout works without this bubblegum and remove this */
@-moz-document url-prefix() {
    .section-menu-bar .section-menu-btn:checked ~ .section-menu  {
      margin-top: 140px;
    }
}

/*--------------------------------------------------------------
 Layout for screens that are less than 896px but not wider than tablet
--------------------------------------------------------------*/
@media screen and (min-width: 56em) {

    .display_flex {
        flex-direction: row;
    }

    .section-menu-bar .section-menu-icon {
        display: none;
    }

    .section-menu-bar .section-menu {
        display: flex;
        flex-direction: row;
    }

    .section-menu-bar .section-menu-btn:checked ~ .section-menu  {
        max-height: 340px;
        display: flex;
        position: initial;
        right: clear;
        margin-top: initial;
        background-color: transparent;
        background-clip: initial;
        border: none;
        border-radius: initial;
        padding: initial;
    }

    .enrollment-container {
        flex-direction: row;
    }

    .content-width{
        width: 50%
    }


}


/*--------------------------------------------------------------
 Layout for larger screen
--------------------------------------------------------------*/
@media screen and (min-width: 48em) {

    .page {
        display: grid;
        grid-template-rows: auto 73px;
        grid-template-columns: 228px 1fr;
        grid-template-areas:
        "sidebar content"
        "footer footer";
        height: 100vh;
    }

    .content-area {
        overflow: auto;
    }

    .content-container {
        display: grid;
        grid-template-rows: 73px auto;
        height: calc("100vh - " 73px);
    }

    .content-header {
        position: sticky;
        top: 0;
        background-color: #E6E6E6;
        z-index: 1000;
    }

    .content-body {
        overflow: auto;
        margin: 0px;
    }

    .content-margin {
        margin: 34px;
    }

    .display_flex {
        display: flex;
        flex-direction: row;
    }

    .login_container {
        display: grid;
        grid-template-areas:
        "login_top    login_top    login_top"
        "login_left   login_middle login_right"
        "login_bottom login_bottom login_bottom";

        grid-template-columns: 1fr auto 1fr;
        grid-template-rows: 20% auto;
        grid-gap: 0px;
        height: 100vh;
    }

    .sennco_logo {
        width: 192px;
        margin-bottom: 0;
    }

    login-separator {
        visibility: visible;
    }

   /* Sidebar styles for larger screens */

    .sidebar-sections {
       display: flex;
       flex-grow: 1;
       flex-wrap: wrap;
       flex-direction: column;
       justify-content: space-between;
    }

    .sidebar-menu .menu-icon {
        display: none;
    }

    .sidebar-menu .menu {
        display: flex;
    }

    .sidebar_logo {
        margin-bottom: 32px;
    }
}

/*--------------------------------------------------------------
 Theme color
--------------------------------------------------------------*/
:root {
    --bodyBackgroundColor: #FAFAFA;
    --sidebarBackgroundColor: #1068A2;
    --sidebarMenuBackground: #1068A2;
    --sidebarTextColor: #FFFFFF;
    --sidebarHoverColor: hsla(0, 100%, 100%, 0.8);
    --sidebarSelectedColor: #062C45;

}

/*--------------------------------------------------------------
 Brand color definitions
--------------------------------------------------------------*/

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

.vl_light_gray {
    color: #FAFAFA;
}

/* sidebar menu coloring */

.sidebar {
    background-color: var(--sidebarBackgroundColor);
}

.sidebar-menu ul {
	background: var(--sidebarMenuBackground);
}

.sidebar-menu li a {
	color: var(--sidebarTextColor);
}

.sidebar-menu li a:hover {
	color: var(--sidebarHoverColor);
}

.sidebar-menu .sidebar-menu-item.active {
    font-size: 16px;
    font-weight: 600;
    background-color: #66DFFE;
    background-image: -webkit-linear-gradient(0deg, #66DFFE 5px, var(--sidebarSelectedColor) 5px);
}