@charset "utf-8";

     /* Create three columns that floats next to each other */
        .button_column {
            position:relative;
            float:left;
            height: 44px;
            background-color: #bdd4ff;
        }

        .left, .right {
           width: 35%;
           font-size: 20px;
           padding-top: 10px;
        }
        
        .left {
           text-align: left;
           padding-left: 20px;
        }

        .right {
           text-align: right;
           padding-right: 20px;
        }
        .middle {
           width: 30%;
           font-size: 16px;
           font-weight: bold;
           text-align: center;
           padding-top: 3px;
          }
          
    /* Two state toggle slider switch */
          
        .toggle_radio{          /* this is the outer ring */
          position: relative;
          background: rgba(75,139,195,0.3);
          border: black thin solid;
          margin: 4px auto;
          overflow: hidden;
          padding: 0 !important;
          -webkit-border-radius: 50px;
          -moz-border-radius: 50px;
          border-radius: 50px;
          position: relative;
          height: 30px;
          width: 302px;
        }
        .toggle_radio > * {
          float: left;
          cursor: pointer;
        }
        .toggle_radio input[type=radio]{
          display: none; 
          /*position: fixed;*/
        }
        .toggle_radio label{
          font-size: 16px;
          color:#000;
          font-weight: bold;
          display: block;
          width: 100px;
          height: 28px;
          -webkit-border-radius: 50px;
          -moz-border-radius: 50px;
          border-radius: 50px;
          z-index: 0;
          text-align: center;
          padding-top: 6px;
        }
        .toggle_option_slider{
          width: 100px;
          border: black solid;
          border-width: 1px;
          height: 28px;
          position: absolute;
          -webkit-border-radius: 50px;
          -moz-border-radius: 50px;
          border-radius: 50px;
          -webkit-transition: all .4s ease;
          -moz-transition: all .4s ease;
          -o-transition: all .4s ease;
          -ms-transition: all .4s ease;
          transition: all .4s ease;
        }

        #first_toggle:checked ~ .toggle_option_slider{
          background: rgba(75, 103, 195,.3);
          left: 0px;
        }
        #second_toggle:checked ~ .toggle_option_slider{
          background: rgba(75, 103, 195,.3);
          left: 100px;
        }
        #third_toggle:checked ~ .toggle_option_slider{
          background: rgba(75, 103, 195,.3);
          left: 200px;
        }
        
        .toggle_option ~ label:hover {
          background: rgba(75, 103, 195,.3);
          }

/* css for Image Viewer*/
        
        /* Hide the images by default */
        .mySlides {
            display:none;
            position: relative;
            background-color: #8085ab;
        }
        
        /* Number text (1/3 etc) */
        .numbertext {
          position: absolute;
          /*color: #000000; */
          top: 0px;
          left: 50%;
          transform: translate(-50%, 0%);
          font-size: 18px;
          padding: 8px 12px;
          top: 0;
          background: inherit;
          background-clip: text;
          color: transparent;
          filter: invert(1) grayscale(1) contrast(9);
        }
        
        /* .cursor {
        cursor: pointer;
        } */
       
        /* Next & previous buttons */
        .prev,
        .next {
          cursor: pointer;
          position: absolute;
          top: 40%;
          width: auto;
          padding: 16px;
          margin-top: 0px;
          color: white;
          font-weight: bold;
          font-size: 30px;
          border-radius: 0 3px 3px 0;
          user-select: none;
          -webkit-user-select: none;
        }

        /* Position the "next button" to the right */
        .next {
          right: 0;
          border-radius: 3px 0 0 3px;
        }

        /* On hover, add a black background color with a little bit see-through */
        .prev:hover,
        .next:hover {
          background-color: rgba(0, 0, 0, 0.8); 
        } 

        /* Container for image text */
        .caption-container {
          text-align: center;
          height: 40px;
          background-color: #8085ab;
          padding: 4px 16px;
          color: white;
        }

        .img-row:after {
          content: "";
          display: table;
          clear: both;
        } 

        /* Image columns side by side */
        .img-column {
          float: left;
          width: 3.57%;
        }

        /* Add a transparency effect for thumnbail images */
        .demo {
          display: none;
          /* opacity: 0.6; */
        }

        .active,
        .demo:hover {
          opacity: 1;
        }
        
        .row:after {
        content: "";
        display: table;
        clear: both;
    }
        
        /* Tooltip css*/
        .tooltip {
            position: relative;
            display: inline-block;
          }
        .tooltip .tooltiptext {
            visibility: hidden;
            width: 100px;
            background-color: #bdd4ff;
            color: black;
            font-size: 12px;
            text-align: center;
            border-radius: 6px;
            padding: 12px;
            /* Position the tooltip */
            position: absolute;
            z-index: 1;
            bottom: 100%;
            left: 50%;
            margin-left: -90px; /* half the size of tooltip width */
          }

          .tooltip:hover .tooltiptext {
            visibility: visible;
          }