:root {
    --brand-color: #013755;
    --brand-color: #017CC3;
}
body {
    font-size: 9pt;
}

.container {
    width: 100% !important;
    max-width: 95% !important;
}

.navbar {
    background-color: var(--brand-color);
}

.btn-primary {
    background-color: var(--brand-color);
    border-color: var(--brand-color);
}

.sidebar-offcanvas {
        font-size: 85%;
        margin-left: -15px;
        margin-right: 5px;
        max-width:240px;
    }
    
    .sidebar-offcanvas select, .sidebar-offcanvas input {
        max-width:200px;
    }
    
    

nav ul.nav  a.dropdown-item:hover {
    color:white;
    background-color: #013755;
}

.nav-item active{
  color: white !important;
}

body {
    padding-bottom: 40px;
}

.zf-green {
    color: #68b604;
}

.btn-success {
  background-color: #57a900;
  background-image: -moz-linear-gradient(top, #70d900, #57a900);
  background-image: -ms-linear-gradient(top, #70d900, #57a900);
  background-image: -webkit-gradient(linear, 0 0, 0 100%, from(#70d900), to(#57a900));
  background-image: -webkit-linear-gradient(top, #70d900, #57a900);
  background-image: -o-linear-gradient(top, #70d900, #57a900);
  background-image: linear-gradient(top, #70d900, #57a900);
  filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#70d900', endColorstr='#57a900', GradientType=0);
}

.btn-success:hover,
.btn-success:active,
.btn-success.active,
.btn-success.disabled,
.btn-success[disabled] {
  background-color: #57a900;
}

.btn-success:active, .btn-success.active {
  background-color: #57a900;
}

div.container a.navbar-brand > img { 
    display: inline;
    margin-right: 4px;
}

div.app-caption {
    padding: 25px 0px;    
    font-size:3.0em;
    font-weight: bold;
    color:#6aacaf
}

form ul {
  list-style-type: none;
  padding: 0px;
  margin: 0px 5px;
}

form ul li {    
  color: red;        
}

.bootstrap-datetimepicker-widget ul li{
    color:#000 !important;
}

.alert ul {
  list-style-type: none;
  padding: 0px;
  margin: 0px 5px;
}

div.change-lang {
    text-align: right;
}

div.change-lang a {
    height: 21px;
    width: 41px;
    padding:0;
    margin-top:-4px;
    text-decoration: none;
}

div.change-lang a img{
   height: 21px;
   width: 41px;
   border: 1px solid #ccc;
   opacity: 0.55;
}

div.change-lang a img:hover,
div.change-lang a img.current{
     opacity: 1;
}

.container {
    width: 100% !important;
    max-width: 95% !important;
}

/* Limit image width to avoid overflow the container */
img {
  max-width: 100%; /* This rule is very important, please do not ignore this! */
}

form[name='photo'] .btn-file {
    position: relative;
    overflow: hidden;
}

form[name='photo'] .btn-file input[type=file] {
    position: absolute;
    top: 0;
    right: 0;
    min-width: 100%;
    min-height: 100%;
    font-size: 100px;
    text-align: right;
    filter: alpha(opacity=0);
    opacity: 0;
    outline: none;
    background: white;
    cursor: inherit;
    display: block;
}

span.legend {
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -ms-flex-wrap: wrap;
    flex-wrap: wrap;
    padding: .85rem;
    margin-bottom: 10px;
    list-style: none;
    background-color: #e9ecef;
    border-radius: .2rem;
    font-size: 18px;
}


form input[name='submit'] {
    margin:5px auto;
    width: 120px;
}


form input[name='submit'].submit2 {
    margin-left:3px;
}

  .recruitmentList_box{
        border: 1px solid #007481;
        padding: 1.5rem;
        margin-bottom: 10px;
        border-radius: .2rem;
    }
    
    
  .recruitmentList_box.selected {
        border: 2px solid #007481;
        padding: 1.5rem;
    }
    
    
    .form-row-div {
        margin-bottom:10px;
        margin-top:10px;
    }   
    
    form label {
        margin-bottom:1px;
        
        padding-left:3px;
    }
    
    fieldset legend {
        margin-bottom: 0;
    }
    
    .form-info {
        line-height:1.1; 
        margin-bottom:2px;
        font-size:92%;
    }
    
    .form-description {
        margin-top:1px;
        padding-left:5px;
    }
    
    .form-required {
        font-weight: bolder;
    }
    
    .itemPerPage {
        margin-left:25px;
    }
    
    ul.pagination li {
        padding-left:10px;
        padding-top:5px;
    }
    
    #register-form img {
        display:block;
        margin:2px auto;
        border:2px solid gray;
    }
    
    #reset-password-form img {
        display:block;
        margin:2px auto;
        border:2px solid gray;
    }
    
    #reset-password-form div {
        text-align:center;
    }
    
    #reset-password-form input[type="password"] {
        margin-bottom:4px;
    }
    
    #reset-password-form input[type="password"],
    #reset-password-form input[type="text"] {
        width:100% !important;
    }
    
    #reset-password-form input[name="captcha[input]"]{
        width:189px !important;
        margin:3px auto;
    }
    
    #reset-password-form label {
            float: left;
            display: block;
    }
    
    #reset-password-form label[for="captcha"]{
        float:none;
        text-align: center;
    }
    
    #reset-password-form .reset-error {
        max-width:60%; 
        text-align:right; 
        float:right; 
        margin-right:15px; 
        padding: 4px; 
        font-size:11px; 
        color:red;
    }
    
    #reset-password-form input.middle {
        max-width:63%;
        margin: 0 auto;
    }
    
    .form_status{
        display:inline-block; float:right;
    }
    
    .dataTable input.filter,
    .dataTable select.filter{
          font-size:11px;
          padding:1px;
          height: calc(2.25rem + 2px);
          padding-left:3px;
    }
    
    input[name='zff_user_id'] {
        width:45px !important;
    }
    
    input[name='zff_userId'] {
        max-width: 70px !important;
    }
    
    #recruitmentRegisterTable .table {
        margin-left: 2%;
    }
    
    .sidebar-offcanvas {
        font-size: 80%;
        margin-left: -15px;
        margin-right: 5px;
        max-width:240px;
    }
    
    .sidebar-offcanvas select, .sidebar-offcanvas input {
        max-width:200px;
    }
    
    #zff_album{
        width: 65px;
    }
    
    
 /*
 * CKEditor 5 (v12.3.1) content styles.
 * Generated on Mon, 19 Aug 2019 12:01:17 GMT.
 * For more information, check out https://ckeditor.com/docs/ckeditor5/latest/builds/guides/integration/content-styles.html
 */

:root {
    --ck-image-style-spacing: 1.5em;
}

/* ckeditor5-image/theme/image.css */
.ck-content .image {
    display: table;
    clear: both;
    text-align: center;
    margin: 1em auto
}
/* ckeditor5-image/theme/image.css */
.ck-content .image > img {
    display: block;
    margin: 0 auto;
    max-width: 100%;
    min-width: 50px;
}
/* ckeditor5-image/theme/imagecaption.css */
.ck-content .image > figcaption {
    display: table-caption;
    caption-side: bottom;
    word-break: break-word;
    color: hsl(0, 0%, 20%);
    background-color: hsl(0, 0%, 97%);
    padding: .6em;
    font-size: .75em;
    outline-offset: -1px;
}
/* ckeditor5-image/theme/imageresize.css */
.ck-content .image.image_resized {
    max-width: 100%;
    display: block;
    box-sizing: border-box
}
/* ckeditor5-image/theme/imageresize.css */
.ck-content .image.image_resized img {
    width: 100%;
}
/* ckeditor5-image/theme/imageresize.css */
.ck-content .image.image_resized > figcaption {
    display: block;
}
/* ckeditor5-media-embed/theme/mediaembed.css */
.ck-content .media {
    clear: both;
    margin: 1em 0;
    display: block;
    min-width: 15em;
}
/* ckeditor5-table/theme/table.css */
.ck-content .table {
    margin: 1em auto;
    display: table
}
/* ckeditor5-table/theme/table.css */
.ck-content .table table {
    border-collapse: collapse;
    border-spacing: 0;
    border: 1px double hsl(0, 0%, 70%)
}
/* ckeditor5-table/theme/table.css */
.ck-content .table table td,
.ck-content .table table th {
    min-width: 2em;
    padding: .4em;
    border-color: hsl(0, 0%, 85%);
}
/* ckeditor5-table/theme/table.css */
.ck-content .table table td,
.ck-content .table table th {
    min-width: 2em;
    padding: .4em;
    border-color: hsl(0, 0%, 85%);
}
/* ckeditor5-table/theme/table.css */
.ck-content .table table th {
    font-weight: bold;
    background: hsl(0, 0%, 98%);
}
/* ckeditor5-basic-styles/theme/code.css */
.ck-content code {
    background-color: hsla(0, 0%, 78%, 0.3);
    padding: .15em;
    border-radius: 2px;
}
/* ckeditor5-image/theme/imagestyle.css */
.ck-content .image-style-side:not(.image_resized), .ck-content .image-style-align-left:not(.image_resized), .ck-content .image-style-align-center:not(.image_resized), .ck-content .image-style-align-right:not(.image_resized) {
    max-width: 50%;
}
/* ckeditor5-image/theme/imagestyle.css */
.ck-content .image-style-side:not(.image_resized), .ck-content .image-style-align-left:not(.image_resized), .ck-content .image-style-align-center:not(.image_resized), .ck-content .image-style-align-right:not(.image_resized) {
    max-width: 50%;
}
/* ckeditor5-image/theme/imagestyle.css */
.ck-content .image-style-side:not(.image_resized), .ck-content .image-style-align-left:not(.image_resized), .ck-content .image-style-align-center:not(.image_resized), .ck-content .image-style-align-right:not(.image_resized) {
    max-width: 50%;
}
/* ckeditor5-image/theme/imagestyle.css */
.ck-content .image-style-side:not(.image_resized), .ck-content .image-style-align-left:not(.image_resized), .ck-content .image-style-align-center:not(.image_resized), .ck-content .image-style-align-right:not(.image_resized) {
    max-width: 50%;
}
/* ckeditor5-image/theme/imagestyle.css */
.ck-content .image-style-side {
    float: right;
    margin-left: var(--ck-image-style-spacing);
}
/* ckeditor5-image/theme/imagestyle.css */
.ck-content .image-style-align-left {
    float: left;
    margin-right: var(--ck-image-style-spacing);
}
/* ckeditor5-image/theme/imagestyle.css */
.ck-content .image-style-align-center {
    margin-left: auto;
    margin-right: auto;
}
/* ckeditor5-image/theme/imagestyle.css */
.ck-content .image-style-align-right {
    float: right;
    margin-left: var(--ck-image-style-spacing);
}
/* ckeditor5-block-quote/theme/blockquote.css */
.ck-content blockquote {
    overflow: hidden;
    padding-right: 1.5em;
    padding-left: 1.5em;
    margin-left: 0;
    margin-right: 0;
    font-style: italic;
    border-left: solid 5px hsl(0, 0%, 80%);
}
/* ckeditor5-block-quote/theme/blockquote.css */
.ck-content[dir="rtl"] blockquote {
    border-left: 0;
    border-right: solid 5px hsl(0, 0%, 80%);
}
    
select[name='zff_statusName'] {
    max-width:90px;
}

.paginator_summary {
    float: left;
    display: block;
    text-align: left;
    margin-top: 10px;
    margin-left: 2% !important;
    padding-left:20px;
    padding-right:20px;
}


.paginator_summary .pagination .active {
    font-weight:bolder;
}

.paginator_summary .pagination .active a {
    color:#000;
}


.studenidcard {
    width:474px;
    height:288px;
}


.studenidcard .cropped-v {
    position: absolute;
    top: 163px;
    left: 353px;
    height: 158px;
}


.facultyhistory {
    display:block;
    font-size:12px;
}


#historyTable.log #zff_message {
    width:90%;
}


.ck-editor__editable_inline {
    min-height: 500px;
}

.col-md-12 .image.image-style-side {
   text-align:center;
}

#accordionGroup .groupTitle {
    color:#17a2b8; 
    text-decoration:none; 
    font-weight:bolder;
}

#accordionGroup button:hover,
#accordionGroup button:focus
{
    
    text-decoration:none !important;
}

#accordionGroup {
    max-width:80%;
    margin: 1px auto 25px;
    border:none;
}

#accordionGroup .card {
    border:none !important;
}

#accordionGroup h5 {
    font-size: 0.8rem;
    padding:0;
}

.overlay_loader {
    position: fixed;
    width: 100%;
    height: 100%;
    z-index: 1000;
    top: 40%;
    left: 0px;
    opacity: 0.5;
    filter: alpha(opacity=50);
 }
 
 .btn-option{
     color: #fff;
     background-color: #013755;
     border-color: #013755;
 }
 
 .btn-option:hover {
  color: #fff;
  background-color: #0069d9;
  border-color: #0062cc;
}

.btn-option:focus, .btn-primary.focus {
  box-shadow: 0 0 0 0.2rem rgba(0, 123, 255, 0.5);
}

.btn-option:not(:disabled):not(.disabled):active, .btn-option:not(:disabled):not(.disabled).active,
.show > .btn-option.dropdown-toggle {
  color: #fff;
  background-color: #0062cc;
  border-color: #005cbf;
}

.btn-option:not(:disabled):not(.disabled):active:focus, .btn-option:not(:disabled):not(.disabled).active:focus,
.show > .btn-option.dropdown-toggle:focus {
  box-shadow: 0 0 0 0.2rem rgba(0, 123, 255, 0.5);
}

.navbar-header{
    width: 200px;
}