/*
    Write your custom styling here.
*/

*{
    font-family: "Source Sans Pro", "Source Sans Pro R", sans-serif;
    box-sizing: border-box;
    font-smooth : always;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
}

thin, .text-thin{
    font-family: "Source Sans Pro L", "Source Sans Pro", sans-serif !important;
    font-weight: lighter;
}
body{
    /*background-image: url("../img/bg_sprite.png");*/
    background-color: var(--bs-light); 
    margin : 0px;
    padding: 0px;
}
header{
    background-color : white;
    background-size: cover;
    position: relative;
    padding : 10px;
    overflow:hidden;
}
header img{
    position:relative;
    margin:auto 0px;
}

.header-watermark{
    position:absolute;
    width:200px;
    bottom:0px;
    right:0px;
}
header table.head-slogan{
    font-family: "Source Sans Pro", "Source Sans Pro R", sans-serif;
    color : white;
    text-shadow : 0px 0px 7px teal;
    font-size: 15px;
    position:relative;
    float:right;
    margin:auto 20px;
    max-width:350px;
}
h1 small{
    font-size:13px;
    color : silver;
    font-weight: normal;
}
code, code > *{
    font-family: "Courier New", monospace;
    letter-spacing: -1px;
}
pre{
    padding : 10px;
    background-color : #DEDEDE;
    font-family: "Courier New";
    color : black;
}

footer{
    position : relative;
    min-height : 100px;
    background-color : var(--bs-dark);
    color : white;
    padding : 10px;
}
footer table{
    color : white;
}
footer table tbody tr td{
    font-family : "Source Sans Pro", "Source Sans Pro R", sans-serif;
}
.head-slogan{
    font-family : "Baskerville Old Face", serif;
}
footer a{
    color:white;
    text-decoration: none;
    transition: color 300ms;
}
footer a:hover {
    color:violet;
}
footer table tr td h5{
    font-family: "Source Sans Pro B", "Source Sans Pro", sans-serif;
    color : white;
    letter-spacing : 0px;
}

footer h6{
    color : white;
    font-weight: bold;
    text-transform: uppercase;
    letter-spacing : 0px;
}

div.description {
    position:relative;
    width:100%;
}
div.description img{
    border-radius : 20px;
    max-width:100%;
}
div.description table img{
    width:100% !important;
    height:auto !important;
}
div.description table{
    width:100% !important;
}
div.description h1, div.description h2, div.description h3{
    text-shadow: 0 10px 30px rgba(0,0,0,0.25) !important;
}

.carousel, .carousel .carousel-inner, .carousel .carousel-item{
    position : relative;
    overflow: hidden;
}
.carousel .carousel-caption{
    background-image: url("../img/bg3.png");
    text-shadow: 0px 0px 10px black;
}
.carousel .carousel-caption h5{
    font-size: 25px;
    color : white;
}
.carousel .carousel-inner .carousel-item a img, .carousel .carousel-inner .carousel-item img{
    background-size: cover;
    background-position: center;
}
div.img-holder.img-thumbnail{
    cursor: pointer;
    height:100px;
    background: none;
}
div.img-holder.img-thumbnail .card-footer{
    border:none;
}
div.img-holder.img-thumbnail:hover{
    box-shadow: 0 0 15px rgba(0,0,0,0.70);
}
div.img-holder{
    height:150px;
    align-items: center;
    justify-content: center;
}
div.img-holder img{
    width:100%;
    align-items: center;
}
div.img-holder p{
    position:absolute;
    padding:5px;
    width:100%;
    bottom : 0px;
    text-align: center;
    line-height: 1em;
}
div.img-holder .card-body{
    flex: none;
    background-position: center;
    background-size: cover;
}
.widget-holder{
    position:relative;
    float:center;
    overflow: hidden;
    display: inline-grid;
    padding:10px;
    width:100%;
    height:150px;
    border-radius: 20px;
    justify-content: center;
    border: 3px solid white;
    box-shadow: 0 0 5px rgba(0,0,0,0.25);
    background-color: #75ffc9;;
    color:#343a40;
    transition: all ease-in-out 0.4s;
}
.widget-holder .widget-image{
    position:relative;
    height : 200px;
    width:100%;
    top : -10px;
    background-image : url("../img/asklex-ph-academy-final-without-bckgrnd.png");
    background-color : silver;
    background-size:cover;
    background-position : center;
    display:flex;
    align-self:baseline;
}
.widget-holder .widget-title{
    position:relative;
    width:100%;
    top : -5px;
    padding : 0px 10px;
    text-align: center;
    z-index: 1;
}

.widget-holder:hover{
    background-color: mediumspringgreen;
    box-shadow: 0 0 20px rgba(0,0,0,0.3);
}
.widget-holder .fa{
    z-index:0;
    transition: all ease-in-out 0.4s;
}
.widget-holder:hover .fa{
    font-size: 8rem;
}

.widget-holder span{
    position:absolute;
    padding:5px;
    width:100%;
    bottom : 0px;
    text-align: center;
    line-height: 1em;
    color : rgba(255,255,255,0.5);
}
.widget-holder label{
    display: flex;
    font-weight: bold;
    font-family: "Source Sans Pro", "Source Sans Pro B",sans-serif;
    justify-content: center;
    font-size: 2rem;
    z-index: 2;
}
.widget-holder .widget-details{
    text-align : left;
    padding:0px 15px;
}
.widget-holder button{
    width: 120px;
    font-family: "Source Sans Pro", "Source Sans Pro R", sans-serif;
    margin-right: 0px;
    margin-left: 115px;
    display:flex;
    align-self:end;
}
.input-group .btn {
    margin-left: 0px;
    color:white;
}
.input-group .btn.btn-default {
    color:dimgray;
}
.btn-yellow{
    background-color: yellow;
}
#uploadbrowser{
    padding : 0px;
    padding-top : 10px;
}
#uploadbrowser div.holder div:first-child{
    position : relative;
    height : 100px;
    background-size:cover;
    background-position: center;
    margin: -6px;
    background-color : dodgerblue;
}
#uploadbrowser div.holder{
    position : relative;
    float : left;
    width : 100%;
    height : 150px;
    padding : 5px;
    overflow:hidden;
    cursor: pointer;
    transition : all ease-in-out 0.25s;
}

#uploadbrowser div.holder.active{
    background-color : var(--bs-primary);
    border : 3px solid var(--bs-primary);
    color : white;
    box-shadow: 0 0 10px var(--bs-primary);
}

#uploadbrowser div.holder p{
    position : relative;
    padding-top : 5px;
    margin:0px;
    float : left;
    font-size : 12px;
    text-align: left;
    overflow-wrap: anywhere;
}
#uploadbrowser div.holder span{
    color : white;
}
#uploadbrowser div.holder label{
    color : white;
    position : relative;
    width: 100%;
    font-size : 12px;
    background-color: rgba(0,0,0,0.25);
    top : 0px;
    text-shadow : 0 0 10px black;
    line-height: 1;
    text-align: center;
}
#uploadbrowser div.holder:hover{
    box-shadow: 0 0 5px var(--bs-primary);
}
#uploadbrowser div.holder.active:hover{
    box-shadow: 0 0 15px var(--bs-primary);
}
.teal{
    background-color: teal;
    color:white;
}
.dodgerblue{
    background-color: dodgerblue;
}
.mediumspringgreen{
    background-color: mediumspringgreen;
    color:green;
}
.orange{
    background-color: orange;
}

.darkgreen{
    background-color: #013220;
    color:white;
}
.text-mediumspringgreen{
    color :mediumspringgreen;
}
input.disabled{
    background-color: whitesmoke;
}

hr{
    border-width: 2px;
    border-color: #E6E9ED;
}
.module-view *{
    font-family: sans-serif;
}
.module-view strong *{
    font-weight: bolder;
}
.module-view p{
    line-height: 1.4;
}

#wtrmrk{
    position:absolute;
    z-index:0;
    bottom:0;
    right:0;
}
#divProgrammes{
    position:relative;
    z-index: 1;
}
.icon-holder{
    position:relative;
    z-index: 1;
}
.circle.icon{
    border-radius:100%;
    border:5px solid white;
    box-shadow: 0 0 10px rgba(0,0,0,0.15);
    background-color:dimgray;
    background-size:cover;
    background-position:center;
}

.iframe-container {
    overflow: hidden;
    padding-top: 56.25%;
    position: relative;
}

.iframe-container iframe {
    border: 0;
    height: 100%;
    left: 0;
    position: absolute;
    top: 0;
    width: 100%;
}

.sm-square{
    width:25px;
    height:25px;
    padding:0px;

}

.card-gold{
    color:silver;
    background-image:url('../img/covers/card-gold.jpg');
}
.card-gold .text-gradient{
    color:gold;
    background:none;
    background: linear-gradient(-45deg, rgba(180,145,7,1) 0%, rgba(220,170,2,1) 47%, rgba(255,255,0,1) 100%);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;
    text-fill-color:transparent;
    text-shadow: 2px 2px 4px rgba(0,0,0,0.5);
}
.card-gold .text-muted{
    color:rgba(255,255,0, 0.69) !important;
}
.card-gold .badge.text-muted{
    color:var(--bs-gray) !important;
}
.card-gold .voucher-name{
    color:rgba(255,255,0,0.2);
}
.voucher-name{
    font-family: "Chopin Script";
    font-size:4.5rem;
    right:5px;
}
.card-silver{
    color:white;
    background-image:url('../img/covers/card-silver.jpg');
}
.card-silver .text-gradient{
    color:silver;
    background:none;
    background: linear-gradient(-45deg, rgba(180,145,7,1) 0%, rgba(220,170,2,1) 47%, rgba(255,255,0,1) 100%);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;
    text-fill-color:transparent;
    text-shadow: 2px 2px 4px rgba(0,0,0,0.5);
}
.card-silver .text-muted{
    color: #333333 !important;
}
.card-silver .badge.text-muted{
    color:var(--bs-gray) !important;
}
.card-silver .voucher-name{
    color:rgba(255,255,255,0.25);
    right:0px;
}
.card-bronze{
    color:silver;
    background-image:url('../img/covers/card-bronze.jpg');
}
.card-bronze .text-gradient{
    color:silver;
    background:none;
    background: linear-gradient(-45deg, rgba(180,145,7,1) 0%, rgba(220,170,2,1) 47%, rgba(255,255,0,1) 100%);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;
    text-fill-color:transparent;
    text-shadow: 2px 2px 4px rgba(0,0,0,0.5);
}
.card-bronze .text-muted{
    color:rgba(255,255,0, 0.69) !important;
}
.card-bronze .badge.text-muted{
    color:var(--bs-gray) !important;
}
.card-bronze .voucher-name{
    color:rgba(210,105,30,0.25);
    right:0px;
}
.card-white .text-gradient{
    background:none;
    background: linear-gradient(-45deg, rgba(180,145,7,1) 0%, rgba(220,170,2,1) 47%, rgba(255,255,0,1) 100%);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;
    text-fill-color:transparent;
    text-shadow: 2px 2px 4px rgba(0,0,0,0.25);
}
.card-white .voucher-name{
    color: rgba(255, 255, 255, 0.5);
    right:0px;
}