:root {
  --white: #ffffff;
  --black: #000000;

  --gray-0: #F5F5F5; --gray-1: #FAFAFA; --gray-2: #E9EAEB; --gray-3: #D5D7DA; --gray-3-1: #A4A7AE; --gray-4: #717680; --gray-4-1: #535862; --gray-5: #414651; --gray-5-2: #252B37; --gray-6: #181D27;
  --blue-1: #3E4784; --blue-2: #363F72; --blue-3: #686fa6;
  --red-1: #D92D20; --red-2: #B42318;
  --light-blue-1: #175CD3; --light-blue-2: #B2DDFF; --light-blue-3: #EFF8FF;

  --full-header-height: 124px;
  --main-header-height: 72px;
  --main-header-border-color: var(--gray-2);
  --sub-header-height: 51px;
  --logo-height: 32px;
  --logo-top-margin: 20px;

  --main-menu-color: var(--gray-5);
  --main-menu-active-color: var(--white);
  --main-menu-active-background-color: var(--blue-1);

  --sub-menu-color: var(--gray-4);
  --sub-menu-active-color: var(--blue-2);
  --sub-menu-active-border-color: var(--blue-1);

  --border-radius-large: 12px;
  --border-radius-medium: 8px;
  --border-radius: 6px;
  --border-radius-small: 3px;

}

* { font-family: "Inter", sans; }

.mt-32 {margin-top: 32px;}
.mb-32 {margin-bottom: 32px;}
.mt-20 {margin-top: 20px;}
.mt-5{ margin-top: 5px !important;}
.mb-0 {margin-top: 0;}
.mr-12 { margin-right: 12px; }
.mr-20 { margin-right: 20px; }
.hidden {display: none;}

.f-400-14 { font-size: 14px; font-weight: 400; }

.display-none { display: none !important; }


.btn { font-weight: 600; font-size: 14px; height: 40px;}
a.btn { line-height: 28px; }

.btn-primary, a.btn-primary { background-color: var(--blue-1); border-width: 0; color: var(--white) !important; }
.btn-primary:hover { background-color: var(--blue-2) }
.btn-primary:focus, .btn-primary:active { background-color: var(--blue-2) }
.btn-primary:disabled, .btn-primary.disabled, .btn-primary[disabled] { background-color: var(--blue-3); }

.btn-default { border-color: var(--gray-3); border-width: 1px; border-style: solid; color: var(--gray-5) !important; }
.btn-default:hover { color: var(--gray-5-2); }
.btn-default:focus, .btn-default:active { color: var(--gray-5-2); }
.btn-default:disabled, .btn-default.disabled, .btn-danger[disabled] {  background-color: color: var(--gray-2); color: var(--gray-3-1); }

.btn-danger { border-color: var(--red-1); border-width: 1px; border-style: solid; color: var(--white); }
.btn-danger:hover { background-color: var(--red-2); }
.btn-danger:focus, .btn-danger:active { background-color: var(--red-2); }
.btn-danger:disabled, .btn-danger.disabled, .btn-danger[disabled] {  background-color: color: var(--gray-0); color: var(--gray-3-1); }

.btn.btn-primary svg{ stroke: var(--white); height: 15px; width: 15px; margin-right: 10px; margin-top: 3px; }
.btn.btn-default svg{ stroke: var(--gray-5); height: 14px; width: 14px; margin-top: 3px !important; fill: none; }
.btn.btn-danger svg{ stroke: var(--red-1); height: 14px; width: 14px; margin-top: 3px; fill: none; }

.btn.btn-default svg.float-left{
  margin-right: 10px;
  margin-left: 0;
}
.btn.btn-default svg.float-right{
  margin-left: 10px;
  margin-right: 0;
}

.alert { border-radius: var(--border-radius); border: none;margin-bottom: 0;}
.alert-success{ background-color: #ECFDF3; font-size: 14px; padding: 16px 18px; }
.alert-success h4 { color: var(--gray-6); font-weight: 600; font-size: 14px;}
.alert-success p { color: var(--gray-5); font-weight:400; margin:0; }



a[href] { text-decoration: none; color: inherit; }
html,body { background-color: var(--white); }
header { background-color: var(--white); }
header .main-header { height: var(--main-header-height); border-bottom: 1px solid var(--main-header-border-color); }
header .logo-container { float: left; }
header .user-menu-container { float: right; }

header .logo {
  display: block;
  height: var(--logo-height);
  padding-top: var(--logo-top-margin);
}
header .logo img { display: block; height: var(--logo-height); }

header ul.main-menu  {
  list-style: none; padding: 0;
  margin: 0 auto;
  text-align: center;
  padding-top: 15px;
}
header ul.main-menu li {
  display: inline-block;
  padding: 8px 12px;
  border-radius: var(--border-radius);
  border-style: solid;
  border-width: 0;
}

header ul.main-menu li.active { background-color: var(--blue-1); }
header ul.main-menu li a { text-decoration: none; font-weight: 600; }
header ul.main-menu li.active a{ color: var(--white); }

.user-menu-container { width: 70px; height: var(--main-header-height); position: relative;  }
.user-menu-container.open{ height: unset; background-color: var(--main-header-border-color); }
.user-menu-container .user-image { padding: 15px 15px; cursor: pointer; }
.user-menu-container .user-image img { height: 40px; width: 40px; }

.user-menu-container .user-action-menu {
  list-style: none; padding:0; width: 200px;
  position: absolute; right:0; overflow: hidden; height: 0;
}

.user-menu-container.open .user-action-menu {
  overflow: visible;
}

.user-menu-container .user-action-menu li{
  display: block; height: 50px;
  border-width: 0 1px 1px 1px;

  border-style: solid;
  border-color: var(--main-header-border-color);
}

.user-menu-container .user-action-menu li a{
  font-size: 14px;
  display: block;
  width: 100%; padding: 15px 8px;
  background-color: white;
  border-width: 1px 0;
  border-color: var(--gray-2);
  border-style: solid;
}
.user-menu-container .user-action-menu li a:hover { background-color: var(--main-header-border-color); }

.sub-header {
  height: var(--sub-header-height);
  border-bottom: 1px solid var(--gray-2);
}

.sub-menu { list-style: none; padding: 0; }
.sub-menu li { display: block; float: left; margin-right: 16px; }
.sub-menu li a { display: block; line-height: 3; font-size: 14px; padding: 4px; color: var(--sub-menu-color); font-weight: 600}
.sub-menu li.active a { color: var(--blue-1); border-bottom: 1px solid var(--blue-1)}


h1 { font-size: 24px; font-weight: 600; color: var(--gray-6); }
h2 { font-size: 18px; font-weight: 600; color: var(--gray-6); }
h3 { font-size: 16px; font-weight: 600; color: var(--gray-6); }
.float-left { display: block; float:left; }
.float-right { display: block; float:right; }
.h1-tag {
  display: block; height: 24px; font-size: 16px; padding: 0 6px;
  margin-left: 8px; background-color: var(--gray-0); margin-top: 3px;
  border-radius: var(--border-radius-small);
}

.gray-strap {
  background-color: var(--gray-1);
  border: 1px solid var(--gray-2);
  padding: 8px 12px;
  border-radius: var(--border-radius-large);
  height: 58px;
}

.gray-strap a:not(:first-child) { margin-left: 5px;}

.gray-strap.address-emissions-page {
  background-color: var(--gray-1);
  border: 1px solid var(--gray-2);
  padding: 20px 24px;
  border-radius: var(--border-radius-large);
  height: 84px;
}

.quick-filters > div > svg {
  width: 20px;
  height: 20px;
  fill: none;
  stroke: var(--gray-4);
  margin-right: 10px;
  margin-top: 2px;
}

.quick-filters > div , .gray-strap > a{
  padding: 8px 12px;
  height: 42px;
  color: var(--gray-4);
  font-weight: 600;
  text-decoration: none;

}

.quick-filters > div:not(:first-child) {
  margin-left: 5px;
}

.quick-filters > div.active , .gray-strap > a.active{
  background-color: var(--blue-1);
  border-radius: var(--border-radius);
  color: var(--white);
}

.quick-filters > div.active svg {
  stroke: var(--white);
}

.quick-filters > div:hover, .gray-strap > a:hover{
  cursor: pointer
}

.address-emissions-bar {
  height: 76px;
  border-radius: var(--border-radius-medium);
  background-color: var(--blue-1);
  padding: 20px;
}

.address-emissions-bar p {
  color: var(--white);
  padding:0;
}

.gray-strap div p:first-child,
.address-emissions-bar div p:first-child {
  font-weight: 600;
  font-size: 16px;
  line-height: 16px;
}
.gray-strap div p:first-child{
  margin-bottom:5px; margin-top: 4px;
}


.gray-strap div p:last-child,
.address-emissions-bar div p:last-child {
  font-size: 14px;
  line-height: 0px;
}

.address-emissions-bar button {
  color: var(--gray-5);
  background-color: var(--white);
  font-weight: 600;
  font-size: 14px;
}

.search-filter-bar {
  height: 64px;
  background-color: var(--gray-1);
  border: 1px solid var(--gray-2);
  border-radius: var(--border-radius-large);
  padding: 11px 16px;
}

.search-filter-bar > div > * {
  height: 40px;
}

.search-filter-bar .search {
  width: 400px;
}

.input-group.filter {
  cursor: pointer;
}

.search-filter-bar .form-control, .search-filter-bar span {
  border-left-width: 0;
  font-weight: 600;
  font-size: 14px;
  border-radius: var(--border-radius-medium);
  color: var(--gray-5);
}

.search-filter-bar .form-control:focus {
  box-shadow: none; border-color: var(--gray-3);
}

.search-filter-bar .input-group-prepend {
  padding: 6px 10px;;
  border: 1px solid var(--gray-3);
  background-color: var(--white);
  border-top-left-radius: var(--border-radius-medium);
  border-bottom-left-radius: var(--border-radius-medium);
}

.search-filter-bar .input-group svg {
  width: 20px; height: 20px; stroke: var(--gray-4);
  fill: none;
  overflow: visible;
}

.search-filter-bar .input-group.filter .input-group-prepend svg {
  height: 18px; width: 20px;
}

.search-filter-bar .input-group.filter span {
  padding-top: 8px; padding-right: 20px;
}



.background-box{
  border: 1px solid var(--gray-2);
  border-radius: var(--border-radius-medium);
}

.table{ margin-bottom: 0; }

.table > :not(:first-child) {
  border-width: 0;
}

table th {
  background-color: var(--gray-1) !important;
  font-weight: 600;
  font-size: 12px;
  color: var(--gray-4);
  height: 44px;
  vertical-align: middle;
}

table:not(.ui-datepicker-calendar) td {
  font-weight: 400;
  font-size: 14px;
  color: var(--gray-4-1);
  height: 72px;
  vertical-align: middle;
}

table tr > *:first-child:not(.ui-datepicker-week-end) { padding-left: 24px; }
table tr > *:last-child:not(.ui-datepicker-week-end) { padding-right: 24px; }

table button.icon svg { width: 15px; height: 15px; stroke: var(--gray-3-1); fill: none;}
table button { background-color: var(--white) !important; border-color: var(--white) !important; }

.page-link{ padding: unset; }
.first-page-link-container a svg {
  fill: none;
  stroke: var(--gray-5);
  height: 14px;
  width:14px;
  margin-top:6px;
  margin-right: 6px;
}
.first-page-link-container a {
  line-height: 1.8;
  font-size: 14px;
  font-weight: 600;
  border: 1px solid var(--gray-3);
  border-radius: var(--border-radius-medium);
  margin-left: 24px;
  color: var(--gray-5);
}

.last-page-link-container a svg {
  fill: none;
  stroke: var(--gray-5);
  height: 14px;
  width:14px;
  margin-top:6px;
  margin-left: 6px;
}

.last-page-link-container a {
  line-height: 1.8;
  font-size: 14px;
  font-weight: 600;
  border: 1px solid var(--gray-3);
  border-radius: var(--border-radius-medium);
  margin-right: 24px;
  color: var(--gray-5);
}

.pagination-container { padding-top: 20px;}

.pagination { height: 40px; margin-bottom: 20px; }
.pagination ul { list-style: none; padding: 0; display: block; margin: 0 auto;}
.pagination ul li { display: inline-block; }

.pagination ul li a {
  display: block; height: 40px; width: 40px; text-align: center; line-height: 2.8;
  border-radius: var(--border-radius-medium);
  color: var(--gray-5-2); font-weight: 500; font-size: 14px;
  border-width: 0;
}

.pagination ul li a.active { background-color: var(--gray-1); }
.pagination ul li:first-child a, .pagination ul li:last-child a {
  border-radius: 50%; background-color: var(--gray-1);
}

.first-page-link-container a, .last-page-link-container a{ padding: 8px 12px; font-size: 14px; line-height: 22px; }
.pagination ul li a:hover, .pagination ul li a:focus, .pagination ul li a:active,
.first-page-link-container a:hover,
.last-page-link-container a:hover,
.first-page-link-container a:active,
.last-page-link-container a:active,
.first-page-link-container a:focus,
.last-page-link-container a:focus{ background-color: var(--gray-1); color: var(--gray-5-2); }

.page-link svg { width: 14px; height: 14px; }
.page-link:focus, .btn-check:focus + .btn, .btn:focus { box-shadow: none; }

.side-bar { list-style: none; padding:0;}
.side-bar li a {
  height: 36px; width: 160px; display: block; border-bottom:1px solid white;
  line-height: 2.5; padding: 0 12px; font-weight: 600; font-size: 14px;
}
.side-bar li.active a { background-color: var(--gray-1); }



.select2-container{ display: block !important; width: inherit !important; z-index: 1056;}
.select2-container--default.select2-container--focus .select2-selection--multiple,
.select2-container--default .select2-selection--multiple,
.select2-container--default .select2-selection--single { border-color: var(--gray-3) !important; min-height: 40px; border-radius: var(--border-radius-medium);}
.select2-container--default .select2-selection--single .select2-selection__arrow { top: 8px; }
.select2-container .select2-selection--single { padding: 5px; font-weight: 400; line-height: 1.5; }
.select2.select2-container.select2-container--default.select2-container--above { max-width: }

.form-control:focus { box-shadow: unset; border-color: var(--gray-3);  }
.form-control { color: var(--gray-5); font-size: 14px; height: 40px; border-radius: var(--border-radius-medium);}

/* Drawer start */

.drawer-wrapper {
  position: fixed; background-color: var(--white); width: 400px; height: 100vh; top: 0; right:0; z-index: 300;
  margin: 0; box-sizing: border-box; box-shadow: -2px 0 20px rgba(0, 0, 0, 0.2);
  transition: width .4s ease-out; overflow: hidden;
}

.drawer-wrapper.hidden{ width: 0 !important; display: block;; }
.drawer { width: 400px; height: 100vh; position: relative;}

.drawer > .drawer-header-container {
  padding: 16px 24px;
  height: 76px;
  overflow: hidden;
}
.drawer > .drawer-header-container > .drawer-close {
  width: 10px; height: 10px; float:right; cursor: pointer; margin-top: 12px;
}

.drawer > .drawer-header-container > .drawer-close svg {
  height: 10px; width: 10px; stroke: var(--gray-3-1);
}

.drawer > .drawer-header-container .icon {
  float: left;
  width: 40px; height: 40px; border: 1px solid var(--gray-2); border-radius: var(--border-radius-medium);
  padding: 11px;
}

.drawer > .drawer-header-container .icon svg {
  width: 16px; height: 16px; stroke: var(--gray-5); fill: none;
}

.drawer > .drawer-header-container .drawer-header h2 {
  font-weight: 600;
  font-size: 20px;
  margin-left: 56px;
  margin-top: 5px;
  margin-bottom: 0;
}

.drawer > .drawer-header-container .drawer-header p {
  font-weight: 400;
  font-size: 14px;
  margin-left: 56px;
  margin-top: 5px;
  color: var(--gray-4-1);
}

.drawer-body-footer-container {
  overflow-y: scroll;
  height: calc(100vh - 76px);
}

.drawer > .drawer-body-footer-container > .drawer-body { padding: 24px;}
.drawer > .drawer-body-footer-container > .drawer-footer {
  width: 400px;
  border-top: 1px solid var(--gray-2);
  padding: 16px;
  background-color: var(--white);
  height: 70px;
}

.drawer > .drawer-body-footer-container > .drawer-footer > button {
  float:right; margin-left: 10px;
}

.drawer .drawer-body label { font-weight: 500; font-size: 14px; margin-bottom: 6px; }
.drawer .drawer-body .label-2nd-line label { margin-top: 21px; }

/* Drawer end */

/* Spinner start */

#spinner {
  position: fixed; top: 0; left: 0; z-index: 2000; width: 100vw; height: 100vh;
  background-color: #F4FBF7; opacity: 0.6;
  display: none;
}

#spinner > div { position: static; margin: 40vh auto 0; height: 100px; width: 100px; }


#spinner > div{
    display:block;

    -webkit-animation-name: spin;
    -webkit-animation-duration: 1000ms;
    -webkit-animation-iteration-count: infinite;
    -webkit-animation-timing-function: linear;
    -moz-animation-name: spin;
    -moz-animation-duration: 1000ms;
    -moz-animation-iteration-count: infinite;
    -moz-animation-timing-function: linear;
    -ms-animation-name: spin;
    -ms-animation-duration: 1000ms;
    -ms-animation-iteration-count: infinite;
    -ms-animation-timing-function: linear;

    animation-name: spin;
    animation-duration: 1000ms;
    animation-iteration-count: infinite;
    animation-timing-function: linear;
}

@-ms-keyframes spin {
    from { -ms-transform: rotate(360deg); }
    to { -ms-transform: rotate(0deg); }
}
@-moz-keyframes spin {
    from { -moz-transform: rotate(360deg); }
    to { -moz-transform: rotate(0deg); }
}
@-webkit-keyframes spin {
    from { -webkit-transform: rotate(360deg); }
    to { -webkit-transform: rotate(0deg); }
}
@keyframes spin {
    from {
        transform:rotate(360deg);
    }
    to {
        transform:rotate(0deg);
    }
}

/* Spinner end */


.profile-picture-container { border: 1px solid #ededed; border-radius: 4px; padding: 20px; }
.profile-picture-container > img { display: block; width: 100%; margin-bottom: 20px; }
.profile-picture-container .btn-group{ width: 100%; }
.profile-picture-container .btn { min-width: 50%; }

#download-target { display: none; }


.im-header-container {
  padding: 12px 6px;
  height: 76px;
  overflow: hidden;
  width: 100%;
}
.im-header-container > .close {
  width: 10px; height: 10px; float:right; cursor: pointer;
}

.im-header-container > .close svg {
  height: 10px; width: 10px; stroke: var(--gray-3-1);
}

.im-header-container .icon {
  float: left;
  width: 40px; height: 40px; border: 1px solid var(--gray-2); border-radius: var(--border-radius-medium);
  padding: 11px;
}

.im-header-container .icon svg {
  width: 16px; height: 16px; stroke: var(--gray-5); fill: none;
}

.im-header-container .header h2 {
  font-weight: 600;
  font-size: 20px;
  margin-left: 56px;
  margin-top: 5px;
  margin-bottom: 0;
}

.im-header-container .header p {
  font-weight: 400;
  font-size: 14px;
  margin-left: 56px;
  margin-top: 5px;
  color: var(--gray-4-1);
}


.modal-content {border-radius: var(--border-radius-large);}
#modal .modal-body { padding: 0 24px 24px; }
#modal .modal-body .download-link {
  height: 50px; width: 30%;
  margin-top: 24px;
}
#modal .modal-body .download-link a {
  font-size: 14px; font-weight: 600; color: var(--blue-2);
}
#modal .modal-body .download-link svg {
  width: 15px; height: 15px; float: right;
  fill: none; stroke: var(--blue-2); margin-top: 5px;
}

#modal .upload-file-section {
  cursor: pointer;
}

#modal .upload-file-section, #modal .instructions-section,
#modal .file-info-section, #modal .file-upload-progress-section {
  border: 1px solid var(--gray-2);
  border-radius: var(--border-radius-large); padding: 16px;
}
#modal .upload-file-section div:first-child {
  width: 40px; height: 40px; margin: 0 auto;
  border: 1px solid var(--gray-2);
  padding: 12px; border-radius: var(--border-radius-medium);
  margin-bottom: 12px;
}
#modal .upload-file-section div:first-child svg {
  width: 16px; height: 16px; fill: none; stroke: var(--gray-5)
}
#modal .upload-file-section p { margin: 0; font-size: 14px; font-weight: 600; color: var(--blue-2); text-align:center;}
#modal .upload-file-section small { margin: 0; font-size: 12px; font-weight: 400; color: var(--gray-4-1);text-align: center;display: inherit;}

#modal .instructions-section { margin-top: 20px; }
#modal .instructions-section div.icon {width: 38px; height: 38px; border: 1px solid lightgray; border-radius: 50%; padding: 4px; float: left;}
#modal .instructions-section div.icon > div{width: 28px; height: 28px; border: 2px solid lightgray;  border-radius: 50%; padding: 4px; }
#modal .instructions-section div.icon svg { fill: none; stroke: var(--blue-1); width: 16px; height: 16px; }
#modal .instructions-section h3, .date-format-section label { padding-top: 12px; margin-left: 60px; font-size: 14px; font-weight: 600; color: var(--gray-5) }
.date-format-section label{ margin-left: 0;}
#modal .instructions-section ol {
  margin-top: 16px; font-size: 14px; color: var(--gray-4-1); margin-left: 44px;
}

#modal .im-footer-container { width: 100%; }
#modal .im-footer-container button {
  width: 48%; border-radius: var(--border-radius-medium); height: 44px; font-weight: 600; font-size: 16px; border-color: var(--gray-3); color: var(--gray-5); float:left;
}

#modal .im-footer-container button { margin-right: 4%; background-color: unset; color: var(--gray-5); }
#modal .im-footer-container button:last-child { margin-right: 0; }
#modal .im-footer-container button.btn-primary{background-color: var(--blue-1); color: var(--white);}
.modal-footer{ padding: 12px 20px; }
#modal .im-footer-container .full-width { width: 100%; margin: 0; }

#modal .file-info-section, #modal .file-upload-progress-section { margin-top: 20px; }
#modal .file-info-section .file-icon, #modal .file-upload-progress-section .file-icon { width:40px; height: 40px; float: left;}
#modal .file-info-section .file-icon svg, #modal .file-upload-progress-section .file-icon svg { width:40px; height: 40px; }
#modal .file-info-section .delete-icon { width:40px; height: 40px; float: right; padding: 11px; }
#modal .file-info-section .delete-icon svg { width:16px; height: 16px; fill:none; stroke: var(--gray-5); }

#modal .tls p { margin: 0; }
#modal .tls:not(.invalid-template-message-section, .ready-to-save-message-section, .data-validation-message-section, .successfully-imported-message-section) p { margin-left: 52px; }
#modal .tls p.tls1 { font-size: 14px; font-weight: 500; color: var(--gray-5) }
#modal .tls p.tls2 { font-size: 14px; font-weight: 400; color: var(--gray-4-1) }


.msg div:first-child{ padding: 18px 16px; border-radius: var(--border-radius-large); margin-top: 20px; }
.msg p.tls1{ font-weight: 600 !important; }

.invalid-template-message-section div:first-child, .data-validation-message-section div:first-child{ background-color: #FEF3F2; }
.invalid-template-message-section .download-link{ margin-top: 20px; }

.ready-to-save-message-section div:first-child, .successfully-imported-message-section div:first-child{ background-color: #ECFDF3; }



.breadcrumb { font-size: 14px; }
.breadcrumb li:last-child{ color: var(--neutral-2); }
.breadcrumb > li > a { color: var(--neutral-3); text-decoration: none; }
.breadcrumb li:not(:last-child):after{ content: '/'; margin: 0 4px; }

.address-emissions.allocation-percentage p {
  color: var(--gray-4-1);
}

.allocation-slider-container {
  margin: 0px;
  padding: 0px;
  border: none;
}

.allocation-slider-container > div:first-child > .allocation-slider { float:left; }
.allocation-slider-container > div:first-child > .allocation-slider { width: 320px; }
.allocation-slider-container > div:last-child {
  margin-left: 20px;
  float: left;
}

.light-blue-tag {
  border: 1px solid var(--light-blue-2);
  background-color: var(--light-blue-3);
  font-size: 14px;
  color: var(--light-blue-1);
  padding: 2px 8px;
  border-radius: var(--border-radius);
  text-align: center;
}

.border-radius-50px {
  border-radius: 50px;
}
.line-height-32 { line-height: 32px; }
.margin-left-12{ margin-left: 12px; }

.all-caps{ text-transform: uppercase; }
.capitalize{ text-transform: capitalize; }

#projects-container .project{
  border-radius: 16px;
  height: 318px; overflow: hidden;
  margin-bottom: 20px;
}

#projects-container .project > div{
  border-radius: var(--border-radius-large);
}

#projects-container .project.selected{
  border: 3px solid #4E5BA6;
}
#projects-container .project.selected > div{
  border: 1px solid #4E5BA6;
}

#projects-container .project:not(.selected) {
  border: 3px solid var(--white);
}
#projects-container .project:not(.selected) > div{
  border: 1px solid #ddd;
}

#projects-container .project > div{
  height: 100%;
}

#projects-container .project > div .image-container{
  float: left;
  height: 100%; width: 300px;
  overflow: hidden;
  background-size: cover;
  background-repeat: no-repeat;
  background-position: center center;
}

#projects-container .project .image-container img {
  display: block;
  width: 100%; height: 100%;
}

#projects-container .project .data-container {
  margin-left: 300px;
  padding: 24px;
}

#projects-container .project .data-container .title-container{
  height: 30px;
}
#projects-container .project .data-container .title-container h3 {
  font-weight: 600;
  font-size: 18px;
  color: var(--gray-6);
  float: left;
  margin:0;
}

#projects-container .project .data-container .title-container input {
  float:right;
}

#projects-container .project .data-container .description {
  clear: right;
  margin: 0;
  font-weight: 400; font-size: 14px; color: var(--gray-4-1);
  text-overflow: ellipsis;
  overflow: hidden;
  width: 100%;
  white-space: nowrap;
}

#projects-container .project .data-container .tags{
  margin-top: 6px;
}

#projects-container .project .data-container .tags span{
  color: var(--gray-5); font-weight: 500; font-size: 14px; padding: 2px 5px;
  border-radius: var(--border-radius); border: 1px solid var(--gray-3);
}

#projects-container .project .data-container .project-data-row {
  margin-top: 20px; width: 100%; height: 60px;
  margin-bottom: 20px;
}
#projects-container .project .data-container .project-data-row > div:not(:last-child){
  float: left; margin-right: 32px;
}


#projects-container .project .data-container .project-data-row > div > div:first-child{
  font-size: 14px; font-weight: 500; color: var(--gray-4-1); margin-bottom: 6px;
}
#projects-container .project .data-container .project-data-row > div > div:last-child{
  font-size: 16px; font-weight: 500px; color: var(--gray-6);
}

#projects-container .project .data-container .project-data-row > div.location { width: 140px; }
#projects-container .project .data-container .project-data-row > div.location svg{ float: left; height: 16px; width: 16px; fill: none; stroke: black;margin: 5px 0 5px; }
#projects-container .project .data-container .project-data-row > div.location p{ margin-left: 20px;}
#projects-container .project .data-container .project-data-row > div.unit-price { width: 190px; }
#projects-container .project .data-container .project-data-row > div.percentage { width: 350px; }
#projects-container .project .data-container .project-data-row > div.percentage > .slider-container > input { width: 320px; }

#projects-container .project .data-container .project-data-row > div.value-container{
  float:right; width: 120px;
}
#projects-container .project .data-container .project-data-row > div.value-container > div:last-child{
  font-weight: 700;
}
#projects-container .project .data-container .goals-container{
  clear:right;
  height: 32px;
}
#projects-container .project .data-container .goals-container .goals-label{
  float: left; font-weight: 500; font-size: 14px; color: var(--gray-4-1);
}
#projects-container .project .data-container .goals-container .sustainability-goals { margin-left: 170px; }
#projects-container .project .data-container .goals-container .sustainability-goals span{
  font-weight: 500; font-size: 12px; border: 1px solid #ddd; padding: 2px 6px; border-radius: var(--border-radius); margin-right: 5px;}

#projects-container .project .data-container .actions { margin-top: 20px;}

.uproj .sdg-icons { padding: 24px; width: 300px;height: 100%;overflow-y: scroll;}
.uproj .actions{ margin-top: 60px !important; }
.uproj .data-container { max-width: calc(100% - 600px); overflow: hidden; height: 100%; }
.uproj .goal-icon { margin: 8px; }

.uproj .tool-tip { background-color: #0A0D12; border-radius: 8px;color: #fff;
  font-weight: 600; font-size: 12px; line-height: 18px; text-align: center; padding: 8px 12px;
  width: 128px; margin-left: -32px;
  position: relative;
  margin-top: 80px;
}

.uproj .tool-tip.hidden {
  display: none;
}

.uproj .tool-tip:before {
  display: block;
  content: '';
  width: 12px; height: 12px; margin-top: -14px;
  position: absolute; left: 56px;
  border: 1px solid #0A0D12;
  transform: rotate(45deg);
  background: #0A0D12;
}



/* slider start */

input[type="range"] {
  -webkit-appearance: none;
  width: 100%;
  height: 6px;
  background: var(--blue-1);
  border-radius: var(--border-radius-small);
  outline: none;
  margin-top: 10px;
  margin-bottom: 10px;
}

/* Chrome / Safari: Track */
input[type="range"]::-webkit-slider-runnable-track {
  height: 6px;
  background: var(--blue-1);
  border-radius: var(--border-radius-small);
}

/* Chrome / Safari: Thumb */
input[type="range"]::-webkit-slider-thumb {
  -webkit-appearance: none;
  appearance: none;
  width: 20px;
  height: 20px;
  background: var(--white);
  border: 2px solid var(--blue-1);
  border-radius: 50%;
  margin-top: -7px; /* Align thumb vertically */
  cursor: pointer;
}

/* Firefox: Track */
input[type="range"]::-moz-range-track {
  height: 6px;
  background: var(--blue-1);
  border-radius: var(--border-radius-small);
}

/* Firefox: Thumb */
input[type="range"]::-moz-range-thumb {
  width: 20px;
  height: 20px;
  background: var(--white);
  border: 2px solid var(--blue-1);
  border-radius: 50%;
  cursor: pointer;
}

/* Optional: IE/Edge */
input[type="range"]::-ms-track {
  height: 6px;
  background: transparent;
  border-color: transparent;
  color: transparent;
}
input[type="range"]::-ms-fill-lower {
  background: var(--blue-1);
  border-radius: var(--border-radius-small);
}
input[type="range"]::-ms-fill-upper {
  background: var(--blue-1);
  border-radius: var(--border-radius-small);
}
input[type="range"]::-ms-thumb {
  width: 20px;
  height: 20px;
  background: var(--white);
  border: 2px solid var(--blue-1);
  border-radius: 50%;
  cursor: pointer;
}


/* slider end*/

.no_poverty { background-color: #f9d6d5; border: 2px solid #e60000; }
.zero_hunger { background-color: #fce9c8; border: 2px solid #dda63a; }
.good_health_and_well_being { background-color: #d4f5e3; border: 2px solid #4c9f38; }
.quality_education { background-color: #f7d7db; border: 2px solid #c5192d; }
.gender_equality { background-color: #fdd7cf; border: 2px solid #ff3a21; }
.clean_water_and_sanitation { background-color: #d4effa; border: 2px solid #26bde2; }
.affordable_and_clean_energy { background-color: #fff7cc; border: 2px solid #fcc30b; }
.decent_work_and_economic_growth { background-color: #ecd6dc; border: 2px solid #a21942; }
.industry_innovation_and_infrastructure { background-color: #f2dada; border: 2px solid #fd6925; }
.reduced_inequalities { background-color: #f6d2de; border: 2px solid #dd1367; }
.sustainable_cities_and_communities { background-color: #fbe5c3; border: 2px solid #fd9d24; }
.responsible_consumption_and_production { background-color: #f4ecd6; border: 2px solid #bf8b2e; }
.climate_action { background-color: #d8e9d0; border: 2px solid #3f7e44; }
.life_below_water { background-color: #d6e6f4; border: 2px solid #0a97d9; }
.life_on_land { background-color: #dcf0dc; border: 2px solid #56c02b; }
.peace_justice_and_strong_institutions { background-color: #d8d9ec; border: 2px solid #00689d; }
.partnerships_for_the_goals { background-color: #d9dbe3; border: 2px solid #19486a; }

.goal-icon { background-image: url('/images/goals.png');
  width: 64px; height: 64px !important; background-size: 1700%; background-repeat: no-repeat; border-radius: 50%;
/*! overflow: hidden; */
  }
.goal-icon.no_poverty { background-position: 0 0; }
.goal-icon.zero_hunger { background-position: -60px 0; }
.goal-icon.good_health_and_well_being { background-position: -120px 0; }
.goal-icon.quality_education { background-position: -180px 0; }
.goal-icon.gender_equality { background-position: -240px 0; }
.goal-icon.clean_water_and_sanitation { background-position: -300px 0; }
.goal-icon.affordable_and_clean_energy { background-position: -360px 0; }
.goal-icon.decent_work_and_economic_growth { background-position: -420px 0; }
.goal-icon.industry_innovation_and_infrastructure { background-position: -480px 0; }
.goal-icon.reduced_inequalities { background-position: -540px 0; }
.goal-icon.sustainable_cities_and_communities { background-position: -600px 0; }
.goal-icon.responsible_consumption_and_production { background-position: -660px 0; }
.goal-icon.climate_action { background-position: -720px 0; }
.goal-icon.life_below_water { background-position: -780px 0; }
.goal-icon.life_on_land { background-position: -840px 0; }
.goal-icon.peace_justice_and_strong_institutions { background-position: -900px 0; }
.goal-icon.partnerships_for_the_goals { background-position: -960px 0; }


#pie-chart-container { margin:0 20px 0 0;width: 48px; height: 48px;}

.project-preview { position: fixed; z-index: 600; width: 100vw; height: 100vh; top: 0; left: 0;   background: rgba(0,0,0,0.75) }
.project-preview > div { background-color: var(--white); height: 908px; width: 1200px; margin: 60px auto; padding: 64px; overflow-y: auto; }
.project-preview > div > div:first-of-type { height: 580px; overflow-y: scroll; }
.project-preview > div > div > div:first-child {width: 50%; padding-right: 60px;  }
.project-preview > div > div > div:first-child > div:first-of-type > span {color:#6941C6; font-size: 16px;font-weight: 600;}
.project-preview > div > div > div:first-child > h1 { font-size: 36px; font-weight: 600; }
.project-preview > div > div > div:first-child > div:nth-of-type(2) {margin-top: 48px; padding-top: 32px; border-top: 1px solid var(--gray-2);max-height: 390px;overflow-y: scroll;}
.project-preview > div > div > div:first-child > div > dl { margin-top: 20px; }
.project-preview > div > div > div:first-child > div > dl dt { float: left; width: 150px; }
.project-preview > div > div > div:first-child > div > dl dt:after { content: ":"}
.project-preview > div > div > div:first-child > div > dl dt svg{ stroke: var(--gray-5); height: 20px; width: 20px; margin-top: 0; fill: none; }


.project-preview > div > div:first-of-type > div:last-child { width: 50%; height: 100%; }
.project-preview > div > div:first-of-type > div:last-child > div { height: 100%; position: relative; }
.project-preview > div > div:first-of-type > div:last-child > div > img { width: 100%; height: 100%; display: block; }
.project-preview > div > div:first-of-type > div:last-child > div >  div {
  position: absolute; bottom: 0; left: 0; width: 100%; background-color: rgba(0,0,0,0.3); height: 136px; z-index: 2; padding: 16px; }
.project-preview > div > div:first-of-type > div:last-child > div >  div > h3 { font-size: 18px; font-weight: 600; color: var(--white); margin-bottom: 16px;}
.project-preview > div > div:first-of-type > div:last-child > div > div > div > svg {fill: none; stroke: var(--white);}
.project-preview > div > div:first-of-type > div:last-child > div > div > div > span {color: var(--white); font-size: 12px; font-weight: 400; }
.project-preview > div > div:first-of-type > div:last-child > div >  div > table * { color: var(--white) !important; padding: 0; height: unset; }
.project-preview > div > div:first-of-type > div:last-child > div >  div > table th { background-color: unset !important; font-size: 12px; font-weight: 400}
.project-preview > div > div:first-of-type > div:last-child > div >  div > table td { font-weight: 600 !important; font-size: 14px !important; }
.project-preview > div > div:first-of-type > div:last-child > div > div > table tr th:not(:first-child),
.project-preview > div > div:first-of-type > div:last-child > div > div > table tr td:not(:first-child) { padding-left: 24px !important; }

.project-preview > div > div:nth-of-type(2) {margin-bottom: 30px; }
.project-preview > div > div:nth-of-type(2) > h3 { font-size: 18px; font-weight: 600; margin-bottom: 16px; }

div.goals-table-container { width: 100%;  overflow-x: auto; padding: 0 0 10px 0;}
div.goals-table-container > div { display: table;  width: max-content;}
div.goals-table-container > div > div {  display:table-cell; }
div.goals-table-container > div > div > div { display: table; }
div.goals-table-container > div > div > div > div { display: table-cell; /*! float: left; */}
div.goals-table-container .goal-pretty:not(:first-of-type) { padding-left: 16px; }

.goal-pretty.float-left{ margin-bottom: 20px; padding-right: 16px; }
.goal-pretty { height: 80px;   border-radius: 100px; }
.goal-pretty > div { height: 80px; padding: 8px; border-radius: 48px; display: table; border: 1px solid var(--gray-2); overflow: hidden;}
.goal-pretty > div > div { display: block; }
.goal-pretty > div > div:last-child { font-weight:700; color: var(--gray-4-1); font-size: 16px; vertical-align: middle; padding: 0 8px; max-width: 160px; line-height: 20px;}

.order-summary-icon { height: 32px; width: 32px; }
.order-summary-table tr * { height: 32px; vertical-align: middle; border-bottom: none; font-size: 14px; font-weight: 500 !important; color: var(--gray-5)}

.order-summary-table tr td:nth-of-type(1) { width: 10%; }
.order-summary-table tr td:nth-of-type(2) { width: 30%; }
.order-summary-table tr td:nth-of-type(3) { width: 30%; text-align: right; }
.order-summary-table tr td:nth-of-type(4) { width: 30%; text-align: right;}
.order-summary-title { font-size: 18px; font-weight: 600; margin-top: 20px; }
.order-summary-instructions { color: var(--gray-4-1); font-size: 14px; font-weight: 400; }

.order-summary-table tr.last-row td:nth-of-type(1) { width: 40%; }
.order-summary-table tr.last-row td:nth-of-type(2) { width: 30%; text-align: right; }
.order-summary-table tr.last-row td:nth-of-type(3) { width: 30%; text-align: right; }

.btn-50 { width: 47%; margin: 0 1.5%;}

.modal-title svg { fill: none; stroke:var(--gray-5); width: 30px; height: 30px; margin-left: 10px; }

.order-detail-total { background-color: var(--gray-1); border-radius: var(--border-radius-medium); padding: 32px 0;}
.order-detail-total > div:first-child{ width: 96px;}
.order-detail-total > div:first-child > div  { background-color: #EAECF5; padding:14px; border-radius: 50%; width: 48px; height: 48px; margin: 0 auto;}
.order-detail-total > div:first-child > div > svg{ fill: none; stroke: var(--blue-1); width: 20px; height: 20px; margin-top: -5px;}
.order-detail-total > div:last-child{ margin-left: 96px; }
.order-detail-total > div:last-child > div:first-child > span:first-child { font-size: 48px; font-weight: 800; line-height: 50px;font-family: "gf_Inter variant0", sans;}
.order-detail-total > div:last-child > div:first-child > span:last-child { font-size: 18px; font-weight: 600; line-height: 50px;}
.order-detail-total > div:last-child > div:last-child{font-size: 18px; font-weight: 600; text-transform: uppercase; }

.company-profile-banner .gradiant{
  height: 240px;  width: 100%;  background-image: url('/images/gradiant.jpg');
  background-position:-100px -650px; background-size: 120%; background-repeat: no-repeat;
  margin-bottom: 0;
}

.company-profile-banner .header{
  width:100%; height: 120px; overflow: visible;
  margin: 0;
}

.company-profile-banner .header .logo-area{
  width: 164px;
  height: 164px;
  margin-left: 32px;
  margin-top: -40px;
  border-radius: 50%;
  background-color: var(--white);
  padding: 2px;
}

.company-profile-banner .header .logo-area .logo {
  border: 1px solid #e9eaeb;
  height: 160px; width: 160px;
  border-radius: 50%;
  overflow: hidden;
}

.company-profile-banner .header .logo-area .logo * {
  width: 160px;
  height: 160px;
}

.company-profile-banner .header .basic-details {
  margin-left: 224px;
  padding: 20px 0;
}

.company-profile-banner .header .basic-details h1 {
  font-weight: 600; font-size: 24px; color: #181D27;
}

.company-profile-banner .header .basic-details p{
  font-weight: 400; font-size: 16px; color: #535862;
}

.company-profile-banner .header .btn-area{
  padding: 20px;
}

dl { /*! margin-left: 20px; */ }
dl > dt { float: left; }
dl > dt:after {content: ':';}
dl > dd { margin-left: 160px; }
dl > dd.ml-280 { margin-left: 280px; }



/* Dashboard Scripts */
.d-banner {
  width: 100%; height: 286px;
  background-image: url('/images/dashboard-banner.jpg');
  background-repeat: no-repeat;
  background-position-y: -228px;
  background-size: 100%;
  position: relative;
}

.d-banner img {
  position: absolute;
  top:0px;
  left: 43%;
}

.d-banner h2 {
  text-transform: uppercase;
  color: var(--white);
  transform: rotate(-90deg);
  position: absolute;
  top:130px;
  left: 65%;
  font-size: 20px; line-height: 24px;
  font-weight: 700;
}

.d-banner-data {
  float: right; margin-top: 40px; position: relative; left:-10%; color: var(--white); font-weight: 700;
}

.d-banner-data > div:not(:first-child) { margin-top: 20px;}
div.d-big-no {
  font-size: 30px;
  line-height: 30px;
}

div.d-big-no > small {
  font-size: 16px;
}

.d-banner-data > div > label {
  text-transform: uppercase;
  font-size: 12px;
}

.d-year-summary{
  border: 1px solid #E9EAEB; border-radius: 12px; padding: 20px;
  overflow: hidden;
}

.d-year-summary > h2 {
  font-weight: 600; font-size: 16px; color: #181D27;
}

.dh-svg { stroke: #A4A7AE; fill: none;height: 13px;width: 13px; cursor:pointer; }
.d-year-summary .description {color: #535862; font-size: 14px; }
.d-year-summary .description svg {width: 16px; height: 16px; margin-top: -5px; }
.d-year-summary .description.up span { color: red;}
.d-year-summary .description.up span svg{ stroke:red;}
.d-year-summary .description.down span { color: green;}
.d-year-summary .description.down span svg{ stroke:green;}
.d-year-summary .d-big-no { margin: 20px 0 12px; }
.d-year-summary .mini-line-chart { width: 45%; height: 88px; }
.d-year-summary .mini-line-chart svg{ width: 100%; height: 68%; overflow: visible;}
.d-year-summary .data-section { width: 55%; }

.d-projects-section:not(.initiatives), .d-esi { border: 1px solid #E9EAEB; border-radius: 12px; }
.d-projects-section:not(.initiatives) { margin-bottom: 100px; }
.d-projects-section:not(.initiatives) .header, .d-esi .header { border-bottom: 1px solid #E9EAEB; padding: 20px 24px;}
.d-projects-section .header h2, .d-esi .header h2 { font-weight: 600; font-size: 18px; line-height: 28px; margin:0; }
.d-projects-section:not(.initiatives) .header p, .d-esi .header p { font-weight: 400; font-size: 14px; line-height: 20px; color: #535862; margin: 0; }

.d-projects-section .projects-container { padding: 20px 24px 10px; position: relative; }
.d-projects-section .projects-container > div { overflow-x: hidden; }
.d-projects-section .projects-container > div > div { display: table; transition: margin-left .5s ease-in-out;}

.d-projects-section .projects-container .arrows{
  width: 40px; height: 40px;  position:absolute; top: 43%; background-color: white; padding: 0; border-radius: 50%; opacity: 0.4; cursor: pointer;
  transition: opacity 0.3s ease-in;
}
.d-projects-section .projects-container .arrows:hover {opacity: 1;}

.d-projects-section .projects-container .arrows.left-arrow { left: 40px; }
.d-projects-section .projects-container .arrows.right-arrow { right: 40px; }

.d-projects-section .projects-container .arrows > svg{ stroke: black; width: 100%; height: 40px; scale: 50%; margin-top: 0;padding-top: 0;  }

.d-projects-section .projects { display: table-row;  }
.d-projects-section .projects > div { display: table-cell; padding: 10px; }
.d-projects-section .projects > div:first-of-type { padding-left: 0; }
.d-projects-section .projects > div:last-of-type { padding-right: 0; }
.d-projects-section .projects > div .projct { height: 400px; position:relative; width: 400px;background-repeat: no-repeat;background-size: cover;background-position: center center;}
.d-projects-section .projects > div .projct > span {
  background-color: #D5D7DA; float: left;  margin: 12px; padding: 2px 9px; border-radius: 6px;
  font-size: 14px; font-weight: 500; line-height: 24px;
}
.d-projects-section .projects > div .projct .data-section {
  position: absolute; bottom: 0; width: 100%; height: 136px; background-color: #00000099; padding: 16px;
}
.d-projects-section .projects > div .projct .data-section table * { color: var(--white) !important; padding: 0; height: unset; }
.d-projects-section .projects > div .projct .data-section table th { background-color: unset !important; font-size: 12px; font-weight: 400}
.d-projects-section .projects > div .projct .data-section table td { font-weight: 600 !important; font-size: 14px !important; }
.d-projects-section .projects > div .projct .data-section table tr th:not(:first-child),
.d-projects-section .projects > div .projct .data-section table tr td:not(:first-child) { padding-left: 24px !important; }
.d-projects-section .projects > div .projct .data-section span { font-weight:400; font-size: 12px; line-height: 18px; color: white;}
.d-projects-section .projects > div .projct .data-section span svg{ width: 14px; height: 14px; fill: none; stroke: #fff; margin-top: 6px; margin-right: 8px;}
.d-projects-section .projects > div .projct .data-section h3 {font-weight: 600; font-size: 18px; line-height:28px; color: #fff; }

.d-projects-section .footer { padding: 0px 24px 20px;}
.d-projects-section .footer a { font-weight: 600; font-size: 14px; line-height: 20px; color: #363F72; }
.learn-more-button { cursor: pointer; }

.d-esi .footer table { width: 50%; }
.d-esi .footer table tr td:first-child { padding: 0;}
.d-esi .footer table tr td div.float-left { width: 8px; height: 8px; border-radius: 50%; margin-top: 7px;}
.d-esi .footer table tr td div:not(.float-left) { margin-left: 20px;}
.d-esi .footer { padding: 0px 24px 0;}

.d-esi-lable-main { font-weight: 500; font-size: 12px;; line-height: 18px; fill:#535862; }
.d-esi-lable-sub { font-weight: 400; font-size: 12px;; line-height: 18px; fill:#535862;  }

.d-esi .chart svg {margin-top: 20px;}
.d-esi .gray-strap { margin:20px; }

.net-z{
  height: 570px;
  background-color:#0c0e12;
  border-radius: 12px;
}

.net-z .net-z-chart {
  height: 288px;
}

#net-z-chart .y-label { font-size:12px; fill:#94979C; text-anchor:end; }
#net-z-chart .axis-x { stroke:#4E5BA6; stroke-width:2; }
#net-z-chart .x-label { font-weight: 600; font-size: 16px; fill: #CECFD2;}
#net-z-chart .line-existing { stroke:#FDB022; stroke-width:2; fill:none; stroke-linejoin:round; stroke-linecap:round; }
#net-z-chart .line-to-zero { stroke:#47CD89; stroke-width:2; fill:none; }
#net-z-chart .line-trend { stroke:#F04438; stroke-width:2; fill:none; }
#net-z-chart .grid-line { stroke:#22262F; stroke-width:1; fill:none; }


.net-z .header {padding: 24px; }
.net-z .header h2 {color: #F7F7F7; font-weight: 600; font-size: 18px; line-height: 28px ; margin: 0; }
.net-z .header p {color: #94979C; font-weight: 400; font-size: 14px; line-height: 20px ; }
.net-z .footer table { width: 50%; }
.net-z .footer table tr td:first-child { padding: 0;}
.net-z .footer table tr td div.float-left { width: 8px; height: 8px; border-radius: 50%; margin-top: 7px;}
.net-z .footer table tr td div:not(.float-left) { margin-left: 20px;}
.net-z .footer { padding: 0px 24px 0;}


.public-cover-image {
  background-image: url('/images/public.jpg');
  background-size: 100%;
  background-repeat: no-repeat;
  background-position-y: 75%;
}
.public-header {
  text-align: center; margin-top: 20%;
}

.public-header #logo {width: 234px; margin: 0 auto; }
.public-header #logo img { text-align: center; display: inline;}
.public-header h1 {font-weight: 600; font-size: 30px; line-height: 38px; color: #181D27; }
.height-100-vh { height: 100vh; }
.height-100-pct { height: 100%; }
.width-100-pct { width: 100%; }
.welcome-message { font-weight: 400; font-size:16px; font-weight: 24px; color: #535862; }
.below-form-message {font-weight: 400; font-size: 14px; line-height: 20px; color: #535862; }
.action-link-before-main-action { font-weight: 600; font-size: 14px; line-height: 20px; color: #363F72 !important; }
.below-form-message a { font-weight: 600; font-size: 14px; line-height: 20px; color: #363F72; text-decoration: none; }


.user-projects-container .location, .user-projects-container .unit-price{ width: 30% !important; float:left;}


.esi-select {
  position: relative;
  display: inline-block;
  cursor: pointer;
  user-select: none;
  font-family: sans-serif;
  font-size: 14px;
}

.esi-select-display {
  display: flex;
  align-items: center;
  gap: 6px;
  border: 1px solid #ccc;
  padding: 6px 10px;
  border-radius: 6px;
  background: #fff;
}

.esi-select svg {
  width: 16px;
  height: 16px;
  fill: none;
  stroke: black;
}

.esi-select-options {
  position: absolute;
  top: 100%;
  left: 0;
  right: 0;
  margin-top: 4px;
  border: 1px solid #ccc;
  border-radius: 6px;
  background: #fff;
  box-shadow: 0 2px 8px rgba(0,0,0,0.15);
  display: none;
  z-index: 10;
}

.esi-select-options div {
  padding: 6px 10px;
  cursor: pointer;
  text-align: center;
}
.esi-select-options div:hover {
  background: #f0f0f0;
}

.esi-select.open .esi-select-options {
  display: block;
}

.form-file {
  display: block;
  border:1px solid var(--gray-3); width: 100%;border-radius: 8px; padding: 5px;
}


.something-great-image{
    background-image: url('/images/something-great.jpg');
    background-size: cover;
    background-position: center center;
    background-repeat: no-repeat;
    height: 600px;
}

.bg-gray { background-color: #fafafa !important; }
.gap-32 {
  margin: 32px auto;
  padding: 0 32px;
}

.progress-tracker-section, .initiative-overview-section, .milestone-timeline-section, .something-great-section, .featured
{ padding: 42px 32px;}

.progress-tracker-section .r1 small, .something-great-section .r1 small {
  color: #6941C6;
  font-weight: 600; font-size: 16px; line-height: 24px;
}

.progress-tracker-section .r1 h1 {
  color: var(--gray-6);
  font-weight: 600; font-size: 48px; line-height: 60px;
}

.progress-tracker-section .r1 p{
  color: #535862;
  font-weight: 400; font-size: 20px; line-height: 30px;
}

.progress-tracker-section .r2 {
  margin-top: 90px;
}

.progress-tracker-section .r2 .large_number{
  color: #7F56D9;
  font-weight: 600; font-size: 60px; line-height: 72px;
}

.progress-tracker-section .r2 h2 {
  color: var(--gray-6);
  font-weight: 600; font-size: 18px; line-height: 28px;
}

.progress-tracker-section .r2 p {
  color: #535862;
  font-weight: 400; font-size: 16px; line-height: 24px; padding-right: 20px;
}

.initiative-overview-section h1, .milestone-timeline-section h1, .something-great-section h1 {
  color: var(--gray-6);
  font-weight: 600; font-size: 36px; line-height: 44px;
}

.initiative-overview-section .r1 p, .milestone-timeline-section .r1 p, .something-great-section .r1 p {
  color: #535862;
  font-weight: 400; font-size: 20px; line-height: 30px;
  margin-top: 22px; max-width: 800px;
}

.initiative-overview-section .r2 .card {
  border-radius: 12px; border-color: #E9EAEB;
}

.initiative-overview-section .r2 .card > div { padding: 20px 24px 21px; border-bottom: 1px solid #E9EAEB; }

.initiative-overview-section .r2 .card .card-top h2 {
  font-weight: 600; font-size: 16px; line-height: 24px; margin: 0;
}

.initiative-overview-section .r2 .card .card-bottom .number-highlighted {
  font-weight: 600; font-size: 24px; line-height: 32px; margin: 0;
}

.initiative-overview-section .r2 .card .card-bottom .number-highlighted small {
  font-weight: 400; font-size: 16px; line-height: 27px; margin: 0;
}

.pb-container { height: 8px; width: 100%; margin-top: 16px; margin-bottom: 16px; }
.pb-container .progress-bar-bg {
  height: 100%; width: 100%; background-color: #E9EAEB; border-radius: 4px;
}
.pb-container .progress-bar {
  background-color: #7F56D9;
  height: 100%; border-radius: 4px;
}

.initiative-overview-section .r3 .quote-section {
  padding: 8px 20px; border-left: 2px solid #7F56D9;
}

.initiative-overview-section .r3 .quote-section p {
  font-weight: 400; font-size: 18px; line-height: 28px; margin:0;
}

.milestone-timeline-section .mt-card { padding-bottom: 24px; opacity: 60%; }
.milestone-timeline-section .mt-card.active { opacity: 100%; }
.milestone-timeline-section .mt-card .float-left {
  height: 48px; width: 48px; padding: 12px;
}
.milestone-timeline-section .mt-card .float-left svg {
  width: 100%; height: 100%; fill: none; stroke: #414651;
}

.milestone-timeline-section .mt-card > div:last-child { margin-left: 48px;}

.milestone-timeline-section .r2 .mt-card h2{
  font-weight: 600; font-size: 14px; line-height: 20px; color: #414651;
}

.milestone-timeline-section .r2 p{
  font-weight: 400; font-size: 14px; line-height: 20px; color: #535862;
}

.something-great-section .r2 {
  margin-top: 64px;
}
.something-great-section .large_number {
  font-weight: 600; font-size: 60px; line-height: 72px; color: #3E4784;
}

.something-great-image { max-width: 544px; margin: 0 32px; height: 560px; }
.something-great-section h2 {
  font-weight: 600; font-size: 18px; line-height: 28px; color: #181D27;
}
.something-great-section .r2 p {
  font-weight: 400; font-size: 16px; line-height: 24px; color: #535862;
  width: 90%; margin: 0 auto;
}

.something-great-section .r2 .row {
  margin-top: 64px;
}

.certifications { padding: 96px; }

.certifications small {
  font-weight: 600; font-size: 16px; line-height: 24px; color: #363F72;
}

.certifications h1 {
  font-weight: 600; font-size: 36px; line-height: 44px; color: #181D27;
}

.certifications p {
  font-weight: 400; font-size: 20px; line-height: 30px; color: #535862; width: 72%; margin: 20px auto;
}

.featured small { font-weight:600; font-size: 16px; line-height:24px; color: #363F72 }
.featured h1 { font-weight:600; font-size: 36px; line-height:44px; color: #181D27; margin-top: 12px; }
.featured p { font-weight:400; font-size: 20px; line-height:30px; color: #535862;  }
.featured .projects-container, .featured .footer { padding: 20px 0  }

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


.certifications-container{
  margin: 0 auto;
}

.cert-icon { width: 66px; height: 66px; float:left; background-size: cover; margin:32px; }

.reports-side-bar {
  margin: 0; padding: 0; list-style: none;
}

.reports-side-bar li { padding: 8px 12px; }

.reports-side-bar li a {
  font-weight: 600; font-size: 14px; line-height: 20px; color: #717680;
}
.reports-side-bar li.active { background-color: #FAFAFA; border-radius: 6px; }
.reports-side-bar li.active a { color: #414651; }
.reports-title { font-weight: 600; font-size: 18px; line-height: 28px; }