body {
        padding-top: 30px;
        font-family: 'Nanum Gothic', sans-serif;
      }
      @media (min-width: 992px) {
        body {
          padding-top:18px;
        }
      }

      table th{
        font-weight: normal;
      }

      .view-set-heading{
          padding: 8px 13px 8px 13px;
          text-align: center;
      }

      .view-set-button{
        display: block;
        text-align: center;
        color: #5d5d5d;
        max-width: 120px;
        margin: 0 auto;
        text-decoration: none;
        padding: 6px 13px 6px 13px;
        border-radius: 35px;
        transition: all 0.3s ease;
      }

       .view-set-button:hover{
        color: #fff;
        text-decoration: none;
        background: #5d5d5d;
        -webkit-box-shadow: 0px 0px 15px 0px rgba(0,0,0,0.3);
        -moz-box-shadow: 0px 0px 15px 0px rgba(0,0,0,0.3);
        box-shadow: 0px 0px 15px 0px rgba(0,0,0,0.3);
      }

      .table-shadow{
           -webkit-box-shadow: 0px 0px 20px 0px rgba(0,0,0,0.21);
-moz-box-shadow: 0px 0px 20px 0px rgba(0,0,0,0.21);
box-shadow: 0px 0px 20px 0px rgba(0,0,0,0.21);
      }

      .bg-light{
        background: white!important;
      }

      .br-gray{
        background: #F7F8F8;
      }

      .bold-text{
        font-weight: 600;
      }

      .navbar{
        
        background: white;
        min-height: 75px;
      }

      .small-shadow{
-webkit-box-shadow: -4px 9px 5px -6px rgba(0,0,0,0.18);
-moz-box-shadow: -4px 9px 5px -6px rgba(0,0,0,0.18);
box-shadow: -4px 9px 5px -6px rgba(0,0,0,0.18);
      }

      #brand-logo{
        width: 140px;
        left: 35px;
        top: 15px;
        position: absolute;
        height: auto;
        border-right: 2px solid #DBDBDB;
        padding-right: 20px;
        display: block;
      }

      .grid-border-style{
        border: 10px solid white;
        -webkit-box-shadow: 0px 2px 16px 0px rgba(0,0,0,0.27);
        -moz-box-shadow: 0px 2px 16px 0px rgba(0,0,0,0.27);
        box-shadow: 0px 2px 16px 0px rgba(0,0,0,0.27);
      }

      .banner-link{
        color: black;
        transition: all 0.1s ease;

      }

       .banner-link:hover{
        color: black;
        text-decoration: none;

      }

       .banner-link img{
        transition: all 0.3s ease;
      }

      .banner-link:hover img{
        transform: scale(1.03) translateY(0px);
        opacity: 1;
        -webkit-box-shadow: 0px 2px 16px 5px rgba(0,0,0,0.27);
        -moz-box-shadow: 0px 2px 16px 5px rgba(0,0,0,0.27);
        box-shadow: 0px 2px 16px 5px rgba(0,0,0,0.27);

      }

      .banner-link p{
          transition: all 0.3s ease;
      }

      .banner-link:hover p{
        /*transform: scale(0.9);*/
      }

     

      #logout-btn{
        border: 2px solid #e2e2e2;
        transition: all 0.3s ease;
      }

      #logout-btn:hover{
        border: 2px solid red;
        color: red;
      }

      .product_name{
        font-weight: bold;
        font-size: 12px;

       /* border: 3px solid #e8e8e8;
        border-radius: 50px;*/
      /*  width: 90%;
        max-width: 450px;*/
      
        margin: 0 auto;
        margin-top: 20px;
        margin-bottom: 5px;
        position: relative;
        color: black;
        background: none;
        transition: all 0.3s ease;
        letter-spacing: 0.03em;
      }

       .date{
        font-size: 12px;
        padding-top: 2px;
        letter-spacing: 0.03em;
      }


   /*   .banner-link:hover .product_name{
        color: #383838;
         background: #d3d3d3;
      }*/

       .campaign_name{
        font-weight: bold;
        font-style: italic;

        font-size: 12px;
        width: 100%;
        max-width: 280px;
  
        margin: 0 auto;
        margin-top: 15px;
        margin-bottom: 6px;
        position: relative;
        color: black;
      }

      .job_number{
        font-size: 12px;
        font-weight: bold;
        letter-spacing: 0.03em;
      }

      .card{
       /* background: #f7f7f7;*/
        padding-left: 0px;
        padding-right: 0px;
        padding-top: 0px;
        padding-bottom: 0px;
        margin-right: 15px;
        margin-left: 15px;
        margin-bottom: 15px;
        transition: all 0.3s ease;
      }

       .card:hover{
        color: #383838;
         background: #fff;
      }

      .product_image{
         min-width: 240px;
        width: 100%;
        height: auto;
        z-index: 2;
   /*     max-width: 500px;*/
      }

      a.banner-link .table{
        font-size: 13px;
        margin-bottom: 0px;
      }

      .table-column-one{
        width: 30%;
      }


      .banner-link:hover .view-btn{
        transform: scale(1);
      }


      .view-btn{
        position: absolute;
        background: rgba(0,0,0,0.8);
        color: red;
        text-align: center;
        width: 40%;
        left: 30%;
        border: 2px solid white;
        top: 140px;
        z-index: 10;
        transform: scale(0);
        transition: all 0.3s ease;
        padding-top: 10px;
        padding-bottom: 10px;
      }

      .view-btn:hover{
        color: white;
           border: 2px solid red;
      }

      .campaign-name-container{
        height: 110px;
       padding: 0px;
        margin-top: 15px;
      }

      .campaign-name{

        text-align: left;
        line-height: 110px;
        font-size: 20px;
        left: -10px;
     ]
      }


      .list-group{
        list-style: none;
         text-align: left;
         line-height: 65px;
         border-bottom: 2px solid #AFAFAF;
         transition: all 0.3s ease;
      }

        .list-group-item.active{
         font-weight: 600;
         background: none;
         color: black;
         outline: none;
         border-bottom: 2px solid #AFAFAF;
         border-color: #AFAFAF;
      }




     .list-group-item:hover{
         list-style: none;
         text-align: left;
         line-height: 65px;
  
         border-bottom: 2px solid #303030;;
      }

         .list-group-item{
    color: #AFAFAF;
       transition: all 0.3s ease;
       font-size: 14px;
      }

        .list-group-item:hover{
    color: #303030;
       text-decoration: none;
      }

        ul#campaign_select_list li a{
    color: #AFAFAF;
       transition: all 0.3s ease;
      }

         ul#campaign_select_list li:hover a{
    color: #303030;
       text-decoration: none;
      }

      .section-preview-heading{
        height: 80px;
        padding-left: 4px;
      }


      .tab-pane-heading{
        height: 80px;
        padding-left: 4px;
        border-bottom: 2px solid #898989;
      }


     #campaign-sets{
      text-align: left;
      line-height: 80px;
      
     }

      .tab-pane-sets{
      text-align: left;
      line-height: 80px;
 
      position: relative;
     top: -15px;

     }


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

     .white-text{
      color: white;
     }

.slide_amounts{
  position: absolute;
  top: 45px;
     color: #757576;
}



.replay-banner:hover{
background: #AAAAAA;
}

.replay-icon-svg{
  width: 18px;
  position: absolute;
  left: 8px;
  top: 14px;
}



#banners-display-section{
  min-height: 1000px;
}

iframe.center{
    margin: 0 auto;
    display: block;
}

/*Change Couresl to Fade add .carousel-fade to carousel */

html,
body,
.carousel,
.carousel-inner,
.carousel-inner .item {
  height: 100%;
}
.carousel-fade .carousel-inner .item {
  transition-property: opacity;
}
.carousel-fade .carousel-inner .item,
.carousel-fade .carousel-inner .active.left,
.carousel-fade .carousel-inner .active.right {
  opacity: 0;
}
.carousel-fade .carousel-inner .active,
.carousel-fade .carousel-inner .next.left,
.carousel-fade .carousel-inner .prev.right {
  opacity: 1;
}
.carousel-fade .carousel-inner .next,
.carousel-fade .carousel-inner .prev,
.carousel-fade .carousel-inner .active.left,
.carousel-fade .carousel-inner .active.right {
  left: 0;
  -webkit-transform: translate3d(0, 0, 0);
          transform: translate3d(0, 0, 0);
}
.carousel-fade .carousel-control {
  z-index: 2;
}


.carousel-control-prev{
    left: 2%;
    position: absolute;
    top: 23px;
    height: 30px;
    color: #fff;
    text-align: center;
    opacity: .5;
  }

  .carousel-control-next{
    right: 2%;
    position: absolute;
    top: 23px;
    height: 30px;
    color: #fff;
    text-align: center;
    opacity: .5;
  }

/*.carousel-control-prev-icon {
    background-image: url(data:image/svg+xml;charset=utf8,%3Csvg xmlns='http://www.w3.org/2000/svg' f…3Cpath d='M5.25 0l-4 4 4 4 1.5-1.5-2.5-2.5 2.5-2.5-1.5-1.5z'/%3E%3C/svg%3E);
}*/

.carousel-control-prev-icon {
    background-image: url('../img/prev-icon.svg');

}

.carousel-control-prev-icon,
.carousel-control-next-icon {
  position: absolute;
  height: 30px;
  width: 95px;
  outline: black;
  background-size: 100%, 100%;
  border-radius: 30px;
 /* border: 2px solid black;*/
  background-image: none;
  transition: all 0.3s ease;
  bottom: 0px;

}

.carousel-control-prev-icon:hover,
.carousel-control-next-icon:hover{
background-color: #d6d6d6;
}

.carousel-control-next-icon:after
{
   content: 'NEXT \00a0 >';
  position: absolute;
  right: 13px;
  font-size: 18px;
  color: black;
}

.carousel-control-prev-icon:after {
  content: '<  \00a0  PREV';
  position: absolute;
  left: 13px;
  font-size: 18px;
  color: black;

}

.carousel-inner {
    position: relative;
    width: 100%;
    min-height: 1000px;
   
    overflow: hidden;
}

.pos-a{position: absolute;}
.pos-r{position: relative;}
.top-0{top: 0;}
.right-0{right: 0;}
.bottom-0{bottom: 0;}
.left-0{left: 0;}
.zero-scale{transform: scale(0);}


.view-one-desktop-text{
  position: relative;
  top: 150px;
  font-size: 15px;
  text-transform: uppercase;
}

.carousel-inner iframe{
  top: 150px;
}


.absolute-center{position: absolute;margin: 0 auto;left: 0;right: 0;margin-left: auto;margin-right: auto;}
.center-block-element{margin: 0 auto;}

.display-table{/*Add this to parent vertical center element*/
  display:table;
}

.vertical-center{/*Add this to next child element of the .display-table element*/
  display:table-cell;
  vertical-align:middle;
}

#clients_dropdown{
  left: 150px;
}


#client_logo{
 width: 120px;
}

.btn-secondary:not(:disabled):not(.disabled).active, .btn-secondary:not(:disabled):not(.disabled):active, .show>.btn-secondary.dropdown-toggle{
  background: none;
  outline: none;
  border: none;
}
.btn-secondary:hover {
    color: #fff;
    background-color: none;
    border-color: #fff;
}

.btn-secondary {
    color: #fff;
    background-color: #fff;
    border-color: #fff;
    border: none;
}

.dropdown-toggle::after {
    color: black;
}

.dropdown-toggle:hover {
background: #fff;
}

.dropdown-toggle:focus {
background: #fff;
}

.dropdown .show{
  border: none;
}

.btn-secondary:not(:disabled):not(.disabled).active:focus, .btn-secondary:not(:disabled):not(.disabled):active:focus, .show>.btn-secondary.dropdown-toggle:focus {
    box-shadow: none;
}

.black-text{
  color: black;
}

.replay-banner{
 color: #1C1C1C;
 top: 90px;
 left: 50%;
 margin-left: -55px;
 position: absolute;
 font-size: 18px;
 font-weight: 600;
 padding: 10px;
 width: 110px;
 text-align: right;
 border-radius: 40px;
 cursor: pointer;
 z-index: 5;
 transition: all 0.5s ease;
}

#mobile_dropdown{
  position: relative;
  margin: 0 auto;
  text-align: center;
  height: 45px;
  top: 10px;
  margin-top: 20px;
  margin-bottom: 20px;
/*background: #c6c6c6;*/
border-radius: 10px;

}

#mobile_dropdown .btn{
  height: 45px;
background: #f2f2f2;
-webkit-box-shadow: 0px 0px 18px 0px rgba(0,0,0,0.2);
-moz-box-shadow: 0px 0px 18px 0px rgba(0,0,0,0.2);
box-shadow: 0px 0px 18px 0px rgba(0,0,0,0.2);
}

.dropdown-menu-center{
   left: 50%!important;
   transform: translateX(-50%)!important;
   top: 45px!important;
   background: #ffffff;
   -webkit-box-shadow: 0px 0px 18px 0px rgba(0,0,0,0.2);
   -moz-box-shadow: 0px 0px 18px 0px rgba(0,0,0,0.2);
   box-shadow: 0px 0px 18px 0px rgba(0,0,0,0.2);
 /*  transform: translate3d(50%, 45px, 0px)!important;*/
}

@media (min-width: 576px) {

  
}

@media (min-width: 768px) {

    .carousel-control-prev{left: 15%;}
  .carousel-control-next{right: 15%;}

  .replay-banner{

 top: 19px;
 right: 0px!important;
 left: auto;
 margin-left: 0px;
 margin-right: 0px;


  }

}

@media (min-width: 992px) {

  .carousel-control-prev{left: 15%;}
  .carousel-control-next{right: 15%;}
 
}

@media (min-width: 1200px) {
 

  .carousel-control-prev{left: 15%;}
  .carousel-control-next{right: 15%;}

}

/******************************************************   

             DATA TABLE OVERRIDES 

********************************************************/

.dataTables_wrapper .dataTables_filter input {
    margin-left: 0.5em;
    border: 1px solid #cccccc;
    border-radius: 30px;
    padding-left: 10px;
    box-sizing: border-box;
}

.dataTables_wrapper .dataTables_filter input:focus {
 outline: none;
}

.dataTables_wrapper .dataTables_paginate .paginate_button.current, .dataTables_wrapper .dataTables_paginate .paginate_button.current:focus{
  outline: none;
}

a.paginate_button.current{

background: none #fff!important;
}

.dataTables_wrapper .dataTables_paginate .paginate_button.current, .dataTables_wrapper .dataTables_paginate .paginate_button:hover{
background-color: fff!important;
background: fff!important;
border-radius: 600px;
}

label {

    text-transform: uppercase;
}

button:focus, select:focus {
 outline: none;
}

.grid-spacer{
  padding-bottom: 40px;
}