::-webkit-scrollbar {
  width: 10px;
}

::-webkit-scrollbar-track {
  background: #ffffff;
}

/* Handle */
::-webkit-scrollbar-thumb {
  background: linear-gradient(#496dd3,  #273899);
}

/* Handle on hover */
::-webkit-scrollbar-thumb:hover {
  background: #010c4c;
}

.navbar {
    background: linear-gradient(#273899, #496dd3);
    color: #ffffff;
}

.nav-link {
    color: #ffffff;
}

.navbar-brand {
    color: #d1c3a1 !important;
    font-size: 24pt;
}

.show .navbar-nav .active>.nav-link{
    text-align: center;
}

.table-head{
    background: linear-gradient(#273899, #496dd3);
    color: #ffffff;
}

.page-name{
    color: #d1c3a1;
    font-size: 32pt;
    display: flex;
    justify-content: center;
    margin: 5vh;
    text-align: center;
}

.form-container{
    display: flex;
    flex-direction: column;
    justify-content: center;
    padding: 4vh;
}

.search-form{
    width: 100%;
    display: grid;
    grid-template-rows: 3vh 3vh;
    grid-template-columns: 10% 20% 10% 20% 10% 20%;
    grid-column-gap: 2%;
    grid-row-gap: 3vh;
}

.submit-button{
    background: linear-gradient(#273899, #496dd3);
    height: 4vh;
    align-items: center;
}

.fullname{
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
}

.user_card{
    margin-top: 5vh;
    background: linear-gradient(#273899, #496dd3);
}

.surname{
    color: #d1c3a1;
    font-size: 32pt;
}

.name{
    color: #ffffff;
    font-size: 24pt;
}

.add-visit-form{
    width: 100%;
    display: grid;
    grid-template-rows: 3vh 3vh 3vh;
    grid-template-columns: 10% 20% 10% 20% 10% 20%;
    grid-column-gap: 2%;
    grid-row-gap: 5vh;
}

.footer{
    width: 100%;
    color: #d1c3a1;
    font-size: 14pt;
    background: linear-gradient(#496dd3,  #273899);
    text-align: center;
    position:fixed;
    bottom:0;
}

.buttons{
    display: flex;
    justify-content: space-around;
    margin-bottom: 5vh;
}

.dataTables_wrapper{
    margin-bottom: 5vh;
}

.form{
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
}

.add-visitor-cam-form{
    width: 100%;
    display: grid;
    grid-template-rows: 3vh 3vh 3vh;
    grid-template-columns: 15% 30% 15% 30%;
    grid-column-gap: 2%;
    grid-row-gap: 5vh;
}

.add-visitor-form{
    width: 100%;
    display: grid;
    grid-template-rows: 3vh 3vh 3vh 3vh;
    grid-template-columns: 15% 30% 15% 30%;
    grid-column-gap: 2%;
    grid-row-gap: 5vh;
}

.cause_info{
    height: 25vh;
    background: linear-gradient(#496dd3,  #273899);
    display: flex;
    flex-direction: row;
    justify-content: space-between;
}

.cause_info_text{
    width: 50%;
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    color: #ffffff;
    font-size: 16pt;
}

.cause_info_number a{
    color: #d1c3a1;
    font-size: 24pt;
}

.form-comment{
    display: flex;
    flex-direction: row;
    justify-content: space-between;
    align-items: center;
}

.form-comment input{
    width: 65%;
    color: #010c4c;
}

.form-comment .comment-button{
    width: 32%;
    color: #d1c3a1;
    border-color: #d1c3a1;
}

.form-comment .comment-button:hover{
    background-color: #d1c3a1;
    color: #010c4c;
}

.btn-on{
    background: url("/static/images/play.png") no-repeat;
    width: 70px;
    height: 70px;
    border: 0;
}

.btn-off{
    background: url("/static/images/stop.png") no-repeat;
    width: 70px;
    height: 70px;
    border: 0;
}

.btn-off:disabled{
    background: url("/static/images/stop_disabled.png") no-repeat;
}

.btn-on:disabled{
    background: url("/static/images/play_disabled.png") no-repeat;
}

.card_body_cause{
    display: flex;
    flex-direction: row;
    justify-content: space-between;
}

.cause_card_main_info{
    width: 40%;
    color: #010c4c;
    font-size: 14pt;
}

.cause_card_p_info{
    width: 55%;
    color: #010c4c;
    font-size: 14pt;
}

.cause_moreInfo input, textarea{
    width: 60%;
}

.copy_button{
    background-color: #010c4c;
    border-color: #010c4c;
    margin: 10px;
}

.doc_button{
    background-color: #d1c3a1;
    border-color:  #d1c3a1;
}

.doc_button:hover a{
    color: #ffffff;
}

.cause.card{
    margin-bottom: 5vh;
}

.content{
    display: flex;
    flex-direction: row;
    justify-content: space-around;
}

.content_causes {
    width: 55%;
}

.content_template{
    width: 40%;
    height: 100%;
}

.template{
    height: 59vh;
    width: 100%;
    overflow: auto;
    display: flex;
    flex-direction: column;
    align-items: center;
    padding-top: 2vh;
    padding-left: 2vh;
}

.template div{
    width: 100%;
}

.text-template{
    height: 6vh;
    width: 80%;
    overflow: hidden;
}

.text-template-big{
    height: 12vh;
    width: 80%;
}

.template_documents{
    display: flex;
    flex-direction: row;
    justify-content: space-around;
    align-items: center;

}

.t_document a img{
    margin-top: 1vh;
    height: 10vh;
}

.streams{
    display: flex;
    flex-direction: row;
    justify-content: space-around;
    align-items: center;
}

.field_name{
    color: #273899;
    font-size: 18pt;
    display: flex;
    justify-content: center;
    margin: 1vh;
    text-align: center;
}

.video-button{
    background: linear-gradient(#273899, #496dd3);
    height: 4vh;
    align-items: center;
    color: #ffffff;
    border-color: #010c4c;
}

.video-button:hover{
    background: #010c4c;
    color: #ffffff;
}

.button-group{
    width: 100%;
}

.stream-container{
    display: flex;
    flex-direction: column;
    align-items: center;
}

.cont{
    width: 100%;
    height: 90vh;
    background-image: url(/static/images/header_savoy.png),
    linear-gradient(#496dd3, #273899);
    background-position: right bottom;
    background-repeat: no-repeat;
}

.footer-error{
    width: 100%;
    color: #d1c3a1;
    font-size: 14pt;
    background: linear-gradient(#273899, #496dd3);
    text-align: center;
    position:fixed;
    bottom:0;
}

.error-content{
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
}

.logo{
    width: 10vw;
    margin-bottom: -5vh;
    margin-top: 10vh;
}