.bs-callout {
    padding: 20px;
    margin: 20px 0;
    border: 1px solid #eee;
    border-left-width: 5px;
    border-radius: 3px;
}
.bs-callout h4 {
    margin-top: 0;
    margin-bottom: 5px;
}
.bs-callout p:last-child {
    margin-bottom: 0;
}
.bs-callout code {
    border-radius: 3px;
}
.bs-callout+.bs-callout {
    margin-top: -5px;
}
.bs-callout-default {
    border-left-color: #777;
}
.bs-callout-default h4 {
    color: #777;
}
.bs-callout-primary {
    border-left-color: #428bca;
}
.bs-callout-primary h4 {
    color: #428bca;
}
.bs-callout-success {
    border-left-color: #5cb85c;
}
.bs-callout-success h4 {
    color: #5cb85c;
}
.bs-callout-danger {
    border-left-color: #d9534f;
}
.bs-callout-danger h4 {
    color: #d9534f;
}
.bs-callout-warning {
    border-left-color: #f0ad4e;
}
.bs-callout-warning h4 {
    color: #f0ad4e;
}
.bs-callout-info {
    border-left-color: #5bc0de;
}
.bs-callout-info h4 {
    color: #5bc0de;
}
#description {
	width: 250px;
	float: left;
    margin: 50px;
}

#description.search {
	width: 100%;
	float: none;
    margin: 0px;
}
.nav-btn {
    position: absolute;
    cursor: default;
}
.nav-btn.debug {
    border: 1px dashed #CCC;
}
.dummy-btn {
    position: absolute;
    cursor: default;
}

.dummy-btn.debug {
    border: 1px dashed #F0F;
    
}
.screen {
	position: relative;
	/* width: 50%; */
	/* max-width: 115px; */
	/* display: flex; */
}
.screen > img {
    width: 100%;
    height: auto;
    animation: fadeInAnimation ease 500ms;
	animation-iteration-count: 1;
	animation-fill-mode: forwards;
}
@keyframes fadeInAnimation {
	0% {
		opacity: 0;
	}
	100% {
		opacity: 1;
	}
}

#btnContainer {
	width: calc(100% - 2.72vh);
	height: calc(100% - 2.72vh);
	position: absolute;
	top: 1.34vh;
	left: 1.34vh;
	/* display: block; */
	/* flex-grow: 1; */
	/* margin: 1.334vh; */
}   

/* Phone frame */
.container {
	/* height: 80vh; */
	margin: 20px;
	width: 50vh;
	float: left;
}
.container.search {
    margin-top: 90px;
    width: unset;
}

  
.phone {
position: relative;
}

.phone .notch-container {
position: absolute;
top: 0;
width: 100%;
height: 100px;
}

.phone .notch-container .notch {
width: 20vh;
height: 4.25vh;
margin: 0 auto;
background-color: #111;
border-bottom-left-radius: 2.334vh;
border-bottom-right-radius: 2.334vh;
}
  
.phone img {
	display: block;
	border: 1.334vh solid #111;
	border-radius: 4.5vh;
    /*padding: 2px;*/
}
#btnContainer > a:hover {
    /*cursor: default;*/
}
@media only screen and (hover: none) and (pointer: coarse) {
    .screen {
        position: relative;
        width: 100%;
        /* max-width: 115px; */
        /* display: flex; */
    }
    #description {
        width: calc(100% - 50px);
        float: none;
        margin: 25px;
    }
    .container {
        height: auto;
        width: auto;
        float: none;
        margin: auto;
    }
    .phone img {
        border: 0.6vh solid #111;
        padding: 0.1vh;
        border-radius: 3vh;
    }
    #btnContainer {
        top: 0.3vh;
        left: 0.3vh;
        width: calc(100% - 0.6vh);
	    height: calc(100% - 0.6vh);
    }
  }

#sus-tab {
	position: relative;
	padding: 2rem;
	margin: 1em;
	border: solid #dee2e6;
	border-width: 1px 0 0;
    width: calc(100% - 3em);
}
#description > .btn-primary {
    margin: 10px;
    margin-left: 0px;
}