/*-------------------------------------------------------------------------------*/

.boxShadow {
    border: 1px solid;
    /*padding: 0px;*/
    box-shadow: 5px 5px 18px 5px #888888;
}

.cLogoLabel {
    display: block;
    font-size: x-large;
    color: rgb(32 1 1);
    margin-top: -15px;
}

.cToggelPassword {
    display: inline;
    float: right;
    margin-top: -45px;
    font-size: 20px;
    padding-right: 10px;
    color: #999;
}

.cSysBar{
    text-align: right;
    font-size: x-large;
    margin-left: -10px;
    margin-right: -10px;
    margin-top: -10px;
    color: white;
    text-shadow: -1px 0 black, 0 1px black, 1px 0 black, 0 -1px black;
    background: linear-gradient(90deg, rgba(186,186,186,1) 0%, rgb(100 100 100) 48%, rgba(176,177,179,1) 100%);

}


/*------------------------------------------------------------------------*/

/*
.Commun {
    width: calc(100% + 30px);
    height: 100%;
    margin-left: -15px;
    overflow: hidden;
    border-style: solid;
    border-color: black;
    border-width: 1px;
}
.child {
    width: calc(var(--parentWidth) / 7)!important;
    height: 95%!important;
    padding: 6px 0px;
}

.cFooterParent {
    height: calc(100% - 100px)!important;
    --parentWidth: 100%!important;
    width: var(--parentWidth)!important;
}
*/

.cFooterParentMaster {
    /*height: 60px!important;*/
    --parentWidth: 100%!important;
    width: var(--parentWidth)!important;
}




/*--------------------------------------------------------------------------------*/

.cDivHeader {
    overflow: hidden;
    text-align: center;
    margin-top: -18px;
}

.cSpanHeader {
    display: inline-block;
    margin: 5px 5px;
}

.cLabelCaserne {
    margin-left: -18px;
    font-size: x-large;
}

.cLogOff {
    display: block;
    font-family: Arial, Helvetica, sans-serif;
    font-size: 13px;
    color: #007;
    border-top: #FFF 2px dotted;
    padding-top: 5px;
    margin-top: -10px;
    width: 100%;
    text-shadow: none;
}

.cLogOff:hover {
    color: rgb(18, 63, 209);
    cursor: pointer;
}


/*--------------------------------------------------------------------------------*/

/*
.cVertiCalAlign {
    margin: 0;
    -ms-transform: translateY(-50%);
    transform: translateY(-50%);
    margin-top: 50px;
    display: inline-block;
    margin-left: 35%;
}

.cHdrr {
    display: none;
    background-color: #b7b0b0;
    height: 2px;
    font-size: 20px;
    overflow: hidden;
    text-align: center;
    border-bottom-style: solid;
    border-bottom-color: #080808;
    border-bottom-width: 1px;
    font-weight: 900;
    transition: height 1s;
}

.cDescContainer {
    display: inline-block;
    margin: 0 auto;
    padding: 3px;
    width: 300px;
    margin-top: 25px;
}

.cDescCAS {
   
    color: #8d2020;
}

.cDescMAT {
    font-size: 14px;
    font-weight: 700;
}

.cHeader {
    background-color: #CCC;
    height: 100px;
    width:inherit;
    overflow: hidden;
  
}

.cHeaderCasDesc {
    font-size: 2.3vw;
    font-weight: 700;
    text-decoration: none;
    margin-left: -10px;
    z-index: 1;
}

.cHeaderMatDesc {
    font-size: 16px;
    margin-top: -10px;
    margin-left: 10px;
}

.cLinkWebsite {
    display: inline;
    float: right;
  
    font-size: 2vw;
    font-weight: 700;
    text-decoration: none;
    transform: translateY(-50%);
  
}

.cDescMargin {
    margin-top: 40px;
    --width: 50%!important;
    margin-left: calc(50% - var(--width) / 2);
}

.cHeaderImage {
    height: 90px;
    width: 90px;
}
*/


/*-------------------------  COULEURS DES GROUPES  Station Laurier   CSS ---------------------------------------------*/

.bkGray {
    position: relative;
    /*border-top: #009 thin dashed;*/
    padding-bottom: 0px;
    border-bottom: #009 thin dashed;
}

.bkGray:after {
    position: absolute;
    top: 0px;
    border-top: 80px solid rgb(90 87 87);
    border-right: 70px solid transparent;
    margin-left: -40px;
}

.bkGreen {
    position: relative;
    /*border-top: #009 thin dashed;*/
    padding-bottom: 0px;
    border-bottom: #009 thin dashed;
}

.bkGreen:after {
    position: absolute;
    top: 0px;
    border-top: 80px solid Green;
    border-right: 70px solid transparent;
    margin-left: -40px;
}

.bkBleu {
    position: relative;
    /*border-top: #009 thin dashed;*/
    padding-bottom: 0px;
    border-bottom: #009 thin dashed;
}

.bkBleu:after {
    position: absolute;
    top: 0px;
    border-top: 80px solid Blue;
    border-right: 70px solid transparent;
    margin-left: -40px;
}

.bkYellow {
    position: relative;
    /*border-top: #009 thin dashed;*/
    padding-bottom: 0px;
    border-bottom: #009 thin dashed;
   
}

.bkYellow:after {
    position: absolute;
    top: 0px;
    border-top: 80px solid Yellow;
    border-right: 70px solid transparent;
    margin-left: -40px;
}

.bkRed {
    position: relative;
    /*border-top: #009 thin dashed;*/
    padding-bottom: 0px;
    border-bottom: #009 thin dashed;
}

.bkRed:after {
    position: absolute;
    top: 0px;
    border-top: 80px solid Red;
    border-right: 70px solid transparent;
    margin-left: -40px;
}

.bkDEF {
    position: relative;
    
    border-bottom: #009 thin dashed;
    padding-top: 20px;
    padding-bottom: 0px;
}

.bkDEF:after {
    position: absolute;
    top: 0px;
    /*border-top: 80px solid Red;
    border-right: 70px solid transparent;*/
    margin-left: -40px;
}

/*
.bkSetting {
    position: relative;
    border-top: #009 thin dashed;
    padding-bottom: 0px;
}

.bkSetting:after {
    position: absolute;
    top: 0px;
    border-top: 80px solid rgb(7, 7, 7);
    border-right: 70px solid transparent;
    margin-left: -40px;
}*/



/*---------------------------------------------  nouvelle approche casernes communes  -------------*/
.left{
    display : flex;
    background-color:#fdf5f3;
    height : 100vh;
  
  }
  .right{
    display : flex;
    background-color:rgb(190, 190, 190);
    height : 100vh;
  }

.cGroupContent{
    height:100%;
    overflow-y: auto;
    overflow-x: hidden;
  }
  
 
  
  #pnlHeader{
    background: linear-gradient(90deg, rgb(241 240 240) 0%, rgb(179 174 174) 48%, rgb(202 204 207) 100%);
      color: rgb(5, 5, 5);
      font-size: 35px;
      height:100px;
      text-align: center;
      width: inherit;
      
  }
  
  #pnlContent{
      width:100%; 
      padding-top:20px 20px 60px 20px; 
      overflow-x: hidden;
  }
  
  #stateBar{
      position:absolute!important; 
      background-color: rgb(225 225 225);
      height:50px; 
      text-align:center;
      
  }
  
  #HeaderSSI{
      position:absolute!important;
      /*background-color:rgb(104, 104, 104);*/
      background: linear-gradient(90deg, rgba(186,186,186,1) 0%, rgb(100 100 100) 48%, rgba(176,177,179,1) 100%);
    
      color:white;
      height:8vh; 
      text-align: center;
  }

  #stateSSI{
      position:absolute!important;
      background-color: rgb(225 225 225);
      
      height:7vh; 
      text-align:center;
      padding-top: 1px;
      padding-bottom: 5px;
  }
  .cDescSSI{
    font-size: x-large;
    transform: translateY(50%);
    font-weight: 700;
    color: white;
    text-shadow: -1px 0 black, 0 1px black, 1px 0 black, 0 -1px black;
    margin-top: 15px;
    user-select: none;
    -webkit-user-select: none;
}
  
  
  #dvCommon{
      border-left:1px solid rgb(87, 74, 74);
      background: linear-gradient(90deg, rgba(186,186,186,1) 0%, rgb(100 100 100) 48%, rgba(176,177,179,1) 100%);
  }
  
 
  @media  (max-width: 350px) {
    
  

    #pnlHeader{
        display: none!important;
      }
      #pnlContent{
        overflow-y: auto; position: absolute; top: 0px; bottom: 60px;left:0px;
      }
   
    .child {
        width: calc(var(--parentWidth) / 6)!important;
    }

    .divZoom{
        transform: scale(3, 3)!important;
        -webkit-transform: scale(3, 3)!important;
        -moz-transform: scale(3, 3)!important;  
        text-decoration: none;
    }

      .col-xs-2 {
        width: 32%;
    }

}

@media  (max-width: 600px) {
    
    .child {
        width: calc(var(--parentWidth) / 6)!important;
    }

    .divZoom{
        transform: scale(3, 3)!important;
        -webkit-transform: scale(3, 3)!important;
        -moz-transform: scale(3, 3)!important;  
        text-decoration: none;
    }

    #pnlHeader{
        display: none!important;
      }
      #pnlContent{
        overflow-y: auto; position: absolute; top: 0px; bottom: 60px;left:0px;
      }


 

}

@media  (min-width: 600px) {
    
    .child {
        width: calc(var(--parentWidth) / 6)!important;
    }

    .divZoom{
        transform: scale(3, 3)!important;
        -webkit-transform: scale(3, 3)!important;
        -moz-transform: scale(3, 3)!important;  
        text-decoration: none;
    }

    #pnlHeader{
        display: none!important;
      }
      #pnlContent{
        overflow-y: auto; position: absolute; top: 0px; bottom: 60px;left:0px;
      }
      

   /*  .col-sm-2 {
        width: 20%;
    }   */

  

}


@media (min-width:768px) { 

    .child {
        width: calc(var(--parentWidth) / 6)!important;
    }

    .divZoom{
        transform: scale(3, 3)!important;
        -webkit-transform: scale(3, 3)!important;
        -moz-transform: scale(3, 3)!important;  
        text-decoration: none;
    }

#pnlHeader{
    display: block!important;
    
  }

  #pnlContent{
    overflow-y: auto; position: absolute; top: 100px; bottom: 60px;left:0px;
  }
  .bkDEF {
       
    padding-top: 10px;
   
}

 /* .col-md-1{
      width:16%;
  }

.col-sm-2{
    width:19%;
}*/

}
 

@media (min-width: 992px) { 

    .child {
        width: calc(var(--parentWidth) / 6)!important;
    }

    .divZoom{
        transform: scale(3, 3)!important;
        -webkit-transform: scale(3, 3)!important;
        -moz-transform: scale(3, 3)!important;  
        text-decoration: none;
    }
  
    #pnlHeader{
      display: block!important;
      
    }
  
    #pnlContent{
      overflow-y: auto; position: absolute; top: 100px; bottom: 60px;left:0px;
    }

  /*  .col-md-1{
        width:16%;
    }*/

    .bkDEF {
       
        padding-top: 5px;
       
    }
   
  
  }
  
  @media (min-width: 1200px) { 
    .child {
        width: calc(var(--parentWidth) / 6)!important;
    }

    .divZoom{
        transform: scale(3, 3)!important;
        -webkit-transform: scale(3, 3)!important;
        -moz-transform: scale(3, 3)!important;  
        text-decoration: none;
    }

    #pnlHeader{
        display: block!important;
        
      }
    
      #pnlContent{
        overflow-y: auto; position: absolute; top: 100px; bottom: 60px;left:0px;
      }

      .bkDEF {
       
        padding-top: 5px;
       
    }

/* .col-lg-1{
        width:12%;
    }*/

  }