/* -------------------------------------------------------------------------- */
/*                                Falcon Button                               */
/* -------------------------------------------------------------------------- */

/* VARS */
:root {
  --psslightblue: #81B7CD;
  --psslightbluedarker: #80B6CB;
  --pssorange: #DD9314; 
  --pssgray: #474747;
  --pcbblue: #5EACD8;
  --psslightgray: #666666;
  --pssbluegray: #424C57;
  --pssfontfamily: Helvetica, Courier;
  --falcon-navbar-light-brand-color: var(--psslightblue);
  --falcon-gray-900: var(--pssbluegray);
  --detail-switch-tick: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='-4 -4 8 8'%3e%3ccircle r='3' fill='%23DD9314'/%3e%3c/svg%3e");
  --carousel-next: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16' fill='%23333'%3e%3cpath d='M4.646 1.646a.5.5 0 0 1 .708 0l6 6a.5.5 0 0 1 0 .708l-6 6a.5.5 0 0 1-.708-.708L10.293 8 4.646 2.354a.5.5 0 0 1 0-.708z'/%3e%3c/svg%3e");
  --carousel-prev: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16' fill='%23333'%3e%3cpath d='M11.354 1.646a.5.5 0 0 1 0 .708L5.707 8l5.647 5.646a.5.5 0 0 1-.708.708l-6-6a.5.5 0 0 1 0-.708l6-6a.5.5 0 0 1 .708 0z'/%3e%3c/svg%3e");
}

:root.dark 
{
  --carousel-next: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16' fill='%23EEE'%3e%3cpath d='M4.646 1.646a.5.5 0 0 1 .708 0l6 6a.5.5 0 0 1 0 .708l-6 6a.5.5 0 0 1-.708-.708L10.293 8 4.646 2.354a.5.5 0 0 1 0-.708z'/%3e%3c/svg%3e");
  --carousel-prev: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16' fill='%23EEE'%3e%3cpath d='M11.354 1.646a.5.5 0 0 1 0 .708L5.707 8l5.647 5.646a.5.5 0 0 1-.708.708l-6-6a.5.5 0 0 1 0-.708l6-6a.5.5 0 0 1 .708 0z'/%3e%3c/svg%3e");
  --falcon-white: #eee;
}


.w-33 {
  width: 33.333%;
}

.w-22 {
  width: 22%;
}

.w-25 {
  width: 25%;
}

.w-125 {
  width: 12.5%;
}

.w-111 {
  width: 11.11111%;
}

.w-11 {
  width: 11.00%;
}

.w-10 {
  width: 10.0000%;
}
.w-20 {
  width: 20.000%;
}

:root .text-pssorange
{
  color: var(--pssorange);
}

:root .text-psslightblue
{
  color: var(--psslightblue);
}


:root .bg-pcbblue
{
  background-color: var(--pcbblue);
}

:root .text-pssgray
{
  color: var(--pssgray);
}

.treeview .treeview-border
{
  border-color: var(--falcon-gray-300);   
}

:root .treeitem-selected
{
  color: var(--pssorange)!important;
}

:root .link-text
{
  color: var(--falcon-body-color);
}

:root .text-pssbluegray
{
  color: var(--pssbluegray);
}

:root .bg-pssbluegray
{
  background-color: var(--pssbluegray);
}

:root .bg-psslightblue
{
  background-color: var(--psslightblue);
}

:root .bg-pssorange
{
  background-color: var(--pssorange);
}

:root .bg-pssgray{
  background-color: var(--pssgray);
}

/* Setup global site font */
body,
h6, .h6, h5, .h5, h4, .h4, h3, .h3, h2, .h2, h1, .h1,
input, button, select, optgroup, textarea, label, .alert, .badge, .blockquote-footer, .btn, [data-list] .page, .tox .tox-menu__footer .tox-button:last-child, .tox .tox-dialog__footer .tox-button:last-child, .tox .tox-menu__footer .tox-button--secondary, .tox .tox-dialog__footer .tox-button--secondary, .navbar, .pagination, .valid-feedback, .invalid-feedback
{
  font-family: var(--pssfontfamily) !important;
}

/* Change the selected text color */
.dark ::selection{
    background-color: var(--psslightblue);
    filter: brightness(0.85);
}
::selection{
  background-color: var(--psslightblue);
}

/* END */

.btn-pssorange {
  background-color: var(--pssorange);
  border-color: var(--pssorange);
  color: #fff;
}

.btn-pssorange:hover {
  background-color: var(--pssorange);
  border-color: var(--pssorange);;
  color: #fff;
}

.btn-pssorange:focus,
.btn-pssorange:active {
  background-color: var(--pssorange);
  border-color: var(--pssorange);
  color: #fff;
}
.btn-pcbblue {
  background-color: var(--pcbblue);
  border-color: var(--pcbblue);
  color: #fff;
}

.btn-pcbblue:hover {
  background-color: var(--pcbblue);
  border-color: var(--pcbblue);;
  color: #fff;
}

.btn-pcbblue:focus,
.btn-pcbblue:active {
  background-color: var(--pcbblue);
  border-color: var(--pcbblue);
  color: #fff;
}


a
{
  color: var(--psslightbluedarker);
  text-decoration: none;
}
a:hover
{
  color: var(--psslightbluedarker);
  filter: brightness(0.85);
  text-decoration: none;
}

/* 
  Change the debug accordion elements colors - seems to be a bug 
*/

.dark .accordion-body{
  background-color: var(--falcon-body-bg);
}

.dark .accordion-item{
  background-color: var(--falcon-gray-200);
}

.dark .accordion-button.collapsed{
  background-color: var(--falcon-gray-200);
}
/* END */


/* Fix up google and its auto fill style changes */

input:-webkit-autofill::first-line,
input:-webkit-autofill,
input:-webkit-autofill:focus {
  transition: background-color 600000s 0s, color 600000s 0s;
  font-size: 1rem;
  line-height: 1.5;
}

/* END */


/* Control opactity of any gravatar being used */

img.gravatar 
{
  opacity: 0.5;
}

/* END */


/* Change primary button color to pss orange */

.btn-primary,
.btn-primary:active,
.btn-primary:active:focus,
.btn-primary:hover,
.btn-primary:disabled,
.btn-primary:focus
{
  background-color: var(--pssorange);
  border-color: var(--pssorange);
}

/* darkern hover and disabled colors a little */
.btn-primary:hover,
.btn-primary:disabled
{
  filter: brightness(0.85);
}

/* END */

/* nav pills */
.nav-pills .nav-link.active,
 .nav-pills .show > .nav-link
{
  background-color: var(--psslightblue);
}

.nav-link
{
  color: var(--falcon-gray-800);
}

.nav-link:hover
{
  color: var(--psslightblue);
}

/* Wizard control header icon backgrounf colors and lines between them */

.theme-wizard .nav-link.active .nav-item-circle {
  background-color: var(--pssorange) !important;
  border-color: var(--pssorange) !important;
}

.theme-wizard .nav-link.done .nav-item-circle {
  background-color: var(--psslightblue) !important;  
  border-color: var(--psslightblue) !important;
}

.theme-wizard .nav-link.active {
  color: var(--pssorange) !important;
}

.theme-wizard .nav-link.done {
  color: var(--psslightblue) !important;
}

.theme-wizard .nav-item:not(:first-child) .active .nav-item-circle-parent:after,
.theme-wizard .nav-link.done .nav-item-circle-parent:before
{
  background-color: var(--psslightblue) !important;
}

/* END */

/* Switch to use pss color */

.form-check-input
{
  border-color: var(--pssorange);
}

.form-switch .form-check-input:not(:checked)
{
    background-image: var(--detail-switch-tick) !important;
 }

.form-check-input:checked {
  background-color: var(--pssorange);
  border-color: var(--pssorange);
}

/* END */


/* Sub nav bar colors */
.toolbarborder_single
{
  border-top: 5px solid var(--pssorange);
  border-bottom: 3px solid var(--pssbluegray);
  background-color: var(--pssgray);
}
.toolbarborder_double_top
{
  border-top: 5px solid var(--pssorange);
  border-bottom: 1px solid var(--pssbluegray) !important;
  background-color: var(--pssgray);
}
.toolbarborder_double_bottom
{
  border-bottom: 3px solid var(--pssbluegray);
  background-color: var(--pssgray);
}
.toolbarborder_triple_top
{
  border-top: 5px solid var(--pssorange);
  border-bottom: 1px solid var(--pssbluegray) !important;
  background-color: var(--pssgray);
}
.toolbarborder_triple_middle
{
  border-bottom: 1px solid var(--pssbluegray) !important;
  background-color: var(--pssgray);
}
.toolbarborder_triple_bottom
{
  border-bottom: 3px solid var(--pssbluegray);
  background-color: var(--pssgray);
}



.videolink img
{  
    border:6px solid var(--pssorange);
    max-width: 220px;
}

.dark .bg-video
{
  opacity: 0.75;
}

.videolink img:hover
{  
    filter: brightness(0.85);    
}

.carousel-control-next-icon {
  background-image: var(--carousel-next);
}

.carousel-control-prev-icon {
  background-image: var(--carousel-prev);
}

.carousel-caption {
  position: relative;
  left: 0;
  top: 0;
}

.homesection
{
  border-radius: 0.375rem;
  margin: 0.5rem 0;
}

.bg-holder
{
  border: 1px solid rgba(71, 71, 71, 0.2);
  border-radius: 0.375rem;
  box-shadow: 0 0.5rem 1rem rgba(0, 0, 0, 0.15);
}

.ratio.salevideo
{
  --falcon-aspect-ratio: 34.48%;
}

.video-container-clickable
{
  cursor: pointer;
  border-radius: 0.375rem;
  border: 1px solid #6c757d;
  box-shadow: 0 0.25rem 0.5rem rgba(0, 0, 0, 0.15);
  overflow: hidden;
}

.video-poster-overlay
{
  opacity: 0.45;
}

.video-play-button-overlay
{
  pointer-events: none;
}

.video-play-button-overlay img
{
  width: 80px;
  height: 80px;
  opacity: 0.75;
}

.btn.btn-proselect {
  background-image: url('/prostudiosoftware/images/proselect_icon_43_light.png');
  background-size: auto 24px;
  background-repeat: no-repeat;  
  background-position: 12px 5px;
}

.modal-header.plus
{
  background-image: url('/prostudiosoftware/images/plus_light_144.png');
  background-size: auto 36px;
  background-repeat: no-repeat;  
  background-position: 8px 8px;
}

.modal-header.pro
{
  background-image: url('/prostudiosoftware/images/proselect_icon_43_dark.png');
  background-size: auto 36px;
  background-repeat: no-repeat;  
  background-position: 8px 12px;
}

.rounded-top-0{
    border-top-left-radius: 0 !important;
    border-top-right-radius: 0 !important;
}

.rounded-top-1{
  border-top-left-radius: 0.2rem !important;
  border-top-right-radius: 0.2rem !important;
}

.rounded-top-2{
  border-top-left-radius: 0.25rem !important;
  border-top-right-radius: 0.25rem !important;
}

.rounded-top-3{
  border-top-left-radius: 0.375rem !important;
  border-top-right-radius: 0.375rem !important;
}

.rounded-bottom-0{
  border-bottom-left-radius: 0 !important;
  border-bottom-right-radius: 0 !important;
}

.rounded-bottom-1{
  border-bottom-left-radius: 0.2rem !important;
  border-bottom-right-radius: 0.2rem !important;
}

.rounded-bottom-2{
  border-bottom-left-radius: 0.25rem !important;
  border-bottom-right-radius: 0.25rem !important;
}

.rounded-bottom-3{
  border-bottom-left-radius: 0.375rem !important;
  border-bottom-right-radius: 0.375rem !important;
}

@media (min-width: 576px) {

  .rounded-sm-0 {
    border-radius: 0 !important;
  }
  
  .rounded-sm-1 {
    border-radius: 0.2rem !important;
  }
  
  .rounded-sm-2 {
    border-radius: 0.25rem !important;
  }
  
  .rounded-sm-3 {
    border-radius: 0.375rem !important;
  }

  .rounded-top-sm-0{
    border-top-left-radius: 0 !important;
    border-top-right-radius: 0 !important;
  }

  .rounded-top-sm-1{
    border-top-left-radius: 0.2rem !important;
    border-top-right-radius: 0.2rem !important;
  }

  .rounded-top-sm-2{
    border-top-left-radius: 0.25rem !important;
    border-top-right-radius: 0.25rem !important;
  }

  .rounded-top-sm-3{
    border-top-left-radius: 0.375rem !important;
    border-top-right-radius: 0.375rem !important;
  }

  .rounded-bottom-sm-0{
    border-bottom-left-radius: 0 !important;
    border-bottom-right-radius: 0 !important;
  }

  .rounded-bottom-sm-1{
    border-bottom-left-radius: 0.2rem !important;
    border-bottom-right-radius: 0.2rem !important;
  }

  .rounded-bottom-sm-2{
    border-bottom-left-radius: 0.25rem !important;
    border-bottom-right-radius: 0.25rem !important;
  }

  .rounded-bottom-sm-3{
    border-bottom-left-radius: 0.375rem !important;
    border-bottom-right-radius: 0.375rem !important;
  }

}

.btn-outline-pssorange {
  color: var(--pssorange);
  border-color: var(--pssorange);
}
.btn-outline-pssorange:hover {
  color: #fff;
  background-color: var(--pssorange);
  border-color: var(--pssorange);
}
.btn-check:focus + .btn-outline-pssorange, .btn-outline-pssorange:focus {
  -webkit-box-shadow: 0 0 0 0 rgba(44, 123, 229, 0.5);
  box-shadow: 0 0 0 0 rgba(44, 123, 229, 0.5);
}
.btn-check:checked + .btn-outline-pssorange, .btn-check:active + .btn-outline-pssorange, .btn-outline-pssorange:active, .btn-outline-pssorange.active, .btn-outline-pssorange.dropdown-toggle.show {
  color: #fff;
  background-color: var(--pssorange);
  border-color: var(--pssorange);
}
.btn-check:checked + .btn-outline-pssorange:focus, .btn-check:active + .btn-outline-pssorange:focus, .btn-outline-pssorange:active:focus, .btn-outline-pssorange.active:focus, .btn-outline-pssorange.dropdown-toggle.show:focus {
  -webkit-box-shadow: inset 0 3px 5px rgba(0, 0, 0, 0.125), 0 0 0 0 rgba(44, 123, 229, 0.5);
  box-shadow: inset 0 3px 5px rgba(0, 0, 0, 0.125), 0 0 0 0 rgba(44, 123, 229, 0.5);
}
.btn-outline-pssorange:disabled, .btn-outline-pssorange.disabled {
  color: var(--pssorange);
  background-color: transparent;
}

.checklist
{
  list-style: none;
}

.checklist li
{
  margin-left: 0px;
  padding-top: 8px;
}

.modal-content nav .pagination li a
{
  background-color:var(--pssgray);
  color: white;
}

.modal-content nav .pagination li.active a
{
  background-color:var(--pssorange);
}

.modal-content nav .pagination a.page-link
{
  border-color: var(--psslightgray);
}

.supresponded{
	background-color: #B1EAAA;
}
.supresponded a
{
  color: #5e6e82;
  display: block;
}

.supawaitingresponse{
	background-color: #D3E5F7;
}

.supawaitingresponse a
{
  color: #5e6e82;
  display: block;
}

.page-item.disabled .page-link
{
  border-color: var(--falcon-body-bg);
}


/* Disable navbar resize animations */
.navbar-vertical,
.navbar-vertical .navbar-collapse,
.navbar-vertical .navbar-vertical-content,
.content {
  transition: none !important;
  animation: none !important;
}
.navbar-vertical.navbar-expand-xl .navbar-collapse
{
  margin-top: -3px !important;
}

@media (min-width: 1200px) {
    :root .navbar-vertical.navbar-expand-xl.navbar-card, .navbar-vertical.navbar-expand-xl.navbar-vibrant, .navbar-vertical.navbar-expand-xl.navbar-inverted {
        padding: 0;
        max-width: 20rem !important;
      }
     :root .navbar-vertical.navbar-expand-xl.navbar-card .navbar-vertical-content
      {
        width: 19rem !important;
      }
    
     .navbar-vertical.navbar-expand-xl.navbar-card + .content, .navbar-vertical.navbar-expand-xl.navbar-vibrant + .content, .navbar-vertical.navbar-expand-xl.navbar-inverted + .content {
        margin-left: 20rem;
      }

      .navbar-vertical.navbar-expand-xl.navbar-card .navbar-collapse,     .navbar-vertical-collapsed-hover .navbar-vertical.navbar-expand-xl.navbar-card .navbar-collapse
      {
        width: 19rem !important;
      }
      .navbar-vertical-collapsed:not(.navbar-vertical-collapsed-hover) .navbar-vertical.navbar-expand-xl .navbar-collapse
      {
        width: 3.125rem !important;
      }
}

@media (min-width: 1400px) {
    :root .navbar-vertical.navbar-expand-xl.navbar-card, .navbar-vertical.navbar-expand-xl.navbar-vibrant, .navbar-vertical.navbar-expand-xl.navbar-inverted {
        padding: 0;
        max-width: 24rem !important;
      }
     :root .navbar-vertical.navbar-expand-xl.navbar-card .navbar-vertical-content
      {
        width: 23rem !important;
      }
    
     .navbar-vertical.navbar-expand-xl.navbar-card + .content, .navbar-vertical.navbar-expand-xl.navbar-vibrant + .content, .navbar-vertical.navbar-expand-xl.navbar-inverted + .content {
        margin-left: 24rem;
      }

      .navbar-vertical.navbar-expand-xl.navbar-card .navbar-collapse,     .navbar-vertical-collapsed-hover .navbar-vertical.navbar-expand-xl.navbar-card .navbar-collapse
      {
        width: 23rem !important;
      }
}

@media (min-width: 1600px) {
    :root .navbar-vertical.navbar-expand-xl.navbar-card, .navbar-vertical.navbar-expand-xl.navbar-vibrant, .navbar-vertical.navbar-expand-xl.navbar-inverted {
        padding: 0;
        max-width: 28rem !important;
      }
     :root .navbar-vertical.navbar-expand-xl.navbar-card .navbar-vertical-content
      {
        width: 27rem !important;
      }
    
     .navbar-vertical.navbar-expand-xl.navbar-card + .content, .navbar-vertical.navbar-expand-xl.navbar-vibrant + .content, .navbar-vertical.navbar-expand-xl.navbar-inverted + .content {
        margin-left: 28rem;
      }

      .navbar-vertical.navbar-expand-xl.navbar-card .navbar-collapse,     .navbar-vertical-collapsed-hover .navbar-vertical.navbar-expand-xl.navbar-card .navbar-collapse
      {
        width: 27rem !important;
      }
}

@media (min-width: 2048px) {
  .col-xxxl {
    flex: 1 0 0%;
  }  
  .col-xxxl-auto {
    flex: 0 0 auto;
    width: auto;
  }
  .col-xxxl-1 {
    flex: 0 0 auto;
    width: 4%;
  }
  .col-xxxl-2 {
    flex: 0 0 auto;
    width: 18%;
  }
  .col-xxxl-3 {
    flex: 0 0 auto;
    width: 12.25%;
  }
  .col-xxxl-4 {
    flex: 0 0 auto;
    width: 33.33333333%;
  }
  .col-xxxl-5 {
    flex: 0 0 auto;
    width: 41.66666667%;
  }
  .col-xxxl-6 {
    flex: 0 0 auto;
    width: 50%;
  }
  .col-xxxl-7 {
    flex: 0 0 auto;
    width: 58.33333333%;
  }
  .col-xxxl-8 {
    flex: 0 0 auto;
    width: 66.66666667%;
  }
  .col-xxxl-9 {
    flex: 0 0 auto;
    width: 75%;
  }
  .col-xxxl-10 {
    flex: 0 0 auto;
    width: 83.33333333%;
  }
  .col-xxxl-11 {
    flex: 0 0 auto;
    width: 91.66666667%;
  }
  .col-xxxl-12 {
    flex: 0 0 auto;
    width: 100%;
  }
}

@media (min-width: 2800px) {
  .col-xxxxl {
    flex: 1 0 0%;
  }  
  .col-xxxxl-auto {
    flex: 0 0 auto;
    width: auto;
  }
  .col-xxxxl-1 {
    flex: 0 0 auto;
    width: 12%;
  }
  .col-xxxxl-2 {
    flex: 0 0 auto;
    width: 18%;
  }
  .col-xxxxl-3 {
    flex: 0 0 auto;
    width: 12.25%;
  }
  .col-xxxxl-4 {
    flex: 0 0 auto;
    width: 33.33333333%;
  }
  .col-xxxxl-5 {
    flex: 0 0 auto;
    width: 41.66666667%;
  }
  .col-xxxxl-6 {
    flex: 0 0 auto;
    width: 50%;
  }
  .col-xxxxl-7 {
    flex: 0 0 auto;
    width: 58.33333333%;
  }
  .col-xxxxl-8 {
    flex: 0 0 auto;
    width: 66.66666667%;
  }
  .col-xxxxl-9 {
    flex: 0 0 auto;
    width: 75%;
  }
  .col-xxxxl-10 {
    flex: 0 0 auto;
    width: 83.33333333%;
  }
  .col-xxxxl-11 {
    flex: 0 0 auto;
    width: 91.66666667%;
  }
  .col-xxxxl-12 {
    flex: 0 0 auto;
    width: 100%;
  }
}