/*THIS IS KNOWN AS CSS RESET*/
* {
  margin: 0;
  padding: 0;
  border: 0;
  font-size: 100%;
  font: inherit;
  vertical-align: baseline;
}
/* HTML5 display-role reset for older browsers */
article, aside, details, figcaption, figure, 
footer, header, hgroup, menu, nav, section {
  display: block;
}
body {
  line-height: 1;
}
ol, ul {
  list-style: none;
}
blockquote, q {
  quotes: none;
}
blockquote:before, blockquote:after,
q:before, q:after {
  content: '';
  content: none;
}
table {
  border-collapse: collapse;
  border-spacing: 0;
}

@font-face {
  font-family: 'Roboto';
  src: url('../Roboto/Roboto-Regular.woff2') format('woff2'),
    url('../Roboto/Roboto-Regular.woff') format('woff'),
    url('../Roboto/Roboto-Regular.ttf')  format('truetype');
}

body {
  font-family: 'Roboto', sans-serif;
}

:root {
  --page-yellow: #fed766;
  --page-blue: #2ab7ca;
  --page-primary: #1ba1e8;
  /*--page-primary: #007bff;*/
  --page-warning: #ffc107;
  --page-danger: #dc3545;
  --page-gray: #e6e6ea;
  --page-red: #fe4a49;
  --page-green: #28a745;
  --page-disabled: #d3d3d3;
}

html {
  background-color: #FFFFFF;
}

hr {
  margin: 5px;
  height: 2px;
  border-radius: 50%;
  color: var(--page-gray);
  background-color: var(--page-gray);
}

/* BUTTON STUFF */
button {
  transition: all 0.2s ease 0s;
  width: 130px;
  height: 40px;
  background-color: var(--page-green);
  border: none;
  position: relative;
  color: white;
  font-weight: 600;
  font-family: 'Open Sans', sans-serif;
  font-size: 15px;
  text-align: left;
  text-indent: 5px;
  /* box-shadow: 0px 3px 0px 0px rgba(0,0,0,.2); */
  cursor: pointer;
}
.submit-btn {
  background-color: var(--page-green);
  color: white;
  transition: .3s ease-in;
  width: 30%;
  padding: 1.2rem !important;
  border-radius: 2.5rem;
  height: inherit;
  -webkit-box-shadow: -5px 14px 14px -9px rgba(0,0,0,0.38);
  -moz-box-shadow: -5px 14px 14px -9px rgba(0,0,0,0.38);
  box-shadow: -5px 14px 14px -9px rgba(0,0,0,0.38);
  border: none !important;
}
.submit-btn:hover {
  color: var(--page-green) !important;
  background-color: white !important;
  border: 1px solid var(--page-green) !important;
  -webkit-box-shadow: -5px 14px 14px -9px rgba(0,0,0,0);
  -moz-box-shadow: -5px 14px 14px -9px rgba(0,0,0,0);
  box-shadow: -5px 14px 14px -9px rgba(0,0,0,0);
}
button:active {
  box-shadow: 0px 2px 0px 0px rgba(0,0,0,.2);
  top: 1px;
}

button:focus {
  outline: none;
}

button:after {
  content: "";
  width: 0;
  height: 0;
  display: block;
  border-top: 20px solid #187dbc;
  border-bottom: 20px solid #187dbc;
  border-left: 16px solid transparent;
  border-right: 20px solid #187dbc;
  position: absolute;
  opacity: 0.6; 
  right: 0;
  top: 0;
}

button:hover {
  color: #494949 !important;
  border-color: #494949 !important;
}
.plus-category {
  position: relative;
  top: .13rem;
  height: 2.4rem;
  width: 12% !important;
  border-radius: .25rem !important;
  color: var(--page-primary) !important;
  background-color: white;
  border: 1px solid var(--page-primary);
  font-size: 1.5rem;
}
.plus-category:hover {
  color: white !important;
  background-color: var(--page-primary);
  border: 1px solid var(--page-primary) !important;
}
.minus-category {
  position: relative;
  top: .13rem;
  height: 2.4rem;
  margin-left: .25rem;
  width: 12% !important;
  border-radius: .25rem !important;
  color: var(--page-danger) !important;
  background-color: white;
  border: 1px solid var(--page-danger) !important;
  font-size: 1.5rem;
}
.minus-category:hover {
  color: white !important;
  background-color: var(--page-danger);
  border: 1px solid var(--page-danger) !important;
}
button.back {
  text-align: right;
  padding-right: 12px;
  box-sizing: border-box;
}

button.back:after {
  content: "";
  width: 0;
  height: 0;
  display: block;
  border-top: 20px solid #187dbc;
  border-bottom: 20px solid #187dbc;
  border-right: 16px solid transparent;
  border-left: 20px solid #187dbc;
  position: absolute;
  opacity: 0.6; 
  left: 0;
  top: 0;
}

button.site {
  text-align: center;
  text-indent: 0;
}
.home-categories {
  border-radius: .25rem;
  padding: .375rem .75rem;
  margin: 0 .25rem;
  background-color: var(--page-primary);
  border: 1px solid var(--page-primary);
  color: white;
  margin-bottom: 12px;
}
.leftor-img {
  margin-bottom: .5rem;
}
.leftor-img img {
  margin-left: .1rem;
}
.home-categories:hover {
  border-color: #0069d9 !important;
  color: #ebebeb !important;
}
button.site:after{
  display: none;
}

button.status-off {
  background-color: white;
  color: var(--page-primary);
  border: 1px solid var(--page-primary);
  opacity: .6;
}
button.status-off:hover {
  color: #0069d9 !important;
  opacity: .8;
}

/* NEW-EVENT-FORM */
#new-event-form-layout {
  width: 100%;
  display: grid;
  grid-template-columns: 49% 49%;
}

#new-event-form textarea {
  background-color: #fff;
  resize: none;
}

#new-event-form input, #new-event-form textarea {
  -webkit-transition: all 0.30s ease-in-out;
  -moz-transition: all 0.30s ease-in-out;
  -ms-transition: all 0.30s ease-in-out;
  -o-transition: all 0.30s ease-in-out;
  outline: none;
  color: #495057;
  padding: .375rem .75rem;
  background-color: #fff;
  background-clip: padding-box;
  border: 1px solid #ced4da;
  border-radius: .25rem;
  transition: border-color .15s ease-in-out,box-shadow .15s ease-in-out;
  width: 98%;
  margin-left: 1%;
  text-indent: 5px;
}

#new-event-form select {
  -webkit-transition: all 0.30s ease-in-out;
  -moz-transition: all 0.30s ease-in-out;
  -ms-transition: all 0.30s ease-in-out;
  -o-transition: all 0.30s ease-in-out;
  outline: none;
  color: #495057;
  padding: .375rem .75rem;
  background-color: #fff;
  background-clip: padding-box;
  border: 1px solid #ced4da;
  border-radius: .25rem;
  width: 98%;
  margin-left: 1%;
  outline: none;
}
#new-event-form input:focus, #new-event-form textarea:focus, #new-event-form select:focus {
  box-shadow: 0 0 3px rgba(0, 0, 0, .6);
  border: 1px solid rgba(0, 0, 0, .6);
}

#new-event-form label {
  margin-left: 0.5em;
  text-overflow: break-word;
  line-height: 1.2em;
}

/*ADJUST FOR RESPONSIVENESS*/
@media only screen and (max-width: 480px) {
  .event-component-table-2-column {
    display: grid;
    grid-template-columns: 100%;
  }
  button:hover {
    color: #494949 !important;
    border-color: #494949 !important;
  }
  #main-layout {
    width: 100%;
    display: grid;
    grid-template-columns: 100% !important;
    grid-template-areas:
      "header"
      "body" !important;
    grid-row-gap: 10px;
  }
}
@media screen and (max-width: 600px) {
  #new-event-form-layout {
    width: 100%;
    display: grid;
    grid-template-columns: 100%;
  }
  button:hover {
    color: #494949 !important;
    border-color: #494949 !important;
  }
  #main-layout {
    width: 100%;
    display: grid;
    grid-template-columns: 100% !important;
    grid-template-areas:
      "header"
      "body" !important;
    grid-row-gap: 10px;
  }
}

/* EVENT DESIGN */
.event-component-container {
  max-width: 100%;
  border: 1px solid #e6e6e6;
  overflow: hidden;
  border-radius: .25rem;
  height: fit-content;
  /* #212429; */
  background-color: #fafafa;
  /* -webkit-box-shadow: 4px 6px 15px -2px rgba(0,0,0,0.75);
  -moz-box-shadow: 4px 6px 15px -2px rgba(0,0,0,0.75);
  box-shadow: 4px 6px 15px -2px rgba(0,0,0,0.75); */
  overflow: hidden;
}

.event-component-table-2-column {
  display: grid;
  grid-template-columns: 35% 65%;
  color: #474747;
  border-bottom: 2px solid #e0e0e0;
}
.event-component-table-2-column div {
  padding: .7rem 0 .7rem .4rem;
}
.event-component-table-2-column div:first-child {
  border-right: 2px solid #e0e0e0;
  box-sizing: content-box;
}

.event-component-name {
  text-align: center;
  padding: .9rem 0;
  font-size: 1.1em;
  font-weight: 400;
  background-color: #8695a3;
  /* 808e9c this good too*/
  border-bottom: 3px ridge var(--page-primary);
  color: white;
}

.event-component-update {
  display: grid;
  grid-template-columns: 30% 70%;
  grid-template-rows: 1.1em 1fr;
  padding: 5px;
  grid-row-gap: 5px;
  grid-template-areas:
    "update-name update-time"
    "update-name update-text";
}

.event-component-update-time {
  grid-area: update-time;
}

.event-component-update-text {
  grid-area: update-text;
}

/* HOMEPAGE DESIGN */
#main-layout {
  display: grid;
  grid-template-columns: 10% auto 10%;
  grid-template-areas:
    ". header ."
    ". body .";
  grid-row-gap: 10px;
}
#pick-categories {
  grid-area: header;
  text-align: center;
}
#events-container {
  grid-area: body;
  display: grid;
  grid-gap: 10px;
  grid-template-columns: repeat(auto-fill, 1fr);
}
/* ademir new styles */
.asterisk-red {
  color: red;
}
#event-component-preview {
  overflow: hidden;
}

/* FORM DESIGN STUFF */
.form-error-messages {
  text-align: center;
  font-weight: bold;
  color: var(--page-red);
  margin-top: 0.2em;
}

.form-error-messages.success {
  color: var(--page-green);
}