@import url('https://fonts.googleapis.com/css2?family=Nunito:ital,wght@0,200..1000;1,200..1000&display=swap');

* { font-family: "Nunito", sans-serif; }

.ui.form input:not([type]), 
.ui.form input[type=color], 
.ui.form input[type=date], 
.ui.form input[type=datetime-local], 
.ui.form input[type=email], 
.ui.form input[type=file], 
.ui.form input[type=month], 
.ui.form input[type=number], 
.ui.form input[type=password], 
.ui.form input[type=search], 
.ui.form input[type=tel], 
.ui.form input[type=text], 
.ui.form input[type=time], 
.ui.form input[type=url], 
.ui.form input[type=week], 
.ui.header,
.ui.button{
    font-family: "Nunito" !important;
}

#loader{ position: fixed; }
:focus{ outline: none; }
.cursor { cursor: pointer; }
.hide { display: none !important;}
a{ color: #2A8FCF !important; }
a:hover{ color: #2A8FCF !important; }
html { scroll-behavior: smooth; background: #FFF; }
body{ background-color: transparent; overflow: hidden}

.app_menu{
    z-index: 1000 !important;
}

.app_input_error{
    padding: 2px 10px;
    border: 1px solid #e0b4b4;
    margin: -6px 0px;
    font-size: 11px;
    background: rgba(221, 44, 0, 0.87);
    color: #FFF;
    border-radius: 0px 0px 4px 4px;
    position: relative;
}

.app_data_deactive{
    background: #F1F1F1 !important; 
    color: #AAA;
}

.app_flex{ display: flex !important; flex-direction: column; }
.app_flex.grow{ flex-grow: 1; }

.app_minimum_padding{ padding: 5px !important; }
.app_minimum_margin{ margin: 5px !important; }
.app_no_margin{ margin: 0px !important; }

.app_top{ height: 40px; border: 0 !important; }

.app_center {
    width:100%;
    height: 100%;
    display:flex;
    align-items: center;
    justify-content: center;    
}

.app_full_height{
    height:100%;
}

.app_theme.circular.label{
    background: #FFF !important;
}

.app_flyout_content{
    height: calc(100vh - 166px);
}

.app_scroll {
    flex-grow: 1;
    overflow: scroll;
}

/** Form **/
.app_form{
    height: inherit;
    margin: 0 !important;
    overflow: hidden;
}

.grow-wrap {
  /* easy way to plop the elements on top of each other and have them both sized based on the tallest one's height */
  display: grid;
}
.grow-wrap::after {
  /* Note the weird space! Needed to preventy jumpy behavior */
  content: attr(data-replicated-value) " ";

  /* This is how textarea text behaves */
  white-space: pre-wrap;

  /* Hidden from view, clicks, and screen readers */
  visibility: hidden;
}
.grow-wrap > textarea {
  /* You could leave this, but after a user resizes, then it ruins the auto sizing */
  resize: none;

  /* Firefox shows scrollbar on growth, you can hide like this. */
  overflow: hidden;
}
.grow-wrap > textarea,
.grow-wrap::after {
  /* Identical styling required!! */
  border: 1px solid black;
  padding: 0.5rem;
  font: inherit;

  /* Place on top of each other */
  grid-area: 1 / 1 / 2 / 2;
}

/** Table **/
.app_table{ min-height:100% !important; }
.app_table th{ text-transform: uppercase !important; }

/** Login **/
.login{
    height: 100vh;
    width: 100vw;
    background: #003060;
    background: linear-gradient(0deg, rgba(0, 48,96, 1) 0%, rgba(14, 134,212, 1) 100%);
}

#login_form{
    border-radius: 8px;
    color: #333;
    margin: 20px auto;
    padding: 20px;
    position: relative;
    width: 300px;
}

#login_form label, #login_form .copyright{ color: #EEE; }
#login_form .copyright{ font-size: 11px; }
#login_form a { color: #BBB !important; }

#login_form .logo{
    display:flex;align-items: center;justify-content: center; height: 160px;    
}

#login_form .logo > .patch{
    background: #FFF; width: 80px; height: 90px; margin-top: -1rem;   
}

#login_form .logo > .image{
    position: absolute;
}

#login_form  img {
  filter: drop-shadow(0.35rem 0.35rem 0.4rem rgba(0, 0, 0, 0.2));
}

/** dashboard **/
#dashboard_header{
    background: rgb(255,255,255);
    background: linear-gradient(180deg, rgba(255,255,255,1) 0%, rgba(222,222,222,1) 100%);
}

#dashboard_header h3{
    margin-bottom: 0rem;
}

#dashboard_header .header img{
    width: 2.8em;
}

#dashboard_menu .menu {
    z-index: 1000;
}

/** Content **/
#contentWrapper{ 
    height: calc(100vh - 74px);
    min-width: 800px;
}

.bantai_default_menu{
    height:68px;
}

.bantai_default_content{
    height: calc( 100vh - 154px );
    min-height: 446px;
/*    border-radius: 8px !important;
    background: #CCC !important;*/
}

.bantai_left_column{
    flex-grow: 0 !important;
    flex-shrink: 0 !important;
    flex-basis: 260px !important;
}

.bantai_right_column{
    flex-grow: 1 !important;
    flex-shrink: 0 !important;
    flex-basis: 512px !important;
}

.dashboard_screen{
    display: flex; 
    flex-direction: column; 
    height: 100%;
    width: 100%;
}

.dashboard_widget {
    height: 100%;
    width: 100%;
    background: #F8F8F8;
    display: inline-block;
    overflow: hidden;
    border-radius: 4px;
}

.dashboard_agent_listing { height: calc(100%/2); overflow:hidden; background: #FFF; border: 0.5px solid #f1f1f1 }

.listing_data {
    margin: 0 !important;
    position: absolute !important;
    height: calc( 100% - 48px);
    width: 100%;
    overflow: scroll;
}

#_listing{
    margin: 0 !important;
    position: absolute !important;
    width: 100%;
    overflow: scroll;    
}

.image_placeholder{
    background-size: contain !important; 
    background-repeat: no-repeat !important;
    background-position: center !important;
    border: 0.5px solid #FAFAFA;
    border-radius: 5px;
    height: 260px;
    width: 100%;
}

#map {
    height: 100%;
    width: 100%;
    background: #CCC;
    display: inline-block;
    border-radius: 4px;
    overflow: hidden;
}

/** Permissions **/
.permissions input[type=radio] {
    position: absolute;
    visibility: hidden;
    display: none;
}

.permissions label {
    display: inline-block;
    cursor: pointer;
    padding: 3px 12px;
    font-size: .9em;
}

.permissions input[type=radio]:checked + label{
  color: white;
  background: #2a8fcf;
}

.permissions.radio-group {
    border: solid 1px #2a8fcf;
    display: inline-block;
    border-radius: 4px;
}

/** Reports **/
.reportList{
    overflow: auto;
    height: calc(100vh - 200px);
    margin-top: 0em !important;
    border-radius: 4px !important;
}

#open_reports{
    background: rgba(255,0,0,0.02);
    border: 1px dashed rgba(255,0,0,0.5);
}

#pending_reports{
    background: rgba(251,189,0,0.02);
    border: 1px dashed rgba(251,189,0,0.5);
}

#resolved_reports{
    background: rgba(0, 191,0 ,0.02);
    border: 1px dashed rgba(0, 191,0 ,0.5);
}

/** Tab **/
.app_tab_content{
    flex-grow: 1; overflow: hidden    
}

.app_tab_content .form{
    height: 100%;   
}

.app_tab_content .tab{
    height: 100%;
}

/** Assignments/Schedules **/
.droppable_area{
    border: 1px dashed #CCC !important;
    min-height: 32px; 
    width: 100%;
    border-radius: 4px;
    background: #FAFAFA;
}

/** Schedule **/
.schedule_label.shift td:first-child{
    background: #FFFFFF !important;
    z-index: 100
}

.schedule_label:not(.shift){
    background: #fcfcfc !important;
}

/*.schedule_label td{
    padding: 0.5rem !important;
    border: 0 !important;
}*/

.shift td:not(:first-child){
    padding: 0 !important;
}

.shift td div{
    width:100%;
    min-width: 40px;
    height:40px;
    /*background: #eee !important;*/
}

.shift_cell.past{
    background: #f1f1f1 !important;
}

.shift td div:hover:not(.past){
    border: 1px solid;
}

.shift_cell .item{
    text-align: center !important;
    width:100%;
    height:40px;
    justify-content: center;  
    align-items: center;
    align-content: center;
    border-radius: 4px;  
    display: flex;
}