/* Copyright (c) 2016 ZipSocket, Inc.  */
/* All rights reserved.      */



#shareSelectorContainer {
   width: 100%;
   overflow: hidden;
   flex: 0 0 40px;

   /* flexbox */
   display: flex;
   flex-flow: row nowrap;
   justify-content: center;
   align-items: center;
}

#websiteLabel {
   font-size: 0.9em;
   color: #999;
   margin: 0px 10px 0px 15px;
}

#shareTypeMenuSelector {
   margin-left: 15px;
   margin-right: 10px;
   padding: 2px 22px 3px 5px;
   flex: 0 0 auto;
   font-size: 0.9em;
   color: inherit;
   -webkit-appearance: none; /* remove arrow */
   -moz-appearance: none;
   appearance: none;
   background: url(../images/downArrow.svg) no-repeat 98% 0;
   border-radius: 4px;
   border: 1px solid #3AACD6;
}

#shareTypeMenuSelector:focus {
   outline: none;
}

#shareTypeOptions {
   flex: 1 1 auto;
}

#shareScreenOptions,
#shareWebsiteOptions,
#shareFileOptions,
#shareVideoOptions {
   /* flexbox */
   display: flex;
   flex-flow: row nowrap;
   align-items: center;
   justify-content: flex-start;
   flex: 0 0 auto;
}

#shareWebsiteTextInput {
   color: black;
   outline: 1px solid transparent;
   padding-right: 20px !important;

   border: 1px solid #3AACD6;
   border-radius: 4px;
   box-sizing: border-box;
   width: 100%;

   flex: 1 1 auto;
}

#addWebsiteSpinner {
   position: relative;
   left: -20px;
   top: 0px;
}

#addToChromeButton {
   color: white;
   background-color: #3AACD6;
   padding: 3px 8px 4px 8px;
   border-radius: 4px;
   outline: none;
   border: none;
   font-size: 0.9em;
}

html.useHover #addToChromeButton:hover {
   background-color: #60B2D6
}

.labelItem {
   font-weight: 200;
   font-size: 0.8em;
   color: #999;
   margin-left: 8px;
}


/* screen sharing */

.shareItem, .screenItem {
   color: inherit;
   font-size: 0.9em;
   white-space: nowrap;
   padding: 3px 6px 2px 6px;
   margin: 0px;
   cursor: pointer;
   outline: none;
   background-color: transparent;
}

.shareItem:disabled,
.screenItem:disabled {
   color: #BBB !important;
   cursor: auto !important;
}

/* only show hover effect if it's disabled */
html.useHover .screenItem:not([disabled]):hover,
html.useHover .shareItem:not([disabled]):hover {
   color: #FFF;
   background-color: #3AACD6;
}

.screenItemSelected {
   color: #FFF;
   background-color: #3AACD6;
}


.fileItem {
   font-size: 0.9em;
   padding: 2px 8px 1px 8px;
   margin: 0px;
   cursor: pointer;
}

/* borders */
.borderItemSingle {
   border: 1px solid #3AACD6;
   border-radius: 4px;
   pointer-events: auto; /* show tooltips when disabled */
}

.borderItemLeft {
   border: 1px solid #3AACD6;
   border-top-left-radius: 4px;
   border-bottom-left-radius: 4px;
   pointer-events: auto; /* show tooltips when disabled */
}

.borderItemMiddle {
   border-top: 1px solid #3AACD6;
   border-right: 1px solid #3AACD6;
   border-bottom: 1px solid #3AACD6;
   border-left: none;
   pointer-events: auto; /* show tooltips when disabled */
}

.borderItemRight {
   border-top: 1px solid #3AACD6;
   border-right: 1px solid #3AACD6;
   border-bottom: 1px solid #3AACD6;
   border-left: none;
   border-top-right-radius: 4px;
   border-bottom-right-radius: 4px;
   pointer-events: auto; /* show tooltips when disabled */
}

.itemSolo {
   border: 1px solid #3AACD6;
   border-radius: 4px;
}


#fileDialog {
   display: none;
   /* this might not work in safari, display none may cause the element to be disabled. if that's the case
      setting the position to fixed and moving it offscreen is a suggested hack */
}

.fileDragHelpText {
   font-size: 0.7em;
   margin-left: 10px;
}