:root {
    --color-main-bg: rgb(235 235 235);
    --color-first: rgba( 30, 33, 43, 1 );
    --color-bg-second: rgb(0 78 152);
    --color-text-second: rgba(255, 255, 255, 1 );
    --color-tird: rgb(255 103 0);
    --color-five: rgba( 27, 47, 51, 1 );
    --color-bg-white: rgba( 255, 255, 255, 1 );
    --color-bg-footer: rgb(68 64 84);
    --color-text-footer: rgb(246, 246, 248);
}

body {
    background-color: var( --color-main-bg );
    margin: 0px;
    padding: 0px;
    box-sizing: border-box;
    font-family: Sans-serif, Montserrat, Roboto, Open Sans, Playfair Display;
}

.header-content {
    height: 60vh;
}


.bg-rebeccapurple {
    background-color: var( --color-tird );
}

.container {
    position: relative;
    width: 60vw;
    margin: auto;
    padding: 1em;
}

.four-columns {
    display: grid;
    justify-content: space-evenly;
    grid-template-columns: repeat(4, 1fr);
}

.card {
    display: grid;
    margin: 1em;
    align-items: center;
    background-color: var( --color-bg-white );
    border-radius: 5px;
    padding: 1em;
    height: 10em;
    box-shadow: 3px 3px 15px 1px;
}

.cogs {
    display: block;
    position: relative;
    background-image: url(/Public/Themes/Enterprise/Icons/cogs.svg);
    width: 100px;
    height: 100px;
    background-position: center;
    background-repeat: no-repeat;
    background-size: cover;
    margin: auto;
}
.world-connect {
    display: block;
    position: relative;
    background-image: url(/Public/Themes/Enterprise/Icons/world-connect.svg);
    width: 100px;
    height: 100px;
    background-position: center;
    background-repeat: no-repeat;
    background-size: cover;
    margin: auto;
}


.files-xls {
    display: block;
    position: relative;
    background-image: url(/Public/Themes/Enterprise/Icons/files-pdf.svg);
    width: 100px;
    height: 100px;
    background-position: center;
    background-repeat: no-repeat;
    background-size: cover;
    margin: auto;
}

.tools {
    display: block;
    position: relative;
    background-image: url(/Public/Themes/Enterprise/Icons/tools.svg);
    width: 100px;
    height: 100px;
    background-position: center;
    background-repeat: no-repeat;
    background-size: cover;
    margin: auto;
}

.carrousel-title {
    text-align: center;
}

.margin-5 {
    margin: 5em;
}

.text-center {
    text-align: center;
}

.centered {
    width: 60vw;
    position: relative;
    margin: auto;
}

.two-columns {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    overflow: hidden;
}

.tree-columns {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
}

.four-columns {
    display: grid;
    grid-template-columns: repeat(4, 1fr);    
}
.five-columns {
    display: grid;
    grid-template-columns: repeat(5, 1fr);
}

.img-center {
    display: block;
    margin: auto;
    width: 100%;
    height: auto;
}

.vertical-spacing {
    margin: 0px;
    margin-bottom: 6em;
}

.column {
    padding: 1em;
}

footer  {
    background-color: var(--color-bg-footer);
    color: var(--color-text-footer);
}

.newsletter {
    background-color: var(--color-bg-footer);
    color: var(--color-text-footer);
}

.copy {
    background-color: var(--color-bg-footer);
    color: var(--color-text-footer);
}

.bg-black {
    background-color: black;
    color: white;
}

.bg-white {
    background-color: white;
    color: black;
}

.navbar {
    display: grid;
    grid-template-columns: 1fr 10fr 1fr;
    position: sticky;
    top: 0px;
    background-color: var( --color-bg-second );
    color: var( --color-text-second );
    z-index: 100;
    line-height: 3em;
}

.logo {
    position: relative;
    top: 20%;
    left: 50%;
}

.menu-list {
    margin: 0px;
    padding: 0px;
    list-style: none;
    display: grid;
    grid-template-columns: repeat(15, 1fr);
    text-align: center;
}

.menu-list > li {
    padding: 0px;
}

.menu-list > li > a {
    display: block;
    text-decoration: none;
    padding: 0px;
    margin: 0px;
    color: var( --color-text-second );
}

.menu-list > li > a:visited {
    color: var( --color-text-second );
}

.v-menu-list {
    display: none;
}

.v-menu-list::before {
    content: '*';
}

.v-menu-list:hover {
    display: block;
}

header {
    color: var( --color-text-second );
}

.form-vertical {
    display: grid;
    margin: auto;
}

.form-vertical > input {
    border: 1px solid;
    border-radius: 5px;
    line-height: 1em;
    padding: 0.5em;
}

.form-vertical > textarea {
    border: 1px solid;
    border-radius: 5px;
    margin-bottom: 1em;
}

.img-responsive {
    width: 100%;
    height: auto;
}

.img-cover {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.options-list {
    list-style: none;
}

.header-title {
    font-size: 4em;
}

.text-black {
    color: black;
}

.vertical-center {
    margin-top: auto;
    margin-bottom: auto;
}

.rounded {
    border-radius: 1.5em;
}

.circle {
    border-radius: 100%;
}

.col > iframe {
    width: 100%;
}

.carrousel {
    position: relative;
	display: flex;
	overflow: hidden;
    list-style: none;
    padding-inline-start: 0px;
    width: 100%;
}

.carrousel li img {
    width: 100%;
}

.slide {
	width: calc( 100% / 8 );
	flex-shrink: 0;
    animation-name: slide;
    animation-duration: 15s;
    animation-iteration-count: infinite;
    animation-timing-function: linear;
}

.carrousel:hover .slide {
	animation-play-state: paused;
}

@keyframes slide {
    100% { 
        transform: translateX( -900% );  
    }
}

@keyframes closed-column-left {
    0% { transform: translateX( -100% ); }
    100% { transform: translateX( 0 ); }
}

@keyframes closed-column-right {
    0% { transform: translateX( 100% ); }
    100% { transform: translateX( 0 ); }
}

.two-columns {
    overflow: hidden;
}


.column-l {
    opacity: 0;
    padding: 1em;
}

.column-r {
    opacity: 0;
    padding: 1em;
}

.column-l.active {
    opacity: 1;
    animation-name: closed-column-left;
    animation-duration: 1s;
    animation-iteration-count: 1;
    animation-timing-function: linear;
}

.column-r.active {
    opacity: 1;
    animation-name: closed-column-right;
    animation-duration: 1s;
    animation-iteration-count: 1;
    animation-timing-function: linear;
}

.footer {
    display: grid;
    grid-template-columns: 1fr 1fr 1fr 2fr;
    padding: 15px;
}

.footer a {
    color:white;
}

.footer ul {
    list-style: none;
    padding-inline-start: 0px;
}

@media (max-width: 600px) {
    
    .footer {
        display: block;
    }

    .header-title {
        font-size: 2.5em;
    }
    
    [class$="-columns"] {
        display: block;
    }

}
/* ---------------------------------------------------------------------------------------------------------------------- */
/* DIALOG */
dialog {
    z-index: 1000;
    position: fixed;
    top: 5em;
    border: 1px solid gray;
    border-radius: 5px;
}

.dialog-header {
    width: 100%;
    border-bottom: 1px solid gray;
    margin-bottom: 1em;
}

.dialog-body {
    padding: 0px 15px 0px 15px;
    background-color: inherit;
    border-bottom: 1px solid gray;
    margin-bottom: 1em;
}

.dialog-footer {
    width: 100%;
    text-align: right;
}
/* ---------------------------------------------------------------------------------------------------------------------- */
/* DIALOG CONFIRM */
.dialog-confirm > .dialog-body {
    display: none;
}

.dialog-confirm > .dialog-header > .dialog-title {
    text-align: center;
}

.dialog-confirm > .dialog-header > .dialog-title::before {
    content: '\26A0';
    color: #ff860a;
    font-size: x-large;
    padding-right: 5px;
}

.dialog-confirm > .dialog-footer > .btn {
    padding: 1em 2em 1em 2em;
    text-transform: uppercase;
}

.dialog-confirm > .dialog-footer > .btn-confirm {
    background-color: #f5a351;
}

.dialog-confirm > .dialog-footer > .btn-confirm:hover {
    background-color: #ff860a;
}
/* ---------------------------------------------------------------------------------------------------------------------- */
/* DIALOG ERROR */
.dialog-error > .dialog-body {
    text-align: center;
    margin-bottom: 1em;
    border: none;
}

.dialog-error > .dialog-header > .dialog-title {
    text-align: center;
}

.dialog-error > .dialog-header > .dialog-title::before {
    content: '\2716';
    color: #ff1a0a;
    font-size: x-large;
    padding-right: 5px;
}

.dialog-error > .dialog-footer > .btn {
    padding: 1em 2em 1em 2em;
    text-transform: uppercase;
}

/* ---------------------------------------------------------------------------------------------------------------------- */
/* Buttons */
.btn {
    background-color: rgb(170, 170, 170);
    color: rgb(0, 0, 0);
    border-radius: 3px;
    border: none;
    margin: 2px;
    padding: 5px;
}

.btn:hover {
    background-color: rgb(90, 90, 90);
    color: white;
}

.btn-inline {
    background-color: rgb(109, 109, 255);
    color: white;
    border: none;
    margin: 2px 0px 2px 0px;
    padding: 5px;
    border-right: 1px solid;
}

.btn-inline:hover {
    background-color: blue;
    color: white;
}
/* ---------------------------------------------------------------------------------------------------------------------- */
/* BUTTON CONFIRM */
.btn-confirm {
    background-color: rgb(109, 109, 255);
    color: white;
}

.btn-confirm:hover {
    background-color: blue;
    color: white;
}
/* ---------------------------------------------------------------------------------------------------------------------- */
/* BUTTON STATUS */
.btn-status::before {
    content: '\2611';
    padding-right: 2px;
}
/* ---------------------------------------------------------------------------------------------------------------------- */
/* BUTTON ADD */
.btn-add {
    background-color: #06603b;
    color:white;
}
.btn-add:hover {
    background-color: #008000;
    color:white;
}
.btn-add::before {
    content: '\002B';
    padding-right: 2px;
}
/* ---------------------------------------------------------------------------------------------------------------------- */
/* BUTTON EDIT */
.btn-edit {
    background-color: #ff800a;
    color:white;
}
.btn-edit::before {
    content: '\270E';
    padding-right: 2px;
}
/* ---------------------------------------------------------------------------------------------------------------------- */
/* BUTTON UP */
.btn-up {
    background-color: #169605;
    color:white;
}
.btn-up::before {
    content: '\27A4';
    /*padding-bottom: 2px;*/
    display: inline-block;
    transform: rotate(-90deg);
}
/* ---------------------------------------------------------------------------------------------------------------------- */
/* BUTTON DOWN */
.btn-down {
    background-color: #169605;
    color:white;
}
.btn-down::before {
    content: '\27A4';
    /*padding-bottom: 2px;*/
    display: inline-block;
    transform: rotate(90deg);
}
/* ---------------------------------------------------------------------------------------------------------------------- */
/* BUTTON PASSWORD */
.btn-password {
    background-color: #ff800a;
    color:white;
}
.btn-password::before {
    content: '\002A';
    padding-right: 2px;
}
/* ---------------------------------------------------------------------------------------------------------------------- */
/* BUTTON REMOVE */
.btn-remove {
    background-color: #ff1a0a;
    color:white;
}
.btn-remove::before {
    content: '\2716';
    padding-right: 2px;
}
/* ---------------------------------------------------------------------------------------------------------------------- */
/* FORM */
.input-group {
    display: block;
    width: calc( 100% - 2em );
    padding: 0 1em 1em 1em;
}

.form-input {
    width: 100%;
    font-size: inherit;
}

.required::after {
    content: '\2734';
    padding-right: 5px;
    color:red;
}
/* ---------------------------------------------------------------------------------------------------------------------- */

/* Navbar */
.navbar-menu-right {
    display: inline-block;
}

.navbar-menu-item-right {
    display: inline-block;
}