* {
    font-family: 'Montserrat', sans-serif !important;
    font-weight: 500 !important;
}

body {
    background: #FFFFFF !important;
}

.nav {
    padding: 10px 0 10px 0 !important;
    background-color:white !important;
    box-shadow: 0px 0px 4px 0px rgb(185, 185, 185) !important;
    position: fixed !important;
    top: 0 !important;
    width: 100% !important;
    
}


.custombutton {
    background-color: #38E1FF !important;
    color: white !important;
    font-family: 'Montserrat', sans-serif !important;
    font-weight: 600 !important;
    margin: 0px !important;
    border-radius: 0px !important;
    
}

.loadmore {
    text-align: center;
}

.loadmorebutton {
    background-color: #38E1FF !important;
    color: white !important;
    font-family: 'Montserrat', sans-serif !important;
    font-weight: 600 !important;
    border-radius: 30px !important;
    padding: 10px 10px 10px 10px !important;
    border: none;
    margin: 30px auto 50px auto;
}

.item {
    background-color: white !important;
    color: #222222 !important;
    border-left: 0px !important;
    font-family: 'Montserrat', sans-serif !important;
    font-weight: 600 !important;
}

.tslogo {
    font-family: 'Montserrat', sans-serif !important;
    font-weight: 900 !important;
    color: #FF385C !important;
}


.mb-7 {
    margin-bottom: 7px !important;
}

.mb-15 {
    margin-bottom: 15px !important;
}

.mt-5 {
    margin-top: 5px !important;
}


.mymodal {
    height: 300px !important;
    top: 200px !important;
    font-size: 20px !important;
}

.mb-5 {
    margin-bottom: 5px !important;
}

.w-big {
    width: 200px !important;
}

.bwhite-lg {
    background-color: transparent !important;
}

.bwhite-sm {
    background-color: transparent !important;
    width: 10px !important;
}

.comment-box {
    color: #222222 !important;

}

.username {
    display: inline;
}

.verified {
    height: 20px !important;
}

.rope {
    border: 1px solid black;
    display: inline;
    border-radius: 30px;
    color: black;
    font-size: 12px;
    padding: 3px 7px 3px 7px;
    margin-left: 10px !important;

    
}
.speed {
    border: 1px solid black;
    display: inline;
    border-radius: 30px;
    color: black;
    font-size: 12px;
    padding: 3px 7px 3px 7px;
}


  
  .progressbar {
    margin-top: 10px;
    color: #00A296;
    width: 100%;
    height: 15px;
    background: #f0f2fc;

  }

  progress {
    color: #38E1FF;
    background: lightgray;
    vertical-align: none;
  }
  
  progress::-webkit-progress-value {
    background: #38E1FF;
  }
  
  progress::-moz-progress-bar {
    background: #38E1FF;
  }
  
  progress::-webkit-progress-value {
    background: #38E1FF;
  }
  
  progress::-webkit-progress-bar {
    background: lightgray;
  }

  .ui.grid {
      padding: 0px !important;     
  }

  .ui.grid>.column:not(.row) {
    padding: 0px !important;
}


.sixteen.wide.column {
    padding: 0px !important;
    margin: 97px 0px 0px 0px !important;
}

.ui.card {
    margin-top: 0px !important;
    margin-bottom: 25px !important;
}


.profilebutton {
    padding: 0px !important;
}

.home-button {
    display: flex;
    -ms-flex-align: center;
    align-items: center;
    margin: 0px 20px 0px 20px;
}

.home-icon {
    width: 22px;
    margin-top: 5px;
}

.close-icon {
    margin-left: 20px;
    max-width: 14px;
    max-height: 25px;
}

.create-button {
    display: flex;
    -ms-flex-align: center;
    align-items: center;
    
}

#sendreply {
    background-color: black !important;
}

#unfollow-button {
    background-color: transparent !important;
    color: black !important;
    border: 1px solid black !important;
}

.create-icon {
    width: 25px;
    margin-top: 5px;
}

.comment-icon {
    width: 15px;
    margin-right: 10px;
    padding-bottom: 8px;
}

.timeago {
    font-size: 10px;
    padding-top: 1px;
}

.ui.fluid.form {
    display: flex;
}

.ui.fluid.card {
    box-shadow: none !important;
    border: none !important;
}

.menudots {
    width: 20px !important;
    height: 20px !important;
    max-width: 20px !important;
}

#menudots {
    width: 20px !important;
    height: 20px !important;
    max-width: 20px !important;
}

.tips {
    padding-bottom: 8px;
    color: darkslategray;
    display: flex;
    align-items: center;
}

.text-wrapper {
    display: flex;
    justify-content: space-between;
    flex-grow: 1;
}

.customlogin {
    margin-top: 80px !important;
}

.sixteen.wide.column.customsignup {
    margin: 0px 20px 0px 20px !important; 
}

.allskiers {
    margin-top: 100px !important;
}

#file-upload-button {
    padding: 30px !important;
}

.content-wrapper {
        display: flex !important;
        padding: 17px 15px 15px 15px !important;
}

.post.content {
    width: 90%;
}

.post-date {
    position: absolute;
    left: 0;
    bottom: 0;
    padding-left: 5px
    padding-bottom: 5px;
}

#trash-comment-icon {
    position: absolute;
    bottom: 0;
    right: 0;
    margin-bottom: 70px;
    margin-right: 35px;
    height: 18px;
}

#trash-reply-icon {
    position: absolute;
    bottom: 0;
    right: 0;
    margin-bottom: 20px;
    margin-right: 20px;
    height: 18px;
}

#reply{
    margin-left: 30px;
}

.reply-count {
    margin-top: 10px;
    color: gray;
}

.homecontainer {
    height: 100px;
    padding-top: 100px;
}

/* Centered text */
.hometext {
    position: absolute;
    top: 130px;
    left: 40%;
    transform: translate(-50%, -50%);
    font-size: 20px;
    color: black;
    padding: 20px 0px 20px 0px; 
  }

  a {
      color: #38E1FF !important;
  }

  .thomasmargin {
      margin-top: 100px !important;
  }

  #like-count {
    text-align: center;
  }
  
  .like-container {
    display: inline-block;
  }
  
  .like-icon {
    width: 25px;
    display: block;
  }
  

  .rate-wrapper {
    display: inline-block;
    float: right;
  }

  .rate-count {
    display: inline-block;
  }

  .rate-icons {
    width: 20px !important;
    max-width: 20px !important;
}

/* PROFILE */ 
/* Profile Section */

.profile {
    padding: 5rem 0;
    padding-top: 5px !important;
    
}

#full-name {
    margin-top: -25px;
    font-size: 16px !important;
}

#verified-message {
    font-weight: 600 !important;
    font-size: 10px !important;
}

.profile::after {
    content: "";
    display: block;
    clear: both;
}

#profile-pic {
    max-width: 100px;
    max-height: 100px;
}

.ui.small.circular.image {
    max-width: 40px !important;
    max-height: 40px !important;
    border-radius: 50%;
    object-fit: cover;
}

.profile-image {
    float: left;
    width: calc(33.333% - 1rem);
    display: flex;
    justify-content: center;
    align-items: center;
    margin-right: 3rem;

}

.profile-image img {
    width: 100px; /* Set your desired width */
    height: 100px; /* Set your desired height (equal to the width) */
    border-radius: 50%;
    object-fit: cover;
}

.profile-user-settings,
.profile-stats,
.profile-bio {
    float: left;
    width: calc(66.666% - 2rem);
}

.profile-user-settings {
    margin-top: 1.1rem;
}

.profile-user-name {
    display: inline-block;
    font-size: 16px !important;
    font-weight: 700 !important;
}

.profile-edit-btn {
    font-size: 1.4rem;
    line-height: 1.8;
    border: 0.1rem solid #dbdbdb;
    border-radius: 0.3rem;
    padding: 0 2.4rem;
    margin-left: 2rem;
}

.profile-settings-btn {
    font-size: 2rem;
    margin-left: 1rem;
}

.profile-stats {
    margin-top: 2.3rem;
}

.profile-stats li {
    display: inline-block;
    font-size: 1.6rem;
    line-height: 1.5;
    margin-right: 4rem;
    cursor: pointer;
}

.profile-stats li:last-of-type {
    margin-right: 0;
}

.profile-bio {
    font-size: 1.6rem;
    font-weight: 400;
    line-height: 1.5;
    margin-top: 2.3rem;
}

.profile-real-name,
.profile-stat-count,
.profile-edit-btn {
    font-weight: 600;
}

#postssixteen {
    margin-top: 30px !important;
}

#id_speed {
    margin-bottom: 15px !important;
}

#id_rope {
    margin-bottom: 15px !important;
}

#id_content {
    margin-bottom: 15px !important;
}

#id_video {
    margin-bottom: 15px !important;
}


/* spinner */
#loading-bar-spinner.spinner {
    left: 50%;
    margin-left: -20px;
    top: 30%;
    margin-top: -20px;
    position: absolute;
    z-index: 19 !important;
    animation: loading-bar-spinner 500ms linear infinite;
}

#loading-bar-spinner.spinner .spinner-icon {
    width: 40px;
    height: 40px;
    border:  solid 4px transparent;
    border-top-color:  #FF385C !important;
    border-left-color: #FF385C !important;
    border-radius: 50%;
}

@keyframes loading-bar-spinner {
  0%   { transform: rotate(0deg);   transform: rotate(0deg); }
  100% { transform: rotate(360deg); transform: rotate(360deg); }
}




/* Media Query */

@media screen and (max-width: 40rem) {
    .profile {
        display: flex;
        flex-wrap: wrap;
        padding: 4rem 0;
        padding-bottom: 20px;
    }

    .profile::after {
        display: none;
    }

    .profile-image,
    .profile-user-settings,
    .profile-bio,
    .profile-stats {
        float: none;
        width: auto;
    }

    .profile-image img {
        width: 7.7rem;
    }

    .profile-user-settings {
        flex-basis: calc(100% - 10.7rem);
        display: flex;
        flex-wrap: wrap;
        margin-top: 1rem;
    }

    .profile-user-name {
        font-size: 2.2rem;
    }

    #profile-user-name {
        font-size: 2.2rem;
    }

    .profile-edit-btn {
        order: 1;
        padding: 0;
        text-align: center;
        margin-top: 1rem;
    }

    .profile-edit-btn {
        margin-left: 0;
    }

    .profile-bio {
        font-size: 1.4rem;
        margin-top: 1.5rem;
    }

    .profile-edit-btn,
    .profile-bio,
    .profile-stats {
        flex-basis: 100%;
    }

    .profile-stats {
        order: 1;
        margin-top: 1.5rem;
    }

    .profile-stats ul {
        display: flex;
        text-align: center;
        padding: 1.2rem 0;
        border-top: 0.1rem solid #dadada;
        border-bottom: 0.1rem solid #dadada;
    }

    .profile-stats li {
        font-size: 1.4rem;
        flex: 1;
        margin: 0;
    }

    .profile-stat-count {
        display: block;
    }
}

/* Spinner Animation */

@keyframes loader {
    to {
        transform: rotate(360deg);
    }
}

/*

The following code will only run if your browser supports CSS grid.

Remove or comment-out the code block below to see how the browser will fall-back to flexbox & floated styling. 

*/

@supports (display: grid) {
    .profile {
        display: grid;
        grid-template-columns: 1fr 2fr;
        grid-template-rows: repeat(3, auto);
        grid-column-gap: 3rem;
        align-items: center;
    }

    .profile-image {
        grid-row: 1 / -1;
    }

    .settings-icon {
        max-width: 25px;
    }

    .bio {
        padding-left: 20px;
    }

    .gallery {
        display: grid;
        grid-template-columns: repeat(auto-fit, minmax(22rem, 1fr));
        grid-gap: 2rem;
    }

    .profile-image,
    .profile-user-settings,
    .profile-stats,
    .profile-bio,
    .gallery-item,
    .gallery {
        width: auto;
        margin: 0;
    }

    @media (max-width: 40rem) {
        .profile {
            grid-template-columns: auto 1fr;
            grid-row-gap: 1.5rem;
        }

        .profile-image {
            grid-row: 1 / 2;
            padding-left: 20px;
            
        }

        .profile-user-settings {
            display: grid;
            grid-template-columns: auto 1fr;
            grid-gap: 1rem;
        }

        .gear {
            padding-left: 20px;
            margin: 0px;
            font-weight: bold !important;
            font-size: 15px !important;
        }

        .postsby {
            padding-left: 20px;
            margin: 30px 0px 0px 0px;
            font-weight: bold !important;
            font-size: 15px !important;
        }

        .profile-edit-btn,
        .profile-stats,
        .profile-bio {
            grid-column: 1 / -1;
        }

        .profile-user-settings,
        .profile-edit-btn,
        .profile-settings-btn,
        .profile-bio,
        .profile-stats {
            margin: 0;
        }

        #follow-button {
            margin: 20px !important;
        }

        #unfollow-button {
            margin: 20px !important;
            background-color: transparent !important;
            color: black !important;
            border: 1px solid black !important;
        }
    }
}