/* app css stylesheet */


/*  For design

*/



.tmb {

	height: 160px;
	width:160px;
	
	overflow:hidden;
	border-radius:50%;
}
	
   .search-look {
	overflow:hidden;  
	border-radius:50%;
  position: fixed;
  background-color: white;
	}
  
 .search-title {
	background-color:white;
	top:0px;
	position: fixed;
	text-align: center;
	width:100%;
	overflow:hidden;
	height: 50px;     

}
.formstyle {display:block; width:132px; height:37px; background-color:#232323;  
     border-radius:80px; opacity:0;right:1px;position:absolute;bottom:3px}
  .formstyle:hover {opacity:0.4;}
  
.bold-text
{
	font-family:ProximaNova-Bold;
}
.no-bold-text
{
	font-family:ProximaNova-Reg;
}
.animate-movement
{
 -webkit-transition: 0.2s ease-in-out; 
 -ms-transition: 0.2s ease-in-out;
 -moz-transition: 0.2s ease-in-out;
 transition: 0.2s ease-in-out; 
}

div.item_bubble
{ position: absolute;

 border-radius:50%;background-color: white; overflow: hidden;}
 			
div.mask_item_bubble
{ position: absolute;

 border-radius:50%;background-color: white; overflow: hidden;z-index:400}
 		 			
 			 
div.item_bubble_shadow
{ position: absolute;
 		  border-radius:50%;
 		  background-color:rgba(0,0,0,.35);

 		}
 			
img.item_bubble
{ position: absolute;}

 .icon-circle {
	border-radius:50%;
  position: fixed;
  border: 1px solid gray;
  background-color: white;
	}
  
@font-face {
    font-family: MOD20;
    src: url("https://d22n5ti4du62e6.cloudfront.net/00000apstatic/fonts/mod20.ttf");
}
div.round_button_big
{
   display: block; 
   border-radius: 50%;
   background: rgb(35,35,35);
   width: 36px;
   height: 36px;
}
img.round_button_big
{ 
   display: block;
   position: absolute;
   top: 7px;
   left: 7px;
   width: 22px;
   height: 22px;
}   

.top-box {
	position:fixed;
	background-color:white;
	width:100%;
	/*overflow:hidden;*/
	top:0px;
	/*height:57px; */
	z-index: 12;
}
.top-box-filler {
	width:100%;
	height:80px;
	opacity:1;
	z-index: 12;
}

.top-box-filler2 {
	width:100%;
	height:52px;
	opacity:1;
	z-index: 12;
}



.dark-green-border
{
  border-color: rgb(45, 111, 43);
}
.light-green-border
{
  border-color: rgb(144, 176, 141);
}

.dark-gray-border
{
  border-color: rgb(35,35,35);
}
.dark-gray-back
{
  background-color: rgb(35,35,35);
}
.dark-gray-font
{
  color: rgb(35,35,35);
}

.light-gray-border
{
  border-color: rgb(200,200,200);
}
.light-gray-back
{
  background-color: rgb(200,200,200);
}
.light-gray-font
{
  color: rgb(200,200,200);
}

.simple-font
{
  font-family: "Trebuchet MS", Helvetica, sans-serif;  
}


.view-title {
	font-family:  MOD20;/*,"Rozha One";/*,"Rozha One","Times New Roman", Times, serif;*/
	font-size: 32px;  
	overflow-x: auto;
	position:relative;
    padding-top:2px;
	/*
  line-height:125%;
	padding-top:0.25em;
	height:40px;
  */
}

.view-title2 {
	font-family:  MOD20;/*,"Rozha One";/*,"Rozha One","Times New Roman", Times, serif;*/
	font-size: 32px;  
	overflow-x: auto;
 
}


@font-face{
	font-family: ProximaNova-Light;
	src:url("https://d22n5ti4du62e6.cloudfront.net/00000apstatic/fonts/ProximaNova-Light.ttf");
}

@font-face{
	font-family: ProximaNova-Reg;
	src:url("https://d22n5ti4du62e6.cloudfront.net/00000apstatic/fonts/ProximaNova-Reg.ttf"); /* todo: grab from cdn */
	
	 
	
	
}


@font-face{
	font-family: ProximaNova-Bold;
	src:url("https://d22n5ti4du62e6.cloudfront.net/00000apstatic/fonts/ProximaNova-Bold.ttf");
}

@font-face{
	font-family: ProximaNova-Sbold;
	src:url("https://d22n5ti4du62e6.cloudfront.net/00000apstatic/fonts/ProximaNova-Sbold.ttf");
}

@font-face{
	font-family: ProximaNova-Thin;
	src:url("https://d22n5ti4du62e6.cloudfront.net/00000apstatic/fonts/ProximaNova-Thin.ttf");
}


 
.view-bottom-title {
        position:fixed;
        font-family: MOD20;
        font-size: 250%;
        width:100%; 
        bottom:0px;
        height:66px;
		background-color:rgba(255,255,255,0.9);
}


.view-bottom-box {
        position:fixed;    
        width:100%; 
        bottom:0px;
        height:66px;
		
}


.center-text {	
	text-align: center; 
	/*width: 100%;*/
}


.group-container {
	width: 100%;
	overflow-y:scroll;
}

/* Icons

*/

.list-icon {
	position:fixed;
	top:10px;
	right:25px;
	/*height:120px;*/
	z-index: 13;
}

.news-icon {
	position:fixed;
	top:10px;
	left:14px;
	/*height:120px;*/
	z-index: 13;
}

.djm-badge {
	
	position:fixed;
	top:16px;
	left:16px;
	
	text-align: center;
	vertical-align: middle;
	line-height: 31px; 
	z-index: 13;
	
	position:fixed;
	height:31px;
	width:31px;
	border-radius:50%;
	background-color:rgb(35,35,35);
	color:white;
	font-size:120%;
	font-family:Arial;

}

.djm-search-icon {
    
    position: fixed;
    top:16px;
    padding-left:16px;
    z-index: 200;
    height:31px;
    width:41px;
 
}

.djm-edit-icon {
    
    position: fixed;
    top:10px;
    right:0px;
    padding-right:50px;
    z-index: 200;
    height:31px;
    width:41px;
 
}



/*
horizontal bars
*/

.bar0 {
	margin-left: auto;
    margin-right: auto;
    margin-top:5px;
    width: 50px;
    height:3px;
    background-color: black;
  /*  top:50px; */	
    
}

.bar1 {
	position:fixed;
	width:100%;
	bottom:67.5px;
	height:3px;
	z-index: 15;
	opacity: 0.1;
	background:black;
}

.bar2 {
	position:fixed;
	width:100%;
	bottom:66px;
	height:1.5px;
	z-index: 15;
 
	background:white;
}

.bar3 {
	margin-left: auto;
    margin-right: auto;
    margin-top:5px;
    width: 70%;
    height:3px;
    background-color: rgb(35,35,35);	
}

.bar4 {
	margin-left: auto;
    margin-right: auto;
    margin-top:5px;
    width: 70%;
    height:1px;
    background-color: rgb(178,178,178);	
}

.bar5 {
  margin-left: auto;
    margin-right: auto;
    margin-top:5px;
    width: 40%;
    height:3px;
    background-color: rgb(35,35,35);  
}

/*
Grid layout
*/

.top-buffer { margin-top:50px; }
.bottom-buffer { margin-bottom:50px; }


/*
Looks
*/

.look-image {
    display: block;
    margin-left: auto;
    margin-right: auto;
    
	}
 

/* Person page
*/

table .person_table {
	border-collapse: collapse;
    border-style: hidden;
	
	}
	
table.person_table td {
	border: 1px solid black;
	}


/* Faves menu */

.djm-choice-list{
	margin-left:20px;
	font-size:150%;
 
}



/* Registration */

.djm-registration {
	margin-left:20px;
	font-size:150%;
}


 .css-form input.ng-invalid.ng-touched {
    background-color: #FA787E;
  }

  .css-form input.ng-valid.ng-touched {
    background-color: #78FA89;
  }
  
  
  .registration-screen {
  background-color:white;
  z-index:2000;
  opacity:0.95;
  }
  
.registration-screen.ng-hide-add.ng-hide-add-active,
.registration-screen.ng-hide-remove.ng-hide-remove-active
 {
  -webkit-transition: all linear 0.5s;
  transition: all linear 0.5s;
} 
  
  .registration-screen.ng-hide {
  	opacity:0;
  }
  
  /*
  test search
  
  */
  
  .search-subtext {
  font-size:70%;
  color:rgb(178,178,178);
  
  }
  
  
  /* Splash screen */
  
.djm-splash  {
  z-index:500;
  background-color:white;
  position:fixed;
  top:0px;
  left:0px;
  opacity:1;
  }
  


.djm-splash.ng-hide {
	opacity:0;
}


.djm-onboarding {
  z-index:400;
  background-color:white;
  position:fixed;
  top:0px;
  left:0px;
  opacity:0.95
}


.djm-onboarding.ng-hide {
	opacity:0;
}


.djm-splash.ng-hide-add.ng-hide-add-active,
.djm-splash.ng-hide-remove.ng-hide-remove-active
 {
  -webkit-transition: all linear 0.5s;
  transition: all linear 0.5s;
} 


.djm-onboarding.ng-hide-add.ng-hide-add-active,
.djm-onboarding.ng-hide-remove.ng-hide-remove-active

 {
  -webkit-transition: all linear 0.5s;
  transition: all linear 0.5s;
} 

/* general animations
*/

  .fader {
  background-color:white;
 /* z-index:2000; */
  opacity:1;
  }
  
.fader.ng-hide-add.ng-hide-add-active,
.fader.ng-hide-remove.ng-hide-remove-active
 {
  -webkit-transition: all linear 1s;
  transition: all linear 1s;
} 
  
  .fader.ng-hide {
  	opacity:0;
  }
  

  .fader02 {
  background-color:white;
  opacity:1;
  }
  
.fader02.ng-hide-add.ng-hide-add-active,
.fader02.ng-hide-remove.ng-hide-remove-active
 {
  -webkit-transition:  0.5s ease-in-out;
  transition:  0.5s  ease-in-out;
} 
  
  .fader02.ng-hide {
  	opacity:0;
  }
  



  /*
   AJAX loaders
   from: http://www.sitepoint.com/css3-ajax-loading-icon/
  */
  
  .ajaxloader
{
	position: absolute;
	width: 30px;
	height: 30px;
	border: 8px solid #fff;
	border-right-color: transparent;
	border-radius: 50%;
	box-shadow: 0 0 25px 2px #eee;
}

.ajaxloader
{
	animation: spin 1s linear infinite;
}
  
 @keyframes spin
{
	from { transform: rotate(0deg);   opacity: 0.2; }
	50%  { transform: rotate(180deg); opacity: 1.0; }
	to   { transform: rotate(360deg); opacity: 0.2; }
}
  

/*  Person page

*/

.person_table {
 	/*border: 1px solid black;*/
 }
 
.person_table td {
	vertical-align: center;
    text-align: center;
	}

/* input placeholder */
input.searchtextinput::-webkit-input-placeholder { /* WebKit browsers */
 	
    font-family: MOD20;
  font-size:100%;
    font-weight:lighter;
}
input.searchtextinput:-moz-placeholder { /* Mozilla Firefox 4 to 18 */
    
   opacity:  1;
   font-family: MOD20;
    /*  font-size:90%; */
   font-weight:lighter;
}
input.searchtextinput::-moz-placeholder { /* Mozilla Firefox 19+ */
    
   opacity:  1;
   font-family: MOD20;
   /*  font-size:90%; */
   font-weight:lighter;
}
input.searchtextinput:-ms-input-placeholder { /* Internet Explorer 10+ */
  
   font-family: MOD20;
  /*  font-size:90%; */
   font-weight:lighter;
}


input.searchtextinput  { 
    border: 0;
}

input.searchtextinput:focus { 
    background-color: rgb(234, 234, 234); 
    border: 0;
}



/* input placeholder for search on desktop */
input.searchtextinput2::-webkit-input-placeholder { /* WebKit browsers */
 	
    font-family: ProximaNova-Reg;
  font-size:100%;
    font-weight:lighter;
}
input.searchtextinput2:-moz-placeholder { /* Mozilla Firefox 4 to 18 */
    
   opacity:  1;
   font-family: ProximaNova-Reg;
    /*  font-size:90%; */
   font-weight:lighter;
}
input.searchtextinput2::-moz-placeholder { /* Mozilla Firefox 19+ */
    
   opacity:  1;
   font-family: ProximaNova-Reg;
   /*  font-size:90%; */
   font-weight:lighter;
}
input.searchtextinput2:-ms-input-placeholder { /* Internet Explorer 10+ */
  
   font-family: ProximaNova-Reg;
  /*  font-size:90%; */
   font-weight:lighter;
}


input.searchtextinput2  { 
    border: 0;
}

input.searchtextinput2:focus { 
    background-color: rgb(234, 234, 234); 
    border: 0;
}




/* email input*/
input.emailinput::-webkit-input-placeholder { /* WebKit browsers */
 	
    font-family: ProximaNova-Reg;
  font-size:90%;
    font-weight:lighter;
}
input.emailinput:-moz-placeholder { /* Mozilla Firefox 4 to 18 */
    
   opacity:  1;
   font-family: ProximaNova-Reg;
    /*  font-size:90%; */
   font-weight:lighter;
}
input.emailinput::-moz-placeholder { /* Mozilla Firefox 19+ */
    
   opacity:  1;
   font-family: ProximaNova-Reg;
   /*  font-size:90%; */
   font-weight:lighter;
}
input.emailinput:-ms-input-placeholder { /* Internet Explorer 10+ */
  
   font-family: ProximaNova-Reg;
  /*  font-size:90%; */
   font-weight:lighter;
}


input.emailinput  { 
	/*background-color:rgb(220,220,220);*/
    border: 0;
}

input.emailinput:focus { 
    border: 0;
}


/* sms landing email input*/
input.smslandingemailinput::-webkit-input-placeholder { /* WebKit browsers */
 	
    font-family: ProximaNova-Reg;
   /* font-size:90%;*/
    font-weight:lighter;
}
input.smslandingemailinput:-moz-placeholder { /* Mozilla Firefox 4 to 18 */
    
   opacity:  1;
   font-family: ProximaNova-Reg;
  /*   font-size:90%;  */
   font-weight:lighter;
}
input.smslandingemailinput::-moz-placeholder { /* Mozilla Firefox 19+ */
    
   opacity:  1;
   font-family: ProximaNova-Reg;
  /*  font-size:90%;  */
   font-weight:lighter;
}
input.smslandingemailinput:-ms-input-placeholder { /* Internet Explorer 10+ */
  
   font-family: ProximaNova-Reg;
/*   font-size:90%;  */
   font-weight:lighter;
}


input.smslandingemailinput  { 
	/*background-color:rgb(35,35,35);*/
	/*color:white;*/
    border: 0;
}

input.smslandingemailinput:focus { 
    border: 0;
    outline: none;
}



/*

Look caption edit
*/

textarea.captionedit:focus {
	background-color: rgb(234, 234, 234); 
    border: 0;
	}
	
textarea.captionedit {
	 
    border: 0;
	}

/*
email input for login
*/
input.emailinputlogin::-webkit-input-placeholder { /* WebKit browsers */
 	
    font-family: ProximaNova-Reg;
  font-size:1.3em;
    font-weight:lighter;
     text-align:center;
}
input.emailinputlogin:-moz-placeholder { /* Mozilla Firefox 4 to 18 */
    
   opacity:  1;
   font-family: ProximaNova-Reg;
      font-size:1.3em; 
   font-weight:lighter;
    text-align:center;
}
input.emailinputlogin::-moz-placeholder { /* Mozilla Firefox 19+ */
    
   opacity:  1;
   font-family: ProximaNova-Reg;
    font-size:1.3em; 
   font-weight:lighter;
    text-align:center;
}
input.emailinputlogin:-ms-input-placeholder { /* Internet Explorer 10+ */
  
   font-family: ProximaNova-Reg;
     font-size:1.3em;  
   font-weight:lighter;
   text-align:center;
   
}


input.emailinputlogin  { 
	background-color:rgb(233,233,233);
    border-top-style: solid;
    border-top-width:1px;
    border-top-color:rgb(198,198,198);
    border-left:none;
    border-bottom:none;
    border-right:none;
}

input.passwordinputlogin  { 
	background-color:#e9e9e9;/*rgb(233,233,233);*/
    border-top-style: solid;
    border-top-width:1px;
    border-top-color:rgb(198,198,198);
    border-left:none;
    border-bottom:none;
    border-right:none;
   	text-align:center;
  
}

input.passwordinputlogin::-webkit-input-placeholder { /* WebKit browsers */
 	
    font-family: ProximaNova-Reg;
  font-size:1.3em;
    font-weight:lighter;
    
    
}

/* 
URL for pic upload
*/


/*  Confirm cheapest or original
 from: http://codepen.io/Venerons/pen/coqhF
*/

input.urlinput::-webkit-input-placeholder { /* WebKit browsers */
 	
    font-family: ProximaNova-Reg;
  /*font-size:90%;*/
    font-weight:lighter;
}
input.urlinput:-moz-placeholder { /* Mozilla Firefox 4 to 18 */
    
   opacity:  1;
   font-family: ProximaNova-Reg;
    /*  font-size:90%; */
   font-weight:lighter;
}
input.urlinput::-moz-placeholder { /* Mozilla Firefox 19+ */
    
   opacity:  1;
   font-family: ProximaNova-Reg;
   /*  font-size:90%; */
   font-weight:lighter;
}
input.urlinput:-ms-input-placeholder { /* Internet Explorer 10+ */
  
   font-family: ProximaNova-Reg;
  /*  font-size:90%; */
   font-weight:lighter;
}


input.urlinput  { 
	/*background-color:rgb(220,220,220);*/
    border: 0;
}

input.urlinput:focus { 
    border: 0;
}


@keyframes fade {
  from {
    opacity: 0;
    transform: translate(-50%, -50%) scale(0.8);
  }
  to {
    opacity: 1;
    transform: translate(-50%, -50%) scale(1);
  }
}
.confirm {
  position: absolute;
  top: 50%;
  left: 50%;
  -webkit-transform: translate(-50%, -50%);
  -ms-transform: translate(-50%, -50%);
  transform: translate(-50%, -50%);
  width: 85%;
  min-width: 280px;
  max-width: 500px;
  height: auto;
  background: #E2E2E2;
  border-radius: 10px;
  padding: 10px;
  margin: 0;
  border-top: 1px solid white;
  animation: fade 1s ease 1 forwards;
}
.confirm h1 {
  text-align: center;
  font-size: 150%;
  margin: 1.5rem 1rem 0.5rem;
}
.confirm p {
  text-align: center;
  font-size: 1.8rem;
  margin: 0 2rem 4.5rem;
}
.confirm button {
  background: transparent;
  border: none;
  color: #1678E5;
  height: 3rem;
  font-size: 1.8rem;
  width: 50%;
  position: absolute;
  bottom: 0;
  cursor: pointer;
}
.confirm button:nth-of-type(1) {
  border-top: 1px solid #B4B4B4;
  border-right: 1px solid #B4B4B4;
  left: 0;
  border-radius: 0 0 0 10px;
}
.confirm button:nth-of-type(2) {
  border-top: 1px solid #B4B4B4;
  right: 0;
  border-radius: 0 0 10px 0;
}
.confirm button:focus,
.confirm button:hover {
  font-weight: bold;
  background: #EFEFEF;
}
.confirm button:active {
  background: #D6D6D6;
}

/*
Trend banners 
*/

.trend-face {
	border-radius: 50%;	
}

/*
File input
from: https://coderwall.com/p/4etjja/styling-html-file-input
*/

.file-input-wrapper {
    width: 150px;
    height: 40px;
    overflow: hidden;
    position: relative;
  }
  .file-input-wrapper > input[type="file"] {
    font-size: 200px;
    position: absolute;
    top: 0;
    right: 0;
    opacity: 0;
  }
  .file-input-wrapper > .btn-file-input {
    display: inline-block;
    width: 150px;
    height: 40px; 
  }


/*
.file-input-wrapper2 {
    width: 150px;
    height: 40px;
    overflow: hidden;
    position: relative;
  }
  .file-input-wrapper2 > input[type="file"] {
    font-size: 200px;
    position: absolute;
    top: 0;
    right: 0;
    opacity: 0;
  }
  */
  .file-input-wrapper2 > .btn-file-input {
    display: inline-block;
    width: 300px;
    height: 300px; 
    background-color:red;
  }


/*
 Sharing
*/
.sharebox {
	position:absolute;
	text-align:center;
	width:100%;
}

/*
 Cursor - text: desktop item page
*/
.nottext  {cursor:default}
.clickable {cursor:pointer}

.clickable:hover {opacity:0.7}

.clickable2 {cursor:pointer} /* only pointer changes for that version of clickable*/

.search_candidate_button {opacity: 0.0; -webkit-transition: 0.3s ease-in-out; transition: 0.3s ease-in-out; -moz-transition: 0.3s ease-in-out; -ms-transition: 0.3s ease-in-out;   cursor:pointer;}
.search_candidate_button:hover {opacity: 1.0; -webkit-transition: 0.3s ease-in-out; transition: 0.3s ease-in-out; -moz-transition: 0.3s ease-in-out; -ms-transition: 0.3s ease-in-out; cursor:pointer;}

  div.animated-circle {
    border: 4px solid rgb(211,211,211);
    border-left-color:  rgb(255,255,255);
    border-right-color:  rgb(255,255,255);
  
    -webkit-transform: rotate(360deg);
    -moz-transform: rotate(360deg);
    transform: rotate(360deg);
  

    -webkit-border-radius: 50%;
    -moz-border-radius: 50%;
    border-radius: 50%;
  
    -webkit-animation:turning_acw 3s infinite;
    -moz-animation:turning_acw 3s infinite;
    animation:turning_acw 3s infinite;

  }



  @-webkit-keyframes turning_cw {
    0%{
      -webkit-transform: rotate(0deg); }
    100%{
      -webkit-transform: rotate(360deg); }
  }
  
  @-webkit-keyframes turning_acw {
    0%{
      -webkit-transform: rotate(360deg); }
    100%{
      -webkit-transform: rotate(0deg); }
  }


  @-moz-keyframes turning_cw {
    0%{
      -moz-transform: rotate(0deg); }
    100%{
      -moz-transform: rotate(360deg); }
  }
  
  @-moz-keyframes turning_acw {
    0%{
      -moz-transform: rotate(360deg); }
    100%{
      -moz-transform: rotate(0deg); }
  }


  @keyframes turning_cw {
    0%{
      transform: rotate(0deg); }
    100%{
      transform: rotate(360deg); }
  }
  
  @keyframes turning_acw {
    0%{
      transform: rotate(360deg); }
    100%{
      transform: rotate(0deg); }
  }


/*
formating for sms landing page
*/


.linknf a {

 text-decoration:none
}

.linknf a:link {
 color:white;
 text-decoration: none;
}
.Alinknf a:visited {
 text-decoration: none;
}





/*
styling of privacy dropdown in look edit
*/

select.privDropDown  {
				     -webkit-appearance: button;
				    -moz-appearance: button; 
				    -webkit-user-select: none;
				    -moz-user-select: none;
				    -webkit-padding-end: 20px;
				    -moz-padding-end: 20px;
				    -webkit-padding-start: 2px;
				    -moz-padding-start: 2px;
		
					    box-shadow: 0px 1px 3px rgba(0, 0, 0, 0.1);
					    color: #232323;
					    font-size: 18;
					    font-family:ProximaNova-Reg;
					    margin: 2;
					    text-align:center;
					    overflow: hidden;
					    padding-top: 2px;
					    padding-bottom: 2px;
					    text-overflow: ellipsis;
					    white-space: nowrap;
				}

/*
FB arrow box - built with: http://www.cssarrowplease.com/  bg:#eceef5  br: #cad4e7
*/
.arrow_box {
	position: relative;
	background: #eceef5;
	border: 1px solid #cad4e7;
	text-align:center;
	border-radius:3px;
	
}
.arrow_box:after, .arrow_box:before {
	right: 100%;
	top: 50%;
	border: solid transparent;
	content: " ";
	height: 0;
	width: 0;
	position: absolute;
	pointer-events: none;
}

.arrow_box:after {
	border-color: rgba(236, 238, 245, 0);
	border-right-color: #eceef5;
	border-width: 4px;
	margin-top: -4px;
}
.arrow_box:before {
	border-color: rgba(202, 212, 231, 0);
	border-right-color: #cad4e7;
	border-width: 5px;
	margin-top: -5px;
}