/* Imported *
@import '//codepen.io/chrisdothtml/pen/ojLzJK.css' */
@import url(//fonts.googleapis.com/css?family=Open+Sans:400,300,600,700);

/* Animations */
/* Sandeep Shah */

@keyframes spin {
	from {
		transform:rotate(0deg);
	}
	to {
		transform:rotate(360deg);
	}
}

.spin {
	animation-name: spin;
	animation-duration: 1s;
	animation-iteration-count: infinite;
	animation-timing-function: linear;
}

@keyframes blink-success {
	50% {
		color: #5cb85c;
	}
}

.blink-success {
	animation-name: blink-success;
	animation-duration: 1s;
	animation-iteration-count: infinite;
}

/* Util */

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

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

.inline-block {
	display: inline-block;
}

.no-border {
	border: none;
}


.input-group {
	width: 100%;
	text-align: center;
	min-height: 48px;
	font-family: Montserrat;
	font-weight: 400;
	font-size: 2.5rem;
    color: #3599b0;
    display: flex;
    flex-direction: row;
}

.buzz-phone-container.buzz .input-group, .buzz-phone-container.buzz .destination-wrapper {
  display: none;
}

.btn-group .btn {
	border: none;
}

.btn.btn-voicemail {
  background-color: white;
  border:solid 1px rgba(0, 154, 192,0.3);  
}

.btn.btn-voicemail.active {
  background-color: rgba(0, 154, 192,0.2);
  border:solid 1px rgba(0, 154, 192,0.8);  
}

.btn.btn-voicemail #vm-tape {
  display: block;
}

.btn.btn-voicemail #vm-recorded {
  display: none;
}


.btn.btn-voicemail.active #vm-tape {
  display: none;
}

.btn.btn-voicemail.active #vm-recorded {
  display: block;
}

/* fix for icon only buttons */
.glyphicon {
	line-height: 1.42857143;
}

.input-group-btn {
    display: flex;
    flex-direction: row;   
}


.input-group-btn .glyphicon {
	line-height: 1;
  font-size: 2rem;
  font-weight: 100;
  color: #888;
  border: 0px;

}



/*
 * Container
 */

#container {
	width: 100%;
	height: 100%;
	padding-left: 0;
	padding-right: 0;
}

#identity {
	width: 320px;
	padding-left: 0;
	padding-right: 0;
	display: flex;
    flex-direction: column;
    align-items: stretch;
    justify-content: space-between;
}




#identity.profile-image, #identity img {
	width: 128px;
	height: 128px;
	margin: auto;
	align-self: center;
	object-fit: cover;

}

#identity.name, #identity span {
	font-family: 'PT Mono', Rajdhani, Montserrat;
	font-size: 2rem;
	font-weight: 500;
	color: #009ad1;
	text-align: center;
	text-transform: uppercase;
	width: 100%;
}

#buzz-phone-wrapper.buzz #identity.name, #buzz-phone-wrapper.buzz #identity span,
.buzz-phone-container.buzz #identity span,
.buzz-phone-container.buzz #identity.name
 {
	color: white;
}

/* Dialer mode */
#container.dialer {
	height: 350px;
}

#identity {
  display: none;
  height: 320px;
}

#identity.container {
	display: none;
	background-color: transparent;
	display: flex;
	flex-direction: column;
	align-items: center;
  align-content: center;
}

.buzz-phone-container.buzz #identity {
	display: flex;

}

#identity .image-container {
  width: 100%;
  height: 192px;
  display: flex;
  align-items: center;
  justify-content: space-around;
  align-content: center;
}

#identity .diamond-image {
	transform-origin: 0% 100%;
	transform: translateX(50%) rotateZ(-45deg) scale(.87);
	transition: transform .2s ease-out;
	overflow: hidden;
    border-radius: 11px;
    background: #f4f7f8;
    border: 2px solid #f4f7f8;
    width: 128px;
    height: 128px;
    /* position: absolute; */
}

.diamond-image img {
    transition: transform .2s ease-out;
    transform-origin: 0 100%;
    transform: scale(1.4) translateX(-35%) translateY(-35%) rotateZ(45deg);
}

.group-image img {
	border-radius: 50%;
}

#container.dialpad {
	height: 242px;
}

#container.dialpad.call {
	height: 287px;
}

/* Navigation */

@media (max-width: 768px) {
	/* Disable responsive tabs */
	#navbar li {
		display: table-cell;
		width: 1%;
	}

	#navbar li > a {
		border-bottom: 1px solid #ddd;
		margin-bottom: 0;
	}

	#navbar li.active > a {
		border-bottom: transparent;
	}
}

/* Dialer/dialpad mode */
#container.dialer #navbar,
#container.dialpad #navbar {
	display: none;
}

/* Content */

#content {
	border-left: 1px solid #ddd;
	border-right: 1px solid #ddd;
	border-bottom: 1px solid #ddd;
	padding: 5px;
}

/* Dialer mode */
#container.dialer #content,
#container.dialpad #content {
	/* border-top: 1px solid #ddd; */
}

/* Tab content */

.tab-pane {
	height: 338px;
}

/* Dialpad mode */
#container.dialpad .tab-pane {
	height: 230px;
}
#container.dialpad.call .tab-pane {
	height: 275px;
}

/* Dialer tab */
#dialer button[data-action="hangup"] > .glyphicon,
#dialer button[data-action="reject"] > .glyphicon {
	transform: rotate(0.377turn);
}

#dialpad > .button-row-digits + .button-row-digits > .button-wrapper > button {
	/* border-top: none; */
}

#dialpad > .button-row > .button-wrapper + .button-wrapper:not(:first-child):not(:last-child) > button {
	/* border-left: none;
	border-right: none; */
}


#dialpad button {
	width: 72px;
	padding: 8px 12px 2px 12px;
	height: 72px;
  border-radius: 50%;
  box-shadow: unset;
  border-width: 0;
}

#dialpad .button-row-actions button, .button-row-actions button {
	padding: 2px;
	width: 72px;
	border-radius: 50%;
  height: 72px;
  margin: 4px 32px;
}

#dialpad .button-row-actions .glyphicon {
	font-size: 150%;
}

/* Dialer mode */
#container.dialer #dialpad button[data-action="msg"] {
	display: none;
}

/* Dialpad mode */
#container.dialpad #dialer > .destination-wrapper,
#container.dialpad #dialpad > .button-row-actions,
#container.dialpad #dialpad > .button-row-actions button[data-action="msg"],
#container.dialpad #status {
	display: none;
}

#container.dialpad.call #dialpad > .button-row-actions {
	display: block;
}


#buzz-phone-wrapper {
    margin: auto;
    width: 100%;
    height: 100%;
}

  
/* Recent calls tab */

.calls-wrapper {
	height: 338px;
}

.text-muted {
	color: #999;
	font-size: 1.2rem;
	letter-spacing: 3px;
}
/* Contacts tab */

#contacts .contact-info {
	padding-top: 8px;
	padding-bottom: 9px;
}

#add-contact-link {
	padding: 10px;
}


/* Settings tab */

#settings .settings-wrapper {
	height: 338px
}

/* Progress indicator */

#progress {
	height: 338px;
	padding-top: 50%;
	text-align: center;
}

#progress span {
	font-size: 48px;
	color: #337ab7;
}

/* Dialpad mode */
#container.dialpad #progress {
	height: 230px;
	padding-top: 30%;
}

/* Status indicator */

#status {
	padding-left: 5px;
	padding-top: 5px;
	position: absolute;
    bottom: 0;
    text-align: center;
    /* width: 100%; */
    font-size: 16px;
    color: #555;
    font-family: 'Barlow Condensed', 'PT Sans', sans-serif;
    padding: 0 12px;
    margin: 4px auto;
    background-color: beige;
    border-radius: 5px;
}

#status-wrapper {
  display: flex;
  flex-direction: row;
  align-content: center;
  justify-content: center;
  height: 32px;
}

.buzz-phone-button-icon {
  line-height: 64px; width: 64px; padding: 8px; height: 64px;  
}

/* Login */

#login {
	height: 338px;
	padding: 10px;
}

/* Konami */

#container.konami * {
	animation-name: spin;
	animation-duration: 10s;
	animation-iteration-count: infinite;
	animation-timing-function: linear;
}

/* Override */
.btn-success {
    color: #fff;
    background-color: #4ec2db;
    border-color: #4ec2db;
}

.btn-default {
    color: #333;
    background-color: #ebeeee;
	border-color: #ccc;
	border-width: 0;
		font-family: 'Montserrat', Open Sans;
}
.btn-default span {
	color: #0a6b82;
	font-size: 2.5rem;
    font-weight: 300;
    line-height: 30px;
}


.btn-success.focus, .btn-success:focus {
    background-color: #5fcada;
    border-color: #9dedf9;
}

.caller-id:hover {
	background-color: #5fcada;
}

.button-row-digits {
	display: flex;
	justify-content: space-between;
}

#buzz-phone-wrapper.buzz .button-row-digits, .buzz-phone-container.buzz .button-row-digits  {
  display: none;
}

.button-row-actions {
	display: flex;
	margin-top: 12px;
  justify-content: space-between;
  position: absolute;
  bottom: 60px;
  left: 50%;
  transform: translate(-50%, 0);
}

.button-wrapper.col-xs-4 {
	width: 84px;
	height: 84px;
	display: flex;
	align-items: center;
	justify-content: center;
}

.form-control {
	height: 42px;
	background-color: rgba(0,0,0,0);
	border: 0px;
	font-size: 3.2rem;
	text-align: center;
	color: #555;
	font-family: 'PT Mono', Montserrat, sans-serif;
	letter-spacing: 2px;
}

.form-control.incoming {
	color: teal;
	font-weight: 800;
}

.form-control.missed {
	color: #d91e43;
	font-weight: 800;
}

.form-control.connected {
	color: #009ad1;
	font-weight: 800;
}

.form-control.outgoing {
	color: teal;
	font-weight: 800;
}

#content {
	border: 0;
}

::placeholder { /* Chrome, Firefox, Opera, Safari 10.1+ */
  color: #888;
	font-size: 1.5rem;
	text-transform: uppercase;
  opacity: 1; /* Firefox */
}

:-ms-input-placeholder { /* Internet Explorer 10-11 */
	color: #888;
}

::-ms-input-placeholder { /* Microsoft Edge */
	color: #888;
}

/* * {
  margin: 0;
  padding: 0;
  font-size: inherit;
  color: inherit;
  box-sizing: inherit;
  -webkit-backface-visibility: hidden;
          backface-visibility: hidden;
  -webkit-font-smoothing: antialiased;
} */

/* 
img {
  display: block;
  max-width: 100%;
  height: auto;
  border: 0;
} */
/* 
button {
  background-color: transparent;
  border: 0;
  cursor: pointer;
} */

btn-size = 90px
sites = {
  'facebook': #3B5998
  'twitter': #3CF
  'google': #DC4A38
  'dribbble': #F26798
  'skype': #00AFF0
}

$animate {
  transition: all .35s
  transition-timing-function: cubic-bezier(
    0.310,
    -0.105,
    0.430,
    1.590
  )
}

$btn__inactive {

  &:before {
    top: 90%
    left: -110%
  }

  .fa {
    transform: scale(.8)
  }

  // variants
  for name, color in sites {

    &.{name} {

      &:before {
        background-color: color
      }

      .fa {
        color: color
      }
    }
  }
}

$btn__active {

  &:before {
    top: -10%
    left: -10%
  }

  .fa {
    color: #fff
    transform: scale(1)
  }
}
/* 
.social-btns {
  height: btn-size
  margin: auto
  font-size: 0
  text-align: center
  position: absolute
  top: 0
  bottom: 0
  left: 0
  right: 0

  .btn {
    @extends $btn__inactive
    @extends $animate
    display: inline-block
    background-color: #fff
    width: btn-size
    height: btn-size
    line-height: btn-size
    margin: 0 10px
    text-align: center
    position: relative
    overflow: hidden
    border-radius: 28%
    box-shadow: 0 5px 15px -5px rgba(0, 0, 0, 0.1)
    //overflow bug fix
    opacity: .99

    &:before {
      @extends $animate
      content: ''
      width: 120%
      height: 120%
      position: absolute
      transform: rotate(45deg)
    }

    .fa {
      @extends $animate
      font-size: 38px
      vertical-align: middle
    }

    &:focus,
    &:hover {
      @extends $btn__active
    }
  }
} */

.hidden {
    display: none!important;
}

.btn {
    display: inline-block;
    padding: 6px 12px;
    margin-bottom: 0;
    font-size: 14px;
    font-weight: 400;
    line-height: 1.42857143;
    text-align: center;
    white-space: nowrap;
    vertical-align: middle;
    -ms-touch-action: manipulation;
    touch-action: manipulation;
    cursor: pointer;
    -webkit-user-select: none;
    -moz-user-select: none;
    -ms-user-select: none;
    user-select: none;
    background-image: none;
    border: 1px solid transparent;
    border-radius: 4px;
}

.input-group-btn>.btn {
    position: relative;
    background-color: #eee;
}

.input-group .form-control {
    position: relative;
    z-index: 2;
    float: left;
    width: 100%;
    margin-bottom: 0;
    display: table-cell;
}

.montserrat-headline {
  font-size: 26px;
  font-weight: bold;
  line-height: 1.333;
  letter-spacing: 1.7px;
  text-transform: uppercase;
  position: relative;
  color: #04003F;
  clear: both;
  font-family: Montserrat, sans-serif;
}

.background-pattern {
  margin: 0;
  padding: 0;
  background: url(data:image/jpeg;base64,/9j/4AAQSkZJRgABAQAAAQABAAD/2wBDAAQDAwMDAwQDAwQGBAMEBgcFBAQFBwgGBgcGBggKCAkJCQkICgoMDAwMDAoMDA0NDAwRERERERQUFBQUFBQUFBT/2wBDAQQFBQgHCA8KCg8UDg4OFBQUFBQUFBQUFBQUFBQUFBQUFBQUFBQUFBQUFBQUFBQUFBQUFBQUFBQUFBQUFBQUFBT/wgARCABZAF4DAREAAhEBAxEB/8QAGAABAQEBAQAAAAAAAAAAAAAAAQACAwf/xAAXAQEBAQEAAAAAAAAAAAAAAAAAAQID/9oADAMBAAIQAxAAAAH1rrjZWMqNhLGREDmbNCRGAE2RGBI0QAQiAEQiRARCBEQAImDZgRI0ZIwBsRI5HQSAgE0ZEDJoTidDRg0aAgMiJk2QgQgBoANAJEQCAgQmCNEJkSICNVzlDokICVEAn//EAB0QAAICAgMBAAAAAAAAAAAAAAERADAQIAIxQBL/2gAIAQEAAQUCc7sG4rXldZwBu43kUjBEGqz80LwkwGvlB3T/AP/EABYRAQEBAAAAAAAAAAAAAAAAABARcP/aAAgBAwEBPwErcL//xAAUEQEAAAAAAAAAAAAAAAAAAABw/9oACAECAQE/ARD/xAAUEAEAAAAAAAAAAAAAAAAAAABw/9oACAEBAAY/AhD/xAAeEAACAgMAAwEAAAAAAAAAAAAAARARICExQVFxkf/aAAgBAQABPyFMhrRiipbou3DUcOcW3CXNRVLR5xpLw+z9Pgy15xc1hWO2tC6XR2WIR/T0OXfzBp/RcUNF00Q3Q1rFtIu1HRNCPSLS2WVCe6H6i4ixexzUsUNWKjh7KihYXCe44XDk1Rbp9youPceGEsvB/9oADAMBAAIAAwAAABDqfDNd9tt5LNO9rv5r/wDbTzbbbffS37X/AH/3222+n/8Avt9vtP8Aba7WS/Xabba7T/b/AP3wsEw6Uv/EABoRAQACAwEAAAAAAAAAAAAAAAEQIAARMXD/2gAIAQMBAT8QjrjC6w8AFC//xAAYEQACAwAAAAAAAAAAAAAAAAAQEQEwcP/aAAgBAgEBPxAIrAJr/8QAIhABAAICAgMBAQADAAAAAAAAAQARITFBURBhcYGhkdHh/9oACAEBAAE/EPenTKmUKquZQQDxoMJVyicwWR/PFDnw26CvfM0/WAKce5Vf78FczW0S6CpYuqxuVXim/wBqVeEv1AAQXS+4R0VvmG5V4q4hVZa1DfhVqe5814Ksi71rxRuBE6TYgDW0u/kdwqnuA8TCgww2S6zdHcKwcOczheKg2Me4AWzzxAlHc5FqXQTkIXT43Jgl59RWbp1KUAW5xMisR8/xDRFM91hhsv0z+YhVJ/ZuWeuYUGq3AyQNn85h31WUnfyB+RbAlTab6IUHWIczGWn3EriYI8y2156YlIrLDLE9I4BcQWjSIxzOZ1zCl2McwwThjOcfXMoADBAyV4WDqC0rwVb/AJEF2Zz4BlzL/nfhWHiAE778JddQxk33DtFAIj6TEU23B56rUxLEca4hMwLXUXqW1uCONTE2F5hRu8T0i25zAwuP+wm/xNXjib/ng1DT88MNp//Z);
  font-family: "Montserrat",sans-serif;
}