@import "_valiables.scss";
@import "_common.scss";

.row::before, .row::after{
    width:0;
}

.row-eq-height {
    & > [class^="col-"] {
        margin-bottom: 20px;
    }

    .box{
        height:100%; 
    }
}

.help_personal{
    color: #f1f117;
}

.main-header .logo{
    .logo-lg {
        display: flex !important;
        align-items: center;
        justify-content: center;
        height: 50px;
        line-height: 50px;
        
        img{
            max-width: 200px;
            max-height: 40px;
        }
    }
    .logo-mini img{
        max-width: 50px;
        max-height: 40px;
    }
}

.sidebar-mini.sidebar-collapse .main-header .logo>.logo-lg {
    display: none !important;
}

.form-revision .form-group{
    margin-bottom: 0;
}

.colorpicker-element .input-group-addon{
    cursor: pointer;
}

.user-avatar{
    width: 22px;
    height: 22px;
    margin-right: 3px;
    border-radius: 50%;
}

.user-avatar-block{
    margin-right: 3px;
}

/*  Search */
.sidebar-menu>li>a>.fa, .sidebar-menu>li>a>.glyphicon, .sidebar-menu>li>a>.ion, .sidebar-menu .treeview-menu>li>a>.fa, .sidebar-menu .treeview-menu>li>a>.glyphicon, .sidebar-menu .treeview-menu>li>a>.ion{
    text-align: center;
    margin-right: 2px;
}
.sidebar-menu>li>a, .sidebar-menu .treeview-menu>li>a{
    padding-left: 10px !important;
}

.sidebar .user-panel>.image>img{
    width:45px;
    height:45px;
}

.sidebar-collapse .sidebar .user-panel>.image>img{
    width:30px;
    height:30px;
}

.sidebar-toggle{
    position: relative;
}

.search-form {
    width: 400px;
    max-width: 70%;
    margin: 10px 0 0 20px;
    border-radius: 3px;
    float: left;

    input[type="text"] {
        color: #666;
        border: 0;
    }

    .btn {
        color: #999;
        background-color: #fff;
        border: 0;
    }
}

// navbar
.navbar-notify{
    .container-notify{
        font-size:20px; 
        padding-top:15px; 
        padding-bottom:15px;

        .label-danger{
            font-size:12px;
        }
    }
    
    .slimScrollDiv, .slimScrollDiv .menu{
        height:auto !important;
    }

    .fa-bell.ring {
        animation: ring_notify 2.4s ease;
        transform-origin: 50% 0%;
    }
}

[copyScript]{
    cursor: pointer;
}

@keyframes ring_notify {
    0% { transform: rotate(-15deg) }
    1.66667% { transform: rotate(15deg) }
    3.33333% { transform: rotate(-18deg) }
    5% { transform: rotate(18deg) }
    6.66667% { transform: rotate(-22deg) }
    8.33333% { transform: rotate(22deg) }
    10% { transform: rotate(-18deg) }
    11.66667% { transform: rotate(18deg) }
    13.33333% { transform: rotate(-12deg) }
    15% { transform: rotate(12deg) }
    16.66667% { transform: rotate(0deg) }
    100% { transform: rotate(0deg) }
  }

body .main-header .navbar .nav>li>a>.label{
    font-size:11px;
}
body .navbar-nav>.notifications-menu>.dropdown-menu, .navbar-nav>.messages-menu>.dropdown-menu, .navbar-nav>.tasks-menu>.dropdown-menu{
    width:400px;
}

.skin-red .navbar-notify .label-danger, .skin-red-light .navbar-notify .label-danger{
    background-color:yellow !important;
    color:black !important;
}

.ui-autocomplete {
    z-index: 1031;
}

.search-item-icon {
    display: inline-block;
    font-size: 0.9em;
    margin: 0 5px 0 2px;
    padding: 2px 5px;
    background-color: #3c8dbc;
    border-radius:5px;
    color:white;
}
.search-item-icon i{
    padding-right:2px;
}

.table-hover > tbody > tr:hover {
    background-color: #DFDFDF;
    cursor:pointer;
}

.ul-hover > li:hover {
    background-color: #DFDFDF;
    cursor: pointer;
}

// has-many-table
.has-many-table{
    .input-group{
        margin-left:auto;
        margin-right: auto;
    }
    .bootstrap-switch{
        display:block;
        margin:0 auto;
    }

    .has-error .control-label{
        text-align:left;
    }
    
}

.dropdown-menu .dropdown-header{
    font-size: 10px;
    padding-left: 10px;
}

// form
.input-group .input-group-addon{
    min-width: 45px;
}

.embed-value-form .gridembeds-row{
    margin-bottom: 2em;

    &:last-child{
        margin-bottom: 0;
    }
}

// checkbox table
.checkbox label.checkboxone-label{
    padding-left: 0;
}

.checkboxtable{
    .checkboxtable-header{
        height:50px;
        vertical-align: bottom;
    }

    .checkboxtable-body{
        height:30px;
        vertical-align: middle;
    }
}

.box-body .nav-tabs-custom>.tab-content{
    padding-top: 30px;
    padding-bottom: 30px;
}

.box-body .nav-tabs-custom>.nav-tabs>li.active>a, .box-body .nav-tabs-custom>.nav-tabs>li.active:hover>a{
    background-color: #d7e6ef;
}


.calc_formula_modal{
    .col-value-item{
        margin:2px;
        padding: 4px 5px;
        border: 1px solid black;
        display: inline-block;
        border-radius: 3px;
    }
    .col-value-item span{
        padding: 0px 12px;
    }
    .col-target .col-target-block{
        margin-bottom: 2em;
    }
    .col-target .col-target-block h5,.col-value h5{
        margin-bottom: 0.25em;
    }
    .col-target-block-column .btn{
        margin-top: 2px;
        margin-bottom: 2px;
    }
    .col-value-item-remove{
        cursor: pointer;
    }
}

/* box-show */
.box.box-solid.box-default.box-show{
    border: none;

    .box-body{
        padding-top: 7px;
        word-wrap: break-word;
    }
}

/* box-dashboard */
.row.row-dashboard{
    margin-bottom: 20px;
}

.box.box-dashboard{
    
    .box-body{
        padding-bottom: 0;
    }
    .box-body .box-body-inner-header{
        overflow: hidden;
        padding: 5px 0;
    }
    .box-body .box-body-inner-body{
        overflow: auto;
        min-height:150px;
        max-height:400px;
        margin-top: 1em;
    }
    table{
        margin-bottom:0;
        
        td, th {
            word-wrap : break-word;
        }
    } 

    .pagination{
        margin-bottom: 0;
    }
}

.modal-dialog{
    overflow-y: initial !important;
}
.modal-body{
    max-height: calc(100vmin - 200px);
    overflow-y: auto;
    overflow-x: hidden;
}
.modal-body-overflow-hidden .modal-body{
    overflow: hidden;
}

.modal-heightfix{
    &.modal-dialog{
        height: 90%;
    }

    .modal-content{
        height:100%;
    }

    .modal-body{
        height: calc(90vh - 130px);
        max-height: none;
    }
}

.modal-tile {
    .groupheader{
        font-size: 17px;
    }

    .row{
        //margin-bottom: 1em;
        display: flex;
        flex-wrap: wrap;
    }
    // .row:last-child{
    //     margin-bottom: -1.5em;
    // }

    .modal-tile-col{
        margin-bottom: 1em;
    }

    .modal-tile-item {
        display: flex;
        align-items: center;
        justify-content: center;
        min-height: 100px;
        .sub-buttons {
            margin-top: 0.5em;
            
            .btn{
                margin-top:0.2em;
            }
        }
    }
    .modal-tile-item-icon {
        display: flex;
        align-items: center;
        justify-content: center;
        a.btn {
            width: 70px;
            height: 60px;
            display: flex;
            justify-content: center;
            align-items: center;
            .fa {
                //font-size: 40px;
            }
        }
        .fa {
            font-size: 40px;
        }
    }
    .modal-tile-item-header {
        font-size: 15px;
    }
    .modal-tile-item-description {
        font-size: 12px;
    }
    
    
}

// tinymce
.mce-window.mce-in .mce-open{
    display: none;
}
.show-tinymce img{
    max-width: 100%;
}

.has-error {
    .btn-valuemodal, .text-valuemodal, .checkbox, .checkbox-inline, .control-label, .help-block, .radio, .radio-inline{
        color:#dd4b39 !important;
    }
    .select2-container--default .select2-selection--single, .select2-selection .select2-selection--single{
        border-color:#dd4b39;
    }

    .fa, .has-error-text{
        color:#dd4b39;
    }
}

.column-__actions__{
    min-width: 50px;

    // .fa{
    //     margin: 0 1px;
    // }
}

.bootstrap-duallistbox-container > div:last-child select{
    background-color: #fff900a3;
}
.bootstrap-duallistbox-container label{
    font-size: 0.9em;
}

.file-drop-zone .file-drop-zone-title{
    padding-top: 35px;
    padding-bottom: 35px;
}

/* flexheight */
.flexheight{
    display: flex;
    flex-wrap: wrap;
    
    .flexheight-inner{
        height: 100%;
    }
}

.swal2-container {
    zoom: 1.3;
}

[data-help-text] {
    cursor: pointer;
}

.form-group .radio-inline:first-child{
    padding-left: 0;
}

.form-group-vertical{
    margin-bottom: 10px;
}

.form-group-showhtml{
    margin-bottom: 15px;
    overflow: hidden;
}

// data image style
table img.image_html{
    max-width: 200px;
    max-height: 200px;

    &:hover{
        opacity: 0.8;
    }
}

.box-show img.image_html{
    max-width: 100%;
    max-height: 250px;
    
    &:hover{
        opacity: 0.8;
    }
}

.dd-item{
    cursor: move;
}

.commentline{
    word-wrap: break-word;
    
    .commentline_header{
        margin-bottom: 5px;
    }
}


.system-values{
    margin:0 auto;
    width:830px;
    
    .system-values-label{
        margin:0 0 5px;
        font-weight: bold;
    }

    p{
        margin-bottom: 0;
    }

    .system-values-list{
        display: inline-flex;
        text-align: left;
        flex-wrap: wrap;
        margin: 0;
        padding: 0;
        font-size: 0.9em;
    
        li{
            list-style: none;
            border-left: solid 6px #2d8fdd;
            margin:0.5em 2px;
            padding: 0.4em 8px;
            width:160px; 
        }
    }

    .system-values-flows{
        margin-bottom: 0.5em;

        .system-values-label{
            margin-right:0.5em;
            display: inline-block;
        }

        .system-values-item{
            display: inline-block;
        }

        .system-values-flow{
            margin-right: 2em;
            display: inline-block;
        }
    }
}

@media (max-width: 1040px)
{

    .system-values{
        width:auto;
        
        .system-values-label{
            min-width: 100px;
            margin-bottom: 0;
        }
    
        p{
            display: inline-block;
        }
    
        .system-values-list{
            display: block;
        
            li{
                width:100%; 
                border: none;
                margin-bottom: 5px;
            }
        }
            

        .system-values-flows{
            margin-bottom: 0;
            font-size: 0.9em;

            .system-values-flow{
                display: block;
                margin: 0.5em 2px;
                padding: 0.4em 8px;
            }
        }
    }
    
}


// workflow
.workflow_table_item{
    margin-bottom: 0.7em;
}

.has-many-table-workflow_histories-table{
    th, td{
        text-align: center;
    }

    tr td:nth-last-child(2){
        text-align: left;
    }

    .box-body{
        padding: 0;
    }
}

.skin-blue .system-values li, .skin-blue-light .system-values li{
    border-left-color:#3c8dbc;
}
.skin-yellow .system-values li, .skin-yellow-light .system-values li{
    border-left-color:#f39c12;
}
.skin-green .system-values li, .skin-green-light .system-values li{
    border-left-color:#00a65a;
}
.skin-red .system-values li, .skin-red-light .system-values li{
    border-left-color:#dd4b39;
}
.skin-purple .system-values li, .skin-purple-light .system-values li{
    border-left-color:#605ca8;
}

@media (max-width: 992px)
{
    .navbar{
        .sidebar-toggle{
            width: 42px;
        }
    
        .search-form{
            width:100%;
            margin-left: -42px;
            padding-left: 47px;
            margin-right: -55px;
            padding-right: 60px;
            max-width: 100000px;
        }
    
        .dropdown-toggle{
            width: 55px;
        }
    
        #manual_link{
            display: none;
        }
    }

    .nprogress-custom-parent{
        overflow: visible;
    }
    .embed-value-form .gridembeds-row{
        margin-bottom: 0;
    }
}


// bootstrap --------------------------------------------------
.btn.btn-purple { 
    color: #FFFFFF; 
    background-color: $purple; 
    border-color: $purple-border; 
  } 

  .btn.btn-purple:hover, 
  .btn.btn-purple:focus, 
  .btn.btn-purple:active, 
  .btn.btn-purple.active, 
  .open .dropdown-toggle.btn.btn-purple { 
    color: #FFFFFF; 
    background-color: $purple-hover; 
    border-color: $purple-border-hover;
  }

  .btn.btn-purple:active, 
  .btn.btn-purple.active, 
  .open .dropdown-toggle.btn.btn-purple { 
    background-image: none; 
  } 

  .btn.btn-purple.disabled, 
  .btn.btn-purple[disabled], 
  fieldset[disabled] .btn.btn-purple, 
  .btn.btn-purple.disabled:hover, 
  .btn.btn-purple[disabled]:hover, 
  fieldset[disabled] .btn.btn-purple:hover, 
  .btn.btn-purple.disabled:focus, 
  .btn.btn-purple[disabled]:focus, 
  fieldset[disabled] .btn.btn-purple:focus, 
  .btn.btn-purple.disabled:active, 
  .btn.btn-purple[disabled]:active, 
  fieldset[disabled] .btn.btn-purple:active, 
  .btn  .btn-purple.disabled.active, 
  .btn.btn-purple[disabled].active, 
  fieldset[disabled] .btn.btn-purple.active { 
    background-color: $purple; 
    border-color: $purple-border; 
  } 

  .btn.btn-purple .badge { 
    color: $purple; 
    background-color: #FFFFFF; 
  } 

// tile
#tile-template{
    .tile-group-item {
        padding-left: 5px;
        padding-right: 5px;

        .tile {
            background-color: #fff;
            cursor: pointer;
            border:1px solid #ddd;
            margin: 5px 0;
            width: 100%;
            height:100%;
            display: flex;
            flex-wrap: wrap;
            
            &:hover {
                background-color: #ccf2ff;
            }
            &.active {
                background-color: #32ccff;
            }
            p{
                margin:10px 0;
            }
            .tile-thumbnail{
                flex: 1;
                padding: 3px 5px;

                img {
                    max-width: 100%;
                    max-height: 100%;
                    margin: 0 auto;
                    padding: 10px 0;
                    display: block;
                }
            } 
            .tile-titledescription{
                flex: 3;
                padding: 3px;
                
                .hasThumbnail{
                    flex:1;
                }
            }
            .tile-title {
                font-size: 1.1em;
                font-weight: bold;
            }
            .tile-description {
                font-size: 0.85em;
            }
        }
    }
    .overlay-wrapper{
        min-height: 150px;
        width: 100%;
        position: relative;

        .overlay{
            margin-left: -15px;
            margin-right: -15px;
            width: calc(100% + 30px);
        }
    }

    .row-eq-height > [class^="col-"]{
        margin-bottom:10px;
    }
}

tr.header-left th {
    text-align: left;
}

tr.header-center th {
    text-align: center;
}

tr.header-right th {
    text-align: right;
}

@media (min-width: 768px){
    .modal-dialog.modal-xl {
        width: 600px;
    }    
}

@media (min-width: 992px){
    .modal-dialog.modal-xl {
        width: 900px;
    }    
}

@media (min-width: 1200px){
    .modal-dialog.modal-xl {
        width: 1140px;
    }
}
.fc-event-container .tooltip{
    word-break: break-all;
}

.fc-scroller.fc-day-grid-container{
    overflow: visible !important;
}

label.checkbox-inline:has(input[readonly][type=checkbox]) {
    pointer-events: none;
}

label.radio-inline:has(input[readonly][type=radio]) {
    pointer-events: none;
}

label.checkboxone-label:has(input[readonly][type=checkbox]) {
    pointer-events: none;
}