/*
 * ==============================================
 * Custom Skin for oXygen generated WebHelp.
 * ==============================================
 */

/*
 * ------------------------------------------------------------------
 *  
 * Fonts.
 *  
 */

@import url('https://fonts.googleapis.com/css2?family=Montserrat:ital,wght@0,100..900;1,100..900&family=Noto+Sans:ital,wght@0,200;0,400;0,600;1,400&family=Poppins:ital,wght@0,100;0,200;0,300;0,400;0,500;0,600;0,700;0,800;0,900;1,400&family=Roboto:ital,wght@0,100;0,300;0,400;0,500;0,700;0,900;1,100;1,300;1,400;1,500;1,700;1,900&display=swap');

:root {
    --blue: unset;
    --indigo: unset;
    --purple: unset;
    --pink: unset;
    --red: unset;
    --orange: unset;
    --yellow: unset;
    --green: unset;
    --teal: unset;
    --cyan: unset;
    --white: unset;
    --gray: unset;
    --gray-dark: unset;
    --primary: unset;
    --secondary: unset;
    --success: unset;
    --info: unset;
    --warning: unset;
    --danger: unset;
    --light: unset;
    --dark: unset;
    --breakpoint-xs: 0;
    --breakpoint-sm: 576px;
    --breakpoint-md: 768px;
    --breakpoint-lg: 992px;
    --breakpoint-xl: 1200px;
    --font-family-sans-serif: unset;
    --font-family-monospace: SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono", "Courier New", monospace
}


/* fix scroll on index terms page */
@media (prefers-reduced-motion: no-preference) {
    :root {
        scroll-behavior: unset !important;
    }
}


html,
body {
    min-width: 100%;
}

body {
    font-family: 'Montserrat', serif;
    background-color: #f8f8f8;
    font-size: 16px;
}

.heading2 {
    font-family: 'Roboto', sans-serif;
    font-size: 1.5em;
    font-weight: 400;
    color: #8b5252;
    margin: 1.1em 0 1.1em 0;
}


.heading3 {
    font-family: 'Roboto', sans-serif;
    font-size: 1.3em;
    font-weight: bold;
    color: #333;
    margin: 1.1em 0 1.1em 0;
}

.tableheading {
    font-family: 'Roboto', sans-serif;
    font-size: 1.3em !important;
    font-weight: bold;
    color: #333;
    margin: 1.3em 0 0 0;
}

ol.number-alpha {
    list-style-type: upper-alpha;
}

/*
     * ------------------------------------------------------------------
     *
     * Bootstrap
     *
     */
.navbar-brand {
    height: auto;
}
.navbar {
    border: none;
    border-radius: 0;
    margin: 0;
    background: #f8f8f8;
}
.wh_header {
    background: #000 none;
    color: #ffffff;
}
a,
a:hover,
a:visited {
    color: #528b8b;
}
a:hover {
    color: #396161;
    text-decoration: underline;
}

/* background color for arrow-up icon */
#go2top {
    background-color: #8b5252;
}

code {
    color: #000;
}

.hr-releasenotes {
    border-top: 1px dashed #3F3F3F;
    margin-top: 2em;
    margin-bottom: 2em;
}


/*
 * ------------------------------------------------------------------
 *  
 * Publication titles
 *  
 */
.wh_publication_title > a {
    color: #fff;
    font-size: 20px;
}

.wh_publication_title > a:hover {
    text-decoration: none;
}

/* Headings */

.smallheading {
    font-weight: 700;
    font-size: 1.2em;
    color: #3f3f3f;
    margin: 1.1em 0 1.1em 0;
}

.tableheading2 {
    font-weight: 700;
    font-size: 1em !important;
    color: #3f3f3f;
    margin: 1.1em auto 0;
}

.tableheading3 {
    font-weight: 700;
    font-size: 1em !important;
    color: #3f3f3f;
    margin: 0 auto;
}

.heading1 {
    font-size: 1.7em;
    font-family: 'Roboto', sans-serif;
    font-weight: bold;
    color: #000;
    margin: 1.1em 0 1.1em 0;
}

/* screenshots */
.screenshot-figure {
    margin-top: 0;
    padding-top: 0;
    margin-bottom: 2em;
    background: white;
    border: 1px solid #777;
}

.screenshot-figure2 {
    margin-top: 0;
    padding-top: 0;
    margin-bottom: 0.9em;
    background: white;
    border: 1px solid #777;
}

.screenshot-figure3 {
    margin-top: 0.9em;
    padding-top: 0;
    margin-bottom: 0.9em;
    background: white;
    border: 1px solid #777;
}

.screenshot-figure4 {
    margin-top: 0;
    padding-top: 0;
    margin-bottom: 0;
    background: white;
    border: 1px solid #777;
}

.screenshot-figure5 {
    margin-top: 0.7em;
    background: white;
    border: 1px solid #777;
}


/*
 * ------------------------------------------------------------------
 *  
 * Menu
 *  
 */
.wh_top_menu {
    text-transform: unset;
    font-family: 'Montserrat', serif;
    margin: .4em 0;
    font-size: 0.9em;
}
.wh_top_menu a {
    color: #fff;
    line-height: 2em;
}

/* The submenus */
.wh_top_menu ul ul {
    background-color: #8fbcbc;
}

.wh_top_menu:not(.activated-on-click) ul:hover li,
.wh_top_menu:not(.activated-on-click) ul li:hover {
    /* WH-2521 Change the background color imediatelly when the current menu item (li) or other menu item is hovered. */
    transition: none;
}

.wh_top_menu:not(.activated-on-click) ul li {
    /* WH-2521 Delay the background color change on hover off. */
    transition: background-color 0.05s 0.05s;
}

.wh_top_menu ul li:hover,
.wh_top_menu.activated-on-click ul li.active {
    background-color: #8fbcbc;
    transition: 0.05s;
}
.wh_top_menu ul ul li a:hover {
    background: #528b8b;
}
.wh_top_menu ul ul li {
    border-top-color: #999;
    width: 270px;
    text-transform: unset;
}
.wh_top_menu ul ul li.has-children:after {
}

/* figures */

.figdesc {
    font-style: italic;
    font-weight: bold;
}

/* new logout button */


.logout-button {
    background-color: #8b5252;
    border-radius: 3px;
    margin-left: 1.4em;
    padding: .6em 1em;
    text-align: center;
    display: inline-block;
    color: #fff;
    font-family: 'Montserrat', serif;
    font-size: 14px;
    line-height: 1.2em;
    text-transform: uppercase;
    /* margin: 4px 2px; */
    cursor: pointer;
    box-shadow: 2px 2px 3px rgba(0, 0, 0, 0.2);
}

.logout-button > a {
    color: #fff !important;
}

.logout-button > a:hover {
    text-decoration: none;
}

.logout-button:hover {
    color: #fff;
    background-color: #682b2b;
}


#loading {
    font-size: 0;
    position: fixed;
    width: 100%;
    height: 100vh;
    background: #fff url('../resources/images/dual-ring-loader.gif') no-repeat center center;
    background-size: 70px;
    z-index: 9999;
}

/*
 * ------------------------------------------------------------------
 *  
 * Link to the index.
 * 
 */
.wh_indexterms_link a span {
    display: none;
}
.wh_indexterms_link a:before {
    color: #fff;
}


/*
 * ------------------------------------------------------------------
 *  
 * Breadcrumb
 *  
 */
.wh_breadcrumb ol {
    color: #878787;
}
.wh_breadcrumb ol a {
    color: inherit;
}
.wh_breadcrumb ol .active {
    color: #528b8b;
    font-weight: 500;
}

.wh_breadcrumb > ol > li > div.topicref.navtitle {
    font-weight: normal;
}

span.home {
    color: #3F3F3F !important;
    font-weight: normal;
}

span.home:before {
    font-family: 'Font Awesome 6 Free';
    font-style: normal;
    content: "\f015";
    display: inline-block;
    margin-right: .4em;
    vertical-align: baseline;
}



/*
 * ------------------------------------------------------------------
 *  
 * Header styles
 * 
 */

.wh_header {
    background: #528b8b none;
    color: #fff;
}

/*s
 * ------------------------------------------------------------------
 *  
 * Tools and navigation
 * 
 */
.wh_tools {
    background-color: #f8f8f8;
    margin: 1em 0 2em;
    border-bottom: 1px dashed #bfbfbf;
}

.wh_breadcrumb li:not(:last-of-type):after {
    content: ">";
    padding: 0 5px;
}

.wh_print_link,
.wh_navigation_links,
.wh_navigation_links .navnext,
.wh_navigation_links .navprev {
}

.webhelp_expand_collapse_sections,
.wh_hide_highlight,
.wh_print_link button,
.oxy-icon-pdf-link,
.wh_navigation_links a,
.wh_navigation_links a:hover,
.wh_navigation_links a:active,
.wh_navigation_links a:visited,
.wh_print_link a:before,
.wh_navigation_links a:before,
.wh_navigation_links a:hover:before,
.wh_navigation_links a:active:before,
.wh_navigation_links a:visited:before {
    color: #528b8b;
    text-decoration: none;
}

/* Tiles */


.wh_content_flex_container {
    align-items: stretch;
    display: flex;
    flex-direction: column;
    flex-wrap: nowrap;
    justify-content: space-around
}

.wh_tiles {
    align-content: stretch;
    align-items: stretch;
    display: flex;
    flex-direction: row;
    flex-wrap: wrap;
    /* justify-content: space-between; */
    justify-content: flex-start;
}

.wh_tile {
    margin: 1em;
    min-height: 140px;
    min-width: 300px;
    padding: 1em;
    width: 30%;
    box-shadow: 0px 2px 4px -1px rgba(0, 0, 0, 0.2), 0px 1px 2px 0px rgba(0, 0, 0, 0.14), 0px 1px 2px 0px rgba(0, 0, 0, 0.18);
    background-color: #fff;
    border-radius: 5px;
    border: transparent;
}

@media only screen and (max-width : 1200px) {
    .wh_tile {
        width: 45%
    }
}

@media only screen and (max-width : 767px) {
    .wh_tile {
        min-width: 240px;
        width: 100%
    }
}

.wh_tile_image {
    padding-bottom: .5em;
    text-align: center;
}

.wh_tile_title {
    color: #528b8b;
    line-height: normal;
    font-family: 'Roboto', sans-serif;
    font-size: 20px;
    font-weight: 500;
}

.wh_tile_title a {
    color: #528b8b;
}

.wh_tile_shortdesc {
    color: #5d6778;
    font-family: 'Montserrat', serif;
    font-size: 15px;
    margin-top: .3em;
}

@media only screen and (max-width : 767px) {
    .wh_tile_text:after {
        display: none
    }
}

.wh_tile_text {
    height: 100%;
    overflow: hidden;
    position: relative
}

.wh_tile_title span {
    line-height: 1.2em
}

.wh_tile_title a,
.wh_tile_title span {
    display: block;
    width: 100%
}

@media only screen and (max-width : 767px) {
    .wh_tile_text:after {
        display: none
    }
}


/*
 * ------------------------------------------------------------------
 *  
 * Search area
 * 
 */
.wh_search_input {
    display: block;
    margin: 0;
    position: relative;
    /*  background: #8fbcbc; */
    background: url("../resources/images/ERXCoreBanner.png") no-repeat;
    background-size: cover;
    padding-top: 20px;
    padding-bottom: 20px;
            background-color: #e2eded;
    background-blend-mode: lighten, hard-light;
}



/* set to display: none; when empty to remove extra space above the search bar */
.wh_welcome:not(:empty) {
    display: none;
    /* font-size: 2.5em;
    margin: 0 auto;
    padding: 0 0 .5em 0;
    text-shadow: none;
    040480 */

}

.wh_main_page .wh_search_input {
    padding-top: 20px;
    padding-bottom: 20px;
    /* background: #8fbcbc; */
    background: url("../resources/images/ERXCoreBanner.png") no-repeat;
    background-size: cover;
            background-color: #e2eded;
    background-blend-mode: lighten, hard-light;
}
.wh_search_textfield {
    border: solid 1px #CCC;
    border-radius: 5px;
    padding: 0 .5em;
    position: relative;
    height: 2.8em;
}

.wh_search_textfield::placeholder {
    content: 'Search the ERX Core guide' !important;
}

.wh_search_button {
    border: solid 1px #CCC;
    border-radius: 0 5px 5px 0;
    padding: 0.6em 1em;
    color: #fff;
    background-color: #8b5252;
    height: 2.8em;
}

.wh_search_button:hover {
    background-color: #682b2b;
}

/* Search autocomplete icons */
.search-autocomplete-proposal-type-history a,
.search-autocomplete-proposal-type-history a:hover,
.search-autocomplete-proposal-type-history a:visited,
.search-autocomplete-proposal-type-history a:active {
    text-decoration: none;
    color: inherit;
    font-size: 0.8em;
}
.ui-state-active .search-autocomplete-proposal-type-history a,
.ui-state-active .search-autocomplete-proposal-type-history a:hover,
.ui-state-active .search-autocomplete-proposal-type-history a:visited,
.ui-state-active .search-autocomplete-proposal-type-history a:active {
    color: #fff;
}

/* Active search page */
#wh-search-pagination > ul > li.active > a {
    background-color: #346ec5;
}

/*@media only screen and (max-width: 999px) {*/
/*.wh_search_input:after{*/
/*display:none;*/
/*}*/

/*}*/

@media only screen and (max-width : 767px) {
    .wh_main_page .wh_search_input,
    .wh_search_input {
        padding: 3em 0;
    }

    .header-sticky {
        position: relative;
    }
}


/*
 * ------------------------------------------------------------------
 *  
 * Publication TOC
 * 
 */

.wh_publication_toc {
    border-radius: 3px;
    padding: 1.5em .5em;
    background-color: #f8f8f8
}

.wh_publication_toc .active > .topicref a {
    color: #528b8b;
    font-weight: normal;
}
.wh_publication_toc div,
.wh_publication_toc a,
.wh_publication_toc a:visited,
.wh_publication_toc a:hover {
    color: #878787;
}
.wh_publication_toc a:hover {
    color: #396161;
    text-decoration: underline;
}

.wh_publication_toc ul li,
#wh_topic_toc ul li {
    margin-top: .7em;
}

@media only screen and (max-width : 767px) {
    .wh_publication_toc {
        border-radius: 0;
        padding: 1em 0.5em;
        margin-top: 10px;
        border: 1px solid #e0e0e0;
    }

    .wh_related_links,
    .wh_child_links,
    .wh_topic_content .related-links {
        border: 1px solid #e0e0e0;
    }
}

/* Navtitles (TOC nodes that don't link to pages) */

.navtitle {
    font-weight: bold;
}

/* Publication TOC tooltip */
.wh_breadcrumb .topicref .wh-tooltip,
.wh-toc-tooltip {
    display: none;
}

#wh_topic_toc {
    font-weight: normal;
}


/*
 * ------------------------------------------------------------------
 *
 * Footer
 * 
 */
.wh_footer {
    margin-bottom: 0;
    margin-top: auto;
    padding: 1.5em;
    background-color: #5c5c5c;
    color: #fff;
    text-align: center;
    width: 100%;
    position: relative;
    left: 0;
    bottom: 0;
}

.wh_footer a {
    color: #CCE2F1;
}


/*
 * ------------------------------------------------------------------
 *  
 * Topic content
 * 
 */
.wh_topic_content,
.wh_content_area {
    color: #000000;
    line-height: 1.7em;
    margin-bottom: 80px;
}

/*  
.wh_topic_content p {
    font-size: 16px; 
}*/

.wh_topic_content p.heading2 {
    font-size: 1.5em;
    font-weight: 400;
    font-family: 'Roboto', sans-serif;
    color: #8b5252;
    margin: 1.1em 0 1.1em 0;
}


.wh_topic_content p.heading3 {
    font-size: 1.3em;
    font-weight: bold;
    color: #333;
    margin: 1.1em 0 1.1em 0;
}


.wh_topic_content p > a {
    font-size: 16px;
}

/* 
.wh_topic_content ol {
    font-size: 16px;
}  */

.wh_topic_content ol > a {
    font-size: 16px;
}

.wh_topic_content ul {
    font-size: 16px;
}

.wh_topic_content ul > a {
    font-size: 16px;
}

.wh_main_page .wh_content_area {
    margin: 0;
}
.wh_topic_content .title.topictitle1 {
    font-size: 2em;
    line-height: 1.1em;
}

.topictitle3,
.topictitle4,
.topictitle5,
.topictitle6 {
    font-weight: 400;
}

.wh_related_links .related-links,
.wh_topic_content .related-links,
.wh_child_links {
    border-top: 1px solid #ccc;
    padding-top: 7px;
    margin-top: 0;
}

.wh_related_links .related-links,
.wh_topic_content .related-links {
    padding: .5em 1.5em;
}

.wh_child_links {
    padding: 1.5em;
}

.related-links strong {
    font-weight: 700;
}

.related-links a,
.related-links a:visited {
    color: #528b8b;
}

.filepath {
    color: #c7254e;
}

/*
 * ------------------------------------------------------------------
 *  
 * Search results.
 * 
 */
.searchresult {
    list-style: none;
}

.searchresult li a {
    color: #528b8b;
    font-family: 'Roboto', sans-serif;
}
.searchresult .shortdesclink {
    margin: .3em .5em 0 0;
}
.wh_search_expression {
    font-weight: bold;
}

/* Search relative path */
.searchresult li .relativePath a {
    color: #006621;
}

/*--------- Search results breadcrumb ---------- */
.search-breadcrumb li a {
    background: #d4edee;
    color: #146868;
}
.search-breadcrumb li .title:before,
.search-breadcrumb li .title:after {
    border-color: #d4edee;
}
.search-breadcrumb li .title:before {
    border-left-color: transparent;
}
.search-breadcrumb li .title:after {
    border-color: transparent;
    border-left-color: #d4edee;
}


/*--------- Search results breadcrumb ----------
.search-breadcrumb li a {
    background: #ECF2F9;
}
.search-breadcrumb li .title:before,
.search-breadcrumb li .title:after {
    border-color: #ECF2F9;
}
.search-breadcrumb li .title:before {
    border-left-color: transparent;
}
.search-breadcrumb li .title:after {
    border-color: transparent;
    border-left-color: #ECF2F9;
} */

/*  
.white-link {
    color: white;
}*/

#wh-search-pagination > ul > li.active > a {
    background-color: #528b8b;
}

.page-item.active .page-link {
    background-color: #528b8b;
    border-color: #528b8b;
    color: #fff;
    z-index: 3;
}

.page-link {
    background-color: #fff;
    border: 1px solid #d1dcdc;
    color: #528b8b;
    display: block;
    line-height: 1.25;
    margin-left: -1px;
    padding: .5rem .75rem;
    position: relative;
}

a.page-link:hover {
    color: #528b8b;
}

a.page-link:active {
    color: #528b8b;
}

/* hover on search results */
.ui-button.ui-state-active:hover,
.ui-button:active,
.ui-state-active,
.ui-widget-content .ui-state-active,
.ui-widget-header .ui-state-active,
a.ui-button:active {
    background: #528b8b;
    border: 1px solid #005650;
    color: #fff;
    font-weight: 400
}

/*
 * ------------------------------------------------------------------
 *  
 * Index terms.
 * 
 */
.wh_index_terms span.wh_first_letter {
    color: #528b8b;
}
.wh_index_terms #indexList {
    padding: 0;
}

/* change hamburger (mobile) button to green */
.custom-toggler .navbar-toggler-icon {
    background-image: url('../resources/svgs/hamburger.svg') !important;
}

.custom-toggler {
    border-color: #528b8b !important;
}

/*
 * ------------------------------------------------------------------
 * Disable sticky header only on index terms page
 */

.wh_terms_page > header {
    position: relative;
}

.indexTerms-sticky {
    position: unset;
}


/* wh logo and publication title */
.wh_logo_and_publication_title {
    align-items: center;
    display: flex;
    justify-content: space-around;
}

/* RAD navigator home */
.RNhome {
    margin-bottom: .4em;
    margin-right: 1em;
    border: 0px;
}

/*
 * ------------------------------------------------------------------
 *  
 * Fix logo spacing and search button visibility & center logo on small screens
 */

.wh_logo + .wh_publication_title {
    margin-left: .5em
}

.wh_publication_title > a {
    display: none;
}

.wh_logo {
    display: block !important;
}

@media only screen and (max-width : 767px) {
    .wh_search_button {
        display: block;
    }
}

@media only screen and (max-width : 767px) {
    .wh_logo_and_publication_title_container {
        align-content: center;
        align-items: center;
        align-self: stretch;
        display: flex;
        flex-wrap: wrap;
        justify-content: space-around;
        width: 85%;
    }
}

/* Show logo title (tooltip) on mobile screens */

@media (pointer : coarse), (hover : none) {
    [title] {
        position: relative;
        display: inline-flex;
        justify-content: center;
    }
    [title]:focus::after {
        content: attr(title);
        position: absolute;
        top: 90%;
        color: #000;
        background-color: #fff;
        border: 1px solid;
        width: fit-content;
        padding: 3px;
    }
}

/* Note SVGs */

div.note {
    background-image: url('../resources/svgs/oxygenxml/note.svg');
    background-repeat: no-repeat
}
div.warning {
    background-image: url('../resources/svgs/oxygenxml/warning.svg')
}

div.caution {
    background-image: url('../resources/svgs/oxygenxml/caution.svg')
}

div.trouble {
    background-image: url('../resources/svgs/oxygenxml/troubleshooting.svg')
}

div.important {
    background-image: url('../resources/svgs/oxygenxml/important.svg')
}

div.attention {
    background-image: url('../resources/svgs/oxygenxml/attention.svg')
}

div.notice {
    background-image: url('../resources/svgs/oxygenxml/notice.svg')
}

div.remember {
    background-image: url('../resources/svgs/oxygenxml/remember.svg')
}

div.fastpath {
    background-image: url('../resources/svgs/oxygenxml/fastpath.svg')
}

div.restriction {
    background-image: url('../resources/svgs/oxygenxml/restriction.svg')
}

div.danger {
    background-image: url('../resources/svgs/oxygenxml/danger.svg')
}

div.tip {
    background-image: url('../resources/svgs/oxygenxml/tip.svg')
}


div.note > span.note__title {
    font-weight: 700
}

[dir = ltr] div.note,
[dir] [dir = ltr] div.note,
[dir] [dir] [dir = ltr] div.note,
[dir] [dir] [dir] [dir = ltr] div.note,
[dir] [dir] [dir] [dir] [dir = ltr] div.note,
[dir] [dir] [dir] [dir] div.note[dir = ltr],
[dir] [dir] [dir] div.note[dir = ltr],
[dir] [dir] div.note[dir = ltr],
[dir] div.note[dir = ltr],
div.note,
div.note[dir = ltr] {
    background-position: .5em .5em;
    padding: .75em .5em .75em 3em
}

@media screen {
    [dir = rtl] div.note,
    [dir] [dir = rtl] div.note,
    [dir] [dir] [dir = rtl] div.note,
    [dir] [dir] [dir] [dir = rtl] div.note,
    [dir] [dir] [dir] [dir] [dir = rtl] div.note,
    [dir] [dir] [dir] [dir] div.note[dir = rtl],
    [dir] [dir] [dir] div.note[dir = rtl],
    [dir] [dir] div.note[dir = rtl],
    [dir] div.note[dir = rtl],
    div.note[dir = rtl] {
        background-position: top .5em right .5em;
        padding: .75em 3em .75em .5em
    }
}

@media print {
    [dir = rtl] div.note,
    [dir] [dir = rtl] div.note,
    [dir] [dir] [dir = rtl] div.note,
    [dir] [dir] [dir] [dir = rtl] div.note,
    [dir] [dir] [dir] [dir] [dir = rtl] div.note,
    [dir] [dir] [dir] [dir] div.note[dir = rtl],
    [dir] [dir] [dir] div.note[dir = rtl],
    [dir] [dir] div.note[dir = rtl],
    [dir] div.note[dir = rtl],
    div.note[dir = rtl] {
        background-position: 99% .5em;
        padding: .75em 3em .75em .5em
    }
}

div.note.note_other {
    background-image: none
}

/* Fix new Bootstrap issue in header oxyenxml v27.1 */

.navbar-nav {
    --bs-nav-link-padding-x: 0;
    --bs-nav-link-padding-y: 0.5rem;
    --bs-nav-link-font-weight: normal;
    --bs-nav-link-color: var(--bs-navbar-color);
    --bs-nav-link-hover-color: var(--bs-navbar-hover-color);
    --bs-nav-link-disabled-color: var(--bs-navbar-disabled-color);
    display: flex
    ;
    flex-direction: row;
    list-style: none;
    margin-bottom: 0;
    padding-left: 0;
}

@media only screen and (max-width : 767px) {
    .navbar-nav {
        flex-direction: column;
    }
}

/* Fix Vimeo embeds */

.embed-responsive {
  background-color: transparent !important;
  position: relative;
  display: block;
  width: 100%;
  padding: 0;
  overflow: hidden;
}

.embed-responsive::before {
  display: block;
  content: "";
}
.embed-responsive-16by9::before {
  padding-top: 56.25%; /* 9 / 16 = 0.5625 */
}

.embed-responsive-item {
  position: absolute;
  top: 0;
  left: 0;
  bottom: 0;
  width: 100%;
  height: 100%;
  border: 0;
}

iframe {
  width: 90% !important;
  height: 90% !important;
  border: 0;
}


@media only screen and (max-width : 767px) {
    iframe {
    width: 100% !important;
    height: 100% !important;
    }
}