/* GLOBAL */
body{
    font-family: "Roboto", sans-serif;
    font-style: normal;
    background: #eee;
}
a{
    text-decoration: none;
}

.toast-container {
  z-index: 1050; /* Ensure this is high enough */
}

/* MENU */
#top_menu{
    background-color: transparent;
    background-image: -webkit-linear-gradient(90deg, #00346c, #009b99);
    background-image: -moz-linear-gradient(90deg, #00346c, #009b99);
    background-image: -ms-linear-gradient(90deg, #00346c, #009b99);
    background-image: -o-linear-gradient(90deg, #00346c, #009b99);
    filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#00346c',endColorstr='#009b99' );
    -ms-filter: "progid:DXImageTransform.Microsoft.gradient( startColorstr='#00346c', endColorstr='#009b99' );";
    background-image: linear-gradient(90deg, #00346c, #009b99);
    color: #fff;
    padding: 1em 0;
}

#top_menu-title{
    font-size: 2em;
    font-weight: bold;
    a{
        color: #fff;
    }
}
#top_menu-user{
    font-weight: 100;
}
#top_menu-nav_menu li.nav-item > a:not(.disabled){
    color: #fff;
}

/* FORMS */
form:not(#logout_form) label {
    display: block;
}
form:not(#logout_form) > div {
    padding-bottom: 1em;
}

form:not(#logout_form):not(.no_border) {
    border: solid 1px #ccc;
    padding: 2em;
}
form#logout_form {
    display: inline-block;
    button {
        border: none;
        font-weight: 400;
    }
}

/* BASE */
#content-title{
    .app-step{
        font-style: italic;
    }
    .app-step:before{
        content: "_"
    }
}

.accordion-item{
    background: #eee;
}

/* APPS */
.app_list{
    .card-img{
        height: 10rem;
        overflow:hidden;
    }
}

/* Countdown */

.countdown{
  .countdown-inner{
    background: #fff;
    border-radius: 2rem;
  }
  .countdown-inner.timeout{
    background: rgb(240, 181, 181);
  }

  .countdown-title{
    input{
      background: transparent;
    }
  }

  .countdown-element {
        text-align: center;
    }
}

/* Parallelized oligos */
#po-amplicons{
    table-layout: fixed;
    width: 100%;
    p span{
        word-break: break-all;
        border: solid 1px;
        border-radius: 1em;
        cursor: pointer;
        padding: 2px 11px;
        margin-bottom: 5px;
        line-height: 2em;
        background: palegoldenrod;
        border-color: gold;
    }
    p span.bc{
        background: paleturquoise;
        border-color: darkturquoise;
    }
    p span.re{
        background: lightpink;
        border-color: deeppink;
    }
    p span.stuffer{
        background: lightgray;
        border-color: gray;
    }
    p span:hover{
        background: aquamarine;
        border-color: darkslategrey;
        border-width: 2px;
    }
}

/* Colony picking */
.cp-plate_map {
    .p-plate_map-content > div > div {
        border: solid 1px #fff;
        border-radius: 1em;
    }
    .p-plate_map-content{
        border: solid 4px #fff;
        padding: 2rem;
        text-align: center;
        border-radius: 1rem;
        .header {
            font-weight: bold;
        }
        .empty {
            color: #ccc;
            background: #ccc;
        }
        .used {
            color: #ffc107;
            background: #ffc107;
        }
        col{
            max-width: 7.692%;
        }
    }
}
.plate-picture{
    .plate-count span {
        font-weight: bolder;
        vertical-align: middle;
    }
    .plate-count {
        position: absolute;
        background: yellow;
        top: 1em;
        left: 1em;
        border-radius: 1em;
        padding: .5em;
    }
    .plate-add_mode:hover {
        transform: scale(1.2);
    }
    .plate-points {
        position: absolute;
        top: 0;
        width: 100%;
        height: 100%;
        .pd, .pdc {
            position: absolute;
            width: 10px;
            height: 10px;
            border: solid 3px yellow;
            border-radius: 50%;
            content: "";
            left: 0;
            top: 0;
            transform: translate(-5px, -5px);
            cursor:pointer;
            transition: all 1s;
        }
        .pd:hover {
            border-width: 5px;
            width: 30px;
            height: 30px;
            transform: translate(-15px, -15px);
        }
        .pdc{
            border: solid 2px darkmagenta;
        }
        .pdc:hover{
            border-width:10px;
            width: 30px;
            height: 30px;
            transform: translate(-15px, -15px);
        }
        .pdc.s{
            border-color: dodgerblue;
        }
    }
}

/* FOOTER */
#footer-links{
    a{
        font-size: .9em;
        color: #333;
        font-weight: 100;
    }
}