@charset "UTF-8";

* {
    margin: 0px;
    padding: 0px;
    box-sizing: border-box;
}

body, html {
    height: 100%;
    overflow: hidden;
    --tile-height: 140px;
    --tile-margin: 30px;
    --tile-width: 120px;
    --title-height: 20px;
}

/*---------------------------------------------*/
h1, h2, h3, h4, h5, h6 {
    margin: 0px;
}

p {
    font-size: 14px;
    line-height: 1.7;
    color: #666666;
    margin: 0px;
}

ul, li {
    margin: 0px;
    list-style-type: none;
}

a {
    color: #666666;
    display: block;
}

a:focus {
    outline: none !important;
    cursor: pointer;
}

a:hover {
    text-decoration: none;
    color: #444444;
    cursor: pointer;
}

/*[button,input and text area style]------------------------------------------*/
button {
    outline: none !important;
    border: none;
    /* background: transparent; */
}

button:hover {
    cursor: pointer;
}

input {
    outline: none;
    border: none;
}

textarea {
    outline: none;
    border: none;
}

textarea:focus, input:focus {
    border-color: transparent !important;
}

input:focus::-webkit-input-placeholder {
    color: transparent;
}

input:focus:-moz-placeholder {
    color: transparent;
}

input:focus::-moz-placeholder {
    color: transparent;
}

input:focus:-ms-input-placeholder {
    color: transparent;
}

textarea:focus::-webkit-input-placeholder {
    color: transparent;
}

textarea:focus:-moz-placeholder {
    color: transparent;
}

textarea:focus::-moz-placeholder {
    color: transparent;
}

textarea:focus:-ms-input-placeholder {
    color: transparent;
}

input::-webkit-input-placeholder {
    color: #adadad;
}

input:-moz-placeholder {
    color: #adadad;
}

input::-moz-placeholder {
    color: #adadad;
}

input:-ms-input-placeholder {
    color: #adadad;
}

textarea::-webkit-input-placeholder {
    color: #adadad;
}

textarea:-moz-placeholder {
    color: #adadad;
}

textarea::-moz-placeholder {
    color: #adadad;
}

textarea:-ms-input-placeholder {
    color: #adadad;
}

/*[base body container]-------------------------------------------------------*/
.ac-base {
    width: 100%;
    min-height: 93%;
    display: -webkit-box;
    display: -webkit-flex;
    display: -moz-box;
    display: -ms-flexbox;
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    align-items: center;
    padding: 15px;
    background: #f2f2f2;
    overflow: hidden;
}

/*[frame container]-----------------------------------------------------------*/
.ac-container {
    width: 500px;
    background: #fff;
    border-radius: 15px;
    overflow: hidden;
    padding: 77px 55px 33px 55px;
    box-shadow: 0 10px 10px 0px rgba(0, 0, 0, 0.1);
    -moz-box-shadow: 0 10px 10px 0px rgba(0, 0, 0, 0.1);
    -webkit-box-shadow: 0 10px 10px 0px rgba(0, 0, 0, 0.1);
    -o-box-shadow: 0 10px 10px 0px rgba(0, 0, 0, 0.1);
    -ms-box-shadow: 0 10px 10px 0px rgba(0, 0, 0, 0.1);
}

.ac-admin-container {
    width: 800px;
    background: #fff;
    border-radius: 15px;
    overflow: hidden;
    padding: 77px 55px 33px 55px;
    box-shadow: 0 10px 10px 0px rgba(0, 0, 0, 0.1);
    -moz-box-shadow: 0 10px 10px 0px rgba(0, 0, 0, 0.1);
    -webkit-box-shadow: 0 10px 10px 0px rgba(0, 0, 0, 0.1);
    -o-box-shadow: 0 10px 10px 0px rgba(0, 0, 0, 0.1);
    -ms-box-shadow: 0 10px 10px 0px rgba(0, 0, 0, 0.1);
    overflow-y: auto;
    overflow-x: hidden;
}
/*[ Responsive ]--------------------------------------------------------------*/
@media ( max-width : 576px) {
    .ac-container {
        padding: 77px 15px 33px 15px;
        width: 370px;
    }
}

/*[ form elements ]----------------------------------------------------------*/
.ac-container-header {
    display: block;
    /* padding-bottom: 60px; */
}

.ac-title {
    display: block;
    font-size: 30px;
    color: #333333;
    line-height: 1.2;
    text-align: center;
    padding-bottom: 26px;
}

.ac-title p {
    margin-top: 30px;
}

.ac-form-field {
    width: 100%;
    position: relative;
    border-bottom: 2px solid #adadad;
    /* margin-bottom: 37px; */
    margin-top: 20px;
}

.ac-select {
   background: transparent;
   border: none;
   height: 30px;
   padding: 2px; /* If you add too much padding here, the options won't show in IE */
   width: 100%;
}

.ac-form-submit {
    margin-top: 20px;
}

.ac-submit {
    font-size: 15px;
    color: #464646;
    background: #f2f2f2;
    line-height: 1.2;
    text-transform: uppercase;
    display: -webkit-box;
    display: -webkit-flex;
    display: -moz-box;
    display: -ms-flexbox;
    display: block;
    justify-content: center;
    align-items: center;
    padding: 0 20px;
    width: 100%;
    height: 35px;
    border-radius: 25px;
    margin-top: 20px;

}

.ac-submit:hover {
    background: #e4e4e4;
    color: #000000;
}

.ac-footer-error {
    padding: 30px 0 10px 0;
    color: #ff0000;
    font-size: 18px;
}

/*[input style]---------------------------------------------------------------*/
.ac-input {
    color: #555555;
    line-height: 1.2;
    display: block;
    width: 100%;
    height: 45px;
    background: transparent;
    padding: 0 5px;
}

/*[input focus]---------------------------------------------------------------*/
.ac-input-focus {
    position: absolute;
    display: block;
    width: 100%;
    height: 100%;
    top: 0;
    left: 0;
    pointer-events: none;
}

.ac-input-focus::before {
    content: "";
    display: block;
    position: absolute;
    bottom: -2px;
    left: 0;
    width: 0;
    height: 2px;
    -webkit-transition: all 0.4s;
    -o-transition: all 0.4s;
    -moz-transition: all 0.4s;
    transition: all 0.4s;
    background: #f2f2f2;
    background: -webkit-linear-gradient(left, #f2f2f2, #000000);
    background: -o-linear-gradient(left, #f2f2f2, #000000);
    background: -moz-linear-gradient(left, #f2f2f2, #000000);
    background: linear-gradient(left, #f2f2f2, #000000);
}

.ac-input-focus::after {
    font-family: Poppins-Regular;
    font-size: 15px;
    color: #999999;
    line-height: 1.2;
    content: attr(data-placeholder);
    display: block;
    width: 100%;
    position: absolute;
    top: 16px;
    left: 0px;
    padding-left: 5px;
    -webkit-transition: all 0.4s;
    -o-transition: all 0.4s;
    -moz-transition: all 0.4s;
    transition: all 0.4s;
}

.ac-input:focus+.ac-input-focus::after {
    top: -15px;
}

.ac-input:focus+.ac-input-focus::before {
    width: 100%;
}

.has-val.ac-input+.ac-input-focus::after {
    top: -15px;
}

.has-val.ac-input+.ac-input-focus::before {
    width: 100%;
}

.valid.ac-input+.ac-input-focus::before {
    width: 100%;
    background: #80ff00;
    background: -webkit-linear-gradient(left, #f2f2f2, #80ff00);
    background: -o-linear-gradient(left, #f2f2f2, #80ff00);
    background: -moz-linear-gradient(left, #f2f2f2, #80ff00);
    background: linear-gradient(left, #f2f2f2, #80ff00);
}

.invalid.ac-input+.ac-input-focus::before {
    width: 100%;
    background: #f00f0f;
}

/*[Portal Tiles]---------------------------------------------------------------*/

.ac-tiles {
    font-size: 0;
    height: calc(2*var(--tile-height) + var(--tile-margin));
    line-height: calc(var(--tile-height) + var(--tile-margin));
    margin: 4px 0 8px 0;
    /* position: absolute; */
    display: block;
    text-align: -webkit-auto;
    user-select: none;
}

.ac-tile {
    border-radius: 5px;
    box-sizing: border-box;
    display: none;
    font-family: arial, sans-serif;
    font-size: 12px;
    height: var(--tile-height);
    line-height: 100%;
    margin: 0 calc(var(--tile-margin) / 2);
    opacity: 1;
    position: relative;
    vertical-align: top;
    white-space: nowrap;
    width: var(--tile-width);
}


/* Min height for showing 1 row: 4px + 128px + 8px
   Min height for showing 2 rows: 4px + 128px + 16px + 128px + 8px
   In both cases, give it half a px of tolerance, because otherwise rounding
   errors at some zoom levels break this and a row sometimes doesn't show up.
*/

/* Minimal layout: 1 row, 2 columns; only first 2 tiles are visible. */
@media (min-height: 139.5px) {
  .ac-tile:nth-child(-n+2),
  .ac-empty-tile:nth-child(-n+2) {
    display: inline-block;
  }
}

/* width >= (3 cols * (16px + 154px))
 * 1 row, 3 columns; first 3 tiles are visible. */
@media (min-height: 139.5px) and (min-width: 510px) {
  .ac-tile:nth-child(-n+3),
  .ac-empty-tile:nth-child(-n+3) {
    display: inline-block;
  }
}

/* width >= (4 cols * (16px + 154px))
 * 1 row, 4 columns; first 4 tiles are visible. */
@media (min-height: 139.5px) and (min-width: 680px) {
  .ac-tile:nth-child(-n+4),
  .ac-empty-tile:nth-child(-n+4) {
    display: inline-block;
  }
}

/* 2 rows, 2 columns; only first 4 tiles are visible. */
@media (min-height: 283.5px) {
  .ac-tile:nth-child(-n+4),
  .ac-empty-tile:nth-child(-n+4) {
    display: inline-block;
  }
}

/* width >= (3 cols * (16px + 154px))
 * 2 rows, 3 columns; first 6 tiles are visible. */
@media (min-height: 283.5px) and (min-width: 510px) {
  .ac-tile:nth-child(-n+6),
  .ac-empty-tile:nth-child(-n+6) {
    display: inline-block;
  }
}

/* width >= (4 cols * (16px + 154px))
 * 2 rows, 4 columns; first 8 tiles are visible. */
@media (min-height: 283.5px) and (min-width: 680px) {
  .ac-tile:nth-child(-n+8),
  .ac-empty-tile:nth-child(-n+8) {
    display: inline-block;
  }
}

.ac-tile {
  background: rgb(250,250,250);
  box-shadow: 0 2px 2px 0 rgba(0,0,0,0.16), 0 0 0 1px rgba(0,0,0,0.08);
  cursor: pointer;
  transition-duration: 200ms;
  transition-property: transform, box-shadow, margin, opacity, width;
  transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
}

.ac-tile:hover:not(:active),
.ac-tile:focus-within:not(:active) {
  box-shadow: 0 3px 8px 0 rgba(0,0,0,0.2), 0 0 0 1px rgba(0,0,0,0.08);
}

.ac-tile:focus,
.ac-tile:focus-within {
  filter: brightness(92%);
}

.ac-tile:active {
  box-shadow: 0 3px 8px 0 rgba(0,0,0,0.2), 0 0 0 1px rgba(0,0,0,0.12);
  filter: brightness(88%);
}

.ac-tile-title {
    height: 20px;
    text-align: center;
    line-height: 14px;
    overflow: hidden;
    padding: 0;
    position: absolute;
    text-overflow: ellipsis;
    top: 9px;
    width: 120px;
}

.ac-tile-thumb {
    border-radius: 0 0 2px 2px;
    cursor: pointer;
    display: block;
    height: calc(var(--tile-height) - var(--title-height));
    overflow: hidden;
    position: absolute;
    top: var(--title-height);
    width: var(--tile-width);
}

.ac-tile-thumb img {
    width: 100%;
}

/* TABS */

.ac-tablist {
    overflow: hidden;
    background: #ababab;
    border-radius: 15px 15px 0 0;
    position: fixed;
    /* padding: 0 55px 0 55px; */
    margin: -35px -55px -33px -55px;
    width: 800px;
}

.ac-tabpanel {
    display: none;
    animation: fadeEffect 1s; /* Fading effect takes 1 second */
}

.ac-tabpanel.active {
    display: block;
}

@keyframes fadeEffect {
    from {opacity: 0;}
    to {opacity: 1;}
}

.ac-tab {
    background-color: inherit;
    float: left;
    border: none;
    outline: none;
    cursor: pointer;
    padding: 14px 16px;
    transition: 0.3s;
    font-size: 17px;
}

.ac-tab:hover, .ac-tab.active {
    background-color: white;
}

/* Lists ---------------------------------------------------------------------*/

.ac-list {
    margin-bottom: 20px;
    padding: 0;

}

.ac-list-item {
    cursor: pointer;
    position: relative;
    padding: 12px 8px 12px 40px;
    background: #fff;
    font-size: 18px;
    transition: 0.2s;
    text-transform: uppercase;
}

.ac-list-item:nth-child(odd){
    background: #f2f2f2;
}

.ac-list-item:hover,.ac-list-item.active  {
    background: #ababab;
}
/* Table ---------------------------------------------------------------------*/
.ac-table {
    margin: 0 -25px;
    width: 750px;

}
.ac-table table {
   width:100%;
   border-spacing: 0px;
}
.ac-table table thead tr {
    background-color: #ababab;
    font-size: 18px;
    text-transform: uppercase;
    height: 25px;
}

.ac-table table thead tr th {
    padding: 10px 0px;
    /* width: 125px; */
    border: 1px solid #ababab;
}

.ac-table table tbody tr td {
    text-align: center;
    border-right: 0.5px solid #ababab;
}

.ac-table table tbody tr td:last-child {
    border-right: 0;
}


.ac-table table tbody tr {
    background: #fff;
    height: 30px;
}

.ac-table table tbody tr:nth-child(odd) {
    background: #f2f2f2;
}

.ac-table table tfoot tr {
    background: #fff;
    margin-top: 20px;
    height: 90px;
}

/* MODAL BOX ----------------------------------------------------------------*/
.ac-modal {
    display: block;
    width: 800px;
    max-width: 100%;
    height: 600px;
    max-height: 100%;
    position: fixed;
    z-index: 100;
    left: 50%;
    top: 50%;
    /* Use this for centering if unknown width/height */
    transform: translate(-50%, -50%);
    /* If known, negative margins are probably better (less chance of blurry text). */
    /* margin: -200px 0 0 -200px; */
    background: white;
    box-shadow: 0 0 60px 10px rgba(0, 0, 0, 0.9);
    border-radius: 15px 15px;
}

.ac-modal-overlay {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  z-index: 50;
  background: rgba(0, 0, 0, 0.6);
}

.closed {
    display: none;
}

.ac-modal-content {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    overflow: auto;
    padding: 20px 50px 20px 20px;
}

.ac-close-button {
    position: absolute;
    /* don't need to go crazy with z-index here, just sits over .modal-guts */
    z-index: 1;
    top: 10px;
    /* needs to look OK with or without scrollbar */
    right: 20px;
    border: 0;
    padding: 5px 10px;
    font-size: 1.3rem;
}