/* STYLE */
* { 
    margin: 0; 
    padding: 0; 
    -webkit-box-sizing: border-box;
    -moz-box-sizing: border-box;
    box-sizing: border-box;
}

body { background-color: #fff; }


/* General Styles */
#pres_FirstModule, #pres_SecondModule, #pres_ThirdModule { 
    /* max-width:729px; */
    min-width: 280px;
    width: 100%;
    
    font-family: 'PT sans';
    
    display:block;
    
    clear: both;
    /* overflow: auto; */
    margin-bottom: 20px;
}
.col {
    float: left;
}
.col-2 {
    width: 16.66%;
}
.col-3 {
    width: 25%;
}
.col-4 {
    width: 33.33%;
}
.col-5 {
    width: 41.66%;
}
.col-6 {
    width: 50%;
}
.col-7 {
    width: 58.34%;
}
.col-8 {
    width: 66.67%;
}
.pres_Label { font-size: 13px; padding: 0 2px;}

.pres_Bold { font-weight: bold; }

.pres_Uppercase { text-transform: uppercase; } 

.pres_DoubleLine { min-height: 3.4rem;}

.pres_Grey { color: #707070; }

.pres_Large { 
    font-size: 48px;
    line-height: 40px;
    margin-bottom: 6px;
    margin-left: -3px;
}

.pres_Medium { 
    font-size: 30px; 
    margin-left: -1px;
}

.pres_Small { 
    font-size: 15px; 
    font-weight: bold;
}

.pres_Icon {
    display: block;
    width:100%;
    max-width: 35px;
    height: 35px;
    margin: 0 auto 5px;
}
.pres_2x {
    max-width: 100%;
    height: 100px;
}
.pres_Chance {
    margin-top: 5px;
}
.pres_Desc {
    padding: 10px 0 0 6px;
}
.pres_Desc li {
    margin-bottom: 4px;
}

/* First Module*/
#pres_FirstModule {
    padding: 20px;
    border: 1px solid #D6DBE2;
}

#pres_Search {
    display: block;
    margin: 0 auto 20px;
    width: 100%;
}

#pres_Search::placeholder {
    color: #C7C7C7;
}

#pres_Search::-webkit-input-placeholder { /* Chrome/Opera/Safari */
  color: #C7C7C7;
}
#pres_Search::-moz-placeholder { /* Firefox 19+ */
  color: #C7C7C7;
}
#pres_Search:-ms-input-placeholder { /* IE 10+ */
  color: #C7C7C7;
}
#pres_Search:-moz-placeholder { /* Firefox 18- */
  color: #C7C7C7;
}

.Select {
    max-width: 280px;
    margin: 0 auto 20px;
    position: relative;
    
}
/* .Select, .Select div, .Select input, .Select span {
    z-index: 1; 
  
  } */
  .Select-control {
      border-color: #949697 !important;
      background: url(../images/icons/search.svg) center right no-repeat !important;
      background-size: 16px !important;
      background-position:98% center  !important;
  }
  .Select-control:hover {
      background-color:#e2faff !important;
  }
  .Select-placeholder, .Select--single > .Select-control .Select-value {
    /* line-height: 37px !important; */
    top: 2px  !important;
    left: 2px !important;
  }
  .Select input {
      width: 90% !important;
  }
  .Select-arrow-zone {
    display: none !important;
  }
  .magnify-button {
      
    display: none !important;
  }

#pres_Name { 
    text-align: center;
    font-size: 36px;
    margin-bottom: 20px;
    min-height: 3rem;
    display: block;
}

.pres_Wrap {
    max-width: 415px;
    width:100%;
    margin: 0 auto;
}

.pres_Wrap li {
    list-style-type: none;
}

.pres_Col2 {
    display: inline-block;
    width: 230px;
}

.pres_Col2 ul { 
    display: inline-block;
    max-width: 120px;
    width: 100%;
    vertical-align: bottom;
}

.pres_Col2 .pres_Icon {
    display: inline-block;
    max-width: 100px;
    height: 100px;
    vertical-align: bottom;
}

.pres_Col1 {
    display: inline-block;
    padding-left: 20px;
}

.pres_Col1 li {
    margin-bottom: 5px;
    font-size: 15px;
}

/* Second Module */
#pres_SecondModule {
    text-align: center;
    border: 1px solid #D6DBE2;
}

.pres_Col3 {
    display:inline-block;
    
    min-height: 155px;

    height:100%;
    width: 33.33%;
   
    padding: 6px 6px 15px;
    
    vertical-align: bottom;
}
.borderSide {
    border-left: 1px solid #D6DBE2;
    border-right: 1px solid #D6DBE2;
}
/* .pres_Col3:nth-child(even) {
    border-left: 1px solid #D6DBE2;
    border-right: 1px solid #D6DBE2;
    padding-bottom: 35px;
    margin-bottom: -35px;
    overflow: hidden;
    width:33.5%;
} */

.pres_Temp {
    display: block;
    height: 12px;
    width: 100%;
    margin: 0 auto 6px;
}

.pres_stageOne { background-color: #d9e2f7; }
.pres_stageTwo { background-color: #ffd78e; }
.pres_stageThree { background-color: #ffac47; }
.pres_stageFour { background-color: #ff8b00; }
.pres_stageFive { background-color: #d9162e; }


/* Third Module */
#pres_ThirdModule {
    text-align: center;
     border-left: 1px solid #D6DBE2;
}

.pres_Col7  {
    display:block;
    
    /* min-width:79px; */
    /* max-width: 104px; */
    width: 14.28%;
    
    float: left;
    padding: 20px 5px 20px;
    border-top: 1px solid #D6DBE2;
    border-right: 1px solid #D6DBE2;
    border-bottom: 1px solid #D6DBE2;
}

.pres_Maxmin {
    margin: 0 20% 0 auto;
    width: 60%;
}
.pres_Number { 
    text-align: center;
    margin: 0 auto 10px;
    width: 61px;
    line-height:1;
    padding:5px 0;
}


button {
    margin: 1rem 0;
    cursor: pointer;
    padding: 4px 8px;
    font-size: 14px;
    border: 1px solid transparent;
    background-color: #4099ff;
    color: white;
    font-family: 'Open-sans',Arial,sans-serif;
}
button.embed {
    margin: 0 auto;
}
button:hover {
    background-color: #d53376;
}
button:disabled {
    background: #ccc;
    cursor: default;
}
button.copy:hover {
    background-color: #ccc;
}

button.copy:active {
    background-color: #ddd;
}
button.copy {
    background-color: #f5f5f5;
    color: green;
}
button.close {
    background-color: pink;
    color: red;
    position: absolute;
    right: 20px;
    top: 0;
}
.ReactModal__Content {
    font-family: 'Open-sans',Arial,sans-serif;
    top: 25% !important;
    bottom: 25% !important;
    margin-left: auto;
    margin-right: auto;
    max-width: 600px;

}
.ReactModal__Content h3 {
    padding: 0 0 1rem;
}
.ReactModal__Content p {
    padding: 1rem 0;
}
.ReactModal__Overlay {
    background-color: rgba(0,0,0,0.5) !important;
}
.show {
    display: block !important;
}
.hide, .hide-desktop {
    display: none !important;
}


@media screen and (max-width: 768px){
    
    .col-sm {
        width: 100%;
        float: none;
        clear: both;
    }
    .pres_Col2 {
    width: 50%;
    display: block;
    margin: 0 auto 20px;
    }
    
    
    .pres_Col1 {
        display: block;
        margin: 0 auto;
    }
    .pres_Desc {
        padding-left: 6px;
    }
    .pres_Col1 li {
        display: inline-block;
        width: 45%;
        text-align:center;
    }
    
    #pres_ThirdModule {
        padding: 0;
    }
    
    .pres_Col7  {
        width: 25%;
        padding: 5px;
    }
}

@media screen and (max-width: 420px){
    .col-xs {
        display: block;
        width: 100%;
        clear: both;
        float: none;
    }
    .pres_Desc {
        padding-left: 0;
    }
    .pres_Desc li {
        display: inline-block;
        width: 50%;
        text-align: center;
    }
    .pres_Maxmin {
        margin: 0 12% 0 auto;
        width: 60%;
    }
    .pres_Bold {
        min-height: 2.3rem;
        padding: 0 3px;
    }
    .pres_Col7  {
        width: 33.33%;
    }
    .hide-desktop {
        display:block !important;
    }
}