:root {
  --fir-font-article: "adobe-garamond-pro", "Times New Roman", Times;
  --fir-font-header: "foco", Helvetica;
  --fir-blue-twitter-alpha: rgba(85,172,238, 0.6);
  --fir-color-grey: rgba(0,0,0, 0.40);
}

/*body {
  display: block;
  align-items: center;
  justify-content: center;
  min-height: 100vh;
}*/

.fir-clickcircle {
  height: 80px;
  width: 80px;
  border-radius: 100px;
  cursor: pointer;
}


.fir-image-figure {
  margin-left: 3%;
  margin-right:1%;
  margin-top:1%;
  margin-bottom:1%;
  
  align-items: center;
  margin-bottom: 40px;
  position:relative ;
  text-decoration: none;
  box-shadow: 5px 10px 8px #888888;
  height:150px;
  width:45%;
  float:left;

	}
.fir-image-figure:hover {
    -ms-transform: scale(1.0); /* IE 9 */
    -webkit-transform: scale(1.0); /* Safari 3-8 */
    transform: scale(1.0); 
}
.fir-image-figure .caption, .fir-image-figure figcaption {
  padding-left: 15px;
}

html.wf-active .fir-image-figure .fig-author-figure-title {
  font-family: var(--fir-font-header);
  font-size: 16px;
}

.fir-image-figure .fig-author-figure-title {
  color: var(--fir-color-grey);
  font-family: "HelveticaNeue-Light", "Helvetica Neue Light", "Helvetica Neue", Helvetica, Arial, "Lucida Grande", sans-serif;
  font-weight: 400;
  font-size: 15px;
  margin-top: 2px;
  width:100%;
}

.fir-imageover {
  position: relative;
  display: flex;
}

.fir-imageover-color {
  height: 80px;
  width: 80px;
  position: absolute;
  background: var(--fir-blue-twitter-alpha);
  background-image: none;
  border-radius: 100px;
  cursor: pointer;
  transition: background .3s ease-in-out;
  animation: fadeInFadeOut 2s infinite;
  top: 0;
  left: 0;
}

.fir-imageover-image {
  position: absolute;
  top: 0;
  left: 0;
  animation: fadeInFadeOut 2s infinite;
}

@keyframes fadeInFadeOut {
  0%   { opacity:1; }
  50%  { opacity:0; }
  100% { opacity:1; }
}
     body
       {
           background-color:white;
       }
         .row
        {
              max-height:80vh;
             overflow-y:scroll; 
             overflow-x:hidden;
            
        }

        .btn
        {
            width:240px;
            height:50px;
            font-size:16px;
        }

 
       
        .cardBlue {
          box-shadow: 0 4px 8px 0 rgba(0, 0, 0, 0.2);
          margin: auto;
          text-align: center;
          font-family: arial;
          background: #bbe4f6;
          border-radius: 8px;
          height:300px;
          position:relative;
        }

        .cardBlue h1 {
          color: Black;
          font-size: 20px;
          padding-top: 10px;
          padding-bottom:10px;
          background-color:#34ade5;
          color:white;
          font-weight:bolder;
           border-top-left-radius: 8px; border-top-right-radius: 8px;
        }

        .cardBlue h4
        {
            font-weight:bold;
        }

        .cardBlue p {
	        text-align: left;
            padding-left: 10px;
              color: black;
        }


         .cardPink {
          box-shadow: 0 4px 8px 0 rgba(0, 0, 0, 0.2);
          margin: auto;
          text-align: center;
          font-family: arial;
          background: #ffe6e9;
          border-radius: 8px;
          height:300px;
          position:relative;
        }




        .cardPink h1 {
          color: Black;
          font-size: 20px;
          padding-top: 10px;
          padding-bottom:10px;
          background-color:#ffb6c1;
          color:white;
          font-weight:bolder;
           border-top-left-radius: 8px; border-top-right-radius: 8px;
        }

        .cardPink h4
        {
            font-weight:bold;
        }

        .cardPink p {
	        text-align: left;
            padding-left: 10px;
              color: black;
        }

        .alert {
          margin-bottom: 1px;
          height: 30px;
          line-height:30px;
          padding:0px 25px;
          display:inline-block;
        }

        .close
        {
            color:red !important;
            font-size:40px;
            line-height: 0.8;
        }




        .cardRed {
          box-shadow: 0 4px 8px 0 rgba(0, 0, 0, 0.2);
          margin: auto;
          text-align: center;
          font-family: arial;
          background: #F28A96;
          border-radius: 8px;
          height:120px;
          position:relative;
       
        }

        .cardRed h1 {
          color: Black;
          font-size: 15px;
          padding-top: 10px;
          padding-bottom:10px;
          padding-left:100px;
          background-color:#F28A96;
          color:white;
          font-weight:100;
          text-align: left;
       
        }

    
      
        .cardOrange {
          box-shadow: 0 4px 8px 0 rgba(0, 0, 0, 0.2);
          margin: auto;
          text-align: center;
          font-family: arial;
          background: #F2C78A;
          border-radius: 8px;
          height:120px;
          position:relative;
        
        }

        .cardOrange h1 {
          color: Black;
          font-size: 15px;
          padding-top: 10px;
          padding-bottom:20px;
          padding-left:100px;
          background-color:#F2C78A;
          color:white;
          font-weight:100;
          text-align: left;
        }

    
         .cardGreen {
          box-shadow: 0 4px 8px 0 rgba(0, 0, 0, 0.2);
          margin: auto;
          text-align: center;
          font-family: arial;
          background: #8AF2BB;
          border-radius: 8px;
          height:120px;
          position:relative;
       
        }

        .cardGreen h1 {
          color: Black;
          font-size: 15px;
          padding-top: 10px;
          padding-bottom:10px;
          padding-left:100px;
          background-color:#8AF2BB;
          color:white;
          font-weight:100;
          text-align: left;
        }

        .img
        {
            float:left;
            height:80px;
            padding-left : 10px;
            padding-top:7px;
        }
        .time_label 
        {
            position: absolute;
            right: 100px;    
            top:30px;
            color:black;
            font-size:18px;
            font-weight:bold;
         
        }



  ::-webkit-scrollbar {
            width: 5px;
            height: 5px;
        }

        /* Track */
        ::-webkit-scrollbar-track {
            background: #f1f1f1; 
        }
 
        /* Handle */
        ::-webkit-scrollbar-thumb {
            background: #888; 
        }

        /* Handle on hover */
        ::-webkit-scrollbar-thumb:hover {
            background: #555; 
        }


        /* The Modal (background) */
.modal {
            display: none; /* Hidden by default */
            position: absolute; /* Stay in place */
            z-index: 1; /* Sit on top */
            padding-top: 100px; /* Location of the box */
            left: 0;
            top: 0;
            width: 100%; /* Full width */
            height: 100%; /* Full height */
            overflow: auto; /* Enable scroll if needed */
            background-color: rgb(255,255,255); /* Fallback color */
            background-color: rgba(255,255,255,0.4); /* Black w/ opacity */
           -webkit-animation: slide-down .3s ease-out;
           -moz-animation: slide-down .3s ease-out;


}
        
@-webkit-keyframes slide-down {
              0% { opacity: 0; -webkit-transform: translateY(-100%); }   
            100% { opacity: 1; -webkit-transform: translateY(0); }
        }
        @-moz-keyframes slide-down {
              0% { opacity: 0; -moz-transform: translateY(-100%); }   
            100% { opacity: 1; -moz-transform: translateY(0); }
        }
/* Modal Content */
.modal-content {
            background-color: #fefefe;
            margin-left:45%;
            margin-top:-3%;
       
            padding: 20px;
           
            border: 1px solid #888;
            width: 50%;
         
          
            
    
}
         
  .arrow_box {
	position: relative;
	background: #ffffff;
	border: 1px solid #fff2f2;
}
.arrow_box:after, .arrow_box:before {
	bottom: 100%;
	left: 92%;
	border: solid transparent;
	content: " ";
	height: 0;
	width: 0;
	position: absolute;
	pointer-events: none;
}

.arrow_box:after {
	border-color: rgba(255, 255, 255, 0);
	border-bottom-color: #673AB7;;
	border-width: 30px;
	margin-left: -30px;
}
.arrow_box:before {
	border-color: rgba(255, 242, 242, 0);
	border-bottom-color: #673AB7;
	border-width: 31px;
	margin-left: -31px;
}

@media only screen and (max-width: 600px) {


    .fir-image-figure {
        margin-left: 3%;
        margin-right: 1%;
        margin-top: 1%;
        margin-bottom: 1%;
        align-items: center;
        margin-bottom: 20px;
        position: relative;
        text-decoration: none;
        box-shadow: 5px 10px 8px #888888;
        height: 150px;
        width: 95%;
        float: left;
    }

    .row {
        width: 120%;
        margin-left: -10%;
        height: 100%;
    }

    .fig-author-figure-title {
        font-size: 18px;
        color: darkgreen;
        margin-left: 20% !important;
        margin-top: -20% !important;
    }
    .mobile {
       
        margin-top: 0% !important;
    }
    .dleetemobile {
        width: 20%;
        float: right;
        margin-top: -20%;
        margin-right: 10%;
    }
    .mob {
        height: 100%;
        width: 120% !important;
        overflow: auto !important;
        background-color: white !important;
        margin-left: -10% !important;
        margin-right: 2px;
    }
    .modal-content {
        margin: auto;
        width: 85% !important;
        height: 40% !important;
    }

    .modal-content2{
        margin-left:5% !important;
        width:90% !important;
    }
    .imageMob {
        width:90% !important;
    }
    .llmob {
        margin-top: -16px !important;
    }
   
}