.navbar .container.expand .navbar-toggler {
    border-color: rgba(81, 119, 167, 1);
}

.navbar .container.expand .navbar-toggler:hover {
    border-color: rgba(255, 255, 255, 0.8);
}

.navbar .container.expand .navbar-toggler .navbar-toggler-icon {
    background-image: url("data:image/svg+xml,<svg viewBox='0 0 30 30' xmlns='http://www.w3.org/2000/svg'><path stroke='rgba(81, 119, 167, 1)' stroke-width='2' stroke-linecap='round' stroke-miterlimit='10' d='M4 7h22M4 15h22M4 23h22'/></svg>");
}

.navbar .container.expand .navbar-toggler:hover .navbar-toggler-icon {
    background-image: url("data:image/svg+xml,<svg viewBox='0 0 30 30' xmlns='http://www.w3.org/2000/svg'><path stroke='rgba(255, 255, 255, 0.8)' stroke-width='2' stroke-linecap='round' stroke-miterlimit='10' d='M4 7h22M4 15h22M4 23h22'/></svg>");
}

@media only screen and (max-width: 1600px) {
    /* [TASK] if has 2 column and effect 2 column */
    .col-md-4.c-board:first-child:nth-last-child(2),
    .col-md-4.c-board:first-child:nth-last-child(2)~.col-md-4.c-board {
        max-width: 50%;
        flex-basis: auto;
        margin-bottom: 1.5rem;
    }
}

@media only screen and (max-width: 1500px) {
    /* [CASE] if has 4 column and effect 4 column */
    .col-md.c-board:first-child:nth-last-child(4),
    .col-md.c-board:first-child:nth-last-child(4)~.col-md.c-board {
        width: 50%;
        flex-basis: auto;
        margin-bottom: 1.5rem;
    }

    /* [CASE] if has 4 column and effect column 3,4 */
    .col-md.c-board:first-child:nth-last-child(4)~.col-md.c-board:nth-child(3), .col-md.c-board:first-child:nth-last-child(4)~.col-md.c-board:nth-child(4){
        margin-bottom: 1.5rem;
    }
}

@media only screen and (max-width: 1400px) {
    .container.normal.menu .detail-box-right .col-md-10.offset-md-1 .col-md-3{
        max-width: 100%;
        flex: 0 0 30%;
    }

    .container.normal.menu .detail-box-right .col-md-10.offset-md-1 .col-md-5{
        max-width: 100%;
        flex: 0 0 60%;
    }

    .container.normal.menu .detail-box-right .col-md-10.offset-md-1 .col-md-9{
        max-width: 100%;
        flex: 0 0 100%;
    }

    .container.normal.menu .detail-box-right .col-md-10.offset-md-1 .add-new-under{
        position: relative;
        right: auto;
        margin-bottom: 7px;
    }

    .container.normal.menu .detail-box-right .col-md-10.offset-md-1 .color-box{
        margin-top: 7px;
        width:100%;
    }

    .container.normal.menu .detail-box-right .col-md-10.offset-md-1 .color-box .color{
        width:100%;
    }

    .modal .modal-dialog:not(.search){
        width: 100%;
        max-width: calc(100% - 17px);
        margin-left: 0;
    }

    .modal:not([data-scroll='0']) .modal-dialog:not(.search){
        width: 100%;
        max-width: calc(100% - 19px);
        margin-left: 10px;
    }
}

@media only screen and (max-width: 1200px) {
    .col-md.c-board {
        width: 100%;
        flex-basis: auto;
    }

    .container.normal.menu .detail-box-right .col-md-10.offset-md-1 .col-md-3{
        max-width: 100%;
        flex: 0 0 100%;
    }

    .container.normal.menu .detail-box-right .col-md-10.offset-md-1 .col-md-5{
        max-width: 100%;
        flex: 0 0 100%;
    }

    .container.normal.menu .box.col-md-4{
        flex: 0 0 100%;
        max-width: 100%;
        padding-left:0;
        padding-right:0;
    }

    .container.normal.menu .box.col-md-8{
        flex: 0 0 100%;
        max-width: 100%;
        padding-left:0;
        padding-right:0;
    }

    .container.normal.menu .detail-box-right button[type="submit"]{
        margin-top:7px;
    }
}

@media only screen and (max-width: 1199px) {
    .brand-box .brand-info{
        font-size: 1.989rem;
    }
}

@media only screen and (max-width: 1120px) {
    body.template-1 .nav-search input[type="text"] {
        width: 400px;
    }
}

@media only screen and (max-width: 1050px) {
    /* [TASK] if has 2 column and effect 2 column */
    .col-md-4.c-board:first-child:nth-last-child(2) .case-info .info-left,
    .col-md-4.c-board:first-child:nth-last-child(2)~.col-md-4.c-board .case-info .info-left {
        width: 60%;
    }
    /* [TASK] if has 2 column and effect 2 column */
    .col-md-4.c-board:first-child:nth-last-child(2) .case-info .info-right,
    .col-md-4.c-board:first-child:nth-last-child(2)~.col-md-4.c-board .case-info .info-right {
        width: 40%;
    }
}


@media only screen and (max-width: 1000px) {
    body.template-1 .nav-search input[type="text"] {
        width: 320px;
    }

    .settings.settings-box{
        display: block;
    }

    .settings.settings-box > .col-md-6.box{
        max-width: 100%;
        width: 100%;
    }
}

@media only screen and (max-width: 991px) {
    .modal.search .modal-dialog {
        width: 100%;
        max-width: calc(100% - 7px);
        margin-left: 12px;
    }

    .modal .modal-control.con{
        padding-left:0;
    }

    .brand-box .brand-info{
        font-size: 1.467rem;
    }
}

@media only screen and (max-width: 960px) {
    body.template-1 .nav-search input[type="text"] {
        width: 220px;
    }

    /* [TASK] if has 2 column and effect 2 column */
    .col-md-4.c-board:first-child:nth-last-child(2),
    .col-md-4.c-board:first-child:nth-last-child(2)~.col-md-4.c-board {
        max-width: 100%;
        flex-basis: auto;
        margin-bottom: 1.5rem;
    }
}

@media only screen and (max-width: 850px) {
    body.template-1 .nav-search input[type="text"] {
        width: 165px;
    }
}

@media only screen and (max-width: 767px) {
    .mobile{
        display: block;
    }

    .col-md.c-board {
        width: 100% !important;
        flex-basis: auto !important;
    }
    body.template-1 .nav-search input[type="text"] {
        width: 100%;
        margin-top: 7px;
    }
    .navbar-collapse .nav.nav-pills .nav-item {
        width: 100%;
        margin-bottom: 5px;
    }
    #navbarSupportedContent {
        margin-top: 10px;
        margin-bottom: 10px;
        background: #34547c;
        padding: 10px;
        border: solid 1px rgba(81, 119, 167, 1);
    }
    body.template-1 .nav-pills .nav-link.active {
        background: #203a5a;
    }
    #navbarSupportedContent ul.navbar-nav.control-box {
        display: block;
        padding-top: 15px;
    }
    #navbarSupportedContent ul.navbar-nav.control-box .nav-item:not(.profile) {
        display: inline-block;
    }
    #navbarSupportedContent ul.navbar-nav.control-box .nav-item.profile #navbarDropdown {
        padding-top: 7px;
    }

    /* menu setting */
    .container.normal.menu.full .box.col-md-4, .container.normal.menu.full .box.col-md-8.n-p-l{
        padding-left:0;
        padding-right:0;
    }

    .container.normal.menu.full .add-new-under{
        position: relative;
        right: unset;
        margin-top: 3px;
    }

    .modal button[type="submit"].btn.btn-success{
        margin-top:0;
    }

    .modal .modal-control.m-t.con{
        padding-left:0;
    }

    .frame-content > .note-box{
        right: auto;
        left: 0;
        top: -28px;
    }

    .modal.case .modal-content .modal-body{
        padding-top: 20px;
        padding-left: 10px;
        padding-right: 10px;
    }

    .modal.case .modal-content.edit-case-content .modal-header.case-edit-header, .modal.case .modal-content.add-case-content .modal-header{
        padding-top: 30px;
        padding-left: 11px;
        margin-bottom: 5px;
    }

    .modal.case .modal-content.add-case-content .modal-header{
        padding-top: 15px;
    }

    .modal-header .control-box{
        transform: scale(0.8);
        right: -17px;
        top: 0px;
    }

    .frame-content .window-info{
        padding-left:0;
    }

    .task-item .task-no{
        right: auto;
        left: 0;
    }

    .case-content .info.task-module .task-item .item.relative{
        padding-top: 20px;
    }

    .case-content .frame-content .col-lg-4:not(:first-child){
        margin-top:15px;
    }

    h3.case-module-title{
        font-size: 1.06rem;
        margin-top: 7px;
    }

    .modal .case-view{
        font-size:0.8rem;
    }

    .case-info .box-info .box-detail.box-1, .case-info .box-info .box-detail.box-2{
        width:100%;
    }

    .box-info .box-detail.box-2 .info-user{
        font-size: 0.6rem;
        display: block;
    }

    .modal .modal-header .case-info-id{
        left: 10px;
    }

    .modal .case-info-title{
        font-size: 1.5rem;
    }

    .case-view .case-info .case-info-detail{
        font-size: 0.8rem;
    }

    .window-info .info .tab-content{
        font-size: 0.8rem;
    }

    .window-info .info .tab-content .info-user{
        font-size: 0.6rem;
    }

    .modal .modal-content.task-content .modal-body{
        padding-top:0;
    }

    .modal-content.task-content .modal-body .frame-task-box.edit-task-box{
        margin-top: 26px;
    }

    .modal-content.task-content .modal-header.case-add-header{
        padding-top: 9px;
    }

    .modal-content.task-content form .case-module-title{
        margin-top: 7px;
    }

    .modal-content.task-content .modal-header.case-view-header{
        padding-top: 36px;
    }

    .modal-content.task-content .modal-header.case-edit-header{
        padding-top: 30px;
    }

    .activity-log-info .log-box{
        font-size:0.8rem;
    }

    .activity-log-info .log-box .info-user{
        font-size:0.6rem;
    }

    .log-box .log-item .log-info {
        width: 250px;
    }

    .activity-log-info .log-box .log-item{
        padding-left: 10px;
        padding-right: 10px;
    }

    .activity-log-info {
        padding: 4px 0;
    }

    .box-detail .table.case-detail.table-1{
        margin-bottom:0;
    }

    .box-detail .table.case-detail.table-2{
        margin-top:0;
    }

    .profile-box .box-left{
        width: 100%;
    }

    .profile-box .box-right{
        width: 100%;
        padding-top: 25px;
        padding-left: 10px;
        padding-right: 10px;
    }

    .profile-box .profile-view .header{
        font-size: 1.5rem;
    }

    .profile-box .profile-view .header-detail{
        font-size: 1rem;
        margin-bottom: 20px;
    }

    .profile-box .profile-view .form-group .col-sm-8.col-form-label{
        font-style: italic;
    }

    .dropdown-menu.fit{
        left:5px !important;
        min-width: auto !important;
    }

    .dropdown-menu.fit.case-in-task{
        left:42px !important;
    }

    .dropdown-menu.fit.case-in-task-action{
        left:42px !important;
    }

    .dropdown-menu.fit.in-task{
        left:5px !important;
    }

    .dropdown-menu.fit.in-task-action{
        left:5px !important;
    }

    .dropdown-menu.fit .dropdown-item{
        padding-left: 8px;
        padding-right: 8px;
    }

    .search-box .des-search{
        display: block;
        position: relative;
        padding-left: 10px;
        padding-right: 10px;
        padding-top: 0;
        padding-bottom: 15px;
        margin-top: -10px;
    }

    .search-box .result .items .item{
        padding: 12px 12px !important;
    }

    .item .booking-search-box:not(.mobile){
        display: none;
    }

    .item .booking-search-box.mobile{
        position: relative;
        width: 100%;
        margin-left: 3px;

        background: #466a98;
        color: #95b3d9;
        border: solid 1px #95b3d9;
        padding: 4px 7px 2px 7px;
        font-size: 12px;
        font-weight: bold;
    }

    .search-box .item .show-id{
        width: 100%;
        display: block;
    }

    .search-box .result .item .detail-info{
        margin-top: 15px;
    }

    .search-box .result .item .detail-info .ref{
        width: 100%;
        display: block;
    }

    .search-box .result .item .detail-info .ref.branch-info .info{
        width: 100%;
        display: block;
    }

    .search-box .result .item .detail-info{
        display: block;
    }

    .search-box .result .item .detail-info .ref:not(:first-child){
        margin-left:0;
        margin-top:7px;
    }

    .search-box .result .item .detail-info .ref.info-elapsed{
        display:flex;
        margin-top: 12px;
    }

    .search-box .elapsed-box:not(.mobile){
        display: none;
    }

    .search-box .info-elapsed .elapsed-box{
        margin-left: 8px;
        margin-right: auto;
    }

    .search-box .info-elapsed .image-box{
        margin-left:1px;
    }

    .container.task-box .info-elapsed .elapsed-box:not(.mobile), .container.case-box .info-elapsed .elapsed-box:not(.mobile){
        display: block;
    }

    .container.task-box .info-elapsed .elapsed-box.mobile, .container.case-box .info-elapsed .elapsed-box.mobile{
        display: none;
    }

    body.template-1 .nav-pills .nav-item:not(:first-child){
        margin-left:0;
    }

    .noti-box-alert{
        margin-left:4px;
    }

    #navbarSupportedContent ul.navbar-nav.nav-search-box{
        padding-left:1rem;
        padding-right:1rem;
    }

    .nav-item.dropdown.profile{
        margin-left:0;
    }

    .nav-item.dropdown.profile{
        padding-left: 1rem;
        padding-right: 1rem;
    }

    .nav-item-setting-box .nav-item-setting-box{
        margin-left:0;
    }

    .profile .dropdown-menu.dropdown-menu-right{
        box-shadow: none;
        background: #34547c;
        border: solid 1px rgba(81, 119, 167, 1);
    }

    .profile .dropdown-menu.dropdown-menu-right{
        padding:10px;
    }

    .profile .dropdown-menu.dropdown-menu-right a{
        padding: .5rem 1rem;
        border-radius: .25rem;
    }

    .dropdown-menu.dropdown-menu-right .dropdown-item:not(:last-child){
        margin-top:7px;
    }

    .brand-box .brand-info{
        font-size: 1.662rem;
    }

    /* max-width: 767px */
}

@media only screen and (max-width: 575px) {
    .brand-box .brand-info{
        font-size: 4.32vw;
    }
}

@media only screen and (max-width: 557px) {
    .brand-box .brand-info{
        font-size: 4.30vw;
    }
}

@media only screen and (max-width: 517px){
    .brand-box .brand-info {
        font-size: 4.29vw;
    }
}

@media only screen and (max-width: 517px){
    .brand-box .brand-info {
        font-size: 4.28vw;
    }
}

@media only screen and (max-width: 500px) {
    .container.task-box .info-elapsed .elapsed-box.mobile{
        display: block;
        margin-left: 7px;
        margin-right: auto;
    }

    .container.task-box .info-elapsed .elapsed-box:not(.mobile){
        display: none;
    }

    .container.task-box .card.board .card-body .branch-info .info-left{
        margin-bottom:7px;
    }

    .container.task-box .card.board .card-body .branch-info .info-left, .container.task-box .card.board .card-body .branch-info .info-right{
        width: 100%;
    }

    .container.task-box .card.board .card-body .branch-info .info-left .show-id{
        display: block;
    }

    .container.task-box .card.board .card-body .branch-info .info-right .info{
        display: block;
        text-align: left;
    }

    .container.task-box .card-body .case-info .info-left, .container.task-box .card-body .case-info .info-right{
        width:100% !important;
    }

    .container.task-box .card.board .card-body .case-info .info{
        display: block;
    }

    .container.task-box .card.board .card-body .case-info .info:not(:first-child){
        margin-left:0;
        margin-top: 7px;
    }

    .container.task-box .card.board .card-body .case-detail{
        font-size:1.2rem;
    }

    .container.task-box .card-body .case-info .info-right{
        margin-top:7px;
    }

    .container.task-box .info-elapsed{
        margin-top: 3px;
    }

    .container.task-box .info-elapsed .image-box{
        margin-left: 0;
    }

    .container.task-box .card.board .card-body .case-info .info-left .text:last-child{
        font-size:13px;
    }

    .container.task-box .card.board .card-body .case-info .info.success{
        margin-bottom: 2px;
    }

    /* max-width: 500px */
}

@media only screen and (max-width: 479px){
    .brand-box .brand-info {
        font-size: 4.27vw;
    }
}

@media only screen and (max-width: 463px){
    .brand-box .brand-info {
        font-size: 4.26vw;
    }
}


@media only screen and (max-width: 447px){
    .brand-box .brand-info {
        font-size: 4.25vw;
    }
}

@media only screen and (max-width: 433px){
    .brand-box .brand-info {
        font-size: 4.24vw;
    }
}

@media only screen and (max-width: 421px){
    .brand-box .brand-info {
        font-size: 4.23vw;
    }
}

@media only screen and (max-width: 407px){
    .brand-box .brand-info {
        font-size: 4.22vw;
    }
}

@media only screen and (max-width: 400px) {
    .container.case-box .info-elapsed .elapsed-box.mobile{
        display: block;
        margin-left: 7px;
        margin-right: auto;
    }

    .container.case-box .info-elapsed .elapsed-box:not(.mobile){
        display: none;
    }

    .container.case-box .card.board .card-body .branch-info .info-left{
        margin-bottom:7px;
    }

    .container.case-box .card.board .card-body .branch-info .info-left, .container.case-box .card.board .card-body .branch-info .info-right{
        width: 100%;
    }

    .container.case-box .card.board .card-body .branch-info .info-left .show-id{
        display: block;
    }

    .container.case-box .card.board .card-body .branch-info .info-right .info{
        display: block;
        text-align: left;
    }

    .container.case-box .card-body .case-info .info-left, .container.case-box .card-body .case-info .info-right{
        width:100% !important;
    }

    .container.case-box .card.board .card-body .case-info .info{
        display: block;
    }

    .container.case-box .card.board .card-body .case-info .info:not(:first-child){
        margin-left:0;
        margin-top: 7px;
    }

    .container.case-box .card.board .card-body .case-detail{
        font-size:1.2rem;
    }

    .container.case-box .card-body .case-info .info-right{
        margin-top:7px;
    }

    .container.case-box .info-elapsed{
        margin-top: 3px;
    }

    .container.case-box .info-elapsed .image-box{
        margin-left: 0;
    }

    .container.case-box .card.board .card-body .case-info .info-left .text:last-child{
        font-size:13px;
    }

    .container.case-box .card.board .card-body .case-info .info.success{
        margin-bottom: 2px;
    }

    .brand-box .brand-info {
        font-size: 6.49vw;
    }

    /* max-width: 400px */
}