@import "color";

/* management page */

@panel-margin: 2vw;
@panel-padding: 2vw;
@block-round-corner: 4px;
@content-list-item-gap: 8px;
.controller-page {
    background-color: @bg-color;
    position: relative;
    width: 100vw;
    height: 100vh;
    display: block;
    text-align: center;
    overflow-x: hidden;
}
.controller-page .panel {
    position: relative;
    display: inline-block;
    background-color: @white;
    padding: @panel-padding;
    width: 100vw - 2*@panel-margin;
    min-height: 100vh - 1*@panel-margin;
    margin: @panel-margin auto 0 auto;
    border-radius: @block-round-corner;
    text-align: center;
    box-shadow: 0 10px 60px 0 rgba(29, 29, 31, .09);
}
.controller-page .panel .content-list {
    position: relative;
    margin: 0 auto;
}
.controller-page .panel .content-list .content-list-item {
    margin: @content-list-item-gap auto;
    border-radius: @block-round-corner;
    border: 1px solid @black;
    height: @list-item-height;
}
.controller-page .btn.active, .btn:active{
    -webkit-box-shadow: none !important;
    box-shadow: none !important;
}
/* blocks */

.controller-page .panel.block {
    min-height: 4vh;
}
.controller-page .panel.block-8vh {
    min-height: 8vh;
}
.controller-page .panel.block-10vh {
    min-height: 10vh;
}
.controller-page .panel.block-12vh {
    min-height: 12vh;
}
.controller-page .panel.block-16vh {
    min-height: 16vh;
}
.controller-page .panel.block-20vh {
    min-height: 20vh;
}
.controller-page .panel.block-30vh {
    min-height: 30vh;
}
.controller-page .panel.block-40vh {
    min-height: 40vh;
}
.controller-page .panel.block-50vh {
    min-height: 50vh;
}
.controller-page .panel.block-60vh {
    min-height: 60vh;
}
.controller-page .panel.block-68vh {
    min-height: 68vh;
}
.controller-page .panel.block-72vh {
    min-height: 72vh;
}
.controller-page .panel.block-80vh {
    min-height: 80vh;
}
.text-14px {
    font-size: 14px;
}
.text-16px {
    font-size: 16px;
}
.text-18px {
    font-size: 18px;
}
.text-20px {
    font-size: 20px;
}
.text-22px {
    font-size: 22px;
}
.text-24px {
    font-size: 24px;
}

/*
.controller-page .panel .table {
    width: 90vw;
}
.controller-page .panel .table .title-row {
    height: 6vh;
}
.controller-page .panel .table .single-row {
    height: 5vh;
}
*/


/* photo gallery page*/

.gallery-page {}

/* feature style */

.block-shadow {
    box-shadow: 0 10px 60px 0 rgba(29, 29, 31, .09);
}
.picture-shadow-block {
    box-shadow: 0px 0px 1px 0.5px #ccc;
}
.bold-text {
    font-weight: bold;
}
.hidden {
    display: none;
}

/* custom bootstrap style*/

td {
    text-align: left;
}
.table-bordered {
    border-color: @pink-border;
}

/*
.table-striped > tbody > tr:nth-child(2n+1) > td,
.table-striped > tbody > tr:nth-child(2n+1) > th {
    background-color: #ffd9de;
}
*/
.grey-text {
    color: @grey !important;
}
.black-text {
    color: #000 !important;
}
.pink-text {
    color: @pink-text !important;
}
.pink-border {
    border-color: @pink-border !important;
}
.table {
    /*border-collapse: separate;*/
}
.table.pink > tbody > tr > td,
.table.pink > tbody > tr > th,
.table.pink > tfoot > tr > td,
.table.pink > tfoot > tr > th,
.table.pink > thead > tr > td,
.table.pink > thead > tr > th {
    border-color: @pink-border;
}
.table>tbody>tr>td,
.table>tbody>tr>th,
.table>tfoot>tr>td,
.table>tfoot>tr>th,
.table>thead>tr>td,
.table>thead>tr>th {
    padding: 8px 8px;
}
.btn-default.pink {
    border-color: @pink-border;
    color: @pink-border;
}
.btn-primary.pink {
    color: @white !important;
    border-color: @pink-border !important;
    background-color: @pink-border !important;
}
.btn-default.pink:hover,
.btn-default.pink:active:hover,
.btn-default.pink.active:hover,
.open > .dropdown-toggle.btn-default.pink:hover,
.btn-default.pink:active:focus,
.btn-default.pink.active:focus,
.open > .dropdown-toggle.btn-default.pink:focus,
.btn-default.pink:active.focus,
.btn-default.pink.active.focus,
.open > .dropdown-toggle.btn-default.pink.focus,
.btn-default.pink:focus,
.btn-default.pink.focus {
    border-color: @pink-border!important;
    background-color: transparent;
    color: @pink-border;
}
.navbar {
    margin-bottom: 0px;
    text-align: center;
}
@nav-height: 8vh;
.bd-navbar {
    position: -webkit-sticky;
    position: sticky;
    top: 0;
    z-index: 1024;
    min-height: @nav-height;
    background-color: @white;
    box-shadow: 0 0.5rem 1rem rgba(0, 0, 0, .05);
}
.navbar .btn-nav {
    color: @pink-border;
}
.navbar .btn-nav .fa {
    margin: 0px 1vw;
    line-height: @nav-height*0.75;
    height: @nav-height*0.75;
    vertical-align: middle;
    font-size: 18px;
    font-weight: bold;
}
.navbar .btn-nav span {
    font-size: 16px;
    vertical-align: middle;
}
.navbar .nav-left {
    position: absolute;
    left: 0;
}
.navbar .nav-right {
    position: absolute;
    right: 0;
}
.navbar .title {
    display: inline-block;
    font-size: 20px;
    font-weight: bold;
    height: @nav-height;
    line-height: @nav-height;
}
.align-left {
    position: absolute;
    left: 4vw;
}
.align-right {
    position: absolute;
    right: 4vw;
}
.table-striped.pink > tbody > tr:nth-of-type(odd) {
    background-color: @pink-table-bg;
}
.btn-primary:hover,
.btn-primary:active:hover,
.btn-primary.active:hover,
.open > .dropdown-toggle.btn-primary:hover,
.btn-primary:active:focus,
.btn-primary.active:focus,
.open > .dropdown-toggle.btn-primary:focus,
.btn-primary:active.focus,
.btn-primary.active.focus,
.open > .dropdown-toggle.btn-primary.focus,
.btn-primary:focus,
.btn-primary.focus {
    border-color: @pink-text !important;
    background-color: @pink-text !important;
}
.pb-2,
.py-2 {
    padding-bottom: .5rem!important;
}
.mb-0,
.my-0 {
    margin-bottom: 0!important;
}
.media {
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-align: start;
    -ms-flex-align: start;
    align-items: flex-start;
}

/* color */

.pink-bg {
    background-color: @pink-bg !important;
}
.border-bottom {
    border-bottom: 1px solid #dee2e6!important;
}

/* shape */

.round {
    display: inline-block;
    border-radius: 50%;
}
.round-16vw {
    display: inline-block;
    border-radius: 50%;
    width: 16vw;
    height: 16vw;
}
.text-small {
    font-size: 12px !important;
}

/* bootstrap form */

@form-item-height: 40px;
@form-item-font-size: 16px;
.form-ctrl .input-group {
    width: 100%;
}
.form-ctrl .input-group span.form-height,
button.form-height,
input.form-height {
    height: @form-item-height;
}
.form-ctrl .input-group .btn {
    width: 100%;
    font-size: @form-item-font-size;
}
.input-group .input-icon {
    width: 4vw;
}
.pink .input-group-addon {
    border-color: @pink-border;
}
.pink .form-control {
    border-color: @pink-border;
}
.pink .form-control:focus{
    border-color: @pink-border;
    outline: 0;
    -webkit-box-shadow: inset 0 1px 1px rgba(0,0,0,.075), 0 0 8px @pink-transparent;
    box-shadow: inset 0 1px 1px rgba(0,0,0,.075), 0 0 8px @pink-transparent;
}
.pink .fa {
    color: @pink-text;
}
.pink input::-webkit-input-placeholder {
    /* Chrome/Opera/Safari */
    color: @pink-placeholder;
}
.pink input::-moz-placeholder {
    /* Firefox 19+ */
    color: @pink-placeholder;
}
.pink input:-ms-input-placeholder {
    /* IE 10+ */
    color: @pink-placeholder;
}
.pink input:-moz-placeholder {
    /* Firefox 18- */
    color: @pink-placeholder;
}
.input-group-addon {
    background-color: #f7f7f7;
}