@import '~assets/scss/_variables.scss';

.main-container {
    padding: 0 15px;
    text-align: left;
    .cc-header {
        color: $text-dark-color;
        font-size: 20px;
        line-height: 26px;
        padding: 40px 0;
        .right-align {
            text-align: right;
        }
    }
    .coach {
        height: 149px;
    }
    .rules {
        height: 310px;
    }
    .use-case {
        border-radius: 6px;
        background-color: #FFFFFF;
        box-shadow: 0 2px 9px 0 rgba(0,0,0,0.03);
        padding: 40px;
        min-height: 380px;
        .title {
            color: #002940;
            font-size: 19px;
            font-weight: 500;
            line-height: 25px;
            padding: 0 0 30px;
        }
        .theme {
            opacity: 0.7;
            color: #002940;
            font-size: 14px;
            line-height: 19px;
            padding: 0 0 15px;
        }
        .scenario {
            padding: 20px;
            .scenarios {
                opacity: 0.7;
                color: #002940;
                font-size: 13px;
                line-height: 18px;
            }
            div {
                display: inline-block;
            }
            .oval {	
                box-sizing: border-box;
                height: 12px;
                width: 12px;
                border: 2px solid #01CBFE;
                background-color: #FFFFFF;
                border-radius: 50%
            }
        }
    }
    .coach-details,.rules-list,.cc-details{
        border-radius: 6px;
        background-color: $default-white;
        box-shadow: 0 2px 9px 0 rgba(0,0,0,0.03);
        padding: 40px;
        .coach-disc{
            .name-initials{
                width: 50px;
                height: 50px;
                border-radius: 50%;
                background: #002940;
                opacity: 0.3;
                position: relative;
                span{
                    color:$default-white;
                    position: absolute;
                    top: 13px;
                    left: 13px;
                }
            }
            .display-inline{ display: inline-block};
            .coach-data{
                vertical-align: top;
                margin: 6px 10px;      
                .coach-name {
                    color: $text-dark-color;
                    font-family: Roboto;
                    font-size: 14px;
                    line-height: 19px;
                }
                .coach-email {
                    opacity: 0.7;
                    color: $text-dark-color;
                    font-family: Roboto;
                    font-size: 13px;
                    line-height: 18px;
                    text-align: center;
                }           
            }
        }
    }
    .cc-details{
        .cc-details-heading{
            span{
                font-weight: 400;
                opacity: 0.7;
                color: #002940;
                font-size: 13px;
                line-height: 16px;
            }
        }
    }    
    .b-margin{
        margin-bottom: 30px;
        padding-bottom: 25px;
    } 
    .heading-text{
        color: $text-dark-color;
        font-size: 19px;
        font-weight: 500;
    }
    .rule-heading{
        margin-bottom: 30px;
    }
    .rules-list{
        .rule-disc{
            p{
                opacity: 0.7;
                color: $text-dark-color;
                font-size: 13px;	
                line-height: 16px;
            }
        }
    }
    .desc-footer{
        border-radius: 6px;
        background-color: $default-white;
        box-shadow: 0 2px 9px 0 rgba(0,0,0,0.03);
        padding: 15px;        
        .launch-env-btn {
            height: 42px;
            width: 310px;
            border-radius: 21px;
            background-color: $light-blue;
            text-align: center;
            color: $default-white;
            border: 0.5px solid $light-blue;
            font-size: 14px;
            font-weight: 400;
            text-align: center;            
        }
    }
}