body{
 
    background-image: url('../img/left3.png')     ;
    background-repeat: no-repeat;
 
    background-attachment: fixed;
    background-color: #eee;

     }

     .container-footersxxx{
      
      background-image: url('../img/bg_body.png')    ;
      background-repeat: no-repeat;
      background-size: 100%;
      background-attachment: absolute;
      z-index: 9;
      height:600px;
      
    }

    .container-footersz{
      
      background-image: url('../img/bgs_body.png')    ;
      background-repeat: no-repeat;
      background-size: 100%;
      background-attachment: fixed;
      z-index: 9;
      height:900px;

      
    }

       .underpage .list-group-item  {
     background: transparent;
     }

    .btn-sm{
        padding: 2px  6px;
    }

    .nav-tabs .nav-link:hover, .nav-tabs .nav-link:focus {
        border-color: #f7f7f9 #f7f7f9 #eceeef;
      }
      .nav-tabs .nav-link {
         font-size: 12.5px;
         color: var(--blue);

         background-image: linear-gradient(rgb(214, 214, 214), #FFF);

       }

.form-check-input{
    width: 14px;
    height: 14px;
}

    .breadcrumb{
        color: #686868;
        border-right: var(--blue) 8px solid;
        background:#FFFFFF;
        box-shadow: 0px 0px 10px 0px #5D6572;
        margin-bottom: 25px;
    }

    .table-sm th {
        font-size:13px;
        color: #555;
        padding:14px;
    }

    .breadcrumb a {
        color: var(--blue);
      }

      .breadcrumb a:hover {
        color: rgb(51, 51, 51);
        text-decoration: none;
      }

      .breadcrumb-item.active {
        color: rgb(54, 54, 54);
      }

      .breadcrumb-item + .breadcrumb-item::before {
        display: inline-block;
        padding-right: 0.5rem;
        color: #009999;
        content: "/";
      }
.rightpageside{
    width: 20%;
}
    .leftpageside{
        width: 78%;
        margin-right: 15px;
     }

     .menuprogramleft{
        display: none;
    }

     @media (max-width: 992px) {
        .grouplogo{
            display: none;
        }

        .rightpageside{
            display: none;
        }
    .menuprogramleft{
        display: block;
    }
        .leftpageside{
           width: 95%;

        }

     }



          .container-main{
            background-color: #fff;
            box-shadow: 0px 8px 30px -10px #5D6572;
             padding-top:30px;
            padding-bottom:30px;
            min-height: 300px;
          }

          .container-footer{
              margin-top:0px;
            background-color: #363636;
            box-shadow: 0px 8px 30px -10px #5D6572;
            padding-top:0px;
             padding-bottom:30px;
            min-height: 200px;
          }


    .grouplogo{
        position: absolute;top:-2px;left:100px;
    }
     .logo{
        height:120px;
        width: 160px;
        border: solid 1px #eee;
        border-top: solid 8px var(--blue);

        display: inline-block;
        margin-left: -15px;

        border-bottom-left-radius:10px;
        border-bottom-right-radius:10px;

        box-shadow: 0px 8px 30px -10px #5D6572;
        text-align: center;
    }
    .logo-bg1{
        background-image: linear-gradient(rgb(161, 161, 161), #FFF);
    }
    .logo-bg2{
        background-image: linear-gradient(rgb(172, 172, 172), #FFF);
    }
    .logo-bg3{
        background-image: linear-gradient(rgb(219, 219, 219), #FFF);
    }

    .logo img{

        width: 85%;
        text-align: center;
        padding: 10px;

    }
     .nav-item {
            font-size: 12px;
            padding: 0px 5px;

      }

      .navbar-nav .nav-link  {
        font-size: 13px;

    }

    .navbar .active {
        border-bottom: 2px solid #ffffff;
    }


    .list-group .active{
        color:#ffffff;
    }


    .list-group .fas{
       font-size: 24px;
       margin-left: 5px;
       color: #818181;
    }



    label{
        font-size: 12px;
    }


    body,.form-control,.btn{
        font-size: 14px;
    }

    .cardprogram label{
        font-size: 14px;

    }

    .cardprogram {
        font-size: 14px;
    }

    .cardprogram .col-lg-4,.col-md-4 {
        margin-bottom: 14px;
    }



    .sidenav {
        height: 100%;
        width: 0;
        position: fixed;
        z-index: 1;
        top: 0;
        right: 0;
        background-color: #111;
        overflow-x: hidden;
        transition: 0.5s;
        padding-top: 60px;
        -webkit-transition: 0.5s;
        -moz-transition: 0.5s;
        -ms-transition: 0.5s;
        -o-transition: 0.5s;
    }

      .sidenav a {
        padding: 8px 8px 8px 32px;
        text-decoration: none;

        color: #818181;
        display: block;
        transition: 0.3s;
      }

      .sidenav a:hover {
        color: #f1f1f1;
      }

      .sidenav .closebtn {
        position: absolute;
        top: 0;
        left: 25px;
        font-size: 36px;
        margin-left: 50px;
      }

      #main {
        transition: margin-right .5s;

        -webkit-transition: margin-right .5s;
        -moz-transition: margin-right .5s;
        -ms-transition: margin-right .5s;
        -o-transition: margin-right .5s;
    }

      @media screen and (max-height: 450px) {
        .sidenav {padding-top: 15px;}
        .sidenav a {font-size: 18px;}
      }



      #loading{
        background-color: #6e6e6e;
        height: 100%;
        width: 100%;
        position: fixed;
        z-index: 1;
        margin-top: 0px;
        top: 0px;
    }
    #loading-center{
        width: 100%;
        height: 100%;
        position: relative;
        }
    #loading-center-absolute {
        position: absolute;
        left: 50%;
        top: 50%;
        height: 50px;
        width: 150px;
        margin-top: -25px;
        margin-left: -75px;

    }
    .object{
        width: 8px;
        height: 50px;
        margin-right:5px;
        background-color: #FFF;
        -webkit-animation: animate 1s infinite;
        animation: animate 1s infinite;
        float: left;
        }

    .object:last-child {
        margin-right: 0px;
        }

    .object:nth-child(10){
        -webkit-animation-delay: 0.9s;
        animation-delay: 0.9s;
        }
    .object:nth-child(9){
        -webkit-animation-delay: 0.8s;
        animation-delay: 0.8s;
        }
    .object:nth-child(8){
        -webkit-animation-delay: 0.7s;
        animation-delay: 0.7s;
        }
    .object:nth-child(7){
        -webkit-animation-delay: 0.6s;
        animation-delay: 0.6s;
        }
    .object:nth-child(6){
        -webkit-animation-delay: 0.5s;
        animation-delay: 0.5s;
        }
    .object:nth-child(5){
        -webkit-animation-delay: 0.4s;
        animation-delay: 0.4s;
        }
    .object:nth-child(4){
        -webkit-animation-delay: 0.3s;
        animation-delay: 0.3s;
        }
    .object:nth-child(3){
        -webkit-animation-delay: 0.2s;
        animation-delay: 0.2s;
        }
    .object:nth-child(2){
        -webkit-animation-delay: 0.1s;
        animation-delay: 0.1s;
        }



    @-webkit-keyframes animate {

      50% {
        -ms-transform: scaleY(0);
           -webkit-transform: scaleY(0);
        transform: scaleY(0);

          }



    }

    @keyframes animate {
      50% {
        -ms-transform: scaleY(0);
           -webkit-transform: scaleY(0);
        transform: scaleY(0);
          }


    }



    .flip-card {
        background-color: transparent;
        width: 300px;
        height: 200px;
        border: 1px solid #f1f1f1;
        perspective: 1000px; /* Remove this if you don't want the 3D effect */
      }

      /* This container is needed to position the front and back side */
      .flip-card-inner {
        position: relative;
        width: 100%;
        height: 100%;
        text-align: center;
        transition: transform 0.8s;
        transform-style: preserve-3d;
      }

      /* Do an horizontal flip when you move the mouse over the flip box container */
      .flip-card:hover .flip-card-inner {
        transform: rotateY(180deg);
      }

      /* Position the front and back side */
      .flip-card-front, .flip-card-back {
        position: absolute;
        width: 100%;
        height: 100%;
        backface-visibility: hidden;
      }

      /* Style the front side (fallback if image is missing) */
      .flip-card-front {
        background-color: #bbb;
        color: black;
      }

      /* Style the back side */
      .flip-card-back {
        background-color: dodgerblue;
        color: white;
        transform: rotateY(180deg);
      }

      .cardmenu {
        box-shadow: 0 4px 8px 0 rgba(0,0,0,0.2);
        transition: 0.3s;

        margin: 13px;
        padding: 14px;
        border-radius: 5px;
      }
      .cardmenu a {
        color: rgb(121, 121, 121);
      }
      .cardmenu h4 {
        margin-top: 13px;
        color: var(--blue);
        font-size: 16px;
      }

      .cardmenu:hover {
        box-shadow: 0 8px 16px 0 rgba(0,0,0,0.2);

      }
      .cardmenu .fas {
       font-size: 70px;
       color:rgb(209, 209, 209);
      }


    .tableAnswer  input[type=radio]{
        width:20px;
        height:20px;padding:0px;
    }
    
      .headercard{
               font-weight: bold;

      color: var(--blue); background-image: linear-gradient(rgb(214, 214, 214), #FFF);
      
    }

 
    .nav-top .nav-link  {
      font-size: 12px;
    }
 
    .text-top{
     margin-right:170px;
     top:65px;
     width:300px;
     position: absolute;border:0px solid #222;
    }
 
  @media (max-width: 576px) {
    .nav-top .nav-link  {
      font-size: 10px;
      padding: 2px;
      margin: 1px;
    }
    .nav-top .nav-item  {
      font-size: 10px;
      padding: 2px;
      margin: 1px;
    }
    
    .text-top{
     position: relative;
      font-size: 12px;
      width:200px;
      margin-left:10px;
      top:20px;
    }
  }