* {box-sizing: border-box!important; font-family: 'Varela Round', sans-serif;}

body {background: rgb(0 0 0 / 10%); margin: 0; font-size: 14px; color:#151a36; height: 100%}

p {line-height: 1.75em;}

h1, h2, h3, h4 {font-weight: 400;}
.red-text {
    color:red;
}
.main-title {font-weight: 400; color:#4069b6; font-size: 40px;}
.sub-title {font-weight: 300; color:#1e2a47; font-size: 30px;}
.sub-sub-title {font-weight: 900; color:#1e2a47; font-size: 24px;}
.popup-title {font-weight: 900; color:#1e2a47; font-size: 18px;}

.btn {display:inline-block; text-decoration: none; text-align:center; padding: 10px 20px; background:#fff; border-radius: 3px; -moz-border-radius: 3px; 
  border: 3px solid #3e7597; cursor: pointer; color:#3e7597; font-size: 1.2em;}

.btn:hover {background:#3e7597; color:#fff;}

.category {padding-left: 15px;}
.category-name {font-weight: bold;}
.solutions {padding-left: 15px}
.txt-center {text-align:center;}

.clear-after::after {clear:both; display:block; content:"";}
.margin-top-bot {margin: 20px 0;}
.container {max-width: 1400px; margin: 0 auto; position: relative;}

.stretch {width: 100%;}

.width30 {float:left; width: 30%;}
.width70 {float:right; width: 65%;}

.width50 {float:left; width: 47.5%; margin-right: 5%;}
.width50:last-child {margin-right: 0;}

.width25 {float:left; width: 21.25%; margin-right: 5%;}
.width25:last-child {margin-right: 0;}


.width33 {float:left; width: 30%; margin-right: 5%;}
.width33:last-child {margin-right: 0;}

.side-col-left {float:left; width: 70%;}
.side-col-right {float:right; width: 28%;}

.invalid {border: 2px solid red!important;}

.k-edit-cell select {padding:8px}
hr {margin: 2em 0; border: 0; height: .5px; background:#ccc;}

.relative {position:relative}

#main-wrapper {max-width: 1600px; margin: 0 auto; -webkit-box-shadow: 20px 20px 50px 0 rgba(0,0,0,.05); box-shadow: 20px 20px 50px 0 rgba(0,0,0,.05);}

.masthead {width: 100%;  background: #151a36; padding: 30px; position:relative;}
.masthead h1 {color:#fff; padding: 5px 10px 5px 70px; background:url(../images/logo.png) no-repeat; background-size: auto 100%; margin :0; font-size: 24px; color:rgba(255, 255, 255, 0.886);}

.header-search {position:absolute; left: 400px; right: 400px; top: 50%; margin-top: -30.5px;}
.header-search input {width: 100%; padding: 20px; background: rgba(255,255,255,.1); color:#fff; border: 0; font-size: 1.25em;}

.header-meta {position:absolute;  right: 20px; top: 38%; margin-top: -21px; color:#fff; text-align:right;}
.header-meta a {text-decoration:none; color:#fff; display:inline-block; padding: 0px 10px 0px 10px;}
.header-meta a:last-child { padding: 0px 0px 0px 10px;}
.header-meta a:hover {text-decoration:underline;}

.sub-menu {border-bottom: 1px solid rgba(255,255,255,.25); border-top: 1px solid rgba(255,255,255,.25); 
  background-image: linear-gradient(to right, #161b34, #191e3a, #1b2141, #1e2547, #21284e, #21284e, #21284e, #21284e, #1e2547, #1b2141, #191e3a, #161b34);
    display: flex; padding: 10px; }
.sub-menu a {background:#288fcf00; padding: 1em; font-weight: 700; flex-grow: 1; text-align:center; display:none;
  color:#fff; text-decoration: none; text-transform:uppercase; border-radius: 3px; moz-border-radius: 3px;
  transition: all .2s ease-in;     -moz-transition: all .2s ease-in; /* Firefox 4 */     -webkit-transition: all .2s ease-in; /* Safari and Chrome */     -o-transition: all .2s ease-in; /* Opera */ }
.sub-menu a:hover, .sub-menu a.active {
  background:#ffffff22;
  
}

.sub-menu a span {display:inline-block; background:red; padding: 5px; margin-left: 10px; border-radius: 3px; font-size: .8em;}


#content {display:table; width: 100%; min-height: 600px;}
#content-left, .content-left {width: 350px; display: table-cell;  background: #fff; border-right: 1px solid #ccc; vertical-align: top; }
    .left-col-padding {padding: 30px;}
    .left-col-title {font-size: 1.5em; padding-bottom: 15px; border-bottom: 1px solid #ccc; margin-bottom: 15px;}
    .left-col-subtitle {font-size: .8em; text-transform: uppercase; position:relative; margin-bottom: 15px;}
    .left-col-subtitle span {background:#fff; position:relative; z-index:1; padding-right: 10px;}
    .left-col-subtitle::after {content:""; position:absolute; top: 50%; margin-top: -1px; right: 0; left: 0; height: 1px; background:#ccc;}

    .left-col-btn-container {margin-bottom: 30px;}
    .left-col-btn-container a {display:block}
    .left-col-search-container {margin-bottom: 15px;}
    .left-col-search-container input {display:block; padding: 10px; width: 100%; border-radius: 3px; -moz-border-radius: 3px; border: 1px solid #ccc; font-size: 1em;}

    /*Tree Styles */

    .client.no-children .toggle {display:none;}

    .client {padding: 7px 0; cursor:pointer;}
    .client .toggle, .category .toggle {border: solid #151a36;border-width: 0 2px 2px 0; display: inline-block;padding: 3px; margin-right: 7px;}
    .client .open, .category .toggle.open {transform: rotate(45deg); -webkit-transform: rotate(45deg);}
    .client .closed, .category .toggle.closed {transform: rotate(-45deg); -webkit-transform: rotate(-45deg);}
    


    .clients .clients {padding: 15px 0 15px 15px; border-left: 1px solid #ccc; margin-left: 3px;}

    .client-name.selected {color:#000;     background: #673ab71f; padding: 3px 5px; border-radius: 3px; -moz-border-radius: 3px;}


    /*Solutions Left Column List */
    .category { }
    .sub-categories {padding: 0 0 0 15px;}    
    .category-name {}
    .solutions {padding-left: 20px;}

    .category label {margin: 10px 0 !important; display:block;}

    #solutions-grid .solution {margin: 10px 0; position: relative;}
    #solutions-grid .solution::before {content:''; display:inline; width: 7px; height: 7px; background:#673ab7; border-radius: 50px; -moz-border-radius: 50px; position: absolute; left: -15px; top: 3px;}
    #solutions-grid .solution:hover {cursor: pointer;}

    #solutions-grid .solution:first-child {margin: 0 0 10px 0;}
    #solutions-grid .solution:last-child {margin: 10px 0 0 0;}


    .pricing-grids .form-item input {font-size: 2em !important;}
    .pricing-grids input:read-only {border-color:#dfdcdc !important; background: #f5f5f5 !important;}

    .pricing-table {width: 100%; border-collapse: collapse; border: 1px solid #ccc; font-size: 1em;}
    .pricing-table th {border-bottom: 1px solid #ccc;  padding: 10px 0; text-transform: uppercase; font-size:.8em; background:#161b34; color:#fff;}
    .pricing-table th:last-child {text-align:right; padding-right: 10px;}

    .pricing-table tr td {border-bottom: 1px solid #ccc; padding: 10px;}
    .pricing-table tr td input {padding: 5px; width: 100%; text-align:center;}
    .pricing-table tr td:nth-child(2) {width: 200px;}
    .pricing-table tr td:last-child input {text-align:right;}


    
    .analysis-subtitle {font-size: .8em; text-transform: uppercase; position:relative; margin-bottom: 15px; margin-top: 30px;}
    .analysis-subtitle span {background:#fff; position:relative; z-index:1; padding-right: 10px;}
    .analysis-subtitle::after {content:""; position:absolute; top: 50%; margin-top: -1px; right: 0; left: 0; height: 1px; background:#ccc;}

    .analysis-table {width: 100%; border-collapse: collapse; border: 1px solid #ccc; font-size: 1em;}

    .analysis-group {width: 25%;}
    .analysis-margin {background:#f2f2f2;}
    .analysis-market {background:#e5e5e5;}
    .analysis-minmarg {background:#d6d5d5;}

    .analysis-hours {max-width: 50px; text-align:center;}
    .analysis-price {text-align:right;}

    .analysis-table th {border-bottom: 1px solid #ccc;  padding: 10px; font-size:1em;}    
    .analysis-table th:last-child { padding-right: 10px;}

    .analysis-table tr td {border-bottom: 1px solid #ccc; padding: 10px; border-right: 1px solid #ccc;}
    .analysis-table tr td input {padding: 5px; width: 100%; text-align:center;}
    /*.analysis-table tr td:nth-child(2) {width: 200px;}*/
    .analysis-table tr td:last-child input {text-align:right;}

    .tbl-sub-total {background: rgb(98 55 240 / 7%); text-align:center; font-weight: bold;}
      .tbl-sub-total-2 {background: rgb(98 55 240 / 12%);}
      .tbl-sub-total-3 {background: rgb(98 55 240 / 19%);}
      .tbl-sub-total-4 {background: rgb(98 55 240 / 26%);}
    .tbl-sub-total-right {text-align: right;}

    .tbl-sales-commission {text-align:right;}
    .tbl-tax {text-align:right;}
    .tbl-total {text-align:right; font-size: 1.25em; color:#fff; border-right: 1px solid rgb(103,58,183) !important;}
    .tbl-total-1 {background:rgba(103,58,183,.75);}
    .tbl-total-2 {background:rgba(103,58,183,.80);}
    .tbl-total-3 {background:rgba(103,58,183,.85);}
    .tbl-total-4 {background:rgba(103,58,183,.9);}
    


#content-right {width: auto; display: table-cell; background:#f5f5f5; vertical-align: top;}
    .content-right-title-section {padding:30px; 
      /*background-image: linear-gradient(to left top, #6ebde4, #5db1df, #4ba6da, #3a9ad5, #288ecf, #2488c8, #1f82c2, #1a7cbb, #247bb2, #2e79a9, #3677a0, #3e7597);*/
      background-image: linear-gradient(to right, #845ec2, #965dc0, #a75dbe, #b75cbb, #c55cb7, #d55daf, #e25fa6, #ed639d, #f86c8f, #fe7982, #ff8778, #ff9671);
        }

    #client-name-title, #solution-name-title, #crm-interest-form-heading {color:#fff; font-size: 2em;}

    .tabs {margin-top: 25px;}
    .tabs a {color:#fff; text-decoration:none; display:inline-block; position:relative; padding: 10px 15px; border-radius: 3px; -moz-border-radius: 3px;}
    .tabs a.active {background:rgba(255, 255, 255, 0.1); font-weight: 900;}
    .tabs a.active::after {content:""; position: absolute; width: 5px; height: 5px; position: absolute; display:block; background:#ffc000; left: 50%; margin-left: -2.5px; border-radius: 20px; -moz-border-radius: 20px; bottom: -15px;}

    .tab-content {padding: 30px;}    

    .top-level-insight-container {display: flex; border-radius: 3px; overflow:hidden;
      -moz-border-radius: 3px;
     }
    .top-level-insight {flex-grow: 1; border-right: 0 solid #ccc; }    
    .top-level-insight:last-child {border-right: 0;}
    .top-level-insight:last-child {padding-right: 0;}

    .top-level-insight-title {display:block; padding-bottom: 10px; margin-bottom: 10px; border-bottom: 1px solid #ccc;}
    .top-level-insight-data {font-size: 2em; font-weight: 700; }



    .content-container {background:#fff; margin: 30px 0; border-radius: 3px; -moz-border-radius: 3px; border: 1px solid #ccc; position:relative;}
    .content-container:first-child {margin: 0 0 30px 0;}

    .expand-view {position:absolute; right: 10px; top: 10px; background:#fff; border: 2px solid #351a65; color:#351a65}

    .content-filters {padding: 20px; background:#f5f5f5; border-bottom: 1px solid #ccc;}
    .filter-item {float:left; margin-right: 20px; width: 200px;}
    .filter-item label {display:block; padding-bottom: 5px;}
    .filter-item:last-child {margin-right: 0;}
    .content-filters input, .content-filters select {padding: 5px; width: 100%;}

    .content-title {font-size: 1.5em; padding: 20px; border-bottom: 1px solid #ccc;} 
    .content-padding {padding:30px;}

    .content-sub-title {font-size: 1.25em; padding-bottom: 20px; position:relative;} 

    .content-side-col-secton {margin-bottom: 30px;}
    .content-side-col-secton:last-child {margin-bottom: 0px;}
    .content-side-col-title {font-size: .8em; text-transform: uppercase; position:relative; margin-bottom: 15px;}
    .content-side-col-title span {background:#f5f5f5; position:relative; z-index:1; padding-right: 10px;}
    .content-side-col-title::after {content:""; position:absolute; top: 50%; margin-top: -1px; right: 0; left: 0; height: 1px; background:#ccc;}

    
    .expand-view {font-size: .8em;}
    .expand-container-view {position: fixed !important; top: 0; bottom: 0; left: 0; right: 0; overflow: auto; margin: 0; z-index:999;}
    .expand-container-view .content-padding {max-width: 1800px; margin: 50px auto;}

.form-title {font-size: 1.25em; margin-bottom: 15px; font-weight: 700;}

.form-item {margin-bottom: 15px;}
.form-item label {display:block; margin-bottom: 7px; text-transform:uppercase; font-size: .8em;}
.form-item select, .form-item textarea, .form-item input:not([type=checkbox]):not([type=radio]) {display:block; padding: 10px; width: 100%; border-radius: 3px; -moz-border-radius: 3px; border: 1px solid #ccc; font-size: 1.25em;}
.form-item textarea {height: 125px; line-height: 1.75em;}

.form-item.cb-container label, .form-item.rb-container label {display:inline-block; margin-right: 20px;}
.form-item.cb-container label:last-child, .form-item.rb-container label:last-child {display:inline-block; margin-right:0;}


.btn-action-container {margin-top: 30px;}

.invalid {border: 2px solid red}

.top-nav {float: right; padding-top: 35px;}
.top-nav a {font-weight: 900; text-decoration:none; color:#1e2a47; padding: 10px 15px; text-transform: uppercase;}

.hide-scroll {position:fixed; height: 100%; width: 100%; overflow:hidden;}



.client > .client-name.selected {font-weight: bold;}

.k-widget.k-dropdown {width: 100%}

/*Grid Styles */
.k-grid th.k-header {text-transform: uppercase; font-size: .8em;}
.k-grid .btn {padding: 5px 10px;}



/* Client Dashboard */

.prod-row {display: table-cell; width: 100%;}
.prod-cell {display: table-cell; width: 50%; padding: 20px; border: 1px solid #ccc;}

.prod-list {
  display: flex;
  flex-wrap: wrap;
  width: 100%;
  margin: 0;
  padding:0;
  list-style: none;
}
.prod-list-item {
 
  display: flex;  
  width: 48%;
  margin-right: 4%;
  margin-bottom: 20px;
  border: 1px solid #ccc;
  border-radius: 3px;
  -moz-border-radius: 3px;
}

.prod-list-item:hover {border: 1px solid #673ab7; background:#673ab7;}
.prod-list-item:hover * {color:#fff;}
.prod-list-item:hover .btn {background:#351a65;}


.prod-list-item:nth-child(even) {margin-right: 0;}


.prod-list-content {
  width: 100%;
  padding: 20px;
}

.prod-item-title {font-size: 1.25em;}




/* The switch - the box around the slider */
.switch {
    position: relative;
    display: inline-block;
    width: 60px;
    height: 34px;
  }
  
  /* Hide default HTML checkbox */
  .switch input {
    opacity: 0;
    width: 0;
    height: 0;
  }
  
  /* The slider */
  .slider {
    position: absolute;
    cursor: pointer;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background-color: #ccc;
    -webkit-transition: .4s;
    transition: .4s;
  }
  
  .slider:before {
    position: absolute;
    content: "";
    height: 26px;
    width: 26px;
    left: 4px;
    bottom: 4px;
    background-color: white;
    -webkit-transition: .4s;
    transition: .4s;
  }

  .radio-container label {display: inline;}
  
  input:checked + .slider {
    background-color: #2196F3;
  }
  
  input:focus + .slider {
    box-shadow: 0 0 1px #2196F3;
  }
  
  input:checked + .slider:before {
    -webkit-transform: translateX(26px);
    -ms-transform: translateX(26px);
    transform: translateX(26px);
  }
  
  /* Rounded sliders */
  .slider.round {
    border-radius: 34px;
  }
  
  .slider.round:before {
    border-radius: 50%;
  }


  /* Interest Styles */
  .k-grid table { width: 100% !important; border-collapse: collapse !important; border: 1px solid #ccc !important; font-size: 1em !important; }
  .k-grid table th { border-bottom: 1px solid #ccc !important;  padding: 10px !important; text-transform: uppercase !important; font-size:.8em !important; background:#161b34 !important; color:#fff !important; text-align:left !important; }
  .k-grid table tr td {
    border-bottom: 1px solid #ccc; padding: 10px;
  }
  .k-grid table tr td:nth-child(2) {
    width: 200px;
  }
  /* Set grid height when no records are displayed because it's 100% by default */
  .k-grid-norecords { height: auto !important;}

  .main-table {width: 100%; border-collapse: collapse; border: 1px solid #ccc; font-size: 1em;}
  .main-table th {border-bottom: 1px solid #ccc;  padding: 10px; text-transform: uppercase; font-size:.8em; background:#161b34; color:#fff; text-align:left;}    

  .main-table tr td {border-bottom: 1px solid #ccc; padding: 10px;}
  .main-table tr td input {padding: 5px; width: 100%; text-align:center;}
  .main-table tr td:nth-child(2) {width: 200px;}
  .main-table tr td:last-child input {text-align:right;}

  .grid-status {padding-left: 18px; position: relative;}
  .grid-status::before {content:""; display:inline-block; width: 10px; height: 10px; position: absolute; left: 0; top: 3px; border-radius: 30px; -moz-border-radius: 30px;}
  .overdue::before {background: red;}
  .on-schedule::before {background: green;}

.inlineCheckbox {
    width: initial !important;
    display: inline !important;
    margin-bottom: 3px;
}


.modal-window-bg {position:fixed; background: rgba(0,0,0,.8); height: 100%; width: 100%; z-index: 999999999999999; top: 0; left:0; overflow: auto; display:none;}
.modal-window {max-width: 1600px; margin: 30px auto; background:#f5f5f5;}

.interest-date {margin-top: 15px;}
.interest-date span {background: #00000029; padding: 5px 10px; display:inline-block; border-radius: 5px; color:#fff;}
.interest-date.overdue span {background: red;}


/*Login Screens */

.login-bg {
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    overflow: auto;
/*    background-image: linear-gradient(to right bottom, #ff512f, #f3602e, #e86c2f, #dd7634, #d27e3b, #d2883d, #d29140, #d29b44, #d9ab41, #ddbc3e, #dece3e, #dce040);
*/
    background-image: linear-gradient(to right, #845ec2, #965dc0, #a75dbe, #b75cbb, #c55cb7, #d55daf, #e25fa6, #ed639d, #f86c8f, #fe7982, #ff8778, #ff9671);
}
.login-container {max-width: 700px; width: 98%; margin: 30px auto; padding: 30px; border: 1px solid #ccc; background:#fff; border-radius: 5px; -webkit-box-shadow: 0 0 100px 0 rgba(0,0,0,.1); box-shadow: 0 0 100px 0 rgba(0,0,0,.1);}

.login-masthead {text-align:center; margin-bottom: 45px;}
.login-masthead img { max-width: 75px; }
.login-masthead h1 {font-weight: normal;}

.login-btn {display:block; text-decoration: none; text-align:center; padding: 10px 20px; background:#fff; border-radius: 3px; -moz-border-radius: 3px; 
  border: 3px solid #3e7597; cursor: pointer; color:#3e7597; font-size: 1.2em; width: 100%;}

  .login-sec-action {margin-top: 30px; text-align:center;}
  .login-sec-action a {color:#666; text-decoration: none;}


.modal {
    position: fixed;
    top: 0;
    bottom: 0;
    right: 0;
    left: 0;
    background: rgba(0,0,0,.6);
    /*z-index: 99;*/
    display: none;
    overflow-y: scroll;
}

.modalContainer {
    width: 600px;
    margin: 0 auto;
    background: #fff;
    padding: 3em;
    margin-top: 3em;
    position: relative;
    overflow: auto;
    max-height: 100%;
}
.modalContainerSmall {
    width: 400px;
    margin: 0 auto;
    background: #fff;
    padding: 0.5em 1em 1em 1em;
    margin-top: 7em;
    position: relative;
    overflow: auto;
    max-height: 100%;
}