:root {
    --primary: #ed3c39;
    --bg-color: #F7f7f7;
    --bg-color-dark: #0e0e5e;
    --bg-color-light: #e6e6e6;
    --bg-color-footer: #0d0d0d;
    --gray: #ececec;
    --dark-gray: #bfbfbf;
    --light-gray: #Ededf1;
    --blue: #002fff;
    --gradient-gray: #333;
    --red: red;
    --light-red: #F18485;
    --black: black;
    --white: white;
    --dark-violet: #25095a;
    --orange: orange;
    --green: green;
    --color-font2: #6f6f70;
    --dark-blue: #000099;
    --chat-bubble-me: #78acff;
    --chat-bubble-other: #E9E9E9;
}

.scale-up-center {
    -webkit-animation: scale-up-center 0.4s cubic-bezier(0.390, 0.575, 0.565, 1.000) both;
    animation: scale-up-center 0.4s cubic-bezier(0.390, 0.575, 0.565, 1.000) both;
}

.scale-up-center-1 {
    -webkit-animation: scale-up-center 0.6s cubic-bezier(0.390, 0.575, 0.565, 1.000) both;
    animation: scale-up-center 0.6s cubic-bezier(0.390, 0.575, 0.565, 1.000) both;
}

.scale-up-bl {
    -webkit-animation: scale-up-bl 0.4s cubic-bezier(0.390, 0.575, 0.565, 1.000) both;
    animation: scale-up-bl 0.4s cubic-bezier(0.390, 0.575, 0.565, 1.000) both;
}

.scale-up-tr {
    -webkit-animation: scale-up-tr 0.2s cubic-bezier(0.390, 0.575, 0.565, 1.000) both;
    animation: scale-up-tr 0.2s cubic-bezier(0.390, 0.575, 0.565, 1.000) both;
}

.scale-up-bottom {
	-webkit-animation: scale-up-bottom 0.4s cubic-bezier(0.390, 0.575, 0.565, 1.000) both;
	        animation: scale-up-bottom 0.4s cubic-bezier(0.390, 0.575, 0.565, 1.000) both;
}

.rotate-top {
    -webkit-animation: rotate-top 0.5s cubic-bezier(0.455, 0.030, 0.515, 0.955) both;
    animation: rotate-top 0.5s cubic-bezier(0.455, 0.030, 0.515, 0.955) both;
}

.rotate-center {
    -webkit-animation: rotate-center 0.6s ease-in-out both;
    animation: rotate-center 0.6s ease-in-out both;
}

.scale-down-center {
    -webkit-animation: scale-down-center 0.4s cubic-bezier(0.250, 0.460, 0.450, 0.940) both;
    animation: scale-down-center 0.4s cubic-bezier(0.250, 0.460, 0.450, 0.940) both;
}

.slide-top {
    -webkit-animation: slide-top 0.5s cubic-bezier(0.250, 0.460, 0.450, 0.940) both;
    animation: slide-top 0.5s cubic-bezier(0.250, 0.460, 0.450, 0.940) both;
}

.rotate-scale-up-hor {
    -webkit-animation: rotate-scale-up-hor 0.65s linear both;
    animation: rotate-scale-up-hor 0.65s linear both;
}

.puff-in-center {
	-webkit-animation: puff-in-center 0.7s cubic-bezier(0.470, 0.000, 0.745, 0.715) both;
	        animation: puff-in-center 0.7s cubic-bezier(0.470, 0.000, 0.745, 0.715) both;
}

.tracking-in-expand {
	-webkit-animation: tracking-in-expand 0.7s cubic-bezier(0.215, 0.610, 0.355, 1.000) both;
	        animation: tracking-in-expand 0.7s cubic-bezier(0.215, 0.610, 0.355, 1.000) both;
}

.bounce-in-top {
	-webkit-animation: bounce-in-top 1.1s both;
	        animation: bounce-in-top 1.1s both;
}

.fade-in {
	-webkit-animation: fade-in 0.3s cubic-bezier(0.390, 0.575, 0.565, 1.000) both;
	        animation: fade-in 0.3s cubic-bezier(0.390, 0.575, 0.565, 1.000) both;
}

.slide-in-top {
	-webkit-animation: slide-in-top 0.5s cubic-bezier(0.250, 0.460, 0.450, 0.940) both;
	        animation: slide-in-top 0.5s cubic-bezier(0.250, 0.460, 0.450, 0.940) both;
}

/* ----------------------------------------------
* Generated by Animista on 2023-1-16 10:21:7
* Licensed under FreeBSD License.
* See http://animista.net/license for more info. 
* w: http://animista.net, t: @cssanimista
* ---------------------------------------------- */

/**
* ----------------------------------------
* animation scale-up-center
* ----------------------------------------
*/
@-webkit-keyframes scale-up-center {
    0% {
        -webkit-transform: scale(0.5);
        transform: scale(0.5);
    }
    100% {
        -webkit-transform: scale(1);
        transform: scale(1);
    }
}
@keyframes scale-up-center {
    0% {
        -webkit-transform: scale(0.5);
        transform: scale(0.5);
    }
    100% {
        -webkit-transform: scale(1);
        transform: scale(1);
    }
}

/**
 * ----------------------------------------
 * animation scale-up-bottom
 * ----------------------------------------
 */
 @-webkit-keyframes scale-up-bottom {
    0% {
      -webkit-transform: scale(0.5);
              transform: scale(0.5);
      -webkit-transform-origin: 50% 100%;
              transform-origin: 50% 100%;
    }
    100% {
      -webkit-transform: scale(1);
              transform: scale(1);
      -webkit-transform-origin: 50% 100%;
              transform-origin: 50% 100%;
    }
  }
  @keyframes scale-up-bottom {
    0% {
      -webkit-transform: scale(0.5);
              transform: scale(0.5);
      -webkit-transform-origin: 50% 100%;
              transform-origin: 50% 100%;
    }
    100% {
      -webkit-transform: scale(1);
              transform: scale(1);
      -webkit-transform-origin: 50% 100%;
              transform-origin: 50% 100%;
    }
  }
  
  
/**
* ----------------------------------------
* animation scale-up-bl
* ----------------------------------------
*/
@-webkit-keyframes scale-up-bl {
    0% {
        -webkit-transform: scale(0.5);
        transform: scale(0.5);
        -webkit-transform-origin: 0% 100%;
        transform-origin: 0% 100%;
    }
    100% {
        -webkit-transform: scale(1);
        transform: scale(1);
        -webkit-transform-origin: 0% 100%;
        transform-origin: 0% 100%;
    }
}
@keyframes scale-up-bl {
    0% {
        -webkit-transform: scale(0.5);
        transform: scale(0.5);
        -webkit-transform-origin: 0% 100%;
        transform-origin: 0% 100%;
    }
    100% {
        -webkit-transform: scale(1);
        transform: scale(1);
        -webkit-transform-origin: 0% 100%;
        transform-origin: 0% 100%;
    }
}

/**
* ----------------------------------------
* animation scale-up-tr
* ----------------------------------------
*/
@-webkit-keyframes scale-up-tr {
    0% {
        -webkit-transform: scale(0.5);
        transform: scale(0.5);
        -webkit-transform-origin: 100% 0%;
        transform-origin: 100% 0%;
    }
    100% {
        -webkit-transform: scale(1);
        transform: scale(1);
        -webkit-transform-origin: 100% 0%;
        transform-origin: 100% 0%;
    }
}
@keyframes scale-up-tr {
    0% {
        -webkit-transform: scale(0.5);
        transform: scale(0.5);
        -webkit-transform-origin: 100% 0%;
        transform-origin: 100% 0%;
    }
    100% {
        -webkit-transform: scale(1);
        transform: scale(1);
        -webkit-transform-origin: 100% 0%;
        transform-origin: 100% 0%;
    }
}

/**
* ----------------------------------------
* animation rotate-top
* ----------------------------------------
*/
@-webkit-keyframes rotate-top {
    0% {
        -webkit-transform: rotate(0);
        transform: rotate(0);
        -webkit-transform-origin: top;
        transform-origin: top;
    }
    100% {
        -webkit-transform: rotate(360deg);
        transform: rotate(360deg);
        -webkit-transform-origin: top;
        transform-origin: top;
    }
}
@keyframes rotate-top {
    0% {
        -webkit-transform: rotate(0);
        transform: rotate(0);
        -webkit-transform-origin: top;
        transform-origin: top;
    }
    100% {
        -webkit-transform: rotate(360deg);
        transform: rotate(360deg);
        -webkit-transform-origin: top;
        transform-origin: top;
    }
}

/**
* ----------------------------------------
* animation rotate-center
* ----------------------------------------
*/
@-webkit-keyframes rotate-center {
    0% {
        -webkit-transform: rotate(0);
        transform: rotate(0);
    }
    100% {
        -webkit-transform: rotate(360deg);
        transform: rotate(360deg);
    }
}
@keyframes rotate-center {
    0% {
        -webkit-transform: rotate(0);
        transform: rotate(0);
    }
    100% {
        -webkit-transform: rotate(360deg);
        transform: rotate(360deg);
    }
}

/**
* ----------------------------------------
* animation scale-down-center
* ----------------------------------------
*/
@-webkit-keyframes scale-down-center {
    0% {
        -webkit-transform: scale(1);
        transform: scale(1);
    }
    100% {
        -webkit-transform: scale(0.5);
        transform: scale(0.5);
    }
}
@keyframes scale-down-center {
    0% {
        -webkit-transform: scale(1);
        transform: scale(1);
    }
    100% {
        -webkit-transform: scale(0.5);
        transform: scale(0.5);
    }
}

/**
* ----------------------------------------
* animation slide-top
* ----------------------------------------
*/
@-webkit-keyframes slide-top {
    0% {
        -webkit-transform: translateY(0);
        transform: translateY(0);
    }
    100% {
        -webkit-transform: translateY(-100px);
        transform: translateY(-100px);
    }
}
@keyframes slide-top {
    0% {
        -webkit-transform: translateY(0);
        transform: translateY(0);
    }
    100% {
        -webkit-transform: translateY(-100px);
        transform: translateY(-100px);
    }
}

/**
* ----------------------------------------
* animation rotate-scale-up-hor
* ----------------------------------------
*/
@-webkit-keyframes rotate-scale-up-hor {
    0% {
        -webkit-transform: scale(1) rotateX(0);
        transform: scale(1) rotateX(0);
    }
    50% {
        -webkit-transform: scale(2) rotateX(-180deg);
        transform: scale(2) rotateX(-180deg);
    }
    100% {
        -webkit-transform: scale(1) rotateX(-360deg);
        transform: scale(1) rotateX(-360deg);
    }
}
@keyframes rotate-scale-up-hor {
    0% {
        -webkit-transform: scale(1) rotateX(0);
        transform: scale(1) rotateX(0);
    }
    50% {
        -webkit-transform: scale(2) rotateX(-180deg);
        transform: scale(2) rotateX(-180deg);
    }
    100% {
        -webkit-transform: scale(1) rotateX(-360deg);
        transform: scale(1) rotateX(-360deg);
    }
}

/**
 * ----------------------------------------
 * animation puff-in-center
 * ----------------------------------------
 */
 @-webkit-keyframes puff-in-center {
    0% {
      -webkit-transform: scale(2);
              transform: scale(2);
      -webkit-filter: blur(4px);
              filter: blur(4px);
      opacity: 0;
    }
    100% {
      -webkit-transform: scale(1);
              transform: scale(1);
      -webkit-filter: blur(0px);
              filter: blur(0px);
      opacity: 1;
    }
  }
  @keyframes puff-in-center {
    0% {
      -webkit-transform: scale(2);
              transform: scale(2);
      -webkit-filter: blur(4px);
              filter: blur(4px);
      opacity: 0;
    }
    100% {
      -webkit-transform: scale(1);
              transform: scale(1);
      -webkit-filter: blur(0px);
              filter: blur(0px);
      opacity: 1;
    }
  }
  
/**
 * ----------------------------------------
 * animation tracking-in-expand
 * ----------------------------------------
 */
@-webkit-keyframes tracking-in-expand {
    0% {
      letter-spacing: -0.5em;
      opacity: 0;
    }
    40% {
      opacity: 0.6;
    }
    100% {
      opacity: 1;
    }
  }
  @keyframes tracking-in-expand {
    0% {
      letter-spacing: -0.5em;
      opacity: 0;
    }
    40% {
      opacity: 0.6;
    }
    100% {
      opacity: 1;
    }
  }

/**
 * ----------------------------------------
 * animation bounce-in-top
 * ----------------------------------------
 */
@-webkit-keyframes bounce-in-top {
    0% {
      -webkit-transform: translateY(-500px);
              transform: translateY(-500px);
      -webkit-animation-timing-function: ease-in;
              animation-timing-function: ease-in;
      opacity: 0;
    }
    38% {
      -webkit-transform: translateY(0);
              transform: translateY(0);
      -webkit-animation-timing-function: ease-out;
              animation-timing-function: ease-out;
      opacity: 1;
    }
    55% {
      -webkit-transform: translateY(-65px);
              transform: translateY(-65px);
      -webkit-animation-timing-function: ease-in;
              animation-timing-function: ease-in;
    }
    72% {
      -webkit-transform: translateY(0);
              transform: translateY(0);
      -webkit-animation-timing-function: ease-out;
              animation-timing-function: ease-out;
    }
    81% {
      -webkit-transform: translateY(-28px);
              transform: translateY(-28px);
      -webkit-animation-timing-function: ease-in;
              animation-timing-function: ease-in;
    }
    90% {
      -webkit-transform: translateY(0);
              transform: translateY(0);
      -webkit-animation-timing-function: ease-out;
              animation-timing-function: ease-out;
    }
    95% {
      -webkit-transform: translateY(-8px);
              transform: translateY(-8px);
      -webkit-animation-timing-function: ease-in;
              animation-timing-function: ease-in;
    }
    100% {
      -webkit-transform: translateY(0);
              transform: translateY(0);
      -webkit-animation-timing-function: ease-out;
              animation-timing-function: ease-out;
    }
  }
  @keyframes bounce-in-top {
    0% {
      -webkit-transform: translateY(-500px);
              transform: translateY(-500px);
      -webkit-animation-timing-function: ease-in;
              animation-timing-function: ease-in;
      opacity: 0;
    }
    38% {
      -webkit-transform: translateY(0);
              transform: translateY(0);
      -webkit-animation-timing-function: ease-out;
              animation-timing-function: ease-out;
      opacity: 1;
    }
    55% {
      -webkit-transform: translateY(-65px);
              transform: translateY(-65px);
      -webkit-animation-timing-function: ease-in;
              animation-timing-function: ease-in;
    }
    72% {
      -webkit-transform: translateY(0);
              transform: translateY(0);
      -webkit-animation-timing-function: ease-out;
              animation-timing-function: ease-out;
    }
    81% {
      -webkit-transform: translateY(-28px);
              transform: translateY(-28px);
      -webkit-animation-timing-function: ease-in;
              animation-timing-function: ease-in;
    }
    90% {
      -webkit-transform: translateY(0);
              transform: translateY(0);
      -webkit-animation-timing-function: ease-out;
              animation-timing-function: ease-out;
    }
    95% {
      -webkit-transform: translateY(-8px);
              transform: translateY(-8px);
      -webkit-animation-timing-function: ease-in;
              animation-timing-function: ease-in;
    }
    100% {
      -webkit-transform: translateY(0);
              transform: translateY(0);
      -webkit-animation-timing-function: ease-out;
              animation-timing-function: ease-out;
    }
  }

/**
 * ----------------------------------------
 * animation fade-in
 * ----------------------------------------
 */
@-webkit-keyframes fade-in {
    0% {
      opacity: 0;
    }
    100% {
      opacity: 1;
    }
  }
  @keyframes fade-in {
    0% {
      opacity: 0;
    }
    100% {
      opacity: 1;
    }
  }

/**
 * ----------------------------------------
 * animation slide-in-top
 * ----------------------------------------
 */
@-webkit-keyframes slide-in-top {
    0% {
      -webkit-transform: translateY(-1000px);
              transform: translateY(-1000px);
      opacity: 0;
    }
    100% {
      -webkit-transform: translateY(0);
              transform: translateY(0);
      opacity: 1;
    }
  }
  @keyframes slide-in-top {
    0% {
      -webkit-transform: translateY(-1000px);
              transform: translateY(-1000px);
      opacity: 0;
    }
    100% {
      -webkit-transform: translateY(0);
              transform: translateY(0);
      opacity: 1;
    }
  }
  
  
/*---------START COMMON------------------------*/
* {
    backface-visibility: hidden;
}

html, body,
.h1, .h2, .h3, .h4, .h5, .h6, h1, h2, h3, h4, h5, h6  {
    margin: 0;
    padding: 0;
    -webkit-font-smoothing: antialiased;
}

body {
    background-color: var(--white);
    font-style: var(--bs-body-font-family) !important;
}

body a {
    text-decoration: none;
    color: black;
    cursor: pointer;
    font-weight: bold;
}

body p {
    margin: 0;
    padding: 0;
}

body pre {
    font-family: var(--bs-body-font-family);
    font-size: var(--bs-body-font-size);
    overflow: hidden !important;
    white-space: pre-wrap !important;
}

body h4 {
    font-weight: bold;
    background: -webkit-linear-gradient(var(--blue), var(--gradient-gray));
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    font-size: 2rem;
}

button, .button-link {
    padding: 5px;
    border-radius: 5px !important;
    font-weight: bold;
    border: 1px solid var(--black);
    background:-webkit-radial-gradient(ellipse farthest-corner at bottom center, #ffffff 0%, #e0e0e0 80%);
    background:-o-radial-gradient(ellipse farthest-corner at bottom center, #ffffff 0%, #e0e0e0 80%);
    background:-moz-radial-gradient(ellipse farthest-corner at bottom center, #ffffff 0%, #e0e0e0 80%);
    background:radial-gradient(ellipse farthest-corner at bottom center, #ffffff 0%, #e0e0e0 80%);  
    white-space: nowrap;
    overflow: hidden;
}

button:hover, .button-link:hover {
    background:-webkit-radial-gradient(ellipse farthest-corner at bottom center, #ffffff 0%, #ededed 80%);
    background:-o-radial-gradient(ellipse farthest-corner at bottom center, #ffffff 0%, #ededed 80%);
    background:-moz-radial-gradient(ellipse farthest-corner at bottom center, #ffffff 0%, #ededed 80%);
    background:radial-gradient(ellipse farthest-corner at bottom center, #ffffff 0%, #ededed 80%);
}

.bold {
    font-weight: 500;
    font-size: 1rem;
    background: -webkit-linear-gradient(var(--black), var(--dark-violet));
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
}

.ellipsis {
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    display: block;
}

.error {
    color: var(--red);
}

.fake-form {
    display: flex;
    flex-direction: column;
}

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

.font-white {
    color: var(--white);
}

.hidden {
    display: none !important;
}

.italic {
    font-style: oblique;
    font-size: 1rem;
}

.marginleft-5 {
    margin-left: 5px;
}

.marginleft-15 {
    margin-left: 15px;
}

.margintop-2rem {
    margin-top: 2rem;
}

.marginbottom-1rem {
    margin-bottom: 1rem;
}

.normal-button {
    background: radial-gradient(ellipse farthest-corner at bottom center, #ffffff 0%, #e0e0e0 80%);
    color: black !important;
}

.notverified {
    color: #404040;
    text-shadow:0px 2px 15px #212121;
}

.notice {
    font-size: 2rem;
    font-weight: bold;
    text-shadow:0px 5px 10px #d1d1d1;
}

.primary-color-bg {
    background-color: var(--primary) !important;
}

.required {
    color: var(--red);
}

.second-font {
    color: var(--color-font2);
    font-style: italic;
}

.icon-button {
    cursor: pointer;
    font-size: 1rem !important;
    border-radius: 25px;
    padding: 6px;
    background-color: white;
    border: 1px solid black;
    text-align: center;
    width: 80px;
}

.small-font {
    font-size: small;
}

.special-button {
    background: none;
    background-color: var(--primary);
    color: var(--white);
}

.special-button:hover {
    background: none;
    background-color: var(--light-red);
    color: var(--black);
}

.success {
    color: var(--green);
}

.table__border table, .table__border th, .table__border td {
    border: 1px solid black;
    border-collapse: collapse;
}

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

.underline {
    border-bottom: 2px solid var(--black);
}

.verified {
    color: var(--green);
    font-weight: bold;
}

.welcome__note {
    padding: 2.5rem !important;
    text-align: justify;
}

.welcome__note a {
    display: block;
    margin-top: 2rem;
}

.wrapper {
    display: flex;
    flex-direction: column;
    padding-top: 120px;
    height: 100vh;
}

/*---------END COMMON------------------------*/

/*---------START HEADER------------------------*/
#header {
    display: flex;
    height: 100px;
    width: 100%;
    position: fixed;
    z-index: 99;
    /* border-bottom: 1px solid black; */
    padding: 0 8rem;
    background: var(--primary);
    background-image: url("../source/textures/45-degree-fabric-light.png"); 
    /* ff 3.6+ 
    /* background:-moz-linear-gradient(0deg, rgba(255, 255, 255, 1) 0%, rgba(255, 76, 76, 1) 100%); 

    /* safari 5.1+,chrome 10+ 
    background:-webkit-linear-gradient(0deg, rgba(255, 255, 255, 1) 0%, rgba(255, 76, 76, 1) 100%);

    /* opera 11.10+ 
    background:-o-linear-gradient(0deg, rgba(255, 255, 255, 1) 0%, rgba(255, 76, 76, 1) 100%);

    /* ie 6-9 
    filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#FFFFFF', endColorstr='#FF4C4C', GradientType=1 );

    /* ie 10+ 
    background:-ms-linear-gradient(0deg, rgba(255, 255, 255, 1) 0%, rgba(255, 76, 76, 1) 100%);

    /* global 94%+ browsers support 
    background:linear-gradient(0deg, rgba(255, 255, 255, 1) 0%, rgba(255, 76, 76, 1) 100%); */
}

.header__banner {
    position: relative;
    overflow: hidden;
    background-color: var(--black);
    padding-top: 100px;
    border-bottom: 5px solid var(--dark-gray);
    /* background-image: url("../source/img/mbs2.png");
    background-size: contain;
    background-repeat: no-repeat;
    background-position: center; */
}

.header__banner img {
    width: 100%;
    height: 550px;
    aspect-ratio: 1;
}

.header__banner__container {
    position: absolute;
    width: 25%;
    bottom: 40%;
    left: 50%;
    transform: translate(-50%, 0%);
    text-align: center;
}

.header__banner__container h2 {
    color: var(--white);
    font-size: 4rem;
}

.header__banner__container__search {
    position: relative;
    display: flex;
    justify-content: center;
    align-items: center;
    background-color: white;
    -webkit-box-shadow:0px 0px 10px 8px #525252 ;
    -moz-box-shadow:0px 0px 10px 8px #525252 ;
    box-shadow:0px 0px 10px 8px #525252 ;
    border-radius: 10px;
    height: 50px;
}

.header__sticky {
    padding-top: 115px;
    padding-bottom: 15px;
    background-color: var(--white);
    display: none;
    border-bottom: 2px solid var(--dark-gray);
    position: fixed;
    width: 100%;
    z-index: 1;
}

.header__sticky__container {
   display: flex;
   align-items: center;
   justify-content: center;
   width: 80%;
   margin: 0px auto;
}

.header__sticky__container>div {
    height: auto;
    width: 30%;
}

.header__sticky__container p {
    margin-right: 1.5rem;
}

.header__sticky__container input[type="text"] {
    font-size: 1rem !important;
}

.header__banner__container__search:hover .tooltiptext {
    display: block;
}

.header__banner__container__search input  {
    width: 80%;
    padding: 8px;
    border: 0px;
}

.header__banner__container__search input:focus {
    border: 0px;
    outline: none !important;
}

.header__banner__container__search input[type="text"] {
    font-size: 1rem;
    text-align: center;
    font-family: 'Lucida Sans', 'Lucida Sans Regular', 'Lucida Grande', 'Lucida Sans Unicode', Geneva, Verdana, sans-serif;
}

.header__banner__container__search i {
    cursor: pointer;
    overflow: hidden;
    padding: 10px;
}

.header__banner__container__search i:hover {
    text-shadow:2px 0px 10px #ff0000;
}


.tooltiptext-mobile {
    display: none;
}

.tooltiptext {
    display: none;
    background-color: white;
    padding: 10px;
    border-radius: 5px;
    position: absolute;
    top: -10px;
    right: -160px;
    min-height: 100px;
    font-size: 1rem;
}


header {
    display: flex;
    width: 100%;
    align-items: center;
    justify-content: space-between;
}

header h3 {
    margin-right: 1rem;
    font-weight: bold;
}

.header__nav {
    display: flex;
    justify-content: flex-start;
    align-items: center;
}

.header__nav__title, .header__nav__links {
    display: flex;
    align-items: center;
}

.header__nav__links {
    margin-left: 1rem;
}

.header__nav__links div, .header__sign div {
    padding: 1rem 0.7rem;
    text-transform: uppercase;
}

.header__nav__links>div:hover, .header__sign>div:hover {
    border-bottom: 2px solid var(--black);
}

.header__sign {
    display: flex;
    justify-content: flex-end;
    align-items: center;
}

.header__menu_icon {
    display: none;
}

.header__mobile_menu {
    display: none;
    flex-direction: column;
    position: absolute;
    top: 0;
    right: 0;
    width: 100%;
    align-items: center;
    /* background: #FF6A6A; */
    background-image: url("../source/textures/45-degree-fabric-light.png"); 
    background-color: var(--primary);
    border-bottom: 2px solid black; 
    /* -webkit-box-shadow:0px 7px 7px 5px #adadad ;
-moz-box-shadow:0px 7px 7px 5px #adadad ;
box-shadow:0px 7px 7px 5px #adadad ; */
   /* ff 3.6+ */
   /* background:-moz-linear-gradient(0deg, rgba(255, 255, 255, 1) 0%, rgba(255, 76, 76, 1) 100%); 

   /* safari 5.1+,chrome 10+ 
   background:-webkit-linear-gradient(0deg, rgba(255, 255, 255, 1) 0%, rgba(255, 76, 76, 1) 100%);

   /* opera 11.10+ 
   background:-o-linear-gradient(0deg, rgba(255, 255, 255, 1) 0%, rgba(255, 76, 76, 1) 100%);

   /* ie 6-9 
   filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#FFFFFF', endColorstr='#FF4C4C', GradientType=1 );

   /* ie 10+ 
   background:-ms-linear-gradient(0deg, rgba(255, 255, 255, 1) 0%, rgba(255, 76, 76, 1) 100%);

   /* global 94%+ browsers support 
   background:linear-gradient(0deg, rgba(255, 255, 255, 1) 0%, rgba(255, 76, 76, 1) 100%); */
}

.header__mobile_menu a, .header__mobile_menu__links i {
    font-size: 1rem;
    text-transform: uppercase;
}

.header__mobile_menu__links i {
    margin-right: 5px;
}

.header__mobile_menu__title i {
    font-size: 2rem;
    position: absolute;
    top: 15px;
    right: 20px;
}

.header__mobile_menu__links {
    padding: 130px 0 50px 0;
    text-align: center;
}

.header__mobile_menu__links div {
    margin-bottom: 1rem;
}
.header__mobile_menu__title {
    position: absolute;
    top: 0px;
    right: 0px;
    width: 100%;
    background-color: #ffdede;
    height: 100px;
    padding: 1rem 0rem;
    -webkit-box-shadow:0px 0px 7px 5px #8b2323 ;
-moz-box-shadow:0px 0px 7px 5px #8b2323 ;
box-shadow:0px 0px 7px 5px #8b2323 ;
background-image: url("../source/textures/45-degree-fabric-light.png");
    background-color: #f5f2f2;
    text-align: center;
}

.header__mobile_menu button a {
    color: black;
}

/*---------END HEADER------------------------*/


/*---------START CONTENTS------------------------*/
section, footer {
    padding: 2rem 1rem;
    /* border-top: 5px solid rgb(128 128 128 / 75%); */
}

section:first-of-type {
    border-top: 0px !important;
}

section a:hover {
    text-decoration: underline;
}

.button-link:hover {
    text-decoration: none !important;
}

.section__home, .section__home2, .section__profile, .section__event, .section__create_event, .section__search_event, .section__reviews, .section__leave_review, .section__dark,
.section__login, .section__update_user, .section__general, .section__chatroom {
    padding-bottom: 4rem;
    display: flex;
    flex-direction: column;
    align-items: center;
    flex-grow: 1;
}


.section__create_event__container, .section__search_event__container, .section__profile__container, .section__event__container, .section__leave_review__container,
.section__profile__invite, .section__login__container, .section__update_user__container, .section__update_user__updatepw, .section__general__container {
    width: 28%;
    background-color: var(--white);
    border-radius: 10px;
    margin: 0 auto;
    padding: 1rem;
    -webkit-box-shadow:7px 10px 15px 10px #303030 ;
    -moz-box-shadow:7px 10px 15px 10px #303030 ;
    box-shadow:7px 10px 15px 10px #303030 ;
}

.section__search_event__group {
    display: flex;
    width: 100%;
    justify-content: center;
    flex-wrap: wrap;
}

.section__profile__group, .section__update_user__group {
    display: flex;
    justify-content: center;
    flex-wrap: wrap;
    width: 100%;
}

.section__profile__group>div, .section__update_user__group>div {
    margin: 0 1rem;
}

.section__general h4, .section__home h4 {
    text-align: center;
}

.section__legend {
    display: flex;
    justify-content: center;
    align-items: center;
}

.section__legend>* {
    font-size: 1rem;
}

.section__legend span:not(:last-child) {
    margin-right: 5px;
}

.section__legend div {
    width: 12px;
    height: 12px;
    margin-right: 3px;
}

.section__legend i {
    margin-right: 3px;
}

.section__legend .blue__box {
    background: var(--dark-blue);
}

.section__legend .green__box {
    background: var(--green);
}

.section__event__container__joiners {
    margin-top: 1rem;
    padding-top: 1rem;
    border-top: 1px solid black;
}

.contents__container, .reviews__container {
    display: flex;
    justify-content: center;
    align-items: center;
    flex-wrap: wrap;
    padding-top: 2rem;
    width: 80%;
}

.contents__container__event, .reviews__container__review {
    position: relative;
    display: flex;
    flex-direction: column;
    width: 300px;
    height: 300px;
    border-radius: 5px;
    -webkit-box-shadow:0px 0px 12px 0px #4d4d4d ;
    -moz-box-shadow:0px 0px 12px 0px #4d4d4d ;
    box-shadow:0px 0px 12px 0px #4d4d4d ;
    padding: 2rem 1rem 1rem 1rem;
    margin: 2rem;
    transition: .3s cubic-bezier(0,0,.2,1);
    transition-property: width,opacity;
}

.contents__container__event h5 {
    overflow: hidden;
    text-overflow: ellipsis;
    display: -webkit-box;
    -webkit-line-clamp: 2; /* number of lines to show */
    line-clamp: 2; 
    -webkit-box-orient: vertical;
    font-size: 1.5rem;
    font-weight: 300;
    text-align: center;
}

.contents__container__event__details {
    margin: 0px auto;
    width: 100%;
    padding-top: 10px;
}

.contents__container__event__details p {
    color: var(--color-font2);
    font-style: italic;
    margin-bottom: 5px;
}

.contents__container__event p {
    font-size: 1rem;
}

.contents__container__event .button-link {
    position: absolute;
    bottom: 10px;
    left: 50%;
    width: 90%;
    transform: translate(-50%, 0%);
}

.contents__container__event__type {
    position: absolute;
    top: 0px;
    right: 0px;
    height: inherit;
    width: inherit;
    -webkit-clip-path: polygon(100% 0, 90% 0, 100% 10%);
    clip-path: polygon(100% 0, 90% 0, 100% 10%);
}

.contents__container__event__type__weekend {
    background: var(--dark-blue);
}

.contents__container__event__type__ongoing {
    background: var(--green);
}

.reviews__container__stars i {
    color: var(--orange);
}

.reviews__container__stars>* {
    margin-right: 3px;
}

.contents__container__event:hover {
    background-color: var(--light-gray);
    -webkit-box-shadow:0px 0px 5px 1px var(--black);
    -moz-box-shadow:0px 0px 5px 1px var(--black);
    box-shadow:0px 0px 5px 1px var(--black);
}

.contents__container__event_full, .contents__container__event_past {
    /* background:-webkit-radial-gradient(circle farthest-side at center center, #ffffff 0%, #b5b5b5 80%);
    background:-o-radial-gradient(circle farthest-side at center center, #ffffff 0%, #b5b5b5 80%);
    background:-moz-radial-gradient(circle farthest-side at center center, #ffffff 0%, #b5b5b5 80%);
    background:radial-gradient(circle farthest-side at center center, #ffffff 0%, #b5b5b5 80%); */
}

.contents__container__event_ongoing {
    /* background:-webkit-radial-gradient(circle farthest-side at center center, #ffffff 0%, #a6c9a8 80%);
    background:-o-radial-gradient(circle farthest-side at center center, #ffffff 0%, #a6c9a8 80%);
    background:-moz-radial-gradient(circle farthest-side at center center, #ffffff 0%, #a6c9a8 80%);
    background:radial-gradient(circle farthest-side at center center, #ffffff 0%, #a6c9a8 80%); */
}

.contents__container__event_weekend {
    /* background:-webkit-radial-gradient(circle farthest-side at center center, #ffffff 0%, #a3b1c8 80%);
    background:-o-radial-gradient(circle farthest-side at center center, #ffffff 0%, #a3b1c8 80%);
    background:-moz-radial-gradient(circle farthest-side at center center, #ffffff 0%, #a3b1c8 80%);
    background:radial-gradient(circle farthest-side at center center, #ffffff 0%, #a3b1c8 80%); */
}

.contents__container__smaller {
    height: 250px;
}

.contents__container__event__user {
    display: flex;
    align-items: center;
    justify-content: center;
    flex-direction: column;
}

.contents__container__event__user img {
    width: 50px;
    height: 50px;
    border-radius: 25px;
    /* margin-right: 1rem; */
}

.section__event__container .title, .section__profile__container .title {
    font-size: 2rem;
    color: var(--blue);
    font-weight: bold;
    /* background: -webkit-linear-gradient(var(--blue), var(--gradient-gray)); 
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent; */
}

.section__profile__container__username {
    display: flex;
    align-items: center;
}

.section__profile__container__username .icon-button {
    margin-left: 8px;
    color: var(--white);
    background-color: var(--primary);
    font-weight: bold;
    padding: 8px !important;
    width: auto;
}

.section__event__container img, .section__group__members img {
    width: 30px;
    height: 30px;
    border-radius: 15px;
    margin-right: 0.5rem;
}

.section__event__container button, .section__profile__container button, .section__event__container .button-link {
    width: 100%;
    font-size: 1.5rem;
}

.section__profile__container img, .section__update_user__container img {
    width: 100px;
    height: 100px;
    border-radius: 50px;
}

.section__create_event form, .section__search_event form, .section__login form, .section__event__container form, .section__update_user form, .section__leave_review form, 
.section__general form, .section__profile__invite>*, .section__create_event__container__location, .modalbox-content form {
    display: flex;
    flex-direction: column;
}

.section__profile__invite>* {
    width: 100%;
}

.section__profile__invite button, .button-link {
    align-items: center;
    text-align: center;
}

.section__create_event label, .section__search_event label, .section__login label {
    margin-top: 0.5rem;
}

.section__create_event button,
.section__search_event button,
.section__event__container button, .section__profile__container button,
.section__leave_review__container button,
.section__profile__invite button,
.section__login button,
.section__update_user button,
.section__general button,
.button-link,
.modalbox-content button {
    margin-top: 1rem;
}

.section__create_event__passcode>* {
    display: block;
}

.section__group {
    background-color: var(--white);
    padding: 2rem;
    width: 80%;
    margin: 0px auto;
}

.section__group__links {
    display: flex;
    justify-content: flex-start;
    margin: 2rem 0;
}

.section__group__posts>div {
    padding: 10px;
    background-color: var(--white);
    border-radius: 15px;
    -webkit-box-shadow:0px 0px 12px 0px #4d4d4d ;
    -moz-box-shadow:0px 0px 12px 0px #4d4d4d ;
    box-shadow:0px 0px 12px 0px #4d4d4d ;
    margin-bottom: 1rem;
}

/* The Modal (background) */
.modalbox {
    display: none; /* Hidden by default */
    position: fixed; /* Stay in place */
    z-index: 1; /* Sit on top */
    left: 0;
    top: 0;
    width: 100%; /* Full width */
    height: 100%; /* Full height */
    overflow: auto; /* Enable scroll if needed */
    background-color: rgb(0,0,0); /* Fallback color */
    background-color: rgba(0,0,0,0.4); /* Black w/ opacity */
  }
  
  /* Modal Content/Box */
  .modalbox-content {
    background-color: #fefefe;
    margin: 15% auto; /* 60% from the top and centered */
    padding: 20px;
    border: 1px solid #888;
    width: 35%; /* Could be more or less, depending on screen size */
    min-height: 200px;
    border-radius: 10px;
  }
  
  /* The Close Button */
.modalclose {
    color: #aaa;
    float: right;
    font-size: 28px;
    font-weight: bold;
    position: absolute;
    top: 5px;
    right: 10px;
  }
    
  .modalclose:hover,
  .modalclose:focus {
    color: black;
    text-decoration: none;
    cursor: pointer;
  }

.activity {
    padding-top: 2rem;
    min-height: 400px;
  }

.activity i {
    margin-right: 5px;
}

.activity span {
    margin-left: 5px;
    font-style: italic;
    font-size: smaller;
}

.activity .approve, .activity .decline {
    font-size: smaller;
    font-style: italic;
}

.activity .approve {
    color: var(--green);
    margin-left: 5px;
}

.activity .decline {
    color: var(--red);
    margin-left: 3px;
}

.section__chatroom__container {
    display: flex;
    flex-grow: 1;
    width: 100%;
    flex-direction: column;
    align-items: center;
}

.section__chatroom__container__group {
    display: flex;
    width: 100%;
    justify-content: center;
}

.section__chatroom__container__users, .section__chatroom__container__chats {
    border: 1px solid black;
    padding: 5px;
    border-radius: 5px;
}

.section__chatroom__container__users {
    width: 15%;
    border-right: 0px;
}

.section__chatroom__container__chats {
    width: 45%;
}

.section__chatroom__container form {
    width: 100%;
    text-align: center;
}

.section__chatroom__container form input {
    width: 30%;
    margin-top: 1rem;
    border-radius: 5px;
}

.section__chatroom__container__chats__content {
    display: flex;
    flex-direction: column;
    height: 600px;
    overflow-y: auto;
    padding: 5px 10px 5px 5px;
}

.section__chatroom__container__chats__content>div {
    margin-bottom: 15px;
}

.section__chatroom__container__chats__content p {
    float: left;
}

.section__chatroom__container__chats__content .me {
    float: right;
}

.section__chatroom__container__chats__content .me>span {
    background-color: var(--chat-bubble-me);
}

.section__chatroom__container__chats__content span {
    padding: 6px 10px;
    border-radius: 5px;
    background-color: var(--chat-bubble-other);
}

.section__user__groups {
    text-align: center;
}

.section__user__groups__container {
    padding-top: 2rem;
}

.section__user__group__detail {
    border-radius: 10px;
    -webkit-box-shadow:0px 0px 12px 0px #4d4d4d ;
    -moz-box-shadow:0px 0px 12px 0px #4d4d4d ;
    box-shadow:0px 0px 12px 0px #4d4d4d ;
    padding: 2rem;
    margin: 2rem;
    transition: .3s cubic-bezier(0,0,.2,1);
    transition-property: width,opacity;
}

.loader__div {
    display: none;
    position: absolute;
    left: 0;
    right: 0;
    margin-left: auto;
    margin-right: auto;
    height: 300px;
    width: 500px;
    border-radius: 15px;
    z-index: 99;
    text-align: center;
    padding: 50px;
    background-color: var(--white);
    -webkit-box-shadow:0px 0px 29px 12px #454545 ;
-moz-box-shadow:0px 0px 29px 12px #454545 ;
box-shadow:0px 0px 29px 12px #454545 ;
}

.loader__div h3 {
    margin-bottom: 50px;
}

.loader {
    width: 48px;
    height: 48px;
    display: inline-block;
    position: relative;
    border: 4px solid black;
    box-sizing: border-box;
    animation: fill 2s linear infinite alternate;
    color: rgba(255, 61, 0, 0.9);
    border-radius: 0 0 4px 4px;
  }
  .loader::after {
    content: '';  
    box-sizing: border-box;
    position: absolute;
    left: 100%;
    top: 50%;
    transform: translateY(-50%);
    border: 4px solid black;
    width: 20px;
    height: 25px;
    border-radius: 0 4px 4px 0;
  }
  
  @keyframes fill {
    0% {
      box-shadow: 0 0  inset;
    }
    100% {
      box-shadow: 0 -48px inset;
    }
  } 

/*---------END CONTENTS------------------------*/

/*---------START FOOTER------------------------*/
footer {
    text-align: center;
    background-image: url("../source/textures/45-degree-fabric-light.png");
    background-color: var(--bg-color-footer);
}

footer p, footer a {
    color: var(--dark-gray);
    font-weight: normal;
}

footer h5 {
    color: var(--dark-gray);
    font-weight: bold;
}

.footer__container {
    display: flex;
    justify-content: center;
}

.footer__container>div {
    margin: 2rem 2rem;
}
/*---------END FOOTER------------------------*/

/*---------START MEDIA QUERIES------------------------*/
@media screen and (max-width: 1050px) {
    #header {
        padding: 0 1rem;    
    }

    .header__nav__links, .header__sign {
        display: none;
    }
    
    .header__banner__container {
        width: 80%;
        bottom: 25%;
    }

    .header__banner img {
        height: 300px;
        object-fit: cover;
    }

    .header__sticky__container {
        width: 100%;
        font-size: 1rem;
    }

    .header__sticky__container>div {
        width: 60%;
    }

    .header__sticky__container p {
        margin-right: 10px;
    }

    .header__sticky__container input[type="text"] {
        font-size: 0.5rem !important;
    }

    .header__menu_icon {
        display: flex;
        justify-content: flex-end;
        align-items: center;
        font-size: 1.5rem;
    }

    .header__mobile_menu {
        display: flex;
    }

    .header__sticky__container .header__banner__container__search {
        -webkit-box-shadow: 0px 0px 5px 3px #525252;
        -moz-box-shadow: 0px 0px 5px 3px #525252;
        box-shadow: 0px 0px 5px 3px #525252;
    }

    .header__banner__container__search input[type="text"] {
        font-size: 1rem;
    }
    
    .tooltiptext {
        bottom: -180px;
        min-width: none;
        right: 35%;
    }

    .section__create_event__container, .section__search_event__container, .section__login__container, .section__profile__container,
    .section__event__container, .section__general__container {
        width: 90%;
    }

    .section__search_event__group {
        flex-wrap: wrap;
    }

    .section__search_event__container {
        margin-bottom: 2rem;
    }

    .contents__container {
        width: 100%;
    }

    .contents__container__event {
        margin: 1.5rem 1rem;
    }

    .section__profile__group>div, .section__update_user__group>div {
        width: 100%;
        margin: 1rem 0;
    }

    .section__chatroom__container__group {
        display: block;
    }

    .section__chatroom__container__users, .section__chatroom__container__chats {
        width: 90%;
        margin: 0px auto;
        border: 1px solid black;
    }

    .section__chatroom {
        padding-bottom: 2rem !important;
    }

    .section__chatroom__container form input {
        width: 70%;
    }

    .modalbox-content {
        width: 90%;
        margin: 60% auto;
    }

    .loader__div {
        width: 90%;
    }

    .tooltiptext-mobile {
        display: block;
        color: white;
        font-size: smaller;
    }

    .header__banner__container__search:hover .tooltiptext {
        display: none;
    }
}

/*---------END MEDIA QUERIES------------------------*/