/**********************************************
 *
 * share with friend
 *
 **********************************************/

/*
 * Tab
 */
.custom-nav-tabs {
  border-bottom: 1px solid #D1D3D4;
}

.custom-nav-tabs li.tab-item {
  display: inline-block;
  position: relative;
  top: 1px;

  border-bottom: 1px solid #D1D3D4;
  border-radius: 5px 5px 0px 0px;
  background-color: #E6E7E8;
  color: #808080;
  padding: 4px 15px;
  margin-right: 5px;
  font-family: 'Montserrat', 'sans-serif';
  font-size: 14px;
}
.custom-nav-tabs li.tab-item:hover {
  cursor: pointer;
}

.custom-nav-tabs li.tab-item.selected {
  color: #FFF;
  background-color: #7BAFC2;
  border-bottom-color: #7BAFC2;
}
.custom-nav-tabs li.tab-item.selected:hover {
  cursor: default;
}

/*
 * Share
 */
.toolbar .nav>li {
  z-index: 0;
}

.open .dropdown-toggle.btn-default {
  background-color: transparent;
}

/*.dropdown-menu {
  right: 0;
  left: auto;
}*/

.share-modal .modal-title.line-bottom {
  border-bottom: 0;
}

.modal-title .search-bar, 
.modal-title .search-bar div {
  padding: 0;
  position: relative;
}
.modal-title .search-input {
  top: -2px;
}
.modal-title .search-input input {
  width: 100%;
  height: auto;
  border: 1px solid #D1D3D4;
 font-family: 'Open Sans', 'sans-serif';
  border-radius: 0;
  padding: 3px 30px 3px 5px;
}
.modal-title .search-input img {
  width: 30px;
  height: 30px;
  position: absolute;
  right: 0;
}

img.header-icon {
  width: 55px;
  padding: 0;
  position: relative;
  top: 25px;
}


/**********************************************
 *
 **********************************************/
.modal-body.share-modal  {
  height: 550px;
}
.share-file {
  /*margin-top: 30px;*/
  margin-top: 0;
  padding-left: 0;
  padding-right: 0;
}
.modal-body.share-modal label {
  font-size: 12px;
  color: #3C3228;
  padding-left: 0;
}
.modal-body.share-modal .share-link label {
  font-size: 14px;
  margin-right: 10px;
}
.modal-body.share-modal .share-link .manage-public-link label {
  font-size: 12px;
  cursor: pointer;
}
.share-link .file-detail .file-name span {
  font-size: 14px;
}
.modal-body.share-modal .share-email label {
  font-size: 14px;
  margin-right: 10px;
}
.share-email .file-detail .file-name span {
  margin-left: 5px;
  font-size: 12px;
}
.modal-body.share-modal label.readonly {
  color: #D1D3D4;
}
.modal-body.share-modal label input:hover {
  cursor: pointer;
}

.modal-error-message {
  padding: 0;
  margin-top: 5px;
  min-height: 40px;
}
.alert-danger {
  background-color: #EE9494;
  border-color: #EE9494;
  color: #AA3347;
}
.alert-success {
  color: #FFF;
  background-color: #8EB734;
}
.alert-warning {
  background-color: #FCEC5E;
  border-color: #FCEC5E;
  color: #3C3228;
}
.alert-warning .error-message {
  color: #AA324B;
}

.modal-error-message div {
  margin-bottom: 0;
  padding: 10px 15px;
}
.modal-error-message div img {
  width: 30px;
  height: 30px;
  margin-right: 10px;
  margin-top: -4px;
}

.share-file .shared-user-list {
  position: relative;
  height: 285px;
}

.permission-setting.header {
  border-bottom: 0;
  overflow: auto; 
  border-radius: 10px 10px 0 0;

  right: 30px;
  left: 30px;
  padding: 0
}
/*.permission-setting, .share-file .share-list .permission-setting {
  position: relative;
  margin: 1px 0 0 0;
  padding: 0;
  z-index: 1;
  border: 0;
}*/

.share-file .permission-setting {
  border-top: 2px solid #E6E7E8;
  border-left: 2px solid #E6E7E8;
  border-right: 2px solid #E6E7E8;
}
.permission-setting .table > tbody > tr > td {
  border-bottom: 0;
  padding: 7px 0;
  background-color: #FFF;
}
.permission-setting .table > tbody > tr > td.username {
  font-size: 12px;
  color: #3C3228;
  padding-left: 15px;
}
.permission-setting .username.recent-shared-user,
.permission-setting .table > tbody > tr > td.username.recent-shared-user {
  color: #4B9BCD;
}
.permission-setting .username .status {
  font-size: 12px;
  font-style: italic;
  color: #4B9BCD;
  margin-left: 5px;
}
.permission-setting .username  {
  margin-bottom: 0;
  color: #808080;
}
.permission-setting .username.set-top {
  margin-top: 5px;  
}
.permission-setting .display-name {
  font-family: 'Montserrat', 'sans-serif';
  margin-bottom: 0;
  margin-top: -2px;
}

/*
 * selected user table to share
 */
.selected-user-table .permission-setting td.username .avatar-profile-container {
  margin-left: 10px;
}
.selected-user-table .permission-setting .table > tbody > tr > td.username {
  padding: 7px 0;
}

.selected-user-table .permission-setting td.username .username .user-detail {
  width: 325px;
}
.selected-user-table .permission-setting  td.username .display-name ,
.selected-user-table .permission-setting td.username .username {
  overflow: hidden;
  white-space: nowrap;
  text-overflow: ellipsis;
}

.permission-setting .table > thead > tr > th {
  border-bottom: 1px solid #E6E7E8;
  padding: 8px 0;
}
.permission-setting .table > thead > tr > th:nth-child(3) {
  max-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.permission-setting td.edit-val {
  text-align: center;
}
.permission-setting td.edit-val.admin.border-left {
  border-left: 1px solid #E6E7E8;
}

.permission-setting.header .table.permission-list {
  border: 0;
  font-family: 'Montserrat', 'sans-serif';
  font-size: 12px;
}
.share-file .permission-setting.body {
  position: absolute;
  top: 35px;
  left: 0;
  right: 0;
  z-index: 1010;
  height: 250px;
  overflow-y: auto;
  border-top: 1px solid #E6E7E8;
  border-bottom: 2px solid #E6E7E8;
  border-left: 2px solid #E6E7E8;
  border-right: 2px solid #E6E7E8;
  border-radius: 0 0 10px 10px;
  background-color: #FFF;
  padding: 0 0 3px 0;
}
.share-file .file-detail {
  margin-top: 20px;
}
.share-file .form-group {
  margin-bottom: 0;
}

.share-drive {
  margin-bottom: 10px;
  height: 24px;
}

.share-drive button {
  width: auto;
  height: 24px;
  font-size: 14px;
  padding: 0 7px;
  margin-left: 5px;
}

.empty-shared-list {
  text-align: center;
  padding: 30px 0;
}
.empty-shared-list p, 
.search-user-list p {
  text-align: center;
  margin-bottom: 0;
  font-size: 13px;
  font-style: italic;
}
.empty-shared-list .btn-create {
  width: auto;
  padding: 4px 15px;
  margin: 10px 0;
}

.table.permission-list {
  margin-bottom: 0;
/*  border-left: 2px solid #D1D3D4;
  border-right: 2px solid #D1D3D4;
  border-bottom: 2px solid #D1D3D4;*/
  border: 0;
}
.table.permission-list>tbody+tbody{
  border-top: 0;
}
.permission-header {
  font-family: 'Montserrat', 'sans-serif';
  color: #3C3228;
  font-size: 14px;
  margin-bottom: 5px;
}
.edit-header {
  color: #808080;
  font-size: 12px;
  text-align: center;
}
.permission-setting .table > thead > tr > th.edit-header.username {
  padding-left: 15px;
  text-align: left;
}
.permission-setting .table > thead > tr > th.edit-header.username input{
  margin-right: 4px;
}
.username {
  color: #3C3228;
}
.close-icon {
  cursor: pointer;
}
.close-icon:hover {
  color: #4B9BCD;
}
.table.permission-list .disable-permission {
  font-size: 10px;
  color: #4B9BCD;
}

.default-permission-sign {
  color: #8EB734;
}

/*
 * share with friend modal > search user
 */
.search-user-list {
  border-right: 2px solid #D1D3D4;
}
.search-user-list .file-detail {
  margin-top: 10px;
  margin-bottom: 10px;
}
.search-user-list input {
  border-radius: 0;
  border: 1px solid #D1D3D4;
}

.search-user-list .result {
  height: 320px;
  border-radius: 5px;
  border: 1px solid #D1D3D4;
  margin-top: 10px; 
  margin-bottom: 10px;
  padding: 10px;
  overflow-y: auto;
}
.result .result-not-found {
  font-style: italic;
}
.result .user-result {
  font-size: 12px;
  padding: 0 0 15px 0;
  word-break: break-all;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.user-result p {
  font-style: normal;
  text-align: left;
}

.user-result .avatar-profile-container {
  margin-top: 3px;
}

.user-result .display-name {
  font-family: 'Montserrat', 'sans-serif';
  color: #3C3228;
}
.user-result .username {
  color: #808080;
  font-family: 'Open Sans', 'sans-serif';
}

.user-result .display-name,
.user-result .username {
  overflow: hidden;
  text-overflow: ellipsis;
}

.user-result .display-name.set-top {
  margin-top: 8px;
}
.permission-list .display-name.set-top {
  padding-top: 6px;
  margin-top: 0;
}

.result .user-result .status {
  font-size: 12px;
  font-family: 'Open Sans', 'sans-serif';
  font-style: italic;
  color: #4B9BCD;
  margin-left: 5px;
}
.select-user-btn-group {
  padding: 4px 0; 
  text-align: right;
}
.show-select-user {
  display: none;
}

.result .select-user-btn,
.result .deselect-user-btn {
  width: 18px;
  height: 18px;
  border: 0;
  margin-top: 4px;
}
.result .select-user-btn {
  background: url("../img/modal/share-drive-modal/add-people-inline-blue.svg") no-repeat 0px 0px;
}
.result .deselect-user-btn {
  background: url("../img/modal/share-drive-modal/unshare-people-inline.svg") no-repeat 0px 0px;
}

/* 
 * share with friend modal > selected user 
 */
.share-file .selected-user-table .permission-setting.body {
  height: 145px;
}
.share-file .selected-user-table .permission-list td:last-child {
  text-align: right;
  padding-right: 10px;
}
.share-file .selected-user-table .permission-list td:last-child i:hover {
  color: #4B9BCD;
  cursor: pointer;
}

.selected-user-list i.fa-caret-right,
.selected-user-list i.fa-sort-desc {
  font-size: 16px;
  color: #0587B9;
  cursor: pointer;
}
.selected-user-list span {
  font-size: 12px;
  color: #3C3228;
  padding-left: 5px;
}
.selected-user-list i.fa-sort-desc {
  vertical-align: text-top;
}

.selected-user-table {
  position: relative;
  height: 240px;
}
.selected-user-list .permission-setting.header {
  position: absolute;
  left: 0;
  right: 0;
}
.confirm-share {
  position: absolute;
  right: 0;
  bottom: 0;
}

/* 
 * share with friend modal > shared list 
 */
.shared-list {
  padding: 0;
  top: 10px;
  position: relative;
}
.shared-list i.fa-caret-right,
.shared-list i.fa-sort-desc {
  font-size: 16px;
  color: #0587B9;
  cursor: pointer;
}
.shared-list i.fa-sort-desc {
  vertical-align: text-top;
}
.shared-list span {
  font-size: 12px;
  color: #3773A5;
}
.shared-list span.label {
  color: #3C3228;
  padding-left: 0;
}
.shared-list img {
  width: 18px;
  height: 20px;
  vertical-align: text-top;
}

.shared-list .permission-setting.header {
  position: absolute;
  right: 0;
  left: 0;
}
.share-file .shared-list .permission-setting.body {
  height: 110px;
  top: 55px;
}

.shared-list .permission-setting .avatar-profile-container {
  vertical-align: middle;
}

/* 
 * share with friend modal > unshare
 */
.permission-setting .table>tbody>tr>td.username input {
  margin-right: 5px;
}
.permission-setting .avatar-profile-container.indent {
  margin-left: 20px;
}

/*
 * share with friend modal > set default permission
 */
.default-permission-checkbox {
  padding: 10px 0 30px 0;
}
.share-file .divider {
  border-bottom: 1px solid #E6E7E8;
  width: 100%;
  height: 1px;
}
.apply-user-radio-btn {
  margin-top: 25px;
}
.apply-user-radio-btn p {
  font-size: 14px;
  font-family: 'Montserrat', 'sans-serif';
  color: #3C3228;
  margin-bottom: 20px;
}
.modal-body.share-modal .default-permission-checkbox label,
.modal-body.share-modal .apply-user-radio-btn label {
  font-size: 14px;
  padding-left: 35px;
}
.default-permission-checkbox input, .apply-user-radio-btn input {
  margin-right: 10px;
}

/*
 * share with friend modal > confirm and cancel button in Manage User tab
 */
.button-group {
  margin-top: 50px;
}

.share-drive button.open-share-tab-btn {
  width: 25px;
  height: 25px;
  border: 0;
}
.share-drive button.open-share-tab-btn {
  background: url("../img/modal/share-drive-modal/add-people-brown.svg") no-repeat 0px 0px;
}
.share-drive button.open-share-tab-btn:hover {
  background: url("../img/modal/share-drive-modal/add-people-blue.svg") no-repeat 0px 0px;
}

/*.share-drive button.open-unshare-tab-btn {
    background: url("../img/modal/share-drive-modal/unshare-people-brown.svg") no-repeat 0px 0px;
}
.share-drive button.open-unshare-tab-btn:hover {
    background: url("../img/modal/share-drive-modal/unshare-people-blue.svg") no-repeat 0px 0px;
}*/

/*
 * share with friend modal > loading sign > 
 */
.share-modal-processing {
  /*position: absolute;
  top: 0;
  left: 0;*/
  /*border-radius: 10px;*/
  width: 100%;
  height: 100%;
  background-color: rgba(255,255,255,0.7);
}

/*
 * share with friend modal > shared list
 */
.shared-list i {
  font-size: 8px;
  color: #D1D3D4;
  vertical-align: middle;
  margin-right: 5px;
}
.shared-list .permission-list td.edit-val span {
  font-size: 12px;
  color: #3C3228;
}

/*
 * share with friend modal > avatar in shared list, Manage share
 */
.permission-setting .avatar-profile-container,
.permission-setting .avatar-profile-container > img,
.user-result .avatar-profile-container,
.user-result .avatar-profile-container > img {
  width: 30px;
  height: 30px;
  margin-right: 5px;
}
.permission-setting .avatar-profile-container > img,
.user-result .avatar-profile-container > img {
  margin-top: -1px;
  margin-left: -1px;
}

.share-modal .button-group {
  margin-top: 25px;
  padding: 0;
}

.info-text {
  font-style: italic;
  color: #695541;
  font-size: 12px;
}

/*
 * shared drive quota setting
 */
.share-modal .shared-drive-input-group > li:first-child {
  margin-bottom: 15px;
}
.share-modal .shared-drive-input-group > li:nth-child(2) {
  margin: 15px 0;
  padding-top: 20px;
  border-top: 1px solid #E6E7E8;
}
.share-modal .shared-drive-input-group > li:nth-child(3) {
  margin-bottom: 80px;
}

/*
 * confirm operation - top index
 */
.confirm-modal-operation {
  width: 100%;
  height: 100%;
  background: rgba(255,255,255,0.5);
  position: absolute;
  top: 0;
  left: 0;
  z-index: 2000;
  border-radius: 10px;

  text-align: right;
}
.confirm-modal-operation > div {
  position: absolute;
  bottom: 22px;
  right: 30px;
}
.button-text {
  font-family: 'Open Sans', 'sans-serif';
  color: #808080;
  font-size: 13px;
  margin-right: 15px;
}
.button-text:hover {
  cursor: pointer;
  font-style: italic;
  color: #F7941E;
  text-decoration: underline;
}

.confirm-question {
  font-family: 'Montserrat', 'sans-serif';
  font-size: 13px;
  margin-right: 15px;
}

/*****************************************************************
 *
 * instant share
 *
 *****************************************************************/
.modal-body.instant-share-modal {
  height: 550px;
}

.instant-share-modal.select-shared-drive {
  padding: 0;
}

.modal-step {
  font-size: 13px;
}

.instant-share-modal .search-user-list {
  height: 467px;
}
.instant-share-modal .search-user-list .result {
  height: 305px;
}
.instant-share-modal .back-state-group {
  margin-top: 10px;
}

.instant-share-modal .selected-user-table {
  height: 195px;
}
.instant-share-modal .share-file .selected-user-table .permission-setting.body {
  height: 150px;
}

.instant-share-modal .share-file .shared-list .permission-setting.body {
  height: 135px;
}

.instant-share-modal .select-shared-drive {
  margin-top: 30px;
}

.question-answer .check-type-btn {
  margin-right: 10px;
}

.question-header,
.question-answer {
  padding: 0;
  font-family: 'Montserrat', sans-serif;
  font-size: 13px;
  color: #3C3228;
}
.instant-share-modal .shared-drive-input-group .question-answer {
  font-family: 'Open Sans', 'sans-serif';
}
.instant-share-modal .storage-unit-dropdown {
  left: 105px;
}

.instant-share-modal .create-shared-drive-form {
  margin-bottom: 25px;
}
.instant-share-modal .create-shared-drive-form > ul > li:first-child {
  margin: 15px 0 19px 0;
}
.instant-share-modal .create-shared-drive-form > ul > li:last-child {
  padding-top: 20px;
  border-top: 1px solid #E6E7E8;
  margin: 25px 0 15px 0;
}

.instant-share-modal .create-shared-drive-form .permission-list li {
  margin-bottom: 7px;
}

.instant-share-modal .new-shared-drive-field,
.instant-share-modal .triangle-isosceles.top {
  width: 80%;
}

.instant-share-modal .new-shared-drive-field {
  height: auto;
  padding: 5px 10px;
  font-size: 13px;
  font-family: 'Open Sans', 'sans-serif';
  border: 1px solid #E6E7E8;
}
.instant-share-modal .new-shared-drive-field:focus {
  border: 1px solid #4B9BCD;
}

/* erroe message */
.instant-share-modal .triangle-isosceles.top {
  padding: 5px 10px;
  font-family: 'Open Sans', 'sans-serif';
  position: absolute;
  top: 23px;
  z-index: 1;
}
.instant-share-modal .triangle-isosceles.top:after {
  top: -9px;
  left: 20px;
  right: auto;
}

.instant-share-modal .shared-drive-input-group .triangle-isosceles.top {
  top: 28px;
  left: 0;
}

/*
 * folder tree
 */
.instant-share-modal .destination-breadcrumb {
  height: 18px;
  font-family: 'Open Sans', sans-serif;
  font-size: 14px;
  color: #808080;
  font-style: italic;
}
.instant-share-modal .select-exists-shared-drive-tree {
  margin-top: 15px;
}
.instant-share-modal .move-tree.shared-drive-tree {
  margin: 10px 0 15px;
  height: 300px;
}