/*
Theme Name:   Kubio Child Online Templates
Theme URI:    https://kubiobuilder.com/kubio-theme/
Description:  Kubio is an innovative,  easily customizable, multi-purpose theme, focused on empowering users to build astonishing WordPress websites. Kubio is mainly designed for small businesses, startups, or personal portfolio websites and works perfectly with Kubio Page Builder which enriches the WordPress block editor with a variety of new blocks and advanced styling options to give you full design freedom.
Author:       Extend Themes
Author URI:   https://kubiobuilder.com
Template:     kubio
Version:      1.0.18
Text Domain:  onlinetemplates
*/ 
 
/* Add your custom styles here */
 

    .checklist-table {
        width: 100%;
        border-collapse: collapse;
    }
 
    .checklist-table td {
        border: 1px solid white;
        padding: 8px;
        text-align: left;
	vertical-align: top;
    }
 
    .mandatory-title, .optional-title {
        font-weight: bold;
        color: #00205b;
        padding-top: 10px;
    }
 
 
    .sub-checklist-table td {
	        margin-top: 0px; margin-bottom: 0px;
		padding-top: 0px; padding-bottom: 0px;
		border: 1px solid gray;
		text-align: center;
		width: 180px;
    }
 
    .sub-checklist-table {
	margin-left:25px;
	}
 
 
 
/* Style the tab */
.tab {
  overflow: hidden;
  border: 1px solid #ccc;
  background-color: #f1f1f1;
}
 
/* Style the buttons inside the tab */
.tab button {
  background-color: inherit;
  float: left;
  border: none;
  outline: none;
  cursor: pointer;
  padding: 14px 16px;
  transition: 0.3s;
  font-size: 17px;
}
 
/* Change background color of buttons on hover */
.tab button:hover {
  background-color: #ddd;
}
 
/* Create an active/current tablink class */
.tab button.active {
  background-color: #ccc;
}
 
/* Style the tab content */
.tabcontent {
  display: none;
  padding: 6px 12px;
  border: 1px solid #ccc;
  border-top: none;
}
 
/* ******************************************************************************************************** */
/* ********************************************* PDF embed ***************************************** */
/* ******************************************************************************************************** */
 
.pdfembedresize {
width: 50%; color:red;
}
 
@media (max-width: 767px) {
.pdfembedresize {width:100%;}
}
 
/* ******************************************************************************************************** */
/* ********************************************* Copy/Paste Links ***************************************** */
/* ******************************************************************************************************** */
 
 
.copy-link {
    color: blue; /* Change to your desired color */
    text-decoration: underline; /* Underline to indicate it's a link */
}
 
.copy-link:hover {
    cursor: pointer; /* Change the cursor to pointer */
 
}
 
 
/* ******************************************************************************************************** */
/* ********************************************* Tutoriel Header ****************************************** */
/* ******************************************************************************************************** */
 
.tutorial {
background-color: #1C2B87;
width: 100%;
}
 
.tutorial ul {
  list-style-type: none;
  margin-top: 20px;
  margin-bottom: 40px;
  padding: 0px;
  overflow: hidden;
  background-color: #1C2B87;
}
 
.tutorial ul li {
  float: left;
  margin: 0px;
}
 
.tutorial ul .onedrop a, .tutorial ul .dropbtn {
  text-decoration: none;
  display: inline-block;
  color: white;
  text-align: center;
  padding: 24px 26px;
}
 
.tutorial ul .onedrop a:hover, .tutorial ul .dropdown:hover .dropbtn {
  background-color: #6699FF;
  transition-duration: 1s;
  color: white;
}
 
.tutorial li.dropdown {
  display: inline-block;
}
 
.tutorial ul .dropdown .dropdown-content {
  display: none;
  position: absolute;
  background-color: #1C2B87;
  min-width: 160px;
  box-shadow: 0px 8px 16px 0px rgba(0,0,0,0.2);
  z-index: 1;
  font-family: Roboto, Helvetica, Arial, Sans-Serif, serif;
  font-weight: 400;
}
 
.tutorial ul .dropdown .dropdown-content a {
  text-decoration: none;
  padding: 12px 16px;
  display: block;
  text-align: left;
  color: white;
 
}
 
.tutorial ul .dropdown .dropdown-content a:hover {
  background-color: #6699FF;   transition-duration: 1s;
}
 
.tutorial .dropdown:hover .dropdown-content {
  display: block;
}
 
/* ******************************************************************************************************** */
/* ********************************************* PAGE LOADER ********************************************** */
/* ******************************************************************************************************** */
 
/* Center the loader */
#loader {
  margin: auto;
  margin-bottom: 25px;
  width: 120px;
  height: 120px;
  border: 16px solid #f3f3f3;
  border-radius: 50%;
  border-top: 16px solid #3498db;
  -webkit-animation: spin 2s linear infinite;
  animation: spin 2s linear infinite;
}
 
@-webkit-keyframes spin {
  0% { -webkit-transform: rotate(0deg); }
  100% { -webkit-transform: rotate(360deg); }
}
 
@keyframes spin {
  0% { transform: rotate(0deg); }
  100% { transform: rotate(360deg); }
}
 
/* Add animation to "page content" */
.animate-bottom {
  position: relative;
  -webkit-animation-name: animatebottom;
  -webkit-animation-duration: 1s;
  animation-name: animatebottom;
  animation-duration: 1s
}
 
@-webkit-keyframes animatebottom {
  from { bottom:-100px; opacity:0 } 
  to { bottom:0px; opacity:1 }
}
 
@keyframes animatebottom { 
  from{ bottom:-100px; opacity:0 } 
  to{ bottom:0; opacity:1 }
}
 
 
 
/* ************************************************************************************************* */
/* ********************************** ADD STYLE TO THE PAGES/POSTS ********************************* */
/* ************************************************************************************************* */
 
 
.roboto-input {padding-top: 20px;}
 
.roboto-input p { font-family: Roboto !important; font-size: 18px !important; font-weight: 300 !important; color: #2B2D42; }
 
.roboto-input ul, ol { font-family: Roboto !important; font-size: 18px !important; font-weight: 300 !important; color: #2B2D42;}
 
.roboto-title {padding-top: 60px; font-family: Roboto !important; color: #1C2B87 !important;}
 
.roboto-section-title {font-weight: bold; font-size: 35px; font-family: Roboto !important; color: #1c2b87 !important; padding-bottom: 30px; padding-top:30px;}
 
 
/* ******************************************************************************************************** */
/* ********************************** GRID CONTAINTER 2 / DIFFERENT WIDTH ********************************* */
/* ******************************************************************************************************** */
 
 
/* This will make all elements be redistributed into one signal element (Responsive) */
 
.grid-container-1x90 {
  display: grid;
  grid-template-columns: 150px 1fr; /* Updated to 2 columns */
  grid-gap: 20px;
  padding: 10px;
  width: 100%;
  font-size: 19px;
  align-items: center;
  margin-left: auto;
  margin-right: auto;
}
 
.grid-item-1x90 {
  /*padding: 10px;*/
  align-items: center;
  color: white;
  transition: box-shadow 0.3s ease-in-out;
 
}
 
.grid-item-1x90 a {
  /*padding: 10px;*/
  color: white;
  font-style: italic;
  text-decoration-line: underline;
  transition: box-shadow 0.3s ease-in-out;
}
 
 
.grid-item-1x90:first-child {
  text-align: center;
  width: 100px; /* Set width of the first div to 100px */
}
 
.grid-item-1x90:last-child {
  text-align: left;
  width: 100%; /* Set width of the second div to 100% */
}
 
 
@media (max-width: 767px) {
  .grid-container-1x90 {
    grid-template-columns: 1fr; /* Change to 1 column on smaller screens */
  }
 
    .grid-item-1x90:nth-child(n + 4) {
    text-align: center;
    grid-column: initial;
    grid-row: span 2;
 
  }
 
  .grid-item-1x90:nth-child(n + 7) {
    text-align: center;
    grid-row: initial;
    grid-column: initial;
    grid-row: span 3;
  }
}
 
 
 
/* ******************************************************************************************************** */
/* **************************************** Attractive design ********************************************* */
/* ******************************************************************************************************** */
 
.container2 {
  position: relative;
  display: flex;
  justify-content: center;
  align-items: center;
}
 
.centered-content {
  text-align: left;
}
 
 
.centered-content a {
  color:  white !important;
  text-decoration-line: underline;
  font-style: italic;
 
}
 
.attractive-paragraph {
  font-family: Arial, sans-serif;
  font-size: 19px;
  color: white;
  background-color: rgb(34,48,128);
  padding: 20px;
  border-radius: 10px;
  box-shadow: 0 2px 5px rgba(0, 0, 0, 0.1);
  transition: background-color 0.3s ease-in-out;
}
 
.attractive-paragraph:hover {
  background-color: rgb(30,42,112);
  color: white;
}
 
.attractive-paragraph:hover ~ .overlay {
  background-color: rgba(255, 255, 255, 0);
}
 
.attractive-paragraph-2 {
  font-family: Arial, sans-serif;
  font-size: 16px;
  color: white !important;
  background-color: rgb(34,48,128);
  padding: 15px;
  border-radius: 10px;
  box-shadow: 0 2px 5px rgba(0, 0, 0, 0.1);
  transition: background-color 0.3s ease-in-out;
}
 
 
.attractive-paragraph-2:hover {
  background-color: rgb(30,42,112);
  color: white;
}
 
.attractive-paragraph-2:hover ~ .overlay {
  background-color: rgba(255, 255, 255, 0);
}
 
.overlay {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background-color: rgba(255, 255, 255, 0.7);
  filter: blur(5px);
  pointer-events: none;
  transition: background-color 0.3s ease-in-out;
}
 
 
 
/* ******************************************************************************************************** */
/* *************************** CUSTOMIZE LATEST POSTS SHORTCODE ******************************************* */
/* ******************************************************************************************************** */
 
div.latest-posts {display: grid;   grid-template-columns: repeat(3, 1fr);   grid-gap: 20px;
  padding: 10px;
 
}
 
div:nth-child(2) > div > div.latest-posts > div.listing-item.one-third,
div > div > div.listing-item.one-fourth {
 
border-radius:5px;
box-shadow: 0px 4px 0px 0px rgba(var(--kubio-color-1),1);
border-top:1px solid #EEEEEE;
border-right: 1px solid #EEEEEE;
padding: 20px;
padding-bottom: 23px;
margin-bottom:40px;
text-align: left;
width:100%;
}
 
div:nth-child(2) > div > div.latest-posts > div > a.image > img,
div > div > div.listing-item.one-fourth.first > a.image > img {
 
  aspect-ratio: 4/3; /* 4:3 Aspect Ratio (divide 3 by 4 = 0.75) */
    object-position: center center;
    object-fit: cover;
    border-top-left-radius: 5px;    
  border-top-right-radius: 5px;
}
 
div:nth-child(2) > div > div.latest-posts > div > a.title,
div > div > div.listing-item.one-fourth.first > a.title,
div.is-acf-field.is-display-inline-block.has-text-align-left.roboto-input.wp-block-mfb-meta-field-block > div > div > div:nth-child(2) > a.title,
div.is-acf-field.is-display-inline-block.has-text-align-left.roboto-input.wp-block-mfb-meta-field-block > div > div > div:nth-child(3) > a.title,
div.is-acf-field.is-display-inline-block.has-text-align-left.roboto-input.wp-block-mfb-meta-field-block > div > div > div:nth-child(4) > a.title
 
{
display: block;
font-family: Roboto, Helvetica, Arial, Sans-Serif, serif;
    font-weight: 700;
    font-size: 1.4em;
    line-height: 1.4;
    text-transform: none;
    color: #1C2B87;
   padding-top:10px;
}
 
 
div:nth-child(2) > div > div.latest-posts > div > span.date,
div > div > div.listing-item.one-fourth.first > span.date,
div.is-acf-field.is-display-inline-block.has-text-align-left.roboto-input.wp-block-mfb-meta-field-block > div > div > div:nth-child(2) > span.date,
div.is-acf-field.is-display-inline-block.has-text-align-left.roboto-input.wp-block-mfb-meta-field-block > div > div > div:nth-child(3) > span.date,
div.is-acf-field.is-display-inline-block.has-text-align-left.roboto-input.wp-block-mfb-meta-field-block > div > div > div:nth-child(4) > span.date
 
{display:block; padding-top: 10px; padding-bottom: 10px;}
 
 
 div:nth-child(2) > div > div.latest-posts > div > span.excerpt-dash, div:nth-child(2) > span.excerpt-dash {display: none;}
 div:nth-child(2) > div > div.latest-posts > div > span.excerpt {color: #1C2B87; font-size: 16px; font-weight: bold;}
 
 
 
@media (max-width: 767px) {
  div.latest-posts {
    grid-template-columns: 1fr; /* Change to 1 column on smaller screens */
  }
 
}
 
 
 
 
 
 
 
/* ******************************************************************************************************** */
/* ********************************************* ACCORDION ************************************************ */
/* ******************************************************************************************************** */
 
p.accordion {
    background-color: #eee;
    color: #1c2b87;
    cursor: pointer;
    padding: 18px;
    width: 100%;
    text-align: left;
    border: none;
    outline: none;
    transition: 0.4s;
    margin-bottom:10px;
  }
  
  p.accordion.active, p.accordion:hover {
    background-color: #1c2b87;
    color: white;
  }
/* Unicode character for "plus" sign (+) */
  p.accordion:after {
    content: "+ "; font-size:17px;
    float: left; margin-right:10px;
  }
/* Unicode character for "minus" sign (-) */
  p.accordion.active:after {
    content: "- "; color:white; font-size:17px; 
}
 
  div.panel {
    padding: 0 18px;
    background-color: white;
    max-height: 0;
    overflow: hidden;
    transition: 0.4s ease-in-out;
    opacity: 0;
    margin-bottom:10px;
  }
 
 
  div.panel.show {
    opacity: 1;
    max-height: 6000px;
    text-align: left !important;
  }
 
 
.panel div {
    text-align: left; /* Aligns WYSIWYG content (like learning outcomes) to the left */
}
 
 
.panel p {
    text-align: left; /* Aligns all paragraphs inside the panel to the left */
}
 
 
 
 
  td.style1 { /* These are used in the Training events */
    font-weight: bold;
    padding: 10px;
    border: 1px solid gray;
  } 
 
 
  td.style11 { /* These are used in the Training events */
    padding: 10px;
    border: 1px solid gray;
  } 
 
  td.style2 { /* These are used in the Training Catalog first column */
    color: red;
    width: 40px;
    font-weight: bold;
    padding: 10px;
    vertical-align: top;
    border: 1px solid gray;
 
 }
 
  td.style22 { /* These are used in the Training events */
    padding: 10px;
    border: 1px solid gray;
  } 
 
.collapsingphotosbackground {
    display: flex;
    background: black;
    text-align: center;
    padding: 0px;
    margin: 0px;
}
 
.collapsingphotos {
    display: flex;
    justify-content: center;
    margin-left: auto;
    margin-right: auto;
    border-bottom: 1px solid white;
}
 
hr {
    margin-top: 0px;
    margin-bottom: 20px;
    border-top: 1px solid #eee;
  }
 
 
 
 
 
/* ******************************************************************************************************** */
/* ******************************************* ACCORDION + URLs ******************************************* */
/* ******************************************************************************************************** */
 
/* These are used in order to get the links for opened Accordion */
 
.accordion-url {
    display: none;
    padding: 10px;
    border: 1px solid #fff;
    border-radius: 5px;
    }
.accordion-button {
    background-color: #eee;
    color: #444;
    cursor: pointer;
    padding: 18px;
    width: 100%;
    text-align: left;
    border: none;
    outline: none;
    transition: 0.4s;
    margin-bottom:10px;
}
 
 
 
/* ******************************************************************************************************** */
/* ************************************ GRID CONTAINTER 2 / (20 X 80 ) ************************************ */
/* ******************************************************************************************************** */
 
 
/* This will make all elements be redistributed into one signal element (Responsive) */
 
.grid-container-1x80 {
  display: grid;
  grid-template-columns: 200px 1fr; /* Updated to 2 columns */
  width: 100%;
  grid-gap: 20px;
  align-items: left;
  margin-left: auto;
  margin-right: auto;
}
 
.grid-item-1x80 {
  align-items: left;
  color: black;
  transition: box-shadow 0.3s ease-in-out;
}
 
.grid-item-1x80 a {
  color: black;
  font-style: italic;
  text-decoration-line: underline;
  transition: box-shadow 0.3s ease-in-out;
}
 
 
.grid-item-1x80:first-child {
  text-align: right;
  color: #1c2b87;
  font-weight: bold;
 /* width: 160px; */ /* Set width of the first div to 100px */
}
 
.grid-item-1x80:last-child {
  text-align: left;
  color: rgba(var(--kubio-color-6-variant-4),1);
  width: 100%; /* Set width of the second div to 100% */
}
 
 
@media (max-width: 767px) {
  .grid-container-1x80 {
    grid-template-columns: 1fr; /* Change to 1 column on smaller screens */
  }
 
    .grid-item-1x80:nth-child(n + 4) {
    text-align: left;
    grid-column: initial;
    grid-row: span 2;
  }
 
  .grid-item-1x80:nth-child(n + 7) {
    text-align: left;
    grid-row: initial;
    grid-column: initial;
    grid-row: span 3;
  }
}
 
 
 
 
 
 
/* ******************************************************************************************************** */
/* ************************************ GRID CONTAINTER 2 ARABIC / (20 X 80 ) ************************************ */
/* ******************************************************************************************************** */
 
 
/* This will make all elements be redistributed into one signal element (Responsive) */
 
.grid-container-1x80-ar {
  display: grid;
  grid-template-columns: 200px 1fr; /* Updated to 2 columns */
  direction: rtl;
  width: 100%;
  grid-gap: 20px;
  align-items: left;
  margin-left: auto;
  margin-right: auto;
}
 
.grid-item-1x80-ar {
  align-items: right;
  color: black;
  transition: box-shadow 0.3s ease-in-out;
  font-size: 20px;
}
 
.grid-item-1x80-ar p {
  font-size: 20px;
}
 
 
.grid-item-1x80-ar a {
  color: black;
  font-style: italic;
  text-decoration-line: underline;
  transition: box-shadow 0.3s ease-in-out;
}
 
 
.grid-item-1x80-ar:first-child {
  text-align: left;
  color: #1c2b87;
  font-weight: bold;
 /* width: 160px; */ /* Set width of the first div to 100px */
}
 
.grid-item-1x80-ar:last-child {
  text-align: right;
  color: rgba(var(--kubio-color-6-variant-4),1);
  width: 100%; /* Set width of the second div to 100% */
}
 
 
@media (max-width: 767px) {
  .grid-container-1x80-ar {
    grid-template-columns: 1fr; /* Change to 1 column on smaller screens */
  }
 
    .grid-item-1x80-ar:nth-child(n + 4) {
    text-align: left;
    grid-column: initial;
    grid-row: span 2;
  }
 
  .grid-item-1x80-ar:nth-child(n + 7) {
    text-align: left;
    grid-row: initial;
    grid-column: initial;
    grid-row: span 3;
  }
}
 
 
 
 
/* ******************************************************************************************************** */
/* ********************************************* GRID CONTAINER 5 ***************************************** */
/* ******************************************************************************************************** */
 
 
 
/* This will make all elements be redistributed into one signal element (Responsive) */
 
.grid-container-5 {
  display: grid;
  grid-template-columns: repeat(5, 1fr); /* Updated to 5 columns */
  grid-gap: 20px;
  padding: 10px;
}
 
.grid-item-5 {
  background-color: #fff;
  text-align: center;
  font-size:  17px;
  font-weight: 900;
  padding: 20px;
  transition: box-shadow 0.3s ease-in-out;
}
 
.grid-item-5:hover {
  box-shadow: 0 0 10px rgba(0, 0, 0, 0.3);
}
 
.grid-item-5 a {
  color: #000;
  text-decoration: none;
  transition: color 0.3s ease-in-out;
}
 
 
 
@media (max-width: 767px) {
  .grid-container-5 {
    grid-template-columns: 1fr; /* Change to 1 column on smaller screens */
  }
 
  .grid-item-5:nth-child(n + 6) {
    grid-column: initial;
    grid-row: span 2;
  }
 
  .grid-item-5:nth-child(n + 11) {
    grid-row: initial;
    grid-column: initial;
    grid-row: span 3;
  }
}
 
 
/* ******************************************************************************************************** */
/* ********************************************* GRID CONTAINER 3 ***************************************** */
/* ******************************************************************************************************** */
 
/* This will make all elements be redistributed into one signal element (Responsive) */
 
.grid-container-3 {
  display: grid;
  grid-template-columns: repeat(3, 1fr); /* Updated to 3 columns */
  grid-gap: 20px;
  padding: 10px;
}
 
.grid-item-3 {
  background-color: #fff;
  text-align: center;
  padding: 20px;
  transition: box-shadow 0.3s ease-in-out;
}
 
.grid-item-3:hover {
  box-shadow: 0 0 10px rgba(0, 0, 0, 0.3);
}
 
.grid-item-3 a {
  color: #000;
  text-decoration: none;
  transition: color 0.3s ease-in-out;
}
 
@media (max-width: 767px) {
  .grid-container-3 {
    grid-template-columns: 1fr; /* Change to 1 column on smaller screens */
  }
 
}
 
 
/* ******************************************************************************************************** */
/* ********************************************* GRID CONTAINER 4 ***************************************** */
/* ******************************************************************************************************** */
 
 
/* This will make all elements be redistributed into one signal element (Responsive) */
 
.grid-container-4 {
  display: grid;
  grid-template-columns: repeat(4, 1fr); /* Updated to 4 columns */
  grid-gap: 20px;
  padding: 10px;
}
 
.grid-item-4 {
  background-color: #fff;
  text-align: center;
  padding: 20px;
  transition: box-shadow 0.3s ease-in-out;
}
 
 
.grid-item-4:hover {
  box-shadow: 0 0 10px rgba(0, 0, 0, 0.3);
}
 
.grid-item-4 a {
  color: #000;
  text-decoration: none;
  font-size:  17px;
  transition: color 0.3s ease-in-out;
}
 
@media (max-width: 767px) {
  .grid-container-4 {
    grid-template-columns: 1fr; /* Change to 1 column on smaller screens */
  }
 
  .grid-item-4:nth-child(n + 6) {
    grid-column: initial;
    grid-row: span 2;
  }
 
  .grid-item-4:nth-child(n + 11) {
    grid-row: initial;
    grid-column: initial;
    grid-row: span 3;
  }
}
 
 
 
/* ******************************************************************************************************** */
/* ******************************************* GRID CONTAINER 4 TABLE ************************************* */
/* ******************************************************************************************************** */
 
 
/* This will make all elements be redistributed into one signal element (Responsive) */
 
.grid-container-4-table{
  display: grid;
  grid-template-columns: repeat(4, 1fr); /* Updated to 4 columns */
  margin: 0px;
  padding:0px;
}
 
.grid-item-4-table{
  text-align: center;
  padding: 0px;
  transition: box-shadow 0.3s ease-in-out;
}
 
.grid-item-4-table a {
  color: #000;
  text-decoration: none;
  font-size:  17px;
  transition: color 0.3s ease-in-out;
}
 
@media (max-width: 767px) {
  .grid-container-4-table {
    grid-template-columns: 1fr; /* Change to 1 column on smaller screens */
  }
 
  .grid-item-4-table:nth-child(n + 6) {
    grid-column: initial;
    grid-row: span 2;
  }
 
  .grid-item-4-table:nth-child(n + 11) {
    grid-row: initial;
    grid-column: initial;
    grid-row: span 3;
  }
}
 
 
 
 
/* ******************************************************************************************************** */
/* ********************************************* Customized button **************************************** */
/* ******************************************************************************************************** */
 
 
.customized-button {
   text-decoration: none;
   background-color: #1C2B87;
   padding: 15px 40px 15px 40px;
   margin: auto;
   border: 0px;
   border-radius: 3px;
   font-family: Roboto, Helvetica, Arial, Sans-Serif, serif;
   font-weight: 400;
   width: 200px;
   text-align: center;
}
 
.customized-button a { 	
   text-decoration: none;
   color: white !important;
}
 
.customized-button:hover{
  background-color: #6699FF;
  transition-duration: 1s;
}
 
.border-image {
   border-radius: 10px;
   border: 1px solid lightgray;
}
 
/* ******************************************************************************************************** */
/* ********************************************* Customized banner **************************************** */
/* ******************************************************************************************************** */
 
 
p.customized-banner {
   text-decoration: none;
   background-color: #1C2B87;
   padding: 15px 40px 15px 40px;
   width: 100% !important;
   border: 0px;
   border-radius: 3px;
   font-family: Roboto, Helvetica, Arial, Sans-Serif, serif;
   font-weight: bold !important;
   width: 200px;
   text-align: center;
   color: white !important;
}