.slot-directive-wrapper {
    height: 100%;
    width: 100%;
}

.slot-directive-wrapper .arrow-title {
    color: #299C90;
    text-align: center;
    font-size: 16px;
    font-family: "OpenSans";
    width: 100%;
    height: 20px;
}

.slot-directive-wrapper .arrow-selector {
    color: #299C90;
    width: 60px;
    height: 60px;
    margin: 0 auto 0 auto;
    text-align: center;
    font-size: 11px;
    font-family: "OpenSans";
    -webkit-user-select: none;
    user-select: none;
    outline: none;
}

.slot-directive-wrapper .arrow-selector .material-icons {
    cursor: pointer;
    font-size: 50px;
    -webkit-user-select: none;
    user-select: none;
    outline: none;
}

.slot-directive-wrapper .slot-wrapper {
    position: relative;
    width: 80%;
    height: 50px;
    margin: 0 auto 0 auto;
    overflow: hidden;
    -webkit-user-select: none;
    user-select: none;
}

.slot-directive-wrapper .slot-wrapper .slot {
    position: relative;
    width: 100%;
    height: 100%;
    -webkit-user-select: none;
    user-select: none;
}

.slot-directive-wrapper .slot-wrapper .slot .slot-element {
    width: 100%;
    height: 100%;
    position: absolute;
    font-family: "Roboto";
    font-size: 18px;
    text-align: center;
    color: #ffffff;
    -webkit-user-select: none;
    user-select: none;
    outline: none;
}

.slot-element.ng-enter, .slot-element.ng-leave {
    -webkit-transition: 900ms cubic-bezier(0.3, 1.02, 0.71, 0.99) all;
    transition: 900ms cubic-bezier(0.3, 1.02, 0.71, 0.99) all;
}

.slot-element.bottom.ng-enter {
    bottom: 100%;
}
.slot-element.bottom.ng-enter.slot-element.ng-enter-active {
    bottom: 0;
}

.slot-element.bottom.ng-leave {
    bottom: 0;
}
.slot-element.bottom.ng-leave.slot-element.ng-leave-active{
    bottom: -100%;
}

.slot-element.top.ng-enter {
    top: 100%;
}
.slot-element.top.ng-enter.slot-element.ng-enter-active {
    top: 0;
}

.slot-element.top.ng-leave {
    top: 0;
}
.slot-element.top.ng-leave.slot-element.ng-leave-active{
    top: -100%;
}