/* 
  ##Device = Desktops
  ##Screen = 1281px to higher resolution desktops
*/
@media (min-width: 1281px)
{
    .mobile-only
    {
        display: none;
    }
    
    /* CSS */
    .content-project, .content-group, .content-home, .content-idea, .content-comment, .content-saml-role, .content-user, .content-news
    {
        max-width: 70%;
    }

    .content-idea-list-created, .content-idea-list-voted, .content-comment
    {
        max-width: 70%;
    }
}

/* 
  ##Device = Laptops, Desktops
  ##Screen = B/w 1025px to 1280px
*/
@media (min-width: 1025px) and (max-width: 1280px)
{
    .mobile-only
    {
        display: none;
    }
    
    /* CSS */
    .content-project, .content-group, .content-home, .content-idea, .content-comment, .content-saml-role, .content-news
    {
        max-width: 70%;
    }

    .content-idea-list-created, .content-idea-list-voted
    {
        max-width: 70%;
    }
}

/* 
  ##Device = Tablets, Ipads (portrait)
  ##Screen = B/w 768px to 1024px
*/
@media (min-width: 768px) and (max-width: 1024px)
{
    .mobile-only
    {
        display: none;
    }
  
  /* CSS */
        .nav-item.dropdown.header-item {
        display: flex;
        flex-direction: column;
    }
        .idea-create-button 
    {
        position:fixed;
        top:80vh;
        z-index:999;
    }
       .navbar-toggler-user-icon
    {
        display: inline-block;
        width: 1.5em;
        height: 1.5em;
        vertical-align: middle;
        content: "";
        background: no-repeat center center;
        background-size: 100% 100%;
        background-image: url("../images/avatar.svg");
    }
}

/* 
  ##Device = Tablets, Ipads (landscape)
  ##Screen = B/w 768px to 1024px
*/

@media (min-width: 768px) and (max-width: 1024px) and (orientation: landscape) {
  
  /* CSS */
    .nav-item.dropdown.header-item {
        display: flex;
        flex-direction: column;
    }
    .idea-create-button 
    {
        position:fixed;
        top:80vh;
        z-index:999;
    }
       .navbar-toggler-user-icon
    {
        display: inline-block;
        width: 1.5em;
        height: 1.5em;
        vertical-align: middle;
        content: "";
        background: no-repeat center center;
        background-size: 100% 100%;
        background-image: url("../images/avatar.svg");
    }
/* 
  ##Device = Low Resolution Tablets, Mobiles (Landscape)
  ##Screen = B/w 481px to 767px
*/
}
@media (min-width: 481px) and (max-width: 767px) {

   .project-title 
    {
    width: auto;
    font-family: "Rubik",sans-serif;
    font-weight: bold;
    font-size: 1.5rem;
    text-align: center;
    margin-right: auto;
    margin-left: auto;
    display: block;
    }

    .ideas-sort-section 
    {
    width: fit-content;
    width: -moz-fit-content;
    margin-left: auto;
    margin-right: auto;
    margin-top: 5px;
    font-weight: bold;
    padding: 5px;
    color: var(--main-color);
    display: block;
    float: none;
    text-align: center;
    }

    .header-app-name
    {
    /* margin:auto; */
    text-transform: uppercase;
    word-wrap: break-word;
    font-size: 1em;
    /*! display: none; */
    }
     
    .header-app 
    {
        background-color: var(--main-color);
        padding: 10px;
        display: flex;
        flex-direction: column;
    }
    
    .header-app-logo 
    {
        display: inline-block;
        margin: 10px;
        background: var(--main-color);
        align-self: center;
    }
    
    .idea-create-button 
    {
        position:fixed;
        top:80vh;
        z-index:999;
    }
   
    .container-grid
    {
     grid-template-columns: 1fr;
    }

    .navbar-toggler-user-icon
    {
        display: inline-block;
        width: 1.5em;
        height: 1.5em;
        vertical-align: middle;
        content: "";
        background: no-repeat center center;
        background-size: 100% 100%;
        background-image: url("../images/avatar.svg");
    }
     .nav-item .dropdown .header-item 
    {
        display: flex;
        flex-direction: column;
        background-color: grey;
    }

    .content h4
    {
      text-align:center;
    }
    
    .idea 
    {
    clear: both;
    }
    
    .similar-ideas
    {
    display:block;
    text-align: left;
    }
    .form.form-idea 
    {
    margin: 0px 10px 0px 10px;
    }
    
}

/* 
  ##Device = Most of the Smartphones Mobiles (Portrait)
  ##Screen = B/w 320px to 479px
*/
@media (min-width: 320px) and (max-width: 480px) {

   .project-title 
    {
    width: auto;
    font-family: "Rubik",sans-serif;
    font-weight: bold;
    font-size: 1.5rem;
    text-align: center;
    margin-right: auto;
    margin-left: auto;
    display: block;
    }

     .content h4
    {
      text-align:center;
    }

    .introduction-bloc
    {
    margin: 0 auto 0 auto;
    padding: 1.6em;
    background-color: var(--main-color);
    color: white;
    border-radius: 12px;
    -webkit-border-radius: 12px;
    -moz-border-radius: 12px;
    width: 466px;
    box-shadow: 1px 1px 38px -3px rgba(189,189,189,0.75);
    -webkit-box-shadow: 1px 1px 38px -3px rgba(70, 70, 70, 0.75);
    -moz-box-shadow: 1px 1px 38px -3px rgba(189,189,189,0.75);
    }

    .idea-create-button
    {
    position: fixed;
    top: 170px;
    right: 0vw;
    display: inline;
    /*! text-align: center; */
    background:none;
    padding: 10px;
    background-image: url("../images/new-idea-img.png");
    background-size: 69px;
    height: 70px;
    background-repeat: no-repeat;
    z-index: 9999;
    background-position: right;
    }
    
    .dataTables_wrapper
    {
        overflow-x: auto;
    }
    
    .action-header-navigation
    {
        font-weight: 300;
    }
    
    .action-header-user
    {
        display:block;
    }
    
    .header-user-avatar
    {
        display:none;
    }

    .navbar-toggler-user-icon
    {
        display: inline-block;
        width: 1.5em;
        height: 1.5em;
        vertical-align: middle;
        content: "";
        background: no-repeat center center;
        background-size: 100% 100%;
        background-image: url("../images/avatar.svg");
    }

    .nav-item.dropdown.header-item 
    {
    display: flex;
    flex-direction: column;
    }
    
    .navbar-toggler-user
    {
        order: 2;
    }
    
    .header-app
    {
        order: 1;
        padding: 5px;
    }
    
    .navbar-toggler-navigation
    {
        order: 0
    }
    
    .header-navigation
    {
        order: 3
    }
    
    .header-user
    {
        order: 4
    }
    
    .header-app-name
    {
        display:none;
    }
    
    .content-project, .content-home
    {
        /*! max-width: 84vw; */
    }
    .content 
    {
        margin: 20px auto;
        min-width: 60vw;
        min-height: 46vh;
        /*! max-width: 60vw; */
        font-family: "Rubik", sans-serif;
        font-weight: lighter;
    }
      .content h4
    {
      text-align:center;
    }

    .container-grid 
    {
        display: inline-block;
    }

    .ideas-sort-section 
    {
    width: fit-content;
    width: -moz-fit-content;
    /* margin-left: auto; */
    /* margin-right: auto; */
    margin-top: 5px;
    font-weight: bold;
    padding: 5px;
    color: var(--main-color);
    display: inline;
    float: right;
    text-align: center;
    }

    .similar-ideas 
    {
    display: block;
    text-align: left;
    }
    
    .idea-search-disclaimer
    {
    text-align: center;
    }
    .form.form-idea 
    {
    margin: 0px 10px 0px 10px;
    }

}