@import "../../../../Base/Content/sass/compass";
@import "../../../../Base/Content/sass/bootstrap/variables";
@import "_Variables";


// fixes for sharepoint various hardcoded pixels - trying to make it responsive.
// oly: 26-10-2015 - removed .ms-WPBody - because it interferes with set heights on webparts ( by users )
// .ms-WPBody
video, .ms-webpart-chrome, .ms-webpart-chrome-title, .mediaPlayerContainer {
    width: 100% !important;
    height: auto !important;
}


iframe {
    width: 100%;
}

.dateTimePicker {
    .input-group {
        .input-group-btn {
            border: 1px solid #ccc;

            .btn-default {
                background: none;
                border-color: transparent;
                padding: 5px 10px;
            }
        }
    }

    .timePicker {
        .btn-default, .btn-default:hover {
            background: none;
            border-color: transparent;
            padding: 5px 10px;
        }
    }

    .dropdown-menu li {
        table {
            .btn {
                box-shadow: none;
            }

            .btn-default {
                &.active {
                    border: 1px solid #adadad;
                }
            }

            .btn-info {
                background-color: $wizdom-button-primary-bg-color;
                border-color: $wizdom-button-primary-border-color;
                color: $wizdom-button-primary-text-color;

                &:hover, &:focus, &:active {
                    background-color: $wizdom-button-primary-hover-bg-color;
                    border-color: $wizdom-button-primary-hover-border-color;
                    color: $wizdom-button-primary-hover-text-color;
                }

                .text-info {
                    color: $wizdom-button-primary-text-color;
                }
            }
        }

        .btn-group {
            .btn + .btn {
                margin-left: 10px;
            }

            .btn-danger, .btn-info {
                background-color: $wizdom-button-default-bg-color;
                border-color: $wizdom-button-default-border-color;
                color: $wizdom-button-default-text-color;

                &:hover, &:focus, &:active {
                    background-color: $wizdom-button-default-hover-bg-color;
                    border-color: $wizdom-button-default-hover-border-color;
                    color: $wizdom-button-default-hover-text-color;
                    box-shadow: none;
                    outline: none;
                }
            }
        }
    }
}

// webform  datetime required picker
.dateTimePicker.ng-invalid .input-group {
    border: 1px solid #a94442;
}

// hideoverflow related
#wizdomPageLayout .hideOverflow .ms-wpContentDivSpace {
    position: static;
}

#wizdomPageLayout .hideOverflow .ms-cellstyle.ms-positionRelative {
    position: static;
}


// oly: 04-07-2017 removed because it makes it impossible to have anything go outside / document lib - new popup
/*#wizdomPageLayout .ms-webpart-chrome {position:relative;}*/
//#wizdomPageLayout .hideOverflow .ms-webpart-chrome {position:static;}

// Publishingwebsite fix: 50% cols should be able to float. Footer may not.
#DeltaPlaceHolderMain .welcome .clearer {
    clear: none;
}

#s4-workspace #wt-footer {
    clear: left;
}

div.ms-dnd-dropbox {
    left: 0 !important;
    top: 60px !important; /* it makes it impossible to enter document when there are more than one doc library*/
}

.ms-WPBody {
    img {
        /*max-width:100%;*/
        /*margin:0 !important;*/
    }
}

#O365_TopMenu {
    background-color: transparent !important;
}

.ms-breadcrumb-top {
    white-space: normal;
}

// search result overview getting small - when content isnt wide..
// sharepoint does min-width:703px - but not good with mobile - so 100%;
.ms-srch-siteSearchResults {
    min-width: 100%;
}


.pageHeaderBackgroundEnabled {
    /* if users want top bar with logo */
    #siteIcon {
        height: 109px;
        float: left;
        width: 100%;
    }

    #s4-titlerow .wizdom-dot-container,
    #s4-titlerow .wizdom-search-container {
        top: 109px;
        /*background-color:#fff;*/
    }

    #s4-titlerow .v2.wizdom-dot-container,
    #s4-titlerow .v2.wizdom-search-container {
        top: auto;
    }

    .ms-siteicon-img {
        max-width: 318px;
        max-height: 77px;
        padding-top: 25px;
        padding-left: 15px;
    }

    .ms-breadcrumb-top {
        background-color: #fff;
    }

    .ms-breadcrumb-box {
        float: left;
        width: 100%;
        height: auto;
    }

    #s4-titlerow #DeltaTopNavigation {
        background-color: transparent !important;
        color: #222;
    }

    #s4-titlerow #siteIcon.ms-tableCell,
    #s4-titlerow #DeltaSiteLogo.ms-tableCell {
        display: block;
    }

    #s4-titlerow {
        background-position-y: top !important;
    }

    #DeltaSiteLogo {
        float: left;
        margin-left: 25px;
    }
}


// added to behave like css generator
// fix for now - should be implementet properly - in the propper places.
.bootstrap-wrapper a, .bootstrap-wrapper a:visited, .bootstrap-wrapper a:active, .bootstrap-wrapper a:focus, .modal-dialog .wt-pagecontrol a, .modal-dialog .wt-pagecontrol a:link, .modal-dialog .wt-pagecontrol a:visited, .modal-dialog .wt-pagecontrol a:link:visited, .wizdom-bootstrap-wrapper .wt-pagecontrol a, .wizdom-bootstrap-wrapper .wt-pagecontrol a:link, .wizdom-bootstrap-wrapper .wt-pagecontrol a:visited, .wizdom-bootstrap-wrapper .wt-pagecontrol a:link:visited, .wizdom-bootstrap-wrapper-system .wt-pagecontrol a, wizdom-bootstrap-wrapper-system .wt-pagecontrol a:link, .wizdom-bootstrap-wrapper-system .wt-pagecontrol a:visited, .wizdom-bootstrap-wrapper-system .wt-pagecontrol a:link:visited, .modal-dialog #contentRow .wt-linkText, .wizdom-bootstrap-wrapper #contentRow .wt-linkText, .wizdom-bootstrap-wrapper-system #contentRow .wt-linkText, .wt-icon {
    color: $wizdom-link-color;
}

.bootstrap-wrapper a:hover, .modal-dialog .wt-pagecontrol a:hover, .wizdom-bootstrap-wrapper .wt-pagecontrol a:hover, .wizdom-bootstrap-wrapper-system .wt-pagecontrol a:hover, .modal-dialog #contentRow .wt-linkText:hover, .wizdom-bootstrap-wrapper #contentRow .wt-linkText:hover, .wizdom-bootstrap-wrapper-system #contentRow .wt-linkText:hover, .wt-icon:hover {
    color: $wizdom-link-hover-color;
}

.modal-dialog,
.wizdom-bootstrap-wrapper,
.wizdom-bootstrap-wrapper-system {
    .wizdom-icon, .glyphicon {
        color: #0072c6;
    }
}

/*.wizdom-bootstrap-wrapper,
.wizdom-bootstrap-wrapper-system {
	#sideNavBox {
		width: 220px;
	}
}*/

/*.wizdom-bootstrap-wrapper-system #sideNavBox {
    padding-left:0;
	padding-right: 0; 
	@media (min-width:$screen-md) {
		margin-left: 30px;
	}
}*/


//iframe video embed fixes
/*.wizdom-bootstrap-wrapper .ms-rte-embedholder { width: 100%; min-width: 640px; }*/
.wizdom-bootstrap-wrapper .ms-dlgContent .ms-rte-embeddialog-preview {
    width: 100% !important;
    margin-left: 0 !important;
    margin-right: 0 !important;
}

.wt-editmode .wt-page-content .ms-rtestate-field .ms-formfieldcontainer .ms-formfieldvaluecontainer .ms-rtestate-write .ms-rte-embedil {
    display: block;
}



// introduced to prevent rows 3columnV5 of floating.
/*.wizdom-bootstrap-wrapper #wizdomPageLayout.wt-3columnPageType5 >.container-fluid>.row:after {
    clear:both;
}*/

/*Bootstrap Toggle CSS*/
.bootstrap-wrapper {
    .checkbox label .toggle,
    .checkbox-inline .toggle {
        margin-left: -20px;
        margin-right: 5px;
    }

    .toggle {
        font-family: 'Helvetica Neue', Helvetica, Arial, sans-serif;
        position: relative;
    }

    .toggle-group {
        position: absolute;
        width: 200%;
        top: 0;
        bottom: 0;
        left: 0;
        transition: left 0.35s;
        -webkit-transition: left 0.35s;
        -moz-user-select: none;
        -webkit-user-select: none;

        label.btn {
            width: auto !important;
        }
    }

    .toggle-on, .toggle-off {
        position: absolute;
        top: 0;
        bottom: 0;
        left: 0;
        right: 50%;
        margin: 0;
        border: 0;
        line-height: 0.8;
    }

    .toggle-off {
        display: none;
    }

    .toggle-handle {
        position: absolute;
        margin: 0 auto;
        height: 100%;
        width: 0px;
        padding: 5px 10px;
        border-width: 1px;
        border-radius: 20px;
        right: 50%;

        &.btn {
            padding: 5px 10px;
            border-radius: 20px;
            border-color: #adadad;
        }
    }

    .toggle {
        &.off {
            .toggle-on {
                display: none;
            }

            .toggle-off {
                display: block;
            }

            .toggle-handle {
                left: 0;
                right: auto;
            }
        }
    }

    .btn {
        &.toggle {
            min-width: 50px;
            min-height: 23px;
        }

        &.toggle-on {
            padding-right: 24px;
        }

        &.toggle-on,
        &.toggle-off {
            text-indent: 50%;
        }

        &.toggle,
        &.toggle-on,
        &.toggle-off {
            border-radius: 20px;
        }
    }

    .btn-lg {
        &.toggle {
            min-width: 79px;
            min-height: 45px;
        }

        &.toggle-on {
            padding-right: 31px;
        }

        &.toggle-off {
            padding-left: 31px;
        }

        &.toggle-handle {
            width: 40px;
        }
    }

    .btn-sm {
        &.toggle {
            min-width: 50px;
            min-height: 30px;
        }

        &.toggle-on {
            padding-right: 20px;
        }

        &.toggle-off {
            padding-left: 20px;
        }
    }

    .btn-xs {
        &.toggle {
            min-width: 35px;
            min-height: 22px;
        }

        &.toggle-on {
            padding-right: 12px;
        }

        &.toggle-off {
            padding-left: 12px;
        }
    }

    .toggleOn {
        background-color: #0078d7;
        border-color: #0078d7;
    }

    .toggleOff {
        background-color: transparent;
        border-color: #adadad;
    }
}
/*Toggle End*/
.bootstrap-wrapper {
    .navbar-default.topmenu {
        .nav-left {
            .ms-Icon {
                padding-right: 5px;
            }
        }

        .nav-tabs {
            border-bottom: none;
            margin-left: -10px;
            margin-right: -10px;

            li {
                margin-bottom: 0;
                padding: 0 10px 10px;

                a {
                    padding: 0 0 4px 0;
                    color: #666;
                    border: none;
                    border-bottom: 2px solid transparent;
                    font-weight: normal;

                    &:hover, &:focus, &:active {
                        background: none;
                    }
                }

                &.active {
                    border-bottom: none;

                    a {
                        border-bottom-color: $wizdom-primary-color;
                        color: #333;
                        font-weight: 600;
                        background: none;

                        &:hover {
                            color: #333;
                        }
                    }
                }
            }
        }
    }

    .ms-Icon {
        top: 2px;
    }

    input [type=password][disabled], input[type=text][disabled], input[type=file][disabled], input:not([type])[disabled], textarea[disabled], select[disabled], .sp-peoplepicker-topLevelDisabled, .ms-inputBoxDisabled {
        border-color: #ccc;
    }

    .list-group {
        .list-group-item {
            .close {
                margin-top: -2px;
            }
        }
    }

    .btn {
        border-radius: 0;
        // padding on button is a problem because all button types are affected - calendar - or timepicker in noticeboard.
        // needs another solution.
        /*padding: 5px 25px;*/
        text-transform: none;
        //margin: 0 5px 5px 0; // temporary fix - .btn+.btn is not a good solution when buttons move to seperate lines.
        /*& + .btn {
			margin-left: 5px;
		}*/
        &.glyphicon-search {
            padding: 6px 12px;
        }

        &.wiz-btn-padding {
            padding: 5px 25px;
        }
    }

    .btn-success, .btn-primary {
        background-color: $wizdom-button-primary-bg-color;
        border-color: $wizdom-button-primary-border-color;
        color: $wizdom-button-primary-text-color;

        &:hover, &:focus, &:active, &[disabled] {
            background-color: $wizdom-button-primary-hover-bg-color;
            border-color: $wizdom-button-primary-hover-border-color;
            color: $wizdom-button-primary-hover-text-color;
        }
    }

    .btn-default {
        background-color: $wizdom-button-default-bg-color;
        border-color: $wizdom-button-default-border-color;
        color: $wizdom-button-default-text-color;

        &:hover, &:focus, &:active, &[disabled] {
            background-color: $wizdom-button-default-hover-bg-color;
            border-color: $wizdom-button-default-hover-border-color;
            color: $wizdom-button-default-hover-text-color;
            box-shadow: none;
            outline: none;
        }
    }

    .input-group-btn .btn-default {
        border-color: #ccc;

        &:hover, &:focus, &:active, &[disabled] {
            border-color: #adadad;
        }
    }

    .panel-primary {
        > .panel-heading {
            background-color: $wizdom-button-primary-bg-color;
            border-color: $wizdom-button-primary-border-color;
        }
    }

    .panel-title {
        a.accordion-toggle, i {
            color: $wizdom-primary-color;
        }
    }
}
