body { }

a:hover { cursor: pointer; }

/*Typography*/

h1, h2, h3, h4, h5{
    margin-top: 0;
}

p{
    margin-top: 0;
}

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

.text-right{
    text-align: right;
}

ul.pills{
    padding:0;
}

ul.pills li{
    display:inline-block;
    margin-right: 5px;  
    margin-bottom: 15px;
    list-style-type: none;
    
}

ul.pills li a{
    padding:3px 5px;
    background: rgba(0,0,0,0.2);
    border-radius: 3px;
    text-decoration: none;
    color:rgba(0,0,0,0.6);
}

/* Utilities */

.sr-only{display: none;}
.shaded{background: #f5f7f9;}
.shaded-dark{background: rgba(0,0,0,0.2);}
.p-small{padding: 10px; box-sizing: border-box;}
.p-med{padding: 20px; box-sizing: border-box;}
.p-lrg{padding: 50px; box-sizing: border-box;}
.mb-0{margin-bottom: 0;}
.mt-5{margin-top: 25px;}
.btn{background: rgba(0,0,0,0.5); padding:5px; display: inline-block; border-radius: 3px;}
.btn.btn-lrg{font-size: 110%; padding:10px;}
.float-r{float: right;}

/* Edit Menu */

ul.edit{
    padding: 0;
    position: absolute;
}

ul.edit li{
    margin-bottom: 20px;
    list-style-type: none;
}

ul.edit li a{
    display: block;
    width: 30px;
    height: 30px;
    text-align: center;
    padding:10px;
    background: yellow;
    border-radius: 100%;
    margin-bottom: 20px;
}

/* Modals */
.BN-modal{
    position: absolute;
    background: #f5f7f9;
    z-index: 1;
    top:0;
    left:0;
    width:100%;
    height:100vh;
    padding: 20px 50px;
    box-sizing: border-box;
    overflow-x: hidden;
    overflow-y: scroll;
}

.sidebar{
    position: absolute;
    background: #f5f7f9;
    z-index: 1;
    top:0;
    left:0;
    width:30%;
    height:100vh;
    padding: 20px 30px;
    box-sizing: border-box;
    overflow-x: hidden;
    overflow-y: scroll;
    -webkit-box-shadow: 8px 0px 12px -8px rgba(0,0,0,0.48);
    -moz-box-shadow: 8px 0px 12px -8px rgba(0,0,0,0.48);
    box-shadow: 8px 0px 12px -8px rgba(0,0,0,0.48);
}

.BN-modal h1{
    display: inline-block;
    width: auto;
    margin-right: 10px;
}

#modalOne .btn.btn-lrg{
    position: relative; top:-3px;
}

#modalFour{z-index: 999;}

#modalFour .refine{margin-bottom: 20px; border-radius: 3px;}

/* Containing Elements */
.wrapper{
    
}

/* Layout */

.d-none{
    display: none;
}

.d-grid{
    display: grid;
}

.d-flex{
    display: flex;
}

.d-block{
    display: block;
}

.col{
    flex: 1;
}

.col + .col{
    margin-left:10px;
}

/* Library */

header{width: 70%; margin: auto;}

.d-grid.library{
    grid-template-columns: 30% 65%;
    grid-template-rows: auto;
    column-gap: 5%;
    grid-row-gap: 20px;
    margin: 50px auto 0 auto;
    width:70%;
}

.d-grid.library .filters{
    align-self: start;
}

.d-grid.library .resources{
    display: grid;
    grid-template-columns: 32% 32% 32%;
    grid-template-rows: auto;
    grid-column-gap: 2%;
    grid-row-gap: 2%;
}

.item h3{
    margin-bottom: 0;
    margin-top: 15px;
}

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

.item *:last-child{
    margin-bottom: 0;
}

a:hover .item{
    background: #f5f7f9;
}

a .item *{
    color:#000;
    text-decoration: none;
}

/* Forms */

fieldset{
    flex: 1;
    padding:20px;
}

input{width: 100%; box-sizing: border-box;}
input.qrtr{width: 25%;}
input[type=submit], input[type=checkbox], input[type=radio]{width: auto; margin-top: 10px;}
textarea{width:100%; resize: vertical; box-sizing: border-box;}
select{width: 50%; padding:1px; box-sizing: border-box;}

/* Table */

table.maint{
    table-layout: fixed;
    width: 100%;
    max-width: none;
    background: #fff;
}

table.maint thead{
    text-align: left;
}

th, td{
    padding: 5px;
}

.maint tr.hover { background: yellow; }
.maint tr.drop { background: green; }
.maint tr.move { background: pink; }

.maint td {}
.maint tr th:nth-child(1){width: 24px;}
.maint tr th:nth-child(2){width: 24px;}
.maint tr th:nth-child(3){width: 20%;}
.maint tr th:nth-child(4){width: 20%;}
.maint tr th:nth-child(5){}
.maint tr th:nth-child(6){width: 15%;}
.maint tr th:nth-child(7){width: 10%;}
.maint tr th:nth-child(8){width: 24px;}

.maint tr td{overflow: hidden; white-space: nowrap; text-overflow: ellipsis;}

table.addt{
    table-layout: fixed;
    width: 100%;
    max-width: none;
    background: #fff;
}

table.addt thead{
    text-align: left;
}

.addt td input{margin: 2px 0 0 0;}
.addt tr td:first-of-type{text-align: center;}
.addt tr th:nth-child(1){width: 24px;}
.addt tr th:nth-child(2){width:40%;}
.addt tr th:nth-child(3){}
.addt tr th:nth-child(4){}
.addt tr th:nth-child(5){}
.addt tr th:nth-child(6){}
.addt tr th:nth-child(7){}

.addt tr td{overflow: hidden; white-space: nowrap; text-overflow: ellipsis;}


.BN-modal .close-modal:hover { cursor: pointer; }
.BN-modal {
  top: '35%';
  left: '50%';
  right: 'auto';
  bottom: 'auto';
  margin-right: '-50%';
  width: '60%';
  transform: 'translate(-40%, -10%)';
}
.ReactModalBody  { width: 800px; margin: 0 auto; }
#BN-save-button { position: fixed; top: 10px; right: 10px; }

.BN-modal .image-wrap { 
  width: 20%;
  display: inline-block;
  padding: 2.5%;
  margin: 0;
  border-right: 1px solid #ececec;
  border-top: 1px solid #ececec;
  background: #fff url(/assets/v2/i/loading.gif) 49% 50% no-repeat;
}

.image-wrap img {
  display: block;
  margin: 5px auto;
  clear: both;
  background: #fff;
  max-width: 100%;
  height: 120px;
}
.image-wrap img:hover { cursor: pointer; }