/*
Author: Shiraj Rafeek (AKA Sheej)
Purpose: Master Tranquil CSS configuration file
*/
/* Main container */


.tranquil{
    float: left;
    width: 100%;
    height: auto;
}

.tranquil-card{
    float:left;
    border: 1px solid;
    padding: 10px;
    box-shadow: 5px 10px #050505;    /*color:#fff!important;*/
    width:200px;
    height:auto;
    margin-right: 5px;
    margin-top: 5px;
    margin-bottom: 10px;

    margin-left: 5px;
    margin-bottom: 5px;
    border-radius: 10px;
    cursor:pointer;
}

.tranquil-col-5{ /*only used for the icons and must not be used for other*/
    width: 5%;
    display: block;
}
.tranquil-row:after {
    content: "";
    display: table;
    clear: both;
}
.tranquil-col-30{
    float: left;
    width: 30%;
    display: block;
}
.tranquil-col-20{
    float: left;
    width: 20%;
    display: block;
}
.tranquil-col-60{
    float: left;
    width: 60%;
    display: block;
}
.tranquil-card .name{
    width:100%;
    color:#000!important;
    background-color:#ccc!important;
    padding: 2px 5px 2px 5px;
    border-radius: 5px;
}

.tranquil-card .level1{
    overflow-x: auto;
    word-wrap: break-word;
    float:left;
    width:100%;
    height:70px;
    color:#000!important;
    background-color:#ccc!important;
    margin-bottom:5px;
    padding:0px 5px 0px 5px;

}
.tranquil-card .level2{
    overflow-x: auto;
    word-wrap: break-word;
    float:left;
    width:100%;
    height:27px;
    color:#000!important;
    background-color:#ccc!important;
    margin-bottom:2px;
    padding:0px 1px 0px 1px;
}

.tranquil-card .progress{
    overflow-x: auto;
    word-wrap: break-word;
    float:left;
    width:100%;
    font-family: 'AllCapsEN', 'AllCapsENw', 'Lucida Sans', 'Lucida Sans Regular', 'Lucida Grande', 'Lucida Sans Unicode', Geneva, Verdana, sans-serif;
    color:#4CAF50!important;
    background-color:#000!important;
}
.center-item {
    display: block;
    margin-left: auto;
    margin-right: auto;
}

.tranquil-card img{
    width:object-fit;
    height: object-fit;
    border-radius: 10px;
}
.tranquil-card video{
    width:300px;
    height: 300px;
    border-radius:20%;
}
/* bar is used for the Top Transparent Header  within a card*/
.tranquil-card .card-title {
    font-family: 'fontRegularEN', 'fontRegularENw', 'Lucida Sans', 'Lucida Sans Regular', 'Lucida Grande', 'Lucida Sans Unicode', Geneva, Verdana, sans-serif;
    font-size: 18px;
    text-align: center;
    background-color:transparent;
    left: 35%;
    color:#0D519F;
    filter: alpha(opacity=50); /* For IE8 and earlier */
    cursor: pointer;
    padding: 10px 10px 10px 10px;
}
.tranquil-card-icons{
    cursor:pointer;
    display: block;
    width:100%;
    height:auto;
    line-height: 0px;
}
.tranquil-card-icons a{
    font-size:140%;
    height: auto;
    color: white;
    float: left;
}
.tranquil-card-icons a:hover{
    font-size:21px;
    color: greenyellow;
}
.tranquil-card-section{
    display: block;
    width:20%;
    height:auto;
}
.tranquil-card-button{
    display:inline-block;
    padding:10px 10px 10px 10px;
    vertical-align:middle;
    overflow:hidden;
    text-decoration:none;
    text-align:center;
    cursor:pointer;
    white-space:nowrap;
    border-radius:5px;
    color:white!important;
    background-color:#0D519F;
    opacity: 0.5;
    filter: alpha(opacity=50); /* For IE8 and earlier */
    width:100%;
    margin-top: 2px;
    margin-bottom: 2px;
}
.tranquil-card-button{
    -webkit-touch-callout:none;
    -webkit-user-select:none;
    -khtml-user-select:none;
    -moz-user-select:none;
    -ms-user-select:none;
    user-select:none
}   
.tranquil-card-button:disabled{
    cursor:not-allowed;
    opacity:0.3
}
.tranquil-card-button:hover {
    color:#000!important;
    background-color:#ccc!important;
}


@media only screen and (min-width:2000px)  {

    .tranquil-card-icons a{
        font-size:180%;
        padding:8px 8px 8px 8px;
    }
    .tranquil-card .level1{
        overflow-x: auto;
        word-wrap: break-word;
        float:left;
        width:100%;
        height:90px;
    }
    .tranquil-card .level2{
        overflow-x: auto;
        word-wrap: break-word;
        float:left;
        width:100%;
        height:90px;
    }
}
@media only screen and (max-width:2000px)  {

    .tranquil-card-icons a{
        font-size:180%;
        padding:8px 8px 8px 8px;
    }
    .tranquil-card .level1{
        overflow-x: auto;
        word-wrap: break-word;
        float:left;
        width:100%;
        height:90px;
    }
    .tranquil-card .level2{
        overflow-x: auto;
        word-wrap: break-word;
        float:left;
        width:100%;
        height:90px;
    }
}

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

    h4{font-size:18px}
    h5{font-size:15px}
    h6{font-size:12px}
    .tranquil-card-icons a{
        font-size:100%;
        padding:8px 8px 8px 8px;
    }

}
@media only screen and (max-width:600px)  {
    .tranquil-card{
        width:100%;
        height:auto;
    }
    h4{font-size:18px}
    h5{font-size:15px}
    h6{font-size:12px}
    .tranquil-card-icons a{
        font-size:110%;
        padding:8px 8px 8px 8px;
    }
    .tranquil-col-20, .tranquil-col-30, .tranquil-col-60{
        float: left;
        width: 100%;
        display: block;
    }
}
@media only screen and (max-width:400px)  {
    .tranquil-card{
        margin-left: 30%;
        width:70%;
        height:auto;
    }
    h4{font-size:16px}
    h5{font-size:13px}
    h6{font-size:10px}
    .tranquil-card-icons a{
        font-size:120%;
        padding:6px 6px 6px 6px;
    }
    .tranquil-col-20, .tranquil-col-30, .tranquil-col-60{
        float: left;
        width: 100%;
        display: block;
    }
}
@media only screen and (max-width:200px)  {
    .tranquil-card{
        margin-left: 30%;
        width:70%;
        height:auto;
    }
    h4{font-size:16px}
    h5{font-size:13px}
    h6{font-size:10px}

    .tranquil-card-icons a{
        font-size:100%;
        padding:2px 2px 2px 2px;
    }
    .tranquil-col-20, .tranquil-col-30, .tranquil-col-60{
        float: left;
        width: 100%;
        display: block;
    }
 
}