#app-action-section {
    position: fixed;
    height: var(--app-action-height);
    width: 100%;
    left: 0;
    right: 0;
    bottom: 0;
    z-index: 100;
}
#app-action-section>.action-container {
    position: relative;
    height: 100%;
    padding: 0;
}

.action-card {
    position: relative;
    width: 100%;
    height: 100%;
    display: flex;
    flex-wrap: nowrap;
    align-items: baseline;
    bottom: 0;
    background-color: rgba(var(--rw-rgb-color-white), 1);
    color: rgba(var(--rw-rgb-color-black),1) !important;
    -webkit-backdrop-filter: saturate(100%) blur(10px);
    -moz-backdrop-filter: saturate(100%) blur(10px);
    -ms-backdrop-filter: saturate(100%) blur(10px);
    -o-backdrop-filter: saturate(100%) blur(10px);
    backdrop-filter: saturate(100%) blur(10px);

    /* background-color: rgba(var(--rw-rgb-color-white), 1); */
    /* color: rgba(var(--rw-rgb-color-black),1) !important; */
    border-top-left-radius: 20px;
    border-top-right-radius: 20px;
    box-shadow: 0 0 20px rgba(var(--rw-rgb-color-black),0.5);
    transition: bottom 0.1s ease;
    -webkit-transition: bottom 0.1s ease;
    -moz-transition: bottom 0.1s ease;
    -ms-transition: bottom 0.1s ease;
    -o-transition: bottom 0.1s ease;
}
#app-action-section.off .action-card {
    bottom: -120px;
}
.action-card .action-row,
.action-card .action-row>.action-col {
    position: relative;
}
.action-card .action-row {   
    display: flex;
    align-items: stretch;
    height: 100%;
    width: 100%;
}
.action-card .action-row>.action-col {
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 30px 20px;
    flex: 1 0 0;
}
.action-card .action-row>.action-col.flex-none {
    flex: none !important;
}
.action-card .action-row>.action-col.this-col-left {
    flex: 1 0 0;
    padding-right: 10px;
}
.action-card .action-row>.action-col.this-col-left.text-left {
    justify-content: flex-start;
}
.action-card .action-row>.action-col.this-col-right {
    flex: 1 0 0;
    padding-left: 10px;
}
.action-card .action-row>.action-col.this-col-right.text-right {
    justify-content: flex-end;
}
.action-card .action-row>.action-col.this-col-center {
    width: 100px;
    flex: none !important;
}
.action-card .action-row>.action-col.this-col-full {
    width: 100% !important;
}

.action-card .action-row>.action-col.this-col-center #capture-btn {
    position: absolute;
    display: flex;
    align-items: center;
    justify-content: center;
    width: 100%;
    height: 110px;
    left: 0;
    right: 0;
    bottom: 0;
    border-top-left-radius: 100%;
    border-top-right-radius: 100%;
    cursor: pointer;
    overflow: hidden;
    background-color: rgba(var(--rw-rgb-btn-color-primary-1),1);
    color: rgba(var(--rw-rgb-btn-color-primary-text-color),1);
    font-size: 50px;
    line-height: 40px;
    padding-top: 10px;
    transition: height 0.1s ease;
    -webkit-transition: height 0.1s ease;
    -moz-transition: height 0.1s ease;
    -ms-transition: height 0.1s ease;
    -o-transition: height 0.1s ease;
}
.action-card .action-row>.action-col.this-col-center #capture-btn:active {   
    height: 100px;
}

.action-card .action-row>.action-col.this-col-right #gallery-btn {}
.action-card .action-row>.action-col.this-col-right #gallery-btn .icon,
.action-card .action-row>.action-col.this-col-right #gallery-btn .text {
    z-index: 1;
}
.action-card .action-row>.action-col.this-col-right #gallery-btn #select-file-img {
    position: absolute;
    opacity: 0;
    /* display: none; */
    width: 100%;
    max-width: 100%;
    left: 0;
    right: 0;
    overflow: hidden;
    z-index: 3;
    cursor: pointer !important;
}

ul.action-btn-group,
ul.action-btn-group>li {
    position: relative;
    padding: 0;
    margin: 0;
    list-style: none;
}
ul.action-btn-group {
    display: flex;
    flex-wrap: nowrap;
    align-items: center;
    justify-content: center;
    width: 100%;
}
ul.action-btn-group>li+li {
    margin-left: 5px;
}
ul.action-btn-group.divider>li+li {
    margin-left: 10px;
    padding-left: 10px;
}
ul.action-btn-group.divider>li+li:before,
ul.action-btn-group>li.divider:before {
    position: absolute;
    content: "";
    left: 0;
    top: 0;
    bottom: 0;
    border-left: 1px solid rgba(var(--rw-rgb-color-black),1);
    opacity: 0.3;
}
ul.action-btn-group>li.divider {
    margin-left: 10px;
    padding-left: 10px;
}


.action-btn {
    position: relative;
    display: flex;
    flex-wrap: nowrap;
    align-items: center;
    cursor: pointer !important;
    height: 40px;
    line-height: 40px;
    opacity: 1;
    transition: all 0.2s ease;
    -webkit-transition: all 0.2s ease;
    -moz-transition: all 0.2s ease;
    -ms-transition: all 0.2s ease;
    -o-transition: all 0.2s ease;
}
.action-btn>.icon {
    font-size: 22px;
    position: relative;
    display: inline-block;
}
.action-btn>.icon+.text,
.action-btn>.text+.icon {
    margin-left: 10px;
}
.action-btn>.text {
    font-weight: 400;
}
.action-btn.bg,
.bg-hover-btn {
    padding: 0 15px;
    border-radius: 10px;
    background-color: rgba(var(--rw-rgb-btn-hover-color-gray),0) !important;
    color: rgba(var(--rw-rgb-btn-hover-color-gray-tc),1) !important;
    /* background-color: rgba(var(--rw-rgb-btn-hover-color-white),0) !important;
    color: rgba(var(--rw-rgb-btn-hover-color-white-tc),1) !important; */
}
.action-btn.bg,
.bg-hover-btn:hover {
    background-color: rgba(var(--rw-rgb-btn-hover-color-gray),1) !important;
}
.action-btn.bg.primary,
.bg-hover-btn.primary {
    background-color: rgba(var(--rw-rgb-btn-hover-color-primary),0) !important;
    color: rgba(var(--rw-rgb-btn-hover-color-primary-tc),1) !important;
}
.action-btn.bg.primary,
.bg-hover-btn.primary:hover {
    background-color: rgba(var(--rw-rgb-btn-hover-color-primary),0.15) !important;
}

.action-btn.bg.active,
.bg-hover-btn.active  {
    background-color: rgba(var(--rw-rgb-btn-hover-color-primary),0.15) !important;
    color: rgba(var(--rw-rgb-btn-hover-color-primary-tc),1) !important;
}

.action-btn.action-icon-btn {
    padding: 0;
    width: 40px;
    justify-content: center;
}

/* disable */
.action-btn.disable {
    cursor: no-drop !important;
    opacity: 0.4;
}
.action-btn.disable,
.action-btn.disable:before,
.action-btn.disable.bg.primary,
.action-btn.disable.bg-hover-btn.primary:hover {
    background: none !important;
}

/* xxl */
@media (min-width: 1400px) {}

/* xxl - 1 */
@media (min-width:1500px) and (max-width: 1599.98px) {}

/* xxl - 2 */
@media (min-width: 1400px) and (max-width: 1499.98px) {}

/* xl */
@media (min-width: 1200px) and (max-width: 1399.98px) {}

/* lg */
@media (min-width: 992px) and (max-width: 1199.98px) {}

/* md */
@media (min-width: 768px) and (max-width: 991.98px) {}

/* sm - xs */
@media (max-width: 767.98px) {

#app-action-section>.action-container {
    padding: 0;
}

}

/* sm */
@media (min-width: 576px) and (max-width: 767.98px) {}

/* xs */
@media (max-width: 575.98px) {

#app-action-section {
    height: var(--app-action-height-mobile);
}
.action-card .action-row>.action-col {
    padding: 10px;
}
.action-btn>.icon+.text,
.action-btn>.text+.icon {
    margin-left: 8px;
}
/* .action-btn {
    height: 35px;
    line-height: 35px;
} */
.action-btn.bg, .bg-hover-btn {
    padding: 0 12px;
}

}

/* xs custom */
@media (max-width: 399.98px) {}