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

/* VARS */
:root {
  --psslightblue: #81B7CD;
  --psslightbluedarker: #80B6CB;
  --pssorange: #DD9314; 
  --pssgray: #474747;
  --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 .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);
}

/* limit the overall size to 1500px */
main
{
  max-width: 1500px;  
  
}

/* 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 */



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-200);
}

.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;
}


.bg-holder.header
{
  border-top: solid 4px black;
  border-bottom: solid 12px black;
}

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

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

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

.modal-header.pro
{
  background-image: url('../img/icons/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);
}