/* RESETS --------- */
    * { box-sizing: border-box; }
    body { margin: 0; padding: 0; font-family: "Helvetica Neue", Helvetica, Arial, sans-serif; }
    h1, h2, h3, h4, h5 { font-weight: normal; }
    a { text-decoration: none; font-size: 14px; }
    button { cursor: pointer; }


    /* LOGIN --------- */
    body.login { background-color: #000000; color: #FFFFFF; }

    body.login a { color: #e57200; display: inline-block; padding-bottom: 0px; border-bottom: 1px solid #e57200; margin: 25px 0 0px 0px; float: left}
    body.login .container { display: block; width: 100%; text-align: left; background: none; }
    body.login p { line-height: 1; }

    .logo-top-left { position: absolute; left: 0; top: 0; height: 100px; width: 300px;  background-image: url(/admin/resources/images/logo_inner.svg); background-repeat: no-repeat; background-size: contain; text-align: left; text-indent: -9999px; margin: 30px 0 0 35px; }

    .logo-login-container { margin-left: auto; margin-right: auto;}
    .logo-login-product-1 { height: 120px; width: 370px; background-image: url(/admin/resources/images/logo_cloudpath_lock_wifi2.svg); background-repeat: no-repeat; background-size: contain; background-position: center; margin: 110px auto 5px auto; }
    .logo-login-product-2 { height: 120px; width: 370px; background-image: url(/admin/resources/images/logo_product_name.svg);         background-repeat: no-repeat; background-size: contain; background-position: center; margin: 0 auto 0 auto; }

    .form-login { display: block; width: 370px; margin: auto; text-align: center; }
    .form-login p.sign-up { margin-top: 80px; }
    .form-login p.sign-up a { float: unset; margin-top: 5px; }
    .form-login p.account-specific { font-size: 18px; color: #E57200; margin-top: 5px }
    .form-login p.sso-section { margin-top: 80px; }
    .form-login p.sso-section a { float: unset; margin-top: 10px; cursor: pointer; background: #E57200; font-size: 14px; color: #fff; border: 0; border-radius: 5px; padding: 6px 20px; }
    .login h2 { font-size: 18px; color: #fff; text-align: center; margin-bottom: 15px; }
    .login span.inline-prompt { font-size: 14px; }
    .login p.prompt { font-size: 12px; color: #ccc; text-align: center; }

    .form-login input[type=text], .form-login input[type=password] { display: block; margin: 10px 0; background: #fff; border: 0; padding: 15px; width: 100%; font-size: 14px; border-radius: 5px; }
    .form-login button { display: block; width: 105px; height: 25px; margin: 22px 0; background: #E57200; font-size: 14px; color: #fff; border: 0; border-radius: 5px; float: right; }
    .form-login select { width: 100%; padding: 15px; font-size: 14px; }

    p.link-credentials { margin-top: 15px; }
    p.link-credentials a { font-size: 12px; color: #ddd; border-bottom-color: #ddd; }

    /* LAYOUT --------- */
    .container { display: flex; min-height: calc(100vh - 100px); background: #f3f3f4; }
    main { width: calc(100% - 236px); margin: 0 15px; padding: 0 20px; min-width: 1117px; }

    /* HEADER --------- */
    header {  padding: 12px 20px 6px; display: flex; justify-content: space-between; align-items: center; background: #ebebeb; /* min-width: 1366px; */ }
    header .logo img { }
    header .utility {  display: flex; justify-content: space-between; }
    header .utility a { display: block; text-align: center; color: #919191; margin: 10px 25px; font-size: 12px; }
    header .utility a:hover { color: #2d8de5; }
    header .utility i { font-size: 24px; line-height: 1.25; }


    /* LEFT NAVIGATION --------- */
    nav { width: 206px; background: #2d353c; color: #ccc; }
    nav a { color: inherit; }
    nav > ul { margin: 0; padding: 0; list-style: none; }
    nav > ul > li { padding: 1px 0; }
    nav > ul > li:first-child { padding-top: 0; }
    nav > ul > li > a { display: block; padding: 0 15px; background: #1a2129; color: #999; font-size: 14px; line-height: 52px; }
    nav > ul > li.collapsed > a { background: #1a2129 url(../images/bg_arrow_rt.png) 95% no-repeat; }
    nav > ul > li.expanded > a { background: #1a2129 url(../images/bg_arrow_dn.png) 95% no-repeat; }

    nav > ul > li > a:hover,
    nav > li.collapsed > a:hover,
    nav > li.expanded > a:hover,
    nav > ul ul > li > a:hover { background-color: #111; color: #eee; }

    nav li.selected > a, nav li.selected > a:hover { background: #2d8de5; color: #fff; font-weight: bold; }

    /* NAV: Second Level --- */
    nav > ul > li.collapsed > ul { display: none; }
    nav > ul ul { margin: 0 0 0 15px; padding: 0; list-style: none;  border-left: 1px solid #2d8de5; }
    nav > ul ul > li { padding: 1px 0; }
    nav > ul ul > li:last-child { padding: 1px 0 0 0; }
    nav > ul ul > li:first-child { padding-top: 0; }
    nav > ul ul > li > a { display: block; padding: 0 15px; background: #1a2129; color: #999; font-size: 14px; line-height: 52px; }


    /* --- Sysinfo --- */
    .sysinfo { padding: 10px 10px 10px 15px; color: #919191; }
    .sysinfo h3 { font-size: 18px; }
    .sysinfo h3 i { margin-right: 5px; }
    .sysinfo ul { margin: 0 0 0 23px; padding: 0; list-style: none; }
    .sysinfo li { margin: 6px 0; font-size: 12px; }
    .sysinfo li .label { display: inline-block; width: 80px; }
    .sysinfo p { margin: 10px 10px 10px 23px; font-size: 11px; }
    .sysinfo a { text-decoration: underline; }

    /* DASHBOARD --------- */
    main h1 { font-size: 34px; font-weight: bold; color: #c3c3c3; }


    .bottom-row { display: flex; margin-bottom: 50px; }
    .bottom-row > div { height: 322px; margin: 10px; border-radius: 6px; min-width: 251px; width: 25%; }
    .bottom-row > div:first-child { margin-left: 0; }
    .bottom-row > div:last-child { margin-right: 0; }


    div.todo, div.activities { background: #fff; }

    div.cpx-footer-copyright { text-align: center; font: 9px Verdana,arial,sans-serif; color: #999999; width: 100%; display: inline-block; margin-top: 40px; }

    div.todo ul { margin: 0; padding: 0; list-style: none; height: 210px; overflow: hidden; overflow-y: auto; }
    div.todo li { margin-bottom: 15px; clear: both;  }
    div.todo li label { display: table-row; }
    div.todo li input { display: table-cell; vertical-align: top; }
    div.todo li span { display: table-cell; vertical-align: top; padding-top: 3px;}

    div.activities table { border-collapse: collapse; }
    div.activities td { padding: 5px; }
    div.activities td.critical { color: #c00; }

    .f2-vertical { display: flex; flex-direction: column; justify-content: space-between; align-content: center; }
    .f2-vertical > div { flex: 1; background: #fff; margin-bottom: 15px; border-radius: 6px;  padding: 25px 15px 15px; }
    .f2-vertical > div:last-child { margin-bottom: 0; }

    .widget { padding: 15px 20px; font-size: 12px; color: #777; }
    .widget.centered { text-align: center; }

    .widget h2 { font-size: 16px; padding: 20px 0 15px; font-weight: bold; color: #aaa; border-bottom: 2px solid #ccc; }

    .widget .round { height: 60px; width: 60px; margin: 0 auto; border-radius: 50%; background: #fff; border: 2px solid #ccc;
        font-size: 22px; line-height: 60px; }
    .widget .warning { border-color: #fc7d00; color: #fc7d00; }
    .widget .ok { border-color: #0ed876; color: #0ed876; }
    .widget .alert { background: #c00; border-color: #c00; color: #fff; }
    .widget h3.kpi { font-size: 16px; color: #999; }



    div.top-row { display: flex; margin-bottom: 15px; }

    div.top-row > div.primary { min-width: 704px; height: 622px; margin: 0 15px 0 0; background: #fff; border-radius: 6px; }

    div.f3-vertical { display: flex; flex-direction: column; width: 100%; justify-content: space-between; }
    div.f3-vertical > div { flex: 1; background: #fff; min-width: 341px; border-radius: 6px; margin-bottom: 15px; }
    div.f3-vertical > div:last-child { margin-bottom: 0; }
    div.f3-vertical > div.f2-horizontal { display: flex; flex-direction: row; background: transparent;  }
    div.f2-horizontal > div { flex: 1; background: #fff; margin-right: 15px; border-radius: 6px; }

    div.f2-horizontal > div:last-child { margin-right: 0; }

    /* WORKFLOW STEPS -------*/

    .workflow-container { max-width: 1070px; margin: 40px 45px; }

    h2.prompt { padding: 18px 25px; margin: 0 0 0; background: #f3f8ff; font-size: 16px; font-weight: bold; color: #a4a4a4; }

    div.step-form { font-size: 14px; padding: 45px; background: #fff; }
    h2.prompt + form > div.step-form { border-bottom: 45px solid #f3f8ff }
    div.step-form h3 { background: #ebebeb; text-align: center; color: #737373; margin: 15px 0; padding: 7px; font-size:  14px; font-weight: bold; border-radius: 2px; }

    div.step-form > ul { list-style-type: none; margin: 0; padding: 0; }
    div.step-form > ul > li { display: flex; align-items: flex-start; margin-bottom: 25px; }
    div.step-form > ul > li > label { flex: 0 1 20%; margin-right: 5px; font-weight: bold; color: #737373; line-height: 24px; }
    div.step-form > ul > li > div { flex: 0 2 65%; }

    div.step-form input[type=text],
    div.step-form textarea,
    div.step-form select { border: 1px solid #d3d3d3; padding:  5px 10px; width: 100%; border-radius: 3px; }

    div.step-form textarea { height: 180px; }

    div.step-form input[type=checkbox] {  }

    /* Form buttons -----*/
    .form-action { padding: 45px 0; }
    .form-action:after { content: ""; clear: both; direction:  table; }

    .form-action > button { background: #2b8de5; color: #fff; font-size: 14px; font-weight: bold; border: 0; padding: 13px 20px; white-space: nowrap; text-align: center; }
    .form-action > button.btn-next { margin-left: 10px; }
    .form-action > button.btn-next,
    .form-action > button.btn-back { float: right; }
    .form-action > button.btn-next:after { content:""; display: inline-block; vertical-align: middle; margin-left: 15px; height: 0; width: 0; border-style: solid; border-width: 7px 0 7px 15px; border-color: transparent transparent transparent #ffffff; }

    .form-action > button.btn-back:before { content:""; display: inline-block; vertical-align: middle; margin-right: 15px; height: 0; width: 0; border-style: solid; border-width: 7px 15px 7px 0; border-color: transparent #ffffff transparent transparent; }

    .form-action > button.btn-disabled { background: #d6d6d6; color: #fff; }

    /* List of radio buttons -------*/
    div.radio-list > ul { list-style-type: none; margin: 0; padding:  0; }
    div.radio-list > ul > li { margin-bottom: 30px; position: relative; padding-left: 40px; }
    div.radio-list > ul label { display: block; font-weight: bold; color: #707070 }
    div.radio-list > ul li > div { display:  block; font-weight:  normal; font-size: 12px; color: #a4a4a4; margin-top: 15px; }
    div.radio-list label > .radio { position: absolute; left:  0; top: 0; }

    .substep-actions { margin: 50px 0; text-align: right; }

    .substep-actions > button { background: #2b8de5; color: #fff; border: 0; padding: 6px 10px; width: 80px; text-align: center; }

    /* Sub form -----*/

    div.radio-list .sub-form label { font-weight: normal; margin-bottom: 10px; }
    div.radio-list .sub-form.inline-form label { display:  inline-block; margin: 0 10px 0 0; }
    div.radio-list .sub-form.inline-form select { width: 30%; }
    div.radio-list .sub-form select,
    div.radio-list .sub-form input[type=text],
    div.radio-list .sub-form textarea { width: 40%; }

    /* Configuration page ---------------------*/

    /* Breadcrumbs */
    .breadcrumbs { list-style-type: none; padding: 0; display: flex; margin: 25px 0; }
    .breadcrumbs > li { color: #737373; font-size: 18px; font-weight: bold; }
    .breadcrumbs > li > a { color: #a4a4a4; }
    .breadcrumbs > li:after { content: "\0003E"; display: inline-block; margin: 0 8px; vertical-align: middle; font-weight: normal }
    .breadcrumbs > li:last-child:after { display: none; }

    /* Table actions ---*/
    .table-actions { display: flex; justify-content: space-between; margin-bottom: 20px; }
    .table-actions .btn-action { display: inline-block; padding: 8px 10px 8px 28px; max-width:80px;  background: #fff; border: 1px solid #d6d6d6; border-radius: 4px; font-size: 12px; color: #737373; font-weight:  bold; }
    .btn-action.btn-create { background: #fff url(../images/icon_create.png) no-repeat 8px 7px; }
    .btn-action.btn-delete { background: #fff url(../images/icon_delete.png) no-repeat 8px 9px; }
    .btn-action.btn-export { background: #fff url(../images/icon_export.png) no-repeat 7px 7px; }


    /* Table --*/
    table.config-table { border-collapse: collapse; width: 100%; color: #737373; border: 1px solid #e2e2e2; margin-bottom:  15px; }
    table.config-table th { text-align: left; padding: 15px; background: #d6d6d6; border-right: 1px solid #fff; font-size: 14px; }
    table.config-table th:last-child { position: relative; border: 0; }
    table.config-table th.sortable:after { content: ""; display: inline-block; vertical-align: middle; width: 0; height: 0; margin-left: 10px; border-style: solid; border-width: 10px 5px 0 5px; border-color: #a4a4a4 transparent transparent transparent; }
    table.config-table .table-settings { position:  absolute; top: 15px; right: -30px; }
    table.config-table td { padding: 10px 15px; background: #fff; border-bottom: 1px solid #e2e2e2; font-size: 12px; }
    table.config-table tr.selected td { background: #ebebeb; }
    table.config-table tr.selected td:first-child { font-weight: bold; }

    .icon-published, .icon-pending { width: 12px; height: 12px; display: inline-block; margin-right: 10px; border-radius: 50%; }
    .icon-published { background: #008e90; }

    /* Pagination ----*/
    .pagination { text-align: right; display: flex; justify-content: flex-end; font-size: 12px; line-height: 25px;}
    .pagination > span { display: inline-block; vertical-align: middle; font-size: 11px; font-weight: bold; color: #737373; margin-right: 15px;}
    .pagination > a { display: inline-block; background: #fff; width: 25px; height: 25px; border: 1px solid #ddd; border-width: 1px 0 1px 1px; text-align: center; margin: 0; color: #117fe2; }
    .pagination > a.page-prev { border-radius: 3px 0 0 3px; }
    .pagination > a.page-next { border-radius: 0 3px 3px 0; border-right: 1px solid #ddd; }
    .pagination a.current { background: #c0d2e4; color: #737373}

    .icon-pending { background: #ffd479; }

    /* Tabs ------------------*/
    a { color: #117fe2; }
    div.tabs-container { color: #737373; font-size:  14px; }
    div.tabs-container ul.tabs { display: flex; list-style-type: none; margin:  0; padding: 0; font-size: 14px; border-bottom: 2px solid #d6d6d6;  }
    div.tabs-container ul.tabs li { margin-right: 2px; border: 2px solid #d6d6d6; border-width: 2px 2px 0 2px; border-radius: 8px 8px 0 0; background: #ebebeb; }
    div.tabs-container ul.tabs li:first-child { border-left-width: 2px;}
    div.tabs-container ul.tabs li:last-child { border-right-width: 2px;}
    div.tabs-container ul.tabs li a { display: block; padding: 15px; color: #737373; }
    div.tabs-container ul.tabs li.active { background: #fff; margin-bottom: -2px; }
    div.tabs-container ul.tabs li.active a { color: #117fe2; font-weight: bold}

    div.tab-content { border: 2px solid #d6d6d6; border-top: 0; padding: 20px; display: none; font-size: 14px; background: #fff; }
    div.tab-content.active { display:  block; }

    ul.steps { list-style-type: none; margin: 0; padding: 0; }
    ul.steps li { display: flex; justify-content: space-between; padding: 20px; background: #f3f3f4; }
    ul.steps li:nth-child(even) { background: #ebebeb; }
    ul.steps li.insert-step { background: url(../images/icon_insert_arrow.png) no-repeat 20px center; padding-left: 50px; font-style: italic; font-size:  12px;}
    ul.steps li div.step-actions a { display: inline-block; vertical-align: middle; margin: 0 14px; }
    ul.steps li div.step-actions a:last-child { margin-right: 0; }

    ul.steps li strong { margin-right: 22px; }
    ul.steps li div a { font-weight:  bold; }

    /* Custom checkbox ----*/

    span.checkbox { display: inline-block; position: relative; width: 20px; height: 20px; border: 1px solid #d6d6d6; border-radius: 2px; }
    span.checkbox.checked:before { content: "\2713"; color: #737373; line-height: 18px; width: 18px; text-align: center; display: inline-block; font-weight: bold}
    span.checkbox > input { visibility: hidden; position: absolute; left: 0; top: 0; }


    /* Custom radio ----*/

    span.radio { display: inline-block; position: relative; width: 20px; height: 20px; border: 1px solid #d6d6d6; border-radius: 50%; text-align:  center}
    span.radio.checked:before { content: ""; background: #737373; height: 10px; width: 10px; text-align: center; display: inline-block; border-radius: 6px; margin-top: 4px; }
    span.radio > input { visibility: hidden; position: absolute; left: 0; top: 0; }

    /* Tooltip -------------*/

    .tooltip { display: inline-block; position: relative; vertical-align: middle; }
    .tooltip > a { }
    .tooltip > .tip-text { display: none; position: absolute; left: 100%; top: 50%; transform: translateY(-50%); margin-left: 8px; z-index: 1;  background: rgba(0, 0, 0, 0.8); color: #a4a4a4; border-radius: 3px;  padding: 15px; font-size: 14px; width: 200px; }
    .tooltip > .tip-text p { margin: 0; }
    .tooltip > .tip-text a { color: #117fe2; }
    .tooltip > .tip-text:before { content: ''; position: absolute; left: -8px; top: 50%; margin-top: -8px; width: 0; height: 0; border-style: solid; border-width: 8px 8px 8px 0; border-color: transparent rgba(0,0,0,0.8) transparent transparent; }
    .tooltip.pre-hover > .tip-text { display: block; visibility: hidden; }
    .tooltip.hover > .tip-text { visibility: visible; }

    /* FOOTER --------- */
    footer { }

    @font-face {
      font-family: 'Material Icons';
      font-style: normal;
      font-weight: 400;
      src: url(/admin/resources/fonts/MaterialIcons-Regular.eot); /* For IE6-8 */
      src: local('/admin/resources/fonts/Material Icons'),
      local('/admin/resources/fonts/MaterialIcons-Regular'),
      url(/admin/resources/fonts/MaterialIcons-Regular.woff2) format('woff2'),
      url(/admin/resources/fonts/MaterialIcons-Regular.woff) format('woff'),
      url(/admin/resources/fonts/MaterialIcons-Regular.ttf) format('truetype');
    }

    .material-icons {
      font-family: 'Material Icons';
      font-weight: normal;
      font-style: normal;
      font-size: 24px;  /* Preferred icon size */
      display: inline-block;
      /*  line-height: 1; */
      text-transform: none;
      letter-spacing: normal;
      word-wrap: normal;
      white-space: nowrap;
      direction: ltr;
      vertical-align: middle;
      margin-right: 5px;

      /* Support for all WebKit browsers. */
      -webkit-font-smoothing: antialiased;
      /* Support for Safari and Chrome. */
      text-rendering: optimizeLegibility;

      /* Support for Firefox. */
      -moz-osx-font-smoothing: grayscale;

      /* Support for IE. */
      font-feature-settings: 'liga';
    }

    body.login p.quickStartGuide  {
      margin-top: 40px;
    }

    p.quickStartGuide a {
      color: #ccc;
      border: 0px;
      margin: -6px 0px 0px -4px
    }

    div#error { text-align: center; color: #E57200; }