html { height: 100%; overflow:auto; scroll-behavior: smooth !important; }
body { height: 100%; font-family: "Helvetica Neue", Helvetica, Arial, sans-serif; }

@keyframes blinker { 50% {opacity: 0;}}
:root {
		--navbar-height: 10rem; 
		--header-bg-color: #231f20; 
		--modal-content-width: 60%;
		--lm-link-text-color-hover:var(--brand-color);
		--dm-link-text-color-hover: var(--brand-color);
		--lm-button-primary-bg-color: var(--brand-color);	
		--lm-button-primary-border-color: #000000;
		--lm-button-primary-bg-color-hover: #5a676b;
		--lm-button-primary-border-color-hover: #000000;
		--dm-button-primary-bg-color: var(--brand-color);	
		--dm-button-primary-border-color: #bababc;
		--dm-button-primary-bg-color-hover: #5a676b;
		--dm-button-primary-border-color-hover: #bababc;

		--lm-badge-primary-bg-color: var(--brand-color);	
		--lm-badge-primary-border-color:var(--brand-color);
		--lm-badge-primary-bg-color-hover: #5a676b;
		--lm-badge-primary-border-color-hover: var(--brand-color);
		--dm-badge-primary-bg-color: var(--brand-color);	
		--dm-badge-primary-border-color: var(--brand-color);
		--dm-badge-primary-bg-color-hover: #5a676b;
		--dm-badge-primary-border-color-hover: var(--brand-color);
 
		--lm-input-file-button-bg-color-hover: var(--brand-color);
		--lm-input-file-button-bg-color-focus: var(--brand-color);
		--dm-input-file-button-bg-color-hover: var(--brand-color);
		--dm-input-file-button-bg-color-focus: var(--brand-color);
		--lm-collapse-header-bg-color: #ffffff;
		--dm-collapse-header-bg-color: #231f20;
		--lm-collapse-content-border-color: #000000;
		--dm-collapse-content-border-color: #bababc;
        --lm-table-striped-bg-color: #f6f6f7;

		--form-text-font-size: 1rem;
		--form-text-padding-top: 0;
		--form-text-padding-bottom: 0;
		--form-text-border-width: 0;
		--dropdown-menu-border-radius: 0;
    	--collapse-header-border-width: 0;
    	--collapse-content-border-radius: 0;
        --collapse-content-border-radius: 0;
        --alert-border-radius: 0;
        --sticky-alerts-top: 13rem;
        
        --input-group-text-border-radius: 0;
        --input-group-text-border-widt : 0;
        --lm-input-group-text-bg-color: inherit;
        --lm-input-group-text-border-color: inherit;
        --dm-input-group-text-bg-color: inherit;
        --dm-input-group-text-border-color: inherit;
    --sidebar-width: 22rem;
    --tooltip-width: auto;
    
} 

a {color: inherit;}
h1, h2, h3, h4, h5, h6 {
    margin-top: 1rem;
    margin-bottom: 1rem;
    font-weight: bold;
    font-style:oblique;
}

ol{list-style-position: outside;}
ul{list-style-position: outside;}
.fixed { table-layout:fixed;  word-break:break-all;}
.custom-file label {
    color: #ffffff;
    background-color: var(--brand-color);
    padding: 0;
	border:0px solid var(--lm-input-file-button-border-color); 
	border-radius: 0;
}
.collapse-content {border:0;}
.w-20p {width:20% !important;}
.w-40p {width:40% !important;}
.w-45p {width:45% !important;}
.w-55p {width:55% !important;}
.w-60p {width:60% !important;}
.w-10 {width: 1.0em;}
.w-30 {width: 3.0rem;}
.w-60 {width: 6.0rem;}
.w-75 {width: 7.5rem;}
.w-130 {width: 13rem;}
.w-200 {width: 20rem;}
.w-225 {width: 25.5rem;}
.w-325 {width: 32.5rem;}
.w-700 {width: 70.0rem;}
.h-40 {height: 4rem!important;}
.mh-40 {height: 4rem!important;}
.h-45 {height: 4.5rem!important;}
.h-400 { height: 40rem!important;}
.h-420 { height: 42rem!important;}
.h-430 { height: 43rem!important;}

.m-1 {margin: .1rem!important;}
.m-half {margin: .5rem!important;}
.mt-neg-5 {margin-top: -.5rem!important;}
.mt-1 {margin-top: .1rem!important;}
.mt-2 {margin-top: .2rem!important;}
.mt-3 {margin-top: .3rem!important;}
.mt-4 {margin-top: .4rem!important;}
.mr-40 {margin-right: 4rem!important;}
.ml-40 {margin-left: 4rem!important;}
.ml-60 {margin-left: 6rem!important;}
.ml-110 {margin-left: 11rem!important;}
.mt-30 {margin-top: 3rem!important;}
.mt-40 {margin-top: 4rem!important;}
.mt-50 {margin-top: 5rem!important;}
.mt-60 {margin-top: 6rem!important;}
.mt-110 {margin-top: 11rem!important;}

.i1 {padding-left: 1rem!important; }
.i2 {padding-left: 2rem!important; }
.i3 {padding-left: 3rem!important; }
.i4 {padding-left: 4rem!important; }
.i5 {padding-left: 5rem!important; }
.i6 {padding-left: 6rem!important; }
.i7 {padding-left: 7rem!important; }
 
 
.pl-30 {padding-left: 3rem!important; }

.font-size-0 {font-size: 0.0rem;}
.font-size-8 {font-size: 0.8rem;}
.font-size-9 {font-size: 0.9rem;}
.font-size-10 {font-size: 1.0rem;}
.font-size-11 {font-size: 1.1rem;}
.font-size-12 {font-size: 1.2rem;}
.font-size-25 {font-size: 2.5rem;}
.font-size-28 {font-size: 2.8em;}
.font-size-33 {font-size: 3.3rem;}
.font-size-38 {font-size: 3.8rem;}
.font-size-40 {font-size: 4rem;}
.font-size-50 {font-size: 5rem;}
.font-normal {font-style: normal;}

.lh-15 {line-height: 1.5rem;}
.lh-10 {line-height: 1.0rem;}
.lh-20 {line-height: 2.0rem;}
.lh-30 {line-height: 3.0rem;}

.ul-2col {   columns: 2;   -webkit-columns: 2;   -moz-columns: 2; }

.modal-content .close {right: 10rem;  left: auto;}
.nondimmed {-ms-filter:"progid:DXImageTransform.Microsoft.Alpha(Opacity=100)"; 	filter: alpha(opacity=100); 	opacity: 1.0;}
.dimmed    {-ms-filter:"progid:DXImageTransform.Microsoft.Alpha(Opacity=50)"; 	filter: alpha(opacity=50); 	opacity: 0.5;}	
	
.z-front {z-index: 10; top: 9.0rem!important;}
.z-back {z-index: -10; top: -9.0rem!important;}
#header { background-color: #231f20; color: #ffffff;height: 8rem; }
#logo {font-size: 0px;  color: #231f20;}
#greeting a{ border-bottom: 0px solid #ffffff; text-decoration: none;  font-weight: normal;}
#greeting a.login{border-bottom: 1px solid #ffffff;}
#greeting .top-link { font-size: 1.6rem;  font-weight: 600;}
#sub-header {background-color: #5a676b; color: #ffffff; font-size: 1.6rem; height: 3rem; border-top: 5px solid var(--brand-color); }
#sub-header  a{color: #ffffff;}
#content { }
#beagle {color: #000000; background: #ffffff url('/wwwroot/image/beagle.png') no-repeat; background-size: 40%; background-position:right top;}
#arrow {color: #000000; background: #ffffff url('/wwwroot/image/arrow-left.png') no-repeat; background-size: 40%; background-position:right top;}
#bubbles{background: url(/wwwroot/image//bubbles.png) no-repeat; background-size: cover;}
#pstack2 {background: url('/wwwroot/image/paperstack2.png') no-repeat; background-size: 60%; background-position:right bottom;}
#pstack3 {background: url('/wwwroot/image/paperstack2.png') no-repeat; background-size: 25%; background-position:right bottom;}
#garrow {background: url('/wwwroot/image/arrowright.png') no-repeat;  background-position:left 1rem;}
#footer{margin-top:2rem;}
#blogentries a{color: var(--brand-color); border-bottom: 1px solid var(--brand-color);}
#blogentries a:hover {color: var(--brand-color); text-decoration: none; border-bottom: 0px solid var(--brand-color);}
 
.search-filter{ margin:0; padding:0;}
.search-filter .summary{border-bottom: 2px solid var(--brand-color); margin:0; padding:0;}
.search-filter .div{ margin:0; padding:0;}
.golink {background-color: #5a676b; color: #ffffff; font-size: 1rem;   }
.white-top {border-top: 1px solid#ffffff;}
.white-bk {background-color:#ffffff;}
.white {color:#ffffff;}
.white-hover:hover {color:#ffffff;}
.white-hover-underline:hover {color:#ffffff; border-bottom: 1px solid #ffffff;}
.blue {color: #307ebb;}
.blue-bk {background-color: #307ebb;}
.green {color: #5ea73c;}
.green-bk {background: #5ea73c;}
.green-bottom {border-bottom: 1px solid #5ea73c;}
.lt-grey-bk {background: #f6f6f7;}
.grey-bk {background: #e7e7e8;}
.dk-grey-bk {background: #c7c8ca;}
.darker-grey-bk{background: #859195;}
.darkest-grey-bk{background: #5a676b;}
.red {color: #ff0000;}
.red-left {border-left: 2px solid #ff0000;}
.black {color: #000000;}
.black-underline {border-bottom: 1px solid #000000;}
.no-underline-hover:hover {border-bottom: 0px solid #000000;}
.black-hover:hover {color:#000000;}
.purple {color: rgb(128, 0, 255);}
.orange {color: #f68727;}
.orange-top {border-top: 2px solid #f68727;} 
.orange-bottom-2 {border-bottom: 2px solid #f68727;}
.orange-right {border-right: 2px solid #f68727;}
.orange-left {border-left: 2px solid #f68727;}
.orange-bk {background-color: #f68727;}

.lopa-new {border: 1px solid #f68727!important; background-color: #fbdbbd;}
.lopa-draft {border: 1px solid #f68727!important; background-color: #fbdbbd;}
.lopa-preview {border: 1px solid #307ebb!important; background-color: #b3d9ff;}
.lopa-published {border: 1px solid #5ea73c!important;background-color: #8ff0a4;}
.lopa-suspended {border: 1px solid #e4a919!important;background-color: #f9f06b;}
.lopa-voice {color: #5a676b;} 
.lopa-voice-selected {border: 2px solid #f68727!important;}

.grey-top-border {border-top: .8rem solid #5a676b!important;}
.darker-grey-top-border-2 {border-top: .2rem solid #859195!important;}
.darker-grey-top-border-4 {border-top: .4rem solid #859195!important;}
.grey-border {border: 1px solid #859195!important;}
.grey-bottom-border {border-bottom: .8rem solid #5a676b!important;}
.white-bottom-solid {border-bottom: .1rem solid #ffffff!important;}
.white-bottom-solid-2 {border-bottom: .2rem solid #ffffff!important;}
.white-top-solid-2 {border-top: .2rem solid #ffffff!important;}
.white-right-solid-2 {border-right: .2rem solid #ffffff!important;}
.white-bottom-solid-3 {border-bottom: .3rem solid #ffffff!important;}
.white-bottom-dotted {border-bottom: 1px dotted #ffffff!important;}
.black-border {border: 1px solid #000000;}
.black-border-2 {border: 2px solid #000000;}
.black-border-bottom-1 {border-bottom: 1px solid #000000;}
.black-border-bottom-2 {border-bottom: 2px solid #000000;}

.brand {color: var(--brand-color)!important;;}
.brand-top {border-top: 2px solid var(--brand-color)!important;;}
.brand-bottom {border-bottom: 2px solid var(--brand-color)!important;;}
.brand-right {border-right: 2px solid var(--brand-color)!important;;}
.brand-left {border-left: 2px solid var(--brand-color)!important;;}
.brand-left-dotted {border-left: 2px dotted var(--brand-color)!important;}
.brand-bk {background-color: var(--brand-color)!important;;}

.turquoise-bk {background-color: #2984a3;}

.underline {text-decoration-line: underline;}
.form-text {font-weight: bold;}

.filters,.filters ul { list-style-type: none;}
.filters {  margin: 0 0 1rem 0;  padding: 0 0 .5rem .5rem; border-top: 2px solid var(--brand-color)!important;background: #f6f6f7;}
.caret {  cursor: pointer;  user-select: none;}
.caret::before {  content: "\25B6";  color: black;  display: inline-block;  margin-right: 6px;}
.caret-down::before { transform: rotate(90deg);}
.nested { display: none;}
.cat-child {border-left: 2px dotted var(--brand-color)!important; margin-left: 1rem;}
.cat-child li{margin-left: 1rem;}
.cat-active { display: block;}

div.arrow-button-link {height: 4rem; background-color: var(--brand-color); color:#ffffff; margin:0; padding-top:.5rem!important; padding-right: 3rem!important; }
div.arrow-button-link a{color: #ffffff;  font-size: 1.8rem; font-weight: bold;  margin:0; padding-top:0; padding-right:2rem!important; position:relative;}
div.arrow-button-link i{margin-top:-.3rem;}
div.arrow-button-link span{position: absolute;  margin-left: 1rem!important; margin-top: 3px; }

.arrow-button { height: 3.2rem; padding:0;background-color:  var(--brand-color); }
.arrow-button:focus { background-color: var(--brand-color); }
.arrow-button:hover { background-color: var(--brand-color); }
.arrow-button i{font-size: 3.8rem; color:#ffffff; float:left; margin-top: -.2rem; margin-right:.5rem}
.arrow-button div{color: #ffffff; float:right; font-size: 1.8rem;  font-weight: bold; }
.arrow-button a{color: #ffffff;  margin-top: .1rem; font-size: 1.8rem;  font-weight: bold; }
 	
.FLAG {font-size:2rem; font-weight: bold; font-style: oblique;}
.ESPANOL{color:#e4a919;}	
.FATHERS-DAY{color:#1d398d;}		
.MOTHERS-DAY{color:#9e1f63;}	
.NEW{color:#0a8fc4;}		
.NEW-CREATIVE{color:#40ae49;}	
.PAYOUT-INCREASE {color:#574182;}		 
.SEASONAL{color:#c12f85;}		 
.SPECIAL_OFFER{color:#c12f85;}	
.TOP-PERFORMER {color:#d2232a;}		
.XMAS{color:#0b5524;}	
.VDAY{color:#e50808;}	

.isAdmin{color:#c12f85;}  
.lds-ripple {  display: inline-block;  position: relative;  width: 80px;  height: 80px;}
.lds-ripple div {  position: absolute;  border: 4px solid #fff;  opacity: 1;  border-radius: 50%;  animation: lds-ripple 1s cubic-bezier(0, 0.2, 0.8, 1) infinite;}
.lds-ripple div:nth-child(2) { animation-delay: -0.5s;}
@keyframes lds-ripple {  0% {    top: 36px;    left: 36px;    width: 0;    height: 0;    opacity: 1;  }  100% {    top: 0px;    left: 0px;    width: 72px;    height: 72px;    opacity: 0;  }}
.lds-ripple div {  border: 4px solid #000;}

/* HTML: <div class="loader"></div> */
.loader {
  width: 40px;
  height: 20px;
  --c:no-repeat radial-gradient(farthest-side,#5e5c64 93%,#5e5c64);
  background:
    var(--c) 0    0,
    var(--c) 50%  0,
    var(--c) 100% 0;
  background-size: 8px 8px;
  position: relative;
  animation: l4-0 1s linear infinite alternate;
}
.loader:before {
  content: "";
  position: absolute;
  width: 8px;
  height: 12px;
  background: #f68727;
  left: 0;
  top: 0;
  animation: 
    l4-1 1s  linear infinite alternate,
    l4-2 0.5s cubic-bezier(0,200,.8,200) infinite;
}
@keyframes l4-0 {
  0%      {background-position: 0  100%,50% 0   ,100% 0}
  8%,42%  {background-position: 0  0   ,50% 0   ,100% 0}
  50%     {background-position: 0  0   ,50% 100%,100% 0}
  58%,92% {background-position: 0  0   ,50% 0   ,100% 0}
  100%    {background-position: 0  0   ,50% 0   ,100% 100%}
}
@keyframes l4-1 {
  100% {left:calc(100% - 8px)}
}
@keyframes l4-2 {
  100% {top:-0.1px}
}


@media (max-width: 768px) {	

.arrow-button a{margin-top: 1rem;; }
	#greeting {color: #ffffff;  font-size: 1.0rem; margin-right: .5rem;}
	#logo {font-size: 0px;  color: #231f20; background: url('/wwwroot/image/logo.png') no-repeat 1rem 0;  background-size: contain;}
}

@media (min-width: 768px) {
	#greeting {color: #ffffff;display: flex; align-items: center;  font-size: 1.2rem; }
 	#logo {background: url('/wwwroot/image/logo.png') no-repeat 11rem 0;  background-size: contain;}
  .pl-md-110 {margin-left: 11rem!important;}
  .orange-md {color: #f68727;}
  .orange-md-right {border-right: 2px solid #f68727;}
  .no-border-md-right {border-right: 0px solid #f68727;}
  .no-border-md-top {border-top: 0px solid #f68727;}
  .no-border-md-bottom {border-bottom: 0px solid #f68727;}
  
.brand-md-right {border-right: 2px solid var(--brand-color)!important;;}
  .brand-md-left {border-left: 2px solid var(--brand-color)!important;;}
  .w-md-45p {width:45% !important;}
  .w-md-55p {width:55% !important;}
  .arrow-button a{float:right; }
}