/**
 * cancel zoom on iOS
 * -----------------
 */
@media (max-width: 767px) {
    .form-control,
    input[type="search"],
    select:focus {
        font-size: 16px !important;
    }
}

/*
 * Browser scrollbar
 * -----------------
 */

 body {
 /* Internet Explorer scrollbar styles
  * set the scrollbar aside, rather than make it overlap the content
  */
  -ms-overflow-style: scrollbar;
}

/*
 * Login
 * -----
 */

 .login-box {
  width:400px;
}

.register-box .form-horizontal .form-group {
  margin-left: 0;
  margin-right: 0;
}

/*
 * Invalid page
 * ------------
 */

 .invalid-page {
  background: #d2d6de;
  text-align: center;
}
.invalid-box {
  margin: 7% auto;
  display: inline-block;
}
@media (max-width: 768px) {
  .invalid-box {
    width: 90%;
    margin-top: 20px;
  }
}
.invalid-logo {
  font-size: 35px;
  text-align: center;
  margin-bottom: 25px;
  font-weight: 300;
  color: #444
}
.invalid-box-body {
  background: #fff;
  padding: 20px;
  border-top: 0;
  color: #666
}

.invalid-box-body h1,
.invalid-box-body p {
  text-align: left;
}

/*
 * End invalid page
 * ----------------
 */

 .disabled-row {
  background-color: #E6E4E4;
}

.expand_row {
  background-color: #FFFFE0
}

.date {
  font-size: 16px;
}
// TODO: remove
.opportunity_row_COMPLETE {
  background-color: #d0e9c6;
}
// TODO: remove
.opportunity_row_LOST {
  background-color: #E6E4E4;
}

/*
 * Navbar Dropdown Menu
 * -----------------
 */

 .navbar-nav > .notifications-menu > .dropdown-menu > li .menu--non-scrollable {
  max-height: none;
  overflow: visible;
}

/*
*
* Sidebar
* -------
*/

.skin-blue-light .sidebar-menu>li.active:hover>a {
  background-color: #f4f4f5;
}
.skin-blue-light .sidebar-menu>li.active>a {
  background: #f9fafc;
}

.skin-blue-light .sidebar-menu>li>.treeview-menu {
  background: #f9fafc;
}

.skin-blue-light .sidebar-menu>li.active.focus>a {
  background: #f4f4f5;
}

/*
 * Select2
 * -------
 */

 /* resize container of any select within col-* div
 * by changing col-*
 */

 .select2-container.select2-container--default {
  width: 100% !important;
}

.has-error .select2-selection {
    border-color: rgb(185, 74, 72) !important;
}

/*
 * General
 * -------
 */

 .margin-right-5 {
  margin-right: 5px;
}

.margin-left-5 {
  margin-left: 5px;
}
.label_size_m {
  line-height: 2;
}
.required-input {
  color: red;
}

.margin-left-20 {
  margin-left: 20px;
}

/*
 * Events list
 * -----------
 */

 /* for hierarchy undestanding */
 .events {}
 .event {}

 .event-header {
  padding-left: 43px;
}
// .event-body {}
.event-tags {
  padding-left: 48px;
}
.event-details {
  padding: 27px 33px 19px;
}
.event-details--extra {
  background-color: #ffffe0;
}
.event-title {
  background-color: #abb0b4; /* grey */
  color: white;
}
.event-title--extra {
  background-color: #286090; /* navy */
  color: white;
}
.event-description {
  margin-bottom: 10px;
}
.event-description-icon:before {
  padding: 0.5em;
}
.dl-horizontal .event-title, .dl-horizontal .event-title--extra {
  text-align: center;
}
.event-title, .event-description {
  line-height: 2;
}
.event-status-complete {
  background-color: #69d952; /* lime */
}
.event-status-hight {
  background-color: #f7a35c; /* orange */
}
.event-status-low {
  background-color: #7cb5ec; /* plum */
}
.event-status-lost {
  background-color: #808080; /* eggplant */
}

 /*
 * Opportunity list
 * -----------------
 */

 /* for hierarchy undestanding */
 .opportunities {}
 .opportunity {}

 .opportunity-header {
  padding-left: 43px;
}
.opportunity-body-status-complete {
  background-color: #d0e9c6;
}
.opportunity-body-status-lost {
  background-color: #E6E4E4;
}
.opportunity-tags {
  padding-left: 48px;
}
.opportunity-details {
  padding: 27px 33px 19px;
}
.opportunity-title {
  background-color: #abb0b4;
  color: white;
}
.opportunity-description {
  margin-bottom: 10px;
}
.dl-horizontal .opportunity-title {
  text-align: center;
}
.opportunity-title, .opportunity-description {
  line-height: 2;
}
.description-icon:before {
  padding: 0.5em;
}
.description-icon-md {
 margin: 0 10px;
 font-size: 30px;
 color: gray;
}
.opportunity-description-text {
  vertical-align: top;
  line-height: 2;
}
.opportunity-status{
  vertical-align: top;
  line-height: 3;
}

.opportunity-status-complete {
  background-color: #69d952; /* lime */
}
.opportunity-status-hight {
  background-color: #f7a35c; /* orange */
}
.opportunity-status-low {
  background-color: #7cb5ec; /* plum */
}
.opportunity-status-lost {
  background-color: #808080; /* eggplant */
}
.opportunity-status-exclude {
  background-color: #C29DC8; /* lilac */
}

 /*
 * event color in Schedule
 * ------------------------
 */

 div#calendar .fc-event-container .result {
   background-color: #00a65a;
   border-color: #00a65a;
 }

 div#calendar .fc-event-container .plan {
   background-color: #f39c12;
   border-color: #f39c12;
 }

/*
 * radiobutton in EventRegister
 * -----------------------------
 */

 .radiobutton-appearance input {
   display: none;
 }
 .radiobutton-appearance label{
   display: block;
   float: left;
   cursor: pointer;
   margin: 0;
   padding: 10px;
   background: #bdc3c7;
   color: #FFFFFF;
   font-size: 28px;
   text-align: center;
   line-height: 1;
   transition: .2s;
 }

 .radiobutton-appearance label:first-of-type{
   border-radius: 3px 0 0 3px;
 }

 .radiobutton-appearance label:last-of-type{
   border-radius: 0 3px 3px 0;
 }

 .radiobutton-appearance input[type="radio"]:checked + .event_type_plan {
  background-color: #f39c12;
  border-color: #f39c12;
}

.radiobutton-appearance input[type="radio"]:checked + .event_type_result {
	background-color: #00a65a;
	border-color: #00a65a;
}

/*
 * announcement list
 */

.navbar-nav > .notifications-menu > .dropdown-menu > li .menu#announcements {
    margin: 0;
    padding: 10px 0;
}

.announcement-message {
    font-size: 11px;
    margin-top: 5px;
    margin-bottom: 0px;
    white-space: normal;
    word-break: break-all;
}

.announcement-message-empty {
    padding: 4px;
    text-align-last: center;
    font-size: 11px;
    padding-bottom: 0px;
}

/*
 * Information list
 * -----------------
 */

 .navbar-nav > .notifications-menu > .dropdown-menu > li .menu.informations {
   margin: 0;
   padding: 10px 0;
 }

 .information-user {
  font-size: 11px;
  margin-top: 5px;
  margin-bottom: 5px;
  position: relative;
  display: inline;
}

.information-message {
  font-size: 11px;
  margin-top: 5px;
  margin-bottom: 0px;
  white-space: normal;
  word-break: break-all;
}
.navbar-nav > .notifications-menu > .dropdown-menu > li .menu > li > a.information-read {
  background: #fff;
}
.navbar-nav > .notifications-menu > .dropdown-menu > li .menu > li > a.information-unread {
  background: #ddd;
}
.navbar-nav > .notifications-menu > .dropdown-menu > li .menu > li > a:hover.information-unread,
.navbar-nav > .notifications-menu > .dropdown-menu > li .menu > li > a:hover.information-read {
  background: #f4f4f4;
}

.information-message-empty {
  padding: 4px;
  text-align-last: center;
  font-size: 11px;
  padding-bottom: 0px;
}

.name-range {
  width: 170px;
  float: left;
}

/*
 * Comment List
 * -----------------
 */
 .comment-content {
  white-space: pre-wrap;
}

.comment-delete {
  cursor: pointer;
  color: #A9A9A9;
}

.comment-summary:hover .comment-delete {
  color: #000000;
}

/*
 * Responsive Nav Tabs
 * -------------------
 */
 @media (max-width: 767px) {
  /* cause horizontal scrolling if content overflows container */
  .nav-tabs-details nav {
    overflow-x: auto;
    -ms-overflow-x: auto; /* IE8 */
    -ms-overflow-y: auto;
    overflow-y: hidden;
  }
  /* set the width on outer container */
  .nav-tabs-details .nav-tabs {
    width: 510px;
  }
}
/* dublicate .nav-tabs-custom class because we added <nav> tag on navigation */
.nav-tabs-details {
  margin-bottom: 20px;
  background: #fff;
  box-shadow: 0 1px 1px rgba(0, 0, 0, 0.1);
  border-radius: 3px;
}
.nav-tabs-details .nav-tabs {
  margin: 0;
  border-bottom-color: #f4f4f4;
  border-top-right-radius: 3px;
  border-top-left-radius: 3px;
}
.nav-tabs-details .nav-tabs > li {
  border-top: 3px solid transparent;
  margin-bottom: -2px;
  margin-right: 5px;
}
.nav-tabs-details .nav-tabs > li > a {
  color: #444;
  border-radius: 0;
}
.nav-tabs-details .nav-tabs > li > a.text-muted {
  color: #999;
}
.nav-tabs-details .nav-tabs > li > a,
.nav-tabs-details .nav-tabs > li > a:hover {
  background: transparent;
  margin: 0;
}
.nav-tabs-details .nav-tabs > li > a:hover {
  color: #999;
}
.nav-tabs-details .nav-tabs > li:not(.active) > a:hover,
.nav-tabs-details .nav-tabs > li:not(.active) > a:focus,
.nav-tabs-details .nav-tabs > li:not(.active) > a:active {
  border-color: transparent;
}
.nav-tabs-details .nav-tabs > li.active {
  border-top-color: #3c8dbc;
}
.nav-tabs-details .nav-tabs > li.active > a,
.nav-tabs-details .nav-tabs > li.active:hover > a {
  background-color: #fff;
  color: #444;
}
.nav-tabs-details .nav-tabs > li.active > a {
  border-top-color: transparent;
  border-left-color: #f4f4f4;
  border-right-color: #f4f4f4;
}
.nav-tabs-details .nav-tabs > li:first-of-type {
  margin-left: 0;
}
.nav-tabs-details .nav-tabs > li:first-of-type.active > a {
  border-left-color: transparent;
}
/*
 * Budget
 * ------
 */
 /** search form styles **/
.budget-search .has-feedback {
  display: inline-block;
  width: 150px;
  vertical-align: middle;
}
/* add a little margin so that left outline
appears, this fix adds horizontal scroll on table */
#budget-table {
  margin-left: 1px;
} 
/* make focus styles same across browsers */
:focus {
  outline: black dotted 1px;
}

/*
 * Mypage
 * ------
 */
#loader-bg {
  display: none;
  position: fixed;
  width: 100%;
  height: 100%;
  top: 0px;
  left: 0px;
}
#loader {
  display: none;
  position: fixed;
  top: 50%;
  left: 50%;
  text-align: center;
}

/*
 * Modal
 * ------
 */
.modal-mask {
  position: fixed;
  z-index: 9998;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background-color: rgba(0, 0, 0, 0.5);
  display: table;
  transition: opacity 0.3s ease;
}

.modal-wrapper {
  display: table-cell;
  vertical-align: middle;
}

.modal-container {
  width: 400px;
  margin: 0px auto;
  padding: 20px 30px;
  background-color: #fff;
  border-radius: 2px;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.33);
  transition: all 0.3s ease;
  font-family: Helvetica, Arial, sans-serif;
}

.modal-header h3 {
  margin-top: 0;
  color: #42b983;
}

.modal-body {
  margin: 20px 0;
}

.modal-default-button {
  float: right;
}

/*
 * The following styles are auto-applied to elements with
 * transition="modal" when their visibility is toggled
 * by Vue.js.
 *
 * You can easily play with the modal transition by editing
 * these styles.
 */

.modal-enter {
  opacity: 0;
}

.modal-leave-active {
  opacity: 0;
}

.modal-enter .modal-container,
.modal-leave-active .modal-container {
  -webkit-transform: scale(1.1);
  transform: scale(1.1);
}


/*
 * Footer
 * ------
 */
 /** stick footer to page bottom fix **/
 /* stretch body to screen height */
 html, body {
   height: 100%;
 }
 /* set boxes height minus footer height to position footer at the page bottom */
 .login-box, .register-box {
   height: calc(100% - 71px);
 }
 /* create space between boxes & footer so that they don't overlap */
 @media screen and (max-width: 400px) {
   .login-box, .register-box {
     margin-bottom: 45%;
   }
   /* prevent footer text from wrapping to the next line */
   .main-footer a {
     font-size: 13px;
   }
 }
 .login.main-footer {
   margin-left: 0;
 }

 #intercom_link + .tooltip .tooltip-inner {
   min-width: 140px;
   white-space: nowrap;
 }
/** fix end **/