/* JDG :: 20171115 :: Draft concept */
html {
	background-color:#c9d8e7;	/*rgb(201,216,231);*/
	background-image: linear-gradient(to bottom,#a9c4df,#e7ecf0);
	background-attachment: fixed;
}



/* spinner _________________________________________________________________________ */
/* http://tobiasahlin.com/spinkit/ */
.spinner{margin:100px auto 0;width:70px;text-align:center}.spinner>div{width:18px;height:18px;background-color:#427cac;border-radius:100%;display:inline-block;-webkit-animation:sk-bouncedelay 1.4s infinite ease-in-out both;animation:sk-bouncedelay 1.4s infinite ease-in-out both}.spinner .bounce1{-webkit-animation-delay:-.32s;animation-delay:-.32s}.spinner .bounce2{-webkit-animation-delay:-.16s;animation-delay:-.16s}@-webkit-keyframes sk-bouncedelay{0%,100%,80%{-webkit-transform:scale(0)}40%{-webkit-transform:scale(1)}}@keyframes sk-bouncedelay{0%,100%,80%{-webkit-transform:scale(0);transform:scale(0)}40%{-webkit-transform:scale(1);transform:scale(1)}}
#bs-loading { position:fixed;top:0;left:0;bottom:0;right:0;background: rgba(68, 68, 68, 0.3)  url(../img/wbb.png) 50% 50% repeat;vertical-align: middle;text-align: center;color: red;font-size: 2em;font-weight: 800;	display:flex;align-items: center;z-index: 99999; }

/* navbar __________________________________________________________________________ */
#nav-toggle-state {display: none;}
#nav-toggle-state:checked ~ .navbar-menu {display: block;}
.navbar { background-color: #c9d8e7; }
.saveAll {     
    position: absolute;
	right: 22px;
    top: 0;
}
.saveAll p { padding-right: 0; }
/* .navbar-title { margin:0 110px auto; } */
.modal { z-index: 9999; }
@media screen and (min-width: 769px) { 
    .modal-card, .modal-content { 
        min-width: 640px;
        width: 90%;
    }
}


/* app list __________________________________________________________________________ */
.apps_list ul {
    display: block;
    list-style-type: none;
    padding: 0;
    margin: 0;
}
.apps_list ul li:hover {
	background: #f7f9fa;
}
.apps_list ul li {
    background: #ffffff;
    border: none;
    color: #666666;
    border-radius: 0.125rem;
	
	max-width: 48%;
    width: 11rem;
    height: 11rem;
    float: left;
	
    cursor: pointer;
    position: relative;
	
	margin: 1%;
	padding: 0.4rem;
}
.apps_list ul li>div {
    box-shadow: 0 0 0 1px rgba(0,0,0,0.15);
}
.apps_list ul li div {
    max-width: 11rem;
    max-height: 11rem;
    overflow: hidden;
}

.apps_list .t { color:#333333; }
.apps_list .i { position:absolute; top:50%;right:0.4rem; }
.apps_list .e { color:#de6060;font-size: small; }
.apps_list .d { color:#898989;font-size: small;position:absolute;bottom:0px; }
.apps_list a { display: block;height: 100%; }



/* tabs */
.tabs.is-boxed { margin-bottom: 0; }
.tab_container .tab_container_item { display: none; }
.tab_container .tab_container_item.is-active { display: block; }
.tabs.is-boxed a { border: 1px solid #aec7e0;background: rgb(201, 216, 231); }

/* dgrid __________________________________________________________________________ */
.dgrid-container { overflow-x:auto;width:100%;background:#fff; }
.dgrid { /* table-layout: fixed; */ width:100%; border-collapse: inherit;/* collapse;*/ }
.dgrid td { max-width:50%;word-wrap:break-word;overflow:hidden; }
.dgrid thead tr td, .dgrid thead tr th {
    background: #f7f7f7;
	border-top:1px solid #cccccc;
	border-bottom:1px solid #e5e5e5;
    padding: 4px;
	color:#787878;
	text-align:left;
	font-weight: normal;
	padding-top: 10px;padding-bottom: 10px;
}

.sortable {cursor: pointer;}
.sortable:hover:not(.sort_asc):not(.sort_desc):after { 
    content: "\25BC";
    color:#e5e5e5;
    float:right;
}
.sort_asc:hover:after {content:"\25BC";color:#e5e5e5;}
.sort_asc:after {content:"\25B2";float:right;}
.sort_desc:hover:after {content:"\25B2";color:#e5e5e5;}
.sort_desc:after {content:"\25BC";float:right;}

.dgrid tbody tr td, .dgrid tbody tr th { color: #7b7b7b;border-bottom:1px solid #f7f7f7; padding-top: 10px;padding-bottom: 10px;}
/* .dgrid tbody tr:nth-child(even) td, .dgrid tbody tr:nth-child(even) th { } */
.dgrid tbody tr:hover td { 	background: #f0f0f0; }
.dgrid input, .dgrid select, .dgrid textarea { width:100%; }
/* .dgrid tbody tr td:not(:first-child), .dgrid tbody tr th:not(:first-child) { padding-left: 0.5rem; } */
.dgrid tbody tr:nth-child(even) { background: #fbfdff; }

/* .dgrid table td, .dgrid tr:nth-child(even) table td, .dgrid tr:nth-child(odd) table td { background-color: transparent; } */
.dg-pagination th {text-align:center;padding: 0.5rem;}

.dgrid tbody tr td:not(:last-child) { border-right: 1px dotted #cccccc; }
.dgrid tbody tr td { border-bottom: 1px dotted #cccccc;max-width:100px; }

.dgrid .dgc-boolean { width:32px; text-align:center; }
.dgrid .dgc-editing { padding:0;margin:0; }

.editable { padding-left:1px; }
.editable:hover { padding-left:0; border:1px solid #a5c2f0; }

.dgrid .dga { width:48px; text-align:center; }

.R, .content table th.R {text-align: right;}
.C {text-align:center;}


/* autocomplete __________________________________________________________________________ */
.autocomplete {  position: relative;  display: inline-block;}
.autocomplete-items {
  position: absolute;
  border: 1px solid #d4d4d4;
  border-bottom: none;
  border-top: none;
  z-index: 99;
  /*position the autocomplete items to be the same width as the container:*/
  top: 100%;
  left: 0;
  right: 0;
  overflow:auto;
  max-height:480px;
  font-size: .9rem;
}
.autocomplete-items div {
  padding: 10px;
  cursor: pointer;
  background-color: #fff; 
  border-bottom: 1px solid #d4d4d4; 
}
.autocomplete-items div small { 
    font-size: .8rem;
  }
.autocomplete-items div:hover {  background-color: #e9e9e9; }
.autocomplete-active {  background-color: DodgerBlue !important;   color: #ffffff; }







@media print { .navbar, .navbar-brand,.navbar-menu {display: none;} }





#app-container {
    /* padding:1.5rem; */ 
    padding:1.3rem;
    min-height:100%;
}



/* BULMA override:: We should modify the code in bulma.sass and create a new bulma.css */
.modal-card, .modal-content { min-height: 96%; }
.tabs .is-disabled a {
    background:#aec7e0;
    color:#c7d8ee;
}
.has-background-success { background-color:#effff4!important; }
.has-background-danger { background-color:#ffdce3!important; }

@media screen and (max-width: 640px) { 
    #app-container {padding:0.25rem 0;}


	.section {
		padding:0.25rem 0;
	}
	.modal-card, .modal-content {
		margin: 0 0.25rem;
	}
	.modal-card-head > .delete {
		right: 0.25rem;
		position: absolute;
	}
	.saveAll {
		right:0.25rem;
	}
	.modal-card-body {
		padding: 0px;
	}
	.modal-card .field { padding:0.25rem; }
	.box { padding: 0.25rem; }
	.navbar-title { padding-left:0; }
	.dropdown .navbar-item { padding-left: 0; }
	
}
@media screen and (max-width: 639px) { 
    #apps_list ul li { width:50%; }
}
@media screen and (max-width: 480px) { 
    #uname { display:none; }
    .dropdown .navbar-item { max-width: calc(100vw - 140px); }
}
@media screen and (max-width: 320px) { 
    body {font-size:0.9rem}
    body.has-navbar-fixed-top, html.has-navbar-fixed-top { padding-top: 2.75rem; }
    .navbar, .navbar-brand { min-height:2.75rem;height:2.75rem; }
    .navbar-item { padding-top:0.5rem; }

    #app-container { overflow: hidden; }

    .title.is-4 {font-size:1rem}

    .label:not(:last-child) { margin-bottom:0; }
    .field:not(:last-child) { margin-bottom:0.5rem; }
    .label { font-size: .90rem; }
    .button, .input, .textarea, .select { border-radius: 2px; font-size: .85rem; }
    .control.has-icons-left .input~.icon, .control.has-icons-left .select~.icon,
    .control.has-icons-right .input~.icon, .control.has-icons-right .select~.icon { font-size: .85rem; }

    .modal-card-head { padding:4px; }
    .modal-card-title { font-size:1rem;font-weight:600; }
    .modal-card .field {padding:0;}

    .tabs { font-size: .9rem; }
    .tabs a { padding-top:.3em; }
 
    .dgrid { font-size: .85rem; }
    .dgrid thead tr th, .dgrid tbody tr td { padding-top:4px;padding-bottom:4px; }

    .card-content { padding:4px; }
    .columns { margin-top:-1rem; }
    .columns:not(:last-child) { margin-bottom: 0; }

}
@media screen and (max-width: 300px) { 
    #apps_list ul li { width:98%;max-width:98%; }
    html { min-width:240px; }
}
    






.toast__container {
    position: fixed;
    bottom: 20px;
    left: 20px;
    pointer-events: none;
  }


  .toast__msg {
    width: 250px;
    min-height: 50px;
    background: rgba(0, 0, 0, 0.9);
    color: #fff;
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-align: center;
        -ms-flex-align: center;
            align-items: center;
    -webkit-box-pack: justify;
        -ms-flex-pack: justify;
            justify-content: space-between;
    font-size: 14px;
    font-weight: 500;
    padding-left: 15px;
    padding-right: 10px;
    word-break: break-all;
    -webkit-transition: opacity 3s cubic-bezier(0, 0, 0.30, 1) 0;
    -webkit-transition: opacity 0.30s cubic-bezier(0, 0, 0.30, 1) 0;
    transition: opacity 0.30s cubic-bezier(0, 0, 0.30, 1) 0;
    text-transform: initial;
    margin-bottom: 10px;
    border-radius: 2px;
  }
  
  .toast__msg--hide {
    opacity: 0;
  }

.employeePhoto {
    height: auto;
    max-width: 100%;
    max-height: 48px;
    border-radius: 18px;
    margin: 0px 0 0 4px;
  }

#app-container, #app-container-wos { margin-top: 57px; }

.eParte_C, .eParte_Y {
    background-color: #f1fce2;
}
.eParte_E {
    background-color: #f5c1ca;    
}
.eParte_N {

}

input[type="file"] {
    display: none;
}
.custom-file-upload {
    border: 1px solid #ccc;
    display: inline-block;
    padding: 6px 12px;
    cursor: pointer;
}



.modal-card { height: calc(100vh); }


.signature-pad {
    position: relative;
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-orient: vertical;
    -webkit-box-direction: normal;
        -ms-flex-direction: column;
            flex-direction: column;
    font-size: 10px;
    width: 100%;
    height: 100%;
    /*
    max-width: 700px;
    max-height: 460px;
    */
    border: 1px solid #e8e8e8;
    background-color: #fff;
    box-shadow: 0 1px 4px rgba(0, 0, 0, 0.27), 0 0 40px rgba(0, 0, 0, 0.08) inset;
    border-radius: 4px;
    padding: 16px;
  }
  
  .signature-pad::before,
  .signature-pad::after {
    position: absolute;
    z-index: -1;
    content: "";
    width: 40%;
    height: 10px;
    bottom: 10px;
    background: transparent;
    box-shadow: 0 8px 12px rgba(0, 0, 0, 0.4);
  }
  
  .signature-pad::before {
    left: 20px;
    -webkit-transform: skew(-3deg) rotate(-3deg);
            transform: skew(-3deg) rotate(-3deg);
  }
  
  .signature-pad::after {
    right: 20px;
    -webkit-transform: skew(3deg) rotate(3deg);
            transform: skew(3deg) rotate(3deg);
  }
  
  .signature-pad--body {
    position: relative;
    -webkit-box-flex: 1;
        -ms-flex: 1;
            flex: 1;
    border: 1px solid #f4f4f4;
  }
  
  .signature-pad--body
  canvas {
    position: absolute;
    left: 0;
    top: 0;
    width: 100%;
    height: 100%;
    border-radius: 4px;
    box-shadow: 0 0 5px rgba(0, 0, 0, 0.02) inset;
  }
  
  .signature-pad--footer {
    color: #C3C3C3;
    text-align: center;
    font-size: 1.2em;
    margin-top: 8px;
  }
  
  .signature-pad--actions {
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-pack: justify;
        -ms-flex-pack: justify;
            justify-content: space-between;
    margin-top: 8px;
  }