/* ----------------- global ---------------------- */
html, body {
height:100%; 
margin: 0px;
font-family: 'Lato', helvetica, arial, sans-serif; 
}

ul, ol, li {list-style: none; margin: 0; padding: 0;}

a {
text-decoration: none;
color: rgb(15,147,178);
}



h1{font-size: 34px;  font-weight: normal;   margin: 0;}

h2{
margin: 0;
font-size: 24px;
font-weight: 700;
}

h3{
margin: 0;
font-size: 21px;
font-weight: normal;
margin-bottom: 5px;
}

h4{font-size: 14px;  font-weight: normal;   margin: 0;}
h5{font-size: 13px;
font-weight: normal;
margin: 0;
}

h5>span{font-size: 11px;}
h6{font-size: 11px; font-weight: normal; margin: 0; color: #555;}
textarea[disabled=disabled]{color: #444;}
input {border: 1px solid #ccc; background: none; padding: 1px 4px;}
input[disabled=disabled] {border: 1px solid #fff;}
input.prompt {color: #ccc; font-weight: normal}

textarea, input[type="text"], input[type="number"] {
background-color: transparent;
border-color: #58595B;
font-size: 16px;
color: #eee;
}

/*
http://stackoverflow.com/questions/21938150/input-field-glows-in-firefox-without-focus

the following rule may need to be over ridden too
:-moz-ui-invalid:-moz-focusring:not(output) {
    box-shadow: 0px 0px 2px 2px rgba(255,255,0,0.4);
}
*/

:-moz-ui-invalid:not(output) {
    box-shadow: none;
}

/*http://stackoverflow.com/questions/23372903/hide-spinner-in-input-number-firefox-29*/
input[type=number]::-webkit-outer-spin-button,
input[type=number]::-webkit-inner-spin-button {
    -webkit-appearance: none;
    margin: 0;
}

input[type=number] {
    -moz-appearance:textfield;
}

.pre{
white-space: pre;
}

.pre-wrap{
white-space: pre-wrap;
}

#app-loading{
position: absolute;
top: 46%;
left: 50%;
background: url('/st/images/spinner-blocks.gif') no-repeat;
width: 95px;
font-size: 20px;
text-align: right;
padding-right: 24px;
background-position: right 0px top 9px;
}

.spinner-snake{
width: 16px;
height: 16px;
background: url('/st/images/spinner-snake.gif') no-repeat;
}

.spinner-blocks{
background: url('/st/images/spinner-blocks.gif') no-repeat;
width: 16px;
height: 11px;
}

.spinner-blocks.visible{
visibility: visible !important;
}


.pauseIcon{
height: 9px;
width: 9px;
background-color: rgb(255,255,255);
}

.pauseIcon::before,
.pauseIcon::after{
content: "";
background-color: rgb(255,255,255);
position: absolute;
left: 0;
width: 3px;
height: 9px;
}

.pauseIcon::after{
left: 5px;
}


*::-webkit-input-placeholder { /* WebKit browsers */
color: rgb(100, 100, 100);
}


*::-moz-placeholder { /* Mozilla Firefox 19+ */
color: rgb(100, 100, 100);
opacity:  1;
}

*:-ms-input-placeholder { /* Internet Explorer 10+ */
color: rgb(100, 100, 100);
}


button{ font-size: 14px;}
ul{margin: 0; padding: 0;}
div, li, textarea{
-moz-box-sizing:border-box;
box-sizing: border-box;
}

body {
overflow-y: hidden;
background-image: url("/st/images/back-default_q80.jpg");
background-size: cover;
color: rgb(238,238,238);
}

.dimmer{
opacity: 0.85;
}

#dimmer{
transition: opacity 0.5s;
z-index: 50;
}

#dimmer.ng-hide{
opacity: 0;
}

input::-webkit-outer-spin-button,
input::-webkit-inner-spin-button {
    /* display: none; <- Crashes Chrome on hover */
    -webkit-appearance: none;
    margin: 0; /* <-- Apparently some margin are still there even though it's hidden */
}

.error{
color: rgb(160, 64, 64);
font-size: 13px;
}

.modal{
opacity: 1.0;
}

.h100pc {height: 100%;}

/*clearfix hack to enclose floats */
/*. BUG clearfix {*zoom: 1;}*/
.clearfix:before,.clearfix:after {display: table;content: "";}
.clearfix:after {clear: both;}


.sign {position: absolute;right: 126px;padding: 1px 0 0 0;}
.sign:hover {text-decoration: underline;}
.text-link {cursor: pointer; text-decoration: underline;}
.text-link.disabled {cursor: auto; text-decoration: underline; color: #777777 !important;}
.t-center{text-align: center;}


.text-link-dashed, .tld {cursor: pointer; border-bottom: 1px dashed #999; color: #777;}
.text-link-dashed:hover, .tld:hover { border-bottom: 1px solid #999; color: #666 !important;}

.tld.orange {border-color: #F49F20; color: #F49F20;}
.tld.orange:hover {border-color: #F49F20; color: #F49F20 !important;;}

.blue-link{
color: rgb(15,147,178);
cursor: pointer;
text-decoration: underline;
}


.blue-link:hover{
color: rgb(34, 171, 203);
}

.blue-link2{
color: rgb(15,147,178);
cursor: pointer;
text-decoration: none;
border-bottom: 1px solid rgb(22, 114, 136);
}

.blue-link2:hover{
color: rgb(34, 171, 203);
border-bottom-color: rgb(34, 171, 203);
}

.blue-link2.disabled{
color: rgb(160,160,160) !important;
border-bottom-color: rgb(160,160,160) !important;
}


.blue-link3{
color: rgb(15,147,178);
cursor: pointer;
}

.blue-link3:hover{
color: rgb(34, 171, 203);
}

.blue-link3.disabled{
color: rgb(160,160,160);
cursor: auto;
}

.blue-link3.disabled:hover{
color: rgb(160,160,160);
}

.grey-blue-link{
color: rgb(100,100,100);
cursor: pointer;
transition: color 0.2s;
border-color: rgb(60, 60, 60);
}

.grey-blue-link-u{
transition: all 0.2s;
border-bottom: 1px solid rgb(60, 60, 60);
}

.grey-blue-link:hover{
color: rgb(34, 171, 203);
border-color: rgb(34, 171, 203);
}

.grey-blue-link-u:hover{
border-color: rgb(34, 171, 203);
}


.x-blue-link{
color: inherit !important;
cursor: pointer;
transition: color 0.2s;
}

.x-blue-link:hover{
color: rgb(34, 171, 203) !important;
}

.dotted-underline{
border-bottom: 1px dotted;
}

.blueButton{
border: 2px solid rgb(15,147, 178);
padding: .2em 0.7em .25em 0.8em;
color: rgb(15,147,178);
font-size: 20px;
cursor: pointer;
}

.blueButton:hover{
color: rgb(34, 171, 203);
border-color: rgb(34, 171, 203);
}


.red-link{
color: rgb(252,91,90);
cursor: pointer;
text-decoration: underline;
}

.red-link2{
color: rgb(252,91,90);
cursor: pointer;
font-weight: 700;
}

.red-link2:hover{
color: rgb(255,96,95);
}

.red-link2.disabled{
color: rgb(100,100,100) !important;
}

.whatsThis{
border-bottom: 2px dotted rgb(130, 130, 130);
cursor: help;
}

.whatsThis:hover{
border-bottom-color: rgb(160,160,160);
}

.flag{
background: url('/st/images/sprite.png') no-repeat 0 -447px;
width: 11px;
height: 15px;
}

.downArrow{
background: url('/st/images/sprite.png') no-repeat 0 -462px;
width: 12px;
height: 9px;
}

.downChevronWhite{
background: url('/st/images/down_chevron_white.png') no-repeat 0 0;
width: 12px;
height: 8px;
}

.clickable {cursor: pointer;}
/*.scroll-y{overflow-y: auto; height: 610px;}*/
.button-wrapper *{ float:right}

.header {height: 54px;}
.upload-button{   padding: 3px 7px;}
.h-bar{background-color: #CCC;  height: 1px; position: absolute; width: 100%; top: 7px;}
.clear{clear:both;}
.g {color:#149600 !important;}
.r {color:#FF6600 !important;}
.pending {background-color: #F7EADE;}
.b { font-weight: bold; }
.ul {text-decoration: underline;}

textarea.focus {border: 2px solid #EC7B1F !important;}

.font1 {font-size:12px;color:#999;font-weight:normal;}
.font2 {font-size:21px;color:#666;font-weight:bold;}
.font4 {font-size:16px;color:#999;font-weight:bold;}
.font3 {font-size:13px;color:#666;font-weight:bold;}
.font5 {font-size:13px;color:#999;font-weight:bold;}
.font6 {font-size:12px;color:#666;}
.font7 {font-size:12px;color:#666;font-weight:bold;}
.font8 {font-size:16px;color:#666;}
.font9 {font-size:16px;color:#999;}
.font10 {font-size:21px;color:#999;}
.font11 {font-size:16px;color:#666;font-weight:bold;}
.fonta{font-size:12px;color:#CFCFCF;font-weight:normal;}
.font-16-666 {font-size:16px;color:#666;}
.font-14-999 {font-size:14px;color:#999;}
.w100 {width: 100px;}
.w200 {width: 200px;}
.w150 {width:150px;}
.w300 {width:300px;}
.w50 {width:50px;}
.w170 {width:170px;}
.h90{height:90px;}

.ml5{margin-left:5px;}
.ml10{margin-left:10px;}
.mb10{margin-bottom:10px;}
.mt5{margin-top:5px;}
.mr5{margin-right:5px;}
.mt20{margin-top:5px;}

.cursor-help{
cursor: help;
}

.notification {
position: relative;
padding: 15px 15px;
margin: 20px 0 20px 0;
width: 100%;
font-weight: normal;
background-color: rgb(15, 147, 178);
color: #fff;
overflow: hidden;
transition: all 0.3s;
}

.notification.ng-hide{
height: 0;
padding: 0 15px;
margin: 0;
}

.notification-close{
position: absolute;
top: 0;
right: 0;
margin: -1px 6px 0 0;
cursor: pointer;
}

.notification a {color: #fff; text-decoration: underline;}

.success-msg {background-color: #92BE92; color: #fff;}

.tr{text-align: right;}


.pa {position: absolute;}

.error-bar, .error-msg {margin: 5px 0; background-color: rgb(211, 128, 128); padding: 5px; color: #fff;}
.placeholder {background-color:#999; text-align:center;border-radius:4px;border:1px solid #CCC;width:100%; height:90px;}
.forTesting {background-color:#CCC; border-radius:4px;border:1px solid #666;opacity:0.5;padding:5px;position:fixed;bottom:20px;left:20px;}
.forTesting select {display:block;}

.bar{background-color: #CCC;height: 1px;margin: 0px 10px;clear:both;}
.ellipsis { overflow:hidden; text-overflow:ellipsis; white-space:nowrap;}

.side-bar {
background-color: rgba(0,0,0,0.8);
}


.profile-pic {
width: 80px;
height: 80px;
box-shadow: inset 0px 0px 1px 2px rgb(239, 239, 239);
}

.vp-scroll-bar::-webkit-scrollbar{
width:10px;
height:10px;
border-radius:0px;
box-shadow: none; /*inset 1px 1px 0 rgba(0,0,0,.1),inset -1px -1px 0 rgba(0,0,0,.07);*/
background-color:transparent;
}

.vp-scroll-bar::-webkit-scrollbar:hover{
background-color:rgba(255,255,255,0.1);
}

.vp-scroll-bar::-webkit-resizer{
}

.vp-scroll-bar::-webkit-scrollbar-corner{
background-color: transparent;
}

.vp-scroll-bar::-webkit-scrollbar-thumb{
min-height:0.8em;
min-width:0.8em;
background-color: rgba(255,255,255,0.05);
border: 1px solid rgba(255,255,255,0.1);
border-radius:3px;
box-shadow: none /*inset 1px 1px 0 rgba(0,0,0,.1),inset -1px -1px 0 rgba(0,0,0,.07);*/
}

.vp-scroll-bar::-webkit-scrollbar-thumb:hover{background-color: rgba(255,255,255,0.4);}
.vp-scroll-bar::-webkit-scrollbar-thumb:active{background-color:rgba(255,255,255,0.4);}




.action-button{
width: auto;
display: inline-block;
padding: 0.5em 0.8em;
border: 1px solid rgb(249,122,122);
background-color: rgba(252,91,90,0.95);
text-align: center;
font-weight: bold;
font-size: 18px;
cursor: pointer;
transition: background-color 0.2s;
color: #fff;
}

.action-button.small{
padding: 0.5em 1.5em;
font-weight: normal;
font-size: 13px;
}

.action-button.xsmall{
padding: 0.5em 1.2em;
font-weight: normal;
font-size: 10px;
}

.action-button:hover{
background-color: rgba(252,91,90,1.0);
}

.action-button[disabled="disabled"],
.action-button.disabled{
background-color: rgb(80,80,80) !important;
color: rgb(143, 143, 143);
border-color: rgb(97, 97, 97);
cursor: auto;
}

.action-button a, a.action-button{
color: #fff !important;
}

.action-button.complete{
background-color: transparent !important;
border: 1px solid rgb(238, 238, 238) !important;
cursor: auto;
color: rgb(238, 238, 238) !important;
}


.tooltip-hot{
color: rgb(130, 171, 180);
font-style: normal;
border: none;
text-decoration: underline;
font-family: 'Lato', arial, sans-serif;
}

.button-tray{
width: 100%;
margin-top: 75px;
text-align: center;
font-size: 20px;
color: rgb(252,91,90);
font-weight: bold;
}

@media (max-height: 700px) {
   .button-tray{
      margin-top: 20px;
   }
}

.button-tray>div{
display: inline-block;
cursor: pointer;
opacity: 0.95;
/*transition: opacity 0.1s;*/
}

.button-tray>div:hover{
opacity: 1.0;
}

.down-chevron{
height: 50px;
background: transparent url("/st/images/down-chevron.png") no-repeat 50% 27px;
}



.skip{
text-decoration: underline;
}


.help-link {
float: right;
margin: 5px 36px 0 0; 
font-size: 11px;
color: #aaa;
border-bottom: 1px dashed #aaa;
cursor: pointer;

}
.help-link:hover {
color: #999;
border-color: #999;
}

.playIcon{
border-radius: 50%;
border: 2px solid rgba(255,255,255,0.8);
width: 41px;
height: 41px;
position: relative;
transition: border-color 0.3s;
}

.playIconTriangle{
position: absolute;
top: 7px;
left: 12px;
width: 0;
height: 0;
border-top: 12px solid transparent !important;
border-bottom: 12px solid transparent !important;
border-left: 17px solid rgba(255,255,255,0.8);
transition: border-color 0.3s;
}

.playIcon:hover,  .playIcon:hover .playIconTriangle{
border-color: rgb(34, 171, 203);
}


.downTriangle{
width: 0;
height: 0;
border-left: 12px solid transparent;
border-right: 12px solid transparent;
border-top: 12px solid #575555;
}

.checkBox{
  width: 14px;
  height: 14px;
  border: 1px solid rgb(100,100,100);
  cursor: pointer;
  display: inline-block;
}

.option.selected .checkBox, 
.checkBox.checked{
background-color: rgb(230,230,230);
}

.radioButton{
  width: 14px;
  height: 14px;
  border-radius: 7px;
  border: 1px solid rgb(150, 150, 150);
}

.radioButton.selected{
background-color: rgb(230,230,230);
}


/* ------------------- page wrapper---------------------- */


/*COMMON*/


.bar_text {width: 100%; color: #aaa; margin: 20px 0; overflow: hidden;}
.bar_text>div{border-bottom: 1px solid #aaa; width: 100px; float: left; height: 11px;}
/*.bar_text>div:first-child{margin: 0 12px 0 0 !important;}
.bar_text>div:last-child{margin: 0 0 0 12px!important;}*/
.bar_text>span{display: block; float: left; margin: 0 12px;}

/*END COMMON*/


.header input:hover{border: 1px solid rgb(247,168,30);}
.header input[disabled="disabled"]:hover{border: none !important;cursor:default;}


#vp-controller {height: 100%;}
#app {height: 100%;}

#footer { background-color: #00092D;  border-top: 3px solid #FFFFFF; color: #999999; font-size: 14px; 
   padding: 10px 20px; text-decoration:none; height: 73px;}
a img {border:0;}
.SES #logo { float:left; margin-top: 7px;}
.VP #logo { float:left; margin-top: 0px;}
#button {top:2px;  right: 0px;  position:absolute; height:17px; width: 48px;    padding:2px 12px; text-align:center; color: #545454 !important;background-color:#FFF;border-radius:6px;-moz-border-radius:6px;border:1px solid #A0A0BE;font-weight:bold;}
#beta {top: 3px;right: 0px;position: absolute;height: 30px;width: 290px;background: url("/st/images/button_290x26.png") no-repeat;display: block;padding:1px 0px 0px 0px;text-align: center;margin-top:1px;font-size: 14px;color: #363847;
 font-weight: bold;}
#beta strong {font-size: 18px;color: #FFF;font-weight: bold;}
#user { position: absolute; right:85px; top:2px; padding:1px 2px;}

#dialog {
position: absolute; 
top: 50%;
left: 50%;
transform: translateY(-50%) translateX(-50%);
-webkit-transform: translateY(-50%) translateX(-50%);
-ms-transform: translateY(-50%) translateX(-50%);
width: 600px;
min-height: 150px;
z-index: 200;
padding: 5px;
background-color: rgb(30,30,30);
border: 1px solid rgb(170,170,170);
box-shadow: 0 0 10px 1px rgb(170,170,170);
}

#dialog .close{
float: right;
margin: 0 5px 0 0;
font-size: 14px;
}

#dialog .title {
padding: 5px 0 10px 6px;
border-bottom: 1px solid rgb(170,170,170);
font-weight: 700;
}

#dialog .body {
padding: 10px 15px;
overflow: hidden;
}
#dialog .option-tray {float: right; margin-top: 40px;}

#dialog .action-button{
font-size: 14px;
width: auto;
padding: 6px 15px;
margin: 0 0 0 10px;
}

#invite{padding: 35px;}
#invite .emailForm{margin: 15px 0 0;}

#invite .reg{margin: 15px 0 0;}
#invite input{
padding: 5px 8px;
color: #fff;
}

input.ng-invalid.touched, input.invalid{border: 1px solid #f00 !important;}
#invite .spinner {position: relative; top: 5px;}
#invite .invited {margin: 10px 0 0 44px;}
#invite .invited>div {margin: 5px 0 0 10px; font-style: italic;}

#invite .action-button {
width: auto;
padding: 4px 15px;
font-size: 14px;
margin-left: 10px;

}

.container { display: block;  margin: 0 auto; width: 990px; text-align: left;  position: relative; height:100%; } 

.register {background: #F2A228; display: block;padding: 2px 15px 4px;margin-top: 10px;font-size: 14px;color: black;
font-weight: bold;border-radius: 8px;float: right;}
.register  strong {font-size: 18px;color: #FFF;font-weight: bold; margin-right: 2px;}
.guest{float: right; color: #fff; font-size: 14px; margin: 16px;}
.input-hidden {background-color: transparent; border: none;}
.input-edit {border: 1px solid orange;}

.modal{
background-color: rgb(28,28,28);
}

.spinner {height:20px; width:20px;}

.modal>.close{
position: absolute;
left: 9px;
cursor: pointer;
font-size: 15px;
top: 5px;
}

.closeX{
transform: scale(1.2,1.0);
color: rgb(150, 150, 150);
cursor: pointer
}

.closeX:hover{
color: rgb(170, 170, 170);
}

#noProjectSelected{
width: 50%;
height: 40%;
min-width: 550px;
min-height: 150px;
text-align: center;
top: 50%;
position: absolute;
left: 50%;
background-color: rgba(30, 30, 30, 0.85);
transform: translateY(-50%) translateX(-50%);
-webkit-transform: translateY(-50%) translateX(-50%);
-ms-transform: translateY(-50%) translateX(-50%);
}

#noProjectSelectedButtons{
}

#noProjectSelected p{
width: 90%;
display: inline-block;
margin: 50px 0 50px;
padding: 15px 20px 18px 79px;
box-sizing: border-box;
color: rgb(200, 200, 200);
background: rgb(70, 70, 70) url(/st/images/pixie_face_right.png) no-repeat 12px 15px;
text-align: left;
font-size: 14px;
line-height: 130%;
min-height: 80px;
}


#noProjectSelected .msgSpacer{
min-height: 100px;
}

#noProjectSelectedButtons>div:first-child{
margin-right: 20px;
}

#noProjectSelectedButtons .action-button{
width: 190px;
}


#media-modal, #editors-modal{
position: absolute !important;
}

#player-wrapper{
box-shadow: none !important;
border: 2px solid rgb(35,  35, 35);
}


#growls{
position: absolute;
right: 10px;
top: 45px;
z-index: 20;
}

.growl {
width: 310px;
height: 95px;
overflow: hidden;
position: relative;
float: right;
clear: both;
margin: 0 0 3px 0;
font-size: 14px;
color: #fff;
transition-property: opacity, height, padding;
transition-duration: 0.6s, 0.25s, 0.25s;
}


.growl .back{
position: absolute;
top: 9px;
left: 5px;
height: 80px;
width: 300px;
background: rgb(15,147,178) url('/st/images/pixie_face_49x55.png') no-repeat 239px 11px;
padding: 10px;
box-shadow: rgb(100, 100, 100) 0 0 4px 0px;

}

.growl .close{
position: absolute;
right: 11px;
top: 8px;
cursor: pointer;
font-size: 12px;
}

.growl .ng-binding{
width: 220px;
}

.growl .triangle{
width: 0;
height: 0;
border-left: 9px solid transparent;
border-right: 9px solid transparent;
border-bottom: 9px solid rgb(15,147,178);
position: absolute;
right: 37px;
top: 0;
}

.growl.hidden{
height: 0;
padding: 0 10px;
}

.growl.ng-enter{
height: 0;
}

.growl.ng-enter.ng-enter-active{
height: 95px;
}

.growl p{
margin: 0 0 5px 0;
}

.growl .resolve{
cursor: pointer;
text-decoration: underline;
}



#aProfile,
#myProfile{
height: calc(100% - 20px);
width: 95%;
max-width: 1300px;
z-index: 51;
padding: 0;
background-color: transparent;
border: none;
overflow: hidden;
transition: width 0.3s;
top: 18px;
transform: translateY(0) translateX(-50%);
}

#aProfile{
z-index: 1001;
}

#aProfile.ng-hide,
#myProfile.ng-hide{
transition: none;
}




#aProfile .closeX,
#myProfile .closeX{
position: absolute;
right: 10px;
top: 1px;
font-size: 14px;
}


#myProfileWrapper{
width: 100%;
height: 100%;
position: relative;
}

#myProfile.editMode{
max-width: 1650px;
}

#myProfile.editMode.editHighlight *{
transition: all 0.7 !important;
}

#myProfile.editMode .editable{
cursor: pointer;
}

#myProfile.editMode .editableText{
transition: color 0.4s;
}

#myProfile.editMode .editableText:hover,
#myProfile.editMode.editHighlight .editableText{
color: rgb(15,147,178);
}

#myProfile.editMode .profile-pic.editable{
transition: all 0.4s;
}

#myProfile.editMode .profile-pic.editable:hover,
#myProfile.editMode.editHighlight .profile-pic.editable{
border-color: rgb(15,147,178);
}


#myProfile.editMode .reelThumbnail:hover,
#myProfile.editMode.editHighlight .reelThumbnail{
border-color: rgb(15,147,178);
}


#myProfile.editMode .location:hover,
#myProfile.editMode.editHighlight .location{
background-position: 0 -23px;
}





#profileEditPane{
position: absolute;
right: 0;
top: 20px;
width: 250px;
height: calc(100% - 40px);
}

#profileEditPane .label{
font-size: 13px;
color: rgb(150,150,150);
margin: 0 0 3px 0px;
font-style: italic;
font-weight: 700;

}

#profileEditPane .asset{
width: 120px;
margin: 0;
}


#profileEditAssetOrder{
width: 100%;
padding: 12px 0 40px 0;
border: 0 solid rgb(44, 44, 44);
margin: 30px 0;
border-width: 2px 0;
float: left;
}


#profileEditAssetOrder h6{
text-align: center;
font-size: 14px;
color: rgb(140, 140, 140);
margin: 0 0 15px 0;
}

#profileEditAssetOrder .orderAssetIcon{
float: left;
margin: 0 5px 0 0;
width: 40px;
height: 18px;
color: rgb(48, 138, 164);
font-size: 12px;
cursor: pointer;
text-align: center;
background: url('/st/images/sprite.png') no-repeat 10px -621px;
opacity: 0.85;
}

#profileEditAssetOrder .assetUpIcon{
background-position-y: -638px;
}

#profileEditAssetOrder .assetDownIcon{
background-position-y: -656px;
}

#profileEditAssetOrder .assetLastIcon{
background-position-y: -675px;
}


#profileEditAssetOrder .orderAssetIcon:hover{
opacity: 1.0;
}

#profileEditAssetOrder .orderAssetIcon span{
position: relative;
top: 26px;
-webkit-touch-callout: none;
-webkit-user-select: none;
-khtml-user-select: none;
-moz-user-select: none;
-ms-user-select: none;
user-select: none;
}

.orderAssetIcon:first-of-type{
margin-left: 16px !important;
}



#profileEditPane .removeAssetLink{
float: left;
clear: both;
font-size: 13px;
margin: 10px 0 0 0;
border: 1px solid rgb(117, 37, 37);
padding: 5px 10px;
color: rgb(155, 50, 50);
cursor: pointer;
-webkit-touch-callout: none;
-webkit-user-select: none;
-khtml-user-select: none;
-moz-user-select: none;
-ms-user-select: none;
user-select: none;
transition: all 0.3s;
}

#profileEditPane .removeAssetLink:hover{
color: rgb(182, 56, 56);
border-color: rgb(154, 48, 48);
}


#profileEditPane .assetRemoved{
float: left;
clear: both;
font-size: 12px;
color: rgb(202, 54, 54);
margin: 5px 0 0 0px;
}


#profileEditPane .undoRemoveAsset{
  float: left;
  font-size: 11px;
  margin: 5px 0 0 5px;
}

#profileEditPane .doneButton{
position: absolute;
bottom: 10px;
right: 10px;
}




#profileEditPane .doneLink{
  position: absolute;
  bottom: 11px;
  right: 15px;
  font-weight: 700;
  font-size: 14px;
}

#profileEditPane input,
#profileEditPane textarea{
  margin-bottom: 10px;
  color: rgb(200,200,200);
  width: 100%;
  box-sizing: border-box;
  padding: 5px 8px;
  font-size: 13px;
  border-color: rgb(63, 63, 63);
  resize: none;
  border-width: 2px;
}


#profileEditPane textarea::-webkit-input-placeholder { /* WebKit browsers */
color: rgb(100,100,100);
}


#profileEditPane textarea::-moz-placeholder { /* Mozilla Firefox 19+ */
color: rgb(100,100,100);
opacity:  1;
}

#profileEditPane textarea:-ms-input-placeholder { /* Internet Explorer 10+ */
color: rgb(100,100,100);
}

#profileEditPane textarea[disabled="disabled"]{
border-color: rgb(65,65,65);
color: rgb(165, 165, 165);
}


.profileEditCard{
position: absolute;
top: 0;
left: 0;
padding: 20px;
height: 100%;
width: 100%;
box-sizing: border-box;
}

#profileEditInfo .error{
margin: 0 0 10px 0;
}

#profileEditBlurb{
padding-top: 40px;
}

#profileEditBlurb textarea{
height: 300px;
resize: vertical;
}

#profileEditNameInput{
  margin-top: 18px;
}

#profileEditPane #profileEditLocationInput{
background: url('/st/images/location_icon_13x17.png') no-repeat 4px 5px;
padding-left: 24px;
}

#profileEditNewAssetUrl{
margin: 17px 0 0 0;
overflow: hidden;
}

#profileEditAssetThumbnail{
width: 209px;
height: 117px;
background-size: cover;
background-position: 0 50%;
margin: 10px 0 0 0;
}

#profileEditNewAssetComment{
height: 80px;
margin: 10px 0 0 0 !important;
resize: vertical;
}

#profileEditAsset p.hint{
margin-top: 2px;
}

#profileEditAsset .inputFeedback{
margin: 0 0 5px 0;
font-size: 13px;
color: rgb(234, 148, 19);
}

#profileEditAsset .inputFeedback.error{
font-weight: 700;

}

#profileEditStart{
text-align: center;
}

#profileEditStart img{
margin: 20px 0;
}

#profileEditStart h4{
font-size: 16px;
font-weight: 700;
text-align: left;
margin: 10px 0 20px 0;
color: rgb(202, 202, 202);
}

#profileEditStart p{
text-align: left;
font-size: 14px;
color: rgb(183, 183, 183);
line-height: 140%;
padding-right: 20px;
}


#profileEditClose{
position: absolute;
top: 3px;
right: 8px;
z-index: 2;
}

#profileEditAvatar{
padding-top: 50px;
}

#profileEditAvatar .action-button{
margin: 0 0 12px 0;
float: left;
}

#profileEditAvatar .spinner-blocks{
float: left;
margin: 10px 0 0 10px;
}

#profileEditPane p.hint{
float: left;
clear: both;
font-size: 13px;
font-style: italic;
color: rgb(152, 152, 152);
font-weight: 700;
}

#avatarChanged,
#undoChangeAvatar{
transition: opacity 0.3s;
}

#avatarChanged.ng-hide, 
#undoChangeAvatar.ng-hide{
opacity: 0;
}

#avatarChanged{
font-size: 14px;
float: left;
}

#undoChangeAvatar{
font-size: 12px;
margin: 0 0 0 3px;
float: left;
}

#profileEditSkills{
padding-top: 40px;
padding-left: 27px;
}

#profileEditSkills .skill{
float: left;
clear: left;
margin: 0 0 6px 0;
cursor: pointer;
}

#profileEditSkills .checkBox{
  float: left;
  clear: left;
}

#profileEditSkills .skill.checked .checkBox{
background-color: rgb(230,230,230);
}

#profileEditSkills .checkBoxLabel{
float: left;
color: rgb(165, 165, 165);
margin: -2px 0 0 8px;
font-size: 14px;
}

#profileEditSkills .skill.checked .checkBoxLabel{
color: rgb(230,230,230);
}



.profileEditCard.ng-hide{
opacity: 0;
}

.profileEditCard.ng-hide-add{
transition: opacity 0.2s;
}

.profileEditCard.ng-hide-remove{
transition: opacity 0.2s ease 0.2s;
}

.profileEditCard .errMsg{
font-size: 13px;
color: rgb(195, 103, 103);
}

.profileEditCard .errMsg .highlight{
color: rgb(245, 124, 124);
}


    

#profileEditPane{
background-color: rgb(38,38,38);
}

#creatorProfile{
background-color: rgb(30, 30, 30);
border: none;
height: 100%;
width: 100%;
}

#myProfile.editMode #creatorProfile{
width: calc(100% - 250px);
}


#myProfile.editMode #creatorProfile .closeX{
right: 260px;
}


#profileModeButton{
position: absolute;
top: 0px;
right: 32px;
font-size: 12px;
border: 2px solid transparent;
padding: 2px 10px;
z-index: 2;
color: rgb(109, 109, 109);
cursor: pointer;
transition: all 0.3s;
}

#profileModeButton:hover{
color: rgb(10, 146, 177); 
border-color: rgb(10, 146, 177); 
}

#myProfile.editMode #profileModeButton{
right: 275px;
}


#creatorProfileLower{
overflow: hidden;
position: relative;
}


#profileDimmer{
background-color: rgb(30, 30, 30);
width: 100%;
position: absolute;
z-index: 2;
bottom: 0;
top: 0;
opacity: 0.95;
transition: opacity 2s ease 0.5s; /*for when it's being shown*/
}


#profileDimmer.ng-hide{
transition: opacity 0.4s ease 0s; /*for when it's being hidden*/
opacity: 0;
}


#creatorProfile h3{
 font-size: 16px;
}
 
#creatorProfile>.vp-scroll-bar{
height: calc(100% - 30px);
overflow-y: scroll;
position: relative;
width: calc(100% - 34px);
top: 25px;
left: 25px;
padding-right: 12px;
padding-bottom: 20px;
}

#creatorProfileTopWrapper{
position: relative;
overflow: hidden;
width: 100%;
}

#creatorProfileHeader, #creatorProfileCaption{
position: absolute;
left: 0;
background-color: rgba(50, 50, 50, 0.7);
width: 100%;
}

#creatorProfileHeader{
top: 0;
padding: 20px;
height: 100px;
transition: top 0.4s ease 0.8s; /*for when it's being shown*/
}

#creatorProfileHeader.ng-hide{
top: -100px;
transition: top 0.4s ease 0s;  /*for when it's being hidden*/
}

#creatorProfileCaption{
bottom: 0px;
height: 100px;
font-size: 15px;
padding: 0;
line-height: 140%;
background-color: rgba(14, 14, 14, 0.6);
color: rgb(172, 172, 172);
transition: bottom 0.4s ease 0.8s;/*for when it's being shown*/
}


#creatorProfileCaption p{
margin: 0;
position: absolute;
top: 50%;
transform: translateY(-50%);
padding: 0 27px;
max-height: 4.2em;
overflow: hidden;
}


#creatorProfileCaption.ng-hide{
bottom: -100px;
transition: bottom 0.4s ease 0s;  /*for when it's being hidden*/
}

#creatorProfileHeader h1{
font-size: 20px;
font-weight: 700;
float: left;
}

#creatorProfileLocation{
float: left;
margin: 0 0 0 18px;
font-size: 15px;
background: url('/st/images/sprite.png') no-repeat 0 -516px;
padding-left: 24px;
height: 23px;
padding-top: 4px;
font-style: italic;
color: rgb(221, 221, 221);
}


#myProfile.editMode #creatorProfileLocation:hover,
#myProfile.editMode.editHighlight #creatorProfileLocation{
background-position: 0 -542px;
}


#creatorProfileReviewSummary{
float: right;
cursor: pointer;
font-size: 14px !important;
margin: 7px 5px 0 0;
}


#creatorProfileReviewSummary .thumbup{
background: url('/st/images/sprite.png') no-repeat 0 -573px;
display: inline-block;
height: 17px;
width: 18px;
margin: 0 1px;
}


#creatorProfileHeader h4{
clear: both;
margin: 10px 0 0 0;
float: left;
color: rgb(205, 205, 205);
font-size: 13px;
}

#creatorProfileHeader h4::first-letter{
text-transform: capitalize;
}



#creatorProfilePoster{
width: 100%;
height: 100%;
position: absolute;
top: 0;
left: 0;
transition: opacity 0.4s;
background-size: cover;
}


#creatorProfilePoster.ng-hide{
opacity: 0;
}


#creatorProfilePlayBtn{
position: absolute;
left: 50%;
top: 50%;
cursor: pointer;
transform: translateY(-50%) translateX(-50%);
transition: opacity 0.4s ease 1.0s;
}

#creatorProfilePlayBtn.ng-hide{
opacity: 0;
}

#creatorProfileReel{
    margin: 14px 0 0px 0;
    
    overflow: hidden;
 }   

#reelMoreLink{ 
float: right;
position: relative;
top: -10px;
font-size: 12px;
}

 
.reelThumbnail{
position: relative;
background-size: cover;
background-position: center;
margin-bottom: 16px;
border-style: solid;
border-color: rgb(30,30,30);
float: left;
cursor: pointer;
transition: border-color 0.2s;
}

.reelThumbnail.loaded{
border-color: rgb(203, 203, 203);
}

.reelThumbnail.loaded .play{
display: none !important;
}


.reelThumbnail:nth-child(4n){
   margin-right: 0 !important;
}

.reelThumbnail.ng-leave {
  transition: opacity 0.5s ease, width 0.7s ease-in 0.4s, margin-right 0.7s ease-in 0.4s, border-width 0.7s ease-in 0.4s;
}

.reelThumbnail.ng-enter{
  transition: opacity 1.0s ease 0.5s, width 0.5s ease-in, margin-right 0.5s ease-in, border-width 0.5s ease-in;
}

.reelThumbnail.ng-leave.ng-leave-active,
.reelThumbnail.ng-enter {
   width: 0;
   opacity: 0;
   border-width: 0;
   margin-right: 0;
}

.reelThumbnail,
.reelThumbnail.ng-leave,
.reelThumbnail.ng-enter.ng-enter-active {
   width: 24%;
   opacity: 1.0;
   border-width: 2px;
   margin-right: 1.3%;
}

.fill-16-9{
   position: relative;
   width: 100%;
   padding-bottom: 56.25%;
}

.fill-2-1{
   position: relative;
   width: 100%;
   padding-bottom: 45%;
}

.fill-227{
position: relative;
width: 100%;
padding-bottom: 44%;
}

.reelThumbnail .play{
height: 60px;
position: absolute;
left: 50%;
top: 50%;
opacity: 0.6;
transform: translateX(-50%) translateY(-50%);
transition: opacity 0.4s;
}

.reelThumbnail:hover .play{
opacity: 1.0;
}

#addVideoLink{
position: relative;
overflow: hidden;
border-color: rgb(30,30,30) !important;
transition: all 0.3s;
}

#addVideoLink.ng-hide{
width: 0;
margin-right: 0;
}

#addVideoLink span{
position: absolute;
top: 50%;
left: 50%;
transform: translateX(-50%) translateY(-50%);
transition: color 0.3s;
color: rgb(215, 215, 215);
}

#addVideoLink:hover span{
color: rgb(34, 171, 203);
}


#addVideoLink .corner{
position: absolute;
border-color: rgb(187, 187, 187);
border-style: solid;
width: 15%;
height: 25%;
border-width: 0;
transition: border-color 0.3s;
}

#addVideoLink:hover .corner{
border-color: rgb(34, 171, 203);

}


#addVideoLink .corner.q1{
top: 0;
left: 0;
border-width: 3px 0 0 3px;
}

#addVideoLink .corner.q2{
top: 0;
right: 0;
border-width: 3px 3px 0 0;
}

#addVideoLink .corner.q3{
bottom: 0;
right: 0;
border-width: 0 3px 3px 0;
}

#addVideoLink .corner.q4{
bottom: 0;
left: 0;
border-width: 0 0 3px 3px;
}


#creatorProfile .border{
border: 0px solid rgb(50, 50, 50);
}

#creatorProfileAbout{
width: 100%;
border-top-width: 1px !important;
padding: 18px 150px 8px 25px;
overflow: hidden;
margin: 0 0 20px 0;
}

#creatorProfileAbout h3{
margin: 0 0 18px 0;
}

#creatorProfileAbout p{
float: left;
width: calc(100% - 75px);
margin: -2px 0 0 15px;
font-size: 14px;
color: rgb(169, 169, 169);
white-space: pre-line;
word-wrap: break-word;

}


#creatorProfile .profile-pic{
float: left;
width: 55px;
height: 55px;
box-shadow: none;
border: 2px solid rgb(202, 202, 202);
background-size: contain !important;
}

#creatorProfileReputation{
border-top-width: 1px !important;
width: 100%;
padding: 0 25px;
display: -ms-flexbox;
display: -webkit-flex;
display: flex;
-webkit-flex-direction: row;
-ms-flex-direction: row;
flex-direction: row;
}


#creatorProfileReviews{
float: left;
-ms-flex: 5; 
-webkit-flex: 5; 
flex: 5;
border-right-width: 1px !important;
padding: 19px 36px 30px 0;
min-height: 170px;
}


#creatorProfileReviews h3{
margin-bottom: 30px;
}


#creatorProfileReviews h5{
font-size: 14px;
margin: -24px 0 0 0;
color: rgb(190, 190, 190);
font-style: italic;
font-weight: 700;
}


#creatorProfileReviews .review{
font-size: 14px;
padding: 2px 0 0 28px;
color: rgb(169, 169, 169);
margin: 0 0 38px 0;
position: relative;

}

#creatorProfileReviews .review .quoteMark{
background: url('/st/images/sprite.png') no-repeat 0 -602px;
position: absolute;
top: 0;
left: 0;
height: 14px;
width: 21px;
}


#creatorProfileReviews .review p{
margin: 0 0 10px 0;
white-space: pre-line;
word-wrap: break-word;
line-height: 140%;

}

#creatorProfileBadges{
float: left;
-ms-flex: 4; 
-webkit-flex: 4; 
flex: 4;
overflow: hidden;
padding: 30px 20px;
}


#creatorProfileBadges .badgeWrapper{
 margin: 0 0 17px 0;
 overflow: hidden;
 color: rgb(220,220,220);
}
    
    
#creatorProfileBadges .badge{
background-image: url('/st/images/badges_55h.png');
float: left;
width: 70px;
height: 55px;
}
    
    
#creatorProfileBadges .badgeInfo{
float: left;
color: rgb(230,230,230);
width: calc(100% - 100px);
margin: 11px 0 0 16px;
}    

#creatorProfileBadges .badgeInfo h3{
margin-bottom: 2px;
font-weight: 700;
font-size: 17px;
}

#creatorProfileBadges .badgeInfo p{
font-size: 13px;
margin: 0;
color: rgb(175, 175, 175);
}


.creatorProfilePlayer{
width: 100% !important;
height: 100% !important;
position: absolute !important;
top: 0;
left: 0;
z-index: 0;
}


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

.creatorProfile .creatorInfo{
float: left;
margin: 7px 0 0 12px;
max-width: calc(100% - 100px);
}

.creatorProfile .creatorInfo .name{
font-size: 20px;
float: left;
}

.creatorProfile .creatorInfo .location{
display: block;
  height: 23px;
  padding: 2px 0 0 23px;
  background: url('/st/images/location_icon_sprite.png') no-repeat 0 0;
  float: left;
  margin: 3px 0 0 17px;
  font-size: 15px;
  color: rgb(160, 160, 160);
  font-style: italic;
  font-weight: 700;
  box-sizing: border-box;
}

.creatorProfile .creatorInfo .skills{
float: left;
clear: both;
margin: 4px 0 0 2px;
}

.creatorProfile .creatorInfo .skill{
font-size: 14px;
margin: 0;
color: rgb(221, 221, 221);
}
  

.creatorProfile .playerWrapper{
margin: 0 0 0 0;
transition: opacity 0.3s;
position: absolute;
top: 122px;
left: 58px;
width: 630px;
height: 388px;
}

.creatorProfile .assetComment{
position: absolute;
top: 524px;
left: 60px;
width: 629px;
max-height: 37px;
overflow: hidden;
color: rgb(221,221,221);
font-weight: 400;
font-size: 14px;
line-height: 130%;
}





.creatorProfile .playerWrapper.dimmed{
opacity: 0.2;
}

.creatorProfile .playerWrapper.hidden{
opacity: 0.001;
}

.creatorProfile .playerWrapper .videoObscure{
width: 100%;
height: 100%;
background-color: rgb(28,28,28);
position: absolute;
top: 0;
left: 0;
opacity: 1.0;
transition: opacity 0.2s;
}

.creatorProfile .playerWrapper .videoObscure.ng-hide{
opacity: 0;
}

.creatorProfile .reelWrapper{
overflow: hidden;
width: 162px;
position: absolute;
top: 124px;
left: 717px;
}

.creatorProfile .reelAssets{
max-height: 355px;
overflow-y: auto;
overflow-x: hidden;
width: 100%;

}


.addProfileAsset{
cursor: pointer;
color: rgb(15,147,178);
margin: 10px 0 0 4px;
font-size: 14px;
font-weight: 700;

}


.assetThumbnail{
position: relative;
width: 140px;
height: 70px;
overflow: hidden;
margin-bottom: 10px;
vertical-align: middle;
border: 2px solid transparent;
}

.editMode .assetThumbnail .remove{
display: block;
}
/*-
.assetThumbnail img{
width: 140px;
cursor: pointer;
position: absolute;
top: 50%;
transform: translateY(-50%);
}


*/






.profileAssetSpacer.ng-hide{
height: 0;
}

.profileAssetSpacer.ng-hide-add-active{
transition: height 0.5s;
}

.profileAssetSpacer{
height: 68px;
width: 120px;
}



#profile-modal{
color: rgb(220,220,220);
}

#profile-modal .action-button{
font-size: 16px;
}

#profile-modal .close{
font-size: 16px;
font-weight: 300;
}

#profile-modal h1{
color: rgb(200,200,200);
margin: 10px 0 50px 0;
text-align: center;
font-size: 24px;
}

#avatar-wrapper{
margin: 0 0 0 100px;
float: left;
}

#avatar-wrapper .profile-pic{
margin: 0 auto;
}

#avatar-wrapper .action-button{
margin: 20px 0 0 0;
}

#avatar-wrapper .change-status{
color: rgb(15,147,178);
font-size: 14px;
margin: 7px 0 0 20px;
}

#profile-modal-name{
float: left;
margin: 15px 0 0 40px;
font-size: 40px;
}

#profile-modal-portfolio{
float: left;
clear: both;
margin: 66px 0 0 100px;
}

#profile-modal-portfolio h2{
font-weight: normal;
font-size: 24px;
margin-bottom: 5px;
}

#profile-modal-portfolio span{
font-size: 17px;
}



#register-modal, #account-modal {padding: 27px; width: 500px; height: 340px;}

.register-modal button {}

.register-modal button.google{ }


.register-modal button.disabled {cursor: auto; color: #bbb; background-color: #eeeeee; border-color: #ccc;}
.register-modal input {height: 17px; margin-right: 4px;}
.register-modal form {width: 450px;}
.register-modal form label {margin: 2px 5px 0 0;}

.register-modal .bar_text > div {width: 198px;}
.register-by-email button {padding: 4px 15px;}
.register-by-email input {margin: 0 5px;}

.register-modal .bar_text {margin: 30px 0;}

.register-modal .success-msg {padding: 6px 12px; margin: 10px 0 0 0;}
.register-modal .success-msg button {margin-left: 10px; padding: 3px 8px; font-weight: normal;}

#account-details {margin: 10px 0; font-size: 14px;}
#account-details > div{margin: 0 0 5px 0; }
#account-details  span{font-style: italic;}

#welcome-modal {
height: 400px;
color: rgb(235,235,235);
padding-left: 70px;

}

#welcome-modal input{
color: #fff;
padding: 9px;
border-color: rgb(108, 108, 108);
}

#welcome-modal .action-button{
padding: 9px 16px;
margin: 5px 0 0 10px;
width: auto;
font-size: 14px;
}

#welcome-modal .action-button.done{
margin: 20px 0;
}

#register-label{
color: rgb(210,210,210);
font-weight: 300;
}

#welcome-modal h1 {
margin: 60px 0 0 0;
text-align: left;
font-size: 28px;
}

#welcome-modal h2 {margin: 8px 0 0 0;}
#welcome-modal .action {
margin: 40px 0 0 3px;
width: 690px;
}

#welcome-modal .action h3 {margin: 0 0 5px 0;}
#welcome-modal form>* {margin-top: 5px;}
#welcome-modal .ie-label {margin: 9px 6px 0 0;}
#welcome-modal .or {
margin: 10px 29px 0 0px;
}
#welcome-modal .vp-button.done {padding: 3px 12px; font-size: 13px; text-shadow: none;}
#welcome-modal button.google {
margin: 5px 10px;
height: 36px;
padding: 4px 16px 4px 39px;
color: #FFFDFD;
font-size: 14px;
font-weight: bold;
border: 1px solid rgb(249,122,122);
background-color: rgba(252,91,90,0.95);
cursor: pointer;
background-image: url("/st/images/google_icon_25.png");
background-repeat: no-repeat;
background-position: 4px 4px;
}

#welcome-modal .by-email {position: absolute; right: 25px; width: 400px;}

#welcome-modal .promise {
margin: 2px 0 0 0;
text-align: right;
color: rgb(160, 160, 160);}

#welcome-modal .spinner-holder {
width: 20px;
margin: 7px 10px;
padding: 5px 0;}


#welcome-modal .error-msg {
padding: 5px 20px;
text-align: right;
margin: 7px 34px 0 2px;
background-color: rgba(252,91,90,0.6);
}

#welcome-modal .success-msg {margin: 5px 34px 0 0;}
#welcome-modal .tour-wrapper {margin: 20px 20px 0 0;}
#welcome-modal button.big { font-size: 24px; padding: 7px 20px;}
#welcome-modal .maybe-later {margin: 27px 0 0 10px;}
#welcome-modal .footer {
position: absolute;
bottom: 20px;
left: 74px;
color: rgb(210,210,210);
}
#welcome-modal .footer .success-msg {padding: 2px 7px;}
#welcome-modal .action.post-registration button.done {margin-top: 10px;}


#editors-modal{
background-color: rgb(30,30,30);
color: #fff;
}

#editors-modal h2{
font-size: 20px;
color: rgb(238,238,238);
}

#editors-list .name-and-specialties h2{
color: #fff;
}

#editors-list .name-and-specialties:hover h2{
color: rgb(15,147,178);
}

#editors-list .no-reel{
background-color: transparent;
}

#editors-list .specialty{
float: left;
margin-right: 5px;
}

#editors-modal #editors-list .profile-pic{
background-repeat: no-repeat;
background-position: center center;
}


#editors-modal .colHeader h3{
font-size: 18px;
font-weight: 400;
}

#search-nav .search-category{
background-color: transparent;
}

#editors-modal #editor-profile{
background-color: transparent;
}

#editors-modal .editor-nav{
border-width: 1px 1px 0 1px;
border-style: solid;
border-color: rgb(180,180,180);
right: -1px;
top: -40px;
background-color: rgb(30,30,30);
color: rgb(15,147,178);

}

#editor-profile {
width:920px;
height:100%;
left:30px;
background:#FFF;
position:absolute;
box-shadow:0px 0px 8px 2px #666;
}

#editor-profile .profile-pic {
width: 68px;
height: 68px;
box-shadow: none;
border: 4px solid rgb(230,230,230);
}

#editor-profile .location {
display: block;
height: 23px;
padding: 2px 0 0 23px;
background: url('/st/images/location_icon_sprite.png') no-repeat 0 0;
float: left;
margin: 3px 0 0 17px;
font-size: 15px;
color: rgb(160, 160, 160);
font-style: italic;
font-weight: 700;
box-sizing: border-box;
font-family: 'Lato';
}

#editor-profile .editor-box {position:absolute;top:22px; left:25px;}
#editor-profile .player-wrapper {
position:absolute;
top:130px;
left:55px;
}

#editor-profile .comment-wrapper {
position: relative;
top: 10px;
width: 710px;
overflow: hidden;
height: 60px;
}

#editor-profile .reels-wrapper {
position:absolute;
top:125px;
left:775px;
width:164px;
height:484px;
overflow-y: auto;
}

#editor-profile .actions {position:absolute;top:30px;right:20px;width:250px;}


#editor-profile h3 {
color: rgb(221,221,221);
}

#editor-profile .specialties {
max-width:630px;
margin-top: 4px;
}

#editor-profile .comment-wrapper h3 {
color: rgb(221,221,221);
}


#toolbar {
position:absolute;
right: 12px;
top: 10px;
z-index:50;
color:#FFF;
font-weight: bold;
margin: 0;
}

#logo{
position: absolute;
right: 31px;
top: 0px;
}

#pixie{
position: absolute;
left: 47px;
top: 42px;
}



#settings-button {
height: 18px;
width: 18px;
margin: 1px 0 0 0px;
background: url("/st/images/white-cog.png") no-repeat 0 0;
opacity: 0.85;
cursor: pointer;
transition: opacity 0.15s;
background-size: contain;
}

#settings-button:hover{opacity: 1.0;} 

#settings {
top: 25px;
right: 0px;
min-width: 164px;
max-width: 270px;
min-height: 50px;
z-index: 10;
padding: 15px;
color: rgb(230,230,230);
font-size: 14px;
font-weight: normal;
background-color: rgb(31, 31, 31);
border: 1px solid rgb(123, 123, 123);
overflow: hidden;
}

#settings > div {
margin: 0 0 10px 0;
cursor: pointer;
}



#settings >div:hover {
color:rgb(255,255,255) !important;
}


#settings-no-action{
border-top: 1px solid rgb(90,90,90);
padding: 10px 0 0 8px;
}


#settings-no-action div{
font-style: italic;
margin: 0px 0 5px -8px;
color: rgb(230,230,230) !important;
cursor: default;
}

#settings-no-action .pct-coupon{
margin: 3px 0 0 10px;
}


.frame{
position: absolute;
z-index: 2;
width: 100%;
}

.frame-obscure{
height: 37px;
width: 100%;
background-color: rgba(30,30,30,0.95);
}


.frame-left{

border-style: solid;
border-color: rgb(252,91,90);
height: 44px;
border-width: 4px 0 0 4px;
margin-left: 37px;
width: calc(100% - 37px);

}



#my-videos {padding: 5px 10px 7px 39px !important; background: url('/st/images/my-videos.png')no-repeat 0px 4px;}

#paused-project{
position: absolute;
top: 0;
left: 0;
z-index: 100;
background-color: rgba(129, 11, 132, 0.85);
min-height: 60px;
width: 100%;
color: rgb(255,255,255);
font-size: 20px;
text-align: center;
padding: 17px 10px;
}


#add-files {
overflow: hidden;
z-index: 200;
}

#add-files h1{
color: rgb(200,200,200);
margin: 10px 0 35px 0;
text-align: center;
font-size: 24px;
}

#add-files.borderless {border: 0;}
#add-files.minimized, #add-files.minimized #add-files-summary {background: none;color:#D78637;}
#add-files .title {  margin: 15px 0 0 50px; font-size: 24px; color: #777; width: 100%;}

#add-files .close {
position: absolute;
right: 12px;
top: 8px;
}


#add-files .out-of-date {
width: 100%;
padding: 10px 15px;
margin-bottom: 10px;
background-color: rgb(252,91,90);
font-size: 16px;
}

#add-files .out-of-date a {color: #fff !important; text-decoration: underline;}
   
#add-files-summary { padding: 6px;   color: #D78637; font-size: 12px; cursor: pointer; background-color: #393B4B;}

#add-files .max{
position: absolute;
width: 800px;
height: 500px;
overflow:hidden;
}

#add-files .min{width: 130px; height: 27px; position: absolute; top: 0; right: 0; z-index: 1; text-align: center;}

#add-files-button-tray {
margin: 0 30px 0 30px;
height: 30px; 
}

#add-files-alert-inner{
padding: 15px;
}

#add-files-alert {
clear: both;
float: left;
width: 660px;
margin: 0 0 20px 0;
color: #fff;
font-size: 18px;
overflow: hidden;
background-color: rgb(15,147,178);
height: 0;
transition: height 0.2s;
}

#add-files .showAlert #add-files-alert{
height: 87px;
}

#connection-alert {background-color: rgb(252, 190, 99);}
#add-files-summary-holder {width: 140px; height: 30px;}

#fromComputerContainer {
float: left;
width: 192px;
height: 1px;
}

#fromComputerButton {
position: absolute;
width: auto;
padding: 6px 12px;
font-size: 16px;
}

#fromComputer {
position: absolute;
opacity: 0;
width: 170px;
cursor: pointer !important;
font-size: 24px;
padding: 0;
margin: 0;
}

#upload-swf{
float: left;
margin: 0 15px 0 0;
}

.files-progress {
position: absolute;
top: 140px;
bottom: 15px;
width: 730px;
margin: 0 0 0 33px;
font-size: 16px;
overflow-y: auto;
font-weight: 300;
transition: top 0.2s;
}

/*
#add-files .showAlert .files-progress{
top: 195px;
}*/

.file-progress {
margin: 0 0 10px 0;
float: left;
clear: left;
}

.file-progress>*{white-space: nowrap; overflow:hidden; margin: 0 15px 0 0;}

.progress-outline {
height: 15px;
width: 240px;
display: inline-block;
margin: 2px 10px 0 0;
background-color: rgb(209, 209, 209);
}

.progress-fill {
height: 100%;
width: 0%;
background-color: rgb(15,147,178);
}

#add-files .name {
width: 400px;
}

#add-files .size {font-size: 11px; margin: 0 0 0 10px;}

#add-files .message {
font-size: 12px;
color: rgb(249,122,122);
}

#add-files .cancel {
font-size: 12px;
text-decoration:
underline; cursor:
pointer;
color: rgb(249,122,122);
}


#uploadMsg{
display: block;
float: right;
font-size: 14px;
margin: 0 32px 0 0;
cursor: pointer;
height: 1px;
overflow: visible;
}


#lower-nav{
margin: 50px 0 0 0;
float: right;
}

#lower-nav a{
border: none;
padding: 0 7px;

}

#currentProjectName{
float: right;
white-space: nowrap;
text-overflow: ellipsis;
width: 120px;
overflow: hidden;
clear: both;
margin: 0 23px 0 0;
font-size: 12px;
color: rgb(226, 226, 226);
}

#avialableProjectsLink{
margin-top: 20px;
}

#availableProjectsCount{
font-size: 12px;
color: rgb(226, 226, 226);
}

#cardPlusRightBar{
width: calc(100% - 150px);
height: 100%;
position: relative;
left: 150px;
}

#nav-bar{
position: absolute;
right: 10px;
top: 13px;
}



.register-reminder {margin: 30px 10px 0 0; width: 640px; background-color: #FCF4B9; padding: 6px 15px;  cursor: pointer;
   color: #363847; font-size: 14px;}
.register-reminder:hover {background-color: #FFF4A3;}
.register-reminder>.register {text-decoration: underline;}









/* ---------------------------- my projects --------------------------------- */


#myProjects{
width: calc(100% - 100px);
height: calc(100% - 100px);
padding: 0;
max-width: 1400px;

}

#myProjects h5{
font-size: 13px;
color: rgb(124, 124, 124);
margin: 10px 0 0 13px;
font-weight: 700;
}  

#myProjects .close{
right: 10px;
left: auto;
}  

#myProjects .stage{
float: left;
margin: 0 0 25px 0;
clear: both;
width: 100%;
}

#myProjects .title{
float: left;
clear: both;
width: 180px;
padding: 17px 0 0 0;
}

#myProjects .title h3{
margin: 0 0 2px 0;
font-size: 18px;
font-weight: 700;
}

#myProjects .title h4{
font-size: 13px;
}

#myProjects .gridWrapper{
float: left;
width: calc(100% - 180px);
}

#myProjects.buyer .gridWrapper{
float: left;
width: calc(100% - 20px);
}

#myProjects.buyer  .title {
display: none;
}


.pfind{
position: relative;
height: 75px;
float: left;
overflow: hidden;
transition: width 0.5s ease-out 0.0s, margin 0.5s ease-out 0.0s;
}

.pfind,
.pfind.ng-enter-active,
.pfind.ng-leave{
width: 160px;
margin: 0 7px 7px 0;
}

.pfind.ng-enter,
.pfind.ng-leave.ng-leave-active{
width: 0;
margin: 0;
}

#myProjects .pfind.ng-enter h6,
#myProjects .pfind.ng-leave h6{
color: transparent;
}


.project-preview .pauseIcon{
position: absolute;
top: 7px;
right: 7px;
background-color: transparent;
}

.project-preview .pauseIcon::before,
.project-preview .pauseIcon::after{
background-color: rgb(51, 119, 130);
}






   
.project-preview {
position: absolute;
top: 0;
bottom: 0;
right: 0;
left: 0;
padding: 12px;
cursor: pointer;
text-align: center;
background-color: rgb(7, 116, 142);
overflow: hidden;
color: rgb(230,230,230);
height: 75px;
line-height: 51px;
vertical-align: middle;
transition: background-color 0.5s;
}  


.project-preview.paused{
background-color: rgb(18, 63, 73);
}


#myProjects .project-preview h6{
color: rgb(230,230,230);
font-size: 14px;
overflow: hidden;
vertical-align: middle;
display: inline-block;
line-height: 120%;
max-height: 3.6em;
transition: color 0.2s;
}


.project-preview:hover,
.project-preview.selected{
background-color: rgb(34, 157, 187);
}

.project-preview.deleted {
background-color: rgb(122, 57, 57);
border-color: rgb(170,54,54);
}

.project-preview.deleted:hover{
background-color: rgb(150,54,54);
}

.project-preview.selected.deleted {
background-color: rgb(170,54,54);
}



.projects {
height: 100%;
}

.projects .newVideo.strong {background-color:#DD8C3F;border-right: 2px #DD8C3F solid;
border-top: 2px #DD8C3F solid;}

.projects .newVideo {position: relative; top: 11px; left: 528px; z-index: 2; padding: 12px 10px;
   background-color:rgba(54, 56, 71, 0.5); color: white; font-weight:bold; opacity:0.9;
   cursor:pointer; box-shadow: inset 2px -3px 8px 1px rgba(0,0,0,0.2);
   border-top: 2px #FFF solid; border-right: 2px #FFF solid;
   border-bottom-left-radius: 10px; border-top-right-radius: 10px; 
}
.projects .newVideo:hover {opacity:1.0;}
   
.project-remove {
position: absolute;
bottom: 7px;
right: 4px;
width: 16px;
height: 16px;
opacity: 0;
cursor: pointer;
background: url('/st/images/trash_icon_white.png') no-repeat 0 0;
}

.pfind:hover .project-remove{
opacity: 1.0;
}

   
.project-tab.selected {background-color: #fff;}
#more-projects {float: right; color: #fff; cursor: pointer;}
#project-finder {position: absolute; top: 0; left: 0; 
   margin: 0 auto; width: 100%; padding: 70px 0; min-height: 600px;
   background:url('/st/images/vp-big-watermark.png') no-repeat 50% 10px;}
#project-finder .logo-img {width:1100px;opacity:0.1;
margin-left:-100px;margin-top:-243px;} 

#project-finder-scroller{
overflow-y: auto;
height: calc(100% - 60px);
position: absolute;
width: 100%;
left: 0;
top: 45px;
padding: 0 0 0 40px;
}

#project-finder-container {
overflow: hidden;
}


#newProjectButton{
margin: 0 0 30px 0;
float: left;
clear: both;
}

#noProjectMsg{
color: rgb(165, 165, 165);
text-align: center;
}



/* ------------------------------- left nav --------------------------------*/

.project {
width: 100%;
height: 100%;
z-index: 1;
}

.project-nav {
position: relative;
float: left;
top: 120px;
width: 150px;
text-align: right;
height: calc(100% - 120px);
}


.project-nav a {
display: inline-block;
padding: 5px 7px;
margin: 0 16px 5px 0;
white-space: nowrap;
font-size: 15px;
color: #fff;
cursor: pointer;
border: 2px solid;
border-color: rgba(255,255,255,0);  
float: right;
clear: both;
}

#bidNavFlag{
float: right;
margin: 8px 0px 0 0;
transition: margin 0.3s;
}

.project-nav a.active + #bidNavFlag{
margin-right: 7px;
}

.project-nav a.bidder{
font-size: 13px;
color: rgb(218, 218, 218);
max-width: 123px;
overflow: hidden;
text-align: right;
/* text-overflow: ellipsis; */
margin: 0px 15px 0px 0px;
padding: 2px 7px 2px 7px;
}


.project-nav a:hover{

}

.project-nav a.active {
border-color: rgba(255,255,255,1);  
}

#card-wrapper{
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
overflow: hidden;
box-shadow: 2px 0px 6px 2px rgba(0,0,0,0.35);
transition: width 0.4s;
}



.project .card .back{
position: absolute;
background-color: rgba(30,30,30,0.95);
width: 100%;
height: 100%;
top: 37px;
}



.project .right-bar {
position: absolute;
left: 72.5%;
bottom: 0px;
width: 27.5%;
height: 100%;

}    

.project .nav-link{

margin-bottom: 10px;
cursor: pointer;
font-size: 13px;

}

.project .display-name {
position: absolute;
right: 5px;
top: 5px;

}
.project>.header {width: 100%; margin: 0 0 0px 0; position:relative;}
.project .content {position: relative; width: 990px; margin: 0 auto; overflow: hidden; background-color: #fff; }

.project .name {margin: 8px 0 0 -15px; font-size: 28px; font-weight: bold; color: rgb(210, 211, 223);float:left;
   width: 480px; position: relative;  padding: 3px 0; margin-left: -30px;
   text-overflow: ellipsis; overflow: hidden; white-space: nowrap;}

.postActionsWrapper{
float: left;
width: calc(50% - 50px);
overflow: hidden;
height: calc(100% - 135px);
margin: 73px 0 0 40px;
padding: 0 0 0 40px;
border-left: 1px solid rgb(60,60,60);
transition: all 0.6s;
}     
   
   
#postActions{

}   

#postActions.ng-hide{
height: 0;
margin-top: 0;
}

#postActions .action-button{
float: left;
clear: left;
margin: 0 0 0 0;
    
}

#postActions .spinner-blocks {
float: left;
margin: 22px 0 0 20px;
}

#postActions .error{
float: left;
margin: 7px 0;
max-width: 220px;
}
   
.postActionsWrapper h3{   
font-size: 18px;
font-weight: 700;
margin: 0 0 10px 0;
}

#postActions ol{
margin: 0 0 20px 20px;
}

.postActionBlock li{
list-style: decimal;
color: rgb(200,200,200);
font-size: 13px;
max-width: 95%;
margin-bottom: 2px;
font-family: 'Open Sans', sans-serif;
}

.postActionBlock{

overflow: hidden;
margin: 0 0 30px 0;
float: left;
width: 100%;
transition: all 0.8s;
}

.postActionBlock.ng-hide{
max-height: 0;
margin: 0;
}

.postActionBlock.complete h3,
.postActionBlock.complete li{
color: rgb(100,100,100);
}

.postActionBlock h4{
margin: 0 0 7px 0;
}

.postActionBlock .blueButton{
float: left;
}

#postedSuccessMsg{
margin: 11px 0 0 20px;
float: left;
color: rgb(220, 220, 220);
}

#qaIntro{
    margin-top: 30px;
}

#brief-recap-wrapper h3{
font-size: 18px;
color: rgb(190, 190, 190);
font-weight: 600;
font-family: 'Open Sans', sans-serif;
}

#brief-recap-wrapper .postActionBlock h3{
color: rgb(220, 220, 220);
}


#readyForBids{
max-height: 1000px;
overflow: hidden;
transition: all 0.7s;
}

#readyForBids.ng-hide{
max-height: 0;
}

#readyToPost img{
float: left;
}

#readyToPost>div{
float: left;
width: calc(100% - 100px);
margin: 0 0 0 30px;
color: rgb(238, 238, 238);
}

#readyToPost .action-button{
padding: 0.8em 1.6em;
}

#readyToPost h2{
font-size: 20px;
margin: 6px 0 18px 0;
}

#readyToPost h3{
font-size: 16px;
font-weight: 400;
font-family: 'Lato', helvetica, arial, sans-serif;
float: left;
clear: left;
}

#readyToPost h3.s1{
margin: 0 0 37px 0;
}

#readyToPost h3.s2{
margin: 70px 0 5px 0;
}

#readyToPost .blue-link{
float: left;
clear: both;
font-size: 15px;
    margin: 0 0 25px;
transition: all 0.3s;
}

#readyToPost .blue-link.muted{
opacity: 0.2;
}

#learnVpChooses{
max-height: 180px;
overflow: hidden;
float: left;
clear: both;
transition: all 0.4s;
}

#learnVpChooses.ng-hide{
max-height: 0;
}

#learnVpChooses h3{
max-width: 250px;
clear: both;
margin: 0 0 20px 0;
}

#vpChoosesSuccess{
float: left;
margin: 7px 0 0 0;
}

#postedWithoutInvites{
clear: left;
margin: 10px 0;
float: left;
max-width: 229px;
}

/* ----------------------------------  Stats  --------------------------------------*/      


#statsQA{
width: 50%;
height: calc(100% - 10px);
overflow: hidden;
float: left;
padding: 30px 10px 0 30px;
display: -ms-flexbox;
display: -webkit-flex;
display: flex;
-webkit-flex-direction: column;
-ms-flex-direction: column;
flex-direction: column;
}

#statsForBrief{
width: 100%;
float: left;
overflow: hidden;
margin: 0 0 34px 0;
padding-left: 1px;
}


#statsForBrief h3{
text-align: center;
margin: 10px 0;
}


.statBlock{
float: left;
height: 91px;
width: 91px;
border: 1px solid rgb(60, 60, 60);
margin: -1px 0 0 -1px;
background-repeat: no-repeat;
background-position: 50% 17px;
padding: 50px 5px 5px 5px;
text-align: center;
font-size: 12px;
color: rgb(180, 180, 180);
line-height: 120%;    
}


.statBlock.viewedIcon{
background-position-y: 24px;
}

.statBlock.bidIcon{
background-position-y: 20px;
}

.statBlock.shortlistedIcon{
background-position-y: 19px;
}


.statBlock.dismissedIcon{
background-position-y: 20px;
}




.personIcon {
	background-image: url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAB8AAAAdCAMAAABluEcAAAAAM1BMVEUAAABZWlxZWlxZWlxZWlxZWlxZWlxZWlxZWlxZWlxZWlxZWlxZWlxZWlxZWlxZWlxZWlyk24wlAAAAEHRSTlMAECAwQFBgcICPn6+/z9/vIxqCigAAAKRJREFUeNqlkkEOwyAMBHEgiQkG/P/XVhAR1zVUqjoHLiNgveB+wUciQr+wG/FNgunmyoMMVkNmgaxHfucwvihPJhxrPn3404PW1eTLyifjD+WDMyQWorMAPfpyU7De2c6J2wnbiojt6khe69g63UYXbRZ1yMWdjCHsmCWEaMEOcRqlSoC68AXkZ1iejHXpS5+c1/g++prWGX3xabybRToKS7xzL4GkHJFqq4UWAAAAAElFTkSuQmCC);
}

.bidIcon {
	background-image: url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABYAAAAaCAMAAACEqFxyAAAAMFBMVEUAAABZWlxZWlxZWlxZWlxZWlxZWlxZWlxZWlxZWlxZWlxZWlxZWlxZWlxZWlxZWlwI+kaAAAAAD3RSTlMAECAwQFBgcICPn6+/3++glGfDAAAAg0lEQVR42n3OQRKEIAxEUYxREDL0/W87o2BP4sK/oepVkiL90mqzpontcO23CmBZr6rzjI+boBcY74EemR55pA/ugxv5nzTY5EWZpEKuYN3xZuxw7HMsZbYFbrgLvDYbFfLLbTWWw23Ww0+YOva9swLZq3Yc52t41OXkpUa1lYuua/QL/c0OynYipGsAAAAASUVORK5CYII=);
}

.viewedIcon {
	background-image: url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAADgAAAAUCAMAAADvNg5hAAAAM1BMVEUAAABZWlxZWlxZWlxZWlxZWlxZWlxZWlxZWlxZWlxZWlxZWlxZWlxZWlxZWlxZWlxZWlyk24wlAAAAEHRSTlMAECAwQFBgcICPn6+/z9/vIxqCigAAARRJREFUeNqlU9m2xCAIc18Qhf//2lvG0XakbzdPlDQhetD8By6WithZMBBrDvagGyJ/0BFbKSFIvw7eWHLuxU9VhC/dW0PeoGTM+jM4M+ETkMyGUqaqQw6TsiFfnKB8hflIX3gD7C9l+0PYzYkdaygqSDtdyUj0J9JFNolVjcJKmEWvbYWM4qmwYnjmcHLiJmfr3N6EMAt6mQhTkbhr4U7YXvKMSVpi+yJ0KxacnGeagspJc2NXqJIuL6e5eN+0yuOI3baIq6s7cOZpt6ljWh56TGI8PPsdoc6PjfK8kf4caZdu21D6Wak7gawdRDfLQtx+j3x1Rk3hih0yHmtm50uS50ig9shm5AVwJ+vDB/7R0vTt+QcV/xICrpYXOAAAAABJRU5ErkJggg==);
}

.tickIcon {
	background-image: url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAB4AAAAeCAMAAAAM7l6QAAAAM1BMVEUAAABZWlxZWlxZWlxZWlxZWlxZWlxZWlxZWlxZWlxZWlxZWlxZWlxZWlxZWlxZWlxZWlyk24wlAAAAEHRSTlMAECAwQFBgcICPn6+/z9/vIxqCigAAALZJREFUeAF901GOhSAMheGDgCIgPftf7XDHTMNAuf/rF1MhBdBcTKXWnAKMQuFfko8Jj8p/ZTfqKZxqflCuiV/U9ENo9rxcuSmhF7hLXOfCpca3C3Crnu7R6XFV4OKbQzJUTxpw63/KorxQ9SMvszIp3+iuqqyzc/dJGXFRfb2kAM/RvXAMgAw+ael8c9vZ+dhqw6e044jfHlszvq3Lo8vqxVTN1VmzqrHpLWDuLPqGIszCJ4+hHyidJzXrnQGrAAAAAElFTkSuQmCC);
}

.crossIcon {
	background-image: url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAB4AAAAeCAMAAAAM7l6QAAAAM1BMVEUAAABZWlxZWlxZWlxZWlxZWlxZWlxZWlxZWlxZWlxZWlxZWlxZWlxZWlxZWlxZWlxZWlyk24wlAAAAEHRSTlMAECAwQFBgcICPn6+/z9/vIxqCigAAAMRJREFUeAF1k+EOgyAMBg+LyhDXvv/TLjWZlE3uDyaX9PuKSiet5WitlswD+bAvWhdGlmYDNRHY1H54S7D2j0q0c7+oPXJy0WxCcZtthiYg7BsPZ4cUdj378U1fwygXNcYlSm/qvoL06ZmXRc9gbaPZ6IdbKKH4lev5UZfBShr8yj5YVYEaqklYzFupILcG9C6Wr0ftL/8AXjZlA5apfeOUmV65OJ9tZfK5hCt2ROfWSe1vciKy69A588t23P/QyiPZEQIf5ksmlM9oSqgAAAAASUVORK5CYII=);
}

.phoneIcon {
	background-image: url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABsAAAAdCAMAAABsU+d6AAAAM1BMVEUAAABZWlxZWlxZWlxZWlxZWlxZWlxZWlxZWlxZWlxZWlxZWlxZWlxZWlxZWlxZWlxZWlyk24wlAAAAEHRSTlMAECAwQFBgcICPn6+/z9/vIxqCigAAAJhJREFUeNqFktEOgyAMRSkwYGqh//+1I1Zhy+3wPDU5ubm26B6h9PqnPItstgpNOtlMnUqaN9whymbE5AaDeThs3IdLVp3ChG4qoIyvRJI6MleHBaDwbbqowbAIMi2Obb9S/lmDcolwN5XEfTpmAbHK3btQz6mG76dXWC4aykmjhYzOkvj/kN4A+pQ8owwnpFI1VOwDxo6OH16AECAQpSKnAAAAAElFTkSuQmCC);
}


.shortlistedIcon {
	background-image: url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABsAAAAbCAMAAAC6CgRnAAAAM1BMVEUAAABZWlxZWlxZWlxZWlxZWlxZWlxZWlxZWlxZWlxZWlxZWlxZWlxZWlxZWlxZWlxZWlyk24wlAAAAEHRSTlMAECAwQFBgcICPn6+/z9/vIxqCigAAAI1JREFUeAGt0dEKwyAMheHYWI02xrz/086KK2N4Lgb7L86FH4Ig/aMkEVHx5hr2pkKxKzRiT3urY+q1NdE5P1uZ1uIofJuW23zWeB1GHfX5zlVs9r7gd59G7AztdIJWGzbL0NgZWuoETRSbFmyWoR3O0C6jrYWYrfNjeZmpmrtbPegpZBE5KY3Nm7/b9QKTGQn9YN1AxAAAAABJRU5ErkJggg==);
}

.dismissedIcon {
	background-image: url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABsAAAAbCAMAAAC6CgRnAAAAM1BMVEUAAABZWlxZWlxZWlxZWlxZWlxZWlxZWlxZWlxZWlxZWlxZWlxZWlxZWlxZWlxZWlxZWlyk24wlAAAAEHRSTlMAECAwQFBgcICPn6+/z9/vIxqCigAAAJJJREFUeAGtz20KwzAIgGE/7GJXE73/aVcpC1uJ+7UXSsEHlMC/QhG4x0Sq1iMzmmPyHKi67SoCtPWBb5O4zOZeb6XBcdSmvbYtapMfhiGlQTxqs702HbVxcGkwWm2m158iax/GOh/BcgbN545wha8wJE3OGO51TYNlz6O2PEjBS+M8mN8qM8TK2Ed3hHXYlGH2AiF0CiJo/HSiAAAAAElFTkSuQmCC);
}

   
/* ----------------------------------  QA  --------------------------------------*/      

#qa{
width: 100%;
overflow: hidden;
-ms-flex: 1; 
-webkit-flex: 1; 
flex: 1; 
position: relative;
}   


#qaHeader{
text-align: center;
}


#qaHeader h3{
display: inline-block;
}


#qaHeader .super{
background-color: rgb(15,147,178);
color: rgb(230,230,230);
padding: 1px 6px 2px;
font-size: 10px;
margin: 0 0 0 0;
display: inline-block;
position: relative;
top: -7px;
left: 3px;
cursor: pointer;
}


#qaScrollable{
    position: absolute;
    height: calc(100% - 165px);
    width: calc(100% - 1px);
    overflow-y: auto;
    /* margin: 15px 0 23px 0; */
    padding-right: 10px;
    transition: height 0.3s;
    top: 35px;
    left: 0px;
}

.questionInputMinimized #qaScrollable {
height: calc(100% - 100px);
}

.qaBlock{
position: relative;
width: 100%;
border: 1px solid rgb(61,61,61);
margin: 0 10px 10px 0;
padding: 16px 34px 12px 16px;
overflow: hidden;
float: left;
/*background-color: rgba(15,147,178,1.0);*/
transition: background-color 0.7s;
}


.qaBlock .removeQa{
position: absolute;
top: 2px;
right: 10px;
cursor: pointer;
color: rgb(100,100,100);
font-weight: 400;
}

.qaBlock h5{
font-size: 12px;
font-style: italic;
font-weight: 700;
color: rgb(211, 211, 211);
}

.qaBlock .profile-pic.removed{
margin: 0 0 2px 0;
}


.qaBlockRight{
margin: 3px 0 0 0;
float: right;
width: calc(100% - 40px);
}

.qaBlock .profile-pic{
float: left;
width: 25px;
height: 25px;
background-size: contain;
box-shadow: inset 0px 0px 1px 1px rgb(239, 239, 239);
margin: 0 0 14px 0;
}




.qaBlock .profilePicLetter {
padding: 4px 0 0 0;
font-size: 14px;
}


.qaBlock.highlighted{
background-color: rgb(15,147,178);
}


.qaBlock h4{
float: left;
width: 100%;
font-size: 14px;
font-weight: 600;
color: rgb(190, 190, 190);
margin: 0 0 10px 0;
font-family: 'Open Sans', sans-serif;
}

.qaBlock h4 .author{
margin-left: 4px;
font-family: 'Lato', sans-serif;
font-weight: 700;
white-space: nowrap;

}


.qaBlock .author{
font-size: 11px;
color: rgb(88, 89, 91);
}

.qaBlock .reply .author{
display: -ms-flexbox;
display: -webkit-flex;
display: flex;
-webkit-flex-direction: row;
-ms-flex-direction: row;
flex-direction: row;
}

.qaBlock .break{
-ms-flex: 1; 
-webkit-flex: 1; 
flex: 1;
border-bottom: 1px solid rgb(50, 50, 50);
position: relative;
top: -3px;
}


.qaBlock .reply:last-child .break{
display: none;
}


.qaBlock .when{
font-size: 9px;
color: rgb(124, 124, 124);
margin: 2px 8px 0 4px;
font-weight: 400;
}

.qaBlock .reply{
font-size: 13px;
color: rgb(180, 180, 180);
margin: 0;
float: left;
clear: both;
width: 100%;
padding: 4px 0 12px 10px;
white-space: pre-line;
word-wrap: break-word;
}

.qaBlock .reply .body{
font-family: 'Open Sans', sans-serif;
line-height: 130%;
}

.qaReplyLink{
font-size: 11px;
color: rgb(15,147,178);
cursor: pointer;
float: left;
clear: left;
position: relative;
top: -10px;
left: 11px;
}


.qaReplyInput{
margin-top: 10px;
float: left;
width: 100%;
height: 78px;
overflow: hidden;
transition: all 0.5s;
}

.qaReplyInput.ng-hide{
height: 0;
margin-top: 0;
}  
  
  

.qaBlock .action-button{
float: right;
margin: 2px 0 3px 0;
}

.qaBlock textarea{
width: 100%;
height: 49px;
background-color: rgb(224, 224, 224);
color: rgb(30,30,30);
padding: 7px 10px;
font-size: 13px;

}


.qaNewQuestion {
padding-right: 20px;
transition: all 0.5s;
position: absolute;
bottom: 0;
margin: 0;
float: none;
}

.questionInputMinimized .qaNewQuestion{
padding: 7px;
height: 30px;
text-align: center;
cursor: pointer;
font-size: 12px;
/* background-color: rgb(40, 40, 40); */
color: rgb(190, 190, 190);
}

#hideQuestionInput{
font-size: 12px;
margin: 0 0 0 2px;
color: rgb(113, 113, 113);
cursor: pointer;
}

/*-
.questionInputMinmizied .qaNewQuestion.minimized textarea,
.qaNewQuestion.minimized .action-button{
display: none;
}*/





.notes .tooltip-hot {float: right; margin: 5px 20px 0 0;}

.notes-visibility {float: left; margin: 0 0 10px 0; padding: 12px; width: 271px;
 font-size: 12px; background-color: #719773; color: #FFF;}

.notes-visibility .close {float: right; clear: both; margin: 5px 0 0 0;
   text-decoration: underline; font-size: 11px; cursor: pointer;} 
 
.notes-wrapper{
width: 100%;
height: 100%;
padding: 10px 2% 0;
overflow: hidden; }

.notes-header {float: left;}
.notes .input-wrapper {margin: 10px 0 0 0; padding: 7px; background-color: #ddd; float: left; width: 275px; clear: left;}


.note-input.prompt{color: #999; font-style: italic;}

#notes{
height: 400px;
width: 100%;
position: absolute;
bottom: 0px;
background-color: rgba(30,30,30,0.8);
}


#notes-header{
height: 60px;
padding: 20px 0 20px 15px;
font-weight: bold;
}

#notes-port {
position: absolute;
bottom: 150px;
height: 190px;
width: 100%;
overflow-y: auto;
overflow-x: hidden;
font-size: 14px;
padding: 0 8px 0 20px;
line-height: 130%;
}

#notes-bottom {
position: absolute;
bottom: 0;
width: 100%;
height: 130px;
padding: 15px;
border-top: 1px solid #444;
margin-top: 20px;
}

#notes .status-holder{
text-align: center;
padding: 15px 10px;
}

#notes .status-holder span{
color: rgb(169, 169, 169);
vertical-align: top;
}

#notes .status-holder img{
margin: 2px 0 0 7px;
}


.note .author{
font-weight: bold;
color: rgb(148,148,148);
margin: 0 7px 0 0px;
font-size: 14px;
}

.note-input{
width: 100%;
height: 70px;
margin: 0 0 5px 0;
box-sizing: border-box;
padding: 5px;
font-size: 14px;
}

#use-enter-send{
font-size: 11px;
float: right;
margin: 2px 4px;
}


.note-body{
white-space: pre-wrap;
word-wrap: break-word;
}


.notes-log {padding: 4px 0 0 0;}
.notes-port .show-hidden{color: #777; cursor: pointer; border-bottom: 1px dashed #777;
   margin: 10px 0 0 128px; font-size: 12px;}
.add-note{float:right; margin: 4px 25px 12px 0; clear: right;}
   
.note {
margin: 0 0 15px 0;
overflow: hidden;
position: relative;
}



.note .when{
margin: -2px 5px 0 0;
float: right;
clear: both;
font-size: 10px;
cursor: default;
color: rgba(252,91,90,0.6);
}

.note .remove{
height: 16px;
width: 16px;
display: none;
cursor: pointer;
background: url("/st/images/trash_icon_white.png")no-repeat 0 0;
position: absolute;
bottom: 0;
right: 0;
}

#notes.is-support .note:hover .remove{
display:block;
}   

.note .body{word-wrap: break-word; white-space: pre-wrap;}
.note.hidden {display: none;}
.note.unhidden {display: block !important; color: #aaa !important;}
.note.unhidden .author{color: #aaa !important;}
.note.unhidden .remove{display: none !important;}
.notes .spinner-holder {clear: left; text-align: center; width: 100%;}
.notes .unavailable {float: left; clear: left; font-size: 12px; margin: 10px 0; color: rgb(161, 22, 22);}

.notes .send .label {margin: 3px 3px 0 0;}


#notes .action-button{
width: 65px;
padding: 2px;
font-size: 12px;
margin: 0 0 0 5px;
}


#filesContent{
padding-left: 65px;
}

.cardContent{
position: absolute;
top: 41px;
z-index: 3;
width: calc(100% - 9px);
height: calc(100% - 55px);
overflow-y: auto;
overflow-x: hidden;
padding: 0 0 0 65px;
}



#filesContent h2,
#bidsSummary h2,
#reviewContent h2,
#payContent h2,
#paymentsContent h2{
margin: 15px 0 50px 0;
}




#files .add-files-button{
margin: 0;
vertical-align:middle;
display:inline-block;
}

#files .hint{
display:inline-block;
vertical-align:middle;
float: left;
clear: both;
margin: -3px 0 7px 50px;
}

#files .guide{
clear: both;
margin: 20px 0 0 0;
float: left;
}


.raw-grid{overflow: hidden; min-height: 100px;}

.assets-port{
position: absolute;
top: 180px;
bottom: 5px;
overflow-y: auto;
padding: 0 40px 0 0;
}

#files .isEditor .assets-port{
top: 140px;
}

.asset {
float: left;
margin: 0 20px 20px 0;
}  

.thumbnail {
min-width: 30px;
position: relative;
}

img.asset_thumb {height: 80px;display:block;}
img.asset_thumb.openable {cursor:pointer;}
.thumbnail .title {padding: 1px 7px 0 7px; height: 21px; min-width: 11px;
   -moz-box-sizing:content-box; box-sizing: content-box;
   background-color: #000; position: absolute; color: #fff; overflow: hidden;
   opacity: 0.66; filter: alpha(opacity=66);}
.thumbnail .remove_icon,.play_asset {position: absolute; cursor: pointer; display: none;}
.thumbnail .remove_icon  {bottom: 1px; right: 1px; height: 20px;}

.thumbnail .play_asset  {
top: 50%;
left: 50%;
height: 36px;
transform: translateY(-50%) translateX(-50%);
-webkit-transform: translateY(-50%) translateX(-50%);
-ms-transform: translateY(-50%) translateX(-50%);
}

.thumbnail .downloadLink{
display: none;
background: url('/st/images/download_icon.png') no-repeat 0 0;
opacity: 0.3;
height: 25px;
width: 25px;
position: absolute;
bottom: 0;
left: 0;
transition: opacity 0.2s;
}

.nonMediaAsset .thumbnail .downloadLink{
bottom: 15px;
}


.thumbnail .downloadLink:hover{
opacity: 0.9;
}


.project .thumbnail:hover img {
display: block;
}

.thumbUnderBar .download_link {text-align:right;color: #999;font-size: 12px;text-decoration: underline;cursor: pointer;float:right;margin-top:3px;}

.thumbnail .extension {
position: absolute;
left: 0;
top: 30px;
width: 65px;
text-align: center;
font-size: 16px;
font-weight: bold;
color: #555;
}




/* ------------------------------- bids summary ---------------------------- */   

#bidsSummaryContent .vp-scroll-bar{
overflow-y: auto;
height: calc(100% - 106px);
float: left;
margin-top: 10px;
overflow-x: hidden;
width: 100%;
}


#bidHelpContainer{
margin: 20px 0 0 0;
overflow: hidden;
}

#bidHelpContainer h3{
float: left;
font-size: 18px;
}

#bidHelpContainer span.blue-link{
float: left;
clear: right;
margin: 3px 0 0 12px;
font-size: 14px;
border-bottom: 1px solid rgb(31, 97, 113);
text-decoration: none;
}

#bidHelpContainer .spinner-snake{
float: left;
margin: 12px 10px;
}

#bidHelpContainer .complete{
float: left;
margin: 11px 14px;
color: rgb(15,147,178);
font-size: 14px;
}


#bidsSummary h2{
margin-bottom: 30px;
}

#bidsSummary h3{
margin: 0 0 10px 0;
font-size: 18px;
height: 20px;
overflow: hidden;
}

#bidsSummary h3.ng-hide{
height: 0;
}


#bidsSummary h3.muted{
color: rgb(180,180,180);
}



.bidsNotification{
position: relative;
background-color: rgb(43, 43, 43);
max-height: 100%;
margin: 0 0 25px 0;
width: calc(85% + 20px);
overflow: hidden;
transition: all 0.4s;
}

.bidsNotification.ng-hide{
max-height: 0;
margin: 0;
}

.bidsNotification .pixieFaceRight{
float: left;
clear: both;
margin: 20px 13px 0 25px;
}    

.bidsNotificationRight{
float: left;
margin: 30px 0 0 0;
}

.bidsNotification .closeX{
position: absolute;
top: 3px;
right: 10px;
}

.bidsNotification h4{
font-weight: 300;
font-size: 19px;
float: left;
color: rgb(220,220,220);
}

.bidsNotification ul{
margin: 10px 0 20px 23px;
float: left;
clear: left;
}

.bidsNotification li{
border-bottom: 1px dashed rgb(128, 128, 128);
padding-bottom: 1px;
font-size: 14px;
margin: 0 0 5px 0;
float: left;
clear: both;
cursor: pointer;
color: rgb(218, 218, 218);
transition: color 0.1s;
}

.bidsNotification li:hover{
color: rgb(255,255,255);
}


.pixieFaceRight{
background: url('/st/images/pixie_face_right.png') no-repeat 0 0;
width: 51px;
height: 57px;
}

#hiddenBidsLink {
font-size: 14px !important;
margin-top: 30px !important;
cursor: pointer !important;
width: 100%;
}

#hiddenBidsLink:hover{
color: rgb(34, 171, 203) !important;
}

.bidList{
margin-bottom: 20px;
overflow: hidden;
transition: all 0.5s;
}    

.biddingComplete .bid-summary{
color: rgb(150,150,150);
}

.bid-summary{
position: relative;
clear: left;
width: 85%;
padding: 0 26px 0 21px;
overflow: hidden;
border: 1px solid rgb(63, 63, 63);
cursor: pointer;
font-size: 20px;
color: rgb(150, 150, 150);
transition: all 0.3s;
}



.bid-summary,
.bid-summary.ng-enter.ng-enter-active,
.bid-summary.ng-leave{
margin-bottom: 12px;
margin-left: 10px;
padding-top: 9px;
opacity: 1.0;
height: 75px;
padding: 12px 16px;
}

.bid-summary.ng-enter,
.bid-summary.ng-leave.ng-leave-active{
height: 0;
margin-bottom: 0;
padding-top: 0;
opacity: 0.0;
}


.bid-summary .flag{
float: right;
position: absolute;
top: 8px;
right: 10px;
}



.bid-summary .action-button{
float: right;
margin: 9px 17px;
opacity: 0;
transition: opacity 0.2s;
}

#invitedCreators .action-button.small{
opacity: 1.0;
margin: 10px;
width: 112px;
padding: 0.5em 0 0.6em;
}

.bid-summary .creatorId{
position: absolute;
    bottom: 1px;
    right: 3px;
    font-size: 12px;
}

#shortlist.biddingComplete .bid-summary .action-button{
display: none !important;
}

.bid-summary:hover .action-button{
opacity: 1.0;
}



.bid-summary .profile-pic{
float: left;
width: 50px;
height: 50px;
background-size: contain;
box-shadow: inset 0px 0px 0px 2px rgb(138, 138, 138);
transition: all 0.5s;
}

.biddingComplete .profile-pic{
box-shadow: inset 0px 0px 0px 2px rgb(150, 150, 150);
}

.bid-summary.winningBid .profile-pic{
box-shadow: inset 0px 0px 0px 2px rgb(215, 215, 215);
}







.bid-summary .bidderBadges .badge-wrapper{
float: left;
width: 46px;
}

.bid-summary .priceStatus{
margin: 5px 13px 0 0;
float: right;
width: 120px;
text-align: right;
line-height: 100%;
    color: rgb(200, 200, 200);
}

.bid-summary .bidPrice{
}

.bid-summary .bidStatus{
display: none;
margin: 5px 0 0 0;
font-size: 16px;
}

.bid-summary .bidTiming{
font-size: 12px;
color: rgb(99, 98, 98);
margin: 5px 0 0 0 ;
}

.bid-summary.winningBid{
color: rgb(230,230,230);
border-color: rgb(142, 142, 142);
} 

.bid-summary.winningBid .bidStatus{
display: block;
}

.bid-summary:hover{
color: rgb(15,147,178);
border-color: rgb(15,147,178);
}


/*
.bid-summary:hover .profile-pic{
box-shadow: inset 0px 0px 0px 2px rgb(15,147,178);
}
*/




.bid-summary .nameLocation{
float: left;
width: 180px;
margin: 0 16px;
}

.bid-summary h5,
.bid-summary h6{
text-overflow: ellipsis;
white-space: nowrap;
overflow: hidden;
}


.bid-summary h5{
font-size: 18px;
margin: 2px 0 3px 0;
color: rgb(150, 150, 150);
}

.bid-summary h6{
font-size: 14px;
color: rgb(100, 100, 100);
}

.bid-summary .thumbnail{
width: 92px;
height: 52px;
float: left;
background-size: cover;
background-position: 50% 50%;
}

.bid-summary .thumbnailPlayIcon{

background: url('/st/images/play_outline_42x42.png') no-repeat;
width: 42px;
height: 42px;
position: absolute;
    top: 5px;
    left: 25px;
    opacity: 0.8;
}

.bid-summary .thumbnail:hover .thumbnailPlayIcon{
opacity: 1.0;
}

.bid-summary .bidderBadges{
width: calc(100% - 620px);
float: left;
height: 42px;
overflow: hidden;
margin: 7px 20px;
}

.bid-summary .recommended{
float: left;
margin: 13px;
}

.bid-summary .recommendedCount{
font-size: 17px;
color: rgb(230, 230, 230);
margin: 0 4px 0 0;
}

.bid-summary .thumb_19x20 {
display: inline-block;
position: relative;
top: 1px;
width: 20px;
height: 20px;
}


.thumb_19x20 {
	background-image: url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABQAAAAUCAMAAAC6V+0/AAAAkFBMVEUAAADl5eXS0tL29vb29vbU1NTU1NTU1NTU1NTT09PU1NTU1NTU1NTR0dHPz8/29vbU1NTU1NTU1NT39/fT09PQ0NDT09PU1NTU1NTU1NTU1NTT09PU1NT29vbT09Py8vLS0tLBwcH29vbU1NT29vbT09PU1NT19fX29vb29vb19fX19fX19fXz8/P29vbU1NSMOwP2AAAALnRSTlMAXzjtguz7iHpRsINyJw749vHNjmww4d3TycGbkotBOB4I7ue8p51+aGZLLxkV3UgargAAAKFJREFUGNNt0NcOwjAMBVC3kGaRdNI92bP+/7+jkRCChPt4fCVbhncUZQqsTITEQWbhFnvdIP/F0UCdWNWIAWwCC4v2D+5NE6WUjE8Aj/twux682F+25YSQCIsRzuEunFce+p9DCIX1vOQbIW9dVMhdzALtoqjAxZi66GPv4ibQLooEbFQUzVcvBkMPRXMSFcFImtmzS9O0G1hZJvWRcm3sBWrTEwLVhNnzAAAAAElFTkSuQmCC);
}


#invitedCreators .instruction{


}

#invitedCreators .instruction h3{
float: left;
color: rgb(100, 100, 100);
    font-weight: 600;
    font-size: 19px;
    height: auto
}

#invitedCreators .instruction-left{
float: left;
width: 380px;   
margin-left: 10px;
}

#invitedCreators .instruction-right{
float: right;
width: 412px;
margin-right: 15%
}


#invitedCreators .instruction .pointer{
border: 1px solid rgb(70, 70, 70);
width: 80px;
height: 37px;
border-width: 1px 1px 0 0;
float: left;
margin: 13px 0 15px 12px;
}


#invitedCreatorsNotBid{
margin: 33px 0 15px 0 !important;
}


.invite-summary {
    float: left;
height: 116px;
margin-bottom: 25px;
}

.invite-summary h5{
font-size: 19px;
}

.invite-summary .recommended{
margin: 15px 0;
}

.invite-summary .nameLocation {
width: 220px;
}    

.invite-summary h6{
font-size: 15px;
}

.invite-summary .profile-pic{

    margin: 5px 1px;
}

.invite-summary .thumbnail{
width: 184px;
height: 90px;

}

.invite-summary .play-icon{
width: 60px;
position: absolute;
left: 50%;
top: 50%;
opacity: 0.8;
transform: translateX(-50%) translateY(-50%);
transition: opacity 0.3s;
}

.invite-summary:hover .play-icon{
opacity: 1.0;
}


.invite-summary .actions{
float: right;
margin: 5px;
}

.invite-summary .grey-blue-link{
font-size: 12px;
float: right;
clear: both;
margin: 0 10px;
}

.invite-summary.deselected{
height: 40px;
padding: 5px;
}

.invite-summary.deselected .profile-pic,
.invite-summary.deselected .action-button,
.invite-summary.deselected h6,
.invite-summary.deselected .thumbnail{
display: none;
}

.invite-summary.deselected h5{
color: rgb(100, 100, 100);
}


#bidHelpMore{
float: left;
width: 650px;
clear: both;
border-top: 1px solid rgb(60,60,60);
margin-top: 5px;
max-height: 110px;
transition: all 0.4s;
}

#bidHelpMore.ng-hide{
max-height: 0;
margin-top: 0;
border-color: rgb(30,30,30);
}

#bidHelpMore p{
float: left;
font-size: 14px;
line-height: 170%;
margin: 7px 0 13px 0;
color: rgb(220,220,220);
}



#bidHelpMore .action-button{
float: left;
font-size: 12px;
font-weight: normal;
padding: 0.5em 1.2em;
margin: 6px 0 0 15px;
}

#invitedCreators h3.instruction{
font-size: 18px;
height: auto;
margin: 0 0 40px 0;
color: rgb(220, 220, 220);
line-height: 140%;
}









#messageModal{
padding: 45px 60px;
font-family: 'Open Sans', sans-serif;
}

#messageModal .closeX{
right: 8px;
left: initial;
top: 1px;
}


#messageModal h3{
font-size: 12px;
float: left;
clear: both;
width: 60px;
color: rgb(200, 200, 200);
margin: 0 0 10px;
}


#messageModal .field{
font-size: 14px;
float: left;
padding-left: 11px;
margin-bottom: 22px;
}

#messageModal input{
border-color: rgb(55, 55, 55); 
width: calc(100% - 60px);
padding: 7px 0;
box-sizing: border-box;
    position: relative;
    top: -10px;
}    


#messageModal textarea{
width: 100%;
height: 275px;
margin: 0 0px 13px;
border-color: rgb(55, 55, 55);
    font-size: 14px;
    padding: 12px 15px;
}


#messageModal .action-button{
float: right;
}



#messageModal .spinner-blocks{
float: right;
margin: 11px 16px;
}


#messageModalHint{
float: left;
    font-size: 13px;
    color: rgb(172, 172, 172);
    width: calc(100% - 90px);
    margin-top: -5px;
    transition: all 0.3s;
}

#messageModalHint.ng-hide{
opacity: 0;
}

#cancelProject{
float: right;
margin: 50px 15% 0 0;
clear: both;
font-size: 14px;
color: rgb(160, 160, 160);
}


#cancelProject h3{
font-size: 14px;
border-bottom: 1px solid rgb(46, 46, 46);
float: right;
clear: both;
color: rgb(110, 110, 110);
cursor: pointer;
}

#cancelProject h3:hover{
color: rgb(130, 130, 130);
}

#cancelProject .closeX{
float: left;
color: rgb(80, 80, 80);
}


.cancelProjectMoreInfo{
width: 320px;
clear: both;
float: right;
overflow: hidden;
max-height: 400px;
transition: all 0.3s;
}

.cancelProjectMoreInfo.ng-hide{
max-height: 0;
}

#cancelProjectQuestion{
    margin: 12px 0 20px 0;
}

#cancelProject .cancelReason{
float: left;
clear: both;
margin: 0 0 10px 10px;
}

#cancelProject .checkBoxLabel{
display: inline-block;
position: relative;
top: -2px;
left: 5px;
}

#cancelProject .cancelProjectWarning{
float: left;
clear: both;
font-size: 12px;
margin: 7px 0 6px 0px;
background-color: rgb(38, 38, 38);
padding: 10px 15px;
}

#cancelProject .notCancelable{
font-size: 14px;
padding: 12px 18px;
}

#cancelProject .action-button{
float: left;
clear: both;
margin: 10px 0;
}

#cancelProject .spinner-blocks{
float: left;
margin: 20px 10px;
}


#cancelProject .confirmation,
#cancelProject .error{
float: left;
clear: both;
}


@-moz-document url-prefix() {
   #bidDetail .cardContent{
      padding-right: 0px;
   }
}

.vidLink{
color: rgb(155, 155, 155);
cursor: pointer;
border-bottom: 1px dotted rgb(111, 111, 111);
transition: all 0.3s;
}

.vidLink:hover{
color: rgb(34, 171, 203);
border-color: rgb(34, 171, 203);
}


/* ----------------------------------------  Bidder Detail  -------------------------------------------------- */

.bidder-detail{
padding: 7px 20px 0 0;
}

.bidder-detail-content, .bidder-reel-link-wrapper{
padding-left: 13px;
}


.bid-head, .message, #myBid{
padding-left: 20px;
}

.bidder-specialties{
font-size: 12px;
font-style: italic;
margin: 10px 0 15px 0;
line-height: 150%;
}

.bidder-badges-wrapper, .bidder-reel-link-wrapper{
float: left;
clear: left;
padding-top: 10px;
padding-bottom: 10px;
margin-top: 20px;
width: 100%;
}

.bidder-badges-wrapper{
border-width: 1px 0;
border-style: solid;
border-color: rgb(43, 43, 43);
}

.bidder-detail .badge{
padding-left: 56px;
cursor: help;
}

.show-more-badges{
float: left;
clear: left;
color: rgb(100,100,100);
font-size: 12px;
padding: 5px 0 0 18px;
cursor: pointer;
}



.bidder-reel-link-wrapper{
margin-top: 0px;
}

.bidder-reel-link{

padding: 4px 26px 6px 12px;
border: 2px solid rgb(15,147,178);
font-size: 16px;
color: rgb(15,147,178);
background-image: url('/st/images/watch_reel.png');
background-repeat: no-repeat;
background-position: right 10px top 9px;
width: 116px;
cursor: pointer;
}


.bidder-info{
float: left;
clear: left;
font-size: 12px;
margin-top: 5px;
color: rgb(200,200,200);
padding-left: 17px;
width: 100%;
overflow: hidden;
}


.bidder-loc{

background: url('/st/images/sprite.png') no-repeat 0 -382px;
text-overflow: ellipsis;
white-space: nowrap;
}

.bidder-est{
background: url('/st/images/sprite.png') no-repeat 0 -399px;

}

.bidder-recommended{
background: url('/st/images/sprite.png') no-repeat 0 -416px;
cursor: pointer;
}

.messageLeft .bidder-detail.hasProfile{

}

.messageLeft .bidder-detail .profile-pic{
width: 70px;
height: 70px;
margin-bottom: 2px;
cursor: pointer;
}

.messageLeft .bidder-detail .bidder-name{
font-weight: 600;
margin: 11px 0 2px 0;
font-size: 15px;
text-overflow: ellipsis;
white-space: nowrap;
width: 100%;
overflow: hidden;
cursor: pointer;
}


/* ----------------------------------- bid ---------------------------- */   
 
#bidsSummary .cardContent{
overflow: hidden;
}  
  
 
.bidder-nav-wrapper{ 
float: right; 
clear: both;
overflow: hidden;
max-height: calc(100% - 280px);
margin-bottom: 10px;
}


#bidActionsTopRight{
float: right;
margin-right: 8px;
width: 130px;
text-align: right;
margin-bottom: 15px;
    margin-top: 5px;
transition: all 0.3s;
}

#bidActionsTopRight.ng-hide{
opacity: 0;
margin-bottom: 0;
}


#bidActionsTopRight.acceptingBidConfirmation{
opacity: 0.3;
}


#bidActionsTopRight .linkStatusContainer{
float: right;
clear: both;
height: 17px;
margin: 0 20px 4px 0;
overflow: hidden;
transition: all 0.3s;
}

#bidActionsTopRight .linkStatusContainer.ng-hide{
height: 0;
}

#bidActionsTopRight .link{
font-size: 14px;
height: 100%;
transition: all 0.4s;
}

#bidActionsTopRight .link.ng-hide{
margin-top: -17px;
}

#bidActionsTopRight .linkStatus{
color: rgb(220,220,220);
font-size: 13px;
height: 100%;
transition: all 0.4s;
cursor: pointer;
}

#bidActionsTopRight .linkStatus:hover{
color: rgb(34, 171, 203);
}

#bidActionsTopRight .linkStatus span{
margin: 0 0 0 4px;
}

#bidActionsTopRight .linkStatus.ng-hide{
margin-top: 17px;
}

#AcceptBidLink{
margin: 0 0 15px 0;
padding-left: 1em;
}

#AcceptBidLink .downChevronWhite{
display: inline-block;
margin: 0 4px 0 0;
}


#bidTiming{
background-color: rgb(48, 48, 48);
padding: 8px 15px;
font-size: 13px;
color: rgb(179, 179, 179);
float: left;
margin: 2px 0 0 15px;
}

#bidTiming .flag{
display: inline-block;
margin: 0px 0 0 2px;
}

#bidContent h2 .vpFee{
font-size: 14px;
color: rgb(160,160,160);
font-weight: 400;
margin-left: 5px
}

#bidContent h2 {
float: left;


}





#bidDetailFlex{
float: left;
clear: left;
max-width: 1200px;
height: 100%;
width: 100%;
display: -ms-flexbox;
display: -webkit-flex;
display: flex;
-webkit-flex-direction: column;
-ms-flex-direction: column;
flex-direction: column;

}

#bidDetailHeader{
border-bottom: 1px solid rgb(63, 63, 63);
min-height: 32px;
padding-top: 20px;
transition: all 0.4s;
-ms-flex: 0 1 auto;
-webkit-flex: 0 1 auto;
flex: 0 1 auto;
}

#bidDetailHeader.empty{
border-bottom-color: transparent;
padding-bottom: 0;
}

/*
#bidDetailHeadSpacer .messageLeft{
border-right: 1px solid rgb(63, 63, 63);
width: 187px;
}*/


#bidDetailScroll{
-ms-flex: 2; 
-webkit-flex: 2; 
flex: 2; 
/*padding-right: 15px;*/
width: 100%;
overflow-y: auto;
overflow-x: hidden;
max-width: 1200px;

}

#bidDMs{
float: left;
width: 100%;
margin-top: 20px;
}

.bid-video{
float: left;
position: relative;
width: 145px;
height: 82px;
background-size: cover;
background-position: center, center;
border: 2px solid rgb(88, 89, 91);
margin: 0 0 15px 0;
cursor: pointer;
transition: border-color 0.3s;
}


.bid-video:hover, .bid-video.hovered{
border-color: rgb(34, 171, 203);
}


.bid-video .playIcon{
position: absolute;
top: 19px;
left: 49px;
}

.bid-video:hover .playIcon,
.bid-video:hover .playIconTriangle,
.bid-video.hovered .playIcon,
.bid-video.hovered .playIconTriangle
{
border-color: rgb(34, 171, 203);
}




.bid-scroll h2{
font-size: 25px;
margin: 0 0 20px;
}

#bidContent h3{
color: rgb(15, 147, 178);
font-size: 17px;
font-weight: 700;
margin-bottom: 11px;
height: 22px;
overflow: hidden;
transition: all 0.8s;
}


#bidContent h3.declined{
color: rgb(147,147,147);
}

#bidContent h3.ng-hide{
height: 0;
margin-bottom: 0;
}

#bidContent h4{
font-size: 19px;
font-weight: 700;
}

#bidContent h3:hover,
#bidContent h3.selected{
color: rgb(34, 171, 203);
}

.bid-head{
float: left;
clear: both;
width: 100%;
overflow: hidden;
transition: max-height 0.4s;
}

.bid-head.ng-hide{
max-height: 0;
}


#bidActions{
float: left;
clear: both;
overflow: hidden;
max-height: 320px;
margin: 25px 0;
transition: all 0.7s linear;
}


#bidActions.ng-hide{
max-height: 0;
margin: 0;
}



#bidActions h3{
cursor: pointer;
display: block;
float: left;
}


#bidActions .downArrow{

margin: 0px 2px;
}

#bidActionsTop.accepting .downArrow{
transform: rotate(180deg);
}

#bidActions span.wording{
float: left;
font-size: 13px;
margin: 4px 13px 0 0;
color: rgb(220,220,220);
}


#shortlistBid{
float: left;
margin-top: -4px;
margin-right: 13px;
}






#bidActions .shortlisted .blue-link{
font-size: 12px;
padding: 0px 0 0 4px;
display: inline;
}

#bidActionsTop h3{
margin-right: 15px;
}

#bidActionsTop div,
#bidActionsTop span{
max-width: 150px;
white-space: nowrap;
display: inline-block;
overflow: hidden;
transition: all 0.4s;
}

#bidActionsTop span.ng-hide,
#bidActionsTop div.ng-hide{
max-width: 0;
margin-left: 0;
margin-right: 0;
padding-left: 0;
padding-right: 0;
}

#changeBidAmountLink{
font-size: 14px;
font-weight: 400;
}

#updateBidReward{
padding: 0 0 10px 0;
overflow: hidden;
float: left;
height: 60px;
margin-left: -25px;
transition: all 0.3s;
}

#updateBidReward.ng-hide{
height: 0;
padding: 0;
}

#updateBidReward .label{
float: left;
font-size: 14px;
margin: 9px 4px 0 0;
}

#updateBidReward .dollarLabel{
float: left;
font-size: 24px;
margin: 0 5px;
}


#updateBidReward input{
float: left;
padding: 6px 10px;
width: 70px;
text-align: right;
}

#updateBidReward .action-button{
float: left;
margin: 0 6px 0 8px;
}

#updateBidReward .spinner-blocks{
float: left;
margin: 12px;
}



#updateBidReward .confirmationMessage{
float: left;
margin: 0px 0 0 14px;
font-size: 14px;
color: rgb(160,160,160);
}

#updateBidReward .closeX{
float: left;
position: relative;
font-size: 12px;
top: -5px;
transform: scale(1.2,1.0);
cursor: pointer;
}

#bidHeadCreator{
margin-bottom: 20px;
max-height: 200px;
}

#bidHeadCreator.ng-hide{
max-height: 0;
}


#bidHeadCreator h3{
color: inherit;
font-size: 20px;
}

#bidsStatus{
float: right;
width: 770px;
padding: 0 60px 0 0;
}

#bidsStatus .row{
float: right;
clear: both;
margin: 0 0 9px 0;
}

#bidsStatus .row:last-child{
margin-bottom: 0;
}

#bidsStatus .rowHead{
float: right;
width: 175px;
margin: 0 6px 0 0;
}

#bidsStatus .label{
color: rgb(191, 191, 191);
font-size: 12px;
background-color: rgb(50, 50, 50);
width: 100%;
font-family: 'Open Sans', sans-serif;
font-weight: 600;
padding: 10px 0 9px;
}


#bidsStatus .value,
#bidsStatus .columnHead {
float: right;
margin: 0 0 0 13px;
width: 135px;
min-height: 1px;

}

#bidsStatus .columnHead .icon{
padding-top: 33px;
background-repeat: no-repeat;
background-position-x: center;
}

#bidsStatus .columnHead .icon.viewedIcon{
background-position-y: 7px;
}

#bidsStatus .label,
#bidsStatus .value{
text-align: center;
}

#bidsStatus .value{
padding: 7px 0;
}


.msgWrapper{
max-height: 300px;
overflow: hidden;
transition: all 2s;
}


.bidding .msgVideosWrapper{
margin-top: 43px;
}

.msgContent{
float: left;
width: 100%;
}



.firstBidMessage{
height: auto;
border-width: 0 0 1px 0;
border-style: solid;
margin-bottom: 10px;
border-color: rgb(63,63,63);
padding-left: 20px;
position: relative;
}


.firstBidMessage .messageRight{
border-left: 1px solid rgb(63,63,63);
height: 100%;
position: relative;
    left: -1px;
}





.firstBidMessage .msgText{
border: none;
padding-top: 0;
}

.firstBidMessage div.msgText{
margin-top: 20px;
float: left;
clear: both;
width: 100%;
}

.firstBidMessage .msgWrapper{
height: 100%;
}


.firstBidMessage .msgWrapper.expandMessage{
max-height: 20000px !important;
}

#firstBidText{
overflow: hidden;
max-height: 10000px;
min-height: 0;
margin: 15px 0;
padding: 0;
transition: all 2.5s;
}

#firstBidText.matchHeight{
min-height: 395px;
max-height: 395px;
}


#firstBidTextAndForm{
position: relative;
height: 100%;
}


.message{
float: left;
width: 100%;
}


.messageLeft{
width: 166px;
min-height: 20px;
float: left;
}

.messageRight{
width: calc(100% - 175px);
min-height: 20px;
float: left;
padding-left: 20px;
}

.dm .messageRight{
border-bottom: 1px solid rgb(48,48,48);
}

.messageRight.allContentsFit .messageSeeMore{
display: none !important;
}

.messageSeeMore{
clear: both;
margin: 9px 0 10px 0;
display: block;
text-decoration: none;
font-size: 14px;
}

.messageLeft .profile-pic{
width: 50px;
height: 50px;
background-repeat: no-repeat;
background-position: center;
background-size: contain;
box-shadow: inset 0px 0px 0px 2px rgb(231, 231, 231);
}

.profilePicLetter{
background-color: rgb(50, 50, 50);
text-align: center;
padding: 6px 0 0 0;
font-size: 30px;
font-weight: 700;
}

.messageLeft .messageAuthor{
padding: 20px 0 0 24px;
}


.msg-body{
float: left;
width: 100%;
white-space: pre-line;
word-wrap: break-word;
line-height: 150%;
margin: 0;
font-size: 14px;
color: rgb(220, 220, 220);
font-family: 'Open Sans', sans-serif;
}

.msgText{
float: left;
width: calc(100% - 255px);
padding: 15px 0 12px 2px;
min-height: 80px;
}

.msgWhen{
clear: both;
display: block;
font-size: 12px;
color: rgb(95, 95, 95);
}

.msg-videos{
float: right;
padding: 25px 20px 0 0;
}

.msg-video{
margin: 0 0 15px 0;
float: left;
}

.msg-video img.asset_thumb{
height: auto;
display: block;
width: 145px;
}

.dm .msg-video img.asset_thumb,
#bidMessageReply .msg-video img.asset_thumb{
width: 100px;
}

.msg-video img.thumbnail-file-icon{
width: 80px !important;
}

.dm .thumbnail .title{
font-size: 13px;
padding: 1px 5px 0 4px;
height: 19px;
}


.msg-video img.asset_thumb.incompleteAsset{
width: 80px;
}

#bidHeadBuyerLeft{
float: left;
width: calc(100% - 420px);
}

#bidStatus{
float: left;
clear: left;
overflow: hidden;
max-height: 100px;
margin: 20px 0;
transition: all 0.7s;
}

#bidStatus.ng-hide{
max-height: 0;
margin: 0;
}


#bidStatus h5{
color: rgb(193, 193, 193);
font-size: 15px;
margin-top: 6px;
margin-left: 27px;
}


#acceptBidConfirmation{
float: left;
clear: both;
width: 100%;
max-height: 350px;
margin: 0;
overflow: hidden;
transition: max-height 0.5s;
}

#acceptBidConfirmation.ng-hide{
max-height: 0;
}



#acceptBidConfirmation .closeX{
position: absolute;
top: 0px;
left: 6px;
font-size: 14px;
}


#acceptBidBreakdown{
float: left;
clear: left;
font-size: 13px;
color: rgb(160,160,160);

}
                     
#acceptBidBreakdown .row{
float: left;
clear: left;
width: 100%;
}   


#acceptBidBreakdown .labels{
float: left;
}   

#acceptBidBreakdown .values{
float: left;
}     

#acceptBidBreakdown .item{
margin: 0 0 5px;
} 

#acceptBidBreakdown .values .item{
text-align: right;
padding-left: 55px;
}

#acceptBidBreakdown .item.total{
border-top: 1px solid rgb(68, 68, 68);
padding-top: 5px;
}

#acceptBidStatementWrapper{
float: left;
clear: left;
margin: 0 0 10px 0;

}

#acceptBidStatement{
float: left;
clear: left;
font-size: 15px;
line-height: 150%;
margin: 10px 0 10px 0;
text-align: justify;
}           

#acceptBidStatementWrapper .action-button{
clear: both; 
}

#acceptBidStatementWrapper .cancel{
float: right;
font-size: 13px;
color: rgb(111, 111, 111);
margin: 16px 12px 0 0;
cursor: pointer;
text-decoration: underline;

}

#acceptBidVpFeeExplanation{
position: relative;
    margin: 7px 0 10px 0;
    float: left;
    clear: left;
    border: 2px solid rgb(50,50,50);
    padding: 12px 12px 18px 12px;
    font-size: 14px;
    width: 100%;
    line-height: 150%;
    color: rgb(210, 210, 210);
    max-height: 130px;
    overflow: hidden;
    transition: 0.4s all;
    box-sizing: border-box;
}

#acceptBidVpFeeExplanation i{
font-weight: 700;
margin-bottom: 3px;
    display: inline-block;
}

#acceptBidVpFeeExplanation.ng-hide{
max-height: 0;
padding: 0 10px;
margin: 0;
}

.bid-head .inner{
width: calc(100% - 230px);
overflow: hidden;
max-height: 120px;
transition: 0.4s all;
}

.bid-head .inner.ng-hide{
max-height: 0;
}



#bidMessageReply{
margin-top: 20px;
}

#bidMessageReply .spinner-blocks{
margin-left: calc(50% - 150px);
margin-top: 30px;
}

#bidMessageReply h4{
margin: 10px 0 10px 0;
}

#bidMessageForm{
width: calc(100% - 255px);
float: left;
}

#bidMessageForm .action-button{
float: right;
margin: 7px 0 0 0;
}

#bidMessageForm textarea{
width: 100%;
max-width: 100%;
height: 70px;
margin: 0px;
}

#bidMessageReply .msgVideosWrapper {
margin-top: 0;
}

#messagingBlocked{
padding: 15px 20px;
background-color: rgb(50,50,50);
margin: 30px 0 20px 24px;
font-size: 14px;
line-height: 150%;
}

#addFilesToMessage{
float: right;
cursor: pointer;
margin: 15px 12px 0 0;
font-size: 13px;
color: rgb(241, 87, 86);
}

#addFilesToMessage:hover{
color: rgb(252,91,90);
}


/* ------------------------------- bid input ---------------------------- */


#bidContent{
overflow: hidden;
}

#myBid{
height: calc(100% - 100px);
margin-top: 55px;
border-top: 1px solid rgb(61, 61, 61);
width: calc(100% - 55px);
padding-top: 5px;
}

#myBid .messageRight,
#myBid .msgText{
height: 100%;
border-bottom: none;
}

#bidForm{
font-family: 'Open Sans';
}

#bidMessageText{
position: absolute;
top: 35px;
left: 0;
float: right;
height: 400px;
width: 100%;
padding: 7px 12px;
line-height: 150%;
color: rgb(216, 216, 216);
font-size: 14px;
margin: 8px 0 7px 0;
opacity: 0;
resize: none;
}

#bidMessageText.visible{
opacity: 1.0;
}

#bidMessageText::-webkit-input-placeholder { 
color: rgb(100,100,100);
}
#bidMessageText::-moz-placeholder { 
color: rgb(100,100,100);
}
#bidMessageText:-ms-input-placeholder{
color: rgb(100,100,100);
}


#bidForm.minimized #bidPrice{
border-top: 1px solid rgb(60, 60, 60);
padding-top: 10px;
}

#bidForm.minimized #bidFormCommissionLower{
max-height: 0;
}

#bidForm .row .blue-link{
margin: 0 10px;
font-size: 12px;
position: relative;
top: -2px;
opacity: 1.0;
transition: opacity 0.2s;
}

#bidForm .row .blue-link.ng-hide{
opacity: 0;
}


#bidForm .row{
float: right;
clear: right;
margin: 5px 0;
}

#changePriceMsg{
font-size: 13px;
color: rgb(200, 200, 200);
background-color: rgb(45, 45, 45);
padding: 10px 17px;
margin-top: 10px !important;
overflow: hidden;
transition: all 0.4s;
}

#changePriceMsg.ng-hide{
height: 0;
padding-top: 0;
padding-bottom: 0;
}



#bidPrice input{
text-align: right;
width: 80px;
box-sizing: border-box;
padding: 2px 5px;
margin: 0 0 0 7px;
border: 2px solid rgb(52, 52, 52);
}

#bidPrice{
border-top-color: rgb(60, 60, 60);
transition: all 0.4s;
}

#bidPrice input,
#bidForm .dollarValue{
float: right;
font-family: 'Lato', sans-serif;
color: rgb(200, 200, 200);
}


#bidForm .label{
clear: left;
float: right;
margin: 0;
font-size: 13px;
margin: 1px 0 0 0;
color: rgb(187, 187, 187);
}

#bidPrice .label{
margin-top: 3px;

}

#bidForm .dollarValue{
clear: both;
margin: 0 7px;
}

#bidFormCommission{
float: right;
clear: both;
overflow: hidden;
max-height: 350px;
transition: max-height 0.7s;
}

#bidFormCommission.ng-hide{
max-height: 0;
}

#bidFormCommissionLower{
float: right;
clear: both;
overflow: hidden;
max-height: 310px;
transition: max-height 0.5s;
}



#bidFormPayAmount{
border-top: 2px solid rgb(47, 47, 47);
padding: 7px 0 15px 0;
float: right;
clear: both;
width: 265px;
}

#bidFormPayAmount span{
font-size: 22px !important;
color: rgb(230, 230, 230) !important;
font-weight: 600;
}

#bidFormPayAmount .dollarValue{
    margin-top: 3px;
    margin-left: 8px;
}


#bidPriceLabel.disabled{
color: rgb(100,100,100);
}

#bidForm .terms{
float: right;
font-size: 12px;
color: rgb(165, 165, 165);
line-height: 120%;
text-align: right;
clear: both;
margin: 0 0 2px 0;
max-width: 520px;
}

#BidAgree span{
font-size: 13px;
float: right;
}

#BidAgree .checkBox{
margin: 1px 0 0 7px;
}


#bidForm .action-button{
float: right;
clear: right;
margin: 7px 0 10px 0;
width: 130px;
transition: opacity 0.2s;
}

#bidForm .action-button.ng-hide{
opacity: 0;
}

#bidForm .spinner-blocks{
margin: 18px 14px;
float: right;
}

#bidForm .successMsg{
float: right;
margin: 15px 13px;
font-size: 14px;
font-weight: 600;
opacity: 1.0;
transition: opacity 0.5s;
}

#bidForm .successMsg.ng-hide{
opacity: 0;
}


.bidSubmitPrompt{
float: left;
clear: both;
margin: 5px 0 0 0;
font-size: 14px;
background-color: rgb(93, 34, 34);
padding: 7px 10px;
width: 100%;
}

.errorPromptLink{
margin-left: 4px;
color: rgb(27, 186, 222);
cursor: pointer;
}

.errorPromptLink:hover{
color: rgb(16, 192, 232);
}

.msgVideosWrapper{
float: right;
height: 100%;
overflow: hidden;
margin-top: 21px;
width: 247px;
}

#addVideosPrompt{
position: relative;
background-color: rgb(53, 53, 53);
width: 100%;
height: 270px;
padding: 22px 22px;
font-size: 13px;
line-height: 140%;
font-family: 'Open Sans', sans-serif;
margin-left: 18px;
color: rgb(228, 228, 228);
transition: all 0.4s;
}

#addVideosPrompt.ng-hide{
opacity: 0;
height: 0;
padding-top: 0;
padding-bottom: 0;
overflow: hidden;
}



#addVideosPromptTriangle{
position: absolute;
top: 10px;
left: -18px;
width: 0;
height: 0;
border-style: solid;
border-width: 15px 18px 15px 0;
border-color: transparent rgb(53, 53, 53) transparent transparent;
}

#addVideosPrompt .exampleUrl{
color: rgb(200, 200, 200);
margin: 6px 0 20px 2px;
}

#addVideosPrompt .TIP{
font-weight: 700;
position: relative;
top: -34px;
margin: 0 1px 0 37px;
}


#addFilesToBid{
float: left;
font-size: 14px;
}


.msgVideosWrapper .msg-videos{
width: 185px;
float: right;
padding: 0 25px 0 0;
margin-bottom: 15px;

}



.bidder-details-container{
padding: 0;
transition: padding 0.4s;
}

.bidder-details-container.bordered{
padding: 13px 0;
border-right: 1px solid rgb(63,63,63);
}

#biddingClosedMsgWrapper{
z-index: 2;
position: relative;
width: 100%;
top: -2px;
left: 0px;
}

#biddingClosedMsg{
position: absolute;
background-color: rgb(129, 11, 132);
padding: 12px 15px;
width: calc(100% - 253px);
}

#biddingClosedMsg span{
font-size: 12px;
color: rgb(183, 183, 183);
}


#bidForm{
position: relative;
overflow: hidden;
height: 100%;
margin-bottom: 15px;
transition: max-height 0.4s;
}





#bidForm.editingPrice{
height: 255px;
transition: all 0.5s;
}

#bidForm.ng-hide{
height: 0;
padding-top: 0;
padding-bottom: 0;
}

#bidForm.disabled{
opacity: 0.3;
}

#bidForm h4{
float: left;
font-weight: 700;
margin: 3px 0 5px 0;
max-height: 25px;
overflow: hidden;
transition: all 0.4s;
}


#bidForm h4.ng-hide{
max-height: 0;
margin: 0;
}


.bidInputError{
float: right;
clear: both;
font-size: 13px;
color: rgb(224, 117, 117);
margin: 7px 0 0 0;
}







#acceptBidConfirmation .spinner-snake{
float: right;
margin: 8px 10px 0 0;
}

#bidContent textarea{
padding: 10px;
border: 1px solid rgb(69, 69, 69);
font-size: 14px;
}



#acceptBidConfirmation textarea{
float: right;
width: 100%;
margin: 0 0 10px 0;

}

#bidContent textarea::-webkit-input-placeholder { /* WebKit browsers */
color: rgb(100,100,100);
}

.bid-head  .action-button{
float: right;
font-size: 14px;
font-weight: 400;
padding: 0.5em 1.2em;
}

#acceptBidConfirmation .close{
position: absolute;
top: 0;
right: 8px;
cursor: pointer;
}


#dismissBidConfirmation{
max-height: 150px;
padding: 0 0 10px 20px;
overflow: hidden;
transition: all 0.4s;
}

#dismissBidConfirmation.ng-hide{
max-height: 0;
}

#dismissBidConfirmation .prompt{
float: left;
margin: 5px 15px 10px 0;
}

#dismissBidConfirmation .action-button{
float: left;
}

#dismissBidConfirmation .inner{
padding: 10px 0 0 0;
}

#hiddenBidNotification{
max-height: 60px;
color: rgb(147,147,147);
font-style: italic;
font-weight: 700;
}

#hiddenBidNotification.ng-hide{
max-height: 0;
}

#dismissBidConfirmation .red-link{
color: rgb(219, 105, 104);
font-size: 14px;
text-decoration: none;
}

#bidNavWrapper{
float: right;
padding: 4px 32px 0 0;
width: 270px;
font-size: 15px;
}

.bidNavMsg{
float: right;
color: rgb(213, 213, 213);
}

.bidNavLink{
color: rgb(15,147,178);
float: right;
margin: 0 10px;
cursor: pointer;
}

#nextBidLink:hover{
color: rgb(34, 171, 203);
border-color: rgb(34, 171, 203);
}



/* ----------------------------------------- BADGES ----------------------------------------- */


.badge-wrapper{
position: relative;
}

.badge-explain{
width: 265px;
background-color: rgba(33, 33, 33, 0.8);
position: absolute;
top: -19px;
left: 120px;
padding: 10px;
transition: opacity 0.2s;
}

.badge-explain.ng-hide{
opacity: 0;
}

.badge-explain-point{
border-width: 1px;
border-style: solid;
border-color: inherit;
width: 6px;
height: 1px;
position: absolute;
left: 4px;
top: 35px;
}

.badge-explain-content{
border-width: 2px;
border-style: solid;
border-color: inherit;
font-size: 12px;
padding: 7px 10px;
background-color: rgb(30,30,30);
color: inherit;
z-index: 2;
position: relative;
}

.badge{
font-size: 12px;
background-image: url('/st/images/badges.png');
background-repeat: no-repeat;
width: 100%;
vertical-align: middle;
overflow: hidden;
transition: all 0.5s;
}


.badge,
.badge.ng-enter.ng-enter-active,
.badge.ng-leave{
height: 37px;
margin-bottom: 2px;
padding-top: 10px;
}

.badge.ng-enter,
.badge.ng-leave.ng-leave-active{
height: 0;
margin-bottom: 0;
padding-top: 0 !important;
}


.badge-pr1{
color: rgb(144, 123, 111);
}


.badge-pr2{
color: rgb(142, 141, 138);
}
.badge-pr2 .badge{
background-position: 0 -37px;
}

.badge-pr2 .badge55{
background-position: 0 -55px;
}


.badge-pr3{
color: rgb(148, 140, 113);
}
.badge-pr3 .badge{
background-position: 0 -74px;
}
.badge-pr3 .badge55{
background-position: 0 -110px;
}


.badge-vir{
color: rgb(142, 141, 138);
}
.badge-vir .badge{
background-position: 0 -111px;
padding-top: 14px;
}
.badge-vir .badge55{
background-position: 0 -165px;
padding-top: 14px;
}


.badge-val{
color: rgb(170, 163, 135);
}
.badge-val .badge{
background-position: 0 -148px;
}
.badge-val .badge55{
background-position: 0 -220px;
}


.badge-awd{
color: rgb(148, 140, 113);
}
.badge-awd .badge{
background-position: 0 -185px;
}
.badge-awd .badge55{
background-position: 0 -275px;
}


.badge-mst{
color: rgb(148, 140, 113);
}
.badge-mst .badge{
background-position: 0 -222px;
padding-top: 12px;
}
.badge-mst .badge55{
background-position: 0 -330px;
padding-top: 12px;
}


.badge-omb{
color: rgb(144, 123, 111);
}
.badge-omb .badge{
background-position: 0 -259px;
}
.badge-omb .badge55{
background-position: 0 -385px;
}


.badge-col{
color: rgb(171, 164, 135);
}
.badge-col .badge{
background-position: 0 -296px;
padding-top: 11px;
}
.badge-col .badge55{
background-position: 0 -440px;
padding-top: 11px;
}


.badge-mcg{
color: rgb(142, 141, 138);
}
.badge-mcg .badge{
background-position: 0 -333px;
padding-top: 11px;
}
.badge-mcg .badge55{
background-position: 0 -495px;
padding-top: 11px;
}


.vp-invited-editors h5 {
color: rgb(180,180,180);

}
.vp-invited-editors h5>span {font-size: 14px; font-weight: bold;}
.vp-invited-editors .change {
border-bottom: 1px dashed rgb(15,147,178);
color: rgb(15,147,178);
margin: 0 0 10px 0;
cursor: pointer;
}
.vp-invited-editors .change:hover {
border-bottom-style: solid;
}

.vp-invited-editors .more {
float: left;
clear: both;
margin: 5px 0 0 0;
font-style: italic;
font-size: 14px;
color: rgb(180,180,180);
}

.vp-invited-editors {width: 148px; margin: 10px 0 0 25px; cursor: pointer;}
.buyOption .vp-invited-editors {cursor: auto;} 
.vp-invited-editors .editorProfilePic {height:40px;margin: 8px 8px 0 0;}

.vp-invited-editors .all-editors .editorProfilePic {
height:30px;
margin: 5px 5px 0 0;
}




.option1{margin-bottom:20px;}
.optionRow{margin-bottom:10px;}
.optionRow input, .optionRow label {cursor:pointer;}
.cardWrapper input {width:192px;}
.cardChoice input, .cardChoice label {cursor:pointer;}
.cvcError {text-align:right;margin-right:11px;}

.cardChoice input {margin-left:28px;}

.cardWrapper {margin-bottom:8px;}
.cardWrapper .label {width:80px;float:left;}
.cc-logos { float: left;height:20px;margin-left:10px;margin-top:-2px;}


.page {min-height:500px;}
.row.successMessage {margin-top:200px;}
.row.successMessage h1 {text-align: center;}



/* --  Style --*/








#style {
height: 100%;
}



#style input[type="text"]{
padding: 4px 8px;
}

#style input[disabled="disabled"]{
background-color: rgb(65, 65, 65);
color: rgb(130, 130, 130);
}

#style .row{
float: left;
clear: both;
}

.hint{
font-style: italic;
}


#intro .steps{
margin: 50px 0 0 50px;
}


#intro .step{
position: relative;
margin: 0 0 53px 0;
}

#intro .step h3,
#intro .step h4
{
position: absolute;
left: 57px
}

#intro .step h3{
top: -6px;
font-size: 22px;
color: rgb(228, 228, 228);
}

#intro .step h4{
top: 23px;
font-size: 17px;
color: rgb(178, 178, 178);
font-style: italic;
font-weight: 700;
}

#intro .button-tray{
margin-top: 100px;
width: 90%;
}

.number{
background-image: url('/st/images/numbers.png');
background-repeat: no-repeat;
width: 55px;
height: 47px;
}

.number1{
background-position: 0 0;
}

.number2{
background-position: 0 -47px;
}

.number3{
background-position: 0 -94px;
}

#question-container{
height: 100%;
width: 90%;
margin-left: 37px;
}

#question-container{
width: 70%;
}

.questions.cardContent{
padding-left: 41px;
}

#style .question{
min-height: 100%;
width: 100%;
margin-bottom: 100px;
float: left;
clear: both;
}

.question>.ng-scope>* {
float: left;
clear: both;
}


.question h2 {
margin: 16px 0 60px -16px;
}

.question h2.subQuestion {
font-weight: 400;
margin: 0px 0 20px;
}

.question h2.subQuestion .light {
font-weight: 300;
margin: 0 0 0 5px;
}


.emailAddressResponse{
float: left;
margin: 0 0 0 15px;
height: 0;
overflow: hidden;
padding: 6px 15px;
color: rgb(76, 178, 202);
}

.emailAddressResponse.heightAuto{
height: auto;
}

.emailAddressResponse.error{
background-color: rgba(252,91,90,0.6);
color: white;
}


/* ---------------------------------------------------- Questions ---------------------------------------------------- */

.question-explainer .option{
margin: 0 0 25px 0;
float: left;
clear: both;
}

.question-explainer .option-label{
width: 288px;
padding: 14px 0 9px 0;
float: left;
}

.question-explainer .examples{
float: left;
margin: 18px 0 0 30px;
font-size: 15px;
}

.question-explainer .examplesLabel{

color: rgb(120, 120, 120);
margin: 0 12px 0 0;
}

.question-explainer .example{
color: rgb(33, 132, 155);
margin: 0 12px 0 0;
cursor: pointer;
}

.question-explainer .example:hover{
color: rgb(53, 152, 175);
}

.question-explainer h3.hint{
margin: 25px 0;
font-style: normal;
color: rgb(214, 214, 214);
}



#question-allServices .option{
clear: both;
float: left;
}

#question-allServices .option-label{
width: 205px;
margin: 0 20px 21px 0;
padding: 17px 0 14px;
}

#question-allServices .option-hint{
position: relative;
top: -6px;
font-size: 18px;
color: rgb(222, 222, 222);
font-weight: 300;
}

#question-allServices .options{
margin-bottom: 36px;
}

#selectServicesQuestion{
height: 200px;
overflow: hidden;
transition: height 0.4s;
}

#selectServicesQuestion.ng-hide{
height: 0;
}

#selectServicesQuestion .options{
margin: 20px 0 0 20px;
}

#selectServicesQuestion .option{
margin: 0 0 3px 0;
cursor: pointer;
}

#selectServicesQuestion .option .label{
display: inline-block;
font-size: 14px;
color: rgb(190, 190, 190);
position: relative;
left: 6px;
top: -2px;
}


#selectServicesQuestion .option:hover .label{
color: rgb(220, 220, 220);
}

#selectServicesQuestion .option.selected .label{
color: rgb(230, 230, 230);
}


#style #question-post{        /* #style is need for rule precedence.. */
width: calc(100% - 40px);
height: 100%;
margin-left: 22px;
margin-bottom: 0;
}


#brief-recap-wrapper{
width: 100%;
margin-top: 15px;
height: calc(100% - 40px);
border: 1px solid rgb(63, 63, 63);
overflow: hidden;
}

#brief-recap, #project-unavailable{
float: left;
width: 50%;
height: 100%;
min-height: 400px;
overflow: hidden;
padding: 30px 0px 15px 30px;
color: rgb(221, 221, 221);

display: -ms-flexbox;
display: -webkit-flex;
display: flex;
-webkit-flex-direction: column;
-ms-flex-direction: column;
flex-direction: column;
}



#project-unavailable{
min-height: 0;
}

#brief-recap .top,
#brief-recap .description,
#brief-recap .details,
#brief-recap .lower{
width: 100%;
}

#brief-recap .details{
-ms-flex: 1 1 auto; 
-webkit-flex: 1 1 auto; 
flex: 1 1 auto;
}

#brief-recap .top{
text-align: center;
margin: 0 0 14px 0;
-ms-flex: 0 0 auto; 
-webkit-flex: 0 0 auto;
flex: 0 0 auto;
}



#brief-recap .description{
margin: 0 0 15px 0;
position: relative;
-ms-flex:1 1 100%; 
-webkit-flex: 1 1 100%;
flex: 1 1 100%;
}




#brief-recap .incomplete{
color: rgb(242, 75, 75);
}

#brief-recap .edit{
transition: color 0.1s;
cursor: pointer;
}

#brief-recap .edit:hover,
#brief-recap .edit:hover span{
color: rgb(15,147,178);
}

#brief-recap .incomplete.edit:hover, #brief-recap .edit .incomplete:hover{
color: rgb(252, 91, 90);
}

#brief-recap.posted .edit:hover,
#brief-recap.posted .edit:hover span{
color: rgb(160, 160, 160) !important;
cursor: auto !important;
}


#brief-recap.posted #brief-description:hover{
color: rgb(205, 205, 205) !important;
}

#brief-recap.posted.buyerMode #brief-description.edit:hover{
color: rgb(15,147,178) !important;
cursor: pointer !important;
}




#brief-recap h4{
display: inline-block;
font-size: 20px;
font-weight: bold;
}

#brief-recap h5, #brief-recap h5>span{
font-size: 14px;
color: rgb(170, 170, 170);
margin: 0 0 5px 0;
width: 100%;
}

#brief-recap .update{
background-color: rgb(103, 112, 114);
float: right;
padding: 3px 6px;
font-size: 10px;
color: rgb(211, 211, 211);
}

#brief-recap .updateWrapper{
height: 20px;
}


#brief-recap h6{
color: inherit;
font-size: 13px;
}

#brief-recap .type{

display: inline-block;
}
/*
#brief-recap .getBids{
margin-top: 3px;
}*/




#brief-recap .description-scroll{
position: absolute;
top: 20px;
height: calc(100% - 45px);
font-size: 14px;
width: calc(100% + 30px);
line-height: 150%;
overflow-y: auto;
padding: 0 30px 0 0;
color: rgb(205, 205, 205);
transition: max-height 0.2s;
}

#brief-description{
white-space: pre-line;
word-wrap: break-word;

}

.description .downTriangle{
position: absolute;
bottom: 0;
left: 50%;
cursor: pointer;
transform: translateX(-50%);
}  
  

/*
#brief-recap.maximized .description-scroll{
max-height: none;
}*/

#brief-recap .quote{
font-size: 50px;
font-weight: bold;
color: rgb(184,184,184);
float: left;
width: 30px;
}

#brief-recap .quote-left{
margin-top: -12px;
}

#brief-recap .quote-right{
position: absolute;
bottom: -28px;
right: 0;
}

/*
#brief-recap .getBids{
margin: 3px 0 3px 0;
}*/



#brief-recap .examples{
display: table-cell;
}

#brief-recap .examples-wrapper{
white-space: nowrap;
}

#brief-recap .brief-example{
position: relative;
display: inline-block;
height: 40px;
margin: 5px 10px 0 0;
border: 1px solid #000;
}

#brief-recap .brief-example img.thumb{
height: 100%;
}

#brief-recap .examples .extra{
float: right;
font-size: 12px;
cursor: pointer;
margin: 0 4% 0 0;
}

#brief-recap .assets{
display: table-cell;
width: 99%;

}

#brief-files-title{
color: inherit;
}

#brief-files-title:hover{
color: rgb(15,147,178);
}

#brief-recap .assets-wrapper{
max-height: 48px;
overflow-y: auto;
margin: 5px 0 0 0;
}

#brief-recap.maximized .assets-wrapper{
overflow-y: auto;
max-height: 52px;

}

#brief-recap .brief-asset{
height: 38px;
float: left;
margin: 0 10px 10px 0;
overflow: hidden;
}

#brief-recap .brief-asset img.asset_thumb{
height: 100%;
}


.brief-status-msg{
float: right;
font-size: 18px;
margin: 20px 0;
clear: both;
}





.option-image{
width: 22%;
float: left;
margin: 0 3% 20px 0;
cursor: pointer;
position: relative;
border: 2px solid rgb(15,147,178);
}

.option-image-back{
position: absolute;
top: 0;
width: 100%;
height: 100%;
background-repeat: no-repeat;
background-size: 100%;
opacity: 0.5;
}

.option-image-icon{
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
background-repeat: no-repeat;
background-size: 100%;
}


.option-image>img{
width: 100%;
display: block;
opacity: 0.5;
}



.image-label{
position: absolute;
bottom: 0;
left: 0;
width: 100%;
height: 100%;
background-color: rgba(15,147,178,0.0);
color: #fff;
text-align: center;
}

.image-label-text{
position: absolute;
bottom: 7%;
width: 100%;
text-align: center;
font-size: 16px;
font-size: 1.2vw;
}




.option-image.selected .image-label{
background-color: rgba(15,147,178,1.0);
}

.option-image:hover .image-label{
background-color: rgba(15,147,178,0.75);
}

.moreBlock{
border: 1px solid rgb(15, 100, 115);
width: 22%;
float: left;
margin: 0 3% 20px 0;
cursor: pointer;
position: relative;
transition: border-color 0.15s;
}

.moreBlock:hover{
border-color: rgb(15,147,178);
}

.moreBlock span{
position: absolute;
width: 100%;
top: 50%;
color: rgb(9, 145, 175);
text-align: center;
font-size: 14px;
font-size: 1vw;
transform: translateY(-50%);
transition: color 0.15s;
}

.moreBlock:hover span{
color: rgb(22, 166, 200);
}





.question-textarea-container{
width: 85%;
}



.question-textarea{
width: 90%;
height: 90px;
padding: 7px;
}

.option-example{
float: left;
margin: -7px 3% 10px 0;
width: 30%;
}

.example-label{
margin: 0 0 3px 0;
font-size: 14px;
color: #ddd;
}
.option-example.selected .example-label{
color: rgb(15,147,178);
font-weight: 700;
}


.example-poster-container{
position: relative;
cursor: pointer;
}


.option-example-highlight{
display: none;
position: absolute;
width: 100%;
height: 100%;
top: 0;
border: 6px solid rgb(15,147,178);
}
.option-example.selected .option-example-highlight{
display: block;
}


.example-poster-container:hover .example-play{
opacity: 1.0;
}

.example-poster{
width: 100%;
display: block;
}

.example-play{
position: absolute;
top: 15%;
left: 33%;
height: 70%;
cursor: pointer;
opacity: 0.7;
transition: opacity 0.35s;
}

.example-select{
float: right;
cursor: pointer;
margin: 5px 0;
padding: 1px 6px;
font-size: 14px;
border: 1px solid rgb(15,147,178);
color: rgb(15,147,178);
background-color: rgba(15,147,178,0.4);
color: #ddd;
}
.option-example.selected .example-select{
background-color: rgb(15,147,178);
color: #fff;
}


.option-example.selected .example-select-like{
display: none;
}

.example-select-unlike{
display: none;
color: #aaa;
}

.option-example.selected .example-select-unlike{
display: block;
}


.options{
clear: both;
margin: 10px 0 10px 0;
}


.option-label {
display: inline-block;
margin: 0 12px 0 0;
padding: 8px 10px;
border: 2px solid rgb(15,147,178);
cursor: pointer;
background-color: rgba(15,147,178,0.5);
width: 116px;
text-align: center;
font-weight: bold;
vertical-align: middle;
font-size: 20px;
}

.option-label:hover{
background-color: rgba(15,147,178,0.75);
}

.option.selected .option-label,
.option-label.selected{
background-color: rgb(15,147,178);
}



.option-hint {
display: inline-block;
cursor: pointer;
}

.vpSlide0{
overflow: hidden;
height: 0;
transition: height 0.4s linear;
}

.vpMaxHeight0{
overflow: hidden;
max-height: 0;
transition: max-height 0.4s linear;
}

#question-story textarea{
height: 300px;
margin-top: -30px;
padding: 20px 14px 14px;
color: rgb(214, 214, 214);
font-family: 'Open Sans';
font-size: 15px;
border-color: rgb(70, 70, 70);
}


/*
#question-filmLocation .options{
margin-bottom: 50px;
}*/

#question-filmLocation .row{
float: left;
clear: left;
margin: 14px 0 0 0;
}



#question-filmLocation .checkBox{
display: inline-block;
margin: 0px 5px 0 2px;
position: relative;
top: 1px;
}

#question-filmLocation .locationPin{
  position: relative;
  top: 4px;
  margin-right: 3px;
}

#question-filmLocation .hint{
color: rgb(210,210,210);
font-size: 14px;
margin-left: 5px;
  font-style: normal;
}


#filmLocationInput{
width: 324px;
display: inline-block;
margin-left: 5px;
}

#filmLocationInput[disabled="disabled"] {
background-color: rgb(37,37,37) !important;
color: rgb(37,37,37) !important;
border-color: rgb(53, 53, 53);
}



.question-film-location.vpSlide{
height: 110px;
}

.question-film-files{
margin: 15px 0 0 0;
}

.question-film-files.vpSlide{
height: 135px;
}

.add-files-button {
margin: 20px 0 0 0;
}


.option-big{
border: 1px solid rgb(100,100,100);
padding: 15px 15px 15px 20px;
width: 500px;
color: rgb(140,140,140);
margin: 0 0 18px 0;
cursor: pointer;
overflow: hidden;
}

.option-big h3{
color: inherit;
margin-bottom: 2px;
font-weight: 700;
}

.option-big .inner{
float: left;
}


.option-big .explanation{
font-size: 14px;
}



.option-big:hover{
color: rgb(15, 147, 178);
border-color: rgb(15, 147, 178);
}

.option-big.selected{
color: rgb(0, 189, 209);
border-color: rgb(0, 189, 209);
}



.option-big.selected:hover{
opacity: 0.9;
}


.option-big .tick{
float: left;
background: url('/st/images/sprite.png') no-repeat 0 0;
width: 38px;
height: 22px;
margin: 12px 18px 0 0;
}

.option-big:hover .tick{
background-position: 0 -22px;
}

.option-big.selected .tick{
background-position: 0 -44px;
}


.option-big .icon{
float: right;
background-image: url('/st/images/sprite.png');
background-repeat: no-repeat;
height: 30px;
width: 38px;
margin: 10px 0;
}


.iconPreProduction{
background-position: 0 -66px;
}

.option-big:hover .iconPreProduction{
background-position: 0 -97px;
}

.option-big.selected .iconPreProduction{
background-position: 0 -128px;
}


.iconProduction{
background-position: 0 -159px;
}

.option-big:hover .iconProduction{
background-position: 0 -190px;
}

.option-big.selected .iconProduction{
background-position: 0 -221px;
}

.iconPostProduction{
background-position: 0 -252px;
}

.option-big:hover .iconPostProduction{
background-position: 0 -283px;
}

.option-big.selected .iconPostProduction{
background-position: 0 -314px;
}

.files-info{
margin: 7px 0 0 0;
font-size: 14px;
}


#question-displayName input[type="text"]{
width: 400px;
margin: 0 0 7px 0;
}

#price-axis{
border-right: 2px solid rgb(100,100,100);
height: 500px;
position: absolute;
width: 129px;
}

#price-hint{
position: absolute;
right: 0;
top: 65px;
}

#save-tag{
position: absolute;
right: 0;
top: 90px;
background: url('/st/images/price_tag.png') no-repeat 0 0;
height: 34px;
width: 100px;
color: rgb(252,91,90);
padding: 6px 0 0 10px;
cursor: help;
z-index: 10;
}


#question-price{
position: relative;
}

#question-price h2{
margin-bottom: 30px;
} 

#price-control{
position: relative;
height: 520px;
width: 100%;
}

#price-track{
position: absolute;

left: 35px;
width: 120px;
height: 570px;
/*background-color: rgba(47, 173, 63, 0.11);*/
}   
   
#budget-movable{
position: absolute;
right: 20px;
width: 100px;
height: 100px;
background-color: transparent;

}

#budget-range{
position: absolute;
top: 2px;
right: -5px;
width: 15px;
background: url('/st/images/red_bar_5x1.png') repeat-y 0 0;
bottom: 2px;
}


.budget-end{
position: absolute;
width: 100px;
left: 0;
height: 15px;
}



#budget-max{
top: 0px;
}

#budget-min{
bottom: 0px;
}

#budget-min .budget-dot{
bottom: 0;
}

.budget-dot{
position: absolute;
right: 0;
width: 15px;
height: 15px;
background: transparent url('/st/images/thumb-drag.png') no-repeat 0 0;
cursor: pointer;
}



.budget-tag{
position: absolute;
width: 70px;
height: 30px;
border: 1px solid rgb(124, 124, 124);
padding: 4px 6px;
text-align: right;
background-color: rgb(36, 36, 36);
cursor: pointer;
}

#budget-min .budget-tag {
bottom: -15px;
}

#budget-max .budget-tag {
bottom: 1px;
}

.budget-join{
width: 8px;
height: 2px;
background-color: rgb(124, 124, 124);
position: absolute;
right: 22px;
bottom: 8px;
}

#budget-min .budget-join{
bottom: 6px;
}


#price-words{
position: absolute;
left: 190px;

}


.price-label{
position: absolute;
color: rgb(255,255,255);
width: 450px;
margin-top: -12px;
opacity: 0.33;
}

.price-label h3{
font-size: 20px;
}

#price-axis h6{
position: absolute;
color: rgb(100,100,100);
width: 100px;
text-align: right;
font-size: 12px;
margin-top: -7px;
}

#question-price .button-tray{
margin-top: 0;
}

#question-getBids .option-label{
margin: 0 0 5px 0;
font-size: 20px;
width: 100%;
height: 65px;
padding-top: 0.9em;
}

#question-getBids .option{
width: 250px;
margin-right: 15px;
float: left;
}

#question-getBids .option .hint{
font-size: 14px;
color: rgb(187, 187, 187);
font-weight: bold;
line-height: 130%;
}

#question-getBids h3{
font-size: 24px;
margin-bottom: 15px;
}

#question-which-creators{
margin-top: 75px;
}

#question-which-creators.vpMaxHeight{
max-height: 200px;
}

#creator-list{
float: left;
margin: 5px 0 0 270px;
cursor: pointer;
-webkit-transition: opacity linear 0.3s;
transition: opacity linear 0.3s;
}

#creator-list.ng-hide {
opacity:0;
}

#creator-list h5, #creator-list span{
font-size: 14px;
margin-bottom: 8px;
}

#creator-list img{
height: 42px;
margin: 0 7px 0 0;
border-radius: 50%;
border: 2px solid rgb(231, 231, 231);
}

#creator-list-more{ 
float: left;
font-size: 14px;
color: rgb(158, 158, 158);
font-style: italic;
margin: 10px 0 0 2px;
font-weight: bold;
}

#dueDateInput{
margin: 0 0 5px 0;
width: 210px;
float: left;
clear: both;
}


.done-button{
float: right;
clear: both;
position: relative;
top: 20px;
right: 4%;
}



#brief-nav{
max-height: 0;
overflow: hidden;
padding: 0 20px 20px;
color: #444;
transition: max-height 0.4s linear;
}

#brief-nav.show{
max-height: 200px;
}


/* -- Modals -- */

.designSideBar .currentOptionWrapper {height:40%;}
.designSideBar .currentOptionWrapper .option {clear:both;margin-top:20px;padding:5px 2px 5px 5px;cursor:pointer;}
.designSideBar .currentOptionWrapper  .mainRow {position:relative;}
.designSideBar .currentOptionWrapper .thumbnailWrapper {min-width:90px;}
.designSideBar .currentOptionWrapper img {height:60px;}
.designSideBar .currentOptionWrapper .optionName  {width:115px;margin-left:10px;}
.designSideBar .currentOptionWrapper .ok {position:absolute;bottom:5px;right:5px;}
.designSideBar .currentOptionWrapper .details {width:100%;margin:5px 0px;}


.designSideBar .otherOptionsWrapper {padding-left:5px;}
.designSideBar .otherOptionsWrapper .scroll-wrapper {height:168px;}
.designSideBar .otherOptionsWrapper .option {display:table;padding:3px;margin:5px 0px;}
.designSideBar .otherOptionsWrapper .thumbnailWrapper {display:table-cell;vertical-align:middle;}
.designSideBar .otherOptionsWrapper .optionName {display:table-cell;vertical-align:middle;padding-left:8px;}
.designSideBar .otherOptionsWrapper .option.clickable:hover .optionName {color: #444;}
.designSideBar .bar{background-color: #CCC;height: 1px;margin: 0px 0px;clear:both;}
.designSideBar .subtitle {margin:10px 0px;}
.designSideBar .optionWrapper {margin:10px 0px;cursor:pointer;display:table;}
.designSideBar .otherOptionsWrapper .thumbnailWrapper>img {height:30px;margin:0px;}
.designSideBar .thumbnailWrapper .no-example {height:30px; Width: 55px; border: 1px solid #ccc; font-size: 10px;
color: #999;
text-align: center;
line-height: 100%; padding: 4px 0;}




/* -- projects available -- */
#projects-available-modal.modal {
width: 950px;
height: 80%;
padding: 20px 5px 20px 20px;
}

#projects-available-modal .spinner-blocks{
position: absolute;
left: 50%;
top: 101px;
}

#projects-available-modal .project-row {
margin-bottom:23px;
position:relative;
overflow: hidden;
}

#projects-available-modal .action-button {
position:absolute;
bottom: 28px;
right: 13px;
font-size: 12px;
width: auto;
padding: 6px 10px;
}

#projects-available-modal .displayName{
color: rgb(235, 235, 235);
margin: 0px 0 5px 8px;
}

#projects-available-modal .button span {font-size: 9px;}
#projects-available-modal .vp-project-recap {
min-height: 165px;
}

#projects-available-modal .vp-project-recap .col {margin-top:5px;}
#projects-available-modal .scroll-wrapper {
height:calc(100% - 50px);
padding: 0 15px 0 0;
overflow-y: auto;
}

#projects-available-modal .notice {
font-size: 11px; 
position: absolute;
bottom: 8px;
right: 11px;
color: rgb(210,210,210);
}

#projects-available-modal h1 {

padding: 5px 0;
font-weight: bold;
text-align: center;
}

/* -- vp-project-recap -- */
.vp-project-recap {
position:relative;
background-color: rgb(30,30,30);
overflow: hidden;
border: 1px solid rgb(80,80,80);
width: 100%;
padding: 15px;
}

.vp-project-recap .col {
float: left;
width: 50%;
margin: 0;
line-height:23px;
}

.vp-project-recap h5 {
float: left;
width: 40%;
color: rgb(228, 228, 228);
font-size: 16px;
clear: left;
}

.vp-project-recap .col>span {
float: left;
clear: right;
margin: 0;
color: rgb(15,147,178);
font-size: 16px;
width: 55%;
}

.vp-project-recap .extra{
font-size: 12px;
padding-left: 8px;
font-style: italic;
font-weight: 700;
cursor: help;
}

.vp-project-recap span.ellipsis{
width: 100%;
display: inline-block;
}

.vp-project-recap dd.footage{
margin: 10px 0 0 0;
}


#orderCreator .congrats{
font-style: normal;
font-size: 20px;
font-weight: 300;
}

#orderCreator .congrats .blue-link{
text-decoration: none;
margin: 0 0 0 10px;
}

#orderCreatorScroll{
position: absolute;
top: 95px;
width: 100%;
bottom: 20px;
overflow-y: scroll;
padding-right: 5px;
}


.vp-project-recap .asset_thumb {height:30px;margin-right:5px;}
.remainder {
font-size:12px;
font-weight:normal;
clear: both;
}
.vp-project-recap.unavailable {background:#F7CFCF;}


.vp-project-recap .projectStatus {top:5px;right:7px;font-weight:bold;position:absolute;}
.vp-project-recap.unavailable .projectStatus {color:#FC3838;}
.vp-project-recap.available .projectStatus {color:#2A8B0B;}





#files .thumbnail-file-icon{
width: 80px !important;
}




/* -- review card -- */

#reviewNoOrder .action-button{
margin: 25px 0 0 0;
}

.subtitle{
margin: 10px 0 0 0;
}

.subtitle h4{
font-size: 18px;
font-weight: 300;
}

#timingInfo .blue-link{
margin: 0 0 0 10px;
font-size: 14px;
display: inline-block;
}

#timingInfo .action-button{
padding: 3px 15px;
float: right;
}

#reviewBids{
position: absolute;
width: calc(100% - 100px);
top: 148px;
bottom: 5px;
overflow-y: auto;

}

#cutsCreator h4.hint{
font-size: 20px;
margin: 4px 0 0 12px;
float: left;
}

#editedVideos{
overflow: hidden;
margin: 0 0 20px 0;
border-bottom: 2px solid rgb(44,44,44);
}

#editedVideos .bar{
background-color: rgb(87,87,87);
margin: 0;
}

#editedVideos img.asset_thumb{
height: 120px;
}

#editedVideos img.asset_thumb.incompleteAsset{
height: 100%;
}

#bid-recaps{
padding: 30px 0 1px 0;
background-color: rgb(30,30,30);
border-top: 2px solid rgb(44,44,44);
}

.cut .cutTitle{
font-size:20px;
margin:10px 0 20px 0;
color: rgb(210, 210, 210);
font-weight: 300;
}

#editedVideos .thumbnail .title{
min-width: 31px;
height: 31px;
padding: 3px 0;
box-sizing: border-box;
text-align: center;
font-size: 20px;
font-weight: 700;
background-color: rgb(15,147,178);
opacity: 1.0;
}

.cutActions{
margin: 0 0 0 30px;
float: left;
}

.downloadCutWrapper{

}

.asset.incomplete + .cutActions{
display: none !important;
}

.cut {
position: relative;
margin: 0 0 20px 30px;
padding: 20px 0 0 0;
overflow: hidden;
}

.projectActions {
  margin: 20px 34px 0 0;
}

.downloadCutLink{
float: left;
clear: both;
}

.downloadPayLink{
float: left;
clear: both;
}

.downloadPayMsg{
float: left;
  clear: both;
  height: 30px;
  overflow: hidden;
  transition: height 1.4s;
  color: rgb(200,200,200);
  font-size: 14px;
  margin: 5px 0 0 0px;
}

.downloadPayMsg.ng-hide{
height: 0;
}

.projectActions .action-button{
width: auto;
padding: 8px 12px;
}

.cut + .cut {
border-top:1px rgb(87,87,87) solid;
}


.review {
padding: 20px;
}
.review-instructions {margin:0px;padding:0px 0px; line-height:25px; 
   font-size:16px; font-weight: bold; color: #999;}

.projectActions .status {margin:0px;}


.review .scroll-wrapper {margin-top:15px;}

.review .timing-info {padding: 7px; line-height: 100%; font-weight: normal; }
.review .timing-info h4{margin: 5px 0 0 0; }
.review .timing-info span.change-date {margin: 4px 0 6px 0; font-size: 11px; }

form.change-date {
position: absolute;
z-index: 1000;
right: 6%;
width: 400px;
padding: 20px 20px 10px 20px;
border: 2px solid rgb(15,147,178);
margin: 10px 0 0 0;
background-color: rgb(30,30,30);
overflow: hidden;
box-shadow: 0 0 10px 10px #1A2C36;
}

form.change-date input {
border-color: rgb(80,80,80);
padding: 4px 7px;
width: 100px;
margin: 0 0 10px 20px;

}

form.change-date label {
clear: left;
float: left;
width: 160px;
margin: 6px 0 0 0;
font-weight: bold;
}

form.change-date .vp-button {margin: 0 0 0 15px; clear: both; float: right;}
form.change-date .cancel-link {margin: 3px 0 0 0; display: block; float: right; clear: both;}

.review .choose-editor {margin-top: 32px; max-width: 180px;}







/* -- shared -- */
.status {
margin: 10px 0 0 0;
text-align: right;
font-size: 16px;
color: rgb(151, 151, 151);
}

.status.statusChosen{
color: rgb(15,147,178);
}



#orderCreator .instructions {

margin: 20px 0px 20px 0px;
line-height:25px;
font-size:18px;
color: rgb(210,210,210);
font-style: italic;
}


/**/
.datepicker {color: #777;}
.datepicker .dow {font-size: 14px;}
.dropdown-menu.datepicker {
position: static;
float: left;
clear: both;
z-index: 1;
width: 300px;
border: none;
margin: 10px 0 20px 15px;
padding: 5px; 
color: #fff;
background-color: rgb(15,147,178);
box-shadow: 0 6px 12px rgba(0, 0, 0, 0.175);
}
   
.datepicker button {
border: none;
background: transparent;
}

.datepicker button:hover {
background: rgba(255,255,255,0.8);
color: rgb(252,91,90);
font-weight: 700;
}

.datepicker button.btn-primary {
background: #fff;
color: rgb(252,91,90);
font-weight: 700;
}
      
.datepicker.dropdown-menu tbody button {
padding: 6px;
}

.datepicker .text-muted, .datepicker button:disabled {
color: rgb(80,80,80);
}
.datepicker button.btn-block {
padding: 10px 20px;
font-size: 20px;
}

td, th {
padding: 0;
font-weight: 300;
}
table {border-collapse: collapse; border-spacing: 0;}


.datepicker .btn {display: inline-block;
margin-bottom: 0;
font-weight: 300;
text-align: center;
vertical-align: middle;
cursor: pointer;
color: #fff;
background-image: none;
border: 1px solid rgba(0, 0, 0, 0);
white-space: nowrap;
padding: 6px 12px;
font-size: 14px;
line-height: 1.42857143;
-webkit-user-select: none;
-moz-user-select: none;
-ms-user-select: none;
user-select: none;}

   
   
.datepicker .date-labels{
color: rgb(221, 221, 221);
font-weight: 300;
height: 29px;
vertical-align: top;
}






@font-face{font-family:'Glyphicons Halflings';
src:url('//netdna.bootstrapcdn.com/bootstrap/3.0.0/fonts/glyphicons-halflings-regular.eot');
src:url('//netdna.bootstrapcdn.com/bootstrap/3.0.0/fonts/glyphicons-halflings-regular.eot?#iefix') format('embedded-opentype'),url('//netdna.bootstrapcdn.com/bootstrap/3.0.0/fonts/glyphicons-halflings-regular.woff') format('woff'),url('//netdna.bootstrapcdn.com/bootstrap/3.0.0/fonts/glyphicons-halflings-regular.ttf') format('truetype'),url('//netdna.bootstrapcdn.com/bootstrap/3.0.0/fonts/glyphicons-halflings-regular.svg#glyphicons-halflingsregular') format('svg');}.glyphicon{position:relative;top:1px;display:inline-block;font-family:'Glyphicons Halflings';font-style:normal;font-weight:normal;line-height:1;-webkit-font-smoothing:antialiased;}


.glyphicon-chevron-left:before{content:"\e079";}
.glyphicon-chevron-right:before{content:"\e080";}


#rafLink{
position: absolute;
right: 178px;
top: 10px;
background: url('/st/images/sprite.png') no-repeat 0px -362px;
padding-left: 25px;
cursor: pointer;
color: rgb(236, 236, 236);
z-index: 50;
font-weight: 700;
}


#rafCallout{
position: absolute;
z-index: 30;
top: 41px;
right: 20px;
width: 360px;
overflow: hidden;
max-height: 0;
transition: max-height 0.5s;
}

#rafCallout.show{
max-height: 800px;
}

#rafCalloutTriangleHolder{
width: 100%;
height: 7px;

}

#rafCalloutTriangle{
width: 0;
height: 0;
border-left: 7px solid transparent;
border-right: 7px solid transparent;
border-bottom: 7px solid rgb(100,100,100);
position: absolute;
right: 229px;
top: 0;
}

#rafCalloutHead{
width: 100%;
height: 105px;
padding: 30px 20px 0 92px;
background: rgb(88, 89, 91) url('/st/images/pixie_face_49x55.png') no-repeat 27px 22px;
}

#rafCalloutHead h3{
font-size: 16px;
line-height: 130%;
color: rgb(245, 245, 245);
}

#rafCalloutClose{
position: absolute;
top: 7px;
right: 7px;
cursor: pointer;
font-size: 14px;
color: rgb(215, 215, 215);
}

#rafCalloutMain{
width: 100%;
height: 232px;
padding: 33px 20px 30px 20px;
text-align: center;
background-color: rgb(247, 247, 247);
}

#rafCalloutMainDivider{
height: 20px;
border-top: 1px dashed rgb(255, 65, 65);
margin: 24px 0 12px 0;
position: relative;
}

#rafCalloutMain .action-button{
margin: 10px 0 0 0;
}

#rafCalloutHeart{
background: rgb(247, 247, 247) url('/st/images/sprite.png') no-repeat 3px -347px;
width: 34px;
height: 20px;
position: absolute;
left: 142px;
top: -8px; 
}

#rafCalloutMain h3{
color: rgb(88, 89, 91);
font-size: 18px;
font-weight: 700;
margin: 0;
}

#rafCalloutMain h6{
color: rgb(88, 89, 91);
margin: 3px 0 0 0;
}


#rafCalloutMain h4{
font-size: 18px;
color: rgb(88, 89, 91);
}

#rafCalloutLink{
border: 2px solid rgb(199, 199, 199);
color: rgb(145, 145, 145);
padding: 6px 8px;
width: 85%;
font-size: 16px;
margin: 7px 0;
display: inline-block;
text-align: center;
}

#rafCalloutFooter{
width: 100%;
padding: 25px 25px 30px 30px;
background-color: rgb(204, 204, 204);
}

#rafCalloutTerms{
max-height: 120px;
overflow-y: hidden;
padding-right: 25px;
transition: max-height 1s;
}

#rafCalloutTerms.full{
max-height: 180px;
overflow-y: scroll;
}

#rafCalloutFooter h6{
font-style: italic;
font-size: 13px;
font-weight: 700;
color: rgb(84, 84, 84);
margin: 0 0 10px 0;
}

#rafCalloutFooter p{
font-size: 14px;
line-height: 130%;
color: rgb(88, 89, 91);
margin: 0 0 1em 0;
}

#rafCalloutFooterMore{
height: 15px;
margin-top: 5px;
font-size: 14px;
font-weight: 700;
cursor: pointer;
color: rgb(38, 164, 194);
overflow: hidden;
transition: all 0.5s;
}

#rafCalloutFooterMore.ng-hide{
height: 0;
margin-top: 0;
}


#creatorWelcome{
width: 878px;

height: calc(100% - 70px);
max-height: 900px;
padding: 150px 100px 0 100px;
}


#creatorWelcomeHeader{
position: absolute;
right: 50%;
top: 47px;
transform: translateX(50%);
}


#creatorWelcomeHeader h1{
float: right;
font-size: 28px;
text-align: center;
margin: 24px 10px 0 0;

}

#creatorWelcomeHeader>div{
float: right;
background: url('/st/images/pixie_face_49x55.png') no-repeat 0 0;
width: 49px;
height: 55px;
}

#creatorWelcome .vp-scroll-bar{
overflow: auto;
max-height: calc(100% - 97px);
margin-bottom: 20px;
padding-right: 10px;
}


#creatorWelcome .section{
width: 100%;
float: left;
clear: both;
margin: 0 0 30px 0;
}

#creatorWelcome .section:last-child{
margin-bottom: 0;
}

#creatorWelcome h2{
font-size: 20px;
color: rgb(220,220,220);
margin: 0 0 5px 0;
}


#creatorWelcome .numeral{
float: left;
background: url('/st/images/numbers.png') no-repeat 0 0;
width: 32px;
height: 47px;
}

#creatorWelcome .numeral2{
background-position: 0 -47px;
}

#creatorWelcome .numeral3{
background-position : 0 -94px;
}

#creatorWelcome .numeral4{
background-position: 0 -141px;
}


#creatorWelcome .list{
float: left;
width: calc(100% - 60px);
margin: 0 0 0 25px;
}
#creatorWelcome li{
color: rgb(160, 160, 160);
  
  text-indent: -5px;
  font-weight: 400;
  font-size: 16px;
 
}

#creatorWelcome ul{
margin-left: 10px;
line-height: 130%;
}  
  
#creatorWelcome li:before{ content:"-"; position:relative; left:-5px;}

#creatorWelcome .linksTray{
width: 100%;
float: left;
clear: both;
text-align: center;
}

#creatorWelcome h3{
margin-top: 12px;
font-size: 17px;
font-weight: 700;
}


#creatorWelcome .faqLink{
font-size: 12px;
color: rgb(60, 117, 131);
}


#creatorWelcome .faqLink:hover{
color: rgb(34, 171, 203);
}


/* ------------------------------- Pay -------------------------- */

#payContent h2 {
  margin-bottom: 30px
}

#payInner{
    padding: 0px 0 0 30px;
    float: left;
    clear: both;
}



#paymentSummary{
float: left;
    clear: both;
    width: 700px;
color: rgb(183, 183, 183);
font-size: 15px;

}


#paymentSummary .paySection{
border-bottom: 1px solid rgb(54, 54, 54);
padding: 12px 16px 10px 16px;
float: left;
clear: both;
width: 100%;
}

#paymentSummary .paySection.lastSection{
border-bottom: none;
}


#paymentSummary .row{
float: left;
clear: both;
margin: 0 0 6px 0;
width: 100%;
}

#paymentSummary .row.highlight{
color: rgb(210, 210, 210);
font-weight: bold;
}




#paymentSummary .row.extraSpace{
margin: 15px 0 5px;
}



#paymentSummary .row:first-child{
margin-top: 0;
}

#paymentSummary .row.firstOfGroup{
margin-top: 20px;
}

#paymentSummary .row.gap1{
margin-top: 40px;
}



#paymentSummary .row .label{
display: inline-block;
width: 370px;
}

#paymentSummary .row .label.hidden{
color: transparent;
}

#paymentSummary .row .labelDetail{
font-size: 13px;
color: rgb(159, 156, 156);
margin-left: 5px;
font-weight: 400 !important;
}


#paymentSummary .row .date{
display: inline-block;
width: 150px;
text-align: right;
}

#paymentSummary .row .amount{
display: inline-block;
width: 120px;
text-align: right;
float: right;
}

#seeInvoiceLink{
float: left;
clear: both;
margin: 13px 0 0 16px;
font-size: 14px;
}


#billActions{
overflow: hidden;
float: right;
margin: 27px 14px 0 0;
}

#billActions .action-button{
float: right;
clear: both;
font-size: 15px;
padding: 0.6em 1.5em;
    margin: 0 0 6px 0;
}

#billActions .action-button .detail{
font-weight: 300;
margin-left: 3px;
}

#payFullAmount {
overflow: hidden;
clear: both;
float: right;
}

#payOtherAmountLink{
float: right;
clear: both;
margin: 8px 0 0px 0;
transition: color 0.2s;
}

#payOtherAmountLink.disabled{
color: rgb(74, 74, 74) !important;
}

#payOtherAmountForm{
float: right;
clear: both;
height: 130px;
overflow: hidden;
margin: 15px 0 0 0;
border-top: 1px solid rgb(50,50,50);
width: 265px;
padding-top: 20px;
transition: all 0.7s;
}

#payOtherAmountForm .closeX{
float: left;
font-size: 13px;
position: relative;
top: -18px;
color: rgb(100, 100, 100);
right: -1px;
}


#payOtherAmountForm.ng-hide{
height: 0;
margin: 0;
border-color: transparent;
padding-top: 0;
}

#payOtherAmountForm .label{
float: right;
    margin: 6px 8px;
    color: rgb(150, 150, 150);
}

#payOtherDollarsInput{
float: right;
margin: 0 0 15px 0;
padding: 7px 10px;
text-align: right;
border-color: rgb(84, 83, 83);
width: 90px;
}

.reviewHeader{
font-family: 'Open Sans', sans-serif;
float: left;
clear: both;
padding: 0;
margin: 96px 0 0px 0;
font-size: 18px;
}

.reviewHeader.higher{
margin-top: 60px;

}


#reviewLink{
float: left;
clear: both;
margin: 15px 0 0 0px;
font-size: 16px;
}

#reviewLinkNote{
    float: left;
    clear: both;
    font-size: 12px;
    color: rgb(150,150,150);
        margin: 7px 00 0 0;
}

#reviewComplete{
    float: left;
    clear: left;
    font-size: 18px;
    margin: 20px 0;
}

/* ---------------------------------- payment-modal ---------------------------------- */
#paymentModal{
    padding: 33px 47px;
    width: 530px;
    
    height: 710px;
}

#paymentModal .successMsg{
width: 100%;
float: left;
position: relative;
margin: 19px 0 0 0;
overflow: hidden;
height: 70px;
transition: height 0.4s;
}

#paymentModal .successMsg.ng-hide{
height: 0;
}

#paymentModal .successMsgInner{
margin: 6px 0 0 0;
width: 100%;
background-color: rgb(29, 148, 179);
color: rgb(255, 255, 255);
padding: 11px 10px 10px 83px;
}

#paymentModal .successMsg h5{
color: rgb(238, 238, 238);
margin: 1px 0 0 0;
font-weight: 300;
}

#paymentModal .successMsg h4{
color: rgb(255,255,255);
margin: 0;
}


#paymentModal .successMsg .whiteButton{
position: absolute;
top: 36px;
right: 5px;
cursor: pointer;
padding: 3px 8px;
font-size: 11px;
}

#paymentModal .successMsg img{
    position: absolute;
    left: 10px;
    top: -1px;
}


.whiteButton{
border: 1px solid rgb(240,240,240);
color: rgb(240,240,240);
}

.whiteButton:hover{
border: 1px solid rgb(255, 255, 255);
color: rgb(255, 255, 255);
}


#paymentModal .close{
right: 10px;
left: initial;
}

#paymentModal h4{
color: rgb(200,200,200);
margin: 8px 0 35px 0;
font-size: 15px;
}

#paymentModal .paymentOption{
overflow: hidden;
max-height: 20px;
margin: 0 0 10px 0;
padding: 0 0 20px 0;
transition: max-height 0.4s, padding-bottom 0.4s;
}

#paymentModal .paymentOption.selected{
max-height: 450px;
padding-bottom: 25px;
}

#paymentModal .paymentOption>h3{
background-color: rgb(30,30,30);
font-size: 16px;
color: rgb(200,200,200);
cursor: pointer;
float: left;
padding: 0 10px 0 0;
margin: 0 0 22px 0;
transition: color 0.2s;
}


#paymentModal .paymentOption:not(.selected)>h3:hover{
color: rgb(34, 171, 203);
}

#paymentModal .paymentOption .divider{
width: 100%;
border-top: 1px dashed rgb(56,56,56);
margin: 0;
position: relative;
top: 10px;
z-index: -1;
}

#paymentModal .row{
margin-bottom: 7px;
overflow: hidden;
float: right;
clear: both;
width: 250px;
font-size: 14px;
color: rgb(200,200,200);

}

#paymentModal .row.outdent{
width: 264px;
}


#paymentModal .row.total{
border-top: 1px solid rgb(50,50,50);
padding: 3px 0 0 0;
font-size: 15px;
color: rgb(230,230,230);
}

#paymentModal .row.total.onlyRow{
border-top: none;
}


#paymentModal .row .label{
float: left;

}




#paymentModal .row .value{
float: right;
}


#paymentModal .project-name{
  font-style: normal;
  font-size: 16px;
  font-weight: 400;
  margin-top: -4px;
  color: rgb(200,200,200);
}


#paymentModal .paymentForm {}

#paymentModal .whyPay {
margin-top:8px;
line-height:25px;
font-weight: 300;
}

#paymentModal .success {
text-align: center;
margin: 100px 0 0 0;
}

#paymentModal .message {
margin-bottom:20px;
color:#fff;
font-size: 24px;
}

#paymentModal .bill {
width:240px;
margin:30px 0 0 30px;
line-height:45px;
font-weight: 300;
}

#paymentModal .bill .left {float:left;width:170px;}

#paymentModal .bill .right {
float:left;
width:50px;
margin: 0 0 0 20px;
text-align:right;
}

#paymentModal .topBorder {
border-top:1px solid rgb(90,90,90);
}

#paymentModal .useCardOnFileWrapper {
float: right;
clear: both;
width: 250px;
margin: 0 0 10px 0;
}

#paymentModal .checkBox{
border-radius: 1px;
width: 12px;
height: 12px;
}

#paymentModal .checkBoxLabel{
margin: 0;
position: relative;
top: -2px;
left: 5px;
font-size: 13px;
color: rgb(172, 172, 172);
cursor: pointer;
}

#paymentModal .creditCard {

}

#paymentModal .cardOnFile {
float: left;
margin: 0 0 20px -3px;
font-size: 20px;
}

#paymentModal .cardOnFile label {
  margin: -3px 0 0 3px;
  font-size: 14px;
  color: rgb(210, 210, 210);
  display: inline-block;
  vertical-align: middle;
}


#paymentModal #ccForm{
float: right;
clear: both;
width: 100%;
margin: 20px 0 0 0;
}

#paymentCardDetails{
width: 100%;
float: right;
max-height: 130px;
overflow: hidden;
transition: max-height 0.4s;
}

#paymentCardDetails.ng-hide{
max-height: 0;
}

#paymentModal .creditCardLogos{
    float: left;
    margin: 7px 0;
}



#paymentModal input[type='text'] {
   height: 38px;
   font-size: 15px;
   color: rgb(221, 221, 221);
   padding: 2px 0 0 34px;
   margin: 0;
   border: 2px solid rgb(64, 64, 64);
   box-sizing: border-box;
   float: right;
   letter-spacing: 0.05em;
   background: url('/st/images/cc_icons.png') no-repeat 10px 0px;
}

#paymentModal input::-webkit-input-placeholder { 
color: rgb(100,100,100);
}


#paymentModal input::-moz-placeholder { /* Mozilla Firefox 19+ */
color: rgb(150,150,150);
opacity:  1;
}

#paymentModal input:-ms-input-placeholder { /* Internet Explorer 10+ */
color: rgb(150,150,150);
}



#paymentModal input[name="cardNumber"]{
width: 250px;
clear: both;
}

#paymentCardExpiryCvc{
float: right;
width: 250px;
clear: both;
}

#paymentModal input[name="cardExpiry"],
#paymentModal input[name="cardCvc"]{
   float: left;
   width: 50%;
   margin: 0;
   border-top: none;
   background-position-y: -72px; 
}

#paymentModal input[name="cardExpiry"]{
border-right: none;
background-position-y: -36px; 
}



#paymentModal .saveForLaterWrapper {
    margin: 14px 0 15px 0;
    float: right;
    clear: both;
    width: 250px;
    text-align: left;

}


#paymentModal .saveForLaterLabel{
  font-size: 12px;
  color: rgb(210, 210, 210);
  margin: -6px 0 0 1px;
  display: inline-block;
  /* float: left; */
  /* display: table-cell; */
  vertical-align: middle;
}

#paymentModal .divider {margin:0 2px;}
#paymentModal .expirationWrapper input {width:53px}
#paymentModal .securityWrapper input {width:74px}
#paymentModal .securityWrapper {margin-left:13px;}


#paymentModal .buttonWrapper{
position:relative;
margin-top:16px;
float: right;
clear: both;
}


#paymentModal .payButton{
float: right;
width: 183px;
margin: 3px 0 0 0;
font-size: 14px;
}


#paymentModal .errors {
color: rgb(252,91,90);
font-size: 13px;
margin: 5px 0 0 0;
float: right;
clear: both;
height: 18px;
overflow: hidden;
transition: height 0.2s;
}

#paymentModal .errors.ng-hide {
height: 0;
}

#paymentModal .digicert {
float: right;
margin: 0 0 0 13px;
}


#paymentModal .logos {
float: left;
display: block;
margin: 7px 0 0 14px;
}

#paymentModal .spinner-blocks {
float: right;
width: 16px;
height: 11px;
position: relative;
right: 14px;
top: 14px;
}

#paymentModal .paymentInfo{
padding: 0 30px;
}

#paymentModal .paymentInfo p.how{
float: left;
font-size: 14px;
margin: 23px 0 0 0;
color: rgb(177, 176, 176);
clear: both;
}

#paymentModal ul{
float: left;
clear: both;
font-size: 14px;
color: rgb(200,200,200);
margin: 0 0 0 16px;
}


#paymentModal ul li{
margin: 0 0 5px 0;
list-style-image: url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAUAAAAKCAMAAABL52QCAAAABlBMVEXAv7////9jt0BgAAAAAnRSTlP/AOW3MEoAAAARSURBVHgBY2AEAZwkGOCSBQAFkQAu58qUSAAAAABJRU5ErkJggg==);
}


#paymentModal .infoBox{
float: left;
border: 1px solid rgb(57, 57, 57);
padding: 14px 19px;
margin: 21px 0 0 0;
}


#paymentModal .infoBox dl{
float: left;
font-size: 14px;
margin: 0 0 4px 0;
clear: both;
}

#paymentModal .infoBox dl.separated{
margin-top: 10px;
}


#paymentModal .infoBox dt{
float: left;
width: 150px;
color: rgb(100, 100, 100);
}

#paymentModal .infoBox dd{
float: left;
color: rgb(200, 200, 200);
    text-align: right;
    width: 150px;
    margin: 0;
}

#paymentCheckInfo .infoBox dd{
width: 170px;
}

/********************************* EMAIL SETTINGS *********************************/

#emailSettings h2{
  font-size: 12px;
  text-align: center;
  position: absolute;
  left: 16px;
  top: 10px;
  color: rgb(118, 118, 118);
}

#emailSettings h3{
  font-size: 17px;
  margin: 0 0 20px 0;
  background-color: rgb(60,60,60);
  padding: 12px 18px;
  color: rgb(238, 238, 238);
}

#emailSettings h3 span{
float: right;
font-size: 14px;
color: rgb(223, 160, 244);
}

#emailSettings.modal{
  padding: 75px 75px 10px;
  height: calc(100% - 100px);
  
  width: 900px;
  color: rgb(210, 210, 210);
}

#emailSettings.modal .closeX{
  right: 10px;
  left: auto;
}

#emailSettings .option{
margin: 0 0 12px 20px;
cursor: pointer;
float: left;
clear: left;
}

#emailSettings .subOptions{
  float: left;
  clear: left;
  margin: 10px 0 20px 20px;
  overflow: hidden;
  max-height: 300px;
  transition: max-height 0.5s, margin 0.5s;
}


#emailSettings .subOptions.ng-hide{
max-height: 0;
margin: 0 0 0 20px;
}



#emailSettings .subOptions .option{
margin-left: 60px;
}

#emailSettings input{
  width: 50px;
  margin: 0px 6px;
  font-size: 14px;
  padding: 4px 8px;
  text-align: right;
}

#emailSettings input.dollarInput{
margin-left: 3px;
}

#emailSettings .checkBox{
display: inline-block;
vertical-align: middle;
margin: 0 8px 0 0;
}

#emailSettings h4{
display: inline-block;
vertical-align: middle;
}

#emailSettings .radioButton{
display: inline-block;
vertical-align: middle;
margin: 0 8px 0 0;
}



#emailSettings .divider{
width: 100%;
border-top: 2px solid rgb(56, 56, 56);
height: 1px;
float: left;
clear: both;
margin: 10px 0 18px 0;
}

#emailSettings .postProdOption{
margin-top: 10px;
}

#emailSettings .hintBox{
float: left;
font-size: 14px;
background-color: rgb(32, 52, 60);
padding: 8px 18px;
margin: 10px 0 0 26px;
height: 34px;
overflow: hidden;
color: rgb(211, 211, 211);
transition: all 0.4s;
}

#emailSettings .hintBox .blue-link3{
margin-left: 3px;
}

#emailSettings .hintBox.ng-hide{
margin: 0 0 0 26px;
padding: 0 18px;
height: 0;
}

#emailSettings .updateLink{
font-size: 12px;
margin: 0 0 0 3px;
}

/*-------------------------------------------------- Payments ----------------------------------------------------*/

#paymentsInner{
padding: 0 0 0 16px;

}


#paymentsContent h4{
color: rgb(183, 183, 183);
font-size: 14px;
font-weight: 400;
margin: 0 0 4px -1px;
float: left;
clear: left;
}

#paymentsContent h3{
font-size: 15px;
font-weight: 700;
}


#paymentsInfo{
margin-top: -13px;
float: left;
}


#paymentsContent .section{
float: left;
clear: left;
width: 750px;
}

#paymentsInfo .section{
margin: 0 0 14px 0;
padding: 0 0 11px 17px;
border-bottom: 1px solid rgb(54, 54, 54);
}
/*
#paymentsContent .section.commission,
#paymentsContent .section.payments,
#paymentsContent .section.payouts{*/
#paymentsContent .section.noBorder{
border-bottom: none;
padding-bottom: 0;
margin-bottom: 15px;
}

#paymentsContent .section.commission{
margin-bottom: 0px;
}

#paymentsContent .section h3{
float: left;
font-family: 'Open Sans', sans-serif;
font-weight: 600;
color: rgb(229, 229, 229);
font-size: 14px;
}

#paymentsContent .section.header{
background-color:  rgb(48, 48, 48);
padding-top: 10px;
height: auto;
padding-bottom: 3px;
margin-bottom: 24px;
padding-left: 16px;
position: relative;
}


#paymentsContent .section.header .amount{
    margin-top: 1px;
}

#paymentsContent .row{
float: right;
clear: right;
font-size: 14px;
color: rgb(170, 170, 170);
overflow: hidden;
padding-right: 17px;
}

#paymentsContent .row .amount{
float: right;
width: 200px;
text-align: right;
}

#paymentsContent .row.total{
color: rgb(238, 238, 238);
}

#paymentsContent .row .date{
float: right;
width: 150px;
text-align: right;
}

#paymentsContent .row{
transition: height 0.6s, background-color 0.4s, margin-bottom 0.6s;
}

#paymentsContent .row,
#paymentsContent .row.ng-enter.ng-enter-active {
height: 20px;
background-color: transparent;
margin-bottom: 1px;
}


#paymentsContent .row.ng-leave {
height: 0;
margin-bottom: 0;
transition: height 0, background-color 0;
}




#paymentsContent .row.ng-enter {
height: 0;
margin-bottom: 0;
background-color: rgb(13, 100, 118);

}


#paymentsContent .row.ng-enter.ng-enter-active{
transition: background-color 0.4s ease 1.0s, height 0.4s, margin-bottom 0.4s;
}


#schedulePayment{
float: left;
clear: left;
margin: 45px 0 0 0;
}

#schedulePayment .header,
#wrapUp .header{
cursor: pointer;
}

#installmentTooSmallWarning{
float: right;
color: rgb(206, 51, 51);
font-size: 14px;
height: 20px;
overflow: hidden;
transition: height 0.3s;
}

#installmentTooSmallWarning.ng-hide{
height: 0;
}


#schedulePaymentHidable{
padding: 0 0 20px 16px;
overflow: hidden;
max-height: 270px;
clear: both;
transition: all 0.3s;
}

#schedulePaymentHidable img{
height: 49px;
}

#schedulePaymentHidable.ng-hide{
max-height: 0;
padding-bottom: 0;
}

#schedulePaymentCommissionAlert{
float: right;
position: relative;
background-color: rgb(121, 122, 123);
width: 100%;
padding: 10px;
margin: 0 0 10px 0;
height: 74px;
overflow: hidden;
transition: all 0.3s;
}

#schedulePaymentCommissionAlert.ng-hide{
height: 0;
margin: 0;
padding: 0 10px;
}


#schedulePaymentCommissionAlert p{
position: absolute;
top: 12px;
margin: 0;
left: 64px;
font-size: 13px;
padding-right: 10px;
}


#paymentsInner .left{
float: left;
width: 345px;
}

#paymentsInner .right{
float: left;
margin: 0px 0 0 46px;
border-left: 1px solid rgb(47, 47, 47);
padding: 0px 10px 0px 35px;
color: rgb(124, 124, 124);
width: 343px;
}

#paymentsInner .right h5{
font-size: 14px;
    font-weight: 700;
}

#paymentsInner .right ul{
margin: 15px 0 0 31px;
}

#paymentsInner .right li{
list-style-type: disc;
margin: 0 0 12px 0;
font-size: 14px;
line-height: 110%;
}



#paymentsContent .question{
float: left;
clear: both;
font-size: 14px;
color: rgb(167, 167, 167);
width: 100%;
    margin: 0 0 10px 0;
}

#paymentsContent .questionLabel{
color: rgb(190, 190, 190);
float: left;
}


#schedulePayment input{
float: right;
font-size: 13px;
padding: 6px 8px;
width: 134px;
color: rgb(178, 178, 178);
box-sizing: border-box;
border-color: rgb(64, 63, 63);

}

#schedulePayment  .dropdown-menu.datepicker{
position: absolute;
}

#paymentsInner .left .action-button{
float: right;
clear: both;
width: 134px;
padding: 0.5em 0;
margin: 5px 0 15px 0;
}

#schedulePayment .error{
float: right;
clear: both;
margin: 5px 0 0 0;
overflow: hidden;
text-align: right;
max-height: 40px;
transition: max-height 0.3s;
}

#schedulePayment .error.ng-hide{
max-height: 0px;
}

#paymentsInner .section.header .downChevronWhite{
display: inline-block;
position: absolute;
top: 16px;
right: 10px;
transition: opacity 0.3s;
}

#paymentsInner .section.header .downChevronWhite.ng-hide{
opacity: 0;
}


.calendarBackground {
background-image: url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABAAAAAPCAMAAADarb8dAAAAJFBMVEUAAAB6fHx6fHx6fHx6fHx6fHx6fHx6fHx6fHx6fHx6fHx6fHz4jo6WAAAAC3RSTlMAIEBgcICPn7/f7wxmi8UAAABBSURBVHgBvcjBEYAwDANBxSAwUf/9gjwTQwXs4x4HC7rcsFCuEmVQy7V75Owx5ZPskWINtD/HGa3GoY/AI14DuAHKwwNgz/5AbgAAAABJRU5ErkJggg==);
}

#schedulePayment  .calendarBackground{
background-repeat: no-repeat;
padding-left: 26px;
background-position: 5px 6px;
}

.dollarBackground {
   background-repeat: no-repeat;
	background-image: url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAkAAAAPCAMAAAABFhU/AAAAMFBMVEUAAAB6fHx6fHx6fHx6fHx6fHx6fHx6fHx6fHx6fHx6fHx6fHx6fHx6fHx6fHx6fHxf5cZgAAAAD3RSTlMAECAwQFBgcICfr7/P3+8Gi+IRAAAAUklEQVQI1zXOOxLAIAwD0QUT4h/4/rdNAVGjV2kEQOvcDD0tnss6INvcIwALdAAQ/muW5hG6K+ddSSu74ikBoGg1wIWFLmhesXMLgNh674XhAB+gzgJMkcZzJQAAAABJRU5ErkJggg==);
}

#schedulePayment  .dollarBackground{
padding-left: 26px;
background-position: 8px 6px;
}

#schedulePayment .spinner-blocks{
float: right;
margin: 11px 15px 0 0;
}

#wrapUp{
float: left;
clear: both;
font-family: 'Open Sans', sans-serif;
}

#wrapUpHidable{
padding: 10px 15px 20px 30px;
overflow: hidden;
max-height: 400px;
clear: both;
margin-bottom: 30px;
transition: max-height 0.3s;
}

#wrapUpHidable.ng-hide{
max-height: 0;
}

#wrapUp .todo{
padding: 0 0 0 0;
width: 100%;
float: left;
clear: both;
margin: 0 0 33px 0px;
}

#wrapUp .prompt{
padding: 0 0 0 20px;
background-repeat: no-repeat;
background-position: 0 6px;
color: rgb(177, 177, 177);
font-size: 14px;
width: 500px;
float: left;
font-family: 'Open Sans', sans-serif;
}

#wrapUp .promptHint{
font-size: 13px;
color: rgb(160, 160, 160);
}

#wrapUp input,
#wrapUp .action-button{
float: right;
clear: right;
width: 175px;
font-family: 'Lato', sans-serif;
}

#payCommission{
margin: 0 0 8px 0;
}


#wrapUp .altOption{
color: rgb(29, 131, 155);
cursor: pointer;
float: right;
clear: right;
font-size: 13px;
margin: 5px 0 0 0;
padding: 0;
background: none;
border: none;
}

#wrapUp .altOption:hover{
color: rgb(15,147,178);
}

#wrapUp .altOption[disabled="disabled"]{
color: rgb(80, 80, 80) !important;
cursor: auto;
}


#wrapUp input{
margin: 0px 0 10px 0;
padding: 6px 8px 5px 24px;
box-sizing: border-box;
background-position: 8px 6px;
background-repeat: no-repeat;
font-size: 14px;
color: rgb(190, 190, 190);
}

#todoReportComplete{
margin-bottom: 36px;
}

#todoReportComplete .action-button{
width: 150px;
}


#wrapUp .confirm{
float: left;
overflow: hidden;
height: 20px;
transition: height 0.3s;
margin: 25px 0 0 42px;
font-weight: 600;
font-size: 14px;
}

#wrapUp .confirm.ng-hide{
height: 0;
}

.todoArrow {
background-image: url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAA4AAAAJCAMAAAA1k+1bAAAAHlBMVEUAAACkpaWkpaWkpaWkpaWkpaWkpaWkpaWkpaWkpaU8evKAAAAACXRSTlMAEDBAYICfz+9WFw9nAAAAK0lEQVR4AWPAAZg4WJC5jOyc2PicSICZgYEVBjg42ZAUs6HwWCA8BB9EAABECAEYbBxiuQAAAABJRU5ErkJggg==);
}


#wrapUp #todoReportComplete .confirm,
#wrapUp #todoReportOffPlatform .confirm{
margin-top: 7px;
}


#allCompleteMsg{
height: 130px;
overflow: hidden;
float: left;
font-size: 14px;
font-weight: 600;
color: rgb(229, 229, 229);
transition: height 0.5s ease 1s;
}

#allCompleteMsg.ng-hide{
height: 0;
}

#allCompleteMsg ul{
float: left;
    margin: 20px 17px 0 41px;
}

#allCompleteMsg img{
float: left;

}

.button-hint{
border-top: 1px solid rgb(66,66,66);
padding-left: 35px;
width: 466px;
font-size: 14px;
overflow: hidden;
}

.button-hint-inner{
border-width: 0 1px 1px 1px;
border-style: solid;
border-color: rgb(66,66,66);
width: 100%;
padding: 13px 15px 20px;
color: rgb(193, 193, 193);
}

.button-hint-inner p{
margin: 6px 0 9px 0;
}

.button-hint-inner h5{
font-style: italic;
color: rgb(224, 224, 224);
}

.button-hint-inner ol{
margin: 0 0 0 45px;
}

.button-hint-inner li{
list-style: decimal;
margin: 0 0 6px 0;
}


/*******************************************  INVOICE  ***********************************************/

#invoice{

height: calc(100% - 40px);
width: 630px;
padding: 20px 9px 15px 25px;
color: rgb(180, 180, 180);
overflow: hidden;
}

#invoice .closeX{
position: absolute;
top: 0px;
right: 11px;
font-size: 13px;
}


#invoice .vp-scroll-bar{
height: 100%;
width: 100%;
overflow-y: auto;
padding-right: 20px;
}


#invoice .headerLeft{
float: left;
margin: 0 0 5px 0;
}


#invoice h5{
line-height: 165%;
font-size: 12px;
margin: 2px 0 20px 0;
color: rgb(180, 180, 180);
}


#invoice .headerLeft .label,
#invoice .headerLeft .value{
font-weight: 700;
color: rgb(122, 122, 122);
font-size: 14px;
margin: 0 0 3px 0;
}


#invoice .headerLeft .label{
float: left;
width: 72px;
clear: both;
}

#invoice .headerLeft .value{
float: left;
}


#invoice .headerRight{
float: right;
margin: 19px 0 0 0;
}

#invoice .headerRight h1{
float: right;
font-size: 16px;
color: rgb(238, 238, 238);
}

#invoice .headerRight h6{
float: right;
clear: both;
font-size: 12px;
margin: 1px 0 0 0;
color: rgb(159, 158, 158);
}


#invoice .headerRight .status{
border: 1px solid rgb(114, 114, 114);
padding: 10px 20px;
font-size: 16px;
margin: 58px 0 0 0;
float: right;
clear: both;
}


#invoice .sectionHeader{
width: 100%;
float: left;
margin: 17px 0 13px 0;
color: rgb(238, 238, 238);
font-size: 14px;
background-color: rgb(45,45,45);
padding: 8px 14px;
}


#invoice .sectionHeader.balanceHeader{
margin-bottom: 1px;
background-color: rgb(72, 71, 71);
}


#invoice .row{
    float: left;
    clear: both;
    font-size: 14px;
    width: calc(100% - 25px);
    margin: 0 0 5px 15px;
}


#invoice .row .label{
float: left;
width: 280px;
padding-left: 18px;
}


#invoice .row .label .note{
font-size: 11px;
color: rgb(134, 134, 134);
margin-left: 2px;
}



#invoice .row .date{
float: left;
width: 140px;
text-align: right;
    min-height: 1px;
}

#invoice .row .value{
float: right;
width: 100px;
text-align: right;
}

#invoice .row.total{
margin-top: 13px;
color: rgb(220, 220, 220);
font-weight: 700;
}

#invoice .row.total .label,
#invoice .row.secondTotal .label{
padding-left: 0;
}

#invoice .row.totalPayments{
margin-top: 15px;

}


#reviewCreator{
float: left;

padding: 30px 26px;
height: 550px;
}


#reviewCreator .close{
right: 8px;
left: initial;
top: 0px;
}

#reviewCreator h2{
margin: 0;
float: left;
clear: both;
font-family: 'Open Sans';
font-weight: 600;
font-size: 22px;
}

#reviewCreator .selectButtons{
float: left;
clear: both;
margin: 15px 0 30px 0;
}

#reviewCreator .selectButtons.complete .selectButton{
cursor: auto !important;
}

#reviewCreator .selectButton{
width: 116px;
margin: 0 15px 0 0;
background-color: rgb(49, 84, 94);
float: left;
font-weight: 600;
color: rgb(255,255,255);
font-size: 18px;
cursor: pointer;
padding: 15px 0;
text-align: center;
}


#reviewCreator .selectButton.selected{
background-color: rgb(28, 146, 177);
}

#reviewCreator textarea{
width: 100%;
    padding: 12px;
    height: 200px;
margin: 8px 0 0 0;
}

#reviewCreator textarea.complete{
color: rgb(200,200,200);
border-color: rgb(49, 49, 49);
}    

#reviewCreator  .inputNote {
    margin: 5px 0 0 0;
    font-size: 12px;
    color: rgb(100, 100, 100);
    font-weight: 600;
}

#reviewCreator  .action-button{
    width: 130px;
    float: right;
}

#reviewCreator .spinner-blocks{
    float: right;
    margin: 15px 12px;
}

#reviewCreator .error{
    float: right;
    clear: both;
    margin: 5px 0;
}

#reviewCreator .success{
float: right;
clear: both;
margin: 12px 0 0 0;
font-size: 18px;
    color: rgb(255, 255, 255);
}