@import url('https://fonts.googleapis.com/css?family=Open+Sans:400,700');
body{
    font-family: 'Open Sans', sans-serif;
    color: #748794;
    font-size: 14px;
}

/* Landing page Styles */
h1{
    font-size: 30px;
    color: #000000;
    margin-bottom: 2rem;
}

.background{
    padding: 10px 15px;
    position: relative;
}
.main-header{
    background: #389ae5;
    color: white;
    padding: 0 15px 60px 15px;
}
.main-content{
    background: #f5f7f7;
    border-bottom: 1px #e2e9e9 solid;
    padding: 105px 15px 40px 15px;
}

.main-content p{
    font-size: 18px;
    margin-bottom: 2rem;
}
.main-footer p{
    margin: 0;
}
#app-logo{
    display: block;
    width: 130px;
    height: 130px;
    position: absolute;
    top: 25px;
    left: 0;
    right: 0;
    margin: auto;
    z-index: 9;
    background-image: url(images/benutech-logo.jpg);
    background-repeat: no-repeat;
    background-size: 100% 100%;
    border-radius: 8px;
    box-shadow: 0 0 8px #808080;
}
.logo-img{
    max-width: 145px;
    max-height: 83px;
    margin: auto;
    display: inherit;
}
.form-control {
    height: calc(2.25rem + 8px);
    border: 1px solid #c9d2d6;
    border-radius: 0;
}
.btn-success{
    padding: .7rem .75rem;
    border-radius: 4px;
    background: #92d400;
    border: 1px #80b900 solid;
}

.btn-primary{
    background: #3d9ce2;
    padding: 8px 30px;
}
.btn-disabled{
    padding: 8px 30px;
}
.form-control::placeholder { /* Chrome, Firefox, Opera, Safari 10.1+ */
    color: #99a4ac;
    opacity: .5; /* Firefox */
}

.form-control::-ms-input-placeholder { /* Internet Explorer 10-11 */
    color: #99a4ac;
}

.form-control::-ms-input-placeholder { /* Microsoft Edge */
    color: #99a4ac;
}

.box-center {
    max-width: 900px;
}

#connectionSection__exit {
    padding-top: 7px;
    padding-bottom: 7px;
}

.waitSection__message {
    float: none;
    margin: 0 auto;
    text-align: center;
}

#connectionSection__submit {
    padding: 0.7rem 1.3rem;
}

/* modals Styles */

#ttb-sdk--sponsor-tos-modal .modal-dialog{
    max-width: 500px !important;
}
.modal-content{
    box-shadow: none;
}

.modal-header{
    text-align: center;
    background: #f8fafb;
    border-radius: 8px 8px 0 0
}
.modal-title{
    width: 100%;
    color: #2e4250;
    font-size: 25px;
    line-height: 32px;
}
.form-check-label{
    font-weight: 400;
}
.modal-title p{
    margin-bottom: 0;
}
.close {
    font-size: 1rem;
    opacity: .5;
}

#changeSponsor__change {
    font-weight: 600;
}
a{
    text-decoration: underline;
    color: #3d9ce2;
}
.modal-backdrop.show{
    opacity: .5;
}
.box-center{
    margin: 0 auto !important;
    float: none;
}
/* functionality styles */
/**[readonly] {*/
    /*cursor: not-allowed;*/
/*}*/

/* widgets specific styles */
#changeSponsor__wrapper{
    margin-bottom: 20px;
}
#changeSponsor__description {
    font-size: 18px;
}
#changeSponsor__description, #changeSponsor__controls{
    margin-bottom: 15px;
    text-align: center;
}
#changeSponsor__change i{
    margin-left: 10px;
    color: #ffffff;
}

/* default visibility for sections */
#waitSection, #widgetsSection, #connectionSection {
    display: none;
}
#sponsor-logo, #vendor-logo{
    /*display: table;*/
    display: none;
    margin: auto;
}
.logos-box{
    max-width: 900px;
    margin: 0 auto;
    position: relative;
}
.side-logo{
    width: 160px;
    min-height: 100px;
    background: #ffffff;
    position: absolute;
    top: 25px;
    border-radius: 3px;
    display: flex;
    z-index: 2;
    padding: 8px;
}
.left-side-logo{
    left: 0;
}
.right-side-logo{
    right: 0;
}
.side-logo-labels{
    position: absolute;
    top: -10px;
    background: #000;
    color: #ffffff;
    padding-right: 8px;
    padding-left: 6px;
    border-radius: 10px;
    text-transform: uppercase;
}

/* temp */

/* SDK/Landing overwrites -- starts */
.ttb-sdk--select-sponsor--selected {
    padding-right: 17px;
}
/* SDK/Landing overwrites -- ends */


/* ===== RESPONSIVE - SCREEN SPECIFICS ====== starts */

/* start of desktop styles */
@media screen and (max-width: 991px) {
    .left-side-logo{
        left: 10%;
    }
    .right-side-logo{
        right: 10%;
    }
}

/* start of medium tablet styles */
@media screen and (max-width: 767px) {

    #app-logo{
        width: 100px;
        height: 105px;
        bottom: -55px;
    }
    .side-logo{
        width: 145px;
        min-height: 75px;
    }
    .left-side-logo{
        left: 5%;
    }
    .right-side-logo{
        right: 5%;
    }
    .logo-img {
        max-width: 130px;
        max-height: 75px;
    }

    .container-fluid.main-content{
        padding-top: 56px;
    }
    h1{
        font-size: 20px;
    }
    #changeSponsor__description {
        font-size: 14px;
    }
}

/* start of phone styles */
@media screen and (max-width: 479px) {
    #app-logo{
        width: 70px;
        height: 70px;
        bottom: -64px;
    }
    .side-logo{
        width: 125px;
        min-height: 70px;
    }
    .left-side-logo{
        left: 2%;
    }
    .right-side-logo{
        right: 2%;
    }
    .logo-img{
        max-width: 110px;
        max-height: 65px;
    }
}
/* ===== RESPONSIVE - SCREEN SPECIFICS ====== ends */