/****************************************************************************************************
                                      Sign in
 ****************************************************************************************************/

#sign-in-btn-id:disabled
{
	color: #bbb;
	background: #efeeee;
	cursor: not-allowed;
}
/**/

.wrpr {
 /* border: 1px solid #ccc; */
  font-size: smaller;
}

.tgl-btn {
  /*border: 1px solid #1a1a1a; */
  display: inline-block;
  position: relative;
  text-align: center;
  transition: background-color 600ms ease, color 600ms ease;
}

#sign-in-instr-id{font-size: .7rem;}

.sign-in-code input
{
	width: 1.8rem;
	height: 3rem;
	text-align: center;
	margin-right: 7px;
	font-size: 1.3rem;
	border: 1px solid cornflowerblue;
	border-radius: 3px;
	box-shadow: rgba(50, 50, 93, 0.25) 0px 50px 100px -20px, rgba(0, 0, 0, 0.3) 0px 30px 60px -30px, rgba(10, 37, 64, 0.35) 0px -2px 6px 0px inset;
}
.sign-in-code input:hover
{
	outline: orangered solid 1px;
}

.sign-in-code input:focus, .sign-in-code input:active 
{
	outline: #0f0 solid 1px;
	
}
#sign-in-code-status-id{color: #0a0; vertical-align: middle; }
#sign-in-code-status-id i{font-size: 2rem; margin-bottom: 5px; display: inline-block;}
#sign-in-code-status-id span{font-size: 1rem; margin-bottom: 10px; display: inline-block;}

#SCA-lnk-id{ text-decoration: none; display: none;}
#SCA-lnk-id:hover{ text-decoration: underline;}

/****************************************************************************************************
                                      Categories
 ****************************************************************************************************/

#Cat-tree-id{ width:100%; max-width:500px; overflow:auto; height: 300px; border: 1px solid #ccc; background: #fff; padding: 20px;}
#Category-cont{width:500px; float: left; margin-right: 40px;  }

#NewCategoryCont
{
    width:500px; float: right; height: 300px; padding: 20px; border: 1px solid #ccc; 
    display: none; position: relative;
}


/****************************************************************************************************
                                    Platform Brands
 ****************************************************************************************************/

#dash-line-id{margin: 0px; border-bottom:  1px dashed #ccc;}
#brand-list-A-id
{
  width: 100%; 
  margin-top: 2px;
  padding: 10px 0px; 
  border-top: 1px dashed #ccc; 
  border-bottom:  1px dashed #ccc; 
  color: #aaa; 
}
.st0{fill:#f90202;}
.st1{fill:#ffb301;}
.st2{fill:#01b71d;}

#brand-list-A-id a {margin: 0px 10px;}
#brand-list-A-id a:hover {text-decoration: underline; color: #000;}

#brand-span-id span {margin: 20px 10px; cursor: pointer;}
#brand-list-A-id a:hover, #brand-span-id span:hover {text-decoration: underline; color: #fc0404;}


/****************************************************************************************************
 ****************************************************************************************************
								toggle phone and email
 ****************************************************************************************************
 ****************************************************************************************************/

input[type=radio].toggle {
  display: none;
  
}
input[type=radio].toggle + label {
  cursor: pointer;
  min-width: 130px;
  padding: 10px;
}
input[type=radio].toggle + label:selection{background-color:transparent;}

input[type=radio].toggle + label:hover {
  background: none;
  color: #1a1a1a;
}
/**/
input[type=radio].toggle + label:after {
  background: cornflowerblue;/**/
  border: 1px solid rgb(100, 148, 237); 
  
  background: rgb(13, 110, 253);
  border: 1px solid rgb(13, 110, 253);

  background: rgb(33, 145, 249);
  border: 1px solid rgb(33, 145, 249);

  background: rgb(83, 24, 159);
  border: 1px solid rgb(83, 24, 159);
  border-radius: 40px;
  content: "";
  height: 100%;
  position: absolute;
  top: 0;
  transition: 0.2s ease-in-out;
  width: 100%;
  z-index: -1;
}

input[type=radio].toggle.toggle-left + label {
  border-right: 0;
  margin-right: 0px;
 
}
input[type=radio].toggle.toggle-left + label:after {
  left: 100%;
  
}
input[type=radio].toggle.toggle-right + label {
  margin-left: -5px;
  
}
input[type=radio].toggle.toggle-right + label:after {
  left: -100%;
  
}
input[type=radio].toggle:checked + label {
  cursor: default;
  color: #fff;
  transition: color 200ms;
}

input[type=radio].toggle:checked + label:after {
  left: 0;
}

 
/**************************************************************************************************/
/************************************		hr			*******************************************/
/**************************************************************************************************/

.hr-t {
  line-height: 1em;
  position: relative;
  outline: 0;
  border: 0;
  color: black;
  text-align: center;
  height: 1.5em;
  opacity: 0.5;
}
.hr-t:before {
  content: "";
  background: linear-gradient(to right, transparent, #818078, transparent);
  position: absolute;
  left: 0;
  top: 50%;
  width: 100%;
  height: 1px;
}
.hr-t:after {
  content: attr(aria-label);
  position: relative;
  display: inline-block;
  color: black;
  padding: 0 0.5em;
  line-height: 1.5em;
  color: #000;
  background-color: rgb(240, 241, 243);
}

.gen-btn{
	outline: 0px;
	border: 0px;
	margin: 0px;
	padding: 0px;
	vertical-align: middle;
	text-decoration: none;
	display: inline-block;
  background-color: transparent;
}

.rnd-off-btn{
  border: 1px solid, #aaa;
  padding: 5px 7px;
}

.disp-list-img{
  max-width: 250px;
}

/**************************************************************************************************/

.bj-nav-pills{
	list-style: none;
	padding: 0;
	margin: 0;
	display: flex;
	flex-wrap: wrap;
	
}
.a-pill{
	border: 1px solid rgb(85, 184, 250);
	margin-top: 6px;
	margin-left: 6px;
	border-radius: 6px;
	padding: 7px 9px;
	background: white;
}

.bj-nav-pills .active, .a-pill:hover{
	background: rgb(2, 129, 247);
	border: 1px solid rgb(2, 129, 247);
	color: white;

}
.bj-nav-pills .disabled{
	background: rgb(231, 231, 231);
	border: 1px solid rgb(156, 156, 156);
	color: rgb(114, 113, 113);

}

.brand-list {
    column-count: 2;
    column-gap: 20px;
    
    line-height: 1.2rem;  
  }
/*
  @media (min-width: 768px) {
    .brand-list {
      column-count: 3;
      column-gap: 20px;
    }
  } 

  @media (min-width: 992px) {
    .brand-list {
      column-count: 3;
      column-gap: 20px;
    }
  }
*/
  .brand-list li{
    
    list-style: circle;
    padding-left: 0px;
    margin-top: 10px;
  }
  #cat-chkboxes-cntr-id{
    height: 100px;
    overflow-y: auto;
  }