@charset "UTF-8";

html, body{height: 100%}

img{max-width: 100%; height: auto}

#wrapper{
   --wrapper-side: 200px;
   display: grid;
   grid-template-columns: var(--wrapper-side) 1fr;
   position: relative;
   min-height: 100%
}
   #wrapper > main{
      display: grid;
      grid-template-rows: auto 1fr auto
   }
   #wrapper > main:only-child{
      /*grid-template-rows: 1fr auto;*/
      grid-column: auto/span 2
   }
   #wrapper > main > .is-login{
      display: flex;
      flex-wrap: wrap;
      align-items: center;
      justify-content: center;
   }

   #wrapper.is-login > main:only-child{grid-template-rows:  1fr auto; min-height: 100vh; min-height: 100dvh; min-height: 100svh}

#menu-toggle{color: inherit; padding: 0; width: 1.5rem; height: 1.5rem; border: none; background: none; position: relative}
#menu-toggle > span{display: block; width: 100%; height: 2px; position: absolute; top: 50%; background-color: currentColor; transform: translate(0, -50%); transition: opacity 0.3s 0.3s}
      #menu-toggle::before,
      #menu-toggle::after{content: ''; display: block; width: 100%; height: 2px; position: absolute; background-color: currentColor; transition: transform 0.3s, top 0.3s 0.3s, bottom 0.3s 0.3s}
      #menu-toggle::before{top: 2px}
      #menu-toggle::after{bottom: 2px}
   .toggled #menu-toggle > span{opacity: 0; transition: opacity 0.3s}
      .toggled #menu-toggle::before,
      .toggled #menu-toggle::after{transition: top 0.3s, bottom 0.3s, transform 0.3s 0.3s}
      .toggled #menu-toggle::before{top: calc(50% - 1px); transform: rotate(45deg)}
      .toggled #menu-toggle::after{bottom: calc(50% - 1px); transform: rotate(-45deg)}

.login-form{
   padding: 1.5rem;
   background-color: #fff;
   box-shadow: 0px 0px 50px 0px rgba(0,0,0,0.06);
   width: 100%;
   max-width: 600px;
}

/* =============================================================================
   header
   ========================================================================== */
.header--inner{
   display: grid;
   grid-template-rows: auto 1fr;
   position: fixed;
   top: 0;
   left: 0;
   height: 100%;
   overflow: hidden;
   width: var(--wrapper-side)
}
   .header--logo{padding: .5rem; height: 3.75rem; display: flex; flex-wrap: wrap; align-items: center; justify-content: center}
   .header--body{overflow-x: hidden; overflow-y: auto}

   #primary-nav,
   #primary-nav ul{list-style: none; padding: 0}
      #primary-nav a{
         color: #8d9498;
         text-decoration: none;
         display: block;
         padding: .625rem .9375rem;
         flex-grow: 1;
         flex: 1 0 0;
         transition: background-color .2s linear, color .2s linear;
      }
      #primary-nav a:hover,
      #primary-nav p{
         color: #8d9498;
         text-decoration: none;
         display: block;
         padding: .625rem .9375rem;
         flex-grow: 1;
         flex: 1 0 0;
         transition: background-color .2s linear, color .2s linear;
      }
      #primary-nav p:hover,
      #primary-nav [class*="current-menu-"] > a{color: #555; background-color: #F6F6F6}

      #primary-nav li{display: flex; flex-wrap: wrap}
         #primary-nav li > ul{width: 100%; flex: 0 0 100%}
         #primary-nav ul > li > a{padding-left: 1.875rem}

#primary-nav .sub-menu-toggle{
   display: flex;
   flex-wrap: wrap;
   align-items: center;
   justify-content: center;
   width: 2rem;
   cursor: pointer
}
#primary-nav .sub-menu-toggle svg{width: .625rem}

#primary-nav li form{
   margin: .625rem .9375rem
}

/* =============================================================================
   main content
   ========================================================================== */
/* main-header */
.main--head{
   background-color: var(--ama-primary-color);
   color: #fff;
   position: sticky;
   top: 0;
   padding: .3125rem var(--ama-gutter-x);
   height: 3.75rem;
   z-index: 10
}
   .main--head > .menu-toggle__container{flex: 1 0 0; display: flex; align-items: center; justify-content: flex-start}
   .main--head .dropdown-toggle{padding: 10px 0; border: none; background: none; color: inherit; display: inline-flex; align-items: center; min-height: 2.5rem}
   .main--head .dropdown + .dropdown{margin-left: 1.25rem}
   .main--head .educate-icon{font-size: 1.25rem}

   .main--head > * + *{margin-left: 1.25rem}

/* main-body */
.main--body{
   background-color: #F6F8FA;
   padding: var(--ama-gutter-x)
}
   .main--body > * + *:not(.row-grid){margin-top: var(--ama-gutter-x)}
   .main--body > * + .row-grid{margin-top: var(--ama-gutter-x)}

/* main-footer */
.main--footer{
   background-color: var(--ama-primary-color);
   color: #fff;
   padding: var(--ama-gutter-x)
}

/* =============================================================================
   content
   ========================================================================== */
.classic-editor ul:not([class]){padding-left: 0; list-style: none}
   .classic-editor ul:not([class]) li{padding-left: 1.25rem}

      .classic-editor ul:not([class]) li::before{content: ''; display: inline-block; width: .5rem; height: .5rem; border-radius: 50%; background: var(--ama-marker-color); margin-left: -1.25rem; margin-right: .75rem}

      .classic-editor ul:not([class]) li + li,
      .classic-editor li ul,
      .classic-editor li ol{margin-top: var(--ama-margin-top-li)}

.classic-editor * + *{margin-top: var(--ama-margin-top-base)}
.classic-editor * + ul{margin-top: 1.25rem}

.col-section + .col-section{margin-top: 30px}

/* =============================================================================
   animated close icon
   ========================================================================== */
.remove:not(.col-2), .btn-close{position: relative; display: block; overflow: hidden; text-decoration: none}
.remove:not(.col-2)::before, .remove:not(.col-2)::after,
.btn-close::before, .btn-close::after{content: ''; display: block; width: 12px; height: 2px; position: absolute; top: calc(50% - 1px); left: calc(50% - 6px); background-color: currentColor; transition: background-color .2s ease-in-out, transform .2s ease-in-out, width .2s ease-in-out}
.remove:not(.col-2)::before, .btn-close::before{transform: rotate(45deg)}
.remove:not(.col-2)::after, .btn-close::after{transform: rotate(-45deg)}
.remove:not(.col-2):hover::before, .remove:not(.col-2):hover::after,
.btn-close:hover::before, .btn-close:hover::after{transform: rotate(0)}

/* =============================================================================
   calendar
   ========================================================================== */
.fc button, .fc-button-group, .fc-time-grid .fc-event .fc-time span{display: block}
.calender-inner .fc-state-default{background: #006DF0; color: #fff; background-image: none; text-shadow: none; outline: none}
.fc-content .fc-time{color: #fff; font-size: 14px}
.fc-content .fc-title{color: #fff; padding: 5px; display: inline-block; font-size: 14px}

/* =============================================================================
   media query
   ========================================================================== */
@media (min-width: 1100px){
   #menu-toggle{display: none!important}
}
@media (max-width: 1099px){
   #wrapper{
      grid-template-columns: 0 1fr;
      gap: 0
   }

   body.toggled{overflow: hidden}
   body .header--inner{
      position: fixed;
      top: 60px;
      height: calc(100% - 60px);
      z-index: 100;
      left: -100%;
      background-color: #fff;
      transition: left .4s linear
   }
   body.toggled #wrapper::after{
      content: '';
      display: block;
      position: fixed;
      top: 60px;
      left: 0;
      width: 100%;
      height: calc(100% - 60px);
      background-color: rgba(0, 0, 0, .7)
   }
   body.toggled .header--inner{
      left: 0;
      width: 100%;
      max-width: 320px
   }
}

#uploader{padding-top: 0!important}


.modal-body > * + *{margin-top: 0.625rem}
.modal-body > * + .modal-input-group,
.modal-body > .modal-input-group + *{margin-top: 1.25rem}


.ama-inline__flex{
   display: inline-flex;
   flex-wrap: wrap;
   align-items: center;
   margin: -.3125rem
}
   .ama-inline__flex > *{display: block; margin: .3125rem}
   .ama-inline__flex > .form-select,
   .ama-inline__flex > .form-control{width: unset}

   .ama_clear,
   .ama_delete {
       cursor: pointer;
       color: red;
   }

   .ama_list_row {
       padding-bottom: 3px;
       margin-left: -30px;
   }

#ama_notification_modal{
   position: fixed;
   top: 1.25rem;
   right: 1.25rem;
   user-select: none;
   pointer-events: none;
   z-index: 10000
}
   #ama_notification_modal .ama_notification:not([style="display:none;"]){
      pointer-events: all
   }
      .alert > .btn-close{padding: 0.25rem; top: 4px; right: 4px}


.persons_list {
    list-style-type: none;
}
.persons_list li{
    padding-top: 5px;
}

.load_result_image{
    width: 100px;
    height: 100px;
    content-visibility: auto;
}
   .load_result_image > input[type="radio"]{
      position: absolute;
      top: 6px;
      right: 6px;
      width: 16px;
      height: 16px;
      cursor: pointer;
   }
   .load_result_image .ama_delete{width: 100%}
   .load_result_image .ama_delete svg{width: 16px; height: auto}

.row-grid.ama_images{
   margin: -6px
}
   .row-grid.ama_images > *{padding: 6px}