/* IMPORTANT */
@import url('https://fonts.googleapis.com/css2?family=Bai+Jamjuree:ital,wght@0,300;0,400;0,500;1,300;1,500&display=swap');

:root {
    --bs-body-bg: #040212;
    --bs-body-bg-rgb: rgba(4, 2, 18);
    --bs-primary: #beb214;
    --bs-primary-rgb: 190, 178, 20;
    --bs-primary-300: #ecdc06;
    --bs-primary-300-rgb: rgba(236, 220, 6, 1);
    --bs-primary-600: #4A4627;
    --bs-primary-600-rgb: rgba(74, 70, 39, 1);
    --bs-secondary: #0f243e;
    --bs-secondary-rgb: rgba(15, 36, 62);
    --bs-secondary-600: #0A192A;
    --bs-secondary-600-rgb: rgba(10, 25, 42, 1);
    --bs-font-sans-serif: "Bai Jamjuree", Helvetica, Arial, sans-serif;
    --shadow: rgba(0, 0, 0, .6);
}

body {
    background: no-repeat linear-gradient(
            0deg, var(--bs-body-bg) 0%,
            var(--bs-secondary) 47%,
            var(--bs-secondary) 86%,
            var(--bs-secondary-600-rgb) 100%
    );
}

.header-gradient {
    background: linear-gradient(
            180deg, rgba(10, 16, 29, 1) 0%,
            rgba(10, 16, 29, 1) 16%,
            rgba(14, 24, 43, 1) 100%
    );
    box-shadow:0 5px 60px rgba(0,0,0,.9);
}
main {
    min-height: calc(100vh - 100px);
}
.container {
    /*padding-top:80px;*/
    padding-top:115px;
    overflow-x: hidden;
    padding-bottom:30px;
}
footer {
    margin-top:0px;
    float:left;
    width: 100%;
}
.logo-dingo {
    height: 25px;
    opacity: .65;
}
.btn-emergency {
    height:75px !important;
    font-size:24px;
    font-weight: 600;
}
.btn-menu {
    font-size: 18px;
    font-weight: 600;
    margin-bottom:20px;
    width: 100%;
}
@media (min-width: 768px) {
    .btn-menu {
        height: 50px !important;
        width: 50vw;
    }
}

.bg-primary {
    background: linear-gradient(180deg, rgba(var(--bs-primary-rgb), 1) 70%, var(--bs-primary-600-rgb) 100%) !important;
    box-shadow: 0 5px 10px var(--shadow);
    border:none;
}
.btn-record {
    background:transparent !important;
    border:none;
    box-shadow:none;
    cursor: pointer;
}
.btn-record img {
    margin-left:5px;
}
.form-control-secondary {
    background: linear-gradient(180deg, var(--bs-secondary) 80%, rgba(18, 24, 51, 1) 100%);
    box-shadow: 0 5px 10px rgba(0, 0, 0, .6);
    font-size: 18px;
    background:#0f243e;
    border:2px solid #fff !important;
    color:#ecdc06;
    font-weight: 300 !important;
    font-style: italic;
    padding:12px  !important;

}
/* ALERT: Silent emergency button. For these styles is better make a class */
.btn-emergency {
    max-width:500px !important;
    transition: all .2s ease-in-out;
    border-radius: 0 0 10px 10px;
}
.btn-emergency:hover {
    background: linear-gradient(180deg, rgba(236, 220, 20, 1) 70%, rgba(74, 70, 39, 1) 100%) !important;

}
.form-submit-secondary {
    box-shadow: 0 5px 10px var(--shadow);
    font-size: 18px;
    margin-left:0 !important;
    transform: none !important;
    /*background:#0f243e;*/
    background:#14345b;
    width:60px !important;
}
.form-submit-secondary:hover {
    background:#0d6efd;
}
.toast {
    --bs-toast-font-size: 1rem;
}
.radioicon-record-off {
    background:url(/../../../static/client/img/backg-radio-off.png) no-repeat;
    background-size:contain !important;
    width:205px;
    height:310px;
    margin-top:8px;
    margin-left:8px;
}
.radioicon-record-on {
    background:url(/../../../static/client/img/backg-radio-on.png) no-repeat !important;
    background-size:contain !important;
    width:205px;
    height:310px;
    margin-top:8px;
    margin-left:8px;
}
#background-record {
    width:460px;
}
/* Audio controls */
.mb-3 {
    box-shadow: 0 5px 10px var(--shadow);
    border-radius: 8px;
}
/* Emergency query */
.block-title {
    color: var(--bs-primary-300);
    font-style: normal !important;
    font-weight: 600;
}
.block-query {
    float:left;
    width: 100%;
    padding:10px 0px 0 15px !important;
    text-align: justify;
    box-sizing: border-box;
    transition: all .15s ease-in-out;
    font-size: 18px !important;
    background:rgba(0,0,0,.2);
    border-left:10px solid transparent;
}
.block-query:first-letter {
    text-transform: uppercase;
}
.block-query:hover {
    background:rgba(255,255,255,.07);
}
.block-separator {
    width:100%;
    float:left;
    height:2px;
    background:rgba(0, 0 ,0, .35);
}
.block-query a{
    text-decoration: none;
}
.block-query a:hover{
    text-decoration: underline;
    text-decoration-color: var(--bs-primary-300) !important;
}
.map-pin {
    background:url(/../../../static/client/img/map-pin.png) no-repeat;
    background-size:contain;
    float:right;
    width:22px;
    height:50px;
    cursor:pointer;
    margin-right:10px;
}
.map-pin:hover {
    background:url(/../../../static/client/img/map-pin-hover.png) no-repeat;
     background-size:contain;
}
.block-text {
    margin-top: 10px;
    margin-bottom:10px;
    margin-right:20px;
    font-size: 16px !important;
    text-align: justify;
}
.block-time {
    float:right;
    background: rgba(0, 0, 0, .3);
    padding:3px 8px 3px 20px;
    color:rgba(255, 255, 255, .5);
    font-size:15px;
}
.state-emergency {
    border-left:10px solid #ff1200 !important;
}
.state-general_instruction {
    border-left:10px solid transparent !important;
}
.state-personal_communication {
    border-left:10px solid transparent !important;
}
.state-general_communication {
    border-left:10px solid transparent !important;
}
.state-normal {
    border-left:10px solid transparent !important;
}
.state-resolved {
    border-left:10px solid #067f00 !important;
}
.py-4 {
    margin-top:20px;
}
.grup-select-idioma {
    margin-top: 7px;
}
select#language {
    background: rgba(0, 0, 0, .3);
    border:1px solid #fff;
    border-radius:5px;
    padding:10px;
    margin-right:10px;
    float:left;
}
.grup-select-idioma button {
    float:left;
}
/* QUERY PAGE */
.card {
    padding:15px 12px 15px 12px;
    width:100%;
    max-width:650px;
    border-radius:10px;
    border:2px solid var(--bs-white);
    background:transparent;
    transform: translate(-50%,0);
    margin-left:50%;
    margin-top:30px;

}
.card:first-child {
    margin-top:120px !important;
}
.card-header {
    font-weight:600;
    font-style: italic;
    font-size:20px;
    color: var(--bs-primary-300);
    background:none;
    border:none;
}
.card-header:first-letter {
    text-transform: uppercase;
}
#map {
     width:calc(100% - 20px);
     margin-left:10px;
     margin-bottom:15px;
     border-radius:10px;
     box-shadow: 0 5px 20px var(--shadow);
}
.main #map {
    margin-left:0;
    max-width:650px;
    transform:translate(-50%,0);
    left:50%;
}
.container-bot-goback {
    border:none;
    box-shadow:none;
    padding:0;
    width:100%;
    height:30px;
    max-width:650px;
    transform: translate(-50%,0);
    margin-left:50%;
    margin-top:120px;
    margin-bottom:20px;
}
.bot-goback {
    /*margin-top:150px;*/
    width:40px;
    height:40px;
    float:right;
    margin-bottom:0 !important;
    position:absolute;
    right:0;
    background:url(/../../../static/client/img/bot-goback.png);
    background-size: contain;
    box-shadow: none;
}

/* FORMS */
.card-title {
    text-align: center;
    margin-top: 20px;
}
fieldset legend.text-dark {
    color:rgba(255,255,255,.7) !important;
}
/**************************/
/****** COMMAND PAGE ******/
/**************************/
.page-command .bg-primary {
    padding:20px 40px;
    height: auto !important;
    line-height:normal;
}
.page-command .bg-primary:hover {
    background: linear-gradient(180deg, var(--bs-primary-300-rgb) 70%, rgba(74, 70, 39, 1) 100%) !important;
}
.page-command .bg-danger {
    background: linear-gradient(180deg, rgba(var(--bs-danger-rgb),1) 70%, rgba(74, 74, 74, 1) 100%) !important;
    padding: 20px 40px;
    height: auto !important;
    line-height: normal;
    box-shadow: 0 5px 10px rgba(0, 0, 0, .6);
    border-bottom:none;
}
.page-command .bg-danger:hover {
    background: linear-gradient(180deg, rgb(255, 103, 112) 70%, rgba(255, 30, 30, .2) 100%) !important;
}
/* USER PROFILE */

fieldset legend {
    color: var(--bs-primary-300) !important;
    border-bottom: 2px solid rgba(255,255,255,.1);
}
fieldset .mb-3 {
    box-shadow:none;
}
fieldset input, fieldset select {
     box-shadow: 0 5px 10px var(--shadow);
}
fieldset .profile-user-status {
    color: var(--bs-emphasis-color);
    rgba(255,255,255,.7);
    padding:.475rem .85rem .595rem .85rem;
    box-shadow: 0 5px 10px var(--shadow);
}
fieldset .profile-user-status .bi-gear-fill::before {
    color: var(--bs-primary-300);
}
fieldset .profile-picture {
    text-align:center;
}
fieldset .profile-picture label {
    text-align:left;
    float:left;
}
/* GROUP PROFILE */
fieldset .group-logo {
    text-align:center;
}
fieldset .group-logo label {
    text-align:left;
    float:left;
}

/* BUTTONS FOR NAVIGATION / EDIT / SAVE / ERASE / ... */
.bi-save {
    margin-left:10px;
}
.bi-save::before {
    padding-right:7px;
}

/* QUADRANT */
.section-quadrant .card:first-child {
   margin-top:30px !important;
}
.section-quadrant .map-pin {
    background:none;
}
.section-quadrant .block-query a span{
    font-weight: normal;
    font-style: normal;
    color: var(--bs-emphasis-color);
}
.section-quadrant .block-query a:hover span {
    color: var(--bs-primary-300);
}

/* CUSTOM ANIMATIONS */
@keyframes pulse {
  0% {
    width:400px;
    opacity: 0.7;
  }
  10% {
    width:450px;
    opacity: 0.5;
  }
  30% {
    width:350px;
    opacity: 1;
  }
  55% {
    width:450px;
    opacity: 0.5;
  }
  70% {
    width:420px;
    opacity: 0.6;
  }
  85% {
    width:380px;
    opacity: 0.9;
  }
  100% {
    width:400px;
    opacity: 0.7;
  }
}