/* 
 *   topconseil.css holds the default CSS and template for TopConseil
 */

/* 
 *   Global
 */
 body
 {
    font-family: "Roboto", serif;
 }

 h1
 {
    font-size:35px!important;
    text-decoration:dashed!important;
    border:1px solid #a9a9a9;
    text-align:center;
    background-color:#EAF0F6;
 }

 .clear { clear: both; height: 80px; }

 /* 
 *   Header specifics
 */

 #tc-nav
 {
    background-color:#D6A3D0;
 }

 .tc-btn-outline-header
 {
    background-color:#665964;
    color:white;
    border:2px solid black;
    border-radius:20px;
    transition: all 0.2s;
    position:sticky;

 }

 .tc-btn-outline-header:hover
 {
    background-color:transparent;
    color:black;
 }

  /* 
 *   Footer specifics
 */

 #tc-footer
 {
    background-color:#782B6F;
    color:red;
 }

 #tc-footer div,  #tc-footer div a
 {
    color:white;
 }

 #tc-footer div a:hover
 {
    transition: all 0.2s;
    color:#C488EA;
 }

/* 
 *   Dashboard specifics
 */

 .tc-dashboard-h2-title
 {
    font-size:23px!important;
    text-decoration:dashed!important;
    border:1px solid #a9a9a9;
    text-align:center;
    background-color:#EAF0F6; 
 }

 .tc-btn-badge
 {
    background-color:#782B6F;
    color:white;
    border:2px solid black;
    border-radius:20px;
    transition: all 0.2s;
    font-size:13px;
    padding:5px 10px;

 }

 .tc-btn-outline-square
 {
    background-color:#665964;
    color:white;
    border:2px solid black;
    transition: all 0.2s;
    padding:5px 10px;
    -webkit-border-top-left-radius: 20px;
    -webkit-border-top-right-radius: 20px;
    -moz-border-radius-topleft: 20px;
    -moz-border-radius-topright: 20px;
    border-top-left-radius: 20px;
    border-top-right-radius: 20px;
    text-decoration:none;
    display:block;
    width:100px;
    text-align:center;
    transition: all 0.2s;
 }

 .tc-btn-outline-square:hover
 {
    background-color:transparent;
    color:black;
 }

 .tc-btn-outline-radius-right
 {
    background-color:#665964;
    color:white;
    border:2px solid black;
    transition: all 0.2s;
    padding:5px 10px;
    -webkit-border-top-right-radius: 25px;
    -webkit-border-bottom-right-radius: 25px;
    -moz-border-radius-topright: 25px;
    -moz-border-radius-bottomright: 25px;
    border-top-right-radius: 25px;
    border-bottom-right-radius: 25px;
    text-decoration:none;
    display:block;
    text-align:center;
    transition: all 0.2s;
 }

 .tc-btn-outline-radius-right:hover
 {
    background-color:transparent;
    color:black;
 }

 .tc-btn-toggled-square-on
 {
    background-color:#DC3545;
    color:white;
 }

 .tc-btn-toggled-square-on:hover
 {
    background-color:#DC3545;
    color:white;
 }

 .tc-btn-outline
 {
    background-color:#665964;
    color:white;
    border:2px solid black;
    border-radius:20px;
    transition: all 0.2s;
    padding:5px 10px;

 }

 .tc-btn-outline:hover
 {
    background-color:transparent;
    color:black;
 }

 .tc-btn-outline-red
 {
    background-color:#DC3545;
    color:white;
    border:2px solid black;
    border-radius:20px;
    transition: all 0.2s;
    padding:5px 10px;

 }

 .tc-btn-outline-red:hover
 {
    background-color:transparent;
    color:black;
 }

 .tc-btn-toggled-on
 {
    background-color:#DC3545;
 }


 .tc-btn-outline-big
 {
    background-color:#665964;
    color:white;
    border:2px solid black;
    border-radius:20px;
    transition: all 0.2s;
    font-size:16px;
    padding:10px 15px;
    width:90%;
 }

 .tc-btn-outline-big-disabled
 {
    background-color:rgb(136, 136, 136);
    color:white;
    border:2px solid black;
    border-radius:20px;
    transition: all 0.2s;
    font-size:16px;
    padding:10px 15px;
    width:90%;
    pointer-events: none;
 }

 .tc-btn-outline-big:hover, .tc-btn-outline-big a:hover
 {
    background-color:transparent;
    color:black;
 }

.tc-modal-header
{
    margin-bottom: 0;
    background-color:#EAF0F6;
    padding:20px 20px;
}

 

 .btnForgot button
 {
background-color:#0d6efd;
 }

 .btnForgot button:hover
 {
background-color:#0d6efd;
 }

 .btnGeneral button
 {
background-color:#0d6efd;
 }

 .btnGeneral button:hover
 {
background-color:#0d6efd;
 }

.sortSelector
{
    text-decoration:none;
    font-size:1.3rem;
    padding:0 10px;
}

.card
{
    border:none!important;
}

 iframe {
    display: block;
    margin: 0 auto;
 }

 .btn-toolbar
 {
    padding:20px;
 }

.btn
 {
    margin:0 3px;
 }

 .videoVimeo
 {

    height:500px;
    width:100%;
 }

 .iconeBouton
 {
    padding-right:8px;
 }

 .tc-btn-outline-link-inside
 {
    color:white;
    text-decoration:none;
 }

 .tc-btn-outline-link-inside:hover
 {
    color:black;
 }
 #tc-nav
 {
   position: sticky;
   top: 0;
   z-index:1;
 }
/* Réajustement du menu */
 @media screen and (max-width: 992px) {
    .navbar-nav
    {
       font-size:1.3rem;
    }
    .navbar-collapse
    {
       padding-left:30px;
    }
 
}

#tc-logo a img
{
   height:65px;
   width:140px;
}

.pagination
{
   position:relative;
   z-index:0;
}

.input-group .btn
{
   z-index:0!important;
}

/* Advices and Followup List BEGIN */
#listMode div ul.list-group li
{
 border-left:1px solid #d1d1d1;
 border-right:1px solid #d1d1d1;
}

#listMode div ul.list-group li:nth-child(even)
{
    background-color:#fbfbfb;
}

#listMode div ul.list-group li:first-child
{
    border-top:1px solid #d1d1d1;
}


#listMode div ul.list-group li:last-child
{
    border-bottom:1px solid #d1d1d1;
}

#listMode div ul.list-group li:hover
{
    background-color:#EDF4FE;
}

/* Advices and followup END */


.activeButton
{
    background-color:#696969!important;
    border:1px solid #696969!important;
    color:white!important;
}




/* Styles related to the pagination bar BEGIN */
#advicesPagination
{
    display:block;
    width:100%;
}



.active>.page-link, .page-link.active
{
    background-color:#696969!important;
    border:1px solid #696969!important;
}


.page-link:hover
{
    background-color:#dddddd!important;
    color:#F4F4F4!important;
}


/* Styles related to the pagination bar END */

textarea {
  resize: none;
}

.header {
    background-color: #cccccc;
    border: 1px solid black;
}

.topconseil-logo {
    text-align: left;
    padding-left: 10px;
}

.topconseil-profile {
    text-align: right;
    padding-right: 10px;
}

.footer {
    text-align: right;
    background-color: #cccccc;
    border: 1px solid black;
    bottom:0px; 
    position:fixed;
    left:0px; 
    right:0px; 
    overflow:hidden;
    z-index:111;
}


.main-card {
    margin-top: 10px;
    border: 1px solid black;

}

.advice-row {
    font-size: smaller;
}

@media (min-width: 768px) {
    .modal-xl {
        width: 90%;
        max-width:1200px;
    }
}

.video {
    position: relative;
    left: 50%;
    transform: translateX(-50%);
    opacity: 1;
    width: 500px;
    border: 1px solid #fff;
    overflow: hidden;
}

.roundCorner {
    border-radius: 2px;
    overflow: hidden;
    position: relative;
}

.forgot-password
{
    color:white;
    text-decoration:none;
}

/* Réajustement en mode mobile */
/* Réajustement du menu */
@media screen and (max-width: 992px) {
    #followupList > tbody > tr.bg-white.border-b > th
    {
        font-size:1.2rem!important;
    }
    #followupList > tbody > tr.bg-white.border-b > td
    {
        font-size:1.2rem!important;
    }
    button
    {
        font-size:1.2rem!important;
    }
    #adviceButton, #followupButton
    {
        font-size:1.2rem!important;
        width:140px;
    }
    ul li .page-link
    {
        font-size:1.5rem;
        padding:15px;
    }
    .container
    {
        max-width:100%!important;
    }
    .navbar-nav
    {
       font-size:1.2rem;
    }
    .navbar-collapse
    {
       padding-left:30px;
    }
    .input-group .btn
    {
        margin: 2px 0;
        padding:10px;
    }

    #searchAdvice
    {
        font-size: 1.5rem;
    }

    label
    {
        font-size:1.2rem;
    }

    .btn .btn-secondary
    {
        font-size:1.5rem;
    }
}

 @media screen and (max-height: 750px) {
    .videoVimeo
    {
       max-width:100%;
       height:500px;
    }
}

@media screen and (max-height: 450px) {
    .videoVimeo
    {
       height:300px;
    }
}

@media screen and (max-height: 750px) {
    .container
    {
    margin-bottom:100px;
    }
}

.shareAdviceSMS
{
   position:relative;
   top:-7px;
}

.iti
{
   top:-7px;
}

@media screen and (max-width: 514px) {
   .checkBoxFixMobile
   {
      position:relative;
      top:-6px;
   }
}