/*
 * CSS variables
 */
:root {
    /*
    * Regularly used colors
    */

    /* The primary color */
    --primary_color: #EB3C3C;
    /* The secondary color */
    --secondary_color: #e7745d;
    /* An accent or fade-out color */
    --accent_color: #f0f0f0;
    /* Used for situations where a light tint is desired  */
    --subtitle_color: #4a4a4a;
    /* Color used for success messaging. */
    --success_color: #33b535;
    /* Color used for error messaging. */
    --error_color: #d21129;

    /*
     * Size variables
     */
    --sidebar_width: 250px;
    --topbar_height: 55px;
    --main_padding: 35px;

}

/*
 * Page header style
 */
 .page-header-buttons {
    margin: 40px 0px 60px;
    border-bottom: none;
 }

 .page-header-buttons-content{
    padding-bottom: 9px;
 }

 .page-header-buttons-footer{
    border-bottom: 1px solid var(--primary_color);
 }

 .page-header-buttons-actions{
    float: right;
 }

 .page-header {
    border-bottom: 1px solid var(--primary_color);
 }

 /**
  * Language style
  */
 .lang > a.active, .lang > a:hover {
    background: #f59e9e none repeat scroll 0 0;
    text-decoration: none;
 }

 .lang > a {
    background: var(--primary_color) none repeat scroll 0 0;
    color: #fff;
    display: block;
    float: left;
    font-family: arial;
    font-weight: 700;
    padding: 5px 0;
    text-align: center;
    text-transform: uppercase;
    width: 36px;
 }

/**
 * Top navigation
 */
 .top-navigation {
    position: absolute;
    margin-top: 5px;
    right: 0;
 }

#menu ul li a{
    list-style: none !important;
    text-decoration: none; !important;
    color: var(--primary_color);
}

#menu {
    color:inherit !important;
}

/*!***/
 /** Table styles*/
 /**!*/
 /*.table-header{*/
    /*color:#fff;*/
    /*background-color: var(--primary_color);*/
 /*}*/

 /*.table > thead > tr > th {*/
    /*border-bottom: none;*/
 /*}*/

 /*.table>tbody>tr>td {*/
     /*vertical-align: middle;*/
 /*}*/

/**
 * Fav icon styles
 */
 .fa {
    color: var(--primary_color);
    margin: 5px;
 }



/**
 * Button styles
 */
 .button-default {
    padding: 7px 15px;
    cursor: pointer;
    text-decoration: none;
    text-transform: capitalize;
    border-radius: 5px;

    color: #fff!important;
    background-color: var(--primary_color);
    border: 2px solid var(--primary_color);
 }

 .button-back {
     padding: 7px 15px;
     cursor: pointer;
     text-decoration: none;
     text-transform: capitalize;
     border-radius: 5px;

     color: var(--primary_color);
     background-color: #fff!important;
     border: 2px solid var(--primary_color);
 }

.button-default .fa {
    color: #fff;
}

 .button-default:hover, .button-default:focus, .button-back:hover, .button-back:focus {
    text-decoration: none;
    color:var(--primary_color)!important;
    background-color: transparent;
    border: 2px solid var(--primary_color);
 }

.button-default:hover .fa, .button-default:focus .fa {
    color: var(--primary_color);
}
/**
 * Login styles
 */
#login-header{
    width: 260px;
    margin: 0 auto;
    padding-bottom: 10px;
    text-align: center;
}

#login-content{
    width: 260px;
    margin: 0 auto;
}

#login-form > input {
    margin: 5px; 
}


.login-full-width{
    height: 100vh;
    width: 100vw;
    background: url('/img/backend/login-bg.png') center center no-repeat;
    background-size: 100vw 100vh;
}

#login-container{
   position: absolute;
   top: 0;
   left: 0;
   bottom: 0;
   right: 0;
   margin: auto;
   width: 300px;
   height: 260px;
   background-color: #c9af7a;
}

.container-fluid {
    padding: 0px;
}

/**
 * HREF Styles
 */
 td a, td a:hover, td a:focus, td a:visited{
    text-decoration: none;
    color: var(--primary_color);
 }

/**
 * Breadcrumbs
 */

#breadcrumbs-content {
    margin: 15px 0px 0px 139px;
    text-decoration:none;
    display: inline-block;
    list-style: none;
    color: var(--primary_color);
    font-size: 18px;
}

#breadcrumbs-content li {
    display: inline-block;
}

#breadcrumbs-content li a {
    color: inherit;
}

.navbar-header-sub {
    display: inline-block !important;
}

/**
 * Image styles
 */
.page-image {
    width: 100px;
    height: 100px;
}

img, .page-image {
    object-fit: cover;
}



/*
 * Page wrapper fix
 */
#page-wrapper{
    position: absolute;
    min-height: -webkit-calc(100% - 55px);
    min-height:    -moz-calc(100% - 55px);
    min-height:         calc(100% - 55px);
    background: white;
    padding: 0 !important;
    width: -webkit-calc(100% - 250px);
    width:    -moz-calc(100% - 250px);
    width:         calc(100% - 250px);
}

.container {
    padding-left: 45px !important;
    padding-right: 45px !important;
    width: 100%;
}

/**
    Error message styling
 */

.alert-danger{
    color: white;
    border-radius: 0px;
    margin-bottom: 10px !important;
    background-color: rgba(228, 65, 51, 0.7);
    border: none;
}

.alert-success{
    color: white;
    border-radius: 0px;
    margin-bottom: 10px !important;
    background-color: rgba(19, 181, 147, 0.7);
    border: none;
}

.alert-warning{
    color: white;
    border-radius: 0px;
    margin-bottom: 10px !important;
    background-color: rgba(242, 146, 13, 0.7);
    border: none;
}

.alert-info{
    color: white;
    border-radius: 0px;
    margin-bottom: 10px !important;
    background-color: rgba(42, 143, 215, 0.70);
    border: none;
}


/**
    D-tt logo at the bottom
 */

.fix{
    position:fixed;
    bottom:0px;
    left:0%;
}


/**
    Textarea
 */
textarea {
    max-width: 100%;
    min-width: 100%;
}
 .action-buttons {
     margin : 2px !important;
     width: 20% !important;
 }

/*
 * Styling for the DataTables
 */
.dataTable {
    border-spacing: 0 7px !important;
    border-bottom: 0 !important;
}

/* Table headers */
.dataTable > thead th {
    border-bottom: 0 !important;
    font-family: montserrat_regular, sans-serif;
}

/* Table cells */
.dataTable > tbody tr, .dataTable > thead tr {
    font-family: montserrat_extralight, sans-serif;
    /** It is better to color the cells instead of the rows */
    background-color: var(--accent_color) !important;
}

.dataTable th {
    color: white !important;
    background-color: var(--primary_color) !important;

}
.dataTable td {
    color: black !important;
    background-color: white !important;
}
.input-element, .select2-selection, .dataTables_filter input {
    color: #222222;
    font-family: montserrat_extralight, sans-serif;
    border-radius: 30px !important;
    border-style: none !important;
    box-shadow: 1px 2px 3px lightgrey, -1px 2px 3px lightgrey;
    height: auto !important;
    padding-left: 10px;
    margin-top: 2px;
    margin-right: 2px;
    min-height: 32px !important;
}

/* Styling specific to sorted columns */
.dataTable th.sorting_asc, .dataTable th.sorting_desc {
    font-family: montserrat_bold, sans-serif;
}

.dataTable td.sorting_1 {
    font-family: montserrat_regular, sans-serif;
}

/*Rounding each table row */
.dataTable tr td:first-child, tr th:first-child {
    border-radius: 15px 0 0 15px;
    -moz-border-radius: 15px 0 0 15px;
}
.dataTable tr td:last-child, tr th:last-child {
    border-radius: 0 15px 15px 0;
    -moz-border-radius: 0 15px 15px 0;
}

.dataTables_empty {
    border-radius: 15px 15px 15px 15px !important;
}

/* The 'Show x entries' section */
.dataTables_length {
    margin-top: 4px;
}

.dataTables_length .select2-container {
    margin-left: 3px;
    margin-right: 3px;
    width: 70px !important;
}


/** Paginate buttons */
.dataTables_wrapper .dataTables_paginate {
    border-radius: 5px;
    padding: 0 !important;
    margin-top: 10px !important;
    border: 1px solid #ddd !important;
}

.dataTables_wrapper .dataTables_paginate .paginate_button {
    color: var(--primary_color) !important;
    margin: 0 !important;
    border-right: 1px solid #ddd !important;
}

/** On hover non-disabled paginate buttons */
.dataTables_wrapper .dataTables_paginate .paginate_button:hover {
    color: white !important;
    background: none;
    background-color: var(--secondary_color) !important;
    border-color: var(--secondary_color) !important;
}

/** On hover disabled paginate buttons */
.dataTables_wrapper .dataTables_paginate .paginate_button.disabled:hover {
    background: none;
    margin: 0 !important;
    border-color: #ddd !important;
    background-color: #eee !important;
    border-right: 1px solid #ddd !important;
}

/** Current pagination button normal and on hover */
.dataTables_wrapper .dataTables_paginate .paginate_button.current,
.dataTables_wrapper .dataTables_paginate .paginate_button.current:hover {
    background: none;
    color: #ffffff !important;
    border-color: var(--primary_color) !important;
    background-color: var(--primary_color) !important;
    cursor: default !important;
}

/*
* Style for the cells of the dataTables
*/
.tablecell-image {
    width: 60px;
    height: 60px;
    object-fit: cover;
}
.edit-icon{
    width: 24px;
    margin-right: 3px;
}

/*
 * Loading icons
 */
#loading-icon {
    top:calc(50% - 50px);
    position:absolute;
    left:calc(50% - 50px);
    border-radius: 50%;
    width: 100px;
    height: 100px;
    animation: spin ease-in-out 0.5s infinite;
    display: none;
    border: 16px solid var(--secondary_color); /* Light grey */
    border-top: 16px solid var(--primary_color);
}

@keyframes spin {
    0% { transform: rotate(0deg); }
    100% { transform: rotate(360deg); }
}

#main-flex-container {
    display: flex;
    overflow: hidden;
    padding: var(--main_padding);
    flex-direction: column;
    flex: 1;
}

/*
* Flag icons in the top bar
*/
/*.show {*/
    /*display : inline-flex !important;*/
/*}*/
.flag-icon {
    width: 15px;
    height: 15px;
}

/*
 * Modal styling
 */

/*@media (min-width: 992px) {*/
.modal-lg {
    max-width: 64%;
}
/*}*/

.modal input[type=text], .modal input[type=number], .modal textarea, .modal .select2-container, .modal input[type=email], .modal input[type=password] {
    width: 100% !important;
    margin-bottom: 15px;
}

.modal-header {
    padding-left: 2rem;
    padding-right: 2rem;
    padding-top: 2rem;
    border-bottom: 0;
}

.modal-body {
    padding-left: 2rem;
    padding-right: 2rem;
}

.modal-title {
    font-family: montserrat_bold, sans-serif;
    text-transform: uppercase;
}

/* Center the buttons in the footer*/

.modal-footer {
    justify-content: center;
    padding-bottom: 25px;
    border-top: none;
}

.modal-footer * {
    margin-left: 12px !important;
    margin-right: 12px !important;
}

.hidden {
    display:none;
}
/**Class used for managing the hidden input of the spartan plugin */
.hidden-input {
    display:none;
}

.modal-fade{
    opacity: 1 !important;
    position: absolute;
    top: 0;
    right:0;
    bottom:0;
    left:0;
}

.modal-backdrop{
    background-color: transparent !important;
}

.modal-backdrop.fade.show{
    opacity: 1 !important;
}

.centered-modal{
    position: fixed;
    top: 50%;
    bottom: 0;
    left: 0;
    right: 0;
}
@media (max-width: 1536px) {
    .delete-audio-modal-toggle {
        padding: 7px;
    }
}

#password-error {
    padding-top: 5px;
    color: red;
}

input[type=submit].inactive {
    background-color: #aaaaaa;
    border-color: #aaaaaa;
    pointer-events: none;
}

.developer-link{
    width:100%;
        position:fixed;
    bottom:10px;
    display:flex;
    justify-content: center;
    align-items: center;
}