/* - body
- Alerts
- Requirements
- Page Footer
- Font Styles
- Paragraph and header style
- Navbar
- Modal Video
- Watch video buttons
- Image video buttons */
/* -------------- */
/* ---- BODY ---- */
/* -------------- */
body {
    background-color: rgb(256,256,256);

    /* font-family: 'Roboto', sans-serif; */
    font-family: Helvetica, sans-serif;

    color: rgb(0,0,0);
}

.bg-yanobox-sidebar {
    background-color: rgb(256,256,256);
}

.product-page-header {
    margin-top: 10px;
}

.content-title {
    margin-top: 70px;
    margin-bottom: 30px;
}

.subtitlecolored{

color: rgb(0,140,250);
letter-spacing: 0.0001rem;

}

.box-icon:before {
    content: "\f2da";
    display: inline-block;
    font-family: FontAwesome;
    position: absolute;
    right: -1.5em;
}

/* ---------------- */
/* ---- ALERT ---- */
/* --------------- */
.alert-warning {
    line-height: 1.4;
    font-size: 0.80rem;
}

/* ---------------------- */
/* ---- REQUIREMENTS ---- */
/* ---------------------- */
.compatible-hosts-row {
    margin-top: 20px;
}

.hosts-description {
    font-weight: 500;
    font-size: 0.8rem;
    letter-spacing: 0.006rem;
    color: hsl(0, 0%, 80%);
    padding: 0px;
    margin: 0px;
}

/* --------------------- */
/* ---- PAGE FOOTER ---- */
/* --------------------- */
/* @media (min-width:768px) {
    .dimmed-footer {

        left: 0;
        right: 0;
        width: 100%;
    }
} */
.text-footer {
    font-size: 0.7rem;
    color: hsl(0, 0%, 40%);
    padding-top: 10px;
    padding-left: 20px;
    padding-right: 20px;
}

/* ---------------------- */
/* ---- FONTS STYLES ---- */
/* ---------------------- */
/* 1rem = size defined from the root element of the page : <htlm> (generally font-size: 16px) */
/* 2rem = 16 X 2 = 32px */
.product-font {
    font-family: yanobox_productsregular, YanoboxProductsRegular, sans-serif;
}

/* xs - Extra-Small devices */
@media (min-width: 320px)  {
    .product-font-size-device {
        font-size: 50px;
        letter-spacing: -1px;
    }
}

/* sm - Small devices */
@media (min-width: 576px) {
    .product-font-size-device {
        font-size: 70px;
        letter-spacing: -1px;
    }
}

/* md - Medium devices */
@media (min-width: 768px) {
    .product-font-size-device {
        font-size: 70px;
        letter-spacing: -1px;
    }
}

/* lg - Large devices */
@@media (min-width: 992px) {
    .product-font-size-device {
        font-size: 70px;
        letter-spacing: -1px;
    }
}

/* ----------------------------------- */
/* ---- PARAGRAPH & HEADER STYLES ---- */
/* ----------------------------------- */
ol {
    list-style-type: decimal;
    line-height: 1.4;
    font-size: 0.80rem;
}

.blueColorText {
    color: rgb(100,180,256)!important;
}

p {
    line-height: 1.4;
    font-size: 1.0rem;
    margin-top: 1.4em ;
    margin-bottom: 1.4em ;

    /* 0.875rem = 14px */
}

p.tight {
    line-height: 1.4;
    font-size: 1.0rem;
    margin-top: 0.5em ;
    margin-bottom: 0.5em ;
}


p.small{
  line-height: 1.4;
  font-size: 1.0rem;
  margin-top: 0.5em ;
  margin-bottom: 0.5em ;

}
p.normal {
    font-weight: 200;
}

p.thick {
    font-weight: 500;
    line-height: 1.4;
}

h2 {
    color: rgb(200,200,200);
    padding: 0px;
    padding-top: 10px;
    font-size: 1.8rem;

    /* 0.875rem = 14px */
    font-weight: bold;
}

h3 {
    font-size: 1.3rem;

    /* 0.875rem = 14px */
    font-weight: bold;
    letter-spacing: 0.01rem;
    margin-top: 40px;
}
h4 {
    font-size: 0.9rem;

    /* 0.875rem = 14px */
    font-weight: bold;
    margin-top: 20px;
    margin-bottom: 20px;
}
h4,
h5,
h6 {
}

/* ---------------- */
/* ---- NAVBAR ---- */
/* ---------------- */
.navbar-custom .nav-item.active .nav-link,
.navbar-custom .navbar-hover  .nav-link  .nav-link-documentation {
    color: rgb(255,255,255);
}

.yanoboxDocNavBar {
    /* Main Yanobox navbar */
    background-color: rgb(000,000,000);
    font-weight: 600;
    font-size: 0.75rem;
    letter-spacing: 0.020rem;
}

.navbar-brand {
    /* Icon Product */
    padding-top: 12px;
    padding-right: 10px;
    margin-bottom: 20px;
}

.custom-toggler.navbar-toggler {
    border: none;
}

.nav-link {
    color: rgb(150,150,150);
    line-height: 0.9em;
}

.nav-link-documentation {
    padding-left: .2rem;
    font-size: 0.9rem;
    color: rgb(150,150,150);
    line-height: 1.6em;
    width: 11.5em;
    display: block;
    border-right: 2px solid transparent;
}

.nav-link-documentation:hover {
    text-decoration: none;
    color: rgb(255,80,80);
}

/* --------------------- */
/* ---- MODAL VIDEO ---- */
/* --------------------- */
.modal-dialog {
    max-width: 800px;
    margin: 30px auto;
}

.modal-body {
    position: relative;
    padding: 0px;
}

/* .modal-backdrop
{
    opacity:0.8 !important;
    background:none;
} */
.close {
    position: absolute;
    right: -30px;
    top: 0;
    z-index: 999;
    font-size: 2rem;
    font-weight: normal;
    color: #fff;
    opacity: 1;
}

/* ----------------------------- */
/* ---- WATCH VIDEO BUTTON---- */
/* ----------------------------- */
.watch-video-button-margin {
    margin-top: 30px;
    margin-bottom: 40px;
}

.watch-video-button {
    font-weight: 500;
    font-size: 1.2rem;
    color: rgb(251, 41, 11);
    border: none;
    background-color: rgba(0,0,0,0);
    padding: 0px;
}

.watch-video-button:hover {
    color: white;
    text-decoration: none;
}

.watch-video-button:visited {
    color: white;
    background-color: #e84d0e;
    text-decoration: none;
}

/* ----------------------------- */
/* ---- IMAGE VIDEO BUTTON---- */
/* ----------------------------- */
.image-video-button {
    position: relative;
    width: 100%;
}

.image-video-button img {
    width: 100%;
    height: auto;
}

.image-video-button .btn-special {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    -ms-transform: translate(-50%, -50%);
    background-color: rgba(0,0,0,0);
    color: rgba(220,220,220,1);
    border: none;
    cursor: pointer;
    text-align: center;
}

.container .btn-special:hover {
    background-color: rgba(0,0,0,0);
    color: rgba(256,256,256,1);
}

@media (min-width: 0px)  {
    .image-video-button .btn-special {
        font-size: 30px;
    }
}

/* sm - Small devices */
@media (min-width: 576px) {
    .image-video-button .btn-special {
        font-size: 40px;
    }
}

/* md - Medium devices */
@media (min-width: 768px) {
    .image-video-button .btn-special {
        font-size: 30px;
    }
}

/* lg - Large devices */
@@media (min-width: 992px) {
    .image-video-button .btn-special {
        font-size: 60px;
    }
}
/*---------------*/
/*---- CARDS ----*/
/*---------------*/
.card-deck,
.card,
.card-header {
    border: none;
    background: none;
}

.card {
    padding-top: 0px;
    padding-bottom: 0px;
    padding-right: 0px;
}

.card-header {
    padding-top: 0px;
    padding-bottom: 10px;
    padding-left: 0px;
    padding-right: 0px;
}

.card-body {
    padding-top: 0px;
    padding-left: 0px;
    padding-right: 0px;
}

.card-body.product {
    padding-top: 5px;
    padding-right: 0px;
}