/* ****************************************************************************
* Topics Listing 
**************************************************************************** */
/**********************************************/
/* Color definitions
  Yellow 1: rgb(255,243,180) #FFF3B4
  Yellow 2: rgb(255,231,105) #FFE769
  Yellow 3: rgb(255,221,81) #FFDD51
  Yellow 4: rgb(246,201,76) #F6C94C

  Blue/Green 1: rgb(0,_136,135) #008887
  Blue/Green 1: rgb(0,100,108) #008887
  Blue/Green 2: rgb(51,160,159) #33A09F
  Blue/Green 3: rgb(102,184,183) #66B8B7

  Green 1: rgb(102,160,135) #66A087
  Green 2: rgb(168,188,125) #A8BC7D
  Green 3: rgb(203,215,177) #CBD7B1
  Green 4: rgb(202,201,119) #CAC977

  Blue 1: rgb(127,183,192) #7FB7C0
  Blue 2: rgb(128,189,209) #80BDD1
  Blue 3: rgb(198,226,227) #C6E2E3

  Grey 1: rgb(50,50,50) #323232
  Grey 2: rgb(179,179,179) #B3B3B3
  Grey 3: rgb(242,242,242) #F2F2F2



  
  REBRAND 2021:
  Blue/Green: rgb(0,100,108) #00646C
  Blue: rgb(159,221,228) #9FDDE4
  Yellow: rgb( 255,225,68) #FFE144
  Green: rgb(175,215,120) #AFD778

*/

/* 0.8333% is also the margin used by the parent column_25_25_25_25 elements */
.topic_row {
    margin-bottom: 0.8333%;
}

.topic_box {
    border: 1px solid rgb(0,100,108);
    height: 80px;
    position: relative;
}

.topic_box:hover {
    background-color: rgb(0,100,108);
}

.topic_box:hover .topic_text {
    color: white;
}

.topic_content {
    width: 100%;
}

.topic_text {
    width: 60%;
    display: inline-block;
    margin: 10px 0 0 10px;
    color: rgb(50, 50, 50);
    line-height: 110%;
    font-size: 0.98em;
}

.topic_icon {
    text-align: center;
    width: 70px;
    height:70px;
    display: inline-block;
    position: absolute;
    bottom: 0;
    right: 10px;
    background-color: rgb(0,100,108);
}

.topic_icon img {
    width: 50px;
    height: 50px;
    position: absolute;
    bottom: 10px;
    right: 10px;
}

.topic_yellowline {
    width: 100%;
    border: 0px solid rgb(255,231,105);
    position: absolute;
    bottom: 0;
    z-index: -1;
}

@media only screen and (min-width: 768px) and (max-width: 979px){
    .topic_text {
        margin: 10px 0 0 6px;
        font-size: 0.9em;
        line-height: 100%;
    }

    .topic_icon {
        width: 60px;
        height: 70px;
        right: 6px;
    }

    .topic_icon img {
        width: 40px;
        height: 50px
    }
}

/* For mobile view, margin between rows should be similar (10px)
 * to margin between boxes which stack one below the other */
@media only screen and (max-width: 767px){
    .topic_row {
        margin-bottom: 10px;
    }
}